Merge branch 'main' into backup

pull/722/head
Justin J Daniel 3 years ago committed by GitHub
commit a3de0500e8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -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"

@ -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'

6
.gitignore vendored

@ -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
.DS_Store

@ -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

@ -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

@ -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

@ -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

@ -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

@ -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)
## समीक्षा और स्व अध्ययन

@ -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

@ -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

@ -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)
## レビュー & 自習

@ -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)
## 리뷰 & 자기주도 학습

@ -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

@ -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

@ -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

@ -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)

@ -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)

@ -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)
## 复习 & 自学

@ -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)
## 複習與自學

@ -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. |

@ -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

@ -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

@ -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.

@ -0,0 +1,12 @@
# ஆவணத்தைப் படித்தல்
## செயல்துறைக்கட்டளை
ஒரு வலை டெவலப்பர் தேவைஎன்று பல கருவிகள் உள்ளன [வாடிக்கையாளர் பக்க கருவிகளுக்கு எம்டிஎன் இன் ஆவணங்கள்](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview).பாடத்தில் உள்ளடக்கப்படாத 3 கருவிகளைத் தேர்ந்தெடுத்து, ஒரு வலை டெவலப்பர் ஏன் அதைப் பயன்படுத்துவார் என்பதை விளக்கவும், இந்த வகையின் கீழ் வரும் ஒரு கருவியைத் தேடவும் மற்றும் அதன் ஆவணங்களைப் பகிர்ந்து கொள்ளவும். எம்டிஎன் ஐ ஆவணத்தில் ஒரே கருவி உதாரணத்தைப் பயன்படுத்த வேண்டாம்.
## இயல் மேல்வரி
பின்பற்றத்தக்க | போதிய | தேவை மேம்பாடு
--- | --- | -- |
|வலை உருவாக்குநர் ஏன் கருவியைப் பயன்படுத்துவார் என்பதை விளக்கினார்| எப்படி விளக்கினார், ஆனால் டெவலப்பர் ஏன் கருவியைப் பயன்படுத்துவார் என்று அல்ல| ஒரு டெவலப்பர் கருவியை எவ்வாறு அல்லது ஏன் பயன்படுத்துவார் என்பதைக் குறிப்பிடவில்லை |

@ -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 文件當中。
## 學習評量

@ -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 youll 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 youll 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

@ -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

@ -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

@ -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. Noubliez pas den 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 lautre. 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

@ -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)
## समीक्षा और स्व अध्ययन

@ -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

@ -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

@ -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)
## 리뷰 & 자기주도 학습

@ -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

@ -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

@ -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)

@ -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)
## Обзор и самообучение

@ -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 <file>..." to update what will be committed)
(use "git checkout -- <file>..." 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)

@ -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)
## 复习 & 自学

@ -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)
## 複習與自學

@ -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

@ -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
</html>
```
## [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

@ -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

@ -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 @@
<a href="#" aria-label="Widget description">description</a>
```
✅ सामान्य तौर पर, ऊपर वर्णित शब्दार्थ मार्कअप का उपयोग ARIA के उपयोग को बढ़ा देता है, लेकिन कभी-कभी विभिन्न HTML विजेट के लिए कोई शब्दार्थ समतुल्य नहीं होता है। एक अच्छा उदाहरण एक पेड़ है। एक पेड़ के लिए कोई HTML समतुल्य नहीं है, इसलिए आप इस तत्व के लिए एक उचित भूमिका और aria मान के साथ जेनेरिक `<div>` की पहचान करते हैं। [ARIA पर MDN प्रलेखन](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) में अधिक उपयोगी जानकारी है।
✅ सामान्य तौर पर, ऊपर वर्णित शब्दार्थ मार्कअप का उपयोग ARIA के उपयोग को बढ़ा देता है, लेकिन कभी-कभी विभिन्न HTML विजेट के लिए कोई शब्दार्थ समतुल्य नहीं होता है। एक अच्छा उदाहरण एक पेड़ है। एक पेड़ के लिए कोई HTML समतुल्य नहीं है, इसलिए आप इस तत्व के लिए एक उचित भूमिका और aria मान के साथ जेनेरिक `<div>` की पहचान करते हैं। [ARIA पर MDN प्रलेखन](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) में अधिक उपयोगी जानकारी है।
```html
<h2 id="tree-label">File Viewer</h2>
@ -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)
## समीक्षा और स्व अध्ययन

@ -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

@ -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

@ -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)
## 復習と自己学習

@ -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)
## 리뷰 & 자기주도 학습

@ -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

@ -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
<a href="#" aria-label="Widget description">beschrijving</a>
```
✅ 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 `<div>` 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 `<div>` 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
<h2 id="tree-label">File Viewer</h2>
@ -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

