From ea39a8ea93f0eb41d7dfbb147eab5e1314f3059a Mon Sep 17 00:00:00 2001 From: Vedant Jajoo <45591748+coderjojo@users.noreply.github.com> Date: Wed, 18 Nov 2020 13:08:52 +0530 Subject: [PATCH 01/14] Replace link to image folder --- 3-terrarium/1-intro-to-html/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/3-terrarium/1-intro-to-html/README.md b/3-terrarium/1-intro-to-html/README.md index 1710bb68..9099bd01 100644 --- a/3-terrarium/1-intro-to-html/README.md +++ b/3-terrarium/1-intro-to-html/README.md @@ -106,7 +106,7 @@ Now, you can start building out your page. Normally, you use `
` tags to cre One html tag that doesn't need a closing tag is the `` tag, because it has a `src` element that contains all the information the page needs to render the item. -Create a folder in your app called `images` and in that, add all the images in the [source code folder](../images); (there are 14 images of plants). +Create a folder in your app called `images` and in that, add all the images in the [source code folder](../solution/images); (there are 14 images of plants). ### Task From b089e5888c7720aeb5c374534054cd5ccb9c86c8 Mon Sep 17 00:00:00 2001 From: Mithesh Date: Wed, 18 Nov 2020 13:30:07 +0530 Subject: [PATCH 02/14] Update pre-lecture-quiz.md Remove duplicate 'most' --- .../.github/pre-lecture-quiz.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/.github/pre-lecture-quiz.md b/1-getting-started-lessons/1-intro-to-programming-languages/.github/pre-lecture-quiz.md index 2032a9d3..3d829977 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/.github/pre-lecture-quiz.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/.github/pre-lecture-quiz.md @@ -11,7 +11,7 @@ - [ ] Hardware - [ ] Video game software -1. Which one of these tools would most most likely be in a web developer's environment? +1. Which one of these tools would most likely be in a web developer's environment? - [ ] Hardware, like a Raspberry Pi - [ ] Browser DevTools From 6bbcc84d4e65df5a29407a0b1d8c345cf4074bd1 Mon Sep 17 00:00:00 2001 From: Mithesh Date: Wed, 18 Nov 2020 13:37:18 +0530 Subject: [PATCH 03/14] Update pre-lecture-quiz.md Update question numbers for the quiz --- .../.github/pre-lecture-quiz.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/.github/pre-lecture-quiz.md b/1-getting-started-lessons/1-intro-to-programming-languages/.github/pre-lecture-quiz.md index 2032a9d3..2ccbd1c7 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/.github/pre-lecture-quiz.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/.github/pre-lecture-quiz.md @@ -5,13 +5,13 @@ - [ ] True - [ ] False -1. Low level languages are a popular choice for: +2. Low level languages are a popular choice for: - [ ] Websites - [ ] Hardware - [ ] Video game software -1. Which one of these tools would most most likely be in a web developer's environment? +3. Which one of these tools would most most likely be in a web developer's environment? - [ ] Hardware, like a Raspberry Pi - [ ] Browser DevTools From d93cb827e4bc5d8793841856ffd84f00a610e921 Mon Sep 17 00:00:00 2001 From: Mithesh Date: Wed, 18 Nov 2020 13:39:06 +0530 Subject: [PATCH 04/14] Update post-lecture-quiz.md Update question numbers for the quiz --- .../.github/post-lecture-quiz.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/.github/post-lecture-quiz.md b/1-getting-started-lessons/1-intro-to-programming-languages/.github/post-lecture-quiz.md index 54b7b50f..1fbc51d8 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/.github/post-lecture-quiz.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/.github/post-lecture-quiz.md @@ -6,12 +6,12 @@ - [ ] JavaScript - [ ] Bash -1. Development environments are unique to each developer +2. Development environments are unique to each developer - [ ] True - [ ] False -1. What will a developer do to fix buggy code? +3. What will a developer do to fix buggy code? - [ ] Syntax highlighting - [ ] Debugging From 24767bc5941ed082c0509dcd09888fcba726e43c Mon Sep 17 00:00:00 2001 From: AmlanSaikia Date: Wed, 18 Nov 2020 16:23:28 +0530 Subject: [PATCH 05/14] Corrected the numbering in the pre/post quiz --- .../.github/post-lecture-quiz.md | 4 ++-- .../.github/pre-lecture-quiz.md | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/.github/post-lecture-quiz.md b/1-getting-started-lessons/1-intro-to-programming-languages/.github/post-lecture-quiz.md index 54b7b50f..1fbc51d8 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/.github/post-lecture-quiz.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/.github/post-lecture-quiz.md @@ -6,12 +6,12 @@ - [ ] JavaScript - [ ] Bash -1. Development environments are unique to each developer +2. Development environments are unique to each developer - [ ] True - [ ] False -1. What will a developer do to fix buggy code? +3. What will a developer do to fix buggy code? - [ ] Syntax highlighting - [ ] Debugging diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/.github/pre-lecture-quiz.md b/1-getting-started-lessons/1-intro-to-programming-languages/.github/pre-lecture-quiz.md index 2032a9d3..2ccbd1c7 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/.github/pre-lecture-quiz.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/.github/pre-lecture-quiz.md @@ -5,13 +5,13 @@ - [ ] True - [ ] False -1. Low level languages are a popular choice for: +2. Low level languages are a popular choice for: - [ ] Websites - [ ] Hardware - [ ] Video game software -1. Which one of these tools would most most likely be in a web developer's environment? +3. Which one of these tools would most most likely be in a web developer's environment? - [ ] Hardware, like a Raspberry Pi - [ ] Browser DevTools From cc62f70f2fefa64b8d6458aa020dc73299b683e9 Mon Sep 17 00:00:00 2001 From: Rahul RK <47377566+DevTMK@users.noreply.github.com> Date: Wed, 18 Nov 2020 20:36:26 +0530 Subject: [PATCH 06/14] js-basics: Fix setTimeout syntax --- 2-js-basics/2-functions-methods/README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/2-js-basics/2-functions-methods/README.md b/2-js-basics/2-functions-methods/README.md index ac498ddc..4c75ca35 100644 --- a/2-js-basics/2-functions-methods/README.md +++ b/2-js-basics/2-functions-methods/README.md @@ -139,7 +139,7 @@ function displayDone() { console.log('3 seconds has elapsed'); } // timer value is in milliseconds -setTimeout(3000, displayDone); +setTimeout(displayDone, 3000); ``` ### Anonymous functions @@ -151,9 +151,9 @@ When we are passing a function as a parameter we can bypass creating one in adva Let's rewrite the code above to use an anonymous function: ```javascript -setTimeout(3000, function() { +setTimeout(function() { console.log('3 seconds has elapsed'); -}); +}, 3000); ``` If you run our new code you'll notice we get the same results. We've created a function, but didn't have to give it a name! @@ -165,9 +165,9 @@ One shortcut common in a lot of programming languages (including JavaScript) is Let's rewrite our code one more time to use a fat arrow function: ```javascript -setTimeout(3000, () => { +setTimeout(() => { console.log('3 seconds has elapsed'); -}); +}, 3000); ``` ### When to use each strategy From e51d1574f3f0829f669df4688b88a1bc1410f605 Mon Sep 17 00:00:00 2001 From: Jen Looper Date: Wed, 18 Nov 2020 11:38:01 -0500 Subject: [PATCH 07/14] update README for students --- README.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 94ab7119..a1dcf325 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,9 @@ Azure Cloud Advocates at Microsoft are pleased to offer a 12-week, 24-lesson curriculum all about JavaScript, CSS, and HTML basics. Each lesson includes pre- and post-lesson quizzes, written instructions to complete the lesson, a solution, an assignment and more. Our project-based pedagogy allows you to learn while building, a proven way for new skills to 'stick'. -> Teachers, we have [included some suggestions](for-teachers.md) on how to use this curriculum. If you would like to create your own lessons, we have also included a [lesson template](lesson-template/README.md) +> **Teachers**, we have [included some suggestions](for-teachers.md) on how to use this curriculum. If you would like to create your own lessons, we have also included a [lesson template](lesson-template/README.md) + +> **Students**, to use this curriculum on your own, fork the entire repo and complete the exercises on your own, starting with a pre-lecture quiz, then reading the lecture and completing the rest of the activities. Try to create the projects by comprehending the lessons rather than copying the solution code; however that code is available in the /solutions folders in each project-oriented lesson. Another idea would be to form a study group with friends and go through the content together. For further study, we recommend [Microsoft Learn](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-4621-cxa) and by watching the videos mentioned below. [![Promo video](screenshot.png)](https://youtube.com/watch?v=R1wrdtmBSII "Promo video") @@ -64,4 +66,4 @@ While we have purposefully avoided introducing JavaScript frameworks so as to co ## Offline access -You can run this documentation offline by using [Docsify](https://docsify.js.org/#/). Fork this repo, [install Docsify](https://docsify.js.org/#/quickstart) on your local machine, and then in the root folder of this repo, type `docsify serve`. The website will be served on port 3000 on your localhost: `localhost:3000`. \ No newline at end of file +You can run this documentation offline by using [Docsify](https://docsify.js.org/#/). Fork this repo, [install Docsify](https://docsify.js.org/#/quickstart) on your local machine, and then in the root folder of this repo, type `docsify serve`. The website will be served on port 3000 on your localhost: `localhost:3000`. From e8ebf6ae50aed9572b175da60a7821b4cb399b1c Mon Sep 17 00:00:00 2001 From: Pranav Date: Thu, 19 Nov 2020 13:32:03 +0530 Subject: [PATCH 08/14] Added commands for staging a particular file and unstaging a file or multiple files --- .../2-github-basics/README.md | 29 +++++++++++++++++-- 1 file changed, 27 insertions(+), 2 deletions(-) diff --git a/1-getting-started-lessons/2-github-basics/README.md b/1-getting-started-lessons/2-github-basics/README.md index 24415aa9..2f1a4b6b 100644 --- a/1-getting-started-lessons/2-github-basics/README.md +++ b/1-getting-started-lessons/2-github-basics/README.md @@ -82,13 +82,38 @@ Let's say you have a folder locally with some code project and you want to start Typically a `git status` command tells you things like what files are ready to be _saved_ to the repo or has changes on it that you might want to persist. -1. **Add files to tracking** +1. **Add all files for tracking** + This also called as staging files/ adding files to the staging area. ```bash git add . ``` - The `git add` plus `.` argument indicates that all your files & changes for tracking. + The `git add` plus `.` argument indicates that all your files & changes for tracking. + +1. **Add selected files for tracking** + + ```bash + git add [file or folder name] + ``` + + This helps us to add only selected files to the staging area when we don't want to commit all files at once. + +1. **Unstage all files** + + ```bash + git reset + ``` + + This command helps us to unstage all files at once. + +1. **Unstage a particular file** + + ```bash + git reset [file or folder name] + ``` + + This command helps us to unstage only a particular file at once that we don't want to include for the next commit. 1. **Persisting your work**. At this point you've added the files to a so called _staging area_. A place where Git is tracking your files. To make the change permanent you need to _commit_ the files. To do so you create a _commit_ with the `git commit` command. A _commit_ represents a saving point in the history of your repo. Type the following to create a _commit_: From b8bb27fbf919af61c5bd8205c5a00849a46177fb Mon Sep 17 00:00:00 2001 From: antanta28 Date: Thu, 19 Nov 2020 17:16:10 +0300 Subject: [PATCH 09/14] Update README.md Typing game readme example code doesn't work. --- 4-typing-game/typing-game/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/4-typing-game/typing-game/README.md b/4-typing-game/typing-game/README.md index d8fa01e9..83ed6bc9 100644 --- a/4-typing-game/typing-game/README.md +++ b/4-typing-game/typing-game/README.md @@ -173,10 +173,10 @@ const quotes = [ 'Education never ends, Watson. It is a series of lessons, with the greatest for the last.', ]; // store the list of words and the index of the word the player is currently typing -const words = []; +let words = []; let wordIndex = 0; // the starting time -let startTime = DateTime.getTime(); +let startTime = Date.now(); // page elements const quoteElement = document.getElementById('quote'); const messageElement = document.getElementById('message'); From f539770ec334437c4bc7b91179c2a747e7b66545 Mon Sep 17 00:00:00 2001 From: Jasmine Greenaway Date: Thu, 19 Nov 2020 11:46:58 -0500 Subject: [PATCH 10/14] update comparison operators should be read left to right, fixes #69 --- 2-js-basics/3-making-decisions/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/2-js-basics/3-making-decisions/README.md b/2-js-basics/3-making-decisions/README.md index bc4b9207..b1cd49a0 100644 --- a/2-js-basics/3-making-decisions/README.md +++ b/2-js-basics/3-making-decisions/README.md @@ -28,9 +28,9 @@ Operators are used to evaluate conditions by making comparisons that will create | Symbol | Description | Example | | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | -| `<` | **Greater than**: Compares two values and returns the `true` Boolean data type if the value on the right side is larger than the left | `5 < 6 // true` | -| `<=` | **Greater than or equal to**: Compares two values and returns the `true` Boolean data type if the value on the right side is larger than or equal to the left | `5 <= 6 // true` | -| `>` | **Less than**: Compares two values and returns the `true` Boolean data type if the value on the left side is larger than the right | `5 > 6 // false` | +| `<` | **Less than**: Compares two values and returns the `true` Boolean data type if the value on the left side is larger than the right | `5 < 6 // true` | +| `<=` | **Less than or equal to**: Compares two values and returns the `true` Boolean data type if the value on the left side is larger than or equal to the right | `5 <= 6 // true` | +| `>` | **Greater than**: Compares two values and returns the `true` Boolean data type if the value on the left side is larger than the right | `5 > 6 // false` | | `>=` | **Less than or equal to**: Compares two values and returns the `true` Boolean data type if the value on the left side is larger than or equal to the right | `5 >= 6 // false` | | `===` | **Strict equality**: Compares two values and returns the `true` Boolean data type if values on the right and left are equal AND are the same data type. | `5 === 6 // false` | | `!==` | **Inequality**: Compares two values and returns the opposite Boolean value of what a strict equality operator would return | `5 !== 6 // true` | From ffbd3e252d5f8105ef875fc49b2d9112e4d63359 Mon Sep 17 00:00:00 2001 From: Jasmine Greenaway Date: Thu, 19 Nov 2020 11:49:43 -0500 Subject: [PATCH 11/14] comparison operator edit --- 2-js-basics/3-making-decisions/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/2-js-basics/3-making-decisions/README.md b/2-js-basics/3-making-decisions/README.md index b1cd49a0..97ff7e2a 100644 --- a/2-js-basics/3-making-decisions/README.md +++ b/2-js-basics/3-making-decisions/README.md @@ -28,8 +28,8 @@ Operators are used to evaluate conditions by making comparisons that will create | Symbol | Description | Example | | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | -| `<` | **Less than**: Compares two values and returns the `true` Boolean data type if the value on the left side is larger than the right | `5 < 6 // true` | -| `<=` | **Less than or equal to**: Compares two values and returns the `true` Boolean data type if the value on the left side is larger than or equal to the right | `5 <= 6 // true` | +| `<` | **Less than**: Compares two values and returns the `true` Boolean data type if the value on the left side is less than the right | `5 < 6 // true` | +| `<=` | **Less than or equal to**: Compares two values and returns the `true` Boolean data type if the value on the left side is less than or equal to the right | `5 <= 6 // true` | | `>` | **Greater than**: Compares two values and returns the `true` Boolean data type if the value on the left side is larger than the right | `5 > 6 // false` | | `>=` | **Less than or equal to**: Compares two values and returns the `true` Boolean data type if the value on the left side is larger than or equal to the right | `5 >= 6 // false` | | `===` | **Strict equality**: Compares two values and returns the `true` Boolean data type if values on the right and left are equal AND are the same data type. | `5 === 6 // false` | From a400f104320b3a0f00a27e48d4ffca78971284ce Mon Sep 17 00:00:00 2001 From: NurseAngel Date: Fri, 20 Nov 2020 20:39:52 +0900 Subject: [PATCH 12/14] Add Japanese translation Lesson 01. --- .../.github/post-lecture-quiz.ja.md | 18 ++ .../.github/pre-lecture-quiz.ja.md | 18 ++ .../translations/README.ja.md | 251 ++++++++++++++++++ 3 files changed, 287 insertions(+) create mode 100644 1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/post-lecture-quiz.ja.md create mode 100644 1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/pre-lecture-quiz.ja.md create mode 100644 1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ja.md diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/post-lecture-quiz.ja.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/post-lecture-quiz.ja.md new file mode 100644 index 00000000..aaa8555e --- /dev/null +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/post-lecture-quiz.ja.md @@ -0,0 +1,18 @@ +*択一です。このクイズを解いてみましょう。* + +1. Webサイトを作るときに最もよく使われるプログラミング言語はどれでしょう？ + +- [ ] 機械語 +- [ ] JavaScript +- [ ] Bash + +2. 開発環境は開発者ごとに異なる？ + +- [ ] はい +- [ ] いいえ + +3. バグだらけのコードを修正するため、開発者は何をしますか？ + +- [ ] シンタックスハイライト +- [ ] デバッグ +- [ ] コードフォーマット diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/pre-lecture-quiz.ja.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/pre-lecture-quiz.ja.md new file mode 100644 index 00000000..0007a17c --- /dev/null +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/.github/pre-lecture-quiz.ja.md @@ -0,0 +1,18 @@ +*この問題を解いてみよう。* + +1. コードを書かなくてもプログラムを作ることはできる？ + +- [ ] はい +- [ ] いいえ + +2. 低レベル言語がポピュラーな分野はどこですか？ + +- [ ] Webサイト +- [ ] ハードウェア +- [ ] ゲームソフト + +3. Web開発者と最も関連性の高いツールはどれでしょう？ + +- [ ] Raspberry Piのようなハードウェア +- [ ] ブラウザ開発者ツール +- [ ] OSドキュメント diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ja.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ja.md new file mode 100644 index 00000000..919508da --- /dev/null +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ja.md @@ -0,0 +1,251 @@ +# プログラミング言語と開発ツール入門 + +このレッスンでは、まずプログラミング言語の基礎を学びます。 +ここで取り上げた特徴は、最新のプログラミング言語のほとんどに当てはまります。 +次にツールセクションでは、開発者にとって有用なソフトウェアを紹介します。 + +![Intro Programming](../webdev101-programming.png) +> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) + +## 事前クイズ +[事前クイズ](.github/pre-lecture-quiz.ja.md) + +## Introduction + +この講座には以下が含まれています。 + +- プログラミングとは何か？ +- プログラミング言語の種類 +- プログラムの基本要素 +- 開発ツール + +## プログラミングとは何か？ + +プログラミング(コーディングとも表されます)とは、コンピュータやモバイル機器などのデバイスに対して、命令を出すことです。 +命令はプログラミング言語で書かれており、そしてデバイスはその命令を解釈して実行します。 +この命令は色々な名称で呼ばれることがありますが、*プログラム*、*コンピュータプログラム*、*アプリケーション(アプリ)*、*実行可能ファイル*、などが一般的に使われています。 + +*プログラム*とは、コードで書かれている何かです。 +Webサイトも、ゲームも、スマホアプリも、全てがプログラムです。 +コードを書かずにプログラムを作ることも可能ですが、作り上げたロジックは実際にはコードで書かれていて、実際にデバイスが解釈するのはコードです。 +プログラムはコードを実行し、デバイスに命令を出します。 +あなたが今このレッスンを読んでいるということは、文字を画面に表示するというプログラムをデバイスが実行しているということです。 + +✅ ちょっと調べてみましょう：世界初のコンピュータプログラマは誰でしょうか？ + +## プログラミング言語 + +プログラミング言語の主な目的は、開発者がデバイスに対して命令を送信する手助けをすることです。 +デバイスはバイナリ(要するに0と1)しか理解することができず、そして*ほとんどの*開発者にとってバイナリはあまり効率的な命令手段ではありません。 +プログラミング言語は、人間とコンピュータがコミュニケーションを取るための手段なのです。 + +世の中には様々な目的のために様々なプログラミング言語が存在しています。 +たとえばJavaScriptは主にWebアプリケーションのために、Bashは主にOSとの対話のために使われます。 + +*低レベル言語*とは、デバイスが命令を解釈するために必要なステップ数が、*高レベル言語*より少ない言語のことです。 +高レベル言語が人気であるのは、その読みやすさとサポート能力によるものです。 +JavaScriptは高レベル言語とされています。 + +次のコードは、高レベル言語であるJavaScriptと、低レベル言語であるARMアセンブリの違いを表したものです。 + +```javascript +let number = 10 +let n1 = 0, n2 = 1, nextTerm; + +for (let i = 1; i <= number; i++) { + console.log(n1); + nextTerm = n1 + n2; + n1 = n2; + n2 = nextTerm; +} +``` + +```c + area ascen,code,readonly + entry + code32 + adr r0,thumb+1 + bx r0 + code16 +thumb + mov r0,#00 + sub r0,r0,#01 + mov r1,#01 + mov r4,#10 + ldr r2,=0x40000000 +back add r0,r1 + str r0,[r2] + add r2,#04 + mov r3,r0 + mov r0,r1 + mov r1,r3 + sub r4,#01 + cmp r4,#00 + bne back + end +``` + +信じられないかもしれませんが、両者は同じ処理をしています。 +いずれもフィボナッチ数を順番に10個出力します。 + +✅ [フィボナッチ数](https://en.wikipedia.org/wiki/Fibonacci_number)とは、各数がその手前の二つの値の和である値の集合です。 + +## プログラムの基本要素 + +プログラムにおいてひとつの命令は*文*と呼ばれ、文は通常は改行などの*区切り文字*で分かたれます。 +プログラムの区切り文字は言語によって異なります。 + +多くのプログラムは、ユーザや他から来た入力データによって出力が変わります。 +データによってプログラムの動作を変えるため、プログラミング言語にはデータを一時的に保存しておく方法が用意されています。 +そのデータは*変数*と呼ばれています。 +変数とは、デバイス内のメモリにデータを保存する文のことです。 +プログラムにおける変数は数学における変数と似ていて、変数には固有の名称があり、その値は処理の経過に伴って変化することがあります。 + +プログラムには、実行されない文が現れることがあります。 +これは、そうなるように開発者が設計して制御されたものであるか、予期せぬエラーが発生したかのいずれかです。 +アプリケーションの制御は、堅牢で信頼性の高いプログラムを書くために必要なことです。 +制御は、何らかの条件が満たされたことによって発生することが一般的です。 +最近のプログラミング言語には、実行される文を制御するために`if...else`のような文が存在します。 + +✅ これら文については次のレッスンで詳しく学びます。 + +## 開発ツール + +[![Tools of the Trade](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Tools of the Trade") + +このセクションでは、プロの開発者としての道を歩き始めるときに役立つであろうソフトウェアについて紹介します。 + +**開発環境**とは、開発者がソフトウェアを作成する際に頻繁に使用するツールや機能のセットのことです。 +開発環境は、開発者が特定のニーズに合わせてカスタマイズしたり、優先順位を変更したり、異なるプログラミング言語を使用したりといった理由で次々と変わっていくこともあります。 +開発環境は、それを使用する開発者の数と同じくらい千差万別です。 + +### エディタ + +ソフトウェア開発において最も重要なツールのひとつが、エディタです。 +エディタはコードを書く場所であり、時にはコードを実行する場所であることもあります。 + +開発者がエディタを使う理由は、それ以外にも多々あります。 + +- *デバッグ* +コードを1行1行ステップ実行することで、バグやエラーを発見しやすくします。 +デバッグ機能を備えたエディタや、特定のプログラミング言語用にカスタマイズすることができるエディタも存在します。 + +- *シンタックスハイライト* +コードに色や書式を設定することで、コードを読みやすくします。 +多くのエディタはシンタックスハイライトをカスタマイズすることもできます。 + +- *拡張機能* +デフォルトでは含まれない、一部の開発者向けに特化された拡張機能を追加することができます。 +例えば、コードをドキュメント化してどのように動作するかを確認したいユーザがいて、タイプミスのチェックのためにスペルチェックを行いたいユーザがいて、各自が自分のほしい拡張機能をインストールすることができます。 +ほとんどの拡張機能は特定のエディタでのみ動作するもので、そしてほとんどのエディタは拡張機能を検索する方法を用意しています。 + +- *カスタマイズ* +ほとんどのエディタは幅広いカスタマイズが可能で、開発者は自分のニーズに合わせた開発環境を作ることができます。 +さらに多くのエディタでは、開発者が自分で拡張機能を作ることも可能です。 + +#### 有名なエディタとWeb開発向けのエクステンション + +- [Visual Studio Code](https://code.visualstudio.com/) + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) + - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack) + - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) +- [Atom](https://atom.io/) + - [spell-check](https://atom.io/packages/spell-check) + - [teletype](https://atom.io/packages/teletype) + - [atom-beautify](https://atom.io/packages/atom-beautify) + +### ブラウザ + +もうひとつの重要なツールはブラウザです。 +Web開発者は、自分のコードがWeb上でどのように実行されるかを確認するため、そしてHTML要素を視覚的に確認するためにブラウザを必要とします。 + +多くのブラウザには*開発者ツール*が付属しており、アプリケーションの動作を収集・分析するために便利な機能や情報があります。 +たとえば開発者ツールを使って、Webページにエラーがあった場合に、いつどこでエラーが発生したかを把握することができます。 + + +#### 有名なブラウザ + +- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium) +- [Chrome](https://developers.google.com/web/tools/chrome-devtools/) +- [Firefox](https://developer.mozilla.org/docs/Tools) + +### コマンドラインツール + +開発者の中には、日常の作業をGUIで行うことを好まず、コマンドラインに多くを頼る人もいます。 +コードの開発には多量のタイピングが必要となるため、マウスを使うためにキーボードから手を外すことで作業の流れを中断されることを避け、キーボードショートカットを駆使して複数のファイルを操作したり複数のツールを併用したりします。 + +多くのタスクはマウスだけでも実行可能です。 +しかし、コマンドラインの利点のひとつが、マウスとキーボードで行ったり来たりせずにキーボードだけで作業を完結できるというものです。 +またコマンドラインのもうひとつの利点が、カスタム設定を登録しておくことが可能ということです。 +さらにマシンを新調したときに設定を移動することもできます。 + +開発環境は個人個人によって非常に異なるため、コマンドラインの使用を避ける人もいれば、完全にコマンドラインだけしか使わない人もいます。 +両方とも使う人も多いでしょう。 + +### 有名なコマンドラインオプション + +コマンドラインオプションは、OSによって異なります。 + +💻はOSにプリインストールされているものです。 + +#### Windows + +- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7) 💻 +- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands) (also known as CMD) 💻 +- [Windows Terminal](https://docs.microsoft.com/windows/terminal/) +- [mintty](https://mintty.github.io/) + +#### MacOS + +- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻 +- [iTerm](https://iterm2.com/) +- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7) + +#### Linux + +- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻 +- [KDE Konsole](https://docs.kde.org/trunk5/en/applications/konsole/index.html) +- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7) + +#### 有名なコマンドラインツール + +- [Git](https://git-scm.com/) (多くのOSで 💻) +- [NPM](https://www.npmjs.com/) +- [Yarn](https://classic.yarnpkg.com/en/docs/cli/) + +### ドキュメント + +何か新しいことを学びたいと思ったとき、その使い方を学ぶためには大抵ドキュメントに頼ることになるでしょう。 +開発者は、ツールや言語を適切に使用する方法を学んだり、その仕組みについて深く調べる場合、まずはドキュメントを参照します。 + +#### Web開発者向けの有名なドキュメント + +- [Mozilla Developer Network](https://developer.mozilla.org/docs/Web) +- [Frontend Masters](https://frontendmasters.com/learn/) + +✅ Web開発者の開発環境の基礎を理解したところで、Webデザイナーの開発環境との違いを見てみましょう。 + +--- + +## 🚀 チャレンジ + +いくつかのプログラミング言語について比較してみましょう。 +JavaScriptとJavaの特徴は？ +COBOLとGoについては？ + +Compare some programming languages. What are some of the unique traits of JavaScript vs. Java? How about COBOL vs. Go? + +## 事後テスト +[事後テスト](.github/post-lecture-quiz.ja.md) + +## レビュー & 自習 + +プログラマーが利用できる様々な言語について、少しだけかじってみましょう。 +ひとつの言語で1行書いて実行したら、次は別のふたつの言語で同じことをやってみてください。 +なにかわかりましたか？ + +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? + +## アサイン + +[assignment.md](../assignment.md) From 07f94a2d2ece1dcf9f478bc105ed511d95c3f4b8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tomomi=20=E2=9D=A4=20Imura?= Date: Fri, 20 Nov 2020 10:19:20 -0800 Subject: [PATCH 13/14] Remove the left-out original content --- .../translations/README.ja.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ja.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ja.md index 919508da..00569fd1 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ja.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ja.md @@ -233,8 +233,6 @@ Web開発者は、自分のコードがWeb上でどのように実行される JavaScriptとJavaの特徴は？ COBOLとGoについては？ -Compare some programming languages. What are some of the unique traits of JavaScript vs. Java? How about COBOL vs. Go? - ## 事後テスト [事後テスト](.github/post-lecture-quiz.ja.md) @@ -244,8 +242,6 @@ Compare some programming languages. What are some of the unique traits of JavaSc ひとつの言語で1行書いて実行したら、次は別のふたつの言語で同じことをやってみてください。 なにかわかりましたか？ -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? - -## アサイン +## 課題 [assignment.md](../assignment.md) From d2337b7b0e9fb85f31559592bc1373c33fa35bcf Mon Sep 17 00:00:00 2001 From: domi877 <45101945+domi877@users.noreply.github.com> Date: Fri, 20 Nov 2020 22:14:11 +0100 Subject: [PATCH 14/14] Update README.md --- 1-getting-started-lessons/3-accessibility/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1-getting-started-lessons/3-accessibility/README.md b/1-getting-started-lessons/3-accessibility/README.md index 601b0de1..99723168 100644 --- a/1-getting-started-lessons/3-accessibility/README.md +++ b/1-getting-started-lessons/3-accessibility/README.md @@ -62,7 +62,7 @@ When a particular phrase needs to be highlighted, use the `` or `` e ### Use the correct HTML -With CSS and JavaScript it's possible to many any element look like any type of control. `` could be used to create a `