Différences

Ci-dessous, les différences entre deux révisions de la page.

--- issue147:inkscape [2019/08/12 12:38] – auntiee
+++ issue147:inkscape [2019/08/12 15:32] (Version actuelle) – andre_domenech
@@ Ligne 3: / Ligne 3: @@
 For simplicity, I’ve based this on the file I created for the previous instalment. That means the red light already has an ID (“redCircle”), and the JS file is already linked. I’ve duplicated the red circle to create the amber and green ones, giving them corresponding IDs of “amberCircle” and “greenCircle”. Because the JS is linked, and the red circle has the same ID as last time, loading the file into a web browser draws the lights okay, and clicking the button toggles the red light to green and back. Clearly there’s more work to be done, but at least the fundamentals are in place.**
-La dernière fois, nous avons utilisé un fichier JavaScript lié pour créer un fichier SVG contenant un cercle qui change de couleur quand on appuie sur un bouton, lors qu'il est chargé dans un navigateur Web. Cette fois-ci, nous prolongerons cet exemple simple pour montrer comment la combinaison de SVG et de JavaScript est idéale pour des démonstrations animées, en mettant en œuvre des feux tricolores. Nos feux sont la sorte de chose qui peut apparaître sur un site d'éducation ou dans un musée : ils vont se succéder dans une séquence de couleurs (rouge (red), rouge et jaune (amber), vert (green), jaune, rouge), une fois quand on clique sur le bouton. Mais, d'abord, nous avons besoin de feux tricolores :
+La dernière fois, nous avons utilisé un fichier JavaScript lié pour créer un fichier SVG contenant un cercle qui change de couleur quand on appuie sur un bouton, lorsqu'il est chargé dans un navigateur Web. Cette fois-ci, nous prolongerons cet exemple simple pour montrer comment la combinaison de SVG et de JavaScript est idéale pour des démonstrations animées, en mettant en œuvre des feux tricolores. Nos feux sont la sorte de chose qui peut apparaître sur un site d'éducation ou dans un musée : ils vont se succéder dans une séquence de couleurs (rouge (red), rouge et jaune (amber), vert (green), jaune, rouge), une fois quand on clique sur le bouton. Mais, d'abord, nous avons besoin de feux tricolores :
 Par simplicité, comme base pour ceux-ci, j'ai pris le fichier créé dans l’article précédent. Cela signifie que la lumière rouge a déjà un ID (« redCircle ») et que le fichier JS est déjà lié. J'ai dupliqué le cercle rouge pour créer les jaune et vert, en leur donnant des ID qui correspondent, « amberCircle » et « greenCircle ». Comme le fichier JS est lié et que le cercle rouge a le même ID que la dernière fois, le chargement du fichier dans le navigateur dessine bien les feux, et un clic sur le bouton fait passer le feu du rouge au vert et vice-versa. Clairement, il reste encore beaucoup de travail à faire, mais les fondamentaux sont en place.
@@ Ligne 63: / Ligne 63: @@
 </style>**
-Ne vous inquiétez-pas si du contenu existe déjà dans votre bloc <style>, tel que des règles utilisées pour l'aspect du bouton ; ajoutez simplement le nouveau code à la fin. N'oubliez pas que vous devez aussi supprimer les propriétés « fill » dans les attributs de style des éléments <circle> ; autrement, ils vont remplacer n'importe quel autre réglage dans le bloc <style>. Un bon test est de changer toutes les couleurs du CSS en « blue » (bleu) et de recharger la page - si vous voyez encore du rouge, du jaune et du vert, vous avez alors une entrée de remplacement sur les éléments eux-mêmes.
+Ne vous inquiétez-pas si du contenu existe déjà dans votre bloc <style>, tel que des règles utilisées pour l'aspect du bouton ; ajoutez simplement le nouveau code à la fin. N'oubliez pas que vous devez aussi supprimer les propriétés « fill » dans les attributs de style des éléments <circle> ; autrement, ils vont remplacer n'importe quel autre réglage dans le bloc <style>. Un bon test est de changer toutes les couleurs du CSS en « blue » (bleu) et de recharger la page ; si vous voyez encore du rouge, du jaune et du vert, vous avez alors une entrée de remplacement sur les éléments eux-mêmes.
 Maintenant, nous avons besoin d'ajouter les couleurs que nous voulons utiliser quand chaque feu est allumé. C'est simplement un autre jeu de trois styles ajouté à la fin du bloc <style>, avec la balise fermante :
