hexatester
4 years ago
parent
07632d42ae
commit
760b37797f
@ -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
|
||||
@ -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
|
||||
@ -0,0 +1,195 @@
|
||||
# JavaScript Basics: Data Types
|
||||
|
||||
|
||||
> 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.
|
||||
|
||||
[](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)
|
||||
@ -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 |
|
||||
Loading…
Reference in new issue