@ -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

@ -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)
## 复习 & 自学

@ -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 提供完整的網頁造型控制,你可以讓文字框框線隱藏或是
<a href="#" aria-label="Widget description">description</a>
```
✅ 總體而言,使用語義化標籤得以取代 ARIA 功能,但是這些標籤無法全面性地覆蓋 HTML 的各式物件。樹(Tree)就是一種例子。沒有 HTML 物件能處理一棵樹,所以你可以在 `<div>` 元素中加上 aria 數值。[關於 ARIA 的 MDN 技術文件](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA)說明許多有用的資訊。
✅ 總體而言,使用語義化標籤得以取代 ARIA 功能,但是這些標籤無法全面性地覆蓋 HTML 的各式物件。樹(Tree)就是一種例子。沒有 HTML 物件能處理一棵樹,所以你可以在 `<div>` 元素中加上 aria 數值。[關於 ARIA 的 MDN 技術文件](https://developer.mozilla.org/docs/Web/Accessibility/ARIA)說明許多有用的資訊。
```html
<h2 id="tree-label">File Viewer</h2>
@ -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)
## 複習與自學

@ -6,7 +6,6 @@
## सरनामा
| मानदंड | उदाहरणात्मक |
पर्याप्त | सुधार की जरूरत |
| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | --------------------------- |
|मानदंड|उदाहरणात्मक|पर्याप्त|सुधार की जरूरत|
|--------------|------|---------------------------|---------------------------|
| छात्र की रिपोर्ट | साइट कैसे अपर्याप्त है, इस पर पैराग्राफ शामिल हैं, पीडीएफ के रूप में कैप्चर की गई लाइटहाउस रिपोर्ट, सुधार करने के लिए दस बिंदुओं की एक सूची, इसे कैसे सुधारें, इस पर विवरण के साथ। | आवश्यक का 20% गायब है | आवश्यक का 50% गायब है |

@ -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)
### Авторы

@ -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/)

@ -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

@ -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

@ -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

@ -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

@ -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)
## समीक्षा और स्व अध्ययन

@ -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

@ -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

@ -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)
## 復習と自己学習

@ -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)
## 리뷰 & 자기주도 학습

@ -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

@ -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

@ -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

@ -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)
## 复习 & 自学

@ -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)
## 複習與自學

@ -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

@ -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

@ -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)

@ -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

@ -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), क्योंकि वे कोड बेस में उपयोग किए जा रहे हैं। एक फ़ंक्शन लिखने का अभ्यास करें, और फिर इस सिंटैक्स के साथ इसे फिर से लिखना।
## असाइनमेंट

@ -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

@ -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

@ -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)
## 復習と自己学習

@ -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)
## 리뷰 & 자기주도 학습

@ -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

@ -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

@ -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)
## 复习 & 自学

@ -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),它們越來越常被用在程式碼上。試著寫個函式,再改寫成箭頭語法。
## 作業

@ -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

@ -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

@ -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

@ -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 ? <return this if true> : <return this if false>
```
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)

@ -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)
## समीक्षा और स्व अध्ययन

@ -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

@ -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

@ -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)
## 復習と自己学習

@ -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)
## 리뷰 & 자기주도 학습

@ -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

@ -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

@ -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)
## 复习 & 自学

@ -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/)

@ -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

@ -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

@ -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

Some files were not shown because too many files have changed in this diff Show More

Loading…
Cancel
Save