@@ Ligne 91: / Ligne 91: @@
 }**
-Chacune de ces règles est structurée à l'identique, et peut être lue ainsi : « régler cette couleur de remplissage pour l'élément avec l'ID particulier, mais seulement si un de ses ancêtres a une classe particulière ». Avec cette méthode, nous pouvons régler les classes « red », « amber » et « green » d'un des éléments ancêtres des feux, tel que le calque du parent, ou même de l'élément <svg> racine, de façon à allumer les feux. Voyons cela...
+Chacune de ces règles est structurée à l'identique, et peut être lue ainsi : « régler cette couleur de remplissage pour l'élément avec l'ID particulier, mais seulement si un de ses ancêtres a une classe particulière ». Avec cette méthode, nous pouvons régler les classes « red », « amber » et « green » d'un des éléments ancêtres des feux, tel que le calque du parent, ou même de l'élément <svg> racine, de façon à allumer les feux. Voyons cela.
-Nous avons déjà vu comment utiliser document.querySelector() avec un ID pour retrouver un élément particulier. L'ajout de nos classes au calque d'Inkscape serait juste un cas de découverte du bon ID pour l'élément <g> correct. Mais pour présenter une autre approche, nous ferons, à la place, référence à l'élément racine < svg >, puis nous y ajouterons une classe. Si vous avez tout suivi la dernière fois, vous devriez déjà avoir un fichier JavaScript avec une fonction buttonPressed(). Remplacez le contenu de cette fonction avec ceci :
+Nous avons déjà vu comment utiliser document.querySelector() avec un ID pour retrouver un élément particulier. L'ajout de nos classes au calque d'Inkscape serait juste un cas de découverte du bon ID pour l'élément <g> correct. Mais pour présenter une autre approche, nous ferons, à la place, référence à l'élément racine < svg >, puis nous y ajouterons une classe. Si vous avez tout suivi la dernière fois, vous devriez déjà avoir un fichier JavaScript avec une fonction buttonPressed(). Remplacez le contenu de cette fonction par ceci :
 function buttonPressed() {
@@ Ligne 117: / Ligne 117: @@
 }**
