bellshade · mergify · Nov 24, 2021 · Nov 23, 2021 · Nov 23, 2021 · Nov 24, 2021
@@ -54,7 +54,6 @@ Jalur belajar ini diperuntukkan bagi kalian yang masih awam atau baru saja terju
 |   06    |         Fungsi         |                   Mengenal konsep fungsi dalam teknik pemograman                    |           [Function](learn/Basic/008_function)           |                                        [WPU - Function](https://youtu.be/6-UqHXBtYkg)                                         |
 |   07    |      Konsep Array      |     Memahami konsep Array dan mencoba untuk mengimplemntasikannya dalam program     |              [Array](learn/Basic/009_array)              |                                          [WPU - Array](https://youtu.be/CW5pfpafgDE)                                          |
 |   08    |      Konsep Objek      |       Mengenal konsep Object yang menjadi konsep paling penting di Javascript       |             [Object](learn/Basic/011_object)             |                                         [WPU - Object](https://youtu.be/RKsapPaUgww)                                          |
-|   09    |         Class          |              Memahami penggunaan _class_ dalam pembuatan sebuah objek               |            [Classes](learn/Basic/013_classes)             |                                       [WPU - Prototype](https://youtu.be/2CQhh_6xU3s)                                          |
 
 ### :two: Jalur Belajar DOM
 

@@ -10,4 +10,4 @@ console.log("Halo Dunia, saya belajar bahasa pemrograman javascript");
 
 Atau jika ingin menjalankan kodenya, cek kode [ini](helloWorld.js).
 
-[<img align="right" src="https://cdn.discordapp.com/attachments/696006258792333352/911046517756944414/Next-next.png" />](../002_variable_datatype)
+[<img align="right" src="https://api.bellshade.org/badge/navigation?badgeType=next&text=Variable and Datatype" />](../002_variable_datatype)
@@ -73,6 +73,6 @@ console.log(umur); // 15
 
 Cek file [pertama](variableAndDataTypes1.js) dan [kedua](variableAndDataTypes2.js) untuk contoh lebih lengkapnya.
 
-[<img align="left" src="https://cdn.discordapp.com/attachments/696006258792333352/911046517970833428/Previous-prev.png" />](../001_hello_world)
+[<img align="left" src="https://api.bellshade.org/badge/navigation?badgeType=previous&text=Hello World" />](../001_hello_world)
 
-[<img align="right" src="https://cdn.discordapp.com/attachments/696006258792333352/911046517756944414/Next-next.png" />](../003_operator)
+[<img align="right" src="https://api.bellshade.org/badge/navigation?badgeType=next&text=Operator" />](../003_operator)
@@ -84,6 +84,6 @@ Operator ini bisa digunakan sebagai conditional statement if atau else if.
 
 Untuk contoh kode, cek contoh untuk [operator perbandingan](comparisonOperators.js), [operator logika](logicalOperator.js), [nullish coalescing operator](nullishCoalescingOperators.js), [ternary operator](ternaryOperator.js), [in operator](inOperator.js), [optional chaining operator](optionalChainingOperator.js).
 
-[<img align="left" src="https://cdn.discordapp.com/attachments/696006258792333352/911046517970833428/Previous-prev.png" />](../002_variable_datatype)
+[<img align="left" src="https://api.bellshade.org/badge/navigation?badgeType=previous&text=Variable and Datatype" />](../002_variable_datatype)
 
-[<img align="right" src="https://cdn.discordapp.com/attachments/696006258792333352/911046517756944414/Next-next.png" />](../004_string_and_string_manipulation)
+[<img align="right" src="https://api.bellshade.org/badge/navigation?badgeType=next&text=String" />](../004_string_and_string_manipulation)
@@ -71,6 +71,6 @@ console.log(teks.replace("siti", "budi")); // Perkenalkan nama saya budi
 
 Atau lihat contoh yang [ini](stringManipulation.js#L35-L36)
 
-[<img align="left" src="https://cdn.discordapp.com/attachments/696006258792333352/911046517970833428/Previous-prev.png" />](../003_operator)
+[<img align="left" src="https://api.bellshade.org/badge/navigation?badgeType=previous&text=Operator" />](../003_operator)
 
-[<img align="right" src="https://cdn.discordapp.com/attachments/696006258792333352/911046517756944414/Next-next.png" />](../005_conditioning)
+[<img align="right" src="https://api.bellshade.org/badge/navigation?badgeType=next&text=Conditioning" />](../005_conditioning)
@@ -70,6 +70,6 @@ switch (buah) {
 
 Lihat kode lengkapnya [disini](conditionalStatements.js).
 
-[<img align="left" src="https://cdn.discordapp.com/attachments/696006258792333352/911046517970833428/Previous-prev.png" />](../004_string_and_string_manipulation)
+[<img align="left" src="https://api.bellshade.org/badge/navigation?badgeType=previous&text=String" />](../004_string_and_string_manipulation)
 
-[<img align="right" src="https://cdn.discordapp.com/attachments/696006258792333352/911046517756944414/Next-next.png" />](../006_arithmetic_operation)
+[<img align="right" src="https://api.bellshade.org/badge/navigation?badgeType=next&text=Arithmetic Operation" />](../006_arithmetic_operation)
@@ -64,6 +64,6 @@ Contoh Penggunaan :
 - [Increment](arithmeticOperation.js#L35-L38)
 - [Decrement](arithmeticOperation.js#L40-L43)
 
-[<img align="left" src="https://cdn.discordapp.com/attachments/696006258792333352/911046517970833428/Previous-prev.png" />](../005_conditioning)
+[<img align="left" src="https://api.bellshade.org/badge/navigation?badgeType=previous&text=Conditioning" />](../005_conditioning)
 
-[<img align="right" src="https://cdn.discordapp.com/attachments/696006258792333352/911046517756944414/Next-next.png" />](../007_looping)
+[<img align="right" src="https://api.bellshade.org/badge/navigation?badgeType=next&text=Looping" />](../007_looping)
@@ -52,7 +52,7 @@ while (angka < 5) {
 
 > Jangan beri parameter **true** pada while loop, atau itu akan berjalan selamanya!
 
-3. `dohile` loop
+3. `do..while` loop
 
 Pengulangan yang dilakukan `do while loop` ini mirip dengan `while` loop, tetapi ada satu perbedaan ya itu `do` di mana didalamnya akan tetap di eksekusi. Selanjutnya akan menjalankan instruksi `while`. Instruksi di dalam `do` akan tetap dijalankan oleh `while` di bawahnya.
 
@@ -113,6 +113,6 @@ for (let i = 0; i <= 20; i++) {
 
 Lihat contoh dari [Jenis Looping](forWhileLoop.js), [break](break.js), dan [continue](continue.js).
 
-[<img align="left" src="https://cdn.discordapp.com/attachments/696006258792333352/911046517970833428/Previous-prev.png" />](../006_arithmetic_operation)
+[<img align="left" src="https://api.bellshade.org/badge/navigation?badgeType=previous&text=Arithmetic Operation" />](../006_arithmetic_operation)
 
-[<img align="right" src="https://cdn.discordapp.com/attachments/696006258792333352/911046517756944414/Next-next.png" />](../008_function)
+[<img align="right" src="https://api.bellshade.org/badge/navigation?badgeType=next&text=Function" />](../008_function)
@@ -92,6 +92,6 @@ console.log(contohReturningFunction);
 
 Lihat contoh lengkap untuk [Basic Function](functionBasic.js), [Argumen dan Parameter](parameterAndArgument.js), dan [Returning function](functionReturn.js).
 
-[<img align="left" src="https://cdn.discordapp.com/attachments/696006258792333352/911046517970833428/Previous-prev.png" />](../007_looping)
+[<img align="left" src="https://api.bellshade.org/badge/navigation?badgeType=previous&text=Looping" />](../007_looping)
 
-[<img align="right" src="https://cdn.discordapp.com/attachments/696006258792333352/911046517756944414/Next-next.png" />](../009_array)
+[<img align="right" src="https://api.bellshade.org/badge/navigation?badgeType=next&text=Array" />](../009_array)
@@ -14,6 +14,6 @@ Contoh penggunaan: [Mengakses Array](arrayBasic.js#L7-L11)
 Untuk mengambil panjang (banyak data) yang ada di dalam array kita bisa menggunakan method `length` yang merupakan built-in function pada array.
 Contoh penggunaan: [Mengecek Panjang Array](arrayBasic.js#L13-L17)
 
-[<img align="left" src="https://cdn.discordapp.com/attachments/696006258792333352/911046517970833428/Previous-prev.png" />](../008_function)
+[<img align="left" src="https://api.bellshade.org/badge/navigation?badgeType=previous&text=Function" />](../008_function)
 
-[<img align="right" src="https://cdn.discordapp.com/attachments/696006258792333352/911046517756944414/Next-next.png" />](../010_array_manipulation)
+[<img align="right" src="https://api.bellshade.org/badge/navigation?badgeType=next&text=Array Manipulation" />](../010_array_manipulation)
@@ -171,6 +171,6 @@ console.log(totalNumber);	// 115
 // nilai totalNumber menjadi 115
 ```
 
-[<img align="left" src="https://cdn.discordapp.com/attachments/696006258792333352/911046517970833428/Previous-prev.png" />](../009_array)
+[<img align="left" src="https://api.bellshade.org/badge/navigation?badgeType=previous&text=Array" />](../009_array)
 
-[<img align="right" src="https://cdn.discordapp.com/attachments/696006258792333352/911046517756944414/Next-next.png" />](../011_object)
+[<img align="right" src="https://api.bellshade.org/badge/navigation?badgeType=next&text=Object" />](../011_object)
@@ -34,6 +34,6 @@ dataDiri.perkenalan(); // menghasilkan tampilan pada konsol yaitu "Hai, nama say
 ```
 Dari contoh di atas, _object_ `dataDiri` memiliki _method_ yang diberi nama perkenalan. _Method_ perkenalan kemudian dipanggil setelah `dataDiri` dideklarasikan dan menjalankan perintah dalam fungsinya.
 
-[<img align="left" src="https://cdn.discordapp.com/attachments/696006258792333352/911046517970833428/Previous-prev.png" />](../010_array_manipulation)
+[<img align="left" src="https://api.bellshade.org/badge/navigation?badgeType=previous&text=Array Manipulation" />](../010_array_manipulation)
 
-[<img align="right" src="https://cdn.discordapp.com/attachments/696006258792333352/911046517756944414/Next-next.png" />](../012_object_manipulation)
+[<img align="right" src="https://api.bellshade.org/badge/navigation?badgeType=next&text=Object Manipulation" />](../012_object_manipulation)
@@ -60,6 +60,6 @@ console.log(Object.assign(object1, object2)); // { firstName: "Brendan", lastNam
 ```
 Contoh penggunaan: [Object.assign()](objectAssign.js)
 
-[<img align="left" src="https://cdn.discordapp.com/attachments/696006258792333352/911046517970833428/Previous-prev.png" />](../011_object)
+[<img align="left" src="https://api.bellshade.org/badge/navigation?badgeType=previous&text=Object" />](../011_object)
 
-[<img align="right" src="https://cdn.discordapp.com/attachments/696006258792333352/911046517756944414/Next-next.png" />](../013_classes)
+[<img align="right" src="https://api.bellshade.org/badge/navigation?badgeType=next&text=Strict Mode" />](../013_strict_mode)
@@ -72,6 +72,6 @@ console.log(user); // ReferenceError: user is not defined
 export default user;
 ```
 
-[<img align="left" src="https://cdn.discordapp.com/attachments/696006258792333352/911046517970833428/Previous-prev.png" />](../013_classes)
+[<img align="left" src="https://api.bellshade.org/badge/navigation?badgeType=previous&text=Object Manipulation" />](../012_object_manipulation)
 
-[<img align="right" src="https://cdn.discordapp.com/attachments/696006258792333352/911046517756944414/Next-next.png" />](../015_basic_program)
+[<img align="right" src="https://api.bellshade.org/badge/navigation?badgeType=next&text=Basic Program" />](../014_basic_program)
@@ -0,0 +1,10 @@
+# Basic Program
+
+Setelah kalian mempelajari materi - materi basic pastinya kalian sudah bisa membuat sebuah program sederhana untuk mengasah kemampuan kalian.
+
+Di folder ini berisi beberapa contoh program sederhana hasil dari implementasi pembelajaran sebelumnya.
+
+> Agar kemampuan _programming_ kalian semakin terasah maka hal yang harus dilakukan adalah perbanyak praktek.
+> Dengan begitu kalian bisa tahu bagaimana program sesungguhnya bisa berjalan dengan baik.
+
+[<img align="left" src="https://api.bellshade.org/badge/navigation?badgeType=previous&text=Strict Mode" />](../013_strict_mode)
@@ -46,9 +46,7 @@ Memanipulasikan **Array** dengan beberapa jenis metode seperti `Filter`, `Map`,
 Mengenal **Object** pada **Javascript** serta cara penggunaannya.
 12. [**Manipulasi Object**](012_object_manipulation/)<br> 
 Memanipulasi **Object** dengan beberapa metode seperti `Object.keys()`, `Object.values()`, `Object.enties()`, dan `Object.assign()`.
-13. [**Class**](013_classes)<br> 
-Penjelasan **Class** pada **Javascript** serta cara penggunaannya.
-14. [**Strict Mode**](014_strict_mode)<br> 
+13. [**Strict Mode**](013_strict_mode)<br> 
 Mengenal **Strict Mode** dan penggunaannya pada **Javascript**.
-15. [**Basic Program**](015_basic_program)<br> 
+14. [**Basic Program**](014_basic_program)<br> 
 Berisi contoh program sederhana dengan menggunakan fungsi, rekayasa string, logika.
@@ -0,0 +1,72 @@
+# Object Oriented Programming (OOP)
+
+## Apa itu OOP
+
+OOP (Object Oriented Programming) atau dalam bahasa Indonesia disebut Pemrograman Berbasis Objek adalah sebuah paradigma pemrograman yang menggunakan [objek](../../Basic/011_object) sebagai representasi dari sebuah / sebagian program.
+
+Nantinya [objek](../../Basic/011_object) yang dibuat dapat saling berinteraksi satu sama lain, sehingga dapat menyelesaikan suatu masalah dengan lebih mudah dan efisien.
+
+## Bekerja dengan OOP
+
+Dalam JavaScript kita menggunakan `class` agar dapat membuat program yang berbasis objek. `class` adalah sebuah _blueprint_ untuk membuat sebuah objek yang nantinya akan kita gunakan.
+
+### Membuat `class`
+
+```js
+class Produk {
+
+}
+```
+
+Untuk membuat sebuah _instance_ dari `class` Produk, kita gunakan keyword `new` dan diikuti nama `class` tersebut.
+
+```js
+const produk1 = new Produk()
+```
+
+Selamat kalian telah membuat sebuah `class` dan `object` yang dimana menjadi pondasi awal untuk belajar konsep OOP ini.
+
+### Cara lain dalam membuat _Blueprint_
+
+Sebelum JavaScript memiliki sintaks `class`, kita membuat sebuah objek menggunakan `function` sebagai _blueprint_ nya. `class` merupakan sintaks terbaru di ES6 yang diciptakan agar cara dalam membuat program OOP sama dengan bahasa pemrograman lain seperti Java atau PHP. Tetapi sebenarnya apa yang dilakukan oleh `class` adalah sama dengan menggunakan `function`.
+
+```js
+function Produk () {
+
+}
+
+const produk1 = new Produk();
+```
+
+Kedepannya kita akan menggunakan `class` dalam membuat sebuah objek.
+
+### Alasan menggunakan `class`
+
+Mungkin kalian bertanya - tanya kenapa kita harus menggunakan `class` untuk membuat sebuah objek. Sebelum itu coba kita lihat kode di bawah ini.
+
+```js
+const produk1 = {
+  id: 1,
+  nama: 'Produk Satu',
+  harga: 10000
+};
+```
+
+Kita biasa membuat sebuah objek dengan cara di atas, tentunya sangat mudah. Namun bagaimana jika kita ingin membuat objek lebih banyak lagi, misalkan 10, 100, atau bahkan 1000. Nah, di sinilah `class` dapat kita andalkan.
+
+```js
+class Produk {
+  constructor(id, nama, harga) {
+    this.id = id;
+    this.nama = nama;
+    this.harga = harga
+  };
+};
+
+const produk1 = new Produk(1, 'Produk Satu', 1000);
+const produk2 = new Produk(2, 'Produk Dua', 2000);
+const produk3 = new Produk(3, 'Produk Tiga', 3000);
+```
+
+> `constructor` adalah sebuah function yang akan dijalankan saat membuat objek baru dari sebuah `class` atau biasa disebut dengan instansiasi (instance).
+> Biasanya digunakan untuk mendefinisikan sebuah properti yang dimiliki sebuah objek.
@@ -0,0 +1,15 @@
+class Produk {
+  constructor(id, nama, harga) {
+    this.id = id;
+    this.nama = nama;
+    this.harga = harga;
+  }
+}
+
+const produk1 = new Produk(1, "Produk Satu", 1000);
+const produk2 = new Produk(2, "Produk Dua", 2000);
+const produk3 = new Produk(3, "Produk Tiga", 3000);
+
+console.log(produk1.nama);
+console.log(produk2.nama);
+console.log(produk3.nama);
Original file line number	Diff line number	Diff line change
Expand Up		@@ -10,4 +10,4 @@ console.log("Halo Dunia, saya belajar bahasa pemrograman javascript");

		Atau jika ingin menjalankan kodenya, cek kode [ini](helloWorld.js).

		[<img align="right" src="https://cdn.discordapp.com/attachments/696006258792333352/911046517756944414/Next-next.png" />](../002_variable_datatype)
		[<img align="right" src="https://api.bellshade.org/badge/navigation?badgeType=next&text=Variable and Datatype" />](../002_variable_datatype)