diff --git a/.github/workflows/azure-static-web-apps-happy-mud-02d95f10f.yml b/.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml similarity index 87% rename from .github/workflows/azure-static-web-apps-happy-mud-02d95f10f.yml rename to .github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml index d399a206..fc207b1f 100644 --- a/.github/workflows/azure-static-web-apps-happy-mud-02d95f10f.yml +++ b/.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml @@ -4,6 +4,10 @@ on: push: branches: - main + pull_request: + types: [opened, synchronize, reopened, closed] + branches: + - main jobs: build_and_deploy_job: @@ -18,7 +22,7 @@ jobs: id: builddeploy uses: Azure/static-web-apps-deploy@v1 with: - azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_HAPPY_MUD_02D95F10F }} + azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_ASHY_RIVER_0DEBB7803 }} repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments) action: "upload" ###### Repository/Build Configurations - These values can be configured to match your app requirements. ###### @@ -37,5 +41,5 @@ jobs: id: closepullrequest uses: Azure/static-web-apps-deploy@v1 with: - azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_HAPPY_MUD_02D95F10F }} + azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_ASHY_RIVER_0DEBB7803 }} action: "close" diff --git a/.github/workflows/stale.yml b/.github/workflows/stale.yml new file mode 100644 index 00000000..a4ef3b26 --- /dev/null +++ b/.github/workflows/stale.yml @@ -0,0 +1,27 @@ +# This workflow warns and then closes issues and PRs that have had no activity for a specified amount of time. +# +# You can adjust the behavior by modifying this file. +# For more information, see: +# https://github.com/actions/stale +name: Mark stale issues and pull requests + +on: + schedule: + - cron: '35 8 * * *' + +jobs: + stale: + + runs-on: ubuntu-latest + permissions: + issues: write + pull-requests: write + + steps: + - uses: actions/stale@v3 + with: + repo-token: ${{ secrets.GITHUB_TOKEN }} + stale-issue-message: 'This issue has not seen any action for a while! Closing for now, but it can be reopened at a later date.' + stale-pr-message: 'This PR has not seen any action for a while! Closing for now, but it can be reopened at a later date.' + stale-issue-label: 'no-issue-activity' + stale-pr-label: 'no-pr-activity' diff --git a/.gitignore b/.gitignore index 0a9b4b47..a0625636 100644 --- a/.gitignore +++ b/.gitignore @@ -13,7 +13,7 @@ # User-specific files (MonoDevelop/Xamarin Studio) *.userprefs -# Mono auto generated files +# Mono auto-generated files mono_crash.* # Build results @@ -40,7 +40,7 @@ bld/ dist/ -# Visual Studio 2017 auto generated files +# Visual Studio 2017 auto-generated files Generated\ Files/ # MSTest test Results @@ -354,4 +354,4 @@ MigrationBackup/ .ionide/ # Mac-specific -.DS_Store \ No newline at end of file +.DS_Store diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 724a76b9..4a59327e 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -2,11 +2,11 @@ This lesson covers the basics of programming languages. The topics covered here apply to most modern programming languages today. In the 'Tools of the Trade' section, you'll learn about useful software that helps you as a developer. -![Intro Programming](/sketchnotes/webdev101-programming.png) +![Intro Programming](../../sketchnotes/webdev101-programming.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## Pre-Lecture Quiz -[Pre-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/1) +[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1) ## Introduction @@ -21,21 +21,21 @@ In this lesson, we'll cover: ## What is Programming? -Programming (also known as coding) is the process of writing instructions to a device, such as a computer or mobile device. We write these instructions with a programming language, which is then interpreted by the device. These sets of instructions may be referred to by various names, but *program*, *computer program*, *application (app)*, and *executable* are a few popular names. +Programming (also known as coding) is the process of writing instructions for a device such as a computer or mobile device. We write these instructions with a programming language, which is then interpreted by the device. These sets of instructions may be referred to by various names, but *program*, *computer program*, *application (app)*, and *executable* are a few popular names. -A *program* can be anything that is written with code; websites, games, and phone apps are programs. While it's possible to create a program without writing code, the underlying logic is interpreted to the device and that logic was most likely written with code. A program that is *running* or *executing code* is carrying out instructions. The device that you're currently reading this lesson with is running a program to print it to your screen. +A *program* can be anything that is written with code; websites, games, and phone apps are programs. While it's possible to create a program without writing code, the underlying logic is interpreted by the device and that logic was most likely written with code. A program that is *running* or *executing* code is carrying out instructions. The device that you're reading this lesson with is running a program to print it to your screen. ✅ Do a little research: who is considered to have been the world's first computer programmer? ## Programming Languages -Programming languages serve a main purpose: for developers to build instructions to send to a device. Devices only can understand binary (1s and 0s), and for *most* developers that's not a very efficient way to communicate. Programming languages are a vehicle for communication between humans and computers. +Programming languages enable developers to write instructions for a device. Devices can only understand binary (1s and 0s), and for *most* developers that's not a very efficient way to communicate. Programming languages are the vehicle for communication between humans and computers. Programming languages come in different formats and may serve different purposes. For example, JavaScript is primarily used for web applications, while Bash is primarily used for operating systems. *Low level languages* typically require fewer steps than *high level languages* for a device to interpret instructions. However, what makes high level languages popular is their readability and support. JavaScript is considered a high level language. -The following code illustrates the difference between a high level language with JavaScript and low level language with ARM assembly code. +The following code illustrates the difference between a high level language with JavaScript and a low level language with ARM assembly code. ```javascript let number = 10 @@ -78,15 +78,15 @@ Believe it or not, *they're both doing the same thing*: printing a Fibonacci seq ✅ A Fibonacci sequence is [defined](https://en.wikipedia.org/wiki/Fibonacci_number) as a set of numbers such that each number is the sum of the two preceding ones, starting from 0 and 1. -## Elements of a program +## Elements of a Program A single instruction in a program is called a *statement* and will usually have a character or line spacing that marks where the instruction ends, or *terminates*. How a program terminates varies with each language. -Most programs rely on using data from a user or elsewhere, where statements may rely on data to carry out instructions. Data can change how a program behaves, so programming languages come with a way to temporarily store data that can be used later. This data is called *variables*. Variables are statements that instruct a device to save data in its memory. Variables in programs are similar to ones in algebra, where they have a unique name and their value may change over time. +Statements within a program may rely on data provided by a user or elsewhere to carry out instructions. Data can change how a program behaves, so programming languages come with a way to temporarily store data so that it can be used later. These are called *variables*. Variables are statements that instruct a device to save data in its memory. Variables in programs are similar to variables in algebra, where they have a unique name and their value may change over time. -There's a chance that some statements will not be executed by a device. This is usually by design when written by the developer or by accident when an unexpected error occurs. This type of control of an application makes it more robust and maintainable. Typically these changes in control happen when certain decisions are met. A common statement in modern programming languages to control how a program is run is the `if..else` statement. +There's a chance that some statements will not be executed by a device. This is usually by design when written by the developer or by accident when an unexpected error occurs. This type of control over an application makes it more robust and maintainable. Typically, these changes in control happen when certain conditions are met. A common statement used in modern programming to control how a program runs is the `if..else` statement. -✅ You'll learn more about this type of statement in subsequent lessons +✅ You'll learn more about this type of statement in subsequent lessons. ## Tools of the Trade @@ -94,20 +94,20 @@ There's a chance that some statements will not be executed by a device. This is > 🎥 Click the image above for a video about tooling -In this section, you'll learn about some software that you might find very useful as you start your professional development journey. +In this section, you'll learn about some software that you may find to be very useful as you start your professional development journey. -A **development environment** is a unique set of tools and features that a developer will use often when writing software. Some of these tools have been customized for a developer specific needs, and may change over time if a developer changes priorities in work or personal projects, or when they use a different programming language. Development environments are as unique as the developers who use them. +A **development environment** is a unique set of tools and features that a developer uses often when writing software. Some of these tools have been customized for a developer's specific needs, and may change over time if that developer changes priorities in work, personal projects, or when they use a different programming language. Development environments are as unique as the developers who use them. ### Editors -One of the most crucial tools for software development is the editor. Editors are where you write your code and sometimes where you will run your code. +One of the most crucial tools for software development is the editor. Editors are where you write your code and sometimes where you run your code. Developers rely on editors for a few additional reasons: -- *Debugging* Discovering bugs and errors by stepping through code, line by line. Some editors have debugging capabilities, or can be customized and added for specific programming languages. -- *Syntax highlighting* Adds colors and text formatting to code, makes it easier to read. Most editors allow customized syntax highlighting. -- *Extensions and Integrations* Additions that are specialized for developers, by developers, for access to additional tools that aren't built into the base editor. For example, many developers also need a way to document their code and explain how it works and will install a spell check extension to check for typos. Most of these additions are intended for use within a specific editor, and most editors come with a way to search for available extensions. -- *Customization* Most editors are extremely customizable, and each developer will have their own unique development environment that suits their needs. Many also allow developers to create their own extensions. +- *Debugging* helps uncover bugs and errors by stepping through the code, line by line. Some editors have debugging capabilities; they can be customized and added for specific programming languages. +- *Syntax highlighting* adds colors and text formatting to code, making it easier to read. Most editors allow customized syntax highlighting. +- *Extensions and Integrations* are specialized tools for developers, by developers. These tools weren't built into the base editor. For example, many developers document their code to explain how it works. They may install a spell check extension to help find typos within the documentation. Most extensions are intended for use within a specific editor, and most editors come with a way to search for available extensions. +- *Customization* enables developers to create a unique development environment to suit their needs. Most editors are extremely customizable and may also allow developers to create custom extensions. #### Popular Editors and Web Development Extensions @@ -122,9 +122,9 @@ Developers rely on editors for a few additional reasons: ### Browsers -Another crucial tool is the browser. Web developers rely on the browser to observe how their code runs on the web, it's also used to view visual elements of a web page that are written in the editor, like HTML. +Another crucial tool is the browser. Web developers rely on the browser to see how their code runs on the web. It's also used to display the visual elements of a web page that are written in the editor, like HTML. -Many browsers come with *developer tools* (DevTools) that contain a set of helpful features and information to assist developers to collect and capture important insights about their application. For example: If a web page has errors, it's sometimes helpful to know when they occurred. DevTools in a browser can be configured to capture this information. +Many browsers come with *developer tools* (DevTools) that contain a set of helpful features and information to help developers collect and capture important information about their application. For example: If a web page has errors, it's sometimes helpful to know when they occurred. DevTools in a browser can be configured to capture this information. #### Popular Browsers and DevTools @@ -134,7 +134,7 @@ Many browsers come with *developer tools* (DevTools) that contain a set of helpf ### Command Line Tools -Some developers prefer a less graphical view for their daily tasks and rely on the command line to achieve this. Developing code requires a significant amount of typing, and some developers prefer to not disrupt their flow on the keyboard and will use keyboard shortcuts to swap between desktop windows, work on different files, and use tools. Most tasks can be completed with a mouse, but one benefit of using the command line is that a lot can be done with command line tools without the need of swapping between the mouse and keyboard. Another benefit of the command line is that they're configurable and you can save your custom configuration, change it later, and also import it to new development machines. Because development environments are so unique to each developer, some will avoid using the command line, some will rely on it entirely, and some prefer a mix of the two. +Some developers prefer a less graphical view for their daily tasks and rely on the command line to achieve this. Writing code requires a significant amount of typing and some developers prefer to not disrupt their flow on the keyboard. They will use keyboard shortcuts to swap between desktop windows, work on different files, and use tools. Most tasks can be completed with a mouse, but one benefit of using the command line is that a lot can be done with command line tools without the need of swapping between the mouse and keyboard. Another benefit of the command line is that they're configurable and you can save a custom configuration, change it later, and import it to other development machines. Because development environments are so unique to each developer, some will avoid using the command line, some will rely on it entirely, and some prefer a mix of the two. ### Popular Command Line Options @@ -169,7 +169,7 @@ Options for the command line will differ based on the operating system you use. ### Documentation -When a developer wants to learn something new, they'll most likely turn to documentation to learn how to use it. Developers rely on documentation often to guide them through how to use tools and languages properly, and also to gain deeper knowledge of how it works. +When a developer wants to learn something new, they'll most likely turn to documentation to learn how to use it. Developers often rely on documentation to guide them through how to use tools and languages properly, and also to gain deeper knowledge of how it works. #### Popular Documentation on Web Development @@ -187,11 +187,11 @@ When a developer wants to learn something new, they'll most likely turn to docum Compare some programming languages. What are some of the unique traits of JavaScript vs. Java? How about COBOL vs. Go? ## Post-Lecture Quiz -[Post-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/2) +[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2) ## Review & Self Study -Study a bit on the different languages available to the programmer. Try to write a line in one language, and then redo it in two others. What do you learn? +Study a bit on the different languages available to the programmer. Try to write a line in one language, and then rewrite it in two others. What did you learn? ## Assignment diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.el.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.el.md index f1a0d6fb..c7f842e1 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.el.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.el.md @@ -6,7 +6,7 @@ > Σκίτσο από [Tomomi Imura](https://twitter.com/girlie_mac) ## Pre-Lecture Quiz -[Pre-Lecture Quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/1?loc=gr) +[Pre-Lecture Quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1?loc=gr) ## Εισαγωγή @@ -183,7 +183,7 @@ back add r0,r1 Συγκρίνετε μερικές γλώσσες προγραμματισμού. Ποια είναι τα μοναδικά χαρακτηριστικά που έχει η JavaScript και δεν έχει η Java και το αντίστροφο; Τι γίνεται με τη COBOL εναντίον της Go; ## Post-Lecture Quiz -[Post-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/2?loc=gr) +[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2?loc=gr) ## Review & Self Study 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..349ff82b 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 @@ -5,7 +5,7 @@ Esta lección cubre los conceptos básicos de los lenguajes de programación. Lo ![Intro Programming](/sketchnotes/webdev101-programming.png) > Dibujo por [Tomomi Imura](https://twitter.com/girlie_mac) -## [Cuestionario](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/1) +## [Cuestionario](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1) ### Introducción En esta lección, cubriremos: @@ -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. @@ -182,7 +182,7 @@ Cuando un desarrollador quiere aprender algo nuevo, lo más probable es que recu Compara algunos lenguajes de programación. ¿Cuáles son algunos de los rasgos únicos de JavaScript frente a Java? ¿Qué hay de COBOL vs. Go? -## [Prueba Post-lectura](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/2) +## [Prueba Post-lectura](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2) ## Revisión y autoestudio diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.fil.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.fil.md index 5fe8129a..ee83016d 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.fil.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.fil.md @@ -6,7 +6,7 @@ Sinasaklaw ng araling ito ang mga pangunahing kaalaman sa mga programming langua > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## Pagsusulit bago ang lektura -[Pre-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/1) +[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1) ## Panimula @@ -187,7 +187,7 @@ Kapag ang isang developer ay gustong matuto ng bago, malamang na bumaling sila s Ihambing ang ilang mga programming language. Ano ang ilan sa mga natatanging katangian ng JavaScript vs. Java? Kumusta naman ang COBOL vs. Go? ## Pagsusulit pagkatapos ng Lektura -[Post-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/2) +[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2) ## Pagsusuri diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.fr.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.fr.md index cab1d13d..0d47b375 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.fr.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.fr.md @@ -6,7 +6,7 @@ Cette leçon couvre les bases des langages de programmation. Les sujets abordés > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## Quiz préalable -[Quiz préalable](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/1?loc=fr) +[Quiz préalable](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1?loc=fr) ## introduction @@ -182,7 +182,7 @@ Lorsqu'un développeur souhaite apprendre quelque chose de nouveau, il se tourne Comparez quelques langages de programmation. Quelles sont certaines des caractéristiques uniques de JavaScript par rapport à Java? Et COBOL vs Go? ## Quiz de validation des connaissances -[Quiz de validation des connaissances](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/2?loc=fr) +[Quiz de validation des connaissances](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2?loc=fr) ## Révision et auto-apprentissage diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.hi.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.hi.md index 8355f34f..21a83205 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.hi.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.hi.md @@ -6,7 +6,7 @@ >[टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा स्केचनेट ## पूर्व व्याख्यान प्रश्नोत्तरी -[पूर्व व्याख्यान प्रश्नोत्तरी](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/1?loc=hi) +[पूर्व व्याख्यान प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1?loc=hi) ## परिचय @@ -183,7 +183,7 @@ back add r0,r1 कुछ प्रोग्रामिंग भाषाओं की तुलना करें। जावास्क्रिप्ट बनाम जावा के कुछ विशिष्ट लक्षण क्या हैं? COBOL बनाम GO के बारे मे? ## व्याख्यान उपरांत प्रश्नोत्तरी -[व्याख्यान उपरांत प्रश्नोत्तरी](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/2?loc=hi) +[व्याख्यान उपरांत प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2?loc=hi) ## समीक्षा और स्व अध्ययन diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.id.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.id.md index 54a3989b..35aac0ec 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.id.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.id.md @@ -7,7 +7,7 @@ Pelajaran ini mencakup dasar-dasar bahasa pemrograman. Topik yang dibahas di sin ## Kuis Pra-Kuliah -[Kuis pra-kuliah](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/1?loc=id) +[Kuis pra-kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1?loc=id) ## Pengantar @@ -185,7 +185,7 @@ Bandingkan beberapa bahasa pemrograman. Apa saja ciri-ciri unik JavaScript vs. J ## Kuis Pasca-Kuliah -[Kuis pasca-kuliah](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/2?loc=id) +[Kuis pasca-kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2?loc=id) ## Ulasan & Belajar Mandiri diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.it.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.it.md index c652e105..b8b87da6 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.it.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.it.md @@ -6,7 +6,7 @@ Questa lezione tratta delle basi dei linguaggi di programmazione. Gli argomenti > Sketchnote di [Tomomi Imura](https://twitter.com/girlie_mac) ## Quiz Pre-Lezione -[Quiz Pre-Lezione](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/1?loc=it) +[Quiz Pre-Lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1?loc=it) ## Introduzione @@ -183,7 +183,7 @@ Quando uno sviluppatore vuole imparare qualcosa di nuovo, per la maggior parte d Confrontate alcuni linguaggi di programmazione. Quali sono i tratti univoci di JavaScript rispetto a Java? E COBOL rispetto a Go? ## Quiz Post-Lezione -[Quiz Post-Lezione](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/2?loc=it) +[Quiz Post-Lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2?loc=it) ## Revisione e Auto Istruzione diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ja.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ja.md index 8c8e1aad..938d1c9a 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ja.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ja.md @@ -8,7 +8,7 @@ > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## 事前クイズ -[事前クイズ](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/1?loc=ja) +[事前クイズ](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1?loc=ja) ## Introduction @@ -236,7 +236,7 @@ JavaScriptとJavaの特徴は？ COBOLとGoについては？ ## 事後テスト -[事後テスト](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/1?loc=ja) +[事後テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1?loc=ja) ## レビュー & 自習 diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ko.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ko.md index ba3c3394..e77bd3e7 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ko.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ko.md @@ -6,7 +6,7 @@ > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## 강의 전 퀴즈 -[Pre-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/1?loc=ko) +[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1?loc=ko) ## 소개 @@ -183,7 +183,7 @@ command line 옵션은 사용하는 운영체제에 따라 다릅니다. 일부 프로그래밍 언어를 비교하십시오. JavaScript와 자바의 특징은 무엇입니까? COBOL과 Go는 어떻습니까? ## 강의 후 퀴즈 -[Post-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/2?loc=ko) +[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2?loc=ko) ## 리뷰 & 자기주도 학습 diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ms.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ms.md index a0e08234..18b02e41 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ms.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ms.md @@ -6,7 +6,7 @@ Pelajaran ini merangkumi asas bahasa pengaturcaraan. Topik yang anda akan belaja > Sketchnote karya [Tomomi Imura](https://twitter.com/girlie_mac) ## Kuiz Pra-Kuliah -[Kuiz Pra-Kuliah](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/1) +[Kuiz Pra-Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1) ## Pengenalan @@ -181,7 +181,7 @@ Apabila pembangun ingin mempelajari sesuatu yang baru, kemungkinan besar mereka Bandingkan beberapa bahasa pengaturcaraan. Apa ciri unik JavaScript berbanding dengan Java? Bagaimanakah dengan COBOL vs. Go? ## Kuiz Pasca Kuliah -[Kuiz Pasca Kuliah](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/2) +[Kuiz Pasca Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2) ## Mengkaji sendiri & Belajar sendiri diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.nl.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.nl.md index a0eacf2a..c809065b 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.nl.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.nl.md @@ -7,7 +7,7 @@ Deze les beschrijft de basis over programmeertalen. De onderwerpen zijn van toep ## Pre-Lecture Quiz -[Pre-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/1) +[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1) ## Introductie @@ -184,7 +184,7 @@ Wanneer een ontwikkelaar iets nieuws wil leren dan zullen ze waarschijnlijk de b Vergelijk wat programmeertalen. Wat zijn unieke kenmerken van JavaScript vs. Java. En het verschil tussen COBOL en Go? ## Post-Lecture Quiz -[Post-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/2) +[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2) ## Review & Zelfstudie diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.np.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.np.md new file mode 100644 index 00000000..0e8bf117 --- /dev/null +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.np.md @@ -0,0 +1,97 @@ +# प्रोग्रामिङ भाषाहरू र व्यापारका उपकरणहरूको परिचय + +यो पाठले प्रोग्रामिङ भाषाहरूको आधारभूत कुराहरू समेट्छ। यहाँ समेटिएका विषयहरू आजका अधिकांश आधुनिक प्रोग्रामिङ भाषाहरूमा लागू हुन्छन्। 'व्यापारका उपकरणहरू' खण्डमा, तपाईंले विकासकर्ताको रूपमा मद्दत गर्ने उपयोगी सफ्टवेयरको बारेमा सिक्नुहुनेछ। + +![Intro Programming](../../../sketchnotes/webdev101-programming.png) +> [Tomomi Imura](https://twitter.com/girlie_mac) द्वारा स्केचनोट + +## प्रि-लेक्चर क्विज +[प्री-लेक्चर क्विज](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/1) + +## परिचय + +यस पाठमा, हामी कभर गर्नेछौं: + +- प्रोग्रामिङ भनेको के हो? +- प्रोग्रामिङ भाषाहरूको प्रकार +- कार्यक्रमको आधारभूत तत्वहरू +- व्यावसायिक विकासकर्ताको लागि उपयोगी सफ्टवेयर र उपकरण + +> तपाईंले [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming?WT.mc_id=academic-13441-cxa) मा यो पाठ लिन सक्नुहुन्छ! + +## प्रोग्रामिङ भनेको के हो? + +प्रोग्रामिङ (कोडिङ पनि भनिन्छ) कम्प्युटर वा मोबाइल उपकरण जस्ता उपकरणका लागि निर्देशनहरू लेख्ने प्रक्रिया हो। हामी यी निर्देशनहरू प्रोग्रामिङ भाषाको साथ लेख्छौं, जुन त्यसपछि उपकरणद्वारा व्याख्या गरिन्छ। निर्देशनहरूको यी सेटहरू विभिन्न नामहरूद्वारा उल्लेख गर्न सकिन्छ, तर *कार्यक्रम*, *कम्प्युटर प्रोग्राम*, *एप्लिकेशन (एप)*, र *कार्यान्वयनयोग्य* केही लोकप्रिय नामहरू हुन्। + +एक *कार्यक्रम* कोड संग लेखिएको कुनै पनि हुन सक्छ; वेबसाइटहरू, खेलहरू, र फोन एपहरू कार्यक्रमहरू हुन्। कोड नलिइकन एउटा कार्यक्रम सिर्जना गर्न सम्भव भए पनि, अन्तर्निहित तर्कलाई यन्त्रद्वारा व्याख्या गरिन्छ र त्यो तर्क सम्भवतः कोडसँग लेखिएको थियो। एउटा प्रोग्राम जुन * चलिरहेको * वा * कार्यान्वयन * कोड निर्देशनहरू पूरा गर्दैछ। तपाईंले यो पाठ पढिरहनुभएको यन्त्रले यसलाई तपाईंको स्क्रिनमा प्रिन्ट गर्नको लागि एउटा कार्यक्रम चलाउँदैछ। + +✅ थोरै अनुसन्धान गर्नुहोस्: संसारको पहिलो कम्प्युटर प्रोग्रामर कसलाई मानिन्छ? + +## प्रोग्रामिङ भाषाहरू + +प्रोग्रामिङ भाषाहरूले विकासकर्ताहरूलाई उपकरणको लागि निर्देशनहरू लेख्न सक्षम बनाउँछन्। यन्त्रहरूले बाइनरी (1s र 0s) मात्र बुझ्न सक्छन्, र *धेरै* विकासकर्ताहरूका लागि यो सञ्चार गर्ने एकदमै प्रभावकारी तरिका होइन। प्रोग्रामिङ भाषाहरू मानिसहरू र कम्प्युटरहरू बीच सञ्चारको माध्यम हो। + +प्रोग्रामिङ भाषाहरू विभिन्न ढाँचाहरूमा आउँछन् र विभिन्न उद्देश्यहरू पूरा गर्न सक्छन्। उदाहरणका लागि, जाभास्क्रिप्ट मुख्यतया वेब अनुप्रयोगहरूको लागि प्रयोग गरिन्छ, जबकि Bash मुख्य रूपमा अपरेटिङ सिस्टमहरूको लागि प्रयोग गरिन्छ। + +*निम्न स्तरका भाषाहरू* लाई निर्देशनहरू व्याख्या गर्न यन्त्रको लागि *उच्च स्तरका भाषाहरू* भन्दा कम चरणहरू चाहिन्छ। यद्यपि, उच्च स्तरका भाषाहरूलाई लोकप्रिय बनाउने कुरा भनेको तिनीहरूको पठनीयता र समर्थन हो। जाभास्क्रिप्टलाई उच्च स्तरको भाषा मानिन्छ। + +निम्न कोडले जाभास्क्रिप्टको साथ उच्च स्तरको भाषा र ARM असेंबली कोडको साथ निम्न स्तरको भाषा बीचको भिन्नतालाई चित्रण गर्दछ। + +```javascript +let number = 10 +let n1 = 0, n2 = 1, nextTerm; + +for (let i = 1; i <= number; i++) { + console.log(n1); + nextTerm = n1 + n2; + n1 = n2; + n2 = nextTerm; +} +``` + +```c + area ascen,code,readonly + entry + code32 + adr r0,thumb+1 + bx r0 + code16 +thumb + mov r0,#00 + sub r0,r0,#01 + mov r1,#01 + mov r4,#10 + ldr r2,=0x40000000 +back add r0,r1 + str r0,[r2] + add r2,#04 + mov r3,r0 + mov r0,r1 + mov r1,r3 + sub r4,#01 + cmp r4,#00 + bne back + end +``` + +विश्वास गर्नुहोस् वा नगर्नुहोस्, *तिनीहरू दुवैले एउटै काम गरिरहेका छन्*: 10 सम्मको फिबोनाची अनुक्रम प्रिन्ट गर्दै। + +✅ फिबोनाची अनुक्रम [परिभाषित](https://en.wikipedia.org/wiki/Fibonacci_number) संख्याहरूको सेटको रूपमा हो जसमा प्रत्येक संख्या ० र १ बाट सुरु हुने दुई अघिल्लो संख्याहरूको योग हो। + +## कार्यक्रमका तत्वहरू + +कार्यक्रममा एकल निर्देशनलाई *कथन* भनिन्छ र सामान्यतया एउटा क्यारेक्टर वा लाइन स्पेसिङ हुन्छ जहाँ निर्देशन समाप्त हुन्छ, वा *समाप्त हुन्छ*। कार्यक्रम कसरी समाप्त हुन्छ प्रत्येक भाषा अनुसार फरक हुन्छ। + +कार्यक्रम भित्रका कथनहरू निर्देशनहरू पूरा गर्नका लागि प्रयोगकर्ता वा अन्यत्र प्रदान गरिएको डाटामा भर पर्न सक्छन्। डेटाले प्रोग्रामको व्यवहार कसरी परिवर्तन गर्न सक्छ, त्यसैले प्रोग्रामिङ भाषाहरू अस्थायी रूपमा डेटा भण्डारण गर्ने तरिकाको साथ आउँछन् ताकि यसलाई पछि प्रयोग गर्न सकिन्छ। यसलाई *चर* भनिन्छ। चरहरू कथनहरू हुन् जसले यन्त्रलाई यसको मेमोरीमा डेटा बचत गर्न निर्देशन दिन्छ। कार्यक्रमहरूमा चरहरू बीजगणितका चरहरू जस्तै हुन्छन्, जहाँ तिनीहरूको एक अद्वितीय नाम हुन्छ र तिनीहरूको मान समयसँगै परिवर्तन हुन सक्छ। + +त्यहाँ एक मौका छ कि केहि कथनहरू यन्त्रद्वारा कार्यान्वयन गरिने छैन। यो सामान्यतया डिजाइन द्वारा हो जब विकासकर्ता द्वारा लेखिएको वा दुर्घटना द्वारा जब एक अप्रत्याशित त्रुटि हुन्छ। अनुप्रयोगमा यस प्रकारको नियन्त्रणले यसलाई अझ बलियो र मर्मतयोग्य बनाउँछ। सामान्यतया, नियन्त्रणमा यी परिवर्तनहरू हुन्छन् जब निश्चित सर्तहरू पूरा हुन्छन्। कार्यक्रम कसरी चल्छ भनेर नियन्त्रण गर्न आधुनिक प्रोग्रामिङमा प्रयोग गरिने सामान्य कथन `if..else` कथन हो। + +✅ तपाईले यस प्रकारको कथनको बारेमा पछिल्ला पाठहरूमा जान्नुहुनेछ। + +## व्यापार को उपकरण + +[![व्यापारका उपकरणहरू](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "व्यापारको उपकरण") + +> 🎥 टूलिङको बारेमा भिडियोको लागि माथिको छविमा क्लिक गर्नुहोस् + +यस खण्डमा, तपाइँ केहि सफ्टवेयर बारे जान्नुहुनेछ जुन तपाइँ तपाइँ जस्तै धेरै उपयोगी हुन सक्छ 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..096e0afe 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 @@ -1,6 +1,6 @@ # Introdução a Linguagens de Programação e Ferramentas -Essa lição trata dos básicos de linguagens de programação. Os tópicos tratados aqui se aplicam na maioria das linguages de prorgamação modernas. Na sessão 'Ferramentas', você vai aprender sobre softwares úteis que ajudarão como uma pessoa desenvolvedora. +Essa lição trata dos básicos de linguagens de programação. Os tópicos tratados aqui se aplicam na maioria das linguagens de programação modernas. Na sessão 'Ferramentas', você vai aprender sobre softwares úteis que ajudarão como uma pessoa desenvolvedora. ![Introdução a Programação](/sketchnotes/webdev101-programming.png) @@ -8,7 +8,7 @@ Essa lição trata dos básicos de linguagens de programação. Os tópicos trat ## Quiz Pré-Lição -[Quiz Pré-Lição](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/1) +[Quiz Pré-Lição](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1) ## Introdução @@ -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. @@ -141,7 +141,7 @@ Muitos navegadores vêm com _ferramentas para desenvolvimento_ (DevTools) que co - [Chrome](https://developers.google.com/web/tools/chrome-devtools/) - [Firefox](https://developer.mozilla.org/docs/Tools) -### Ferramentas da Linah de Comando +### Ferramentas da Linha de Comando Algumas pessoas desenvolvedoras preferem uma visualização menos gráfica para suas tarefas diárias e contam com a linha de comando para fazer isso. O desenvolvimento de código requer uma quantidade significativa de digitação e algumas pessoas desenvolvedoras preferem não interromper seu fluxo no teclado e usam atalhos de teclado para alternar entre as janelas da área de trabalho, trabalhar em arquivos diferentes e usar ferramentas. A maioria das tarefas pode ser concluída com um mouse, mas um benefício de usar a linha de comando é que muito pode ser feito com ferramentas de linha de comando sem a necessidade de alternar entre o mouse e o teclado. Outro benefício da linha de comando é que ela é configurável ​​e você pode salvar sua configuração personalizada, alterá-la posteriormente e também importá-la para novas máquinas de desenvolvimento. Como os ambientes de desenvolvimento são tão exclusivos para cada pessoa desenvolvedora, algumas evitam o uso da linha de comando e outras dependem dela inteiramente e existem também aquelas que preferem uma combinação dos dois. @@ -203,7 +203,7 @@ Compare algumas linguagens de programação. Quais são algumas das característ ## Quiz Pós-Aula -[Quiz Pós-Aula](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/2) +[Quiz Pós-Aula](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2) ## Revisão & Autoestudo diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ru.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ru.md index 8774c935..c00bdc08 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ru.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ru.md @@ -8,7 +8,7 @@ ## Предлекционный квиз -[Предлекционный квиз](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/1) +[Предлекционный квиз](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1) ## Введение @@ -140,16 +140,16 @@ back add r0,r1 Некоторые разработчики предпочитают менее графическое представление для своих повседневных задач и полагаются на командную строку для достижения этой цели. Разработка кода требует значительного набора текста, и некоторые разработчики предпочитают не мешать работе с клавиатурой и будут использовать сочетания клавиш для переключения между окнами рабочего стола, работы с разными файлами и использования инструментов. Большинство задач можно выполнить с помощью мыши, но одним из преимуществ использования командной строки является то, что многое можно сделать с помощью инструментов командной строки без необходимости переключаться между мышью и клавиатурой. Еще одним преимуществом командной строки является то, что они настраиваются, и вы можете сохранить свою настраиваемую конфигурацию, изменить ее позже, а также импортировать ее на новые устройства для разработки. Поскольку среды разработки настолько уникальны для каждого разработчика, некоторые избегают использования командной строки, некоторые будут полностью полагаться на нее, а некоторые предпочитают сочетание двух. -### Популярные параметры командной строки +### Популярные варианты командной строки -Параметры командной строки зависят от используемой вами операционной системы. +Варианты командной строки зависят от используемой вами операционной системы. _💻 = предустановлен в операционной системе._ #### Windows - [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7?WT.mc_id=academic-13441-cxa) 💻 -- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-13441-cxa) (also known as CMD) 💻 +- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-13441-cxa) (также известный как CMD) 💻 - [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-13441-cxa) - [mintty](https://mintty.github.io/) @@ -167,7 +167,7 @@ _💻 = предустановлен в операционной системе. #### Популярные инструменты командной строки -- [Git](https://git-scm.com/) (💻 on most operating systems) +- [Git](https://git-scm.com/) (💻 в большинстве операционных систем) - [NPM](https://www.npmjs.com/) - [Yarn](https://classic.yarnpkg.com/en/docs/cli/) @@ -192,7 +192,7 @@ _💻 = предустановлен в операционной системе. ## Постлекционный квиз -[Постлекционный квиз](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/2) +[Постлекционный квиз](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2) ## Обзор и самообучение @@ -200,4 +200,4 @@ _💻 = предустановлен в операционной системе. ## Задание -[Чтение документации](assignment.md) +[Чтение документации](assignment.ru.md) diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ta.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ta.md new file mode 100644 index 00000000..b1bcc6ac --- /dev/null +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ta.md @@ -0,0 +1,198 @@ +# வர்த்தகத்தின் நிரலாக்க மொழிகள் மற்றும் கருவிகள் அறிமுகம் + +இந்த பாடம் நிரலாக்க மொழிகளின் அடிப்படைகளை உள்ளடக்கியது. இங்கே உள்ளடக்கப்பட்டுள்ள தலைப்புகள் இன்று பெரும்பாலான நவீன நிரலாக்க மொழிகளுக்கு பொருந்தும். 'வர்த்தககருவிகள்' பிரிவில், நீங்கள் ஒரு டெவலப்பராக உங்களுக்கு உதவும் பயனுள்ள மென்பொருள் பற்றி அறிந்து கொள்வீர்கள். + +![அறிமுக நிரலாக்கம்](/sketchnotes/webdev101-programming.png) +> ஸ்கெட்ச்நோட் [டோமோமி இமுரா](https://twitter.com/girlie_mac) + +## விரிவுரைக்கு முந்தைய வினாடி வினா +[விரிவுரைக்கு முந்தைய வினாடி வினா](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1?loc=ta) + +## அறிமுகம் + +இந்த பாடத்தில், நாங்கள் உள்ளடக்குவோம்: + +- நிரலாக்க என்றால் என்ன? +- நிரலாக்க மொழிகளின் வகைகள் +- ஒரு நிரலின் அடிப்படை கூறுகள் +- தொழில்முறை டெவலப்பர் பயனுள்ள மென்பொருள் மற்றும் கருவி + +> நீங்கள் இந்த பாடத்தை [மைக்ரோசாப்ட் கற்றல்](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming?WT.mc_id=academic-13441-cxa) பற்றி எடுத்துக் கொள்ளலாம்! + +## நிரலாக்க என்றால் என்ன?? + +நிரலாக்கம் (குறியீட்டு முறை என்றும் அழைக்கப்படுகிறது) என்பது கணினி அல்லது மொபைல் சாதனம் போன்ற சாதனத்திற்கு அறிவுறுத்தல்களை எழுதும் செயல்முறையாகும். இந்த வழிமுறைகளை நிரலாக்க மொழியுடன் எழுதுகிறோம், இது சாதனத்தால் விளக்கப்படுகிறது. இந்த அறிவுறுத்தல்களின் தொகுப்புகள் பல்வேறு பெயர்களால் குறிப்பிடப்படலாம், ஆனால் *நிரல்*, *கணினி நிரல்*, *பயன்பாடு (பயன்பாடு)*, மற்றும் *செயல்படுத்தக்கூடிய* ஆகியவை சில பிரபலமான பெயர்கள் + +*நிரல்* என்பது குறியீடு டன் எழுதப்பட்ட தாக இருக்கலாம்; வலைத்தளங்கள், விளையாட்டுகள் மற்றும் தொலைபேசி பயன்பாடுகள் திட்டங்கள். குறியீட்டை எழுதாமல் ஒரு நிரலை உருவாக்க முடியும் என்றாலும், அடிப்படை தர்க்கம் சாதனத்திற்கு விளக்கப்படுகிறது மற்றும் அந்த தர்க்கம் பெரும்பாலும் குறியீட்டுடன் எழுதப்பட்டது. *இயங்கும்* அல்லது *செயல்படுத்தும் குறியீடு* என்று ஒரு நிரல் வழிமுறைகளை செயல்படுத்துகிறது. நீங்கள் தற்போது இந்த பாடத்தை படிக்கும் சாதனம் உங்கள் திரையில் அச்சிட ஒரு நிரலை இயக்குகிறது. + +✅ ஒரு சிறிய ஆராய்ச்சி செய்யுங்கள்: உலகின் முதல் கணினி நிரலாளராக யார் கருதப்படுகிறார்கள்? + +## நிரலாக்க மொழிகள் + +நிரலாக்க மொழிகள் ஒரு முக்கிய நோக்கத்தை வழங்குகின்றன: டெவலப்பர்கள் ஒரு சாதனத்திற்கு அனுப்புவதற்கான வழிமுறைகளை உருவாக்கவேண்டும். சாதனங்கள் மட்டுமே பைனரி (1 கள் மற்றும் 0 கள்) புரிந்து கொள்ள முடியும், மற்றும் *மிகவும்* டெவலப்பர்கள் தொடர்பு கொள்ள மிகவும் திறமையான வழி அல்ல. நிரலாக்க மொழிகள் மனிதர்களுக்கும் கணினிகளுக்கும் இடையிலான தகவல் தொடர்புக்கான ஒரு வாகனமாகும். + +நிரலாக்க மொழிகள் வெவ்வேறு வடிவங்களில் வருகின்றன மற்றும் வெவ்வேறு நோக்கங்களுக்காக சேவை செய்யலாம். எடுத்துக்காட்டாக, ஜாவாஸ்கிரிப்ட் முதன்மையாக வலை பயன்பாடுகளுக்கு பயன்படுத்தப்படுகிறது, அதே நேரத்தில் பாஷ் முதன்மையாக இயக்க முறைமைகளுக்கு பயன்படுத்தப்படுகிறது. + +*குறைந்த நிலை மொழிகள்* பொதுவாக வழிமுறைகளை விளக்குவதற்கு ஒரு சாதனத்திற்கு *உயர் மட்ட மொழிகளை* விட குறைவான படிகள் தேவைப்படுகின்றன. எனினும், உயர் மட்ட மொழிகளை பிரபலமாக்குவது அவற்றின் வாசிப்பு மற்றும் ஆதரவு ஆகும். ஜாவாஸ்கிரிப்ட் ஒரு உயர் மட்ட மொழியாகக் கருதப்படுகிறது. + +பின்வரும் குறியீடு ஜாவாஸ்கிரிப்ட் கொண்ட உயர் நிலை மொழிக்கும் ஏஆர்எம் அசெம்பிளி குறியீட்டுடன் குறைந்த நிலை மொழிக்கும் இடையிலான வித்தியாசத்தை விளக்குகிறது. + +```javascript +let number = 10 +let n1 = 0, n2 = 1, nextTerm; + +for (let i = 1; i <= number; i++) { + console.log(n1); + nextTerm = n1 + n2; + n1 = n2; + n2 = nextTerm; +} +``` + +```c + area ascen,code,readonly + entry + code32 + adr r0,thumb+1 + bx r0 + code16 +thumb + mov r0,#00 + sub r0,r0,#01 + mov r1,#01 + mov r4,#10 + ldr r2,=0x40000000 +back add r0,r1 + str r0,[r2] + add r2,#04 + mov r3,r0 + mov r0,r1 + mov r1,r3 + sub r4,#01 + cmp r4,#00 + bne back + end +``` + +நம்பினால் நம்புங்கள், *அவர்கள் இருவரும் ஒரே காரியத்தைச் செய்கிறார்கள்*: 10 வரை ஒரு ஃபிபோனச்சி வரிசையை அச்சிடுதல். + +✅ ஒரு ஃபிபோனச்சி வரிசை யானது [வரையறுக்கப்பட்ட](https://en.wikipedia.org/wiki/Fibonacci_number) எண்களின் தொகுப்பாகும், இது ஒவ்வொரு எண்ணும் 0 மற்றும் 1 இல் இருந்து தொடங்கும் இரண்டு முந்தைய எண்களின் தொகையாகும். + +## நிரலின் கூறுகள் + +நிரலில் உள்ள ஒரே ஒரு அறிவுறுத்தல் *அறிக்கை* என்று அழைக்கப்படுகிறது, மேலும் வழக்கமாக ஒரு கேரக்டர் அல்லது வரி இடைவெளி யைக் கொண்டிருக்கும், இது அறிவுறுத்தல் முடிவடையும் இடத்தில் குறிக்கிறது, அல்லது *நிறுத்தப்படும்*. ஒரு நிரல் எவ்வாறு முடிவடைகிறது என்பது ஒவ்வொரு மொழிக்கும் மாறுபடும். + +பெரும்பாலான நிரல்கள் ஒரு பயனர் அல்லது வேறு இடங்களிலிருந்து தரவைப் பயன்படுத்துவதை நம்பியுள்ளன, அங்கு அறிக்கைகள் அறிவுறுத்தல்களை மேற்கொள்ள தரவை நம்பலாம். ஒரு நிரல் எவ்வாறு நடந்துகொள்ளுகிறது என்பதை தரவு மாற்றலாம், எனவே நிரலாக்க மொழிகள் பின்னர் பயன்படுத்தக்கூடிய தரவை தற்காலிகமாக சேமிக்க ஒரு வழியுடன் வருகின்றன. இந்த தரவு *மாறிகள்* என்று அழைக்கப்படுகிறது. மாறிகள் என்பது ஒரு சாதனத்தின் நினைவகத்தில் தரவை சேமிக்க அறிவுறுத்தும் அறிக்கைகள். நிரல்களில் உள்ள மாறிகள் இயற்கணிதத்தில் உள்ளதைப் போலவே உள்ளன, அங்கு அவை ஒரு தனித்துவமான பெயரைக் கொண்டுள்ளன, மேலும் அவற்றின் மதிப்பு காலப்போக்கில் மாறலாம். + +சில அறிக்கைகள் ஒரு சாதனத்தால் செயல்படுத்தப்படாது என்று ஒரு வாய்ப்பு உள்ளது. இது பொதுவாக டெவலப்பர் எழுதும் போது வடிவமைப்பு அல்லது எதிர்பாராத பிழை ஏற்படும் போது தற்செயலாக இருக்கும். ஒரு பயன்பாட்டின் இந்த வகை கட்டுப்பாடு அதை மிகவும் வலுவானதாகவும் பராமரிக்கக்கூடியதாகவும் ஆக்குகிறது. பொதுவாக சில முடிவுகள் நிறைவேற்றப்படும் போது கட்டுப்பாட்டில் இந்த மாற்றங்கள் நிகழ்கின்றன. ஒரு நிரல் எவ்வாறு இயங்குகிறது என்பதைக் கட்டுப்படுத்த நவீன நிரலாக்க மொழிகளில் ஒரு பொதுவான அறிக்கை 'என்றால்.. வேறு ' அறிக்கை. + + +✅ அடுத்தடுத்த பாடங்களில் இந்த வகை அறிக்கையைப் பற்றி மேலும் அறிந்து கொள்வீர்கள் + +## வர்த்தககருவிகள் + +[![வர்த்தககருவிகள்](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Tools of the Trade") + +> 🎥 கருவியாக்கல் பற்றிய வீடியோவிற்கு மேலே உள்ள படத்தை கிளிக் செய்யவும் + +இந்தப் பிரிவில், உங்கள் தொழில்முறை வளர்ச்சிப் பயணத்தைத் தொடங்கும்போது நீங்கள் மிகவும் பயனுள்ளதாக க் காணக்கூடிய சில மென்பொருளைப் பற்றி நீங்கள் கற்றுக்கொள்வீர்கள். + +ஒரு **வளர்ச்சி சூழல்** மென்பொருள் எழுதும் போது ஒரு டெவலப்பர் அடிக்கடி பயன்படுத்தும் கருவிகள் மற்றும் அம்சங்கள் ஒரு தனிப்பட்ட தொகுப்பு ஆகும். இந்த கருவிகளில் சில ஒரு டெவலப்பர் குறிப்பிட்ட தேவைகளுக்கு தனிப்பயனாக்கப்பட்டிருக்கின்றன, மேலும் ஒரு டெவலப்பர் வேலை அல்லது தனிப்பட்ட திட்டங்களில் முன்னுரிமைகளை மாற்றினால் அல்லது அவர்கள் வேறு நிரலாக்க மொழியைப் பயன்படுத்தும்போது காலப்போக்கில் மாறலாம். வளர்ச்சி சூழல்கள் அவற்றைப் பயன்படுத்தும் டெவலப்பர்களைப் போலவே தனித்துவமானவை. + +### ஆசிரியர்கள் + +மென்பொருள் உருவாக்கத்திற்கான மிக முக்கியமான கருவிகளில் ஒன்று ஆசிரியர். ஆசிரியர்கள் நீங்கள் உங்கள் குறியீட்டை எழுதும் இடம் மற்றும் சில நேரங்களில் உங்கள் குறியீட்டை இயக்கும் இடம். + +டெவலப்பர்கள் ஒரு சில கூடுதல் காரணங்களுக்காக ஆசிரியர்களை நம்பியுள்ளனர்: + +- *பிழைநீக்குதல்* குறியீடு மூலம், வரி வரி மூலம் நுழைவதன் மூலம் பிழைகள் மற்றும் பிழைகளைக் கண்டறிதல். சில ஆசிரியர்கள் பிழைநீக்கதிறன்களைக் கொண்டுள்ளனர், அல்லது குறிப்பிட்ட நிரலாக்க மொழிகளுக்காக தனிப்பயனாக்கலாம் மற்றும் சேர்க்கலாம். +- *தொடரியல் சிறப்பித்துக் காட்டுதல்* வண்ணங்கள் மற்றும் உரை வடிவமைப்பை குறியீட்டுக்கு சேர்க்கிறது, படிக்க எளிதாக்குகிறது. பெரும்பாலான ஆசிரியர்கள் தனிப்பயனாக்கப்பட்ட தொடரியல் சிறப்பம்சத்தை அனுமதிக்கிறார்கள். +- *விரிவாக்கங்கள் மற்றும் ஒருங்கிணைப்புகள்* டெவலப்பர்கள், டெவலப்பர்கள், அடிப்படை ஆசிரியர் கட்டமைக்கப்படாத கூடுதல் கருவிகள் அணுகசிறப்பு என்று சேர்த்தல். உதாரணமாக, பல டெவலப்பர்கள் தங்கள் குறியீட்டை ஆவணப்படுத்தவும், அது எவ்வாறு செயல்படுகிறது என்பதை விளக்கவும் ஒரு வழி தேவை, மேலும் எழுத்துப்பிழைகளை சரிபார்க்க ஒரு எழுத்துப்பிழை காசோலை நீட்டிப்பை நிறுவும். இந்த சேர்த்தல் பெரும்பாலான ஒரு குறிப்பிட்ட ஆசிரியர் உள்ள பயன்படுத்த நோக்கம், மற்றும் பெரும்பாலான ஆசிரியர்கள் கிடைக்கும் நீட்டிப்புகள் தேட ஒரு வழி கொண்டு வருகின்றன. +- *தனிப்பயனாக்கு* பெரும்பாலான ஆசிரியர்கள் மிகவும் தனிப்பயனாக்கலாம், மேலும் ஒவ்வொரு டெவலப்பரும் தங்கள் தேவைகளுக்கு ஏற்ற தங்கள் சொந்த தனித்துவமான வளர்ச்சி சூழலைக் கொண்டிருப்பார்கள். பலர் டெவலப்பர்கள் தங்கள் சொந்த நீட்டிப்புகளை உருவாக்க அனுமதிக்கிறார்கள். + +#### பிரபலமான ஆசிரியர்கள் மற்றும் வலை மேம்பாட்டு நீட்டிப்புகள் + +- [விஷுவல் ஸ்டுடியோ குறியீடு](https://code.visualstudio.com/) + - [குறியீடு எழுத்துப்பிழை சரிபார்ப்பி](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) + - [லிவ் ஷர்](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack) + - [ப்ரெட்திர் - குறியீடு பொருள்](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) +- [அணு](https://atom.io/) + - [எழுத்துப்பிழை-சரிபார்த்தல்](https://atom.io/packages/spell-check) + - [டெலிடைப்](https://atom.io/packages/teletype) + - [அணு அழகுபடுத்தல்](https://atom.io/packages/atom-beautify) + +### மேய்வான்களில் + +மற்றொரு முக்கியமான கருவி உலாவி. வலை டெவலப்பர்கள் தங்கள் குறியீடு இணையத்தில் எவ்வாறு இயங்குகிறது என்பதைக் கண்காணிக்க உலாவியை நம்பியுள்ளனர், இது ஹெச்டிஎம்எல் போன்ற எடிட்டரில் எழுதப்பட்ட ஒரு வலைப் பக்கத்தின் காட்சி கூறுகளைக் காணவும் பயன்படுத்தப்படுகிறது. + +பல உலாவிகள் *டெவலப்பர் கருவிகள்* (தேவ்டூல்ஸ்) உடன் வருகின்றன, அவை டெவலப்பர்கள் தங்கள் பயன்பாட்டைப் பற்றிய முக்கியமான நுண்ணறிவுகளை சேகரிக்கவும் கைப்பற்றவும் உதவுவதற்கு பயனுள்ள அம்சங்கள் மற்றும் தகவல்களின் தொகுப்பைக் கொண்டுள்ளன. எடுத்துக்காட்டாக: வலைப்பக்கத்தில் பிழைகள் இருந்தால், அவை எப்போது நிகழ்ந்தன என்பதை அறிவது சில நேரங்களில் உதவியாக இருக்கும். இந்த தகவலை ப்வுசர் மூலம் கைப்பற்ற, ஒரு உலாவியில் உள்ள தேவ்டூல்களை உள்ளமைக்கலாம். + +#### பிரபலமான உலாவிகள் மற்றும் தேவ்டூல்ஸ் + +- [விளிம்பு](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium?WT.mc_id=academic-13441-cxa) +- [குரோம்](https://developers.google.com/web/tools/chrome-devtools/) +- [பயர்பாக்ஸ்](https://developer.mozilla.org/docs/Tools) + +### கட்டளை வரி கருவிகள் + +சில டெவலப்பர்கள் தங்கள் தினசரி பணிகளுக்கு குறைவான வரைகலை பார்வையை விரும்புகிறார்கள் மற்றும் இதை அடைய கட்டளை வரியை நம்புகிறார்கள். குறியீட்டை உருவாக்குவதற்கு குறிப்பிடத்தக்க அளவு தட்டச்சு தேவைப்படுகிறது, மேலும் சில டெவலப்பர்கள் விசைப்பலகையில் தங்கள் ஓட்டத்தை சீர்குலைக்க விரும்பவில்லை, மேலும் டெஸ்க்டாப் ஜன்னல்களுக்கு இடையில் பரிமாற்றம் செய்ய விசைப்பலகை குறுக்குவழிகளைபயன்படுத்துவார்கள், வெவ்வேறு கோப்புகளில் வேலை செய்வார்கள், கருவிகளைப் பயன்படுத்துவார்கள்.பெரும்பாலான பணிகளை சுட்டிமூலம் முடிக்கலாம், ஆனால் கட்டளை வரியைப் பயன்படுத்துவதன் ஒரு நன்மை என்னவென்றால், சுட்டி மற்றும் விசைப்பலகைக்கு இடையில் மாற்றவேண்டிய அவசியம் இல்லாமல் கட்டளை வரி கருவிகளைக் கொண்டு நிறைய செய்ய முடியும். கட்டளை வரிமற்றொரு நன்மை அவர்கள் கட்டமைக்கமுடியும் என்று மற்றும் நீங்கள் உங்கள் விருப்ப கட்டமைப்பு சேமிக்க முடியும், பின்னர் அதை மாற்ற, மேலும் புதிய வளர்ச்சி இயந்திரங்கள் அதை இறக்குமதி.வளர்ச்சி சூழல்கள் ஒவ்வொரு டெவலப்பருக்குமிகவும் தனித்துவமானவை என்பதால், சிலர் கட்டளை வரியைப் பயன்படுத்துவதைத் தவிர்ப்பார்கள், சிலர் அதை முற்றிலும் நம்புவார்கள், சிலர் இரண்டின் கலவையை விரும்புகிறார்கள். + +### பிரபலமான கட்டளை வரி விருப்பங்கள் + +நீங்கள் பயன்படுத்தும் இயக்க முறைமையின் அடிப்படையில் கட்டளை வரிக்கான விருப்பங்கள் வேறுபடும். + +*💻 = இயக்க முறைமையில் முன்நிறுவல் வருகிறது..* + +#### விண்டோஸ் + +- [பவர்ஷெல்](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7?WT.mc_id=academic-13441-cxa) 💻 +- [கட்டளை வரி](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-13441-cxa) (சி.எம்.டி என்றும் அழைக்கப்படுகிறது) 💻 +- [விண்டோஸ் முனையம்](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-13441-cxa) +- [புதினா](https://mintty.github.io/) + +#### MacOS + +- [முனையம்](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻 +- [ஐடெர்ம்](https://iterm2.com/) +- [பவர்ஷெல்](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7?WT.mc_id=academic-13441-cxa) + +#### Linux + +- [பாஸ்](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻 +- [கேடிஇ கான்சோல்](https://docs.kde.org/trunk5/en/konsole/konsole/index.html) +- [பவர்ஷெல்](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7?WT.mc_id=academic-13441-cxa) + +#### பிரபலமான கட்டளை வரி கருவிகள் + +- [கிட்](https://git-scm.com/) (💻 பெரும்பாலான இயக்க முறைமைகளில்) +- [என்பிஎம்](https://www.npmjs.com/) +- [யர்ன்](https://classic.yarnpkg.com/en/docs/cli/) + +### ஆவணச்சான்று வழக்காட்சி + +ஒரு டெவலப்பர் புதிய ஒன்றைக் கற்றுக்கொள்ள விரும்பும்போது, அதை எவ்வாறு பயன்படுத்துவது என்பதைக் கற்றுக்கொள்ள அவர்கள் பெரும்பாலும் ஆவணத்திற்குத் திரும்புவார்கள். டெவலப்பர்கள் கருவிகள் மற்றும் மொழிகளை எவ்வாறு சரியாகப் பயன்படுத்துவது என்பதன் மூலம் அவர்களுக்கு வழிகாட்டவும், அது எவ்வாறு செயல்படுகிறது என்பது பற்றிய ஆழமான அறிவைப் பெறவும் பெரும்பாலும் ஆவணங்களை நம்பியுள்ளனர். + +#### வலை அபிவிருத்தி பற்றிய பிரபலமான ஆவணப்படுத்தல் + +- [மொசில்லா டெவலப்பர் நெட்வொர்க் (எம்டிஎன்)](https://developer.mozilla.org/docs/Web), [பயர்பாக்ஸ்](https://www.mozilla.org/firefox/) வெளியீட்டாளர்களான மொசில்லாவிலிருந்து. +- [முன்னணி முதுநிலை](https://frontendmasters.com/learn/) +- [Web.dev](https://web.dev), கூகிள் இருந்து, [குரோம்](https://www.google.com/chrome/) வெளியீட்டாளர்கள். +- [மைக்ரோசாப்ட் இன் சொந்த டெவலப்பர் ஆவணம்](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), [மைக்ரோசாப்ட் எட்ஜ்](https://www.microsoft.com/edge) + +✅ சில ஆராய்ச்சிகளை செய்யுங்கள்: இப்போது நீங்கள் ஒரு வலை டெவலப்பரின் சூழலின் அடிப்படைகளை அறிந்திருக்கிறீர்கள், அதை ஒரு வலை வடிவமைப்பாளரின் சூழலுடன் ஒப்பிட்டு வேறுபடுத்திப் பாருங்கள். +--- + +## 🚀 அறைகூவல் + +சில நிரலாக்க மொழிகளை ஒப்பிடுக. ஜாவாஸ்கிரிப்ட் எதிராக ஜாவா வின் தனித்துவமான பண்புகள் யாவை? எப்படி கோபோல் எதிராக கோ பற்றி? + +## விரிவுரைக்குப் பிந்தைய வினாடி வினா +[விரிவுரைக்குப் பிந்தைய வினாடி வினா](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2?loc=ta) + +## ஆய்வு & சுய ஆய்வு + +நிரலாளர் களுக்கு கிடைக்கும் பல்வேறு மொழிகளில் ஒரு பிட் படிக்கவும். ஒரு மொழியில் ஒரு வரியை எழுத முயற்சிக்கவும், பின்னர் அதை மற்ற இரண்டு மொழிகளில் மீண்டும் செய்ய முயற்சிக்கவும். நீங்கள் என்ன கற்றுக்கொள்கிறீர்கள்? + +## வகுத்தமைத்தல் + +[ஆவணத்தைப் படித்தல்](assignment.ta.md) diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.zh-cn.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.zh-cn.md index 84c045ab..e0f53c45 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.zh-cn.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.zh-cn.md @@ -6,7 +6,7 @@ > 涂鸦笔记作者：[Tomomi Imura](https://twitter.com/girlie_mac) ## 课前小测 -[课前小测](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/1?loc=zh_cn) +[课前小测](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1?loc=zh_cn) ## 大纲 @@ -183,7 +183,7 @@ back add r0,r1 比较一些编程语言。JavaScript 和 Java 相互之间有什么独特的特征？COBOL 和 Go 之间呢？ ## 课后小测 -[课后小测](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/2?loc=zh_cn) +[课后小测](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2?loc=zh_cn) ## 复习 & 自学 diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.zh-tw.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.zh-tw.md index f3869833..c97e7512 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.zh-tw.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.zh-tw.md @@ -6,7 +6,7 @@ > 由[Tomomi Imura](https://twitter.com/girlie_mac) 繪製。 ## 課前測驗 -[課前測驗](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/1?loc=zh_tw) +[課前測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1?loc=zh_tw) ## 大綱 @@ -183,7 +183,7 @@ back add r0,r1 比較不同的程式語言： JavaScript 與 Java 間有什麼獨特的特徵? 那 COBOL 與 Go 呢? ## 課後測驗 -[課後測驗](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/2?loc=zh_tw) +[課後測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2?loc=zh_tw) ## 複習與自學 diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.es.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.es.md index d69c2cec..7758660c 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.es.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.es.md @@ -2,11 +2,11 @@ ## Instrucciones -Hay muchas herramientas que un desarrollador web puede necesitar, muchas de ellas se encuentran en la [Documentación de MDN - Herramientas del lado del cliente](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Seleccionar 3 herramientas que no sean las comentadas en el articulo, explicar por que un Desarrollador Web las debería usar, buscar una herramienta que pertenezca a esta categoria y compartir la documentación. No utilizar los ejemplos de herramientas brindados en la documentación de MDN. +Hay muchas herramientas que un desarrollador web puede necesitar, muchas de ellas se encuentran en la [Documentación de MDN - Herramientas del lado del cliente](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Seleccionar 3 herramientas que no sean las comentadas en el artículo, explicar por qué un Desarrollador Web las debería usar, buscar una herramienta que pertenezca a esta categoría y compartir la documentación. No utilizar los ejemplos de herramientas brindados en la documentación de MDN. -## Rubrica +## Rúbrica Ejemplo | Adecuado | Necesita mejorar --- | --- | -- | -| Explicar por qué el Desarrollador web usará la herramienta | Explicar como el desarrollador deberia usar la herramienta| Por qué un desarrollador usaría la herramienta. | +| Explicar por qué el Desarrollador web usará la herramienta | Explicar cómo el desarrollador debería usar la herramienta| Por qué un desarrollador usaría la herramienta. | 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.ta.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ta.md new file mode 100644 index 00000000..664e39ca --- /dev/null +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ta.md @@ -0,0 +1,12 @@ +# ஆவணத்தைப் படித்தல் + +## செயல்துறைக்கட்டளை + +ஒரு வலை டெவலப்பர் தேவைஎன்று பல கருவிகள் உள்ளன [வாடிக்கையாளர் பக்க கருவிகளுக்கு எம்டிஎன் இன் ஆவணங்கள்](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview).பாடத்தில் உள்ளடக்கப்படாத 3 கருவிகளைத் தேர்ந்தெடுத்து, ஒரு வலை டெவலப்பர் ஏன் அதைப் பயன்படுத்துவார் என்பதை விளக்கவும், இந்த வகையின் கீழ் வரும் ஒரு கருவியைத் தேடவும் மற்றும் அதன் ஆவணங்களைப் பகிர்ந்து கொள்ளவும். எம்டிஎன் ஐ ஆவணத்தில் ஒரே கருவி உதாரணத்தைப் பயன்படுத்த வேண்டாம். + + +## இயல் மேல்வரி + +பின்பற்றத்தக்க | போதிய | தேவை மேம்பாடு +--- | --- | -- | +|வலை உருவாக்குநர் ஏன் கருவியைப் பயன்படுத்துவார் என்பதை விளக்கினார்| எப்படி விளக்கினார், ஆனால் டெவலப்பர் ஏன் கருவியைப் பயன்படுத்துவார் என்று அல்ல| ஒரு டெவலப்பர் கருவியை எவ்வாறு அல்லது ஏன் பயன்படுத்துவார் என்பதைக் குறிப்பிடவில்லை | \ No newline at end of file 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/2-github-basics/README.md b/1-getting-started-lessons/2-github-basics/README.md index 6ae7622d..50d850ce 100644 --- a/1-getting-started-lessons/2-github-basics/README.md +++ b/1-getting-started-lessons/2-github-basics/README.md @@ -2,11 +2,11 @@ This lesson covers the basics of GitHub, a platform to host and manage changes to your code. -![Intro to GitHub](/sketchnotes/webdev101-github.png) +![Intro to GitHub](../../sketchnotes/webdev101-github.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## Pre-Lecture Quiz -[Pre-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/3) +[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3) ## Introduction @@ -44,7 +44,12 @@ You'll need both a folder with a code project on your local machine (laptop or P Let's say you have a folder locally with some code project and you want to start tracking your progress using git - the version control system. Some people compare using git to writing a love letter to your future self. Reading your commit messages days or weeks or months later you'll be able to recall why you made a decision, or "rollback" a change - that is, when you write good "commit messages". -### Task: Make a repository and commit code +### Task: Make a repository and commit code + +> Check out video +> +> [![Git and GitHub basics video](https://img.youtube.com/vi/9R31OUPpxU4/0.jpg)](https://www.youtube.com/watch?v=9R31OUPpxU4) + 1. **Create repository on GitHub**. On GitHub.com, in the repositories tab, or from the navigation bar top-right, find the **new repo** button. @@ -125,7 +130,7 @@ Let's say you have a folder locally with some code project and you want to start 1. **Connect your local Git repo with GitHub**. A Git repo is good on your machine but at some point you want to have backup of your files somewhere and also invite other people to work with you on your repo. One such great place to do so is GitHub. Remember we've already created a repo on GitHub so the only thing we need to do is to connect our local Git repo with GitHub. The command `git remote add` will do just that. Type the following command: - > Note, before you type the command go to your GitHub repo page to find the repository URL. You will use it in the below command. Replace `repository_name` with your GitHub URL. + > Note, before you type the command go to your GitHub repo page to find the repository URL. You will use it in the below command. Replace ```https://github.com/username/repository_name.git``` with your GitHub URL. ```bash git remote add origin https://github.com/username/repository_name.git @@ -134,6 +139,8 @@ Let's say you have a folder locally with some code project and you want to start This creates a _remote_, or connection, named "origin" pointing at the GitHub repository you created earlier. 1. **Send local files to GitHub**. So far you've created a _connection_ between the local repo and the GitHub repo. Let's send these files to GitHub with the following command `git push`, like so: + + > Note, your branch name may be different by default from ```main```. ```bash git push -u origin main @@ -141,7 +148,7 @@ Let's say you have a folder locally with some code project and you want to start This sends your commits in your "main" branch to GitHub. -1. **To add more changes**. If you want to continue making changes and pushing them to GitHub you’ll just need to use the following three commands: +2. **To add more changes**. If you want to continue making changes and pushing them to GitHub you’ll just need to use the following three commands: ```bash git add . @@ -167,6 +174,10 @@ The main reason for putting things on GitHub was to make it possible to collabor ## Working on projects with others +> Check out video +> +> [![Git and GitHub basics video](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8) + In your repository, navigate to `Insights > Community` to see how your project compares to recommended community standards. Here are some things that can improve your GitHub repo: @@ -203,10 +214,10 @@ Let's go through a contributor workflow. Assume the contributor has already _for git branch [branch-name] ``` -1. **Switch to working branch**. Switch to the specified branch and update the working directory with `git checkout`: +1. **Switch to working branch**. Switch to the specified branch and update the working directory with `git switch`: ```bash - git checkout [branch-name] + git switch [branch-name] ``` 1. **Do work**. At this point you want to add your changes. Don't forget to tell Git about it with the following commands: @@ -221,14 +232,14 @@ Let's go through a contributor workflow. Assume the contributor has already _for 1. **Combine your work with the `main` branch**. At some point you are done working and you want to combine your work with that of the `main` branch. The `main` branch might have changed meanwhile so make sure you first update it to the latest with the following commands: ```bash - git checkout main + git switch main git pull ``` At this point you want to make sure that any _conflicts_, situations where Git can't easily _combine_ the changes happens in your working branch. Therefore run the following commands: ```bash - git checkout [branch_name] + git switch [branch_name] git merge main ``` @@ -299,7 +310,7 @@ Projects might also have discussion in forums, mailing lists, or chat channels l Pair with a friend to work on each other's code. Create a project collaboratively, fork code, create branches, and merge changes. ## Post-Lecture Quiz -[Post-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/4) +[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4) ## Review & Self Study diff --git a/1-getting-started-lessons/2-github-basics/translations/README.es.md b/1-getting-started-lessons/2-github-basics/translations/README.es.md index 31241979..23afc5cb 100644 --- a/1-getting-started-lessons/2-github-basics/translations/README.es.md +++ b/1-getting-started-lessons/2-github-basics/translations/README.es.md @@ -5,7 +5,7 @@ Esta lección cubre los conceptos básicos de GitHub, una plataforma para alojar ![Introducción a GitHub](/sketchnotes/webdev101-github.png) > Dibujo de [Tomomi Imura](https://twitter.com/girlie_mac) -## [Cuestionario](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/3) +## [Cuestionario](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3) ### Introducción @@ -206,10 +206,10 @@ Repasemos el flujo de trabajo de un colaborador. Supongamos que el colaborador y git branch [branch-name] ``` -1. **Cambiar a rama de trabajo**. Cambia a la rama especificada y actualiza tu directorio de trabajo con `git checkout`: +1. **Cambiar a rama de trabajo**. Cambia a la rama especificada y actualiza tu directorio de trabajo con `git switch`: ```bash - git checkout [branch-name] + git switch [branch-name] ``` 1. **Trabaja**. En este punto, deseas agregar tus cambios. No olvides informarle a Git con los siguientes comandos: @@ -224,14 +224,14 @@ Repasemos el flujo de trabajo de un colaborador. Supongamos que el colaborador y 1. **Combina tu trabajo con la rama `principal`**. En algún momento has terminado de trabajar y deseas combinar tu trabajo con el de la rama `principal`. La rama `main` podría haber cambiado mientras tanto, así que asegúrate de actualizarla con los siguientes comandos: ```bash - git checkout main + git switch main git pull ``` En este punto, querrás asegurarte de que cualquier _conflicto_, situaciones en las que Git no pueda _combinarse_ fácilmente los cambios, ocurren en tu rama de trabajo. Mientras tanto, ejecuta los siguientes comandos: ```bash - git checkout [branch_name] + git switch [branch_name] git merge main ``` @@ -295,7 +295,7 @@ Los proyectos también pueden tener discusiones en foros, listas de correo o can 🚀 Desafío: empareja con un amigo(a) para trabajar en el código juntos. Crea un proyecto de forma colaborativa, bifurque el código, crea ramas y combina los cambios. -## [Post-lecture prueba](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/4) +## [Post-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4) ## Revisión y autoestudio diff --git a/1-getting-started-lessons/2-github-basics/translations/README.fil.md b/1-getting-started-lessons/2-github-basics/translations/README.fil.md index 02c67338..80f78b69 100644 --- a/1-getting-started-lessons/2-github-basics/translations/README.fil.md +++ b/1-getting-started-lessons/2-github-basics/translations/README.fil.md @@ -6,7 +6,7 @@ Sinasaklaw ng araling ito ang mga pangunahing kaalaman ng GitHub, isang platform > Sketchnote ni [Tomomi Imura](https://twitter.com/girlie_mac) ## Pagsusulit bago ang lektura -[Pagsusulit bago ang lektura](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/3) +[Pagsusulit bago ang lektura](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3) ## Panimula @@ -203,10 +203,10 @@ Dumaan tayo sa isang daloy ng trabaho ng contributor. Ipagpalagay na ang nag-amb git branch [branch-name] ``` -1. **Switch to working branch**. Lumipat sa tinukoy na sangay at i-update ang gumaganang direktoryo gamit ang `git checkout`: +1. **Switch to working branch**. Lumipat sa tinukoy na sangay at i-update ang gumaganang direktoryo gamit ang `git switch`: ```bash - git checkout [branch-name] + git switch [branch-name] ``` 1. **Do work**. Sa puntong ito gusto mong idagdag ang iyong mga pagbabago. Huwag kalimutang sabihin kay Git ang tungkol dito gamit ang mga sumusunod na utos: @@ -221,14 +221,14 @@ Dumaan tayo sa isang daloy ng trabaho ng contributor. Ipagpalagay na ang nag-amb 1. **Combine your work with the `main` branch**. Sa ilang mga punto ay tapos ka nang magtrabaho at gusto mong pagsamahin ang iyong trabaho sa iyong trabaho `main` sangay. Ang `main` maaaring nagbago ang branch samantala kaya siguraduhing i-update mo muna ito sa pinakabago gamit ang mga sumusunod na command: ```bash - git checkout main + git switch main git pull ``` Sa puntong ito gusto mong tiyakin na anuman _conflicts_, mga sitwasyon kung saan hindi madali ang Git _combine_ ang mga pagbabago ay nangyayari sa iyong nagtatrabaho na sangay. Samakatuwid, patakbuhin ang sumusunod na mga atas: ```bash - git checkout [branch_name] + git switch [branch_name] git merge main ``` @@ -299,7 +299,7 @@ Maaaring magkaroon din ng talakayan ang mga proyekto sa mga forum, mailing list, Ipares sa isang kaibigan para magtrabaho sa code ng isa't isa. Gumawa ng proyekto nang magkakasama, mag-fork ng code, gumawa ng mga sangay, at magsama ng mga pagbabago. ## Pagsusulit pagkatapos ng Lektura -[Post-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/4) +[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4) ## Pagsusuri at Sariling pag-aaral diff --git a/1-getting-started-lessons/2-github-basics/translations/README.fr.md b/1-getting-started-lessons/2-github-basics/translations/README.fr.md index 71ab1691..cd5c1fc0 100644 --- a/1-getting-started-lessons/2-github-basics/translations/README.fr.md +++ b/1-getting-started-lessons/2-github-basics/translations/README.fr.md @@ -6,7 +6,7 @@ Cette leçon couvre les principes de base de GitHub, une plateforme permettant d > Sketchnote par [Tomomi Imura](https://twitter.com/girlie_mac) ## Quiz préalable -[Quiz préalable](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/3?loc=fr) +[Quiz préalable](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3?loc=fr) ## Introduction @@ -203,10 +203,10 @@ Passons en revue un flux de travail de contributeur. Supposons que le contribute git branch [nom_branche] ``` -1. **Passer à la branche de travail**. Basculez vers la branche spécifiée et mettez à jour le répertoire de travail avec `git checkout`: +1. **Passer à la branche de travail**. Basculez vers la branche spécifiée et mettez à jour le répertoire de travail avec `git switch`: ```bash - git checkout [nom_branche] + git switch [nom_branche] ``` 1. **Travailler**. À ce stade, vous souhaitez ajouter vos modifications. N’oubliez pas d’en parler à Git avec les commandes suivantes: @@ -221,14 +221,14 @@ Passons en revue un flux de travail de contributeur. Supposons que le contribute 1. **Combinez votre travail avec la branche `main`**. À un moment donné, vous avez fini de travailler et vous voulez combiner votre travail avec celui de la branche `main`. La branche `main`" a peut-être changé entre-temps, alors assurez-vous de la mettre à jour au plus tard avec les commandes suivantes: ```bash - git checkout principal + git switch principal git pull ``` À ce stade, vous voulez vous assurer que tous les _conflits_, les situations où Git ne peut pas facilement _combiner_ les modifications se produisent dans votre branche de travail. Par conséquent, exécutez les commandes suivantes : ```bash - git checkout [branch_name] + git switch [branch_name] git merge main ``` @@ -299,7 +299,7 @@ Les projets peuvent également avoir des discussions dans des forums, des listes Associez-vous à un ami pour travailler sur le code de l’autre. Créez un projet en collaboration, bifurquez du code, créez des branches et fusionnez les modifications. ## Quiz de validation des connaissances -[Quiz de validation des connaissances](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/4?loc=fr) +[Quiz de validation des connaissances](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4?loc=fr) ## Examen & Auto-apprentissage diff --git a/1-getting-started-lessons/2-github-basics/translations/README.hi.md b/1-getting-started-lessons/2-github-basics/translations/README.hi.md index eb547931..9b3e3ae6 100644 --- a/1-getting-started-lessons/2-github-basics/translations/README.hi.md +++ b/1-getting-started-lessons/2-github-basics/translations/README.hi.md @@ -6,7 +6,7 @@ > [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा स्केचनेट ## पूर्व व्याख्यान प्रश्नोत्तरी -[पूर्व व्याख्यान प्रश्नोत्तरी](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/3?loc=hi) +[पूर्व व्याख्यान प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3?loc=hi) ## परिचय @@ -200,10 +200,10 @@ git branch [शाखाका-नाम] ``` -1. **कार्यशील शाखा पर स्विच करें**. निर्दिष्ट शाखा में स्विच करें और `git checkout` के साथ कार्य निर्देशिका को अपडेट करें: +1. **कार्यशील शाखा पर स्विच करें**. निर्दिष्ट शाखा में स्विच करें और `git switch` के साथ कार्य निर्देशिका को अपडेट करें: ```bash - git checkout [शाखाका-नाम] + git switch [शाखाका-नाम] ``` 1. **काम करो**. इस बिंदु पर आप अपने परिवर्तन जोड़ना चाहते हैं। निम्नलिखित आदेशों के बारे में Git को बताना न भूलें: @@ -218,14 +218,14 @@ 1. **`main` शाखा के साथ अपने काम को मिलाएं**. कुछ बिंदु पर आप काम कर रहे हैं और आप `main` शाखा के साथ अपने काम को जोड़ना चाहते हैं। `main` शाखा इस बीच बदल सकती है, इसलिए सुनिश्चित करें कि आपने इसे निम्न कमांड के साथ नवीनतम में अपडेट किया है: ```bash - git checkout main + git switch main git pull ``` इस बिंदु पर आप यह सुनिश्चित करना चाहते हैं कि कोई भी _टकराव_, परिस्थितियां जहां Git आसानी से आपके कामकाजी शाखा में होने वाले परिवर्तनों को _संयोजित_ नहीं कर सकती है। इसलिए निम्न आदेश चलाएँ: ```bash - git checkout [शाखाका-नाम] + git switch [शाखाका-नाम] git merge main ``` @@ -296,7 +296,7 @@ GitHub पर संबंधित दूरस्थ शाखा से स एक दूसरे के कोड पर काम करने के लिए एक दोस्त के साथ जोडे। सहयोगी रूप से एक परियोजना बनाएँ, कोड बनाएँ, शाखाएँ बनाएँ, और परिवर्तनों को मर्ज करें। ## व्याख्यान उपरांत प्रश्नोत्तरी -[व्याख्यान उपरांत प्रश्नोत्तरी](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/4?loc=hi) +[व्याख्यान उपरांत प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4?loc=hi) ## समीक्षा और स्व अध्ययन diff --git a/1-getting-started-lessons/2-github-basics/translations/README.id.md b/1-getting-started-lessons/2-github-basics/translations/README.id.md index 1ca05102..643c5568 100644 --- a/1-getting-started-lessons/2-github-basics/translations/README.id.md +++ b/1-getting-started-lessons/2-github-basics/translations/README.id.md @@ -7,7 +7,7 @@ Pelajaran ini mencakup dasar-dasar GitHub, platform untuk menghosting dan mengel ## Kuis Pra-Kuliah -[Kuis pra-kuliah](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/3?loc=id) +[Kuis pra-kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3?loc=id) ## Pengantar @@ -177,10 +177,10 @@ Mari kita melalui alur kerja kontributor. Asumsikan kontributor sudah _forked (m git branch [nama-cabang] ``` -1. **Beralih ke cabang kerja**. Beralih ke cabang yang ditentukan dan perbarui direktori kerja dengan `git checkout`: +1. **Beralih ke cabang kerja**. Beralih ke cabang yang ditentukan dan perbarui direktori kerja dengan `git switch`: ```bash - git checkout [nama-cabang] + git switch [nama-cabang] ``` 1. **Bekerja**. Pada titik ini Anda ingin menambahkan perubahan Anda. Jangan lupa untuk memberi tahu Git tentangnya dengan perintah berikut: @@ -195,14 +195,14 @@ Mari kita melalui alur kerja kontributor. Asumsikan kontributor sudah _forked (m 1. **Gabungkan pekerjaan Anda dengan cabang `main`**. Pada titik tertentu Anda telah selesai bekerja dan Anda ingin menggabungkan pekerjaan Anda dengan pekerjaan yang ada di cabang `main`. Cabang `main` mungkin telah berubah sementara itu jadi pastikan Anda terlebih dahulu memperbaruinya ke yang terbaru dengan perintah berikut: ```bash - git checkout main + git switch main git pull ``` Pada titik ini Anda ingin memastikan bahwa setiap _conflicts (konflik)_, situasi di mana Git tidak dapat dengan mudah _combine (menggabugkan)_ perubahan terjadi di cabang kerja Anda. Oleh karena itu jalankan perintah berikut: ```bash - git checkout [nama-cabang] + git switch [nama-cabang] git merge main ``` @@ -274,7 +274,7 @@ Sandingkan dengan seorang teman untuk mengerjakan kode satu sama lain. Buat proy ## Kuis Pasca Kuliah -[Kuis pasca kuliah](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/4?loc=id) +[Kuis pasca kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4?loc=id) ## Review & Belajar Mandiri diff --git a/1-getting-started-lessons/2-github-basics/translations/README.it.md b/1-getting-started-lessons/2-github-basics/translations/README.it.md index 9cbf6704..b35b44a9 100644 --- a/1-getting-started-lessons/2-github-basics/translations/README.it.md +++ b/1-getting-started-lessons/2-github-basics/translations/README.it.md @@ -6,7 +6,7 @@ Questa lezione tratta delle basi di GitHub, una piattaforma per ospitare e gesti > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## Quiz Pre-lezione -[Pre-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/3?loc=it) +[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3?loc=it) ## Introduzione @@ -200,10 +200,10 @@ Si analizza il flusso di lavoro di un contributore. Si assume che egli abbia gi git branch [branch-name] ``` -1. **Passare al ramo di lavoro**. Passare al ramo specificato e aggiornare la directory di lavoro con `git checkout`: +1. **Passare al ramo di lavoro**. Passare al ramo specificato e aggiornare la directory di lavoro con `git switch`: ```bash - git checkout [nome ramo] + git switch [nome ramo] ``` 1. **Eseguire il lavoro**. A questo punto si vorranno aggiungere i propri cambiamenti. Non dimenticarsi di dirlo a Git tramite questi comandi: @@ -218,14 +218,14 @@ Si analizza il flusso di lavoro di un contributore. Si assume che egli abbia gi 1. **Combinare il proprio lavoro con il ramo `main`**. Una volta terminato il lavoro occorre combinarlo con quello del ramo principale (`main`). Il ramo principale potrebbe avere subito cambiamenti nel mentre quindi ci si deve assicurare di eseguire prima un aggiornamento all'ultima versione con i comandi: ```bash - git checkout main + git switch main git pull ``` A questo punto occorre assicurarsi che qualsiasi eventuale _conflitto_ (conflict), situazioni dove Git non è in grado di determinare facilmente come _combinare_ le modifiche effettuate nel proprio ramo di lavoro. Eseguire i seguenti comandi: ```bash - git checkout [branch_name] + git switch [branch_name] git merge main ``` @@ -296,7 +296,7 @@ I progetti potrebbero anche essere discussi nei forum, liste di distribuzione, o Fare coppia con un amico per lavorare al codice dei progetti l'uno dell'altro. Creare un progetto in modo collaborativo, biforcare il codice, craare rami e fondere modifiche. ## Quiz Post-lezione -[Post-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/4?loc=it) +[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4?loc=it) ## Revisione e Auto Apprendimento diff --git a/1-getting-started-lessons/2-github-basics/translations/README.ko.md b/1-getting-started-lessons/2-github-basics/translations/README.ko.md index 90e3244f..6c6032e5 100644 --- a/1-getting-started-lessons/2-github-basics/translations/README.ko.md +++ b/1-getting-started-lessons/2-github-basics/translations/README.ko.md @@ -6,7 +6,7 @@ > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## 강의 전 퀴즈 -[Pre-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/3?loc=ko) +[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3?loc=ko) ## 소개 @@ -179,10 +179,10 @@ GitHub에 코드를 올리는 주 이유는 다른 개발자와 협력할 수 git branch [branch-name] ``` -1. **작업 브랜치 변경하기**. 지정된 브랜치로 전환하고 `git checkout`으로 작업 디렉토리를 업데이트합니다: +1. **작업 브랜치 변경하기**. 지정된 브랜치로 전환하고 `git switch`으로 작업 디렉토리를 업데이트합니다: ```bash - git checkout [branch-name] + git switch [branch-name] ``` 1. **일하기**. 이 시점에서 변경 사항을 추가하려고 합니다. 다음 명령을 사용하여 Git에 알리는 것을 잊지 마시기 바랍니다: @@ -197,14 +197,14 @@ GitHub에 코드를 올리는 주 이유는 다른 개발자와 협력할 수 1. **`main` 브랜치에서 작업하기**. 어느 시점에서 작업을 마치고 `main` 브랜치의 작업과 병합하려고 합니다. 그동안 `main` 브랜치가 변경되었을 수 있으므로, 먼저 다음 명령을 사용하여 최신 버전으로 업데이트해야합니다: ```bash - git checkout main + git switch main git pull ``` 이 시점에서 Git이 변경 사항을 쉽게 _결합_ 할 수 없는 _충돌_ 상황이 작업 브랜치에서 발생하는지 확인하려고합니다. 따라서 다음 명령을 실행합니다: ```bash - git checkout [branch_name] + git switch [branch_name] git merge main ``` @@ -275,7 +275,7 @@ GitHub의 모든 공개 저장소에 스타 표시, 워치 및/또는 "포크" 친구와 페어링하여 서로의 코드를 작업하세요. 공동으로 프로젝트를 만들고, 코드를 포크하고, 브랜치를 만들고, 변경 사항을 병합합니다. ## 강의 후 퀴즈 -[Post-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/4?loc=ko) +[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4?loc=ko) ## 리뷰 & 자기주도 학습 diff --git a/1-getting-started-lessons/2-github-basics/translations/README.ms.md b/1-getting-started-lessons/2-github-basics/translations/README.ms.md index c6eff9bc..4dcc6f8b 100644 --- a/1-getting-started-lessons/2-github-basics/translations/README.ms.md +++ b/1-getting-started-lessons/2-github-basics/translations/README.ms.md @@ -6,7 +6,7 @@ Pelajaran ini merangkumi pengetahuan asas tentang GitHub, dan adalah salah satu > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## Kuiz Pra-Kuliah -[Pre-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/3) +[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3) ## Pengenalan @@ -203,10 +203,10 @@ Mari melalui aliran kerja penyumbang. Anggaplah penyumbang telah _forked_ dan _c git branch [branch-name] ``` -1. **Tukar ke working branch**. Tukar ke branch yang ditentukan dan kemas kini direktori kerja dengan `git checkout`: +1. **Tukar ke working branch**. Tukar ke branch yang ditentukan dan kemas kini direktori kerja dengan `git switch`: ```bash - git checkout [branch-name] + git switch [branch-name] ``` 1. **Membuat kerja**. Pada ketika ini anda ingin menambahkan perubahan anda. Jangan lupa memberitahu Git mengenainya dengan arahan berikut: @@ -221,14 +221,14 @@ Mari melalui aliran kerja penyumbang. Anggaplah penyumbang telah _forked_ dan _c 1. **Gabungkan kerja anda dengan `main` branch**. Pada satu ketika anda selesai bekerja dan anda ingin menggabungkan kerja anda dengan `main` branch. `main` branch mungkin telah berubah sementara itu, pastikan anda mengemas kini terlebih dahulu kepada yang terbaru dengan arahan berikut: ```bash - git checkout main + git switch main git pull ``` Pada ketika ini anda ingin memastikan bahawa apa-apa _conflicts_, keadaan di mana Git tidak dapat dengan mudah _combine_ perubahan berlaku di working branch anda. Oleh itu, jalankan arahan berikut: ```bash - git checkout [branch_name] + git switch [branch_name] git merge main ``` @@ -299,7 +299,7 @@ Projek mungkin juga ada perbincangan di forum, senarai surat, atau saluran semba Berpasangan dengan rakan untuk mengerjakan kod masing-masing. Buat projek secara kolaboratif, fork kod, buat branch dan gabungkan perubahan. ## Kuiz Pasca Kuliah -[Kuiz Pasca Kuliah](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/4) +[Kuiz Pasca Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4) ## Mengkaji dan belajar sendiri diff --git a/1-getting-started-lessons/2-github-basics/translations/README.nl.md b/1-getting-started-lessons/2-github-basics/translations/README.nl.md index 8f494324..40496449 100644 --- a/1-getting-started-lessons/2-github-basics/translations/README.nl.md +++ b/1-getting-started-lessons/2-github-basics/translations/README.nl.md @@ -6,7 +6,7 @@ Deze les behandelt de basisprincipes van GitHub, een platform voor het hosten en > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## Quiz voorafgaand aan de lezing -[Quiz voorafgaand aan de lezing](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/3) +[Quiz voorafgaand aan de lezing](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3) ## Inleiding @@ -203,10 +203,10 @@ Laten we een workflow voor bijdragers doorlopen. Veronderstel dat de bijdrager d git branch [taknaam] ``` -1. **Overschakelen naar werkende tak**. Schakel over naar de gespecificeerde tak en update de werkdirectory met `git checkout`: +1. **Overschakelen naar werkende tak**. Schakel over naar de gespecificeerde tak en update de werkdirectory met `git switch`: ```bash - git checkout [taknaam] + git switch [taknaam] ``` 1. **Werken**. Op dit punt wilt u uw wijzigingen toevoegen. Vergeet niet om Git erover te vertellen met de volgende commando's: @@ -221,14 +221,14 @@ Laten we een workflow voor bijdragers doorlopen. Veronderstel dat de bijdrager d 1. **Combineer uw werk met de `main` tak**. Op een gegeven moment bent u klaar met werken en wilt u uw werk combineren met dat van de `main` tak. De `main` tak kan ondertussen veranderd zijn, dus zorg ervoor dat u deze eerst bijwerkt naar de laatste versie met de volgende commando's: ```bash - git checkout main + git switch main git pull ``` Op dit punt wilt u er zeker van zijn dat alle _conflicten_, situaties waarin Git niet gemakkelijk de veranderingen kan _combineren_ plaatsvinden in uw werkende tak. Voer daarom de volgende opdrachten uit: ```bash - git checkout [taknaam] + git switch [taknaam] git merge main ``` @@ -299,7 +299,7 @@ Projecten kunnen ook worden besproken in forums, mailinglijsten of chatkanalen z Koppel met een vriend om aan elkaars code te werken. Creëer gezamenlijk een project, fork code, maak takken en voeg wijzigingen samen. ## Quiz na de lezing -[Quiz na de lezing](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/4) +[Quiz na de lezing](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4) ## Beoordeling en zelfstudie diff --git a/1-getting-started-lessons/2-github-basics/translations/README.pt.md b/1-getting-started-lessons/2-github-basics/translations/README.pt.md index e596291c..3c66c75b 100644 --- a/1-getting-started-lessons/2-github-basics/translations/README.pt.md +++ b/1-getting-started-lessons/2-github-basics/translations/README.pt.md @@ -6,7 +6,7 @@ Esta lição cobre os fundamentos do GitHub, uma plataforma para hospedar e gere > Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac) ## Quiz Pré-Aula -[Quiz Pré-Aula](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/3) +[Quiz Pré-Aula](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3) ## Introdução @@ -32,7 +32,7 @@ Você também precisará de uma conta do GitHub, um editor de código (como o Vi Navegue para [github.com](https://github.com/) e crie uma conta, caso ainda não o tenha feito, ou faça login e preencha o seu perfil. -✅ O GitHub não é o único repositório de código do mundo; existem outros, mas o GitHub é o mais conhecido +✅ O GitHub não é o único repositório de código do mundo; existem outros, mas o GitHub é o mais conhecido. ### Preparação @@ -202,10 +202,10 @@ Vamos analisar o fluxo de trabalho de uma pessoa colaboradora. Suponha que ela j git branch [branch-name] ``` -1. **Mudar para o branch de trabalho**. Mude para o branch especificado e atualize o diretório de trabalho com `git checkout`: +1. **Mudar para o branch de trabalho**. Mude para o branch especificado e atualize o diretório de trabalho com `git switch`: ```bash - git checkout [branch-name] + git switch [branch-name] ``` 1. **Trabalhe**. Neste ponto, você deseja adicionar suas alterações. Não se esqueça de contar ao Git sobre isso com os seguintes comandos: @@ -220,14 +220,14 @@ Vamos analisar o fluxo de trabalho de uma pessoa colaboradora. Suponha que ela j 1. **Combine seu trabalho com o branch `main`**. Em algum ponto, você concluiu o trabalho e deseja combinar seu trabalho com o do branch `principal`. O branch `main` pode ter mudado enquanto isso, certifique-se de primeiro atualizá-lo para o mais recente com os seguintes comandos: ```bash - git checkout main + git switch main git pull ``` Neste ponto, você quer ter certeza de que quaisquer _conflitos_, situações em que o Git não pode _combinar_ facilmente as mudanças aconteçam em seu branch de trabalho. Portanto, execute os seguintes comandos: ```bash - git checkout [branch_name] + git switch [branch_name] git merge main ``` @@ -255,7 +255,7 @@ Vamos analisar o fluxo de trabalho de uma pessoa colaboradora. Suponha que ela j Uma PR é o lugar para comparar e discutir as diferenças introduzidas em um branch com revisões, comentários, testes integrados e muito mais. Uma boa PR segue aproximadamente as mesmas regras de uma mensagem de commit. Você pode adicionar uma referência a um problema no rastreador de problemas, quando seu trabalho, por exemplo, corrige um problema. Isso é feito usando um `#` seguido pelo número do seu problema. Por exemplo `# 97`. -🤞 Dedos cruzados para que todas as verificações sejam aprovadas e as pessoas proprietárias do projeto deem merge nas suas alterações no projeto🤞 +🤞 Dedos cruzados para que todas as verificações sejam aprovadas e as pessoas proprietárias do projeto deem merge nas suas alterações no projeto 🤞 Atualize seu branch de trabalho local atual com todos os novos commits do branch remoto correspondente no GitHub: @@ -263,7 +263,7 @@ Atualize seu branch de trabalho local atual com todos os novos commits do branch ## Como contribuir com Open Source -Primeiramente, vamos encontrar um repositório (ou **repo**) no GitHub de interesse para você e para o qual você gostaria de contribuir. Você vai querer copiar o conteúdo para desse repo parasua máquina. +Primeiramente, vamos encontrar um repositório (ou **repo**) no GitHub de interesse para você e para o qual você gostaria de contribuir. Você vai querer copiar o conteúdo desse repo para a sua máquina. ✅ Uma boa maneira de encontrar repos 'iniciantes' é [buscar usando a tag 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). @@ -279,11 +279,11 @@ Para trabalhar no projeto, mude para a pasta certa: Você também pode abrir todo o projeto usando [Codespaces](https://github.com/features/codespaces), O editor de código incorporado do GitHub/ ambiente de desenvolvimento em nuvem, ou o [GitHub Desktop](https://desktop.github.com/). -Por último, você pode baixar o código em uma pasta com zíper. +Por último, você pode baixar o código em uma pasta como .zip. ### Mais algumas coisas interessantes sobre o GitHub -Você pode dar uma strela, assistir e/ou "bifurcação" em qualquer repositório público no GitHub. Você pode encontrar seus repositórios estrelados no menu suspenso de cima para a direita. É como marcar, mas para código. +Você pode dar uma estrela, assistir e/ou "bifurcação" em qualquer repositório público no GitHub. Você pode encontrar seus repositórios estrelados no menu suspenso de cima para a direita. É como marcar, mas para código. Os projetos têm um rastreador de problemas, no GitHub na aba "Problemas", a menos que indicado o contrário, onde as pessoas discutem questões relacionadas ao projeto. E a aba de Pull Requests é onde as pessoas discutem e analisam as mudanças que estão em andamento. @@ -298,7 +298,7 @@ Os projetos também podem ter discussão em fóruns, listas de discussão ou can Parear com uma amiga para trabalhar no código uma da outra. Crie um projeto de forma colaborativa, de fork no código, crie branches e de merge mudanças. ## Quiz pós-aula -[Quiz pós-aula](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/4) +[Quiz pós-aula](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4) ## Revisão & Auto estudo @@ -314,4 +314,4 @@ Você também encontrará laboratórios mais avançados. ## Lição de casa -Complete [o lab a Primeira Semana gitHub](https://lab.github.com/githubtraining/first-week-on-github) +Complete [o lab a Primeira Semana gitHub](https://lab.github.com/githubtraining/first-week-on-github) \ No newline at end of file diff --git a/1-getting-started-lessons/2-github-basics/translations/README.ru.md b/1-getting-started-lessons/2-github-basics/translations/README.ru.md index 4129f918..f927187b 100644 --- a/1-getting-started-lessons/2-github-basics/translations/README.ru.md +++ b/1-getting-started-lessons/2-github-basics/translations/README.ru.md @@ -8,7 +8,7 @@ ## Предлекционный квиз -[Предлекционный квиз](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/3) +[Предлекционный квиз](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3) ## Введение @@ -170,7 +170,7 @@ _Если применить этот коммит, то он <ваше сооб ## Работа над проектами с другими разработчиками -В своем репозитории перейдите в `Insights> Community`, чтобы увидеть, как ваш проект сравнивается с рекомендованными стандартами сообщества. +В своем репозитории перейдите в `Insights > Community`, чтобы увидеть, как ваш проект сравнивается с рекомендованными стандартами сообщества. Вот несколько вещей, которые могут улучшить ваш репозиторий на GitHub: @@ -186,7 +186,7 @@ _Если применить этот коммит, то он <ваше сооб ### Задание: Слияние кода -Документ CONTRIBUTING.md помогает людям разобраться, как вносить свой вклад в проект. В нем объясняется, какие типы вкладов вас интересуют и как работает этот процесс. Чтобы внести свой вклад в ваш репозиторий на GitHub, участникам потребуется выполнить ряд шагов: +Правила соучастия (например, документ `CONTRIBUTING.md`) помогают людям разобраться, как вносить свой вклад в проект. В нем объясняется, какие типы вкладов вас интересуют и как работает этот процесс. Чтобы внести свой вклад в ваш репозиторий на GitHub, участникам потребуется выполнить ряд шагов: 1. **Сделать ответвление вашего репозитория (Forking)**. Вы, вероятно, захотите, чтобы люди сделали _ответвление (fork)_ вашего проекта. Ответвление означает создание копии вашего репозитория в их профиле GitHub. 1. **Клонировать**. Оттуда они будут клонировать проект на свой локальный компьютер. @@ -205,10 +205,10 @@ _Если применить этот коммит, то он <ваше сооб git branch [название-ветки] ``` -1. **Переход в рабочую ветку**. Переключитесь на указанную ветку и обновите рабочую папку с помощью команды `git checkout`: +1. **Переход в рабочую ветку**. Переключитесь на указанную ветку и обновите рабочую папку с помощью команды `git switch`: ```bash - git checkout [branch-name] + git switch [branch-name] ``` 1. **Написание кода**. На этом этапе вы хотите добавить свои изменения. Не забудьте сообщить об этом Git с помощью следующих команд: @@ -223,14 +223,14 @@ _Если применить этот коммит, то он <ваше сооб 1. **Совместите свою работу с веткой `main`**. В какой-то момент вы закончили работу и хотите совместить свою работу с работой над веткой `main`. Ветка `main` за это время могла измениться, поэтому убедитесь, что вы сначала обновили ее до последней версии с помощью следующих команд: ```bash - git checkout main + git switch main git pull ``` На этом этапе вы хотите убедиться, что любые _конфликты_, ситуации, когда Git не может легко _комбинировать_ изменения, происходят в вашей рабочей ветке. Поэтому выполните следующие команды: ```bash - git checkout [название-ветки] + git switch [название-ветки] git merge main ``` @@ -244,7 +244,7 @@ _Если применить этот коммит, то он <ваше сооб Приведенная выше команда создает ветку в вашем, ответвленном от основного, репозитории. -1. **Открытие PR**. Далее вы хотите открыть PR. Вы делаете это, перейдя к ответвленному репозиторию на GitHub. Вы увидите подсказку на GitHub, где вам предложат, хотите ли вы создать новый PR. Вы нажимаете на это указание, и попадаете в интерфейс, где вы можете изменить заголовок сообщения к пул реквесту, можете дать ему более подходящее описание. Теперь владелец репозитория, от которого вы сделали ответвление, увидит этот PR, и (_скрестим пальцы_) он одобрит и примет ваш PR в свой репозиторий. Теперь вы соавтор, ура :) +1. **Открытие PR**. Далее, вы хотите открыть PR. Вы делаете это, перейдя к ответвленному репозиторию на GitHub. Вы увидите подсказку на GitHub, где вам предложат, хотите ли вы создать новый PR. Вы нажимаете на это указание, и попадаете в интерфейс, где вы можете изменить заголовок сообщения к пул реквесту, можете дать ему более подходящее описание. Теперь владелец репозитория, от которого вы сделали ответвление, увидит этот PR, и (_скрестим пальцы_) он одобрит и примет ваш PR в свой репозиторий. Теперь вы соавтор, ура :) 1. **Чистка (Clean up)**. Хорошей практикой считается _чистка_ после успешного слияния PR. Вы хотите очистить как локальную ветку, так и ветку, которую вы отправили на GitHub. Сначала удалим ее локально с помощью следующей команды: @@ -302,7 +302,7 @@ Pull request - это место, где можно сравнить и обсу ## Постлекционный квиз -[Постлекционный квиз](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/4) +[Постлекционный квиз](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4) ## Обзор и самообучение diff --git a/1-getting-started-lessons/2-github-basics/translations/README.ta.md b/1-getting-started-lessons/2-github-basics/translations/README.ta.md new file mode 100644 index 00000000..f4be0b1e --- /dev/null +++ b/1-getting-started-lessons/2-github-basics/translations/README.ta.md @@ -0,0 +1,325 @@ +# கிட்ஹப் அறிமுகம் + +இந்த பாடம் கிட்ஹப் அடிப்படைகளை உள்ளடக்கியது, உங்கள் குறியீட்டில் மாற்றங்களை நடத்த மற்றும் நிர்வகிக்க ஒரு தளம். + +![Iகிட்ஹப் அறிமுகம்](/sketchnotes/webdev101-github.png) +> ஸ்கெட்ச்நோட் [டோமோமி இமுரா](https://twitter.com/girlie_mac) + + +## விரிவுரைக்கு முந்தைய வினாடி வினா +[ விரிவுரைக்கு முந்தைய வினாடி வினா](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3?loc=ta) + +## அறிமுகம் + +இந்த பாடத்தில், நாங்கள் உள்ளடக்குவோம்: + +- உங்கள் இயந்திரத்தில் நீங்கள் செய்யும் வேலையைக் கண்காணித்தல் +- மற்றவர்களுடன் திட்டங்களில் வேலை செய்தல் +- திறந்த மூல மென்பொருள் பங்களிக்க எப்படி + +### முன் நிபந்தனைகள் + +நீங்கள் தொடங்குவதற்கு முன், கிட் நிறுவப்பட்டதா என்பதை நீங்கள் சரிபார்க்க வேண்டும். முனைய வகை: +`git --version` + +கிட் நிறுவப்படவில்லை என்றால், [கிட் பதிவிறக்க](https://git-scm.com/downloads) . பின்னர், முனையத்தில் உங்கள் உள்ளூர் கிட் சுயவிவரத்தை அமை: + +* `git config --global user.name "your-name"` +* `git config --global user.email "your-email"` + +கிட் ஏற்கனவே உள்ளமைக்கப்பட்டதா என்பதை சரிபார்க்க நீங்கள் தட்டச்சு செய்யலாம்: +`git config --list` + +நீங்கள் ஒரு கிட்ஹப் கணக்கு, ஒரு குறியீட்டு ஆசிரியர் (விஷுவல் ஸ்டுடியோ குறியீடு போன்றவை) வேண்டும், மேலும் உங்கள் முனையத்தைத் திறக்க வேண்டும் (அல்லது: கட்டளை செயலழைப்பு). + +நீங்கள் ஏற்கனவே இல்லை என்றால் [github.com](https://github.com/) செல்லவும் மற்றும் ஒரு கணக்கை உருவாக்கவும், அல்லது உள்நுழைந்து உங்கள் சுயவிவரத்தை நிரப்பவும். + + +✅ கிட்ஹப் உலகின் ஒரே குறியீடு களஞ்சியம் அல்ல; மற்றவர்கள் இருக்கிறார்கள், ஆனால் கிட்ஹப் நன்கு அறியப்பட்டவர் + +### முன்னேற்பாடு செய்தல் + +உங்கள் உள்ளூர் இயந்திரத்தில் (மடிக்கணினி அல்லது பிசி) ஒரு குறியீட்டு திட்டத்துடன் ஒரு கோப்புறை மற்றும் கிட்ஹப்பில் ஒரு பொது களஞ்சியம் ஆகிய இரண்டும் உங்களுக்குத் தேவைப்படும், இது மற்றவர்களின் திட்டங்களுக்கு எவ்வாறு பங்களிக்க வேண்டும் என்பதற்கு ஒரு எடுத்துக்காட்டாக இருக்கும். + +--- + +## குறியீடு மேலாண்மை + +சில குறியீட்டு திட்டத்துடன் உள்நாட்டில் ஒரு கோப்புறை உள்ளது என்று வைத்துக்கொள்வோம், மேலும் உங்கள் முன்னேற்றத்தை கிட் - பதிப்பு கட்டுப்பாட்டு அமைப்பு பயன்படுத்தி கண்காணிக்க த் தொடங்க வேண்டும். சிலர் கிட் பயன்படுத்தி உங்கள் எதிர்கால சுய ஒரு காதல் கடிதம் எழுத ஒப்பிட்டு. நாட்கள் அல்லது வாரங்கள் அல்லது மாதங்களுக்குப் பிறகு உங்கள் ஒப்புக்கொள்ளும் செய்திகளைப் படிக்கும்போது, நீங்கள் ஏன் ஒரு முடிவை எடுத்தீர்கள், அல்லது ஒரு மாற்றத்தை "திரும்பப் பெறுகிறீர்கள்" என்பதை நீங்கள் நினைவுகூர முடியும் - அதாவது, நீங்கள் நல்ல "செய்திகளைச் செய்யுங்கள்" என்று எழுதும்போது. + +### பணி: ஒரு களஞ்சியத்தை உருவாக்கவும் மற்றும் குறியீட்டை செய்யவும் + +1. **கிட்ஹப் இல் களஞ்சியத்தை உருவாக்கவும்** கிட்ஹப், களஞ்சியங்கள் தாவலை, அல்லது வழிசெலுத்தல் பட்டியில் மேல் வலது இருந்து, **புதிய ரெப்போ ** பொத்தானை கண்டுபிடிக்க. + + 1. உங்கள் களஞ்சியத்திற்கு (கோப்புறை) ஒரு பெயரைக் கொடுங்கள் + 1. தேர்ந்தெடுக்கவும் **create repository**. + +1. **உங்கள் பணி கோப்புறைக்கு செல்லவும்**. உங்கள் முனையத்தில், கோப்புறைக்கு மாறவும் (கோப்பகம் என்றும் அழைக்கப்படுகிறது) நீங்கள் கண்காணிக்கத் தொடங்க விரும்புகிறீர்கள். மாதிப் படிவம்: + + ```bash + cd [உங்கள் கோப்புறையின் பெயர்] + ``` + +1. **ஒரு கிட் களஞ்சியத்தை துவக்கு**. உங்கள் திட்ட வகை: + + ```bash + git init + ``` + +1. **நிலையை சரிபார்க்கவும்**. உங்கள் களஞ்சிய வகையின் நிலையை சரிபார்க்க: + + ```bash + git status + ``` + + வெளியீடு இந்த மாதிரி ஏதாவது இருக்க முடியும்: + + ```output + Changes not staged for commit: + (use "git add ..." to update what will be committed) + (use "git checkout -- ..." to discard changes in working directory) + + modified: file.txt + modified: file2.txt + ``` + பொதுவாக ஒரு `git status` கட்டளை, கோப்புகளில் _சேமிக்கதயாராக உள்ளது_ ரெப்போஅல்லது நீங்கள் தொடர்ந்து இருக்க விரும்பும் மாற்றங்களைக் கொண்டுள்ளது போன்ற விஷயங்களைஉங்களுக்குச் சொல்கிறது. + +1. **கண்காணிப்பு அனைத்து கோப்புகளை சேர்க்க** + இது ஸ்டேஜிங் கோப்புகள் / ஸ்டேஜிங் பகுதியில் கோப்புகளைச் சேர்ப்பது என்றும் அழைக்கப்படுகிறது. + + ```bash + git add . + ``` +`git add` பிளஸ் `.` வாதம் உங்கள் கோப்புகள் அனைத்தும் கண்காணிக்க மாறும் என்பதைக் குறிக்கிறது. + +1. **கண்காணிப்புக்காக தேர்ந்தெடுக்கப்பட்ட கோப்புகளைச் சேர்க்கவும்** + + ```bash + git add [கோப்பு அல்லது கோப்புறை பெயர்] + ``` + + ஒரே நேரத்தில் அனைத்து கோப்புகளையும் செய்ய விரும்பாத போது, தேர்ந்தெடுக்கப்பட்ட கோப்புகளை மட்டுமே ஸ்டேஜிங் பகுதியில் சேர்க்க இது உதவுகிறது. + +1. **அனைத்து கோப்புகளையும் நிலைநீக்கு** + + ```bash + git reset + ``` + + இந்த கட்டளை அனைத்து கோப்புகளையும் ஒரே நேரத்தில் நிலைநீக்க உதவுகிறது. + + +1. **ஒரு குறிப்பிட்ட கோப்பை நிலைநீக்கு** + + ```bash + git reset [கோப்பு அல்லது கோப்புறை பெயர்] + ``` + + அடுத்த கமிட் செய்ய விரும்பாத ஒரு குறிப்பிட்ட கோப்பை மட்டும் ஒரே நேரத்தில் கட்டமைக்க இந்த கட்டளை நமக்கு உதவுகிறது. + +1. **உங்கள் வேலையை த் தொடருதல்**. இந்த கட்டத்தில் நீங்கள் _ஸ்டேஜிங் பகுதி_ என்று அழைக்கப்படும் கோப்புகளை சேர்த்துள்ளீர்கள். உங்கள் கோப்புகளை கிட் கண்காணிக்கும் இடம். மாற்றத்தை நிரந்தரமாக்க, கோப்புகளை _கமிட்_ செய்ய வேண்டும். அவ்வாறு செய்ய நீங்கள் `git commit` கட்டளையுடன் ஒரு _கமிட்_ உருவாக்குகிறீர்கள். ஒரு _கமிட்_ உங்கள் ரெப்போ வரலாற்றில் ஒரு சேமிப்பு புள்ளி யை குறிக்கிறது. _கமிட்_ உருவாக்க பின்வருவனவை தட்டச்சு செய்யவும்: + + + ```bash + git commit -m "first commit" + ``` + + இது உங்கள் கோப்புகள் அனைத்தையும் ஒப்புக்கொள்கிறது, "முதலில் ஒப்புக்கொள்ளுங்கள்" என்ற செய்தியைச் சேர்க்கிறது. எதிர்காலத்தில் செய்திகளைச் செய்ய நீங்கள் என்ன வகையான மாற்றத்தை செய்தீர்கள் என்பதை தெரிவிக்க உங்கள் விளக்கத்தில் இன்னும் விளக்கமாக இருக்க விரும்புகிறீர்கள். + +1. **உங்கள் உள்ளூர் கிட் ரெப்போவை கிட்ஹப் உடன் இணைக்கவும்**. ஒரு கிட் ரெப்போ உங்கள் இயந்திரத்தில் நல்லது, ஆனால் ஒரு கட்டத்தில் நீங்கள் எங்காவது உங்கள் கோப்புகளை காப்புப்பிரதி எடுக்க விரும்புகிறீர்கள், மேலும் உங்கள் ரெப்போவில் உங்களுடன் வேலை செய்ய மற்ற நபர்களை அழைக்கவும் விரும்புகிறீர்கள். அவ்வாறு செய்ய ஒரு பெரிய இடம் கிட்ஹப் ஆகும். நாம் ஏற்கனவே கிட்ஹப்பில் ஒரு ரெப்போவை உருவாக்கியுள்ளோம் என்பதை நினைவில் கொள்ளுங்கள், எனவே நாம் செய்ய வேண்டிய ஒரே விஷயம் கிட்ஹப் உடன் எங்கள் உள்ளூர் கிட் ரெப்போவை இணைக்க வேண்டும். `git remote add` என்ற கட்டளை அதைச் செய்யும். பின்வரும் கட்டளையை தட்டச்சு செய்யவும்: + + > குறிப்பு, நீங்கள் கட்டளையை தட்டச்சு செய்வதற்கு முன், உங்கள் கிட்ஹப் ரெப்போ பக்கத்திற்கு சென்று களஞ்சியத்தை கண்டுபிடிக்கவும். நீங்கள் கீழே உள்ள கட்டளையில் பயன்படுத்துவீர்கள். ```https://github.com/username/repository_name.git``` என்பதை உங்கள் கிட்ஹப் யுஆர்எல் மூலம் மாற்றவும். + + + ```bash + git remote add origin https://github.com/username/repository_name.git + ``` + + இது ஒரு _தொலை__ அல்லது இணைப்பை உருவாக்குகிறது, "தோற்றம்" என்று பெயரிடப்பட்டது, நீங்கள் முன்பு உருவாக்கிய கிட்ஹப் களஞ்சியத்தை சுட்டிக்காட்டுகிறது. + + 1. **கீதுப் க்கு உள்ளூர் கோப்புகளை அனுப்பவும்** இதுவரை நீங்கள் உள்ளூர் ரெப்போ மற்றும் கிட்ஹப் ரெப்போ இடையே ஒரு _இணைப்பு_ உருவாக்கியுள்ளீர்கள். பின்வரும் கட்டளை `git push`உடன் இந்த கோப்புகளை கிட்ஹப் க்கு அனுப்புவோம், இது போன்றது: + + > குறிப்பு, உங்கள் கிளை பெயர் முன்னிருப்பாக வேறுபட்டிருக்கலாம் ```main```. + + ```bash + git push -u origin main + ``` + + இது உங்கள் "main" கிளையில் உள்ள உங்கள் உறுதிகளை கிட்ஹப் க்கு அனுப்புகிறது. + +2. **மேலும் மாற்றங்களைச் சேர்க்க**. நீங்கள் மாற்றங்களைதொடர்ந்து செய்ய விரும்பினால், அவற்றை கிட்ஹப் க்கு தள்ளவிரும்பினால், பின்வரும் மூன்று கட்டளைகளைப் பயன்படுத்த வேண்டும்: + + ```bash + git add . + git commit -m "உங்கள் ஒப்புக்கொள்ளும் செய்தியை இங்கே தட்டச்சு செய்யவும்" + git push + ``` + > உதவிக்குறிப்பு, நீங்கள் கிட்ஹப்பில் காண்பிக்க விரும்பாத கோப்புகளைத் தடுக்க ஒரு `.gitignore` கோப்பை நீங்கள் ஏற்றுக்கொள்ள விரும்பலாம் - அதே கோப்புறையில் நீங்கள் சேமித்து வைக்கும் குறிப்புகள் கோப்பு போல, ஆனால் ஒரு பொது களஞ்சியத்தில் இடமில்லை. [.gitignore templates](https://github.com/github/gitignore) இல் `.gitignore` கோப்புகளுக்கான வார்ப்புருக்களை நீங்கள் காணலாம் + +#### செய்திகளை ஒப்புக்கொள் + + +ஒரு பெரிய கிட் கமிட் சப்ஜெக்ட் லைன் பின்வரும் வாக்கியத்தை நிறைவு செய்யும்: +பயன்படுத்தப்பட்டால், இந்த உறுதி <உங்கள் பொருள் வரி இங்கே> + +பொருள் கட்டாயபயன்படுத்த, தற்போதைய: "மாற்றம்" "மாற்ற" அல்லது "மாற்றங்கள்". +பொருள் போன்ற, உடலில் (விரும்பினால்) மேலும் கட்டாய பயன்படுத்த, தற்போதைய பதற்றம். உடல் மாற்றம் உந்துதல் சேர்க்க வேண்டும் மற்றும் முந்தைய நடத்தை இந்த மாறாக வேண்டும். நீங்கள் `ஏன்` விளக்குகிறீர்கள், `எப்படி` அல்ல. + +✅ கிட்ஹப் சுற்றி உலாவ சில நிமிடங்கள் எடுத்துக் கொள்ளுங்கள். நீங்கள் ஒரு பெரிய ஒப்புக்கொள்ளசெய்தி கண்டுபிடிக்க முடியும்? நீங்கள் ஒரு மிகவும் குறைந்த ஒரு கண்டுபிடிக்க முடியும்? ஒரு கமிட் செய்தியில் தெரிவிக்க மிகவும் முக்கியமான மற்றும் பயனுள்ள தகவல் என்று நீங்கள் நினைக்கிறீர்கள்? + +### பணி: ஒத்துழைக்க + +கிட்ஹப்பில் விஷயங்களை வைப்பதற்கான முக்கிய காரணம் மற்ற டெவலப்பர்களுடன் ஒத்துழைப்பதை சாத்தியமாக்குகிறது. + +## மற்றவர்களுடன் திட்டங்களில் வேலை செய்தல் + +உங்கள் களஞ்சியத்தில், பரிந்துரைக்கப்பட்ட சமூக தரங்களுடன் உங்கள் திட்டம் எவ்வாறு ஒப்பிடுகிறது என்பதைப் பார்க்க `நுண்ணறிவு > சமூகம்` செல்லவும். + + இங்கே உங்கள் கிட்ஹப் ரெப்போ மேம்படுத்த முடியும் என்று சில விஷயங்கள் உள்ளன: + - **விளக்கம்**. உங்கள் திட்டத்திற்கான விளக்கத்தைச் சேர்த்தீர்களா? + - **ரீட்மே**. நீங்கள் ஒரு ரீட்மேசேர்த்தீர்களா? கிட்ஹப் ஒரு [ரீட்மே](https://docs.github.com/articles/about-readmes/) எழுதுவதற்கான வழிகாட்டலை வழங்குகிறது + - **பங்களிப்பு வழிகாட்டுதல்**. உங்கள் திட்டத்தில் [பங்களிப்பு வழிகாட்டுதல்கள்](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/) உள்ளதா, + - **நடத்தை விதிகள்**. அ [நடத்தை விதிகள்](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/), + - **உரிமம்**. ஒருவேளை மிக முக்கியமாக, ஒரு [உரிமம்](https://docs.github.com/articles/adding-a-license-to-a-repository/)? + + +இந்த வளங்கள் அனைத்தும் புதிய குழு உறுப்பினர்களுக்கு பயனளிக்கும். உங்கள் குறியீட்டைப் பார்ப்பதற்கு முன்பு புதிய பங்களிப்பாளர்கள் பார்க்கும் விஷயங்கள் பொதுவாக உள்ளன, உங்கள் திட்டம் அவர்கள் தங்கள் நேரத்தை செலவழிக்க சரியான இடம் தானா என்பதைக் கண்டறிய. + +✅ ரீட்மே கோப்புகள், அவை தயாரிக்க நேரம் எடுத்துக்கொண்டாலும், பெரும்பாலும் பிஸியான பராமரிப்பாளர்களால் புறக்கணிக்கப்படுகின்றன. குறிப்பாக விளக்கப்பட்ட ஒரு உதாரணத்தை நீங்கள் கண்டுபிடிக்க முடியுமா? குறிப்பு: நீங்கள் முயற்சி செய்ய விரும்பும் சில [நல்ல ரீ.ஈ.டி.எம்.இ.க்களை உருவாக்க உதவும் கருவிகள்](https://www.makeareadme.com/) உள்ளன. + +### பணி: சில குறியீட்டை ஒன்றுசேர் + +பங்களிப்பு ஆவணங்கள் மக்கள் திட்டத்திற்கு பங்களிக்க உதவுகின்றன. நீங்கள் என்ன வகையான பங்களிப்புகளைத் தேடுகிறீர்கள் மற்றும் செயல்முறை எவ்வாறு செயல்படுகிறது என்பதை இது விளக்குகிறது. பங்களிப்பாளர்கள் கீதுப் மீது உங்கள் ரெப்போபங்களிக்க முடியும் படிகள் ஒரு தொடர் மூலம் செல்ல வேண்டும்: + +1. **உங்கள் ரெப்போவை ஃபோர்கிங்** ஒருவேளை நீங்கள் மக்கள் உங்கள் திட்டத்தை _ஃபோர்க்_ வேண்டும். ஃபோர்கிங் என்பது அவர்களின் கிட்ஹப் சுயவிவரத்தில் உங்கள் களஞ்சியத்தின் பிரதியை உருவாக்குவதாகும். +1. **குளோன்**. அங்கிருந்து அவர்கள் தங்கள் உள்ளூர் இயந்திரத்திற்கு திட்டத்தை குளோன் செய்வார்கள். +1. **ஒரு கிளை உருவாக்க**. நீங்கள் அவர்களின் வேலைக்கு ஒரு _கிளை_ உருவாக்க அவர்களை கேட்க வேண்டும். +1. **ஒரு பகுதியில் தங்கள் மாற்றத்தை கவனம் செலுத்தவும்**. பங்களிப்பாளர்களை ஒரு நேரத்தில் ஒரு விஷயத்தில் தங்கள் பங்களிப்புகளை ஒருமுகப்படுத்தும்படி கேளுங்கள் - அந்த வழியில் நீங்கள் அவர்களின் வேலையில் _ஒன்றிணைக்க_ வாய்ப்புகளை அதிகமாக உள்ளது. அவர்கள் ஒரு பிழை சரி எழுத கற்பனை, ஒரு புதிய அம்சம் சேர்க்க, மற்றும் பல சோதனைகள் புதுப்பிக்க - நீங்கள் விரும்பினால் என்ன, அல்லது மட்டுமே 3 வெளியே 2 செயல்படுத்த முடியும், அல்லது 3 மாற்றங்கள் 1? + +✅ நல்ல குறியீட்டை எழுதுவதற்கும் அனுப்புவதற்கும் கிளைகள் குறிப்பாக முக்கியமான ஒரு சூழ்நிலையை கற்பனை செய்து பாருங்கள். வழக்குகள் என்ன பயன் என்று நீங்கள் நினைக்கலாம்? + +> குறிப்பு, நீங்கள் உலகில் பார்க்க விரும்பும் மாற்றமாக இருங்கள், உங்கள் சொந்த வேலைக்கும் கிளைகளை உருவாக்குங்கள். நீங்கள் செய்யும் எந்தவொரு உறுதிப்படமும் நீங்கள் தற்போது "சரிபார்க்கப்பட்ட" கிளையில் செய்யப்படும். எந்த கிளை என்று பார்க்க `git status` பயன்படுத்தவும். + +பங்களிப்பாளர் பணிப்பாய்வின் மூலம் செல்லலாம். பங்களிப்பாளர் ஏற்கனவே _ஃபோர்க்_ மற்றும் _குளோன்_ ரெப்போவை வைத்திருக்கிறார் என்று வைத்துக்கொள்ளுங்கள், எனவே அவர்கள் தங்கள் உள்ளூர் இயந்திரத்தில் வேலை செய்ய தயாராக ஒரு கிட் ரெப்போவை வைத்திருக்கிறார்கள்: + +1. **ஒரு கிளை உருவாக்க**. `git branch` என்ற கட்டளையைப் பயன்படுத்தி, அவர்கள் பங்களிக்க வேண்டிய மாற்றங்களைக் கொண்ட ஒரு கிளையை உருவாக்கவும்: + + ```bash + git branch [கிளை பெயர்] + ``` + +1. **வேலை செய்யும் கிளைக்கு மாறவும்**. குறிப்பிட்ட கிளைக்கு மாறி, பணி கோப்பகத்துடன் புதுப்பிக்கவும் `git switch`: + + ```bash + git switch [கிளை பெயர்] + ``` + +1. **வேலை செய்யுங்கள்**. இந்த கட்டத்தில் நீங்கள் உங்கள் மாற்றங்களை சேர்க்க விரும்புகிறீர்கள். பின்வரும் கட்டளைகளுடன் அதைப் பற்றி கிட் சொல்ல மறக்க வேண்டாம்: + + ```bash + git add . + git commit -m "என் மாற்றங்கள்" + ``` + + உங்கள் நலனுக்காகவும், நீங்கள் உதவி செய்யும் ரெப்போவின் பராமரிப்பாளராகவும், உங்கள் உறுதிக்கு ஒரு நல்ல பெயரைக் கொடுப்பதை உறுதி செய்யுங்கள். + +1.**உங்கள் வேலையை `main` கிளையுடன் இணைக்கவும்**. ஒரு கட்டத்தில் நீங்கள் வேலை செய்து விட்டீர்கள், உங்கள் வேலையை `main` கிளையுடன் இணைக்க விரும்புகிறீர்கள். `main` கிளை இதற்கிடையில் மாறியிருக்கலாம், எனவே பின்வரும் கட்டளைகளுடன் சமீபத்தியதை முதலில் புதுப்பிக்கவும்: + + ```bash + git switch main + git pull + + ``` + + இந்த கட்டத்தில், உங்கள் பணிக்கிளையில் மாற்றங்கள் எளிதாக _இணைவுகள்_ செய்ய முடியாத சூழ்நிலைகளில் ஏதேனும் _இணை_, இருப்பதை உறுதி செய்ய விரும்புகிறீர்கள். எனவே பின்வரும் கட்டளைகளை இயக்கவும்: + + ```bash + git switch [கிளை பெயர்] + git merge main + ``` + + +இது உங்கள் கிளையில் `main` இருந்து அனைத்து மாற்றங்களையும் கொண்டு வரும் மற்றும் வட்டம் நீங்கள் தொடர முடியும். இல்லையெனில்,கிட் _confused_ எங்கே என்று விஎஸ் குறியீடு உங்களுக்கு சொல்லும், மேலும் எந்த உள்ளடக்கம் மிகவும் துல்லியமானது என்று சொல்ல பாதிக்கப்பட்ட கோப்புகளை மாற்றவும். + +1. 1. **உங்கள் வேலையை கிட்ஹப்**க்கு அனுப்பவும். உங்கள் வேலையை கிட்ஹப் க்கு அனுப்புவது என்பது இரண்டு விஷயங்களைக் குறிக்கிறது. உங்கள் கிளையை உங்கள் ரெப்போவுக்குத் தள்ளி, பின்னர் ஒரு பேஆர், புல் கோரிக்கையைத் திறக்கவும். + + ```bash + git push --set-upstream origin [கிளை பெயர்] + ``` + மேலே கட்டளை உங்கள் முட்கரண்டி ரெப்போ கிளை உருவாக்குகிறது. + +1. **ஒரு பேஆர்** திறக்கவும். அடுத்து, நீங்கள் ஒரு பேஆர் ஐ திறக்க விரும்புகிறீர்கள். நீங்கள் கிட்ஹப் மீது ஃபோர்க்செய்யப்பட்ட ரெப்போவுக்கு வழிசெலுத்துவதன் மூலம் அதைச் செய்கிறீர்கள். நீங்கள் ஒரு புதிய பேஆர் ஐ உருவாக்க விரும்புகிறீர்களா என்று கேட்கும் கிட்ஹப்பில் ஒரு அறிகுறியைப் பார்ப்பீர்கள், அதை கிளிக் செய்து, செய்தி தலைப்பை மாற்றக்கூடிய ஒரு இடைமுகத்திற்கு நீங்கள் அழைத்துச் செல்லப்படுகிறீர்கள், அதற்கு மிகவும் பொருத்தமான விளக்கத்தை க்கொடுங்கள். இப்போது நீங்கள் ஃபோர்க் செய்த ரெப்போவின் பராமரிப்பாளர் இந்த பேஆர் ஐப் பார்ப்பார், _விரல்கள் கடந்து_ அவர்கள் பாராட்டுவார்கள் மற்றும் உங்கள் பேஆர் ஐ இணைப்பார்கள். நீங்கள் இப்போது ஒரு பங்களிப்பாளராக இருக்கிறீர்கள், நீங்கள் :) + +1. **சுத்தம்**. நீங்கள் வெற்றிகரமாக ஒரு பேஆர் ஐ இணைத்த பிறகு _சுத்தம்_ நல்ல நடைமுறையாகக் கருதப்படுகிறது. உங்கள் உள்ளூர் கிளை மற்றும் நீங்கள் கிட்ஹப் க்கு தள்ளிய கிளை இரண்டையும் சுத்தம் செய்ய விரும்புகிறீர்கள். முதலில் பின்வரும் கட்டளையுடன் அதை உள்நாட்டில் நீக்குவோம்: + + ```bash + git branch -d [கிளை பெயர்] + ``` + + நீங்கள் அடுத்த ஃபோர்க்செய்யப்பட்ட ரெப்போவிற்கு கிட்ஹப் பக்கம் செல்வதை உறுதி செய்து, நீங்கள் அதை தள்ளிய தொலைதூர கிளையை அகற்றவும். + +`புல் கோரிக்கை` ஒரு முட்டாள்தனமான சொல் போல் தெரிகிறது, ஏனென்றால் உண்மையில் நீங்கள் திட்டத்தில் உங்கள் மாற்றங்களை தள்ள விரும்புகிறீர்கள். ஆனால் பராமரிப்பாளர் (திட்ட உரிமையாளர்) அல்லது முக்கிய குழு திட்டத்தின் "முக்கிய" கிளையுடன் இணைப்பதற்கு முன் உங்கள் மாற்றங்களை கருத்தில் கொள்ள வேண்டும், எனவே நீங்கள் உண்மையில் ஒரு பராமரிப்பவரிடமிருந்து ஒரு மாற்ற முடிவைக் கோருகிறீர்கள். + +ஒரு இழு கோரிக்கை மதிப்புரைகள், கருத்துக்கள், ஒருங்கிணைந்த சோதனைகள் மற்றும் பலவற்றுடன் ஒரு கிளையில் அறிமுகப்படுத்தப்பட்ட வேறுபாடுகளை ஒப்பிட்டு விவாதிக்க ும் இடம். ஒரு நல்ல இழுப்பு கோரிக்கை ஒரு ஒப்புக்கொள்ளும் செய்தி போன்ற கிட்டத்தட்ட அதே விதிகளைப் பின்பற்றுகிறது. எடுத்துக்காட்டாக, உங்கள் வேலை ஒரு சிக்கலைத் சரிசெய்யும்போது, சிக்கல் டிராக்கரில் உள்ள ஒரு பிரச்சினைக்கு நீங்கள் ஒரு குறிப்பைச் சேர்க்கலாம். இது ஒரு `#` பயன்படுத்தி செய்யப்படுகிறது, அதைத் தொடர்ந்து உங்கள் பிரச்சினையின் எண்ணிக்கை. உதாரணமாக `#97`. + +🤞அனைத்து காசோலைகளும் கடந்து, திட்ட உரிமையாளர்(கள்) உங்கள் மாற்றங்களை திட்டத்தில் இணைக்க வேண்டும் என்று விரல்கள் கடந்து விட்டன🤞 + +கிட்ஹப்பில் உள்ள தொடர்புடைய தொலைநிலை கிளையிலிருந்து அனைத்து புதிய ஒப்புக்களுடன் உங்கள் தற்போதைய உள்ளூர் பணிகிளையைப் புதுப்பிக்கவும்: + +`git pull` + +## திறந்த மூலத்திற்கு எவ்வாறு பங்களிக்க வேண்டும் + +முதலில், உங்களுக்கு ஆர்வமுள்ள கிட்ஹப்பில் ஒரு களஞ்சியத்தை (அல்லது **ரெப்போ**) காணலாம், அதற்கு நீங்கள் ஒரு மாற்றத்தை பங்களிக்க விரும்புகிறீர்கள். அதன் உள்ளடக்கங்களை உங்கள் இயந்திரத்தில் நகலெடுக்க விரும்புகிறீர்கள்.. + +✅ 'தொடக்க நட்பு' ரெப்போஸைக் கண்டுபிடிக்க ஒரு நல்ல வழி ['நல்ல முதல் பிரச்சினை' என்ற குறிச்சொல்மூலம் தேடுவதாகும்](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). + +![உள்ளூரில் ஒரு ரெப்போவை நகலெடுக்கவும்](../images/clone_repo.png) + +குறியீட்டை நகலெடுக்க பல வழிகள் உள்ளன. ஒரு வழி களஞ்சியத்தின் உள்ளடக்கங்களை "குளோன்" செய்வது, HTTPஎஸ், எஸ்எஸ்ஹெச், அல்லது கிட்ஹப் சிஎல்ஐ (கட்டளை வரி இடைமுகம்) பயன்படுத்தி. + +உங்கள் முனையத்தைத் திறந்து களஞ்சியத்தை இவ்வாறு குளோன் செய்யுங்கள்: +`git clone https://github.com/புரொஜக்ட்யுஆர்எல்` + +திட்டத்தில் வேலை செய்ய, சரியான கோப்புறைக்கு மாறவும்: +`cd புரொஜக்ட்யுஆர்எல்` + +நீங்கள் [கோட்ஸ்பேஸ்](https://github.com/features/codespaces), கிட்ஹப்பின் உட்பொதிக்கப்பட்ட குறியீடு ஆசிரியர் / கிளவுட் மேம்பாட்டு சூழல் அல்லது [கிட்ஹப் டெஸ்க்டாப்](https://desktop.github.com/) பயன்படுத்தி முழு திட்டத்தையும் திறக்கலாம் + +இறுதியாக, நீங்கள் ஒரு ஜிப் செய்யப்பட்ட கோப்புறையில் குறியீட்டைப் பதிவிறக்கலாம். + +### கிட்ஹப் பற்றி இன்னும் சில சுவாரஸ்யமான விஷயங்கள் + +நீங்கள் கீதுப்-இல் உள்ள எந்தவொரு பொது களஞ்சியத்தையும் நட்சத்திர, பார்வை மற்றும் /அல்லது "முட்கரண்டி" செய்யலாம். மேல்-வலது கீழ்-கீழ் மெனுவில் உங்கள் நட்சத்திரகளஞ்சியங்களை நீங்கள் காணலாம். இது புக்மார்க்கிங் போன்றது, ஆனால் குறியீட்டுக்கு. + +திட்டங்கள் ஒரு சிக்கல் டிராக்கர் வேண்டும், பெரும்பாலும் "சிக்கல்கள்" தாவலில் கிட்ஹப் இல்லையெனில் சுட்டிக்காட்டப்படாவிட்டால், அங்கு மக்கள் திட்டம் தொடர்பான சிக்கல்களைவிவாதிக்கிறார்கள். மற்றும் புல் கோரிக்கைகள் தாவல் மக்கள் விவாதிக்க மற்றும் முன்னேற்றத்தில் இருக்கும் மாற்றங்களை மதிப்பாய்வு எங்கே உள்ளது. + +திட்டங்கள் மன்றங்கள், அஞ்சல் பட்டியல்கள் அல்லது ஸ்லாக், டிஸ்ட்டர் அல்லது ஐஆர்சி போன்ற அரட்டை சேனல்களிலும் விவாதம் நடத்தலாம். + +✅ உங்கள் புதிய கிட்ஹப் ரெப்போவைச் சுற்றி பாருங்கள் மற்றும் சில விஷயங்களை முயற்சிக்கவும், எடிட்டிங் அமைப்புகள், உங்கள் ரெப்போவில் தகவலைச் சேர்த்தல், மற்றும் ஒரு திட்டத்தை உருவாக்குதல் (ஒரு கன்பன் பலகை போன்றது). நீங்கள் செய்ய முடியும் நிறைய இருக்கிறது! + +--- + +## 🚀 அறைகூவல் + +ஒருவருக்கொருவர் குறியீட்டில் வேலை செய்ய ஒரு நண்பருடன் ஜோடி சேரவும். ஒரு திட்டத்தை கூட்டாக உருவாக்கவும், ஃபோர்க் குறியீடு, கிளைகளை உருவாக்கவும், மாற்றங்களை இணைக்கவும். + +## விரிவுரைக்குப் பிந்தைய வினாடி வினா +[விரிவுரைக்குப் பிந்தைய வினாடி வினா](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4?loc=ta) + +## ஆய்வு & சுய ஆய்வு + +மேலும் வாசிக்க [திறந்த மூல மென்பொருளுக்கு பங்களிப்பு](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution). + +[கிட் ஏமாற்றுதாள்](https://training.github.com/downloads/github-git-cheat-sheet/). + +பயிற்சி, பயிற்சி, பயிற்சி. கிட்ஹப் [lab.github.com](https://lab.github.com/) வழியாக கிடைக்கும் சிறந்த கற்றல் பாதைகளைக் கொண்டுள்ளது: + +- [கிது முதல் வாரம்](https://lab.github.com/githubtraining/first-week-on-github) + + +நீங்கள் இன்னும் மேம்பட்ட ஆய்வகங்கள் காண்பீர்கள். + +## வகுத்தமைத்தல் + +முழுமையான [கிட்ஹப் பயிற்சி ஆய்வகத்தில் முதல் வாரம்](https://lab.github.com/githubtraining/first-week-on-github) diff --git a/1-getting-started-lessons/2-github-basics/translations/README.zh-cn.md b/1-getting-started-lessons/2-github-basics/translations/README.zh-cn.md index 698161a0..c98c3d29 100644 --- a/1-getting-started-lessons/2-github-basics/translations/README.zh-cn.md +++ b/1-getting-started-lessons/2-github-basics/translations/README.zh-cn.md @@ -6,7 +6,7 @@ > 涂鸦笔记作者：[Tomomi Imura](https://twitter.com/girlie_mac) ## 课前小测 -[课前小测](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/3?loc=zh_cn) +[课前小测](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3?loc=zh_cn) ## 大纲 @@ -203,10 +203,10 @@ git branch [分支名] ``` -1. **切换到工作分支**。使用 `git checkout` 来切换到指定分支并且更新工作目录中的文件： +1. **切换到工作分支**。使用 `git switch` 来切换到指定分支并且更新工作目录中的文件： ```bash - git checkout [分支名] + git switch [分支名] ``` 1. **干活**。现在你可以添加你的变更了，别忘了用下面的命令告诉 Git 你所做的工作： @@ -221,14 +221,14 @@ 1. **将你的工作合入 `main` 分支**。在完成工作后，你打算将你的工作和 `main` 分支上的合并。`main` 分支可能同时有了一些新的变更，所以要先用以下命令确保将其更新至最新版本： ```bash - git checkout main + git switch main git pull ``` 这时你想确认是否存在 _冲突（conflicts）_，即 Git 没法简单地将这些变化 _合入_ 你的分支的情况。为此运行下面的命令： ```bash - git checkout [分支名] + git switch [分支名] git merge main ``` @@ -299,7 +299,7 @@ Pull Request 是一个可以用来比较和讨论一个分支引入的改动的 找朋友一起编辑彼此的代码。协作创建一个项目、复刻代码、创建分支，然后合并变更。 ## 课后小测 -[课后小测](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/4?loc=zh_cn) +[课后小测](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4?loc=zh_cn) ## 复习 & 自学 diff --git a/1-getting-started-lessons/2-github-basics/translations/README.zh-tw.md b/1-getting-started-lessons/2-github-basics/translations/README.zh-tw.md index 9bce5d02..375a432c 100644 --- a/1-getting-started-lessons/2-github-basics/translations/README.zh-tw.md +++ b/1-getting-started-lessons/2-github-basics/translations/README.zh-tw.md @@ -6,7 +6,7 @@ > 由[Tomomi Imura](https://twitter.com/girlie_mac) 繪製 ## 課前測驗 -[課前測驗](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/3?loc=zh_tw) +[課前測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3?loc=zh_tw) ## 大綱 @@ -202,10 +202,10 @@ git branch [分支名稱] ``` -1. **切換到該工作分支** 使用指令 `git checkout` 來切換到特定分支，更新分支的檔案狀態： +1. **切換到該工作分支** 使用指令 `git switch` 來切換到特定分支，更新分支的檔案狀態： ```bash - git checkout [分支名稱] + git switch [分支名稱] ``` 1. **程式設計** 記得追蹤你所更改的地方，利用下列的指令來告訴 Git： @@ -220,14 +220,14 @@ 1. **將工作分支與 `main` 分支進行合併** 當工作完成時，你會需要將工作分支與 `main` 分支進行合併。 `main` 分支可能會被他人更新，在合併之前記得更新主分支： ```bash - git checkout main + git switch main git pull ``` 這項步驟可能會面臨到 _衝突(conflicts)_，代表 Git 無法將本地的更動作 _合併(combine)_ 。此時你需要執行下列的指令： ```bash - git checkout [分支名稱] + git switch [分支名稱] git merge main ``` @@ -298,7 +298,7 @@ 找朋友一起編輯彼此的程式。共同建立一項專案、分叉程式、建立分支、合併更動。 ## 課後測驗 -[課後測驗](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/4?loc=zh_tw) +[課後測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4?loc=zh_tw) ## 複習與自學 diff --git a/1-getting-started-lessons/3-accessibility/README.md b/1-getting-started-lessons/3-accessibility/README.md index b6079818..fd0596b0 100644 --- a/1-getting-started-lessons/3-accessibility/README.md +++ b/1-getting-started-lessons/3-accessibility/README.md @@ -1,10 +1,10 @@ # Creating Accessible Webpages -![All About Accessibility](/sketchnotes/webdev101-a11y.png) +![All About Accessibility](../../sketchnotes/webdev101-a11y.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## Pre-Lecture Quiz -[Pre-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/5) +[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5) > The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. > @@ -218,7 +218,7 @@ Take this HTML and rewrite it to be as accessible as possible, given the strateg ``` ## Post-Lecture Quiz -[Post-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/6) +[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/6) ## Review & Self Study diff --git a/1-getting-started-lessons/3-accessibility/translations/README.es.md b/1-getting-started-lessons/3-accessibility/translations/README.es.md index 6963ccda..03667d22 100644 --- a/1-getting-started-lessons/3-accessibility/translations/README.es.md +++ b/1-getting-started-lessons/3-accessibility/translations/README.es.md @@ -3,7 +3,7 @@ ![Todo sobre accesibilidad](/sketchnotes/webdev101-a11y.png) > Dibujo por [Tomomi Imura](https://twitter.com/girlie_mac) -## [Cuestionario](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/5) +## [Cuestionario](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5) > El poder de la Web está en su universalidad. El acceso de todas las personas independientemente de su discapacidad es un aspecto fundamental. > @@ -202,7 +202,7 @@ Una web accesible para algunos no es una verdadera "red mundial". La mejor maner ``` -## [Post-lectura prueba](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/6) +## [Post-lectura prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/6) ## Revisión y auto-estudio diff --git a/1-getting-started-lessons/3-accessibility/translations/README.fr.md b/1-getting-started-lessons/3-accessibility/translations/README.fr.md index 006c9b6d..1237fcd3 100644 --- a/1-getting-started-lessons/3-accessibility/translations/README.fr.md +++ b/1-getting-started-lessons/3-accessibility/translations/README.fr.md @@ -4,7 +4,7 @@ > SketchNote par[Tomomi Imura](https://twitter.com/girlie_mac) ## Quiz préalable -[Quiz préalable](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/5?loc=fr) +[Quiz préalable](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5?loc=fr) > La puissance du Web est dans son universalité. L'accès par tout le monde indépendamment d'invalidité est un aspect essentiel. > @@ -217,7 +217,7 @@ Prenez ce code HTML et réécrivez-le pour qu'il soit aussi accessible que possi ``` ## Quiz de validation des connaissances -[Quiz de validation des connaissances](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/6?loc=fr) +[Quiz de validation des connaissances](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/6?loc=fr) ## Révision et auto-apprentissage 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..fc799f5e 100644 --- a/1-getting-started-lessons/3-accessibility/translations/README.hi.md +++ b/1-getting-started-lessons/3-accessibility/translations/README.hi.md @@ -4,7 +4,7 @@ > [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा स्केचनेट ## पूर्व व्याख्यान प्रश्नोत्तरी -[पूर्व व्याख्यान प्रश्नोत्तरी](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/5?loc=hi) +[पूर्व व्याख्यान प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5?loc=hi) > वेब की शक्ति अपनी सार्वभौमिकता में है। विकलांगता की परवाह किए बिना सभी तक पहुंच एक आवश्यक पहलू है। > @@ -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

@@ -214,7 +214,7 @@ ``` ## व्याख्यान उपरांत प्रश्नोत्तरी -[व्याख्यान उपरांत प्रश्नोत्तरी](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/6?loc=hi) +[व्याख्यान उपरांत प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/6?loc=hi) ## समीक्षा और स्व अध्ययन diff --git a/1-getting-started-lessons/3-accessibility/translations/README.id.md b/1-getting-started-lessons/3-accessibility/translations/README.id.md index ea96011c..7cfa95f2 100644 --- a/1-getting-started-lessons/3-accessibility/translations/README.id.md +++ b/1-getting-started-lessons/3-accessibility/translations/README.id.md @@ -5,7 +5,7 @@ ## Kuis Pra-Kuliah -[Kuis pra-kuliah](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/5?loc=id) +[Kuis pra-kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5?loc=id) > Kekuatan Web ada dalam universalitasnya. Akses oleh semua orang tanpa memandang disabilitas merupakan aspek penting. > @@ -210,7 +210,7 @@ Ambil HTML ini dan tulis ulang agar dapat diakses semaksimal mungkin, dengan str ## Kuis Pasca Kuliah -[Kuis pasca kuliah](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/6?loc=id) +[Kuis pasca kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/6?loc=id) ## Review & Belajar Mandiri diff --git a/1-getting-started-lessons/3-accessibility/translations/README.it.md b/1-getting-started-lessons/3-accessibility/translations/README.it.md index 850a76f8..436b28ea 100644 --- a/1-getting-started-lessons/3-accessibility/translations/README.it.md +++ b/1-getting-started-lessons/3-accessibility/translations/README.it.md @@ -4,7 +4,7 @@ > Sketchnote di [Tomomi Imura](https://twitter.com/girlie_mac) ## Quiz Pre-Lezione -[Quiz Pre-Lezione](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/5?loc=it) +[Quiz Pre-Lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5?loc=it) > La forza del Web è nella usa universalità. L'accesso garantito a tutti a prescindere dalla disabilità è us aspetto essenziale. > @@ -215,7 +215,7 @@ Prendere questo HTML e riscriverlo per essere il più accessibile possibile, dat ``` ## Quiz post-lezione -[Quiz post-lezione](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/6?loc=it) +[Quiz post-lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/6?loc=it) ## Revisione e auto apprendimento diff --git a/1-getting-started-lessons/3-accessibility/translations/README.ja.md b/1-getting-started-lessons/3-accessibility/translations/README.ja.md index f3e947b4..8fe0ab87 100644 --- a/1-getting-started-lessons/3-accessibility/translations/README.ja.md +++ b/1-getting-started-lessons/3-accessibility/translations/README.ja.md @@ -4,7 +4,7 @@ > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## レッスン前の小テスト -[レッスン前の小テスト](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/5?loc=ja) +[レッスン前の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5?loc=ja) > Web の力は、その普遍性にあります。障害の有無に関わらず、誰もがアクセスできることが重要です。 > @@ -216,7 +216,7 @@ CSS は、ページ上のあらゆる要素の外観を完全に制御するこ ``` ## レッスン後の小テスト -[レッスン後の小テスト](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/6?loc=ja) +[レッスン後の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/6?loc=ja) ## 復習と自己学習 diff --git a/1-getting-started-lessons/3-accessibility/translations/README.ko.md b/1-getting-started-lessons/3-accessibility/translations/README.ko.md index ce48b6d2..dc6c4f91 100644 --- a/1-getting-started-lessons/3-accessibility/translations/README.ko.md +++ b/1-getting-started-lessons/3-accessibility/translations/README.ko.md @@ -4,7 +4,7 @@ > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## 강의 전 퀴즈 -[Pre-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/5?loc=ko) +[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5?loc=ko) > 웹의 힘은 보편성에 있습니다. 장애에 관계없이 모든 사람이 접근하는 것은 필수 요소입니다. > @@ -207,7 +207,7 @@ CSS는 페이지에 있는 모든 요소의 형태를 완벽하게 제어합니 ``` ## 강의 후 퀴즈 -[Post-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/6?loc=ko) +[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/6?loc=ko) ## 리뷰 & 자기주도 학습 diff --git a/1-getting-started-lessons/3-accessibility/translations/README.ms.md b/1-getting-started-lessons/3-accessibility/translations/README.ms.md index f3253789..a37537d5 100644 --- a/1-getting-started-lessons/3-accessibility/translations/README.ms.md +++ b/1-getting-started-lessons/3-accessibility/translations/README.ms.md @@ -4,7 +4,7 @@ > Sketchnote karya [Tomomi Imura](https://twitter.com/girlie_mac) ## Kuiz Pra Kuliah -[Kuiz Pra Kuliah](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/5) +[Kuiz Pra Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5) > Kekuatan Web berada dalam kesejagatannya. Akses oleh semua orang tanpa mengira kecacatan adalah aspek penting. > @@ -207,7 +207,7 @@ Ambil HTML ini dan tulis semula agar dapat diakses semaksimum mungkin, mengingat ``` ## Kuiz Pasca Kuliah -[Kuiz Pasca Kuliah](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/6) +[Kuiz Pasca Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/6) ## Mengkaji dan belajar sendiri 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..d6131de1 100644 --- a/1-getting-started-lessons/3-accessibility/translations/README.nl.md +++ b/1-getting-started-lessons/3-accessibility/translations/README.nl.md @@ -4,7 +4,7 @@ > Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac) ## Quiz voorafgaand aan de lezing -[Quiz voorafgaand aan de lezing](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/5) +[Quiz voorafgaand aan de lezing](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5) > De kracht van het web zit in zijn universaliteit. Toegang voor iedereen, ongeacht hun handicap, is een essentieel aspect. > @@ -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

@@ -216,7 +216,7 @@ Neem deze HTML en herschrijf deze zodat deze zo toegankelijk mogelijk is, gezien ``` ## Quiz na de lezing -[Quiz na de lezing](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/6) +[Quiz na de lezing](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/6) ## Beoordeling en zelfstudie diff --git a/1-getting-started-lessons/3-accessibility/translations/README.pt.md b/1-getting-started-lessons/3-accessibility/translations/README.pt.md index 04f61356..207933cf 100644 --- a/1-getting-started-lessons/3-accessibility/translations/README.pt.md +++ b/1-getting-started-lessons/3-accessibility/translations/README.pt.md @@ -4,7 +4,7 @@ > Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac) ## Quiz Pré-Aula -[Pre-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/5) +[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5) > O poder da Web está em sua universalidade. O acesso de todos, independentemente de deficiências, é um aspecto essencial. > @@ -215,7 +215,7 @@ Pegue este HTML e reescreva-o para ser o mais acessível possível, de acordo co ``` ## Quiz Pós-Aula -[Quiz Pós-Aula](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/6) +[Quiz Pós-Aula](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/6) ## Revisão e autoestudo diff --git a/1-getting-started-lessons/3-accessibility/translations/README.zh-cn.md b/1-getting-started-lessons/3-accessibility/translations/README.zh-cn.md index b4944fee..0084744c 100644 --- a/1-getting-started-lessons/3-accessibility/translations/README.zh-cn.md +++ b/1-getting-started-lessons/3-accessibility/translations/README.zh-cn.md @@ -4,7 +4,7 @@ > 涂鸦笔记作者：[Tomomi Imura](https://twitter.com/girlie_mac) ## 课前小测 -[课前小测](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/5?loc=zh_cn) +[课前小测](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5?loc=zh_cn) > 互联网的力量存在于其普适性中，让包括残障人士在内的每个人都能访问互联网，是其中不可或缺的一方面。 > @@ -215,7 +215,7 @@ CSS 让你可以完全随意地控制页面中任何元素的外观。你可以 ``` ## 课后小测 -[课后小测](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/6?loc=zh_cn) +[课后小测](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/6?loc=zh_cn) ## 复习 & 自学 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..2291fffc 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 @@ -4,7 +4,7 @@ > 由 [Tomomi Imura](https://twitter.com/girlie_mac) 繪製 ## 課前測驗 -[課前測驗](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/5?loc=zh_tw) +[課前測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5?loc=zh_tw) > 網路的強大在於它的普遍性。無論用戶是否有殘疾，讓大家無差別地使用網路是必要的。 > @@ -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

@@ -218,7 +218,7 @@ CSS 提供完整的網頁造型控制，你可以讓文字框框線隱藏或是 ``` ## 課後測驗 -[課後測驗](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/6?loc=zh_tw) +[課後測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/6?loc=zh_tw) ## 複習與自學 diff --git a/1-getting-started-lessons/3-accessibility/translations/assignment.hi.md b/1-getting-started-lessons/3-accessibility/translations/assignment.hi.md index 0b6d7409..00234889 100644 --- a/1-getting-started-lessons/3-accessibility/translations/assignment.hi.md +++ b/1-getting-started-lessons/3-accessibility/translations/assignment.hi.md @@ -6,7 +6,6 @@ ## सरनामा -| मानदंड | उदाहरणात्मक | -पर्याप्त | सुधार की जरूरत | -| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | --------------------------- | +|मानदंड|उदाहरणात्मक|पर्याप्त|सुधार की जरूरत| +|--------------|------|---------------------------|---------------------------| | छात्र की रिपोर्ट | साइट कैसे अपर्याप्त है, इस पर पैराग्राफ शामिल हैं, पीडीएफ के रूप में कैप्चर की गई लाइटहाउस रिपोर्ट, सुधार करने के लिए दस बिंदुओं की एक सूची, इसे कैसे सुधारें, इस पर विवरण के साथ। | आवश्यक का 20% गायब है | आवश्यक का 50% गायब है | diff --git a/1-getting-started-lessons/translations/README.np.md b/1-getting-started-lessons/translations/README.np.md new file mode 100644 index 00000000..edb0b183 --- /dev/null +++ b/1-getting-started-lessons/translations/README.np.md @@ -0,0 +1,17 @@ +# वेब विकासको साथ सुरू गर्दै + +पाठ्यक्रमको यस खण्डमा, तपाईंलाई व्यावसायिक विकासकर्ता बन्न महत्त्वपूर्ण गैर-प्रोजेक्ट-आधारित अवधारणाहरूसँग परिचय गराइनेछ। + +### विषयहरू + +1. [प्रोग्रामिङ भाषाहरू र व्यापारका उपकरणहरूको परिचय](../1-intro-to-programming-languages/translations/README.np.md) +2. [GitHub को परिचय](../2-github-basics/README.md) +3. [पहुँचको आधारभूत](../3-accessibility/README.md) + +### क्रेडिट + +[Jasmine Greenaway](https://twitter.com/paladique) द्वारा ♥️ को साथमा प्रोग्रामिङ भाषाहरू र व्यापारका उपकरणहरूको परिचय लेखिएको थियो। + +GitHub को परिचय [Floor Drees](https://twitter.com/floordrees) द्वारा ♥️ लेखिएको थियो। + +पहुँचका आधारभूत कुराहरू [Christopher Harrison](https://twitter.com/geektrainer) द्वारा ♥️ लेखिएको थियो। diff --git a/1-getting-started-lessons/translations/README.ru.md b/1-getting-started-lessons/translations/README.ru.md index ef1fe68d..6accaa04 100644 --- a/1-getting-started-lessons/translations/README.ru.md +++ b/1-getting-started-lessons/translations/README.ru.md @@ -4,8 +4,8 @@ ### Темы -1. [Введение в языки программирования и профессиональные инструменты](../1-intro-to-programming-languages/README.md) -2. [Введение в GitHub](../2-github-basics/README.md) +1. [Введение в языки программирования и профессиональные инструменты](../1-intro-to-programming-languages/translations/README.ru.md) +2. [Введение в GitHub](../2-github-basics/translations/README.ru.md) 3. [Основы доступности (Accessibility)](../3-accessibility/README.md) ### Авторы diff --git a/1-getting-started-lessons/translations/README.ta.md b/1-getting-started-lessons/translations/README.ta.md new file mode 100644 index 00000000..2395045c --- /dev/null +++ b/1-getting-started-lessons/translations/README.ta.md @@ -0,0 +1,18 @@ +# இணைய அபிவிருத்தியுடன் தொடங்குதல் + +பாடத்திட்டத்தின் இந்தப் பிரிவில், தொழில்முறை மேம்பாட்டாளராக ஆவதற்கு முக்கியமான திட்ட அடிப்படையிலான கருத்துக்கள் உங்களுக்கு அறிமுகப்படுத்தப்படும். + +### தலைப்புகள் + +1. [வர்த்தகத்தின் நிரலாக்க மொழிகள் மற்றும் கருவிகள் அறிமுகம்](../1-intro-to-programming-languages/README.md) +2. [கிட்ஹப் அறிமுகம்](../2-github-basics/README.md) +3. [அணுகல்தன்மையின் அடிப்படைகள்](../3-accessibility/README.md) + +### கடன்கள் + +வர்த்தகத்தின் நிரலாக்க மொழிகள் மற்றும் கருவிகள் அறிமுகம் ♥️ எழுதியவர் [ஜாஸ்மின் கிரீன்வே](https://twitter.com/paladique/) + +கிட்ஹப் அறிமுகம் ♥️ எழுதியவர் [ஃப்ளோர் டிரீஸ்](https://twitter.com/floordrees/) + +அணுகல்தன்மையின் அடிப்படைகள் ♥️ எழுதியவர் [கிறிஸ்டோபர் ஹாரிசன்](https://twitter.com/geektrainer/) + diff --git a/2-js-basics/1-data-types/README.md b/2-js-basics/1-data-types/README.md index 6ea43dc3..d41f18ed 100644 --- a/2-js-basics/1-data-types/README.md +++ b/2-js-basics/1-data-types/README.md @@ -1,18 +1,20 @@ # JavaScript Basics: Data Types -![JavaScript Basics - Data types](/sketchnotes/webdev101-js-datatypes.png) +![JavaScript Basics - Data types](../../sketchnotes/webdev101-js-datatypes.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## Pre-Lecture Quiz -[Pre-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/7) +[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/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)! -[![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/AWfA95eLdq8/0.jpg)](https://youtube.com/watch?v=AWfA95eLdq8 "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 @@ -187,7 +189,7 @@ Booleans can be only two values: `true` or `false`. Booleans can help make decis JavaScript is notorious for its surprising ways of handling datatypes on occasion. Do a bit of research on these 'gotchas'. For example: case sensitivity can bite! Try this in your console: `let age = 1; let Age = 2; age == Age` (resolves `false` -- why?). What other gotchas can you find? ## Post-Lecture Quiz -[Post-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/8) +[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/8) ## Review & Self Study diff --git a/2-js-basics/1-data-types/translations/README.de.md b/2-js-basics/1-data-types/translations/README.de.md index 00e18e13..d005c393 100644 --- a/2-js-basics/1-data-types/translations/README.de.md +++ b/2-js-basics/1-data-types/translations/README.de.md @@ -2,7 +2,7 @@ [![Datentypen in JavaScript](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Datentypen in JavaScript") -## [Pre-Lecture Quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/7) +## [Pre-Lecture Quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/7) Diese Lektion behandelt die Grundlagen von JavaScript, der Sprache, die Interaktivität im Web bietet. @@ -186,7 +186,7 @@ Boolesche Werte können nur zwei Werte sein: `true` oder `false`. Boolesche Wert JavaScript ist bekannt für seine überraschende Art, gelegentlich mit Datentypen umzugehen. Recherchiere ein bisschen über diese 'Fallstricke'. Zum Beispiel: Groß- und Kleinschreibung kann beißen! Versuchen Sie dies in Ihrer Konsole: `let age = 1; let Age = 2; age == Age` (löst `false` auf - warum?). Welche anderen Fallstricke können Sie finden? -## [Quiz nach der Vorlesung](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/8) +## [Quiz nach der Vorlesung](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/8) ## Review & Selbststudium 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..f56fb246 100644 --- a/2-js-basics/1-data-types/translations/README.es.md +++ b/2-js-basics/1-data-types/translations/README.es.md @@ -3,9 +3,11 @@ ![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") -## [Pre-lectura prueba](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/7) +[![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://ashy-river-0debb7803.1.azurestaticapps.net/quiz/7) Esta lección cubre los conceptos básicos de JavaScript, el lenguaje que proporciona interactividad en la web. @@ -181,7 +183,7 @@ Los booleanos pueden tener solo dos valores: `true` o `false`. Los valores boole 🚀 Desafío: JavaScript es conocido por sus sorprendentes formas de manejar tipos de datos en ocasiones. Investiga un poco sobre estos "errores". Por ejemplo: ¡la sensibilidad a mayúsculas y minúsculas puede morder! Pruebe esto en su consola: `let age = 1; let Age = 2; age == Age` (resuelve `false` - ¿por qué?). ¿Qué otras trampas puedes encontrar? -## [Post-lectura prueba](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/8) +## [Post-lectura prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/8) ## Revisión y autoestudio 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..b6c3f902 100644 --- a/2-js-basics/1-data-types/translations/README.fr.md +++ b/2-js-basics/1-data-types/translations/README.fr.md @@ -4,15 +4,17 @@ > Sketchnote par [Tomomi Imura](https://twitter.com/girlie_mac) ## Quiz préalable -[Quiz préalable](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/7?loc=fr) +[Quiz préalable](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/7?loc=fr) 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)! -[![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! @@ -188,7 +190,7 @@ Les booléens n'ont que deux valeurs possibles : `true` (vrai) ou `false` (faux) JavaScript est célèbre pour sa manière occasionnellement surprenante de gérer les types de données. Effectuez quelques recherches sur ces pièges. Par exemple : la sensibilité à la casse peut vous causer soucis ! Essayez ceci dans votre console : `let age = 1; let Age = 2; age == Age` (renvoie `false` (faux) -- pourquoi ?). Quels autres pièges pouvez-vous trouver ? ## Quiz de validation des connaissances -[Quiz de validation des connaissances](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/8?loc=fr) +[Quiz de validation des connaissances](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/8?loc=fr) ## Révision et auto-apprentissage 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..30754a94 100644 --- a/2-js-basics/1-data-types/translations/README.hi.md +++ b/2-js-basics/1-data-types/translations/README.hi.md @@ -4,12 +4,14 @@ > [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा स्केचनेट ## पूर्व व्याख्यान प्रश्नोत्तरी -[पूर्व व्याख्यान प्रश्नोत्तरी](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/7?loc=hi) +[पूर्व व्याख्यान प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/7?loc=hi) इस पाठ में जावास्क्रिप्ट की मूल बातें शामिल हैं, वह भाषा जो वेब पर अन्तरक्रियाशीलता प्रदान करती है। [![जावास्क्रिप्ट में डेटा प्रकार](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") + चलो वेरिएबल्स और डेटा प्रकारों के साथ शुरू करते हैं जो उन्हें आबाद करते हैं! @@ -176,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) --- @@ -185,7 +187,7 @@ let myString2 = "World"; जावास्क्रिप्ट मौके पर डेटाटिप्स को संभालने के अपने आश्चर्यजनक तरीकों के लिए कुख्यात है।इन 'gotchas' पर थोड़ा शोध करें। For example: case sensitivity can bite! इसे अपने कंसोल में आज़माएँ: `let age = 1; let Age = 2; age == Age` (`false` हल करता है - क्यों?). आपको अन्य क्या मिल सकते हैं? ## व्याख्यान उपरांत प्रश्नोत्तरी -[व्याख्यान उपरांत प्रश्नोत्तरी](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/8?loc=hi) +[व्याख्यान उपरांत प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/8?loc=hi) ## समीक्षा और स्व अध्ययन 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..4499966c 100644 --- a/2-js-basics/1-data-types/translations/README.id.md +++ b/2-js-basics/1-data-types/translations/README.id.md @@ -6,12 +6,14 @@ ## Kuis Pra-Kuliah -[Kuis pra-Kuliah](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/7?loc=id) +[Kuis pra-Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/7?loc=id) Pelajaran ini mencakup dasar-dasar JavaScript, bahasa yang menyediakan interaktivitas di web. [![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 @@ -188,7 +190,7 @@ JavaScript terkenal karena cara yang mengejutkan dalam menangani tipe data pada ## Kuis Pasca-Kuliah -[Kuis pasca-kuliah](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/8?loc=id) +[Kuis pasca-kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/8?loc=id) ## Review & Belajar Mandiri 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..37c2fcb8 100644 --- a/2-js-basics/1-data-types/translations/README.it.md +++ b/2-js-basics/1-data-types/translations/README.it.md @@ -4,11 +4,13 @@ > Sketchnote di [Tomomi Imura](https://twitter.com/girlie_mac) ## Quiz pre-lezione -[Quiz pre-lezione](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/7?loc=it) +[Quiz pre-lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/7?loc=it) 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! @@ -184,7 +186,7 @@ I booleani possono avere solo due valori: vero (`true`) o falso (`false`). I bo JavaScript è noto per i suoi modi sorprendenti di gestire talvolta i tipi di dato. Effettuare un po' di ricerca su questi "trabocchetti". Ad esempio: la distinzione tra maiuscole e minuscole può mordere! Provare questo nella propria console: `let age = 1; let Age = 2; age == Age` (risulta `false` - perché?). Quali altri trabocchetti si riescono a trovare? ## quiz post-lezione -[Quiz post-lezione](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/8?loc=it) +[Quiz post-lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/8?loc=it) ## Revisione e auto apprendimento 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..dff6ffab 100644 --- a/2-js-basics/1-data-types/translations/README.ja.md +++ b/2-js-basics/1-data-types/translations/README.ja.md @@ -4,11 +4,13 @@ > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## レッスン前の小テスト -[レッスン前の小テスト](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/7?loc=ja) +[レッスン前の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/7?loc=ja) このレッスンでは、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") まず、変数とそれを埋めるデータ型について説明しましょう! @@ -185,7 +187,7 @@ let myString2 = "World"; JavaScript は、たまにデータ型を扱う際の意外な方法で悪名高いです。これらの 'gotchas' について少し調べてみてください。例えば: 大文字小文字の区別でつまずくことがあります! コンソールで以下のようにしてみてください。`let age = 1; let Age = 2; age == Age` (解決は `false` -- なぜ?) 他にどのような gotchas があるでしょうか? ## レッスン後の小テスト -[レッスン後の小テスト](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/8?loc=ja) +[レッスン後の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/8?loc=ja) ## 復習と自己学習 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..87d28740 100644 --- a/2-js-basics/1-data-types/translations/README.ko.md +++ b/2-js-basics/1-data-types/translations/README.ko.md @@ -4,11 +4,13 @@ > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## 강의 전 퀴즈 -[Pre-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/7?loc=ko) +[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/7?loc=ko) 해당 강의에서는 웹에서 상호작용을 제공하는 언어인 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") 변수와 변수를 채워주는 데이터 타입부터 시작합니다! @@ -185,7 +187,7 @@ let myString2 = "World"; JavaScript는 때때로 놀라운 방법으로 데이터 타입을 처리하는 것으로 유명합니다. 'gotchas'에 대해 약간 알아보세요. 예시: 대소문자 구분은 물릴 수 있습니다! 콘솔에서 다음을 시도하십시오: `let age = 1; let Age = 2; age == Age` (resolves `false` -- why?). 다른 문제를 찾을 수 있습니까? ## 강의 후 퀴즈 -[Post-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/8?loc=ko) +[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/8?loc=ko) ## 리뷰 & 자기주도 학습 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..965a83a4 100644 --- a/2-js-basics/1-data-types/translations/README.ms.md +++ b/2-js-basics/1-data-types/translations/README.ms.md @@ -4,12 +4,13 @@ > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## Kuiz Pra Kuliah -[Kuiz Pra Kuliah](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/7) +[Kuiz Pra Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/7) Pelajaran ini merangkumi asas-asas JavaScript, bahasa yang menyediakan interaktiviti di web. [![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! @@ -185,7 +186,7 @@ Booleans boleh hanya dua nilai: `benar` atau `salah`. Booleans dapat membantu me JavaScript terkenal kerana kaedahnya yang mengagumkan dalam mengendalikan jenis data sesekali. Lakukan sedikit kajian mengenai 'gotchas' ini. Contohnya: kepekaan kes boleh menggigit! Cubalah ini di konsol anda: `let age = 1; biarkan Umur = 2; age == Age` (menyelesaikan `false` - mengapa?). Apa lagi gotchas yang anda dapati? ## Kuiz Pasca Kuliah -[Kuiz Pasca Kuliah](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/8) +[Kuiz Pasca Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/8) ## Mengkaji dan belajar sendiri 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..7e2839b5 100644 --- a/2-js-basics/1-data-types/translations/README.nl.md +++ b/2-js-basics/1-data-types/translations/README.nl.md @@ -4,12 +4,14 @@ > Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac) ## Quiz voorafgaand aan de lezing -[Quiz voorafgaand aan de lezing](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/7) +[Quiz voorafgaand aan de lezing](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/7) Deze les behandelt de basisprincipes van JavaScript, de taal die voor interactiviteit op internet zorgt. [![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! @@ -185,7 +187,7 @@ Booleans kunnen slechts twee waarden zijn: `true` of `false`. Booleans kunnen he JavaScript is berucht om zijn verrassende manieren om af en toe met gegevenstypen om te gaan. Doe een beetje onderzoek naar deze 'valstrikken'. Bijvoorbeeld: hoofdlettergevoeligheid kan bijten! Probeer dit in uw console: `let age = 1; let Age = 2; age == Age` (lost `false` op - waarom?). Welke andere valstrikken kunt u vinden? ## Quiz na de lezing -[Quiz na de lezing](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/8) +[Quiz na de lezing](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/8) ## Beoordeling en zelfstudie 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..64fdbe0c 100644 --- a/2-js-basics/1-data-types/translations/README.pt.md +++ b/2-js-basics/1-data-types/translations/README.pt.md @@ -4,11 +4,13 @@ > Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac) ## Quiz Pré-Aula -[Quiz Pré-Aula](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/7) +[Quiz Pré-Aula](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/7) 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! @@ -29,24 +31,24 @@ A criação e **declaração** de uma variável tem a seguinte sintaxe **[palavr 1. **Declare uma variável**. Vamos declarar uma variável usando a palavra-chave `let`: ```javascript - let minhaVariável; + let minhaVariavel; ``` - `minhaVariável` agora foi declarada usando a palavra-chave`let`. Atualmente não tem um valor. + `minhaVariavel` agora foi declarada usando a palavra-chave`let`. Atualmente não tem um valor. 1. **Atribua um valor**. Armazene um valor em uma variável com o operador `=`, seguido pelo valor esperado. ```javascript - minhaVariável = 123; + minhaVariavel = 123; ``` > Nota: o uso de `=` nesta lição significa que fazemos uso de um "operador de atribuição", usado para definir um valor para uma variável. Não denota igualdade. - `minhaVariável` agora foi *inicializada* com o valor 123. + `minhaVariavel` agora foi *inicializada* com o valor 123. 1. **Refatorar**. Substitua seu código pela seguinte instrução. ```javascript - let minhaVariável = 123; + let minhaVariavel = 123; ``` O acima é chamado de _inicialização explícita_ quando uma variável é declarada e recebe um valor ao mesmo tempo. @@ -54,7 +56,7 @@ A criação e **declaração** de uma variável tem a seguinte sintaxe **[palavr 1. **Altere o valor da variável**. Altere o valor da variável da seguinte maneira: ```javascript - minhaVariável = 321; + minhaVariavel = 321; ``` Uma vez que uma variável é declarada, você pode alterar seu valor em qualquer ponto do seu código com o operador `=` e o novo valor. @@ -184,11 +186,11 @@ Os booleanos podem ter apenas dois valores: `true` ou` false`. Os booleanos pode JavaScript é notório por suas maneiras surpreendentes de lidar com tipos de dados ocasionalmente. Pesquise sobre essas 'pegadinhas'. Por exemplo: a diferenciação de maiúsculas e minúsculas pode afetar! Tente isto em seu console: `let age = 1; deixe Idade = 2; age == Age` (resolve `false` - por quê?). Que outras dicas você pode encontrar? ## Quiz Pós-Aula -[Quiz Pós-Aula](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/8) +[Quiz Pós-Aula](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/8) ## Revisão e autoestudo -Dê uma olhada [nessa lista de exercícios de JavaScript](https://css-tricks.com/snippets/javascript/) e tente um. O que você aprendeu? +Dê uma olhada [nessa lista de exercícios de JavaScript](https://css-tricks.com/snippets/javascript/) e tente resolver um exercício. O que você aprendeu? ## Tarefa 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..1cbd07c4 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 @@ -4,11 +4,13 @@ > 涂鸦笔记作者：[Tomomi Imura](https://twitter.com/girlie_mac) ## 课前小测 -[课前小测](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/7?loc=zh_cn) +[课前小测](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/7?loc=zh_cn) 这节课将会介绍 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") 让我们从它最基础的组成部分 —— “变量”和“数据类型”学起吧！ @@ -184,7 +186,7 @@ let myString2 = "World"; JavaScript 偶尔会因为其对于数据类型令人意外的处理方式而被人诟病。你可以对这些“陷阱”做一点调查，比如大小写敏感性带来的问题，在控制台中试试 `let age = 1; let Age = 2; age == Age`（结果是 `false`，为什么？）。你还能找到哪些陷阱？ ## 课后小测 -[课后小测](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/8?loc=zh_cn) +[课后小测](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/8?loc=zh_cn) ## 复习 & 自学 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..e61f0f53 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 @@ -4,12 +4,14 @@ > 由 [Tomomi Imura](https://twitter.com/girlie_mac) 繪製 ## 課前測驗 -[課前測驗](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/7?loc=zh_tw) +[課前測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/7?loc=zh_tw) 這堂課會講述 Javascript 的基礎 ── 一款建立互動性網頁的程式語言。 [![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) @@ -177,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)。 --- @@ -186,7 +188,7 @@ let myString2 = "World"; JavaScript 在處理資料結構時有許多種方法，有些場合為人詬病。在這方面做一些調查，例如：大小寫敏感性的問題！在命令欄中輸入看看： `let age = 1; let Age = 2; age == Age`，輸出結果是 `false`，為什麼? 你能找到其他問題嗎? ## 課後測驗 -[課後測驗](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/8?loc=zh_tw) +[課後測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/8?loc=zh_tw) ## 複習與自學 diff --git a/2-js-basics/2-functions-methods/README.md b/2-js-basics/2-functions-methods/README.md index 7ff6ae45..0fd1ff5c 100644 --- a/2-js-basics/2-functions-methods/README.md +++ b/2-js-basics/2-functions-methods/README.md @@ -1,10 +1,10 @@ # JavaScript Basics: Methods and Functions -![JavaScript Basics - Functions](/sketchnotes/webdev101-js-functions.png) +![JavaScript Basics - Functions](../../sketchnotes/webdev101-js-functions.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## Pre-Lecture Quiz -[Pre-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/9) +[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9) When we think about writing code, we always want to ensure our code is readable. While this sounds counterintuitive, code is read many more times than it's written. One core tool in a developer's toolbox to ensure maintainable code is the **function**. @@ -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 @@ -185,7 +185,7 @@ You've now seen we have three ways to pass a function as a parameter and might b Can you articulate in one sentence the difference between functions and methods? Give it a try! ## Post-Lecture Quiz -[Post-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/10) +[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10) ## Review & Self Study diff --git a/2-js-basics/2-functions-methods/translations/README.de.md b/2-js-basics/2-functions-methods/translations/README.de.md index ff15e367..586a6a31 100644 --- a/2-js-basics/2-functions-methods/translations/README.de.md +++ b/2-js-basics/2-functions-methods/translations/README.de.md @@ -2,7 +2,7 @@ [![Methoden und Funktionen](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "Methoden und Funktionen") -## [Pre-Lecture Quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/9) +## [Pre-Lecture Quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9) Wenn wir darüber nachdenken, Code zu schreiben, möchten wir immer sicherstellen, dass unser Code lesbar ist. Während dies nicht intuitiv klingt, wird Code viel öfter gelesen als geschrieben. Ein Kernwerkzeug in der Toolbox eines Entwicklers, um wartbaren Code sicherzustellen, ist die **Funktion**. @@ -184,7 +184,7 @@ Sie haben jetzt gesehen, dass wir drei Möglichkeiten haben, eine Funktion als P Können Sie den Unterschied zwischen Funktionen und Methoden in einem Satz artikulieren? Versuche es! -## [Quiz nach der Vorlesung](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/10) +## [Quiz nach der Vorlesung](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10) ## Review & Selbststudium 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..77e5248e 100644 --- a/2-js-basics/2-functions-methods/translations/README.es.md +++ b/2-js-basics/2-functions-methods/translations/README.es.md @@ -4,9 +4,9 @@ # 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) +## [Pre-lectura prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9) Cuando necesite su código para realizar una tarea, utilizará un función o una función. Analicemos las diferencias. @@ -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. @@ -179,11 +179,11 @@ Cualquier parámetro con valores predeterminados debe estar al final de la lista 🚀 Desafío: -## [Post-lecture prueba](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/10) +## [Post-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10) ## 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.fr.md b/2-js-basics/2-functions-methods/translations/README.fr.md index 786d66dd..07216cd2 100644 --- a/2-js-basics/2-functions-methods/translations/README.fr.md +++ b/2-js-basics/2-functions-methods/translations/README.fr.md @@ -4,7 +4,7 @@ > Sketchnote par [Tomomi Imura](https://twitter.com/girlie_mac) ## Quiz préalable -[Quiz préalable](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/9?loc=fr) +[Quiz préalable](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9?loc=fr) Lorsque nous pensons à écrire du code, nous voulons toujours nous assurer que notre code est lisible. Bien que cela puisse paraître contre-intuitif, le code est lu bien plus souvent qu'il n'est écrit. Un outil essentiel dans la boîte à outils d'un développeur pour garantir un code maintenable est la **fonction**. @@ -12,7 +12,7 @@ Lorsque nous pensons à écrire du code, nous voulons toujours nous assurer que > 🎥 Cliquez sur l'image ci-dessus pour voir une vidéo sur les méthodes et les fonctions. -> Vous pouvez suivre cette leçon sur [Microsoft Learn](https://docs.microsoft.com/fr-fr/learn/modules/web-development-101-functions/?WT.mc_id=academic-13441-cxa)! +> Vous pouvez suivre cette leçon sur [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-13441-cxa)! ## Fonctions @@ -185,7 +185,7 @@ Vous avez maintenant vu que nous avons trois façons de passer une fonction en p Pouvez-vous expliquer en une phrase la différence entre les fonctions et les méthodes ? Essayez de le faire ! ## Quiz de validation des connaissances -[Quiz de validation des connaissances](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/10?loc=fr) +[Quiz de validation des connaissances](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10?loc=fr) ## Révision et étude personnelle 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..568a85b6 100644 --- a/2-js-basics/2-functions-methods/translations/README.hi.md +++ b/2-js-basics/2-functions-methods/translations/README.hi.md @@ -4,7 +4,7 @@ > [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा स्केचनेट ## पूर्व व्याख्यान प्रश्नोत्तरी -[पूर्व व्याख्यान प्रश्नोत्तरी](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/9?loc=hi) +[पूर्व व्याख्यान प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9?loc=hi) जब हम कोड लिखने के बारे में सोचते हैं, तो हम हमेशा यह सुनिश्चित करना चाहते हैं कि हमारा कोड पढ़ने योग्य हो। हालांकि यह काउंटरटाइनेटिव लगता है, लेकिन कोड को लिखे जाने की तुलना में कई गुना अधिक पढ़ा जाता है। एक डेवलपर टूलबॉक्स में एक कोर टूल, जिसमें यह सुनिश्चित करने के लिए कि कोड योग्य है **फ़ंक्शन** है। @@ -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 सेकंड में** समाप्त हो गया है। @@ -184,11 +184,11 @@ setTimeout(() => { क्या आप एक वाक्य में कार्यों और विधियों के बीच के अंतर को स्पष्ट कर सकते हैं? कोशिश तो करो! ## व्याख्यान उपरांत प्रश्नोत्तरी -[पूर्व व्याख्यान प्रश्नोत्तरी](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/10?loc=hi) +[पूर्व व्याख्यान प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10?loc=hi) ## समीक्षा और स्व अध्ययन -यह लायक है [एरो फ़ंक्शंस पर थोड़ा और पढ़ना](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.id.md b/2-js-basics/2-functions-methods/translations/README.id.md index 9eda08fc..79c10f4f 100644 --- a/2-js-basics/2-functions-methods/translations/README.id.md +++ b/2-js-basics/2-functions-methods/translations/README.id.md @@ -6,7 +6,7 @@ ## Kuis Pra-Kuliah -[Kuis pra-Kuliah](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/9?loc=id) +[Kuis pra-Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9?loc=id) Ketika kita berpikir tentang menulis kode, kita selalu ingin memastikan kode kita dapat dibaca. Meskipun ini terdengar berlawanan dengan intuisi, kode dibaca lebih banyak kali daripada yang tertulis. Salah satu alat inti dalam kotak alat pengembang untuk memastikan kode yang dapat dipelihara adalah **function (fungsi)**. @@ -183,7 +183,7 @@ Bisakah Anda mengartikulasikan dalam satu kalimat perbedaan antara fungsi dan me ## Kuis Pasca-Kuliah -[Kuis pasca-kuliah](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/10?loc=id) +[Kuis pasca-kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10?loc=id) ## Review & Belajar Mandiri diff --git a/2-js-basics/2-functions-methods/translations/README.it.md b/2-js-basics/2-functions-methods/translations/README.it.md index ecc523eb..71c0f896 100644 --- a/2-js-basics/2-functions-methods/translations/README.it.md +++ b/2-js-basics/2-functions-methods/translations/README.it.md @@ -5,7 +5,7 @@ ## Quiz pre-lezione -[Quiz Pre-Lezione](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/9?loc=it) +[Quiz Pre-Lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9?loc=it) Quando si pensa di scrivere codice, ci si vuole sempre assicurare che il proprio codice sia leggibile. Anche se questo sembra controintuitivo, il codice viene letto molte più volte di quanto non venga scritto. Uno strumento base nella cassetta degli attrezzi dello sviluppatore è la **funzione** @@ -184,7 +184,7 @@ Si riesce ad articolare in una frase la differenza tra funzioni e metodi? Fare u ## Quiz post-lezione -[Quiz post-lezione](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/10?loc=it) +[Quiz post-lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10?loc=it) ## Revisione e auto apprendimento diff --git a/2-js-basics/2-functions-methods/translations/README.ja.md b/2-js-basics/2-functions-methods/translations/README.ja.md index 19e3fa12..c3d895dc 100644 --- a/2-js-basics/2-functions-methods/translations/README.ja.md +++ b/2-js-basics/2-functions-methods/translations/README.ja.md @@ -4,7 +4,7 @@ > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## レッスン前の小テスト -[レッスン前の小テスト](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/9?loc=ja) +[レッスン前の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9?loc=ja) コードを書くことを考えるとき、私たちは常にコードが読みやすいようにしたいと考えています。直感的ではないように聞こえるかもしれませんが、コードは書かれた回数よりも何度も読まれます。コードを確実にメンテナンスできるようにするための開発者のツールボックスの中心的なツールの一つが **関数** です。 @@ -181,7 +181,7 @@ setTimeout(() => { 関数とメソッドの違いを一文で表現できますか？試してみてください。 ## レッスン後の小テスト -[レッスン後の小テスト](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/10?loc=ja) +[レッスン後の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10?loc=ja) ## 復習と自己学習 diff --git a/2-js-basics/2-functions-methods/translations/README.ko.md b/2-js-basics/2-functions-methods/translations/README.ko.md index e5f61330..53387ce7 100644 --- a/2-js-basics/2-functions-methods/translations/README.ko.md +++ b/2-js-basics/2-functions-methods/translations/README.ko.md @@ -4,7 +4,7 @@ > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## 강의 전 퀴즈 -[Pre-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/9?loc=ko) +[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9?loc=ko) 코드 작성에 대해 생각할 때 항상 코드를 읽을 수 있도록 해야합니다. 직설적이지 않지만, 코드는 작성된 것보다 더 많이 읽힙니다. 개발자의 툴 박스에서 유지관리 가능한 코드를 보장하는 핵심 도구는 **함수**입니다. @@ -181,7 +181,7 @@ setTimeout(3000, () => { 함수와 메소드의 차이점을 한 문장으로 표현할 수 있나요? 시도해보세요! ## 강의 후 퀴즈 -[Post-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/10?loc=ko) +[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10?loc=ko) ## 리뷰 & 자기주도 학습 diff --git a/2-js-basics/2-functions-methods/translations/README.ms.md b/2-js-basics/2-functions-methods/translations/README.ms.md index 3d1553be..5258fcbb 100644 --- a/2-js-basics/2-functions-methods/translations/README.ms.md +++ b/2-js-basics/2-functions-methods/translations/README.ms.md @@ -4,7 +4,7 @@ > Sketchnote karya [Tomomi Imura](https://twitter.com/girlie_mac) ## Kuiz Pra Kuliah -[Kuiz Pra Kuliah](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/9) +[Kuiz Pra Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9) Apabila kita berfikir tentang menulis kod, kita selalu ingin memastikan kod kita dapat dibaca. Walaupun ini terdengar berlawanan dengan intuisi, kod dibaca lebih banyak kali daripada yang ditulis. Satu alat inti dalam kotak alat pemaju untuk memastikan kod yang dapat dikendalikan adalah **fungsi**. @@ -184,7 +184,7 @@ Anda sekarang telah melihat kita mempunyai tiga cara untuk meneruskan fungsi seb Bolehkah anda menyatakan dalam satu ayat perbezaan antara fungsi dan kaedah? Mencubanya! ## Kuiz Pasca Kuliah -[Kuiz Pasca Kuliah](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/10) +[Kuiz Pasca Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10) ## Mengkaji & Belajar Sendiri 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..ee9602fa 100644 --- a/2-js-basics/2-functions-methods/translations/README.pt.md +++ b/2-js-basics/2-functions-methods/translations/README.pt.md @@ -4,11 +4,11 @@ > Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac) ## Quiz Pré-Aula -[Quiz Pré-Aula](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/9) +[Quiz Pré-Aula](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9) 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. @@ -184,7 +184,7 @@ Agora você viu que temos três maneiras de passar uma função como parâmetro Você pode articular em uma frase a diferença entre funções e métodos? Tente! ## Quiz Pós-Aula -[Quiz Pós-Aula](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/10) +[Quiz Pós-Aula](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10) ## Revisão e autoestudo diff --git a/2-js-basics/2-functions-methods/translations/README.zh-cn.md b/2-js-basics/2-functions-methods/translations/README.zh-cn.md index 143f28b5..1e94b2cb 100644 --- a/2-js-basics/2-functions-methods/translations/README.zh-cn.md +++ b/2-js-basics/2-functions-methods/translations/README.zh-cn.md @@ -4,7 +4,7 @@ > 涂鸦笔记作者：[Tomomi Imura](https://twitter.com/girlie_mac) ## 课前小测 -[课前小测](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/9?loc=zh_cn) +[课前小测](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9?loc=zh_cn) 当我们思考如何去写代码的时候，我们总是希望确保自己的代码是可读的。尽管听起来有些违反直觉，代码被阅读的次数会远多于它被写下的次数。**函数（function）** 正是开发者的工具箱里用于确保代码可维护的一件利器。 @@ -163,7 +163,7 @@ setTimeout(function() { ### 箭头函数（Fat arrow functions） -在很多编程语言（包括 JavaScript）中都有一种称为**箭头**（arrow / fat arrow）函数的快捷写法。它会用到一个特殊的 `=>` 标志，看起来就像一个箭头 —— 它的名字就是这么来的！使用 `=>`，我们就可以跳过 `keyword` 关键字。 +在很多编程语言（包括 JavaScript）中都有一种称为**箭头**（arrow / fat arrow）函数的快捷写法。它会用到一个特殊的 `=>` 标志，看起来就像一个箭头 —— 它的名字就是这么来的！使用 `=>`，我们就可以跳过 `function` 关键字。 让我们用箭头函数再一次重写上面的代码： @@ -184,7 +184,7 @@ setTimeout(() => { 你能用一句话清楚说明函数和方法的区别吗？试一试！ ## 课后小测 -[课后小测](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/10?loc=zh_cn) +[课后小测](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10?loc=zh_cn) ## 复习 & 自学 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..2100a9e9 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 @@ -4,7 +4,7 @@ > 由 [Tomomi Imura](https://twitter.com/girlie_mac) 繪製 ## 課前測驗 -[課前測驗](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/9?loc=zh_tw) +[課前測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9?loc=zh_tw) 撰寫程式碼時，我們必須確保程式碼的閱讀性。聽來不太直覺，理解程式碼的時間遠比撰寫時間來的久。裡面最需要被管理的程式項目就是**函式**。 @@ -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)，它會啟動計時機制，並在倒數完後執行下一個程式。我們需要告訴函式哪一個函式要在時間到後執行，一個完美的例子！ 執行下方的程式，三秒鐘之後你會看到訊息**已經過三秒鐘**。 @@ -184,11 +184,11 @@ setTimeout(() => { 你能用一句話清楚地說明這些函式與方法的差別嗎? 試試看吧！ ## 課後測驗 -[課後測驗](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/10?loc=zh_tw) +[課後測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10?loc=zh_tw) ## 複習與自學 -這很值得去閱讀[關於箭頭函式的資料](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 e4ac8d3c..5dfc3fe4 100644 --- a/2-js-basics/3-making-decisions/README.md +++ b/2-js-basics/3-making-decisions/README.md @@ -1,10 +1,10 @@ # JavaScript Basics: Making Decisions -![JavaScript Basics - Making decisions](/sketchnotes/webdev101-js-decisions.png) +![JavaScript Basics - Making decisions](../../sketchnotes/webdev101-js-decisions.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## Pre-Lecture Quiz -[Pre-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/11) +[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/11) Making decisions and controlling the order in which your code runs makes your code reusable and robust. This section covers the syntax for controlling data flow in JavaScript and its significance when used with Boolean data types @@ -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. @@ -61,7 +61,7 @@ if (currentMoney >= laptopPrice){ } ``` -## IF..Else Statement +## If..Else Statement The `else` statement will run the code in between its blocks when the condition is false. It's optional with an `if` statement. @@ -164,7 +164,7 @@ Create a program that is written first with logical operators, and then rewrite --- ## Post-Lecture Quiz -[Post-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/12) +[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/12) ## Review & Self Study diff --git a/2-js-basics/3-making-decisions/translations/README.de.md b/2-js-basics/3-making-decisions/translations/README.de.md index bb5b9dba..b3d8188f 100644 --- a/2-js-basics/3-making-decisions/translations/README.de.md +++ b/2-js-basics/3-making-decisions/translations/README.de.md @@ -2,7 +2,7 @@ [![Entscheidungen treffen](https://img.youtube.com/vi/SxTp8j-fMMY/0.jpg)](https://youtube.com/watch?v=SxTp8j-fMMY "Entscheidungen treffen") -## [Pre-Lecture Quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/11) +## [Pre-Lecture Quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/11) Wenn Sie Entscheidungen treffen und die Reihenfolge steuern, in der Ihr Code ausgeführt wird, ist Ihr Code wiederverwendbar und robust. Dieser Abschnitt behandelt die Syntax zur Steuerung des Datenflusses in JavaScript und ihre Bedeutung bei Verwendung mit booleschen Datentypen. @@ -158,7 +158,7 @@ if (firstNumber > secondNumber) { Erstellen Sie ein Programm, das zuerst mit logischen Operatoren geschrieben wird, und schreiben Sie es dann mit einem ternären Ausdruck neu. Was ist Ihre bevorzugte Syntax? -## [Quiz nach der Vorlesung](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/12) +## [Quiz nach der Vorlesung](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/12) ## Review & Selbststudium 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..0f6a732d 100644 --- a/2-js-basics/3-making-decisions/translations/README.es.md +++ b/2-js-basics/3-making-decisions/translations/README.es.md @@ -4,10 +4,12 @@ ![JavaScript Basics - Making decisions](/sketchnotes/webdev101-js-decisions.png) > Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac) -## [Pre-lecture prueba](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/11) +## [Pre-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/11) 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. @@ -156,7 +158,7 @@ if (firstNumber > secondNumber) { 🚀 Desafío: cree un programa que se escriba primero con operadores lógicos y luego vuelva a escribirlo utilizando una expresión ternaria. ¿Cuál es tu sintaxis preferida? -## [Post-lecture prueba](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/12) +## [Post-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/12) ## Revisión y autoestudio diff --git a/2-js-basics/3-making-decisions/translations/README.fr.md b/2-js-basics/3-making-decisions/translations/README.fr.md new file mode 100644 index 00000000..bd42372b --- /dev/null +++ b/2-js-basics/3-making-decisions/translations/README.fr.md @@ -0,0 +1,177 @@ +# Principes de base de JavaScript : Prendre des décisions + +![Principes de base de JavaScript : Prendre des décisions](/sketchnotes/webdev101-js-decisions.png) +> Sketchnote par [Tomomi Imura](https://twitter.com/girlie_mac) + +## Quiz préalable +[Quiz préalable](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/11?loc=fr) + +Prendre des décisions et contrôler l'ordre dans lequel votre code s'exécute rend votre code réutilisable et robuste. Cette section couvre la syntaxe pour contrôler le flux de données dans JavaScript et sa signification lorsqu'elle est utilisée avec des types de données booléens + +[![Prendre des décisions](https://img.youtube.com/vi/SxTp8j-fMMY/0.jpg)](https://youtube.com/watch?v=SxTp8j-fMMY "Prendre des décisions") + +> 🎥 Cliquez sur l'image ci-dessus pour une vidéo sur la prise de décisions. + +> Vous pouvez suivre cette leçon sur [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-13441-cxa)! +## Un bref récapitulatif sur les booléens + +Les booléens ne peuvent avoir que deux valeurs : `true` ou `false`. Les booléens aident à prendre des décisions sur les lignes de code à exécuter lorsque certaines conditions sont remplies. + +Définissez votre booléen sur vrai ou faux comme ceci : + +`let myTrueBool = true` +`let myFalseBool = false` + +✅ Les booléens tirent leur nom du mathématicien, philosophe et logicien anglais George Boole (1815-1864). + +## Opérateurs de comparaison et booléens + +Les opérateurs sont utilisés pour évaluer les conditions en effectuant des comparaisons qui créeront une valeur booléenne. Voici une liste d'opérateurs fréquemment utilisés. + +| Symbole | Description | Exemple | +| ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | +| `<` | **Inférieur à**: Compare deux valeurs et renvoie le type de données booléen `true` si la valeur à gauche est inférieure à la valeur à droite | `5 < 6 // true` | +| `<=` | **Inférieur ou égal à**: Compare deux valeurs et renvoie le type de données booléen `true` si la valeur à gauche est inférieure ou égale à celle de droite | `5 <= 6 // true` | +| `>` | **Supérieur à**: Compare deux valeurs et renvoie le type de données booléen `true` si la valeur sur le côté gauche est plus grande que sur la droite | `5 > 6 // false` | +| `>=` | **Supérieur ou égal à**: Compare deux valeurs et renvoie le type de données booléen `true` si la valeur à gauche est supérieure ou égale à celle de droite | `5 >= 6 // false` | +| `===` | **Égalité stricte**: Compare deux valeurs et renvoie le type de données booléen `true` si les valeurs à droite et à gauche sont égales ET sont du même type de données. | `5 === 6 // false` | +| `!==` | **Inégalité**: Compare deux valeurs et renvoie la valeur booléenne opposée à ce qu'un opérateur d'égalité stricte retournerait | `5 !== 6 // true` | + +✅ Vérifiez vos connaissances en écrivant quelques comparaisons dans la console de votre navigateur. Les données renvoyées vous surprennent-elles ? + +## L'instruction If + +L'instruction if exécutera le code entre ses blocs si la condition est vraie. + +```javascript +if (condition){ + //La condition était vraie. Le code de ce bloc s'exécutera. +} +``` + +Les opérateurs logiques sont souvent utilisés pour former la condition. + +```javascript +let currentMoney; +let laptopPrice; + +if (currentMoney >= laptopPrice){ + //La condition était vraie. Le code de ce bloc s'exécutera. + console.log("Getting a new laptop!"); +} +``` + +## L'instruction If..Else + +L'instruction `else` exécutera le code entre ses blocs lorsque la condition est fausse. C'est facultatif avec une instruction `if`. + +```javascript +let currentMoney; +let laptopPrice; + +if (currentMoney >= laptopPrice){ + //La condition était vraie. Le code de ce bloc s'exécutera. + console.log("Getting a new laptop!"); +} +else{ + //La condition était vraie. Le code de ce bloc s'exécutera. + console.log("Can't afford a new laptop, yet!"); +} +``` + +✅ Testez votre compréhension de ce code et du code suivant en l'exécutant dans une console de navigateur. Modifiez les valeurs des variables currentMoney et laptopPrice pour modifier le `console.log()` renvoyé. + +## Opérateurs logiques et booléens + +Les décisions peuvent nécessiter plusieurs comparaisons et peuvent être associées à des opérateurs logiques pour produire une valeur booléenne. + +| Symbole | Description | Exemple | +| ------ | ----------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | +| `&&` | **ET logique** : compare deux expressions booléennes. Renvoie vrai **uniquement** si les deux côtés sont vrais | `(5 > 6) && (5 < 6 ) //Un côté est faux, l'autre est vrai. Renvoie false` | +| `\|\|` | **OU logique** : compare deux expressions booléennes. Renvoie vrai si au moins un côté est vrai | `(5 > 6) \|\| (5 < 6) //Un côté est faux, l'autre est vrai. Renvoie vrai` | +| `!` | **NON logique** : renvoie la valeur opposée d'une expression booléenne | `!(5 > 6) // 5 n'est pas supérieur à 6, mais "!" retournera vrai` | + +## Conditions et décisions avec opérateurs logiques + +Les opérateurs logiques peuvent être utilisés pour former des conditions dans les instructions if..else. + +```javascript +let currentMoney; +let laptopPrice; +let laptopDiscountPrice = laptopPrice - (laptopPrice * .20) //Prix ​​de l'ordinateur portable à 20 pour cent de réduction + +if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice){ + //La condition était vraie. Le code de ce bloc s'exécutera. + console.log("Getting a new laptop!"); +} +else { + //La condition était vraie. Le code de ce bloc s'exécutera. + console.log("Can't afford a new laptop, yet!"); +} +``` + +### Opérateur de négation + +Vous avez vu jusqu'à présent comment vous pouvez utiliser une instruction `if...else` pour créer une logique conditionnelle. Tout ce qui est dans un `if` doit être évalué à vrai/faux. En utilisant l'opérateur `!` vous pouvez _négativiser_ l'expression. Cela ressemblerait à ceci : + +```javascript +if (!condition) { + // s'exécute si la condition est fausse +} else { + // s'exécute si la condition est vraie +} +``` + +### Expressions ternaires + +`if...else` n'est pas la seule façon d'exprimer la logique de décision. Vous pouvez également utiliser ce qu'on appelle un opérateur ternaire. La syntaxe pour cela ressemble à ceci: + +```javascript +let variable = condition ? : +``` + +Ci-dessous, un exemple plus concret : + +```javascript +let firstNumber = 20; +let secondNumber = 10 +let biggestNumber = firstNumber > secondNumber ? firstNumber: secondNumber; +``` + +✅ Prenez une minute pour lire ce code plusieurs fois. Comprenez-vous comment fonctionnent ces opérateurs ? + +Le code précèdant indique que +- si `firstNumber` est plus grand que `secondNumber` +- alors attribuez `firstNumber` à `biggestNumber` +- sinon, attribuez `secondNumber`. + +L'expression ternaire n'est qu'une manière compacte d'écrire le code ci-dessous : + +```javascript +let biggestNumber; +if (firstNumber > secondNumber) { + biggestNumber = firstNumber; +} else { + biggestNumber = secondNumber; +} +``` + +--- + +## 🚀 Challenge + +Créez un programme écrit d'abord avec des opérateurs logiques, puis réécrivez-le à l'aide d'une expression ternaire. Quelle est votre syntaxe préférée ? + +--- +## Quiz de validation des connaissances +[Quiz de validation des connaissancesz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/12?loc=fr) + +## Révision et étude personnelle + +En savoir plus sur les nombreux opérateurs disponibles pour l'utilisateur [sur MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators). + +Parcourez le merveilleux [opérateur de recherche de Josh Comeau](https://joshwcomeau.com/operator-lookup/)! + +## Affectation + +[Les opérateurs](assignment.fr.md) diff --git a/2-js-basics/3-making-decisions/translations/README.hi.md b/2-js-basics/3-making-decisions/translations/README.hi.md index 21c0c16b..cc47a652 100644 --- a/2-js-basics/3-making-decisions/translations/README.hi.md +++ b/2-js-basics/3-making-decisions/translations/README.hi.md @@ -4,7 +4,7 @@ > [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा स्केचनेट ## पूर्व व्याख्यान प्रश्नोत्तरी -[पूर्व व्याख्यान प्रश्नोत्तरी](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/11?loc=hi) +[पूर्व व्याख्यान प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/11?loc=hi) निर्णय लेना और उस आदेश को नियंत्रित करना जिसमें आपका कोड चलता है, आपके कोड को पुन: प्रयोज्य और मजबूत बनाता है। यह खंड बूलियन डेटा प्रकारों के साथ उपयोग किए जाने पर जावास्क्रिप्ट में डेटा प्रवाह को नियंत्रित करने और इसके महत्व के लिए सिंटैक्स को कवर करता है @@ -161,7 +161,7 @@ if (firstNumber > secondNumber) { --- ## व्याख्यान उपरांत प्रश्नोत्तरी -[व्याख्यान उपरांत प्रश्नोत्तरी](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/12?loc=hi) +[व्याख्यान उपरांत प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/12?loc=hi) ## समीक्षा और स्व अध्ययन diff --git a/2-js-basics/3-making-decisions/translations/README.id.md b/2-js-basics/3-making-decisions/translations/README.id.md index 1a0fe1da..86e05873 100644 --- a/2-js-basics/3-making-decisions/translations/README.id.md +++ b/2-js-basics/3-making-decisions/translations/README.id.md @@ -6,7 +6,7 @@ ## Kuis Pra-Kuliah -[Kuis pra-Kuliah](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/11?loc=id) +[Kuis pra-Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/11?loc=id) Membuat keputusan dan mengontrol urutan kode Anda berjalan membuat kode Anda dapat digunakan kembali dan kuat. Bagian ini membahas sintaks untuk mengontrol aliran data di JavaScript dan signifikansinya saat digunakan dengan tipe data Boolean. @@ -162,7 +162,7 @@ Buat program yang ditulis pertama kali dengan operator logika, lalu tulis ulang ## Kuis Pasca-Kuliah -[Kuis pasca-kuliah](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/12?loc=id) +[Kuis pasca-kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/12?loc=id) ## Review & Belajar Mandiri diff --git a/2-js-basics/3-making-decisions/translations/README.it.md b/2-js-basics/3-making-decisions/translations/README.it.md index 63210f9a..e54cd665 100644 --- a/2-js-basics/3-making-decisions/translations/README.it.md +++ b/2-js-basics/3-making-decisions/translations/README.it.md @@ -4,7 +4,7 @@ > Sketchnote di [Tomomi Imura](https://twitter.com/girlie_mac) ## Quiz Pre-Lezione -[Quiz Pre-Lezione](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/11?loc=it) +[Quiz Pre-Lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/11?loc=it) Prendere decisioni e controllare l'ordine in cui il proprio codice viene eseguito lo rende riutilizzabile e robusto. Questa sezione descrive la sintassi per il controllo del flusso di dati in JavaScript e il suo significato quando viene utilizzato con tipi di dato Booleani @@ -162,7 +162,7 @@ Creare un programma che viene scritto prima con operatori logici, quindi riscriv --- ## Quiz Post-Lezione -[Quiz post-lezione](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/12?loc=it) +[Quiz post-lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/12?loc=it) ## Revisione e Auto Apprendimento diff --git a/2-js-basics/3-making-decisions/translations/README.ja.md b/2-js-basics/3-making-decisions/translations/README.ja.md index 603669ac..c278a5be 100644 --- a/2-js-basics/3-making-decisions/translations/README.ja.md +++ b/2-js-basics/3-making-decisions/translations/README.ja.md @@ -4,7 +4,7 @@ > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## レッスン前の小テスト -[レッスン前の小テスト](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/11?loc=ja) +[レッスン前の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/11?loc=ja) 意思決定を行い、コードの実行順序を制御することで、コードを再利用可能で堅牢なものにします。このセクションでは、JavaScript のデータフローを制御するための構文と、ブール値データ型で使用される場合の意味について説明します。 @@ -161,7 +161,7 @@ if (firstNumber > secondNumber) { ## レッスン後の小テスト -[レッスン後の小テスト](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/12?loc=ja) +[レッスン後の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/12?loc=ja) ## 復習と自己学習 diff --git a/2-js-basics/3-making-decisions/translations/README.ko.md b/2-js-basics/3-making-decisions/translations/README.ko.md index 0888a6b3..3122d283 100644 --- a/2-js-basics/3-making-decisions/translations/README.ko.md +++ b/2-js-basics/3-making-decisions/translations/README.ko.md @@ -4,7 +4,7 @@ > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## 강의 전 퀴즈 -[Pre-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/11?loc=ko) +[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/11?loc=ko) 결정을 내리고 코드가 실행되는 순서를 제어하면 코드를 재사용하며 강력하게 만들 수 있습니다. 이 강의에서는 JavaScript에서 데이터 흐름을 제어하기 위한 구문과 논리 자료형 데이터 타입을 함께 사용하는 중요성을 다룹니다. @@ -160,7 +160,7 @@ if (firstNumber > secondNumber) { 논리 연산자로 프로그램을 먼저 만든 뒤, 삼항 표현식을 사용하여 다시 작성하십시오. 어떤 구문을 선호합니까? ## 강의 후 퀴즈 -[Post-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/12?loc=ko) +[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/12?loc=ko) ## 리뷰 & 자기주도 학습 diff --git a/2-js-basics/3-making-decisions/translations/README.ms.md b/2-js-basics/3-making-decisions/translations/README.ms.md index 7390c020..d3d81c75 100644 --- a/2-js-basics/3-making-decisions/translations/README.ms.md +++ b/2-js-basics/3-making-decisions/translations/README.ms.md @@ -4,7 +4,7 @@ > Sketchnote karya [Tomomi Imura](https://twitter.com/girlie_mac) ## Kuiz Pra Kuliah -[Kuiz Pra Kuliah](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/11) +[Kuiz Pra Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/11) Membuat keputusan dan mengawal urutan kod anda berjalan menjadikan kod anda boleh digunakan semula dan kukuh. Bahagian ini merangkumi sintaks untuk mengawal aliran data dalam JavaScript dan kepentingannya apabila digunakan dengan jenis data Boolean @@ -162,7 +162,7 @@ Buat program yang ditulis terlebih dahulu dengan operator logik, dan kemudian tu --- ## Kuiz Pasca Kuliah -[Kuiz Pasca Kuliah](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/12) +[Kuiz Pasca Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/12) ## Mengkaji & Belajar Sendiri 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..702c7bdd 100644 --- a/2-js-basics/3-making-decisions/translations/README.pt.md +++ b/2-js-basics/3-making-decisions/translations/README.pt.md @@ -3,15 +3,16 @@ > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## Quiz Pré-Aula -[Quiz Pré-Aula](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/11) +[Quiz Pré-Aula](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/11) 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. @@ -163,7 +164,7 @@ Crie um programa que seja escrito primeiro com operadores lógicos e, em seguida --- ## Quiz Pós-Aula -[Quiz Pós Aula](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/12) +[Quiz Pós Aula](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/12) ## Revisão e autoestudo diff --git a/2-js-basics/3-making-decisions/translations/README.zh-cn.md b/2-js-basics/3-making-decisions/translations/README.zh-cn.md index 4ba46aab..b7b66f29 100644 --- a/2-js-basics/3-making-decisions/translations/README.zh-cn.md +++ b/2-js-basics/3-making-decisions/translations/README.zh-cn.md @@ -4,7 +4,7 @@ > 涂鸦笔记作者：[Tomomi Imura](https://twitter.com/girlie_mac) ## 课前小测 -[课前小测](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/11?loc=zh_cn) +[课前小测](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/11?loc=zh_cn) 对你的代码运行方式做出决定并且控制它们的顺序可以让你的代码更加可复用和稳定。这节课会介绍 JavaScript 中控制数据流的语法以及其与布尔数据类型搭配使用时的重要性。 @@ -62,7 +62,7 @@ if (currentMoney >= laptopPrice){ ## If..Else 语句 -`else` 语句会在条件为假的情况下运行它块中的代码。它后面可以跟上一个 `if` 语句。 +`else` 语句会在条件为假的情况下运行它块中的代码。它可以跟在一个 `if` 语句后面。 ```javascript let currentMoney; @@ -164,7 +164,7 @@ if (firstNumber > secondNumber) { --- ## 课后小测 -[Post-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/12?loc=zh_cn) +[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/12?loc=zh_cn) ## 复习 & 自学 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..4023b7ae 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 @@ -4,7 +4,7 @@ > 由 [Tomomi Imura](https://twitter.com/girlie_mac) 繪製 ## 課前測驗 -[課前測驗](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/11?loc=zh_tw) +[課前測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/11?loc=zh_tw) 為程式碼做決定與控制順序以提高其重複利用性與豐富性。這堂課程提供 JavaScript 的資料流控制語法與布林資料型的重點。 @@ -163,11 +163,11 @@ if (firstNumber > secondNumber) { --- ## 課後測驗 -[課後測驗](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/12?loc=zh_tw) +[課後測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/12?loc=zh_tw) ## 複習與自學 -閱讀更多可被使用的運算子：[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 35f314f9..5a9c95db 100644 --- a/2-js-basics/4-arrays-loops/README.md +++ b/2-js-basics/4-arrays-loops/README.md @@ -1,18 +1,21 @@ # JavaScript Basics: Arrays and Loops -![JavaScript Basics - Arrays](/sketchnotes/webdev101-js-arrays.png) +![JavaScript Basics - Arrays](../../sketchnotes/webdev101-js-arrays.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## Pre-Lecture Quiz -[Pre-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/13) +[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/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. -> 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)! +> 🎥 Click the images above for videos about arrays and loops. + +> 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 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. @@ -70,9 +73,9 @@ Loops allow for repetitive or **iterative** tasks, and can save a lot of time an ### For Loop The `for` loop requires 3 parts to iterate: - - `counter` A variable that is typically initialized with a number that counts the number of iterations. - - `condition` Expression that uses comparison operators to cause the loop to stop when `true` - - `iteration-expression` Runs at the end of each iteration, typically used to change the counter value +- `counter` A variable that is typically initialized with a number that counts the number of iterations +- `condition` Expression that uses comparison operators to cause the loop to stop when `false` +- `iteration-expression` Runs at the end of each iteration, typically used to change the counter value ```javascript // Counting up to 10 @@ -85,7 +88,7 @@ for (let i = 0; i < 10; i++) { ### While loop -Unlike the syntax for the `for` loop, `while` loops only require a condition that will stop the loop when `true`. Conditions in loops usually rely on other values like counters, and must be managed during the loop. Starting values for counters must be created outside the loop, and any expressions to meet a condition, including changing the counter must be maintained inside the loop. +Unlike the syntax for the `for` loop, `while` loops only require a condition that will stop the loop when `false`. Conditions in loops usually rely on other values like counters, and must be managed during the loop. Starting values for counters must be created outside the loop, and any expressions to meet a condition, including changing the counter must be maintained inside the loop. ```javascript //Counting up to 10 @@ -119,7 +122,7 @@ for (let i = 0; i < iceCreamFlavors.length; i++) { There are other ways of looping over arrays other than for and while loops. There are [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), and [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Rewrite your array loop using one of these techniques. ## Post-Lecture Quiz -[Post-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/14) +[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/14) ## Review & Self Study diff --git a/2-js-basics/4-arrays-loops/translations/README.de.md b/2-js-basics/4-arrays-loops/translations/README.de.md index c8f12f61..a9cf28e4 100644 --- a/2-js-basics/4-arrays-loops/translations/README.de.md +++ b/2-js-basics/4-arrays-loops/translations/README.de.md @@ -5,7 +5,7 @@ [![Loops](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "Loops") -## [Pre-Lecture Quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/13) +## [Pre-Lecture Quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/13) Diese Lektion behandelt die Grundlagen von JavaScript, der Sprache, die Interaktivität im Web bietet. In dieser Lektion lernen Sie Arrays und Loops kennen, mit denen Daten bearbeitet werden. @@ -118,7 +118,7 @@ for (let i = 0; i < iceCreamFlavors.length; i++) { Es gibt andere Möglichkeiten, Arrays als for- und while-Schleifen zu durchlaufen. Es gibt [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) und [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Schreiben Sie Ihre Array-Schleife mit einer dieser Techniken neu. -## [Quiz nach der Vorlesung](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/14) +## [Quiz nach der Vorlesung](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/14) ## Review & Selbststudium 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..760b6650 100644 --- a/2-js-basics/4-arrays-loops/translations/README.es.md +++ b/2-js-basics/4-arrays-loops/translations/README.es.md @@ -4,11 +4,10 @@ > 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) +## [Pre-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/13) Esta lección cubre los conceptos básicos de JavaScript, el lenguaje que proporciona interactividad en la web. En esta lección, aprenderá sobre matrices y bucles, que se utilizan para manipular datos. @@ -114,7 +113,7 @@ for (let i = 0; i < iceCreamFlavors.length; i++) { 🚀 Desafío: Hay otras formas de realizar un bucle sobre arreglos además de los bucles for y while. Existen [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), y [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Vuelva a escribir su bucle de matriz utilizando una de estas técnicas. -## [Post-lecture prueba](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/14) +## [Post-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/14) ## Revisión y autoestudio diff --git a/2-js-basics/4-arrays-loops/translations/README.fr.md b/2-js-basics/4-arrays-loops/translations/README.fr.md new file mode 100644 index 00000000..64ee9484 --- /dev/null +++ b/2-js-basics/4-arrays-loops/translations/README.fr.md @@ -0,0 +1,131 @@ +# Principes de base de JavaScript : tableaux et boucles + +![Principes de base de JavaScript - Les tableaux](/sketchnotes/webdev101-js-arrays.png) +> Sketchnote par [Tomomi Imura](https://twitter.com/girlie_mac) + +## Quiz préalable +[Quiz préalable](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/13?loc=fr) + +Cette leçon couvre les bases de JavaScript, le langage qui offre de l'interactivité sur le Web. Dans cette leçon, vous découvrirez les tableaux et les boucles, qui sont utilisés pour manipuler des données. + +[![Les tableaux](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "Les tableaux") +[![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/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. + +✅ Les tableaux sont partout autour de nous ! Pouvez-vous penser à un exemple réel d'un tableau, tel qu'un tableau de panneaux solaires ? + +La syntaxe d'un tableau est une paire de crochets. + +```javascript +let myArray = []; +``` + +Il s'agit d'un tableau vide, mais les tableaux peuvent être déclarés déjà remplis de données. Plusieurs valeurs d'un tableau sont séparées par une virgule. + +```javascript +let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"]; +``` + +Les valeurs du tableau se voient attribuer une valeur unique appelée **index**, un nombre entier attribué en fonction de sa distance depuis le début du tableau. Dans l'exemple ci-dessus, la valeur de chaîne "Chocolate" a un index de 0 et l'index de "Rocky Road" est de 4. Utilisez l'index avec des crochets pour récupérer, modifier ou insérer des valeurs de tableau. + +✅ Cela vous surprend-il que les tableaux commencent à l'index zéro ? Dans certains langages de programmation, les index commencent à 1. Il y a une histoire intéressante à ce sujet, que vous pouvez [lire sur Wikipedia](https://en.wikipedia.org/wiki/Zero-based_numbering). + +```javascript +let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"]; +iceCreamFlavors[2]; //"Vanilla" +``` + +Vous pouvez utiliser l'index pour modifier une valeur, comme ceci : + +```javascript +iceCreamFlavors[4] = "Butter Pecan"; //Changement de "Rocky Road" par "Butter Pecan" +``` + +Et vous pouvez insérer une nouvelle valeur à un index donné comme ceci : + +```javascript +iceCreamFlavors[5] = "Cookie Dough"; //Ajout de "Cookie Dough" +``` + +✅ Un moyen plus courant de pousser des valeurs vers un tableau consiste à utiliser des opérateurs de tableau tels que array.push() + +Pour savoir combien d'éléments se trouvent dans un tableau, utilisez la propriété `length`. + +```javascript +let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"]; +iceCreamFlavors.length; //5 +``` + +✅ Essayez-le vous-même ! Utilisez la console de votre navigateur pour créer et manipuler un tableau de votre propre création. + +## Les boucles + +Les boucles permettent des tâches répétitives ou **itératives**, et peuvent économiser beaucoup de temps et de code. Chaque itération peut varier dans ses variables, valeurs et conditions. Il existe différents types de boucles en JavaScript, et elles ont de petites différences, mais font essentiellement la même chose : boucler sur des données. + +### La boucle For + +La boucle `for` nécessite 3 parties pour itérer : + - `un compteur` Une variable qui est généralement initialisée avec un nombre qui compte le nombre d'itérations. + - `une condition` Expression qui utilise des opérateurs de comparaison pour provoquer l'arrêt de la boucle lorsque `true` + - `une expression d'itération` S'exécute à la fin de chaque itération, généralement utilisé pour modifier la valeur du compteur + +```javascript +// Compter jusqu'à 10 +for (let i = 0; i < 10; i++) { + console.log(i); +} +``` + +✅ Exécutez ce code dans une console de navigateur. Que se passe-t-il lorsque vous apportez de petites modifications au compteur, à la condition ou à l'expression d'itération ? Pouvez-vous le faire fonctionner à l'envers, en créant un compte à rebours ? + +### La boucle While + +Contrairement à la syntaxe de la boucle `for`, les boucles `while` ne nécessitent qu'une condition qui arrête la boucle lorsqu'elle est `true` (vrai). Les conditions dans les boucles reposent généralement sur d'autres valeurs telles que les compteurs et doivent être gérées pendant la boucle. Les valeurs de départ des compteurs doivent être créées en dehors de la boucle, et toutes les expressions répondant à une condition, y compris la modification du compteur, doivent être conservées à l'intérieur de la boucle. + +```javascript +//Compter jusqu'à 10 +let i = 0; +while (i < 10) { + console.log(i); + i++; +} +``` + +✅ Pourquoi choisiriez-vous une boucle for par rapport à une boucle while? 17K téléspectateurs ont eu la même question sur StackOverflow, et certaines des opinions [pourraient être intéressantes pour vous](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript). + +## Les boucles et les tableaux + +Les tableaux sont souvent utilisés avec des boucles car la plupart des conditions nécessitent la longueur du tableau pour arrêter la boucle, et l'index peut également être la valeur du compteur. + +```javascript +let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"]; + +for (let i = 0; i < iceCreamFlavors.length; i++) { + console.log(iceCreamFlavors[i]); +} //Se termine lorsque toutes les saveurs sont imprimées +``` + +✅ Exercez vous avec une boucle sur un tableau créé par vos soins dans la console de votre navigateur. + +--- + +## 🚀 Défi + +Il existe d'autres façons d'itérer sur des tableaux autres que les boucles for et while. Il y a [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), et [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Réécrivez votre boucle de tableau en utilisant l'une de ces techniques. + +## Quiz de validation des connaissances +[Quiz de validation des connaissances](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/14?loc=fr) + + +## Révision et étude personnelle + +Les tableaux en JavaScript ont de nombreuses méthodes qui leur sont attachées, extrêmement utiles pour la manipulation de données. [Lisez ces méthodes](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) et essayez certaines d'entre elles (comme push, pop, slice et splice) sur un tableau de votre création. + +## Affectation + +[Boucler un tableau](assignment.fr.md) diff --git a/2-js-basics/4-arrays-loops/translations/README.hi.md b/2-js-basics/4-arrays-loops/translations/README.hi.md index 2315f252..8abd0280 100644 --- a/2-js-basics/4-arrays-loops/translations/README.hi.md +++ b/2-js-basics/4-arrays-loops/translations/README.hi.md @@ -4,7 +4,7 @@ > [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा स्केचनेट ## पूर्व व्याख्यान प्रश्नोत्तरी -[पूर्व व्याख्यान प्रश्नोत्तरी](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/13?loc=hi) +[पूर्व व्याख्यान प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/13?loc=hi) इस पाठ में जावास्क्रिप्ट की मूल बातें शामिल हैं, वह भाषा जो वेब पर अन्तरक्रियाशीलता प्रदान करती है। इस पाठ में, आप ऐरे और लूप्स के बारे में जानेंगे, जिनका उपयोग डेटा में हेरफेर करने के लिए किया जाता है। @@ -118,7 +118,7 @@ for (let i = 0; i < iceCreamFlavors.length; i++) { लूप के अलावा और अन्य अररेस पर लूपिंग के अन्य तरीके हैं। [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/Anray/map)। इन तकनीकों में से किसी एक का उपयोग करके अपने ऐरे लूप को फिर से लिखें। ## व्याख्यान उपरांत प्रश्नोत्तरी -[व्याख्यान उपरांत प्रश्नोत्तरी](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/14?loc=hi) +[व्याख्यान उपरांत प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/14?loc=hi) ## समीक्षा और स्व अध्ययन diff --git a/2-js-basics/4-arrays-loops/translations/README.id.md b/2-js-basics/4-arrays-loops/translations/README.id.md index 6fed3768..a6f95c1c 100644 --- a/2-js-basics/4-arrays-loops/translations/README.id.md +++ b/2-js-basics/4-arrays-loops/translations/README.id.md @@ -6,7 +6,7 @@ ## Kuis Pra-Kuliah -[Kuis pra-Kuliah](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/13?loc=id) +[Kuis pra-Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/13?loc=id) Pelajaran ini mencakup dasar-dasar JavaScript, bahasa yang menyediakan interaktivitas di web. Dalam pelajaran ini, Anda akan belajar tentang array dan loop, yang digunakan untuk memanipulasi data. @@ -137,7 +137,7 @@ Ada cara lain untuk melakukan perulangan pada array selain perulangan for dan wh ## Kuis Pasca-Kuliah -[Kuis pasca-kuliah](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/14?loc=id) +[Kuis pasca-kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/14?loc=id) ## Review & Belajar Mandiri diff --git a/2-js-basics/4-arrays-loops/translations/README.it.md b/2-js-basics/4-arrays-loops/translations/README.it.md index 7a2464bf..046c2066 100644 --- a/2-js-basics/4-arrays-loops/translations/README.it.md +++ b/2-js-basics/4-arrays-loops/translations/README.it.md @@ -4,7 +4,7 @@ > Sketchnote di [Tomomi Imura](https://twitter.com/girlie_mac) ## Quiz Pre-Lezione -[Quiz Pre-Lezione](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/13?loc=it) +[Quiz Pre-Lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/13?loc=it) Questa lezione tratta le basi di javascript, il linguaggio che fornisce interattività sul web. In questa lezione, si conosceranno gli array e i cicli, usati per manipolare i dati. @@ -121,7 +121,7 @@ for (let i = 0; i < iceCreamFlavors.length; i++) { Esistono altri modi per eseguire un ciclo sugli array. diversi dai cicli for e while. Ci sono [forEach](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Statements/for...of) e [map](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Riscrivere il ciclo sull'array usando una di queste tecniche. ## Quiz Post-Lezione -[Quiz Post-Lezione](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/14?loc=it) +[Quiz Post-Lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/14?loc=it) ## Revisione e Auto Apprendimento diff --git a/2-js-basics/4-arrays-loops/translations/README.ja.md b/2-js-basics/4-arrays-loops/translations/README.ja.md index f91f81b8..29389e84 100644 --- a/2-js-basics/4-arrays-loops/translations/README.ja.md +++ b/2-js-basics/4-arrays-loops/translations/README.ja.md @@ -4,7 +4,7 @@ > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## レッスン前の小テスト -[レッスン前の小テスト](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/13?loc=ja) +[レッスン前の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/13?loc=ja) このレッスンでは、Web 上でインタラクティブな機能を提供する言語である JavaScript の基礎を学びます。このレッスンでは、データを操作するために使用される配列とループについて学びます。 @@ -119,7 +119,7 @@ for (let i = 0; i < iceCreamFlavors.length; i++) { 配列をループする方法は for ループと while ループ以外にもあります。[forEach](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)、[for-of](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for...of)、[map](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map) があります。これらのテクニックのいずれかを使って、配列のループを書き換えてください。 ## レッスン後の小テスト -[レッスン後の小テスト](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/14?loc=ja) +[レッスン後の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/14?loc=ja) ## 復習と自己学習 diff --git a/2-js-basics/4-arrays-loops/translations/README.ko.md b/2-js-basics/4-arrays-loops/translations/README.ko.md index f4b727b6..bfd97bf9 100644 --- a/2-js-basics/4-arrays-loops/translations/README.ko.md +++ b/2-js-basics/4-arrays-loops/translations/README.ko.md @@ -4,7 +4,7 @@ > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## 강의 전 퀴즈 -[Pre-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/13?loc=ko) +[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/13?loc=ko) 이 강의에서는 웹에서 상호 작용을 제공하는 언어인 JavaScript의 기본 사항을 다룹니다. 데이터를 컨트롤하는 데 사용하는 배열과 반복문에 대해 알아 봅니다. @@ -119,7 +119,7 @@ for (let i = 0; i < iceCreamFlavors.length; i++) { 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)도 있습니다. 해당 기술 중 하나를 사용하여 배열 반복을 다시 작성하십시오. ## 강의 후 퀴즈 -[Post-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/14?loc=ko) +[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/14?loc=ko) ## 리뷰 & 자기주도 학습 diff --git a/2-js-basics/4-arrays-loops/translations/README.ms.md b/2-js-basics/4-arrays-loops/translations/README.ms.md index 61788c4f..1ab6f0f6 100644 --- a/2-js-basics/4-arrays-loops/translations/README.ms.md +++ b/2-js-basics/4-arrays-loops/translations/README.ms.md @@ -4,7 +4,7 @@ > Sketchnote karya [Tomomi Imura](https://twitter.com/girlie_mac) ## Kuiz Pra Kuliah -[Kuiz Pra Kuliah](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/13) +[Kuiz Pra Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/13) Pelajaran ini merangkumi asas-asas JavaScript, bahasa yang menyediakan interaktiviti di web. Dalam pelajaran ini, anda akan belajar tentang array dan loop, yang digunakan untuk memanipulasi data. @@ -118,7 +118,7 @@ for (let i = 0; i < iceCreamFlavors.length; i++) { Terdapat cara lain untuk mengulangi tatasusunan selain untuk dan semasa gelung. Terdapat [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), dan [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Tulis semula array loop anda menggunakan salah satu teknik ini. ## Kuiz Pasca Kuliah -[Kuiz Pasca Kuliah](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/14) +[Kuiz Pasca Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/14) ## Mengkaji and Belajar Sendiri 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..8a4786ca 100644 --- a/2-js-basics/4-arrays-loops/translations/README.pt.md +++ b/2-js-basics/4-arrays-loops/translations/README.pt.md @@ -4,15 +4,18 @@ > Nota de esboço por [Tomomi Imura](https://twitter.com/girlie_mac) ## Questionário de Pré-Palestra -[Questionário de Pré-Palestra](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/13) +[Questionário de Pré-Palestra](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/13) 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)! +> 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. @@ -118,7 +121,7 @@ for (let i = 0; i < iceCreamFlavors.length; i++) { Existem outras formas de looping sobre arrays que não são para e enquanto se faz loops. Existem [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), and [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Reescreva o seu laço de matriz usando uma destas técnicas. ## Questionário de pós-publicidade -[Questionário de pós-publicidade](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/14) +[Questionário de pós-publicidade](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/14) ## Revisão e Auto-estudo diff --git a/2-js-basics/4-arrays-loops/translations/README.zh-cn.md b/2-js-basics/4-arrays-loops/translations/README.zh-cn.md index 78b4a465..cb930b82 100644 --- a/2-js-basics/4-arrays-loops/translations/README.zh-cn.md +++ b/2-js-basics/4-arrays-loops/translations/README.zh-cn.md @@ -4,7 +4,7 @@ > 涂鸦笔记作者：[Tomomi Imura](https://twitter.com/girlie_mac) ## 课前小测 -[课前小测](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/13?loc=zh_cn) +[课前小测](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/13?loc=zh_cn) 这节课将会介绍 JavaScript 的基础知识，正是它为网页提供了可交互性。这节课中，你将学习数组和循环，它们会被用于操控数据。 @@ -119,7 +119,7 @@ for (let i = 0; i < iceCreamFlavors.length; i++) { 除了 for 和 while 循环，还有一些用于遍历数组的办法。比如 [forEach](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)、[for-of](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...of) 和 [map](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map)。用这些办法重写一下你的数组遍历代码。 ## 课后小测 -[Post-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/14?loc=zh_cn) +[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/14?loc=zh_cn) ## 复习 & 自学 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..d1b3e46f 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 @@ -4,7 +4,7 @@ > 由 [Tomomi Imura](https://twitter.com/girlie_mac) 繪製 ## 課前測驗 -[課前測驗](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/13?loc=zh_tw) +[課前測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/13?loc=zh_tw) 這堂課會包含程式語言 JavaScript，建立互動式網頁的基礎。課程中，你會學到用來操作資料的矩陣與迴圈。 @@ -116,16 +116,16 @@ 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)。用上列其中一種語法改寫你的迴圈。 ## 課後測驗 -[課後測驗](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/14?loc=zh_tw) +[課後測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/14?loc=zh_tw) ## 複習與自學 在 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/2-js-basics/translations/README.ru.md b/2-js-basics/translations/README.ru.md new file mode 100644 index 00000000..a9bd5211 --- /dev/null +++ b/2-js-basics/translations/README.ru.md @@ -0,0 +1,14 @@ +# Введение в JavaScript + +JavaScript это язык веб-программирования. В этих четырёх уроках вы изучите его основы. + +### Уроки + +1. [Переменные и типы данных](#) +2. [Функции и методы](#) +3. [Принятие решений с помощью JavaScript](#) +4. [Массивы и циклы](#) + +### Благодарность + +Эти уроки были ♥️ созданы [Жасмин Гринуэй](https://twitter.com/paladique), [Кристофером Харрисоном](https://twitter.com/geektrainer) и [Крисом Норингом](https://twitter.com/chris_noring). \ No newline at end of file diff --git a/2-js-basics/translations/README.ta.md b/2-js-basics/translations/README.ta.md new file mode 100644 index 00000000..023107b1 --- /dev/null +++ b/2-js-basics/translations/README.ta.md @@ -0,0 +1,14 @@ +# ஜாவாஸ்கிரிப்ட் அறிமுகம் + +ஜாவாஸ்கிரிப்ட் என்பது இணையத்தின் மொழி. இந்த நான்கு பாடங்களில், நீங்கள் அதன் அடிப்படைகளை கற்றுக்கொள்வீர்கள் + +### தலைப்புகள் + +1. [மாறிகள் மற்றும் தரவு வகைகள்](../1-data-types/README.md) +2. [செயல்பாடுகள் மற்றும் முறைகள்](../2-functions-methods/README.md) +3. [ஜாவாஸ்கிரிப்ட் மூலம் முடிவுகளை எடுக்க](../3-making-decisions/README.md) +4. [வரிசைகள் மற்றும் வளையங்கள்](../4-arrays-loops/README.md) + +### கடன்கள் + +இந்த பாடங்களை [ஜாஸ்மின் கிரீனவே](https://twitter.com/paladique/), [கிறிஸ்டோபர் ஹாரிசன்](https://twitter.com/geektrainer/) மற்றும் [கிறிஸ் நோரிங்](https://twitter.com/chris_noring/) ஆகியோர் ♥️ எழுதப்பட்டன \ No newline at end of file diff --git a/3-terrarium/1-intro-to-html/README.md b/3-terrarium/1-intro-to-html/README.md index 9c7e7b1a..5ee883d9 100644 --- a/3-terrarium/1-intro-to-html/README.md +++ b/3-terrarium/1-intro-to-html/README.md @@ -1,11 +1,17 @@ # Terrarium Project Part 1: Introduction to HTML -![Introduction to HTML](/sketchnotes/webdev101-html.png) +![Introduction to HTML](../../sketchnotes/webdev101-html.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## Pre-Lecture Quiz -[Pre-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/15) +[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/15) + + +> Check out video + +> +> [![Git and GitHub basics video](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ) ### Introduction @@ -217,7 +223,7 @@ There are some wild 'older' tags in HTML that are still fun to play with, though ## Post-Lecture Quiz -[Post-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/16) +[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/16) ## Review & Self Study diff --git a/3-terrarium/1-intro-to-html/translations/README.es.md b/3-terrarium/1-intro-to-html/translations/README.es.md index 8733bd99..faf4575c 100644 --- a/3-terrarium/1-intro-to-html/translations/README.es.md +++ b/3-terrarium/1-intro-to-html/translations/README.es.md @@ -3,7 +3,7 @@ ![Introducción a HTML](/sketchnotes/webdev101-html.png) > Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac) -## [Pre-lecture prueba](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/15) +## [Pre-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/15) ### Introducción: @@ -205,7 +205,7 @@ Agregue este marcado encima de la última etiqueta `
`: 🚀 Desafío: hay algunas etiquetas "antiguas" salvajes en HTML con las que todavía es divertido jugar, aunque no debes usar etiquetas obsoletas como [estas etiquetas](https://developer.mozilla.org/docs/Web/HTML/Element) en su marcado. Aún así, ¿puede usar la antigua etiqueta `` para hacer que el título h1 se desplace horizontalmente? (si lo hace, no olvide quitarlo después) -## [Post-lecture prueba](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/16) +## [Post-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/16) ## Revisión y autoestudio diff --git a/3-terrarium/1-intro-to-html/translations/README.fr.md b/3-terrarium/1-intro-to-html/translations/README.fr.md index d7cc4521..5b36a518 100644 --- a/3-terrarium/1-intro-to-html/translations/README.fr.md +++ b/3-terrarium/1-intro-to-html/translations/README.fr.md @@ -5,7 +5,7 @@ ## Quiz préalable -[Quiz préalable](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/15?loc=fr) +[Quiz préalable](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/15?loc=fr) ### Introduction @@ -219,7 +219,7 @@ Il existe quelques "vieilles" balises sauvages en HTML avec lesquelles il est en ## Quiz de validation des connaissances -[Quiz de validation des connaissances](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/16?loc=fr) +[Quiz de validation des connaissances](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/16?loc=fr) ## Révision et autoformation 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..24b65aed 100644 --- a/3-terrarium/1-intro-to-html/translations/README.hi.md +++ b/3-terrarium/1-intro-to-html/translations/README.hi.md @@ -5,7 +5,7 @@ ## पूर्व व्याख्यान प्रश्नोत्तरी -[पूर्व व्याख्यान प्रश्नोत्तरी](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/15?loc=hi) +[पूर्व व्याख्यान प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/15?loc=hi) ### परिचय @@ -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,11 +212,11 @@ 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 शीर्षक स्क्रॉल को क्षैतिज रूप से बनाने के लिए पुराने `` टैग का उपयोग कर सकते हैं? (यदि आप ऐसा करते हैं, तो इसे बाद में हटाना न भूलें) ## व्याख्यान उपरांत प्रश्नोत्तरी -[व्याख्यान उपरांत प्रश्नोत्तरी](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/16?loc=hi) +[व्याख्यान उपरांत प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/16?loc=hi) ## समीक्षा और स्व अध्ययन diff --git a/3-terrarium/1-intro-to-html/translations/README.it.md b/3-terrarium/1-intro-to-html/translations/README.it.md index 5afd41a2..cc55372e 100644 --- a/3-terrarium/1-intro-to-html/translations/README.it.md +++ b/3-terrarium/1-intro-to-html/translations/README.it.md @@ -5,7 +5,7 @@ ## Quiz Pre-Lezione -[Quiz Pre-Lezione](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/15?loc=it) +[Quiz Pre-Lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/15?loc=it) ### Introduzione @@ -218,7 +218,7 @@ Ci sono alcuni "vecchi" selvaggi tag in HTML con cui è ancora divertente giocar ## Quiz Post-Lezione -[Quiz post-lezione](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/16?loc=it) +[Quiz post-lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/16?loc=it) ## Revisione e Auto Apprendimento diff --git a/3-terrarium/1-intro-to-html/translations/README.ja.md b/3-terrarium/1-intro-to-html/translations/README.ja.md index e716aea0..f82c297c 100644 --- a/3-terrarium/1-intro-to-html/translations/README.ja.md +++ b/3-terrarium/1-intro-to-html/translations/README.ja.md @@ -5,7 +5,7 @@ ## レッスン前の小テスト -[レッスン前の小テスト](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/15?loc=ja) +[レッスン前の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/15?loc=ja) ### イントロダクション @@ -217,7 +217,7 @@ HTMLに はまだ遊んで楽しいワイルドな「古い」タグがいくつ ## レッスン後の小テスト -[レッスン後の小テスト](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/16?loc=ja) +[レッスン後の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/16?loc=ja) ## 復習と自己学習 diff --git a/3-terrarium/1-intro-to-html/translations/README.ko.md b/3-terrarium/1-intro-to-html/translations/README.ko.md index 7964c0fb..32556e6e 100644 --- a/3-terrarium/1-intro-to-html/translations/README.ko.md +++ b/3-terrarium/1-intro-to-html/translations/README.ko.md @@ -5,7 +5,7 @@ ## 강의 전 퀴즈 -[Pre-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/15?loc=ko) +[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/15?loc=ko) ### 소개 @@ -217,7 +217,7 @@ HTML에는 여전히 재미있고 '오래된' 태그가 있지만, 마크업에 ## 강의 후 퀴즈 -[Post-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/16?loc=ko) +[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/16?loc=ko) ## 리뷰 & 자기주도 학습 diff --git a/3-terrarium/1-intro-to-html/translations/README.ms.md b/3-terrarium/1-intro-to-html/translations/README.ms.md index 674d7038..fddcdf21 100644 --- a/3-terrarium/1-intro-to-html/translations/README.ms.md +++ b/3-terrarium/1-intro-to-html/translations/README.ms.md @@ -5,7 +5,7 @@ ## Kuiz Pra Kuliah -[Kuiz Pra Kuliah](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/15) +[Kuiz Pra Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/15) ### Pengenalan @@ -217,7 +217,7 @@ Terdapat beberapa tag 'lawas' liar dalam HTML yang masih menyeronokkan untuk dim ## Kuiz Pasca Kuliah -[Kuiz Pasca Kuliah](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/16) +[Kuiz Pasca Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/16) ## Mengkaji dan Belajar Sendiri diff --git a/3-terrarium/1-intro-to-html/translations/README.pt-BR.md b/3-terrarium/1-intro-to-html/translations/README.pt-BR.md index b2990f13..6168dd1c 100644 --- a/3-terrarium/1-intro-to-html/translations/README.pt-BR.md +++ b/3-terrarium/1-intro-to-html/translations/README.pt-BR.md @@ -5,7 +5,7 @@ ## Quiz Pré-aula -[Quiz pré-aula](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/15) +[Quiz pré-aula](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/15) ### Introdução @@ -217,7 +217,7 @@ Existem algumas tags 'mais antigas' selvagens em HTML que ainda são divertidas ## Quiz Pós-aula -[Quiz pós-aula](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/16) +[Quiz pós-aula](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/16) ## Revisão e autoestudo 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 3e7904e9..9d1c7630 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 @@ -5,7 +5,7 @@ ## 课前测试 -[课前测试](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/15?loc=zh_cn) +[课前测试](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/15?loc=zh_cn) ### 介绍 @@ -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 服务器这个页面将依据哪些信息被发送进行渲染，主要是四种: - 网页的标题 - 网页的元数据，它包含： @@ -187,6 +187,8 @@ HTML 文档中的 'head' 包含的区域有很多关于页面的重要信息， ✅ 看看屏幕阅读器是[如何去处理的一个网页的](https://www.youtube.com/watch?v=OUDV1gqs9GA)。你看到了非语义化标签对他们造成的障碍了吗？ +--- + ## 花艺瓶 这个界面的最后一部分涉及创建标记，这些标记后面将被装饰成一个花艺瓶。 @@ -213,11 +215,11 @@ 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 标题文字变成纵向展示的吗？（如果你这么尝试了，不要忘了在后面移除它们） ## 课后测试 -[课后测试](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/16?loc=zh_ch) +[课后测试](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/16?loc=zh_cn) ## 复习 & 预习 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..0607e6bd 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 @@ -5,7 +5,7 @@ ## 課前測驗 -[課前測驗](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/15?loc=zh_tw) +[課前測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/15?loc=zh_tw) ### 大綱 @@ -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,11 +213,11 @@ 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 標題文字變成縱向呈現嗎？實驗完後，記得要移除這些標籤喔。 ## 課後測驗 -[課後測驗](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/16?loc=zh_tw) +[課後測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/16?loc=zh_tw) ## 複習與自學 diff --git a/3-terrarium/1-intro-to-html/translations/assignment.es.md b/3-terrarium/1-intro-to-html/translations/assignment.es.md index 93ca8bfd..cf2ac473 100644 --- a/3-terrarium/1-intro-to-html/translations/assignment.es.md +++ b/3-terrarium/1-intro-to-html/translations/assignment.es.md @@ -2,7 +2,7 @@ ## Instrucciones -Imagínese que está diseñando o rediseñando su sitio web personal. Cree un marcado gráfico de su sitio y luego escriba el marcado HTML que usaría para construir los diversos elementos del sitio. Puede hacer esto en papel y escanearlo, o usar el software de su elección, solo asegúrese de codificar manualmente el marcado HTML. +Imagina que está diseñando o rediseñando su sitio web personal. Cree mockup del mismo y luego el HTML que usaría para construir los diversos elementos que componen al mismo. Puede hacer esto en papel y escanearlo, o usar el software de su elección, solo asegúrese de codificar manualmente todo el HTML. ## Rúbrica diff --git a/3-terrarium/2-intro-to-css/README.md b/3-terrarium/2-intro-to-css/README.md index 73126b0f..bec5c51b 100644 --- a/3-terrarium/2-intro-to-css/README.md +++ b/3-terrarium/2-intro-to-css/README.md @@ -1,11 +1,11 @@ # Terrarium Project Part 2: Introduction to CSS -![Introduction to CSS](/sketchnotes/webdev101-css.png) +![Introduction to CSS](../../sketchnotes/webdev101-css.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## Pre-Lecture Quiz -[Pre-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/17) +[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/17) ### Introduction @@ -19,6 +19,11 @@ In this lesson, we're going to add styles to our online terrarium and learn more You should have the HTML for your terrarium built and ready to be styled. +> Check out video + +> +> [![Git and GitHub basics video](https://img.youtube.com/vi/6yIdOIV9p1I/0.jpg)](https://www.youtube.com/watch?v=6yIdOIV9p1I) + ### Task In your terrarium folder, create a new file called `style.css`. Import that file in the `` section: @@ -254,7 +259,7 @@ To complete the post-lecture quiz, go through this Learn module: [Style your HTM ## Post-Lecture Quiz -[Post-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/18) +[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/18) ## Review & Self Study diff --git a/3-terrarium/2-intro-to-css/translations/README.es.md b/3-terrarium/2-intro-to-css/translations/README.es.md index aaddda4f..ed7086af 100644 --- a/3-terrarium/2-intro-to-css/translations/README.es.md +++ b/3-terrarium/2-intro-to-css/translations/README.es.md @@ -3,7 +3,7 @@ ![Introducción a CSS](/sketchnotes/webdev101-css.png) > Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac) -## [Pre-lecture prueba](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/17) +## [Pre-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/17) ### Introducción: @@ -244,7 +244,7 @@ Tenga en cuenta el uso de porcentajes aquí. Si reduce la escala de su navegador ![terrario terminado](../images/terrarium-final.png) -## [Post-lecture prueba](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/18) +## [Post-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/18) ## Revisión y autoestudio diff --git a/3-terrarium/2-intro-to-css/translations/README.fr.md b/3-terrarium/2-intro-to-css/translations/README.fr.md index fd451264..e9c45373 100644 --- a/3-terrarium/2-intro-to-css/translations/README.fr.md +++ b/3-terrarium/2-intro-to-css/translations/README.fr.md @@ -5,7 +5,7 @@ ## Quiz préalable -[Quiz préalable](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/17?loc=fr) +[Quiz préalable](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/17?loc=fr) ### Introduction @@ -69,7 +69,7 @@ body { Ouvrez la console de votre navigateur dans l'onglet "Éléments" et observez la police de caractères de la page H1. Elle hérite de la police du corps, comme indiqué dans le navigateur : -![police héritée](images/1.png) +![police héritée](../images/1.png) ✅ Peut-on faire en sorte qu'un style imbriqué hérite d'une propriété différente ? @@ -179,7 +179,7 @@ Les éléments positionnés de manière relative sont positionnés en fonction d Dans notre exemple, le `plant-holder` est un élément à positionnement relatif qui est positionné dans un conteneur à positionnement absolu. Le comportement qui en résulte est que les conteneurs de la barre latérale sont épinglés à gauche et à droite, et que le porte-plante est imbriqué, s'ajustant lui-même dans les barres latérales, ce qui donne de l'espace pour que les plantes soient placées dans une rangée verticale. -> La "plante" elle-même a également un positionnement absolu, nécessaire pour la rendre glissante, comme vous le découvrirez dans la prochaine leçon. +> La `plante` elle-même a également un positionnement absolu, nécessaire pour la rendre glissante, comme vous le découvrirez dans la prochaine leçon. ✅ Expérimentez en changeant les types de positionnement des récipients latéraux et du porte-plante. Que se passe-t-il ? @@ -248,13 +248,13 @@ Nous utilisons également `rem` pour le border-radius, une longueur relative à Ajoutez un éclat "bulle" à la partie inférieure gauche du pot pour qu'il ressemble davantage à du verre. Vous allez styliser les fichiers `.jar-glossy-long` et `.jar-glossy-short` pour qu'ils ressemblent à une brillance réfléchie. Voici à quoi cela ressemblerait : -![terrarium terminé](./images/terrarium-final.png) +![terrarium terminé](../images/terrarium-final.png) Pour répondre au Quiz de validation des connaissances, suivez ce module d'apprentissage : [Donnez du style à votre application HTML avec CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics?WT.mc_id=academic-13441-cxa) ## Quiz de validation des connaissances -[Quiz de validation des connaissances](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/18?loc=fr) +[Quiz de validation des connaissances](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/18?loc=fr) ## Révision et étude personnelle @@ -262,4 +262,4 @@ Les feuilles de style en cascade (CSS) sont apparemment très simples, mais les ## Affectation -[Refactoring CSS](assignment.md) +[Refactoring CSS](assignment.fr.md) diff --git a/3-terrarium/2-intro-to-css/translations/README.hi.md b/3-terrarium/2-intro-to-css/translations/README.hi.md index 9cc7b770..64b2a99d 100644 --- a/3-terrarium/2-intro-to-css/translations/README.hi.md +++ b/3-terrarium/2-intro-to-css/translations/README.hi.md @@ -5,7 +5,7 @@ ## पूर्व व्याख्यान प्रश्नोत्तरी -[पूर्व व्याख्यान प्रश्नोत्तरी](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/17?loc=hi) +[पूर्व व्याख्यान प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/17?loc=hi) ### परिचय @@ -254,7 +254,7 @@ h1 { ## व्याख्यान उपरांत प्रश्नोत्तरी -[व्याख्यान उपरांत प्रश्नोत्तरी](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/18?loc=hi) +[व्याख्यान उपरांत प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/18?loc=hi) ## समीक्षा और स्व अध्ययन diff --git a/3-terrarium/2-intro-to-css/translations/README.it.md b/3-terrarium/2-intro-to-css/translations/README.it.md index dd9c4b76..f95c750a 100644 --- a/3-terrarium/2-intro-to-css/translations/README.it.md +++ b/3-terrarium/2-intro-to-css/translations/README.it.md @@ -5,7 +5,7 @@ ## Quiz Pre-Lezione -[Quiz Pre-Lezione](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/17?loc=it) +[Quiz Pre-Lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/17?loc=it) ### Introduzione @@ -252,7 +252,7 @@ Per completare il quiz post-lezione, seguire questo modulo di apprendimento: [Ap ## Quiz Post-Lezione -[Quiz post-lezione](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/18?loc=it) +[Quiz post-lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/18?loc=it) ## Revisione e Auto Apprendimento diff --git a/3-terrarium/2-intro-to-css/translations/README.ja.md b/3-terrarium/2-intro-to-css/translations/README.ja.md index 5c824324..35a7edfc 100644 --- a/3-terrarium/2-intro-to-css/translations/README.ja.md +++ b/3-terrarium/2-intro-to-css/translations/README.ja.md @@ -5,7 +5,7 @@ ## レッスン前の小テスト -[レッスン前の小テスト](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/17?loc=ja) +[レッスン前の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/17?loc=ja) ### イントロダクション @@ -252,7 +252,7 @@ HTML マークアップの各植物には、id とクラスの組み合わせが ## レッスン後の小テスト -[レッスン後の小テスト](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/18?loc=ja) +[レッスン後の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/18?loc=ja) ## 復習と自己学習 diff --git a/3-terrarium/2-intro-to-css/translations/README.ko.md b/3-terrarium/2-intro-to-css/translations/README.ko.md index edca5702..be4b70bb 100644 --- a/3-terrarium/2-intro-to-css/translations/README.ko.md +++ b/3-terrarium/2-intro-to-css/translations/README.ko.md @@ -5,7 +5,7 @@ ## 강의 전 퀴즈 -[Pre-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/17?loc=ko) +[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/17?loc=ko) ### 소개 @@ -252,7 +252,7 @@ jar 좌측 하단 부분에 'bubble' 광택을 추가하여 유리처럼 보이 ## 강의 후 퀴즈 -[Post-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/18?loc=ko) +[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/18?loc=ko) ## 리뷰 & 자기주도 학습 diff --git a/3-terrarium/2-intro-to-css/translations/README.ms.md b/3-terrarium/2-intro-to-css/translations/README.ms.md index 918989d9..6be952ef 100644 --- a/3-terrarium/2-intro-to-css/translations/README.ms.md +++ b/3-terrarium/2-intro-to-css/translations/README.ms.md @@ -5,7 +5,7 @@ ## Kuiz Pra Kuliah -[Kuiz Pra Kuliah](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/17) +[Kuiz Pra Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/17) ### Pengenalan @@ -252,7 +252,7 @@ Untuk menyelesaikan kuiz pasca kuliah, baca modul Belajar ini: [Gaya aplikasi HT ## Kuiz Pasca Kuliah -[Kuiz Pasca Kuliah](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/18) +[Kuiz Pasca Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/18) ## Mengkaji & Belajar Sendiri 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..51ff3307 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 @@ -5,7 +5,7 @@ ## 課前測驗 -[課前測驗](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/17?loc=zh_tw) +[課前測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/17?loc=zh_tw) ### 大綱 @@ -248,11 +248,11 @@ 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) ## 課後測驗 -[課後測驗](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/18?loc=zh_tw) +[課後測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/18?loc=zh_tw) ## 複習與自學 diff --git a/3-terrarium/3-intro-to-DOM-and-closures/README.md b/3-terrarium/3-intro-to-DOM-and-closures/README.md index 7285d7cb..8db26e0b 100644 --- a/3-terrarium/3-intro-to-DOM-and-closures/README.md +++ b/3-terrarium/3-intro-to-DOM-and-closures/README.md @@ -1,11 +1,11 @@ # Terrarium Project Part 3: DOM Manipulation and a Closure -![DOM and a closure](/sketchnotes/webdev101-js.png) +![DOM and a closure](../../sketchnotes/webdev101-js.png) > Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) ## Pre-Lecture Quiz -[Pre-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/19) +[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/19) ### Introduction @@ -201,7 +201,7 @@ Add new event handler to your closure to do something more to the plants; for ex ## Post-Lecture Quiz -[Post-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/20) +[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/20) ## Review & Self Study diff --git a/3-terrarium/3-intro-to-DOM-and-closures/translations/README.es.md b/3-terrarium/3-intro-to-DOM-and-closures/translations/README.es.md index c0d4fb1f..86dac8fa 100644 --- a/3-terrarium/3-intro-to-DOM-and-closures/translations/README.es.md +++ b/3-terrarium/3-intro-to-DOM-and-closures/translations/README.es.md @@ -3,7 +3,7 @@ ! [DOM y un cierre](/sketchnotes/webdev101-js.png) > Boceto de [Tomomi Imura](https://twitter.com/girlie_mac) -## [Pre-lecture prueba](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/19) +## [Pre-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/19) ### Introducción: @@ -197,7 +197,7 @@ Esta pequeña función restablece los eventos `onpointerup` y `onpointermove` pa 🚀Challenge: agregue un nuevo controlador de eventos a su cierre para hacer algo más en las plantas; por ejemplo, haga doble clic en una planta para traerla al frente. ¡Se creativo! -## [Post-lecture prueba](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/20) +## [Post-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/20) ## Revisión y autoestudio diff --git a/3-terrarium/3-intro-to-DOM-and-closures/translations/README.fr.md b/3-terrarium/3-intro-to-DOM-and-closures/translations/README.fr.md index cb6d418e..e83fcf96 100644 --- a/3-terrarium/3-intro-to-DOM-and-closures/translations/README.fr.md +++ b/3-terrarium/3-intro-to-DOM-and-closures/translations/README.fr.md @@ -1,11 +1,11 @@ -# Projet Terrarium Partie 3 : Manipulation DOM et une fermeture +# Projet Terrarium Partie 3 : Manipulation du DOM et notion de closure (fermeture) ![DOM et une fermeture](/sketchnotes/webdev101-js.png) > Sketchnote par [Tomomi Imura](https://twitter.com/girlie_mac) ## Quiz préalable -[Quiz préalable](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/19?loc=fr) +[Quiz préalable](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/19?loc=fr) ### Introduction @@ -19,7 +19,7 @@ Nous allons utiliser une fermeture pour manipuler le DOM. Imaginez le DOM comme un arbre, représentant toutes les façons dont un document de page Web peut être manipulé. Diverses API (interfaces de programme d'application) ont été écrites pour que les programmeurs, en utilisant le langage de programmation de leur choix, puissent accéder au DOM et l'éditer, le modifier, le réorganiser et le gérer. -![Représentation de l'arbre DOM](./images/dom-tree.png) +![Représentation de l'arbre DOM](../images/dom-tree.png) > Une représentation du DOM et du balisage HTML qui y fait référence. De [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) @@ -191,7 +191,7 @@ Cette petite fonction réinitialise les événements `onpointerup` et `onpointer Vous avez maintenant terminé votre projet ! -🥇Congratulations ! Tu as terminé ton magnifique terrarium. !terrarium fini](./images/terrarium-final.png) +🥇Félicitations ! Tu as terminé ton magnifique terrarium. ![terrarium fini](../images/terrarium-final.png) --- @@ -201,7 +201,7 @@ Ajoutez un nouveau gestionnaire d'événements à votre fermeture pour faire que ## Quiz de validation des connaissances -[Quiz de validation des connaissances](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/20?loc=fr) +[Quiz de validation des connaissances](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/20?loc=fr) ## Examen et étude personnelle @@ -213,5 +213,5 @@ Vérifiez toujours les capacités du navigateur en utilisant [CanIUse.com](https ## Affectation -[Travailler un peu plus avec le DOM](assignment.md) +[Travailler un peu plus avec le DOM](assignment.fr.md) 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..7ad65993 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 @@ -5,15 +5,15 @@ ## पूर्व व्याख्यान प्रश्नोत्तरी -[पूर्व व्याख्यान प्रश्नोत्तरी](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/19?loc=hi) +[पूर्व व्याख्यान प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/19?loc=hi) ### परिचय -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) को अधिक समर्थन क्रॉस-ब्राउज़र है; आप इसका उपयोग यहां क्यों नहीं करेंगे? स्क्रीन निर्माण के सटीक प्रकार के बारे में सोचें जिसे आप यहाँ बनाने का प्रयास कर रहे हैं। --- @@ -201,13 +201,13 @@ function stopElementDrag() { ## व्याख्यान उपरांत प्रश्नोत्तरी -[व्याख्यान उपरांत प्रश्नोत्तरी](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/20?loc=hi) +[व्याख्यान उपरांत प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/20?loc=hi) ## समीक्षा और स्व अध्ययन -स्क्रीन के चारों ओर तत्वों को खींचते समय तुच्छ लगता है, ऐसा करने के कई तरीके और कई नुकसान हैं, जो आपके चाहने वाले प्रभाव पर निर्भर करता है। वास्तव में, एक संपूर्ण [ड्रैग एंड ड्रॉप एपीआई](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.it.md b/3-terrarium/3-intro-to-DOM-and-closures/translations/README.it.md index ef2b25f2..8a1e2703 100644 --- a/3-terrarium/3-intro-to-DOM-and-closures/translations/README.it.md +++ b/3-terrarium/3-intro-to-DOM-and-closures/translations/README.it.md @@ -5,7 +5,7 @@ ## Quiz Pre-Lezione -[Quiz Pre-Lezione](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/19?loc=it) +[Quiz Pre-Lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/19?loc=it) ### Introduzione @@ -201,7 +201,7 @@ Aggiungere un nuovo gestore di eventi alla closure per fare qualcosa di più con ## Quiz Post-Lezione -[Quiz post-lezione](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/20?loc=it) +[Quiz post-lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/20?loc=it) ## Revisione e Auto Apprendimento diff --git a/3-terrarium/3-intro-to-DOM-and-closures/translations/README.ja.md b/3-terrarium/3-intro-to-DOM-and-closures/translations/README.ja.md index 2ea8125a..8ecf6e03 100644 --- a/3-terrarium/3-intro-to-DOM-and-closures/translations/README.ja.md +++ b/3-terrarium/3-intro-to-DOM-and-closures/translations/README.ja.md @@ -5,7 +5,7 @@ ## レッスン前の小テスト -[レッスン前の小テスト](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/19?loc=ja) +[レッスン前の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/19?loc=ja) ### イントロダクション @@ -201,7 +201,7 @@ function stopElementDrag() { ## レッスン後の小テスト -[レッスン後の小テスト](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/20?loc=ja) +[レッスン後の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/20?loc=ja) ## 復習と自己学習 diff --git a/3-terrarium/3-intro-to-DOM-and-closures/translations/README.ko.md b/3-terrarium/3-intro-to-DOM-and-closures/translations/README.ko.md index f246aece..eca90e61 100644 --- a/3-terrarium/3-intro-to-DOM-and-closures/translations/README.ko.md +++ b/3-terrarium/3-intro-to-DOM-and-closures/translations/README.ko.md @@ -5,7 +5,7 @@ ## 강의 전 퀴즈 -[Pre-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/19?loc=ko) +[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/19?loc=ko) ### 소개 @@ -199,7 +199,7 @@ function stopElementDrag() { ## 강의 후 퀴즈 -[Post-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/20?loc=ko) +[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/20?loc=ko) ## 리뷰 & 자기주도 학습 diff --git a/3-terrarium/3-intro-to-DOM-and-closures/translations/README.ms.md b/3-terrarium/3-intro-to-DOM-and-closures/translations/README.ms.md index 6c2b31c1..a9fa0b35 100644 --- a/3-terrarium/3-intro-to-DOM-and-closures/translations/README.ms.md +++ b/3-terrarium/3-intro-to-DOM-and-closures/translations/README.ms.md @@ -5,7 +5,7 @@ ## Kuiz Pra Kuliah -[Kuiz Pra Kuliah](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/19) +[Kuiz Pra Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/19) ### Pengenalan @@ -201,7 +201,7 @@ Tambahkan pengendali acara (event handler) baharu ke penutupan anda untuk melaku ## Kuiz Pasca Kuliah -[Kuiz Pasca Kuliah](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/20) +[Kuiz Pasca Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/20) ## Mengkaji & Belajar Sendiri diff --git a/3-terrarium/3-intro-to-DOM-and-closures/translations/README.pt.md b/3-terrarium/3-intro-to-DOM-and-closures/translations/README.pt.md index 934c4401..69a8fc66 100644 --- a/3-terrarium/3-intro-to-DOM-and-closures/translations/README.pt.md +++ b/3-terrarium/3-intro-to-DOM-and-closures/translations/README.pt.md @@ -5,7 +5,7 @@ ## Quiz pré-leitura -[Quiz pré-leitura](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/19) +[Quiz pré-leitura](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/19) ### Introdução @@ -217,7 +217,7 @@ Adicione um novo manipulador de eventos ao seu fechamento para fazer algo mais p ## Quiz pós-leitura -[Quiz pós-leitura](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/20) +[Quiz pós-leitura](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/20) ## Revisão & auto-estudo 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..8f222ef6 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 @@ -5,15 +5,15 @@ ## 課前測驗 -[課前測驗](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/19?loc=zh_tw) +[課前測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/19?loc=zh_tw) ### 大綱 -操作 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)支援更多的瀏覽器。為什麼我們不在這邊使用它？ 想想看我們在這此建立的視窗互動類型。 --- @@ -203,13 +203,13 @@ function stopElementDrag() { ## 課後測驗 -[課後測驗](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/20?loc=zh_tw) +[課後測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/20?loc=zh_tw) ## 複習與自學 -在螢幕上拖曳物件看似簡單，但依照不同的目的與實現方法會遭遇到不同的問題。事實上，這邊有一份關於你可以嘗試的[拖曳 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/3-terrarium/translations/README.pt-BR.md b/3-terrarium/translations/README.pt-BR.md index 84b0a4ac..3a40a94d 100644 --- a/3-terrarium/translations/README.pt-BR.md +++ b/3-terrarium/translations/README.pt-BR.md @@ -1,6 +1,6 @@ -# Meu Terrário: Um projeto para aprender HTML, CSS, e manipulação DOM usando JavaScript 🌵🌱 +# Meu Terrário: Um projeto para aprender HTML, CSS, e manipulação de DOM usando JavaScript 🌵🌱 -Uma pequena meditação de código de arrastar e soltar. Com um pouco de HTML, JS e CSS, você pode construir uma interface web, esilizá-la, e adiconar uma interação. +Uma pequena meditação de código de arrastar e soltar. Com um pouco de HTML, JS e CSS, você pode construir uma interface web, estilizá-la, e adicionar uma interação. ![Meu Terrário](../images/screenshot_gray.png) diff --git a/3-terrarium/translations/README.ta.md b/3-terrarium/translations/README.ta.md new file mode 100644 index 00000000..003f927c --- /dev/null +++ b/3-terrarium/translations/README.ta.md @@ -0,0 +1,31 @@ +# என் நிலப்பரப்பு: ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி ஹெச்டிஎம்எல், சிஎஸ்எஸ் மற்றும் டோம் கையாளுதல் பற்றி அறிய ஒரு திட்டம் 🌵🌱 + +ஒரு சிறிய இழுவை மற்றும் குறியீடு தியானம் கைவிட.ஒரு சிறிய ஹெச்டிஎம்எல், ஜேஎஸ் மற்றும் சிஎஸ்எஸ் மூலம், நீங்கள் ஒரு வலை இடைமுகத்தை உருவாக்கலாம், அதை பாணிசெய்யலாம், மற்றும் ஒரு தொடர்பு சேர்க்கலாம். + +![என் நிலப்பரப்பு](../images/screenshot_gray.png) + +# பாடங்கள் + +1. [ஹெச்டிஎம்எல் அறிமுகம்](../1-intro-to-html/README.md) +2. [சிஎஸ்எஸ் அறிமுகம்](../2-intro-to-css/README.md) +3. [டோம் மற்றும் ஜேஎஸ் மூடல்களுக்கு அறிமுகம்](../3-intro-to-DOM-and-closures/README.md) + +### கடன்கள் + +[ஜென் லூப்பர்](https://www.twitter.com/jenlooper) ♥️ எழுதினார் +சிஎஸ்எஸ் வழியாக உருவாக்கப்பட்ட நிலப்பரப்பு ஈர்க்கப்பட்டது + +சி.எஸ்.எஸ் வழியாக உருவாக்கப்பட்ட நிலப்பரப்பு ஜாகுப் மந்த்ராவின் கண்ணாடி [கோடெபென்](https://codepen.io/Rotarepmi/pen/rjpNZY). ஜாடியால் ஈர்க்கப்பட்டது + +இந்த கலைப்படைப்பு புரோகிரியேட்பயன்படுத்தி [ஜென் லூப்பரால்](http://jenlooper.com) வரையப்பட்டது + +## உங்கள் நிலப்பரப்பு பயன்படுத்தவும் + +அஸூர் ஸ்டேடிக் வெப் ஆப்ஸ் பயன்படுத்தி உங்கள் டெரரியத்தை இணையத்தில் பயன்படுத்தலாம் அல்லது வெளியிடலாம். + +1. இந்த ரெப்போவை ஃபோர்க் செய்யுங்கள் +2. இந்த பொத்தானை அழுத்தவும் + +[![Deploy to Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-13441-cxa#create/Microsoft.StaticApp) + +3. உங்கள் பயன்பாட்டை உருவாக்கும் வழிகாட்டி வழியாக நடக்கவும். பயன்பாட்டு வேர் `/solution` அல்லது உங்கள் கோட்பேஸின் வேர் என்று நீங்கள் அமைக்கிறீர்கள் என்பதை உறுதிப்படுத்தவும்.இந்த பயன்பாட்டில் ஏபிஐ இல்லை, எனவே அதை சேர்ப்பது பற்றி கவலைப்பட வேண்டாம்.உங்கள் ஃபோர்க் செய்யப்பட்ட ரெப்போவில் ஒரு கீட்ஹப் கோப்புறை உருவாக்கப்படும், இது அஸூர் ஸ்டேடிக் வெப் ஆப்ஸின் சேவையை உருவாக்கவும் உங்கள் பயன்பாட்டை ஒரு புதிய யுஆர்எல் க்கு வெளியிடவும் உதவும். diff --git a/4-typing-game/translations/README.es.md b/4-typing-game/translations/README.es.md new file mode 100644 index 00000000..2ff70a05 --- /dev/null +++ b/4-typing-game/translations/README.es.md @@ -0,0 +1,30 @@ +# Programación basada en Eventos - Construye un juego de Mecanografía + +## Introducción + +Escribir es una de las habilidades más subestimadas de los desarrolladores. La capacidad de poder transmitir rápidamente pensamientos de su cabeza a su editor permite que la creatividad fluya libremente. ¡Una de las mejores formas de aprender es jugando un juego! + +> Entonces, ¡construyamos un juego de mecanografía! + +Utilizará las habilidades de JavaScript, HTML y CSS que ha aprendido hasta ahora para crear este juego. El mismo le mostrara al jugador una cita aleatoria (estamos usando [Sherlock Holmes](https://en.wikipedia.org/wiki/Sherlock_Holmes) citas) y el tiempo que tarda el jugador en escribirlo con precisión. + +![demo](../images/demo.gif) + +## Requisitos + +Esta lección asume que está familiarizado con los siguientes conceptos: + +- Crear entradas de texto y botones +- CSS y estilos por clases +- JavaScript básico + - Creación de array + - Crear números de manera aleatoria (random) + - Obtener la hora actual + +## Lección + +[Creación de un juego de mecanografía mediante eventos](../typing-game/translations/README.es.md) + +## Creditos + +Escrito con ♥️ por [Christopher Harrison](http://www.twitter.com/geektrainer) diff --git a/4-typing-game/translations/README.nl.md b/4-typing-game/translations/README.nl.md index e45c22a3..fbc946d8 100644 --- a/4-typing-game/translations/README.nl.md +++ b/4-typing-game/translations/README.nl.md @@ -23,7 +23,7 @@ In deze les wordt ervan uitgegaan dat u bekend bent met de volgende concepten: ## Les -[Een typspel maken met behulp van event driven programming](../typing-game/translations/README.it.md) +[Een typspel maken met behulp van event driven programming (Engels)](../typing-game/README.md) ## Credits diff --git a/4-typing-game/translations/README.ta.md b/4-typing-game/translations/README.ta.md new file mode 100644 index 00000000..8896806c --- /dev/null +++ b/4-typing-game/translations/README.ta.md @@ -0,0 +1,31 @@ +# நிகழ்வு-இயக்கப்படும் நிரலாக்கம் - ஒரு தட்டச்சு விளையாட்டு உருவாக்க + +## அறிமுகம் + +தட்டச்சு என்பது டெவலப்பரின் மிகவும் குறைவாக மதிப்பிடப்பட்ட திறன்களில் ஒன்றாகும். உங்கள் தலையிலிருந்து உங்கள் எடிட்டருக்கு விரைவாக எண்ணங்களை மாற்றும் திறன் படைப்பாற்றல் சுதந்திரமாக ஓட அனுமதிக்கிறது. கற்றுக்கொள்வதற்கான சிறந்த வழிகளில் ஒன்று விளையாட்டை விளையாடுவது! + +> எனவே, தட்டச்சு விளையாட்டை உருவாக்குவோம்! + +நீங்கள் இதுவரை உருவாக்கிய ஜாவாஸ்கிரிப்ட், ஹெச்டிஎம்எல் மற்றும் சிஎஸ்எஸ் திறன்களைப் பயன்படுத்தி தட்டச்சு விளையாட்டை உருவாக்கப் போகிறீர்கள். விளையாட்டு ஒரு சீரற்ற மேற்கோள் வீரர் வழங்கும் (நாங்கள் பயன்படுத்துகிறோம் [ஷெர்லாக் ஹோம்ஸ்](https://en.wikipedia.org/wiki/Sherlock_Holmes) மேற்கோள்கள்) மற்றும் வீரர் துல்லியமாக அதை தட்டச்சு செய்ய எவ்வளவு நேரம் எடுக்கும் + + +![டெமோ](../images/demo.gif) + +## முன்நிபந்தனைகள் + +பின்வரும் கருத்துகளை நீங்கள் நன்கு அறிந்திருப்பீர்கள் என்று இந்தப் பாடம் கருதுகிறது: + +- உரை உள்ளீடு மற்றும் பொத்தான் கட்டுப்பாடுகளை உருவாக்குதல் +- சிஎஸ்எஸ் மற்றும் வகுப்புகளைப் பயன்படுத்தி பாணிகளை அமைத்தல் +- ஜாவாஸ்கிரிப்ட் அடிப்படைகள் + - ஒரு வரிசையை உருவாக்குதல் + - ஒரு சீரற்ற எண்ணை உருவாக்குதல் + - நடப்பு நேரத்தைப் பெறுதல் + +## பாடம் + +[நிகழ்வு உந்துதல் நிரலாக்கத்தைப் பயன்படுத்தி தட்டச்சு விளையாட்டை உருவாக்குதல்](../README.md) + +## கடன்கள் + +[கிறிஸ்டோபர் ஹாரிசன்](http://www.twitter.com/geektrainer) அன்புடன் ♥️ எழுதினார் \ No newline at end of file diff --git a/4-typing-game/translations/READMR.pt-BR.md b/4-typing-game/translations/READMR.pt-BR.md new file mode 100644 index 00000000..2a5549d4 --- /dev/null +++ b/4-typing-game/translations/READMR.pt-BR.md @@ -0,0 +1,30 @@ +# Programação Orientada a Eventos - Construa um Jogo de Digitação + +## Introdução + +A digitação é uma das habilidades mais subestimadas do desenvolvedor. A capacidade de transferir rapidamente os pensamentos da sua cabeça para o seu editor permite que a criatividade flua livremente. Uma das melhores maneiras de aprender é jogar um jogo! + +>Então, vamos construir um jogo de digitação! + +Você usará as habilidades de JavaScript, HTML e CSS que desenvolveu até agora para criar um jogo de digitação. O jogo apresentará ao jogador uma citação aleatória (estamos usando [Sherlock Holmes](https://en.wikipedia.org/wiki/Sherlock_Holmes) citações) e quanto tempo o jogador leva para digitá-lo com precisão. Você usará as habilidades de JavaScript, HTML e CSS que desenvolveu até agora para criar um jogo de digitação. + +![demo](../images/demo.gif) + +## Pré-requisitos + +Esta lição pressupõe que você esteja familiarizado com os seguintes conceitos: + +- Criação de textos de entrada e controles de botão +- CSS e configuração de estilos usando classes +- Noções básicas de JavaScript + - Criação de array + - Criação de número aleatório + - Obtenção da hora atual + +## Lição + +[Criando um jogo de digitação usando programação orientada a eventos](./typing-game/README.md) + +## Créditos + +Escrito com ♥️ por [Christopher Harrison](http://www.twitter.com/geektrainer) \ No newline at end of file diff --git a/4-typing-game/typing-game/README.md b/4-typing-game/typing-game/README.md index 2524fc94..0930c068 100644 --- a/4-typing-game/typing-game/README.md +++ b/4-typing-game/typing-game/README.md @@ -2,7 +2,7 @@ ## Pre-Lecture Quiz -[Pre-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/21) +[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/21) ## Event driven programming @@ -14,7 +14,7 @@ The way we mark a section of code we want to execute is by creating a function. To handle events (button clicking, typing, etc.), we register **event listeners**. An event listener is a function which listens for an event to occur and executes in response. Event listeners can update the UI, make calls to the server, or whatever else needs to be done in response to the user's action. We add an event listener by using [addEventListener](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener), and providing a function to execute. -> **NOTE:** It's worth highlighting there are numerous ways to create event listeners. You can use anonymous functions, or create named ones. You can use various shortcuts, like setting the `click` property, or using `addEventListener`. In our exercise we are going to focus on `addEventLister` and anonymous functions, as it's probably the most common technique web developers use. It's also the most flexible, as `addEventListener` works for all events, and the event name can be provided as a parameter. +> **NOTE:** It's worth highlighting there are numerous ways to create event listeners. You can use anonymous functions, or create named ones. You can use various shortcuts, like setting the `click` property, or using `addEventListener`. In our exercise we are going to focus on `addEventListener` and anonymous functions, as it's probably the most common technique web developers use. It's also the most flexible, as `addEventListener` works for all events, and the event name can be provided as a parameter. ### Common events @@ -103,7 +103,7 @@ It's always best to develop iteratively to see how things look. Let's launch our - Install [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) by following the link and clicking **Install** - You will be prompted by the browser to open Visual Studio Code, and then by Visual Studio Code to perform the installation - Restart Visual Studio Code if prompted -- Once installed, in Visual Studio Code, click Ctrl-Shift-P (or Cmd-Shift-P) to open the command pallate +- Once installed, in Visual Studio Code, click Ctrl-Shift-P (or Cmd-Shift-P) to open the command palette - Type **Live Server: Open with Live Server** - Live Server will start hosting your application - Open a browser and navigate to **https://localhost:5500** @@ -313,7 +313,7 @@ You've made it to the end! The last step is to ensure our application works. Giv Click on **start**, and start typing away! It should look a little like the animation we saw before. -![Animation of the game in action](/4-typing-game/images/demo.gif) +![Animation of the game in action](../images/demo.gif) --- @@ -328,7 +328,7 @@ Add more functionality ## Post-Lecture Quiz -[Post-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/22) +[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/22) ## Review & Self Study diff --git a/4-typing-game/typing-game/translations/README.fr.md b/4-typing-game/typing-game/translations/README.fr.md new file mode 100644 index 00000000..e8ac1464 --- /dev/null +++ b/4-typing-game/typing-game/translations/README.fr.md @@ -0,0 +1,340 @@ +# Créer un jeu à l'aide d'événements + +## Quiz préalable + +[Quiz préalable](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/21?loc=fr) + +## La programmation événementielle + +Lors de la création d'une application basée sur un navigateur, nous fournissons une interface utilisateur graphique (GUI) que l'utilisateur peut utiliser lorsqu'il interagit avec ce que nous avons construit. La façon la plus courante d'interagir avec le navigateur consiste à cliquer et à saisir divers éléments. Le défi auquel nous sommes confrontés en tant que développeur est que nous ne savons pas quand ils vont effectuer ces opérations! + +[La programmation événementielle](https://en.wikipedia.org/wiki/Event-driven_programming) est le nom du type de programmation que nous devons faire pour créer notre interface graphique. Si nous décomposons un peu cette phrase, nous voyons que le mot clé ici est **événement**. [L'événement](https://www.merriam-webster.com/dictionary/event), selon le Merriam-Webster, est défini comme "quelque chose qui arrive". Cela décrit parfaitement notre situation. Nous savons qu'il va se passer quelque chose pour lequel nous voulons exécuter du code en réponse, mais nous ne savons pas quand cela se produira. + +La façon dont nous marquons une section de code que nous voulons exécuter consiste à créer une fonction. Lorsque nous pensons à la [programmation procédurale](https://en.wikipedia.org/wiki/Procedural_programming), les fonctions sont appelées dans un ordre spécifique. La même chose va être vraie avec la programmation événementielle. La différence est **comment** les fonctions seront appelées. + +Pour gérer les événements (clic sur un bouton, saisie, etc.), nous enregistrons des **écouteurs d'événements**("event listeners" en anglais). Un écouteur d'événement est une fonction qui attend qu'un événement se produise et s'exécute en réponse. Les écouteurs d'événement peuvent mettre à jour l'interface utilisateur, passer des appels au serveur ou faire tout ce qui doit être fait en réponse à l'action de l'utilisateur. Nous ajoutons un écouteur d'événement en utilisant [addEventListener](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener), et en fournissant une fonction à exécuter. + +> **REMARQUE:** Il convient de souligner qu'il existe de nombreuses façons de créer des écouteurs d'événement. Vous pouvez utiliser des fonctions anonymes ou en créer des nommées. Vous pouvez utiliser divers raccourcis, comme définir la propriété `click` ou utiliser `addEventListener`. Dans notre exercice, nous allons nous concentrer sur `addEventLister` et les fonctions anonymes, car c'est probablement la technique la plus couramment utilisée par les développeurs Web. C'est aussi le plus flexible, car `addEventListener` fonctionne pour tous les événements et le nom de l'événement peut être fourni en tant que paramètre. + +### Les événements courants + +Il y a [des dizaines d'événements](https://developer.mozilla.org/docs/Web/Events) que vous pouvez écouter lors de la création d'une application. Fondamentalement, tout ce qu'un utilisateur fait sur une page déclenche un événement, ce qui vous donne beaucoup de pouvoir pour vous assurer qu'il obtient l'expérience que vous désirez. Heureusement, vous n'aurez normalement besoin que d'une petite poignée d'événements. En voici quelques-uns courants (y compris les deux que nous utiliserons lors de la création de notre jeu) : + +- [click](https://developer.mozilla.org/docs/Web/API/Element/click_event): L'utilisateur a cliqué sur quelque chose, généralement un bouton ou un lien hypertexte +- [contextmenu](https://developer.mozilla.org/docs/Web/API/Element/contextmenu_event): The user clicked the right mouse button +- [select](https://developer.mozilla.org/docs/Web/API/Element/select_event): +L'utilisateur a surligné du texte +- [input](https://developer.mozilla.org/docs/Web/API/Element/input_event): The user input some text + +## Création du jeu + +Nous allons créer un jeu pour explorer le fonctionnement des événements en JavaScript. Notre jeu va tester la compétence de frappe d'un joueur, qui est l'une des compétences les plus sous-estimées que tous les développeurs devraient avoir. Nous devrions tous nous entraîner à saisir ! Le déroulement général du jeu ressemblera à ceci : + +- Le joueur clique sur le bouton de démarrage et se voit présenter une citation à saisir +- Le joueur tape la citation aussi rapidement qu'il le peut dans une zone de texte + - Au fur et à mesure que chaque mot est complété, le suivant est mis en évidence + - Si le joueur a une faute de frappe, la zone de texte est mise à jour en rouge + - Lorsque le joueur complète la citation, un message de réussite s'affiche avec le temps écoulé + +Développons notre jeu et apprenons-en plus sur les événements ! + +### Structure de fichier + +Nous aurons besoin de trois fichiers au total : **index.html**, **script.js** et **style.css**. Commençons par les mettre en place pour nous faciliter un peu la tâche. + +- Créez un nouveau dossier pour votre travail en ouvrant une console ou une fenêtre de terminal et en exécutant la commande suivante : + +```bash +# Linux ou macOS +mkdir typing-game && cd typing-game + +# Windows +md typing-game && cd typing-game +``` + +- Ouvrez Visual Studio Code + +```bash +code . +``` + +- Ajoutez trois fichiers au dossier dans Visual Studio Code avec les noms suivants: + - index.html + - script.js + - style.css + +## Créer l'interface utilisateur + +Si nous explorons les exigences, nous savons que nous aurons besoin d'une poignée d'éléments sur notre page HTML. C'est un peu comme une recette, où nous avons besoin de quelques ingrédients : + +- Quelque part pour afficher le texte que l'utilisateur doit saisir +- Un endroit pour afficher tous les messages, comme un message de réussite +- Une zone de texte pour la saisie +- Un bouton de démarrage + +Chacun de ceux-ci aura besoin d'identifiants afin que nous puissions travailler avec eux dans notre JavaScript. Nous ajouterons également des références aux fichiers CSS et JavaScript que nous allons créer. + +Créez un nouveau fichier nommé **index.html**. Ajoutez le code HTML suivant: + +```html + + + + Typing game + + + +

Typing game!

+

Practice your typing skills with a quote from Sherlock Holmes. Click **start** to begin!

+

+

+
+ + +
+ + + +``` + +### Lancer l'application + +Il est toujours préférable de développer itérativement pour voir à quoi ressemblent les choses. Lançons notre application. Il existe une merveilleuse extension pour Visual Studio Code appelée [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) qui hébergera votre application localement et actualisera le navigateur chaque fois que vous enregistrez. + +- Installez [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) en suivant le lien et en cliquant sur **Installer** + - Vous serez invité par le navigateur à ouvrir Visual Studio Code, puis par Visual Studio Code pour effectuer l'installation + - Redémarrez Visual Studio Code si vous y êtes invité +- Une fois installé, dans Visual Studio Code, cliquez sur Ctrl-Shift-P (ou Cmd-Shift-P) pour ouvrir la commande pallate +- Tapez **Live Server : Ouvrir avec Live Server** + - Live Server commencera à héberger votre application +- Ouvrez un navigateur et accédez à **https://localhost:5500** +- Vous devriez maintenant voir la page que vous avez créée ! + +Ajoutons quelques fonctionnalités. + +## Ajouter le CSS + +Avec notre HTML créé, ajoutons le CSS pour le style de base. Nous devons mettre en évidence le mot que le joueur doit taper et colorer la zone de texte si ce qu'il a tapé est incorrect. Nous allons le faire avec deux classes. + +Créez un nouveau fichier nommé **style.css** et ajoutez la syntaxe suivante. + +```css +/* A l'intérieur de style.css */ +.highlight { + background-color: yellow; +} + +.error { + background-color: lightcoral; + border: red; +} +``` + +✅ En ce qui concerne CSS, vous pouvez mettre en page votre page comme vous le souhaitez. Prenez un peu de temps et rendez la page plus attrayante : + +- Choisissez une police différente +- Colorier les en-têtes +- Redimensionner les éléments + +## JavaScript + +Avec notre interface utilisateur créée, il est temps de concentrer notre attention sur le JavaScript qui fournira la logique. Nous allons décomposer cela en une poignée d'étapes: + +- [Créer les constantes](#ajouter-les-constantes) +- [Écouteur d'événement pour démarrer le jeu](#ajouter-une-logique-de-démarrage) +- [Écouteur d'événement de saisie](#ajouter-une-logique-de-frappe) + +Mais d'abord, créez un nouveau fichier nommé **script.js**. + +### Ajouter les constantes + +Nous allons avoir besoin de quelques éléments pour nous faciliter la programmation. Encore une fois, comme pour une recette, voici ce dont nous aurons besoin : + +- Tableau avec la liste de toutes les citations +- Tableau vide pour stocker tous les mots de la citation actuelle +- Espace pour stocker l'index du mot que le joueur est en train de taper +- L'heure à laquelle le joueur a cliqué sur démarrer + +Nous allons également vouloir des références aux éléments de l'interface utilisateur : + +- La zone de texte (**typed-value**) +- L'affichage de la citation (**quote**) +- Le message (**message**) + +```javascript +// A l'intérieur de script.js +// toutes nos citations +const quotes = [ + 'When you have eliminated the impossible, whatever remains, however improbable, must be the truth.', + 'There is nothing more deceptive than an obvious fact.', + 'I ought to know by this time that when a fact appears to be opposed to a long train of deductions it invariably proves to be capable of bearing some other interpretation.', + 'I never make exceptions. An exception disproves the rule.', + 'What one man can invent another can discover.', + 'Nothing clears up a case so much as stating it to another person.', + 'Education never ends, Watson. It is a series of lessons, with the greatest for the last.', +]; +// stocker la liste de mots et l'index du mot que le joueur est en train de taper +let words = []; +let wordIndex = 0; +// l'heure de début +let startTime = Date.now(); +// éléments de page +const quoteElement = document.getElementById('quote'); +const messageElement = document.getElementById('message'); +const typedValueElement = document.getElementById('typed-value'); +``` + +✅ Allez-y et ajoutez plus de citations à votre jeu + +> **REMARQUE:** Nous pouvons récupérer les éléments quand nous le voulons dans le code en utilisant `document.getElementById`. Du fait que nous allons nous référer régulièrement à ces éléments, nous allons éviter les fautes de frappe avec les littéraux de chaîne en utilisant des constantes. Des frameworks tels que [Vue.js](https://vuejs.org/) ou [React](https://reactjs.org/) peuvent vous aider à mieux gérer la centralisation de votre code. + +Prenez une minute pour regarder une vidéo sur l'utilisation de `const`, `let` et `var` + +[![Types de variables](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Types de variables") + +> 🎥 Cliquez sur l'image ci-dessus pour une vidéo sur les variables. + +### Ajouter une logique de démarrage + +Pour commencer le jeu, le joueur cliquera sur démarrer. Bien sûr, nous ne savons pas quand ils vont cliquer sur Démarrer. C'est là qu'un [écouteur d'événement](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener) entre en jeu. Un écouteur d'événement nous permettra d'écouter si quelque chose se produit (un événement) et d'exécuter du code en réponse. Dans notre cas, nous voulons exécuter du code lorsque l'utilisateur clique sur démarrer. + +Lorsque l'utilisateur clique sur **démarrer**, nous devons sélectionner un devis, configurer l'interface utilisateur et configurer le suivi pour le mot et la synchronisation actuels. Vous trouverez ci-dessous le JavaScript que vous devrez ajouter ; nous en discutons juste après le bloc de script. + +```javascript +// à la fin de script.js +document.getElementById('start').addEventListener('click', () => { + // obtenir une citation + const quoteIndex = Math.floor(Math.random() * quotes.length); + const quote = quotes[quoteIndex]; + // Mettre la citation dans un tableau de mots + words = quote.split(' '); + // réinitialiser l'index des mots pour le suivi + wordIndex = 0; + + // Mises à jour de l'interface utilisateur + // Crée un tableau d'éléments "span" afin que nous puissions définir une classe + const spanWords = words.map(function(word) { return `${word} `}); + // Convertir en chaîne et définir comme innerHTML sur l'affichage de la citation + quoteElement.innerHTML = spanWords.join(''); + // Met en surbrillance le premier mot + quoteElement.childNodes[0].className = 'highlight'; + // Effacer tous les messages précédents + messageElement.innerText = ''; + + // Configurer la zone de texte + // Efface la zone de texte + typedValueElement.value = ''; + // définie le focus + typedValueElement.focus(); + // définir le gestionnaire d'événements + + // Lancer le chronomètre + startTime = new Date().getTime(); +}); +``` + +Décomposons le code ! + +- Configurer le suivi des mots + - L'utilisation de [Math.floor](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/floor) et [Math.random](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/random) nous permet de sélectionner au hasard une citation dans le tableau `quotes` + - Nous convertissons la `quote` en un tableau de `words` afin que nous puissions suivre le mot que le joueur est en train de taper + - `wordIndex` est mis à 0, puisque le lecteur commencera sur le premier mot +- Configurer l'interface utilisateur + - Créez un tableau de `spanWords`, qui contient chaque mot à l'intérieur d'un élément `span` + - Cela nous permettra de mettre en évidence le mot sur l'écran + - Il `join` (rejoins) le tableau pour créer une chaîne que nous pouvons utiliser pour mettre à jour le `innerHTML` sur `quoteElement` + - Cela affichera la citation au joueur + - Définissez le `className` du premier élément `span` sur `highlight` pour le mettre en surbrillance en jaune + - Vider le `messageElement` en définissant `innerText` sur `''` +- Configurer la zone de texte + - Effacer la `value` actuelle sur `typedValueElement` + - Définir `focus` sur `typedValueElement` +- Démarrez le chronomètre en appelant `getTime` + +### Ajouter une logique de saisie + +Au fur et à mesure que le joueur tape, un événement d'`input` sera déclenché. Cet écouteur d'événement vérifiera que le joueur tape correctement le mot et gérera l'état actuel du jeu. De retour à **script.js**, ajoutez le code suivant à la fin. Nous le décomposerons par la suite. + +```javascript +// at the end of script.js +typedValueElement.addEventListener('input', () => { + // Obtenir le mot actuel + const currentWord = words[wordIndex]; + // obtenir la valeur actuelle + const typedValue = typedValueElement.value; + + if (typedValue === currentWord && wordIndex === words.length - 1) { + // fin de phrase + // Afficher le succès + const elapsedTime = new Date().getTime() - startTime; + const message = `CONGRATULATIONS! You finished in ${elapsedTime / 1000} seconds.`; + messageElement.innerText = message; + } else if (typedValue.endsWith(' ') && typedValue.trim() === currentWord) { + // fin de mot + // efface le typedValueElement pour le nouveau mot + typedValueElement.value = ''; + // passer au mot suivant + wordIndex++; + // réinitialiser le nom de classe pour tous les éléments entre guillemets + for (const wordElement of quoteElement.childNodes) { + wordElement.className = ''; + } + // mettre en évidence le nouveau mot + quoteElement.childNodes[wordIndex].className = 'highlight'; + } else if (currentWord.startsWith(typedValue)) { + // actuellement correct + // surligner le mot suivant + typedValueElement.className = ''; + } else { + // état d'erreur + typedValueElement.className = 'error'; + } +}); +``` + +Décomposons le code ! Nous commençons par saisir le mot actuel et la valeur que le joueur a tapée jusqu'à présent. Ensuite, nous avons une logique en cascade, où nous vérifions si la citation est complète, le mot est complet, le mot est correct ou (enfin) s'il y a une erreur. + +- La citation est complète, indiquée par `typedValue` étant égal à `currentWord`, et `wordIndex` étant égal à un de moins que la `length` de `words` + - Calculez `elapsedTime` en soustrayant `startTime` de l'heure actuelle + - Divisez `elapsedTime` par 1 000 pour convertir des millisecondes en secondes + - Afficher un message de succès +- Le mot est complet, indiqué par `typedValue` se terminant par un espace (la fin d'un mot) et `typedValue` étant égal à `currentWord` + - Définissez `value` de `typedElement` sur `''` pour permettre la saisie du mot suivant + - Incrémentez `wordIndex` pour passer au mot suivant + - Parcourez tous les `childNodes` de `quoteElement` pour définir `className` à `''` pour revenir à l'affichage par défaut + - Définissez le `className` du mot actuel sur `highlight` pour le marquer comme le prochain mot à taper +- Le mot est actuellement tapé correctement (mais pas complet), indiqué par `currentWord` commencé par `typedValue` + - Assurez-vous que `typedValueElement` est affiché par défaut en effaçant `className` +- Si nous sommes arrivés jusqu'ici, nous avons une erreur + - Définissez `className` de `typedValueElement` à `error` + +## Testez votre application + +Vous êtes allé jusqu'au bout ! La dernière étape consiste à s'assurer que notre application fonctionne. Essayez la! Ne vous inquiétez pas s'il y a des erreurs ; **tous les développeurs** ont des erreurs. Examinez les messages et déboguez si nécessaire. + +Cliquez sur **start** et commencez à taper ! Cela devrait ressembler un peu à l'animation que nous avons vue auparavant. + +![Animation du jeu en action](../../../4-typing-game/images/demo.gif) + +--- + +## 🚀 Challenge + +Ajouter plus de fonctionnalités + +- Désactivez l'écouteur d'événement `input` à la fin et réactivez-le lorsque le bouton est cliqué +- Désactivez la zone de texte lorsque le joueur termine la citation +- Afficher une boîte de dialogue modale avec le message de réussite +- Stockez les meilleurs scores à l'aide de [localStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage) + +## Quiz de validation des connaissances + +[Quiz de validation des connaissances](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/22?loc=fr) + +## Révision et étude personnelle + +Renseignez-vous sur [tous les événements disponibles](https://developer.mozilla.org/docs/Web/Events) pour le développeur via le navigateur Web et réfléchissez aux scénarios dans lesquels vous utiliseriez chacun. + +## Affectation + +[Créer un nouveau jeu de clavier](assignment.fr.md) diff --git a/4-typing-game/typing-game/translations/README.hi.md b/4-typing-game/typing-game/translations/README.hi.md index efc527ca..952849c1 100644 --- a/4-typing-game/typing-game/translations/README.hi.md +++ b/4-typing-game/typing-game/translations/README.hi.md @@ -2,7 +2,7 @@ ## पूर्व व्याख्यान प्रश्नोत्तरी -[पूर्व व्याख्यान प्रश्नोत्तरी](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/21?loc=hi) +[पूर्व व्याख्यान प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/21?loc=hi) ## इवेंट संचालित प्रोग्रामिंग @@ -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): उपयोगकर्ता कुछ टेक्स्ट इनपुट करता है ## खेल का निर्माण @@ -328,11 +328,11 @@ typedValueElement.addEventListener('input', () => { ## व्याख्यान उपरांत प्रश्नोत्तरी -[व्याख्यान उपरांत प्रश्नोत्तरी](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/22?loc=hi) +[व्याख्यान उपरांत प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/22?loc=hi) ## समीक्षा और स्व अध्ययन -वेब ब्राउज़र के माध्यम से डेवलपर के लिए [उपलब्ध सभी घटनाओं](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.it.md b/4-typing-game/typing-game/translations/README.it.md index 23a60d1e..975a0703 100644 --- a/4-typing-game/typing-game/translations/README.it.md +++ b/4-typing-game/typing-game/translations/README.it.md @@ -2,7 +2,7 @@ ## Quiz Pre-Lezione -[Quiz Pre-Lezione](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/21?loc=it) +[Quiz Pre-Lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/21?loc=it) ## Programmazione guidata dagli eventi @@ -328,7 +328,7 @@ Aggiungere più funzionalità ## Quiz Post-Lezione -[Quiz post-lezione](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/22?loc=it) +[Quiz post-lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/22?loc=it) ## Revisione e Auto Apprendimento diff --git a/4-typing-game/typing-game/translations/README.ja.md b/4-typing-game/typing-game/translations/README.ja.md index 64b3cafe..5c22e842 100644 --- a/4-typing-game/typing-game/translations/README.ja.md +++ b/4-typing-game/typing-game/translations/README.ja.md @@ -2,7 +2,7 @@ ## レッスン前の小テスト -[レッスン前の小テスト](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/21?loc=ja) +[レッスン前の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/21?loc=ja) ## イベント駆動型プログラミング @@ -326,7 +326,7 @@ typedValueElement.addEventListener('input', () => { ## レッスン後の小テスト -[レッスン後の小テスト](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/22?loc=ja) +[レッスン後の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/22?loc=ja) ## 復習と自己学習 diff --git a/4-typing-game/typing-game/translations/README.ko.md b/4-typing-game/typing-game/translations/README.ko.md index a862d6e4..bf320bdf 100644 --- a/4-typing-game/typing-game/translations/README.ko.md +++ b/4-typing-game/typing-game/translations/README.ko.md @@ -2,7 +2,7 @@ ## 강의 전 퀴즈 -[Pre-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/21?loc=ko) +[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/21?loc=ko) ## 이벤트 기반 프로그래밍 @@ -327,7 +327,7 @@ typedValueElement.addEventListener('input', () => { ## 강의 후 퀴즈 -[Post-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/22?loc=ko) +[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/22?loc=ko) ## 리뷰 & 자기주도 학습 diff --git a/4-typing-game/typing-game/translations/README.ms.md b/4-typing-game/typing-game/translations/README.ms.md index 2947b75f..21b3fa40 100644 --- a/4-typing-game/typing-game/translations/README.ms.md +++ b/4-typing-game/typing-game/translations/README.ms.md @@ -2,7 +2,7 @@ ## Kuiz Pra Kuliah -[Kuiz Pra Kuliah](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/21) +[Kuiz Pra Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/21) ## Pengaturcaraan berdasarkan acara @@ -328,7 +328,7 @@ Tambahkan lebih banyak fungsi ## Kuiz Pasca Kuliah -[Kuiz Pasca Kuliah](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/22) +[Kuiz Pasca Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/22) ## Mengkaji & Belajar Sendiri 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..c1d06207 100644 --- a/4-typing-game/typing-game/translations/README.zh-tw.md +++ b/4-typing-game/typing-game/translations/README.zh-tw.md @@ -2,7 +2,7 @@ ## 課前測驗 -[課前測驗](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/21?loc=zh_tw) +[課前測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/21?loc=zh_tw) ## 事件驅動程式設計 @@ -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)： 使用者輸入文字。 ## 建立遊戲 @@ -328,11 +328,11 @@ typedValueElement.addEventListener('input', () => { ## 課後測驗 -[課後測驗](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/22?loc=zh_tw) +[課後測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/22?loc=zh_tw) ## 複習與自學 -在瀏覽器上閱讀[所有開發者可運用的事件](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/README.md b/5-browser-extension/1-about-browsers/README.md index 52d6d8f7..97b889b1 100644 --- a/5-browser-extension/1-about-browsers/README.md +++ b/5-browser-extension/1-about-browsers/README.md @@ -1,11 +1,11 @@ # Browser Extension Project Part 1: All about Browsers -![Browser sketchnote](/sketchnotes/browser.jpg) +![Browser sketchnote](../../sketchnotes/browser.jpg) > Sketchnote by [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) ## Pre-Lecture Quiz -[Pre-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/23) +[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/23) ### Introduction @@ -150,7 +150,7 @@ Take a look at a browser extension store and install one to your browser. You ca ## Post-Lecture Quiz -[Post-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/24) +[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/24) ## Review & Self Study diff --git a/5-browser-extension/1-about-browsers/translations/README.es.md b/5-browser-extension/1-about-browsers/translations/README.es.md index dac262cf..80d3b883 100644 --- a/5-browser-extension/1-about-browsers/translations/README.es.md +++ b/5-browser-extension/1-about-browsers/translations/README.es.md @@ -3,7 +3,7 @@ ![Browser sketchnote](/sketchnotes/browser.jpg) > Sketchnote de [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) -## [Pre-lecture prueba](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/23) +## [Pre-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/23) ### Introducción: @@ -145,7 +145,7 @@ Felicitaciones, ha dado los primeros pasos para crear una extensión de navegado 🚀Challenge: Eche un vistazo a una tienda de extensiones de navegador e instale una en su navegador. Puede examinar sus archivos de formas interesantes. ¿Qué descubres? -## [Post-lecture prueba](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/24) +## [Post-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/24) ## Revisión y autoestudio diff --git a/5-browser-extension/1-about-browsers/translations/README.fr.md b/5-browser-extension/1-about-browsers/translations/README.fr.md index d6949b8d..583c9b1a 100644 --- a/5-browser-extension/1-about-browsers/translations/README.fr.md +++ b/5-browser-extension/1-about-browsers/translations/README.fr.md @@ -1,11 +1,11 @@ -# Projet d'extension de navigateur Partie 1 : Tout sur les navigateurs +# Projet d'extension de navigateur Partie 1: Tout sur les navigateurs ![Sketchnote sur les navigateurs](/sketchnotes/browser.jpg) > Sketchnote par [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) ## Quiz préalable -[Quiz préalable](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/23?loc=fr) +[Quiz préalable](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/23?loc=fr) ### Introduction @@ -15,11 +15,11 @@ Les extensions de navigateur ajoutent des fonctionnalités supplémentaires à u Dans cette série de leçons, vous apprendrez à créer une extension de navigateur qui fonctionnera sur les navigateurs Chrome, Firefox et Edge. Dans cette partie, vous découvrirez le fonctionnement des navigateurs et vous échafauderez les éléments de l'extension de navigateur. -Mais qu'est-ce qu'un navigateur exactement ? Il s'agit d'une application logicielle qui permet à un utilisateur final d'accéder au contenu d'un serveur et de l'afficher sur des pages web. +Mais qu'est-ce qu'un navigateur exactement? Il s'agit d'une application logicielle qui permet à un utilisateur final d'accéder au contenu d'un serveur et de l'afficher sur des pages web. -✅ Un peu d'histoire : le premier navigateur s'appelait "WorldWideWeb" et a été créé par Sir Timothy Berners-Lee en 1990. +✅ Un peu d'histoire: le premier navigateur s'appelait "WorldWideWeb" et a été créé par Sir Timothy Berners-Lee en 1990. -![Les premiers navigateurs](images/earlybrowsers.jpg) +![Les premiers navigateurs](../images/earlybrowsers.jpg) > Certains des premiers navigateurs, via [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing) Lorsqu'un utilisateur se connecte à l'internet en utilisant une adresse URL (Uniform Resource Locator), généralement en utilisant le protocole de transfert hypertexte via une adresse `http` ou `https`, le navigateur communique avec un serveur web et va chercher une page web. @@ -28,34 +28,34 @@ Lorsqu'un utilisateur se connecte à l'internet en utilisant une adresse URL (Un Les navigateurs ont également la capacité de mettre en cache le contenu afin qu'il ne soit pas nécessaire de le récupérer à chaque fois sur le serveur. Ils peuvent enregistrer l'historique de l'activité de navigation d'un utilisateur, stocker des "cookies", qui sont de petits morceaux de données contenant des informations utilisées pour enregistrer l'activité d'un utilisateur, et plus encore. -Une chose très importante à retenir au sujet des navigateurs est qu'ils ne sont pas tous identiques ! Chaque navigateur a ses forces et ses faiblesses, et un développeur web professionnel doit savoir comment faire en sorte que les pages web fonctionnent bien sur plusieurs navigateurs. Cela inclut la gestion des petites fenêtres d'affichage, comme celles des téléphones portables, ainsi que la gestion des utilisateurs hors ligne. +Une chose très importante à retenir au sujet des navigateurs est qu'ils ne sont pas tous identiques! Chaque navigateur a ses forces et ses faiblesses, et un développeur web professionnel doit savoir comment faire en sorte que les pages web fonctionnent bien sur plusieurs navigateurs. Cela inclut la gestion des petites fenêtres d'affichage, comme celles des téléphones portables, ainsi que la gestion des utilisateurs hors ligne. Le site [caniuse.com](https://www.caniuse.com) est un site Web très utile que vous devriez probablement marquer d'un signet dans le navigateur que vous préférez utiliser. Lorsque vous créez des pages Web, il est très utile d'utiliser les listes de technologies prises en charge de caniuse afin d'aider au mieux vos utilisateurs. -✅ Comment pouvez-vous savoir quels sont les navigateurs les plus populaires parmi les utilisateurs de votre site Web ? Vérifiez vos analyses - vous pouvez installer divers progiciels d'analyse dans le cadre de votre processus de développement web, et ils vous indiqueront quels sont les navigateurs les plus utilisés par les différents navigateurs populaires. +✅ Comment pouvez-vous savoir quels sont les navigateurs les plus populaires parmi les utilisateurs de votre site Web? Vérifiez vos analyses - vous pouvez installer divers progiciels d'analyse dans le cadre de votre processus de développement web, et ils vous indiqueront quels sont les navigateurs les plus utilisés par les différents navigateurs populaires. ## Extensions du navigateur -Pourquoi vouloir créer une extension de navigateur ? Il s'agit d'un élément pratique à joindre à votre navigateur lorsque vous avez besoin d'un accès rapide à des tâches que vous avez tendance à répéter. Par exemple, si vous avez besoin de vérifier les couleurs des différentes pages Web avec lesquelles vous interagissez, vous pouvez installer une extension de navigateur permettant de choisir les couleurs. Si vous avez du mal à vous souvenir des mots de passe, vous pouvez utiliser une extension de navigateur pour la gestion des mots de passe. +Pourquoi vouloir créer une extension de navigateur? Il s'agit d'un élément pratique à joindre à votre navigateur lorsque vous avez besoin d'un accès rapide à des tâches que vous avez tendance à répéter. Par exemple, si vous avez besoin de vérifier les couleurs des différentes pages Web avec lesquelles vous interagissez, vous pouvez installer une extension de navigateur permettant de choisir les couleurs. Si vous avez du mal à vous souvenir des mots de passe, vous pouvez utiliser une extension de navigateur pour la gestion des mots de passe. Les extensions de navigateur sont également agréables à développer. Elles ont tendance à gérer un nombre limité de tâches qu'elles exécutent bien. -✅ Quelles sont vos extensions de navigateur préférées ? Quelles sont les tâches qu'elles accomplissent ? +✅ Quelles sont vos extensions de navigateur préférées? Quelles sont les tâches qu'elles accomplissent? ### Installation des extensions -Avant de commencer à construire, jetez un coup d'œil au processus de construction et de déploiement d'une extension de navigateur. Bien que chaque navigateur varie un peu dans la façon dont il gère cette tâche, le processus est similaire sur Chrome et Firefox à cet exemple sur Edge : +Avant de commencer à construire, jetez un coup d'œil au processus de construction et de déploiement d'une extension de navigateur. Bien que chaque navigateur varie un peu dans la façon dont il gère cette tâche, le processus est similaire sur Chrome et Firefox à cet exemple sur Edge: -![screenshot of the Edge browser showing the open edge://extensions page and open settings menu](images/install-on-edge.png) +![screenshot of the Edge browser showing the open edge://extensions page and open settings menu](../images/install-on-edge.png) -En substance, le processus sera le suivant : +En substance, le processus sera le suivant: - Construisez votre extension en utilisant `npm run build`. - Naviguez dans le navigateur jusqu'au panneau des extensions en utilisant le bouton "Paramètres et plus" (l'icône `...`) en haut à droite. - s'il s'agit d'une nouvelle installation, choisissez `load unpacked` pour charger une nouvelle extension depuis son dossier de construction (dans notre cas, c'est `/dist`) - ou, cliquez sur `reload` si vous rechargez l'extension déjà installée. -✅ Ces instructions concernent les extensions que vous construisez vous-même ; pour installer des extensions qui ont été publiées dans le magasin d'extension du navigateur associé à chaque navigateur, vous devez vous rendre dans ces [magasins](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home) et installer l'extension de votre choix. +✅ Ces instructions concernent les extensions que vous construisez vous-même; pour installer des extensions qui ont été publiées dans le magasin d'extension du navigateur associé à chaque navigateur, vous devez vous rendre dans ces [magasins](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home) et installer l'extension de votre choix. ### Commencer @@ -64,14 +64,14 @@ l'API de CO2 Signal. **Vous avez besoin de:** -- [une clé API](https://www.co2signal.com/) ; saisissez votre adresse électronique dans le champ de cette page et une clé vous sera envoyée. +- [une clé API](https://www.co2signal.com/); saisissez votre adresse électronique dans le champ de cette page et une clé vous sera envoyée. - le [code pour votre région](http://api.electricitymap.org/v3/zones) correspondant à la [carte de l'électricité](https://www.electricitymap.org/map) (à Boston, par exemple, j'utilise 'US-NEISO'). -- le [code de démarrage](../start). Téléchargez le dossier `start` ; vous allez compléter le code dans ce dossier. -- [NPM](https://www.npmjs.com) - NPM est un outil de gestion de paquets ; installez-le localement et les paquets listés dans votre fichier `package.json` seront installés pour être utilisés par votre ressource web. +- le [code de démarrage](../../start). Téléchargez le dossier `start`; vous allez compléter le code dans ce dossier. +- [NPM](https://www.npmjs.com) - NPM est un outil de gestion de paquets; installez-le localement et les paquets listés dans votre fichier `package.json` seront installés pour être utilisés par votre ressource web. ✅ Apprenez-en plus sur la gestion des paquets dans cet [excellent module d'apprentissage](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-13441-cxa) -Prenez une minute pour parcourir la base de code : +Prenez une minute pour parcourir la base de code: dist -|manifest.json (les valeurs par défaut sont définies ici) @@ -85,17 +85,17 @@ src ### Construire le HTML pour l'extension -Cette extension a deux vues. L'une pour recueillir la clé API et le code de région : +Cette extension a deux vues. L'une pour recueillir la clé API et le code de région: -![capture d'écran de l'extension terminée ouverte dans un navigateur, affichant un formulaire avec des entrées pour le nom de la région et la clé API](images/1.png) +![capture d'écran de l'extension terminée ouverte dans un navigateur, affichant un formulaire avec des entrées pour le nom de la région et la clé API](../images/1.png) -Et le second pour afficher la consommation de carbone de la région : +Et le second pour afficher la consommation de carbone de la région: -![capture d'écran de l'extension terminée affichant les valeurs d'utilisation du carbone et le pourcentage de combustibles fossiles pour la région US-NEISO](images/2.png) +![capture d'écran de l'extension terminée affichant les valeurs d'utilisation du carbone et le pourcentage de combustibles fossiles pour la région US-NEISO](../images/2.png) Commençons par construire le HTML du formulaire et le styliser avec le CSS. -Dans le dossier `/dist`, vous allez construire un formulaire et une zone de résultat. Dans le fichier `index.html`, remplissez la zone de formulaire délimitée : +Dans le dossier `/dist`, vous allez construire un formulaire et une zone de résultat. Dans le fichier `index.html`, remplissez la zone de formulaire délimitée: ```HTML
@@ -115,7 +115,7 @@ Dans le dossier `/dist`, vous allez construire un formulaire et une zone de rés ``` Il s'agit du formulaire où vos informations enregistrées seront saisies et sauvegardées dans le stockage local. -Ensuite, créez la zone de résultats ; sous la balise de formulaire finale, ajoutez quelques divs : +Ensuite, créez la zone de résultats; sous la balise de formulaire finale, ajoutez quelques divs: ```HTML
@@ -130,7 +130,7 @@ Ensuite, créez la zone de résultats ; sous la balise de formulaire finale, ajo
``` -À ce stade, vous pouvez essayer une construction. Assurez-vous d'installer les dépendances du paquet de cette extension : +À ce stade, vous pouvez essayer une construction. Assurez-vous d'installer les dépendances du paquet de cette extension: ``` npm install @@ -146,15 +146,15 @@ Félicitations, vous avez franchi les premières étapes de la création d'une e ## 🚀 Défi -Jetez un coup d'œil à un magasin d'extensions de navigateur et installez-en une dans votre navigateur. Vous pouvez examiner ses fichiers de manière intéressante. Que découvrez-vous ? +Jetez un coup d'œil à un magasin d'extensions de navigateur et installez-en une dans votre navigateur. Vous pouvez examiner ses fichiers de manière intéressante. Que découvrez-vous? ## Quiz de validation des connaissances -[Quiz de validation des connaissances](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/24?loc=fr) +[Quiz de validation des connaissances](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/24?loc=fr) ## Révision et étude personnelle -Dans cette leçon, vous en avez appris un peu plus sur l'histoire du navigateur Web; profitez-en pour découvrir comment les inventeurs du World Wide Web envisageaient son utilisation en lisant d'autres documents sur son histoire. Voici quelques sites utiles : +Dans cette leçon, vous en avez appris un peu plus sur l'histoire du navigateur Web; profitez-en pour découvrir comment les inventeurs du World Wide Web envisageaient son utilisation en lisant d'autres documents sur son histoire. Voici quelques sites utiles: [L'histoire des navigateurs Web](https://www.mozilla.org/firefox/browsers/browser-history/) @@ -164,5 +164,5 @@ Dans cette leçon, vous en avez appris un peu plus sur l'histoire du navigateur ## Affectation -[Restylez votre extension](assignment.md) +[Restylez votre extension](assignment.fr.md) diff --git a/5-browser-extension/1-about-browsers/translations/README.hi.md b/5-browser-extension/1-about-browsers/translations/README.hi.md index 1a97c39f..7633cb36 100644 --- a/5-browser-extension/1-about-browsers/translations/README.hi.md +++ b/5-browser-extension/1-about-browsers/translations/README.hi.md @@ -5,7 +5,7 @@ ## पूर्व व्याख्यान प्रश्नोत्तरी -[पूर्व व्याख्यान प्रश्नोत्तरी](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/23?loc=hi) +[पूर्व व्याख्यान प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/23?loc=hi) ### परिचय @@ -150,7 +150,7 @@ npm install ## व्याख्यान उपरांत प्रश्नोत्तरी -[व्याख्यान उपरांत प्रश्नोत्तरी](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/24?loc=hi) +[व्याख्यान उपरांत प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/24?loc=hi) ## समीक्षा और स्व अध्ययन diff --git a/5-browser-extension/1-about-browsers/translations/README.it.md b/5-browser-extension/1-about-browsers/translations/README.it.md index c06f86f0..834f1226 100644 --- a/5-browser-extension/1-about-browsers/translations/README.it.md +++ b/5-browser-extension/1-about-browsers/translations/README.it.md @@ -5,7 +5,7 @@ ## Quiz Pre-Lezione -[Quiz Pre-Lezione](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/23?loc=it) +[Quiz Pre-Lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/23?loc=it) ### Introduzione @@ -152,7 +152,7 @@ Si dia un'occhiata alle estensioni del browser in uno store e se ne installi una ## Quiz Post-Lezione -[Quiz post-lezione](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/24?loc=it) +[Quiz post-lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/24?loc=it) ## Revisione e Auto Apprendimento diff --git a/5-browser-extension/1-about-browsers/translations/README.ja.md b/5-browser-extension/1-about-browsers/translations/README.ja.md index 849edfd4..d7041e48 100644 --- a/5-browser-extension/1-about-browsers/translations/README.ja.md +++ b/5-browser-extension/1-about-browsers/translations/README.ja.md @@ -5,7 +5,7 @@ ## レッスン前の小テスト -[レッスン前の小テスト](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/23?loc=ja) +[レッスン前の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/23?loc=ja) ### イントロダクション @@ -149,7 +149,7 @@ npm install ## レッスン後の小テスト -[レッスン後の小テスト](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/24?loc=ja) +[レッスン後の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/24?loc=ja) ## 復習と自己学習 diff --git a/5-browser-extension/1-about-browsers/translations/README.ko.md b/5-browser-extension/1-about-browsers/translations/README.ko.md index 2a148c98..04f1a254 100644 --- a/5-browser-extension/1-about-browsers/translations/README.ko.md +++ b/5-browser-extension/1-about-browsers/translations/README.ko.md @@ -5,7 +5,7 @@ ## 강의 전 퀴즈 -[Pre-lecture quiz][Pre-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/23?loc=ko) +[Pre-lecture quiz][Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/23?loc=ko) ### 소개 @@ -149,7 +149,7 @@ npm install ## 강의 후 퀴즈 -[Post-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/24?loc=ko) +[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/24?loc=ko) ## 리뷰 & 자기주도 학습 diff --git a/5-browser-extension/1-about-browsers/translations/README.ms.md b/5-browser-extension/1-about-browsers/translations/README.ms.md index 69065616..caddf813 100644 --- a/5-browser-extension/1-about-browsers/translations/README.ms.md +++ b/5-browser-extension/1-about-browsers/translations/README.ms.md @@ -5,7 +5,7 @@ ## Kuiz Pra Kuliah -[Kuiz Pra Kuliah](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/23) +[Kuiz Pra Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/23) ### Pengenalan @@ -150,7 +150,7 @@ Lihatlah kedai pelanjutan penyemak imbas dan pasang satu di penyemak imbas anda. ## Kuiz Pasca Kuliah -[Kuiz Pasca Kuliah](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/24) +[Kuiz Pasca Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/24) ## Mengkaji dan Belajar Sendiri diff --git a/5-browser-extension/1-about-browsers/translations/README.pt.md b/5-browser-extension/1-about-browsers/translations/README.pt.md index bd7baff5..ec94ac4f 100644 --- a/5-browser-extension/1-about-browsers/translations/README.pt.md +++ b/5-browser-extension/1-about-browsers/translations/README.pt.md @@ -4,7 +4,7 @@ > Esboço de [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) ## Leitura pré-quiz -[Leitura pré-quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/23) +[Leitura pré-quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/23) ### Introdução: @@ -150,7 +150,7 @@ Parabéns, você deu os primeiros passos para criar uma extensão de navegador. Dê uma olhada em uma loja de extensões de navegador e instale uma em seu navegador. Você pode examinar seus arquivos de maneiras interessantes. O que você descobriu? ## Quiz pós-leitura -[Quiz pós-leitura](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/24) +[Quiz pós-leitura](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/24) ## Revisão e auto-estudo 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..57d13c5c 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 @@ -5,7 +5,7 @@ ## 課前測驗 -[課前測驗](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/23?loc=zh_tw) +[課前測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/23?loc=zh_tw) ### 大綱 @@ -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)中，學習更多關於軟體包管理。 花點時間看一下程式檔案結構 @@ -149,13 +149,13 @@ npm install ## 課後測驗 -[課後測驗](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/24?loc=zh_tw) +[課後測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/24?loc=zh_tw) ## 複習與自學 這堂課中你學到了一些瀏覽器的歷史。趁這個機會閱讀更多它的歷史，學習網際網路的發明者是如何構思網路的應用。這邊有一些實用的網頁： -[瀏覽器的歷史](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/README.md b/5-browser-extension/2-forms-browsers-local-storage/README.md index ef375ca7..d1ae4ff2 100644 --- a/5-browser-extension/2-forms-browsers-local-storage/README.md +++ b/5-browser-extension/2-forms-browsers-local-storage/README.md @@ -2,7 +2,7 @@ ## Pre-Lecture Quiz -[Pre-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/25) +[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/25) ### Introduction @@ -195,12 +195,12 @@ async function displayCarbonUsage(apiKey, region) { This is a big function. What's going on here? -- following best practices, you use an `async` keyword to make this function behave asyncronously. The function contains a `try/catch` block as it will return a promise when the API returns data. Because you don't have control over the speed that the API will respond (it may not respond at all!), you need to handle this uncertainty by call it asyncronously. +- following best practices, you use an `async` keyword to make this function behave asynchronously. The function contains a `try/catch` block as it will return a promise when the API returns data. Because you don't have control over the speed that the API will respond (it may not respond at all!), you need to handle this uncertainty by call it asynchronously. - you're querying the co2signal API to get your region's data, using your API Key. To use that key, you have to use a type of authentication in your header parameters. - once the API responds, you assign various elements of its response data to the parts of your screen you set up to show this data. - if there's an error, or if there is no result, you show an error message. -✅ Using asyncronous programming patterns is another very useful tool in your toolbox. Read [about the various ways](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) you can configure this type of code. +✅ Using asynchronous programming patterns is another very useful tool in your toolbox. Read [about the various ways](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) you can configure this type of code. Congratulations! If you build your extension (`npm run build`) and refresh it in your extensions pane, you have a working extension! The only thing that isn't working is the icon, and you'll fix that in the next lesson. @@ -212,7 +212,7 @@ We've discussed several types of API so far in these lessons. Choose a web API a ## Post-Lecture Quiz -[Post-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/26) +[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/26) ## Review & Self Study diff --git a/5-browser-extension/2-forms-browsers-local-storage/translations/README.es.md b/5-browser-extension/2-forms-browsers-local-storage/translations/README.es.md index 41e84e23..9a8617f0 100644 --- a/5-browser-extension/2-forms-browsers-local-storage/translations/README.es.md +++ b/5-browser-extension/2-forms-browsers-local-storage/translations/README.es.md @@ -1,6 +1,6 @@ # Proyecto de extensión del navegador, parte 2: llamar a una API, usar almacenamiento local -## [Pre-lecture prueba](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/25) +## [Pre-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/25) ### Introducción: @@ -99,7 +99,7 @@ Antes de continuar, es útil conocer un concepto muy importante disponible en lo Configura su APIKey para que tenga un valor de cadena, por ejemplo, y puede ver que está configurado en Edge "inspeccionando" una página web (puede hacer clic con el botón derecho en un navegador para inspeccionar) y yendo a la pestaña Aplicaciones para ver el almacenamiento. -![Panel de almacenamiento local](images/localstorage.png) +![Panel de almacenamiento local](../images/localstorage.png) ✅ Piense en situaciones en las que NO le gustaría almacenar algunos datos en LocalStorage. En general, colocar claves API en LocalStorage es una mala idea. ¿Puedes ver por qué? En nuestro caso, dado que nuestra aplicación es puramente para aprender y no se implementará en una tienda de aplicaciones, usaremos este método. @@ -195,6 +195,8 @@ Esta es una gran función. ¿Que está pasando aqui? ✅ El uso de patrones de programación asíncronos es otra herramienta muy útil en su caja de herramientas. Lea [acerca de las diversas formas](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) puede configurar este tipo de código. +[![Async and Await for managing promises](https://img.youtube.com/vi/4yJUTjtIlww/0.jpg)](https://youtube.com/watch?v=4yJUTjtIlww "Async and Await for managing promises") + ¡Felicidades! Si construye su extensión (`npm run build`) y la actualiza en su panel de extensiones, ¡tiene una extensión que funciona! Lo único que no funciona es el ícono, y lo solucionará en la próxima lección. --- @@ -202,7 +204,7 @@ Esta es una gran función. ¿Que está pasando aqui? 🚀 Desafío: hemos discutido varios tipos de API hasta ahora en estas lecciones. Elija una API web e investigue en profundidad lo que ofrece. Por ejemplo, eche un vistazo a las API disponibles en los navegadores, como la [API HTML de arrastrar y soltar](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API). En tu opinión, ¿qué hace que una API sea excelente? -## [Post-lecture prueba](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/26) +## [Post-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/26) ## Revisión y autoestudio diff --git a/5-browser-extension/2-forms-browsers-local-storage/translations/README.fr.md b/5-browser-extension/2-forms-browsers-local-storage/translations/README.fr.md new file mode 100644 index 00000000..5a41de20 --- /dev/null +++ b/5-browser-extension/2-forms-browsers-local-storage/translations/README.fr.md @@ -0,0 +1,224 @@ +# Projet d'extension de navigateur Partie 2: Appeler une API, utiliser le stockage local + +## Quiz préalable + +[Quiz préalable](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/25?loc=fr) + +### Introduction + +Dans cette leçon, vous allez appeler une API en soumettant le formulaire de votre extension de navigateur et afficher les résultats dans votre extension. De plus, vous apprendrez comment vous pouvez stocker des données dans le stockage local de votre navigateur pour des références et utilisations futures. + +✅ Suivez les segments numérotés dans les fichiers appropriés pour savoir où placer votre code + +### Paramétrez les éléments à manipuler dans l'extension : + +À ce stade, vous avez créé le code HTML pour le formulaire et les résultats `
` pour l'extension de votre navigateur. A partir de maintenant, vous devrez travailler dans le fichier `/src/index.js` et construire votre extension au fur et à mesure. Reportez-vous à la [leçon précédente](../../1-about-browsers/translations/README.fr.md) sur la configuration de votre projet et sur le processus de génération. + +En travaillant dans votre fichier `index.js`, commencez par créer des variables `const` pour contenir les valeurs associées aux différents champs: + +```JavaScript +// champs de formulaire +const form = document.querySelector('.form-data'); +const region = document.querySelector('.region-name'); +const apiKey = document.querySelector('.api-key'); + +// résultats +const errors = document.querySelector('.errors'); +const loading = document.querySelector('.loading'); +const results = document.querySelector('.result-container'); +const usage = document.querySelector('.carbon-usage'); +const fossilfuel = document.querySelector('.fossil-fuel'); +const myregion = document.querySelector('.my-region'); +const clearBtn = document.querySelector('.clear-btn'); +``` + +Tous ces champs sont référencés par leur classe CSS, comme vous l'avez configuré dans le code HTML de la leçon précédente. + +### Ajouter des écouteurs + +Ensuite, ajoutez des écouteurs d'événement au formulaire et le bouton d'effacement qui réinitialise le formulaire, de sorte que si un utilisateur soumet le formulaire ou clique sur ce bouton de réinitialisation, quelque chose se passe, et ajoutez l'appel pour initialiser l'application au bas du fichier: + +```JavaScript +form.addEventListener('submit', (e) => handleSubmit(e)); +clearBtn.addEventListener('click', (e) => reset(e)); +init(); +``` + +✅ Notez le raccourci utilisé pour écouter un événement de soumission ou de clic, et comment l'événement est transmis aux fonctions handleSubmit ou reset. Pouvez-vous écrire l'équivalent de ce raccourci dans un format plus long ? Lequel préfèrez-vous? + +### Construisez la fonction init() et la fonction reset(): + +Vous allez maintenant construire la fonction qui initialise l'extension, qui s'appelle init(): + +```JavaScript +function init() { + //si quelque chose est dans localStorage, choisissez-lep + const storedApiKey = localStorage.getItem('apiKey'); + const storedRegion = localStorage.getItem('regionName'); + + //définir l'icône pour qu'elle soit verte générique + //à faire + + if (storedApiKey === null || storedRegion === null) { + //si nous n'avons pas les clés, montrez le formulaire + form.style.display = 'block'; + results.style.display = 'none'; + loading.style.display = 'none'; + clearBtn.style.display = 'none'; + errors.textContent = ''; + } else { + //si nous avons enregistré des clés/régions dans localStorage, afficher les résultats lorsqu'ils se chargent + displayCarbonUsage(storedApiKey, storedRegion); + results.style.display = 'none'; + form.style.display = 'none'; + clearBtn.style.display = 'block'; + } +}; + +function reset(e) { + e.preventDefault(); + //effacer le stockage local pour la région uniquement + localStorage.removeItem('regionName'); + init(); +} + +``` +Dans cette fonction, il y a une logique intéressante. En le lisant, pouvez-vous voir ce qui se passe? + +- deux `const` sont configurés pour vérifier si l'utilisateur a stocké une APIKey et un code de région dans le stockage local. +- si l'un de ceux-ci est nul, affiche le formulaire en changeant son style pour qu'il s'affiche en tant que 'block' +- masquer les résultats, le chargement et clearBtn et définir tout texte d'erreur sur une chaîne vide +- s'il existe une clé et une région, lancer une routine pour: + - appeler l'API pour obtenir les données d'utilisation du carbone + - masquer la zone de résultats + - masquer le formulaire + - afficher le bouton de réinitialisation + +Avant de continuer, il est utile de se renseigner sur un concept très important disponible dans les navigateurs: [LocalStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage). LocalStorage est un moyen utile de stocker des chaînes dans le navigateur en tant que paire `key-value`. Ce type de stockage Web peut être manipulé par JavaScript pour gérer les données dans le navigateur. LocalStorage n'expire pas, tandis que SessionStorage, un autre type de stockage Web, est effacé lorsque le navigateur est fermé. Les différents types de stockage ont des avantages et des inconvénients à leur utilisation. + +> Remarque - l'extension de votre navigateur dispose de son propre stockage local ; la fenêtre principale du navigateur est une instance différente et se comporte séparément. + +Vous définissez votre APIKey pour qu'elle ait une valeur de chaîne, par exemple, et vous pouvez voir qu'elle est définie sur Edge en "inspectant" une page Web (vous pouvez cliquer avec le bouton droit sur un navigateur pour inspecter) et en accédant à l'onglet Applications pour voir le espace de rangement. + +![Volet de stockage local](../images/localstorage.png) + +✅ Pensez aux situations dans lesquelles vous ne voudriez PAS stocker certaines données dans LocalStorage. En général, placer des clés API dans LocalStorage est une mauvaise idée ! Pouvez-vous voir pourquoi? Dans notre cas, étant donné que notre application est purement destinée à l'apprentissage et ne sera pas déployée dans un magasin d'applications, nous utiliserons cette méthode. + +Notez que vous utilisez l'API Web pour manipuler LocalStorage, soit en utilisant `getItem()`, `setItem()` ou `removeItem()`. Il est largement pris en charge sur tous les navigateurs. + +Avant de développer la fonction `displayCarbonUsage()` qui est appelée dans `init()`, définissons la fonctionnalité pour gérer la soumission initiale du formulaire. + +### Gérer la soumission du formulaire + +Créez une fonction appelée `handleSubmit` qui accepte un argument d'événement `(e)`. Arrêtez la propagation de l'événement (dans ce cas, nous voulons arrêter le rafraîchissement du navigateur) et appelez une nouvelle fonction, `setUpUser`, en passant les arguments `apiKey.value` et `region.value`. De cette façon, vous utilisez les deux valeurs qui sont apportées via le formulaire initial lorsque les champs appropriés sont remplis. + +```JavaScript +function handleSubmit(e) { + e.preventDefault(); + setUpUser(apiKey.value, region.value); +} +``` +✅ Rafraîchissez votre mémoire - le HTML que vous avez configuré dans la dernière leçon a deux champs de saisie dont les `values` sont capturées via le `const` que vous avez configuré en haut du fichier, et ils sont tous les deux `required` pour que le navigateur arrête les utilisateurs de la saisie de valeurs nulles. + +### Set up the user + +Moving on to the `setUpUser` function, here is where you set local storage values for apiKey and regionName. Add a new function: + +```JavaScript +function setUpUser(apiKey, regionName) { + localStorage.setItem('apiKey', apiKey); + localStorage.setItem('regionName', regionName); + loading.style.display = 'block'; + errors.textContent = ''; + clearBtn.style.display = 'block'; + //faire un premier appel + displayCarbonUsage(apiKey, regionName); +} +``` +Cette fonction définit un message de chargement à afficher pendant l'appel de l'API. À ce stade, vous êtes arrivé à créer la fonction la plus importante de cette extension de navigateur! + +### Afficher la consommation de carbone + +Il est enfin temps d'interroger l'API ! + +Avant d'aller plus loin, nous devrions discuter des API. Les API, ou [Application Programming Interfaces](https://www.webopedia.com/TERM/A/API.html), sont un élément essentiel de la boîte à outils d'un développeur Web. Ils fournissent des moyens standard pour les programmes d'interagir et d'interagir les uns avec les autres. Par exemple, si vous créez un site Web qui doit interroger une base de données, quelqu'un peut avoir créé une API que vous pouvez utiliser. Bien qu'il existe de nombreux types d'API, l'une des plus populaires est l'[API REST](https://www.smashingmagazine.com/2018/01/understanding-using-rest-api/). + +✅ Le terme 'REST' signifie 'Representational State Transfer' et utilise des URL configurées de différentes manières pour récupérer des données. Faites une petite recherche sur les différents types d'API disponibles pour les développeurs. Quel format vous séduit ? + +Il y a des choses importantes à noter à propos de cette fonction. Remarquez d'abord le [mot-clé `async`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function). L'écriture de vos fonctions pour qu'elles s'exécutent de manière asynchrone signifie qu'elles attendent qu'une action, telle que le retour de données, soit terminée avant de continuer. + +Voici une vidéo rapide sur `async`: + +[![Async et Await pour la gestion des promesses](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "Async et Await pour la gestion des promesses") + +> 🎥 Cliquez sur l'image ci-dessus pour une vidéo sur async/await. + +Créez une nouvelle fonction pour interroger l'API C02Signal: + +```JavaScript +import axios from '../node_modules/axios'; + +async function displayCarbonUsage(apiKey, region) { + try { + await axios + .get('https://api.co2signal.com/v1/latest', { + params: { + countryCode: region, + }, + headers: { + 'auth-token': apiKey, + }, + }) + .then((response) => { + let CO2 = Math.floor(response.data.data.carbonIntensity); + + //calculateColor(CO2); + + loading.style.display = 'none'; + form.style.display = 'none'; + myregion.textContent = region; + usage.textContent = + Math.round(response.data.data.carbonIntensity) + ' grams (grams C02 emitted per kilowatt hour)'; + fossilfuel.textContent = + response.data.data.fossilFuelPercentage.toFixed(2) + + '% (percentage of fossil fuels used to generate electricity)'; + results.style.display = 'block'; + }); + } catch (error) { + console.log(error); + loading.style.display = 'none'; + results.style.display = 'none'; + errors.textContent = 'Sorry, we have no data for the region you have requested.'; + } +} +``` + +C'est une grande fonction. Que se passe t-il ici? + +- en suivant les meilleures pratiques, vous utilisez un mot-clé `async` pour que cette fonction se comporte de manière asynchrone. La fonction contient un bloc `try/catch` car elle renverra une promesse lorsque l'API renverra des données. Étant donné que vous n'avez aucun contrôle sur la vitesse à laquelle l'API répondra (elle peut ne pas répondre du tout!), vous devez gérer cette incertitude en l'appelant de manière asynchrone. +- vous interrogez l'API co2signal pour obtenir les données de votre région, en utilisant votre clé API. Pour utiliser cette clé, vous devez utiliser un type d'authentification dans vos paramètres d'en-tête. +- une fois que l'API a répondu, vous affectez divers éléments de ses données de réponse aux parties de votre écran que vous avez configurées pour afficher ces données. +- s'il y a une erreur, ou s'il n'y a pas de résultat, vous affichez un message d'erreur. + +✅ L'utilisation de modèles de programmation asynchrone est un autre outil très utile dans votre boîte à outils. Lisez les [différentes manières](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) de configurer ce type de code. + +Toutes nos félicitations! Si vous compilez votre extension (`npm run build`) et l'actualisez dans votre volet d'extensions, vous avez une extension qui fonctionne ! La seule chose qui ne fonctionne pas est l'icône, et vous corrigerez cela dans la prochaine leçon. + +--- + +## 🚀 Challenge + +Nous avons discuté de plusieurs types d'API jusqu'à présent dans ces leçons. Choisissez une API Web et recherchez en profondeur ce qu'elle offre. Par exemple, jetez un œil aux API disponibles dans les navigateurs telles que l'[API HTML Drag and Drop](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API). À votre avis, qu'est-ce qui fait une excellente API? + +## Quiz de validation des connaissances + +[Quiz de validation des connaissances](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/26?loc=fr) + +## Révision et étude personnelle + +Vous avez découvert LocalStorage et les API dans cette leçon, tous deux très utiles pour le développeur Web professionnel. Pouvez-vous imaginer comment ces deux choses fonctionnent ensemble ? Réfléchissez à l'architecture d'un site Web qui stockerait des éléments à utiliser par une API. + +## Affectation + +[Adoptez une API](assignment.fr.md) + 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..bb280747 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 @@ -2,7 +2,7 @@ ## पूर्व व्याख्यान प्रश्नोत्तरी -[पूर्व व्याख्यान प्रश्नोत्तरी](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/25?loc=hi) +[पूर्व व्याख्यान प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/25?loc=hi) ### परिचय @@ -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,11 +208,11 @@ 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) जैसे ब्राउज़रों के भीतर उपलब्ध एपीआई पर एक नज़र डालें। आपकी राय में एक महान एपीआई क्या है? ## व्याख्यान उपरांत प्रश्नोत्तरी -[व्याख्यान उपरांत प्रश्नोत्तरी](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/26?loc=hi) +[व्याख्यान उपरांत प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/26?loc=hi) ## समीक्षा और स्व अध्ययन diff --git a/5-browser-extension/2-forms-browsers-local-storage/translations/README.it.md b/5-browser-extension/2-forms-browsers-local-storage/translations/README.it.md index 2d29ac83..60a91731 100644 --- a/5-browser-extension/2-forms-browsers-local-storage/translations/README.it.md +++ b/5-browser-extension/2-forms-browsers-local-storage/translations/README.it.md @@ -2,7 +2,7 @@ ## Quiz Pre-Lezione -[Quiz Pre-Lezione](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/25?loc=it) +[Quiz Pre-Lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/25?loc=it) ### Introduzione @@ -212,7 +212,7 @@ Finora si è discusso sui diversi tipi di API in queste lezioni. Scegliere un'AP ## Quiz Post-Lezione -[Quiz post-lezione](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/26?loc=it) +[Quiz post-lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/26?loc=it) ## Revisione e Auto Apprendimento diff --git a/5-browser-extension/2-forms-browsers-local-storage/translations/README.ja.md b/5-browser-extension/2-forms-browsers-local-storage/translations/README.ja.md index 0229a467..d928c351 100644 --- a/5-browser-extension/2-forms-browsers-local-storage/translations/README.ja.md +++ b/5-browser-extension/2-forms-browsers-local-storage/translations/README.ja.md @@ -2,7 +2,7 @@ ## レッスン前の小テスト -[レッスン前の小テスト](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/25?loc=ja) +[レッスン前の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/25?loc=ja) ### イントロダクション @@ -210,7 +210,7 @@ async function displayCarbonUsage(apiKey, region) { ## レッスン後の小テスト -[レッスン後の小テスト](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/26?loc=ja) +[レッスン後の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/26?loc=ja) ## 復習と自己学習 diff --git a/5-browser-extension/2-forms-browsers-local-storage/translations/README.ko.md b/5-browser-extension/2-forms-browsers-local-storage/translations/README.ko.md index 2520b3e4..d7127cca 100644 --- a/5-browser-extension/2-forms-browsers-local-storage/translations/README.ko.md +++ b/5-browser-extension/2-forms-browsers-local-storage/translations/README.ko.md @@ -2,7 +2,7 @@ ## 강의 전 퀴즈 -[Pre-lecture quiz][Pre-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/25?loc=ko) +[Pre-lecture quiz][Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/25?loc=ko) ### 소개 @@ -210,7 +210,7 @@ async function displayCarbonUsage(apiKey, region) { ## 강의 후 퀴즈 -[Post-lecture quiz][Pre-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/26?loc=ko) +[Post-lecture quiz][Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/26?loc=ko) ## 리뷰 & 자기주도 학습 diff --git a/5-browser-extension/2-forms-browsers-local-storage/translations/README.ms.md b/5-browser-extension/2-forms-browsers-local-storage/translations/README.ms.md index 47be60a2..1cc7638e 100644 --- a/5-browser-extension/2-forms-browsers-local-storage/translations/README.ms.md +++ b/5-browser-extension/2-forms-browsers-local-storage/translations/README.ms.md @@ -2,7 +2,7 @@ ## Kuiz Pra Kuliah -[Kuiz Pra Kuliah](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/25) +[Kuiz Pra Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/25) ### Pengenalan @@ -210,7 +210,7 @@ Kami telah membincangkan beberapa jenis API setakat ini dalam pelajaran ini. Pil ## Kuiz Pasca Kuliah -[Kuiz Pasca Kuliah](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/26) +[Kuiz Pasca Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/26) ## Mengkaji & Belajar Sendiri 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..172488bd 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 @@ -2,7 +2,7 @@ ## 課前測驗 -[課前測驗](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/25?loc=zh_tw) +[課前測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/25?loc=zh_tw) ### 大綱 @@ -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,11 +208,11 @@ 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 的優劣？ ## 課後測驗 -[課後測驗](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/26?loc=zh_tw) +[課後測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/26?loc=zh_tw) ## 複習與自學 diff --git a/5-browser-extension/3-background-tasks-and-performance/README.md b/5-browser-extension/3-background-tasks-and-performance/README.md index fcc34436..8ce5f760 100644 --- a/5-browser-extension/3-background-tasks-and-performance/README.md +++ b/5-browser-extension/3-background-tasks-and-performance/README.md @@ -2,11 +2,11 @@ ## Pre-Lecture Quiz -[Pre-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/27) +[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/27) ### Introduction -In the last two lessons of this module, you learned how to build a form and display area for data fetched from an API. It's a very standard way of creating web presences on the web. You even learned how to handle fetching data asyncronously. Your browser extension is very nearly complete. +In the last two lessons of this module, you learned how to build a form and display area for data fetched from an API. It's a very standard way of creating web presences on the web. You even learned how to handle fetching data asynchronously. Your browser extension is very nearly complete. It remains to manage some background tasks, including refreshing the color of the extension's icon, so this is a great time to talk about how the browser manages this kind of task. Let's think about these browser tasks in the context of the performance of your web assets as you build them. @@ -147,7 +147,7 @@ Investigate some open source web sites have been around a long time ago, and, ba ## Post-Lecture Quiz -[Post-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/28) +[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/28) ## Review & Self Study diff --git a/5-browser-extension/3-background-tasks-and-performance/translations/README.es.md b/5-browser-extension/3-background-tasks-and-performance/translations/README.es.md index 52e5c0d0..c4a3de6c 100644 --- a/5-browser-extension/3-background-tasks-and-performance/translations/README.es.md +++ b/5-browser-extension/3-background-tasks-and-performance/translations/README.es.md @@ -1,6 +1,6 @@ # Proyecto de extensión del navegador, parte 3: Más información sobre el rendimiento y las tareas en segundo plano -## [Pre-lecture prueba](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/27) +## [Pre-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/27) ### Introducción: @@ -141,7 +141,7 @@ Felicitaciones, ha creado una extensión de navegador útil y ha aprendido más 🚀 Desafío: Investigue algunos sitios web de código abierto que han existido hace mucho tiempo y, según su historial de GitHub, vea si puede determinar cómo se optimizaron a lo largo de los años para el rendimiento, si es que lo hicieron. ¿Cuál es el punto de dolor más común? -## [Post-lecture prueba](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/28) +## [Post-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/28) ## Revisión y autoestudio diff --git a/5-browser-extension/3-background-tasks-and-performance/translations/README.fr.md b/5-browser-extension/3-background-tasks-and-performance/translations/README.fr.md new file mode 100644 index 00000000..82f77867 --- /dev/null +++ b/5-browser-extension/3-background-tasks-and-performance/translations/README.fr.md @@ -0,0 +1,162 @@ +# Projet d'extension de navigateur Partie 3 : En savoir plus sur les tâches et les performances en arrière-plan + +## Quiz préalable + +[Quiz préalable](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/27?loc=fr) + +### Introduction + +Dans les deux dernières leçons de ce module, vous avez appris à créer un formulaire et une zone d'affichage pour les données extraites d'une API. C'est un moyen très standard de créer des présences Web sur le Web. Vous avez même appris à gérer la récupération de données de manière asynchrone. Votre extension de navigateur est presque terminée. + +Il reste à gérer certaines tâches en arrière-plan, dont le rafraîchissement de la couleur de l'icône de l'extension, c'est donc le moment idéal pour parler de la façon dont le navigateur gère ce genre de tâche. Pensons à ces tâches de navigateur dans le contexte des performances de vos ressources Web au fur et à mesure que vous les créez. + +## Notions de base sur les performances Web + +> "Les performances du site Web dépendent de deux choses : la vitesse à laquelle la page se charge et la vitesse à laquelle le code s'exécute dessus." -- [Zack Grossbart](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/) + +La question de savoir comment rendre vos sites Web incroyablement rapides sur toutes sortes d'appareils, pour toutes sortes d'utilisateurs, dans toutes sortes de situations, est sans surprise vaste. Voici quelques points à garder à l'esprit lorsque vous créez un projet Web standard ou une extension de navigateur. + +La première chose que vous devez faire pour vous assurer que votre site fonctionne efficacement est de collecter des données sur ses performances. Le premier endroit pour le faire est dans les outils de développement de votre navigateur Web. Dans Edge, vous pouvez sélectionner le bouton "Paramètres et plus" (l'icône à trois points en haut à droite du navigateur), puis accédez à Plus d'outils > Outils de développement et ouvrez l'onglet Performances. Vous pouvez également utiliser les raccourcis clavier `Ctrl` + `Maj` + `I` sur Windows, ou `Option` + `Commande` + `I` sur Mac pour ouvrir les outils de développement. + +L'onglet Performance contient un outil de profilage. Ouvrez un site Web (essayez, par exemple, https://www.microsoft.com) et cliquez sur le bouton 'Record', puis actualisez le site. Arrêtez l'enregistrement à tout moment et vous pourrez voir les routines générées pour le 'script', le 'render' (rendu), et le 'paint' (l'affichage) du site: + +![Edge profiler](../images/profiler.png) + +✅ Consultez la [Documentation Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance?WT.mc_id=academic-13441-cxa) à propos du panneau Performances dans Edge + +> Astuce : pour avoir une vraie lecture de l'heure de démarrage de votre site web, videz le cache de votre navigateur + +Sélectionnez des éléments de la chronologie du profil pour zoomer sur les événements qui se produisent pendant le chargement de votre page. + +Obtenez un aperçu des performances de votre page en sélectionnant une partie de la chronologie du profil et en regardant le volet récapitulatif : + +![Capture du profileur Edge](../images/snapshot.png) + +Vérifiez le volet Journal des événements pour voir si un événement a pris plus de 15 ms: + +![Journal des événements Edge](../images/log.png) + +✅ Apprenez à connaître votre profileur! Ouvrez les outils de développement sur ce site et voyez s'il y a des goulots d'étranglement. Quel est l'élément le plus lent? Le plus rapide? + +## Contrôles de profilage + +En général, il existe des "zones à problèmes" que chaque développeur Web doit surveiller lors de la création d'un site, afin d'éviter les mauvaises surprises au moment du déploiement en production. + +**Tailles des éléments**: Le Web est devenu 'plus lourd', et donc plus lent, au cours des dernières années. Une partie de ce poids est liée à l'utilisation d'images. + +✅ Parcourez les [archives d'Internet](https://httparchive.org/reports/page-weight) pour une vue historique du poids des pages et plus encore. + +Une bonne pratique consiste à vous assurer que vos images sont optimisées, livrées à la bonne taille et à la bonne résolution pour vos utilisateurs. + +**Traversées du DOM**: Le navigateur doit construire son modèle objet de document en fonction du code que vous écrivez, il est donc dans l'intérêt d'une bonne performance de la page de garder vos balises minimales, en utilisant et en stylisant uniquement ce dont la page a besoin. À ce stade, l'excès de CSS associé à une page pourrait être optimisé ; les styles qui ne doivent être utilisés que sur une seule page n'ont pas besoin d'être inclus dans la feuille de style principale, par exemple. + +**JavaScript**: Chaque développeur JavaScript doit surveiller les scripts 'bloquant le rendu' qui doivent être chargés avant que le reste du DOM puisse être parcouru et peint sur le navigateur. Pensez à utiliser `defer` avec vos scripts en ligne (comme cela se fait dans le module Terrarium). + +✅ Essayez certains sites sur un [site Web de test de vitesse de site](https://www.webpagetest.org/) pour en apprendre plus sur les vérifications courantes qui sont effectuées pour déterminer les performances du site. + +Maintenant que vous avez une idée de la façon dont le navigateur rend les ressources que vous lui envoyez, examinons les dernières choses que vous devez faire pour terminer votre extension: + +### Créer une fonction pour calculer la couleur + +En travaillant dans `/src/index.js`, ajoutez une fonction appelée `calculateColor()` après la série de variables `const` que vous avez définies pour accéder au DOM: + +```JavaScript +function calculateColor(value) { + let co2Scale = [0, 150, 600, 750, 800]; + let colors = ['#2AA364', '#F5EB4D', '#9E4229', '#381D02', '#381D02']; + + let closestNum = co2Scale.sort((a, b) => { + return Math.abs(a - value) - Math.abs(b - value); + })[0]; + console.log(value + ' is closest to ' + closestNum); + let num = (element) => element > closestNum; + let scaleIndex = co2Scale.findIndex(num); + + let closestColor = colors[scaleIndex]; + console.log(scaleIndex, closestColor); + + chrome.runtime.sendMessage({ action: 'updateIcon', value: { color: closestColor } }); +} +``` + +Que se passe t-il ici? Vous transmettez une valeur (l'intensité carbone) de l'appel d'API que vous avez terminé dans la dernière leçon, puis vous calculez à quel point sa valeur est proche de l'indice présenté dans le tableau de couleurs. Ensuite, vous envoyez la valeur de couleur la plus proche au moteur d'exécution Chrome. + +Le chrome.runtime a [une API](https://developer.chrome.com/extensions/runtime) qui gère toutes sortes de tâches en arrière-plan, et votre extension en tire parti: + +> "Utilisez l'API chrome.runtime pour récupérer la page d'arrière-plan, renvoyer des détails sur le manifeste, et écouter et répondre aux événements dans le cycle de vie de l'application ou de l'extension. Vous pouvez également utiliser cette API pour convertir le chemin relatif des URL en URL entièrement qualifiées." + +✅ Si vous développez cette extension de navigateur pour Edge, vous pourriez être surpris d'utiliser une API Chrome. Les nouvelles versions du navigateur Edge s'exécutent sur le moteur de navigateur Chromium, vous pouvez donc tirer parti de ces outils. + +> Notez que si vous souhaitez profiler une extension de navigateur, lancez les outils de développement à partir de l'extension elle-même, car il s'agit de sa propre instance de navigateur distincte. + +### Définir une couleur d'icône par défaut + +Maintenant, dans la fonction `init()`, définissez l'icône sur un vert générique pour commencer en appelant à nouveau l'action `updateIcon` de chrome: + +```JavaScript +chrome.runtime.sendMessage({ + action: 'updateIcon', + value: { + color: 'green', + }, +}); +``` +### Appeler la fonction, exécuter l'appel + +Ensuite, appelez cette fonction que vous venez de créer en l'ajoutant à la promesse renvoyée par l'API C02Signal: + +```JavaScript +//let CO2... +calculateColor(CO2); +``` + +Et enfin, dans `/dist/background.js`, ajoutez l'écouteur pour ces appels d'action en arrière-plan: + +```JavaScript +chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { + if (msg.action === 'updateIcon') { + chrome.browserAction.setIcon({ imageData: drawIcon(msg.value) }); + } +}); +//emprunté à l'extension energy lollipop, fonctionnalité intéressante ! +function drawIcon(value) { + let canvas = document.createElement('canvas'); + let context = canvas.getContext('2d'); + + context.beginPath(); + context.fillStyle = value.color; + context.arc(100, 100, 50, 0, 2 * Math.PI); + context.fill(); + + return context.getImageData(50, 50, 100, 100); +} +``` +Dans ce code, vous ajoutez un écouteur pour tous les messages arrivant au gestionnaire de tâches principal. S'il s'appelle 'updateIcon', le code suivant est exécuté pour dessiner une icône de la bonne couleur à l'aide de l'API Canvas. + +✅ Vous en saurez plus sur l'API Canvas dans les [Cours sur le jeu spatial](../../../6-space-game/2-drawing-to-canvas/translations/README.fr.md). + +Maintenant, recompiler votre extension (`npm run build`), actualisez et lancez la, et observez le changement de couleur. Est-ce le bon moment pour faire une course ou faire la vaisselle? Vous le savez maintenant! + +Félicitations, vous avez créé une extension de navigateur utile et en avez appris davantage sur le fonctionnement du navigateur et sur la façon de profiler ses performances. + +--- + +## 🚀 Challenge + + +Enquêtez sur certains sites Web open source qui existent depuis longtemps et, sur la base de leur historique GitHub, voyez si vous pouvez déterminer comment ils ont été optimisés au fil des ans pour les performances, le cas échéant. Quel est le point sensible le plus courant? + +## Quiz de validation des connaissances + +[Quiz de validation des connaissances](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/28?loc=fr) + +## Révision et étude personnelle + +Pensez à vous inscrire à une [newsletter sur les performances](https://perf.email/) + +Étudiez certaines des façons dont les navigateurs évaluent les performances Web en consultant les onglets de performances de leurs outils Web. Trouvez-vous des différences majeures? + +## Affectation + +[Analyser un site par rapport à la performance](assignment.fr.md) + 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..8edc0dfb 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 @@ -2,7 +2,7 @@ ## पूर्व व्याख्यान प्रश्नोत्तरी -[पूर्व व्याख्यान प्रश्नोत्तरी](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/27?loc=hi) +[पूर्व व्याख्यान प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/27?loc=hi) ### परिचय @@ -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) पर जाएँ > युक्ति: अपनी वेब साइट के स्टार्टअप समय का सही पठन करने के लिए, अपने ब्राउज़र का कैश साफ़ करें @@ -147,7 +147,7 @@ function drawIcon(value) { ## व्याख्यान उपरांत प्रश्नोत्तरी -[व्याख्यान उपरांत प्रश्नोत्तरी](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/28?loc=hi) +[व्याख्यान उपरांत प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/28?loc=hi) ## समीक्षा और स्व अध्ययन diff --git a/5-browser-extension/3-background-tasks-and-performance/translations/README.it.md b/5-browser-extension/3-background-tasks-and-performance/translations/README.it.md index 1563f179..b57d6b26 100644 --- a/5-browser-extension/3-background-tasks-and-performance/translations/README.it.md +++ b/5-browser-extension/3-background-tasks-and-performance/translations/README.it.md @@ -2,7 +2,7 @@ ## Quiz Pre-Lezione -[Quiz Pre-Lezione](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/27?loc=it) +[Quiz Pre-Lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/27?loc=it) ### Introduzione @@ -147,7 +147,7 @@ Esaminare alcuni siti web open source che esistono da molto tempo e, in base all ## Quiz Post-Lezione -[Quiz post-lezione](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/28?loc=it) +[Quiz post-lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/28?loc=it) ## Revisione e Auto Apprendimento diff --git a/5-browser-extension/3-background-tasks-and-performance/translations/README.ja.md b/5-browser-extension/3-background-tasks-and-performance/translations/README.ja.md index aefb91fb..0e64c395 100644 --- a/5-browser-extension/3-background-tasks-and-performance/translations/README.ja.md +++ b/5-browser-extension/3-background-tasks-and-performance/translations/README.ja.md @@ -2,7 +2,7 @@ ## レッスン前の小テスト -[レッスン前の小テスト](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/27?loc=ja) +[レッスン前の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/27?loc=ja) ### イントロダクション @@ -147,7 +147,7 @@ function drawIcon(value) { ## レッスン後の小テスト -[レッスン後の小テスト](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/28?loc=ja) +[レッスン後の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/28?loc=ja) ## 復習と自己学習 diff --git a/5-browser-extension/3-background-tasks-and-performance/translations/README.ko.md b/5-browser-extension/3-background-tasks-and-performance/translations/README.ko.md index 467c7960..b12627ab 100644 --- a/5-browser-extension/3-background-tasks-and-performance/translations/README.ko.md +++ b/5-browser-extension/3-background-tasks-and-performance/translations/README.ko.md @@ -2,7 +2,7 @@ ## 강의 전 퀴즈 -[Pre-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/27?loc=ko) +[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/27?loc=ko) ### 소개 @@ -147,7 +147,7 @@ function drawIcon(value) { ## 강의 후 퀴즈 -[Post-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/28?loc=ko) +[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/28?loc=ko) ## 리뷰 & 자기주도 학습 diff --git a/5-browser-extension/3-background-tasks-and-performance/translations/README.ms.md b/5-browser-extension/3-background-tasks-and-performance/translations/README.ms.md index 7b84b50d..f8da03d7 100644 --- a/5-browser-extension/3-background-tasks-and-performance/translations/README.ms.md +++ b/5-browser-extension/3-background-tasks-and-performance/translations/README.ms.md @@ -2,7 +2,7 @@ ## Kuiz Pra Kuliah -[Kuiz Pra Kuliah](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/27) +[Kuiz Pra Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/27) ### Pengenalan @@ -147,7 +147,7 @@ Selidiki beberapa laman web sumber terbuka telah lama wujud, dan, berdasarkan se ## Kuiz Pasca Kuliah -[Kuiz Pasca Kuliah](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/28) +[Kuiz Pasca Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/28) ## Mengkaji & Belajar Sendiri 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..5b1fed80 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 @@ -2,7 +2,7 @@ ## 課前測驗 -[課前測驗](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/27?loc=zh_tw) +[課前測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/27?loc=zh_tw) ### 大綱 @@ -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 分頁資訊 > 提示：要取得真正的網頁開啟時間，記得清除你的瀏覽器快取。 @@ -146,7 +146,7 @@ function drawIcon(value) { ## 課後測驗 -[課後測驗](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/28?loc=zh_tw) +[課後測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/28?loc=zh_tw) ## 複習與自學 diff --git a/5-browser-extension/start/README copy.md b/5-browser-extension/start/README copy.md deleted file mode 100644 index 7dd0df8e..00000000 --- a/5-browser-extension/start/README copy.md +++ /dev/null @@ -1 +0,0 @@ -This is a placeholder, left blank purposefully \ No newline at end of file diff --git a/5-browser-extension/translations/README.ta.md b/5-browser-extension/translations/README.ta.md new file mode 100644 index 00000000..2c8c17d5 --- /dev/null +++ b/5-browser-extension/translations/README.ta.md @@ -0,0 +1,29 @@ +# உலாவி நீட்டிப்பை உருவாக்குதல் + +உலாவி நீட்டிப்புகளை உருவாக்குவது ஒரு வேடிக்கையான மற்றும் சுவாரஸ்யமான வழியாகும், அதே நேரத்தில் உங்கள் பயன்பாடுகளின் செயல்திறனைப் பற்றி சிந்திக்க வும், அதே நேரத்தில் வேறு வகையான வலை சொத்தை உருவாக்கவும்.உலாவிகள் எவ்வாறு வேலை செய்கின்றன மற்றும் உலாவி நீட்டிப்பை எவ்வாறு பயன்படுத்துவது, ஒரு படிவத்தை எவ்வாறு உருவாக்குவது, ஒரு ஏபிஐ ஐ அழைப்பது மற்றும் உள்ளூர் சேமிப்பகத்தை எவ்வாறு பயன்படுத்துவது மற்றும் உங்கள் வலைத்தளத்தின் செயல்திறனை எவ்வாறு அளவிடுவது மற்றும் அதை எவ்வாறு மேம்படுத்துவது என்பது பற்றிய பாடங்கள் இந்த தொகுதியில் அடங்கும். + +எட்ஜ், குரோம் மற்றும் பயர்பாக்ஸில் செயல்படும் உலாவி நீட்டிப்பை உருவாக்குவீர்கள். இந்த நீட்டிப்பு, ஒரு குறிப்பிட்ட பணிக்கு ஏற்ப வடிவமைக்கப்பட்ட ஒரு மினி வலைத் தளத்தைப் போன்றது, ஒரு குறிப்பிட்ட பிராந்தியத்தின் மின்சார பயன்பாடு மற்றும் கார்பன் தீவிரத்திற்காக [சி02 சிக்னல் ஏபிஐ](https://www.co2signal.com) சரிபார்க்கிறது, மேலும் பிராந்தியத்தின் கார்பன் தடத்தில் ஒரு வாசிப்பை அளிக்கிறது. + +இந்த நீட்டிப்பு ஒரு பயனர் மூலம் தற்காலிக என்று அழைக்கலாம் ஒரு ஏபிஐ விசை மற்றும் பிராந்திய குறியீடு உள்ளூர் மின்சார பயன்பாட்டை தீர்மானிக்க ஒரு வடிவத்தில் உள்ளீடு மற்றும் அதன் மூலம் ஒரு பயனரின் மின்சார முடிவுகளை பாதிக்கக்கூடிய தரவை வழங்குகிறது. உதாரணமாக, உங்கள் பகுதியில் அதிக மின்சார பயன்பாடு காலத்தில் ஒரு துணி உலர்த்தி (ஒரு கார்பன் தீவிர செயல்பாடு) இயங்கும் தாமதப்படுத்த விரும்பத்தக்கதாக இருக்கலாம். + +### தலைப்புகளை + +1. [உலாவி பற்றி](../1-about-browsers/README.md) +2. [படிவங்கள் மற்றும் உள்ளூர் சேமிப்பு](../2-forms-browsers-local-storage/README.md) +3. [பின்னணி பணிகள் மற்றும் செயல்திறன்](../3-background-tasks-and-performance/README.md) + +### கடன்கள் + +![ஒரு பச்சை உலாவி நீட்டிப்பு](../extension-screenshot.png) + +## கடன்கள் + +இந்த வலை கார்பன் தூண்டுதலுக்கான யோசனை ஆசிம் ஹுசைன், கிரீன் கிளவுட் அட்வோசி குழுவின் மைக்ரோசாப்ட் முன்னணி மற்றும் [பசுமை கொள்கைகள்](https://principles.green/) ஆசிரியர் ஆகியோரால் வழங்கப்பட்டது. இது முதலில் ஒரு [வலை திட்டம்](https://github.com/jlooper/green). + +உலாவி விரிவாக்கத்தின் கட்டமைப்பு [அடெபோலஅடெரானின் கோவிட் நீட்டிப்பு](https://github.com/onedebos/covtension) மூலம் தாக்கம் செலுத்தியது. + +கலிபோர்னியா உமிழ்வுகளுக்கான [எனர்ஜி லாலிபாப்](https://energylollipop.com/) உலாவி நீட்டிப்பின் ஐகான் கட்டமைப்பால் 'டாட்' ஐகான் அமைப்புக்குபின்னால் உள்ள கருத்து பரிந்துரைக்கப்பட்டது. + + +இந்த பாடங்கள் [ஜென் லூப்பர்](https://www.twitter.com/jenlooper) அன்புடன் எழுதப்பட்டன + diff --git a/6-space-game/.gitignore b/6-space-game/.gitignore deleted file mode 100644 index ab821240..00000000 --- a/6-space-game/.gitignore +++ /dev/null @@ -1,2 +0,0 @@ -.ionide -.DS_Store \ No newline at end of file diff --git a/6-space-game/1-introduction/README.md b/6-space-game/1-introduction/README.md index 88700519..89f8d446 100644 --- a/6-space-game/1-introduction/README.md +++ b/6-space-game/1-introduction/README.md @@ -4,7 +4,7 @@ ## Pre-Lecture Quiz -[Pre-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/29) +[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/29) ### Inheritance and Composition in game development @@ -213,7 +213,7 @@ Think about how the pub-sub pattern can enhance a game. Which parts should emit ## Post-Lecture Quiz -[Post-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/30) +[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/30) ## Review & Self Study diff --git a/6-space-game/1-introduction/translations/README.es.md b/6-space-game/1-introduction/translations/README.es.md index 24c7decc..0f8cb15a 100644 --- a/6-space-game/1-introduction/translations/README.es.md +++ b/6-space-game/1-introduction/translations/README.es.md @@ -2,7 +2,7 @@ ![video](video-url) -## [Pre-lecture prueba](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/29) +## [Pre-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/29) ### Herencia y composición en el desarrollo de juegos @@ -207,7 +207,7 @@ A medida que las cosas se complican cuando tu juego crece, este patrón permanec 🚀Desafío: Piense en cómo el patrón pub-sub puede mejorar un juego. ¿Qué partes deberían emitir eventos y cómo debería reaccionar el juego ante ellos? Ahora tienes la oportunidad de ser creativo, pensar en un nuevo juego y en cómo podrían comportarse sus partes. -## [Post-lecture prueba](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/30) +## [Post-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/30) ## Revisión y autoestudio diff --git a/6-space-game/1-introduction/translations/README.fr.md b/6-space-game/1-introduction/translations/README.fr.md new file mode 100644 index 00000000..44bc10a3 --- /dev/null +++ b/6-space-game/1-introduction/translations/README.fr.md @@ -0,0 +1,224 @@ +# Développez un jeu spatial, partie 1: Introduction + +![video](../../images/pewpew.gif) + +## Quiz préalable + +[Quiz préalable](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/29?loc=fr) + +### Héritage et composition dans le développement de jeux + +ans les leçons précédentes, il n'y avait pas vraiment besoin de s'inquiéter de l'architecture de conception des applications que vous avez créées, car les projets étaient de très petite portée. Cependant, lorsque vos applications augmentent en taille et en étendue, les décisions architecturales deviennent une préoccupation plus importante. Il existe deux approches principales pour créer des applications plus volumineuses en JavaScript: la *composition* ou l'*héritage*. Il y a des avantages et des inconvénients dans les deux cas, mais expliquons-les dans le contexte d'un jeu. + +✅ L'un des livres de programmation les plus célèbres jamais écrits concerne les [modèles de conception](https://en.wikipedia.org/wiki/Design_Patterns). + +Dans un jeu, vous avez des `game objects` qui sont des objets qui existent sur un écran. Cela signifie qu'ils ont un emplacement sur un système de coordonnées cartésien, caractérisé par une coordonnée `x` et `y`. Au fur et à mesure que vous développez un jeu, vous remarquerez que tous vos objets de jeu ont une propriété standard, commune à chaque jeu que vous créez, à savoir des éléments qui sont: + +- **location-based** La plupart des éléments de jeu, sinon tous, sont basés sur l'emplacement. Cela signifie qu'ils ont un emplacement, un `x` et un `y`. +- **movable** Ce sont des objets qui peuvent se déplacer vers un nouvel emplacement. Il s'agit généralement d'un héros, d'un monstre ou d'un PNJ (un personnage non joueur), mais pas par exemple, d'un objet statique comme un arbre. +- **self-destructing** Ces objets n'existent que pendant une période définie avant d'être configurés pour être supprimés. Habituellement, cela est représenté par un booléen `dead` ou `destroyed` qui signale au moteur de jeu que cet objet ne doit plus être rendu. +- **cool-down** 'Cool-down' est une propriété typique parmi les objets à courte durée de vie. Un exemple typique est un morceau de texte ou un effet graphique comme une explosion qui ne devrait être vu que pendant quelques millisecondes. + +✅ Pensez à un jeu comme Pac-Man. Pouvez-vous identifier les quatre types d'objets énumérés ci-dessus dans ce jeu? + +### Exprimer le comportement + +Tout ce que nous avons décrit ci-dessus est le comportement que les objets du jeu peuvent avoir. Alors comment les encoder? Nous pouvons exprimer ce comportement sous forme de méthodes associées à des classes ou à des objets. + +**Classes** + +L'idée est d'utiliser des `classes` en conjonction avec l'`héritage` pour accomplir l'ajout d'un certain comportement à une classe. + +✅ L'héritage est un concept important à comprendre. En savoir plus sur l'[article de MDN sur l'héritage](https://developer.mozilla.org/docs/Web/JavaScript/Inheritance_and_the_prototype_chain). + +Exprimé via du code, un objet de jeu peut généralement ressembler à ceci: + +```javascript + +//configurer la classe GameObject +class GameObject { + constructor(x, y, type) { + this.x = x; + this.y = y; + this.type = type; + } +} + +//cette classe étendra les propriétés de classe inhérentes à GameObject +class Movable extends GameObject { + constructor(x,y, type) { + super(x,y, type) + } + +//cet objet mobile peut être déplacé sur l'écran + moveTo(x, y) { + this.x = x; + this.y = y; + } +} + +//il s'agit d'une classe spécifique qui étend la classe Movable, afin qu'elle puisse profiter de toutes les propriétés dont elle hérite +class Hero extends Movable { + constructor(x,y) { + super(x,y, 'Hero') + } +} + +//cette classe, en revanche, n'hérite que des propriétés de GameObject +class Tree extends GameObject { + constructor(x,y) { + super(x,y, 'Tree') + } +} + +//un héros peut bouger... +const hero = new Hero(); +hero.moveTo(5,5); + +//mais un arbre ne le peut pas +const tree = new Tree(); +``` + +✅ Prenez quelques minutes pour réimaginer un héros de Pac-Man (Inky, Pinky ou Blinky, par exemple) et comment il serait écrit en JavaScript. + +**Composition** + +Une autre manière de gérer l'héritage d'objet consiste à utiliser la *Composition*. Ensuite, les objets expriment leur comportement comme ceci: + +```javascript +//créer un constant gameObject +const gameObject = { + x: 0, + y: 0, + type: '' +}; + +//...et un constant movable +const movable = { + moveTo(x, y) { + this.x = x; + this.y = y; + } +} +//alors la constante mobileObject est composée du gameObject et des constantes mobiles +const movableObject = {...gameObject, ...movable}; + +//puis créez une fonction pour créer un nouveau héros qui hérite des propriétés mobileObject +function createHero(x, y) { + return { + ...movableObject, + x, + y, + type: 'Hero' + } +} +//...et un objet statique qui hérite uniquement des propriétés de gameObject +function createStatic(x, y, type) { + return { + ...gameObject + x, + y, + type + } +} +//créer le héros et le déplacer +const hero = createHero(10,10); +hero.moveTo(5,5); +//et créer un arbre statique qui ne se trouve que dans les environs +const tree = createStatic(0,0, 'Tree'); +``` + +**Quel modèle dois-je utiliser?** + +C'est à vous de décider quel modèle vous choisissez. JavaScript prend en charge ces deux paradigmes. + +-- + +Un autre modèle courant dans le développement de jeux aborde le problème de la gestion de l'expérience utilisateur et des performances du jeu. + +## Modèle Pub/sub + +✅ Pub/Sub signifie 'publish-subscribe' (publier-s'abonner en français) + +Ce modèle répond à l'idée que les parties disparates de votre application ne devraient pas se connaître. Pourquoi donc? Il est beaucoup plus facile de voir ce qui se passe en général si différentes parties sont séparées. Cela facilite également le changement soudain de comportement si vous en avez besoin. Comment accomplir cela? Pour ce faire, nous établissons quelques concepts: + +- **message**: Un message est généralement une chaîne de texte accompagnée d'une charge utile facultative (une donnée qui clarifie le sujet du message). Un message typique dans un jeu peut être `KEY_PRESSED_ENTER`. +- **publisher**: Cet élément *publie* un message et l'envoie à tous les abonnés. +- **subscriber**: Cet élément *écoute* des messages spécifiques et exécute une tâche à la suite de la réception de ce message, comme tirer un laser. + +L'implémentation est assez petite mais c'est un modèle très puissant. Voici comment cela peut être mis en œuvre: + +```javascript +//configurer une classe EventEmitter qui contient des écouteurs +class EventEmitter { + constructor() { + this.listeners = {}; + } +//lorsqu'un message est reçu, laissez l'auditeur gérer sa charge utile + on(message, listener) { + if (!this.listeners[message]) { + this.listeners[message] = []; + } + this.listeners[message].push(listener); + } +//lorsqu'un message est envoyé, envoyez-le à un auditeur avec une charge utile + emit(message, payload = null) { + if (this.listeners[message]) { + this.listeners[message].forEach(l => l(message, payload)) + } + } +} + +``` + +Pour utiliser le code ci-dessus, nous pouvons créer une très petite implémentation: + +```javascript +//mettre en place une structure de message +const Messages = { + HERO_MOVE_LEFT: 'HERO_MOVE_LEFT' +}; +//invoquez l'eventEmitter que vous avez configuré ci-dessus +const eventEmitter = new EventEmitter(); +//définissez un héros +const hero = createHero(0,0); +//faites savoir à l'EventEmitter de surveiller les messages concernant le héros qui se déplace vers la gauche et agissez en conséquence +eventEmitter.on(Messages.HERO_MOVE_LEFT, () => { + hero.move(5,0); +}); + +//configurer la fenêtre pour écouter l'événement keyup, en particulier si la flèche gauche est touchée, émettre un message pour déplacer le héros vers la gauche +window.addEventListener('keyup', (evt) => { + if (evt.key === 'ArrowLeft') { + eventEmitter.emit(Messages.HERO_MOVE_LEFT) + } +}); +``` + +Ci-dessus, nous connectons un événement de clavier, `ArrowLeft` et envoyons le message `HERO_MOVE_LEFT`. Nous écoutons ce message et faisons bouger le `hero` en conséquence. La force de ce modèle est que l'auditeur de l'événement et le héros ne se connaissent pas. Vous pouvez remapper la touche `ArrowLeft` sur la touche `A`. De plus, il serait possible de faire quelque chose de complètement différent sur `ArrowLeft` en apportant quelques modifications à la fonction `on` de l'eventEmitter: + +```javascript +eventEmitter.on(Messages.HERO_MOVE_LEFT, () => { + hero.move(5,0); +}); +``` + +Au fur et à mesure que les choses se compliquent lorsque votre jeu s'étend, ce modèle reste le même en complexité et votre code reste propre. Il est vraiment recommandé d'adopter ce modèle. + +--- + +## 🚀 Challenge + +Pensez à la façon dont le modèle pub-sub peut améliorer un jeu. Quelles parties doivent émettre des événements, et comment le jeu doit-il y réagir? C'est maintenant votre chance de faire preuve de créativité, en pensant à un nouveau jeu et à la façon dont ses parties pourraient se comporter. + +## Quiz de validation des connaissances + +[Quiz de validation des connaissancesz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/30?loc=fr) + +## Révision et étude personnelle + +En savoir plus sur Pub/Sub en [lisant sur ce sujet](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber?WT.mc_id=academic-13441-cxa). + +## Affectation + +[Conception d'un jeu](assignment.fr.md) diff --git a/6-space-game/1-introduction/translations/README.hi.md b/6-space-game/1-introduction/translations/README.hi.md index b865a306..06de97db 100644 --- a/6-space-game/1-introduction/translations/README.hi.md +++ b/6-space-game/1-introduction/translations/README.hi.md @@ -4,7 +4,7 @@ ## लेक्चर से पहलेकी क्विज -[लेक्चर से पहलेकी क्विज ](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/29?loc=hi) +[लेक्चर से पहलेकी क्विज ](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/29?loc=hi) ### खेल के विकास में इन्हेरिटेंस और कम्पोजीशन @@ -211,7 +211,7 @@ eventEmitter.on(Messages.HERO_MOVE_LEFT, () => { ## लेक्चर बाद की क्विज -[लेक्चर बाद की क्विज](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/30?loc=hi) +[लेक्चर बाद की क्विज](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/30?loc=hi) ## समीक्षा और स्व अध्ययन diff --git a/6-space-game/1-introduction/translations/README.it.md b/6-space-game/1-introduction/translations/README.it.md index 5cc92a47..7f3cef83 100644 --- a/6-space-game/1-introduction/translations/README.it.md +++ b/6-space-game/1-introduction/translations/README.it.md @@ -4,7 +4,7 @@ ## Quiz Pre-Lezione -[Quiz Pre-Lezione](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/29?loc=it) +[Quiz Pre-Lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/29?loc=it) ### Ereditarietà e Composizione nello sviluppo del gioco @@ -213,7 +213,7 @@ Pensare a come il modello pub/sub può migliorare un gioco. Quali parti dovrebbe ## Quiz Post-Lezione -[Quiz post-lezione](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/30?loc=it) +[Quiz post-lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/30?loc=it) ## Revisione e Auto Apprendimento diff --git a/6-space-game/1-introduction/translations/README.ja.md b/6-space-game/1-introduction/translations/README.ja.md index 177a36ac..97252198 100644 --- a/6-space-game/1-introduction/translations/README.ja.md +++ b/6-space-game/1-introduction/translations/README.ja.md @@ -4,7 +4,7 @@ ## レッスン前の小テスト -[レッスン前の小テスト](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/29?loc=ja) +[レッスン前の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/29?loc=ja) ### ゲーム開発における継承とコンポジション @@ -213,7 +213,7 @@ pub-sub パターンがどのようにゲームを盛り上げるかを考えて ## レッスン後の小テスト -[レッスン後の小テスト](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/30?loc=ja) +[レッスン後の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/30?loc=ja) ## 復習と自己学習 diff --git a/6-space-game/1-introduction/translations/README.ko.md b/6-space-game/1-introduction/translations/README.ko.md index 86b88a1b..04b6e72e 100644 --- a/6-space-game/1-introduction/translations/README.ko.md +++ b/6-space-game/1-introduction/translations/README.ko.md @@ -4,7 +4,7 @@ ## 강의 전 퀴즈 -[Pre-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/29?loc=ko) +[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/29?loc=ko) ### 게임 개발의 상속과 구성 @@ -213,7 +213,7 @@ pub-sub 패턴이 어떻게 게임을 발전시킬 수 있는지 생각해보세 ## 강의 후 퀴즈 -[Post-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/30?loc=ko) +[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/30?loc=ko) ## 리뷰 & 자기주도 학습 diff --git a/6-space-game/1-introduction/translations/README.ms.md b/6-space-game/1-introduction/translations/README.ms.md index b74b213a..6bc3084e 100644 --- a/6-space-game/1-introduction/translations/README.ms.md +++ b/6-space-game/1-introduction/translations/README.ms.md @@ -4,7 +4,7 @@ ## Kuiz Pra Kuliah -[Kuiz Pra Kuliah](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/29) +[Kuiz Pra Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/29) ### Warisan dan Komposisi dalam pembangunan permainan @@ -213,7 +213,7 @@ Fikirkan bagaimana corak pub-sub dapat meningkatkan permainan. Bahagian mana yan ## Kuiz Pasca Kuliah -[Kuiz Pasca Kuliah](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/30) +[Kuiz Pasca Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/30) ## Mengkaji & Belajar Sendiri 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..2a1d27c0 100644 --- a/6-space-game/1-introduction/translations/README.zh-tw.md +++ b/6-space-game/1-introduction/translations/README.zh-tw.md @@ -4,7 +4,7 @@ ## 課前測驗 -[課前測驗](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/29?loc=zh_tw) +[課前測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/29?loc=zh_tw) ### 遊戲開發中的繼承(Inheritance)與組合(Composition) @@ -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)學習更多內容。 以程式碼來表達的話，一個遊戲物件通常會呈現這種形式： @@ -213,11 +213,11 @@ eventEmitter.on(Messages.HERO_MOVE_LEFT, () => { ## 課後測驗 -[課後測驗](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/30?loc=zh_tw) +[課後測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/30?loc=zh_tw) ## 複習與自學 -藉由[閱讀此連結](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/README.md b/6-space-game/2-drawing-to-canvas/README.md index 93e2f8cf..552efdc6 100644 --- a/6-space-game/2-drawing-to-canvas/README.md +++ b/6-space-game/2-drawing-to-canvas/README.md @@ -2,7 +2,7 @@ ## Pre-Lecture Quiz -[Pre-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/31) +[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/31) ## The Canvas @@ -205,7 +205,7 @@ You've learned about drawing with the 2D-focused Canvas API; take a look at the ## Post-Lecture Quiz -[Post-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/32) +[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/32) ## Review & Self Study diff --git a/6-space-game/2-drawing-to-canvas/translations/README.es.md b/6-space-game/2-drawing-to-canvas/translations/README.es.md index 3043e3af..4a4272b8 100644 --- a/6-space-game/2-drawing-to-canvas/translations/README.es.md +++ b/6-space-game/2-drawing-to-canvas/translations/README.es.md @@ -2,7 +2,7 @@ ![video](video-url) -## [Pre-lecture prueba](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/31) +## [Pre-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/31) ## El lienzo @@ -203,7 +203,7 @@ Intente resolverlo usted mismo primero, pero si se atasca, eche un vistazo a una 🚀 Desafío: ha aprendido a dibujar con la API Canvas enfocada en 2D; eche un vistazo a la [API WebGL](https://developer.mozilla.org/docs/Web/API/WebGL_API) e intente dibujar un objeto 3D. -## [Post-lecture prueba](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/32) +## [Post-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/32) ## Revisión y autoestudio diff --git a/6-space-game/2-drawing-to-canvas/translations/README.fr.md b/6-space-game/2-drawing-to-canvas/translations/README.fr.md new file mode 100644 index 00000000..9033dabe --- /dev/null +++ b/6-space-game/2-drawing-to-canvas/translations/README.fr.md @@ -0,0 +1,216 @@ +# Construisez un jeu spatial, partie 2 : dessinez des héros et des monstres sur le canevas + +## Quiz préalable + +[Quiz préalable](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/31?loc=fr) + +## Le canevas + +Le canevas est un élément HTML qui par défaut n'a pas de contenu ; c'est une ardoise vierge. Vous devez dessiner dessus pour y ajouter quelque chose. + +✅ Lisez en [plus sur l'API Canvas](https://developer.mozilla.org/docs/Web/API/Canvas_API) sur MDN. + +Voici comment il est généralement déclaré, dans le corps de la page: + +```html + +``` + +Ci-dessus, nous définissons `id`, `width` et `height`. + +- `id`: définissez-le pour obtenir une référence lorsque vous avez besoin d'interagir avec lui. +- `width`: c'est la largeur de l'élément. +- `height`: c'est la hauteur de l'élément. + +## Dessiner une géométrie simple + +Le Canvas utilise un système de coordonnées cartésiennes pour dessiner des choses. Ainsi, il utilise un axe x et un axe y pour exprimer où se trouve quelque chose. L'emplacement `0,0` est la position en haut à gauche et en bas à droite ce que vous appelez également la LARGEUR et la HAUTEUR du canevas. + +![la grille du canevas](../canvas_grid.png) +> Image de [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) + +Pour dessiner sur l'élément de canevas, vous devrez suivre les étapes suivantes: + +1. **Obtenir une référence** à l'élément Canvas. +1. **Obtenez une référence** sur l'élément Context qui se trouve sur l'élément canvas. +1. **Effectuez une opération de dessin** à l'aide de l'élément de contexte. + +Le code pour les étapes ci-dessus ressemble communément à ceci: + +```javascript +// dessine un rectangle rouge +//1. obtenir la référence du canevas +canvas = document.getElementById("myCanvas"); + +//2. définir le contexte en 2D pour dessiner des formes de base +ctx = canvas.getContext("2d"); + +//3. le remplir avec la couleur rouge +ctx.fillStyle = 'red'; + +//4. et dessiner un rectangle avec ces paramètres, en définissant l'emplacement et la taille +ctx.fillRect(0,0, 200, 200) // x,y, largeur, hauteur +``` + +✅ L'API Canvas se concentre principalement sur les formes 2D, mais vous pouvez également dessiner des éléments 3D sur un site Web ; pour cela, vous pouvez utiliser l'[API WebGL](https://developer.mozilla.org/docs/Web/API/WebGL_API). + +Vous pouvez dessiner toutes sortes de choses avec l'API Canvas comme: + +- **Des formes géométriques**, nous avons déjà montré comment dessiner un rectangle, mais il y a beaucoup plus que vous pouvez dessiner. +- **Du texte**, vous pouvez dessiner un texte avec la police et la couleur de votre choix. +- **Des images**, vous pouvez dessiner une image basée sur un élément d'image comme un .jpg ou .png par exemple. + +✅ Essayez-le ! Vous savez dessiner un rectangle, pouvez-vous dessiner un cercle sur une page ? Jetez un œil à quelques dessins Canvas intéressants sur CodePen. Voici un [exemple particulièrement impressionnant](https://codepen.io/dissimulate/pen/KrAwx). + +## Charger et dessiner un élément d'image + +Vous chargez une ressource image en créant un objet `Image` et définissez sa propriété `src`. Ensuite, vous écoutez l'événement `load` pour savoir quand il est prêt à être utilisé. Le code ressemble à ceci: + +### Charger l'élément + +```javascript +const img = new Image(); +img.src = 'path/to/my/image.png'; +img.onload = () => { + // image chargée et prête à être utilisée +} +``` + +### Charger le modèle d'élément + +Il est recommandé d'envelopper ce qui précède dans une construction comme celle-ci, il est donc plus facile à utiliser et vous n'essayez de le manipuler que lorsqu'il est complètement chargé: + +```javascript +function loadAsset(path) { + return new Promise((resolve) => { + const img = new Image(); + img.src = path; + img.onload = () => { + // image chargée et prête à être utilisée + resolve(img); + } + }) +} + +// utiliser comme celà + +async function run() { + const heroImg = await loadAsset('hero.png') + const monsterImg = await loadAsset('monster.png') +} + +``` + +Pour dessiner les ressources du jeu sur un écran, votre code ressemblerait à ceci: + +```javascript +async function run() { + const heroImg = await loadAsset('hero.png') + const monsterImg = await loadAsset('monster.png') + + canvas = document.getElementById("myCanvas"); + ctx = canvas.getContext("2d"); + ctx.drawImage(heroImg, canvas.width/2,canvas.height/2); + ctx.drawImage(monsterImg, 0,0); +} +``` + +## Il est maintenant temps de commencer à créer votre jeu + +### Quoi construire + +Vous allez créer une page Web avec un élément Canvas. Il devrait rendre un écran noir `1024*768`. Nous vous avons fourni deux images: + +- Navire héros + + ![Hero ship](../solution/assets/player.png) + +- Monstre 5*5 + + ![Monster ship](../solution/assets/enemyShip.png) + +### Étapes recommandées pour commencer le développement + +Recherchez les fichiers qui ont été créés pour vous dans le sous-dossier `your-work`. Il doit contenir les éléments suivants: + +```bash +-| assets + -| enemyShip.png + -| player.png +-| index.html +-| app.js +-| package.json +``` + +Ouvrez la copie de ce dossier dans Visual Studio Code. Vous devez disposer d'une configuration d'environnement de développement local, de préférence avec Visual Studio Code ainsi que NPM et Node installés. Si `npm` n'est pas configuré sur votre ordinateur, [voici comment procéder](https://www.npmjs.com/get-npm). + +Démarrez votre projet en accédant au dossier `your_work`: + +```bash +cd your-work +npm start +``` + +Ce qui précède démarrera un serveur HTTP à l'adresse `http://localhost:5000`. Ouvrez un navigateur et saisissez cette adresse. C'est une page blanche actuellement, mais cela va changer + +> Remarque : pour voir les changements sur votre écran, actualisez votre navigateur. + +### Ajouter du code + +Ajoutez le code nécessaire à `your-work/app.js` pour résoudre le problème ci-dessous + +1. **Dessinez** un canevas avec un fond noir + > astuce : ajoutez deux lignes sous le TODO approprié dans `/app.js`, en définissant l'élément `ctx` sur noir et les coordonnées haut/gauche à 0,0 et la hauteur et la largeur à égales à celles du canevas. +2. **Charger** les textures + > astuce : ajoutez les images du joueur et de l'ennemi en utilisant `await loadTexture` et en passant le chemin de l'image. Vous ne les verrez pas encore à l'écran! +3. **Dessinez** le héros au centre de l'écran dans la moitié inférieure + > astuce : utilisez l'API `drawImage` pour dessiner heroImg à l'écran, en définissant `canvas.width / 2 - 45` et `canvas.height - canvas.height / 4)`; +4. **Dessinez** les monstres 5*5 + > astuce : vous pouvez maintenant décommenter le code pour dessiner les ennemis à l'écran. Ensuite, allez à la fonction `createEnemies` et compilez la. + + Tout d'abord, configurez quelques constantes: + + ```javascript + const MONSTER_TOTAL = 5; + const MONSTER_WIDTH = MONSTER_TOTAL * 98; + const START_X = (canvas.width - MONSTER_WIDTH) / 2; + const STOP_X = START_X + MONSTER_WIDTH; + ``` + + Ensuite, créez une boucle pour dessiner le tableau de monstres sur l'écran: + + ```javascript + for (let x = START_X; x < STOP_X; x += 98) { + for (let y = 0; y < 50 * 5; y += 50) { + ctx.drawImage(enemyImg, x, y); + } + } + ``` + +## Résultat + +Le résultat final devrait ressembler à ça: + +![Un écran noir avec un héros et 5*5 monstres](../partI-solution.png) + +## Solution + +Veuillez d'abord essayer de le résoudre vous-même, mais si vous êtes bloqué, jetez un œil à une [solution](../solution/app.js) + +--- + +## 🚀 Challenge + +Vous avez appris à dessiner avec l'API Canvas axée sur la 2D ; jetez un œil à l'[API WebGL](https://developer.mozilla.org/docs/Web/API/WebGL_API), et essayez de dessiner un objet 3D. + +## Quiz de validation des connaissances + +[Quiz de validation des connaissances](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/32?loc=fr) + +## Révision et étude personnelle + +En savoir plus sur l'API Canvas en [lisant à ce sujet](https://developer.mozilla.org/docs/Web/API/Canvas_API). + +## Affectation + +[Jouer avec l'API Canvas](assignment.fr.md) diff --git a/6-space-game/2-drawing-to-canvas/translations/README.hi.md b/6-space-game/2-drawing-to-canvas/translations/README.hi.md index 8b1e08e1..da64a4b1 100644 --- a/6-space-game/2-drawing-to-canvas/translations/README.hi.md +++ b/6-space-game/2-drawing-to-canvas/translations/README.hi.md @@ -2,7 +2,7 @@ ## लेक्चर पाहिले की क्विज -[लेक्चर पाहिले की क्विज](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/31?loc=hi) +[लेक्चर पाहिले की क्विज](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/31?loc=hi) ## कैनवास @@ -207,7 +207,7 @@ npm start ## पोस्ट-व्याख्यान प्रश्नोत्तरी -[पोस्ट-व्याख्यान प्रश्नोत्तरी](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/32?loc=hi) +[पोस्ट-व्याख्यान प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/32?loc=hi) ## समीक्षा और स्व अध्ययन diff --git a/6-space-game/2-drawing-to-canvas/translations/README.it.md b/6-space-game/2-drawing-to-canvas/translations/README.it.md index b50bb1fa..ebbb08e0 100644 --- a/6-space-game/2-drawing-to-canvas/translations/README.it.md +++ b/6-space-game/2-drawing-to-canvas/translations/README.it.md @@ -2,7 +2,7 @@ ## Quiz Pre-Lezione -[Quiz Pre-Lezione](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/31?loc=it) +[Quiz Pre-Lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/31?loc=it) ## Canvas @@ -205,7 +205,7 @@ Si è imparato a disegnare con l'API Canvas incentrata sul 2D; dare un'occhiata ## Quiz Post-Lezione -[Quiz post-lezione](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/32?loc=it) +[Quiz post-lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/32?loc=it) ## Revisione e Auto Apprendimento diff --git a/6-space-game/2-drawing-to-canvas/translations/README.ja.md b/6-space-game/2-drawing-to-canvas/translations/README.ja.md index 23bfaca3..258e494d 100644 --- a/6-space-game/2-drawing-to-canvas/translations/README.ja.md +++ b/6-space-game/2-drawing-to-canvas/translations/README.ja.md @@ -2,7 +2,7 @@ ## レッスン前の小テスト -[レッスン前の小テスト](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/31?loc=ja) +[レッスン前の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/31?loc=ja) ## Canvas @@ -205,7 +205,7 @@ npm start ## レッスン後の小テスト -[レッスン後の小テスト](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/32?loc=ja) +[レッスン後の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/32?loc=ja) ## 復習と自己学習 diff --git a/6-space-game/2-drawing-to-canvas/translations/README.ko.md b/6-space-game/2-drawing-to-canvas/translations/README.ko.md index 9f9be702..982f83d9 100644 --- a/6-space-game/2-drawing-to-canvas/translations/README.ko.md +++ b/6-space-game/2-drawing-to-canvas/translations/README.ko.md @@ -2,7 +2,7 @@ ## 강의 전 퀴즈 -[Pre-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/31?loc=ko) +[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/31?loc=ko) ## Canvas @@ -205,7 +205,7 @@ npm start ## 강의 후 퀴즈 -[Post-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/32?loc=ko) +[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/32?loc=ko) ## 리뷰 & 자기주도 학습 diff --git a/6-space-game/2-drawing-to-canvas/translations/README.ms.md b/6-space-game/2-drawing-to-canvas/translations/README.ms.md index 8bdfa3e3..2d031e1c 100644 --- a/6-space-game/2-drawing-to-canvas/translations/README.ms.md +++ b/6-space-game/2-drawing-to-canvas/translations/README.ms.md @@ -2,7 +2,7 @@ ## Kuiz Pra Kuliah -[Kuiz Pra Kuliah](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/31) +[Kuiz Pra Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/31) ## Kanvas @@ -205,7 +205,7 @@ Anda telah belajar melukis dengan Canvas API 2D; lihatlah [WebGL API](https://de ## Kuiz Pasca Kuliah -[Kuiz Pasca Kuliah](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/32) +[Kuiz Pasca Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/32) ## Mengkaji & Belajar Sendiri 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..416b42dc 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 @@ -2,13 +2,13 @@ ## 課前測驗 -[課前測驗](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/31?loc=zh_tw) +[課前測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/31?loc=zh_tw) ## Canvas 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,15 +201,15 @@ 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 物件。 ## 課後測驗 -[課後測驗](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/32?loc=zh_tw) +[課後測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/32?loc=zh_tw) ## 複習與自學 -[閱讀更多資料](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/3-moving-elements-around/README.md b/6-space-game/3-moving-elements-around/README.md index 384cf7b2..9217838b 100644 --- a/6-space-game/3-moving-elements-around/README.md +++ b/6-space-game/3-moving-elements-around/README.md @@ -2,7 +2,7 @@ ## Pre-Lecture Quiz -[Pre-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/33) +[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/33) Games aren't much fun until you have aliens running around on screen! In this game, we will make use of two types of movements: @@ -377,7 +377,7 @@ As you can see, your code can turn into 'spaghetti code' when you start adding f ## Post-Lecture Quiz -[Post-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/34) +[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/34) ## Review & Self Study diff --git a/6-space-game/3-moving-elements-around/translations/README.es.md b/6-space-game/3-moving-elements-around/translations/README.es.md index 4516e85f..581b2a5f 100644 --- a/6-space-game/3-moving-elements-around/translations/README.es.md +++ b/6-space-game/3-moving-elements-around/translations/README.es.md @@ -2,7 +2,7 @@ ![video](video-url) -## [Pre-lecture prueba](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/33) +## [Pre-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/33) ¡Los juegos no son muy divertidos hasta que tienes extraterrestres corriendo por la pantalla! En este juego haremos uso de dos tipos de movimientos: @@ -376,7 +376,7 @@ Lo anterior iniciará un servidor HTTP en la dirección `http://localhost:5000`. 🚀 Desafío: como puede ver, su código puede convertirse en 'código espagueti' cuando comienza a agregar funciones, variables y clases. ¿Cómo puede organizar mejor su código para que sea más legible? Esboce un sistema para organizar su código, incluso si todavía reside en un archivo. -## [Post-lecture prueba](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/34) +## [Post-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/34) ## Revisión y autoestudio diff --git a/6-space-game/3-moving-elements-around/translations/README.fr.md b/6-space-game/3-moving-elements-around/translations/README.fr.md new file mode 100644 index 00000000..bdcfd5ff --- /dev/null +++ b/6-space-game/3-moving-elements-around/translations/README.fr.md @@ -0,0 +1,388 @@ +# Construisez un jeu spatial, partie 3: Ajout de mouvement + +## Quiz préalable + +[Quiz préalable](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/33?loc=fr) + +Les jeux ne sont pas très amusants tant que vous n'avez pas des extraterrestres qui courent à l'écran! Dans ce jeu, nous utiliserons deux types de mouvements: + +- **Mouvement clavier/souris**: lorsque l'utilisateur interagit avec le clavier ou la souris pour déplacer un objet à l'écran. +- **Mouvement induit par le jeu**: lorsque le jeu déplace un objet avec un certain intervalle de temps. + +Alors, comment déplacer les choses sur un écran? Tout est question de coordonnées cartésiennes: nous changeons l'emplacement (x,y) de l'objet puis redessinons l'écran. + +Généralement, vous devez suivre les étapes suivantes pour accomplir un *mouvement* sur un écran: + +1. **Définir un nouvel emplacement** pour un objet; cela est nécessaire pour percevoir l'objet comme ayant bougé. +2. **Effacer l'écran**, l'écran doit être dégagé entre les tirages. Nous pouvons l'effacer en dessinant un rectangle que nous remplissons avec une couleur de fond. +3. **Redessiner l'objet** au nouvel emplacement. En faisant cela, nous accomplissons finalement le déplacement de l'objet d'un endroit à l'autre. + + Voici à quoi cela peut ressembler dans le code: + +```javascript +//définir l'emplacement du héros +hero.x += 5; +// effacer le rectangle qui accueille le héros +ctx.clearRect(0, 0, canvas.width, canvas.height); +// redessiner le fond du jeu et le héros +ctx.fillRect(0, 0, canvas.width, canvas.height) +ctx.fillStyle = "black"; +ctx.drawImage(heroImg, hero.x, hero.y); +``` + +✅ Pouvez-vous penser à une raison pour laquelle redessiner votre héros plusieurs images par seconde pourrait entraîner des coûts de performance? Apprenez en plus sur les [alternatives à ce modèle](https://www.html5rocks.com/en/tutorials/canvas/performance/). + +## Gérer les événements du clavier + +Vous gérez les événements en attachant des événements spécifiques au code. Les événements de clavier sont déclenchés sur toute la fenêtre tandis que les événements de souris comme un `clic` peuvent être liés au clic sur un élément spécifique. Nous utiliserons des événements de clavier tout au long de ce projet. + +Pour gérer un événement, vous devez utiliser la méthode `addEventListener()` de la fenêtre et lui fournir deux paramètres d'entrée. Le premier paramètre est le nom de l'événement, par exemple `keyup`. Le deuxième paramètre est la fonction qui doit être invoquée à la suite de l'événement en cours. + +Voici un exemple: + +```javascript +window.addEventListener('keyup', (evt) => { + // `evt.key` = représentation sous forme de chaîne de la clé + if (evt.key === 'ArrowUp') { + // faire quelque chose + } +}) +``` + +Pour les événements clés, il existe deux propriétés sur l'événement que vous pouvez utiliser pour voir quelle touche a été pressée: + +- `key`, il s'agit d'une représentation sous forme de chaîne de la touche enfoncée, par exemple `ArrowUp` +- `keyCode`, c'est une représentation numérique, par exemple `37`, correspond à `ArrowLeft`. + +✅ La manipulation des événements clés est utile en dehors du développement de jeux. A quelles autres utilisations pensez-vous pour cette technique? + +### Touches spéciales: une mise en garde + +Il y a des touches *spéciales* qui affectent la fenêtre. Cela signifie que si vous écoutez un événement `keyup` et que vous utilisez ces touches spéciales pour déplacer votre héros, il effectuera également un défilement horizontal. Pour cette raison, vous voudrez peut-être *désactiver* ce comportement de navigateur intégré lorsque vous créez votre jeu. Vous avez besoin d'un code comme celui-ci: + +```javascript +let onKeyDown = function (e) { + console.log(e.keyCode); + switch (e.keyCode) { + case 37: + case 39: + case 38: + case 40: // Touches directionnelles + case 32: + e.preventDefault(); + break; // Espace + default: + break; // ne pas bloquer d'autres clés + } +}; + +window.addEventListener('keydown', onKeyDown); +``` + +Le code ci-dessus garantira que les touches fléchées et la touche espace ont leur comportement *par défaut* désactivé. Le mécanisme *shut-off* se produit lorsque nous appelons `e.preventDefault()`. + +## Mouvement induit par le jeu + +Nous pouvons faire bouger les choses d'elles-mêmes en utilisant des minuteries telles que la fonction `setTimeout()` ou `setInterval()` qui met à jour l'emplacement de l'objet à chaque tick ou intervalle de temps. Voici à quoi cela peut ressembler: + +```javascript +let id = setInterval(() => { + //déplacer l'ennemi sur l'axe y + enemy.y += 10; +}) +``` + +## La boucle du jeu + +La boucle de jeu est un concept qui est essentiellement une fonction invoquée à intervalles réguliers. C'est ce qu'on appelle la boucle de jeu car tout ce qui doit être visible pour l'utilisateur est attiré dans la boucle. La boucle de jeu utilise tous les objets de jeu qui font partie du jeu, les dessinant tous à moins que, pour une raison quelconque, ils ne fassent plus partie du jeu. Par exemple, si un objet est un ennemi qui a été touché par un laser et qui explose, il ne fait plus partie de la boucle de jeu en cours (vous en apprendrez plus à ce sujet dans les leçons suivantes). + +Voici à quoi ressemble généralement une boucle de jeu, exprimée en code: + +```javascript +let gameLoopId = setInterval(() => + function gameLoop() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.fillStyle = "black"; + ctx.fillRect(0, 0, canvas.width, canvas.height); + drawHero(); + drawEnemies(); + drawStaticObjects(); +}, 200); +``` + +La boucle ci-dessus est invoquée toutes les `200` millisecondes pour redessiner le canevas. Vous avez la possibilité de choisir le meilleur intervalle qui a du sens pour votre jeu. + +## Continuer le jeu spatial + +Vous allez prendre le code existant et l'étendre. Soit commencez par le code que vous avez complété au cours de la partie I, soit utilisez le code de la [Partie II - starter](../your-work). + +- **Déplacer le héros**: vous ajouterez du code pour vous assurer de pouvoir déplacer le héros à l'aide des touches fléchées. +- **Déplacer les ennemis**: vous devrez également ajouter du code pour vous assurer que les ennemis se déplacent de haut en bas à un rythme donné. + +## Étapes recommandées + +Localisez les fichiers qui ont été créés pour vous dans le sous-dossier `your-work`. Il doit contenir les éléments suivants: + +```bash +-| assets + -| enemyShip.png + -| player.png +-| index.html +-| app.js +-| package.json +``` + +Vous démarrez votre projet dans le dossier `your_work` en tapant: + +```bash +cd your-work +npm start +``` + +Ce qui précède démarrera un serveur HTTP à l'adresse `http://localhost:5000`. Ouvrez un navigateur et entrez cette adresse, pour le moment, cela devrait rendre le héros et tous les ennemis; rien ne bouge - pour l'instant! + +### Ajouter un code + +1. **Ajouter des objets dédiés** pour `hero` et `enemy` et `game object`, ils doivent avoir les propriétés `x` et `y`. (Rappelez-vous la partie sur l'[héritage ou la composition](../../translations/README.fr.md)). + + *CONSEIL* `game object` (l'objet de jeu) doit être celui avec `x` et `y` et la possibilité de se dessiner sur un canevas. + + >astuce: commencez par ajouter une nouvelle classe GameObject avec son constructeur délimité comme ci-dessous, puis dessinez-la sur le canevas: + + ```javascript + + class GameObject { + constructor(x, y) { + this.x = x; + this.y = y; + this.dead = false; + this.type = ""; + this.width = 0; + this.height = 0; + this.img = undefined; + } + + draw(ctx) { + ctx.drawImage(this.img, this.x, this.y, this.width, this.height); + } + } + ``` + + Maintenant, étendez ce GameObject pour créer le héros et l'ennemi. + + ```javascript + class Hero extends GameObject { + constructor(x, y) { + ...it needs an x, y, type, and speed + } + } + ``` + + ```javascript + class Enemy extends GameObject { + constructor(x, y) { + super(x, y); + (this.width = 98), (this.height = 50); + this.type = "Enemy"; + let id = setInterval(() => { + if (this.y < canvas.height - this.height) { + this.y += 5; + } else { + console.log('Stopped at', this.y) + clearInterval(id); + } + }, 300) + } + } + ``` + +2. **Ajoutez des gestionnaires d'événements de touche** pour gérer la navigation des touches (déplacez le héros vers le haut/bas vers la gauche/la droite) + + *RAPPELEZ-VOUS* que c'est un système cartésien, le haut à gauche est `0,0`. N'oubliez pas également d'ajouter du code pour arrêter *le comportement par défaut* + + >astuce: créez votre fonction onKeyDown et attachez-la à la fenêtre: + + ```javascript + let onKeyDown = function (e) { + console.log(e.keyCode); + ...add the code from the lesson above to stop default behavior + } + }; + + window.addEventListener("keydown", onKeyDown); + ``` + + Vérifiez la console de votre navigateur à ce stade et regardez les frappes enregistrées. + +3. **Implémentez** le [modèle Pub Sub](../../translations/README.fr.md), cela gardera votre code propre pendant que vous suivez les parties restantes. + + Pour faire cette dernière partie, vous pouvez: + + 1. **Ajouter un écouteur d'événement** sur la fenêtre: + + ```javascript + window.addEventListener("keyup", (evt) => { + if (evt.key === "ArrowUp") { + eventEmitter.emit(Messages.KEY_EVENT_UP); + } else if (evt.key === "ArrowDown") { + eventEmitter.emit(Messages.KEY_EVENT_DOWN); + } else if (evt.key === "ArrowLeft") { + eventEmitter.emit(Messages.KEY_EVENT_LEFT); + } else if (evt.key === "ArrowRight") { + eventEmitter.emit(Messages.KEY_EVENT_RIGHT); + } + }); + ``` + + 1. **Créez une classe EventEmitter** pour publier et vous abonner aux messages: + + ```javascript + class EventEmitter { + constructor() { + this.listeners = {}; + } + + on(message, listener) { + if (!this.listeners[message]) { + this.listeners[message] = []; + } + this.listeners[message].push(listener); + } + + emit(message, payload = null) { + if (this.listeners[message]) { + this.listeners[message].forEach((l) => l(message, payload)); + } + } + } + ``` + + 1. **Ajoutez des constantes** et configurez l'EventEmitter: + + ```javascript + const Messages = { + KEY_EVENT_UP: "KEY_EVENT_UP", + KEY_EVENT_DOWN: "KEY_EVENT_DOWN", + KEY_EVENT_LEFT: "KEY_EVENT_LEFT", + KEY_EVENT_RIGHT: "KEY_EVENT_RIGHT", + }; + + let heroImg, + enemyImg, + laserImg, + canvas, ctx, + gameObjects = [], + hero, + eventEmitter = new EventEmitter(); + ``` + + 1. **Initialiser le jeu** + + ```javascript + function initGame() { + gameObjects = []; + createEnemies(); + createHero(); + + eventEmitter.on(Messages.KEY_EVENT_UP, () => { + hero.y -= 5; + }) + + eventEmitter.on(Messages.KEY_EVENT_DOWN, () => { + hero.y += 5; + }); + + eventEmitter.on(Messages.KEY_EVENT_LEFT, () => { + hero.x -= 5; + }); + + eventEmitter.on(Messages.KEY_EVENT_RIGHT, () => { + hero.x += 5; + }); + } + ``` + +1. **Configurer la boucle de jeu** + + Refactorisez la fonction window.onload pour initialiser le jeu et mettre en place une boucle de jeu sur un bon intervalle. Vous ajouterez également un faisceau laser: + + ```javascript + window.onload = async () => { + canvas = document.getElementById("canvas"); + ctx = canvas.getContext("2d"); + heroImg = await loadTexture("assets/player.png"); + enemyImg = await loadTexture("assets/enemyShip.png"); + laserImg = await loadTexture("assets/laserRed.png"); + + initGame(); + let gameLoopId = setInterval(() => { + ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.fillStyle = "black"; + ctx.fillRect(0, 0, canvas.width, canvas.height); + drawGameObjects(ctx); + }, 100) + + }; + ``` + +5. **Ajoutez du code** pour déplacer les ennemis à un certain intervalle + + Refactoriser la fonction `createEnemies()` pour créer les ennemis et les pousser dans la nouvelle classe gameObjects: + + ```javascript + function createEnemies() { + const MONSTER_TOTAL = 5; + const MONSTER_WIDTH = MONSTER_TOTAL * 98; + const START_X = (canvas.width - MONSTER_WIDTH) / 2; + const STOP_X = START_X + MONSTER_WIDTH; + + for (let x = START_X; x < STOP_X; x += 98) { + for (let y = 0; y < 50 * 5; y += 50) { + const enemy = new Enemy(x, y); + enemy.img = enemyImg; + gameObjects.push(enemy); + } + } + } + ``` + + et ajoutez une fonction `createHero()` pour faire un processus similaire pour le héros. + + ```javascript + function createHero() { + hero = new Hero( + canvas.width / 2 - 45, + canvas.height - canvas.height / 4 + ); + hero.img = heroImg; + gameObjects.push(hero); + } + ``` + + et enfin, ajoutez une fonction `drawGameObjects()` pour démarrer le dessin: + + ```javascript + function drawGameObjects(ctx) { + gameObjects.forEach(go => go.draw(ctx)); + } + ``` + + Vos ennemis devraient commencer à avancer sur votre vaisseau spatial héros! + +--- + +## 🚀 Challenge + +Comme vous pouvez le constater, votre code peut se transformer en 'code spaghetti' lorsque vous commencez à ajouter des fonctions, des variables et des classes. Comment pouvez-vous mieux organiser votre code pour qu'il soit plus lisible? Esquissez un système pour organiser votre code, même s'il réside toujours dans un seul fichier. + +## Quiz de validation des connaissances + +[Quiz de validation des connaissances](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/34?loc=fr) + +## Révision et étude personnelle + +Pendant que nous écrivons notre jeu sans utiliser de frameworks, il existe de nombreux frameworks de canevas basés sur JavaScript pour le développement de jeux. Prenez le temps de faire quelques [lectures à ce sujet](https://github.com/collections/javascript-game-engines). + +## Affectation + +[Commentez votre code](assignment.fr.md) diff --git a/6-space-game/3-moving-elements-around/translations/README.hi.md b/6-space-game/3-moving-elements-around/translations/README.hi.md index a4b4313d..b193f583 100644 --- a/6-space-game/3-moving-elements-around/translations/README.hi.md +++ b/6-space-game/3-moving-elements-around/translations/README.hi.md @@ -2,7 +2,7 @@ ## प्री-लेक्चर क्विज -[प्री-लेक्चर क्विज](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/33?loc=hi) +[प्री-लेक्चर क्विज](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/33?loc=hi) जब तक आप परदे पर चारों ओर एलियंस चल रहे हैं तब तक गेम्स बहुत मज़ेदार नहीं हैं! इस खेल में, हम दो प्रकार के आंदोलनों का उपयोग करेंगे: @@ -376,7 +376,7 @@ class Enemy extends GameObject { ## व्याख्यान के बाद की क्विज -[व्याख्यान के बाद की क्विज](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/34?loc=hi) +[व्याख्यान के बाद की क्विज](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/34?loc=hi) ## समीक्षा और स्व अध्ययन diff --git a/6-space-game/3-moving-elements-around/translations/README.it.md b/6-space-game/3-moving-elements-around/translations/README.it.md index ed77bf74..b9c4bd61 100644 --- a/6-space-game/3-moving-elements-around/translations/README.it.md +++ b/6-space-game/3-moving-elements-around/translations/README.it.md @@ -2,7 +2,7 @@ ## Quiz Pre-Lezione -[Quiz Pre-Lezione](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/33?loc=it) +[Quiz Pre-Lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/33?loc=it) I giochi non sono molto divertenti finché non si hanno alieni che scorazzano per lo schermo! In questo gioco, si utilizzeranno due tipi di movimenti: @@ -377,7 +377,7 @@ Come si può vedere, il proprio codice può trasformarsi in ["spaghetti code"](h ## Quiz Post-Lezione -[Quiz post-lezione](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/34?loc=it) +[Quiz post-lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/34?loc=it) ## Revisione e Auto Apprendimento diff --git a/6-space-game/3-moving-elements-around/translations/README.ja.md b/6-space-game/3-moving-elements-around/translations/README.ja.md index 6a87069d..51983165 100644 --- a/6-space-game/3-moving-elements-around/translations/README.ja.md +++ b/6-space-game/3-moving-elements-around/translations/README.ja.md @@ -2,7 +2,7 @@ ## レッスン前の小テスト -[レッスン前の小テスト](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/33?loc=ja) +[レッスン前の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/33?loc=ja) ゲームは、あなたが画面上を走り回るエイリアンを持っているまでは、あまり楽しいものではありません! このゲームでは、2種類の動きを使用しています。このゲームでは、2種類の動きを利用していきます。 @@ -376,7 +376,7 @@ npm start ## レッスン後の小テスト -[レッスン後の小テスト](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/34?loc=ja) +[レッスン後の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/34?loc=ja) ## 復習と自己学習 diff --git a/6-space-game/3-moving-elements-around/translations/README.ko.md b/6-space-game/3-moving-elements-around/translations/README.ko.md index 44bed29a..2e25229c 100644 --- a/6-space-game/3-moving-elements-around/translations/README.ko.md +++ b/6-space-game/3-moving-elements-around/translations/README.ko.md @@ -2,7 +2,7 @@ ## 강의 전 퀴즈 -[Pre-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/33?loc=ko) +[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/33?loc=ko) 외계인이 화면을 돌아다니기 전까지는 게임이 재미 없습니다! 이 게임에서는, 두 가지 타입의 동작을 씁니다: @@ -378,7 +378,7 @@ npm start ## 강의 후 퀴즈 -[Post-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/34?loc=ko) +[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/34?loc=ko) ## 리뷰 & 자기주도 학습 diff --git a/6-space-game/3-moving-elements-around/translations/README.ms.md b/6-space-game/3-moving-elements-around/translations/README.ms.md index a8aede1f..4c8b206b 100644 --- a/6-space-game/3-moving-elements-around/translations/README.ms.md +++ b/6-space-game/3-moving-elements-around/translations/README.ms.md @@ -2,7 +2,7 @@ ## Kuiz Pra Kuliah -[Kuiz Pra Kuliah](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/33) +[Kuiz Pra Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/33) Permainan tidak begitu menyeronokkan sehingga anda mempunyai makhluk asing di layar! Dalam permainan ini, kami akan menggunakan dua jenis pergerakan: @@ -377,7 +377,7 @@ Seperti yang anda lihat, kod anda boleh berubah menjadi 'spaghetti code' apabila ## Kuiz Pasca Kuliah -[Kuiz Pasca Kuliah](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/34) +[Kuiz Pasca Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/34) ## Mengkaji & Belajar Sendiri diff --git a/6-space-game/3-moving-elements-around/translations/README.zh-tw.md b/6-space-game/3-moving-elements-around/translations/README.zh-tw.md index 94f1e8e7..fd39f480 100644 --- a/6-space-game/3-moving-elements-around/translations/README.zh-tw.md +++ b/6-space-game/3-moving-elements-around/translations/README.zh-tw.md @@ -2,7 +2,7 @@ ## 課前測驗 -[課前測驗](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/33?loc=zh_tw) +[課前測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/33?loc=zh_tw) 有外星人在移動的遊戲才會好玩！在這款遊戲中，我們會建立兩種移動模式： @@ -377,7 +377,7 @@ npm start ## 課後測驗 -[課後測驗](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/34?loc=zh_tw) +[課後測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/34?loc=zh_tw) ## 複習與自學 diff --git a/6-space-game/4-collision-detection/README.md b/6-space-game/4-collision-detection/README.md index f975c70f..8eb89b07 100644 --- a/6-space-game/4-collision-detection/README.md +++ b/6-space-game/4-collision-detection/README.md @@ -2,7 +2,7 @@ ## Pre-Lecture Quiz -[Pre-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/35) +[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/35) In this lesson you will learn how to shoot lasers with JavaScript! We will add two things to our game: @@ -286,7 +286,7 @@ Add an explosion! Take a look at the game assets in [the Space Art repo](../solu ## Post-Lecture Quiz -[Post-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/36) +[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/36) ## Review & Self Study diff --git a/6-space-game/4-collision-detection/translations/README.es.md b/6-space-game/4-collision-detection/translations/README.es.md index 13d1c52f..1e980069 100644 --- a/6-space-game/4-collision-detection/translations/README.es.md +++ b/6-space-game/4-collision-detection/translations/README.es.md @@ -2,7 +2,7 @@ ![video](video-url) -## [Pre-lecture prueba](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/35) +## [Pre-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/35) ¡En esta lección aprenderá a disparar láseres con JavaScript! Agregaremos dos cosas a nuestro juego: @@ -284,7 +284,7 @@ En este punto, ¡tu juego tiene algunas funciones! Puedes navegar con tus flecha 🚀 Desafío: ¡Agrega una explosión! Echa un vistazo a los recursos del juego en [el repositorio de Space Art](../solution/spaceArt/readme.txt) e intenta agregar una explosión cuando el láser golpea a un extraterrestre. -## [Post-lecture prueba](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/36) +## [Post-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/36) ## Revisión y autoestudio diff --git a/6-space-game/4-collision-detection/translations/README.fr.md b/6-space-game/4-collision-detection/translations/README.fr.md new file mode 100644 index 00000000..51f29837 --- /dev/null +++ b/6-space-game/4-collision-detection/translations/README.fr.md @@ -0,0 +1,297 @@ +# Construire un jeu spatial Partie 4: Ajouter un laser et détecter les collisions + +## Quiz préalable + +[Quiz préalable](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/35?loc=fr) + +Dans cette leçon, vous apprendrez à tirer des lasers avec JavaScript! Nous ajouterons deux choses à notre jeu: + +- **Un laser**: ce laser est tiré depuis le vaisseau de vos héros et verticalement vers le haut +- **La détection de collision**, dans le cadre de la mise en œuvre de la possibilité de *tirer*, nous ajouterons également quelques règles de jeu intéressantes: + - **Le laser frappe l'ennemi**: L'ennemi meurt s'il est touché par un laser + - **Le laser touche l'écran supérieur**: un laser est détruit s'il touche la partie supérieure de l'écran + - **Collision entre ennemis et héros**: Un ennemi et le héros sont détruits s'ils se frappent + - **L'ennemi touche le bas de l'écran**: Un ennemi et un héros sont détruits si l'ennemi touche le bas de l'écran + +En bref, vous -- *le héros* -- devez frapper tous les ennemis avec un laser avant qu'ils ne parviennent à se déplacer vers le bas de l'écran. + +✅ Faites une petite recherche sur le tout premier jeu vidéo jamais écrit. Quelle était sa fonctionnalité? + +Soyons héroïques ensemble! + +## La détection de collision + +Comment fait-on la détection de collision? Nous devons penser à nos objets de jeu comme des rectangles se déplaçant. Pourquoi vous pourriez vous demander? Eh bien, l'image utilisée pour dessiner un objet de jeu est un rectangle: il a un `x`, `y`, `width` et `height`. + +Si deux rectangles, c'est-à-dire un héros et un ennemi *se croisent*, vous avez une collision. Ce qui devrait arriver alors dépend des règles du jeu. Pour implémenter la détection de collision, vous avez donc besoin des éléments suivants: + +1. Un moyen d'obtenir une représentation rectangulaire d'un objet de jeu, quelque chose comme ça: + + ```javascript + rectFromGameObject() { + return { + top: this.y, + left: this.x, + bottom: this.y + this.height, + right: this.x + this.width + } + } + ``` + +2. Une fonction de comparaison, cette fonction peut ressembler à ceci: + + ```javascript + function intersectRect(r1, r2) { + return !(r2.left > r1.right || + r2.right < r1.left || + r2.top > r1.bottom || + r2.bottom < r1.top); + } + ``` + +## Comment détruire les objets + +Pour détruire des objets dans un jeu, vous devez faire savoir au jeu qu'il ne doit plus afficher cet objet dans la boucle de jeu qui se déclenche à un certain intervalle. Une façon de faire est de marquer un objet de jeu comme *mort* quand quelque chose se passe, comme ceci: + +```javascript +// la collision s'est produite +enemy.dead = true +``` + +Ensuite, vous procédez au tri des objets *morts* avant de repeindre l'écran, comme ceci: + +```javascript +gameObjects = gameObject.filter(go => !go.dead); +``` + +## Comment tirons-nous un laser + +Tirer un laser se traduit par répondre à un événement clé et créer un objet qui se déplace dans une certaine direction. Nous devons donc effectuer les étapes suivantes: + +1. **Créez un objet laser**: du haut du vaisseau de notre héros, celui-ci commence à se déplacer vers le haut de l'écran lors de sa création. +2. **Attacher un code à un événement clé**: nous devons choisir une touche du clavier qui représente le joueur tirant le laser. +3. **Créez un objet de jeu qui ressemble à un laser** lorsque la touche est enfoncée. + +## Cooldown sur notre laser + +Le laser doit se déclencher à chaque fois que vous appuyez sur une touche, comme *espace* par exemple. Pour éviter que le jeu ne produise trop de lasers en peu de temps, nous devons résoudre ce problème. La solution consiste à implémenter un soi-disant *cooldown*(temps de recharge), une minuterie, qui garantit qu'un laser ne peut être tiré aussi souvent. Vous pouvez implémenter cela de la manière suivante: + +```javascript +class Cooldown { + constructor(time) { + this.cool = false; + setTimeout(() => { + this.cool = true; + }, time) + } +} + +class Weapon { + constructor { + } + fire() { + if (!this.cooldown || this.cooldown.cool) { + // produire un laser + this.cooldown = new Cooldown(500); + } else { + // ne rien faire - il n'a pas encore refroidi. + } + } +} +``` + +✅ Reportez-vous à la leçon 1 de la série de jeux spatiaux pour vous rappeler des *temps de recharge* + +## Que construire + +Vous allez prendre le code existant (que vous avez dû nettoyer et refactoriser) de la leçon précédente et l'étendre. Commencez par le code de la partie II ou utilisez le code de la [partie III - démarreur](../../your-work). + +> astuce: le laser avec lequel vous allez travailler est déjà dans votre dossier assets et référencé par votre code + +- **Ajoutez la détection de collision**, lorsqu'un laser entre en collision avec quelque chose, les règles suivantes doivent s'appliquer: + 1. **Le laser touche l'ennemi**: l'ennemi meurt s'il est touché par un laser + 2. **Le laser touche l'écran supérieur**: un laser est détruit s'il touche la partie supérieure de notre écran + 3. **Collision ennemi et héros**: un ennemi et le héros sont détruits s'ils se frappent + 4. **L'ennemi touche le bas de l'écran**: un ennemi et un héros sont détruits si l'ennemi touche le bas de l'écran + +## Étapes recommandées + +Localisez les fichiers qui ont été créés pour vous dans le sous-dossier `your-work`. Il doit contenir les éléments suivants: + +```bash +-| assets + -| enemyShip.png + -| player.png + -| laserRed.png +-| index.html +-| app.js +-| package.json +``` + +Vous démarrez votre projet dans le dossier `your_work` en tapant: + +```bash +cd your-work +npm start +``` + +Ce qui précède démarrera un serveur HTTP à l'adresse `http://localhost:5000`. Ouvrez un navigateur et saisissez cette adresse, pour le moment, cela devrait rendre le héros et tous les ennemis, rien ne bouge - pour le moment :). + +### Ajouter un code + +1. **Configurez une représentation rectangulaire de votre objet de jeu, pour gérer les collisions** Le code ci-dessous vous permet d'obtenir une représentation rectangulaire d'un `GameObject`. Modifiez votre classe GameObject pour l'étendre: + + ```javascript + rectFromGameObject() { + return { + top: this.y, + left: this.x, + bottom: this.y + this.height, + right: this.x + this.width, + }; + } + ``` + +2. **Ajouter du code qui vérifie la collision** Il s'agira d'une nouvelle fonction qui teste si deux rectangles se croisent: + + ```javascript + function intersectRect(r1, r2) { + return !( + r2.left > r1.right || + r2.right < r1.left || + r2.top > r1.bottom || + r2.bottom < r1.top + ); + } + ``` + +3. **Ajouter une capacité de tir laser ** + 1. **Ajouter un message d'événement clé**. La touche *espace* devrait créer un laser juste au-dessus du vaisseau héros. Ajoutez trois constantes dans l'objet Messages: + + ```javascript + KEY_EVENT_SPACE: "KEY_EVENT_SPACE", + COLLISION_ENEMY_LASER: "COLLISION_ENEMY_LASER", + COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO", + ``` + + 1. **Manipuler la touche espace**. Modifiez la fonction keyup `window.addEventListener` pour gérer les espaces: + + ```javascript + } else if(evt.keyCode === 32) { + eventEmitter.emit(Messages.KEY_EVENT_SPACE); + } + ``` + + 1. **Ajouter des auditeurs**. Modifiez la fonction `initGame()` pour vous assurer que le héros peut se déclencher lorsque la barre d'espace est enfoncée: + + ```javascript + eventEmitter.on(Messages.KEY_EVENT_SPACE, () => { + if (hero.canFire()) { + hero.fire(); + } + ``` + + et ajoutez une nouvelle fonction `eventEmitter.on()` pour assurer le comportement lorsqu'un ennemi entre en collision avec un laser: + + ```javascript + eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => { + first.dead = true; + second.dead = true; + }) + ``` + + 1. **Déplacez l'objet**, assurez-vous que le laser se déplace progressivement vers le haut de l'écran. Vous allez créer une nouvelle classe Laser qui étend `GameObject`, comme vous l'avez fait auparavant: + + ```javascript + class Laser extends GameObject { + constructor(x, y) { + super(x,y); + (this.width = 9), (this.height = 33); + this.type = 'Laser'; + this.img = laserImg; + let id = setInterval(() => { + if (this.y > 0) { + this.y -= 15; + } else { + this.dead = true; + clearInterval(id); + } + }, 100) + } + } + ``` + + 1. **Gérer les collisions**, Implémenter les règles de collision pour le laser. Ajouter une fonction `updateGameObjects()` qui teste les objets en collision pour les hits + + ```javascript + function updateGameObjects() { + const enemies = gameObjects.filter(go => go.type === 'Enemy'); + const lasers = gameObjects.filter((go) => go.type === "Laser"); + // laser hit something + lasers.forEach((l) => { + enemies.forEach((m) => { + if (intersectRect(l.rectFromGameObject(), m.rectFromGameObject())) { + eventEmitter.emit(Messages.COLLISION_ENEMY_LASER, { + first: l, + second: m, + }); + } + }); + }); + + gameObjects = gameObjects.filter(go => !go.dead); + } + ``` + + Assurez-vous d'ajouter `updateGameObjects()` dans votre boucle de jeu dans `window.onload`. + + 4. **Mettez en place un temps de recharge (cooldown)** sur le laser, de sorte qu'il ne peut être tiré qu'un certain temps. + + Enfin, modifiez la classe de héros afin qu'elle puisse se recharger: + + ```javascript + class Hero extends GameObject { + constructor(x, y) { + super(x, y); + (this.width = 99), (this.height = 75); + this.type = "Hero"; + this.speed = { x: 0, y: 0 }; + this.cooldown = 0; + } + fire() { + gameObjects.push(new Laser(this.x + 45, this.y - 10)); + this.cooldown = 500; + + let id = setInterval(() => { + if (this.cooldown > 0) { + this.cooldown -= 100; + } else { + clearInterval(id); + } + }, 200); + } + canFire() { + return this.cooldown === 0; + } + } + ``` + +À ce stade, votre jeu a quelques fonctionnalités! Vous pouvez naviguer avec vos touches fléchées, tirer un laser avec votre barre d'espace et les ennemis disparaissent lorsque vous les frappez. Bien joué! + +--- + +## 🚀 Challenge + +Ajoutez une explosion! Jetez un œil aux ressources du jeu dans [le référentiel Space Art](../../solution/spaceArt/readme.txt) et essayez d'ajouter une explosion lorsque le laser frappe un extraterrestre + +## Quiz de validation des connaissances + +[Quiz de validation des connaissances](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/36?loc=fr) + +## Révision et étude personnelle + +Faites des expériences avec les intervalles de votre jeu à ce stade. Que se passe-t-il lorsque vous les modifiez? En savoir plus sur les [événements de minutage JavaScript](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/). + +## Affectation + +[Explorer les collisions](assignment.fr.md) diff --git a/6-space-game/4-collision-detection/translations/README.hi.md b/6-space-game/4-collision-detection/translations/README.hi.md index 6e83a7d9..c7ac3eab 100644 --- a/6-space-game/4-collision-detection/translations/README.hi.md +++ b/6-space-game/4-collision-detection/translations/README.hi.md @@ -2,7 +2,7 @@ ## लेक्चरसे पहलेकी क्विज -[लेक्चरसे पहलेकी क्विज](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/35?loc=hi) +[लेक्चरसे पहलेकी क्विज](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/35?loc=hi) इस पाठ में आप सीखेंगे कि जावास्क्रिप्ट के साथ लेज़रों को कैसे शूट किया जाए! हम अपने खेल में दो चीजें जोड़ेंगे: @@ -294,7 +294,7 @@ npm start ## पोस्ट-व्याख्यान प्रश्नोत्तरी -[पोस्ट-व्याख्यान प्रश्नोत्तरी](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/36?loc=hi) +[पोस्ट-व्याख्यान प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/36?loc=hi) ## समीक्षा और स्व अध्ययन diff --git a/6-space-game/4-collision-detection/translations/README.it.md b/6-space-game/4-collision-detection/translations/README.it.md index 3d454ee8..0e7bd5f3 100644 --- a/6-space-game/4-collision-detection/translations/README.it.md +++ b/6-space-game/4-collision-detection/translations/README.it.md @@ -2,7 +2,7 @@ ## Quiz Pre-Lezione -[Quiz Pre-Lezione](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/35?loc=it) +[Quiz Pre-Lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/35?loc=it) In questa lezione si imparererà come fare fuoco con i laser con JavaScript! Verranno aggiunte due cose al gioco: @@ -286,7 +286,7 @@ Aggiungere un'esplosione! Dare un'occhiata alle risorse di gioco [nel repository ## Quiz Post-Lezione -[Quiz post-lezione](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/36?loc=it) +[Quiz post-lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/36?loc=it) ## Revisione e Auto Apprendimento diff --git a/6-space-game/4-collision-detection/translations/README.ja.md b/6-space-game/4-collision-detection/translations/README.ja.md index 3921d65c..3f0a83bb 100644 --- a/6-space-game/4-collision-detection/translations/README.ja.md +++ b/6-space-game/4-collision-detection/translations/README.ja.md @@ -2,7 +2,7 @@ ## レッスン前の小テスト -[レッスン前の小テスト](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/35?loc=ja) +[レッスン前の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/35?loc=ja) このレッスンでは、JavaScript でレーザーを撃つ方法を学びます! 私たちはゲームに2つのものを追加します。 @@ -287,7 +287,7 @@ npm start ## レッスン後の小テスト -[レッスン後の小テスト](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/36?loc=ja) +[レッスン後の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/36?loc=ja) ## 復習と自己学習 diff --git a/6-space-game/4-collision-detection/translations/README.ko.md b/6-space-game/4-collision-detection/translations/README.ko.md index a0c56bb9..e1eadabd 100644 --- a/6-space-game/4-collision-detection/translations/README.ko.md +++ b/6-space-game/4-collision-detection/translations/README.ko.md @@ -2,7 +2,7 @@ ## 강의 전 퀴즈 -[Pre-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/35?loc=ko) +[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/35?loc=ko) 이 강의에서는 JavaScript로 레이저를 쏘는 방법을 배웁니다! 게임에 다음 두 가지를 추가합니다: @@ -286,7 +286,7 @@ npm start ## 강의 후 퀴즈 -[Post-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/36?loc=ko) +[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/36?loc=ko) ## 리뷰 & 자기주도 학습 diff --git a/6-space-game/4-collision-detection/translations/README.ms.md b/6-space-game/4-collision-detection/translations/README.ms.md index e6ca4829..068e57f5 100644 --- a/6-space-game/4-collision-detection/translations/README.ms.md +++ b/6-space-game/4-collision-detection/translations/README.ms.md @@ -2,7 +2,7 @@ ## Kuiz Pra Kuliah -[Kuiz Pra Kuliah](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/35) +[Kuiz Pra Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/35) Dalam pelajaran ini, anda akan belajar bagaimana menembak laser dengan JavaScript! Kami akan menambah dua perkara pada permainan kami: @@ -286,7 +286,7 @@ Tambah letupan! Lihat aset permainan di [Space Art repo](../../solution/spaceArt ## Kuiz Pasca Kuliah -[Kuiz Pasca Kuliah](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/36) +[Kuiz Pasca Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/36) ## Mengkaji & Belajar Sendiri diff --git a/6-space-game/4-collision-detection/translations/README.zh-tw.md b/6-space-game/4-collision-detection/translations/README.zh-tw.md index 9cac4f96..7c526add 100644 --- a/6-space-game/4-collision-detection/translations/README.zh-tw.md +++ b/6-space-game/4-collision-detection/translations/README.zh-tw.md @@ -2,7 +2,7 @@ ## 課前測驗 -[課前測驗](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/35?loc=zh_tw) +[課前測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/35?loc=zh_tw) 這堂課中，你會學會如何在 JavaScript 上發射雷射光！我們需要在遊戲中新增兩項東西： @@ -286,7 +286,7 @@ npm start ## 課後測驗 -[課後測驗](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/36?loc=zh_tw) +[課後測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/36?loc=zh_tw) ## 複習與自學 diff --git a/6-space-game/5-keeping-score/README.md b/6-space-game/5-keeping-score/README.md index e6f9a515..6b8d2e9e 100644 --- a/6-space-game/5-keeping-score/README.md +++ b/6-space-game/5-keeping-score/README.md @@ -2,7 +2,7 @@ ## Pre-Lecture Quiz -[Pre-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/37) +[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/37) In this lesson, you'll learn how to add scoring to a game and calculate lives. @@ -178,7 +178,7 @@ Your code is almost complete. Can you envision your next steps? ## Post-Lecture Quiz -[Post-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/38) +[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/38) ## Review & Self Study diff --git a/6-space-game/5-keeping-score/translations/README.es.md b/6-space-game/5-keeping-score/translations/README.es.md index 734db45d..8069afde 100644 --- a/6-space-game/5-keeping-score/translations/README.es.md +++ b/6-space-game/5-keeping-score/translations/README.es.md @@ -2,7 +2,7 @@ ![video](video-url) -## [Pre-lecture prueba](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/37) +## [Pre-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/37) En esta lección, aprenderá cómo agregar puntos a un juego y calcular vidas. @@ -173,7 +173,7 @@ Al final de este trabajo, deberías ver las pequeñas naves de 'vida' en la part 🚀Challenge: Tu código está casi completo. ¿Puedes imaginar tus próximos pasos? -## [Post-lecture prueba](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/38) +## [Post-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/38) ## Revisión y autoestudio diff --git a/6-space-game/5-keeping-score/translations/README.fr.md b/6-space-game/5-keeping-score/translations/README.fr.md index 448db363..b31e8185 100644 --- a/6-space-game/5-keeping-score/translations/README.fr.md +++ b/6-space-game/5-keeping-score/translations/README.fr.md @@ -1,8 +1,8 @@ -# Construire un jeu de l'espace - Partie 5 : scores et vies +# Construire un jeu de l'espace - Partie 5: scores et vies ## Quiz de pré-lecture -[Quiz de pré-lecture](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/37?loc=fr) +[Quiz de pré-lecture](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/37?loc=fr) Dans cette leçon, vous apprendrez à ajouter des points à un jeu et à calculer des vies. @@ -17,7 +17,7 @@ ctx.textAlign = "right"; ctx.fillText("show this on the screen", 0, 0); ``` -✅ En savoir plus sur [comment ajouter du texte à un canvas ](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text), et n'hésitez pas à rendre le vôtre plus sophistiqué ! +✅ En savoir plus sur [comment ajouter du texte à un canvas ](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text), et n'hésitez pas à rendre le vôtre plus sophistiqué! ## La vie, comme concept de jeu @@ -25,14 +25,14 @@ Le concept d'avoir une vie dans un jeu n'est qu'un nombre. Dans le contexte d'un ## Ce qu'il faut construire -Ajoutons les éléments suivants à votre jeu : +Ajoutons les éléments suivants à votre jeu: -- **Score de jeu** : Pour chaque navire ennemi détruit, le héros devrait recevoir quelques points, nous suggérons 100 points par navire. Le score du jeu devrait être affiché en bas à gauche. -- **Vie** : Votre navire a trois vies. Vous perdez une vie chaque fois qu'un navire ennemi entre en collision avec vous. Un score de vie devrait être affiché en bas à droite et être composé du graphique suivant [image de vie](solution/assets/life.png). +- **Score de jeu**: Pour chaque navire ennemi détruit, le héros devrait recevoir quelques points, nous suggérons 100 points par navire. Le score du jeu devrait être affiché en bas à gauche. +- **Vie**: Votre navire a trois vies. Vous perdez une vie chaque fois qu'un navire ennemi entre en collision avec vous. Un score de vie devrait être affiché en bas à droite et être composé du graphique suivant ![image de vie](../solution/assets/life.png). ## Étapes recommandées -Localisez les fichiers qui ont été créés pour vous dans le sous-répertoire `your-work`. Il devrait contenir les éléments suivants : +Localisez les fichiers qui ont été créés pour vous dans le sous-répertoire `your-work`. Il devrait contenir les éléments suivants: ```bash -| assets @@ -44,7 +44,7 @@ Localisez les fichiers qui ont été créés pour vous dans le sous-répertoire -| package.json ``` -Vous démarrez votre projet dans le dossier `your_work` en tapant : +Vous démarrez votre projet dans le dossier `your_work` en tapant: ```bash cd your-work @@ -55,13 +55,13 @@ Ce qui précède va démarrer un serveur HTTP sur l'adresse `http://localhost:50 ### Ajouter du code -1. **Copiez les éléments nécessaires** du dossier `solution/assets/` dans le dossier `your-work` ; vous allez ajouter un élément `life.png`. Ajoutez l'image lifeImg à la fonction window.onload : +1. **Copiez les éléments nécessaires** du dossier `solution/assets/` dans le dossier `your-work` ; vous allez ajouter un élément `life.png`. Ajoutez l'image lifeImg à la fonction window.onload: ```javascript lifeImg = await loadTexture("assets/life.png"); ``` -1. Ajoutez le `lifeImg` à la liste des éléments : +1. Ajoutez le `lifeImg` à la liste des éléments: ```javascript let heroImg, @@ -73,7 +73,7 @@ Ce qui précède va démarrer un serveur HTTP sur l'adresse `http://localhost:50 2. **Ajoutez des variables**. Ajoutez le code qui représente votre score total (0) et les vies restantes (3), affichez ces scores sur un écran. -3. **Étendre la fonction `updateGameObjects()`**. Étendre la fonction `updateGameObjects()` pour gérer les collisions avec les ennemis : +3. **Étendre la fonction `updateGameObjects()`**. Étendre la fonction `updateGameObjects()` pour gérer les collisions avec les ennemis: ```javascript enemies.forEach(enemy => { @@ -85,14 +85,14 @@ Ce qui précède va démarrer un serveur HTTP sur l'adresse `http://localhost:50 ``` 4. **Ajouter `life` et `points`**. - 1. **Initialiser les variables**. Sous `this.cooldown = 0` dans la classe `Hero` , définissez la vie et les points : + 1. **Initialiser les variables**. Sous `this.cooldown = 0` dans la classe `Hero` , définissez la vie et les points: ```javascript this.life = 3; this.points = 0; ``` - 1. **Dessinez les variables à l'écran**. Dessinez ces valeurs à l'écran : + 1. **Dessinez les variables à l'écran**. Dessinez ces valeurs à l'écran: ```javascript function drawLife() { @@ -126,7 +126,7 @@ Ce qui précède va démarrer un serveur HTTP sur l'adresse `http://localhost:50 drawLife(); ``` -1. **Mettre en œuvre les règles du jeu**. Mettez en œuvre les règles du jeu suivantes : +1. **Mettre en œuvre les règles du jeu**. Mettez en œuvre les règles du jeu suivantes: 1. **Pour chaque collision entre héros et ennemis**, retirez une vie. @@ -143,7 +143,7 @@ Ce qui précède va démarrer un serveur HTTP sur l'adresse `http://localhost:50 2. **Pour chaque laser qui touche un ennemi**, augmentez le score du jeu de 100 points. - Étendez la classe Hero pour faire cet ajout : + Étendez la classe Hero pour faire cet ajout: ```javascript incrementPoints() { @@ -151,7 +151,7 @@ Ce qui précède va démarrer un serveur HTTP sur l'adresse `http://localhost:50 } ``` - Ajoutez ces fonctions à vos émetteurs d'événements de collision : + Ajoutez ces fonctions à vos émetteurs d'événements de collision: ```javascript eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => { @@ -166,23 +166,23 @@ Ce qui précède va démarrer un serveur HTTP sur l'adresse `http://localhost:50 }); ``` -✅ Faites une petite recherche pour découvrir d'autres jeux créés à l'aide de JavaScript/Canvas. Quels sont leurs points communs ? +✅ Faites une petite recherche pour découvrir d'autres jeux créés à l'aide de JavaScript/Canvas. Quels sont leurs points communs? -À la fin de ce travail, vous devriez voir les petits vaisseaux de "vie" en bas à droite, les points en bas à gauche, et vous devriez voir votre compte de vie diminuer lorsque vous entrez en collision avec des ennemis et vos points augmenter lorsque vous tirez sur des ennemis. Bien joué ! Votre jeu est presque terminé. +À la fin de ce travail, vous devriez voir les petits vaisseaux de "vie" en bas à droite, les points en bas à gauche, et vous devriez voir votre compte de vie diminuer lorsque vous entrez en collision avec des ennemis et vos points augmenter lorsque vous tirez sur des ennemis. Bien joué! Votre jeu est presque terminé. --- ## 🚀 Challenge -Votre code est presque complet. Pouvez-vous envisager vos prochaines étapes ? +Votre code est presque complet. Pouvez-vous envisager vos prochaines étapes? ## Quiz post-lecture -[Quiz post-lecture](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/38?loc=fr) +[Quiz post-lecture](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/38?loc=fr) ## Révision et autoformation -Recherchez des moyens d'incrémenter et de décrémenter les scores et les vies. Il existe des moteurs de jeu intéressants comme [PlayFab](https://playfab.com). Comment l'utilisation de l'un d'eux pourrait-elle améliorer votre jeu ? +Recherchez des moyens d'incrémenter et de décrémenter les scores et les vies. Il existe des moteurs de jeu intéressants comme [PlayFab](https://playfab.com). Comment l'utilisation de l'un d'eux pourrait-elle améliorer votre jeu? ## Travail à faire diff --git a/6-space-game/5-keeping-score/translations/README.hi.md b/6-space-game/5-keeping-score/translations/README.hi.md index 0f814b2d..56695abe 100644 --- a/6-space-game/5-keeping-score/translations/README.hi.md +++ b/6-space-game/5-keeping-score/translations/README.hi.md @@ -2,7 +2,7 @@ ## लेक्टरसे पहलेकी क्विज़ -[लेक्टरसे पहलेकी क्विज़](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/37?loc=hi) +[लेक्टरसे पहलेकी क्विज़](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/37?loc=hi) इस पाठ में, आप सीखेंगे कि किसी खेल में स्कोरिंग कैसे जोड़ें और जीवन की गणना करें. @@ -178,7 +178,7 @@ eventEmitter = new EventEmitter(); ## पोस्ट-व्याख्यान प्रश्नोत्तरी -[पोस्ट-व्याख्यान प्रश्नोत्तरी](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/38?loc=hi) +[पोस्ट-व्याख्यान प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/38?loc=hi) ## समीक्षा और स्व अध्ययन diff --git a/6-space-game/5-keeping-score/translations/README.it.md b/6-space-game/5-keeping-score/translations/README.it.md index dd9af8a7..3794dee0 100644 --- a/6-space-game/5-keeping-score/translations/README.it.md +++ b/6-space-game/5-keeping-score/translations/README.it.md @@ -2,7 +2,7 @@ ## Quiz Pre-Lezione -[Quiz Pre-Lezione](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/37?loc=it) +[Quiz Pre-Lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/37?loc=it) In questa lezione si imparerà come aggiungere punteggi a una partita e calcolare le vite. @@ -178,7 +178,7 @@ Il codice è quasi completo. Si riescono a immaginare i prossimi passi? ## Quiz Post-Lezione -[Quiz post-lezione](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/38?loc=it) +[Quiz post-lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/38?loc=it) ## Revisione e Auto Apprendimento diff --git a/6-space-game/5-keeping-score/translations/README.ja.md b/6-space-game/5-keeping-score/translations/README.ja.md index a7936762..93f9b493 100644 --- a/6-space-game/5-keeping-score/translations/README.ja.md +++ b/6-space-game/5-keeping-score/translations/README.ja.md @@ -2,7 +2,7 @@ ## レッスン前の小テスト -[レッスン前の小テスト](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/37?loc=ja) +[レッスン前の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/37?loc=ja) このレッスンでは、ゲームに得点を加えてライフを計算する方法を学びます。 @@ -179,7 +179,7 @@ npm start ## レッスン後の小テスト -[レッスン後の小テスト](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/38?loc=ja) +[レッスン後の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/38?loc=ja) ## 復習と自己学習 diff --git a/6-space-game/5-keeping-score/translations/README.ko.md b/6-space-game/5-keeping-score/translations/README.ko.md index 715db614..26908534 100644 --- a/6-space-game/5-keeping-score/translations/README.ko.md +++ b/6-space-game/5-keeping-score/translations/README.ko.md @@ -2,7 +2,7 @@ ## 강의 전 퀴즈 -[Pre-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/37?loc=ko) +[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/37?loc=ko) 이 강의에서는 어떻게 게임에서 점수를 내고 생명을 구하는 가에 대하여 배웁니다. @@ -178,7 +178,7 @@ npm start ## 강의 후 퀴즈 -[Post-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/38?loc=ko) +[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/38?loc=ko) ## 리뷰 & 자기주도 학습 diff --git a/6-space-game/5-keeping-score/translations/README.ms.md b/6-space-game/5-keeping-score/translations/README.ms.md index 61158378..d83ecd51 100644 --- a/6-space-game/5-keeping-score/translations/README.ms.md +++ b/6-space-game/5-keeping-score/translations/README.ms.md @@ -2,7 +2,7 @@ ## Kuiz Pra Kuliah -[Kuiz Pra Kuliah](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/37) +[Kuiz Pra Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/37) Dalam pelajaran ini, anda akan belajar bagaimana menambahkan skor pada permainan dan mengira kehidupan. @@ -178,7 +178,7 @@ Kod anda hampir lengkap. Bolehkah anda membayangkan langkah seterusnya? ## Kuiz Pasca Kuliah -[Kuiz Pasca Kuliah](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/38) +[Kuiz Pasca Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/38) ## Mengkaji & Belajar Sendiri 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..67d60327 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 @@ -2,7 +2,7 @@ ## 課前測驗 -[課前測驗](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/37?loc=zh_tw) +[課前測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/37?loc=zh_tw) 在這堂課中，你會學習如何為遊戲加入計分功能與計算性命數。 @@ -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)，你可以自由地豐富你的文字！ ## 性命，一個遊戲概念 @@ -178,7 +178,7 @@ npm start ## 課後測驗 -[課後測驗](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/38?loc=zh_tw) +[課後測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/38?loc=zh_tw) ## 複習與自學 diff --git a/6-space-game/6-end-condition/README.md b/6-space-game/6-end-condition/README.md index d08e270c..19761af8 100644 --- a/6-space-game/6-end-condition/README.md +++ b/6-space-game/6-end-condition/README.md @@ -2,7 +2,7 @@ ## Pre-Lecture Quiz -[Pre-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/39) +[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/39) There are different ways to express and *end condition* in a game. It's up to you as the creator of the game to say why the game has ended. Here are some reasons, if we assume we are talking about the space game you have been building so far: @@ -52,7 +52,7 @@ The above will start a HTTP Server on address `http://localhost:5000`. Open up a ### Add code -1. **Track end condition**. Add code that keeps track of the number of enemies, or if the hero ship has been destroyedby adding these two functions: +1. **Track end condition**. Add code that keeps track of the number of enemies, or if the hero ship has been destroyed by adding these two functions: ```javascript function isHeroDead() { @@ -211,7 +211,7 @@ Add a sound! Can you add a sound to enhance your game play, maybe when there's a ## Post-Lecture Quiz -[Post-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/40) +[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/40) ## Review & Self Study diff --git a/6-space-game/6-end-condition/translations/README.es.md b/6-space-game/6-end-condition/translations/README.es.md index 62d0d662..27137641 100644 --- a/6-space-game/6-end-condition/translations/README.es.md +++ b/6-space-game/6-end-condition/translations/README.es.md @@ -2,7 +2,7 @@ ![video](video-url) -## [Pre-lecture prueba](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/39) +## [Pre-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/39) Hay diferentes formas de expresar y *condición final* en un juego. Depende de usted, como creador del juego, decir por qué ha terminado. Aquí hay algunas razones, si asumimos que estamos hablando del juego espacial que has estado construyendo hasta ahora: @@ -205,7 +205,7 @@ Lo anterior iniciará un servidor HTTP en la dirección `http://localhost:5000`. 🚀 Desafío: ¡Agrega un sonido! ¿Puedes agregar un sonido para mejorar tu juego, tal vez cuando hay un golpe de láser, o el héroe muere o gana? Eche un vistazo a este [sandbox](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) para aprender a reproducir sonido con JavaScript. -## [Post-lecture prueba]((https://happy-mud-02d95f10f.azurestaticapps.net/quiz/40) +## [Post-lecture prueba]((https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/40) ## Revisión y autoestudio diff --git a/6-space-game/6-end-condition/translations/README.fr.md b/6-space-game/6-end-condition/translations/README.fr.md index cd729f37..94246239 100644 --- a/6-space-game/6-end-condition/translations/README.fr.md +++ b/6-space-game/6-end-condition/translations/README.fr.md @@ -1,15 +1,15 @@ -# Construire un jeu de l'espace Partie 6 : Fin et redémarrage +# Construire un jeu de l'espace Partie 6: Fin et redémarrage ## Quiz de prélecture -[Quiz de prélecture](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/39?loc=fr) +[Quiz de prélecture](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/39?loc=fr) -Il existe différentes façons d'exprimer une "condition de fin" dans un jeu. C'est à vous, en tant que créateur du jeu, de dire pourquoi le jeu est terminé. Voici quelques raisons, si nous supposons que nous parlons du jeu spatial que vous avez construit jusqu'à présent : +Il existe différentes façons d'exprimer et de terminer une condition dans un jeu. C'est à vous, en tant que créateur du jeu, de dire pourquoi le jeu est terminé. Voici quelques raisons, si nous supposons que nous parlons du jeu spatial que vous avez construit jusqu'à présent: -- **`N`Les navires ennemis ont été détruits** : Si vous divisez un jeu en plusieurs niveaux, il est assez fréquent que vous deviez détruire `N` vaisseaux ennemis pour terminer un niveau. -- **Votre navire a été détruit** : Il y a certainement des jeux où vous perdez la partie si votre vaisseau est détruit. Une autre approche commune est que vous avez le concept de vies. Chaque fois que votre vaisseau est détruit, une vie est déduite. Une fois que toutes les vies ont été perdues, vous perdez la partie. -- **Vous avez collecté `N` points** : Une autre condition de fin commune est que vous accumuliez des points. La façon dont vous obtenez des points dépend de vous, mais il est assez courant d'attribuer des points à diverses activités comme la destruction d'un navire ennemi ou la collecte d'objets que les objets *laissent tomber* lorsqu'ils sont détruits. -- Compléter un niveau** : Cela peut impliquer plusieurs conditions telles que `X` navires ennemis détruits, `Y` points collectés ou peut-être qu'un objet spécifique a été collecté. +- **`N`Les navires ennemis ont été détruits**: Si vous divisez un jeu en plusieurs niveaux, il est assez fréquent que vous deviez détruire `N` vaisseaux ennemis pour terminer un niveau. +- **Votre navire a été détruit**: Il y a certainement des jeux où vous perdez la partie si votre vaisseau est détruit. Une autre approche commune est que vous avez le concept de vies. Chaque fois que votre vaisseau est détruit, une vie est déduite. Une fois que toutes les vies ont été perdues, vous perdez la partie. +- **Vous avez collecté `N` points**: Une autre condition de fin commune est que vous accumuliez des points. La façon dont vous obtenez des points dépend de vous, mais il est assez courant d'attribuer des points à diverses activités comme la destruction d'un navire ennemi ou la collecte d'objets que les objets *laissent tomber* lorsqu'ils sont détruits. +- **Compléter un niveau**: Cela peut impliquer plusieurs conditions telles que `X` navires ennemis détruits, `Y` points collectés ou peut-être qu'un objet spécifique a été collecté. ## Redémarrage @@ -20,14 +20,14 @@ Si les gens apprécient votre jeu, ils auront probablement envie d'y rejouer. Lo ## Ce qu'il faut construire -Vous allez ajouter ces règles à votre jeu : +Vous allez ajouter ces règles à votre jeu: 1. **Gagner la partie**. Une fois que tous les navires ennemis ont été détruits, vous gagnez la partie. Affichez en outre une sorte de message de victoire. -1. **Démarrer**. Une fois que toutes les vies sont perdues ou que la partie est gagnée, vous devez proposer un moyen de redémarrer la partie. N'oubliez pas ! Vous devrez réinitialiser le jeu et l'état précédent du jeu devra être effacé. +1. **Démarrer**. Une fois que toutes les vies sont perdues ou que la partie est gagnée, vous devez proposer un moyen de redémarrer la partie. N'oubliez pas! Vous devrez réinitialiser le jeu et l'état précédent du jeu devra être effacé. ## Mesures recommandées -Localisez les fichiers qui ont été créés pour vous dans le sous-répertoire `your-work`. Il devrait contenir les éléments suivants : +Localisez les fichiers qui ont été créés pour vous dans le sous-répertoire `your-work`. Il devrait contenir les éléments suivants: ```bash -| assets @@ -40,7 +40,7 @@ Localisez les fichiers qui ont été créés pour vous dans le sous-répertoire -| package.json ``` -Vous démarrez votre projet dans le dossier `your_work` en tapant : +Vous démarrez votre projet dans le dossier `your_work` en tapant: ```bash cd your-work @@ -49,11 +49,11 @@ npm start Ce qui précède va démarrer un serveur HTTP sur l'adresse `http://localhost:5000`. Ouvrez un navigateur et entrez cette adresse. Votre jeu devrait être dans un état jouable. -> astuce : pour éviter les avertissements dans Visual Studio Code, modifiez la fonction `window.onload` pour appeler `gameLoopId` tel quel (sans `let`), et déclarez le gameLoopId en haut du fichier, indépendamment : `let gameLoopId;` +> astuce: pour éviter les avertissements dans Visual Studio Code, modifiez la fonction `window.onload` pour appeler `gameLoopId` tel quel (sans `let`), et déclarez le gameLoopId en haut du fichier, indépendamment: `let gameLoopId;` ### Ajouter du code -1. **Condition de fin de parcours**. Ajoutez du code qui garde la trace du nombre d'ennemis, ou si le vaisseau du héros a été détruit en ajoutant ces deux fonctions : +1. **Condition de fin de parcours**. Ajoutez du code qui garde la trace du nombre d'ennemis, ou si le vaisseau du héros a été détruit en ajoutant ces deux fonctions: ```javascript function isHeroDead() { @@ -66,7 +66,7 @@ Ce qui précède va démarrer un serveur HTTP sur l'adresse `http://localhost:50 } ``` -1. **Ajouter de la logique aux gestionnaires de messages**. Modifiez le `eventEmitter` pour gérer ces conditions : +1. **Ajouter de la logique aux gestionnaires de messages**. Modifiez le `eventEmitter` pour gérer ces conditions: ```javascript eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => { @@ -100,7 +100,7 @@ Ce qui précède va démarrer un serveur HTTP sur l'adresse `http://localhost:50 }); ``` -1. **Ajouter de nouveaux types de messages**. Ajoutez ces messages à l'objet constantes : +1. **Ajouter de nouveaux types de messages**. Ajoutez ces messages à l'objet constants: ```javascript GAME_END_LOSS: "GAME_END_LOSS", @@ -109,7 +109,7 @@ Ce qui précède va démarrer un serveur HTTP sur l'adresse `http://localhost:50 1. **Ajouter le code de redémarrage** code qui redémarre le jeu à la pression d'un bouton sélectionné. - 1. **Écouter la touche pressée `Enter`**. Modifiez l'eventListener de votre fenêtre pour écouter cette pression : + 1. **Écouter la touche pressée `Enter`**. Modifiez l'eventListener de votre fenêtre pour écouter cette pression: ```javascript else if(evt.key === "Enter") { @@ -117,17 +117,17 @@ Ce qui précède va démarrer un serveur HTTP sur l'adresse `http://localhost:50 } ``` - 1. **Ajouter un message de redémarrage**. Ajoutez ce message à votre constante de messages : + 1. **Ajouter un message de redémarrage**. Ajoutez ce message à votre constante Messages: ```javascript KEY_EVENT_ENTER: "KEY_EVENT_ENTER", ``` -1. **Mettre en œuvre les règles du jeu**. Mettez en œuvre les règles du jeu suivantes : +1. **Mettre en œuvre les règles du jeu**. Mettez en œuvre les règles du jeu suivantes: 1. **Condition de victoire du joueur**. Lorsque tous les navires ennemis sont détruits, affichez un message de victoire. - 1. Tout d'abord, créez une fonction `displayMessage()` : + 1. Tout d'abord, créez une fonction `displayMessage()`: ```javascript function displayMessage(message, color = "red") { @@ -138,7 +138,7 @@ Ce qui précède va démarrer un serveur HTTP sur l'adresse `http://localhost:50 } ``` - 1. Créez une fonction `endGame()` : + 1. Créez une fonction `endGame()`: ```javascript function endGame(win) { @@ -165,7 +165,7 @@ Ce qui précède va démarrer un serveur HTTP sur l'adresse `http://localhost:50 1. **Logique de redémarrage**. Lorsque toutes les vies sont perdues ou que le joueur a gagné la partie, affichez que le jeu peut être redémarré. En outre, redémarrez le jeu lorsque la touche *redémarrage* est enfoncée (vous pouvez décider quelle touche doit être affectée au redémarrage). - 1. Créez la fonction `resetGame()` : + 1. Créez la fonction `resetGame()`: ```javascript function resetGame() { @@ -202,17 +202,17 @@ Ce qui précède va démarrer un serveur HTTP sur l'adresse `http://localhost:50 } ``` -👽 💥 🚀 Félicitations, capitaine ! Ton jeu est terminé ! Bien joué ! 🚀 💥 👽 +👽 💥 🚀 Félicitations, capitaine! Ton jeu est terminé! Bien joué! 🚀 💥 👽 --- ## 🚀 Défi -Ajoutez un son ! Pouvez-vous ajouter un son pour améliorer votre jeu, par exemple lorsqu'un laser est touché, ou lorsque le héros meurt ou gagne ? Jetez un coup d'œil à ce [bac à sable](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) pour apprendre à jouer un son en utilisant JavaScript. +Ajoutez un son! Pouvez-vous ajouter un son pour améliorer votre jeu, par exemple lorsqu'un laser est touché, ou lorsque le héros meurt ou gagne? Jetez un coup d'œil à ce [bac à sable](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) pour apprendre à jouer un son en utilisant JavaScript. ## Quiz post-lecture -[Quiz post-lecture](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/40?loc=fr) +[Quiz post-lecture](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/40?loc=fr) ## Révision et autoformation diff --git a/6-space-game/6-end-condition/translations/README.hi.md b/6-space-game/6-end-condition/translations/README.hi.md index d3750554..a396118b 100644 --- a/6-space-game/6-end-condition/translations/README.hi.md +++ b/6-space-game/6-end-condition/translations/README.hi.md @@ -2,7 +2,7 @@ ## प्री-रीडिंग क्विज -[प्री-रीडिंग क्विज](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/39?loc=hi) +[प्री-रीडिंग क्विज](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/39?loc=hi) एक खेल में व्यक्त करने और _अंतिम स्थिति_ के विभिन्न तरीके हैं। यह गेम के निर्माता के रूप में यह कहना है कि खेल क्यों समाप्त हो गया है। यहाँ कुछ कारण हैं, अगर हम मान लें कि हम उस अंतरिक्ष खेल के बारे में बात कर रहे हैं जो आप अभी तक बना रहे हैं: @@ -213,7 +213,7 @@ npm start ## पोस्ट-व्याख्यान प्रश्नोत्तरी -[पोस्ट-व्याख्यान प्रश्नोत्तरी](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/40?loc=hi) +[पोस्ट-व्याख्यान प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/40?loc=hi) ## समीक्षा और स्व अध्ययन diff --git a/6-space-game/6-end-condition/translations/README.it.md b/6-space-game/6-end-condition/translations/README.it.md index 8215f019..3e464252 100644 --- a/6-space-game/6-end-condition/translations/README.it.md +++ b/6-space-game/6-end-condition/translations/README.it.md @@ -2,7 +2,7 @@ ## Quiz Pre-Lezione -[Quiz Pre-Lezione](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/39?loc=it) +[Quiz Pre-Lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/39?loc=it) Esistono diversi modi per esprimere una *condizione di fine gioco*. Spetta al creatore del gioco dire perché il gioco è finito. Ecco alcuni motivi, si supponga di parlare del gioco spaziale costruito finora: @@ -211,7 +211,7 @@ Aggiungere un suono! Si può aggiungere un suono per migliorare il gioco, magari ## Quiz Post-Lezione -[Quiz post-lezione](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/40?loc=it) +[Quiz post-lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/40?loc=it) ## Revisione e Auto Apprendimento diff --git a/6-space-game/6-end-condition/translations/README.ja.md b/6-space-game/6-end-condition/translations/README.ja.md index 66822c1c..1aec6f38 100644 --- a/6-space-game/6-end-condition/translations/README.ja.md +++ b/6-space-game/6-end-condition/translations/README.ja.md @@ -2,7 +2,7 @@ ## レッスン前の小テスト -[レッスン前の小テスト](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/39?loc=ja) +[レッスン前の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/39?loc=ja) ゲーム内での表現方法や *終了条件* の表現方法は様々です。なぜゲームが終了したのかは、ゲームを作る側のあなた次第です。ここでは、あなたが今まで作ってきた宇宙ゲームの話をしていると仮定して、いくつかの理由を挙げてみましょう。 @@ -212,7 +212,7 @@ npm start ## レッスン後の小テスト -[レッスン後の小テスト](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/40?loc=ja) +[レッスン後の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/40?loc=ja) ## 復習と自己学習 diff --git a/6-space-game/6-end-condition/translations/README.ko.md b/6-space-game/6-end-condition/translations/README.ko.md index 688693de..d1e24553 100644 --- a/6-space-game/6-end-condition/translations/README.ko.md +++ b/6-space-game/6-end-condition/translations/README.ko.md @@ -2,7 +2,7 @@ ## 강의 전 퀴즈 -[Pre-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/39?loc=ko) +[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/39?loc=ko) 게임에서 *조건을 표현하고 종료*하는 여러 방식이 있습니다. 게임이 종료된 이유를 말하는 것은 게임 크리에이터의 일입니다. 지금까지 만든 space 게임에 대해 말하고 있다고 가정하면, 몇 가지 이유가 있습니다: @@ -211,7 +211,7 @@ npm start ## 강의 후 퀴즈 -[Post-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/40?loc=ko) +[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/40?loc=ko) ## 리뷰 & 자기주도 학습 diff --git a/6-space-game/6-end-condition/translations/README.ms.md b/6-space-game/6-end-condition/translations/README.ms.md index 5afa02d1..9572fa33 100644 --- a/6-space-game/6-end-condition/translations/README.ms.md +++ b/6-space-game/6-end-condition/translations/README.ms.md @@ -2,7 +2,7 @@ ## Kuiz Pra Kuliah -[Kuiz Pra Kuliah](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/39) +[Kuiz Pra Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/39) Terdapat pelbagai cara untuk menyatakan dan *keadaan akhir* dalam permainan. Terserah anda sebagai pencipta permainan untuk mengatakan mengapa permainan ini berakhir. Berikut adalah beberapa sebab, jika kita menganggap bahawa kita sedang membincangkan permainan ruang angkasa yang anda buat sejauh ini: @@ -211,7 +211,7 @@ Tambahkan suara! Bolehkah anda menambahkan suara untuk meningkatkan permainan an ## Kuiz Pasca Kuliah -[Kuiz Pasca Kuliah](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/40) +[Kuiz Pasca Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/40) ## Mengkaji & Belajar Sendiri diff --git a/6-space-game/6-end-condition/translations/README.zh-tw.md b/6-space-game/6-end-condition/translations/README.zh-tw.md index 29b75fa6..909cd21d 100644 --- a/6-space-game/6-end-condition/translations/README.zh-tw.md +++ b/6-space-game/6-end-condition/translations/README.zh-tw.md @@ -2,7 +2,7 @@ ## 課前測驗 -[課前測驗](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/39?loc=zh_tw) +[課前測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/39?loc=zh_tw) 有許多方式可以表達遊戲中的*結束狀態*。這都取決於你這位遊戲開發者，定義遊戲結束的理由。假設我們討論這款已經開發許久的太空遊戲，以下是遊戲結束的理由： @@ -211,7 +211,7 @@ npm start ## 課後測驗 -[課後測驗](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/40?loc=zh_tw) +[課後測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/40?loc=zh_tw) ## 複習與自學 diff --git a/6-space-game/translations/README.ta.md b/6-space-game/translations/README.ta.md new file mode 100644 index 00000000..d482edf1 --- /dev/null +++ b/6-space-game/translations/README.ta.md @@ -0,0 +1,31 @@ +# விண்வெளி விளையாட்டை உருவாக்கு + +மேலும் மேம்பட்ட ஜாவாஸ்கிரிப்ட் அடிப்படைகளை கற்பிக்க ஒரு விண்வெளி விளையாட்டு + +இந்த பாடத்தில் உங்கள் சொந்த விண்வெளி விளையாட்டை எவ்வாறு உருவாக்குவது என்பதை நீங்கள் கற்றுக்கொள்ளலாம். நீங்கள் எப்போதாவது "விண்வெளி படையெடுப்பாளர்கள்" விளையாட்டை விளையாடியிருந்தால், இந்த விளையாட்டு அதே யோசனையைக் கொண்டுள்ளது: மேலே இருந்து கீழே வரும் அரக்கர்கள் மீது ஒரு விண்கலம் மற்றும் தீ. இங்கே முடிக்கப்பட்ட விளையாட்டு எப்படி இருக்கும்: + +![Finished game](../images/pewpew.gif) + +இந்த ஆறு பாடங்களில் நீங்கள் பின்வருவனவற்றைக் கற்றுக்கொள்ளலாம்: + +- **தொடர்பு** ஒரு திரையில் விஷயங்களை வரைய கேன்வாஸ் உறுப்பு +- **புரிந்து** கார்ட்டீசியன் ஒருங்கிணைப்பு அமைப்பு +- **கற்றுக்கொள்ளுங்கள்** பராமரிக்க மற்றும் நீட்டிக்க எளிதான ஒலி விளையாட்டு கட்டிடக்கலை உருவாக்க பப்-துணை முறை +- **நெம்புகோலியக்கம்** ஒத்திசைவு / விளையாட்டு வளங்களை ஏற்ற காத்திருக்கிறது +- **கையாள** விசைப்பலகை நிகழ்வுகள் + +## கண்ணோட்டம் + +- புனைவி + - [ஜாவாஸ்கிரிப்ட் மூலம் விளையாட்டுகளை உருவாக்குவதற்கான அறிமுகம்](../1-introduction/README.md) +- Practice + - [கேன்வாஸ் வரைதல்](../2-drawing-to-canvas/README.md) + - [திரையைச் சுற்றி நகரும் கூறுகள்](../3-moving-elements-around/README.md) + - [மோதல் கண்டறிதல்](../4-collision-detection/README.md) + - [மதிப்பெண் வைத்து](../5-keeping-score/README.md) + - [விளையாட்டை முடித்து மறுதொடக்கம் செய்தல்](../6-end-condition/README.md) + +## கடன்கள் + +இதற்கு பயன்படுத்தப்பட்ட சொத்துக்கள் https://www.kenney.nl/. +நீங்கள் விளையாட்டுகளை உருவாக்குகிறீர்கள் என்றால், இவை சில தீவிரமான நல்ல சொத்துக்கள், நிறைய இலவசம் மற்றும் சில பணம் செலுத்தப்படுகின்றன. diff --git a/7-bank-project/1-template-route/README.md b/7-bank-project/1-template-route/README.md index ac413312..5f7422b5 100644 --- a/7-bank-project/1-template-route/README.md +++ b/7-bank-project/1-template-route/README.md @@ -2,7 +2,7 @@ ## Pre-Lecture Quiz -[Pre-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/41) +[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/41) ### Introduction @@ -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 `