mirror of
https://github.com/microsoft/Web-Dev-For-Beginners.git
synced 2025-08-06 23:06:46 +02:00
Merge branch 'main' into nl
This commit is contained in:
Jen Looper
GitHub
@@ -110,7 +110,7 @@ for (let i = 0; i < iceCreamFlavors.length; i++) {
|
||||
|
||||
## 🚀 Challenge
|
||||
|
||||
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.
|
||||
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://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/14)
|
||||
@@ -118,7 +118,7 @@ There are other ways of looping over arrays other than for and while loops. Ther
|
||||
|
||||
## Review & Self Study
|
||||
|
||||
Arrays in JavaScript have many methods attached to them, extremely useful for data manipulation. [Read up on these methods](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) and try some of them out (like push, pop, slice and splice) on an array of your creation.
|
||||
Arrays in JavaScript have many methods attached to them, extremely useful for data manipulation. [Read up on these methods](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) and try some of them out (like push, pop, slice and splice) on an array of your creation.
|
||||
|
||||
## Assignment
|
||||
|
||||
|
||||
@@ -109,13 +109,13 @@ for (let i = 0; i < iceCreamFlavors.length; i++) {
|
||||
|
||||
## 🚀 Herausforderung
|
||||
|
||||
Es gibt andere Möglichkeiten, Arrays als for- und while-Schleifen zu durchlaufen. Es gibt [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) und [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Schreiben Sie Ihre Array-Schleife mit einer dieser Techniken neu.
|
||||
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://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/14)
|
||||
|
||||
## Review & Selbststudium
|
||||
|
||||
An Arrays in JavaScript sind viele Methoden angehängt, die für die Datenmanipulation äußerst nützlich sind. [Informieren Sie sich über diese Methoden](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) und probieren Sie einige davon aus (wie Push, Pop, Slice und Splice). auf einem Array Ihrer Kreation.
|
||||
An Arrays in JavaScript sind viele Methoden angehängt, die für die Datenmanipulation äußerst nützlich sind. [Informieren Sie sich über diese Methoden](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) und probieren Sie einige davon aus (wie Push, Pop, Slice und Splice). auf einem Array Ihrer Kreation.
|
||||
|
||||
## Zuordnung
|
||||
|
||||
|
||||
@@ -103,12 +103,12 @@ for (let i = 0; i < iceCreamFlavors.length; i++) {
|
||||
|
||||
✅ Experimente recorriendo una serie de su propia creación en la consola de su navegador.
|
||||
|
||||
🚀 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/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), y [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Vuelva a escribir su bucle de matriz utilizando una de estas técnicas.
|
||||
🚀 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://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/14)
|
||||
|
||||
## Revisión y autoestudio
|
||||
|
||||
Las matrices en JavaScript tienen muchos métodos adjuntos, extremadamente útiles para la manipulación de datos. [Lea sobre estos métodos](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) y pruebe algunos de ellos (como push, pop, slice y splice) en una matriz de su creación.
|
||||
Las matrices en JavaScript tienen muchos métodos adjuntos, extremadamente útiles para la manipulación de datos. [Lea sobre estos métodos](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) y pruebe algunos de ellos (como push, pop, slice y splice) en una matriz de su creación.
|
||||
|
||||
**Asignación**: [Bucle de una matriz](assignment.es.md)
|
||||
|
||||
@@ -126,7 +126,7 @@ for (let i = 0; i < rasaRasaEsKrim.length; i++) {
|
||||
|
||||
## 🚀 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.
|
||||
Ada cara lain untuk melakukan perulangan pada array selain perulangan for dan while. Ada [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of), dan [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Tulis ulang loop array Anda menggunakan salah satu dari teknik ini.
|
||||
|
||||
## Kuis Pasca-Kuliah
|
||||
|
||||
@@ -134,7 +134,7 @@ Ada cara lain untuk melakukan perulangan pada array selain perulangan for dan wh
|
||||
|
||||
## 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.
|
||||
Array dalam JavaScript memiliki banyak metode yang menyertainya, sangat berguna untuk manipulasi data. [Bacalah tentang metode ini](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) dan coba beberapa di antaranya (seperti push, pop, slice dan splice) pada array kreasi Anda.
|
||||
|
||||
## Tugas
|
||||
|
||||
|
||||
@@ -109,7 +109,7 @@ for (let i = 0; i < iceCreamFlavors.length; i++) {
|
||||
|
||||
## 🚀 도전
|
||||
|
||||
for문과 while문 외에 배열을 반복하는 다른 방법이 있습니다. [forEach](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of) 그리고 [map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)도 있습니다. 해당 기술 중 하나를 사용하여 배열 반복을 다시 작성하십시오.
|
||||
for문과 while문 외에 배열을 반복하는 다른 방법이 있습니다. [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of) 그리고 [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map)도 있습니다. 해당 기술 중 하나를 사용하여 배열 반복을 다시 작성하십시오.
|
||||
|
||||
## 강의 후 퀴즈
|
||||
[Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/14?loc=ko)
|
||||
@@ -117,7 +117,7 @@ for문과 while문 외에 배열을 반복하는 다른 방법이 있습니다.
|
||||
|
||||
## 리뷰 & 자기주도 학습
|
||||
|
||||
JavaScript의 배열에는 많은 메서드를 가져서 데이터 조작에 매우 유용합니다. [이 방법에 대해 읽어보고](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) 만든 배열에서 몇 가지(push, pop, slice 그리고 splice와 같은) 방식을 시도해보십시오.
|
||||
JavaScript의 배열에는 많은 메서드를 가져서 데이터 조작에 매우 유용합니다. [이 방법에 대해 읽어보고](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) 만든 배열에서 몇 가지(push, pop, slice 그리고 splice와 같은) 방식을 시도해보십시오.
|
||||
|
||||
## 과제
|
||||
|
||||
|
||||
@@ -110,14 +110,14 @@ for (let i = 0; i < iceCreamFlavors.length; i++) {
|
||||
|
||||
## 🚀 Cabaran
|
||||
|
||||
Terdapat cara lain untuk mengulangi tatasusunan selain untuk dan semasa gelung. Terdapat [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 semula array loop anda menggunakan salah satu teknik ini.
|
||||
Terdapat cara lain untuk mengulangi tatasusunan selain untuk dan semasa gelung. Terdapat [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of), dan [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Tulis semula array loop anda menggunakan salah satu teknik ini.
|
||||
|
||||
## Kuiz Pasca Kuliah
|
||||
[Kuiz Pasca Kuliah](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/14)
|
||||
|
||||
## Mengkaji and Belajar Sendiri
|
||||
|
||||
Array dalam JavaScript mempunyai banyak kaedah yang melekat padanya, sangat berguna untuk manipulasi data. [Baca kaedah ini](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) dan cuba beberapa di antaranya (seperti push, pop, slice dan splice) pada pelbagai ciptaan anda.
|
||||
Array dalam JavaScript mempunyai banyak kaedah yang melekat padanya, sangat berguna untuk manipulasi data. [Baca kaedah ini](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) dan cuba beberapa di antaranya (seperti push, pop, slice dan splice) pada pelbagai ciptaan anda.
|
||||
|
||||
## Tugasan
|
||||
|
||||
|
||||
126
2-js-basics/4-arrays-loops/translations/README.zh-tw.md
Normal file
126
2-js-basics/4-arrays-loops/translations/README.zh-tw.md
Normal file
@@ -0,0 +1,126 @@
|
||||
# JavaScript 入門 - 矩陣與迴圈
|
||||
|
||||
|
||||
> 由 [Tomomi Imura](https://twitter.com/girlie_mac) 繪製
|
||||
|
||||
## 課前測驗
|
||||
[課前測驗](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/13?loc=zh_tw)
|
||||
|
||||
這堂課會包含程式語言 JavaScript，建立互動式網頁的基礎。課程中，你會學到用來操作資料的矩陣與迴圈。
|
||||
|
||||
[](https://youtube.com/watch?v=Q_CRM2lXXBg "矩陣與迴圈")
|
||||
|
||||
> 點擊以上的圖片來觀賞關於矩陣與迴圈的影片。
|
||||
|
||||
## 矩陣(Arrays)
|
||||
|
||||
處理資料是任何程式語言中最常見的任務，如果能將程式碼有條理地編排成如矩陣的形式，處理任務來會更加輕鬆。矩陣的資料儲存格式就像串列，其中一項好處是矩陣可以儲存不同的資料型態資料。
|
||||
|
||||
✅ 矩陣其實圍繞在我們身邊！你能想到現實中那些應用是矩陣的形式，例如太陽能板矩陣嗎？
|
||||
|
||||
矩陣的語法需要用到中括號。
|
||||
|
||||
`let myArray = [];`
|
||||
|
||||
上述為一個空矩陣，矩陣也能在宣告時設定內容資料，資料會以逗號來做區隔。
|
||||
|
||||
`let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];`
|
||||
|
||||
矩陣數值位置會以**索引(index)**來決定，標記從矩陣的開頭相隔多少元素。在上述例子中，字串 "Chocolate" 的索引為 0，"Rocky Road" 為 4。以中括號帶入索引來接收、修改或加入特定元素數值。
|
||||
|
||||
✅ 索引從 0 開始有超出你的預料之外嗎？在部分程式語言中，索引會從 1 開始。這有一段有趣的歷史，你可以[閱讀維基百科](https://zh.wikipedia.org/wiki/%E5%BE%9E%E9%9B%B6%E9%96%8B%E5%A7%8B%E7%9A%84%E7%B7%A8%E8%99%9F)來了解它。
|
||||
|
||||
```javascript
|
||||
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
|
||||
iceCreamFlavors[2]; //"Vanilla"
|
||||
```
|
||||
|
||||
你可以指定索引改變其中的數值，如：
|
||||
|
||||
```javascript
|
||||
iceCreamFlavors[4] = "Butter Pecan"; //Changed "Rocky Road" to "Butter Pecan"
|
||||
```
|
||||
|
||||
或者是指定索引加入新數值，如：
|
||||
|
||||
```javascript
|
||||
iceCreamFlavors[5] = "Cookie Dough"; //Added "Cookie Dough"
|
||||
```
|
||||
|
||||
✅ 另一個常用加入矩陣元素的方式為使用矩陣運算子如 array.push()。
|
||||
|
||||
要得知矩陣內有多少元素，可以使用矩陣屬性 `length`。
|
||||
|
||||
```javascript
|
||||
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
|
||||
iceCreamFlavors.length; //5
|
||||
```
|
||||
|
||||
✅ 自己動手試試看！使用瀏覽器命令欄，自由地建立並操控矩陣。
|
||||
|
||||
## 迴圈(Loops)
|
||||
|
||||
迴圈幫助你處理重複性與**迭代(iterative)**任務，這可以省下許多程式碼行數與時間。每一次迭代可以有不同的變數、數值或條件。在 JavaScript 中有許多種迴圈的樣式，彼此都有些微的差異，但主要功能都一樣：對資料做迴圈。
|
||||
|
||||
### For 迴圈(For Loop)
|
||||
|
||||
`for` 迴圈有三個條件：
|
||||
- `計數器(counter)` 一個初始化變數決定目前迭代的次數。
|
||||
- `條件式(condition)` 一個以比較運算子表示的陳述式，當結果為 `true` 時終止迴圈。
|
||||
- `迭代陳述式(iteration-expression)` 在每一次迭代完後，改變計數器的數值。
|
||||
|
||||
```javascript
|
||||
// 從 0 加到 10
|
||||
for (let i = 0; i < 10; i++) {
|
||||
console.log(i);
|
||||
}
|
||||
```
|
||||
|
||||
✅ 在瀏覽器命令欄中運行這段迴圈。在改變計數器、條件式與迭代陳述式後有什麼改變？你能讓它變成從 10 減到 0 嗎？
|
||||
|
||||
### While 迴圈(While Loop)
|
||||
|
||||
不同於 `for` 迴圈語法，`while` 迴圈只要求一個條件式，當條件式回傳 `true` 時即終止迴圈。迴圈中的條件是通常需要依賴像計數器的變數，這些變數必須被合理的處理。計數器的起始化需要在迴圈外面，之後的條件陳述式與計數器的變化則需要在迴圈當中。
|
||||
|
||||
```javascript
|
||||
// 從 0 加到 10
|
||||
let i = 0;
|
||||
while (i < 10) {
|
||||
console.log(i);
|
||||
i++;
|
||||
}
|
||||
```
|
||||
|
||||
✅ 你會選擇 for 迴圈還是 while 迴圈呢？ 一萬七千個 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/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)、[for-of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of)與[map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map)。 用上列其中一種語法改寫你的迴圈。
|
||||
|
||||
## 課後測驗
|
||||
[課後測驗](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/14?loc=zh_tw)
|
||||
|
||||
## 複習與自學
|
||||
|
||||
在 JavaScript 中，矩陣有許多控制的方法，它們在處理資料上有很大的幫助。
|
||||
[學習這些方法](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)，如 push、pop、slice 和 splice，試著套用在你所創造的矩陣上。
|
||||
|
||||
## 作業
|
||||
|
||||
[給矩陣的迴圈](assignment.zh-tw.md)
|
||||
13
2-js-basics/4-arrays-loops/translations/assignment.zh-tw.md
Normal file
13
2-js-basics/4-arrays-loops/translations/assignment.zh-tw.md
Normal file
@@ -0,0 +1,13 @@
|
||||
# 給矩陣的迴圈
|
||||
|
||||
## 簡介
|
||||
|
||||
建立一個程式，列出數字每第三個從 1 到 20 的值(3,6,9......)，並輸出在 console 上。
|
||||
|
||||
> 提示：使用 for-loop 迴圈並改寫它的迭代陳述式。
|
||||
|
||||
## 學習評量
|
||||
|
||||
| 作業內容 | 優良 | 普通 | 待改進 |
|
||||
| -------- | -------------------------------------- | ---------------------- | -------------- |
|
||||
| | 程式完成簡介裡的課題並解釋程式碼意義。 | 程式完成簡介裡的課題。 | 程式出現問題。 |
|
||||
Reference in New Issue
Block a user