* Update README.zh-tw.md

* Update README.zh-tw.md

* Update README.zh-tw.md

* Update README.zh-tw.md

* Update README.de.md

* Update README.es.md

* Update README.zh-cn.md

* Update README.hi.md

* Update README.hi.md

* Update README.id.md

* Update README.it.md

* Update README.it.md

* Update README.ja.md

* Update README.ko.md

* Update assignment.ko.md

* Update README.ko.md

* Update README.ko.md

* Update README.ms.md

* Update README.pt.md

* Update README.de.md

* Update README.md

* Update README.de.md
pull/411/head
Flex Zhong 4 years ago committed by GitHub
parent 4f0994f600
commit 4c1788eefb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -21,11 +21,15 @@ Working with data is a common task for any language, and it's a much easier task
The syntax for an array is a pair of square brackets.
`let myArray = [];`
```javascript
let myArray = [];
```
This is an empty array, but arrays can be declared already populated with data. Multiple values in an array are separated by a comma.
`let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];`
```javascript
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
```
The array values are assigned a unique value called the **index**, a whole number that is assigned based on its distance from the beginning of the array. In the example above, the string value "Chocolate" has an index of 0, and the index of "Rocky Road" is 4. Use the index with square brackets to retrieve, change, or insert array values.
@ -71,10 +75,10 @@ The `for` loop requires 3 parts to iterate:
- `iteration-expression` Runs at the end of each iteration, typically used to change the counter value
```javascript
//Counting up to 10
for (let i = 0; i < 10; i++) {
console.log(i);
}
// Counting up to 10
for (let i = 0; i < 10; i++) {
console.log(i);
}
```
✅ Run this code in a browser console. What happens when you make small changes to the counter, condition, or iteration expression? Can you make it run backwards, creating a countdown?

@ -17,11 +17,15 @@ Das Arbeiten mit Daten ist eine häufige Aufgabe für jede Sprache und eine viel
Die Syntax für ein Array besteht aus zwei eckigen Klammern.
`let myArray = [];`
```javascript
let myArray = [];
```
Dies ist ein leeres Array, aber Arrays können als bereits mit Daten gefüllt deklariert werden. Mehrere Werte in einem Array werden durch ein Komma getrennt.
`let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];`
```javascript
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
```
Den Array-Werten wird ein eindeutiger Wert zugewiesen, der als **Index** bezeichnet wird. Diese ganze Zahl wird basierend auf dem Abstand vom Anfang des Arrays zugewiesen. Im obigen Beispiel hat der Zeichenfolgenwert "Chocolate" den Index 0 und der Index "Rocky Road" den Wert 4. Verwenden Sie den Index in eckigen Klammern, um Array-Werte abzurufen, zu ändern oder einzufügen.
@ -69,10 +73,10 @@ Die `for`-Schleife benötigt 3 Teile, um zu iterieren:
- `iteration-expression` Wird am Ende jeder Iteration ausgeführt und normalerweise zum Ändern des Zählerwerts verwendet
```javascript
//Counting up to 10
for (let i = 0; i < 10; i++) {
console.log(i);
}
// Counting up to 10
for (let i = 0; i < 10; i++) {
console.log(i);
}
```
✅ Führen Sie diesen Code in einer Browserkonsole aus. Was passiert, wenn Sie kleine Änderungen am Zähler, der Bedingung oder dem Iterationsausdruck vornehmen? Können Sie es rückwärts laufen lassen und einen Countdown erstellen?

