├── .vscode
└── settings.json
├── module-1
├── homework
│ ├── jawaban_soal_pengenalan.md
│ └── soal_pengenalan.md
├── index.html
└── index.js
├── module-10-arrays
├── homework
│ ├── jawaban_arrays.md
│ └── soal_arrays.md
├── index.html
└── index.js
├── module-11-object
├── homework
│ ├── jawaban.md
│ └── soal.md
├── index.html
└── index.js
├── module-12-if-else
├── homework
│ ├── jawaban.md
│ └── soal.md
├── index.html
└── index.js
├── module-13-switch-case
├── homework
│ ├── challenge.md
│ ├── jawaban.md
│ ├── jawaban_challenge.md
│ └── soal.md
├── index.html
└── index.js
├── module-14-looping
├── homework
│ ├── challenge.md
│ ├── jawaban.md
│ ├── soal.md
│ └── solusi_challenge.md
├── index.html
└── index.js
├── module-15-functions
├── homework
│ ├── jawaban.md
│ └── soal.md
├── index.html
└── index.js
├── module-16-21-homework
├── jawaban.md
└── soal.md
├── module-16-functions-expressions
├── index.html
└── index.js
├── module-17-arrow-functions
├── index.html
└── index.js
├── module-19-IFFE
├── index.html
└── index.js
├── module-2-variable
├── homework
│ ├── jawaban_soal_variable.md
│ └── soal_variable.md
├── index.html
└── index.js
├── module-20-high-order-callback-functions
├── index.html
└── index.js
├── module-21-recursion
├── index.html
└── index.js
├── module-22-27-dom-homework
├── challenge
│ ├── challenge.md
│ └── solusi_challenge.md
├── jawaban_dom_soal_tipe_1.md
├── jawaban_dom_soal_tipe_2.md
├── soal_dom_tipe_1.md
└── soal_dom_tipe_2.md
├── module-22-dom-struktur
└── index.html
├── module-23-dom-access
└── index.html
├── module-24-dom-manipulasi-element
└── index.html
├── module-25-menambah-menghapus-element
└── index.html
├── module-26-dom-traversal
└── index.html
├── module-27-event-handling
└── index.html
├── module-28-oop
├── index.html
└── index.js
├── module-29-oop-classes
├── index.html
└── index.js
├── module-3-tipe-data
├── homework
│ ├── jawaban_soal_tipe_data.md
│ └── soal_tipe_data.md
├── index.html
└── index.js
├── module-30-inheritance
├── index.html
└── index.js
├── module-31-encapsulation
├── index.html
└── index.js
├── module-32-polymorphism
├── index.html
└── index.js
├── module-33-abstraction
├── index.html
└── index.js
├── module-34-error-handling
├── index.html
└── index.js
├── module-35-jenis-error
├── index.html
└── index.js
├── module-36-custom-error
├── index.html
└── index.js
├── module-37-pengenalan-asynchronous
├── index.html
└── index.js
├── module-38-setTimeout-setInterval
├── index.html
└── index.js
├── module-39-callback-asynchronous
├── index.html
└── index.js
├── module-4-type-conversion
├── homework
│ ├── jawaban_type_conversion.md
│ └── soal_type_conversion.md
├── index.html
└── index.js
├── module-40-promise-asynchronous
├── index.html
└── index.js
├── module-41-async-await
├── index.html
└── index.js
├── module-42-fetch-api
├── index.html
└── index.js
├── module-43-fetch-api-async-await
├── index.html
└── index.js
├── module-44-axios
├── index.html
└── index.js
├── module-45-modules
├── index.html
├── index.js
└── math.js
├── module-5-operator
├── homework
│ ├── jawaban_soal_operator.md
│ └── soal_operator.md
├── index.html
├── index.js
├── scriptAssignment.js
├── scriptLogika.js
├── scriptOperator.js
└── scriptTernary.js
├── module-6-strings
├── homework
│ ├── jawaban_soal_strings.md
│ └── soal_strings.md
├── index.html
└── index.js
├── module-7-numbers
├── homework
│ ├── jawaban_soal_numbers.md
│ └── soal_numbers.md
├── index.html
└── index.js
├── module-8-math-object
├── homework
│ ├── jawaban_soal_math_object.md
│ └── soal_math_object.md
├── index.html
└── index.js
├── module-9-date-object
├── homework
│ ├── jawaban_date_object.md
│ └── soal_date_object.md
├── index.html
└── index.js
├── module
├── module-10-arrays
│ ├── index.html
│ └── index.js
├── module-11-object
│ ├── index.html
│ └── index.js
├── module-12-if-else
│ ├── index.html
│ └── index.js
├── module-13-switch-case
│ ├── index.html
│ └── index.js
├── module-14-looping
│ ├── index.html
│ └── index.js
├── module-15-functions
│ ├── index.html
│ └── index.js
├── module-16-functions-expressions
│ ├── index.html
│ └── index.js
├── module-17-arrow-functions
│ ├── index.html
│ └── index.js
├── module-19-IFFE
│ ├── index.html
│ └── index.js
├── module-20-high-order-callback-functions
│ ├── index.html
│ └── index.js
├── module-21-recursion
│ ├── index.html
│ └── index.js
├── module-22-scope-hoisting
│ ├── index.html
│ └── index.js
├── module-23-oop
│ ├── index.html
│ └── index.js
├── module-24-oop-classes
│ ├── index.html
│ └── index.js
├── module-25-encapsulation
│ ├── index.html
│ └── index.js
├── module-26-polymorphism
│ ├── index.html
│ └── index.js
├── module-27-abstraction
│ ├── index.html
│ └── index.js
├── module-28-dom
│ ├── index.html
│ └── index.js
├── module-7-numbers
│ ├── index.html
│ └── index.js
├── module-8-math-object
│ ├── index.html
│ └── index.js
└── module-9-date-object
│ ├── index.html
│ └── index.js
└── template-module
├── index.html
└── index.js
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "liveServer.settings.port": 5501
3 | }
--------------------------------------------------------------------------------
/module-1/homework/jawaban_soal_pengenalan.md:
--------------------------------------------------------------------------------
1 | # Jawaban dan Penjelasan Pengenalan JavaScript
2 |
3 | ## 1. Definisi JavaScript
4 | **Jawaban:** b) Bahasa pemrograman untuk web yang digunakan untuk membuat halaman web menjadi interaktif
5 | **Penjelasan:** JavaScript adalah bahasa pemrograman yang terutama digunakan untuk membuat halaman web lebih dinamis dan interaktif, memungkinkan pengguna berinteraksi dengan elemen halaman tanpa perlu memuat ulang seluruh halaman.
6 |
7 | ## 2. Fungsi Utama JavaScript
8 | **Jawaban:** a) Dinamis, Interaktif, dan Versatil
9 | **Penjelasan:** JavaScript memungkinkan perubahan konten halaman tanpa memuat ulang (dinamis), digunakan untuk menangani event, animasi, dan validasi form (interaktif), serta dapat digunakan di front-end maupun back-end (versatil).
10 |
11 | ## 3. Sejarah JavaScript
12 | **Jawaban:** a) Brendan Eich, 1995
13 | **Penjelasan:** JavaScript diciptakan oleh Brendan Eich pada tahun 1995 saat bekerja di Netscape. Bahasa ini awalnya dikembangkan untuk memberikan kemampuan interaktif pada halaman web.
14 |
15 | ## 4. Evolusi Nama JavaScript
16 | **Jawaban:** d) Mocha dan LiveScript
17 | **Penjelasan:** JavaScript awalnya disebut "Mocha," kemudian diubah menjadi "LiveScript," dan akhirnya dinamai "JavaScript" untuk menarik minat pengembang Java.
18 |
19 | ## 5. Adopsi JavaScript oleh Browser
20 | **Jawaban:** b) 1996
21 | **Penjelasan:** JavaScript diadopsi oleh dua browser utama, Netscape Navigator dan Internet Explorer, pada tahun 1996, yang kemudian membantu menyebarluaskan penggunaan JavaScript di web.
22 |
23 | ## 6. Standarisasi JavaScript
24 | **Jawaban:** a) ECMAScript
25 | **Penjelasan:** Pada tahun 1997, ECMAScript diciptakan sebagai standar JavaScript, yang memungkinkan berbagai implementasi JavaScript di browser tetap konsisten.
26 |
27 | ## 7. Versi ECMAScript
28 | **Jawaban:** b) 2015, Arrow functions dan Promises
29 | **Penjelasan:** ECMAScript 6 (ES6) dirilis pada tahun 2015, memperkenalkan banyak fitur baru seperti arrow functions, promises, template literals, dan lainnya, yang membuat JavaScript lebih modern dan mudah digunakan.
30 |
31 | ## 8. JavaScript di Server
32 | **Jawaban:** c) Node.js
33 | **Penjelasan:** Node.js adalah lingkungan runtime yang memungkinkan JavaScript digunakan di sisi server, memungkinkan pengembang menggunakan JavaScript untuk full-stack development.
34 |
35 | ## 9. Mesin JavaScript
36 | **Jawaban:** a) V8
37 | **Penjelasan:** V8 adalah mesin JavaScript yang dikembangkan oleh Google untuk browser Chrome. Mesin ini yang bertugas mengeksekusi kode JavaScript dengan performa tinggi.
38 |
39 | ## 10. Langkah Kerja JavaScript - Parsing
40 | **Jawaban:** b) Membaca HTML dan membentuk DOM
41 | **Penjelasan:** Pada tahap parsing, browser membaca kode HTML dan membentuk struktur DOM (Document Object Model), yang kemudian dapat dimanipulasi oleh JavaScript untuk mengubah konten halaman.
42 |
43 | ## 11. Langkah Kerja JavaScript - Event Loop
44 | **Jawaban:** b) Melalui Event Loop
45 | **Penjelasan:** Event loop adalah mekanisme yang memungkinkan JavaScript menangani event secara asinkron tanpa memblokir eksekusi kode lainnya, yang memastikan halaman web tetap responsif.
46 |
47 | ## 12. Contoh Sederhana Penggunaan JavaScript
48 | **Jawaban:** c) Dengan menulis kode JavaScript yang memanipulasi DOM
49 | **Penjelasan:** JavaScript dapat digunakan untuk mengubah konten atau gaya elemen di halaman web dengan memanipulasi DOM, misalnya mengubah teks atau warna elemen secara dinamis berdasarkan interaksi pengguna.
50 |
--------------------------------------------------------------------------------
/module-1/homework/soal_pengenalan.md:
--------------------------------------------------------------------------------
1 | # Pertanyaan Pengenalan JavaScript
2 |
3 | ## 1. Definisi JavaScript
4 | **Apa yang dimaksud dengan JavaScript?**
5 | - a. Bahasa pemrograman untuk mengatur server
6 | - b. Bahasa pemrograman untuk web yang digunakan untuk membuat halaman web menjadi interaktif
7 | - c. Bahasa pemrograman untuk mengatur database
8 | - d. Bahasa pemrograman untuk membuat aplikasi desktop
9 |
10 | ## 2. Fungsi Utama JavaScript
11 | **Apa saja fungsi utama dari JavaScript?**
12 | - a. Dinamis, Interaktif, dan Versatil
13 | - b. Statis, Lambat, dan Sulit Dipelajari
14 | - c. Hanya untuk Front-End
15 | - d. Hanya untuk Back-End
16 |
17 | ## 3. Sejarah JavaScript
18 | **Siapakah pencipta JavaScript dan pada tahun berapa diciptakan?**
19 | - a. Brendan Eich, 1995
20 | - b. Tim Berners-Lee, 1990
21 | - c. James Gosling, 1991
22 | - d. Bjarne Stroustrup, 1983
23 |
24 | ## 4. Evolusi Nama JavaScript
25 | **Apa nama awal dari JavaScript sebelum menjadi nama saat ini?**
26 | - a. Mocha
27 | - b. LiveScript
28 | - c. JavaScript
29 | - d. Mocha dan LiveScript
30 |
31 | ## 5. Adopsi JavaScript oleh Browser
32 | **Pada tahun berapa JavaScript diadopsi oleh Netscape Navigator dan Internet Explorer?**
33 | - a. 1995
34 | - b. 1996
35 | - c. 1997
36 | - d. 1998
37 |
38 | ## 6. Standarisasi JavaScript
39 | **Apa nama standar JavaScript yang diciptakan pada tahun 1997?**
40 | - a. ECMAScript
41 | - b. JScript
42 | - c. TypeScript
43 | - d. JavaScript Standard
44 |
45 | ## 7. Versi ECMAScript
46 | **Kapan ECMAScript 6 (ES6) dirilis dan sebutkan beberapa fitur baru yang diperkenalkan?**
47 | - a. 2009, Callback functions
48 | - b. 2015, Arrow functions dan Promises
49 | - c. 2005, Async/Await
50 | - d. 2018, Modules dan Imports
51 |
52 | ## 8. JavaScript di Server
53 | **Teknologi apa yang memungkinkan JavaScript digunakan di sisi server?**
54 | - a. React.js
55 | - b. Angular
56 | - c. Node.js
57 | - d. Vue.js
58 |
59 | ## 9. Mesin JavaScript
60 | **Setiap browser memiliki mesin JavaScript untuk mengeksekusi kode. Contoh mesin JavaScript di Chrome adalah?**
61 | - a. V8
62 | - b. SpiderMonkey
63 | - c. Chakra
64 | - d. Nitro
65 |
66 | ## 10. Langkah Kerja JavaScript - Parsing
67 | **Apa yang dilakukan oleh browser pada tahap parsing dalam langkah kerja JavaScript?**
68 | - a. Menjalankan kode JavaScript
69 | - b. Membaca HTML dan membentuk DOM
70 | - c. Menangani event secara asinkron
71 | - d. Memuat ulang halaman web
72 |
73 | ## 11. Langkah Kerja JavaScript - Event Loop
74 | **Bagaimana JavaScript menangani event secara asinkron tanpa memblokir eksekusi kode lainnya?**
75 | - a. Menggunakan DOM
76 | - b. Melalui Event Loop
77 | - c. Dengan memuat ulang halaman
78 | - d. Melalui Callback
79 |
80 | ## 12. Contoh Sederhana Penggunaan JavaScript
81 | **Bagaimana script sederhana di HTML dapat mengubah konten atau gaya elemen di halaman web?**
82 | - a. Dengan mengubah file CSS
83 | - b. Dengan menggunakan SQL
84 | - c. Dengan menulis kode JavaScript yang memanipulasi DOM
85 | - d. Dengan mengatur server
86 |
--------------------------------------------------------------------------------
/module-1/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Tutorial-JavaScript
7 |
8 |
9 |
Tutorial-JavaScript
10 |
11 |
12 |
--------------------------------------------------------------------------------
/module-1/index.js:
--------------------------------------------------------------------------------
1 | console.log("Hello from console")
--------------------------------------------------------------------------------
/module-10-arrays/homework/jawaban_arrays.md:
--------------------------------------------------------------------------------
1 |
2 | # Jawaban untuk Pertanyaan tentang Array di JavaScript
3 |
4 | 1. **Apa itu Array dalam JavaScript?**
5 | Jawaban: b) Sebuah struktur data yang digunakan untuk menyimpan koleksi elemen dalam satu variabel.
6 |
7 | 2. **Bagaimana cara membuat array di JavaScript menggunakan array literal?**
8 | Jawaban: a) let fruits = ["apple", "banana", "mango"]
9 |
10 | 3. **Apa yang akan ditampilkan oleh kode berikut?**
11 | Jawaban: a) apple
12 |
13 | 4. **Bagaimana cara menambahkan elemen baru di akhir array?**
14 | Jawaban: b) array.push()
15 |
16 | 5. **Bagaimana cara menggabungkan dua array di JavaScript?**
17 | Jawaban: c) array.concat()
18 |
--------------------------------------------------------------------------------
/module-10-arrays/homework/soal_arrays.md:
--------------------------------------------------------------------------------
1 |
2 | # Pertanyaan tentang Array di JavaScript
3 |
4 | 1. **Apa itu Array dalam JavaScript?**
5 | a) Sebuah tipe data yang dapat menyimpan satu elemen.
6 | b) Sebuah struktur data yang digunakan untuk menyimpan koleksi elemen dalam satu variabel.
7 | c) Sebuah variabel khusus yang hanya dapat menyimpan string.
8 | d) Sebuah fungsi yang mengembalikan nilai.
9 |
10 | 2. **Bagaimana cara membuat array di JavaScript menggunakan array literal?**
11 | a) let fruits = ["apple", "banana", "mango"]
12 | b) let fruits = "apple, banana, mango"
13 | c) let fruits = {apple: "banana", mango: "orange"}
14 | d) let fruits = ("apple", "banana", "mango")
15 |
16 | 3. **Apa yang akan ditampilkan oleh kode berikut?**
17 | ```javascript
18 | let fruits = ["apple", "banana", "mango"];
19 | console.log(fruits[0]);
20 | ```
21 | a) apple
22 | b) banana
23 | c) mango
24 | d) undefined
25 |
26 | 4. **Bagaimana cara menambahkan elemen baru di akhir array?**
27 | a) array.add()
28 | b) array.push()
29 | c) array.append()
30 | d) array.insert()
31 |
32 | 5. **Bagaimana cara menggabungkan dua array di JavaScript?**
33 | a) array.join()
34 | b) array.merge()
35 | c) array.concat()
36 | d) array.combine()
37 |
--------------------------------------------------------------------------------
/module-10-arrays/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Tutorial-JavaScript
7 |
8 |
9 |
Tutorial-JavaScript
10 |
11 |
12 |
--------------------------------------------------------------------------------
/module-10-arrays/index.js:
--------------------------------------------------------------------------------
1 | /* Array di JavaScript */
2 |
3 | // Apa Itu Array?, Array adalah struktur data yang digunakan untuk menyimpan koleksi elemen, seperti angka atau string, dalam satu variabel. Di JavaScript, array dapat menyimpan berbagai tipe data sekaligus dan memiliki indeks yang dimulai dari 0.
4 |
5 | // Membuat Array
6 |
7 | // 1. Menggunakan notasi array literal:
8 | let fruits = ["apple", "banana", "mango"]
9 | // console.log(fruits)
10 |
11 | // 2. Menggunakan new Array():
12 |
13 | let num = new Array(1,2,3,4,5)
14 | // console.log(num)
15 |
16 |
17 |
18 | // Mengakses Elemen Array
19 | // console.log(fruits[0])
20 | // console.log(fruits[2])
21 |
22 |
23 |
24 | // Menambah atau Mengubah Elemen Array
25 | fruits[3] = "Strawberry"
26 | fruits[0] = "Orange"
27 | // console.log(fruits)
28 |
29 |
30 |
31 |
32 | // Manipulasi Array
33 |
34 | let numbers = [1,2,3]
35 | // numbers.push(4)
36 | // numbers.pop()
37 | // numbers.shift()
38 | // numbers.unshift(5)
39 | // console.log(numbers)
40 |
41 | let numbers2 = [4,5]
42 | let newNumber = numbers.concat(numbers2)
43 | console.log(newNumber)
44 | newNumber.splice(2,1,10)
45 | console.log(newNumber)
46 | console.log(newNumber.indexOf(10))
47 | console.log(newNumber.includes(5))
48 | // console.log(newNumber.slice(2,4))
49 |
50 |
51 |
52 |
53 |
54 |
55 | // Multidimensional Array (Array of Arrays)
56 | let matrix = [
57 | [1,2,3],
58 | [4,5,6],
59 | [7,8,9]
60 | ]
61 |
62 | console.log(matrix[1][2])
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
--------------------------------------------------------------------------------
/module-11-object/homework/jawaban.md:
--------------------------------------------------------------------------------
1 |
2 | # Jawaban untuk Pertanyaan tentang Object di JavaScript
3 |
4 | 1. **Apa itu Object dalam JavaScript?**
5 | Jawaban: b) Tipe data yang digunakan untuk menyimpan koleksi data dan entitas yang lebih kompleks.
6 |
7 | 2. **Bagaimana cara membuat object menggunakan object literal?**
8 | Jawaban: a) let object = {};
9 |
10 | 3. **Apa yang akan ditampilkan oleh kode berikut?**
11 | Jawaban: b) Ranggo
12 |
13 | 4. **Bagaimana cara menambah properti baru ke dalam object?**
14 | Jawaban: b) object[property] = value;
15 |
16 | 5. **Bagaimana cara menghapus properti dari sebuah object?**
17 | Jawaban: b) delete object.property;
18 |
--------------------------------------------------------------------------------
/module-11-object/homework/soal.md:
--------------------------------------------------------------------------------
1 |
2 | # Pertanyaan tentang Object di JavaScript
3 |
4 | 1. **Apa itu Object dalam JavaScript?**
5 | a) Tipe data yang digunakan untuk menyimpan satu nilai saja.
6 | b) Tipe data yang digunakan untuk menyimpan koleksi data dan entitas yang lebih kompleks.
7 | c) Tipe data yang hanya menyimpan angka.
8 | d) Tipe data yang hanya menyimpan string.
9 |
10 | 2. **Bagaimana cara membuat object menggunakan object literal?**
11 | a) let object = {};
12 | b) let object = [];
13 | c) let object = new Object();
14 | d) let object = ();
15 |
16 | 3. **Apa yang akan ditampilkan oleh kode berikut?**
17 | ```javascript
18 | let mahasiswa = {
19 | nama: "Ranggo",
20 | umur: 21,
21 | "jurusan mahasiswa": "Teknik Informatika"
22 | };
23 | console.log(mahasiswa.nama);
24 | ```
25 | a) Teknik Informatika
26 | b) Ranggo
27 | c) 21
28 | d) undefined
29 |
30 | 4. **Bagaimana cara menambah properti baru ke dalam object?**
31 | a) object.addProperty = value;
32 | b) object[property] = value;
33 | c) object.push(property, value);
34 | d) object.add(property, value);
35 |
36 | 5. **Bagaimana cara menghapus properti dari sebuah object?**
37 | a) remove object.property;
38 | b) delete object.property;
39 | c) deleteProperty(object.property);
40 | d) object.remove(property);
41 |
--------------------------------------------------------------------------------
/module-11-object/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Tutorial-JavaScript
7 |
8 |
9 |
Tutorial-JavaScript
10 |
11 |
12 |
--------------------------------------------------------------------------------
/module-11-object/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Object di JavaScript
3 | *
4 | * @format
5 | */
6 |
7 | // Pengertian Object, Object di JavaScript adalah tipe data yang digunakan untuk menyimpan koleksi data dan entitas yang lebih kompleks. Sebuah object adalah pasangan antara key dan value (disebut juga properti).
8 |
9 | // Membuat Object
10 | // 1. Object Literal
11 | let mobil = {
12 | merk : 'Toyota',
13 | model: 'Avanza',
14 | tahun: 2014
15 | }
16 | // console.log(mobil)
17 |
18 | // 2. Menggunakan Constructor new Object():
19 | let buku = new Object()
20 | buku.judul = 'Belajar JavaScript'
21 | buku.penulis = 'Ranggo Pato'
22 | // console.log(buku)
23 |
24 |
25 | let mahasiswa = {
26 | nama: "Ranggo",
27 | umur: 21,
28 | "jurusan mahasiswa": 'Teknik Informatika'
29 | }
30 | // Mengakses Properti Object
31 | // 1. Menggunakan Notasi Titik (Dot Notation):
32 | console.log(mahasiswa.nama)
33 |
34 |
35 | // 2. Menggunakan Notasi Kurung (Bracket Notation):
36 | console.log(mahasiswa["jurusan mahasiswa"])
37 |
38 |
39 |
40 | // Menambah dan Mengubah Properti
41 | // 1. Menambah Properti:
42 | mahasiswa.alamat = 'Jakarta'
43 | // console.log(mahasiswa)
44 |
45 | // 2. Mengubah Properti:
46 | mahasiswa.nama = 'Budi'
47 | // console.log(mahasiswa)
48 |
49 |
50 | // Menghapus Properti
51 | delete mahasiswa.alamat
52 | // console.log(mahasiswa)
53 |
54 | // Nested Object
55 | let universitas ={
56 | "nama": "ITB",
57 | fakultas: {
58 | nama: 'Fakultas Teknik Industri',
59 | jurusan: 'Teknik Fisika'
60 | }
61 | }
62 | console.log(universitas)
63 |
64 | // Destructuring Object
65 | let {nama, umur} = mahasiswa
66 | console.log(umur)
--------------------------------------------------------------------------------
/module-12-if-else/homework/jawaban.md:
--------------------------------------------------------------------------------
1 |
2 | # Jawaban untuk Pertanyaan tentang If-Else di JavaScript
3 |
4 | 1. **Apa fungsi dari if-else statement di JavaScript?**
5 | Jawaban: b) Membuat keputusan berdasarkan kondisi tertentu.
6 |
7 | 2. **Apa yang akan ditampilkan oleh kode berikut?**
8 | Jawaban: b) You are not eligible to vote
9 |
10 | 3. **Bagaimana cara memeriksa beberapa kondisi secara berurutan menggunakan if-else?**
11 | Jawaban: b) Menggunakan if-else if.
12 |
13 | 4. **Apa yang akan ditampilkan oleh kode berikut?**
14 | Jawaban: c) Grade: C
15 |
16 | 5. **Apa yang dimaksud dengan nested if-else?**
17 | Jawaban: b) Menggunakan if-else di dalam blok if-else lainnya.
18 |
19 |
20 | ## Jawaban Challenge
21 | ```
22 | let num = 7;
23 |
24 | if (num > 0) {
25 | if (num % 2 === 0) {
26 | console.log('Angka ini positif dan genap');
27 | } else {
28 | console.log('Angka ini positif dan ganjil');
29 | }
30 | } else if (num < 0) {
31 | if (num % 2 === 0) {
32 | console.log('Angka ini negatif dan genap');
33 | } else {
34 | console.log('Angka ini negatif dan ganjil');
35 | }
36 | } else {
37 | console.log('Angka ini adalah nol');
38 | }
39 |
40 | ```
--------------------------------------------------------------------------------
/module-12-if-else/homework/soal.md:
--------------------------------------------------------------------------------
1 |
2 | # Pertanyaan tentang If-Else di JavaScript
3 |
4 | 1. **Apa fungsi dari if-else statement di JavaScript?**
5 | a) Mengulang blok kode tertentu.
6 | b) Membuat keputusan berdasarkan kondisi tertentu.
7 | c) Menghentikan eksekusi program.
8 | d) Mendeklarasikan variabel.
9 |
10 | 2. **Apa yang akan ditampilkan oleh kode berikut?**
11 | ```javascript
12 | let age = 15;
13 | if(age >= 18) {
14 | console.log('You are eligible to vote');
15 | } else {
16 | console.log('You are not eligible to vote');
17 | }
18 | ```
19 | a) You are eligible to vote
20 | b) You are not eligible to vote
21 | c) Error
22 | d) Tidak ada output
23 |
24 | 3. **Bagaimana cara memeriksa beberapa kondisi secara berurutan menggunakan if-else?**
25 | a) Menggunakan if dan else bersama-sama tanpa blok tambahan.
26 | b) Menggunakan if-else if.
27 | c) Menggunakan switch-case.
28 | d) Menggunakan nested if-else.
29 |
30 | 4. **Apa yang akan ditampilkan oleh kode berikut?**
31 | ```javascript
32 | let score = 75;
33 | if(score >= 90) {
34 | console.log('Grade: A');
35 | } else if(score >= 80) {
36 | console.log('Grade: B');
37 | } else if(score >= 70) {
38 | console.log('Grade: C');
39 | } else if(score >= 60) {
40 | console.log('Grade: D');
41 | } else {
42 | console.log('Grade: F');
43 | }
44 | ```
45 | a) Grade: A
46 | b) Grade: B
47 | c) Grade: C
48 | d) Grade: D
49 |
50 | 5. **Apa yang dimaksud dengan nested if-else?**
51 | a) Menggunakan if-else dalam satu baris kode.
52 | b) Menggunakan if-else di dalam blok if-else lainnya.
53 | c) Menggunakan switch-case di dalam if-else.
54 | d) Menggunakan loop di dalam if-else.
55 |
56 | ## Challenge
57 | **Buatlah sebuah script menggunakan if-else yang memeriksa sebuah angka apakah angka tersebut positif, negatif, atau nol, dan apakah angka tersebut genap atau ganjil.**
58 |
--------------------------------------------------------------------------------
/module-12-if-else/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Tutorial-JavaScript
7 |
8 |
9 |
Tutorial-JavaScript
10 |
11 |
12 |
--------------------------------------------------------------------------------
/module-12-if-else/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * If-Else Statement di JavaScript
3 | *
4 | * @format
5 | */
6 |
7 | // if-else statement adalah salah satu struktur kontrol yang paling dasar di JavaScript. Ini digunakan untuk membuat keputusan berdasarkan kondisi tertentu. Jika kondisi tersebut benar (true), blok kode tertentu akan dijalankan. Jika salah (false), kode lain dapat dijalankan.
8 |
9 | // Sintaks Dasar
10 | // if (kondisi) {
11 | // // Kode yang dijalankan jika kondisi benar (true)
12 | // } else {
13 | // // Kode yang dijalankan jika kondisi salah (false)
14 | // }
15 |
16 | let age = 15
17 |
18 | if(age>=18){
19 | console.log('You are eligible vote')
20 | } else {
21 | console.log('You are not eligible to vote')
22 | }
23 |
24 | // if-else if digunakan untuk memeriksa beberapa kondisi secara berurutan. Blok kode pertama yang kondisinya benar (true) akan dijalankan, dan eksekusi akan berhenti setelah itu.
25 |
26 | // if (kondisi1) {
27 | // // Kode jika kondisi1 benar (true)
28 | // } else if (kondisi2) {
29 | // // Kode jika kondisi2 benar (true)
30 | // } else {
31 | // // Kode jika semua kondisi salah (false)
32 | // }
33 |
34 | let score = 50
35 | if(score >= 90) {
36 | console.log('Grade : A')
37 | } else if(score >=80){
38 | console.log('Grade : B')
39 | } else if (score>=70){
40 | console.log('Grade : C')
41 | } else if (score >=60) {
42 | console.log('Grade : D')
43 | } else {
44 | console.log('Grade : F')
45 | }
46 |
47 |
48 | // Nested If-Else (If-Else Bertingkat), Kita juga bisa menempatkan if-else di dalam blok if-else lainnya. Ini disebut sebagai nested if-else.
49 |
50 | // if (kondisi1) {
51 | // if (kondisi2) {
52 | // // Kode jika kondisi1 dan kondisi2 benar
53 | // } else {
54 | // // Kode jika kondisi1 benar tapi kondisi2 salah
55 | // }
56 | // } else {
57 | // // Kode jika kondisi1 salah
58 | // }
59 |
60 | let num = -6
61 |
62 | if (num>0){
63 | if(num % 2 ==0){
64 | console.log('Number ini positive dan dia bilangan genap')
65 | } else {
66 | console.log('Number ini positive dan bilangan ganjil')
67 | }
68 | } else {
69 | console.log('Number ini bilangan negative')
70 | }
--------------------------------------------------------------------------------
/module-13-switch-case/homework/challenge.md:
--------------------------------------------------------------------------------
1 |
2 | # Challenge: Switch-Case di JavaScript
3 |
4 | Buatlah kode menggunakan switch-case yang menerima sebuah variabel `bulan` dengan nilai 1 hingga 12, dan mencetak nama bulan tersebut. Sertakan case default yang mencetak "Bulan tidak valid" jika nilainya tidak berada dalam rentang 1 hingga 12.
5 |
6 | **Hint**: Anda dapat menggunakan contoh switch-case dari materi sebelumnya sebagai panduan.
7 |
--------------------------------------------------------------------------------
/module-13-switch-case/homework/jawaban.md:
--------------------------------------------------------------------------------
1 |
2 | # Jawaban: Switch-Case di JavaScript
3 |
4 | ## 1. Apa yang terjadi jika pernyataan `break` tidak digunakan dalam sebuah `case` di dalam switch-case?
5 | **Jawaban: B) Program akan melanjutkan ke case berikutnya hingga menemukan break atau akhir dari switch-case.**
6 |
7 | ## 2. Apa hasil dari kode berikut ini?
8 | ```javascript
9 | const hari = 3;
10 | let namaHari;
11 |
12 | switch (hari) {
13 | case 1:
14 | namaHari = 'Senin';
15 | case 2:
16 | namaHari = 'Selasa';
17 | case 3:
18 | namaHari = 'Rabu';
19 | break;
20 | case 4:
21 | namaHari = 'Kamis';
22 | default:
23 | namaHari = 'Hari tidak valid';
24 | }
25 | console.log(namaHari);
26 | ```
27 | **Jawaban: C) Rabu**
28 |
29 | ## 3. Kapan kita lebih baik menggunakan switch-case daripada if-else?
30 | **Jawaban: B) Ketika ada banyak kemungkinan nilai yang harus diperiksa.**
31 |
--------------------------------------------------------------------------------
/module-13-switch-case/homework/jawaban_challenge.md:
--------------------------------------------------------------------------------
1 |
2 | # Jawaban: Challenge Switch-Case di JavaScript
3 |
4 | ```javascript
5 | const bulan = 5;
6 | let namaBulan;
7 |
8 | switch (bulan) {
9 | case 1:
10 | namaBulan = 'Januari';
11 | break;
12 | case 2:
13 | namaBulan = 'Februari';
14 | break;
15 | case 3:
16 | namaBulan = 'Maret';
17 | break;
18 | case 4:
19 | namaBulan = 'April';
20 | break;
21 | case 5:
22 | namaBulan = 'Mei';
23 | break;
24 | case 6:
25 | namaBulan = 'Juni';
26 | break;
27 | case 7:
28 | namaBulan = 'Juli';
29 | break;
30 | case 8:
31 | namaBulan = 'Agustus';
32 | break;
33 | case 9:
34 | namaBulan = 'September';
35 | break;
36 | case 10:
37 | namaBulan = 'Oktober';
38 | break;
39 | case 11:
40 | namaBulan = 'November';
41 | break;
42 | case 12:
43 | namaBulan = 'Desember';
44 | break;
45 | default:
46 | namaBulan = 'Bulan tidak valid';
47 | }
48 | console.log(namaBulan);
49 | ```
50 |
--------------------------------------------------------------------------------
/module-13-switch-case/homework/soal.md:
--------------------------------------------------------------------------------
1 |
2 | # Pertanyaan: Switch-Case di JavaScript
3 |
4 | ## 1. Apa yang terjadi jika pernyataan `break` tidak digunakan dalam sebuah `case` di dalam switch-case?
5 | - A) Program akan menghentikan eksekusi seluruh switch-case.
6 | - B) Program akan melanjutkan ke case berikutnya hingga menemukan break atau akhir dari switch-case.
7 | - C) Program akan mengulang case saat ini.
8 | - D) Program akan langsung melompat ke blok default.
9 |
10 | ## 2. Apa hasil dari kode berikut ini?
11 | ```javascript
12 | const hari = 3;
13 | let namaHari;
14 |
15 | switch (hari) {
16 | case 1:
17 | namaHari = 'Senin';
18 | case 2:
19 | namaHari = 'Selasa';
20 | case 3:
21 | namaHari = 'Rabu';
22 | break;
23 | case 4:
24 | namaHari = 'Kamis';
25 | default:
26 | namaHari = 'Hari tidak valid';
27 | }
28 | console.log(namaHari);
29 | ```
30 | - A) Senin
31 | - B) Selasa
32 | - C) Rabu
33 | - D) Hari tidak valid
34 |
35 | ## 3. Kapan kita lebih baik menggunakan switch-case daripada if-else?
36 | - A) Ketika hanya ada dua kemungkinan nilai yang diperiksa.
37 | - B) Ketika ada banyak kemungkinan nilai yang harus diperiksa.
38 | - C) Ketika kondisi yang diperiksa kompleks.
39 | - D) Ketika kita perlu melakukan operasi aritmatika.
40 |
--------------------------------------------------------------------------------
/module-13-switch-case/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Tutorial-JavaScript
7 |
8 |
9 |
Tutorial-JavaScript
10 |
11 |
12 |
--------------------------------------------------------------------------------
/module-13-switch-case/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Switch-Case di JavaScript
3 | *
4 | * @format
5 | */
6 |
7 | // Switch-case adalah pernyataan kondisional di JavaScript yang digunakan untuk membandingkan sebuah ekspresi dengan beberapa kemungkinan nilai dan mengeksekusi blok kode tertentu berdasarkan kecocokan nilai tersebut. Switch-case sering digunakan sebagai alternatif dari beberapa pernyataan if-else yang berturut-turut ketika kita ingin mengevaluasi sebuah variabel terhadap banyak kemungkinan nilai.
8 |
9 | /*
10 | switch (ekspresi) {
11 | case nilai1:
12 | // Kode yang dijalankan jika ekspresi === nilai1
13 | break;
14 | case nilai2:
15 | // Kode yang dijalankan jika ekspresi === nilai2
16 | break;
17 | // Tambahkan lebih banyak case sesuai kebutuhan
18 | default:
19 | // Kode yang dijalankan jika tidak ada case yang cocok
20 | }
21 | */
22 |
23 | const hari = 5;
24 | let namaHari;
25 |
26 | switch (hari) {
27 | case 1:
28 | namaHari = 'Senin';
29 | console.log('Senin');
30 | case 2:
31 | namaHari = 'Selasa';
32 | console.log('Selasa');
33 | case 3:
34 | namaHari = 'Rabu';
35 | console.log('Rabu');
36 | case 4:
37 | namaHari = 'Kamis';
38 | console.log('Kamis');
39 | case 5:
40 | namaHari = 'Jumat';
41 | console.log('Jumaat');
42 | break;
43 | case 6:
44 | namaHari = 'Sabtu';
45 | console.log('Sabtu');
46 | case 7:
47 | namaHari = 'Minggu';
48 | console.log('Minggu');
49 | default:
50 | namaHari = 'Hari tidak valid';
51 | }
52 | // console.log(namaHari);
53 |
54 | // Eksekusi Tanpa Break: Jika kamu tidak menempatkan break setelah setiap case, maka semua case di bawahnya akan dijalankan (fall-through) hingga menemukan break atau akhir dari switch-case.
55 |
56 | // Switch-Case dengan Ekspresi atau Operasi
57 | let nilai = 70;
58 | switch (true) {
59 | case nilai >= 90:
60 | console.log('Grade : A');
61 | break
62 | case nilai >= 80:
63 | console.log('Grade : B');
64 | break
65 | case nilai >= 70:
66 | console.log('Grade : C');
67 | break
68 | case nilai >= 60:
69 | console.log('Grade : D');
70 | break
71 | default:
72 | console.log('Grade : F')
73 | }
74 |
75 | /* Kelebihan:
76 | Lebih mudah dibaca dibandingkan dengan rantai if-else panjang.
77 | Cocok digunakan saat ada banyak kemungkinan nilai yang harus diperiksa.
78 |
79 | Kekurangan:
80 | Kurang fleksibel dibandingkan if-else saat membandingkan dengan kondisi kompleks.
81 | Rentan terhadap kesalahan jika break terlewat.
82 | */
83 |
--------------------------------------------------------------------------------
/module-14-looping/homework/challenge.md:
--------------------------------------------------------------------------------
1 |
2 | # Challenge: Looping di JavaScript
3 |
4 | Buatlah kode menggunakan `for` loop yang mencetak angka dari 1 hingga 10, tetapi melewatkan angka 5 (tidak mencetak angka 5).
5 |
6 | **Hint**: Anda dapat menggunakan pernyataan `continue` di dalam loop untuk melewatkan iterasi tertentu.
7 |
--------------------------------------------------------------------------------
/module-14-looping/homework/jawaban.md:
--------------------------------------------------------------------------------
1 |
2 | # Jawaban: Looping di JavaScript
3 |
4 | ## 1. Apa yang akan terjadi jika kondisi pada `while` loop tidak pernah menjadi `false`?
5 | **Jawaban: B) Loop akan terus berjalan tanpa henti (infinite loop).**
6 |
7 | ## 2. Apa hasil dari kode berikut ini?
8 | ```javascript
9 | let y = 6;
10 | while (y <= 5) {
11 | console.log(`Iterasi ke-${y} dengan while loop`);
12 | y++;
13 | }
14 | ```
15 | **Jawaban: C) Kode tidak akan mencetak apa pun.**
16 |
17 | ## 3. Pada loop `for`, apa yang dieksekusi di bagian `perubahan`?
18 | **Jawaban: C) Mengubah nilai variabel loop setelah setiap iterasi.**
19 |
--------------------------------------------------------------------------------
/module-14-looping/homework/soal.md:
--------------------------------------------------------------------------------
1 |
2 | # Pertanyaan: Looping di JavaScript
3 |
4 | ## 1. Apa yang akan terjadi jika kondisi pada `while` loop tidak pernah menjadi `false`?
5 | - A) Loop akan berhenti secara otomatis setelah satu iterasi.
6 | - B) Loop akan terus berjalan tanpa henti (infinite loop).
7 | - C) Loop tidak akan pernah dijalankan.
8 | - D) Loop akan menghasilkan error.
9 |
10 | ## 2. Apa hasil dari kode berikut ini?
11 | ```javascript
12 | let y = 6;
13 | while (y <= 5) {
14 | console.log(`Iterasi ke-${y} dengan while loop`);
15 | y++;
16 | }
17 | ```
18 | - A) Kode akan mencetak "Iterasi ke-6 dengan while loop" satu kali.
19 | - B) Kode akan mencetak "Iterasi ke-6 dengan while loop" lebih dari satu kali.
20 | - C) Kode tidak akan mencetak apa pun.
21 | - D) Kode akan menghasilkan error.
22 |
23 | ## 3. Pada loop `for`, apa yang dieksekusi di bagian `perubahan`?
24 | - A) Mengevaluasi kondisi loop.
25 | - B) Menginisialisasi variabel loop.
26 | - C) Mengubah nilai variabel loop setelah setiap iterasi.
27 | - D) Mengakhiri loop.
28 |
--------------------------------------------------------------------------------
/module-14-looping/homework/solusi_challenge.md:
--------------------------------------------------------------------------------
1 |
2 | # Jawaban: Challenge Looping di JavaScript
3 |
4 | ```javascript
5 | for (let i = 1; i <= 10; i++) {
6 | if (i === 5) {
7 | continue;
8 | }
9 | console.log(i);
10 | }
11 | ```
12 |
--------------------------------------------------------------------------------
/module-14-looping/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Tutorial-JavaScript
7 |
8 |
9 |
Tutorial-JavaScript
10 |
11 |
12 |
--------------------------------------------------------------------------------
/module-14-looping/index.js:
--------------------------------------------------------------------------------
1 | /* Loop di JavaScript */
2 |
3 | // Loop digunakan untuk menjalankan blok kode berulang kali selama kondisi tertentu terpenuhi. JavaScript mendukung beberapa jenis loop: for, while, dan do-while. Setiap jenis loop memiliki kegunaannya sendiri, tergantung pada kebutuhan.
4 |
5 |
6 | // For Loop
7 |
8 | /*
9 | for (inisialisasi; kondisi; perubahan) {
10 | // kode yang dijalankan selama kondisi benar
11 | }
12 | */
13 | // for(let i =1; i <= 5; i++){
14 | // console.log(`Iterasi ke-${i}`)
15 | // }
16 |
17 |
18 |
19 |
20 | // While Loop
21 |
22 | /*
23 | while (kondisi) {
24 | // kode yang dijalankan selama kondisi benar
25 | }
26 | */
27 | // let y = 6
28 | // while(y<=5){
29 | // console.log(`iterasi ke-${y} dengan while loop`)
30 | // y++
31 | // }
32 |
33 |
34 |
35 |
36 |
37 | // Do-While Loop
38 | /*
39 | do {
40 | // kode yang dijalankan
41 | } while (kondisi);
42 | */
43 | // let z = 6;
44 | // do{
45 | // console.log(`Iterasi ke ${z} dengan do-while`)
46 | // z++
47 | // } while(z<=5)
48 |
49 |
50 |
51 | // For-In Loop
52 |
53 | // const object = {nama: "ranggo", umur: 26}
54 |
55 | // for(let property in object){
56 | // console.log(property)
57 | // console.log(object[property])
58 | // }
59 |
60 |
61 |
62 | // For-Of Loop
63 |
64 | let sum = 0
65 | const array = [10,2,3,4,5]
66 | for(let nilai of array){
67 | sum = sum + nilai
68 | }
69 | console.log(sum)
70 |
71 |
72 |
--------------------------------------------------------------------------------
/module-15-functions/homework/jawaban.md:
--------------------------------------------------------------------------------
1 |
2 | # Jawaban Pertanyaan Tentang Functions di JavaScript
3 |
4 | ## Jawaban Pilihan Ganda
5 |
6 | 1. **B) Blok kode yang dirancang untuk melakukan tugas tertentu dan dapat digunakan berulang kali**
7 | 2. **A) `function namaFunction() { // kode }`**
8 | 3. **C) Variabel yang didefinisikan dalam deklarasi function**
9 | 4. **B) Function akan berhenti eksekusi setelah pernyataan `return`**
10 |
11 | ## Jawaban Soal Tantangan
12 |
13 | ```javascript
14 | function kali(a, b) {
15 | return a * b;
16 | }
17 |
18 | // Memanggil function kali
19 | let hasil = kali(4, 5);
20 | console.log(hasil); // Output: 20
21 | ```
22 |
--------------------------------------------------------------------------------
/module-15-functions/homework/soal.md:
--------------------------------------------------------------------------------
1 |
2 | # Pertanyaan Tentang Functions di JavaScript
3 |
4 | ## Pertanyaan Pilihan Ganda
5 |
6 | 1. Apa itu function di JavaScript?
7 | - A) Blok kode yang hanya bisa digunakan satu kali
8 | - B) Blok kode yang dirancang untuk melakukan tugas tertentu dan dapat digunakan berulang kali
9 | - C) Blok kode yang hanya bisa digunakan jika tidak ada parameter
10 | - D) Blok kode yang dirancang untuk mengubah nilai variabel global
11 |
12 | 2. Bagaimana cara membuat function di JavaScript?
13 | - A) `function namaFunction() { // kode }`
14 | - B) `var namaFunction = function { // kode }`
15 | - C) `function = namaFunction { // kode }`
16 | - D) `create function namaFunction() { // kode }`
17 |
18 | 3. Apa yang dimaksud dengan parameter dalam function?
19 | - A) Nilai yang dikembalikan oleh function
20 | - B) Nilai yang diberikan saat function dipanggil
21 | - C) Variabel yang didefinisikan dalam deklarasi function
22 | - D) Blok kode yang dieksekusi di dalam function
23 |
24 | 4. Apa yang terjadi jika sebuah function memiliki pernyataan `return`?
25 | - A) Function akan terus berjalan setelah pernyataan `return`
26 | - B) Function akan berhenti eksekusi setelah pernyataan `return`
27 | - C) Function akan mengulang dari awal setelah pernyataan `return`
28 | - D) Function tidak bisa memiliki pernyataan `return`
29 |
30 | ## Soal Tantangan
31 |
32 | Buatlah function bernama `kali` yang menerima dua parameter dan mengembalikan hasil perkalian dari kedua parameter tersebut. Kemudian, panggil function tersebut dengan memberikan dua angka sebagai argumen.
33 |
--------------------------------------------------------------------------------
/module-15-functions/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Tutorial-JavaScript
7 |
8 |
9 |
Tutorial-JavaScript
10 |
11 |
12 |
--------------------------------------------------------------------------------
/module-15-functions/index.js:
--------------------------------------------------------------------------------
1 | /* Function di Javascript */
2 |
3 | // Function di JavaScript adalah blok kode yang dirancang untuk melakukan tugas tertentu dan dapat digunakan berulang kali. Function mempermudah pengorganisasian kode dengan membagi tugas besar menjadi tugas-tugas kecil yang lebih terstruktur.
4 |
5 | // Membuat Function, untuk membuat function, gunakan kata kunci function diikuti dengan nama function, parameter (jika ada), dan blok kode yang akan dijalankan.
6 |
7 | /*
8 |
9 | function namaFunction(parameter1, parameter2, ...) {
10 | // Blok kode yang akan dijalankan
11 | }
12 |
13 | */
14 |
15 | function sapaPengguna(nama){
16 | console.log(`Halo, ${nama} !`)
17 | // console.log("Halo " + nama + " !")
18 | }
19 |
20 | function sapaSemua(){
21 | console.log('Halo semuanya')
22 | }
23 |
24 |
25 |
26 | // Memanggil Function, Untuk menjalankan function, cukup panggil dengan menyebutkan nama function diikuti dengan tanda kurung, serta masukkan nilai untuk parameternya (jika ada).
27 |
28 | sapaPengguna("Budi")
29 | sapaSemua()
30 |
31 |
32 |
33 |
34 | // Parameter dan Argumen, Parameter adalah variabel yang didefinisikan dalam deklarasi function. Argumen adalah nilai yang diberikan saat function dipanggil
35 |
36 | function tambah(a,b){
37 | console.log(a+b)
38 | }
39 |
40 | tambah(3,5)
41 | tambah(100,204)
42 |
43 |
44 | // Di sini, a dan b adalah parameter, sedangkan 5 dan 3 adalah argumen.
45 |
46 | // Return Statement, Function dapat mengembalikan nilai menggunakan return. Setelah return dieksekusi, eksekusi function akan berhenti.
47 |
48 | function kuadrat (num) {
49 | if (num> 0) {
50 | return num * num
51 | }
52 | return "angka negatif tidak kami kuadratkan"
53 | }
54 |
55 | let kuadrat4 = kuadrat(-4)
56 | console.log(kuadrat4)
57 |
58 |
--------------------------------------------------------------------------------
/module-16-21-homework/jawaban.md:
--------------------------------------------------------------------------------
1 |
2 | # Jawaban Pertanyaan Tentang Function Expression, Arrow Function, IIFE, Higher-Order Function, Callback, dan Recursion di JavaScript
3 |
4 | ## Jawaban Pilihan Ganda
5 |
6 | 1. **B) Function yang disimpan dalam variabel**
7 | 2. **C) Arrow function memiliki sintaks yang lebih singkat dan tidak memiliki `this` sendiri**
8 | 3. **C) Function yang dipanggil langsung setelah dideklarasikan**
9 | 4. **B) Function yang menerima function lain sebagai argumen atau mengembalikan function sebagai hasil**
10 | 5. **C) Function yang dipanggil sebagai argumen ke function lain**
11 | 6. **C) Function yang memanggil dirinya sendiri untuk menyelesaikan sebagian masalah**
12 |
13 | ## Jawaban Soal Tantangan
14 |
15 | ```javascript
16 | const pangkat = (base, exponent) => {
17 | return base ** exponent;
18 | };
19 |
20 | // Memanggil function pangkat
21 | let hasil = pangkat(2, 3);
22 | console.log(hasil); // Output: 8
23 | ```
24 |
--------------------------------------------------------------------------------
/module-16-21-homework/soal.md:
--------------------------------------------------------------------------------
1 |
2 | # Pertanyaan Tentang Function Expression, Arrow Function, IIFE, Higher-Order Function, Callback, dan Recursion di JavaScript
3 |
4 | ## Pertanyaan Pilihan Ganda
5 |
6 | 1. Apa itu function expression di JavaScript?
7 | - A) Function yang dipanggil secara langsung setelah dibuat
8 | - B) Function yang disimpan dalam variabel
9 | - C) Function yang menerima function lain sebagai argumen
10 | - D) Function yang memanggil dirinya sendiri
11 |
12 | 2. Apa yang membedakan arrow function dengan function expression biasa?
13 | - A) Arrow function tidak dapat memiliki parameter
14 | - B) Arrow function memiliki sintaks yang lebih panjang
15 | - C) Arrow function memiliki sintaks yang lebih singkat dan tidak memiliki `this` sendiri
16 | - D) Arrow function hanya bisa digunakan dalam ES5
17 |
18 | 3. Apa yang dimaksud dengan IIFE (Immediately Invoked Function Expression)?
19 | - A) Function yang dipanggil ketika event tertentu terjadi
20 | - B) Function yang dipanggil setelah interval waktu tertentu
21 | - C) Function yang dipanggil langsung setelah dideklarasikan
22 | - D) Function yang disimpan dalam variabel
23 |
24 | 4. Apa yang dimaksud dengan Higher-Order Function di JavaScript?
25 | - A) Function yang hanya bisa dipanggil sekali
26 | - B) Function yang menerima function lain sebagai argumen atau mengembalikan function sebagai hasil
27 | - C) Function yang memanggil dirinya sendiri
28 | - D) Function yang dijalankan secara asynchronous
29 |
30 | 5. Apa itu callback function?
31 | - A) Function yang dikembalikan oleh function lain
32 | - B) Function yang dipanggil secara berulang dalam loop
33 | - C) Function yang dipanggil sebagai argumen ke function lain
34 | - D) Function yang memanggil dirinya sendiri
35 |
36 | 6. Apa itu recursion di JavaScript?
37 | - A) Function yang hanya bisa dijalankan sekali
38 | - B) Function yang menerima function lain sebagai argumen
39 | - C) Function yang memanggil dirinya sendiri untuk menyelesaikan sebagian masalah
40 | - D) Function yang hanya digunakan dalam algoritma sorting
41 |
42 | ## Soal Tantangan
43 |
44 | Buatlah sebuah arrow function bernama `pangkat` yang menerima dua parameter `base` dan `exponent`, dan mengembalikan hasil perpangkatan dari `base` dengan `exponent`. Panggil function tersebut dengan memberikan dua angka sebagai argumen.
45 |
--------------------------------------------------------------------------------
/module-16-functions-expressions/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Tutorial-JavaScript
7 |
8 |
9 |
Tutorial-JavaScript
10 |
11 |
12 |
--------------------------------------------------------------------------------
/module-16-functions-expressions/index.js:
--------------------------------------------------------------------------------
1 | /* 𝗙𝘂𝗻𝗰𝘁𝗶𝗼𝗻 𝗘𝘅𝗽𝗿𝗲𝘀𝘀𝗶𝗼𝗻𝘀 */
2 |
3 | // Selain membuat function menggunakan deklarasi (function declaration), Anda juga bisa membuat function menggunakan ekspresi (function expression), di mana function disimpan dalam variabel.
4 |
5 | let kali = function(a,b){
6 | return a*b
7 | }
8 |
9 | console.log(kali(4,5))
--------------------------------------------------------------------------------
/module-17-arrow-functions/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Tutorial-JavaScript
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/module-19-IFFE/index.js:
--------------------------------------------------------------------------------
1 | /* IIFE (Immediately Invoked Function Expression) */
2 |
3 | // IIFE adalah function yang dipanggil langsung setelah dibuat. Ini berguna untuk mengisolasi variabel dan mencegahnya mengganggu kode lain.
4 |
5 |
6 | (function(){
7 | console.log("IIFE dipanggil")
8 | })()
9 |
10 | const appConfig = (function(){
11 | const apiKey = '1234'
12 | const apiURL = 'https://api.example.com'
13 |
14 | return {
15 | getApiKey: function(){
16 | return apiKey
17 | },
18 | getApiURL: function(){
19 | return apiURL
20 | }
21 | }
22 | })()
23 |
24 | console.log(appConfig.getApiKey())
25 | console.log(appConfig.getApiURL())
26 |
--------------------------------------------------------------------------------
/module-2-variable/homework/jawaban_soal_variable.md:
--------------------------------------------------------------------------------
1 | # Jawaban dan Penjelasan tentang Variabel di JavaScript
2 |
3 | ## 1. Definisi Variabel
4 | **Jawaban:** b) Wadah untuk menyimpan data yang dapat berubah sepanjang program berjalan
5 | **Penjelasan:** Variabel dalam JavaScript digunakan sebagai wadah untuk menyimpan data, yang nilainya bisa berubah seiring berjalannya program.
6 |
7 | ## 2. Penggunaan `var`
8 | **Jawaban:** b) Bisa diakses di luar scope di mana ia dideklarasikan
9 | **Penjelasan:** Variabel yang dideklarasikan dengan `var` memiliki scope global atau function-scope, sehingga bisa diakses di luar blok seperti `if` atau `for`.
10 |
11 | ## 3. Perilaku `let`
12 | **Jawaban:** b) Hanya bisa diakses di dalam scope di mana ia dideklarasikan
13 | **Penjelasan:** `let` memiliki block-scope, yang berarti variabel hanya bisa diakses di dalam blok (seperti `if`, `for`) tempat ia dideklarasikan.
14 |
15 | ## 4. Perbedaan `const` dan `let`
16 | **Jawaban:** b) `const` nilainya tidak bisa diubah setelah dideklarasikan
17 | **Penjelasan:** `const` digunakan untuk mendeklarasikan variabel yang nilainya tidak akan berubah, berbeda dengan `let` yang memungkinkan nilai variabel berubah.
18 |
19 | ## 5. Kesalahan Umum `const`
20 | **Jawaban:** b) Error akan muncul karena nilai `const` tidak bisa diubah
21 | **Penjelasan:** Jika Anda mencoba mengubah nilai variabel yang dideklarasikan dengan `const`, JavaScript akan mengeluarkan error karena `const` menetapkan nilai yang tidak bisa diubah.
22 |
23 | ## 6. Scope `var` vs `let`
24 | **Jawaban:** b) `var` bisa diakses di mana saja setelah dideklarasikan, sementara `let` hanya bisa diakses di dalam scope-nya
25 | **Penjelasan:** `var` memiliki function-scope atau global-scope, sehingga bisa diakses di luar blok kode, sedangkan `let` memiliki block-scope yang membatasi akses hanya di dalam blok tersebut.
26 |
--------------------------------------------------------------------------------
/module-2-variable/homework/soal_variable.md:
--------------------------------------------------------------------------------
1 | # Pertanyaan tentang Variabel di JavaScript
2 |
3 | ## 1. Definisi Variabel
4 | **Apa yang dimaksud dengan variabel dalam JavaScript?**
5 | - a. Wadah untuk menyimpan data yang tidak bisa berubah
6 | - b. Wadah untuk menyimpan data yang dapat berubah sepanjang program berjalan
7 | - c. Fungsi untuk mengubah data
8 | - d. Alat untuk memanipulasi elemen HTML
9 |
10 | ## 2. Penggunaan `var`
11 | **Bagaimana perilaku variabel yang dideklarasikan dengan `var`?**
12 | - a. Hanya bisa diakses di dalam scope di mana ia dideklarasikan
13 | - b. Bisa diakses di luar scope di mana ia dideklarasikan
14 | - c. Nilainya tidak bisa diubah
15 | - d. Tidak bisa digunakan untuk deklarasi variabel
16 |
17 | ## 3. Perilaku `let`
18 | **Bagaimana karakteristik variabel yang dideklarasikan dengan `let`?**
19 | - a. Bisa diakses di luar scope di mana ia dideklarasikan
20 | - b. Hanya bisa diakses di dalam scope di mana ia dideklarasikan
21 | - c. Nilainya tidak bisa diubah
22 | - d. Harus selalu dideklarasikan di global scope
23 |
24 | ## 4. Perilaku `const`
25 | **Apa perbedaan utama antara `const` dan `let`?**
26 | - a. `const` tidak bisa diakses di dalam scope
27 | - b. `const` nilainya tidak bisa diubah setelah dideklarasikan
28 | - c. `let` nilainya tidak bisa diubah setelah dideklarasikan
29 | - d. `const` bisa digunakan di luar scope
30 |
31 | ## 5. Kesalahan Umum `const`
32 | **Apa yang terjadi jika Anda mencoba mengubah nilai variabel yang dideklarasikan dengan `const`?**
33 | - a. Nilai akan berubah tanpa error
34 | - b. Error akan muncul karena nilai `const` tidak bisa diubah
35 | - c. Program akan berjalan dengan normal
36 | - d. Nilai akan berubah hanya di dalam scope
37 |
38 | ## 6. Scope `var` vs `let`
39 | **Mana dari pernyataan berikut yang benar mengenai scope `var` dan `let`?**
40 | - a. `var` hanya bisa diakses di dalam scope fungsinya, sementara `let` bisa diakses di mana saja
41 | - b. `var` bisa diakses di mana saja setelah dideklarasikan, sementara `let` hanya bisa diakses di dalam scope-nya
42 | - c. `let` bisa diakses di luar scope di mana ia dideklarasikan
43 | - d. Keduanya memiliki perilaku scope yang sama
44 |
--------------------------------------------------------------------------------
/module-2-variable/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Tutorial-JavaScript
7 |
8 |
9 |
Tutorial-JavaScript
10 |
11 |
12 |
--------------------------------------------------------------------------------
/module-2-variable/index.js:
--------------------------------------------------------------------------------
1 | /*
2 | var, dia bisa diakses diluar scopes, nilainya bisa diubah
3 | */
4 |
5 | // if(true){
6 | // var nama = "ranggo"
7 | // } //scope
8 |
9 | // nama = "pato"
10 | // console.log('var : ',nama)
11 |
12 | /*
13 | let, dia tidak bisa di akses diluar scopes, hanya di dalam scopes, dan nilainya bisa diubah
14 | */
15 |
16 | // if(true){
17 | // let nama = "ranggo"
18 | // nama = "pato"
19 | // console.log('let : ',nama)
20 | // } //scope
21 |
22 | /*
23 | const, dia tidak bisa di akses diluar scopes, hanya di dalam scopes, dan nilainya tidak bisa diubah
24 | */
25 |
26 | if(true){
27 | const nama = "ranggo"
28 | nama = "pato"
29 | console.log('const : ',nama)
30 | } //scope
31 |
--------------------------------------------------------------------------------
/module-20-high-order-callback-functions/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Tutorial-JavaScript
7 |
8 |
9 |
Tutorial-JavaScript
10 |
11 |
12 |
--------------------------------------------------------------------------------
/module-20-high-order-callback-functions/index.js:
--------------------------------------------------------------------------------
1 | /* Higher-Order Functions dan Callback Functions */
2 |
3 | // Higher-order functions adalah function yang menerima function lain sebagai argumen atau mengembalikan function lain sebagai hasil.
4 |
5 | // Callback function adalah function yang dikirim sebagai argumen ke function lain dan dipanggil di dalam function tersebut.
6 |
7 | function selesaikanTugas(tugas, callback){ //high order function
8 | console.log("Menyelesaikan tugas: " + tugas)
9 | callback()
10 | }
11 |
12 | function tugasSelesai(){ // callback function
13 | console.log("Tugas Selesai")
14 | }
15 | selesaikanTugas("Belajar JavaScript", tugasSelesai)
16 |
17 |
--------------------------------------------------------------------------------
/module-21-recursion/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Tutorial-JavaScript
7 |
8 |
9 |
Tutorial-JavaScript
10 |
11 |
12 |
--------------------------------------------------------------------------------
/module-21-recursion/index.js:
--------------------------------------------------------------------------------
1 | /* Recursion di JavaScript */
2 |
3 | // Recursion terjadi ketika sebuah function memanggil dirinya sendiri secara langsung atau tidak langsung untuk menyelesaikan sebagian dari masalah yang diberikan. Setiap panggilan recursion membawa masalah tersebut lebih dekat ke kondisi dasar (base case), yaitu kondisi di mana recursion berhenti.
4 |
5 | /*
6 | Struktur Recursion
7 | Recursion biasanya terdiri dari dua bagian penting:
8 | 1. Base Case (Kondisi Dasar): Bagian dari function yang menghentikan recursion. Ini adalah kondisi di mana masalah tidak lagi memerlukan pemanggilan function secara rekursif.
9 |
10 | 2. Recursive Case: Bagian dari function yang memecah masalah menjadi sub-masalah yang lebih kecil dan memanggil dirinya sendiri.
11 | */
12 |
13 | // Contoh Recursion: Faktorial
14 | // Faktorial dari sebuah bilangan adalah hasil kali dari bilangan tersebut dengan semua bilangan bulat positif di bawahnya. Faktorial dari n ditulis sebagai n!. Sebagai contoh, 5! (dibaca "5 faktorial") adalah 5 * 4 * 3 * 2 * 1, yang sama dengan 120.
15 |
16 | function faktorial(n){
17 | // Base Case
18 | if (n === 0){
19 | return 1
20 | }
21 | // Recursive case
22 | console.log(n)
23 | return n * faktorial(n-1)
24 | }
25 | console.log(faktorial(5))
26 |
27 |
28 | // Gunakan recursion saat masalah dapat dipecah menjadi sub-masalah yang lebih kecil, ketika bekerja dengan struktur data seperti pohon, atau saat algoritma backtracking diperlukan. Namun, selalu pertimbangkan kinerja dan risiko stack overflow sebelum menggunakan recursion.
29 |
--------------------------------------------------------------------------------
/module-22-27-dom-homework/challenge/challenge.md:
--------------------------------------------------------------------------------
1 |
2 | # Tantangan DOM Manipulation di JavaScript
3 |
4 | ## Tantangan
5 | Buat sebuah halaman HTML sederhana yang memiliki:
6 | 1. Sebuah input field dengan id "inputText".
7 | 2. Sebuah tombol dengan id "addButton" yang ketika diklik akan menambahkan nilai dari input field sebagai item baru dalam sebuah daftar (ul).
8 | 3. Setiap item dalam daftar (ul) harus memiliki tombol "Hapus" di sebelahnya yang ketika diklik akan menghapus item tersebut dari daftar.
9 |
10 | ### Petunjuk:
11 | - Gunakan `document.createElement()` untuk membuat elemen baru.
12 | - Gunakan `element.appendChild()` untuk menambahkan elemen ke dalam DOM.
13 | - Gunakan event listener untuk menangani event klik pada tombol.
14 |
15 |
--------------------------------------------------------------------------------
/module-22-27-dom-homework/challenge/solusi_challenge.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | # Solusi Tantangan DOM Manipulation di JavaScript
4 |
5 | ```html
6 |
7 |
8 |
9 |
10 |
11 | DOM Challenge
12 |
13 |
14 |
15 |
16 |
17 |
18 |
45 |
46 |
47 | ```
48 |
49 | ## Penjelasan:
50 | - **Membuat Elemen Baru:** Menggunakan `document.createElement()` untuk membuat elemen `li` dan `button` baru.
51 | - **Menambahkan Event Listener:** Event listener ditambahkan ke tombol "Tambah Item" untuk menangani klik dan menambahkan item baru ke dalam daftar.
52 | - **Menghapus Item:** Setiap item dalam daftar memiliki tombol "Hapus" yang ketika diklik akan menghapus item tersebut menggunakan metode `remove()`.
--------------------------------------------------------------------------------
/module-22-27-dom-homework/jawaban_dom_soal_tipe_1.md:
--------------------------------------------------------------------------------
1 |
2 | # Jawaban dan Penjelasan
3 |
4 | ## 1. **B** - Model objek dokumen (Document Object Model) adalah representasi berbasis objek dari dokumen web, yang dapat dimanipulasi menggunakan JavaScript.
5 |
6 | ## 2. **C** - Metode `getElementById()` digunakan untuk mengakses elemen HTML berdasarkan ID-nya.
7 |
8 | ## 3. **A** - `querySelector()` mengembalikan elemen pertama yang cocok dengan selektor CSS yang diberikan.
9 |
10 | ## 4. **A** - `appendChild()` digunakan untuk menambahkan elemen baru ke dalam DOM.
11 |
12 | ## 5. **B** - Properti `innerHTML` memungkinkan kita untuk mengubah atau mendapatkan konten HTML dari suatu elemen.
13 |
14 | ## 6. **A** - `removeChild()` digunakan untuk menghapus elemen dari DOM.
15 |
16 | ## 7. **C** - DOM traversal adalah proses menavigasi antar elemen dalam DOM, seperti mengakses parent, child, atau sibling.
17 |
18 | ## 8. **A** - Properti `parentNode` digunakan untuk mengakses elemen parent dari sebuah elemen di DOM.
19 |
20 | ## 9. **B** - `event.preventDefault()` mencegah aksi default dari sebuah event terjadi, seperti mencegah pengiriman form saat tombol submit diklik.
21 |
22 | ## 10. **A** - `addEventListener()` digunakan untuk menambahkan event listener pada elemen.
23 |
24 | ## 11. **B** - `stopPropagation()` menghentikan penyebaran event ke elemen parent, sehingga event tersebut hanya ditangani oleh elemen yang menerimanya.
25 |
26 | ## 12. **D** - Elemen paling atas di DOM tree adalah `document`, yang merupakan root dari semua elemen di halaman web.
27 |
28 | ## 13. **A** - `setAttribute()` digunakan untuk mengubah atribut dari sebuah elemen di DOM.
29 |
30 | ## 14. **A** - `createElement()` digunakan untuk membuat elemen baru di DOM.
31 |
32 | ## 15. **B** - `getElementsByTagName()` digunakan untuk mengakses semua elemen dengan tag tertentu di DOM.
33 |
34 | ## 16. **A** - Bubbling adalah proses penyebaran event dari elemen paling dalam ke elemen parentnya di DOM.
35 |
36 | ## 17. **A** - `textContent` mengembalikan teks mentah, sedangkan `innerHTML` mengembalikan konten HTML, termasuk elemen-elemen HTML di dalamnya.
37 |
38 | ## 18. **A** - Menambahkan event listener dengan opsi `once: true` akan membuat event listener otomatis dihapus setelah dijalankan sekali.
39 |
40 | ## 19. **A** - Properti `childNodes` mengembalikan semua child dari sebuah elemen, termasuk node teks dan komentar.
41 |
42 | ## 20. **A** - `replaceChild()` digunakan untuk mengganti elemen lama dengan elemen baru di DOM.
43 |
--------------------------------------------------------------------------------
/module-22-27-dom-homework/jawaban_dom_soal_tipe_2.md:
--------------------------------------------------------------------------------
1 |
2 | # Jawaban dan Penjelasan untuk Pertanyaan Multiple Choice tentang DOM di JavaScript
3 |
4 | ## 1. Apa kepanjangan dari DOM?
5 | - **Jawaban:** B) Document Object Model
6 | - **Penjelasan:** DOM adalah singkatan dari Document Object Model, yaitu representasi berbasis objek dari struktur dokumen HTML atau XML.
7 |
8 | ## 2. Bagaimana cara mengakses elemen dengan id "header" dalam DOM menggunakan JavaScript?
9 | - **Jawaban:** A) `document.getElementById("header")`
10 | - **Penjelasan:** `document.getElementById` digunakan untuk mengakses elemen dengan ID tertentu dalam DOM.
11 |
12 | ## 3. Metode mana yang digunakan untuk mengubah teks dalam elemen DOM?
13 | - **Jawaban:** C) `element.textContent`
14 | - **Penjelasan:** `textContent` digunakan untuk mengubah teks yang ada di dalam suatu elemen.
15 |
16 | ## 4. Bagaimana cara menambahkan elemen baru ke dalam DOM?
17 | - **Jawaban:** A) `document.createElement()`
18 | - **Penjelasan:** `createElement()` digunakan untuk membuat elemen baru, yang kemudian dapat ditambahkan ke DOM menggunakan `appendChild()`.
19 |
20 | ## 5. Metode mana yang digunakan untuk menghapus elemen dari DOM?
21 | - **Jawaban:** A) `element.removeChild()`
22 | - **Penjelasan:** `removeChild()` digunakan untuk menghapus elemen anak dari elemen induknya dalam DOM.
23 |
24 | ## 6. Apa yang dilakukan oleh metode `document.querySelectorAll()`?
25 | - **Jawaban:** B) Mengembalikan semua elemen yang cocok dengan selector
26 | - **Penjelasan:** `querySelectorAll()` mengembalikan NodeList dari semua elemen yang cocok dengan selector yang diberikan.
27 |
28 | ## 7. Bagaimana cara mengubah atribut pada elemen dalam DOM?
29 | - **Jawaban:** A) `element.setAttribute(name, value)`
30 | - **Penjelasan:** `setAttribute()` digunakan untuk mengubah nilai atribut dari elemen tertentu.
31 |
32 | ## 8. Apa yang dilakukan oleh properti `element.classList`?
33 | - **Jawaban:** B) Menambah atau menghapus kelas CSS pada elemen
34 | - **Penjelasan:** `classList` adalah properti yang menyediakan cara untuk menambah, menghapus, atau memanipulasi kelas CSS pada elemen.
35 |
36 | ## 9. Bagaimana cara menambahkan event listener untuk event klik pada elemen?
37 | - **Jawaban:** A) `element.addEventListener("click", function)`
38 | - **Penjelasan:** `addEventListener()` adalah metode yang digunakan untuk menambahkan event listener pada elemen.
39 |
40 | ## 10. Metode mana yang digunakan untuk mengakses elemen induk dari elemen tertentu?
41 | - **Jawaban:** A) `element.parentNode`
42 | - **Penjelasan:** `parentNode` mengembalikan elemen induk dari elemen tertentu.
43 |
44 | ## 11. Bagaimana cara mengakses semua anak dari elemen tertentu?
45 | - **Jawaban:** B) `element.childNodes`
46 | - **Penjelasan:** `childNodes` mengembalikan NodeList dari semua anak elemen (termasuk teks dan komentar).
47 |
48 | ## 12. Apa yang terjadi jika Anda menggunakan `element.innerHTML` untuk menambahkan teks?
49 | - **Jawaban:** B) Semua elemen anak akan dihapus
50 | - **Penjelasan:** `innerHTML` menimpa konten HTML dari elemen, sehingga semua elemen anak akan dihapus dan diganti dengan yang baru.
51 |
52 | ## 13. Bagaimana cara menghapus semua elemen anak dari elemen tertentu?
53 | - **Jawaban:** A) `element.innerHTML = ""`
54 | - **Penjelasan:** Mengosongkan `innerHTML` dari elemen akan menghapus semua elemen anaknya.
55 |
56 | ## 14. Apa yang dilakukan oleh `event.preventDefault()` dalam event handling?
57 | - **Jawaban:** A) Mencegah default browser dari menangani event
58 | - **Penjelasan:** `preventDefault()` digunakan untuk mencegah tindakan default browser pada event tertentu.
59 |
60 | ## 15. Bagaimana cara menghentikan propagasi event ke elemen induk?
61 | - **Jawaban:** A) `event.stopPropagation()`
62 | - **Penjelasan:** `stopPropagation()` menghentikan event dari propagasi lebih lanjut ke elemen induk.
63 |
64 | ## 16. Metode mana yang digunakan untuk memindahkan elemen dalam DOM?
65 | - **Jawaban:** A) `element.append()`
66 | - **Penjelasan:** `append()` digunakan untuk menambahkan elemen sebagai anak terakhir dari elemen induknya.
67 |
68 | ## 17. Bagaimana cara memilih elemen berdasarkan nama kelasnya?
69 | - **Jawaban:** A) `document.getElementsByClassName("className")`
70 | - **Penjelasan:** `getElementsByClassName()` mengembalikan semua elemen yang memiliki kelas tertentu.
71 |
72 | ## 18. Apa fungsi dari `element.nextSibling`?
73 | - **Jawaban:** A) Mengembalikan elemen saudara setelah elemen saat ini
74 | - **Penjelasan:** `nextSibling` mengembalikan node saudara berikutnya dari elemen saat ini, termasuk node teks.
75 |
76 | ## 19. Bagaimana cara mengakses elemen dengan nama tag "p" menggunakan JavaScript?
77 | - **Jawaban:** A) `document.getElementsByTagName("p")`
78 | - **Penjelasan:** `getElementsByTagName()` mengembalikan semua elemen dengan nama tag tertentu.
79 |
80 | ## 20. Apa yang dilakukan oleh `element.firstChild`?
81 | - **Jawaban:** A) Mengembalikan elemen anak pertama
82 | - **Penjelasan:** `firstChild` mengembalikan node anak pertama dari elemen tertentu.
83 |
--------------------------------------------------------------------------------
/module-22-27-dom-homework/soal_dom_tipe_1.md:
--------------------------------------------------------------------------------
1 |
2 | # Pertanyaan Multiple Choice tentang DOM di JavaScript
3 |
4 | ## 1. Apa itu DOM dalam konteks JavaScript?
5 | - A. Sebuah bahasa pemrograman
6 | - B. Model objek dokumen
7 | - C. Sebuah framework JavaScript
8 | - D. Sebuah library CSS
9 |
10 | ## 2. Metode JavaScript apa yang digunakan untuk mengakses elemen HTML berdasarkan ID?
11 | - A. querySelector
12 | - B. getElementByClassName
13 | - C. getElementById
14 | - D. getElementsByTagName
15 |
16 | ## 3. Apa yang dilakukan oleh `document.querySelector()`?
17 | - A. Mengembalikan elemen pertama yang cocok dengan selektor CSS yang diberikan
18 | - B. Mengembalikan semua elemen yang cocok dengan selektor CSS yang diberikan
19 | - C. Menghapus elemen dari DOM
20 | - D. Menambahkan elemen baru ke DOM
21 |
22 | ## 4. Bagaimana cara menambahkan elemen baru ke dalam DOM?
23 | - A. Menggunakan `appendChild()`
24 | - B. Menggunakan `removeChild()`
25 | - C. Menggunakan `replaceChild()`
26 | - D. Menggunakan `getElementById()`
27 |
28 | ## 5. Apa kegunaan dari properti `innerHTML`?
29 | - A. Menghapus elemen dari DOM
30 | - B. Mengubah atau mendapatkan konten HTML dari suatu elemen
31 | - C. Mengganti elemen lama dengan elemen baru
32 | - D. Memindahkan elemen ke lokasi lain di DOM
33 |
34 | ## 6. Metode mana yang digunakan untuk menghapus elemen dari DOM?
35 | - A. removeChild()
36 | - B. appendChild()
37 | - C. createElement()
38 | - D. insertBefore()
39 |
40 | ## 7. Apa yang dimaksud dengan DOM traversal?
41 | - A. Proses menambahkan elemen ke dalam DOM
42 | - B. Proses menghapus elemen dari DOM
43 | - C. Proses menavigasi antar elemen dalam DOM
44 | - D. Proses membuat elemen baru di DOM
45 |
46 | ## 8. Bagaimana cara mengakses elemen parent dari sebuah elemen di DOM?
47 | - A. Menggunakan parentNode
48 | - B. Menggunakan childNode
49 | - C. Menggunakan nextSibling
50 | - D. Menggunakan previousSibling
51 |
52 | ## 9. Apa fungsi dari `event.preventDefault()` dalam event handling?
53 | - A. Menghapus elemen dari DOM
54 | - B. Mencegah aksi default dari sebuah event terjadi
55 | - C. Menghentikan propagasi event
56 | - D. Menambahkan event listener baru
57 |
58 | ## 10. Metode mana yang digunakan untuk menambahkan event listener pada elemen?
59 | - A. addEventListener()
60 | - B. removeEventListener()
61 | - C. createEvent()
62 | - D. dispatchEvent()
63 |
64 | ## 11. Apa yang akan terjadi jika Anda memanggil `stopPropagation()` dalam sebuah event handler?
65 | - A. Mencegah aksi default dari event
66 | - B. Menghentikan penyebaran event ke elemen parent
67 | - C. Menghapus event listener
68 | - D. Menambahkan event listener baru
69 |
70 | ## 12. Elemen mana yang paling atas di DOM tree?
71 | - A. `body`
72 | - B. `html`
73 | - C. `head`
74 | - D. `document`
75 |
76 | ## 13. Bagaimana cara mengubah atribut dari sebuah elemen di DOM?
77 | - A. Menggunakan setAttribute()
78 | - B. Menggunakan getAttribute()
79 | - C. Menggunakan querySelector()
80 | - D. Menggunakan addEventListener()
81 |
82 | ## 14. Apa yang dilakukan oleh `document.createElement()`?
83 | - A. Membuat elemen baru di DOM
84 | - B. Menghapus elemen dari DOM
85 | - C. Menambahkan event listener ke elemen
86 | - D. Mengubah konten HTML dari elemen
87 |
88 | ## 15. Bagaimana cara mengakses semua elemen dengan tag tertentu di DOM?
89 | - A. Menggunakan querySelectorAll()
90 | - B. Menggunakan getElementsByTagName()
91 | - C. Menggunakan getElementsByClassName()
92 | - D. Menggunakan innerHTML
93 |
94 | ## 16. Apa yang dimaksud dengan bubbling dalam konteks event handling di DOM?
95 | - A. Penyebaran event dari elemen paling dalam ke elemen parent
96 | - B. Mencegah aksi default dari sebuah event
97 | - C. Penyebaran event dari elemen paling luar ke elemen child
98 | - D. Menghapus event listener dari elemen
99 |
100 | ## 17. Apa perbedaan antara `textContent` dan `innerHTML`?
101 | - A. `textContent` mengembalikan teks mentah, sedangkan `innerHTML` mengembalikan konten HTML
102 | - B. `innerHTML` mengembalikan teks mentah, sedangkan `textContent` mengembalikan konten HTML
103 | - C. `textContent` menambahkan elemen baru, sedangkan `innerHTML` menghapus elemen
104 | - D. `innerHTML` menghapus elemen, sedangkan `textContent` menambah elemen
105 |
106 | ## 18. Bagaimana cara menghentikan event listener setelah dijalankan sekali?
107 | - A. Menggunakan once: true saat menambahkan event listener
108 | - B. Menggunakan stopPropagation()
109 | - C. Menggunakan preventDefault()
110 | - D. Menghapus elemen dari DOM
111 |
112 | ## 19. Apa fungsi dari `childNodes` dalam DOM traversal?
113 | - A. Mengembalikan semua child element dari sebuah elemen, termasuk teks dan komentar
114 | - B. Mengembalikan parent node dari sebuah elemen
115 | - C. Menghapus elemen child dari DOM
116 | - D. Menambahkan elemen child ke DOM
117 |
118 | ## 20. Metode mana yang digunakan untuk mengganti elemen lama dengan elemen baru di DOM?
119 | - A. replaceChild()
120 | - B. removeChild()
121 | - C. appendChild()
122 | - D. createElement()
123 |
--------------------------------------------------------------------------------
/module-22-27-dom-homework/soal_dom_tipe_2.md:
--------------------------------------------------------------------------------
1 |
2 | # 20 Pertanyaan Multiple Choice tentang DOM di JavaScript
3 |
4 | ## 1. Apa kepanjangan dari DOM?
5 | - A) Document Object Module
6 | - B) Document Object Model
7 | - C) Data Object Model
8 | - D) Document Operation Model
9 |
10 | ## 2. Bagaimana cara mengakses elemen dengan id "header" dalam DOM menggunakan JavaScript?
11 | - A) `document.getElementById("header")`
12 | - B) `document.getElementsByClassName("header")`
13 | - C) `document.querySelector("header")`
14 | - D) `document.getElementByTagName("header")`
15 |
16 | ## 3. Metode mana yang digunakan untuk mengubah teks dalam elemen DOM?
17 | - A) `element.innerHTML`
18 | - B) `element.setAttribute()`
19 | - C) `element.textContent`
20 | - D) `element.style`
21 |
22 | ## 4. Bagaimana cara menambahkan elemen baru ke dalam DOM?
23 | - A) `document.createElement()`
24 | - B) `document.appendChild()`
25 | - C) `document.insertElement()`
26 | - D) `document.addElement()`
27 |
28 | ## 5. Metode mana yang digunakan untuk menghapus elemen dari DOM?
29 | - A) `element.removeChild()`
30 | - B) `element.deleteChild()`
31 | - C) `element.removeElement()`
32 | - D) `element.deleteElement()`
33 |
34 | ## 6. Apa yang dilakukan oleh metode `document.querySelectorAll()`?
35 | - A) Mengembalikan satu elemen berdasarkan selector
36 | - B) Mengembalikan semua elemen yang cocok dengan selector
37 | - C) Mengembalikan semua elemen yang memiliki id tertentu
38 | - D) Mengembalikan semua elemen dalam dokumen
39 |
40 | ## 7. Bagaimana cara mengubah atribut pada elemen dalam DOM?
41 | - A) `element.setAttribute(name, value)`
42 | - B) `element.changeAttribute(name, value)`
43 | - C) `element.modifyAttribute(name, value)`
44 | - D) `element.replaceAttribute(name, value)`
45 |
46 | ## 8. Apa yang dilakukan oleh properti `element.classList`?
47 | - A) Mengembalikan daftar semua elemen dalam dokumen
48 | - B) Menambah atau menghapus kelas CSS pada elemen
49 | - C) Mengatur gaya (style) elemen
50 | - D) Mengubah teks dalam elemen
51 |
52 | ## 9. Bagaimana cara menambahkan event listener untuk event klik pada elemen?
53 | - A) `element.addEventListener("click", function)`
54 | - B) `element.onClick(function)`
55 | - C) `element.addClickEvent(function)`
56 | - D) `element.listenClick(function)`
57 |
58 | ## 10. Metode mana yang digunakan untuk mengakses elemen induk dari elemen tertentu?
59 | - A) `element.parentNode`
60 | - B) `element.parentElement`
61 | - C) `element.parent`
62 | - D) `element.getParent()`
63 |
64 | ## 11. Bagaimana cara mengakses semua anak dari elemen tertentu?
65 | - A) `element.children`
66 | - B) `element.childNodes`
67 | - C) `element.getChildren()`
68 | - D) `element.allChildren`
69 |
70 | ## 12. Apa yang terjadi jika Anda menggunakan `element.innerHTML` untuk menambahkan teks?
71 | - A) Hanya teks yang ditambahkan
72 | - B) Semua elemen anak akan dihapus
73 | - C) Teks diubah menjadi HTML
74 | - D) Teks akan ditampilkan sebagai elemen baru
75 |
76 | ## 13. Bagaimana cara menghapus semua elemen anak dari elemen tertentu?
77 | - A) `element.innerHTML = ""`
78 | - B) `element.removeChildren()`
79 | - C) `element.clearChildren()`
80 | - D) `element.deleteAllChildren()`
81 |
82 | ## 14. Apa yang dilakukan oleh `event.preventDefault()` dalam event handling?
83 | - A) Mencegah default browser dari menangani event
84 | - B) Menghentikan propagasi event ke elemen lain
85 | - C) Menyegarkan halaman secara otomatis
86 | - D) Menghentikan semua event pada elemen tersebut
87 |
88 | ## 15. Bagaimana cara menghentikan propagasi event ke elemen induk?
89 | - A) `event.stopPropagation()`
90 | - B) `event.preventDefault()`
91 | - C) `event.stopEvent()`
92 | - D) `event.cancelPropagation()`
93 |
94 | ## 16. Metode mana yang digunakan untuk memindahkan elemen dalam DOM?
95 | - A) `element.append()`
96 | - B) `element.moveElement()`
97 | - C) `element.changePosition()`
98 | - D) `element.shift()`
99 |
100 | ## 17. Bagaimana cara memilih elemen berdasarkan nama kelasnya?
101 | - A) `document.getElementsByClassName("className")`
102 | - B) `document.querySelector("#className")`
103 | - C) `document.getElementsByTagName("className")`
104 | - D) `document.getElementsByName("className")`
105 |
106 | ## 18. Apa fungsi dari `element.nextSibling`?
107 | - A) Mengembalikan elemen saudara setelah elemen saat ini
108 | - B) Mengembalikan elemen saudara sebelum elemen saat ini
109 | - C) Mengembalikan elemen anak pertama
110 | - D) Mengembalikan elemen anak terakhir
111 |
112 | ## 19. Bagaimana cara mengakses elemen dengan nama tag "p" menggunakan JavaScript?
113 | - A) `document.getElementsByTagName("p")`
114 | - B) `document.getElementsByName("p")`
115 | - C) `document.querySelectorAll("p")`
116 | - D) `document.querySelector("p")`
117 |
118 | ## 20. Apa yang dilakukan oleh `element.firstChild`?
119 | - A) Mengembalikan elemen anak pertama
120 | - B) Mengembalikan elemen induk
121 | - C) Mengembalikan elemen saudara pertama
122 | - D) Mengembalikan elemen anak terakhir
123 |
--------------------------------------------------------------------------------
/module-22-dom-struktur/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | DOM Struktur
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/module-28-oop/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * OOP di JavaScript
3 | *
4 | * @format
5 | */
6 |
7 | // Pemrograman Berbasis Objek (OOP) adalah paradigma pemrograman yang berfokus pada penggunaan "objek" untuk mewakili data dan fungsionalitas dalam program. Konsep OOP memungkinkan Anda untuk memodelkan elemen-elemen dunia nyata dalam kode, membuatnya lebih mudah dipahami dan dikelola.
8 |
9 | // Dasar-Dasar Objek di JavaScript, Objek adalah kumpulan pasangan kunci-nilai (key-value pairs) yang dapat mewakili data dan perilaku. Di JavaScript, objek bisa dibuat dengan cara yang sederhana.
10 |
11 | let mobil = {
12 | merk : "Toyota",
13 | model : "Avanza",
14 | tahun : 2021,
15 | start: function(){
16 | console.log("Mobil dimulai")
17 | },
18 | info: function (){
19 | console.log(`Mobil : ${this.merk} ${this.model}`)
20 | }
21 | }
22 |
23 | // let mobil2 = {
24 | // merk : "Toyota",
25 | // model : "Avanza",
26 | // tahun : 2021,
27 | // start: function(){
28 | // console.log("Mobil dimulai")
29 | // },
30 | // info: function (){
31 | // console.log(`Mobil : ${this.merk} ${this.model}`)
32 | // }
33 | // }
34 |
35 | // mobil.start()
36 |
37 | // Constructor Function
38 | function Mobil(merk, model, tahun) {
39 | this.merk = merk;
40 | this.model = model;
41 | this.tahun = tahun;
42 |
43 | this.start = function () {
44 | console.log('Mobil dimulai');
45 | };
46 | this.info = function (){
47 | console.log(`Mobil : ${this.merk} ${this.model}`)
48 | }
49 | }
50 |
51 | let mobil1 = new Mobil("Toyota", "Avanza", 2021)
52 | let mobil2 = new Mobil("Honda", "Civic", 2020)
53 |
54 | // console.log( mobil)
55 | // console.log( mobil1)
56 |
57 |
58 |
59 | // Konsep Prototypal Inheritance
60 | // JavaScript menggunakan prototypal inheritance, yang berarti objek dapat mewarisi properti dan method dari objek lain.
61 |
62 | // Prototype adalah objek dari mana objek lain mewarisi properti dan method.
63 |
64 | function Hewan(nama, jenis){
65 | this.nama = nama
66 | this.jenis = jenis
67 | }
68 |
69 | Hewan.prototype.makan = function(){
70 | console.log(`${this.nama} makan`)
71 | }
72 |
73 | let kucing = new Hewan("Kitty", "Anggora")
74 |
75 | kucing.makan()
76 |
--------------------------------------------------------------------------------
/module-29-oop-classes/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Tutorial-JavaScript
7 |
8 |
9 |
Tutorial-JavaScript
10 |
11 |
12 |
--------------------------------------------------------------------------------
/module-29-oop-classes/index.js:
--------------------------------------------------------------------------------
1 | /*
2 | ES6 Classes: Cara Modern untuk membuat constructor function OOP di JavaScript
3 | */
4 |
5 | // Dengan ES6, JavaScript memperkenalkan sintaks class yang lebih mudah dipahami dan digunakan.
6 |
7 | // function Mobil(merk, model, tahun) {
8 | // this.merk = merk;
9 | // this.model = model;
10 | // this.tahun = tahun;
11 |
12 | // this.start = function () {
13 | // console.log('Mobil dimulai');
14 | // };
15 | // this.info = function (){
16 | // console.log(`Mobil : ${this.merk} ${this.model}`)
17 | // }
18 | // }
19 |
20 | class Mobil {
21 | constructor(merk, model, tahun){
22 | this.merk = merk;
23 | this.model = model;
24 | this.tahun = tahun;
25 | }
26 | start(){
27 | console.log('Mobil dimulai');
28 | }
29 | info(){
30 | console.log(`Mobil : ${this.merk} ${this.model}`)
31 | }
32 | }
33 |
34 |
35 |
36 | let mobil1 = new Mobil('Toyota', 'Avanza', 2021);
37 | let mobil2 = new Mobil('Honda', 'Civic', 2020);
38 |
39 | mobil1.start()
40 | mobil2.info()
41 |
42 | /*
43 | Class adalah blueprint untuk membuat objek.
44 | Constructor adalah method khusus untuk menginisialisasi objek baru.
45 | */
46 |
--------------------------------------------------------------------------------
/module-3-tipe-data/homework/jawaban_soal_tipe_data.md:
--------------------------------------------------------------------------------
1 |
2 | ### File Jawaban dan Penjelasan: `jawaban_tipe_data.md`
3 | ```md
4 | # Jawaban dan Penjelasan tentang Tipe Data di JavaScript
5 |
6 | ## 1. Tipe Data String
7 | **Jawaban:** b) Tipe data untuk menyimpan teks
8 | **Penjelasan:** String adalah urutan karakter yang digunakan untuk menyimpan dan memanipulasi teks dalam JavaScript.
9 |
10 | ## 2. Tipe Data Number
11 | **Jawaban:** c) 42.7
12 | **Penjelasan:** Number digunakan untuk menyimpan nilai numerik, baik bilangan bulat (integer) maupun desimal (float) dalam JavaScript.
13 |
14 | ## 3. Tipe Data Boolean
15 | **Jawaban:** c) True dan False
16 | **Penjelasan:** Boolean hanya memiliki dua nilai: `true` atau `false`, yang sering digunakan dalam operasi logika dan kondisi.
17 |
18 | ## 4. Tipe Data Undefined
19 | **Jawaban:** a) Nilai yang diberikan kepada variabel yang belum diinisialisasi
20 | **Penjelasan:** `undefined` adalah nilai default yang diberikan kepada variabel yang belum dideklarasikan atau belum diinisialisasi.
21 |
22 | ## 5. Tipe Data Null
23 | **Jawaban:** a) `null` menunjukkan bahwa variabel tidak memiliki nilai, sedangkan `undefined` menunjukkan bahwa variabel belum diinisialisasi
24 | **Penjelasan:** `null` adalah nilai yang diberikan secara eksplisit untuk menunjukkan bahwa variabel tidak memiliki nilai, sedangkan `undefined` adalah nilai default ketika variabel belum diinisialisasi.
25 |
26 | ## 6. Tipe Data Symbol
27 | **Jawaban:** b) Immutable dan unik
28 | **Penjelasan:** Symbol adalah tipe data primitif yang unik dan immutable, digunakan sebagai identifier unik untuk properti objek dalam JavaScript.
29 |
30 | ## 7. Tipe Data BigInt
31 | **Jawaban:** c) Untuk merepresentasikan angka yang sangat besar melebihi batas `Number`
32 | **Penjelasan:** BigInt digunakan untuk menangani angka yang sangat besar yang tidak bisa diwakili oleh tipe data Number dalam JavaScript.
33 |
34 | ## 8. Tipe Data Object
35 | **Jawaban:** a) Tipe data yang digunakan untuk menyimpan koleksi data dalam pasangan key-value
36 | **Penjelasan:** Object adalah tipe data reference yang digunakan untuk menyimpan data kompleks dalam bentuk pasangan key-value.
37 |
38 | ## 9. Tipe Data Array
39 | **Jawaban:** b) Sebuah objek yang menyimpan data berurutan dan dapat diakses melalui indeks
40 | **Penjelasan:** Array adalah tipe data reference yang merupakan jenis khusus dari objek, digunakan untuk menyimpan koleksi data berurutan.
41 |
42 | ## 10. Tipe Data Function
43 | **Jawaban:** a) Ya, Function adalah tipe data reference
44 | **Penjelasan:** Function dalam JavaScript adalah tipe data reference dan juga merupakan objek, yang memungkinkan blok kode untuk digunakan kembali.
45 |
46 | ## 11. Perbedaan Tipe Data Primitive vs Reference
47 | **Jawaban:** b) Mengubah nilai pada tipe data reference akan mempengaruhi variabel lain yang merujuk ke objek yang sama
48 | **Penjelasan:** Pada tipe data reference, semua variabel yang merujuk ke objek yang sama akan dipengaruhi ketika objek tersebut diubah, berbeda dengan tipe data primitive yang tidak mempengaruhi variabel lain ketika nilainya diubah.
49 |
50 | ## 12. Contoh Kode Tipe Data Primitive
51 | **Jawaban:** a) 10
52 | **Penjelasan:** Karena `b` menyimpan salinan nilai `a` sebelum `a` diubah, maka nilai `b` tetap 10 meskipun nilai `a` berubah menjadi 20.
53 |
54 | ## 13. Contoh Kode Tipe Data Reference
55 | **Jawaban:** b) "budiman"
56 | **Penjelasan:** `obj2` merujuk ke objek yang sama dengan `obj1`, sehingga ketika `obj1.nama` diubah, nilai tersebut juga tercermin dalam `obj2`.
57 |
--------------------------------------------------------------------------------
/module-3-tipe-data/homework/soal_tipe_data.md:
--------------------------------------------------------------------------------
1 | # Pertanyaan tentang Tipe Data di JavaScript
2 |
3 | ## 1. Tipe Data String
4 | Apa yang dimaksud dengan tipe data `String` dalam JavaScript?
5 | - a) Tipe data untuk menyimpan angka
6 | - b) Tipe data untuk menyimpan teks
7 | - c) Tipe data untuk menyimpan nilai Boolean
8 | - d) Tipe data untuk menyimpan objek
9 |
10 | ## 2. Tipe Data Number
11 | Mana yang merupakan contoh dari tipe data `Number` dalam JavaScript?
12 | - a) '12345'
13 | - b) true
14 | - c) 42.7
15 | - d) null
16 |
17 | ## 3. Tipe Data Boolean
18 | Apa saja nilai yang dapat diambil oleh tipe data `Boolean` dalam JavaScript?
19 | - a) 0 dan 1
20 | - b) Ya dan Tidak
21 | - c) True dan False
22 | - d) Positif dan Negatif
23 |
24 | ## 4. Tipe Data Undefined
25 | Apa yang dimaksud dengan nilai `undefined` dalam JavaScript?
26 | - a) Nilai yang diberikan kepada variabel yang belum diinisialisasi
27 | - b) Nilai yang diberikan kepada variabel yang diinisialisasi dengan angka nol
28 | - c) Nilai yang diberikan kepada variabel yang memiliki nilai string kosong
29 | - d) Nilai yang diberikan kepada variabel yang sudah diinisialisasi
30 |
31 | ## 5. Tipe Data Null
32 | Apa perbedaan utama antara `null` dan `undefined` dalam JavaScript?
33 | - a) `null` menunjukkan bahwa variabel tidak memiliki nilai, sedangkan `undefined` menunjukkan bahwa variabel belum diinisialisasi
34 | - b) `undefined` menunjukkan bahwa variabel tidak memiliki nilai, sedangkan `null` menunjukkan bahwa variabel belum diinisialisasi
35 | - c) Tidak ada perbedaan antara `null` dan `undefined`
36 | - d) `null` digunakan untuk tipe data string, sedangkan `undefined` untuk tipe data number
37 |
38 | ## 6. Tipe Data Symbol
39 | Apa karakteristik dari tipe data `Symbol` dalam JavaScript?
40 | - a) Mutable dan dapat digunakan kembali
41 | - b) Immutable dan unik
42 | - c) Mutable dan digunakan sebagai tipe data numerik
43 | - d) Immutable dan digunakan sebagai tipe data string
44 |
45 | ## 7. Tipe Data BigInt
46 | Untuk apa tipe data `BigInt` digunakan dalam JavaScript?
47 | - a) Untuk merepresentasikan angka yang sangat kecil
48 | - b) Untuk merepresentasikan string yang sangat panjang
49 | - c) Untuk merepresentasikan angka yang sangat besar melebihi batas `Number`
50 | - d) Untuk merepresentasikan angka bulat dalam format string
51 |
52 | ## 8. Tipe Data Object
53 | Apa yang dimaksud dengan tipe data `Object` dalam JavaScript?
54 | - a) Tipe data yang digunakan untuk menyimpan koleksi data dalam pasangan key-value
55 | - b) Tipe data yang digunakan untuk menyimpan teks
56 | - c) Tipe data yang digunakan untuk menyimpan angka bulat
57 | - d) Tipe data yang digunakan untuk menyimpan nilai Boolean
58 |
59 | ## 9. Tipe Data Array
60 | Bagaimana cara mendefinisikan tipe data `Array` dalam JavaScript?
61 | - a) Sebuah objek yang menyimpan data berurutan dalam pasangan key-value
62 | - b) Sebuah objek yang menyimpan data berurutan dan dapat diakses melalui indeks
63 | - c) Sebuah objek yang menyimpan fungsi dan properti
64 | - d) Sebuah objek yang digunakan untuk menyimpan data dalam bentuk string
65 |
66 | ## 10. Tipe Data Function
67 | Apakah `Function` termasuk tipe data di JavaScript?
68 | - a) Ya, Function adalah tipe data reference
69 | - b) Tidak, Function bukan tipe data
70 | - c) Ya, Function adalah tipe data primitive
71 | - d) Tidak, Function hanya merupakan perintah
72 |
73 | ## 11. Perbedaan Tipe Data Primitive vs Reference
74 | Mana dari pernyataan berikut yang benar mengenai perbedaan antara tipe data primitive dan reference dalam JavaScript?
75 | - a) Tipe data primitive disimpan di heap memory, sedangkan reference disimpan di stack memory
76 | - b) Mengubah nilai pada tipe data reference akan mempengaruhi variabel lain yang merujuk ke objek yang sama
77 | - c) Tipe data reference disimpan di stack memory dengan nilai langsungnya
78 | - d) Mengubah nilai pada tipe data primitive akan mempengaruhi variabel lain yang menyimpan salinan nilai tersebut
79 |
80 | ## 12. Contoh Kode Tipe Data Primitive
81 | Apa output dari kode di bawah ini?
82 |
83 | ```javascript
84 | let a = 10;
85 | let b = a;
86 | a = 20;
87 | console.log(b)
88 | ```
89 | - a) 10
90 | - b) 20
91 | - c) undefined
92 | - d) Error
93 |
94 | ## 13. Contoh Kode Tipe Data Reference
95 |
96 | ```javascript
97 | let obj1 = {nama: "ranggo"};
98 | let obj2 = obj1;
99 | obj1.nama = "budiman";
100 | console.log(obj2.nama);
101 | ```
102 | - a) "ranggo"
103 | - b) "budiman"
104 | - c) undefined
105 | - d) Error
--------------------------------------------------------------------------------
/module-3-tipe-data/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Tutorial-JavaScript
7 |
8 |
9 |
Tutorial-JavaScript
10 |
11 |
12 |
--------------------------------------------------------------------------------
/module-3-tipe-data/index.js:
--------------------------------------------------------------------------------
1 | /* Tipe data Primitive */
2 |
3 | // String
4 | const nama = 'Ranggo'
5 | const negara = "Indonesia"
6 | const domisili = `${nama} Bandung`
7 |
8 | // Number
9 | const umur = 26.5
10 |
11 | // Boolean
12 | const isMarried = true
13 |
14 | // Undefined
15 | let x;
16 |
17 | // null
18 | const person = null
19 |
20 | // Symbol
21 | const symbol1 = Symbol("description 1")
22 |
23 | // BigInt
24 | const bigInt1 = 27864816487632487263476n
25 |
26 |
27 | /* Tipe data Reference */
28 |
29 | // Object
30 | const orang = {
31 | nama: "Ranggo",
32 | umur: 26,
33 | negara: "indonesia",
34 | }
35 |
36 | // Array
37 | const hobby = ["Basket", "Catur"]
38 |
39 |
40 | // Function
41 | function sayHello(){
42 | return "Hello from kenapa coding"
43 | }
44 |
45 | const output = sayHello
46 |
47 | console.log(output, typeof output)
48 |
49 | // https://github.com/rohan-paul/Awesome-JavaScript-Interviews/blob/master/Javascript/Tricky-JS-Problems/typeof-null-why-its-object.md
50 |
51 | /* Perbedaan tipe data primitive dan reference */
52 |
53 | // tipe data primitive
54 |
55 | let a = 10
56 | let b = a // 'b' menyimpan nilai salinan dari a , b = 10
57 |
58 | a = 20
59 |
60 | console.log(b) // output : 10
61 |
62 | // tipe data reference
63 |
64 | let obj1 = {nama: "ranggo"}
65 | let obj2 = obj1 //obj2 akan menyimpan referensi yang sama dengan obj1
66 | obj1.nama = "budiman"
67 |
68 | console.log(obj2)
69 |
--------------------------------------------------------------------------------
/module-30-inheritance/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Tutorial-JavaScript
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/module-39-callback-asynchronous/index.js:
--------------------------------------------------------------------------------
1 | // function selesaikanTugas(tugas, callback){
2 | // console.log(`Menyelesaikan Tugas : ${tugas}`)
3 | // callback()
4 | // }
5 |
6 | // function tugasSelesai(){
7 | // console.log("Tugas telah selesai !")
8 | // }
9 |
10 | // selesaikanTugas("Informatika", tugasSelesai)
11 |
12 | function getUserData(callback){
13 | console.log("Fetching user data . . .")
14 |
15 | setTimeout(()=> {
16 | const userData = {
17 | id: 1,
18 | name: 'Ranggo',
19 | email: 'ranggo@hotmail.com'
20 | }
21 |
22 | callback(null,userData)
23 | }, 2000)
24 | }
25 |
26 | function displayUserData(error, userData){
27 | if(error){
28 | console.error("Error fetching user data: ", error)
29 | } else {
30 | console.log("user Data : ", userData)
31 | }
32 | }
33 |
34 | getUserData(displayUserData)
--------------------------------------------------------------------------------
/module-4-type-conversion/homework/jawaban_type_conversion.md:
--------------------------------------------------------------------------------
1 | # Jawaban dan Penjelasan tentang Type Conversion di JavaScript
2 |
3 | ## 1. Apa yang dimaksud dengan Type Conversion dalam JavaScript?
4 | **Jawaban:** a) Proses mengubah satu tipe data menjadi tipe data lain
5 | **Penjelasan:** Type Conversion adalah proses mengubah satu tipe data menjadi tipe data lain, baik secara implicit maupun explicit.
6 |
7 | ## 2. Apa perbedaan antara Implicit Conversion dan Explicit Conversion?
8 | **Jawaban:** b) Implicit Conversion dilakukan secara otomatis oleh JavaScript, sedangkan Explicit Conversion dilakukan secara eksplisit oleh programmer
9 | **Penjelasan:** Implicit Conversion terjadi secara otomatis selama operasi tertentu di JavaScript, sedangkan Explicit Conversion dilakukan dengan menggunakan metode atau fungsi tertentu.
10 |
11 | ## 3. Apa hasil dari operasi berikut ini dalam Implicit Conversion?
12 | **Jawaban:** b) "510"
13 | **Penjelasan:** Dalam operasi ini, JavaScript melakukan konversi implicit dengan menggabungkan angka `10` dengan string `"5"`, menghasilkan string `"510"`.
14 |
15 | ## 4. Apa hasil dari operasi berikut ini dalam Implicit Conversion?
16 | **Jawaban:** a) NaN, "number"
17 | **Penjelasan:** Karena pengurangan tidak dapat dilakukan antara string `"abc"` dan angka `10`, hasilnya adalah `NaN` (Not a Number) dengan tipe data `number`.
18 |
19 | ## 5. Apa yang terjadi ketika nilai `0`, `null`, `undefined`, atau `""` dikonversi menjadi Boolean secara Implicit?
20 | **Jawaban:** b) `0`, `null`, `undefined`, dan `""` akan menjadi `false`
21 | **Penjelasan:** Nilai `0`, `null`, `undefined`, dan `""` dianggap sebagai "falsy" dalam JavaScript, sehingga mereka dikonversi menjadi `false` saat dilakukan konversi implicit ke Boolean.
22 |
23 | ## 6. Apa hasil dari konversi eksplisit berikut ini?
24 | **Jawaban:** c) "100", "string"
25 | **Penjelasan:** Metode `toString()` mengubah angka `100` menjadi string `"100"` dengan tipe data `string`.
26 |
27 | ## 7. Apa hasil dari konversi eksplisit berikut ini?
28 | **Jawaban:** c) 200.88, "number"
29 | **Penjelasan:** Fungsi `parseFloat()` mengubah string `"200.88"` menjadi angka desimal `200.88` dengan tipe data `number`.
30 |
31 | ## 8. Apa yang akan terjadi jika nilai kosong `""` dikonversi menjadi Boolean secara eksplisit?
32 | **Jawaban:** b) false, "boolean"
33 | **Penjelasan:** Nilai kosong `""` dianggap sebagai "falsy" dalam JavaScript, sehingga ketika dikonversi secara eksplisit menjadi Boolean, hasilnya adalah `false` dengan tipe data `boolean`.
34 |
--------------------------------------------------------------------------------
/module-4-type-conversion/homework/soal_type_conversion.md:
--------------------------------------------------------------------------------
1 | # Pertanyaan tentang Type Conversion di JavaScript
2 |
3 | ## 1. Apa yang dimaksud dengan Type Conversion dalam JavaScript?
4 | - a) Proses mengubah satu tipe data menjadi tipe data lain
5 | - b) Proses mengubah sebuah objek menjadi array
6 | - c) Proses mengubah fungsi menjadi objek
7 | - d) Proses mengubah tipe data menjadi konstanta
8 |
9 | ## 2. Apa perbedaan antara Implicit Conversion dan Explicit Conversion?
10 | - a) Implicit Conversion dilakukan secara manual oleh programmer, sedangkan Explicit Conversion dilakukan secara otomatis oleh JavaScript
11 | - b) Implicit Conversion dilakukan secara otomatis oleh JavaScript, sedangkan Explicit Conversion dilakukan secara eksplisit oleh programmer
12 | - c) Tidak ada perbedaan antara keduanya
13 | - d) Implicit Conversion dan Explicit Conversion adalah metode untuk mengubah tipe data menjadi objek
14 |
15 | ## 3. Apa hasil dari operasi berikut ini dalam Implicit Conversion?
16 |
17 | ```javascript
18 | let result = "5" + 10;
19 | console.log(result);
20 | ```
21 |
22 | - a) 15
23 | - b) "510"
24 | - c) "5 + 10"
25 | - d) Error
26 |
27 | ## 4. Apa hasil dari operasi berikut ini dalam Implicit Conversion?
28 |
29 | ```javascript
30 | let result = "abc" - 10;
31 | console.log(result, typeof result);
32 | ```
33 | - a) NaN, "number"
34 | - b) "abc10", "string"
35 | - c) NaN, "string"
36 | - d) Error
37 |
38 | ## 5. Apa yang terjadi ketika nilai 0, null, undefined, atau "" dikonversi menjadi Boolean secara Implicit?
39 | - a) Semuanya akan menjadi true
40 | - b) 0, null, undefined, dan "" akan menjadi false
41 | - c) 0 dan null menjadi true, sementara undefined dan "" menjadi false
42 | - d) Semuanya akan menjadi false kecuali undefined
43 |
44 | ## 6. Apa hasil dari konversi eksplisit berikut ini?
45 |
46 | ```javascript
47 | let num = 100;
48 | let string = num.toString();
49 | console.log(string, typeof string);
50 | ```
51 | - a) "100", "number"
52 | - b) 100, "string"
53 | - c) "100", "string"
54 | - d) Error
55 |
56 | ## 7. Apa hasil dari konversi eksplisit berikut ini?
57 | ```javascript
58 | let string2 = "200.88";
59 | let num2 = parseFloat(string2);
60 | console.log(num2, typeof num2);
61 | ```
62 | - a) 200, "number"
63 | - b) 200.88, "string"
64 | - c) 200.88, "number"
65 | - d) "200.88", "number"
66 |
67 | ## 8. Apa yang akan terjadi jika nilai kosong "" dikonversi menjadi Boolean secara eksplisit?
68 | ```javascript
69 | let bool2 = Boolean("");
70 | console.log(bool2, typeof bool2);
71 | ```
72 | - a) true, "boolean"
73 | - b) false, "boolean"
74 | - c) true, "string"
75 | - d) false, "string"
--------------------------------------------------------------------------------
/module-4-type-conversion/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Tutorial-JavaScript
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/module-45-modules/index.js:
--------------------------------------------------------------------------------
1 | // import greet, {add as tambah, subtract as kurang} from './math.js'
2 |
3 |
4 | // console.log(tambah(10,20))
5 | // console.log(kurang(10,5))
6 |
7 | // greet("ranggo")
8 |
9 | document.getElementById('addButton').addEventListener('click', async () => {
10 | const mathOperation = await import('./math.js')
11 | const result = mathOperation.add(5,3)
12 | console.log(result)
13 | })
14 |
15 | document.getElementById('subtractButton').addEventListener('click', async () => {
16 | const mathOperation = await import('./math.js')
17 | const result = mathOperation.subtract(5,3)
18 | console.log(result)
19 | })
--------------------------------------------------------------------------------
/module-45-modules/math.js:
--------------------------------------------------------------------------------
1 | export const add = (a,b) => a + b
2 | export const subtract = (a,b) => a - b
3 |
4 | export default function greet(nama){
5 | console.log(`Hello ${nama} !!`)
6 | }
7 |
8 |
--------------------------------------------------------------------------------
/module-5-operator/homework/jawaban_soal_operator.md:
--------------------------------------------------------------------------------
1 |
2 | # Jawaban tentang Operator JavaScript
3 |
4 | ## 1. Apa itu operator dalam JavaScript?
5 | **Jawaban:** b) Simbol atau kata kunci yang digunakan untuk operasi pada nilai atau variabel.
6 |
7 | ## 2. Operator Aritmatika digunakan untuk?
8 | **Jawaban:** c) Melakukan operasi matematika seperti penjumlahan dan pengurangan.
9 |
10 | ## 3. Manakah yang termasuk Operator Penugasan (Assignment)?
11 | **Jawaban:** a) `=`
12 |
13 | ## 4. Apa hasil dari kode berikut?
14 | ```javascript
15 | let a = 10;
16 | let b = 5;
17 | console.log(a + b);
18 | ```
19 | **Jawaban:** c) 15
20 |
21 | ## 5. Apa fungsi dari Operator Perbandingan (Comparison)?
22 | **Jawaban:** c) Membandingkan dua nilai.
23 |
24 | ## 6. Manakah yang merupakan Operator Logika?
25 | **Jawaban:** b) `||`
26 |
27 | ## 7. Bagaimana Operator Ternary bekerja?
28 | **Jawaban:** b) Sebagai alternatif untuk if-else dalam satu baris kode.
29 |
30 | ## 8. Apa hasil dari kode berikut?
31 | ```javascript
32 | let age = 18;
33 | let canVote = age >= 18 ? "Boleh" : "Tidak Boleh";
34 | console.log(canVote);
35 | ```
36 | **Jawaban:** c) "Boleh"
37 |
38 | ## 9. Tuliskan kode yang menggunakan Operator Aritmatika untuk menambahkan dua angka, mengurangkannya, dan mengalikan hasilnya dengan angka lain.
39 | ```javascript
40 | let x = 5;
41 | let y = 3;
42 | let sum = x + y; // Penjumlahan
43 | let diff = sum - 2; // Pengurangan
44 | let product = diff * 4; // Perkalian
45 | console.log(product); // Output: 24
46 | ```
47 |
48 | ## 10. Tuliskan kode yang menggunakan Operator Penugasan untuk menambahkan nilai pada variabel dan mengurangi nilai yang sama.
49 | ```javascript
50 | let z = 10;
51 | z += 5; // Tambah 5
52 | z -= 3; // Kurangi 3
53 | console.log(z); // Output: 12
54 | ```
55 |
--------------------------------------------------------------------------------
/module-5-operator/homework/soal_operator.md:
--------------------------------------------------------------------------------
1 |
2 | # Pertanyaan tentang Operator JavaScript
3 |
4 | ## 1. Apa itu operator dalam JavaScript?
5 | a) Fungsi yang digunakan untuk menampilkan data.
6 | b) Simbol atau kata kunci yang digunakan untuk operasi pada nilai atau variabel.
7 | c) Alat untuk debugging kode.
8 | d) Perintah untuk menjalankan server.
9 |
10 | ## 2. Operator Aritmatika digunakan untuk?
11 | a) Menggabungkan string.
12 | b) Menginisialisasi variabel.
13 | c) Melakukan operasi matematika seperti penjumlahan dan pengurangan.
14 | d) Mengakses elemen dalam array.
15 |
16 | ## 3. Manakah yang termasuk Operator Penugasan (Assignment)?
17 | a) `=`
18 | b) `&&`
19 | c) `+`
20 | d) `!=`
21 |
22 | ## 4. Apa hasil dari kode berikut?
23 | ```javascript
24 | let a = 10;
25 | let b = 5;
26 | console.log(a + b);
27 | ```
28 | a) 10
29 | b) 5
30 | c) 15
31 | d) 50
32 |
33 | ## 5. Apa fungsi dari Operator Perbandingan (Comparison)?
34 | a) Mengubah tipe data variabel.
35 | b) Menjalankan fungsi secara asinkron.
36 | c) Membandingkan dua nilai.
37 | d) Menyambungkan string.
38 |
39 | ## 6. Manakah yang merupakan Operator Logika?
40 | a) `++`
41 | b) `||`
42 | c) `=`
43 | d) `<=`
44 |
45 | ## 7. Bagaimana Operator Ternary bekerja?
46 | a) Sebagai loop yang mengulang operasi tiga kali.
47 | b) Sebagai alternatif untuk if-else dalam satu baris kode.
48 | c) Mengubah nilai menjadi tipe data lain.
49 | d) Melakukan operasi penugasan pada variabel.
50 |
51 | ## 8. Apa hasil dari kode berikut?
52 | ```javascript
53 | let age = 18;
54 | let canVote = age >= 18 ? "Boleh" : "Tidak Boleh";
55 | console.log(canVote);
56 | ```
57 | a) "18"
58 | b) "Tidak Boleh"
59 | c) "Boleh"
60 | d) Error
61 |
62 | ## 9. Tuliskan kode yang menggunakan Operator Aritmatika untuk menambahkan dua angka, mengurangkannya, dan mengalikan hasilnya dengan angka lain.
63 | Tulis jawaban dalam bentuk kode.
64 |
65 | ## 10. Tuliskan kode yang menggunakan Operator Penugasan untuk menambahkan nilai pada variabel dan mengurangi nilai yang sama.
66 | Tulis jawaban dalam bentuk kode.
67 |
--------------------------------------------------------------------------------
/module-5-operator/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Tutorial-JavaScript
7 |
8 |
9 |
Tutorial-JavaScript
10 |
11 |
12 |
--------------------------------------------------------------------------------
/module-5-operator/index.js:
--------------------------------------------------------------------------------
1 | /* Operator Aritmatika */
2 |
3 | // Penjumlahan +
4 |
5 | let x = 5
6 | let y = 10
7 | let sum = x + y //output : 15
8 |
9 | // console.log(sum, typeof sum)
10 |
11 | // Pengurangan -
12 |
13 | let a = 7
14 | let b = 3
15 | let diff = a - b //output : 4
16 |
17 | // console.log(diff, typeof diff)
18 |
19 | // Operasi Perkalian *
20 | let p = 5
21 | let q = 6
22 | let result = p * q //output : 30
23 |
24 | // console.log(result)
25 |
26 | // Operasi pembagian /
27 | let m = 100
28 | let n = 4
29 | let bagi = m / n // Output: 25
30 |
31 | // console.log(bagi)
32 |
33 | // Operasi Modulus %
34 | let r = 17
35 | let s = 4 //16
36 | let mod = r % s //Output : 3
37 |
38 | // console.log(mod)
39 |
40 | // Operasi Eksponen **
41 | let base = 2
42 | let exponent = 3
43 | let power = base ** exponent // Output : 8
44 |
45 | // console.log(power)
46 |
47 | //Operator Increment
48 | let count = 5
49 | count++
50 |
51 | // console.log(count)
52 |
53 | //Operator Decrement
54 | let countDown = 5
55 | countDown--
56 |
57 | console.log(countDown)
58 |
--------------------------------------------------------------------------------
/module-5-operator/scriptAssignment.js:
--------------------------------------------------------------------------------
1 | /* Assignment Operator */
2 |
3 | // Assignment Dasar =
4 | let nama = "Ranggo"
5 | console.log(nama)
6 |
7 | // // Assignment dan Penjumlahan
8 | // let x = 7
9 | // // x = x + 3 //7 + 3 = Output : 10
10 | // x += 3 //7 + 3 = Output : 10
11 |
12 | // console.log(x)
13 |
14 | // Assignment dan Pengurangan
15 | // let x = 7
16 | // // x = x - 3 //7 - 3 = Output : 4
17 | // x -= 3 //7 - 3 = Output : 4
18 |
19 | // console.log(x)
20 |
21 | // // Assignment dan Perkalian
22 | // let x = 7
23 | // // x = x * 3 //7 * 3 = Output : 21
24 | // x *= 3 //7 * 3 = Output : 21
25 |
26 | // console.log(x)
27 |
28 | // // Assignment dan Pembagian
29 | // let x = 12
30 | // // x = x / 3 //12 / 3 = Output : 4
31 | // x /= 3 // 12 / 3 = Output : 4
32 |
33 | // console.log(x)
34 |
35 | // Assignment dan Modulus
36 | // let x = 13
37 | // // x = x % 3 //13 % 3 = Output : 1
38 | // x %= 3 // 13 % 3 = Output : 1
39 |
40 | // console.log(x)
41 |
42 |
--------------------------------------------------------------------------------
/module-5-operator/scriptLogika.js:
--------------------------------------------------------------------------------
1 | /* Operator Logika */
2 |
3 | // And && Operator
4 | let a = true
5 | let b = true
6 | let result = a && b
7 |
8 | // console.log(result)
9 |
10 | // Or Operator ||
11 | let c = true
12 | let d = true
13 | let orResult = c || d
14 |
15 | // console.log(orResult)
16 |
17 | // not operator !
18 | let e = false
19 | let notResult = !e
20 |
21 | console.log(notResult)
--------------------------------------------------------------------------------
/module-5-operator/scriptOperator.js:
--------------------------------------------------------------------------------
1 | /* Comparison Operator */
2 |
3 | // == mengecek atau membandingkan persamaan nilai
4 |
5 | // let a = "5"
6 | // let b = 5
7 |
8 | // console.log(a == b) //Output : true
9 |
10 | // === mengecek atau membandingkan persamaan nilai dan tipe data
11 |
12 | // let a = "5" //string
13 | // let b = 5 //number
14 |
15 | // console.log(a === b) //Output : false
16 |
17 | // != mengecek ketidaksamaan nilai dari variable
18 |
19 | // let a = "5" //string
20 | // let b = 5 //number
21 |
22 | // console.log(a != b) //Output : false
23 |
24 | // !== mengecek atau membandingkan ketidaksamaan nilai dan tipe data variable
25 |
26 | // let a = "5" //string
27 | // let b = 5 //number
28 |
29 | // console.log(a !== b) //Output : true
30 |
31 | // > mengecek apakah variable satu lebih besar dari variable lainnya
32 |
33 | // let a = 7
34 | // let b = 5
35 |
36 | // console.log(a>b) //Output: true
37 |
38 | // >= mengecek apakah variable satu lebih besar atau sama dari variable lainnya
39 |
40 | // let a = 5
41 | // let b = 5
42 |
43 | // console.log(a>=b) //Output: true
44 |
45 | // < mengecek apakah variable satu lebih kecil dari variable lainnya
46 | // let a = 4
47 | // let b = 5
48 |
49 | // console.log(a=18 ? "Yes": "No")
7 | console.log(canVote)
--------------------------------------------------------------------------------
/module-6-strings/homework/jawaban_soal_strings.md:
--------------------------------------------------------------------------------
1 |
2 | # Jawaban tentang Strings di JavaScript
3 |
4 | ## 1. Apa itu String dalam JavaScript?
5 | **Jawaban:** b) Tipe data untuk merepresentasikan teks.
6 |
7 | ## 2. Bagaimana cara mengakses karakter pada String?
8 | **Jawaban:** b) Menggunakan tanda kurung siku [].
9 |
10 | ## 3. Apa fungsi dari property `length` pada String?
11 | **Jawaban:** c) Mengetahui panjang dari String.
12 |
13 | ## 4. Apa hasil dari kode berikut?
14 | ```javascript
15 | let text = 'JavaScript';
16 | console.log(text.toUpperCase());
17 | ```
18 | **Jawaban:** c) 'JAVASCRIPT'
19 |
20 | ## 5. Apa fungsi dari metode `trim()` pada String?
21 | **Jawaban:** c) Menghapus spasi di awal dan akhir String.
22 |
23 | ## 6. Manakah yang benar tentang `slice()` pada String?
24 | **Jawaban:** b) Mengambil bagian dari String berdasarkan indeks.
25 |
26 | ## 7. Apa hasil dari kode berikut?
27 | ```javascript
28 | let sentence = "Hello, World";
29 | let newSentence = sentence.replace('World', 'JavaScript');
30 | console.log(newSentence);
31 | ```
32 | **Jawaban:** a) 'Hello, JavaScript'
33 |
34 | ## 8. Apa kegunaan dari `includes()` pada String?
35 | **Jawaban:** b) Mengecek apakah String mengandung substring tertentu.
36 |
37 | ## 9. Tuliskan kode untuk menggabungkan dua string 'Hello' dan 'JavaScript' menggunakan template literals.
38 | ```javascript
39 | let greet = 'Hello';
40 | let language = 'JavaScript';
41 | let result = `${greet} ${language}`;
42 | console.log(result); // Output: 'Hello JavaScript'
43 | ```
44 |
45 | ## 10. Tuliskan kode yang membagi string 'test-array-di-string' menjadi array berdasarkan '-' sebagai separator.
46 | ```javascript
47 | let str = 'test-array-di-string';
48 | let arr = str.split('-');
49 | console.log(arr); // Output: ['test', 'array', 'di', 'string']
50 | ```
51 |
--------------------------------------------------------------------------------
/module-6-strings/homework/soal_strings.md:
--------------------------------------------------------------------------------
1 |
2 | # Pertanyaan tentang Strings di JavaScript
3 |
4 | ## 1. Apa itu String dalam JavaScript?
5 | a) Tipe data untuk angka.
6 | b) Tipe data untuk merepresentasikan teks.
7 | c) Fungsi untuk menghitung.
8 | d) Tipe data untuk array.
9 |
10 | ## 2. Bagaimana cara mengakses karakter pada String?
11 | a) Menggunakan tanda kurung bulat ().
12 | b) Menggunakan tanda kurung siku [].
13 | c) Menggunakan tanda kurung kurawal {}.
14 | d) Menggunakan titik koma ;.
15 |
16 | ## 3. Apa fungsi dari property `length` pada String?
17 | a) Menambahkan karakter pada String.
18 | b) Menghapus spasi dari String.
19 | c) Mengetahui panjang dari String.
20 | d) Mengganti karakter dalam String.
21 |
22 | ## 4. Apa hasil dari kode berikut?
23 | ```javascript
24 | let text = 'JavaScript';
25 | console.log(text.toUpperCase());
26 | ```
27 | a) 'javascript'
28 | b) 'JavaScript'
29 | c) 'JAVASCRIPT'
30 | d) Error
31 |
32 | ## 5. Apa fungsi dari metode `trim()` pada String?
33 | a) Menambahkan spasi di dalam String.
34 | b) Mengubah huruf menjadi besar.
35 | c) Menghapus spasi di awal dan akhir String.
36 | d) Menggabungkan dua String.
37 |
38 | ## 6. Manakah yang benar tentang `slice()` pada String?
39 | a) Menggabungkan dua String menjadi satu.
40 | b) Mengambil bagian dari String berdasarkan indeks.
41 | c) Mengubah semua huruf menjadi huruf besar.
42 | d) Mengubah String menjadi array.
43 |
44 | ## 7. Apa hasil dari kode berikut?
45 | ```javascript
46 | let sentence = "Hello, World";
47 | let newSentence = sentence.replace('World', 'JavaScript');
48 | console.log(newSentence);
49 | ```
50 | a) 'Hello, JavaScript'
51 | b) 'World, Hello'
52 | c) 'Hello, World'
53 | d) Error
54 |
55 | ## 8. Apa kegunaan dari `includes()` pada String?
56 | a) Mengubah String menjadi huruf kecil.
57 | b) Mengecek apakah String mengandung substring tertentu.
58 | c) Mengambil bagian dari String.
59 | d) Menggabungkan elemen array menjadi String.
60 |
61 | ## 9. Tuliskan kode untuk menggabungkan dua string 'Hello' dan 'JavaScript' menggunakan template literals.
62 | Tulis jawaban dalam bentuk kode.
63 |
64 | ## 10. Tuliskan kode yang membagi string 'test-array-di-string' menjadi array berdasarkan '-' sebagai separator.
65 | Tulis jawaban dalam bentuk kode.
66 |
--------------------------------------------------------------------------------
/module-6-strings/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Tutorial-JavaScript
7 |
8 |
9 |
Tutorial-JavaScript
10 |
11 |
12 |
--------------------------------------------------------------------------------
/module-6-strings/index.js:
--------------------------------------------------------------------------------
1 | /* Strings di javascript */
2 |
3 | // membuat strings
4 | // let singleQuote = 'Hello'
5 | // let doubleQuote = "World"
6 | // let backtics = `Hello World`
7 |
8 | // // mengakses karakter di dalam string
9 | // let str = 'JavaScript'
10 | // console.log(str[4])
11 |
12 | // // property dan methods di dalam string
13 |
14 | // console.log(str.length) // mengetahui panjang string
15 |
16 | // console.log(str.toUpperCase()) // merubah string ke uppercase
17 |
18 | // console.log(str.toLowerCase()) // merubah string ke lowecase
19 |
20 | // let testTrim = ' javascript trim '
21 |
22 | // console.log(testTrim.trim())
23 |
24 | // Manipulasi String
25 |
26 | // concat
27 | // let firstName = 'Ranggo'
28 | // let lastName = 'Pato'
29 | // let result = firstName + " " + lastName
30 | // console.log(result)
31 |
32 | // // concat template literals
33 |
34 | // let resultBactics = `${firstName} ${lastName}`
35 | // console.log(resultBactics)
36 |
37 | // // Mengambil bagian dari string
38 |
39 | // let text = "JavaScript"
40 | // console.log(text.slice(0,4))
41 | // console.log(text.substring(4))
42 |
43 | // // Mengganti bagian dari string
44 | // let replacement = 'Hello, World'
45 | // let newReplacement = replacement.replace('World', 'There')
46 |
47 | // console.log(newReplacement)
48 |
49 | // const arr = ['test', 'array', 'di', 'string']
50 |
51 | // // console.log(arr.join('-'))
52 |
53 | // const testString = 'test-array-di-string'
54 |
55 | // console.log(testString.split('-', 4))
56 |
57 | // Pencarian di dalam string
58 |
59 | //indexOf,
60 | let sentence = "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Placeat dolorum veniam, laborum ut ipsa et accusamus consectetur corrupti necessitatibus omnis?"
61 | let index = sentence.indexOf("dolor")
62 | console.log(index)
63 | let lastIndex = sentence.lastIndexOf("dolor")
64 | console.log(lastIndex)
65 |
66 | let exists = sentence.includes("dolorisme")
67 | console.log(exists)
--------------------------------------------------------------------------------
/module-7-numbers/homework/jawaban_soal_numbers.md:
--------------------------------------------------------------------------------
1 |
2 | # Jawaban: Numbers di JavaScript
3 |
4 | ## 1. Apa yang akan ditampilkan oleh kode berikut?
5 | - **Jawaban:** B. `"number"`
6 |
7 | ## 2. Apa hasil output dari pernyataan berikut?
8 | - **Jawaban:** C. `"27.5"`
9 |
10 | ## 3. Bagaimana cara mengubah string `"456.78"` menjadi angka floating point di JavaScript?
11 | - **Jawaban:** B. `parseFloat("456.78")`
12 |
13 | ## 4. Apa nilai dari `Number.POSITIVE_INFINITY`?
14 | - **Jawaban:** A. `Infinity`
15 |
16 | ## 5. Apa yang akan ditampilkan oleh kode berikut?
17 | - **Jawaban:** A. `"3.14"`
18 |
19 | ## 6. Apa yang terjadi jika kita melakukan operasi `"abc" / 2` di JavaScript?
20 | - **Jawaban:** B. `"NaN"`
21 |
22 | ## 7. Apa hasil output dari kode berikut?
23 | - **Jawaban:** A. `123`
24 |
25 | ## 8. Apa kegunaan metode `toFixed()` pada objek Number?
26 | - **Jawaban:** A. Mengubah angka menjadi string dengan jumlah digit desimal yang ditentukan.
27 |
--------------------------------------------------------------------------------
/module-7-numbers/homework/soal_numbers.md:
--------------------------------------------------------------------------------
1 |
2 | # Pertanyaan: Numbers di JavaScript
3 |
4 | ## 1. Apa yang akan ditampilkan oleh kode berikut?
5 | ```javascript
6 | let bilanganBulat = 26;
7 | console.log(typeof bilanganBulat);
8 | ```
9 | - A. `"string"`
10 | - B. `"number"`
11 | - C. `"boolean"`
12 | - D. `"object"`
13 |
14 | ## 2. Apa hasil output dari pernyataan berikut?
15 | ```javascript
16 | let bilanganPecahan = 27.5;
17 | console.log(bilanganPecahan.toFixed(1));
18 | ```
19 | - A. `"27"`
20 | - B. `"27.50"`
21 | - C. `"27.5"`
22 | - D. `"27.50"`
23 |
24 | ## 3. Bagaimana cara mengubah string `"456.78"` menjadi angka floating point di JavaScript?
25 | - A. `parseInt("456.78")`
26 | - B. `parseFloat("456.78")`
27 | - C. `Number("456.78")`
28 | - D. `String("456.78")`
29 |
30 | ## 4. Apa nilai dari `Number.POSITIVE_INFINITY`?
31 | - A. `Infinity`
32 | - B. `NaN`
33 | - C. `undefined`
34 | - D. `-Infinity`
35 |
36 | ## 5. Apa yang akan ditampilkan oleh kode berikut?
37 | ```javascript
38 | let num = 3.14159;
39 | console.log(num.toPrecision(3));
40 | ```
41 | - A. `"3.14"`
42 | - B. `"3.141"`
43 | - C. `"3.1"`
44 | - D. `"3.142"`
45 |
46 | ## 6. Apa yang terjadi jika kita melakukan operasi `"abc" / 2` di JavaScript?
47 | - A. `2`
48 | - B. `"NaN"`
49 | - C. `"abc2"`
50 | - D. `undefined`
51 |
52 | ## 7. Apa hasil output dari kode berikut?
53 | ```javascript
54 | let str2 = "123.7";
55 | let int = parseInt(str2);
56 | console.log(int);
57 | ```
58 | - A. `123`
59 | - B. `123.7`
60 | - C. `"123"`
61 | - D. `"123.7"`
62 |
63 | ## 8. Apa kegunaan metode `toFixed()` pada objek Number?
64 | - A. Mengubah angka menjadi string dengan jumlah digit desimal yang ditentukan.
65 | - B. Mengubah string menjadi angka integer.
66 | - C. Mengubah angka menjadi string dengan panjang total yang ditentukan.
67 | - D. Mengubah angka menjadi string tanpa digit desimal.
68 |
--------------------------------------------------------------------------------
/module-7-numbers/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Tutorial-JavaScript
7 |
8 |
9 |
Tutorial-JavaScript
10 |
11 |
12 |
--------------------------------------------------------------------------------
/module-7-numbers/index.js:
--------------------------------------------------------------------------------
1 | /* Numbers di Javascript */
2 | /* Di JavaScript, tipe data Number digunakan untuk merepresentasikan angka.
3 | Angka ini bisa berupa bilangan bulat (integer), pecahan (floating point), atau bilangan khusus seperti Infinity dan NaN (Not-a-Number). */
4 |
5 | // contoh penggunaan numbers
6 | let bilanganBulat = 26
7 | let bilanganPecahan = 27.5
8 | let bilanganNegatif = -8
9 | let infinityValue = Infinity
10 | let notANumber = NaN
11 | // console.log(notANumber)
12 |
13 |
14 | // JavaScript menyediakan beberapa properti pada objek Number yang berguna:
15 |
16 | // 1. Number.MAX_VALUE
17 | // console.log(Number.MAX_VALUE)
18 |
19 |
20 | // 2. Number.MIN_VALUE
21 | // console.log(Number.MIN_VALUE)
22 |
23 |
24 | // 3. Number.POSITIVE_INFINITY
25 | console.log(Number.POSITIVE_INFINITY)
26 |
27 |
28 | // 4. Number.NEGATIVE_INFINITY
29 | console.log(Number.NEGATIVE_INFINITY)
30 |
31 |
32 | // 5. Number.NaN
33 | console.log("abc"/0)
34 |
35 |
36 | // Metode Bawaan Number
37 |
38 | // 1. toString(), Mengubah Angka menjadi string
39 | let num = 732.9
40 | let str = num.toString()
41 | console.log(str, typeof str)
42 |
43 |
44 | // 2. toFixed(digits), Mengubah angka menjadi string dengan jumlah digit desimal yang ditentukan.
45 | let floating = 3.124824
46 | console.log(floating.toFixed(4), typeof floating.toFixed(4))
47 |
48 |
49 |
50 | // 3. toPrecision(digits), Mengubah angka menjadi string dengan panjang total yang ditentukan.
51 | let float = 3.142890
52 | console.log(float.toPrecision(5))
53 |
54 |
55 | // 4. parseInt() dan parseFloat(), Mengubah string menjadi angka integer atau floating point.
56 |
57 | let str2 = "123.7"
58 | let int = parseFloat(str2)
59 | console.log(int)
60 |
61 |
62 |
63 |
--------------------------------------------------------------------------------
/module-8-math-object/homework/jawaban_soal_math_object.md:
--------------------------------------------------------------------------------
1 |
2 | # Jawaban: Math Object di JavaScript
3 |
4 | ## 1. Apa yang akan ditampilkan oleh kode berikut?
5 | - **Jawaban:** C. `3.14159...`
6 |
7 | ## 2. Apa fungsi dari `Math.sqrt()` dalam JavaScript?
8 | - **Jawaban:** B. Mengembalikan nilai akar kuadrat dari suatu angka
9 |
10 | ## 3. Apa output dari kode berikut?
11 | - **Jawaban:** B. `10`
12 |
13 | ## 4. Bagaimana hasil dari `Math.pow(3, 4)`?
14 | - **Jawaban:** D. `81`
15 |
16 | ## 5. Apa yang akan ditampilkan oleh kode berikut?
17 | - **Jawaban:** A. `4`
18 |
19 | ## 6. Apa fungsi dari `Math.random()` dalam JavaScript?
20 | - **Jawaban:** A. Mengembalikan angka acak antara 0 dan 1
21 |
22 | ## 7. Apa output dari kode berikut?
23 | - **Jawaban:** A. `9`
24 |
25 | ## 8. Apa hasil dari `Math.max(2, 8, 15, 4, 10)`?
26 | - **Jawaban:** C. `15`
27 |
--------------------------------------------------------------------------------
/module-8-math-object/homework/soal_math_object.md:
--------------------------------------------------------------------------------
1 |
2 | # Pertanyaan: Math Object di JavaScript
3 |
4 | ## 1. Apa yang akan ditampilkan oleh kode berikut?
5 | ```javascript
6 | console.log(Math.PI);
7 | ```
8 | - A. `3`
9 | - B. `3.14`
10 | - C. `3.14159...`
11 | - D. `2.718`
12 |
13 | ## 2. Apa fungsi dari `Math.sqrt()` dalam JavaScript?
14 | - A. Mengembalikan nilai pangkat dua dari suatu angka
15 | - B. Mengembalikan nilai akar kuadrat dari suatu angka
16 | - C. Mengembalikan nilai pangkat tiga dari suatu angka
17 | - D. Mengembalikan nilai akar pangkat tiga dari suatu angka
18 |
19 | ## 3. Apa output dari kode berikut?
20 | ```javascript
21 | console.log(Math.abs(-10));
22 | ```
23 | - A. `-10`
24 | - B. `10`
25 | - C. `0`
26 | - D. `NaN`
27 |
28 | ## 4. Bagaimana hasil dari `Math.pow(3, 4)`?
29 | - A. `7`
30 | - B. `12`
31 | - C. `64`
32 | - D. `81`
33 |
34 | ## 5. Apa yang akan ditampilkan oleh kode berikut?
35 | ```javascript
36 | console.log(Math.ceil(4.0000001));
37 | ```
38 | - A. `4`
39 | - B. `5`
40 | - C. `4.0`
41 | - D. `4.1`
42 |
43 | ## 6. Apa fungsi dari `Math.random()` dalam JavaScript?
44 | - A. Mengembalikan angka acak antara 0 dan 1
45 | - B. Mengembalikan angka acak antara 0 dan 100
46 | - C. Mengembalikan angka bulat acak antara 0 dan 1
47 | - D. Mengembalikan angka bulat acak antara 0 dan 100
48 |
49 | ## 7. Apa output dari kode berikut?
50 | ```javascript
51 | console.log(Math.trunc(9.9));
52 | ```
53 | - A. `9`
54 | - B. `10`
55 | - C. `9.9`
56 | - D. `0`
57 |
58 | ## 8. Apa hasil dari `Math.max(2, 8, 15, 4, 10)`?
59 | - A. `2`
60 | - B. `8`
61 | - C. `15`
62 | - D. `10`
63 |
--------------------------------------------------------------------------------
/module-8-math-object/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Tutorial-JavaScript
7 |
8 |
9 |
Tutorial-JavaScript
10 |
11 |
12 |
--------------------------------------------------------------------------------
/module-8-math-object/index.js:
--------------------------------------------------------------------------------
1 | /* 𝗠𝗮𝘁𝗵 𝗢𝗯𝗷𝗲𝗰𝘁 */
2 |
3 | // Apa itu Math Object, Math Object di JavaScript adalah objek bawaan yang berisi berbagai properti dan metode untuk melakukan operasi matematika.
4 |
5 | // Properti Math
6 |
7 | // * Math.PI: Mengembalikan nilai π (3.14159...).
8 | // * Math.E: Mengembalikan nilai konstanta Euler (2.718...).
9 |
10 | console.log(Math.PI)
11 | console.log(Math.E)
12 |
13 |
14 | // Metode Math
15 | console.log(Math.abs(-7))
16 | console.log(Math.pow(2,5))
17 | console.log(Math.sqrt(16))
18 | console.log(Math.cbrt(8))
19 | console.log(Math.max(1,13,89,2,75))
20 | console.log(Math.min(1,13,89,2,75))
21 |
22 |
23 |
24 |
25 | // Pembulatan Angka
26 | console.log(Math.round(3.6))
27 | console.log(Math.ceil(4.0000001))
28 | console.log(Math.floor(3.9))
29 | console.log(Math.trunc(4.99999))
30 |
31 |
32 |
33 | // Random Number
34 |
35 | console.log(Math.round(Math.random() * 100))
36 |
37 |
--------------------------------------------------------------------------------
/module-9-date-object/homework/jawaban_date_object.md:
--------------------------------------------------------------------------------
1 |
2 | # Jawaban: Date Object di JavaScript
3 |
4 | ## 1. Apa yang akan ditampilkan oleh kode berikut?
5 | - **Jawaban:** A. Tahun saat ini
6 |
7 | ## 2. Apa hasil dari kode berikut?
8 | - **Jawaban:** A. `7`
9 |
10 | ## 3. Bagaimana cara membuat objek Date untuk tanggal 25 Desember 2025?
11 | - **Jawaban:** B. `new Date(2025, 11, 25)`
12 |
13 | ## 4. Apa output dari kode berikut?
14 | - **Jawaban:** B. `20`
15 |
16 | ## 5. Apa yang akan ditampilkan oleh kode berikut?
17 | - **Jawaban:** B. Menampilkan hari dalam bentuk angka (0-6)
18 |
19 | ## 6. Apa fungsi dari `setFullYear()` dalam JavaScript?
20 | - **Jawaban:** A. Mengatur tahun pada objek Date
21 |
22 | ## 7. Apa output dari kode berikut?
23 | - **Jawaban:** C. `14`
24 |
25 | ## 8. Apa yang akan ditampilkan oleh kode berikut?
26 | - **Jawaban:** B. `29`
27 |
--------------------------------------------------------------------------------
/module-9-date-object/homework/soal_date_object.md:
--------------------------------------------------------------------------------
1 |
2 | # Pertanyaan: Date Object di JavaScript
3 |
4 | ## 1. Apa yang akan ditampilkan oleh kode berikut?
5 | ```javascript
6 | let now = new Date();
7 | console.log(now.getFullYear());
8 | ```
9 | - A. Tahun saat ini
10 | - B. Bulan saat ini
11 | - C. Hari saat ini
12 | - D. Waktu saat ini
13 |
14 | ## 2. Apa hasil dari kode berikut?
15 | ```javascript
16 | let specificDate = new Date("August 20, 2024 10:30:00");
17 | console.log(specificDate.getMonth());
18 | ```
19 | - A. `7`
20 | - B. `8`
21 | - C. `6`
22 | - D. `9`
23 |
24 | ## 3. Bagaimana cara membuat objek Date untuk tanggal 25 Desember 2025?
25 | - A. `new Date(2025, 12, 25)`
26 | - B. `new Date(2025, 11, 25)`
27 | - C. `new Date(2025, 12, 24)`
28 | - D. `new Date(2025, 10, 25)`
29 |
30 | ## 4. Apa output dari kode berikut?
31 | ```javascript
32 | let date = new Date(2024, 7, 20, 10, 30);
33 | console.log(date.getDate());
34 | ```
35 | - A. `19`
36 | - B. `20`
37 | - C. `21`
38 | - D. `22`
39 |
40 | ## 5. Apa yang akan ditampilkan oleh kode berikut?
41 | ```javascript
42 | let today = new Date();
43 | console.log(today.getDay());
44 | ```
45 | - A. Menampilkan hari dalam bentuk teks (misal: "Senin")
46 | - B. Menampilkan hari dalam bentuk angka (0-6)
47 | - C. Menampilkan tanggal dalam bentuk angka (1-31)
48 | - D. Menampilkan bulan dalam bentuk angka (0-11)
49 |
50 | ## 6. Apa fungsi dari `setFullYear()` dalam JavaScript?
51 | - A. Mengatur tahun pada objek Date
52 | - B. Mengatur bulan pada objek Date
53 | - C. Mengatur tanggal pada objek Date
54 | - D. Mengatur waktu pada objek Date
55 |
56 | ## 7. Apa output dari kode berikut?
57 | ```javascript
58 | let startDate = new Date(2024, 7, 20, 10, 30);
59 | let endDate = new Date(2024, 8, 3, 10, 30);
60 | let diff = endDate - startDate;
61 | console.log(diff / (1000 * 3600 * 24));
62 | ```
63 | - A. `12.5`
64 | - B. `13`
65 | - C. `14`
66 | - D. `15`
67 |
68 | ## 8. Apa yang akan ditampilkan oleh kode berikut?
69 | ```javascript
70 | let date = new Date();
71 | date.setDate(29);
72 | console.log(date.getDate());
73 | ```
74 | - A. `28`
75 | - B. `29`
76 | - C. `30`
77 | - D. `31`
78 |
--------------------------------------------------------------------------------
/module-9-date-object/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Tutorial-JavaScript
7 |
8 |
9 |
Tutorial-JavaScript
10 |
11 |
12 |
--------------------------------------------------------------------------------
/module-9-date-object/index.js:
--------------------------------------------------------------------------------
1 | /* 𝗗𝗮𝘁𝗲 𝗢𝗯𝗷𝗲𝗰𝘁 𝗱𝗶 𝗷𝗮𝘃𝗮𝘀𝗰𝗿𝗶𝗽𝘁 */
2 |
3 |
4 | // Apa itu Date Object, Date Object di JavaScript digunakan untuk bekerja dengan tanggal dan waktu. Objek ini memungkinkan kita untuk mendapatkan, mengatur, dan memanipulasi tanggal dan waktu.
5 |
6 | // Membuat Date Object
7 |
8 | // Tanggal dan waktu saat ini
9 | let now = new Date()
10 |
11 |
12 | // Menggunakan string
13 | let specificDate = new Date("August 20, 2024 10:30:00")
14 | // console.log(specificDate)
15 |
16 |
17 | // Menggunakan parameter (tahun, bulan, hari, jam, menit, detik, milidetik)
18 | let customDate = new Date(2024, 7, 20, 10,30)
19 | // console.log(customDate)
20 |
21 | // Bulan ke-8 (Agustus, karena bulan dimulai dari 0)
22 |
23 | // Mengambil Informasi Tanggal dan Waktu
24 | let today = new Date()
25 | // console.log(today.getFullYear())
26 | // console.log(today.getMonth())
27 | // console.log(today.getDate())
28 | // console.log(today.getDay())
29 | // console.log(today.getHours())
30 | // console.log(today.getMinutes())
31 | // console.log(today.getSeconds())
32 | // console.log(today.getMilliseconds())
33 | // console.log(today.getTime())
34 |
35 |
36 |
37 |
38 |
39 |
40 | // Mengatur Tanggal dan Waktu
41 |
42 | let date = new Date()
43 |
44 | // Mengatur tahun menjadi 2025
45 | date.setFullYear(2025)
46 |
47 |
48 | // Mengatur bulan menjadi Desember (11, karena bulan dimulai dari 0)
49 | date.setMonth(11)
50 |
51 |
52 | // Mengatur hari menjadi 25
53 | date.setDate(29)
54 | console.log(date)
55 |
56 |
57 |
58 |
59 | // Perhitungan Waktu dengan Date Object
60 | let startDate = new Date(2024, 7, 20, 10,30)
61 | let endDate = new Date(2024, 8, 3, 10,30)
62 |
63 | let diff = endDate - startDate
64 | console.log(diff) //miliseconds
65 |
66 | let diffIndays = diff / (1000 * 3600 * 24)
67 | console.log(diffIndays)
68 |
69 |
70 |
71 |
72 |
73 |
--------------------------------------------------------------------------------
/module/module-10-arrays/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Tutorial-JavaScript
7 |
8 |
9 |
Tutorial-JavaScript
10 |
11 |
12 |
--------------------------------------------------------------------------------
/module/module-10-arrays/index.js:
--------------------------------------------------------------------------------
1 | /* Array di JavaScript */
2 |
3 | // Apa Itu Array?, Array adalah struktur data yang digunakan untuk menyimpan koleksi elemen, seperti angka atau string, dalam satu variabel. Di JavaScript, array dapat menyimpan berbagai tipe data sekaligus dan memiliki indeks yang dimulai dari 0.
4 |
5 | // Membuat Array
6 |
7 | // 1. Menggunakan notasi array literal:
8 |
9 | let fruits = ["Apple", "Banana", "Mango"];
10 |
11 | // 2. Menggunakan new Array():
12 |
13 | let num = new Array(1, 2, 3, 4, 5);
14 |
15 | // Mengakses Elemen Array
16 |
17 | console.log(fruits[0]); // Apple
18 | console.log(fruits[2]); // Mango
19 |
20 | // Menambah atau Mengubah Elemen Array
21 | fruits[3] = "Strawberry"; // Menambah elemen baru
22 | fruits[0] = "Orange"; // Mengubah elemen yang ada
23 |
24 | console.log(fruits); // ["Orange", "Banana", "Mango"]
25 |
26 | // Manipulasi Array
27 |
28 | let numbers = [1, 2, 3];
29 |
30 | numbers.push(4); // Menambah elemen di akhir: [1, 2, 3, 4]
31 | numbers.pop(); // Menghapus elemen terakhir: [1, 2, 3]
32 | numbers.shift(); // Menghapus elemen pertama: [2, 3]
33 | numbers.unshift(0); // Menambah elemen di awal: [0, 2, 3]
34 |
35 | let newNumbers = numbers.concat([6, 7]); // Menggabungkan array: [1, 2, 3, 4, 5, 6, 7]
36 | let slicedNumbers = numbers.slice(1, 3); // Mengambil elemen dari indeks 1 hingga 2: [2, 3]
37 | numbers.splice(2, 1, 10); // Menghapus elemen di indeks 2 dan menggantinya dengan 10: [1, 2, 10, 4, 5]
38 |
39 | console.log(numbers.indexOf(4)); // 3 (indeks elemen 4)
40 | console.log(numbers.includes(10)); // true
41 |
42 | // Multidimensional Array (Array of Arrays)
43 |
44 | let matrix = [
45 | [1, 2, 3],
46 | [4, 5, 6],
47 | [7, 8, 9]
48 | ];
49 | console.log(matrix[1][2]);
50 |
51 |
52 |
53 |
54 |
55 |
--------------------------------------------------------------------------------
/module/module-11-object/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Tutorial-JavaScript
7 |
8 |
9 |
Tutorial-JavaScript
10 |
11 |
12 |
--------------------------------------------------------------------------------
/module/module-11-object/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Object di JavaScript
3 | *
4 | * @format
5 | */
6 |
7 | // Pengertian Object, Object di JavaScript adalah tipe data yang digunakan untuk menyimpan koleksi data dan entitas yang lebih kompleks. Sebuah object adalah pasangan antara key dan value (disebut juga properti).
8 |
9 | // Membuat Object
10 | // 1. Object Literal
11 | let mobil = {
12 | merk: 'Toyota',
13 | model: 'Avanza',
14 | tahun: 2021,
15 | };
16 |
17 | // 2. Menggunakan Constructor new Object():
18 | let buku = new Object();
19 | buku.judul = "Belajar JavaScript";
20 | buku.penulis = "John Doe";
21 | buku.tahun = 2023;
22 |
23 | // Mengakses Properti Object
24 |
25 | let mahasiswa = {
26 | nama: "Budi",
27 | umur: 21,
28 | jurusan: "Teknik Informatika"
29 | };
30 |
31 | // 1. Menggunakan Notasi Titik (Dot Notation):
32 | console.log(mahasiswa.nama); // Output: Budi
33 |
34 | // 2. Menggunakan Notasi Kurung (Bracket Notation):
35 | console.log(mahasiswa["jurusan"]); // Output: Teknik Informatika
36 |
37 | // Menambah dan Mengubah Properti
38 | // 1. Menambah Properti:
39 | mahasiswa.alamat = "Jakarta";
40 |
41 | // 2. Mengubah Properti:
42 | mahasiswa.umur = 22;
43 |
44 | // Menghapus Properti
45 | delete mahasiswa.alamat;
46 | console.log(mahasiswa.alamat); // Output: undefined
47 |
48 |
49 | // Nested Object
50 | let universitas = {
51 | nama: "Universitas ABC",
52 | fakultas: {
53 | nama: "Fakultas Teknik",
54 | jurusan: "Teknik Informatika"
55 | }
56 | };
57 |
58 | console.log(universitas.fakultas.nama); // Output: Fakultas Teknik
59 |
60 |
61 |
62 | // Destructuring Object
63 | let { nama, umur } = mahasiswa;
64 | console.log(nama); // Output: Budi
65 | console.log(umur); // Output: 22
66 |
--------------------------------------------------------------------------------
/module/module-12-if-else/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Tutorial-JavaScript
7 |
8 |
9 |
Tutorial-JavaScript
10 |
11 |
12 |
--------------------------------------------------------------------------------
/module/module-12-if-else/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * If-Else Statement di JavaScript
3 | *
4 | * @format
5 | */
6 |
7 | // if-else statement adalah salah satu struktur kontrol yang paling dasar di JavaScript. Ini digunakan untuk membuat keputusan berdasarkan kondisi tertentu. Jika kondisi tersebut benar (true), blok kode tertentu akan dijalankan. Jika salah (false), kode lain dapat dijalankan.
8 |
9 | // Sintaks Dasar
10 | if (kondisi) {
11 | // Kode yang dijalankan jika kondisi benar (true)
12 | } else {
13 | // Kode yang dijalankan jika kondisi salah (false)
14 | }
15 |
16 | let age = 18;
17 |
18 | if (age >= 18) {
19 | console.log('You are eligible to vote.');
20 | } else {
21 | console.log('You are not eligible to vote.');
22 | }
23 |
24 | // if-else if digunakan untuk memeriksa beberapa kondisi secara berurutan. Blok kode pertama yang kondisinya benar (true) akan dijalankan, dan eksekusi akan berhenti setelah itu.
25 |
26 | if (kondisi1) {
27 | // Kode jika kondisi1 benar (true)
28 | } else if (kondisi2) {
29 | // Kode jika kondisi2 benar (true)
30 | } else {
31 | // Kode jika semua kondisi salah (false)
32 | }
33 |
34 | let score = 75;
35 |
36 | if (score >= 90) {
37 | console.log('Grade: A');
38 | } else if (score >= 80) {
39 | console.log('Grade: B');
40 | } else if (score >= 70) {
41 | console.log('Grade: C');
42 | } else if (score >= 60) {
43 | console.log('Grade: D');
44 | } else {
45 | console.log('Grade: F');
46 | }
47 |
48 | // Nested If-Else (If-Else Bertingkat), Kita juga bisa menempatkan if-else di dalam blok if-else lainnya. Ini disebut sebagai nested if-else.
49 |
50 | if (kondisi1) {
51 | if (kondisi2) {
52 | // Kode jika kondisi1 dan kondisi2 benar
53 | } else {
54 | // Kode jika kondisi1 benar tapi kondisi2 salah
55 | }
56 | } else {
57 | // Kode jika kondisi1 salah
58 | }
59 |
60 | let num = 10;
61 |
62 | if (num > 0) {
63 | if (num % 2 === 0) {
64 | console.log('The number is positive and even.');
65 | } else {
66 | console.log('The number is positive but odd.');
67 | }
68 | } else {
69 | console.log('The number is non-positive.');
70 | }
71 |
--------------------------------------------------------------------------------
/module/module-13-switch-case/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Tutorial-JavaScript
7 |
8 |
9 |
Tutorial-JavaScript
10 |
11 |
12 |
--------------------------------------------------------------------------------
/module/module-13-switch-case/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Switch-Case di JavaScript
3 | *
4 | * @format
5 | */
6 |
7 | // Switch-case adalah pernyataan kondisional di JavaScript yang digunakan untuk membandingkan sebuah ekspresi dengan beberapa kemungkinan nilai dan mengeksekusi blok kode tertentu berdasarkan kecocokan nilai tersebut. Switch-case sering digunakan sebagai alternatif dari beberapa pernyataan if-else yang berturut-turut ketika kita ingin mengevaluasi sebuah variabel terhadap banyak kemungkinan nilai.
8 |
9 | /*
10 | switch (ekspresi) {
11 | case nilai1:
12 | // Kode yang dijalankan jika ekspresi === nilai1
13 | break;
14 | case nilai2:
15 | // Kode yang dijalankan jika ekspresi === nilai2
16 | break;
17 | // Tambahkan lebih banyak case sesuai kebutuhan
18 | default:
19 | // Kode yang dijalankan jika tidak ada case yang cocok
20 | }
21 | */
22 |
23 | const hari = 3;
24 | let namaHari;
25 |
26 | switch (hari) {
27 | case 1:
28 | namaHari = "Senin";
29 | break;
30 | case 2:
31 | namaHari = "Selasa";
32 | break;
33 | case 3:
34 | namaHari = "Rabu";
35 | break;
36 | case 4:
37 | namaHari = "Kamis";
38 | break;
39 | case 5:
40 | namaHari = "Jumat";
41 | break;
42 | case 6:
43 | namaHari = "Sabtu";
44 | break;
45 | case 7:
46 | namaHari = "Minggu";
47 | break;
48 | default:
49 | namaHari = "Hari tidak valid";
50 | }
51 |
52 | console.log(namaHari); // Output: "Rabu"
53 |
54 |
55 | // Eksekusi Tanpa Break: Jika kamu tidak menempatkan break setelah setiap case, maka semua case di bawahnya akan dijalankan (fall-through) hingga menemukan break atau akhir dari switch-case.
56 |
57 | const warna = "merah";
58 |
59 | switch (warna) {
60 | case "merah":
61 | console.log("Warna adalah merah");
62 | case "biru":
63 | console.log("Warna adalah biru");
64 | case "kuning":
65 | console.log("Warna adalah kuning");
66 | default:
67 | console.log("Warna tidak dikenali");
68 | }
69 |
70 | // Output:
71 | // "Warna adalah merah"
72 | // "Warna adalah biru"
73 | // "Warna adalah kuning"
74 | // "Warna tidak dikenali"
75 |
76 |
--------------------------------------------------------------------------------
/module/module-14-looping/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Tutorial-JavaScript
7 |
8 |
9 |
Tutorial-JavaScript
10 |
11 |
12 |
--------------------------------------------------------------------------------
/module/module-14-looping/index.js:
--------------------------------------------------------------------------------
1 | /* Loop di JavaScript */
2 |
3 | // Loop digunakan untuk menjalankan blok kode berulang kali selama kondisi tertentu terpenuhi. JavaScript mendukung beberapa jenis loop: for, while, dan do-while. Setiap jenis loop memiliki kegunaannya sendiri, tergantung pada kebutuhan.
4 |
5 |
6 | // For Loop
7 |
8 | /*
9 | for (inisialisasi; kondisi; perubahan) {
10 | // kode yang dijalankan selama kondisi benar
11 | }
12 | */
13 |
14 | for (let i = 1; i <= 5; i++) {
15 | console.log(`Iterasi ke-${i}`);
16 | }
17 |
18 |
19 | // While Loop
20 |
21 | /*
22 | while (kondisi) {
23 | // kode yang dijalankan selama kondisi benar
24 | }
25 | */
26 |
27 | let y = 1;
28 |
29 | while (y <= 5) {
30 | console.log(`Iterasi ke-${y}`);
31 | y++;
32 | }
33 |
34 |
35 | // Do-While Loop
36 | /*
37 | do {
38 | // kode yang dijalankan
39 | } while (kondisi);
40 | */
41 |
42 | let z = 1;
43 |
44 | do {
45 | console.log(`Iterasi ke-${z}`);
46 | z++;
47 | } while (z <= 5);
48 |
49 | // For-In Loop
50 |
51 | const objek = { nama: "John", umur: 30 };
52 |
53 | for (let properti in objek) {
54 | console.log(`${properti}: ${objek[properti]}`);
55 | }
56 |
57 | // For-Of Loop
58 | const array = [1, 2, 3, 4, 5];
59 |
60 | for (let nilai of array) {
61 | console.log(nilai);
62 | }
--------------------------------------------------------------------------------
/module/module-15-functions/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Tutorial-JavaScript
7 |
8 |
9 |
Tutorial-JavaScript
10 |
11 |
12 |
--------------------------------------------------------------------------------
/module/module-15-functions/index.js:
--------------------------------------------------------------------------------
1 | /* Function di Javascript */
2 |
3 | // Function di JavaScript adalah blok kode yang dirancang untuk melakukan tugas tertentu dan dapat digunakan berulang kali. Function mempermudah pengorganisasian kode dengan membagi tugas besar menjadi tugas-tugas kecil yang lebih terstruktur.
4 |
5 | // Membuat Function, untuk membuat function, gunakan kata kunci function diikuti dengan nama function, parameter (jika ada), dan blok kode yang akan dijalankan.
6 |
7 | /*
8 |
9 | function namaFunction(parameter1, parameter2, ...) {
10 | // Blok kode yang akan dijalankan
11 | }
12 |
13 | */
14 |
15 | function sapaPengguna(nama) {
16 | console.log("Halo, " + nama + "!");
17 | }
18 |
19 | // Memanggil Function, Untuk menjalankan function, cukup panggil dengan menyebutkan nama function diikuti dengan tanda kurung, serta masukkan nilai untuk parameternya (jika ada).
20 |
21 | sapaPengguna("Budi"); // Output: Halo, Budi!
22 |
23 |
24 | // Parameter dan Argumen, Parameter adalah variabel yang didefinisikan dalam deklarasi function. Argumen adalah nilai yang diberikan saat function dipanggil
25 |
26 | function tambah(a, b) {
27 | return a + b;
28 | }
29 |
30 | console.log(tambah(5, 3)); // Output: 8
31 |
32 | // Di sini, a dan b adalah parameter, sedangkan 5 dan 3 adalah argumen.
33 |
34 | // Return Statement, Function dapat mengembalikan nilai menggunakan return. Setelah return dieksekusi, eksekusi function akan berhenti.
35 |
36 | function kuadrat(x) {
37 | return x * x;
38 | }
39 | console.log(kuadrat(4)); // Output: 16
--------------------------------------------------------------------------------
/module/module-16-functions-expressions/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Tutorial-JavaScript
7 |
8 |
9 |
Tutorial-JavaScript
10 |
11 |
12 |
--------------------------------------------------------------------------------
/module/module-16-functions-expressions/index.js:
--------------------------------------------------------------------------------
1 | /* 𝗙𝘂𝗻𝗰𝘁𝗶𝗼𝗻 𝗘𝘅𝗽𝗿𝗲𝘀𝘀𝗶𝗼𝗻𝘀 */
2 |
3 | // Selain membuat function menggunakan deklarasi (function declaration), Anda juga bisa membuat function menggunakan ekspresi (function expression), di mana function disimpan dalam variabel.
4 |
5 | let kali = function(a, b) {
6 | return a * b;
7 | };
8 |
9 | console.log(kali(4, 5)); // Output: 20
10 |
--------------------------------------------------------------------------------
/module/module-17-arrow-functions/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Tutorial-JavaScript
7 |
8 |
9 |
Tutorial-JavaScript
10 |
11 |
12 |
--------------------------------------------------------------------------------
/module/module-17-arrow-functions/index.js:
--------------------------------------------------------------------------------
1 | /* Arrow Functions */
2 |
3 | // Arrow function adalah cara singkat untuk menulis function expression, diperkenalkan di ES6.
4 |
5 | // contoh function expression
6 |
7 | let kali = function(a, b) {
8 | return a * b;
9 | };
10 |
11 | console.log(kali(4, 5)); // Output: 20
12 |
13 | // contoh arrow function
14 |
15 | // let kali = (a, b) => {
16 | // return a * b;
17 | // };
18 |
19 | // console.log(kali(4, 5)); // Output: 20
--------------------------------------------------------------------------------
/module/module-19-IFFE/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Tutorial-JavaScript
7 |
8 |
9 |
Tutorial-JavaScript
10 |
11 |
12 |
--------------------------------------------------------------------------------
/module/module-19-IFFE/index.js:
--------------------------------------------------------------------------------
1 | /* IIFE (Immediately Invoked Function Expression) */
2 |
3 | // IIFE adalah function yang dipanggil langsung setelah dibuat. Ini berguna untuk mengisolasi variabel dan mencegahnya mengganggu kode lain.
4 |
5 | (function() {
6 | console.log("IIFE dipanggil!");
7 | })(); // Output: IIFE dipanggil!
8 |
--------------------------------------------------------------------------------
/module/module-20-high-order-callback-functions/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Tutorial-JavaScript
7 |
8 |
9 |
Tutorial-JavaScript
10 |
11 |
12 |
--------------------------------------------------------------------------------
/module/module-20-high-order-callback-functions/index.js:
--------------------------------------------------------------------------------
1 | /* Higher-Order Functions dan Callback Functions */
2 |
3 | // Higher-order functions adalah function yang menerima function lain sebagai argumen atau mengembalikan function lain sebagai hasil.
4 |
5 | function manipulasiArray(arr, callback) {
6 | let hasil = [];
7 | for (let i = 0; i < arr.length; i++) {
8 | hasil.push(callback(arr[i]));
9 | }
10 | return hasil;
11 | }
12 |
13 | function kaliDua(x) {
14 | return x * 2;
15 | }
16 |
17 | let angka = [1, 2, 3, 4];
18 | let hasil = manipulasiArray(angka, kaliDua);
19 |
20 | console.log(hasil); // Output: [2, 4, 6, 8]
21 |
22 |
23 | // Callback function adalah function yang dikirim sebagai argumen ke function lain dan dipanggil di dalam function tersebut.
24 |
25 | function selesaikanTugas(tugas, callback) {
26 | console.log("Menyelesaikan tugas: " + tugas);
27 | callback();
28 | }
29 |
30 | function tugasSelesai() {
31 | console.log("Tugas selesai!");
32 | }
33 |
34 | selesaikanTugas("Belajar JavaScript", tugasSelesai);
35 |
--------------------------------------------------------------------------------
/module/module-21-recursion/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Tutorial-JavaScript
7 |
8 |
9 |
Tutorial-JavaScript
10 |
11 |
12 |
--------------------------------------------------------------------------------
/module/module-21-recursion/index.js:
--------------------------------------------------------------------------------
1 | /* Recursion di JavaScript */
2 |
3 | // Recursion terjadi ketika sebuah function memanggil dirinya sendiri secara langsung atau tidak langsung untuk menyelesaikan sebagian dari masalah yang diberikan. Setiap panggilan recursion membawa masalah tersebut lebih dekat ke kondisi dasar (base case), yaitu kondisi di mana recursion berhenti.
4 |
5 | /*
6 | Struktur Recursion
7 | Recursion biasanya terdiri dari dua bagian penting:
8 | 1. Base Case (Kondisi Dasar): Bagian dari function yang menghentikan recursion. Ini adalah kondisi di mana masalah tidak lagi memerlukan pemanggilan function secara rekursif.
9 |
10 | 2. Recursive Case: Bagian dari function yang memecah masalah menjadi sub-masalah yang lebih kecil dan memanggil dirinya sendiri.
11 | */
12 |
13 | // Contoh Recursion: Faktorial
14 | // Faktorial dari sebuah bilangan adalah hasil kali dari bilangan tersebut dengan semua bilangan bulat positif di bawahnya. Faktorial dari n ditulis sebagai n!. Sebagai contoh, 5! (dibaca "5 faktorial") adalah 5 * 4 * 3 * 2 * 1, yang sama dengan 120.
15 |
16 | function faktorial(n) {
17 | // Base case
18 | if (n === 0) {
19 | return 1;
20 | }
21 | // Recursive case
22 | return n * faktorial(n - 1);
23 | }
24 |
25 | console.log(faktorial(5)); // Output: 120
26 |
--------------------------------------------------------------------------------
/module/module-22-scope-hoisting/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Tutorial-JavaScript
7 |
8 |
9 |
Tutorial-JavaScript
10 |
11 |
12 |
--------------------------------------------------------------------------------
/module/module-22-scope-hoisting/index.js:
--------------------------------------------------------------------------------
1 | /* Scope dan Hoisting */
2 |
3 | /*
4 | Scope mengacu pada aksesibilitas variabel dan fungsi dalam berbagai bagian kode Anda. JavaScript memiliki dua jenis scope utama:
5 | 1. Global Scope
6 | 2. Local Scope
7 |
8 | */
9 |
10 | // Global Scope, Variabel yang dideklarasikan di luar fungsi atau block apa pun memiliki global scope. Variabel ini dapat diakses dari mana saja dalam kode Anda, baik di dalam fungsi maupun di luar fungsi.
11 |
12 | let globalVar = "Saya global";
13 |
14 | function contohGlobal() {
15 | console.log(globalVar); // Akses variabel global
16 | }
17 |
18 | contohGlobal(); // Output: Saya global
19 | console.log(globalVar); // Output: Saya global
20 |
21 |
22 | // Local Scope, Variabel yang dideklarasikan di dalam fungsi atau block hanya dapat diakses di dalam fungsi atau block tersebut. Variabel ini memiliki local scope.
23 |
24 | /*
25 | Ada dua jenis local scope dalam JavaScript:
26 | 1. Function Scope: Variabel yang dideklarasikan dengan var, let, atau const di dalam fungsi.
27 | 2. Block Scope: Variabel yang dideklarasikan dengan let atau const di dalam block ({}).
28 | */
29 |
30 | // Function Scope
31 | function contohLocal() {
32 | let localVar = "Saya lokal";
33 | console.log(localVar); // Output: Saya lokal
34 | }
35 |
36 | contohLocal();
37 | console.log(localVar); // Error: localVar is not defined
38 |
39 | // Block Scope
40 | if (true) {
41 | let blockVar = "Saya block-scoped";
42 | console.log(blockVar); // Output: Saya block-scoped
43 | }
44 |
45 | console.log(blockVar); // Error: blockVar is not defined
46 |
47 | // Hoisting adalah mekanisme di mana deklarasi variabel dan fungsi "diangkat" (hoisted) ke bagian atas scope-nya sebelum kode dieksekusi. Ini berarti Anda dapat menggunakan variabel dan fungsi sebelum dideklarasikan dalam kode, meskipun nilai variabel tidak diangkat.
48 |
49 | // Hoisting pada Variabel, JavaScript hanya mengangkat deklarasi variabel, bukan inisialisasinya. Jadi, variabel yang diakses sebelum dideklarasikan akan menghasilkan undefined jika menggunakan var, dan error jika menggunakan let atau const.
50 |
51 | // Contoh Hoisting dengan var:
52 | console.log(hoistedVar); // Output: undefined
53 | var hoistedVar = "Saya terhoist";
54 | console.log(hoistedVar); // Output: Saya terhoist
55 |
56 |
57 | // Contoh dengan let dan const:
58 | console.log(hoistedLet); // Error: Cannot access 'hoistedLet' before initialization
59 | let hoistedLet = "Saya tidak terhoist";
60 |
61 | console.log(hoistedConst); // Error: Cannot access 'hoistedConst' before initialization
62 | const hoistedConst = "Saya tidak terhoist";
63 |
64 |
65 | // Hoisting pada Fungsi, Fungsi yang dideklarasikan dengan cara function declaration akan diangkat sepenuhnya (baik deklarasi maupun definisi), sehingga dapat dipanggil sebelum dideklarasikan.
66 |
67 | console.log(fungsiTerhoist()); // Output: Saya fungsi yang terhoist
68 |
69 | function fungsiTerhoist() {
70 | return "Saya fungsi yang terhoist";
71 | }
72 |
73 | // Namun, jika menggunakan function expression (termasuk dengan let, const, atau var), hanya variabel yang diangkat, bukan fungsinya.
74 |
75 | // Contoh Hoisting pada Function Expression:
76 |
77 | console.log(fungsiTidakTerhoist); // Output: undefined
78 | var fungsiTidakTerhoist = function() {
79 | return "Saya fungsi yang tidak terhoist";
80 | };
81 |
82 | console.log(fungsiTidakTerhoist()); // Output: Saya fungsi yang tidak terhoist
83 |
84 |
85 |
--------------------------------------------------------------------------------
/module/module-23-oop/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Tutorial-JavaScript
7 |
8 |
9 |
Tutorial-JavaScript
10 |
11 |
12 |
--------------------------------------------------------------------------------
/module/module-23-oop/index.js:
--------------------------------------------------------------------------------
1 | /* OOP di JavaScript */
2 |
3 | // Pemrograman Berbasis Objek (OOP) adalah paradigma pemrograman yang berfokus pada penggunaan "objek" untuk mewakili data dan fungsionalitas dalam program. Konsep OOP memungkinkan Anda untuk memodelkan elemen-elemen dunia nyata dalam kode, membuatnya lebih mudah dipahami dan dikelola.
4 |
5 | // Dasar-Dasar Objek di JavaScript, Objek adalah kumpulan pasangan kunci-nilai (key-value pairs) yang dapat mewakili data dan perilaku. Di JavaScript, objek bisa dibuat dengan cara yang sederhana.
6 |
7 | let mobil = {
8 | merk: "Toyota",
9 | model: "Avanza",
10 | tahun: 2021,
11 | start: function() {
12 | console.log("Mobil dimulai");
13 | },
14 | info: function() {
15 | console.log(`Mobil: ${this.merk} ${this.model}, Tahun: ${this.tahun}`);
16 | }
17 | };
18 |
19 | mobil.start(); // Output: Mobil dimulai
20 | mobil.info(); // Output: Mobil: Toyota Avanza, Tahun: 2021
21 |
22 | // Contructor Function
23 |
24 | function Mobil(merk, model, tahun) {
25 | this.merk = merk;
26 | this.model = model;
27 | this.tahun = tahun;
28 |
29 | this.start = function() {
30 | console.log(`${this.merk} dimulai`);
31 | };
32 |
33 | this.info = function() {
34 | console.log(`Mobil: ${this.merk} ${this.model}, Tahun: ${this.tahun}`);
35 | };
36 | }
37 |
38 | let mobil1 = new Mobil("Toyota", "Avanza", 2021);
39 | let mobil2 = new Mobil("Honda", "Civic", 2020);
40 |
41 | mobil1.start(); // Output: Toyota dimulai
42 | mobil2.info(); // Output: Mobil: Honda Civic, Tahun: 2020
43 |
44 |
45 | // Konsep Prototypal Inheritance
46 | // JavaScript menggunakan prototypal inheritance, yang berarti objek dapat mewarisi properti dan method dari objek lain.
47 |
48 | function Hewan(nama, jenis) {
49 | this.nama = nama;
50 | this.jenis = jenis;
51 | }
52 |
53 | Hewan.prototype.makan = function() {
54 | console.log(`${this.nama} sedang makan.`);
55 | };
56 |
57 | let kucing = new Hewan("Kitty", "Kucing");
58 | kucing.makan(); // Output: Kitty sedang makan.
59 |
60 | // Prototype adalah objek dari mana objek lain mewarisi properti dan method.
61 |
62 |
--------------------------------------------------------------------------------
/module/module-24-oop-classes/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Tutorial-JavaScript
7 |
8 |
9 |
Tutorial-JavaScript
10 |
11 |
12 |
--------------------------------------------------------------------------------
/module/module-24-oop-classes/index.js:
--------------------------------------------------------------------------------
1 | /*
2 | ES6 Classes: Cara Modern untuk OOP di JavaScript
3 | */
4 |
5 | // Dengan ES6, JavaScript memperkenalkan sintaks class yang lebih mudah dipahami dan digunakan.
6 |
7 | class Mobil {
8 | constructor(merk, model, tahun) {
9 | this.merk = merk;
10 | this.model = model;
11 | this.tahun = tahun;
12 | }
13 |
14 | start() {
15 | console.log(`${this.merk} dimulai`);
16 | }
17 |
18 | info() {
19 | console.log(`Mobil: ${this.merk} ${this.model}, Tahun: ${this.tahun}`);
20 | }
21 | }
22 |
23 | let mobil1 = new Mobil('Toyota', 'Avanza', 2021);
24 | let mobil2 = new Mobil('Honda', 'Civic', 2020);
25 |
26 | mobil1.start(); // Output: Toyota dimulai
27 | mobil2.info(); // Output: Mobil: Honda Civic, Tahun: 2020
28 |
29 | /*
30 | Class adalah blueprint untuk membuat objek.
31 | Constructor adalah method khusus untuk menginisialisasi objek baru.
32 | */
33 |
--------------------------------------------------------------------------------
/module/module-25-encapsulation/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Tutorial-JavaScript
7 |
8 |
9 |
Tutorial-JavaScript
10 |
11 |
12 |
--------------------------------------------------------------------------------
/module/module-25-encapsulation/index.js:
--------------------------------------------------------------------------------
1 | /*
2 | Encapsulation
3 | */
4 |
5 | // Encapsulation adalah konsep untuk membatasi akses ke properti dan method dari objek. JavaScript mengimplementasikan ini dengan penggunaan simbol underscore _ atau menggunakan closures.
6 |
7 |
8 |
9 |
10 | // Penggunaan _balance mengindikasikan bahwa properti ini "pribadi", meskipun masih bisa diakses (JavaScript tidak mendukung encapsulation private secara ketat di ES6).
--------------------------------------------------------------------------------
/module/module-26-polymorphism/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Tutorial-JavaScript
7 |
8 |
9 |
Tutorial-JavaScript
10 |
11 |
12 |
--------------------------------------------------------------------------------
/module/module-26-polymorphism/index.js:
--------------------------------------------------------------------------------
1 | /*
2 | Polymorphism
3 | */
4 |
5 | // Polymorphism memungkinkan Anda untuk menggunakan method dengan nama yang sama pada objek yang berbeda.
6 |
7 | class Hewan {
8 | bersuara() {
9 | console.log("Hewan bersuara.");
10 | }
11 | }
12 |
13 | class Kucing extends Hewan {
14 | bersuara() {
15 | console.log("Meong!");
16 | }
17 | }
18 |
19 | class Anjing extends Hewan {
20 | bersuara() {
21 | console.log("Guk Guk!");
22 | }
23 | }
24 |
25 | let hewan = new Hewan();
26 | let kucing = new Kucing();
27 | let anjing = new Anjing();
28 |
29 | hewan.bersuara(); // Output: Hewan bersuara.
30 | kucing.bersuara(); // Output: Meong!
31 | anjing.bersuara(); // Output: Guk Guk!
32 |
33 |
34 | // Method bersuara() digunakan pada semua class, tetapi memberikan output yang berbeda sesuai dengan class-nya.
--------------------------------------------------------------------------------
/module/module-27-abstraction/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Tutorial-JavaScript
7 |
8 |
9 |
Tutorial-JavaScript
10 |
11 |
12 |
--------------------------------------------------------------------------------
/module/module-27-abstraction/index.js:
--------------------------------------------------------------------------------
1 | /*
2 | Abstraction (Abstraksi)
3 | */
4 |
5 | // Abstraction adalah proses menyembunyikan detail implementasi dari pengguna dan hanya menampilkan esensi atau fitur utama. Ini dilakukan dengan menggunakan abstract class atau interface (tidak sepenuhnya didukung dalam JavaScript, tetapi dapat disimulasikan).
6 |
7 | class Shape {
8 | constructor(name) {
9 | if (this.constructor === Shape) {
10 | throw new Error("Cannot instantiate abstract class");
11 | }
12 | this.name = name;
13 | }
14 |
15 | calculateArea() {
16 | throw new Error("Abstract method must be implemented");
17 | }
18 | }
19 |
20 | class Rectangle extends Shape {
21 | constructor(width, height) {
22 | super("Rectangle");
23 | this.width = width;
24 | this.height = height;
25 | }
26 |
27 | calculateArea() {
28 | return this.width * this.height;
29 | }
30 | }
31 |
32 | let myRectangle = new Rectangle(10, 20);
33 | console.log(myRectangle.calculateArea()); // Output: 200
34 |
35 |
36 | /*
37 | Shape adalah abstraksi yang tidak dapat diinstansiasi secara langsung.
38 | Subclass seperti Rectangle harus mengimplementasikan method calculateArea.
39 | */
40 |
41 |
--------------------------------------------------------------------------------
/module/module-28-dom/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | DOM Structure
7 |
19 |
20 |
21 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/module/module-9-date-object/index.js:
--------------------------------------------------------------------------------
1 | /* 𝗗𝗮𝘁𝗲 𝗢𝗯𝗷𝗲𝗰𝘁 𝗱𝗶 𝗷𝗮𝘃𝗮𝘀𝗰𝗿𝗶𝗽𝘁 */
2 |
3 |
4 | // Apa itu Date Object, Date Object di JavaScript digunakan untuk bekerja dengan tanggal dan waktu. Objek ini memungkinkan kita untuk mendapatkan, mengatur, dan memanipulasi tanggal dan waktu.
5 |
6 | // Membuat Date Object
7 |
8 | // Tanggal dan waktu saat ini
9 | let now = new Date();
10 |
11 | // Menggunakan string
12 | let specificDate = new Date("August 20, 2024 10:30:00");
13 |
14 | // Menggunakan parameter (tahun, bulan, hari, jam, menit, detik, milidetik)
15 | let customDate = new Date(2024, 7, 20, 10, 30); // Bulan ke-8 (Agustus, karena bulan dimulai dari 0)
16 |
17 | // Mengambil Informasi Tanggal dan Waktu
18 |
19 | let today = new Date();
20 |
21 | console.log(today.getFullYear()); // 2024
22 | console.log(today.getMonth()); // 7 (Agustus)
23 | console.log(today.getDate()); // 20
24 | console.log(today.getDay()); // 2 (Selasa)
25 | console.log(today.getHours()); // Jam saat ini
26 | console.log(today.getMinutes()); // Menit saat ini
27 | console.log(today.getSeconds()); // Detik saat ini
28 | console.log(today.getMilliseconds()); // Milidetik saat ini
29 | console.log(today.getTime()); // Waktu dalam milidetik sejak 1 Januari 1970
30 |
31 | // Mengatur Tanggal dan Waktu
32 |
33 | let date = new Date();
34 |
35 | // Mengatur tahun menjadi 2025
36 | date.setFullYear(2025);
37 |
38 | // Mengatur bulan menjadi Desember (11, karena bulan dimulai dari 0)
39 | date.setMonth(11);
40 |
41 | // Mengatur hari menjadi 25
42 | date.setDate(25);
43 |
44 | console.log(date); // Output: Thu Dec 25 2025 ...
45 |
46 | // Perhitungan Waktu dengan Date Object
47 |
48 | let startDate = new Date("August 1, 2024");
49 | let endDate = new Date("August 20, 2024");
50 |
51 | let differenceInTime = endDate - startDate;
52 | let differenceInDays = differenceInTime / (1000 * 3600 * 24); // Mengonversi milidetik ke hari
53 |
54 | console.log(differenceInDays); // 19 hari
55 |
56 |
57 |
58 |
--------------------------------------------------------------------------------
/template-module/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Tutorial-JavaScript
7 |
8 |
9 |