-La séquence de nos feux tricolores comprend un état où deux feux doivent être éclairés en même temps - nous obligeant à régler deux classes. Dans un monde idéal, la méthode classList.toggle() serait assez flexible pour accepter un paramètre « red amber » et faire basculer les deux classes. Mais nous sommes prisonniers de notre monde qui n'est pas idéal, dans lequel les méthodes classList fonctionnent toutes avec une seule classe à la fois - aussi, pour faire basculer deux classes, nous devons appeler la méthode deux fois :
+La séquence de nos feux tricolores comprend un état où deux feux doivent être éclairés en même temps, nous obligeant à régler deux classes. Dans un monde idéal, la méthode classList.toggle() serait assez flexible pour accepter un paramètre « red amber » et faire basculer les deux classes. Mais nous sommes prisonniers de notre monde qui n'est pas idéal, dans lequel les méthodes classList fonctionnent toutes avec une seule classe à la fois ; aussi, pour faire basculer deux classes, nous devons appeler la méthode deux fois :
 function buttonPressed() {
@@ Ligne 131: / Ligne 131: @@
 If you try this in your code you’ll find that you can turn the lights on, but as we’re no longer using a toggling function you can’t turn them off again without reloading the page. But we’re not really interested in toggling – we want a sequence of particular lights. For that, however, we need a little foray into the history of JavaScript…**
-En fait, dans notre démo, nous ne voulons pas que les feux s'allument et s'éteignent - nous voulons simplement une sélection déterminée de feux à chaque étape, sans avoir à éteindre les feux de l'étape précédente, ou appeler plusieurs fois la même méthode. L'utilisation de l'interface classList nous rend vraiment la vie plus difficile, alors que tout ce que nous voulons faire, c'est donner une valeur particulière à l'attribut « class ». Heureusement, les navigateurs fournissent une fonction pour le réglage de la valeur d'un attribut. Elle a reçu le nom bien choisi de setAttribut() (régler l'attribut) et ses arguments sont le nom de l'attribut à régler et la valeur à lui donner. Utilisons-la pour allumer les feux rouge et jaune :
+En fait, dans notre démo, nous ne voulons pas que les feux s'allument et s'éteignent, nous voulons simplement une sélection déterminée de feux à chaque étape, sans avoir à éteindre les feux de l'étape précédente, ou appeler plusieurs fois la même méthode. L'utilisation de l'interface classList nous rend vraiment la vie plus difficile, alors que tout ce que nous voulons faire, c'est donner une valeur particulière à l'attribut « class ». Heureusement, les navigateurs fournissent une fonction pour le réglage de la valeur d'un attribut. Elle a reçu le nom bien choisi de setAttribut() (régler l'attribut) et ses arguments sont le nom de l'attribut à régler et la valeur à lui donner. Utilisons-la pour allumer les feux rouge et jaune :
 svg.setAttribute("class", "red amber");
-Si vous l'essayez dans votre code, vous trouverez que vous pouvez allumer les feux, mais, comme nous n'utilisons plus la fonction de bascule, vous ne pouvez plus les éteindre sans recharger la page. Mais nous ne sommes pas vraiment intéressés par le va-et-vient - nous voulons une séquence particulière des feux. Pour ça, nous avons besoin de faire une petite incursion dans l'histoire de JavaScript.
+Si vous l'essayez dans votre code, vous trouverez que vous pouvez allumer les feux, mais, comme nous n'utilisons plus la fonction de bascule, vous ne pouvez plus les éteindre sans recharger la page. Mais nous ne sommes pas vraiment intéressés par le va-et-vient, nous voulons une séquence particulière des feux. Pour ça, nous avons besoin de faire une petite incursion dans l'histoire de JavaScript.
 **Back in the early days of the web, JavaScript was executed as part of the same “thread” as the browser code itself. This meant that the browser would effectively hand over control to the script, and couldn’t update its UI, or respond to input, until the JS code relinquished that control. You might remember the bad old days when a rogue web page could hang the browser, preventing you from doing anything else with either the page itself or the browser UI. So, JavaScript doesn’t contain any instructions to pause execution of the script, as doing so would block the browser entirely. That means we can’t sequence our lights with something as simple as this pseudo-code:
@@ Ligne 146: / Ligne 146: @@
 ...**
-Dans les premiers temps du Web, JavaScript était exécuté comme faisant partie du même « thread » (séquence de calcul) que le code du navigateur lui-même. Cela signifiait que le navigateur transmettait vraiment le pilotage au script, et ne pouvait mettre à jour son interface utilisateur, ou répondre à une saisie, avant que JS ne rende ce pilotage. Vous vous souvenez peut-être de ces jours terribles où un page Web malfaisante pouvait bloquer le navigateur, vous empêchant de faire quoi que ce soit, sur la page elle-même ou dans l'interface du navigateur. Aussi, JavaScript ne contient aucune instruction pour mettre l'exécution du script en pause, car le faire, ce serait bloquer tout le navigateur. Ça signifie que nous ne pouvons pas séquencer nos feux avec quelque chose d'aussi simple que ce pseudo-code :
+Dans les premiers temps du Web, JavaScript était exécuté comme faisant partie du même « thread » (séquence de calcul) que le code du navigateur lui-même. Cela signifiait que le navigateur transmettait vraiment le pilotage au script, et ne pouvait mettre à jour son interface utilisateur, ou répondre à une saisie, avant que JS ne rende ce pilotage. Vous vous souvenez peut-être de ces jours terribles où une page Web malfaisante pouvait bloquer le navigateur, vous empêchant de faire quoi que ce soit, sur la page elle-même ou dans l'interface du navigateur. Aussi, JavaScript ne contient aucune instruction pour mettre l'exécution du script en pause, car le faire, ce serait bloquer tout le navigateur. Ça signifie que nous ne pouvons pas séquencer nos feux avec quelque chose d'aussi simple que ce pseudo-code :
 svg.setAttribute("class", "red");