From 6f72853e991327d1c330df67eb2fdcaeba1a1259 Mon Sep 17 00:00:00 2001 From: "Charles Emmanuel S. Ndiaye" Date: Sun, 13 Feb 2022 17:04:10 +0000 Subject: [PATCH 001/151] fix a link by deleting space (#599) fix a link by deleting space --- 7-bank-project/3-data/translations/README.ja.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/7-bank-project/3-data/translations/README.ja.md b/7-bank-project/3-data/translations/README.ja.md index 2906f53a..038f6b60 100644 --- a/7-bank-project/3-data/translations/README.ja.md +++ b/7-bank-project/3-data/translations/README.ja.md @@ -223,7 +223,7 @@ function updateDashboard() { > 残高表示をよりきれいにするために、メソッド [`toFixed(2)`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) を使用して、小数点以下2桁の値を強制的に表示します。 -これで、ダッシュボードがロードされるたびに `updateDashboard()` 関数を呼び出す必要があります。既に [レッスン1の課題] (../../1-template-route/translations/README.ja.md) を終了している場合は簡単ですが、そうでない場合は以下の実装を使用することができます。 +これで、ダッシュボードがロードされるたびに `updateDashboard()` 関数を呼び出す必要があります。既に [レッスン1の課題](../../1-template-route/translations/README.ja.md) を終了している場合は簡単ですが、そうでない場合は以下の実装を使用することができます。 このコードを `updateRoute()` 関数の最後に追加します。 From 158f3d5595ccc39e397aa0f573d60c494d035c73 Mon Sep 17 00:00:00 2001 From: "Charles Emmanuel S. Ndiaye" Date: Sun, 13 Feb 2022 17:05:02 +0000 Subject: [PATCH 002/151] [fr] french translation for 7-3-readme.md file (#600) * Fix small typo, links and reference fr assignment Fix small typo, links and reference french assignment * Fix: Add loc param and reference fr assignment Add localization parameter on quizzes links and reference fr assignment * fix localization param fix localization param * Fix image links and reference fr assignment * create 7-3-readme.fr.md file * Complete french translation for 7-bank-project/3-data README file --- .../3-data/translations/README.fr.md | 334 ++++++++++++++++++ 1 file changed, 334 insertions(+) create mode 100644 7-bank-project/3-data/translations/README.fr.md diff --git a/7-bank-project/3-data/translations/README.fr.md b/7-bank-project/3-data/translations/README.fr.md new file mode 100644 index 00000000..aee83c8f --- /dev/null +++ b/7-bank-project/3-data/translations/README.fr.md @@ -0,0 +1,334 @@ +# Créer une application bancaire Partie 3: Méthodes de récupération et d'utilisation des données + +## Quiz préalable + +[Quiz préalable](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/45?loc=fr) + +### Introduction + +Au cœur de chaque application Web, il y a des *données*. Les données peuvent prendre de nombreuses formes, mais leur objectif principal est toujours d'afficher des informations pour l'utilisateur. Les applications Web devenant de plus en plus interactives et complexes, la manière dont l'utilisateur accède aux informations et interagit avec elles est désormais un élément clé du développement Web. + +Dans cette leçon, nous verrons comment récupérer des données d'un serveur de manière asynchrone et utiliser ces données pour afficher des informations sur une page Web sans recharger le code HTML. + +### Prérequis + +Vous devez avoir créé la partie [Formulaire de connexion et d'inscription](../../2-forms/translations/README.fr.md) de l'application Web pour cette leçon. Vous devez également installer [Node.js](https://nodejs.org) et [exécuter l'API du serveur](../../api/translations/README.fr.md) localement afin d'obtenir les données de compte. + +Vous pouvez tester que le serveur fonctionne correctement en exécutant cette commande dans un terminal: + +```sh +curl http://localhost:5000/api +# -> devrait renvoyer "Bank API v1.0.0" comme résultat +``` + +--- + +## AJAX et la récupération de données + +Les sites Web traditionnels mettent à jour le contenu affiché lorsque l’utilisateur sélectionne un lien ou soumet des données à l’aide d’un formulaire, en rechargeant la page HTML complète. Chaque fois que de nouvelles données doivent être chargées, le serveur Web renvoie une toute nouvelle page HTML qui doit être traitée par le navigateur, interrompant l’action actuelle de l’utilisateur et limitant les interactions pendant le rechargement. Ce flux de travail est également appelé *Application multipage* ou *AMP*. + +![Mettre à jour le flux de travail dans une application multipage](../images/mpa.png) + +Lorsque les applications Web ont commencé à devenir plus complexes et interactives, une nouvelle technique appelée [AJAX (Asynchronous JavaScript and XML)](https://en.wikipedia.org/wiki/Ajax_(programming)) a émergé. Cette technique permet aux applications Web d’envoyer et de récupérer des données à partir d’un serveur de manière asynchrone à l’aide de JavaScript, sans avoir à recharger la page HTML, ce qui se traduit par des mises à jour plus rapides et des interactions utilisateur plus fluides. Lorsque de nouvelles données sont reçues du serveur, la page HTML actuelle peut également être mise à jour avec JavaScript à l’aide de l’API [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model). Au fil du temps, cette approche a évolué pour devenir ce qu’on appelle maintenant une [*Application d’une seule page* ou *SPA*](https://en.wikipedia.org/wiki/Single-page_application). + +![Mettre à jour le flux de travail dans une application d’une seule page](../images/spa.png) + +Lors de l’introduction d’AJAX, la seule API disponible pour récupérer des données de manière asynchrone était [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest). Mais les navigateurs modernes implémentent désormais également [l’API `Fetch`](https://developer.mozilla.org/docs/Web/API/Fetch_API) plus pratique et plus puissante, qui utilise des promesses et est mieux adaptée à la manipulation des données JSON. + +> Bien que tous les navigateurs modernes prennent en charge l’API Fetch, si vous souhaitez que votre application Web fonctionne sur des navigateurs hérités ou anciens, il est toujours judicieux de vérifier d’abord le [tableau de compatibilité sur caniuse.com](https://caniuse.com/fetch). + +### Tâche + +Dans [la leçon précédente](../../2-forms/translations/README.fr.md) nous avons implémenté le formulaire d’inscription pour créer un compte. Nous allons maintenant ajouter du code pour vous connecter à l’aide d’un compte existant et récupérer ses données. Ouvrez le fichier `app.js` et ajoutez une nouvelle fonction `login`: + +```js +async function login() { + const loginForm = document.getElementById('loginForm') + const user = loginForm.user.value; +} +``` + +Ici, nous commençons par récupérer l’élément de formulaire avec `getElementById()`, puis nous obtenons le nom d’utilisateur à partir de l’entrée avec `loginForm.user.value`. Chaque contrôle de formulaire est accessible par son nom (défini dans le code HTML à l’aide de l’attribut `name`) en tant que propriété du formulaire. + +De la même manière que nous avons fait pour l’enregistrement, nous allons créer une autre fonction pour effectuer une demande de serveur, mais cette fois pour récupérer les données du compte: + +```js +async function getAccount(user) { + try { + const response = await fetch('//localhost:5000/api/accounts/' + encodeURIComponent(user)); + return await response.json(); + } catch (error) { + return { error: error.message || 'Unknown error' }; + } +} +``` + +Nous utilisons l’API `fetch` pour demander les données de manière asynchrone au serveur, mais cette fois, nous n’avons pas besoin de paramètres supplémentaires autres que l’URL à appeler, car nous n’interrogeons que des données. Par défaut, `fetch` crée une requête HTTP [`GET`](https://developer.mozilla.org/docs/Web/HTTP/Methods/GET), ce que nous recherchons ici. + +✅ `encodeURIComponent()` est une fonction qui échappe les caractères spéciaux pour URL. Quels problèmes pourrions-nous avoir si nous n’appelons pas cette fonction et n’utilisons pas directement la valeur `user` dans l’URL? + +Mettons maintenant à jour notre fonction `login` pour utiliser `getAccount`: + +```js +async function login() { + const loginForm = document.getElementById('loginForm') + const user = loginForm.user.value; + const data = await getAccount(user); + + if (data.error) { + return console.log('loginError', data.error); + } + + account = data; + navigate('/dashboard'); +} +``` + +Tout d’abord, comme `getAccount` est une fonction asynchrone, nous devons la faire correspondre avec le mot-clé `await` pour attendre le résultat du serveur. Comme pour toute demande de serveur, nous devons également traiter les cas d’erreur. Pour l’instant, nous allons seulement ajouter un message de journal pour afficher l’erreur, et y revenir plus tard. + +Ensuite, nous devons stocker les données quelque part afin de pouvoir les utiliser plus tard pour afficher les informations du tableau de bord. Étant donné que la variable `account` n’existe pas encore, nous allons créer une variable globale pour elle en haut de notre fichier: + +```js +let account = null; +``` + +Une fois les données utilisateur enregistrées dans une variable, nous pouvons naviguer de la page *login* au *dashboard* en utilisant la fonction `navigate()` que nous avons déjà. + +Enfin, nous devons appeler notre fonction `login` lorsque le formulaire de login est soumis, en modifiant le HTML: + +```html +
+``` + +Vérifiez que tout fonctionne correctement en enregistrant un nouveau compte et en essayant de vous connecter à l’aide du même compte. + +Avant de passer à la partie suivante, nous pouvons également compléter la fonction `register` en ajoutant ceci au bas de la fonction: + +```js +account = result; +navigate('/dashboard'); +``` + +✅ Saviez-vous que par défaut, vous ne pouvez appeler les API du serveur qu’à partir du *même domaine et port* que la page Web que vous consultez? Il s’agit d’un mécanisme de sécurité appliqué par les navigateurs. Mais attendez, notre application web s’exécute sur 'localhost:3000' alors que l’API du serveur s’exécute sur `localhost:3000`, pourquoi cela fonctionne-t-il? En utilisant une technique appelée [Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/docs/Web/HTTP/CORS), il est possible d’effectuer des requêtes HTTP inter-origines si le serveur ajoute des en-têtes spéciaux à la réponse, ce qui permet des exceptions pour des domaines spécifiques. + +> En savoir plus sur les API en suivant cette [leçon](https://docs.microsoft.com/learn/modules/use-apis-discover-museum-art?WT.mc_id=academic-13441-cxa) + +## Mettre à jour le code HTML pour afficher les données + +Maintenant que nous avons les données utilisateur, nous devons mettre à jour le code HTML existant pour l’afficher. Nous savons déjà comment récupérer un élément du DOM en utilisant par exemple `document.getElementById()`. Une fois que vous avez un élément de base, voici quelques API que vous pouvez utiliser pour le modifier ou y ajouter des éléments enfants: + +- En utilisant la propriété [`textContent`](https://developer.mozilla.org/docs/Web/API/Node/textContent), vous pouvez modifier le texte d’un élément. Notez que la modification de cette valeur supprime tous les enfants de l’élément (le cas échéant) et le remplace par le texte fourni. En tant que tel, c’est aussi une méthode efficace pour supprimer tous les enfants d’un élément donné en lui attribuant une chaîne vide `''` à celui-ci. + +- En utilisant [`document.createElement()`](https://developer.mozilla.org/docs/Web/API/Document/createElement) avec la méthode [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append), vous pouvez créer et attacher un ou plusieurs nouveaux éléments enfants. + +✅ En utilisant la propriété [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML) d’un élément, il est également possible de modifier son contenu HTML, mais celui-ci doit être évité car il est vulnérable aux attaques [cross-site scripting (XSS)](https://developer.mozilla.org/docs/Glossary/Cross-site_scripting). + +### Tâche + +Avant de passer à l’écran du tableau de bord, il y a encore une chose que nous devrions faire sur la page *connexion*. Actuellement, si vous essayez de vous connecter avec un nom d’utilisateur qui n’existe pas, un message s’affiche dans la console, mais pour un utilisateur normal, rien ne change et vous ne savez pas ce qui se passe. + +Ajoutons un élément d’espace réservé dans le formulaire de connexion où nous pouvons afficher un message d’erreur si nécessaire. Un bon endroit serait juste avant la connexion ` +... +``` + +Cet élément `
` est vide, ce qui signifie que rien ne sera affiché à l’écran tant que nous n’y aurons pas ajouté du contenu. Nous lui donnons également un `id` afin que nous puissions le récupérer facilement avec JavaScript. + +Revenez au fichier `app.js` et créez une nouvelle fonction d’assistance `updateElement`: + +```js +function updateElement(id, text) { + const element = document.getElementById(id); + element.textContent = text; +} +``` + +Celui-ci est assez simple: selon un élément *id* et *text*, il mettra à jour le contenu textuel de l’élément DOM avec l'`id` correspondant. Utilisons cette méthode à la place du message d’erreur précédent dans la fonction `login`: + +```js +if (data.error) { + return updateElement('loginError', data.error); +} +``` + +Maintenant, si vous essayez de vous connecter avec un compte non valide, vous devriez voir quelque chose comme ceci: + +![Capture d’écran montrant le message d’erreur affiché lors de la connexion](../images/login-error.png) + +Maintenant, nous avons un texte d’erreur qui apparaît visuellement, mais si vous l’essayez avec un lecteur d’écran, vous remarquerez que rien n’est annoncé. Pour que le texte ajouté dynamiquement à une page soit annoncé par les lecteurs d’écran, il devra utiliser quelque chose appelé [Live Region](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Ici, nous allons utiliser un type spécifique de région en direct (live region) appelée alerte: + +```html + +``` + +Implémentez le même comportement pour les erreurs de la fonction `register` (n’oubliez pas de mettre à jour le code HTML). + +## Afficher les informations sur le tableau de bord + +En utilisant les mêmes techniques que nous venons de voir, nous nous occuperons également d’afficher les informations du compte sur la page du tableau de bord. + +Voici à quoi ressemble un objet de compte reçu du serveur: + +```json +{ + "user": "test", + "currency": "$", + "description": "Test account", + "balance": 75, + "transactions": [ + { "id": "1", "date": "2020-10-01", "object": "Pocket money", "amount": 50 }, + { "id": "2", "date": "2020-10-03", "object": "Book", "amount": -10 }, + { "id": "3", "date": "2020-10-04", "object": "Sandwich", "amount": -5 } + ], +} +``` + +> Remarque: pour vous faciliter la vie, vous pouvez utiliser le compte `test` préexistant qui est déjà rempli de données. + +### Tâche + +Commençons par remplacer la section "Balance" dans le code HTML pour ajouter des éléments d’espace réservé: + +```html +
+ Balance: +
+``` + +Nous ajouterons également une nouvelle section juste en dessous pour afficher la description du compte: + +```html +

+``` + +✅ Étant donné que la description du compte fonctionne comme un titre pour le contenu en dessous, elle est marquée sémantiquement comme un en-tête. Apprenez-en davantage sur l’importance de [structure de titre](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) pour l’accessibilité, et jetez un coup d’œil critique à la page pour déterminer ce qui pourrait être un autre titre. + +Ensuite, nous allons créer une nouvelle fonction dans `app.js` pour remplir l’espace réservé: + +```js +function updateDashboard() { + if (!account) { + return navigate('/login'); + } + + updateElement('description', account.description); + updateElement('balance', account.balance.toFixed(2)); + updateElement('currency', account.currency); +} +``` + +Tout d’abord, nous vérifions que nous avons les données de compte dont nous avons besoin avant d’aller plus loin. Ensuite, nous utilisons la fonction `updateElement()` que nous avons créée précédemment pour mettre à jour le code HTML. + +> Pour rendre l’affichage de la balance plus joli, nous utilisons la méthode [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) pour forcer l’affichage de la valeur avec 2 chiffres après la virgule. + +Maintenant, nous devons appeler notre fonction `updateDashboard()` chaque fois que le tableau de bord est chargé. Si vous avez déjà terminé le [devoir de la leçon 1](../../1-template-route/translations/README.fr.md) cela devrait être simple, sinon vous pouvez utiliser l’implémentation suivante. + +Ajoutez ce code à la fin de la fonction `updateRoute()`: + +```js +if (typeof route.init === 'function') { + route.init(); +} +``` + +Et mettez à jour la définition des itinéraires avec: + +```js +const routes = { + '/login': { templateId: 'login' }, + '/dashboard': { templateId: 'dashboard', init: updateDashboard } +}; +``` + +Avec ce changement, chaque fois que la page du tableau de bord est affichée, la fonction `updateDashboard()` est appelée. Après une connexion, vous devriez alors être en mesure de voir le solde du compte, la devise et la description. + +## Créer dynamiquement des lignes de tableau avec des modèles HTML + +Dans la [première leçon](../../1-template-route/translations/README.fr.md) nous avons utilisé des modèles HTML avec la méthode [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) pour implémenter la navigation dans notre application. Les modèles peuvent également être plus petits et utilisés pour remplir dynamiquement des parties répétitives d’une page. + +Nous utiliserons une approche similaire pour afficher la liste des transactions dans le tableau HTML. + +### Tâche + +Ajoutez un nouveau modèle dans le code HTML ``: + +```html + +``` + +Ce modèle représente une seule ligne de tableau, avec les 3 colonnes que nous voulons remplir: *date*, *object* et *amount* d’une transaction. + +Ensuite, ajoutez cette propriété `id` à l’élément `` du tableau dans le modèle de tableau de bord pour faciliter la recherche à l’aide de JavaScript: + +```html + +``` + +Notre HTML est prêt, passons au code JavaScript et créons une nouvelle fonction `createTransactionRow`: + +```js +function createTransactionRow(transaction) { + const template = document.getElementById('transaction'); + const transactionRow = template.content.cloneNode(true); + const tr = transactionRow.querySelector('tr'); + tr.children[0].textContent = transaction.date; + tr.children[1].textContent = transaction.object; + tr.children[2].textContent = transaction.amount.toFixed(2); + return transactionRow; +} +``` + +Cette fonction fait exactement ce que ses noms impliquent: en utilisant le modèle que nous avons créé précédemment, elle crée une nouvelle ligne de tableau et remplit son contenu à l’aide de données de transaction. Nous l’utiliserons dans notre fonction `updateDashboard()` pour remplir la table: + +```js +const transactionsRows = document.createDocumentFragment(); +for (const transaction of account.transactions) { + const transactionRow = createTransactionRow(transaction); + transactionsRows.appendChild(transactionRow); +} +updateElement('transactions', transactionsRows); +``` + +Ici, nous utilisons la méthode [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment) qui crée un nouveau fragment DOM sur lequel nous pouvons travailler, avant de finalement l’attacher à notre tableau HTML. + +Il reste encore une chose à faire avant que ce code puisse fonctionner, car notre fonction `updateElement()` ne prend actuellement en charge que le contenu texte. Changeons un peu son code: + +```js +function updateElement(id, textOrNode) { + const element = document.getElementById(id); + element.textContent = ''; // Removes all children + element.append(textOrNode); +} +``` + +Nous utilisons la méthode [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) car elle permet d’attacher du texte ou des [nœuds DOM](https://developer.mozilla.org/docs/Web/API/Node) à un élément parent, ce qui est parfait pour tous nos cas d’utilisation. + +Si vous essayez d’utiliser le compte `test` pour vous connecter, vous devriez maintenant voir une liste de transactions sur le tableau de bord 🎉. + +--- + +## 🚀 Challenge + +Travaillez ensemble pour que la page du tableau de bord ressemble à une véritable application bancaire. Si vous avez déjà stylisé votre application, essayez d'utiliser des [requêtes multimédias](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) pour créer un [design réactif](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks) qui fonctionne bien sur les ordinateurs de bureau et les appareils mobiles. + +Voici un exemple de page de tableau de bord stylisée: + +![Capture d'écran d'un exemple de résultat du tableau de bord après le style](../../images/screen2.png) + +## Quiz de validation des connaissances + +[Quiz de validation des connaissances](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/46?loc=fr) + +## Affectation + +[Refactorisez et commentez votre code](assignment.fr.md) From 1a9a8a4b357118afae85554a1960b25d25987b1c Mon Sep 17 00:00:00 2001 From: "Charles Emmanuel S. Ndiaye" Date: Sun, 13 Feb 2022 17:05:24 +0000 Subject: [PATCH 003/151] [fr] french translation for 7-4-readme.md file (#601) * Fix small typo, links and reference fr assignment Fix small typo, links and reference french assignment * Fix: Add loc param and reference fr assignment Add localization parameter on quizzes links and reference fr assignment * fix localization param fix localization param * Fix image links and reference fr assignment * french translation of 7-4-readme done --- .../translations/README.fr.md | 281 ++++++++++++++++++ 1 file changed, 281 insertions(+) create mode 100644 7-bank-project/4-state-management/translations/README.fr.md diff --git a/7-bank-project/4-state-management/translations/README.fr.md b/7-bank-project/4-state-management/translations/README.fr.md new file mode 100644 index 00000000..76b5e04d --- /dev/null +++ b/7-bank-project/4-state-management/translations/README.fr.md @@ -0,0 +1,281 @@ +# Créer une application bancaire Partie 4: Concepts de gestion d'état + +## Quiz préalable + +[Quiz préalable](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/47?loc=fr) + +### Introduction + +Au fur et à mesure qu’une application Web se développe, il devient difficile de suivre tous les flux de données. Quel code obtient les données, quelle page les consomme, où et quand doit-il être mis à jour... il est facile de se retrouver avec un code désordonné et difficile à maintenir. Cela est particulièrement vrai lorsque vous devez partager des données entre différentes pages de votre application, par exemple des données utilisateur. Le concept de *gestion de l’état* a toujours existé dans toutes sortes de programmes, mais comme les applications Web ne cessent de croître en complexité, c’est maintenant un point clé à prendre en compte pendant le développement. + +Dans cette dernière partie, nous examinerons l’application que nous avons créée pour repenser la façon dont l’état est géré, permettant la prise en charge de l’actualisation du navigateur à tout moment et la persistance des données entre les sessions utilisateur. + +### Prérequis + +Vous devez avoir terminé la [récupération des données](../../3-data/translations/README.fr.md) de l’application web pour cette leçon. Vous devez également installer [Node.js](https://nodejs.org) et [exécuter l’API du serveur](../../api/translations/README.fr.md) localement afin que vous puissiez gérer les données du compte. + +Vous pouvez tester que le serveur fonctionne correctement en exécutant cette commande dans un terminal: + +```sh +curl http://localhost:5000/api +# -> doit renvoyer "Bank API v1.0.0" comme résultat +``` + +--- + +## Repenser la gestion des états + +Dans la [leçon précédente](../../3-data/translations/README.fr.md), nous avons introduit un concept basique d’état dans notre application avec la variable globale `account` qui contient les données bancaires de l’utilisateur actuellement connecté. Cependant, notre mise en œuvre actuelle présente certains défauts. Essayez d’actualiser la page lorsque vous êtes sur le tableau de bord. Que se passe-t-il? + +Il y a 3 problèmes avec le code actuel: + +- L’état n’est pas persistant, car une actualisation du navigateur vous ramène à la page de connexion. +- Il existe plusieurs fonctions qui modifient l’état. Au fur et à mesure que l’application se développe, il peut être difficile de suivre les modifications et il est facile d’oublier d’en mettre à jour une. +- L’état n’est pas nettoyé, donc lorsque vous cliquez sur *Logout* les données du compte sont toujours là même si vous êtes sur la page de connexion. + +Nous pourrions mettre à jour notre code pour résoudre ces problèmes un par un, mais cela créerait plus de duplication de code et rendrait l’application plus complexe et difficile à maintenir. Ou nous pourrions faire une pause de quelques minutes et repenser notre stratégie. + +> Quels problèmes essayons-nous vraiment de résoudre ici? + +[La gestion de l’état](https://en.wikipedia.org/wiki/State_management) consiste à trouver une bonne approche pour résoudre ces deux problèmes particuliers: + +- Comment rendre compréhensibles les flux de données dans une application? +- Comment garder les données d’état toujours synchronisées avec l’interface utilisateur (et vice versa)? + +Une fois que vous vous êtes occupé de ceux-ci, tous les autres problèmes que vous pourriez avoir peuvent être déjà résolus ou sont devenus plus faciles à résoudre. Il existe de nombreuses approches possibles pour résoudre ces problèmes, mais nous opterons pour une solution commune qui consiste à **centraliser les données et les moyens de les modifier**. Les flux de données se dérouleraient comme suit: + +![Schéma montrant les flux de données entre le code HTML, les actions de l’utilisateur et l’état](../images/data-flow.png) + +> Nous ne couvrirons pas ici la partie où les données déclenchent automatiquement la mise à jour de la vue, car elle est liée à des concepts plus avancés de [Programmation réactive](https://en.wikipedia.org/wiki/Reactive_programming). C’est un bon sujet de suivi si vous êtes prêt à plonger profondément. + +✅ Il existe de nombreuses bibliothèques avec différentes approches de la gestion des États, [Redux](https://redux.js.org) étant une option populaire. Jetez un coup d’œil aux concepts et aux modèles utilisés, car c’est souvent un bon moyen d’apprendre quels problèmes potentiels vous pouvez rencontrer dans les grandes applications Web et comment ils peuvent être résolus. + +### Tâche + +Nous allons commencer par un peu de refactorisation. Remplacer la déclaration `account`: + +```js +let account = null; +``` + +Par: + +```js +let state = { + account: null +}; +``` + +L’idée est de *centraliser* toutes nos données d’application dans un seul objet d’état. Nous n’avons que le `account` pour l’instant dans l’état, donc cela ne change pas beaucoup, mais cela crée un chemin pour les évolutions. + +Nous devons également mettre à jour les fonctions en l’utilisant. Dans les fonctions `register()` et `login()`, remplacez `account = ...` par `state.account = ...`; + +En haut de la fonction `updateDashboard()`, ajoutez cette ligne: + +```js +const account = state.account; +``` + +Ce refactoring en lui-même n’a pas apporté beaucoup d’améliorations, mais l’idée était de jeter les bases des prochains changements. + +## Suivre les modifications de données + +Maintenant que nous avons mis en place l’objet `state` pour stocker nos données, l’étape suivante consiste à centraliser les mises à jour. L’objectif est de faciliter le suivi des changements et de leur moment. + +Pour éviter que des modifications soient apportées à l’objet `state`, il est également recommandé de le considérer comme [*immuable*](https://en.wikipedia.org/wiki/Immutable_object), ce qui signifie qu’il ne peut pas être modifié du tout. Cela signifie également que vous devez créer un nouvel objet d’état si vous souhaitez y modifier quoi que ce soit. Ce faisant, vous créez une protection contre les [effets secondaires](https://en.wikipedia.org/wiki/Side_effect_(computer_science)) potentiellement indésirables et ouvrez des possibilités de nouvelles fonctionnalités dans votre application, telles que la mise en œuvre de l’annulation/rétablissement, tout en facilitant le débogage. Par exemple, vous pouvez consigner chaque modification apportée à l’état et conserver un historique des modifications pour comprendre la source d’un bogue. + +En JavaScript, vous pouvez utiliser [`Object.freeze()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) pour créer une version immuable d’un objet. Si vous essayez d’apporter des modifications à un objet immuable, une exception sera déclenchée. + +✅ Connaissez-vous la différence entre un objet immuable *peu profond* et un objet immuable *profond*? Vous pouvez en apprendre plus sur ce sujet [ici](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze). + +### Tâche + +Créons une nouvelle fonction `updateState()`: + +```js +function updateState(property, newData) { + state = Object.freeze({ + ...state, + [property]: newData + }); +} +``` + +Dans cette fonction, nous créons un nouvel objet d’état et copions les données de l’état précédent à l’aide de [*l’opérateur spread (`...`)*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals). Ensuite, nous remplaçons une propriété particulière de l’objet d’état par les nouvelles données en utilisant la [notation entre crochets](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties) `[property]` pour l’affectation. Enfin, nous verrouillons l’objet pour empêcher les modifications en utilisant `Object.freeze()`. Nous n’avons que la propriété `account` stockée dans l’état pour l’instant, mais avec cette approche, vous pouvez ajouter autant de propriétés que nécessaire dans l’état. + +Nous allons également mettre à jour l’initialisation `state` pour nous assurer que l’état initial est également gelé: + +```js +let state = Object.freeze({ + account: null +}); +``` + +Après cela, mettez à jour la fonction `register` en remplaçant l’affectation `state.account = result;` par: + +```js +updateState('account', result); +``` + +Faites de même avec la fonction `login`, en remplaçant `state.account = data;` par: + +```js +updateState('account', data); +``` + +Nous allons maintenant saisir l’occasion de résoudre le problème des données de compte qui ne sont pas effacées lorsque l’utilisateur clique sur *Logout*. + +Créez une nouvelle fonction `logout()`: + +```js +function logout() { + updateState('account', null); + navigate('/login'); +} +``` + +Dans `updateDashboard()`, remplacez la redirection `return navigate('/login');` par `return logout()`; + +Essayez d’enregistrer un nouveau compte, de vous déconnecter et de vous reconnecter pour vérifier que tout fonctionne toujours correctement. + +> Conseil: vous pouvez jeter un coup d’œil à tous les changements d’état en ajoutant `console.log(state)` au bas de `updateState()` et en ouvrant la console dans les outils de développement de votre navigateur. + +## Conserver l’état + +La plupart des applications Web doivent conserver les données pour pouvoir fonctionner correctement. Toutes les données critiques sont généralement stockées dans une base de données et accessibles via une API de serveur, comme les données du compte utilisateur dans notre cas. Mais parfois, il est également intéressant de conserver certaines données sur l’application cliente qui s’exécute dans votre navigateur, pour une meilleure expérience utilisateur ou pour améliorer les performances de chargement. + +Lorsque vous souhaitez conserver des données dans votre navigateur, vous devez vous poser quelques questions importantes: + +- *Les données sont-elles sensibles?* Vous devez éviter de stocker des données sensibles sur le client, telles que les mots de passe des utilisateurs. +- *Pendant combien de temps devez-vous conserver ces données?* Prévoyez-vous d’accéder à ces données uniquement pour la session en cours ou souhaitez-vous qu’elles soient stockées pour toujours? + +Il existe plusieurs façons de stocker des informations dans une application web, en fonction de ce que vous souhaitez réaliser. Par exemple, vous pouvez utiliser les URL pour stocker une requête de recherche et la rendre partageable entre les utilisateurs. Vous pouvez également utiliser des [cookies HTTP](https://developer.mozilla.org/docs/Web/HTTP/Cookies) si les données doivent être partagées avec le serveur, comme les informations d'[authentification](https://en.wikipedia.org/wiki/Authentication). + +Une autre option consiste à utiliser l’une des nombreuses API de navigateur pour stocker des données. Deux d’entre eux sont particulièrement intéressants: + +- [`localStorage`](https://developer.mozilla.org/docs/Web/API/Window/localStorage): un [Key/Value store](https://en.wikipedia.org/wiki/Key%E2%80%93value_database) permettant de conserver des données spécifiques au site web actuel sur différentes sessions. Les données qui y sont enregistrées n’expirent jamais. +- [`sessionStorage`](https://developer.mozilla.org/docs/Web/API/Window/sessionStorage): celui-ci fonctionne de la même manière que `localStorage` sauf que les données qui y sont stockées sont effacées à la fin de la session (lorsque le navigateur est fermé). + +Notez que ces deux API autorisent uniquement le stockage de [chaînes](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String). Si vous souhaitez stocker des objets complexes, vous devrez les sérialiser au format [JSON](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON) à l’aide de [`JSON.stringify()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify). + +✅ Si vous souhaitez créer une application web qui ne fonctionne pas avec un serveur, il est également possible de créer une base de données sur le client à l’aide de [l’API `IndexedDB`](https://developer.mozilla.org/docs/Web/API/IndexedDB_API). Celui-ci est réservé aux cas d’utilisation avancés ou si vous avez besoin de stocker une quantité importante de données, car il est plus complexe à utiliser. + +### Tâche + +Nous voulons que nos utilisateurs restent connectés jusqu’à ce qu’ils cliquent explicitement sur le bouton *Logout*, nous utiliserons donc `localStorage` pour stocker les données du compte. Tout d’abord, définissons une clé que nous utiliserons pour stocker nos données. + +```js +const storageKey = 'savedAccount'; +``` + +Ajoutez ensuite cette ligne à la fin de la fonction `updateState()`: + +```js +localStorage.setItem(storageKey, JSON.stringify(state.account)); +``` + +Avec cela, les données du compte utilisateur seront conservées et toujours à jour car nous avons centralisé précédemment toutes nos mises à jour d’état. C’est là que nous commençons à bénéficier de tous nos refactors précédents 🙂. + +Au fur et à mesure que les données sont enregistrées, nous devons également nous occuper de les restaurer lorsque l’application est chargée. Puisque nous allons commencer à avoir plus de code d’initialisation, il peut être judicieux de créer une nouvelle fonction `init`, qui inclut également notre code précédent au bas de `app.js`: + +```js +function init() { + const savedAccount = localStorage.getItem(storageKey); + if (savedAccount) { + updateState('account', JSON.parse(savedAccount)); + } + + // Notre précédent code d'initialisation + window.onpopstate = () => updateRoute(); + updateRoute(); +} + +init(); +``` + +Ici, nous récupérons les données enregistrées, et s’il y en a, nous mettons à jour l’état en conséquence. Il est important de le faire *avant* de mettre à jour l’itinéraire, car il peut y avoir du code s’appuyant sur l’état lors de la mise à jour de la page. + +Nous pouvons également faire de la page *Dashboard* notre page par défaut de l’application, car nous conservons maintenant les données du compte. Si aucune donnée n’est trouvée, le tableau de bord se charge de rediriger vers la page *Login* de toute façon. Dans `updateRoute()`, remplacez le secours `return navigate('/login');` par `return navigate('/dashboard');`. + +Maintenant, connectez-vous à l’application et essayez d’actualiser la page. Vous devez rester sur le tableau de bord. Avec cette mise à jour, nous avons résolu tous nos problèmes initiaux... + +## Actualiser les données + +... Mais nous pourrions aussi en avoir créé un nouveau. Oups! + +Accédez au tableau de bord à l’aide du compte `test`, puis exécutez cette commande sur un terminal pour créer une nouvelle transaction: + +```sh +curl --request POST \ + --header "Content-Type: application/json" \ + --data "{ \"date\": \"2020-07-24\", \"object\": \"Bought book\", \"amount\": -20 }" \ + http://localhost:5000/api/accounts/test/transactions +``` + +Essayez d’actualiser la page du tableau de bord dans le navigateur maintenant. Que se passe-t-il? Voyez-vous la nouvelle transaction? + +L’état est conservé indéfiniment grâce au `localStorage`, mais cela signifie également qu’il n’est jamais mis à jour tant que vous ne vous déconnectez pas de l’application et que vous ne vous connectez pas à nouveau! + +Une stratégie possible pour résoudre ce problème consiste à recharger les données du compte chaque fois que le tableau de bord est chargé, afin d’éviter les données de blocage. + +### Tâche + +Créez une nouvelle fonction `updateAccountData`: + +```js +async function updateAccountData() { + const account = state.account; + if (!account) { + return logout(); + } + + const data = await getAccount(account.user); + if (data.error) { + return logout(); + } + + updateState('account', data); +} +``` + +Cette méthode vérifie que nous sommes actuellement connectés puis recharge les données du compte à partir du serveur. + +Créez une autre fonction nommée `refresh`: + +```js +async function refresh() { + await updateAccountData(); + updateDashboard(); +} +``` + +Celui-ci met à jour les données du compte, puis se charge de mettre à jour le code HTML de la page du tableau de bord. C’est ce que nous devons appeler lorsque l’itinéraire du tableau de bord est chargé. Mettez à jour la définition d’itinéraire avec: + +```js +const routes = { + '/login': { templateId: 'login' }, + '/dashboard': { templateId: 'dashboard', init: refresh } +}; +``` + +Essayez de recharger le tableau de bord maintenant, il devrait afficher les données de compte mises à jour. + +--- + +## 🚀 Challenge + +Maintenant que nous rechargeons les données du compte chaque fois que le tableau de bord est chargé, pensez-vous que nous devons encore conserver *toutes les données du compte*? + +Essayez de travailler ensemble pour modifier ce qui est enregistré et chargé à partir de `localStorage` pour n’inclure que ce qui est absolument nécessaire pour que l’application fonctionne. + +## Quiz de validation des connaissances + +[Quiz de validation des connaissances](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/48?loc=fr) + +## Affectation + +[Implémenter la boîte de dialogue "Ajouter une transaction"](assignment.fr.md) + +Voici un exemple de résultat après avoir terminé l’affectation: + +![Capture d’écran montrant un exemple de boîte de dialogue "Ajouter une transaction"](../images/dialog.png) From bce7ff49538738ae70740b680976ceaeda5fe327 Mon Sep 17 00:00:00 2001 From: "Charles Emmanuel S. Ndiaye" Date: Mon, 14 Feb 2022 15:19:28 +0000 Subject: [PATCH 004/151] Suggest french translation refactor for Base readme (#602) * Fix small typo, links and reference fr assignment Fix small typo, links and reference french assignment * Fix: Add loc param and reference fr assignment Add localization parameter on quizzes links and reference fr assignment * fix localization param fix localization param * Fix image links and reference fr assignment * Refactor and update of the base readme french translation * Fix typos and broken links from #602 review Fix typos and broken links according to @jlooper review --- translations/README.fr.md | 133 +++++++++++++++++--------------------- 1 file changed, 61 insertions(+), 72 deletions(-) diff --git a/translations/README.fr.md b/translations/README.fr.md index b74e950b..ab7b5a85 100644 --- a/translations/README.fr.md +++ b/translations/README.fr.md @@ -8,108 +8,97 @@ [![Forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/) [![Stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/) +[![Open in Visual Studio Code](https://open.vscode.dev/badges/open-in-vscode.svg)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) # Développement Web pour débutants - Programme -Azure Cloud Advocates de Microsoft sont heureux de vous offrir un cours de 24 leçons portant sur les bases du HTML, CSS et JavaScript. -Chaque leçon comporte des instructions, des projets et des quizs. -Grâce à la pédagogie basée sur la pratique, vous pouvez apprendre tout en créant des interfaces. -Ce qui représente une méthode qui consiste à acquérir des compétances et s'en rappelant !. +Azure Cloud Advocates de Microsoft ont le plaisir de vous proposer un programme de 12 semaines et 24 leçons sur les bases de JavaScript, CSS et HTML. Chaque leçon comprend des quiz avant et après la leçon, des instructions écrites pour terminer la leçon, une solution, un devoir et plus encore. Notre pédagogie basée sur des projets vous permet d’apprendre tout en construisant, un moyen éprouvé pour que de nouvelles compétences puissent 'coller'. -**Un très grand merci à Jen Looper, Chris Noring, Christopher Harrison, Jasmine Greenaway, Yohan Lasorsa, Floor Drees, et Tomomi Imura!** +**Un grand merci à nos auteurs Jen Looper, Chris Noring, Christopher Harrison, Jasmine Greenaway, Yohan Lasorsa, Floor Drees et l’artiste de sketchnote Tomomi Imura!** # Pour commencer -> **Instituteurs**, on vous a préparé des [suggestions](for-teachers.md). On attend votre retour sur ce cours au [forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! +> **Instituteurs**, nous avons [inclus quelques suggestions](for-teachers.fr.md) sur la façon d’utiliser ce programme. Nous aimerions avoir vos commentaires [dans notre forum de discussion](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! -> **Elèves**, pour en bénéficier de ce cours le plus grand possible. Effectuer un Fork et compléter les exercices, réaliser les quizs! -N'oubliez pas de créer les projets posant sur ce que vous venez d'apprendre puis comparez-les avec les éléments de réponse. -Vous pouvez travailler en groupe, ce qui représente un bon moyen d'apprentissage. -Vous trouverez autres sujets complétants ce cours sur [Microsoft Learn](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-13441-cxa). +> **Elèves**, pour utiliser ce programme par vous-même, effectuer un Fork l’ensemble du dépôt et compléter les exercices par vous-même, en commençant par un quiz préalable, puis en lisant le cours et en complétant le reste des activités. Essayez de créer les projets en comprenant les leçons plutôt que de copier le code de la solution; toutefois, ce code est disponible dans les dossiers /solutions de chaque leçon orientée projet. Une autre idée serait de former un groupe d’étude avec des amis et de parcourir le contenu ensemble. Pour une étude plus approfondie, nous recommandons [Microsoft Learn](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-13441-cxa) et en regardant les vidéos mentionnées ci-dessous. -[![Bande-annonce du cours](screenshot.png)](https://youtube.com/watch?v=R1wrdtmBSII "Bande-annonce du cours") +[![Vidéo promotionnelle](../images/web.gif)](https://youtube.com/watch?v=R1wrdtmBSII "Vidéo promotionnelle") -> 🎥 Cliquez sur l'image pour visualiser une vidéo à propos des créateurs de ce cours ! +Gif par [Mohit Jaisal](https://linkedin.com/in/mohitjaisal) -## Pedagogie +> 🎥 Cliquez sur l’image ci-dessus pour une vidéo sur le projet et les personnes qui l’ont créé! -On a choisi deux pédagogies pour créer ce cours. -En premier lieu, on a veillé à ce qu'il soit basé sur un projet et en réalité, vous auriez à la fin de ce cours codé un jeu de typing, une extension web, une application bancaire et d'autres intéressants projets. -En dernier lieu, on a mis à votre disposition des quizs pour vous évaluez vous-même. -Et à la fin, vous auriez appris beaucoup de choses à propos du HTML, CSS et Javascript. Et vous voilà, un développeur web 🎓 ! +## Pédagogie -> En 12 semaines, vous pourrez réaliser cet exploit (de devenir un développeur web 🎓) +Nous avons choisi deux principes pédagogiques lors de l’élaboration de ce programme : s’assurer qu’il est basé sur des projets et qu’il comprend des quiz fréquents. À la fin de cette série, les élèves auront construit un jeu de dactylographie, un terrarium virtuel, une extension de navigateur 'verte', un jeu de type 'space invaders' et une application bancaire de type professionnel, et auront appris les bases de JavaScript, HTML et CSS ainsi que la chaîne d’outils moderne du développeur Web d’aujourd’hui. -> 🎓 Vous pouvez découvrir les premières leçons en tant que [Learn Path Programme](https://docs.microsoft.com/learn/paths/web-development-101?WT.mc_id=academic-13441-cxa) de Microsoft Learn! +> 🎓 Vous pouvez prendre les premières leçons de ce programme en tant que [Parcours d’apprentissage](https://docs.microsoft.com/learn/paths/web-development-101?WT.mc_id=academic-13441-cxa) sur Microsoft Learn! -Pour s'assurer du bon contenu fourni, on a mis à votre disposition un pack de bases du Javascript contenant une introduction complète à ce langage de programmation [accessible ici](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript?WT.mc_id=academic-13441-cxa). -Il s'agit d'une collection de vidéos faites par les créateurs de ce cours. +En veillant à ce que le contenu s’aligne sur les projets, le processus est rendu plus attrayant pour les étudiants et la rétention des concepts sera augmentée. Nous avons également écrit plusieurs leçons de démarrage sur les bases de JavaScript pour introduire des concepts, associées à une vidéo de la "[Série pour débutants à : JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript?WT.mc_id=academic-13441-cxa)" une collection de tutoriels vidéo, dont certains auteurs ont contribué à ce programme. -En plus, les quizs disponibles sont des quizs qui évaluent les compétences acquises de la leçon précédente et d'autres qui évaluent les compétences acquises dans la leçon actuelle. +En outre, un quiz à faible enjeu avant un cours définit l’intention de l’élève d’apprendre un sujet, tandis qu’un deuxième quiz après le cours assure une rétention supplémentaire. Ce programme a été conçu pour être flexible et amusant et peut être pris en tout ou en partie. Les projets commencent petit et deviennent de plus en plus complexes à la fin du cycle de 12 semaines. -On rappelle que ce cours comporte le HTML, CSS et le Javascript. Donc, on n'a pas traité les Frameworks Javascript comme le React. -Mais voici une série de vidéos éducatives à suivre après avoir complété ce cours, elle traite le Node.js en tant qu'un Framework Javascript. -Accessible [ici](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs?WT.mc_id=academic-13441-cxa) +Bien que nous ayons délibérément évité d’introduire des frameworks JavaScript afin de nous concentrer sur les compétences de base nécessaires en tant que développeur Web avant d’adopter un framework, une bonne prochaine étape pour compléter ce programme serait d’en apprendre davantage sur Node.js via une autre collection de vidéos: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs?WT.mc_id=academic-13441-cxa)". -> Lisez [le Code of Conduct](CODE_OF_CONDUCT.md), [le guide pour contribuer](CONTRIBUTING.md), et [le guide de la traduction du cours](TRANSLATIONS.md). -Vos retours sont vivement acceptés. +> Trouvez nos directives de [Code de conduite](../CODE_OF_CONDUCT.md), pour [Contribuer](../CONTRIBUTING.md) et de [Traduction](../TRANSLATIONS.md). Vos commentaires constructifs sont les bienvenus! -> -## Chaque leçon comporte : +## Chaque leçon comprend : -- Un sketchnote -- Une vidéo supplémentaire -- Quiz des dernières compétences acquises -- Les traces écrites -- Un challenge -- Une explication **très détaillée** pour réussir le challenge -- Ressources -- Des exercices -- Quiz sur ce que l'élève a appris +- note de croquis facultative (sketchnote) +- vidéo supplémentaire en option +- quiz préalable avant la leçon +- leçon écrite +- pour les leçons basées sur un projet, des guides étape par étape sur la façon de construire le projet +- vérifications des connaissances +- un défi +- lecture supplémentaire +- affectation +- quiz de validation des connaissances -> **Les quizs**: Les quizs sont disponibles [ici](https://happy-mud-02d95f10f.azurestaticapps.net/), un total de 48 quizs avec 3 questions chacun. -Ils sont accessible via le dossier `quiz-app`. +> **Une note sur les quiz**: Tous les quiz sont contenus [dans cette application](https://happy-mud-02d95f10f.azurestaticapps.net/), pour un total de 48 quiz de trois questions chacun. Ils sont liés à partir des leçons, mais l’application de quiz peut être exécutée localement; suivez les instructions dans le dossier `quiz-app`. Ils sont progressivement localisés. -## Lessons +## Leçons -| | Nom du projet | Compétences à acquérir | Objectifs | Leçon | Auteur | + +| | Nom du projet | Compétences à acquérir | Objectifs | Leçon liée | Auteur | | :---: | :------------------------------------------------------: | :--------------------------------------------------------------------: | --------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------: | :---------------------: | -| 01 | Pour commencer | Introduction à la programmation | Savoir les bases de quelques langages de programmation et leur utilité dans la création de solutions informatiques | [Introduction à la programmation](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | -| 02 | Pour commencer | Les bases de Github et le travail au groupe | Apprendre comment utiliser GitHub et contribuer à des projets | [Introduction aux bases de GitHub](/1-getting-started-lessons/2-github-basics/README.md) | Floor | -| 03 | Pour commencer | Accessibilité | Apprendre les bases de l'accessibilité au Web | [Accessibility Fundamentals](/1-getting-started-lessons/3-accessibility/README.md) | Christopher | -| 04 | JS Basics | JavaScript Data Types | The basics of JavaScript data types | [Data Types](/2-js-basics/1-data-types/README.md) | Jasmine | -| 05 | JS Basics | Functions and Methods | Learn about functions and methods to manage an application's logic flow | [Functions and Methods](/2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher | -| 06 | JS Basics | Making Decisions with JS | Learn how to create conditions in your code using decision-making methods | [Making Decisions](/2-js-basics/3-making-decisions/README.md) | Jasmine | -| 07 | JS Basics | Arrays and Loops | Work with data using arrays and loops in JavaScript | [Arrays and Loops](/2-js-basics/4-arrays-loops/README.md) | Jasmine | -| 08 | [Terrarium](/3-terrarium/solution/README.md) | HTML in Practice | Build the HTML to create an online terrarium, focusing on building a layout | [Introduction to HTML](/3-terrarium/1-intro-to-html/README.md) | Jen | -| 09 | [Terrarium](/3-terrarium/solution/README.md) | CSS in Practice | Build the CSS to style the online terrarium, focusing on the basics of CSS including making the page responsive | [Introduction to CSS](/3-terrarium/2-intro-to-css/README.md) | Jen | -| 10 | [Terrarium](/3-terrarium/solution/README.md) | JavaScript Closures, DOM manipulation | Build the JavaScript to make the terrarium function as a drag/drop interface, focusing on closures and DOM manipulation | [JavaScript Closures, DOM manipulation](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | -| 11 | [Typing Game](/4-typing-game/solution/README.md) | Build a Typing Game | Learn how to use keyboard events to drive the logic of your JavaScript app | [Event-Driven Programming](/4-typing-game/typing-game/README.md) | Christopher | -| 12 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Working with Browsers | Learn how browsers work, their history, and how to scaffold the first elements of a browser extension | [About Browsers](/5-browser-extension/1-about-browsers/README.md) | Jen | -| 13 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Building a form, calling an API and storing variables in local storage | Build the JavaScript elements of your browser extension to call an API using variables stored in local storage | [APIs, Forms, and Local Storage](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | -| 14 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Background processes in the browser, web performance | Use the browser's background processes to manage the extension's icon; learn about web performance and some optimizations to make | [Background Tasks and Performance](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | -| 15 | [Jeu de l'espace](/6-space-game/solution/README.md) | Développement avancé d'un jeu en Javascript | Savoir les bases de l'**Inheritance** avec les **Classes and Composition et les Pub/Sub pattern**, afin de créer un jeu | [Introduction au développement avancé d'un jeu en Javascript](/6-space-game/1-introduction/README.md) | Chris | -| 16 | [Jeu de l'espace](/6-space-game/solution/README.md) | Les Canvas | Savoir à propos du Canvas API, utilisé pour dessiner des éléments | [Dessiner des Canvas](/6-space-game/2-drawing-to-canvas/README.md) | Chris | -| 17 | [Jeu de l'espace](/6-space-game/solution/README.md) | Déplacer les éléments | En utilisant les données cartésiennes et le Canvas API | [Moving Elements Around](/6-space-game/3-moving-elements-around/README.md) | Chris | -| 18 | [Jeu de l'espace](/6-space-game/solution/README.md) | Collision detection | Make elements collide and react to each other using keypresses and provide a cooldown function to ensure performance of the game | [Collision Detection](/6-space-game/4-collision-detection/README.md) | Chris | -| 19 | [Jeu de l'espace](/6-space-game/solution/README.md) | Keeping score | Perform math calculations based on the game's status and performance | [Keeping Score](/6-space-game/5-keeping-score/README.md) | Chris | -| 20 | [Jeu de l'espace](/6-space-game/solution/README.md) | Commencer et finir un jeu | Savoir manipuler les variables, démarrer un jeu et mettre fin. | [Fin Condition](/6-space-game/6-end-condition/README.md) | Chris | -| 21 | [Application bancaire](/7-bank-project/solution/README.md) | HTML Templates et Routes dans une application web | Savoir l'utilité des Templates et Routes dans la gestion d'un site web multi-pages. | [HTML Templates et Routes](/7-bank-project/1-template-route/README.md) | Yohan | -| 22 | [Application bancaire](/7-bank-project/solution/README.md) | Créer un formulaire de connexion | Apprendre le fonctionnement d'un formulaire et la vérification des données saisies | [Formulaires](/7-bank-project/2-forms/README.md) | Yohan | -| 23 | [Application bancaire](/7-bank-project/solution/README.md) | Fetch et utilisation des données | Savoir comment une application manipule les données | [Données](/7-bank-project/3-data/README.md) | Yohan | -| 24 | [Application bancaire](/7-bank-project/solution/README.md) | Concepts de la gestion des states | En savoir comment une application gère les states | [Gestion des states](/7-bank-project/4-state-management/README.md) | Yohan | +| 01 | Pour commencer | Introduction à la programmation et aux outils métiers | Savoir les bases de quelques langages de programmation et leur utilité dans la création de solutions informatiques | [Introduction à la programmation](/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.fr.md) | Jasmine | +| 02 | Pour commencer | Les bases de Github et le travail en groupe | Apprendre comment utiliser GitHub et contribuer à des projets | [Introduction aux bases de GitHub](/1-getting-started-lessons/2-github-basics/translations/README.fr.md) | Floor | +| 03 | Pour commencer | Accessibilité | Apprendre les bases de l'accessibilité Web | [Accessibility Fundamentals](/1-getting-started-lessons/3-accessibility/translations/README.fr.md) | Christopher | +| 04 | Les bases de JS | Types de données JavaScript | Les bases des types de données JavaScript | [Types de données](/2-js-basics/1-data-types/translations/README.fr.md) | Jasmine | +| 05 | Les bases de JS | Fonctions et méthodes | En savoir plus sur les fonctions et les méthodes de gestion du flux logique d’une application flow | [Fonctions et méthodes](/2-js-basics/2-functions-methods/translations/README.fr.md) | Jasmine et Christopher | +| 06 | Les bases de JS | Prendre des décisions avec JS | Découvrez comment créer des conditions dans votre code à l’aide de méthodes de prise de décision methods | [Prendre des décisions](/2-js-basics/3-making-decisions/translations/README.fr.md) | Jasmine | +| 07 | Les bases de JS | Tableaux et boucles | Utiliser des données à l’aide de tableaux et de boucles en JavaScript | [Tableaux et boucles](/2-js-basics/4-arrays-loops/translations/README.fr.md) | Jasmine | +| 08 | [Terrarium](/3-terrarium/solution/translations/README.fr.md) | HTML en pratique | Construisez le code HTML pour créer un terrarium en ligne, en vous concentrant sur la construction d’une mise en page | [Introduction to HTML](/3-terrarium/1-intro-to-html/translations/README.fr.md) | Jen | +| 09 | [Terrarium](/3-terrarium/solution/translations/README.fr.md) | CSS en pratique | Construisez le CSS pour styliser le terrarium en ligne, en vous concentrant sur les bases du CSS, y compris rendre la page réactive | [Introduction to CSS](/3-terrarium/2-intro-to-css/translations/README.fr.md) | Jen | +| 10 | [Terrarium](/3-terrarium/solution/translations/README.fr.md) | Fermetures JavaScript, manipulation DOM | Construisez le JavaScript pour que le terrarium fonctionne comme une interface glisser/déposer, en vous concentrant sur les fermetures et la manipulation du DOM | [Fermetures JavaScript, manipulation DOM](/3-terrarium/3-intro-to-DOM-and-closures/translations/README.fr.md) | Jen | +| 11 | [Typing Game](/4-typing-game/solution/translations/README.fr.md) | Créer un jeu de frappe | Découvrez comment utiliser les événements de clavier pour piloter la logique de votre application JavaScript | [Event-Driven Programming](/4-typing-game/typing-game/translations/README.fr.md) | Christopher | +| 12 | [Green Browser Extension](/5-browser-extension/solution/translations/README.fr.md) | Utilisation des navigateurs | Découvrez comment fonctionnent les navigateurs, leur historique et comment échafauder les premiers éléments d’une extension de navigateur | [About Browsers](/5-browser-extension/1-about-browsers/translations/README.fr.md) | Jen | +| 13 | [Green Browser Extension](/5-browser-extension/solution/translations/README.fr.md) | Création d’un formulaire, appel d’une API et stockage de variables dans le stockage local | Générez les éléments JavaScript de votre extension de navigateur pour appeler une API à l’aide de variables stockées dans le stockage local | [APIs, Forms, and Local Storage](/5-browser-extension/2-forms-browsers-local-storage/translations/README.fr.md) | Jen | +| 14 | [Green Browser Extension](/5-browser-extension/solution/translations/README.fr.md) | Processus en arrière-plan dans le navigateur, performances Web | Utilisez les processus d’arrière-plan du navigateur pour gérer l’icône de l’extension; en savoir plus sur les performances Web et quelques optimisations à faire | [Background Tasks and Performance](/5-browser-extension/3-background-tasks-and-performance/translations/README.fr.md) | Jen | +| 15 | [Jeu de l'espace](/6-space-game/solution/translations/README.fr.md) | Développement avancé d'un jeu en Javascript | En savoir plus sur l’héritage en utilisant à la fois les classes et la composition et le modèle Pub/Sub, en préparation de la création d’un jeu | [Introduction au développement avancé d'un jeu en Javascript](/6-space-game/1-introduction/translations/README.fr.md) | Chris | +| 16 | [Jeu de l'espace](/6-space-game/solution/translations/README.fr.md) | Les Canvas | En savoir plus sur l’API Canvas, utilisée pour dessiner des éléments sur un écran | [Dessiner des Canvas](/6-space-game/2-drawing-to-canvas/translations/README.fr.md) | Chris | +| 17 | [Jeu de l'espace](/6-space-game/solution/translations/README.fr.md) | Déplacement d’éléments autour de l’écran | Découvrez comment les éléments peuvent gagner du mouvement à l’aide des coordonnées cartésiennes et de l’API Canvas | [Moving Elements Around](/6-space-game/3-moving-elements-around/translations/README.fr.md) | Chris | +| 18 | [Jeu de l'espace](/6-space-game/solution/translations/README.fr.md) | Détection de collision | Faire entrer en collision les éléments et les faire réagir les uns aux autres à l’aide d’appuis sur les touches et fournir une fonction de refroidissement pour assurer les performances du jeu | [Collision Detection](/6-space-game/4-collision-detection/translations/README.fr.md) | Chris | +| 19 | [Jeu de l'espace](/6-space-game/solution/translations/README.fr.md) | Garder le score | Effectuez des calculs mathématiques en fonction de l’état du jeu et des performances | [Keeping Score](/6-space-game/5-keeping-score/translations/README.fr.md) | Chris | +| 20 | [Jeu de l'espace](/6-space-game/solution/translations/README.fr.md) | Fin et redémarrage du jeu | Découvrez comment terminer et redémarrer le jeu, y compris le nettoyage des ressources et la réinitialisation des valeurs variables | [Fin Condition](/6-space-game/6-end-condition/translations/README.fr.md) | Chris | +| 21 | [Application bancaire](/7-bank-project/solution/translations/README.fr.md) | Modèles et Routes HTML dans une application Web | Savoir l'utilité des Templates et Routes dans la gestion d'un site web multi-pages. | [HTML Templates et Routes](/7-bank-project/1-template-route/translations/README.fr.md) | Yohan | +| 22 | [Application bancaire](/7-bank-project/solution/translations/README.fr.md) | Créez un formulaire de connexion et d’inscription | En savoir plus sur la création de formulaires et la gestion des routines de validation | [Formulaires](/7-bank-project/2-forms/translations/README.fr.md) | Yohan | +| 23 | [Application bancaire](/7-bank-project/solution/translations/README.fr.md) | Fetch et utilisation des données | Comment les données entrent et sortent de votre application, comment les récupérer, les stocker et les supprimer | [Données](/7-bank-project/3-data/translations/README.fr.md) | Yohan | +| 24 | [Application bancaire](/7-bank-project/solution/translations/README.fr.md) | Concepts de la gestion des states | Découvrez comment votre application conserve son état et comment la gérer par programme | [Gestion des states](/7-bank-project/4-state-management/translations/README.fr.md) | Yohan | ## Accéder au cours hors connexion -Vous pouvez y accéder en utilisant [Docsify](https://docsify.js.org/#/). Effectuez un Fork, [installez Docsify](https://docsify.js.org/#/quickstart) sur votre machine, et tapez `docsify serve` dans le dossier root. Le site web va apparaître dans votre navigateur au port 3000 du localhost `localhost:3000`. +Vous pouvez exécuter cette documentation hors connexion à l’aide de [Docsify](https://docsify.js.org/#/). Effectuez un Fork de ce référentiel, [installez Docsify](https://docsify.js.org/#/quickstart) sur votre ordinateur local, puis dans le dossier racine de ce référentiel, tapez `docsify serve`. Le site Web va apparaître dans votre navigateur au port 3000 du localhost: `localhost:3000`. ## PDF -Ce cours est disponible en PDF. [Cliquez ici](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) +Un PDF de toutes les leçons peut être trouvé [ici](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) -## Autres Cours +## Autres programmes d’études -Découvrez d'autres cours : +Notre équipe produit d’autres programmes! Jettez un oeil: -- [Machine Learning pour débutants](https://aka.ms/ml-beginners) -- [IoT pour débutants](https://aka.ms/iot-beginners) +- [Machine Learning for Beginners](https://aka.ms/ml-beginners) +- [IoT for Beginners](https://aka.ms/iot-beginners) +- [Data Science for Beginners](https://aka.ms/datascience-beginners) From 10638960a6672381236fd427baa4a9e1b4057a8a Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 14 Feb 2022 10:33:34 -0500 Subject: [PATCH 005/151] build(deps): bump follow-redirects from 1.14.7 to 1.14.8 in /quiz-app (#603) Bumps [follow-redirects](https://github.com/follow-redirects/follow-redirects) from 1.14.7 to 1.14.8. - [Release notes](https://github.com/follow-redirects/follow-redirects/releases) - [Commits](https://github.com/follow-redirects/follow-redirects/compare/v1.14.7...v1.14.8) --- updated-dependencies: - dependency-name: follow-redirects dependency-type: indirect ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- quiz-app/package-lock.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/quiz-app/package-lock.json b/quiz-app/package-lock.json index a5e449db..e6a0b72b 100644 --- a/quiz-app/package-lock.json +++ b/quiz-app/package-lock.json @@ -5374,9 +5374,9 @@ } }, "follow-redirects": { - "version": "1.14.7", - "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.7.tgz", - "integrity": "sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ==", + "version": "1.14.8", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.8.tgz", + "integrity": "sha512-1x0S9UVJHsQprFcEC/qnNzBLcIxsjAV905f/UkQxbclCsoTWlacCNOpQa/anodLl2uaEKFhfWOvM2Qg77+15zA==", "dev": true }, "for-in": { From 03303baa0c4532520b2ae9e66ab1d8ca921f57c5 Mon Sep 17 00:00:00 2001 From: Jen Looper Date: Mon, 14 Feb 2022 10:36:51 -0500 Subject: [PATCH 006/151] Update README.md --- 2-js-basics/1-data-types/README.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/2-js-basics/1-data-types/README.md b/2-js-basics/1-data-types/README.md index 6d56fcb0..1f17e5f4 100644 --- a/2-js-basics/1-data-types/README.md +++ b/2-js-basics/1-data-types/README.md @@ -10,9 +10,11 @@ This lesson covers the basics of JavaScript, the language that provides interact > You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/en-us/learn/modules/web-development-101-variables/?WT.mc_id=academic-13441-cxa)! -[![Data types in JavaScript](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Data types in JavaScript") +[![Variables](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Variables in JavaScript") -> 🎥 Click the image above for a video about data types +[![Data Types in JavaScript](https://img.youtube.com/vi/rEHV3fFMfn0/0.jpg)](https://youtube.com/watch?v=rEHV3fFMfn0 "Data Types in JavaScript") + +> 🎥 Click the images above for videos about variables and data types Let's start with variables and the data types that populate them! ## Variables From 046743b59885fc878a4017e04e9f756663f2f6d5 Mon Sep 17 00:00:00 2001 From: Jen Looper Date: Tue, 15 Feb 2022 09:01:01 -0500 Subject: [PATCH 007/151] Spanish/Portuguese toolbox videos --- .../1-intro-to-programming-languages/translations/README.es.md | 2 +- .../1-intro-to-programming-languages/translations/README.pt.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.es.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.es.md index ef72ea29..4006be1e 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.es.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.es.md @@ -87,7 +87,7 @@ Existe la posibilidad de que un dispositivo no ejecute algunas declaraciones. Es ## Herramientas del oficio -[![Tools of the Trade](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Tools of the Trade") +[![Herramientas](https://img.youtube.com/vi/ysMrHssmhl0/0.jpg)](https://youtube.com/watch?v=ysMrHssmhl0 "Herramientas") En esta sección, aprenderás sobre software que puede ayudarte comenzar tu viaje de desarrollo profesional. diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.pt.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.pt.md index e634ca27..2a2a8427 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.pt.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.pt.md @@ -96,7 +96,7 @@ Há uma chance de que algumas instruções não sejam executadas por um disposit ## Ferramentas -[![Ferramentas](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Ferramentas") +[![Ferramentas](https://img.youtube.com/vi/bynF1E0Hq98/0.jpg)](https://youtube.com/watch?v=bynF1E0Hq98 "Ferramentas") Nesta seção, você aprenderá sobre alguns softwares que podem ser muito úteis ao iniciar sua jornada de desenvolvimento profissional. From c6ef9d59e5e8ee2bc7ba9649f773cef40940938f Mon Sep 17 00:00:00 2001 From: Jen Looper Date: Tue, 15 Feb 2022 10:16:18 -0500 Subject: [PATCH 008/151] data types and variables videos --- 2-js-basics/1-data-types/README.md | 2 +- 2-js-basics/1-data-types/translations/README.es.md | 4 +++- 2-js-basics/1-data-types/translations/README.fr.md | 6 ++++-- 2-js-basics/1-data-types/translations/README.hi.md | 2 ++ 2-js-basics/1-data-types/translations/README.id.md | 2 ++ 2-js-basics/1-data-types/translations/README.it.md | 4 +++- 2-js-basics/1-data-types/translations/README.ja.md | 4 +++- 2-js-basics/1-data-types/translations/README.ko.md | 4 +++- 2-js-basics/1-data-types/translations/README.ms.md | 1 + 2-js-basics/1-data-types/translations/README.nl.md | 2 ++ 2-js-basics/1-data-types/translations/README.pt.md | 4 +++- 2-js-basics/1-data-types/translations/README.zh-cn.md | 4 +++- 2-js-basics/1-data-types/translations/README.zh-tw.md | 2 ++ 13 files changed, 32 insertions(+), 9 deletions(-) diff --git a/2-js-basics/1-data-types/README.md b/2-js-basics/1-data-types/README.md index 1f17e5f4..b814986d 100644 --- a/2-js-basics/1-data-types/README.md +++ b/2-js-basics/1-data-types/README.md @@ -12,7 +12,7 @@ This lesson covers the basics of JavaScript, the language that provides interact [![Variables](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Variables in JavaScript") -[![Data Types in JavaScript](https://img.youtube.com/vi/rEHV3fFMfn0/0.jpg)](https://youtube.com/watch?v=rEHV3fFMfn0 "Data Types in JavaScript") +[![Data Types in JavaScript](https://img.youtube.com/vi/AWfA95eLdq8/0.jpg)](https://youtube.com/watch?v=AWfA95eLdq8 "Data Types in JavaScript") > 🎥 Click the images above for videos about variables and data types diff --git a/2-js-basics/1-data-types/translations/README.es.md b/2-js-basics/1-data-types/translations/README.es.md index 90103c24..07a7b277 100644 --- a/2-js-basics/1-data-types/translations/README.es.md +++ b/2-js-basics/1-data-types/translations/README.es.md @@ -3,7 +3,9 @@ ![JavaScript Basics - Data types](/sketchnotes/webdev101-js-datatypes.png) > Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac) -[![Tipos de datos en JavaScript](https://img.youtube.com/vi/rEHV3fFMfn0/0.jpg)](https://youtube.com/watch?v=rEHV3fFMfn0 "Tipos de datos en JavaScript") +[![Declaracion de Variables](https://img.youtube.com/vi/mUvddpeBCAs/0.jpg)](https://youtube.com/watch?v=mUvddpeBCAs "Declaracion de Variables") + +[![Tipos de datos en JavaScript](https://img.youtube.com/vi/fuksTtTga90/0.jpg)](https://youtube.com/watch?v=fuksTtTga90 "Tipos de datos en JavaScript") ## [Pre-lectura prueba](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/7) diff --git a/2-js-basics/1-data-types/translations/README.fr.md b/2-js-basics/1-data-types/translations/README.fr.md index 46c910ab..38dc9d7e 100644 --- a/2-js-basics/1-data-types/translations/README.fr.md +++ b/2-js-basics/1-data-types/translations/README.fr.md @@ -10,9 +10,11 @@ Cette leçon couvre les bases de JavaScript, le language qui permet l'interactiv > Vous pouvez suivre cette leçon sur [Microsoft Learn](https://docs.microsoft.com/en-us/learn/modules/web-development-101-variables/?WT.mc_id=academic-13441-cxa)! -[![Data types in JavaScript](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Data types in JavaScript") +[![Variables](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Variables in JavaScript") -> 🎥 Cliquez sur l'image ci-dessus pour voir une vidéo sur les types de données +[![Data Types in JavaScript](https://img.youtube.com/vi/AWfA95eLdq8/0.jpg)](https://youtube.com/watch?v=AWfA95eLdq8 "Data Types in JavaScript") + +> 🎥 Cliquez sur l'image ci-dessus pour voir une vidéo sur les types de données et des variables Commençons par les variables et les types de données qui les composent! diff --git a/2-js-basics/1-data-types/translations/README.hi.md b/2-js-basics/1-data-types/translations/README.hi.md index 1abb7ae7..bb9a48b2 100644 --- a/2-js-basics/1-data-types/translations/README.hi.md +++ b/2-js-basics/1-data-types/translations/README.hi.md @@ -10,6 +10,8 @@ [![जावास्क्रिप्ट में डेटा प्रकार](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "जावास्क्रिप्ट में डेटा प्रकार") +[![Data Types in JavaScript](https://img.youtube.com/vi/AWfA95eLdq8/0.jpg)](https://youtube.com/watch?v=AWfA95eLdq8 "Data Types in JavaScript") + चलो वेरिएबल्स और डेटा प्रकारों के साथ शुरू करते हैं जो उन्हें आबाद करते हैं! diff --git a/2-js-basics/1-data-types/translations/README.id.md b/2-js-basics/1-data-types/translations/README.id.md index 75fc6c4b..303cbce6 100644 --- a/2-js-basics/1-data-types/translations/README.id.md +++ b/2-js-basics/1-data-types/translations/README.id.md @@ -12,6 +12,8 @@ Pelajaran ini mencakup dasar-dasar JavaScript, bahasa yang menyediakan interakti [![Jenis data di JavaScript](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Jenis data di JavaScript") +[![Data Types in JavaScript](https://img.youtube.com/vi/AWfA95eLdq8/0.jpg)](https://youtube.com/watch?v=AWfA95eLdq8 "Data Types in JavaScript") + Mari kita mulai dengan variabel dan tipe data yang mengisinya! ## Variabel diff --git a/2-js-basics/1-data-types/translations/README.it.md b/2-js-basics/1-data-types/translations/README.it.md index 1ce2f6b9..725c8b4c 100644 --- a/2-js-basics/1-data-types/translations/README.it.md +++ b/2-js-basics/1-data-types/translations/README.it.md @@ -8,7 +8,9 @@ Questa lezione copre le basi di JavaScript, il linguaggio che fornisce l'interattività sul web. -[![Tipi di dato in JavaScriptTipi](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 " di dato in JavaScript") +[![Variables](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Variables in JavaScript") + +[![Data Types in JavaScript](https://img.youtube.com/vi/AWfA95eLdq8/0.jpg)](https://youtube.com/watch?v=AWfA95eLdq8 "Data Types in JavaScript") Si comincia con le variabili e i tipi di dato che le popolano! diff --git a/2-js-basics/1-data-types/translations/README.ja.md b/2-js-basics/1-data-types/translations/README.ja.md index 7b989e16..643a497b 100644 --- a/2-js-basics/1-data-types/translations/README.ja.md +++ b/2-js-basics/1-data-types/translations/README.ja.md @@ -8,7 +8,9 @@ このレッスンでは、Web 上でインタラクティブな機能を提供する言語である JavaScript の基礎を学びます。 -[![Data types in JavaScript](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Data types in JavaScript") +[![Variables](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Variables in JavaScript") + +[![Data Types in JavaScript](https://img.youtube.com/vi/AWfA95eLdq8/0.jpg)](https://youtube.com/watch?v=AWfA95eLdq8 "Data Types in JavaScript") まず、変数とそれを埋めるデータ型について説明しましょう! diff --git a/2-js-basics/1-data-types/translations/README.ko.md b/2-js-basics/1-data-types/translations/README.ko.md index a1ee6985..dc6df1a9 100644 --- a/2-js-basics/1-data-types/translations/README.ko.md +++ b/2-js-basics/1-data-types/translations/README.ko.md @@ -8,7 +8,9 @@ 해당 강의에서는 웹에서 상호작용을 제공하는 언어인 JavaScript의 기초를 다룹니다. -[![Data types in JavaScript](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Data types in JavaScript") +[![Variables](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Variables in JavaScript") + +[![Data Types in JavaScript](https://img.youtube.com/vi/AWfA95eLdq8/0.jpg)](https://youtube.com/watch?v=AWfA95eLdq8 "Data Types in JavaScript") 변수와 변수를 채워주는 데이터 타입부터 시작합니다! diff --git a/2-js-basics/1-data-types/translations/README.ms.md b/2-js-basics/1-data-types/translations/README.ms.md index 190f853d..57588ce2 100644 --- a/2-js-basics/1-data-types/translations/README.ms.md +++ b/2-js-basics/1-data-types/translations/README.ms.md @@ -10,6 +10,7 @@ Pelajaran ini merangkumi asas-asas JavaScript, bahasa yang menyediakan interakti [![Jenis Data Dalam JavaScript](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Data types in JavaScript") +[![Data Types in JavaScript](https://img.youtube.com/vi/AWfA95eLdq8/0.jpg)](https://youtube.com/watch?v=AWfA95eLdq8 "Data Types in JavaScript") Marilah kita mulakan dengan pemboleh ubah dan jenis data yang mengisinya! diff --git a/2-js-basics/1-data-types/translations/README.nl.md b/2-js-basics/1-data-types/translations/README.nl.md index 9a574fbe..a9d5e69f 100644 --- a/2-js-basics/1-data-types/translations/README.nl.md +++ b/2-js-basics/1-data-types/translations/README.nl.md @@ -10,6 +10,8 @@ Deze les behandelt de basisprincipes van JavaScript, de taal die voor interactiv [![Gegevenstypen in JavaScript](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Gegevenstypen in JavaScript") +[![Data Types in JavaScript](https://img.youtube.com/vi/AWfA95eLdq8/0.jpg)](https://youtube.com/watch?v=AWfA95eLdq8 "Data Types in JavaScript") + Laten we beginnen met variabelen en de gegevenstypen waarmee ze worden gevuld! diff --git a/2-js-basics/1-data-types/translations/README.pt.md b/2-js-basics/1-data-types/translations/README.pt.md index 08ba95e1..04a7f875 100644 --- a/2-js-basics/1-data-types/translations/README.pt.md +++ b/2-js-basics/1-data-types/translations/README.pt.md @@ -8,7 +8,9 @@ Esta lição cobre o básico do JavaScript, a linguagem que fornece interatividade na web. -[![Tipos de dados em JavaScriptt](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Tipos de dados em JavaScript") +[![Variáveis](https://img.youtube.com/vi/u_aLTZHsclg/0.jpg)](https://youtube.com/watch?v=u_aLTZHsclg "Variáveis") + +[![Data Types](https://img.youtube.com/vi/ylaZV-UKTe4/0.jpg)](https://youtube.com/watch?v=ylaZV-UKTe4 "Data Types") Vamos começar com variáveis e os tipos de dados que as preenchem! diff --git a/2-js-basics/1-data-types/translations/README.zh-cn.md b/2-js-basics/1-data-types/translations/README.zh-cn.md index 12254a5a..49482a8d 100644 --- a/2-js-basics/1-data-types/translations/README.zh-cn.md +++ b/2-js-basics/1-data-types/translations/README.zh-cn.md @@ -8,7 +8,9 @@ 这节课将会介绍 JavaScript 的基础知识，正是它为网页提供了可交互性。 -[![Data types in JavaScript](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "JavaScript 中的数据类型") +[![Variables in JavaScript](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "JavaScript 中的数据类型") + +[![Data Types in JavaScript](https://img.youtube.com/vi/AWfA95eLdq8/0.jpg)](https://youtube.com/watch?v=AWfA95eLdq8 "Data Types in JavaScript") 让我们从它最基础的组成部分 —— “变量”和“数据类型”学起吧！ diff --git a/2-js-basics/1-data-types/translations/README.zh-tw.md b/2-js-basics/1-data-types/translations/README.zh-tw.md index 303cb877..1b9140f7 100644 --- a/2-js-basics/1-data-types/translations/README.zh-tw.md +++ b/2-js-basics/1-data-types/translations/README.zh-tw.md @@ -10,6 +10,8 @@ [![JavaScript 的資料型態](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "JavaScript 的資料型態") +[![Data Types in JavaScript](https://img.youtube.com/vi/AWfA95eLdq8/0.jpg)](https://youtube.com/watch?v=AWfA95eLdq8 "Data Types in JavaScript") + 讓我們從程式語言的基礎 ── 「變數」與「資料型態」開始吧！ ## 變數 (Variable) From 2b009a02672bf3e08bd3cf040b9dd221e42246c7 Mon Sep 17 00:00:00 2001 From: Jen Looper Date: Tue, 15 Feb 2022 10:19:39 -0500 Subject: [PATCH 009/151] functions! --- 2-js-basics/2-functions-methods/translations/README.es.md | 2 +- 2-js-basics/2-functions-methods/translations/README.pt.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/2-js-basics/2-functions-methods/translations/README.es.md b/2-js-basics/2-functions-methods/translations/README.es.md index 9f0b46c2..72ba2a45 100644 --- a/2-js-basics/2-functions-methods/translations/README.es.md +++ b/2-js-basics/2-functions-methods/translations/README.es.md @@ -4,7 +4,7 @@ # Conceptos básicos de JavaScript: funcións y funciones -[![funcións y funciones](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "funcións y funciones") +[![funcións y funciones](https://img.youtube.com/vi/DdCRhOQibMo/0.jpg)](https://youtube.com/watch?v=DdCRhOQibMo "funcións y funciones") ## [Pre-lectura prueba](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/9) diff --git a/2-js-basics/2-functions-methods/translations/README.pt.md b/2-js-basics/2-functions-methods/translations/README.pt.md index 20022417..0d3ff45b 100644 --- a/2-js-basics/2-functions-methods/translations/README.pt.md +++ b/2-js-basics/2-functions-methods/translations/README.pt.md @@ -8,7 +8,7 @@ Quando pensamos em escrever código, sempre queremos garantir que nosso código seja legível. Embora isso pareça contra-intuitivo, o código é lido muito mais vezes do que escrito. Uma ferramenta central na caixa de ferramentas de uma pessoa desenvolvedora para garantir código sustentável é a **função**. -[![Métodos e Funções](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "Métodos e Funções") +[![Métodos e Funções](https://img.youtube.com/vi/aAfSVldL6Vk/0.jpg)](https://youtube.com/watch?v=aAfSVldL6Vk "Métodos e Funções") > Clique na imagem acima para ver um vídeo sobre métodos e funções. From 02f42949717f06ef7cb3cd7e65603d3503a2ce4c Mon Sep 17 00:00:00 2001 From: Jen Looper Date: Tue, 15 Feb 2022 10:25:12 -0500 Subject: [PATCH 010/151] making decisions videos --- 2-js-basics/3-making-decisions/translations/README.es.md | 2 ++ 2-js-basics/3-making-decisions/translations/README.pt.md | 7 ++++--- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/2-js-basics/3-making-decisions/translations/README.es.md b/2-js-basics/3-making-decisions/translations/README.es.md index e6353104..6d54e249 100644 --- a/2-js-basics/3-making-decisions/translations/README.es.md +++ b/2-js-basics/3-making-decisions/translations/README.es.md @@ -8,6 +8,8 @@ Tomar decisiones y controlar el orden en que se ejecuta su código hace que su código sea reutilizable y robusto. Esta sección cubre la sintaxis para controlar el flujo de datos en JavaScript y su importancia cuando se usa con tipos de datos booleanos. +[![tomar decisiones](https://img.youtube.com/vi/P0TrLOz15zk/0.jpg)](https://youtube.com/watch?v=P0TrLOz15zk "tomar decisiones") + ## Un breve resumen sobre los valores booleanos Los booleanos pueden tener solo dos valores: `true` o` false`. Los booleanos ayudan a tomar decisiones sobre qué líneas de código deben ejecutarse cuando se cumplen ciertas condiciones. diff --git a/2-js-basics/3-making-decisions/translations/README.pt.md b/2-js-basics/3-making-decisions/translations/README.pt.md index 3233530f..1263cb52 100644 --- a/2-js-basics/3-making-decisions/translations/README.pt.md +++ b/2-js-basics/3-making-decisions/translations/README.pt.md @@ -7,11 +7,12 @@ Tomar decisões e controlar a ordem do que é executado no seu código o torna recusável e robusto. Essa seção cobre a sintaxe para controle do fluxo de dados no JavaScript e sua significância quando usada com tipos Booleanos. -[![Tomando Decisões](https://img.youtube.com/vi/SxTp8j-fMMY/0.jpg)](https://youtube.com/watch?v=SxTp8j-fMMY "Making Decisions") +[![Tomando Decisões](https://img.youtube.com/vi/jqxfynLcNIw/0.jpg)](https://youtube.com/watch?v=jqxfynLcNIw "Making Decisions") -> 🎥 Clique na imagem acima para ver um video sobre tomada de decisões (Em Inglês) +> 🎥 Clique na imagem acima para ver um video sobre tomada de decisões + +> Você pode fazer essa aula em [Microsoft Learn](https://docs.microsoft.com/pt-br/learn/modules/web-development-101-if-else/?WT.mc_id=academic-13441-cxa)! -> Você pode fazer essa aula em [Microsoft Learn](https://docs.microsoft.com/en-us/learn/modules/web-development-101-if-else/?WT.mc_id=academic-13441-cxa)! (Em Inglês) ## Uma breve recapitulação sobre Booleanos Booleanos podem ter apenas dois valores `true` ou `false` (Verdadeiro ou falso). Os booleanos ajudam a tomar decisões sobre quais linhas de código devem ser executadas quando certas condições são atendidas. From 5ef7cd5f041362151eaf2b68483d9241c804bc8a Mon Sep 17 00:00:00 2001 From: Jen Looper Date: Tue, 15 Feb 2022 10:35:16 -0500 Subject: [PATCH 011/151] arrays and loops --- 2-js-basics/4-arrays-loops/README.md | 5 ++++- 2-js-basics/4-arrays-loops/translations/README.es.md | 5 ++--- 2-js-basics/4-arrays-loops/translations/README.pt.md | 7 +++++-- 3 files changed, 11 insertions(+), 6 deletions(-) diff --git a/2-js-basics/4-arrays-loops/README.md b/2-js-basics/4-arrays-loops/README.md index 53ddc6d0..290a3e6b 100644 --- a/2-js-basics/4-arrays-loops/README.md +++ b/2-js-basics/4-arrays-loops/README.md @@ -9,10 +9,13 @@ This lesson covers the basics of JavaScript, the language that provides interactivity on the web. In this lesson, you'll learn about arrays and loops, which are used to manipulate data. [![Arrays](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "Arrays") + [![Loops](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "Loops") -> 🎥 Click the image above for a video about arrays and loops. + +> 🎥 Click the images above for videos about arrays and loops. > You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/en-us/learn/modules/web-development-101-arrays/?WT.mc_id=academic-13441-cxa)! + ## Arrays Working with data is a common task for any language, and it's a much easier task when data is organized in a structural format, such as arrays. With arrays, data is stored in a structure similar to a list. One major benefit of arrays is that you can store different types of data in one array. diff --git a/2-js-basics/4-arrays-loops/translations/README.es.md b/2-js-basics/4-arrays-loops/translations/README.es.md index b3205333..af999ae1 100644 --- a/2-js-basics/4-arrays-loops/translations/README.es.md +++ b/2-js-basics/4-arrays-loops/translations/README.es.md @@ -4,9 +4,8 @@ > Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac) -[![Matrices](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "Matrices") -[![Bucles](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "Bucles") - +[![Matrices](https://img.youtube.com/vi/4o64A0IewZ4/0.jpg)](https://youtube.com/watch?v=4o64A0IewZ4 "Matrices") +[![Bucles](https://img.youtube.com/vi/9mDkAALcX9o/0.jpg)](https://www.youtube.com/watch?v=9mDkAALcX9o "Bucles") ## [Pre-lecture prueba](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/13) diff --git a/2-js-basics/4-arrays-loops/translations/README.pt.md b/2-js-basics/4-arrays-loops/translations/README.pt.md index dc26473f..2420a2de 100644 --- a/2-js-basics/4-arrays-loops/translations/README.pt.md +++ b/2-js-basics/4-arrays-loops/translations/README.pt.md @@ -8,11 +8,14 @@ Esta lição cobre os conceitos básicos do JavaScript, a linguagem que proporciona interactividade na web. Nesta lição, aprenderá sobre arrays e loops, que são usados para manipular dados. -[![Arrays](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "Arrays") -[![Loops](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "Laços") +[![Arrays](https://img.youtube.com/vi/rlvD4Umw37U/0.jpg)](https://youtube.com/watch?v=rlvD4Umw37U "Arrays") + +[![Loops](https://img.youtube.com/vi/J2X-olc3Z6Y/0.jpg)](https://www.youtube.com/watch?v=J2X-olc3Z6Y "Laços") + > 🎥 Clique na imagem acima para um vídeo sobre arrays e loops. > Pode seguir esta lição em [Microsoft Aprender](https://docs.microsoft.com/en-us/learn/modules/web-development-101-arrays/?WT.mc_id=academic-13441-cxa)! + ## Arrays Trabalhar com dados é uma tarefa comum para qualquer língua, e é uma tarefa muito mais fácil quando os dados são organizados num formato estrutural, tal como as matrizes. Com arrays, os dados são armazenados numa estrutura semelhante a uma lista. Uma grande vantagem dos arrays é que se pode armazenar diferentes tipos de dados numa única matriz. From bbbd7cfaa0432d6f8573a7bd2b3719dd8c5549b2 Mon Sep 17 00:00:00 2001 From: Jen Looper Date: Tue, 15 Feb 2022 10:37:41 -0500 Subject: [PATCH 012/151] removing references to en-US --- .../translations/assignment.fr.md | 2 +- .../translations/assignment.nl.md | 2 +- .../translations/assignment.sw.md | 2 +- .../translations/assignment.zh-tw.md | 2 +- .../3-accessibility/translations/README.hi.md | 10 +++---- .../3-accessibility/translations/README.nl.md | 6 ++-- .../translations/README.zh-tw.md | 4 +-- 2-js-basics/1-data-types/README.md | 2 +- .../1-data-types/translations/README.fr.md | 2 +- .../1-data-types/translations/README.hi.md | 2 +- .../1-data-types/translations/README.zh-tw.md | 2 +- 2-js-basics/2-functions-methods/README.md | 2 +- .../translations/README.es.md | 4 +-- .../translations/README.hi.md | 6 ++-- .../translations/README.zh-tw.md | 6 ++-- 2-js-basics/3-making-decisions/README.md | 2 +- .../translations/README.zh-tw.md | 2 +- 2-js-basics/4-arrays-loops/README.md | 2 +- .../4-arrays-loops/translations/README.fr.md | 2 +- .../4-arrays-loops/translations/README.pt.md | 2 +- .../translations/README.zh-tw.md | 4 +-- .../1-intro-to-html/translations/README.hi.md | 6 ++-- .../translations/README.zh-cn.md | 6 ++-- .../translations/README.zh-tw.md | 6 ++-- .../translations/README.zh-tw.md | 2 +- .../translations/README.hi.md | 14 +++++----- .../translations/README.zh-tw.md | 14 +++++----- .../translations/assignment.zh-tw.md | 2 +- .../typing-game/translations/README.hi.md | 10 +++---- .../typing-game/translations/README.zh-tw.md | 10 +++---- .../translations/README.zh-tw.md | 4 +-- .../translations/README.hi.md | 8 +++--- .../translations/README.zh-tw.md | 8 +++--- .../translations/README.hi.md | 2 +- .../translations/README.zh-tw.md | 2 +- .../translations/README.zh-tw.md | 4 +-- .../translations/README.zh-tw.md | 10 +++---- .../translations/README.zh-tw.md | 2 +- 7-bank-project/1-template-route/README.md | 22 +++++++-------- .../translations/README.fr.md | 22 +++++++-------- .../translations/README.hi.md | 22 +++++++-------- .../translations/README.zh-tw.md | 22 +++++++-------- .../2-forms/translations/README.hi.md | 22 +++++++-------- .../2-forms/translations/README.zh-tw.md | 24 ++++++++-------- .../3-data/translations/README.hi.md | 28 +++++++++---------- .../3-data/translations/README.zh-tw.md | 28 +++++++++---------- .../translations/README.hi.md | 14 +++++----- .../translations/README.zh-tw.md | 18 ++++++------ .../translations/assignment.nl.md | 2 +- .../translations/assignment.zh-tw.md | 2 +- SECURITY.md | 6 ++-- 51 files changed, 205 insertions(+), 205 deletions(-) diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.fr.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.fr.md index 6deab32e..d08028f0 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.fr.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.fr.md @@ -2,7 +2,7 @@ ## Instructions -Un développeur Web peut avoir besoin de nombreux outils qui se trouvent sur le [Documentation MDN pour l'outillage côté client](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Sélectionnez 3 outils non traités dans la leçon, expliquez pourquoi un développeur Web l'utiliserait, recherchez un outil qui relève de cette catégorie et partagez sa documentation. N'utilisez pas le même exemple d'outil sur les documents MDN. +Un développeur Web peut avoir besoin de nombreux outils qui se trouvent sur le [Documentation MDN pour l'outillage côté client](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Sélectionnez 3 outils non traités dans la leçon, expliquez pourquoi un développeur Web l'utiliserait, recherchez un outil qui relève de cette catégorie et partagez sa documentation. N'utilisez pas le même exemple d'outil sur les documents MDN. ## Rubrique diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.nl.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.nl.md index 157eb54d..d6100309 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.nl.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.nl.md @@ -2,7 +2,7 @@ ## Instructies -Er zijn veel tools die een webontwikkelaar nodig heeft en die staan in de [MDN-documentatie voor client-side tooling](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Selecteer 3 tools die niet in de les worden behandeld, leg uit waarom een webontwikkelaar deze zou gebruiken en zoek naar een tool die onder deze categorie valt en deel de documentatie ervan. Gebruik niet hetzelfde toolvoorbeeld voor MDN-documenten. +Er zijn veel tools die een webontwikkelaar nodig heeft en die staan in de [MDN-documentatie voor client-side tooling](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Selecteer 3 tools die niet in de les worden behandeld, leg uit waarom een webontwikkelaar deze zou gebruiken en zoek naar een tool die onder deze categorie valt en deel de documentatie ervan. Gebruik niet hetzelfde toolvoorbeeld voor MDN-documenten. ## Rubriek diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.sw.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.sw.md index 2706f782..2b9b658f 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.sw.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.sw.md @@ -2,7 +2,7 @@ ## Maagizo -Msanidi wa wavuti anaweza kuhitaji zana nyingi ambazo zinaweza kupatikana kwenye [Hati ya MDN ya Utengenezaji Upande wa Mteja](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). +Msanidi wa wavuti anaweza kuhitaji zana nyingi ambazo zinaweza kupatikana kwenye [Hati ya MDN ya Utengenezaji Upande wa Mteja](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Chagua zana 3 ambazo hazijafunikwa kwenye somo, eleza ni kwanini msanidi wa wavuti atatumia, pata zana ambayo iko kwenye kitengo hiki, na ushiriki nyaraka zake. Usitumie zana sawa ya sampuli kwenye hati za MDN. diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.zh-tw.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.zh-tw.md index ff989c4e..57658f91 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.zh-tw.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.zh-tw.md @@ -2,7 +2,7 @@ ## 說明 -網頁開發人員所需要使用的工具套件可以參考 [MDN Client端技術開發文件](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview)。 請選擇三種未被本課程提及的工具，試解釋為何網頁開發人員使用它，並搜尋其相關的工具與它的技術文件。這些資料不能出現在前述的 MDN 文件當中。 +網頁開發人員所需要使用的工具套件可以參考 [MDN Client端技術開發文件](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview)。 請選擇三種未被本課程提及的工具，試解釋為何網頁開發人員使用它，並搜尋其相關的工具與它的技術文件。這些資料不能出現在前述的 MDN 文件當中。 ## 學習評量 diff --git a/1-getting-started-lessons/3-accessibility/translations/README.hi.md b/1-getting-started-lessons/3-accessibility/translations/README.hi.md index 1136d746..3990868b 100644 --- a/1-getting-started-lessons/3-accessibility/translations/README.hi.md +++ b/1-getting-started-lessons/3-accessibility/translations/README.hi.md @@ -24,15 +24,15 @@ प्रत्येक वेब डेवलपर को स्क्रीन रीडर के साथ खुद को परिचित करना चाहिए। जैसा कि ऊपर प्रकाश डाला गया है, यह वह क्लाइंट है जिसे आपके उपयोगकर्ता उपयोग करेंगे। बहुत कुछ उसी तरह से जिससे आप परिचित हैं कि ब्राउज़र कैसे संचालित होता है, आपको यह सीखना चाहिए कि स्क्रीन रीडर कैसे संचालित होता है। सौभाग्य से, स्क्रीन रीडर अधिकांश ऑपरेटिंग सिस्टम में निर्मित होते हैं। -कुछ ब्राउज़रों में अंतर्निहित टूल और एक्सटेंशन भी होते हैं, जो टेक्स्ट को जोर से पढ़ सकते हैं या कुछ बुनियादी नौवहन सुविधाएँ भी प्रदान कर सकते हैं, जैसे कि [ये एक्सेसिबिलिटी-केंद्रित एज ब्राउज़र टूल](https://support.microsoft.com/en-us/help/4000734/microsoft-edge-accessibility-features)। ये महत्वपूर्ण एक्सेसिबिलिटी टूल भी हैं, लेकिन स्क्रीन रीडर्स से बहुत अलग तरीके से काम करते हैं और स्क्रीन रीडर टेस्टिंग टूल्स के लिए इनसे गलती नहीं होनी चाहिए। +कुछ ब्राउज़रों में अंतर्निहित टूल और एक्सटेंशन भी होते हैं, जो टेक्स्ट को जोर से पढ़ सकते हैं या कुछ बुनियादी नौवहन सुविधाएँ भी प्रदान कर सकते हैं, जैसे कि [ये एक्सेसिबिलिटी-केंद्रित एज ब्राउज़र टूल](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features)। ये महत्वपूर्ण एक्सेसिबिलिटी टूल भी हैं, लेकिन स्क्रीन रीडर्स से बहुत अलग तरीके से काम करते हैं और स्क्रीन रीडर टेस्टिंग टूल्स के लिए इनसे गलती नहीं होनी चाहिए। -✅ स्क्रीन रीडर और ब्राउज़र टेक्स्ट रीडर आज़माएं। विंडोज पर [नैरेटर](https://support.microsoft.com/en-us/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c17bf109bdb1) डिफ़ॉल्ट रूप से शामिल है, और [JAWS](https://webaim.org/articles/jaws/) और [NVDA](https://www.nvaccess.org/about-nvda/) भी इंस्टॉल किए जा सकते हैं। MacOS और iOS पर, [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) डिफ़ॉल्ट रूप से स्थापित है। +✅ स्क्रीन रीडर और ब्राउज़र टेक्स्ट रीडर आज़माएं। विंडोज पर [नैरेटर](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c17bf109bdb1) डिफ़ॉल्ट रूप से शामिल है, और [JAWS](https://webaim.org/articles/jaws/) और [NVDA](https://www.nvaccess.org/about-nvda/) भी इंस्टॉल किए जा सकते हैं। MacOS और iOS पर, [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) डिफ़ॉल्ट रूप से स्थापित है। ### ज़ूम -आमतौर पर दृष्टि दोष वाले लोगों द्वारा उपयोग किया जाने वाला एक अन्य उपकरण जूमिंग है। जूमिंग का सबसे मूल प्रकार स्थिर ज़ूम है, जिसे 'कंट्रोल + प्लस साइन (+)' या स्क्रीन रिज़ॉल्यूशन कम करके नियंत्रित किया जाता है। इस प्रकार का ज़ूम पूरे पृष्ठ को आकार देने का कारण बनता है, इसलिए एक अच्छा उपयोगकर्ता अनुभव प्रदान करने के लिए [उत्तरदायी डिज़ाइन](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design) का उपयोग करना महत्वपूर्ण है बढ़े हुए ज़ूम स्तर पर। +आमतौर पर दृष्टि दोष वाले लोगों द्वारा उपयोग किया जाने वाला एक अन्य उपकरण जूमिंग है। जूमिंग का सबसे मूल प्रकार स्थिर ज़ूम है, जिसे 'कंट्रोल + प्लस साइन (+)' या स्क्रीन रिज़ॉल्यूशन कम करके नियंत्रित किया जाता है। इस प्रकार का ज़ूम पूरे पृष्ठ को आकार देने का कारण बनता है, इसलिए एक अच्छा उपयोगकर्ता अनुभव प्रदान करने के लिए [उत्तरदायी डिज़ाइन](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) का उपयोग करना महत्वपूर्ण है बढ़े हुए ज़ूम स्तर पर। -एक अन्य प्रकार का ज़ूम स्क्रीन और पैन के एक क्षेत्र को बढ़ाने के लिए विशेष सॉफ़्टवेयर पर निर्भर करता है, बहुत कुछ वास्तविक आवर्धक कांच का उपयोग करने जैसा। विंडोज पर, [Magnifier](https://support.microsoft.com/en-us/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1bc-d3bd-8615-0e5e32204198) में बनाया गया है और [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) अधिक सुविधाओं और एक बड़ा उपयोगकर्ता आधार के लिए एक तृतीय-पक्ष आवर्धन सॉफ्टवेयर है। दोनों macOS और iOS में एक अंतर्निहित आवर्धन सॉफ्टवेयर होता है जिसे [ज़ूम](https://www.apple.com/accessibility/mac/vision/) कहा जाता है। +एक अन्य प्रकार का ज़ूम स्क्रीन और पैन के एक क्षेत्र को बढ़ाने के लिए विशेष सॉफ़्टवेयर पर निर्भर करता है, बहुत कुछ वास्तविक आवर्धक कांच का उपयोग करने जैसा। विंडोज पर, [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1bc-d3bd-8615-0e5e32204198) में बनाया गया है और [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) अधिक सुविधाओं और एक बड़ा उपयोगकर्ता आधार के लिए एक तृतीय-पक्ष आवर्धन सॉफ्टवेयर है। दोनों macOS और iOS में एक अंतर्निहित आवर्धन सॉफ्टवेयर होता है जिसे [ज़ूम](https://www.apple.com/accessibility/mac/vision/) कहा जाता है। ### कंट्रास्ट चेकर्स कलर-ब्लाइंड यूजर्स या ऐसे लोग जिन्हें कम कंट्रास्ट कलर देखने में दिक्कत होती है, उनकी जरूरतों का जवाब देने के लिए वेब साइट्स पर रंगों को सावधानी से चुना जाना चाहिए। @@ -131,7 +131,7 @@ description ``` -✅ सामान्य तौर पर, ऊपर वर्णित शब्दार्थ मार्कअप का उपयोग ARIA के उपयोग को बढ़ा देता है, लेकिन कभी-कभी विभिन्न HTML विजेट के लिए कोई शब्दार्थ समतुल्य नहीं होता है। एक अच्छा उदाहरण एक पेड़ है। एक पेड़ के लिए कोई HTML समतुल्य नहीं है, इसलिए आप इस तत्व के लिए एक उचित भूमिका और aria मान के साथ जेनेरिक `
` की पहचान करते हैं। [ARIA पर MDN प्रलेखन](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) में अधिक उपयोगी जानकारी है। +✅ सामान्य तौर पर, ऊपर वर्णित शब्दार्थ मार्कअप का उपयोग ARIA के उपयोग को बढ़ा देता है, लेकिन कभी-कभी विभिन्न HTML विजेट के लिए कोई शब्दार्थ समतुल्य नहीं होता है। एक अच्छा उदाहरण एक पेड़ है। एक पेड़ के लिए कोई HTML समतुल्य नहीं है, इसलिए आप इस तत्व के लिए एक उचित भूमिका और aria मान के साथ जेनेरिक `
` की पहचान करते हैं। [ARIA पर MDN प्रलेखन](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) में अधिक उपयोगी जानकारी है। ```html

File Viewer

diff --git a/1-getting-started-lessons/3-accessibility/translations/README.nl.md b/1-getting-started-lessons/3-accessibility/translations/README.nl.md index 76816327..6af384df 100644 --- a/1-getting-started-lessons/3-accessibility/translations/README.nl.md +++ b/1-getting-started-lessons/3-accessibility/translations/README.nl.md @@ -30,7 +30,7 @@ Sommige browsers hebben ook ingebouwde tools en extensies die tekst hardop kunne ### Zoom -Een ander hulpmiddel dat vaak wordt gebruikt door mensen met een visuele beperking, is zoomen. De meest basale manier van zoomen is statische zoom, bestuurd via `Control + plusteken (+)` of door de schermresolutie te verlagen. Dit type zoom zorgt ervoor dat het formaat van de hele pagina wordt aangepast, dus het gebruik van [responsive design](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design) is belangrijk om een goede gebruikerservaring te bieden bij verhoogde zoomniveaus. +Een ander hulpmiddel dat vaak wordt gebruikt door mensen met een visuele beperking, is zoomen. De meest basale manier van zoomen is statische zoom, bestuurd via `Control + plusteken (+)` of door de schermresolutie te verlagen. Dit type zoom zorgt ervoor dat het formaat van de hele pagina wordt aangepast, dus het gebruik van [responsive design](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) is belangrijk om een goede gebruikerservaring te bieden bij verhoogde zoomniveaus. Een ander type zoom is afhankelijk van gespecialiseerde software om een deel van het scherm te vergroten en te pannen, net zoals bij het gebruik van een echt vergrootglas. Op Windows is [Magnifier](https://support.microsoft.com/nl-nl/windows/vergrootglas-gebruiken-voor-een-betere-zichtbaarheid-op-het-scherm-414948ba-8b1c-d3bd-8615-0e5e32204198) ingebouwd en [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) is vergrotingssoftware van derden met meer functies en een groter gebruikersbestand. Zowel macOS als iOS hebben ingebouwde vergrotingssoftware genaamd [Zoom](https://www.apple.com/nl/accessibility/vision/). @@ -123,7 +123,7 @@ Stelt u de volgende pagina voor: In dit voorbeeld is het zinvol om de tekst van de beschrijving en volgorde te dupliceren voor iemand die een browser gebruikt. Iemand die een schermlezer gebruikt, hoort echter alleen de woorden *beschrijving* en *volgorde* herhaald zonder context. -Om dit soort scenario's te ondersteunen, ondersteunt HTML een set attributen die bekend staan als [Accessible Rich Internet Applications (ARIA)](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA). Met deze attributen kunt u aanvullende informatie verstrekken aan schermlezers. +Om dit soort scenario's te ondersteunen, ondersteunt HTML een set attributen die bekend staan als [Accessible Rich Internet Applications (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA). Met deze attributen kunt u aanvullende informatie verstrekken aan schermlezers. > **OPMERKING**: Zoals veel aspecten van HTML, kan de ondersteuning van browser en schermlezer variëren. De meeste mainline-clients ondersteunen echter ARIA-attributen. @@ -133,7 +133,7 @@ U kunt `aria-label` gebruiken om de link te beschrijven als het formaat van de p beschrijving ``` -✅ Over het algemeen vervangt het gebruik van semantische opmaak zoals hierboven beschreven het gebruik van ARIA, maar soms is er geen semantisch equivalent voor verschillende HTML-widgets. Een goed voorbeeld is een boom. Er is geen HTML-equivalent voor een boomstructuur, dus identificeert u de generieke `
` voor dit element met een juiste rol en aria-waarden. De [MDN-documentatie over ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) bevat meer nuttige informatie. +✅ Over het algemeen vervangt het gebruik van semantische opmaak zoals hierboven beschreven het gebruik van ARIA, maar soms is er geen semantisch equivalent voor verschillende HTML-widgets. Een goed voorbeeld is een boom. Er is geen HTML-equivalent voor een boomstructuur, dus identificeert u de generieke `
` voor dit element met een juiste rol en aria-waarden. De [MDN-documentatie over ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) bevat meer nuttige informatie. ```html

File Viewer

diff --git a/1-getting-started-lessons/3-accessibility/translations/README.zh-tw.md b/1-getting-started-lessons/3-accessibility/translations/README.zh-tw.md index d9815d0b..01d09f1a 100644 --- a/1-getting-started-lessons/3-accessibility/translations/README.zh-tw.md +++ b/1-getting-started-lessons/3-accessibility/translations/README.zh-tw.md @@ -32,7 +32,7 @@ ### 放大器 -另一項為視覺障礙者提供的輔助程式為放大器。最常見的定點放大功能，可以藉由 `Control + 加號(+)` 或降低螢幕解析度來完成。這個步驟會重新縮放整個網頁，確保網頁的[互動式設計](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design)是縮放頁面重要的一環。 +另一項為視覺障礙者提供的輔助程式為放大器。最常見的定點放大功能，可以藉由 `Control + 加號(+)` 或降低螢幕解析度來完成。這個步驟會重新縮放整個網頁，確保網頁的[互動式設計](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design)是縮放頁面重要的一環。 其他放大功能會專注在小部分的區域上，這些額外軟體提供類似於實體放大器的功能。 Windows 內建[放大器](https://support.microsoft.com/zh-tw/windows/%E4%BD%BF%E7%94%A8%E6%94%BE%E5%A4%A7%E9%8F%A1%E4%BB%A5%E8%AE%93%E8%9E%A2%E5%B9%95%E4%B8%8A%E7%9A%84%E5%85%A7%E5%AE%B9%E6%9B%B4%E5%AE%B9%E6%98%93%E7%9C%8B%E5%88%B0-414948ba-8b1c-d3bd-8615-0e5e32204198)功能；第三方程式[ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/)則受到廣泛用戶的使用。 macOS 與 iOS 內建[Zoom](https://www.apple.com/accessibility/mac/vision/)軟體。 @@ -135,7 +135,7 @@ CSS 提供完整的網頁造型控制，你可以讓文字框框線隱藏或是 description ``` -✅ 總體而言，使用語義化標籤得以取代 ARIA 功能，但是這些標籤無法全面性地覆蓋 HTML 的各式物件。樹(Tree)就是一種例子。沒有 HTML 物件能處理一棵樹，所以你可以在 `
` 元素中加上 aria 數值。[關於 ARIA 的 MDN 技術文件](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA)說明許多有用的資訊。 +✅ 總體而言，使用語義化標籤得以取代 ARIA 功能，但是這些標籤無法全面性地覆蓋 HTML 的各式物件。樹(Tree)就是一種例子。沒有 HTML 物件能處理一棵樹，所以你可以在 `
` 元素中加上 aria 數值。[關於 ARIA 的 MDN 技術文件](https://developer.mozilla.org/docs/Web/Accessibility/ARIA)說明許多有用的資訊。 ```html

File Viewer

diff --git a/2-js-basics/1-data-types/README.md b/2-js-basics/1-data-types/README.md index b814986d..8c5069d0 100644 --- a/2-js-basics/1-data-types/README.md +++ b/2-js-basics/1-data-types/README.md @@ -8,7 +8,7 @@ This lesson covers the basics of JavaScript, the language that provides interactivity on the web. -> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/en-us/learn/modules/web-development-101-variables/?WT.mc_id=academic-13441-cxa)! +> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-variables/?WT.mc_id=academic-13441-cxa)! [![Variables](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Variables in JavaScript") diff --git a/2-js-basics/1-data-types/translations/README.fr.md b/2-js-basics/1-data-types/translations/README.fr.md index 38dc9d7e..7b782b7b 100644 --- a/2-js-basics/1-data-types/translations/README.fr.md +++ b/2-js-basics/1-data-types/translations/README.fr.md @@ -8,7 +8,7 @@ Cette leçon couvre les bases de JavaScript, le language qui permet l'interactivité sur le web. -> Vous pouvez suivre cette leçon sur [Microsoft Learn](https://docs.microsoft.com/en-us/learn/modules/web-development-101-variables/?WT.mc_id=academic-13441-cxa)! +> Vous pouvez suivre cette leçon sur [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-variables/?WT.mc_id=academic-13441-cxa)! [![Variables](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Variables in JavaScript") diff --git a/2-js-basics/1-data-types/translations/README.hi.md b/2-js-basics/1-data-types/translations/README.hi.md index bb9a48b2..8693d6a0 100644 --- a/2-js-basics/1-data-types/translations/README.hi.md +++ b/2-js-basics/1-data-types/translations/README.hi.md @@ -178,7 +178,7 @@ let myString2 = "World"; - `let myTrueBool = true` - `let myFalseBool = false` -✅ एक चर को 'सत्य' माना जा सकता है यदि यह एक बूलियन `true` का मूल्यांकन करता है। दिलचस्प रूप से, जावास्क्रिप्ट में, [सभी मूल्य सत्य हैं जब तक कि मिथ्या के रूप में परिभाषित नहीं किया जाता](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) +✅ एक चर को 'सत्य' माना जा सकता है यदि यह एक बूलियन `true` का मूल्यांकन करता है। दिलचस्प रूप से, जावास्क्रिप्ट में, [सभी मूल्य सत्य हैं जब तक कि मिथ्या के रूप में परिभाषित नहीं किया जाता](https://developer.mozilla.org/docs/Glossary/Truthy) --- diff --git a/2-js-basics/1-data-types/translations/README.zh-tw.md b/2-js-basics/1-data-types/translations/README.zh-tw.md index 1b9140f7..51068117 100644 --- a/2-js-basics/1-data-types/translations/README.zh-tw.md +++ b/2-js-basics/1-data-types/translations/README.zh-tw.md @@ -179,7 +179,7 @@ let myString2 = "World"; - `let myTrueBool = true` - `let myFalseBool = false` -✅ 布林值 `true` 亦有廣義的 'truthy' 數值。有趣的是，在 JavaScript 中，[除非被定義為 falsy，其餘的數值都會被當作是 truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy)。 +✅ 布林值 `true` 亦有廣義的 'truthy' 數值。有趣的是，在 JavaScript 中，[除非被定義為 falsy，其餘的數值都會被當作是 truthy](https://developer.mozilla.org/docs/Glossary/Truthy)。 --- diff --git a/2-js-basics/2-functions-methods/README.md b/2-js-basics/2-functions-methods/README.md index 96ba61cb..13718bbc 100644 --- a/2-js-basics/2-functions-methods/README.md +++ b/2-js-basics/2-functions-methods/README.md @@ -12,7 +12,7 @@ When we think about writing code, we always want to ensure our code is readable. > 🎥 Click the image above for a video about methods and functions. -> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/en-us/learn/modules/web-development-101-functions/?WT.mc_id=academic-13441-cxa)! +> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-13441-cxa)! ## Functions diff --git a/2-js-basics/2-functions-methods/translations/README.es.md b/2-js-basics/2-functions-methods/translations/README.es.md index 72ba2a45..caed1c47 100644 --- a/2-js-basics/2-functions-methods/translations/README.es.md +++ b/2-js-basics/2-functions-methods/translations/README.es.md @@ -118,7 +118,7 @@ Los parámetros se enumeran en la parte de definición entre paréntesis y está ### Parámetro -Hasta ahora, la función que construimos siempre saldrá a la [consola](https://developer.mozilla.org/en-US/docs/Web/API/console). A veces, esto puede ser exactamente lo que estamos buscando, especialmente cuando creamos funciones que llamarán a otros servicios. Pero, ¿qué pasa si quiero crear una función auxiliar para realizar un cálculo y devolver el valor para poder usarlo en otro lugar? +Hasta ahora, la función que construimos siempre saldrá a la [consola](https://developer.mozilla.org/docs/Web/API/console). A veces, esto puede ser exactamente lo que estamos buscando, especialmente cuando creamos funciones que llamarán a otros servicios. Pero, ¿qué pasa si quiero crear una función auxiliar para realizar un cálculo y devolver el valor para poder usarlo en otro lugar? Podemos hacer esto usando un **valor de retorno**. La función devuelve un valor de retorno y se puede almacenar en una variable de la misma manera que podríamos almacenar un valor literal como una cadena o un número. @@ -183,7 +183,7 @@ Cualquier parámetro con valores predeterminados debe estar al final de la lista ## Revisión y autoestudio -Vale la pena [leer un poco más sobre las funciones de flecha](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), ya que se utilizan cada vez más en bases de código. Practique escribir una función y luego reescribirla con esta sintaxis. +Vale la pena [leer un poco más sobre las funciones de flecha](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), ya que se utilizan cada vez más en bases de código. Practique escribir una función y luego reescribirla con esta sintaxis. **Tarea**: [Práctica de tipos de datos](assignment.es.md) diff --git a/2-js-basics/2-functions-methods/translations/README.hi.md b/2-js-basics/2-functions-methods/translations/README.hi.md index ef3b7f2f..18b8314a 100644 --- a/2-js-basics/2-functions-methods/translations/README.hi.md +++ b/2-js-basics/2-functions-methods/translations/README.hi.md @@ -104,7 +104,7 @@ displayGreeting('Christopher', 'Hi'); ## मान लौटाएं -अब तक हमने जो फ़ंक्शन बनाया है वह हमेशा [कंसोल](https://developer.mozilla.org/en-US/docs/Web/API/console) पर आउटपुट करेगा। कभी-कभी यह ठीक वही हो सकता है जिसकी हम तलाश कर रहे हैं, खासकर जब हम फ़ंक्शन बनाते हैं जो अन्य सेवाओं को कॉल करेगा। लेकिन क्या होगा अगर मैं गणना करने और मान प्रदान करने के लिए एक सहायक फ़ंक्शन बनाना चाहता हूं तो मैं इसे कहीं और उपयोग कर सकता हूं? +अब तक हमने जो फ़ंक्शन बनाया है वह हमेशा [कंसोल](https://developer.mozilla.org/docs/Web/API/console) पर आउटपुट करेगा। कभी-कभी यह ठीक वही हो सकता है जिसकी हम तलाश कर रहे हैं, खासकर जब हम फ़ंक्शन बनाते हैं जो अन्य सेवाओं को कॉल करेगा। लेकिन क्या होगा अगर मैं गणना करने और मान प्रदान करने के लिए एक सहायक फ़ंक्शन बनाना चाहता हूं तो मैं इसे कहीं और उपयोग कर सकता हूं? हम **रिटर्न वैल्यू** का उपयोग करके ऐसा कर सकते हैं। एक वापसी मान फ़ंक्शन द्वारा लौटाया जाता है, और इसे एक चर में संग्रहीत किया जा सकता है, जैसे कि हम एक स्ट्रिंग या संख्या जैसे शाब्दिक मूल्य को संग्रहीत कर सकते हैं। @@ -133,7 +133,7 @@ const greetingMessage = createGreetingMessage('Christopher'); जैसे ही आप अपने प्रोग्रामिंग करियर में आगे बढ़ते हैं, आप ऐसे फंक्शन में आएंगे, जो फंक्शन्स को पैरामीटर के रूप में स्वीकार करते हैं। इस साफ-सुथरी चाल का इस्तेमाल आमतौर पर तब किया जाता है जब हम नहीं जानते कि कब कुछ होने वाला है या पूरा हो रहा है, लेकिन हम जानते हैं कि हमें प्रतिक्रिया में एक ऑपरेशन करने की जरूरत है। -एक उदाहरण के रूप में, [setTimeout](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) पर विचार करें, जो एक टाइमर शुरू करता है और पूरा होने पर कोड निष्पादित करेगा। हमें यह बताना होगा कि हम किस कोड को निष्पादित करना चाहते हैं। एक समारोह के लिए एक सही काम की तरह लगता है! +एक उदाहरण के रूप में, [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) पर विचार करें, जो एक टाइमर शुरू करता है और पूरा होने पर कोड निष्पादित करेगा। हमें यह बताना होगा कि हम किस कोड को निष्पादित करना चाहते हैं। एक समारोह के लिए एक सही काम की तरह लगता है! यदि आप नीचे दिए गए कोड को चलाते हैं, तो 3 सेकंड के बाद आपको संदेश दिखाई देगा **3 सेकंड में** समाप्त हो गया है। @@ -188,7 +188,7 @@ setTimeout(() => { ## समीक्षा और स्व अध्ययन -यह लायक है [एरो फ़ंक्शंस पर थोड़ा और पढ़ना](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), क्योंकि वे कोड बेस में उपयोग किए जा रहे हैं। एक फ़ंक्शन लिखने का अभ्यास करें, और फिर इस सिंटैक्स के साथ इसे फिर से लिखना। +यह लायक है [एरो फ़ंक्शंस पर थोड़ा और पढ़ना](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), क्योंकि वे कोड बेस में उपयोग किए जा रहे हैं। एक फ़ंक्शन लिखने का अभ्यास करें, और फिर इस सिंटैक्स के साथ इसे फिर से लिखना। ## असाइनमेंट diff --git a/2-js-basics/2-functions-methods/translations/README.zh-tw.md b/2-js-basics/2-functions-methods/translations/README.zh-tw.md index fa1ea9c7..61553d5f 100644 --- a/2-js-basics/2-functions-methods/translations/README.zh-tw.md +++ b/2-js-basics/2-functions-methods/translations/README.zh-tw.md @@ -104,7 +104,7 @@ displayGreeting('Christopher', 'Hi'); ## 回傳值(Return values) -目前為止，我們的函式只能輸出字串到[console](https://developer.mozilla.org/en-US/docs/Web/API/console)上。這或許是我們希望的結果，尤其是需要呼叫其他服務的時候。萬一今天我想建立一個額外的函式負責做資料處理與運算呢? +目前為止，我們的函式只能輸出字串到[console](https://developer.mozilla.org/docs/Web/API/console)上。這或許是我們希望的結果，尤其是需要呼叫其他服務的時候。萬一今天我想建立一個額外的函式負責做資料處理與運算呢? 此時，我們可以利用**回傳值**。回傳值由函式輸出，就像變數一樣儲存像是字串或是數字的結果。 @@ -133,7 +133,7 @@ const greetingMessage = createGreetingMessage('Christopher'); 在你的程式旅程中，你會見到有函式將其他函式當作參數使用。這個俐落的手法常被用在一種情況：我們不知道 A 事件什麼時候發生與完成，但我們要在 A 事件後執行 B 事件。 -舉例來說，考慮函式[setTimeout](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout)，它會啟動計時機制，並在倒數完後執行下一個程式。我們需要告訴函式哪一個函式要在時間到後執行，一個完美的例子！ +舉例來說，考慮函式[setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout)，它會啟動計時機制，並在倒數完後執行下一個程式。我們需要告訴函式哪一個函式要在時間到後執行，一個完美的例子！ 執行下方的程式，三秒鐘之後你會看到訊息**已經過三秒鐘**。 @@ -188,7 +188,7 @@ setTimeout(() => { ## 複習與自學 -這很值得去閱讀[關於箭頭函式的資料](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)，它們越來越常被用在程式碼上。試著寫個函式，再改寫成箭頭語法。 +這很值得去閱讀[關於箭頭函式的資料](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions)，它們越來越常被用在程式碼上。試著寫個函式，再改寫成箭頭語法。 ## 作業 diff --git a/2-js-basics/3-making-decisions/README.md b/2-js-basics/3-making-decisions/README.md index 7230408d..0246bd74 100644 --- a/2-js-basics/3-making-decisions/README.md +++ b/2-js-basics/3-making-decisions/README.md @@ -12,7 +12,7 @@ Making decisions and controlling the order in which your code runs makes your co > 🎥 Click the image above for a video about making decisions. -> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/en-us/learn/modules/web-development-101-if-else/?WT.mc_id=academic-13441-cxa)! +> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-13441-cxa)! ## A Brief Recap on Booleans Booleans can be only two values: `true` or `false`. Booleans help make decisions on which lines of code should run when certain conditions are met. diff --git a/2-js-basics/3-making-decisions/translations/README.zh-tw.md b/2-js-basics/3-making-decisions/translations/README.zh-tw.md index 7f9cdfad..3f1bd891 100644 --- a/2-js-basics/3-making-decisions/translations/README.zh-tw.md +++ b/2-js-basics/3-making-decisions/translations/README.zh-tw.md @@ -167,7 +167,7 @@ if (firstNumber > secondNumber) { ## 複習與自學 -閱讀更多可被使用的運算子：[MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)。 +閱讀更多可被使用的運算子：[MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators)。 瀏覽 Josh Comeau 所編制的[運算子查詢表](https://joshwcomeau.com/operator-lookup/)！ diff --git a/2-js-basics/4-arrays-loops/README.md b/2-js-basics/4-arrays-loops/README.md index 290a3e6b..ec7b40d9 100644 --- a/2-js-basics/4-arrays-loops/README.md +++ b/2-js-basics/4-arrays-loops/README.md @@ -14,7 +14,7 @@ This lesson covers the basics of JavaScript, the language that provides interact > 🎥 Click the images above for videos about arrays and loops. -> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/en-us/learn/modules/web-development-101-arrays/?WT.mc_id=academic-13441-cxa)! +> You can take this lesson on [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-13441-cxa)! ## Arrays diff --git a/2-js-basics/4-arrays-loops/translations/README.fr.md b/2-js-basics/4-arrays-loops/translations/README.fr.md index 5d6428f9..13bc7ecc 100644 --- a/2-js-basics/4-arrays-loops/translations/README.fr.md +++ b/2-js-basics/4-arrays-loops/translations/README.fr.md @@ -12,7 +12,7 @@ Cette leçon couvre les bases de JavaScript, le langage qui offre de l'interacti [![Les boucles](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "Les boucles") > 🎥 Cliquez sur l'image ci-dessus pour une vidéo sur les tableaux et les boucles. -> Vous pouvez suivre cette leçon sur [Microsoft Learn](https://docs.microsoft.com/en-us/learn/modules/web-development-101-arrays/?WT.mc_id=academic-13441-cxa)! +> Vous pouvez suivre cette leçon sur [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-13441-cxa)! ## Les tableaux Travailler avec des données est une tâche courante pour n'importe quel langage, et c'est une tâche beaucoup plus facile lorsque les données sont organisées dans un format structurel, tel que des tableaux. Avec les tableaux, les données sont stockées dans une structure similaire à une liste. L'un des principaux avantages des tableaux est que vous pouvez stocker différents types de données dans un seul tableau. diff --git a/2-js-basics/4-arrays-loops/translations/README.pt.md b/2-js-basics/4-arrays-loops/translations/README.pt.md index 2420a2de..701be3d4 100644 --- a/2-js-basics/4-arrays-loops/translations/README.pt.md +++ b/2-js-basics/4-arrays-loops/translations/README.pt.md @@ -14,7 +14,7 @@ Esta lição cobre os conceitos básicos do JavaScript, a linguagem que proporci > 🎥 Clique na imagem acima para um vídeo sobre arrays e loops. -> Pode seguir esta lição em [Microsoft Aprender](https://docs.microsoft.com/en-us/learn/modules/web-development-101-arrays/?WT.mc_id=academic-13441-cxa)! +> Pode seguir esta lição em [Microsoft Aprender](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-13441-cxa)! ## Arrays Trabalhar com dados é uma tarefa comum para qualquer língua, e é uma tarefa muito mais fácil quando os dados são organizados num formato estrutural, tal como as matrizes. Com arrays, os dados são armazenados numa estrutura semelhante a uma lista. Uma grande vantagem dos arrays é que se pode armazenar diferentes tipos de dados numa única matriz. diff --git a/2-js-basics/4-arrays-loops/translations/README.zh-tw.md b/2-js-basics/4-arrays-loops/translations/README.zh-tw.md index 374dce68..d73a447e 100644 --- a/2-js-basics/4-arrays-loops/translations/README.zh-tw.md +++ b/2-js-basics/4-arrays-loops/translations/README.zh-tw.md @@ -116,7 +116,7 @@ for (let i = 0; i < iceCreamFlavors.length; i++) { ## 🚀 挑戰 -除了 for 迴圈與 while 迴圈外，仍有許多使用矩陣與迴圈的方法：[forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)、[for-of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of) 與 [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)。用上列其中一種語法改寫你的迴圈。 +除了 for 迴圈與 while 迴圈外，仍有許多使用矩陣與迴圈的方法：[forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)、[for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of) 與 [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map)。用上列其中一種語法改寫你的迴圈。 ## 課後測驗 @@ -125,7 +125,7 @@ for (let i = 0; i < iceCreamFlavors.length; i++) { ## 複習與自學 在 JavaScript 中，矩陣有許多控制的方法，它們在處理資料上有很大的幫助。 -[學習這些方法](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)，如 push、pop、slice 和 splice，試著套用在你所創造的矩陣上。 +[學習這些方法](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)，如 push、pop、slice 和 splice，試著套用在你所創造的矩陣上。 ## 作業 diff --git a/3-terrarium/1-intro-to-html/translations/README.hi.md b/3-terrarium/1-intro-to-html/translations/README.hi.md index 1c8ca2f0..9f90fbe8 100644 --- a/3-terrarium/1-intro-to-html/translations/README.hi.md +++ b/3-terrarium/1-intro-to-html/translations/README.hi.md @@ -48,13 +48,13 @@ HTML फ़ाइल की पहली पंक्ति इसका सि ``` -✅ कुछ अलग तरीके हैं जो डॉक टाइप को क्वेरी स्ट्रिंग के साथ निर्धारित करके निर्धारित किए जा सकते हैं: [क्विर्क मोड और स्टैंडर्ड मोड](https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). ये मोड वास्तव में पुराने ब्राउज़रों का समर्थन करते थे जो आजकल सामान्य रूप से उपयोग नहीं किए जाते हैं (नेटस्केप नेविगेटर 4 और इंटरनेट एक्सप्लोरर 5)। आप मानक सिद्धांत घोषणा से चिपक सकते हैं। +✅ कुछ अलग तरीके हैं जो डॉक टाइप को क्वेरी स्ट्रिंग के साथ निर्धारित करके निर्धारित किए जा सकते हैं: [क्विर्क मोड और स्टैंडर्ड मोड](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). ये मोड वास्तव में पुराने ब्राउज़रों का समर्थन करते थे जो आजकल सामान्य रूप से उपयोग नहीं किए जाते हैं (नेटस्केप नेविगेटर 4 और इंटरनेट एक्सप्लोरर 5)। आप मानक सिद्धांत घोषणा से चिपक सकते हैं। --- ## दस्तावेज़ का 'head' -HTML दस्तावेज़ के 'हेड' क्षेत्र में आपके वेब पेज के बारे में महत्वपूर्ण जानकारी शामिल है, जिसे [मेटाडेटा](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta) के रूप में भी जाना जाता है। हमारे मामले में, हम वेब सर्वर को बताते हैं कि इस पेज को किस पेज पर भेजा जाएगा, ये चार बातें: +HTML दस्तावेज़ के 'हेड' क्षेत्र में आपके वेब पेज के बारे में महत्वपूर्ण जानकारी शामिल है, जिसे [मेटाडेटा](https://developer.mozilla.org/docs/Web/HTML/Element/meta) के रूप में भी जाना जाता है। हमारे मामले में, हम वेब सर्वर को बताते हैं कि इस पेज को किस पेज पर भेजा जाएगा, ये चार बातें: - पेज का शीर्षक - पृष्ठ मेटाडेटा सहित: @@ -212,7 +212,7 @@ HTML में, आप वेब पेज के तत्वों को ब ## 🚀चुनौती -HTML में कुछ जंगली 'पुराने' टैग हैं जो अभी भी खेलने में मज़ेदार हैं, हालांकि आपको [[इन टैग्स](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Obirect_and_deprecated_elements) जैसे अस्वीकृत टैग का उपयोग नहीं करना चाहिए आपके मार्कअप में । फिर भी, आप h1 शीर्षक स्क्रॉल को क्षैतिज रूप से बनाने के लिए पुराने `` टैग का उपयोग कर सकते हैं? (यदि आप ऐसा करते हैं, तो इसे बाद में हटाना न भूलें) +HTML में कुछ जंगली 'पुराने' टैग हैं जो अभी भी खेलने में मज़ेदार हैं, हालांकि आपको [[इन टैग्स](https://developer.mozilla.org/docs/Web/HTML/Element#Obirect_and_deprecated_elements) जैसे अस्वीकृत टैग का उपयोग नहीं करना चाहिए आपके मार्कअप में । फिर भी, आप h1 शीर्षक स्क्रॉल को क्षैतिज रूप से बनाने के लिए पुराने `` टैग का उपयोग कर सकते हैं? (यदि आप ऐसा करते हैं, तो इसे बाद में हटाना न भूलें) ## व्याख्यान उपरांत प्रश्नोत्तरी diff --git a/3-terrarium/1-intro-to-html/translations/README.zh-cn.md b/3-terrarium/1-intro-to-html/translations/README.zh-cn.md index cf3b2cb8..17db7bc0 100644 --- a/3-terrarium/1-intro-to-html/translations/README.zh-cn.md +++ b/3-terrarium/1-intro-to-html/translations/README.zh-cn.md @@ -48,13 +48,13 @@ HTML 文件的第一行就是文档类型声明。要将这一行内容放在文 ``` -✅ 通过设置带有查询字符串（query string）的 DocType 可以设定几种不同的模式：[怪异模式与标准模式](https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode)。这些模式用于支持现在非常不常用的古老浏览器(Netscape Navigator 4 和 Internet Explorer 5)。你仍可以使用标准的文档类型声明。 +✅ 通过设置带有查询字符串（query string）的 DocType 可以设定几种不同的模式：[怪异模式与标准模式](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode)。这些模式用于支持现在非常不常用的古老浏览器(Netscape Navigator 4 和 Internet Explorer 5)。你仍可以使用标准的文档类型声明。 --- ## 文档的 'head'（脑袋） -HTML 文档中的 'head' 包含的区域有很多关于页面的重要信息，它也被称作[元数据(metadata)](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta)。在我们的例子中，我们告诉 web 服务器这个页面将依据哪些信息被发送进行渲染，主要是四种: +HTML 文档中的 'head' 包含的区域有很多关于页面的重要信息，它也被称作[元数据(metadata)](https://developer.mozilla.org/docs/Web/HTML/Element/meta)。在我们的例子中，我们告诉 web 服务器这个页面将依据哪些信息被发送进行渲染，主要是四种: - 网页的标题 - 网页的元数据，它包含： @@ -215,7 +215,7 @@ HTML 文档中的 'head' 包含的区域有很多关于页面的重要信息， ## 🚀 挑战 -HTML 中还有一些狂野的'旧'标签，玩起来仍然很有趣。虽然[这些标签](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Obsolete_and_deprecated_elements)不推荐你使用，但是，你还是可以试试，能否用 `` 标签让 h1 标题文字变成纵向展示的吗？（如果你这么尝试了，不要忘了在后面移除它们） +HTML 中还有一些狂野的'旧'标签，玩起来仍然很有趣。虽然[这些标签](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements)不推荐你使用，但是，你还是可以试试，能否用 `` 标签让 h1 标题文字变成纵向展示的吗？（如果你这么尝试了，不要忘了在后面移除它们） ## 课后测试 diff --git a/3-terrarium/1-intro-to-html/translations/README.zh-tw.md b/3-terrarium/1-intro-to-html/translations/README.zh-tw.md index c947c09a..9aca7ea4 100644 --- a/3-terrarium/1-intro-to-html/translations/README.zh-tw.md +++ b/3-terrarium/1-intro-to-html/translations/README.zh-tw.md @@ -48,13 +48,13 @@ HTML 檔案的第一行是文件型別宣告。你會訝異這一行必須存在 ``` -✅ 有許多不一樣的文件型別模式，你可以用 query string 做設定：[怪異模式與標準模式](https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode)。這些模式用來支援非常古老的瀏覽器，現在可能都不會見到的瀏覽器(Netscape Navigator 4 與 Internet Explorer 5)。 你可以觀看他們的文件型別模式宣告定義。 +✅ 有許多不一樣的文件型別模式，你可以用 query string 做設定：[怪異模式與標準模式](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode)。這些模式用來支援非常古老的瀏覽器，現在可能都不會見到的瀏覽器(Netscape Navigator 4 與 Internet Explorer 5)。 你可以觀看他們的文件型別模式宣告定義。 --- ## 文件的 'head' -HTML 文件中 'head' 的區域包含很多網頁的重要資訊，也被稱作[元資訊(metadata)](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta)。我們告訴網頁伺服器我們需要哪些檔案與資訊，主要有四個： +HTML 文件中 'head' 的區域包含很多網頁的重要資訊，也被稱作[元資訊(metadata)](https://developer.mozilla.org/docs/Web/HTML/Element/meta)。我們告訴網頁伺服器我們需要哪些檔案與資訊，主要有四個： - 網頁標題 - 網頁元資訊，包含： @@ -213,7 +213,7 @@ HTML 文件中 'head' 的區域包含很多網頁的重要資訊，也被稱作[ ## 🚀 挑戰 -這邊有一些「古老」的 HTML 標籤。雖然[這些標籤](https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Obsolete_and_deprecated_elements)被歸為不推薦使用的標籤，但仍值得去嘗試的。你可以用 `` 標籤來讓 h1 標題文字變成縱向呈現嗎？實驗完後，記得要移除這些標籤喔。 +這邊有一些「古老」的 HTML 標籤。雖然[這些標籤](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements)被歸為不推薦使用的標籤，但仍值得去嘗試的。你可以用 `` 標籤來讓 h1 標題文字變成縱向呈現嗎？實驗完後，記得要移除這些標籤喔。 ## 課後測驗 diff --git a/3-terrarium/2-intro-to-css/translations/README.zh-tw.md b/3-terrarium/2-intro-to-css/translations/README.zh-tw.md index 8e9e7008..4910873a 100644 --- a/3-terrarium/2-intro-to-css/translations/README.zh-tw.md +++ b/3-terrarium/2-intro-to-css/translations/README.zh-tw.md @@ -248,7 +248,7 @@ h1 { ![盆栽盒成果圖](../images/terrarium-final.png) -在做課後測驗前，請先前往下列的學習頁面：[用 CSS 造型化你的網頁應用](https://docs.microsoft.com/en-us/learn/modules/build-simple-website/4-css-basics?WT.mc_id=academic-13441-cxa) +在做課後測驗前，請先前往下列的學習頁面：[用 CSS 造型化你的網頁應用](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics?WT.mc_id=academic-13441-cxa) ## 課後測驗 diff --git a/3-terrarium/3-intro-to-DOM-and-closures/translations/README.hi.md b/3-terrarium/3-intro-to-DOM-and-closures/translations/README.hi.md index 3fbaf41b..2a1883af 100644 --- a/3-terrarium/3-intro-to-DOM-and-closures/translations/README.hi.md +++ b/3-terrarium/3-intro-to-DOM-and-closures/translations/README.hi.md @@ -9,11 +9,11 @@ ### परिचय -DOM, या "Document Object Model" में हेरफेर, वेब विकास का एक प्रमुख पहलू है। [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction) के अनुसार, "The Document Object Model (DOM) संरचना को समाहित करने वाली वस्तुओं का डेटा प्रतिनिधित्व है। और वेब पर एक दस्तावेज़ की सामग्री। " वेब पर DOM हेरफेर के आसपास की चुनौतियाँ अक्सर DOM का प्रबंधन करने के लिए वैनिला जावास्क्रिप्ट के बजाय जावास्क्रिप्ट चौखटे का उपयोग करने के पीछे होती हैं, लेकिन हम अपने दम पर प्रबंधित करेंगे! +DOM, या "Document Object Model" में हेरफेर, वेब विकास का एक प्रमुख पहलू है। [MDN](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) के अनुसार, "The Document Object Model (DOM) संरचना को समाहित करने वाली वस्तुओं का डेटा प्रतिनिधित्व है। और वेब पर एक दस्तावेज़ की सामग्री। " वेब पर DOM हेरफेर के आसपास की चुनौतियाँ अक्सर DOM का प्रबंधन करने के लिए वैनिला जावास्क्रिप्ट के बजाय जावास्क्रिप्ट चौखटे का उपयोग करने के पीछे होती हैं, लेकिन हम अपने दम पर प्रबंधित करेंगे! -इसके अलावा, यह पाठ एक [जावास्क्रिप्ट क्लोजर](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) के विचार को पेश करेगा, जिसे आप दूसरे से संलग्न फ़ंक्शन के रूप में सोच सकते हैं कार्य करें ताकि आंतरिक फ़ंक्शन बाहरी फ़ंक्शन के दायरे तक पहुंच सके। +इसके अलावा, यह पाठ एक [जावास्क्रिप्ट क्लोजर](https://developer.mozilla.org/docs/Web/JavaScript/Closures) के विचार को पेश करेगा, जिसे आप दूसरे से संलग्न फ़ंक्शन के रूप में सोच सकते हैं कार्य करें ताकि आंतरिक फ़ंक्शन बाहरी फ़ंक्शन के दायरे तक पहुंच सके। -> जावास्क्रिप्ट क्लोजर एक विशाल और जटिल विषय है। यह सबक सबसे बुनियादी विचार पर छूता है कि इस टेरारियम के कोड में, आपको एक बंद मिलेगा: एक आंतरिक फ़ंक्शन और एक बाहरी फ़ंक्शन, जो बाहरी फ़ंक्शन के दायरे में आंतरिक फ़ंक्शन का उपयोग करने की अनुमति देता है। यह कैसे काम करता है, इस बारे में अधिक जानकारी के लिए, कृपया [व्यापक प्रलेखन](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) पर जाएँ। +> जावास्क्रिप्ट क्लोजर एक विशाल और जटिल विषय है। यह सबक सबसे बुनियादी विचार पर छूता है कि इस टेरारियम के कोड में, आपको एक बंद मिलेगा: एक आंतरिक फ़ंक्शन और एक बाहरी फ़ंक्शन, जो बाहरी फ़ंक्शन के दायरे में आंतरिक फ़ंक्शन का उपयोग करने की अनुमति देता है। यह कैसे काम करता है, इस बारे में अधिक जानकारी के लिए, कृपया [व्यापक प्रलेखन](https://developer.mozilla.org/docs/Web/JavaScript/Closures) पर जाएँ। हम DOM को हेरफेर करने के लिए एक क्लोशर का उपयोग करेंगे। @@ -108,9 +108,9 @@ function dragElement(terrariumElement) { `dragElement` स्क्रिप्ट के शीर्ष पर घोषणाओं से अपनी `terrariumElement` वस्तु प्राप्त करें। फिर, आप फ़ंक्शन में पारित ऑब्जेक्ट के लिए `0` पर कुछ स्थानीय स्थिति निर्धारित करते हैं। ये स्थानीय चर हैं जिन्हें प्रत्येक तत्व के लिए हेरफेर किया जाएगा क्योंकि आप प्रत्येक तत्व को बंद करने के भीतर खींचें और ड्रॉप कार्यक्षमता जोड़ते हैं। टेरारियम को इन घसीटे गए तत्वों द्वारा पॉपुलेट किया जाएगा, इसलिए एप्लिकेशन को इस बात पर नज़र रखने की आवश्यकता है कि उन्हें कहाँ रखा गया है। -इसके अलावा, इस फ़ंक्शन को पारित किए जाने वाले टेरारियम ईमेंट को एक `onpointerdown` ईवेंट सौंपा गया है, जो [वेब एपीआई](https://developer.mozilla.org/en-US/docs/Web/API) का एक हिस्सा है। डोम प्रबंधन के साथ मदद करने के लिए। `onpointerdown` एक बटन धकेलने पर, या हमारे मामले में, एक ड्रैग करने योग्य तत्व को छू जाता है। यह ईवेंट हैंडलर कुछ अपवादों के साथ [वेब और मोबाइल ब्राउज़र](https://caniuse.com/?search=onpointerdown) दोनों पर काम करता है। +इसके अलावा, इस फ़ंक्शन को पारित किए जाने वाले टेरारियम ईमेंट को एक `onpointerdown` ईवेंट सौंपा गया है, जो [वेब एपीआई](https://developer.mozilla.org/docs/Web/API) का एक हिस्सा है। डोम प्रबंधन के साथ मदद करने के लिए। `onpointerdown` एक बटन धकेलने पर, या हमारे मामले में, एक ड्रैग करने योग्य तत्व को छू जाता है। यह ईवेंट हैंडलर कुछ अपवादों के साथ [वेब और मोबाइल ब्राउज़र](https://caniuse.com/?search=onpointerdown) दोनों पर काम करता है। -✅ [ईवेंट हैंडलर `onclick`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick) को अधिक समर्थन क्रॉस-ब्राउज़र है; आप इसका उपयोग यहां क्यों नहीं करेंगे? स्क्रीन निर्माण के सटीक प्रकार के बारे में सोचें जिसे आप यहाँ बनाने का प्रयास कर रहे हैं। +✅ [ईवेंट हैंडलर `onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) को अधिक समर्थन क्रॉस-ब्राउज़र है; आप इसका उपयोग यहां क्यों नहीं करेंगे? स्क्रीन निर्माण के सटीक प्रकार के बारे में सोचें जिसे आप यहाँ बनाने का प्रयास कर रहे हैं। --- @@ -205,9 +205,9 @@ function stopElementDrag() { ## समीक्षा और स्व अध्ययन -स्क्रीन के चारों ओर तत्वों को खींचते समय तुच्छ लगता है, ऐसा करने के कई तरीके और कई नुकसान हैं, जो आपके चाहने वाले प्रभाव पर निर्भर करता है। वास्तव में, एक संपूर्ण [ड्रैग एंड ड्रॉप एपीआई](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) है जिसे आप आज़मा सकते हैं। हमने इसका उपयोग इस मॉड्यूल में नहीं किया क्योंकि हम जो प्रभाव चाहते थे वह कुछ अलग था, लेकिन इस एपीआई को अपने प्रोजेक्ट पर आज़माएँ और देखें कि आप क्या हासिल कर सकते हैं। +स्क्रीन के चारों ओर तत्वों को खींचते समय तुच्छ लगता है, ऐसा करने के कई तरीके और कई नुकसान हैं, जो आपके चाहने वाले प्रभाव पर निर्भर करता है। वास्तव में, एक संपूर्ण [ड्रैग एंड ड्रॉप एपीआई](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) है जिसे आप आज़मा सकते हैं। हमने इसका उपयोग इस मॉड्यूल में नहीं किया क्योंकि हम जो प्रभाव चाहते थे वह कुछ अलग था, लेकिन इस एपीआई को अपने प्रोजेक्ट पर आज़माएँ और देखें कि आप क्या हासिल कर सकते हैं। -[W3C डॉक्स](https://www.w3.org/TR/pointerevents1/) और [MDN वेब डॉक्स](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events) पर सूचक घटनाओं के बारे में अधिक जानकारी प्राप्त करें। +[W3C डॉक्स](https://www.w3.org/TR/pointerevents1/) और [MDN वेब डॉक्स](https://developer.mozilla.org/docs/Web/API/Pointer_events) पर सूचक घटनाओं के बारे में अधिक जानकारी प्राप्त करें। हमेशा [CanIUse.com] (https://caniuse.com/) का उपयोग करके ब्राउज़र क्षमताओं की जाँच करें। diff --git a/3-terrarium/3-intro-to-DOM-and-closures/translations/README.zh-tw.md b/3-terrarium/3-intro-to-DOM-and-closures/translations/README.zh-tw.md index a42f059c..5b363f41 100644 --- a/3-terrarium/3-intro-to-DOM-and-closures/translations/README.zh-tw.md +++ b/3-terrarium/3-intro-to-DOM-and-closures/translations/README.zh-tw.md @@ -9,11 +9,11 @@ ### 大綱 -操作 DOM (Document Object Model) 是網頁開發的一項關鍵。根據 [MDN 文件](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction)， 「Document Object Model (DOM) 元素能根據網頁文件的結構與內容來呈現物件」。藉由使用 JavaScript 框架而非原始的 JavaScript 程式碼來管理 DOM，在網頁上操作 DOM 的挑戰已經不比以前困難了，但這裡我們要自己來管理它們！ +操作 DOM (Document Object Model) 是網頁開發的一項關鍵。根據 [MDN 文件](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction)， 「Document Object Model (DOM) 元素能根據網頁文件的結構與內容來呈現物件」。藉由使用 JavaScript 框架而非原始的 JavaScript 程式碼來管理 DOM，在網頁上操作 DOM 的挑戰已經不比以前困難了，但這裡我們要自己來管理它們！ -此外，這堂課也會介紹有關[JavaScript 閉包(Closure)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures)的概念，你可以想像成一個函式被包在另一個函式中，以訪問外面函式範圍中的變數。 +此外，這堂課也會介紹有關[JavaScript 閉包(Closure)](https://developer.mozilla.org/docs/Web/JavaScript/Closures)的概念，你可以想像成一個函式被包在另一個函式中，以訪問外面函式範圍中的變數。 -> JavaScript 閉包是個廣闊且複雜的主題。本堂課只觸及建立盆栽盒需要的最基礎概念。你能得知一個閉包為：內部函式和外部函式建立一項關係，允許內部函式存取外部函式的變數等作用域。要得知更多關於閉包的原理，請造訪觀看[額外的文件](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures)。 +> JavaScript 閉包是個廣闊且複雜的主題。本堂課只觸及建立盆栽盒需要的最基礎概念。你能得知一個閉包為：內部函式和外部函式建立一項關係，允許內部函式存取外部函式的變數等作用域。要得知更多關於閉包的原理，請造訪觀看[額外的文件](https://developer.mozilla.org/docs/Web/JavaScript/Closures)。 我們會使用閉包來操控 DOM。 @@ -108,9 +108,9 @@ function dragElement(terrariumElement) { `dragElement` 藉由程式定義的參數取得 `terrariumElement` 物件。之後，設定一些位置 `0` 的變數給函式內的物件使用。它們是本地變數，給每一個進到拖曳函式內的物件操控。盆栽盒會被這些拖曳物件填充，我們的網頁應用必須要持續追蹤這些物件的位置。 -此外，進到函式的 terrariumElement 也被新增了 `pointerdown` 事件，它是管理 DOM 的其中一項[網頁 APIs](https://developer.mozilla.org/en-US/docs/Web/API)。當按鈕按下時，或是在我們案例中，一個拖曳物件被點擊時，`onpointerdown` 事件就會被觸發。這個事件處理器(event handler)皆運作在[網頁與行動瀏覽器](https://caniuse.com/?search=onpointerdown)上，只有少部分的例外。 +此外，進到函式的 terrariumElement 也被新增了 `pointerdown` 事件，它是管理 DOM 的其中一項[網頁 APIs](https://developer.mozilla.org/docs/Web/API)。當按鈕按下時，或是在我們案例中，一個拖曳物件被點擊時，`onpointerdown` 事件就會被觸發。這個事件處理器(event handler)皆運作在[網頁與行動瀏覽器](https://caniuse.com/?search=onpointerdown)上，只有少部分的例外。 -✅ [事件處理器 `onclick`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick)支援更多的瀏覽器。為什麼我們不在這邊使用它？ 想想看我們在這此建立的視窗互動類型。 +✅ [事件處理器 `onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick)支援更多的瀏覽器。為什麼我們不在這邊使用它？ 想想看我們在這此建立的視窗互動類型。 --- @@ -207,9 +207,9 @@ function stopElementDrag() { ## 複習與自學 -在螢幕上拖曳物件看似簡單，但依照不同的目的與實現方法會遭遇到不同的問題。事實上，這邊有一份關於你可以嘗試的[拖曳 API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API)。我們沒在專案中使用是為了建立不一樣的實現方法，試著使用這些 API 到專案中，看看你能完成什麼。 +在螢幕上拖曳物件看似簡單，但依照不同的目的與實現方法會遭遇到不同的問題。事實上，這邊有一份關於你可以嘗試的[拖曳 API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API)。我們沒在專案中使用是為了建立不一樣的實現方法，試著使用這些 API 到專案中，看看你能完成什麼。 -在 [W3C 文件](https://www.w3.org/TR/pointerevents1/) 和 [MDN 網頁文件](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events)上取得更多關於 pointer 的事件。 +在 [W3C 文件](https://www.w3.org/TR/pointerevents1/) 和 [MDN 網頁文件](https://developer.mozilla.org/docs/Web/API/Pointer_events)上取得更多關於 pointer 的事件。 記得習慣性用 [CanIUse.com](https://caniuse.com/) 檢查網頁的瀏覽器兼容性。 diff --git a/3-terrarium/3-intro-to-DOM-and-closures/translations/assignment.zh-tw.md b/3-terrarium/3-intro-to-DOM-and-closures/translations/assignment.zh-tw.md index 3292c192..e239e8ec 100644 --- a/3-terrarium/3-intro-to-DOM-and-closures/translations/assignment.zh-tw.md +++ b/3-terrarium/3-intro-to-DOM-and-closures/translations/assignment.zh-tw.md @@ -2,7 +2,7 @@ ## 簡介 -調查其中一項 DOM 的元素。造訪 MDN 關於 [DOM 介面的清單](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model)挑選其中一項。在網路上找尋一個使用這項元素的網頁，並解釋如何使用它。 +調查其中一項 DOM 的元素。造訪 MDN 關於 [DOM 介面的清單](https://developer.mozilla.org/docs/Web/API/Document_Object_Model)挑選其中一項。在網路上找尋一個使用這項元素的網頁，並解釋如何使用它。 ## 學習評量 diff --git a/4-typing-game/typing-game/translations/README.hi.md b/4-typing-game/typing-game/translations/README.hi.md index efc527ca..ac8704fe 100644 --- a/4-typing-game/typing-game/translations/README.hi.md +++ b/4-typing-game/typing-game/translations/README.hi.md @@ -20,10 +20,10 @@ एप्लिकेशन बनाते समय आपको सुनने के लिए [दर्जनों इवेंट](https://developer.mozilla.org/docs/Web/Events) उपलब्ध हैं। मूल रूप से एक पृष्ठ पर एक उपयोगकर्ता कुछ भी करता है, एक घटना को बढ़ाता है, जो आपको यह सुनिश्चित करने के लिए बहुत शक्ति देता है कि वे आपकी इच्छा का अनुभव प्राप्त करें। सौभाग्य से, आपको आम तौर पर केवल कुछ मुट्ठी भर घटनाओं की आवश्यकता होगी। यहां कुछ सामान्य बातें हैं (दोनों में से एक का उपयोग हम अपने खेल को बनाते समय करेंगे) -- [click](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event): उपयोगकर्ता ने कुछ पर क्लिक किया, आमतौर पर एक बटन या हाइपरलिंक -- [contextmenu](https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event): उपयोगकर्ता ने सही माउस बटन क्लिक किया -- [select](https://developer.mozilla.org/en-US/docs/Web/API/Element/select_event): उपयोगकर्ता ने कुछ टेक्स्ट पर प्रकाश डाला -- [input](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event): उपयोगकर्ता कुछ टेक्स्ट इनपुट करता है +- [click](https://developer.mozilla.org/docs/Web/API/Element/click_event): उपयोगकर्ता ने कुछ पर क्लिक किया, आमतौर पर एक बटन या हाइपरलिंक +- [contextmenu](https://developer.mozilla.org/docs/Web/API/Element/contextmenu_event): उपयोगकर्ता ने सही माउस बटन क्लिक किया +- [select](https://developer.mozilla.org/docs/Web/API/Element/select_event): उपयोगकर्ता ने कुछ टेक्स्ट पर प्रकाश डाला +- [input](https://developer.mozilla.org/docs/Web/API/Element/input_event): उपयोगकर्ता कुछ टेक्स्ट इनपुट करता है ## खेल का निर्माण @@ -332,7 +332,7 @@ typedValueElement.addEventListener('input', () => { ## समीक्षा और स्व अध्ययन -वेब ब्राउज़र के माध्यम से डेवलपर के लिए [उपलब्ध सभी घटनाओं](https://developer.mozilla.org/en-US/docs/Web/Events) को पढ़ें, और उन परिदृश्यों पर विचार करें जिनमें आप प्रत्येक का उपयोग करेंगे। +वेब ब्राउज़र के माध्यम से डेवलपर के लिए [उपलब्ध सभी घटनाओं](https://developer.mozilla.org/docs/Web/Events) को पढ़ें, और उन परिदृश्यों पर विचार करें जिनमें आप प्रत्येक का उपयोग करेंगे। ## असाइनमेंट diff --git a/4-typing-game/typing-game/translations/README.zh-tw.md b/4-typing-game/typing-game/translations/README.zh-tw.md index b00658d3..b71329a1 100644 --- a/4-typing-game/typing-game/translations/README.zh-tw.md +++ b/4-typing-game/typing-game/translations/README.zh-tw.md @@ -20,10 +20,10 @@ 創造應用時，這邊有[數種事件](https://developer.mozilla.org/docs/Web/Events)提供給你監聽。基本上，使用者在網頁上做的任何行為都會觸發事件，你需要花大量時間、大量精力確保它們有相對應的使用者體驗。幸運的是，你只需要處理少部分的事件類型。這邊是一些常見的事件類型，我們會使用其中兩種來建立遊戲： -- [點擊](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event)： 使用者點擊物件，通常會是按鈕或是連結。 -- [右鍵選單](https://developer.mozilla.org/en-US/docs/Web/API/Element/contextmenu_event)： 使用者點擊滑鼠右鍵。 -- [選取](https://developer.mozilla.org/en-US/docs/Web/API/Element/select_event)： 使用者標記特定文字。 -- [輸入](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event)： 使用者輸入文字。 +- [點擊](https://developer.mozilla.org/docs/Web/API/Element/click_event)： 使用者點擊物件，通常會是按鈕或是連結。 +- [右鍵選單](https://developer.mozilla.org/docs/Web/API/Element/contextmenu_event)： 使用者點擊滑鼠右鍵。 +- [選取](https://developer.mozilla.org/docs/Web/API/Element/select_event)： 使用者標記特定文字。 +- [輸入](https://developer.mozilla.org/docs/Web/API/Element/input_event)： 使用者輸入文字。 ## 建立遊戲 @@ -332,7 +332,7 @@ typedValueElement.addEventListener('input', () => { ## 複習與自學 -在瀏覽器上閱讀[所有開發者可運用的事件](https://developer.mozilla.org/en-US/docs/Web/Events)，想想你能在什麼樣的場合使用各個事件。 +在瀏覽器上閱讀[所有開發者可運用的事件](https://developer.mozilla.org/docs/Web/Events)，想想你能在什麼樣的場合使用各個事件。 ## 作業 diff --git a/5-browser-extension/1-about-browsers/translations/README.zh-tw.md b/5-browser-extension/1-about-browsers/translations/README.zh-tw.md index 0775976c..aae90b79 100644 --- a/5-browser-extension/1-about-browsers/translations/README.zh-tw.md +++ b/5-browser-extension/1-about-browsers/translations/README.zh-tw.md @@ -68,7 +68,7 @@ - [程式碼](../../start)，下載 `start` 資料夾，你需要修改裡面的程式碼檔案。 - [NPM](https://www.npmjs.com)，NPM 是一套軟體包管理工具，在本地安裝的軟體包會被列在 `package.json` 檔案中，成為網頁利用的資源。 -✅ 從[這個優質的學習套件](https://docs.microsoft.com/en-us/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-13441-cxa)中，學習更多關於軟體包管理。 +✅ 從[這個優質的學習套件](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-13441-cxa)中，學習更多關於軟體包管理。 花點時間看一下程式檔案結構 @@ -155,7 +155,7 @@ npm install 這堂課中你學到了一些瀏覽器的歷史。趁這個機會閱讀更多它的歷史，學習網際網路的發明者是如何構思網路的應用。這邊有一些實用的網頁： -[瀏覽器的歷史](https://www.mozilla.org/en-US/firefox/browsers/browser-history/) +[瀏覽器的歷史](https://www.mozilla.org/firefox/browsers/browser-history/) [網路的歷史](https://webfoundation.org/about/vision/history-of-the-web/) diff --git a/5-browser-extension/2-forms-browsers-local-storage/translations/README.hi.md b/5-browser-extension/2-forms-browsers-local-storage/translations/README.hi.md index 3b66a3cc..0c46a8a6 100644 --- a/5-browser-extension/2-forms-browsers-local-storage/translations/README.hi.md +++ b/5-browser-extension/2-forms-browsers-local-storage/translations/README.hi.md @@ -94,7 +94,7 @@ function reset(e) { - फॉर्म को छिपाएं - रीसेट बटन दिखाएं -आगे बढ़ने से पहले, ब्राउज़रों में उपलब्ध एक बहुत ही महत्वपूर्ण अवधारणा के बारे में सीखना उपयोगी है: [लोकलस्टोरेज](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage).लोकलस्टोरेज, ब्राउज़र में स्ट्रिंगस को 'की-वैल्यू' पेयर के रूप में स्टोर करने का एक उपयोगी तरीका है। इस प्रकार के वेब स्टोरेज को ब्राउजर में डेटा को मैनेज करने के लिए जावास्क्रिप्ट द्वारा मैनिपुलेट किया जा सकता है। लोकलस्टोरीज की समय सीमा समाप्त नहीं होती है, जबकि ब्राउजर के बंद होने पर एक अन्य तरह का वेब स्टोरेज, स्टोरेज साफ हो जाता है। विभिन्न प्रकार के भंडारण में उनके उपयोग के पक्ष और विपक्ष हैं। +आगे बढ़ने से पहले, ब्राउज़रों में उपलब्ध एक बहुत ही महत्वपूर्ण अवधारणा के बारे में सीखना उपयोगी है: [लोकलस्टोरेज](https://developer.mozilla.org/docs/Web/API/Window/localStorage).लोकलस्टोरेज, ब्राउज़र में स्ट्रिंगस को 'की-वैल्यू' पेयर के रूप में स्टोर करने का एक उपयोगी तरीका है। इस प्रकार के वेब स्टोरेज को ब्राउजर में डेटा को मैनेज करने के लिए जावास्क्रिप्ट द्वारा मैनिपुलेट किया जा सकता है। लोकलस्टोरीज की समय सीमा समाप्त नहीं होती है, जबकि ब्राउजर के बंद होने पर एक अन्य तरह का वेब स्टोरेज, स्टोरेज साफ हो जाता है। विभिन्न प्रकार के भंडारण में उनके उपयोग के पक्ष और विपक्ष हैं। > नोट - आपके ब्राउज़र एक्सटेंशन का अपना स्थानीय भंडारण है; मुख्य ब्राउज़र विंडो एक अलग उदाहरण है और अलग-अलग व्यवहार करता है। @@ -145,7 +145,7 @@ function setUpUser(apiKey, regionName) { ✅ 'REST' शब्द 'Representational State Transfer' के लिए है और इसमें डेटा लाने के लिए विभिन्न कॉन्फ़िगर किए गए URL का उपयोग करने की सुविधा है। डेवलपर्स के लिए उपलब्ध विभिन्न प्रकार के एपीआई पर थोड़ा शोध करें। क्या प्रारूप आपको अपील करता है? -इस फ़ंक्शन के बारे में ध्यान देने योग्य महत्वपूर्ण बातें हैं। पहले [`async` कीवर्ड](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) को नोटिस करें। अपने कार्यों को लिखना ताकि वे अतुल्यकालिक रूप से चलाते हैं इसका मतलब है कि वे एक कार्रवाई की प्रतीक्षा करते हैं, जैसे डेटा लौटाए जाने से पहले, पूरा होने से पहले। +इस फ़ंक्शन के बारे में ध्यान देने योग्य महत्वपूर्ण बातें हैं। पहले [`async` कीवर्ड](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) को नोटिस करें। अपने कार्यों को लिखना ताकि वे अतुल्यकालिक रूप से चलाते हैं इसका मतलब है कि वे एक कार्रवाई की प्रतीक्षा करते हैं, जैसे डेटा लौटाए जाने से पहले, पूरा होने से पहले। यहाँ `async` के बारे में एक त्वरित वीडियो है: @@ -200,7 +200,7 @@ async function displayCarbonUsage(apiKey, region) { - एपीआई के जवाब देने के बाद, आप इस डेटा को दिखाने के लिए अपने स्क्रीन के कुछ हिस्सों में इसके रिस्पॉन्स डेटा के विभिन्न तत्वों को असाइन करते हैं। - यदि कोई त्रुटि है, या कोई परिणाम नहीं है, तो आप एक त्रुटि संदेश दिखाते हैं। -✅ Asyncronous प्रोग्रामिंग पैटर्न का उपयोग करना आपके टूलबॉक्स में एक और बहुत उपयोगी उपकरण है। [विभिन्न तरीकों के बारे में](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function) पढ़ें आप इस प्रकार के कोड को कॉन्फ़िगर कर सकते हैं। +✅ Asyncronous प्रोग्रामिंग पैटर्न का उपयोग करना आपके टूलबॉक्स में एक और बहुत उपयोगी उपकरण है। [विभिन्न तरीकों के बारे में](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) पढ़ें आप इस प्रकार के कोड को कॉन्फ़िगर कर सकते हैं। बधाई हो! यदि आप अपना एक्सटेंशन बनाते हैं (`npm run build`) और इसे अपने एक्सटेंशन पेन में रिफ्रेश करें, तो आपके पास काम करने का एक्सटेंशन है! केवल एक चीज जो काम नहीं कर रही है वह आइकन है, और आप इसे अगले पाठ में ठीक कर देंगे। @@ -208,7 +208,7 @@ async function displayCarbonUsage(apiKey, region) { ## 🚀 चुनौती -हमने इन पाठों में अब तक कई प्रकार के एपीआई पर चर्चा की है। एक वेब एपीआई चुनें और गहराई से शोध करें कि यह क्या प्रदान करता है। उदाहरण के लिए, [HTML ड्रैग एंड ड्रॉप एपीआई](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) जैसे ब्राउज़रों के भीतर उपलब्ध एपीआई पर एक नज़र डालें। आपकी राय में एक महान एपीआई क्या है? +हमने इन पाठों में अब तक कई प्रकार के एपीआई पर चर्चा की है। एक वेब एपीआई चुनें और गहराई से शोध करें कि यह क्या प्रदान करता है। उदाहरण के लिए, [HTML ड्रैग एंड ड्रॉप एपीआई](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) जैसे ब्राउज़रों के भीतर उपलब्ध एपीआई पर एक नज़र डालें। आपकी राय में एक महान एपीआई क्या है? ## व्याख्यान उपरांत प्रश्नोत्तरी diff --git a/5-browser-extension/2-forms-browsers-local-storage/translations/README.zh-tw.md b/5-browser-extension/2-forms-browsers-local-storage/translations/README.zh-tw.md index 5e5b67b6..d1c75f08 100644 --- a/5-browser-extension/2-forms-browsers-local-storage/translations/README.zh-tw.md +++ b/5-browser-extension/2-forms-browsers-local-storage/translations/README.zh-tw.md @@ -94,7 +94,7 @@ function reset(e) { - 隱藏表單 - 顯示重置按鈕 -在下一步之前，你可以學習一些瀏覽器的重要成員：[LocalStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)。 LocalStorage 是瀏覽器儲存字串的有效方法，以 `key-value` 配對兩兩一組。這種儲存型態可以被 JavaScript 管理並控制瀏覽器的資料。LocalStorage 沒有期限，而另一款網頁儲存 SessionStorage 會在瀏覽器關閉時清除內容。不同的儲存方式有各自的優缺點。 +在下一步之前，你可以學習一些瀏覽器的重要成員：[LocalStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage)。 LocalStorage 是瀏覽器儲存字串的有效方法，以 `key-value` 配對兩兩一組。這種儲存型態可以被 JavaScript 管理並控制瀏覽器的資料。LocalStorage 沒有期限，而另一款網頁儲存 SessionStorage 會在瀏覽器關閉時清除內容。不同的儲存方式有各自的優缺點。 > 注意 ── 你的瀏覽器擴充套件有自己的 local storage。主瀏覽器視窗是不同的個體，兩者會做各自的行為。 @@ -145,7 +145,7 @@ function setUpUser(apiKey, regionName) { ✅ 'REST' 全名為 'Representational State Transfer'，提供各式各樣 URL 形式來抓取資料。對網路開發者的 API 種類做一點研究，什麼形式的 API 最吸引你？ -這條函式中有一個重要到值得紀錄的事情。第一點為[關鍵字 `async`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function)。讓你的函式非同步地執行，在行為完成前做等待，譬如資料被回傳。 +這條函式中有一個重要到值得紀錄的事情。第一點為[關鍵字 `async`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function)。讓你的函式非同步地執行，在行為完成前做等待，譬如資料被回傳。 這裡有一個簡短的影片介紹 `async`： @@ -200,7 +200,7 @@ async function displayCarbonUsage(apiKey, region) { - 當 API 回應時，你將各種物件填入回傳的數值，並輸出到畫面上中。 - 如果發生錯誤，或沒有結果產生，輸出錯誤訊息。 -✅ 非同步程式設計是一種實用的工具。閱讀[更多使用方法](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function)設定非同步程式的程式碼。 +✅ 非同步程式設計是一種實用的工具。閱讀[更多使用方法](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function)設定非同步程式的程式碼。 恭喜你！當你建制你的專案(`npm run build`)並在瀏覽器上刷新功能，你有個可以運作的應用套件了！現在只差圖示無法正常顯示，我們會在下一堂課中修正它。 @@ -208,7 +208,7 @@ async function displayCarbonUsage(apiKey, region) { ## 🚀 挑戰 -我們在課程中討論了不同種類的 API。選擇一樣網頁 API 並做更深度的研究。舉例來說，看看瀏覽器內支援的 API 如 [HTML Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API)。依你看，什麼決定了 API 的優劣？ +我們在課程中討論了不同種類的 API。選擇一樣網頁 API 並做更深度的研究。舉例來說，看看瀏覽器內支援的 API 如 [HTML Drag and Drop API](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API)。依你看，什麼決定了 API 的優劣？ ## 課後測驗 diff --git a/5-browser-extension/3-background-tasks-and-performance/translations/README.hi.md b/5-browser-extension/3-background-tasks-and-performance/translations/README.hi.md index fb2006dd..51368a55 100644 --- a/5-browser-extension/3-background-tasks-and-performance/translations/README.hi.md +++ b/5-browser-extension/3-background-tasks-and-performance/translations/README.hi.md @@ -22,7 +22,7 @@ ![एज प्रोफाइल](../images/profiler.png) -✅ किनारे पर प्रदर्शन पैनल पर [Microsoft दस्तावेज़ीकरण](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/performance?WT.mc_id=academy-13441-cxa) पर जाएँ +✅ किनारे पर प्रदर्शन पैनल पर [Microsoft दस्तावेज़ीकरण](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance?WT.mc_id=academy-13441-cxa) पर जाएँ > युक्ति: अपनी वेब साइट के स्टार्टअप समय का सही पठन करने के लिए, अपने ब्राउज़र का कैश साफ़ करें diff --git a/5-browser-extension/3-background-tasks-and-performance/translations/README.zh-tw.md b/5-browser-extension/3-background-tasks-and-performance/translations/README.zh-tw.md index 80838d29..90e9dc8e 100644 --- a/5-browser-extension/3-background-tasks-and-performance/translations/README.zh-tw.md +++ b/5-browser-extension/3-background-tasks-and-performance/translations/README.zh-tw.md @@ -22,7 +22,7 @@ Performance 分頁包括了效能分析工具。開啟一個網頁，例如 http ![Edge 性能分析工具](../images/profiler.png) -✅ 造訪 [Microsoft 文件](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide/performance?WT.mc_id=academic-13441-cxa)觀看 Edge 的 Performance 分頁資訊 +✅ 造訪 [Microsoft 文件](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance?WT.mc_id=academic-13441-cxa)觀看 Edge 的 Performance 分頁資訊 > 提示：要取得真正的網頁開啟時間，記得清除你的瀏覽器快取。 diff --git a/6-space-game/1-introduction/translations/README.zh-tw.md b/6-space-game/1-introduction/translations/README.zh-tw.md index 51cff84a..56062798 100644 --- a/6-space-game/1-introduction/translations/README.zh-tw.md +++ b/6-space-game/1-introduction/translations/README.zh-tw.md @@ -29,7 +29,7 @@ 這個想法是結合 `classes` 與`繼承`的方式來在 class 中添加特定行為。 -✅ 繼承是一個重要概念。在[有關繼承的 MDN 文章中](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)學習更多內容。 +✅ 繼承是一個重要概念。在[有關繼承的 MDN 文章中](https://developer.mozilla.org/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)學習更多內容。 以程式碼來表達的話，一個遊戲物件通常會呈現這種形式： @@ -217,7 +217,7 @@ eventEmitter.on(Messages.HERO_MOVE_LEFT, () => { ## 複習與自學 -藉由[閱讀此連結](https://docs.microsoft.com/en-us/azure/architecture/patterns/publisher-subscriber?WT.mc_id=academic-13441-cxa)來認識更多關於發布與訂閱的設計模式。 +藉由[閱讀此連結](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber?WT.mc_id=academic-13441-cxa)來認識更多關於發布與訂閱的設計模式。 ## 作業 diff --git a/6-space-game/2-drawing-to-canvas/translations/README.zh-tw.md b/6-space-game/2-drawing-to-canvas/translations/README.zh-tw.md index fe34507e..2da4d2b4 100644 --- a/6-space-game/2-drawing-to-canvas/translations/README.zh-tw.md +++ b/6-space-game/2-drawing-to-canvas/translations/README.zh-tw.md @@ -8,7 +8,7 @@ Canvas 是 HTML 中的元素，預設上不帶有任何內容，就如一塊白板。你需要自己彩繪上去。 -✅ 在 MDN 上閱讀[更多關於 Canvas API](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)。 +✅ 在 MDN 上閱讀[更多關於 Canvas API](https://developer.mozilla.org/docs/Web/API/Canvas_API)。 這是它典型的宣告方式，位在頁面的 body 中： @@ -27,7 +27,7 @@ Canvas 是 HTML 中的元素，預設上不帶有任何內容，就如一塊白 Canvas 使用了笛卡爾座標系繪製圖案。因此有 x 軸與 y 軸來表達物件的所在地點。座標點 `0,0` 位在畫布的左上方；而右下方則是我們定義畫布的寬度與高度。 ![畫布網格](../canvas_grid.png) -> 圖片出自於 [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) +> 圖片出自於 [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) 要在 Canvas 物件上繪製圖案，你需要執行下列步驟： @@ -52,7 +52,7 @@ ctx.fillStyle = 'red'; ctx.fillRect(0,0, 200, 200) // x,y,width, height ``` -✅ Canvas API 主要是處理 2D 圖形，但你也可以在網頁中繪製 3D 圖形。要完成這個需求，你可以使用 [WebGL API](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API)。 +✅ Canvas API 主要是處理 2D 圖形，但你也可以在網頁中繪製 3D 圖形。要完成這個需求，你可以使用 [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API)。 你可以使用 Canvas API 繪製出這些物件： @@ -201,7 +201,7 @@ npm start ## 🚀 挑戰 -你已經學會繪製 2D 圖形的 Canvas API。看看 [WebGL API](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API)，試著繪製 3D 物件。 +你已經學會繪製 2D 圖形的 Canvas API。看看 [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API)，試著繪製 3D 物件。 ## 課後測驗 @@ -209,7 +209,7 @@ npm start ## 複習與自學 -[閱讀更多資料](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)，學習更多有關 Canvas API 的用法。 +[閱讀更多資料](https://developer.mozilla.org/docs/Web/API/Canvas_API)，學習更多有關 Canvas API 的用法。 ## 作業 diff --git a/6-space-game/5-keeping-score/translations/README.zh-tw.md b/6-space-game/5-keeping-score/translations/README.zh-tw.md index 67f002ce..0a622088 100644 --- a/6-space-game/5-keeping-score/translations/README.zh-tw.md +++ b/6-space-game/5-keeping-score/translations/README.zh-tw.md @@ -17,7 +17,7 @@ ctx.textAlign = "right"; ctx.fillText("show this on the screen", 0, 0); ``` -✅ 閱讀更多關於[在畫布上建立文字](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text)，你可以自由地豐富你的文字！ +✅ 閱讀更多關於[在畫布上建立文字](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text)，你可以自由地豐富你的文字！ ## 性命，一個遊戲概念 diff --git a/7-bank-project/1-template-route/README.md b/7-bank-project/1-template-route/README.md index ac413312..7ce2517d 100644 --- a/7-bank-project/1-template-route/README.md +++ b/7-bank-project/1-template-route/README.md @@ -41,7 +41,7 @@ If you want to create multiples screens for a web page, one solution would be to - You have to reload the entire HTML when switching screen, which can be slow. - It's difficult to share data between the different screens. -Another approach is have only one HTML file, and define multiple [HTML templates](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template) using the `