diff --git a/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/solution.md b/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/solution.md index a38f01645..c7b31d297 100644 --- a/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/solution.md +++ b/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/solution.md @@ -1,8 +1,8 @@ -Answer: **1 and 3**. +Réponse : **1 et 3**. -Both commands result in adding the `text` "as text" into the `elem`. +Les deux commandes ont pour résultat d'ajouter le `texte` "en tant que texte" dans `elem`. -Here's an example: +Voici un exemple : ```html run height=80
diff --git a/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/task.md b/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/task.md index e127bc0ef..f9ef1e16b 100644 --- a/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/task.md +++ b/2-ui/1-document/07-modifying-document/1-createtextnode-vs-innerhtml/task.md @@ -4,9 +4,9 @@ importance: 5 # createTextNode vs innerHTML vs textContent -We have an empty DOM element `elem` and a string `text`. +Nous avons un élément DOM vide `elem` et une chaîne de caractères `text`. -Which of these 3 commands do exactly the same? +Lesquelles de ces 3 commandes font exactement la même chose ? 1. `elem.append(document.createTextNode(text))` 2. `elem.innerHTML = text` diff --git a/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.md b/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.md index 15238fcf4..800c8cc24 100644 --- a/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.md +++ b/2-ui/1-document/07-modifying-document/10-clock-setinterval/solution.md @@ -1,6 +1,6 @@ -First, let's make HTML/CSS. +Tout d'abord, créons notre HTML/CSS. -Each component of the time would look great in its own ``: +Chaque composante du temps aurait fière allure dans son propre `` : ```html
@@ -8,9 +8,9 @@ Each component of the time would look great in its own ``:
``` -Also we'll need CSS to color them. +Nous aurons également besoin de CSS pour les colorer. -The `update` function will refresh the clock, to be called by `setInterval` every second: +La fonction `update` rafraîchira l'horloge, qui sera appelée par `setInterval` toutes les secondes : ```js function update() { @@ -32,14 +32,14 @@ function update() { } ``` -In the line `(*)` we every time check the current date. The calls to `setInterval` are not reliable: they may happen with delays. +Dans la ligne `(*)` nous vérifions à chaque fois la date actuelle. Les appels à `setInterval` ne sont pas fiables : ils peuvent survenir avec des retards. -The clock-managing functions: +Les fonctions de gestion d'horloge : ```js let timerId; -function clockStart() { // run the clock +function clockStart() { // exécute l'horloge timerId = setInterval(update, 1000); update(); // (*) } @@ -50,4 +50,4 @@ function clockStop() { } ``` -Please note that the call to `update()` is not only scheduled in `clockStart()`, but immediately run in the line `(*)`. Otherwise the visitor would have to wait till the first execution of `setInterval`. And the clock would be empty till then. +Veuillez noter que l'appel à `update()` est non seulement planifié dans `clockStart()`, mais s'exécute immédiatement dans la ligne `(*)`. Sinon, le visiteur devra attendre la première exécution de `setInterval`. Et l'horloge serait vide jusque-là. diff --git a/2-ui/1-document/07-modifying-document/10-clock-setinterval/task.md b/2-ui/1-document/07-modifying-document/10-clock-setinterval/task.md index a1b53e337..57ae83b35 100644 --- a/2-ui/1-document/07-modifying-document/10-clock-setinterval/task.md +++ b/2-ui/1-document/07-modifying-document/10-clock-setinterval/task.md @@ -2,10 +2,10 @@ importance: 4 --- -# Colored clock with setInterval +# Horloge colorée avec setInterval -Create a colored clock like here: +Créez une horloge colorée comme ici : [iframe src="solution" height=60] -Use HTML/CSS for the styling, JavaScript only updates time in elements. +Utilisez HTML/CSS pour le style, JavaScript ne met à jour que le temps dans les éléments. diff --git a/2-ui/1-document/07-modifying-document/11-append-to-list/solution.md b/2-ui/1-document/07-modifying-document/11-append-to-list/solution.md index 4e77fb5cb..bf46b218f 100644 --- a/2-ui/1-document/07-modifying-document/11-append-to-list/solution.md +++ b/2-ui/1-document/07-modifying-document/11-append-to-list/solution.md @@ -1,7 +1,7 @@ -When we need to insert a piece of HTML somewhere, `insertAdjacentHTML` is the best fit. +Lorsque nous devons insérer un morceau de HTML quelque part, `insertAdjacentHTML` est le meilleur choix. -The solution: +La solution : ```js one.insertAdjacentHTML('afterend', '
  • 2
  • 3
    • '); diff --git a/2-ui/1-document/07-modifying-document/11-append-to-list/task.md b/2-ui/1-document/07-modifying-document/11-append-to-list/task.md index 543cd3e46..349286676 100644 --- a/2-ui/1-document/07-modifying-document/11-append-to-list/task.md +++ b/2-ui/1-document/07-modifying-document/11-append-to-list/task.md @@ -2,9 +2,9 @@ importance: 5 --- -# Insert the HTML in the list +# Insérez le HTML dans la liste -Write the code to insert `
  • 2
  • 3
    • ` between two `
  • ` here: +Écrivez le code pour insérer `
  • 2
  • 3
    • ` entre deux `
  • ` ici : ```html
      diff --git a/2-ui/1-document/07-modifying-document/12-sort-table/solution.md b/2-ui/1-document/07-modifying-document/12-sort-table/solution.md index 49243e8e3..7a320ff87 100644 --- a/2-ui/1-document/07-modifying-document/12-sort-table/solution.md +++ b/2-ui/1-document/07-modifying-document/12-sort-table/solution.md @@ -1,4 +1,4 @@ -The solution is short, yet may look a bit tricky, so here I provide it with extensive comments: +La solution est courte, mais peut sembler un peu délicate, alors ici je la présente avec de nombreux commentaires : ```js let sortedRows = Array.from(table.tBodies[0].rows) // 1 @@ -7,12 +7,12 @@ let sortedRows = Array.from(table.tBodies[0].rows) // 1 table.tBodies[0].append(...sortedRows); // (3) ``` -The step-by-step algorthm: +L'algorithme pas à pas : -1. Get all ``, from ``. -2. Then sort them comparing by the content of the first `` (the name field). -3. Now insert nodes in the right order by `.append(...sortedRows)`. +1. Obtenez tous les `` de ``. +2. Triez-les ensuite en les comparant au contenu du premier `` (le champ du nom). +3. Insérez maintenant les nœuds dans le bon ordre par `.append(...sortedRows)`. -We don't have to remove row elements, just "re-insert", they leave the old place automatically. +Nous n'avons pas à supprimer les éléments de ligne, il suffit de les "réinsérer", ils quittent automatiquement l'ancien emplacement. -P.S. In our case, there's an explicit `` in the table, but even if HTML table doesn't have ``, the DOM structure always has it. +P.S. Dans notre cas, il y a un `` explicite dans le tableau, mais même si le tableau HTML n'a pas de ``, la structure DOM l'a toujours. diff --git a/2-ui/1-document/07-modifying-document/12-sort-table/task.md b/2-ui/1-document/07-modifying-document/12-sort-table/task.md index 7cdba35bc..8939b1f12 100644 --- a/2-ui/1-document/07-modifying-document/12-sort-table/task.md +++ b/2-ui/1-document/07-modifying-document/12-sort-table/task.md @@ -2,9 +2,9 @@ importance: 5 --- -# Sort the table +# Trier le tableau -There's a table: +Il y a un tableau : ```html run @@ -30,6 +30,6 @@ There's a table:
      ``` -There may be more rows in it. +Il peut y avoir plus de lignes. -Write the code to sort it by the `"name"` column. +Écrivez le code pour le trier par la colonne `"name"`. diff --git a/2-ui/1-document/07-modifying-document/4-clear-elem/solution.md b/2-ui/1-document/07-modifying-document/4-clear-elem/solution.md index 62c3386d8..adf92abe3 100644 --- a/2-ui/1-document/07-modifying-document/4-clear-elem/solution.md +++ b/2-ui/1-document/07-modifying-document/4-clear-elem/solution.md @@ -1,5 +1,5 @@ -First, let's see how *not* to do it: +Voyons d'abord comment ne *pas* le faire : ```js function clear(elem) { @@ -9,11 +9,11 @@ function clear(elem) { } ``` -That won't work, because the call to `remove()` shifts the collection `elem.childNodes`, so elements start from the index `0` every time. But `i` increases, and some elements will be skipped. +Cela ne fonctionnera pas, car l'appel à `remove()` décale la collection `elem.childNodes`, donc les éléments commencent à partir de l'index `0` à chaque fois. Mais `i` augmente et certains éléments seront ignorés. -The `for..of` loop also does the same. +La boucle `for..of` fait de même. -The right variant could be: +La bonne variante pourrait être : ```js function clear(elem) { @@ -23,7 +23,7 @@ function clear(elem) { } ``` -And also there's a simpler way to do the same: +Et il existe également un moyen plus simple de faire de même : ```js function clear(elem) { diff --git a/2-ui/1-document/07-modifying-document/4-clear-elem/task.md b/2-ui/1-document/07-modifying-document/4-clear-elem/task.md index 938d53470..7bb0ad0f5 100644 --- a/2-ui/1-document/07-modifying-document/4-clear-elem/task.md +++ b/2-ui/1-document/07-modifying-document/4-clear-elem/task.md @@ -2,9 +2,9 @@ importance: 5 --- -# Clear the element +# Effacer l'élément -Create a function `clear(elem)` that removes everything from the element. +Créez une fonction `clear(elem)` qui supprime tout de l'élément. ```html run height=60
        @@ -13,8 +13,8 @@ Create a function `clear(elem)` that removes everything from the element.
      ``` diff --git a/2-ui/1-document/07-modifying-document/5-why-aaa/solution.md b/2-ui/1-document/07-modifying-document/5-why-aaa/solution.md index 6b85168b9..3a9b48384 100644 --- a/2-ui/1-document/07-modifying-document/5-why-aaa/solution.md +++ b/2-ui/1-document/07-modifying-document/5-why-aaa/solution.md @@ -1,9 +1,9 @@ -The HTML in the task is incorrect. That's the reason of the odd thing. +Le code HTML de cette tâche est incorrect. Voilà la raison de la chose étrange. -The browser has to fix it automatically. But there may be no text inside the ``: according to the spec only table-specific tags are allowed. So the browser adds `"aaa"` *before* the `
      `. +Le navigateur doit le réparer automatiquement. Mais il peut ne pas y avoir de texte à l'intérieur de la `
      ` : selon la spécification, seules les balises spécifiques à la table sont autorisées. Le navigateur ajoute donc `"aaa"` *avant* la `
      `. -Now it's obvious that when we remove the table, it remains. +Maintenant, il est évident que lorsque nous retirons la `table`, la chaîne de caractères reste. -The question can be easily answered by exploring the DOM using the browser tools. It shows `"aaa"` before the `
      `. +La question peut être facilement répondue en explorant le DOM à l'aide des outils du navigateur. Il montre `"aaa"` avant la `
      `. -The HTML standard specifies in detail how to process bad HTML, and such behavior of the browser is correct. +Le standard HTML spécifie en détail comment traiter un mauvais HTML, et un tel comportement du navigateur est correct. diff --git a/2-ui/1-document/07-modifying-document/5-why-aaa/task.md b/2-ui/1-document/07-modifying-document/5-why-aaa/task.md index f87074dba..569017596 100644 --- a/2-ui/1-document/07-modifying-document/5-why-aaa/task.md +++ b/2-ui/1-document/07-modifying-document/5-why-aaa/task.md @@ -2,13 +2,13 @@ importance: 1 --- -# Why does "aaa" remain? +# Pourquoi "aaa" reste-t-il ? -In the example below, the call `table.remove()` removes the table from the document. +Dans l'exemple ci-dessous, l'appel `table.remove()` supprime le tableau du document. -But if you run it, you can see that the text `"aaa"` is still visible. +mais si vous l'exécutez, vous pouvez voir que le texte `"aaa"` est toujours visible. -Why does that happen? +Pourquoi cela se produit-il ? ```html height=100 run
      @@ -19,9 +19,9 @@ Why does that happen?
      ``` diff --git a/2-ui/1-document/07-modifying-document/6-create-list/solution.md b/2-ui/1-document/07-modifying-document/6-create-list/solution.md index 1669be18f..30e3bc9f4 100644 --- a/2-ui/1-document/07-modifying-document/6-create-list/solution.md +++ b/2-ui/1-document/07-modifying-document/6-create-list/solution.md @@ -1 +1 @@ -Please note the usage of `textContent` to assign the `
    • ` content. +Veuillez noter l'utilisation de `textContent` pour attribuer le contenu `
    • `. diff --git a/2-ui/1-document/07-modifying-document/6-create-list/task.md b/2-ui/1-document/07-modifying-document/6-create-list/task.md index 43b0a34a7..67614602e 100644 --- a/2-ui/1-document/07-modifying-document/6-create-list/task.md +++ b/2-ui/1-document/07-modifying-document/6-create-list/task.md @@ -2,18 +2,18 @@ importance: 4 --- -# Create a list +# Créer une liste -Write an interface to create a list from user input. +Écrivez une interface pour créer une liste à partir des entrées utilisateur. -For every list item: +Pour chaque élément de la liste : -1. Ask a user about its content using `prompt`. -2. Create the `
    • ` with it and add it to `
        `. -3. Continue until the user cancels the input (by pressing `key:Esc` or CANCEL in prompt). +1. Interrogez un utilisateur sur son contenu en utilisant `prompt`. +2. Créez le `
      • ` avec et ajoutez-le à `
          `. +3. Continuez jusqu'à ce que l'utilisateur annule l'entrée (en appuyant sur la touche `key:Esc` ou CANCEL dans le prompt). -All elements should be created dynamically. +Tous les éléments doivent être créés dynamiquement. -If a user types HTML-tags, they should be treated like a text. +Si un utilisateur tape des balises HTML, elles doivent être traitées comme un texte. [demo src="solution"] diff --git a/2-ui/1-document/07-modifying-document/7-create-object-tree/solution.md b/2-ui/1-document/07-modifying-document/7-create-object-tree/solution.md index d29636ee2..de9497212 100644 --- a/2-ui/1-document/07-modifying-document/7-create-object-tree/solution.md +++ b/2-ui/1-document/07-modifying-document/7-create-object-tree/solution.md @@ -1,4 +1,4 @@ -The easiest way to walk the object is to use recursion. +La façon la plus simple de parcourir l'objet est d'utiliser la récursivité. -1. [The solution with innerHTML](sandbox:innerhtml). -2. [The solution with DOM](sandbox:build-tree-dom). +1. [La solution avec innerHTML](https://plnkr.co/edit/PzjPAk9yKHeKkT36?p=preview). +2. [La solution avec DOM](https://plnkr.co/edit/e3TEVqQrm7ZqZkn6?p=preview). diff --git a/2-ui/1-document/07-modifying-document/7-create-object-tree/task.md b/2-ui/1-document/07-modifying-document/7-create-object-tree/task.md index 5ec1a01bc..e62970ef9 100644 --- a/2-ui/1-document/07-modifying-document/7-create-object-tree/task.md +++ b/2-ui/1-document/07-modifying-document/7-create-object-tree/task.md @@ -2,11 +2,11 @@ importance: 5 --- -# Create a tree from the object +# Créer un arbre à partir de l'objet -Write a function `createTree` that creates a nested `ul/li` list from the nested object. +Écrivez une fonction `createTree` qui crée une liste imbriquée `ul/li` à partir de l'objet imbriqué. -For instance: +Par exemple : ```js let data = { @@ -28,24 +28,24 @@ let data = { }; ``` -The syntax: +La syntaxe : ```js let container = document.getElementById('container'); *!* -createTree(container, data); // creates the tree in the container +createTree(container, data); // crée l'arbre dans le conteneur */!* ``` -The result (tree) should look like this: +Le résultat (arbre) devrait ressembler à ceci : [iframe border=1 src="build-tree-dom"] -Choose one of two ways of solving this task: +Choisissez l'une des deux façons de résoudre cette tâche : -1. Create the HTML for the tree and then assign to `container.innerHTML`. -2. Create tree nodes and append with DOM methods. +1. Créez le code HTML de l'arborescence, puis attribuez-le à `container.innerHTML`. +2. Créez des nœuds d'arbre et ajoutez-les avec les méthodes DOM. -Would be great if you could do both. +Ce serait génial si vous pouviez faire les deux. -P.S. The tree should not have "extra" elements like empty `
            ` for the leaves. +P.S. L'arbre ne doit pas avoir d'éléments "supplémentaires" comme des `
              ` vides pour les feuilles (de l'arbre). diff --git a/2-ui/1-document/07-modifying-document/8-tree-count/solution.md b/2-ui/1-document/07-modifying-document/8-tree-count/solution.md index 43b9a362c..5a80946ec 100644 --- a/2-ui/1-document/07-modifying-document/8-tree-count/solution.md +++ b/2-ui/1-document/07-modifying-document/8-tree-count/solution.md @@ -1 +1 @@ -To append text to each `
            • ` we can alter the text node `data`. +Pour ajouter du texte à chaque `
            • `, nous pouvons modifier le nœud texte `data`. diff --git a/2-ui/1-document/07-modifying-document/8-tree-count/task.md b/2-ui/1-document/07-modifying-document/8-tree-count/task.md index d6343bf3b..ff5d99982 100644 --- a/2-ui/1-document/07-modifying-document/8-tree-count/task.md +++ b/2-ui/1-document/07-modifying-document/8-tree-count/task.md @@ -2,12 +2,12 @@ importance: 5 --- -# Show descendants in a tree +# Afficher les descendants dans un arbre -There's a tree organized as nested `ul/li`. +Il y a un arbre organisé comme un `ul/li` imbriqué. -Write the code that adds to each `
            • ` the number of its descendants. Skip leaves (nodes without children). +Écrivez le code qui ajoute à chaque `
            • ` le nombre de ses descendants. Sautez les feuilles (nœuds sans enfants). -The result: +Le resultat : [iframe border=1 src="solution"] diff --git a/2-ui/1-document/07-modifying-document/9-calendar-table/solution.md b/2-ui/1-document/07-modifying-document/9-calendar-table/solution.md index de8be56e9..80ae13cf5 100644 --- a/2-ui/1-document/07-modifying-document/9-calendar-table/solution.md +++ b/2-ui/1-document/07-modifying-document/9-calendar-table/solution.md @@ -1,9 +1,9 @@ -We'll create the table as a string: `"...
              "`, and then assign it to `innerHTML`. +Nous allons créer le tableau sous forme de chaîne de caractères : `"...
              "`, puis l'affecter à `innerHTML`. -The algorithm: +L'algorithme : -1. Create the table header with `` and weekday names. -2. Create the date object `d = new Date(year, month-1)`. That's the first day of `month` (taking into account that months in JavaScript start from `0`, not `1`). -3. First few cells till the first day of the month `d.getDay()` may be empty. Let's fill them in with ``. -4. Increase the day in `d`: `d.setDate(d.getDate()+1)`. If `d.getMonth()` is not yet the next month, then add the new cell `` to the calendar. If that's a Sunday, then add a newline "</tr><tr>". -5. If the month has finished, but the table row is not yet full, add empty `` into it, to make it square. +1. Créer l'en-tête du tableau avec les noms `` et les jours de la semaine. +2. Créez l'objet de date `d = new Date(year, month-1)`. C'est le premier jour de `month` (en tenant compte du fait que les mois en JavaScript commencent à `0`, pas à `1`). +3. Les premières cellules jusqu'au premier jour du mois `d.getDay()` peuvent être vides. Remplissons-les avec ``. +4. Augmentez le jour en `d`: `d.setDate(d.getDate()+1)`. Si `d.getMonth()` n'est pas encore le mois suivant, alors ajoutez la nouvelle cellule `` au calendrier. Si c'est un dimanche, ajoutez une nouvelle ligne "</tr><tr>". +5. Si le mois est terminé, mais que la ligne du tableau n'est pas encore pleine, ajoutez-y un `` vide pour le rendre carré. diff --git a/2-ui/1-document/07-modifying-document/9-calendar-table/task.md b/2-ui/1-document/07-modifying-document/9-calendar-table/task.md index 37b1a60d2..2004dd939 100644 --- a/2-ui/1-document/07-modifying-document/9-calendar-table/task.md +++ b/2-ui/1-document/07-modifying-document/9-calendar-table/task.md @@ -2,16 +2,16 @@ importance: 4 --- -# Create a calendar +# Créer un calendrier -Write a function `createCalendar(elem, year, month)`. +Écrivez une fonction `createCalendar(elem, year, month)`. -The call should create a calendar for the given year/month and put it inside `elem`. +L'appel doit créer un calendrier pour l'année/le mois donné et le mettre dans `elem`. -The calendar should be a table, where a week is ``, and a day is ``. The table top should be `` with weekday names: the first day should be Monday, and so on till Sunday. +Le calendrier doit être un tableau, où une semaine est un `` et un jour est un ``. Le dessus du tableau doit être un `` avec les noms des jours de la semaine : le premier jour doit être le lundi, et ainsi de suite jusqu'au dimanche. -For instance, `createCalendar(cal, 2012, 9)` should generate in element `cal` the following calendar: +Par exemple, `createCalendar(cal, 2012, 9)` devrait générer dans l'élément `cal` le calendrier suivant : [iframe height=210 src="solution"] -P.S. For this task it's enough to generate the calendar, should not yet be clickable. +P.S. Pour cette tâche, il suffit de générer le calendrier, il ne doit pas encore être cliquable. diff --git a/2-ui/1-document/07-modifying-document/article.md b/2-ui/1-document/07-modifying-document/article.md index c4796a1d4..f09c98b88 100644 --- a/2-ui/1-document/07-modifying-document/article.md +++ b/2-ui/1-document/07-modifying-document/article.md @@ -1,14 +1,14 @@ -# Modifying the document +# Modification du document -DOM modification is the key to creating "live" pages. +La modification DOM est la clé pour créer des pages "live". -Here we'll see how to create new elements "on the fly" and modify the existing page content. +Ici, nous verrons comment créer de nouveaux éléments "à la volée" et modifier le contenu de la page existante. -## Example: show a message +## Exemple : afficher un message -Let's demonstrate using an example. We'll add a message on the page that looks nicer than `alert`. +Démontrons en utilisant un exemple. Nous allons ajouter un message sur la page qui est plus joli que `alert`. -Here's how it will look: +Voici à quoi cela ressemblera : ```html autorun height="80"