mirror of
https://github.com/microsoft/Web-Dev-For-Beginners.git
synced 2025-08-06 23:06:46 +02:00
Merge branch 'main' of https://github.com/microsoft/Web-Dev-For-Beginners into main
This commit is contained in:
Sanjay
@@ -3,9 +3,8 @@
|
||||
|
||||
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
##
|
||||
Pre-Lecture Quiz
|
||||
[Pre-lecture quiz](.github/pre-lecture-quiz.md)
|
||||
## Pre-Lecture Quiz
|
||||
[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.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.
|
||||
|
||||
@@ -112,9 +111,8 @@ 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/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of), and [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Rewrite your array loop using one of these techniques.
|
||||
|
||||
##
|
||||
Post-Lecture Quiz
|
||||
[Post-lecture quiz](.github/post-lecture-quiz.md)
|
||||
## Post-Lecture Quiz
|
||||
[Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/14)
|
||||
|
||||
|
||||
## Review & Self Study
|
||||
|
||||
141
2-js-basics/4-arrays-loops/translations/README.id.md
Normal file
141
2-js-basics/4-arrays-loops/translations/README.id.md
Normal file
@@ -0,0 +1,141 @@
|
||||
# Dasar-dasar JavaScript: Array dan Loop
|
||||
|
||||
|
||||
|
||||
> Sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## Kuis Pra-Kuliah
|
||||
|
||||
[Kuis pra-Kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/13?loc=id)
|
||||
|
||||
Pelajaran ini mencakup dasar-dasar JavaScript, bahasa yang menyediakan interaktivitas di web. Dalam pelajaran ini, Anda akan belajar tentang array dan loop, yang digunakan untuk memanipulasi data.
|
||||
|
||||
[](https://youtube.com/watch?v=Q_CRM2lXXBg "Array dan Loop")
|
||||
|
||||
## Array
|
||||
|
||||
Bekerja dengan data adalah tugas umum untuk bahasa apa pun, dan ini jauh lebih mudah saat data diatur dalam format struktural, seperti array. Dengan array, data disimpan dalam struktur yang mirip dengan daftar. Salah satu manfaat utama dari array adalah Anda dapat menyimpan berbagai jenis data dalam satu array.
|
||||
|
||||
✅ Array ada di sekitar kita! Dapatkah Anda memikirkan contoh array dalam kehidupan nyata, seperti array panel surya?
|
||||
|
||||
Sintaks untuk array adalah sepasang tanda kurung siku.
|
||||
|
||||
`let arrayKu = [];`
|
||||
|
||||
Ini adalah array kosong, tetapi array dapat dideklarasikan sudah diisi dengan data. Beberapa nilai dalam array dipisahkan dengan koma.
|
||||
|
||||
`let rasaRasaEsKrim = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];`
|
||||
|
||||
Nilai array diberi nilai unik yang disebut **indeks**, bilangan bulat yang ditetapkan berdasarkan jaraknya dari awal array. Dalam contoh di atas, nilai string "Chocolate" memiliki indeks 0, dan indeks "Rocky Road" adalah 4. Gunakan indeks dengan tanda kurung siku untuk mengambil, mengubah, atau menyisipkan nilai array.
|
||||
|
||||
✅ Apakah Anda terkejut bahwa array mulai dari indeks nol? Dalam beberapa bahasa pemrograman, indeks dimulai dari 1. Ada sejarah menarik seputar ini, yang dapat Anda [baca di Wikipedia](https://en.wikipedia.org/wiki/Zero-based_numbering).
|
||||
|
||||
```javascript
|
||||
let rasaRasaEsKrim = [
|
||||
"Chocolate",
|
||||
"Strawberry",
|
||||
"Vanilla",
|
||||
"Pistachio",
|
||||
"Rocky Road",
|
||||
];
|
||||
rasaRasaEsKrim[2]; //"Vanilla"
|
||||
```
|
||||
|
||||
Anda dapat memanfaatkan indeks untuk mengubah nilai, seperti ini:
|
||||
|
||||
```javascript
|
||||
rasaRasaEsKrim[4] = "Butter Pecan"; //Mengubah "Rocky Road" menjadi "Butter Pecan"
|
||||
```
|
||||
|
||||
Dan Anda dapat memasukkan nilai baru pada indeks tertentu seperti ini:
|
||||
|
||||
```javascript
|
||||
rasaRasaEsKrim[5] = "Cookie Dough"; //Ditambahkan "Cookie Dough"
|
||||
```
|
||||
|
||||
✅ Cara yang lebih umum untuk mendorong nilai ke array adalah dengan menggunakan operator array seperti array.push()
|
||||
|
||||
Untuk mengetahui berapa banyak item dalam sebuah array, gunakan properti `length`.
|
||||
|
||||
```javascript
|
||||
let rasaRasaEsKrim = [
|
||||
"Chocolate",
|
||||
"Strawberry",
|
||||
"Vanilla",
|
||||
"Pistachio",
|
||||
"Rocky Road",
|
||||
];
|
||||
rasaRasaEsKrim.length; //5
|
||||
```
|
||||
|
||||
✅ Cobalah sendiri! Gunakan konsol browser Anda untuk membuat dan memanipulasi array kreasi Anda sendiri.
|
||||
|
||||
## Loop
|
||||
|
||||
Pengulangan memungkinkan untuk tugas berulang atau **iterative**, dan dapat menghemat banyak waktu dan kode. Setiap iterasi dapat bervariasi dalam variabel, nilai, dan kondisinya. Ada berbagai jenis loop dalam JavaScript, dan mereka memiliki perbedaan kecil, tetapi pada dasarnya melakukan hal yang sama: loop di atas data.
|
||||
|
||||
### For Loop
|
||||
|
||||
Perulangan `for` membutuhkan 3 bagian untuk melakukan iterasi: - `counter` Variabel yang biasanya diinisialisasi dengan angka yang menghitung jumlah iterasi. - `condition` Expression yang menggunakan operator perbandingan untuk menyebabkan loop berhenti ketika `true`. - `iteration-expression` Berjalan di akhir setiap iterasi, biasanya digunakan untuk mengubah nilai penghitung.
|
||||
|
||||
```javascript
|
||||
//Menghitung hingga 10
|
||||
for (let i = 0; i < 10; i++) {
|
||||
console.log(i);
|
||||
}
|
||||
```
|
||||
|
||||
✅ Jalankan kode ini di konsol browser. Apa yang terjadi jika Anda membuat perubahan kecil pada penghitung, kondisi, atau ekspresi iterasi? Bisakah Anda membuatnya berjalan mundur, membuat hitungan mundur?
|
||||
|
||||
### While loop
|
||||
|
||||
Tidak seperti sintaks untuk pengulangan `for`, pengulangan `while` hanya membutuhkan kondisi yang akan menghentikan pengulangan jika `true`. Kondisi dalam pengulangan biasanya mengandalkan nilai lain seperti penghitung, dan harus dikelola selama pengulangan. Nilai awal untuk pencacah harus dibuat di luar perulangan, dan ekspresi apa pun untuk memenuhi suatu kondisi, termasuk mengubah penghitung harus dipertahankan di dalam perulangan.
|
||||
|
||||
```javascript
|
||||
//Menghitung hingga 10
|
||||
let i = 0;
|
||||
while (i < 10) {
|
||||
console.log(i);
|
||||
i++;
|
||||
}
|
||||
```
|
||||
|
||||
✅ Mengapa Anda memilih for loop vs. a while loop? Sebanyak 17 ribu penonton memiliki pertanyaan yang sama tentang StackOverflow, dan beberapa opini [mungkin menarik bagi Anda](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript).
|
||||
|
||||
## Loop dan Array
|
||||
|
||||
Array sering digunakan dengan loop karena sebagian besar kondisi memerlukan panjang array untuk menghentikan loop, dan indeks juga bisa menjadi nilai counter.
|
||||
|
||||
```javascript
|
||||
let rasaRasaEsKrim = [
|
||||
"Chocolate",
|
||||
"Strawberry",
|
||||
"Vanilla",
|
||||
"Pistachio",
|
||||
"Rocky Road",
|
||||
];
|
||||
|
||||
for (let i = 0; i < rasaRasaEsKrim.length; i++) {
|
||||
console.log(rasaRasaEsKrim[i]);
|
||||
} //Berakhir saat semua rasa dicetak
|
||||
```
|
||||
|
||||
✅ Bereksperimenlah dengan melakukan perulangan pada array buatan Anda sendiri di konsol browser Anda.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Tantangan
|
||||
|
||||
Ada cara lain untuk melakukan perulangan pada array selain perulangan for dan while. Ada [forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of), dan [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Tulis ulang loop array Anda menggunakan salah satu dari teknik ini.
|
||||
|
||||
## Kuis Pasca-Kuliah
|
||||
|
||||
[Kuis pasca-kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/14?loc=id)
|
||||
|
||||
## Review & Belajar Mandiri
|
||||
|
||||
Array dalam JavaScript memiliki banyak metode yang menyertainya, sangat berguna untuk manipulasi data. [Bacalah tentang metode ini](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) dan coba beberapa di antaranya (seperti push, pop, slice dan splice) pada array kreasi Anda.
|
||||
|
||||
## Tugas
|
||||
|
||||
[Loop sebuah Array](./assignment.id.md)
|
||||
124
2-js-basics/4-arrays-loops/translations/README.ja.md
Normal file
124
2-js-basics/4-arrays-loops/translations/README.ja.md
Normal file
@@ -0,0 +1,124 @@
|
||||
# JavaScript の基本: 配列とループ
|
||||
|
||||
|
||||
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## レクチャー前クイズ
|
||||
[レクチャー前クイズ](.github/pre-lecture-quiz.md)
|
||||
|
||||
このレッスンでは、Web 上でインタラクティブな機能を提供する言語である JavaScript の基礎を学びます。このレッスンでは、データを操作するために使用される配列とループについて学びます。
|
||||
|
||||
[](https://youtube.com/watch?v=Q_CRM2lXXBg "Arrays and Loops")
|
||||
|
||||
## 配列
|
||||
|
||||
データを扱うのはどの言語でも共通の作業ですが、データが配列のような構造的な形式で整理されている場合は、より簡単な作業となります。配列では、データはリストに似た構造で保存されます。配列の大きな利点の1つは、1つの配列に異なるタイプのデータを格納できることです。
|
||||
|
||||
✅ 配列は身近なところにある!? 太陽光パネルの配列など、実際の配列の例を思い浮かべることができますか？
|
||||
|
||||
配列の構文は角括弧のペアです。
|
||||
|
||||
`let myArray = [];`
|
||||
|
||||
これは空の配列ですが、配列はすでにデータを埋めた状態で宣言することができます。配列内の複数の値はカンマで区切られます。
|
||||
|
||||
`let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];`
|
||||
|
||||
配列の値には、**インデックス** と呼ばれる一意の値が割り当てられ、配列の先頭からの距離に基づいて整数が割り当てられます。上の例では、文字列の値 "Chocolate" のインデックスは 0 で、"Rocky Road" のインデックスは 4 です。 配列の値を取得、変更、挿入するには、角括弧付きのインデックスを使用します。
|
||||
|
||||
✅ 配列のインデックスが 0 から始まるのは驚きですか？いくつかのプログラミング言語では、インデックスは1から始まります。これには興味深い歴史があり、[ウィキペディア](https://en.wikipedia.org/wiki/Zero-based_numbering) で読むことができます。
|
||||
|
||||
```javascript
|
||||
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
|
||||
iceCreamFlavors[2]; //"Vanilla"
|
||||
```
|
||||
|
||||
このように、インデックスにレバレッジをかけて値を変更することができます。
|
||||
|
||||
```javascript
|
||||
iceCreamFlavors[4] = "Butter Pecan"; //"Rocky Road" を "Butter Pecan" に変更
|
||||
```
|
||||
|
||||
そして、このように与えられたインデックスに新しい値を挿入することができます。
|
||||
|
||||
```javascript
|
||||
iceCreamFlavors[5] = "Cookie Dough"; //"Cookie Dough" を追加しました。
|
||||
```
|
||||
|
||||
✅ 値を配列にプッシュするより一般的な方法は、 array.push() のような配列演算子を使用することです。
|
||||
|
||||
配列の中に何個の項目があるかを調べるには、`length` プロパティを使用します。
|
||||
|
||||
```javascript
|
||||
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
|
||||
iceCreamFlavors.length; //5
|
||||
```
|
||||
|
||||
✅ 自分で試してみましょう。ブラウザのコンソールを使って、自分で作成した配列を作成して操作してみましょう。
|
||||
|
||||
## ループ
|
||||
|
||||
ループは、反復または**イテレーション**のタスクを可能にし、多くの時間とコードを節約することができます。各反復は、その変数、値、条件を変えることができます。JavaScript には異なるタイプのループがあり、小さな違いはありますが、基本的には同じことをします。
|
||||
|
||||
### For ループ
|
||||
|
||||
`for`ループは反復するために3つの部分を必要とする。
|
||||
- `counter` 典型的には反復回数をカウントする数値で初期化される変数
|
||||
- `condition` 比較演算子を用いて、`false` のときにループを停止させる式
|
||||
- `iteration-expression` 各反復の最後に実行され，通常はカウンタの値を変更するために使用されます
|
||||
|
||||
```javascript
|
||||
//10までカウントアップ
|
||||
for (let i = 0; i < 10; i++) {
|
||||
console.log(i);
|
||||
}
|
||||
```
|
||||
|
||||
✅ このコードをブラウザのコンソールで実行してください。カウンタ、条件、反復式に小さな変更を加えるとどうなりますか？カウントダウンを作成して逆走させることはできますか？
|
||||
|
||||
### While ループ
|
||||
|
||||
`for` ループの構文とは異なり、`while` ループは `false` のときにループを停止する条件を必要とするだけです。ループ内の条件は通常、カウンタのような他の値に依存しており、ループ中に管理しなければなりません。カウンタの開始値はループの外で作成しなければならず、カウンタの変更を含めて条件を満たすための式はすべてループ内で維持しなければなりません。
|
||||
|
||||
```javascript
|
||||
//10までカウントアップ
|
||||
let i = 0;
|
||||
while (i < 10) {
|
||||
console.log(i);
|
||||
i++;
|
||||
}
|
||||
```
|
||||
|
||||
✅ for loop と while loop のどちらかを選ぶ理由は何ですか? 17K の視聴者が StackOverflow で同じ質問をしていましたが、その意見の中には[あなたにとって興味深いものもあるかもしれません](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript)。
|
||||
|
||||
## ループと配列
|
||||
|
||||
ほとんどの条件がループを止めるために配列の長さを必要とし、インデックスはカウンタの値になることもあるため、配列はループと一緒によく使われます。
|
||||
|
||||
```javascript
|
||||
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
|
||||
|
||||
for (let i = 0; i < iceCreamFlavors.length; i++) {
|
||||
console.log(iceCreamFlavors[i]);
|
||||
} //すべてのフレーバーがプリントされた時点で終了
|
||||
```
|
||||
|
||||
✅ ブラウザのコンソールで、自分で作った配列をループさせてみてください。
|
||||
|
||||
---
|
||||
|
||||
## 🚀 チャレンジ
|
||||
|
||||
配列をループする方法は for ループと while ループ以外にもあります。[forEach](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)、[for-of](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for...of)、[map](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map) があります。これらのテクニックのいずれかを使って、配列のループを書き換えてください。
|
||||
|
||||
## レクチャー後クイズ
|
||||
[レクチャー後クイズ](.github/post-lecture-quiz.md)
|
||||
|
||||
|
||||
## 復習と自己学習
|
||||
|
||||
JavaScript の配列には多くのメソッドがあり、データ操作に非常に便利です。[これらのメソッドを読んでください](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array)。そして、あなたが作成した配列でそれらのいくつか (push, pop, slice, splice など) を試してみてください。
|
||||
|
||||
## 課題
|
||||
|
||||
[配列のループ](assignment.ja.md)
|
||||
13
2-js-basics/4-arrays-loops/translations/assignment.id.md
Normal file
13
2-js-basics/4-arrays-loops/translations/assignment.id.md
Normal file
@@ -0,0 +1,13 @@
|
||||
# Loop sebuah Array
|
||||
|
||||
## Instruksi
|
||||
|
||||
Buat program yang mencantumkan setiap nomor ke-3 antara 1-20 dan mencetaknya ke konsol.
|
||||
|
||||
> TIPS: gunakan for-loop dan ubah ekspresi iterasi
|
||||
|
||||
## Rubric
|
||||
|
||||
| Kriteria | Contoh | Memenuhi | Perlu Perbaikan |
|
||||
| -------- | ------------------------------------------------- | ----------------------------- | ------------------------------------- |
|
||||
| | Program berjalan dengan benar dan diberi komentar | Program tidak diberi komentar | Program tidak lengkap atau bermasalah |
|
||||
13
2-js-basics/4-arrays-loops/translations/assignment.ja.md
Normal file
13
2-js-basics/4-arrays-loops/translations/assignment.ja.md
Normal file
@@ -0,0 +1,13 @@
|
||||
# 配列のループ
|
||||
|
||||
## 説明書
|
||||
|
||||
1～20の間の3番目の数字をすべてリストアップしてコンソールに表示するプログラムを作成します。
|
||||
|
||||
> TIP: for-loop を使用して、反復式を変更します。
|
||||
|
||||
## ルーブリック
|
||||
|
||||
| 基準 | 模範的な例 | 適切な | 改善が必要 |
|
||||
| -------- | --------------------------------------- | ------------------------ | ------------------------------ |
|
||||
| | プログラムが正常に動作し、コメントが表示される | プログラムはコメントをしていない | プログラムが不完全であるか、バグがある |
|
||||
Reference in New Issue
Block a user