@ -20,11 +20,15 @@ Trabajar con datos es una tarea común para cualquier lenguaje y es una tarea mu
La sintaxis de una matriz es un par de corchetes.
`let myArray = [];`
```javascript
let myArray = [];
```
Esta es una matriz vacía, pero las matrices se pueden declarar ya pobladas con datos. Varios valores en una matriz están separados por una coma.
`let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];`
```javascript
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
```
A los valores de la matriz se les asigna un valor único llamado **índice**, un número entero que se asigna en función de su distancia desde el principio de la matriz. En el ejemplo anterior, el valor de cadena "Chocolate" tiene un índice de 0 y el índice de "Rocky Road" es 4. Utilice el índice entre corchetes para recuperar, cambiar o insertar valores de matriz.
@ -71,10 +75,10 @@ El ciclo `for` requiere 3 partes para iterar:
```javascript
//Contando hasta 10
for (let i = 0; i < 10; i++) {
console.log(i);
}
// Contando hasta 10
for (let i = 0; i < 10; i++) {
console.log(i);
}
```
✅ Ejecute este código en una consola de navegador. ¿Qué sucede cuando realiza pequeños cambios en el contador, la condición o la expresión de iteración? ¿Puedes hacer que corra al revés, creando una cuenta regresiva?

@ -20,11 +20,15 @@
एक एरे के लिए सिंटेक्स वर्ग कोष्ठक की एक जोड़ी है।
`let myArray = [];`
```javascript
let myArray = [];
```
यह एक खाली एरे है, लेकिन एरेस को पहले से ही डेटा के साथ आबाद घोषित किया जा सकता है। एक एरे में एकाधिक मान अल्पविराम द्वारा अलग किए गए हैं।
`let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];`
```javascript
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
```
एरे मानों को एक अद्वितीय मान दिया जाता है जिसे **सूचकांक** कहा जाता है, एक पूरी संख्या जो कि एरे की शुरुआत से इसकी दूरी के आधार पर निर्दिष्ट की जाती है। ऊपर के उदाहरण में, स्ट्रिंग मूल्य "चॉकलेट" में 0 का सूचकांक है, और "रॉकी ​​रोड" का सूचकांक है। 4. एरे मानों को पुनः प्राप्त करने, बदलने या सम्मिलित करने के लिए वर्ग कोष्ठक के साथ सूचकांक का उपयोग करें।
@ -70,10 +74,10 @@ iceCreamFlavors.length; //5
- `iteration-expression` प्रत्येक पुनरावृत्ति के अंत में चलता है, आमतौर पर काउंटर मान को बदलने के लिए उपयोग किया जाता है
```javascript
//Counting up to 10
for (let i = 0; i < 10; i++) {
console.log(i);
}
// Counting up to 10
for (let i = 0; i < 10; i++) {
console.log(i);
}
```
✅ इस कोड को ब्राउज़र कंसोल में चलाएं। जब आप काउंटर, स्थिति या पुनरावृत्ति अभिव्यक्ति में छोटे बदलाव करते हैं तो क्या होता है? क्या आप उल्टी गिनती बनाकर इसे पीछे की ओर चला सकते हैं?
@ -91,7 +95,7 @@ while (i < 10) {
}
```
✅ आप एक फॉर लूप और वाइल लूप क्यों चुनेंगे? 17K दर्शकों का StackOverflow पर एक ही सवाल था, और कुछ राय [आपके लिए दिलचस्प हो सकती है] (https://stackoverflow.com/questions/39969145/ORE-loops-vs-for-loops-in-javascript)
✅ आप एक फॉर लूप और वाइल लूप क्यों चुनेंगे? 17K दर्शकों का StackOverflow पर एक ही सवाल था, और कुछ राय [आपके लिए दिलचस्प हो सकती है](https://stackoverflow.com/questions/39969145/ORE-loops-vs-for-loops-in-javascript)
## लूपस और अररेस

@ -23,11 +23,15 @@ Bekerja dengan data adalah tugas umum untuk bahasa apa pun, dan ini jauh lebih m
Sintaks untuk array adalah sepasang tanda kurung siku.
`let arrayKu = [];`
```javascript
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"];`
```javascript
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.
@ -82,7 +86,7 @@ Pengulangan memungkinkan untuk tugas berulang atau **iterative**, dan dapat meng
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
// Menghitung hingga 10
for (let i = 0; i < 10; i++) {
console.log(i);
}

@ -22,11 +22,15 @@ Lavorare con i dati è un'attività comune per qualsiasi linguaggio ed è un'att
La sintassi per un array è una coppia di parentesi quadre.
`let myArray = [];`
```javascript
let myArray = [];
```
Questo è un array vuoto, ma gli array possono essere dichiarati già popolati con i dati. Più valori in un array sono separati da una virgola.
`let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];`
```javascript
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
```
Ai valori dell'array viene assegnato un valore univoco chiamato **indice**, un numero intero che viene assegnato a un elemento in base alla sua distanza dall'inizio dell'array. Nell'esempio precedente, il valore di stringa "Chocolate" ha un indice di 0 e l'indice di "Rocky Road" è 4. Si utilizza l'indice all'interno di parentesi quadre per recuperare, modificare o inserire valori di matrice.
@ -73,10 +77,10 @@ Il ciclo `for` richiede 3 parti per iterare:
- `espressione-di-iterazione`: Viene eseguita alla fine di ogni iterazione, tipicamente utilizzata per modificare il valore del contatore
```javascript
//Conta fino a 10
for (let i = 0; i < 10; i++) {
console.log(i);
}
// Conta fino a 10
for (let i = 0; i < 10; i++) {
console.log(i);
}
```
✅ Si esegua questo codice in una console del browser. Cosa succede quando si apportano piccole modifiche al contatore, alla condizione o all'espressione di iterazione? E' possibile farlo funzionare all'indietro, creando un conto alla rovescia?

@ -21,11 +21,15 @@
配列の構文は角括弧のペアです。
`let myArray = [];`
```javascript
let myArray = [];
```
これは空の配列ですが、配列はすでにデータを埋めた状態で宣言することができます。配列内の複数の値はカンマで区切られます。
`let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];`
```javascript
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
```
配列の値には、**インデックス** と呼ばれる一意の値が割り当てられ、配列の先頭からの距離に基づいて整数が割り当てられます。上の例では、文字列の値 "Chocolate" のインデックスは 0 で、"Rocky Road" のインデックスは 4 です。 配列の値を取得、変更、挿入するには、角括弧付きのインデックスを使用します。
@ -71,10 +75,10 @@ iceCreamFlavors.length; //5
- `iteration-expression` 各反復の最後に実行され,通常はカウンタの値を変更するために使用されます
```javascript
//10までカウントアップ
for (let i = 0; i < 10; i++) {
console.log(i);
}
// 10までカウントアップ
for (let i = 0; i < 10; i++) {
console.log(i);
}
```
✅ このコードをブラウザのコンソールで実行してください。カウンタ、条件、反復式に小さな変更を加えるとどうなりますか?カウントダウンを作成して逆走させることはできますか?

@ -21,11 +21,15 @@
배열 구문은 대괄호 쌍으로 이루어져 있습니다.
`let myArray = [];`
```javascript
let myArray = [];
```
빈 배열이지만, 이미 데이터가 채워진 배열로 선언할 수 있습니다. 배열에 들어있는 여러가지 값들은 쉼표로 구분합니다.
`let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];`
```javascript
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
```
배열 값에는 **index**라는 고유 값이 할당됩니다. 이 값은 배열 시작부터 측정한 길이를 기준으로 할당되는 정수입니다. 예시에서, 문자열 값 "Chocolate"의 인덱스는 0이고, "Rocky Road"의 인덱스는 4입니다. 배열 값을 검색하고, 변경하거나 넣으려면 대괄호가 있는 인덱스를 사용합니다.
@ -71,10 +75,10 @@ iceCreamFlavors.length; //5
- `반복-표현식` 각 반복의 마무리에 실행되며, 일반적으로 값을 세면서 변경할 떄 사용됩니다
```javascript
//Counting up to 10
for (let i = 0; i < 10; i++) {
console.log(i);
}
// Counting up to 10
for (let i = 0; i < 10; i++) {
console.log(i);
}
```
✅ 브라우저 콘솔에서 코드를 실행하십시오. 카운터, 조건 혹은 반복 표현식을 약간 변경하면 어떻게 되나요? 돌아와서 카운트 다운할 수 있습니까?
@ -124,4 +128,4 @@ JavaScript의 배열에는 많은 메서드를 가져서 데이터 조작에 매
## 과제
[Loop an Array](../assignment.md)
[배열 순회하기](./assignment.ko.md)

@ -20,11 +20,15 @@ Bekerja dengan data adalah tugas biasa untuk bahasa apa pun, dan ini adalah tuga
Sintaks untuk array adalah sepasang tanda kurung persegi.
`let myArray = [];`
```javascript
let myArray = [];
```
Ini adalah array kosong, tetapi tatasusunan dapat dinyatakan sudah diisi dengan data. Pelbagai nilai dalam array dipisahkan dengan koma.
`let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];`
```javascript
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
```
Nilai array diberikan nilai unik yang disebut **indeks**, nombor bulat yang diberikan berdasarkan jaraknya dari awal array. Dalam contoh di atas, nilai rentetan "Chocolate" mempunyai indeks 0, dan indeks "Rocky Road" adalah 4. Gunakan indeks dengan tanda kurung persegi untuk mengambil, mengubah, atau memasukkan nilai array.
@ -70,10 +74,10 @@ Gelung `for` memerlukan 3 bahagian untuk berulang:
- `iterasi-ekspresi` Berjalan pada akhir setiap lelaran, biasanya digunakan untuk mengubah nilai pembilang
```javascript
//Menggira hingga 10
for (let i = 0; i < 10; i++) {
console.log(i);
}
// Menggira hingga 10
for (let i = 0; i < 10; i++) {
console.log(i);
}
```
✅ Jalankan kod ini di konsol penyemak imbas. Apa yang berlaku apabila anda membuat perubahan kecil pada ungkapan pembilang, keadaan, atau lelaran? Bolehkah anda membuatnya berjalan ke belakang, membuat undur?
@ -122,4 +126,4 @@ Array dalam JavaScript mempunyai banyak kaedah yang melekat padanya, sangat berg
## Tugasan
[Loop an Array](./assignment.ms.md)
[Loop an Array](./assignment.ms.md)

@ -20,11 +20,15 @@ Trabalhar com dados é uma tarefa comum para qualquer língua, e é uma tarefa m
A sintaxe de uma matriz é um par de parênteses rectos.
`let myArray = [];`
```javscript
let myArray = [];
```
Esta é uma matriz vazia, mas as matrizes podem ser declaradas já povoadas com dados. Os valores múltiplos numa matriz são separados por uma vírgula.
`let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];`
```javascript
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
```
Aos valores da matriz é atribuído um valor único chamado **índice**, um número inteiro que é atribuído com base na sua distância desde o início da matriz. No exemplo acima, o valor da string "Chocolate" tem um índice de 0, e o índice de "Rocky Road" é 4. Use o índice com parênteses rectos para recuperar, alterar, ou inserir valores da array.
@ -70,10 +74,10 @@ O laço `para` requer 3 partes para iterar:
- `expressão de iteração` Funciona no final de cada iteração, normalmente utilizada para alterar o valor do contador
```javascript
//Contagem até 10
for (let i = 0; i < 10; i++) {
console.log(i);
}
// Contagem até 10
for (let i = 0; i < 10; i++) {
console.log(i);
}
```
✅Executar este código numa consola de navegação. O que acontece quando se fazem pequenas alterações ao contador, condição, ou expressão de iteração? Pode fazê-lo correr para trás, criando uma contagem decrescente?

@ -21,11 +21,15 @@
数组的语法需要一对方括号。
`let myArray = [];`
```javascript
let myArray = [];
```
这是一个空数组,但数组其实可以在声明时就存入一些数据。数组中的多项数据用逗号分隔。
`let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];`
```javascript
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
```
数组中的值会被指定一个唯一的值,称为 **索引index**,它是一个整数,表示对应值在数组中的位置与数组开头的距离。在上方的例子中,字符串值 `"Chocolate"` 的索引就是 0`"Rocky Road"` 的索引是 4。可以用索引加上方括号来获取、改变或者插入数组值。
@ -71,10 +75,10 @@ iceCreamFlavors.length; // 5
- `迭代式iteration-expression` 在每一次迭代的模为执行,一般用于更新计数器的值
```javascript
// 从 0 数到 9
for (let i = 0; i < 10; i++) {
console.log(i);
}
// 从 0 数到 9
for (let i = 0; i < 10; i++) {
console.log(i);
}
```
✅ 在浏览器控制台中运行这段代码。试试调整计数器、条件式或迭代式时会发生什么。你能让它反过来运行,倒着计数吗?

@ -13,7 +13,7 @@
> 點擊以上的圖片來觀賞關於矩陣與迴圈的影片。
## 矩陣(Arrays)
## 矩陣Arrays
處理資料是任何程式語言中最常見的任務,如果能將程式碼有條理地編排成如矩陣的形式,處理任務來會更加輕鬆。矩陣的資料儲存格式就像串列,其中一項好處是矩陣可以儲存不同的資料型態資料。
@ -21,13 +21,17 @@
矩陣的語法需要用到中括號。
`let myArray = [];`
```javascript
let myArray = [];
```
上述為一個空矩陣,矩陣也能在宣告時設定內容資料,資料會以逗號來做區隔。
`let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];`
```javascript
let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
```
矩陣數值位置會以**索引(index)**來決定,標記從矩陣的開頭相隔多少元素。在上述例子中,字串 "Chocolate" 的索引為 0"Rocky Road" 為 4。以中括號帶入索引來接收、修改或加入特定元素數值。
矩陣數值位置會以 **索引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)來了解它。
@ -59,27 +63,27 @@ iceCreamFlavors.length; //5
✅ 自己動手試試看!使用瀏覽器命令欄,自由地建立並操控矩陣。
## 迴圈(Loops)
## 迴圈Loops
迴圈幫助你處理重複性與**迭代(iterative)**任務,這可以省下許多程式碼行數與時間。每一次迭代可以有不同的變數、數值或條件。在 JavaScript 中有許多種迴圈的樣式,彼此都有些微的差異,但主要功能都一樣:對資料做迴圈。
迴圈幫助你處理重複性與 **迭代iterative** 任務,這可以省下許多程式碼行數與時間。每一次迭代可以有不同的變數、數值或條件。在 JavaScript 中有許多種迴圈的樣式,彼此都有些微的差異,但主要功能都一樣:對資料做迴圈。
### For 迴圈(For Loop)
### For 迴圈For Loop
`for` 迴圈有三個條件:
- `計數器(counter)` 一個初始化變數決定目前迭代的次數。
- `條件式(condition)` 一個以比較運算子表示的陳述式,當結果為 `true` 時終止迴圈。
- `迭代陳述式(iteration-expression)` 在每一次迭代完後,改變計數器的數值。
- `計數器counter` 一個初始化變數決定目前迭代的次數。
- `條件式condition` 一個以比較運算子表示的陳述式,當結果為 `true` 時終止迴圈。
- `迭代陳述式iteration-expression` 在每一次迭代完後,改變計數器的數值。
```javascript
// 從 0 加到 10
for (let i = 0; i < 10; i++) {
console.log(i);
}
// 從 0 加到 10
for (let i = 0; i < 10; i++) {
console.log(i);
}
```
✅ 在瀏覽器命令欄中運行這段迴圈。在改變計數器、條件式與迭代陳述式後有什麼改變?你能讓它變成從 10 減到 0 嗎?
### While 迴圈(While Loop)
### While 迴圈While Loop
不同於 `for` 迴圈語法,`while` 迴圈只要求一個條件式,當條件式回傳 `true` 時即終止迴圈。迴圈中的條件是通常需要依賴像計數器的變數,這些變數必須被合理的處理。計數器的起始化需要在迴圈外面,之後的條件陳述式與計數器的變化則需要在迴圈當中。
@ -112,9 +116,10 @@ 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/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://happy-mud-02d95f10f.azurestaticapps.net/quiz/14?loc=zh_tw)
## 複習與自學

@ -4,10 +4,10 @@
1-20 사이의 숫자 중 모든 세 번째 숫자를 나열해 콘솔에 출력하는 프로그램을 만들어봅니다.
> 팁: for-loop를 사용하고 순회 표현식을 수정해봅니다.
> 팁: for-loop 를 사용하고 순회 표현식을 수정해봅니다.
## 평가 기준
기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안
--- | --- | --- | ---
| 프로그램이 올바르게 동작하며 설명하는 주석이 있는 경우 | 프로그램을 설명하는 주석이 없는 경우 | 프로그램이 불완전하거나 버그가 있는 경우
| | 프로그램이 올바르게 동작하며 설명하는 주석이 있는 경우 | 프로그램을 설명하는 주석이 없는 경우 | 프로그램이 불완전하거나 버그가 있는 경우

@ -8,13 +8,13 @@
當我們建立專為瀏覽器設計的應用程式時,我們會提供 Graphical User Interface (GUI) 給用戶使用,在我們建立的格式上進行互動。最常見的互動方式是透過點擊或輸入在多樣的物件。開發者面臨的問題是,我們不了解用戶會何時對這些物件產生互動!
[事件驅動程式設計](https://zh.wikipedia.org/zh-tw/%E4%BA%8B%E4%BB%B6%E9%A9%85%E5%8B%95%E7%A8%8B%E5%BC%8F%E8%A8%AD%E8%A8%88)是一種程式設計的方式,以建立我們的 GUI。若拆解該名詞的話我們知道主軸關鍵會是**事件(Event)**。根據 Merriam-Webster[事件](https://www.merriam-webster.com/dictionary/event)according定義為「將發生的事」。它能有效地解決我們面臨的問題。我們知道當用戶產生互動時,什麼程式必須回應其要求,只差在我們不知道用戶會何時產生互動。
[事件驅動程式設計](https://zh.wikipedia.org/zh-tw/%E4%BA%8B%E4%BB%B6%E9%A9%85%E5%8B%95%E7%A8%8B%E5%BC%8F%E8%A8%AD%E8%A8%88)是一種程式設計的方式,以建立我們的 GUI。若拆解該名詞的話我們知道主軸關鍵會是**事件Event**。根據 Merriam-Webster[事件](https://www.merriam-webster.com/dictionary/event)定義為「將發生的事」。它能有效地解決我們面臨的問題。我們知道當用戶產生互動時,什麼程式必須回應其要求,只差在我們不知道用戶會何時產生互動。
藉由建立新的函式,我們可以標記這段將被運行的程式碼。我們回顧一下[程序式程式設計](https://zh.wikipedia.org/wiki/%E8%BF%87%E7%A8%8B%E5%BC%8F%E7%BC%96%E7%A8%8B),函式會依照順序一行一行的被運行。這同樣也會被實踐在事件驅動程式設計上,差別在於**如何**去呼叫這些函式。
要處理這些事件:點擊按鈕、輸入字串等等,我們需註冊**事件監聽者(Event Listeners)**。事件監聽者是函式之一,負責回應當事件觸發時,提供相對應的回應。事件監聽者可以根據用戶的行為,更新使用者介面,呼叫伺服器,或是任何你想要它做的事。我們利用[addEventListener](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener)新增事件監聽者,提供要被運行的函式。
要處理這些事件:點擊按鈕、輸入字串等等,我們需註冊**事件監聽者Event Listeners**。事件監聽者是函式之一,負責回應當事件觸發時,提供相對應的回應。事件監聽者可以根據用戶的行為,更新使用者介面,呼叫伺服器,或是任何你想要它做的事。我們利用 [addEventListener](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener) 新增事件監聽者,提供要被運行的函式。
> **注意** 值得注意我們有許多建立事件監聽者的方式。你可以使用匿名函式(anonymous functions),或是有名字的;你可以使用多種的快捷,好比直接設定 `click` 屬性,或使用 `addEventListener`。在我們練習過程中,主要專注在 `addEventLister` 與匿名函式上,它們可能是開發者最常見的網頁開發技巧。同時,也是彈性最高的: `addEventListener` 作用在任何事件,任何以參數方式輸入的事件名稱。
> **注意** 值得注意我們有許多建立事件監聽者的方式。你可以使用匿名函式anonymous functions,或是有名字的;你可以使用多種的快捷,好比直接設定 `click` 屬性,或使用 `addEventListener`。在我們練習過程中,主要專注在 `addEventLister` 與匿名函式上,它們可能是開發者最常見的網頁開發技巧。同時,也是彈性最高的: `addEventListener` 作用在任何事件,任何以參數方式輸入的事件名稱。
### 常見事件
@ -39,7 +39,7 @@
### 檔案結構
我們總共需要三個檔案:**index.html**、**script.js**與**style.css**。我們來設定它們,以完成後續的步驟。
我們總共需要三個檔案:**index.html**、**script.js** **style.css**。我們來設定它們,以完成後續的步驟。
- 建立新的資料夾存放我們的遊戲,開啟 Console 或是終端機,輸入下列指令:
@ -98,9 +98,9 @@ code .
### 執行應用程式
最好的逐段開發模式是定期的確認程式結果。讓我們來執行現在的應用程式。Visual Studio Code 上有一個好用的擴充套件為[Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer),它會在你儲存網頁檔案時,同時架設並更新瀏覽器上的網頁。
最好的逐段開發模式是定期的確認程式結果。讓我們來執行現在的應用程式。Visual Studio Code 上有一個好用的擴充套件為 [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer),它會在你儲存網頁檔案時,同時架設並更新瀏覽器上的網頁。
- 安裝[Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer),點擊連結中的 **Install**
- 安裝 [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer),點擊連結中的 **Install**
- 瀏覽器要求開啟 Visual Studio CodeVisual Studio Code 會執行後續的安裝流程
- 安裝完後,重啟 Visual Studio Code
- 一旦安裝完成,在 Visual Studio Code 下按下 Ctrl-Shift-P (或 Cmd-Shift-P) 開啟指令視窗。
@ -185,7 +185,7 @@ const typedValueElement = document.getElementById('typed-value');
✅ 試著加入更多的引文到你的遊戲中。
> **筆記** 我們可以接收任何物件,只要使用程式碼 `document.getElementById`。因為我們需要定期參考這些元素,所以使用常數來確認是否有單字輸入錯誤的問題。框架如[Vue.js](https://vuejs.org/)或[React](https://reactjs.org/)可以幫助你更好管理你的程式碼。
> **筆記** 我們可以接收任何物件,只要使用程式碼 `document.getElementById`。因為我們需要定期參考這些元素,所以使用常數來確認是否有單字輸入錯誤的問題。框架如 [Vue.js](https://vuejs.org/) [React](https://reactjs.org/) 可以幫助你更好管理你的程式碼。
花點時間觀看下列關於 `const`、`let` 與 `var` 的影片。
@ -235,7 +235,7 @@ document.getElementById('start').addEventListener('click', () => {
我們來分解程式碼吧!
- 設定單字追蹤
- 使用[Math.floor](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/floor)和[Math.random](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/random)讓我們能隨機從矩陣 `quotes` 中挑選一行引文
- 使用 [Math.floor](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/floor) [Math.random](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Math/random) 讓我們能隨機從矩陣 `quotes` 中挑選一行引文
- 轉換 `quote``words` 組成的矩陣,追蹤目前玩家正在輸入的單字
- `wordIndex` 設定為 0玩家會從第一的單字開始輸入
- 設定使用者介面
@ -313,7 +313,7 @@ typedValueElement.addEventListener('input', () => {
點擊按鈕 **start**,馬上開始輸入單字!你可以看看這預覽動畫。
![遊戲中的動畫](../../4-typing-game/images/demo.gif)
![遊戲中的動畫](../../images/demo.gif)
---
@ -324,7 +324,7 @@ typedValueElement.addEventListener('input', () => {
- 在完成遊戲時,關閉 `input` 事件監聽者;遊戲重新開始時,再重新開啟它。
- 當玩家完成引文時,關閉文字框
- 以對話窗格的方式顯示恭賀訊息
- 利用[localStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage)儲存最高分的資料
- 利用 [localStorage](https://developer.mozilla.org/docs/Web/API/Window/localStorage) 儲存最高分的資料
## 課後測驗

Loading…
Cancel
Save