From 760b37797f472cbdcacf3a6afd88ce23539cbc8f Mon Sep 17 00:00:00 2001 From: hexatester Date: Wed, 18 Nov 2020 12:44:53 +0700 Subject: [PATCH 01/41] add indonesian translations --- .../.github/post-lecture-quiz.id.md | 18 ++ .../.github/pre-lecture-quiz.id.md | 17 ++ .../1-data-types/translations/README.id.md | 195 ++++++++++++++++++ .../translations/assignment.id.md | 11 + 4 files changed, 241 insertions(+) create mode 100644 2-js-basics/1-data-types/translations/.github/post-lecture-quiz.id.md create mode 100644 2-js-basics/1-data-types/translations/.github/pre-lecture-quiz.id.md create mode 100644 2-js-basics/1-data-types/translations/README.id.md create mode 100644 2-js-basics/1-data-types/translations/assignment.id.md diff --git a/2-js-basics/1-data-types/translations/.github/post-lecture-quiz.id.md b/2-js-basics/1-data-types/translations/.github/post-lecture-quiz.id.md new file mode 100644 index 00000000..61a8df5c --- /dev/null +++ b/2-js-basics/1-data-types/translations/.github/post-lecture-quiz.id.md @@ -0,0 +1,18 @@ +*Complete this quiz after the lesson by checking one answer per question.* + +1. Konstanta sama dengan `let` dan` var` untuk mendeklarasikan variabel kecuali + +- [ ] Konstanta harus diinisialisasi +- [ ] Konstanta dapat diubah +- [ ] Konstanta dapat ditetapkan kembali + +2. Numbers dan ____ adalah primitif JavaScript yang menangani data numerik + +- [ ] bigint +- [ ] boolean +- [ ] star + +3. String dapat berada di antara tanda kutip tunggal dan ganda + +- [ ] benar +- [ ] salah diff --git a/2-js-basics/1-data-types/translations/.github/pre-lecture-quiz.id.md b/2-js-basics/1-data-types/translations/.github/pre-lecture-quiz.id.md new file mode 100644 index 00000000..f29ae535 --- /dev/null +++ b/2-js-basics/1-data-types/translations/.github/pre-lecture-quiz.id.md @@ -0,0 +1,17 @@ +*Selesaikan kuis ini di kelas* + +1. Boolean adalah tipe data yang dapat Anda gunakan untuk menguji panjang string + +- [ ] benar +- [ ] salah + +2. Berikut ini adalah operasi yang dapat Anda lakukan pada string + +- [ ] concatenation +- [ ] appending +- [ ] splicing + +3. `==` dan `===` dapat dipertukarkan + +- [ ] benar +- [ ] salah diff --git a/2-js-basics/1-data-types/translations/README.id.md b/2-js-basics/1-data-types/translations/README.id.md new file mode 100644 index 00000000..283bc44b --- /dev/null +++ b/2-js-basics/1-data-types/translations/README.id.md @@ -0,0 +1,195 @@ +# JavaScript Basics: Data Types + +![Dasar-dasar JavaScript - Tipe data](../images/webdev101-js-datatypes.png) +> Catatan sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac) + +## Kuis Pra-Kuliah +[Kuis pra-Kuliah](.github/pre-lecture-quiz.id.md) + +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") + +Mari kita mulai dengan variabel dan tipe data yang mengisinya! + +## Variabel + +Variabel menyimpan nilai yang dapat digunakan dan diubah di seluruh kode Anda. + +Membuat dan **mendeklarasikan** variabel memiliki sintaks berikut **[kata kunci] [nama]**. Itu terdiri dari dua bagian: + +- **Kata kunci (Keywords)**. Kata kunci bisa `let` atau `var`. + + > Catatan, Mereka kata kunci `let` diperkenalkan di ES6 dan memberi variabel Anda apa yang disebut _block scope_. Anda disarankan untuk menggunakan `let` di atas `var`. Kami akan membahas cakupan blok lebih mendalam di bagian mendatang. +- **Nama variabel**, ini adalah nama yang Anda pilih sendiri. + +### Tugas - bekerja dengan variabel + +1. **Deklarasikan variabel**. Mari kita deklarasikan variabel menggunakan kata kunci `let`: + + ```javascript + let variabelSaya; + ``` + + `variabelSaya` sekarang telah dideklarasikan menggunakan kata kunci `let`. Saat ini tidak memiliki nilai. + +1. **Tetapkan nilai**. Simpan nilai dalam variabel dengan operator `=`, diikuti dengan nilai yang diharapkan. + + ```javascript + variabelSaya = 123; + ``` + + > Catatan: penggunaan `=` dalam pelajaran ini berarti kita menggunakan "operator penugasan (assignment operator)", yang digunakan untuk menetapkan nilai ke variabel. Itu *tidak menunjukkan kesetaraan*. + + `variabelSaya` sekarang telah *diinisialisasi (initialized)* dengan nilai 123. + +1. **Refaktor**. Ganti kode Anda dengan pernyataan berikut. + + ```javascript + let variabelSaya = 123; + ``` + + Di atas disebut inisialisasi _explisit_ saat variabel dideklarasikan dan diberi nilai pada saat yang sama. + +1. **Ubah nilai variabel**. Ubah nilai variabel dengan cara berikut: + + ```javascript + variabelSaya = 321; + ``` + + Setelah variabel dideklarasikan, Anda dapat mengubah nilainya di titik mana pun dalam kode Anda dengan operator `=` dan nilai baru. + + ✅ Cobalah! Anda dapat menulis JavaScript langsung di browser Anda. Buka jendela browser dan arahkan ke Alat Pengembang. Di konsol, Anda akan menemukan prompt; ketik `let variabelSaya = 123`, tekan enter, lalu ketik `variabelSaya`. Apa yang terjadi? Catatan, Anda akan mempelajari lebih lanjut tentang konsep ini di pelajaran berikutnya. + +## Konstanta (Constants) + +Deklarasi dan inisialisasi konstanta mengikuti konsep yang sama sebagai variabel, dengan pengecualian kata kunci `const`. Konstanta biasanya dideklarasikan dengan semua huruf besar. + +```javascript +const VARIABEL_SAYA = 123; +``` + +Konstanta mirip dengan variabel, dengan dua pengecualian: + +- **Harus punya nilai**. Konstanta harus diinisialisasi, atau kesalahan akan terjadi saat menjalankan kode. +- **Referensi tidak dapat diubah**. Referensi konstanta tidak dapat diubah setelah diinisialisasi, atau kesalahan akan terjadi saat menjalankan kode. Mari kita lihat dua contoh: + - **Nilai sederhana**. Berikut ini TIDAK diperbolehkan: + + ```javascript + const PI = 3; + PI = 4; // tidak diperbolehkan + ``` + + - **Referensi objek dilindungi**. Berikut ini TIDAK diperbolehkan. + + ```javascript + const obj = { a: 3 }; + obj = { b: 5 } // tidak diperbolehkan + ``` + + - **Nilai objek tidak dilindungi**. Berikut diperbolehkan: + + ```javascript + const obj = { a: 3 }; + obj.a = 5; // diperbolehkan + ``` + + Di atas Anda mengubah nilai objek tetapi bukan referensi itu sendiri, yang membuatnya diizinkan. + + > Catatan, `const` berarti referensi dilindungi dari penugasan ulang. Nilainya tidak _immutable_ dan bisa berubah, terutama jika itu adalah konstruksi kompleks seperti sebuah objek. + +## Tipe Data + +Variabel dapat menyimpan berbagai jenis nilai, seperti angka dan teks. Berbagai jenis nilai ini dikenal sebagai **tipe data**. Tipe data adalah bagian penting dari pengembangan perangkat lunak karena membantu pengembang membuat keputusan tentang bagaimana kode harus ditulis dan bagaimana perangkat lunak harus dijalankan. Selain itu, beberapa tipe data memiliki fitur unik yang membantu mengubah atau mengekstrak informasi tambahan dalam sebuah nilai. + +✅ Tipe Data juga disebut sebagai data primitif JavaScript, karena mereka adalah tipe data tingkat terendah yang disediakan oleh bahasa. Ada 6 tipe data primitif: string, number, bigint, boolean, undefined, dan symbol. Luangkan waktu sebentar untuk memvisualisasikan apa yang mungkin diwakili oleh masing-masing primitif ini. Apa itu `zebra`? Bagaimana dengan `0`? `true`? + +### Angka (Numbers) + +Pada bagian sebelumnya nilai `variabelSaya` adalah tipe data angka. + +`let variabelSaya = 123;` + +Variabel dapat menyimpan semua jenis angka, termasuk desimal atau angka negatif. Angka juga dapat digunakan dengan operator aritmatika, yang dibahas di [bagian selanjutnya](#Operator-Aritmatika). + +### Operator Aritmatika + +Ada beberapa jenis operator untuk digunakan saat menjalankan fungsi aritmatika, dan beberapa di antaranya tercantum di sini: + +| Simbol | Deskripsi | Contoh | +|--------|-----------------------------------------------------|--------------------------------------------| +| `+` | **Penjumlahan**: Menghitung jumlah dari dua angka | `1 + 2 //hasil yang diharapkan adalah 3` | +| `-` | **Pengurangan**: Menghitung selisih dua angka | `1 - 2 //hasil yang diharapkan adalah -1` | +| `*` | **Perkalian**: Menghitung hasil kali dua angka | `1 * 2 //hasil yang diharapkan adalah 2` | +| `/` | **Pembagian**: Menghitung hasil bagi dari dua angka | `1 / 2 //hasil yang diharapkan adalah 0.5` | +| `%` | **Sisa**: Menghitung sisa dari pembagian dua angka | `3 % 2 //hasil yang diharapkan adalah 1` | + +✅ Cobalah! Coba operasi aritmatika di konsol browser Anda. Apakah hasilnya mengejutkan Anda? + +### String + +String adalah kumpulan karakter yang berada di antara tanda kutip tunggal atau ganda. + +- `'Ini string'` +- `"Ini juga string"` +- `let myString = 'Ini adalah nilai string yang disimpan dalam variabel';` + +Ingatlah untuk menggunakan tanda kutip saat menulis string, atau JavaScript akan menganggapnya sebagai nama variabel. + +### Memformat String + +String bersifat tekstual, dan akan membutuhkan pemformatan dari waktu ke waktu. + +Untuk **menggabungkan (concatenate)** dua string atau lebih, atau menggabungkannya, gunakan operator `+`. + +```javascript +let myString1 = "Hello"; +let myString2 = "World"; + +myString1 + myString2 + "!"; //HelloWorld! +myString1 + " " + myString2 + "!"; //Hello World! +myString1 + ", " + myString2 + "!"; //Hello, World! + +``` + +✅ Mengapa `1 + 1 = 2` di JavaScript, tetapi` '1' + '1' = 11? `Pikirkanlah. Bagaimana dengan `'1' + 1`? + +**Template literals** adalah cara lain untuk memformat string, kecuali sebagai pengganti tanda kutip, digunakan backtick. Apa pun yang bukan teks biasa harus ditempatkan di dalam placeholder `${ }`. Ini termasuk variabel apa pun yang mungkin berupa string. + +```javascript +let myString1 = "Hello"; +let myString2 = "World"; + +`${myString1} ${myString2}!` //Hello World! +`${myString1}, ${myString2}!` //Hello World! +``` + +Anda dapat mencapai tujuan pemformatan Anda dengan salah satu metode, tetapi template literal akan menghormati spasi dan jeda baris apa pun. + +✅ Kapan Anda akan menggunakan template literal dibanding string biasa? + +### Boolean + +Boolean hanya dapat berupa dua nilai: `true` atau `false`. Boolean dapat membantu membuat keputusan tentang baris kode mana yang harus dijalankan ketika kondisi tertentu terpenuhi. Dalam banyak kasus, [operator](#operator) membantu pengaturan nilai Boolean dan Anda akan sering melihat dan menulis variabel yang diinisialisasi atau nilainya diperbarui dengan operator. + +- `let myTrueBool = true` +- `let myFalseBool = false` + +✅ Variabel dapat dianggap 'benar (truthy)' jika dievaluasi ke boolean `true`. Menariknya, di JavaScript, [semua nilai adalah benar (truthy) kecuali jika didefinisikan sebagai salah](https://developer.mozilla.org/en-US/docs/Glossary/Truthy). + +--- + +## 🚀 Tantangan + +JavaScript terkenal karena cara yang mengejutkan dalam menangani tipe data pada kesempatan tertentu. Lakukan sedikit riset tentang 'kejutaan' ini. Misalnya: sensitivitas kasus bisa menggigit! Coba ini di konsol Anda: `let usia = 1; let Usia = 2; usia == Usia` (meghasilkan `false` - kenapa?). Kejutan lain apa yang bisa kamu temukan? + +## Kuis Pasca-Kuliah +[Kuis pasca-kuliah](.github/post-lecture-quiz.id.md) + +## Review & Belajar Mandiri + +Lihat [daftar latihan JavaScript ini](https://css-tricks.com/snippets/javascript/) dan coba salah satunya. Apa yang kamu pelajari? + +## Tugas + +[Praktek Tipe Data](assignment.id.md) diff --git a/2-js-basics/1-data-types/translations/assignment.id.md b/2-js-basics/1-data-types/translations/assignment.id.md new file mode 100644 index 00000000..c36652d6 --- /dev/null +++ b/2-js-basics/1-data-types/translations/assignment.id.md @@ -0,0 +1,11 @@ +# Data Types Practice + +## Instructions + +Imagine you are building a shopping cart. Write some documentation on the data types that you would need to complete your shopping experience. How did you arrive at your choices? + +## Rubric + +| Kriteria | Teladan | Memenuhi Syarat | Perlu Perbaikan | +|----------|----------------------------------------------------------------------------------------|------------------------------|----------------------------| +| | Enam tipe data didaftar dan dieksplorasi secara rinci, mendokumentasikan penggunaannya | Empat tipe data dieksplorasi | Dua tipe data dieksplorasi | From bfe7a7b8220358de173d58496e40139893f40f43 Mon Sep 17 00:00:00 2001 From: hexatester Date: Wed, 18 Nov 2020 12:51:37 +0700 Subject: [PATCH 02/41] update 2-1 assignment.id --- 2-js-basics/1-data-types/translations/assignment.id.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/2-js-basics/1-data-types/translations/assignment.id.md b/2-js-basics/1-data-types/translations/assignment.id.md index c36652d6..7dd07a01 100644 --- a/2-js-basics/1-data-types/translations/assignment.id.md +++ b/2-js-basics/1-data-types/translations/assignment.id.md @@ -1,10 +1,10 @@ -# Data Types Practice +# Praktek Tipe Data -## Instructions +## Instruksi -Imagine you are building a shopping cart. Write some documentation on the data types that you would need to complete your shopping experience. How did you arrive at your choices? +Bayangkan Anda sedang membuat keranjang belanja. Tulislah beberapa dokumentasi tentang tipe data yang Anda perlukan untuk melengkapi pengalaman berbelanja Anda. Bagaimana Anda sampai pada pilihan Anda? -## Rubric +## Rubrik | Kriteria | Teladan | Memenuhi Syarat | Perlu Perbaikan | |----------|----------------------------------------------------------------------------------------|------------------------------|----------------------------| From ac02f557db99f1be3301585e66162f19310ec0da Mon Sep 17 00:00:00 2001 From: hexatester Date: Sun, 27 Dec 2020 19:17:48 +0700 Subject: [PATCH 03/41] add indonesian translations for functions-methods --- .../.github/post-lecture-quiz.id.md | 12 ++ .../.github/pre-lecture-quiz.id.md | 12 ++ .../translations/README.id.md | 192 ++++++++++++++++++ .../translations/assignment.id.md | 13 ++ 4 files changed, 229 insertions(+) create mode 100644 2-js-basics/2-functions-methods/translations/.github/post-lecture-quiz.id.md create mode 100644 2-js-basics/2-functions-methods/translations/.github/pre-lecture-quiz.id.md create mode 100644 2-js-basics/2-functions-methods/translations/README.id.md create mode 100644 2-js-basics/2-functions-methods/translations/assignment.id.md diff --git a/2-js-basics/2-functions-methods/translations/.github/post-lecture-quiz.id.md b/2-js-basics/2-functions-methods/translations/.github/post-lecture-quiz.id.md new file mode 100644 index 00000000..74126c1f --- /dev/null +++ b/2-js-basics/2-functions-methods/translations/.github/post-lecture-quiz.id.md @@ -0,0 +1,12 @@ +*Selesaikan kuis ini dengan mencentang satu jawaban per pertanyaan.* + +1. Argumen harus disediakan untuk semua parameter dalam suatu fungsi + +- [ ] benar +- [ ] salah + +2. Apa fungsi nilai default? + +- [ ] Menetapkan nilai yang benar +- [ ] Memberikan nilai awal untuk parameter sehingga kode Anda tetap berfungsi jika Anda menghilangkan argumen untuk itu +- [ ] Tidak memiliki utilitas diff --git a/2-js-basics/2-functions-methods/translations/.github/pre-lecture-quiz.id.md b/2-js-basics/2-functions-methods/translations/.github/pre-lecture-quiz.id.md new file mode 100644 index 00000000..c6ea25df --- /dev/null +++ b/2-js-basics/2-functions-methods/translations/.github/pre-lecture-quiz.id.md @@ -0,0 +1,12 @@ +*Selesaikan kuis ini di kelas* + +1. Apa itu argumen? + +- [ ] Itu adalah sesuatu yang Anda deklarasikan dalam definisi fungsi +- [ ] Itu adalah sesuatu yang Anda berikan ke suatu fungsi pada waktu pemanggilan +- [ ] Itu adalah sesuatu yang Anda miliki dengan orang yang Anda kenal + +2. Benar atau salah: suatu fungsi harus mengembalikan sesuatu + +- [ ] benar +- [ ] salah diff --git a/2-js-basics/2-functions-methods/translations/README.id.md b/2-js-basics/2-functions-methods/translations/README.id.md new file mode 100644 index 00000000..205b6e22 --- /dev/null +++ b/2-js-basics/2-functions-methods/translations/README.id.md @@ -0,0 +1,192 @@ +# Dasar-dasar JavaScript: Metode dan Fungsi + +![Dasar-dasar JavaScript - Fungsi](../images/webdev101-js-functions.png) +> Catatan sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac) + +## Kuis Pra-Kuliah +[Kuis pra-Kuliah](./.github/pre-lecture-quiz.id.md) + +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)**. + +[![Metode dan Fungsi](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "Metode dan Fungsi") + +## Fungsi + +Pada intinya, fungsi adalah sekumpulan kode yang dapat kita jalankan sesuai permintaan. Ini sempurna untuk skenario di mana kita perlu melakukan tugas yang sama beberapa kali; daripada menduplikasi logika di beberapa lokasi (yang akan menyulitkan pembaruan saat waktunya tiba), kita dapat memusatkannya di satu lokasi, dan memanggilnya kapan pun kita membutuhkan operasi dilakukan - Anda bahkan dapat memanggil fungsi dari fungsi lain!. + +Sama pentingnya adalah kemampuan untuk menamai suatu fungsi. Meskipun ini mungkin tampak sepele, nama tersebut memberikan cara cepat untuk mendokumentasikan bagian kode. Anda bisa menganggap ini sebagai label pada sebuah tombol. Jika saya mengklik tombol yang bertuliskan "Batalkan pengatur waktu", saya tahu itu akan berhenti menjalankan jam. + +## Membuat dan memanggil suatu fungsi + +Sintaks untuk suatu fungsi terlihat seperti berikut: + +```javascript +function nameOfFunction() { // definisi fungsi + // definisi fungsi/tubuh +} +``` + +Jika saya ingin membuat fungsi untuk menampilkan salam, mungkin akan terlihat seperti ini: + +```javascript +function tampilkanSapaan() { + console.log('Hello, world!'); +} +``` + +Kapanpun kita ingin memanggil (atau memanggil) fungsi kita, kita menggunakan nama fungsi yang diikuti dengan `()`. Perlu diperhatikan fakta bahwa fungsi kita dapat didefinisikan sebelum atau sesudah kita memutuskan untuk memanggilnya; kompilator JavaScript (JavaScript compiler) akan menemukannya untuk Anda. + +```javascript +// memanggil fungsi kita +tampilkanSapaan(); +``` + +> **CATATAN:** Ada jenis fungsi khusus yang dikenal sebagai **method**, yang telah Anda gunakan! Faktanya, kita melihat ini di demo kita di atas ketika kita menggunakan `console.log`. Apa yang membuat metode berbeda dari fungsi adalah metode dilampirkan ke objek (`konsol` dalam contoh kita), sementara fungsi mengambang bebas. Anda akan mendengar banyak pengembang menggunakan istilah ini secara bergantian. + +### Praktik terbaik fungsi + +Ada beberapa praktik terbaik yang perlu diperhatikan saat membuat fungsi + +- Seperti biasa, gunakan nama deskriptif agar Anda tahu fungsinya +- Gunakan **camelCasing** untuk menggabungkan kata-kata +- Jaga agar fungsi Anda tetap fokus pada tugas tertentu + +## Memasukkan informasi ke suatu fungsi + +Agar suatu fungsi lebih dapat digunakan kembali, Anda sering kali ingin menyampaikan informasi ke dalamnya. Jika kita mempertimbangkan contoh `tampilkanSapaan` di atas, itu hanya akan menampilkan **Halo, dunia!**. Bukan fungsi paling berguna yang bisa dibuat seseorang. Jika kita ingin membuatnya sedikit lebih fleksibel, seperti mengizinkan seseorang untuk menentukan nama orang yang akan disapa, kita dapat menambahkan **parameter**. Parameter (juga terkadang disebut **argumen**), adalah informasi tambahan yang dikirim ke suatu fungsi. + +Parameter dicantumkan di bagian definisi dalam tanda kurung dan dipisahkan dengan koma seperti ini: + +```javascript +function nama(param, param2, param3) { + +} +``` + +Kita dapat memperbarui `tampilkanSapaan` kita untuk menerima sebuah nama dan menampilkannya. + +```javascript +function tampilkanSapaan(nama) { + const pesan = `Hello, ${nama}!`; + console.log(pesan); +} +``` + +Ketika kita ingin memanggil fungsi kita dan memasukkan parameternya, kita tentukan di dalam tanda kurung. + +```javascript +tampilkanSapaan('Christopher'); +// Menampilkan "Hello, Christopher!" ketika dijalankan +``` + +## Nilai dasar (Nilai Default) + +Kita dapat membuat fungsi kita lebih fleksibel dengan menambahkan lebih banyak parameter. Tetapi bagaimana jika kita tidak ingin setiap nilai ditentukan? Sesuai dengan contoh sapaan kita, kita bisa membiarkan nama sesuai kebutuhan (kita perlu tahu siapa yang kita sapa), tapi kita ingin membiarkan sapaan itu sendiri disesuaikan sesuai keinginan. Jika seseorang tidak ingin menyesuaikannya, kita memberikan nilai default sebagai gantinya. Untuk memberikan nilai default ke parameter, kita menyetelnya dengan cara yang sama seperti kita menyetel nilai untuk variabel - `namaParameter = 'nilaiDefault'`. Berikut contoh lengkapnya: + +```javascript +function tampilkanSapaan(nama, salam='Hello') { + console.log(`${salam}, ${nama}`); +} +``` + +Ketika kita memanggil fungsi tersebut, kita kemudian dapat memutuskan apakah kita ingin menetapkan nilai dari `salam`. + +```javascript +tampilkanSapaan('Christopher'); +// menampilkan "Hello, Christopher" + +tampilkanSapaan('Christopher', 'Hi'); +// menampilkan "Hi, Christopher" +``` + +## Nilai Kembali (Return values) + +Hingga saat ini fungsi yang kita buat akan selalu menghasilkan [konsol](https://developer.mozilla.org/en-US/docs/Web/API/console). Terkadang ini persis seperti yang kita cari, terutama saat kita membuat fungsi yang akan memanggil layanan lain. Tetapi bagaimana jika saya ingin membuat fungsi pembantu untuk melakukan kalkulasi dan memberikan nilai kembali sehingga saya dapat menggunakannya di tempat lain? + +Kita bisa melakukan ini dengan menggunakan **nilai kembali (return value)**. Nilai kembali dikembalikan oleh fungsi, dan dapat disimpan dalam variabel sama seperti kita dapat menyimpan nilai literal seperti string atau angka. + +Jika suatu fungsi mengembalikan sesuatu maka kata kunci `return` digunakan. Kata kunci `return` mengharapkan nilai atau referensi dari apa yang dikembalikan seperti: + +```javascript +return variabelSaya; +``` + +Kita bisa membuat fungsi untuk membuat pesan ucapan dan mengembalikan nilainya ke pemanggil + +```javascript +function buatPesanSapaan(nama) { + const pesan = `Hello, ${nama}`; + return pesan; +} +``` + +Saat memanggil fungsi ini, kita akan menyimpan nilai dalam variabel. Ini hampir sama dengan cara kita menetapkan variabel ke nilai statis (seperti `const nama = 'Christopher'`). + +```javascript +const pesanSapaan = buatPesanSapaan('Christopher'); +``` + +## Fungsi sebagai parameter untuk fungsi + +Saat Anda maju dalam karir pemrograman Anda, Anda akan menemukan fungsi yang menerima fungsi sebagai parameter. Trik rapi ini biasanya digunakan ketika kita tidak tahu kapan sesuatu akan terjadi atau selesai, tetapi kita tahu kita perlu melakukan operasi sebagai tanggapan. + +Sebagai contoh, pertimbangkan [setTimeout](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), yang memulai timer dan akan mengeksekusi kode setelah selesai. Kita perlu memberi tahu kode apa yang ingin kita jalankan. Kedengarannya seperti pekerjaan yang sempurna untuk suatu fungsi! + +Jika Anda menjalankan kode di bawah ini, setelah 3 detik Anda akan melihat pesan **3 detik telah berlalu**. + +```javascript +function tampilkanSelesai() { + console.log('3 detik telah berlalu'); +} +// nilai timer dalam milidetik +setTimeout(3000, tampilkanSelesai); +``` + +### Fungsi anonim + +Mari kita lihat lagi apa yang telah kita bangun. Kita membuat fungsi dengan nama yang akan digunakan satu kali. Saat aplikasi kita menjadi lebih kompleks, kita dapat melihat diri kita sendiri membuat banyak fungsi yang hanya akan dipanggil sekali. Ini tidak ideal. Ternyata, kita tidak selalu perlu memberi nama! + +Saat kita mengirimkan fungsi sebagai parameter, kita dapat mengabaikan pembuatannya terlebih dahulu dan sebagai gantinya membuatnya sebagai bagian dari parameter. Kita menggunakan kata kunci `function` yang sama, tetapi kita membuatnya sebagai parameter. + +Mari tulis ulang kode di atas untuk menggunakan fungsi anonim: + +```javascript +setTimeout(3000, function() { + console.log('3 detik telah berlalu'); +}); +``` + +Jika Anda menjalankan kode baru kita, Anda akan melihat kita mendapatkan hasil yang sama. Kita telah membuat fungsi, tetapi tidak harus memberinya nama! + +### Fungsi panah gemuk + +Satu pintasan yang umum di banyak bahasa pemrograman (termasuk JavaScript) adalah kemampuan untuk menggunakan apa yang disebut fungsi **panah (arrow)** atau **panah gemuk (fat arrow)**. Ini menggunakan indikator khusus `=>`, yang terlihat seperti panah - demikian namanya! Dengan menggunakan `=>`, kita dapat melewati kata kunci `function`. + +Mari kita tulis ulang kode kita sekali lagi untuk menggunakan fungsi panah gemuk: + +```javascript +setTimeout(3000, () => { + console.log('3 detik telah berlalu'); +}); +``` + +### Kapan menggunakan setiap strategi + +Anda sekarang telah melihat bahwa kita memiliki tiga cara untuk meneruskan fungsi sebagai parameter dan mungkin bertanya-tanya kapan harus menggunakannya. Jika Anda tahu Anda akan menggunakan fungsi tersebut lebih dari sekali, buatlah seperti biasa. Jika Anda akan menggunakannya hanya untuk satu lokasi, biasanya yang terbaik adalah menggunakan fungsi anonim. Apakah Anda menggunakan fungsi panah gemuk atau tidak atau sintaks `function` yang lebih tradisional terserah Anda, tetapi Anda akan melihat sebagian besar pengembang modern lebih memilih` => `. + +--- + +## 🚀 Tantangan + +Bisakah Anda mengartikulasikan dalam satu kalimat perbedaan antara fungsi dan metode? Cobalah! + +## Kuis Pasca-Kuliah +[Kuis pasca-kuliah](./.github/post-lecture-quiz.id.md) + +## Review & Belajar Mandiri + +Layak [membaca lebih banyak tentang fungsi panah](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), karena semakin sering digunakan dalam basis kode. Berlatihlah menulis fungsi, lalu menulis ulang dengan sintaks ini. + +## Assignment + +[Fun with Functions](./assignment.id.md) diff --git a/2-js-basics/2-functions-methods/translations/assignment.id.md b/2-js-basics/2-functions-methods/translations/assignment.id.md new file mode 100644 index 00000000..4ed72824 --- /dev/null +++ b/2-js-basics/2-functions-methods/translations/assignment.id.md @@ -0,0 +1,13 @@ +# Bersenang-senang dengan Fungsi + +## Instruksi + +Buat fungsi yang berbeda, baik fungsi yang mengembalikan sesuatu maupun fungsi yang tidak mengembalikan apa pun. + +Lihat apakah Anda dapat membuat fungsi yang memiliki campuran parameter dan parameter dengan nilai default. + +## Rubrik + +| Kriteria | Contoh | Memenuhi Syarat | Perlu Perbaikan | +|----------|---------------------------------------------------------------------------------------------------|-------------------------------------------------------------------|---------------------| +| | Solusi ditawarkan dengan dua atau lebih fungsi yang berkinerja baik dengan parameter yang beragam | Solusi kerja ditawarkan dengan satu fungsi dan beberapa parameter | Solusi memiliki bug | From eb39dcaaa3532b329e73e76f83e4cb1c5af03684 Mon Sep 17 00:00:00 2001 From: Yuuki Ebihara Date: Mon, 28 Dec 2020 22:06:21 +0900 Subject: [PATCH 04/41] translate 1-getting-started-lesson --- .../translations/assignment.ja.md | 11 + .../3-accessibility/translations/README.ja.md | 229 ++++++++++++++++++ .../translations/assignment.ja.md | 11 + .../translations/README.ja.md | 17 ++ 4 files changed, 268 insertions(+) create mode 100644 1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ja.md create mode 100644 1-getting-started-lessons/3-accessibility/translations/README.ja.md create mode 100644 1-getting-started-lessons/3-accessibility/translations/assignment.ja.md create mode 100644 1-getting-started-lessons/translations/README.ja.md diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ja.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ja.md new file mode 100644 index 00000000..a5057354 --- /dev/null +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ja.md @@ -0,0 +1,11 @@ +# ドキュメントを読む + +## 説明書 + +Web 開発者が必要とする可能性のあるツールは、[クライアントサイドツールの MDN ドキュメント](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview)に記載されているものが多くあります。このレッスンでカバーされていないツールを3つ選び、Web 開発者がそれを使う理由を説明し、このカテゴリに該当するツールを検索し、そのドキュメントを共有してください。同じツールの例を MDN ドキュメント上で使用しないでください。 + +## ルーブリック + +模範的な例 | 適切な | 改善が必要 +--- | --- | -- | +|Web 開発者がツールを使う理由を説明| 開発者がツールを使用する理由ではなく、どのように使用するかを説明しました。| 開発者がツールを使用する方法や理由については言及していません。 | \ No newline at end of file diff --git a/1-getting-started-lessons/3-accessibility/translations/README.ja.md b/1-getting-started-lessons/3-accessibility/translations/README.ja.md new file mode 100644 index 00000000..8121caf3 --- /dev/null +++ b/1-getting-started-lessons/3-accessibility/translations/README.ja.md @@ -0,0 +1,229 @@ +# アクセシブルな Web ページの作成 + +![All About Accessibility](webdev101-a11y.png) +> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac) + +## レクチャー前クイズ +[レクチャー前クイズ](.github/pre-lecture-quiz.md) + +> Web の力は、その普遍性にあります。障害の有無に関わらず、誰もがアクセスできることが重要です。 +> +> \- Sir Timothy Berners-Lee, W3C 理事、World Wide Web の発明者 + +この引用は、アクセシブルな Web サイトを作成することの重要性を完璧に強調しています。すべての人がアクセスできないアプリケーションは、定義上、排除的なものです。Web 開発者として、私たちは常にアクセシビリティを念頭に置くべきです。最初からこのことに焦点を当てることで、あなたが作成したページに誰もがアクセスできるようにすることができるようになります。このレッスンでは、Web 資産がアクセシブルであることを確実にするのに役立つツールと、アクセシビリティを念頭に置いて構築する方法について学びます。 + +## 使用するツール + +### スクリーンリーダー + +よく知られているアクセシビリティツールの一つにスクリーンリーダーがあります。 + +[スクリーンリーダー](https://ja.wikipedia.org/wiki/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%83%AA%E3%83%BC%E3%83%80%E3%83%BC)は、視覚障害のある方のために一般的に使用されているクライアントです。ブラウザが共有したい情報を適切に伝えることに時間を費やしているので、スクリーンリーダーも同じように情報を伝えるようにしなければなりません。 + +スクリーンリーダーは、最も基本的には、ページを上から下まで音声で読み上げます。あなたのページがすべてテキストである場合、リーダーはブラウザと同様の方法で情報を伝えます。もちろん、ウェブページが純粋なテキストであることはほとんどなく、リンク、グラフィック、カラー、その他の視覚的な要素が含まれます。これらの情報がスクリーンリーダーに正しく読まれるように注意を払わなければなりません。 + +すべてのウェブ開発者は、スクリーンリーダーに慣れる必要があります。上で強調したように、ユーザーが利用するのはクライアントです。ブラウザの操作方法を熟知しているのと同じように、スクリーンリーダーの操作方法を学ぶべきです。幸いなことに、スクリーンリーダーはほとんどのオペレーティングシステムに組み込まれています。 + +ブラウザの中には、テキストを音読したり、基本的なナビゲーション機能を提供したりするツールや拡張機能を内蔵しているものもありますが、[これらはアクセシビリティに焦点を当てたEdgeブラウザツール](https://support.microsoft.com/ja-jp/microsoft-edge/microsoft-edge-%E3%81%AE%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B7%E3%83%93%E3%83%AA%E3%83%86%E3%82%A3%E6%A9%9F%E8%83%BD-4c696192-338e-9465-b2cd-bd9b698ad19a)のようなものです。これらも重要なアクセシビリティツールですが、スクリーンリーダーとは機能が大きく異なるため、スクリーンリーダーのテストツールと勘違いしてはいけません。 + +✅ スクリーンリーダーやブラウザのテキストリーダーを試してみましょう。Windows ではデフォルトで [Narrator](https://support.microsoft.com/ja-jp/windows/%E3%83%8A%E3%83%AC%E3%83%BC%E3%82%BF%E3%83%BC%E3%81%AE%E8%A9%B3%E7%B4%B0%E3%81%AA%E3%82%AC%E3%82%A4%E3%83%89-e4397a0d-ef4f-b386-d8ae-c172f109bdb1) が搭載されており、[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/ja/docs/Learn/CSS/CSS_layout/Responsive_Design)を使用することは、ズームレベルを上げても良いユーザー体験を提供するために重要です。 + +もう一つのタイプのズームは、特殊なソフトウェアを使用して、実際の虫眼鏡を使用するのと同じように、画面のある領域を拡大してパンすることを目的としています。Windows では、[Magnifier](https://support.microsoft.com/ja-jp/windows/%E7%94%BB%E9%9D%A2%E4%B8%8A%E3%81%AE%E9%A0%85%E7%9B%AE%E3%82%92%E8%A6%8B%E3%82%84%E3%81%99%E3%81%8F%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AB-%E6%8B%A1%E5%A4%A7%E9%8F%A1%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B-414948ba-8b1c-d3bd-8615-0e5e32204198) が内蔵されており、[ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) は、より多くの機能を持ち、より多くのユーザーベースを持つサードパーティ製の拡大表示ソフトウェアです。macOS と iOS の両方には、[Zoom](https://www.apple.com/accessibility/mac/vision/) と呼ばれる拡大鏡ソフトが内蔵されています。 + +### コントラストチェッカー + +Webサイトの色は、色覚障害者やコントラストの低い色が見えにくい人のニーズに応えるために、慎重に選ぶ必要があります。 + +✅ [WCAG のカラーチェッカー](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=ja-JP)などのブラウザ拡張機能を使って、色使いを楽しむ Web サイトをテストしてみましょう。何がわかりますか？ + +### Lighthouse + +ブラウザの開発者ツールエリアには、Lighthouse ツールがあります。このツールは、Web サイトのアクセシビリティ (他の分析と同様に) を最初に見るために重要です。Lighthouse だけに頼らないことが重要ですが、100% のスコアはベースラインとして非常に役立ちます。 + +✅ ブラウザの開発者ツールパネルで Lighthouse を見つけて、任意のサイトで分析を実行してください。何を発見しましたか？ + +## アクセシビリティを考慮した設計 + +アクセシビリティは比較的大きなテーマです。あなたを助けるために、多くのリソースが用意されています。 + +- [Accessible U - University of Minnesota](https://accessibility.umn.edu/your-role/web-developers) + +アクセシブルなサイトを作成するためのすべての側面をカバーすることはできませんが、以下は、あなたが実装したいと思う中核的な原則のいくつかです。アクセシブルなページを最初からデザインすることは、既存のページに戻ってアクセシブルにするよりも**常に**簡単です。 + +## 良い表示の原則 + +### カラーセーフパレット + +人はさまざまな方法で世界を見ていますが、これには色も含まれます。サイトの配色を選択する際には、誰もがアクセスできるようにする必要があります。[カラーパレットを生成するための素晴らしいツールの1つが Color Safe ](http://colorsafe.co/)です。 + +✅ 色の使用に非常に問題のある Web サイトを特定してください。なぜですか？ + +### 正しい HTML を使用する + +CSS と JavaScript を使えば、あらゆる要素をあらゆるタイプのコントロールのように見せることができます。`` を使って `